Resumen del evento Talks 4 Kids y materiales de mi charla.

Hola a todos!

El pasado 4 de diciembre celebramos en las oficinas de Microsoft Ibérica la primera edición de Talks 4 Kids, un evento técnico en el que 8 ponentes dimos charlas de 30 minutos a los asistentes, a cambio de una pequeña colaboración con la fundación Theodora. Para ver más detalles puedes leer el post que hice sobre el evento hace una semana.

Finalmente ha ido muy bien, casi 2000€ recaudados, una cifra impresionante. Teniendo en cuenta que en la web de la fundación Theodora dicen que con una donación de 10€ pagas una visita de un doctor sonrisa a un niño hospitalizado, hemos conseguido unas 200 visitas de los doctores sonrisas. Esto me parece increíble y es uno de los grandes puntos positivos del evento.

Doctora Sonrisas

Otro punto positivo fue contar con la visita de una doctora sonrisas para la keynote del evento. A los que somos padres, se nos hizo duro conseguir llegar al final de la keynote sin soltar un buen torrente de lágrimas jejeje. La verdad es que, una vez que te cuentan las situaciones que tienen que enfrentar y sus ánimos, te das cuenta del papel tan necesario que realizan.

Los patrocinadores

Personalmente quiero agradecer a los patrocinadores que se han volcado en apoyarnos, sin ellos no podríamos haber llegado a superar la barrera de los 1500€ de donaciones. 12 empresas nos apoyaron para hacer este evento realidad, creo que se merecen un gran aplauso y un aún más grande ¡GRACIAS! de todo corazón:

La asistencia

Quizás el punto más gris, fue la asistencia de público.

Personalmente, cuando empecé a hablar del evento con Rafael Serna, le decía que estaba seguro de que mucha gente lo apoyaría desinteresadamente, con la fila 0 e incluso con entradas, al fin y al cabo, las charlas eran una excusa para ver a los ponentes hacer el ridículo, pero lo esencial era ayudar a los niños.

La verdad es que quizás el origen de mi profunda decepción es haber empezado poniendo a la comunidad en un pedestal y pensando, ingenuo de mi, que 5€ o 10€ no son nada para la mayoría de los que vivimos en la comunidad. Sea como fuese, igual que las empresas ha respondido increíblemente bien, las personas no lo han hecho. Al menos no en el número que yo pensaba que lo harían. Finalmente se vendieron entre Fila 0 y asistentes, unas 40 entradas. Aun teniendo en cuenta que la web de compras fallase muchas veces, no creo que más de 60 o 70 personas intentase comprar entradas… ¿Cuanta gente en españa se nutre y beneficia de los eventos gratuitos que a lo largo del año se organizan en la comunidad? Estoy seguro de que al menos 1000 personas… con lo que solo un 7%, siendo muy conservador, intentó colaborar con el evento. Solo un 4% llegó a pagar el equivalente a una entrada de cine o un desayuno… Que cada uno saque sus conclusiones, yo ya he sacado las mías propias.

A los asistentes y a los donantes desinteresados (vosotros sabéis quienes sois) sois la leche! gracias 🙂

Los ponentes

Los que sí han respondido y lo han dado todo han sido los ponentes. desde aquí, quiero darles mi más sincero agradecimiento a estas 8 personas, ejemplos vivientes de profesionales como la copa de un pino que además tienen el corazón tan grande que no les entra en el pecho. Son auténticos ejemplos a seguir fuera y dentro de nuestra profesión:

 

  • Alberto Díaz
  • Alejandro Campos
  • Bruno Capuano
  • Ciani Afonso
  • Javier Suarez
  • Rafa Serna
  • Ruben Fernandez
  • Santiago Porras

 

Al final, la gente no se da cuenta de lo que supone un evento como Talks 4 Kids, Viaje a Madrid el día anterior, noche de hotel, taxis, horas sin trabajar… todo eso sale del bolsillo de cada ponente o de la empresa en la que trabaja. En todo caso, para los que no vivimos en madrid, podemos promediar que llegar al evento, dar la charla e irnos, supone unos 500€ por cabeza fácilmente. Sumemos a esto el estar lejos de la familia un par de días más, algunos enganchan viajes que duran ya una semana, y las horas de preparación de las charlas, normalmente robadas al descanso o al tiempo con hijos… es para quitarse el sombrero delante de estos auténticos cracks! Que, además terminan de esta guisa el evento:

Muchos solíamos trabajar estrechamente con Microsoft Ibérica… no sé si después de estar por allí con estas pintas nos dejarán volver a entrar en la Finca jajaja.

Mi charla – Bailando con monos

En mi caso, mi charla fue una introducción a Xamarin / Xamarin.Forms. Intenté condensar no solo como funciona y que hace Xamarin si no el porqué es útil, que problemas puede solucionarnos, y que no va a solucionarnos. Aquí tenéis las slides colgadas en SlideShare:

Talks 4 Kids 2016?

Pues no lo sé, ahora es momento de disfrutar de las navidades en familia, pero quizás valdrá la pena volver a intentar un Talks 4 Kids el año que viene, volver a poner un poco de confianza en la solidaridad de la comunidad e intentar seguir ayudando a los niños, que al final son lo más importante. Después de ver este Talks 4 Kids ¿Vendrías si lo hacemos el próximo año de nuevo?

Un saludo y happy coding!

[EVENTOS] Talk4Kids, ¿Qué estás realmente dispuesto a hacer por mejorar la vida de unos niños?

ALERTA: Tengo 3 hijos, por lo que este post sale desde lo más profundo de mi corazón… alguna lagrimita ha caido mientras lo escribía.

¿Qué estás realmente dispuesto a hacer por mejorar la vida de unos niños?

Es una pregunta trampa. ¿Qué niños? ¿En qué situación?¿Que ayuda necesitan?

Bueno, lamentablemente las enfermedades no entienden de edades, cosas como el cancer, la leucemia, intervenciones quirúrjicas con largas estancias en el hospital… son dificiles de llevar para un adulto, pero para un niño son terribles. No solo por la enfermedad en si, es por todo lo que les quita: ir al colegio, jugar con sus amigos, pelear con sus hermanos, hacer que papa y mama se desesperen con la última trastada… vamos, lo que hace diariamente cualquier niño sano: crecer y aprender con experiencias vitales.

¿Qué podemos hacer por ellos? Ojala existiese una varita mágica, que les curase, acelerase su recuperación o directamente evitase que tuviesen que entrar en el hospital. Pero  no existe, debemos vivir con la realidad de que hay y en el futuro habrá niños que estarán hospitalizados. Pero no todo está perdido. Si no podemos llevar a los niños a su casa, ¿por qué no llevamos la diversión y los juegos a los niños?

En ello trabaja duramente la buena gente de la Fundación Theodora y sus doctores sonrisas.

Fundación Theodora

Los doctores sonrisas son profesionales con formación artística y psicosanitaria, que dedican parte de su tiempo a visitar a los niños en los hospitales, para mediante improvisaciones, alegrarles un poco, jugar y ayudarles a evadirse del lugar en el que se encuentran.

