Recomendados
Mais conteúdo relacionado
Semelhante a Diseño y animación en la web movil
Semelhante a Diseño y animación en la web movil (20)
Último
Último (20)
Diseño y animación en la web movil
- 1. Diseño y animación en la web móvil Miguel Angel Alvarez DesarrolloWeb.com @alvarezmiguelan
- 2. 1) Importancia de la web móvil 2) Características y usabilidad del diseño móvil 3) Documentos HTML optimizados para móviles 4) Responsive Web Design 5) Recursos útiles: Frameworks y librerías para el diseño y animación en la web móvil
- 3. Mobile Internet, nueva era tecnológica Fuente: Morgan Stanley
- 4. Crecimiento de Internet móvil Fuente: Morgan Stanley Fuente: http://blog.kissmetrics.com/infographics/
- 5. Sitios web optimizados para la web móvil Fuente: http://blog.kissmetrics.com/infographics/
- 6. Características y usabilidad del diseño en la web móvil Fuente: Microsoft Tag http://gettag.mobi
- 7. Usas el móvil mientras que...
- 8. Usas el móvil mientras que...
- 9. Usas el móvil mientras que... a) Generalmente está haciendo otras cosas b) Ver algo concreto y tienen menos tiempo para consumirlo c) Velocidad de conexión. Planos de datos limitados
- 11. Usabilidad en sitios para móviles http://www.w3.org/TR/mobile-bp/
- 12. Usabilidad en sitios para móviles Pantallas
- 13. Usabilidad en sitios para móviles Pantallas El foco no es tu sitio
- 14. Usabilidad en sitios para móviles Pantallas El foco no es tu sitio Layout específico
- 15. Usabilidad en sitios para móviles Pantallas El foco no es tu sitio Layout específico Navegación
- 16. Usabilidad en sitios para móviles Uso de imágenes
- 17. Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos
- 18. Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos No a los plugins
- 19. Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos No a los plugins Los eventos cambian
- 20. Usabilidad en sitios para móviles http://www.slideshare.net/williamcraig
- 21. Usabilidad en formularios Minimizar la entrada de texto Minimizar el número de campos Opción para ver la clave escrita en los campos password Utilizar campos input del HTML5 Alinear etiquetas arriba Recordar datos introducidos anteriormente Obtener automáticamente los datos que se pueda
- 23. Documentos HTML optimizados para móviles
- 24. Documentos HTML optimizados para móviles <!DOCTYPE html> <meta charset="utf-8">
- 25. Documentos HTML optimizados para móviles <!DOCTYPE html> <meta charset="utf-8"> <meta name="MobileOptimized" content="width"> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1">
- 27. Configurar Viewport • Width • Height • initial-scale • minimum-scale • maximum-scale • user-scalable <meta name = "viewport" content = "user-scalable=no, width=device-width, initial-scale=1">
- 28. Dos versiones de tu sitio o una única web? www.jj.com m.jj.com www.jj.mobi
- 29. Dos versiones de tu sitio o una única web?
- 30. Dos versiones de tu sitio o una única web?
- 31. Dos versiones de tu sitio o una única web?
- 33. Responsive Web Design 1. CSS3 media queries 2. Rejillas fluidas 3. Imágenes fluidas Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/
- 34. CSS3 Media Queries <link rel="stylesheet" type="text/css" href="estilo.css" media="screen" /> @media screen and (min-width:1000px){ … } @media screen and (max-width:320px){ … }
- 35. mediaqueri.es
- 39. 1140 CSS Grid http://cssgrid.net/
- 41. 320 and up http://stuffandnonsense.co.uk/projects/320andup/
- 53. The M Project http://the-m-project.org/
- 57. Súbete a este tren http://www.flickr.com/photos/ejazasi/253032421/