PDF de programación - Guía HTML5: El presente de la web

SOBRE LA GUÍA

Guía HTML5
El presente de la web. HTML5, css3 y javascript.

Versión 1 / junio 2011

Nivel: Básico / Intermedio

La guía HTML5 se encuentra en línea en:

http://mlw.io/guia-html5/

Un proyecto de Maestros del Web y Cristalab

Ð Autores: John Freddy Vega, Christian Van Der Henst
Ð Diseño y diagramación: Iván E. Mendoza

Este trabajo se encuentra bajo una licencia Creative Commons

Atribución-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0)

El logotipo de HTML5 es compartido por W3C bajo licencia Creative Commons por Atribución.

Contacto

@freddier @cvander

Redes sociales

Facebook: http://www.facebook.com/mejorandolaweb
Twitter hashtag: #mlw.io

AUTORES

John Freddy Vega
@freddier

Christian Van Der Henst S.
@cvander

Líder y fundador de Cristalab, importante comu-
nidad de desarrollo web en habla hispana.
Certificado Profesional de Adobe. Gestor y
conferencista de múltiples eventos alrededor del
mundo relacionados con Internet, el desarrollo
web y los negocios en línea.

Ha sido docente en varias universidades de Lati-
noamerica. Ha fundado, dirigido y posicionado
múltiples proyectos web de comunidades, redes
de contenido, aplicaciones y emprendimientos.

Es asesor y consultor de varias empresas de hispa-
noamerica en temas relacionados con Internet y
nuevas tecnologías.

Líder y fundador de Maestros del Web, su mayor
objetivo es promover el uso de Internet y sus
tecnologías en todos los aspectos de la vida diaria

Es un nómada digital que viaja por el mundo
asesorando empresas sobre estrategias y desa-
rrollo de proyectos web mientras cultiva su
pasión por la gastronomía y el mundo del vino.

Ha dado cursos y conferencias sobre desarro-
llo web, comercio electrónico, marketing en
buscadores y optimización, medios digitales y
comunidades virtuales en: Argentina, Bolivia,
El Salvador, República Dominicana, Guatemala,
México, Chile, Panamá, Perú, España, Estados
Unidos y Uruguay.

Indice

1 | Sobre la guía .................................................................................................................2

2 | Autores ..........................................................................................................................3

3 | Prólogo .......................................................................................................................... 5

4 | Introducción y las nuevas etiquetas de HTML5 ........................................................ 7

5 | Soporte HTML5 en navegadores viejos ....................................................................13

6 | Nuevas capacidades de Javascript ............................................................................19

7 | Nuevas capacidades de CSS3 ................................................................................... 22

8 | El tag <video> ............................................................................................................26

9 | Como arrancar con HTML5 en diez minutos .......................................................... 35

10 | HTML5 en acción .......................................................................................................39

11 | Crea la web ................................................................................................................46

PRÓLOGO

¿Por qué es importante HTML5?

Hace años hablábamos de la Web 2.0. No se inventó nada nuevo y cuando Tim O’reilly acuñó el
término identificó un cambio en el mercado, otro tipo de internet que se adapta al cambio de los tiem-
pos y a muchos nuevos perfiles que habitan en el mundo digital.

Por suerte no fue sólo un cambio de dígitos y el marketing no fue suficiente para que se llenaran la boca
de Web 3.0 o Web semántica. Allí no se identificaba nada y la fórmula no funcionó del todo.

Por eso quiero hablarles de HTML5. La magia de esta unión de tecnologías agrupada en un solo término
no es inventar nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empu-
jando hacia una dirección y que identifican un cambio que ya sucedió en como debemos hacer la web
hoy mismo.

“HTML5 es el presente de la web y si no estás asimilando lo que está pasando
ya eres parte de la vieja generación de desarrolladores. Eso tendría que
tenerte preocupado.”

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks,
netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters
y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends,
backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos
que están reiventando mercados y generando tráfico e ingresos.

Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,
Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de
sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en
el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento
y es una de sus más fuertes apuestas de reclutamiento. Dije además que HTML5 tiene logo de super-
heroe y que venden camisetas para apoyar al movimiento?

Si crees que HTML sigue representando las siglas del Hypertext Markup Language no has entendido
nada. HTML5 es una época maravillosa de la web que tienes el privilegio de estar disfrutando. No es
tecnología, ni es tendencia. Es una época dorada. Disfrutala y embriagate de sus tags.

<



l

o
n
u
o
u
t
í
p
a
c

<

Introducción y las
nuevas etiquetas
de HTML5

8

Capítulo uno
Introducción y las nuevas etiquetas de HTML5

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un
termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5,
CSS3 y nuevas capacidades de Javascript.

La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación
de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar
esto, gracias a frameworks como jQuery,1 jQuery UI2, Sproutcore3, entre otros.

Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las
habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vecto-
riales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer
esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

Nuevas etiquetas de HTML5

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá
funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es
colocar este DOCTYPE4 antes de la etiqueta <html>:

<!DOCTYPE html>

Es un DOCTYPE mucho más simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y te permite
usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.

Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se
comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un
simple div o span.

1 http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/
2 http://jqueryui.com/
3 http://www.cristalab.com/blog/sproutcore-la-competencia-en-javascript-a-flex-y-flash-c58098l/
4 http://www.cristalab.com/tips/la-importancia-de-doctype-y-de-validar-xhtml-y-css-c57338l/
5 http://www.cristalab.com/tutoriales/tutorial-basico-de-xhtml-c143l/

9

<header>

Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin signifi-
cado semántico.

<hgroup>

Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.

En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

<nav>

Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.

<section>

Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.

<article>

Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside>

Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el

10

área de indicadores económicos.

<footer>

Este es obvio. Es el pie de página y todo lo que lo compone.

Atención <div> no está muerto:

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesi-
tes una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

Ejemplo de blog hecho con HTML5

<header>
<hgroup>
<h1>El blog de mlw.io</h1>
<h2>Este es el blog de Mejorando la web</h2>
</hgroup>
</header>
<nav>
Aquí va la botonera de navegación
</nav>
<section>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
<article>A