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

    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);
        };
});

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 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

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 Demos
• Silverlight Screencasts & Quickstarts
• Pictures Services
• Microsoft Expression Community
• Inkscape
• Kaxaml

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 oficialo 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.

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 people = new List();
    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

<h4Pie 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.

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

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.

En la actualidad vemos como proveedores de servicios y fabricantes de productos tratan de lograr que los mismos sean simples de entender, simples de usar, esta tarea no es para nada simple y no quiere decir que los productos o servicios que se ofrezcan deban carecer de funciones o características, si tomamos como ejemplo al iPod el cual es el referente en lo que a simplicidad hablamos, podemos ver que de por sí es un aparato complejo, cargado de características, pero a sus vez no solo es simple de usar sino que también transmite la sensación de simplicidad.

Ú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 reglas las cuales nos guían en los conceptos que conforman la simplicidad y algunos consejos para aplicarlos en nuestro trabajo diario.

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 Rules of Simplicity Homepage

  http://static.videoegg.com/ted/flash/loader.swf

]]> http://parancibia.wordpress.com/2007/12/07/review-the-laws-of-simplicity/feed/ 1 paulo The Laws of Simplicity http://parancibia.wordpress.com/2007/10/29/novedades-de-wpf-3-5-viewport2dvisual3d/ http://parancibia.wordpress.com/2007/10/29/novedades-de-wpf-3-5-viewport2dvisual3d/#comments Mon, 29 Oct 2007 02:52:25 +0000 paulo http://parancibia.wordpress.com/2007/10/29/novedades-de-wpf-3-5-viewport2dvisual3d Sigue leyendo →]]>

Una de las nuevas características de WPF 3.5 es Viewport2DVisual3D, esta nos permite tomar un objeto 2D y visualizarlo en un espacio 3D, esto lo podíamos hacer anteriormente con 3D Tools for WPF pero ahora al menos algunas de estas características son parte del framework, para mostrarles su uso, voy amigrar la demo que utilice en el Code Camp, cuyo código pueden bajar desde aquí o consultar mas en profundidad en este post, para que pase de usar 3D Tools for WPF por Viewport2DVisual3D.

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.

]]> http://parancibia.wordpress.com/2007/10/29/novedades-de-wpf-3-5-viewport2dvisual3d/feed/ 0 paulo Viewport2DVisual3D http://parancibia.wordpress.com/2007/10/26/code-camp-buenos-aires-2007-%e2%80%93-el-dia-despues/ http://parancibia.wordpress.com/2007/10/26/code-camp-buenos-aires-2007-%e2%80%93-el-dia-despues/#comments Fri, 26 Oct 2007 03:03:09 +0000 paulo http://parancibia.wordpress.com/2007/10/26/code-camp-buenos-aires-2007-%e2%80%93-el-dia-despues Sigue leyendo →]]>

Tal como prometí ayer, aquí les dejo el código de las demos que estuve presentando y algunos enlaces que les serán de utilidad.

Download Snow Shop

Download Xbox 360 Showcase

Download Flextreme Color Selector

Bea Costa Blog

Download My Printer 3D

Download Demo 3D

3D Tools for WPF

Espero la hayan pasado tan bien como yo en el Code Camp y nos vemos el año próximo.

Astoria nos permite exponer facilmente datos a través de un servicio WCF, estos recursos los podemos navegar al estilo REST y para manipularlos utilizamos los verbos HTTP, también tenemos la posibilidad de elegir el formato en el que queremos consumir los datos, que puede ser XML, JSON o RDF.

Para trabajar con Astoria necesitamos tener instalado Visual Studio 2008 Beta 2, ADO.NET Entity Framework Beta 2, ADO.Net Entity Framework Tools August 07 CTP y por supuesto la ultima CTP de Astoria.

Comenzaremos creando un nuevo sitio web, como se ve debajo en la imagen.

A nuestro sitio web le agregaremos un ADO.NET Entity Data Model.

/p>

Seleccionamos la opción Generate from Database.

Elegimos la base de datos de la cual obtendremos la data a exponer por el servicio.

Seleccionamos los objetos a utilizar.

Concluidos estos pasos ya tenemos listo nuestro modelo de datos.

Ahora crearemos un nuevo Web Data Service.