Aquí os dejo un enlace a la galería de fotos de la Fundación Theodora para que veáis el trabajo que realiza con los niños:

http://es.theodora.org/es/quienes-somos/galeria

¿Como podemos ayudar nosotros?

Esta claro que no todo el mundo tiene la formación necesaria para ser un doctor sonrisas, pero podemos ayudar a financiar las visitas de los doctores, de forma que más y más niños se puedan beneficiar de esta terapia de la risa y la diversión, y no hace falta que seamos Bill Gates ni tengamos una fundación para ello. Cualquier pequeño grano de arena suma y juntos podemos hacer una montaña.

Llevo varios años pensando en ello, en todo lo que hacemos en la comunidad, eventos, charlas, webcasts… y en como usarlo para aportar algunos granos de arena a esta tarea… Así nació, con la inestimable ayuda de Alejandro Campos, Bruno Capuano, Alberto Díaz, Santiago Porras, Rafa Serna, Ciani Afonso, Javier Suarez y Ruben Fernandez: TALKS 4 KIDS 2015.

Talks 4 Kids 2015

Un buen día se me ocurrió empezar a molestar a todos estos amigotes y picarles un poco para ver si hacíamos un evento para recaudar dinero para la fundación Theodora. Solo dos reglas: Charlas divertidas y no ver ni un céntimo del evento.

Todos aceptaron, y montamos una agenda de lo más “original”, 8 charlas variadas, sobre Azure, Xamarin, Windows 10, cacharritos, diseño… para que desarrolladores de todas partes aprendan nuevas tendencias, trucos y consejos sobre todas ellas:

  • Windows 10: La comunidad del core
  • The Big Cloud Theory
  • Bailando con monos
  • Coding4Fun 2.4
  • Consejos Heisenberg para conseguir Apps Windows 10 con 99% de pureza
  • El lado oscuro de la nube
  • OneDrive para gobernarlos a todos
  • Porqué los espartanos molan y Gerges debe morir
  • Confía en la fuerza Luke

Como veréis, no tiene desperdicio… si queréis adivinar de qué va cada sesión, en la agenda de la web tenéis todos los detalles.

Hablamos con José Bonnin de Microsoft Ibérica y desde el primer segundo nos ofreció su ayuda cediéndonos el auditorio de Microsoft, con capacidad para 100 personas, para realizar el evento.

En cuanto al dinero, decidimos crear tres tipos de contribuciones distintas:

  • 5€, para la gente que quiere ayudar a los niños, pero no puede asistir al evento. Básicamente por lo que te compras unas palomitas en el cine, o un pintxo y un café en la plaza nueva de Bilbao… puedes ayudar a mejorar la vida de un niño. No quiero hacerte sentir mal pero… bueno, eso, 5 euros, nos los gastamos muchas veces en tonterías sin darnos cuenta.
  • 10€, para la gente que quiere asistir al evento. 10€ por 8 charlas sobre diferentes temas de actualidad en el mundo del desarrollo Microsoft, con ponentes de mucha calidad y alguna sorpresa… 10€ no es ni siquiera un menú del día en muchos restaurantes españoles… son dos desayunos, es lo que cuesta un cable lightning chino para el iPhone o una carcasa malota de silicona para un teléfono….
  • 150€, para empresas que desinteresadamente quieran ayudar a los niños y patrocinar el evento. A cambio: El logo en la web y en las diapositivas de la Keynote del evento, pero sobre todo, nuestra más sincera admiración y las gracias de corazón por ayudar a los niños!!

Es importante tener en cuenta que, en ningún momento este dinero pasa por nuestras manos. Las entradas se compran directamente en la web de la Fundación Theodora, se les paga a ellos directamente y ellos envían la factura. De esta forma evitamos:

  • Que alguien tenga la tentación de quedarse con dinero.
  • Comisiones de eventbrite y compañia por pagos.

Pero sobre todo, hacemos que el sistema sea transparente, no hay ninguna duda de que el dinero se dona a la Fundación y todo queda devidamente registrado y anotado. 

Pero todavía quedaba otra sorpresa. Ya puestos a recaudar fondos para la fundación, pensamos en como podíamos incentivar aún más a toda la gente… y nos inventamos un reto!

Establecimos un objetivo: 1500€, una cifra simbólica, no va a arreglar todos los problemas del mundo, pero es una cifra alta y que puede ayudar mucho. Si no llegamos a esa cifra, no pasa nada, cada centimo es bienvenido y vamos a hacer el evento aunque solo vaya una persona. Pero si llegamos… entonces, además de hacer el evento, lo haremos DISFRAZADOS!! Cada uno de los ponentes, se disfrazará de algo relacionado con el título de su charla… así que os podéis imaginar la guasa que va a haber en el escenario… monos, magos, hobbits… Si asistís podréis vernos en persona haciendo el más absoluto ridículo en las oficinas de Microsoft Ibérica. Si no podéis venir, tranquilos, se publicarán fotos.

Ahora es tu turno

Cada uno de los ponentes hemos invertido tiempo y dinero, hemos comprado nuestras entradas, algunos han peleado con sus empresas para que colaboren, muchos vienen de lejos (Sevilla, Tenerife, Valencia, Santander, Ourense, Las Palmas) se han pagado su viaje y su hotel… Necesitamos tu ayuda! Necesitamos que vengas a vernos, o que al menos colabores con la participación de 5€.

Para ayudar un poco más, yo personalmente voy a sortear entre todos los asistentes al evento un kit IoT venido directamente de Redmond:

  • Raspberry PI2
  • Tarjeta SD
  • Cable HDMI
  • Cable USB
  • Cargador USB
  • Sensores, leds, placa de prototipado…
  • Botones, potenciómetro

Esto no es que me lo hayan dado para el evento, ha sido un regalo del equipo de producto de Windows para mi, pero lo dono por la causa!

Tu pagas 10€ por la entrada, vienes al evento, disfrutas de las charlas y puedes además llevarte un kit de IoT que cuesta unos 60€… ¿No es un mál trato no?

Si quieres venir, corre insensato a comprar tu entrada AQUÍ.

Si no puedes venir, pero quieres ayudar, entra AQUÍ.

Si eres una empresa y estás interesada en ayudar, entra AQUÍ

¡GRACIAS!

Si has llegado hasta aquí y has ayudado, muchas gracias! Si además difundes el evento por las redes sociales, nos harías un gran favor.

Happy Coding!!

[OFFTOPIC] Nace DevsDNA

Hola a todos!

Desde Noviembre de 2014 empecé la aventura de trabajar como autónomo, con ganas de buscar nuevos retos y de intentar crear algo diferente.

Hoy quiero contaros una nueva aventura. Estos últimos 10 meses han sido una montaña rusa de trabajo, emociones y mucha diversión. Viendo los resultados me animé, junto a mi mujer, a ir un paso más allá y así nace una nueva empresa, DevsDNA.

devsdna

