Html5

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>
 <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>

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

 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

Html5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (9)

Similar a Html5

Similar a Html5 (20)

Último

Último (7)

Html5