Lección 1: Definición de HTML 

En esta lección vamos a descubrir las características y capacidades que forman parte de la especificación de HTML5 y sus tecnologías conexas. Podrás conocer también los beneficios

que aporta HTML5 a los desarrolladores, diseñadores de páginas Web y a los usuarios finales. 

Definición de HTML5 

HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML, propiedades CSS3, JavaScript y algunas tecnologías complementarias de apoyo, pero que técnicamente son independientes de la propia especificación HTML5. Por ello vamos a distinguir entre la

especificación HTML5 en sí y la familia HTML5. Podemos definir la especificación HTML5 como nuevos elementos de markup o sintaxis,

utilizados por los diseñadores para crear páginas web junto con las etiquetas utilizadas a día de hoy. Muchos de estos nuevos elementos ya son conocidos para los diseñadores que trabajan

con las etiquetas HTML tradicionales, como <p>, <ul> o <div>. Estas nuevas etiquetas suponen para desarrolladores y diseñadores, unas herramientas más avanzadas y se traducen en

mejores experiencias para el usuario final. La familia HTML5 incluye las nuevas etiquetas y tecnologías como CSS3, Geolocalización, Almacenamiento Web (Web Storage), Web Workers y Web Sockets entre otras. Todas ellas suponen una actualización de gran potencia al conjunto de herramientas ya existente, y con

ellas se pueden crear páginas web más sofisticadas y útiles. Los nuevos navegadores incorporan funcionalidades para responder a las expectativas de los consumidores y también como fruto de la evolución natural de la propia tecnología. A medida que las aplicaciones web van ganando en capacidad de respuesta y velocidad y son capaces

de resolver tareas complejas como la edición de imágenes, representación de mapas, hojas de cálculo o vídeos, los usuarios ya exigen este mismo nivel de rendimiento en todas las aplicaciones de la web. Existen limitaciones con las capacidades de los lenguajes de

programación actuales y no todas las funcionalidades se pueden implementar e incorporar de manera sencilla. HTML5 aporta nuevas funcionalidades y herramientas con el fin de conseguir

que los sitios web sean más interesantes, atractivos y útiles. 

La historia de HTML5 

HTML4, que se dio por cerrado en 1998, es el lenguaje de markup que conforma la base de la gran mayoría de las páginas web que podemos ver a día de hoy. Los diseñadores y

desarrolladores web han estado utilizando la especificación HTML 4.01 durante bastantes años de manera satisfactoria, combinándola con CSS para la definición de estilos y con JavaScript

para añadir interactividad a los contenidos. Tras la finalización de HTML 4.0.1, el W3C continuó sus trabajos en consonancia con la

H

evolución de la web, y comenzó con un lenguaje llamado XHTML 1.0. Existe una pequeña diferencia entre HTML 4.0.1 y XHTML 1.0 (XHTML es un lenguaje más estricto: por ejemplo, todas las etiquetas deben indicarse en minúsculas). Uno de los objetivos de XHTML 1.0 era

crear un lenguaje de markup que pudiera extenderse y resolver las necesidades de las tecnologías futuras, por ejemplo para los dispositivos móviles. Muchos sitios web se han creado

utilizando XHTML 1.0 como marco de desarrollo y muchos diseñadores y desarrolladores valoran positivamente sus reglas sintácticas más estrictas. 

En paralelo a la adopción y difusión de XHTML 1.0, se empezó con el desarrollo de otro lenguaje, XHTML 2.0, que añadía una serie de novedades de gran interés a las páginas web y

que se apoyaba de forma notoria en XML. No obstante, este nuevo lenguaje adolecía de diversos problemas de tipo técnico y no resolvía adecuadamente las necesidades reales de los

desarrolladores. En 2004, un grupo de representantes de los principales fabricantes de navegadores y un grupo

de trabajo de desarrolladores web formaron un grupo independiente llamado WHATWG (iniciales de Web Hypertext Application Technology Working Group). Su misión consistía en

crear una especificación de lenguaje HTML mejor, orientada a crear un nuevo tipo de aplicaciones web pero manteniendo la compatibilidad con las versiones en activo de los

