Cifras y Letras

El mes pasado hicimos una formación interna en Microsoft Ibérica. Se trataba de que cada división de Microsoft le explicara al resto cómo aplicaba la visión de Software + Servicios.  No faltó ningún área de Microsoft, pudimos hablar de Software + Servicios en el hogar (Xbox), consumo (Windows Live), grandes sistemas (Oslo), Information Worder (Office Live) y por supuesto el desarrollo.

De esta última parte nos encargamos en mi departamento y aprovechamos para hacer algo divertido. Queríamos enseñar cómo se desarrollan aplicaciones en un modelo de Software + Servicios y nada mejor para eso que crear una aplicación y mostrarla. La idea era crear un pequeño juego muy conocido (Cifras y Letras) y hacer una competición entre todos los empleados. Colgamos la aplicación en la Intranet y anunciamos la competición junto a la convocatoria del evento.

En cualquier "manual del buen padre" te dicen que la mejor manera para que los niños aprendan es jugando. No sé cuánto aplica eso a los adultos pero ya que hacíamos el juego aprovechamos para incluirle mensajes enseñando las diferencias del modelo Software + Servicios con el tradicional. De esta manera queríamos que todos los que jugaran tuvieran la curiosidad de seguir profundizando y que se apuntaran al curso.

Nunca sabremos si fue por el juego o por el tema del curso pero la verdad es que vino mucha gente, tanto presencialmente en la sala como a través de Live Meeting, donde lo retransmitíamos en directo. En fin, fuera lo que fuera quería compartirlo con vosotros así que he colgado la aplicación en Internet para que juegue el que quiera. 

Podéis lanzar el juego en la página pública de Cifras y Letras o en el siguiente botón:

LanzarJuego 

¿Cómo se hizo?

El juego está desarrollado como no en Windows Presentation Foundation. En el servidor, usando WCF y Linq, hemos creado los servicios que permiten jugar online. La aplicación está publicada por ClickOnce para que pueda ser lanzada directamente desde el navegador y permite el funcionamiento offline, para jugar partidas individuales en caso de falta de conectividad con los servicios.

Originalmente el juego estaba publicado en la Intranet de Microsoft. Para mayor comodidad usábamos autenticación integrada Windows, así los empleados no tenían que registrarse y podían usar directamente su usuario del dominio de Microsoft. También tengo que decir que la aplicación no está pensada para correr en Internet, así que si estás buscando una aplicación segura, escalable y con las mejores prácticas de desarrollo te recomiendo MSDN Video.

¿Cuánto hemos tardado?

Para crear el juego hemos participado un desarrollador y un diseñador (gracias Raúl de Plain Concepts). La verdad es que ha sido una delicia comprobar de nuevo que con WPF podemos trabajar en paralelo los dos roles, no hemos tenido ningún problema de integración. Directamente lo que creaba el diseñador era actualizado en la aplicación y viceversa, una delicia para gente como yo con pocas dotes artísticas. Hemos tardado 3 días (o 3 noches…) y funcionó como la seda para los 600 empleados de Microsoft Ibérica. Tengo que decir que claramente en Microsoft somos de ciencias, el juego de las cifras se nos da mucho mejor que el de letras. Entre todos los que participaron sólo hubo una palabra de más de 6 letras pero se consiguieron muchos números exactos, incluyendo alguno espectacular de Ana, una chica de pequeña y mediana empresa que ha arrasado.

¿Puedo acceder al código fuente?

Esa pregunta estando en mi blog sobra 🙂 Aquí está todo el código fuente.

Nota: Si quieres instalar el servidor del juego localmente tienes que crear un directorio virtual en IIS apuntando al proyecto "ServicioJuego" y adjuntar la base de datos "CifrasYLetras" en tu SQL Server local.

¿Qué pinta tiene?

Aquí tenéis algunas capturas de pantalla:

image
Pantalla inicial

image
Juego de cifras

image
Juego de letras

image
Clasificaciones

Eso es todo, si te animas a jugar una partida mi alias en el juego es "David", nos vemos!!

Un juego de niños

Los últimos meses han sido moviditos para mí. He sido padre por segunda vez de un precioso renacuajo llamado Guille. Junto a Marcos ya vamos directos a por el equipo de baloncesto y por ahora dan la talla, Guille no para de crecer a lo alto y a lo ancho 🙂

En toda la movida del “juguete” nuevo también hemos lanzado Visual Studio 2008. Gracias a todos los que habéis venido (muchísimos!) tanto al evento TechDays que organizamos en Ifema como a los que vinisteis a la gira de Visual Studio posterior. Si no pudiste venir o quieres acceder de nuevo a las charlas hemos colgado las principales sesiones grabadas en video y los materiales en MSDN.

