Martin Vega
Universal Windows Platform:
Como planificar y diseñar
mi Aplicación
MADRID 28 de Noviembre 2015
Martin Vega
@mvegaca
Senior Consultant - Windows development
mvega@pasiona.com
www.pasiona.com
(+34) 669 333 333
info@pasiona.com
@pasiona Barcelona
Pujades 350, 10ª planta
08019 · Barcelona
Bilbao
Gra...
Windows App Studio
http://appstudio.windows.com/
Categorías de Apps
Social
Herramientas
y productividad
Entretenimiento
Información
y promoción
Juegos
Información y promoción
Macy’s NY Times CNN Yelp Engadget
All Recipes Men’s Health
Workouts
Arsenal
Blog
Las Vegas
Guide
P...
¿Qué es Windows App Studio?
Desarrollo de Apps basado en web
Muy útil para Apps de Información y Promoción
Para la platafo...
Principios de App Studio
Windows App Studio es una herramienta online, gratis y fácil
que permite convertir tus ideas en A...
Make your app look great
on any size screen or window!
Llega Windows 10 a nuestro trabajo y a nuestra casa.
La nueva Unive...
Visual Studio 2015 & Windows 10 Tools
VS2015 trae muchas novedades para las Apps universales de Windows 10:
• Nuevos contr...
¿Qué nos ofrece el SDK y la plataforma?
Nuevos controles además de un total rediseño de los ya existentes. Los controles
s...
Diseño con capacidad de respuesta
Poder trabajar en pixeles efectivos que nos fácilitan adaptar los textos y
tamaños en fu...
AdaptativeTriggers
Una forma fácil y flexible
para cambiar propiedades de
controles XAML en diferentes
anchos de pantalla....
Estrategias Responsive: The six R’s
Seis estrategias para que nuestro contenido se ajuste sacando el mayor partido
al anch...
Resize
No limitar los elementos a dimensiones fijas y dejar que ocupen el espacio del
contenedor.
Reflow
Adaptar el contenido al tamaño de la pantalla, variando la disposición en
pantallas más grandes.
Reposition
Recolocar el contenido en pantallas más pequeñas, usando incluso
Scroll Vertical
Reveal
Revelar y ocultar información. Una de las más efectivas: llevar contenido a otra
página, a elementos de un pivot o ...
Rearchitect
Pensar en arquitecturas y jerarquías diferentes. Por ejemplo, en tener o no
página de detalle en función del “...
Replace
Remplazar elementos pensando en pantallas pequeñas, por ejemplo, cambiar
un menú horizontal de vista desktop a acc...
Solución
Vemos la solución adoptada en Windows App Studio en una pequeña
DEMO
Windows App Studio
http://appstudio.windows.com/
https://github.com/wasteam/waslibs
Preguntas
¡Muchas gracias!
@mvegaca
Techdencias windows 10 diseño de aplicaciones universales
Techdencias windows 10 diseño de aplicaciones universales
Techdencias windows 10 diseño de aplicaciones universales
Próxima SlideShare
Cargando en…5
×

Techdencias windows 10 diseño de aplicaciones universales

399 visualizaciones

Publicado el

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

Publicado en: Software
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
399
En SlideShare
0
De insertados
0
Número de insertados
36
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Techdencias windows 10 diseño de aplicaciones universales

  1. 1. Martin Vega Universal Windows Platform: Como planificar y diseñar mi Aplicación MADRID 28 de Noviembre 2015
  2. 2. Martin Vega @mvegaca Senior Consultant - Windows development mvega@pasiona.com
  3. 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. 4. Windows App Studio http://appstudio.windows.com/
  5. 5. Categorías de Apps Social Herramientas y productividad Entretenimiento Información y promoción Juegos
  6. 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. 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. 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. 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.
  10. 10. 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)
  11. 11. ¿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.)
  12. 12. 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.
  13. 13. 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
  14. 14. 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
  15. 15. Resize No limitar los elementos a dimensiones fijas y dejar que ocupen el espacio del contenedor.
  16. 16. Reflow Adaptar el contenido al tamaño de la pantalla, variando la disposición en pantallas más grandes.
  17. 17. Reposition Recolocar el contenido en pantallas más pequeñas, usando incluso Scroll Vertical
  18. 18. 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.
  19. 19. Rearchitect Pensar en arquitecturas y jerarquías diferentes. Por ejemplo, en tener o no página de detalle en función del “DeviceFamily”
  20. 20. 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.
  21. 21. Solución Vemos la solución adoptada en Windows App Studio en una pequeña DEMO
  22. 22. Windows App Studio http://appstudio.windows.com/ https://github.com/wasteam/waslibs
  23. 23. Preguntas
  24. 24. ¡Muchas gracias! @mvegaca

×