navegadores existentes. Durante unos dos años y medio el W3C y el grupo WHATWG trabajaron en paralelo y de

manera independiente hasta que en 2006, Tim Berners-Lee, creador de la World Wide Web y fundador del W3C anunció que el W3C y WHATWG trabajarían juntos en la elaboración del

estándar. Como resultado de todo ello, se abandonó el desarrollo de XHTML 2.0 y la especificación HTML 4.0 se reformó con el nombre HTML5. No obstante, conviene recordar que HTML5

empezó siendo Web Applications 1.0, y eso nos da una pista muy clara para entender para qué fue diseñado realmente HTML5. 

Gracias a que el W3C tomó el liderazgo para el desarrollo de HTML5, ahora los desarrolladores tenemos la garantía de que HTML5 será realmente un estándar gratuito y con las suficientes

garantías de no incurrir en problemas de propiedad intelectual. 

HTML5 extiende la definición de lo que puede hacer una página web 

A día de hoy HTML no tiene capacidad para reproducir contenidos multimedia, como audio o vídeo, sin un complemento (un "plug-in”) como los de Adobe Flash o Microsoft Silverlight.

HTML tampoco tiene capacidad para almacenar datos en el ordenador del usuario, esto se hace actualmente mediante un lenguaje de scripting o con alguna otra tecnología. No existe un formato de dibujo nativo en HTML. Los gráficos y animaciones se ofrecen en estos momentos en forma de archivos de imágenes o con la ayuda de otros complementos (Adobe Flash, Java,

Microsoft Silverlight u otros). En general, cada vez más gente depende de la web y utiliza aplicaciones web y las expectativas que se generan alrededor de lo que puede (o podría) hacer

una página web van creciendo día tras día. Esta demanda de los usuarios en favor de un mayor rendimiento y unos sitios web con

prestaciones más avanzadas y completas se ve limitada por el lenguaje HTML que se utiliza actualmente.

Un sitio como Bing Maps es una aplicación web de altas prestaciones que podría beneficiarse de las nuevas funcionalidades que incorpora HTML5 

En los apartados siguientes vamos a explicar brevemente algunos de los aspectos más importantes de HTML5. 

El lenguaje HTML5 

El lenguaje (o "markup" ) HTML5 incorpora algunas etiquetas nuevas pensadas para hacer que la estructura de la página web sea más lógica y funcional. Antes de HTML5, la estructura de

una página dependía fuertemente de las etiquetas <div>, generalmente asociadas a una clase CSS o un ID. Por ejemplo, en HTML 4.0 es una práctica comúnmente aceptada definir la

cabecera de una página web de esta forma: 

<div id="header" > Esta es la cabecera </div> 

En este caso, el código destacado en color rojo es el ID de CSS que sirve para definir la anchura y altura de la cabecera así como su color de fondo. En el código CSS podríamos tener

algo así: 

#header { width:960px; height:100px; 

background-color:gray; } 

El ID utilizado header es arbitrario. Algunos diseñadores prefieren nombres como masthead, topsection, o box. En la especificación HTML5 existe ya una etiqueta llamada <header> que

viene a sustituir al elemento <div> de forma que la sintaxis es mucho más lógica y coherente: 

<header> Esta es la cabecera </header> 

En este ejemplo ya podemos añadir directamente las propiedades de estilo (ancho, alto, color de fondo, etc.) en una regla para el nuevo elemento header de CSS: 

header { width:960px; height:100px; 

background-color:gray; } 

