Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Desarrollo de Mobile Web Apps

1.056 visualizaciones

Publicado el

Charla para el evento Sevilla Mobility Day.

Desde hace pocos años, desarrollar sitios y aplicaciones web aplicando diseños responsive ha dejado de ser opcional.

Para dispositivos móviles, empieza a ser necesario ir más allá y crear experiencias de usuario dedicadas a estos entornos.

Publicado en: Tecnología
  • Sé el primero en comentar

Desarrollo de Mobile Web Apps

  1. 1. De web a web, mobile web. Asier Marqués @asiermarques
  2. 2. “El contenido es el rey”
  3. 3. ¿Responsive vs Mobile Web? • El contenido es el rey pero la UX también debe serlo. • El tamaño importa • El responsive en dispositivos móviles puede “no escalar”
  4. 4. airbnb
  5. 5. facebook
  6. 6. Badoo
  7. 7. Cloudsound
  8. 8. ¿Web Mobile VS Nativo/ Híbrido? PROS • Estamos libres de las políticas de App Stores • Actualizar la aplicación no es un infierno • El soporte es directo • Podemos medir mejor
  9. 9. ¿Web Mobile VS Nativo/ Híbrido? CONTRAS • No estamos en el canal de aplicaciones • Nos perdemos ciertos beneficios de integración con el hardware • No podemos aprovechar el hardware del dispositivo para crear aplicaciones complejas
  10. 10. ¿Será opcional crear una web app mobile en el 2015?
  11. 11. Cómo hacerlo • SPA, single page application vs MVC tradicional • Respetando convenciones de diseño de cada plataforma vs Diseño propio
  12. 12. Frameworks • ionic framework • onsen ui • chocolat chip ui • app.js • mobile angular ui
  13. 13. Hacernos nuestro framework • HTML 5 + “cosas” de cada plataforma • CSS 3, transiciones y animaciones!important • Javascript (¿jQuery/Zepto?) • Angular • Media (Imágenes+Video+Audio) y assets • Caché
  14. 14. Touch events • 300ms delay • Eventos • touch: touchstart, touchend, touchmove • touch-action
  15. 15. Touch events • Hammer.js + ngHammer • touchejs
  16. 16. Notificaciones • Safari Push Notifications • HTML5 notification
  17. 17. CSS3 Transitions, ¿por qué? • En una app mobile, las animaciones y transiciones son parte de la UI y esenciales en la UX • Deben tener un sentido, en cada plataforma (si seguimos las convenciones) • No se trata de poner gatitos que saluden o copos de nieve (al menos en verano)
  18. 18. “Links don’t open apps.” Jason Grigsby
  19. 19. Las APPs nativas no son el enemigo • Esquema de url personalizados: nombre_app:// • Debemos asegurarnos de que la app esté instalada • Ideal para lanzar apps conocidas como WhatsApp o similares • Smart Banners
  20. 20. Detectar si una app puede estar instalada en el móvil • Cookies al registrarse en el servicio o redirigir a la app store • Smart Banners
  21. 21. Smart Banners <meta name="apple-itunes-app" content=“app-id= myAppStoreID"/> Afiliados <meta name="apple-itunes-app" content="app-id= myAppStoreID, affiliate-data=myAffiliateData”/> Pasar datos a la app <meta name="apple-itunes-app" content="app-id= myAppStoreID, app-argument=myURL"/>
  22. 22. Para Android jQuery Smart Banners http://jasny.github.io/jquery.smartbanner/
  23. 23. Media • YUI Compressor • Retina, CSS • Porcentaje de calidad en imágenes • Minimizado
  24. 24. Retina • En pantalla retina tenemos el doble de densidad para mostrar elementos gráficos • Debemos preparar imágenes alternativas para estas pantallas • Evitar el uso de imágenes para los iconos, utilizando WebFonts en su lugar
  25. 25. Retina CSS @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { }
  26. 26. Retina CSS -webkit background-image: webkit-image-set( url(icon.png) 1x, url(icon@2x.png) 2x );
  27. 27. Retina JS if (window.devicePixelRatio > 1) { var images = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = $(this).attr(‘data-src-retina‘); $(this).attr('src', highres); }); }
  28. 28. Cache • Manifest • Proxy Caché HTTP, varnish • LocalStorage
  29. 29. Angular, rendimiento • {{ ::value }} • $scope.$digest en lugar de $scope.$apply • cuidado con ng-repeat y directivas tipo ng-hide, ng-show, puede ser interesante considerar gestionarlos fuera de angular • Los filtros dentro de los ng-repeat pueden cargar también la app.
  30. 30. Fuentes y rendimiento Utilizar siempre .woff Cuidado con cargar directamente las web fonts de Google o similares. • Opción 1: cargar las fuentes de forma asíncrona • Opción 2: generar nuestro css para nuestras fuentes en woff y cargarlas en local storage http://bdadam.com/blog/loading-webfonts-with-high-performance. html
  31. 31. Fuentes y rendimiento Opción 1 <style> @font-face { font-family: 'Whatever Sans'; src: local('Whatever Sans'), url(http://fonts.gstatic.com/s/.../ODelI1aHBYDBqgeIA...Oz0jw624.woff) format('woff'); } </style>
  32. 32. Fuentes y rendimiento Opción 2 if (localStorage.whateverSans) { //añadimos el contenido css al DOM } else { var request = new XMLHttpRequest(); request.open('GET', '/path/to/whatever-sans.woff.css', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { localStorage.sourceSansPro = request.responseText; //añadimos el contenido css al DOM } request.send }
  33. 33. Mapas • Leaflet • Angular Google Maps • MarkerCluster o Leaflet.markercluster para obtener mejor rendimiento • Cuidado con los tiles si usamos visualizaciones procesadas por nosotros!
  34. 34. Mapas, rendimiento
  35. 35. Monitorización, gestión de errores • caliper.io • bugsnag.com • rescue.js
  36. 36. Tests A/B • easyab -> http://romainstrock.com/easyAB/ • Abba -> https://github.com/maccman/abba • vwo.com
  37. 37. UI, Convenciones, Diseño http://www.mobile-patterns.com/ http://www.lovelyui.com/ http://www.pttrns.com/ http://ui.theultralinx.com/ http://inspired-ui.com/ http://inspirationmobile.tumblr.com/ http://www.android-app-patterns.com/
  38. 38. Gracias Asier Marqués asier@simettric.com @asiermarques linkedin/in/asier

×