Wa Html5 PDF

Cree sitios Web modernos usando HTML5 y CSS3
Implementando los elementos de bastidor y de video en HTML5
Joe Lennon 14-06-2011

Software developer
Core International
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.
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
© Copyright IBM Corporation 2011 Marcas

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 1 de 27
developerWorks® ibm.com/developerWorks/ssa/
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:
• Mozilla Firefox (versión 3.5+)

• Apple Safari (versión 4.0+)
• Opera (versión 10.0+)
• Google Chrome (versión 3.0+)
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

ibm.com/developerWorks/ssa/ developerWorks®
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
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" />

</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>© 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
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
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

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
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
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
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.fill();
ctx.beginPath();
ctx.fill();
ctx.beginPath();
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
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.

Descargas
Descripción Nombre tamaño
HTML5 examples html5.examples.zip 3KB

Sobre el autor
Joe Lennon
Joe 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.
© Copyright IBM Corporation 2011

(www.ibm.com/legal/copytrade.shtml)
Marcas
(www.ibm.com/developerworks/ssa/ibm/trademarks/)

Wa Html5 PDF

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Wa Html5 PDF

Caricato da

Copyright:

Formati disponibili

Cree sitios Web modernos usando HTML5 y CSS3

Implementando los elementos de bastidor y de video en HTML5

Joe Lennon 14-06-2011

Acerca de este tutorial

© Copyright IBM Corporation 2011 Marcas

• Mozilla Firefox (versión 3.5+)

Nuevos recursos en HTML5

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 2 de 27

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

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 3 de 27

Reproduciendo <audio> y <video>

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 4 de 27

Almacenamiento local y aplicaciones off-line

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 5 de 27

Mejoras de formularios Web

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 6 de 27

Figura 1. El atributo placeholder en acción

Otros recursos nuevos

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 7 de 27

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 8 de 27

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 9 de 27

• background (ahora soporta múltiples backgrounds)

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 10 de 27

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 11 de 27

Otros recursos nuevos

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

• La estructura básica de la página HTML5

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

La estructura básica de la página HTML5

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

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 12 de 27

Listado 1. Estructura básica del documento HTML5

Usando los nuevos elementos semánticos

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 13 de 27

Listado 2. Usando elementos semánticos HTML5

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

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 14 de 27

Listado 3. Estilos CSS para los nuevos elementos semánticos HTML5

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 15 de 27

article > header time span {

article > header h1 {

article > header h1 a {

article > section header h1 {

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 16 de 27

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

Introduciendo el elemento <video>

Listado 4. Agregando un video a la página

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 17 de 27

Listado 5. Reglas CSS para la sección de video

Figura 3. Video HTML5 en acción

Figura 4. Error cuando no se soporta el video HTML5

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 18 de 27

Mejoras de formulario Web

Listado 6. Agregando un formulario Web

<input type="tel" id="contact_phone" placeholder="Enter your

<input type="range" min="1" max="5" value="1"

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 19 de 27

Listado 7. Reglas CSS del formulario Web

article > section label {

article > section input {

Figura 5. Mejoras al formulario Web en Opera

Cree sitios Web modernos usando HTML5 y CSS3 Pagina 20 de 27

Figura 6. Widget de calendario de Opera

Figura 7. Mejoras al formulario Web en Safari