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