Microsoft Surface

1. Microsoft Surface Desarrollo de aplicaciones • Luis Guerrero • UX Software Advisor • PlainConcepts

2. Índice 01Introducción a Surface 02Experiencia de Usuario 03Desarrollo de aplicaciones 04Despliegue de Aplicaciones

3. 01 Introducción a Surface¿Qué es Surface? Es una mesa de 30 pulgadas que permite a los usuarios ejecutar aplicaciones que interactúan con contenido digital a través de: • Gestos • Toques • Y objetos físicos Elimina las barreras existentes entre la tecnología y las personas: • Haciendo esta transparente • Introduciendo nuevas formas de interactuar con los objetos virtuales • Sin ratón ni teclados • Permitiendo a la gente utilzar sus propias manos y gestos naturales • Favoreciendo el comportamiento social • Se puede acceder al contenido digital solo o en compañía de otros

4. 01 Introducción a Surface

5. 01 Introducción a SurfaceHardware Surface Layer Windows Vista CPU Core Duo 2 2GB of RAM Tarjetagráfica 256 MB Motor de luz 5 Cámarasinfrarrojos

6. 01 Introducción a SurfacePlataforma software Desarrollada sobre Windows Vista y Windows 7 Aporta funcionalidades touch a las tecnologías: • Microsoft Windows PresentationFoundation (WPF) • Microsoft XNA developmentplatform Principalmente las que mas se usa es WPF • Las misma tecnología que se usa para hacer la UI de cualquier aplicación cliente o RIA • Los conocimientos son los mismos La herramienta de desarrollo Visual Studio 2008 SP1 La herramienta de diseño Microsoft ExpressionBlend 2.0 y 3.0

7. 02 Experiencia de Usuario en Surface Cuando un usuario interactúa con Surface NO tiene ratón ni teclado • Ni falta que le hace!! No ve nada de Windows y probablemente no sepa que esta corriendo por debajo La experiencia típica de un usuario a la hora de interactuar con Surface sería: • Interactuar con la aplicación de atracción • Similar a un salvapantallas pero con capacidades touch • Su misión atraer a la gente a la mesa e incitarles a tocarla • Tocar uno de los Puntos de acceso de las esquinas para abrir el Lanzador de aplicaciones y ver las aplicaciones instaladas en la mesa • El Lanzador es una barra horizontal que muestra el preview de las aplicaciones instaladas • El usuario siempre lanza las aplicaciones desde el lanzador

8. 02 Experiencia de Usuario en Surface • El usuario toca en uno de las imágenes para lanzar las aplicación • La aplicación se ejecuta a pantalla completa • Solo una aplicación se puede mostrar a la vez pero varias pueden estar ejecutadas simultáneamente • El usuario puede volver al lanzador tocando los puntos de acceso • Puede finalizar la sesión volviendo al lanzador y pulsando el botón I’m done La experiencia de surface incluye los time-outs automáticos: • Si cuando se está en una aplicación no se toca la pantalla en un espacio de tiempo la mesa pregunta si desea seguir con la aplicación o cerrar la sesión y volver a la aplicación de atracción • Si no se responde en un tiempo a la pregunta la mesa vuelve a la aplicación de atracción

9. 02 UX – Pilares del diseño

10. 02 UX – Pilares del diseño: Sin fisuras Necesitamos que el usuario se sumerja en la experiencia de la aplicación • Similar a lo que nos suceden en los videos juegos o en las buenas películas Para ello tenemos que desactivar el mecanismo de incredulidad de las personas para que acepten como verdadero o como suficiente real elementos que sea fantásticos o imposibles en la vida real Vamos a difuminar la línea que existe entre los objetos reales y los virtuales • Conectando objetos físicos con extensiones virtuales • Haciendo que los objetos virtuales se comporten como objetos físicos

11. 02 UX – Uso del eje Z Utilizar el eje Z da sentido de volumen

12. 02 UX – La aplicación de atracción Surface incluye una aplicación de atracción que se puede usar o personalizar Pero también podemos crear una propia siguiendo estas directrices: • Debería atraer a las personas • Tener mucho color , movimiento y ser muy táctil • Ser de 360 grados • Sin arriba y abajo • No estar orientada a tareas

13. 02 El lanzador de aplicaciones Título Descripción Preview Icono Puntos de acceso Botón de finalización

14. 03 Desarrollo de aplicacionesEntorno de desarrollo (i) A la hora de desarrollar las aplicaciones existen dos posibilidades: • Utilizar la propia mesa Surface • Viene con el SDK ya instalado si es de desarrollo • Ofrece dos modos: Usuario y Administrador • Utilizar un ordenador personal • Tienes que instalarte el SDK de Surface V1.0 SP 1 • Tiene un simulador • Es diferente a usar la mesa ya que no tiene cámaras y si por ejemplo se desea usar las cámaras en formato raw no se puede • Es necesario iniciarlo antes que las aplicaciones • Recomendaciones HW: • CPU coreduo 2GHZ • 2GB de RAM

