Haciendo un poco de historia … siempre es bueno o interesante conocer el origen de las cosas … Por supuesto existen cosas mas faciles de conocer su origen que otras … pero en cuanto a Deep Zoom resulta como un proyecto de incubadora de Seadragon perteneciente e SeaDragon Software … Y como resultado Deep Zoom es la implementación que expone tecnología de Seadragon en Silverlight. El equipo de desarrollo de SeaDragon forma parte de Microsoft Live Labs que ademas trabajan en proyectos adicionales a Deep Zoom … como lo es Photosynth.

Siguiendo … o mas bien … EXTENDIENDO el Post pasado … muestro las características adicionales de Deep Zoom Composer. Solo espero que sigan evolucionando este producto … aunque su evolución natural seria integrarlo al 100% a Expression Blend … pero habrá que esperar un poco mas.

Las capacidades adicionales de DeepZoom se encuentran en la opción de Export … dentro del menú izquierdo del IDE de Composer.

DeepZoomPix
Imaginemos un escenario donde generamos un proyecto DeepZoom mediante Composer … pero no se cuenta con un hosting con soporte Silverlight … o incluso sin ningun tipo de Hosting … es posible publicar nuestros proyectos en la página de DeepZoomPix … Pero no todo es tan perfecto como parece : Esta iniciativa solo es demostrativa … ya que esta pensado para estar disponible hasta el 31 de diciembre del 2oo9 … pero mientras esto sucede … hay que aprovecharlo … La verdad dudo que desaparezca por completo … seguramente se integrará como parte de Azure Services (aunque de momento dicen que no … habrá que esperar).

A través de composer se puede publicar de manera automática nuestros proyectos.

• Primero hay que crear una cuenta en DeepZoomPix … la cual se enlaza con una cuenta de Windows Live (Messenger, Hotmail, Xbox) … esto es posible hacerlo desde Composer … pero yo tuve problemas para crearla … así que la generé directamente en la página de DeepZommPix.
• Una vez creado el proyecto y ubicandose en la opción de Exportar … en la pestaña o sección de DeepZoomPix … los pasos son :: 1. accesar a la cuenta ya creada … 2. Nombre al Album … 3. Seleccionar una cubierta (la cual puede ser cualquiera de las imágenes de la composición) … 4. Seleccionar la calidad de las imágenes y 5. Publicar.

• Iniciado el proceso de Publicación “sube” las imágenes de la composición o proyecto al sitio … Este proceso puede tardar dependiendo de la cantidad de imágenes y el peso de la misma … y por supuesto del tipo de enlace.

• Una vez terminado el proceso … solo habrá que seleccionar la opción de Browse New Album.

• LISTO … Composer de manera automática abre el album recien creado en el Explorador. El modelo de navegación es el mismo generado por DeepZoomComposer.

• Mediante los servicios de DeepZoomPix se permite publicar en nuestras propias páginas el album creado … a través de un Embed code (muy similar al funcionamiento de YouTube). Tambien cuenta con las opciones de publicación en Facebook, Twitter y MySpace.

Aqui se puede ver el ejemplo real publicado en las páginas de DeepZoomPix

Custom

Las opciones adicionales o disponibles se encuentran en la opción del menu Custom.

Output Type

• Images. Esta es la opción básica de exportación … la cual genera la Piramide de Imágenes necesarias para la generación de proyectos DeepZomm … La importancia de esta opción es que a partir de estas imágenes se puede generar un proyecto directamente en Visual Studio … permitiendo la personalización de nuestra propia aplicación o solución DeepZoom. La clase principal o eje para la generación de proyectos DeepZoom en VS es MultiScaleImage Class. En nuestro propio proyecto podemos generar nuestros propios controles … efectos … o simulación personalizada. La exportación de imágenes se genera como un proyecto … y almacena las imágenes en un conjunto de directorios generados para este proposito.
• Silverlight Deep Zoom. Mediante esta opción de exportación aparte de generar la Pirámide Imágenes … generá un proyecto Silverlight haciendo uso de las imágenes generadas. Este ejemplo es el representado en el Post Pasado … el cual incluye un modelo de navegación … que aunque simple … es eficiente. En combinación con el tipo de exportación para multiples imágenes (Export as a collection :: multiples images) … existen 3 opciones diferentes
  • Default. Este es el método o template utilizado en el Post pasado y publicado en Ria4NET.com.
  • Tag Browser. Este hace uso de un template diferente … y muestra las posibilidades de DeepZoom. En el blog de Kirupa Chinnathambi podemos encontrar el Source de este proyecto.
  • Deep Zoom Classic + Source. Este hace uso del template mas sencillo … pero la importancia radica en que este genera un proyecto con código fuente para ser utilizado en Visual Studio … y esto incrementa su importancia para el aprendizaje de Deep Zoom.
• Seadragon Ajax. Este forma parte de un proyecto de LiveLabs :: Seadragon Ajax … siendo un proyecto sumamente interesante … aunque sencillo en su escencia. Parte de un escenario donde se genera la Pirámide de Imágenes para DeepZoom … pero sin utilizar Silverlight … y en su caso … genera un simulación o representación usando AJAX … es decir Javascript y DOM. Una vez exportado genera la página Web con el resultado del proyecto … así como las imágenes asociadas. El Javascript para su funcionamiento no se genera durante el proyecto … pero se encuentra ubicado en seadragon.com/ajax.

Conclusión.

Con este Post termino el tema relacionado de DeepZoom … y aunque aun hay tema de donde cortar … como es la generación o personalización de DeepZoom en Visual Studio … así como el manejo de clases … DeepZoomComposer genera el material necesario para su aprendizaje. Por cierto … el código o Source generado es en C#.

