Momento HTML5: 30 sitios importantes

Hablar de HTML5 como lo más nuevo que le pasó a Internet está erróneo. La tecnología ya nos está acompañando desde hace bastante tiempo. Lo que si es importante destacar es el Momento HTML5 que estamos viviendo, una época de transición tecnológica donde nuevas tecnologías están conectándose y definiendo la web que ya no es exclusiva de tu computador.

HTML5 es más que un estándar, es hablar de CSS3, es hablar de Javascript, es hablar de muchos APIs y nuevas características del ecosistema de navegadores de escritorio y móviles. Pero también me gusta pensar en HTML5 como pensar en tantos nuevos frameworks y entornos que apoyan y redefinen a Javascript (CoffeeScript, Node.js), es pensar en frameworks de CSS (LESS, Saas, etc.) y es pensar en como Python con Django, Ruby on Rails o Sinatra, Scala, Haskell, PHP con Zend o Symfony2 nos invitan a hacer las cosas diferentes, nos inspiran a que todos los días estudiemos mucho más e innovemos con tecnología.

La mejor forma de matricularte en la Universidad HTML5 es empezar con esta lista de 30 sitios. Sumérgete en sus entrañas y asiste a clases tan frecuentemente como puedas atender nuevas pestañas en tu navegador:

W3C y el draft HTML5

Un draft actualizado frecuentemente que muestra los avances oficiales de la W3C sobre la dirección que tiene HTML5. Como parte de su nueva forma de funcionar tienen un evento para Desarrolladores en Noviembre. Importante conocer su estructura, dónde se están haciendo más avances y compararlo con la versión de Whatwg.

El grupo de Whatwg

whatwg-logoHTML5 nace por rebeldía. Mientras que la W3C se movía hacia XHTML2, este grupo empieza a generar su propia propuesta que le da vida a HTML5, un estándar vivo. Importante ver las ideas que se transmiten y como se mueven. Actualizan todo el tiempo. Fíjate también en las Web Apps 1.0

Dive into HTML5

 El mejor libro que se puede obtener sobre HTML5 fue escrito por Mark Piligrim. Puedes comprar una copia de O’relly en Amazon o puedes obtenerlo en línea, gratis. Está en inglés y vale mucho la pena. Leelo completo para poder empezar a hablar en serio de HTML5.

HTML5 Test

Un test en línea que evalua tu navegador y sus capacidades HTML5. Importante que difundas la dirección para que hagas sentir mal a todos aquellos que usan una versión vieja.

HTML5 Readiness

Documentando gráficamente el avance de los diferentes navegadores desde el 2008 y las características de HTML5.

Guía HTML5 de mejorando.la

guia-logoFreddy Vega de Cristalab y su servidor tenemos un draft permanente de lo que estamos aprendiendo de HTML5, en español, en pdf. Y también hay fondos de pantalla.

Es un documento que habla de esta época de transición y lo que representa HTML5. Esperamos con el tiempo ir ampliando los capítulos técnicos y ejemplos.

HTML5 Visual Cheat Sheet

Una tarjetita práctica para tener todos los elementos de HTML5 cerca para fácil consulta. Si la imprimes pequeña te ayuda para el examen. ;)

HTML5 enabling script

Varias etiquetas nuevas introducidas por HTML5 no van a funcionar adecuadamente en IE (versiones viejas) así que este script ayuda a que las interprete y puedas utilizarlas sin miedo a retrocompatibilidades.

HTML5 Boilerplate

¿Cómo empezar con HTML5? Con esta plantilla conocerás el poder de las nuevas etiquetas, código CSS3 y filosofía detrás de HTML5. Un proyecto práctico y muy bien documentado que además lidera las listas de proyectos de Github. Para móviles, recomendado ver el HTML5 Boilerplate mobile.

Initializr

Para simplificar el proceso de inicio con HTML5 Boilerplate, este sitio te genera una plantilla personalizada con solo las características que vas a utilizar. Muy práctico para diseñadores.

Bootstrap de Twitter

bootstrap-logoTwitter comparte un entorno básico para empezar con tu proyecto web basado en su misma plataforma. HTML5, CSS3 (que lo manejan con LESS) y mágia tuitera para arrancar un proyecto. En serio que estos chicos se ganaron tu tweet agradeciéndoles el esfuerzo.

Modernizr

Hay muchas librerías javascript hoy en día que te ayudan con importantes funcionalides para tus proyectos con HTML5. Modernizr es de las más interesantes que hay, pensando en compatibilidades e impulsar nuevas características a navegadores viejos. Revisa a fondo el proyecto, muy inspirador.

Paper.js

Una librería javascript muy buena para trabajar con Canvas en el navegador. Recomendada para conocer las posibilidades de la característica vectorial en HTML5.

Impact.js

Si hablamos de videojuegos y de HTML5 nos toca investigar de motores de videojuegos. El más interesante y popular se llama Impact. Con esto tienes toda la base para hacer tu propia versión de Mario Bros! Dicen además que solo requieres 15 minutos para arrancar.

Can I Use?

¿Qué cosas puedo usar en que navegador? El soporte de HTML5, CSS3 y SVG en diferentes navegadores para escritorios y entornos móviles.

Mobile HTML5

mobile-html5Maximiliano Firtman (@firt) genera una tabla comparativa muy completa de los diferentes navegadores para móviles y tabletas. Si alguien sabe de este mercado es Maxi, un grosso de Argentina del que siempre estamos pendientes.

VideoSWS

Hay muchos players de vídeo personalizado sobre el tag video. Esta es la mejor comparación de características de cada propuesta. A mi me impresiona la cantidad de competencia que existe ya en el mercado.

Youtube y HTML5

La implementación de su player de video en HTML5 la puedes disfrutar ya mismo. Te recomiendo muchísimo que le des click derecho y descargues alguno de los vídeos!

HTML5 Doctor

Un espacio colaborativo entre asistentes a un FOWD en Lóndres que están siempre inquietos por noticias y desarrollo de HTML5.

Apple y HTML5

El compromiso, ejemplos de Apple y el uso de HTML5 en su ecosistema de desarrollo, sitios web y dispositivos.

Web Open Wonder de Mozilla

Muy buenos ejemplos de Mozilla con HTML5, diseño, vídeo y Webgl. Ellos son otra de las importantes bases de apoyo a estas tecnologías.

Chrome Experiments

Una de las galerías visualmente más feas que hay, pero que contiene enlaces a increíbles ejemplos del equipo de Chrome y lo que han hecho con HTML5. Me encanta el slogan: “Not your mother’s Javascript”.

Html5 Rocks

html5-rocks

Una propuesta lanzada por Google con guías, tutoriales, ejemplos y código libre disponible para modificarse y compartir de vuelta.

El Test Drive de IE por Microsoft

Un proyecto presentado en el MIX este año y actualizado en Build. Muestra ejemplos del equipo de IE10 realizados con HTML5. Recomendadísimo el SVG Girl que es un anime japonés diseñado para el IE.

The expressive web por Adobe

Un showcase de CSS3 (animaciones, gradientes, transformaciones, transiciones, letras), HTML5 (canvas, audio, formularios, videos) y almacenamiento por Adobe, que está transformando su suite de aplicaciones en miras de HTML5.

Extra: El póster HTML5

Hay versión impresa con el autógrafo del autor y también fondos de pantalla para tu computadora. La leyenda cada vez me complica la vida. El futuro ya aterrizó, aunque sí me queda claro que tu futuro, si te dedicaras a la web, debe ser HTML5.

Y no olvides, junto a nuestra guía, también hay fondo de pantalla en 3D.

¡La época dorada de HTML5 es hoy!

La mayoría de estos enlaces los comenté en vivo en una conferencia organizada para mejorando.la:

Este artículo es un draft también. Vos puedes ayudarme a incluir más proyectos y sitios que sumen a la Universidad virtual HTML5. Espero tus comentarios, tweets, likes, pluseos o mails.

Christian Van Der Henst S. @cvander
Viajero apasionado, geek y entusiasta del uso y promoción de tecnologías web como herramientas de educación y desarrollo social.

Christian muy buena recopilación de sitios sobre HTML 5, tenía varios desperdigados por ahí entre tristes bookmarks y favorite tweets.

El tema ya no es aprender o no HTML 5, si no la evolución de la web y la apuesta por nuevas tecnologías. Creo que todos estamos esperando que pase de ser un draft a un standard.

Hola Christian, soy de Perú, cuando por aca con el curso de html5 y como puedo enterarme de estos cursos en mi pais. Excelentes conferencias las dos ultimas, felicidades.

Excelente, ayer vi el video y hoy pretendía publicar un post con los vínculos que mencionabas. Felicitaciones y gracias por la info.

[...] Momento HTML5: 30 sitios importantes – Hablar de HTML5 como lo más nuevo que le pasó a Internet está erróneo. La tecnología ya nos está acompañando desde hace bastante tiempo. Lo que si es importante destacar es el Momento HTML5 que estamos viviendo, una época de transición tecnológica donde nuevas tecnologías están conectándose y definiendo la web que ya no es exclusiva de tu computador. [...]

[...] páginas más importantes para desarrollar en HTML5, los chicos de Maestros del web han publicado una lista de los mejores 30 sitios para que podamos aprender técnicas, estructuras, código, funciones, frameworks y trucos útiles [...]

He contado 25 títulos con enlace :P

    @DanielSemper, no has contado bien ;) Viste la conferencia de la W3C? Los links hacia el mobile boiler plate? El Estandar vivo, Web apps 1.0? Suma y verás 30 :)

Ricardo
21/09/2011

Forever Flex and AS3 :)

Si html5 es lo mejor que a pasado en lo que es paginas web

Hola, estuve leyendo los sitios que publicaste y logre hacer que mi sitio sea HTML5 verificado por la W3C: giulianoscaglioni.com

Soy programador de profesión, pero trabajo como profesor de bailes latinos.

Ahora estoy volviendo a programar y me encontre con el html5.
Me encanto todo esto, me estoy devorando todo.
Saludos.

Como bien se dice, el momento de HTML5 no es dentro de poco tiempo, sino ahora!!

Gracias por incluir mi poster HTML5. ¡Qué honor!

[...] 30 Sitios importantes referentes a HTML5 [...]

[email protected]
26/11/2011

me gusta

Excelentes recursos, Gracias.

chevere el logo HTML 5

[...] es el presente, eso ya lo sabes. En el 2011 el Movimiento HTML5 fue fortaleciendose y dio cabida a varias iniciativas y sitios importantes que marcaron a este momento de la historia del diseño y el [...]

me estoy animando a aprender html5, pero hay algun requisito? necesito aprender javascrip o css?
puedo aprender html5 de cero? o tengo que saber html 1?

por favor diganme, para empezar a aprender de una vez
gracias :)

[...] es el presente, eso ya lo sabes. En el 2011 el Movimiento HTML5 fue fortaleciendose y dio cabida a varias iniciativas y sitios importantes que marcaron a este momento de la historia del diseño y el [...]

jsgjavi
18/02/2012

cheat sheet en españa es chuleta,

19690