Familiarizate con HTML 5. Introducción HTML 5


Buenas a todos os dejo unos muy buenos apuntes, de la UOC sobre html 5:





Y para aquellos que os quedéis un poco perdidos en el tema del diseño / programación web, os dejo también el enlace a los apuntes de diseño web, css y javascript.


En ningún momento jabatogames se atribuye su creación ni comercia con ello.

Saludos.

Todo bajo:

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada
.


Introducción


La mayor parte del currículo de estándares web se basa en la última versión estable de HTML —HTML 4.01. La especificación de HTML 4.01 se completó en 1999, hace más de 10 años, en el momento de escribir esto. Pero a menos que hayas estado escondido bajo una roca durante el último año, poco más o menos, serás muy consciente de que hay una nueva versión de HTML en la producción — ¡HTML5!
Así... ¿por qué te hemos estado enseñando HTML 4.01, a pesar de todo? En este artículo daremos respuesta a esta pregunta, y a muchas más. Te daremos la base esencial necesaria para saber por qué se creó HTML5 y dónde y cómo está ahora mismo. Te aconsejaremos sobre cómo encajarlo en tu aprendizaje actual, aunque seas un diseñador o desarrollador web novel, y veremos algunas de las principales características de HTML5, para que puedas ver que suma al ya de por sí potente lenguaje HTML.

¿Por qué HTML5?

Cuando HTML 4 estaba a punto de cerrarse, el W3C decidió (en un taller organizado en 1998) que, en cuanto a lenguajes de marcado, el futuro de la Web era XML y XHTML, no HTML (comparación de XHTML y HTML). Así que el W3C dibujó una línea bajo HTML 4.01 y se concentró en la especificación XHTML 1.0, acabada a principios de 2000. XHTML 1.0 es exactamente igual que HTML 4.01, pero usando las reglas de sintaxis de marcado de XML. Pronto le siguió XHTML 2.0, que añadía un montón de nuevas y poderosas características y un 'mime-type' exclusivamente XML, y estaba destinado a ser el próximo gran éxito en la web.
El problema de XHTML 2.0 es que no era compatible con el marcado ya existente en la web —los elementos funcionaban de manera diferente, el mimetype de XHTML (application / xhtml + xml) no funciona de ninguna forma en IE, que todavía tenía la mayor cuota de mercado de navegadores en el momento de escribir esto, las herramientas de desarrollo disponibles no estaban preparadas para trabajar con XML, y no reflejaba realmente lo que los desarrolladores web estaban haciendo realmente ahí en la web en estado salvaje.
En 2004, un grupo de desarrolladores e implementadores de opiniones similares (incluyendo representantes de Opera, Mozilla y, un poco más tarde, Apple) se reunieron y formaron un grupo separado de especificaciones llamado WHATWG, con el objetivo de escribir una mejor especificación de marcado HTML, capaz de soportar la creación de la nueva generación de aplicaciones web, sin —y esto es fundamental— romper la compatibilidad con el HTML existente.
El resultado fue la especificación Web Applications 1.0, que documentaba los comportamientos y características existentes e interoperables de los navegadores, así como nuevas características para la pila web, como APIs y nuevas reglas de análisis del DOM. Después de muchas discusiones entre los miembros del W3C, el 7 de marzo de 2007 se reanudó el trabajo en HTML con un nuevo Grupo de Trabajo de HTML en un proceso de participación abierta. En pocos días cientos de participantes se apuntaron a seguir trabajando en la siguiente versión de HTML. Una de las primeras decisiones del Grupo de Trabajo de HTML fue adoptar la especificación Web Applications 1.0 y llamarla HTML5.
HTML5 ya es muy buena cosa para los desarrolladores web y diseñadores, ya que:
  • Es muy compatible con lo que ya existe —no hace falta aprender idiomas completamente nuevos para utilizar HTML5. Las nuevas características de marcado funcionan igual que las antiguas (aunque la semántica de algunos elementos ha cambiado —cubriremos estas diferencias en un próximo artículo), y las nuevas APIs se basan en el mismo JavaScript y DOM con que programan los desarrolladores desde hace años.
  • Añade nuevas y potentes características de HTML que antes sólo estaban disponibles en la web usando tecnologías como el plugin de Flash, o con JavaScript y hacks complejos. La validación de formularios y el vídeo son los principales ejemplos.
  • Es más adecuado para escribir aplicaciones dinámicas que las versiones anteriores de HTML (HTML fue diseñado originalmente para la creación de documentos estáticos).
  • Tiene un algoritmo de interpretación claramente definido, de forma que todos los navegadores que implementen HTML5 crearán un mismo DOM a partir de un mismo marcado, independientemente de la validez de este. Esto representa una enorme victoria para la interoperabilidad.

¿Qué significa HTML5 para mí?

Para empezar, respondamos a esa pregunta que te da vueltas por la cabeza desde que has empezado a leer este artículo: ¿por qué te hemos enseñado la mayor parte del currículo de estándares web con HTML 4.01, si ya HTML5 está en el horizonte? En primer lugar, cuando se publicó por primera vez el CEW en 2008, HTML5 estaba mucho más en flujo que ahora, y no queríamos enseñar algo que probablemente cambiaría posteriormente.
En segundo lugar, y más importante, HTML5 es retrocompatible: en términos prácticos esto significa que todo lo que hay en HTML 4.01 está también en HTML5. Así que al aprender HTML 4.01 ya estás aprendiendo una gran parte de HTML5. Este artículo, y los otros de esta sección, pretende completar las lagunas de conocimiento mediante la enseñanza de las capas extra que HTML5 añade sobre HTML 4.01 como, por ejemplo, los elementos semánticos añadidos y las nuevas APIs que permiten controlar la reproducción de vídeo y dibujar sobre un lienzo. Daremos un montón de referencias a más información sobre estas características al final del artículo.
Algunas partes de HTML5 ya están implementadas de manera lo suficientemente estable en los navegadores como para usarse de forma segura incluso en un sitio en producción (como siempre, hay que tomar decisiones teniendo en cuenta el público objetivo del sitio y sus características). Además, si una característica no es compatible con algunos navegadores, existen soluciones alternativas —los artículos las mostrarán, en el momento adecuado.
Para darle una respuesta breve y concluyente, HTML5 es el futuro de la Web, y una gran parte de tu futuro como diseñador o desarrollador web. Me gustaría recomendarte que empieces a aprender HTML5 en cuanto estés preparado —muchas de las nuevas características facilitarán mucho tu trabajo actual, y protegerá tus conocimientos para el futuro. Si eres estudiante en la universidad y el profesor aún no sabe nada de HTML5, o no está dispuesto a cubrirlo en su curso, muéstrales este artículo.

Características de HTML5

HTML5 contiene muchas nuevas características para hacer HTML mucho más potente y adecuadas para la creación de aplicaciones web. En la siguiente lista hemos resumido las principales que realmente deberías conocer.
Algunas de las características enumeradas a continuación no son realmente parte de la especificación HTML5 en sí, sino que se definen en especificaciones estrechamente relacionadas, y por tanto siguen siendo piezas válidas del nuevo movimiento para conseguir aplicaciones web modernas, y te es útil conocerlas.
  • Nuevos elementos semánticos: Como ya sabes, la semántica es muy importante en HTML: siempre debemos utilizar el elemento apropiado para cada función. En HTML 4.01 tenemos un problema: sí, hay muchos elementos para definir determinados recursos, como tablas, listas o encabezados, pero también hay muchas características comunes a muchas páginas web que que carecen de elementos para definirlas. Piensa en las cabeceras, pies de página, menús de navegación, etc. Hasta ahora las hemos definido usando <div id="xxx"> </ div>, que nosotros somos capaces de entender, pero las máquinas no, sin mencionar que diferentes desarrolladores web usan identificadores y clases diferentes. Afortunadamente, HTML5 viene con nuevos elementos semánticos como <nav><header>,<footer> y <article>. Puedes aprender acerca de estos en el artículo Los nuevos elementos estructurales de HTML5.
  • Nuevas características de formularios: HTML 4.01 ya permite crear formularios usables y accesibles, pero algunas características comunes son menos cómodas de lo que deberían ser, y requieren el uso de hacks para ponerlas en práctica. HTML5 proporciona una forma estandarizada y fácil de implementar características tales como selectores de fecha, deslizadores y validación en el cliente. Los formularios HTML5 se tratan en detalle en el artículo Las Nuevas Características de Formularios de HTML5.
  • Audio y vídeo nativos: Durante años, el audio y vídeo en la Web se ha hecho con Flash, en general. De hecho, la razón por la que Flash se hizo tan popular en los albores del siglo XXI es que los estándares abiertos no proporcionaban un mecanismo compatible entre navegadores para su implementación: los diferentes navegadores implementaban maneras diferentes de hacerlo, en competencia unos con otros (por ejemplo, <object> y <embed>), complicando mucho todo el proceso. Flash daba una forma fácil y de gran calidad de publicar vídeo multinavegador.
    HTML5 incluye elementos <audio> y <video> para implementar reproductores de audio y vídeo nativos sin usar más que estándares abiertos, y también incluye una API que permite implementar fácilmente controles de reproducción personalizados. Hay muchos artículos en dev.opera.com sobre el audio y vídeo de HTML5, pero el mejor lugar para comenzar es el artículo inaugural de Bruce Lawson y Pat Lauke Introducción al Vídeo HTML5. También vale la pena visitar More accessible HTML5 video player.
  • API de dibujo en Canvas: El elemento <canvas> (lienzo) y la API asociada permiten definir un área de la página sobre la que dibujar y usar comandos JavaScript para dibujar líneas, formas y texto, importar y manipular gráficos y vídeo, exportar en diferentes formatos de imagen y mucho más. Para más información sobre el lienzo de HTML5, comienza por El lienzo de HTML5: Fundamentos, de Mihai Sucan.
  • Web Sockets: Esta API (definida en la especificación de web sockets, separada de la especificación HTML5) permite establecer una conexión continua entre un servidor y un cliente en un puerto específico y enviar datos en ambas direcciones hasta que el puerto se cierre. Esto mejora mucho la eficiencia de las aplicaciones web, ya que pueden intercambiarse datos de forma continua y precisa entre el cliente y el servidor sin recargas de página continuas y sin tener que consultar constantemente el servidor para ver si hay actualizaciones disponibles. Introducing Web Sockets es un buen punto de inicio.
  • Aplicaciones web offline: HTML5 proporciona una serie de características que permiten a las aplicaciones web ejecutarse sin conexión. Los cachés de aplicación permiten guardar una copia de todos los elementos y archivos necesarios para ejecutar aplicaciones web localmente, y las bases de datos Web SQL permiten guardar una copia local de los datos de una aplicación web. En conjunto, permiten seguir utilizando una aplicación cuando uno se queda sin conexión y luego sincronizar los cambios con la versión principal en el servidor cuando la red vuelva a estar disponible.
  • Almacenamiento Web: Las cookies nos permiten un cierto grado de almacenamiento de datos locales, pero su uso es bastante limitado. El Almacenamiento Web de HTML5 nos permite almacenar muchos más datos, y hacer mucho más con ellos. Puedes leer Web Storage: easier, more powerful client-side data storage, de Shwetank Dixit, para obtener más información.
  • Web workers: Un problema común para las aplicaciones web es que su rendimiento se resiente cuando se requiere una gran cantidad de procesamiento de datos, puesto que todo sucede en un único proceso o subproceso (sólo puede haber una única carga de procesado). Los 'trabajadores web' mitigan este problema porque permiten crear procesos de fondo para hacerse cargo de parte del cálculo, permitiendo que el proceso principal siga adelante con otras cosas. Para leer más sobre los 'trabajadores web', puedes leer Web Workers rise up! de Daniel Davis.
  • Geolocalización: La especificación de geolocalización (de nuevo, fuera de la especificación de HTML5) define una API que permite a una aplicación web acceder fácilmente a los datos de localización que se hayan puesto a disposición previamente, por ejemplo, a través de las capacidades GPS de un dispositivo. Esto permite añadir todo tipo de útiles funciones de localización a las aplicaciones como, por ejemplo, resaltar el contenido más relevante para la ubicación actual. Para ver una introducción básica, consulta How to use the W3C Geolocation API
