• WPF Toolkit
• patterns & practices: Composite WPF and Silverlight
• Ribbons Guidance
• Lab: What’s Coming in WPF: Datagrid, Ribbon, and VSM
• Dabbling around the new WPF Datagrid
• Download Solucion de Ejemplo

El Design Maturity Model propuesto por Jess McMullin describe cinco niveles y sus respectivos comportamientos ante el diseño para poder guiarnos en el camino de una correcta incorporación del mismo en nuestros procesos de desarrollo y detectar en que estadio de madurez nos encontramos.

Nivel 1 – No somos conscientes del diseño

• El diseño no se reconoce como algo de valor
• Se  “diseña” sin ningún fundamento
• El diseño se deja de lado por cosas más “importantes”

Nivel 2 – Style

• El diseño es añadido solamente para ser “cool” o para seguir alguna tendencia
• El diseño es algo que se agrega a último minuto para añadir funciones meramente estéticas

Nivel 3 -  Forma y Función

• Se implementa el diseño para mejorar ciertas funcionalidades
• Se utiliza de forma limitada para agregar pequeños incrementos de funcionalidad en aplicaciones en desarrollo o existentes

Nivel 4 – Diseño como una forma de resolver problemas

• El diseño nos permite encontrar nuevas oportunidades para resolver problemas existentes
• El diseño nos permite acotar las opciones para atacar un problema específico

Nivel 5 – Totalmente orientados al diseño

• El diseño redefine los desafíos que enfrenta la organización
• El diseño establece el orden del día
• El diseño forma parte de toda estrategia
• La innovación está inmersa en la cultura

Esta es mi interpretación del DMM,  espero les sirva para saber en cual nivel están parados en la actualidad y si no están aplicando el diseño los ayude a tomar conciencia.

Para mostrar lo fácil que es integrar YUI a nuestras soluciones ASP.NET MVC, vamos a crear una aplicación de ejemplo en el que utilizaremos los controles DataSource y DataTable de YUI para consumir un feed Json creado con el nuevo JsonResult.

Para comenzar empezaremos con el código del Controller.

public JsonResult GetPlayersList()

{

OranjeDataContext ctx = new OranjeDataContext();

var data = (from player in ctx.Players

select player).ToList<Player>();

return this.Json(new {players = data.ToArray() }, “text/html”);
}

En el podrán observar que estoy utilizando el nuevo JsonResult que es un nuevo tipo de ActionResult que nos permite serializar la salida en formato Json, lo demás es solo una query LinqToSql y un poco de formateo en la forma de exponer el código Json, ya que la DataTable de YUI espera recibir la data de la siguiente manera.

Notaran que antes de la data propiamente dicha la DataTable de YUI espera obtener el nombre de la entidad expuesta.

Bien, el siguiente paso es consumir la data en la View, para ello lo primero que haremos será crear las referencias a los archivos JavaScript necesarios, para ello pueden utilizar el YUI Dependency Configurator, el cual indicándole los controles a implementar nos indicara los archivos que debemos utilizar.

Lo siguiente es consumir la data, para ello deberemos de incluir el siguiente código en la vista.

<script type=”text/javascript” language=”javascript”>

YAHOO.util.Event.addListener(window,“load”, function()
{

YAHOO.example.PopulateGrid = new function() {

var myColumnDefs = [{key:"PlayerId",label:"Id"}, {key:"Name"},{key:"Number"},{key:"Age"},{key:"Caps"},];

this.myDataSource= new YAHOO.util.DataSource(“Home/GetPlayersList?”);

this.myDataSource.responseType= YAHOO.util.DataSource.TYPE_JSON;

this.myDataSource.responseSchema= {resultsList: “players”,fields:["PlayerId","Name","Number","Age","Caps"]};

this.myDataTable= new YAHOO.widget.DataTable(“myGrid”, myColumnDefs, this.myDataSource);

};

});

</script>

<div id=”myGrid”></div>

En el podrán observar que creamos un evento que se dispara cuando se carga la vista, luego hay una función en la cual definimos las columnas a utilizar por nuestro DataTable, configuramos el DataSource el cual referencia al método que devuelve el Json serializado desde el Controller, a continuacion seleccionamos los campos de la entidad que utilizaremos y por ultimo creamos el DataTable al cual le pasamos los valores antes asignados mas el Id del elemento HTML en el cual queremos que se cree.

