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.
De web a web, mobile 
web. 
Asier Marqués 
@asiermarques
“El contenido es el 
rey”
¿Responsive vs Mobile 
Web? 
• El contenido es el rey pero la UX también debe 
serlo. 
• El tamaño importa 
• El responsiv...
airbnb
facebook
Badoo
Cloudsound
¿Web Mobile VS Nativo/ 
Híbrido? 
PROS 
• Estamos libres de las políticas de App Stores 
• Actualizar la aplicación no es ...
¿Web Mobile VS Nativo/ 
Híbrido? 
CONTRAS 
• No estamos en el canal de aplicaciones 
• Nos perdemos ciertos beneficios de ...
¿Será opcional crear una 
web app mobile en el 2015?
Cómo hacerlo 
• SPA, single page application vs MVC tradicional 
• Respetando convenciones de diseño de cada 
plataforma v...
Frameworks 
• ionic framework 
• onsen ui 
• chocolat chip ui 
• app.js 
• mobile angular ui
Hacernos nuestro 
framework 
• HTML 5 + “cosas” de cada plataforma 
• CSS 3, transiciones y animaciones!important 
• Javas...
Touch events 
• 300ms delay 
• Eventos 
• touch: touchstart, touchend, touchmove 
• touch-action
Touch events 
• Hammer.js + ngHammer 
• touchejs
Notificaciones 
• Safari Push Notifications 
• HTML5 notification
CSS3 Transitions, ¿por qué? 
• En una app mobile, las animaciones y transiciones 
son parte de la UI y esenciales en la UX...
“Links don’t open apps.” 
Jason Grigsby
Las APPs nativas no son el 
enemigo 
• Esquema de url personalizados: nombre_app:// 
• Debemos asegurarnos de que la app e...
Detectar si una app puede 
estar instalada en el móvil 
• Cookies al registrarse en el servicio o redirigir a la 
app stor...
Smart Banners 
<meta name="apple-itunes-app" content=“app-id= 
myAppStoreID"/> 
Afiliados 
<meta name="apple-itunes-app" c...
Para Android 
jQuery Smart Banners 
http://jasny.github.io/jquery.smartbanner/
Media 
• YUI Compressor 
• Retina, CSS 
• Porcentaje de calidad en imágenes 
• Minimizado
Retina 
• En pantalla retina tenemos el doble de densidad 
para mostrar elementos gráficos 
• Debemos preparar imágenes al...
Retina CSS 
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
}
Retina CSS -webkit 
background-image: webkit-image-set( 
url(icon.png) 1x, 
url(icon@2x.png) 2x 
);
Retina JS 
if (window.devicePixelRatio > 1) { 
var images = $('img'); 
images.each(function(i) { 
var lowres = $(this).att...
Cache 
• Manifest 
• Proxy Caché HTTP, varnish 
• LocalStorage
Angular, rendimiento 
• {{ ::value }} 
• $scope.$digest en lugar de $scope.$apply 
• cuidado con ng-repeat y directivas ti...
Fuentes y rendimiento 
Utilizar siempre .woff 
Cuidado con cargar directamente las web fonts de Google o 
similares. 
• Op...
Fuentes y rendimiento 
Opción 1 
<style> 
@font-face { 
font-family: 'Whatever Sans'; 
src: local('Whatever Sans'), 
url(h...
Fuentes y rendimiento 
Opción 2 
if (localStorage.whateverSans) { 
//añadimos el contenido css al DOM 
} else { 
var reque...
Mapas 
• Leaflet 
• Angular Google Maps 
• MarkerCluster o Leaflet.markercluster para obtener 
mejor rendimiento 
• Cuidad...
Mapas, rendimiento
Monitorización, gestión de 
errores 
• caliper.io 
• bugsnag.com 
• rescue.js
Tests A/B 
• easyab -> http://romainstrock.com/easyAB/ 
• Abba -> https://github.com/maccman/abba 
• vwo.com
UI, Convenciones, Diseño 
http://www.mobile-patterns.com/ 
http://www.lovelyui.com/ 
http://www.pttrns.com/ 
http://ui.the...
Gracias 
Asier Marqués 
asier@simettric.com 
@asiermarques 
linkedin/in/asier
Próxima SlideShare
Cargando en…5
×

Desarrollo de Mobile Web Apps

1.047 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

×