June 2009 - Posts

Leyendo Spargo.Net, me encuentro con un link más que interesante. Un tutorial en español sobre Expression Blend 2.0, muy completo.

Pueden visitar el sitio aquí.

Una de las mejoras que ofrece Silverlight 3 es el enlace entre elementos, lo que nos permite de manera sencilla enlazar valores  de las propiedades entre distintos elementos. Esta funcionalidad ya se encontraba en WPF, pero es un agregado en la nueva versión de Silverlight.

Con esta funcionalidad, no necesitamos de código o clase intermedia para actualizar propiedades de algunos elementos que dependen del valor de una propiedad de otro elemento.

Las propiedad fundamental para usarlo es ElementName de la clase Binding.

Utilizando una imagen, vamos a tener tres slides para ir rotándola utilizando la nueva funcionalidad de perspectiva, sin escribir una línea en el code-behind y utilizando solamente XAML.

Primero vamos a crear la imagen que vamos a rotar.

<Border CornerRadius="5"
        BorderBrush="DarkGray"
        BorderThickness="2"
        Background="White"
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
 
    <Grid Margin="10" Width="100" Height="100">
        <Image Source="/images/silverlight.jpg"></Image>
    </Grid>
 
    <Border.Projection>
        <PlaneProjection x:Name="Projection"
                         CenterOfRotationX="0.5"
                         CenterOfRotationY="0.5"
                         CenterOfRotationZ="0.5" />
    </Border.Projection>
 
</Border>

Ahora viene la parte interesante, donde vamos a crear los slides y le vamos a asociar la propiedad que vamos a cambiar.

<TextBlock Text="Proyección X"/>
<Slider Minimum="-360"
        Maximum="360"
        Margin="5"
        Value="{Binding RotationX, Mode=TwoWay, 
                ElementName=Projection}"
        SmallChange="1" />
<TextBox Text="{Binding RotationX, Mode=OneWay, 
                ElementName=Projection}" />
 
<TextBlock Text="Proyección Y"/>
<Slider Minimum="-360"
        Maximum="360"
        Margin="5"
        Value="{Binding RotationY, Mode=TwoWay, 
                ElementName=Projection}"
        SmallChange="1" />
<TextBox Text="{Binding RotationY, Mode=OneWay, 
                ElementName=Projection}" />
 
<TextBlock Text="Proyección Z"/>
<Slider Minimum="-360"
        Maximum="360"
        Margin="5"
        Value="{Binding RotationZ, Mode=TwoWay, 
                ElementName=Projection}"
        SmallChange="1" />                
<TextBox Text="{Binding RotationZ, Mode=TwoWay, 
                ElementName=Projection}" />
Mirando en detalle el código, podemos ver que la propiedad Value del Slider, esta asociada a la propiedad RotationX del elemento definido en ElementName, es decir Projection.

Al definir la propiedad Mode en TwoWay, estamos diciendo que si cambia el Slider o si se modifica la propiedad Projection desde otro lugar, se actualicen los dos elemento, permitiendo tener sincronizados los dos objetos.

Vemos que agregué unos TextBox que indican el valor que tiene la proyección de la imagen. Al estar la propiedad Mode en OneWay, si cambiamos el valor de los TextBox de los ejes X o Y, no varía la proyección, porque solamente muestra el valor de la propiedad Rotation. En cambio el TextBox del eje Z, esta definido como TwoWay, si cambiamos este valor se actualizan tanto el Slider como Projection.

Ejemplo Pueden descargar el proyecto aquí.

Falta poco para el lanzamiento de Windows 7 y para ir conociendo un poco que novedades trae, 7x7 ofrece 7 videos por semana, durante 7 semanas.

Una muy buena propuesta para ir sabiendo lo que nos vamos a encontrar.

Pueden visitar el sitio aquí.

Parece que cada vez que hay un evento importante, Silverlight y Smooth Streaming empiezan a ser una de las primeras opciones a la hora de querer implementar transmisiones en vivo de alta calidad.

