Presentación de la charla "Universal Windows Platform: Como planificar y diseñar mi Aplicación" expuesta el 28 de Noviembre de 2015 en la Universidad CEU San Pablo de Madrid, en el evento Codemotion http://codemotion.es/ Universal Windows Platform: Como planificar y diseñar mi Aplicación Universal Windows Platform Analizamos con detenimiento como planificar el diseño de una aplicación en Windows 10 para optimizarla en cualquier tipo de dispositivos (phone, phablet, tablet, laptop, desktop, xbox one, suface hub, IoT).

1. Martin Vega
Universal Windows Platform:
Como planificar y diseñar
mi Aplicación
MADRID 28 de Noviembre 2015

2. Martin Vega
@mvegaca
Senior Consultant - Windows development
mvega@pasiona.com

3. www.pasiona.com
(+34) 669 333 333
info@pasiona.com
@pasiona Barcelona
Pujades 350, 10ª planta
08019 · Barcelona
Bilbao
Gran Vía 19-21, 2ª planta
48008 · Bilbao
Londres
1 Northumberland Avenue
London · WC2N 5BW
Madrid
Pinar 5,
28006 · Madrid

4. Windows App Studio
http://appstudio.windows.com/

5. Categorías de Apps
Social
Herramientas
y productividad
Entretenimiento
Información
y promoción
Juegos

6. Información y promoción
Macy’s NY Times CNN Yelp Engadget
All Recipes Men’s Health
Workouts
Arsenal
Blog
Las Vegas
Guide
PGA Tour

7. ¿Qué es Windows App Studio?
Desarrollo de Apps basado en web
Muy útil para Apps de Información y Promoción
Para la plataforma Windows
Usa, comparte o publica en el Store
Extiende o mejora tus las apps con código

8. Principios de App Studio
Windows App Studio es una herramienta online, gratis y fácil
que permite convertir tus ideas en Apps para Windows

9. Make your app look great
on any size screen or window!
Llega Windows 10 a nuestro trabajo y a nuestra casa.
La nueva Universal Windows Platform UWP para Windows 10 culmina
la evolución de las Universal Apps creadas para Windows 8.1 y
Windows Phone 8.1.
Apps nativas que nos permiten tener un único código para una gran familia
de dispositivos.

11. Visual Studio 2015 & Windows 10 Tools
VS2015 trae muchas novedades para las Apps universales de Windows 10:
• Nuevos controles (XAML)
• Total rediseño de los controles existentes
• Nuevos emuladores
• Nueva configuración de los paquetes Nuget (project.json)
• Una tienda unificada
• Nuevas familias de dispositivos (IoT, Hololens)

12. ¿Qué nos ofrece el SDK y la plataforma?
Nuevos controles además de un total rediseño de los ya existentes. Los controles
se adaptan al input de la plataforma (raton y teclado, lápiz, dedo, etc.)

13. Diseño con capacidad de respuesta
Poder trabajar en pixeles efectivos que nos fácilitan adaptar los textos y
tamaños en función del tamaño y resolución de la pantalla.

14. AdaptativeTriggers
Una forma fácil y flexible
para cambiar propiedades de
controles XAML en diferentes
anchos de pantalla.
… por contra:
Crean mucho XAML
No afectan a los
DataTemplates
No dan flexibilidad para
compartirlos entre páginas

15. Estrategias Responsive: The six R’s
Seis estrategias para que nuestro contenido se ajuste sacando el mayor partido
al ancho de pantalla disponible:
• Resize
• Reflow
• Reposition
• Reveal
• Rearchitect
• Replaze

16. Resize
No limitar los elementos a dimensiones fijas y dejar que ocupen el espacio del
contenedor.

17. Reflow
Adaptar el contenido al tamaño de la pantalla, variando la disposición en
pantallas más grandes.

18. Reposition
Recolocar el contenido en pantallas más pequeñas, usando incluso
Scroll Vertical

20. Reveal
Revelar y ocultar información. Una de las más efectivas: llevar contenido a otra
página, a elementos de un pivot o a un SplitView.

21. Rearchitect
Pensar en arquitecturas y jerarquías diferentes. Por ejemplo, en tener o no
página de detalle en función del “DeviceFamily”

23. Replace
Remplazar elementos pensando en pantallas pequeñas, por ejemplo, cambiar
un menú horizontal de vista desktop a acciones secundarias de el AppBar en
móvil o cambiando menus verticales en Desktop por Pivots en móvil.

24. Solución
Vemos la solución adoptada en Windows App Studio en una pequeña
DEMO

25. Windows App Studio
http://appstudio.windows.com/
https://github.com/wasteam/waslibs

26. Preguntas

27. ¡Muchas gracias!
@mvegaca