usermatter(s) 9 by Danilele Cerra

1 [82]

APRILE - MAGGIO 2008

DEVELOPING

7. Una tag cloud in ASP .NET

AUTHORING&MULTIMEDIA

59. Authoring 3D in Flash: ci prova Swift3D di Daniele Cerra

di Michele Bertoli

11. Creare un lettore di Feed RSS in FLEX 3 di Fabio Biondi

21. Creare menu dinamici in FLASH CS3 con XML

Creative St uff 63. Non solo caratteri

di Fabio Bernardi

27. AIR-Ajax Video player

di Kira Garfagnoli

di Matteo Ronchi

DESIGN

FROM BLOG TO BLOG

35. Innovare l’esperienza: progettare eventi tra

67. Dagli esperti di Comtaste

reale e virtuale

di Stefano Lazzari

39. Ripensare lo spazio di lavoro: dal Virtual Workspace alle nuove logiche 2.0 di Andrea Pesoli e Isabella Gandini

autore del post Liviu Stoica

70. Blogosphere 73. Collaborative Infovis in co-located Environments. An Interview with Petra Isenberg. autore dei post Daniele Galiffa

43. Second Life experience parte 2 di Alessandro Bordicchia

49. Elementi teorici per la progettazione dei social network - parte 2

77. FROM GURU TO BLOG

autore dei post Marco Casario

di Davide Casali e Gianandrea Giacoma

53. Eye tracking: analisi dell’interazione con www.youtube.com

di Silvia Gilotta e Raffaella Calligher

BIT WATCHING

81.

Learning Actionscript 3.0

2 [82]

gli autori di questo mese

Michele Bertoli

Fabio Biondi

michele@havana7.com

info@fabiobiondi.com

Studente all’università Cattolica del Sacro

Adobe Flash/Flex Developer dal 2002, realizza siti web dinamici e rich internet application. Ottenuta nel 2004 la certificazione Flash Developer, dal 2007 è Adobe Flash Certified Instructor. Inoltre sviluppa e coordina progetti che fanno uso delle più recenti tecnologie Adobe complementari a Flash, come Flex, FlashLite, Air e Flash Media Server. Membro fondatore dell’Adobe UserGroup (AUG) Actionscript.it, ora fa parte dell’AUG Augitaly. com. Attualmente lavora presso la Web agency Fishouse di Castelfranco Veneto (TV).

Cuore con 5 anni di esperienza alle spalle nello sviluppo di software gestionali multipiattaforma. Ama progettare e realizzare servizi Web 2.0, imparare nuove tecniche di programmazione e cimentarsi nella sperimentazione di sistemi di comunicazione evoluti come i social network.

3 [82]

Fabio Bernardi

Matteo Ronchi

f.bernardi@comtaste.com

m.ronchi@cef62.com

Finito nel Web nel 2002, si occupa di linguaggi server-side (ASP e ColdFusion), editing audio e video fino ad approdare a Flash e ActionScript. Oggi insegna in diverse scuole di Roma, tiene corsi professionali per HTML.IT e per la Regione Lazio. Attualmente è “Channel Manager” di FlexGALA, usergroup ufficiale di Adobe Flex. Inoltre è certificato ACP (Adobe Certified Professional) in Flash 8. Di recente è entrato a far parte dei consulenti di Adobe Italia come Adobe Guru.

Dopo un passato da montatore video e modellatore 3D, ha iniziato a conoscere il mondo dei contenuti multimediali e ad appassionarsene grazie a Macromedia Director. Da qui il passo verso la programmazione e la creazione di contenuti interattivi e applicazioni Actionscript, Flex e Adobe Air è stato breve. Oggi sperimenta soluzioni creative che si avvalgono delle possibilità offerte da librerie quali papervision3D e Sandy.

Stefano Lazzari

Andrea Pesoli

stefano.lazzari@gmail.com http://stexauer.blogspot.com/

andrea.pesoli@polimi.it

ICT specialist, da circa 15 anni si occupa di media digitali, dai primi processi di archiviazione e gestione dei contenuti al management di progetti web alla realizzazione di soluzioni di comunicazione in Second Life. Dal 2003 é ICT specialist per MGM Digital Communication dove ha collaborato alla realizzazione di eventi e Manifestazioni di cultura digitale. Come Formatore progetta e realizzato corsi, workshop e seminari per lo IED (Istituto Europeo di Design), per la Scuola Superiore Commercio Turismo Servizi e Professioni e per il Centro Formazione Manager del Terziario. È docente presso la Scuola Politecnica di Design. È tra i fondatori del More Than Zero Festival.

School of Management del Politecnico di

Ingegnere Gestionale e Ricercatore della Milano. È impegnato da più di due anni in diversi progetti di Ricerca legati a Web 2.0, Enterprise 2.0, Mobility, Consumerization e User Centered Intranet. Ha inoltre seguito diversi progetti di Intranet Assessment per alcune delle principali imprese italiane. http://www.linkedin.com/in/andreapesoli.

gli autori di questo mese

Isabella Gandini

Alessandro Bordicchia

isabella.gandini@polimi.it

a.bordicchia@thecode.it

Ricercatrice della School of Management

Una formazione divisa tra gli studi di

del Politecnico di Milano da quasi 10 anni.

architettura, design e di ergonomia cognitiva,

È attualmente responsabile dell’area

dal 1999 ad oggi opera in diversi settori

Business2Employee che comprende diversi

nell’ambito della comunicazione visiva. Da

Osservatori, tra cui Enterprise 2.0, Intranet

cinque anni a questa parte si interessa delle

nelle Banche e ICT accessibile e disabilità.

problematiche legate alla progettazione di

Negli anni ha inoltre seguito diversi progetti

interfacce utente, collaborando attualmente

di Intranet Assessment per alcune delle

con maison,the (gruppo Visiant). Da circa

principali imprese italiane.

due anni si occupa di progetti legati ai mondi virtuali collaborando con 2ndK, recentemente entrata a far parte del gruppo Visiant.

Gianandrea Giacoma

Davide Casali

gianandrea.giacoma@gmail.com

folletto@gmail.com

Psicologo di formazione analitica, Social Network Designer e ricercatore all’Osservatorio sul Knowledge Management PKM360°. Lavora come libero professionista nell’analisi e progettazione delle dinamiche da Social Network, in ambito Internet, intranet e community. In vari contesti (organizzazioni, risorse umane, comunicazione, cultura) è impegnato a valorizzare la transdisciplinarietà innescata dal paradigma della complessità, come cardine dell’innovazione e le convergenze tra Psicologia, KM, Social Networking, Web 2.0, Realtà Virtuale e Società della Conoscenza.

Davide ‘Folletto’ Casali, Interaction Designer con un forte orientamento multidisciplinare. Fra le sue esperienze c’è la realizzazione di un framework per il Web e la progettazione di assistenti virtuali emozionali. Inoltre è co-fondatore di un progetto per il design sociale, Good50x70. Lavora in maison,the ed è membro di Idearium.ORG e Bzaar.net

Silvia Gilotta

Raffaella Calligher

silvia.gilotta@srlabs.it

raffaella.calligher@srlabs.it

Laureata in Psicologia del Lavoro e delle Organizzazioni con la tesi in Ergonomia focalizzata sulla progettazione di esperienze utente basate sull’User Centred Design e con un Master di I livello in Ergonomia presso il COREP di Torino, ha iniziato nel 2006 la collaborazione con SrLabs s.r.l. di Milano come responsabile del settore “eye-tracking research and scientific instruments”. A ottobre 2006 ha vinto il concorso per il Dottorato di Ricerca in Psicologia Applicata ed Ergonomia (XXII ciclo) presso l’Università degli Studi di Torino.

Laureata in Psicologia dello sviluppo e della comunicazione con tesi in Psicologia della comunicazione e dei nuovi media, incentrata sull’usabilità dell’interazione con siti web strumentali, web, è approdata nel 2007 alla Srlabs s.r.l. di Milano proprio per sviluppare il proprio lavoro di tesi. Il rapporto lavorativo continua, come il suo interesse per il mondo della HCI e dell’User Centred Design, oltre che per la psicologia cognitiva in generale. Attualmente sta svolgendo il tirocinio postlaurea, occupandosi di alcuni progetti in ambito psicologico e di usabilità.

4 [82]

gli autori di questo mese

Daniele Cerra

Kira Garfagnoli

dan.cerra@gmail.com

k.garfagnoli@comtaste.com

Da oltre 10 anni nel mondo della progettazione di sistemi di comunicazione multimediale e interattiva, si dedica attualmente alla progettazione di social network, business community siti e intranet 2.0. Parallelamente svolge attività giornalistica per numerose testate, blogga e insegna comunicazione, webmarketing e giornalismo multimediale in master post universitari. http://www.linkedin.com/in/cerradaniele.

Illustratrice, pittrice, decoratrice, grafica,

Liviu Stoica

Daniele Galiffa

web designer, ha una passione per la comunicazione in tutte le sue espressioni. Inizia come autodidatta per poi frequentare corsi di specializzazione all’estero, facendo del suo interesse per i viaggi, un modo per crescere anche professionalmente. Ha avuto esperienze come docente (IED) e come libera professionista, attualmente è Creative Director per Comtaste.

l.stoica@comtaste.com

daniele@mentegrafica.it

Appassionato dello sviluppo di Rich Internet

Daniele Galiffa, classe 1980, è

Application ha approfondito le tecnologie

consulente per il progetto e lo sviluppo

Adobe quali Flex, Flash e ActionScript 3 che ha

di soluzioni di UserExperience ed

utilizzato in importanti e ambiziosi progetti di

InformationVisualization, curandonela

livello enterprise.

divulgazione sul blog mentegrafica.it. Presidente di VISup srl (www.visup.

E’ RIA Developer di Comtaste.

it), in passato si è occupato di fare ricerca, progetto e sviluppo nei campi dell’e-learning, dell’Infovis, del Knowledge Management, delle RIA e dell’OnLineCollaboration.

Marco Casario m.casario@comtaste.com Dal 2001 collabora con Macromedia Italia (Adobe oggi) realizzando presentazioni, articoli e partecipando a numerose conferenze che potete trovare elencate nel suo blog personale casario.blogs.com, visitato da migliaia di utenti ogni giorno. Nel 2005 fonda Comtaste (www.comtaste.com), società Solution Partner di Adobe che esplora le nuove frontiere delle Rich Internet Applications. Marco è il punto di riferimento per la comunità italiana di utenti Adobe (www.augitaly.com) all’interno del quale ricopre il ruolo di Channel Manager per la sezione dedicata a Flex ed AIR (www.augitaly.com/flexgala). E’ autore per FriendsOfED del libro “Flex Solutions: Essential Tecniques for Flex Developers” e “AdvancED AIR Applications”.

5 [82]

Per proposte e commenti contattare la redazione al seguente indirizzo redazione@usermatter.com

Usermatter(s) è una pubblicazione digitale realizzata da Comtaste SRL Roma 00137 - Via Ludovico di Breme, 61 Iscr. Reg. Imprese RM, P.IVA e C.F. 08673311000 - Chiuso in redazione il 28/03/2008 Questa copia di Usermatter(s) è stata distribuita in versione digitale attraverso il sito www.usermatter.com. Eventuali versioni cartacee sono originate da stampe effettuate direttamente dai lettori.

dalla redazione

Usermatter(s) in questo numero non si fa mancare proprio niente. Si parte “a razzo” affrontando temi di sviluppo e programmazione tipici dell’era 2.0. Leggendo la prima sezione di questo numero saremo così in grado di realizzare tag cloud per progetti ASP.NET, reader RSS in Flex3, menu dinamici in Flash CS3 e video player nati dall’accoppiata vincente AIR-Ajax. La sezione Design allarga poi gli orizzonti progettuali della User Experience all’esplorazione del felice connubio tra eventi reali e virtuali (Second Life compreso), agli spazi e agli strumenti di lavoro per le aziende 2.0 studiati dal Politecnico di Milano, alla progettazione di social network e all’analisi dell’usabilità di YouTube effettuata con l’Eye-Tracking. Completano il numero qualche cenno alle potenzialità del nuovo Swift3D, una sezione di “roba creativa” da far spalancare gli occhi e una serie di post con contenuti di spessore… internazionale! Vi lascio alla lettura di questo numero non prima però di aver ringraziato gli autori che hanno condiviso con tutti i lettori di Usermatter(s) le proprie competenze. Daniele Cerra Coordinatore editoriale

6 [82]

DEVELOPING

web 2.0

Una tag cloud in ASP .NET di Michele Bertoli - michele@havana7.com

Tra gli innumerevoli strumenti che il web 2.0 ha il merito di avere diffuso c’è senza dubbio il tagging. Un tag (etichetta) non è altro che un’informazione aggiuntiva associata ad un oggetto digitale (sia esso un video, un’immagine o un testo). Il tagging si è affermato come standard di fatto per moltissime web application e gli utenti hanno risposto in modo positivo a questo fenomeno. Le etichette associate ai contenuti sono spesso applicate, infatti, dagli stessi fruitori del servizio: come nel caso di Flickr (il celebre portale di condivisione di fotografie) in cui viene data la possibilità di collegare parole chiave ad ogni immagine caricata, al fine di facilitare ricerca e catalogazione. In altri casi invece sono gli autori a taggare, come ad esempio un blogger che etichetta i propri post inserendoli in determinate categorie. Parallelamente allo sviluppo di questo tipo di gestione delle informazioni, hanno visto la luce nuovi elementi dell’interfaccia utente atti a rappresentarle. Tali strumenti innovativi hanno il compito di guidare l’utente agevolando la fruizione dei contenuti. Uno tra i meccanismi a supporto della navigazione che merita menzione è la tag cloud (nuvola di etichette). Nell’esempio la tag cloud di Flickr.

La tag cloud si presenta come un elenco di etichette in ordine alfabetico, la cui dimensione riflette il numero di informazioni associate ad ognuna di esse. Ogni tag è solitamente rappresentato da un link ad una pagina in cui sono mostrati i contenuti legati al termine stesso. Di fronte ad una tag cloud l’utente può rapidamente farsi un’idea di quali contenuti siano presenti nel sito e in che misura. L’esperienza di navigazione risulta quindi gradevole, mirata ed intuitiva. In questo articolo vedremo come costruire una nuvola di etichette in ASP.NET e in particolare in C#.

7 [82]

SEGUE u

DEVELOPING

Cominciamo analizzando gli step fondamentali dello script che andremo ad implementare: Selezione dal database di una lista composta da due colonne: tag e numero di elementi cui fa riferimento. Individuazione del minimo e del massimo numero di informazioni associati alle etichette. Creazione della tag cloud proporzionando il font-size di ciascuna etichetta dinamicamente in base al peso. Ora possiamo dare uno sguardo alla struttura di un database predisposto per il tagging. Supponiamo ad esempio, in estrema sintesi, che la base dati di un blog sia così costruita:

A questo punto iniziamo a scrivere il codice. La prima operazione consiste nel creare un component Literal che avrà il compito di contenere la nostra tag cloud. <asp:Literal ID=”Literal” runat=”server”></asp:Literal>

Fatto ciò passiamo al C#. Innanzitutto creiamo una connessione al database e dichiariamo le prime variabili. using (OleDbConnection connection = new OleDbConnection(connectionString)) { string selectCommand; OleDbDataAdapter adapter; DataSet dataSet; double fontSize; int numberOfPostsMin; int numberOfPostsMax; int numberOfPostsDiff;

In secondo luogo andiamo a definire le variabili fontMin e fontMax che indicano rispettivamente la dimensione minima e massima che avranno le etichette all’interno della nuvola. int fontSizeMin = 10; int fontSizeMax = 30; int fontSizeDiff = fontSizeMax - fontSizeMin;

Poi interroghiamo il database con lo scopo di ottenere un risultato formato da due colonne: il nome del tag e il numero di post cui esso è associato, ovvero il “peso” che determinerà la rilevanza nella nuvola.

SEGUE u

Una tag cloud in ASP .NET

8 [82]

DEVELOPING E’ necessario ordinare la lista in base al nome e inserirla in un DataSet. selectCommand = “SELECT Tag.Name, COUNT(TagMap.Id) AS NumberOfPosts “ + “FROM Tag INNER JOIN TagMap ON Tag.Id = TagMap.TagId “ + “GROUP BY Tag.Name “ + “ORDER BY Tag.Name”; adapter = new OleDbDataAdapter(selectCommand, connection); dataSet = new DataSet(); adapter.Fill(dataSet, “Tag”); adapter.Dispose();

Il penultimo step consiste nel ricavare il minimo e il massimo numero di post al quale un’etichetta è associata. Questi valori sono indispensabili per il calcolo successivo. numberOfPostsMin = Convert.ToInt32(dataSet.Tables[“Tag”].Compute(“Min(NumberOfPosts)”, null));numberOfPostsMin = Convert.ToInt32(dataSet.Tables[“Tag”].Compute(“Min(NumberOfPosts)”, null)); numberOfPostsMax = Convert.ToInt32(dataSet.Tables[“Tag”].Compute(“Max(NumberOfPosts)”, null)); numberOfPostsDiff = numberOfPostsMax - numberOfPostsMin;

Finalmente siamo pronti per effettuare un ciclo sull’elenco dei tag calcolando, per ognuno, la dimensione proporzionata da attribuire ad esso nel markup tramite la proprietà font-size. foreach (DataRow dataRow in dataSet.Tables[“Tag”].Rows) { fontSize = fontSizeMin + (((Convert.ToInt32(dataRow[“NumberOfPosts”].ToString()) numberOfPostsMin) * fontSizeDiff) / numberOfPostsDiff); Literal.Text += String.Format(“<a href=’search.aspx?q={0}’ style=’font-size:{1}px;’>{0}</a> “, dataRow[“Name”].ToString(), Convert.ToInt32(fontSize)); } }

