Html 5 presente y futuro de la web

4,419 views

Published on

HTML 5 es el próximo estándar de sitios web en Internet. La ponencia parte de la historia de Internet para llegar a las implementaciones actuales en los más modernos navegadores de Internet.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,419
On SlideShare
0
From Embeds
0
Number of Embeds
353
Actions
Shares
0
Downloads
131
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • HTML5, features of which initially began arriving in Gecko 1.8.1, is the newest version of the HTML standard. It offers new features to provide not only rich media support but also enhanced support for creating web applications that can interact with the user, his or her local data, and servers more easily and effectively.
  • Cookies / Aplicaciones Offline
  • Html 5 presente y futuro de la web

    1. 1. HTML5Presente yfuturo de laWebJuan Eladio Sánchez RosasMozilla Perú
    2. 2. Hablemos deestándares web
    3. 3. HTML• HyperText Markup LanguageLenguaje reconocido universalmente y que permite publicar información de forma global
    4. 4. CSS• Cascading Style SheetsLenguaje creado para controlar el aspecto de los documentos en HTML y XHTML
    5. 5. JavaScript Lenguaje de programación interpretado que se utiliza principalmente para crear páginas web dinámicas.
    6. 6. Un poco dehistoria
    7. 7. Los primeros estándares Web• 1991: HTML (Tags)• 1994: HTML 2• 1996: CSS 1 + JavaScript
    8. 8. Lo que utilizamos ahora• 1997: HTML 4 <p>Esto es HTML• 1998: CSS 2• 2000: XHTML 1 <p>Esto es XHTML</p>• 2002: Diseño web sin tablas <div id=”contenedor1”>• 2005: AJAX
    9. 9. ¿Todo esto es nuevopara ti?
    10. 10. librosweb.es
    11. 11. Entonces,¿qué es HTML5?
    12. 12. HTML 5• Nuevo estándar para el desarrollo de páginas web• Iniciado por WHATWG• En desarrollo por World Wide Web Consortium (W3C)• Ya existen implementaciones preliminares
    13. 13. Esto aún es trabajo en progreso
    14. 14. Ahora sí, qué traeHTML5
    15. 15. Menos atributos innecesarios<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script type="text/javascript" src="micodigo.js"></script><link rel="stylesheet" href="path/to/stylesheet.css"type="text/css" />
    16. 16. Nuevas etiquetas semánticas<section> <article> <header> <h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> <article> .. </article></section>
    17. 17. Nuevas relaciones en enlaces<link rel="alternate" type="application/rss+xml"href="http://myblog.com/feed" /><link rel="icon" href="/favicon.ico" /><link rel="pingback" href="http://myblog.com/xmlrpc.php"><link rel="prefetch" href="http://myblog.com/main.php">...
    18. 18. Atributos ARIA• Accessible Rich Internet Applications Accesibilidad de contenido web dinámico para personas con discapacidades
    19. 19. Atributos ARIA<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1" > <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> </ul> </li></ul>
    20. 20. Nuevos tipos de formularios<input type=”url”> <input type=”color”> ...
    21. 21. Validaciones
    22. 22. Audio y Video<audio src="sound.mp3" controls></audio><video src="movie.mp4" autoplay controls></video>
    23. 23. Estándares de video• H.264/AVC• OGG/Theora• WebM (Youtube VP8)
    24. 24. Vid.ly
    25. 25. Youtube + HTML5
    26. 26. HTML5Canvas
    27. 27. ¿Eso es todo?¡No, HTML5 ahora esmás!
    28. 28. HTML5 ahora también incluyeCSS 3• Selectores• Espacios de nombres• Colores• Fondos• Transiciones• Bordes• Sombras• Fuentes
    29. 29. HTML5 ahora también incluyeGeolocalización Permite acceder a la ubicación física del usuario. (y mostrar contenido personalizado)
    30. 30. HTML5 ahora también esWeb WorkersEjecutar scripts ensegundo planosin bloquearel navegador
    31. 31. HTML5 también esDOM StorageExpande capacidades de cookiesAlmacenar mayor cantidad de información deusuario que puedan ser usadas por el navegador
    32. 32. Y mucho, muchomás ...
    33. 33. ¿Cómo lo pruebo?
    34. 34. Navegadores “Modernos”• Firefox• Chrome• Safari• Opera• ¿Internet Explorer 9?
    35. 35. Dispositivos móviles• Apple iPhone / iPod / iPad• Android OS
    36. 36. ¿Cómo estoy segurode que mi navegadorsoporta HTML5?
    37. 37. HTML5 Test
    38. 38. El caso Navegadores antiguos • Internet Explorer 9 tiene soporte mínimo de HTML5 • ¿Otras versiones?<!--[if lt IE 9]><scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    39. 39. Y si no es suficiente: Modernizr
    40. 40. HTML5 Readiness
    41. 41. ¿Qué hace Mozillaal respecto?
    42. 42. Firefox 7 (Estable), 9 (Aurora) firefox.com/channelFirefox Portable (ejecutable desde USB) ir.pe/firefoxportable
    43. 43. Firefox MobileLleva la experiencia deFirefox a todas partes
    44. 44. Dispositivos móvilessoportados• Meego• Android OS
    45. 45. Mozilla Developer Network
    46. 46. Dev Derby
    47. 47. Mozilla Perú
    48. 48. Mozilla Campus Day*Promover el desarrollo de Internet y la web en nuestro país Para estudiantes y docentes de universidades e institutos peruanosConferencias y talleres sobretecnologías de vanguardia en Internet mozilla.pe/mozilla-campus-day
    49. 49. HTML 5Presente y futuro de la Web Mozilla Perú mozilla.pe www.facebook.com/mozillaperu twitter.com/mozillaperu Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe blogs.antartec.com/opensource slideshare.net/juaneladio

    ×