Diseñando la web móvil con HTML5 y CSS3
12 recomendaciones4,070 vistas
Este documento discute brevemente las aplicaciones móviles versus el diseño web responsivo. Señala que las aplicaciones nativas no son siempre la mejor solución y que el diseño web responsivo, aunque difícil, permite crear una experiencia coherente en diferentes dispositivos con una sola versión del sitio web.
Diseñando la web móvil con HTML5 y CSS3
- 1. Ó V I L E B M L A W C SS 3 N D O M L 5 y E Ñ A o n H T S c DI 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
- 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. 8 0 % de las apps de marca no llegan a 1.000 descargas bit.ly/app-fail
- 26. +esfuerzo +costes +dolor app app web { { {
- 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. +versiones +código +dolor web web web { { {
- 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. CÓMO SE VERÁ NUESTRA WEB UNA WEB ? ? ?
- 39. +flexible -control -costes web {
- 40. REGLA DE ORO* web app = template contenido = una web *O DE BRONCE
- 41. ¿ CON QUÉ HERRAMIENTAS CONTAMOS ?
- 42. O F Í A ILO S V A F fallback N U E detectar capacidades olvidarse del pixel perfect
- 43. DETECTAR CAPACIDADES modernizr.com
- 45. VIEWPORT initial-scale = 1.0 width = device-width user-scalable = yes maximum-scale = 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
- 54. GEOLOCALIZACIÓN
- 55. PANTALLAS TÁCTILES más intuitivo móvil != pantalla táctil touch = touch + hover + click más interacción != mejor
- 60. CSS3
- 61. ¿POR menos imágenes menos js QUÉ? menos peticiones
- 62. - WEBKIT - :-( - MOZ MS - O
- 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
- 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
- 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 R W DESIGN D abookapart.com/products/responsive-web-design
- 93. RWD retícula fluida imágenes flexibles media queries
- 94. TARGET I .. CONTEXTO 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. C I AS G R ¿ A p re gu nta s? Javier Usobiaga · @htmlboy Swwweet.com