Cristalab

---

• Instalar nodeJS y paquetes en Linux y Windows
• Usar geolocalización con Google Maps
• #20: Cómo se hace Mejorando.la Web
• Crear un Rig de antebrazo con torsión en 3D Maya
• Crear URLs amigables en PHP con Symfony2 y el componente Routing
• Dibujar un sol estilo collage en Flash

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.

#20: Cómo se hace Mejorando.la Web Posted: 01 Apr 2012 08:41 PM PDT ¿Viste Mejorando.la Conferencia o estuviste en el escenario? ¿Has visto alguno de los programas de Mejorando.la en vivo? Entonces sabes que somos un streaming online que habla de tecnología y la web donde todo puede fallar. En este comic te contamos qué software usamos, qué hardware compramos y cómo transmitimos Mejorando.la Web. El comic #20 Y EL RE-ESTRENO de la serie Cristalab vs. The Web: "Cómo se hace Mejorando.la Web". Si esta es tu primera vez viendo el comic, mira el comic #19: "El orgullo de mis padres" y otros anteriores. F: Bienvenidos a la segunda temporada del comic. ¿Vieron nuestra nueva sección para el comic? Es genial. Si están viendo esto en el foro, mejor vayan a la sección. El comic se ve más grande allá.

Crear un Rig de antebrazo con torsión en 3D Maya Posted: 13 Mar 2012 06:55 AM PDT En este videotutorial de Autodesk Maya veremos cómo añadir funcionalidad y realismo al sistema de manejadores de animación del brazo para incluir la torsión del conjunto de huesos múltiples que nos ofrecen los antebrazos reales, además de trabajar sobre los huesos y ampliar nuestras capacidades en el uso y ajuste de los pivotes IK y la configuración de sus atributos. Saludos.

