Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Realidad Aumentada en iOS - iCon
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 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. 2. De la idea al prototipo Basado en Diseño de apps y webs móviles Sesión 1 1 2 3
  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. 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. 5. 4. Probando diseños para móviles Diseño de apps y webs móviles4
  6. 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. 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. 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. 9. ¿Porqué necesitamos probar? Probar con un usuario es mucho mejor que con ninguno (y mientras más temprano, mejor)
  10. 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. 11. 5. Tecnologías web móviles Diseño de apps y webs móviles5
  12. 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. 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. 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. 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. 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. 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. 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. 19. ¿Porqué nos tomamos el tiempo en detallar tantas funcionalidades? Porque así sabremos cuántas funcionalidades reales podemos incluir nuestra web/app.
  20. 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. 21. 6. Implementando nuestro diseño de web/app móvil Diseño de apps y webs móviles6
  22. 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. 23. 6. Interfaces móviles App Framework Cambia su apariencia de acuerdo al sistema operativo
  24. 24. 6. Interfaces móviles Ratchet Basado en Bootstrap, pero optimizado para móviles goratchet.com
  25. 25. 6. Interfaces móviles Ionic Framework (o SDK) Utiliza Angular Es parte de un ecosistema de herramientas mas grande ionicframework.com
  26. 26. 6. Interfaces móviles Framework7 Una interfaz con apariencia de iOS o Material Design www.idangero.us/framework7
  27. 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. 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. 29. Ahora te toca poner esto en práctica Realiza todo el proceso con tu prototipo de web/app
  30. 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. 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. 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]
  • CristhianGarcaApsteg

    Apr. 1, 2016

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.

Views

Total views

1,281

On Slideshare

0

From embeds

0

Number of embeds

59

Actions

Downloads

50

Shares

0

Comments

0

Likes

1

×