DevsDNA está pensada como una empresa donde buenos desarrolladores puedan realizar buenos e interesantes proyectos móviles, principalmente, trabajando desde casa, para no tener que mover toda tu vida por un trabajo. Creemos en la responsabilidad de las personas y que hoy en día existen suficientes herramientas como para poder mantener una comunicación fluida estemos donde estemos cada uno de nosotros. Por ahora somos una empresa pequeña, el equipo está compuesto ahora mismo por Beatriz Márquez, Ciani Afonso, Rubén Fernandez y un servidor.

image

Tenemos grandes proyectos en el tintero, queremos desarrollar nuestras propias apps multiplataforma internamente y seguir trabajando en apoyo a la comunidad, por ejemplo patrocinando el evento de Windows 10, Hel10 World! del 22 de Octubre organizado por Microsoft.

Pretendemos ser un lugar donde trabajar a gusto y hacer cosas de las que sentirnos orgullosos, con Windows 10, Xamarin o WPF. Solo el tiempo dirá si lo conseguimos o no…

Mientras tanto, puedes darte una vuelta por nuestra web, ver algunos de los proyectos en los que colaboramos y conocer más sobre nosotros y nuestra filosofía.

Por cierto! Buscamos desarrolladores!

Si crees que cumples estos requisitos:

  • Controlas Xamarin, Windows Phone, Windows 10.
  • Al oir SCRUM, MVVM, IoC, Servicios no te mareas.
  • Te comunicas bien en XAML y C#.
  • No quieres tocar nada de Javascript o HTML5.
  • Te sientes responsable para trabajar a distancia con libertad de horarios.
  • Te gusta hacer las cosas bien y sentirte orgulloso de tu trabajo.
  • Escribes en un blog, haces eventos o simplemente te gusta colaborar con la comunidad de alguna forma.

Entonces puede que este sea tu sitio ideal para trabajar! envíanos un email a info@devsdna.com con el asunto [Trabajo Desarrollador]  y tu CV actualizado, enlaces a GitHub, Blog… y hablaremos!

Un saludo y Happy Coding!

[MATERIALES] TLP Innova Tenerife 2015

Hola a todos!

El 16 y 17 de Julio tuve la gran suerte de poder participar, junto a grandes amigos y compañeros como Ciani Afonso, Santiago Porras, Alberto Díaz, Javier Suarez, Vanessa Estorach o Bruno Capuano, en la edición 2015 de TLP Innova.

Cabecera_Tw_TLPInnova_2015_azul

TLP Innova forma parte de la Tenerife Lan Party, dedicandose a los profesionales de nuevas tecnologías.

En esta ocasión pude participar con 3 charlas/talleres:

  • El Jueves 16 realicé un taller de 3 horas sobre Xamarin Forms, en el que intentamos desarrollar una app multiplataforma que conectase con un servicio meteorológico.
  • El Viernes 17, junto a Javier Suarez, tuve una charla sobre el futuro que viene con Windows 10: Hololens y Bridges.
  • El Viernes 17, casi a última hora, una charla sobre Xamarin y como te ayuda a llegar a todos los clientes de una forma más efectiva.

A continuación os dejo las Slides, tanto del taller como de las charlas. Las de la charla de futuro, están en el SlideShare de Javier Suarez y se las robo con cariño para ponerlas aquí también:

También os dejo aquí los proyectos de ejemplo que usamos en el taller de Xamarin.Forms para que podáis darles un vistazo y usarlos como referencia:

ver-github1

Por último, pero no menos importante, una relación de artículos que han publicado el resto de compañeros sobre la TLP, para que no os perdáis nada:

 

Un saludo y Happy Coding!

[EVENTO] Windows 10 Developer Readiness by MVPs

Hola a todos!

Windows 10 developer readiness

El próximo día 11 de Junio se celebrará un evento online sobre desarrollo para Windows 10, el “Windows 10 developer readiness, powered by MVPs”. Se trata de un evento global. En cada país participante, MVPs locales han preparado contenido para ayudar a los desarrolladores a empezar a crear apps para Windows 10.

Windows 10 Developer Readiness - Powered by MVPs

En España, Javier Suarez Ruiz, Rafael Serna Medina, Bruno Capuano y un servidor intentaremos contarte todas las novedades sobre Windows 10, diseño adaptativo, nuevos controles, XAML, la nueva Store e incluso IoT… ¿Te lo vas a perder?

¿Cuando?

El jueves 11 de Junio, empezando a las 19:00 (GMT+1) y hasta las 22:00 (GMT+1), estaremos hablando de todas estas novedades tan interesantes.

¿Donde?

Online! Podrás acceder usando Skype for business. Pero primero tendrás que registrarte!! Puedes hacerlo desde el siguiente enlace:

https://mvp.eventbuilder.com/event?eventid=f6j8t3

¿Quienes serán los ponentes?

Pues tenemos un cartel de lujo, en el que es un placer poder participar:

¿De qué hablaremos?

La agenda, aunque puede variar ligeramente, será más o menos como sigue:

  1. Introducción a Windows 10
  2. Diseño adaptativo en Windows 10
  3. Nuevos Tiles
  4. Nuevos Controles
  5. Novedades en XAML
  6. IoT con Windows 10

Nos vemos el 11!

Pues eso, no nos falléis, os esperamos a todos allí dispuestos a contestar todas vuestras preguntas y dudas y a compartir lo que sabemos de Windows 10.

Un saludo y Happy Coding!

[Windows 10] Novedades para desarrolladores 4 de N

Hola a todos,

Bienvenidos a la 4º entrega de la serie sobre Windows 10. En este artículo haremos un parón en cuanto a las novedades. En su lugar vamos a ver… como reparar nuestros antiguos proyectos de Visual Studio 2015 CTPX para que continuen funcionando en Visual Studio 2015 RC. Pero antes, el índice de la serie:

  1. Windows 10, Novedades para desarrolladores 4 de N: Visual Studio 2015 RC

Hace un par de semanas, durante el //Build 2015, Microsoft liberó la versión Release Candidate de Visual Studio 2015. Como suele ocurrir cuando trabajamos con versiones CTP de cualquier herramienta, los cambios introducidos por la versión RC han roto los proyectos anteriores de aplicaciones universales para Windows 10. Si intentas cargar un proyecto creado con la CTP5/6 de Visual studio verás el siguiente mensaje:

image

Puede llevar a equivocos, pues nos indica que necesitamos ¿actualizar? nuestro Visual Studio. Lo que ocurre es que en el CSPROJ de nuestro proyecto está indicada una versión de la plataforma de aplicaciones universales (UAP) más pequeña que la usada por Visual Studio 2015 RC. Lo que tenemos que hacer es presionar OK.  El proyecto no se cargará y se mostrará como “Update required” en el explorador de soluciones. Vamos a solucionarlo.

En primer lugar necesitaremos editar el archivo CSPROJ. haz click derecho sobre el proyecto en el explorador de soluciones y escoge la opción “Edit XXXXXX.csproj”. En el XML del archivo de proyecto busca los nodos: TargetPlatformVersion y TargetPlatformMinVersion. Verás que su valor está establecido en 10.0.10030.0, que es el valor antiguo. Con la nueva versión de Visual Studio 2015 RC, este valor debería ser 10.0.10069.0. Sustituye el valor antiguo por el nuevo. guarda los cambios, cierra el archivo y haz click derecho sobre el proyecto de nuevo. En esta ocasión escoge la opción “Reload project”.

