Discussion about Design, Technologies and User eXperience : Tutorial & Webcast

Expression Blend & Visual State Manager (VSM): alcuni suggerimenti e considerazioni per il design di applicazioni Silverlight e WPF.

Roberto Cavallini — Wed, 09 Dec 2009 13:30:00 GMT

Una delle principali difficoltà che ho riscontrato personalmente le prime volte che mi sono cimentato ad utilizzare le funzionalità introdotte dal Visual State Manager (VSM) è stata quella di aver ben chiaro la differenza tra “States” e “Visual State...(read more)

Project Rosetta: nuovi tutorial Expression Blend 3

Roberto Cavallini — Wed, 07 Oct 2009 18:15:00 GMT

Sempre in ambito formazione e progettazione, vi segnalo questa interessante serie di tutorial [for beginners] dedicati alle nozioni basi per poter progettare interfacce utente con Expression Blend 3. La serie di tutorial fa parte del materiale disponibile...(read more)

Disponibile un nuovo percorso formativo su Expression Studio 3 in italiano

Roberto Cavallini — Tue, 22 Sep 2009 16:01:00 GMT

Volete scoprire tutti i segreti sui tool della famiglia Expression Studio 3: novità funzionali, esempi, tutorial e molto altro...
Come vi avevo anticipato prima delle vacanze estive, sono da pochi giorni disponibili i primi 7 webcast che illustrano le principali novità funzionali disponibili in Expression Studio 3 e Silverlight 3.

Potete accedere al percorso formativo completo dalla seguente pagina:
http://tinyurl.com/expression-studio-3

Per semplicità, vi riporto anche i riferimenti ad ogni singolo video tutorial:

