HTML5 y los desafíos del desarrollo web de HOY
•
5 recomendaciones•2,305 vistas
HTML5 es la respuesta de ingenieros y especialistas de empresas y organizaciones tecnológicas dedicadas a la web, quienes propusieron un estándar acorde a los nuevos tiempos y necesidades. Hoy en día, HTML5 está en vías de convertirse en un estándar oficial y es la punta del iceberg de un conjunto de tecnologías de web abierta destinadas a revolucionar la forma en que se construyen sitios y aplicaciones web.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (14)
Similar a HTML5 y los desafíos del desarrollo web de HOY
Similar a HTML5 y los desafíos del desarrollo web de HOY (20)
Más de Juan Eladio Sánchez Rosas
Más de Juan Eladio Sánchez Rosas (20)
Último
Último (14)
HTML5 y los desafíos del desarrollo web de HOY
- 1. HTML5 y los desafíos del desarrollo web de HOY Juan Eladio Sánchez Rosas
- 4. ¿Cómo se construían “páginas web”?
- 5. Los 90s: HTML, Frames, GIFs www2.warnerbros.com/spacejam/movie/jam.htm
- 6. Lo que “usamos” desde 2000 ● HTML 4 / XHTML 1 ● CSS 1 / 2 ● JavaScript secure.flickr.com/photos/sh1mmer/2487028198/
- 7. Todo combinado ● Diseño web SIN TABLAS ● AJAX secure.flickr.com/photos/luc/255444239/
- 8. ¿Todo esto es nuevo para ti? secure.flickr.com/photos/lejoe/4815687662/
- 10. Ahora si, ¿qué es HTML5?
- 12. Tecnologías HTML5 Semantics Offline & Storage Device Access Connectivity secure.flickr.com/photos/othree/5041486112/
- 13. Tecnologías HTML5 Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling secure.flickr.com/photos/othree/5041486112/
- 14. ¿Quiénes están usando HTML5?
- 16. developers.facebook.com/html5/ touch.facebook.com/MozillaPeru
- 21. De vuelta a los pilares
- 22. HTML5: Semantics ● Nuevas etiquetas y atributos ● Microformatos y microdatos
- 24. HTML5: Semantics: Nuevas etiquetas <header> <hgroup> <h1>Título de página</h1> <h2>Subtítulo</h2> </hgroup> </header> <nav> <ul>Opción de navegación ... </ul> </nav>
- 25. 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" />
- 27. HTML5: Semantics: Forms Soporte wufoo.com/html5/
- 29. HTML5: Offline & Storage ● Local Storage ● Indexed DB ● File API
- 30. Local Storage ● Para almacenar grandes cantidades de datos en el lado del Cliente (navegador). ● Usos: ● Descargar información usada recurrentemente ● Almacenar la interfaz de un sitio web
- 32. Indexed DB ● Para almacenar datos estructurados en llaves y valores. ● NO es una base de datos relacional ● Es un almacén de objetos, pero con funcionalidades de búsqueda y transacciones.
- 33. HTML5: Device Access ● Geolocalización ● Micrófonos y cámaras web
- 34. Geolocation API ● Un sitio te pregunta si quieres compartir tu ubicación ● Recopila información sobre puntos de acceso inalámbricos cercanos y la IP de tu PC ● Envía información a Google Location Services, quien intenta determinar tu ubicación
- 36. HTML5: Connectivity ● Web Sockets ● Server-Sent Events
- 37. Web Sockets ● Una técnica de conexión ● Forma estándar de conexión Web: ● Una petición, una respuesta ● Web Sockets: ● Una petición, el servidor mantiene una conexión ● Usos: ● Reutilización de conexiones
- 38. HTML5: Multimedia ● Audio y video
- 39. HTML5: Multimedia: Audio y video <video src="movie.ogv" poster=”poster.jpg” autoplay loop controls></video>
- 40. HTML5: Multimedia: Formatos Códec/Contened IE Firefox Safari Chrome Opera iPhone Android or Theora+Vorbis+ · 3.5+ † 5.0+ 10.5+ · · Ogg H.264+AAC+MP 9.0+ · 3.0+ · · 3.0+ 2.0+ 4 9.0+ WebM * 4.0+ † 6.0+ 10.6+ · 2.3‡ * IE9 soporta WebM si se cuenta con un códec VP8. † Safari soporta lo que QuickTime pueda manejar. Ppr defecto, solo H.264/AAC/MP4. ‡ Android 2.3 soporta WebM, pero sin apoyo de hardware, la duración de la batería puede ser un problema.
- 43. HTML5: Multimedia: Conversión ● Conversión a formato WebM: ● Miro Video Coverter ● ffmpeg
- 44. HTML5: 3D, Graphics & Effects ● SVG ● Canvas ● WebGL ● CSS3 3D
- 45. HTML5: 3D, Graphics ...: SVG ● Formato vectorial ● Basado en XML
- 46. developer.mozilla.org/es/demos/detail/t he-planetarium/launch
- 47. HTML5: 3D, Graphics ...: Canvas ● Nueva etiqueta HTML ● Contenido completado por JavaScript ● Permite generar gráficos 2D, juegos, animaciones y composición de imágenes
- 49. HTML5: 3D, Graphics ...: WebGL ● Tecnología para que el navegador pueda accederse a funcionalidades de aceleración gráfica desde el navegador ● Basado en JavaScript y OpenGL
- 50. bodybrowser.googlelabs.com youtu.be/dst_lguw_6Y
- 51. HTML5: 3D, Graphics & Effects ● ¿HTML5 es el fin de Flash?
- 52. HTML5: 3D, Graphics ... ¿y Flash? Google ● Swiffy Adobe ● Wallaby ● Edge ● Muse
- 54. HTML5: Performance & Integration ● Web Workers ● XMLHttpRequest 2
- 55. HTML5: CSS3 Styling ● CSS3 ● Web Open Font Format (WOFF)
- 56. HTML5: CSS3 Styling ● CSS3 ● Código más simple para estilos ● Ahorra tiempo y trabajo
- 57. developer.mozilla.org/es/demos/detail/r ofox-css3-animation-by-anthony- calzadilla/launch
- 62. ¿Cómo lo empiezo a usar?
- 68. Dos publicherrys :D
- 69. Firefox 7, 8, 9 (Canal Aurora) Firefox 7 (Estable), 9 (Aurora) y Mobile firefox.com/channel Firefox Portable (ejecutable desde USB) ir.pe/firefoxportable
- 70. Mozilla Perú / 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/mcd-html5
- 71. HTML5 y los desafíos del desarrollo web de HOY Juan Eladio Sánchez Rosas jesanchez(a)mozilla.pe /mozillaperu