Edición de bolsillo: CSS3, HTML5 y JS para la web móvil

CSS3 HTML5 JSEDICIÓN DE BOLSILLO LA WEB EN DISPOSITIVOS MÓVILES JAVIER USOBIAGA SUBFLASH 2011

L a Web Móvil no existe. Sólo existe La Web, yla vemos de distintas formas. Tampoco existe laWeb de Escritorio. Ni la Web de Tablet. Gracias. Stephen Hay - There is no Movile Web

La web móvil no va de pantallas pequeñas.

La web móvil no va de pantallas táctiles.

La web móvil no va de conexiones lentas.

La web móvil no va deaplicaciones para SO.

La web móvil va del miedo a la pérdida de control.

optimiza siempre

La era de detectar elnavegador ha muerto.Llega la era de detectar las capacidades.

1ESTRATEGIAS3 SOLUCIONES A UN MISMO RETO

No hacer nada.

No hacer nada.Hacer una plantilla diferente.

No hacer nada.Hacer una plantilla diferente. Adaptar la web.

diseñar con fallback

detectar capacidades http://modernizr.com

rellenar huecoshttp://yepnopejs.com/ http://bit.ly/listofpolyﬁlls

2 CSS3OPTIMIZANDO RECURSOS

Menos imágenes.

Menos imágenes.Menos Javascript.

Menos imágenes.Menos Javascript.Menos peticiones.

border-radius RGBabox-shadow @font-face gradients

http://leaverou.me/css3patterns/

http://www.colorzilla.com/gradient-editor/

CSS transforms: scale rotate skew translate

Transitions &Animations

http://mzl.la/ieGCct

3D transforms

http://css3.bradshawenterprises.com/

-webkit-transform: translateZ(0);

media queries@media screen and (max-width:320px){ #container{ width: 300px; } header nav{ display: none; }}

http://mediaqueri.es

responsive web design #container .column{ width: 31.12164296%; margin-right: 3.3175355%; } .img-container img{ max-width: 100%; } http://www.alistapart.com/articles/responsive-web-design

responsive web design http://www.abookapart.com/products/responsive-web-design

3 HTML5EL NAVEGADOR RECUPERA EL CONTROL

viewport<meta name = "viewport"content = "width = device-width, initial-scale = 1.0" >

video / audio<video controls> <source src="vid.mp4" > <source src="vid.ogv" > </video>

formularios<input type=”email” /><input type=”url” /><input type=”number” /><input type=”search” /><input type=”date” /><input type=”color” />

formularios

4 HTML5 JSAMPLIANDO FUNCIONALIDADES

local storageofﬂine (cache)web workersweb sockets

canvas http://playbiolab.com/

geolocalización

5 TOUCHDÍSELO CON GESTOS

touch eventsaddEventListener(touchstart...) addEventListener(touchmove...) addEventListener(touchend...)

touch = touch + click touchstart mouseover mousemove mousedown mouseup click estilos de :hover

swipe http://plugins.jquery.com/project/swipe

gestures http://jgestures.codeplex.com/

6FRAMEWORKS JS ¿SON NECESARIOS?

http://jqtouch.comhttp://jquerymobile.comhttp://www.sencha.com/products/touchhttp://zeptojs.com

pausa dramática

:-)¡GRACIAS! ¿PREGUNTAS?@HTMLBOY SWWWEET.COM

AGRADECIMIENTOS Y CRÉDITOS1 BRUCE LAWSON . . . http://brucelawson.co.uk2 PETER-PAUL KOCH . . . http://quirksmode.org3 ETHAN MARCOTTE . . http://unstoppablerobotninja.com4 JEREMY KEITH . . . http://adactio.com5 LUKE WROBLEWSKY . . http://lukew.com6 STEPHEN HAY . . . http://the-haystack.com

http://www.lostiemposcambian.com	218
http://lanyrd.com	87
http://us-w1.rockmelt.com	13
http://twitter.com	13
http://www.techgig.com	12
https://twitter.com	10
http://tweetedtimes.com	6
http://a0.twimg.com	1
http://a0.twimg.com	1

Edición de bolsillo: CSS3, HTML5 y JS para la web móvil

by Marta Armada on Sep 04, 2011

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 361

Statistics

Edición de bolsillo: CSS3, HTML5 y JS para la web móvil Presentation Transcript