Al cual configuraremos para que utilice nuestro modelo de datos.

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Objects;

using System.ServiceModel.Web;

using System.Linq;

using Microsoft.Astoria;

namespace AstoriaDemo

{

    public class OranjeService : WebDataService<OranjeDataModel>

    {

    }

}

Para finalizar seteamos como Set As Start Page al mismo, luego abrimos el archivo web.config y agregamos la siguiente línea dentro de la sección appSettings, para poder consultar los datos en formato JSON.

  <appSettings>

     <add key="EnableAstoriaJSONP" value="true"/>

 </appSettings>

Presionamos F5 y deberíamos obtener las referencias a nuestras entidades de datos, en este caso Players y Clubs.

Si quisiera ver el listado de todas las jugadoras solo debo ingresar la siguiente Uri.

http://host/OranjeService.svc/Players

También podemos utilizar algunos filtros para procesar los datos, por ejemplo si quisiera obtener el listado de jugadoras ordenadas por posición, solo debo ingresar la siguiente consulta.

http://host/OranjeService.svc/Players?$orderby=Position

Si queremos ver los datos de la jugadora con el PlayerId 11.

http://host/OranjeService.svc/Players[11]

Y por ultimo para obtener datos en formato JSON lo hacemos de la siguiente manera.

http://host/OranjeService.svc/Players[11]?$format=json

 [

    {

        __metadata: {

            Type: "Players", Base: "http://localhost:49183/OranjeService.svc", Uri: "Players[11]"

        }, Age: 28, Caps: 242, Clubs: {

            __metadata: {

                Uri: "Players[11]/Clubs"

            }

        }, Description: "Minke Smabers (born March 22, 1979 in Den Haag, Zuid-Holland) is a field hockey midfielder from the Netherlands, who played more than 200 international matches for the Dutch National Women’s Team. Her current team is Laren.", Name: "Minke Smabers", Number: 13, Picture: "../images/13.jpg", PlayerId: 11, Position: "MF        "

    }

]

Esta es solo una pequeña introducción a Astoria si están interesados en seguir investigando sobre el mismo a continuación les dejo algunos enlaces a recursos interesantes.

Microsoft Codename "Astoria"
http://astoria.mslivelabs.com/

Download Microsoft Codename "Astoria" September 2007 CTP
http://www.microsoft.com/downloads/details.aspx?FamilyId=0FA1413C-CB55-4577-960E-0F3491847F58&displaylang=en

Download ADO.NET Entity Framework Beta 2
http://www.microsoft.com/downloads/details.aspx?FamilyId=F1ADC5D1-A42E-40A6-A68C-A42EE11186F7&displaylang=en

Download ADO.Net Entity Framework Tools Aug 07 CTP
http://www.microsoft.com/downloads/details.aspx?familyid=09A36081-5ED1-4648-B995-6239D0B77CB5&displaylang=en

Project Astoria Team Blog
http://blogs.msdn.com/astoriateam/

Pablo Castro’s blog
http://blogs.msdn.com/pablo/

Channel9 – Pablo Castro: Astoria Data Services
http://channel9.msdn.com/Showpost.aspx?postid=305985

Mix07 – XD006 Accessing Data Services in the Cloud
http://sessions.visitmix.com/default.asp?event=1011&session=2011&pid=XD006&disc=&id=1573&year=2007&search=XD006

Hoy veremos cómo rotar elementos en Silverlight 1.0, comenzaremos viendo el código XAML.

<Image Width="485" Height="352" Canvas.Top="0" Canvas.Left="0" Source="images/control.png"/>

<Canvas x:Name="rotateCanvasDial" Width="190" Height="190" Canvas.Left="180.554" Canvas.Top="99.313" Background="Transparent" RenderTransformOrigin="0.5,0.5" Canvas.ZIndex="1">

            <Canvas.RenderTransform>

                        <TransformGroup>

<RotateTransform x:Name = "canvasRotateDial" CenterX="0" CenterY="0" Angle="0"/>

                                   </TransformGroup>

            </Canvas.RenderTransform>

<Image x:Name="dial" Width="190" Height="190" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Source="images/dial.png"/>

