Las aplicaciónes Web de última generación son una combinación entre aplicaciones Web y aplicaciones de escritorio que ofrecen al usuario una buena experiencia de usuario. Y alrededor de ellas, es donde nace Silverlight. Una tecnología que se puede… ver… oír… !tocar! ¡sentir!

Autor:

Director comercial en Difoosion y programador especializado en tecnologías Microsoft y diseño de interfaces de usuario. Amante de las nuevas tecnologías: móviles, redes sociales, etc. Además practico a veces la fotografía como podéis ver en mi Flickr. Podéis seguirme en mi Twitter o para cualquier otra cosa podéis ver más en mi blog y en mi página personal.

Este tutorial forma parte de una serie

¿Qué es Silverlight?

Orígenes

Antes de empezar a hacer cosas con Silverlight, debemos conocer un poco de sus orígenes, que se puede hacer con él y, en definitiva, aquellas cosas que debemos saber antes de decidir si empezar a tocarlo o no. Pero lo primero es saber qué es.

Silverlight es un producto desarrollado por Microsoft, que permite crear las aplicaciónes Web de última generación, las RIA (Rich Internet Application). Se trata de una combinación entre aplicaciones Web y aplicaciones de escritorio, ofreciendo al usuario una buena experiencia de usuario. Existen muchas soluciones para crear RIAs, una técnica muy conocida es AJAX, pero también existen otras tecnologías como JavaFX, Adobe Flex, etc.

Silverlight es desarrollado por Microsoft alrededor de esta incipiente tendencia, donde las aplicaciones web requieren cada vez más y más interacción en base a interfaces ricas (RIA).

La primera versión de Silverlight (1.0) fue publicada en Septiembre de 2007, que solo tenía soporte de programación con JavaScript, la versión 2.0 (publicada en Octubre del 2008) incluyó grandes mejoras tanto de programación como de características de extensibilidad. La última versión la 3.0 publicada en Julio del 2009 trajo consigo grandes mejoras de rendimiento y muchas más novedades.

Compatibilidad

Desde un punto de vista técnico, no es más que un complemento que se instala en nuestro equipo (ocupa menos de 5MB) y hacen uso de él todos los navegadores. Actualmente, los sistemas operativos soportados oficialmente por parte de Microsoft son:

  • Windows 2000 y posteriores
  • Mac OS 10.4 y 10.5

Y para futuras versiones: Nokia S60, Windows Mobile, Mobin, etc.

Por otra parte la lista de navegadores soportados es:

  • Intenet Explorer 6 y posteriores
  • Firefox
  • SeaMonkey
  • Safari
  • Opera
  • Google Chrome

Además con Silverlight no solo podemos desarrollar para enriquecer nuestras Webs, a mayores, nosotros podemos crear Gadgets para el Windows Sidebar, aplicaciones OOB (Out-Of-Browser, fuera del navegador) tanto para Windows como para Mac OS. Y para futuras versiones podremos crear complementos para Windows Media Center o para la Xbox.

A parte de la via oficial, el proyecto Moonlight, desarrollado por Novell y patrocinado por Microsoft, está desarrollando el complemento de Silverlight para Linux.

Entorno de desarrollo

Visual Studio 2010

El mayor potencial de Silverlight está en el entorno de desarrollo, Silverlight incluye un subconjunto de la plataforma .NET de Microsoft y con ello toda la potencia que ello implica. Como entorno preferido para el desarrollo, bajo Windows, tenemos Visual Studio (desde la versión gratuita, la Express, hasta el entorno de gestión de ciclo de vida Team System). Además para otros entornos, Mac y Linux, tenemos MonoDevelop y Eclipse (instalando las recientes Eclipse Tools For Silverlight).

Por otra parte su gran potencial es el propio desarrollo, aun que sobre este profundizaremos en el siguiente artículo, adelanto que una aplicación Silverlight está dividida en dos partes: el lenguaje de marcado (XAML), donde está todo su potencial, y luego el lenguaje que nosotros elijamos dentro de una larga lista: C#, Visual Basic, Python, Ruby, F#, JavaScript, etc.

Herramientas de diseño

Expression

Pero una tecnología tan orientada al diseño como esta no puede vivir sin sus herramientas de diseño. En este caso contamos con la suite Expression Studio. Que nos trae todo aquello que necesitamos para diseñar con Silverlight: Expression Design, para diseño vectorial; Expression Blend, para diseño interactivo de interfaces de usuario; Expression Encoder, para la codificación de video. Además incluye otras herramientas como Expression Web para el diseño HTML, CSS y AJAX, con buenas herramientas para accesibilidad o compatibilidad de páginas entre navegadores (como SuperPreview que usa los renders de Firefox e Internet Explorer).

