Netflix ahora en Silverlight

por Héctor Hernández 26. diciembre 2008 23:55

Silverlight Logo

Netflix es una compañía norteamericana que se dedica a rentar películas a través del correo tradicional. Dentro de sus múltiples servicios está el de proveer medios y películas a través de la red.

Ahora, como parte de su estrategia, Netflix ha decidido utilizar Silverlight como medio de entrega a través de la red para estos contenidos digitales. Este servicio funciona sobre la premisa de “watch instantly”. En lugar de ordenar una película y esperar a que te llegue por el correo podrás comenzar a verla de inmediato por “streaming” a través de la red.

Por el momento al utilizar Silverlight la gente que tenga soporte para esta tecnología en su navegador podrá utilizar este servicio. Habrá gente que tenga Mac con Power PC y gente que tenga Linux que quedarán fuera del servicio. Sin embargo con el rápido crecimiento de esta tecnología no duden que pronto todos los navegadores estarán cubiertos por Silverlight.

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,


¿Cómo desplegar caracteres especiales dentro de Silverlight?

por Héctor Hernández 7. noviembre 2008 16:08

Los caracteres especiales siempre nos han dado grandes dolores de cabeza dentro de todas nuestras aplicaciones. Por ejemplo; en Silverlight, si queremos insertar directamente los caracteres <, >, &. “ nos desplegaría un error.

¿Por qué?

No lo pensemos mucho… esto es simple. La base de Silverlight es el código XAML. Este código está basado por supuesto en XML. Al estar basado en esta tecnología implica que todas las tags que conforman el lenguaje ya incluyen caracteres especiales.

Si sumamos esto a nuestra necesidad de incluir caracteres especiales en nuestra aplicación la pregunta se convierte en:

¿Cómo representar caracteres especiales sin usar esos caracteres especiales?

Sencillo. Utilizaremos una codificación especial para lograr esta representación.

Caracter                   Codificación
<                                &lt;
>                                &gt;
&                               &amp;
”                                &quot;

Ejemplo:

<Button Width="100" Height="100" Content="Click &amp;Me"></Button>

Actualmente calificado con 5.0 por 1 personas

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,


¿Cómo copiar código XAML para Silverlight desde Expression Designer?

por Héctor Hernández 2. noviembre 2008 18:03

Copiar XAML para Silverlight desde Expression Designer es mucho más sencillo de lo que parece. Muchas veces para lograr este cometido simplemente tomábamos el archivo de Designer y lo exportábamos. Luego, simplemente los pasos eran abrir el archivo generado, copiar el xaml y finalmente pegarlo en Visual Studio 2008.

Veamos otro modo más sencillo.

La base

  1. Crea un proyecto en Expression Designer
  2. Diseña cualquier artilugio que desees exportar a Visual Studio 2008.
  3. Selecciona el objeto, ya sea dando clic izquierdo sobre el layer o arrastrando el mouse sobre el área de diseño tomando los componentes que quieras exportar.
  4. Notarás que los elementos estarán seleccionados cuando estén denotados por un borde rojo.

El secreto

  1. Selecciona Edit – Options – Clipboard (XAML)
  2. Esto abrirá una ventana de wizard de opciones.
  3. Elije XAML Silverlight Canvas como la opción dentro de Clipboard format.
  4. Elije alguna otra configuración de este wizard a fin de ajustarlo a tus necesidades.

** Esto únicamente nos ha preparado el camino ya que sólo hay que hacerlo una sóla vez. ***

El procedimiento

  1. Ahora sí, para copiar el XAML dentro de nuestro clipboard únicamente ve a Edit – Copy XAML o puedes utilizar el shortcut Ctrl + Shift + C
  2. Ve a Visual Studio 2008 y pega el código XAML generado.

Conclusión

Simplemente navega un poco dentro de las opciones que presenta Expression Design ya que estas podrán ahorrarnos mucho trabajo en los momentos más tensos de nuestros proyectos.

Saludos
Ing. Héctor Hernández Rodríguez

Actualmente calificado con 5.0 por 1 personas

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,


Manipulando los tamaños en Silverlight 2

por Héctor Hernández 23. octubre 2008 20:29

Silverlight viene con un sistema de medición basado en pixeles. Si estás familiarizado con html y con css seguramente sabrás a que nos estamos refiriendo. Sin embargo, Silverlight, a diferencia de html y css no puede manejar porcentajes (¿o sí puede?).

A continuación presento los diferentes tamaños que podemos manejar (manipular) dentro de Silverlight.

Pixeles

Esto se hace de manera directa. Considera el siguiente código:

