Gonzalo “Chalalo” Pérez CorreaMicrosoft MVP ASP/ASP.NETwww.chalalo.cl@chalalo

Desarrollo de aplicaciones con HTML5

Sobre de mi ( La Parte Fome)− www.chalalo.cl− @chalalo− chalalo@hotmail.com

Desarrollador IndependienteDocente UniversitarioMicrosoft MVP ASP.NETJQuery W3Schools certifiedConcepción, Chile

Agenda• Qué es HTML5• Algunas nuevas características que podemos

ocupar hoy• Tags Semánticos en reemplazo de elementos

genéricos• Desarrolla para HTML5, manteniendo la

compatibilidad con Browser Antiguos• Nuevos aspectos de CSS3 con IE10• Las herramientas que ayudan en el

aprovechamiento de características de HTML5• Que debemos conocer primero?

¿Qué es “HTML5”?

HTML5 es el futuro de la Web

HTML5 no es (únicamente) un mensaje de Mercadotecnia

HTML5 no está completo, todavía.

HTML5 es muy grande: probarlo no es sencillo

HTML5 necesita hacerse de la manera correcta

Nuevas etiquetas semánticas para enriquecer la experiencia.

Agrega soporte a más medios y gráficos ricos.

CSS3 permite una gran gama de efectos y estilos.

Rendimiento mejorado por aceleración por hardware

HTML5: Un Vistazo Rápido

Mapa de “HTML5”

W3C

HTML

HTM

L5C

anvas 2

D C

onte

xt

Micro

data

HTM

L+R

DFa

HTM

L5 M

arku

pH

TM

L5 D

iff fro

m H

TM

L4Po

lyglo

t Marku

pTe

xt a

ltern

ativ

es

CSS

CS

S S

nap

shot 2

007

CS

S N

am

esp

ace

sC

SS

Paged M

edia

CS

S P

rint P

rofile

CS

S V

alu

es a

nd

Un

itsC

SS

Casca

din

g a

nd

Inherita

nce

CS

S Te

xt

CS

S W

riting M

od

es

CS

S Lin

e G

ridC

SS

Rub

yC

SS

Gen

era

ted

Con

ten

t for Pa

ged

Med

iaC

SS

Back

gro

und

s and

Bord

ers

CS

S Fo

nts

CS

S B

asic B

ox M

od

el

CS

S M

ulti-co

lum

n La

yout

CS

S Te

mp

late

Layou

tC

SS

Med

ia Q

uerie

sC

SS

Sp

eech

CS

S C

olo

rC

SS

Basic U

ser In

terfa

ce

CS

S S

cop

ing

CS

S G

rid Po

sition

ing

CS

S Fle

xib

le B

ox La

you

tC

SS

Imag

e V

alu

es

CS

S 2

D Tra

nsfo

rmatio

ns

CS

S 3

D Tra

nsfo

rmatio

ns

CS

S Tra

nsitio

ns

CS

S A

nim

atio

ns

Web Apps

CO

RS

Ele

men

t Traversa

lFile

API

Index D

BPro

gra

mm

ab

le H

TTP C

ach

ing

an

d S

erv

ing

Pro

gre

ss Even

tsS

ele

ctors A

PI

Sele

ctors A

PI L2

Serv

er-S

ent E

vents

Unifo

rm M

essa

gin

g Po

licyW

eb

DO

M C

ore

Web

SQ

L Data

base

Web

IDL

Web

Socke

ts API

Web

Sto

rag

eW

eb

Worke

rsX

mlH

ttpR

eq

uest

Xm

lHttp

Req

uest L2

DO

M L1

DO

M L2

Core

DO

M L2

Vie

ws

DO

M L2

Even

tsD

OM

L2 S

tyle

DO

M L2

Traversa

l an

d R

an

ge

DO

M L2

HTM

LD

OM

L3 C

ore

DO

M L3

Even

tsD

OM

L3 Lo

ad

an

d S

ave

DO

M L3

Valid

atio

nD

OM

L3 X

Path

DO

M L3

Vie

ws a

nd Fo

rmattin

gD

OM

L3 A

bstra

ct Sch

em

as

SVG

Docu

men

t Stru

cture

Basic S

hapes

Path

sTe

xt

Tran

sform

sPain

ting, Fillin

g, C

olo

rS

criptin

gS

tylin

gG

