Usermatter n8

1 [76]

FEBBRAIO - MARZO 2008

DEVELOPING

8. Adobe Air: aria di cambiamento di Matteo Ronchi

16. Creare un gadget in Adobe AIR 1.0 con Flash 3 di Fabio Bernardi

20. Visualizzare video FLV con FlashLite 3.0 di Fabio Biondi

26. Flex e web services: scenari e soluzioni di Nicola Laino

40. Creare un textbox con autocompletamento in Javascript di Michele Bertoli

DESIGN

44. Second Life experience - parte 1 di Alessandro Bordicchia

52. Elementi teorici per la progettazione dei social network - parte 1 di Davide Casali e Gianandrea Giacoma

54. Eye tracking: campi applicativi di Silvia Gilotta

AUTHORING&MULTIMEDIA

58. I fondamentali di Photoshop: I Livelli di Gianni Russo

62. Adobe Director 11: il grande ritorno! di Daniele Cerra

CREATIVE STUFF

66. Parola chiave: interattivitĂ di Kira Garfagnoli

FROM BLOG TO BLOG

68. Dagli esperti di Comtaste 72. Blogosphere BIT WATCHING

74. Actionscript 3.0 - Design Patterns 2 [76]

gli autori di questo mese

Fabio Bernardi

Matteo Ronchi

bernardifabio@fastwebnet.it

m.ronchi@cef62.com

Finito nel Web nel 2002, si occupa

Dopo un passato da montatore video e

di linguaggi server-side (ASP e

modellatore 3D, ha iniziato a conoscere

ColdFusion), editing audio e video fino

il mondo dei contenuti multimediali

ad approdare a Flash e ActionScript.

e ad appassionarsene grazie a

Oggi insegna in diverse scuole di Roma,

Macromedia Director. Da qui il passo

tiene corsi professionali per HTML.IT

verso la programmazione e la creazione

e per la Regione Lazio. Attualmente

di contenuti interattivi e applicazioni

è “Channel Manager” di FlexGALA,

Actionscript, Flex e Adobe Air è stato

usergroup ufficiale di Adobe Flex.

breve. Oggi sperimenta soluzioni creative

Inoltre è certificato ACP (Adobe Certified

che si avvalgono delle possibilità offerte

Professional) in Flash 8.

da librerie quali papervision3D e Sandy.

Fabio Biondi

Nicola Laino

f.biondi@vistiesentiti.it

info@laino.it.

Adobe Flash/Flex Developer dal 2002,

Si occupa prevalentemente

realizza siti web dinamici e rich internet

dello sviluppo di soluzioni web

application. Ottenuta nel 2004 la

based per una nota società di

certificazione Flash Developer, dal

telecomunicazioni. Da qualche

2007 è Adobe Flash Certified Instructor.

anno si dedica alle RIA e, in

Inoltre sviluppa e coordina progetti che

particolare, al framework Flex,

fanno uso delle più recenti tecnologie

che sta adoperando con un certo

Adobe complementari a Flash, come

profitto in diversi casi.

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

Alessandro Bordicchia

Michele Bertoli

a.bordicchia@thecode.it

michele@havana7.com

Una formazione divisa tra gli studi di

Studente all’università Cattolica del

architettura, design e di ergonomia

Sacro Cuore con 5 anni di esperienza

cognitiva, dal 1999 ad oggi opera in diversi

alle spalle nello sviluppo di software

settori nell’ambito della comunicazione

gestionali multipiattaforma. Ama

visiva. Da cinque anni a questa parte

progettare e realizzare servizi Web

si interessa delle problematiche legate

2.0, imparare nuove tecniche di

alla progettazione di interfacce utente,

programmazione e cimentarsi

collaborando attualmente con maison,the

nella sperimentazione di sistemi di

(gruppo Visiant). Da circa due anni si

comunicazione evoluti come i social

occupa di progetti legati ai mondi virtuali

network.

collaborando con 2ndK, recentemente entrata a far parte del gruppo Visiant.

3 [76]

gli autori di questo mese

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

Gianni Russo

Silvia Gilotta

g.russo@alice.it

silvia.gilotta@srlabs.it

Fotografo fin dal 1986, inizia nel 1993 a utilizzare Adobe Photoshop, oggi suo compagno di vita professionale. Attualmente si occupa di elaborazioni fotografiche digitali, impaginazioni e fotoritocco. Nel Febbraio 2007 ha ottenuto la certificazione di Adobe Certified Expert in Photoshop CS2.

Parallelamente tiene corsi privati e pubblici su Photoshop e partecipa come master a seminari rivolti ai fotografi professionisti (Sposiamo il Digitale, il Simposium Castel Gandolfo Fotografia e altri). Da un anno collabora con Adobe User Group AugItaly e Adobesoftwares.com.

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.

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,

4 [76]

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.

gli autori di questo mese

Emanuele Tatti e.tatti@comtaste.com Ingegnere informatico con competenze in Flex, Livecycle Data Services, BlazeDS e Java per la realizzazione di applicazioni aziendali. Ha lavorato su diversi progetti, molti dei quali legati al settore finanziario. Fa parte del team di Comtaste ed è responsabile del progetto YouThruBiz (www.youthru.biz), una rich internet application dedicata alla selezione del personale nelle aziende che utilizzata strumenti innovativi come interviste e curriculum multimediali.

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.

5 [76]

6 [76]

dalla redazione

HCI, SecondLife, Social Network, User center Design, usabilità, eye-tracking... la nuvola di Tag di UserMatter(s) si arricchisce di nuove parole chiave per offrire ai lettori un panorama quanto più possibile completo e aggiornato sull’universo User Experience. Da questo numero, infatti, all’ormai tradizionale indagine sulle più evolute tecniche di programmazione e progettazione di esperienze interattive si affiancano altre sezioni tematiche pensate per esplorare le frontiere contemporanee della comunicazione multimediale.

Leggendo gli articoli della sezione Developing si possono così apprendere le tecniche pratiche di programmazione spiegate dai “guru” italiani, mentre l’area Design offre spunti di riflessione teorica e metodi di analisi della User Experience proposti da noti esperti del settore. Completano questa edizione gli articoli delle aree Authoring & Multimedia e Creative Stuff e le segnalazioni di risorse Web presenti in From Blog to Blog.

Prima di lasciarvi alla lettura di UserMatter(s), mi preme ringraziare tutti gli autori che con professionalità e disponibilità hanno contribuito alla realizzazione di questo numero.

Non resta quindi che augurarvi buona lettura!

Daniele Cerra Coordinatore editoriale

7 [76]

DEVELOPING

Adobe AIR

Adobe Air: aria di cambiamento di Matteo Ronchi - m.ronchi@cef62.com

Adobe Air è finalmente arrivato. Dopo un solo anno di beta testing il più giovane prodotto di Adobe arriva ufficialmente tra noi. Sembra ieri quando un anno fa è stata annunciata la prima versione alpha in test pubblico con nome in codice Apollo. Da allora è stata un’evoluzione continua: abbiamo avuto due release Alpha, tre Beta e integrazione con i principali strumenti di sviluppo forniti dalla Casa delle Idee ( Flash, Flex e Dreamweaver ).

Adobe Air in ogni caso non è solo una tecnologia legata a prodotti commerciali in quanto il compilatore è rilasciato sotto licenza open source, questo offre a chiunque la possibilità di sviluppare applicazioni in completa libertà. Altro elemento da non sottovalutare è la possibilità di scegliere tra diversi linguaggi di programmazione per lo sviluppo: Adobe Air infatti si rivolge non solo a sviluppatori Flex/Flash ma anche a professionisti che lavorano in ambito web utilizzando tecnologie più “tradizionali” quali HTML, Javascript e CSS. Dopo questa dovuta introduzione ad una tecnologia che rivoluzionerà le vostre vite di sviluppatori affrontiamo la realizzazione della nostra prima applicazione Air; andremo a creare un semplice task manager utilizzando Flex e Actionscript.La nostra applicazione utilizzerà mxml e actionscript 3 per gestire una lista di attività da fare salvata in locale in un file XML; tramite l’interfaccia grafica sarà possibile visualizzare, modificare, aggiungere e rimuovere elementi alla nostra lista di attività. Essendo i dati salvati in formato XML sul disco sarà possibile utilizzare i dati in altre applicazioni senza complicazioni.

Apriamo Flex 3 e creiamo un nuovo progetto desktop.

8 [76]

SEGUE u

DEVELOPING

Manteniamo le impostazioni di default offerte da Flex specificando che stiamo creando un’applicazione desktop.

Verrà creato il file main.mxml che definirà l’aspetto della nostra applicazione.

Per quanto concerne l’implementazione delle funzionalità utilizzeremo una classe actionscript che poi assoceremo al documento mxml; questa tecnica viene chiamata “code behind” e consiste nell’utilizzare il codice mxml solo per definire l’aspetto dell’applicazione e una classe esterna associata per controllare l’interazione. Questa tecnica è molto efficace perchè permette una netta separazione tra aspetto e funzionalità, offrendo molta flessibilità nell’apportare modifiche al programma.

Creiamo quindi la nostra classe esterna all’interno del namespace della nostra applicazione: cef62.demo.TaskList.as La nostra classe, essendo associata all’applicazione Air dovrà derivare dalla classe WindowedApllication.

SEGUE u

Adobe Air: aria di cambiamento

9 [76]

DEVELOPING Una volta creata dovrebbe presentarsi così:

ora siamo pronti per associare la nostra classe adibita a gestire la business logic al suo layout di presentazione, per fare questo dobbiamo aggiungere il namespace della nostra classe nella dichiarazione del nodo principale del documento mxml. Dopo aver aggiunto il namespace possiamo finalmente definire l’associazione: <?xml version=”1.0” encoding=”utf-8”?> <demo:TaskList

xmlns:mx=”http://www.adobe.com/2006/mxml”

xmlns:demo=”cef62.demo.*”

layout=”absolute” applicationComplete=”init(event)” width=”600” height=”400”

title=”Demo Task List” backgroundColor=”0xEEEEEE”>

</demo:TaskList>

Nella dichiarazione del nodo abbiamo usato il namespace ‘demo’ da noi definito per richiamare la classe ‘TaskList’. Tramite l’attributo ‘applicationComplete’ del nodo radice abbiamo definito una funzione, che risiederà nella classe esterna, da richiamare una volta che il layout mxml è pronto all’uso. Andiamo a definire la funzione di init() e le altre ad essa associate: // variabile che verrà associata al file XML usato come sorgente dati protected var xmlDataFile:File; // istanza della classe stream, adibita alla lettura // e scrittura dei dati da e verso il file XML protected var stream:FileStream = new FileStream(); // XML ottenuto dal file esterno public var dpXml:XML; // dataprovider per la nostra datagrid, definito Bindable // così da poter essere collegato dinamicamente al componente visuale [Bindable] public var dp:XMLListCollection = new XMLListCollection(); // funzione di inizializzazione, chiamata dall’evento ApplicationComplete // generato una volta che il nostro layout mxml è pronto all’uso public function init( e:FlexEvent ):void {

// carichiamo la sorgente di dati XML esterna

updateDataSource();

10 [76]

Adobe Air: aria di cambiamento

SEGUE u

DEVELOPING

} // funzione che carica il file XML e lo definisce // come dataprovider della datagrid private function updateDataSource():void {

// carichiamo il file Xml

xmlDataFile = File.desktopDirectory.resolvePath( “archivio.xml” );

dpXml = readFromXML();

// aggiorniamo il data provider

// utilizzando i dati importati dal file XML esterno

dp.source = dpXml[0].task;

dp.refresh(); } // funzione che legge il contenuto di un file XML esterno // se il file non esiste inizializza l’applicazione come se // il file esterno esistesse e fosse vuoto private function readFromXML():XML {

var tXML:XML;

// verifichiamo se il file esiste

if( xmlDataFile.exists )

{

// oggetto bytearray per contenere contenuto binario del file letto

var byteData:ByteArray = new ByteArray();

// apriamo stream al file

stream.open( xmlDataFile, FileMode.READ );

// leggiamo il contenuto binario del file

stream.readBytes( byteData, 0, xmlDataFile.size );

// chiudiamo lo stream al file

stream.close();

// se il file è vuoto creiamo xml temp

if(byteData.length > 0)

{

tXML = XML( byteData.readUTFBytes( byteData.length ) );

} else {

tXML = <base>

<task title=”---” content=”---” type=”---”/>

</base>;

}

} else {

// se il file non esiste creiamo xml temp

tXML = <base>

<task title=”---” content=”---” type=”---”/>

</base>;

}

return tXML; }

SEGUE u

Adobe Air: aria di cambiamento

11 [76]

DEVELOPING Per avere un’applicazione compilabile, anche se ancora priva di layout grafico, dobbiamo andare a definire alcuni valori all’interno dell’XML descrittore dell’applicazione Air. Il file si chiamerà main-app.xml ed è stato generato per noi da Flex durante la creazione del progetto. <?xml version=”1.0” encoding=”UTF-8”?> <application xmlns=”http://ns.adobe.com/air/application/1.0.M6”>

[...]

<initialWindow>

<systemChrome>none</systemChrome>

<maximizable>false</maximizable>

<resizable>false</resizable>

<width>600</width>

<height>400</height>

</initialWindow>

[...] </application>

Tra i nodi indicati l’unico veramente importante è ‘systemChrome’ impostato a ‘none’ perchè derivando la nostra classe da ‘windowedApplication’ dobbiamo specificare che la skin dell’applicazione non deve essere quella default per le applicazioni Air. La classe ‘windowedApplication’ infatti è stata concepita da Adobe per offrire un’aspetto standard coerente su diversi sistemi operativi senza dover per forza implmentare una soluzione skin realizzata ad-hoc.

