Windows Presentation Foundation en web: aplicaciones de explorador web

Karen Corby
Windows Presentation Foundation
Microsoft Corporation

Octubre de 2005

Se aplica a:
   Componentes del entorno de ejecución de Microsoft .NET Framework 3.0 de septiembre de CTP (compilación de PDC 2005)

Resumen: En este documento se explora el potencial de Windows Presentation Foundation en la Web. Además, analiza las tecnologías detrás de las aplicaciones de explorador web, así como cómo se pueden migrar sus sitios existentes. Está dirigido a personas en el espacio web que están interesados en mejorar sus experiencias basadas en exploradores. (14 páginas impresas)

Contenido

Introducción
WPF en la Web: Aplicaciones de explorador web
Obtención de .NET Framework 3.0 en equipos
Implementación
Espacio aislado de Windows Presentation Foundation
XAML flexible
Migración de sitios existentes
Conclusión
Recursos adicionales

Introducción

La creación de una aplicación web moderna es complicada. Con todas las opciones en línea, la barra de experiencias web atractivas está aumentando continuamente: los objetos visuales deben ser más impresionantes. La funcionalidad debe ser más compleja. Y tener una experiencia diferenciada que atrae y conserva a los clientes es más importante que nunca.

El desafío técnico de crear una aplicación web de este tipo es importante. Por un lado, necesitas una tecnología lo suficientemente potente como para admitir tus objetivos visuales, ya sea 3D, animaciones complejas o tipografía mejorada. Por otro lado, esa misma tecnología debe habilitar la lógica de la aplicación. Si elige una solución que se basa en el servidor, los usuarios sufren la latencia de la comunicación posterior. Si en su lugar usa una implementación del lado cliente, se enfrenta al obstáculo de desarrollar en un lenguaje de scripting.

Muchas veces, los desafíos técnicos anteriores ya se resuelven en la versión de escritorio de la aplicación. Sin embargo, las versiones en línea tienen dificultades para aprovechar las soluciones de escritorio porque deben crearse en una tecnología web.

Windows Presentation Foundation (anteriormente denominado "Avalon"), parte de Microsoft .NET Framework 3.0, ofertas, proporciona compatibilidad con dos tipos de aplicación: aplicaciones independientes y Aplicaciones de explorador web (EDT). Las aplicaciones de explorador web, pronunciados como "wuba", son aplicaciones solo en línea que se ejecutan en el explorador y no están instaladas. Estas aplicaciones se ejecutan en un espacio aislado de seguridad y aprovechan la eficacia de la plataforma de Windows Presentation Foundation para la Web.

En este documento se describe el potencial de WPF en el explorador, las tecnologías detrás de las aplicaciones de explorador web y cómo puede migrar los sitios existentes. Está dirigido a personas en el espacio web que están interesados en mejorar sus experiencias basadas en exploradores.

Nota Si está interesado en WPF instalado, las aplicaciones independientes que tienen una implementación similar a la web, debe explorar la implementación de ClickOnce.

WPF en la Web: Aplicaciones de explorador web

Las aplicaciones de explorador web (EDT) aportan la eficacia de Windows Presentation Foundation a la Web. En esta sección se resalta lo que los EDT tienen que ofrecer e identifica algunos de los escenarios que son favorables a las aplicaciones de explorador web.

Qué ofrecen las aplicaciones de explorador web

Como un sabor a las aplicaciones de Windows Presentation Foundation, las aplicaciones de explorador web ofrecen muchas ventajas:

• XAML. WPF presenta un nuevo modelo de programación declarativo denominado "Lenguaje extensible de marcado de aplicaciones" o XAML. Dado que es un reflejo directo de las API de la plataforma subyacente, los desarrolladores pueden aprovechar todas las ventajas de un sistema de programación tipado. Esto incluye mensajes de error de marcado descriptivos durante la compilación, así como más transparencia en lo que se necesita para proporcionar "enlaces" de interfaz de usuario.

  <Application x:Class="MyApp" />
  

  Figura 1. Clase de aplicación definida en XAML

