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 Preview, 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.
Vi segnalo la disponibilità di una nuova release di Deep Zoom Composer (June Preview), lo strumento per lo sviluppo di applicazioni Silverlight e Deep Zoom - utile per la creazione di "photo gallery" con immagini ad alta definizione sul Web. Potete trovare l'eseguibile per l'installazione del tool a questo link. Numerose le novità introdotte su questa nuova release sia dal punto di vista funzionali sia in termini di performance del programma - potrete gestire facilmente "composition e collezioni" d'immagini più ampie e costituite da molte più immagini. Vediamo insieme alcune delle funzionalità introdotte.
Questa nuova versione di Deep Zoom Composer permette di gestire e creare funzionalità di navigazione, attraverso l'inserimento di "link" e "menù" di navigazione che permettono e facilitano la navigazione all'interno delle immagini che costituiscono la collezione. Selezionando ogni singola immagine inserita nel layout grafico, avrete modo, di associare una voce di menù corrispondente che permetterà all'utente, in modalità di navigazione all'interno del browser, di accedere direttamente all'immagine a cui è associata la voce di menù.
Disponibile a questo link trovate un esempio di applicazione che implementa questa nuova funzionalità.
Un'altra interessante funzionalità, sempre in ambito di composizione delle photo gallery è la possibilità di utilizzare dei template predefiniti all'interno di Deep Zoom Composer da associare alle immagini senza la necessità di creare il layout di composizione. Vediamone velocemente un esempio, nell'applicazione seguente, ho importato le immagini e associato un tag ad ogni immagine senza comporre nessun layout con le immagini. In fase di export, tra le opzioni disponibili all'export in modalità collection, ho selezionato l'opzione di "template export" in "Tag Browser". Procedendo in questa modalità, dietro le quinte Deep Zoom Composer, associerà alle immagini il template predefinito per la visualizzazione ed il filtering delle immagini sui tag associati creando direttamente il player di visualizzazione in Silverlight.
Volete vedere in anteprima un esempio di un'applicazione creata implementando questa nuova funzionalità, la trovate disponibile su questa pagina.
Attraverso la nuova release di Deep Zoom Composer sarà inoltre possibile inserire link a pagine Web esterne alla pagina in cui è contenuto l'oggetto Silverlight, associando il link direttamente alle singole immagini che costituiscono la collectio e/o creando delle "aree sensibili" a cui associare i riferimenti al link - il tutto direttamente all'interno del tool in una maschera di gestione e inserimento dei link.
In conclusione, una serie di novità in merito anche alla tracciabilità sul numero di view sulle immagini contenute all'interno della collection, molto interessante soprattutto per applicazioni in cui il numero di view diventa un parametro fondamentale per la misurabilità del successo di un progetto.
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!
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.
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
Quante volte vi siete trovati nella condizione di dover "misurare" le dimensioni di un'immagine, di un elemento grafico o "catturare" il colore Web da uno specifico particolare di una foto. Ci sono veramente molti modi per fare queste semplici attività, Photoshop è sicuramente uno degli strumenti più utili a fare attività di questo tipo, ma a volte potrebbe essere utile avere un semplice strumento che permetta di effettuare operazioni di questo tipo senza passare dai tool di grafica. Per ovviare queste situazioni, Peter Blois, un mio collega del team di Expression in Corp, ha realizzato "Rooler". Una semplice e leggera applicazione che permette di effettuare tutte queste semplici attività che tendenzialmente siamo abituati a fare in altri modi. Potete scaricare la versione in Beta dello strumento da "questo link".
Come anticipato, l'applicazione è molto semplice e leggera, i comandi di base disponibili sono i classici: "misura", "limita", "ispeziona/analizza", "cattura" (ho cercato di tradurre la terminologia utilizzata nel tool in italiano :), ma credo sia abbastanza di per se intuitiva).
Ma vediamone velocemente il funzionamento, una volta installato sul proprio PC, vi apparirà, sempre in primo piano all'area di lavoro una "toolbar" che contenente tutti gli strumenti base di Rooler.
Le semplici funzionalità, possono essere veramente utili, vi invito a provarlo all'opera. Quante volte avete cercato di catturare un colore Web da utilizzare per un particolare testo definito all'interno di un foglio di stile, o banalmente scontornare e/o misurare "on the fly" le dimensioni di un'immagine o di un elemento grafico. Rooler va proprio in questa direzione, un'applicazione, semplice, leggera e molto utile nel lavoro quotidiano.
Se volete avere maggiori dettagli, esemi e informazioni sull'applicazione, vi rimando al blog del mio collega Peter.
A pochi giorni dalla presentazione ufficiale della versione "release candidate" di Windows 7, - disponibile al download sul sito ufficiale del prodotto - vi segnalo la disponibilità della versione aggiornata del "white paper" contenente le linee guida sulla "user experience" per la progettazione e il design di applicazioni per Windows 7.
Le novità principali che caratterizzano questo aggiornamento della guida sono le seguenti:
- Windows UX Design Principles
- Touch
- Desktop
- Taskbar
- Notification Area
- Windows Desktop Gadget
- Start Menu
- Layout
Trovate la versione completa della guida su questa pagina all'interno del portale MSDN.
Sono inoltre disponibili un'altra serie di video che spiegano i criteri adottati per la definizione e la progettazione della user interface del nuovo sistema operativo, vi riporto qui sotto i dettagli.
"Designing the Windows 7 Desktop Experience"
"Design principles for Windows 7"
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".
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!
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.
A poco più di un mese di distanza dal consueto appuntamento di MIX'09 anche a Milano avremo il nostro "ReMix", l'evento italiano dedicato al Design, alla User Experience e alle ultime novità tecnologiche per lo sviluppo Web rilasciate da Microsoft.
Save the date :: 17 giugno 2009 Crowne Plaza - Milano
Il format della giornata sarà il seguente, dopo un primo slot dedicato ad una keynote congiunta, ci si suddividerà su tre track parallele: due dedicate ai nostri colleghi sviluppatori (Web Development - Getting started & What's new) ed una specifica al design, alla user experience e alle novità di Silverlight 3 ed Expression Blend 3.
A breve troverete online, sul portale dedicato all'evento, le agende complete delle sessioni che costituiranno l'intera giornata con i riferimenti per la registrazione e sugli speaker.
Cosa aspettate a bloccare la vostra agenda e ad iscrivervi! Tutte le info su questa pagina.
Vi aspettiamo il 17 Giugno!
Anche quest'anno Silverlight riveste un ruolo in prima fila a
From A to Web, l'evento organizzato da
Inside a Milano (26 Maggio p.v.) e Roma (28 Maggio p.v.) - dedicato alle ultime tecnologie per lo sviluppo Web. Nel corso della giornata potrai assistere a 2 sessioni dedicate alla progettazione e sviluppo in Silverlight:
Sviluppo di Applicazioni in Silverlight - speaker Andrea BoschinFrom "A" to Silverlight 2 - speaker Andrea BoschinPer le iscrizioni all'evento, trovate maggiori dettagli e le informazioni in
questa pagina del portale dedicato all'evento.
Enjoy your Silverlight Experience!
Molte le novità presentate la scorsa settimana a MIX'09.
Abbiamo seguito insieme alla diretta streaming della keynote e da poche ore sono disponibili al download tutte le sessioni e le slide degli interventi.
Dal portale di riferimento dell'evento, http://live.visitmix.com/ potrete accedere all'area "video download" e da li procedere alla ricerca delle sessioni di vostro interesse.
Vi riporto alcuni riferimenti diretti alle sessioni più interessanti per noi designer, suddivise per tematiche:
User Experience
Expression Studio - Expresssion Blend 3 Preview
Silverlight 3 Beta
>> Per la raccolta completa dei video, potete accedere a questo link.
Dopo due giorni di MIX, non riesco a tenere a freno l’entusiasmo e sto passando parte delle mie serate a sperimentare con la nuova versione in Preview di Expression Blend 3. Blend 3 it’s magic!
SketchFlow, behaviors, skinning & teamplate, effetti grafici, data binding con “sample data”… una marea di novità che ampliano ulteriormente la libertà nell’esprimere la nostra creatività nello sviluppo di applicazioni RIA.
Cercherò di riassumerle brevemente in modo da fornirvi una completa overview sugli importanti annunci.
In primis la nuova versione di Silverlight 3, attualmente in Beta, che implementa una serie di importanti novità sia in ambito di progettazione sia di sviluppo.
Libero spazio alla nostra creatività!!
Con la nuova versione di Silverlight 3, è possibile gestire in modo nativo, elementi e modelli 3D abilitando quindi l’utente all’interazione e alla manipolazione nel contesto del browser sia in ambiente Windows sia in ambiente Mac. Grandi novità anche in ambito media, come già anticipato qualche mese fa, la nuova versione del plugin, supporterà anche H 264 / AAC – MPEG4, in più sarà supportato lo Smooth Streaming per la fruizione dei video a qualità Full HD (720p+) sia in contesti “on demand” e su eventi “Live” con possibilità di protezione dei contenuti attraverso DRM con PlayReady. Attraverso Expression Encoder 2 – SP1 è già possibile encondare i video in bitrates diversi per sfruttare le potenzialità dello Smooth Streaming, lato server erogando i video attraverso IIS7 Media Services (per chi volesse avere maggiori dettagli, rimando ad un mio precedente post sul blog di team).
Ma torniamo alle grandi novità, con la nuova versione del plugin sarà possibile far girare le applicazioni Silverlight 3 fuori dal contesto del browser e sul desktop del proprio PC/MAC sia in contesti online e offline. Migliorie in termini di sfruttamento della GPU del proprio PC nell’ottica di ottimizzare la fruizione dei contenuti a qualità HD.
Introdotta anche una nuova funzionalità per permettere il “caching” delle immagini per ridurre i tempi di caricamento dell’interfaccia che rimane comune su più aree dell’applicazione. Nuovi effetti grafici “Pixel Shader Effects” quali blur e drop scadow che possono essere applicati ad ogni contenuto grafico.
Un semplice esempio, volete realizzare il classico effetto di “roll-over” di un bottone, attraverso questa nuova funzionalità vi basterà impostare l’effetto di “shade” all’interno del Visual State Manager del bottone in Expression Blend 3 Preview. Sempre in ambito di “design” di un’applicazione, sarà possibile caricare in modalità “runtime” i “themes” dell’interfaccia grafica attraverso gli stili in modo da modificare completamente l’aspetto e l’interazione degli elementi che costituiscono l’applicazione.
Una serie di nuovi controlli di layout e d’interazione, oltre 60 “out of the box”, che attraverso l’impiego degli stili sarà possibile personalizzarne l’aspetto grafico ed il comportamento.
In ambito di applicazioni Silverlight che utilizzeranno Deep Zoom, grandi migliorie in termini di “performance” e usabilità dell’applicativo e un occhio di riguardo in merito all’indicizzazione sui motori di ricerca attraverso SEO (search engine optimization) in modo da facilitarne la fruibilità.
Tutto questo e non solo, ho volontariamente riassunto alcune tra le caratteristiche principali, all’interno di un runtime che peserà 40k in meno rispetto alla versione precedente del plugin.
Ma entriamo nel vivo della progettazione e del design, tante funzionalità in più…d’accordo!
Ma per far ciò? Una nuova versione di Expression Blend 3 Preview arricchito da una serie di funzionalità aggiuntive che permettono di prototipizzare e produrre applicazioni Silverlight 3 e Windows Presentation Foundation.
Ma vediamole in dettaglio.
Aspetti inerenti al Design di un’applicazione.
Import layout Adobe Photoshop ed Adobe Illustrator: attraverso Ex Blend 3 è possibile importare in modalità nativa i layout grafici prodotti attraverso Adobe Photoshop (.psd) ed Adobe Illustrator (.psd), mantenendo invariati i contenuti dei layer, le shape e i testi che costituiscono l’interfaccia grafica.
Effetti grafici: con Blend 3 è possibile gestire in modalità nativa i live effects anche su applicazioni Silverlight, all’interno dell’Asset Lybrary trovate una label “Effect” in cui sono raccolti gli effetti disponibili.
Un semplice “drag&drop” sull’elemento grafico a cui volete applicare l’effetto, sia in grafica vettoriale sia immagine “jpeg/png”.
Gradient Tool: novità anche sugli strumenti offerti per la gestione dei gradienti. Ipotizziamo di voler applicare un gradiente come riempimento “fill” di una primitiva vettoriale, quale ad esempio un semplice rettangolo con i vertici arrotondati. Una volta assegnato il riempimento come gradiente, potrete gestire attraverso lo strumento “gradient tool”, l’inserimento di nuovi colori “pennelli/stop” direttamente a livello grafico facendo la combinazione di tasti “click mouse tasto sx + alt”. Una volta inserito il nuovo stop potete modificare il colore dello “stop” appena inserito facendo semplicemente “doppio click”.
Vi apparirà il classico pannello per la gestione del colore e da li potrete associare e modificare il colore applicato allo “stop”.
Layout & Design Time annotation: notevoli migliorie anche sull’area di lavoro, “layout”. Posizionare e muovere gli oggetti all’interno dell’art board risulterà molto più semplice supportati anche dalle funzionalità di “snapping” e guide sensibili. In design time è inoltre possibile inserire delle annotazioni al layout grafico e ad ogni elemento che costituisce l’interfaccia utente. Le annotazioni saranno visualizzate e contenute all’interno dello XAML e verranno visualizzate solo in fase di progettazione e sviluppo.
Skinning & Control Template
E’ possibile convertire, ogni elemento grafico in un controllo. Semplicemente selezionando l’oggetto all’interno dell’area di lavoro, facendo tasto destro, selezionando il comando “Make into Control” ed il gioco è fatto. Si aprirà un’apposita finestra che vi permetterà di selezionare a quale “controllo” volete convertire la grafica. Una volta definito la tipologia di controllo è possibile poi definire il “control template” all’interno di uno “style” / “resource dictionary” con la stessa modalità che era già supportata in Expression Blend 2. Una volta trasformato in controllo è possibile definire all’interno del “control template” le funzionalità da associare agli elementi grafici in relazione alle funzionalità supportate dal controllo stesso.
Visual State Manager
Anche la gestione all’interno del Visual State Manager è stata ottimizzata, sono state migliorati pannelli per la gestione degli stati. E possibile visualizzare più stati per i controlli.
All’interno dello “storyboard” utilizzato nella definizione di uno “state”, quale ad esempio il classico “MouseOver” di un bottone è possibile inserire direttamente all’interno dello “storyboard” nuovi elementi di layout all’interno dell’oggetto che verranno visualizzati solo all’interno del “Control Template” dell’oggetto selezionato.
Interazione
XAML, C# e Visual Basic Code: Editing
Questa nuova versione supporta anche l’IntelliSense, con completamento della sintassi, sia sul codice XAML in modalità “editing” sia sul codice C# e VB.NET (funzionalità di auto-formatting,).
Fonte dati – utilizzo di “Sample Data”
Expression Blend 3, migliora notevolmente la gestione e il testing delle applicazioni con fonti dati esterne di prova, senza aver accesso a fonte dati reali. Attraverso l’utilizzo del nuovo pannello “Data” è possibile generale localmente fonte dati di “prova” all’interno di Blend ed importare semplici fonti dati da file XML esterni. In runtime sarà quindi possibile “switcchare” dalle fonte dati di prova alla fruizione di dati reali.
Databinding
Con la nuova versione del tool, è possibile anche per progetti Silverlight 3, fare direttamente il “drag&drop” delle fonti dati sui controlli all’interno del layout grafico, associare in data binding le proprietà degli oggetti inseriti all’interno della UI. E’ inoltre supportato il controllo “data grid”, già utilizzabile per lo sviluppo di applicazioni WPF.
Supporto di progetti Silverlight 3
Expression Blend 3, permette di sviluppare progetti Silverlight 3, nell’eventualità che proviate ad aprire un progetto in Silverlight 2, vi verrà richiesto di aggiornare il progetto con la nuova versione del plugin.
In fase di creazione del progetto, Blend 3 supporta anche la definizione di progetti Silverlight 3 con l’opzione di creare anche il sito Web correlato (Silverlight Application + Web Site).
Procedendo in questo modo il tool vi creerà sia l’applicazione Silverlight ed il sito Web associato con le pagine HTML che permetteranno di caricare l’oggetto Silverlight.
Filiera di progetto integrata con Visual Studio Team Foundation Server (TFS).
In merito alla collaborazione con l’area tecnica di sviluppo, Blend 3 risulta perfettamente integrato anche con Visual Studio Team Foundation Server per la gestione del “check in / check out” del progetto nella filiera di produzione dell’applicazione.
Animazione
Ulteriori prioprietà gestibili all’interno di un’animazione, per facilitare la registrazione delle proprietà è stato introdotto un nuovo commando “Record Current Value”, che risulta attivo nel menu di gestione delle proprietà avanzate quando selezionate il “marker” successivo alle proprietà individuali all’interno del pannello proprietà.
Gestione avanzata degli effetti di “easing”
Oltre al classico pannello di gestione di easing, che si attiva all’interno del pannello proprietà quando si seleziona un “keyframe” su uno storybard è disponibile un nuovo pannello “EasingFunction” che contiene una libreria di effetti già pre-confezionati da applicare ai keyframe delle animazioni.
Behaviors
Con Blend 3 sono stati introdotti i “behaviors” come modelli/pattern per gestire l’interazione.
I behaviors, sono alla base dei comportamenti di interazione che potranno essere applicati e riutilizzati all’interno di un’applicazione semplicemente facendo un “drag&drop” del behavior sull’oggetto a cui si vuole applicare l’interazione.
I behaviors possono essere utilizzati per applicare interazioni “semplici”, quail il cambiamento di uno stato di un controllo, visualizzare un “dialog box”, scatenare e lanciare uno storyboard; ma possono anche essere impiegati per dialogare con un “web service” per aggiornare dei dati o validare un immissione di dati su un form.
Attraverso l’utilizzo dei beahviors il limite sarà solo la vostra creatività.
Expression Blend 3, verrà distribuito con un “set di behaviors” standard (non ho ancora visibilità di quanti e quali saranno disponibili), ma una delle peculiarità principali dei behaviors è l’estendibilità.
Con l’aiuto dei nostri colleghi “sviluppatori”, potremmo creare e personalizzare nuovi “behaviors” – una sorta di vocabolario dell’interazione da poter riutilizzare sulle applicazioni.
I behaviors, sono l’equivalente dei triggers per applicazioni “WPF” e abilitano la gestione dell’interazione delle nostre applicazioni Silverlight all’interno di Expression Blend senza dover scrivere una riga di codice.
SketchFlow & Prototyping
Presentata durante la keynote del primo giorno, lo SketchFlow è uno strumento veloce e flessibile per prototipizzare dinamicamente l’interazione di un’applicazione.
SketchFlow, è parte di Expression Blend è fornisce al tool una serie di potenzialità utili per progettare l’interazione di un’applicazione, un nuovo ruolo di Blend in fase di “pre-produzione” e “design”.
Gestione del “testo e font embedding”
Migliorie anche per la gestione dei Font, è possibile “embeddare” e creare subset di font in progetti Silverlight e WPF, il nuovo pannello font manager vi permette di selezionare i font installati sul vostro PC e personalizzare quale subset di font includere nel progetto.
Queste sono solo alcune delle nuove funzionalità disponibili con la nuova versione del tool attualmente in Preview, a tendere ci saranno ulteriori ottimizzazioni e migliorie nella versione finale del prodotto.
Expression Web 3- SuperPreview
interessante novità anche in merito ad Expression Web, è stata introdotta una nuova funzionalità del tool, denominata SuperPreview - un "visual debugging tool" che consente di avere una preview "interattiva" di come verrà visualizzata la pagina su uno specifico browser direttamente nel tool. Attraverso SuperPreview sarà possibile testare la pagina su "n" browser diversi anche non installati localmente sul proprio PC, ma fruibili anche via servizi "on the cloud". Trovate disponibile il download di SuperPreview sul sito ufficiale di prodotto, a questo link. Attualmente è disponibile una versione che supporta il rendering di pagine Web su IE6, IE7 e IE8 a tendere sarà disponibile una prossima versione che supporterà anche Firefox e Safari.
Internet Explorer 8 – New Browser Experience! J
Sempre in termini di prodotto, è stato presentato ieri , durante la keynote del secondo giorno, la nuova versione ufficiale del browser Internet Explorer 8, anche in questi ambiti importanti novità legate alla sicurezza, velocità e nuove funzionalità del browser: Visual Search, Accelerators e Web Slices.
Nell’ottica di migliorare ed incrementare l’esperienza utente nell’interazione sul Web, ma anche una forte propensione nei confronti degli ultimi standard del mercato CSS 2.1 ed inizio del supporto HTML 5.
Se volete trovare una completa descrizione di tutte le novità funzionali di IE8, vi rimando al sito ufficiale del prodotto.
Vi ricordo inoltre che a breve saranno disponibili al download sul sito ufficiale di MIX'09 i video di tutte le sessioni di MIX'09.
Stay tuned!
Mancano poche ore! Viviamo insieme queste emozioni...Vi ricordo l'appuntamento di domani con
MIX'09...l'evento dedicato alle nuove tendenze del Web a Las Vegas.
Dal sito ufficiale dell'evento:
http://live.visitmix.com/ potrete assistere da casa vosta alla keynote ufficiale di apertura dell'vento.
Sul portale ufficiale
, Mercoledì 18 Marzo 2009 in diretta alle ore 18:00 (9:00 AM in Vegas).L'evento aprirà con una fantastica keynote intitolata
"Intersection of Design & Technology" - con Bill Buxton e Scott Guthrie
Da non perdere, gli importanti annunci che verranno presentati durante la keynote e nelle sessioni dell'evento, disponibili
a distanza di poche ore sul sito ufficiale.
Anch'io seguirò con voi dal mio ufficio a Milano. :) Buona visione!
@ roberto
