Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

La web móvil no va de conexiones lentas.

Slide 6

Slide 6 text

La web móvil no va de aplicaciones para SO.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

optimiza siempre

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

La era de detectar el navegador ha muerto. Llega la era de detectar las capacidades.

Slide 11

Slide 11 text

ESTRATEGIAS 1 3 SOLUCIONES A UN MISMO RETO

Slide 12

Slide 12 text

No hacer nada.

Slide 13

Slide 13 text

No hacer nada. Hacer una plantilla diferente.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

diseñar con fallback

Slide 17

Slide 17 text

detectar capacidades http://modernizr.com

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

CSS3 2 OPTIMIZANDO RECURSOS

Slide 20

Slide 20 text

Menos imágenes.

Slide 21

Slide 21 text

Menos imágenes. Menos Javascript.

Slide 22

Slide 22 text

Menos imágenes. Menos Javascript. Menos peticiones.

Slide 23

Slide 23 text

gradients border-radius RGBa box-shadow @font-face

Slide 24

Slide 24 text

gradients border-radius RGBa box-shadow @font-face

Slide 25

Slide 25 text

http://leaverou.me/css3patterns/

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

CSS transforms: scale rotate skew translate

Slide 28

Slide 28 text

Transitions & Animations

Slide 29

Slide 29 text

http://mzl.la/ieGCct

Slide 30

Slide 30 text

3D transforms

Slide 31

Slide 31 text

http://css3.bradshawenterprises.com/

Slide 32

Slide 32 text

-webkit-transform: translateZ(0);

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

http://mediaqueri.es

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

HTML5 3 EL NAVEGADOR RECUPERA EL CONTROL

Slide 38

Slide 38 text

viewport

Slide 39

Slide 39 text

video / audio

Slide 40

Slide 40 text

formularios

Slide 41

Slide 41 text

formularios

Slide 42

Slide 42 text

HTML5 — JS 4 AMPLIANDO FUNCIONALIDADES

Slide 43

Slide 43 text

local storage offline (cache) web workers web sockets

Slide 44

Slide 44 text

canvas http://playbiolab.com/

Slide 45

Slide 45 text

geolocalización

Slide 46

Slide 46 text

TOUCH 5 DÍSELO CON GESTOS

Slide 47

Slide 47 text

touch events addEventListener('touchstart'...) addEventListener('touchmove'...) addEventListener('touchend'...)

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

http://jgestures.codeplex.com/ gestures

Slide 51

Slide 51 text

FRAMEWORKS JS 6 ¿SON NECESARIOS?

Slide 52

Slide 52 text

http://jqtouch.com http://jquerymobile.com http://www.sencha.com/products/touch http://zeptojs.com

Slide 53

Slide 53 text

pausa dramática

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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