En esta segunda parte del curso Diseño de apps y webs móviles veremos los pasos desde el prototipo hasta la implementación. Incluye: 4. Probando diseños para móviles, 5. Tecnologías web móviles, 6. Implementando nuestro diseño de web/app móvil.

1. Diseño de apps y webs móviles
Sesión 2: Del prototipo a la implementación
Juan Eladio Sanchez Rosas [juaneladio]
4 5 6

2. De la idea al prototipo
Basado en
Diseño de apps y webs móviles
Sesión 1
1 2 3

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

4. 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

5. 4. Probando diseños para
móviles
Diseño de apps y webs móviles4

6. 4. Test de usabilidad
Observar 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

7. ¿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.

8. ¿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:

9. ¿Porqué necesitamos probar?
Probar con un usuario es mucho mejor que con ninguno (y mientras
más temprano, mejor)

10. 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.

11. 5. Tecnologías web
móviles
Diseño de apps y webs móviles5

12. 5. HTML5
HTML5 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.

13. 5. HTML5 en el mundo móvil
Semantics
–Forms
Offline & Storage
–App Cache *
–Local Storage
–Indexed DB
–File API
Device Access
–Geolocation API
Hoy, desde una web se puede:
Controlar las validaciones
de formularios
El almacenamiento offline
El acceso al GPS

14. 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ítulos
Generar efectos de diversas
maneras
Controlar mejor cómo se ven los
objetos y utilizar más fuentes.

15. 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

16. 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).

17. 5. HTML5 y Cordova
¿Qué tenemos en un
smartphone o tablet?
●
Sensores
●
Hardware del dispositivo
●
Accesos a bases de datos
●
Integraciones con terceros
Con Cordova tenemos acceso a
esos componentes a través de
una Interfaz de Programación en
JavaScript.

18. 5. Cordova Core Plugins
Battery Status
Camera
Console
Contacts
Device
Device Motion (Accelerometer)
Device Orientation (Compass)
Dialogs
FileSystem
File Transfer
Geolocation
Globalization
InAppBrowser
Media
Media Capture
Network Information
(Connection)
Splashscreen
Vibration
Status Bar
Whitelist

19. ¿Porqué nos tomamos el tiempo en
detallar tantas funcionalidades?
Porque así sabremos cuántas funcionalidades reales podemos incluir
nuestra web/app.

20. 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.

21. 6. Implementando nuestro
diseño de web/app móvil
Diseño de apps y webs móviles6

22. Hay muchas formas de generar
interfaces web móviles
Si les suena jQuery Mobile o Bootstrap, están cerca.
Pero no los veremos aquí.

23. 6. Interfaces móviles
App Framework Cambia su apariencia de acuerdo
al sistema operativo

24. 6. Interfaces móviles
Ratchet Basado en Bootstrap, pero
optimizado para móviles
goratchet.com

25. 6. Interfaces móviles
Ionic Framework (o SDK) Utiliza Angular
Es parte de un ecosistema de
herramientas mas grande
ionicframework.com

26. 6. Interfaces móviles
Framework7 Una interfaz con apariencia de
iOS o Material Design
www.idangero.us/framework7

27. 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.

28. ¡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

29. Ahora te toca poner esto en
práctica
Realiza todo el proceso con tu prototipo de web/app

30. Referencias bibliográficas
Don’t Make Me Think, Revisited: A
Common Sense Approach to Web
Usability
by Steve Krug
Publisher: New Riders
Release Date: December 2013
Taller de UX y diseño de apps
By Javier Cuello
Publisher: disenoenviaje.com
Release Date: June 2014
HTML5 - Web developer guide | MDN
By Mozilla Developer Network and
individual contributors
developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5
Can I use... Support tables for HTML5,
CSS3, etc
By @Fyrd
caniuse.com
Overview - Apache Cordova
By The Apache Software Foundation
cordova.apache.org/docs/en/latest/guide
/overview/
Intel® XDK Documentation | Intel®
Developer Zone
By Intel
software.intel.com/en-us/xdk/docs/lp-
index

31. ¿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

32. Diseño de apps y webs móviles
Sesión 2: Del prototipo a la implementación
Juan Eladio Sanchez Rosas [about.me/juaneladio]