User First

Repasamos algunos conceptos que ya conocemos y "usamos" hoy en día para construir la web pensando en el usuario: User First, Mobile First, Content First y Progressive Enhancement... Están preparados para Offline First?

Links mencionados en la charla:
https://getmango.com
www.meetup.com/BAFrontend
https://github.com/Mango/slideout
https://getmango.com/blog/escanear-tarjetas-de-credito-en-safari-ios8
https://getmango.com/blog/validacion-de-formularios-con-la-api-de-vibracion
http://opensignal.com/coverage-maps/
http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html
http://offlinestat.es
http://offlinefirst.org
http://hood.ie/
http://pouchdb.com/

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