Paso A Paso

Paso a paso
Haz tus primeros pinitos con HTML5

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Sumario
Paso 1. La estructura HTML5 bsica
Paso 2. Organizacin del espacio del site
Paso 3. Organizacin de los textos
Paso 4. Dibuja con mayor sencillez
Paso 5. Qu echan hoy en la Web?
Paso 6. La hora de los formularios
Paso 7. Juega con los contenidos
Paso 8. Funciones avanzadas
Paso 9. CSS3: Hojas de estilo en cascada
Paso 10. Pensando en el futuro
Compatibilidad de los navegadores
Gua de referencia rpida: Etiquetas HTML5
HTML5 es la quinta versin del lenguaje HTML, regulado por el World Wide
Web Consortium (3WC). Desde sus inicios en 1991, ha sufrido varias
revisiones, pero ninguna lo suficientemente profunda como para asegurar la
convergencia en el desarrollo web.
HTML5 apunta ms alto que nunca y, desde que en 2004 se constituy el Web Hypertext
Application Technology Working Group para favorecer su desarrollo, sus integrantes y
colaboradores trabajan con las expectativas de ofrecernos una versin prctica y adaptada a
las necesidades reales de la Web del siglo XXI. Actualmente se halla en fase borrador, pero ya
podemos encontrar numerosos recursos y algunas pginas desarrolladas con este estndar.
Es el momento de pensar en la migracin? Cuando menos, es la hora de conocer la prxima
realidad.
El actual borrador de HTML5 define un nico lenguaje que puede ser desarrollado en
sintaxisHTML o XML. En este artculo, nos centraremos fundamentalmente en el desarrollo de
pginas en HTML, aunque con alguna referencia a elementos XML. Tambin es importante
apuntar que es compatible con documentos HTML4 y XHTML1, con la excepcin de algunas
caractersticas especficas del primero, como las instrucciones de procesamiento o la
desaparicin de los marcos.
A lo largo de este prctico aplicaremos las novedades de HTML5 al proceso de creacin de
una pgina web personal bsica. Os recordamos que, hasta que el lenguaje se consolide,
podis experimentar problemas de compatibilidad con los navegadores. Si queris conocer de
antemano qu caractersticas soporta vuestro navegador favorito, os recomendamos que
visitis la pginawww.html5test.com. En PC Actual hemos utilizado las ltimas versiones
de Mozilla Firefox yGoogle Chrome para visualizar los ejemplos de cdigo que os
proponemos.
NIVEL:AVANZADO
Paso 1. La estructura HTML5 bsica

A la hora de enfocar un proyecto de desarrollo web, uno de los momentos cruciales es
enfrentarse al fichero en blanco. A pesar de que los frameworks nos ahorran mucho trabajo
sucio, no est de ms volver de vez en cuando a los orgenes y aplicar tcnicas de
supervivencia del desarrollador frente al cdigo puro y duro. Por tanto, abriremos nuestro bloc
de notas e iremos experimentando con las novedades de HTML5.
Es til recordar que es insensible a maysculas y minsculas, aunque las buenas prcticas
del programador no aconsejan su mezcla indiscriminada. La extensin de nuestro fichero
para esta quinta versin seguir siendo .htm o .html.
La primera novedad es que HTML5 nos lo pone ms fcil desde la primera lnea: el
nuevodoctype queda reducido a <!doctype html>. Puede incluso ser memorizado, algo
impensable en versiones anteriores. En cuanto al resto, la estructura general de nuestro
documento no difiere mucho respecto a lo que ya conocamos: utilizaremos las
etiquetas <head> y <body> para la cabecera y el cuerpo, respectivamente.
Paso 2. Organizacin del espacio del site

El siguiente paso para crear nuestra web es definir su aspecto general. Veremos qu etiquetas
debemos utilizar para organizar la divisin del espacio de nuestra pgina. En versiones
anteriores de HTML, nos veamos obligados a recurrir al uso y abuso de la etiqueta <div> y
sus atributos, idy class, para llevar a cabo esta tarea. HTML5 da un paso ms hacia la web
semntica definiendo una serie de elementos para delimitar nuestras secciones.
A la hora de construir una web tpica utilizaremos la etiqueta <header> para la informacin de
la cabecera (logo, texto introductorio...), <nav> para los mens de
navegacin, <section> y<article> para organizar los contenidos principales, <aside> para los
contenidos secundarios, como anotaciones laterales o espacios publicitarios, y la
etiqueta <footer> para incluir la informacin a pie de web (ao, autor, informacin legal, etc.).
Es importante resaltar que podemos utilizar varias veces estas etiquetas en una pgina. Por
ejemplo, podemos definir una etiqueta <header> que contenga una imagen con
nuestrobanner y otra como encabezamiento de una seccin.
Crea en tu documento la divisin que desees y sustituye las antiguas etiquetas <div> por
estas. No se trata de un capricho. Adems de aportar claridad al cdigo, las etiquetas
semnticas cumplen una importante funcin: simplifican el anlisis web que realizan los
motores de bsqueda.
Paso 3. Organizacin de los textos