NBC Sports ha lanzado un sitio donde se puede ver en vivo de manera gratuita a través de internet. Solamente estará disponible para los Estados Unidos.

Las funcionalidades que trae incluyen

  • Smooth Streaming de alta definición en vivo
  • Video-On-Demand (utilizado para repeticiones)
  • Publicidad integrada
  • Repetición instantánea
  • Deep-Linking a través de RSS

Wim1_2

Pueden ver más información de cómo se implemento aquí.

Pueden visitar el sitio aquí, recordando que solamente está disponible para los Estados Unidos.

ComponentArt ha lanzado un concurso de Silverlight, donde el premio es de US$10.000 y no hay limitación sobre el país de residencia.

Se pueden subir aplicaciones hasta el 22 de septiembre.

El jurado esta integrado entre otros por Tim Heuer, Mike Snow y John Papa, además de poder sumar votos a través de la comunidad.

Pueden visitar el sitio aquí o ver las reglas aquí.

Mazda ha lanzado en Alemania, un sitio que permite ver los distinto modelos con la posibilidad de poder customizarlos según nuestro gusto.

El sitio esta desarrollado en Silverlight y tiene la posibilidad de recorrer el interior del auto utilizando Deep Zoom, lo que nos permite ver en detalle el coche.

Obviamente al estar en alemán, se complica revisar todo el sitio, pero sirve para ver que se puede lograr y como Deep Zoom puede utilizarse de manera funcional al negocio.

mazda

Pueden visitar el sitio aquí.

Voy a mostrar como podemos utilizar la API de Bing, para integrar un servicio de traducción dentro de nuestra aplicación Silverlight.

Para empezar debemos obtener un AppID que nos va a permitir utilizar las API de Bing, para ello debemos ir aquí, autenticarnos con nuestro Live ID y obtener el AppID.

Para acceder a estos servicios tenemos tres maneras

  • Interfaz Ajax
  • HTTP
  • SOAP

Para nuestro ejemplo vamos a utilizar SOAP para consumir los servicios.

Primero creamos desde Visual Studio, una aplicación Silverlight.

Segundo agregamos la referencia al servicio, la url para acceder vía SOAP es http://api.microsofttranslator.com/V1/SOAP.svc.

1 

Vamos a crear entonces los controles necesarios en nuestro XAML.

<StackPanel HorizontalAlignment="Center">
 
    <TextBlock>Idioma Origen</TextBlock>
    <ComboBox x:Name="comboOrigen" 
              Width="250"></ComboBox>
    
    <TextBlock>Texto Origen</TextBlock>
    <TextBox x:Name="textoOrigen" 
             Height="56" Width="250" FontSize="34"/>
 
    <TextBlock>Idioma Destino</TextBlock>
    <ComboBox x:Name="comboDestino" 
              Width="250"></ComboBox>
 
    <TextBlock>Texto Destino</TextBlock>
    <TextBox x:Name="textoDestino" 
             Height="56" Width="250" FontSize="34"/>
    
    <Button x:Name="botonTraducir" 
            Click="botonTraducir_Click" 
            Content="Traducir" Width="50"/>
 
</StackPanel>

Tenemos un ComboBox para elegir los idiomas y un TextBox para el ingresar el texto que quiero traducir y para mostrar el resultado. Un Button para disparar la traducción.

Agregamos las referencias a las librerías que vamos a necesitar.

using BingTranslator.TranslatorService;
using System.Collections.ObjectModel;

Crear algunas variables que vamos a utilizar.

// Referencia SOAP a Bing Translator
TranslatorService.LanguageServiceClient 
    ls = new LanguageServiceClient();
// AppId para utilizar los servicios de Bing
string AppId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
// Collecion de Idiomas
ObservableCollection<string> langcodes;

 

