curso: diseño de apps y webs móviles - parte 2

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]