HTML5    y los desafíos    del desarrollo     web de HOYJuan Eladio Sánchez Rosas
commons.wikimedia.org/wiki/File:Internet-Sign.jpg
secure.flickr.com/photos/zipckr/5884696576/
¿Cómo seconstruían “páginas  web”?
Los 90s: HTML, Frames,GIFswww2.warnerbros.com/spacejam/movie/jam.htm
Lo que                          “usamos”                         desde 2000● HTML 4 / XHTML 1● CSS 1 / 2● JavaScript    se...
Todo                            combinado● Diseño web SIN TABLAS● AJAX      secure.flickr.com/photos/luc/255444239/
¿Todo esto es                  nuevo para                      ti?secure.flickr.com/photos/lejoe/4815687662/
Ahora si, ¿qué esHTML5?
Tecnologías HTML5SemanticsOffline & StorageDevice AccessConnectivity                    secure.flickr.com/photos/othree/50...
Tecnologías HTML5Multimedia3D, Graphics & EffectsPerformance & IntegrationCSS3 Styling                 secure.flickr.com/p...
¿Quiénesestán usando  HTML5?
secure.flickr.com/photos/adactio/4742158560/
developers.facebook.com/html5/               touch.facebook.com/MozillaPeru
www.apple.com/html5/
www.20thingsilearned.com
youtu.be/p92QfWOw88I
disneydigitalbooks.go.com/tronyoutu.be/wzwhUEvxgmU
De vuelta alos pilares
HTML5: Semantics●   Nuevas etiquetas y atributos●   Microformatos y microdatos
joshduck.com/periodic-table.html
HTML5: Semantics: Nuevas etiquetas<header> <hgroup>  <h1>Título de página</h1>  <h2>Subtítulo</h2> </hgroup></header><nav>...
Menos atributos innecesarios   <!DOCTYPE html PUBLIC "-//W3C//DTD         XHTML 1.0 Transitional//EN" "http://www.w3.org/T...
HTML5: Semantics: Formularios
HTML5: Semantics: Forms Soporte      wufoo.com/html5/
HTML5: Semantics: Validaciones
HTML5: Offline &   Storage            ●   Local Storage            ●   Indexed DB            ●   File API
Local Storage●   Para almacenar grandes cantidades de datos    en el lado del Cliente (navegador).●   Usos:    ●   Descarg...
10k.aneventapart.com/1/Uploads/185/
Indexed DB●   Para almacenar datos estructurados en llaves y    valores.    ●   NO es una base de datos relacional    ●   ...
HTML5: Device Access         ●   Geolocalización         ●   Micrófonos y cámaras web
Geolocation API●   Un sitio te pregunta si quieres compartir tu    ubicación●   Recopila información sobre puntos de acces...
html5demos.com/geo
HTML5: Connectivity          ●   Web Sockets          ●   Server-Sent Events
Web Sockets●   Una técnica de conexión●   Forma estándar de conexión Web:    ●   Una petición, una respuesta●   Web Socket...
HTML5: Multimedia●   Audio y video
HTML5: Multimedia: Audio y video<video src="movie.ogv" poster=”poster.jpg”autoplay loop controls></video>
HTML5: Multimedia: FormatosCódec/Contened                        IE   Firefox   Safari Chrome        Opera       iPhone   ...
HTML5: Multimedia: vid.ly
HTML5: Multimedia: YouTubewww.youtube.com/html5
HTML5: Multimedia: Conversión             ●   Conversión a formato                 WebM:                 ●   Miro Video Co...
HTML5: 3D, Graphics &      Effects                ●   SVG                ●   Canvas                ●   WebGL              ...
HTML5: 3D, Graphics ...: SVG●   Formato vectorial●   Basado en XML
developer.mozilla.org/es/demos/detail/t       he-planetarium/launch
HTML5: 3D, Graphics ...: Canvas●   Nueva etiqueta HTML●   Contenido completado por JavaScript●   Permite generar gráficos ...
apps.facebook.com/cloudcanvas/
HTML5: 3D, Graphics ...: WebGL●   Tecnología para que el navegador pueda    accederse a funcionalidades de aceleración    ...
bodybrowser.googlelabs.com           youtu.be/dst_lguw_6Y
HTML5: 3D, Graphics & Effects●   ¿HTML5 es el    fin de Flash?
HTML5: 3D, Graphics ... ¿y Flash?Google●   SwiffyAdobe●   Wallaby●   Edge●   Muse
youtu.be/8FnNtX73v8k
HTML5: Performance &        Integration●   Web Workers●   XMLHttpRequest 2
HTML5: CSS3 Styling●   CSS3●   Web Open Font Format (WOFF)
HTML5: CSS3 Styling●   CSS3    ●   Código más simple para estilos    ●   Ahorra tiempo y trabajo
developer.mozilla.org/es/demos/detail/r   ofox-css3-animation-by-anthony-           calzadilla/launch
www.google.com/webfonts
secure.flickr.com/photos/c32/4818400904/
shoze.blogspot.com/2011/06/brorwser-wars.html
www.html5test.com
¿Cómo loempiezo a  usar?
es.boilerplate.com
www.modernizr.com
¿Cómoaprendo  más?
www.html5doctor.com
developer.mozilla.org/es/HTML/HTML5
Dospublicherrys     :D
Firefox 7, 8, 9 (Canal Aurora)Firefox 7 (Estable), 9 (Aurora) y Mobile         firefox.com/channelFirefox Portable (ejecut...
Mozilla Perú / Mozilla Campus DayPromover el desarrollo de Internet y la web ennuestro país       Para estudiantes y docen...
HTML5    y los desafíos    del desarrollo     web de HOYJuan Eladio Sánchez Rosas   jesanchez(a)mozilla.pe             /mo...
HTML5 y los desafíos del desarrollo web de HOY
Upcoming SlideShare
Loading in …5
×

HTML5 y los desafíos del desarrollo web de HOY

4,366 views

Published on

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.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,366
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
205
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 y los desafíos del desarrollo web de HOY

  1. 1. HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas
  2. 2. commons.wikimedia.org/wiki/File:Internet-Sign.jpg
  3. 3. secure.flickr.com/photos/zipckr/5884696576/
  4. 4. ¿Cómo seconstruían “páginas web”?
  5. 5. Los 90s: HTML, Frames,GIFswww2.warnerbros.com/spacejam/movie/jam.htm
  6. 6. Lo que “usamos” desde 2000● HTML 4 / XHTML 1● CSS 1 / 2● JavaScript secure.flickr.com/photos/sh1mmer/2487028198/
  7. 7. Todo combinado● Diseño web SIN TABLAS● AJAX secure.flickr.com/photos/luc/255444239/
  8. 8. ¿Todo esto es nuevo para ti?secure.flickr.com/photos/lejoe/4815687662/
  9. 9. Ahora si, ¿qué esHTML5?
  10. 10. Tecnologías HTML5SemanticsOffline & StorageDevice AccessConnectivity secure.flickr.com/photos/othree/5041486112/
  11. 11. Tecnologías HTML5Multimedia3D, Graphics & EffectsPerformance & IntegrationCSS3 Styling secure.flickr.com/photos/othree/5041486112/
  12. 12. ¿Quiénesestán usando HTML5?
  13. 13. secure.flickr.com/photos/adactio/4742158560/
  14. 14. developers.facebook.com/html5/ touch.facebook.com/MozillaPeru
  15. 15. www.apple.com/html5/
  16. 16. www.20thingsilearned.com
  17. 17. youtu.be/p92QfWOw88I
  18. 18. disneydigitalbooks.go.com/tronyoutu.be/wzwhUEvxgmU
  19. 19. De vuelta alos pilares
  20. 20. HTML5: Semantics● Nuevas etiquetas y atributos● Microformatos y microdatos
  21. 21. joshduck.com/periodic-table.html
  22. 22. 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>
  23. 23. 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" />
  24. 24. HTML5: Semantics: Formularios
  25. 25. HTML5: Semantics: Forms Soporte wufoo.com/html5/
  26. 26. HTML5: Semantics: Validaciones
  27. 27. HTML5: Offline & Storage ● Local Storage ● Indexed DB ● File API
  28. 28. 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
  29. 29. 10k.aneventapart.com/1/Uploads/185/
  30. 30. 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.
  31. 31. HTML5: Device Access ● Geolocalización ● Micrófonos y cámaras web
  32. 32. 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
  33. 33. html5demos.com/geo
  34. 34. HTML5: Connectivity ● Web Sockets ● Server-Sent Events
  35. 35. 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
  36. 36. HTML5: Multimedia● Audio y video
  37. 37. HTML5: Multimedia: Audio y video<video src="movie.ogv" poster=”poster.jpg”autoplay loop controls></video>
  38. 38. HTML5: Multimedia: FormatosCódec/Contened IE Firefox Safari Chrome Opera iPhone Android orTheora+Vorbis+ · 3.5+ † 5.0+ 10.5+ · ·OggH.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íapuede ser un problema.
  39. 39. HTML5: Multimedia: vid.ly
  40. 40. HTML5: Multimedia: YouTubewww.youtube.com/html5
  41. 41. HTML5: Multimedia: Conversión ● Conversión a formato WebM: ● Miro Video Coverter ● ffmpeg
  42. 42. HTML5: 3D, Graphics & Effects ● SVG ● Canvas ● WebGL ● CSS3 3D
  43. 43. HTML5: 3D, Graphics ...: SVG● Formato vectorial● Basado en XML
  44. 44. developer.mozilla.org/es/demos/detail/t he-planetarium/launch
  45. 45. HTML5: 3D, Graphics ...: Canvas● Nueva etiqueta HTML● Contenido completado por JavaScript● Permite generar gráficos 2D, juegos, animaciones y composición de imágenes
  46. 46. apps.facebook.com/cloudcanvas/
  47. 47. 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
  48. 48. bodybrowser.googlelabs.com youtu.be/dst_lguw_6Y
  49. 49. HTML5: 3D, Graphics & Effects● ¿HTML5 es el fin de Flash?
  50. 50. HTML5: 3D, Graphics ... ¿y Flash?Google● SwiffyAdobe● Wallaby● Edge● Muse
  51. 51. youtu.be/8FnNtX73v8k
  52. 52. HTML5: Performance & Integration● Web Workers● XMLHttpRequest 2
  53. 53. HTML5: CSS3 Styling● CSS3● Web Open Font Format (WOFF)
  54. 54. HTML5: CSS3 Styling● CSS3 ● Código más simple para estilos ● Ahorra tiempo y trabajo
  55. 55. developer.mozilla.org/es/demos/detail/r ofox-css3-animation-by-anthony- calzadilla/launch
  56. 56. www.google.com/webfonts
  57. 57. secure.flickr.com/photos/c32/4818400904/
  58. 58. shoze.blogspot.com/2011/06/brorwser-wars.html
  59. 59. www.html5test.com
  60. 60. ¿Cómo loempiezo a usar?
  61. 61. es.boilerplate.com
  62. 62. www.modernizr.com
  63. 63. ¿Cómoaprendo más?
  64. 64. www.html5doctor.com
  65. 65. developer.mozilla.org/es/HTML/HTML5
  66. 66. Dospublicherrys :D
  67. 67. Firefox 7, 8, 9 (Canal Aurora)Firefox 7 (Estable), 9 (Aurora) y Mobile firefox.com/channelFirefox Portable (ejecutable desde USB) ir.pe/firefoxportable
  68. 68. Mozilla Perú / Mozilla Campus DayPromover el desarrollo de Internet y la web ennuestro 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
  69. 69. HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas jesanchez(a)mozilla.pe /mozillaperu

×