Nota: CSS3 DEFINITIVAMENTE NO es parte de HTML5 y nunca lo será. No dejes que tu departamento de marketing te diga lo contrario.

Resumen

Así acaba nuestra introducción a HTML5. Espero que la hayas encontrado útil y que continuarás leyendo el resto de artículos sobre HTML5 que hemos referenciado.

Continúa leyendo click en:



Los nuevos elementos estructurales de HTML5


Introducción

HTML5 pone dos cosas nuevas sobre la mesa: APIs nuevas que añaden nuevas características esenciales para el modelo de desarrollo web con estándares abiertos y nuevos elementos estructurales que definen características específicas para páginas web con una semántica mucho más precisa que la disponible en HTML 4. Encontrarás más artículos que cubren muchas de las nuevas APIs buscando los artículos de Dev.Opera marcados con la etiqueta HTML5.
Este artículo, por su parte, se centra en el segundo punto: veremos brevemente cómo se han elegido los nuevos elementos semánticos, cuáles son las principales novedades y cómo utilizarlos, cómo funcionan los encabezamientos de HTML5 y el soporte de los navegadores para estos nuevos elementos, incluyendo cómo puede añadirse soporte a navegadores antiguos.

Presentando los elementos estructurales de HTML5

HTML 4 ya tiene un montón de elementos semánticos que permiten definir con claridad las diferentes partes de una página web, como formularios, listas, párrafos, tablas, etc. Pero tiene sus deficiencias. Todavía dependemos mucho de elementos <div> y <span> con diferentes identificadores y atributos de clase para definir varias características, tales como menús de navegación, encabezados, pies de página, contenido principal, cajas de alerta, barras laterales, etc. Algo como <div id="cabecera"> funciona si nos referimos a que desarrolladores y diseñadores saben para qué sirve y son capaces de usar CSS y JavaScript para aplicar estilos y comportamiento personalizados para hacer que esto resulte comprensible para los usuarios finales.
Pero podría ser mucho mejor. Todavía hay problemas con esta manera de trabajar:
  • Las personas podemos diferenciar los contenidos, pero las máquinas no: el navegador no ve los diferentes divs como cabecera, pie de página, etc. Los ve como divs diferentes. ¿No sería más útil si los navegadores y lectores de pantalla fuesen capaces de identificar explícitamente, pongamos por caso, el menú de navegación para que un usuario con discapacidad visual pueda encontrarlo más fácilmente, o las diferentes entradas de un blog para que pudieran ser fácilmente sindicadas en un canal RSS sin necesidad de programación adicional?
  • Incluso si se usa código adicional para resolver algunos de estos problemas, sólo puede hacerse de forma fiable para los sitios web propios, puesto que desarrolladores web diferentes usan nombres de clase e identificadores diferentes, especialmente si tenemos en cuenta una audiencia internacional: diferentes desarrolladores web de países diferentes utilizan idiomas diferentes para escribir sus nombres de clase e identificadores
Por tanto, tiene mucho sentido definir un conjunto consistente de elementos para que todos podamos utilizar para esos bloques estructurales comunes que aparecen en tantos sitios web. Los elementos de HTML5 nuevos que vamos a cubrir en este artículo son:
  • <header> (cabecera): Se utiliza para contener la cabecera de un sitio.
  • <footer> (pie de página): Contiene el pie de página de un sitio.
  • <nav>: Contiene la funcionalidad de navegación para la página.
  • <article> (artículo): Contiene una pieza independiente de contenido, que tendría sentido sindicar como elemento RSS como, por ejemplo, una noticia.
  • <section> (sección): Se utiliza bien para agrupar artículos en diferentes temas, bien para definir las diferentes secciones de un solo artículo.
  • <time> (hora): se usa para marcar tiempos y fechas.
  • <aside> (aparte): Define un bloque de contenido relacionado con el contenido principal que lo rodea, pero que no es esencial para el flujo del mismo.
  • <hgroup> (heading group, o grupo de encabezados): Se utiliza para incluir más de un encabezado si quieres que cuente como un único encabezado en la estructura de encabezado de la página.
  • <figure> y <figcaption> (figura y cita de figura): Se usan para encapsular una figura como un único elemento y contener el título de la figura, respectivamente.

¿Cómo se decidieron los nombres de los elementos?

Durante la creación de HTML5, el editor, Ian Hickson, usó las herramientas de Google para extraer datos de más de mil millones de páginas web, repasando los ID y nombres de clase más comúnmente utilizados en el mundo real en la web. Puede verse una de esas encuestas publicada en Google Code: Web Authoring Statistics: Classes. Para resumir una larga historia, los nombres de elementos que veremos en este artículo se tomaron de los 20 identificadores y nombres de clase más populares encontrados en las investigaciones de Hickson.
Nota: Opera hizo un estudio similar, de 3,5 millones de direcciones URL, que llamó MAMA. Mamá tenía un conjunto de URLs más pequeño, pero consideró una variedad más grande y amplia de estadísticas de las páginas web. Para obtener más información, echa un vistazo a MAMA common attributesMAMA's id list y MAMA's class list. Para disponer de más opciones se puede ir a la página de inicio de MAMA.

¿Por qué no hay un elemento <content>?

Si bien esta puede parecer una omisión flagrante, en realidad no lo es. El contenido principal será el bloque de nivel más alto de contenido diferente de <header><nav> o <footer> y, dependiendo de las circunstancias particulares, podría tener más sentido para marcar el contenido usando un <article> , un<section>, o incluso un <div>. Bruce Lawson llama a esto "El algoritmo Scooby Doo", pero para saber por qué, tendrás que preguntarle en Twitter, o en una conferencia.

Una página HTML5 de ejemplo

Hasta ahora hemos repasado un poco de historia y hemos visto qué nuevos elementos se ofrecen. Pasemos a ver un ejemplo para ver exactamente cómo utilizarlos en el contexto de una página real. Echad un vistazo a mi página A history of Pop Will Eat Itself —una historia y discografía de una de mis bandas inglesas favoritas de los 80 y los 90 (si te gusta la música alternativa, por favor, escúchales). He tomado el marcado original de la página de la Wikipedia de Pop Will Eat Itself, lo he limpiado, y lo he convertido en HTML5. Echemos un vistazo más de cerca a lo que hice.
Mantén la página de ejemplo abierta en otra pestaña del navegador mientras lees el artículo: la consultarás de nuevo.
Mi ejemplo se utiliza el tradicional y probado contenedor <div> para centrar el contenido, pero Kroc Camen ha publicado un buen artículo que muestra cómo crear diseños centrados sin contenedores <div>, así que he decidido compartirlo aquí también. También aconseja, útilmente, no utilizar los elementos <section> de HTML5 como contenedores glorificado en páginas HTML 5: simplemente, es un uso equivocado.

Algunas meta-diferencias

Lo primero que notarás es que el ‘doctype’ es mucho más sencillo que en versiones anteriores de HTML:
<!DOCTYPE html>
Los creadores de HTML5 eligieron la cadena de doctype más corta posible: después de todo, ¿por qué debemos esperar que tú, el desarrollador, recuerdes una cadena enormemente larga con múltiples URLs, cuando en realidad el doctype sólo está para poner el navegador en modo de estándares (por oposición al modo ‘quirks’)?
A continuación, quiero llamar la atención sobre la aparente "laxitud de requisitos sintácticos" de HTML5. He puesto comillas a todos mis valores de atributo y he escrito todos los elementos en minúsculas, pero eso es porque estoy acostumbrado a escribir utilizando las reglas de XHTML. Pero puede que te sorprenda descubrir que en HTML5 puedes ignorar esas reglas, si quieres. De hecho, ni siquiera tienes que molestarte en incluir los elementos <head><body> o <html>, y aún así validar.
Nota: esto no es cierto si pasas a usar XHTML (HTML servido con tipo de documento XHTML: application / xhtml + xml)
Esto se debe a que el navegador da siempre por supuestos esos elementos. Si creas una página HTML5 de muestra sin esos elementos, la cargas en un navegador, y compruebas el código fuente de la página cargada, verás que el navegador los inserta automáticamente. También puedes usar el Live DOM Viewer de Ian Hickson para ver el estado de la DOM.
Nota: Vale, de hecho, los documentos HTML 4 también validan sin incluir <head>,<body> o <html>, pero aun así vale la pena mencionarlo aquí.
Otra cosa a mencionar es que la especificación HTML5 define estrictamente cómo manejar el marcado mal formado (por ejemplo, elementos mal anidados o sin cerrar), definiendo por primera vez un algoritmo de análisis. Esto significa que incluso si cometes un error en parte del marcado, el DOM será consistente en todos los navegadores que soporten HTML5.
¿Quiere decir eso que ya no hace falta preocuparse por la validación y las mejores prácticas?¡DESDE LUEGO QUE NO! La validación sigue siendo una herramienta muy útil para hacer páginas tan buenas como sea posible. Aunque el DOM sea consistente en todos los navegadores puede que, para comenzar, no se comporte como querías, dando lugar a dolores de cabeza con el CSS y JavaScript. Y como verás a medida que explores más HTML5, sigue habiendo muy buenas razones para asegurarse de declarar características documento como <html> de salida. Por ejemplo, permite declarar el idioma del documento en el elemento<html> para fines de internacionalización y accesibilidad, y ciertas tecnologías relacionadas también lo requieren. Un buen ejemplo es AppCache.
Para validar los documentos de HTML5, puede utilizar el validador del W3C, que valida HTML5, así como una amplia gama de variedades de lenguajes de marcas. Si quieres un validador específico de HTML5 (y WAI-ARIA y MathML) puedes usar validator.nu.
Como último punto de esta sección, quiero llamar la atención sobre esta línea:
<meta charset="utf-8" />
Es necesario declarar el juego de caracteres del documento dentro de los primeros 512 bytes de este, para protegerse contra un grave problema de seguridad. A menos que tengas una muy buena razón para no hacerlo, debes utilizar UTF-8.
La cabecera del documento tiene este aspecto:
<header>
  <hgroup>
    <h1>A history of Pop Will Eat Itself</h1>
    <h2>Introducing the legendary Grebo Gurus!</h2>
  </hgroup>
