Este documento contiene pequeños, pero básicos, detalles sobre el desarrollo web en HTML5. Espero que sea de ayuda. Saludos.

1. 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

2. 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 HypertextApplicationTechnologyWorkingGroup). 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.

3. 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;

4. 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

5. 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" controlspreload="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.

6. 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>
varcanvas = 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

7. 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>

8. 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 (ApplicationProgramming 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

9. 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 "Clickto center themaponyourcurrentlocation".
Pulsando el icono de localización empieza el proceso de geolocalización.
3 Pulsando en el localizador aparece un mensaje "Allow bing.com totrackyourphysicallocation."
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.

10. 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

11. 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.

12. 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 platformpreview de Internet
Explorer 10.

13. 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.

14. 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

15. 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

16. 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