<UserControl x:Class="Cre_CaGeSe_v2.Assets.Controls.DateSelector"

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

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

   Width="200" Height="120">

    <Border BorderBrush="Black"

           BorderThickness="0,1,0,0"

           Background="White" >

        <Grid x:Name="LayoutRoot" Margin="2">

            <Grid.RowDefinitions>

                <RowDefinition Height="20" />

                <RowDefinition Height="30" />

                <RowDefinition Height="30" />

                <RowDefinition Height="30" />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="30" />

                <ColumnDefinition Width="70" />

            </Grid.ColumnDefinitions>

        </Grid>

    </Border>

</UserControl>

Esto es directo. Estamos creando un control que tiene de tamaño 200 x 120 pixeles. Como no estamos indicando lo contrario Silverligth toma como base a los pixeles. Dentro de este User Control tenemos también un Grid que tiene 4 filas, una de 20 pixeles, y 3 de 30 pixeles. Ese grid también está dividido en dos columnas, una de 30 pixeles y la otra de 70 pixeles. Como resultado tenemos un Grid de 110 pixles de alto X 100 pixeles de ancho.

Proporciones (star o *)

Este es el que viene a salvar el día. Decir star o * es igual a decir: proporciones. Aquí el ejemplo simple:

<Grid x:Name="LayoutRoot" Margin="2">

   <Grid.RowDefinitions>

      <RowDefinition Height="0.25*" />

      <RowDefinition Height="0.75*" />

 

   </Grid.RowDefinitions>

 

   <Grid.ColumnDefinitions>

      <ColumnDefinition Width="31*" />

      <ColumnDefinition Width="69*" />

   </Grid.ColumnDefinitions>

</Grid>

Esto simplemente indica que esta tabla está compuesta por dos filas, la primera ocupa el 25% del tamaño de la tabla y la segunda el 75%. De igual manera las columnas están distribuidas en con una proporsión 31% vs. 69%.

Este es otro ejemplo de lo que podemos hacer con una medida tipo star o *:

<Grid x:Name="LayoutRoot" Margin="2">

   <Grid.RowDefinitions>

      <RowDefinition Height="0.25*" />

      <RowDefinition Height="30" />

      <RowDefinition Height="*" />

 

   </Grid.RowDefinitions>

 

   <Grid.ColumnDefinitions>

      <ColumnDefinition Width="31*" />

      <ColumnDefinition Width="69*" />

   </Grid.ColumnDefinitions>

</Grid>

Esto indica que voy a tener una tabla con 3 filas. La primera medirá el 25% de la altura total de la tabla, la segunda medirá 30 pixeles (esto sin importar el tamaño de la tabla) y finalmente la tercer fila medirá el resto de espacio disponible, sea cual sea.

Atentamente
Ing. Héctor Hernández Rodríguez

Actualmente calificado con 4.0 por 1 personas

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,


¿Cómo tener acceso al DOM de HTML desde Silverlight 2?

por Héctor Hernández 20. octubre 2008 20:20

A través de Silverlight podemos tener acceso al HTML que contiene a nuestra aplicación. Esto claro a través del HTML DOM (Document Object Model) representado por el objeto:

   HtmlDocument doc = HtmlPage.Document;

Para poder utilizar este objeto tenemos que declarar una referencia al siguiente namespace:

   using System.Windows.Browser;

Como ejemplo e ilustración de este objeto les mostraré un trozo de código que cambiará el color de fondo de la página web que contiene al control.

Paso no. 1

Crea una nueva aplicación Silverlight 2 desde Visual Studio 2008

Paso no. 2

Abre la página de Test (SilverlightApplication1TestPage.aspx) y modifica el tag DIV que rodea al control Silverlight. El cambio en particular deberá permitir que el DIV tenga un ID y que además mida únicamente 20% de ancho y alto en lugar del 100%. Modifica también el ancho de la aplicación Silverligth a 50%.

<div id="myDIV" style="height:20%;width:20%;background:blue;">

   <asp:Silverlight ID="Xaml1" runat="server"

   Source="~/ClientBin/alFadorProject.xap"

   MinimumVersion="2.0.31005.0"

   Width="50%" Height="100%" />

</div>

Paso no. 3

En Page.xaml agrega un botón y maneja su evento Clic. Mira el siguiente código:

<UserControl x:Class="alFadorProject.Page"

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

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

   Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Button x:Name="MyButton"

               Width="100"

               Height="50"

               HorizontalAlignment="Left"

               VerticalAlignment="Top"

               Click="MyButton_Click"

               Content="CambiaColores" />

    </Grid>

</UserControl>

Paso no. 4

En Page.xaml.cs vamos a agregar el código que nos permitirá manejar el DOM HTML de la página que contiene nuestro control. Los pasos son:

  1. Creamos nuesto objetos HtmlDocument
  2. Obtenemos el elemento Div que queremos modificar
  3. Aplicamos el cambio de estilo al objeto