</header>
El propósito del elemento <header> es envolver la parte del contenido que forma la cabecera de la página, generalmente con un logotipo o gráfico de la compañía, el título de página principal, etc.

<hgroup>

Notarás que en el código anterior, el único contenido de la cabecera es un elemento <hgroup>, que rodea dos encabezados. Lo que pretendo es especificar el encabezado de nivel superior del documento, más un subtítulo o ‘tagline’. Quiero que sólo cuente el nivel superior de encabezado en la jerarquía de encabezados del documento y eso es exactamente lo que hace <hgroup>: que un grupo de encabezados cuente como un único encabezado a efectos de la estructura del documento. Hay más información acerca del funcionamiento de encabezados en la siguiente sección: Esquemas HTML5 y el algoritmo de encabezados de HTML5.
Si vas al final del documento verás el siguiente código:
<footer>
  <h2 id="copyright">Copyright and attribution</h2>
</footer>
<footer> debería usarse para contener el contenido de pie de página del sitio: si te fijas en la parte inferior de tus sitios favoritos, verá que los pies de página se utilizan para poner una variedad de cosas, desde los avisos de copyright y datos de contacto a las declaraciones de accesibilidad, pasando por información de licencias y varios otros enlaces secundarios.
Nota. No existe un límite de un encabezado y pie de página por página: podrías tener una página con múltiples artículos y un encabezado y pie por artículo.
Subiendo de nuevo por el documento encontrarás esta estructura:
<nav>
  <h2>Contents</h2>
   <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      <!-- other navigation links... -->
    </ul>
</nav>
El elemento <nav> sirve para marcar los enlaces de navegación u otras estructuras (por ejemplo, un formulario de búsqueda) que te llevan a diferentes páginas del sitio actual, o a diferentes áreas de la página actual. Otros enlaces, como los enlaces patrocinados, no cuentan. Por supuesto, puedes incluir los encabezados y otros elementos de estructura dentro de <nav>, pero no es obligatorio.

<aside>

Justo por debajo del encabezado del documento tenemos lo siguiente:
<aside>
  <table>
    <!-- lots of quick facts inside here -->
  </table>
</aside>
El elemento <aside> sirve para marcar fragmentos de contenido relacionados con el contenido principal, pero que no encajan directamente en el flujo principal. Por ejemplo, en este caso tenemos un montón de datos breves y estadísticas sobre la banda, que no funcionarían bien metidos con calzador en el contenido principal. Otros candidatos adecuados para los elementos <aside> serían listas de enlaces a contenidos externos relacionados, información adicional, citas y/o barras laterales.

<figure> y <figcaption>

El dúo de <figure> y <figcaption> se creó para resolver un conjunto muy específico de problemas. Para empezar, ¿no es siempre un tanto semánticamente dudoso e impuro marcar una imagen y su título como dos párrafos, o un par de una lista de definiciones, o alguna cosa por el estilo? Y, en segundo lugar, ¿qué hacer cuando se quiere una figura consistente en una imagen, o dos imágenes, o dos imágenes y un texto?<figure> nos sirve para envolver todo el contenido que se quiera incluir en una sola figura, ya sea texto, imágenes, SVG, vídeos, o cualquier otra cosa. Después se anida <figcaption> dentro del elemento<figure>, con el texto descriptivo de la figura. La figura que incluyo en el ejemplo es simple, para empezar:
<figure>
 <img src="pwei.png" alt="Old poppies logo" />
 <figcaption>
   The old poppies logo, circa 1987.
   <a href="http://www.flickr.com/photos/bobcatrock/317261648/">Original picture on 
   Flickr</a>, taken by bobcatrock.
 </figcaption>
</figure>

<time>

El elemento <time> permite definir un valor de fecha y hora sin ambigüedad, legible a la vez por personas y máquinas. Por ejemplo, he marcado las fechas de lanzamiento de singles de la banda así:
<time datetime="1989-03-13">1989</time>
El texto entre las etiquetas de apertura y cierre pueden ser el que quieras, según corresponda a la audiencia del sitio. Si quisieses, también podías ponerlo así:
<time datetime="1989-03-13">13th March 1989</time>
<time datetime="1989-03-13">March 13 1989</time>
<time datetime="1989-03-13">My nineteenth birthday</time>
Por su parte, la fecha dentro de los atributos de fecha y hora es un estándar ISO legible por ordenador (puedes consultar W3C Tip: Use international date format (ISO) para obtener más información), con lo que se obtiene lo mejor de ambos mundos. También se puede agregar la hora al final de la norma ISO, de esta forma:
<time datetime="1989-03-13T13:00">One o'clock in the afternoon, on the 13th of March 1989</time>
También puede agregarse un ajuste de zona horaria. Así, por ejemplo, para convertir el último ejemplo en hora del Pacífico, podría hacer esto:
<time datetime="1989-03-13T13:00Z-08:00">One o'clock in the afternoon, 
on the 13th of March 1989</time>

<article> y <section>

Ahora nos fijaremos en los que probablemente sean los dos elementos más incomprendidos de HTML5:<article> y <section>. La primera vez que te los encuentras la diferencia puede parecer confusa, pero en realidad la cosa no está tan mal.
Básicamente, el elemento <article> es para piezas de contenido independientes que tendrían sentido fuera del contexto de la página actual, y podrían sindicarse perfectamente. Eso incluiría las entradas de un blog, un vídeo con su transcripción, una noticia, o una parte de una historia por capítulos.
El elemento <section>, por su lado, sirve para dividir el contenido de una página en diferentes funciones o áreas temáticas, o dividir un artículo o historia en secciones diferentes. Así, por ejemplo, en mi historia de PWEI, la estructura tiene este aspecto:
<article>
  <section id="Intro">
    <h2>Introduction</h2>
  </section>
  <section id="History">
    <h2>History</h2>
  </section>
  <section id="Discography">
    <h2>Discography</h2>
  </section>
</article>
Pero también podrías tener una estructura como:
<section id="rock">
  <h2>Rock bands</h2>
  <!-- multiple article elements could go in here -->
</section>
<section id="jazz">
  <h2>Jazz bands</h2>
  <!-- multiple article elements could go in here -->
</section>
<section id="hip-hop">
  <h2>Hip hop bands</h2>
  <!-- multiple article elements could go in here -->
</section>

¿Cómo afecta eso a <div>?

Así, con todos estos fantásticos nuevos elementos para usar en nuestras páginas, los días del humilde<div> están contados, ¿verdad? NO. De hecho, el <div> todavía tiene un uso perfectamente válido. Debe usarse cuando no hay otro elemento más adecuado para agrupar un área de contenido, y ese suele ser el caso cuando se usa un elemento para agrupar contenido únicamente para aplicar estilos o efectos visuales. El ejemplo en mi historia de los PWEI es el <div id="wrapper"> que he puesto alrededor de todo el contenido. La única razón por la que está ahí es para poder usar CSS para centrar el contenido en el navegador:
#wrapper {
  background-color: #ffffff;
  width: 800px;
  margin: 0 auto;
}

<mark>

El elemento <mark> sirve para destacar términos de relevancia actual o para destacar partes de contenidol sobre las que se quiere llamar la atención, pero cuyo significado semántico no se quiere cambiar. Es como cuando usted lees un artículo impreso y subrayas las partes que te parecen importantes con rotulador. Así, por ejemplo, es posible que quieras utilizar este elemento para el marcado de líneas en un wiki que deben ser objeto de atención editorial, o para resaltar las ocurrencias de un término de búsqueda que el usuario ha buscado en una página, y luego darles un estilo apropiado en su CSS.

El atributo hidden

El atributo hidden (oculto), cuando se aplica a cualquier elemento, lo oculta por completo de cualquier forma de presentación, independientemente del medio, y debe utilizarse si se tiene la intención de mostrar el contenido más tarde (por ejemplo, usando JavaScript para eliminar el atributo), pero no quieres mostrarlo ahora. No debe ser utilizado para ocultar contenido como las pestañas ocultas de una interfaz con pestañas, ya que eso, en realidad, no es más que una forma diferente de presentar contenido en un espacio más pequeño, en lugar de ocultar el contenido completo.

Esquemas HTML5 y el algoritmo de encabezados de HTML5

Antes de continuar con nuestro viaje hacia el dominio de HTML5, hay otra diferencia importante que debemos tratar entre HTML5 y las versiones anteriores de la especificación. En HTML tenemos que el concepto del esquema del documento, que es básicamente un desglose del documento en sus diferentes encabezados, y su jerarquía relativa, exactamente igual que cuando se escribe un documento en un procesador de textos y ponemos la vista de esquema. En efecto, he creado, básicamente, un esquema del documento de este documento anidando listas para crear la tabla de contenidos al comienzo de este artículo. El esquema de documento de este artículo tiene un aspecto como el siguiente:
- Los nuevos elementos estructurales de HTML5
  - Introducción
  - Presentando los elementos estructurales de HTML5
    - ¿Cómo se decidieron los nombres de los elementos?
    - ¿Por qué no hay un elemento <content>?
  - Una página HTML5 de ejemplo
    - Algunas meta-diferencias
    - <header>
    - <hgroup>
    - <footer>
    - <nav>
    - <aside>
    - <figure> y <figcaption>
    - <time>
    - <article> y <section>
      - ¿Cómo afecta eso a <div>?
  - Esquemas HTML5 y el algoritmo de encabezados de HTML5
  - Cómo  hacer que funcione en navegadores antiguos
  - Resumen
Así que "Los nuevos elementos estructurales de HTML5" es un <h1>, "Presentando los elementos estructurales de HTML5" es un <h2> y así sucesivamente. En HTML4 estamos acostumbrados al hecho de que hay seis niveles posibles de encabezado, y el nivel de título lo dicta el elemento utilizado efectivamente, lo que significa que es perfectamente posible acabar con una jerarquía de encabezados completamente rota si utilizas niveles de encabezado equivocados, o incluso si algunos de sus contenidos se sindican a otro gestor de contenidos.
HTML5 resuelve este problema generando la jerarquía de encabezados basándose en la relación de anidación de las diferentes secciones del documentos. Se crea una nueva sección del documento cada vez que se utiliza lo que se llama contenido de seccionado: los elementos <article><section><nav> y<aside>. Así, por ejemplo, si se toma el ejemplo siguiente:
<h1>My title</h1>

<div>
  <h2>My subtitle</h2>