radie

nts a

nd P

atte

rns

SM

ILFo

nts

Filters

Geolo

catio

nG

eolo

catio

n A

PI

ECMA

ECMA Script 262

EC

MA

Scrip

t 26

2

1a publicación

de borradores

Borradores Candidatos a Recomendación

Última Llamada

Recomendación

1a publicación

de borradores

Borradores Candidatos a Recomendación

Última Llamad

a

Recomendación

CS

S W

RIT

ING

MO

DE

SC

SS

LIN

E G

RID

CS

S S

CO

PIN

G

FILE

API

SE

LEC

TO

RS

API

L2

UN

IFO

RM

ME

SS

AG

ING

PO

LIC

YW

EB

DO

M C

OR

E

CS

S S

NA

PS

HO

T 2

00

7

CS

S R

UB

Y

CS

S B

AC

KG

RO

UN

DS

& B

OR

DE

RS

SE

RV

ER

-SE

NT E

VE

NTS

WE

B S

TO

RA

GE

WE

B W

OR

KE

RS

HTM

L5C

AN

VA

S 2

D C

ON

TE

XT

MIC

RO

DATA

HTM

L +

RD

FAH

TM

L5 M

AR

KU

PH

TM

L5 D

IFF

FRO

M H

TM

L4PO

LYG

LOT M

AR

KU

PTE

XT A

LTE

RN

ATIV

ES

CS

S V

ALU

ES

& U

NIT

SC

SS

CA

SC

AD

ING

& IN

HE

RIT

AN

CE

CS

S T

EX

T

CS

S G

EN

ER

ATE

D C

ON

TE

NT F

OR

PA

GE

D M

ED

IA

CS

S F

ON

TS

CS

S B

AS

IC B

OX

MO

DE

L

CS

S T

EM

PLA

TE

LAYO

UT

CS

S S

PE

EC

H

CS

S B

AS

IC U

SE

R IN

TE

RFA

CE

CS

S G

RID

PO

SIT

ION

ING

CS

S F

LEX

IBLE

BO

X L

AYO

UT

CS

S IM

AG

E V

ALU

ES

CS

S 2

D T

RA

NS

FOR

MATIO

NS

CS

S 3

D T

RA

NS

FOR

MATO

INS

CS

S T

RA

NS

ITIO

NS

CS

S A

NIM

ATIO

NS

CO

RS

IND

EX

ED

D

BPR

OG

RA

MM

AB

LE H

TTP C

AC

HIN

G &

SE

RV

ING

PR

OG

RE

SS

EV

EN

TS

WE

B S

QL

DATA

BA

SD

EW

EB

ID

LW

EB

SO

CK

ETS

API

XM

LHTTPR

EQ

UE

ST L

2

CS

S N

AM

ES

PAC

ES

CS

S M

ULT

I-C

OLU

MN

LAYO

UT

CS

S M

ED

IA Q

UE

RIE

S

SE

LEC

TO

RS

API

XM

LHTTPR

EQ

UE

ST

DO

CU

ME

NT S

TR

UC

TU

RE

BA

SIC

SH

APE

SPA

TH

STE

XT

TR

AN

SFO

RM

SPA

INTIN

G,

FILL

ING

, C

OLO

RS

CR

IPTIN

GS

TYLI

NG

GR

AD

IEN

TS

SM

ILFO

NTS

FILT

ER

S

CS

S P

AG

ED

ME

DIA

CS

S P

RIN

T P

RO

FILE

CS

S C

OLO

R

ELE

ME

NT T

RAV

ER

SA

L

DO

M L

1D

OM

L2

CO

RE

DO

M L

2 V

IEW

SD

OM

L2

EV

EN

TS

DO

M L

2 S

TYLE

DO

M L

2 T

RAV

ER

SA

L A

ND

RA

NG

ED

OM

L2

HTM

LD

OM

L3

CO

RE

DO

M L

3 E

VE

NTS

DO

M L

3 L

OA

D &

SAV

ED

OM

L3

VA

LID

ATIO

ND

OM

L3

XPA

TH

DO

M L

3 V

IEW

S &

FO

MU

TIN

GD

OM

L3

AB

STR

AC

T S

CH

EM

AS

EC

MA

SC

RIP

T 5

HTML CSS Web Apps SVG

Geolo

cati

on

GE

O-L

OC

