• Artículo

Volver al índice del curso

Lección 1: Definición de HTML

 

Objetivos:

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.

 

Para comenzar

En esta lección no se necesita ningún archivo complementario.

Esta lección es una revisión general de conceptos de HTML y en las siguientes ya se realizarán ejercicios prácticos paso a paso.

 

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 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,  "Uso del lenguaje HTML5"

 

 

Reproductor de video de HTML5 con controles, integrado dentro de una página web. No necesita complementos.

 

El elemento <canvas> para dibujo y animación

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. Pero existen unos cuantos ejemplos de código aquí que te pueden servir de orientación:

Web Storage
http://dev.w3.org/html5/webstorage/#introduction

Microdata
http://dev.w3.org/html5/md/#introduction

Geolocation
http://dev.w3.org/geo/api/spec-source.html#introduction

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: https://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.

Web Workers

Web Workers es otra API que se suele considerar de la familia HTML5. Web Workers es un marco de programación que resuelve problemas de rendimiento de los navegadores. Al acceder a aplicaciones web avanzadas, como las de mapas o aquellas que generan gráficos o diagramas al entrar en la página web, se inician ciertas operaciones de computación que consumen una gran cantidad de recursos de procesador y que pueden reducir notablemente el rendimiento de la aplicación. Gran parte de la ralentización es debida a que se produce un conflicto a nivel de máquina entre las tareas interactivas de usuario (pulsación del ratón, arrastre, etc.) y la necesidad de la propia aplicación de acceder a recursos como datos, tarjeta gráfica u otros.

Los Web Workers son scripts que se ejecutan en threads independientes. Esto quiere decir que ciertos procesos como puede ser obtener datos desde una base de datos, se ejecutan de forma independiente de las actividades que desarrolle el usuario, lo que da como resultado un entorno mucho más fluido para éste. Web Workers están aún en una fase inicial de su desarrollo pero ya puedes ver demos en http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html utilizando la platform Preview de Internet Explorer 10.

Almacenamiento Web

El Almacenamiento Web (Web Storage) es un ejemplo de uso de modelos preexistentes de tecnologías web bajo nuevas modalidades, más potentes. El Web Storage mejora el concepto de cookies del navegador. Actualmente las cookies permiten que los sitios web puedan guardar información en cantidades muy reducidas en los equipos de los usuarios, datos que normalmente sirven para volver a utilizarlos en momentos posteriores, y de esta manera, por ejemplo, ciertos sitios web recuerdan la información del usuario desde el último acceso.

Las cookies son una tecnología bastante limitada y no resulta fácil su utilización por parte de los diseñadores web. Ahora, Web Storage actualiza este modelo para que las aplicaciones web puedan almacenar una cantidad de datos muy superior y que su acceso y utilización sea mucho más fácil y eficiente.

HTML5 nos ofrece dos maneras de guardar datos: localStorage y sessionStorage. Los datos guardados con localStorage quedan a disposición del navegador en todo momento, aunque cerremos el programa o se reinicie el sistema. Los datos guardados bajo la modalidad  sessionStorage se pierden al cerrar el navegador.

Un ejemplo del uso de Web Storage puede ser la forma en que se almacenan datos en algunos teléfonos móviles. Los navegadores para smartphones, por ejemplo, pueden guardar datos en una sesión de navegador y permitir al usuario leerlos y/o modificarlos aunque no tengan conexión a la red.

 

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

La propiedad transform de CSS nos permite rotar, cambiar la escala o sesgar un elemento de una página web. Un ejemplo puede ser el girar levemente una foto dentro de una página para conseguir un efecto estéticamente muy atractivo. También podemos  dar animación a las transformaciones: por ejemplo, mediante animación aplicada a la propiedad "scale" podemos conseguir un efecto de ampliación o reducción del tamaño de una imagen o de cualquier otro elemento. Podemos también añadir la propiedad "perspective" al efecto de transformación para simular la visión de un objeto en un espacio tridimensional, estático o en movimiento.

 

 

Un ejemplo de una transformación 2D-CSS que podemos ver en http://ie.microsoft.com/testdrive

 

Fondos, bordes, colores RGBa, gradientes, sombras y esquinas redondeadas

Ahora, con CSS3 es posible aplicar mejoras muy interesantes a la presencia visual de una página. Un ejemplo sencillo es la propiedad "border-radius", con la que podemos poner esquinas redondeadas a los objetos rectangulares, y también podemos crear muchos efectos nuevos, como gradientes de color o sombreados. Algunos efectos tradicionales, como background-image y la propiedad border han sido mejorados en CSS3. Por ejemplo, podemos utilizar la propiedad border-image para utilizar imágenes como bordes de objetos, o añadir varias imágenes de fondo a un mismo contenedor, evitando así la limitación actual a una sola imagen que permite la propiedad background-image. La descripción del espacio de color RGBa es otra novedad de CSS3, ya que la "a" representa el grado de transparencia (o "alpha"). Con la notación RGBa de color ahora podemos aplicar efectos de transparencia a cualquier objeto de la página.

 

 

Dibujar esquinas redondeadas mediante el uso de la propiedad border-radius es solo una de las muchas novedades de estilo que se han incorporado a CSS3.

 

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.

 

El potencial de las web fonts puede verse en www.lostworldsfairs.com/atlantis.

 

Media Queries de CSS

La interacción del usuario con Internet se basa casi de forma exclusiva en lo que se puede ver dentro de una pantalla, y el tamaño de las pantallas que podemos encontrar varía enormemente. Un monitor de ordenador de gran formato puede llegar a resoluciones de 2.000 pixels de anchura, mientras que un pequeño teléfono móvil apenas nos ofrecerá 320 pixels. El reto que supone presentar una experiencia equivalente en ambas pantallas puede resolverse mediante las nuevas directivas de CSS de consulta de tipo de medios ("media queries"). En esencia se trata de lanzar una consulta al navegador para determinar el tipo de pantalla en el cual se va a restituir la página y, a partir de esta información, enviar un estilo específico, optimizado para esas dimensiones. Por ejemplo, la misma página web, en un monitor con 2.000 pixels de ancho podría mostrarse con cuatro o incluso cinco columnas, pero en pantallas de 320 pixels, podría enviar una plantilla de estilos que solo utilice una columna.

 

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.

Visita http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm utilizando la platform preview de Internext Explorer 10 o cualquier otro navegador que soporte animaciones basadas en CSS.

 

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.

Visita el sitio http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm utilizando la platform preview de Internext Explorer 10 o cualquier otro navegador que soporte transiciones basadas en CSS.

 

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.

 

Perspectivas de soporte por parte de los navegadores

 

No se puede prever con exactitud una fecha en la que tengamos cierta seguridad de que habrá soporte completo para HTML5 en todos los navegadores, pero el W3C ha marcado la segunda mitad de 2014 como la fecha en que debe estar finalizada la especificación de HTML5. Los diseñadores web más conservadores pueden optar por esperar hasta entonces para incorporar el HTML5 a sus entornos en producción, pero el estándar es independiente del soporte de los navegadores. La mayoría de los navegadores actuales soportan ya una serie de funcionalidades de HTML5. Algunas de ellas ya se muestran relativamente estables, bien desarrolladas y su uso parece fiable y seguro. Otras, sin embargo, siguen aún en fase de desarrollo y los diseñadores pueden utilizarlas con fines experimentales, o incluso en sitios en producción, pero sabiendo de antemano que están apostando por la innovación a costa de la fiabilidad.

 

¿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

 

Repaso

Preguntas

1 Enumera tres componentes de HTML5 que ofrecen alternativas a los complementos o plug-ins de los navegadores, como Flash y Silverlight.

2  ¿Qué diferencia hay entre la especificación de HTML5 y la familia HTML5 tal y como la hemos definido en esta lección?

3  ¿Qué es la geolocalización?

Respuestas

1  Las etiquetas <video> y <audio> nos permiten integrar contenidos multimedia directamente en el código HTML sin necesidad de complementos. El elemento <canvas> nos ofrece una superficie para dibujar, crear formas, rellenos, gradientes, etc. y con la ayuda de CSS, incluso podemos crear animaciones con estos objetos.

2  La especificación de HTML5 incorpora una serie de elementos nuevos (o etiquetas) que podemos utilizar para crear una estructura de presentación nueva, o introducir nuevas funcionalidades en las páginas web. La familia HTML5 está compuesta de tecnologías relacionadas entre sí, pero independientes, como las APIs Web Storage o Geolocation, y CSS3.

3  La geolocalización es una tecnología web capaz de identificar la ubicación geográfica del usuario y, a partir de esa información, permite obtener datos útiles, como por ejemplo, representar su localización en un mapa, calcular rutas o sugerir establecimientos cercanos.

 

 

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark y Silverlight son marcas registradas o marcas comerciales de Microsoft Corporation en Estados Unidos y/o en otros países. Otros nombres de productos y compañías mencionados aquí pueden ser marcas registradas de sus dueños respectivos.

Las empresas, organizaciones, productos, nombres de dominio, direcciones de correo, logos, personas, lugares y eventos de ejemplo utilizados aquí son ficticios. No se intenta ni debe deducirse ninguna relación con cualquier empresa, organización, producto, nombre de dominio, dirección de correo, logo, persona, lugar o evento real.

La información contenida en este curso se ofrece sin garantía, expresa, implícita o estatutaria. Ni los autores, Microsoft Corporation, ni los distribuidores o comercializadores serán responsables por ningún daño causado o imputado que pueda tener su origen, de manera directa o indirecta, en los contenidos de este curso.

Creado para  Microsoft por Avlade: www.Avlade.com

©2011  Microsoft Corporation.

Ciertas secciones extraídas de la guía HTML5 Digital Classroom están protegidas por copyright 2011 de AGI Training y se utilizan con autorización. Si desea más información sobre el libro HTML5 Digital Classroom visite el sitio web http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html