private void MyButton_Click(object sender, RoutedEventArgs e)

{

   HtmlDocument doc = HtmlPage.Document;

   HtmlElement div = doc.GetElementById("myDIV");

   div.SetStyleAttribute("background", "green");

}

Paso no. 5

Corre la aplicación. Fijate como al presionar el botón dentro de Silverlight 2 se cambia el color de fondo del DIV que tenemos dentro de la página html.

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,


Silverlight 2.0 al desnudo

por Héctor Hernández 15. octubre 2008 17:22

No quería hacer este post hasta probar la versión completa de Silverlight 2.0 por mí mismo. El día de ayer: 14 de octubre del 2008 Microsoft por fín liberó la versión completa o RTM de Silverlight 2.0 y he aquí la lista de detalles fundamentales de esta actualización.

PARA NOVATOS SILVERLIGHT

Los pasos para adecuerse a esta nueva versión son bastante sencillos:

  1. Visita la página oficial de Silverlight y date una vuelta para conocer las capacidades de la herramienta.
  2. Descarga e instala las aplicaciones que se indican en la página Get Started para poder comenzar a programar.
  3. Dentro de la misma página Get Started podrás ver muchos tutoriales que te irán guiando a través de Silverlight 2.
  4. Finalmente, si tienes alguna duda podrás comentarla en los foros de Silverlight.net o también puedes publciar tu pregunta en este post y veremos como te ayudamos.

PARA PROGRAMADORES SILVERLIGHT

Antes que nada les haré un pequeño comentario: sus aplicaciones beta 2 seguramente ya no funcionan, así que manos a la obra y !A ACTUALIZAR SE HA DICHO!

- Detalles FUNDALMENTALES...

  • Visual Studio 2008 requiere de la instalación de su SP1 antes de de poder instalar las herramientas de Silverlight 2.
  • Requires actualizar tu Blend 2 a la versión 2.5 para poder programar Siverlight 2. Ya no es necesario contar con el June Preview 2005, simplemente instala Blend 2 y actualizalo con el Service Pack 1.
  • Para poder publicar una aplicación Silverilth 2 a través de una página html deberás fijarte en tu tag <OBJECT /> ya que deberás cambiar el tipo de objeto de: "application/x-silverlight-2-b2" a "application/x-silverlight-2"
  • Las fuentes que integras dentro de tu aplicación Silverlight 2 ahora deben de ser dadas de alta como Recursos en lugar de estar dentro de tu compilado .xap. Simplemente ve tu proyecto desde Visual Studio y ajusta las propiedades de cada fuente de "Content" a "Resource" para que funcionen correctamente en esta versión.
  • Si estás utilizando el VisualStateManager deberás cambiar los atributos VisualTransition.Duration a VisualTransition.GeneratedDuration.
  • Finalmente (y por el momento) ... el modelo y tema de todos los controles han cambiado de la versión Beta 2 a RTM, estos cambios implican también modificaciones al modelo de uso de Recursos Estáticos, así que no olvides revisar tus estilos para que funcionen adecuadamente.

Para detalles a profundidad acerca de los cambios a esta versión puedes visitar el Anuncio oficial de Scott Gu.

PARA TODOS

Para terminar puedes utilizar muchos recursos existentes en la red para aprender rápidamente Silverlight 2, por ejemplo:

  • Project Rosseta: Este es un sitio enfocado a desarrolladores de Flash en donde se les enseña con sus términos a realizar aplicaciones Silverlight 2.
  • [detalles aquí]
  • Shine Draw: Este es un blog en el que Terence Tsang (un desarrollador web) crea proyectos en Flash y después en Silverilght, los compara y hace votaciones sobre cual fue el más fácil y rápido para desarrollar. [detalles aquí]
  • Silverlight 2.0 RC0 XAML: Esta es una herramienta donde podrás colocar XAML y con el clic de un botón verás el resultado en pantalla. Es bastante práctica esta herramienta cuando se utiliza con propósitos de aprendizaje. [detalles aquí]
  • Navegador de estilos Silverlight 2: Con esta herramienta podrás navegar a través del código xaml que utiliza cada control de Silverlight 2 para mostrarse en pantalla. [detalles aquí]

Este mismo blog tiene información, recursos y tutoriales acerca de Silverlight 2, presiona aquí para ver los posts relacionados.

Espero que su aventura por Silverlight 2 sea placentera.

Atentamente

-Ing. Héctor Hernández Rodríguez

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , ,


Herramienta de aprendizaje para Silverlight 2.0

por Héctor Hernández 13. octubre 2008 18:37