Enhorabuena, ahora tu proyecto ya se ha abierto en Visual Studio. Pero si intentas compilarlo te dará algunos errores de que le faltan packages de NuGet para compilar. La versión de ApplicationInsights usada en la CTP y la RC ha cambiado, así que lo primero será actualizar los paquetes de Application Insights a la última versión.

Haz click derecho sobre el nodo “References” del proyecto > Manage NuGet packages. En la ventana de NuGet selecciona el filtro “Upgrade available” y asegurate de tener marcado el check de “include prerelease”:

image

Se mostrarán varios resultados. Actualizando el primer paquete Microsoft.ApplicationInsights, ya descarga la versión actualizada del resto, por lo que es el único que necesitamos actualizar.

Otro paso más es actualizar el archivo applicationinsights.config. Este contiene los modulos que carga application insights al instanciarse y han cambiado. Lo más sencillo es crear un nuevo proyecto y copiar los que incluye allí por defecto:

<?xml version=”1.0encoding=”utf-8“?>
<ApplicationInsights xmlns=”http://schemas.microsoft.com/ApplicationInsights/2013/Settings“>
  <TelemetryModules>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Implementation.Tracing.DiagnosticsTelemetryModule, Microsoft.ApplicationInsights“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.SessionTelemetryModule, Microsoft.ApplicationInsights.Extensibility.Windows“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.PageViewTelemetryModule, Microsoft.ApplicationInsights.Extensibility.Windows“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.UnhandledExceptionTelemetryModule, Microsoft.ApplicationInsights.Extensibility.Windows“/>
  </TelemetryModules>
  <TelemetryChannel Type=”Microsoft.ApplicationInsights.Channel.PersistenceChannel, Microsoft.ApplicationInsights.PersistenceChannel“/>
  <ContextInitializers>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.ComponentContextInitializer, Microsoft.ApplicationInsights“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.DeviceContextInitializer, Microsoft.ApplicationInsights“/>
  </ContextInitializers>
  <TelemetryInitializers>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.UserContextInitializer, Microsoft.ApplicationInsights.Extensibility.Windows“/>
  </TelemetryInitializers>
</ApplicationInsights>

Ya solo nos queda añadir dos nuevos paquetes de NuGet a nuestra aplicación:

  • Microsoft.ApplicationInsights.PersistanceChannel
  • Microsoft.ApplicationInsights.WindowsApps

Una vez hecho esto, todo debería funcionar… o casi todo. Si hacemos un rebuild de la solución, pasará correctamente y se ejecutará también perfectamente.

Pero si miramos el panel de errores, veremos que muestra varios warnings referentes al certificado de la aplicación (nombreapp_TemporaryKey.pfx). Por ahora podemos eliminarlo y no afectará a la funcionalidad. Cuando el editor visual de appxmanifest esté disponible en próximas versiones podremos regenerarlo nuevamente.

Con estos pequeños trucos, deberías tener tu proyecto funcionando de nuevo en Visual Studio 2015 RC.

Un saludo y Happy Coding!

[EVENTO] Windows 10 GameJam Sevilla 2015

Los pasados días 15, 16 y 17 de mayo se organizó en Sevilla la Windows 10 GameJam, donde tanto profesionales como estudiantes se reunieron para aprender más sobre Windows 10 y desarrollar algunos juegos sobre la plataforma.

image

El primer día de la GameJam se dedicó por completo a sesiones de formación sobre la plataforma.

En concreto yo hice dos sesiones: Introducción a Windows 10 y Nuevos controles en Windows 10. A continuación puedes ver las slides de ambas charlas:

Y las demos las puedes descargar de GitHub aquí.

El segundo y tercer día se dedicaron los equipos a desarrollar juegos/apps. Finalmente se montaron dos equipos que optaron por desarrollar un juego cada uno. Gracias a los chicos de Wave Engine, que han estado todo el fin de semana en los foros pendientes de las dudas e incluso pasaron por aquí a enseñarnos como funcionaba ese estupendo motor de juegos.

Uno de los juegos se llamó Hungry Birds:

WP_20150517_17_09_25_Pro

El otro se inspiró en UNEPIC con algunos cambios en la historia, los gráficos… (por cierto si no conocéis UNEPIC, el de verdad, ya estáis tardando en probarlo y comprarlo!!)

WP_20150517_17_18_15_Pro

Un fantástico fin de semana, divertido y en el que todos hemos aprendido muchísimo. Aquí algunas fotos que lo atestiguan:

WP_20150515_11_19_15_Pro

WP_20150515_16_30_43_Pro

WP_20150517_13_18_16_Pro

Un saludo y Happy Coding!

[HOLOLENS] Build 2015: Holographic Academy

Hola a todos!

Todavía con algo de Jet Lag, pero ya en casa y empezando a analizar la experiencia de este //Build 2015, el tercero consecutivo al que tengo la suerte de asistir.

Un evento como el //Build es muy intenso, dos días  y medio en los que, normalmente, tienes entre 8 y 10 sesiones oficiales en paralelo cada hora, sin contar con focus groups, sesiones privadas y otros bajo invitación. Total, que te tienes que comer la cabeza para elegir que ver en directo y que ver en Channel9.

En esta edición se han presentado cosas interesantísimas como los proyectos Astoria e Islandwood, para traer apps de Android y iOS respectivamente a Windows, y de los que hablaré más adelante.

Pero había un rey indiscutible, un producto que todo el mundo estaba esperando y que muchos incluso teníamos la esperanza de poder llevarnos a casa, como regalo o pagando un programa Early adopter… Hablo de HoloLens. Para que os hagáis una idea del nivel de excitación durtante la Keynote, en un momento dado Alex Kipman, padre de Kinect y Hololens, anuncia que han traido “cientos de unidades” al Build y el público entra en modo “Berserker” automáticamente… hasta que dice que solo son para probarlas, no para llevarle a casa… puedes ver el subidón y consiguiente bajón en el video de la Keynote (2:51:37).

En realidad si que llevaron cientos de HoloLens al Build para poder probarlas en lo que llamaron la “Holographic Academy”.

holoacademy

En grupos de 60 personas, con un mentor cada 2 asistentes, un PC para cada uno y unas HoloLens también para cada uno, nos metieron en una sala, donde nos quitaron todo aparato electrónico, y nos permitieron durante cuatro horas jugar con Unity, Visual Studio y Hololens, probando nuestro código directamente en el hardware.

Lo mejor de todo es que, aunque no nos dejaron sacar fotos o grabar vídeos, si que nos dieron carta blanca para hablar sobre la experiencia… así que vamos allá.

Durante tres horas, nos guiaron por una serie de tutoriales muy sencillos para crear apps 3D para Hololens usando Unity y Visual Studio, cubriendo los siguientes aspectos:

  • Setup inicial y despliegue
  • Interacción con las manos
  • Interacción con la cabeza
  • Interacción con la voz
  • Sonido posicional
  • Colisiones con el mundo real

