Descargado 224 veces
Subido porJuan Eladio Sánchez Rosas
HTML5 y los desafíos del desarrollo web de HOY
El documento discute el desarrollo web contemporáneo centrado en HTML5, destacando su evolución desde los años 90 hasta hoy. Se presentan las innovaciones de HTML5 en términos de semántica, almacenamiento, acceso a dispositivos y multimedia, además de mencionar herramientas y recursos para su implementación. Asimismo, se enfatiza el impacto de HTML5 en la industria y su potencial para reemplazar tecnologías anteriores como Flash.
Más contenido relacionado
Similar a HTML5 y los desafíos del desarrollo web de HOY
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
- 2.
- 3.
- 4.
- 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?
- 15.
- 16. developers.facebook.com/html5/ touch.facebook.com/MozillaPeru
- 17.
- 18.
- 19.
- 20.
- 21. De vuelta a lospilares
- 22. HTML5: Semantics ● Nuevas etiquetas y atributos ● Microformatos y microdatos
- 23.
- 24. HTML5: Semantics: Nuevasetiquetas <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" />
- 26.
- 27. HTML5: Semantics: FormsSoporte wufoo.com/html5/
- 28.
- 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
- 31.
- 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
- 35.
- 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: Audioy 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.
- 41.
- 42.
- 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
- 48.
- 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
- 53.
- 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
- 58.
- 59.
- 60.
- 61.
- 62. ¿Cómo lo empiezo a usar?
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 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