Otro tema importante y a la vez interesante … que pertenece al entorno DeepZoom y Silverlight es Photosynth … y aunque no lo promueva en el Blog … estoy generando un proyecto demo en Ria4NET.com … y en cuanto esté terminado … lo informaré en Twitter.

Próximo Post :: Servicios RESTful con Silverlight:: Lunes 31 de Agosto.

En el paso del tiempo las casas de software han venido desarrollando aplicaciones o soluciones que simplifiquen las tareas de programación de los desarrolladores … donde incluso se llega a la capacidad de desarrollar aplicaciones complejas sin escribir código … o en su defecto lo menos posible. Este tipo de aplicaciones existen también para perfiles distintos a la informática … como diseñadores gráficos … matemáticos o actuarios … investigadores de ciencia … contadores .. etc.

Hola … soy dansalinas … y continuando con el Post Anterior y como parte de una serie dedicada a Deep Zoom y Silverlight hoy quiero mostrar la aplicación de Deep Zoom Composer que permite hacer composiciones de imágenes a alta resolución en Silverlight.
El ejemplo publicado en Ria4NET.com (Encuenten a Wally & Bart Simpson) … fue desarrollado con Deep Zoom Composer … y es el ejemplo que mostraré en este Post … además de algunas características adicionales con las que cuenta Composer.

Para iniciar con el Post se deberá tener instalado los requisitos previos.

• Sistema operativo Windows 7 … Windows Vista … Windows XP SP2
• Para reproducir el resultado o producto resultante de Deep Zoom Composer se requiere Silverlight 3. Recomiendo instalar Silverlight 3 Tools for Visual Studio 2008 … ya que incluye todo lo que necesitas para ejecutarlo como son: Runtime, SDK, Soporte Adicional para VS2008, Templates, Intellisense for XAML.
• Y por supuesto Deep Zoom Composer.

El procedimiento para generar una presentación o solución con Deep Zoom Composer es:

• Inicializar Deep Zoom Composer (este lo instala en la misma opción del menú de Expression Blend)
• Al iniciar el programa nos muestra las opciones de crear un Nuevo Proyecto o Abrir uno existente (de igual manera nos despliega los últimos proyectos). En este caso daremos clic en la opción New Project

• A continuación se presenta la opción de dar nombre a nuestro proyecto y su ubicación

• Una vez creado nuestro proyecto se presenta el escritorio de trabajo de Deep Zoom Composer

• Como podemos ver en una primera impresión … es una interfaz muy sencilla. Quiero hacer notar en la superior al centro se encuentra el menu principal de Composer … con las opciones de Import > Compose > Export … las cuales constituyen los 3 pasos para crear una aplicación.

• El primer paso para crear nuestra aplicación es Importar las imágenes … Para esto del lado derecho del escritorio se encuentra el botón de acción.

• Se pueden añadir la cantidad de imágenes que se requiera … Cabe aclarar que soporta imágenes en formato JPG y PNG … En mi caso agregue 4 imágenes … Las de Asterix, Los Simpson y Wally son JPG’s de 1024 x 768 … y la imágen de Pokemon es un JPG de 3000 x 1970. Por cada imágen importada se muestra una caja de diálogo. NOTA. Se puede importar una por una … o todas las imágenes a la vez.

• Una vez importadas las imágenes a usar para la composición … dar click en el botón Compose del menu superior … Una vez situados en el escritorio de la sección Compose … se muestran en la parte inferior todas las imágenes importadas previamente … y al centro es área de trabajo principal para hacer la composición.

• Para llevar a cabo la composición crear un a Area (algo así como un Layout) … y para hacer esto en la barra inferior … del lado izquiero junto a las imágenes … se encuentra el ícono Add Area (es un ícono muy pequeño) … Una vez generada el área ubicamos las imágenes con un simple drag-drop … ubicandolas en el área de la manera que se quiera … Cada una al lado de la otra o incluso una encima de otra.

• Una vez generada la composición dar clic en el botón de Export … donde muestra un Previo (Preview Output) del resultado de la composición. Del lado derecho se muestra el menu de opciones de exportación … Por Default aparece seleccionada la opción DeepZoomPix (esta y demas opciones las presentaré en el siguiente Post). Para este caso selecciona opción Custom … y seleccionamos las opciones por default para un ejemplo básico. Como mencione antes … en el siguiente Post mostraré a detalle las opciones que se proporcionan para exportar proyectos con Deep Zoom Composer.
• Las opciones a seleccionar a utilizar son: Silverlight Deep Zoom … Le proporcionaremos un nombre y ruta de proyecto … la Exportación de imágenes será como Colección de Imágenes (multiple images) … Se selecciona la opción por Default … y el tipo de imagenes con formato JPEG con una calidad de imágen de 95%. Y por último click en Export

• Al momento de exportar el proyecto … se presentará una caja de diálogo que muestra el proceso de exportación.

• Al final del proceso de exportación aparece una caja de 4 opciones para accesar de diferente manera a nuestro proyecto.

• Mediante la opciónPreview in Browser nos permite ver directamente el resultado de nuestro proyecto … desplegando el navegador y ejecutando nuesta composición a través de Silverlight (así de simple).
• La opción View Image Folder nos remite directamente al directorio donde se almacenan las imágenes fragmentadas que utiliza Deep Zoom … Las imágenes las almacena en los directorios dzc_output_files & dzc_output_images … y en el directorio raíz almacena los manifiestos con los que la tecnología Deep Zoom manipula las imágenes. Les recomiento navegen por estos directorios … le va a dar una idea de como suceden las cosas dentro de Deep Zoom … no desde un punto de vista técnico pero si conceptual.
• La opción View Project Folder se encuentra dehabilitada (esto se debe a las opciones seleccionada para la exportación y que explicare en el siguiente Post)
• El resultado de este Post lo pueden ver EN VIVO en Ria4NET.com