Inmerso en cambios de pañal me costó mucho desconectar para preparar mi charla así que decidí hacer una demo que me ayudara en mis quehaceres diarios. El invento es una aplicación WPF y Silverlight para jugar con el hermano mayor. Garantizo el éxito!

Si habéis trabajado con empresas como clientes os tengo que decir que trabajar con un niño de tres años no es demasiado diferente. También son exigentes con los plazos y piensan que una aplicación puede hacerse en una tarde 🙂

La aplicación empezó como un panel de letras donde Marcos tenía que identificar una letra aleatoria que decía en voz alta el sistema. Con esta edad los peques empiezan a identificar las letras y es sorprendente lo rápido que lo pillan. Como cualquier aplicación real el cliente (Marcos) empezó a pedir más y más funcionalidad. Al final la aplicación incluye el panel de las letras, un puzzle que se convierte en un video de su película favorita y hasta un cuadernillo donde aprender a escribir las letras. Aquí tenéis una captura:

 CacoGameScreen1

La aplicación utiliza las técnicas más habituales de WPF (plantillas, enlace a datos, video, controles…) aplicables también a cualquier aplicación empresarial y puedes descargarte todo el código fuente.

A partir de aquí me empecé a complicar la vida yo mismo (muy común también en los proyectos reales…). Me hacía ilusión hacerle una versión donde pudiera jugar con castillos de piezas y sobre todo destruirlos, lo que más le gusta. Así que decidí crear una versión con 3D y física:

 

CacoGameScreen2

 

Esta versión del juego utiliza la librería de física Newton y las capacidades 3D de WPF. También tienes todo el código fuente disponible.

Para acabar también tenéis una versión Silverlight, que usé para mostrar las diferencias de desarrollo y diseño con WPF.

 

Si quieres ver la sesión en video, tienes disponible una grabación completa en MSDN.

Tirando ladrillos

Pero qué bien me lo pasé en el ReMIX de junio. Fueron dos días intensos, con muchos nervios y sueño pero sin duda mereció la pena. Gracias a todos los que estuvisteis allí y a la gente que lo hizo posible, todos los ponentes (muchos y muy buenos) y a los compis de Microsoft que como diría un amigo, “lo dieron todo”.

Para los que no pudisteis venir, tranquilos. Estamos trabajando en una experiencia online del evento en www.visitremix.com/es. Allí estamos colgando todas las charlas grabadas en video. Sentimos el retraso en hacerlas disponibles, pero 1Gb de videos no son moco de pavo para grabar, tratar y subir a un servidor… Por cierto, que esto lo vamos a hacer este año para todos los grandes eventos que hagamos en MSDN, haciendo caso a vuestros comentarios.

Mis charlas en el ReMIX fueron como no de mi osito azul, WPF. En la primera hacía una introducción a WPF para desarrolladores y diseñadores y en la segunda me metía en un poco en las tripas de WPF para desarrolladores. Espero escribir más de estas dos charlas pero para empezar quería compartir la tontería estrella de la charla, las PPTs “vivas”. Llevaba unos días jugueteando con algunas librerías de física para .NET que se pueden usar desde WPF y quería darle algún uso a todo eso. Las demos de la segunda charla usaban estas librerías para hacerlas más entretenidas pero lo más interesante fue usarlas en las propias slides de la charla. Partiendo del visor de PPTs que desarrollé para otra ocasión, le añadí un poco de física para hacer las transiciones entre diapositivas. La idea es que una vez acabada una diapositiva puedes pintar sobre la pantalla plataformas fijas con el botón derecho del ratón. Cuando acabas pulsas el izquierdo y los objetos de la diapositiva “caen” sobre la pantalla rebotando en las plataformas y haciendo una transición entre slides espectacular. Ahí va una captura de la diapositiva de .NET 3.0, después de pintar una plataforma y pinchando para lanzar la animación:

La cosa se puede complicar, fijaos en esta diapositiva con la arquitectura de WPF:

¿Pero qué le faltan a estas diapositivas para ser una charla mía? Por supuesto, mi niño! Al final de la charla, cuando ya parecía que no lo iba a enseñar por primera vez en todo el año… la diapositiva de conclusiones se convierte en un muro de ladrillos del que puedes ir eliminando ladrillos con el ratón. El muro acaba cayéndose para dejar ver lo que hay detrás, por supuesto a Marcos recordando mi email:

Si queréis saber cómo está implementado podéis echar un vistazo a la charla de WPF para desarrolladores del ReMIX o si sois más de aprender viendo código aquí lo tenéis disponible enterito.

Y antes de que os lancéis con esto de la física, recordad que porque se pueda no hay que usarla siempre 🙂 Ya me veo aplicaciones de contabilidad donde los asientos se caen y rebotan entre ellos… A mí me ha servido para hacer una presentación más divertida y para pasármelo bomba jugando con WPF. Dejo para otro post alguna tontería más que he estado haciendo con esto, ¿alguien se lo imagina? Pista: me gusta jugar a los bolos 🙂

Neandertales y Homo Sapiens

Después de unos meses con pocas ganas de escribir en el blog quería volver con un tropezón y me he acordado de algo que leí hace tiempo. Es una bonita historia con moraleja que deberíamos de tener en cuenta como desarrolladores.


Durante años hubo un debate científico sobre el origen del hombre. Sabemos que hace 100.000 años existían dos especies de Homo Erectus, lo más parecido al hombre que había por aquel entonces. La teoría más extendida decía que el hombre actual provenía del cruce de ambas especies, el Homo Sapiens y el de Neandertal, pero los estudios de ADN han demostrado que venimos exclusivamente del Homo Sapiens.


Si no venimos de un cruce y en el mundo sólo hay una especie de hombre significa que en el camino se ha quedado la otra. La extinción del Neandertal se estima hace 45.000 años, así que hubo un periodo de 55.000 años donde convivieron las dos especies. ¿Qué ocurrió en esos años? ¿Qué pasó con el pobre Neandertal?


Normalmente asumimos que la fortaleza del hombre está en la inteligencia. Si hay algo que nos diferencia del resto de seres vivos de este planeta es que somos más listos que ellos (aunque algunas veces no lo parezca), así que parece evidente que si estamos dominando el mundo será por eso. Sin embargo, oh sorpresa, al estudiar restos de Neandertales se observa que tienen una capacidad cerebral mayor que el Homo Sapiens e incluso mayor que el hombre actual, o sea que son más listos que nosotros. Los Neandertales fueron los primeros en crear herramientas y esculturas artísticas, mientras que los Homo Sapiens, más torpecillos, seguían siendo extremadamente primitivos.


¿Dónde está el truco? ¿Por qué no desapareció el Homo Sapiens que era más tonto que una piedra? En 1983 se encontró un pequeño hueso de Neandertal en las cuevas de Kebara en Israel. Este pequeño hueso fue fundamental para saber lo que ocurrió con el Neandertal. Se trataba del hueso Hioides, situado encima de la laringe y debajo de la lengua. Este hueso demostraba que el Neandertal podía hablar, pero la constitución de su laringe limitaba su capacidad a unos pocos fonemas muy agudos. Mientras tanto, los Homo Sapiens tenían una forma de laringe que les permitía tener un lenguaje mucho más rico y por tanto, unas capacidades de transmisión de conocimiento mayores.


Los Homo Sapiens eran más torpes, sí, pero podían transmitir sus conocimientos entre ellos y a su descendencia. El resto de seres vivos tenían que confiar en la evolución de las especies para mejorar, que conlleva miles de años de espera. Mientras tanto nosotros podemos avanzar en una sóla generación con nuevos conocimientos y herramientas y transmitirlas entre nosotros y a nuestros hijos. Cada generación comienza con lo que dejó la otra y las hallazgos y aprendizajes de otros pueden ser usados inmediatamente por el resto.


O yo estoy muy obsesionado con mi trabajo o esto claramente se ve también en el mundo del desarrollo. Tengo la sensación de que la informática es un pequeño nuevo mundo donde conviven Neandertales y Homo Sapiens. Neandertales como desarrolladores que confiando en su inteligencia se dedican a encerrarse en sus conocimientos, aprender lo fundamental y reinventar la rueda en cada desarrollo. Son más listos que el resto, no lo dudo, pero reinventar patrones de diseño, técnicas de algoritmos o frameworks ya existentes en cada desarrollo no puede ser bueno para su especie. Los desarrolladores Homo Sapiens sin embargo quizás no son tan listos pero aprenden de otros y comparten su conocimiento. Son gente que leen libros, consultan la web, pertenecen a grupos de usuarios, participan en foros o comparten experiencias en su blog. Gente abierta a aprender de otros y a usar estos conocimientos para desarrollar aplicaciones y para innovar sobre ellos y compartirlos de nuevo.


