Cree sitios Web modernos usando HTML5 y CSS3

Implementando los elementos de bastidor y de video en HTML5

Desde que emergió la World Wide Web a principio de los años 1990, el HTML ha evolucionado hasta convertirse en un lenguaje de marcación relativamente eficiente, el cual, cuando está respaldado por sus compañeros cercanos JavaScript y CSS, puede utilizarse para crear sitios Web y aplicaciones interactivos y visualmente sorprendentes. Este tutorial sirve como una introducción práctica a HTML5 y CSS3. Proporciona información sobre la funcionalidad y sintaxis para muchos de los nuevos elementos y APIs que el HTML5 tiene para ofrecer, así como los nuevos selectores, efectos y recursos que el CSS3 pone sobre la mesa. Finalmente, le mostrara cómo desarrollar una página Web de muestra que abarque muchos de estos nuevos recursos. Para cuando haya terminado este tutorial, usted estará preparado(a) para construir sitios Web o aplicaciones por usted mismo(a), que estén basados en HTML5 y CSS3.

Joe Lennon, Software developer, Core International

Joe Lennon photoJoe Lennon es desarrollador de software. Él tiene 24 años y es de Cork, Irlanda. Joe es el autor del libro Beginning CouchDB próximo a publicarse por Apress, y ha contribuido a varios artículos técnicos y tutoriales para IBM developerWorks. En su tiempo libre, a Joe le gusta jugar fútbol, juguetear con gadgets y trabajar en su puntaje de juego en su Xbox 360. Pueden contactarle mediante su sitio Web en www.joelennon.ie.



14-06-2011

Antes de comenzar

Este tutorial supone que usted tiene algo de experiencia básica con HTML, CSS y JavaScript. Asume que usted conoce lo que es un elemento o etiqueta HTML, lo que significa un atributo, la sintaxis básica de marcación HTML, la estructura general de una página Web, y demás. En términos de CSS, se espera que usted esté familiarizado(a) con los selectores basados en elemento, clase e ID, con la sintaxis de una propiedad CSS y con cómo incluir CSS en sus páginas Web utilizando hojas de estilo incorporadas o externas. Finalmente, se asume que usted ya cuenta con conocimientos prácticos de JavaScript, como qué es una variable, una función, el argumento 'if' y un bucle 'for', y sobre cómo incluir código JavaScript en sus páginas Web. Si siente que necesita repasar alguna de estas tecnologías antes de comenzar, pase directamente a la sección Recursos donde encontrará algunos tutoriales y artículos útiles que le nivelarán rápidamente en los fundamentos del desarrollo HTML, CSS y JavaScript.

Acerca de este tutorial

Durante cerca de los últimos diez años, conceptos como Web 2.0, Rich Internet Applications (RIAs) y Semantic Web, han empujado al HTML, al CSS y a JavaScript hasta y más allá de sus límites, dependiendo a menudo de plug-ins como Adobe® Flash para potenciar componentes como los de video y los de audio, así como aplicaciones altamente gráficas e interactivas. La infraestructura de desarrollo Adobe Flex, la plataforma Silverlight® de Microsoft, y JavaFX, todas han buscado brindar soporte en donde las debilidades del HTML dificultaban la vida de los desarrolladores. Sin embargo, con HTML5, el lenguaje de marcación está contraatacando, con soporte multimedia completo, almacenamiento local y soporte de aplicaciones off-line, una API 2D de dibujo nativa, y el hospedaje de nuevas APIs de desarrollo de aplicaciones, todas suministradas con la intención de probar que HTML, CSS y JavaScript pueden suministrar un punto final rico para sus sitios Web y aplicaciones.

El HTML5 es ampliamente percibido como una de las nuevas tecnologías más importantes programadas para emerger en el 2010, y ya se están escribiendo varios libros sobre el tema, algunos de los cuales están por ser publicados, tan pronto como es marzo de este año. Durante muchos años, la Web ha dependido de plug-ins externos para entregar atributos que no podían ser soportados nativamente por el navegador Web, particularmente en términos de dibujo en 2D, animación y multimedia. Las últimas versiones de la especificación HTML y CSS apuntaban a eliminar la necesidad de estos componentes adicionales de navegador, y también a reducir la cantidad de JavaScript necesario (o a eliminar la necesidad de JavaScript completamente, en algunos casos), para cosas tan triviales como arrastrar y soltar filas, escritura en bandas de filas, y más. Siga este tutorial para aprender cómo aprovechar el HTML5.

Prerrequisitos

HTML5 es una especificación relativamente joven y como resultado, el soporte de navegador es bastante limitado (al momento de la escritura). El código presentado en este tutorial se construye para que sea tan compatible con todos los navegadores como sea posible, pero algunos recursos no funcionarán en todos los navegadores. Cualquier recurso que actualmente sea específico para algún navegador se identificará claramente en el tutorial. Para asegurar que usted pueda experimentar todos estos nuevos recursos, se recomienda que instale en su sistema las últimas versiones de los siguientes navegadores Web, cuando esté desarrollando aplicaciones HTML5 y CSS3:

