Diseño y animaciónen la web móvilMiguel Angel AlvarezDesarrolloWeb.com@alvarezmiguelan
1) Importancia de la web móvil2) Características y usabilidad del diseño móvil3) Documentos HTML optimizados para móviles4...
Mobile Internet, nueva era tecnológicaFuente: Morgan Stanley
Crecimiento de Internet móvil                                                    Fuente: Morgan StanleyFuente: http://blog...
Sitios web optimizados para la web móvilFuente: http://blog.kissmetrics.com/infographics/
Características y usabilidaddel diseño en la web móvil                   Fuente: Microsoft Tag                   http://ge...
Usas el móvil mientras que...
Usas el móvil mientras que...
Usas el móvil mientras que...                   a) Generalmente está                   haciendo otras cosas               ...
http://www.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth
Usabilidad en sitios para móvileshttp://www.w3.org/TR/mobile-bp/
Usabilidad en sitios para móviles Pantallas
Usabilidad en sitios para móviles Pantallas El foco no es tu sitio
Usabilidad en sitios para móviles Pantallas El foco no es tu sitio Layout específico
Usabilidad en sitios para móviles Pantallas El foco no es tu sitio Layout específico Navegación
Usabilidad en sitios para móviles Uso de imágenes
Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos
Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos No a los plugins
Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos No a los plugins Los eventos cambian
Usabilidad en sitios para móvileshttp://www.slideshare.net/williamcraig
Usabilidad en formularios Minimizar la entrada de texto Minimizar el número de campos Opción para ver la clave escrita ...
Usabilidad en formularios
Documentos HTML optimizados para móviles
Documentos HTML optimizados para móviles<!DOCTYPE html><meta charset="utf-8">
Documentos HTML optimizados para móviles<!DOCTYPE html><meta charset="utf-8"><meta name="MobileOptimized" content="width">...
Configurar Viewport
Configurar Viewport•   Width•   Height•   initial-scale•   minimum-scale•   maximum-scale•   user-scalable<meta name = "vi...
Dos versiones de tu sitio o una única web?                            www.jj.com                            m.jj.com      ...
Dos versiones de tu sitio o una única web?
Dos versiones de tu sitio o una única web?
Dos versiones de tu sitio o una única web?
Responsive Web Design
Responsive Web Design1. CSS3 media queries2. Rejillas fluidas3. Imágenes fluidasEthan Marcottehttp://www.alistapart.com/ar...
CSS3 Media Queries<link rel="stylesheet" type="text/css"href="estilo.css" media="screen" />@media screen and (min-width:10...
mediaqueri.es
Less Framework http://lessframework.com/
Frameless http://framelessgrid.com/
Golden Grid http://goldengridsystem.com/
1140 CSS Grid http://cssgrid.net/
Columnal http://cssgrid.net/
320 and up http://stuffandnonsense.co.uk/projects/320andup/
Skeleton http://www.getskeleton.com/
Responsive-Imageshttps://github.com/filamentgroup/Responsive-Images
src.sencha.iohttp://www.sencha.com/learn/how-to-use-src-sencha-io/
Polyfill Media Queriescss3-mediaqueries-jshttp://code.google.com/p/css3-mediaqueries-js/Respond.jshttps://github.com/scott...
Screenfly http://quirktools.com/screenfly/
resizeMyBrowser http://resizemybrowser.com/
jQuery Mobile http://jquerymobile.com/
Sencha Touchhttp://www.sencha.com/products/touch/
Sencha Animatorhttp://www.sencha.com/products/animator/
KendoUI Mobile http://jquerymobile.com/
jQTouch http://jqtouch.com/
The M Project http://the-m-project.org/
DHTMLX Touch http://dhtmlx.com/touch/
Wink http://www.winktoolkit.org/
Primero móvilhttp://www.netmagazine.com/features/mobile-first
Súbete a este tren                http://www.flickr.com/photos/ejazasi/253032421/
Upcoming SlideShare
Loading in …5
×

Diseño y animación en la web movil

6,977 views

Published on

Published in: Technology

Diseño y animación en la web movil

  1. 1. Diseño y animaciónen la web móvilMiguel Angel AlvarezDesarrolloWeb.com@alvarezmiguelan
  2. 2. 1) Importancia de la web móvil2) Características y usabilidad del diseño móvil3) Documentos HTML optimizados para móviles4) Responsive Web Design5) Recursos útiles: Frameworks y librerías para eldiseño y animación en la web móvil
  3. 3. Mobile Internet, nueva era tecnológicaFuente: Morgan Stanley
  4. 4. Crecimiento de Internet móvil Fuente: Morgan StanleyFuente: http://blog.kissmetrics.com/infographics/
  5. 5. Sitios web optimizados para la web móvilFuente: http://blog.kissmetrics.com/infographics/
  6. 6. Características y usabilidaddel diseño en la web móvil Fuente: Microsoft Tag http://gettag.mobi
  7. 7. Usas el móvil mientras que...
  8. 8. Usas el móvil mientras que...
  9. 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
  10. 10. http://www.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth
  11. 11. Usabilidad en sitios para móvileshttp://www.w3.org/TR/mobile-bp/
  12. 12. Usabilidad en sitios para móviles Pantallas
  13. 13. Usabilidad en sitios para móviles Pantallas El foco no es tu sitio
  14. 14. Usabilidad en sitios para móviles Pantallas El foco no es tu sitio Layout específico
  15. 15. Usabilidad en sitios para móviles Pantallas El foco no es tu sitio Layout específico Navegación
  16. 16. Usabilidad en sitios para móviles Uso de imágenes
  17. 17. Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos
  18. 18. Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos No a los plugins
  19. 19. Usabilidad en sitios para móviles Uso de imágenes Se trabaja con los dedos No a los plugins Los eventos cambian
  20. 20. Usabilidad en sitios para móvileshttp://www.slideshare.net/williamcraig
  21. 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
  22. 22. Usabilidad en formularios
  23. 23. Documentos HTML optimizados para móviles
  24. 24. Documentos HTML optimizados para móviles<!DOCTYPE html><meta charset="utf-8">
  25. 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">
  26. 26. Configurar Viewport
  27. 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. 28. Dos versiones de tu sitio o una única web? www.jj.com m.jj.com www.jj.mobi
  29. 29. Dos versiones de tu sitio o una única web?
  30. 30. Dos versiones de tu sitio o una única web?
  31. 31. Dos versiones de tu sitio o una única web?
  32. 32. Responsive Web Design
  33. 33. Responsive Web Design1. CSS3 media queries2. Rejillas fluidas3. Imágenes fluidasEthan Marcottehttp://www.alistapart.com/articles/responsive-web-design/
  34. 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. 35. mediaqueri.es
  36. 36. Less Framework http://lessframework.com/
  37. 37. Frameless http://framelessgrid.com/
  38. 38. Golden Grid http://goldengridsystem.com/
  39. 39. 1140 CSS Grid http://cssgrid.net/
  40. 40. Columnal http://cssgrid.net/
  41. 41. 320 and up http://stuffandnonsense.co.uk/projects/320andup/
  42. 42. Skeleton http://www.getskeleton.com/
  43. 43. Responsive-Imageshttps://github.com/filamentgroup/Responsive-Images
  44. 44. src.sencha.iohttp://www.sencha.com/learn/how-to-use-src-sencha-io/
  45. 45. Polyfill Media Queriescss3-mediaqueries-jshttp://code.google.com/p/css3-mediaqueries-js/Respond.jshttps://github.com/scottjehl/RespondMediatizrhttps://github.com/pyrsmk/mediatizr
  46. 46. Screenfly http://quirktools.com/screenfly/
  47. 47. resizeMyBrowser http://resizemybrowser.com/
  48. 48. jQuery Mobile http://jquerymobile.com/
  49. 49. Sencha Touchhttp://www.sencha.com/products/touch/
  50. 50. Sencha Animatorhttp://www.sencha.com/products/animator/
  51. 51. KendoUI Mobile http://jquerymobile.com/
  52. 52. jQTouch http://jqtouch.com/
  53. 53. The M Project http://the-m-project.org/
  54. 54. DHTMLX Touch http://dhtmlx.com/touch/
  55. 55. Wink http://www.winktoolkit.org/
  56. 56. Primero móvilhttp://www.netmagazine.com/features/mobile-first
  57. 57. Súbete a este tren http://www.flickr.com/photos/ejazasi/253032421/

×