15. 03 Desarrollo de aplicacionesEntorno de desarrollo (y ii) • Requerimientos Hardware: • Tarjeta gráfica 256 MB con directX • Un monitor capaz de soportar 1280x960 ó 1440x900 • Requerimientos Software: • Windows Vista (preferiblemente en ingles) con SP1 • Business, Enterprise o Ultimate • .Net Framework 3.5 • XNA Framework Redistributable 2.0 • Direct X End-UserRuntime Web Installer • Visual Studio 2008 o Visual C# Express Edition • Microsoft ExpressionBlend 2.0 para los diseñadores

16. 03 Desarrollo de aplicacionesArquitectura Windows 7 Windows Vista

17. 03 Desarrollo de aplicacionesAPIs para el desarrollo de aplicaciones Surface ofrece dos librerías diferentes para el desarrollo de las aplicaciones: • Core Layer • WPF layer En función del tipo de aplicaciones que vayamos a realizar utilizaremos una u otra: • Aunque pueden mezclarse en la misma aplicación WPF Layer está desarrollado sobre el core Ambas capas se ofrecen como librerías en .NET

18. 03 Desarrollo de aplicacionesAPIs para el desarrollo de aplicaciones : CoreLayer Permite utilizar los contactos con cualquier plataforma de interfaz de usuario que esté basado en HWND: • Microsoft XNA • Microsoft Managed DirectX • Microsoft Windows Forms • Core Layer • WPF layer No ofrece los controles de contacto que trae la librería de WPF Es útil: • Cuando se trabaja con objetos 3D vía XNA • Cuando se quiere acceder a la imagen cruda que capta el sistema de visión de infrarrojos

19. 03 HerramientasSimulador Permite probar las aplicaciones cuando no se tiene una mesa de Surface disponible: • Permite simular los contactos • Como no tiene cámara algunas funciones que las necesiten no van Simula la aplicación de atracción y el lanzador de aplicaciones • Cuando se está depurando no hace falta registrar la aplicación para que aparezca en el simulador • Aunque hay que lanzarlo primero

20. DEMO Hola mundo WPF

21. 03 Desarrollo de aplicacionesAPIs para el desarrollo de aplicaciones : WPF Layer Ofrece la misma funciona que la capa Core pero facilita el desarrollo de aplicaciones para Surface ya que ofrece una serie de funcionalidad añadida: • Los controles de toda la vida: listas, botones, barras de scroll, etc. Pero con capacidades touch • Nuevos controles para interfaces naturales Una gran productividad al integrarse completamente dentro de todo el modelo de desarrollo de WPF • Permite centrarse en lo que se quiere hacer y no en el cómo Integración de los diseñadores en los equipos de desarrollo como ciudadanos de primer nivel

22. 03 Desarrollo de aplicacionesControles Surface en WPF

23. 03 Desarrollo de aplicacionesScatterView Es el control más avanzado Permite mover, rotar y cambiar de tamaño Es el control perfecto para las aplicaciones 360º

24. DEMO Controles

25. 03 Desarrollo de aplicacionesContactos (i) Los elementos principales que permiten construir aplicaciones NUI son: • los contactos • los controles basados en los contactos • los eventos • y los gestos Surface reconoce tres tipos diferentes de contactos: • Finger: Cuando se sitúan, se mueven o se levantan uno o más dedos sobre la mesa • Blob: Cualquier objeto que no se reconoce como dedo • Objetos etiquetados: Cualquier objeto etiquetado que se sitúa, se mueve o se levanta de la mesa

26. 03 Desarrollo de aplicacionesContactos (ii) Gestos, son iteraciones que para interpretarlas no hace falta el contexto de la aplicación y que no implican cambios en la posición X y Y de la entrada del usuario: • Tap • Press and Hold Manipulaciones, la interpretación de estos depende de los controles que se encuentran debajo del contacto: • Drag • Pan (SurfaceScrollViewer, SurfaceListBox) • Flick • Move (ScatterView) • Resize • Rotate

27. DEMO Contactos

28. 03 Desarrollo de aplicacionesContactos (y iii) Procesadores de manipulación, permiten agrupar una serie de contactos como un simple elemento Procesadores de inercia, permiten dotar a los objetos virtuales de propiedades físicas de los objetos reales como movimiento e inercia

29. DEMO Manipulaciones

30. 03 Desarrollo de aplicacionesObjetos etiquetados (i) Surface es capaz de reconocer objetos que están marcados con una etiqueta que contiene un patrón de puntos Las etiquetas están diseñadas para ser leídas por las cámaras de infrarrojos de Surface • Se recomienda que la superficie donde se pega no sea negra Las etiquetas pueden usarse para los siguientes escenarios: • Reconocimiento de objetos • Iniciar un comando o acción • Mover y orientar objetos en las aplicaciones • Las etiquetas tienen más precisión que los dedos • Ej: Girar un botón de volumen

