Cristalab

---

• Manipulación de imágenes con Canvas en HTML5
• Como usar la última versión de jQuery en todos tus proyectos
• Animación de texto con efecto garabato en After Effects
• Instalar nodeJS y paquetes en Linux y Windows
• Usar geolocalización con Google Maps

Manipulación de imágenes con Canvas en HTML5 Posted: 01 May 2012 07:07 AM PDT Canvas tiene un enorme poder sobre la manipulación de imágenes, es capaz de acceder a la información de cada pixel que se encuentre en sí mismo, es decir, podemos acceder a los valores de cada canal del pixel siempre y cuando esté dibujado en Canvas. El código de la aplicación pueden encontrarlo aquí, y el demo aquí. Parte 1: el método drawImage() De ahí que el manejo de imágenes en el lienzo no sea tan sencillo como parece. La mayoría de aquellos que nos hemos adentrado un poco en esta API conoceremos el método drawImage() con el que no sólo tenemos la posibilidad de dibujar imágenes, si no también la de escalarlas y deformar el tamaño de las mismas. Parece sencillo ¿no? La verdad es que lo es, pero sí no conoces el método drawImage, en el primer videotutorial se explica este método. Esa es la parte sencilla y común. Pero ¿qué pasa si nos queremos ver más avanzados, si queremos ir más allá? Parte 2: el método getImageData() ¿Quieres aprender a convertir tus imágenes a Sepia, Blanco y Negro e Invertir sus colores utlizando HTML5? Este método nos permite acceder a la información del lienzo dado un cuadro definido en el método, podemos entonces obtener el tamaño de dicho cuadro y un arreglo con la información de cada canal de color de cada pixel. Recordemos que cada pixel tiene un valor de rojo, uno de azul y uno de verde para formar la imagen, incluso un canal alfa para las transparencias. ¿Para qué quiero yo saber eso? Para poder realizar efectos como los que ves en esta aplicación que lograremos con el segundo videotutorial. Parte 3: método toDataURL() Y por último, pero no menos importante, para qué querría yo hacer esto si no puede tener la imagen que he editado, bien, Canvas es tan asombroso que nos regala un método para convertir la información que tiene en una imagen, ya sea jpg o png, este método toDataURL() se explica en el útlimo tutorial.

Como usar la última versión de jQuery en todos tus proyectos Posted: 10 Apr 2012 12:59 AM PDT jQuery se ha convertido lentamente en el framework de Javascript por defecto de la web, y aunque en los últimos años han tenido muy pocas actualizaciones, el 2011 tuvo varias micro versiones y esperan ser aún más ágiles y constantes este año. El problema radica en mantener actualizados todos tus sitios con la última versión disponible: es tedioso. Uno siempre debe estar al tanto de las actualizaciones, descargarlas, subirlas a cada uno de tus servidores y vincularlos en el footer de tu sitio web, para mi esto simplemente es mucho trabajo. La solución, el Content Distribution Network de Google. https://developers.google.com/speed/libraries/devguide Google ofrece múltiples versiones de los frameworks y scripts más populares, y por lo general son muy rápidos para actualizarlos. Además de sus grandes beneficios, como ahorrar ancho de banda y disponibilidad en base a tu posición geográfica, tienes la opción de cargar la última versión (posiblemente cacheada por haber visitado otra website) sin ningún esfuerzo. Para esto, solo se necesita agregar la siguiente línea de código en tu HTML, de preferencia antes de cerrar el </body> antes de todos tus scripts, y listo. Código : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Google APIs FTW. [nota:92786736fb] Cabe recordar que algunos plugins pueden no ser compatibles con la última versión de jQuery, para esto, simplemente pueden especificar la versión necesaria: 1.7 o 1.7.1[/nota:92786736fb] [nota:92786736fb]Cristalab ha usado esta técnica desde v4[/nota:92786736fb]

