Siguiendo las elecciones Internas en el Espectador.com

by Miguel 23. May 2009 06:18

El espectador ha publicado un nuevo sitio para el seguimiendo de las elecciones internas que se darán en Uruguay: http://www.internas2009.com.uy/

image

El sitio está desarrollado en Silverlight 2, por la gente de Innicia (recomiendo visitar su sitio, otro excelente trabajo en Silverlight), un partner de Microsoft del Uruguay.

No voy a describir demasiado las funcionalidades y lo increible que resulta la experiencia de utilizar el sitio de las internas, pero si me gustaría compartir algunos patrones que se pueden ver  y podemos considerar al desarrollar experiencias tán ricas en Silverlight:

Pre-Loader

image

Al ingresar al sitio vemos una primera aplicación Silverlight que muestra el start-up del sitio, incluyendo porcentages de descarga o preparación del otros componentes. Una de las tareas que se realiza en ese momento es la descarga de un segundo archivo XAP que incluye el resto de la aplicación. Es importante que manejemos la ansiedad del usuario y que sienta que “ya ingreso” a la aplicación, y no que está ocurriendo un error si se demoran en cargar los recursos.

Listado y filtrado de la información

image

Tan solo la página de llegada nos muestra un claro ejemplo de todas las tareas que deberíamos considerar al mostrar una gran cantidad de información a los usuarios.

  • Paginación: Se puede ir a la página siguiente, la última o a una determinada.
  • Filtrado por fechas.
  • Búsqueda de contenido: Para realizar filtros en base a un texto en particular.

Hasta aquí los tradicionales que tenemos en cuenta. Pero si nos fijamos hay patrones mucho más sutiles e importantes:

  • Cada item aparece resumido, y es posible desplegarlo para su mejor visibilidad.
  • Los filtros por candidato están hechos presentando la foto del mismo, y no sólo el nombre para su más facil reconocimiento.
  • Si buscamos ver más items en cáda página, podemos pasara a una segunda vista llamada “Etiquetado”:

image

Dashboard

La pantalla de escenario nos muestra un claro ejemplo de combinar diferentes tipos de medios (imágenes, video, gráficos, etc), de una forma limpia para el usuario, reflejando en poco segundos la información referida a un único tema (en este caso un candidato en particular):

image image

Como parte del “patrón” podemos identificar el listado de candidatos de la izquierda, que permite una forma de cambio de contexto del Dashboard actual, sin necesidad de ir a una pantalla anterior a seleccionarlo.

Tagging o etiquetado de la información

El comparador es un claro ejemplo de clasificación de información por etiquetas, y lo eficiente que se vuelve su presentación en pantalla con Silverlight y Linq (esto es sólo un supuesto mío ya que no tuve oportunidad de ver el código :) ):

image

La información no sólo se lista, se presenta al usuario

Y mi forma preferida en esta aplicación son los gráficos, no sólo por la calidad y variedad de los mismos, sino por las animaciones al cambiar de un candidato a otro:

image

Para los interesados en patrones de experiencia de usuarios, les recomiendo darse una vuelta por http://quince.infragistics.com/

Mis felicitaciones a todos los involucrados en este excelente trabajo.

Miguel.

Tags:

Smooth Streaming

by santiago 21. May 2009 08:23

En la presentación de Uxity hablamos de Smooth Streaming y mostramos un ejemplo de como funciona. A continuación voy a explicarles un poco sobre esta funcionalidad además de mostrarles como pueden hacer para visualizar el ejemplo.

Smooth Streaming es una extensión de IIS Media Services, que permite el streaming multimedia de alta calidad a clientes Silverlight adaptando la calidad del video (bit rate) al ancho de banda disponible en el cliente. Esto nos permite visualizar un video sin necesidad de esperar el buffering tan molesto cuando estamos viendo videos de alta calidad.

Esta tecnología es la que utilizo para la transmisión de los Juegos Olímpicos 2008 por NBC.

Smooth Streaming detecta las condiciones de red del cliente y va cambiando de acuerdo a estos parámetros la calidad del video que recibe el player de Silverlight, permitiendo una visualización constante del video.

Links de interés

Como visualizar el funcionamiento de Smooth Streaming

Para los que tienen IIS 7

  • Instalar Web Platform Installer.
  • Descargar el video de prueba, ideado especialmente para ver esta simulación, ya que esta renderizado en diferentes bit rates.
  • Descargar UX Simulator, que es el player que va a simular la experiencia.

Para los que no tienen IIS7

  • Pueden entrar aquí donde van a tener una aplicación Silverlight para probar la experiencia.

UX Simulator

Tags: ,

Recursos de UX en español

by santiago 16. May 2009 14:12

Les voy a pasar algunos links de blogs en español sobre Silverlight y UX para agregar a los recursos que se enumeraron en el post anterior, teniendo en cuenta que son pocos los recursos de habla hispana que hoy en día contamos para investigar sobre el tema.

Si tienen algún link de recursos en español que quieran compartir, por favor envíenlo así lo agregamos.