<Ellipse MouseMove="rotateMouseMove" MouseLeftButtonDown="rotateMouseDown" MouseLeftButtonUp="rotateMouseUp" Cursor="Hand" x:Name="rotateHandleDial" Width="190" Height="190" Fill="Transparent" Canvas.Left="0" Canvas.Top="0"/>

</Canvas>   

En primera instancia creamos un Canvas con una RotateTransform que será la encargada de girar el elemento, luego agregamos una imagen que será el elemento visual a rotar y una elipse que lo cubre, a esta elipse le agregue tres eventos MouseMove, MouseLeftButtonDown y MouseLeftButtonUp.

En la parte JavaScript, lo primero que haremos será declarar unas variables para diferentes parámetros que luego utilizaremos.

var lastPosition = 0;

var beginAngle = 0;

var isMouseDown = false;

var rotateCanvasName;

var rotateTransformName;

var imageZIndex = 0;

var rotateZIndex = 1;

En el evento MouseLeftButtonUp ,cambiamos el valor de la variable rotateMouseUp y liberamos al mouse.

function rotateMouseUp(sender, args)

    {

    isMouseDown = false;

    sender.releaseMouseCapture();

    }

En MouseLeftButtonDown, activamos la captura del mouse, cambiamos el valor de la variable isMouseDown y registramos la última posición del cursor del mouse.

function rotateMouseDown(sender, args)

   {

    sender.captureMouse();

            isMouseDown = true;

    lastPosition = args.getPosition(null);

            objectName = sender.name;

            rotateCanvasName = "rotateCanvasDial";

            rotateTransformName = "canvasRotateDial"; 

    }

Por último en el evento MouseMove capturamos la posición actual del cursor, seleccionamos la RotateTransform a utilizar, calculamos el CenterPoint y el ángulo dependiendo de los movimientos del mouse.

function rotateMouseMove(sender, args)

    {

    var position = args.getPosition(null);

    if (isMouseDown)

      {   

            var rotate = sender.findName(rotateTransformName);

       var centerPoint = {};

            canvasLeft = sender.findName(rotateCanvasName)["Canvas.Left"];

            canvasTop = sender.findName(rotateCanvasName)["Canvas.Top"];

            canvasWidth = sender.findName(rotateCanvasName).width;

            canvasHeight = sender.findName(rotateCanvasName).height;

            centerPoint.X = canvasLeft + canvasWidth/2;

            centerPoint.Y = canvasTop + canvasHeight/2;                           

      var radiansToDegrees = 360 / (2 * Math.PI);

      var lastAngle = parseInt(Math.atan2(lastPosition.Y – centerPoint.Y, lastPosition.X – centerPoint.X) * radiansToDegrees);

      var currentAngle = parseInt(Math.atan2(position.Y – centerPoint.Y, position.X – centerPoint.X) * radiansToDegrees);

      var deltaAngle = currentAngle – lastAngle;

      rotate.Angle += deltaAngle;

            beginAngle += deltaAngle;

            lastPosition = position;              

        }

    }

Al ejecutar nuestro ejemplo se debería de ver como en la siguiente imagen.

]]> http://parancibia.wordpress.com/2007/10/05/rotando-objetos-con-silverlight-1-0/feed/ 0 paulo Silverlight rotation demo http://parancibia.wordpress.com/2007/10/02/code-camp-buenos-aires-2007/ http://parancibia.wordpress.com/2007/10/02/code-camp-buenos-aires-2007/#comments Tue, 02 Oct 2007 21:24:13 +0000 paulo http://parancibia.wordpress.com/2007/10/02/code-camp-buenos-aires-2007 Sigue leyendo →]]>

El próximo 24 de Octubre en las instalaciones de la UADE se estará desarrollando el Code Camp Buenos Aires 2007, en el mismo Southworks va a tener una importante participación, por un lado Johnny Halife y Augusto Álvarez estarán presentando a DinnerNow, por el otro, Alejandro Jack y yo vamos a estar hablando sobre User Experience y Smart Clients.

Esta es una gran oportunidad para que puedan conocer a muchos de los miembros de nuestro equipo y el trabajo que realizamos en Southworks.

A continuación les dejo el enlace a la página del Code Camp donde podrán registrarse, ver la agenda de charlas a realizarse y sus horarios.

Code Camp Buenos Aires 2007

