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 full-size slide

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

    View full-size slide

  3. Mango
    https://getmango.com

    View full-size slide

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

    View full-size slide

  5. User First
    Red Innova 2015

    View full-size slide

  6. Mobile First

    View full-size slide

  7. El usuario NO hace esto!

    View full-size slide

  8. Content First

    View full-size slide

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

    View full-size slide

  10. https://panel.getmango.com

    View full-size slide

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

    View full-size slide

  12. Funcionalidad
    Core

    View full-size slide

  13. Progressive
    Enhancement

    View full-size slide

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

    View full-size slide

  15. Offline First

    View full-size slide

  16. Offline NO es un error!

    View full-size slide

  17. Offline ES un estado!

    View full-size slide

  18. Offline ES mobile!

    View full-size slide

  19. Offline ES realidad!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. ● Web Storage (localStorage, indexDB)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. navigator.onLine ??

    View full-size slide

  34. http://offlinestat.es

    View full-size slide

  35. http://offlinefirst.org

    View full-size slide

  36. Gracias!
    Red Innova 2015

    View full-size slide