Una vez que tenemos clara la estructura, pasamos a crear los contenidos. Comenzaremos por
los textos. HTML5 aporta etiquetas nuevas para organizarlos de manera ms clara. Con
la etiqueta semntica <article>, ahora es posible insertar bloques independientes de
contenido, como artculos en un peridico digital o posts en un blog o foro.
Por ejemplo, si tomamos como modelo el sitio web de PC Actual, definiramos una
etiqueta<article> para cada entrada en su seccin de noticias. Y, si queremos asociarlas
como un grupo de contenidos de la misma temtica, podemos utilizar <section>.
Otra novedad es <hgroup>, que permite agrupar un conjunto de elementos de encabezado

en el rango de niveles <h1-h6>. Esto que en principio puede parecer trivial no lo es:
la asociacin y jerarquizacin de informacin facilitar la interpretacin de los motores de
bsqueda.
Por ltimo, tambin contaremos con mayores facilidades de cara a la redaccin de textos.
Gracias a MathML, podemos usar cmodamentelenguaje matemtico, smbolos y caracteres
en otros idiomas e, incluso, lenguajes escritos de derecha a izquierda, como el rabe o el
hebreo.
Paso 4. Dibuja con mayor sencillez

Una de las novedades estrella de HTML5 es el dibujo dinmico y renderizado de imgenes
en una pgina web sin la necesidad de utilizar plug-ins. Hasta ahora, se empleaba
generalmenteFlash, Silverlight o grandes cdigos de JavaScript, entre otras posibilidades.
Para ello, HTML5 nos presenta la etiqueta <canvas>.
Su funcin es crear un lienzo de una determinada altura y anchura en el que podemos
materializar imgenes y animaciones en 2D y 3D a travs de funciones JavaScript. Para
empezar a practicar os dejamos un cdigo de ejemplo que reproduce un dibujo sencillo en
2D. Para verlo en tu navegador copia el siguiente script en la cabecera <head>:
<script>
function drawPicture(){
var canvas = document.getElementById(ejemplo);
var context = canvas.getContext(2d);
context.fillStyle = rgb(255,255,0);
context.fillRect (125, 25, 150, 100);
context.fillStyle = rgba(255,0,0, 0.6);
context.beginPath();
context.arc(125,100,50,0,Math.PI*2,true);
context.fill();
}
</script>
Para visualizar las formas geomtricas del ejemplo, inserta en el cuerpo <body> la etiqueta
<canvas>:
<body onload=drawPicture();>
<canvas id=ejemplo width=300 height=200>
</canvas>
</body>
Y ya est. Habrs definido un lienzo de 300 x 200 puntos en el que hemos dibujado, en primer
lugar, un rectngulo amarillo, y, despus, un crculo rojo. Experimentando e investigando un
poco podemos realizar figuras cada vez ms complejas. En la Red, ya existen varios juegos
programados en HTML5... y algunos son verdaderas obras de arte!
Paso 5. Qu echan hoy en la Web?

Otras de las grandes novedades de la versin 5 de HTML son las etiquetas
<audio> y <video>, que nos permiten incrustar audio y vdeo de forma nativa. Ambas
soportan los mismos atributos. Contamos con los modificadores
booleanos (on/off) autobuffer y autoplay para cargar y reproducir, respectivamente, de
manera automtica un archivo, y el atributo loop para reiniciar la ejecucin.
En cuanto al aspecto del reproductor, gracias a height y width podemos variar sus
dimensiones y, a travs de controls, mostrar o no los controles de reproduccin. Por ltimo,
el atributo type nos permite especificar el tipo de fichero (.mp3, .oog,.mp4, .ogv, etc.)
y src la direccin del archivo a cargar. En el caso de que queramos incrustar contenido
externo, podemos hacer uso de otra nueva etiqueta:<embed>.
Veamos un ejemplo de aplicacin: queremos construir un reproductor como el de la figura (ver
imagen) para reproducir el fichero de vdeo pelicula.ogv. Basta incluir en nuestro documento
la siguiente lnea de cdigo: <video src=pelicula.ogv type=video/ogv controls/>. Si
tienes problemas de visualizacin, consulta la compatibilidad de tu navegador para ese
formato.
Paso 6. La hora de los formularios