Lo script è completo e pronto per essere implementato nella vostra applicazione .NET Potrete così migliorare l’esperienza dei vostri utenti offrendo una navigazione semplificata grazie alla tag cloud.

Studente all’università Cattolica del Sacro Cuore con 5 anni di esperienza alle spalle nello

scritto da

sviluppo di software gestionali multipiattaforma. Ama progettare e realizzare servizi Web 2.0, imparare nuove tecniche di programmazione e cimentarsi nella sperimentazione di sistemi di comunicazione evoluti come i social network.

Michele Bertoli michele@havana7.com

9 [82]

FINE

10 [82]

DEVELOPING

Adobe FLEX

CREARE UN LETTORE DI FEED RSS IN FLEX 3

di Fabio Biondi- info@fabiobiondi.com

L’RSS è un formato ormai diffusissimo per la condivisione di informazioni, utilizzato soprattutto in blog e portali. I siti web che sfruttano questo standard mettono a disposizione i propri contenuti ad un qualunque sviluppatore, che potrà utilizzarli nella propria applicazione o sito web per presentarli in modo totalmente differente rispetto all’originale. In questo tutorial utilizzeremo Flex 3 per creare un lettore RSS utile a leggere i contenuti del nostro portale FlexGala e, a fine articolo, modificheremo leggermente il codice per realizzare un RSS Reader generico che funzioni con qualunque sito. Focalizzeremo l’attenzione principalmente sulle funzionalità relative all’acquisizione dei dati e sul problema di sicurezza relativo all’accesso dei dati da un dominio esterno, utilizzando un proxy PHP per risolvere il problema, tralasciando tutto ciò che concerne l’interfaccia grafica e i componenti base di flex che saranno invece commentati passo-passo all’interno del codice in modo da rendere comunque comprensibile l’articolo anche agli utenti meno esperti. IL FORMATO RSS In sostanza l’RSS è rappresentato da un file XML che segue determinati standard ed è quindi possibile creare degli script generici che funzionino correttamente in svariate situazioni e che leggano i contenuti da un qualunque sito. Di seguito un estratto di un feed RSS disponibile su FlexGala: <?xml version=”1.0”?>  <rss version=”2.0”> <channel> <title>Le news di Augitaly.com</title> <link>http://www.augitaly.com</link> <description>News dal mondo di Flex 2</description> <language>it</language> <webMaster>webmaster@augitaly.com</webMaster> <generator>PHP RSS Feed Generator</generator> <item> <title>Ridurre il peso del file SWF rimuovendo le classi non usate con getQualifiedClassName()</ title> <description><![CDATA[Il tema dell’ottimizzazione tocca davvero questo [...]]]></ description> <link>http://www.augitaly.com/flexgala/index.php?cmd=newsreader&amp;id=243</link> <pubDate>Thu, 24 Apr 2008 00:10:10 +0000</pubDate> </item> [... altri nodi ‘item] </channel> </rss>

Maggiori informazioni sul formato RSS sono reperibili su Wikipedia: http://it.wikipedia.org/wiki/Really_simple_syndication Per il parsing del file XML, ovvero l’interpretazione dei dati acquisiti, sfrutteremo il component HTTPService e lo standard E4X, ma non affronteremo in dettaglio l’argomento perchè già ampiamente trattato in diversi articoli dei nostri portali.

11 [82]

SEGUE u

DEVELOPING

L’RSS READER di FLEXGALA Di seguito descriviamo le funzionalità della prima applicazione che andremo a realizzare, ovvero il lettore di contenuti del portale FlexGala: Utilizzando il componente COMBOBOX faremo in modo che l’utente possa selezionare uno dei quattro feed RSS presenti FlexGala: news, articoli, video tutorials e gli articoli da altre fonti. Sulla sinistra sfrutteremo un componente LIST per visualizzare l’elenco degli articoli di un determinato feed Sulla destra, all’interno di una TEXTAREA, presenteremo l’abstract dell’articolo selezionato Infine, utilizzeremo un componente BUTTON per aprire la pagina dell’articolo completo disponibile sul sito ufficiale. Il risultato finale sarà simile al seguente:

RSS READER GENERICO La seconda applicazione sarà identica alla precedente ma, al posto del menu a tendina con un elenco preimpostato di siti, daremo la possibilità all’utente di digitare un qualunque feed RSS.

SEGUE u

Creare un lettore di Feed RSS in FLEX 3

12 [82]

DEVELOPING

DOWNLOAD SORGENTI e DEMO APPLICAZIONI Il download dei codici sorgenti Flex e PHP può essere effettuato al seguente URL: http://www.fabiobiondi.com/_augiltaly/UM/5_rss/RSSReader.zip Le demo funzionanti delle applicazioni sono invece disponibili ai seguente indirizzi: 1) http://www.fabiobiondi.com/_augiltaly/UM/5_rss/RSSReader.html 2) http://www.fabiobiondi.com/_augiltaly/UM/5_rss/RSSReader2.html FLASH PLAYER 9 e PROBLEMI DI SICUREZZA: UTILIZZIAMO UN PROXY Prima di analizzare il codice è necessario capire le nuove modalità di sicurezza del Flash Player 9. Un’applicazione realizzata in Flex, posizionata sul proprio dominio web, non può accedere direttamente ai dati disponibili in un dominio web remoto, differente da quello in cui si sono posizionati gli swf. Ogni qualvolta si tenta di accedere a contenuti esterni si riceveranno dei messaggi di errore/sicurezza e sarà quindi impossibile accedere ai dati di cui si ha bisogno. TIP: Questo non accade mentre si sviluppa l’applicazione in ambiente Flex Builder, ma avviene solo quando si posizionano i files on-line. Le soluzioni più utilizzate per risolvere questo tipo di problema sono le tre seguenti: 1) utilizzare un file cross-domain: ovvero posizionando un file xml, formattato in modo appropriato affinché il Flash Player lo interpreti correttamente, nella root del webserver remoto che mette a disposizione i dati. In questo file si specificherà l’elenco dei domini ai quali si concede il permesso di accedere ai dati. Ad esempio, se il dominio dove metteremo l’applicazione si chiama dominio.com e quello remoto si chiamata dominioRSS.com, nella root di quest’ultimo dovremo mettere il file cross-domain.xml strutturato come segue: <?xml version=”1.0”?> <!DOCTYPE cross-domain-policy SYSTEM “http://www.adobe.com/xml/dtds/cross-domain-policy.dtd”> <cross-domain-policy> <allow-access-from domain=”dominio.com” /> </cross-domain-policy>

Questa soluzione molto spesso non è praticabile perchè non abbiamo la possibilità di posizionare i file nei domini remoti, visto che probabilmente non saranno di nostra proprietà. 2) La soluzione al nostro problema è rappresentata invece dall’utilizzo di un file PROXY, ovvero un file che faccia da ponte tra il sito remoto e il Flash Player. In sostanza, la nostra applicazione invece di chiamare direttamente l’URL remoto del feed RSS invocherà un file server side presente nel nostro dominio, che si occuperà di chiamare a sua volta il feed RSS e di passare i dati a Flex. Questo file può essere creato con un qualunque linguaggio server side e, nel nostro caso, utilizzeremo PHP. Potete trovare maggiori informazioni sull’utilizzo di un proxy e il relativo codice sorgente anche in ColdFusion, ASP e JAVA al seguente URL: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16520&sliceId=2 Lo script PHP è comunque molto semplice e serve semplicemente a leggere un url remoto e a passare a Flex i

13 [82]

Creare un lettore di Feed RSS in FLEX 3

SEGUE u

DEVELOPING

relativi contenuti della pagina invocata. <?php readfile($_REQUEST[“url”]); ?>

Da Flex, chiameremo quindi questo file, passando come parametro l’url del feed RSS da visualizzare, bypassando il problema di sicurezza del Flash Player 9. EXPERT TIP: Affinchè il file PROXY PHP funzioni correttamente è necessario che nelle impostazioni del file PHP.ini del proprio hosting sia abilitata l’opzione allow_url_fopen , spesso ad OFF per evitare inclusioni remote di malware e mpack. Inoltre, dalla versione 5.2.x di PHP, potrebbe essere necessario abilitare la proprietà allow_url_include. Se posizionate il file proxy php sul vostro hosting, provate ad avviare il file dal vostro browser e ricevete un errore simile al seguente, è probabile che dobbiate modificare le variabili che abbiamo appena menzionato: Warning: readfile() [function.readfile]: URL file-access is disabled in the server configuration in /var/www/ web121/html/_tutorial/augitaly/usermatter/6_flexrssreader/proxy.php on line 11 Warning: readfile(http://www.augitaly.com/flexgala/rss.php?t=n) [function.readfile]: failed to open stream: no suitable wrapper could be found in /var/www/web121/html/_tutorial/augitaly/usermatter/6_flexrssreader/ proxy.php on line 11 3) Un’alternativa a quanto indicato nei punti 1) e 2) è l’utilizzo dei LiveCycle Data Service, un software server side prodotto da Adobe per estendere le capacità di Flex, che tra le varie funzionalità permette di creare applicazioni che effettuano richieste remote che non soffrono del problema di sicurezza menzionato, ma questo è un argomento che non tratteremo in questo articolo. Di seguito il codice della prima applicazione commentato passo-passo: <?xml version=”1.0” encoding=”utf-8”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”loadXMLData(urlArray[0].data)”> <mx:Script> <![CDATA[ import mx.events.* import mx.rpc.events.ResultEvent; // PATH del PROXY PHP // --> DEBUG (da usare in locale quando effettuate i test da Flex. // IMPORTANTE: Cambiare l’URL in base al path del proprio webserver) private const pathProxy:String = “http://localhost/Web/_FLEX3/RSSReader/ src/php/proxy.php?url=”; // VERSIONE FINALE (on-Line) // Commentare la riga precedente e decommentare la seguente //private const pathProxy:String = “php/proxy.php?url=”;

SEGUE u

Creare un lettore di Feed RSS in FLEX 3

14 [82]

DEVELOPING /* CARICAMENTO RSS Questa funzione viene chiamata sia quando l’applicazione è avviata la prima volta (tramite l’evento ‘creationComplete’), passando come parametro il primo elemento dell’array degli URL, sia ogni qualvolta viene selezionato un nuovo feed dal ComboBox */ public function loadXMLData(url:String):void { // Impostiamo l’URL del file da caricare rssRPC.url= url; // Inviamo la richiesta HTTPService rssRPC.send(); } /* CARICAMENTO DATI AVVENUTO CON SUCCESSO */ private function defaultData(event:ResultEvent):void { // Visualizzione Abstract del primo articolo viewAbstract(0) // Evidenziazione della prima voce del componente LIST posts_list.selectedIndex = 0; } /* VISUALIZZAZIONE dell’ABSTRACT */ private function viewAbstract(idxNews:uint):void { // Visualizziamo l’abstract dell’articolo sfruttando lo standard E4X // per navigare all’interno dell’oggetto XMLListCollection e per recuperare // il valore del nodo ‘description’ post_details.htmlText = articoliXML[idxNews].description; } /* APERTURA URL dell’ARTICOLO COMPLETO */ private function openURL(event:MouseEvent):void { // L’indice dell’articolo selezionato viene acquisito dal component LIST var articoloSelezionato:uint = posts_list.selectedIndex; // Recuperiamo il ‘link’ dell’articolo completo sfruttando lo standard E4X

15 [82]

Creare un lettore di Feed RSS in FLEX 3

SEGUE u

DEVELOPING }

// per navigare all’interno dell’oggetto XMLListCollection var linkNews:String = articoliXML[articoloSelezionato].link; // Apriamo il link in una nuova pagina var adobeURL:URLRequest = new URLRequest(linkNews); navigateToURL(adobeURL, “_blank”);

]]> </mx:Script> <!- ARRAY contenente gli URL del COMBOBOX --> <mx:ArrayCollection id=”urlArray”> <mx:Array id=”myArray”> <mx:Object label=”News” data=”{pathProxy + ‘http://www.augitaly.com/ flexgala/rss.php?t=n’}”/> <mx:Object label=”Layout” data=”{pathProxy + ‘http://www.augitaly.com/ flexgala/rss.php?t=l’}”/> <mx:Object label=”Video tutorials” data=”{pathProxy + ‘http://www. augitaly.com/flexgala/rss.php?t=v’}”/> <mx:Object label=”Articoli da altre fonti” data=”{pathProxy + ‘http:// del.icio.us/rss/FlexGala’}”/> </mx:Array> </mx:ArrayCollection> <!- Il componente HTTPService permette di caricare dati da un URL. La proprietà resultFormat indica in quale modalità interpretare i dati (E4X). L’E4X è una novità di AS3 che permette di navigare all’interno dei nodi XML in modo agevole. Non appena i dati saranno acquisiti verrà invocato l’evento ‘result’. In questo tutorial non abbiamo gestito il caso in cui la richiesta fallisca ma è possibile utilizzare l’apposito evento ‘fault’ --> <mx:HTTPService id=”rssRPC” resultFormat=”e4x” result=”defaultData(event)” /> <!- - Conserviamo nella variabile ‘articoliXML’ l’elenco degli articoli (item) - Utilizziamo la classe XMLListCollection perchè permette di sfruttare le potenzialità E4X disponibili dalla versione 3.0 di Actionscript. --> <mx:XMLListCollection id=”articoliXML” source=”{rssRPC.lastResult.channel.item}” />

<mx:VBox x=”10” y=”0” height=”227” width=”250”> <!-

SEGUE u

COMBOBOX con l’ELENCO dei FEED RSS di FlexGala: - Acquisiamo gli URL attraverso l’array ‘urlArray’ definito in precedenza

Creare un lettore di Feed RSS in FLEX 3

16 [82]

DEVELOPING - Ad ogni selezione carichiamo i nuovi dati chiamando la funzione ‘loadXMLData’ e passando come parametro l’url selezionato --> <mx:ComboBox width=”100%” id=”combo_list” dataProvider=”{urlArray}” change=”loadXMLData(urlArray[event.currentTarget.selectedIndex].data)” /> <!- VISUALIZZAZIONE ELENCO ARTICOLI - Il dataProvider utilizzato per reperire l’elenco degli articoli è popolato automaticamente ad ogni nuova chiamata grazie al BINDING. - Ad ogni selezione viene invocato l’evento ‘change’ e visualizziamo il relativo abstract --> <mx:List width=”100%” height=”100%” id=”posts_list” dataProvider=”{articoliXML}” change=”viewAbstract(event.currentTarget.selectedIndex)” labelField=”title” /> </mx:VBox> <!- TEXTAREA per la VISUALIZZAZIONE dell’ABSTRACT --> <mx:TextArea id=”post_details” x=”268” y=”29” width=”312” height=”198”/> <!- IL PUlSANTE PER APRIRE IL LINK DELL’ARTICOLO COMPLETO SUL SITO UFFICIALE --> <mx:Button x=”149” y=”235” label=”Dettaglio news” click=”openURL(event)”/> </mx:Application>

Di seguito il codice della seconda applicazione commentato passo-passo: <?xml version=”1.0” encoding=”utf-8”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.* import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; // PATH PROXY PHP // --> DEBUG private const pathProxy:String = “http://localhost/Web/_FLEX3/RSSReader/ src/php/proxy.php?url=”;

17 [82]

Creare un lettore di Feed RSS in FLEX 3

SEGUE u

DEVELOPING // VERSIONE FINALE (on-Line) //private const pathProxy:String = “php/proxy.php?url=”; [Bindable] public var dp:XMLList; private function openCustomRSS(url:String):void { rssRPC.url= pathProxy + url; rssRPC.send(); } // Caricamento RSS Avvenuto con successo private function defaultData(event:ResultEvent):void { // Visualizzazione del titolo del Feed RSS title_txt.text = event.currentTarget.lastResult.channel.title; // Lista dei nodi dp = event.currentTarget.lastResult.channel.item // Visualizziamo il primo post della lista viewAbstract(0) // Visualizziamo il primo elemento della lista posts_list.selectedIndex = 0; } // In caso di URL inesistente private function faultData(event:FaultEvent):void { Alert.show(“URL non disponibile”); } // Visualizziamo l’abstract private function viewAbstract(idxNews:uint):void { try { post_details.htmlText = String(dp[idxNews].description); } catch(e:*){} } /* APERTURA URL dell’ARTICOLO COMPLETO */ private function openURL(event:MouseEvent):void { var linkNews:String = dp[posts_list.selectedIndex].link; var adobeURL:URLRequest = new URLRequest(linkNews); navigateToURL(adobeURL, “_blank”); }

SEGUE u

Creare un lettore di Feed RSS in FLEX 3

18 [82]

DEVELOPING

]]> </mx:Script> <mx:HTTPService id=”rssRPC” resultFormat=”e4x” result=”defaultData(event)” fault=”faultData(event)” /> <mx:ApplicationControlBar x=”0” y=”0” dock=”true” height=”44”> <mx:Label text=”Indirizzo RSS:”/> <mx:TextInput id=”testoInput” width=”380”/> <mx:Button label=”Leggi RSS” click=”openCustomRSS(testoInput.text)”/> </mx:ApplicationControlBar> <mx:Label id=”title_txt” x=”10” y=”13” width=”570”/> <mx:VBox x=”10” y=”39” height=”199” width=”250”> <mx:List width=”100%” height=”100%” id=”posts_list” dataProvider=”{dp}” change=”viewAbstract(event.currentTarget.selectedIndex)” labelField=”title” /> </mx:VBox> <mx:TextArea id=”post_details” x=”268” y=”39” width=”312” height=”198”/> <mx:Button x=”149” y=”246” label=”Dettaglio news” click=”openURL(event)”/> </mx:Application>

Adobe Flash/Flex Developer dal 2002, realizza siti web dinamici e rich internet application. Ottenuta

scritto da