Setup inicial y despliegue

Cuando trabajas con un dispositivo como HoloLens, que además está en preview, esperas que sea de todo menos sencillo. Pero en esta ocasión, no fue así. Los pasos a realizar para poder desplegar una escena de Unity a las HoloLens fueron extremadamente simples, incluso para alguien con muy poca experiencia en Unity como yo.

En primer lugar tuvimos que configurar la distancia interpupilar en  las HoloLens, algo normal en este tipo de aparatos y que también debemos hacer en Oculus Rift si queremos obtener los mejores resultados. Básicamente se trata de la separación en milimetros entre el centro de nuestras pupilas.

Para configurar las Hololens, estas disponen de un servidor web al que podemos acceder cuando las conectamos por USB y que también nos permitía arrancar apps instaladas en el dispositivo y cerrar procesos en ejecución.

El despliegue de apps fue muy sencillo. Compilas la app en Unity para generar la solución de Visual Studio, abres la solución en Visual Studio, conectas las HoloLens por USB y haces un “Start without debugging”, te pones las HoloLens, quitas el USB… y listo! Ya tienes tu app ejecutando y ante tus ojos!

Como dato curioso, cada vez que acababamos de usar las HoloLens, teníamos que volver a entrar a la web que llevan incorporadas (127.0.0.1:100800) y en la pestaña de administración de apps teníamos que matar el proceso de la app. Supongo que son flecos que quedan por pulir y que esta parte se mejorará en la versión final que se haga pública. Tampoco nos dijeron si podiamos o no depurar, solo nos indicaron que siempre lanzasemos la app sin depuración.

Interacción con las manos.

La interacción con el mundo virtual se puede realizar mediante las manos, con un gesto muy simple de click que consiste en levantar el dedo índice perpendicular al dedo pulgar, formando una L al reves con la mano derecha, bajando el dedo índice hasta tocar el pulgar para indicar un click. Ha este gesto lo llaman “Air tap” y es todo lo que necesitamos para interactuar con nuestro mundo virtual, seleccionar objetos, arrastrarlos, soltarlos o ejecutar acciones sobre ellos. Hicimos una demo que se componía de un bloq de notas con dos esferas flotando sobre el, al mirar las esferas y hacer “air tap” sobre ellas, automáticamente caían, rodaban por el bloq de notas y caían fuera de este hacia el infinito (todavía no habíamos puesto el reconocimiento de las superficies reales).

Interacción con la cabeza.

Que no con la vista directamente. En un primer momento pensaba que Hololens haría un tracking de los ojos, pero realmente hace un tracking de la cabeza. Calcula automáticamente el vector direccional de hacia donde apunta nuestra cabeza y expone APIs para leer este vector así como comprobar contra que elementos del mundo virtual colisiona, de forma que nos permitía situar un objeto (un circulo) justo en el punto de colisión de nuestro vector de la cabeza con el objeto virtual, algo así como un puntero que facilitaba seleccionar objetos. a esta interacción la llamaban “Gaze”, mirada en español.

Interacción con la voz.

Esta última forma de interacción es, a mi entender, una de las más potentes de todas. Como las otras dos, la sencillez extrema de su implementación parece de mentira, pero es que solo con 1 línea de código podías atar un texto a la ejecución de un comando de un objeto. En mi caso definí dos textos:

  • I Love Holograms” que ejecutaba el comando de reset del mundo virtual para empezar de 0.
  • Drop Sphere” que ejecutaba el comando DropSphere que había definido anteriormente, sobre la esfera que tuviese seleccionada con la vista.

En una sala con música suave, unas 80 personas entre asistentes y tutores, no falló ni una sola vez el reconocimiento de voz, y eso que mi inglés… bueno, que no tengo acento nativo precisamente. Si que, a diferencia del resto de gestos, el reconocimiento de voz tenía un pequeño lag, de un par de segundos entre que pronunciabas el comando y ejecutaba la acción. Otro punto a pulir un poco más para la versión final.

Sonido posicional.

Cuando se habla de Hololens, siempre se referencia la posibilidad de mostrar hologramas sobre el mundo real. Pero, ¿Qué pasa con el sonido? Pues, de verdad creedme, es tan espectacular o mas que la imagen.

Las Hololens tienen dos pequeños altavoces rojos, que no te tapan los oidos en ningún momento y que se pegan a la parte superior de tu oreja, parece que realizan un efecto de vibración sobre el cartílago de la misma que es lo que transmite el sonido perfectamente. Si te quitabas las Hololens y te acercabas a los auriculares apenas escuchabas nada, pero en cuanto te las ponías escuchabas los sonidos que reproducian perfectamente nítidos. Si estabas en la posición adecuada claro. Y digo adecuada, porque el sonido puede ser ambiental desde un punto focal definido en Unity o emitido por un objeto. En cualquiera de los dos casos el sonido (su volumen y su posición percibida) varía según nuestra posición. Para probarlo hicimos un pequeño juego del escondite en Unity, donde un objeto reproducía una canción, se posicionaba aleatoriamente a nuestro alrededor y teníamos que encontrarlo solo por el sonido… además una vez que lo encontrabas, variaba su posición de nuevo aleatoriamente. Realmente impresionante lo bién que funcionaba.

Colisiones con el mundo real.

Hasta aquí, todo maravilloso. Pero cuando las esferas de la demo del bloc de notas caían al suelo, desaparecían sin colisionar con los objetos reales. Para llevar a cabo esto, solo tuvimos que agregar un objeto del kit de hololens a nuestra escena en Unity. Este objeto nos permitía dibujar la malla del mundo real en wireframe, opaca o ocultarla. Una vez puesto, automáticamente los objetos colisionaban con el mundo real. Además, la malla no era estática, se redibujaba constantemente por lo que podías tirar un objeto en una dirección y poner un obstaculo, una silla por ejemplo, en su camino y el objeto virtual colisionaba con la silla del mundo real… impresionante.

Lo bueno…

Fueron suficientes para hacer 7 demos muy sencillas, pero que utilizaban todos los aspectos de Hololens, gestos, tracking de cabeza, voz, colisiones, sonido… lo que más me sorprendio fue la sencillez para desarrollar usando toda esta tecnología. Muchas cosas como las colisiones con el mundo real ™ ya te las daba automágicamente Hololens, el sonido posicional, el crear una escena y que fuese visible…

El equipo de Hololens ha decidido mapear las unidades de Unity 1:1 con 1metro en el mundo real, por lo que era muy intuitivo crear objetos y posicionarlos en el mundo real.

La puesta en escena de Microsoft. Nos citaron en un hotel a unos 5 minutos del Moscone Center, en la 5º planta, nos pidieron que dejasemos todos los aparatos electrónicos, incluso la Band, en una taquilla, nos pusieron en línea por parejas y nos fueron metiendo en una antesala y presentándonos a nuestro tutor, con el que compartimos las siguientes 4 horas, comió con nosotros, y se preocupó de todo lo que necesitásemos. Todo esto entre guardias de seguridad como armarios, yo vi 3 en la sala y en los ascensores había otros 2. Cada vez que terminabamos uno de los ejemplos, nos daban un achievement y aplaudían… todo muy “gaming”, agradable y personal. Un gran trato el que recibimos todos allí.

