sábado, 30 de julio de 2011

html2canvas - Genera una imagen a partir de una web

Pues lo dicho en el título: html2canvas permite crear una imagen volcada en un canvas a partir de una página web.

La funcionalidad es parecida al plugin Fireshot de IE o Firefox.

De momento es dependiente de las librerías jQuery pero según el autor, intentará que no sea así en el futuro.

martes, 12 de julio de 2011

Lo último de HTML5

http://html5-demos.appspot.com/

Interesante enlace donde podemos ver entre otras cosas una presentanción sobre lo último de HTML5 (a estas fechas): http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1

Interesante también: http://www.htmlfivewow.com/ de dos desarrolladores de referencia en este mundo: 
Eric Bidelman (http://twitter.com/#!/ebidel) y
Arne Roomann-Kurrik (http://www.svhtml5.com/members/12747653/?op=&memberId=12747653)

jueves, 7 de julio de 2011

¿Qué es un Polyfill?

Un Polyfill puede ser un trozo de código o un plugin que permite tener las nuevas funcionalidades de HTML5 en aquellos navegadores que nativamente no lo soportan.

Por ejemplo, sessionStorage permite guardar información locamente. Es una nueva funcionalidad que desde la versión 8 de Internet Explorer (por ejemplo) sí se soporta. Pero, ¿qué ocurre si queremos tenerla en Internet Explorer 7? Pues la solución pasa por utilizar un Polyfill.

En GitHub existe una lista de Polyfills que abarca desde SVG para Android, Canvas para IE (utilizando Silverlight como puente), hasta el soporte  de <video>, <audio>, etc, etc..

En enlace es el siguiente:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

sábado, 2 de julio de 2011

Saber si tu documento HTML5 sigue una buena estructura (outline)

O dicho de otro modo, si tu documento está correctamente organizado según las directrices de HTML5.

Sabemos que HTML5 se esctructura por secciones siguiendo un orden y jerarquía concretos. Para esta tarea contamos con algunas utilidades dispersadas en la red:

HTML5 Outliner: gsnedders.html5.org/outliner/

HTML5 Outliner (h5o, fbasado en javascript unciona también en Firefox): code.google.com/p/h5o/

Otro HTML5 Outliner (plugin para Chrome): https://chrome.google.com/webstore/detail/afoibpobokebhgfnknfndkgemglggomo

Otro para Opera (adaptación del anterior): https://addons.opera.com/addons/extensions/details/html5-outliner/1.0/

miércoles, 29 de junio de 2011

Node.js: algo grande ha nacido

Qué es Node.js? Node.js es simplemente (o no tan simple) un entorno de ejecución y una librería de javascript. Permite ejecutar aplicaciones javascript fuera del navegador. Ello implica por ejemplo que podamos tener y crear nuestro propio servidor HTTP como lo es Apache.

Node.js fue creado en 2009 pero ha crecido espectacularmente, teniendo a día de este artículo (29.jun.2011), 46.700.000 millones de resultados en Google.

Desde que javascript es javascript, siempre se ha tenido que ejecutar mediante un navegador (IE, Firefox, Opera, Chrome o Safari). Ya era hora que diera el salto al lado del servidor como tantos otros lenguajes (Python, Perl...).

Node.js está basado en V8 Javascript, el motor Open Source de Javascript de Google, y está estructurado en numerosas funciones y módulos.

La diferencia más sustancial, no sé si ventajosa o desventajosa, es que toda la ejecución se realiza mediante un solo y único hilo (thread), es decir, su ejecución es concurrente, a diferencia, por ejemplo, del servidor web Apache que es multithread. Los detractores del multihilo nos dicen que esta forma de intepretar las peticiones (cada una con su hilo) no funciona bien con conexiones múltiples y duraderas ya que perjudica el rendimiento. Teniendo un único hilo y revisándolo continuamente mediante un 'event loop' podemos tener millones de conexiones concurrentes (me parece exagerado, pero es lo que he leído).

Ya que un servidor web recibe y sirve peticiones HTTP, vamos a ver un ejemplo de como crearlo con Node.js:

(archivo server.js)
http.createServer(function(request, response) { 
 response.writeHead(200, {"Content-Type": "text/html"}); 
 response.write("Hola Mundo"); 
 response.end();
 }).listen(8888);

Para ejecutarlo, tan solo: node server.js

Con esto tenemos un sencillo y básico servidor web que escuchará las peticiones en el puerto 8888.
Para probarlo solamente debemos abrir nuestro navegador y darle la URL http://localhost:8888

Por el momento Node.js está disponible para servidores Linux, pero recientemente se ha comunicado que Microsoft va a portarlo a sus versiones Windows Azure (en la nube) y otros servidores Windows como el 2003 (para más referencia mirar en los enlaces: 'Portando a Windows').


Enlaces:

Página oficial de Node.js - http://nodejs.org/

V8 Javascript - http://code.google.com/p/v8/

Portando a Windows - http://blog.nodejs.org/2011/06/23/porting-node-to-windows-with-microsoft%E2%80%99s-help/

Buena introducción a Node.js para iniciados - http://www.nodebeginner.org/index-es.html

Artículo - http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/

lunes, 27 de junio de 2011

Geolocation: contando los metros que andas

Si tienes un Smartphone con GPS y te gusta hacer footing o pasear, seguramente te interesará este artículo.

Gracias a la geolocalización se puede saber en qué punto del planeta te encuentras, si este punto cambia de posición es que te estás moviendo. Sacando la diferencia podemos saber la cantidad de metros o de kilómetros que te has movido.

El artículo en cuestión se encuentra aquí: http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/ y explica como obtener el resultado comentado con una cuantas líneas de código javascript y con esta nueva funcionalidad de geolocalización de HTML5 (Geolocation API)

Por supuesto que antes de ejecutar el script de geolocalización, se pide permiso al usuario para obtener sus datos.

Three.js: Gráficos en 3D para Javascript

Interesante y potente 'engine' que nos permite crear objetos y animaciones 3D en Javascript utilizando si queremos también WebGL.





Three.js (página oficial del proyecto):  https://github.com/mrdoob/three.js/

* Nota: es posible que algún ejemplo no se vea en tu explorador. Puede ser debido a dos causas: 
1) Que tu equipo no soporte WebGl (hay tarjetas gráficas que no lo incluyen), 
2) Que estés utlizando Internet Explorer. El autor aconseja Google Chrome puesto que soporta mejor las tecnologías comentadas. Yo lo he probado también en Firefox 5 y no he tenido ningún problema.

