creando interfaces espectaculares

23
CREANDO INTERFACES EXPECTACULARES Julio Casal John Galt Solutions [email protected] days Web

Upload: juliocasal

Post on 22-Jun-2015

186 views

Category:

Documents


0 download

DESCRIPTION

How to use Microsoft Expression Studio to create and deliver great user experiences.

TRANSCRIPT

Page 1: Creando Interfaces Espectaculares

CREANDO INTERFACES EXPECTACULARESJulio CasalJohn Galt [email protected]

daysWeb

Page 2: Creando Interfaces Espectaculares

AgendaAgenda

Microsoft y UXVistazo a las Plataformas UX de Microsoft Introducción a Expression StudioWPFE/E

Page 3: Creando Interfaces Espectaculares

UX

la efectividad, eficiencia, y satisfacción que un usuario percibe al interactuar con la compañía y

sus productos o servicios

mucho más que una IU simpática

Incluye a la IU como componente clave

3

Feb 2007

Page 4: Creando Interfaces Espectaculares

Retos de UX para Clientes Enriquecidos

Calidad de Video Acercamiento al Cliente

Soporte a la Plataforma

Soporte

Ancho de Banda

Escalabilidad

Facilidad de Descubrir

Costo Facilidad de UsoInteractividad

Servicio de Publicidad

Tamaño del Cliente

Formatos A/V

Tamaño

Tiempo a Mercado

Pruebas

Administración de Derechos

Interoperabilidad

QoS

Puesta en Producción

Propiedad de IP

Ubiquidad

Facilidad en el Desarrollo

ReporteríaEstándares

4Feb 2007

Page 5: Creando Interfaces Espectaculares

Web

Clien

te

Experiencia Fascinante

Windows Vista .NET Framework 3.0

(w/WPF)

Gran ExperienciaNavegador + “WPF/E”

Buena ExperienciaNavegador + ASP.NET

AJAX

Fu

ncio

nal U

X S

up

eri

or

Plataforma de Aplicaciones Microsoft Tecnologías para UX de Microsoft

Plataforma de Aplicación de Microsoft

SQL ServerCommerce Server

IISASP.NET

Windows MediaWindows Server

Office

Feb 2007 5

Plataforma de UX Punto a Punto de Microsoft

Page 6: Creando Interfaces Espectaculares

Diseñador

Look, comportamiento, marca y conexión

emocional

DesarrolladorFuncionalidad, puesta en

producción, datos, seguridad, integridad

operacional

Unificando el Proceso de Diseño / Desarrollo

6Feb 2007

Page 7: Creando Interfaces Espectaculares

C++C#

VB.NET

PapelJPG / TIFF

PSDPPT

MOV / WMV

Sin Estándares‘Código Sucio’

Maquetas

XHTMLCSS / XSLTXML

ASP.NETAJAX

Diseñador

Desarrollador

Unificando el Proceso de Diseño / Desarrollo

7 Feb 2007

XAML

Page 8: Creando Interfaces Espectaculares

Presentamos

Expression Studio

8Feb 20078 Microsoft Confidential – NDA Required

Page 9: Creando Interfaces Espectaculares

Ya sea que estés diseñando sitios web enriquecidos basados en estándares, experiencias fantásticas en el escritorio, o administrando contenido digital, las herramientas profesionales de diseño Expression le dan la flexibilidad y libertad de convertir su visión en realidad.

La herramienta profesional de diseño

Web

La herramienta profesional de diseño

Interactivo

La herramienta profesional de diseño

Gráfico

La herramienta profesional deAdministración

de Medios

9 Feb 2007

Page 10: Creando Interfaces Espectaculares

Expression Blend

Tu Caja de Herramientas Creció– Diseñe aplicaciones para

Windows fantásticas que combinan lo mejor de la web y del escritorio

– Colabore con desarrolladores usando Visual Studio para un nuevo nivel de productividad diseñador - desarrollador

Arte, Conoce la Ciencia– Combine un espectro

completo de elementos incluyendo arte de vectores, imágenes de pixeles, texto de alta calidad, video y contenido realmente 3D

– Caja de herramientas completa con controles avanzados y contenedores para construir interfaces de usuario innovadoras

Vaya Más Allá del Navegador– Haga uso de todo el poder

de Windows Vista, desde el escritorio hasta el navegador

– Entregue experiencias de usuario excepcionales con gráficos enriquecidos, animaciones e interfaz gráfica interactiva

10 Feb 2007

Page 11: Creando Interfaces Espectaculares

Expression Design

Expanda su Portafolio– Diseñe elementos de IU

para aplicaciones Windows

– El compañero perfecto para Expression Blend

Diseñado para Diseñar– IU moderna creada

desde cero pensando en el diseñador profesional

– Herramientas poderosas para gráficos de vectores y efectos no destructivos

Su Visión, No Comprometida– Asegure integridad del

diseño gracias a flujo de trabajo XAML de punto a punto

– Exporte sus diseños visuales como código XAML listo para usarse en diseño de interfaces y skinning de controles

11 Feb 2007

Page 12: Creando Interfaces Espectaculares

Expression Media

Tome control de sus Medios– Administre todos sus

medios en un lugar con anotaciones extensivas, metadatos, búsqueda y navegación (aún fuera de linea)

– Soporte para más de 100 formatos de medios diferentes y tipos de archivo, incluyendo imágenes, fuentes y video

Su Flujo de Trabajo Mejorado– Renombre, convierta y

procese archivos rápidamente, y use búsquedas poderosas para encontrar y obtener los archivos que necesita