Inseriamo ora nel modulo mxml la datagrid che visualizzerà la nostra lista di attività. <mx:DataGrid x=”39” y=”17” width=”520” height=”294” editable=”true” id=”dataGrid”

dataProvider=”{dp}”

itemEditEnd=”finishItemEditing(event)”>

<mx:columns>

<mx:DataGridColumn headerText=”Titolo” dataField=”@title”/>

<mx:DataGridColumn headerText=”Descrizione” dataField=”@content”/>

<mx:DataGridColumn headerText=”Categoria” dataField=”@type”/>

</mx:columns> </mx:DataGrid>

Creiamo una datagrid editabile a cui assegnamo come dataprovider la nostra variabile di tipo XMLListCollection: ‘dp’, includendo la variabile tra le parentesi graffe andiamo ad indicare che il dataprovider è collegato dinamicamente, così quando si aggiornerà verrà aggiornata anche la datagrid.

Alla griglia abbiamo registrato una funzione per l’evento di ‘itemEditEnd’ che viene generato quando si ha finito di modificare il contenuto di una cella. // datagrid definita nel file mxml associato, ﾏ necessario dichiararla come variabile // per renderla accessibile alle funzioni della nostra classe public var dataGrid:DataGrid; // funzione chiamata quando si conclude di modificare il contenuto // di una cella della datagrid // verifica se il contenuto ﾏ stato modificato e se necessario // aggiorna il contenuto del file XML esterno public function finishItemEditing( e:DataGridEvent ):void {

// datagrid di riferimento

var ref:DataGrid = e.target as DataGrid;

12 [76]

Adobe Air: aria di cambiamento

SEGUE u

DEVELOPING

// XML dataprovider della riga interessata

var xmlNodeRef:XML = XML( dp.getItemAt( e.rowIndex ) );

// contenuto della cella di testo editabile prima dell’azione di modifica

var oldCellString:String =

xmlNodeRef[ (ref.columns[ e.columnIndex ] as DataGridColumn ).dataField ];

// istanza del campo di testo modificato

var itemEditorInstance:TextInput = TextInput( ref.itemEditorInstance );

// contenuto testuale dopo la modifica

var newCellString:String = itemEditorInstance.text;

// se necessario aggiorniamo il file XML esterno

if( oldCellString != newCellString )

{

writeXMLToFile();

} } // funzione che aggiorna il file XML esterno con i dati attualmente esistenti private function writeXMLToFile():void {

// apriamo stream al file in modalitˆ sovrascrittura

stream.open( xmlDataFile, FileMode.WRITE );

// scriviamo il contenuto testuale nel file

stream.writeUTFBytes( createXMLStringToExport() );

// chiudiamo lo stream al file

stream.close(); }

Inseriamo tre pulsanti dopo la datagrid: <mx:Button x=”39” y=”319” label=”Aggiungi” click=”addItem(event)”/> <mx:Button x=”123” y=”319” label=”Elimina” click=”removeItem(event)”/>

<mx:Button x=”458” y=”319” label=”view source..” click=”showSource(event)”/>

si occuperanno di: aggiungere attività all’elenco, rimuovere l’attività selezionata dall’elenco e visualizzare in una nuova finestra la sorgente di dati XML. Questi tre pulsanti sono associati ad altrettante funzioni nella nostra classe Actionscript: // chiamata quando si richiede l’aggiunta di un nuovo task // crea un nuovo task, in coda agli altri public function addItem( e:MouseEvent ):void {

var lastItem:XML = XML( dp.getItemAt( dp.length -1 ) );

var newItem:XML = new XML( lastItem.toXMLString() );

newItem.@title = “---”;

newItem.@content = “---”;

newItem.@type = “---”;

dp.addItem( newItem );

dp.refresh();

// aggiorniamo il file su disco

writeXMLToFile(); }

// chiamata quando si vuole eliminare il task selezionato

SEGUE u

Adobe Air: aria di cambiamento

13 [76]

DEVELOPING // mostra un messaggio d’errore se non ﾏ selezionata nessuna // riga della datagrid public function removeItem( e:MouseEvent ):void {

var activeRow:int = dataGrid.selectedIndex;

if( activeRow >= 0 && activeRow < dp.length )

{

dp.removeItemAt( activeRow );

dp.refresh();

// aggiorniamo il file su disco

writeXMLToFile();

} else {

Alert.show( “Non è possibile eliminare nessuna riga, selezionarne una prima!”,

“Attenzione” );

} }

// mostra il sorgente XML in una finestra independente // utilizzando le funzioni di gestione finestre di Adobe Air public function showSource( e:MouseEvent ):void {

// creiamo una nuova finestra e ne definiamo l’aspetto var sourceView:Window = new Window(); sourceView.title = “Source View”;

sourceView.maximizable = false;

sourceView.minimizable = false;

sourceView.resizable = false;

sourceView.width = 650;

sourceView.height = 500;

sourceView.layout = “absolute”;

// creiamo la textarea che visualizzerˆ il documento XML

var txtArea:TextArea = new TextArea();

txtArea.x = 20;

txtArea.y = 20;

txtArea.width = 610;

txtArea.height = 460;

txtArea.editable = false;

// definiamo un’indentazione leggibile per l’output a stringa da XML

XML.prettyIndent = 2;

XML.prettyPrinting = true;

// assegnamo il testo XML all’area di testo

txtArea.text = createXMLStringToExport();

// aggiungiamo l’area di testo alla finestra

sourceView.addChild( txtArea );

// mostriamo la finestra sourceView.open(); }

// funzione che genera una stringa XML valida utilizzando i dati presenti nella datagrid private function createXMLStringToExport():String {

14 [76]

Adobe Air: aria di cambiamento

SEGUE u

DEVELOPING

// dichiarazione XML + il separatore di linea corretto per il sistema operativo ospite

var xmlDeclaration:String = ‘<?xml version=”1.0” encoding=”utf-8”?>’ + File.lineEnding;

// corpo XML

var XMLString:String = “<base>” + dp.toXMLString() + “</base>”;

var tXML:XML = new XML( XMLString );

// stringa XML completa

var xmlExportString:String = xmlDeclaration + tXML.toXMLString();

return xmlExportString; }

Ora l’applicazione è pronta per essere compilata ed utilizzata.

Ovviamente prima di poter essere usabile sarà necessario aggiungere alcune funzionalità, ma può essere comunque un buon inizio.

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

15 [76]

DEVELOPING

Adobe AIR

CREARE UN GADGET IN ADOBE AIR 1.0 CON FLASH CS3 di Fabio Bernardi - bernardifabio@fastwebnet.it In epoca di Web 2.0 (per alcuni già 3.0), un nuovo “tipo” di applicativo ha preso sempre più piede: il gadget.

Di qualunque tipo, per qualsiasi funzione, purché sia uno strumento fondamentalmente utile.

Pensiamo ai widget di Mac, oppure ai “gadget” di Windows Vista.

Dato che proprio in questi giorni Adobe ha rilasciato AIR 1.0, allora costruiamoci anche noi il nostro widget.

Per l’occorrenza creeremo un gadget Meteo, prendendo come fonte il servizio Meteo di Yahoo!

Ovviamente potrete cambiare in qualunque momento la fonte, visto che il servizio erogato riguarda pur sempre feed rss, quindi un formato fondamentalmente universale.

Come mezzi di lavoro useremo: • Flash CS3 (scaricabile in versione di prova a 30 giorni sul sito ufficiale Adobe).

• l’estensione Adobe AIR 1.0 per Flash CS3, anch’essa scaricabile gratuitamente dalla sezione AIR).

Se non l’abbiamo ancora fatto, installiamo l’estensione. Al termine apriamo Flash CS3.

Nel pannello introduttivo abbiamo ora a disposizione una voce in più(.

16 [76]

SEGUE u

DEVELOPING

La possibilità di creare appunto in Adobe AIR. Clicchiamoci sopra e apriamo il nuovo file.

Nel nuovo file aperto, inseriamo due campi di testo dinamici come nella figura.

Il primo in alto, servirà ad inserire il titolo del servizio, il secondo, più grande, per inserire l’effettivo testo delle condizioni meteo! Rinominiamoli rispettivamente: titolo_txt e testo_txt.

Adesso, disegniamo un piccolo quadrato con una sfumatura dal blu al bianco (#096F99 - #A8E1F9) e convertiamolo in MovieClip. Quindi entriamo in questo nuovo simbolo (cliccando due volte su di esso), e aggiungiamo altri due fotogrammi. In questi due nuovi fotogrammi cambieremo la sfumatura rispettivamente con i seguenti codici esadecimali: (#521B03 - #AD8527) per il secondo fotogramma, (#180E47 - #000000) per il terzo fotogramma.

Al primo fotogramma aggiungiamo l’azione “stop();” Quello che abbiamo appena fatto è lo sfondo della nostra applicazione. Chiederemo a Flash di controllare l’orario. Se è mattina utilizzerà il primo fotogramma, se è pomeriggio utilizzerà il secondo fotogramma, se è sera utilizzerà l’ultimo. Torniamo sulla scena principale.

SEGUE u SEGUE u

CREARE UN GADGET IN ADOBE AIR 1.0 CON FLASH CS3

17 [76]

DEVELOPING Selezioniamo il primo fotogramma e scriviamo quanto segue: var datiXML:XML=new XML(); var path:URLRequest=new URLRequest(“http://xml.weather.yahoo.com/forecastrss?p=ITXX0067&u=c”); var urlLoad:URLLoader=new URLLoader(path);

Con questa prima parte di codice, impostiamo l’indirizzo XML della nostra fonte. Leggendo velocemente l’indirizzo xml (per chi volesse modificarlo per divertimento) l’ultimo parametro corrisponde ai gradi (C per Celsius, o F per Fahrenheit). mentre il numero 67 del parametro p è Roma. function caricaXML(event:Event):void {

datiXML=XML(urlLoad.data);

testo_txt.htmlText=datiXML.channel.item.description;

citta_txt.htmlText=datiXML.channel.title; } urlLoad.addEventListener(Event.COMPLETE, caricaXML);

Con questa funzione invece abbiamo gestito i valori del file RSS, scrivendo nei due campi di testo dinamici i valori estratti dall’istanza “datiXML”. Ora, i valori, anche se in maniera molto semplce sono stati inseriti. Non resta che gestire lo sfondo: changeBg(); function changeBg():void {

var orario:Date=new Date();

var ora:Number=orario.getHours();

if(ora>7 && ora<15){

bg_mc.gotoAndStop(1);

}else if(ora>15 && ora<19){

bg_mc.gotoAndStop(2);

}else{

bg_mc.gotoAndStop(3);

}

with(bg_mc){

x=0;

y=0;

width=stage.stageWidth;

height=stage.stageHeight;

} }

Ecco fatto. Un’istanza della classe “Date” ci permetterà di controllare l’ora (in locale sulla macchina!!) quindi considerare che ore sono (tra le 7 e le 15 è un generico “mattino”, tra le 15 e le 19 è pomeriggio, dalle 19 in poi è sera). Con l’ultimo ciclo “with” impostiamo la posizione e la grandezza dello sfondo.

Ora non resta che salvare il lavoro, impostare le opzioni di pubblicazione e creare il file AIR. Direttamente dal menu “Comandi”, scegliamo la voce: “AIR-Impostazioni applicazione e programma di installazione”. Nel successivo pannello che si aprirà, impostiamo i valori nel seguente modo, come da foto.

18 [76]

CREARE UN GADGET IN ADOBE AIR 1.0 CON FLASH CS3

SEGUE u

DEVELOPING

Concludiamo impostando la firma digitale. La firma digitale serve appunto a “Firmare” il programma per tutelare l’utente. Ovviamente nessuno di noi (in linea di massima) è una software house... quindi creeremo una firma fittizia.

Giusto per accontentare AIR....! Concludiamo cliccando su “OK”.

Ora sempre dal menu “Comandi” clicchiamo questa volta su “AIR- Crea AIR file”.

Dopo qualche secondo di attesa, vedremo che il file “Meteo.AIR” è stato creato. Ora non resta che provarlo ed installarlo! 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

FINE

19 [76]

DEVELOPING

Adobe FLASHLITE

Visualizzare video FLV con FlashLite 3.0 di Fabio Biondi - f.biondi@vistiesentiti.it Con le precedenti versioni di FlashLite (1.* e 2.*) la visualizzazione di filmati all’interno di un’applicazione mobile era limitata ai formati supportati dal telefonino in cui veniva utilizzata e non era possibile, inoltre, effettuare semplici operazioni sui video come la rotazione, l’applicazione di maschere o, tra le tante altre funzionalità interattive “essenziali”, il controllo dinamico del volume. È facile comprendere, quindi, come il supporto ai video FLV sia una delle features più attese nella release 3 di FlashLite e, anche se il software è ancora in versione beta (già disponibile sul sito di Adobe Lab) i test che abbiamo effettuato hanno avuto esito positivo e hanno confermato una certa stabilità e maturità del prodotto.

In questo articolo spiegheremo come realizzare un semplice player per visualizzare un filmato in formato FLV con la tecnica del “progressive download”, sia in locale sia in remoto, memorizzato direttamente sul telefonino o reso accessibile tramite un servizio di hosting remoto tradizionale. Con una tecnica analoga (che sarà trattata in un successivo articolo) è inoltre possibile visualizzare video in streaming, anche in tempo reale, sfruttando le potenzialità del nuovo Flash Media Server 3.

Per realizzare il nostro video player sarà sufficiente attraversare pochi e semplici passi: 1) Innanzitutto è necessario scaricare dal sito Adobe Lab l’ultima versione del player FlashLite 3, attualmente certificato per essere installato solo su dispositivi Nokia N95, ma che dovrebbe funzionare anche su tutti i Nokia S60 3rd edition tra cui i modelli: 3250, 5500 Sport, 5700, 6110 Navigator, 6120 Classic, 6121 Classic, 6290, E50, E51, E60, E61, E61i, E62, E65, E70, E90, N71, N73, N73 Music Edition, N75, N76, N77, N80, N80 IE, N81, N81 8GB, N82, N91, N91 8GB, N92, N93, N93i, N95, N95 US 3G, N95 8GB. I test di questo articolo sono stati effettuati su un Nokia E65, sfruttando la modalità di collegamento Wi-Fi per effettuare i test in remoto.

2) Per creare l’applicazione occorre utilizzare Adobe Flash CS3, e per l’occasione dovrà essere installato anche l’ultimo aggiornamento disponibile sul sito Adobe, attualmente la 9.02 (marzo 2008). Tra le novità introdotte da questo aggiornamento vi è, appunto, l’estensione del supporto alla versione 3 di FlashLite.

3) A questo punto, con tutti gli strumenti a disposizione, si deve creare un nuovo documento Flash File (mobile) settando la proprietà Player Version in Flash Lite 3.0 di Adobe Device Center CS3. Selezionate il dispositivo per il quale volete sviluppare il video player, scegliendo l’opportuna risoluzione. Nel mio caso, disponendo di un Nokia E65, ho selezionato il device FlashLite 3.0 240x320px 16.