nel 2004 la certificazione Flash Developer, dal 2007 è Adobe Flash Certified Instructor. Inoltre sviluppa e coordina progetti che fanno uso delle più recenti tecnologie Adobe complementari a Flash, come Flex, FlashLite, Air e Flash Media Server. Membro fondatore dell’Adobe UserGroup (AUG) Actionscript.it, ora fa parte dell’AUG Augitaly.com. Attualmente lavora presso la Web agency Fishouse di Castelfranco Veneto (TV).

Fabio Biondi info@fabiobiondi.com

19 [82]

FINE

20 [82]

DEVELOPING

Adobe FLASH

CREARE MENU DINAMICI IN FLASH CS3 CON XML di Fabio Bernardi - bernardifabio@fastwebnet.it Una delle utilità dell’uso di Actionscript 3.0 all’interno di applicazioni Flash (o Flex), è la possibilità di caricare e/o gestire elementi grafici del sito in maniera del tutto dinamica. In questo tutorial vedremo come gestire un menu di navigazione tramite XML ed Actionscript 3.0 Per prima cosa creiamo un file XML all’interno del quale inseriremo tutti i dati necessari alla sua posizione, distribuzione orizzontale o verticale, offset di rollover o rollout, ecc.. Qui di seguito vi scriviamo il codice del file: <?xml version=”1.0” encoding=”UTF-8”?> <menu posizione=”v” offset=”1” window=”new” typeLink=”external” posX=”0” posY=”0” offsetRollOver=”6”> <voce labelText=”Faber04” labelUrl=”http://www.faber04.com” posX=”” posY=”” /> <voce labelText=”AUGItaly” labelUrl=”http://www.augitaly.com” posX=”” posY=”” /> <voce labelText=”Google” labelUrl=”http://www.google.it” posX=”” posY=”” /> <voce labelText=”AUGItaly” labelUrl=”http://www.augitaly.com” posX=”” posY=”” /> <voce labelText=”Google” labelUrl=”http://www.google.it” posX=”” posY=”” /> </menu>

Come potete leggere si tratta di una struttura molto semplice. I vari nodi “voce” gestiscono le varie voci di menu, con i loro attributi: labelText per le label del pulsante, labelUrl per l’indirizzo, e così via. Nel nodo “menu” invece abbiamo inserito tutte le informazioni riguardanti il menu: attributo “posizione” per la distribuzione verticale od orizzontale, “offeset” per gestire la spaziatura tra le diverse voci, “window” per controllare l’apertura della nuova finestra e, nel caso di link esterni, “typeLink” per indicare a Flash se il link è un collegamento esterno oppure un caricamento di SWF esterni. “PosX” e “PosY” indicano le posizione del menu sullo stage. Da ultimo “offsetRollOver” regola la quantità di pixel di rollover dei pulsanti. Salviamo ora questo file come “menu.xml” nella cartella che preferite. L’importante è che sia la stessa dove salverete anche il file FLA quindi l’SWF. Apriamo Flash CS3 e creiamo un nuovo file Fla con Actionscript 3.0. Creiamo una MovieClip contenente un forma rettangolare, e un campo di testo dinamico, di nome “did_txt”.

21 [82]

SEGUE u

DEVELOPING

Una volta creata, possiamo tranquillamente eliminare l’istanza presente sullo stage. Apriamo la libreria e concateniamo questo oggetto: clicchiamo con il tasto destro sull’oggetto in libreria e diamo un nome alla classe che verrà creata relativamente a questo elemento. Il nome sarà : MenuLabel

Ora clicchiamo sul primo fotogramma della linea temporale di Flash, ed apriamo il pannello delle azioni. Anzitutto inseriamo tutte le variabili di cui abbiamo bisogno, per segnarci i percorsi dei link, la posizione del menu e altri parametri. var var var var var var var var var var var var var

xmlData:XML=new XML(); urlReq:URLRequest=new URLRequest(“menu.xml”); urlLoad:URLLoader=new URLLoader(); menu:Array=new Array(); posizioneMenu:String=new String(); offset:Number=new Number(); offsetRollOver:Number=new Number(); window:String=new String(); windowLink:String=new String(); linktype:String=new String(); posXmenu:Number=new Number(); posYmenu:Number=new Number(); rollMe:Boolean=new Boolean();

Dato aver indicato che le informazioni provengono da un file XML, carichiamo i dati dal file creato poco fa: urlLoad.load(urlReq); urlLoad.addEventListener(Event.COMPLETE, leggiXML); function leggiXML(e:Event) { xmlData=XML(urlLoad.data); showMenu(); }

Iniziamo ora con la funzione showMenu() che assolverà all’esecuzione del corpo principale dell’applicazione:

SEGUE u SEGUE u

CREARE MENU DINAMICI IN FLASH CS3 CON XML

22 [82]

DEVELOPING

NOTA: Poichè le informazioni si trovano all’interno di proprietà del nodo “voce”, le relative proprietà della variabile “xmlData” antepongono il simbolo “@” prima del nome dell’attributo. Proseguiamo con lafunzione “putLabel()”. function putLabel():void { for(var i:Number=0; i<menu.length; i++){ var menuVoice:MenuLabel=new MenuLabel(); menuVoice.did_txt.text=menu[i].labelMenu; menuVoice.link=menu[i].labelUrl; addChild(menuVoice); switch(posizioneMenu){ case “v”: menuVoice.y=(menuVoice.height+offset)*i; rollMe=true; break; case “h”: menuVoice.x=(menuVoice.width+offset)*i; rollMe=false; break; default: trace(“dato di posizionamento sbagliato”); break; } menuVoice.addEventListener(MouseEvent.CLICK, linkMe); menuVoice.addEventListener(MouseEvent.MOUSE_OVER, overMe); menuVoice.addEventListener(MouseEvent.MOUSE_OUT, outMe); }

In questa funzione, come noterete, all’interno del ciclo “for” richiamiamo un’istanza della classe MenuLabel, che altro non è che il nostro pulsante in libreria. La clip in questione verrà ripresa dalla libreria e posizionata sullo stage una volta per quante sono le voci di menu caricate dal file XML. La condizione “switch” controllerà la variabile “posizioneMenu”, in funzione di questo il menu verrà posizionato in orizzontale piuttosto che in verticale.

23 [82]

CREARE MENU DINAMICI IN FLASH CS3 CON XML

SEGUE u

DEVELOPING

Per ogni pulsante dobbiamo assegnare i tre listener principali: roll-over, roll-out e click. Non resta che visualizzare le 3 funzioni: function overMe(e:MouseEvent) { if(rollMe){ e.currentTarget.x+=offsetRollOver; }else{ e.currentTarget.y+=offsetRollOver; } } function outMe(e:MouseEvent) { if(rollMe){ e.currentTarget.x-=offsetRollOver; }else{ e.currentTarget.y-=offsetRollOver; } }

Con queste due funzioni, abbiamo indicato che cosa deve accadere per rollover e rollout, ovvero avanzare sulle X o Y (a seconda che il menu sia orizzontale o verticale ) di tanti pixel quanti sono quelli indicati dalla variabile (offsetRollOver). Dulcis in fundo: function linkMe(e:MouseEvent) { var path:URLRequest=new URLRequest(e.currentTarget.link); if(linktype==”external”){ switch(window){ case “new”: windowLink=”_blank”; break; case “old”: windowLink=”_self”; break; } navigateToURL(path, windowLink); }else{ var loader:Loader=new Loader(); addChild(loader); loader.load(path); if(!menu[e.currentTarget.link].labelX || !menu[e.currentTarget.link]. labelY){ loader.x=0; loader.y=0; }else{ loader.x=menu[e.currentTarget.link].labelX; loader.y=menu[e.currentTarget.link].labelY; } } } }

SEGUE u SEGUE u

CREARE MENU DINAMICI IN FLASH CS3 CON XML

24 [82]

DEVELOPING In quest’ultima funzione indichiamo cosa deve accedere nel caso di link “external” cioè che puntano a una pagina HTML esterna. Nel caso di variabile link “internal” viene creato un’istanza Loader e caricata all’interno del documento. In questa evenienza, nelle ultime righe indichiamo dove deve essere posizionato il nuovo file SWF, se con coordiante 0,0 oppure con quelle indicate nel file XML come proprietà “posX” o “posY” dei singoli nodi “voce” . Salviamo il tutto e testiamo questo menu.

Per cambiare il menu in qualcosa di più personalizzato, basterà entrare nella clip MenuLabel e modificarne la grafica oppure aprire il file XML e cambiare i parametri. Buon divertimento!

Finito nel Web nel 2002, si è occupato di linguaggi server-side (ASP e ColdFusion), editing audio e

scritto da

video fino ad approdare a Flash e ActionScript. Oggi insegna in diverse scuole di Roma, tiene corsi professionali per HTML.IT e per la Regione Lazio. Attualmente è “Channel Manager” di FlexGALA, usergroup ufficiale di Adobe Flex. Inoltre è certificato ACP (Adobe Certified Professional) in Flash 8.

Fabio Bernardi bernardifabio@fastwebnet.it

25 [82]

FINE

26 [82]

DEVELOPING

Adobe AIR

AIR-Ajax Video player di Matteo Ronchi - m.ronchi@cef62.com Adobe Air offre molteplici possibilità per realizzare le nostre applicazioni desktop, mentre la maggior parte dei tutorial disponibili sulla rete mostra come creare interfacce basate su Flex e Flash in questo articolo intendo dare risalto all’uso di codice Javascript per generare un semplice desktop video player. Questo tutorial mostra come creare la nostra applicazione usando Aptana Studio, un potente editor di programmazione basato su Eclipse creato per sviluppatori Ajax. Aptana Studio offre numerosi strumenti d’ausilio ai programmatori web che utilizzano tecnologie Ajax e di conseguenza è un candidato naturale come ambiente di sviluppo per creare applicazioni Adobe AIR basate su questo linguaggio. L’editor offre inoltre un plugin nativo che permette allo sviluppatore di non doversi preoccupare del setup del compilatore distribuito con l’SDK ma di potersi concentrare unicamente sulla realizzazione della propria applicazione. Aptana Studio offre comandi built-in per eseguire in fase di test la nostra applicazione e per compilarne la versione ridistribuibile quando necessario. La generazione dell’eseguibile avviene tramite un comodo wizard che ci permette di configurare i dettagli richiesti dal compilatore. Potete scaricare Aptana Studio da qui: http://www.aptana.com/studio, una volta installato, dalla StartPage visualizzata selezionate l’opzione per scaricare il plugin per creare applicazioni Adobe AIR. A questo punto siete pronti a procedere. Creiamo un progetto AIR in Aptana Studio Apriamo Aptana Studio e creiamo un nuovo progetto Adobe AIR.

Selezionato il tipo di progetto ci viene chiesto di definire nome e posizione sul disco del progetto.

27 [82]

SEGUE u

DEVELOPING

Eventualmente Aptana ci offre la possibilità di creare un progetto integrato con un server Ajax da loro offerto. Successivamente ci vengono offerte due schede per definire i dettagli che andranno a costruire il file XML descrittore usato dal compilatore di Adobe AIR per generare ed eseguire la nostra applicazione. Il primo dei due dialog definisce aspetti dell’applicazione quale id, nome e descrizione dell’eseguibile da generare ed eventualmente permette di impostare delle icone personalizzate. Quello successivo si occupa di dimensioni, posizione e aspetto della finestra della nostra applicazione.

SEGUE u SEGUE u

AIR-Ajax Video player

28 [82]

DEVELOPING Infine possiamo definire fin da subito eventuali librerie Ajax che andremo ad usare in modo che il programma le importi per noi.

Il file XML generato sarà simile a questo: <?xml version=”1.0” encoding=”UTF-8”?> <application xmlns=”http://ns.adobe.com/air/application/1.0”> <id>com.flexgala.app.simpleVideo</id> <filename>flexGalaSimpleVideo</filename> <name>FlexGala Ajax Video Player</name> <version>1.0</version> <description>FlexGala Video Player</description> <copyright>Flexgala.com</copyright> <initialWindow> <content>index.html</content> <title>FlexGala.com Simple Video Player</title> <systemChrome>standard</systemChrome> <transparent>false</transparent> <visible>false</visible> <minimizable>true</minimizable> <maximizable>true</maximizable> <resizable>true</resizable> <width>640</width> <height>400</height> <x>200</x> <y>200</y> <minSize>400 300</minSize> <maxSize>1640 1400</maxSize> </initialWindow> <icon> <image16x16>icons/icon_16.png</image16x16> <image32x32>icons/icon_32.png</image32x32> <image48x48>icons/icon_48.png</image48x48>

29 [82]

AIR-Ajax Video player

SEGUE u

DEVELOPING <image128x128>icons/icon_128.png</image128x128> </icon> </application>

questo documento sarà successivamente modificabile se necessario, dovrete però aggiornarlo manualmente prima di ricompilare l’applicazione. Creiamo il layout HTML principale Ora andiamo a definire il contenuto del file principale della nostra applicazione (index.html). Questo documento funzionerà da main controller per la nostra applicazione, si occuperò quindi di definire le funzionalità tramite javascript ed il layout grafico usando degli Iframe. Adobe AIR estende il DOM tradizionale di un documento HTML aggiungendo ad alcuni elementi (tra cui gli Iframe) attributi e proprietà supplementari per rendere più agile lo sviluppo di applicazioni AIR Ajax. All’interno del tag Head andiamo ad importare i file javascript che definiscono la business logic: <head> <title>FlexGala Video Player</title>  <script type=”text/javascript” src=”lib/js/air/AIRAliases.js”></script>  <script type=”text/javascript” src=”lib/js/air/AIRIntrospector.js”></script>  <link href=”lib/css/appStyle.css” rel=”stylesheet” type=”text/css” />  <script src=”lib/js/ErrorManagement.js” type=”text/javascript”></script> <script src=”lib/js/Utils.js” type=”text/javascript”></script> <script src=”lib/js/VideoSetup.js” type=”text/javascript”></script> <script src=”lib/js/main.js” type=”text/javascript”></script> </head>

All’interno del Body del documento HTML importiamo in un Iframe i controlli di riproduzione del nostro video e registramo una funzione ‘doLoad()’ al caricamento avvenuto del DOM. Utilizzando Iframe che importano documenti HTML esterni possiamo definire dei moduli riutilizzabili per le nostre applicazioni AIR. <body id=”mainWin” onLoad=”doLoad();”> <iframe id=”videoContainer” src=”video.html”/> </body>

Definiamo controlli di riproduzione usando un Iframe il documento HTML caricato nell’IFrame definisce i controlli di riproduzione, la barra di riferimento temporale ed il pulsante per richiedere la finestra di selezione del file video: <html> <head> <title>Video Frame</title>  <link href=”lib/css/video.css” type=”text/css” rel=”stylesheet” />  <script src=”lib/js/prototype/prototype-1_5_1_1.js” type=”text/javascript”></script>

SEGUE u SEGUE u

AIR-Ajax Video player

30 [82]

DEVELOPING

Questo documento HTML usa la libreria Ajax ‘prototype’ per calcolare la dimensione della barra di caricamento e poter così definire correttamente la posizione del cursore di riproduzione. Il codice Javascript associato si occupa di definire l’interazione con i pulsanti ed il loro feedback grafico. Si occupa inoltre di aggiornare quando richiesto dall’applicazione principale la testina di riproduzione. La funzione ‘doLoad()’ chiamata a caricamento del DOM avvenuto è la seguente: // Chiamata quando il DOM dell’Iframe ﾏ caricato // configura controlli di riproduzione e sandbox di comunicazione function doLoad() { var exposed = new Object(); // associamo le funzioni tra main HTML e IFrame // senza violare restrizioni di sicurezza // usando la proprietˆ ‘childSandboxBridge’ // aggiunta da Adobe AIR agli Iframe exposed.resetPlayhead = resetPlayhead; exposed.setPlayhead = setPlayhead; childSandboxBridge = exposed; // configuriamo effetti interazione controlli di riproduzione document.getElementById( ‘play’ ).addEventListener( ‘mouseover’, doPlayOver ); document.getElementById( ‘play’ ).addEventListener( ‘mouseout’, doPlayOut ); document.getElementById( ‘play’ ).addEventListener( ‘mousedown’, doPlayDown ); document.getElementById( ‘play’ ).addEventListener( ‘mouseup’, doPlayUp ); document.getElementById( ‘play’ ).addEventListener( ‘click’, doPlayClick ); document.getElementById( ‘open’ ).addEventListener( ‘mouseover’, doOpenOver ); document.getElementById( ‘open’ ).addEventListener( ‘mouseout’, doOpenOut ); document.getElementById( ‘open’ ).addEventListener( ‘mousedown’, doOpenDown ); document.getElementById( ‘open’ ).addEventListener( ‘mouseup’, doOpenUp ); document.getElementById( ‘open’ ).addEventListener( ‘click’, doOpenClick ); // azzeriamo posizione testina di riproduzione resetPlayhead(); }

Per avere una visione completa del documento javascript e dell’implementazione delle funzionalità nel dettaglio fate riferimento all’evento completo allegato all’articolo. Aggiungiamo codice Javascript per caricare il video Nella funzione chiamata ad inizializzazione del DOM del documento HTML pricipale avvenuta ci occupiamo di istanziare e mettere nella disply list della nostra applicazione un controllo video esposto dalle API di Adobe AIR all’ambiente Javascript,

31 [82]

AIR-Ajax Video player

SEGUE u

DEVELOPING

