Discussion about Design, Technologies and User eXperience : Expression Web

Visualizzare la preview di pagine web PHP attraverso Expression Web 3

Roberto Cavallini — Mon, 14 Dec 2009 21:30:00 GMT

Una delle interessanti funzionalità disponibili in Expression Web è la possibilità di usufruire di un “server di testing” virtuale che permetta di testare e debuggare le pagine senza dover utilizzare un server web o pubblicare le pagine su un ambiente...(read more)

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!

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 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.