20 [76]

SEGUE u

DEVELOPING

4) Create ora quattro livelli distinti: - As: dove inserire il codice utile al funzionamento del player - Video: che contiene l’oggetto video nel quale verrà visualizzato il filmato FLV - Testi: con tutte le descrizioni inserite nell’applicazione (ovvero dei campi di testo statici) - BackGround: che contiene le bande grigie situate sotto i testi ed eventuali altri elementi grafici

COME CREARE UN NUOVO OGGETTO VIDEO: Per creare un nuovo oggetto video è necessario aprire il menu della libreria, selezionare l’opzione New Video, e trascinare l’oggetto sullo Stage, posizionandolo alle coordinate (x: 0, y:100) e settando una dimensione adatta a visualizzare i video che andrete a proporre. Nel mio caso 240 x 129 pixel, visto che il video che ho usato in questo esempio ha tali dimensioni.

5) Dal punto di vista dell’interfaccia di interazione, tramite il nostro player l’utente potrà avviare un video cliccando sul tasto SOFT KEY 1 (vedi immagine seguente) e uscire dall’applicazione premente il tasto SOFT KEY2.

SEGUE u SEGUE u

Visualizzare video FLV con FlashLite 3.0

21 [76]

DEVELOPING Copiate quindi il seguente codice ActionScript 2.0 all’interno del livello AS e testate l’applicazione premendo CTRL+ENTER, avviando automaticamente il DEVICE CENTRAL. Lo script è spiegato passo-passo attraverso commenti posizionati in ogni punto del codice. // ========================================================= // FS Commands // ========================================================= // Abilitiamo l’utilizzo delle SOFT Keys fscommand2(“SetSoftKeys”, “”, “Exit”);

// Qualità Alta fscommand2(“SetQuality”, “high”);

// Modalità FullScreen Attivata fscommand2(“Fullscreen”, “true”);

// ========================================================= // Dichiarazione variabili // =========================================================

// Path filmato FLV Locale: var videos:String = “divani&divani_spot_S60.flv”;

// Path filmato FLV Remoto: // var videos:String = “http://augitaly.fabiobiondi.com/UM/4_FLite3Video/divani&divani_spot_S60. flv”;

// NetConnection var nc:NetConnection;

// Flusso stream var ns:NetStream;

// ========================================================= // Gestione pressione Tasti // ========================================================= var tmpObj:Object = {}; tmpObj.onKeyDown = function():Void

{

switch(Key.getCode())

{

// SOFT KEY SINISTRA

// == > Play Video

22 [76]

Visualizzare video FLV con FlashLite 3.0

SEGUE u

DEVELOPING

case ExtendedKey.SOFT1:

playVideo(videos);

break;

// SOFT KEY DESTRA

// == > Chiudi l’applicazione

case ExtendedKey.SOFT2:

fscommand2(“Quit”);

break;

} }; Key.addListener(tmpObj); // ========================================================= // Visualizzazione del Video .flv // ========================================================= function playVideo(file:String):Void {

// Creiamo una nuova connessione NetConnection (solo la prima volta)

if (!nc)

{

nc = new NetConnection();

nc.connect(null);

}

// Creiamo un nuovo flusso Stream (solo la prima volta)

if (!ns)

ns = new NetStream(nc);

// Abbiniamo il flusso stream all’oggetto video presente su Stage

video_obj.attachVideo(ns);

// Play File ns.play(file);

} stop();

Per visualizzare video FLV posizionati su server remoti, eliminate il commento alla riga precedente, e abilitate l’opzione “Local playback security” in “Access network only”, che trovate in fondo nelle impostazioni di pubblicazione (File -> Publish settings).

SEGUE u SEGUE u

Visualizzare video FLV con FlashLite 3.0

23 [76]

DEVELOPING

Per completare questa guida, riporto qui di seguito i collegamenti per scaricare i file sorgenti e un video di prova.

• Download Source .fla su http://augitaly.fabiobiondi.com/UM/4_FLite3Video/Sources.zip • Download Video Sample .flv su http://augitaly.fabiobiondi.com/UM/4_FLite3Video/divani&divani_spot_S60.flv

Adobe Flash/Flex Developer dal 2002, realizzasiti web dinamici e rich internet application. Ottenuta nel 2004 la

scritto da

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 f.biondi@vistiesentiti.it

24 [76]

FINE

25 [76]

DEVELOPING

Adobe FLEX

Flex e web services: scenari e soluzioni di Nicola Laino - info@laino.it Com’è noto Flex dispone di uno specifico componente che è possibile usare per le comunicazioni con i web services. In questo articolo prenderemo in esame alcune soluzioni che potremo convenientemente adoperare in diversi casi.

Realizzeremo tre semplici web services di esempio in C# e tre applicazioni client in Flex che presenteranno modalità implementative differenti a seconda della complessità degli scenari.

Cominciamo con un primo caso, semplice ma molto comune: un WebMethod che restituisce un elenco (nell’esempio i sedici colori web standard) pubblicato tramite una DataGrid Flex. <%@ WebService Language=”C#” Class=”MyWebService” %> using System; using System.Web.Services; using System.Xml.Serialization; using System.Collections.Generic; [WebService(Namespace=”http://abc.com/webservices/”)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MyWebService : System.Web.Services.WebService { public MyWebService() { } [WebMethod] [XmlInclude(typeof(Color))] public List<Color> getColors() { List<Color> l = new List<Color>(); l.Add(new Color(“Aqua”, “#00FFFF”)); l.Add(new Color(“Black”, “#000000”)); l.Add(new Color(“Blue”, “#0000FF”)); l.Add(new Color(“Fuchsia”, “#FF00FF”)); l.Add(new Color(“Gray”, “#808080”)); l.Add(new Color(“Green”, “#008000”)); l.Add(new Color(“Lime”, “#00FF00”)); l.Add(new Color(“Maroon”, “#800000”)); l.Add(new Color(“Navy”, “#000080”)); l.Add(new Color(“Olive”, “#808000”)); l.Add(new Color(“Purple”, “#800080”)); l.Add(new Color(“Red”, “#FF0000”)); l.Add(new Color(“Silver”, “#C0C0C0”)); l.Add(new Color(“Teal”, “#008080”)); l.Add(new Color(“White”, “#FFFFFF”)); l.Add(new Color(“Yellow”, “#FFFF00”)); return l; }

} [Serializable] public class Color { public String name; public String hex; public String rgb;

26 [76]

SEGUE u

DEVELOPING public Color() { } public Color(String n, String h) { name = n; hex = h; rgb = hexToRgb(hex); }

}

private String hexToRgb(String h) { int r = (System.Int32.Parse(h.Substring(1, 2), System.Globalization.NumberStyles.AllowHexSpecifier)); int g = (System.Int32.Parse(h.Substring(3, 2), System.Globalization.NumberStyles.AllowHexSpecifier)); int b = (System.Int32.Parse(h.Substring(5, 2), System.Globalization.NumberStyles.AllowHexSpecifier)); return r.ToString() + “,” + g.ToString() + “,” + b.ToString(); }

Nel web service troviamo una classe Color con tre campi pubblici che conterranno nome, valore esadecimale e rgb (tre numeri separati da virgola: la sintassi adoperata nei CSS) dei diversi colori.

Quest’ultimo valore è ricavato da quello esadecimale con il metodo privato hexToRgb. Tutte le istanze valorizzate di questa classe vengono raccolte in una collection List nel WebMethod getColors che, ad ogni chiamata, restituisce proprio questa collection.

Salviamo il file come “MyWebService.asmx”, configuriamo IIS per la pubblicazione e invochiamo getColors da un browser qualsiasi. Otterremo <ArrayOfColor> <Color> <name>Aqua</name> <hex>#00FFFF</hex> <rgb>0,255,255</rgb> </Color> ... </ArrayOfColor>

Il frammento presenta la serializzazione della collection come ArrayOfColor: il nodo root dispone tutte le istanze di Color con i relativi campi pubblici e i valori ivi contenuti come nodi elemento e nodi testo.

Realizziamo ora un client in Flex per consumare il web service.

L’applicazione è semplicissima <?xml version=”1.0” encoding=”iso-8859-1”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:WebService id=”ws” useProxy=”false” wsdl=”http://localhost/Colors/MyWebService.asmx?wsdl”> <mx:operation name=”getColors” /> </mx:WebService>

SEGUE u SEGUE u

Flex e web services: scenari e soluzioni

27 [76]

DEVELOPING

<mx:Panel width=”350” height=”500”> <mx:DataGrid width=”100%” height=”100%” dataProvider=”{ws.getColors.lastResult}”> <mx:columns> <mx:DataGridColumn dataField=”name” headerText=”Name” /> <mx:DataGridColumn dataField=”hex” headerText=”Hex” /> <mx:DataGridColumn dataField=”rgb” headerText=”Rgb” /> </mx:columns> </mx:DataGrid> <mx:ControlBar> <mx:Spacer width=”100%” /> <mx:Button label=”Test” click=”ws.getColors.send()” /> </mx:ControlBar> </mx:Panel> </mx:Application>

Abbiamo valorizzato la proprietà wsdl con l’url della descrizione del servizio, assegnato il nome del WebMethod all’elemento operation, definita la chiamata di getColors (evento click del pulsante “Test”) e, infine, passato l’esito dell’invocazione (l’ArrayOfColor convertito in ArrayCollection) come dataProvider della DataGrid.

I nomi assegnati alle proprietà dataField degli elementi DataGridColumn sono naturalmente gli stessi dei campi pubblici della classe Color definita nel web service. Compiliamo l’applicazione e carichiamola da un browser: un click sul tasto “Test” popolerà la tabella con i nomi e i valori dei sedici colori.

28 [76]

Flex e web services: scenari e soluzioni

SEGUE u

DEVELOPING

Passiamo adesso ad un caso leggermente più complesso: un WebMethod che restituisce l’elenco delle regioni e delle relative province italiane. La soluzione non presenta particolari differenze nel web service (solo una classe in più e il codice per leggere un XML contenente i nomi di regioni e province) <%@ WebService Language=”C#” Class=”MyWebService” %> using System; using System.Xml; using System.Web.Services; using System.Xml.Serialization; using System.Collections.Generic; [WebService(Namespace=”http://abc.com/webservices/”)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MyWebService : System.Web.Services.WebService { public MyWebService() { } [WebMethod] [XmlInclude(typeof(Region))] public List<Region> getRegions() { XmlDocument xd = new XmlDocument(); xd.Load(Server.MapPath(“italy.xml”)); List<Region> r = new List<Region>(); foreach (XmlNode rn in xd.DocumentElement.ChildNodes) { List<Province> p = new List<Province>(); foreach (XmlNode pn in rn.ChildNodes) { p.Add(new Province(pn.Attributes.Item(0).Value)); } r.Add(new Region(rn.Attributes.Item(0).Value, p)); }

return r;

}

} [Serializable] public class Region { [XmlAttribute(“name”)] public String name; public List<Province> Provinces; public Region() { }

}

public Region(String n, List<Province> p) { name = n; Provinces = p; }

[Serializable] public class Province { [XmlAttribute(“name”)] public String name;

SEGUE u SEGUE u

Flex e web services: scenari e soluzioni

29 [76]

DEVELOPING

public Province() { }

}

public Province(String n) { name = n; }

Di seguito un frammento del documento prodotto dal metodo getRegions <ArrayOfRegion> <Region name=”Abruzzo”> <Provinces> <Province name=”L’Aquila” /> <Province name=”Chieti” /> <Province name=”Pescara” /> <Province name=”Teramo” /> </Provinces> </Region> <Region name=”Basilicata”> <Provinces> <Province name=”Matera” /> <Province name=”Potenza” /> </Provinces> </Region> ... </ArrayOfRegion>

