Introducción a HTML

1. HTML 5
Rodolfo Finochietti
MVP ASP.NET/IIS
Lagash Systems

2. ¿Cuales son los desafios
del desarrollo de
aplicaciones hoy?

6. 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

7. ¿Por que los estándares son importantes en el
desarrollo de software?
Compatibilidad
Extensibilidad
Predictibilidad
Interoperabilidad

8. La Web
• Accedida por millones
• En todos los lenguajes
• Vital para el intercambio de información, el
entretenimientos, la educación, y el comercio

9. Aprovechar las
capacidades de
dispositivo

10. HTML5
• Es una plataforma que provee
interoperabilidad cross-browser y
cross-plataform
–Video
–Todos los dispositivos
–Privacidad, Identidad, Seguridad

11. 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)

12. 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.

13. 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.

14. 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.

15. 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.

16. DEMO

17. 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.

18. 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ú.

19. 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.

20. 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/

21. 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>

22. Un blog antes de HTML5

23. Un blog con nuevos tags en HTML 5

24. Tags no soportados
<acronym> <applet> <basefont> <big>
<center> <dir> <font> <frame>
<frameset> <noframes> <s>
<strike> <u> <xmp>

25. Como reemplazar los tags no soportados
<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>

26. Como reemplazar los tags no soportados
<basefont color="red" size="10pt">
<style>
body{
font-size:10pt;
color:red;
}
</style>

27. Dividir responsabilidades

28. <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>

29. <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>

30. <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>

31. Demos
• http://html5demos.com/

32. 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/2
009/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)

33. rodolfof@lagash.com
http://twitter.com/rodolfof
http://shockbyte.net
¡GRACIAS!