Download - Desarrollo de aplicaciones con HTML5
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− [email protected]
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.