</div> 
HTML 4 cuenta esto como un encabezado de primer nivel seguido de uno de segundo nivel, pero HTML5 lo cuenta como dos encabezados de primer nivel. ¿Por qué? Porque <div> no es un elemento de seccionado, y por tanto no crea una nueva sección en la jerarquía. Para remediar esto, habría que cambiar el <div> a un elemento de seccionado:
<h1>My title</h1>

<section>
<h2>My subtitle</h2>
</section>
Véase el segundo ejemplo de esquema en vivo.
Ningún navegador implementa actualmente el algoritmo de esquemas de HTML5, pero ya te puedes hacer una idea de cómo funciona mediante la extensión de Opera HTML5 Outliner, el on-line HTML5 outliner de Geoffrey Sneddon, o el outliner HTML5 de Google. Prueba a ejecutar los ejemplos anteriores a través de una de estas herramientas si no me crees. En el futuro no tendrás que molestarse con una jerarquía de h1, h2, h3, etc, ya que independientemente de los elementos de encabezado usados realmente, el algoritmo seguirá llegando a la misma jerarquía a partir de la anidación de las secciones del documento. Pero de momento deberías seguir preocupándote, ya que ningún navegador (ni lector de pantalla) lo soporta todavía.
La gran pregunta, ahora mismo, es "¿por qué molestarse con todo esto"? Bueno, esta nueva forma de elaborar el esquema del documento y su jerarquía de encabezados tiene dos ventajas principales sobre la antigua:
  1. Puedes tener tantos niveles de encabezado como quieras: no estás limitado a seis.
  2. Si transplantas el contenido a otro CMS, y esto hace que los niveles de h1h2h3, etc vayan mal, el algoritmo seguirá llegando a una jerarquía correcta.
Nota: La jerarquía de encabezados de HTML5 es en realidad una idea muy antigua,ideada inicialmente por Tim Berners-Lee en 1991:
De hecho, preferiría, en vez de <H1>, etc <H2> para los títulos [estos provienen de la DTD de AAP] tener elementos <SECTION>..</SECTION> anidables y un <H>..</H> genérico que, a cualquier nivel dentro de las secciones, produciría el nivel requerido de encabezado.

Cómo hacer que funcione en navegadores antiguos

Los navegadores antiguos: eternamente la ruina de nuestra existencia cuando intentamos familiarizarnos con el uso de los juguetes nuevos de la web… De hecho, el problema aquí son todos los navegadores: ningún navegador actual reconoce y soporta estos nuevos elementos estructurales HTML5 como tales. Pero no temas, aún así puedes hacer que funcionen en todos los navegadores de hoy con un mínimo esfuerzo.
En primer lugar, si pones un elemento desconocido en una página web, por defecto el navegador lo tratará simplemente como un <span>, es decir, un elemento en línea anónimo. La mayoría de elementos HTML5 que hemos analizado en este artículo deberían comportarse como elementos de bloque y, por tanto, la manera más fácil de hacer que se comporten correctamente en navegadores antiguos es establecerlesdisplay: block; en el CSS:
article, section, aside, hgroup, nav,  header, footer, figure, figcaption {
 display: block;
}
Esto resuelve todos los problemas en todos los navegadores excepto uno. ¿Adivinas cuál? Sí, increíble, verdad, que IE resulte ser más difícil que los demás navegadores, y se niegue a aplicar estilo a elementos que no reconoce… La solución para IE es ilógica pero, afortunadamente, bastante simple. Para cada elemento de HTML5 que uses es necesario insertar una línea de código JavaScript en la cabecera del documento, de esta forma:
<script>
  document.createElement('article');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('hgroup');
  document.createElement('nav');
  document.createElement('header');
  document.createElement('footer');
  document.createElement('figure');
  document.createElement('figcaption');
</script>
Por arte de magia IE ahora aplicará los estilos a los elementos. Es doloroso tener que usar JavaScript para hacer que funcione el CSS, pero bueno, al menos tenemos un camino a seguir. ¿Por qué funciona esto exactamente? Nadie con quien haya hablado lo sabe realmente. Y también hay un problema con que los estilos TODAVÍA no llegan a la impresora al imprimir documentos HTML5 desde IE.
Nota: El problema de impresión de IE se resuelve usando la biblioteca de JavaScriptHTML5 Shiv, que también se ocupa de añadir las líneas document.createElementpor ti. Deberías envolverla con comentarios condicionales para las versiones de IE anteriores a IE9, para que los navegadores modernos no ejecuten un JavaScript innecesario.

Resumen

Esto cierra nuestra discusión sobre los nuevos elementos estructurales de HTML5. Si quieres más ayuda tenemos mucho más que ofrecer en dev.opera.com, y también deberías consultar a los doctores de HTML5.

Nuevas características de formularios en HTML5


Presentación

HTML5 incluye muchas nuevas características para hacer que los formularios web sean mucho más fácil de escribir, y mucho más potentes y consistentes en la web. Este artículo presenta una breve descripción de algunos de los controles de formulario y de las nuevas funcionalidades que se han introducido.

¿Malas formas?

Planteémonoslo: los formularios HTML siempre han sido dolorosos. No son exactamente divertidos a la hora de crear el marcado y pueden resultar difíciles a la hora de aplicarles estilos —especialmente si quieres que sean coherentes en múltiples navegadores y que encajen con el aspecto general de tu sitio. Y rellenarlos puede ser frustrante para los usuarios finales, incluso si se han creado con cuidado y consideración para que sean tan usables y accesibles como sea posible. Crear un buen formulario es más limitar los daños que crear una experiencia de usuario agradable.
Cuando HTML 4.01 se convirtió en recomendación estable la web era un lugar mayoritariamente estático. Sí, había algún formulario de comentarios aquí y allá y algún que otro script de libro de visitas, pero en general los sitios web estaban para que los visitantes, simplemente, leyesen. Desde entonces la web ha evolucionado. Para muchas personas el navegador se ha convertido en una ventana a un mundo de aplicaciones complejas, basadas en la web que tratan de aportar una experiencia casi de escritorio.
Algunos elementos de formulario complejos y no nativos, creados con JavaScript
Figura 1: Algunos elementos de formulario complejos y no nativos, creados con JavaScript
Para satisfacer la necesidad de esos elementos más sofisticados necesarios para estas aplicaciones, los desarrolladores han estado aprovechando bibliotecas y frameworks JavaScript (como jQueryUI o YUI). Estas soluciones han madurado sin duda en los últimos años, aportando una gran funcionalidad a las páginas web, e incluso comienzan a incorporar soporte para lectores de pantalla a través de tecnologías puente como WAI-ARIA. Pero, en esencia, son una solución para compensar los limitados controles disponibles en HTML. “Imitan" los widgets más complejos (como los selectores de fecha y los controles deslizantes) añadiendo capas de marcado adicionales (no siempre semánticas) y una gran cantidad de código JavaScript al principio de las páginas.
HTML5 pretende estandarizar algunos de los controles ricos más comunes, haciéndolos nativos en el navegador y eliminando la necesidad de estas soluciones cargadas de scripts.

Nuestro ejemplo

Para ilustrar algunas de las nuevas características, este artículo viene acompañado de un >ejemplo básico de formularios HTML5. No pretende representar un formulario “real” (tendrías apuros para encontrar una situación en la que tengas necesidad de todas las nuevas características en un solo formulario), pero debería dar una buena idea del aspecto y comportamiento de los diversos nuevos aspectos.
Nota: la imagen y apariencia de los nuevos controles de formulario y los mensajes de validación difiere de navegador a navegador, por lo que para dar un estilo razonablemente consistente en múltiples navegadores todavía necesitará de cuidadosa consideración.

Nuevos controles de formulario

Como los formularios son la herramienta principal para la entrada de datos en aplicaciones web y los datos que se desea recopilar se han vuelto más complejos, ha sido necesario crear un elemento de entrada con mayor capacidad, para recoger estos datos con más semántica y mejor definición y permitir una gestión de  errores y validación más fácil y más eficaz.

<input type="number">

El primer nuevo tipo de entrada que discutiremos es el de números:
<input type="number" … >
Esto crea un tipo especial de campo de entrada para la entrada de números. En la mayoría de navegadores que lo soportan se presenta como un campo de entrada de texto con un control que permite incrementar y disminuir su valor.
Un tipo de entrada numérico
Figura 2:  Un tipo de entrada numérico

<input type="range">

Crear un control deslizante que permita elegir entre una gama de valores era un proceso complicado y una propuesta semánticamente dudosa, pero con HTML5 es fácil: simplemente se usa el tipo de entrada de rangos.
<input type="range" … >
Un tipo de entrada de rangos
Figura 3: Un tipo de entrada de rangos
Ten en cuenta que, por defecto, esta entrada no suele mostrar el valor seleccionado, ni siquiera el rango de valores que cubre. Los autores deben comunicarlos a través de otros medios. Por ejemplo, para mostrar el valor actual, podríamos usar un elemento de salida junto con algo de JavaScript para actualizar su resultado cada vez que el usuario interactúe con el formulario.
<output  onforminput="value=weight.value"></output>

<input type="date"> y otros controles de fecha y hora

HTML5 tiene diferentes tipos de entrada para la creación de selectores complejos de fecha y hora, por ejemplo, como los selectores de fecha que se ven en casi todos los sitios de reservas de vuelos o trenes. Estos solían crearse usando parches nada semánticos, por lo que es fantástico disponer de maneras estándares y fáciles de hacerlo. Por ejemplo:
<input type="date" … >
<input type="time" … >
Respectivamente, crean un selector de fecha plenamente funcional y una entrada de texto que contiene un separador para horas, minutos y segundos (dependiendo del atributo de paso especificado) que sólo permite introducir un valor de tiempo.
Tipos de entrada de fecha y  hora
Figura 4: Tipos de entrada de fecha y hora
Pero la cosa no termina ahí - hay otros tipos de entrada disponibles relacionados:
  • datetime: combina la funcionalidad de los dos que hemos visto anteriormente, lo que permite elegir una fecha y una hora
  • month: permite elegir un mes, almacenado internamente como un número entre 1 y 12, aunque los diferentes navegadores pueden dar mecanismos más elaborados de selección, como listas de desplazamiento con los nombres de los meses
  • week: permite elegir semana, almacenada internamente con el formato 2010-W37 (semana 37 del año 2010), mediante un selector de fechas similar a las que ya hemos visto

<input type="color">

Este tipo de entrada muestra un selector de color. La implementación de Opera permite al usuario elegir entre una variedad de colores, introducir valores hexadecimales directamente en un campo de texto o invocar el selector de color nativo del sistema operativo.
Una entrada de color y los selectores de color nativos de Windows y OS X
Figura 5: Una entrada de color y los selectores de color nativos de Windows y OS X

<input type="search">