Conclusión

En este Post como ven detalle un proceso que en general es muy sencillo … ya que al final con unos cuantos clics obtenemos un producto o resultado … que logra un impacto a los usuarios.
Normalmente no hubiera detallado tanto un procedimiento como este … pero realmente me entretuve haciendolo.
Como vieron … Deep Zoom Composer posee una serie de opciones adicionales que no se tocaron en este Post … pero que detallaré en el próximo Post para conocer el potencial de esta sencilla pero práctica herramienta.

Hola … soy dansalinas … hoy quiero presentar y hacer una introducción a Deep Zoom el cual proporciona la capacidad de hacer zoom en imágenes de gran tamaño en Silverlight manteniendo el rendimiento. Inicialmente la imágen se muestra en un tamaño reducido … de manera que el usuario tiene una vista de toda la imágen. El usuario puede simplemente dando clics en la imágen ampliarla haciendo zoom´s mas y mas … y eventualmente … ampliar el área seleccionada de la imágen y exponer los detalles que no fueron visibles inicialmente. A modo de ejemplo puedes visitar la página de Ria4NET.com … (página hermana de ria.com.mx) … y ver el ejemplo que tenemos publicado … así se entenderá mejor el concepto de Deep Zoom.

Como instrucciones de uso … basta con dar clic en cualquiera de las imágenes para el primer zoom … y en la esquina superior izquierda .. se encuentra el menú de Zoom-in o Zoom-out. Asì que diviertanse … y por cierto … Encuentren a Wally … y por que no .. a Bart Simpson

IMPORTANTE: Requiere tener instalado Silverlight 3 (en caso de que no lo tengan … mostrará el link para su instalación). Recuerda desinstalar cualquier versión anterior de Silveright antes de instalar esta nueva versión.

Ahora veamos mas a detalle que es y como funciona Deep Zoom.

Deep Zoom es una característica de Silverlight … el cual utiliza los objetos XAML o clases MultiScaleImage o MultiScaleSubImage (ya hablaremos de como utilizarlos en posteriores Post) 

Deep Zoom puede ser utilizado para diferentes tipos de aplicaciones … pero de momento esta reconocido principalmente para 3 tipos de escenarios:

• Exploración de imágenes de gran tamaño y de alta resolución. Siendo este el clásico ejemplo de zoom.
• Fotografías 3-D. Refiriendose a un conjunto o colección de imágenes que componen una imágen de 360 grados.
• Mosaicos publicitarios. A través de un collage de imágenes que en conjunto conforman una unidad … se aplica la técnica de zoom para acceder a los detalles de la publicidad. Una variación a este ejemplo son los photomosaicos.

Partiendo de estos 3 escenarios … podemos aplicarlo en diferentes soluciones empresariales como ejemplo: Industria automotriz … Inmobiliario … Ventas por catálogo … digitalización de documentos .. incluyendo la industria editorial … etc.

Funcionamiento de Deep Zoom

La escencia de la arquitectura de Deep Zoom es la separación de una imágen (o una composición de imágenes) en pequeños bloques o mosaicos … y a partir de este conjunto de imágenes  se crea una pirámide de mosaicos de menor resolución para la composición original.

La pirámide de imágenes
Una pirámide de imágenes dispone una imagen en un mosaico de imágenes de 256 x 256 píxeles en formato JPG o PNG (el tamaño de la imagen de ejemplo es arbitrario y puede modificarse) y almacena versiones de la imagen de menor resolución también en mosaicos. Cada mosaico se almacena en un archivo independiente y cada nivel de la pirámide se almacena en carpetas independientes. En la imagen siguiente se muestra de forma esquemática el funcionamiento de la pirámide de imágenes. La imagen propiamente dicha está disponible a resolución completa en la parte inferior de la pirámide (vea la imagen a continuación), y las versiones de menor resolución, por debajo de los 4 x 4 píxeles, se almacenan junto con la imagen a resolución completa. Las imágenes de cada nivel de la pirámide se almacenan en mosaicos de 256 x 256 píxeles (se indican mediante líneas blancas en las imágenes). Esto permite que Deep Zoom capture únicamente aquellos mosaicos que son necesarios para el tamaño actual de la imagen en pantalla, en lugar de descargar la imagen completa. Por ejemplo, si acerca una imagen para ver únicamente su parte central resaltada, Deep Zoom cargará únicamente los mosaicos resaltados, y no la imagen completa de 1024 x 1024.
fuente: MSDN ( definitivamente la explicación de La Pirámide lo explicaron mejor de como yo lo hubiera hecho )

Piramide

Foto-Zoom

Generar de manera manual los mosaicos de imágenes puede llegar a ser demasiado tedioso … y demasiado complicado. Afortunadamente se cuenta con la herramienta Deep Zoom Composer … que además incluye una serie de caracteristicas adicionales … como la generación del esquema en formato XML que se utiliza para accesar a las imágenes de la pirámide … también puede generar nuestro proyecto en listo para funcionar en silvelight … etc.

Para la generación de modelos tridimensionales de 360 grados … tenemos la herramienta de Photosynth … muy útil para la exploración de escenarios o panorámicas.

Conclusión

Definitivamente el uso de Deep Zoom es muy atractivo para la generación de páginas o soluciones de alto impacto visual … y por supuesto es muy interesante las posibilidades que ofrece para llevar esta funcionalidad mas allá de un simple elemento visual .. si no además … como un elemento o recurso funcional.