ATIO

NE

CM

A

Last Update: 13th June 2011

HTML5 en IE9

HTML5

• New Markup Elements

• Canvas• Audio• Video• Local Storage• Cross-Window

Messaging• Text Selection

APIs• Parsing SVG in

HTML

CSS3

• 2D Transforms• Border Radius• Box-Shadow• Fonts (WOFF)• Media Queries• Multiple

Backgrounds• Namespaces• Opacity• rgba(), hsl(),

hsla()• Selectors (IE8)

SVG

• Shapes• Clipping,

Masking, and Compositing

• Transforms• Extensibility• Gradients• Interactivity• Linking and

Views• Painting and

Colors• Paths• Text

Others

• ECMA Script 5 (all but Strict Mode)

• Native JSON support (IE8)

• Performance API• Geo-Location• Data-uri (IE8)• DOM L2, L3• Selectors API L2 • AJAX Navigation

(IE8)• DOMParser and

XMLSerializer• ICC v2 and Color

Profile• ARIA

http://bit.ly/IE9Guide

Hardware Acceleration

Sitios Listos con

HTML5

Microsoft & HTML5

Desarrollando más

Características

Estándares en Prueba y Desar

beautyoftheweb.com

ietestdrive.com html5labs.com

IE9 IE Platform Previews

HTML5 Labs

Microsoft Confidential

11http://www.cuttherope.ie/

Tag Semánticos

<div id=”nav”>

<div id=”sidebar”>

<div id=”article”>

<div id=”footer”>

<div id=”header”>

HTML Tags

Proveer de significado a la estructura, semánticos son fuentes y el centro de HTML5

Elementos Semánticos

<section> Similar al tradicional div pero especificando contenido relacionado Contenedor de Navegación

<article> Contenido que está completo dentro de sí mismo, con un encabezado,

contenido, etc.

<aside> Para material tengible o parte de un artículo

<header> and <footer> Puede ser usado como un elemento de la página, una sección, artículo

etc.

<hgroup> Contiene una colleción de uno o más elementos tipo <h1>, <h2>, etc.

<nav>

<aside><section> <article>

<footer>

<header>

HTML Tags Semánticos

CSS3 Media Queries Estilo de páginas selectivas basadas en las propiedades del medio

de entrega

16

<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

HTML5 <video>

Soporte para el elemento <video> en HTML5

Formato Estándar de la Industria MPEG-4/H.264 video El Video puede ser compuesto con cualquier otro elemento de la página Contenidos HTML, imágenes, gráficos SVG Aceleración por Hardware, decodificación basada en GPU

17

<video src="video.mp4" id="videoTag"> <source src="video.webm" /> <span>Sad Panda!<br /> ¡Tu navegador no soporta video HTML!…</span> <!– Puedes pegar Flash or Video Silverlight Aquí --></video>

DEMO

Microsoft Confidential

18

Codecs Soportados por Browser

19

<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- ¡Tu navegador no soporta audio! --> <!–- Puedes pegar audio de Flash o Silverlight aquí --></audio>

HTML5 <audio> Soporte para el elemento HTML5 <audio>

Estándar de la Industria es MP3 y AAC audio Completamente programable via el DOM

Atributos src – especifica la ubicación del archivo fuente autoplay – se ejecuta tan pronto termine la carga controls – si es necesario utilizar controles de video preload – si se necesita ir cargandolo mientras se despliega la carga de página

http://html5beats.com

DEMO

20

function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); }}

function callBack(position) { var accuracy = position.coords[accuracy]; var latitude = position.coords[latitude]; var longitude = position.coords[longitude];}

Geo-Localización Permite que los sitios Web usen la ubicación para mejorar los servicios

Requiere el consentimiento del usuario Navigator.geolocation.getCurrentPosition();

DEMO

21

CSS3 Fondos & Bordes Esquinas redondeadas con la propiedad border-radius Mutiples imágenes de fondo por elemento Propiedad box-shadow en bloque de elementos

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

DEMO

22

<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style>

<div style="font: 24pt MyFontName, sans-serif;"> Esto desplegará usando MyFontName de FontFile.woff</div>

WOFF Fonts & @font-face No más limitantes a utilizar una lista de fuentes “seguras”! Web Open Font Format permite empaquetar y entregar las fuentes

necesitadas por sitio

