HTML5

ING. Juan Carlos Snchez Torres

AGENDA

Evolucin del HTML Qu es HTML5 Tipo de Documento Estructura Semntica Elementos Semnticos Controles de Formularios
Inputs Editables Video

Ejemplos

Introduccin

HTML fue creado por Tim Berners Lee Tim Berners Lee desarroll un novedoso sistema de distribucin de informacin basado en pginas independientes, llamadas pginas web con posibilidad de hipertexto Era el nacimiento del World Wide web (de ahora en adelante WWW) HTML era el lenguaje usado para crear las pginas individuales

Surgimiento de la W3C
D i ve r s a s e m p r e s a s s e d i e r o n c u e n t a d e l p o t e n c i a l q u e representaba y empezaron a comercializar programas, posteriormente llamados navegadores. Estos navegadores eran capaces de interpretar el cdigo HTML para presentar la informacin de las pginas.

Cada una de las empresas que elaboraban los navegadores propona su propia interpretacin del lenguaje y programaban sus aplicaciones para que fuesen fieles a esa interpretacin. E s t o c a u s a b a ve r d a d e r o s q u e b r a d e r o s d e c a b e z a a l o s programadores de webs ya que si preparaba su pgina para que funcionase con un navegador no funcionaba con otro.

Surgimiento de la W3C

Para solucionar este desorden se cre un organismo, el World Wide Web Consortium (de ahora en adelante W3C), que se encargara de estandarizar todos los temas relacionados con el WWW y por supuesto el lenguaje HTML entraba en sus objetivos.

Estndar HTML 2.0

El primer estndar serio que vio la luz fue el HTML 2.0

Este estndar pretenda contentar a todos los navegadores existentes y en un principio lo consigui
Este estndar inclua: Texto normal y algunos pocos estilos fsicos y lgicos, pero no se poda variar ni el tamao ni el color. Tambin inclua alguna etiqueta de prrafos como <P> o <BR> pero sin ningn atributo. Seis niveles de encabezados.

Formularios bsicos. Enlaces (tambin llamados links). Imgenes.

Estndar HTML 2.0

Muy pronto las principales empresas que haban creado navegadores, como Netscape Navigator y ms tarde Internet explorer, empezaron a inventarse nuevas etiquetas HTML. Que slo seran vlidas si se usaba su navegador. El desorden surgi de nuevo.

Estndar HTML 3.2

El W3C se apresur en publicar un nuevo estndar,
HTML 3.0

Introduca muchas etiquetas nuevas, y algunas de

dudosa utilidad Pero debido a que era excesivamente extenso y ambicioso, los navegadores slo utilizaban una pequea parte del nuevo estndar, lo que produca an mayor confusin y por lo que acab finalmente siendo abandonado.

Poco tiempo despus apareci una revisin de este

estndar el HTML 3.2 que es el que rige actualmente

Estndar HTML 3.2

En este estndar se incluyeron:

Nuevos elementos para introducir en la cabecera como <SCRIPT> para incluir cdigo de JavaScript o VBScript y otros como <STYLE> , <META>, <BASE > y <LINK> Nuevos atributos para la etiqueta BODY para poner color o imgenes de fondo y para cambiar el color del texto y links Nuevos atributos para la mayora de las etiquetas existentes. La posibilidad de cambiar el tamao y color del texto con la etiqueta <FONT>. Y por ltimo, y probablemente la ms importante, la posibilidad de usar tablas

Estndar HTML 3.2

Sin embargo no todas las extensiones que haban creado los fabricantes de navegadores fueron introducidas en el estndar. Algunas de ellas muy extendidas, como por ejemplo los frames (explicados ms adelante) se dejaron fuera, con lo que no se consigui satisfacer a todo el mundo.

Estndar HTML 4.0

Haban problemas de compatibilidades. W3C hizo un gran esfuerzo para reunir a las principales compaas y crear un nuevo estndar que todas se comprometan a cumplir: HTML 4.0 Este estndar incluye muchas novedades:
Los frames. Las hojas de estilo La inclusin de scripts en pginas web <Q>... </Q> <ACRONYM>... </ACRONYM> <INS>... </INS> y <DEL>... </DEL> <COLGROUP>... </COLGROUP> <FIELDSET>... </FIELDSET> <LABEL>... </LABEL> <BUTTON>... </BUTTON>

