Discussion about Design, Technologies and User eXperience : Risorse utili

Anteprime Silverlight 4 @ pdc09

Roberto Cavallini — Thu, 19 Nov 2009 23:22:00 GMT

Proprio poche ore fa, @ pdc'09 abbiamo avuto le prime anticipazioni sulle nuove funzionalità che saranno incluse nella nuova versione del plug-in attualmente in Beta! La keynote del secondo giorno dell'evento è stata praticamente "monopolizzata" da questo...(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 Studio 3: now is live!

Roberto Cavallini — Wed, 22 Jul 2009 19:59:00 GMT

Cosa state aspettando!

A pochi giorni dal rilascio ufficiale della nuova versione di Silverlight 3 è ora disponibile al download la nuova versione di Expression Studio 3.

Tante le novità correlate ad ogni singolo prodotto, Web 3 e SuperPreview, Blend 3 e SketchFlow, Encoder 3 e il supporto per l'encoding video erogabili attraverso Smooth Streaming, nell'ottica di offrire un prodotto sempre più completo e che si integri perfettamente nel workflow di lavoro di design e progettazione dell'interfaccia utente di applicazioni Silverlight, WPF e portali Web in ASP.NET, PHP ed X/HTML conformi agli ultimi standard di mercato.

Vi invito ad accedere alla pagina di download per scaricare la nuova versione di Expression Studio 3.

Nei prossimi giorni vi segnalerò una serie di materiali in merito.
Stay tuned!

Una serie di video che presentano le nuove funzionalità di Silverlight 3

Roberto Cavallini — Thu, 16 Jul 2009 12:32:00 GMT

Vi segnalo questa interessante raccolta video dove vengono presentate le nuove potenzialità di Silverlight 3.
Inoltre da poche ore è visibile all'interno del portale "See the Light", dedicato al lancio ufficiale di Silverlight 3, il video "The Visual Kitchen" che raccoglie una serie di demo e case histories presentati la scorsa settimana durante l'evento di lancio. Buona visione!

Deep Zoom Composer: un po' di risorse utili per sperimentarne le nuove funzionalità

Roberto Cavallini — Thu, 16 Jul 2009 12:04:00 GMT

Come già accennato in un mio precedente post, la nuova versione di Deep Zoom Composer supporta una serie di interessanti funzionalità che vi permettono di creare in pochi semplici step le gallery Deep Zoom da inserire all'interno di un'applicazione Silverlight.

In merito a queste nuove funzionalità, vi segnalo una serie di articoli che affrontano in dettaglio come poter impiegare queste nuove funzionalità:

Creating a menu in Deep Zoom Composer

SlideShow Support in Deep Zoom Composer

Adding link in Deep Zoom Composer

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

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

Novità: Expression Studio 3, Blend 3 + SketchFlow e Deep Zoom Composer (RC July 2009)

Roberto Cavallini — Tue, 14 Jul 2009 16:14:00 GMT

A poche ore dal lancio ufficiale di Silverlight 3, tante le novità correlate agli strumenti per lo sviluppo.

Come potete intuire, in parallelo del lancio di Silverlight 3 è stata presentata anche la nuova versione dei prodotti Expression Studio 3: composta da Design 3, Encoder 3, Web 3 + SuperPreview e Blend 3 + SketchFlow.

Trovate tutte le informazioni inerenti ai prodotti sul nuovo portale “microsoft.com/expression” (a breve andrà online anche la versione con i contenuti italiani), attualmente risulta disponibile al download Expression Blend 3 + SketchFlow mentre gli altri prodotti saranno disponibili entro fine mese. Tralascio ulteriori informazioni di rito sui prodotti e vediamo insieme alcune delle novità funzionali correlate alla nuova versione di Blend 3 + SketchFlow.

In parte ne avevo già parlato nei precedenti post, a seguito di MIX’09, le nuove funzionalità abilitano Blend 3 allo sviluppo di progetti Web e RIA in Silverlight 3 e Windows Presentation Foundation.
Inoltre grosse novità per la realizzazione dei concept/prototipi di progetto dinamici attraverso SketchFlow.
Il workflow di progetto “dal concept” al “progetto reale”, risulta più efficace ed ottimizzato sia dal punto di vista del design di un’applicazione sia l’integrazione con i nostri colleghi sviluppatori per la gestione del code behind di un’applicazione complessa. Vi ricordo che un progetto Silverlight/WPF di Blend può essere tranquillamente aperto e gestito, senza bisogno di nessun step di conversione, in Visual Studio.

Riporto di seguito alcune tra le più importanti novità disponibili in Expression Blend 3 + SketchFlow.

Behaviors: attraverso i behaviors, già introdotti in precedenza, sarete in grado di applicare l’interazione agli elementi della vostra applicazione facendo una semplice operazione di “drag & drop”. I behaviors sono inoltre tranquillamente riutilizzabili, devi veri e propri “building block di codice”, in altri progetti, molto simili al concetto di librerie di codice per gestire l’interazione di un’applicazione.

Intellisense: Blend 3 supporta le funzionalità di "intellisense" sia per lo XAML, che definisce l'interfaccia grafica, sia sul codice di "code behind" di un'applicazione C# e/o VB.NET senza bisogno di impiegare Visual Studio.

Import da Adobe Photoshop ed Illustrator: in Blend 3 è disponibile la funzionalità di "import" dei files ".psd ed .ai", piena compatibilità con la gerarchia ed organizzazione dei layer e dei testi che costituiscono l'interfaccia grafica. Attraverso una specifica "maschera di gestione import dei files", sarete in grado di selezionare, organizzare e raggruppare i layer contenuti nel file - gli elementi vettoriali che costituiscono l'interfaccia verranno definiti attraverso lo XAML ed eventuali testi potranno essere mantenuti modificabili (font, dimensione, carattere, etc) e/o convertiti in vettoriale.

Sample Data: attraverso le funzionalità di "sample data", potrete usufruire di fonte dati di esempio in "design time", in modo da simulare e sperimentare il comportamento degli elementi della vostra interfaccia con la fruizione ed il caricamento dei dati. Tale funzionalità è molto utile per la definizione degli stili e del comportamento sui controlli che costituiscono l'interfaccia. Rimane inoltre disponibile anche l'import e la gestione di fonte dati di testing provenienti da file XML. Definita in "design time", l'aspetto e l'interazione sui dati di esempio è possibile in modalità "runtime" collegare e caricare delle fonte dati reali.

Supporto di TFS: Blend 3 supporta inoltre Visual Studio Team Foundation Server (TFS) - per la gestione delle funzionalità di source control "check in/check out" dei progetti in sviluppo.
Ho volontariamente citato solo alcune delle principali novità funzionali di Blend 3, trovate una raccolta di contenuti di approfondimento sui seguenti post dei vari team di prodotto:

Overview of New Features in Expression Blend 3 + SketchFlow: Part 1
Overview of New Features in Expression Blend 3 + SketchFlow: Part 2
Overview of New Features in Expression Blend 3 + SketchFlow: Part 3
SketchFlow Concepts: an overview

Deep Zoom Composer Update (release candidate)
Inoltre è stata presentata ufficialmente ieri, una nuova versione di Deep Zoom Composer (July 2009 - release candidate).
La trovate disponibile al download in questo link (vi ricordo, nel caso, di disinstallare le precedenti versioni prima di procedere con l’installazione). Oltre alle precedenti utili funzionalità, introdotte già nella versione precedente (trovate un post di dettaglio a questo link), in questa nuova versione è stata ripristinata una funzionalità che era già stata disponibile in una delle versioni precedenti e che era stata temporaneamente disattivata. Una volta creata la vostra composition, in fase di “export” della collection è possibile esportare sia le immagini sia il codice di progetto in modo da poterlo aprire direttamente attraverso Expression Blend 3.

Silverlight 3: now is live!

Roberto Cavallini — Fri, 10 Jul 2009 20:35:00 GMT

Da poche ore è disponibile la versione finale di Silverlight 3 - RTM (release to market), presentate in anteprima alcune funzionalità della nuova release lo scorso marzo a MIX'09 e la versione del plugin in Beta per iniziare a sperimentare - da oggi potrete progettare e sviluppare applicazioni in Silverlight 3. Oltre alla nuova release del plugin, trovate disponibili a questo link (http://www.seethelight.com), la nuova versione dell'SDK e i tool per lo sviluppo attraverso Visual Studio 2008.

Post update: trovate a questo link disponibile al download la versione di Expression Blend 3 + SketchFlow

Vi segnalo inoltre un interessante post di dettaglio sulle nuove funzionalità di Blend 3 sul blog del mio collega Christian Schormann, disponibile a questo link.

Nei prossimi giorni pubblicherò una serie di "mini pillole" e approfondimenti sulle nuove funzionalità supportate dai tool della famiglia Expression Studio.
Stay tuned!

Expression Blend & behaviors: l'interazione a portata di "click"...

Roberto Cavallini — Fri, 26 Jun 2009 18:11:00 GMT

Come credo, abbiate avuto modo di valutare, una delle importanti novità che caratterizza Expression Blend 3 Preview e Silverlight 3 Beta sono i "behavior": veri e propri "building block" di codice, utili a definire e associare in modo semplice e veloce l'interazione e le animazioni all'interno di un'applicazione Windows Presentation Foundation (WPF) e Silverlight. Attraverso l'uso dei behavior sarete in grado, senza l'esigenza di scrivere nemmeno una riga di codice, associare l'interazione e lanciare le animazioni che caratterizzeranno la vostra applicazione. In Expression Blend 3, saranno disponibili una serie di behavior che costituiscono l'asset di base - nell'"asset library" - per gestire le classiche "interazioni" (lanciare un'animazione, eseguire un video, aprire una pagina Web all'interno di un browser, etc), ma una delle potenzialità offerte dai behavior è quella di poterne facilmente costruire "custom" a seconda delle proprie esigenze di progetto. Per un overview su come un programmatore può facilmente costruire un vostro "behavior personalizzato" da riutilizzare, importandolo, all'interno di altri "n" progetti, vi rimando al post del mio "alter ego" Giuseppe Guerrasio - Architect Evangelist, dove descrive in dettaglio le dinamiche e le logiche per la definizione di un behavior dal punto di vista tecnico di sviluppo.

Dopo questa breve introduzione, vediamo ora da vicino, come è possibile utilizzarli all'interno di Blend 3.

Lo step iniziale della demo, sarà quello di downlodare la versione di Blend 3 RC, disponibile a questo link. Una volta installato, procediamo con la definizione di un nuovo progetto, in questo caso presupponiamo di voler realizzare un progetto Silverlight 3 (i behavior sono utilizzabili anche per lo sviluppo di applicazioni client WPF). La finalità di questo semplice esempio sarà quella di agganciare un behavior ad un bottone che mi permetta la gestione e l'apertura, al click sul bottone, di una pagina web in una nuova sessione del browser. Inseriamo quindi un semplice bottone e associamoli un semplice testo – banalmente "Click me" - modificando le proprietà di content del bottone all'interno del pannello "Property". Fatto ciò, avrete la vostra semplice applicazione con inserito il bottone, più o meno al centro dell'area di lavoro, ma attualmente al bottone non risulta associato nessun tipo di interazione. Qui entrano in gioco i behavior, all’interno della Gallery della Community di Expression, sono disponibili al downlod una raccolta di behavior di base che alcuni miei colleghi del team di Expression hanno messo a disposizione.

La gallery della community, vuole essere uno dei punti di riferimento dove condividere e mettere a disposizione behavior, template, esempi di codice, etc in modo da mettere a disposizione il “know how” con tutti gli utenti che ruotano intorno al mondo Expression e Silverlight.
Una volta scaricato il file "zip" contenente i behavior - all'interno troverete una cartella "SilverlightPreviewBehaviors" contenente a sua volta un’altra cartella con i "file" di progetto e una cartella denominata "Assembly" contenente due "dll" - "Microsoft.Expression.Interactivity.dll" e "SLPreviewBehaviors.dll".

Importiamo quindi le ".dll" all'interno del nostro progetto Silverlight 3 appena creato. Molto semplicemente, andando all'interno della maschera "Projects" in Expression Blend e facendo tasto destro sulla cartella "References" potrete aggiungere le "dll" scaricate dalla Gallery. Le due "dll" contengono al proprio interno una serie di behavior, che verranno resi disponibili all'interno dell'asset library nell'apposita sezione dedicata ai "behavior".
In conclusione, procediamo quindi ad associare uno dei behaviors che abbiamo appena importato nel progetto, come “reference”, al bottone presente all'interno dell'applicazione. ll behavior da utilizzare per il nostro esempio è "HyperlinkAction", come potete intuire permette di associare e gestire l'apertura di un nuova pagina Web alla correlazione di una specifica azione su un controllo presente all'interno della nostra interfaccia. Più semplicemente rifacendoci al nostro esempio - "al click sul bottone" -> “apri una nuova pagina all'interno di una nuova sessione del browser”. Semplicemente facendo "drag & drop" del behavior "HyperlinkAction" dall’asset library direttamente sopra il "bottone" all’interno della nostra applicazione. Il gioco è fatto, un minimo di configurazione del behavior all’interno del pannello “property” per associarne il comportamento all’interazione dell’utente.
Ma vediamo velocemente cosa comporta l’operazione di configurazione. Le proprietà del behavior, esposte all’interno del pannello proprietà, permettono in prima istanza di associare un “trigger” a cui agganciare l’azione. Il trigger determina esattamente la “causa” che scatenerà l’azione associata al behavior. Nel nostro caso aprire una nuova finestra browser. Di default l’evento è attualmente associato all’evento “loaded”, in questo caso per un bottone potrebbe avere molto più senso associarlo al comportamento “click” sul bottone.

Operando sul menù a tendina avrete modo di associarlo velocemente. Ultimo step, per il nostro esempio,definire l’url – l’indirizzo della pagina che si vuole far caricare nella nuova sessione del browser. Lanciamo quindi il “testing” dell’applicazione premendo “F5” da tastiera, verrà lanciata una finestra browser di test con all’interno il nostro bottone e al click sul bottone verrà lanciata una nuova sessione del browser con la pagina che è stata specificata nella configurazione del behavior.

Nelle precedenti versioni di Blend e Silverlight 2, per associare una semplice operazione di questo tipo, bisognava comunque scrivere un minimo di “code behind” al controllo e credo di non aver bisogno di conferme nell’ammettere che tali operazioni sono sempre state abbastanza “evitate” da persone, come me, che preferiscono occuparsi molto più del design e la progettazione dell’interfaccia grafica lasciando la parte di “code behind” ai nostri “alter ego” sviluppatori. Inoltre la loro modularità vi permetterà poi di riutilizzarli in altri progetti ottimizzando ulteriormente i tempi legati allo sviluppo di un progetto.

Expression Web 3: le prime anticipazioni prima del "rilascio estivo".

Roberto Cavallini — Tue, 09 Jun 2009 01:51:00 GMT

Dopo le prime anticipazione ufficializzate durante lo scorso MIX di Las Vegas, in cui sono state presentate alcune delle funzionalità principali disponibili con Expression Web SuperPreview per Internet Explorer (IE) vi segnalo un altro interessante articolo che svela un ulteriore serie di funzionalità che dovrebbero essere incluse in Expression Web 3 - disponibile durante la prossima estate.
Riassumendo velocemente alcune funzionalità disponibili in SuperPreview, in pochi semplici step permette di diagnosticare in "real time" gli eventuali problemi di visualizzazione riscontrabili sulle diverse versioni di browser. A quanto pare SuperPreview sarà integrato in Expression Web 3, mentre SuperPreview per Internet Explorer rimarrà "downlodabile for free".

Ma vediamone velocemente alcune caratteristiche peculiari di Expression Web 3.
SuperPreview:
Come già accennato, una delle funzionalità offerte da SuperPreview è la capacità di confrontare il layout di una pagina Web che viene visualizzata sul browser, come credo tutti sappiamo per esperienza, non tutti i browser si comportano allo stesso modo ed utilizzano motori di rendering diversi; risultà quindi molto importante e basilare confrontare i diversi comportamenti in modo da ottenere visualizzazioni il più fedele possibile su ogni piattaforma e browser. SuperPreview permetterà di visulizzare la pagina su più browser IE6, IE7, IE8 e Firefox 3. Potrete visualizzare le pagine "side-by-side", sovrapporle per evidenziare eventuali erorri di layout ed eventualmente sovrapporre la pagina con il layout grafico originale (immagine) sviluppato in Photoshop. Come potete vedere nell'immagine qui sotto, viene utilizzato SuperPreview per paragonare la modalità di rendering e visualizzazione di una pagina con Firefox 3 ed IE6.

Dalle prime anticipazioni di MIX'09, sono state aggiunte tutta una serie di nuove funzionalità: sarà possibile visualizzare l'HTML Document Object Model (DOM) della pagina Web su ogni browser. Selezionando un elemento grafico nella pagina renderizzata lo vedrete evidenziato nel DOM.

Inoltre, quando selezionate un elemento grafico in visualizzazione, vi apparirà anche una piccola finestra in overlay contenente una serie di informazioni aggiuntive: dimensioni, posizione "left & top"; quando questi valori si discostano uno dall'altro verrà evidenziato in rosso per segnalare l'anomalia nel rendering della pagina.

Vi capirà inoltre spesso di capire come viene visualizzata la pagina su diverse risoluzioni video, per assicurare che i visitatori abbiano la stessa esperienza anche da diverse tipologie di video. Per far fronte a ciò è disponibile una funzionalità che vi permetterà di selezionare e/o define una tra le risoluzioni elencate o specificarne una di riferimento.

Snapshot Preview
Come abbiamo potuto vedere all'opera, SuperPreview è un'ottima funzionalità per confrontare e validare la visualizzazione delle pagine , molte volte però è necessario avere un "colpo d'occhio" di come si comporta la pagina nel browser. In questa caso la funzionalità Snapshot Preview, fruibile anche da una specifica maschera all'interno di Expression Web 3 - vi permetterà di avere in locale l'anteprima della pagina HTML, ASPX e PHP con le modifiche apportate sul codice di markup aggiornate in "real time". Riducendo drasticamente i tempi di apertura e verifica su più browser.

Import dei layout grafici PSD
Ulteriormente ottimizzata anche la gestione e l'import dei layout grafici di Photoshop, un nuovo pannello di gestione e selezione dei layer, la possibilità di salvare i layer in immagini JPEG, PNG, GIF e ridimensionare l'immagine prima di salvare il contenuto del layer come immagine. Se il file originale verrà modificato, Expression Web 3 vi segnalerà la cosa chiedendovi di aggiornare i contenuti e le immagini importate.

Silevrlight Video
Expression Web 3 vi permetterà di importare, encodare ed inserire i contributi video - "on the fly" - supportando una serie di profili di encoding video attraverso Expression Encoder 3. Inoltre potrete scegliere tra una serie di player video diversi all'interno di Expression Web. Expression Encoder 3 supporterà high quality encoding VC-1 e H.264 per Silverlight Streaming.

Expression Web 3 supporterà inoltre il "source code control" attraverso Visual Studio Team Foundation Server e l'integrazione con Deep Zoom Composer per la visualizzazione di immagini ad alta definizione sul Web.

In questa pagina, trovate l'articolo completo con il dettaglio di tutte le funzionalità che sono state già presentate.

Stay tuned per i prossimi annunci.