Construyendo la web pensando en el usuario
Red Innova 2015
- Made in Buenos Aires, Argentina
- Front-end Developer
@pazguille (twitter / github)
Guille Paz
Mango
https://getmango.com
http://www.meetup.com/BAFrontend
User First
Red Innova 2015
El usuario NO hace esto!
● Eventos Touch (gestos / fluidos)
● Teclados (form/inputs)
● API de vibración (validaciones)
● Camara (escanear tarjetas / IO8)
● Geolocalizar
https://panel.getmango.com
mango/slideout
https://github.com/mango/slideout
FuncionalidadCore
Progressive Enhancement
Contenido / Funcionalidad core (HTML)
Mejoras UX! (CSS)
Más mejoras UX! (JavaScript)
Offline NO es un error!
Offline ES un estado!
Offline ES mobile!
Offline ES realidad!
Che, cuál era la dirección??
Nose chabón, no tengo wifi y el 3g anda como el %#*!
http://opensignal.com/coverage-maps/
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
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
● Separar Data - App (templates, assets)
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Guardar Data offline
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Guardar Data offline
● Detectar conexión
● Separar Data - App (templates, assets)
● Servir App (templates, assets)
● Guardar Data offline
● Detectar conexión
● Sincronizar la Data (dificil)
● Web Storage (localStorage, indexDB)
● Web Storage (localStorage, indexDB)
● AppCache (manifest.appcache)
● Web Storage (localStorage, indexDB)
● AppCache (manifest.appcache)
● ServiceWorkers
● Web Storage (localStorage, indexDB)
● AppCache (manifest.appcache)
● ServiceWorkers
● Hood.ie
● PouchDB
navigator.onLine ??
http://offlinestat.es
http://offlinefirst.org
Gracias!
Red Innova 2015