curso: diseño de apps y webs móviles - parte 2
TRANSCRIPT
Diseño de apps y webs móvilesSesión 2: Del prototipo a la implementaciónJuan Eladio Sanchez Rosas [juaneladio]
4 5 6
De la idea al prototipo
Basado en Diseño de apps y webs móvilesSesión 1
1 2 3
¡Repaso!¿Qué ya sabemos?
PROTOTIPO
1
2
3
IDEA
3. Diseñando una experiencia de usuario
móvil
2. Planeando una web/app móvil
1. Porqué el contenido móvil es diferente
Entonces, ¿Qué haremos hoy?
PROTOTIPO
IDEA
6. Implementando nuestro diseño de
web/app móvil
5. Tecnologías web móviles
4. Probando diseños para móviles
IMPLEMENTACIÓN
4
6
6
4. Probando diseños para móviles
Diseño de apps y webs móviles4
4. Test de usabilidadObservar una persona a la vez tratando de usar algo para hacer
tareas típicas
y detectar y decidir corregir con el equipo de trabajo las cosas que lo confunden o frustran
¿Qué hacer?1. Participan algunos usuarios, preferible (no obligatoriamente)
usuarios finales.
2. No se le dice qué hacer en la web/app, el usuario lo debe
descubrir (¿qué harás luego?)
3. Cada observador directo/indirecto toma notas.
¿Qué hacer?4. Los desarrolladores e
interesados se reúnen luego y deciden que reparar antes de la
próxima prueba.
5. Se redactan los cambios a realizar.
No vas a probar si algo es bueno o malo, vas a descubrir problemas.
Problemas de usabilidad detectados
Observador 1:1.2.3.
Observador 2:
¿Porqué necesitamos probar?
Probar con un usuario es mucho mejor que con ninguno (y mientras más temprano, mejor)
Antes de avanzar, repasemos:
¿Cuáles son las dos acciones principales que definen un test
de usabilidad?
1. ____________ _________ ____________ _________
2. ____________ _________ ____________ _________
Si no puedes responder a la pregunta, retroceder y recordar.
Si ya los recuerdas, ¡felicidades!, haz completado la primera parte de la sesión.
5. Tecnologías web móviles
Diseño de apps y webs móviles5
5. HTML5HTML5 es una etiqueta para una
actualización en el lenguaje de marcado utilizado en la web.
Y asimismo abarca un conjunto de tecnologías para construir
aplicaciones web más poderosas.
5. HTML5 en el mundo móvil
Semantics–Forms
Offline & Storage–App Cache *–Local Storage–Indexed DB
–File APIDevice Access–Geolocation API
Hoy, desde una web se puede: Controlar las validaciones
de formulariosEl almacenamiento offline
El acceso al GPS
5. HTML5 en el mundo móvil
Multimedia–Audio & Video
3D, Graphics, Effects–SVG, Canvas
–WebGL–CSS3 3D
CSS3–Web Open Font Format
También podemos:Reproducir audio y video, incluso
protegido, y con subtítulosGenerar efectos de diversas
manerasControlar mejor cómo se ven los
objetos y utilizar más fuentes.
5. HTML5 en el mundo móvil
Y no nos olvidemos de:La conectividad bidireccional
Programar de manera asíncrona
Connectivity–Web Sockets
Performance & Integration–Web Workers
–XMLHttpRequest Level 2
Pero queremos más
Hay capacidades que, aunque las queremos en la web móvil, aún hoy en día sólo están disponibles en apps (o en Firefox OS).
5. HTML5 y Cordova¿Qué tenemos en un smartphone o tablet?
● Sensores● Hardware del dispositivo● Accesos a bases de datos
● Integraciones con tercerosCon Cordova tenemos acceso a esos componentes a través de
una Interfaz de Programación en JavaScript.
5. Cordova Core PluginsBattery Status
CameraConsoleContactsDevice
Device Motion (Accelerometer)Device Orientation (Compass)
DialogsFileSystem
File TransferGeolocation
GlobalizationInAppBrowser
MediaMedia Capture
Network Information (Connection)
SplashscreenVibration
Status BarWhitelist
¿Porqué nos tomamos el tiempo en detallar tantas funcionalidades?
Porque así sabremos cuántas funcionalidades reales podemos incluir nuestra web/app.
Antes de avanzar, repasemos:1. ¿Qué opciones técnicas tengo para
Almacenamiento Offline?
2. ¿Con qué estándar puedo controlar la apariencia de los objetos?
3. ¿Tengo acceso al GPS del móvil desde una app o desde una web?
4. ¿Tengo acceso al acelerómetro del móvil desde una app o web?
Si no recuerdas alguna de ellas retroceder y recordar.
Si ya los recuerdas, ¡felicidades!, haz completado la segunda parte de la sesión.
6. Implementando nuestro diseño de web/app móvil
Diseño de apps y webs móviles6
Hay muchas formas de generar interfaces web móviles
Si les suena jQuery Mobile o Bootstrap, están cerca. Pero no los veremos aquí.
6. Interfaces móvilesApp Framework Cambia su apariencia de acuerdo
al sistema operativo
6. Interfaces móvilesRatchet Basado en Bootstrap, pero
optimizado para móviles
goratchet.com
6. Interfaces móvilesIonic Framework (o SDK) Utiliza Angular
Es parte de un ecosistema de herramientas mas grande
ionicframework.com
6. Interfaces móvilesFramework7 Una interfaz con apariencia de
iOS o Material Design
www.idangero.us/framework7
La combinación de tecnologías que elijas tendrá consecuencias
Un framework te ayuda con algunas tareas simples, pero tendrás problemas si intentas algo adicional.
¡Terminamos! ¿Qué vimos hoy?
PROTOTIPO
IDEA
6. Implementando nuestro diseño de
web/app móvil
5. Tecnologías web móviles
4. Probando diseños para móviles
IMPLEMENTACIÓN
4
6
6
Ahora te toca poner esto en práctica
Realiza todo el proceso con tu prototipo de web/app
Referencias bibliográficasDon’t Make Me Think, Revisited: A
Common Sense Approach to Web Usability
by Steve KrugPublisher: New RidersRelease Date: December 2013
Taller de UX y diseño de appsBy Javier CuelloPublisher: disenoenviaje.comRelease Date: June 2014
HTML5 - Web developer guide | MDNBy Mozilla Developer Network and
individual contributorsdeveloper.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5
Can I use... Support tables for HTML5, CSS3, etc
By @Fyrdcaniuse.com
Overview - Apache CordovaBy The Apache Software Foundationcordova.apache.org/docs/en/latest/guide
/overview/
Intel® XDK Documentation | Intel® Developer Zone
By Intelsoftware.intel.com/en-us/xdk/docs/lp-
index
¿Esto tenía que ver con Mozilla?
Firefox OS soporta webs/apps basadas en tecnologías web
Mozilla Developer Network ofrece documentación sobre
tecnologías web
Diseño de apps y webs móvilesSesión 2: Del prototipo a la implementaciónJuan Eladio Sanchez Rosas [about.me/juaneladio]