Publicaciones etiquetadas ‘javascript’

Autenticación con Google+ API con Javascript

Algo fundamental en muchos sitios es la posibilidad de que los usuarios se pueda autenticar con las diferentes redes sociales para facilitar el proceso de ingreso (evita que los usuarios tengan que crear un usuario y password). Este sencillo tutorial busca explicar como poder realizar la autenticación para nuestro sitio web usando Google Plus usando la API de Javascript. 1- En nuestra pagina referenciar la libreria de Google Plus 2- Debemos crear nuestra aplicación en el Administrador. Para ellos ingresamos a https://console.developers.google.com 3- Dentro de la consola creamos un nuevo proyecto Google Console

Automatización de tareas con Grunt JS

GRUNT.JS Es un corredor de tareas desarrollado en Javascript con Node.js.

Esto es una librería JavaScript que nos permite configurar tareas automáticas y así ahorrarnos tiempo en nuestro desarrollo y despliegue de aplicaciones webs.

Con un simple fichero JS que llamaremos Gruntfile.js, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON.

grunt js task runner

Instalación de Grunt.JS

Previamente tenemos que haber instalado Node.JS, si no lo haz instalado puede descargarlo de la pagina oficial aqui. Los siguiente es ingresar en la terminal y utilizando el manejador de paquetes de node.js instalamos grunt Puede que no se requiera ejecutarlo como administrador, aunque yo siempre lo he necesitado :-).

Configurando primer proyecto con Phaser JS usando Yeoman

Hace poco tuve que iniciar a desarrollar algunos juegos para una pagina web que debían funcionar tanto en desktop como en tabletas y pues realice un benchmark de las herramientas que hay en el mercado que les compartire en un siguiente post. De los framework encontrados uno de los mejores es Phaser JS, desarrollado por Richard Davey @photonstorm. Es un framework muy completo para desarrollar juegos en 2D. Personalmente ya he desarrollado dos juegos sobre este framework y los resultados han sido sumamente satisfactorios y los tiempos de desarrollo muy cortos. phaser El repositorio de Github con el proyecto se puede encontrar en https://github.com/photonstorm/phaser En este breve tutorial, explicare como crear nuestro primer proyecto usando Yeoman el cual es una herramienta para crear andamiajes para crear de una forma rapida diversas aplicaciones web. Con Yeoman se pueden generar tanto proyecto completos como partes para los mismo desde la consola. yeoman

AJAX con JQUERY

Cuando recien descubria el verdadero poder de AJAX (Asynchronous JavaScript And XML), me puse en la tarea de crear mi propia libreria de trabajo para facilitar el desarrollo de las aplicaciones que realizaba. Luego descubri los diferenes frameworks de javacript como jquery, mootools, dojo YUI, entre otras (pueden ver mi post donde hablo sobre estos frameworks), los cuales integran el manejo de ajax de una forma muy poderosa por asi decirlo. logo_jquery_215x53 Dado la cantidad de frameworks, me ha gustado bastante trabajar con jQuery, que es sumamente sencillo de implementar y esta muy bien documentado. En este ejemplo pretendo mostrar como invocar una pagina asincronicamente utilizando las funciones que me provee jQuery. Antes que nada debemos descargar jQuery, lo podemos hacer desde ete link. una vez agregado el framework a nuestro proyecto vamos a crear un link o boton el cual al hacer click sobre este actuliza una zona de la pagina (div) con un contenido. Le asignamos posteriormente un evento, y dentro de este invocamos nuestra funcion de ajax de jQuery. Paralelamente utilizamos la funcion ajaxStart(), para poner un letrero que diga cargando mientras trae la información. Dentro del framework de jQuery podemos encontrar varios eventos como el utilizado (ajaxStart). Estos son: ajaxError, ajaxSend, ajaxStop, ajaxSucces. Si miramos igual la documentacion se podra encontrar el envio de datos por GET (aqui se mostro con POST), entre otras muchsa opciones. Descargar archivos aqui.

Como usar Lightbox 2