L’architettura dell’applicazione client, invece, presenta notevoli differenze. In particolari circostanze può essere più conveniente centralizzare la comunicazione con il web service mediante uno specifico oggetto (Remote Proxy, vedi http://en.wikipedia.org/wiki/Proxy_pattern).

In questo modo tutti i client del progetto accederanno alle informazioni pubblicate dal web service utilizzando sempre lo stesso oggetto package { import import import import

mx.rpc.soap.WebService; mx.rpc.events.ResultEvent; mx.collections.ArrayCollection; RegionsModel;

public class RegionsProxy { private var ws:WebService; public function RegionsProxy() { ws = new WebService(); ws.wsdl = “http://localhost/Regions/MyWebService.asmx?wsdl”; ws.loadWSDL(); }

30 [76]

Flex e web services: scenari e soluzioni

SEGUE u

DEVELOPING public function getRegions():void { ws.getRegions.addEventListener(ResultEvent.RESULT, getRegionsResultHandler); ws.getRegions(); }

}

}

private function getRegionsResultHandler(e:ResultEvent):void { ws.getRegions.removeEventListener(ResultEvent.RESULT, getRegionsResultHandler); RegionsModel.getInstance().regions = ws.getRegions.lastResult as ArrayCollection; }

Il gestore dell’evento result, come si vede, passa come ArrayCollection l’esito dell’invocazione del WebMethod ad una proprietà di un altro oggetto: RegionModel.

Quest’oggetto è un Data Model realizzato con un Singleton (una delle implementazioni più semplici, vedi http://en. wikipedia.org/wiki/Singleton_pattern) e qui adoperato come “ponte” tra il proxy ed il fruitore (o i fruitori) dei dati package { import mx.collections.ArrayCollection; public class RegionsModel { private static var instance:RegionsModel; private var r:ArrayCollection; [Bindable] public function set regions(v:ArrayCollection):void { r = v; } public function get regions():ArrayCollection { return r; } public function RegionsModel() {}

}

}

public static function getInstance():RegionsModel { if (instance == null) { instance = new RegionsModel(); } return instance; }

Un banale esempio di client per testare il progetto <?xml version=”1.0” encoding=”iso-8859-1”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[

SEGUE u SEGUE u

Flex e web services: scenari e soluzioni

31 [76]

DEVELOPING

import RegionsModel; import RegionsProxy; private function bceh():void { var rp:RegionsProxy = new RegionsProxy(); rp.getRegions(); }

]]> </mx:Script>

<mx:Panel paddingTop=”10” paddingRight=”10” paddingBottom=”10” paddingLeft=”10”> <mx:ComboBox width=”200” id=”region” dataProvider=”{RegionsModel.getInstance().regions}” labelField=”name” /> <mx:ComboBox width=”200” dataProvider=”{region.selectedItem.Provinces}” labelField=”name” /> <mx:ControlBar> <mx:Spacer width=”100%” /> <mx:Button label=”Test” click=”bceh()” /> </mx:ControlBar> </mx:Panel> </mx:Application>

L’esito dell’invocazione viene passato dalla proprietà regions del model al primo ComboBox (che elenca le regioni) come dataProvider. Il secondo ComboBox (che elenca le province) ha come dataProvider l’array Provinces restituito dall’elemento selezionato del primo.

32 [76]

Flex e web services: scenari e soluzioni

SEGUE u

DEVELOPING

Chiudiamo con un ultimo caso: un WebMethod che restituisce la serializzazione di un oggetto strutturato in modo leggermente diverso rispetto a quelli finora visti che, lato consumer, verrà prima mappato ad una corrispondente classe AS3 e poi fruito nelle consuete modalità dal (o dai) client. <%@ WebService Language=”C#” Class=”MyWebService” %> using System; using System.Web.Services; using System.Xml.Serialization; using System.Collections.Generic; [WebService(Namespace=”http://abc.com/webservices/”)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MyWebService : System.Web.Services.WebService { public MyWebService() { }

}

[WebMethod] [XmlInclude(typeof(Student))] public Student getStudent() { Student s = new Student(1, “Giuseppe”, “Rossi”); return s; }

[Serializable] public class Student { [XmlAttribute(“id”)] public int id; public String name; public String surname; public List<Exam> Exams; public Student() { }

}

public Student(int i, String n, String s) { id = i; name = n; surname = s; Exams = new List<Exam>(); Exams.Add(new Exam(“Algoritmi e strutture dati”, “25/30”)); Exams.Add(new Exam(“Ingegneria del software”, “30/30”)); Exams.Add(new Exam(“Sistemi operativi”, “26/30”)); }

[Serializable] public class Exam { public String name; public String grade; public Exam() { } public Exam(String n, String g) { name = n;

SEGUE u SEGUE u

Flex e web services: scenari e soluzioni

33 [76]

DEVELOPING

}

grade = g;

}

Questo il documento XML restituito da getStudent <Student> <name>Giuseppe</name> <surname>Rossi</surname> <Exams> <Exam> <name>Algoritmi e strutture dati</name> <grade>25/30</grade> </Exam> <Exam> <name>Ingegneria del software</name> <grade>30/30</grade> </Exam> <Exam> <name>Sistemi operativi</name> <grade>26/30</grade> </Exam> </Exams> </Student>

Il codice del Remote Proxy è sostanzialmente identico a quello già visto sopra ma stavolta alla proprietà del Data Model non viene assegnato semplicemente l’esito dell’invocazione del WebMethod ma una istanza della classe Student package { import import import import

mx.rpc.soap.WebService; mx.rpc.events.ResultEvent; StudentModel; Student;

public class StudentProxy { private var ws:WebService; public function StudentProxy() { ws = new WebService(); ws.wsdl = “http://localhost/Student_FX2/MyWebService.asmx?wsdl”; ws.loadWSDL(); } public function getStudent():void { ws.getStudent.addEventListener(ResultEvent.RESULT, getStudentResultHandler); ws.getStudent(); } private function getStudentResultHandler(e:ResultEvent):void { ws.getStudent.removeEventListener(ResultEvent.RESULT, getStudentResultHandler);

34 [76]

Flex e web services: scenari e soluzioni

SEGUE u

DEVELOPING

}

StudentModel.getInstance().student = new Student(ws.getStudent.lastResult);

} }

Con la classe Student praticamente ricostruiamo lâ&#x20AC;&#x2122;oggetto serializzato dal web service

package { import mx.collections.ArrayCollection; public class Student { private private private private

var var var var

i:int; n:String; s:String; e:ArrayCollection;

[Bindable] public function set id(v:int):void { i = v; } public function get id():int { return i; } [Bindable] public function set name(v:String):void { n = v; } public function get name():String { return n; } [Bindable] public function set surname(v:String):void { s = v; } public function get surname():String { return s; } [Bindable] public function set exams(v:ArrayCollection):void { e = v; } public function get exams():ArrayCollection { return e; }

SEGUE u SEGUE u

Flex e web services: scenari e soluzioni

35 [76]

DEVELOPING

public function Student(o:Object) { i = o.id; n = o.name; s = o.surname; e = o.exams as ArrayCollection; }

}

}

La ricostruzione di Student avviene nel costruttore della classe che riassegna i valori dei campi uno ad uno.

Questa procedura è indispensabile con Flex 2 che non è in grado di mappare in automatico un tipo custom restituito da un web service ad una classe AS3. Tale limitazione però è stata superata, come vedremo, in Flex 3.

Ometto il codice del Data Model perché differisce dal precedente solo nel tipo restituito dalla proprietà: non più ArrayCollection ma Student… Tutto il codice delle soluzioni, comunque, è allegato all’articolo.

Un client d’esempio per testare il caso in oggetto <?xml version=”1.0” encoding=”iso-8859-1”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[ import StudentModel; import StudentProxy; private function bceh():void { var cp:StudentProxy = new StudentProxy(); cp.getStudent(); }

]]> </mx:Script>

<mx:Panel width=”350” height=”350”> <mx:Form width=”100%”> <mx:FormItem label=”ID”> <mx:TextInput width=”200” text=”{StudentModel.getInstance().student.id.toString()}” /> </mx:FormItem> <mx:FormItem label=”Nome”> <mx:TextInput width=”200” text=”{StudentModel.getInstance().student.name}” /> </mx:FormItem>

36 [76]

Flex e web services: scenari e soluzioni

SEGUE u

DEVELOPING <mx:FormItem label=”Cognome”> <mx:TextInput width=”200” text=”{StudentModel.getInstance().student.surname}” /> </mx:FormItem> </mx:Form>

<mx:DataGrid width=”100%” height=”100%” dataProvider=”{StudentModel.getInstance().student.exams}”> <mx:columns> <mx:DataGridColumn dataField=”name” headerText=”Esame”/> <mx:DataGridColumn dataField=”grade” headerText=”Voto”/> </mx:columns> </mx:DataGrid>

<mx:ControlBar> <mx:Spacer width=”100%” /> <mx:Button label=”Test” click=”bceh()” /> </mx:ControlBar> </mx:Panel> </mx:Application>

SEGUE u SEGUE u

Flex e web services: scenari e soluzioni

37 [76]

DEVELOPING Presentiamo, infine, una delle tante novità di Flex 3: la classe SchemaTypeRegistry.

Un metodo di questa classe, registerClass, ci consente di ovviare alla carenza vista in precedenza.

Di seguito la nuova classe StudentProxy package { import import import import import

mx.rpc.soap.WebService; mx.rpc.xml.SchemaTypeRegistry; mx.rpc.events.ResultEvent; StudentModel; Student;

public class StudentProxy {

private var ws:WebService; private var qn:QName = new QName(“http://abc.com/webservices/”, “Student”); public function StudentProxy() { ws = new WebService(); ws.wsdl = “http://localhost/Student_FX3/MyWebService.asmx?wsdl”; ws.loadWSDL();

}

SchemaTypeRegistry.getInstance().registerClass(qn, Student);

public function getStudent():void { ws.getStudent.addEventListener(ResultEvent.RESULT, getStudentResultHandler); ws.getStudent(); }

}

}

private function getStudentResultHandler(e:ResultEvent):void { ws.getStudent.removeEventListener(ResultEvent.RESULT, getStudentResultHandler); StudentModel.getInstance().student = ws.getStudent.lastResult; }

Anche questa classe è un Singleton, quindi, per accedere alle sue proprietà e ai suoi metodi adoperiamo la sintassi SchemaTypeRegistry.getInstance().

Due sono gli argomenti del metodo registerClass: il QName (il Namespace impostato nel web service) e il nome della classe.

Il gestore dell’evento result, quindi, passa l’esito dell’invocazione del WebMethod direttamente alla proprietà student del Data Model che viene riconosciuto come tipo di oggetto Student.

38 [76]

Flex e web services: scenari e soluzioni

SEGUE u

DEVELOPING

Il costruttore di questa classe, pertanto, non necessita più delle istruzioni di riassegnazione e può essere svuotato public function Student() {}

Negli altri file del progetto non cambia nulla. Per testare il tutto compilate di nuovo l’applicazione precedente con il nuovo MXMLC di Flex 3.

Al lettore il compito di sperimentare variazioni e, senz’altro, più interessanti applicazioni dei suggerimenti qui presentati.

scritto da

Si occupa prevalentemente dello sviluppo di soluzioni web based per una nota società di telecomunicazioni. Da qualche anno si dedica alle RIA e, in particolare, al framework Flex, che sta adoperando con un certo profitto in diversi casi.

Nicola Laino info@laino.it

FINE

39 [76]

DEVELOPING

Web 2.0

Creare un textbox con autocompletamento in Javascript di Michele Bertoli - michele@havana7.com

La diffusione delle tecniche tipiche del Web 2.0 ha permesso agli sviluppatori di costruire interfacce contemporaneamente semplici ed efficaci migliorando l’esperienza utente anche sotto l’aspetto della fruizione dei contenuti. A chiunque è capitato almeno una volta di imbattersi in un textbox “intelligente”, capace di suggerire dei termini in base ad alcuni caratteri digitati. Un esempio su tutti è quello di Google Suggest http:// www.google.com/webhp?complete=1&hl=en. Una casella di testo di questo tipo, oltre a velocizzare le operazioni, permette di evitare inutili ricerche prive di risultati interessanti, in altre parole consente di realizzare esperienze interattive intuitive ed appaganti. Nel seguente articolo mostrerò come creare un textbox con autocompletamento in Javascript, in particolare con l’ausilio della libreria jQuery http://jquery.com/. Il risultato finale è riportato nello screenshot:

Innanzitutto è importante fissare i passaggi chiave dell’applicazione: Intercettazione dei caratteri digitati dall’utente.

Richiesta asincrona al server e relativa risposta in formato XML. Costruzione della lista dei suggerimenti.

Gestione dell’interazione utente con tale lista. È necessario premettere che lo script fa uso di una pagina lato server (.NET nello specifico) che, opportunamente interrogata, restituisce una lista di suggerimenti in formato XML. Tale pagina non sarà oggetto di studio in questa trattazione, ci limiteremo a prendere in considerazione la struttura del file restituito, che è la seguente: <items> <item>Andorra</item> <item>Angola</item> <item>Anguilla</item> <item>Antarctica</item> <item>Antigua and Barbuda</item> </items> A questo punto possiamo cominciare e la prima operazione consiste nel creare una pagina XHTML contente gli elementi necessari: <input id=”q” type=”text” /> <div id=”suggest” /> Il primo è il campo di testo in cui l’utente digiterà i caratteri desiderati e il secondo è un generico elemento in cui andremo ad inserire la lista dei suggerimenti ottenuta dal server. Successivamente è necessario creare una classe CSS così composta: div#suggest ul li.selected {

background-color:#ccc; }

u

40 [76]

SEGUE u

DEVELOPING