– Edite imágenes y mantenga registro de los cambios con control de versiones y vigilancia de carpetas

La presentación lo es Todo– Exporte archivos a formatos

múltiples, construya slide shows y videos o cree galerías Web profesionales

– Incluye Expression Media Encoder, para conversión, mejora y compresión de video web enriquecido

Feb 200712

Page 13: Creando Interfaces Espectaculares

Diseñando una UX Enriquecida Álbum de Fotos

Page 14: Creando Interfaces Espectaculares

Presentando Microsoft ”WPF/E”

14 Feb 2007

Aplicaciones EstándarUsando programación estándar del navegador (Java Script)

Aplicaciones AvanzadasUsando código administrado

Una Mejor Experiencia Web– Rendimiento dramáticamente

mejorado para aplicaciones habilitadas con AJAX

– Imágenes de vectores, texto, animación, audio y video

– Soporte Multi-navegador, Windows y Mac (Intel y PPC)

– Más fácil de descubrir y buscar– Experiencias de mayor fidelidad

Más Productivo– Consistente con Estándares Web

existentes, se comporta como el Web– Se integra con inversiones Web

existentes (cliente/servidor)– Aproveche todo el poder de la

plataforma Microsoft incluyendo herramientas para desarrolladores y diseñadores

– Modelo de controles extensible que hace que agregar contenido y comportamiento enriquecido sea más simple

– Combine e incorpore servicios y datos de cualquier lugar

– Soporta flujo de trabajo escalable entre diseñadores y desarrolladores

Eficiente y Efectivo– Instanción en cliente

pequenia, bajo demanda (~2MB)

– Re-use fácilmente sus habilidades existentes para construir aplicaciones de nueva generación

– Entrega efectiva en costos de audio/video en vivo y bajo demanda con la plataforma ganadora del Emmy Windows Media

– Protección de contenido opcional para entrega de medios enriquecidos

Page 15: Creando Interfaces Espectaculares

UX Web EnriquecidaWPF/E

Page 16: Creando Interfaces Espectaculares

Arquitectura “WPF/E”

Plug-in Navegador

.NET Framework

Motor de Ejecución – C#, VB.NET

Librerías del Framework

BCL Net XML Data

Plug-in liviano para el navegadorRuntime de presentación nativa

Gráficos 2D interactivos basados en software, texto, medios y soporte para codecs de video incluido

Video and audio interactivosRuntime para medios Cross-platform independienteVideo interactivo para anuncios y contenido enriquecidos

El formato de presentación markup es un subconjunto de XAML

Soporta tanto DOM Nativo como DOM Javascript

CLR y el FrameworkSubconjunto del CLR completo de escritorio, subconjunto de librerías del framework y WPFSeguridad simplificada, SxS

Runtime de Presentación

Núcleo de Presentación

Medios A/V (WMV, WMA, MP3)

XAML (subconjunto de WPF)

API DOM NativaAPI DOM

JavaScript

16Feb 2007

Paquete de ContenidoImg.

Fuen.

XAML

Medio

Medios Streaming

Cód.

Systemas Operativos

• Windows Vista• Windows XP SP2

+• Windows Server

2003• Mac OS X

10.4.8+

Platformas de Navegador• Internet

Explorer 5.5+• Firefox 1+,

Mozilla 1+• Safari

… otras solicitudes pendientes del cliente

Page 17: Creando Interfaces Espectaculares

Escenarios Ejemplo “WPF/E”

Contenido Interactivo, medios y Redes Sociales•Escenarios soportados por Anuncios y pague por ver; directo del proveedor•Video c/ overlays, actualización dinámica;video rectangular y no rectangular con inserción de anuncios, interactividad, overlays, y actualizaciones manejadas por datos•Ejemplos: Overdrive, MySpace, MSN Soapbox, SeeWindowsVista.com, CBS Innertube, CNN Pipeline, Banner Ads, Vlogs

E-commerce, E-Learning, y Entretenimiento•Punto de ventas Web/ soluciones transaccionales con personalización, juegos casuales, animaciones•Rendimiento mayor con efectos de contenido superiores, seguridades, almacenamiento local, incersión de anuncios enfocados, •Ejemplos: Nike.com, JibJab, Employee Training, Pop Cap Games, MSN Zone.com, Banner ads, Windows Live

Feb 2007 17

siempre conectadoprofundamente acoplado

cruza platformasnavegadores múltiples

Page 18: Creando Interfaces Espectaculares

Se integra bien con otras ofertas de Microsoft y otros

Microsoft

ASP.NETASP.NET AJAXOffice SharepointIISWMS

Otros

Compatible con cualquier servidor web y cualquier servidor de scripting

Feb 2007 18

Page 19: Creando Interfaces Espectaculares

En resumen…

19

Feb 2007

Page 20: Creando Interfaces Espectaculares

Live Image Searchwww.live.com

New York Times Reader

www.nytimes.com

Rich Graphics / Animation / Media

UsuarioPuntos de entrada

Experiencia Fascinante.NET Framework 3.0

Windows

Excelente: Web SuperiorApps “WPF/E” Apps “WPF/E”

Estándar Avanzadas

Bueno: Estándares WebASP.NET AJAX

Plataformas de UX Microsoft

digital home

devices web windows office

Modelo Presentación

CSS / XHTML

XAML

Modelo Programación

DHTML + ASP.NET + AJAX

Código Administrado

En

riq

uec

imie

nto

20Feb 2007

Page 21: Creando Interfaces Espectaculares

Preguntas…?

Page 22: Creando Interfaces Espectaculares

© 2005 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

Page 23: Creando Interfaces Espectaculares