Este documento proporciona una introducción a HTML5, describiendo qué es y qué no es, las mejoras realizadas en HTML5 como nuevos elementos semánticos como <section>, <aside>, <article>, <header>, <nav> y <footer>. También describe nuevos elementos como <video>, <audio>, <canvas> y <svg>, así como mejoras en los inputs. Explica cómo empezar a usar HTML5 con compatibilidad en navegadores antiguos usando Modernizr, HTML5 Enabling Script e IE-CSS3.

1. <SMACADEMY>
Tecnólogo. Juan David Henao Londoño

2. ¿QUE ES HTML5?
HTML5 (HyperText Markup
Language, versión 5) es la
quinta revisión de del HTML
donde se añade una nueva
semántica.
Es la actualización de
HTML, el lenguaje en el que
es creada la web. HTML5
también es un termino de
marketing para agrupar las
nuevas tecnologías de
desarrollo de aplicaciones
web: HTML5, CSS3 y nuevas
capacidades de Javascript.

3. ¿QUE NO ES HTML5?
1. El salvador de los
programadores
2. La barita mágica de hacer sitios
para dispositivos móviles
3. La competencia de flash |
Herramienta para hacer
animaciones.
Hacer sitio web en HTML5
que se vea en cualquier
navegador, dispositivo, anim
ado, en 3D y que gane
premios por 5.000.000

4. ¿QUE SE MEJORÓ EN HTML5?
• Evitar el uso abusivo de elementos
DIV para estructurar una web en
bloques.
• Elementos que perfeccionan la
estructuración estableciendo qué
es cada sección, eliminando así
DIV innecesarios.
• Que la semántica de la estructura
web sea más coherente y fácil de
entender por otras personas y los
navegadores
• Los navegadores podrán darle más
importancia al sitio según la
sección, facilitándole la tarea a los
buscadores, así como cualquier
otra aplicación que interprete
sitios web.

5. ELEMENTOS DE HTML5
Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglas
siguen siendo usadas) y te permite usar todas las habilidades de
HTML5 sin que nada de lo que ya tienes programado deje de
funcionar.
Las principales etiquetas HTML5 nuevas no tienen una
representación especial en pantalla. Todas se comportan como un
<div> o un <span>. Pero cada una tiene un significado semántico
superior a un simple div o span.

6. <SECTION></SECTION>
Se utiliza para representar una sección “general” dentro de un
documento o aplicación, como un capítulo de un libro.
Puede contener subsecciones y si lo acompañamos de h1-h6
podemos estructurar mejor toda la página creando jerarquías del
contenido, algo mu favorable para el buen posicionamiento web.

7. <ASIDE></ASIDE>
Representa una sección de la página que abarca un contenido
sustancialmente relacionado con el contenido que lo rodea, por lo
que se le puede considerar un contenido independiente.
Este elemento puede utilizarse para efectos tipográficos, barras
laterales, elementos publicitarios, para grupos de elementos de la
navegación, u otro contenido que se considere separado del
contenido principal de la página.

8. <ARTICLE></ARTICLE>
Representa un componente de una página que consiste en una
composición autónoma en un documento, página, aplicación, o
sitio web con la intención de que pueda ser reutilizado y
repetido.
Podría utilizarse en los artículos de los foros, una revista o el
artículo de periódico, una entrada de un blog, un comentario
escrito por un usuario, un widget interactivo o gadget, o
cualquier otro artículo independiente de contenido.

9. <HEADER></HEADER> ,
<HGROUP>
Elemento <header> representa un grupo de artículos
introductorios o de navegación.
Muchos headers necesitan múltiples títulos, como un blog que
tiene un titulo y un tagline explicando el blog. <hgroup> permite
colocar un h1, h2 y h3 dentro del header sin afectar el
SEO, permitiendo usar otro h1 en el sitio.

10. <NAV></NAV> |
<FOOTER></FOOTER>
El elemento <nav> representa una sección de una página que es
un link a otras páginas o a partes dentro de la página: una sección
con links de navegación.
El elemento <footer> representa el pié de una sección, con
información acerca de la página/sección que poco tiene que ver
con el contenido de la página, como el autor, el copyright o el
año.

12. <INPUT *>
El elemento input adquiere gran
relevancia.
Input ya existía como la etiqueta para
insertar cajas de texto y botones. Ahora
es más poderosa, con la capacidad de
insertar cajas tipo "email" que se
autovalidan, calendarios tipo
"date", sliders, números, entre otras.