Lo que todavía hay que pulir…

Y no digo malo, no por fanboy, si no porque no me paso nada que pudiese considerar “malo”, La experiencia de desarrollo hay que pulirla un poco para no tener que parar a mano las apps para poder desplegar una nueva y para poder depurar una app.

Hay que mejorar un poco la latencia de los comandos de voz, aunque quizás no sea posible, ahora mismo tiene la misma latencia que tiene cortana, por lo que no es en sí un show stopper, simplemente  que todos los demas gestos son tan inmediatos, que en la voz se nota el retardo… esperas que sea inmediato.

El tamaño de visión. Buscad un monitor de 24” y ponerlos a unos 40 centímetros de el, ese sería más o menos el espacio de renderizado de Hololens, ¿Por hardware? ¿Por rendimiento? La verdad es que no lo se, es algo en lo que siguen trabajando según nos dijeron, y si te acercas mucho a un objeto estropea en cierta medida la experiencia por que vez el corte del objeto virtual sobre el mundo real.

La sujección a la cabeza es un poco endeble todavía y te da la impresión de que si giras demasiado la cabeza o la inclinas, se pueden caer las Hololens, estaría bien que lo mejorasen porque muchas veces tiendes a inclinarte para mirar detrás de un objeto y  te refrenas por miedo a que se caigan.

El futuro

El futuro, es una pasada. Lo sé porque desde el minuto 1 que me puse las Hololens supe que estaba en él. Las Hololens son algo totalmente nuevo y sorprendente, la aplicación profesional en medicina, mecánica, deportes o ocio es tán clara, que personalmente creo que van a revolucionar el mundo. Ahora solo nos queda esperar a que Microsoft decida que quiere nuestro dinero y cree un programa de Early adopters para que los desarrolladores podamos ponernos a trabajar con ellas.

A continuación os dejo unas fotos de una Hololens de exposición que tenían en una vitrina y nos permitieron fotografiar, con selfie incluido para demostrar que si, que estube allí y que todo esto, no fue solo un sueño de ciencia ficción, aunque lo parezca!WP_20150501_13_19_39_Pro

WP_20150501_13_19_45_Pro

WP_20150501_13_19_55_Pro

Y aquí un pequeño video oficial que Microsoft ha colgado en Youtube, en el segundo 42 podéis ver la mesa donde estuve trabajando… en ese momento debía estar jugando con las hololens por el pasillo jajajaja.

Microsoft HoloLens

Un  saludo y Happy Coding!

 

[Windows 10] Novedades para desarrolladores 3 de N

Hola a todos!

Vamos a por la tercera entrega de la serie Windows 10, novedades para desarrolladores. Pero primero, por si te perdiste los anteriores, el índice:

  1. Windows 10, novedades para desarrolladores 3 de N: Nuevos controles

Bonus track: Windows 10 for phones build 10051

Antes de comenzar con el contenido de esta entrega propiamente dicho, una buena noticia. Con la última versión de Windows 10 for phones 10051, ya podemos desplegar aplicaciones desde Visual Studio a nuestro teléfono.

Para ello, primero tendremos que registrar nuestro dispositivo para desarrollo usando la conocida aplicación Windows Phone Developer Registration (10). La diferencia es el número entre paréntesis. Tenemos que asegurarnos de usar la versión 10, no la tradicional 8.1:

image

Solo tienes que presionar el botón “Register” e introducir los datos de tu cuenta LiveID para registrar el nuevo dispositivo.

NOTA: Si antes de actualizar el teléfono a Windows 10, ya lo tenías registrado para desarrollo, no necesitarás volver a registrarlo.

Ahora si, empecemos con la tercera entrega. En esta ocasión, vamos a darle un repaso a nuevos controles incluidos en el SDK.

Entre otras muchas novedades, en este artículo verás dos nuevos controles:

  • RelativePanel, que te ayudará en la creación del Layout de tu página y el soporte a orientaciones y resoluciones diferentes.
  • SplitView, con el que podrás crear los nuevos menús de Windows 10 entre otras cosas.

También veremos nuevas propiedades que se han añadido a los controles contenedores originales (Stack, Grid…) para simplificar nuestro XAML.

RelativePanel

En el anterior artículo de la serie hablamos de como poder adaptar nuestra interfaz de usuario a distintas resoluciones usando Adaptative Visual States. En este sentido, el nuevo RelativePanel nos va a simplificar mucho el trabajo.

El RelativePanel es un control contenedor, al igual que la Grid clásica de XAML, pero que nos permite posicionar los elementos dentro de él de forma relativa al panel y a los elementos contenidos.

Esto nos dá mucha flexibilidad. Por ejemplo empecemos con algo sencillo, dos elementos dentro de un RelativePanel:

<RelativePanel>
    <Rectangle Fill="Purple" Width="250" Height="200"/>
    <Ellipse Fill="Yellow" Width="350" Height="350"/>
</RelativePanel>

Como podemos ver, ambos están posicionados por defecto en el borde superior izquierdo del panel:

image

Ahora, si modificamos nuestro XAML usando las propiedades adjuntas que expone el RelativePanel, podemos obligar al ellipse a situarse en la esquina inferior derecha:

<RelativePanel>
    <Rectangle Fill="Purple" Width="250" Height="200"/>
    <Ellipse Fill="Yellow" Width="350" Height="350"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Este XAML, nos ofrece este resultado:

image

Incluso si cambiamos la orientación o la resolución, los elementos se quedarán anclados donde los hemos posicionado. Pero es aún más interesante el poder definir sus posiciones relativas entre ellos, por ejemplo, ahora que hemos posicionado el elipse en la esquina inferior derecha, podemos decirle al rectángulo que se posiciones relativo al elipse:

<RelativePanel>
    <Ellipse x:Name="elipseAmarillo" Fill="Yellow"
             Width="350" Height="350"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.AlignBottomWithPanel="True"/>
    <Rectangle Fill="Purple" Width="250" Height="200"
               RelativePanel.AlignTopWith="elipseAmarillo"
               RelativePanel.AlignLeftWith="elipseAmarillo"/>
</RelativePanel>

Esta posición dibujará el siguiente resultado:

image

Lo que hemos echo es alinear los bordes superior e izquierdo de ambos elementos y además alinear los bordes inferior y derecho del elipse con el panel.

Tenemos multitud de opciones más que usar:

  • Below: nos permite indicar que el elemento se alinee debajo del elemento indicado.
  • Above: nos permite indicar que el elemento se alinee encima del elemento indicado.
  • LeftOf/RightOf: posicionar el elemento a la izquierda o derecha del elemento indicado.

De esta forma, toda nuestra interface será relativa y se alineará correctamente independientemente de la resolución o de los cambios de orientación que sufra el dispositivo:

