1 [76]
GIUGNO - LUGLIO 2008
DEVELOPING
7. Custom Scrollbar con Javascript di Michele Bertoli
AUTHORING&MULTIMEDIA
59. Suite Corel Draw X4 di Daniele Cerra
7. Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet: tre soluzioni tipiche di Nicola Laino
11. ADOBE AIR e SQL
tutorial di implementazione rapida
Creative St uff 63. Light painting di Kira Garfagnoli
di Fabio Biondi
27. ADOBE AIR e SQL
approfondimento con basi teoriche di Matteo Ronchi
DESIGN
35. AVATAR
di Stefano Lazzari
39. Ripensare lo spazio di lavoro: il bisogno di mobilità
di Andrea Pesoli e Isabella Gandini
FROM BLOG TO BLOG
67. Dagli esperti di Comtaste autore del post Francesco Rapanà
70. Blogosphere BIT WATCHING
81. Actionscript 3.0 - The Bible
43. Second Life experience parte 3 di Alessandro Bordicchia
53. Eye tracking: analisi dell’interazione con www.youtube.com - parte 2
di Silvia Gilotta e Raffaella Calligher
49. Didattica 2.0: l’utente al centro
dell’esperienza di apprendimento di Francesco Federico
49. Gli aspetti sociali dell’Information Visualization
di Daniele Galiffa
2 [76]
gli autori di questo mese
Michele Bertoli
Fabio Biondi
michele@havana7.com
info@fabiobiondi.com
Studente all’università Cattolica del Sacro
Adobe Flash/Flex Developer dal 2002, realizza siti web dinamici e rich internet application. Ottenuta nel 2004 la certificazione Flash Developer, dal 2007 è Adobe Flash Certified Instructor. Inoltre sviluppa e coordina progetti che fanno uso delle più recenti tecnologie Adobe complementari a Flash, come Flex, FlashLite, Air e Flash Media Server. Membro fondatore dell’Adobe UserGroup (AUG) Actionscript.it, ora fa parte dell’AUG Augitaly. com. Attualmente lavora presso la Web agency Fishouse di Castelfranco Veneto (TV).
Cuore con 5 anni di esperienza alle spalle nello sviluppo di software gestionali multipiattaforma. Ama progettare e realizzare servizi Web 2.0, imparare nuove tecniche di programmazione e cimentarsi nella sperimentazione di sistemi di comunicazione evoluti come i social network.
Nicola Laino
Matteo Ronchi
info@laino.it.
m.ronchi@cef62.com
Si occupa prevalentemente dello sviluppo di
Dopo un passato da montatore video e
soluzioni web based per una nota società di
modellatore 3D, ha iniziato a conoscere
telecomunicazioni. Da qualche anno si dedica
il mondo dei contenuti multimediali e ad
alle RIA e, in particolare, al framework Flex,
appassionarsene grazie a Macromedia
che sta adoperando con un certo profitto in
Director. Da qui il passo verso la
diversi casi.
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.
3 [76]
Stefano Lazzari
Andrea Pesoli
stefano.lazzari@gmail.com http://stexauer.blogspot.com/
andrea.pesoli@polimi.it
ICT specialist, da circa 15 anni si occupa di media digitali, dai primi processi di archiviazione e gestione dei contenuti al management di progetti web alla realizzazione di soluzioni di comunicazione in Second Life. Dal 2003 é ICT specialist per MGM Digital Communication dove ha collaborato alla realizzazione di eventi e Manifestazioni di cultura digitale. Come Formatore progetta e realizzato corsi, workshop e seminari per lo IED (Istituto Europeo di Design), per la Scuola Superiore Commercio Turismo Servizi e Professioni e per il Centro Formazione Manager del Terziario. È docente presso la Scuola Politecnica di Design. È tra i fondatori del More Than Zero Festival.
School of Management del Politecnico di
Ingegnere Gestionale e Ricercatore della Milano. È impegnato da più di due anni in diversi progetti di Ricerca legati a Web 2.0, Enterprise 2.0, Mobility, Consumerization e User Centered Intranet. Ha inoltre seguito diversi progetti di Intranet Assessment per alcune delle principali imprese italiane. http://www.linkedin.com/in/andreapesoli.
gli autori di questo mese
Isabella Gandini
Alessandro Bordicchia
isabella.gandini@polimi.it
a.bordicchia@thecode.it
Ricercatrice della School of Management
Una formazione divisa tra gli studi di
del Politecnico di Milano da quasi 10 anni.
architettura, design e di ergonomia cognitiva,
È attualmente responsabile dell’area
dal 1999 ad oggi opera in diversi settori
Business2Employee che comprende diversi
nell’ambito della comunicazione visiva. Da
Osservatori, tra cui Enterprise 2.0, Intranet
cinque anni a questa parte si interessa delle
nelle Banche e ICT accessibile e disabilità.
problematiche legate alla progettazione di
Negli anni ha inoltre seguito diversi progetti
interfacce utente, collaborando attualmente
di Intranet Assessment per alcune delle
con maison,the (gruppo Visiant). Da circa
principali imprese italiane.
due anni si occupa di progetti legati ai mondi virtuali collaborando con 2ndK, recentemente entrata a far parte del gruppo Visiant.
Silvia Gilotta
Raffaella Calligher
silvia.gilotta@srlabs.it
raffaella.calligher@srlabs.it
Laureata in Psicologia del Lavoro e delle Organizzazioni con la tesi in Ergonomia focalizzata sulla progettazione di esperienze utente basate sull’User Centred Design e con un Master di I livello in Ergonomia presso il COREP di Torino, ha iniziato nel 2006 la collaborazione con SrLabs s.r.l. di Milano come responsabile del settore “eye-tracking research and scientific instruments”. A ottobre 2006 ha vinto il concorso per il Dottorato di Ricerca in Psicologia Applicata ed Ergonomia (XXII ciclo) presso l’Università degli Studi di Torino.
Laureata in Psicologia dello sviluppo e della comunicazione con tesi in Psicologia della comunicazione e dei nuovi media, incentrata sull’usabilità dell’interazione con siti web strumentali, web, è approdata nel 2007 alla Srlabs s.r.l. di Milano proprio per sviluppare il proprio lavoro di tesi. Il rapporto lavorativo continua, come il suo interesse per il mondo della HCI e dell’User Centred Design, oltre che per la psicologia cognitiva in generale. Attualmente sta svolgendo il tirocinio postlaurea, occupandosi di alcuni progetti in ambito psicologico e di usabilità.
Francesco Federico
Daniele Galiffa
francesco.federico@gingercraft.biz
daniele@mentegrafica.it
Imprenditore e blogger che ama definirsi
Daniele Galiffa, classe 1980, è
Innovation Producer perchè capace
consulente per il progetto e lo sviluppo
di sintetizzare le sue conoscenze in
di soluzioni di UserExperience ed
ambiti diversi, generando idee nuove
InformationVisualization, curandonela
e trasformandole in realtà. Partner
divulgazione sul blog mentegrafica.it.
di GingerCraft, società specializzata
Presidente di VISup srl (www.visup.
nello sviluppo di strategie di marketing
it), in passato si è occupato di fare
crossmediale, nella quale si occupa di
ricerca, progetto e sviluppo nei
Project Management e R&D nell’ambito
campi dell’e-learning, dell’Infovis, del
mobile, Web 2.0 e Second Life. Collabora,
Knowledge Management, delle RIA e
tra gli altri, con Appunti Digitali (blog di
dell’OnLineCollaboration.
HWUpgrade) e Webnews.
4 [76]
gli autori di questo mese
Daniele Cerra
Kira Garfagnoli
dan.cerra@gmail.com
k.garfagnoli@comtaste.com
Da oltre 10 anni nel mondo della progettazione di sistemi di comunicazione multimediale e interattiva, si dedica attualmente alla progettazione di social network, business community siti e intranet 2.0. Parallelamente svolge attività giornalistica per numerose testate, blogga e insegna comunicazione, webmarketing e giornalismo multimediale in master post universitari. http://www.linkedin.com/in/cerradaniele.
Illustratrice, pittrice, decoratrice, grafica, 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.
Francesco Rapanà f.rapana@comtaste.com Laureando in Ingegneria informatica, si è specializzato nello sviluppo di applicazioni Web 2.0 attraverso l’uso di tecnologie quali Ajax e Zend. Appassionato delle ultime novità tecnologiche si è occupato di esplorare le possibilità di interazione tra Ajax e Flex e l’ integrazione di Google Maps con basi di dati per ottenere una migliore user experience. E’ RIA Developer di Comtaste.
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]
dalla redazione
Arriva l’estate e anche Usermatter(s) va in vacanza. La redazione e gli autori si prendono qualche settimana di riposo non prima però di aver contribuito alla realizzazione di un numero ricco di contenuti che, speriamo, possano risultarvi utili e interessanti. Certo, sotto l’ombrellone il successo della Settimana Enigmistica è difficilmente uguagliabile, tuttavia per chi non volesse perdere l’occasione di aggiornarsi leggendo gli articoli tecnici della sezione Developement o approfondire temi progettuali all’avanguardia come quelli della sezione Design, Usermatter(s) potrà essere un amico discreto ma “sempre pronto” a offrire spunti di qualità. Una rivista da portare sempre con sé sia come stampa cartacea ottenuta dalla versione elettronica, sia direttamente in PDF, magari salvato nella memoria di un palmare o un telefonino “intelligente”. Per i fortunati possessori di un iPhone, la versione on-line è a portata di... Safari! Concludo con l’augurio di una buona lettura e con il consueto ringraziamento agli autori che hanno condiviso con tutti i lettori di Usermatter(s) le proprie competenze. Daniele Cerra Coordinatore editoriale
6 [76]
DEVELOPING
web 2.0
Custom Scrollbar con Javascript di Michele Bertoli - michele@havana7.com
Quando si progetta un’interfaccia utente è necessario non lasciare nulla al caso. Soprattutto nell’eventualità in cui l’applicazione nasca con l’obiettivo di offrire un’esperienza appagante, creativa ed omogenea. Uno degli elementi che spesso può cozzare con queste prerogative è la scrollbar. La barra di scorrimento, infatti, varia da browser a browser e non sempre ci è dato di gestirne l’aspetto. Internet Explorer mette a disposizione delle direttive CSS che permettono agli sviluppatori di modificare, in parte, le caratteristiche della scrollbar, ma il codice è mono-applicazione e poco elegante. Se volessimo ad esempio costruire una barra di scorrimento perfettamente integrata con l’interfaccia, come nel caso della pagina dei prodotti Apple, dovremmo necessariamente appoggiarci a javascript.
Il concetto che sta alla base di una scrollbar di questo genere è banale, ma non del tutto ovvio: si tratta di spostare i contenuti in eccesso in base ai movimenti di un elemento draggabile che funge da slider, calcolandone di volta in volta la posizione in base ad alcune proporzioni. In questo articolo vedremo come costruire una custom scrollbar verticale con jQuery http://jquery.com/ ed alcuni moduli di jQuery UI http://ui.jquery.com/. L’intento è quello di presentare il lavoro in via generale in modo che l’applicativo possa adattarsi completamente al contesto in cui sarà inserito. L’obiettivo iniziale consiste nel costruire una struttura simile al modello seguente.
7 [76]
SEGUE u
DEVELOPING
Il tutto può essere rappresento dal markup sottostante. <div id=”textbox”> <div id=”text”></div> </div> <div id=”sliderbox”> <div id=”slider”></div> </div>
Le componenti della struttura sono un elemento text che conterrà del testo o un qualsivoglia contenuto, un contenitore per il suddetto elemento (textbox), uno sliderbox che funge da track per la barra di scorrimento e lo slider vero e proprio. Ora diamo uno sguardo al codice CSS minimo necessario per una buona riuscita del progetto, una parte delle dichiarazioni è stata volutamente omessa allo scopo di lasciare piena libertà agli sviluppatori. Ad esempio è possibile utilizzare immagini per lo slider, in stile Apple. div#textbox { overflow:auto; position:relative; } div#text { position:absolute; } div#sliderbox { display:none; }
In sostanza si tratta di gestire la position degli elementi text e textbox, nascondere la sliderbox e impostare su auto l’overflow del textbox in modo da assicurare, agli utenti che non abbiano javascript abilitato sul browser, l’accesso al testo con la barra di default. E’ giunto il momento di occuparsi di javascript. E’ necessario, innanzitutto, includere le seguenti librerie: jquery.js, ui.core.js e ui.draggable.js. Fatto ciò passiamo ad analizzare il semplice script. Sull’evento onload dobbiamo innanzitutto verificare che sia presente del testo in eccesso, altrimenti è del tutto inutile presentare la barra di scorrimento. $(function(){ if (($(“div#text”).height() - $(“div#textbox”).height()) > 0) {
In caso affermativo dobbiamo mostrare lo sliderbox e impostare a hidden la proprietà overflow del contenitore del testo. Così facendo il browser eviterà di applicare la barra di scorrimento di default al textbox.
SEGUE u
$(“div#textbox”).css(“overflow”, “hidden”); $(“div#sliderbox”).css(“display”, “block”);
Custom Scrollbar con Javascript
8 [76]
DEVELOPING Lo step successivo consiste nel calcolare un valore per l’attributo height dello slider, obiettivo che si concretizza mettendo in rapporto le altezze di text, textbox e sliderbox. Ovviamente maggiore sarà il testo in eccesso, minore l’altezza dello slider. var sliderHeight = ($(“div#textbox”).height() * $(“div#sliderbox”).height()) / $(“div#text”).height(); $(“div#slider”).height(sliderHeight);
Siamo ora giunti nel cuore dell’applicativo e cioè quella parte di script che rende draggabile, grazie al metodo draggable() di jQuery UI, il nostro slider. E’ necessario passare due parametri alla funzione. Il primo indica allo script di “bloccare” i movimenti dello slider all’interno dell’area del parent (l’elemento contenitore). È molto importante perciò che l’attributo width di slider e sliderbox coincida. Il secondo parametro ci permette di impostare una funzione da lanciare sull’evento drag causato dallo spostamento dello slider da parte dell’utente. Il codice da eseguire non fa altro che riposizionare il textbox, in base ai movimenti dello slider. La posizione del testo sarà inversamente proporzionale allo spostamento dello stesso. Andremo, infatti, a riscrivere l’attributo top dell’elemento text in base al rapporto che esiste tra lo spostamento e il testo in eccesso. $(“div#slider”).draggable({ containment: “parent”, drag: function(e, ui){ var textTop = (($(“div#text”).height() - $(“div#textbox”).height()) * ui.position.top) / ($(“div#sliderbox”).height() - sliderHeight ); $(“div#text”).css(“top”, textTop * -1 + “px”); } }); } });
Non rimane che assemblare il tutto, applicando lo stile che meglio si integra con la vostra applicazione, e offrire ai vostri utenti una custom scrollbar.
Studente all’università Cattolica del Sacro Cuore con 5 anni di esperienza alle spalle nello
scritto da
sviluppo di software gestionali multipiattaforma. Ama progettare e realizzare servizi Web 2.0, imparare nuove tecniche di programmazione e cimentarsi nella sperimentazione di sistemi di comunicazione evoluti come i social network.
Michele Bertoli michele@havana7.com
9 [76]
FINE
CORSI 2008 Flex 3 e Flex Builder 3: Sviluppare Rich Internet Application con le nuove Flex 3 SDK
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 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 10 [76]
DEVELOPING
Adobe FLEX
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet: tre soluzioni tipiche di Nicola Laino - info@laino.it
L’export di dati su file .XLS è una delle funzionalità più richieste nei progetti di web application. Nel corso degli anni sono state realizzate diverse librerie per facilitarne la creazione e noi ne impiegheremo due nel secondo e nel terzo esempio applicativo. Alcune di esse richiedono la presenza del programma Excel installato sul server ed altre DLL che consentono l’interazione tra la libreria e l’object model di Excel. Il vantaggio di queste soluzioni consiste nel formato del file prodotto che è quello nativo dell’applicazione. Excel, tuttavia, può aprire e gestire anche altri formati ed è proprio questa capacità ad essere frequentemente sfruttata nella maggior parte dei casi. In questo articolo ci occuperemo proprio delle soluzioni che non necessitano della presenza del programma. Tra i formati più usati uno è HTML ed è abbastanza facile – come è noto – mascherarlo salvando il file con l’estensione “xls”: con un doppio click su di esso Excel ne mostrerà prontamente il contenuto senza evidenziare particolari differenze rispetto al formato nativo. Cominciamo realizzando una semplice applicazione MXML contenente la DataGrid i cui dati vogliamo esportare <?xml version=”1.0” encoding=”iso-8859-1”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[ // Button click event handler private function bceh():void { var s:String = “”; for each (var o:Object in dg.dataProvider) { s += “<tr><td>” + o.A + “</td><td>” + o.B + “</td><td>” + o.C + “</td></tr>”; } var ur:URLRequest = new URLRequest(“myApp.aspx”); var uv:URLVariables = new URLVariables(); uv.grid = s; ur.data = uv; ur.method = URLRequestMethod.POST; navigateToURL(ur, “_self”); } ]]> </mx:Script> <mx:Panel width=”250” height=”166”> <mx:DataGrid id=”dg” width=”100%” rowCount=”4”> <mx:ArrayCollection> <mx:Object A=”1” B=”2” C=”3” /> <mx:Object A=”4” B=”5” C=”6” /> <mx:Object A=”7” B=”8” C=”9” /> </mx:ArrayCollection> </mx:DataGrid>
11 [76]
SEGUE u
DEVELOPING <mx:ControlBar> <mx:Spacer width=”100%” /> <mx:Button label=”Esporta” click=”bceh()” /> </mx:ControlBar> </mx:Panel> </mx:Application>
Al click sul pulsante “Esporta” un ciclo for raccoglie il contenuto di ogni cella della DataGrid e lo concatena in una stringa – tra comuni tag delle tabelle HTML, in modo da formare un blocco TBODY – che subito dopo verrà inviata ad una pagina .ASPX <%@ Page validateRequest=”False” %> <%@ Import Namespace=”System.Web” %> <script language=”C#” runat=”server”> private void Page_Load(object o, System.EventArgs ea) { StringBuilder sb = new StringBuilder(); sb.Append(“<html xmlns:x=\”urn:schemas-microsoft-com:office:excel\”><head>”); sb.Append(“<xml><x:ExcelWorksheet><x:WorksheetOptions><x:ProtectContents>False”); sb.Append(“</x:ProtectContents></x:WorksheetOptions></x:ExcelWorksheet></xml>”); sb.Append(“</head><body><table><tr><th>A</th><th>B</th><th>C</th></tr>”); sb.Append(Request.Form[“grid”]); sb.Append(“</table></body></html>”); Response.ContentType = “application/vnd.ms-excel”; Response.AddHeader(“content-disposition”, “attachment;filename=myGrid.xls”); Response.Write(sb.ToString()); } </script>
In questa pagina viene semplicemente completato il codice dello “spreadsheet” formato HTML. Prima di mandare in output il contenuto dello StringBuilder, però, abbiamo inserito due istruzioni chiave: il ContentType che presenta il MIME di un file Excel e l’header “content-disposition” che definisce come “attachment” ciò che viene inviato al client e ne specifica nome ed estensione. Un ultimo rilievo sul frammento XML nell’HEAD e il relativo namespace: servono, in generale, per definire delle opzioni per il worksheet, qui per ripristinare la visualizzazione della griglia. Compiliamo, carichiamo il file .SWF in un browser qualsiasi, facciamo click sul tasto “Esporta” e, dopo aver scelto “Salva su disco” nella finestra successiva, ancora click su tasto “OK”: dopo pochi istanti avremo il nostro “pseudo” . XLS
SEGUE u
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
12 [76]
DEVELOPING
Passiamo alla seconda soluzione. Questa volta l’applicazione Flex contiene due DataGrid <?xml version=”1.0” encoding=”iso-8859-1”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[ // Button click event handler private function bceh():void { var o:Object; var s:String = “<grid name=\”First\”>”; for each (o in dg1.dataProvider) { s += “<row><A>” + o.A + “</A><B>” + o.B + “</B><C>” + o.C + “</C></row>”; } s += “</grid><grid name=\”Second\”>”; for each (o in dg2.dataProvider) { s += “<row><D>” + o.D + “</D><E>” + o.E + “</E><F>” + o.F + “</F></row>”; } var ur:URLRequest = new URLRequest(“myApp.aspx”); var uv:URLVariables = new URLVariables(); uv.grids = s + “</grid>”; ur.data = uv; ur.method = URLRequestMethod.POST;
13 [76]
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
SE� u SEGUE
DEVELOPING navigateToURL(ur, “_self”); } ]]> </mx:Script> <mx:Panel width=”250” height=”262”> <mx:DataGrid id=”dg1” width=”100%” rowCount=”4”> <mx:ArrayCollection> <mx:Object A=”1” B=”2” C=”3” /> <mx:Object A=”4” B=”5” C=”6” /> <mx:Object A=”7” B=”8” C=”9” /> </mx:ArrayCollection> </mx:DataGrid> <mx:DataGrid id=”dg2” width=”100%” rowCount=”4”> <mx:ArrayCollection> <mx:Object D=”1” E=”2” F=”3” /> <mx:Object D=”4” E=”5” F=”6” /> <mx:Object D=”7” E=”8” F=”9” /> </mx:ArrayCollection> </mx:DataGrid> <mx:ControlBar> <mx:Spacer width=”100%” /> <mx:Button label=”Esporta” click=”bceh()” /> </mx:ControlBar> </mx:Panel> </mx:Application>
La stringa con i dati delle DataGrid inviata al file .ASPX in questa occasione contiene un markup differente: i tag HTML non servono più quindi adoperiamo una struttura utile alla logica dell’elaborazione successiva <%@ Page validateRequest=”False” %> <%@ Import Namespace=”System.Xml” %> <%@ Import Namespace=”CarlosAg.ExcelXmlWriter” %> <script language=”C#” runat=”server”> private void Page_Load(object o, System.EventArgs ea) { Workbook wb = new Workbook(); WorksheetStyle wst = wb.Styles.Add(“Default”); wst.Font.FontName = “Tahoma”; wst.Font.Size = 10; wst.Alignment.Horizontal = StyleHorizontalAlignment.Center; wst = wb.Styles.Add(“Head”); wst.Font.FontName = “Tahoma”; wst.Font.Bold = true; wst.Font.Color = “#FFFFFF”; wst.Interior.Color = “#808080”; wst.Interior.Pattern = StyleInteriorPattern.Solid;
SEGUE u
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
14 [76]
DEVELOPING Worksheet wsh; WorksheetRow wr; XmlDocument xd = new XmlDocument(); xd.LoadXml(String.Concat(“<grids>”, Request.Form[“grids”], “</grids>”)); foreach (XmlNode grid in xd.DocumentElement.ChildNodes) { wsh = wb.Worksheets.Add(grid.Attributes.Item(0).Value); foreach (XmlNode cell in grid.FirstChild.ChildNodes) { wsh.Table.Columns.Add(new WorksheetColumn(60)); } wr = wsh.Table.Rows.Add(); foreach (XmlNode cell in grid.FirstChild.ChildNodes) { wr.Cells.Add(new WorksheetCell(cell.Name, “Head”)); } foreach (XmlNode row in grid.ChildNodes) { wr = wsh.Table.Rows.Add(); foreach (XmlNode cell in row.ChildNodes) { wr.Cells.Add(cell.FirstChild.Value); } } } Response.ContentType = “application/vnd.ms-excel”; Response.AddHeader(“content-disposition”, “attachment;filename=myGrids.xls”); wb.Save(Response.OutputStream); } </script>
Il formato prodotto in questo secondo esempio è “Foglio di calcolo XML”: molto più versatile del precedente (si veda la XML Spreadsheet Reference: http://msdn.microsoft.com/en-us/library/aa140066(office.10).aspx). La creazione del file è affidata alla libreria free ExcelXmlWriter sviluppata da Carlos Aguilar Mares e scaricabile da http://www.carlosag.net/Tools/ExcelXmlWriter/ con la relativa documentazione (ricordo che la DLL va posta in una cartella “bin” nella root del sito). Per sommi capi: dopo aver istanziato l’oggetto principale Workbook definiamo prima lo stile predefinito per tutte le celle e poi quello che impiegheremo nelle intestazioni, quindi carichiamo il frammento XML proveniente dall’applicazione Flex in un parser (XmlDocument) e con dei cicli foreach ne attraversiamo la struttura per raccogliere i dati che adopereremo immediatamente dopo nei metodi degli oggetti contenuti nella library. I nomi di questi oggetti sono abbastanza esplicativi ed è facile dedurre qual è la loro funzione (in ogni caso il file .CHM della guida ne documenta ogni aspetto). L’ultima istruzione salva l’esito dell’elaborazione nell’OutputStream. Compiliamo e verifichiamo l’esito dell’esportazione
15 [76]
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
SE� u SEGUE
DEVELOPING
Nel terzo ed ultimo caso prendiamo in esame le funzionalità di una libreria realizzata in AS3 che consente di esportare un file .XLS binario: AS3XLS (http://code.google.com/p/as3xls/). L’autore della library, Manuel WudkaRobles, ci mette sull’avviso circa i limiti della sua realizzazione: Currently as3xls saves spreadsheets in the format used by Excel 2 which supports only one sheet per document. Ciò nonostante il lavoro di Manuel può rivelarsi una risorsa preziosa quando abbiamo la necessità di produrre un file binario e non possiamo contare sulla presenza del programma Excel sul server (o non vogliamo acquistare una costosa libreria ad hoc per un semplice progetto che mai ci ripagherà della spesa: AS3XLS è free…). Inoltre la soluzione del giovane developer di Claremont è ancora in divenire (perlomeno questo lascia pensare il TODO): magari a breve avremo una library con nuove ed interessanti features… Nel frattempo sfruttiamo quello che c’è <?xml version=”1.0” encoding=”iso-8859-1”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[ import com.as3xls.xls.Sheet;
SEGUE u
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
16 [76]
DEVELOPING import com.as3xls.xls.ExcelFile; // Button click event handler private function bceh():void { var ef:ExcelFile = new ExcelFile(); var s:Sheet = new Sheet(); s.resize(4, 3); s.setCell(0, 0, “A”); s.setCell(0, 1, “B”); s.setCell(0, 2, “C”); var r:int = 1; var o:Object; for each (o in dg.dataProvider) { s.setCell(r, 0, o.A); s.setCell(r, 1, o.B); s.setCell(r, 2, o.C); r++; } ef.sheets.addItem(s); var ba:ByteArray = ef.saveToByteArray(); var ur:URLRequest = new URLRequest(“myApp.aspx”); ur.data = ba; ur.method = URLRequestMethod.POST; navigateToURL(ur, “_self”); } ]]> </mx:Script> <mx:Panel width=”250” height=”166”> <mx:DataGrid id=”dg” width=”100%” rowCount=”3”> <mx:ArrayCollection> <mx:Object A=”1” B=”2” C=”3” /> <mx:Object A=”4” B=”5” C=”6” /> <mx:Object A=”7” B=”8” C=”9” /> </mx:ArrayCollection> </mx:DataGrid> <mx:ControlBar> <mx:Spacer width=”100%” /> <mx:Button label=”Esporta” click=”bceh()” /> </mx:ControlBar> </mx:Panel> </mx:Application>
La libreria viene distribuita come archivio .SWC e, naturalmente, dovremo indicarne il percorso al momento della compilazione mxmlc.exe -library-path+=as3xls-1.0.swc myApp.mxml
L’uso di AS3XLS è molto semplice: creiamo l’istanza dell’oggetto ExcelFile; definiamo un nuovo Sheet; ne
17 [76]
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
SE� u SEGUE
DEVELOPING
impostiamo le dimensioni con il metodo resize (4 X 3 celle); con setCell inseriamo i nomi delle colonne nell’head e, con lo stesso metodo, i valori nel body scorrendo con il solito ciclo for il contenuto del dataProvider della DataGrid; aggiungiamo lo Sheet alla collection sheets; infine salviamo come ByteArray. Stavolta alla proprietà data di URLRequest assegniamo direttamente il ByteArray da inviare alla pagina .ASPX <%@ Import Namespace=”System.IO” %> <%@ Import Namespace=”System.Web” %> <script language=”C#” runat=”server”> private void Page_Load(object o, System.EventArgs ea) { byte[] b = Request.BinaryRead(Request.ContentLength); Response.ContentType = “application/vnd.ms-excel”; Response.AddHeader(“content-disposition”, “attachment;filename=myGrids.xls”); using (BinaryWriter bw = new BinaryWriter(Response.OutputStream)) { for (int i = 0; i < b.Length; i++) { bw.Write(b[i]); } } } </script>
Il codice è banale e non necessita di commento. Compiliamo e testiamo l’applicazione
Come di consueto potrete trovare il codice completo dei progetti sul mio sito, all’indirizzo http://www.laino.it/usermatter/xls_export.zip
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
Esportare il contenuto di una Flex DataGrid in Excel Spreadsheet
18 [76]
DEVELOPING
Adobe AIR
ADOBE AIR e SQL - tutorial di implementazione rapida di Fabio Biondi- info@fabiobiondi.com In questo articolo analizzeremo le funzionalità di Adobe AIR per la gestione di database SQLite. L’RSS In questo articolo vedremo come realizzare piccola applicazione per gestire l’anagrafica clienti utilizzando Adobe AIR in ambiente Flex 3, sfruttando ActionScript 3.0 e SQL. Il progetto prevede diverse fasi realizzative: 1) Creazione di un database che conterrà una tabella “Clienti” con i seguenti campi: a. ID b. NOME_CLIENTE, c. COGNOME_CLIENTE 2) Realizzazione di un piccolo form per l’inserimento nel db di un nuovo cliente (nome e cognome) 3) Impostazione di una query per la visualizzazione in un datagrid di tutti i clienti inseriti L’INTERFACCIA UTENTE L’interfaccia utente, creata in Flex 3 e MXML, conterrà quindi due campi di input per l’inserimento nel database di un nuovo cliente (nome e cognome) e un componente DataGrid per la visualizzazione dei dati inseriti (acquisiti anch’essi tramite una query SQL effettuata sul databse creato). Attraverso l’evento creationComplete(), definito nel file MXML, faremo in modo che ad ogni avvio dell’applicazione il database sia creato o aperto chiamando la funzione openDatabase(). Il risultato finale dell’applicazione sarà il seguente:
Il codice del file main.mxml: <?xml version=”1.0” encoding=”utf-8”?> <mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” width=”700” height=”450”
19 [76]
SE� u SEGUE
DEVELOPING
creationComplete=”openDatabase()”> <mx:Script source=”asSQL/sqlConnection.as” />
<!- FORM INSERIMENTO NUOVI CLIENTI nel db --> <mx:HBox width=”100%” horizontalAlign=”center”> <mx:Label text=”Nome Cliente”/> <mx:TextInput id=”nomeTxt” width=”100” text=”Nome”/> <mx:TextInput id=”cognomeTxt” width=”100” text=”Cognome”/> <mx:Button label=”Inserisci” click=”insertRecord()”/> </mx:HBox> <mx:HRule width=”100%”/> <mx:Label text=”Record Tabella Clienti”/> <!- DATAGRID con l’ELENCO CLIENTI inseriti nel db: I nomi delle colonne dovranno coincidere con quelli dei campi del db, affinchè le colonne del datagrid siano popolate automaticamente --> <mx:DataGrid id=”grid” width=”100%” height=”100%”> <mx:columns> <mx:DataGridColumn dataField=”ID” /> <mx:DataGridColumn dataField=”NOME_CLIENTE” /> <mx:DataGridColumn dataField=”COGNOME_CLIENTE” /> </mx:columns> </mx:DataGrid> </mx:WindowedApplication>
CREAZIONE e APERTURA DATABASE Il file asSQL/sqlConnection.as: Innanzitutto importiamo le classi necessarie. Inseriamo quindi la funzione openDatabase(), che creerà il database al primo avvio dell’applicazione. Dalla successiva apertura, il database verrà invece semplicemente aperto e reso disponibile in modo che vi si possa interagire attraverso query SQL. Il codice che proponiamo sarà commentato passo-passo: import import import import import import import public
SEGUE u
flash.filesystem.File; flash.events.SQLErrorEvent; flash.events.SQLEvent; flash.data.SQLConnection; flash.data.SQLStatement; flash.data.SQLResult; mx.controls.Alert; var conn:SQLConnection;
ADOBE AIR e SQL - tutorial di implementazione rapida
20 [76]
DEVELOPING
private function openDatabase():void{ // Creiamo una nuova connessione SQL conn = new SQLConnection(); conn.addEventListener(SQLErrorEvent.ERROR, errorHandler); // Reference al file del database .db (sarà posizionato sul desktop) var dbFile:File = File.desktopDirectory.resolvePath(“Tutorial_UM_AIR_SQL.db”);
// ==> Se il file del DB esiste ed è quindi già stato creato: if(dbFile.exists) { // Listener per l’APERTURA del database conn.addEventListener(SQLEvent.OPEN, openHandler); // Apertura Database conn.open(dbFile); } else // ==> Se il file del DB ancora non esiste: { // Listener per la CREAZIONE del database conn.addEventListener(SQLEvent.OPEN, createHandler); // Creazione Database, utilizzando nuovamente il metodo open(), // il quale crea automaticamente un nuovo db nel caso in cui // non trovasse il file all’url specificato conn.open(dbFile); // Creazione della Tabella “Clienti” createClientsTable(); } }
// Se l’apertura del db avviene con successo, verrà invocata la funzione // showAllRecords() e tutti i clienti presenti nel db saranno visualizzati nel datagrid private function openHandler(event:SQLEvent):void { showAllRecords() }
// Evento invocato dopo la creazione del db (solo al primo avvio dell’applicazione) private function createHandler(event:SQLEvent):void { Alert.show(“Il DataBase è stato creato”, “createHandler”); }
21 [76]
ADOBE AIR e SQL - tutorial di implementazione rapida
SE� u SEGUE
DEVELOPING
Verrà creato sul proprio desktop un file chiamato Tutorial_UM_AIR_SQL.db che conterrà l’intero database. Potete manipolare e visualizzare il contenuto dei database SQLITE grazie ad un piccolo software open source, SQLITE Database Browser, scaricabile gratuitamente all’url http://sqlitebrowser.sourceforge.net/. In seguito vedremo alcuni esempi di utilizzo. CREAZIONE TABELLA CLIENTI Creiamo quindi la tabella “Clienti” attraverso una query SQL, i cui campi saranno: 1) ID: INT- chiave primaria 2) NOME_CLIENTE: TEXT 3) COGNOME_CLIENTE: TEXT private function createClientsTable():void{ // Query per la creazione delle tabella: // @field ID // @field NOME_CLIENTE // @field COGNOME_CLIENTE // NOTA: i nomi dei campi della tabella dovranno necessariamente coincidere // con quelli utilizzati nel codice MXML nelle colonne del datagrid var sqlText:String = “CREATE TABLE Clienti(ID INTEGER PRIMARY KEY, “ + “NOME_CLIENTE TEXT,” + “COGNOME_CLIENTE TEXT)” ; // Eseguiamo la query var createTableStatement:SQLStatement = new SQLStatement(); createTableStatement.sqlConnection = conn; createTableStatement.addEventListener(SQLEvent.RESULT, createTableResult); createTableStatement.addEventListener(SQLErrorEvent.ERROR, errorHandler); createTableStatement.text = sqlText; createTableStatement.execute(); }
// Evento invocato dopo la creazione della Tabella private function createTableResult(event:SQLEvent):void { // Eventuali messaggi e operazioni da effettuare dopo // la creazione della tabella }
Sfruttando il software SQLITE Database Browser potete aprire il file .db e verificare che la struttura della tabella appena creata sia corretta, come rappresentato nell’immagine seguente:
SEGUE u
ADOBE AIR e SQL - tutorial di implementazione rapida
22 [76]
DEVELOPING
INSERIMENTO DATI Creiamo quindi la funzione insertRecord() per consentire l’inserimento di un nuovo utente (nome e cognome) attraverso il form MXML: private function insertRecord():void { // Query per l’inserimento di un nuovo utente. // Passiamo come parametri nomeCliente e cognomeCliente var sqlText:String = “INSERT INTO Clienti(NOME_CLIENTE, COGNOME_CLIENTE) “ + “VALUES(:nomeCliente, :cognomeCliente)” ; var insertStatement:SQLStatement = new SQLStatement(); insertStatement.sqlConnection = conn; insertStatement.addEventListener(SQLEvent.RESULT, insertResult); insertStatement.addEventListener(SQLErrorEvent.ERROR, errorHandler); insertStatement.text = sqlText; // Acquisiamo i valori da inserire nella query dai campi di // input del form, abbinandoli ai parametri passati nella query insertStatement.parameters[“:nomeCliente”] = nomeTxt.text; insertStatement.parameters[“:cognomeCliente”] = cognomeTxt.text; // Eseguiamo la query insertStatement.execute(); } // Ad ogni INSERT invochiamo la funzione showAllRecords() per verificare // l’avvenuto inserimento, visualizzando nel datagrid tutti i clienti presenti nel db private function insertResult(event:SQLEvent):void { // Eliminiamo il contenuti dai campi di input nomeTxt.text = “”;
23 [76]
ADOBE AIR e SQL - tutorial di implementazione rapida
SE� u SEGUE
DEVELOPING cognomeTxt.text = “”; // Effettuiamo una query sul DB per recuperare i dati e popolare il DataGrid showAllRecords(); }
Grazie a SQLITE Database Browser sarà possibile verificare in ogni momento il contenuto dei dati inseriti nel database. Dopo ogni inserimento sarà tuttavia necessario chiudere e riaprire il file .db per visualizzare i nuovi dati inseriti, come raffigurato nell’immagine seguente:
VISUALIZZAZIONE DATI Attraverso la funzione showAllRecords()recuperiamo tutti i clienti inseriti nella tabella “Clienti” e popoliamo il datagrid con il risultato ottenuto: private function showAllRecords():void{ var sqlText:String = “SELECT * FROM Clienti”; var selectAllSQL:SQLStatement = new SQLStatement(); selectAllSQL.sqlConnection = conn; selectAllSQL.addEventListener(SQLEvent.RESULT, selectAllRecordsResult); selectAllSQL.addEventListener(SQLErrorEvent.ERROR, errorHandler); selectAllSQL.text = sqlText; selectAllSQL.execute(); } // Evento invocato dopo la query SELECT private function selectAllRecordsResult(event:SQLEvent):void{ // Popoliamo il datagrid con il risultato della SELECT var result:SQLResult = event.currentTarget.getResult(); grid.dataProvider = result.data; }
SEGUE u
ADOBE AIR e SQL - tutorial di implementazione rapida
24 [76]
DEVELOPING Per la gestione degli errori utilizzeremo una funzione generica valida per tutti gli eventi:
private function errorHandler(event:SQLErrorEvent):void { var err:String = “ID Errore:” + event.error.errorID + “\nDettagli:” + event.error.message; Alert.show(err,”Errore”); }
Adobe Flash/Flex Developer dal 2002, realizza siti web dinamici e rich internet application. Ottenuta
scritto da
nel 2004 la certificazione Flash Developer, dal 2007 è Adobe Flash Certified Instructor. Inoltre sviluppa e coordina progetti che fanno uso delle più recenti tecnologie Adobe complementari a Flash, come Flex, FlashLite, Air e Flash Media Server. Membro fondatore dell’Adobe UserGroup (AUG) Actionscript.it, ora fa parte dell’AUG Augitaly.com. Attualmente lavora presso la Web agency Fishouse di Castelfranco Veneto (TV).
Fabio Biondi info@fabiobiondi.com
25 [76]
ADOBE AIR e SQL - tutorial di implementazione rapida
FINE
26 [76]
DEVELOPING
Adobe AIR
ADOBE AIR e SQL - approfondimento con basi teoriche di Matteo Ronchi - m.ronchi@cef62.com
Adobe Air ha portato agli sviluppatori Flex e Flash sui desktop dei nostri computer. Prima le applicazioni Actionscript erano relegate alla distrubuzione su web ed era al massimo possibile creare eseguibili per sistemi Windows e Mac. Gli eseguibili creati soffrivano degli stessi limiti delle applicazioni web: impossibilità di accedere al file system del sistema su cui eseguivano, necessità di linguaggi server side, quali Java, PHP o . NET, per interagire con database SQL. Adobe AIR ha cambiato le cose rimuovendo questi limiti e aprendo nuove strade agli sviluppatori Actionscript. Una delle più importanti novità portate dal nuovo runtime di Adobe è la possibilità di gestire database SQL locali senza l’ausilio di linguaggi intermedi. Le applicazioni Adobe AIR hanno la possibilità di creare ed accedere a database SQL standard basati sul motore SQL SQLite. SQLite è un motore SQL molto diffuso in rete, scelto da molte tecnologie web come base per la gestione dei propri dati. Questo motore SQL, a differenza di molti altri, non richiede applicativi particolari per accedere ai dati. Ogni database è completamente contenuto in un singolo file senza nessun tipo di dipendenze esterne. Questa peculiarità offre numerosi vantaggi che hanno reso SQLite uno dei motori SQL più usati per applicazioni sviluppate per essere distribuite su dispositivi mobili, quali cellulari e palmari. Essendo completamente contenuti in un unico file database SQLite permettono con estrema facilità il backup, la distribuzione via web e l’uso anche su memorie volatili come le chiavi USB. Tutti questi vantaggi hanno reso SQLite la scelta più ovvia per un runtime che aspira, nel prossimo futuro, ad essere fruibile oltre che dai sistemi operativi tradizionali anche dai sistemi operativi per dispositivi mobili. Inoltre la nativa predisposizione multipiattaforma di questo motore SQL si sposa perfettamente con la filosofia delle applicazioni Adobe AIR, che cercano di permettere agli sviluppatori di creare applicazioni distribuibili su divesi sistemi operativi senza necessità di scrivere codice vincolato alle funzionalità di un dato sistema. Adobe AIR ci permette di utilizzare quanti database riteniamo necessari per la nostra applicazione; possiamo accedere separatamente a diversi database oppure unire temporaneamente strutture di dati indipendenti tra loro per permetterci elaborazioni, anche molto complesse, di dati. Come anche per altre funzionalità offerte da Adobe AIR, per esempio l’accesso al file system, anche le connessioni SQL possono avvenire in due diverse modalità: • connessioni sincrone • connessioni asincrone Database relazionali Un database relazionale offre la possibilità di memorizzare e attingere a strutture di dati. I dati presenti nel database sono organizzati in tabelle dove ogni riga corrisponde ad un oggetto o ad un gruppo d’informazioni e ogni colonna corrisponde ad una proprietà o singola informazione relativa alla riga di appartenenza. In questo modo è possibile organizzare dati omogenei in strutture ben organizzate e facilmente accessibili. Un’altra importante caratteristica dei database relazionali è la capacità di creare relazioni tra i dati presenti, In queste relazioni è necessario definire un valore, che deve essere presente in tutte le tabelle interessate, come chiave di relazione. Come chiave di relazione si deve utilizzare un dato univoco per ogni riga già presente nella tabella, se questo dato univoco non è disponibile se ne crea uno ad-hoc che per consuetudine viene chiamato ‘ID’ e servirà anche per poter accedere correttamente ai dati di una specifica riga della tabella. La maggior parte dei database relazionali permette di definire dei vincoli tra dati relazionati chiamati ‘chiavi esterne’. Queste chiavi permettono di aggiornare o eventualmente rimuovere automaticamente dati collegati tra di loro.
27 [76]
SE� u SEGUE
DEVELOPING
L’attuale implementazione SQL di Adobe AIR non permette la definizione di chiavi esterne, quindi sarà compito del programmatore rimuovere o aggiornare tutti gli eventuali dati collegati quando necessario. Comunicare con un database SQL Il dialetti SQL permettono di interagire con delle strutture di dati relazionali. Questi linguaggi non definiscono procedure o sequenze di operazioni da eseguire ma offrono invece al programmatore la possibilità di definire quali sono i dati da aggiungere al database. L’implementazione reale della ricerca è lasciata al motore SQL in utilizzo. Adobe AIR supporta gran parte delle funzionalità offerte da SQLite direttamente nel codice SQL. Alcune funzionalità specifiche del linguaggio SQL come gestione di transazioni e accesso agli schemi di definizione delle tabelle del database non sono supportate direttamente dall’implementazione Actionscript 3 di Adobe AIR. Per ovviare a questo le classi Actionscript SQL espongono delle funzioni predisposte per compensare a queste incompatibilità e permettere allo sviluppatore di non perdere la possibilità di utilizzare queste funzionalità. Actionscript 3 definisce il namespace flash.data al cui interno sono contenute le classi offerte per lavorare con funzionalità SQL. Tra queste classi troviamo la classe SQLConnection per connettersi ad database locali, la classe SQLStatement per eseguire interrogazioni a database relazionali, la classe SQLResult per gestire i dati restituiti dal database in seguito alle nostre interrogazioni e molte altre di ausilio a quelle appena elencate. La classe SQLConnection offre le funzionalità necessarie per connettersi ad un database sulla macchina locale. Quando ci connettiamo ad un database viene richiesto in quale file esso risiede; se questo file non esiste la classe SQLConnection può crearlo per noi se richiesto esplicitamente in fase di creazione della connessione. Tramite questa classe possiamo monitorare le attività in corso sul database, cancellare eventuali operazioni in corso di esecuzione e gestire la cache che Adobe AIR rende disponibile per la connessione al database. Come già detto alcune funzionalità SQL standard quali accesso agli schemi di definizione delle tabelle e la gestione delle transazioni SQL non sono supportati in Adobe AIR tramite il linguaggio SQL; la classe SQLConnection implementa queste funzionalità mancanti e le espone tramite la propria interfaccia di programmazione. Connessioni SQL Sincrone Adobe AIR permette di connettersi in modalità sincrona al database SQL della nostra applicazione. Quando ci connettiamo con un approccio sincrono richiediamo al runtime ed al motore SQL che tutte le operazioni effettuate sul database, siano di lettura, scrittura, modifica o rimozione, vengano eseguite appena richieste. Durante l’esecuzione di operazioni sincrone la nostra applicazione resta in attesa del loro completamento, per così dire congelata. Questo significa che tutte le animazioni in esecuzione, siano state create manualmente in Flash o siano generate da codice Actionscript, si fermeranno fino al completamento dell’operazione SQL avviata. Anche l’interazione dell’utente verso i componenti della nostra interfaccia sarà inibita durante le operazioni SQL. Questi sono i principali svantaggi di una connessione SQL sincrona, che diventano realmente limitanti se la nostra applicazione deve processare con una frequenza elevata grandi moli di dati in lettura e scrittura; in questi casi è preferibile valutare approcci differenti altrimenti gli utenti della nostra applicazione potrebbero rimanere bloccati per diversi secondi ad ogni operazione effettuata sul database. Il vantaggio di connessioni SQL sincrone, soprattutto se dobbiamo lavorare su piccoli volumi di dati, è che le operazioni richieste vengono eseguite in tempo reale e che siamo subito informati del loro esito. Inoltre la quantità di codice Actionscript necessario per predisporre e gestire operazioni su database SQL è decisamente minore rispetto a connessioni SQL che utilizzano approcci SLQ asincroni. Il codice SQL sincrono deve essere eseguito all’interno di costrutti try..catch per poter intercettare e gestire correttamente eventuali errori di esecuzione. Se non utilizziamo un costrutto try..catch e l’operazione SQL
SE� u SEGUE u
ADOBE AIR e SQL - approfondimento con basi teoriche
28 [76]
DEVELOPING eseguita fallisce il runtime genererà un messaggio d’errore per un’eccezione no gestita, situazione che normalmente è preferibile evitare. Per connettersi ad un database attraverso una connessione sincrona si procede come segue: // istanza connessione SQL var SQLconn:SQLConnection = new SQLConnection(); // istanza della classe File che indica il nostro database var dbFile:File = File.desktopDirectory.resolvePath( “nomeDatabase.db” ); try { // avviamo la connessione SQLconn.open( dbFile ); } catch( error:SQLError ) { // gestiamo l’errore }
Connessioni SQL asincrone Adobe AIR offre un’alternativa alle connessioni SQL sincrone: le connessioni SQL asincrone. Quando ci si connette in modalità asincrona tutte le operazioni SQL vengono eseguite in parallelo all’esecuzione della nostra applicazione, permettendo così all’utente di continuare ad utilizzare il nostro prodotto senza dover attendere che l’applicazione riprenda a funzionare. Questa tecnica è indifferente al volume di dati processati dall’applicazione e ci permette di utilizzare animazioni, barre di caricamento o altro per intrattenere l’utente mentre la ci occupiamo di gestire i dati necessari. Quando eseguiamo operazioni SQL asincrone dobbiamo registrare due funzioni da richiamare in caso di completamento o di fallimento. Queste funzioni si preoccuperanno di far proseguire il funzionamento dell’applicazione in base al risultato ottenuto. Questo approccio è sicuramente più flessibile e mantenibile di quello sincrono ma richiede più codice SQL anche per eseguire operazioni semplici. Per connettersi ad un database attraverso una connessione sincrona si procede come segue: // istanza connessione SQL var SQLconn:SQLConnection = new SQLConnection(); // funzioni da chiamare a operazione completata o fallita SQLconn.addEventListener( SQLEvent.OPEN, dbConnected ); SQLconn.addEventListener( SQLErrorEvent.ERROR, dbConnectionError ); // istanza della classe File che indica il nostro database var dbFile:File = File.desktopDirectory.resolvePath( “nomeDatabase.db” ); // avviamo la connessione SQLconn.openAsync( dbFile ); function dbConnected( evt:SQLEvent ):void { // connessione avvenuta correttamente }
29 [76]
ADOBE AIR e SQL - approfondimento con basi teoriche
SE� u SEGUE
DEVELOPING
function dbConnectionError( evt:SQLErrorEvent ):void { // gestiamo l’errore }
Creiamo un’applicazione Adobe AIR con Flex Builder 3 che ci permetta di provare ad aprire connessioni con entrambi i possibili approcci. Apriamo Flex Builder e creiamo un nuovo progetto Flex, indicando che dovrà essere compilato per eseguire in Adobe AIR e non in ambito web, lasciamo le altre impostazioni con i valori standard offerti da Flex Builder.
Una volta creato il progetto verrà aperto in automatico il documento mxml generato per l’applicazione appena creata. Per rendere operativa la nostra applicazione dobbiamo: 1. creare il layout dell’applicazione 2. predisporre il codice Actionscript necessario per avviare le connessioni SQL necessarie Creiamo il layout mxml per l’applicazione Per sperimentare l’accesso ad un database in modalità sincrona ed asincrona è necessario predisporre dei controlli grafici che ci permettano di aprire e chiudere la connessione SQL desiderata. Definiamo quindi 4 pulsanti ed una textarea che useremo per tenere traccia delle operazioni SQL in corso. <mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” width=”550” height=”400”
SE� u SEGUE u
ADOBE AIR e SQL - approfondimento con basi teoriche
30 [76]
DEVELOPING
paddingLeft=”20” paddingRight=”20” title=”SQL connection test” applicationComplete=”init()”>
<mx:HBox width=”100%”> <mx:VBox height=”100%” verticalAlign=”bottom” width=”50%” horizontalAlign=”left”> <mx:Button label=”Open Async Connection” click=”connectAsyncToDb()” /> <mx:Button label=”Close Async Connection” click=”closeAsyncDB()” /> </mx:VBox> <mx:VBox height=”100%” verticalAlign=”bottom” width=”50%” horizontalAlign=”right”> <mx:Button label=”Open Sync Connection” click=”connectSyncToDb()” /> <mx:Button label=”Close Sync Connection” click=”closeSyncDB()” /> </mx:VBox> </mx:HBox> <mx:TextArea id=”output” width=”100%” height=”100%” /> </mx:WindowedApplication>
I componenti mxml inseriti avranno il seguente aspetto:
Ad ognuno dei 4 pulsanti è stata associata una funzione event listener per l’azione di click del mouse. Andiamo a creare le funzioni predisposte per i pulsanti più alcune altre. Aggiungiamo il codice Actionscript all’applicazione Creiamo un tag script nel quale inseriremo il codice necessario per consentire un corretto funzionamento dell’applicazione. La prima funzione da creare è la funzione init() associata all’evento applicationComplete, generato dall’applicazione quando il layout mxml è stato completamente disegnato ed è pronto all’uso. La funzione crea un’istanza della classe File che accede al file del database della nostra applicazione. La prima volta che l’applicazione viene eseguita questo file non esiste e sarà creato per noi dalla classe SQLConnection all’apertura della prima connessione.
31 [76]
ADOBE AIR e SQL - approfondimento con basi teoriche
SE� u SEGUE
DEVELOPING
protected function init():void { var folder:File = File.applicationStorageDirectory.resolvePath( “data” ); folder.createDirectory(); dbFile = folder.resolvePath( “lodalDataBase.db” ); }
E’ necessario definire ora le funzioni associate ai pulsanti dell’applicazione. Iniziamo a definire le due funzioni collegate ai pulsanti di apertura e chiusura di connessione asincrona. La funzione connectAsyncToDb() crea un’istanza della classe SQLConnection e la associa alle funzioni da richiamare in caso d’apertura, chiusura o errori di connessione; infine avvia l’apertura della connessione SQL chiamando la funzione openAsync(). La funzione closeAsyncDB() richiede la chiusura della connessione asincrona. protected function connectAsyncToDb():void { sqlConnection = new SQLConnection(); sqlConnection.addEventListener( SQLEvent.OPEN, sqlConnectionOpenHandler ); sqlConnection.addEventListener( SQLEvent.CLOSE, sqlConnectionCloseHandler ); sqlConnection.addEventListener( SQLErrorEvent.ERROR, sqlConnectionErrorHandler ); sqlConnection.openAsync( dbFile ); output.text += “Opening async connection...\n”; } protected function closeAsyncDB():void { output.text += “Closing async connection...\n”; sqlConnection.close(); } Le funzioni indicate come event listeners per gli eventi asincroni che potrebbero occorrere sono le seguenti: protected function sqlConnectionOpenHandler( evt:SQLEvent ):void { output.text += “Connected to async local db...\n”; } protected function sqlConnectionCloseHandler( evt:SQLEvent ):void { output.text += “closed async db connection\n”; } protected function sqlConnectionErrorHandler( evt:SQLErrorEvent ):void { output.text += “You have problems in sql operations [ “ + evt.error.operation + “ ]... “ + evt.error.message + “\n”; }
Restano da definire le funzioni da utilizzare per il tentativo di connessione sincrona. L’approccio sincrono non necessità di funzioni event listener in quanto ogni operazione è eseguita istantaneamente quindi le due funzioni associate ai due pulsanti
SE� u SEGUE u
ADOBE AIR e SQL - approfondimento con basi teoriche
32 [76]
DEVELOPING gestiscono completamente le operazioni di apertura e chiusura sincrona. protected function connectSyncToDb():void { sqlConnection = new SQLConnection(); output.text += “Opening sync connection...\n”; try { sqlConnection.open( dbFile ); }catch( e:SQLError ) { output.text += “Sync connection error: “ + e.message + “ operation type: “ + e.operation + “\n”; return; } output.text += “Sync connection opened!\n”;
}
protected function closeSyncDB():void { output.text += “Closing sync connection...\n”; try { sqlConnection.close(); output.text += “closed sync db connection\n”; } catch( e:SQLError ) { output.text += “Errors closing sync db connection: “ + e.message + “\n”; } }
Ognuna delle due funzioni esegue le proprie istruzioni SQL all’interno di un costrutto try..catch in modo da poter intercettare le eventuali eccezioni generate direttamente, a differenza dell’approccio asincrono dove gli eventuali eccezioni d’esecuzione vengono gestite dalla funzione event listener registrata per gestire gli errori. La nostra applicazione è ora completa e ci permette di aprire e chiudere connessioni SQL sia sincrone che asincrone. Eseguendola e provando ad aprire e chiudere una connessione asincrona otterremo il risultato presentato nell’immagine seguente.
33 [76]
ADOBE AIR e SQL - approfondimento con basi teoriche
SE� u SEGUE
DEVELOPING
Questo ovviamente non è che un piccolo esempio di ciò che è possibile fare con Adobe AIR ed SQLite. Un buon punto di partenza per trovare maggiori informazioni, oltre a continuare a leggere UserMatter, è il portale di Adobe dedicato agli sviluppatori AIR: http://www.adobe.com/devnet/air/
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
ADOBE AIR e SQL - approfondimento con basi teoriche
34 [76]
DESIGN AVATAR
di Stefano Lazzari - stefano.lazzari@gmail.com - http://stexauer.blogspot.com/ Madam Bovary c’est moi. La questione della personalità nel Metaverso: Persona, Identità, Brand. “L’opera “Madame Bovary” è realista, perciò l’autore Flaubert decide di adattare il punto di vista della protagonista Emma Bovary per riuscire a trasmetterne al lettore l’immagine fedele. Flaubert stesso, attraverso una celebre affermazione, “Madame Bovary c’est moi” confessa la sua identificazione col personaggio di Emma. E’ ravvisabile tuttavia il pensiero dell’autore nel romanzo: egli infatti assume una coscienza superiore rispetto al suo personaggio e ne delinea la personalità, talvolta condannata. Ciò avviene attraverso l’utilizzo di metafore e di figure emblematiche in cui è possibile cogliere aspetti connotativi significativi.” 1 Storia dell’orologio e del tempo a mio uso e consumo Sono diversi anni che non ho più un orologio al polso. Mi sono domandato come mai non ne sentivo più il bisogno e quanti come me, non avevano più al polso il proprio segnatempo personale. Ecco, la risposta a questa considerazione mi è venuta in mente attraverso una analogia con la tecnologia e la sua evoluzione che mi è sembrata illuminante. Ve la illustro brevemente. Sino alle soglie della modernità il tempo è stato vissuto come fatto collettivo, potremmo definirlo il tempo del “campanile”. In quel momento il tempo è centralizzato e detenuto da un potere forte. Il tempo collettivo è il tempo dei cicli produttivi basati sul rapporto con la natura e della ritualità sociale, politica, religiosa. Potremmo paragonarlo al tempo del “mainframe” dove la potenza di calcolo ed elaborazione è centralizzata. Poi grazie alla miniaturizzazione l’orologio diventa portatile e il tempo muta, diventa personale. Non è più l’espressione di una volontà solo collettiva, ma diventa il modo con cui le persone gestiscono il tempo e lo relazionano con quello degli altri. è il tempo delle scelte individuali, che crea nuovi spazi, il tempo libero ad esempio, o il tempo come valore di scambio economico. Potremmo paragonarlo al tempo del Personal Computer, dove potenza di calcolo ed elaborazione è individuale e periferico rispetto al centro, che perde di importanza. Infine con lo sviluppo dell’elettronica, delle batterie al litio e a dei minerali di quarzo, il tempo entra nelle cose. Il tempo diventa visibile fuori dagli orologi, ed entra negli oggetti: radio, telefoni, televisioni, cartelloni, wolkman, ipod, computer: qualunque elettrodomestico o arredo urbano o gadget dotato di una autonoma fonte di energia, puo’ segnare il tempo. potremmo paragonarlo al tempo dell’internet, dove potenza di calcolo ed elaborazione è diffusa, e la individualità perde la sua centralità. Ed è per questo che non ho più bisogno di un orologio da polso. Il tempo è nelle cose! Ma non è solo il tempo ad entrare nelle cose e a diffondersi. Questo movimento, dal centro al diffuso riguarda tutta la modernità digitale ed è uno dei suoi aspetti più profondi e radicali. Riguarda tutto e riguarda soprattutto noi, il nostro stesso corpo, l’idea che ci siamo fatti di noi come una unità inscindibile. Beh, non credo sia più così. Personomies Stiamo cambiando, come il tempo, da indivisibile a diffuso e già questo avviene da diverso tempo. Diciamo almeno da quando abbiamo avuto più indirizzi di posta, più profili personali e account in linkedin, facebook, flickr, in myspace, ecc, e le nostre password riempiono una pagina A4. Ed ora anche uno (o più) Avatar in un uno o più mondi 1
35 [76]
http://www.comune.bologna.it/iperbole/llgalv/iperte/immagine/metafora/bovarymoi.htm
SE� u SEGUE
DESIGN
del metaverso. L’identità, non solo negli ambienti immersivi, ma in tutto il web 2.0 diventa un fatto strategico nella definizione di una persona, ma anche di una azienda o di una attività. E’ attorno alla definizione della “Personomies”, ovvero alla creazione di una identità derivata dalle informazioni in rete che si gioca la partita importante dell’autorevolezza e della reputazione soprattutto in SecondLife, dove ogni individuo ha un corpo in cui rappresentarsi. l’Avatar in SecondLife è l’elemento sostanziale, senza il quale nulla di tutto questo ha inizio. La Personomies avvalora l’identificazione con l’Avatar in un embodyment estremamente forte. Questo embodyment non è solo percepito come proprio, ma è riconosciuto negli altri Avatar: ci si riconosce Persona fra Persone. Essere Persona in un ambiente immersivo è percepire intensamente il racconto del corpo, nello spazio della simulazione come e altrettanto che nella realtà oggettiva. La presenza del corpo permette una percezione sensoriale e spaziale di quanto ci circonda in un ambiente simulato, ma non solo. A completare il quadro percettivo in questo ambiente è la memoria di quanto ci circonda e nel quale siamo immersi che avvalora e rende vivida l’esperienza: quell’ “io ero lì” che fa di un fatto un’esperienza vitale: la possibilità sviluppare una mappa sentimentale2 che narra quello che la parola non coglie. Identità e Brand Torniamo con i piedi ... per terra, se si può dire. Tutto questo riguarda l’idea e la percezione che abbiamo di noi, ma quello che ci interessa qui è anche come gli altri ci percepiscono: come persone ma anche come azienda o ente presente in SecondLife. Cerchiamo di dare una risposta alla tradizionale e sempre valida domanda del buon vecchio marketing: che cosa voglio che la gente pensi di me? In questo processo è indispensabile ed evidente, come sia l’Avatar e non l’architettura dell’ambiente ad essere determinante nel processo di identificazione del brand in SecondLife. Certo un’ambientazione ricca di stimoli e piacevole, ma a rafforzare l’identità e la autorevolezza di un brand è la presenza di Avatar che ne esprimano appieno il valore: vale più la presenza di personalità leader e rappresentative, che sette sim ultra-accessoriate. il caso Kejo Come nella realtà oggettiva, un testimonial vale la forza di un marchio.
Un caso interessante lo porta Kejo, un marchio di abbigliamento outdoor che sta realizzando un interessante progetto “mixed reality”. Inworld è stato lanciato un conterst ai creativi street styler che potranno con dei prototipi di abbigliamento in tutto eguali a quelle che verranno realizzati inreal, personalizzarli con tutta la la loro creatività grafica. L’abbigliamento così realizzato verrà sottoposta al mercato interno di SecondLife che determinerà il successo del capo meglio
SE� u SEGUE u
AVATAR
36 [76]
DESIGN personalizzato, e successivamente portato nel mercato inreal. Un esempio di un tipico processo creativo-produttivo in SecondLife: laboratorio, prototipazione, simulazione e reimmissione inworld. Kejo però non è solo un brand, è anche un Avatar. Ryk Xue-Kejo, Creative Leader e Fashion revolution commander, segue tutte le fasi del progetto, partecipa alle riunioni, promuove il contest, il Keyo Hyper Pop Lab3, e come molti altri digerati ha il suo profilo in Facebook, il blog del laboratorio , il gruppo in flickr, ecc. Kejo è il caso di un Avatar brand commerciale, che potremmo assimilare a casi già esistenti e assolutamente consolidati di personaggi creati dalla fantasia e diventati imprescindibili dal prodotto che promuovono: SuperMario, piuttostro che Bibendum, per andare fino nel lontano passato. Ma nessuno di essi è una Persona, un Avatar! Ci sono poi casi di Avatar costruiti come brand personali, definiti e sviluppati proprio allo stesso modo e per lo stesso risultato delle pop star: diventare testimoni di uno stile di vita. I casi famosi di Anshe Chung ( la manager che ha guadagnato il primo milione di dollari in SL) o di Aimee Weber ( una artista e fashion stylist) sono celeberrimi, ma ci sono casi italiani che possono stare al passo, come Roberta Greenfield una delle più note Pr italiane, o Frank Koolhas, giornalista e critico d’arte o il fotografo Marco Manray, o la rockstar EddieGuitar Dagger invitato a cantare alla festa dei 5 anni di SecondLife direttamente dai Linden. Virtual Identity management La costruzione di una identità in Second Life è stata discussa da molti e autorevoli commentatori, e qui sotto vi rimando ai documenti in rete4. Non ultimo, è stato ed è uno dei miei focus personali. Comunque per sintetizzare, potremmo definire per primo gli ambiti, ovvero gli aspetti strategici e generali da considerare nelle gestione dell’identità ( a prescindere addirittura da SecondLife) e gli scopi, dove focalizzare alcuni spunti riguardante le motivazioni e gli obbiettivi che vogliamo raggiungere con la costruzione del nostro Avatar. Ambiti Personal Identity in questro ambito, l’identità che si vuole definire è data dalle delle informazioni personali da associare all’Avatar e ai contenuti che crea. Nel caso specifico i dati del profilo della first life, sono importanti per mantenere e consolidare l’unicità dell’identità nei due lati della membrana. Questa dichiarazione di identità non obbligatoriamente consiste nei dati anagrafici, ma può essere calibrata a seconda del tipo di profilo che si intende avvalorare: una parte di quello che faccio nella vita reale, dati demografici, come la mia età e interessi, dati geografici: non ci sono preclusioni alla profilazione personale. Corporate Identity La mia identità aziendale è ll mio brand, il mio profilo su LinkedIn, il link al mio blog. La identità aziendale descrive cosa può essere utile, in termini di competenza e di esperienza. Qui è necessario che le informazioni contengono dati di fatto, per l’elevata probabilità di essere controllati da persone che saranno in grado di verificare la loro veridicità. Virtual Identity l’identità virtuale non può essere il riflesso statico, la somma della identità personale e aziendale che si vuole portare nella seconda vita. Il Doppelgänger5 ha una sua identità individuale, ha e racconta una sua storia personale, e a seconda del grado di astrazione o di adesione alle identità personale e aziendale, che si concretizza sul piano di una corrispondenza fisica, una forma di funzione adattativa tra identità e forma. Stex Auer, con la sua figura, il suo modo di vestire e di atteggiarsi, è da una parte la formalizzazione del mio brand
37 [76]
AVATAR
SE� u SEGUE
DESIGN
personale, dall’altra si costituisce come espressione autonoma di una personalità. Non escludo, che un giorno possa essere “agito” non da me personalmente, ma da chiunque sia in grado di impersonare Stex Auer: attore o IA. Scopi le questioni sull’Identità virtuale non si fermano qui. Come non vi è alcuna oggettiva e univoca relazione tra voi e la vostra identità virtuale, questa può essere al contrario dell’azione descritta prima,’clonata’, moltiplicata, e adattato per più obiettivi. Separando in Avatar specifici l’identità individuale, aziendale e virtuale, questi potrebbero essere gestiti dalla stessa persona ma utilizzati con focus diversi. Alcuni hanno scelto di creare diversi Avatar per i diversi obiettivi che si pone. Dusan writer’s recentemente ha pubblicato un post molto articolato sul tema dell ‘alt’, l’alternativa delle personalità diffuse, in contrapposizione al ‘main’, il profilo unico della personalità in SecondLife, e conclude dicendo: “Se vogliamo descrivere gli Avatar come rappresentazioni o ‘estensioni’ di noi stessi, dove la loro funzione è fondamentalmente la realizzazione di di obiettivi (non importa quanto lentamente o con quanta socialità si raggiungimento di questi obiettivi), è necessario che il profilo d’identità si articoli maggiormente e si dia ad ogni persona la possibilità di gestirli più liberamente.” in effetti, come dice RICK VAN DER WAL nel suo blog DIGital ADOption ( da cui ho tratto liberamente spunto per queste ultime considerazioni) “Alla luce di questo io personalmente vorrei vedere mondi virtuali utilizzare un sistema di gestione della personalità più simile a Facebook, Flickr, consentendo la gestione di più dati personali. Questi siti di social networking hanno affrontato il problema della gestione della identità’ molto meglio di SecondLife. Invece di costringere le persone a creare per i vari profili diversi circoli sociali o obiettivi, Questi siti web consentono di condividere le informazioni con ‘nessuno’ ‘contatti’ o ‘amici’, a seconda delle esigenze e dei contenuti. Questo consente di avere gli stesso contatti, un unico profilo, ma diversi livelli di accesso alle informazioni, o a diverse informazioni.”
ICT specialist, da circa 15 anni si occupa di media digitali, dai primi processi di archiviazione e gestione dei contenuti al management di progetti web alla realizzazione di soluzioni di comunicazione in Second Life. Dal 2003 é ICT specialist per MGM Digital Communication dove ha collaborato alla realizzazione di eventi e Manifestazioni di cultura digitale. Come Formatore progetta e realizzato corsi, workshop e seminari per lo IED (Istituto Europeo di Design), per la Scuola Superiore Commercio Turismo Servizi e Professioni e per il Centro Formazione Manager del Terziario. È docente presso la Scuola Politecnica di Design. È tra i fondatori del More Than Zero Festival.
scritto da
Stefano Lazzari stefano.lazzari@gmail.com - http://stexauer.blogspot.com/
FINE
AVATAR
38 [76]
DESIGN Ripensare lo spazio di lavoro: il bisogno di mobilità
di Andrea Pesoli - andrea.pesoli@polimi.it e Isabella Gandini - isabella.gandini@polimi.it
Come abbiamo già accennato nell’articolo pubblicato nello scorso numero di User Matter, i concetti riconducibili allo User Centered Design, ovvero quella filosofia di design incentrata sui bisogni, i desideri e i vincoli dell’utente finale, possono essere applicati anche nella progettazione delle organizzazioni, dei processi e dei Sistemi Informativi. Abbiamo già visto come la centralità della persona sia oggi il principio alla base delle Intranet di nuova generazione e della loro evoluzione in spazi di lavoro virtuali: i Virtual Workspace. In questo articolo analizzeremo invece il fenomeno della mobilità che, anche alla luce delle ultime ricerche degli Osservatori ICT & Management della School of Management del Politecnico di Milano sta diventando sempre più importante. Da una survey condotta su un campione di oltre 1000 imprese italiane, più del 46% sono caratterizzate da una forte e crescente dispersione dei lavoratori. Tutto questo incide fortemente sull’organizzazione, in quanto, da un lato, cambia il concetto stesso di spazio di lavoro, e dall’altro si modifica la relazione tra organizzazione e persone: sempre più spesso disconnesso dal network sociale e informativo dell’impresa, l’individuo rischia di trovarsi sempre meno identificato con l’impresa e sempre più solo coi suoi bisogni ed il suo progetto professionale. Inoltre, il fenomeno non è più limitato a specifiche categorie come “sales force” e “field force” ma, come la ricerca dell’Osservatorio Enterprise 2.0 evidenzia, coinvolge una parte sempre più importante dei ruoli in un’impresa (fig 1.).
Altro! Consulenti!
8%!
8%!
Venditori!
33%!
24%! Tecnici!
27%! Management!
Figure 1. Le figure professionali coinvolte dalla mobilità (2008) In molte organizzazioni aperte e decentrate, in cui la mobilità più che un trend è una necessità, le tecnologie ICT costituiscono oggi l’unica possibile risposta per ricostruire uno spazio di lavoro sostenibile attorno alle persone.
39 [76]
SE� u SEGUE
DESIGN
Le ICT infatti possono giocare un ruolo fondamentale perché permettono di ripensare i processi, rendendoli riconfigurabili in modo indipendente dal layout e da una struttura organizzativa sempre più instabile, e di costruire uno spazio di lavoro virtuale che metta la persona al centro, permettendole di lavorare, collaborare, accedere ad informazioni e competenze ovunque sia ed in qualunque condizione si trovi ad operare. La disponibilità di servizi basati su tecnologie mobile e web rende già oggi possibile il superamento di molte barriere alla comunicazione ed al trasferimento della conoscenza, ma per un pieno sfruttamento del loro potenziale occorre un cambio di paradigma che porti a guardare ai bisogni della persona ed al contesto in cui opera ed interagisce. Le evidenze che vengono dall’Osservatorio Enterprise 2.0 mostrano come le tecnologie mobile sono sempre più spesso utilizzate per automatizzare servizi e applicazioni, da quelli tipicamente della gestione del personale, quali richiesta di ferie, visualizzazione del cedolino, gestione delle trasferte e comunicazioni di malattia, a quelli di comunicazione interna come comunicati o notifiche di comunicazioni organizzative attraverso SMS, fino alla collaborazione, quali l’accesso alla posta elettronica, la condivisione di documenti e le agende condivise. Dallo studio, che ha previsto l’analisi di oltre 70 casi, emerge come un numero crescente di imprese stia investendo nello sviluppo di applicazioni mobili: nel 40% dei casi analizzati, già oggi gli utenti possono accedere, tramite device mobili, a funzionalità del proprio Sistema Informativo, mentre un ulteriore 10% di imprese ha pianificato il lancio di applicazioni entro un anno (Fig. 2). Nei casi più avanzati da noi analizzati, sono stati sviluppati veri e propri Mobile Virtual Workspace, ambienti integrati disegnati attorno alle esigenze di specifici gruppi di Mobile Worker ai quali, oltre alle semplici applicazioni sopra menzionate, consentono l’accesso attraverso terminali mobili alle principali applicazioni del core business. In questi casi i benefici si dimostrano particolarmente significativi, sia in termini di produttività e qualità del servizio verso i clienti, che di soddisfazione delle persone.
Non! presente!
Presente!
50%!
40%!
10%! Introduzione! prevista! Figure 2. Presenza e introduzione prevista di applicazioni mobili (2008)
SE� u SEGUE u
Ripensare lo spazio di lavoro: il bisogno di mobilità
40 [76]
DESIGN Il confronto tra le esperienze applicative mette in luce come a livelli di trasformazione organizzativa crescenti, corrispondono benefici sempre più rilevanti (vedi fig. 3). Ad un primo livello, cambiano le modalità di accesso alle informazioni: l’impatto è limitato tipicamente ad un singolo task ed i benefici possono essere misurati in termini di aumento di efficienza o livello di servizio. Ai due livelli successivi, gli impatti si estendono ad uno o più processi: la singola mansione viene ridisegnata ed i miglioramenti dei singoli KPI divengono significativi. Da ultimo, l’evoluzione verso uno spazio di lavoro aperto e mobile porterà, nel lungo termine, al ripensamento dei legami di filiera ed all’impostazione di nuove relazioni con i clienti finali. Ognuna di queste fasi evolutive può essere descritta da una curva ad “S”. Il salto da una curva a quella successiva rappresenta un momento di forte discontinuità che comporta un investimento iniziale ed un deciso cambiamento di contesto e di orizzonte decisionale.
Creazione di valore Impatto sui modelli di business
Impatto sul workspace Impatto sui processi
Cambiamento nelle modalità di accesso ai dati
Trasformazione organizzativa Fig. 3: I diversi livelli di impatto della mobilità L’analisi ha, tuttavia, evidenziato anche alcuni importanti limiti: ancora troppo poche applicazioni sono fin da subito progettate per essere aperte in una logica mobile e spesso risultano scarsamente integrate nei processi e nel Sistema Informativo. La diffusione delle applicazioni, inoltre, è limitata prevalentemente al Top Management od al personale IT. Esiste, quindi, una scarsa consapevolezza ed una visione limitata del ruolo potenziale delle tecnologie mobile nell’innovazione organizzativa: in questo senso, uno dei fattori critici sarà la giusta attenzione sia ad un’accorta progettazione tecnologica che al change management. Quando il miglioramento delle tecnologie di rete e la disponibilità di terminali più potenti permetteranno il superamento
41 [76]
Ripensare lo spazio di lavoro: il bisogno di mobilità
SE� u SEGUE
DESIGN
delle poche barriere tecnologiche che ne frenano oggi l’adozione (ad esempio, la sicurezza dei dati), le tecnologie mobile diventeranno una componente fondamentale a supporto dei nuovi modelli organizzativi. L’ampliamento delle modalità di accesso (da casa, da altre postazioni, in “mobilità”, attraverso mondi virtuali, …) consentirà di rimettere in discussione stereotipi e pregiudizi. Il posto di lavoro sarà ovunque la persona ha necessità e voglia di impiegare le proprie capacità; anche l’orario di lavoro sarà demitizzato con le persone chiamate e messo in grado di creare valore quando serve, creando nuovi equilibri tra lavoro e vita privata.
Ingegnere Gestionale e Ricercatore della School of Management del Politecnico di Milano. È impegnato da più di
scritto da
due anni in diversi progetti di Ricerca legati a Web 2.0, Enterprise 2.0, Mobility, Consumerization e User Centered Intranet. Ha inoltre seguito diversi progetti di Intranet Assessment per alcune delle principali imprese italiane. http://www.linkedin.com/in/andreapesoli.
Andrea Pesoli andrea.pesoli@polimi.it
Ricercatrice della School of Management del Politecnico di Milano da quasi 10 anni. È attualmente responsabile dell’area Business2Employee che comprende diversi Osservatori, tra cui Enterprise 2.0, Intranet nelle Banche e ICT accessibile e disabilità. Negli anni ha inoltre seguito diversi progetti di Intranet Assessment per alcune delle principali imprese italiane.
scritto da
Isabella Gandini isabella.gandini@polimi.it
FINE
42 [76]
DESIGN Second Life experience - parte 3 di Alessandro Bordicchia - a.bordicchia@thecode.it Introduzione Nella “puntata precedente” abbiamo avuto modo di prendere un po’ di confidenza con i tool che in SL ci consentono di realizzare degli oggetti. Sicuramente in questo periodo avrete avuto modo di sperimentare forme più complesse… ora vedremo come è possibile “animarle”. Uno degli aspetti interessanti della piattaforma è quello di essere dotata di un linguaggio di programmazione proprietario, (LSL ovvero Linden Script Language) abbastanza semplice ed intuitivo, ma soprattutto in continua evoluzione. Attraverso questo linguaggio è possibile realizzare semplici script di movimento fino a sistemi complessi connessi con pagine web e banche dati esterne. Creare uno script Per creare uno script è necessario selezionare un oggetto (uno dei tanti che avrete sicuramente realizzato) e cliccare sul tab “content”. A questo punto troverete in evidenza un pulsante “new script”. Cliccando sul suddetto pulsante apparirà un file all’interno della finestra che potrete rinominare a vostro piacimento cliccando su con il tasto destro e selezionando “rename”.
Con un doppio click sul file si aprirà una finestra all’interno della quale troverete già impostato uno script di base: default { state_entry() { llSay(0, “Hello, Avatar!”); }
u
43 [76]
SEGUE u
DESIGN touch_start(integer total_number) { llSay(0, “Touched.”); } }
All’interno di questo script troverete due stati (default e state_entry) e un evento (touch_start). Default è lo stato principale all’interno del quale solitamente vengono eseguite le operazioni ogni volta che si verifica un evento. In questo caso l’evento “touch:start” fa eseguire l’istruzione contenuta all’interno delle parentesi graffe, ogni volta che viene toccato l’oggetto. llSay è una funzione che consente all’oggetto di “parlare” scrivendo nella chat il testo tra le virgolette. In poche parole, attraverso questo script l’oggetto scriverà nella chat pubblica “Touched” ogni volta che verrà toccato. Potete provare a modificare il testo all’interno delle virgolette per ottenere un messaggio diverso.
La rotazione di un oggetto Proviamo ora ad aggiungere qualche riga al nostro script di base in modo da ottenere una rotazione dell’oggetto di 45 gradi sull’asse z. Prima di tutto sostituiamo il testo contenuto all’interno delle virgolette nella funzione llSay con “sto ruotando”.
SE� u SEGUE u
Second Life experience - parte 3
44 [76]
DESIGN
lSay(0, “Sto ruotando!”);
Proseguiamo con la compilazione dello script rimanendo all’interno delle parentesi graffe che individuano l’evento touch_start di modo che il nostro oggetto ruoti di 45 gradi solo se toccato. Ora stabiliamo qual’è il grado di rotazione attuale dell’oggetto rispetto alla land e inseriamolo all’interno di una variabile che chiameremo rot. rotation rot = llGetRot();
llGetRot() è una funzione che ci consente di conoscere il valore di rotazione attuale sui tre assi (x,y,z). Ora stabiliamo il nuovo valore di rotazione e associamolo ad una variabile di rotazione che chiameremo “delta”: rotation delta = llEuler2Rot (<0,0,45 * DEG_TO_RAD>);
le tre cifre separate da virgole rappresentano I tre assi (<x,y,z * DEG_TO_RAD>), una volta stabilita lo loro posizione è facilmente intuibile come è possible applicare diversi angoli di rotazione su diversi assi, ad es: rotation delta = llEuler2Rot (<90,0,0 * DEG_TO_RAD>); corrisponderà ad una rotazione di 90 gradi sull’asse x. Per I più curiosi la funzione llEuler2Rot viene da Eulero e DEG_TO_RAD sta per “degrees to radians”. Ora stabiliamo il valore della nuova rotazioe e assegnamola al nostro oggetto: rot = delta * rot; llSetRot(rot);
Ecco il nostro script completo: default { state_entry() { llSay(0, “Hello, Avatar!”); } touch_start(integer total_number) { llSay(0, “Sto ruotando!”); rotation rot = llGetRot(); rotation delta = llEuler2Rot (<0,0,45 * DEG_TO_RAD>); rot = delta * rot; llSetRot(rot);
}
45 [76]
}
Second Life experience - parte 2
SE� u SEGUE
DESIGN
Le applicazioni del LSL sono molte e spesso frutto della fantasia e della curiositĂ dei programmatori che popolano le isole di Second Life. Esistono alcuni riferimenti on-line come il wiki LSL (http://wiki.secondlife.com/wiki/LSL_ Portal) che forniscono un valido supporto agli sviluppatori in termini di terminologia di riferimento e di esempi pratici. Ora non vi resta che sperimentareâ&#x20AC;Ś
Una formazione divisa tra gli studi di architettura, design e di ergonomia cognitiva, dal 1999 ad oggi opera
scritto da
in diversi settori nellâ&#x20AC;&#x2122;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
46 [76]
DESIGN EYE TRACKING: ANALISI DELL’ INTERAZIONE CON IL SITO WWW.YOUTUBE.COM - seconda parte di Silvia Gilotta - silvia.gilotta@srlabs.it e Raffaella Calligher - raffaella.calligher@srlabs.it
Ancora YouTube. E ancora web 2.0. Nell’articolo precedente ho iniziato ad analizzare questo sito di enorme successo, predisponendo un test di usabilità. Il task 1, richiesto ai soggetti, ha fatto emergere un aspetto critico del sito, ovvero la ricerca di Canali: ambigua, poco lineare, ridondante. Ma con questo non si intende demolire YouTube, che anzi rimane una grande invenzione e una grande opportunità. E dirò di più: alcuni aspetti del sito funzionano bene, risultando effettivamente usabili. Per esempio, YouTube permette di caricare i propri video, per condividerli o semplicemente archiviarli, e questa operazione risulta essere molto facile da portare a termine. Anche questa volta abbiamo testato l’usabilità aiutandoci con l’eye-tracking. Vediamo i risultati… Task2: video Webcam La richiesta fatta ai soggetti-utenti era di registrare un video con la webcam e di caricarlo sul sito di YouTube. Partiamo sempre dall’impatto visivo sulla home page.
Hot spot 5 secondi video webcam Questa risulta essere poco dispersiva e molto efficace: durante i primi cinque secondi i soggetti individuano velocemente l’affordance, il tasto da cui partire per effettuare il compito, come era accaduto anche per la ricerca di Canali (vedi articolo precedente). Anche osservando un paio di percorsi rappresentativi si nota come generalmente i soggetti esplorino la pagina effettuando fissazioni prolungate proprio sul tasto “Carica”. Fissazioni lunghe corrispondono, secondo la letteratura, a stimoli facilmente comprensibili.
Percorsi 5 secondi video webcam
u
47 [76]
SEGUE u
DESIGN
Il percorso totale per portare a termine il compito risulta essere intuitivo: lo dimostra il fatto che non vengono commessi errori, e che per tutti il procedimento risulta fluente, veloce ma soprattutto univoco: durante il test, nessun soggetto trova percorsi alternativi, nÊ si perde durante la navigazione. La sequenza di pagine visualizzate dal 100% dei soggetti, per registrare e caricare il proprio video, è la seguente: step1: home page step2: caricamento video step3: quick capture step3b: registrazione e salvataggio
Hot spot step2
Hot spot step3
SEďż˝ u SEGUE u
EYE TRACKING: CAso studio
percorso step2
percorso step3
48 [76]
DESIGN
Hot spot step3b
percorso step3b
Anche l’analisi dei tempi mostra l’efficienza nel portare a termine il task, ed è anche evidenza di come l’interfaccia guidi e sostenga l’azione del soggetto. I tempi medi dei soggetti non si discostano molto dalla performance ottimale. N.B. Lo step 3b non è stato inserito perché ogni soggetto è stato lasciato libero di registrarsi per il tempo che desiderava
Tempi medi dei soggetti
Tempo della performance ottimale
Se proprio vogliamo essere pignoli, l’unico piccolo problema riscontrato dai soggetti riguarda i tag, durante lo step2. Mi spiego: prima di registrare il video, è necessario inserire in appositi campi alcuni dettagli, come il nome del video, l’argomento e, appunto, i tag. Questa è una modalità di categorizzare sul web, dando delle etichette al proprio oggetto e facendolo quindi ricadere in alcune categorie. Assegnando un tag è quindi più facile creare un data base e permettere ad altri utenti di trovare il vostro oggetto, in questo caso il vostro video.
Ritaglio area di inserimento categoria e tag, step2 In questo caso, si possono inserire i tag in due modi: scrivendo manualmente il tag nel campo vuoto selezionando i tag che sono suggeriti dal sito e che appaiono in blu sotto al campo
49 [76]
EYE TRACKING: CASO STUDIO
SE� SE� SEGUE u
DESIGN
In questo passaggio i soggetti sono leggermente rallentati, anche perché il concetto di tag non è noto a tutti. La spiegazione posta a fianco non viene letta, come si può notare dal gaze plot, risultando così inutile.
Gaze Plot area di inserimento categoria e tag, step2 Un’ulteriore prova del fatto che sui tag i soggetti ci spendano molto tempo rispetto all’intera navigazione ce la fornisce l’analisi delle AOI, le aree di interesse. Abbiamo suddiviso la pagina web dello step 2 in aree (figura1), corrispondenti ai campi da compilare e su cui evidentemente si sono concentrate le fissazioni (figura2).
Figura 1 - AOI step2
Figura 2 - hot spot step2
Successivamente abbiamo trovato la durata e il numero di fissazioni effettuate sulle varie AOI.
SE� u SEGUE u
EYE TRACKING: CAso studio
50 [76]
DESIGN
Medie della durata delle fissazioni in ms e del numero di fissazioni Si nota come su “titolo” e “tag” si effettuino fissazioni piuttosto lunghe. Il numero di è però maggiore sull’AOI “tag”: questo, come abbiamo già detto, è sintomo di uno stimolo mediamente piuttosto difficile da comprendere. In conclusione, caricare un video registrato con la webcam è davvero molto semplice. Il percorso da seguire è ben tracciato e suggerito dalle affordance presenti sulle pagine web, così chiare e cognitivamente efficaci che risulta naturale effettuare tutte le operazioni richieste. Questo potrebbe anche voler dire che non ci sono distrazioni o distrattori lungo il percorso. Ma questo poco importa. Quando l’azione da compiere, in questo caso l’interazione attraverso un’interfaccia web, scorre fluida e naturale, non si perde tempo, non ci si sente frustrati e l’utente è soddisfatto; probabilmente, durante l’interazione, oltre alla soddisfazione ha anche provato un buon grado di presenza, ovvero l’apparente sensazione di non mediazione. La tecnologia, quando funziona bene, è usabile, e sembra quasi che scompaia: smette di farci sentire il suo peso, la fatica a comprenderla e ad utilizzarla. Un gran successo di usabilità.
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
Laureata in Psicologia dello sviluppo e della comunicazione con tesi in Psicologia della comunicazione e dei nuovi media, incentrata sull’usabilità dell’interazione con siti web strumentali, web, è approdata nel 2007 alla Srlabs s.r.l. di Milano proprio per sviluppare il proprio lavoro di tesi. Il rapporto lavorativo continua, come il suo interesse per il mondo della HCI e dell’User Centred Design, oltre che per la psicologia cognitiva in generale. Attualmente sta svolgendo il tirocinio post-laurea, occupandosi di alcuni progetti in ambito psicologico e di usabilità.
scritto da
Raffaella Calligher raffaella.calligher@srlabs.it
51 [76]
FINE
52 [76]
DESIGN Didattica 2.0: l’utente al centro dell’esperienza di apprendimento di Francesco Federico - francesco.federico@gingercraft.biz
Albert Bandura, già a metà del secolo scorso, aveva capito quanto è importante la socialità nell’apprendimento. Nella sua teoria dell’apprendimento sociale, infatti, sottolineava come cognizioni, emozioni, rappresentazioni e valutazioni del discente, potessero essere stimolate ed utilizzate per guidarlo in un percorso di apprendimento. Queste teorie “antiche” assieme ad un nuovo rapporto tra studente e professore, che portano il P2P nella formazione e trasformano il professore in “primum inter pares”, rappresentano un modo inedito ed efficace di fare formazione. Come noto il Web 2.0 sta entrando anche in azienda, prendendo il nome di Enterprise 2.0, in quanto in tanti nell’ambiente business stanno comprendendo le potenzialità di questo nuovo approccio culturale supportato da nuovi strumenti tecnologici. Il business non è però l’unico campo di applicazione in cui poter declinare il Web 2.0, anche la formazione se ne può avvantaggiare notevolmente. La più grande sfida per chi oggi fa formazione non è quella di insegnare nozioni ai propri alunni, in quanto queste sono quasi sempre obsolete già nel momento stesso in cui le si insegna e se non lo sono, lo saranno ben presto. La vera sfida è insegnare ad imparare. Il docente, con un rapporto di “primum inter pares” dovrebbe guidare gli alunni attraverso un percorso che insegni loro a scoprire il mondo e ad adattarsi ai continui cambiamenti. Si calcola che nei prossimi tre anni verrà generata dall’uomo una quantità di conoscenza pari a quella generata da tutta l’umanita sino ad oggi. Un dato impressionante che deve far riflettere in primo luogo, come detto, sull’importanza del metodo di analisi più che sulla quantità di informazioni “imparate a memoria” dallo studente e, in secondo luogo, fa capire che l’organizzazione della conoscenza sarà un tema di primo piano nel prossimo futuro, nel quale sarà sempre più urgente fare emergere, tra i tanti, i contenuti di qualità. Uno dei pionieri di questo nuovo approccio è Andreas Formiconi, Professore Associato di Informatica presso la Facoltà di Medicina e Chirurgia dell’Università di Firenze, che all’inizio dei suoi corsi presenta ai suoi studenti il suo modo di intendere le lezioni e l’insegnamento. La sua attività didattica ruota attorono alla “blogo-classe”, che è composta (ma non limitata) dall’insieme dei blog del professore e degli studenti (ogni studente deve crearne uno, a meno che non l’abbia già). Questo insieme di blog e di presenza persistente online consente ai vari soggetti di interagire tra loro in modo dinamico e fluido, abbattendo distanze, tempi e timori riverenziali. La blogo-classe resta in ogni caso saldamente ancorata al mondo fisico, in quanto gli studenti possono sempre contare sulla presenza fisica del professore in Università così come possono seguire lezioni frontali e seminari “tradizionali”. La blogo-classe è quindi un’estensione, non una sostituzione, dell’attuale modo di insegnare che, tuttavia, conosce un inedito rovesciamento culturale, come lo stesso Prof. Formiconi scrive: “La prima cosa che un insegnante deve fare in una nuova blogo-classe è di creare un’atmosfera nella quale tutti percepiscano il valore della condivisione come il motore fondamentale delle attività di apprendimento: l’insegnante insegna ma chiunque può divenire insegnante non appena ha imparato qualcosa. La lezione frontale ed il seminario sono gli strumenti adatti a creare questa atmosfera. Un buono schema può essere una o due lezioni frontali all’inizio del corso e magari uno o due seminari verso la metà del corso congegnati con l’obiettivo di mettere in risalto il valore della condivisione. Sono questi gli elementi fondamentali che conferiscono salute e vitalità alla blogo-classe.”
u
53 [76]
SEGUE u
DESIGN
Il Wiki, ad esempio, può essere utilizzato per salvare la conoscenza che, all’interno di una classe, il professore vuole infondere ai propri studenti in modo dinamico. Anzichè consegnare dispense statiche, in cui le informazioni sono “imposte”, calate dall’alto da una fonte che non sempre ne sa più degli studenti, il wiki consente anche ai ragazzi di integrare le informazioni aggiungendo e correggendo i contenuti in modo semplice ed immediato.
E’ quindi chiaro che anche nella “Formazione 2.0”, esattamente come nell’Enterprise 2.0, la prima vera rivoluzione è culturale e, solo dopo, intervengono le tecnologie a supporto di un rinnovato modo di intendere l’apprendimento; tecnologie che possono essere le più disparate. Oltre a quelle già citate ricordo la piattaforma Moodle, un Course Management System Open Source che può essere usato essenzialmente in due modi: come supporto online ad un’attività didattica che si svolge offline, oppure come piattaforma di e-learning in cui tutte le attività didattiche sono svolte online. Merita infine di essere citato anche Second Life che, soprattutto nel campo dell’apprendimento linguistico, si sta dimostrando un interessantissimo strumento didattico che, già teorizzato da David Kolb negli anni ‘80, prende il nome di apprendimento esperenziale in quanto i discenti apprendono vivendo un’esperienza, in larga parte facendo uso del metodo induttivo.
I principali vantaggi di questo approccio sono: • Ruolo attivo dell’alunno • Si fa leva sull’abitudine già consolidata di apprendere dall’esperienza (metodo induttivo) • Apprendimento veloce • Potenziamento del problem solving • Stimolazione alla collaborazione
SE� u SEGUE u Didattica 2.0: l’utente al centro dell’esperienza di apprendimento
54 [76]
DESIGN Risultati estremamente positivi si sono avuti anche nello sviluppo di percorsi formativi nell’arte, grazie a ottime riproduzioni di opere d’arte visitabili in Second Life.
Le possibilità offerte oggi al mondo della formazione sono quindi tante e molte ancora in fase di sperimentazione, viviamo quindi un momento ideale per aprirci a nuove modalità di insegnamento ed apprendimento, a condizione di aver voglia di mettersi in discussione ed essere aperti al cambiamento.
Imprenditore e blogger che ama definirsi Innovation Producer perchè capace di sintetizzare le sue
scritto da
conoscenze in ambiti diversi, generando idee nuove e trasformandole in realtà. Partner di GingerCraft, società specializzata nello sviluppo di strategie di marketing crossmediale, nella quale si occupa di Project Management e R&D nell’ambito mobile, Web 2.0 e Second Life. Collabora, tra gli altri, con Appunti Digitali (blog di HWUpgrade) e Webnews.
Francesco Federico francesco.federico@gingercraft.biz
55 [76]
FINE
56 [76]
DESIGN
Gli aspetti sociali dell’Information Visualization di Daniele Galiffa - daniele@mentegrafica.it
La disciplina dell’Information Visualization è divenuta, negli ultimi anni, una delle più interessanti aree in cui poter affrontare le nuove sfide per fronteggiare una mole sempre crescente di complessità e ridondanza di “informazione digitale”. Agli inizi del XXI secolo dei nuovi fenomeni hanno permesso all’Information Visualization di ricevere l’attenzione necessaria, tanto da contribuire con un nuovo “linguaggio” alla definizione di nuove modalità di relazione tra l’utente e l’ecosistema digitale. Il mutamento della disciplina, ancora in corso, sta portando a definire in maniera chiara tutto quanto inerente due filoni molto interessanti: la sfera di quella che si può definire “Information Aesthetic” e l’insieme degli elementi che possono essere classificati come “Social Visualization”. In questo articolo approfondieremo gli aspetti della “Social Visualization” che, qualche ricercatore, ha battezzato “vis2.0”. Lo scenario: Fino a pochi anni fa (ultimi anni ‘90) l’Information Visualization è rimasto un ambito praticato da pochi ricercatori provenienti prevalentemente dalle aree disciplinari della Computer Science, HCI in particolare. Questa situazione ha determinato una proliferazione di strumenti molto analitici e perfomanti, rivolti ad una tipologia di utenti molto specifica: ricercatori e scienziati. Oltre alla specificità dell’utenza finale c’è però da considerare la eterogeneità degli ambiti di indagine e di applicazione delle prime soluzioni (dalla gestione delle foto, alla scelta di un film, alla localizzazione di unità immobiliari). La fruizione di tali strumenti era, inizialmente, per singolo utente e avveniva sul singolo computer. Duante gli ultimi anni, però, alcuni eventi hanno radicalmente cambiato questo scenario: l’avvento del web come canale di comunicazione di massa la contaminazione con l’area del Visual Design e dell’Interaction Design, soprattutto ad opera di alcuni geniali artisti (Maeda, Ben Fry, Brendan Dawes) il crescente overload di informazioni digitali Con l’intervento di questi fattori scatenanti, l’Information Visualization è divenuta una pratica proiettata ben oltre gli intenti originali; internet, poi, ne ha accresciuto la consapevolezza. In particolare l’evoluzione delle attività di condivisione, critica e re-mix di contenuto sta offrendo un nuovo scenario in cui il valore della “comprensione veloce” sta assumendo una dimensione significativa. Per “comprensione veloce” è da intendersi l’insieme delle attività che, attraverso il processo della visualizzazione dei dati, riesce a generare una buona qualità dell’informazione in relazione al fenomeno che si sta osservando. In tal senso il mix di strumenti, tecniche e metodologie proprie della disciplina dell’Information Visualization con il mix delle fonti, ha contribuito ad una fortissima diffusione della pratica, anche amatoriale, della disciplina; la conseguente diffusione di soluzioni infovis orientate alla fruizione di massa e collettiva, ha iniziato quindi a porre nuove domande in termini di soddisfazione dell’esperienza dell’utente e in termini di partecipazione alla generazione di senso.
u
57 [76]
SEGUE u
DESIGN
Per meglio comprendere il senso di questa evoluzione, si può osservare la crescita nell’uso di servizi come many-eyes (http://services.alphaworks.ibm.com/manyeyes/home), swivel (http://www.swivel.com/), gapminder (http://www. gapminder.org/) ed altri che nel giro di pochissimi mesi hanno trovato un larghissimo riscontro presso il pubblico. Tempo fa anche la stampa nazionale se ne era occupata, leggendo nel fenomeno i segni di una piccola rivoluzione: l’interpretazione collettiva dei dati che si fa strumento di approfondimento e di divulgazione e, quindi, di democrazia. Se da un lato, quindi, la “democratizzazione” del processo di rappresentazione ha permesso a molti di accorgersi del fenomeno dell’infovis, dall’altro ha indicato sicuramente nuovi spunti di riflessione soprattutto sui seguenti aspetti: A - Autorevolezza dell’informazione e delle fonti B - Paradigmi possibili della condivisione del dato e della sua visualizzazione C - Modelli di rappresentazione e di interazione, soprattutto nell’ottica della fruizione dell’informazione generata D - Apertura ad una dimensione partecipativa e critica sul senso della rappresentazione delle informazioni E - Mash-ups di dati e strumenti Del punto A si torna a discutere ogni qualvolta si parla di internet come universo dal quale si attinge e/o ogni qualvolta vengono citate cifre e dati senza illustrare il processo di produzione degli stessi (ne è un interessante esempio il “politichese” parlato in tempi di elezioni). Sul punto B si iniziano a delineare delle interessanti iniziative volte a rendere semplice ed efficace l’uso di fonti eterogenee come ad esempio i diversi servizi come dabbledb (http://dabbledb.com/), dataplace (http://www.dataplace.org/) o data360(http://www.data360.org/index.aspx) o le iniziative promosse da istituzioni autorevoli come il progetto undata (http://data.un.org/) promosso dalle Nazioni Unite. Sul punto C, invece, si manifesta quella che è la sfida più stimolante soprattutto sul fronte della progettazione dell’esperienza utente di nuovi servizi e prodotti che ambiscono ad arricchire la comprensione di fenomeni all’interno di un overload informativo sempre crescente (che potremmo definire “data noise”). Ritengo molto interessante il fatto che ci si stia muovendo in diverse direzioni per trovare le risposte opportune a tali esigenze: dalla Ambient Information Visualization, alla physical Information Visualization alla più interessante “information aesthetics” nella sua accezione di area multidisciplinare e partecipativa. Penso, inoltre, che nel campo della web based infovis ci sia ancora molto spazio per arricchire l’esperienza in rete attraverso l’impiego di nuovi strumenti e servizi capaci di consentire un sempre più agile impiego delle informazioni; una sorta di processo che rende l’informazione (o meglio l’insieme di dati) sempre più usabile, nella sua accezione di “utile e facile da usare”. Sicuramente anche l’evoluzione tecnologica ha aiutato la crescita di questo fenomeno; su tutti l’impiego della tecnologia ActionScript ha reso possibile la diffusione di strumenti web based infovis che hanno riscontrato un certo successo su un pubblico davvero vasto. Un caso esemplare è rappresentato dall’egregio lavoro del team degli interaction designer che lavora sul canale online del NY Times. Per quanto concerne il punto D è sicuramente un merito quello di aver dato voce ad un fenomeno partecipativo in cui le fonti dal basso vanno ad essere interessanti nella misura in cui, in esse, è possibile strutturare una rappresentazione che è suscettibile di un confronto oggettivo. Si apre, cioè, uno scenario in cui i numeri assumono una forma tale per cui, in funzione della loro rappresentazione, si riesce a contribuire alla creazione di un quadro informativo generale più chiaro. Il punto E si può considerare come la sintesi dei punti precedenti: il paradigma del Social Read/Write Web (o web2.0 se
SE� u SEGUE u Gli aspetti sociali dell’Information Visualization
58 [76]
DESIGN volete) che, applicato a fonti di dati eterogenei, consente agli utenti di confrontarsi e partecipare attraverso l’impiego di visualizzazioni interattive semplici da divulgare e da produrre.
Daniele Galiffa, classe 1980, è consulente per il progetto e lo sviluppo di soluzioni di UserExperience
scritto da
ed InformationVisualization, curandonela divulgazione sul blog mentegrafica.it. Presidente di VISup srl (www.visup.it), in passato si è occupato di fare ricerca, progetto e sviluppo nei campi dell’e-learning, dell’Infovis, del Knowledge Management, delle RIA e dell’OnLineCollaboration.
Daniele Galiffa daniele@mentegrafica.it
59 [76]
FINE
60 [76]
AUTHORING&MULTIMEDIA Suite Corel Draw X4 di Daniele Cerra - dan.cerra@gmail.com
Quando si parla di soluzioni software per la creatività, i pacchetti in grado di offrire delle risposte affidabili e complete a chi sviluppa grafica o progetti di design non sono molti. Tra le soluzioni più valide, affidabili e diffuse c’è sicuramente il pacchetto di software della suite Corel Draw, da qualche mese disponibile anche in italiano nell’ultima versione (chiamata X4). I professionisti della creatività digitale sicuramente avranno avuto a che fare con una delle versioni precedenti di Coreld Draw, un programma che nella sua storia si è evoluto da pacchetto per la grafica vettoriale a soluzione completa per l’editing grafico, la progettazione, la realizzazione di interfacce Web e l’impaginazione. Allo stesso modo Corel Photo Paint, software integrato nella suite X4, è stato per anni un degno rivale di Photoshop, dividendo la comunità dei grafici. Continuità e definizione Nelle edizioni passate, il pacchetto Corel Draw ha forse peccato di ambizione introducendo di versione in versione una serie di programmi e applicazioni che, spesso, non aggiungevano un gran valore ai programmi di base e che nel tempo non sono stai adeguatamente sviluppati. In quest’ottica, pare molto ragionevole aver inserito nella versione X4 “solo” i due principali software (Draw e Paint) e alcuni interessanti utilità come il noto sistema di gestione dei Font BitStream Navigator – strumento indispensabile per chi lavora con grandi librerie di font - e Corel Capture, uno dei programmi più evoluti ed efficienti per la cattura di immagini a schermo.
u
61 [76]
SEGUE u
AUTHORING&MULTIMEDIA
La riduzione e definizione dei titoli presenti nel pacchetto, in realtà si tratta di un consolidamento delle scelte effettuate già nella versione X3, segue una filosofia di continuità col passato che si estende anche alle funzionalità principali assolte dalla soluzione che, di fatto, è oggi uno strumento molto completo per la realizzazione di documenti per la grafica Web e la stampa, e all’interfaccia che, nonostante una serie di ritocchi e ringiovanimenti, risulterà molto familiare a chi ha utilizzato le versione precedenti di Corel e assai intuitiva anche per i nuovi utenti. Uno dei punti chiave del successo di Corel Draw consiste proprio nell’attenzione dedicata all’interfaccia e nella possibilità di avere il controllo totale del risultato prodotto utilizzando pannelli, funzioni e strumenti di facile apprendimento. Aggiornamento e flessibilità Pur con continuità nei confronti del passato, il pacchetto X4 apporta diverse sostanziali novità. Innanzi tutto, sempre nell’ottica di fornire un prodotto potente ma nello stesso tempo di facile utilizzo, è stato notevolmente migliorato il sistema di aiuto contestuale (una vera manna dal cielo per chi si avvicina al mondo della grafica digitale e non ha esperienza dei moltissimi strumenti impiegabili) disponibile nella colonna destra della pagina. Basta un clic su uno strumento di elaborazione per visualizzare la guida contestuale, suggerimenti ed esempi pratici di utilizzo. Inoltre è stata inserita una schermata iniziale di presentazione del prodotto che permette di selezionare rapidamente i progetti ma anche di conoscere le nuove funzionalità, cercare file o utilizzare modelli predefiniti e altri supporti grafici.
SE� u SEGUE u
Suite Corel Draw X4
62 [76]
AUTHORING&MULTIMEDIA
Trattandosi di un evoluto sistema di grafica e impaginazione, Corel Draw presta da sempre grande attenzione agli strumenti per gestire i testi. In questa versione il supporto multilingua (con tanto di correttori e sistemi di verifica ortografica/sintattica) è davvero impressionante. In fase di installazione possiamo infatti scegliere di aggiungere circa 30 lingue, nonché un numero esorbitante di formati grafici che testimoniano l’attenzione prestata da Corel per l’interoperabilità. Da sempre infatti Corel Draw si distingue da qualsiasi altro pacchetto di elaborazione grafica o impaginazione per la flessibilità con cui riesce a gestire, in importazione così come in esportazione, svariate decine di formati grafici per immagini masterizzate, vettoriali ma anche testi.
63 [76]
Suite Corel Draw X4
SE� SE� u SEGUE
AUTHORING&MULTIMEDIA
L’aggiornamento dei formati supportati da Corel Draw ovviamente coinvolge anche il mondo dei formati classici di Adobe quali PDF, AI, PNG che ora sono pienamente supportati nelle loro versioni “CS3”. Flusso di lavoro e funzionalità In linea generale molte delle funzionalità innovative introdotte da Corel riguardano una gestione ottimizzata del flusso di lavoro che, in linea con quanto accade per alte soluzioni software da ufficio, offre strumenti di collaborazione multi utente che sono stati raggruppati sotto il marchio Concept Share. Grazie a questo gruppo di funzionalità è possibile, per esempio, gestire in maniera rapida i flussi di approvazione da parte dei clienti di bozze e progetti.
Un altro gruppo di funzionalità implementato sostanzialmente in Corel Draw X4 concerne la possibilità di impaginare contenuti e gestire i testi. L’introduzione delle tabelle di impaginazione per la collocazione degli elementi grafici e le anteprime in tempo reale degli effetti su testo, così come la scelta di ridefinire i livelli assegnando più layer a ogni pagina (ricordiamo che Corel Draw riesce a gestire documenti complessi su più pagine), e la stampa unione in grado di generare output multimpli in cui cambiano alcuni dati testuali estratti da fogli di calcolo o tabelle create ad hoc, sono tra le innovazioni più interessanti.
SE� u SEGUE u
Suite Corel Draw X4
64 [76]
AUTHORING&MULTIMEDIA
Per concludere questa rapida disamina delle funzionalità di Corel X4, è doveroso un cenno alle rinnovate funzionalità di gestione delle fotografie di PhotoPaint X4. Il supporto diretto ai file RAW, l’implementazione del sistema di analisi delle immagine tramite istogrammi, le nuove curve per la manipolazione delle luci, gli effetti lente totalmente rivisti che, per esempio, consentono di sostituire range di colori o il raddrizzamento di fotografie (che non corrisponde alla normale rotazione della tavola ma effettua una vera distorsione ragionata delle fotografie inclinate), sono aspetti che, sommati alle già notevoli potenzialità delle caratteristiche preesistenti, rendono questo software un pacchetto completo per fotografi digitali.
65 [76]
Suite Corel Draw X4
SE� SE� u SEGUE
AUTHORING&MULTIMEDIA
Corel Draw X4 è un pacchetto professionale per la grafica, il Web, l’impaginazione e la stampa che offre un ottimo rapporto prezzo qualità, rapporto ulteriormente valorizzato dalla ricca dotazione di font e per l’enorme archivio di immagini e clipart (tra l’altro documentate in un completo testo cartaceo per la rapida consultazione dei supporti grafici presenti) liberamente utilizzabili anche a fini commerciali.
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
FINE
66 [76]
Light painting, light graffiti Girando per la città, sfogliando riviste, leggendo articoli e guardando foto su Internet mi sono resa conto che il fenomeno dei Graffiti non è affatto meno presente, anzi è aumentato e in continua evoluzione. Conosco un ragazzo che ha fatto di questa forma di espressione il centro della sua vita, abbiamo lavorato insieme per diverso tempo e direi che si possa definire un’artista visto il livello dei suoi disegni e dipinti. Ad un certo punto si è reso conto di quanto fosse importante dedicarsi a questo a tempo pieno, così si è licenziato, ha preso baracca e burattini e ha aperto uno spazio per la vendita di materiali e lo scambio di consigli e informazioni tra gli interessati del settore.
treno, un palazzo di nascosto, senza che nessuno abbia dato un esplicito consenso, forse perché fondamentalmente sono una persona pacifica e mi piace vivere e lasciar vivere, forse solo perché ho cercato di comprendere un punto di vista diverso dal mio prima di esprimere dei giudizi o forse perché non c’è mai stata l’occasione di confrontarci sui lati positivi e negativi di quella che a volte è certamente una forma d’arte o uno stile di vita, ma che tante altre volte è solo un modo di esprimere ribellione e di fare contestazione spicciola, passatemi il termine. In ogni caso io ho un’opinione precisa a riguardo e sicuramente non è del tutto a favore della estrema libertà di espressione dei “graffitari”. Ad esempio non sopporto quelle scritte fatte ovunque, anche su palazzi di importanza storica rilevante, monumenti, portoni, vetrine ecc. trovo che quella non sia affatto una forma d’arte, ma solo una profonda mancanza di rispetto verso gli altri (che se lo meritino o meno in alcuni casi) e un modo un po’ vigliacco di esprimere le proprie idee e, peggio ancora, per alcuni solo un tentativo di uscire dagli schemi e sentirsi grandi… detto ciò ci sono anche molte persone che invece fanno veramente dei bei dipinti e che rendono
In tutto il tempo passato insieme non abbiamo mai avuto uno scambio di opinioni sulla questione legalità o illegalità nel disegnare su un muro, un
67 [76]
piacevoli spazi tristi, vuoti e dimenticati da tutti. Come in tutte le cose ci vorrebbe controllo e buon senso, sarebbe bello poter sempre concordare
degli spazi dedicati su cui disegnare murales, ma per fare questo ci deve essere disponibilità da parte di tutti, writers e istituzioni. Sappiamo per certo che quando questo succede nascono iniziative molto interessanti come questa estate a Roma all’Auditorium http://www.auditorium. com/eventi/4924157, in alcune stazioni della Metro http://www.myspace.com/
metroareafestival, perfino UTILI in un chiostro del ‘500 INFORMAZIONI al Ghetto che per tre giorni ha ospitato 2 tra i writers più attivi del momento Bros e Ozmo. Resta comunque il fatto che i graffiti non possono essere eseguiti sempre in piena libertà dati gli spazi limitati ma che spesso vengono realizzati ugualmente in clandestinità, anche quando potrebbero dare un valore aggiunto agli spazi comuni e allora, perché non trovare una nuova forma di espressione che possa, in qualche modo, conciliare arte e vita di tutti i giorni nel rispetto delle regole? È quello che hanno fatto da qualche tempo alcuni writers o artisti, scegliendo di realizzare delle opere che utilizzano una location, una macchina fotografica e un gioco di luci, questa è quella che viene definita la tecnica del “light painting” o light graffiti. Niente vernici, bombolette spray, fuggifuggi nella notte, ma solo creatività, divertimento e opere di arte moderna originali che non ricoprono le città per la gioia e la serenità di
68 [76]
negozianti, proprietari di palazzi, Ferrovie dello
singola stanza, una strada, una foresta, non ci
Stato e ministero delle Belle Arti:)
sono limiti agli spazi
Nessuno che il giorno dopo è costretto a riverniciare una facciata e nessuno che vede la propria opera sparita a poche ore dalla realizzazione, cosa vogliamo di più? Il light painting è davvero una tecnica interessante, per avere un’idea più chiara del materiale necessario per poterla mettere in pratica riassumo qui gli elementi principali: 1.macchina fotografica con possibilità di scatti a lunga esposizione, meglio se digitale così potete vedere in tempo reale il risultato e correggere il tiro se necessario e con cavalletto compreso per garantirvi uno scatto fermo senza tremori 2. una torcia elettrica o qualsiasi cosa possa generare luce artificiale 3.una location con poca luce, anche completamente buia, può davvero essere qualsiasi posto, l’interno di un appartamento, una
69 [76]
4.immaginazione a volontà
Questa tecnica in realtà può anche essere realizzata con l’utilizzo di una video camera e diventare quindi arte in movimento oppure essere integrata con la pittura per realizzare giochi di luce e ombre ed effetti speciali.
Certo l’effetto è diverso rispetto ai murales realizzati dai writers con tecniche più tradizionali, nel complesso quei dipinti sono molto più carichi di colori e immagini, mentre in questo caso abbiamo delle opere con meno elementi grafici e meno dettagli, ma che hanno una loro armonia determinata proprio dalla scelta del luogo e dal gioco di luci che viene creato e che cambia in ogni caso, quando si tratta di giochi di luce inseriti all’interno di dipinti o immagini realizzate con molti particolari e altrettanto pieni di colore.
Questa forma d’arte è sicuramente una delle più interessanti nell’ambito dell’arte moderna e davvero una valida alternativa per chi vuole sperimentare mantenendo comunque quella filosofia di fondo che fa dei writers uno stile di vita e non una moda, del resto molti di loro hanno scelto supporti differenti da muri e treni per esprimere se stessi, come tessuti, tele e carta, quindi perchè non il video e la fotografia? scritto da
Kira Garfagnoli k.garfagnoli@comtaste.com
70 [76]
blog.comtaste.com
FROM BLOG TO BLOG
Dagli esperti di COMTASTE
Google Maps API for Flex and Flash: some tips and notes Finally the official version of Google Maps for Flash is arrived. Google has just released the Actionscript API (http://code.google.com/apis/maps/documentation/flash/) that provides map functionalities to web applications in a way really similar to the Javascript version (http:// code.google.com/apis/maps/ ). You can follow the instructions in the Setup or Tutorial pages on Google Code to easily build your web map application (http://code.google.com/apis/maps/documentation/flash/intro.html ) Here is a sample application based on data from Yubuk:
And now some hints that can be useful when creating your first Flex application with Google Maps: 1) Remember to add the .swc library provided by Google in their SDK in your compiler options. If you are using Flex Builder you can do that simply going in the project properties, under Flex Build Path, then Library Path and click Add SWC. Otherwise, if you like to use the command line, you can use the -library-path command as explained in the Google tutorial (http://code.google.com/apis/maps/documentation/flash/basics.html#Compiling). 2) Pay attention to the events: you canâ&#x20AC;&#x2122;t use the standard Flex events but you need that ones provided by the Google SDK, such as MapMouseEvent.CLICK.
71 [76]
3) Custom markers have a bug in the version 1.3. To avoid this bug there’s a workaround in Google Code. The example has a small error in the marker event listener, the event should be MapMouseEvent.CLICK (as explained above). I think that Google made a great work porting their Google Maps API to Flash. It is still incomplete but it’s already possible to see the huge potential provided by the cooperation between Google Maps and Flex. I’m sure that in the near future there will be many interesting RIA based on these technologies. Posted by Francesco Rapanà - Comtaste
Laureando in Ingegneria informatica, si è specializzato nello sviluppo di applicazioni Web 2.0
blog.comtaste.com
FROM BLOG TO BLOG
scritto da
attraverso l’uso di tecnologie quali Ajax e Zend. Appassionato delle ultime novità tecnologiche si è occupato di esplorare le possibilità di interazione tra Ajax e Flex e l’ integrazione di Google Maps con basi di dati per ottenere una migliore user experience. E’ RIA Developer di Comtaste.
Francesco Rapanà f.rapana@comtaste.com
FINE
72 [76]
blog.augitaly.com
FROM BLOG TO BLOG
blogosphere
Flash Player 10 Beta nuovo update
Seb Lee-Delisle, Mario Klingemann, Branden
Fonte: http://blog.augitaly.com/2008/07/flash_
Hall, Grant Skinner, Richard Lord, Keith Peters,
player_10_beta_nuovo_upd.html
Joa Ebert, Mark Anders, Rob Chiu, Rob
Adobe ha rilasciato una nuova versione del Flash
Bateman, Tink, Geoff Stearns, Niqui Merret,
Player 10 Beta sul sito dei labs. Adobe Labs.
Chris Allen, Carla Diana, Jared Tarbell,Mike
Oltre ad aver corretto alcuni bug noti sono stati
Downey, Richard Galvan, Mike Chambers,
aggiunti le funzionalità di accesso da tastiera per
Andre Michelle, Dr Woohoo, Lee Brimelow,
interagire con il Flash Player 10 da tastiera
James Paterson, Ben Stucki, Aral Balkan, Chris
quando si è in modalità fullscreen, ed il supporto
Orwig, Ralph Hauwert, Doug McCune, Geoff
a Ubuntu e Video4Linux v2 camera API.
Lillemon, Carlo Blatz, Stefan Richter, Neil Webb, Marco Casario, Tom Baker.
Marco Casario - blog.augitaly.com Marco Casario - blog.augitaly.com
Annunciata l’agenda della Flash On The Beach Conference 2008 Fonte: http://blog.augitaly.com/2008/07/annunciata_ lagenda_della_flash.html
La Flash on the Beach 2008 ha appena pubblicato lo schedule della conferenza. La FOTB2008 è la conferenza storica in Europa per le tematiche che girano intorno alla Flash platform. Come al solito l’evento è rivolto sia agli sviluppatori smaliziati che ai designer creativi. I nomi degli speaker sono come al solito di tutto rispetto e da soli bastano a convincervi della validità dell’evento:Jonathan Harris, Erik Natzke,Jeremy Thorp, Robert Hodgin, Nando Costa, Andreas Muller, Nicolas Lierman, GMUNK, Carlos Ulloa, Hoss Gifford, Peter Elst, Julian Dolce, Rich Shupe, Andries Odendaal, Mike Jones, Koen de Weggheliere, 73 [76]
Consigli per migliorare le performance Fonte: http://blog.augitaly.com/2008/06/consigli_ per_migliorare_le_per.html
Consigli per migliorare le performance Sono diverse le soluzioni per rendere le applicazioni in Flex più leggere in fase di caricamento. Oltre alla possibilità offerte da Flex 3 di inserire in cache le librerie del framework ci sono numerosi trucchi per velocizzare lo startup di un’applicazione. Tutti questi consigli sono stati inseriti in un interessante articolo che trovate sul blog InsideRIA. Flex RIA Performance Considerations Part 1: Getting Started http://www.insideria.com/2008/03/flex-riaperformance-considera-1.html
FROM BLOG TO BLOG
Capire il nuovo Acrobat 9 ePortfolio
Application Startup
Fonte: http://blog.augitaly.com/2008/06/capire_il_
http://www.insideria.com/2008/04/flex-ria-
nuovo_acrobat_9_epor.html
performance-considera.html
Tra le novità piu interesanti di Acrobat 9 c’è sicuramente l’ePortfolio. Ecco una descrizione
Gianfranco Torlone - blog.augitaly.com
semplice ed immediata di cosa si può fare con un ePortfolio in Acrobat 9:
Open Screen Project
“Think of the PDF portfolio as an electronic
Fonte: http://blog.augitaly.com/2008/06/open_
wrapper that can house all types of files.
screen_project.html
Acrobat 8 introduced this concept with PDF
Lo scorso 1 Maggio Adobe ha annunciato
Packages. Now with the introduction of
Open Screen Project. Di che cosa si tratta ??
powerful rich media support and Flash,
in pratica renderà disponibile alla comunità di
Adobe has renamed these packages
sviluppatori i formati SWF e FLV/F4v, che
portfolios to reflect their unique capabilities.
sono alla base di Flash, rimuovendo tutte le
Files can be organized into logical collections
restrizioni e le eventuali licenze. Con questa
and linked together in a way that makes it
mossa la società spera di allargare il bacino
easy to navigate, find, and interact with the
di dispositivi che si avvantaggeranno di
contents in a variety of useful and creative
questa tecnologia utilizzando la stessa
ways. What’s even better is that all of this
strategia di Sun Microsystem per Java. In futuro
can be shared with anyone using the free
potremmo vedere il player anche su dispositivo
Adobe Reader 9. Anyone on any platform
come i set-top box dei canali a pagamento o
can interact, participate, and save changes.
della televisione digitale ma anche su più
(I would clarify what “participate” means
dispositivi mobile. Ad appoggiare questa
here.)”
mossa ci sono diversi partner : Cisco, Intel, Lg,
L’intero articolo qui:
Motorola, Nokia, Samsung, Sony Ericsson,
http://blogs.adobe.com/
Verizon) e da fornitori di contenuti come Bbc,
educationleaders/2008/06/eportfolios_
MTv Networks e Nbc Universal..
with_acrobat_9.html
Gianfranco Torlone - blog.augitaly.com
Marco Casario - blog.augitaly.com
blog.augitaly.com
Flex RIA Performance Considerations Part 2:
74 [76]
75 [76]
BIT WATCHING Actionscript 3.0 - The Bible Autore: R. Braunstein, M. Wright, J. Noble Editore: Wiley Pagine: 735 Giudizio: Ottimo In effetti di recensioni su Flash CS3, Flex 3, Actionscript 3, ne stiamo facendo diverse. Tuttavia (e anche un pò per fortuna) ne stiamo annoverando sempre nuovi e sempre buoni! Così nell’elenco non poteva mancare questo. Una via di mezzo tra il testo di C.Mook e quello di Shupe/Rosser (gli ultimi due testi che abbiamo recensito). Anzi direi l’anello mancante tra i due. Si parte dalle basi per arrivare a lavorare in programmazione con esempi di tutto rispetto. Preciso nelle spiegazioni. Non è un testo solo per neofiti (che non vengono mai lasciati solo o allo sbaraglio) ne solo per esperti (perchè spiega minuziosamente ogni argomento trattato). Talvolta scende anche fin troppo nel dettaglio. Abitua il novizio ad un linguaggio consono, mostrandosi all’altezza per gli sviluppatori già navigati. La scaletta potrà darvi un’idea: Part I. Getting Started With ActionScript 3.0. Part II. Working With ActionScript 3.0 Objects. Part III. Working With the Display List. Part IV. Understanding the Event Framework. Part V. Working With Error Handling. Part VI. Working With External Data. Part VII. Enriching Your Program with Sound and Video. Part VIII. Programming Graphics and Motion. Part IX. Working With Binary Data. Part X. Deploying Your Program.
76 [76]