Si todo sale bien, deberían de ver en el browser algo parecido a lo que se aprecia en la imagen siguiente, en la misma también podrán notar la salida del JsonResult.

Aquí concluye este ejemplo, si desean seguir investigando la gran cantidad de características que se incluyen en el control DataTable, como así también los demás controles que forman parte de YUI lo pueden hacer en los siguientes links.

The Yahoo! User Interface Library (YUI)

Yahoo! User Interface Blog

Muchos de los lineamientos descriptos a continuación se basan en estudios de usabilidad, estos estudios hacen uso intensivo de técnicas de eye-tracking para recolectar información acerca de cómo el usuario interactúa con la aplicación.

El eye-tracking es una técnica que mediante equipos especializados permite seguir los movimientos de los ojos de los usuarios para determinar las aéreas en las que fija su atención, cuánto tiempo pasa en ellas y como “navegan” la aplicación.

En esta imagen pueden apreciar a un usuario probando una aplicación web mientras es monitoreado.

Una vez recolectada la data del eye-tracking es posible crear los llamados “heat maps” o “mapas de calor“donde es posible apreciar como el usuario interactuó con la aplicación, normalmente esto se hace coloreando las aéreas de la aplicación con una paleta que va del rojo para las zonas donde más atención se prestó hasta el verde pasando por el amarillo que son las zonas menos observadas por el usuario.

Ejemplo de heat map

Image from Web Form Design: Filling in the Blanks by Luke Wroblewski; Rosenfeld Media, 2008. http://www.rosenfeldmedia.com/books/webforms/

El uso de estas herramientas y técnicas aplicadas a la creación de formularios llevo a ciertas conclusiones, que permiten mejorar la usabilidad de los mismos dependiendo de la alineación y disposición de los elementos que conforman el formulario.

Top Aligned Labels

El uso de labels ubicadas por sobre el textbox es recomendable cuando las data a ingresar por el usuario es familiar, esta práctica acelera los tiempos en los cuales se completa el formulario, pero tiene como contra que necesita más espacio vertical, algo a tener en cuenta es el espacio y el contraste entre los diferentes elementos para así lograr una navegación fluida por parte del usuario.

En esta imagen pueden ver el comportamiento del usuario frente a este tipo de disposición.

Image from Web Form Design: Filling in the Blanks by Luke Wroblewski; Rosenfeld Media, 2008. http://www.rosenfeldmedia.com/books/webforms/

Right Aligned Labels

Alinear a la derecha los labels en los formularios es recomendable cuando se quiere mostrar una clara asociacion entre el label y su correspondiente textbox, esta técnica requiere menos espacio vertical, pero tiene la contra de que cuando los largos de los labels son muy dispares pueden hacer un poco dificultoso el escaneo de los elementos, en la siguiente imagen pueden ver un ejemplo de esta disposición y como el usuario reacciona al utilizarla.

Image from Web Form Design: Filling in the Blanks by Luke Wroblewski; Rosenfeld Media, 2008. http://www.rosenfeldmedia.com/books/webforms/

Left Aligned Labels

Situar los labels alineados a la izquierda de los texboxs se recomienda cuando los datos a ingresar no son familiares por el usuario, esto es porque el moviente entre el label y el textbox es mayor y es posible utilizar esta desventaja a nuestro favor para que el usuario preste más atención, esto se puede apreciar mucho mejor en la siguiente imagen, en la cual notaran que la cantidad de pasos es mayor, como así también el diámetro de los puntos lo cual indica que se paso más tiempo posicionado en esa área, esta técnica también es más eficiente en el uso del espacio vertical.

Image from Web Form Design: Filling in the Blanks by Luke Wroblewski; Rosenfeld Media, 2008. http://www.rosenfeldmedia.com/books/webforms/

Para seguir ahondando en estos temas les recomiendo la lectura del libro Web Form Design
Filling in the Blanks de Luke Wroblewski publicado por Rosenfeld Media, o de los siguientes enlaces.

La aportación del eyetracking en el sector de usabilidad
Eye-Tracking en Interacción Persona-Ordenador
Label Placement in Forms
Web Application Form Design

