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.
DEFINICIÓN DE 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
ALGO DE HISTORIA

 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>
ETIQUETAS NUEVAS EN
HTML5

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

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

 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>
ETIQUETA 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 EL ENCABEZADO

 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 CODIFICACION DEL
DOCUMENTO

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> par
a organizar los
contenidos principales,
NUEVA ORGANIZACIÓN DEL
SITIO

<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.
INCORPORAR VIDEO

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

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.
VALIDACIÓN DE HTML5

HTML5

Más contenido relacionado

La actualidad más candente

Similar a HTML5

Más de Colegio Metropolitano

Último

HTML5