Conoce lo que puede hacer HTML5

Sin duda uno de los temas del año está siendo HTML5, el sucesor de la actual versión de HTML y que muchos también creemos reemplazará a Flash en la web, si no de forma total sí bastante significativa, lo que por supuesto no solamente digo yo.Varias grandes tecnológicas también han manifestado ya su apoyo a HTML5, como Google, Microsoft o Apple, estos últimos de los que más y muestra de ello es que han decidido darle ahora otro nuevo empujón de la mejor manera posible: mostrándolo en acción.

Concretamente siete ejemplos que demuestran la potencia de HTML5 y CSS3 han lanzado en un nuevo apartado de la web oficial de la empresa entre los que encontramos de todo (hace falta Safari para poder verlos/interactuar): un visor de vídeos que nos permite “jugar” con él, un editor de fuentes, una galería de imágenes y ejemplos de las posibilidades respecto a transiciones de imágenes, vistas de 360 grados y audio. Por supuesto todo esto sin necesidad alguna de instalar complementos adicionales y con unos consumos más que aceptables.

¿Que quieres más ejemplos por que aún no ves claro dónde está la gracia de HTML5 o simplemente pasas de Safari? Pues no hay problema, ahí va otra ración:

• Ejemplos de CraftyMind. En uno de ellos podemos hacer saltar por los aires un vídeo según se reproduce y en el otro se reproduce un vídeo dentro de un efecto 3D
• HTML5 también puede perfectamente darle batalla a Flash en otro de los campos que domina, los juegos, y este vídeo lo deja claro
• Ahí va Sketchpad, completo programa para dibujar -dependen con qué lo comparemos por supuesto- realizado enteramente en HTML5
• Ninguna duda cabe hoy en día de lo importante que son actualmente los reproductores de vídeo online. SublimeVideo es uno de esos, ligero, bonito, que no necesita plugins y claro, realizado en HTML5.
• En el blog de desarrollo del navegador de Opera también podemos encontrar ejemplos del potencial de HTML5 y CSS3 aunque explicado más a nivel técnico

Para terminar me gustaría que todo el mundo se olvidara de la polémica entre Adobe y Apple y tras pensar fríamente, después de haber visto/cacharreado con todos estos ejemplos, diera su opinión sobre HTML5. La mía está clara: es un lenguaje tremendamente potente que la web necesitaba desde hacía bastante tiempo y deseo con todas las ganas que se extienda como la pólvora (independientemente de lo que le pase a Flash, diga Adobe o piense Steve Jobs).

¿Qué cambió en HTML5?

Nuevos elementos en HTML5

El Internet ha cambiado mucho desde HTML 4.01 se convirtió en un estándar en 1999.

Hoy en día, algunos elementos de HTML 4.01 se han quedado obsoletas, nunca utilizados, o no se usa la forma en que se pretende. Estos elementos se eliminan o se re-escrito en HTML5.

Para manejar mejor el uso actual de Internet, HTML5 incluye también nuevos elementos para una mejor estructura, el dibujo, el contenido de los medios de comunicación, y un mejor manejo de formularios.

---

Nuevo marcado de los elementos

Nuevos elementos para mejorar la estructura:

Etiqueta	Descripción
<article>	Especifica independiente, autónomo contenido, podría ser una noticia, artículo, blog, foro, u otros artículos que pueden ser distribuidos de forma independiente del resto del sitio.
<aside>	Para el contenido, aparte de los contenidos que se coloca pulg El contenido de un lado deben estar relacionados con el contenido circundante
<bdi>	Para el texto que no debería estar obligado a la dirección de texto de los elementos de su padre
<comando>	Un botón o botón de radio, o una casilla de verificación
<details>	Para describir los detalles de un documento, o partes de un documento
<summary>	Un título o resumen, en el interior del elemento de detalles
<figure>	Para la agrupación de una sección de contenido independiente, podría ser un vídeo
<figcaption>	El título de la sección de la figura
<footer>	Por un pie de página de un documento o sección, puede incluir el nombre del autor, la fecha del documento, información de contacto, o la información de copyright
<header>	Para ver una introducción de un documento o sección, puede incluir la navegación
<hgroup>	Para una sección de las partidas, utilizando <h1> a <h6>, donde el más grande es el principal título de la sección, y los otros son sub-títulos
<mark>	Para el texto que hay que destacar
<meter>	Para una medida, sólo si los valores máximo y mínimo se conocen
<nav>	Para una sección de navegación
<progress>	El estado de un trabajo en progreso
<ruby>	Para la anotación de ruby ​​(notas chinos o caracteres)
<rt>	Para la explicación de la anotación ruby
<rp>	Lo que muestran los navegadores que no soportan el elemento de rubí
<section>	Para una sección de un documento. Tales como capítulos, encabezados, pies de página, o cualquier otra sección del documento
<hora>	Para la definición de un tiempo o una fecha, o ambos
<wbr>	Separación de palabras. Para la definición de una oportunidad de salto de línea.

---

Nuevos Medios Elementos

HTML5 ofrece un nuevo estándar para el contenido de los medios de comunicación:

Etiqueta	Descripción
<audio>	Para los contenidos multimedia, sonidos, música u otros flujos de audio
<video>	De contenido de vídeo, como un clip de película u otras corrientes de vídeo
<source>	De los recursos multimedia para los elementos de los medios de comunicación, que se define dentro de los elementos de audio o vídeo
<embed>	De contenido integrado, como un plug-in
<track>	Para las pistas de texto utilizados en MediaPlayers

---

El elemento Canvas

El elemento canvas utiliza JavaScript para realizar dibujos en una página web.

Etiqueta	Descripción
<canvas>	Para hacer gráficos con un guión

---

Nuevos elementos de formulario

HTML5 ofrece más elementos de formulario, con más funcionalidades:

Etiqueta	Descripción
<datalist>	Una lista de opciones de valores de entrada
<keygen>	Generar claves para autenticar a los usuarios
<output>	Para los diferentes tipos de producción, tales como la producción escrita por un guión

Nueva entrada de valores de tipo de atributo

Además, atribuyen el elemento de entrada de tipo tiene muchos nuevos valores, para el control de entrada mejor antes de enviarlo al servidor:

Tipo	Descripción
tel	El valor de entrada es de tipo de número telefónico
búsqueda	El campo de entrada es un campo de búsqueda
url	El valor de entrada es una URL
e-mail	El valor de entrada es una o más direcciones de correo electrónico
fecha y hora	El valor de entrada es una fecha y / o tiempo
fecha	El valor de entrada es una fecha
mes	El valor de entrada es de un mes
semana	El valor de entrada es a la semana
tiempo	El valor de entrada es de tipo en tiempo de
fecha y hora local	El valor de entrada es una fecha / hora local
número	El valor de entrada es un número
alcance	El valor de entrada es un número en un rango determinado
color	El valor de entrada es de un color hexadecimal, como # FF8800
marcador de posición	Especifica una pista corta que describe el valor esperado de un campo de entrada