En nuestros siguientes Post hablaremos del uso de las herramientas: Deep Zoom Composer y Photosynth … así como la generación de proyectos en combinación con Visual Studio 2008. Adelanto que el ejemplo que actualmente esta publicado en Ria4NET.com esta desarrollado en Composer.

Con el fin de dar un valor agregado … de algunos de los Post que vayamos mostrando … publicaremos ejemplos reales basados en el mismo Post … y de esta manera podamos ver el resultado de primera mano …

Para mostar estos ejemplos … abrimos el dominio Ria4NET.com

Actualmente estamos trabajando en la imágen de la página … logotipo … para que sea además de útil … sea atractiva … pero de cualquier manera mientras que esto sucede .. iremos subiendo los ejemplos a la nueva página.

Hola … soy dansalinas … el pasado viernes 10 de Julio se liberó la versión 3 de Silverlight … siendo la versión con el mayor número de mejoras y agregados de su historia … También se liberó Expression Blend 3 + SketchFlow en RC (Release Candidate). Recomiendo leer el post de ScottGu´s de los nuevos Features de esta nueva versión.

A modo de ejemplo y a través de un proyecto sencillo (para conmemorar el lanzamiento de Silverlight 3) … presento los pasos básicos para crear un proyecto Silverlight para Web.

Este ejemplo lo llevé a cabo con Visual Studio 2008 SP1, Silverlight 3 & Expression Blend 3.

• El primer paso es crear nuestro proyecto de Silverlight … y para esto desde el menu de File seleccionar New Project.
• De las opciones de proyectos o templates de Silverlight … seleccionar Silverlight Application

• Una vez que generemos nuestra solución esta se compondrá de 2 proyectos … La aplicación de Silverlight y el Web.Site asociado a nuestra aplicación … donde se desplegará nuestro componente Silverlight.

• De manera predeteriminada Visual Studio ubica la página de mySilverlight3TestPage.aspx (o en su lugar NombreproyectoTestPage.aspx … según sea el caso) como predeterminada.
• Como siguiente paso abrir el archivo MainPage.xaml y añadir el código que se quiera publicar. Yo en este caso simplemente quiero desplegar un video o Trailer el cual ya tengo generado en formato .WMV. El video tuve que agregarlo como elemento a mi proyecto en el Solution Explorer.

• Para añadir estos 2 elementos: <TextBlock> y <MediaElement> me ayudé de Expression Blend 3. La manera mas sencilla de invocarlo es a través del Solution Explorer .. seleccionando el elemento .. en este caso el mismo MainPage.xaml … dar click en el botón derecho del mouse y seleccionar la opción Open in Expression Blend

• De esta manera puedo añadir los elementos de una manera mas sencilla e intuitiva

• Una vez realizados los cambios en Expression … basta con Guardar las modificaciones y estas se verán reflejadas directamente en Visual Studio.
• Si damos un vistazo al archivo mySilverlight3TestPage.aspx (o en su caso como le hayan llamado) veremos que la manera de invocar el proyecto Silverlight es a través de un objeto tipo x-silverlight (algo muy similar a como se ejecuta un archivo .swf de flash).
• Como parámetros del objeto está el manejador de excepciones … parámetros de ejecución y de versión … el parámetro que valida si el navegador cuenta o no con el plug-in de Silverlight  instalado en la máquina o computadora … y el parámetro source que apunta al archivo .XAP en la carpeta o directorio ClientBin

• En este caso tuve que agregar el archivo newmoon.wmv al directorio ClientBin de mi proyecto mySilverlight3.Web … para que pueda ser invocado desde el paquete .XAP … quedando mi solución de la siguiente manera:

• Ahora si damos F5 nuestra aplicación se ejecutará y mostrará vía Web nuestra aplicación Silverlight

Me gustaría detallar que sucede al momento de compilar mi proyecto o como es que termina mi objeto desarrollado Silverlight o archivo .XAML del lado de mi proyecto mySilverlight3.Web. Expression Blend nos permite visualizar como y que sucede.

Al momento de estar generando nuestro objeto en Expression Blend 3 y desde ahí compilamos o damos F5 … lo que les sea más fácil … despliega los siguientes mensajes:

Podemos ver paso a paso el proceso de compilación y generación del archivo .XAP

1. Genera el manifiesto
2. Genera la .dll del proyecto
3. Crea el archivo .XAP
4. Empaqueta la .dll y el manifiesto
5. Copia el .XAP a nuestro proyecto Web en la carpeta ClientBin

Como podemos ver el archivo .XAP es nuetro proyecto compilado el cual es procesado por el plug-in de Silverlight del lado del navegador. Técnicamente el archivo .XAP es realmente un archivo tipo .ZIP … incluso una vez empaquetado como .XAP lo podemos abrir desde WinZip o Winrar

Por supuesto … esto no me gusta .. porque ? … Simplemente busquen una página que este ejecutando un componente Silverlight … vean el código fuente de la página … ubiquen el archivo .XAP … copien la ruta y pégenla en el URL del navegador mandandola llamar … el explorador solicitará Guardar el archivo … lo guardan en su máquina o computadora … y desde WinZip o Winrar podemos ver el contenido de su proyecto … incluyendo por supuesto la .dll .. y con herramientas de descompactación de .dll´s podemos ver el código fuente.

Conclusión

Silverlight 3 viene con muchas mejoras y muchos agregados que vale la pena utilizarlos … y generar aplicaciones robustas basadas en Silverlight (acceso a datos … consumo de WebService … integración con WCF … Sharepoint … etc .. etc). Por cierto Expression Blend cada vez me gusta más … al principio no estaba muy convencido … y pensaba que se podía desarrollar aplicaciones Silverlight solo con Visual Studio (si claro .. se puede … hasta se puede programar aplicaciones .NET en Notepad) pero Expression facilita muchísimo las cosas.