andiamo anche a definire una mappatura tra funzioni definite dall’applicazione principale e delle proprietà accessibili ai controlli all’interno dell’IFrame, in questo modo potemo associare, all’interno del modulo importato, degli eventi d’interazione con le funzioni esposte. // Chiamata quando il video è stato caricato dal filesystem // configura controlli di riproduzione e sandbox di comunicazione function doInitVideo() { var exposed = new Object(); // associamo le funzioni tra main HTML e IFrame // senza violare restrizioni di sicurezza // usando la proprietà ‘parentSandboxBridge’ // aggiunta da Adobe AIR agli Iframe exposed.open = open; exposed.pause = pause; exposed.resume = resume; document.getElementById( ‘videoContainer’ ).contentWindow.parentSandboxBridge = exposed; // definiamo la cartella in cui si aprirà // il dialog di selezione del video flv = air.File.desktopDirectory; flv.addEventListener( air.Event.SELECT, doSelect ); // associamo all’evento di ENTER_FRAME la funzione // che controlla la testina di riproduzione del video window.htmlLoader.stage.addEventListener( air.Event.ENTER_FRAME, doFrame ); // Inizializziamo la connessione per il video // senza specificare nessun serer di streaming, // in quanto non ne usiamo conn = new air.NetConnection(); conn.connect( null ); // Inizializzaimo un flusso video e // lo associamo alla connessione aperta // monitoriamo gli eventi di stato e metadati correlati al flusso stream = new runtime.flash.net.NetStream( conn ); stream.client = this; stream.addEventListener( air.NetStatusEvent.NET_STATUS, doStatus ); // Inizializziamo un oggetto video di Flash // Attacchiamo il video al flusso video video = new air.Video(); video.attachNetStream( stream ); // poniamo il video sopra il cotrollo HTML // che contiene la nostra applicazione window.htmlLoader.stage.addChild( video ); // Centriamo l’applicazione nello schermo center(); }

Il controllo HTML che contiene la nostra applicazione Ajax non permette di aggiungere al suo interno istanze di oggetti creati tramite le API di Adobe AIR, come il video display per esempio, quindi dobbiamo andare a posizionare il controllo sovrapposto al di sopra del layer HTML. Questo è possibile perchè le applicazioni Adobe AIR programmate in Ajax vengono compilate ed incorporate in un’istanza Actionscript che offre funzionalità di un Display Object Container e ci permette dunque di usare delle API standard per aggiungere oggetti in overlay allo strato HTML. Definendo l’istanza dell’oggetto video abbiamo registrato una funzione alla ricezione dei metadata del video in caricamento. In questa funzione ci preoccuperemo di leggere durata e dimensioni del video e di deguare l’aspetto del nostro video player:

SEGUE u SEGUE u

AIR-Ajax Video player

32 [82]

DEVELOPING

// chiamata quando i Metadati inerenti il video sono disponibili // NB. Se il video non definisce informazioni metadata non potremo // ridimensionare la finestra correttamente function onMetaData( e ) { // durata totale del video totalTime = Math.floor( e.duration ); // scriviamo la durata del video nella console di debug air.Introspector.Console.log( “video duration: “ + totalTime ); // verifichiamo se sono disponibili informazioni di dimensione if( e.width != null ) { // Ridimensioniamo display video video.width = e.width; video.height = e.height; // ridimensioniamo finestra fit( e.width, e.height ); // Centriamo l’applicazione nello schermo center(); } }

Quando ridimensioniamo la finestra adeguandola alle nuove dimensioni del video dobbiamo tenere conto anche degli ingombri dati dalla barra del titolo e dai bordi della finestra più, ovviamente, l’ingombro dei controlli di riproduzione. // Ridimensiona la finestra dell’applicazione a dimensione del video caricato // viene tenuto conto anche delle dimensioni occupate dalla barra del titolo // ed i vordi della finestra function fit( width, height ) { // Calcoliamo ingombro elemnti della finestra nativa var chromeHeight = window.nativeWindow.height - window.htmlLoader.stage.stageHeight; var chromeWidth = window.nativeWindow.width - window.htmlLoader.stage.stageWidth; // Ridimensioniamo la finestra per contenere correttamente // il video caricato window.nativeWindow.width = chromeWidth + width; window.nativeWindow.height = chromeHeight + CONTROL_HEIGHT + height; // posizioniamo la finestra video se necessario if( video.width < MIN_WIDTH ) { video.x = ( MIN_WIDTH - video.width ) / 2; }else{ video.x = 0; } if( video.height < ( MIN_HEIGHT chromeHeight CONTROL_HEIGHT ) ) { video.y = ( ( MIN_HEIGHT - chromeHeight - CONTROL_HEIGHT ) - video.height ) / 2; }else{ video.y = 0; } // scriviamo nella console l’altezza attuale della finestra

33 [82]

AIR-Ajax Video player

SEGUE u

DEVELOPING air.Introspector.Console.log( “nativeWindow.height: “ + nativeWindow.height ); }

Per sincronizzare il cursore della testina di riproduzione al flusso video abbiamo registrato la funzione ‘doFrame()’ all’evento di EnterFrame dell’applicazione, così ad ogni aggiornamento del display ci preoccuperemo di aggiornare anche la posizione della testina: // Chiamata ad ogni evento di ENTER_FRAME dell’applicazione // si occupa di aggiornare la testina di riproduzione del video function doFrame( e ) { var current = null; // verifichiamo se i lvideo ﾏ in riproduzione if( isPlaying ) { // Dcalcoliamo percentuale di video riprodotta current = stream.time / totalTime; // posizioniamo il cursore document.getElementById( ‘videoContainer’ ). contentWindow.childSandboxBridge.setPlayhead( current ); } }

AIRIntrospector, il debugger per applicazioni Ajax-AIR In alcune delle funzioni sopra riportate avrete notato delle istruzioni che si riferivano alla classe ‘air.Introspector.Console’, questa è responsabile di interagire con il debugger offerto da Adobe per applicazioni AIR sviluppate con tecnologia Ajax. AIRIntrospector è una replica fedele del noto plugin per Mozilla Firefox: FireBug, come FireBug si può mostrare o nascondere usando il tasto F12 oppure lo si può far apprire richiedendo un log nella console di output. Per poter accedere ad AIRIntrospector bisogna accertrsi di avere importato il file javascript ‘AIRIntrospector.js’ nel documento HTML. Ora sta a voi affrontare la sfida di creare applicazioni Adobe AIR usando HTML ed Ajax, il limite è solo la vostra creatività.

Dopo un passato da montatore video e modellatore 3D, ha iniziato a conoscere il mondo dei

scritto da

contenuti multimediali e ad appassionarsene grazie a Macromedia Director. Da qui il passo verso la programmazione e la creazione di contenuti interattivi e applicazioni Actionscript, Flex e Adobe Air è stato breve. Oggi sperimenta soluzioni creative che si avvalgono delle possibilità offerte da librerie quali papervision3D e Sandy.

Matteo Ronchi m.ronchi@cef62.com

FINE

34 [82]

DESIGN Innovare l’esperienza: progettare eventi tra reale e virtuale

di Stefano Lazzari - stefano.lazzari@gmail.com - http://stexauer.blogspot.com/

C’è ancora una frontiera che rimane spalancata: l’innovazione delle esperienze. Questo è l’unico genere di innovazione del business che non è imitabile, e neanche può essere mercificato, perché è nato per i desideri ed i bisogni specifici dei vostri clienti ed è un’espressione unica del DNA della vostra azienda. Tuttavia il design di un’esperienza è spesso tralasciato nella corsa al mercato Sohrab Vossoughi, il fondatore e presidente di ZIBA Design Spazio, ultima frontiera. Con queste parole si aprivano le puntate delle avventure dell’astronave Enterprise e del suo equipaggio nello spazio aperto. In un certo senso, senza altrettanta poesia, innovare l’esperienza della produzione di un evento che si trasferisce dal mondo reale a quello sintetico è altrettanto pieno di sorprese e di opportunità da esplorare. In questo articolo riporto alcuni spunti sulla realizzazione di due progetti che riguardano eventi realizzati a Milano. Si tratta di due incontri pubblici dedicati alle tecnologie ed al design, che hanno visto lo svilupparsi degli eventi in due spazi contigui, il Real World e Second Life, in un progetto di continuità unito dal medesimo tempo: i due mondi erano collegati in real time e l’azione si spostava nelle due dimensioni senza interruzione. Per comprenderli meglio perché ripongo speranze di innovazione in questa direzione, bisogna però intenderci sul contesto tecnologico in cui ho iscritto questa esperienza, e iniziarla a condividere. Esperienza Crossmedia La crossmedialità, soprattutto oggi nell’ambito del rinnovamento di internet portato dalle istanze del web 2.0, non è una tendenza ma una pratica consolidata, anche se ancora poco diffusa soprattutto nel nostro paese. Il concetto di crossmediale, ovvero di una non meglio definita convergenza dei media digitali, spesso è usato a sproposito, e non tiene conto delle difficoltà tecniche ed organizzative e delle resistenze umane all’innovazione che fanno dei progetti seriamente innovativi e crossmediali un difficile, faticoso e (a volte) appagante lavoro. Ma superati i veri scogli - che non sono tecnologici ma culturali - le leve su cui credo stia operando sono essenzialmente tre: i mash-up tra piattaforme con API aperte e disponibili e i contenuti più disparati (immancabile il riferimento alla geolocalizzazione dei contenuti di Google map/earth); le tecnologie applicative webApp o SaaS ( vedi l’articolo nel precedente numero di Usermatter(s) sulla tecnologia Flex di Adobe) che spostano e mixano l’esperienza della elaborazione e della gestione dal locale alla rete e viceversa senza soluzione apparente di continuità ( l’inizio dell’ ubicomp?); la condivisione di potenza di calcolo e di servizi delle tecnologie di peer che stanno trasformando la rete in una risorsa infrastrutturale1. Tutte queste tecnologie stanno portando nella direzione di rendere sempre più porosa la membrana2 che separa le attività del digitale dalle necessità del mondo reale, creando (in tempie modi che non sto qui a indicare) un’unica esperienza che racchiude ambedue gli stati per superare l’ambiguità del “virtuale” inteso come stato di stato allucinatorio e deficitario della realtà. Senza scomodare teorie della complessità e stati di meccanica quantistica, il metaverso è proprio “questa 1

Un po’ come la rete elettrica: si usa dovunque per quel che serve, dall’illuminazione di una città al rasoio elettrico, dipende dal dispositivo e dall’attività da svolgere.

Membrana e’ il terimine usato da Edward Castronova nel suo saggio “Universi sintetici. Come le comunità online stanno cambiando la società e l’economia” e che utilizzo nella medesima accezione di schermo fra le due realtà, quella fisica e quella digitale. universi sintetici http://tinyurl.com/3pxhnc

35 [82]

SEGUE u

DESIGN

cosa qui”: una forma digitale di realtà aumentata, un mix di contenuti, spazio e tempo che si sovrappongono e rendono più ricca l’esperienza del nostro mondo3 Il caso: MMG & MTZ, Style Magazine L’esperienza inizia in questo quadrante, precisamente a Milano, 2007 d.c. Il Meet The Media Guru propone nella bella cornice della Mediateca di Santa Teresa incontri con personalità della tecnologi e della creatività internazionali in un ambito informale e molto partecipato. Lo spazio fisico è quello che è, e ogni volta bisogna lasciare fuori qualcuno. Perché non estendere la possibilità della partecipazione a chi non ha avuto modo di intervenire? L’idea viene suggerita da Leandro Agrò, riferimento indiscusso nella scena del’interaction design e “evangelista” della diffusione dei metaversi - in questo caso Second Life che iniziava al momento la sua corsa mediatica più sfrenata - che si presta attivamente ( e gratuitamente - grazie Lee!) a realizzare l’evento in una simulazione della Mediateca su Idearium, land di cui è l’owner 4. Lo streaming delle immagini riprese da telecamere nella sala della Mediateca e dell’audio dei microfoni viene trasmesso in Second Life in tempo reale, il pubblico partecipa di qua e al di la della membrana, le domande e le risposte rimbalzano tra i due pubblici. Il MMG propone da allora puntualmente il suo doppio digitale, che è diventato oggi un evento ricorrente. Il More Than Zero Festival ha moltiplicato l’esperienza del MMG ampliandola e applicandola ad una formula innovativa: il confronto fattivo fra creatività e impresa, due mondi che difficilmente hanno occasione di confrontarsi apertamente in un pitching che confrontava le opere di numerosi creativi. I vincitori dei diversi contest hanno modo di realizzare i progetti. Accanto al contest, il cuore della manifestazione, rassegne video, convegni e workshop. Anche per MTZ si prepara lo streaming con le medesime modalità, ma con una doppia complicazione: da una parte la lunghezza dell’evento ( tre giorni full) e dall’altro la moltiplicazione delle land che richiedevano la connessione in contemporanea. Il broadcasting e la banda sono l’elemento strategico dell’operazione: ogni nuova connessione deve servire contemporaneamente molti utenti-avatar e questo può creare nelle land un effetto di generale rallentamento, il “lag” che avvolge come in una melassa tutti i movimenti nel metamondo. In questo caso dobbiamo la nostra fortuna al TOrino Piemonte Internet eXchange, TOP-IX che ci sta sorreggendo con i suoi potenti server sin dall’inizio di questo viaggio. L’ultimo caso che vi propongo invece vede al contrario dello streaming, la partecipazione diretta di persone e realtà del mondo reale nel metamondo. In questa modalità si perde la relazione con “l’altro mondo” ma la formula rimane sostanzialmente la stessa: mettere in relazione le due realtà. Accade con regolarità nella land della rivista Style Magazine, del gruppo Rcs, dove si sono succeduti i curatori del MOMA di N.Y. del MART di Rovereto ( e i rispettivi allestimenti ) gli artisti del Cirque du Soleil, oltre a personalità della cronaca e dello spettacolo. In questo caso il mio intervento si limita alla partecipazione del lavoro della redazione del magazine e al lavoro di Max Ramaciotti di Second-Key (2ndk), ideatore del progetto, che sta avendo evoluzioni importanti che tratteremo in seguito. Intanto cerco di sintetizzare gli elementi che si sono tratti da questa forma di intendere la produzione di un evento. Tempo e Spazio Quello che accomuna le diverse esperienze sono un continuum che unisce il comune sentire delle persone da ambedue i lati della membrana. A differenza di una call conference o di una video conference, il metaverso propone una condivisione di uno spazio e della presenza di corpi, dove si attuano (provare per credere) analoghi modelli comportamentali alla “vita reale”, ci si siede accanto a persone conosciute, si chiede parola e si attende il proprio turno C’è chi vede questo come una bestemmia, e voci ben più rappresentative della mia come quella di Paul Virilio nel suo ultimo saggio “l’arte dell’accecamento” vede in tutto questo una straziante parodia della realtà, almeno quella da lui intesa... ma tant’e’. Mi premurerò di ascoltarlo quando avrà uno straccio di ipotesi sul come risolvere uno qualunque dei temi da lui posti...)

L’owner è il proprietario di un terreno, in cui e’ il vassallo assoluto (ricordiamoci che la code authority dei linden e’ sopra di tutto). Dispone di tutte le risorse e della possibilità di condividerle a vari livelli, con altri utenti.

SEGUE u SEGUE u

Innovare l’esperienza: progettare eventi tra reale e virtuale

36 [82]

DESIGN (provate a farlo in una chat...). Quello che definisco il “comune sentire” (antropologi e sociologi sanno definirlo meglio) deriva proprio dal fatto di condividere5 in contemporanea, ovvero in forma immersiva6 sia un tempo - quello della diretta sia uno spazio - l’ambiente, la disposizione dei monitor e dei punti di vista delle camere: insomma “di esserci”. Interazione Ad accompagnare l’evento rimane fondamentale la presenza o la compresenza nei due lati di uno o più relatori o moderatori dell’evento. La differenza si è vista la dove mancava. Per quanto sia consolidata l’abitudine di assistere ad uno spettacolo in autonomia, la presenza in avatar compensa una certa condizione di subalternità che sente lo spettatore del metaverso rispetto all’altro (nel caso di una diretta), e mitigano un certo “effetto acquario” che si scatena nei presenti del mondo reale quando si vedono riprodotti nel lillipuziano mondo sintetico. Preparazione e dotazione tecnica dell’evento È impressionante come basti veramente poco per realizzare uno streaming decente. Lo definisco così perché siamo ben lontani dalla qualità che alcune piattaforme di condivisione video ci stanno facendo ammirare. Le limitazioni stanno nelle tecnologie di riproduzione all’interno di Second Life e nella necessaria limitatezza in termini di bit-rate e di dimensioni immagine che bisogna dare perché ci sia una qualità media accettabile. Bisogna dire che oggi gli utenti sono di bocca buona, buonissima, e non si scandalizzano per la bassa qualità. Quello che deve essere mantenuto alto il più possibile é la qualità audio,che compensa in parte le limitazioni del video. Un discorso a se riguarda l’uso delle luci, che non tratto per pudore: già provate a convincere una Camera di Commercio ad aprire un indirizzo senza firewall ( necessarissimo per uscire in SL), a darvi una linea analogica della regia e per brevi attimi il controllo joistick delle camere... Il giorno in cui potremmo valutare l’effetto di una buona qualità video e di una buona illuminazione sarà da ricordare. Restando nell’ambito del possibile-subito-pronti-via sul set sarà necessario avere: 1) un computer connesso in rete senza firewall ( o adeguatamente bucata) con un software di broadcasting per trasmettere il flusso all’indirizzo del server streaming che lo erogherà in SL. Io uso un MacBook Pro con quicktime broadcasting, un software gratuito per lo streaming. QT Broadcasting ha anche l’utilissima opzione per registrare su disco lo stream, cosa che non tutti i service fanno. 2) una telecamera digitale con uscita firewire o USB2. Male che vada la buona e semplice webcam del portatile può bastare... 3) un ottimo microfono collegato alla telecamera che porta il segnale con il video. Male che vada avete il microfono della webcam ma è solo meglio che niente... Le cose cambiano quando si può avere a disposizione una regia audio video: si possono sdoppiare i segnali audio dell’ambientale e ad esempio del traduttore, prendere direttamente dai microfoni dei relatori, gestire più telecamere, usare una base audio per i momenti vuoti, ecc. Indispensabile in questo caso un adattatore ADV ( come il Canopus ADV55) per convertire il segnale audio video analogico in segnale digitale e collegarvi alla firewire/USB2 del vostro portatile. Utilissimo è un secondo (o più) computer con i client Second Life per i nostri relatori o per il moderatore. ... mi sembra sia tutto e che non manchi nulla. Tranne gli innumerevoli incidenti di settaggio, segnale audio muto, il video “Wikinomics” e “Teoria della coda lunga” sono al centro del dibatito economico sun nuovo web, di cui il metaverso ne fa integralmente parte. Non leggerli significa perdersi gran parte dei motivi per cui vi potrebbe tornare utile la lettura di questo articolo. wikinomics - http://tinyurl.com/4t9qko, coda lunga - http://tinyurl.com/5xt5zn

Significativo e interessantissimo il saggio di Agata Meneghelli “Dentro lo schermo: immersione ed interattività nei god games” che pur non prendendo in considerazione direttamente il metaverso, fa un’analisi delle interfacce e degli aspetti percettivi perfettamente confacenti al nostro caso e di cui si dibatterà molto. dentro lo schermo - http://tinyurl.com/4lnvwy

37 [82]

Innovare l’esperienza: progettare eventi tra reale e virtuale

SEGUE u

DESIGN

che impazza, Second Life che crasha o è chiuso per mantenimento, il monitor della land che non funziona non si sa perché... insomma, il bello della diretta che vi lascio interamente gustare. Inutile dire che un piano B é assolutamente auspicabile, così come fare test in anticipo. E qui passo alle dolenti note. Difetti e problematiche A parte Murphy e le sue inderogabili leggi abbiamo commesso una montagna di errori: dunque abbiamo ampi margini di miglioramento. Più che la tecnica é questione di tempi scenici, uso e posizionamento delle telecamere, mancanza di preparazione e inesperienza nella gestione degli avatar e nella gestione dei dialoghi. La compresenza dei relatori/ moderatori é un elemento critico, e inutile nasconderselo, gran parte degli errori nasce dalla diversità della risposta attesa dei due pubblici, che differisce innanzitutto proprio da una parallela visione del tempo. In Second Life, il prime time è molto più avanti di quello canonico in Real Life, ad esempio. Sarà difficile raccogliere le folle alle 14 P.M. (ora locale) e sarà più facile trovarsi nel lag alle 23 P.M. Altra questione strategica sono i canali di comunicazione, in mancanza di un vero e proprio motore di ricerca interna o di infrastrutture condivise di comunicazione fra land (assurdo, a ben pensarci) bisogna crearne di virali da ambedue i lati della membrana. La costruzione della qual cosa é in verità molto stuzzichevole e piena promesse, un terreno su cui andare a lavorare. Ora senza ricorrere alla prosa delle meravigliose e progressive sorti, passiamo a vedere quali conclusioni trarne per il futuro. I risultati Se dovessimo guardare con lo sguardo del marketeer ai numeri assoluti di accesso e ragionassimo fuori dalla logica del mercato di nicchie descritto dalla wikinomics e dalla teoria della coda lunga, tutto il progetto risulterebbe una colossale ingenuità, pur ammettendo tutte le attenuanti: l’aspetto di sperimentazione, la realtà prototipale del format, la mancanza di un business model chiaro. Al contrario, vedendo la velocità di diffusione virale dell’evento (dalla singola land alle dieci presenti per l’ultimo streaming) la qualità dei singoli contatti tenendo conto delle caratteristiche qualitative delle land coinvolte, l’attivo co.makering degli utenti stessi, che coinvolti hanno a loro volta generato nuovi contenuti, sono misura di una vitalità raramente disponibile con altri media. Le opportunità del mirroring reale - metaverso sono ancora da esplorare, ma vedo presto lo sviluppo di nuovi format, nuovi prodotti mixed reality che sfruttano la coesione delle nicchie per creare esperienze che si sviluppano in più media. Molti sono ancora gli aspetti imponderabili e le sfide da affrontare in questo spazio. Gli aspetti degli ambienti immersivi6 ibridati con il reale, la definizione di identità individuale ubiqua che comporta l’esperienza da avatar, gli aspetti sinestetici e sensoriali, l’integrazione degli aspetti economici, la creazione di nuovi contenuti.... la lista potrebbe allungarsi di molto. Per ora concludiamo così, ma non e’ che l’inizio del viaggio.

scritto da

Stefano Lazzari stefano.lazzari@gmail.com - http://stexauer.blogspot.com/

FINE

38 [82]

DESIGN Ripensare lo spazio di lavoro: dal Virtual Workspace alle nuove logiche 2.0

di Andrea Pesoli - andrea.pesoli@polimi.it e Isabella Gandini - isabella.gandini@polimi.it

In un’accezione allargata, i concetti riconducibili allo User Centered Design, ovvero quella filosofia di design incentrata sui bisogni, i desideri e i vincoli dell’utente finale, possono essere applicati anche nella progettazione delle organizzazioni, dei processi e dei Sistemi Informativi. In particolare, la centralità della persona è oggi il principio alla base delle Intranet di nuova generazione e della loro evoluzione in spazi di lavoro virtuali: i Virtual Workspace. Per anni le Intranet hanno infatti scontato il “pregiudizio” di essere considerate semplicemente come un canale informativo per gestire la comunicazione unidirezionale verso i dipendenti o, al più, come un mezzo per consentire una più efficace pubblicazione di documenti aziendali o l’erogazione di servizi self service per i dipendenti. Le analisi dell’Osservatorio Enterprise 2.0 della School of Management del Politecnico di Milano hanno però mostrato come, a partire dal 2004, sia emersa e si sia diffusa una nuova visione – quella del Virtual Workspace – sempre più incentrata sulla persona, con l’obiettivo strategico di creare un ambiente completo di lavoro che affianchi alla comunicazione, i servizi aziendali, il supporto all’operatività tramite l’accesso alle informazioni ed agli strumenti più utili ed il supporto alla gestione della conoscenza ed alla collaborazione fra le persone. Abbracciare questa nuova logica significa dunque guardare non tanto ai processi e alle funzionalità, quanto piuttosto alla persona ed al modo in cui si supporta il “sistema” in cui opera ed interagisce. È proprio integrando e mettendo a disposizione dell’utente strumenti, informazioni e mezzi di comunicazione e collaborazione che il Virtual Workspace può condizionare e dare forma all’organizzazione. Nello specifico, i bisogni che le organizzazioni possono – e devono – soddisfare sono: supporto all’operatività: per operare l’individuo ha bisogno di informazioni e strumenti che gli permettano di svolgere al meglio i propri compiti; il Virtual Workspace può influenzare i comportamenti consentendo un accesso integrato e profilato a tali strumenti in modo da garantire efficienza, efficacia, velocità e precisione; servizi per la vita lavorativa della persona: in quanto prestatore d’opera e “cittadino” dell’organizzazione, la persona ha bisogno di servizi e risorse che gli consentano una più efficace e confortevole vita lavorativa; attraverso il Virtual Workspace le organizzazione possono offrire migliori livelli di servizio a costi che, grazie alla possibilità di utilizzare logiche self service, possono essere inferiori a quelli tradizionali; mezzi di comunicazione e socializzazione: l’individuo vive nel proprio ambiente di lavoro dove cerca risposta ai propri bisogni di socializzazione, condivisione ed appartenenza; attraverso il Virtual Workspace le organizzazione possono dare risposta a questi bisogni creando, o ricostruendo identità ed opportunità di socializzazione, anche laddove la dispersone sul territorio, il turnover e le recenti riorganizzazioni abbiano compromesso appartenenze e relazioni tradizionali; accesso alla conoscenza e possibilità di collaborazione: per essere efficaci la persone hanno bisogno di accedere alla conoscenza codificata ed all’apporto di colleghi con i quali lavorano e condividere esperienze ed informazioni; attraverso il Virtual Workspace l’organizzazione può creare condizioni favorevoli per la gestione della conoscenza in ogni sua fase e facilitare la collaborazione tra gruppi anche geograficamente dispersi.

39 [82]

SEGUE u

DESIGN

Dopo un iniziale periodo di diffusione in ambiente internet, strumenti e logiche di relazione e contribuzione diffusa riconducibili al Web 2.0, si stanno oggi spostando all’interno delle imprese. Tra le tecnologie abilitanti di questo nuovo modo di interagire sul web, un particolare rilievo va agli strumenti di Social Computing quali blog, wiki, RSS e folksonomie. Se il Web 2.0 rappresenta l’evoluzione del Web e dei suoi modelli di business, quello che possiamo definire Enterprise 2.0 è un cambiamento nel modo stesso di pensare l’organizzazione, una rivoluzione lenta e inesorabile che è probabilmente già in atto e sta portando all’emergere di modelli organizzativi e stili di gestione fondati sul coinvolgimento diffuso, la collaborazione emergente, la condivisione della conoscenza e lo sviluppo e valorizzazione di community e reti sociali interne ed esterne all’organizzazione (per un approfondimento, si veda il rapporto “Enterprise 2.0: la rivoluzione che viene dal Web”, School of Management del Politecnico di Milano, 2008). L’adozione del “paradigma” dell’Enterprise 2.0 rappresenta inoltre una presa di coscienza della dimensione più ampia all’interno della quale la persona vive: sono bisogni “nuovi”, che non possono essere soddisfatti all’interno di uno spazio di lavoro “chiuso”. Possiamo quindi immaginarlo come un momento di rottura dei confini del Virtual Workspace. Qualsiasi tentativo di interpretare e spiegare il perché di questa “rottura”, deve partire – nuovamente – dall’analisi della persona e dei suoi bisogni: social networking: le persone hanno sempre più bisogno di sviluppare e mantenere quella rete di relazioni che rappresenta un asset sempre più importante per la loro efficacia professionale. Attraverso strumenti ed approcci Enterprise 2.0, la tecnologia supporta la creazione e gestione di relazioni, permettendo di rintracciare e contattare colleghi ed esperti dentro e fuori l’organizzazione, mantenendo sempre aggiornati i rispettivi profili di interessi, competenze e ruoli; conoscenza in rete: per non rischiare che le proprie conoscenze e competenze siano presto “superate” gli individui devono avere la possibilità di costruirsi una propria rete di accesso a conoscenze e informazioni accedendo a fonti diverse sia a livello esplicito - attraverso sistemi di document management, Business Intelligence, videosharing, RSS - che tacito – con strumenti che favoriscono l’interazione fra esperti come forum, sondaggi, blog, folksonomie, wiki; collaborazione emergente: in un contesto competitivo sempre più veloce e imprevedibile le persone hanno bisogno di creare ambienti di collaborazione in modo veloce e flessibile, anche al di fuori dagli schemi

SEGUE u SEGUE u

Ripensare lo spazio di lavoro: dal Virtual Workspace alle nuove logiche 2.0

40 [82]

DESIGN organizzativi formali. Le tecnologie Enterprise 2.0 danno questo potere agli individui, fornendo possibilità di interazione sempre più ricche e veloci sia di natura sincrona - chat, istant messaging, videoconferenza - che asincrona - condivisione agende, condivisione e co-editing di documenti di lavoro, invio SMS; riconfigurabilità adattativa: in risposta al continuo mutare delle politiche e delle strategie aziendali, le persone hanno bisogno di riconfigurare velocemente i propri processi e le proprie attività. Tecnologie come SOA, BPM, Mash up, SaaS, RIA, riescono a dare alle imprese, e in alcuni casi agli stessi utenti, strumenti per ridefinire ed adattare i processi con una dinamicità, flessibilità e personalizzazione difficilmente ottenibili con le tecnologie tradizionali; global mobility: le persone vivono una parte sempre più importante del proprio tempo lontano dalla propria postazione di lavoro e spesso in condizione di mobilità. Le nuove tecnologie danno loro la possibilità di connettersi ovunque e in ogni momento della giornata alla propria rete di strumenti, rendendo così spazi e orari di lavoro più flessibili; appartenenza aperta: le persone si sentono, e nei fatti sono, sempre più “appartenenti” a reti dinamiche allargate piuttosto che a una singola organizzazione; attraverso le tecnologie Enterprise 2.0, è possibile dar loro accesso sicuro e selettivo a informazioni, strumenti e relazioni che travalicano la propria impresa, interagendo in modo sempre più ricco ed efficace con fornitori, consulenti, partner, clienti ed altri attori appartenenti al proprio network.

Tra Virtual Workspace ed Enterprise 2.0 c’è dunque una continuità dal punto di vista logico, ma si tratta comunque di una rivoluzione che comporta la rottura di schemi tradizionali. Progettare organizzazioni, processi e Sistemi Informativi come spazi integrati e profilati dove le persone possano trovare quanto serve loro per lavorare, comunicare e sviluppare conoscenze, permette infine di influenzare comportamenti reali, decisioni e relazioni tra le persone ancor più di quanto si potrebbe fare ridisegnando la struttura gerarchica o definendo nuove mansioni e ruoli.

41 [82]

Ripensare lo spazio di lavoro: dal Virtual Workspace alle nuove logiche 2.0

SEGUE u

DESIGN

CASO: Chiesi Farmaceutici Il Gruppo Chiesi, impresa farmaceutica italiana fondata nel 1935, è una realtà internazionale del settore farmaceutico: opera nei cinque continenti con 21 filiali dirette, 3 impianti produttivi e 3 centri di ricerca. L’azienda concentra principalmente la propria attività nello sviluppo di farmaci per l’apparato respiratorio, cardiovascolare, muscolare, scheletrico e per la neonatologia. La società conta circa 3.000 dipendenti in Italia e nelle sedi estere. L’utilizzo di Intranet per la comunicazione e la condivisione della conoscenza è ormai una prassi consolidata per Chiesi, anche se l’adozione di strumenti di collaborazione basati sul web è stato compiuto di recente con il progetto Intranet Reloaded. Tra gli obiettivi del progetto quello di realizzare un ambiente che, oltre a informare i dipendenti, fornisse supporto all’operatività attraverso spazi di lavoro personalizzabili in base delle specifiche esigenze dei team di lavoro (sia funzionali che di progetto). L’organizzazione del progetto Intranet Reloaded ha tenuto conto dei requisiti propri di un’applicazione collaborativa (Enterprise 2.0). In particolare il gruppo di progetto è partito dall’analisi dei requisiti per sviluppare gli ambienti di collaborazione, coinvolgendo le diverse funzioni utenti che hanno indicato, di volta in volta, le loro esigenze specifiche. Ad oggi il nuovo ambiente Intranet si articola nel sito dedicato alla company Italia e in quello corporate. L‘avvio dello sviluppo di altri siti per le local companies è previsto nel corso dell’anno. Il sito Corporate, in lingua inglese, ha al suo interno i canali non territoriali MyCompany (comunicazione istituzionale) e MyJob (profilato per singola direzione con accesso a strumenti di lavoro). Il sito Italia include inoltre i canali MyCountry (specifico del panorama normativo e organizzativo del paese), MyLife (canale strettamente territoriale dedicato al rapporto tra vita privata e lavorativa) e SpazioRete (ambiente dedicato agli informatori scientifici). La prima sperimentazione di ambienti di collaborazione è avvenuta sui progetti relativi alla formazione. Molto utilizzati a questo proposito gli spazi di interazione virtuali (blog e forum) legati ai corsi in atto con l’obiettivo di facilitare lo scambio di conoscenza e di stimolare il desiderio di interagire su temi professionali. È inoltre attivo uno spazio di collaborazione dedicato a Opera, progetto di riorganizzazione dei processi di ricerca e sviluppo del Gruppo Chiesi. Il progetto si articola in gruppi di lavoro dedicati (workstream) ciascuno dei quali dispone di un ambiente virtuale personalizzato che consente di condividere documentazione e informazioni operative (calendario eventi, elenco attività, faq, ecc.) oltre che a creare gruppi di discussione.

Ingegnere Gestionale e Ricercatore della School of Management del Politecnico di Milano. È impegnato da più di

scritto da

due anni in diversi progetti di Ricerca legati a Web 2.0, Enterprise 2.0, Mobility, Consumerization e User Centered Intranet. Ha inoltre seguito diversi progetti di Intranet Assessment per alcune delle principali imprese italiane. http://www.linkedin.com/in/andreapesoli.

Andrea Pesoli andrea.pesoli@polimi.it

Ricercatrice della School of Management del Politecnico di Milano da quasi 10 anni. È attualmente responsabile dell’area Business2Employee che comprende diversi Osservatori, tra cui Enterprise 2.0, Intranet nelle Banche e ICT accessibile e disabilità. Negli anni ha inoltre seguito diversi progetti di Intranet Assessment per alcune delle principali imprese italiane.

scritto da

Isabella Gandini isabella.gandini@polimi.it

FINE

42 [82]

DESIGN Second Life experience - parte 2 di Alessandro Bordicchia - a.bordicchia@thecode.it Introduzione Nella “puntata precedente” avete appreso come accedere a Second Life, preso un po’ di confidenza con il client e siete atterrati su una sandbox per “rezzare” il vostro primo cubo (se non avete trovato una sandbox vi consiglio questa http:// slurl.com/secondlife/materia/78/75/21/ ). È ora di riprendere il vostro avatar conoscere un po’ meglio gli strumenti a vostra disposizione e le loro potenzialità. La finestra Build Una volta atterrati in una sandbx cliccate sul tasto “build” per visualizzare questa finestra:

Cliccate a terra per rezzare il vostro bel cubo

43 [82]

SEGUE u

DESIGN

La finestra diventerà attiva e il vostro cubo a terra sarà selezionato (potete riconoscere un oggetto selezionato dal bordo giallo che lo contorna). Oltre al cubo sono presenti una serie di altre “primitive” (prims in gergo) da cui partire per poi costruire altri oggetti. Ad esempio per aggiungere una piramide sopra il cubo cliccate sull’icona raffigurante la piramide (sulla finestra in alto) e cliccate sopra il cubo.

SEGUE u SEGUE u

Second Life experience - parte 2

44 [82]

DESIGN Ora la piramide sarà l’oggetto selezionato. Per selezionare entrambi gli oggetti tenete prenuto il tasto “shift” sulla vostra tastiera e cliccate sul cubo.

Se volete raggruppare il cubo e la piramide cliccate sul menu “tools” (sulla barra in alto) e selezionate “link” oppure semplicemente utilizzate la combinazione di tasti ctrl+l. La piramide e il cubo ora saranno considerate un solo oggetto. Prima di entrare in una fase un pochino più operativa vale la pena spendere due parole sulla finestra build in modalità general. In Second Life ogni oggetto ha in se le informazioni relative al creatore e al tipo di “distribuzione” che quest’ultimo ha intenzione di attuare sull’oggetto creato. Prima di tutto vale la pena dare un nome e una descrizione alla vostra opera.

45 [82]

Second Life experience - parte 2

SEGUE u

DESIGN

C’è la possibilità di gestire i permessi che gli altri avatar potranno avere sul vostro artefatto selezionando una o più checkbox presenti all’interno della finestra: share with group per condividere il vostro oggetto con il gruppo a cui appartenete Allow anyone to move per consentire a chiunque di spostare il vostro oggetto Allow anyone to copy per consentire a chiunque di copiare il vostro oggetto Show in search per renderlo visibile all’interno del motore di ricerca interno For sale per metterlo in vendita stabilendo un prezzo in linden dollars Nella sezione “next owner can” invece stabilite cosa potranno fare gli altri avatar con il vostro oggetto nel caso in cui lo vendiate: Modify potrà essere modificato Copy potrà essere copiato Resell potrà essere rivenduto o trasferito Nella sezione “when Left-Click” stabilite il tipo di interazione con l’oggetto, ma questo lo vedremo in seguito. Editare un oggetto Per entare nella modalità edit di una vostra creazione cliccate con il tasto destro su quest’ultima e selezionate dal menu a torta “edit”

Apparirà di nuovo la finestra build in modalità edit e la relativa icona in alto a destra verrà selezionata.

SEGUE u SEGUE u

Second Life experience - parte 2

46 [82]

DESIGN

Intorno al vostro oggetto appariranno delle freccie colorate con le quali potrete decidere gli spostamenti lungo i tre assi (x,y,z). Durante lo spostamento si attiveranno un metro con le unitĂ di misura di riferimento.

47 [82]

Second Life experience - parte 2

SEGUE u

DESIGN

Selezionando una delle altre opzioni nella parte alta della finestra è possibile effettuare le seguenti operazioni: Rotate ruotare l’oggetto Stretch modificare le dimensioni Select texture applicare una texture all’oggetto Duplicare un oggetto Per duplicare un oggetto selezionatelo (tasto destro/edit) e tenendo premuto il tasto shift spostatelo in una direzione a scelta.

A questo punto avete già delle buone basi per iniziare a sperimentare e per questo potete fare appello alla vostra fanatasia.

Una formazione divisa tra gli studi di architettura, design e di ergonomia cognitiva, dal 1999 ad oggi opera

scritto da

in diversi settori nell’ambito della comunicazione visiva. Da cinque anni a questa parte si interessa delle problematiche legate alla progettazione di interfacce utente, collaborando attualmente con maison,the (gruppo Visiant). Da circa due anni si occupa di progetti legati ai mondi virtuali collaborando con 2ndK, recentemente entrata a far parte del gruppo Visiant.

Alessandro Bordicchia a.bordicchia@thecode.it

FINE

48 [82]

DESIGN ELEMENTI TEORICI PER LA PROGETTAZIONE DEI SOCIAL NETWORK – Parte 2 di Davide Casali - folletto@gmail.com, Gianandrea Giacoma - gianandrea.giacoma@gmail.com Regola del 1-9-90 Questa teoria parte identificando tre tipologie di utenti nell’ambito di siti web che consentono una interazione attiva: 1) Lettori (lurkers): sono i fruitori passivi, ovvero coloro che utilizzano i contributi del sito senza apportare alcun contributo. Non per forza si tratta di lettori occasionali, potrebbero essere anche frequentatori abituali. 2) Autori occasionali: sono persone che, oltre a usufruire dei contenuti, hanno talvolta contribuito per integrare o aggiungere qualche informazione o commento. 3) Autori attivi: sono i maggiori produttori dei contenuti del sito web, partecipano con una frequenza elevata, talvolta investendo anche molto tempo. Alcune ricerche (Nielsen, 2006) hanno osservato il rapporto fra visitatori e produttori di alcuni dei più importanti siti sul web (Wikipedia, Amazon, Technorati, ...) scoprendo che: su Wikipedia, 1.000 sono autori attivi, 68.000 sono autori occasionali e 32 milioni sono lettori. all’interno della blogosfera, 0.1 sono autori attivi (che postano almeno giornalmente), 55 milioni sono autori occasionali ( che postano con minore frequenza) e 1.100 milioni sono lettori. Questi numeri rafforzano quindi la teoria dell 1-9-90 che definisce come: 1% degli utenti sono autori attivi, 9% degli utenti sono autori occasionali, 90% degli utenti sono lettori. Un osservatore attento avrà sicuramente notato come i valori sopra riportati non coincidono con i tre numeri della regola, che invece porterebbero a valori ancora più sbilanciati. È importante fare questa osservazione perché porta a dimensionare correttamente i valori: non si tratta infatti di valori fissi, ma di cifre indicative. Inoltre, consente anche di riflettere sulla crescita delle community che si sviluppano intorno ai siti interattivi (e quindi nei social network): all’aumentare della longevità del sito tenderà a farsi sempre più evidente il divario fra produttori attivi e lettori. In particolar modo, all’inizio sarà fondamentale avere una alta percentuale di utenti attivi, mentre pian piano che il sito si evolve tale numero crescerà lentamente (è possibile ipotizzare una crescita lineare, seppure non esistano ancora ricerche in merito), mentre i lettori aumenteranno esponenzialmente (questo tipo di crescita è stata invece più volte rilevata). È importante sottolineare che non vi è modo di appiattire questo divario: anche se ci si riferisce a servizi (come giochi online) che richiedono un minimo livello di interazione, tali categorie persistono, anche se saranno meno nette. L’indicazione data dalla regola dell’1-9-90 contribuisce anche a comprendere che: Le voci che si fanno sentire con lamentele (ma anche elogi) non sono rappresentative. Bisogna sicuramente sempre considerare tutte le lamentele, ma vanno comunque posizionate come un campione rispetto al totale degli utenti: tale campione potrebbe essere rappresentativo, come no. Egualmente, non bisogna smettere di lavorare al sito se si ricevono elogi: i primi utenti ad andarsene sono in ogni caso quelli che non si fanno sentire.

49 [82]

SEGUE u

DESIGN

È importante rendere la possibilità di contribuire il più semplice possibile, così come è importante cercare di ottenere il feedback dagli utenti nel modo più semplice possibile. Uno strumento per la votazione che prevede un solo click, seppure meno esaustivo di un commento, è più semplice e quindi verrà utilizzato da più persone. Per questo motivo è utile intrecciare più fonti di feedback e non affidarsi ad un solo strumento. Sei gradi di separazione Questa teoria prende anche il nome di small world theory (teoria del “mondo piccolo”), e definisce che in media, fra tutte le persone esistenti sul pianeta terra, esistono sei gradi di separazione. Nei termini della teoria delle reti, rappresentando ogni persona con un nodo e ogni amicizia con un arco fra due nodi, avremmo che per raggiungere un qualunque punto del grafo dovremmo passare in media attraverso altri sei nodi, prima di giungere a destinazione. Esiste una dimostrazione matematica di questo valore: calcolando il numero di collegamenti necessari per coprire l’intera popolazione mondiale (6.6 miliardi di persone). Con una cifra del tutto ragionevole di 50 legami (amici, parenti, colleghi, etc...) per ciascuna persona, si riescono a coprire tutti gli abitanti del pianeta utilizzando un valore di gradi di separazione compreso fra 5 e 7. Questa teoria ha avuto alcune dimostrazioni concrete, come l’esperimento di Stanley Milgram (1967) che utilizzando il servizio postale riuscì a dare una prima conferma che in media i gradi di separazione tra le persone fossero 6. In particolare i valori trovati oscillavano fra 2 e 10 circa, con una media intorno a 5.5. Inoltre, presentavano un tasso molto elevato di abbandoni, essendo comunque una operazione manuale piuttosto impegnativa per chi avesse ricevuto il pacco. L’esperimento venne ripetuto da Duncan Watts (Watts et al., 2003) utilizzando questa volta internet e le e-mail. Seppure il campione sia poco rilevante in ambito sociale off-line, è più utile ai fini dei social network sul web. Anche in questo caso, si è rilevato che la media dei gradi di separazione è intorno a 6. Dai due esperimenti sopra citati si può estrapolare un’altra informazione piuttosto interessante: anche nel caso delle e-mail, il tasso di adozione è stato basso, intorno al 30% per il primo passaggio e decrescente pian piano. Questo significa che per poter sfruttare i sei gradi di separazione inserendo il fattore umano, è necessario rendere il compito in egual misura molto semplice e molto attraente, dando buone spinte motivazionali in modo che l’interesse non svanisca con il procedere lungo la catena. Numero di Dunbar Il numero di Dunbar è un valore, approssimato intorno a 150, che definisce il numero massimo di persone con cui un singolo è in grado di mantenere una attiva relazione sociale. Il valore si basa sulla ricerca dell’omonimo scienziato inglese (Dunbar, 1992), il quale utilizzò una equazione di regressione sui dati raccolti da 38 generi di primati, per ricavare il valore di 147,8, con una probabilità del 95% che il valore cadesse fra 100 e 230. Dopo aver ricavato questo valore, Dunbar l’ha confrontato con i gruppi sociali umani e ha verificato che era un’approssimazione accettabile. Infatti tutti i gruppi umani, fin dalla preistoria, tendono ad assestarsi al massimo intorno alle 200 persone. Il numero massimo comunque viene raggiunto in determinate situazioni, quando vi è una forte pressione a rimanere uniti. Anche in tal caso comunque, Dunbar ha stimato che una grossa parte del tempo dovesse essere dedicata alle relazioni sociali (42% circa). E’ importante però calare la stima di Dunbar all’interno di un contesto sociale moderno, e soprattutto interconnesso tramite le nuove tecnologie.

SEGUE u SEGUE u

ELEMENTI TEORICI PER LA PROGETTAZIONE DEI SOCIAL NETWORK – Parte 2

50 [82]

DESIGN Possiamo infatti stimare che il concetto di ‘relazione sociale attiva’ sia cambiato con questi nuovi media e sia diventato più elastico, abbassando la soglia necessaria a considerare vicino qualcuno. Questo significa che il numero è plausibilmente più elevato nell’ambito dei social network, anche se al momento non vi è alcuno studio per tentare di stimare quale sia la media di relazioni attive tenute via web.

Il documento è rilasciato con licenza Creative Commons Attribution-Share Alike 2.5 Italia (http:// creativecommons.org/licenses/by-sa/2.5/deed.it). Il documento viene reso disponibile per l’editing collaborativo. Per questo motivo è disponibile sul wiki di Bzaar.net (http://wiki.bzaar.net) per essere integrato e modificato.

Davide ‘Folletto’ Casali, Interaction Designer con un forte orientamento multidisciplinare. Fra

scritto da

le sue esperienze c’è la realizzazione di un framework per il Web e la progettazione di assistenti virtuali emozionali. Inoltre è co-fondatore di un progetto per il design sociale, Good50x70. Lavora in maison,the ed è membro di Idearium.ORG e Bzaar.net.

Davide Casali folletto@gmail.com

Psicologo di formazione analitica, Social Network Designer e ricercatore all’Osservatorio sul Knowledge Management PKM360°. Lavora come libero professionista nell’analisi e progettazione delle dinamiche da Social Network, in ambito Internet, intranet e community. In vari contesti (organizzazioni, risorse umane, comunicazione, cultura) è impegnato a valorizzare la transdisciplinarietà innescata dal paradigma della complessità come cardine dell’innovazione e le convergenze tra Psicologia, KM, Social Networking, Web 2.0, Realtà Virtuale e Società della Conoscenza.

scritto da

Gianandrea Giacoma gianandrea.giacoma@gmail.com

51 [82]

FINE

52 [82]

DESIGN EYE TRACKING: CASO STUDIO - ANALISI DELLA INTERAZIONE CON IL SITO WWW.YOUTUBE.COM di Silvia Gilotta - silvia.gilotta@srlabs.it e Raffaella Calligher - raffaella.calligher@srlabs.it

Il www, oggi, è un mondo senza troppi limiti, un mondo che fornisce grandi possibilità di espressione, permettendo di essere presenti online in svariati modi. È un mondo che sostiene la multimedialità, ovvero la forma di comunicazione che più ci appartiene e che grazie alle innovazioni tecnologiche può essere facilmente riprodotta attraverso i canali mediatici, come Internet, consentendo di esprimerci come ci è più consono. YouTube è il sito web che permette di manipolare gli audiovisivi: si possono cercare e fruire video di varia natura, ma si possono anche caricare i propri video, condividendoli e contribuendo così allo sviluppo di YouTube stesso. È il web 2.0, che consente di essere presenti in modo attivo, senza più essere solo spettatori passivi. Home page You Tube

Sembra tutto molto bello. Ma è davvero così? Oppure anche YouTube, come molti altri siti web, mostra dei problemi di usabilità? È infatti importante che, oltre a fornire le opportunità che promette, un sito web le renda visibili, facili da capire e da raggiungere. Tali opportunità devono essere a portata di utente, altrimenti è come se non ci fossero. L’interfaccia deve quindi fornire tutte le facilitazioni affinché l’azione dell’utente sia sostenuta e ottimizzata. Il vantaggio di Internet è infatti indubbio, ma non sempre concreto. Per verificare l’effettiva usabilità del sito YouTube, abbiamo effettuato un test con l’eye-tracking, lo strumento che rileva i movimenti oculari, mettendo così in pratica quella corrente di pensiero che, nell’analisi dell’usabilità, pone al centro l’utente, la sua esperienza, ascoltandone la voce ma, soprattutto, seguendone lo sguardo! Al di là delle verbalizzazioni, di altri strumenti come i questionari o il cognitive walkthrough, i quali possono risentire di alcuni bias, avere a

53 [82]

SEGUE u

DESIGN

disposizione i dati forniti dall’eye-tracking permette di indagare ciò che effettivamente viene guardato e catturato dalla nostra attenzione, quindi processato in modo consapevole Il setting sperimentale, altamente ecologico, rende l’interazione naturale, lasciando gli utenti liberi di navigare e cercare come farebbero sul loro computer. Task 1: ricerca di canali Ai soggetti coinvolti nel test è stato chiesto di effettuare una ricerca, partendo dalla home page. In particolare, si è richiesto di cercare il canale della società sportiva A.C.Milan. Innanzitutto, si può analizzare l’impatto visivo della home page osservare la distribuzione delle fissazioni durante i primi 5 secondi.

Hot spot 5 secondi ricerca canale

Si può notare come la maggior parte delle risorse attentive cada esattamente nell’area dei “Canali”, nella barra superiore, dove è presente anche la barra del search. Questo è sicuramente un aspetto positivo, in quanto significa che l’elemento da cercare è presente sulla home page ed è anche ben visibile. La stessa evidenza emerge dall’analisi di alcuni percorsi: pur effettuando navigazioni differenti, l’area della barra superiore è sempre osservata e vi si concentrano la maggior parte delle fissazioni effettuate nei primi 5 secondi.

SEGUE u SEGUE u

EYE TRACKING: CAso studio

54 [82]

DESIGN

Percorsi 5 secondi ricerca canale Le difficoltà si presentano successivamente, durante la vera e propria ricerca. Sulla home page ci sono due modi per cercare i canali: 1. Cliccare sulla barra il tasto “Canali”

Modalità ricerca canali 1

55 [82]

EYE TRACKING: CASO STUDIO

SEGUE SEGUE u

DESIGN

2. Scrivere direttamente il nome da cercare e selezionare canali dal menù a tendina a destra del box di ricerca.

Modalità ricerca canali 2 Ma la differenza è solo apparente: pur cliccando il tasto “Canali” dalla barra menù (1), è indispensabile anche scegliere “Canali” dal menù a tendina poiché rimane selezionato automaticamente “Video”. Si effettua così un passaggio inutile oltre al fatto che l’operazione ti manda su una pagina di dubbia appartenenza dato che nessuna etichetta si evidenzia.

In tutti i casi è necessario scrivere nel box e selezionare “Canali” dal menù a tendina. Durante il nostro test, il 60% dei soggetti ha cercato secondo la modalità 1, il 40 % secondo la modalità 2. Di questo 60%, la totalità ha commesso errori nella ricerca. Anche la metà del 40% ha sbagliato la ricerca. Dunque, solo il 20% del campione totale ha portato a termine la ricerca senza errori, scrivendo il nome e selezionando “Canali” dal menù a tendina. Oltre alla bassa percentuale di successo, anche i tempi e il numero delle pagine visitate durante la ricerca mostrano chiaramente quanto sia poco usabile questa funzione.

Tempi di ricerca in media (secondi)

Numero pagine visitate nella ricerca

In conclusione, la ricerca dei canali non è per niente facile ed intuitiva. Innanzitutto la maggior parte dei soggetti non sa esattamente cosa significhi cercare canali su YouTube. Fortunatamente il tasto “Canali” è ben visibile e questo aiuta nell’individuazione del primo step. Purtroppo, se da un lato l’impatto visivo del sito web è buona, dall’altro la ricerca vera e propria non è priva di ostacoli. Le quattro etichette poste sulla barra superiore, (Home page, Video, Canali, Community) non sono ben differenziate tra di loro, di conseguenza, durante la ricerca, non forniscono feedback sufficientemente efficaci che aiutino l’utente a capire dove si trova. Inoltre, il vero passaggio discriminante è la selezione di “Canali” dal menù a tendina a destra del box “cerca”, che rimane

SEGUE u SEGUE u

EYE TRACKING: CAso studio

56 [82]

DESIGN automaticamente selezionato su “Video”, facendo commettere molti errori e passaggi. Queste difficoltà sarebbero facilmente evitabili se si progettasse l’interfaccia in modo usabile, coinvolgendo i soggetti fin dalle prime stesure di prototipi. Perchè occhi degli utenti non sbagliano mai. I test di eye-tracking sono stati svolti nei laboratori milanesi di SR Labs (www.srlabs.it) appositamente per Usermatter(s).

scritto da

Silvia Gilotta silvia.gilotta@srlabs.it

Laureata in Psicologia dello sviluppo e della comunicazione con tesi in Psicologia della comunicazione e dei nuovi media, incentrata sull’usabilità dell’interazione con siti web strumentali, web, è approdata nel 2007 alla Srlabs s.r.l. di Milano proprio per sviluppare il proprio lavoro di tesi. Il rapporto lavorativo continua, come il suo interesse per il mondo della HCI e dell’User Centred Design, oltre che per la psicologia cognitiva in generale. Attualmente sta svolgendo il tirocinio post-laurea, occupandosi di alcuni progetti in ambito psicologico e di usabilità.

scritto da

Raffaella Calligher raffaella.calligher@srlabs.it

57 [82]

FINE

58 [82]

AUTHORING&MULTIMEDIA Authoring 3D in Flash: ci prova Swift3D di Daniele Cerra - dan.cerra@gmail.com

Il connubio tra Flash e grafica 3D non è mai stato felicissimo. Prima dell’avvento di motori dedicati al 3D quali Papervision, Sandy 3D o Away3D, inserire elementi interattivi realmente tridimensionali che, quindi, non fossero la semplice rasterizzazione di animazioni importate in un filmato Flash, era un’attività riservata a pochi guru dello scripting. In attesa di verificare le reali potenzialità di Director 11 e di testarne l’usabilità del sistema di authoring così da scoprire se sarà realmente praticabile “da tutti” la strada del 3D all’interno di pagine Web o di RIA, i creatori di Swift 3D (www. erain.com) hanno pensato di integrare nell’ultima versione del prodotto un semplice ma efficace per l’esportazione in Flash tridimensionali.

Per chi non conoscesse Swift 3D, si tratta di un ambiente di modellazione tridimensionale molto semplice che, proprio per le funzionalità basilari e per l’attenzione dedicata alla cura dell’interfaccia, è molto apprezzato da grafici e web designer che non hanno un solido background nel mondo della modellazione 3D o da chi ha esigenze realizzativi più improntate sulla rapidità dell’esecuzione piuttosto che sulla qualità assoluta. Nel corso degli anni, le varie versioni di Swift 3D - che nasce come sistema di supporto per la creazione di oggetti e animazioni 3D importabili in Flash sotto forma di frame masterizzati e che è da sempre in grado di generare file .swf (senza scripting) – hanno integrato un numero di funzionalità sempre maggiori, fino ad arrivare all’attuale 5.0 con la quale, per la prima volta, si possono esportare veri e propri oggetti 3D mappati utilizzando la libreria Papervision. Pur essendo chiaramente solo un primo tentativo di affrontare il problema che presenta innumerevoli punti di miglioramento, si tratta di un approccio al 3D interattivo che stupisce per la semplicità di utilizzo e che lascia presupporre un futuro interessante qualora, ovviamente, si riesca tramite l’interfaccia di Swift 3D a sfruttare in maniera più convincente e flessibile le risorse di Papervision.

59 [82]

SEGUE u

AUTHORING&MULTIMEDIA

Dal punto di vista pratico, la realizzazione di un elemento 3D è molto semplice. Avviato il programma, trasciniamo un solido sullo stage e impostiamo dimensioni e posizione. A questo punto scegliamo il tipo di mappatura da applicare e trasciniamola sul solido. Per sperimentare in maniera rapida il tipo di risultato ottenibile questa prima fase può considerarsi conclusa.

L’esportazione del solido prevede che si acceda nel menu File si selezioni la voce export selected object to Papervision 3D. A esportazione terminata, andando nella cartella impostata per il salvataggio dei file vedremo che l’intero pacchetto di supporto per file tridimensionali è stato strutturato e che nella cartella principale è disponibile un file Fla non compilato.

SEGUE u SEGUE u

Adobe Director 11: il grande ritorno!

60 [82]

AUTHORING&MULTIMEDIA

Un doppio clic sul file .fla ci consente di aprire Flash e di accedere alle modifiche dell’interfaccia predefinita generata da Swift per il controllo dell’oggetto tridimensionale generato. Nello stage principale possiamo leggere alcune spiegazione che guidano alla modifica e alla personalizzazione del sistema di interazione con l’oggetto pubblicato. Per avere un’anteprima del risultato basta a questo punto compilare il file per generare un documento .swf pronto per la pubblicazione. Per concludere, pur rivelandosi meno efficace di quanto si vorrebbe (inspiegabilmente alcuni solidi non vengono generati correttamente) Swift 3D permette anche a chi non è esperto di Actionscript di togliersi qualche soddisfazione tridimensionale, il tutto in maniera decisamente rapida e intuitiva.

scritto da

Daniele Cerra dan.cerra@gmail.com

61 [82]

FINE

62 [82]

Non solo caratteri Non so quanti di voi si siano mai domandati se le lettere di un alfabeto, oltre a formare le parole si possano utilizzare come elementi decorativi. Esistono designer, artisti e grafici che pensano di si e che con estrema originalità e maestria hanno prodotto esempi di come un carattere possa avere un ruolo differente nella comunicazione da quello che tutti gli attribuiamo. Molti dei caratteri, o font nel gergo più comune, che utilizziamo per scrivere e che siamo abituati a vedere stampati, sono stati ideati e realizzati in epoche differenti e sempre con molta cura e attenzione per i dettagli. Ripercorrendo la storia tornando indietro anche di qualche secolo in parti del mondo molto lontane fra loro, troviamo esempi di come si sia prestata un’attenzione particolare nel disegnare caratteri che non fossero solo utili per comunicare parole, ma anche sensazioni ed emozioni. Tra quelli più riconoscibili ci sono i geroglifici, i simboli della

scrittura orientale, quelli della scrittura araba (che per il rispetto delle proprie regole religiose, non potendo rappresentare figure umane, hanno

63 [82]

assunto maggiormente un ruolo ornamentale). La cura nel dettaglio nel realizzare un alfabeto è un elemento comune a tanti popoli, i Romani stessi non lasciarono nulla al caso, ma rispettarono un’idea di equilibrio e un disegno geometrico ben preciso, tanto è che ogni lettera entra perfettamente in un quadrato o ne è l’esatta metà. A partire dallo stile romano sono stati studiati caratteri di ogni genere utilizzati ancora oggi, alcuni molto lineari, altri invece con grazie e fregi più evidenti. Pian piano sono stati aggiunti elementi nuovi nella scrittura come il corsivo, le lettere minuscole, la funzione della lettera iniziale maiuscola come ornamento della pagina molto usata nel Medioevo, mentre nel nord si è diffuso lo stile gotico, un insieme complesso di caratteri molto poco spaziati tra loro, elegante, ma di difficile lettura. Le tecniche di scrittura sono ancora molto lontane da quelle usate in tempi moderni, lo scalpello e la pietra, poi il pennello e il pennino con la carta sono state per secoli gli unici strumenti utilizzati. Nell’era del computer le cose sono cambiate, anche se poi per molti scrivere a mano resta una forma d’arte e un piacere da coltivare. Con l’invenzione della stampa verso la metà del 1400 si torna ad uno stile semplice e lineare nel design dei caratteri vista la complessità del processo tipografico, le tecniche utilizzate allora sono per

noi lontane anni luce: lettere realizzate con metalli fusi, assemblate a mano pagina per pagina, imbevute di inchiostro e pressate sulla carta, immaginate quanto lavoro c’è stato per poter realizzare il primo libro stampato. È solo verso la fine del ‘700 con la rivoluzione industriale che si iniziano a vedere lastre in metallo e ancora più tardi nasce la tecnica di stampa su nastro continuo di carta in bianca e volta, fino ad arrivare a tempi più recenti in cui prende piede l’editoria elettronica con tutti i cambiamenti del caso, quindi assemblaggio delle pagine da stampare effettuato su software creati appositamente, controllo più veloce di refusi e correzioni in tempo reale, velocità di stampa e possibilità di aumentare le tirature ecc.

INFORMAZIONI

Chi disegna caratteri oggi ha vita certamente più facile rispetto ai predecessori di epoche lontane, ma in ogni caso il metodo con cui vengono realizzati è una costante che non è mutata nel tempo, l’attenzione e la cura nel dettaglio, la ricerca dell’originalità e il rispetto delle proporzioni sono sempre le stesse. Ci sono artisti che preferiscono utilizzare vecchi metodi o ancora meglio mischiare una lavorazione manuale con tecnologie e materiali moderni e ci sono grafici o designer che sperimentano l’uso delle lettere per realizzare motivi decorativi usati poi nei poster, nelle copertine di libri, come simboli per loghi e in tanti altri modi, come potete vedere dagli esempi inseriti in queste pagine.

64 [82]

Una dimostrazione di come si possa fare di un insieme di lettere un’opera d’arte ce la fornisce l’irlandese Denis Brown (www.quillskill.com), che ha iniziato immergendosi per anni nello studio di tecniche di grafia del passato tra antichi manoscritti, trasformando la sua conoscenza in una interpretazione contemporanea dell’uso del testo. Ogni suo lavoro è frutto di esperimenti in cui lettere, colori e materiali si amalgamano in modo del tutto naturale dando luce a pezzi d’arte originali e estremamente interessanti, oltre che per molti, piacevoli da guardare. È entusiasmante vedere come alla fine qualsiasi cosa può essere trasformata in arte e come un elemento che per molti ha un significato specifico, ad esempio una lettera, per altri diventa qualcosa di diverso a seconda di come viene usato. Probabilmente il segreto è guardare sempre le cose con occhi nuovi, saper osservare i dettagli e soprattutto vedere al di là del muro a cui siamo abituati ad appoggiarci... scritto da

Kira Garfagnoli k.garfagnoli@comtaste.com

65 [82]

66 [82]

blog.comtaste.com

FROM BLOG TO BLOG

Dagli esperti di COMTASTE

Improve the ObjectHandles library with a smoother resizing movement A very common UI element found in many applications are those little square handles around an on-screen object that allow you to move & resize it. To do this you can use the great ObjectHandles library. ObjectHandles (http://osflash.org/projects/objecthandles) is a library to allow a user to move and resize UI elements in a Flex based application. It provides drag handles around controls that users can manipulate with their mouse. Any Flex component can be placed within an ObjectHandles container to quickly allow you to add functionality. It behaves as a container object where you can put any other flex components and use its resizeable functionalities. Features of the ObjectHandles library: Move & Resize Functionality for any flex component Ability to limit movement and/or resizing in both vertical and horizontal directions Ability to limit movement and/or resizing along an anchor Simple 1-file (.swc) install Mouse cursors change when over different handles Graphical handle support Aspect ratio support Initial rotatation support has been added ObjectHandles is a very cool library for your project when you want to implement moving & resizing any kind of flex object. Example usage: In the example below you’ll see two buttons in a vbox that can be moved together. This is the mxml to achieve that: <oh:ObjectHandles x=”10” y=”158” width=”107” height=”108” minHeight=”30” minWidth=”30”> <mx:VBox borderStyle=”none” top=”0” left=”0” right=”0” bottom=”0”> <mx:Button width=”100%” height=”50%” /> <mx:Button width=”100%” height=”50%” /> </mx:VBox> </oh:ObjectHandles>

67 [82]

Or if you want an Actionscript example: Here’s an example to dynamically load an image into an ObjectHandle and allow resize movements: protected function init() : void { var oh:ObjectHandles = new ObjectHandles(); oh.height = 50; oh.width = 50; var image:Image = new Image(); image.source = “snowflake.png”; image.percentHeight = 100; image.percentWidth = 100; image.maintainAspectRatio = false;

blog.comtaste.com

FROM BLOG TO BLOG

oh.addChild(image); oh.allowRotate = false; genericExamples.addChild(oh); // replace genericExamples with a canvas in your application }

Improving the experience of the ObjectHandles library When you drag or resize an object from right to left or from up to down everything works great. But if you to resize the object back (from right to left) you’ll see that the inside object will cause a strange flickering. To prevent this we can use the “Flex Move Effect” and “Flex Resize Effect” instide of change programmaticaly width and height and x and y. How it actually works: Inside the ObjectHandles.as Actionscript 3 class, you can find the protected function onMouseMove(event:MouseEvent) : void. This is the function that moves and resizes UI elements in a Flex based application. Find the following line inside the ObjectHandles.as: if( wasMoved || wasResized ) { applyConstraints(desiredPos,desiredSize); x = desiredPos.x; y = desiredPos.y width = desiredSize.x; height = desiredSize.y; }

The applyConstraints() method simply applies restrictions to your objects like xAnchor, minium size, etc. The other four lines simply set the x,y coordinates and the width and height properties of the Flex object. Now let’s change this four lines to prevent the strange flicker bug that affects the object :

68 [82]

FROM BLOG TO BLOG

if( wasMoved || wasResized ) { applyConstraints(desiredPos,desiredSize); if(moveEffect.isPlaying){ moveEffect.end(); } moveEffect = new Move(); moveEffect.target = this; moveEffect.duration = 1; moveEffect.xTo = desiredPos.x; moveEffect.yTo = desiredPos.y; moveEffect.play(); if(resizeEffect.isPlaying){ resizeEffect.end(); } resizeEffect = new Resize(); resizeEffect.target = this; resizeEffect.duration = 1; resizeEffect.heightTo = desiredSize.y; resizeEffect.widthTo = desiredSize.x; resizeEffect.play(); }

It replaces the brutal property changing of the widget with a smoothness move and resize effect provided by Flex. In the next post we will see how to create a snap to grid and a snap to line effect.

Posted by Liviu Stoica - Comtaste on May 12, 2008 7:45 PM

scritto da

Apassionato e affascinato dalla tecnologia con competenze in Flex, Livecycle Data Services, Java e PHP per la realizzazione di applicazioni enterprise. Ha lavorato su diversi progetti, molti dei quali legati al settore finanziario e medico-chirurgico. Fa parte del team di Comtaste allâ&#x20AC;&#x2122;interno del quale sviluppa Rich Internet Application.

Liviu Stoica l.stoica@comtaste.com

69 [82]

FINE

CORSI 2008 Flex 3 e Flex Builder 3: Sviluppare Rich Internet Application con le nuove Flex 3 SDK Milano: 26-29 Maggio 2008 Londra: 26-29 Maggio 2008 New York: 2-5 Giugno 2008

Programmare ActionScript 3 per Flex 3 Enterprise Flex Applications: usare Flex 3 con LiveCycle Data Services e J2EE (Java EE) Sviluppare applicazioni dekstop con Adobe AIR: Usare Flex Builder 3, Flash CS3 e Ajax Milano 14 â&#x20AC;&#x201C;17 April 2008 New York 9-12 Giugno 2008 Londra 23-26 Giugno 2008

Flash Media Server 2 Sviluppare Rich Media Applications Flex 2 e Flex Builder 2 Sviluppare Rich Internet Applications

PER INFORMAZIONI: TRAINING@COMTASTE.COM WWW.COMTASTE.COM

70 [82]

blog.augitaly.com

FROM BLOG TO BLOG

blogosphere

Premiere Pro 3.2 supporta file XDCAM

Secondo questo studio di ReadWrite il 91%

Fonte: http://blog.augitaly.com/2008/04/premiere_

circa del traffico video sul web è rappresentato

pro_32_supporta_file.html

dal Flash Video. Ecco infatti la classifica dei

Una notizia fresca fresca riguarda proprio il supporto di Premiere Pro 3.2 ai file Sony’s XDCAM (DVCAM), XDCAM HD, and XDCAM EX. Adesso sarà possibile fare un drag and drop direttamente dalla card nel Project Panel di Premiere Pro 3.2 per cominciare ad editare i file. Ecco altre info dal blog di DAV : With Premiere Pro CS3 and the 3.2.0 update, you can now natively Ingest, and Edit Sony’s XDCAM (DVCAM), XDCAM HD, and XDCAM EX format. Just as you would expect from Adobe and the Premiere Pro team, just drag and drop directly from the card into the Project Panel and start editing. No need to transcode your video with “wacky” single platform codec’s and no need to worry about .mov and .avi files – just edit ! There are also more updates to the MPEG-2 (HDV) editing modes. For more info jump to the “What’s New in the 3.2.0 release?” section and read about new Fixes, Known Issues, and more. Marco Casario - blog.augitaly.com

Più del 95% del traffico video usa il

maggiori siti che vengono visitati dagli utenti e che offrono contenuti video : 1. YouTube - 73.18% 2. MySpaceTV - 9.21% 3. Google Video - 4.06% 4. Yahoo! Video - 2.16% 5. Break.com - 1.82% A questi vanno aggiunti i cosidetti siti indipendenti che fanno aumentare le percentuali e la lista fino al 95% : 1. Break.com - 1.82% 2. MetaCafe - 0.98% 3. Daily Motion - 0.96% 4. Veoh - 0.93% 5. Blinx - 0.58% Come era prevedibile il formato FLV è lo standard di fatto per i video sul web ! Grazie a Mike Downey per l’informazione. Marco Casario - blog.augitaly.com

Nuova guida di ActionScript 3 pubblicata sull’Adobe User Group Flex Gala Fonte: http://blog.augitaly.com/2008/04/nuova_ guida_di_actionscript_30.html

formato FLV (Flash Video)

E’ disponibile da oggi una nuova guida ad

Fonte: http://blog.augitaly.com/2008/04/piu_del_95_

Actionscript 3 su FlexGala.

del_traffico_video.html

71 [82]

Quello che segue è l’indice degli articoli e dei

FROM BLOG TO BLOG

Actionscript 3. Cos’è cambiato Programmazione orientata a oggetti in Actionscript 3 Sintassi in Actionscript 3: oggetti e classi Sintassi in Actionscript 3: variabili e funzioni Sintassi in Actionscript 3: condizioni e operatori logici Gestire gli eventi in Actionscript 3 Lavorare con il testo in Actionscript 3 Lavorare con gli Array in Actionscript 3 Disegnare in Flash: le API di disegno

Numeric Stepper Programmare componenti in Actionscript 3: slider, scrollPane. La guida ActionScript 3 è attualmente in fase di completamento, quindi i link ai vari articoli saranno in costante aggiornamento. Tornate quindi spesso a trovarci su FlexGala!!!

blog.augitaly.com

tutorial su Actionscript 3 che troverete pubblicati:

Buono studio! Fabio Bernardi - blog.augitaly.com

Lavorare con dati esterni I° parte: caricare

Hydra cambia nome: Pixel Bender

variabili

Fonte: http://blog.augitaly.com/2008/05/hydra_

Lavorare con dati esterni II° parte: caricare

cambia_nome_pixel_bender.html

dati XML

Hydra, il linguaggio di scripting che verrà

Creare animazioni in Actionscript 3: la

inserito nel Flash Player 10 e che permetterà

classe Tween

di creare effetti bitmap, è stato ribattezzato

Gestire materiale audio in Actionscript 3

Pixel Bender. Leggendo il blog di Kevin

Gestiore materiale video in Actionscript 3 Utilizzare la classe Timer

Goldsmith possiamo capire le motivazioni di

Le rivoluzione delle MovieClip in Flash

questa scelta :

CS3: la Display Object

The problem is that it’s a great name for any

Programmare componenti in Actionscript 3:

kind of technology that does multiple things,

progress bar

so it is pretty popular. We didn’t want to

Programmare componenti in Actionscript 3:

confuse folks, so we worked with the Adobe

datagrid e tilelist

branding team to come up with a new name

Programmare componenti in Actionscript 3:

that we could use moving forward. That

colorPicker

name is Pixel Bender (tm).

Programmare componenti in Actionscript 3: button, textArea, checkBox, comboBox,

Marco Casario - blog.augitaly.com

72 [82]

FROM BLOG TO BLOG

Riportiamo qui di seguito due post di Daniele Galiffa pubblicati su http://www.mentegrafica.it/blog che trattano il tema dell’Infovis, il processo di trasformazione delle informazioni in forma visuale pensato per migliorare l’esperienza di apprendimento, di collaborazione e di costruzione della conoscenza degli utenti.

Collaborative Infovis in co-located Environments It’s seems that the read/write web evolution affected in a very interesting scenario also the infovis world (to me, Many Eyes http://services.alphaworks.ibm.com/manyeyes/home is the best expression of this trend). In the meanwhile, in the area of Interaction Design, the trends seems to be focused on simple and friendly approaches, like for example the “touchy” iPhone or (better) some multi-touch solutions (like Jeff Hann’s work, http:// youtube.com/watch?v=UcKqyn-gUbY). In this scenario, the project by Petra Insenberg http://pages.cpsc.ucalgary.ca/~pneumann/wiki/pmwiki.php (thanks to Marco for the link, http://treepieblog.blogspot.com/) illustrate an interesting solution to use effective information visualization tools in a co-located environment. The project is based on a smartboard touch screen where users (from 2 to 4) could work on an a shared information space, using the same data-set but through several infovis tools (like treepies or graph-maps for example). The project is interesting for these reasons: • the interaction mode • the shared and the collaborative approach • the effective use of infovis tools to understand and solve issues In next days, we’ll have a brief interview with Petra, in order to get a deeper understanding of the project and to have a look to the future of shared, collaborative infovis spaces. In the meanwhile, have a look to the project details, mainly the paper and the videos about user observation and the system running.

An Interview with…Petra Isenberg Last time we were talking about Collaborative Infovis Spaces with Petra and so, we decided to have a better understanding of her work, so let’s start reading her answers to our questions. 1 - When, how and why have you decided to research on infovis ? I implemented my first InfoVis application in my second year as an undergrad when I became a research assistant for a bioinformatics research group at the University of Magdeburg, Germany. I visualized information about how people accessed one of the group’s databases to reveal patterns in this data. In Magdeburg I was enrolled in Computational Visualistics, which is a degree program in which students learn ways to solve picture-related problems using digital methods and electronic tools. This covers many research areas like computer graphics, computer vision, human-computer interaction (HCI), or

73 [82]

FROM BLOG TO BLOG

information visualization (InfoVis). When I enrolled, I did not know that information visualization would be the area I would find most fascinating. This first InfoVis project as a research assistant, however, showed me how interesting it is to find ways to visualize and show patterns in data. Then, as part of my degree program, I spent a 5-month internship with my current InfoVis research group at the University of Calgary, Canada. I conducted my first real â&#x20AC;&#x153;researchâ&#x20AC;? project there, on detail-and-context visualizations. 2 - Where the project come from ? What have been your inspirations ? In my lab we do a lot of research on large, multi-touch tabletop and wall displays. Often, this research is fundamentally about how people use these displays and about how they interact with each other or with artifacts on the displays while solving tasks. Much of my PhD research inspiration comes from looking at this previous research and thinking about if and how it can be applied and extended to people working on information visualization tasks 3 - How long it takes to reach the prototype phase from the beginning of the project ? Lets take my current research project, even though it is not yet finished. I began coding my first prototype about one year ago. In parallel, I did an extensive literature review on what people have published about collaborative work on shared displays and related it to the specific problem I am working on, collaboration with information visualizations on large shared displays. I also ran a study in which I observed groups working on information visualizations tasks in the physical world (to be published at CHI 2008). I am currently building a second iteration of the first prototype that will incorporate new types of visualizations and interaction techniques. I expect to finish and evaluate this prototype by the end of August. 4 - Did u need to write a propetary operating system ? Which are the technologies behind your projects? I did not have to write my own operating system. All our displays in the lab are powered by PCs running WindowsXP. What makes my program different, however, is that it does make use of any operating system-specific widgets or graphical user interface elements. For example, I donâ&#x20AC;&#x2122;t use Windows buttons, sliders, etc. They are all individually designed to work for large, multi-touch displays. 5 - From almost 2 years, some interesting new projects (like Many Eyes) are focusing on collaborative infovis. What do you expect to be the evolution of collaborative infovis in next monthes ? I think there will be two main research streams: collaborative information visualization across distance and in shared workspaces. Projects like Many Eyes focus on supporting collaborative information visualization across distance. For this type work, applications will be built or extended to help viewers to distribute, share, and discuss datasets from any computer connected to the Internet. In my research I am focusing on the second direction. I want to support collaborative data analysis for people working together in the same room on a shared large display. For example, think about doctors examining medical data together, researchers analyzing experiment results in their lab, or business analysts discussing the latest sales trends using a shared large display in a meeting room in which the data can be interactively changed, re-drawn, and updated. Traditionally, information visualization tools have been designed to support one user. Research on collaborative information visualization for shared workspaces will

74 [82]

FROM BLOG TO BLOG

have to think about ways in which visualizations and interaction techniques may need to be changed or extended to support multiple people in their data analysis. Since the research on both types of collaborative information visualization is still relatively new, I expect to see quite a number of new systems and ideas emerge in the near future. 6 - How do your project interact with the net ? I mean…how people could share an information space, even they are not in the same physical space ? In my project I am currently using a large, multi-touch tabletop display built by Smart Technologies, a Calgary company. I developed a collaborative environment in which hierarchical data can be explored and compared by several people working together around this tabletop displays. They can use several features that have been designed to facilitate collaborative work practices: people can interact, create, and use copies of the same visualization to explore information together or in parallel. Visualizations can be personalized, for example, by choosing different colour scales, display sizes, or types of representation. Lastly, visualizations also can be freely moved around the workspace to accommodate people standing in different locations around the tabletop display, and to form categorizations and organizations of the data. My system currently cannot be used across the internet. It has been designed for people to work together in the same room using a shared display to encourage shared face-to-face interaction, discussion, arguments, and negotiation about the information.

Daniele Galiffa, classe 1980, è consulente per il progetto e lo sviluppo di soluzioni di UserExperience ed InformationVisualization, curandonela divulgazione sul blog mentegrafica.it. Presidente di VISup srl (www.visup.it), in passato si è occupato di fare ricerca, progetto e sviluppo nei campi dell’elearning, dell’Infovis, del Knowledge Management, delle RIA e dell’OnLineCollaboration.

Daniele Galiffa daniele@mentegrafica.it

75 [82]

scritto da

76 [82]

FROM BLOG TO BLOG

From GURU to Blog

Adobe AIR 7 Day Sprint - Day 1 It was an idea proposed by Ryan some months ago so I’ve decided to dedicate my spare time (do I have spare time?) to make 7 posts in which I take 7 days to learn Adobe AIR 1 (the next one will be on Adobe Flex 3). My plan is to talk about the resources, the problems and the solutions I’ll find simulating the issues a new AIR developer will face with. I’ll take advantage of some notes I’ve collected during my last Adobe AIR Crash course I held for an italian company. Adobe AIR 7 Day Sprint - Day 1 Before starting with the development, we have to set the machine up. One of the cool aspect of Adobe AIR is that it lets developers use proven web technologies to build desktop applications and run across operating systems. So it does not matter if you’re a Flex, Flash, or AJAX developers. You don’t have to learn a new language or a new IDE to develop AIR applications. Use your existing code in Adobe Dreamweaver CS3, Flex Builder, Aptana, Eclipse, Flash CS3 and your favourite frameworks (dojo, spry, prototype, scriptacolous, cairngorm, PureMVC, Degrafa, etc) to deliver applications to the desktop that complement and expand your browser applications. The first step is to download the free Adobe AIR runtime. The runtime is available for Windows and Mac OS system (read the requirements) and it will soon be available for Linux system too. The runtime is only available in english language. Just in case you’re wondering, the Adobe AIR Runtime is available for distribution and use beyond single-user installations. This means that if you’ll use the web distribution or you’ll use the runtime as individual users you won’t need to sign an Adobe AIR Runtime Distribution License Agreement. Instead, if you are an OEM or PC manufacturer and would like to bundle the Adobe AIR Runtime with your computers, contact Adobe and read the FAQ about Adobe AIR Runtime distribution. The next step is to download the software, SDKs, extensions, and frameworks you need to build, package, and deploy Adobe AIR applications according to your development environment: Adobe AIR SDK: http://www.adobe.com/products/air/tools/sdk/ the Adobe AIR SDK provides the tools you need to package and deploy Adobe AIR applications, if you prefer working with a text editor or another development environment. Flex 3 SDK: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email the Free Adobe Flex® 3 SDK has all you need to build and deploy browser- or desktop-based applications that can run on Adobe Flash Player or Adobe AIR (includes the tools from the Adobe AIR SDK). Flex Builder 3: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email develop RIAs with Adobe Flex Builder™ 3 software, an Eclipse™ based IDE (includes the Flex 3 SDK and the tools from the Adobe AIR SDK).

77 [82]

FROM BLOG TO BLOG

Adobe AIR extension for Dreamweaver CS3: http://www.adobe.com/products/air/tools/ajax/ Package and preview Adobe AIR application files from within Adobe Dreamweaver® CS3 software. Adobe AIR update for Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html Package and preview AIR application files from within Adobe Flash CS3 Professional software. AIR plug-in for Aptana: http://www.aptana.com/docs/index.php/Getting_started_with_AIR_development Aptana is available both as a standalone application and as an Eclipse plug-in. You can add AIR support to your Aptana or Eclipse IDE by installing the AIR plug-in. Ok, you now have the runtime to run and test Adobe AIR applications, the SDKs, extensions, and frameworks to build them. It’s time for some inspiration. There’s no better thing to do, when you don’tknow so much about a new technology, to see what other developers developed with it. Adobe has set up a place where donwload trusted AIR applications: the Adobe AIR Marketplace. Two examples I really invite you to donwload and study are the following: Google Analytics Reporting Suite The Google Analytics Reporting Suite brings Google Analytics to the desktop, with a host of features that help you understand how your website is performing and where you can improve. From tracking your visitors, referrals and campaigns to viewing your AdWords ROI metrics, the Google Analytics Reporting suite is a must-have for every web business. Adobe Developer Connection Developer Desktop The Adobe Developer Connection Developer Desktop (ADC Desktop) is an Adobe AIR application that delivers a number of helpful resources for Developers. You can easily track and receive desktop notifications to changes in bugs you are tracking from the public Adobe bugbase. Additionally, You can explore and track aggregated Flex components on your desktop. Lastly, you can use an integrated RSS reader to view news and feeds, and get updates as they happen. We’re about to close our first day. You’ve learned a lot of things about Adobe AIR. Waht follow is a list of useful resources about Adobe AIR development: Adobe AIR resources: http://www.adobe.com/support/documentation/en/air/ the Adobe official documentation about AIR. All for free. You can read it via the online Livedocs or download the PDF version Adobe AIR Developer Center: http://www.adobe.com/devnet/air/

78 [82]

FROM BLOG TO BLOG

the Adobe Developer Center dedicated to AIR. Popular AIR bloggers: Christian Cantrell Lee Brimelow Mike Chambers Mike Downey Daniel Dura Kevin Hoyt Mike Potter Ryan Stewart Our first Adobe AIR Sprint Day is over. You have all the tools you need to run, test mad develop AIR desktop applications. To prepare to the next lesson have a look at the AIR APIs and at the Getting Started section on the Adobe AIR Developer Center. Posted by marco casario on March 13, 2008 at 04:00 PM

Using the J2EE View Helper pattern in your AIR applications Having to do with many presentations, conferences and prototypes for clients, I’m creating many small applications using AIR and Flex 3. Most of them are prototypes with the purposes of showing AIR features and the quantity of code is small (600 lines at most). In this context it does not make much sense to use a framework or architecture such as Cairngorm or PureMVC or Defraga. So that I’m using a lot what in JSP is called the View Helper pattern. The view components of your AIR and Flex applications, that will only contain the controls that define the user interface of the application, will use a simple View Helper, consisting in an ActionScript class, to encapsulate business logic in a helper instead of a view, making our application more modular by facilitating component re-use. A view contains formatting code, delegating its processing responsibilities to its helper classes, implemented as an Actionscript class. Helpers also store the view’s intermediate data model and serve as business data adapters. View helpers has the following advantages: improve the separation between the presentation and the business data actinga as intermediaries between the two most of the code contained in a view components is merely mxml code the code within the view components are more readable and a designer can browse and edit it to

79 [82]

FROM BLOG TO BLOG

change the visual aspects of the application in an easy way it can cache lookup tables for the application To invoke a view helper you can simply <h:UploadHelper id=”uploadHelper” xmlns:h=”com.comtaste.proto.controls.*” />

and the view helper UploadHelper class is an ActionScript class where you’ll encapsulate the business logic of view component: package com.casario.proto.controls { import flash.events.Event; import flash.events.IOErrorEvent; import mx.controls.Alert; public class MainHelper { protected var URLString:URLRequest = new URLRequest(“http://www.domain.com/file.jsp”); [Bindable] private var statusStr:String = new String(“”);

public function MainHelper() { super(); }

} }

For those who will attend my FITC session (Flex Solutions For Your Daily Development) of the next week I’ll show some examples of the View Helper pattern in Flex development. If you want to have more details and investigate on this pattern you can visit the View Helper Design Pattern of J2EE. Posted by marco casario on February 22, 2008 at 06:10 PM Dal 2001 collabora con Macromedia Italia (Adobe oggi) realizzando presentazioni, articoli e partecipando a numerose conferenze che potete trovare elencate nel suo blog personale casario.blogs.com, visitato da migliaia di utenti ogni giorno. Nel 2005 fonda Comtaste (www.comtaste.com), società Solution Partner di Adobe che esplora le nuove frontiere delle Rich Internet Applications. Marco è il punto di riferimento per la comunità italiana di utenti Adobe (www.augitaly.com) all’interno del quale ricopre il ruolo di Channel Manager per la sezione dedicata a Flex ed AIR (www.augitaly.com/flexgala). E’ autore per FriendsOfED del libro “Flex Solutions: Essential Tecniques for Flex Developers” e “AdvancED AIR Applications”.

scritto da

Marco Casario m.casario@comtaste.com

80 [82]

BIT WATCHING Learning Actionscript 3.0 Autore: Rich Shupe con Zavan Rosser Editore: O’Really Pagine: 365 Giudizio: Buono Siete novizi di Actionscript 3.0? Non avete molta dimestichezza con la programmazione a oggetti? Questo è il testo che fa per voi. certo non è assimilabile al testo di C. Mook, ma allo stesso livello può essere buono proprio per chi programmatore non è. Il testo è corredato da una vasta gamma di esempi, codice a colori per far risaltare meglio le parti centrali dei discorsi affrontati progressivamente nel testo. Gli esempi sono molto brevi. Ma semplici e diretti. Permettono di capire e focalizzare subito il nodo centrale del discorso. Come dicevamo all’inizio, il testo non entra nel merito della programmazione vera e propria, ma instrada il lettore verso la concezione di “OOP” con Actionscript 3. Un testo che ci sentiamo quindi di consigliare a chi vuole finalmente iniziare a studiare Actionscript 3. Questa la scaletta del testo: Section I - Getting Started AS overview Core language fundamentals Section II - Graphics and Interactions Properties, Methods, and Events The Display List Timeline Control OOP (Object Oriented Programming) Motion Drawing with Vectors Drawing with Pixels Section III - Text Text Section IV - Sound & Video Sound Video Section V - Input/Output Loading Assets XML and E4X

81 [82]

82 [82]