Expression Blend
Mancano pochi giorni al lancio ufficiale di Windows 8 e finalmente sembra che si sia chiarita la vicenda intorno al codename “Metro”, che nella fase Beta indicava sia un’applicazione per Windows 8 e Windows RT che il particolare design che le caratterizza, arrivando fino a definire la nuova pagina Start di Windows 8.
Tralascerò i motivi per cui Microsoft ha dovuto abbandonare il codename e la incredibile vicenda legata ad una nota catena di Cash & Carry tedesca per concentrami sul concetto di Design Language.
La versione RTM di Visual Studio chiama correttamente i template per sviluppare applicazioni per Windows 8 e...
MSDN Italia ha già pubblicato (Grandissima Francesca!) su Channel 9 il mio intervento di ieri pomeriggio al Windows 8 Designer Event. Il tema è come convertire dal punto di vista della UX un sito web in una corrispondente applicazione Metro Style. L’applicazione serve per monitorare la posizione delle diverse rosticcerie ambulanti di una ipotetica Contoso Food Trucks. Che dire! Un modo come un altro per entrare nei panni del cliente! I materiali della discussione possono essere scaricati qua. Buona visione!
Se avete installato Visual Studio 11 in una macchina con Visual Studio 2010 o avete istallato Visual Studio 2010 successivamente se provate a creare un progetto da Blend, vedrete soltanto una soluzione vuota. D’altro canto se provate ad aprire una soluzione Metro creata da Visual Studio 11, potreste ricevere un messaggio di errore sul file "C:\Program Files (x86)\MSBuild\Microsoft\WindowsXaml\v10.0\Microsoft.Windows.UI.Xaml.CSharp.targets" che non viene trovato: Questo perchè il file in questione è ovviamente nella cartella v11.0! Blend cerca il file nella cartella v10.0 perchè nel file .csproj è contenuta la riga <Import Project="$(MSBuildExtensionsPath)\Microsoft\WindowsXaml\v$(VisualStudioVersion)\Microsoft.Windows.UI.Xaml.CSharp.targets" /> ...
Molti mi hanno chiesto come creare in XAML una griglia con gli elementi che possano spammare su più righe o su più colonne, più o meno come accade con la pagina Start di Windows 8 o come potete vedere in altre applicazioni Metro. La soluzione è abbstanza semplice: basta ereditare il controllo GridView e fare un override del metodo PrepareContainerForItemOverride avendo cura di inserire nel oggetto bindato all’item (il model se usate MVVM) le proprietà che rappresentano i valori di RowSpan e ColumnSpan dell’oggetto contenitore, nel mio caso un VariableSizedWrapGrid in questo modo: public class SpannableGridView...
Il linguaggio di User Experience Metro permette di realizzare interfacce che "escono" dai margini della finestra, consentendo allo sviluppatore di costruire griglie orizzontali molto estese. Per venire incontro all'utente che altrimenti dovrebbe scorrere un interminabile elenco di item, viene introdotto il concetto di Semantic Zoom.
Il semantic zoom permette all'utente di avere una visione "ragguppata" degli item presenti nella griglia, in base ad alcuni elementi semantici, come l'inziale del nome, l'area geografica, l'età o altro che possa caratterizzare un numero limitato di item. Una volta selezionato l'elemento semantico, viene spostato il focus sugli item opportuni.
In XAML sono due gli oggetti che...
Metro è un Design Language, (potremmo definirlo anche un “pattern di User Experience”) introdotto da Microsoft, prima con Encarta 95, poi Windows Media Center e Zune (fonte). La sua introduzione è abbastanza datata, ma è da poco più di un anno che con Windows Phone 7 gli sviluppatori e i designer hanno iniziato a lavorarci. Spesso ridotto alla leggenda che lo vuole “ispirato dalle stazioni delle metropolitane”, in realtà Metro ha una storia molto più interessante. Metro è basato sui principi stilistici dell’International Typographic Style, sviluppatosi negli anni ‘50 in Svizzera; lo stile è infatti anche...
L’occasione è quella dell’uscita della 4 prewiev di Internet Explorer 10 (link) ma è da un po’ che mi chiedo se HTML5 diventerà concretamente una tecnologia per lo sviluppo di applicazioni “client”. Diamo per scontato che HTML5 sarà il futuro del web ma oggi, tolti i grossi ‘player’, vedo ancora tanti, forse troppi, contenuti con tecnologie a plug-in ma soprattutto strumenti di sviluppo ancora allo stato primordiale. La strada di Html5 verso la conquista del desktop è parallela, non conseguente, a quella del web, con scenari molto differenti. Oggi sviluppare un’applicazione Metro in Html5 è vincente quando si...
Da qualche giorno, grazie a Martin Tirion, è disponibile un template utile per realizzare prototipi delle vostre applicazioni WP7. Il template realizza un’applicazione Silverlight liberamente pubblicabile e simula le funzionalità principali del telefono, compreso il tasto Back e il tasto Home. Veramente ultile! Maggiori info e per il dwonload: http://blogs.microsoft.nl/blogs/ux/archive/2011/03/23/using-sketchflow-for-windows-phone-prototyping.aspx
Per chi è interessato, può rivedere le slide dei miei due interventi allo UX Day di Napoli. Napoli UX Day - Principi di user experience View more presentations from ascardova Napoli Napoli UX Day - User eXperience in action con WP7 View more presentations from ascardova
Venerdì prossimo sarò ospite dei ragazzi di DotNetCampania all’UXDay Sarà una bella occasione per visitare Napoli e per parlare di UX in un modo diverso. Nella prima sessione che cercheremo di affrontare la UX da un punto di vista diverso: non quello tipico del designer ma quello più pragmatico del developer, cercando di collocare la UX all’interno di tutte le fasi di del ciclo di vita del sofware, dal concept, al deploy, passando, perchè no, anche per il testing della user experience. Nella seconda sessione vedremo come affrontare la user experience dei device touch in genere, ed...
Le UI guidelines di luglio introducono due elementi molto importanti per integrare le nostre applicazioni per Windows Phone 7 nella User Experience dell’utente e sono l’icona e la Tile. L’icona, che nel template fornito con i Tools (almeno nella versione beta) ha il nome di ApplicationIcon.png, viene aggiunta al progetto come “content” e viene referenziata nel file WMAppManifest.xml in questa riga: <IconPath IsRelative="true" IsResource="false">ApplicationIcon.png</IconPath>
L’icona deve avere una dimensione di 63x63 62x62 pixel e dovrebbe essere un formato PNG o JPEG. La versione beta dei tool permette di selezionere nei setting solo il formato PNG.*
L’integrazione purtroppo non è...
Il modello di UI di Windows Phone 7, per le applicazioni realizzate con Siliverlight, prevede una specifica area, chiamata Application Bar nella quale possono essere piazzati fino a 4 pulsanti, con la relativa icona. Nell’SDK ci sono una trentina di queste icone, ma se volte fare le vostre icone personalizzate dovete procedere seguendo queste regole: L’icona deve essere un PNG trasparente L’icona deve avere una dimensione di 48x48 pixel L’icona NON deve avere il cerchio, a realizzare il cerchio e le animazioni ci pensa il sistema operativo; ...
A questo indirizzo è possibile scaricare la versione di prova di Expression Studio 4.0. I download sono disponibili in diverse lingue tra cui l’italiano. La versione Italiana di Expression Studio non è ancora disponibile agli utenti MSDN, mentre lo è per gli utenti VL.
Nuovo ed importante refresh dei Windows Phone 7 Dev Tools. La nuova versione, Beta June 2010, è interessante per gli utilizzatori di Blend, perchè finalmente possono riumovere la versione RC, che era l’unica compatibile con i tools della CTP di Aprile e installare la versione RTM di Blend 4.0. In questa beta, i Windows Phone Dev Tools infatti contengono una versione Beta di Blend 4.0 specifica per lo sviluppo con Windows Phone, installabile side-by-side con la RTM di Blend 4.0. Nella mia installazione, con Visual Studio 2010 Ultimate, il setup dei Tools NON ha installato (come...
Una dei maggiori limiti di SketchFlow è sicuramente la povertà di controlli Sketch che sono a disposizione, soprattutto rispetto a tools come Balsamiq.
Nella versione 4 sono stati aggiunti alcuni shapes, utilizzati per il fumetto che feci tempo fa sulla prototipizzazione dinamica rispetto a quella statica, ma se volete una libreria con più controlli e di insieme di controlli potete scaricare la Blend 4 Sketch Mockups Library, attualmente in versione alpha, che vi permetterà di essere un po’ più produttivi nei vostri Sketch.
Sono molte le novità del nuovo Expression Studio: a cominciare dalle versioni:
Ultimate, che comprende Expression Blend + SketchFlow; Expression Web e SuperPreview, Expression Encoder Pro e Expression Design.
Premium che comprende Expression Blend, Expression Web e SuperPreview, Expression Encoder e Expression Design
Web Professional che comprende Expression Web e SuperPreview, Expression Encoder, e Expression Design.
Molto interessanti le funzionalità collaborative in Blend + SketchFlow che si appoggiano a SharePoint.
Per gli abbonati MSDN è già disponibile il downoad della versione Ultimate e Premium.
Lunedì 7 giugno al Metropolitan Pavilion di New York sarà lanciato ufficialmente Expression Studio 4, ed ovviamente Expression Blend 4, che oltre al supporto a WPF 4 e Silverlight 4, conterrà molte novità anche in SketchFlow, tantissimi nuovi controlli Sketch già pronti e molti altri saranno disponibili in open source, controlli che saranno oggetto di un mio prossimo post.
Ci si vede al REMIX!
Facciamo un po’ di storia. Flash è figlio adottivo di Macromedia, una software house di strumenti grafici di qualità come Freehand e Autorware. Flash nasce nel 1996 come strumento di animazione di oggetti vettoriali, e successivamente per la riproduzione di contenuti multimediali. Nel 1996 il Web era ancora agli albori e allora le aziende di comunicazione sapevano muoversi sulla carta stampata e nei media audiovisivi. I direttori creativi si affacciano in quegli anni al Web ma gli standard HTML non gli permettono di esprimersi come sono abituati a farlo sulla carta stampata. Le esigenze sono: definizione...
Il 18 e 19 maggio 2010, a Milano, si terrà a Milano la decima edizione del Creativity Day, l'evento dedicato ad artisti, designer, illustratori, fotografi e creativi. Negli anni il Creativity Day è stato una costante fonte di ispirazione per moltissimi artisti, esperti di comunicazione e di marketing, un momento importante non solo per imparare, ma un’occasione di confronto e di sfida. Protagonisti della Keynote saranno Windows Phone 7 e Silverlight, questa volta sfidanti in trasferta. Ci si vede on the ring!
Oggi mi sono messo a guardare la RC di Blend e SketchFlow 4, i nuovi callout di SketchFlow mi hanno ispirato un simpatico fumetto, che fa il verso alla famosa campagna Apple, con l’intenzione di mettere a confronto la prototipizzazione dinamica con quella statica.
Jon Harris presenta SketchFlow in un video di 90 secondi. Il video illustra solo i concetti essenziali di SketchFlow ed è da guardare con le cinture ben allacciate :D.
La Beta 1 di Blend 4, uscita in concomitanza con la RC di Visual Studio 2010 NON è compatibile con le versioni finali di Visual Studio 2010 e Silverlight 4. A breve dovrebbe uscire una nuova release, probabilmente la RC, che ne permetterà l’utilizzo con la versione RTM di Visual Studio 2010.
Fonte: Blend 4 Beta and VS 2010 RTM
In questo breve webcast illustro come ulitzzare il sistema di gestione delle versioni offerto da Team Foundation Server 2008 (ma funziona anche in TFS 2010 nello stesso modo) a partire dai prodotti come Expression Blend 3 ed Expression Web 3 Utilizzare un Version Control System come Team Foundation Server non è solo una prerogativa per sviluppatori, ma deve poter esserlo anche per Web e Interaction Designer. Buona visione :)
Finalmente disponibile il libro di Chris Bernard e Sara Summers sulla protipizzazione dinamica con SketchFlow.
Su Amazon c’è scritto che sarà in stock dal prossimo 7 aprile.
fonte: Dynamic Prototyping with SketchFlow in Expression Blend
Domani al Workshop "UGIdotNET feat. Community Tour" terrò una presentazione su come realizzare prototipi funzionali con SketchFlow, incluso in Blend 3.0: vedremo la differenza tra un Mock-Up e un Prototipo Funzionale e un breve accenno al Prototipo Funzionante. Gli argomenti sono gli stessi della presentazione di Imola, alla quale ho aggiunto un accenno a come SketchFlow si può inserire nel ciclo di vita di un progetto software, migliorandone la qualità. Ci si vede là!
Di solito non segnalo link dal blog msdn, visto che più o meno lo seguiamo tutti, ma da un lato mi interessava segnalarvi una serie di post molto belli di Roberto Cavallini, Ux evangelist Microsoft, sulla user eXperience e sulla prototipizzazione con SketchFlow
Design, User eXperience e tecnologia: sinergia in un progetto digitale.
Sketching & Dynamic Prototyping: "dal concept al progetto finale" con SketchFlow
SketchFlow Map: gestire il flusso, la logica del prototipo progettuale.
Introduzione a SketchFlow: “overview dell'area di lavoro e delle nuove funzionalità”
Complimenti Roberto!
Se da Expression Blend 3.0 apriamo una solution sottoposta a controllo del codice sorgente con TFS 2008 ci viene proposto un popup che invita a scaricare una patch: la patch http://code.msdn.microsoft.com/KB967483/ va installata sia sul server TFS che sul client.
Questa patch ci permette, su un progetto già aggiunto al repository di TFS di gestire le solite operazioni sul files:
Sulla solution distinguiamo il Check Out This Item che estrae solo il file .sln e Check Out che estrae tutta la solution o il project.
Putroppo manca la fuzionalità che ci permette di aggiungere una solution al Team Project, che ci...
In qusto esempio vediamo come realizzare in Blend 3.0, sempre senza toccare lo XAML, un semplice Hyperlink.
L’Hyperlink non è un controllo autonomo* ma un inline-level flow content element, e come tale deve essere inserito in un controllo contenitore che implementa IContentHost, nel nostro caso un TextBlock.
Per i curiosi, il codice che Blend ha generato nell’esempio è il seguente:
<Grid x:Name="LayoutRoot">
<TextBlock HorizontalAlignment="Left" Margin="8,8,0,0"
VerticalAlignment="Top" TextWrapping="Wrap">
<Hyperlink NavigateUri="http://dotdotnet.org">
<InlineUIContainer>
<TextBlock Text="DotDotNet"/>
</InlineUIContainer>
</Hyperlink>
</TextBlock>
</Grid>
Clicca per vedere il filmato d'esempio, con audio.
*In Silverlight 3 è presente un HyperlinkButton che non è presente...
Nel pattern Model-View-ViewModel la connessione tra la l’interfaccia utente e la logica che la controlla è realizzata attraverso dei semplici bindings, anche nel caso dei pulsanti. Sebbene in WPF sia comunque possibile usare un approccio basato su Handlers come in Windows Form, l’uso del Binding, una volta imparato il gioco diventa molto produttivo, in particolare se dobbiamo disabilitare od abilitare il comando durante il ciclo della nostra applicazione.
Il Blend 3.0 possiamo facilmente (senza scrivere una riga di XAML) impostare il binding tra la proprietà Command esposta da un Button e tra la proprietà corrispondente del nostro ViewModel. Nell’esempio il...
Ho letto questo post di Simone su SF e secondo me è opportuno fare un pò di chiarezza sulla prototipizzazione della UX. Scondo me c’è un po’ di confusione tra i termini e probabilmente questo post non aiuterà molto la discussione ma tant’è:
Credo occorra distinguere 3 tipi di prototipi:
Prototipo Concettuale
Prototipo Funzionale
Prototipo Funzionante
Il prototipo concettuale è quello che in alcuni ambienti viene anche chiamato Paper Prototype, anche se in design o in architettura spesso è tutt’altro che di carta: un amico architetto ne ha realizzato uno...
Per chi volesse giocare con la preview del prossimo Blend, per ora specifico per le versioni 4.0 del Framework e di Silverlight 4 può scaricare la trial:
Download Expression Blend Preview for .NET 4
Expression Blend Preview for .NET 4 può essere installato side by side con Expression Blend 3 che rimane necessario per lavorare su Silverlight 3, sul Framework 3.5 e per i progetti SketchFlow.
Se tentate di aprire una soluzione in visual studio da Blend è possibile che vi appaia questa finestra:
Nella maggior parte dei casi è perchè Blend non riesce a connettersi all’istanza attuale di Visual Studio perchè c’è un’altra solution aperta.
In questo caso si può optare per:
Chiudere la solution aperta in Visual Studio e riprovare da Blend
Lanciare una seconda istanza di Visual Studio e aprire la solution aperta in Blend a mano.
SketchFlow può essere anche usato al contrario: nel mio caso ho realizzato il prototipo partendo dall’interfaccia utente già realizzata (nel mio caso Silverlight 3).
Come procedere:
La prima cosa è necessario inserire le references dei controlli “extra” utlizzati nell’applicazione nel menu Project occorre selezionare Add Reference (Alt+Shift+R).
In seguito si apre il progetto reale in un’altra instanza di Blend e si copia tutta la grafica. La grafica andrà poi semplicemente incollata nello SketchFlow nello Screen iniziale
Se avete inserito degli event handler essi andranno rimossi manualmente dallo XAML, tipicamente gli “onQualcosa”.
A questo punto il vostro progetto “finto” è pronto per il prossimo step.
Alla...