Html 5 presente y futuro de la web
•
4 j'aime•2,190 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Html 5 presente y futuro de la web
Similaire à Html 5 presente y futuro de la web (20)
Plus de Juan Eladio Sánchez Rosas
Plus de Juan Eladio Sánchez Rosas (20)
Dernier
Dernier (20)
Html 5 presente y futuro de la web
- 1. HTML5 Presente y futuro de la Web Juan Eladio Sánchez Rosas Mozilla Perú
- 3. HTML • HyperText Markup Language Lenguaje reconocido universalmente y que permite publicar información de forma global
- 4. CSS • Cascading Style Sheets Lenguaje creado para controlar el aspecto de los documentos en HTML y XHTML
- 5. JavaScript Lenguaje de programación interpretado que se utiliza principalmente para crear páginas web dinámicas.
- 7. Los primeros estándares Web • 1991: HTML (Tags) • 1994: HTML 2 • 1996: CSS 1 + JavaScript
- 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. ¿Todo esto es nuevo para ti?
- 10. librosweb.es
- 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. Esto aún es trabajo en progreso
- 14. Ahora sí, qué trae HTML5
- 15. Menos atributos innecesarios <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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. 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. 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. Atributos ARIA • Accessible Rich Internet Applications Accesibilidad de contenido web dinámico para personas con discapacidades
- 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. Nuevos tipos de formularios <input type=”url”> <input type=”color”> ...
- 21. Validaciones
- 22. Audio y Video <audio src="sound.mp3" controls></audio> <video src="movie.mp4" autoplay controls></video>
- 23. Estándares de video • H.264/AVC • OGG/Theora • WebM (Youtube VP8)
- 24. Vid.ly
- 25. Youtube + HTML5
- 26. HTML5 Canvas
- 27. ¿Eso es todo? ¡No, HTML5 ahora es más!
- 28. HTML5 ahora también incluye CSS 3 • Selectores • Espacios de nombres • Colores • Fondos • Transiciones • Bordes • Sombras • Fuentes
- 29. HTML5 ahora también incluye Geolocalización Permite acceder a la ubicación física del usuario. (y mostrar contenido personalizado)
- 30. HTML5 ahora también es Web Workers Ejecutar scripts en segundo plano sin bloquear el navegador
- 31. HTML5 también es DOM Storage Expande capacidades de cookies Almacenar mayor cantidad de información de usuario que puedan ser usadas por el navegador
- 32. Y mucho, mucho más ...
- 33. ¿Cómo lo pruebo?
- 34. Navegadores “Modernos” • Firefox • Chrome • Safari • Opera • ¿Internet Explorer 9?
- 35. Dispositivos móviles • Apple iPhone / iPod / iPad • Android OS
- 36. ¿Cómo estoy seguro de que mi navegador soporta HTML5?
- 37. HTML5 Test
- 38. El caso Navegadores antiguos • Internet Explorer 9 tiene soporte mínimo de HTML5 • ¿Otras versiones? <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
- 39. Y si no es suficiente: Modernizr
- 40. HTML5 Readiness
- 41. ¿Qué hace Mozilla al respecto?
- 42. Firefox 7 (Estable), 9 (Aurora) firefox.com/channel Firefox Portable (ejecutable desde USB) ir.pe/firefoxportable
- 43. Firefox Mobile Lleva la experiencia de Firefox a todas partes
- 44. Dispositivos móviles soportados • Meego • Android OS
- 46. Dev Derby
- 47. Mozilla Perú
- 48. Mozilla Campus Day* Promover el desarrollo de Internet y la web en nuestro país Para estudiantes y docentes de universidades e institutos peruanos Conferencias y talleres sobre tecnologías de vanguardia en Internet mozilla.pe/mozilla-campus-day
- 49. HTML 5 Presente 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
Notes de l'éditeur
- 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