Contenido

Node.js para yayodesarrolladores web

16 May

+ 5

Me considero yayodesarrollador web, no por que sea viejo sino por que soy de esa generación de desarrolladores que conocieron la web en su fase 1.0 y que formaron parte de la estandarización de la web 2.0. Soy un desarrollador web que se encuentra más cómodo desarrollando en Javascript «puro» que usando jQuery y que aún recuerda como hacer una petición Ajax «a pelo», usando el objeto XMLHTTPRequest y el odiado ActiveX para que IE no se queje.

De esa generación de desarrolladores que acababan de conocer Ajax y lo usaban para todo, hasta para lo que ahora te da vergüenza admitir, que descubrieron que los selectores CSS3 iban a revolucionar el Javascript que conocían y que vieron como Google Chrome, con su motor  de Javascript V8 entraba en el mercado para literalmente darle la vuelta.

Y aquí es donde entre Node.js, que está basado en el uso de V8 como motor de procesamiento de javascript, pero a diferencia de lo que habíamos visto en nuestros tiempo mozos, hace 10 años, esta vez se usa en el servidor… ¿!EN EL SERVIDOR!?, si si, como lo oyes, puedes programar en Javascript pero en el servidor…O.o.

La idea no es nueva, por allá en el 2008 aparecía Jaxer que intentaba hacer algo parecido, y poco más he leido después de él. Y lo que se consigue es acercar las maravillas de un lenguaje como Javascript, con capacidad de orientarse a eventos permitiendo programar de forma asíncrona fácilmente al servidor, todo ello por que este tipo de programación consigue unos resultados de rendimiento espectaculares al estar básicamente en estado latente esperando a que se ejecute el evento X o el evento Y.

Vale vale, pero ¿nos ponemos a ello?

Lo primero es instalarlo, para ello, lo descargamos de la página oficial y lo instalamos (doble click en Windows y en Macmake && make install en Linux). Una vez instalado ya podemos ponernos a tocar código que es lo que nos gusta!

// Cargamos el módulo HTTP
var http = require('http');

// Creamos un servidor HTTP que devolverá "Hola Mundo!" en cualquier petición
var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hola Mundo!\n");
});

// Escuchamos el puerto 8000
server.listen(8000);

// Mostramos un mensaje en la terminal
console.log("Server running at http://127.0.0.1:8000/");

El típico «Hola Mundo» nos muestra ya por donde van a ir los tiros en cuenta al asincronismo que os comentaba. El objeto server, queda asociado al puerto 8000 que ejecutará el callback definido unas líneas por encima.

Ahora para ejecutar esto en tu máquina, tendrás que guardar este código dentro de un fichero .js para ser llamado por node.js de la siguiente forma.

node fichero.js

El resultado, en la consola que hemos ejecutado el comando debería parecerse a esto:

Captura de pantalla 2012-05-15 a la(s) 23.09.42
(Ver Imagen)

Y como la consola indica, nos dirigiremos al enlace http://127.0.0.1:8000/ y veremos el texto «Hola Mundo!«. Sencillo, rápido y funcional.

Módulo, módulos y más módulos

Parte del éxito de Node.js reside en la comodidad para trabajar con módulos, y la facilidad de incluirlos a tu proyecto, traído de otros lenguajes se adhiere a nuestros proyectos de forma tan eficiente y práctica que no da pereza generar nuevos y nuevo módulos. De ahí que la comunidad se haya puesto las pilas y haya generado implementaciones de casi todos los componentes que te puedas imaginar.

npm install package

El comando npm, se instala con Node.js y mediante esa sencilla sintaxis podemos añadir un módulo a nuestro proyecto o al repositorio global de node.js dejándolo disponible para todos los proyectos dentro de esa máquina (node install -g package).

package.json

Para hacernos aún la vida más fácil, podemos especificar el fichero package.json, en el que definiremos el nombre de nuestra aplicación y las dependencias que este necesita.

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
      , "stylus" : "0.27.0"
      , "coffee-script": "1.3.2"
      , "swig": "0.11.2"
  }
}

Luego, como si de magia se tratara solicitamos que se instalen todas las dependencias del proyecto.

npm install -d

Y automáticamente empiezan a descargar los paquetes y guardarlos en la carpeta node_modules/ del proyecto.

Captura de pantalla 2012-05-15 a la(s) 23.28.16
(Ver Imagen)

Simplemente eso, cargamos lo que necesitamos y lo empezamos a usar en nuestro proyecto, así de sencillo. Esto da lugar a que un proyecto node.js, incluya frameworks para casi cualquier cosa, para escribir HTML más rápido (jade), para hacer un Javascript más eficiente (CoffeeScript) o para que las CSS’s se comporten como un lenguaje de programación (Stylus), o como he dicho antes, para hacer casi cualquier cosa.