Podría discutirse que el tipo de entrada de búsqueda no es más que una entrada con un estilo diferente. Se supone que los navegadores tienen que dar estilo a estas entradas igual que la funcionalidad de búsqueda del sistema operativo correspondiente. Más allá de esta consideración puramente estética, sin embargo, sigue siendo importante señalar que marcar explícitamente los campos de búsqueda abre la posibilidad de que los navegadores, tecnologías de asistencia o robots automáticos hagan algo inteligente con estas entradas en el futuro. Por ejemplo, un navegador podría ofrecer al usuario una opción para crear automáticamente una búsqueda personalizada para un sitio específico.
Una entrada de búsqueda tal y  como aparece en Opera en OS X
Figura 6: Una entrada de búsqueda tal y como aparece en Opera en OS X

El elemento <datalist> y el atributo list

Hasta ahora hemos estado acostumbrados a utilizar elementos <select> y <option> para crear desplegables de opciones para que elijan nuestros usuarios. Pero ¿y si queremos crear una lista que permita a los usuarios elegir entre una lista de opciones sugeridas pero a la vez ser capaz de escribir el suyo propio? Eso requiere más scripting incómodo. Pero ahora puedes usar, simplemente, el atributo list para conectar una entrada corriente a una lista de opciones, definida dentro de un elemento <datalist>.
<input type="text"  list="mydata" … >
<datalist id="mydata">
<option label="Mr" value="Mister">
<option label="Mrs" value="Mistress">
<option label="Ms" value="Miss">
</datalist>
Creación de un elemento de  entrada con sugerencias usando datalist
Figura 7: Creación de un elemento de entrada con sugerencias usando datalist

<input type="tel"><input type="email"> y <input type="url">

Como sus nombres indican, estos nuevos tipos de entrada se refieren a números de teléfono, direcciones de correo electrónico y URLs. Los navegadores las muestran como entradas de texto de formulario comunes, pero señalar explícitamente qué tipo de texto esperamos en estos campos tiene un papel importante en la validación de formularios del lado del cliente. Además, en ciertos dispositivos móviles el navegador cambiará de la entrada de texto habitual en el teclado en pantalla a variantes más relevantes al contexto. Una vez más, es concebible que en el futuro los navegadores se aprovechen más de estas entradas marcadas explícitamente para ofrecer funcionalidades adicionales como autocompletar direcciones de correo electrónico y números de teléfono basándose en la lista de contactos del usuario o su libreta de direcciones.

Nuevos atributos

Además de los tipos de entrada nuevos completamente, HTML5 define una serie de nuevos atributos para los controles de formulario que ayudan a simplificar algunas tareas comunes y precisar los valores esperados para determinados campos de entrada.

placeholder

Un truco común de la usabilidad en formularios web es tener contenido de relleno en los campos de entrada de texto. Por ejemplo, para dar más información sobre el tipo esperado de información que queremos que el usuario introduzca, que desaparece cuando el control de formulario adquiere el foco. Esto requería algo de JavaScript (borrar el contenido del campo de formulario con foco y volver al texto por defecto si el usuario abandona el campo sin introducir nada), ahora podemos simplemente utilizar el atributo placeholder:
<input  type="text"… placeholder="John Doe">
Una entrada de texto con un  valor de relleno
Figura 8: Una entrada de texto con un valor de relleno

autofocus

Otra característica común para la que antes dependíamos de scripting es hacer que un campo de formulario adquiera el foco de forma automática cuando se carga una página. Esto ahora se puede conseguir con el atributo autofocus:
<input type="text" autofocus  … >
Ten en cuenta que no deberías tener más de un control de formulario autofocus en una página. Además, hay que utilizar este tipo de funcionalidad con precaución, en situaciones en que el formulario representa la principal área de interés en una página. Una página de búsqueda es un buen ejemplo: si no hay una gran cantidad de contenido y texto explicativo, tiene sentido dar foco automáticamente a la entrada de texto del formulario de búsqueda.

min y max

Como su propio nombre indica, este par de atributos permiten establecer un límite inferior y superior para los valores que se pueden introducir en un campo de formulario numérico, como los tipos de entrada numéricos, de rango, fecha y hora (sí, hasta se pueden utilizar para establecer los límites superior e inferior para las fechas: por ejemplo, en un formulario de reserva de viajes podrías limitar el selector de fechas para que sólo permita al usuario seleccionar fechas futuras). Para entradas range, de hecho min y max son necesarios para definir los valores que se devuelven cuando se envía el formulario. El código es bastante simple e intuitivo:
<input type="number" … min="1" max="10">

step

El atributo step se puede utilizar con un valor de entrada numérico para dictar la granularidad de los valores que se pueden introducir. Por ejemplo, es posible que desees que los usuarios introduzcan una hora determinada, pero sólo en incrementos de 30 minutos. En este caso, podemos usar el atributo step, teniendo en cuenta que para entradas time el valor del atributo está en segundos:
<input type="time" … step="1800">

Nuevos mecanismos de salida

Además de los nuevos controles de formulario con que los usuarios puedan interactuar, HTML5 define una serie de nuevos elementos específicamente destinados a mostrar y visualizar información al usuario.

output

Ya hemos mencionado el elemento output al hablar de range: este elemento sirve como una forma de mostrar un "resultado de cálculo", o más generalmente para proporcionar un resultado explícitamente identificado de un script (en lugar de simplemente meter un poco de texto en en un span o div cualquiera con innerHTML, por ejemplo). Para hacer aún más explícito con qué controles de formulario específicos está relacionado, podemos, de forma similar a label, pasar una lista de ids en el atributo opcional for del elemento.
<input type="range" id="rangeexample" … >  <output onforminput="value=rangeexample.value" 
for="rangeexample"></output>

<progress> y <meter>

Estos dos nuevos elementos son muy similares y ambos tienen como resultado un indicador o barra que se presenta al usuario. La distinción está en su propósito. Como sugiere su nombre, progress está destinado a representar una barra de progreso para indicar el porcentaje de realización de una tarea en particular, mientras que meter es un indicador más general de una medida escalar o valor fraccionario.
Una barra indicadora de progreso
Figura 9: Una barra indicadora de progreso

Validación

La validación de formularios es muy importante tanto en el lado del cliente como en el del servidor, para ayudar a los usuarios legítimos a evitar y corregir errores, y para evitar que usuarios maliciosos envíen datos que puedan causar daños a nuestra aplicación. Como ahora los navegadores pueden tener una idea del tipo de valores que se espera de los diferentes controles de formulario (ya sea su tipo, o cualquier límite superior o inferior asignado a valores numéricos, fechas y horas), también puede ofrecer validación de forma nativa: otra tarea tediosa para la que, hasta ahora, los autores debían escribir páginas y páginas de JavaScript o usar bibliotecas o scripts de validación ya existentes.
Nota: para poder validar controles de formulario, estos deben tener atributo name, ya que sin este no se enviarían como parte del formulario.

required

Uno de los aspectos más comunes de la validación de formularios es comprobar el cumplimentado de los campos obligatorios: no permitir que se envíe un formulario hasta que se hayan introducido determinados tipos de información. Esto se consigue ahora simplemente añadiendo el atributo required a cualquier elemento inputselect o textarea.
<input type="text" … required>
La validación de lado de cliente de Opera en acción, mostrando un error para un campo obligatorio que se había dejado vacío
Figura 10: La validación de lado de cliente de Opera en acción, mostrando un error para un campo obligatorio que se había dejado vacío

type y pattern

Como hemos visto, los autores pueden especificar el tipo de entradas que esperan de sus campos de formulario: en lugar de simplemente definir entradas de texto, los autores pueden crear explícitamente entradas para cosas como números, direcciones de correo electrónico y URLs. Como parte de la validación en el lado del cliente, los navegadores ahora pueden revisar que lo que ha introducido el usuario en estos campos más específicos coincide con la estructura esperada: en esencia, los navegadores evalúan los valores entrados contra un patrón incorporado que define cómo son las entradas válidas en esos controles y advertirán al usuario cuando su entrada no coincida con esos criterios.
El mensaje de error de Opera para direcciones de correo no válidas en un control email
Figura 11: El mensaje de error de Opera para direcciones de correo no válidas en un control email
Para otros campos de entrada de texto que, de todas formas, tengan que seguir una estructura determinada (por ejemplo, formularios de inicio de sesión, donde los nombres de usuario sólo puedan contener una secuencia específica de letras minúsculas y números), los autores pueden utilizar el atributo pattern para especificar su propia expresión regular personalizada.
<input type="text" … pattern="[a-z]{3}[0-9]{3}">

Dar estilo con CSS

En concierto con la validación de formularios incorporada de HTML5, el módulo básico de interfaz de usuario de CSS3 define una serie de nuevas pseudo-clases que se pueden utilizar para diferenciar los campos obligatorios y para cambiar la apariencia de los controles de formulario de forma dinámica en función de si se han o no rellenado en forma correcta:
Estilos :valid e :invalid aplicados dinámicamente a medida que se entra una dirección de correo electrónico
Figura 12: Estilos :valid e :invalid aplicados dinámicamente a medida que se entra una dirección de correo electrónico

¿Multinavegador?

En el navegador de escritorio, Opera cuenta actualmente con la implementación más completa de los nuevos tipos de entrada y de la validación nativa del lado del cliente, pero el soporte también está en la hoja de ruta de todos los principales navegadores, por lo que no pasará mucho tiempo antes de que podamos aprovechar estas nuevas y poderosas herramientas. Pero, ¿y en las versiones antiguas de los navegadores?
Por diseño, los navegadores que no entienden los nuevos tipos de entrada (como date o number) simplemente recurrirán a tratarlos como entradas de texto estándar: no tan fáciles de usar como sus avanzadas contrapartes HTML5, pero por lo menos permiten que se cumplimente el formulario. Sin embargo, como con la mayoría de las nuevas funcionalidades de HTML5, podemos ofrecer un plan alternativo más agradable para los usuarios de navegadores que no aún no están al corriente con los formularios HTML5 con detección básica de características en JavaScript, si es necesario, procediendo a la carga de bibliotecas JavaScript externas para "simular" el soporte para widgets de control más complejos y validación. De esta manera, podemos escribir código para el futuro, sin descuidar a ninguno de nuestros usuarios.

Introducción al vídeo en HTML5

Bruce Lawson, Patrick H. Lauke. 11 de febrero de 2010. Publicado en: css, canvas, accesibilidad, html5, multimedia, vídeo, opera 10.50, web abierta

Introducción

Hace mucho tiempo, en una galaxia que ahora parece muy lejana, el multimedia en la web se limitaba a canciones MIDI de sonido metálico y GIF animados. A medida que crecía el ancho de banda y mejoraban las tecnologías de compresión la música MP3 suplantó al MIDI y el vídeo de verdad comenzó a ganar terreno. Todo tipo de reproductores propietarios plantearon un verdadero combate —Real Player, Windows Media Player, etc— hasta que uno emergió como vencedor en 2005: Adobe Flash. Esto fue en gran parte debido a la ubicuidad de su plug-in y el hecho de que era el mecanismo de distribución elegido por YouTube. Flash se ha convertido en el estándar de facto para la distribuciónn de vídeo en la web.
Una de las novedades más emocionantes de HTML 5 es la inclusión del elemento <video>, que permite a los desarrolladores incluir vídeo directamente en sus páginas sin necesidad de una solución basada en plug-ins. Opera propuso el elemento <video> estándar como parte de HTML5 en 2007, e hizo su debut oficial en Opera 10.50.
En este artículo se da una introducción a <video> y algunas de sus APIs asociadas. Veremos por qué el soporte de vídeo nativo en los navegadores es importante, daremos un repaso al marcado del elemento y resumiremos las formas más importantes para controlar el vídeo a través de JavaScript.

