Send to Friend

DePara


Puede que te interese (RecBib)

Tutorial sobre HTML5 y CSS3

28Ago2010

HTML5 es la quinta revisión importante del lenguaje de la World Wide Web: Hypertext Markup Language (HTML). Un significativo paso de estandarización en el que juegan un papel importante no sólo los diseños de las páginas web sino también la voluntad de todas las instituciones implicadas en el desarrollo de navegadores web, formatos libres, plataformas, aplicaciones y hardware.

Ejemplos de aplicaciones de HTML5, CSS3 y Javascript con un navegador:

Referencias y recursos sobre HTML5 y capacidad del navegador:

Detección de características de HTML5 y CSS3 y alternativas de navegador con Javascript (browser enhancement):

Ejemplo de uso de las nuevas etiquetas semánticas de HTML5:

Nuevos atributos en HTML5:

Nuevos eventos en HTML5:

Nuevos elementos, tipos y atributos de HTML5 Form: (Nota: sólo el navegador Opera soporta la mayor parte de estas nuevas características)

Geolocalización: (Nota: estas demos únicamente se pueden usar en dispositivos móviles en su mayor parte)

Local Storage:

Session Storage:

Web workers: (Nota: más o menos como multithread, a efectos prácticos para evitar que se "cuelgue el navegador")

Etiquetas de audio en HTML5:

Etiquetas de video en HTML5: (Nota: mi recomendación personal es soportar únicamente los formatos WebM y Ogg Theora por razones éticas, así como explicar al usuario final que si no puede visualizar el video es porque el navegador que usa no respeta las libertades del usuario. Si por presiones comerciales o de clientes se debe dar soportes a "otros formatos" siempre se pueden dar todas las alternativas pero poniendo siempre en el código primero a WebM y Ogg Theora para dar ejemplo. Aun así mi opinión personal es que en una página web personal o de la Administración no se deberían hacer concesiones al mercado ni a los formatos privativos)

Etiqueta Canvas en HTML5:

Nuevas etiquetas en HTML5: (Nota: input no es nuevo, pero si hay muchos tipos y atributos de input nuevos que merecen mención)

  • article
  • aside
  • audio
  • canvas
  • command
  • datalist
  • details
  • embed
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • input
  • keygen
  • mark
  • meter
  • nav
  • output
  • progress
  • rp
  • rt
  • ruby
  • section
  • source
  • summary
  • time
  • video

Etiquetas existentes que han sido redefinidas en HTML5 (algunas muy sutilmente)

  • !DOCTYPE – simplificado, abreviado
  • a – usado sólo para hiperenlaces, name ya no es un atributo válido, debe llevar href
  • address – nueva indicación cuando address está una etiqueta article
  • b – compensado estilísticamente
  • em – énfasis
  • hr – separación temática a nivel de párrafo
  • i – voz alternativa
  • legend – legend ahora se puede utilizar con la etiqueta figure y la etiqueta details además de la etiqueta fieldset
  • menu – controles de list form, ya no son obsoletos
  • small – comentario aparte y letra pequeñ
  • strong – gran importancia

Etiquetas eliminadas:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • noframes
  • s
  • strike
  • tt
  • u
  • xmp

Concluyendo, la implementación de HTML5 depende mucho del nivel de soporte que ofrecen los navegadores para la características de este estándar, siendo Opera y Firefox los que éticamente ofrecen un mayor compromiso. Una implementación de contenidos teniendo en cuenta las abusivas políticas de Internet Explorer o Safari (teniendo como objetivo satisfacer las intenciones monopolístas de iPad o iPhone por ejemplo) sólo puede traer nefastas consecuencias para el futuro desarrollo de internet y las libertades de los usuarios. Por lo tanto, la recomendación debe ser ofrecer alternativas para esos requerimientos poco éticos únicamente si se está trabajando en entornos comerciales y bajo fuertes presiones de los clientes (aunque siempre explicándoles los peligros que existen de seguirle el juego a compañías monopolístas como Apple o Microsoft, y los desastres que ocurrieron en el pasado con todos esos contenidos corporativos "atascados" en Internet Explorer). La recomendación para la Administración y páginas web personales debe ser siempre la implementación de los estándares y la accesibilidad web, dando soporte a los formatos libres, e indicando al usuario los navegadores más optimizados para las funciones que le queremos presentar. Por último, no debemos olvidar que la estandarización de la web es cosa de todos, tanto de los desarrolladores de contenidos como de los desarrolladores de tecnologías y los usuarios que los demandan.

Distribuir contenido