- Expression Studio 3: "Overview & proposal scenarios" (16' min.)

- Expression Blend 3 SketchFlow: "Dal prototipo al progetto reale" (24' min.)

- Expression Blend 3: "Sample Data & oltre…" (12' min.)

- Expression Blend 3: "Behavior - building block of interacivity" (29' min.)

- SuperPreview: ottimizzazione nella visualizzazione di un sito Web su più browser (27' min.)

- Expression Encoder 3: novità encoding e ottimizzazione dei video (24' min.)

- Deep Zoom Composer: overview sulle nuove funzionalità (50' min.)

Questa serie di webcast, vogliono essere i primi di una serie che andrò a realizzare nelle prossime settimane. Se avete suggerimenti su particolari funzionalità/esempi su cui volete avere approfondimenti o dettagli, vi invito ancora una volta a segnalarmi direttamente l'argomento al mio indirizzo di posta elettronica: roberto.cavallini@microsoft.com

Vi ricordo infine che è da qualche giorno online, la nuova versione del portale dedicato ai prodotti Expression Studio in italiano.

Personalizzare una ScrollBar attraverso gli "styles" in Silverlight

Roberto Cavallini — Mon, 07 Sep 2009 14:02:00 GMT

Continuiamo con la carrellata sulla personalizzazione dei controlli in Silverlight 3 attraverso l’impiego degli “Styles” e dei “ControlTemplate”.

ScrollBar:
Anche in questo caso, partiamo da alcuni semplici elementi di grafica creati in precedenza attraverso Illustrator ed importati in Blend 3. L’asset grafico importato definisce lo stile “Normal” della ScroolBar, mentre nell’immagine qui sotto ho voluto riportare come ho ipotizzato il comportamento della ScrollBar nei vari stati d’impiego.

In pratica, come negli esempi illustrati in precedenza, il primo step è quello di convertire gli asset grafici in “controllo”. Anche in questo caso, l’abbiamo ormai visto più volte, selezioniamo il contenitore Grid “verticalscrollbar” e trasformiamo il tutto in controllo definendo lo “Styles” ed il “ControlTemplate” facendo semplicemente “Tools > Make Into Control > ScrollBar”.
Vi ricordo che nella maschera “Make into Control” è fondamentale che definite la tipologia di controllo che volete creare nel nostro esempio “ScrollBar”. Per facilitare questa operazione vi consiglio di utilizzare l’utile motore di ricerca che vi permette di filtrare direttamente sulla tipologia di controllo.

A questo punto vi troverete nella root del ControlTemplate che avete appena creato, nel pannello Object Tree, dove anche in questo caso la grid principale avrà il nome “verticalscrollbar”. Sempre all’interno del template, selezioniamo la grid principale “verticalscrollbar” e dal menù “tool” selezioniamo “Make Into Part of ScrollBar > VerticalRoot”. “verticalscrollbar” verrà quindi rinominata in “VerticalRoot”.

Suddividiamo la grid nelle 5 righe necessarie per la definizione della ScrollBar. Nel nostro esempio specifico stiamo parlando di “5 righe” in quanto si tratta di una ScrollBar Vertical, se si trattasse di Horizontal, in questo caso si trattava di suddividere in 5 colonne. Vediamo illustrato il dettaglio nella figura qui sotto.

Se avete suddiviso correttamente la Grid, gli elementi grafici vi dovranno risultare in questo modo: “Track” in RowSpan “5”, “smalldecrease” in Row ”0”, thumb in Row “2”, e smallincrease in Row “4”.
La VerticalSmallDecrease non è ancora nel template, ma abbiamo l’asset grafico per questa parte che è l’oggetto “smalldecrease”. Bisognerà quindi trasformare questo oggetto attraverso il comando “Make Into Part” in Make Into Part. Selezioniamo quindi “smalldecrease” e dal menu tool trasformiamo “Tools > Make Into Part of ScrollBar > VerticalSmallDecrease > OK”.

Nel nostro esempio non abbiamo bisogno del “ContentPresenter” quindi possiamo cancellarlo. Selezioniamo “smalldecrease” e impostiamo la width e la height a “7” nel pannello delle proprietà.
Modifichiamo le dimensioni della grid a “7” ed il colore di sfondo “background” trasparente.
Interagendo con il comando “Scope up”, torniamo nel template principale “ScrollBarStyle1”, selezioniamo “VerticalSmallDecrease” e resettiamo Width, Height e Margin.
A questo punto dobbiamo definire gli “States” per il comportamento di “MouseOver” e “Pressed”, entriamo quindi nel template “RepeatButtonStyle1” e all’asset “smalldecrease”, modifichiamo il colore di riempimento Fill nei vari “states” rispettivamente come segue: “MouseOver” “Fill=#FFCCCCCC” e “Pressed” – smalldecrease “Fill= FFE5E5E5”. Per rendere i cambi di stati ancora più piacevoli è possibile definire una transitino “0,2” tra i vari “states” appena definiti. Del tipo “Normal -> MouseOver” 0,2 sec.

Ritorniamo quindi interagendo sul bottone “Scope up” nel template principale e ripetiamo le stesse operazioni anche per il bottone “smallincrease”.Selezioniamo quindi “thumb” sull’”Object Tree” nel control template principale e trasformiamo in VerticalThum come segue, “Tools > Make Into Part of ScrollBar > VerticalThumb > Ok”.
A questo punto bisognerà associare una MinHeight, ritorniamo quindi sul control template principale, selezioniamo “VerticalThumb”, applichiamo dei margin Left:5, Right:5, Top:0, Bottom:0; resettiamo la Height e associamo un MinHeight to 7.

Definiamo quindi gli “states” ed il comportamento attraverso il Visual States Manager, entriamo nel template di Thumb e associamo gli states di “MouseOver”, “Pressed” e la Transition in “0,2 sec”.
In conclusione, torniamo sulla Root principale del ControlTemplate “ScrollBarStyle1”, attiviamo il pannello “Parts” di Blend, e con selezionato la grid VerticalRoot nel ObjectTree, inseriamo “VerticalLargeDecrease”, nelle proprietà impostate Row=”1” e Opacity=”0”. Stessa operazione anche per il “VerticalLargeIncrease” con la differenza che impostate Row=”3”.

Abbiamo praticamente concluso l’esempio, l’unica cosa che ci rimane da fare prima di lanciare il build dell’applicazione e testare il tutto e quella di impostare le dimensioni delle nostre righe in questo modo: Auto, Auto, Auto, Star e Auto.

A questo link, trovate disponibile al download il codice sorgente del progetto in Blend 3.

Definire lo Style ed il Control Template per un "Button" in Silverlight 3

Roberto Cavallini — Fri, 04 Sep 2009 19:17:00 GMT

Come dimostrato nello scorso articolo per lo “Slider”, vediamo insieme la personalizzazione di un altro semplice controllo il “button”. Uno degli elementi fondamentali che caratterizzerà le nostre applicazioni.
Per semplificare ulteriormente la cosa, il buttone creato è veramente elementare e scarno. A mio avviso è importante capirne la logica e come in tutte le cose, una volta capite le basi, le cose più complesse vengono da se.

Anche in questo caso, presupponiamo di avere come base alcuni semplici elementi grafici che caratterizzeranno il nostro bottone, il tutto contenuti all’interno di una “Grid”.

In questo caso, questi elementi grafici rappresenteranno lo stato “Normal” del nostro button, attualmente sono semplici elementi grafici ed anche in questo caso, per prima cosa bisognerà convertirli in controllo “button”. Attiviamo e selezioniamo la “Grid” contenitore, tasto destro del mouse, “Make into control…” e trasformiamo in “Button”. Una soluzione alternativa poteva essere quella di partire dal Button standard disponibile all’interno dell’Asset Library di Blend 3 e da li editarlo come “Edit a copy…” del bottone di base.
Facendo questa operazione andremo a definire lo “Styles” che conterrà a sua volta il “ControlTemplate” con gli elementi grafici del button al suo interno e i vari “states” che potranno essere gestiti all’interno del “Visual State Manager”. Evidenziato nell’immagine qui sotto, il codice XAML che definisce il “ControlTemplate” all’interno dello Style del “Button”.

Come potete notare dal ObjectTree, il “TextBlock” non è più contenuto nel “ControlTemplate”, ma è stato sotituito da un nuovo elemento “ContentPresenter”, in cui se andate a vedere le sue proprietà a come “Content=OK” ed eredita le stesse proprietà del TextBlock.

A questo punto, per replicare gli “States” che sono stati definiti e trovate raffigurati nella prima immagine, accedete al “Visual State Manager” posizionatevi sul Rectangle e modificate il colore di background con un grigio più chiaro interagendo dal pannello proprietà.
Per replicare lo stesso colore di sfondo [background], anche allo States di “Pressed”, Blend 3 introduce una nuova funzionalità che vi permette di copiare rapidamente le proprietà da uno stato all’altro.
Banalmente, con MouseOver ancora attivo, tasto destro del mouse e selezionate “Copy State To > Pressed”. Il comando è applicabile anche dal menù “Tools”.

A questo punto spostiamoci sullo States Pressed per spostare leggermente il testo, selezioniamo l’elemento “ContentPresenter” e modifichiamo la proprietà “RenderTransform.Translate.X and .Y a “1”.
Procediamo con lo stato “Disabled”, selezioniamo il rettangolo e togliamoli lo sfonfo “Fill” rendendolo trasparente e modifichiamo le proprietà dello Stroke a grigio chiaro.

Per rendere il più reale possibile gli effetti di transizione da uno stato all’altro, vi ricordo che è possibile gestire le transizioni dal VisualStateManager, banalmente posizioniamoci su “Normal”, clicchiamo sul button per aggiungere e definire una nuova “Transition” e selezioniamo “Normal > MouseOver”.

Impostiamo la duration a “0,2s”. In questo modo abbiamo applicato un effetto di transizione, attualmente tutti gli altri passaggi da uno stato all’altro avvengono istantaneamente ma come potete intuire allo stesso modo avrei potuto definire le diverse transizioni.

Se notate in particolare la grafica del “button” sulla prima immagine, si è ipotizzato di far apparire una cornice azzurra quando il bottone si trova nello stato “Focused”. Il rettangolo non è attualmente presente begli elementi grafici di base contenuti nel nostro “button” nello “states” Normal. Bisognerà quindi procedere e crearlo al suo interno. Creare un nuovo oggetto all’interno di uno stato viene definito “drawing into state’” ciò sta a significare che l’oggetto sarà visibile solo nello stato in cui è definito. Questa funzionalità può essere molto utile anche per altri controlli.
Selezioniamo quindi “Focused”, inseriamo un nuovo rettangolo (leggermente più piccolo) facendo doppio click sullo strumento rettangolo. A questo punto vogliamo modificare le dimensioni ed il riempimento del nuovo rettangolo ma in questo caso vogliamo effettuarle sullo “States Base”. Non possiamo attivare lo stato “Base” in quanto sullo stato “base” il rettangolo non è presente, a questo punto disattiviamo quindi la registrazione premendo o da tastiera [CTRL + R] o interagendo sull’icona riquadrata in rosso nell’immagine seguente. Modifichiamo quindi le proprietà di “Fill”, “Margin” e “Stroke” e applichiamo i margini arrotondati.

Se volete creare il button leggermente più dinamico, potete inserire un’animazione “steady-state animation” nello stato “Focused”. Selezionate lo stato “Focused”, e cliccate sull’icona per attivare e gestire un’animazione all’interno dello stato (riquadro rosso).

A lato del Object Tree, vi apparirà per esteso la maschera di gestione delle “timeline” ed in questo modo potrete definire la vostra animazione con eventuali effetti di “easing in” e “easing out” da applicare ai “keyframe” che costituiscono l’animazione.

Come personalizzare un controllo in Silverlight 3 attraverso gli "styles" ed i "control template"

Roberto Cavallini — Fri, 04 Sep 2009 13:44:00 GMT

Come ho già più volte avuto modo di sottolineare, a mio avviso, una delle potenzialità di XAML sia in WPF sia per applicazioni Silverlight è la possibilità di andare a creare degli elementi/controlli dell'interfaccia grafica personalizzandone il comportamento e l'interazione attraverso gli "stili e i template". Molto simili ai CSS disponibili nell'HTML, ma per certi versi molto più potenti, permettono di definire l'aspetto grafico e il comportamento dei controlli che caratterizzano l'interfaccia dell'applicazione. Come nei CSS, una volta definito gli stili che possono essere interni allo XAML dell'interfaccia o gestiti esternamente attraverso uno XAML esterno - "resource dictionaries" (funzionalità già disponibile in WPF e recentemente introdotto nella nuova versione di Silverlight) è possibile applicare gli stili ai controlli dell'interfaccia. Banalizzando molto la cosa, a tutti i "button" dell'applicazione è possibile associare lo stesso stile in modo che l'applicazione abbia un aspetto grafico omogeneo, gestendo il tutto con dei "resource dictionaries" esterni, è possibile cambiare l'aspetto e l'interazione dell'applicazione facendo caricare dei "resource dictionaries" diversi.

Per definire e modificare gli stili, il modo più semplice ed immediato è quello di utilizzare Expression Blend che permette in modo rapido ed efficace di creare, modificare e gestire gli stili direttamente in "design mode". Le modalità di operare possono essere sostanzialmente due:

- partire da un controllo di base disponibile nell'Asset Library di Blend (button, check box, slider, etc,) duplicare il "Control Template" banalmente facendo tasto destro del mouse sopra il controllo sull'area di lavoro "Edit a Copy" ed operando in questo modo è possibile definire un nuovo stile che è possibile poi riassociare a tutti i controlli della stessa tipologia all'interno della pagina. Chiaramente all'interno dello stile è possibile poi definire la grafica e il comportamento (attraverso l'uso degli "State" nel "Visual State Manager");

- una volta creati gli elementi grafici che caratterizzeranno il controllo, trasformare il tutto in "controllo" attraverso il comando "Make Into Control..." ed in questo caso definire la tipologia del controllo attraverso lo stile. Per attivare il comando "Make Into Control..." è possibile procedere o facendo direttamente ancora una volta tasto destro e selezionando dal menù a tendina o dal menu "Tools". (Questa nuova funzionalità è disponibilie all'interno della nuova versione di Expression Blend 3 che anche sotto questo punto di vista introduce una serie di novità molto interessanti).

Come ho già detto, il concetto di stili e template sono una dei concetti base di XAML sia in WPF sia in Silverlight e sono già disponibili dalle versioni precedenti; con la nuova versione di Expression Blend 3 è migliorata notevolmente la gestione e definizione degli stili e dei template dal punto di vista grafico rendendo la cosa molto più semplice ed intuitiva.

Vediamo quindi insieme come è possibile definire uno stile per un semplice controllo quale potrebbe essere uno "Slider" partendo dagli elementi grafici in un'applicazione Silverlight 3.
Lo step zero della nostra demo, è quello di importare tutti gli elementi che caratterizzeranno il nostro controllo all'interno del progetto Silverlight in Blend. La grafica degli elementi è stata definita e disegnata in precedenza attraverso Illustrator. Sfruttando quindi una delle nuove funzionalità di Blend 3 è possibile importare e convertire tutti gli elementi grafici in XAML all'interno di Blend. Un paio di consigli, trattandosi di uno "Slider", concettualmente il controllo dovrebbe essere strutturato in due parti: un elemento "Thumb" con cui l'utente potrà interagire e un elemento "Track" su cui il "Thumb" dovrà scorrere. Chiaramente i due elementi potranno essere composti a loro volta da più elementi grafici ma il consiglio che vi do è quello di raggruppare e strutturare i "sottoinsieme" grafici di ogni elemento il un controllo di layout contenitore che potrebbere essere banalmente una "Grid" e un "Canvas". Il secondo accorgimento è quello poi di raggruppare i due elementi in un altro contenitore esterno che contenga entrambi i due elementi "Thumb e Track", in questo caso specifico per lo "Slider" bisogna utilizzare un'altra "Grid" che come vedremo andra poi strutturata e suddivisa in righe e colonne. Premetto nel nostro esempio andremo a realizzare uno "Slider" ad orientamento "Horizontal" e che quindi andrà utilizzato in posizione orizzontale. Vi riporto nell'immagine qui sotto un esempio molto semplice di grafica, mentre a questo link trovate un esempio leggermente più complesso, che sarete poi in grado di downlodare, in cui per simulare il comportamento dello Slider è stato applicata una funzione di "Data Binding" con un effetto "Blur" a sua volta applicato ad un'immagine presente all'interno dell'interfaccia.

Next step, procediamo a convertire la "Grid" contenitore in "controllo", come vi ho già anticipato attraverso il comando "Make Into Control...>Slider" ed in questo modo andremo a definire lo Stile. Per l'esempio possiamo tranquillamente definirlo nel "documento" e non come "resource dictionaries" - vedi opzioni in basso sulla maschera di definizione dello stile.

Procediamo quindi e suddividiamo la "Grid" in 3 Colonne come raffigurato nell'immagine qui sotto, idealmente la suddivisione dovrebbe essere in coincidenza con l'elemento "Thumb". Un'altra cosa da fare attenzione, in questo istante ci troviamo all'interno del "Control Template" del controllo che è definito all'interno dello "Stile". Nel "object tree" dell'applicazione dovreste avere indicato il nome dello stile che avete appena definito.

Se avete operato in modo corretto, l'elemento "Track" dovrebbe trovarsi in comune sulle 3 colonne e nelle proprietà avere quindi un "ColumnSpan=3", mentre il Thumb dovrebbe essere posizionato nella "Column=1": A questo punto, sempre all'interno dello stile bisogna procedere e convertire la Grid che contiene i due elementi "Track e Thumb" in "HorizontalTemplate". Operiamo in questo modo, sul VieeTree, attivate e selezionate la "Grid", fate tasto destro del mouse sopra la "Grid" e selezionate semplicemente "Make Into Part of Slider > HorizontalTemplate".

A questo punto selezionate "Thumb" e con lo stesso criterio di sopra applicate "Make Into Part of Slider > HorizontalThumb", in questo modo state definendo lo stile ed il control template da applicare all'elemento "Thumb", temporaneamente usciamo da questo stile interagendo con il comando "Scope up" sul Object Tree dell'applicazione e facciamo il "reset" dei margini dal pannello proprietà.

Selezioniamo quindi "HorizontalTemplate" nel object tree, dal pannello "Parts", novità di Blend 3 se non vi appare di default potete attivarlo interagendo all'interno del menù Windows, fate doppio click su "HorizontalTrackLargeChangeDecreaseRepeatButton" ed impostate l'opacity a "0" sul pannello delle proprietà. Riselezionate "HorizontalTemplate" e fate la stessa operazione anche per "HorizontalTrackLargeChangeIncreaseRepeatButton" impostando l'opacity a "0". Abbiamo praticamente concluso, modifichiamo a questo punto le dimensioni delle 3 colonne della Grid di "HorizontalTemplate" in "Auto, Auto e Star".

Lanciamo quindi la Build dell'applicazione, facendo "F5" da tastiera ed il tutto verrà caricato all'interno della finestra browser di "test". Dietro le quinte Blend 3, compila anche il progetto creando il file "XAP" che conterrà le DLL e lo XAML del progetto e la pagina HTML che vi permette di testare l'applicazione.

Nell'esempio completo che trovate disponibile a questo link, è stato inserito anche un "data binding" sull'effetto "blur" applicato all'immagine impiegata nell'esempio. Se siete interessati, nel prossimo post, descriverò come applicare questa funzionalità di "data binding" attraverso Blend 3.

Introduzione a XAML: percorso formativo

Roberto Cavallini — Thu, 03 Sep 2009 16:13:00 GMT

"Introduction to XAML" vi segnalo un interessante percorso formativo specifico su XAML (eXstensible Application Markup Language), il linguaggio di markup dichiarativo di derivazione dall'XML alla base delle applicazioni Windows Presentation Foundation e Silverlight. Attraverso lo XAML è possibile definire i controlli, l'albero grafico, l'interazione e le animazioni delle applicazioni mantenendo separata l'interfaccia grafica dal "code behind" dell'applicazione. In questo modo, designer e developer possono lavorare in modo sinergico sullo stesso progetto con tool e strumenti specifici per i propri compiti e professionalità: Expression Studio 3 e Visual Studio 2008.

Il taglio del corso è abbastanza tecnico, ma ritengo possa essere d'interesse anche ad un target più allargato. Potete accedere direttamente al corso da questo link, è richiesta la registrazione attraverso un account Windows Live.

Vi ricordo inoltre che sul nostro portale video BE IT, sono disponibili una serie di webcast specifici su Silverlight e sullo sviluppo Web.

"Expression Blend Sample" disponibili nella Community Expression

Roberto Cavallini — Wed, 26 Aug 2009 17:29:00 GMT

Buon rientro a tutti!
Spero che anche voi abbiate avuto modo di riposarvi e ricaricare un po' le pile...pronti per le nuove "avventure" autunnali ;)
A poche ore dal rientro in ufficio, devo dire che queste vacanze hanno portato una serie di interessanti novità che credo valga la pena riassumervi brevemente.

Per prima cosa vi segnalo che sulla Community ufficiale dei prodotti Expression sono stati resi disponibili i progetti ed il codice sorgente degli esempi di Blend.
Direttamente da questo link, potrete accedere alla Gallery della community e procedere con il download degli esempi.
Attualmente non sono ancora disponibili i primi esempi che erano stati distribuiti in pacchetto con la prima versione di "Expression Interactive Designer", vi invito quindi a visitare periodicamente la gallery in modo da trovare i vari aggiornamenti.

La gran parte di questi esempi, hanno una caratteristica comune, sono state realizzati dal mio collega Celso Gomes; tra l'altro autore del portale Nibbles Tutorial. Proprio all'interno di questo portale potete trovare degli utili tutorial, che descrivono "step by step", come sono stati realizzati alcuni di questi esempi.
Una buona palestra per prendere dimestichezza con Blend e per riempire, nel caso, questi ultimi caldi giorni di meritate vacanze.

Sempre in questi giorni, vi segnalo che è stata rilasciata su MSDN la documentazione in italiano su Silverlight 3. Il taglio di questi articoli è abbastanza tecnico, ma credo possa sempre valerne la pena darne una lettura. La raccolta degli articoli è anche disponibile al download al seguente link.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Infine, vi segnalo un altro interessante progetto che è stato presentato ad inizio di agosto: "Mess with Silverlight", si tratta di un blog in cui è stata coinvolta un'agenzia creativa di Chicago "Mess Marketing" abitualmente autrice di progetti in ambiente MAC in Flash e tecnologia "competitive" a cui è stato chiesto di raccontare le loro esperienze nell'adottare e nello sviluppare progetti in Silverlight attraverso Expression Studio 3. Day by day troverete descritte e raccolte le esperienze sui progetti dal team creativo coinvolto.

Come avrete avuto più volte modo di apprendere, una delle potenzialità offerte da Expression Studio 3 è la capacità di lavorare in piena interoperabilità con gli strumenti della famiglia Adobe (Photoshop ed Illustrator) in modo da ottimizzare e ridurre drasticamente le tempistiche di realizzazione di un progetto.

Nelle prossime settimane, pubblicherò una serie di webcast - registrati durante la pausa estiva ;) - che descriveranno ed illustreranno tali potenzialità.
Stay tuned e buon lavoro ancora a tutti!

Silverlight 3 ed Expression Blend 3 SketchFlow: una serie di risorse utili per iniziare a sperimentare.

Roberto Cavallini — Wed, 15 Jul 2009 13:53:00 GMT

Mea culpa! J Il taglio dei miei ultimi post sono stati decisamente monopolizzati dagli importanti annunci che hanno scandito questi ultimi giorni, le novità correlate a Silverlight 3, Expression Studio 3 e Blend 3 sicuramente meritano le dovute attenzioni.
Credo sia però fondamentale cercare di sperimentare e provare nel minor tempo possibile le nuove funzionalità disponibili in Silverlight 3 ed Expression Blend 3. Vi anticipo che sto lavorando sulla redazione di una serie di mini video in pillole dove cercherò di darvi una completa overview sulle nuove funzionalità disponibili con le nuove versioni dei prodotti.
Nel frattempo, l’idea è quella di segnalarvi una serie di riferimenti e link utili che vi potranno dare un aiuto nell’iniziare a sperimentare lo sviluppo di applicazioni Silverlight 3 attraverso Expression Blend 3 Sketch Flow. (Le risorse riportate di seguito, sono tutte in lingua inglese.)

Expression Community
In parallelo all’uscita di Silverlight 3 e Blend 3 è stata anche lanciata ufficialmente la nuova Community ufficiale dei prodotti Expression. All’interno potete trovare una serie di materiali e white paper dedicati ai singoli prodotti.
Nello specifico in concomitanza con il lancio di Silverlight 3, sono usciti una serie di video introduttivi su Blend 3 ed Expression Web 3. Per accedere all’area dedicata alla formazione della community potete usare il seguente link.

All’interno della Community trovate uno spazio dedicato alla Gallery, dove sono raccolti una serie di materiali condivisi dalla communityutenti Expression: Web Template, Behavior, Themes, etc.

Nibbles Tutorials
Grandi novità anche all’interno di Nibbles Tutorial, è stata inserita una nuova sezione dedicata a degli esercizi “step by step”, attualmente sono disponibili due esercitazioni, una dedicata allo sviluppo dell’applicazione “Zune 3D”, contenuta tra gli esempi di Expression Blend 3 e una sulla realizzazione di un prototipo attraverso le funzionalità di Blend & SketchFlow. All’interno dell’area dedicata agli esempi, trovate disponibili anche alcuni behavior downlodabili.

Electric Beach by Christian Schormann
Negli scorsi giorni il mio collega di Corp di Christian ha pubblicato un interessante ed esaustivo post su Blend e SketchFlow, vi invito a darle una lettura. Punto per punto vengono descritte le principali funzionalità per creare in pochi minuti il prototipo della vostra applicazione e dare forma velocemente alle vostre idee. Il blog di Christian merita sicuramente una visita quotidiana troverete raccolti utili esempi e tutorial.

Dynamic Prototyping with Expression Blend 3
Due miei colleghi UXe di Corporation, hanno appena pubblicato il primo capitolo dedicato alle teorie di SketchFlow attraverso Expression Blend 3. Il tutto è disponibile sul sito dedicato al libro, a questo link.

Expression Blend Sample – Raccolta di Behaviors/Effects
Sempre in merito ai behaviors e a come gestire l’interazione all’interno di Blend 3 senza scrivere codice, vi segnalo una raccolta di behaviors disponibile su Codeplex – il file per l’installazione si trova su questa pagina. Una volta installati sul vostro PC, dovete aggiungere le DLL al vostro progetto Silverlight 3 (C:\Program Files\Microsoft Expression\Blend 3 Samples\Silverlight) e fatto ciò compariranno all’interno dell’asset library nella categoria “behaviors” ed “effects”.

Nei prossimi giorni pubblicherò ulteriori riferimenti, stay tuned! J

"XAML Fest" - Live dal 1 al 5 Giugno 2009

Roberto Cavallini — Wed, 13 May 2009 21:08:00 GMT

Vi segnalo questa interessante iniziativa in programma ad inizio Giugno dedicata alla formazione su Expression Blend per Designer. Nel corso di questa settimana potrete partecipare ad una serie di seminari formativi dedicati a Blend e alla progettazione della "user interface" di un'applicazione.

Vi riporto qui sotto il link all'agenda dell'evento online con il titolo e i link per la registrazione:

"XAML for Designer" - 1 Giugno 2009 - ore 18:00

"Layouts and Controls in Blend" - 2 Giugno 2009 - ore 18:00

"New Prototyping feautures in Blend 3" - 3 Giugno 2009 - ore 18:00

"Styles, Resources, Templates and Animations" - 4 Giugno 2009 - ore 18:00

"Using Blend to Create WPF Apps and Controls" - 5 Giugno 2009 - ore 18:00

Su questa pagina trovate l'elenco completo dei seminari live e on "demand".

IMPORTANTE: "Per partecipare ai seminari, è necessario completare la registrazione a questo link."

Stay tuned!

SilverZine: nuove risorse per il design in Silverlight

Roberto Cavallini — Wed, 29 Apr 2009 13:16:00 GMT

Siete sempre alla ricerca di nuove risorse specifiche per il design della UI di un'applicazione Silverlight?
Vi segnalo SilverZine - "Silverlight resources for Designer", un interessante portale dove potrete trovare tutorial e risorse specifiche su Expression Blend ed i tool della famiglia Expression Studio.

I materiali attualmente disponibili non sono ancora molti, il portale è appena nato!
Ma la qualità dei contenuti è veramente interessante e vi puo aiutare a fare le prime sperimentazioni su progetti in Silverlight.

Da questo link potrete direttamente accedere all'area Tutorial del portale.

Expression Community: nuova serie di materiale formativo su Silverlight, Deep Zoom ed Expression Web

Roberto Cavallini — Fri, 13 Mar 2009 19:09:00 GMT

Prendendo spunto da un post sul blog del mio collega Arturo Toledo - Product Manager per UX Platform & Tools,
vi segnalo una serie di nuovi materiali formativi su Silverlight ed Expression Studio, molto utili per sperimentare con i primi progetti.

Alcuni video sono anche disponibili sulla Community ufficiale di Expression, di seguito l'elenco completo suddiviso per argomenti.

Silverlight 2 & Deep Zoom: ecco i riferimenti al download dei primi 4 video dei 6 in previsione.
download video Silverlight & Deep Zoom (ZIP Files - 58MB) >>

Vi ricordo inoltre che l'ultima versione di Deep Zoom Composer è disponibile a questo link >>

Silverlight for Designer getting started guide: i contenuti di questi 11 video, prodotti da AGI (by AQUENT), costituiscono un percorso formativo completo
dalle basi su Silverlight alla realizzazione di progetti complessi. Troverete disponibili sulla Community anche i manuali e gli esempi utilizzati nei video.
Accedi al training sulla Community >>

Expression Web Starter Kit: troverete le nozioni fondamentali su come sviluppare un portale Web conforme agli ultimi standard, ricordo che i video sono visualizzabili online e downlodabili in locale sul proprio PC.
Accedi al training sulla Community >>

UI design for developers series: in ultimo, vi segnalo un interessante percorso formativo dedicato ai nostri colleghi sviluppatori sui concetti fondamentali per il design dell'interfaccia grafica.
Il training è stato sviluppato in collaborazione con Total Training, vi riporto l'elenco completo dei moduli, i riferimenti ai video e al download degli asset di progetto:

01 Learning about Balance using Expression Design | Video | Assets|

02 Learning about Rhythm using Expression Design | Video | Assets |

03 Learning about Emphasis using Expression Design | Video | Assets |

04 Learning about Symmetry and Asymmetry using Expression Design | Video | Assets |

05 Learning about Unity using Expression Design | Video | Assets |

06 Learning about Points, Lines, and Form using Expression Design | Video | Assets |

07 Choosing Colors to Complement Your User Interface with Expression Design | Video | Assets |

08 Experimenting with User Interface Colors with Expression Design | Video | Assets |

09 Creating Mosaic and Tiled Patterns using Expression Design | Video | Assets |

10 Learning to Create Icons using Expression Design | Video | Assets |

11 Creating a Sample Icon using Expression Design | Video | Assets |

12 Designing a Glassy Button using Expression Design | Video | Assets |

13 Applying Effects to Bitmap Images using Expression Design | Video | Assets |

Expression Blend 2 & WPF: disponibili una prima serie di webcast

Roberto Cavallini — Tue, 10 Mar 2009 20:20:00 GMT

Vi segnalo che sono disponibili online sulla nuova piattaforma video di MSDN, i primi video di un percorso formativo dedicato
allo sviluppo di un applicativo Windows Presentation Foundation (WPF) attraverso Expression Studio.

Questi 4 webcast sono i primi di una serie di webcast che produrrò nelle prossime settimane e che fanno parte di un percorso
formativo dedicato allo sviluppo di applicazioni WPF. Nel corso delle esercitazioni verranno affrontati argomenti specifici sullo sviluppo
dell'interfaccia utente attraverso gli strumenti dei prodotti Microsoft Expression.

La prima esercitazione è focalizzata sull'utilizzo degli styles, dei templates e dei resource dictionary all'interno di Blend 2.

Qui sotto trovate i riferimenti ai singoli video e il download dei file sorgenti del progetto.

· Expression Blend 2 - Styles, Templates & Resource Dictionary - Parte 1 (45’ min.)

· Expression Blend 2 - Styles, Templates & Resource Dictionary - Parte 2 (38’ min.)

· Expression Blend 2 - Styles, Templates & Resource Dictionary - Parte 3 (55’ min.)

· Expression Blend 2 - Styles, Templates & Resource Dictionary - Parte 4 (27’ min.)

Expression Blend 2 - Stiles, Templates & Resource Dictionary (download progetto)

Se avete argomenti o tematiche da suggerirmi, vi ricordo il mio indirizzo mail: roberto.cavallini@microsoft.com

Silverlight 2 & Nibblestutorial: nuovi esempi disponibili.

Roberto Cavallini — Fri, 07 Nov 2008 13:42:00 GMT

Vi segnalo una serie di nuovi esempi e tutorial disponibili al sito http://www.nibblestutorials.net/
All'interno di questo portale troverete downlodabili una serie di tutorial su Silverlight 2 e Windows Presentation Foundation (WPF).

Di securo interesse questa semplice applicazione demo X Tune Up, trovate un'anteprima a questo link.

Scopriamo insieme come è possibile realizzare un progetto di questo tipo in Silverlight 2, a questo link trovate tutto il codice sorgente e il progetto in Expression Blend 2. Per la visualizzazione dovete installare la Service Pack 1, disponibile a questo link.

All'intero del portale trovate anche un interessante sezione dedicata allo sviluppo "step-by-step" che vi aiuterà a sperimentare le nuove funzionalità disponibili in Blend 2: Visual State Manager e Template Editing Skin Control.

Nelle prossime settimane, saranno anche disponibili una serie di video tutorial, molto utili per aiutarvi e supportarvi nella sperimentazione dei vostri progetti in Silverlight 2 e WPF.

Stay Tuned!

Nokola.com: risorsa della settimana #1

Roberto Cavallini — Thu, 18 Sep 2008 16:38:00 GMT

Con questo primo post ufficiale darò inizio ad una nuova rassegna settimanale all'interno del mio blog dedicata alla segnalazione di risorse e materiali utili dedicata a Silverlight, Windows Presentation Foundation ed Expression Studio. Ogni giovedì, segnalerò e pubblicherò una risorsa, un link di riferimento per facilitarvi a sperimentare.
Penso sia capitato a tutti, di ricercare qualche esempio, di progetti downlodabili online su come riuscire ad implementare un particolare effetto da inserire e riutilizzare all'interno di un proprio progetto; trovare qualche esempio da cui prendere spunto, da adattare e replicare...
In risposta a quesiti di questo tipo cercherò di segnalarvi settimanalmente un "link" di riferimento ad un blog, un web site, ai portali legati a tematiche e problematiche di sviluppo su Silverlight e Windows Presentation Foundation ed Expression Studio soppratutto per indirizzare persone come me che " per propria natura non amano molto il codice e la programmazione", alla ricerca di aiuto nello sviluppo "auto-didatta" di progetti prendendo spunto da esempi già esistenti.

La risorsa di questa settimana è Nokola.com, raccolti all'interno di questo sito, troverete downlodabili una serie di interessanti esempi sviluppati in Silverlight 2. Dal semplice esempio, che illustra come sviluppare un menù di navigazione alla gestione di un intro di "loading" per un'applicazione più complessa. Potete tranquillamente aprire i progetti con la nuova versione in preview di Expression Blend 2.5, modificare gli elementi grafici mantenendo inalterara la parte di "code-behind" per le funzionalità avanzate del progetto.

Vi rimando quindi all'appuntamento settimanale del giovedì dedicato alle nuove risorse disponibili.

Stay tuned!