Aqui les dejo unos cuantos links:

 Página oficial de Silverlight
 El download de Expression Blend 3 + SketchFlow RC
 Silverlight 3 Tools para Visual Studio 2008 SP1. Este ya incluye el runtime y el SDK
 Silverlight 3 Toolkit en CodePlex

 Les recuerdo que es importante desinstalar versiones previas de Silverlight antes de actualizar a la versión 3.

 Anatomía del archivo .XAP

Hola … soy dansalinas … este post esta basado en una premisa muy simple … Reproducir un video bajado de YouTube en Silverlight … pero no siempre todo es perfecto … ya que ha manera de introducción … Silverlight no reproduce videos de Flash … es decir archivos tipos .flv o .f4v (H.264) … aunque Silverlight 3 se está desarrollado para soportar la reproducción de videos de alta definición y soporte a los formatos H.264 (Videos de alta definición de Flash) y ACC (Formato de iTunes)

Actualmente soporta los formatos SMPTE VC-1 y Windows Media, MP3 para reproducción de audio.

Pero independientemente de que al día de hoy no es posible simplemente “subir” un archivo .flv a mi proyecto y ejecutarlo directamente en Silverlight … la premisa sigue en pie … Reproducir un video bajado de YouTube en Silverlight …

Me gustaria comenzar un una introducción y/o definición a los formatos de Flash Video (FLV), F4V y H.264

.FLV
A partir de la versión 6 del Flash Player es posible intercambiar audio, video y datos a través de conexiones RTMP con Flash Media Server …. siendo una manera de alimentar los datos al Flash Media Server (y por lo tanto a los clientes de Flash Player) es a través archivos con el formato FLV
RTMP es un protocolo utilizado por el Flash Player para entregar los objetos en tiempo real, video y audio a los clientes (Flash Player).
Para la versión 7 el Flash Player puede reproducir archivos FLV directamente utilizando MIME type video/x-flv.
En resúmen los archivos FLV codifican de una manera sincronizada el audio y video. Los datos de audio y video dentro de los archivos FLV se codifican de la misma forma como el audio y video en arhivos SWF.

.F4V
Disponible su reproducción desde la versión del Flash Player 9 Update 3 … el formato F4V está basado en la especificación ISO/IEC 14496-12: ISO base media file format.
Los archivos F4V hacen uso extensivo de Streaming (transmisión de video o audio remotamente en tiempo real sin necesidad de descargar el archivo completo).
En escencia un archivo FLV es contenedor MPEG4 con video h.264 y audio MP3.

H.264
Es la siguiente generación de compresión de video usando el estandard MPEG-4.
H.264 puede igualar la mejor calidad MPEG-2 hasta a la mitad de la velocidad de transmisión de datos. H.264 también ofrece una excelente calidad de vídeo a través de todo el ancho de banda del espectro - de 3G a HD y todo lo que entre (desde 40 Kbps a más de 10 Mbps).
H.264 permite la reproducción de video en Alta Definición (HD).

Extensiones soportadas por el Flash Player
.f4v     F4V video/mp4    Video para el Adobe Flash Player
.f4p     F4P video/mp4     Protected Media para el Adobe Flash Player
.f4a     F4A video/mp4     Audio para el Adobe Flash Player
.f4b     F4B video/mp4     Audio Libro para el Adobe Flash Player
.flv      video/x-flv Flash Video

Después de este breviario cultural … continuo con mi premisa … Reproducir un video bajado de YouTube en Silverlight

Para este ejercicio utilice:

• Visual Studio 2008 Profesional Edition (aunque también se puede utilizar Visual Web Developer 2008 Express Edition)
• Expression Blend 3 Preview
• Silverlight 3 Beta Tools for Visual Studio 2008 SP1
• Free FLV Converter V6.4.1 by Koyotesoft (por supuesto existen varios productos en el mercado que conviertan archivos .FLV a .MPEG ó .AVI … que son formatos compatibles con Silverlight).

Considero importante comentar que para instalar el Silverlight 3 Beta Tools … se deberá desinstalar cualquier versión previa de Silverlight … incluyendo el RunTime … SDK y cualquier Beta Tool instalado en el Visual Studio 2008. Para verificar que versión tenemos podemos verificarlo en el listado de programas instalados de Windows:

En el ejemplo habría que desinstalar las 3 opciones antes de llevar a cabo la instalación. Personalmente quise instalar la versión 3 y se me presentaban errores que no me permitieron la instalación hasta que desinstale la Silverlight 2.

Ahora si .. continuando con el proceso para Reproducir videos de YouTube en Silverlight:

• Bajar algún video de YouTube. Existen varias páginas o programas que permiten bajar videos de YouTube. Yo usé KeepVid pero incluso el FLV Converter cuenta con la funcionalidad para bajar videos. Los videos de YouTube vienen en formato Flash Video (.FLV)
•  Convertir a formato .AVI o .WMV (hice el ejercicio con ambos formatos con éxito). Esto lo hice con el Free FLV Converter … y es muy sencillo … basta con importarlo para conversión desde un FLV y Convertirlo al formato deseado: AVI ó WMV

• Abrir Visual Studio 2008. Crear una nueva Aplicación WPF y asignarle un nombre al proyecto. ej. VideoOnSilverlight

• Sin cerrar Visual Studio o el proyecto … abrir Expression Blend y abrir el archivo solution del  proyecto acabado de crear. VideoOnSilverlght.sln
• Ajustar el tamaño de la ventana directamente en XAML a Height=”500″ Width=”500″

• Mediante las herramientas visuales cambiar el color de fondo de la ventana. En mi caso color negro.

