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

32
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

Upload: juan-eladio-sanchez-rosas

Post on 08-Feb-2017

911 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: 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

Page 2: Curso: Diseño de apps y webs móviles - Parte 2

De la idea al prototipo

Basado en Diseño de apps y webs móvilesSesión 1

1 2 3

Page 3: Curso: Diseño de apps y webs móviles - Parte 2

¡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

Page 4: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 5: Curso: Diseño de apps y webs móviles - Parte 2

4. Probando diseños para móviles

Diseño de apps y webs móviles4

Page 6: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 7: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 8: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 9: Curso: Diseño de apps y webs móviles - Parte 2

¿Porqué necesitamos probar?

Probar con un usuario es mucho mejor que con ninguno (y mientras más temprano, mejor)

Page 10: Curso: Diseño de apps y webs móviles - Parte 2

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.

Page 11: Curso: Diseño de apps y webs móviles - Parte 2

5. Tecnologías web móviles

Diseño de apps y webs móviles5

Page 12: Curso: Diseño de apps y webs móviles - Parte 2

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.

Page 13: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 14: Curso: Diseño de apps y webs móviles - Parte 2

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.

Page 15: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 16: Curso: Diseño de apps y webs móviles - Parte 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).

Page 17: Curso: Diseño de apps y webs móviles - Parte 2

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.

Page 18: Curso: Diseño de apps y webs móviles - Parte 2

5. Cordova Core PluginsBattery Status

CameraConsoleContactsDevice

Device Motion (Accelerometer)Device Orientation (Compass)

DialogsFileSystem

File TransferGeolocation

GlobalizationInAppBrowser

MediaMedia Capture

Network Information (Connection)

SplashscreenVibration

Status BarWhitelist

Page 19: Curso: Diseño de apps y webs móviles - Parte 2

¿Porqué nos tomamos el tiempo en detallar tantas funcionalidades?

Porque así sabremos cuántas funcionalidades reales podemos incluir nuestra web/app.

Page 20: Curso: Diseño de apps y webs móviles - Parte 2

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.

Page 21: Curso: Diseño de apps y webs móviles - Parte 2

6. Implementando nuestro diseño de web/app móvil

Diseño de apps y webs móviles6

Page 22: Curso: Diseño de apps y webs móviles - Parte 2

Hay muchas formas de generar interfaces web móviles

Si les suena jQuery Mobile o Bootstrap, están cerca. Pero no los veremos aquí.

Page 23: Curso: Diseño de apps y webs móviles - Parte 2

6. Interfaces móvilesApp Framework Cambia su apariencia de acuerdo

al sistema operativo

Page 24: Curso: Diseño de apps y webs móviles - Parte 2

6. Interfaces móvilesRatchet Basado en Bootstrap, pero

optimizado para móviles

goratchet.com

Page 25: Curso: Diseño de apps y webs móviles - Parte 2

6. Interfaces móvilesIonic Framework (o SDK) Utiliza Angular

Es parte de un ecosistema de herramientas mas grande

ionicframework.com

Page 26: Curso: Diseño de apps y webs móviles - Parte 2

6. Interfaces móvilesFramework7 Una interfaz con apariencia de

iOS o Material Design

www.idangero.us/framework7

Page 27: Curso: Diseño de apps y webs móviles - Parte 2

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.

Page 28: Curso: Diseño de apps y webs móviles - Parte 2

¡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

Page 29: Curso: Diseño de apps y webs móviles - Parte 2

Ahora te toca poner esto en práctica

Realiza todo el proceso con tu prototipo de web/app

Page 30: Curso: Diseño de apps y webs móviles - Parte 2

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

Page 31: Curso: Diseño de apps y webs móviles - Parte 2

¿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

Page 32: 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 [about.me/juaneladio]