<RelativePanel>
    <Ellipse x:Name="yellowEllipse" Fill="Yellow"
             Width="350" Height="350"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.AlignBottomWithPanel="True"/>
    <Rectangle x:Name="purpleRectangle" Fill="Purple"
               Width="250" Height="200"
               RelativePanel.Above="yellowEllipse"
               RelativePanel.AlignLeftWith="yellowEllipse"/>
    <Rectangle Fill="Orange"
               Width="225" Height="300"
               RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.LeftOf="purpleRectangle"/>
</RelativePanel>

image

SplitView

Un nuevo chico en el patio de juegos de Windows, pero un antiguo conocido para los que vengan o trabajen con iOS o Android. SplitView es su nombre en Windows, muchos lo conoceréis como el menú hamburguesa… o el menú lateral tan usado en iOS y Android

hamburguer

hamburguersample

El control SplitView es en si mismo toda una revolución en la plataforma Windows, sobre todo en la familia de dispositivos mobile, donde llevamos varios años ya, desde Windows Phone 7, con un patrón de uso en la parte inferior de la pantalla. Ahora de pronto nos vemos cambiando hacia la parte superior… veremos como queda todo finalmente. Pero ahora vamos a ver como funciona este control en Windows 10.

Básicamente, el control Splitview nos permite definir un panel con opciones que puede ser abierto para crear un menú deslizante lateral.

Para empezar, podemos crear un layout como el siguiente:

<Grid Background="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
        
    <Grid Grid.Row="0" Background="RoyalBlue">
        <ToggleButton x:Name="BurguerToggle"
                      Background="Transparent"
                      IsChecked="False">
                    <FontIcon x:Name="Hamburger"
                           FontFamily="Segoe MDL2 Assets"
                      Foreground="LightCyan"
                      Glyph="" />
        </ToggleButton>
    </Grid>

    <SplitView Grid.Row="1" PanePlacement="Left"
               CompactPaneLength="50"
               OpenPaneLength="320"
               IsPaneOpen="{Binding IsChecked,
                                    ElementName=BurguerToggle}"
               PaneBackground="RoyalBlue"
               DisplayMode="CompactInline">
        <SplitView.Pane>
            <RelativePanel/>
        </SplitView.Pane>
    </SplitView>
</Grid>

En este código, podemos ver como definimos un ToggleButton en la primera Row, que actuará como el botón para abrir y cerrar nuestro SplitView. Usamos un icono de fuente, FontIcon, con la nueva fuente Segoe MDL2 Assets incluida en Windows 10 para definir el símbolo del menú hamburguesa.

A continuación en el SplitView hay ciertas propiedades interesantes:

  • PanePlacement: Donde se situará, el panel desplegable: a izquierda o derecha.
  • DisplayMode: La forma en la que se mostrará el SplitView:
    • CompactInline: compacto, dejando una tira del control visible y en linea con el contenido. Al abrirse, modifica el tamaño del contenido que tenga a su lado.
    • CompactOverlay: compacto, dejando una tira del control visible y sobre el contenido de la pantalla, por lo que no modifica el tamaño de este.
    • Inline: igual que CompactInline, pero sin la tira del control, no se ve nada del SplitView.
    • Overlay: igual que CompactOverlay, pero sin la tira del control, no se ve nada del SplitView.
  • CompactPaneLength: Nos permite definir el ancho de la tira del control cuando está cerrado y el displaymode es CompactInline o CompactOverlay.
  • OpenPaneLength: Nos permite definir el ancho del control abierto.
  • IsPaneOpen: determina si se abre o se cierra el panel. En este caso hemos usado un Binding al ToggleButton para poder hacerlo sin escribir código C#.

El resultado, en Tablet sería este:

image

Y en el teléfono, este otro:

007

En el teléfono no es recomendable dejar un modo Compact, podemos usar AdaptativeVisualStates para cambiar esto dependiendo de la resolución, por ejemplo.

No es un adios, es un hasta luego…

Y con esto termina la tercera entrega de la serie, como siempre, puedes encontrar los ejemplos de este artículo (Win10RelativePanel y Win10SplitView) en mi repositorio de GitHub sobre Windows 10.

Nos vemos pronto!

Un saludo y Happy Coding!

 

[Windows 10] Novedades para desarrolladores 2 de N

Hola a todos!

Seguimos con el segundo artículo de la serie sobre novedades para desarrolladores en Windows 10. Aquí tienes el índice de artículos:

  1. Windows 10, novedades para desarrolladores 2 de N: UI Adaptativa

En esta ocasión vamos a hablar de los nuevos adaptative visual states y sobre como adaptar nuestra interfaz de usuario a las diferentes familias de dispositivos existentes.

En las aplicaciones universales para Windows 8.1 y Windows Phone 8.1, teníamos un proyecto diferente para cada plataforma. Esto facilitaba el crear una interfaz de usuario adaptada, simplemente creando la misma página dos veces, una por cada plataforma.

Sin embargo, en Windows 10 solo disponemos de un proyecto, ¿Como podemos adaptar nuestra interfaz de usuario?

Existen dos formas principalmente: Podemos crear varias vistas XAML para una misma página o podemos modificar el aspecto de nuestro XAML mediante visual states.

Adaptative visual states

Si ya has desarrollado en XAML para Windows o Windows Phone, te sonarán los Visual States

Éstos “estados visuales” te permiten definir grupos de cambios de la interfaz de usuario dentro de tu XAML, para una página o un control, que definan diferentes estados. Por ejemplo, podíamos definir un estado para indicar que estamos cargando datos, otro estado para cuando el usuario haga un gesto predeterminado (un swipe, un fick…)

Lo único que les faltaba era una forma sencilla de usar Visual States para el cambio de nuestra interfaz de usuario dependiendo de la resolución vertical/horizontal del dispositivo donde se ejecutaba la app. Este es el hueco que cubren precisamente los Adaptative Visual States. Mediante el uso de un nuevo tipo de trigger, el AdaptativeTrigger, puedes crear VisualStates que se ejecuten automáticamente basándose en el tamaño de la ventana de la aplicación.

Pongamos como ejemplo el siguiente XAML que hemos creado en un proyecto Blank application (UAP) para Windows 10:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Margin="24,24,0,12" BorderBrush="Red" BorderThickness="2" Background="LightCyan">
        <TextBlock x:Name="TitleText" FontSize="48" Text="This is a long text title!" Foreground="Black"/>
    </Border>
    <StackPanel x:Name="ListPanel" Orientation="Vertical">
        <Image x:Name="Image01" Source="/Assets/Bilbao001.jpg" MaxHeight="120" Stretch="UniformToFill"/>
        <Image x:Name="Image02" Source="/Assets/Bilbao002.jpg" MaxHeight="120" Stretch="UniformToFill"/>
        <Image x:Name="Image03" Source="/Assets/Bilbao003.jpg" MaxHeight="120" Stretch="UniformToFill"/>
    </StackPanel>
</StackPanel>

Si ejecutamos la aplicación en el emulador de Windows 10 mobile y en Windows 10 obtendremos el siguiente resultado:

image

