Desarrollo para Google Glass

923
-1

Published on

Mi presentación en el taller de apps (Glassware) para Google Glass. Habla de los principios de usabilidad de Glass, los modelos de desarrollo nativo (GDK) y remoto (Mirrror), así como los principios de diseño de glassware.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
923
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Desarrollo para Google Glass

  1. 1. De Móvil a Google Glass Mauricio Angulo S. Programador | Divulgador | Asesor de UX email > blog > twitter> mauricio@tesseractspace.com tesseractspace.com/blog twitter.com/mauricioangulo www.tesseractspace.com
  2. 2. Google Glass
  3. 3. • Qué es Google Glass y cómo funciona • Diferencias de diseño entre apps para smartphone y Glass • Principios de desarrollo para Glass • Lineamientos de diseño y usabilidad para Glass
  4. 4. para siempre hace un año hace un mes ahora
  5. 5. Smartphone vs Glass Aunque ambos son Computo Móvil, hay diferencias importantes a tener en cuenta: Acción Smartphone Glass Interacción Botones físicos, teclado físico o virtual, voz Touch panel, voz y gestos Interfase Visual y táctil, con controles e hipertexto Principalmente texto Pantalla Grande en formato vertical u horizontal Pequeña, en formato horizontal Conectividad Celular, WiFi, Bluetooth, etc. WiFi y Bluetooth, limitada Batería De 5 a 10 horas De 3 a 5 horas Memoria Expandible Limitada Apps Locales y web apps Locales y remotas
  6. 6. Desarrollo de apps para Google Glass
  7. 7. Glassware (sust.) Se refiere a los Servicios web que pueden enviar y recibir contenido hacia y desde Glass.
  8. 8. Al desarrollar Glassware tienes dos opciones del API. Escoge la correcta basada en tus necesidades. Si necesitas: GDK (Java) Interacción con el usuario en tiempo real Acceso al hardware Funcionalidad desconectada Mirror API (HTML5) Independencia de plataforma Infraestructura común Funcionalidad integrada
  9. 9. ¡O usa ambas! El API de Mirror Glassware puede invocar el Glassware de GDK por medio de un elemento de menú. Es posible usar este modelo híbrido para reutilizar propiedades web ya existentes que pueden tener funcionalidades completas en Glass.
  10. 10. Desarrollando Glassware con el GDK
  11. 11. Desarrollando Glassware con el Mirror API REST
  12. 12. Tu usuario Glass del usuario 2. Glassware almacena las credenciales 1. El usuario se autentica 3. Se inserta un cat fact Glass se sincroniza El usuario ve un cat fact
  13. 13. POST /mirror/v1/timeline HTTP/1.1 Host: www.googleapis.com Authorization: Bearer {auth token} Content-Type: application/json Content-Length: 26 { "text": "Hello world" } HTTP/1.1 201 Created Date: Tue, 25 Sep 2012 23:30:11 GMT Content-Type: application/json Content-Length: 303 { "kind": "glass#timelineItem", "id": "1234567890", "selfLink": "https://www.googleapis.com/mirror/v1/timeline/12345678 90", "created": "2012-09-25T23:28:43.192Z", "updated": "2012-09-25T23:28:43.192Z", "etag": ""G5BI0RWvj0jWdBrdWrPZV7xPKw/t25selcGS3uDEVT6FB09hAG-QQ"", "text": "Hello world" }
  14. 14. Bienvenido al PHP Quick Start del API de Mirror
  15. 15. Principios de diseño para Google Glass
  16. 16. 1. No estorbes al usuario Glass está diseñado para estar ahí cuando lo necesites y para que no estorbe cuando no lo necesites. Tu Glassware debe funcionar de la misma manera. Ofrece funcionalidad interesante que mejore el momento al usuario sin que lo invada.
  17. 17. 2. Sé relevante Muestra información en el lugar y tiempo correcto para cada uno de tus usuarios. Las experiencias más relevantes son también las más sorprendentes y llevan a una mayor satisfacción con el usuario.
  18. 18. 3. Evita lo innesperado Las funcionalidades innesperadas son peores en Glass que en otros dispositivos debido a que Glass está más cerca de los sentidos del usuario. No envies contenido con demasiada frecuencia o en momentos inoportunos. Siempre deja claro al usuario cuál es la intención de tu Glassware.
  19. 19. 4. Diseña para personas Diseña interfases que usen imágenes, una voz casual y gestos naturales. Enfócate en el modelo de de uso haz-y.olvida donde el usuario puede realizer una acción rápidamente y continuar con lo que estaba haciendo. ¿Cómo se ve todo desde allá arriba? just now
  20. 20. Modelos de interacción y bloques de construcción en Google Glass
  21. 21. Timeline (sust., obj.) Es una colección de Tarjetas organizadas de manera cronológica que Glass utiliza para presentar información al usuario. Futuro Presente Pasado
  22. 22. Static Cards (sust., obj.) – Mirror API Se insertan en el histórico del Timeline, se enfocan en una sola cosa, son visualmente claras y son simples de leer.
  23. 23. Live Cards (sust., obj.) - GDK Contienen información que es importante en el momento. Se actualizan constantemente y se mantienen frescas y relevantes.
  24. 24. Menús (acción., obj.) Las Tarjetas normalmente tienen menús que el usuario puede tocar o verbalizar para invocar acciones. Glass permite usar los menús predefinidos o crear menús personalizados.
  25. 25. Inmersiones (vista, acción.) Pueden invadir temporalmente el Timeline para ofrecer experiencias personalizadas e interactivas en Glass. Arrastra hacia abajo para regresar
  26. 26. Comandos (acción) Glass usa gestos tradicionales pero también tiene capacidad para activación por voz y gestos de movimiento.
  27. 27. Diseñando para Google Glass
  28. 28. Pantalla de Glass Moto X Glass 3:1 4.7“, 1184 x 720 px 1.5“, 640 x 360 px
  29. 29. Pantalla de Glass 640 px 10:34 “ok glass” 360 px
  30. 30. Regiones de una Tarjeta
  31. 31. 1. Área principal
  32. 32. 2. Imagen con texto
  33. 33. 3. Autor y contenido
  34. 34. 4. Con columna izquierda
  35. 35. 5. Lista
  36. 36. Colores
  37. 37. Colores
  38. 38. Tipografía Glass muestra la mayoría del texto en esta tipografía Glass muestra el texto en 26 px en esta tipografía
  39. 39. Redacción para Glass Tienes un espacio limitado para texto. Sigue estas recomendaciones al redactor texto para tu Glassware: • • • • • Se breve y conciso. Usa vocabulario sencillo. Habla como humano. Pon lo más importante al principio. Evita la repeitición
  40. 40. Redacción para Glass Extender duración deMauricio Enviar un mensaje a la grabaciónvideo Extender Enviar mensaje just now
  41. 41. https://mirror-api-playground.appspot.com/assets/css/base_style.css /*--------------------------------------- */ /* RESET */ * { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; } /*--------------------------------------- */ /* BASIC COMPONENTS */ /* Base card size, colors, and fonts. */ article { width: 640px; height: 360px; display: block; overflow: hidden; position: absolute; top: 0px; left: 0px; background-color: #000; color: #fff; font-family: 'Roboto';
  42. 42. http://www.glasssim.com
  43. 43. ? ok, ¿preguntas?
  44. 44. Links útiles Documentación para desarrollo https://developers.google.com/glass/ Google Mirror API PlayGround https://developers.google.com/glass/tools-downloads/playground Google Mirror Quickstart Code https://developers.google.com/glass/develop/mirror/quickstart/index
  45. 45. De Móvil a Google Glass Mauricio Angulo S. Programador | Divulgador | Asesor de UX email > blog > twitter> mauricio@tesseractspace.com tesseractspace.com/blog twitter.com/mauricioangulo www.tesseractspace.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×