HTML 5

HTML5 y el Futuro de la Web
habulahe@yahoo.es
Qu es HTML5?
Estndar abierto y accesible
Elementos nuevos
Web Semntica
APIs de desarrollo
Retrocompatible
Nueva filosofa de trabajo
Impulsado por los grandes y pequeos
Qu es HTML5?
Trabaja sobre
Firefox 3.5+
Chrome 3.0+
Safari 3.1+
Opera 10.5+
Pero siempre es importante hacer

pruebas de validacin
IE 9.0+ dicen
http://html5test.com/
iPhone
iPod Touch
iPad
Android OS
Tipo de Documento
Tipo de Documento
<!DOCTYPE html>
Lenguaje del Documento

<html lang="ES">
Codificacin del Documento

<meta charset="UTF-8">
Enlaces a CSS, Favicon y RSS

<link rel="stylesheet" href="estilos.css">
<script src=jquery.js></script>
Estructura Mnima de un Documento

<!DOCTYPE html>
<html lang="ES">
<head>
<title>Este es un ejemplo de HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
Este es el cuerpo de la pgina, donde ir todo el
contenido.
</body>
</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.
No todos los grupos de enlaces en una pgina deben ser agrupados en

un elemento nav. nicamente las secciones que consisten en bloques de
navegacin ms importantes son adecuados para el elemento 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.
<footer> El elemento footer se utiliza para indicar el pi de la pgina o

de una seccin. Un pie de pgina contiene informacin general acerca de
su seccin el autor, enlaces a documentos relacionados, datos de
derechos de autor 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.
<article> El elemento article representa una entrada independiente en

un blog, revista, peridico etc.
Cuando se anidan los elementos article, los artculos internos estn

relacionados con el contenido del artculo exterior. Por ejemplo, una
entrada de blog en un sitio que acepta comentarios, el elemento article
principal agrupa el artculo propiamente dicho y otro bloque article
anidado con los comentarios de los usuario.
Distribucin Semntica
SECTION
HEADER
ARTICLE
NAV
FIGURE
ARTICLE
NAV
VIDEO
FIGURE
HEADER
ASIDE
FOOTER
SECTION
Controles de Formularios
Nuevos Controles de Formularios - Input
Telephone
Url
Email
Password
Datetime
Date
Month
Week
Number
Range
Color
Nuevos Controles de Formularios

El elementoInputha sido ampliado y ahora permite
todos estos tipos de datos:
Datetime, Datetime-local, Date, Month,

Week, Time, para que indicar una fecha/hora.
Numberpara que el usuario indique un
nmero.
Rangepara indicar un rango entre dos
nmeros.
Emailpara indicar un correo electrnico.
URLpara indicar unadireccinweb.
Searchpara indicar una bsqueda.
Autofocus para ubicar el cursor

Placeholder para indicar el
contenido de input.
Required para indicar un campo
obligatorio.
Min Max para indicar el rango de
valores.
Ejemplo
Audio y Video
Atributos de <video>
autoplay Para que el video se reproduzca automticamente. Puede

tener valor TRUE o FALSE.
controls Para que se muestre barra de control debajo del video.
height Altura del video.
width Ancho del video.
loop El video se reproduce de manera repetitiva.
poster Imagen si el video no est disponible.
preload Controla si el video es precargado. Puede tener 3 valores:

none, metadata auto.
src Indica la url del video.
Formato de <video>
IMPORTANTE A la fecha los navegadores comerciales slo

soportan el formato de video Vorbis OGG y MP4.
Formato de <video> - Antes

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425"
height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c
ab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param
name="allowscriptaccess"
value="always"
/>
<param
name="src"
value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"
/>
<param
name="allowfullscreen" value="true" /> <embed type="application/x-shockwaveflash"
width="425"
height="344"
src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"
allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Formato de <video> - Ahora

CON HTML5
<video width="640" height="360"
src="http://www.youtube.com/demo/google_main.mp4"
controls autobuffer>
</video>
Ejemplo
Frameworks para Video
http://www.html5video.org/kaltura-html5/
http://sublimevideo.net/
Que ms puedes hacer con HTML5

http://www.thewildernessdowntown.com/
http://www.jolicloud.com/product
http://wordmark.it/
http://www.phoboslab.org/ztype/
http://www.nikebetterworld.com/
http://www.klowdz.com/
http://www.effectgames.com/demos/canvascycle/
Y muchas cosas ms..te animas???
Algunos editores HTML5

ALOHA
DREAMWEAVER CS5
MAQETTA
MACFLUX
BLUEGRIFFON
ZEN
.y otros ms

HTML 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 5

Uploaded by

Copyright:

Available Formats

HTML5 y el Futuro de la Web

Estndar abierto y accesible

Nueva filosofa de trabajo

Impulsado por los grandes y pequeos

Pero siempre es importante hacer

Lenguaje del Documento

Codificacin del Documento

Enlaces a CSS, Favicon y RSS

Estructura Mnima de un Documento

No todos los grupos de enlaces en una pgina deben ser agrupados en

<footer> El elemento footer se utiliza para indicar el pi de la pgina o

<article> El elemento article representa una entrada independiente en

Cuando se anidan los elementos article, los artculos internos estn

Nuevos Controles de Formularios - Input

Nuevos Controles de Formularios

Datetime, Datetime-local, Date, Month,

Emailpara indicar un correo electrnico.

URLpara indicar unadireccinweb.

Searchpara indicar una bsqueda.

Nuevos Controles de Formularios

Autofocus para ubicar el cursor

Nuevos Controles de Formularios

autoplay Para que el video se reproduzca automticamente. Puede

controls Para que se muestre barra de control debajo del video.

height Altura del video.

width Ancho del video.

loop El video se reproduce de manera repetitiva.

poster Imagen si el video no est disponible.

preload Controla si el video es precargado. Puede tener 3 valores:

src Indica la url del video.

IMPORTANTE A la fecha los navegadores comerciales slo

Formato de <video> - Antes

Formato de <video> - Ahora

Frameworks para Video

Que ms puedes hacer con HTML5

Algunos editores HTML5

You might also like