Desarrollo para Google Glass
Upcoming SlideShare
Loading in...5
×
 

Desarrollo para Google Glass

on

  • 982 views

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

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.

Statistics

Views

Total Views
982
Views on SlideShare
960
Embed Views
22

Actions

Likes
5
Downloads
30
Comments
0

1 Embed 22

https://twitter.com 22

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Desarrollo para Google Glass Desarrollo para Google Glass Presentation Transcript

  • 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
  • Google Glass
  • • 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
  • para siempre hace un año hace un mes ahora
  • 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
  • Desarrollo de apps para Google Glass
  • Glassware (sust.) Se refiere a los Servicios web que pueden enviar y recibir contenido hacia y desde Glass.
  • 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
  • ¡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.
  • Desarrollando Glassware con el GDK
  • Desarrollando Glassware con el Mirror API REST
  • 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
  • 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" }
  • Bienvenido al PHP Quick Start del API de Mirror
  • Principios de diseño para Google Glass
  • 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.
  • 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.
  • 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.
  • 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
  • Modelos de interacción y bloques de construcción en Google Glass
  • 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
  • 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.
  • Live Cards (sust., obj.) - GDK Contienen información que es importante en el momento. Se actualizan constantemente y se mantienen frescas y relevantes.
  • 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.
  • Inmersiones (vista, acción.) Pueden invadir temporalmente el Timeline para ofrecer experiencias personalizadas e interactivas en Glass. Arrastra hacia abajo para regresar
  • Comandos (acción) Glass usa gestos tradicionales pero también tiene capacidad para activación por voz y gestos de movimiento.
  • Diseñando para Google Glass
  • Pantalla de Glass Moto X Glass 3:1 4.7“, 1184 x 720 px 1.5“, 640 x 360 px
  • Pantalla de Glass 640 px 10:34 “ok glass” 360 px
  • Regiones de una Tarjeta
  • 1. Área principal
  • 2. Imagen con texto
  • 3. Autor y contenido
  • 4. Con columna izquierda
  • 5. Lista
  • Colores
  • Colores
  • Tipografía Glass muestra la mayoría del texto en esta tipografía Glass muestra el texto en 26 px en esta tipografía
  • 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
  • Redacción para Glass Extender duración deMauricio Enviar un mensaje a la grabaciónvideo Extender Enviar mensaje just now
  • 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';
  • http://www.glasssim.com
  • ? ok, ¿preguntas?
  • 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
  • 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