Essa definisce lo stile di uno degli elementi di maggior rilievo di questo articolo. La classe selected ha, infatti, il compito di identificare, se esiste, l’elemento selezionato nella lista dei suggerimenti. Naturalmente lo stile può essere adattato al layout della vostra web application, nello specifico ho utilizzato uno sfondo grigio. È giunto il momento di passare in rassegna le principali funzioni Javascript sulle quali ci appoggeremo: function select(element) { if (element.is(“li”)) { $(“li.selected”, “#suggest”).removeClass(“selected”); element.addClass(“selected”); } } function setText() { $(“#q”).val($(“li.selected”, “#suggest”).text()); clear(); } function clear() { $(“#suggest”).empty(); $(“#suggest”).hide(); }

function cancelEvent(e) { if (!e) { e = window.event; } if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } La funzione select ci permette di assegnare ad un elemento (in particolare ad un <li>) la classe selected di cui sopra. Tramite la funzione setText popoliamo il textbox con il contenuto dell’elemento selezionato nella lista dei suggerimenti. Le funzioni clear e cancelEvent ci permettono, rispettivamente, di “pulire” il div di appoggio e intervenire sugli eventi scatenati dell’utente. Ora possiamo finalmente vedere la porzione di codice che rappresenta il cuore della nostra applicazione: $(function() { $(“#q”).attr(“autocomplete”, “off”); clear(); Al caricamento della pagina aggiungiamo l’attributo autocomplete, impostato su off, al textbox. Esso evita che appaiano i suggerimenti di default previsti dai browser più diffusi. Applicare l’attributo fuori dal markup ci permette di garantire la funzionalità predefinita a quegli utenti che non possiedono un browser in grado di interpretare codice Javascript e non possono quindi usufruire della nostra funzione di autocompletamento. $(“#q”).keydown( function(e) {

var selected; var input = $(this); if ($(“*”).index($(“li.selected”, “#suggest”)[0]) >= 0) { selected = $(“li.selected”, “#suggest”);

SEGUE u SEGUE u

Creare un textbox con autocompletamento in Javascript

41 [76]

DEVELOPING } else { selected = null; } Successivamente ci mettiamo in ascolto sull’evento keydown della casella di testo e settiamo una variabile contenente il riferimento all’elemento con classe selected presente nella lista oppure null, in caso la lista sia nascosta o nessun elemento selezionato. switch(e.keyCode) { case 13: cancelEvent(e); if (selected) { setText(); } break; A questo punto vediamo come gestire le varie possibilità di interazione utente con il textbox e la lista.

Alla pressione del tasto con codice 13 (enter), se un elemento ha classe selected, scriviamo il suo contenuto direttamente nella casella di testo. case 38:

cancelEvent(e); if (selected) { select(selected.prev()); } break;

case 40: cancelEvent(e); if (selected) { select(selected.next()); } else { $(“li”, “#suggest”).eq(0).addClass(“selected”); } break; I tasti con codice 38 e 40 sono rispettivamente “freccia sù” e “freccia giù”.

Alla pressione di detti tasti spostiamo la classe selected sull’elemento precedente o successivo nella lista dei suggerimenti.

Nota bene: se alla pressione della “freccia giù” nessun elemento è selezionato applichiamo la classe selected al primo. default:

timeout = setTimeout(function() { if (input.val().length >= 1) { $(“#suggest”).show(); $(“#suggest”).html(“<img src=’images/ajax-loader.gif’ alt=’’ />”); $.get(“data.aspx?q=” + input.val(), function(data) { $(“#suggest”).html(“<ul>”); $(“item”, data).each(function(i) {

42 [76]

Creare un textbox con autocompletamento in Javascript

SEGUE u

DEVELOPING

var li = document.createElement(“li”); $(li).html($(this).text()); $(“ul”, “#suggest”).append(li); $(li).mouseover(function() { select($(this)); }); $(li).click(function() { setText(); }); });

}

});

});

} else { clear(); } }, 300); break;

}); Quest’ultimo caso della struttura ci permette di intercettare la pressione di tutti gli altri tasti. Innanzitutto è necessario impostare un timeout che ci dia la possibilità di posticipare l’utilizzo dei dati in modo tale da non perdere alcun carattere. A questo punto mostriamo un’immagine (tipicamente una gif animata) che pone l’utente in fase di attesa mentre interroghiamo il server. Sulla callback della richiesta facciamo il parsing dell’XML generando la lista dei suggerimenti alla quale associamo i gestori degli eventi del mouse.

Rispettivamente: mouseover (imposta la classe selected sull’elemento) e click (scrive nella casella di testo il valore dell’elemento di classe selected della lista dei suggerimenti). Non vi resta che assemblare il tutto e proporre un textbox con autocompletamento nelle vostre applicazioni.

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

scritto da

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

FINE

43 [76]

DESIGN Second Life experience - parte 1 di Alessandro Bordicchia - a.bordicchia@thecode.it Introduzione Sono ormai mesi in cui si sente parlare di Second Life e delle sue potenzialità orientate alla tecnologia, alla sperimentazione e al concetto di community con diversi tipi di approccio. Passata la fase, devo dire inaspettatamente breve, in cui obiettivo di molti era “esserci” indipendentemente dal tipo di servizio offerto, credo si sia giunti ad punto in cui la progettazione strategica sia indiscutibilmente alla base di ogni iniziativa. Per essere chiari, che l’approccio verso Second Life sia mirato al ritorno di immagine, alla formazione o al product test, l’esperienza dell’utente è fondamentale.

Prima di entrare nel dettaglio di cosa si può fare e come, credo si doveroso fare un passo indietro e aprire una parentesi, aggiungendo magari qualche curiosità, per chi non conosce le origini di questa piattaforma e non ha riferimenti necessari per poter operare di persona. Second Life è un metaverso, un termine coniato da Neal Stephenson in Snow Crash, un libro di fantascienza di ispirazione Cyberpunk, a cui la Linden Lab (società californiana proprietaria di Second Life) sembra si sia fortemente ispirata.

Il metaverso ha una sua economia interna e una sua moneta (Linden Dollar) che può essere acquistata con dollari reali o convertita in dollari reali. Gli oggetti creati all’interno di SL sono tutelati da un copyright e da permessi di copia e vendita decisi direttamente dall’utente e possono essere venduti attraverso la moneta locale.

Per accedere a Second Life è necessario effettuare una registrazione sul sito (www.secondlife.com), scegliere un avatar e un nome e scaricare il client attraverso il quale sarà possibile connettersi al metaverso (Sono consigliabili una buona scheda grafica e una connessione ASDL veloce ).

Una volta effettuate queste operazioni di base non resta che lanciare il programma e inserire i vostri dati di registrazione per l’accesso.

u

44 [76]

SEGUE u

DESIGN

La prima volta in una seconda vita Il primo accesso a Second Life vi lascierà abbastanza frastornati. Sarete catapultati in una “orientation island” e appariranno sullo schermo una serie di tutorial che vi spiegheranno per sommi capi cosa fare e come.

Ecco alcune istruzioni di base che vi saranno d’aiuto nella navigazione: 1. geografia del metaverso Second Life è un territorio molto ampio e in continua evoluzione perché completamente creato dagli utenti, orientation island è solo una piccola porzione di questo territorio.

Tutto il metaverso è composto da una serie di isole chiamate SIM, termine che sta ad indicare un simulatore in Second Life, un territorio di 256x256 metri.

2. navigazione è possibile muoversi all’interno e all’esterno di un’isola in 3 modi diversi: a) Camminare. Per camminare è necessario usare le frecce di direzione presenti sulla vostra tastiera b) Volare. Per volare in alto usate il tasto “pag su” e poi le frecce di direzione. Per atterrare usate il tasto pag giù. c) Teletrasportarsi. Questo è il modo più veloce per spostarsi da un’isola all’altra. Per teletrasportarvi potete utilizzare il tasto “map” nel caso in cui conosciate il nome della vostra isola di destinazione.

SEGUE u SEGUE u

Second Life experience - parte 1

45 [76]

DESIGN

Oppure il tasto “search”, nel caso in cui la vostra esplorazione sia per “argomento” (es: digitate shoes nel caso in cui stiate cercando un paio di scarpe per il vostro avatar).

46 [76]

Second Life experience - parte 1

SEGUE u

DESIGN

Ora che abbiamo gli strumenti di base per navigare possiamo passare ad una fase un pochino più operativa.

Second Life building experience Come già detto in precedenza quello di SL è un mondo completamente creato dagli utenti. A questo punto la domanda sorge spontanea… come posso costruire qualcosa?

La piattaforma possiede un tool di sviluppo interno che consente di creare degli oggetti partendo da semplici forme tridimensionali (dette primitive, in gergo prims) come il cubo, la sfera, il cilindro, il toro e cosi via e associare degli script agli oggetti realizzati.

Per la parte di scripting il linguaggio di riferimento è LSL (Linden Scripting Language), ma di questo parleremo in seguito. È possibile accedere alla finestra dedicata al building cliccando sul tasto build.

Su questo però c’è da fare una piccola premessa. Probabilmente, specie se vi collegate per la prima volta, il tasto “build” sarà disabilitato.

Questo avviene perché i permessi per costruire un oggetto sono abbinati al terrirorio in cui vi trovate, in poche parole il proprietario dell’isola su cui siete atterrati può decidere se gli altri avatar possono costruire oggetti su suo territorio.

Come posso allora costruire un oggetto? La risposta è semplice: 1. Comprare un’ Isola. però è un pochino dispendioso per la vostra prima prova. In ogni caso potete trovare informazioni sull’acquisto delle isole a questo indirizzo: http://secondlife.com/community/land-islands.php.

2. Comprare da uno dei residenti una porzione di territorio. Per questo potete utilizzare il pulsante “search” e successivamente il tab “Land sales” e cercare nella lista uno dei terreni in vendita.

SEGUE u SEGUE u

Second Life experience - parte 1

47 [76]

DESIGN

Però prima dovete avere in cassa un po’ di Linden dollars e per questa operazione è necessario aver inserito i dati relativi alla carta di credito.

I Linden dollars possono essere acquistati tramite il portale o direttamente all’interno della piattaforma oppure è possibile ricevere delle donazioni dagli altri avatar, guadagnarsi i soldi con lavori a tempo o vendere le proprie realizzazioni.

3. Recarsi in una sandbox. Una sandbox è una porzione di isola dove è abilitata la possibilità di creare degli oggetti. Molti di questi spazi, messi a disposizione dagli utenti stessi, sono dotati di un “autoretun”, in poche parole l’oggetto creato all’interno del territorio viene automaticamente restituito dopo un certo limite di tempo stabilito dal proprietario (Owner).

Come trovare una sandbox?

Cliccate sul tasto “search” e digitate “sandbox”, scegliete posto tra quelli indicati, cliccate sul titolo e premete il tasto teleport.

48 [76]

Second Life experience - parte 1

SEGUE u

DESIGN

SEGUE u SEGUE u

Second Life experience - parte 1

49 [76]

DESIGN Una volta raggiunto il luogo desiderato, avrete finalmente attivo il vostro tasto build, che vi darĂ accesso alla finestra di editing.

A questo punto scegliete una delle figure geometriche tra quelle presenti (tipicamente il cubo) e cliccate con il tasto sinistro sul terreno.

50 [76]

Second Life experience - parte 1

SEGUE u

DESIGN

Congratulazioni… avete “rezzato” (come si dice in gergo) il vostro primo cubo. Cosa possiamo fare con questo cubo? Beh, rimanderei il tutto alla prossima puntata.

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

51 [76]

DESIGN ELEMENTI TEORICI PER LA PROGETTAZIONE DEI SOCIAL NETWORK – Parte I di Davide Casali - folletto@gmail.com, Gianandrea Giacoma - gianandrea.giacoma@gmail.com Questo documento è volto a sintetizzare alcune teorie dietro alle soluzioni di social networking. In particolare tenta di definire le dinamiche e i processi per l’osservazione di fenomeni sociali in rete, nel tentativo di fornire linee guida per la costruzione di un solido sistema di collaborazione. È stato scelto volutamente un taglio teorico con l’intento di identificare le principali conoscenze necessarie allo sviluppo di un progetto di networking. Infatti, in rete è facile trovare analisi mirate di progetti già esistenti mentre è più raro trovare un una ricerca generale sulla teoria dello sviluppo dei social network. Quindi questo documento non nasce come un manuale di progettazione ma un fondamento teorico che sottenda e possa fungere da base per lo sviluppo di un manuale o progetto mirato. Nel nostro approccio riteniamo importanti i fattori psicologici e sociali ai quali il network con la sua architettura e numerose componenti si lega per sfruttarli e innescare un circolo virtuoso. Troppo spesso la progettazione di network tende a sopravvalutare il lato informatico dell’interazione a scapito di quello che poi è il motore del network stesso che sono gli utenti considerati come sistemi sociali e psicologici. Secondo punto che caratterizza il nostro documento è quello di evitare l’errore di concentrarsi solo sul network come se fosse isolato e autosufficiente. Per questo riteniamo non secondario avere una prospettiva sistemica del network come elemento inserito in un contesto, in un ecosistema fatto di altri media, altre dinamiche, vincoli forti, gruppi.

Crediamo che questo testo possa essere il punto di partenza di chiunque voglia sviluppare progetti di networking in modo completo, consapevole e serio.

Introduzione È fondamentale pensare in una dimensione sociale e non più solamente su un piano tecnico o applicativo. Le tecniche si evolvono e cambiano anche radicalmente, mentre le persone e i gruppi sociali si strutturano in base a criteri che potremmo considerare universali. Non meno importante è considerare il network come un sistema complesso, che segue logiche non lineari. Nella realizzazione odierna di strumenti sociali, soprattutto i siti di social network, si tende a sottovalutare la dimensione umana e sociale, dimenticando che esistono discipline che hanno approfondito già queste tematiche: psicologia e psicologia sociale. Il risultato è che in certi casi si procede a tentoni, copiando i servizi che invece funzionano, mentre in altri casi si rischia il fallimento. Questo documento si inserisce quindi sia in un contesto di progettazione, sia in un contesto di analisi di prodotti già esistenti. Si tratta di una integrazione dei processi attualmente esistenti importando teorie e concetti già sviluppati in altre discipline scientifiche.

Procederemo quindi delineando prima alcune teorie esistenti che sono fondamentali in questo genere di studi e quindi andremo ad integrarle in una teoria volta a spiegare le dinamiche esistenti all’interno delle reti sociali amplificate con mezzi tecnici, quali appunto i siti di social network.

Basi teoriche Prima di iniziare ad analizzare in dettaglio i social network è utile fornire una semplice disamina di alcune basi importanti in questo studio.

I Social Network Il termine social network è principalmente la traduzione inglese dell’italiano rete sociale. Si tratta quindi di un insieme di individui (nodi) che sono collegati fra di loro da un qualche tipo di relazione (Wikipedia, Social Network).

Questo documento studierà le reti sociali soprattutto per le componenti psicologiche e sociali, mentre non si interesserà

u

52 [76]

SEGUE u

DESIGN

dello studio delle reti, ovvero quella parte che analizza la struttura e le dinamiche -anche sociali- da un punto informativo e matematico. Nella nostra analisi abbiamo deciso di porre al centro l’utente della rete sociale, possiamo così distinguere tre livelli: 1. Lo studio dell’individuo come elemento sia attivo che passivo della rete 2. Lo studio delle sue relazioni primarie (ovvero le persone a lui più vicine) 3. Lo studio dell’effetto della rete sulle sue attività e decisioni La sua accezione inglese viene spesso utilizzata nell’ambito web per identificare tutti quei siti che rendono possibile una rete sociale virtuale, ovvero che semplificano la nascita e il mantenimento di legami. È importante fare questa precisazione al fine di chiarire eventuali ambiguità: anche questo testo utilizzerà il termine nelle due accezioni, quella più generica e quella specifica. In particolare, le spiegazioni non vincolate dal mezzo tecnico, ovvero quelle.

Continua…

Il documento è rilasciato con licenza Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/ by-sa/3.0/).

Il documento è 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

FINE

53 [76]

DESIGN EYE TRACKING: CAMPI APPLICATIVI di Silvia Gilotta - silvia.gilotta@srlabs.it

Nel processo esplorativo del mondo che ci circonda, la percezione e l’analisi dettagliata di un determinato stimolo visivo è possibile solo in una ristretta area della retina, detta “fovea”. Ciascun stimolo esterno può essere “VISTO” solo se selezionato dall’attenzione e allineato alla fovea mediante i movimenti oculari.

Per quanto riguarda la modalità sensoriale visiva, è ampiamente assodato che i movimenti degli occhi sono strettamente legati al modo in cui l’attenzione viene diretta e gestita. In situazioni naturali, i due sistemi, attentivo e visivo operano congiuntamente: la direzione dello sguardo coincide con quella dell’attenzione.

Si ritiene che il movimento dell’attenzione preceda e guidi il movimento oculare; in altre parole, i movimenti oculari sono guidati dallo spostamento dell’attenzione su un determinato stimolo.

Solo in visione foveale l’uomo è in grado di percepire coscientemente informazioni dall’esterno, poiché quando lo sguardo si sposta (attraverso i “movimenti saccadici”) la sensibilità visiva è ridotta (“soppressione saccadica”).

Lo scopo dei movimenti oculari è proprio quello di portare la fovea (il centro della retina) a coincidere con il particolare che attira il nostro interesse, selezionato in precedenza dal sistema attentivo che guida i movimenti dello sguardo. È il cervello che infine realizza la visione, dando significato e ricostruendo le informazioni visualizzate in visione foveale.

I movimenti oculari possono essere dettati dalla volontà di guardare qualcosa e quindi di porvi attenzione. Vi possono essere anche movimenti evocati da caratteristiche dell’ambiente e del campo di stimolazione visiva indipendenti dalla volontà dell’osservatore: questi vengono definiti movimenti automatici o involontari.

Mediante un moderno Eye-Tracker, non invasivo e ad alta frequenza, è possibile registrare i movimenti oculari ed i comportamenti esplorativi (click, etc.) dei sogetti impegnati nell’interazione con un sito internet.

Nessuna altra metodologia produce risultati oggettivi e riproducibili come l’Eye-Tracking e, in più, l’ Eye-Tracking è una metodologia di rilevazione di dati ad invasività zero.

I possibili campi di ricerca dei movimenti oculari sono vasti, da studi sulla visione, a ricerche di tipo ergonomico, dall’usabilità al marketing design fino all’implementazione di strumenti per persone con gravi problemi di disabilità.

u

54 [76]

SEGUE u

DESIGN

Analisi dell’usabilità delle interfacce uomo-macchina Lo scopo principale di questo campo di ricerca è valutare l’efficacia e l’efficienza del design di un’interfaccia Web, di un sistema operativo o un qualsiasi dispositivo interattivo o di controllo con l’obiettivo di rendere tali dispositivi il più possibile adeguati alle caratteristiche cognitive dell’uomo.

La misurazione di movimenti oculari permettere di avere una misura oggettiva di ciò che viene osservato ed il percorso visivo avvenuto durante l’esplorazione percettiva. L’interazione, analizzata attraverso gli occhi e ciò che questi osservano, permette di comprendere le motivazioni del comportamento dell’utente in modo preciso e robusto. L’Eye-Tracking può essere impiegato efficacemente in tutte le fasi dello User centered Design process: dall’analisi dei requisiti ai test di valutazione finale.

Per esempio, lo studio dei movimenti oculari ha sempre avuto un ruolo centrale nei simulatori di volo specialmente nella fase di progettazione delle cabine di pilotaggio degli aerei. Negli ultimi anni studi simili sono stati applicati anche nella progettazione dei comandi nel cruscotto delle automobili oppure per simulare particolari situazioni di guida al fine di capirne le caratteristiche e le possibili soluzioni di prevenzione di incidenti stradali.

Analisi di marketing sull’impatto visivo di campagne pubblicitarie e del packaging dei prodotti.

Lo scopo qui è verificare se importanti oggetti comunicativi, come possono essere il logo della azienda o il messaggio di un annuncio pubblicitario sono o meno in grado di attirare l’attenzione di chi sta osservando. La registrazione dei movimenti oculari dei soggetti impegnati nell’osservazione di un messaggio pubblicitario, permette di conoscere la reale attenzione e comprensione del messaggio da parte degli stessi.

Questo tipo di test può essere realizzato ogni volta che si desideri conoscere il contenuto dell’attività di decodifica operata dai soggetti, ovvero l’interpretazione del messaggio pubblicitario da parte del proprio target di riferimento.

SEGUE u SEGUE u

EYE TRACKING: CAMPI APPLICATIVI

55 [76]

DESIGN

Analisi dei processi di “way finding” e dei display In questo caso l’analisi viene fatta direttamente negli ambienti naturali o simulati attraverso la realtà virtuale.

Alcune ricerche invece simulano situazioni di pericolo, come un incendio, con lo scopo di monitorare quelle che sono le strategie d’osservazione durante la fuga per pianificare un efficace sistema di sicurezza.

Altri studi invece vengono utilizzati nell’ambito del marketing placing e valutano dove si tende a porre lo sguardo quando si cerca un particolare prodotto all’interno di un supermercato o di fronte alla vetrina di un negozio. In questo caso la metodologia dell’Eye-Tracking permette di misurare e visualizzare le risposte spontanee ed impulsive suscitate dall’ambiente e fornisce indicazioni sui processi e le modalità di esplorazione individuali. È quindi applicabile in diversi contesti commerciali per testare un monodisplay prodotto, l’efficacia dei mezzi di comunicazione e la percezione di un ambiente in tutte le sue componenti.

56 [76]

EYE TRACKING: CAMPI APPLICATIVI

SEGUE SEGUE u

DESIGN

Il sistema di registrazione dei movimenti oculari genera diversi tipi di output su cui si possono poi effettuare quindi diversi tipi di analisi: impatto visivo di spot pubblicitari, analisi di campagne advertising, indagini sull’efficacia dei display, studi sul packaging dei prodotti, etc.

La metodologia Eye-Tracking è di grande supporto per lo studio dell’usabilità di qualsiasi tipo di interfaccia: dai siti Web a sistemi digitali interattivi di qualsiasi genere come pannelli di comando di macchine ed elettrodomestici. Recentemente si stanno aprendo diverse aree di approfondimento nell’area di ricerca relativa allo studio del mental/cognitive work load.

Nei prossimi numeri di Usermatter(s) esploreremo nel dettaglio alcuni casi di studio di interfacce, RIA e siti Web analizzati con l’Eye-Tracking.

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.

scritto da

Silvia Gilotta silvia.gilotta@srlabs.it

FINE

57 [76]

AUTHORING&MULTIMEDIA I fondamentali di Photoshop: I Livelli di Gianni Russo - g.russo@alice.it

Dopo l’articolo pubblicato sul numero precedente di Usermatter(s) sui livelli di regolazione, mi sono arrivate tantissime e-mail con domande varie, la maggior parte delle quali evidenziava chiaramente la non completa conoscenza delle funzionalità delle palette livelli: ecco quindi quest’articolo, che sicuramente non sarà esaustivo, ma nel quale tratterò gli argomenti fondamentali che potranno essere approfonditi secondo le esigenze.

Innanzitutto la palette livelli, quella che ritengo essere la palette più importante in Photoshop, è da considerarsi il “centro di controllo” dal quale possiamo controllare tutti gli aspetti del nostro progetto. La palette livelli è, in definitiva, la nostra compagna di vita “photoshoppiana”, per cui è essenziale capirne bene il funzionamento.

Nell’immagine vediamo un esempio tipo di palette di livelli sulla quale sono stati contrassegnati da un numero progressivo tutti gli elementi a cui occorre prestare attenzione.

Impariamone subito i nomi e la funzionalità principale: 1) Collega livelli: selezionando due o più livelli è possibile collegarli fra loro in modo che possano essere spostati, trasformati ecc contemporaneamente; 2) Stili di livello: premendo questo pulsante si apre la finestra di dialogo stili di livello, attraverso la quale è possibile aggiungere ombre, tracce, bagliori ecc ai livelli; 3) Maschera di livello: questo pulsante aggiunge un’altra importantissima funzione di Photoshop, la maschera di livello. Se è già presente una maschera di livello la pressione di questo pulsante creerà una maschera vettoriale; 4) Livelli di regolazione: chi ha letto il numero precedente sicuramente è già a conoscenza della funzione di questo pulsante: tenendolo premuto potremo scegliere di applicare una regolazione che assumerà la forma di un livello separato apribile e modificabile in qualsiasi momento; 5) Crea gruppo: la pressione di questo pulsante raggruppa due o più livelli in un unico contenitore (occorre prima selezionare due o più livelli);