El resultado no es bueno en ninguna de las dos plataformas. En Tablet/Desktop vemos todo el título, pero las imágenes se estiran demasiado y la altura máxima que les hemos puesto hacen que no se vean bien. En el emulador del teléfono, las imágenes se ven bien, pero el título es demasiado grande y no se ve entero.

Vamos a crear un primer Visual State que ajuste el texto del título para que se vea correctamente en el teléfono:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="300"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="TitleText.FontSize"
                        Value="24"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Con el AdaptativeTrigger le indicamos al sistema que lance los Setters cuando la resolución de pantalla horizontal sea igual o mayor al tamaño mínimo indicado. En este caso cambiamos el tamaño de fuente del título a uno más adecuado. Ahora podemos crear otro Visual State que controle una resolución mayor, para adaptar el contenido a Tablets/Desktops:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="300"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="TitleText.FontSize"
                        Value="24"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ListPanel.Orientation"
                        Value="Horizontal"/>
                <Setter Target="Image01.MaxHeight"
                        Value="600"/>
                <Setter Target="Image02.MaxHeight"
                        Value="600"/>
                <Setter Target="Image03.MaxHeight"
                        Value="600"/>
                <Setter Target="Image01.MaxWidth"
                        Value="300"/>
                <Setter Target="Image02.MaxWidth"
                        Value="300"/>
                <Setter Target="Image03.MaxWidth"
                        Value="300"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

En este caso, cuando la resolución es mayor de 600 píxeles, cambiamos la orientación del StackPanel y los tamaños máximos de las imágenes, para aprovechar mejor la pantalla. Todo, usando como disparador el AdaptativeTrigger. ¿El resultado? Aquí podéis ver algunos ejemplos:

image

Esto ya tiene otro aspecto… ahora nuestras imágenes y textos se adaptan al tamaño de su contenedor para ofrecer la mejor experiencia en cada momento.

Es importante tener algo en cuenta. Con los Adaptative Visual States, estamos trabajando con resoluciones, no con plataformas. Por eso en la imagen superior, podemos ver tanto en Tablet como en Phone, el mismo layout, dependiendo solo de la resolución horizontal en cada momento.

¿Y si quiero una vista específica para dispositivos móviles, por ejemplo? Esto no te sirve. Ten en cuenta que puedes tener smartphones con una resolución horizontal de 400 píxeles y otros con 1080 píxeles… y si los pones en modo landscape, hasta 1920 píxeles. Lo mismo que una pantalla de PC y muchas tablets del mercado.

Si quieres tener una vista en especial para una familia de dispositivos, sigue leyendo en el siguiente apartado.

Device family views

Puede que en ocasiones tu interfaz de usuario sea tan compleja, que adaptarla mediante los Visual States sea una locura. O simplemente que los cambios sean tantos, que casi merecería la pena crear una pantalla nueva desde cero.

Para estos casos, Microsoft ha añadido al SDK de Windows 10 el concepto de “Device family views”, que nos permite añadir múltiples vistas .xaml a una misma página, identificando cada una por convención.

Vamos a empezar por crear un nuevo proyecto Blank Application (UAP) que llamaremos WIn10DeviceFamilyViews.

En la página principal MainPage, vamos a crear la interfaz de usuario por defecto para Tablet/Desktop, sin usar Adaptative Visual States:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Margin="24" BorderBrush="Red" BorderThickness="2"
            Background="LightCyan">
        <TextBlock x:Name="TitleText" FontSize="48"
                    Text="This is the default view for mainpage"
                    Foreground="Black"/>
    </Border>
    <StackPanel Margin="24" x:Name="ListPanel" Orientation="Horizontal">
        <Image x:Name="Image01" Source="/Assets/Bilbao001.jpg"
                MaxHeight="600" MaxWidth="300" Stretch="UniformToFill"/>
        <Image x:Name="Image02" Source="/Assets/Bilbao002.jpg"
                MaxHeight="600" MaxWidth="300" Stretch="UniformToFill"/>
        <Image x:Name="Image03" Source="/Assets/Bilbao003.jpg"
                MaxHeight="600" MaxWidth="300" Stretch="UniformToFill"/>
    </StackPanel>
</StackPanel>

El resultado:

image

Ahora, vamos a crear una vista específica para la familia de dispositivos mobile.

En primer lugar, vamos a añadir una nueva carpeta a nuestro proyecto llamada “DeviceFamily-Mobile”. Por convención, cuando la familia de dispositivos en la que nos ejecutemos sea mobile y esta carpeta exista, se buscará por cada página si existe una vista xaml en ella. Si existe, se usará en lugar del xaml por defecto.

Una vez creada la carpeta, vamos a añadir un nuevo item, pero no añadiremos una página nueva, en su lugar seleccionaremos el item Xaml View de la ventana de añadir nuevo item. Lo llamaremos igual que la página a la que deseamos añadirla. En este caso MainPage.xaml:

image

Una vez añadida nos daremos cuenta de que no tiene archivo cs asociado. Pero si hacemos click en la ventana de XAML y seleccionamos view code (F7) nos abre un archivo de code behind… es el de la página principal.

Ahora podemos empezar a diseñar nuestra vista mobile. Le añadimos este XAML:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Margin="24,24,24,12" BorderBrush="Red" BorderThickness="2"
            Background="LightCyan">
        <TextBlock x:Name="TitleText" FontSize="26"
                    Text="This is the mobile view for mainpage"
                    Foreground="Black"/>
    </Border>
    <StackPanel Margin="24,0,24,24" x:Name="ListPanel" Orientation="Vertical">
        <Image x:Name="Image01" Source="/Assets/Bilbao001.jpg"
                MaxHeight="230" Stretch="UniformToFill"/>
        <Image x:Name="Image02" Source="/Assets/Bilbao002.jpg"
                MaxHeight="230" Stretch="UniformToFill"/>
        <Image x:Name="Image03" Source="/Assets/Bilbao003.jpg"
                MaxHeight="230" Stretch="UniformToFill"/>
    </StackPanel>
</StackPanel>

Es muy parecido al XAML que teníamos en la página principal, pero totalmente adaptado al uso vertical y menor resolución.  Incluso podemos añadir nuevos elementos no necesarios en la vista por defecto, como un scroll para ver las imágenes más grandes.

Si ahora volvemos a ejecutar la aplicación tanto en Tablet como en el emulador del teléfono, veremos que en el primer caso sigue usando la vista por defecto mientras que en el segundo hace uso de nuestra nueva vista xaml:

image

Cada familia de dispositivos tiene sus vistas independientes, lo que nos aporta la misma flexibilidad que teníamos en los proyectos universales de 8.1, pero con la nueva estructura unificada. Además podemos mezclar ambas técnicas: Adaptative visual states y Vistas por familia de dispositivo, según sea necesario en cada página.

Esto ha sido todo amigos…

Por ahora!! Espero que os guste el artículo y os sea útil el código, que como siempre, tenéis en el repo de GitHub de Windows 10 que he creado.

Volveremos a vernos en breve con más cosas interesantes sobre las novedades de Windows 10 para desarrolladores.

Un saludo y Happy Coding!