Diseñado para el uso Web a través de la declaración @font-face Un simple re-empaquetamiento de datos de fuentes OpenType o TrueType Recomendación del grupo de trabajo W3C Fonts

DEMO

<canvas id="myCanvas" width="200" height="200"> ¡Tu navegador no soporta Canvas!</canvas>

<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

Canvas Un boque de elementos que permiten a los desarrolladores dibujar

gráficos 2D utilizando JavaScript.

Algunos métodos para dibujar son: paths, boxes, circles, text and rasterized images

23

DEMO

Crear y dibujar gráficas vectoriales en 2D usando XML

Las imágenes vectoriales compuestas por formas en vez de pixeles. Basado en SVG 1.1 2a edición – especificación completa

Soporte para:

DOM tenga acceso completo a los elementos SVG Document structure, scripting, styling, paths, shapes, colors, transforms,

gradients, patterns, masking, clipping, markers, linking and views

Scalable Vector Graphics (SVG)

24

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>

DEMO

Microsoft Confidential

25

¿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 & ShimsQue 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.

Demo

Microsoft Confidential

29

¿Puedo usarlo?http://www.caniuse.com

¿Evolución?www.html5readiness.com

¿Y para Móviles?www.mobilehtml5.org

Microsoft Confidential

30

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

Microsoft Confidential

31

Por donde partir?

Adoptar

– Tag Semántico– Canvas– Audio yVideo– Geolocalización– Web Storage– CSS3

Experimentar

– IE10 Platform Preview– HTML5 Labs

Microsoft Confidential

32

IE10 Developer PreviewSoporte para varias propiedades CSS3 (multicolumna, cuadrícula, caja flexible, degradados), además del modo estricto ECMAScript5. Mejoras en el soporte de HTML5.

Soporte para positioned floats, arrastrar y soltar,API de archivos de HTML5, caja de arena (sandbox) HTML5, HTML5 Web Workers.

Transformaciones CSS en 3D, sombra de texto en CSS, efectos de filtro SVG, comprobación de ortografía, autocorrección, almacenamiento local de datos con IndexedDB y caché de aplicaciones HTML5, Web Sockets, así como pestañas en modo InPrivate DEMO

Limitaciones en HTTP

Las aplicaciones hoy usan workarounds para permitir push

HTTP es un protocolo request-reply

Modelos ActualesPolling Periódico

Polling interval

Client

El navegador usa XmlHttpRequest para consultar periódicamente al servidor

Server

Long Polling

− El Servidor mantiene la solicitud HTTP hasta que hay información para devolver

− El Client envía una nueva solicitud al terminar la anterior

Client

Server

Modelos Actuales

− Tecnología interoperable nueva, bajo estandarización

− Socket bidireccional Full Duplex− API Javascript W3C− Secure (SSL)− Alta performance− Conexiones cross dominio

WebSockets

Soporte JavaScriptfunction WebSocketTest()

{

if ("WebSocket" in window)

{ alert("WebSocket esta soportado! Wooooo!!!!");

var ws = new WebSocket("ws://localhost:9998/echo");

ws.onopen = function()

{

ws.send(“Mensaje a enviar");

alert(“Mensaje fue enviado...");

};

ws.onmessage = function (evt)

{

var received_msg = evt.data;

alert("Mensaje Recibido...");

};

ws.onclose = function()

{

alert(“La Conexión está cerrada...");

};

}

else

{ alert("WebSocket no esta soportado por tu browser!");

}

}

Microsoft Confidential

38

FileAPI – File Objects en Web Apps

var file = document.getElementById('file').files[0];document.getElementById('name').textContent = file.fileName;document.getElementById('size').textContent = file.fileSize;      var reader = new FileReaderDraft();reader.readAsText(file);

EvilP

lan

s.tx

t

Name

Size

Data

Recursos para el Desarrollador− Noticias: blogs.msdn.com/IE

− Demostraciones: www.beautyoftheweb.com

− Ejemplos Técnicos: www.ietestdrive.com

− HTML5 Labs: www.html5labs.com

− #mejorandola (http://mejorando.la/)− @freddier− @cvander

Microsoft Confidential

40

¿Preguntas?

Gonzalo “Chalalo” Pérez CorreaMicrosoft MVP ASP/ASP.NETwww.chalalo.cl@chalalo

© 2009 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.  The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond

to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. 

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.