Your SlideShare is downloading. ×
HTML5 y los desafíos del desarrollo web de HOY
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML5 y los desafíos del desarrollo web de HOY

3,867
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 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
3,867
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
171
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas
  • 2. commons.wikimedia.org/wiki/File:Internet-Sign.jpg
  • 3. secure.flickr.com/photos/zipckr/5884696576/
  • 4. ¿Cómo seconstruían “páginas web”?
  • 5. Los 90s: HTML, Frames,GIFswww2.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/
  • 9. Ahora si, ¿qué esHTML5?
  • 10. Tecnologías HTML5SemanticsOffline & StorageDevice AccessConnectivity secure.flickr.com/photos/othree/5041486112/
  • 11. Tecnologías HTML5Multimedia3D, Graphics & EffectsPerformance & IntegrationCSS3 Styling secure.flickr.com/photos/othree/5041486112/
  • 12. ¿Quiénesestán usando HTML5?
  • 13. secure.flickr.com/photos/adactio/4742158560/
  • 14. developers.facebook.com/html5/ touch.facebook.com/MozillaPeru
  • 15. www.apple.com/html5/
  • 16. www.20thingsilearned.com
  • 17. youtu.be/p92QfWOw88I
  • 18. disneydigitalbooks.go.com/tronyoutu.be/wzwhUEvxgmU
  • 19. De vuelta alos pilares
  • 20. HTML5: Semantics● Nuevas etiquetas y atributos● Microformatos y microdatos
  • 21. joshduck.com/periodic-table.html
  • 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. 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. HTML5: Semantics: Formularios
  • 25. HTML5: Semantics: Forms Soporte wufoo.com/html5/
  • 26. HTML5: Semantics: Validaciones
  • 27. HTML5: Offline & Storage ● Local Storage ● Indexed DB ● File API
  • 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. 10k.aneventapart.com/1/Uploads/185/
  • 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. HTML5: Device Access ● Geolocalización ● Micrófonos y cámaras web
  • 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. html5demos.com/geo
  • 34. HTML5: Connectivity ● Web Sockets ● Server-Sent Events
  • 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. HTML5: Multimedia● Audio y video
  • 37. HTML5: Multimedia: Audio y video<video src="movie.ogv" poster=”poster.jpg”autoplay loop controls></video>
  • 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. HTML5: Multimedia: vid.ly
  • 40. HTML5: Multimedia: YouTubewww.youtube.com/html5
  • 41. HTML5: Multimedia: Conversión ● Conversión a formato WebM: ● Miro Video Coverter ● ffmpeg
  • 42. HTML5: 3D, Graphics & Effects ● SVG ● Canvas ● WebGL ● CSS3 3D
  • 43. HTML5: 3D, Graphics ...: SVG● Formato vectorial● Basado en XML
  • 44. developer.mozilla.org/es/demos/detail/t he-planetarium/launch
  • 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. apps.facebook.com/cloudcanvas/
  • 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. bodybrowser.googlelabs.com youtu.be/dst_lguw_6Y
  • 49. HTML5: 3D, Graphics & Effects● ¿HTML5 es el fin de Flash?
  • 50. HTML5: 3D, Graphics ... ¿y Flash?Google● SwiffyAdobe● Wallaby● Edge● Muse
  • 51. youtu.be/8FnNtX73v8k
  • 52. HTML5: Performance & Integration● Web Workers● XMLHttpRequest 2
  • 53. HTML5: CSS3 Styling● CSS3● Web Open Font Format (WOFF)
  • 54. HTML5: CSS3 Styling● CSS3 ● Código más simple para estilos ● Ahorra tiempo y trabajo
  • 55. developer.mozilla.org/es/demos/detail/r ofox-css3-animation-by-anthony- calzadilla/launch
  • 56. www.google.com/webfonts
  • 57. secure.flickr.com/photos/c32/4818400904/
  • 58. shoze.blogspot.com/2011/06/brorwser-wars.html
  • 59. www.html5test.com
  • 60. ¿Cómo loempiezo a usar?
  • 61. es.boilerplate.com
  • 62. www.modernizr.com
  • 63. ¿Cómoaprendo más?
  • 64. www.html5doctor.com
  • 65. developer.mozilla.org/es/HTML/HTML5
  • 66. Dospublicherrys :D
  • 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. 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. HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas jesanchez(a)mozilla.pe /mozillaperu