• **Enlace de datos. ** El enlace de datos proporciona una forma flexible, declarativa y sólida de obtener datos en la interfaz de usuario; permite a un autor de la aplicación mantener separadas la lógica de negocios y la interfaz de usuario.  Dado que los controles de WPF admiten el enlace de datos a información en un servidor, los desarrolladores web pueden consumir de forma asincrónica sus datos y visualizarlos de maneras eficaces e interesantes mediante un sistema de plantillas de datos enriquecido.

• 3D. El sistema WPF 3D está totalmente integrado en la plataforma. No es más difícil pintar una forma 3D con un color sólido que pintar esa misma forma 3D con un vídeo o un párrafo de texto.

  

  Ilustración 2. 3D en el explorador

• Documentos de flujo. A diferencia de los documentos fijos, los documentos fluyen dinámicamente el contenido en función del tamaño de la ventana, la resolución del dispositivo, la preferencia del usuario, etc. Esto proporciona a los usuarios una experiencia de lectura superior y más personalizada.

  

  Figura 3. Mismo documento de flujo, diferentes tamaños de ventana y fuente

• Texto. WPF desbloquea las características de tipografía enriquecidas disponibles en fuentes OpenType (tanto TrueType como CFF). Esto proporciona una mejor representación de texto con los últimos avances en ClearType, incluido el espaciado de sub píxeles y el suavizado de contorno de dirección y.

  

  Figura 4. Tipografía en WPF

• Animaciones. El sistema de animación WPF proporciona un método flexible para especificar cambios complejos y sincronizados en la escena. La integración completa con los sistemas de propiedades y eventos, el enlace de datos, el estilo y las plantillas permite una compatibilidad profunda con aplicaciones enriquecidas e interactivas.

  

  Figura 5. Animación de tarjetas de blackjack en 3D

• Gráficos vectoriales. El uso nativo de gráficos vectoriales de WPF permite funcionar a plena fidelidad visual (con suavizado de contorno brillante) a cualquier escala o resolución.

  

  Figura 6. Mismo gráfico vectorial, tamaños de ventana diferentes

• Aceleración de hardware. El hardware gráfico de hoy está mejorando y mejor todo el tiempo. Los EDT pueden aprovechar la compatibilidad con la aceleración de hardware de WPF para crear nuevos niveles de complejidad visual y dejar la CPU libre para los requisitos informáticos de la aplicación.

• Espacio aislado de seguridad. Las EDT se ejecutan en un espacio aislado de seguridad que limita los tipos de acciones que pueden realizar. Esto significa que las EDT pueden hacer cosas como representar la interfaz de usuario, hablar con el sitio de servidores de origen, escribir y leer en el almacenamiento aislado, etc. Sin embargo, no pueden hacer cosas más peligrosas, como acceder al registro, leer o escribir directamente en el sistema de archivos, etc. (para obtener más detalles, consulte la sección espacio aislado de este documento).

• Implementación sin intervención táctil. Dado que las aplicaciones de explorador web son aplicaciones no instaladas en espacio aislado, no requieren interacción del usuario para iniciarse: no es necesario hacer clic en un aviso de seguridad ni en un mensaje de barra de información. Acaban de correr.

