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
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 %#*!
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