Documentos de Académico
Documentos de Profesional
Documentos de Cultura
HTML 5
HTML 5
@emalca
www.iluminatic.com
Qu es HTML5?
Elementos nuevos
Web Semntica
APIs de desarrollo
Retrocompatible
Qu es HTML5?
Trabaja sobre
Firefox 3.5+
Chrome 3.0+
Safari 3.1+
Opera 10.5+
IE 9.0+ dicen
http://html5test.com/
iPhone
iPod Touch
iPad
Android OS
Tipo de Documento
Tipo de Documento
<!DOCTYPE html>
Estructura Semntica
Antes
Ahora
Elementos Semnticos
<header> El elemento header debe utilizarse para marcar la cabecera
de una pgina (contiene el logotipo del sitio, una imagen, un cuadro de
bsqueda etc).
El elemento header puede estar anidado en otras secciones de la pgina
(es decir que no solo se utiliza para la cabecera de la pgina).
<nav> El elemento nav representa una parte de una pgina que enlaza
a otras pginas o partes dentro de la pgina. Es una seccin con enlaces
de navegacin.
Elementos Semnticos
<section> El elemento section representa un documento genrico o de
la seccin de aplicacin. Una seccin, en este contexto, es una
agrupacin temtica de los contenidos. Puede ser un captulo, una
seccin de un captulo o bsicamente cualquier cosa que incluya su
propio encabezado.
Una pgina de inicio de un sitio Web puede ser dividida en secciones
para una introduccin, noticias, informacin de contacto etc.
Elementos Semnticos
<aside> El elemento aside representa una nota, un consejo, una
explicacin. Esta rea son representados a menudo como barras
laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atraccin, como las
comillas tipogrficas o barras laterales, para la publicidad, por grupos de
elementos de navegacin, y por otro contenido que se considera por
separado del contenido principal de la pgina.
Distribucin Semntica
SECTION
HEADER
ARTICLE
NAV
FIGURE
ARTICLE
NAV
VIDEO
FIGURE
HEADER
ASIDE
FOOTER
SECTION
Controles de Formularios
Telephone
Url
Password
Datetime
Date
Month
Week
Number
Range
Color
Controles Editables
Audio y Video
Atributos de <video>
Formato de <video>
http://www.html5video.org/kaltura-html5/
http://sublimevideo.net/
@emalca
www.iluminatic.com