Incluso, proyectos que juntan estos y otros frameworks/módulos y definen una forma ágil y robusta de trabajar como ExpressJS o Meteor que merecen la pena tratar con más detalle en otra serie de posts.

LESS, CSS enriquecido en el cliente

15 May

+ 6

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,…

LESS

Pues LESS, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Como podemos ver, nuestros CSS’s cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar.

Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

cssSandpaper, unifica transformaciones CSS3 en todos los navegadores

15 May

+ 0

cssSandpaper es otra librería javascript que pretende hacernos la vida más fácil haciendo que dispongamos de transformaciones CSS3 en nuestros navegadores de forma estandarizada, omitiendo las versiones personalizadas de cada navegador e incluso dotando a Internet Explorer de ellas.

Pie Menu, añade un menú circular a tu página con jQuery y CSS3

14 May

+ 2

Pie Menu, es un plugin jQuery que se aprovecha de las animaciones CSS3 para generar curioso menu circular desplegable.

piemenucss3
(Ver Imagen)

Además usarlo es muy sencillo, ya que solo tendremos que definir un listado de opciones e indicar que el elemento contenedor debe comportarse como un Pie Menu.


  <div id='outer_container' class="outer_container" >
        <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
        <ul class="menu_option">
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
        </ul>
    </div>

Una vez definidas las opciones del menu, activamos el menú:


$('#outer_container').PieMenu({
	'starting_angel':0(Starting Angle in degree),
	'angel_difference' : 90(Displacement angle in degree),
	'radius':100 (circle radius in px),
}); 

Siempre que veo menus de estos, me recuerdan a aquellos del juego Secret of Mana de la Super NES😀

Datavisualization.ch, colección de herramientas para crear tus gráficas en javascript

14 May

+ 0

Si eres de los que ya hemos perdido la cuenta de la cantidad de herramientas que hay para incluir gráficas en tus páginas mediante javascript, te recomiendo datavisualization.ch. Una web donde podrás encontrar todas, o casi, las que te puedan sacar de un apuro en un momento dado. Recomendable para tenerla siempre a mano.

*JS, el hijo bastardo entre Javascript y C

13 May

+ 1

No paran de salir herramientas para hacernos la vida más facil, aunque hay veces que para evitar aprender un lenguaje concreto tienes que aprender otro que te convertirá el código en este primero. Este es el caso de *JS, un lenguaje pensado para programar Javascript como si de C se tratara.

Por el momento es una versión beta que no permite trabajar con ella en el mundo real, pero que sirve para poner una serie de ideas sobre la mesa con las que mejorar nuestra programación de bajo nivel sobre Javascript.

Programación más eficiente

*JS ofrece un lenguaje tipado que permite especificar el tipo de variables que vamos a definir, lo que hará que la conversión a Javascript sea más robusta y  segura. Para ello usa las herramientas de más bajo nivel que Javascript puede ofrecer, haciendo que nuestro código roce la ilegibilidad extrema 😀

Código *JS

struct Node {
  let Node *next;
  let int value;
}

let Node *head = new Node, *tail = head;

function Node * add (int value) {
  let Node * next = new Node;
  next->value = value;
  tail->next = next;
  tail = next;
  return next;
}

trace(add(1));
trace(add(2));
trace(add(3));

traceList(head->next);

function void traceList(Node * p) {
  while (p) {
    trace("Node at address: " + p + ", has value: " + p->value);
    p = p->next;
  }
}

Código Javascript

Una vez compilado el código anterior, nos quedaría en algo así que podría ser ejecutado por cualquier navegador…

const $U4 = U4;
var head = (malloc(8) >> 2), tail = head;
function add(value) {
  const $I4 = I4, $U4 = U4;
  var next = (malloc(8) >> 2);
  $I4[next + 1] = value;
  $U4[tail] = next;
  tail = next;
  return next;
}
trace(add(1));
trace(add(2));
trace(add(3));
traceList($U4[head]);
function traceList(p) {
  const $I4 = I4, $U4 = U4;
  while (p) {
    trace('Node at address: ' + p + ', has value: ' + $I4[p + 1]);
    p = $U4[p];
  }
}

Además, *JS nos ofrece herramientas como malloc() y free() (como en C) que nos servirán para gestionar la memoria que consumen nuestros scripts de forma explícita.

CamanJS, manipulación de imágenes mediante javascript

11 May

+ 1

CamanJS une dos de mis más grandes pasiones, la fotografía y el javascript. Y gracias a las nuevas tecnologías lo permiten hacer de una forma muy eficiente.

Gracias al uso de <canvas /> y su control mediante javascript nos permite disponer de una serie de métodos para dar efectos predefinidos o crear los nuestros propios de forma sencilla.