Cómo los métodos que utiliza el servicio son asincrónicos, necesitamos generar los handlers necesarios. Esto lo vamos a realizar desde Load de nuestra aplicación.

 

// Handlers
ls.TranslateCompleted +=
    new EventHandler<TranslateCompletedEventArgs>
        (ls_TranslateCompleted);
ls.GetLanguageNamesCompleted += 
    new EventHandler<GetLanguageNamesCompletedEventArgs>
        (ls_GetLanguageNamesCompleted);
ls.GetLanguagesCompleted += 
    new EventHandler<GetLanguagesCompletedEventArgs>
        (ls_GetLanguagesCompleted);

Vamos a llenar los combos de los idiomas y a guardar en nuestra colección de idiomas los keys de los mismos, que nos servirá después para saber que idiomas pasar al servicio. Esto también lo ponemos dentro del Load.

// Evento para guardar la lista de idiomas disponibles
// Trae el código del Idioma
ls.GetLanguageNamesAsync(AppId, Language.IetfLanguageTag);
 
// Evento para llenar los combos de Idiomas
// Trae la descripción del Idioma
ls.GetLanguagesAsync(AppId);

Ahora agregamos los handlers que se utilizan para traer los idiomas.

// Guarda la lista de idiomas disponibles
protected void ls_GetLanguagesCompleted(object sender, 
                    GetLanguagesCompletedEventArgs e)
{
    if (e.Error == null)
    {
        langcodes = e.Result;
    }
}
 
// Llena los combos de Idiomas
protected void ls_GetLanguageNamesCompleted(Object sender, 
                    GetLanguageNamesCompletedEventArgs e)
{
    if (e.Error == null)
    {
        comboOrigen.ItemsSource = e.Result;
        comboDestino.ItemsSource = e.Result;
 
        // Origen por defecto es Inglés
        comboOrigen.SelectedIndex = 
            langcodes.IndexOf("en");
        // Destino por defecto es Español
        comboDestino.SelectedIndex = 
            langcodes.IndexOf("es");
    }
}

Vamos a la parte más interesante, donde vamos a traducir el texto. Nosotros vamos a llamar al método que traduce, al ser asincrónico, cuando termine llamará al handler que especificamos en el Load.

private void botonTraducir_Click(object sender, 
                RoutedEventArgs e)
{
    if (comboOrigen.SelectedItem != null && 
        comboDestino.SelectedItem != null)
    {
        ls.TranslateAsync(AppId, textoOrigen.Text, 
            (langcodes[comboOrigen.SelectedIndex].ToString()), 
            (langcodes[comboDestino.SelectedIndex].ToString()));
    }
}
 
// Recibe el texto traducido del Servicio
protected void ls_TranslateCompleted(Object sender, 
                TranslateCompletedEventArgs e)
{
    if (e.Error == null)
    {
        textoDestino.Text = e.Result;
    }
}

Vemos un screen de la aplicación.

2 Pueden descargar el ejemplo aquí.

Falta poco tiempo para que sea lanzada la versión definitiva de Silverlight 3, por lo que voy a empezar a detallar alguna de las funcionalidades del plugin.

Silverlight 3 introduce como novedad PlaneProjection, que nos permite rotar objetos 2D en un espacio 3D, lo que nos permite generar perspectivas 3D de manera muy sencilla.

Para realizar las transformaciones correspondientes debemos tener en cuenta el sistema de coordenadas que utiliza Silverlight 3.

CoordinateSystemSL2_thumb

Imágen tomada de Jaime Rodriguez

ROTAR OBJETOS

Rotar el objeto alrededor de un eje (X, Y, Z). Para realizar esta rotación debemos especificar CenterOfRotation (por defecto toma el centro de la imágen). Podemos definir el centro de rotación de cualquiera de los ejes.

Ejemplo

Como vemos en el ejemplo, RotationX tiene el mismo valor, pero al cambiar CenterOfRotationY, cambia el efecto.

