edición de bolsillo: css3, html5 y js para la web móvil

EDICIÓN DE BOLSILLO

LA WEB EN DISPOSITIVOS MÓVILES

CSS3HTML5

JS

JAVIER USOBIAGA SUBFLASH 2011

a Web Móvil no existe. Sólo existe La Web, y

la vemos de distintas formas. Tampoco existe la

Web de Escritorio. Ni la Web de Tablet. Gracias.

L

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 de

aplicaciones para SO.

La web móvil va del miedo

a la pérdida de control.

optimiza siempre

La era de detectar el

navegador ha muerto.

Llega la era de detectar

las capacidades.

ESTRATEGIAS

1

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

No hacer nada.

Hacer una plantilla diferente.

Adaptar la web.

diseñar con fallback

detectar capacidades

http://modernizr.com

rellenar huecos

http://yepnopejs.com/ http://bit.ly/listofpolyfills

CSS3

2

OPTIMIZANDO RECURSOS

Menos imágenes.

Menos imágenes.

Menos Javascript.

Menos imágenes.

Menos Javascript.

Menos peticiones.

gradients

border-radius

RGBa

box-shadow

@font-face

gradients

border-radius

RGBa

box-shadow

@font-face

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

HTML5

3

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

<!-- Puedes añadir un reproductor Flash -->

</video>

formularios

<input type=”email” />

<input type=”url” />

<input type=”number” />

<input type=”search” />

<input type=”date” />

<input type=”color” />

formularios

HTML5 ♥ JS

4

AMPLIANDO FUNCIONALIDADES

local storage

offline (cache)

web workers

web sockets

canvas

http://playbiolab.com/

geolocalización

TOUCH

5

DÍSELO CON GESTOS

touch events

addEventListener('touchstart'...)

addEventListener('touchmove'...)

addEventListener('touchend'...)

touch = touch + click

touchstartmouseovermousemovemousedownmouseupclickestilos de :hover

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

swipe

http://jgestures.codeplex.com/

gestures

FRAMEWORKS JS

6

¿SON NECESARIOS?

http://jqtouch.com

http://jquerymobile.com

http://www.sencha.com/products/touch

http://zeptojs.com

pausa dramática

¡GRACIAS!

¿PREGUNTAS?

:-)

@HTMLBOY SWWWEET.COM

AGRADECIMIENTOS Y CRÉDITOS

1 BRUCE LAWSON . . . http://brucelawson.co.uk

2 PETER-PAUL KOCH . . . http://quirksmode.org

3 ETHAN MARCOTTE . . http://unstoppablerobotninja.com

4 JEREMY KEITH . . . http://adactio.com

5 LUKE WROBLEWSKY . . http://lukew.com

6 STEPHEN HAY . . . http://the-haystack.com