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:
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…):
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();
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:
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:
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:
