Este documento proporciona una guía sobre cómo desarrollar sitios web para dispositivos móviles. Explica que no se debe enfocar en el tamaño de pantalla o conexión, sino en adaptar el contenido a las capacidades del dispositivo mediante CSS3, HTML5 y JavaScript. Recomienda optimizar recursos, usar media queries para diseños responsivos, y aprovechar nuevas APIs como geolocalización, almacenamiento local y touch events. Finalmente, discute el uso opcional de frameworks móviles.

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

2. L 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.
Stephen Hay - There is no Movile Web

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

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

5. La web móvil no va de
conexiones lentas.

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

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

8. optimiza siempre

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

11. 1
ESTRATEGIAS
3 SOLUCIONES A UN MISMO RETO

12. No hacer nada.

13. No hacer nada.
Hacer una plantilla diferente.

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

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

16. diseñar con fallback

17. detectar capacidades
http://modernizr.com

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

19. 2
CSS3
OPTIMIZANDO RECURSOS

20. Menos imágenes.

21. Menos imágenes.
Menos Javascript.

22. Menos imágenes.
Menos Javascript.
Menos peticiones.

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

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

25. http://leaverou.me/css3patterns/

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

27. CSS transforms:
scale
rotate
skew
translate

28. Transitions
&
Animations

29. http://mzl.la/ieGCct

30. 3D transforms

31. http://css3.bradshawenterprises.com/

32. -webkit-transform: translateZ(0);

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

34. http://mediaqueri.es

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

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

37. 3
HTML5
EL NAVEGADOR RECUPERA EL CONTROL

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

39. video / audio
<video controls>
<source src="vid.mp4" >
<source src="vid.ogv" >
<!-- Puedes añadir un
reproductor Flash -->
</video>

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

41. formularios

42. 4
HTML5 JS
AMPLIANDO FUNCIONALIDADES

43. local storage
offline (cache)
web workers
web sockets

44. canvas
http://playbiolab.com/

45. geolocalización

46. 5
TOUCH
DÍSELO CON GESTOS

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

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

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

50. gestures
http://jgestures.codeplex.com/

51. 6
FRAMEWORKS JS
¿SON NECESARIOS?

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

53. pausa dramática

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

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