Werken met Microsoft Expression 3 voor designers

1. ShareCafe: Werken met Microsoft Expression 3 voor designers 5 November, 2009

2. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 2 ExpressionBlend Microsoft ExpressionBlend is een ontwikkel- en ontwerpapplicatie voor internet gebaseerde (Silverlight) en zelfstandige applicaties. Samenwerken met ontwikkelaars met behulp van ASP.NET 3.5 en PHP voor het maken van treffende websites. Bijzonder in ExpressionBlend zijn de mogelijkheden om met allerlei mediatypen te werken zoals 3D modellen en audio en video. Voordeel van Blend is dat code en design volledig gescheiden zijn, waardoor samenwerking makkelijker wordt. Ook Visual studio en Sourcecontrol kunnen gebruikt worden. ExpressionBlend maakt gebruik van XAML als markup taal voor de (grafische) interface elementen. De achterliggende code is C#. De elementen die uit lijnen en vlakken bestaan kunnen bijvoorbeeld in Expression Design ,Illustrator of Photoshop worden ontworpen en geexporteerd als XAML. Let wel de resolutie moet 96 dpizijn!

3. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 3 Expression Studio User Interfaces voor internet en Windows ontwerpen, beheren, coderen en leveren. Windows Expression Studio is een pakket met vijf toepassingen die samen een volledige reeks ontwerptools vormen voor het maken van websites en het beheren van digitale inhoud. Dit product biedt meerdere programma's voor professionele gebruikers, zoals: Expression Web Webinhoud ontwerpen, beheren, coderen en leveren. Expression Blend Microsoft ExpressionBlend is een ontwikkel- en ontwerp-applicatie voor internet gebaseerde (Silverlight) en zelfstandige applicaties. Expression Design voor het naadloos beheren van digitale en grafische inhoud in verschillende Expression-toepassingen (Blend/Web). Expression Media voor het beheren van digitale inhoud. ExpressionEncoder voor het publiceren van media op internet.

