Presentación dada desde Avanet con mi colega Oscar Rendon sobre el mundo de HTML5

1. HTML5 y otras yerbas
Peter Concha Regatto
Microsoft Student Partner Jr
@PeterConchaR
Oscar Rendón
@orendon
oscarrendon.com

2. Agenda
html5, que? como? cuando? donde? por que?
semántica gráficos y efectos
multimedia acceso de dispositivos
css3 y estilos conectividad
compatibilidad
y aun hay mas…

3. html5, que? como? cuando? donde? por que?
estándar
móviles
Clientes ricos

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. semántica

6. VIEJA ESTRUCTURA

7. NUEVA ESTRUCTURA

8. <HEADER>
• Logo y título
• Navegación
• Varios encabezados

9. <NAV>
• Puede ver más de uno
• Migas de pan
• Blog roll

10. <ARTICLE>
• Artículos de blog y periódicos
• Comentarios y productos
• Sindicable

11. <SECTION>
• Agrupa contenido semánticamente
• Sirve tanto para páginas y artículos

12. <ASIDE>
• Sidebar
• Anuncios

13. <FOOTER>
• Puede haber varios
• Licencias, enlaces, etc

14. ADIOS
• Applets
• Big
• Center
• Font
• Frame
• Blink
• Marquee

15. semántica
DEMO

16. gráficos y efectos

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. gráficos y efectos
DEMO

19. multimedia

20. <AUDIO> Y <VIDEO>
<audio src=“cancion.???”> </audio>
<video src=“video.???”> </video>

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. 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. GUERRA DE FORMATOS
FORMATO IE FIREFOX SAFARI CHROME OPERA
Ogg 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. multimedia
DEMO

25. acceso de dispositivos

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. acceso de dispositivos
DEMO

28. css3 y estilos

29. CSS3
• Nuevas posibilidades de decoración.
• Menos markup.
• Menos dependencias de javascript.
• Mayor control.

30. SU USO
<link href=“mobile.css"
rel="stylesheet" div {
media="screen and (max- border-radius: 152px 304px 228px
width: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. css3 y estilos
DEMO

32. conectividad

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. conectividad
DEMO

35. compatibilidad

36. SOPORTE HTML5
• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer 9+

37. ¿Que podemos hacer para
trabajar hoy con HTML5?.
Modernizr
http://www.modernizr.com/
No se detecta HTML5.
Se detectan cualidades de
HTML5.

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. 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. MAPEO HTML5

41. y aun hay mas…

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. El fututo, que sigue, que falta?
beautyoftheweb.com ietestdrive.com html5labs.com

44. http://www.cuttherope.ie/

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. 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. PREGUNTAS

48. CONTACTOS
Oscar Rendón
@orendon
oscarrendon.com
Peter Concha R
@PeterConchaR
www.avanet.org
@avanet
AVANET

49. GRACIAS!