Discussion about Design, Technologies and User eXperience : Expression Studio

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.

"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!

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!

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.

Silverlight & Smooth Streaming LIVE: in diretta HD su Rai.tv le partite della nazionale italiana

Roberto Cavallini — Thu, 18 Jun 2009 15:31:00 GMT

A pochi giorni dai primi calci del torneo "Confederation Cup" - anche Silverlight riveste "un posto in prima fila".

Potrete seguire le dirette Web in formato HD delle partite della Nazionale Italiana dal portale Rai.tv attraverso un player Silverlight.
Attraverso una Beta della tecnologia Smooth Streaming Live, collegandovi al seguente link durante lo svolgimento della partita avrete modo di sperimentare la visualizzazione di un contenuto video ad alta qualità per un evento live.
Lo streaming adattativo offerto da Silverlight Smooth Streaming Live (attualmente in beta) vi permetterà di vedere il video in formato HD (streaming via http:// - 1080i) a seconda delle potenzialità della vostra banda e dalle performance della CPU del vostro PC. Il plugin scaricherà i primi frammenti del video live al bitrate di qualità più bassa ed incrementerà la qualità del video saltando dinamicamente negli altri bitrate disponibili di qualità più alta a seconda delle performance della vostra rete e CPU evitando quindi tutti i fenomeni di buffering. L'esperienza utente è a mio avviso molto interessante, grazie alla continuità della fruizione dei contenuti video che dinamicamente vengono proposti alla miglior qualità disponibile per il proprio PC. Sarà inoltre possibile effettuare salti temporali nelle azioni precedenti alla diretta della partita, per rivedere i gol e le azioni più emozionanti!
Il servizio viene erogato attraverso un sistema di encoder hardware per lo streaming in tempo reale e una CDN (Content Delivery Network) per la distribuzione del contenuto video in diretta, lato server, la nuova componente IIS Media Services e Silverlight per la visualizzazione sul client.

La prossima parita, in diretta sta sera, alle 20:30 su RAI.tv al seguente link.
Per maggiori dettagli, lato tecnico, sull'architettura della soluzione vi segnalo il seguente post sul blog di team MSDN.

Buona diretta a tutti!

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.

Expression Blend 3 & SketchFlow: efficacia nella prototipizzazione

Roberto Cavallini — Wed, 03 Jun 2009 13:44:00 GMT

Al rientro in ufficio dopo un lungo ponte... :)
vi segnalo un interessante video in merito alle nuove funzionalità "SketchFlow" - utili per la prototipizzazione e progettazione di un'applicazione e, disponibili con la nuova versioe di Expression Blend 3.

Una delle principali esigenze nella fase di progettazione e ideazione di un prodotto digitale è identificare un processo rappresentativo efficace in grado di supporttarci per prototipizzare e simulare le funzionalità del prodotto su cui stiamo lavorando ancor prima di iniziare a "vestire" e "disegnare" gli elementi che caratterizzeranno l'interfaccia utente. Partendo dalle classiche "bozze" e "schizzi" su carta, fino al classico documento progettuale in "power point" riuscire a trovare un modo efficace per rappresentare e simulare l'interazione che sarà implementata nel progetto finale risulta sempre complesso.Sia in contesti interni all'agenzia, in cui dobbiamo presentare il progetto al team che sarà coinvolto per lo sviluppo e ancor più nella presentazione con il cliente, aver un buon metodo che ti permetta di "simulare" in fase di prototipo, l'interazione prevista e raccogliere gli eventuali feedback sul progetto potrebbe essere sicuramente un valore aggiunto.
Proprio per soddisfare e semplificare queste esigenze sono state inserite una serie di funzionalità in Blend 3 denominate "SketchFlow"; partendo dai vostri "schizzi" cartacei e con una serie di funzionalità che vi permetteranno di rendere dinamico ed interattivo il progetto sarete in grado di progettare e definire l'architettura e l'interazione dell'applicativo.

Partendo da questo presupposto, vi segnalo questo interessante video introduttivo su Blend 3 e Sketch Flow disponibile sul nuovo blog di team di Silverlight.