u

58 [76]

SEGUE u

AUTHORING&MULTIMEDIA

6) Nuovo livello: serve a creare un nuovo livello vuoto (trasparente); 7) Cestino: serve ad eliminare uno o più livelli. Può essere usato anche semplicemente trascinandovi sopra il livello da eliminare; 8) Riempimento: regola l’opacità del riempimento in presenza di uno stile di livello; in assenza di questo si comporta allo stesso modo dell’opacità; 9) Opacità: con questo cursore possiamo regolare la trasparenza del livello (da 0 a 100%); 10) Metodi di fusione: menu a discesa attraverso il quale scegliere il metodo di fusione appropriato per un dato livello; 11) Pulsante visibilità: il simbolo a forma di occhio sta proprio a evidenziare la funzione di questo pulsante: rendere visibile o invisibile un livello con un solo click; 12) Menu della palette livelli: questo è il menu specifico per la palette livelli, quello in cui troviamo anche dei comandi non raggiungibili altrimenti.

Ora che abbiamo preso in esame le funzionalità degli elementi della tavolozza dei livelli, viene da chiedersi: cosa sono, in realtà, i livelli?

Utilizzando una metafora che sarà ben nota a chi si occupa di animazione e illustrazione “cartacea”, possiamo pensare ai livelli come a fogli trasparenti utilizzati in combinazione a lavagne luminose: tanti fogli uno sull’altro (i livelli appunto) appoggiati su un piano (livello di sfondo). L’effetto visto per un osservatore dall’alto è di un’unica immagine, ma attraverso la palette livelli (che possiamo pensare come una sezione verticale della pila di fogli trasparenti) possiamo spostare, modificare ed eliminare qualsiasi elemento in qualsiasi momento.

Tornando all’aspetto pratico, sicuramente più efficace della teoria per capire bene il funzionamento, proviamo a prendere confidenza con i livelli. Una volta aperta un’immagine la palette livelli si presenta in maniera molto semplice: infatti avrà un solo livello, chiamato automaticamente “sfondo”. Generalmente consiglio sempre di duplicare il livello sfondo, in modo da avere sempre l’originale a portata di mano, non si sa mai...

Per duplicare lo sfondo (o qualsiasi altro livello) basta trascinarlo sull’icona nuovo livello (in figura contraddistinta dal numero 6) oppure semplicemente premere sulla tastiera CTRL + J. In questo modo avremo un esatto duplicato dell’immagine su cui poter lavorare.

