Todo sobre HTML5

Andrés Felipe Montoya Ríos
re.vu/AndresMontoya
@montoya118

HTML5 es una combinación de nuevas
etiquetas de markup (lenguaje)
HTML, propiedades CSS3, JavaScript y algunas
tecnologías complementarias de apoyo, pero
que técnicamente son independientes de la
propia especificación HTML5.

La familia HTML5 incluye las nuevas etiquetas y
tecnologías como:
◦ CSS3
◦ Geolocalización
◦ Almacenamiento Web (Web Storage)
◦ Web Workers
◦ Web Sockets

Todas ellas suponen una actualización de gran
potencia al conjunto de herramientas ya
existente, y con ellas se pueden crear páginas
web más sofisticadas y útiles.

 HTML4 se dio en 1998

 Los diseñadores y desarrolladores lo han
utilizado por muchos años, combinándola
con CSS y JavaScript para mayor funcionalidad

 Continuando con la evolución de la Web, se
comenzó con XHTML1.0 el cual era más
estricto y más valorado por los
desarrolladores

 En 2004 se creó el grupo WHATWG (Web
Hypertext Application Technology Working
Group) integrado por representantes de
fabricantes de navegadores y desarrolladores
web

Su misión consistía en crear una especificación
de lenguaje HTML mejor, orientada a crear un
nuevo tipo de aplicaciones web pero
manteniendo la compatibilidad con las
versiones en activo de los navegadores
existentes.

 Durante unos dos años y medio el W3C y el
grupo WHATWG trabajaron en paralelo y de
manera independiente

 En 2006, Tim Berners-Lee, creador de la
World Wide Web y fundador del W3C, anunció
que el W3C y WHATWG trabajarían juntos en
la elaboración del estándar.

 Como resultado de ello, se abandonó el
desarrollo de XHTML 2.0 y la especificación
HTML 4.0 se reformó con el nombre HTML5.

 No obstante, conviene recordar que HTML5
empezó siendo Web Applications 1.0, y eso
nos da una pista muy clara para entender
para qué fue diseñado realmente HTML5.

 Gracias a que el W3C tomó el liderazgo para
el desarrollo de HTML5, ahora los
desarrolladores tenemos la garantía de que
HTML5 será realmente un estándar gratuito y
con las suficientes garantías de no incurrir en
problemas de propiedad intelectual.

 <article>  <datalist>  <footer>
 <mark>  <rp>  <summary>
 <aside>  <details>  <header>
 <meter>  <rt>  <time>
 <audio>  <embed>  <hgroup>
 <nav>  <ruby>  <video>
 <canvas>  <figcaption>  <keygen>
 <output>  <section>  <wbr>
 <command>  <figure>
 <progress>  <source>

 <acronym>  <noframes>
 <applet>  <strike>
 <basefont>  <tt>
 <big>  <u>
 <center>  <xmp>
 <dir>
 <font>
 <frame>
 <frameset>

 El DOCTYPE, también llamado DTD, sirve para indicar al
navegador a qué reglas de escritura obedece el código fuente de
la página Html o Xhtml.

 En ausencia de un doctype el navegador no sabe según qué
reglas debe procesar la página. Se conforma con acogerse a
reglas genéricas para renderizar a toda costa la página Html.

 Doctype Antes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">

 Ahora:
<!DOCTYPE html>

 La etiqueta <html> indica al navegador que se trata de un
documento Html.

 La etiqueta <html> puede incluir el atributo lang="es“.
Especifica que el documento está en lengua española.

 Esta información es muy valiosa para los motores de
búsqueda como Google y para los programas de síntesis
de voz usados por personas con dificultades visuales.

 Quedaría algo así:
<!DOCTYPE html>
<html lang="es">
...
</html>

 En la etiqueta Script cambia de la siguiente manera:

<script type="text/javascript">
….
</script>
ó
<script type="text/javascript" src="archivo.js"></script>

Por:

<script>
…
</script>
Ó
<script src="archivo"></script>

 En la etiqueta Style, usada para los css, quedaría de la
siguiente manera:

<style type="text/css">
...
</style>
Ó
<link rel="stylesheet" type="text/css" href="archivo.css">

Por:

<style>
...
</style>
Ó
<link rel="stylesheet" href="archivo.css">

 El juego de caracteres determina la forma en
que los caracteres de un alfabeto se
convierten en bytes en un archivo informático
(y viceversa).

Con HTML 4.0:
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">

Con HTML 5.0:
<meta charset="iso-8859-1">

La etiqueta <header> es
para la información de la
cabecera (logo, texto
introductorio...)