13. OTROS ELEMENTOS IMPORTANTES
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero
cada navegador soporta codecs diferentes de video, lo que hace
necesario recodificar un video en múltiples codecs.
<audio>
Lo mismo que video, pero sin video. Puede usar múltiples
formatos, en especial mp3, pero también depende del navegador.

14. OTROS ELEMENTOS IMPOTRANTES
<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API
de dibujo entero para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y
animaciones vectoriales al estilo de Flash. Todo basado en el
estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

15. OJO <DIV> NO ESTÁ MUERTO
Estas nuevas etiquetas no significan que
ya no se use <div>. Div siempre debe
usarse cuando necesites una caja con
objetivos de diseño gráfico o cualquier
cosa que no tenga significado
semántico. Sólo usa las etiquetas
semánticas de HTML5 donde sean
necesarias.

16. ¿Cómo puedo empezar a utilizar
HTML5 si existen navegadores
antiguos que no lo soportan?

17. ¿? LA PREGUNTA EN SÍ SE HA
FORMULADO DE FORMA ERRÓNEA
HTML5 no es una cosa grande como un todo, sino una colección de
elementos individuales, por consiguiente lo que sí se podrá será
detectar si los navegadores soportan cada elemento por separado.

18. ¿CÓMO SE RENDERIZA UNA PÁGINA?
Cuando los navegadores realizan el render de
una página, construyen un “Modelo de
Objeto de Documento” (Document Object
Model - DOM), una colección de objetos que
representan los elementos del HTML en la
página. Cada elemento - <p>, <div>, <span> -
es representado en el DOM por un objeto
diferente.

19. 1 MODERNIZR, una biblioteca para
detectar HTML5.
Modernizr es una librería de JavaScript con licencia MIT de código
abierto que detecta si son compatibles muchos elementos para HTML5 y
CSS3. Dicha librería se irá actualizando y para utilizarla solo hay que
incluir en <head><script> de tu página.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Intro HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

20. ¿CÓMO FUNCIONA?
Modernizr se ejecuta automáticamente, no es necesario llamar a
ninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea un
objeto global llamado Modernizr, que contiene un set de propiedades
Boleanas para cada elemento que detecta. Por ejemplo si su
navegador soporta elementos canvas, la propiedad de la librería
modernizr.canvas será “true”. Si tu navegador no soporta los
elementos canvas, la propiedad Modernizr.canvas será “false”.
if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento

21. 2 HTML5 Enabling Script
Permite usar las etiquetas semánticas dentro de IE6, 7 y 8 como
si fueran divs normales, estilizables por CSS. Sin este script, las
etiquetas son ignoradas en IE y es imposible agregarles diseño a
ellas o cualquier elemento dentro de ellas.
Para utilizarlo debes incluir esta línea en el HEAD de tu
documento.
<!--[if lt IE 9]>
<script
src=”http://HTML5shim.googlecode.com/svn/trunk/HTML5.js”>
</script>
<![endif]-->

22. 3 IE-CSS3
Usando arcanas técnicas (DirectX y VML), este raro script
permite usar cosas como bordes redondeados y sombras
sobre objetos de CSS3 en IE6, 7 y 8. Será magia negra?
http://fetchak.com/ie-css3/
Ver Ejemplo:

23. ¿QUÉ PUEDO USAR AHORA MISMO?
El mejor sitio que puede responderte eso es CanIUSe.com1. Donde
encontrarás una lista de todas las capacidades de HTML5, CSS3 y
el nuevo Javascript, junto a una tabla de compatibilidad. Sin
embargo, no te asustes demasiado si ves muchos cuadros rojos.
Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5
Enabling Script. Gracias a ellos, muchos de esos rojos se
convierten en verdes.
CanIUSe.com

24. ¿Como arrancar con
HTML5 en diez minutos?

25. EXISTEN ATAJOS?
No se puede entender HTML5 como una sola
tecnología, recordemos que es una estrategia de marketing para
promover una serie de tecnologías complementarias. Asimilar
todas las posibilidades e introducirte requiere tiempo, aunque por
suerte existen atajos.
http://es.html5boilerplate.com/

26. ¿QUIÉNES ESTÁN UTILIZANDO HTML5?
• Twitter.com
• m.twitter.com
• vimeo.com/m/
• m.youtube.com
• gmail.com
• scribd.com
• facebook.com

27. ¿QUÉ VEREMOS EN L APARTE II?
• <VIDEO>
• <CANVAS>
• <AUDIO>
• <SVG>
• NUEVAS CAPACIDADES DE CSS3

28. BIBLIOGRAFÍA
• http://theproc.es/
• http://www.cristalab.com
• FrontDays

29. </GRACIAS>
Tecnólogo. Juan David Henao Londoño