1. Cristian Porras – cporras@global-tics.com
William García – wgarcia@global-tics.com
Comunidad Universitaria de Software Libre, Cusol UIS

2. Contenido
 HTML y su historia
 Aplicaciones Ricas de Internet y
HTML
 Inconvenientes de la dependencia en
tecnologías privativas/propietarias
 HTML5
 Novedades
 Ejemplos
 Enlaces

3. HTML y su historia
 HTML es un estándar para la
estructuración y presentación de
contenidos en la World Wide Web.
 Permite dotar de formato
enriquecido documentos de texto.
 HTML se pensó
como un lenguaje
sencillo.

4. HTML y su historia
 A medida que ha ido avanzando la
web la implementación inicial de
HTML se fue quedando corta.
 Con esta evolución gradual se han
agregado etiquetas poco a poco, por
ejemplo <font>
 Debido a la guerra entre
navegadores se ha tenido especial
énfasis en el seguimiento de HTML
como estándar

5. HTML y su historia
 1991 HTML
 1994 HTML 2
 1996 CSS 1 + JavaScript
 1997 HTML 4
 1998 CSS 2
 2000 XHTML 1
 2002 Maquetación web sin tablas
 2005 AJAX
 2009 HTML 5

6. Aplicaciones Ricas de Internet (RIAs) y
HTML
 El desarrollo de Aplicaciones
Enriquecidas para Internet,
tradicionalmente se ha apoyado en el uso
de tecnologías privativas no
estandarizadas que debilitan la
neutralidad e interoperabilidad de la red.
 La tecnología más usada es Adobe Flash,
que fue creada para suplir las falencias de
la actual implementación de
HTML/XHTML.
 Otras tecnologías usadas son Java,
ActiveX y Silverlight.

7. Inconvenientes de la dependencia en
tecnologías privativas/propietarias
 Su naturaleza cerrada, que no responde a
una entidad neutral como por ejemplo el
W3C
 Problemas de rendimiento por su
implementación en algunas plataformas.
 La necesidad de instalar plug-ins o
extensiones de terceros, con posibles
riesgos de seguridad.
 Poca usabilidad.
 No son estándares.

8. HTML5
HTML5 ~= HTML + CSS + JavaScript APIs
 El objetivo principal de esta
nueva revisión es reducir la
necesidad de usar complementos
y tecnologías propietarias en la
web.
 El desarrollo de este estándar es
regulado por el consorcio W3C
(World Wide Web Consortium).

9. HTML5
 La web 1.0 se basó en el formato de
sus contenidos.
 La web 2.0 se basa en la experiencia
del usuario. Separa presentación de
contenido.
 La web 3.0 buscará dotar de sentido
y significado a los contenidos.

10. HTML5
 La web 2.0 y el uso de divs

11. HTML5
 La web 3.0 intenta dar sentido al contenido

12. Novedades en HTML5
 Define un solo lenguaje llamado HTML5 el
cual puede ser escrito en sintaxis HTML y
en sintaxis XML.
 Define los modelos detallados de
procesamiento para fomentar las
implementaciones interoperables.
 Mejora el etiquetado en los documentos.
 Introduce etiquetas y APIs para
paradigmas emergentes, tales como el de
las Aplicaciones Enriquecidas para la web.

13. Novedades en HTML5
Elementos Eliminados
 Acronym  Frameset
 Applet  Isindex
 Basefont  Noframes
 Big  Noscript
 Center  S
 Dir  Strike
 Font  Tt
 frame  u

14. Novedades en HTML5
Elementos nuevos
 Article
 Aside
 Dialog
 Figure  Audio
 Footer
 Header  Video
 Nav
 Canvas
 Section
 Details
 Datagrid
 Datalist

15. Estado actual de implementación
Según tests realizados en http://www.html5test.com/
●Firefox 3.6.10 139/300
●Firefox 4beta6 204/300
●Chromium 6.0.472.59 217/300
●Chromium 7beta 231/300
●Opera 10.62 159/300
●Internet Explorer 8 27/300
●Internet Explorer 9beta 96/300
●Safari 5.0.2 165/300

16. Ejemplos
 Canvas
 http://www.chromeexperiments.com/detail/ball-pool/
 http://www.chromeexperiments.com/detail/gravity/
 http://www.chromeexperiments.com/detail/monster/
 http://www.chromeexperiments.com/detail/sketchpad/
 http://www.zynaps.com/jslab.xml?id=envmap

17. Ejemplos
 Audio y Video
 http://people.mozilla.com/~prouget/demos/Dyn


18. Enlaces
 http://dev.w3.org/html5/spec/spec.html
 Actual Borrador de las especificaciones del
estándar.
 http://dev.w3.org/html5/html-design-principles/
 Principios del diseño de HTML5
 http://html5demos.com/
 Demostraciones y ejemplos

19. Enlaces
 http://www.canvasdemos.com/
 Demostraciones del elemento Canvas.
 http://slides.html5rocks.com/
 Presentación que implementa algunas
novedades de HTML5

20. Preguntas

21. ¡Gracias!
Cristian Porras – cporras@global-tics.com
William García – wgarcia@global-tics.com
Comunidad Universitaria de Software Libre, Cusol
UIS
Global TICs S.A.S.
 Esta presentación se encuentra bajo la licencia
Creative Commos Atribución – Compartir
igual: Puede ser distribuida, copiada y exhibida
por terceros dando créditos a los autores
originales. Se permiten obras derivadas que
tienen que estar bajo los mismos términos de
licencia que el trabajo original.