Si eres un Neandertal te felicito, eres un tío listo. Harás aplicaciones que te parecerán alucinantes y pensarás que el cliente no sabe valorarlas. No te engañes, todo lo que piensas que has innovado ya lo ha hecho otro y la comunidad lo conoce y ha encontrado otra forma aún mejor. Si quieres innovar conoce esta comunidad antes y aporta sobre ella. Te convertirás en Homo Sapiens y estarás en el lado de los que sobrevivirán en el futuro…

Materiales del Developer Day 2007

Ya están colgadas las presentaciones, perdón por el retraso!


Y más contenido para los curiosos. Si os fijasteis bien las presentaciones que usamos en el Developer Day eran especiales. Le dimos un toque de diseño orientado a los videojuegos, como el resto del evento. De forma aleatoria aparecían unos videos difuminados en el fondo de las slides y antes de las demos la transición entre slides era una animación del logo del DevDay. Aquí tenéis una captura de pantalla:


 



 


Por si no os lo imaginais todavía… el truco está en WPF. Exportamos a XPS las presentaciones e hicimos una pequeña aplicación que añadía los videos y las animaciones. Si teneis curiosidad en su implementación aquí os paso los binarios y el código fuente completo:


Pintando sobre un bitmap en WPF

Una de las cosas que más llaman la atención de la aplicación que desarrollamos en el Web Day (Mi Bolsa) es la gráfica de cotizaciones.


La gráfica se genera en tiempo real en servidor y toma como parámetro el símbolo de la empresa y la fecha final. Aquí lo tenéis en un ejemplo en vivo, podéis poner cualquier símbolo de una empresa (ej. MSFT, AABC, MSN…) y una fecha. Al pinchar en el botón la gráfica se actualiza en servidor (por cierto los valores mostrados son aleatorios…):


mibolsa


 


La técnica utilizada para hacerlo es bastante antigua, pero con un toquecillo de WPF. En la página web sólo hay un elemento IMG cuya propiedad SRC se establece a una dirección de una página ASP.NET de servidor. Esta página toma como parámetros el ancho y alto, la empresa y la fecha y genera dinámicamente una imagen en el servidor en formato JPEG.


Los principales trucos para hacer que esto funcione:



  • Cambiar el MIME type de la página ASP.NET para que el browser la identifique correctamente como una imagen JPEG y no como una página HTML. Para hacer esto hay que establecer la propiedad ContentType de la respuesta. Si tienes el código fuente de Mi Bolsa puedes verlo en el archivo TickerChart.aspx, dentro de la función Page_Load:


Response.ContentType = “image/jpeg”



  • Generar la imagen en el servidor. Para darle vidilla hemos hecho la imagen con WPF. El concepto es muy parecido a usar GDI, se trata de generar un stream de bytes con la codificación de la imagen en JPEG. Una vez tengamos esta codificación la devolvemos en la página ASP.NET con un Response.Outputstream.Write.
    Otra historia es generar esa imagen desde WPF. La buena noticia es que cualquier renderización de WPF puede realizarse sobre una imagen en memoria en vez de sobre la pantalla. Para hacerlo tenemos que crear un objeto RenderTargetBitmap y llamar a su método Render con las primitivas que queramos pintar. El código que realiza esta operación está en el archivo ChartDrawer.cs:


public byte[] DrawChart()
{
      PixelFormat pf = PixelFormats.Bgr32;
      MemoryStream memStream = new MemoryStream();

      DrawingVisual drawingVisual = new DrawingVisual();
      DrawingContext drawingContext = drawingVisual.RenderOpen();

      DrawBackground(drawingContext);
      DrawAxis(drawingContext);
      DrawGrid(drawingContext);
      for(int i=0;i<_values.Count;i++)
            DrawValues(drawingContext, i);
      DrawAxisText(drawingContext);

      drawingContext.Close();

      RenderTargetBitmap renderBitmap = new RenderTargetBitmap
            (_width, _height, 96, 96, PixelFormats.Pbgra32);
      renderBitmap.Render(drawingVisual);

      JpegBitmapEncoder encoder = new JpegBitmapEncoder();
      encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
      encoder.Save(memStream);

      return memStream.GetBuffer();
}

Materiales WebDays

Cómo estoy disfrutando con los WebDays… Acabo de llegar de Barcelona, gracias a todos los que habéis llenado la sala y sobre todo a la participación y el buen rollo que ha habido desde el principio. Gracias también a Jose Luis y a Toni, del BCNDev.net, que han hecho dos charlas estupendas. En un ambiente así da gusto hacer un evento.

Y esto todavía está empezando… Hemos estado también en Sevilla (gracias Miguel Angel y a todos los que estuvisteis) pero todavía nos quedan 5 ciudades a las que estáis invitados:

Bilbao 17 Abril

Valencia 18 Abril

Vigo 19 Abril

Albacete 8 Mayo

Pamplona 19 Junio

Como veis no estaremos en Madrid con los WebDays porque tenemos preparada una historia bastante especial de desarrollo y diseño web para los días 4 y 5 de Junio en Madrid (ya os contaré más detalles y la URL de registro).

 

Al grano, he colgado los materiales de los WebDays en estas direcciones:

Transparencias Powerpoint

Código fuente de MiBolsa

 

Y desde hace algunos días está la misma aplicación MiBolsa funcionando online en esta dirección.

MiBolsa es una aplicación de ejemplo que hemos desarrollado para el WebDay y que explicamos en el evento. Tiene una versión no AJAX donde mostramos conceptos básicos de diseño estándar y una versión AJAX donde explicamos la aplicación de ASP.NET AJAX a un sitio web real. Aquí tenéis una captura de la versión AJAX:

 

Piensa en el usuario

Esto del desarrollo a veces se nos va de las manos. Estoy haciendo un ejercicio recordando algunos de los proyectos software en los que he trabajado en mi vida, identificando los temas más importantes que discutíamos entre los desarrolladores, con el jefe de proyecto o con el cliente. Me acuerdo de cosas como éstas:

  • ¿Debemos usar XSL para generar un documento o hacerlo a mano?
  • ¿Usamos Biztalk para el procesamiento en servidor o un workflow a medida?
  • ¿Entidades propias o Datasets?
  • ¿Procedimientos almacenados o sentencias ad-hoc?
  • ¿Ficheros en el sistema de archivos o en SQL Server?

Cualquiera de estos temas tienen algo en común: no le importan un pimiento al usuario. ¿Y por qué cuento esto? El otro día tuve una conversación muy interesante con el que podría ser un usuario de tu próxima aplicación. Era un enfermero de un hospital en Cádiz, mi papi está ingresado y gracias a Dios este enfermero me hablaba de lo bien que estaba evolucionando y de que pronto le darían el alta. Sin saber nada de mi trabajo me estuvo contando que con un poco de suerte a mi padre le iba a tocar inaugurar un nuevo sistema informático que no viene al caso y que están implantando por allí. ¿Pensáis que este enfermero sabía algo de las tripas del sistema? ¿Y que le importaba? Me describió perfectamente el sistema desde el punto de vista más importante: el del usuario.

Para empezar me comentaba que gracias a este sistema un ATS iría directamente a casa de mis padres con toda la información del ingreso y con los puntos más importantes que tenía que verificar. Esta información se escribe día a día desde el hospital y contiene todos los detalles que necesita para hacer su trabajo. Anteriormente este trabajo lo tenía que hacer el propio enfermo, con los problemas que eso traía. Primero, porque se perdía mucha información por el camino y segundo porque en ocasiones el enfermo ni siquiera llegaba a llamar al ATS y se quedaba sin asistencia ni seguimiento.

También me contaba su experiencia como usuario de la aplicación. Era el enfermero con más experiencia de la planta y sin embargo se avergonzaba de que le vieran los compañeros usando el sistema. Se intentaba esconder para introducir los datos porque escribía muy lento y le costaba navegar por los menús. No había recibido demasiada formación y tan agobiado estaba que estaba practicando en su casa para cogerle el tranquillo.

¿Pensamos en este enfermero y en los propios enfermos cuando desarrollamos una aplicación? No me digáis que esto es algo que tiene que hacer un analista (todavía existen?) o el arquitecto o el jefe de proyecto o leñes. Cuando desarrollamos tomamos cientos de decisiones que afectan a estas personas y con frecuencia los criterios que utilizamos son de lo más variopintos: queda bonita? es cool? es un reto para mí? aprendo algo haciéndolo? es fácil de hacer? Muy pocas veces nos ponemos en el pellejo de alquien que tiene que usar la aplicación durante todo el día, con prisas y con pocos conocimientos informáticos. Ventanas con 20 botones, comboboxes de cientos de elementos, drag and drops, lentitud de respuesta… ¿Os suena alguna aplicación así?

En estos tiempos que corren con frecuencia nos hacen olvidar la importancia que tiene nuestro trabajo. El impacto que va a tener en personas de carne y hueso, la mejora que supondrá a sus usuarios y a la gente para la que trabajan estos usuarios. Por mucho que tu entorno te haga olvidar esto recuerda que tenemos un trabajo alucinante donde podemos ayudar a mucha gente o a convertir su vida en un infierno. Y si no lo crees, ¿por qué no intentas buscar algo en un combobox de cien elementos?