¿Por qué necesitamos un elemento <video>?

Hasta ahora, si querías incluir vídeo en una página web, tenías que bregar con un marcado bastante críptico. He aquí un ejemplo, tomado directamente de YouTube:
<object width="425" height="344">
    <param name="movie"
          value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param>
    <param name="allowFullScreen"
      value="true"></param>
    <param name="allowscriptaccess"
      value="always"></param>
    <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
      type="application/x-shockwave-flash" allowscriptaccess="always"
      allowfullscreen="true" width="425"
      height="344"></embed>
  </object>
En primer lugar, tenemos un elemento <object>, un contenedor genérico de "objetos extraños", para incluir la película Flash. Para evitar inconsistencias entre navegadores, también incluimos un elemento de reserva<embed> como contenido de repuesto y  duplicamos la mayoría de los parámetros del <object>. El código resultante es torpe y no muy legible, y tiene otros problemas: el contenido del plugin no interactúa demasiado bien con las otras tecnologías en la página y tiene problemas inherentes de accesibilidad (más sobre esto después).

Anatomía del elemento <video>

En comparación con la complicada construcción necesaria para incluir Flash en la página, el marcado básico necesario para <video> en HTML5 es refrescantemente sencillo:
<video src=turkish.ogv
    width=320
    height=240
    controls
    poster=turkish.jpg>
</video>
Nótese que en nuestro ejemplo nos aprovechamos de la sintaxis más relajada de HTML5: no es necesario entrecomillar los valores de atributos y se pueden usar atributos simples booleanos como autoplay como palabras sueltas. Si se prefiere, se puede, por supuesto, ajustarse también a la sintaxis XHTML controls="controls" y entrecomillar todos los valores de los atributos. Obviamente, tiene sentido elegir el estilo de programación que más convenga y aferrarse a él, por coherencia y facilidad de mantenimiento. En XHTML5, debe utilizarse la sintaxis de XHTML (y también deben servirse las páginas como XML con el tipo MIME correcto, que en la actualidad no funciona en Internet Explorer).
Los atributos del elemento <video> que hemos utilizado en nuestro código de muestra son bastante autoexplicativos :
src
La fuente del elemento, con la dirección URL del archivo de vídeo.
width y height
Al igual que con los elementos img, se pueden establecer explícitamente las dimensiones del vídeo. De lo contrario, el elemento usará como valor por defecto el ancho y alto intrínsecos del archivo de vídeo. Si se especifica una pero no la otra, el navegador modificará el tamaño de la dimensión no especificada para preservar la relación de aspecto del vídeo.
controls
Si este atributo booleano está presente, el navegador mostrará sus controles de vídeo nativos para la reproducción y el volumen. Si se omite, el usuario sólo verá el primer fotograma (o la imagen posterespecificada) y no será capaz de reproducir el vídeo, a menos que se dispare la película desde algún fragmento de JavaScript o crees tus propios controles personalizados, tal y como explicaremos más adelante en este artículo.
poster
El atributo poster señala una imagen que el navegador usará mientras se descarga el vídeo, o hasta que el usuario indique que el vídeo debe reproducirse. Si no se incluye, se  usará el primer fotograma del vídeo.
Para los navegadores web que no admiten actualmente <video>, se puede incluir contenido alternativo. Como mínimo podría incluirse un texto y un enlace al archivo de vídeo en sí, de modo que los usuarios puedan descargar y reproducirlo con la aplicación que deseen:
<video src=turkish.ogv
    width=320
    height=240
    controls
    poster=turkish.jpg>
    Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video>
Así, sin más interludios, puedes echar un vistazo al vídeo de una clase de danza turca, implementando usando exclusivamente la potencia del elemento <video> nativo.
Hay más atributos que no hemos cubierto en nuestros ejemplos. Son:
autoplay
Indica al navegador que debe iniciarse la reproducción del vídeo de forma automática. Utiliza este atributo con cuidado, ya que puede ser muy molesto, si no francamente problemático, especialmente para los usuarios con ayudas técnicas como lectores de pantalla o los que usan conexiones de bajo ancho de banda (por ejemplo, desde un dispositivo móvil).
autobuffer
Si estás bastante seguro de que el usuario querrá activar el vídeo (por ejemplo, porque ha navegado específicamente hasta él y el vídeo es la única razón para estar en la página), pero no deseas utilizarautoplay, puedes establecer la booleana autobuffer. Esta pide al navegador que empiece a descargar al archivo inmediatamente, anticipando que el usuario va a reproducir el vídeo. (Esta parte de la especificación se encuentra actualmente en proceso de cambio, por lo que no se ha implementado en Opera hasta el momento)
loop
El atributo loop (bucle) es otro booleano. Como es de imaginar, pone el vídeo en un bucle infinito. (En la actualidad esto no se ha implementado en Opera)

Códecs: la mosca en la sopa

Firefox y Chrome también soportan Theora. Sin embargo, Safari no lo hace, prefiriendo en su lugar dar soporte nativo para el códec H.264 (que también es compatible con Chrome). Microsoft también ha anunciado soporte para <video> distribuido con H.264. Como se puede imaginar, esto provoca algunos problemas en términos de la necesidad de hacer que los vídeos estén disponibles en diferentes formatos para diferentes navegadores.
En un intento por solucionar este problema, Google ha publicado recientemente el códec de vídeo VP8 y el formato de contenedor WebM en condiciones libres de royalties, con el objetivo de ofrecer un formato de vídeo abierto de alta calidad  disponible para los diferentes navegadores y plataformas. Así lo anunció públicamente en la conferencia Google I/O de 2010.
En el día del anuncio, Opera lanzó una versión experimental con soporte para WebM. Esta característica es ahora parte de la funcionalidad básica de Opera 10.60 y de todas nuestras futuras versiones del navegador de escritorio.
Volviendo a nuestro ejemplo, vamos a codificar el vídeo dos veces —una vez en Theora y otra en H.264—, añadiremos elementos <source> alternativos con los atributos type apropiados al vídeo y dejaremos que el navegador descargue el formato que sea capaz de mostrar. Nótese que en este caso no indicamos un atributo src en el propio elemento <video>:
<video width=320 height=240 controls poster=turkish.jpg>
    <source src=turkish.ogv type=video/ogg>
    <source src=turkish.mp4 type=video/mp4>
    Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video>
El tipo de archivo MP4 también puede ser reproducido por el plug-in de Flash, por lo que ambos pueden ser usados en combinación como contenido de emergencia para las versiones actuales de Internet Explorer y las versiones antiguas de todos los navegadores. Véase la ingeniosa aplicación por parte de Kroc Camen de esta técnica en su artículo Video for everyone!, en el que integra como un doctor Frankenstein los antiguosobject y embed en la parte de contenido alternativo del elemento <video>.
Por supuesto, si los navegadores que no soportan el elemento <video> recurren a usar plug-ins como QuickTime o Flash, volvemos a estar como al principio, y no podremos beneficiarnos de ninguna de las nuevas características y mejoras que esbozaremos a continuación. "¿De qué sirve entonces?", te puedes preguntar. Diríamos que esta es una solución transitoria, hasta que el soporte nativo de vídeo llegue todos los principales navegadores y se llegue a un acuerdo sobre formatos. Es un caso de degradación grácil: puede que a los usuarios les llegue una versión un tanto recortada de la página, pero al menos serán capaces de ver las películas.

Ciudadano de primera en la Web

Ya hemos visto que el marcado del nuevo elemento <video> de HTML5 es un orden de magnitud más legible y comprensible, en comparación con lo que actualmente hay que hacer para incorporar películas Flash a nuestro marcado. Pero independientemente de lo horrible de la vieja forma de codificación, en la mayoría de los casos funciona, ¿no? Entonces ¿por qué íbamos a querer alejarnos de este enfoque de distribución de vídeo a través de un plug-in como Flash?
La principal ventaja del elemento <video> de HTML5 es que finalmente el vídeo se convierte en ciudadano de pleno derecho en la Web, en lugar de ser relegado al interior de un object o del elemento no válido embed (a pesar de que ahora valida en HTML5). Vamos a ampliar en algunas de las ventajas.

Accesibilidad por teclado incorporada

Uno de los grandes problemas no resueltos de la utilización de Flash es la accesibilidad por teclado. Con la excepción de Internet Explorer para Windows, en general no hay ninguna manera de que un usuario pueda saltar sólo con el teclado hasta dar foco a una película Flash. E incluso si estos usuarios se las arreglan para conseguirlo (utilizando tecnologías de asistencia adicional), no hay manera fácil para saltar de nuevo fuera de él (a menos que se agregue código ActionScript adicional a la película para establecer mediante programación el foco del navegador fuera del plugin, en la página). Por el contrario, como el navegador es el responsable directo del elemento <video>, puede manejar los controles de la película como si fueran botones normales de una página web e incluirlos en el orden normal de tabulación.
El soporte de teclado para el vídeo nativo no ha sido implementado en la actualidad en todos los navegadores... sin embargo, ya funciona bien en Opera 10.50 y superiores.

<video> interactúa bien con el resto de la página

En términos simples, cuando incluyes un plug-in en una página reservas un área de dibujo que el navegador delega en el plugin. Por lo que al navegador se refiere, el área del plug-in es una caja negra: el navegador no procesa ni interpreta nada de lo pase allí.
Normalmente esto no es un problema, pero pueden surgir inconvenientes cuando el diseño se solapa con el área de dibujo del plug-in. Imagina, por ejemplo, un sitio con una película Flash pero que también tiene JavaScript o menús desplegables basados en CSS que deben desplegarse por encima de la película. Por defecto, el área de dibujo del plugin está por encima de la página web, lo que significa que los menús, extrañamente, aparecerán detrás de la película. Un efecto antiestético similar ocurre si la página utilizalightboxes1: cualquier película Flash parecería flotar por encima de la página atenuada. Esta es la razón por la que la mayoría de scripts lightbox existentes tiende a cortar por lo sano con la cuestión, eliminando en primer lugar cualquier objeto plugin de la página antes de activar la superposición y volviendo a introducirlos al final.
En el caso específico de los plug-ins Flash, los desarrolladores pueden solucionar este problema de presentación añadiendo el atributo wmode='opaque' al elemento<object> y el equivalente <param name='wmode' value='opaque'> al elemento<embed>. Sin embargo, esto también hace que el plug-in sea completamente inaccesible para los usuarios con lectores de pantalla, por lo que es mejor evitarlo.
También pueden surgir problemas y peculiaridades si la página sufre cambios dinámicos de layout. Si las dimensiones del área de dibujo del plugin cambian de tamaño, esto a veces puede tener efectos imprevistos: puede que una película en reproducción no cambie de tamaño, sino que simplemente se recorte o muestre espacio en blanco extra.
Con el elemento <video> nativo, es el propio navegador el que se ocupa de mostrarlo. Así, <video> se comporta exactamente igual que cualquier otro elemento en el diseño de la página. Se puede colocar, flotar, sobreponer o cambiar de tamaño dinámicamente, sin hacks adicionales. Incluso es posible lograr efectos interesantes, tales como vídeo semi-transparente, simplemente mediante el establecimiento de la opacidad del elemento a través de CSS.
Nos espera todo un nuevo mundo de vídeos de lindos gatitos. No tengo gatitos a mano, pero sí tengo el mejor sucedáneo: niños, así que voy a usar un par de videos con niños para fines de demostración.