Son los grandes olvidados en las revisiones anteriores de HTML, pero presentan en esta
versin muchas novedades. Seguimos utilizando el elemento input para la recogida de datos,
pero se ampla sustancialmente su nmero de atributos y sus posibles valores, porque no solo
de textos alfanumricos vive el internauta.
El clsico atributo type ahora permite insertar una direccin web (<input type=url>), un
telfono (<input type=tel>), introducir una o mltiples direcciones de correo electrnico
(<input type=email>), una contrasea (<input type=password>), una caja de bsqueda
(<input type=search>) o una fecha (<input type=date>), entre otros.
Poder distinguir entre varios tipos de datos nos permitir darles un tratamiento diferente.
Podremos comprobar de manera sencilla si una direccin de correo electrnico es vlida o si
el nmero de telfono introducido tiene los nueve nmeros en principio requeridos.
Adems de todas las posibilidades de type, contamos con otros interesantes atributos,
comoautocomplete, para que el navegador rellene un campo de manera
automtica; placeholder, para mostrar un texto de ejemplo que desaparecer cuando el
usuario comience a rellenar el campo en cuestin; o autofocus, para dirigir la atencin hacia
un punto determinado del formulario.
Paso 7. Juega con los contenidos

Los navegadores permitirn de manera nativa y sin necesidad de libreras externas controlar
las acciones Drag & Drop (arrastrar y soltar) sobre elementos que se puedan arrastrar como,
por ejemplo, una imagen. Esto nos permitir, entre otras cosas, dar la opcin al usuario de
nuestra web de reordenar los elementos para que la personalice a su gusto.
Por otra parte, gracias a la etiqueta <figure> y a su elemento hijo <figcaption>, a partir de
ahora, podremos agrupar fcilmente elementos, como un vdeo o foto y su epgrafe.
Simplemente escribiremos <figure><img src=imagen.jpg><figcaption> Epgrafe.
</figcaption> </figure>.
Por ltimo, con el atributo contentEditable, asignable a diversas etiquetas HTML5, podemos
generar contenido editable. Especificando el valor true se activar el modo editable del
elemento en cuestin y pasar a ser modificable por el usuario. Prueba a aadirlo en la
etiqueta de un elemento de una lista <li contentEditable=true> o un pie de foto como en
el ejemplo (Ver imagen). Tambin tenemos la opcin de aplicar esta propiedad a todo el
documento con elatributo designMode.
Paso 8. Funciones avanzadas

En cuanto a funcionalidades un poco ms complejas, HTML5 nos ofrece, por ejemplo,
elalmacenamiento de datos del lado del cliente. El concepto es similar al relacionado con
lascookies, pero con algunas ventajas: este estndar nos permitir almacenar datos de mayor
volumen y no ser imprescindible el envo de la informacin al servidor, evitando el
consiguiente consumo de ancho de banda y tiempo. En esta tesitura presenta tres formas de
almacenamiento:local, sesin o bases de datos.
Otra novedad es la posibilidad de crear aplicaciones web o una versin de nuestro sitio que
funcionen off-line. Para ello crearemos un archivo manifest que incluiremos en el
documento<html manifest=codigo.manifest> en el que debemos indicar nuestras
preferencias sobre ladisponibilidad off-line.
Por ltimo, tambin ser viable localizar geogrficamente al visitante con un alto grado de
precisin. Para respetar la privacidad, la implementacin deber proveer un mecanismo que
recoja el permiso explcito del usuario para acceder a los datos relativos a su ubicacin.
Paso 9. CSS3: Hojas de estilo en cascada

CSS3 es la nueva versin del lenguaje CSS (Cascading Style Sheets) para especificar los
detalles de presentacin de los documentos HTML5. Hasta ahora tenamos que recurrir al uso
de imgenes y otros trucos para dotar a nuestros sitios web de efectos no muy
complicados, como sombras, degradados y esquinas redondeadas, lo que dificultaba la
compatibilidad con los navegadores.
Con las nuevas opciones de CSS3, aplicadas al ejemplo, podremos especificar directamente
estos efectos y otros muchos en nuestra hoja de estilo. Con border-color, borderimage,border-radius y box-shadow es posible generar bordes de diferentes tipos.
Tambin podemos jugar con el nivel de transparencia de nuestras imgenes con opacity, y
contaremos con una gama ms amplia de definiciones del color: HSL, HSLA, RGBA y CMYK.
Incluso podremos establecer varias imgenes de fondo para un mismo elemento con multiple
backgrounds.
En cuanto a los textos, con CSS3 ser sencillo dotarlos de efectos como profundidad, reflejos
o resplandores con text-shadow, hasta ahora reservados para programas como Photoshop y
similares. Tampoco nos preocupar si la longitud de nuestros textos es excesiva, porque se
podr indicar el corte de palabras cuando se haya agotado el espacio de la lnea con wordwrap.
Pero esto es solo un pequeo resumen. Echad un vistazo a la
direccin www.w3.org/Style/CSSsi queris ampliar esta informacin. CSS3 tambin se
encuentra en fase borrador y las especificaciones del W3C no son definitivas, por lo que quiz
contemos con alguna sorpresa de ltima hora.
Paso 10. Pensando en el futuro

