HTML 5

Rodolfo FinochiettiMVP ASP.NET/IISLagash Systems

¿Cuales son los desafios del desarrollo de aplicaciones

hoy?

Estandares

• El desarrollo y la evolución de la computación se baso en la adopción de estándares– De Hardware• Ejemplos: Arquitectura IBM-PC IA16, IA32

– De Software• Ejemplos: C++, La Web

¿Por que los estándares son importantes en el desarrollo de software?

Compatibilidad

Extensibilidad

Predictibilidad

Interoperabilidad

La Web

• Accedida por millones• En todos los lenguajes• Vital para el intercambio de información, el

entretenimientos, la educación, y el comercio

Aprovechar las capacidades de

dispositivo

HTML5

• Es una plataforma que provee interoperabilidad cross-browser y cross-plataform –Video

–Todos los dispositivos

–Privacidad, Identidad, Seguridad

Que es HTML 5

• HTML 5 es una nueva versión de diversas especificaciones, entre las que se encuentran:– HTML 4– XHTML 1– DOM Nivel 2 (DOM = Document Object Model)

Características de HTML 5

• Estructura: La mayoría de las webs tienen un formato común, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página.

• Etiquetas para contenido específico: Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc.

Características de HTML 5

• Canvas: es un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.

• Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la que se podrá trabajar en una página web por medio del cliente y a través de un API. Es algo así como las Cookies, pero pensadas para almacenar grandes cantidades de información, lo que permitirá la creación de aplicaciones web que funcionen sin necesidad de estar conectados a Internet.

Características de HTML 5

• Web Workers: son procesos que requieren tiempo de procesamiento por parte del navegador, se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la página.

• Aplicaciones Web Offline: Existirá otro API para el trabajo con aplicaciones web, que se podrán desarrollar de modo que funcionen sin estar conectados a Internet.

Características de HTML 5

• Geolocalización: Las páginas web se podrán localizar geográficamente por medio de un API que permita la Geolocalización.

• Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán incorporadas al HTML 5 por medio de un API.

• Fin de las etiquetas de presentación: La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS.

DEMO

Nuevos Elementos Estructurales

• section: Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezamiento.

• header: La cabecera de una página. No confundir con el elemento «head».

• footer: El final de la página.• nav: Una colección de links a otras páginas• article: Una entrada independiente en un

blog, revista, etc.

Nuevos Tags• aside: Es un bloque semántico que representa una nota, un consejo una

explicación….• figure: Se utilizará para representar una imagen• dialog: Se utilizará para representar una conversación entre varias

personas• time: Se utilizará para marcar un momento temporal en una historia• meter: Se utilizará para indicar ciertas medidas dependiendo de los

atributos• progress: Representará el estado de cierto proceso• video: Un video• audio: Un archivo de audio• details: Más detalles sobre alguna cosa• datagrid: Una tabla, una recopilación de datos formateados• menu: Un listado, un menú.

Nuevos Tags (VIDEO)

El elemento "Video". Sin lugar a dudas, la mejora más importante que incorpora HTML 5, y la que más revuelo está provocando entre los medios. El hecho de querer ver un vídeo y no poder hacerlo debido a que el plugin correspondiente no está instalado en el ordenador es una de las situaciones más frustrantes a las que se debe enfrentar un usuario en Internet. Incluso YouTube, ante la falta de Adobe Flash arroja un error similar. Vídeos de páginas enteras dejan de funcionar si Flash no está instalado, no se pueden ver trailerssin QuickTime, y cada vídeo que ha colocado Microsoft en línea demanda la presencia de Silverlight. El elemento de vídeo incorporado en HTML 5 es la forma definitiva de rebelión, ya que se pueden reproducir vídeos en Internet y embeberlos en páginas sin la necesidad de un plugin.

Canvas

• http://htmlfive.appspot.com/• http://www.muywindows.com/2010/04/08/m

icrosoft-se-emociona-con-la-aceleracion-html5-de-ie9

• http://html5demos.com/

Nuevos Tags

<article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure>

<footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output>

<progress> <rp> <rt> <ruby> <section> <summary> <time> <video>

Un blog antes de HTML5

Un blog con nuevos tags en HTML 5

Tags no soportados

<acronym> <applet> <basefont> <big><center> <dir> <font> <frame>

<frameset> <noframes> <s><strike> <u> <xmp>

<p><big><center><u><s>Lagash!

</s></u></center></big></p>

<p style="font-size:medium;text-align:center;text-decoration:underline line-through;">

Lagash!</p>

Como reemplazar los tags no soportados

Como reemplazar los tags no soportados

<basefont color="red" size="10pt">

<style>body{

font-size:10pt;color:red;

}</style>

Dividir responsabilidades

<audio>

<audio autoplay controls loop preload="auto"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="player.swf?file=song.mp3"> <a href="song.mp3">Descargar Canción</a></audio>

<audio>

<audio id="player" src=“sound.mp3"></audio><div><button onclick="document.getElementById('player').play()"> » Play</button><button onclick="document.getElementById('player').pause()"> » Pause</button><button onclick="document.getElementById('player').volume »+= 0.1">Volume Up</button><button onclick="document.getElementById('player').volume »-= 0.1">Volume Down</button></div>

<video>

<video controls width="360" height="240" poster="poster.jpg"><source src="video.mp4" type="video/mp4"><source src="video.ogv" type="video/ogg"><object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=video.mp4"><param name="movie" value="player.swf?

file=video.mp4"><a href="video.mp4">Descargar Video!</a></object>

</video>

Demos

• http://html5demos.com/

Otros Recursos

• http://visualstudiogallery.msdn.microsoft.com/es-ar/d771cbc8-d60a-40b0-a1d8-f19fc393127d (Intellisense VS 08/10)

• http://blogs.msdn.com/b/webdevtools/archive/2009/11/18/html-5-intellisense-and-validation-schema-for-visual-studio-2008-and-visual-web-developer.aspx (Como Instalar Intellisense)

• http://validator.w3.org/ (Validacion con doctype HTML5)

rodolfof@lagash.com http://twitter.com/rodolfof

http://shockbyte.net

¡GRACIAS!