Lightbox es una liberia hecha en javascript que permite visualizar imagenes de una forma agradable (por asi decirlo), aunque tambien permite crear una galeria y facilitar la navegacion. Aqui les mostrare como podemos utilizar esta libreria facilmente. Lo primero que tenemos que hacer es descargar lightbox. Existen muchos proyectos parecidos y algunos con elementos adicionales, pero sabiendo como implementar uno podremos manejar cualquier otro. Al descargar los archivos tendremos el javascript, la hoja de estilos y las imagenes (que podemos cambiar a nuestro antojo) En nuestro proyecto agregamos estos elementos y configuramos nuestra pagina de la siguiente forma: 1. Agregamos la referencia a los archivos javascript del lightbox 2. Agregamos la referencia del archivo de estilo 3. Para que se identique a que vinculo se le quiere agregar el lightbox la agregamos la etiqueta rel=”lightbox”. 4. Si se quiere crear una galeria (poder ver las imagenes en secuencia), la etiqueta va llevar el nombre del grupo rel="lightbox[grupo]“. Por pruebas y algunos problemas que tuve, recomiendo colocar los elementos en un div con el mismo class (una buena sugerencia). Ejemplo

Flash Screen con swfObject (javascript)

Por inercia muchas personas confunden el termino fullscreen y lo asocian al tamaño de la animación dentro del navegador (piensan automaticamente poner tanto alto como ancho en 100%), pero en primera instancia fullscreen es relativo a la pantalla completa del ordenador. La forma de hacer un fullScreen lo colocare en un siguiente Post. Por ahora me limitare a explicar algo sumamente util y es el control del tamaño de la pantalla. Con esto me refiero a que podemos tener una animación de 800×600 y al tener una pantalla con una resolución mayor el contenido se desplegara sobre toda esta, pero si tenemos una pantalla de menor tamaño ó se hace un resize de la ventana no queremos que la informacion se pierda y por ende queremos que cuando suceda esto salga el scroll respectivo. El Problema It may be worth pointing out that in most cases there are two distinct reasons a flash website might have, for wanting to enable the browser scrollbar. * Si la ventana se ajusta a un tamaño menor al que fue diseñado se deberia agregar un scrollbar. * El contenido es mas largo que el diseño original.

SWFResize, SWFForcesize y SWFObject

SWFResize es una pequeña adicion para el codigo  SWFObject . Este codigo funciona para el SWFObject anterior al 2, igual tambien existe una implementacion utilizando JQuery que mas adelante explicare. Lo realmente importante esta en la funcion createFullBrowserFlash() que es donde se agregara el tamaño minimo de presentacion de nuestra pelicula, en este caso el tamaño es de 980×553 px, de igual forma la funcion setHeight() setiara el alto de la animacion de acuerdo al tamaño que escogimos (553px). Ya reemplazas los puntos donde se refiere al swf por el archivo respectivo y listo. El codigo completo [js]<br /> &lt;script type="text/javascript"&gt;// &lt;![CDATA[<br /> var size = getViewportSize();<br /> function getViewportSize()<br /> {<br /> var size = [0, 0];<br /> if (typeof window.innerWidth != "undefined") {<br /> size = [window.innerWidth, window.innerHeight];<br /> }<br /> else if (typeof document.documentElement != "undefined" &amp;#038;&amp; typeof document.documentElement.clientWidth != "undefined" &amp;#038;&amp; document.documentElement.clientWidth != 0) {<br /> size = [document.documentElement.clientWidth, document.documentElement.clientHeight];<br /> }<br /> else {<br /> size = [document.getElementsByTagName("body")[0].clientWidth, document.getElementsByTagName("body")[0].clientHeight];<br /> }<br /> return size;<br /> }<br /> function createFullBrowserFlash()<br /> {<br /> swfobject.createCSS("html", "height:100%;");<br /> swfobject.createCSS("body", "height:100%;");<br /> swfobject.createCSS("#container", "margin:0; width:100%; height:100%; min-width:980px; min-height:553px;");<br /> }<br /> function setHeight( h )<br /> {<br /> if ( h &lt; size[1] ) h = "100%";<br /> var el = document.getElementById("container");<br /> if ( h != "100%" ) el.style.height = h &lt; 553 ? "553px" : h + "px"; else el.style.height = "100%"; } var flashvars = { }; var params = { "allowscriptaccess": "samedomain" }; swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.0", false, flashvars, params); if (swfobject.hasFlashPlayerVersion("9.0.0")) { swfobject.addDomLoadEvent( createFullBrowserFlash ); }<br /> // ]]&gt;&lt;/script&gt;[/js]