En los pasos anteriores solo pretendo mostrar que llevar a cabo funciones de diseño es sumamente sencillo en Blend y la posibilidad de interactuar en el mismo proyecto entre Blend y VS2008. Ahora es momento de agregar el Video a nuestro proyecto … lo cual es mas sencillo realizarlo en VS2008 .. así que continuemos

• Salvar el proyecto en Blend y cambiar o moverse directamente a VS2008 y este presentará un mensaje de confirmación de que el archivo .xaml fue modificado fuera del editor de VS2008. Dar clic en el botón Yes to All

• Ahora es momento de añadir el video al proyecto … El procedimiento es el mismo para cualquier Item … En el Solution Explorer clic en Add > Existing Item … Hay que ver que por default el explorador no muestra archivos de video … así que habrá que buscarlo por su extensión *.avi / *.wmv ó *.*
• Cambiar las propiedades del video Build Action a Content y Copy to Output Directory a Copy Always

• Agregar elvideo al Grid mediante el TAG MediaElement … Hay que hacer notar que el parámetro LoadedBehavoir=”Manual” … de modo que se ejecutará de manera independiente y se puede controlar (en caso de que se quisieran por ejemplo botones de control como Play / Stop / Pause).

• En el archivo Window1.xaml.cs (code-behind) establecer el Play de manera automática al MediaElement al momento de inicializar … mediante … VideoOnSilverlight.Play(); (o como hayamos llamado a nuestro MediaElement)

• Presionar F5 y … Listo .. tenemos un video bajado de YouTube corriendo en Silverlight. (si ya se que no es exactamente lo que hubiera querido .. pero )

Por cierto … el video que baje fue el Trailer de la pelicula New Moon de la Saga de Twilight.

Como punto adicional … recuerdan que dejamos abierto Expression Blend con el proyecto … si cambiamos a este .. nos presentará un mensaje ya que detectó cambios efectuados fuera de la aplicación … bastará con dar clic en botón Yes para ver reflejados los cambios

Conclusión.
Por supuesto que me hubiera gustado que la transición para llevar un video de YouTube … o cualquier .FLV a Silverlight fuera transparente y este último pudiera reproducirlo sin ningún tipo de conversión … pero habrá que esperar a la versión final de Silverlight 3. Por cierto para generar videos F4V en las suites de Adobe … se requiere tener instalada la versión CS4.

Hola .. soy dansalinas … Por fin pude instalar mi Visual Studio 2010 … que aunque de momento no le podré dedicar todo el tiempo que quisiera .. no me queria quedar con las ganas de tenerlo en mi máquina.
La instalación la lleve a cabo en una máquina virtual con XP Professional … la razón de haber usado XP … 1. En Latinoamérica es ma fácil que podamos conseguir un XP para llevar a cabo nuestras pruebas y quería ver que realmente funcionara en este sistema operativo … 2. No tengo un Vista para instalar

Mi intención es mostrar los pasos que seguí para la instalación … desde un inicio .. no solo el Visual Studio 2010.

• La máquina virtual la instalé en un equipo con Vista Home Premium. La máquina virtual que use fue Virtual PC 2007 … configurada con 1 GB de Memória
• A la máquina virtual le instalé Windows XP Professional en Español con SP1
• Actualicé el XP con el SP2 en Español … (SP2 en Inglés)
• Actualicé a Explorer 7 en Español … (IE7 en Inglés)
• Instalación de Windows Installer 4.5 para XP … (en esta página estan los distribuibles para cada versión de sistema operátivo disponible)
• Instalación de Frameworks: 2.0 / 3.0 / 3.5 (Full Package) / 3.5sp1 (Full Package)
• Instalación de PowerShell 1.0 para XP … requiere validación genuine Microsoft Windows … (versión Vista) … es requerido para instalar SQL Express y requiere mínimo del Framework 2.0 para ser instalado
• Instalación de SQL Express 2008 Advanced Services (link directo) … Este proceso instala VS2008 Shell Edition … para proyectos de SQL
• En este momento ya tenía listo todo para instalar el Framework 4 y VS2010 … así que por precaución respalde mi maquina virtual … … ya que entraba en territorios por primera vez recorridos
• Instalación de Framework 4.0 Beta 1
• Instalación de VS2010 Professional Edition Beta 1 - ISO
• FIN

Listo … ya tengo mi maquina virtual con Visual Studio 2010 … por supuesto me llevó el fin de semana la instalación … ya que solo podía dedicarle lapsos de tiempo para ir instalando cada uno de los componentes … e increiblemente .. la instalación resultó sin ningun error.

El proceso de instalación de VS2010 … es practicamente el mismo de la versión anterior. Decidí no instalar ninguna opción relacionada con C++ … pero esto solo por gusto personal .. no debería de interferir en el proceso de la instalación. He aqui algunas mini-pantallas del proceso …

Una vez instalado el VS2010 … y darle un vistazo por primera vez … (sin contar las imágenes que circulan por internet) … la interfaz de inicio … esta desarrollada utilizando WPF …. con formas mas suaves. La interfaz para crear una nuevo proyecto o WebSite … mantiene en escencia opciones similares a la versión anterior … pero visualmente mas agradable. En cuanto al panel de desarrollo ya sea para generar una clase o una página Web … igualmente mantiene la misma estructura que la versión anterior … eso si … mantiene el soporte para desarrollar aplicaciones de los frameworks desde el 2.0 hasta el 4.0. Aqui les dejo una par de pantallas.

Conclusión.

En este post mi intención es la instalación de VS2010 … por eso no agrego información adicional de las nuevas mejoras … además que aún no las conozco de viva voz … así que como comunmente se dice … habrá que picarle … e ir descubriendo las nuevas ventajas y mejoras que promete Microsoft.