Tags: ,

Recursos para Silverlight 3

by paulo 16. May 2009 13:40

Tal como prometimos el miércoles ya se encuentran disponibles los ejemplos y la ppt que mostramos en la charla, como así también una lista de links con más recursos para seguir ahondando en el tema.

Sample - Novedades en Silverlight 3
http://cid-454bb81b0f15da4d.skydrive.live.com/self.aspx/Public/UXity.Repository.zip

Sample - Silverlight 3 Novedades y Ejemplos
http://cid-454bb81b0f15da4d.skydrive.live.com/self.aspx/Public/SampleNewsSL3.zip

UXity
View more presentations from arik.

Tags: ,

Qué hay de nuevo en Silverlight 3?

by paulo 13. May 2009 05:04

Unas de las novedades más importantes anunciadas en Mix09 fue la liberación de la Beta 1 de Silverlight 3, la misma viene cargada de nuevas y mejoradas características, el siguiente es un listado de las mismas y de algunos recursos útiles para profundizar más en el tema.

GPU Acceleration

Ahora es posible utilizar el poder de nuestra placa de video en tareas que hagan uso intensivo de video y gráficos, liberando recursos del CPU.

Perspective 3D

Permite que un objeto 2D interactué en un espacio 3D fácilmente utilizando la propiedad PlaneProjection.

<Border CornerRadius="5" BorderBrush="DarkGray" Background="White">

<Grid Margin="10" Width="100" Height="100">

<Image Source="/images/silverlight.jpg"></Image>

</Grid>

<Border.Projection>

<PlaneProjection x:Name="Projection"

                 RotationZ="45"

                 RotationY="60"

                 RotationX="30"/>

</Border.Projection>

</Border>

Pixel Shader

Con Pixel Shaders podemos aplicar efectos como Drop Shadow o Blur a cualquier UIElement, también es posible crear nuestros propios efectos personalizados.

<TextBlock.Effect>

<DropShadowEffect Color="Red" BlurRadius="5" />

</TextBlock.Effect>

Navigation Framework

Esta nueva característica nos permite navegar fácilmente entre user controls dentro de nuestra aplicación, también se integra con el historial de nuestro browser permitiéndonos utilizar los botones atrás y adelante del mismo.

Navigation Framework también nos permite mapear una Uri a una vista, esto posibilita que se más fáciles para los buscadores indexar el contenido de nuestro site.

<NavigationCore:UriMapper x:Key="uriMapper">

<NavigationCore:UriMapping Uri="Home" MappedUri="/Views/Home.xaml"></NavigationCore:UriMapping>

       <NavigationCore:UriMapping Uri="{}{page}" MappedUri="/Views/{page}.xaml" />

</NavigationCore:UriMapper>

DataForm

El control DataForm permite representar una entidad, pudiendo agregar y modificar datos, navegar entre los mismo y definir opciones de validación.

DataGrid

Al control DataGrid se le ha agregado la opción de agrupar filas, soporte para validación a nivel de fila y celda, y nuevos handlers para cuando finaliza la edición de una fila o celda.

Codecs

Se ha agregado soporte para formatos de video MPEG-4, H.264 y audio AAC-LC mono y estéreo.

Element Data Binding

Esta muy útil característica ya estaba disponible en WPF, permite enlazar el valor de una propiedad de un control dado, con el valor de una propiedad de otro control, por ejemplo podemos enlazar el valor de la propiedad Width de una Image con el valor de la propiedad Value de un control Slider, para así cambiar el ancho de la imagen dependiendo del valor seleccionado en el slider.

<Slider x:Name="XSlider" Value="{Binding Widht, Mode=TwoWay, ElementName=SampleImage}"/>

Out-Of Browser

Con esta característica ahora es posible ejecutar nuestra aplicación como si fuese una aplicación de Desktop tradicional, por default todas la aplicaciones Silverlight 3 viene con esta opción, solo es necesaria activarla y agregar configurar algunos parámetros adicionales para el nombre, los iconos a utilizar, etc.

Además se ha ampliado el tamaño del Isolated Storage de 1 a 25mb, para poder guardar datos en el mismo cuando nuestra aplicación este desconectada, para ello se han agregado funciones de monitoreo de la conexión.

Estas son algunas de las novedades que trae la Beta 1 de Silverlight, a continuación les dejo algunos links donde podrán profundizar más en estos temas.

A guide to Silverlight 3 new features
http://timheuer.com/blog/archive/2009/03/18/silverlight-3-whats-new-a-guide.aspx#oob

Silverlight Toolkit
http://codeplex.com/Silverlight

Navigation Framework and Uri Routing
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/04/02/silverlight-3-quick-tip-6-navigation-framework-and-uri-routing.aspx

How to prepare your Silverlight 3 application offline
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/03/19/silverlight-3-quick-tip-2-how-to-prepare-your-silverlight-3-application-offline.aspx

Silverlight 3 Hardware Acceleration

http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/03/29/silverlight-3-quick-tip-hardware-acceleration.aspx

Tags: