javascript hit counter
Ulteriori dettagli su Deep Zoom: “new image experience” - Design, Technologies and User eXperience - Site Home - MSDN Blogs

Design, Technologies and User eXperience

by Roberto Cavallini :: User eXperience Evangelist - Microsoft Italia :: [follow me on twitter: @robertodesign - mail:roberto.cavalliniatmicrosoft.com]

Ulteriori dettagli su Deep Zoom: “new image experience”

Ulteriori dettagli su Deep Zoom: “new image experience”

  • Comments 1

Una tra le più importanti novità tecnologiche disponibili in Silverlight 2 (SL2) Beta 2 per la sperimentazione di nuove forme d’interazione nella visualizzazioni di immagini digitali ad alta risoluzione è sicuramente “Deep Zoom”.
La tecnologia di derivazione da “Seadragon Technology”, le cui prime sperimentazioni risultano applicate nei progetti sviluppati da Microsoft Live Labs in Photosynth fornisce una serie di novità funzionali atte a migliorare e ottimizzare la “user experience” e le modalità d’interazione “utente/artefatto multimediale”.

Solo per citare alcuni tra gli esempi più significativi disponibili online sviluppati in SL2 che adottano Deep Zoom, sicuramente il sito di Hard Rock Memorabilia (presentato alla scorsa edizione del MIX a Las Vegas) e il sito presentato in concomitanza con il lancio della nuova Renault Laguna Coupè presentato “live” prima dell’estate.
Dal punto di vista dello sviluppo tecnico, per inserire un oggetto Deep Zoom in un’applicazione Silverlight è necessario utilizzare uno specifico controllo XAML, il “MultiScaleImage” a cui via codice andrà associata la fonte dati – nel caso specifico le immagini - da visualizzare nell’applicazione. Come potete ben intuire, non basterà correlare al controllo le immagini o la composizione d’immagini ad alta definizione, il download via Web risulterebbe drasticamente lento e pesante, le immagini andranno quindi appositamente elaborate ed ottimizzate per la visualizzazione attraverso il controllo MultiScaleImage di Silverlight 2 Beta 2. Operazione che può essere effettuata anche in modalità “batch” ad esempio per applicazioni che prevedono il caricamento dinamico d’immagini provenienti da fonti dati esterne: photo-gallery, cataloghi prodotti, etc.
Per sviluppare un progetto che supporti l’inserimento d’immagini dinamicamente, bisognerà preventivamente ottimizzare le immagini in fase di esportazione come “collection” e non come “composition”, di seguito troverete maggiori dettagli.

Deep Zoom

In merito all’ottimizzazione e la preparazione delle immagini, nello specifico, devono essere in precedenza suddivise in “moduli/tessere” di “256 x 256 pixel” per poi venire “downlodate” via browser attraverso un algoritmo in modalità “download progressive”. L’esperienza utente percepita nell’interazione, sarà quella di iniziare a visualizzare le immagini a bassa risoluzione e “on demand” a seguito di una successiva interazione (zooming, movimento del mouse) il download delle altre più definite.

In primis, lo sviluppo può sembrare abbastanza laborioso, pensare di effettuare tutta queste operazioni di preparazione, composizione e ottimizzazione sulle immagini può sembrare per niente semplice e veloce; su queste considerazioni, per semplificare e facilitare lo sviluppo è disponibile online in versione “technology preview” il tool Deep Zoom Composer, specifico per la creazione e l’ottimizzazione delle immagini visualizzabili attraverso SL2 e Deep Zoom.

Il tool semplifica molto lo sviluppo, producendo come output un progetto Silverlight 2 direttamente gestibile e modificabile attraverso Expression Blend 2.5 June Preview o Visual Studio 2008 (in questo specifico contesto bisogna aver installato anche i “Microsoft Silverlight Tools Beta 2 for Visual Studio 2008”).