Animación de texto con efecto garabato en After Effects Posted: 03 Apr 2012 12:51 AM PDT En este videotutorial jugaremos con el uso del efecto garabatear, para recrear otro interesante efecto de dibujo de un texto colocado sobre un elemento de papel generado con las herramientas de formas básicas de After Effects. Asignaremos el efecto al texto y animaremos sus propiedades y las de la cámara para obtener la animación, después de añadirlos sobre una nueva composición para implementar la funcionalidad e introducir mayor control sobre el conjunto. Saludos.

Instalar nodeJS y paquetes en Linux y Windows Posted: 02 Apr 2012 03:15 AM PDT Existen un par de artículos sobre cómo instalar nodeJS y también sobre cómo instalar paquetes para nodeJS. Entonces, ¿por qué no juntarlos todos en uno? Instalar nodeJS Windows En la versión 0.6.12 nodeJS provee un paquete MSI para instalar nodeJS en Windows. Así que instalarlo simplemente consistirá en ir a la sección de descargas de nodejs.org y bajarnos el instalador. Cuando tengamos el instalador lo ejecutamos y nos saldrá esta pantalla: Presionamos en siguiente y empezará la instalación. (Puede que tome un par de minutos, pero por lo general es bastante rápida) Una vez que termine este proceso ya solo nos queda dar en finalizar y disfrutar nuestro servidor de nodeJS Linux Para instalar nodeJS en Linux podemos descargar el código fuente de nodejs y compilarlo o descargarlo desde github. En nuestro caso realizaremos la segunda opción. Pero, ¿Qué pasa si no tengo git? No es muy difícil instalar git, pero si no quieres hacerlo, siempre puedes descargar el código fuente y saltar hasta la sección "Instalación del paquete". Bajar el código vía GIT Primero abrimos una terminal y escribimos el siguiente comando: Código : $ git clone git://github.com/joyent/node.git Esto creará una carpeta llamada node. Entramos en la carpeta y ejecutamos esta lista de comandos: Código : $git fetch --all $ git tag Al hacer git tag, podemos ver todos los tags (versiones) que existen de nodeJS. La última versión (ahora mismo) es la 0.7.5 pero yo descargaré la 0.6.12 ya que es la estable. Código : $ git checkout $ git checkout v0.6.12 La última línea se debe actualizar según la última versión de nodeJS. Una vez hecho estos pasos ya tenemos el código fuente de la versión 0.6.12 Instalación del paquete Lo primero que vamos a hacer es crear el fichero de configuración. Código : $ ./configure En mi servidor no se está utilizando ssl, por lo que no está instalado así que la configuración me avisa de que necesito instalar SSL. Como no me interesa utilizar SSL (porque es un servidor de pruebas) le paso el parámetro --without-ssl. De esta forma le indico que no quiero que utilice conexiones vía SSL (SSH o HTTPS). [nota:3db8d11ca7] para utilizar npm (ver más abajo) hace falta tener node con soporte SSL[/nota:3db8d11ca7] El siguiente paso es crear el ejecutable. Al ejecutar la sentencia make nos aparecerá un montón de texto en pantalla. No le hagáis demasiado caso, ya que es el debug por si falla la instalación ver qué paquete en concreto es el que falla. Código : $ mkdir -p out/default $ make Si al acabar el make obtenéis un mensaje de error sobre zlib es porque debéis instalar el paquete zlib-devel: Código : //en mi CentOS $  yum install zlib-devel //o en un debian $ apt-get install zlib-devel Una vez instalado el paquete ejecutad los siguientes comandos para re-hacer el config: Código : $ make distclean $ ./configure $ make Si ahora no nos ha dado ningún problema ¡ya podemos ejecutar el instalador! Código : $ make install ¡Y eso es todo! deberíais estar ya disfrutando de nodeJS en vuestro Linux Instalar paquetes Los paquetes son pequeños frameworks para trabajar con nodeJS. Algunos códigos que bajemos de otros programadores pueden requerir ciertos paquetes y es importante saber cómo instalarlos. Node Packet Manager Node Packet Manager aka npm será nuestra herramienta para instalar paquetes para node. El uso es sencillo. En una consola debemos ejecutar el siguiente comando: Código : $ npm install -g <paquete> Donde <paquete> se refiere al nombre del paquete que vamos a instalar (ej: Express, jade...) El -g es para instalar los paquetes de forma global y se recomienda su uso. Parámetros de nodeJS Para finalizar, hay un par de cosas que deberíamos saber sobre los parámetros que acepta nodeJS. ¿Qué versión de node tengo? Una vez que hemos instalado nodeJS la mejor forma de comprobar que todo funciona correctamente es preguntar a node por la versión que tenemos instalada. Código : $ node -v ¿Cómo ejecuto programas? Esta es la más crítica de todas: Código : $ node programa.js

