HTML5 y otras yerbas

Peter Concha RegattoMicrosoft Student Partner Jr

@PeterConchaROscar Rendón

@orendonoscarrendon.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?

WHATWG

W3C

estándar

multimedia

pugins

códec

Web semánticaflash

Experiencia

de usuario

CSS3

JavaScript

Ecmascript 5

XHTML 2.0

Clientes ricos

móviles

Berners-Lee 1989

2004 2007

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

Modernizrhttp://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 HTML5W3C

HTML

HTM

L5Canvas 2D

ContextM

icrodataH

TML+RD

FaH

TML5 M

arkupH

TML5 D

iff from H

TML4

Polyglot Markup

Text alternatives

CSS

CSS Snapshot 2007CSS N

amespaces

CSS Paged Media

CSS Print ProfileCSS Values and U

nitsCSS Cascading and Inheritance

CSS TextCSS W

riting Modes

CSS Line Grid

CSS RubyCSS G

enerated Content for Paged Media

CSS Backgrounds and BordersCSS Fonts

CSS Basic Box Model

CSS Multi-colum

n LayoutCSS Tem

plate LayoutCSS M

edia Queries

CSS SpeechCSS Color

CSS Basic User Interface

CSS ScopingCSS G

rid PositioningCSS Flexible Box Layout

CSS Image Values

CSS 2D Transform

ationsCSS 3D

Transformations

CSS TransitionsCSS Anim

ations

Web Apps

CORS

Element TraversalFile API

Index DB

Programm

able HTTP Caching and Serving

Progress EventsSelectors API

Selectors API L2Server-Sent Events

Uniform

Messaging Policy

Web D

OM

CoreW

eb SQL D

atabaseW

eb IDL

Web Sockets APIW

eb StorageW

eb Workers

XmlH

ttpRequest

XmlH

ttpRequest L2

DO

M L1

DO

M L2 Core

DO

M L2 View

sD

OM

L2 EventsD

OM

L2 StyleD

OM

L2 Traversal and RangeD

OM

L2 HTM

LD

OM

L3 CoreD

OM

L3 EventsD

OM

L3 Load and SaveD

OM

L3 ValidationD

OM

L3 XPathD

OM

L3 Views and Form

atting

DO

M L3 Abstract Schem

as

SVG

Docum

ent StructureBasic Shapes

PathsText

Transforms

Painting, Filling, ColorScriptingStyling

Gradients and Patt

ernsSM

ILFontsFilters

Geolocation

Geolocation API

ECMA

ECMA Script

262

ECMAScript 262

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?

Sitios Listos con

HTML5

Desarrollando más

Características

Estándares en Prueba y Desar

beautyoftheweb.com ietestdrive.com html5labs.com

IE9 IE Platform Previews

HTML5 Labs

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!