Notaran que además de la dll de nuestra aplicación, en este caso Anim.dll, también están incluidas un par de dlls con los controles usados por Silverlight.

En cambio en la siguiente imagen la cual corresponde a la misma solución pero ccompilada con la Beta2 solo se puede apreciar que se incluye en el .xap la dll correspondiente a nuestra solución y su correspondiente manifest.

Este approach hace que el runtime crezca un poco en tamaño, pero como contraparte tenemos que nuestras aplicaciones son más livianas, me parece un cambio inteligente, pero espero que el tamaño del runtime se mantenga controlado.

En próximos posts les iré mostrando algunas de las nuevas features que se incluyen en esta Beta de Silverlight 2.

El pasado 6 de junio junto a Edgardo Rossetto estuvimos presentando en las oficinas de Microsoft Argentina sobre desarrollo de aplicaciones RIA utilizando Silverlight y WCF, tal como prometí les dejo el código de las demos que estuvimos presentando como así también algunos links que les pueden ser de interés.

Technight Demos
Silverlight Screencasts & Quickstarts
Pictures Services
Microsoft Expression Community
Inkscape
Kaxaml

La forma más fácil de comenzar a probar Visifire y comprobar el poder de esta suite es utilizando el Chart Designer, el cual es una herramienta online que permite la creación de charts interactivamente y cuyo resultado podemos embeber en cualquier pagina.

También como es de suponer, podemos programáticamente crear charts y configurar su apariencia, ya que contamos con una gran cantidad de elementos visuales para personalizar y elegir el tipo de chart cuyo número también es muy amplio.

public Page()

{
 InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded); 

}

public class Vendor

{

public string name;

public int sales;

public Vendor(string name, int sales)
 {

this.name = name;
 this.sales = sales;
 }
 } 

void Page_Loaded(object sender, RoutedEventArgs e)

{ CreateChart();
 }
 public void CreateChart()
 { 

//Inicializamos el chart y los elementos que lo componen

Visifire.Charts.Chart chart = new
 Visifire.Charts.Chart();

Visifire.Charts.DataSeries dataSeries = new
 Visifire.Charts.DataSeries();

Visifire.Charts.DataPoint dataPoint;
 Visifire.Charts.Title title = new
 Visifire.Charts.Title();

//Configuración de las características visuales 

title.Text = “Sales in millions”;
 chart.Children.Add(title);
 chart.Width = 600;
 chart.Height = 400;
 chart.AnimationEnabled = true;
 chart.Theme = “Theme1″;
 chart.AnimationType = “Type3″;
 chart.UniqueColors = true; 

chart.View3D = true;

//DataSource

List<Vendor> people = new List<Vendor>();

people.Add(new Vendor(“Paulo”, 55));
 people.Add(new Vendor(“Chorch”, 33));
 people.Add(new Vendor(“Lito”, 66));
 people.Add(new Vendor(“Ed”, 37)); 

people.Add(new Vendor(“Max”, 21));

//Enlazamos los datos de la lista con los DataPoints

people.ForEach(delegate(Vendor v)
 {
 dataPoint = new Visifire.Charts.DataPoint();
 dataPoint.AxisLabel = v.name;
 dataPoint.YValue = v.sales;
 dataSeries.Children.Add(dataPoint);
 });

//Configuramos el tipo de chart a utilizar

dataSeries.RenderAs = “Doughnut”;
 chart.Children.Add(dataSeries);
 LayoutRoot.Children.Clear();
 LayoutRoot.Children.Add(chart);

}

Las siguientes imágenes muestran algunos de los resultados que podemos obtener al utilizar el código arriba expuesto.

Doughnut Charts

Pie Charts

Bars & Columns Charts

Para más información acerca de Visifire visiten su sitio donde encontraran gran cantidad de ejemplos, el código de la solución para bajar y su documentación.

De lo que si les voy a hablar es de ADO.NET Data Services el cual es el nuevo nombre del antes conocido proyecto Astoria, el mismo cuenta con varios cambios desde la CTP anterior, pero para mostrárselos nada mejor que comenzar con un proyecto desde cero. Antes que nada debemos tener instalado además de ASP.NET 3.5 Extensions Preview, ADO.NET Entity Framework Beta 3 y ADO.NET Entity Framework Tools Dec 07 CTP.

