Translate

lunes, 29 de octubre de 2012

HTML5 » Fechas en HTML5



Hay múltiples motivos por los que tenemos que añadir fechas a nuestras páginas web, desde el típico de indicar cuándo fue creada o modificada la página, para reseñar la fecha de publicación de un artículo, para poner la fecha de un comentario, reseñar un acontecimiento,...

Es por ello que, después de muchas discusiones, eliminar las fechas de la especificación HTML5 y volverlas a aceptar (en inglés), tenemos el elemento time para poder especificar fechas en HTML5.

El elemento time en HTML5 tiene la siguiente estructura.



Así una fecha en HTML5 se podría definir de la siguiente forma:



Ya que el atributo datetime no es estrictamente necesario, pero muy aconsejable si queremos tener un formato entendible por máquinas. Y es que el atributo datetime nos permite especificar la fecha en un formato ISO 8601.

Así, si insertamos la fecha con el atributo datetime tendríamos lo siguiente:


Pero la fecha no se tiene que restringir al formato año mes día. Por ejemplo, podemos temer fechas más cortas, en las que solo especifiquemos el año:


En las que especifiquemos la hora...


En las que especifiquemos la fecha y la hora (en este caso la fecha y hora se separa mediante una T o con un espacio en blanco):



En las que demos incluso la zona horaria GTM (o UTC para ser exactos). En este caso entre la hora y la franja horaria hay que añadir el desplazamiento positivo (con un más) o negativo (con un menos) que tenga esa zona:


Como hemos podido comprobar el manejo del elemento time y de su atributo datetime es realmente sencillo para poder fechas en HTML5.


lunes, 1 de octubre de 2012

25 MEJORES SITIOS PARA APRENDER HTML5

Junto a una muy útil y completa conferencia de CVander sobre las páginas más importantes para desarrollar en HTML5, los integerantes 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 para crear páginas en HTML5, la innovación de la web.

Esta es la lista completa:
HTML5 cool logo
  1. W3C y el draft HTML5: muestra los avances oficiales de la W3C sobre la dirección que tiene HTML5.
  2. El grupo de Whatwg: Mientras que la W3C se movía hacia XHTML2, este grupo empieza a generar su propia propuesta sobre el verdadero futuro de la web y son ellos quienes le dieron vida a HTML5, un estándar vivo. Actualizan todo el tiempo.
  3. HTML5 Test: Un test en línea que evaluá cuan bueno y completo es el soporte de HTML5 en tu navegador.
  4. HTML5 Readiness: Documenta gráficamente el avance de los diferentes navegadores desde el 2008 y las características de HTML5.
  5. Guía HTML5 de mejorando.la: Freddy Vega y Cvander crearon este draft permanente de lo que están aprendiendo de HTML5, en español, en pdf.
  6. HTML5 Visual Cheat Sheet: Una tarjetita práctica para tener todos los elementos de HTML5 cerca para fácil consulta.
  7. HTML5 enabling script: Script para que Internet Explorer interprete HTML5.
  8. HTML5 Boilerplate: Con esta plantilla conocerás el poder de las nuevas etiquetas, código CSS3 y filosofía detrás de HTML5. Para móviles, recomendado ver el HTML5 Boilerplate mobile.
  9. Initializr: Este sitio te genera una plantilla personalizada con solo las características que vas a utilizar. Muy práctico para diseñadores.
  10. Bootstrap de Twitter Twitter comparte un entorno básico para empezar con tu proyecto web basado en su misma plataforma. HTML5, CSS3 (con LESS).
  11. Modernizr: Librería de JavaScript, pensando en compatibilidades e impulsando nuevas características a navegadores viejos.
  12. Paper.js: Una librería JavaScript para trabajar con Canvas en el navegador. Todo sobre el manejo vectorial en HTML5.
  13. Impact.js: Motores de Videojuegos con HTML5.
  14. Can I Use?: Informa sobre el soporte de HTML5, CSS3 y SVG en diferentes navegadores para escritorios y entornos móviles.
  15. Mobile HTML5: Completa tabla comparativa de los diferentes navegadores para móviles y tabletas.
  16. VideoSWS: Comparación de características de cada player para el tag video.
  17. Youtube y HTML5: El player de video de YouTube en HTML5.
  18. HTML5 Doctor: Un espacio colaborativo entre asistentes a un FOWD en Londres que están siempre inquietos por noticias y desarrollo de HTML5.
  19. Apple y HTML5: El compromiso, ejemplos de Apple y el uso de HTML5 en su ecosistema de desarrollo, sitios web y dispositivos.
  20. Web Open Wonder de Mozilla: Ejemplos de Mozilla con HTML5, diseño, vídeo y Webgl.
  21. Chrome Experiments: Galería con enlaces a increíbles ejemplos del equipo de Chrome y lo que han hecho con HTML5. Su eslogan es: Not your mother’s Javascript.
  22. Html5 Rocks: Propuesta lanzada por Google con guías, tutoriales, ejemplos y código libre disponible para modificarse y re-compartir.
  23. El Test Drive de IE por Microsoft: 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.
  24. The expressive web por Adobe: Un showcase de CSS3 (animaciones, gradientes, transformaciones, transiciones, letras), HTML5 (canvas, audio, formularios, videos) y almacenamiento. Adobe está transformando su suite de aplicaciones en miras de HTML5.
  25. Fluid Squares(esta página es mi aporte a la lista original) Sitio que con un interesante grid sigue listando los sitios más recientes sobre el desarrollo del HTML5. Este elemento de la lista es para entrar a otra lista, tipo Inception.

Libro: Dive into HTML5

Si en lugar de varias pestañas abiertas desde tus marcadores, prefieres tener todo impreso en un libro, según CVander el mejor libro que se puede obtener sobre HTML5 fue escrito por Mark Piligrim:Dive into HTML5. Se puede comprar una copia de O’relly en Amazon, y si lo lees en forra digital online te sale gratis. Está en inglés y vale mucho la pena.

*** SI te gustó el post, compartelo, gracias...