Hoy les mostrare como hacer drag and drop de un objeto cualquiera utilizando Silverlight 1.0.

Para comenzar he creado un simple rectángulo al cual le he agregado tres eventos, uno para el evento MouseLeftButtonDown, otro para MouseLeftButtonUp y finalmente uno para MouseMove.

<Rectangle MouseLeftButtonUp="onMouseUp" MouseLeftButtonDown="onMouseDown"

MouseMove="onMouseMove" Width="100" Height="100" Fill="#FF095B8D" RadiusX="10" RadiusY="10" StrokeThickness="5" Canvas.Left="10" Canvas.Top="10"/>

Pasando a la parte JavaScript, he declarado tres variables, dos para conocer la posición inicial del objeto a mover y otra para saber si estamos arrastrando o no el objeto.

  var beginX;

  var beginY;

  var trackingMouseMove = false;

En el evento MouseDown, capturo la posición X e Y del mouse y las asigno a sus respectivas variables, también cambio el valor de la opacidad así vemos como cambia mientras lo arrastramos a 0.5, seteamos la variable trackingMouseMove a true y con sender.captureMouse() nos aseguramos de que este objeto sea el único que recibe eventos del mouse.

            function onMouseDown (sender, mouseEventArgs)

            {

                beginX = mouseEventArgs.getPosition(null).x;

                beginY = mouseEventArgs.getPosition(null).y;

                sender.Opacity = .5;

    trackingMouseMove = true;

                sender.captureMouse();

            }

En el evento MouseUp, solo seteamos la variable trackingMouseMove a false, y cambiamos al opacidad a 1.

            function onMouseUp (sender, mouseEventArgs)

            {

                sender.releaseMouseCapture();

                trackingMouseMove = false;

                sender.Opacity = 1;  

            }

Para finalizar en el evento MouseMove consultamos la posición actual de X e Y para asignárselas a las propiedades Canvas.Left y Canvas.Top de nuestro objeto.

            function onMouseMove (sender, mouseEventArgs)

            {

                if (trackingMouseMove == true)

                {

                    var actualX = mouseEventArgs.getPosition(null).x;

                    var actualY = mouseEventArgs.getPosition(null).y;

                    sender["Canvas.Left"] += actualX – beginX;

                    sender["Canvas.Top"] += actualY – beginY;

                    beginX = actualX;

                    beginY = actualY;

                }

            }

El ejemplo terminado debería de lucir como se ve a continuación.

]]> http://parancibia.wordpress.com/2007/09/24/drag-and-drop-con-silverlight-1-0/feed/ 0 paulo Silverlight Drag and Drop http://parancibia.wordpress.com/2007/09/18/motion-paths-con-expression-blend/ http://parancibia.wordpress.com/2007/09/18/motion-paths-con-expression-blend/#comments Tue, 18 Sep 2007 05:45:52 +0000 paulo http://parancibia.wordpress.com/2007/09/18/motion-paths-con-expression-blend Sigue leyendo →]]>

En el último refresh del SDK de Silverlight 1.1, se han agregado más user controls de ejemplo, entre los cuales se encuentran un button, un par de sliders, algunas scrool bars y un listbox.

Como verán la estética no es de lo mejor.

Pero con un poco de trabajo y la ayuda de Expression Blend 2 August Preview.

Podemos personalizarlos a nuestro gusto.

Download Silverlight 1.1 SDK Alpha Refresh September 2007

Entre los controles que componen ASP.Net Futures, se encuentra el SearchDataSource, el nombre mismo del control me llamo la atención y me puse a investigar un poco su funcionamiento, este control nos permite integrar fácilmente búsquedas en nuestros sitios web, estas búsquedas pueden provenir de diferentes providers, yo lo probé contra Live Search, pero es posible crear nuestro propio provider.

Para comenzase necesitamos tener instalado ASP.Net Futures July 2007 CTP y Visual Studio 2008, luego de tener todo instalado nos dirigiremos a http://search.msn.com/developer, para conseguir la clave que nos permitirá consultar el servicio de búsquedas de Live Search, para ello seleccionaremos Create and Manage Application IDs, luego de ingresar nuestra LiveID nos dirigiremos a Get a new AppID, terminado este paso anotaremos el ID que hemos generado.

