Edición de bolisillo: la web en dispositivos móviles

Transcript

1. EDICIÓN DE BOLSILLO LA WEB EN DISPOSITIVOS MÓVILES CSS3 HTML5 JS JAVIER USOBIAGA SUBFLASH 2011
2. 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
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. ESTRATEGIAS 1 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. CSS3 2 OPTIMIZANDO RECURSOS
20. Menos imágenes.
21. Menos imágenes. Menos Javascript.
22. Menos imágenes. Menos Javascript. Menos peticiones.
23. gradients border-radius RGBa box-shadow @font-face
24. gradients border-radius RGBa box-shadow @font-face
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. HTML5 3 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. HTML5 — JS 4 AMPLIANDO FUNCIONALIDADES
43. local storage offline (cache) web workers web sockets
44. canvas http://playbiolab.com/
45. geolocalización
46. TOUCH 5 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. http://plugins.jquery.com/project/swipe swipe
50. http://jgestures.codeplex.com/ gestures
51. FRAMEWORKS JS 6 ¿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