HTML5 y el Futuro de la WebIng. Eddie Malca VicenteCIP 123429emalca@iluminatic.comemalca@concytec.gob.peemalca@gmail.comwww.iluminatic.com@emalca

Qu es HTML5?Estndar abierto y accesibleElementos nuevosWeb SemnticaAPIs de desarrolloRetrocompatibleNueva filosofa de trabajoImpulsado por los grandes y pequeos

Qu es HTML5?

Trabaja sobreFirefox 3.5+Chrome 3.0+Safari 3.1+Opera 10.5+IE 9.0+ diceniPhoneiPod TouchiPadAndroid OSPero siempre es importante hacer pruebas de validacinhttp://html5test.com/

Tipo de DocumentoTipo de DocumentoLenguaje del Documento Codificacin del Documento Enlaces a CSS, Favicon y RSS

Estructura Mnima de un Documento Este es un ejemplo de HTML5 Este es el cuerpo de la pgina, donde ir todo el contenido.

Estructura Semntica

Antes

Ahora

Elementos Semnticos 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). 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 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. 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 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. 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 SemnticaHEADERHEADERNAVNAVARTICLEARTICLEVIDEOSECTIONSECTIONASIDEFOOTERFIGUREFIGURE

Controles de Formularios

Nuevos Controles de Formularios - InputTelephoneUrlEmailPasswordDatetimeDateMonthWeekNumberRangeColor

Nuevos Controles de FormulariosPuedes ver una relacin oficial del borrador del estndar en:

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

www.whatwg.org/specs/web-apps/current-work/multipage/

Nuevos Controles de Formularios

Nuevos Controles de Formularios

Controles Editables

Atributos de Controles EditablescontenteditableHace 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.

Audio y Video

Atributos de 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 IMPORTANTE A la fecha los navegadores comerciales slo soportan el formato de video Vorbis OGG y MP4.

Formato de - Antes

Formato de - AhoraCON HTML5

Frameworks para Videohttp://www.html5video.org/kaltura-html5/

http://sublimevideo.net/

Que ms puedes hacer con HTML5http://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 HTML5ALOHA

DREAMWEAVER CS5

MAQETTA

MACFLUX

BLUEGRIFFON

ZEN

.y otros ms

HTML5 y el Futuro de la Webwww.iluminatic.com@emalcaIng. Eddie Malca VicenteCIP 123429emalca@iluminatic.comemalca@concytec.gob.peemalca@gmail.com

*****************************