I livelli (che non sono da non confondere con la regolazione livelli, tutt’altra cosa) hanno numerose proprietà, sulle quali sono stati scritti interi libri. Ci limiteremo per adesso a prenderne in considerazione alcune, sperando che questo articolo possa diventare una specie di vademecum dei livelli: Creare ed eliminare Creare un nuovo livelli è semplicissimo: basta ciccare sul simbolo apposito (6) e vedremo apparire nella palette livelli, sopra il livello attualmente selezionato, un nuovo livello trasparente; se teniamo premuto il tasto Ctrl mentre clicchiamo su “nuovo livello” questi apparirà sotto il livello attualmente selezionato; la scelta rapida per creare un nuovo livello è Ctrl + Alt + Shift + N. Per eliminare uno o più livelli basta selezionarli e trascinarli sul pulsante cestino (7).

SEGUE u SEGUE u

I fondamentali di Photoshop: I Livelli

59 [76]

AUTHORING&MULTIMEDIA

Selezionare e duplicare I livelli sono selezionabili con un semplice click nella palette livelli; per selezionare due o più livelli non adiacenti occorre tenere premuto il tasto Ctrl e poi ciccare sui livelli da selezionare; per selezionare, invece, due o più livelli adiacenti basta selezionare il primo e, tenendo premuto il tasto maiusc (shift) ciccare sull’ultimo livello.

Abbiamo già visto come duplicare un livello (Ctrl + J), mentre per duplicare due o più livelli contemporaneamente basta selezionarli e trascinarli sul pulsante crea nuovo livello (6).

Spostamento fra diversi documenti I livelli possono essere facilmente spostati, mediante trascinamento, fra diversi documenti. Basta, infatti, spostare il livello dalla palette livelli sull’immagine di destinazione e il gioco è fatto: se vogliamo che il nuovo livello si posizioni esattamente al centro basterà tenere premuto il tasto shift durante il trascinamento. Non ci sono limiti ovviamente al numero di livelli trascinabili.

Stili di livello Attraverso gli stili di livello (2) è possibile creare diversi effetti, tra questi sono molto utilizzati le ombre e i bagliori.

Una volta applicato uno stile di livello nella palette apparirà, alla destra del livello il simbolo fx (13) che sta a indicare proprio che a quel livello sono stati applicati uno o più stili di livello. Questi appariranno (solo nella versione CS3) subito sotto il livello (15). È possibile applicare lo stesso stile a due o più livelli in maniera davvero semplice: se abbiamo pochi livelli (due o tre al massimo) basta cliccare sul simbolo fx (13) a destra del livello e, tenendo premuto il tasto Alt, trascinarlo sul livello di destinazione; se non teniamo premuto il tasto Alt lo stile di livello verrà semplicemente spostato da un livello all’altro anziché copiato. Se abbiamo molti livelli allora è più conveniente procedere in questo modo. Selezioniamo il livello da cui copiare lo stile e, con il tasto destro del mouse, scegliamo “copia stile livello”; quindi selezioniamo i livelli sui quali vogliamo incollare lo stile e, sempre con il tasto destro del mouse, scegliamo “incolla stile livello”. Più semplice di così...

Anche gli stili di livello possono essere spostati da un documento all’altro, in questo caso, però, dobbiamo tenere presente che lo stile di livello sarà applicato al primo livello visibile nel documento di destinazione.

Lo strumento sposta Lo strumento principe nell’uso abbinato ai livelli è lo strumento sposta, attivabile con la pressione del tasto V. Con questo strumento, infatti, è possibile spostare, modificare, trascinare e selezionare i livelli. Quando attiviamo questo strumento, assicuriamoci che nella barra delle opzioni sia selezionato “selezione automatica”: questo ci permetterà di selezionare un livello semplicemente cliccando all’interno dell’immagine. Possiamo quindi spostarlo all’interno dello stesso documento oppure trascinarlo in un altro documento aperto (valgono le stesse regole viste prime per il trascinamento attraverso la palette livelli).

Con lo strumento sposta è possibile anche duplicare un livello semplicemente tenendo premuto il tasto Alt mentre trasciniamo. Attivando la funzione “Mostra controlli di trasformazione” nella barra delle opzioni, è possibile anche

60 [76]

I fondamentali di Photoshop: I Livelli

SEGUE u SEGUE u

AUTHORING&MULTIMEDIA

trasformare, ruotare, inclinare un livello semplicemente con lo strumento sposta. Attivando, infatti, i controlli di trasformazione, nell’immagine appariranno le cosiddette maniglie lungo i lati del livello: attraverso queste è possibile ridimensionare il livello (per mantenere le proporzioni trasformare tenendo premuto il tasto Shift) oppure ruotarlo spostando il cursore leggermente all’esterno del livello (questi si trasformerà in una doppia freccia curva).

Nel prossimo numero vedremo un altro elemento fondamentale di Photoshop, direttamente collegato ai livelli: le maschere di livello.

scritto da

Fotografo fin dal 1986, inizia nel 1993 a utilizzare Adobe Photoshop, oggi suo compagno di vita professionale. Attualmente si occupa di elaborazioni fotografiche digitali, impaginazioni e fotoritocco. Nel Febbraio 2007 ha ottenuto la certificazione di Adobe Certified Expert in Photoshop CS2. Parallelamente tiene corsi privati e pubblici su Photoshop e partecipa come master a seminari rivolti ai fotografi professionisti (Sposiamo il Digitale, il Simposium Castel Gandolfo Fotografia e altri). Da un anno collabora con Adobe User Group AugItaly e Adobesoftwares.com.

Gianni Russo g.russo@alice.it

FINE

61 [76]

AUTHORING&MULTIMEDIA Adobe Director 11: il grande ritorno! di Daniele Cerra - dan.cerra@gmail.com

Dalle continue evoluzione di Flash che, con la versione CS3 e l’introduzione di ActionScript 3.0, ha ulteriormente esteso le proprie potenzialità multimediali, sembrava dovesse derivare l’abbandono da parte di Adobe del progetto Director. L’annuncio di Director 11 e di una nuova versione di Shockwave Player ha così sorpreso non pochi sviluppatori di applicazioni multimediali.

Stando alle anticipazioni di Adobe, Director 11 costituirà un ambiente di sviluppo potente e flessibile che troverà applicazione in tre campi principali dell’authoring multimediale: la realizzazione di RIA, chioschi interattivi e supporti multimediali distribuibili lo sviluppo di giochi 2D e soprattutto 3D la pubblicazione di simulazioni e contenuti adatti all’e-learning La differenziazione dei prodotti Director 11 e Flash CS3, che a onor del vero hanno delle zone di sovrapposizione non trascurabili, è stata evidenziata dalla stessa Adobe grazie a una tabella riassuntiva degli ambiti di applicazione dei due software:

(la versione aggiornata è consultabile all’indirizzo http://www.adobe.com/products/director/compare/) Dando una rapida occhiata alla tabella si percepisce come Director 11 colmi alcune delle lacune ancora presenti in Flash soprattutto per quanto riguarda lo sviluppo e la gestione di applicazioni con elementi grafici tridimensionali e il supporto di formati di file multimediali (video, immagini e audio) diffusi nel mondo dell’authoring multimediale non legato al Web.

u

62 [76]

SEGUE u

AUTHORING&MULTIMEDIA

Un’altra sostanziale differenza consiste nella compatibilità di Director 11 con il linguaggio JavaScript che rende di fatto accessibile la programmazione di soluzioni complesse anche a chi non ha dimestichezza con Lingo o ActionScript.

Detto questo, non si può non apprezzare gli sforzi che ha fatto Adobe per realizzare un prodotto davvero innovativo in grado di interpretare a 360 gradi le esigenze di comunicazione interattiva emerse in questi anni. Tra le molte novità introdotte in Director 11 spicca l’ampio supporto nativo di formati multimediali standard tra cui l’SWF, il DVD video, Windows Media, QuickTime 7 e RealMedia, caratteristiche indispensabile per la realizzazione di applicazioni interattive in grado di riutilizzare contenuti già prodotti.

Altrettanto importante è la rivisitazione dell’ambiente di authoring che, oltre a comprendere il pieno supporto in stile Flash alla programmazione con Lingo o JavaScript (utilizzando la finestra di immissione del codice assistita e gli Snippet anche chi non è esperto di programmazione può realizzare applicazioni interattive), ha rivisto l’interfaccia utente grazie a sistemi di gestione delle finestre più intuitivi.

Pur diversificandosi da Flash per diversi aspetti, la logica di integrazione e interoperabilità applicata da Adobe nella realizzazione della suite CS3 è stata adottata anche per Director.

Si ha quindi una piena integrazione con Photoshop CS3, Flash e l’intera gamma di altri prodotti CS3.

Parlando di standard e accessibilità, anche in questo campo Director 11 ha fatto passi da gigante, da un lato garantendo il rispetto delle linee guida dell’accessibilità della Sezione 508, dall’altro inserendo nel sistema di authoring un potente motore di sintesi vocale che non richiede agli destinatari dei supporti interattivi utilizzati la disponibilità di alcun software supplementare (per esempio i classici screen reader).

Per quanto riguarda la User Experience dei fruitori finali delle creazioni realizzate con Director 11, anche in questo campo c’è davvero molto da dire. Innanzi tutto, il supporto diretto al rendering 3D con DirectX 9 consente di ideare e sviluppare esperienze interattive assolutamente realistiche e immersive che, per esempio, possono costituire la base di giochi e simulazioni di alto impatto emotivo.

L’adozione di un motore per la fisica come AGEIA™ PhysX™ costituisce la ciliegina sulla torta per gli sviluppatori di giochi e simulazioni che prevedono la riproduzione di eventi realistici come la collisione di corpi o l’esercizio della gravità (alcuni video di esempio in cui viene applicata tale tecnologia sono disponibili all’indirizzo http://www.ageia.com/physx/tech_demos.html)

SEGUE u SEGUE u

Adobe Director 11: il grande ritorno!

63 [76]

AUTHORING&MULTIMEDIA

Visto il già ottimo livello di realizzazioni Shockwave realizzate con le precedenti versioni di Director – software che ha segnato un solco indelebile nella storia del Web e dell’interaction design – c’è da scommettere che date le rinnovate potenzialità ben presto ci si trovi a vivere esperienze di comunicazione quanto mai immersive ed efficaci.

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

scritto da

Daniele Cerra dan.cerra@gmail.com

64 [76]

FINE

65 [76]

CREATIVE STUFF Kira Garfagnoli k.garfagnoli@comtaste.com

considerazioni consigli o banalità informazioni utili

CONSIDERAZIONI

GRAFICA&TECNOLOGIA

Parola chiave: interattività Di recente sono stata ad Amsterdam alla sezione europea della conferenza FITC, Design. Technology. Cool Shit. Ho partecipato a seminari di ogni genere per 8 ore al giorno e alla fine mi sono resa conto che praticamente tutti avevano un filo conduttore: l’interattività. Sia che fossero presentazioni di lavori in 3d, animazioni flash, siti web, installazioni video c’era sempre un’attenzione particolare alla necessità dell’utente di interagire con il prodotto finale.

A tutti piace cliccare ovunque sullo schermo quando troviamo dei tasti che indicano che qualcosa sta per accadere, allo stesso modo vorremmo poter toccare un quadro, una scultura o muovere gli elementi di un’ installazione all’interno di una galleria. Tutti noi vogliamo interagire, vogliamo più azione... questo è il punto. Quando lavoriamo su un progetto dobbiamo considerare il fatto che i potenziali fruitori probabilmente vorranno poter utilizzare il prodotto che Sia se stiamo visitando un sito nella hanno davanti, dobbiamo tenere presente la necessità che lo Rete, sia se stiamo guardando una trovino interessante, accattivante, per questo motivo è ormai quasi mostra in un museo, la cosa più d’obbligo realizzare interfacce piacevoli alla vista anche quando importante per noi oggi è interagire seguiamo alla lettera tutte le regole di usabilità, accessibilità e via dicendo. con ciò che ci circonda La nostra è l’era della tecnologia, tutto cambia in modo rapido e le nostre menti vengono ripetutamente stimolate da milioni di immagini, video e suoni, oggi non è facile catturare l’attenzione di qualcuno in modo efficace per indurlo a utilizzare uno dei nostri servizi o prodotti, e non credo che la situazione andrà migliorando in futuro. Ecco perchè designer e sviluppatori sono sempre alla ricerca di qualcosa di nuovo per sorprendere le persone.

Questa ricerca ha portato a risultati interessanti, ho avuto modo di vedere molti esempi in diverse occasioni alla FITC, il codice ormai viene utilizzato per creare sorprendenti effetti speciali, interfacce tridimensionali e siti web interattivi in ogni pixel. Ho parlato in uno dei miei articoli precedenti di Processing e del suo utilizzo, in diverse di sessioni ho avuto modo di vederne le applicazioni, web designers e/o artisti come Joshua Davis e Erik Natzke hanno usato il codice per creare delle vere e proprie opere d’arte, alcune delle quali con cui l’utente stesso poteva divertirsi a giocare. Hanno trovato il modo di trasformare lettere e numeri (oltre che immagini) in quadri dinamici, ed è stato interessante scoprire come sono arrivati in modo molto naturale a scrivere righe di codice per ottenere quei risultati. Ovviamente se non si è portati per la programmazione può essere difficile scegliere questa strada per creare dipinti virtuali, ma se si ha la stoffa per “miscelare” sviluppo e design i risultati possono essere notevoli.

A proposito di interfacce tridimensionali interessanti vi consiglio di dare uno sguardo al lavoro di Carlos Ulloa fatto con Papervision3D per Sony Bravia, qualcosa di davvero differente per gli utenti. Il tipo di interattività che puoi avere con uno spazio tridimensionale anche se confinato in uno schermo è sorprendente, ci si muove su diversi livelli per accedere alle informazioni che possono essere testi, immagini o video. Il mondo 3D si sta finalmente espandendo in più settori, e programmi come Maya sono usati da alcuni creativi, come ad esempio GMunk, per realizzare effetti speciali in campagne adv video per il web. Altri esempi di programmazione e design uniti per creare interazione con l’utente, li troviamo nei lavori di Remon Tijssen che realizza per lo più giochi in flash molto divertenti. Ma l’interattività e la dinamicità ormai non sono solo presenti in lavori destinati al monitor, come hanno mostrato grosse aziende come Imaginary Forces, Bigspaceship o designer come Nikolai Cornell, questa scelta di far muovere le cose intorno a noi e renderle utilizzabili è spesso portata avanti nelle gallerie o nelle presentazioni di prodotti come una macchina in un ampio spazio. Per non parlare del fatto che alcuni architetti hanno unito alle proprie strutture elementi interattivi o anche semplici video come decorazioni futuristiche. Pareti che cambiano colore a seconda del clima, porte di ingresso che diventano schermi interattivi, stadi che si illuminano del colore della squadra che gioca

66 [76]

considerazioni consigli o banalità informazioni utili

Kira Garfagnoli k.garfagnoli@comtaste.com

CREATIVE STUFF

in casa non sono più immagini di un film come Ritorno al futuro. Le strutture intorno a noi possono essere parte della nostra quotidianità non solo perchè sono scuole, uffici, case o bar, ma anche perchè oggi possiamo integrare pixel con vetro, legno e ogni tipo di materiale per farle interagire con noi e renderle ancora più utili. Pur essendo il mondo digitale, il web design, il video design, la programmazione e il 3d argomenti predominanti alla conferenza, si è parlato molto anche della comunicazione in generale e dell’approccio nel design in qualsiasi campo e con qualsiasi mezzo. In questo caso le parole chiave sono state: semplicità, osservazione dei dettagli, condivisone delle idee, sperimentazione, passione. Concordo pienamente con Aral Balkan quando dice che i software sono solo degli strumenti come i pennelli per il pittore e che dovremmo guardarci sempre intorno per vedere come cambiano le cose e provare diversi servizi o prodotti per capire meglio il mercato in cui lavoriamo. Farsi e fare le giuste domande mentre si lavora ad un progetto per una mente creativa è fondamentale, Robert L. Peters suggerisce di chiedersi sempre: come, perchè, cosa, per chi, quando e dove. Possono sembrare delle indicazioni banali, ma non lo sono affatto se pensiamo che quello che facciamo è visibile a persone in luoghi e tempi diversi, che siamo parte di un vasto mondo pieno di diversi modi di vivere, culture e comportamenti, noi siamo il più delle volte responsabili del tipo di lavoro che presentiamo al prossimo.

Ad ogni modo tutti gli speaker della FITC erano d’accordo su un punto: il vero segreto del successo è lavorare duro o, work like hell, se preferite!:)

INFORMAZIONI UTILI Siti Carlos Ulloa: http://bravia.sony.eu/bravia.html http://www.gmunk.com/2001_NYC_update/ Remon Tijssen: http://www.fluid.nl/ http://www.joshuadavis.com/ http://www.natzke.com/ http://www.imaginaryforces.com/ http://www.bigspaceship.com/ Nikolai Cornell: http://www.madein.la/ http://www.aralbalkan.com/ Robert L.Peters: http://www.icograda.org/

Illustratrice, pittrice, decoratrice, grafica, web designer, ha una passione per la comunicazione in tutte le sue

scritto da

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.

Kira Garfagnoli k.garfagnoli@comtaste.com

67 [76]

blog.comtaste.com

FROM BLOG TO BLOG

Dagli esperti di COMTASTE

How to avoid multiple per-user sessions in Tomcat/JBoss Usually, in our rich internet application, a user with a registered account can do two different logins from two different workstations and can maintain two concurrent sessions opened. In some applications we want to limit the users to one session per account, so we have to take countermeasures.

A simple method to check if a user is logged is to set a property in the current HttpSession; in this example in our login function we set

session.setAttribute(“username”, username);

If there is no username attribute, we will return an error to the user.

When someone starts a session with his account we have to check if there is already a session opened with that account. We can use an HashMap using the username as key and the session as value; obviously we have to use the same hashmap across multiple logins.

A very fast and simple solution is to create a singleton that exposes operations on our hashmap:

public class MySessionManager { private HashMap hashMap; public boolean exist(String username) { if(hashMap.containsKey(username)) { return true; } return false;

}

public boolean addSession(HttpSession session) { if(hashMap.containsKey(session.getAttribute(“username”))) { return false; } hashMap.put((YouthruCorpPrincipal)session.getAttribute(“username”), session); return true; } public HttpSession getSession(String username) { return hashMap.get(username); }

68 [76]

public boolean removeSession(String username) { if(!hashMap.containsKey(username)) { return false; } hashMap.remove(username); return true;

}

private static MySessionManager instance;

blog.comtaste.com

FROM BLOG TO BLOG

public static MySessionManager getInstance() { if(instance == null) instance = new MySessionManager(); return instance;

}

public MySessionManager() { hashMap = new HashMap(); } }

In our login function we have to check the existence of a previously created session with the same username, in that case we can logout the user associated with that session: if(MySessionManager.getInstance.exist(username)) { logout(MySessionManager.getInstance.getSession(username)); MySessionManager.getInstance.removeSession(username); }

In this case the logout function takes as argument a session and log out from our application the user associated with that session, then we can do our login routine and at add the current session to the hashmap.

In this example we are checking only for sessions with a username attached, if we want to do some operation every time a session is created/destroyed, we can implement the HttpSessionListener interface: http://tomcat.apache.org/.../http/HttpSessionListener.html Classes that implement this interface will be notified of session creation and destruction using the respective functions: void sessionCreated(HttpSessionEvent se) void sessionDestroyed(HttpSessionEvent se)

69 [76]

FROM BLOG TO BLOG

To receive notification events, the implementation class must be configured in the deployment descriptor for the web application; for example:

<web-app version=”2.4” xmlns=”http://java.sun.com/xml/ns/j2ee” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ ns/j2ee/web-app_2_4.xsd”> <listener> <listener-class> myapp.security.MySessionListener </listener-class> </listener> </web-app>

Posted by Emanuele Tatti, RIA Developer - Comtaste on 28 Gennaio 2008 5:58 PM

Ingegnere informatico con competenze in Flex, Livecycle Data Services, BlazeDS e Java per la

scritto da

realizzazione di applicazioni aziendali. Ha lavorato su diversi progetti, molti dei quali legati al settore finanziario. Fa parte del team di Comtaste ed è responsabile del progetto YouThruBiz (www.youthru.biz), una rich internet application dedicata alla selezione del personale nelle aziende che utilizzata strumenti innovativi come interviste e curriculum multimediali.

Emanuele Tatti e.tatti@comtaste.com

70 [76]

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

71 [76]

blog.augitaly.com

FROM BLOG TO BLOG

blogosphere

Flash Media Server 3 annunciato da

4500 dollari per la versione con connessioni

Adobe

illimitate del Flash Media Interactive Server.

Fonte: http://blog.augitaly.com/2007/12/flash_media_ server_3_annunciat.html

E’ stato oggi annunciato da Adobe la nuova versione del Flash Media Server 3. Delle novità del Flash Media Server 3 abbiamo già parlato in passati post su AUGItaly ma vi preannuncio che a breve dedicheremo uno speciale con una serie di posts per conoscere più in profondità le nuove features del server per lo streaming video di casa Adobe.

Una grossa novità risiede anche nel cambiamento del modello di Licensing del Flash Media Server 3 che Adobe ha voluto finalmente rendere più immediato e semplice.

Questo modello di licenze è un enorme passo in avanti rispetto alla versione precedente del Flash Media Server 2.

Adesso con meno di 1000 euro è possibile creare Rich Internet Applications che utilizzano streaming video ed audio per il web con Flash e Flex, per il desktop con Adobe AIR e per i dispositivi mobili con il Flash Lite 3.

Cos’altro si può desiderare ;) Marco Casario - blog.augitaly.com

Adobe Photoshop Express in Flex Fonte: http://blog.augitaly.com/2008/03/adobe_ photoshop_express_in_fle.html

Flash Media Server 3 uscirà infatti in due

Photoshop va online grazie a Flex. Adobe ha

differenti versioni : il Flash Media Streaming

oggi rilasciato la beta pubblica di Adobe

Server 3 per fare live e on- demand video

Photoshop Express, una Rich Internet

streaming, ed il Flash Media Interactive Server

Application realizzata in Flex che permette di

3 per creare applicazioni di streaming

visualizzare, conservare e salvare le proprie

scalabili.

immagini sul web.

I prezzi saranno : 995 dollari USD per la

Tra le features che espone l’applicazione c’è

avere una versione con connessioni illimitate

anche la possibilità di applicare dei filtri e di

del Flash Media Streaming Server 3 mentre

modificare alcuni parametri dell’immagine ! A

72 [76]

FROM BLOG TO BLOG

Adobe Creative Game: inizia oggi la

network tipo Facebook, Photobucket, Picasa e

sfida per i creativi

Flickr. E anche una versione in AIR per il

Fonte: http://blog.augitaly.com/2008/03/adobe_

desktop.

creative_game_inizia_ogg_1.html

Marco Casario - blog.augitaly.com

Jabber Client Fonte: http://blog.augitaly.com/2008/03/jabber_ client.html

E’ iniziato oggi Adobe Creative Game, un’iniziativa che mette in palio un MacBook

blog.augitaly.com

breve ci saranno integrazioni con social

Air, CS3 Master Collection e Design Premium, una Canon EOS 450D kit con obiettivo, Photoshop CS3, iPod Touch e iPod Nano. Il gioco, voluto da Adobe Italia e

Jabber è uno standard aperto per realizzare

realizzato in Flash, mette alla prova la

applicazioni di istant messaging che si basa

conoscenza dei programmi Adobe e la

su una versione commerciale. Il server offre

prontezza nel trovare le risposte.

tutte le caratteristiche di prodotti costosi come

Per chi si sa districare tra palette, font e

la gestione della sicurezza, un protocollo

combinazioni di colori, non sarà difficile

supportato da numerose librerie, è flessibile

superare le prove iniziali. Per rispondere alle

ed estendibile il che ha aumetnato nel tempo

domande e guadagnare punti in classifica, si

il software sia client che server disponibile. In

può giocare da soli contro il computer o

questo post vi segnalo che è disponibile

sfidare gli altri concorrenti, con cui è

anche una libreria in ActionScript 3.0 per

possibile anche chattare.

crare client in flash e Flex di IM. http://www.jabber.org/what-is-jabber

Per raccogliere subito la sfida e partecipare

http://www.jabber.org/clients

al concorso:

http://www.jabber.org/servers

http://www.adobecreativegame.com

http://www.jabber.org/libraries http://velloff.com/XIFF_AS3/XIFF_AS3_GUI.html

Giovanni Antico - blog.augitaly.com

Gianfranco Torlone - blog.augitaly.com

73 [76]

BIT WATCHING Actionscript 3.0 - Design Patterns Autore: William Sanders & Chandima Cumaranatunge Editore: Friends of Ed Pagine: 532 Giudizio: Buono Chi afferma che la programmazione serve solo alla creazione di applicazioni quindi poco e niente per tutto quello che riguarda grafica e/o animazioni, con questo testo dovrà ricredersi.

La campagna di divulgazione di Actionscript 3.0 che stiamo portando avanti, passa anche per questo importante testo.

Attraverso il loro libri, gli autori dimostrano ampiamente come Actionscript sia un valido supporto per la gestione di animazioni (non pochi sono gli esempi contenuti al suo interno su creazioni di video giochi elementari e simili). Un esempio molto simpatico è proprio la creazione di un varsione semplificata di “Space Impact”.

E’ altrettanto vero tuttavia che i codici e gli esempi non sono proprio per neofiti o grafici/sviluppatori alle prime armi. Consapevoli di questo, una buona parte iniziale del testo è rivolta ad introdurre il lettore alla programmazione ad oggetti con Actionscript 3, partendo dalle basi, sino ad argomenti più complessi. I “pattern” vengono qui analizzati in lungo e largo: come costruirli, come gestirli, quindi come renderli “scalabili” ed adattabili ad ogni esigenza. Come ormai la O’Really ci ha abituati, gli esempi di codice sono sempre accompagnati da una ampia spiegazione, fugando così ogni rischio di confusione o ambiguità. Un testo tutto sommato da cosigliare sia a grafici (che vogliano potenziare i propri lavori) sia agli sviluppatori che intendono “buttare un occhio in più” alla parte “estetica” e non solo di mero sviluppo. Di seguito vi rimandiamo la scaletta del testo in esame: Chapter Chapter Chapter Chapter Chapter Chapter Chapter Chapter Chapter Chapter Chapter Chapter Chapter

74 [76]

1: OOP, Design Patterns, and Actionscript 3 2: Factory Method Patterns 3: Singleton Pattern 4: Decorator Pattern 5: Adapter Pattern 6: Composite Pattern 7: Command Pattern 8: Observer Pattern 9: Template Method Pattern 10: State Design Pattern 11: Strategy Pattern 12: Model-View-Controller Pattern 13: Symmetric Proxy Pattern

75 [76]