Crear URLs amigables en PHP con Symfony2 y el componente Routing Posted: 12 Mar 2012 08:21 AM PDT ¿Tienes algún sitio web hecho sin ningún framework y quieres optimizar las URLs sin rehacer todo el sitio desde cero? Este tutorial puede ayudarte. Cuando usamos un framework obtenemos muchas herramientas de desarrollo que hacen nuestro sitio web más usable y poderoso, una de ellas es la posibilidad de manipular las URLs para SEO, es decir: De esto: noticias.php?id=52 pasamos a algo como esto: noticias/52/titulo-relevante-para-seo Lo cual permite que el usuario sepa de qué se trata la noticia aún antes de abrir la URL y nos ayuda a obtener más visitas de Google. Pero si no usaste ningún framework, aún así puedes aprovecharte de las ventajas de los nuevos componentes de Symfony2. La nueva versión de Symfony sigue siendo un poderoso framework listo para usar, sin embargo, sus componentes también pueden ser usados independientemente del framework, y esto es lo que haremos acá. Usaremos el componente de Routing por sí solo. Para descargarlo vamos a usar Composer como nos recomienda la misma gente de Symfony. Tip : Composer es una herramienta que permite manejar las dependencias de los proyectos en PHP, descargando e instalando las bibliotecas por ti, además provee de una clase para hacer el autoload de dichas bibliotecas, etc. [nota:143f453436]Este tutorial requiere cierto conocimiento de PHP y ganas de aprender. y es sólo un punto de partida para aprender a usar los componentes de Symfony2, en concreto el componente de Routing.[/nota:143f453436] Creamos un archivo composer.json en un directorio de nuestro proyecto: Código : {     "name": "framework",     "version": "1.0.0",     "require": {         "symfony/routing": "2.1.*"     } } Luego descargamos la biblioteca de composer usando la consola: Código : curl -s http://getcomposer.org/installer | php O también podemos descargar el archivo de acá. Una vez hecho esto tipeamos esto en la consola para instalar nuestras dependencias: Código : php composer.phar install Ya con esto podremos ver cómo se ha creado un directorio "vendor" con el componente de Symfony que necesitamos. [nota:143f453436]También se ha creado un directorio oculto .composer que contiene, entre otras cosas, nuestro autoload.php[/nota:143f453436] Una vez hecho esto vamos a crear un archivo .htaccess para usar Mod Rewrite de Apache (es bastante común este módulo, de todas formas asegurense de que esté instalado en su servidor). Código : <IfModule mod_rewrite.c>     RewriteEngine on     RewriteCond %{REQUEST_FILENAME} !-f     RewriteRule ^(.*)$ routing.php?url=/$1 [QSA,L] </IfModule> Básicamente todo lo que no sean archivos válidos será reenviado a nuestro routing.php que se encargará del resto. Fíjense que junto con él se envía una variable GET "url". Acá tenemos routing.php: Código : <?php // Las clases de Symfony que vamos a usar: use Symfony\Component\Routing\Matcher\UrlMatcher; use Symfony\Component\Routing\RequestContext; use Symfony\Component\Routing\RouteCollection; use Symfony\Component\Routing\Route; /** *  Edita esta variable para colocar la ruta y la extension de tus controladores *  "%s" sera reemplazado por el parametro _file de las rutas * Ejemplo: *   $filePattern = ./misarchivos/%s.php5 *   _file = 'mipagina' *   Resultado: ./misarchivos/mipagina.php5 */ $filePattern = './controllers/%s.php'; $parameters = array (); try {    // Cargamos el autoloader que viene con Composer    require_once __DIR__.'/vendor/.composer/autoload.php';    //Creamos nuestra coleccion de rutas    $routes = new RouteCollection();        /**     * Configuramos todas nuestras rutas:     * El primer parametro es el ID de la ruta     * El segundo es una clase Ruta donde configuraremos nuestra expresion regular     * En el caso del ej: '/portafolio/{id}'     * {id} se convertira en una variable GET al final del ejemplo     * Y el tercer parametro corresponde a un array donde asignaremos parametros adicionales     * En este caso es muy importante que cada ruta tenga su parametro _file     * Que sera quien indicara al script que archivo cargar     * Mas documentacion: http://symfony.com/doc/current/components/routing.html     */    $routes->add('portafolio', new Route('/portafolio/{id}', array('_file' => 'portafolio')));    // Symfony stuff:    $context = new RequestContext($_SERVER['REQUEST_URI']);    $matcher = new UrlMatcher($routes, $context);        // GET[url] es enviado por el htaccess    // Esta linea es la que se encarga de comparar las rutas y devolvernos los parametros necesarios    $parameters = $matcher->match($_GET['url']); } catch (Symfony\Component\Routing\Exception\ResourceNotFoundException $exc) {    // En caso de no encontrar la ruta,se cargara un archivo 404    $parameters['_file'] = '404'; } catch (Exception $exc) {    // En caso de ocurrir otro error cargaremos un archivo 501    $parameters['_file'] = '501'; } // Mezclamos los parametros de la ruta con parametros get // Dado que cuando no se usan estos sistemas de rutas generalmente se trabaja con GET $_GET = array_merge($_GET, $parameters); // Armamos la ruta a nuestro archivo $file = sprintf($filePattern, $parameters['_file']); if ( ! file_exists($file)) {    exit ('No existe el archivo: ' . $file); } // y finalmente cargamos el archivo include_once $file; Los "controladores" como quise llamarlos se guardan en una carpeta controllers/ (pueden dejarlos en la misma carpeta pública, de manera que las antiguas URLs sigan funcionando, lo ideal sería luego crear redirects 301 a las nuevas rutas. Tu archivo portafolio.php así como los demás archivos que ya tenías deberían seguir funcionando de la misma manera. Para probar yo sólo hice algo así en controllers/portafolio.php: Código : <?php echo $_GET['id']; Recuerden agregar archivos para los errores 404 y 501. Por último, todo esto habría quedado mejor en una clase más que en programación estructurada. Symfony tiene clases que se encargan de manejar las rutas de manera poderosa con caché, YAML para la configuración y demás. Yo sólo quise proporcionar una manera rápida de acomodar las URLs de sus sitios antes que se decidan o tengan tiempo de reprogramarlos en un nuevo framework o lenguaje. ¡Saludos a todos!

Dibujar un sol estilo collage en Flash Posted: 12 Mar 2012 08:06 AM PDT En este videotutorial exploraremos un área de Flash que es comunmente ignorada: sus poderosas herramientas vectoriales. Crearemos un dibujo de un sol estilizado utilizando las herramientas de dibujo intuitivas que nos brinda Flash y colocaremos una sencilla textura para darle un efecto de collage. Descarga el archivo aquí. Funciona para Flash CS4, CS5 y CS.5.

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