martes, 19 de febrero de 2013

Herramientas online para HTML5 y CSS3

* Para conocer el estado de las estas tecnologías (HTML5 y CSS3):


 

Su sección 'Tables' nos ofrece una magnífica guía para saber qué navegadores soportan las últimas tecnologías web.




HTML5Please se ha convertido en una herramienta esencial a la hora de adoptar HTML5 en nuestras páginas. Soportada por varios desarrolladores, nos indica qué características HTML5 están ya maduras y cuáles en desarrollo, y en tal caso, qué polyfills podríamos utilizar.




Su hermano es HTML5Please pero esta página funciona de una forma diferente ya que permite generar CSS3 al instante permitiendo saber si una característica CSS3 está soportada ya en tu navegador.




* Para testear el nivel de compatibilidad que soporta tu navegador:


 

 

Con la utilidad Modernizr, esta página genera código para chequear varias instrucciones CSS3 y HTML5,  imprimiendo su resultado.





Genera un test dando un resultado numérico. En este ejemplo el navegador cumple con 393 puntos de 500.





Igual que el anterior para CSS3.

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.