Vamos a comenzar creando un nuevo proyecto Web como se ve en la siguiente imagen.

Luego crearemos nuestro modelo de datos

Seleccionamos la opción Generate from Database

Elegimos la base de datos a utilizar

Seleccionamos las tablas que usaremos para el ejemplo y hacemos click en Finish.

Concluido este paso ya tenemos listo nuestro modelo de datos

Luego seleccionamos la opción Add new ítem y creamos un nuevo ADO.NET Data Service

Si recuerdan mi post anterior sobre Astoria, al llegar a este punto solo debíamos indicar a nuestro WebDataService que utilice nuestro Entity Model y ya estaba todo listo para exponer nuestra data al mundo, pero en esta versión esto ha cambiado, ahora debemos autorizar explícitamente cuales tablas y qué tipo de permiso utilizara nuestro ADO.NET Data Service.

En la siguiente imagen podrán ver como he referenciado a Microsoft.Data.Web y a mi modelo de datos, también pueden observar como inicializo el servicio, elijo las tablas a utilizar y el tipo de permiso que deseo asignarle.

Para este ejemplo voy a dejar que todas las tablas puedan ser expuestas es por ellos que he puesto un asterisco en lugar del nombre de una tabla en particular.

using System;

using System.Web;

using System.Collections.Generic;

using System.ServiceModel.Web;

using System.Linq;

using Microsoft.Data.Web;

using OranjeModel;

namespace OranjeDataService

{

public class Oranje : WebDataService<OranjeEntities>

{

public static void InitializeService(IWebDataServiceConfiguration config)

{

config.SetResourceContainerAccessRule(“*”, ResourceContainerRights.All);

}

}

}

Si presiono F5 para correr mi aplicación, podrán ver algo similar a lo expuesto en la siguiente imagen.

Podrán apreciar que el formato en que se está mostrando la información es AtomPub (Atom Publishing Protocol), este es otro de los cambios con respecto a la anterior CTP, también podemos consumir nuestro servicio utilizando JSON.

Si desean investigar más sobre como exponer data a través de ADO.NET Data Services, podrán en encontrar más información y ejemplos en los ASP.NET 3.5 Extensions Preview QuickStarts.

Bien, ahora que ya tenemos nuestro servicio funcionando, vamos a consumirlo, el escenario más común para hacerlo, seria en una aplicación Web, pero para este ejemplo utilizare una aplicación de consola.

Vamos a crear la aplicación de consola para la demo

Luego agregaremos una referencia a Microsoft.Data.WebClient en nuestro proyecto

Como vamos a necesitar representar la entidades definidas por el Data Service, deberíamos crearlas a las mismas en nuestro proyecto, para ello utilizaremos la utilidad WebDataGen que se encuentra en la carpeta donde están instaladas las ASP.NET 3.5 Extensions Preview, ejecutaremos la utilidad y le pasaremos los siguientes parámetros.

Entre los cuales se encuentran el nombre del archivo que generaremos con las entidades y la URI donde se encuentra nuestro servicio

Finalizado el proceso ya tendremos listo nuestro modelo de datos para poder ser añadido a nuestra aplicación de ejemplo utilizando la opción Add existing item.

En el archivo Program.cs de nuestra aplicación de ejemplo vamos a crear un referencia a nuestro entity model.

using OranjeModel;

Para consumir los datos de nuestro servicio utilizaremos la librería Microsoft.Data.WebClient, la misma cuenta con dos clases, WebDataContext y WebDataQuery, la primera representa el contexto en tiempo de ejecución de un web data service dado, la segunda permite hacer consulta contra un servicio utilizando la sintaxis basada en URIs de ADO.NET Data Service.

En el siguiente código podemos ver un ejemplo de WebDataContext y WebDataQuery en funcionamiento.

using System;

using System.Collections.Generic;

using Microsoft.Data.WebClient;

using System.Linq;

using System.Text;

using OranjeModel;

namespace OranjeDataClient