• Lenguajes de programación de .NET Framework. WPF se basa en .NET Framework. Por lo tanto, los EDT reciben todas las ventajas de ser aplicaciones administradas fuertemente tipadas. Esto incluye el uso de lenguajes de programación de .NET Framework ( C#, Visual Basic, etc.), la comunicación nativa con los servicios web ASMX y el acceso a las muchas herramientas disponibles para la plataforma de .NET Framework.

• Mismo modelo de programación para escritorio/Web. Muchos equipos de productos se ven obligados a crear dos versiones independientes de sus aplicaciones: una versión DHTML web y una versión win32 de escritorio. Dado que WPF ofrece compatibilidad con aplicaciones en línea e instaladas, las aplicaciones de escritorio y web pueden compartir bases de código. Para compilar la aplicación como una aplicación de explorador web, basta con usar la plantilla incluida en Visual Studio 2003 o establecer tres propiedades en el archivo de proyecto:

  <HostInBrowser>True</HostInBrowser>
  <Install>False</Install>
  

  Nota La versión web de la aplicación también debe deshabilitar cualquier funcionalidad no permitida en el espacio aislado.

• Designer y división del desarrollador. WPF minimiza el contrato entre la interfaz de usuario y la lógica, lo que permite a los desarrolladores y diseñadores centrarse en lo que mejor hacen. Además, al encapsular conceptos de diseño eficaces (como la 2D enriquecida, la animación y el diseño dinámico) y exponerlos en un formato de marcado altamente herramientas, WPF permite al diseñador expresar directamente sus mejores y más ideas creativas y convertirse en un creador independiente de la interfaz de usuario.

Escenarios de aplicación para aplicaciones de explorador web

Las aplicaciones de explorador web ofrecen muchas ventajas a los desarrolladores web. Como tecnología de Windows, también pueden mejorar considerablemente la experiencia del cliente en máquinas Windows XP, Server 2003 y Vista. Sin embargo, dependiendo del contenido de la aplicación y de los objetivos de alcance del cliente, es posible que los EDT no sean la tecnología más adecuada para usted. En esta sección, analizaremos los escenarios en los que las aplicaciones de explorador web ofrecen una gran ventaja.

Escenarios en los que se recomiendan las aplicaciones de explorador web

WPF puede ofrecer muchas ventajas de desarrollo y experiencia del usuario. Las aplicaciones de explorador web se recomiendan en estos escenarios:

• Lectura y visualizaciones de contenido enriquecido. WPF puede habilitar una mejor experiencia para los sitios basados en contenido controlados por 3D, animaciones o texto enlazados a datos asincrónicamente. También pueden ser más fáciles de compilar: los objetos visuales se pueden definir en XAML, que los diseñadores pueden crear directamente o crear mediante herramientas como Expression Interactive Designer. En el caso de los sitios que almacenan contenido como XML, la creación de una transformación del lado servidor en XAML y HTML es de bajo costo y alto impacto.
• Juegos en línea y modelado. Los sitios como los juegos en línea y el modelado científico requieren motores lógicos o computacionales sofisticados. Dado que los EDT usan código administrado para impulsar las aplicaciones, la creación de una lógica complicada del lado cliente viene con mayor facilidad. Y, dado que el trabajo pesado puede producirse en el cliente con información almacenada en caché en el almacenamiento aislado, el usuario no necesita sentir la latencia de los postbacks web.
• Data Flow aplicaciones de administración y productividad. Al igual que las aplicaciones de juegos, el flujo de datos y las aplicaciones web de productividad están controladas por lógica. Además, estas aplicaciones suelen requerir la interacción del servicio web. Dado que WPF se basa en .NET, puede usar la infraestructura de servicios web ASMX proporcionada. No es necesario crear su propio mecanismo para comunicarse entre aplicaciones y servicios web.
• Dos versiones de la aplicación: Escritorio y Web. En lugar de usar dos tecnologías de aplicaciones diferentes, los equipos de productos pueden aprovechar la misma base de código mediante la creación de una aplicación wpF Web Browser y una aplicación instalada de WPF.
• Aplicaciones corporativas. La implementación de cualquiera de las aplicaciones anteriores es incluso más sencilla en empresas donde los administradores controlan el entorno de hospedaje. Esto puede incluir tener instalado previamente .NET Framework 3.0 en todos los equipos cliente o personalizar la directiva de seguridad para las aplicaciones de intranet.

Escenarios en los que se deben considerar las aplicaciones del explorador web

A continuación se muestran algunos escenarios en los que se deben tener en cuenta el uso de aplicaciones de explorador web. Dependiendo de la importancia relativa de la complejidad visual, la facilidad de desarrollo y el alcance del cliente, puede ser atractivo crear una experiencia de WBA preferida además de una versión HTML de alcance más amplia.

• Campañas de marketing. Con WPF, los diseñadores web pueden crear una campaña de marketing envolvente e interactiva que atrae a clientes potenciales. En muchos casos, puede ser útil crear una experiencia más atractiva para los usuarios de Windows mediante la creación de EDT.
• Comercio electrónico. En función de la base de clientes, ofrecer una experiencia diferenciada para los usuarios de .NET Framework 3.0 puede ser ventajoso para la marca y el negocio de una empresa.

Obtención de .NET Framework 3.0 en equipos

La ubicuidad de esta nueva plataforma es una consideración importante para los desarrolladores que buscan tener como destino .NET Framework 3.0. Tenemos previsto abordar la ubicuidad de .NET Framework 3.0 de varias maneras.

Para Windows XP SP2 y Server 2003, .NET Framework 3.0 estará disponible como descarga en Windows Update. Actualmente estamos explorando formas de hacer que este punto de instalación sea más reconocible para estos usuarios.

Para la versión beta de PDC de Windows Vista, los componentes en tiempo de ejecución necesarios para ejecutar Windows Presentation Foundation aplicaciones no se instalan de forma predeterminada. Sin embargo, un acceso directo proporciona un puntero para la instalación desde el disco de instalación. La experiencia de instalación de Windows Vista no es final y está sujeta a cambios para futuras versiones beta.

Implementación

Sacar aplicaciones a los clientes es una parte fundamental de cualquier historia de la plataforma de aplicaciones. En esta sección se profundiza en los aspectos de implementación de aplicaciones de explorador web, incluida la tecnología de implementación, el hospedaje de exploradores y la detección de WPF.

ClickOnce

ClickOnce es una nueva tecnología de .NET Framework que ofrece implementación similar a web. Cuando un usuario hace clic en un vínculo, los archivos de aplicación se descargan e instalan en la máquina. Las ejecuciones posteriores siempre inician la versión publicada más reciente de la aplicación, lo que proporciona un artículo de control de versiones sin problemas.

Además, la instalación de la aplicación ClickOnce en sí es aislada, no impactante y reversible. Las aplicaciones no pueden asumir dependencias en otras aplicaciones (solo ensamblados de caché global de ensamblados) y la instalación no puede afectar al estado de la máquina. Esto significa que cuando se desinstala la aplicación (ya sea explícitamente a través de Agregar quitar programas o al salir de la caché de la aplicación ClickOnce), se quita la totalidad de la aplicación.

ClickOnce también proporciona a las aplicaciones un modelo de implementación de seguridad basado en seguridad de acceso de código. (Esto se describe más adelante en la sección de espacio aislado).

Las aplicaciones de explorador web se almacenan en caché, solo en línea, aplicaciones ClickOnce. Además de las ventajas anteriores, no se instalan permanentemente en la máquina. Sin embargo, dado que se almacenan en caché, las segundas ejecuciones son más rápidas y eficaces.

Nota Las aplicaciones wpF que desean instalarse y ejecutarse fuera del espacio aislado pueden seguir siendo aplicaciones ClickOnce independientes y aprovechar las características de implementación similares a web. Para obtener más información sobre ClickOnce, consulte las notas del producto ClickOnce.

Hospedado en el explorador

Con el nombre aptly, las aplicaciones del explorador web solo se ejecutan en el explorador. Pueden aparecer de nivel superior en el explorador o hospedados en un IFrame HTML.

La aplicación no tiene que compilarse de forma diferente en función de dónde se hospede en el explorador.

Ilustración 7. Aplicaciones de explorador web en el explorador

Exploradores compatibles

De forma predeterminada, las aplicaciones de explorador web se pueden ejecutar en Internet Explorer 6 o versiones posteriores, así como en cualquier explorador que hospede el control WebBrowser de Microsoft.

El hospedaje WBA de Internet Explore se ha habilitado mediante la creación de un host de objeto de documento Windows Presentation Foundation. Es posible que terceros puedan crear un complemento (basado en el modelo de extensibilidad de un explorador determinado) que hospeda el control WebBrowser. Puede encontrar más información sobre cómo hospedar el control WebBrowser en Recursos adicionales.

Determinar cuándo se instala WPF

Para determinar cuándo entregar una experiencia mejorada a los usuarios de .NET Framework 3.0, puede inspeccionar la cadena del agente de usuario para determinar si WPF está instalado en el equipo. El SDK proporciona un artículo útil que describe cómo hacerlo.

Espacio aislado de Windows Presentation Foundation

Con la prevalencia de malware y virus distribuidos por Web, los usuarios se han confundido cada vez más cuando se enfrentan a un aviso de seguridad. Muchos "clics" y se queman. Otros se niegan a "hacer clic en Aceptar" y evitan instalar cualquier cosa que encuentren en la Web o en el correo electrónico. Por lo tanto, hay muchas ventajas para proporcionar a los clientes web una experiencia segura y gratuita.

Las aplicaciones de explorador web se ejecutan en un espacio aislado de seguridad limitado por su ubicación de implementación. De forma predeterminada, todos los EDT se ejecutan en el espacio aislado de Internet. Dado que están aislados y no están instalados, las aplicaciones de explorador web no requieren un aviso de seguridad.

Cómo se creó el espacio aislado

El espacio aislado de WPF se crea mediante la seguridad de acceso al código (CAS), el marco de seguridad de .NET. Este modelo de seguridad usa una combinación de conjuntos de permisos y zonas de implementación para determinar los privilegios de una aplicación. Consulte el artículo Seguridad de acceso al código para obtener más información sobre CAS.

Características del espacio aislado

El espacio aislado de Internet de WPF actual abarca un amplio conjunto de características que permite a las aplicaciones de explorador web aprovechar gran parte de las ofertas de la plataforma. En la lista siguiente se resalta este conjunto de características.

* Próximamente en la versión Beta 2 de Windows Presentation Foundation.

No todas las características de la plataforma están disponibles en el espacio aislado. es así por diseño. A continuación se muestran ejemplos de características no habilitadas en el espacio aislado de Internet beta 1.

Nota Debido a la implementación basada en zona, las aplicaciones de intranet pueden solicitar que se ejecuten en un espacio aislado ligeramente más amplio que las aplicaciones de Internet. Esto incluye la capacidad de iniciar nuevas ventanas o acceder a un conjunto más completo de formatos de Portapapeles.

Extensión del espacio aislado

El mecanismo de extensibilidad en WPF es el mismo que el que se encuentra en .NET Framework. Un ensamblado firmado con nombre seguro y de plena confianza se puede instalar en la caché global de ensamblados (GAC). Al colocar el atributo AllowPartiallyTrustedCallers (APTCA) en el ensamblado, el autor abre las API públicas del ensamblado en cualquier aplicación de explorador web.

La decisión de tomar un ensamblado APTCA no estrivial. Implica una sólida aprobación de la seguridad del archivo DLL, así como la idoneidad del conjunto de API para los llamadores de espacio aislado. Agregar un ensamblado a la GAC requiere una instalación msi y un aviso de seguridad.

Al final de este artículo, le interesa obtener más información sobre cómo escribir ensamblados de APTCA GAC' ed. Consulte Recursos adicionales al final de este artículo.

XAML flexible

Los archivos XAML dinámicos son archivos de solo marcado que usan XAML para definir el contenido visual que se va a representar. No se compilan con una aplicación, pero existen como archivos discretos en un servidor web. Al igual que los EDT, se pueden hospedar de nivel superior en el explorador o en un IFrame HTML. XAML flexible siempre se ejecuta en el espacio aislado de Internet.

Dado que XAML flexible es de solo marcado, se limita a la representación de solo contenido. Esto significa que XAML flexible no puede admitir elementos como controladores de eventos de botón o conservar el estado de la aplicación en el cliente. Sin embargo, son una forma eficaz y de bajo costo de crear objetos visuales wpF dinámicos generados por el servidor.

Figura 8. Flow Document Loose XAML hospedado en IFrame HTML

Cómo migrar los sitios existentes

Aunque puede ver las ventajas de las aplicaciones de explorador web, es posible que no sea técnica o financieramente posible convertir toda la presencia web en Windows Presentation Foundation. En esta sección se describe cómo puede agregar WPF incrementalmente al espacio web.

Agregar XAML flexible

Puedes agregar XAML flexible para crear islas de contenido WPF enriquecido. Pueden ser "páginas" completas o marcos de texto enriquecido, 3D, etc. Por ejemplo, un sitio podría agregar un paseo virtualizado de su producto en XAML y, a continuación, navegar a una página de información del producto HTML. O bien, una enciclopedia en línea podría mantener su estructura basada en HTML de publicidad mientras se muestra el contenido del artículo en documentos de flujo XAML. (Si una enciclopedia almacenaba su contenido en secuencias XML, esto es aún más grande porque la transformación de XML a XAML es de bajo costo).

Colocar EDT en IFrames

Es posible que quieras crear "islas" más interactivas del contenido de WPF que admite XAML flexible. Este contenido requeriría código para enlazar eventos de interfaz de usuario como clics de botón o envío de formularios. Las pequeñas aplicaciones de explorador web hospedadas en IFrames podrían formar islas de WPF inteligentes.

Creación de un sitio mixto

Es posible que tome el paso y decida migrar la infraestructura real del sitio web a una aplicación web grande (o una serie de centradas). Sin embargo, es posible que no tenga tiempo o recursos para mover todo el sitio a WPF. Puede aprovechar las implementaciones existentes apuntando un marco de WPF a una página HTML en el servidor de hospedaje. Por ejemplo, si no ha creado un foro de chat de WPF, puede hospedar la versión basada en HTML existente dentro de una WBA.

Comunicación entre HTML y WPF

Tiene varias opciones para habilitar la comunicación entre HTML hospedado en WPF o WPF hospedado en HTML:

1. Use el servidor como mediador para la comunicación (solicitudes web HTTP).
2. Aproveche los parámetros de URI en el URI html o WBA hospedado.
3. Use cookies de Internet Explorer propias.

Al implementar una o una combinación de las soluciones anteriores, puede crear una forma orgánica de crear una experiencia de WPF para los usuarios de .NET Framework 3.0.

Conclusión

Las aplicaciones de explorador web aportan el potencial de Windows Presentation Foundation a la Web. Habilitan visualizaciones de primera clase al proporcionar las herramientas para crear la lógica de aplicación auxiliar. La integración flexible de XAML y el explorador estrecho proporcionan formas eficaces de migrar sitios existentes. Junto con una historia de implementación sin problemas y un espacio aislado de seguridad, los EDT son una opción eficaz de tecnología web.

Recursos adicionales

1. Artículo clickOnce de MSDN Magazine
   Descarga a petición
2. Guía del desarrollador de .NET Framework: Seguridad de acceso al código
   Directiva de seguridad predeterminada
   Configuración de la directiva CAS en máquinas
3. Artículo de hospedaje de control de WebBrowser
   Aplicación MFC de ejemplo que hospeda el control WebBrowser
4. Implementación de Microsoft .NET Framework versión 3.0 (detección de .NET Framework 3.0 y versiones anteriores)
5. Trabajar con ensamblados y la memoria caché global de ensamblados
6. Ensamblados de .NET Framework y el atributo AllowPartiallyTrustedCallers
7. Realización de tareas de almacenamiento aislado