User First
63
Construyendo la web pensando en el usuario Red Innova 2015
-
Upload
guillermo-paz -
Category
Technology
-
view
124 -
download
1
Transcript of User First
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
Tareas
Contexto
Mobile First
Basico
Basico
Basico
El usuario NO hace esto!
Content First
● Eventos Touch (gestos / fluidos)
● Teclados (form/inputs)
● API de vibración (validaciones)
● Camara (escanear tarjetas / IO8)
● Geolocalizar
https://panel.getmango.com
FuncionalidadCore
Progressive Enhancement
Contenido / Funcionalidad core (HTML)
Mejoras UX! (CSS)
Más mejoras UX! (JavaScript)
Contexto
Offline First
Offline NO es un error!
Offline ES un estado!
Offline ES mobile!
Offline ES realidad!
E
Che, cuál era la dirección??
Nose chabón, no tengo wifi y el 3g anda como el %#*!
Por qué?
UX
Performance
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
Cómo?
● 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)
Tools
● 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 ??
Ejemplos
http://offlinestat.es
http://offlinefirst.org
Gracias!
Red Innova 2015
![OpenOffice.org User Guide · OpenOffice.org User Guide for Version 1.1.x [OpenOffice.org User Guide] [1.5] First edition: [2004-05-07] First English edition: [2004-05-07]](https://static.fdocuments.us/doc/165x107/5b81356f7f8b9ae97b8bcf40/user-guide-user-guide-for-version-11x-user-guide-15-first-edition-2004-05-07.jpg)