La diferencia entre estos dos ejemplos anteriores puede que sea difícil de entender si no estás familiarizado con CSS. En el primer caso se utiliza un selector (#header) que refiere a un

atributo ID de CSS. En el segundo caso utilizamos un selector (header) que es una novedad de HTML5 y nos permite aplicar un estilo al elemento directamente. HTML5 dispone de unos cuantos elementos nuevos aparte de éste, como <footer>, <nav>, <section>, <aside>, y

<article>. Estos nombres se basan en los que se vienen utilizando habitualmente para distinguir secciones dentro de las páginas web que vemos a diario (div id="footer", div id="nav", etc.). El objetivo de los nuevos elementos HTML5 no es otro que evitar una excesiva dependencia de

las etiquetas <div> y sustituirlas por una estructura de página más consistente y legible. Como puedes ver, HTML5 no sustituye ningún elemento de sintaxis de HTML; simplemente añade nuevos elementos de vocabulario a la lista existente. Dicho de otra forma, podemos seguir utilizando la etiqueta <div>, pero esta etiqueta ya no necesariamente tiene que ser la viga

maestra que soporte el diseño visual de toda una página web. 

La estructura de un sitio web con elementos HTML5. A. Header. B. Nav. C. Section. D. Article. E. Aside. F. Footer. 

Breve recorrido por los principales elementos de

HTML5 

En este libro se explican muchos de los elementos nuevos de HTML5 en detalle, a partir de la Lección 4. Pero antes, en esta Lección 1 vamos a mostrar una breve reseña de las principales

novedades que incorpora la sintaxis de HTML5. 

Los elementos <video>, <audio> y <canvas> 

La especificación HTML5 incluye etiquetas que nos permiten integrar contenidos multimedia sin necesidad de complementos de navegador. Las etiquetas <video> y <audio> sirven para

integrar video y audio en las páginas web de la misma forma que actualmente se hace con los archivos de imagen utilizando la etiqueta <img>. La etiqueta <canvas> dota al lenguaje HTML de un formato nativo para el dibujo y la animación. Esta etiqueta puede servir, además, como

plataforma alternativa para los gráficos y animaciones que a día de hoy podemos ver en películas Flash. No obstante, existen inconvenientes de cierta consideración que es preciso

resolver. 

Elementos <video> y <audio> para incorporar contenidos multimedia 

La estructura necesaria para incorporar contenidos de audio o vídeo a una página web es bastante sencilla, como podemos ver en el siguiente ejemplo donde añadimos un archivo de

vídeo: 

<video src="catz.mp4" width="400" height="300"></video> 

Insertar un archivo de audio mp3 en la página se hace de forma similar. En el caso del audio y el vídeo podemos añadirle también controles de reproducción y la posibilidad de precarga,

utilizando los atributos controls, preload, y autobuffer: 

<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer></audio> 

Esta característica de HTML5 es muy útil si se compara con los métodos disponibles hasta ahora. Por ejemplo, para incorporar vídeo con Adobe Flash o Microsoft Silverlight es preciso añadir código de programación. Aparte, existe una amplia categoría de dispositivos móviles como los iPhone® de Apple® o Windows® Phone 7 que no soportan Flash o Silverlight, y en

estos casos el elemento video de HTML5 es la principal alternativa. Aunque es de agradecer la simplificación que suponen las etiquetas <video> y <audio>, en seguida surge la pregunta de

cómo vamos a hacer para manejar estos contenidos desde los navegadores anteriores que no reconocen estas etiquetas nuevas. Esta cuestión se verá en detalle en la Lección 4. 

El elemento canvas funciona a modo de superficie de dibujo dentro de una página web (de ahí le viene el nombre). Dentro de esta superficie de dibujo podemos crear formas con colores,

gradientes y patrones de relleno. Podemos manipular los pixels de forma interactiva en pantalla, mostrar textos y exportar los contenidos hacia archivos de imagen estática,

como .PNG. Podemos también utilizar JavaScript o las nuevas funciones de animación de CSS3 para que los objetos que creamos puedan moverse, desaparecer, cambiar de tamaño,

etc. Incorporar un elemento canvas a una página es muy sencillo: 

<canvas id="myCanvas"></canvas> 

JavaScript se encarga de todo el trabajo y nos ofrece un contexto para el objeto creado. Por ejemplo, para crear uno de los objetos más sencillos dentro del canvas, un rectángulo negro, el

código necesario puede ser como este: 

<script> 

var canvas = document.getElementById ("myCanvas" , 

context = canvas.getContext("2d" ; // x = 10, y = 20, width = 200, height = 100 

context.fillRect(10, 20, 200, 100); </script> 

Con estas pocas líneas creamos un rectángulo de color negro con unas dimensiones concretas. El código puede parecer excesivo para un resultado tan simple, pero la etiqueta

canvas se limita a presentar el código dentro de un documento HTML y este modelo nos aporta

una serie de ventajas. Entre los usos previsibles están elementos de la interfaz de usuario, como controles de reproducción, elementos de ilustración que se pueden animar o

visualización dinámica de datos como diagramas y gráficos. 

En la Lección 5 "Trabajar con el Canvas" podrás aprender más en detalle cómo se crean contenidos con la etiqueta <canvas>.

Puedes ver ejemplos de <canvas> (incluyendo elementos de animación) y otras funcionalidades de HTML5 en acción en el sitio web www.nevermindthebullets.com. 

Formularios web 

Los nuevos elementos de formulario de HTML, cuando se implementen, harán que el trabajo con formularios sea más sencillo que ahora. Por ejemplo, muchos diseñadores web necesitan

crear formularios en donde los datos tienen que comprobarse antes de enviarlos al servidor. Es casi obligado que el usuario, por ejemplo, tenga que escribir una dirección de correo electrónico

en un campo de un formulario. A día de hoy, para validar este dato se necesita programación en Javascript o cualquier otro lenguaje de scripting, pero HTML5 incorpora el atributo required a

la lista de tipos de datos de entrada utilizables en formularios, como se muestra en este ejemplo: 

<input type="email" required> 

Se han definido unos cuantos tipos de datos nuevos para los formularios, como es el caso de email para las direcciones de correo, search para designar los campos de formulario que deben

recibir términos de búsqueda, url para los campos de direcciones web y algunos más. Estos nuevos elementos de formulario web seguramente tardarán algo en integrarse en la

especificación oficial, pero están diseñados de manera que puedan revertirse a campos genéricos de formulario, o dicho de otra forma, podemos empezar a utilizar estos nuevos tipos

de campos y si un navegador no los soporta, los sustituirá internamente con elementos genéricos (soportados). 

Muchos elementos nuevos en HTML5 

Aparte de los nuevos elementos <video>, <audio>, <canvas>, y tipos de datos de formulario, hay otros nuevos elementos dentro de HTML5 que podemos utilizar, como <figure> y

<figurecaption>, que se emplean para etiquetar imágenes dentro de la página web, el elemento <hgroup> para agrupar una serie de elementos de cabecera dentro de una sección lógica, etc.

HTML5 además resuelve el caso de ciertas etiquetas que aparecen en HTML 4.01 pero que han quedado obsoletas o necesitaban ciertas precisiones, como ocurre con <i>, <b>, <small>,

<strong> y <abbr>, que ahora tienen significados y usos nuevos con HTML5. Introducción a las APIs de HTML5 y las tecnologías de apoyo 

Existen otra serie de tecnologías de desarrollo web vinculadas con la especificación HTML5 o con su sintaxis. Estas técnicas nos van a permitir llevar a cabo actividades desde el navegador web y dispositivos móviles compatibles que no eran posibles con las versiones anteriores de

HTML. 

¿Qué es una API? 

Las APIs (Application Programming Interfaces o, en español, Interfaces de Programación de Aplicaciones o simplemente "interfaces de programación" ) son una forma de crear aplicaciones

utilizando componentes preconfigurados cuyo uso no se restringe a la web, ni siquiera a los lenguajes de scripting. Sitios web como Twitter o YouTube entre otros, ofrecen APIs al público

de manera que los diseñadores y desarrolladores pueden con ellas integrar algunas de sus funcionalidades dentro de sus propios sitios web (y también sirven para otros fines, como por ejemplo para crear aplicaciones para teléfonos móviles o aplicaciones personalizadas para

equipos de escritorio). Uno de los objetivos principales de una API es el de normalizar el modo de trabajo de ciertos mecanismos y simplificar tareas de programación, que de lo contrario, serían bastante complejas. Las APIs son un aspecto muy importante dentro del entorno de

HTML5 y hay una serie de ellas que conviene conocer, como Web Storage, Microdata o Geolocation, entre otras. 

Para utilizarlas, lo primero que tenemos que saber es que la documentación oficial de estas APIs es independiente de la documentación oficial de HTML5. Ten en cuenta que salvo que te

muevas bien dentro de la parte más técnica del desarrollo web, esta documentación no es demasiado intuitiva a primera vista. 

La API de Geolocalización en acción 

Geolocation es una API que nos permite conocer el punto geográfico desde el cual se conecta el navegador a Internet. Esta información se emplea para enviar al usuario datos de interés

para él, ajustados a su ubicación. Como ejemplo de su utilidad están las páginas web de búsqueda asociadas a un mapa en el cual nos indican dónde están situados ciertos comercios o restaurantes a una distancia concreta a pie desde el punto donde estamos en ese momento.

En vez de tener que introducir a mano la dirección, un navegador habilitado para geolocalización nos puede devolver estos resultados de manera automática y transparente. 

Geolocation en estos momentos está disponible en algunos navegadores modernos. Podemos ver un ejemplo de cómo funciona en el sitio de mapas de Microsoft, Bing Maps (necesitarás un navegador compatible con geolocalización, en este caso estamos utilizando Internet Explorer

9). 

1 Abre el navegador compatible con la función de geolocalización y escribe esta dirección: http://www.bing.com/maps. En la página se muestra por defecto el mapa de EE.UU y Canadá. 

2 En la esquina superior izquierda del mapa, pon el cursor sobre el icono de localización y aparecerá la opción "Click to center the map on your current location". 

Pulsando el icono de localización empieza el proceso de geolocalización. 

3 Pulsando en el localizador aparece un mensaje "Allow bing.com to track your physical location." Todos los navegadores que aceptan la geolocalización preguntan al usuario y les dan

la opción de aceptar o rechazar la función de control de ubicación. 

En Internet Explorer 9 se pide al usuario que permita al navegador conocer su emplazamiento. 

4 Para ver cómo actúa la función de geolocalización, pulsa en el botón "permitir una vez" y después pulsa otra vez en el localizador. El mapa se centrará automáticamente en el punto

geográfico donde te encuentras. 

En los últimos años los teléfonos móviles han ido incorporando la posibilidad de conectar datos geográficos o de GPS dentro del navegador del dispositivo o con aplicaciones propias. Cuando

la función de geolocalización esté soportada por un gran número de navegadores web, podremos disfrutar de estas ventajas tanto en equipos de escritorio como en dispositivos

móviles que soporten la API Geolocation de HTML5. 

CSS3 no forma parte de HTML5, pero está íntimamente relacionado 

Como ya se dijo anteriormente, muchos de los aspectos novedosos designados bajo el nombre "HTML5" son en realidad una combinación de las tecnologías HTML5 descritas antes junto con JavaScript o CSS. CSS (iniciales de Cascading Style Sheets) es un lenguaje en evolución que

se identifica mediante números de versión, y la última de ellas es la CSS 3.0, que ha ido evolucionando en paralelo con la especificación de HTML5. Algunos componentes de CSS3 suelen considerarse erróneamente como componentes de HTML5, como es el caso de las transiciones o la animación. La confusión es comprensible, pero para los profesionales del diseño y desarrollo web es importante conocer la diferencia. A continuación describimos

brevemente algunas de las características más relevantes de CSS3. 

Transformaciones CSS 2D y 3D 

Fuentes de letra Web @font-face 

Cada vez está más extendido el soporte para añadir tipos de letra especiales a las páginas web mediante la propiedad @font-face, que permite especificar una fuente concreta y un enlace desde el cual el navegador pueda descargarla. Esta característica puede cambiar de forma

radical el aspecto de las páginas web, pero lamentablemente también se ve afectada por los muchos problemas de compatibilidad con navegadores antiguos que se pueden ver en otras

funcionalidades de HTML5. 

Animaciones con CSS 

Ciertas tecnologías como Flash o Silverlight se han venido utilizando hasta ahora para animar objetos dentro de las páginas web. Ahora ya podemos conseguir algunos de estos efectos

utilizando las reglas y propiedades de CSS3. En el futuro, el elemento Canvas de HTML5 y las transiciones de CSS3 permitirán crear elementos animados e interactivos sobre la página. Las animaciones de CSS, y el tema siguiente, las transiciones, probablemente estarán soportadas por la mayoría de los navegadores en los próximos años. En el momento de escribir esta guía, el estándar todavía no está cerrado por lo que no está soportado en todos los navegadores, en cualquier caso puedes empezar a probar algunos ejemplos con la platform preview de Internet

Explorer 10. 

Transiciones de CSS 

Las transiciones de CSS están muy relacionadas con el concepto de animación, pero son algo completamente distinto. Una transición permite variar el valor de una propiedad CSS de

manera continua a lo largo de un intervalo de tiempo definido. Por ejemplo, un botón con un fondo de color verde puede cambiar de forma progresiva y suave a un color distinto cuando el

usuario pasa el cursor sobre él. Actualmente podemos conseguir este tipo de transiciones utilizando JavaScript y Flash, pero

igual que sucede con otros muchos elementos de CSS3, las transiciones ofrecen a los diseñadores web una alternativa para conseguir los mismos resultados sin necesidad de

convertirse en programadores expertos. 

HTML5 está en un momento de transición 

Las tecnologías que hay detrás de HTML5 están en fase de transición, por lo que es necesario tener claro cuándo debemos utilizarlas y cuándo no. A lo largo de este libro te iremos orientando y ofreciendo una perspectiva lo más amplia posible al respecto del tipo de

compatibilidad que puedes esperar en distintos navegadores y también ofreceremos ejemplos de uso donde el uso de HTML5 puede ser más indicado que otros lenguajes. 

Todos los navegadores de mayor difusión hoy en día (Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome y Opera) ofrecen soporte, en grado variable, para las funcionalidades de HTML5 en cuanto a su sintaxis y tecnologías relacionadas. En algunos

casos una página que ofrece alguna funcionalidad nueva o un aspecto especial en un navegador puede que no se consiga ver en absoluto en otro, o que algunas características no

estén presentes aunque la página siga siendo funcional. Estos escenarios sin duda van a cambiar en el futuro, pero el mundo de los navegadores web en equipos de sobremesa

evoluciona muy lentamente, por lo que seguiremos observando en el futuro próximo este tipo de situaciones y diferencias. 

¿Quién utiliza HTML5 a día de hoy? 

Es una pregunta difícil de responder porque, como has podido ver, no existe una definición única para "HTML5". Existen numerosas demos de HTML5 que no se podrían poner en

entornos en producción debido al distinto grado de soporte que ofrecen los navegadores. Si decides incorporar funciones de estilo de CSS3, hay muchos sitios web personales y de

empresas que utilizan los elementos más vistosos, como border-radius o las funciones de transformación. En estos casos, los diseñadores pueden utilizar las funcionalidades y añadir

alternativas adicionales para asegurarse de que la restitución de estas páginas en navegadores no compatibles no es demasiado diferente de cómo se ven en los navegadores más

modernos. Un área donde el uso de las funcionalidades de HTML5 está siendo muy activo es entre los

dispositivos móviles y smartphones. En este mundo podemos encontrar aplicaciones web que aprovechan las ventajas de los nuevos tags de Video o Audio, puesto que ciertos dispositivos como Windows Phone o iPhone soportan HTML5 pero no soportan complementos como Flash

o Silverlight. Todos los navegadores web de mayor difusión apuestan por HTML5 en sus últimas versiones y

si aprendes hoy sus secretos, podrás formar parte activa de una nueva era que ahora comienza para la Web, llena de interés y asombrosas novedades. 

Funcionalidades y características futuras de HTML5 

Como ya anotábamos antes, las funcionalidades de HTML5 se presentan en distintos grados de madurez y aquí solo hemos visto unas pocas. La lista siguiente es una enumeración de otras funcionalidades que forman parte de la especificación HTML5 o de sus tecnologías

adscritas que deben añadirse (o en algunos casos ya están añadidas) a los navegadores del futuro. 

● Drag and Drop Las operaciones Drag-and-Drop ("arrastrar y soltar" ) permiten al usuario mover en pantalla los

elementos de forma visual en lugar de hacerlo pulsando botones. La API Drag and Drop de HTML5 se basa en la implementación original de Internet Explorer. Han cambiado algunos

detalles y ciertos navegadores ofrecen una sintaxis diferente, pero ya está a punto de cerrarse una API normalizada. En el momento de escribir este libro, no todos los navegadores ofrecen soporte para algunas de las funcionalidades de drag-and-drop. Por ejemplo, algunos permiten seleccionar objetos o archivos desde otras ventanas o aplicaciones y depositarlos dentro de la

ventana del navegador, pero otros no. ● La API File (Archivo) 

La API llamada "File" (Archivo) permite a los desarrolladores acceder a archivos del disco duro de la máquina cliente sin necesidad de instalar extensiones o complementos. Con esta API, al

fin podremos disponer de un modelo unificado de acceso mediante el cual las aplicaciones web podrán operar con archivos (por ejemplo para subirlos a un servidor). Una aplicación de edición de fotos basada en web, por ejemplo, podría ofrecer el mismo modo de operación en todos los

navegadores compatibles utilizando esta API. ● Disposición de objetos en pantalla con Flexbox 

CSS3 introduce una nueva forma de crear diseños para la distribución de los objetos en pantalla, llamado Flexible Box Layout ("Flexbox" ). En este sistema se pueden crear

disposiciones fluidas sin necesidad de acudir a las habituales directivas "float" y "clear" de CSS. Su objetivo es ofrecer herramientas más fiables y potentes a los diseñadores y desarrolladores

para crear estructuras visuales complejas, válidas para la web y para dispositivos móviles. ● Distribuciones en rejilla y columnas múltiples 

También dentro de CSS, las definiciones de distribuciones en pantalla en formato de columnas múltiples y rejillas ("grids" ) son dos mejoras más orientadas a facilitar la presentación visual de las páginas web. La propiedad Multi-column de CSS nos permite distribuir un contenido (puede ser un bloque de texto, por ejemplo) en dos o más columnas, facilitando así su lectura sin tener que recurrir a complicados juegos visuales. El sistema de rejilla o Grid se relaciona de alguna

forma con los Flexbox en el sentido de que esta funcionalidad está pensada para crear disposiciones en pantalla más complejas, tanto para las páginas web como para las

aplicaciones. En el sistema Grid se introduce el concepto de filas y columnas y también el procedimiento para apilar y alinear objetos dentro de estas rejillas. 

A pesar de que existen distintos niveles de compatibilidad entre los navegadores actuales para

estas y algunas otras funcionalidades descritas en esta lección, puedes ampliar aún más tus conocimientos sobre estos conceptos, y dependiendo del navegador que utilices, puedes

incluso empezar a crear páginas con esas funcionalidades. El libro "Digital Classroom HTML" aborda estos conceptos y contiene ejercicios prácticos que no se incluyen en este libro, por

ejemplo para implementar Geolocalización, Consultas de medios CSS3, Offline Storage, Flexbox y algunas más. 

Identificación de sitios web basados en HTML5 

En enero de 2010 el W3C presentó el logo de HTML5 para uso público, con el cual quieren promocionar las nuevas capacidades de HTML5 y sus tecnologías asociadas. 

El logo de HTML5 se puede descargar y utilizar libremente y de forma gratuita. 

Este logo puede obtenerse como archive gráfico y se puede incorporar a los sitios web o cualquier otro contenido para indicar que se utiliza esta tecnología. Conviene saber que el W3C utiliza el término HTML5 en un sentido amplio e incluye otras tecnologías también. Además, el

HTML5 se convertirá en el año 2014 en un estándar oficial, pero se recomienda a los diseñadores y desarrolladores que empiecen ya a utilizar la especificación. Si quieres más

información sobre HTML5 y el logo, puedes acceder a las explicaciones del W3C en su web: www.w3.org/html/logo/. 

Materiales de autoformación 

La compatibilidad de los navegadores es un asunto de importancia especial al hablar de HTML5. Cuando decidas utilizar la especificación HTML5, sus diversas APIs relacionadas y CSS3, deberás tener en cuenta una gran cantidad de aspectos y el distinto grado de soporte que encontrarás para las funcionalidades entre los diferentes navegadores. Si quieres tener

una visión más amplia de la evolución del estándar puedes consultar la última versión publicada en el sitio web 

http://www.w3.org/TR/html5/. 

También puedes comprobar los diferentes tests que implementa el W3C para garantizar la interoperabilidad entre todos los navegadores 

http://test.w3.org/html/tests/reporting/report.htm