HTML5 y otras yerbas                     Peter Concha Regatto                  Microsoft Student Partner Jr               ...
Agendahtml5, que? como? cuando? donde? por que?semántica                   gráficos y efectosmultimedia                  a...
html5, que? como? cuando? donde? por que?             estándar              móviles                        Clientes ricos
html5, que? como? cuando? donde? por que?La familia HTML5   semántica                   gráficos y efectos   multimedia   ...
semántica
VIEJA ESTRUCTURA
NUEVA ESTRUCTURA
<HEADER>• Logo y título• Navegación• Varios encabezados
<NAV>• Puede ver más de uno• Migas de pan• Blog roll
<ARTICLE>• Artículos de blog y periódicos• Comentarios y productos• Sindicable
<SECTION>• Agrupa contenido semánticamente• Sirve tanto para páginas y artículos
<ASIDE>• Sidebar• Anuncios
<FOOTER>• Puede haber varios• Licencias, enlaces, etc
ADIOS•   Applets•   Big•   Center•   Font•   Frame•   Blink•   Marquee
semánticaDEMO
gráficos y efectos
gráficos   y efectos• WebGL  – Google, Opera, Mozilla, Apple• CSS3  – Características 3D• SVG  – <svg> </svg>  – Basado en...
gráficos y efectosDEMO
multimedia
<AUDIO> Y <VIDEO><audio src=“cancion.???”> </audio><video src=“video.???”> </video>
ATRIBUTOS• Autoplay: reproducción automática.• Controls: muestra los controles de video nativos  de cada navegador. No apa...
UN USO CORRECTO<video controls width=“360” height=“240”poster=“poster.jpg”>     <source src=“intro.mp4”     type=“video/mp...
GUERRA DE FORMATOSFORMATO    IE    FIREFOX   SAFARI   CHROME   OPERAOgg       NO      3,4+      NO       5,0+    10,5+    ...
multimediaDEMO
acceso de dispositivos
acceso de dispositivos• Geo-lozalización    GPS    Dirección IP    Celular    WiFi• Agnóstico al dispositivo• Interacc...
acceso de dispositivosDEMO
css3 y estilos
CSS3•   Nuevas posibilidades de decoración.•   Menos markup.•   Menos dependencias de javascript.•   Mayor control.
SU USO<link href=“mobile.css"rel="stylesheet"                    div { media="screen and (max-             border-radius: ...
css3 y estilosDEMO
conectividad
conectividad• Websockets   Comunicación entre cliente y servidor   Half-duplex vs full-duplex   Javascript API   Cualq...
conectividadDEMO
compatibilidad
SOPORTE HTML5•   Chrome•   Firefox•   Safari•   Opera•   Internet Explorer 9+
¿Que podemos hacer paratrabajar hoy con HTML5?.        Modernizrhttp://www.modernizr.com/     No se detecta HTML5.   Se de...
• La mejor librería de       detección      de  caractetísticas detecta:  – Todas las características principales   de    ...
Polyfills & Shims• Que son?     Normalmente JavaScript CSS y HTML y CSS• ¿Qué permiten hacer?     Proporcionan la tecnolog...
MAPEO HTML5
y aun hay mas…
Y aun hay mas…  • Offline y Almacenamiento    – Almacenamiento local    – DB indexadas    – API para archivos  • Rendimien...
El fututo, que sigue, que falta?beautyoftheweb.com   ietestdrive.com   html5labs.com
http://www.cuttherope.ie/
HERRAMIENTAS•   Cualquier editor y un navegador!    • SublimeText, TextMate, Notepad++, Aptana•   VS 11 Developer – Ready ...
Recursos para el Desarrollador•   Noticias: blogs.msdn.com/IE•   Demostraciones: www.beautyoftheweb.com•   Ejemplos Técnic...
PREGUNTAS
CONTACTOS     Oscar Rendón       @orendon    oscarrendon.com                      Peter Concha R                      @Pet...
GRACIAS!
Upcoming SlideShare
Loading in …5
×

Html5 y otras yerbas

968
-1

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
968
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 y otras yerbas

  1. 1. HTML5 y otras yerbas Peter Concha Regatto Microsoft Student Partner Jr @PeterConchaR Oscar Rendón @orendonoscarrendon.com
  2. 2. Agendahtml5, que? como? cuando? donde? por que?semántica gráficos y efectosmultimedia acceso de dispositivoscss3 y estilos conectividadcompatibilidad y aun hay mas…
  3. 3. html5, que? como? cuando? donde? por que? estándar móviles Clientes ricos
  4. 4. html5, que? como? cuando? donde? por que?La familia HTML5 semántica gráficos y efectos multimedia acceso de dispositivos css3 y estilos conectividad offline y almacenamiento rendimiento
  5. 5. semántica
  6. 6. VIEJA ESTRUCTURA
  7. 7. NUEVA ESTRUCTURA
  8. 8. <HEADER>• Logo y título• Navegación• Varios encabezados
  9. 9. <NAV>• Puede ver más de uno• Migas de pan• Blog roll
  10. 10. <ARTICLE>• Artículos de blog y periódicos• Comentarios y productos• Sindicable
  11. 11. <SECTION>• Agrupa contenido semánticamente• Sirve tanto para páginas y artículos
  12. 12. <ASIDE>• Sidebar• Anuncios
  13. 13. <FOOTER>• Puede haber varios• Licencias, enlaces, etc
  14. 14. ADIOS• Applets• Big• Center• Font• Frame• Blink• Marquee
  15. 15. semánticaDEMO
  16. 16. gráficos y efectos
  17. 17. gráficos y efectos• WebGL – Google, Opera, Mozilla, Apple• CSS3 – Características 3D• SVG – <svg> </svg> – Basado en XML• Canvas – <canvas></canvas> – Javascript API
  18. 18. gráficos y efectosDEMO
  19. 19. multimedia
  20. 20. <AUDIO> Y <VIDEO><audio src=“cancion.???”> </audio><video src=“video.???”> </video>
  21. 21. ATRIBUTOS• Autoplay: reproducción automática.• Controls: muestra los controles de video nativos de cada navegador. No aparece por defecto.• Poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma.• Width, height: si no se especifican, se toman las del poster; si no serán 300px por 150px.• Loop: reproduce el video en bucle.• Preload: precarga el video.• Src: indica la fuente del video.
  22. 22. UN USO CORRECTO<video controls width=“360” height=“240”poster=“poster.jpg”> <source src=“intro.mp4” type=“video/mp4”> <source src=“promo.mp4” type=“video/ogg”><p>Presentacion de la comunidad</p></video>
  23. 23. GUERRA DE FORMATOSFORMATO IE FIREFOX SAFARI CHROME OPERAOgg NO 3,4+ NO 5,0+ 10,5+ 5,0+H264 9,0+ NO 3,0+ NO 5,0+WebM 9,0+ 4,0+ NO 10,6+
  24. 24. multimediaDEMO
  25. 25. acceso de dispositivos
  26. 26. acceso de dispositivos• Geo-lozalización  GPS  Dirección IP  Celular  WiFi• Agnóstico al dispositivo• Interacción con el usuario  Orientación del dispositivo  Eventos touch  Futuro: microfono, camaras, usb, etc.
  27. 27. acceso de dispositivosDEMO
  28. 28. css3 y estilos
  29. 29. CSS3• Nuevas posibilidades de decoración.• Menos markup.• Menos dependencias de javascript.• Mayor control.
  30. 30. SU USO<link href=“mobile.css"rel="stylesheet" div { media="screen and (max- border-radius: 152px 304px 228pxwidth:480px)" type=“text/css" /> 152px; border-style: double;<link href=“netbook.css" border-width: 42px;rel="stylesheet" padding: 12px; media="screen and (min- }width:481px) and (max-width:1024px)" type="text/css" /><link href=“laptop.css"rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
  31. 31. css3 y estilosDEMO
  32. 32. conectividad
  33. 33. conectividad• Websockets  Comunicación entre cliente y servidor  Half-duplex vs full-duplex  Javascript API  Cualquier puerto, incluso el 80 !• Y que hay del servidor?  socket.io  SignalR  jWebSocket  web-socket-ruby  pywebsocket
  34. 34. conectividadDEMO
  35. 35. compatibilidad
  36. 36. SOPORTE HTML5• Chrome• Firefox• Safari• Opera• Internet Explorer 9+
  37. 37. ¿Que podemos hacer paratrabajar hoy con HTML5?. Modernizrhttp://www.modernizr.com/ No se detecta HTML5. Se detectan cualidades de HTML5.
  38. 38. • La mejor librería de detección de caractetísticas detecta: – Todas las características principales de HTML5 – Todas las principales características de CSS3• Incluye HTML5 Shim para el soporte de tag semánticos• Adopción generalizada• Updates continuos• Se incluye con ASP.NET MVC 3
  39. 39. Polyfills & Shims• Que son? Normalmente JavaScript CSS y HTML y CSS• ¿Qué permiten hacer? Proporcionan la tecnología que nosotros, los desarrolladores, esperaríamos que el navegador ofreciera nativamente. Provee características que faltan.• ¡Cuando se utilizan? Se utilizan para generar la llamada “fallback Gracefully” o imitar una funcionalidad.
  40. 40. MAPEO HTML5
  41. 41. y aun hay mas…
  42. 42. Y aun hay mas… • Offline y Almacenamiento – Almacenamiento local – DB indexadas – API para archivos • Rendimiento e Integración – Web Workers (Javascript en background) – Aceleración por hardware
  43. 43. El fututo, que sigue, que falta?beautyoftheweb.com ietestdrive.com html5labs.com
  44. 44. http://www.cuttherope.ie/
  45. 45. HERRAMIENTAS• Cualquier editor y un navegador! • SublimeText, TextMate, Notepad++, Aptana• VS 11 Developer – Ready to Rock!!• VS 2010 SP1 – HTML5 Schema y Intellisense• WebMatrix – Incluye HTML5 default doctype• ASP.NET MVC 3 tools update • HTML5 template para nuevos proyectos • Modernizr 1.7 incluido en nuevos proyectos• Expression Web 4 SP1 – HTML5 Schema y Intellisense • Editor CSS preparado! • SuperPreview
  46. 46. Recursos para el Desarrollador• Noticias: blogs.msdn.com/IE• Demostraciones: www.beautyoftheweb.com• Ejemplos Técnicos: www.ietestdrive.com• HTML5 Labs: www.html5labs.com• cristalab.com• mejorandola.la• maestrosdelweb.com• avanet.org• html5test.com• chromeexperiments.com• html5rocks.com
  47. 47. PREGUNTAS
  48. 48. CONTACTOS Oscar Rendón @orendon oscarrendon.com Peter Concha R @PeterConchaRwww.avanet.org@avanetAVANET
  49. 49. GRACIAS!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×