sábado, 25 de junio de 2011

Emuladores en Javascript

JSNES - Emulador de NES en Javascript: http://benfirshman.com/projects/jsnes/

JSSpecy -  Emulador de Spectrum en Javascript: http://jsspeccy.zxdemo.org/

Visualizando un PDF en un Canvas de HTML5

Todavía en desarrollo, este magnífico proyecto nos permitirá ver un archivo PDF en nuestra página web sin necesidad de complementos o plugins. A mí me funciona en Firefox 5, no en IE 9.

Página oficial del proyecto: https://github.com/andreasgal/pdf.js

Página de su creador: http://andreasgal.com/2011/06/15/pdf-js/
Y una página de ejemplo: http://people.mozilla.org/~gal/test.html

YouTube y HTML5

Si quieres visualizar los vídeos de YouTube con el reproductor de HTML5 en vez del reproductor de Flash, puedes hacerlo activando la opción en: http://www.youtube.com/html5

La opción se sitúa al final de la página: 'Activar la versión de prueba de HTML5'

Está todavía en formato de pruebas y bajo la categoría 'test' de otros productos de YouTube: http://www.youtube.com/testtube

Chuleta de Canvas HTML5

¿Quieres tener de primera mano los métodos y propiedades del elemento Canvas?
Está disponible en PDF y en imagen PNG de la mano de Nihilogic:

http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Juegos en javascript

¿Quieres jugar y apreciar las últimas técnicas en videojuegos con javascript?

http://www.javascriptgaming.com/

Wolfenstein 3D y Canvas

De la mano de Nihilogic tenemos este increíble experimento:

http://www.nihilogic.dk/labs/wolf/