Conceptos Fundamentales sobre HTML5:
- Definición
- Historia
- Etiquetas Nuevas
- Etiquetas Eliminadas
- Doctype
- Etiqueta HTML
- Encabezado
- La Codificación
- Nueva Organización del Sitio
- Incorporar Video
- Otras Características
- Validación de HTML5
- Soporte De Los Navegadores
- Referencias
2. 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.
3. 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.
4. 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
5. 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.
6. 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.
7. 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.
10. 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>
11. 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>
12. 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>
13. 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">
14. 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">
15. 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,
16. <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.).
17. 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.
18. 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'>
19. 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
20. 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.
21. 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.
22. 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/)
23. 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.
24. 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.
25. 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