31. 03 Desarrollo de aplicacionesObjetos etiquetados (y ii) Cuando se utilicen las etiquetas hay que tener en cuenta: • Que se puede repetir el mismo número de etiqueta en la misma aplicación tantas veces como ella necesite • Que si se mueve demasiado rápido el objeto con la etiqueta puede ser que Surface la pierda la pista Existe dos tipos diferentes de etiquetas: • ByteTag • IdentityTag

32. 03 Desarrollo de aplicacionesObjetos etiquetados : ByteTag (i) La propiedad ByteTag.Value contiene el valor representado en la etiqueta • Permite 256 valores distintos Fondo para el infrarrojo El centro de la etiqueta que le sirve a la mesa para detectar la etiqueta Tres puntos reflejando la izquierda, derecha y abajo que sirven a la mesa para orientar los objetos

33. 03 Desarrollo de aplicacionesResponsabilidades de las aplicaciones Orientar la aplicación de acuerdo a la orientación desde la que se ha lanzado • Si la ventana principal es una SurfaceWindow de WPF ésta lo hace por nosotros Iniciarse antes del valor mínimo especificado para arranque (por defecto 10 seg) Indicar que la aplicación ya ha cargado mediante la invocación de la API SignalApplicationLoadComplete • Si la ventana principal es una SurfaceWindow de WPF ésta lo hace por nosotros No bloquear el hilo de IU más de 5 segundos

34. 03 Desarrollo de aplicacionesTeclado y teclado numérico Si alguna aplicación lo necesita • Aunque es algo claramente a evitar Se puede utilizar un teclado para introducir claves, números, pins, etc. El control del teclado es algo que ofrece la Shell • Luego puede ser utilizado desde cualquiera de las dos APIs: WPF o Core Se puede mostrar el teclado de forma manual o de forma automática • Lo normal usar los controles de WPF que lo lanzan de forma automática • SurfaceTextBox • SurfacePasswordBox

35. 03 Desarrollo de aplicacionesNotificaciones Aunque solo una aplicación puede ser visualizada a la vez varias pueden estar siendo ejecutadas a la vez (background) Puede ser interesante mostrar que algo se esté ejecutando esté o no esté la aplicación visualizándose Surface ofrece la API • UserNotifications Tocando la imagen permite volver a la aplicación que lanzoel aviso

36. 04 Despliegue de aplicaciones Una vez finalizado el desarrollo de una aplicación hace falta registrarla para que el Lanzador de aplicaciones la reconozca Para registrarla hay que dejar un fichero XML en la carpeta %PROGRAMDATA%\Microsoft\Surface\Programs El fichero contiene los campos siguientes: • <Title>, el titulo que aparece que cada aplicación en el Lanzador • <Description>, la descripción de cada aplicación que aparece en el Lanzador • <ExecutableFile>, la ruta completa a donde se encuentra el ejecutable • <Arguments>, argumentos que necesite la aplicación • <IconImageFile>, icono que representa la aplicación cuando no está seleccionada en el Lanzador

37. 04 Despliegue de aplicaciones • <Preview>, es un avance de la aplicación cuando ésta se encuentra seleccionada en el Lanzador. El preview puede estar compuesto por: • Una imagen estática o animada <PreviewImageFile>iconPreview.png</PreviewImageFile> • Una presentación que puede tener hasta cinco imágenes y un sonido<Preview> <SlideshowImageFile>FileName1.png</SlideshowImageFile> <SlideshowImageFile>FileName2.png</SlideshowImageFile> <SlideshowImageFile>FileName3.png</SlideshowImageFile> <SlideshowSoundFile>soundFile.wma</SlideshowSoundFile> </Preview> • Un video en formato (.wmv)<MovieFile>Resources\movieFileName.wmv</MovieFile>

38. 04 Despliegue de aplicaciones <?xmlversion="1.0" encoding="utf-8" ?> <ss:ApplicationInfo xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ss="http://schemas.microsoft.com/Surface/2007/ApplicationMetadata"> <Application> <Title>Mapa Interactivo</Title> <Description>Interactive map showing O2 Shops and contacts position</Description> <ExecutableFile>%ProgramFiles%\BlueSurface\InteractiveMap\InteractiveMap.exe</ExecutableFile> <Arguments></Arguments> <IconImageFile>%ProgramFiles%\BlueSurface\InteractiveMap\Resources\icon.png</IconImageFile> <Preview> <MovieFile>%ProgramFiles%\BlueSurface\InteractiveMap\Resources\preview.wmv</MovieFile> </Preview> </Application> </ss:ApplicationInfo>

39. DEMO Windows Live Messenger 10 años

40. Q&A

41. gracias Luis Guerrero UX Software Advisor PlainConcepts lguerrero@plainconcepts.com http://www.luisguerrero.net/ http://geeks.ms/blogs/luisguerrero/