<-- cargamos la funcionalidad de camanJS -->
<script type="text/javascript" src="caman.full.min.js"></script>
 
<script type="text/javascript">
// Modificamos la apariencia de la imagen indicada.
Caman("images/example-image.jpg", "#example-canvas", function () {
    this
        .saturation(20)
        .gamma(1.4)
        .vintage()
        .contrast(5)
        .exposure(15)
        .vignette(300, 60)
        .render();
});
</script>

<canvas id="#example-canvas"></canvas>

Aunque la compatibilidad con los diferentes navegadores no es completa (obviamente) soporta una buena cantidad de navegadores (Google Chrome, Safari 5+, Firefox 4+, Opera 10+, Internet Explorer 9+) que junto a la completa documentación nos ofrece una herramienta más que interesante para trabajar con imágenes desde el navegador.

-prefix-free, dí adios a los prefijos CSS

11 May

+ 5

Ayer vimos la cantidad de líneas de código que debemos incluir en nuestros CSS’s para disponer de ciertas funcionalidades en los diferentes navegadores, no es algo nuevo, hace ya tiempo nos quejábamos de ello. Y parece que a medida que van saliendo más y más propuestas por parte de los diferentes navegadores estos prefijos se están haciendo más y más populares.

El problema, radica en que dentro de X años esos prefijos dejarán de ser necesarios por que por lo general adoptan una nomenclatura estándar, lo que nos obligará a recorrer todos nuestros CSS’s para adaptarlos a los atributos del momento.

Para solventar prácticamente por completo ese problema aparece prefix-free, un librería Javascript que se encarga de gestionar estos prefijos por nosotros dejándonos a nosotros la nomenclatura estándar y él adaptándose al navegador que está visitando nuestra aplicación web.


// Nuestro CSS
border-radius: 1em; // Para cuando se cumplan los estandares.

// Resultado
-moz-border-radius: 1em; // Mozilla 
-ms-border-radius: 1em; // Internet Explorer 8 (No soportado) 
-webkit-border-radius: 1em; // WebKit y Safari 

Como podemos ver el cambio es significativo, y únicamente hemos de añadir un fichero JS a la carga de nuestra aplicación web.

<script src="js/prefixfree.min.js"></script>

Compatibilidad

Actualmente está disponible para los principales navegadores, IE9+ Opera 10+, Firefox 3.5+, Safari 4+ y Chrome para escritorio y Mobile Safari, Android browser, Chrome y Opera Mobile para móviles.

Problemas detectados.

En CristaLAB comentaban que nos funcionan en:

  • CSS’s cargados mediante @include.
  • ficheros CSS’s locales en Chrome y Opera.
  • Estilos inline
  • y CSS’s de diferentes dominios

Aún así, el trabajo que nos ahorramos a largo plazo es realmente interesante para tenerlo en cuenta.

Diagnosticando errores javascript más fácilmente con Error.stack

11 May

+ 2

Hoy, IEBlog publica un artículo muy interesante sobre el tratamiento de errores en IE10 sobre Windows 8. Al parecer, este último incluye soporte para un nuevo atributo al objeto Error(), el Error.stack, que activado desde las Web Developer Toolbars de IE10 nos ayudará a detectar los errores de forma más rápida.

Error.stack en IE10
(Ver Imagen)

Como podemos ver, nos ofrece una información detallada del error, al puro estilo Java mostrando toda la traza del error producido. Por lo tanto, nuestros try/catch vendrán cargados con todo lo necesario para conocer la causa de nuestros problemas, además podremos limitar el nivel de profundidad de dicha traza mediante el atributo stackTraceLimit disponible de igual modo en el objeto Error(). Una funcionalidad muy interesante que seguro nos ayudará a solventar los problemas que nos encontremos en IE10 … que seguro que los encontramos 😀

jQuery transit, transformaciones y transiciones CSS3

10 May

+ 1

jQuery.Transit, es un plugin de jQuery (1.4+) que nos permite trabajar con las diferentes transiciones y transformaciones de CSS3 mediante una simple nomenclatura.

Para ello, dota al atributo css() de una serie de parámetros que nos permite extender los estilos básicos tratados con jQuery.


("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

// Valores relativos
$("#box").css({ rotate: '+=30' });          // 30 degrees more
$("#box").css({ rotate: '-=30' });          // 30 degrees less

// No importa usar unidades
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });

// Multivalores
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });

Todos estos helpers implementados en css() usan la funcioón $.fn.transition() que es la encargada de gestionar las animaciones aplicadas a estos nuevos parámetros.


/*
   $('...').transition(options, [duration], [easing], [complete])
*/
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Funciona en: IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+, Mobile Safari

Un plugin de esos que te ayuda a hacer las cosas más faciles, de los que nunca viene mal conocer 😀