User First

User First

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

May 14, 2015
Tweet

Transcript

  1. Construyendo la web pensando en el usuario Red Innova 2015

  2. - Made in Buenos Aires, Argentina - Front-end Developer @pazguille

    (twitter / github) Guille Paz
  3. Mango https://getmango.com

  4. http://www.meetup.com/BAFrontend

  5. User First Red Innova 2015

  6. None
  7. Tareas

  8. Contexto

  9. Mobile First

  10. Basico

  11. Basico

  12. Basico

  13. El usuario NO hace esto!

  14. Content First

  15. • Eventos Touch (gestos / fluidos) • Teclados (form/inputs) •

    API de vibración (validaciones) • Camara (escanear tarjetas / IO8) • Geolocalizar
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. https://panel.getmango.com

  23. mango/slideout https://github.com/mango/slideout

  24. None
  25. Funcionalidad Core

  26. Progressive Enhancement

  27. Contenido / Funcionalidad core (HTML) Mejoras UX! (CSS) Más mejoras

    UX! (JavaScript)
  28. None
  29. None
  30. Contexto

  31. None
  32. Offline First

  33. None
  34. Offline NO es un error!

  35. Offline ES un estado!

  36. Offline ES mobile!

  37. Offline ES realidad!

  38. E

  39. None
  40. Che, cuál era la dirección??

  41. Nose chabón, no tengo wifi y el 3g anda como

    el %#*!
  42. None
  43. Por qué?

  44. UX

  45. Performance

  46. Los usuarios esperan que los sitios se carguen en dos

    segundos o menos — a los 3 segundos, una gran parte abandona el sitio. http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html
  47. Los usuarios van a dejar de visitar un sitio si

    es más lento que la competencia, por más de 250 milisegundos. http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html
  48. Cómo?

  49. • Separar Data - App (templates, assets)

  50. • Separar Data - App (templates, assets) • Servir App

    (templates, assets)
  51. • Separar Data - App (templates, assets) • Servir App

    (templates, assets) • Guardar Data offline
  52. • Separar Data - App (templates, assets) • Servir App

    (templates, assets) • Guardar Data offline • Detectar conexión
  53. • Separar Data - App (templates, assets) • Servir App

    (templates, assets) • Guardar Data offline • Detectar conexión • Sincronizar la Data (dificil)
  54. Tools

  55. • Web Storage (localStorage, indexDB)

  56. • Web Storage (localStorage, indexDB) • AppCache (manifest.appcache)

  57. • Web Storage (localStorage, indexDB) • AppCache (manifest.appcache) • ServiceWorkers

  58. • Web Storage (localStorage, indexDB) • AppCache (manifest.appcache) • ServiceWorkers

    • Hood.ie • PouchDB
  59. navigator.onLine ??

  60. Ejemplos

  61. http://offlinestat.es

  62. http://offlinefirst.org

  63. Gracias! Red Innova 2015