HTML5 an guarda algn as bajo la manga. Aunque actualmente es pronto para hablar de
soporte por parte de los navegadores, est en proceso de definicin de algunos elementos
que podramos calificar incluso de revolucionarios.
No queremos dejar pasar la oportunidad de mencionar la etiqueta <device>, que nos
permitiracceder a recursos del visitante, como una cmara web o una impresora. Las
opciones van ms all y tambin ser posible, por ejemplo, grabar en un fichero el audio
recogido a travs de un micrfono.
Las posibilidades de interaccin entre la pgina y el usuario son enormes. Actualmente se
debate acerca de qu dispositivos incluir, y se presentan como ideas los multimedia, los
sistemas de archivos, los dispositivos RS-232 (como los puertos serie) y los USB. De
momento, y a la espera de la versin de HTML5 definitiva, seguiremos experimentando con
las nuevas etiquetas y asistiendo a la carrera por la compatibilidad de los navegadores.
Compatibilidad de los navegadores

En PC Actual os ofrecimos una comparativa de navegadores de Internet que contemplaba la
compatibilidad con HTML5. Aqu tenis un breve e interesante resumen: Mozilla
Firefox(75,33%), Google Chrome 8 (72,33%), Opera 11 (62%), Safari 5 (56,57%), Maxthon
3(56,33%) e Internet Explorer 9 (33,67%). Si bien es cierto que esta clasificacin puede
orientarnos a priori, si realmente quieres experimentar con HTML5 lo ms recomendable es
que te hagas con las ltimas versiones de toda la coleccin.
Todos los navegadores se actualizan continuamente, pero ninguno ha demostrado ser el lder
indiscutible. Para ser ms concretos, en el momento de escribir estas lneas todos siguen
presentando grandes deficiencias en cuanto a la variedad de soporte de formatos de audio y
vdeo. Si para tus pruebas multimedia utilizas ficheros .ogg u .ogv tendrs ms posibilidades
de acertar.
En lo que concierne a la integracin de los formularios, Chrome 8 sigue siendo el rey. Y en
cuanto a las caractersticas de almacenamiento local y las aplicaciones off-line, segn
elW3C todos han hecho los deberes.
Por ltimo, cada navegador soporta un conjunto diferente de propiedades CSS3, por lo que
depender de las necesidades concretas del desarrollador el decantarse por uno u otro, si
bienFirefox y Safari se perfilan como los favoritos.
Gua de referencia rpida: Etiquetas HTML5
La siguiente tabla resume los cambios en el conjunto de las etiquetas que introduce el nuevo
estndar respecto a la versin HTML4.01. Para acceder a la lista detallada y totalmente
actualizada, as como a otros recursos, visita peridicamente la
direccinwww.w3schools.com/html5/html5_reference.asp.
Etiquetas nuevas de HTML5
<article>
<mark>
<aside>
<meter>
<audio>
<nav>
<canvas>
<output>
<command>
<progress>
<datalist>
<rp>
<details>
<rt>
<embed>
<ruby>
<figcaption>
<section>
<figure>
<source>
<footer>
<summary>
<header>
<time>
<hgroup>
<video>
<keygen>
<wbr>

Paso A Paso

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Paso A Paso

Cargado por

Copyright:

Formatos disponibles

Paso a paso

Haz tus primeros pinitos con HTML5

Paso 1. La estructura HTML5 bsica

Paso 2. Organizacin del espacio del site

Paso 3. Organizacin de los textos

Otra novedad es <hgroup>, que permite agrupar un conjunto de elementos de encabezado

Paso 4. Dibuja con mayor sencillez

Paso 5. Qu echan hoy en la Web?

Paso 6. La hora de los formularios

Paso 7. Juega con los contenidos

Paso 8. Funciones avanzadas

Paso 9. CSS3: Hojas de estilo en cascada

Paso 10. Pensando en el futuro

Compatibilidad de los navegadores

Gua de referencia rpida: Etiquetas HTML5

Etiquetas nuevas de HTML5

También podría gustarte