Con una noticia importante para el mundo de .NET … y es que a partir del 20 de mayo ya esta disponible a todo el público el Beta 1 de VS2010 y el NET Framework 4. Aunque anteriormente ya estaba disponible como maquina virtual … o la versión CTP … tenemos ya la posibilidad de instalarlos directamente desde la Web o bajarlo como una imágen ISO. Microsoft promete que desarrollaremos aplicaciones de próxima generación más rápido y más fácil que nunca.

Junto con VS2010 se presenta el Framework 4 que a su vez viene acompañado con las nuevas versiones de Lenguajes de Programación: VB 2010 / C# 2010 / C++ 2010 / F# 2010 (Lenguaje de programación multiparadigma para .NET que estará disponible en VS2010. F# soporta programación funcional, POO, y programación imperativa)

Los requisitos de instalación para las versiones de Visual Studio Profesional Beta 1 y Visual Studio Team System Beta 1 son practicamente los mismos para ambos:

-> Sistemas Operativos

• Window Vista (x86 o x64) … excepto Starter Edition
• WIndows XP (x86 o x64) … con SP2 … excepto Starter Edition o Home Edition
• Windows Server 2003 (x86 o x64) … SP1 … en todas sus ediciones
• Windows Server 2003 R2 o posterior (x86 o x64) … en todas sus ediciones
• Windows Server 2008 (x86  o x64) o posterior .. en todas sus ediciones
• Windows Server 2008 R2 RC (x64) Enterprise Edition
• Windows 7 RC (x86 o x64) Ultimate Edition

-> 1024 RAM
-> 3GB disponible en Disco Duro
-> Disco duro de 5400 RPM
-> Directx 9-compatible con resoluciones de 1280 x 1024 o superior

VS2010 ofrece alguna de las siguientes mejoras o inovaciones

• Experiencia de usuario mejorada …  que ofrece una interfaz mas moderna … que hace que la relación usuario vs IDE sea entendida de una manera mas natural
• Programación paralela simplificada incluida como extensiones dentro del NET Framework.
• Para VS Team System 2010 ofrece una Gestión del Ciclo de Vida de un proyecto con nuevas capacidades para todos los roles como Arquitectos … Desarrolladores … Administradores de Proyecto y Testers
• Soporte mejorado para C++ … como bibliotecas que hacen uso de funciones Lambda alineada con el STL (Standard Template Library)
• Soporte para desarrollo de aplicaciones para Windows 7
• Intellisense compatible con Javascript
• Snippets para Javascript y HTML
• One click deployment … que permite una rápida publicación de archivos y ajustes a la configuración del desarrollo al publicar en un sistema de producción
• Soporte completo a Silverlight para el desarrollo de RIA
• Soporte para desarrollo de aplicaciones en la Nube … Windows Azure
• Incorporación al ecosistema que soporta la interacción con IBM DB2 y Oracle

Este solo es un pequeño resumen de las mejoras que ofrece … ahora por supuesto habrá que comprobarlo usando y probando VS2010.

A continuación les enlisto una serie de links relacionados con este suceso.

 Sitio oficial de Visual Studio 2010 con una descripción mas detallada de las mejoras ofrecidas en esta versión.
 Ligas a todos los Betas disponibles que acompañan al lanzamiento de VS2010 Beta 1
A través de un video se explica como descargar e instalar VS2010 Beta 1
Una descripción general de las nueva caracteristicas para el desarrollo de aplicaciones Web con VS2010 Beta 1
El Training Kit para VS2010 y el Framework 4
Tutoriales para VS2010 y el Framework 4
Algunas características destacadas de VS2010
Lo nuevo en Visual Studio 2010
Lo nuevo en Framework 4
Lo nuevo en Visual F# 2010
Lo nuevo en Visual C# 2010
Lo nuevo en Visual Basic 2010
VS2010 Professional Beta 1 Web Installer e ISO
VS Team System 2010 Beta 1 Web Installer e ISO
Ejemplo de WCF y WF para el Framework 4 Beta 1
Una descripción general en video de WPF 4 Beta 1

Conclusión

Seguramente en los próximos días los blogs estarán publicando muchas notas relacionadas con el VS2010 y el Framework 4. Por mi parte durante este fin de semana estaré instalando en una maquina virtual estos 2 productos y publicaré mis primeras impresiones incluyendo el proceso de instalación … y los avatares que pudiera encontrar en el proceso.

Glimmer es un prototipo salido de los Mix Online Labs que hace accesible jQuery a traves de una herramienta visual. El objetivo para Glimmer es bastante simple: Habilitar el poder de  jQuery a través de una herramienta de diseño interactivo. Glimmer esta orientado para diseñadores y desarrolladores.

Entre los puntos a resaltar son el concepto de sencillez para generar funciones basadas en jQuery a través de la herramienta. Actualmente la herramienta solo cuenta con 4 opciones o wizards de creación de código.

1. Image Sequencer
2. Dropdown Menu (hasta 2 niveles)
3. Tooltip Wizard (combina imagenes y/o texto)
4. Custom (genera nuestros propios códigos jQuery sobre una página existente)

Glimmer esta diseñado para crear nuestros propios plug-ins e incorporarlos a la herramienta. De momento no existen disponibles en la red … ya que la herramienta es muy nueva … pero seguramente o al menos así lol espero … estarán disponibles próximamente. (Yo ya estoy trabajando en un par y los podré a disposición en cuanto esten terminados).

Aqui les anexo los links relacionados:

 Liga a la página oficial de Glimmer donde podrán accesar a ejemplos de los 4 wizards existentes actualmente.
 Acceso directo donde podrán bajar ejemplos de Glimmer.
 Desde aqui podrás bajar el instalador y el código fuente. Dentro de los archivos de instalación se encuentra la documentación para crear nuevos Wizards e incorporarlos a la herramienta.

 Aunque no tiene que ver con Glimmer … es una buena página de ayuda para nuestro código de jQuery … ya que muestra a través de ejemplos las funciones disponibles en el API en una estructura jerárquica

