Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User First

User First

Guille Paz

May 14, 2015
Tweet

More Decks by Guille Paz

Other Decks in Technology

Transcript

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

    View Slide

  2. - Made in Buenos Aires, Argentina
    - Front-end Developer
    @pazguille (twitter / github)
    Guille Paz

    View Slide

  3. Mango
    https://getmango.com

    View Slide

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

    View Slide

  5. User First
    Red Innova 2015

    View Slide

  6. View Slide

  7. Tareas

    View Slide

  8. Contexto

    View Slide

  9. Mobile First

    View Slide

  10. Basico

    View Slide

  11. Basico

    View Slide

  12. Basico

    View Slide

  13. El usuario NO hace esto!

    View Slide

  14. Content First

    View Slide

  15. ● Eventos Touch (gestos / fluidos)
    ● Teclados (form/inputs)
    ● API de vibración (validaciones)
    ● Camara (escanear tarjetas / IO8)
    ● Geolocalizar

    View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. https://panel.getmango.com

    View Slide

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

    View Slide

  24. View Slide

  25. Funcionalidad
    Core

    View Slide

  26. Progressive
    Enhancement

    View Slide

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

    View Slide

  28. View Slide

  29. View Slide

  30. Contexto

    View Slide

  31. View Slide

  32. Offline First

    View Slide

  33. View Slide

  34. Offline NO es un error!

    View Slide

  35. Offline ES un estado!

    View Slide

  36. Offline ES mobile!

    View Slide

  37. Offline ES realidad!

    View Slide

  38. E

    View Slide

  39. View Slide

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

    View Slide

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

    View Slide

  42. View Slide

  43. Por qué?

    View Slide

  44. UX

    View Slide

  45. Performance

    View Slide

  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

    View Slide

  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

    View Slide

  48. Cómo?

    View Slide

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

    View Slide

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

    View Slide

  51. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline

    View Slide

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

    View Slide

  53. ● Separar Data - App (templates, assets)
    ● Servir App (templates, assets)
    ● Guardar Data offline
    ● Detectar conexión
    ● Sincronizar la Data (dificil)

    View Slide

  54. Tools

    View Slide

  55. ● Web Storage (localStorage, indexDB)

    View Slide

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

    View Slide

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

    View Slide

  58. ● Web Storage (localStorage, indexDB)
    ● AppCache (manifest.appcache)
    ● ServiceWorkers
    ● Hood.ie
    ● PouchDB

    View Slide

  59. navigator.onLine ??

    View Slide

  60. Ejemplos

    View Slide

  61. http://offlinestat.es

    View Slide

  62. http://offlinefirst.org

    View Slide

  63. Gracias!
    Red Innova 2015

    View Slide