Estilos de vídeo con CSS

Ahora que <video> es parte del conjunto de tecnologías de la web abierta, podemos usar CSS para dar estilo al elemento de forma fiable. Como una simple demostración de lo que ahora se puede lograr, vamos a aplicar transiciones CSS al vídeo de danza turca que modifiquen sus dimensiones una vez que hagamos:hover: o :focus:. (Puede lee el tutorial de Opera de transiciones CSS3 y transformaciones 2D.)

Combinar vídeo y canvas

A medida que el navegador se va ocupando de mostrar y procesar vídeo, se pueden superponer y combinar fácilmente otros elementos sobre este. En este ejemplo, se sobreimpone un <canvas> sobre el vídeo. (Advertencia: este vídeo contiene imágenes potencialmente impresionantes en que un apuesto empleado de Opera y sus hijos son amenazados por un puntero de ratón gigante.)
Nótese que el <canvas> no cubre totalmente el vídeo. Hemos hecho el canvas 40 píxeles más corto que la altura de vídeo, para que el área del vídeo donde aparecen los controles no quede cubierta. Esto asegura que, si el usuario desplaza el ratón sobre la parte inferior del vídeo, haya una parte suficiente del elemento<video> asomando por detrás del canvas para recibir el evento hover y hacer que se muestren los controles. El acceso por teclado a los controles debería funcionar independientemente de los elementos que lo cubren, pero actualmente el soporte de teclado varía entre navegadores.

Tus propios controles

<video> y <audio> (que cubriremos en un futuro artículo) son ejemplos de los nuevos elementos para medios del DOM de HTML5, que expone una potente API que proporciona a los desarrolladores control sobre la reproducción de películas a través de toda una serie de nuevos métodos y propiedades de JavaScript. Vamos a echar un vistazo a algunos de los más relevantes para construir nosotros mismos un sencillo controlador personalizado:
play() y pause()
Obviamente, estos métodos inician y detienen la reproducción de vídeo. play() siempre lanza el vídeo desde la posición actual de reproducción. Cuando una película se carga por primera vez, esta posición será el primer fotograma de la película. Hay que tener en cuenta que no hay método stop(): si quieres detener la reproducción y "rebobinar" al inicio de la película, tendrás que hacer pause() y cambiar tú mismo mediante programación la posición de reproducción actual.
volume
Este atributo se puede utilizar para leer o establecer el volumen de la pista de audio del vídeo, tomando un valor en coma flotante que va desde 0.0 (silencio) a 1.0 (el más alto).
muted
Independientemente de volumen, un vídeo puede silenciarse.
currentTime
Al leerse, este atributo devuelve la posición actual de reproducción en segundos, de nuevo expresada en coma flotante. Dar valor a este atributo mueve (si es posible) la posición de reproducción al índice de tiempo especificado. (Nótese que ni fijar currentTime ni moverse están implementados actualmente en Opera.)
Además, los elementos de medios también disparan una serie de eventos como parte de su modelo de procesamiento, eventos a los que podemos escuchar y a los que nos podemos enganchar. Como ejemplo, sólo nos fijaremos en algunos de ellos:
loadeddata
El navegador ha cargado suficientes datos como para iniciar la reproducción de vídeo en la posición actual.
play y pause
Se ha iniciado o interrumpido la reproducción. Si estamos controlando el vídeo desde JavaScript, queremos escuchar estos eventos para garantizar que las llamadas a los métodos play() y pause()retornan con éxito.
timeupdate
La posición de reproducción actual ha cambiado porque se está reproduciendo la película, un script la ha modificado mediante programación, o el usuario ha decidido saltar a un punto diferente del vídeo.
ended
Hemos llegado al final de la película, y el elemento <video> no está dispuesto en bucle o reproducción inversa (no se trata en este artículo).
Ya tenemos todos los elementos básicos necesarios para crear un controlador sencillo. Antes de empezar, sin embargo, una palabra de advertencia: si estamos construyendo nuestro propio reproductor basado en JavaScript, es evidente que querremos suprimir todos los controles nativos del navegador. Sin embargo, es posible que desees proporcionar esos controles como alternativa, para el caso en que el usuario ha desactivado JavaScript en el navegador. Por esta razón, mantendremos el atributo control en el marcado y lo eliminaremos en tiempo de ejecución con el script. Alternativamente, también podríamos establecer el valor del atributo como false: ambos enfoques son válidos. Como nuestro reproductor personalizado depende de los scripts para funcionar, generaremos el propio marcado del reproductor usando JavaScript.
Véase el ejemplo de controles de vídeo HTML mediante scripts en acción. El script es muy descriptivo y ganaría con un poco de limpieza antes de ser utilizado en un entorno de producción, pero espero que ayude a ilustrar algunas de las nuevas y poderosas posibilidades que abre el vídeo HTML5. Con un poco de conocimiento de JavaScript, ahora es fácil para los desarrolladores web crear reproductores personalizados de vídeo que complementen a la perfección sus diseños, sin la necesidad de crear reproductores de vídeo Flash a medida.

1 NdT. Un lightbox es un efecto típico para mostrar, especialmente, imágenes, en el que se atenúa la intensidad de los contenidos de la página para destacar el contenido mostrado.

Canvas HTML5: Fundamentos

Mihai Sucan. 8 de enero de 2009. Publicado en: imágenes, texto, gráficos, 2D, gradientes, html5, web abierta, canvas

Introducción

La especificación de HTML5 incluye un montón de nuevas características, una de las cuales es el elementocanvas (literalmente, lienzo). Los canvas de HTML5 proporcionan una manera fácil y potente de dibujar gráficos usando JavaScript. Para cada elemento canvas puedes utilizar un "contexto" (piensa en una página de un cuaderno de dibujo), en el que puedes lanzar comandos JavaScript para dibujar lo que quieras. Los navegadores pueden aplicar múltiples contextos canvas y las diferentes APIs proporcionan la funcionalidad de dibujo.
La mayoría de los navegadores más importantes incluyen la capacidad de contextos canvas 2D: Opera,FirefoxKonqueror y Safari. Además, hay versiones experimentales de Opera que incluyen soporte para contextos canvas 3D, y un add-on que habilita el soporte para canvas 3D en Firefox:
En este artículo veremos los fundamentos de la aplicación de un contexto canvas 2D, y cómo utilizar las funciones básicas de canvas, incluyendo rectas, formas simples, imágenes, texto y mucho más. Supondremos que ya dominas los fundamentos de JavaScript.
Ten en cuenta que puedes descargar todos los ejemplos de código en un solo archivo zip, así como verlos en vivo usando los enlaces que incluimos.

Las bases del uso de canvas

Crear un contexto canvas en una página es tan fácil como añadir el elemento <canvas> al documento HTML así:
<canvas id="myCanvas" width="300" height="150">
  Contenido para el caso en que el navegador no soporte Canvas.
</canvas>
Es necesario definir un ID de elemento para poder localizar después el elemento en el código JavaScript, y también es necesario definir una anchura y una altura para el lienzo.
Ya hemos creado el cuaderno de dibujo, o sea que toca llevar el lápiz al papel. Para dibujar en el canvas hay que utilizar JavaScript. Primero se localiza el elemento canvas con getElementById y, a continuación, se inicializa el contexto que desees. Una vez hecho esto, puedes empezar a dibujar en el canvas con los comandos disponibles en la API del contexto. La siguiente secuencia de comandos (ejecuta el ejemplo en vivo) dibuja un simple rectángulo en el canvas definido anteriormente:
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
  
// Always check for properties and methods, to make sure your code doesn't break   
// in other browsers.  
if (elem && elem.getContext) {
  // Get the 2d context.
  // Remember: you can only initialize one context per element.
  var context = elem.getContext('2d');
  if (context) {
    // You are done! Now you can draw your first rectangle.
    // You only need to provide the (x,y) coordinates, followed by the width and
    // height dimensions.      
    context.fillRect(0, 0, 150, 100);    
    }  
}
Puedes elegir entre incluir el script en el head del documento o en un fichero externo.

La API de contexto 2D

Ya hemos creado nuestra primera imagen canvas básica. Echemos ahora una ojeada un poco más profunda a la API 2D de canvas, y veamos qué tenemos a nuestra disposición.

Segmentos y trazos básicos

Ya hemos visto en el ejemplo anterior que es muy fácil dibujar rectángulos de color a nuestro gusto.
Con las propiedades fillStyle y strokeStyle puedes elegir fácilmente los colores utilizados para crear formas y trazos básicos. Los valores de color que puedes utilizar son los mismos que en CSS: códigos hexadecimales, RGB(), rgba() e incluso HSLA(), si el navegador es compatible (por ejemplo, esta función es soportada por Opera 10.0 y versiones posteriores).
Con fillRect puedes dibujar rectángulos rellenos. Con strokeRect puedes dibujar solo los bordes del rectángulo, sin rellenar. Si deseas borrar una parte del canvas, puedes utilizar clearRect. Los tres métodos usan los mismos argumentos: xywidthheight. Los dos primeros argumentos dan las coordenadas (x, y) y los dos últimos dan las dimensiones de anchura y altura del rectángulo.
Para cambiar el grosor de las líneas puedes utilizar la propiedad lineWidth. Veamos un ejemplo que utilizaclearRectfillRectstrokeRect y más:
context.fillStyle   = '#00f'; // azul
context.strokeStyle = '#f00'; // rojo
context.lineWidth   = 4;    

// Dibujar unos cuantos rectángulos.  
context.fillRect  (0,   0, 150, 50);  
context.strokeRect(0,  60, 150, 50);  
context.clearRect (30, 25,  90, 60);  
context.strokeRect(30, 25,  90, 60);
Este ejemplo produce un resultado como el que se puede fer en la Figura 1.
Ejemplo de fillRect, strokeRect y clearRect
Figura 1: Ejemplo de fillRectstrokeRect y clearRect.

Caminos

