El Futuro de las interfaz de usuario WPF Ethel García-Simón Matachana Technology Specialist Microsoft Microsoft Ibérica ethel@microsoft.com 1

Diseño con Expression Blend Microsoft Surface Agenda ¿Qué es la UX? Introducción a WPF Características XAML Escenarios Desarrollo y Despliegue Diseño con Expression Blend Microsoft Surface

¿Qué es la UX? 3

¿Qué es la experiencia de Usuario? 4

¿El diseño importa?

Objetivos de la User eXperience Cumplir con las guías de Requisitos de las métricas ROI UX no reconocida como Un requisito fundamental Métricas ROI emergentes Desarrollo de interfaces Complejas de manera simple

A S R Mapa de tecnologías Más usuarios Más fidelidad Alcance Seguridad Más dispositivos Más canales Sinergias RSS Gadgets Windows Live Media Center A Alcance S Más usuarios WCF CardSpace Seguridad R WPF AJAX Riqueza Más fidelidad Facilidad de uso Productividad Creación de marca

RSS Primer nivel de fidelización Mecanismo push básico Heredero de las newsletters Integrado en IE 7 y Vista Previa exposición por metadatos

Servicios accesibles desde el escritorio Gadgets Servicios accesibles desde el escritorio Impacto mucho mayor que RSS Generador de visitas Fidelización Bajo coste Desarrollo sencillo Marketing gratuito

La extensión de Windows en Internet Servicios expuestos Windows Live La extensión de Windows en Internet Servicios expuestos Search Maps … Mejorar el alcance Live gadgets Messenger

Windows Media Center Exponer servicios en Windows Media Center Llegar al salón de la casa Gran alcance 50% ventas MCE Capable 50% 40% 30% 10% 0% 12/04 2/05 4/05 8/04 8/05 6/05 20% MCE Mix of US Retail Consumer PC Sales Source: Current Analysis, 9/05 10/04

WPF 13

Windows Presentation Foundation Tecnología IU estratégica de Microsoft Plataforma y motor Lo mejor del Web y Windows Uso de GPU para alto rendimiento Unificación Formularios 2D / 3D Video / imágenes Tipografía / Documentos Animaciones Speech Silverlight Subconjunto multiplataforma Multinavegador

Arquitectura WPF Application Services Deployment Services Databinding USER INTERFACE SERVICES XAML Accessibility Property System Input & Eventing BASE SERVICES DOCUMENT SERVICES Packaging Services XPS Documents Animation 2D 3D Audio Imaging Text Video Effects Composition Engine MEDIA INTEGRATION LAYER Controls Layout 15

XAML 16

XAML = Extensive Application Markup Language ¿Qué es XAML? XAML = Extensive Application Markup Language Lenguaje declarativo Código y diseño separados Fácilmente editable desde herramientas <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET 17

Colaboración diseñador-programador Microsoft Tools para diseñadores y desarrolladores Programación declarativa con XAML Herramientas de 3os (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Con XAML, diseñadores y programadores pueden optimizar su colaboración El diseñador diseña… El programador añade la lógica 18

Características WPF 19

Accesibilidad Accessibility Best Practices Assistive Technology and Test Automation (Client) UI Automation Core Infrastructure WPF Application (Provider) Client-side API (.NET Managed API) Provider-side interface definitions (.NET Managed API) Accessibility Best Practices Enable programmatic access, which is supported by WPF common controls via UI Automation API Support keyboard access, such as access keys and logical tab order Support system metrics for user settings, such as high contrast and DPI display Create a multi-modal interface, not relying on visuals alone to convey information 20

Data Binding UI can be bound to CLR objects and XML Binding Target Binding Source Dependency Object Object Dependency Property Property TwoWay OneWay OneWayToSource Layout & Databinding <StackPanel> <Label>Select A Customer</Label> <ListBox Name="myListBox" Background="HoneyDew" ItemsSource="{Binding {StaticResource myDataSource}}" </ListBox> </StackPanel> UI can be bound to CLR objects and XML Dependency properties can also be bound to ADO.NET and objects associated with Web Services and Web properties Sort, filter, and group views can be generated on top of the data Data templates can be applied to data 21

2D Graphics, 3D Graphics, Imaging 22

ClearType & Antialiasing Sub-pixel positioning & natural widths 23

New Fonts For WPF In Vista 24

Audio & Video Formats: WMV, MPEG, Some AVIs <Border Width="400" BorderBrush="Green" BorderThickness="9"> <StackPanel> <MediaElement Source="aero.wmv" /> <Button>Hello</Button> </StackPanel> </Border> Formats: WMV, MPEG, Some AVIs Can be synchronized with animations Windows Media Foundation used to instantiate playback machinery into a DirectShow graph 25

CPU y aceleración por Hardware Sony VAIO U71 CPU Toshiba M200 GPU Toshiba 72MX195 6” 800 x 600 12” 1400 x 1050 72” PixelPure AT™ 26

New Document Technologies 27

Características WPF 28

Escenarios WPF 29

Despliegue WPF Ensamblado .NET Aplicación XBAP Loose XAML Documento Ejecutable tradicional Setup, ClickOnce Aplicación XBAP Dentro del navegador Modelo de navegación integrado con browser Loose XAML Renderización directa en browser Opciones interesantes: ASP.NET / XML + XSL Documento Formato de documento XPS = Subset XAML

Escenarios clave Próxima generación de aplicaciones para Windows Smart Client: Aplicaciones de escritorio Aplicaciones web (XBAP = XAML Browser Application) Implantación con ambos métodos Experiencias Smart Client Diferenciales Experiencias web estándar Aplicaciones LOB / Formularios 31

Resumiendo, WPF… Aporta experiencias de usuario revolucionarias Aumenta la productividad de diseñadores y programadores Permite una implantación flexible de la aplicación Eleva el potencial de .NET en el desarrollo de aplicaciones 32

Recursos para aprender WPF WPF en Windows Vista Developer Center http://msdn.microsoft.com/windowsvista/building/presentation/ WPF/.NET Framework 3.0 Community Site Microsoft Expression www.microsoft.com/expression 33

Aplicaciones 34

WPF in Real 35

36

Muchas gracias !! ethel@microsoft.com 37