Recomendados
Más contenido relacionado
Similar a Creando experiencias con Expression Blend
Similar a Creando experiencias con Expression Blend (20)
Último
Último (11)
Creando experiencias con Expression Blend
- 1. CREANDO EXPERIENCIAS CON EXPRESSION BLEND Cristina Torné User Interface Designer Cristina.torne@raona.com Experiencia de Usuario con Silverlight y tecnología Microsoft
- 2. Experiencia de usuario Creando experiencias con ExpressionBlend “Conjunto de factores percibidos por el usuario cuando interactúa con un producto, servicio, entorno o recurso” y que son consecuencia de la presentación, funcionalidad, rendimiento, comportamiento y ayudas interactivas del sistema. ISO 9241-210
- 3. Presentación Expression Studio Creando experiencias con ExpressionBlend The professionalAsset Managementtool The professional Webdesign tool The professional Interactive design tool The professional Graphicdesign tool
- 4. Expression Web Creando experiencias con ExpressionBlend Diseñar, construir y gestionar aplicaciones Web Estándares Web HTML , XHTML , CSS , XML , XSLT... + Microsoft SuperPreview Accesibilidad
- 5. Expression Media Creando experiencias con ExpressionBlend Gestión de contenidos multimedia Catalogación metadata, tags… Búsqueda avanzada de contenidos
- 6. Expression Media Encoder Creando experiencias con ExpressionBlend Codificación de contenidos multimedia Reproductor Silverlight Obtención
- 7. ExpressionDesign Creando experiencias con ExpressionBlend Diseño de la interfaz Web / Desktop Potente s herramientas de diseño vectorial XAML Exportación Importación múltiples archivos de diseño
- 8. Presentación ExpressionBlend Creando experiencias con ExpressionBlend Herramienta de diseño profesional para crear Experiencias de usuario RIA , animaciones, interfaces de usuario interactivas
- 9. Desktop / Web Creando experiencias con ExpressionBlend Windows Web Estándares Windows Presentation Foundation ASP .NET - AJAX Windows Desktop En navegadores – Cross plataforma Cliente Ligera SmartClients – Conectados al Web
- 10. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Interfaz WYSIWYG
- 11. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Colaboración Diseñador/ Programador
- 12. Creando experiencias con ExpressionBlend Colaboración Programador / Diseñador Diseño Especificaciones Composición CSS Resultado
- 13. Creando experiencias con ExpressionBlend Colaboración Programador / Diseñador Programador Diseñador Diseñadores& Programadores: Hablan lenguajes diferentes designers design developers add business logic
- 14. Creando experiencias con ExpressionBlend Colaboración Programador / Diseñador Programador Diseñador Diseñadores& Programadores: Hablan un mismo lenguaje designers design developers add business logic
- 15. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Edición vectorial
- 16. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Ventana diseño/código
- 17. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Tipografía Alta-Calidad
- 18. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Video
- 19. Nuevoproyecto Creando experiencias con ExpressionBlend
- 20. Área de trabajo – Área de diseño Creando experiencias con ExpressionBlend
- 21. Área de trabajo – Área de animación Creando experiencias con ExpressionBlend
- 22. Estructura de un Proyecto Silverlight Creando experiencias con ExpressionBlend
- 23. Potenciar la interactividad Creando experiencias con ExpressionBlend Controles comunes
- 24. Potenciar la interactividad Creando experiencias con ExpressionBlend Controles avanzados
- 25. Puntos a favor de la Creatividad Creando experiencias con ExpressionBlend Animación
- 28. Animaciones – Automática: Creando experiencias con ExpressionBlend private void OnLoaded(object sender, RoutedEventArgs e) { VisualStateManager.GoToState(this, "Hover", true); VisualStateManager.GoToState(this, "Blink", true); VisualStateManager.GoToState(this, "Wings", true); }
- 29. Animaciones – Guardada como un recurso: Creando experiencias con ExpressionBlend private void button_Click(object sender, RoutedEventArgs e) { this.nombre_storyboard.Begin(); }
- 30. Blend / Design Creando experiencias con ExpressionBlend
- 31. Design – Exportar XAML toBlend Creando experiencias con ExpressionBlend
- 32. Blend & Encoder Creando experiencias con ExpressionBlend
- 35. Juegos
- 39. Sample Data
- 41. Nuevos efectos visualesYa está disponible para descargar el preview de ExpressionBlend 3 http://www.microsoft.com/expression/try-it/blendpreview.aspx
- 42. ¿Preguntas? Creando experiencias con ExpressionBlend ¿PREGUNTAS?
Notas del editor
- Microsoft nos brinda una amplia gama de productos
- Herramienta de diseño web que permite el uso de HTML, DHTML, CSS ...Microsoft Expression Web SuperPreview: compara el diseño de tus paginas en múltiples navegadores a la vez.
- Herramienta de gestión de contenidos multimedia que permite catalogar y organizar los mismos, incluyendo la posibilidad de codificarlos y modificar el formato de los mismos.metadata, buscadores, tagsSupport for over 100 different media formats and file types, including images, fonts, and video
- Aplicación que permite gestionar la codificación de los contenidos REPRODUCTOR SILVERLIGHT
- Herramienta de diseño grafico que puede utilizarse para generar elementos gráficos para aplicaciones Web y de escritorio.Perfecto compañero de Blend exportación a XAML
- HERRAMIENTAdiseño profesional CONTENIDOS atractivos y sofisticados, así como interfaces de usuario conectadas a la Web para aplicaciones basadas en Windows®. aplicaciones más útiles que ofrecen una mayor productividad y satisfacción para el usuario final. Aprovéchese de la eficacia del escritorio y de Internet para tener un gran impacto en su audiencia así como experiencias de usuario con un gran rendimiento que favorecen el reconocimiento de la marca y el uso repetido.
- Blend - oportunidad para los diseñadores que apuntan al Web UN NUEVO MERCADOWPF unifica la forma en que Windows crea, muestra y manipula documentos, elementos multimedia e interfaces de usuario (UI), lo que permite a programadores y diseñadores crear experiencias de usuario diferenciadas y visualmente sorprendentes. La escalabilidad global de una aplicación de internet junto con la riqueza de las de escritorio
- WhatyouseeiswhatyougetXAML
- En ExpressionBlend, puede generar y ejecutar fácilmente los documentos XAML (F5) para ver los resultados de los cambios. ExpressionBlend actualiza los errores de sintaxis en el panel Resultados cuando se guarda el archivo o cuando se cambia de una vista a otra (vista Diseño y vista XAML). En la vista XAML, los elementos XAML están codificados por colores para facilitar su identificación. También se puede usar la función Buscar para encontrar un texto específico, o usar la función Ir a para desplazarse a una línea determinada. En la vista Diseño, puede diseñar la aplicación visualmente y dejar que ExpressionBlend genere el código XAML por sí solo. También puede usar la función Ver XAML para desplazarse rápidamente al XAML y encontrar cualquier elemento del documento.
- La idea es trabajar en un entorno optimo para estrechar la distancia entre la IDEA y el resultado final.
- El diseño no se transfería necesariamente bien a la diferente tecnología de desarrollo y el desarrollador debía ralizar modificaciones que podían alternar el diseño
- El lenguaje de marcado de aplicaciones extensible o XAML es un lenguaje de marcado basado en XML desarrollado por Microsoft. XAML es el lenguaje que se usa para la presentación visual de las aplicaciones desarrolladas con Microsoft® ExpressionBlend™, del mismo modo que HTML es el lenguaje que se usa para la presentación visual de las páginas Web. La creación de aplicaciones en ExpressionBlend supone tener que escribir código XAML, ya sea de forma manual o visualmente mediante la vista Diseño de ExpressionBlendLenguaje XML empleado para definir los elementos visuales de una aplicación (interfaces de usuario, contenidos multimedia, controles…)
- Microsoft® ExpressionBlend™ ofrece funciones de dibujo vectorial estándar para que pueda dibujar formas, trazados y máscaras como en cualquier otro programa de gráficos vectoriales. Para crear dibujos y materiales gráficos más avanzados, considere la posibilidad de usar un programa de gráficos vectoriales alternativo, como Microsoft® Expression® Design. ExpressionDesign proporciona incluso la capacidad de exportar dibujos como XAML para usarlos en ExpressionBlend.¿Qué son los gráficos vectoriales?Los gráficos vectoriales se definen geométricamente mediante puntos, líneas, curvas y superficies, en lugar de con píxeles como en un mapa de bits. A medida que aumenta la resolución de pantalla de los monitores de los equipos, surge la necesidad de abandonar los mapas de bits que muestran píxeles de gran tamaño al verlos con una resolución alta en ppp. El cambio de tamaño de los mapas de bits puede resultar complicado y suele producir gráficos de baja calidad. Los vectores gráficos permanecen suaves cuando se visualizan con una resolución alta en ppp e incluso cuando se aumenta su tamaño. Por este motivo, los vectores gráficos también resultan más fáciles de personalizar para ajustarlos al contenido, puesto que no es necesario crear varias imágenes con distintos tamaños fijos, como por ejemplo, los archivos de icono que aparecen en la interfaz de usuario (UI) con distintos tamaños.
- Al mismotiempo
- Tipografía basada en la tecnología ClearTypePERMITE EXCELTENTE LEGIBILIDAD EN PANTALLA / DISTINTAS PLATAFORMAS
- WPFSilverlight: Versión 1 y 2Sitio / aplicaciónSitio: pagina dónde se carga 1 control SilverlightAplicación: toda una solución Silverlight con REFERENCIAS a las LIBRERIAS de .NET<User control> en lugar de <Canvas>
- F6 para cambiar el área de trabajoEl área de trabajo de Microsoft® ExpressionBlend™ se compone de todos los elementos de la interfaz visual, incluida el área de diseño, los paneles, el Cuadro de herramientas, las opciones de configuración del área de trabajo, las vistas de creación y los menús. La capacidad de acercar o alejar toda el área de trabajo es exclusiva de ExpressionBlend. Puede escalar el área de trabajo al tamaño que desee sin perder calidad en la interfaz visual: alejarla para que aparezca más información en la pantalla o acercarla para que sea más fácil de leer. Use la opción Zoom de área de trabajo del cuadro de diálogo Opciones (Herramientas | Opciones) para ajustar el área de trabajo del 50 al 150%.--------------------Ventanas de documentos: Esta área muestra todos los documentos XAML abiertos actualmente: ventanas, páginas, diccionarios de recursos, controles de usuario. Vistas: Hay dos entornos de creación en tiempo real en ExpressionBlend: la vista Diseño y la vista XAML. Puede usar la vista de diseño para crear documentos, con lo que tendrá una representación visual en el área de diseño, o puede usar la vista de marcado para crear dentro del propio lenguaje de marcado de aplicaciones extensible (XAML).
- ambos sincronizados al cambiar de un entornoPage – interfaz de usuario
- Qué son los controles?Los controles (o elementos de diseño de la UI) son los componentes visibles de una aplicación. Los controles (como botones o listas de elementos que se pueden seleccionar) hacen que los usuarios puedan interactuar con la aplicación. Si conoce los controles que están disponibles en ExpressionBlend y cómo personalizarlos, puede hacer que su aplicación tenga la apariencia y el comportamiento que desee.
- Fotogramas claves en una escala de tiempo
- Truco – tabulador ocultar panelesEscalas de tiempoLas escalas de tiempo proporcionan una estructura para las secuencias de animación en la aplicación que cree. Una animación en ExpressionBlend está formada por una escala de tiempo en la que se registran fotogramas clave que representan el control del tiempo de cambios en las propiedades. Las escalas de tiempo pueden considerarse como capas de los cambios en las propiedades que se aplican a los objetos en el área de diseño. Las escalas de tiempo de animación se crean en le sección Objetos y escala de tiempo del panel Interacción (para obtener un esquema, vea Panel Interacción). Con los controles disponibles en este panel puede ver el área de diseño según va variando, agregar escalas de tiempo nuevas, modificar escalas de tiempo, etc.Puede crear escalas de tiempo cuando se encuentre en las siguientes ubicaciones (o ámbitos) de la aplicación:En el cuerpo principal del documento Si la finalidad de la aplicación es presentar una animación o si no necesita volver a usar la animación en otro lugar, puede crear las escalas de tiempo de animación en el cuerpo principal del documento. En una escena (o control de usuario) Si necesita volver a usar una animación varias veces en un documento o en otra aplicación, puede crear las escalas de tiempo de animación en un control de usuario. Esto resulta útil también si desea organizar las animaciones en distintos documentos o proyectos. Los controles de usuario se pueden agregar al área de diseño como si fueran cualquier otro control (por ejemplo, un botón). En la plantilla de un control Si desea que todos los controles de un tipo específico (por ejemplo, Button) en la aplicación sean animados de la misma forma, puede crear la animación en la plantilla del control. Esto no significa que todos los controles tengan exactamente el mismo aspecto. Si usa enlace de plantillas (enlace de una propiedad en la plantilla con una propiedad en el control al que se aplica la plantilla), cada uno de los controles puede tener un color diferente u otra apariencia visual en su animación respectiva.
- Truco – tabulador ocultar paneles
- Truco – tabulador ocultar paneles
- Editor de brochas Exportar en XAML
- Editor de brochas Exportar en XAML
- []MetadataTemplateAbrir > Sitio > Select FolderObjeto > Trazado > Crear Trazado de recorte
- Aplicaciones de productividad Aplicaciones que mejoran la productividad y la eficacia para una base de clientes más amplia, así como una línea de aplicaciones empresariales, como Microsoft Office. Aplicaciones para consumidores Aplicaciones como reproductores multimedia, herramientas de seguridad y gadgets de escritorio. Juegos Sencillos juegos de escritorio o en línea diseñados exclusivamente para el entretenimiento. Quioscos multimedia Aplicaciones diseñadas para ejecutarse en quioscos multimedia con los que los usuarios pueden interactuar para obtener información, revisar directorios de productos, facturar en un aeropuerto, etc. Utilidades para profesionales de TI Herramientas para pequeñas tareas, como herramientas para seguimiento de errores que pueden ser únicas para una empresa o la necesidad de un cliente concretas.
- SketchFlow (nuevo set de herramientas para un desarrollo más rápido y sencillo de experiencias, prototipos, etc.)Creación de interactividad sin necesidad de programarla en “code-behind”.Sample data (simulación de conexiones de acceso a datos sin realmente tener que disponer de una fuente de datos real, como una BD, …)Nuevas funciones de animación, transformación (incorporando también transformaciones 3D), efectos visualesDesign features:Import Adobe Photoshop and Illustrator files Support for WPF and Silverlight 3 graphic effects Gradient tool improvements Layout operation improvements Design-time annotationsSkinning:Creating templates from artwork Improved support for VSM State pinning Editable state transitions Drawing into statesInteractivity:XAML, C#,and Visual Basic Code Editing BehaviorsData:Enable usingsample data Improved data binding Support for DataGrid control in SL3 appsSource file version control:TFS support includedAnimation:More properties available to animate Better support for easing in SilverlightAnimating to/from resource valuesText:Improved embedding of fonts Support for subsetting fontsExtensibility:Extensible Asset Library Artboard extensibility Extensible project templatesWorkspace & Artboard:Enable docking and workspace window configuration Artboard selection and insertion improvements Allow marquee selection of points Auto-scroll and zoom improvements Additional keyboard shortcuts and modifier keys