Y bien, sabemos que los rumores por la red están bastante fuertes acerca del lanzamiento oficial de Silverlight 2.0 en su versión RTW (Release to Web). Para aquellos que aún estén en esto de apernder esta tecnología y sobre todo como crear interfaces a través de XAML les dejo una liga a esta herramienta llamada: View Silverlight 2.0 RC0 XAML examples or create your own.

NOTA: Es importante que noten que esta herramienta está hecha para mostrar código XAML de la versión RC0 de Silverlight 2.0 por lo que los que tengan el plug-in del Beta 2 no podrán ver la aplicación.

Actualmente calificado con 4.0 por 1 personas

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,


Templates y Silverlight 2.0

por Héctor Hernández 8. octubre 2008 18:14

Una forma razonable en la que los desarrolladores y diseñadores gustan para realizar nuevos Templates (skins) para sus aplicaciones es: basarse en una que ya esté hecha. Aprender del ejemplo.

Silverlight 2.0 tiene como característica el poder separar el aspecto de cada control o componente como si manejáramos una hoja de estilos de un html común. Todo este xaml por supuesto que puede ser modificado para ajustarse a nuestras necesidades.

Para poder ver todos y cada uno de estos estilos les presento la herramienta: Silverlight Default Style Browser, creada por David Anson.

SilverlightDefaultStyleBrowser Application

 

En la página que les puse en la liga anterior podrán ver una descripción a detalle de esta herramienta. Lo interesante es que con darle clic en la imágen de la página comenzará a descargarse y se instalará automáticamente en tu computadora.

Lo interesante de la aplicación es que puedes ver todos los estilos originales de Silverlight 2.0 y además de que el código aparece acomodado como a través de un IDE.

Saludos

Ing. Héctor Hernández Rodríguez

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , ,


Problema común al colocar una aplicación Silverlight 2.0 en la red

por Héctor Hernández 1. octubre 2008 22:09

El día de hoy coloqué una aplicación Silverlight 2.0 beta 2 en la red y al ejecutar mi Default.aspx recibí la siguiente noticia:

Could not load file or assembly 'System.Web.Silverlight' or one of its dependencies. The system cannot find the file specified.

Después de una sumergida en la red descubrí que solucionar el problema es bastante sencillo, sólo sigue estos simples pasos:

  1. Copia el archivo System.Web.Silverlight.dll que debes de tener en la carpeta C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server a la siguiente carpeta:  C:\Windows\assembly
  2. Copia el archivo Silverlight.js desde C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools a la carpeta: {tu proyecto}\Client Bin\
  3. Asegúrate que tu Internet Information Services contenga .XAP dentro de sus Mime types. Escribí un tutorial al respecto, puedes consultarlo aquí.
  4. Reinicia IIS. (Abre una consola y escribe el comando iisreset y da enter)

** Aviso: Si tu aplicación resulta ser que está siendo distribuido a un serverdor tercero lamento informarte que por el momento estás frito, lamento no poder ayudarte, quienes pueden son tus provedores de hosting.

Una mala cuestión de esta solución es que no indica el por qué se da este fenómeno en algunas aplicaciones de Silverlight 2.0. Este es el primer proyecto que publico en el mismo servidor que presenta este problema. Siguiendo estos pasos quedó resuelto sin afectar las demás aplicaciones Silverlight o los demás sitios publicados. Para mí, las causas de este problema quedan en el completo misterio por el momento. Esperemos que en final release no existan estas contrariedades.

Saludos,

Ing. Héctor Hernández Rodríguez

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

.NET Framework | Silverlight 2 | Tutoriales


Skins, Controles y componentes para Silverlight 2.0

por Héctor Hernández 30. septiembre 2008 00:07

img01

Silverlight 2.0 ya está en su RC0 y aún estamos descubriendo si nuestras aplicaciones tendrán la suerte de ser compatibles con esta nueva versión. Mientras tando es mandato que visiten WPF Styles siguiendo ésta liga. Este sitio está en la red gracias a Andrew den Hertog, aquí encontrarán su blog.

WPF Styles como su nombre lo indica es una comunidad de desarrolladores de Silverlight y de Windows Presentation Foundation que se han dado a la tarea de crear diversos skins y controles para sus aplicaciones. Así que este es un espacio para que puedas compartirlos y claro también descargarlos y utilizarlos en tus aplicaciones.

El sitio es relativamente nuevo, esto quiere decir que la verdad no encontrarás los cientos de skins para tu aplicación, pero si podrás darte una idea de como crear uno de manera sencilla al descargar un ejemplo.

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , ,

Silverlight 2


Rss icon

Siguenos a través de RSS!

RecentPosts

Patrocinadores

Conoce ms acerca del programa de patrocinadores aqu

Google