Usar geolocalización con Google Maps Posted: 02 Apr 2012 02:23 AM PDT Este tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5. Nivel: Medio ¿Qué es la geolocalización? Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador. Conociendo nuestra posición Esta API destaca por lo fácil que es usarla. Por ejemplo: Código : <script>      function localizame() {            navigator.geolocation.getCurrentPosition(coordenadas);      }            function coordenadas(){            var latitud = position.coords.latitude;            var longitud = position.coords.longitude;      } </script> Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición Controlando errores Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos: Código : <script> function localizame() {             if (navigator.geolocation) {                 navigator.geolocation.getCurrentPosition(coordenadas);             }else{                 alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');             } } </script> Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition: Código : <script>         function localizame() {             if (navigator.geolocation) {                 navigator.geolocation.getCurrentPosition(coordenadas, errores);             }else{                 alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');             }         }         function errores(err) {             if (err.code == 0) {               alert("Oops! Algo ha salido mal");             }             if (err.code == 1) {               alert("Oops! No has aceptado compartir tu posición");             }             if (err.code == 2) {               alert("Oops! No se puede obtener la posición actual");             }             if (err.code == 3) {               alert("Oops! Hemos superado el tiempo de espera");             }         } </script> Combinando la API de geolocalización con la API de Google Maps Veamos los pasos directamente sobre los comentarios del código: Código : <!DOCTYPE html> <html> <head>     <title>Localizador</title>     <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/     <style>         body{             font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;         }     </style> </head> <body>     <header>         <h1>Localizador mediante HTML5</h1>     </header>     <section>         <article>             <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/         </article>     </section>     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/     <script type="text/javascript">         var map;         var latitud;         var longitud;                 $(document).ready(function() {             localizame(); /*Cuando cargue la página, cargamos nuestra posición*/            });                 function localizame() {             if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */                 navigator.geolocation.getCurrentPosition(coordenadas, errores);             }else{                 alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');             }         }                 function coordenadas(position) {             latitud = position.coords.latitude; /*Guardamos nuestra latitud*/             longitud = position.coords.longitude; /*Guardamos nuestra longitud*/             cargarMapa();         }                 function errores(err) {             /*Controlamos los posibles errores */             if (err.code == 0) {               alert("Oops! Algo ha salido mal");             }             if (err.code == 1) {               alert("Oops! No has aceptado compartir tu posición");             }             if (err.code == 2) {               alert("Oops! No se puede obtener la posición actual");             }             if (err.code == 3) {               alert("Oops! Hemos superado el tiempo de espera");             }         }                   function cargarMapa() {             var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */             var myOptions = {                 zoom: 17,                 center: latlon, /* Definimos la posicion del mapa con el punto */                 mapTypeId: google.maps.MapTypeId.ROADMAP             };/*Configuramos una serie de opciones como el zoom del mapa y el tipo.             map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */                         var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */                             var marcador = new google.maps.Marker({ /*Creamos un marcador*/                 position: coorMarcador, /*Lo situamos en nuestro punto */                 map: map, /* Lo vinculamos a nuestro mapa */                 title: "Dónde estoy?"             });         }     </script> </body> </html> Pincha aquí para ver el ejemplo completo.

You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610