<nav> para los menús de
navegación

<section> y<article> para
organizar los contenidos
principales,

<aside> para los
contenidos
secundarios, como
anotaciones laterales
o espacios
publicitarios

<footer> para incluir la
información a pie de
web
(año, autor, informaci
ón legal, etc.).

 Antes de la llegada de HTML5 dependíamos
del uso de complementos instalables, como
Flash, QuickTime o Silverlight para poder
mostrar contenidos de vídeo.

 Con HTML5 se resuelve esta necesidad ya que
especifica un elemento HTML llamado
<video> que funciona de manera nativa en el
navegador y se integra con Javascript.

 Algunos atributos de la etiqueta:

 Autoplay: sirve para que el video comience
automáticamente.
 Controls: activa los controles de reproduccion del
video.
 Poster: permite poner una imagen antes de
reproducir el video. Una vez comience, la imagen
desaparece.
 Width, Height: permite definir un tamaño para el
video

 Ejemplo:
 <video src='videos/BigBuck.mp4' controls
poster='poster320.png' width='320' height='180'>

 Existen otras características importantes, que
pueden consultar en las referencias que se
encuentran al final, las cuales son mas
complejas. Estas son:
 Drag&Drop
 Canvas
 Geolocalización

Las ventajas de un código fuente perfecto y por tanto de la
validación son:

 Comprensión y verificación en profundidad de Html5 por parte
de programadores iniciados (y avanzados).

 Asegurar que la página se mostrará siempre de forma correcta
en la mayoría de los navegadores. Una página inválida puede
llevar a los navegadores a interpretarla de forma muy distinta.

 Demostración de su propia capacidad y profesionalidad a la hora
de realizar un código de calidad, conforme a los estándares de
Html5.

 Los programas de síntesis vocal y otras ayudas técnicas dirigidas
a personas con problemas de accesibilidad se basan en un
código válido a la hora de procesar las páginas de la red.

 Los validadores Html5 (en línea) disponibles son:

 El validador de W3C:

W3C presenta un validador de código (validator.w3c.org). Lo
cual es garantía de calidad. No obstante la validación de
Html5 se anuncia todavía en un estado experimental.

Destaquemos:

 Que está en inglés.
 Que ofrece la validación de un archivo a partir de su
dirección http, un archivo que esté alojado en su
ordenador o código que insertemos en una zona de texto.
 Que es muy potente.
 Que sus notas y explicaciones son muy técnicas o a veces
incluso sibilinas.
 Que es "la" referencia de los profesionales.

 El validador de W3Québec

W3Québec es un organismo sin ánimo de lucro cuya labor
consiste en promover el conjunto de normas, estándares
abiertos y buenas prácticas de la Web y del mundo
multimedia.

Proporciona un validador:
 En francés.
 Con la posibilidad de validar un archivo a partir de su
dirección http, un archivo que esté alojado en su
ordenador o código que insertemos en una zona de texto.
 Las advertencias y errores proporcionados están en
francés.
 Le faltan explicaciones más explícitas para corregir el
código enviado.
 Se trata de una traducción al francés del sitio Web de W3C.
No existe una versión española a día de hoy.
 El validador de W3Québec (www.w3qc.org/validateur/)

 El validador validator.nu

El sitio Web validator.nu proporciona, también en
estado experimental, un validador de Html5
(html5.validator.nu/).

Fue el primero en proporcionar un validador de Html5.

Se puede subrayar:
 Que está en inglés.
 Que su interfaz es muy sencilla.
 Que ofrece la posibilidad de validar un archivo a
partir de su dirección http, un archivo que esté
alojado en su ordenador o código que insertemos en
una zona de texto.
 Que parece de excelente calidad.

 Si quieres saber que tan eficiente es el
navegador que usas, puedes ingresar a la
siguiente dirección:

 http://www.html5test.com/

 Ésta página califica al navegador desde el
cual estés accediendo.

 http://msdn.microsoft.com/es-
es/ie/hh749019

 Libro: HTML5 y CSS3 Domine los estándares
de las aplicaciones Web, Luc VAN LANCKER

 PC ACTUAL:
http://www.pcactual.com/articulo/zona_prac
tica/paso_a_paso/paso_a_paso_internet/968
4/haz_tus_primeros_pinitos_con_html5.html?
utm_source=dlvr.it&utm_medium=twitter

Todo sobre HTML5

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Todo sobre HTML5 (20)

Más de Andrés Felipe Montoya Ríos (17)

Último (20)

Todo sobre HTML5