Diseñando la web móvil con HTML5 y CSS3

Presentación de Javier Usobiaga en el Barcelona Visual Sound 2012.

Transcript

1. DISEÑANDO LA WEB MÓVIL con HTM L5 y CSS3 Javier Usobiaga · @htmlboy Barcelona Visual Sound 2012
2. WEB MÓVIL
3. 2012 los smartphones no son cosa de geeks
4. PERO... ¿QUÉ ES UN MÓVIL?
5. ¿un dispositivo con una pantalla pequeña?
6. ¿un dispositivo que se puede llevar encima fácilmente?
7. ¿un dispositivo que se utiliza normalmente en la calle?
8. ¿cualquier dispositivo con una pantalla táctil y a color?
9. ¿cualquier dispositivo que no sea un sobremesa?
10. UN MÓVIL ES ESTO...
11. ...Y ESTO
12. UN MÓVIL ES ESTO...
13. ...Y ESTO
14. UN MÓVIL ES ESTO...
15. ...Y ESTO
16. UN MÓVIL ES ESTO...
17. ...Y ESTO
18. Y... ¿QUÉ HACEMOS?
19. HABLEMOS DE APPS
20. El debate de aplicaciones nativas vs. aplicaciones móbiles sigue siendo uno de los más polémicos. Me parece ridículo. Nadie tiene este problema respecto a las aplicaciones nativas vs. las aplicaciones de escritorio. Cennydd Bowles the-pastry-box-project.net/cennydd-bowles/2012-january-28
21. 80% de las apps de marca no llegan a 1.000 descargas bit.ly/app-fail
26. +esfuerzo +costes +dolor app app web { { {
27. ¿Y UNA TEMPLATE MÓVIL?
28. Creo que es peligroso denegar a los usuarios el acceso al contenido y la funcionalidad “por su propio bien.” Asumir que sabes lo que el visitante a tu página web quiere y necesita basándote solo en su dispositivo es ser muy condescendiente. Jeremy Keith adactio.com/journal/1716
33. { { { web web web +versiones +código +dolor
34. UNA WEB
35. La 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 the-haystack.com/2011/01/07/there-is-no-mobile-web
36. CONTENIDO
37. UNA WEB CÓMO SE VERÁ NUESTRA WEB ? ? ?
39. { web +flexible -control -costes
40. REGLA DE ORO* web app = template *O DE BRONCE contenido = una web
41. CON QUÉ HERRAMIENTAS CONTAMOS ¿ ?
42. NUEVA FILOSOFÍA fallback detectar capacidades olvidarse del pixel perfect
43. DETECTAR CAPACIDADES modernizr.com
45. VIEWPORT initial-scale width user-scalable maximum-scale = 1.0 = device-width = yes = NO!
46. VIEWPORT <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
47. MULTIMEDIA tags <video> y <audio> formato no unificado TIP: usar mp4 y webM Flash como fallback
48. VIDEO & AUDIO <video controls> <source src="video.mp4" > <source src="video.webm" > <!-- Puedes añadir un reproductor Flash --> </video>
49. FORMULARIOS nuevos input mejor experiencia de usuario validación nativa (o casi...)
50. FORMULARIOS <input type=”email” /> <input type=”url” /> <input type=”number” /> <input type=”date” />
51. FORMULARIOS
52. JS APIS local storage offline (cache) web workers web sockets
53. CANVAS playbiolab.com
54. GEOLOCALIZACIÓN
55. PANTALLAS TÁCTILES más intuitivo móvil != pantalla táctil touch = touch + hover + click más interacción != mejor
56. TOUCH EVENTS addEventListener('touchstart'...) ! addEventListener('touchmove'...) ! addEventListener('touchend'...)
57. SWIPE plugins.jquery.com/project/swipe
58. GESTURES jgestures.codeplex.com
60. CSS3
61. ¿POR QUÉ? menos imágenes menos js menos peticiones
62. WEBKIT MOZ MS O - - - - -( :
63. BORDES REDONDEADOS
64. BORDER RADIUS #box{ border-radius: 10px; } #circle{ border-radius: 50%; }
65. TRANSPARENCIAS
66. RGBA & HSLA #box{ background: rgba(84,69,54,.5); } #box2{ background: hsla(30,36%,33%,.5); }
67. SOMBRAS
68. BOX-SHADOW #box{ box-shadow: 5px 5px 10px #000; }
69. TIPOGRAFÍA
70. @FONT-FACE @font-face { font-family: 'myFont'; src: url('myFont.woff'); font-weight: normal; font-style: normal; } fontspring.com/blog/the-new-bulletproof-font-face-syntax
71. DEGRADADOS
72. DEGRADADOS leaverou.me/css3patterns
73. DEGRADADOS www.colorzilla.com/gradient-editor
74. GRADIENT #box { background-image: linear-gradient (45deg, red, black); }
75. TRANSFORMAR
76. TRANSFORM #box{ transform: scale(.5); }
77. TRANSFORMAR
78. TRANSFORM #box{ transform: rotate(45deg); }
79. TRANSFORMAR
80. TRANSFORM #box{ transform: translate(20px, 40px); }
81. TRANSFORMAR
82. TRANSFORM #box{ transform: skew(5deg, 30deg); }
83. MOVIMIENTO
84. TRANSITION #box{ transition: 1s background ease-in; }
85. ANIMATIONS mzl.la/ieGCct
86. MOVIMIENTO 3D
87. 3D ANIMATIONS tympanus.net/Development/ImageTransitions/index4.html
88. ADAPTAR LA WEB
89. ADAPTAR LA WEB
90. mediaqueri.es
91. MEDIA QUERIES @media screen and (max-width:320px){ #container {width: 300px;} header nav {display: none;} }
92. RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN R W D abookapart.com/products/responsive-web-design
93. RWD retícula fluida imágenes flexibles media queries
94. TARGET CONTEXTO I .. alistapart.com/articles/responsive-web-design
95. RESPONSIVE #container .column{ width: 67.0212765%; /* 630/940 */ margin-right: 2.12765%; /* 20/940 */ } .img-container img{ max-width: 100%; }
96. MOBILE FIRST 1 2 3 abookapart.com/products/mobile-first
97. RESUMIENDO las apps no son la (única) solución templates = posibles incoherencias el responsive web design es difícil
98. ¿LA SOLUCIÓN?
100. GRACIAS ¿preguntas? Javier Usobiaga · @htmlboy Swwweet.com
101. CRÉDITOS http://www.flickr.com/photos/joshfassbind/4683365102 http://www.flickr.com/photos/docsearls/2268395744 http://www.flickr.com/photos/hermida/5442243540 http://www.flickr.com/photos/yourdon/4064143718 http://www.flickr.com/photos/bendodson/5338445045 http://www.flickr.com/photos/rafelmiro/5090998436 http://www.flickr.com/photos/jaynev/5831853872