Los caminos (paths) de canvas permiten dibujar formas personalizadas. Primero se dibuja el "perfil", a continuación se dibujan los trazos y finalmente se rellena la forma, si se desea. Crear una forma personalizada es simple: para empezar a dibujar usas beginPath() y a continuación trazas el camino que compone la forma mediante líneas, curvas y otras primitivas. Una vez has terminado, usas fill y stroke si quieres para rellenar la forma o dibujar un trazo y, finalmente, usas closepath() para acabar la forma.
Toca un ejemplo. El siguiente código dibuja un triángulo:
// Establece las propiedades de estilo.  
context.fillStyle   = '#00f';  
context.strokeStyle = '#f00';  
context.lineWidth   = 4;    

context.beginPath();  
// Comenzar desde el punto de arriba a la izquierda.  
context.moveTo(10, 10); 
// se dan las coordenadas (x,y)  
context.lineTo(100, 10);  
context.lineTo(10, 100);  
context.lineTo(10, 10);    

// Listo! Ahora se rellena la forma y dibuja la línea.  
// Nota: la forma no será visible hasta que llames uno de los dos métodos.  
context.fill();  
context.stroke();  
context.closePath();
Esto genera algo como lo que se muestra en la Figura 2.
Un triángulo básico
Figura 2: Un triángulo básico
También he preparado un ejemplo de rutas más complejo, con rectas, curvas y arcos. Échale un vistazo.

Insertar imágenes

El método drawImage permite insertar otras imágenes (elementos img y canvas) en el contexto de tu canvas. En Opera también se pueden dibujar imágenes SVG dentro de un canvas. Se trata de un método bastante complejo, que puede tomar tres, cinco o nueve argumentos:
  • Tres argumentos: El uso básico de drawImage consiste en un argumento para apuntar a la imagen a incluir y dos para especificar las coordenadas de destino dentro del contexto canvas.
  • Cinco argumentos: El uso medio de drawImage incluye esos tres argumentos, más dos para especificar la anchura y la altura de la imagen insertada (en caso de que se desee cambiar su tamaño).
  • Nueve argumentos: El uso más avanzado de drawImage incluye los anteriores cinco argumentos, más dos valores de coordenadas dentro de las imágenes de origen y dos valores para la anchura y la altura dentro de la imagen de origen. Estos valores permiten recortar  de forma dinámica la imagen de origen antes de ponerla en el contexto canvas.
El siguiente código de ejemplo muestra los tres tipos de drawImage en acción:
// 3 argumentos: elemento y coordenadas  (x,y) de destino.  
context.drawImage(img_elem, dx, dy);    

// 5 argumentos: elemento, coordenadas (x,y) de destino y   
// anchura y altura (si quieres cambiarle el tamaño a la imagen).  
context.drawImage(img_elem, dx, dy, dw, dh);    

// 9 argumentos: el elemento, coordenadas (x,y) de la fuente, anchura y 
// altura de la fuente (para recortar), coordenadas (x,y) de destino y anchura y  
// altura de destino (reescalado). 
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
Esto debería generar lo que se muestra en la Figura 3.
Ejemplo de drawImage
Figura 3: Ejemplo de drawImage

Manipulación basada en píxels

La API del contexto 2D ofrece tres métodos para dibujar píxel a píxel: createImageDatagetImageData yputImageData.
Los píxeles en bruto se guardan en objetos de tipo ImageData. Cada objeto tiene tres propiedades: width,height y data. La propiedad data es de tipo CanvasPixelArray, y almacena una cantidad de elementos igual a width*height*4, lo que significa que para cada píxel se definen los valores de rojo, verde, azul y alfa, en el orden en que quieres que aparezcan (todos los valores van de 0 a 255, incluyendo el alfa). Los píxeles se ordenan de izquierda a derecha, fila por fila, de arriba a abajo.
Para entender mejor cómo funciona todo esto, echa un vistazo a un ejemplo que dibuja un bloque de píxeles de color rojo.
// Crea un objeto ImageData.  
var imgd = context.createImageData(50,50);  
var pix = imgd.data;    

// Bucle sobre cada píxel y poner a rojo.  
for (var i = 0; n = pix.length, i < n; i += 4) {  
  pix[i  ] = 255; // red channel  
  pix[i+3] = 127; // alpha channel  
}    

// Dibujar el objeto ImageData en las coordenadas (x,y) dadas.  
context.putImageData(imgd, 0,0);
Nota: No todos los navegadores han implementado createImageData. En los navegadores sin soporte es necesario obtener el objeto ImageData utilizando el método getImageData. Por favor, consulta el código de ejemplo proporcionado.
Con las capacidades de ImageData se puede hacer mucho más que esto. Por ejemplo, se puede hacer filtrado de imágenes, o visualizaciones matemáticas (como fractales y más). El código siguiente muestra cómo crear un filtro simple de inversión de color:
// Obener  el CanvasPixelArray de las coordenadas y dimensiones dadas.  
var imgd = context.getImageData(x, y, width, height);  
var pix = imgd.data;    

// Bucle sobre cada píxel e invertir color.  
for (var i = 0, n = pix.length; i < n; i += 4) {  
  pix[i  ] = 255 - pix[i  ]; // rojo  
  pix[i+1] = 255 - pix[i+1]; // verde    
  pix[i+2] = 255 - pix[i+2]; // azul    
  // i+3 es el alfa (el cuarto elemento)  
}    

// Dibujar ImageData en las coordenadas (x,y) dadas.  
context.putImageData(imgd, x, y);
La figura 4 muestra el filtro de inversión de color aplicado a un gráfico de Opera (compara con la figura 3, que muestra el esquema de color original del gráfico de Opera).
Ejemplo de la inversión de color
Figura 4: el filtro de inversión de color en acción

Texto

La API de texto sólo está disponible sólo en versiones recientes de WebKit y en las compilaciones de prueba (‘nightlies’) de Firefox 3.1, pero decidí incluirla aquí por completitud1.
Las siguientes propiedades de texto están disponibles en el objeto context:
  • font: Especifica el tipo de letra del texto, de la misma manera que la propiedad CSS font-family.
  • textAlign: Especifica la alineación horizontal del texto. Valores: startendleftrightcenter. Valor por defecto: start.
  • textBaseline: Especifica la alineación vertical del texto. Valores: tophangingmiddlealphabetic,ideographicbottom. Valor por defecto: alphabetic.
Hay dos métodos para escribir texto: fillText y strokeText. El primero da forma al texto y lo rellena con elfillStyle actual, mientras que el segundo dibuja el perfil/borde del texto con el strokeStyle actual. Ambos toman tres argumentos: el texto que desea mostrar, y las coordenadas (x, y) para definir dónde mostrarlo. También hay un cuarto argumento opcional: anchura máxima. Esto hace que el navegador reduzca el tamaño del texto para que quepa en el ancho dado, si es necesario.
Las propiedades de alineación del texto afectan a la posición del texto en relación con las coordenadas (x, y) que pases a los métodos de dibujo.
En este punto toca un ejemplo. El siguiente código es un ejemplo simple de texto canvas "hola mundo".
context.fillStyle    = '#00f';  
context.font         = 'italic 30px sans-serif';  
context.textBaseline = 'top';  
context.fillText  ('Hello world!', 0, 0);  
context.font         = 'bold 30px sans-serif';  
context.strokeText('Hello world!', 0, 50);
La figura 5 muestra lo que crea el ejemplo.
Ejemplo de texto
Figura 5: un ejemplo sencillo de texto en canvas

Sombras

La API de sombras da cuatro propiedades:
  • shadowColor: Establece el color de sombra deseado. Los valores permitidos son los mismos que se permiten en los valores de color CSS.
  • shadowBlur: Establece la cantidad de desenfoque de la sombra, en píxeles. Cuanto menor sea el valor de desenfoque, más nítida es la sombra. Da un efecto muy similar al desenfoque gaussiano de Photoshop.
  • shadowOffsetX y shadowOffsetY: Especifica el desplazamiento X e Y de la sombra, de nuevo en píxeles.
El uso es muy sencillo, como demuestra el siguiente ejemplo de código de sombra canvas:
context.shadowOffsetX = 5;  
context.shadowOffsetY = 5;  
context.shadowBlur    = 4;  
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';  
context.fillStyle     = '#00f';  
context.fillRect(20, 20, 150, 100);
Genera lo mostrado en la figura 6.
Ejemplo de sombra canvas. Rectángulo azul con sombra roja
Figura 6: Ejemplo de sombra canvas. Rectángulo azul con sombra roja.

Degradados

A las propiedades fillStyle y strokeStyle también se les puede asignar objetos CanvasGradient, en lugar de cadenas de color CSS: estos permiten utilizar gradientes de color para líneas y rellenos en lugar de colores sólidos.
Para crear objetos CanvasGradient puedes utilizar dos métodos: createLinearGradient ycreateRadialGradient. El primero crea un gradiente lineal —líneas de color todas en una dirección— mientras que el segundo crea un gradiente radial —círculos de color emanando desde un solo punto.
Una vez tienes el objeto gradiente puedes agregar saltos de color a lo largo del gradiente usando el métodoaddColorStop del objeto.
El código siguiente muestra cómo utilizar gradientes:
// Hay  que dar las coordenadas (x,y) de origen y destino   
// para el gradiente (dónde empieza y dónde acaba).  
var gradient1 = context.createLinearGradient(sx, sy, dx, dy);    

// Ahora se puede añadir colores al gradiente.
// El primer argumento da la posición del color en el gradiente. El 
// rango de valores aceptados va de 0 (inicio del gradiente) a 1 (final del gradiente). 
// El segundo argumento da el color deseado, con el formato de color de CSS.
gradient1.addColorStop(0,   '#f00'); // rojo  
gradient1.addColorStop(0.5, '#ff0'); // amarillo  
gradient1.addColorStop(1,   '#00f'); // azul    

// Para el gradiente radial también hay que dar
// fuente y el radio del círculo de destino.
// Las coordenadas (x,y) definen el punto central del 
// círculo (inicio y destino).
var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);    

// Añadir colores a un gradiente radial es igual que 
// añadir colores a gradientes lineales.
También he preparado un ejemplo más avanzado, que hace uso de un degradado lineal, sombras y texto. El ejemplo produce el resultado que se ve en la Figura 7.
Ejemplo de salida usando un gradiente lineal
Figura 7: Ejemplo de salida usando un gradiente lineal.

Demos en línea de canvas

Si quieres ver lo que han hecho otros con Canvas, puedes echar una ojeada a los siguientes proyectos:

Resumen

Canvas es una de las características más interesantes de HTML5, y puede usarse en la mayoría de navegadores web modernos. Ofrece todo lo necesario para crear juegos, mejoras en la interfaz de usuario y aún más cosas. La API de contexto 2D incluye una gran cantidad de funcionalidades además de las que se tratan en este artículo. Espero que hayas obtenido una buena base de canvas, y sed de saber más.

1 Desde la elaboración de este artículo, múltiples navegadores han añadido soporte para la API de texto.


No hay comentarios:

Publicar un comentario

Gracias por comentar en mi blog. Saludos.