Por una lado tenemos a Adobe con una plataforma con muchos años de experiencia basada originalmente sobre herramientas de diseño que ha venido evolucionando en lo que actualmente conocemos como la Plataforma de Desarrollo Flash (Adobe Flash Platform). Por otro lado tenemos a Microsoft con una historia basada en el desarrollo de aplicaciones que ha venido evolucionando hasta su plataforma de desarrollo de .NET a la cual pertenece de alguna manera Silverlight. Mediante estas 2 plataformas es que estan compañias hacen frente al desarrollo de RIA’s… a lo que nos lleva a la eterna pregunta… Cual plataforma es mejor ?

• Usa un lenguaje declarativo basado en XML llamada XAML para la generación de su interfaz, pero con la ventaja que a partir de la versión 2.0 permite el uso de C# y VB.net en Code-Behind haciendo uso del CLR… lo que potencializa significativamente esta herramienta.
• Para el desarrollo de aplicaciones Silverlight podemos utilizar VS2008 (orientado a desarrolladores) y Microsoft Expression (orientado a diseñadores).

• Flex es la herramienta de desarrollo de aplicaciones RIA que una vez compilada usando su SDK de código abierto… da como resultado un archivo .SWF que se ejecuta sobre cualquier navegador usando el FlashPlayer… o para aplicaciones de escritorio utiliza el Adobe Integrated Runtime (AIR).
• Esta basado en MXML… que es su propia extensión de XML… aunque tambien hace uso de ActionScript y permite la expansión utilizando Java. (Recuerdo que en sus origenes se pensó en crear una versión compatible con .NET… pero me quede con las ganas).

Podriamos llenar el post de caracteristicas de cada una de ellas… y haciendo comparaciones y tablas comparativas entre ambas… y al final llegariamos a los mismos resultados de siempre… es decir… para un desarrollador con experiencia en .NET estaría a favor de Silverlight… no importando cuanta evidencia se presente de que Flash es mejor… o igual en el caso de desarrolladores con experiencia en Flash. (y eso que no nos metimos con la plataforma de Java… JavaFX… siendo este un tema oscuro para mi).
Practicamente se pueden desarrollar las mismas aplicaciones utilizando cualquiera de las 2 plataformas… pero entonces que hace mejor una plataforma de otra… y siempre he llegado a la misma conclusión… y son 2 factores: (dondo los factores no son de la plataforma):

1. Creatividad y Usabilidad.
2. Conocimiento de la herramienta.

Aunque he tenido oportunidad de conocer desarrolladores muy creativos… generalmente esta tarea se deja a los diseñadores… sobre todo si tienen experiencia o especialidad en Web y/o diseño de aplicaciones. Aqui el factor que hace la diferencia (en palabras de diseñadores)… es que no se limiten a su conocimiento de la herramienta o plataforma… es decir… que simplemente utilicen su creatividad y conocimiento de usabilidad (navegación del sitio o aplicación)… Ya les tocará a los desarrolladores llevar a cabo la transformación a bites… y esto nos lleva directamente al segundo punto… donde la diferencia radica en el conocimiento y habilidades de uso de la herramienta… no importa si es Flash o Silverlight.

Para terminar me gustaría comentar un punto que considero de mucha importancia… y es el impacto en el mercado de ambas herramientas o plataformas. Debido al tiempo que tiene de existir Flash y al hecho de que originalmente fue diseñada como una herramienta para diseñadores gráficos… es ampliamente conocido por diferentes perfiles… que van desde usuarios ocasionales hasta usuarios expertos… mientras que Silverlight es solo conocido por usuarios expertos o especializados en la materia.
En un ejercicio donde mostré a diseñadores gráficos una página web donde el contenido estaba generado en Silverlight… el 100% los encuestados pensaban que era Flash y solo un 20% habia escuchado la existencia de Silverlight. Mientras que esta misma encuesta la lleve a cabo a usuarios finales (no con conocimientos de sistemas o diseño) y el 40% pensó que era flash… mientras que el restante 60% no sabia que era… y el 100% no sabia de la existencia de Silverlight.
Lo mas preocupante es que el 100% de los diseñadores solo el 20% se interesó en una migración a Silverlight… ya que pensaron que esta herramienta esta 100% orientada a desarrolladores (y ya bastante tienen con aprender Flash, ActionScript, Javascript, CSS, etc).

Conclusión

Opino que ambas plataformas tienen caracteristicas y bondades que las hacen interesantes por si mismas… sin necesidad de compararlas entre si o con cualquier otra… simplemente que cada una de ellas esta orientada a personas con formación o trayectoria profesionales compatible con cada una de ellas.
Importante sería que Microsoft orientará mas la plataforma de Silverlight a los diseñadores y que vaya mas alla de una serie de herramientas de apoyo como lo es Expression… incluso material de aprendizaje para desarrolladores o diseñadores en Flash.

Aqui les dejo algunos links relacionados al tema:

Por supuesto los sites de Silverlight y Adobe Flash Platform
Silverlight vs. Flash. Desde la perpectiva de un desarrollador de .NET
Silverlight vs. Flash. Desde la perspectiva de un desarrollador de Flash.
Desde Microsoft… Silverlight para diseñadores
Las preguntas que se  debiera hacer un Diseñador de Flash a Expression Blend, WPF y Silverlight.
FlexOnRails. Una iniciativa muy interesante (ya hablaremos de ella mas adelante).
Flash & Flex en MVC.