Habitualmente programadores y diseñadores deberemos usar ambas herramientas, que se complementan mutuamente.

Además en caso de que nosotros o nuestro diseñador esté más familiarizado con otros entornos de diseño como Adobe Photoshop o Adobe Illustrator. Tanto Expression Blend como Expression Design nos permite importar nuestros diseños sin perder calidad.

De qué disponemos con Silverlight

De serie Silverlight nos trae infinidad de utilidades, pero cabe destacar dos tecnologías que Microsoft ha liberado alrededor de Silverlight: Smooth Streaming y DeepZoom. Ambas se basan en el mismo principio para mejorar la calidad de descarga del cliente y el acortar largas esperas tanto cargando una imagen como un video. Se basan en la fragmentación del video o la imagen, en varias calidades y tamaños.

Smooth Streaming

Esta extensión de IIS, te permite teniendo videos codificados en varias calidades. En tiempo de reproducción el cliente de Silverlight va a detectar nuestro ancho de banda y descargará aquel que se adecue a nuestra velocidad de bajada. Esto implica que ver un video con Smooth Streaming sea mucho más suave y rápido que con otros métodos de streaming tradicionales.

Ejemplohttp://www.iis.net/media/experiencesmoothstreaming

DeepZoom

DeepZoom es una herramienta más madura y más versatil. Se basa en el mismo principio, coge una foto muy grande, la divide como si fuese una cuadricula, la fracciona, y luego va creando replicas de la imagen original en resoluciones menores. Al final lo que tendremos es un control que al hacer Zoom en él, nos irá descargando solo aquellas imagenes que necesitamos con la calidad que necesita en ese momento. Y así conseguimos un buen efecto de profundidad.

Ejemplo: http://memorabilia.hardrock.com/

Plataforma

Desde Silverlight 1.0 hasta el actual Silverlight 3, ha tenido muchas mejoras y nuevas funcionalidades. Repasando todas sus características estás pueden ser las más importantes:

Multimedia:

  • Codecs: H.264/AAC/MP4
  • Administración de derechos multimedia
  • Motor de animaciones

Gráficos:

  • Aceleración GPU
  • Efectos y Pixel Shaders 2.0
  • Perspectiva3D
  • Easing Functions
  • Pixel APIs
  • Codecs audio/video personalizables
  • Comunicación local entre aplicaciones Silverlight

Navegación:

  • Navegación a partir de URL
  • Historial del navegador
  • Optimización de Motores de Búsqueda (SEO)
  • Posibilidad de ejecutarse fuera del navegador
  • Pantalla completa

Datos:

  • Enlazado a datos
  • Datos de ejemplo durante el diseño
  • Gráficos

La lista podría ser mucho mayor pera para ir empenzando es suficiente. En esta primera parte no quiero hablar técnicamente de Silverlight, si en cambio exponer sus características y que es lo que nos ofrece.

Hacia dónde está enfoncado

Desde su aparición, en un mercado ya colmado de soluciones dominantes (Adobe Flash, con sus variantes, y Java, tanto applets como JavaFX), Microsoft ha intentado enfocarlo hacia varios mercados específicoss: aplicaciones empresariales, juegos casuales y contenido multimedia. En el caso del últmo ya os hablé de lo que nos ofrecen para obtener una solución mejor a las alternativas actuales.

Youtube ha transmitido varias cosas usando Silverlight. Pero no ha sido el único, la inauguración de Barak Obama también y la NBC lo eligió para las últimas Olimpiadas.

Aplicaciones empresariales

Como comenté antes, Silverlight tiene varias cosas buenas para el manejo de datos, como el enlace a datos (o Data Binding). Pero no es lo único que trae controles como el DataGrid o el DataForm nos ayudan a la hora de hacer aplicaciones que manejan datos. Además al estar hablando de una aplicación que se ejecuta en el cliente necesitamos de una serie de servicios y ahí entre en juego RIA Services que nos ayudan a la hora de programar dichos servicios. RIA Services por ejemplo descarta el uso XML como medio de transporte y en su lugar usa JSON por lo tanto las peticiones, aun que un poco más costosas de serializar y deserializar, mucho más pequeñas y liberamos a nuestro servidor y la velocida con el cliente.

