• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Diseño y animación en la web movil
 

Diseño y animación en la web movil

on

  • 6,613 views

 

Statistics

Views

Total Views
6,613
Views on SlideShare
2,623
Embed Views
3,990

Actions

Likes
7
Downloads
184
Comments
0

3 Embeds 3,990

http://www.desarrolloweb.com 3908
http://desarrolloweb.com 81
https://www.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Diseño y animación en la web movil Diseño y animación en la web movil Presentation Transcript

  • 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) Responsive Web Design5) Recursos útiles: Frameworks y librerías para eldiseño y animación en la web móvil
  • Mobile Internet, nueva era tecnológicaFuente: Morgan Stanley
  • Crecimiento de Internet móvil Fuente: Morgan StanleyFuente: http://blog.kissmetrics.com/infographics/
  • 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://gettag.mobi
  • Usas el móvil mientras que...
  • Usas el móvil mientras que...
  • 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
  • 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 en los campos password Utilizar campos input del HTML5 Alinear etiquetas arriba Recordar datos introducidos anteriormente Obtener automáticamente los datos que se pueda
  • 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"><meta name="HandheldFriendly" content="true" /><meta name="viewport"content="width=device-width, initial-scale=1">
  • Configurar Viewport
  • 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">
  • Dos versiones de tu sitio o una única web? www.jj.com m.jj.com www.jj.mobi
  • 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/articles/responsive-web-design/
  • 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){ … }
  • 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/scottjehl/RespondMediatizrhttps://github.com/pyrsmk/mediatizr
  • 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/