Per ciò che concerne l’uso specifico di Deep Zoom Composer nella creazione e ottimizzazione delle immagini, il workflow di lavoro è suddiviso in 3 semplici step:
• Import delle immagini da visualizzare
• Creazione del layout grafico della composizione delle immagini
• Export della composizione
Una volta definito il progetto, assegnandone un nome è il relativo percorso di salvataggio, il tool entra di default in modalità “import” e cliccando sul bottone in alto a destra dell’area di lavoro “Add Image…” potrete procedere nel selezionare le immagini che costituiranno la composizione in Deep Zoom. 

Importate le immagini, potete quindi procedere con la creazione della composizione da visualizzare attraverso il controllo di Deep Zoom. Sulla parte destra dell’area di lavoro trovate raccolte le “miniature” delle immagini importate nel progetto e facendo semplicemente “drag&drop” potrete trascinare le immagini direttamente sull’area di lavoro per creare la composizione. E’ possibile visualizzare le immagini anche in formato “Layer View”, modalità che permette di gestire l’ordine di sovrapposizione delle immagini. In basso a destra dell’area di lavoro trovate raccolti gli strumenti utili al “ridimensionamento”, “posizionamento” e “allineamento” delle immagini.

La nuova versione di Deep Zoom Composer (disponibile a questo link) introduce una nuova funzionalità che permette di creare composizioni in formato panoramico importando una serie di singole immagini, in questo post sul team di blog trovate spiegato in dettaglio le modalità di operare.

Ottimizzata e creata la composizione, si può procedere quindi con la fase di “export” vera e propria del progetto, cliccando sulla label in alto all’area di lavoro. In questa fase troverete quindi disponibili due modalità di “export”, la modalità di export e pubblicazione del progetto su PhotoZoom; funzionalità disponibile solo con la nuova versione di Deep Zoom Composer (sotto Help > About > trovate le info sulla versione installata sul vostro PC, per utilizzare tale funzionalità dovete avere la Build Date 3 August 2008).
Rimane comunque disponibile la modalità “Standard” di export – “Silverlight Export” in cui potrete esplicitare una serie di opzioni: formato di export delle immagini contenute nel progetto (JPEG/PNG), livello di qualità, export come composition/collection del progetto, etc.

Definiti ed impostati i parametri di “export”, il tool procede con l’export e la creazione del progetto in Silverlight 2 Beta 2, a questo punto potrete visualizzare direttamente il progetto via browser, aprire e modificare il progetto in Blend 2.5 June Preview o Visual Studio 2008 e vedere in dettaglio le immagini necessarie per la visualizzazione del progetto create da Deep Zoom Composer.

Deep Zoom Composer Export

In conclusione, a seguito delle molteplici richieste ricevute via mail durante le vacanze, alcune precisazioni e dettagli in merito alla differenza tra la modalità di “Export” come come “Composition” e come “Collection”, cercherò di darvi alcuni brevi riferimenti. Come ho già accennato nella parte iniziale del post, personalmente ritengo che la scelta di “export” dipenda molto dalla tipologia di progetto che dovete realizzare.
Per un progetto “statico” in cui le immagini non dovranno essere caricate dinamicamente da fonti dati esterne, ma rimarranno costanti una volta inserite e caricate nel progetto in fase di “authoring”; in questo caso la scelta più ovvia sarà quella di esportare il progetto come “Composition”. La modalità di “export” come “Collection” è secondo me preferibile per progetti che prevedono il caricamento delle immagini da fonti date esterne e che quindi verranno caricate e aggiornate dinamicamente.
L’immagine qui sotto, vi può aiutare a capire operativamente come il tool processa la composizione delle immagini e la differenza nella modalità di export.
Deep zoom
Come potete vedere, nel caso della “Composition” la suddivisione delle immagini in “tessere” è gestita globalmente a livello complessivo di tutte le immagini che costituiscono il progetto vengono processate e suddivise in un’unica composizione, mentre in modalità “Collection” ogni singola immagine inserita nel progetto viene suddivisa singolarmente. Operando in questa modalità le immagini possono essere uplodate e sostituite dinamicamente in modalità “batch”; per implementare questa funzionalità è richiesto lo sviluppo lato “code-behind” di una parte di sviluppo.

  • Disponibile online da qualche giorno, una nuova versione di Deep Zoom Composer , il tool in technology

Page 1 of 1 (1 items)