Estndar HTML 4.0

Caractersticas:

Publicar documentos online con encabezados, textos, tablas, listas, fotos, etc. Recuperar informacin online via links de hypertextos. Disear formularios para transacciones con servicios remotos, para buscar informacin, hacer reservaciones, ordenar productos, etc.

Incluir spread-sheets, video clips, sound clips y otras aplicaciones relacionadas con los documentos
Distingue mejor entre estructura y presentacin Mejores formularios, claves de acceso, agrupamiento de controles, agrupa las opciones de seleccin. Posibilidad de marcar (tags) la descripcin de un texto de un objeto incluido (con el elemento objeto)

Estndar HTML 4.0

Caracteristicas :

Mecanismo (map) para que un autor pueda integrar imgenes con links de texto. Soporte para atributos ttulo (title) y lenguaje (lang) en todos los elementos, abreviatura (abbr) y acrnimo (acronym).
Un rango mayor de objetivos (target media) para usar con hojas de estilo. M e j o r e s t a b l a s i n c l u ye n d o n o m b r e s , g r u p o s d e columnas y mecanismos no visuales de interpretacin. Mayor control sobre la estructura y diseo (layout).

Despliega los datos de la tabla de forma incremental.

Estndar XHTML 1.0

Es una variante de HTML que tiene las mismas etiquetas que HTML 4.0.
En concreto es idntica a la revisin HTML 4.0.1 pero con una serie de restricciones de sintaxis para ser compatible con XML Para un navegador no hay diferencias entre usar HTML o XHTML. Pero este ltimo puede ser til para poder emplear herramientas de tratamiento de XML al crear una pgina web.

Estndar XHTML 1.0

Las principales normas que debemos cumplir para que una pgina HTML sea compatible con XHTML (y por tanto compatible con XML) son:
La primera lnea del archivo debe ser:

<?xml version="1.0"?> Todas las etiquetas deben tener instruccin de inicio e instruccin de fin. <img src=logo.jpg></img> o <img src=logo.jpg/> Todos los valores de los atributos deben ir entrecomillados. <font face=arial> No se admiten atributos sin valor <hr nosheade=nosheade> <hr nosheade> No seria correcto

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+ IE 9.0+ dicen... iPhone iPod Touch iPad Android OS.
Pero siempre es importante hacer pruebas de validacin

http://html5test.com/

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>

Tipo de 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

Estructura Semntica - 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 element o section repres en t a 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.

Controles de Formularios - Inputs

Telephone Url Email

Password
Datetime Date Month Week Number Range Color

Controles de Formularios - Inputs

Puedes ver una relacin oficial del borrador del estndar en:

http://dev.w3.org/html5/spec/

www.whatwg.org/specs/web-apps/currentwork/multipage/

Controles Editables

contenteditable Hace elementos HTML editable. Puede tener 3 valores: true , false inherit. designmode Hace editable un documento completo elemento. Puede tomar 2 valores: ON OFF.
designmode Habilita la correccin ortogrfica. Funciona en Firefox y hay que descargar los diccionarios. Puede tomar 2 valores: True o False.

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.

Atributos de <video>

I M P O R TA N T E A l a f e c h a l o s n a v e g a d o r e s
comerciales slo soportan el formato de video Vorbis OGG y MP4.

Atributos de <video> - Antes

<object classid=clsid:d27cdb6e-ae6d-11cf-96b8444553540000width=425height=344 codebase=http://download.macromedia.com/pub/shockwave/c abs/flash/swflash.cab#version=6,0,40,0> <param name=allowFullScreen value=true/> <param name=allowscriptaccessvalue=always/><param name=src value=http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&/> <param name=allowfullscreen value=true /> <embed type=application/x-shockwave-flash11width=425 height=344 src=http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1& allowscriptaccess=always allowfullscreen=true> </embed> </object>

Atributos de <video> Ahora

CON HTML5 <video width="640" height="360" src="http://www.youtube.com/demo/google_m ain.mp4" controls autobuffer> </video>

Ing. Yamil Quiones Nieto InYaml Quiones Niet 35 / 237

Frameworks para Videos

http://www.html5video.org/kaltura-html5/ http://www.kaltura.org/apis/html5lib/kplayerexamples/Player_Themable.html http://sublimevideo.net/

HTML5 Ejemplos 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/