paulo.arancibia

Design Maturity Model

2008-07-22T16:45:00Z

La noción de aplicar diseño a los desarrollos de software cada día es más importante, pero como todo, requiere un proceso de adaptación, capacitación y descubrimiento.

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.

Integrando YUI con ASP.NET MVC

2008-07-14T04:49:00Z

Si han estado trabajando o al menos le han dado una mirada al ASP.NET MVC framework, sabrán que a diferencia del ASP.NET tradicional, no se encuentran disponibles al menos de momento controles como por ejemplo el GridView, este vacío lo podemos llenar con una gran cantidad de controles de terceros que fueron creados para trabajar sobre alguna de las diversas librerías JavaScript que hay en este momento dando vueltas, una de las mejores y más completas librerías a mi entender es YUI (The Yahoo! User Interface Library) , la misma viene repleta de controles y una excelente documentación, que hacen que su implementación sea algo relativamente sencillo.

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.

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>

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

Buenas prácticas y recursos para la creación de formularios

2008-07-07T20:51:00Z

La creación de formularios es una tarea rutinaria tanto si estamos trabajando en desarrollos para la web como para el desktop, este post trata de aportar algunas buenas prácticas y recursos para la creación de formularios altamente usables y efectivos.

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 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 se debe a que el movimiento entre el label y el textbox es mayor, entonces podemos utilizar esta desventaja a nuestro favor haciendo que el usuario preste más atención a los datos que desea ingresar, esto fenómeno se puede apreciar mucho mejor en la siguiente imagen, en la cual notaran que la cantidad de pasos y el tiempo usado para escanear los elementos que componen el formulario es mayor que en ejemplos anteriores.

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

Silverlight 2 Beta 2 y los archivos XAP

2008-06-09T16:37:00Z

Leyendo el ultimo post de Scott Guthrie sobre las nuevas features de Silverlight, note que no se hablo del cambio en el modelo de “deployment” usado para las aplicaciones Silverlight, como sabrán cuando compilamos una solución Silverlight se crea un archivo .xap el cual no es más que un zip que contiene todas las DLLs necesarias para correr nuestra aplicación, este .xap viaja hasta el browser y luego es manipulado por el engine de Silverlight el cual se encarga de correr nuestra solucion, en la siguiente imagen pueden observar el contenido de dicho archivo compilado con la Beta1.

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.

TechNight: Desarrollo de aplicaciones RIA distribuidas con WCF y Silverlight

2008-06-08T04:05:00Z

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

MIX Essentials Buenos Aires

2008-04-18T19:06:00Z

Desde su lanzamiento en 2006 MIX ha ido creciendo a paso firme, primero en Estados Unidos, el año pasado con los diversos ReMIXs en diversos lugares del planeta; este año la tendencia continua y una de las ciudades en donde se realizara una conferencia MIX Essentials será Buenos Aires.

Por ahora no hay mucha información acerca de la agenda, los expositores y el lugar, lo que sí se sabe es que será el 3 y 4 de Junio, para mantenerse al tanto de lo relacionado al evento, pueden ingresar a su grupo en Facebook,revisar periódicamente la página oficial o el blog de Miguel Ángel Sáenz, por mi parte a medida que se vayan conociendo más datos los estaré compartiendo con todos ustedes.

Manténganse atentos y nos vemos en MIX Essentials.

Technorati Profile

Charts en Silverlight, fácil con Visifire

2008-04-15T15:28:00Z

Visifire es una suite de componentes Silverlight para la visualización de datos, los mismos son muy fáciles de implementar y pueden ser utilizados en la mayoría de las plataformas para desarrollo Web.

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.

PowerShell everywhere

2008-04-10T03:18:00Z

Si eres de esas personas que se han encariñado con PowerShell, y yo conozco muchas, pero lo echas de menos cuando trabajas en otro entorno, Pash puede ser lo que buscas, porque Igor Moochnick esta trabajando en una implementación open source de PowerShell, para que podamos usarla en Linux, MacOS X y hasta en Windows Mobile, en su blog se pueden ver algunas screenshots con ejemplos de Pash corriendo en varios ambientes.

Pash está escrito para correr con .Net 2.0 y Mono, hasta el momento se encuentran implementadas cerca del 50% de las clases definidas por PowerShell y un 40% de sus funcionalidades.

Si desean colaborar, ir siguiendo el progreso del proyecto o probarlo, pueden bajar del repositorio en SourceForge las últimas versiones del código vía SVN.

Pash en SoruceForge
IgorShare Weblog

Heroes happen in Buenos Aires

2008-04-07T13:18:00Z

El próximo jueves 10 de Abril se realizara en el Estadio Obras a las 19 horas el lanzamiento en Argentina de SQL Server 2008, Visual Studio 2008 y Windows Server 2008, en el siguiente link pueden registrarse al evento

http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032374617&Culture=es-AR

También se ha creado un evento en Facebook para poder socializar un poco antes de ir.

http://www.facebook.com/event.php?eid=12445377011&ref=nf

Para ir entrando en calor pueden ir dándole una mirada a los siguientes Hands on Labs.

http://heroes.labmanuals.virtualwide.com