{

class Program

{

static void Main(string[] args)

{

WebDataContext ctx = new WebDataContext(“http://localhost:6239/Oranje.svc”);

WebDataQuery<Players> players = ctx.CreateQuery<Players>(“/Players”);

foreach (Players p in players)

{

Console.WriteLine(“Number:” + p.Number + ” Name: “ + p.Name + ” Age: “ + p.Age);

}

}

}

}

Presionando Ctrl+F5 deberíamos de obtener un resultado similar al de la siguiente imagen.

Además de utilizar WebDataContext y WebDataContext.CreateQuery para consultar un Data Service tambien es posible hacer consultas utilizando LINQ, como verán en el siguiente ejemplo la librería Microsoft.Data.WebClient se encarga de mapear las instrucciones LINQ contra la URI del Data Service y recuperar los recursos especificados como objetos .NET

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using OranjeModel;

namespace OranjeDataClient

{

class Program

{

static void Main(string[] args)

{

OranjeEntities ctx = new OranjeEntities(“http://localhost:6239/Oranje.svc”);

var q = from p in ctx.Players

orderby p.Age

select p;

foreach (var player in q)

{

Console.WriteLine(“Number:” + player.Number + ” Name: “ + player.Name + ” Age: “ + player.Age);

}

}

}

}

Presionamos Ctrl+F5 y deberíamos de ver los datos de las jugadoras ordenados por edad.

Nuevamente y para finalizar les dejo el enlace a los QuickStarts donde podrán encontrar información más detallada.

Últimamente muchos escriben sobre el concepto de simplicidad, de todo ellos John Maeda se destaca y en su libro The Laws of Simplicity nos proporciona diez leyes y tres reglas las cuales nos guían en los conceptos que conforman se simples y algunos consejos para aplicarlos en nuestro trabajo diario, de todas las leyes la decima engloba a las demás y dice

La simplicidad consiste en sustraer lo que es obvio y añadir lo específico

The Laws of Simplicity está traducido a muchos idiomas, incluido el español, se puede conseguir en Amazon o en cualquier librería de primera línea, el libro es pequeño, cerca de cien páginas y es de una lectura muy fluida con ejemplos prácticos y de la vida real.

Para ir finalizando les dejo el link a la página oficial del libro donde encontraran notas y artículos relacionados con el mismo y un video con una presentación de John Maeda en TED.

The Laws of Simplicity Homepage

TED Talks John Maeda: Simplicity patterns

Pasemos a ver el código, verán que aun sigo usando 3D Tools for WPF, pero tan solo para utilizar el TrackBallDecorator, que es quien me permite mover el modelo utilizando el mouse, el resto del código es muy fácil de seguir, en el resource he creado un mesh, luego configuro la cámara, la luz y por ultimo pinto mi mesh con un MediaElement.

<Window x:Class=”DemoViewport2DVisual3D.Window1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:local=”clr-namespace:_3DTools;assembly=3DTools”

Title=”Viewport2DVisual3D Demo” Height=”600″ Width=”600″>

<Window.Resources>

<MeshGeometry3D x:Key=”3dMesh” Positions=”-1,1,0 -1,-1,0 1,-1,0 1,1,0″

TextureCoordinates=”0,0 0,1 1,1 1,0″ TriangleIndices=”0 1 2 0 2 3″/>

</Window.Resources>

<local:TrackballDecorator>

<Viewport3D HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”>

<Viewport3D.Camera>

<PerspectiveCamera Position=”0,0,4″ FieldOfView=”45″ />

</Viewport3D.Camera>

<ModelVisual3D >

<ModelVisual3D.Content>

<AmbientLight Color=”#FFFFFFFF”/>

</ModelVisual3D.Content>

</ModelVisual3D>

<Viewport2DVisual3D Geometry=”{StaticResource 3dMesh}”>

<Viewport2DVisual3D.Visual>

<MediaElement Source=”silverlight.wmv” Stretch=”Uniform” Volume=”0″ LoadedBehavior=”Play” Width=”448″ Height=”256″/>

</Viewport2DVisual3D.Visual>

<Viewport2DVisual3D.Material>

<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial=”true”/>

</Viewport2DVisual3D.Material>

</Viewport2DVisual3D>

</Viewport3D>

</local:TrackballDecorator>

</Window>

Al ejecutar el ejemplo deberíamos de ver algo como lo siguiente.