Usted no necesita ningún software específico para escribir el código HTML ni CSS; cualquier editor de texto básico servirá (como Notepad, vi, emacs, y demás.) En este tutorial, se asume que el source code está almacenado en un directorio en su computadora local— (— usted no necesita usar un servidor Web ni cargar archivos en un servicio de hospedaje Web.


Nuevos recursos en HTML5

En esta sección, usted descubrirá algunos de los excelentes nuevos recursos que el HTML5 tiene para ofrecer. Primero aprenderá sobre los nuevos elementos semánticos dirigidos a dar significado a las diferentes partes de una página Web moderna: encabezados, pies de página, barras de navegación, barras laterales, y así. Luego, aprenderá sobre la importancia del nuevo elemento <canvas> y sobre las nuevas APIs JavaScript para el dibujo en 2D que usted puede usar para crear formas, texto, animaciones, transiciones y más. Después de esto, usted verá cómo los nuevos elementos <audio> y <video> tienen por objeto reemplazar la dependencia Web actual en Flash como plataforma de entrega de multimedia. Luego, recibirá una introducción a las APIs de almacenamiento local y al soporte de aplicaciones off-line, que pondrá a las aplicaciones Web aún más a nivel con sus contrapartes de escritorio en términos de funcionalidad, incluso cuando no estén conectadas a una red o a Internet. Esta sección está acompañada con una breve visión general de los otros elementos, atributos y APIs nuevas que se proponen en la especificación HTML5 actual.

Elementos semánticos

La especificación HTML5 incluye una serie de nuevos elementos semánticos que se utilizan para dar algo de significado a las diferentes secciones o partes de una página Web, como el encabezado, el pie de página, la navegación y demás. En versiones previas de HTML, usted normalmente utilizaría elementos <div> para crear estas partes, utilizando atributos de ID o de clase para diferenciarlas entre sí. El problema es que esto no tenía significado semántico, dado que no hay reglas estrictas definidas que especificaran qué clase de nombres o de IDs se debían usar, haciendo extremadamente difícil que el software determinara lo que hacía un área en particular. El HTML5 debería ayudar a aliviar estos problemas, haciendo más fácil para los navegadores Web analizar la estructura semántica de un documento.

Vale la pena destacar que continuar usando elementos <div> en HTML5 es perfectamente válido, pero con el fin de proteger su trabajo hacia el futuro, se recomienda que use elementos semánticos donde sea relevante. En la otra cara de la moneda, también se sugiere que evite usar estos nuevos elementos para propósitos diferentes a aquellos para los que están diseñados. Por ejemplo, el elemento <nav> no debe utilizase simplemente para cualquier grupo de enlaces, su propósito es rodear el bloque de navegación principal en la página.

Los principales elementos semánticos que introduce el HTML 5 son:

<header>
Este elemento se usa para definir un encabezado de alguna parte de una página Web, sea de la página completa, de un elemento <article>, o de un elemento <section>.
<footer>
Así como el elemento <header>, este nuevo elemento define un pie de página para alguna parte de la página. Un pie de página no debe tiene que incluirse necesariamente al final de la página, artículo o sección, pero normalmente es así.
<nav>
Este es un contenedor de los enlaces principales de navegación de una página Web. Este elemento no tiene por objeto ser utilizado con todos los grupos de enlaces y sólo debe utilizarse para bloques de navegación principales. Si usted tiene un elemento <footer> que contiene enlaces de navegación, no necesita empaquetar esos enlaces en un elemento <nav>, pues el elemento<footer> será suficiente por sí mismo.
<article>
El elemento <article> se utiliza para definir un elemento independiente de la página que puede distribuirse por sí mismo, como un elemento de noticias, una publicación en un blog o un comentario. Tales elementos son sindicados normalmente usando feeds RSS.
<section>
Este elemento representa una sección de un documento o aplicación, como un capítulo o una sección de un artículo o tutorial. Por ejemplo, la sección que usted está leyendo ahora puede estar rodeada por un elemento <section> en HTML5. Los elementos <section> normalmente tienen un encabezado, aunque no es estrictamente necesario. El encabezado de la sección que usted está leyendo ahora, por ejemplo, contiene el texto "Elementos semánticos".
<aside>
Este nuevo elemento puede utilizarse para marcar una barra lateral o algún otro contenido que de alguna forma se considere separado del contenido que le rodea. Un ejemplo de esto podrían ser los bloques publicitarios.
<hgroup>
En algunos casos, una página, un artículo o una sección pueden requerir más de un encabezado, como donde usted tiene un título y un subtítulo. Este tutorial, por ejemplo, tiene el título "Cree sitios Web modernos usando HTML5 y CSS3" y el subtítulo "Implementando los elementos de bastidor y de video en HTML5". Usted puede agruparlos en un elemento <hgroup>, usando un elemento <h1> para el título principal y un elemento <h2> para el subtítulo.

El sitio Web de muestra al final de este tutorial incluye varios de estos nuevos elementos sintácticos, y explicaré su sintaxis y uso más detalladamente en ese punto.

El elemento <canvas>

El elemento <canvas> fue desarrollado originalmente por Apple® para el uso en los widgets del Mac OS X Dashboard y en Safari, pero después fue adaptado por Mozilla® y Opera® en sus navegadores Web. El elemento ha sido estandarizado e incluido en la especificación HTMl5, junto con una serie de APIs para dibujo en 2D que pueden utilizarse para crear formas, testo, transiciones y animaciones dentro del elemento.

Mucho creen que el elemento <canvas> es uno de los aspectos más importantes del HTML5 porque facilita la producción de gráficas, juegos interactivos, aplicaciones de pintura y otras gráficas al vuelo, sin necesidad de plug-ins externos como Adobe Flash.

El elemento <canvas> en sí es bastante básico, y define la amplitud, altura e ID único del objeto. Luego el desarrollador debe usar una serie de APIs JavaScript para dibujar realmente objetos en el bastidor, normalmente cuando la página Web se ha terminado de presentar. Estas APIs permiten al desarrollador dibujar formas y líneas; aplicar color, opacidad y gradientes; crear texto; transformar objetos del bastidor y efectuar animaciones. Las APIs también permiten que el <canvas> sea interactivo y que responda a la entrada del usuario como a eventos de mouse y a eventos de tecla, facilitando la producción de juegos y aplicaciones Web en el bastidor. Usted verá un ejemplo del elemento <canvas> en acción en el sitio Web HTML5/CSS3 de muestra, más adelante en este tutorial.

Reproduciendo <audio> y <video>

En los últimos años, la popularidad de los sitios para compartir videos como YouTube y plataformas de entrega de contenido como Hulu, han visto una enorme explosión en el uso de la Web para multimedia en modalidad continua. Desafortunadamente, la Web no se construyó con ese contenido en mente y como resultado, el suministro de audio y video ha sido facilitado en gran medida por el formato de archivo Flash Video (.flv) y por la plataforma Adobe Flash.

Sin embargo, el HTML5, incluye soporte para dos nuevos elementos, <audio> y <video>, que permiten a los desarrolladores Web incluir contenido multimedia sin depender del hecho de que el usuario tenga instalados los plug-ins adicionales del navegador. Muchos navegadores, incluyendo Mozilla Firefox, Apple Safari y Google Chrome, han comenzado a soportar estos nuevos elementos y a proporcionar controles de reproducción estándar en el navegador, y el usuario elige si los utiliza. Además, se ha agregado un conjunto de APIs JavaScript estándar para permitir a los desarrolladores que creen sus propios controles de reproducción, si desean hacerlo. Una ventaja clave de la reproducción nativa de multimedia es que en teoría requiere de menos recursos de CPU, lo cual puede llevar a economizar energía.

No obstante, un problema clave con todos estos nuevos elementos multimedia son los formatos de archivo soportados por cada navegador y los problemas por licencias de patentes pendientes que van de la mano con los diferentes codecs con los que estos archivos pueden estar codificados. Mozilla y Opera desean usar el contenedor de video y codec de fuente abierta Theora, que no necesita licenciamiento de patente para incluir los codecs en el navegador Web. Por otro lado, Apple y Google no están contentas con la calidad de Theora, particularmente en cuanto a la entrega de contenido en alta definición (HD) en los sitios como YouTube. Ellas prefieren el codec H.264, normalmente contenido en archivos MP4, MOV o MKV.

Aunque el problema no sólo es con el video, pues con los codecs de audio sucede el mismo problema. Los formatos MP3 y AAC están restringidos por patentes, mientras que el formato Vorbis no. El problema con el audio Vorbis es que no es de uso extendido, dado que los reproductores de audio portátiles y muchas aplicaciones de software de medios no lo soportan.

Hay muchas decisiones que se deben tomar en el futuro cercano sobre el <video> y el <audio> del HTML5, y será interesante ver qué codecs y formatos se facilitarán en la recomendación final. Mientras tanto, usted puede intentar soportar todos los navegadores, haciendo que el video esté disponible en una variedad de formatos y ofreciendo video Flash como opción alternativa. Esperemos que se tome una decisión final, y que la decisión sobre cuáles formatos soportar no quede a criterio de los proveedores de navegadores, pues ello esencialmente dejaría sin uso a estos nuevos elementos.

De nuevo, usted verá el elemento <video> en la acción que hay más adelante en este tutorial.

Almacenamiento local y aplicaciones off-line

Los desarrolladores Web tradicionalmente han usado cookies para almacenar información en la máquina local de un visitante, permitiendo a la página Web leer esta información después. Aunque las cookies son bastante útiles para almacenar datos básicos, están limitadas por el hecho de que los navegadores Web no necesitan mantener más de 20 cookies por servidor Web ni más de 4Kb de datos por cookie (incluyendo nombre y valor). Adicionalmente, son enviadas al servidor Web con cada solicitud HTTP, lo cual es un desperdicio de recursos.

El HTML5 ofrece una solución para estos problemas con las APIs de Almacenamiento Local, que se tratan en una especificación separada del documento HTML5 principal. Este conjunto de APIs permite a los desarrolladores almacenar información en la computadora del visitante mientras confían razonablemente en que todavía estará allí posteriormente. Además, la información es accesible en cualquier punto (incluso después de que la página se ha presentado) y no se carga automáticamente con cada solicitud HTTP. La especificación incluye restricciones respecto a un mismo origen, lo cual evita que los sitios Web lean o cambien los datos almacenados por otros sitios Web.

La mayoría de navegadores almacenan las páginas Web en la memoria caché local, permitiendo que sean visibles incluso si el usuario está off-line. Esto funciona bien para páginas estáticas, pero no está disponible para contenido dinámico que normalmente está operado por bases de datos, como Gmail, Facebook o Twitter. El HTML5 ofrece soporte para aplicaciones off-line, donde el navegador descarga todos los archivos necesarios para utilizar la aplicación off-line, y cuando el usuario utiliza la aplicación off-line, el navegador puede permitir que cualquier cambio hecho en el proceso se cargue al servidor cuando se reconecte a Internet.

Mejoras de formularios Web

Si usted ha creado aplicaciones Web antes, muy probablemente esté familiarizado(a) con el conjunto HTML de controles de formulario, algunos de los cuales se implementan usando el elemento <input>. En HTML 4, se soportaban los siguientes tipos de entradas:

  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • reset
  • radio
  • submit
  • text

Además, hay algunos otros elementos que se utilizan en formularios, como <select> y <textarea>. Estos controles de formulario ofrecen todas las funciones para campos básicos de formulario como nombre, número telefónico y dirección— (—como los que usted puede encontrar en un formulario de contacto). Pero, la Web como plataforma ha crecido más allá de la etapa en la que los formularios HTML se utilizaban para ingresar formularios de contacto— (—ahora se utilizan para ingresar datos de aplicaciones para procesamiento del lado del servidor). Como resultado, los desarrolladores de aplicaciones Web continuamente necesitan algunos de los formularios de control más sofisticados, como spinners, sliders, pickers de fecha y hora, pickers de color, y demás.

Con el fin de conectarse a este tipo de controles, los desarrolladores necesitaban usar una biblioteca JavaScript externa que proporcionara los componentes de IU, o si no utilizar una infraestructura de desarrollo alternativa como Adobe Flex, Microsoft Silverlight o JavaFX. El HTML5 pretende llenar algunos de estos vacíos dejados por su predecesor en este espacio, al ofrecer todo un rango de nuevos tipos de entrada de formulario:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

En este momento, el soporte para estos nuevos campos de formulario es bastante limitado. El navegador Mobile Safari en el iPhone utiliza algunos de estos nuevos tipos para cambiar el tipo de teclado presentado al usuario (por ejemplo, con el tipo e-mail se mostrarán atajos de símbolo @ y de .com). Adicionalmente, Opera proporciona algunos widgets nuevos para muchos de estos controles, incluyendo un spinner para el tipo de número y un picker de fecha de calendario para los tipos relacionados a la fecha. El tipo más ampliamente disponible de estos nuevos ofrecimientos es el tipo range, que es presentado como un slider por Opera, Safari y Google Chrome.

Además de estos nuevos tipos de entrada, el HTML5 soporta dos principales nuevos recursos para campos de formulario. El primero de ellos es autofocus, que le dice al navegador que se enfoque automáticamente en un campo particular de un formulario cuando se presente la página, sin necesidad que el código JavaScript lo haga. La segunda mejora es el atributo placeholder, que permite al desarrollador definir el texto que aparecerá en un control basado en casilla de texto cuando su contenido sea vacío. Un ejemplo de esto sería un recuadro de búsqueda donde el desarrollador preferiría no utilizar una etiqueta externa al recuadro mismo. El atributo placeholder permite al desarrollador especificar el texto que se mostrará cuando el valor del control sea vacío y el control no tenga enfoque. Un ejemplo de esto se muestra en la Figura 1.

Figura 1. El atributo placeholder en acción
El atributo placeholder en acción

Como muestra la Figura 1, el marcador de texto para dirección de e-mail y número telefónico aparece en gris mientras que el campo esté vacío y no tenga enfoque. Esta captura de pantalla también muestra un ejemplo de una entrada de tipo intervalo, representada aquí por un slider en el navegador Safari. Esta captura de pantalla se tomó de una página Web de muestra que se tratará más adelante en este tutorial.

Otros recursos nuevos

El HTML5 incluye tantos nuevos recursos que es imposible cubrirlos todos en este tutorial. Esta sección ofrece una breve visión general de algunas de las mejoras en la especificación.

Trabajador Web
Este permite configurar el código JavaScript para que se ejecute en un proceso en segundo plano, facilitando el desarrollo de aplicaciones multihilos. El beneficio principal que los Trabajadores Web ofrecen a los desarrolladores es que la gran cantidad de cálculos se puede procesar en segundo plano, sin afectar negativamente la velocidad de la interfaz de usuario.
Geolocalización
El HTML5 incluye una API de geolocalización que permite a una aplicación Web determinar su ubicación geográfica actual, suponiendo que el dispositivo que usted usa como blanco ofrezca recursos para encontrar dicha información (por ejemplo, un GPS de un teléfono celular). Si usted no cuenta con un dispositivo que soporte esta característica (como un iPhone o un teléfono inteligente basado en Android 2.0), puede usar Firefox y descargar un plug-in que le permite configurar su ubicación manualmente.
Arrastrar y soltar
Otro recurso interesante es la inclusión de una API para arrastrar y soltar. Hasta ahora, la implementación de arrastrar y soltar sin plug-ins dependía de algún JavaScript complejo o del uso de una biblioteca JavaScript como script.aculo.us.
Mensajería entre diferentes documentos
Esto permite a documentos en diferentes ventanas (e iframes, para ese caso) enviar y recibir mensajes entre sí. Es te recurso puede probar ser bastante útil para el desarrollo de widgets y aplicaciones que estén hospedados en servidores diferentes al servidor de la página Web principal (similar a las aplicaciones de Facebook).
Y más
Otros recursos nuevos introducidos por el HTML5 incluyen tipos MIME y registro de manejador de protocolos, de manera que las aplicaciones Web puedan registrarse como la aplicación predeterminada para un tipo de archivo o protocolo en particular; administración de historial de navegador, el cual hasta ahora necesitaba implementarse manualmente o utilizando una infraestructura JavaScript externa; y una gran cantidad de otros nuevos elementos y atributos que hacen más fácil la vida de los desarrolladores Web.

Nuevos recursos en el CSS3

Esta sección le presenta una introducción de los nuevos recursos que se pueden encontrar en las especificaciones del CSS nivel 3— (—incluyendo nuevos selectores CSS como los estructurales, los basados en estado y las pseudo-clases de negación, así como otros tipos nuevos de selectores). También muestra muchos de los efectos que ofrece el CSS3 y que anteriormente hubieran requerido que las imágenes se crearan usando una aplicación separada y que fueran guardados como GIF, JPG o PNG. Tales efectos incluyen sombras de gotas en texto y recuadros, esquinas redondeadas en los bordes y el uso de opacidades para crear una apariencia translúcida. El uso de muchos de estos recursos (como la opacidad y las esquinas redondeadas) está relativamente extendido, por el hecho de que se degradan de forma graciosa en navegadores Web legados. Luego, usted aprenderá sobre los nuevos diseños multicolumna que se pueden crear usando CSS3. Estos diseños son un regreso al diseño de periódico en donde el texto se acomoda dentro de un número establecido de columnas o dentro de un ancho de columna particular, según se requiera. Otro tema del que se hablará es el problema de incluir fuentes Web no estándar usando la etiqueta @font-face. Finalmente, se presentarán algunos de los demás nuevos recursos en el CSS3, como el soporte para modelos de colores HSL (Hue, Saturation y Lightness) y RGBA (Red, Green, Blue y Alpha).

Nuevos selectores

Un selector CSS hace referencia a la manera en que se da estilo a los elementos HTML usando una hoja de estilo. Por ejemplo, para poner borde alrededor de todos los elementos <div> usted utilizaría el selector div: div { border: 1px solid #000; }.

Para aplicar color de fondo a todos los elementos con la clase highlight usted utilizaría el selector .highlight: .highlight { background-color: yellow; }.

Finalmente, para cambiar el ancho de un elemento con un valor myDiv de atributo de ID, usted usaría: #myDiv { width: 250px; }.

Desde luego, estos selectores pueden combinarse, así que para seleccionar todos los elementos <div> dentro de la clase highlight, usted utilizaría div.highlight, o para seleccionar el elemento <div> con el ID myDiv usted utilizaría div#myDiv.

Además de estos selectores simples, el CSS también incluye (y lo ha hecho desde versiones anteriores) una serie de selectores complejos. Por ejemplo, usted puede usar el selector input[type="text"] para seleccionar únicamente los elementos de entrada que contengan un tipo de atributo con el valor text. O puede utilizar la pseudo-clase :hover para dar estilo a un elemento cuando el puntero del mouse pase sobre él, por ejemplo: a:hover { color: red; }.

Hay muchos más de estos selectores, todos ellos suministrados para facilitar la selección de un elemento para darle estilo. Con el CSS3 se han agregado incluso más selectores nuevos a la mezcla y todos ellos facilitan la vida de los desarrolladores, reduciendo la cantidad de HTML y JavaScript que necesitan escribir.

Selectores de atributos

E[foo^="bar"]
Selecciona un elemento, E, cuyo atributo foo comience exactamente con la cadena de caracteres bar
E[foo$="bar"]
Selecciona un elemento, E, cuyo atributo foo termine exactamente con la cadena de caracteres bar
E[foo*="bar"]
Selecciona un elemento, E, cuyo atributo foo contenga la cadena de caracteres bar

Pseudo-clases estructurales

E:root
Selecciona un elemento, E, de la raíz del documento (la etiqueta <html>)
E:nth-child(n)
Selecciona un elemento, E, el n-avo hijo de su elemento padre
E:nth-last-child(n)
Selecciona un elemento, E, el n-avo último hijo de su elemento padre
E:nth-of-type(n)
Selecciona un elemento, E, el n-avo hermano de su tipo
E:nth-last-of-type(n)
Selecciona un elemento, E, el n-avo último hermano de su tipo
E:last-child
Selecciona un elemento, E, que es el último hijo de su elemento padre (Note que E:first-child se definió previamente en CSS2)
E:first-of-type
Selecciona un elemento, E, el primer hermano de su tipo
E:last-of-type
Selecciona un elemento, E, el último hermano de su tipo
E:only-child
Selecciona un elemento, E, el único hijo de su elemento padre
E:only-of-type
Selecciona un elemento, E, el único hermano de su tipo
E:empty
Selecciona un elemento, E, que no tiene hijos (incluyendo nodos de texto)

La pseudo-clase target.

E:target
Selecciona un elemento, E, que es el objetivo de un URI que le hace referencia

Pseudo-clases de estados de elemento de IU

E:enabled
Selecciona un elemento de interfaz de usuario, E, que está habilitado
E:disabled
Selecciona un elemento de interfaz de usuario, E, que está deshabilitado
E:checked
Selecciona un elemento de interfaz de usuario, E (un botón de selección o recuadro de selección), que está marcado o seleccionado

Pseudo-clase Negation

E:not(s)
Selecciona un elemento, E, que no coincide con el selector simple s

Combinador general de hermanos

E ~ F
Selecciona un elemento, F, que es precedido por un elemento, E

El soporte de navegadores para los nuevos selectores de atributos y el combinador general de hermanos son excelentes, dado que funcionan en casi todos los navegadores Web modernos. El soporte de las nuevas pseudo-clases está incluido en las últimas versiones de la mayoría de navegadores, pero usted puede necesitar incluir a planes alternos para navegadores más antiguos como Explorer 6/7 y Firefox 3.0.

Nuevos efectos

Aunque los nuevos selectores probablemente son los recursos que más reducen los dolores de cabeza de los desarrolladores, las mejoras qué más desean ver las personas son los llamativos nuevos efectos que hay disponibles. Estos se facilitan mediante una gran cantidad de nuevas propiedades CSS, incluyendo:

  • background (ahora soporta múltiples backgrounds)
  • background-clip
  • background-origin
  • background-size
  • border-radius (esquinas redondeadas)
  • border-image
  • border-color (gradiente en los bordes)
  • box-shadow (sombra de gota en recuadros sin imágenes)
  • box-sizing
  • opacity
  • outline-offset
  • resize
  • text-overflow
  • text-shadow
  • word-wrap

La página de muestra HTML5/CSS3 que usted creará al final de este tutorial le mostrará algunos de estos nuevos efectos en acción.

Diseños multicolumnas

El diseño en multicolumna del CSS3 permite que el texto se distribuya sobre un número de columnas, como vería usted en una hoja de un periódico. Esto se puede hacer de dos formas, bien sea usando la propiedad de column-width, donde usted define qué tan ancha deberá ser cada columna (el número de columnas es determinado por el espacio disponible en el contenedor), o usando column-count, donde usted define el número de columnas que se deberá usar. Luego el ancho variará dependiendo del espacio disponible para cada columna.

Otros recursos de los diseños multicolumna incluyen la propiedad column-gap, que permite al desarrollador definir el espacio que debe haber entre columnas cuando se utiliza el método column-width. Otra útil adición es la propiedad column-rule, que permite colocar una regla estilo borde entre columnas. Finalmente, está la propiedad column-space-distribution, que determina cuánto espacio se debe dejar entre columnas.

Los diseños multicolumna son soportados actualmente por los navegadores Mozilla WebKit. Hasta ahora, estos están implementados mediante propiedades de marca registrada temporales con el prefijo -moz o -webkit, respectivamente. Cuando la especificación ha finalizado, estos navegadores eventualmente regresarán a las propiedades estándar.

Fuentes Web

Las fuentes Web fueron propuestas en realidad en el CSS2 y han estado disponibles en Microsoft Internet Explorer desde la versión 5. Desafortunadamente, esto necesitó del uso del formato de fuente patentado .eot (Embedded Open Type), y ninguno de los otros proveedores de navegadores decidió implementarlo. Como resultado, las fuentes Web realmente nunca despegaron en los sitios Web basados en CSS2.

Sin embargo, con las últimas versiones de Firefox, Safari, Chrome y Opera, usted puede usar ahora la regla @font-face para usar cualquier fuente .ttf (TrueType) o .otf (OpenType) licenciada, en su página Web. Un ejemplo de la regla @font-face es el siguiente: @font-face { font-family: Alexa; src: url('Alexa.otf'); }.

Ahora usted puede usar esta fuente en sus propias reglas CSS, como: article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.

Recuerde que las fuentes son como imágenes— (—si no son suyas es posible que necesite permiso para utilizarlas en la Web). De forma alternativa, usted puede pagar por (o descargar gratuitamente) algunas fuentes libres de regalías que se pueden incluir en sus páginas Web a discreción suya.

Otros recursos nuevos

El CSS3 también incluye muchos otros nuevos recursos, incluyendo soporte para nuevos valores de color, particularmente HSL (Hue, Saturation, Lightness) y dos valores de color con propiedades alfa— (—RGBA (Red, Green, Blue, Alpha) y HSLA (Hue, Saturation, Lightness, Alpha). Las consultas de medios le permitirán definir diferentes estilos para diferentes dispositivos, con base en el tamaño de su puerto de visualización. Por ejemplo, usted puede proporcionar estilos específicos para dispositivos con un puerto de visualización de menos de 500 pixeles (como un teléfono inteligente, PDA u otro dispositivo móvil). El módulo de voz del CSS3 le permite controlar propiedades de la voz de un lector de pantalla, incluyendo el volumen de la voz, el balance, la tasa, el énfasis, y más.


Reuniéndolo todo: La página HTML5/CSS3 de muestra

En este momento usted ya debe estar ansioso(a) por poner manos a la obra y comenzar a crear páginas que hagan uso de estos excelentes nuevos recursos que HTML5 y CSS3 tienen para ofrecer. En esta sección usted creará una página HTML que contiene muchos de estos nuevos recursos. Esta sección del tutorial dividirá el desarrollo de la página en dos sub-secciones, como sigue:

  • La estructura básica de la página HTML5
  • Usando los nuevos elementos semánticos
  • Introduciendo el elemento <video>
  • Mejoras de formulario Web
  • El elemento <canvas> y la API para dibujo en 2D

Toda la fuente se compilará en un solo archivo HTML, llamado index.html (vea Descargas). Usted puede abrir este archivo desde cualquier ubicación en su computadora; no es necesario implementarlo a un servidor Web para que cargue. Algunos navegadores pueden presentarle advertencias sobre ejecutar scripts localmente, así que asegúrese de mantener activados los atributos de scripting dinámico si se le solicita.

Durante el recorrido se agregarán reglas CSS para la página, a un archivo externo de hoja de estilo llamado styles.css. Usted verá algunos ejemplos de nuevas propiedades CSS3 como border-radius, text-shadow y box-shadow en esta página de ejemplo.

En cualquier caso, ya es suficiente conversación, ¡comencemos con algo de HTML5!

La estructura básica de la página HTML5

Como usted ya debe saber, los navegadores Web pueden funcionar en diferentes modos dependiendo de si hay un doctype válido en un documento HTML. Si no se encuentra un doctype válido el navegador operará en modo quirks, donde se conservan algunos recursos no estándar para compatibilidad en retrospectiva. Si se encuentra un doctype válido, el navegador funciona en modo estándar, según los estándares W3C y IETF.

El doctype para HTML5 es bastante simple: <!doctype html>.

Usted debe incluir esta línea en la parte superior de cada página HTML5 que cree. Continuemos y definamos el compendio básico para la página index.html. El código para esto se puede encontrar en el Listado 1.

Listado 1. Estructura básica del documento HTML5
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->
    </head>
    <body>

</body>
</html>

Usted puede notar que a diferencia de las variedades recientes XHTML de HTML, la etiqueta de apertura <html> ya no requiere de los atributos xmlns ni xml:lang , y el atributo lang por sí solo es suficiente. De forma similar, el elemento <meta> presenta un nuevo atributo de charset de forma abreviada para definir la codificación de caracteres de la página. Vale la pena señalar que estos cambios sólo hacen que sea más fácil y que reducen la cantidad de código requerido para llevar a cabo tareas simples. Los métodos antiguos siguen siendo perfectamente válidos.

Usted también debe estarse preguntando por qué el elemento <link> no presenta un atributo type . CSS es el único tipo de hoja de estilo soportado por el momento, y todos los navegadores actuales asumirán que el tipo es text/css si no se suministra ninguno, así que no es necesario. De nuevo, es completamente aceptable proporcionar el atributo type si así lo desea.

El punto final a destacar en el Listado 1 es el elemento <script>, que carga el archivo JavaScript html5.js hospedado externamente. Como los navegadores Microsoft Internet Explorer (incluso la versión 8) no soportan los nuevos elementos HTML5, el navegador no necesita reconocer elementos similares a <article>, <section>, <header>, y demás. No sólo no reconoce estos elementos, sino que evita que se les asigne estilo. Un truco conocido para sortear este problema es utilizar la función JavaScript document.createElement() para crear elementos ficticios para cada etiqueta. Este script hará esto para cada nuevo elemento HTML5 de manera que usted no necesita preocuparse por ello. Recomiendo especialmente incluir este script e n todo su trabajo de HTML5.

A continuación, usted agregará a la página algo de los nuevos elementos semánticos para crear la estructura visual de la misma. También creará algunas reglas de hoja de estilo para que la página sea más presentable.

Usando los nuevos elementos semánticos

Para ilustrar cómo se deben usar los nuevos elementos semánticos HTML5, ahora usted los agregará al archivo index.html. La estructura básica de estos elementos se adhiere al siguiente compendio:

  • header
    • hgroup
  • nav
  • article
    • header
    • section
      • header
  • footer

Como puede ver, la página en sí se abre con un header, seguido por un nav, luego un article y finalmente un footer. El header tendrá múltiples encabezados usando el elemento hgroup. El article en sí tendrá un elemento header así como uno section, el cual también tiene su propio header. El código para esto se muestra en el Listado 2, y deberá agregarse entre la apertura y el cierre de la etiqueta <body> del Listado 1.

Listado 2. Usando elementos semánticos HTML5
<header>
    <hgroup>
        <h1>Company Name</h1>
        <h2>An example of HTML5 and CSS3 in action</h2>

    </hgroup>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>

        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>

</nav>

<article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>

        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a>
        </h1>
    </header>
    <p>This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p>

    <section>
        <header>
            <h1>This is a section heading</h1>
        </header>
        <p>This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p>

    </section>
</article>

<footer>
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>

El código del Listado 2 debe ser relativamente auto-explicativo. El elemento <header> principal consiste de un elemento <hgroup> con dos encabezados: un elemento título <h1> y un elemento subtítulo <h2>. El elemento <nav> principal es una lista no ordenada con tres elementos, cada uno de los cuales es un enlace hacia una página ficticia del sitio. El elemento <article> contiene su propio <header>, con un elemento <time> para la fecha de publicación del artículo. Usted notará que este elemento contiene un atributo datetime que especifica un formulario estandarizado de la fecha de publicación que los computadores pueden leer fácilmente. El contenido del elemento time es "Jan 12", que los humanos pueden leer fácilmente. El atributo pubdate indica que esta es una fecha de publicación del artículo en cuestión.

Debajo del encabezado hay un párrafo HTML normal que está seguido por un elemento <section> nuevo, que contiene un <header> con el título de la sección y un párrafo. Usted creará secciones para las áreas adicionales de la página creada, en las secciones restantes de esta tutorial.

Si usted abre esta página en un navegador, no tendrá muy buen aspecto, pues aún no se le ha añadido estilo con CSS. Vamos a agregar algo de estilo para hacer que la página se vea un poco mejor. Añada el código del Listado 3 al archivo styles.css.

Listado 3. Estilos CSS para los nuevos elementos semánticos HTML5
* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 480px; margin: 0px auto;
}

header h1 {
    font-size: 36px; margin: 0px;
}

header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}

nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #666;
    padding-left: 4px; height: 24px;
}

nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; text-decoration: none;
    font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}
article > header time {
    font-size: 14px; display: block; width: 26px;
    padding: 2px; text-align: center; background-color: #993333;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

footer p {
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-top: 24px;
}

La mayoría de estas reglas CSS contienen propiedades que ya han estado disponibles en CSS durante algún tiempo, pero puede notar que la regla article > header time contiene propiedades border-radius (incluyendo propiedades específicas según navegador para navegadores basados en Mozilla y WebKit). Esto añade una esquina redondeada al recuadro date/time e n los navegadores soportados, como Firefox, Safari y Chrome.

También notará el uso de la propiedad text-shadow en la regla article > header h1 . La mayoría de los navegadores modernos soportan esta propiedad.

Lo llamativo sobre las dos propiedades CSS3 introducidas en esta sección es que se degradan elegantemente. En otras palabras, si el navegador Web del visitante no las soporta, simplemente serán ignoradas y a los elementos se les aplicará estilo según cualquier otra propiedad soportada. La página incluyendo este contenido actualizado deberá verse como la captura de pantalla de la Figura 2 (al menos así es como se ve en Safari 4 en Mac OS X).

Figura 2. Elementos semánticos HTML5 en acción
Elementos semánticos HTML5 en acción

Ahora, se le presentará una introducción al elemento <video> y a cómo utilizarlo para incluir un archivo de videoTheora en su página HTML5.

Introduciendo el elemento <video>

Ahora usted añadirá un video a la página index.html junto con un conjunto de controles de reproducción suministrados por el navegador. Tenga en cuenta que el video incluido en esta muestra es un video Theora, que sólo se puede reproducir en Firefox y Google Chrome. Actualmente Safari sólo soporta videos codificados en H.264. Añada el código del Listado 4 debajo de la última etiqueta </section> de cierre del Listado 2, pero arriba de la etiqueta </article> de cierre.

Listado 4. Agregando un video a la página
<section>
    <header>
        <h1>Esta es una sección de video</h1>
    </header>
    <p>
        <video src="http://www.double.co.nz/video_test/transformers480.ogg"
controls autoplay>
            <div class="no-html5-video">
                <p>Este video sólo funcionará en Mozilla Firefox o Google
Chrome.</p>
            </div>
        </video>
    </p>
</section>

Como puede ver, usted primero crea una nueva sección en la que el video se mostrará en la página. Esta tiene un header seguido por el video. El video que estoy utilizando aquí es de unas escenas de la primer película de Transformers y es cargado de un sitio Web externo usando el atributo src . El atributo controls le dice al navegador que muestre los controles estándar del navegador para reproducción de video. Y el atributo autoplay , bueno, le dice al navegador que comience a reproducir el video automáticamente.

Entre las etiquetas de apertura y de cierre del <video> creé un elemento <div> con la clase no-html5-video, que mostrará un mensaje a los usuarios que intenten ver el video en un navegador que no soporte el elemento <video> o que no soporte el codec de video Theora.

Antes de ir a ensayar la página en su navegador, agreguemos algunas reglas nuevas a la página styles.css. Simplemente agregue las reglas del Listado 5 en la parte inferior del archivo.

Listado 5. Reglas CSS para la sección de video
article > section video {
    width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
    width: 480px; height: 40px; border: 1px solid #993333;
    text-align: center; color: #993333; font-size: 13px;
    font-style: italic; background-color: #F7E9E9;
}

Estas reglas simplemente definen el tamaño del elemento que contiene el video, así como un mensaje de error para aquellos visitantes que usen navegadores que no soporten video HTML5 o el formato Theora. Si usted abre la página en Firefox o Chrome deberá ver algo como lo siguiente (vea la Figura 3).

Figura 3. Video HTML5 en acción
Video HTML5 en acción

Pulcro, ¿cierto? Ahora intente abrirla en un navegador como Internet Explorer u Opera. Usted deberá ver un error como el mostrado a continuación en la Figura 4. Note que si intenta verla en Safari es posible que le muestre el reproductor de video, pero no reproducirá el video.

Figura 4. Error cuando no se soporta el video HTML5
Error cuando no se soporta el video HTML5

Ahora, usted creará un formulario que tenga algunos de los nuevos recursos de formulario Web, como texto placeholder, autofocus, y los nuevos tipos de entrada como range, datetime y email.

Mejoras de formulario Web

Uno de los aspectos subestimados del HTML5 es la introducción de diferentes tipos nuevos de controles de formulario que facilitarán la vida de muchos desarrolladores cuando estén creando aplicaciones Web basadas en formularios. Actualmente, el soporte para estos nuevos controles en términos de widgets de navegador y funcionalidad es escaso, pero se degradan de forma elegante como recuadros de texto normales de manera que ahora usted puede utilizarlos de forma segura en su código, y cuando el soporte de los navegadores mejore, estos recursos se habilitarán automáticamente.

Añada el código del Listado 6 directamente debajo de la etiqueta </section> de cierre de la sección de video que usted creó en el Listado 4.

Listado 6. Agregando un formulario Web
<section>
    <header>
        <h1>This is a feedback form</h1>
    </header>
    <p><form>

        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" 
autofocus><br />
        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            
        <label for="contact_phone">Phone:</label>

        <input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br />
        <label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br />
        <label for="contact_priority">Priority:</label>

        <input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br />
        <input type="submit" value="Request Call">
    </form></p>
</section>

El primer elemento del formulario del Listado 6 no tiene ningún atributo type y como resultado se predeterminará a un control de texto. Usted notará que tiene el texto placeholder "Ingrese su nombre" y que está configurado como autofocus. Los navegadores que lo soporten automáticamente cambiarán el enfoque hacia este elemento cuando la página haya sido presentada.

El siguiente elemento es del tipo "email" y nuevamente tiene un valor de texto placeholder. El único navegador que reconoce este tipo de elemento de entrada es Opera, el cual muestra un ícono de e-mail en el campo para indicar que es un campo de e-mail.

El siguiente campo de interés es el campo de fecha y hora con la etiqueta "Devolución de llamada:". En los navegadores que los soportan, esto mostrará un picker de fecha y hora. En Opera, esto se muestra como dos controles, un recuadro de texto con un datepicker y un spinner para la hora.

Finalmente, verá un control de tipo range, con atributos min, max y value establecidos. Este control será presentado por Safari, Chrome y Opera como un slider, con un valor mínimo de 1, seleccionado de forma predeterminada, y un valor máximo de 5. Los navegadores no soportados simplemente mostrarán esto como un recuadro de texto con el valor establecido en 1.

Ahora, vamos a agregar algo de estilo a lo que de otra forma sería un formulario apagado y aburrido. Añada las siguientes reglas (vea el Listado 7) a su archivo styles.css.

Listado 7. Reglas CSS del formulario Web
article > section form {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
    padding: 10px; margin-bottom: 30px;
}

article > section label {
    font-weight: bold; font-size: 13px;
}

article > section input {
    margin-bottom: 3px; font-size: 13px;
}

Observando el Listado 7 detalladamente, usted podrá ver que se ha agregado un border-radius al contenedor del formulario para redondear las esquinas del recuadro. Además, se ha agregado un box-shadow a este elemento, así como un color gris suave de fondo y algo de relleno.

Primero, observemos cómo aparece el formulario en Opera, el navegador que incluye el mayor soporte para estos nuevos tipos de formulario Web HTML5 (vea la Figura 5).

Figura 5. Mejoras al formulario Web en Opera
Mejoras al formulario Web en Opera

Usted puede ver el ícono de e-mail siguiente al campo de e-mail, y los nuevos controles para el campo de fecha y hora. Al hacer clic en el campo spinner desplegable se abre el widget de calendario de Opera, como se muestra en la Figura 6 a continuación.

Figura 6. Widget de calendario de Opera
Widget de calendario de Opera

Usted también puede ver un control slider poco atractivo que Opera presenta. No obstante y es algo frustrante, Opera no soporta las propiedades border-radius ni box-shadow y como resultado, ninguno de estos efectos ha sido aplicado al formulario. Ahora abramos la página en Safari para ver cómo se ven estos efectos CSS3 (vea la Figura 7).

Figura 7. Mejoras al formulario Web en Safari
Mejoras al formulario Web en Safari

El Safari basado en WebKit ha presentado correctamente las esquinas redondeadas y el efecto de sombra de recuadro, y tiene un efecto visual simple pero impactante. Los mismos efectos deberían funcionar en Mozilla Firefox y Google Chrome. Podrá notar que Safari soporta el recurso de texto placeholder y que también implementa un slider (es de mencionar que es una alternativa mucho más presentable que la de Opera) en lugar de una entrada tipo range. En la sección final de este tutorial usted aprenderá a utilizar el elemento <canvas> y la API para dibujo en 2D para crear una imagen simple en mapa de bits de una cara sonriente.

El elemento <canvas> y la API para dibujo en 2D

Para comenzar con el <canvas>, primero debe agregar el elemento en sí a la página. Directamente debajo del código que usted agregó al index.html para el formulario Web en la sección anterior, añada el código del Listado 8.

Listado 8. Agregado el elemento <canvas> a la página
<section>
    <header>
        <h1>Esta es una sección 2D Canvas</h1>
    </header>

    <p>
        <canvas id="my_canvas" width="480" height="320"></canvas>
        <div id="no-canvas">
            <p>Usted necesita un navegador compatible con Canvas para ver esta área.</p>
        </div>
    </p>
</section>

Este código es relativamente simple. Usted solo declara el elemento de bastidor, dando una amplitud, una altura y un atributo de ID único. Los navegadores Mozilla y WebKit tienen opiniones diferentes sobre si la etiqueta <canvas> debería tener una etiqueta de cierre separada, pero ambos se presentarán de la misma manera siempre y cuando usted no ponga ningún código entre las etiquetas de apertura y de cierre. En un momento, usted utilizará JavaScript para mostrar un mensaje de error 'no-canvas' a aquellos usuarios que estén usando un navegador no soportado.

Luego, usted necesita añadir el código JavaScript que abarque las APIs para dibujo en 2D, para crear la imagen en el bastidor. En el archivo index.html, justo antes de la etiqueta de cierre </head> cerca a la parte superior del archivo, agregue el siguiente código (vea el Listado 9):

Listado 9. Agregando el script del elemento canvas
<script>
function loadCanvas() {
    var canvas = document.getElementById('my_canvas');
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(245,160,150,0,Math.PI*2,true);
        ctx.fillStyle = "rgb(255,255,204)";
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(200,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(280,110,15,0,Math.PI*2,true);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(240,170,20,4,Math.PI*2,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(240,190,60,0,Math.PI,false);
        ctx.stroke();
    } else {
        document.getElementById('my_canvas').style.display = 'none';
        document.getElementById('no-canvas').style.display = 'block';
    }
}
</script>

El Listado 9 añade un bloque de JavaScript al elemento de encabezado de la página, definiendo una función llamada loadCanvas. Esta función inicia una variable llamada canvas al seleccionar el elemento con el ID único my_canvas. Luego utiliza un argumento 'if' para determinar si puede conseguir un contexto canvas de este elemento. Si puede, el elemento <canvas> es soportado por el navegador; si no, el navegador no lo soporta y el bastidor debe ocultarse y reemplazarse por un mensaje de error. De esto se encarga el bloque 'else' del argumento 'if', hacia la parte final de la función.

Si se detecta soporte de canvas, la función obtiene un contexto 2D llamado ctx, el cual es usado luego para dibujar formas en el bastidor. En esta función se han creado cinco formas. Primero, la función ctx.beginPath() es llamada para comenzar a dibujar un trazo. Luego se dibuja un arco circular completo con un radio de 150 pixeles, carca del centro del bastidor, usando la función ctx.arc() . El estilo de relleno se establece como color amarillo, antes de que se llamen las funciones ctx.fill() y ctx.stroke() , creando un círculo amarillo grande con un borde negro. Esta es la cara principal.

El estilo de relleno se configura en negro dado que las siguientes formas que se dibujarán son los ojos. Esta vez se crean círculos llenos usando ctx.arc() que tienen un radio de sólo 15 pixeles, y se llama la función ctx.fill() para que los dibuje.

El siguiente bloque de código crea la nariz, que es un arco que no es un círculo completo y que se ubica debajo de los ojos que se acaban de crear, y centrado. La nariz no se va a rellenar, así que la función que se llama es ctx.stroke() .

Finalmente, se traza un arco grande semicircular debajo de la nariz para crear la boca. El resultado debe verse igual en todos los navegadores que soporten el elemento <canvas> (la mayoría de navegadores modernos, incluyendo Firefox, Safari, Chrome y Opera— (—incluso Internet Explorer— ( — pueden soportarlo con la ayuda de algunas bibliotecas JavaScript ingeniosas).

El cambio final que usted debe hacer a index.html es cambiar el elemento <body> para llamar a la función loadCanvas() cuando la ventana ha terminado de cargar. Simplemente reemplace la etiqueta <body> de apertura con la siguiente línea: <body onload="loadCanvas();">.

Finalmente, simplemente agregue las siguientes reglas al archivo styles.css para agregar algo de sombreado de recuadro para embellecer el contenedor del bastidor (vea el Listado 10).

Listado 10. Reglas CSS del bastidor
article > section div#no-canvas {
    display: none;
}

canvas {
    border: 1px solid #888;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;    
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    background-color: #eee;
}

El resultado final se ve como la imagen de la Figura 8.

Figura 8. El bastidor de la cara sonriente
El bastidor de la cara sonriente

Esto concluye la página de muestra para este tutorial. En esta sección usted utilizó HTML5 and CSS3 para trabajar con los nuevos elementos semánticos HTMl5, abarcó algunos de los llamativos nuevos efectos de CSS3, observó un video en el navegador sin ningún plug-in Flash, vio algunos de los nuevos widgets de formulario y creó una gráfica de una cara sonriente en un bastidor usando APIs JavaScript.


Resumen

Este tutorial sirve como una introducción práctica al desarrollo con HTML5 y CSS3. El HTML5 está en una etapa de desarrollo bastante temprana y será interesante ver cómo los nuevos recursos y propósitos son adoptados por los diferentes proveedores de navegadores. Por el momento, los principales navegadores, Opera, Safari, Firefox y Chrome, ofrecen soporte para más mejoras con cada release, y se esperaría ver la gran cantidad de recursos HTML5 soportados hacia finales del 2010.

Sin embargo, varios problemas pueden frenar al HTML5 para que sea ampliamente reconocido en el futuro cercano. El primer problema real es la falta de soporte por parte del Internet Explorer de Microsoft, que es el navegador Web más ampliamente utilizado en el mercado. Es poco probable que los desarrolladores puedan hacer pruebas sobre algún recurso del HTML5 en el IE, hasta el release de la primera versión beta del IE9. Por lo menos por ahora, los sitios desarrollados para HTML5 se degradan de forma elegante en el IE8, y con un poco de trabajo extra, se pueden poner planes alternativos para ofrecer soluciones a los usuarios de IE.

Otro de los problemas principales es el que rodea a los codecs y los contenedores de video. Por como están las cosas, el elemento <video> no reemplazará al video Flash como el estándar de video para la Web. Con diferentes navegadores respaldando a diferentes codecs, todavía es mucho más fácil utilizar Flash que codificar sus videos con Theora y H.264. Aquí queda la esperanza de que se haga algún tipo de avance este año en cuanto a video HTML5. En suma, HTML5 y CSS3 son estándares emocionantes, y usted puede estar asegurando sus sitios Web para el futuro haciendo que cumplan estas nuevas especificaciones hoy mismo. Siguiendo los pasos descritos en este tutorial usted deberá estar bien capacitado(a) para avanzar y explorar algunos de los otros interesantes recursos que el HTML5 tiene para ofrecer.


Descargar

DescripciónNombretamaño
HTML5 exampleshtml5.examples.zip3KB

Recursos

Aprender

  • "HTML V5 y XHTML V2" (Adriaan de Jonge, developerWorks, noviembre de 2007): Mientras la intención tanto de HTML V5 como de XHTML V2 es mejorar las versiones existentes, los enfoques que los desarrolladores eligieron para hacer tales mejoras son muy diferentes. Y con filosofías diferentes se producen resultados diferentes. Por primera vez en muchos años, la dirección de las próximas versiones de navegadores es incierta. Descubra la imagen completa que hay detrás de los detalles de estos dos estándares.
  • "New elements in HTML5" (Elliotte Rusty Harold, developerWorks, agosto de 2007): Obtenga una visión general de algunos de los nuevos elementos en HTML 5.
  • "An Introduction to MathML" (David Carlisle, developerWorks, diciembre de 2009): MathML es una Recomendación del W3C que define un vocabulario XML para marcación de expresiones matemáticas. Con HTML 5, se espera que sea posible colocar MathML directamente en la Web sin necesidad de preocuparse por tipos imitadores ni por configuraciones de servidor.
  • "Android and iPhone browser wars, Part 1: WebKit to the rescue" (Frank Ableson, developerWorks, diciembre de 2009): Este artículo es el primero de una serie en dos partes sobre el desarrollo de aplicaciones basadas en navegador para iPhone y Android.
  • "The future of HTML, Part 1: WHATWG" (Ed Dumbill, developerWorks, diciembre de 2005): En esta serie en dos partes, Edd Dumbill examina las diferentes posibilidades hacia el futuro para HTML para autores Web, desarrolladores de navegadores y para propósitos de cuerpos estándar.
  • Este tutorial HTML de w3schools.com le enseña todo sobre HTML.
  • Este tutorial CSS le enseña cómo utilizar CSS para controlar el estilo y diseño de múltiples páginas Web, todo de una vez.
  • Tutorial JavaScript: Aprenda cómo usar el lenguaje de scripting de la Web.
  • HTML5: A vocabulary and associated APIs for HTML and XHTML: Editor's Draft 13 January 2010: Lea el Borrador del Editor más reciente para la especificación HTML5.
  • Lea fragmentos de los próximos Dive Into HTML5 por Mark Pilgrim de O'Reilly Media.
  • HTML5 gallery es una vitrina de sitios que utilizan marcación HTML5.
  • HTML5 Tag Reference: Vea una referencia ordenada alfabéticamente de etiquetas HTML5.
  • El sitio Web HTML5 doctor cuenta con bastante información para ayudarle a implementar HTML5 hoy.
  • La HTML 5 Cheat Sheet lista todas las etiquetas soportadas actualmente, sus descripciones, sus atributos y su soporte en HTML 4.
  • CSS 3 Cheat Sheet: Estos son los principales recursos del CSS 3 en una tarjeta de referencia práctica e imprimible.
  • El sitio Web HTML5 tiene enlaces hacia varios experimentos y demostraciones HTML5.
  • Este demostrativo presenta el potencial de presentar gráficas 3D en el navegador, usando O3D, una API Web de fuente abierta para la creación de aplicaciones 3D ricas e interactivas en el navegador.
  • Lea How HTML5 Will Change the Way You Use the Web en lifehacker.com.
  • Yes, You Can Use HTML5 Today!: Otro excelente artículo de introducción al mundo HTML5.
  • css3.info.com: todo lo que usted necesita saber sobre CSS3.
  • Introduction to CSS3: Lea el Borrador de Trabajo del W3 sobre esta futura especificación.
  • Introducing the CSS3 Multi-Column Module da un vistazo al módulo W3C multicolumna. El objetivo del módulo es permitir que el contenido fluya hacia múltiples columnas dentro de un elemento.
  • Conozca sobre CSS3 Columns de Mozilla.org.
  • CSS3 transitions and 2D transforms: Este artículo le enseña sobre transiciones CSS3 y transformaciones en Opera. Vea también los corolarios SVG y SMIL a ellas.
  • Esta Canvas tutorial de Mozilla.org describe cómo implementar el elemento <canvas> en sus propias páginas HTML.
  • Using the Canvas de Apple Developer Central observa el soporte de aplicaciones basadas en Safari, Dashboard y WebKit para el objeto canvas de JavaScript, que le permite dibujar contenido arbitrariamente dentro de su contenido HTML.

Obtener los productos y tecnologías

  • Theora es un formato de compresión gratuito y abierto de la Fundación Xiph.org .
  • O3D AP: O3D es una API Web de fuente abierta para la creación de aplicaciones 3D ricas e interactivas en el navegador.
  • Descargue versiones de evaluación de productos IBM, y experimente con herramientas y productos de middleware de DB2, Lotus, Rational, Tivoli y WebSphere para desarrollo de aplicaciones
  • Innove en su próximo proyecto de desarrollo de fuente abierta con software de prueba IBM, disponible para descarga o en DVD.

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere
ArticleID=680746
ArticleTitle=Cree sitios Web modernos usando HTML5 y CSS3
publish-date=06142011