HTML5 y otras yerbas

Peter Concha Regatto

Microsoft Student Partner Jr

@PeterConchaR

Oscar Rendón

@orendon

oscarrendon.com

Agenda

semántica

multimedia

css3 y estilos

html5, que? como? cuando? donde? por que?

gráficos y efectos

acceso de dispositivos

conectividad

y aun hay mas…

compatibilidad

html5, que? como? cuando? donde? por que?

estándar

Clientes ricos

móviles

semántica

multimedia

css3 y estilos

gráficos y efectos

acceso de dispositivos

conectividad

html5, que? como? cuando? donde? por que?

offline y almacenamiento rendimiento

La familia HTML5

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

DEMO

semántica

gráficos y efectos

• WebGL

– Google, Opera, Mozilla, Apple

• CSS3

– Características 3D

• SVG

– <svg> </svg>

– Basado en XML

• Canvas

– <canvas></canvas>

– Javascript API

gráficos y efectos

gráficos y efectos

DEMO

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

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>

GUERRA DE FORMATOS

FORMATO IE FIREFOX SAFARI CHROME OPERA

Ogg NO 3,4+ NO 5,0+ 10,5+

H264 9,0+ NO 3,0+ 5,0+

NO

WebM 9,0+ 4,0+ NO 5,0+

10,6+

DEMO

multimedia

acceso de dispositivos

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.

acceso de dispositivos

DEMO

css3 y estilos

CSS3

• Nuevas posibilidades de decoración.

• Menos markup.

• Menos dependencias de javascript.

• Mayor control.

SU USO

div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; }

<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“text/css" /> <link href=“netbook.css" rel="stylesheet" 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" />

DEMO

css3 y estilos

conectividad

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

conectividad

DEMO

compatibilidad

SOPORTE HTML5

• Chrome

• Firefox

• Safari

• Opera

• Internet Explorer 9+

¿Que podemos hacer para trabajar hoy con HTML5?.

Modernizr http://www.modernizr.com/

No se detecta HTML5.

Se detectan cualidades de HTML5.

• 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

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.

MAPEO HTML5

y aun hay mas…

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

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

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

PREGUNTAS

CONTACTOS

AVANET

www.avanet.org

@avanet

Peter Concha R

@PeterConchaR

Oscar Rendón

@orendon

oscarrendon.com

GRACIAS!