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