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…
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
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+
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
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.
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