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? Link 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

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

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

22. https://panel.getmango.com

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

25. Funcionalidad
Core

26. Progressive
Enhancement

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

30. Contexto

32. Offline First

34. Offline NO es un error!

35. Offline ES un estado!

36. Offline ES mobile!

37. Offline ES realidad!

38. E

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

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

42. http://opensignal.com/coverage-maps/

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