4. Windows Presentation Foundation (WPF) 4 ShareCafe: Werken met Microsoft Expression 3 voor designers 5 November, 2009 De Windows Presentation Foundation (of WPF), vroeger aangeduid met de codenaam Avalon, is het grafische subsysteem dat een onderdeel is van het .Net Framework versie 3 van Microsoft. Het is een library ter ondersteuning van het maken van visueel aantrekkelijke applicaties. Zo heeft WPF ondersteuning voor tekst, documenten, controls, vectoren, afbeeldingen, video, audio, 3D, animaties en meer. De definitietaal voor de user interface is XAML, wat staat voor eXtensibleApplicationMarkupLanguage. Deze taal is gebaseerd op XML. De programmeertaal is .NET (C# of VB.NET). Met WPF kunnen de meeste grafisch rijke applicaties voor Windows worden gemaakt. (RIA)

5. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 5 Silverlight browser plugin cross-browser, cross-platform; het draait in Internet Explorer, Firefox en Apple Safari en het draait op zowel in Windows als Apple De Silverlight applicatie draait dus op de client, niet op de server Wordt gebruikt voor visueel sensationele en interactieve oplossingen te bouwen in de browser De user interface en de styling van een control staan volledig los van elkaar. Je gebruikt zelfs verschillende programma's voor het ontwikkelen van de logica en de user interface. Developers gebruiken hun vertrouwde Visual Studio 2008 omgeving voor het ontwikkelen van de logica van de Silverlight applicatie. Designers openen vervolgens hetzelfde project in Microsoft ExpressionBlenden gebruiken Blend voor het creëren van de user interface. Door het gebruik van verschillende tools mogelijk te maken kunnen zowel developers als designers gebruik maken van een omgeving die is afgestemd op hun specifieke wensen en eisen. In de Silverlightplugin zit het Silverlight .Net Framework. Het Silverlight .Net Framework is een uitgeklede versie van het gewone .Net Framework. Als je ontwikkelt voor Silverlight, heb je dus niet alle classes uit het gewone .Net Framework tot je beschikking. Aan de ene kant is dit een noodzaak, omdat eindgebruikers anders voor het draaien van een Silverlight applicatie het volledige .Net Framework van ongeveer 200MB zouden moeten downloaden en installeren, in plaats van de 5MB van het Silverlight .Net Framework. Aan de andere kant is het ook logisch, omdat bepaalde classes niet vaak gebruikt zullen worden in applicaties die op de client draaien. Een voorbeeld hiervan is de System.Data.SqlClientnamespace die gebruikt wordt voor het benaderen van een SQL Server database. Aangezien de SQL Server database meestal op de server zal draaien en niet op de client, zul je deze namespace niet missen bij het ontwikkelen van een Silverlight applicatie. De grafische kracht van Silverlight is groot. Het ondersteunt High Definition content, streaming media en biedt veel verschillende video formaten en technieken. Een van de nieuwe technologieën die Silverlight ondersteunt is Deepzoom die het mogelijk maakt grote verzamelingen afbeeldingen op een overzichtelijke manier weer te geven. Zo kunt u afbeeldingen in detail tonen, zonder dat eerst de gehele afbeelding geladen wordt. http://memorabilia.hardrock.com

6. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 6 Snel uw gebruikers-interfaces prototypen met SketchFlow Met SketchFlow introduceert ExpressionBlend 3 een nieuwe set aan features die zijn ontworpen om het u gemakkelijker te maken te experimenteren met dynamische gebruikerservaringen en om uitnodigende prototypes te creëren. SketchFlow helpt u bij het communiceren van ontwerpideëen aan stakeholders, en maakt het eenvoudiger om terugkoppeling te ontvangen dankzij het gebruik van annotaties. U kunt Microsoft Office PowerPoint-bestanden importeren in de schermen van uw project. U kunt ook Microsoft Office Word documenten exporteren die screenshots bevatten van al uw schermen. Nieuwe categorieën in het Assets-paneel organiseren SketchFlow-stijlen en andere zaken. Ontwerpers kunnen SketchFlow gebruiken om de navigatie en samenstelling van een applicatie te modelleren op een heel visuele manier. SketchFlow prototypes kunnen zo eenvoudig zijn als een serie schetsen, maar kunnen ook net zo echt zijn als nodig is om de bedoeling van uw ontwerp correct te communiceren. SketchFlow gebruikt de bestaande features van ExpressionBlend 3. Andere nieuwe ExpressionBlend 3 features, zoals as Photoshop-import, visuele states, behaviors en voorbeelddata, kunnen ook in prototypeprojecten worden gebruikt. .ExpressionBlend heeft de mogelijkheid gekregen om schermen te schetsen, ook wel prototyping genoemd. In de tool is een module genaamd Sketch Flow opgenomen. Een module om op een eenvoudige manier zowel flow (afhankelijkheden tussen schermen) als de schermen zelf te schetsen. Compleet met een wiebelig font en bijbehorende geschetste controls. Wat erg krachtig is, dat je deze prototypes zelfstandig kan uitrollen, en in verschillende scenario's kan laten zien (animations). Helemaal sexy is, dat de reviewer commentaar kan geven door middel van kriebels op het scherm (met een tablet pc helemaal cool) en dit in een apart review bestand terug kan sturen. Super! Ik weet nog niet of een informatie analist deze tool gaat gebruiiken of dit toch uitbesteedt aan de user interace designer. Maar het ziet er allemaal heel toegankelijk uit. Er zit zelfs een export mogelijkheid naar Word toe (wij als document liefhebbers J). Schetsen en het maken van prototypes zijn in de praktijk bewezen technieken die het mogelijk maken dat u ideëen en concepten snel kunt onderzoeken zonder hoge investeringen te hoeven doen in tijd en middelen. SketchFlow zorgt dat u snel en efficiënt uw visie voor een applicatie kunt demonstreren. Het biedt een informele en snelle manier om scenario's voor gebruikersinterface te onderzoeken, te itereren en te prototypen, zodat u uw concepten kunt laten evolueren van een reeks van ruwe ideëen naar een levendige prototype die zo reëel gemaakt kan worden als een bepaalde klant of project vereist. Deze snelle, iteratieve en kostenefficiënte benadering tot prototyping zorgt dat u zich kunt concentreren op wat belangrijk is, creativiteit en het bouwen van de beste oplossing voor klant, op tijd en binnen budget. Wat is SketchFlow? SketchFlow-prototypes worden ontworpen voor de flow, compositie, schermen en states van een gebruikersinterface van een applicatie uit te tekenen. Hieronder ziet u een flow die u vlot kan schetsen. (headers kan je door slepen aan pagina’s toevoegen / je kan de linken naar verschillende pagina’

7. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 7 U kunt tekentools, Post-It's(r), WPF- of Silverlightcontrols en componenten, en ook geïmporteerde beelden gebruiken om uw ideëen snel te itereren en te visualiseren. SketchFlow zorgt zelfs coor een set schetsstijlen voor de standaard platformcontrols, zodat u uw werk kunt presenteren met een consistente 'prototype'-look om u te richten op de gepresenteerde concepten. Door animatie te gebruiken, kunt u uw ontwerpbedoelingen voor dynamische interacties gemakkelijk illustreren. Met SketchFlow kunt u ideëen snel achter elkaar creëren, testen, itereren, presenteren en evalueren, zodat u nieuwe projecten in ogenschouw kunt nemen die voorheen niet kosteneffectief of winstgevend zouden zijn. Itereer snel schermlay-outs met de ingebouwde Sketch stijlcomponenten SketchFlow-prototypes kunnen op interactieve wijze worden onderzocht vanaf de eerste schets, zelfs als het prototype niet echt een actieve gebruikersinterface bevat. De mogelijkheid om snel te demonstreren hoe de applicatie zal werken, en hoe de applicatie van scherm naar scherm en van state naar state overgaat, zorgt dat klanten de gebruikers-experience van de applicatie eerder in het ontwerpproces ervaren. Bovendien toont het klanten vroeg in de ontwikkelcyclus hoe de navigatie en aplicatie-flow is, waardoor pijnlijke en kostbare 'last minute' conceptaanpassingen niet meer aan de orde zijn. Het verkrijgen van effectieve en tijdige terugkoppeling van een klant is net zo belangrijk als het maken van het prototype in het ontwerp- en ontwikkelproces. De gratis distribueerbare SketchFlow-player zorgt dat uw Silverlight-concepten via een standaard browser doelgericht aan uw klant kunnen worden gepresenteerd. Klanten bekijken het Silverlight-prototype in hun browser, testen meerdere scenario's en leveren terugkoppeling in de juiste context aan het ontwikkelteam door hun ervaringen te annoteren, terwijl ze langs de verschillende schermen navigeren.

8. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 8 Blend Interface Afbeeldingen moeten 96 dpi Projects Assets Triggers States Tools (Selection, Direct Selection,Pan, Zoom, Camera Orbit, Eyedropper, PaintBucket, gradient Tool, Pen , Rectangle, Grid, Text, Button ) objects and timeline Properties Resources Data

9. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 9 Stap één: een project opzetten Je kan als designer zelf een skin voor SilverlightApplication /WPF Applicationontwikkelen of je kan verder werken aan het layouten van een project die de developper gestart is in in Visual Studio Terwijl de ontwikkelaar alle elementen bouwt die ervoor zorgen dat deze toepassing echt werkt, begin ik met een compleet nieuw project in Blend. In het begin hoeven we nog niet samen aan het project te werken. De programmeu doet namelijk de eerste stappen in Visual Studio met zijn preferred projectstructuur. Ik weet niet precies wat hij erin zet, maar het zal redelijk onstabiel zijn wanneer hij alles aan elkaar koppelt. Daarna gebruiken we Visual Studio TFS om tegelijkertijd aan het project te werken. Open Blend, klik op New Project in het openingsscherm Kies SilverlightApplication /WPF Application of open een door de ontwikkelaar bestaande .xaml file Geef indien nodig het project een naam en een opslaglocatie.

10. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 10 Layouten van het Window Layout Containers Eerst maken we een soort van Masterpage (template), waarin we de positie bepalen van alle Usercontrols en grafische elementen. De Usercontrols en grafische elementen kunnen we oproepen en groeperen in een : 1. Grid 2. Canvas 3. StackPannel 4. DockPannel 5. Border 1.1. Grid Een grid is vergelijkbaar met een table in html. In een Grid heb je Rijen en Kolommen (Grid.RowDefination / ColumnDefination) Grids kunnen ook genest worden. RowSpan en ColSpan kunnen ook toegepast worden. Voorbeeld <Grid ShowGridLines="True"> <!--From here we can set that how many Row we are going to Use in A Grid --> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <!--From here we can set that how many column we are going to use in a Grid--> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <!-- We can use Grid.Row and Grid.column to set our element--> </Grid> Zieook http://expression.microsoft.com/en-gb/dd565839.aspx

11. 1.2. CanvasEen canvas wordt vooral gebruikt voor absolute positionering van de elementen in het canvasDe vier properties zijn > Canvas.Top > Canvas.Left > Canvas.Right > Canvas.Bottom 1.3. StackpanelDit wordt voornamelijk gebruikt om lijst items te aligneren.Als je bv. Tussen alle elementen dezelfde ruimte wilt, alle items wilt links aligneren….In Blend is het ook niet mogelijk om bulletlists te gebruiken ,dus ook voor dit is het een handige tool.StackPanel is the simplest Panel element in XAML. StackPanel shows the elements respectively according to the order. In StackPannel there is orientation attribute which has two values: horizontal and vertical. By default orientation is vertical. Voorbeeld 1.4. DockpanelStackPannel en DockPannelzijnongeveerhetzeldealleenkan men in eenDockPannelelementsentop, left, right and bottom aligneren. 1.5. BorderGrids (rasters) kunnen meerdere objecten kunnen bevatten, terwijl Borders (randen) er maar één kunnen onderbrengen. Borders zijn geweldig, omdat u er afzonderlijke streek- en corner radius instellingen voor kunt bepalen.Wordt vnl. gebruikt om 1 actie voor bv. Een gameactie in onder te brengen. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 11

12. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 12 Styles De styles moeten in <UserControl.Resources> komen Voorbeeld voor het stylen van de Grids in een usercontrol <Style x:Key="GridStyle" TargetType="{x:Type Grid}" > <Setter Property="Background" Value="Red"/> <Setter Property="Foreground" Value="Black"/> </Style> x:Key="GridStyle" > naam die je zelf kan kiezen TargetType="{x:Type Grid}" > type van Target <GridHorizontalAlignment="Stretch" Style="{StaticResourceGridStyle}"> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="350" MaxWidth="350" /> <ColumnDefinition /> <ColumnDefinitionWidth="60" /> <ColumnDefinitionWidth="60" /> <ColumnDefinitionWidth="60" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions > <RowDefinitionHeight="24" /> <RowDefinitionHeight="24" /> </Grid.RowDefinitions> TargetType="{x:Type Grid}" > <GridHorizontalAlignment="Stretch" Style="{StaticResourceGridStyle}">

13. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 13 FontManager Verbeterde embedding van fonts en subsets van fonts Met ExpressionBlend 3 kunt u gemakkelijk subsets van fonts in Silverlight- en Windows PrsentationFoundation-projectenembedden en creëren. U kunt de nieuwe Font Manager gebruiken om geïnstalleerde fonts te selecteren, en aanpassen welke subset van de karakters u wilt embedden. Voor niet standaard lettertypes gebruik je font manager. Markeer het vakje bij Embed Font en vergroot het palet met de onderste pijl om de knop Embed and Subset... Font Manager weer te geven en kies All Glyphs. Klik op OK, blaas de grootte op tot 24 en druk op F5 om het project in uw standaardbrowser te bekijken: en daar is uw nieuwe toepassing!

14. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 14 Animaties Storybord Erzijn 2 manierenomteanimeren in Blend via het storyboard en via code Expression Blend offers extensive help in creating Storyboard animations. Silverlight animation is time based not frame based, this means that your animation will benefit from running at the maximum frame rate that the users machine will allow. Multiple storyboards can be created and run at the same time. Om eennieuw storyboard temakenganaarde‘Objects and Timeline’ tab en klik op het ‘plus’ icoon.

15. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 15 Animaties Let eropdatals je een storyboard toevoegterbovenaaneen rode cirkelwordtgetoont Ditbetekentdat je in record mode bent In record mode zalelkeverandering die je maaktalseenanimatiegezienworden en aaneenKeyframegelinktworden Om de record mode uittezettenklik je op de rode cirkel, dezewordtdangrijs.

16. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 16 Data Voorbeelddata gebruiken ExpressionBlend 3 maakt het eenvoudig om data-gerelateerde applicaties te prototypen, bouwen en testen zonder dat toegang tot live data nodig is. U kunt het Data-paneel gebruiken om voorbeelddata te genereren of voorbeelddata te importeren van een XML-bestand. U kunt 'flat‘ verzamelingen of hiërarchische verzamelingen (voor gebruik in TreeView-control) genereren, en u kunt de content voor vier typen data genereren (String, Number, Boolean, en Image). Voorbeelddata zijn beschikbaar voor controls op het artboard bij design-time. U kunt uw voorbeelddata uitgebreid aanpassen, en u kunt eenvoudig wisselen tussen het gebruik van voorbeelddata en live data tijdens runtime. Data -binding ExpressionBlend 3 bevat de volgende nieuwe data-binding features: De mogelijkheid om data-items te slepen van het Data-paneel naar het Objects and Timeline-paneel om data-bindings te creëren. De mogelijkheid om de property van een object te binden aan de property van een ander object in Silverlight-projecten. Support voor de DataGrid-control in applicaties. Support voor master/detail-scenario's door de list-view en details-view van het Data-paneel te gebruiken. Verbeterde support voor binding aan een data-context. De mogelijkheid om hiërarchische verzamelingen van voorbeelddata te definiëren waarmee u data-gerelateerde applicaties kunt prototypen.

17. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 17 Templates and Styling WPF provides separation of business logic (behavior) and look and feel of a control by providing a control template that defines the visual composition of a control. For example, the default control template of a button is a ContentPresenter inside a ButtonChrome. <ControlTemplateTargetType="{x:TypeButton}"> <Microsoft_Windows_Themes:ButtonChrome ...> <ContentPresenter ... /> </Microsoft_Windows_Themes:ButtonChrome> </ControlTemplate> A button based on the standard Windows theme.

18. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 18 A custom button If we wanted the button to be round, we could replace the ButtonChrome with a Grid and a round ellipse for its background. <ControlTemplateTargetType="{x:TypeButton}"> <Grid ... > <Ellipse .../> <ContentPresenter ../> </Grid> </ControlTemplate> Using control templates a designer to create a button that looks like almost anything by replacing the button's internal visual elements. It is mportant to note that replacing the template does not replace the behavior; this button still responds to clicks and mouse hovers with no additional work. Once the skeleton (or visual elements) of a control have been defined by the control template, WPF also provides rich styling support for customizing the look and feel. By using a style, we can create a reusable group of settings (or attributes) to attach to an existing UI element to customize its look and feel. To address a frequently asked question, the difference between control templates and styles is that a template replaces the visual composition of an element, while a style simply sets existing attributes or properties of an element. There are many more details about how styles and templates work together that are not covered here, but a designer and developer should study and understand these two concepts carefully. These are the pillars of the separation (UI from code) that helps make the new collaboration model workable; by taking advantage of control templates, data templates, styles, and resource dictionaries, it is possible for developers to focus on logic (behavior) and designers to focus on visuals (UI).

19. 5 November, 2009 ShareCafe: Werken met Microsoft Expression 3 voor designers 19 Links http://expression.microsoft.com/en-gb/cc197141.aspx

20. 20 ShareCafe: Werken met Microsoft Expression 3 voor designers 5 November, 2009