<Border CornerRadius="5"
        BorderBrush="Gray"
        Background="White"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Grid.Row="0">
    <Image Source="/images/silverlight.jpg"></Image>    
    <Border.Projection>
        <PlaneProjection RotationX="65"/>
    </Border.Projection>
</Border>
 
<Border CornerRadius="5"
        BorderBrush="Gray"
        Background="White"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Grid.Row="1">
    <Image Source="/images/silverlight.jpg"></Image>
    <Border.Projection>
        <PlaneProjection CenterOfRotationY="0.9"
                         RotationX="65"/>
    </Border.Projection>
</Border>

Como vemos en el código fuente, solamente definimos las propiedades correspondientes y generamos el efecto sin tener que escribir demasiado, lo que nos brinda una funcionalidad con muy poco esfuerzo.

Pueden descargar el proyecto de prueba aquí.

MOVER OBJETOS

Tenemos la posibilidad de mover los objetos a través de vectores X, Y, Z. Hay dos maneras de realizar este movimiento y es usando GlobalOffset y LocalOffset.

GlobalOffset toma como referencia los ejes de la pantalla, es decir cómo mostramos en la imágen que se encuentra arriba.

LocalOffset toma como referencia la posición inicial del objeto.

Ejemplo2

Veamos como conseguimos rotar los objetos y escalonarlos solamente definiendo la propiedad LocalOffset, respetando el efecto de la rotación.

<Rectangle Width = "192"
           Height = "96"
           Fill = "White">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="-400" />
    </Rectangle.Projection>
</Rectangle>
 
<Rectangle Width = "192"
           Height = "96"
           Fill = "Orange">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="-300" />
    </Rectangle.Projection>
</Rectangle>
 
<Rectangle Width = "192"
           Height = "96"
           Fill = "Pink">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="-200" />
    </Rectangle.Projection>
</Rectangle>
 
<Rectangle Width = "192"
           Height = "96"
           Fill = "Red">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="-100" />
    </Rectangle.Projection>
</Rectangle>                
 
<Rectangle Width = "192"
           Height = "96"
           Fill = "Yellow">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="0" />
    </Rectangle.Projection>
</Rectangle>
 
<Rectangle Width = "192"
           Height = "96"
           Fill = "Green">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="100" />
    </Rectangle.Projection>
</Rectangle>
 
<Rectangle Width = "192"
           Height = "96"
           Fill = "Black">
    <Rectangle.Projection>
        <PlaneProjection RotationY="45" LocalOffsetZ="200" />
    </Rectangle.Projection>
</Rectangle> 

Pueden descargar el proyecto de prueba aquí.

Encontré un sitio muy interesante, que nos muestra varios ejemplos de pequeñas aplicaciones tanto en Flash como en Silverlight, para que podamos ver como actúan y como se desarrolla en las dos plataformas.

El sitio se llama Shine Draw y esta creado por Terence Tsang, un diseñador freelance.

Dentro de las comparaciones, podemos ver como funciona un drag & drop, interacción con javascript, una galería de Flickr, varios efectos sobre imágenes y texto y muchas cosas más.

Lo interesante es que podemos ver los ejemplos online además de poder descargar el código fuente.

Puede visitar el sitio aquí.

Está disponible para descargar la última versión de Deep Zoom Composer, que es la herramienta que nos permite de manera rápida y sencilla generar aplicaciones Deep Zoom.

Como siempre, primero deben desinstalar las versiones que ya tengan instaladas, para poder instalar esta nueva versión.

Algunas de las novedades que trae

  • Soporte para navegación. Se podrá navegar entre imágenes o en áreas de imágenes.
  • Optimización del uso de memoria. Ahora consume menos recursos, permitiendo trabajar con más imágenes.
  • Reportes sobre cuales son las imágenes que más llaman la atención.
  • Importar imágenes y exportarlas sin tener que pasar previamente por el área de diseño.

Pueden descargar la aplicación aquí.

More Posts Next page »