Inoltre, ne approfitto, ricordandovi l'appuntamento con Remix, il prossimo 17 Giugno a Milano - dove presenterò, in una sessione dedicata, tutte le funzionalità disponibili con SketchFlow ed Expression Blend 3.
Iscrizioni a questo link >>

@roberto

Silverlight 3 & Chroma Key Effect sui video

Roberto Cavallini — Fri, 15 May 2009 13:11:00 GMT

Sulla scia di "youtube", i contributi video risultano sempre più presenti sul Web di questi ultimi mesi, una vera e propria "moda" che sta caratterizzando molto la proposizione di nuovi servizi basati sulla fruizione video via Web. In questo contesto, Silverlight ha occupato sempre un posto in prima fila, funzionalità quali lo "Smooth Streaming" per la fruizione di contenuti video ad "alta definizione" (1080 p) sia per contributi "on demand" e a tendere anche per contributi "live" con la nuova versione del plugin Silverlight 3. Se volete "assaporare" e testare le potenzialità offerte dal servizio vi rimando a questo portale di demo del servizio (contributo video HD), potete trovare online anche molti attori del contesto internazionale che stanno sperimentando la tecnologia e i benefici offerti (assenza di buffering, qualità video che si adatta a seconda della "banda" disponibile e della CPU del client da cui si sta visualizzando il player, streaming via "http", caching, etc.). Anche la Rai sta usando questa tecnologia, partendo da contenuti della messa in onda PAL che non sono HD, ma che hanno comunque una buona qualità. Trovate a questo link alcuni contenuti che la RAI sta erogando con questa tecnologia (Fiction, Junior e Sport).

Sempre nel contesto video, la nuova versione di Silverlight 3, permetterà di sfruttare una serie di nuove funzionalità sui video tra cui il supporto del canale Alpha Channel - attraverso il Chroma Key Effect per ottenere il classico effetto di "bucare" il video selezionando un "colore" da non visualizzare durante l'erogazione del video. Un esempio tipico d'uso è il classico "presentatore/avatar" che interagisce con sullo sfondo delle immagini statiche o gli elementi che costituiscono l'interfaccia delle applicazioni.

Per ottenere questo effetto, la tecnica più "usata" è quella di riprendere il personaggio con alle spalle un pannello di sfondo uniforme di colore "pieno", tendenizialmente il "verde", per poi far scontornare il video durante la messa in onda/pubblicazione sul Web. Per erogare un video con queste caratteristiche attraverso un player Silverlight 3, è possibile effettuare le operazioni di selezione del "colore" da eliminare, direttamente all'interno di Expression Blend 3. Se notate nell'immagine riportata qui a fianco, è stato selezionato un colore, chiaramente indicando anche dei limiti di tolleranza, e l'effetto risultante è quello di ottenere il video "bucato" - come potete notare si intravede il colore verde di sfondo della pagina dietro il video.

Ma vediamo in dettaglio, quali sono gli step necessari per abilitare questa funzionalità in Blend 3 Preview: i requisiti di partenza sono di aver installato la versione Preview del tool disponibili a questo link e la versione del runtime attualmente in Beta disponibile per il "testing" di applicazioni a questo link. Fatto ciò, è necessario aggiungere una "reference" all'interno del progetto Silverlight 3 che abilità il supporto alla selezione del colore di "chroma key" dalla palette delle "properties" di Blend. Trovate un esempio di progetto con un video dove è stato applicato questo effetto a questo "link" (Demo.zip) ed il file di installazione della reference (SynergistEffectsInstaller.zip) per abilitare "Blend" alla gestione di questa funzionalità. Se volete non installare tutto il pacchetto, ma comunque provare su un vostro progetto tale funzionalità, potete referenziare la "dll" - Effects.dll in un nuovo progetto Silverlight 3, banalmente facendo "taso desto" sulla cartella References e selezionando la "dll" da "fyle system" all'interno del progetto demo, che avete scaricato, nella cartella "Demo\Silverlight3AlphaVideo\Bin\Debug".

"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!