Ahora crearemos un ASP.NET Futures Web Site tal como se ve en la siguiente imagen.

Abrimos el web.config y nos dirigimos a la siguiente sección:

      <search enabled="true">

        <providers>

          <add name="WindowsLiveSearchProvider"

          type="Microsoft.Web.Preview.Search.WindowsLiveSearchProvider, Microsoft.Web.Preview"

          appID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

          siteDomainName="xxxxxx.xxxx.xxx" />

        </providers>

      </search>

En appID ingresaremos el ID que generamos previamente y en siteDomainName añadiremos el nombre de dominio contra el que queremos hacer consultas, si lo que desean es hacer búsquedas en toda la web eliminaremos esta propiedad.

Abrimos el archivo Default.aspx y agregamos un TextBox con el nombre TextBoxSearch y un Button con el nombre ButtonSearch, luego arrastraremos el SearhcDataSource a nuestra página y lo configuraremos de la siguiente manera.

<asp:SearchDataSource ID="SearchDataSource1" runat="server">

     <SelectParameters>

         <asp:ControlParameter ControlID="TextBoxSearch" Name="query"  />

      </SelectParameters>

</asp:SearchDataSource>

Terminado esto arrastraremos también un control ListView, el cual configuraremos de la siguiente forma para mostrar el resultado de nuestras consultas.

<asp:ListView ID="ListView1" runat="server" DataSourceID="SearchDataSource1">

<LayoutTemplate>

                        <ul id="itemcontainer" runat="server" ></ul>

</LayoutTemplate>

<ItemTemplate>

                        <li>

         <ul>

         <a  href=’<%# Eval("Url") %>‘> <%#Eval("Title") %></a><br />         

          <%#Eval("Description") %><br/>

          <a href=’<%# Eval("Url") %>‘> <%#Eval("Url") %></a><br />

         </ul>

         </li>

            </ItemTemplate>

</asp:ListView>

Para finalizar configuraremos el evento click de ButtonSearch para que haga el DataBind de nuestro SearchDataSource.

    protected void ButtonSearch_Click(object sender, EventArgs e)

    {

       SearchDataSource1.DataBind();

    }

Ya con esto tenemos todo listo, cabe aclara que este servicio solo nos provee diez resultados por consulta lo cual a mi entender es muy poco, pero como dije anteriormente tenemos la posibilidad de crear nuestro propio provider con lo cual podemos subsanar esta limitación, después de esta aclaración podemos pasar a probar nuestra aplicación, la cual debería lucir más o menos como en la siguiente imagen.

Si desean conocer más acerca de este control y de cómo crear sus propios providers, a continuación les dejo algunos links que les serán de utilidad.

• Microsoft ASP.NET Futures (July 2007)
• Enabling Search for your Web Site with ASP.NET AJAX
• Search Provider Example

La versión final de Silverlight 1.0 ha sido liberada hoy junto a un nuevo refresh de Silverlight 1.1 y la versión final de Expression Media Encoder 1.0.

También hoy se ha anuncio un acuerdo con Novell para dar soporte a Monolight, la implementación open source de Silverlight 1.0 y 1.1, que les da soporte y acceso a información de primera mano que les permitirá un desarrollo más rápido y una compatibilidad asegurada.

A continuación les dejo algunos links con más información acerca de los anuncios y los links correspondientes a las descargas.

• Silverlight 1.0 Released and Silverlight for Linux Announced (Scott’s Blog)
• Microsoft/Novell Collaboration on Silverlight (Miguel de Icaza’s Blog)
• Microsoft Silverlight 1.0
• Microsoft Silverlight 1.1 Alpha September Refresh
• Microsoft Silverlight 1.1 SDK Alpha September Refresh
• Microsoft Expression Encoder 1.0

Entre las novedades de ASP.NET 3.5 se encuentran los controles ListView, DataPager y LinqDataSource, para mostrarles el funcionamiento de cada uno de ellos prepare esta pequeña demo donde podrán apreciar las funcionalidades básicas de los mismos.

Para comenzar vamos a definir nuestro modelo de datos usando el designer de Linq To SQL, para ello vamos a agregar un archivo dbml a nuestra solución.

Luego arrastraremos las tablas de las cuales obtendremos los datos al designer.