Juegos casuales

Microsoft ha querido dar una alternativa al omnipresente Flash en cuanto a juegos casuales en internet. Muchas de las características mencionadas, las podemos aplicar al desarrollo de juegos “de arcade”, tanto las multimedia como las gráficas. Pero hay otros como los servicios XML binarios, pensando en juegos multijugador, que también podrían ser enfocados hacía este sector.

Si queréis profundizar en el desarrollo de juegos con Silverlight, el libro “Game Programming with Silverlight” de Michael Snow os puede ser de gran ayuda.

De todas formas no nos limitemos, los usos se pueden extender a Gadgets, clientes de escritorio multiplataforma, sitios web y un montón de alternativas más.

Soporte multitáctil

Multitouch

Una de las grandes novedades que tiene Windows 7, es el soporte para pantallas multitáctiles. Esto significa no solo poder contolar la superficie de la pantalla como se podia en versiones anteriores de Silverlight, pudiendo describir trazos con el puntero, etc. Sino que con el soporte multitáctil podemos detectar varios puntos concurrentes sobre nuestra interfaz y controlar los “gestos” que sobre esta describen

Además también podríamos controlar varios usuarios (o manos) trabajando sobre la misma aplicación. Este es un gran punto de pontencial ya que es una tendencia que poca gente está explotando y que Windows 7 y los productos relacionados de Microsoft (Surface, Silverlight, WPF, etc.) nos proporcionan todas los recursos necesarios para crear este tipo de experiencias.

Ejemplo de gesto de rotación:

Rotacion multitouch

Referencias

Enlaces

Libros

¿Las segundas partes nunca fueron buenas?

Pero aquí no acaba la cosa, esto no acaba más que de empezar. Después de esta introducción a Silverlight desde el punto de vista histórico y de potencial. Próximamente comenzaremos con una serie de artículos en los que iremos viendo algunas de las características aquí citadas, y muchas otras que me reservo para futuras entregas.

Si no puedes esperar y quieres seguir profundizando, recomiendo el libro “Silverlight 2 Unleashed” de Laurent Bugnion, el mejor que he leído hasta ahora.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (10 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

¡Buena introdución! Lo has sabido vender muy bien.

Tengo que reconocer que tengo en casa un libro de WPF sin estrenar. Lo compré y un mes o dos después dí el salto al desarrollo en linux…y de momento allí sigue…

Un saludo!

Muy buena la introducción Eugenio! Ojalá mantengas la calidad a lo largo de todos los posts :)

Jorge Daniel Lemes - Santa Rosa, La Pampa - Argentina

Felicitaciones por el artículo, lo voy a usar para convencer a mis clientes, ji ji.
Ya que estás a de lleno con Silverlight y que utilizas el idioma español, te voy a hacer una pregunta que me está quitando el sueño ¿Como se hace para que se puedan ingresar los acentos (o tildes) en los TextBox de Silverlight 3 en los navegadores distintos a IE como Firefox por ejemplo? Antes con el plugin de silverlight 2 se permitía ingresar palabras acentuadas tanto en Firefox y en Crhome por ejemplo, pero ahora ya no. ¿alguna idea?. Gracias de antemano por tu respuesta.

Muy buen articulo!! Me ha parecido muy interesante.

Sería posible que deixases o artigo en pdf ou así para poder baixalo e telo á man?
Polo que lin está bastante ben, ademáis eu non controlo disto e así teño unha idea un pouco do que é. Grazas polo teu esforzo e un saúdo!

@Todos: Gracias por los comentarios, esto le da a uno animos de seguir con el II e ir pensando en el III ;-)

@Jorge Daniel:
Yo no tengo ningún problema con las tildes en ningun navegador con la versión 3.0. ¿Has leído que alguien tuviese el mismo error? ¿Lo habéis reportado?

@Juan José:
En principio, no estará disponible. Pero eso no está sólo en mi mano. Pero lo pensamos :-)

GiS

Voy a tener que echarle un vistazo a ese libro ;)

Gracias por el post Eugenio :D

¡Besos!

Eduardo

muy buen artículo, me aclaró varias dudad que tenia

christian

hola, buen articulo. sabes con que herramienta puedo desarrollar ? que no sea expression-blend ?

miguel

Probablemente tus contertulios entenderán toda la trama que expones, pero a un usuario, para qué coño le sirve? eso está poco claro