curso: diseño de apps y webs móviles - parte 2
TRANSCRIPT
![Page 1: Curso: Diseño de apps y webs móviles - Parte 2](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/3.jpg)
¡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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/7.jpg)
¿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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/8.jpg)
¿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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/9.jpg)
¿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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/19.jpg)
¿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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/26.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/28.jpg)
¡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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/29.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/30.jpg)
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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/31.jpg)
¿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](https://reader035.vdocuments.co/reader035/viewer/2022062218/589b1b051a28abc1148b6355/html5/thumbnails/32.jpg)
Diseño de apps y webs móvilesSesión 2: Del prototipo a la implementaciónJuan Eladio Sanchez Rosas [about.me/juaneladio]