Ahora es tiempo de crear un nuevo Data Source, para ello arrastraremos a nuestra página un control LinqDataSource y pasaremos a configurarlo, primero elegiremos el contexto que vamos a utilizar.

Luego seleccionaremos la tabla y campos que consultaremos.

Finalizado este paso, es tiempo de añadir a nuestra página un ScriptManager, un UpdatePanel y dentro de este ultimo un control ListView, luego pasaremos a la parte de código y configuraremos el control de la siguiente manera.

<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSource1" >

     <LayoutTemplate>

        <ul id="itemcontainer" runat="server" class="players_list"></ul>

     </LayoutTemplate>

     <ItemTemplate>

         <li>

             <img src=’<%#Eval("Photo") %>‘ /><br/>

             <%#Eval("Name") %><br/>

             Position: <%#Eval("Position") %>ǀ Age: <%#Eval("Age") %><br/>

         </li>

     </ItemTemplate>

</asp:ListView>

Como podrán apreciar he configurado el DataSourceID para que use el LinqDataSource que creamos previamente, luego agregue un elemento LayoutTemplate, el cual será el contenedor de nuestros datos y finalmente añadí un ItemTemplate, el cual define la apariencia de cada uno de los items a presentar, tanto el LayoutTemplate como el ItemTemplate, son los elementos del ListView que más se van a utilizar, pero el mismo posee muchos más, que nos permiten configurar y personalizar aun más la apariencia del mismo.

Como último paso, agregaremos un control DataPager, el cual nos permitirá añadir la función de paginación al ListView, para ello arrastraremos un control DataPager a nuestra página y lo configuraremos de la siguiente manera.

          <asp:DataPager ID="DataPager1" runat="server" class="pager" PagedControlID="ListView1" PageSize="10">

            <Fields>

                <asp:NumericPagerField />

            </Fields>

          </asp:DataPager>

La configuración de este control es muy simple, solo debemos seleccionar a que control lo vamos a enlazar utilizando la propiedad PagedControlID, en este caso será nuestro ListView, luego elegiremos la cantidad de items por página y la apariencia del mismo, yo en este caso elegí NumericPagerField, pero hay un par de opciones más que podemos utilizar.

Cabe aclarar que por el momento el DataPager que viene incluido en la Beta 2 de Orcas no trabaja muy bien con consultas personalizadas, así que tengan esto en cuenta si comienzan a experimentar con estos controles.

Ya para terminar les dejo una imagen de los controles en funcionamiento.

Windows Presentation Foundation hizo que el uso de tinta o Ink en nuestras aplicaciones sea algo muy simple, Silverlight no se queda atrás en este campo y es por ello que desarrolle este pequeño ejemplo utilizando Silverlight 1.1 para mostrarles lo simple que es implementar esta funcionalidad.

Primero comenzamos con el código XAML, como se ve, he declarado un elemento InkPresenter al cual le agregue algunos eventos de mouse que pasaremos a configurar en el code behind.

<Canvas

        xmlns="http://schemas.microsoft.com/client/2007"

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

        x:Name="parentCanvas"

        Loaded="Page_Loaded"

        x:Class="InkDemo.Page;assembly=ClientBin/InkDemo.dll"

        Width="500"

        Height="646">

  <Canvas.Background>

    <ImageBrush ImageSource="images/notepad.png"/>

  </Canvas.Background>

  <InkPresenter x:Name="inkPresenterPad"

                Background="Transparent" Width="500" Height="646"

                MouseLeftButtonDown="inkPresenterPad_MouseDown"

                MouseMove="inkPresenterPad_MouseMove"

                MouseLeftButtonUp="inkPresenterPad_MouseUp">

  </InkPresenter>

  </Canvas>

En la parte C# del ejemplo configuro las acciones de cada uno de los eventos del mouse, el Stroke que pienso utilizar, el color del mismo y por ultimo lo agrego al InkPanel para dibujar sobre el.

public partial class Page : Canvas

El resultado que obtendremos al correr el ejemplo es el siguiente.

Silverlight nos provee de muchas más funciones relacionadas con Ink, si están interesados en seguir investigando el tema a continuación les dejo algunos enlaces que les serán de utilidad.

Gavin Gear’s Tech Blog

MIX07 – XD014 – Ink for Designers and Developers