Gian Carlo Mingati. Design and development for interactive media.

Il buon John ci stupisce con la sua ultima ‘fatica‘. Il porting del linguaggio di programmazione Processing in JavaScript. Processing.js (così come processing in Java), permette di realizzare applicazioni interattive e farle girare all’interno di un browser, ma la versione js sfrutta l’accoppiata js/canvas (per il momento gli esempi più ‘impressive’ girano su Firefox 3 beta, Opera 9.5 e l’ultimo WebKit Nightly built) e quindi ci vuole Firefox2, Safari3, Opera9 o IE con excanvas. A differenza di processing versione Java, che gira sotto forma di applet nel browser, processing.js usa il tag <canvas>, un ‘elemento’ HTML per mezzo del quale si può disegnare via scripting, - appunto JavaScript - creare animazioni ed effetti grafici. E’ una valida (ma non semplicissima) ed entusiasmante alternativa a Flash e sia questa iniziativa come altre, rivoluzioneranno nel medio periodo il modo di progettare e sviluppare la user interaction e l’ interface design.

Tutto questo fermento in ambito opensource conferma che il mondo continua a muoversi in questa direzione e che il browser non verrà mai abbandonato - come dicevamo nel post sulle web-tv on-demand - ma anzi, lo sviluppo degli stessi permetterà la distribuzione di WebApps sempre più sofisticate e forse, presto, sarà l’unico strumento che gli utenti dovranno avere per poter usare fogli di calcolo, applicazioni di image editing, word processing ecc. Un mondo di applicazioni distribuite che girano tutte, semplicemente nel browser. Questa é la direzione più plausibile, ed auspicabile.

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.

Per giocare con processing.js ci vuole una certa dimestichezza coi concetti chiave della programmazione OO e con JavaScript in genere. I miei complimenti a John Resig (già ideatore e team leader di jQuery), per un’altra idea davvero notevole in favore -alla fine- dell’uso di software opensource e della creatività.

Vediamo cosa si può fare con processing.js (questi esempi funzionano tutti con Firefox2 ++): cominciate con questa; non c’è trucco e non c’è inganno (Flash), e tra l’altro, a differenza di qualsiasi DIV, P e famiglia, coi canvas si possono creare forme tonde e lavorare su interazioni del genere.

Sorridete? Fà venire in mente gli ‘anni 2000-2005′ quando artisti e designers di tutto il mondo, con i loro stupefacendi ‘flash experiments’ (Praystation, Bit-101 tanto per citarne un paio tra i più innovativi… all’epoca) contribuirono a rendere Flash quello che è diventato; ma a questo punto, visto il supporto nativo dei canvas per tutti i browser di prossima release, potremmo assistere allo sviluppo di questi frameworks e di questo tipo di tecnologie per lo sviluppo di UI.

Processing.js demos
All Examples Written by Casey Reas and Ben Fry
Basic demos, topical demos, custom “in the wild” demos

In questi ultimi 12-18 mesi mi sono poco dedicato al Flash e molto agli standards. La tendenza è, in linea di massima, “Standard, Simple & Social”, progettare in maniera semplice, web 2.0 (bordi arrotondati, caratteri San Serif e lower case, menu di navigazione semplici e persistenti, “bold” logos, colori vibranti, icone e ancora icone, riflessi su superfici, molto spazio bianco, tabs, drag & drop, autocomplete, widgets di ogni tipo etc.) e di sperimentare nuove forme di visualizzazione dei contenuti e nuovi ‘metodi sociali’ di navigazione, come i tag clouds, le previews, gli annotation systems, il social bookmarking, e in generale hanno spopolato i framework javascript e le librerie di effetti per le UI. Ma… non era un post sul Flash? Con tutta questa pantomima sul web 2.0 quasi me ne ero dimenticato.

Pochi giorni fà, infatti, ho notato che Adobe ha rilasciato la update 3 (versione 9,0,115,0) del Flash Player 9. Sono andato sul sito Adobe Flash On e sono sobbalzato nuovamente sulla sedia (mi capita 2-3 volte l’anno al massimo) quando da questo sito di movie trailers noto il tasto “HD”.
Clicco e… voilà: full-screen e una definizione da-paura!

Mi ricordo che quando 4 anni fa sperimentavamo in Kyneste con i video in streaming (Flash Communication Server MX) e il player era alla versione 6, il video con flash era ancora sperimentale; lo stesso YouTube ci bombarda 4 anni dopo con video da 320px di larghezza con scarsa qualità, ma i trailers che ho visto su Flash On dimostrano come con questa release del player, Adobe abbia voluto estendendere e rinforzare la posizione di leadership nel segmento di tecnologie per il web video.

Inevitabilmente, i progetti di “desktop Internet TV” come Joost e Babelgum - che hanno investito molto per ideare qualcosa di alternativo, di simil high-definition, e per lo sviluppo di tecnologie proprietarie di video encoding, peer-to-peer networking e streaming video - subiranno dei rallentamenti, in termini di interesse da parte del pubblico; immagino che su a Milano siano sobbalzati sulla sedia anche loro, e così a Leiden. E pensare che anche io stavo per aderire alla “viewing revolution”, ma sono contento di come, tutto sommato, siano andate le cose visto che non ci siamo me$$i daccordo. Ma questa è un’altra storia e dimostra quanto sul web, tentare di affermarsi in un segmento così dinamico quale il video entertainment (entertainment e advertising online varranno ulteriori stramilioni di euro) sia davvero difficile, e ancora di più se ci si confronta con colossi come Adobe.

With the explosion of video on the Internet, a massive shift is under way in how people consume video entertainment. Television programs are being viewed not only on TV sets but also on computer screens and mobile devices. Yet challenges in creating and profiting from next-generation content persist; the future of television is online.
— adobe.com/solutions

Nessuno abbandonerà il browser (non ancora) e questo Adobe lo sa bene: con il Flash Player installato sul 99.1% dei computer collegati ad Internet e con la consapevolezza che l’80% di tutti i video streams oggi avvengono tramite Flash, é dura invogliare milioni di utenti a scaricare una desktop Internet TV application quale fonte di video entertainment. Sopratutto da questo momento in poi, ora che si può fare video broadcasting in alta definizione da fruire sempre nel “solito” browser. Certo, non è detta l’ultima parola, ma con questa mossa Adobe si aggiudica ancora una volta la leadership in un settore in grandissimo sviluppo, che nel breve periodo porterà alla nascita di nuovi servizi di video broadcasting. E’ certo che il 2008 sarà l’anno del sorpasso del web rispetto alla TV, in generale.

HD e Flash player: include da questa release il supporto per lo standard di compressione video H.264, un subset dello standard MPEG-4, lo stesso standard supportato dai device Blu-Ray e i video players HD-DVD. H.264 è anche conosciuto col nome di MPEG-4 Advanced Video Coding. In altre parole, la qualità del video ha subito un esponenziale miglioramento dalla precedente versione anche se il supporto di H.264 doveva arrivare con la versione 10 del player.

Inoltre c’è il supporto per l’High Efficiency AAC (HE-AAC) audio e “hardware accelerated, multi-core enhanced full screen video playback” e per i formati 3GP, MP4, e MOV; ovviamente l’HighDefinition si porta dietro tutti i problemi relativi alla ampiezza di banda necessaria per fare il delivery dello stesso: non aspettiamoci che per esempio YouTube converta tutto in HD rendendo impossibile lo streaming (per ora almeno), ma H.264 è comunque un codec molto più efficiente di quello in uso nelle versioni precedenti di flash player, e permette di visualizzare contenuti video di qualità assai migliore con lo stessa banda. Apple recentemente aveva chiesto a YouTube di re-encodare il suo catalogo di video nel formato H.264 per la distribuzione dei video su AppleTV e iPhone, per la stessa ragione: meno banda più qualità.

E’ iniziata la HD revolution, non ci resta che stare a guardare (nel vero senso della parola) e rimboccarci le maniche anche su questo fronte. E’ questo il bello: non sai mai come sarà domani; per non perdersi è essenziale essere attenti osservatori, avere intuito, senso critico e voglia di “vedere” cosa c’è dietro. Sempre.

Stamane sul discussion group di jQuery hanno segnalato questa simpatica (portentosa) web app: Songza - The music search engine and internet jukebox.

Songza’s primary purpose is to illustrate how to provide content using a “humane interface” - the term used to describe interfaces that reflect how people actually use software. Songza presents this concept through its clean, clutter-free design and transparent remote control. New features will be added in time.
— Jef Raskin

L’interfaccia è davvero notevole ed originale, innovativa, usabile e con un solo click si accede ad una decina di funzioni (play, share, rate, add to playlist … ) e tra i vari plugin utilizzati - eh sì plugin, perchè è fatta con jQuery - figura Thickbox dove per mezzo di finestre modali permette di ricavare - per esempio - la stringa per fare l’embed del loro player, qui visualizzato con la stessa tecnica (Thickbox), visto che c’ero.

Funziona in parte per mezzo delle API di YouTube, e sostanzialmente cerca tra i “video” quelli musicali e li riproduce su di un minuscolo flashplayer privato dello stream video, e quindi si sente solo l’audio. Grande idea, ottima interfaccia, stupenda webapp.

AIR: Adobe Integrated Runtime.

E’ il nome in codice per un sistema di runtime multi piattaforma che permetterà agli sviluppatori di utilizzare le “solite” tecnologie (Flash, Flex, HTML, CSS, JavaScript/ Ajax) per creare e distribuire Rich Internet Application (RIAs) sul desktop.

Quale è la più grande limitazione di una web app? Il fatto di “girare” dal web: cioè non poter interagire direttamente col sistema operativo. Le applicazioni web si sono trasformate col tempo da “semplici siti” a complesse/molto complesse applicazioni e tutto ciò ora mette in luce le limitazioni dello sviluppo all’interno del browser: operazioni “di base” come copiare, salvare o creare file, non sono possibili visto il modello di sicurezza dei browser web che non può avere accesso al file system della macchina su cui gira.

Adobe® AIR™, formerly code-named Apollo, is a cross-operating system runtime that allows developers to use their existing web development skills to build and deploy rich Internet applications to the desktop.

AIR combina la semplicità del modello di sviluppo e deploy del web, con le ricche funzionalità del modello di applicazioni desktop; permette alle Rich Internet Applications di essere distribuite al di fuori del browser e di poter accedere alle funzioni del sistema operativo utilizzando come tecnologie di sviluppo Flash, Flex, HTML e AJAX.

Marco Gallotta sembra essere stato il primo a ’scoprire’ una hidden feature in Google Earth 4.2: un flight simulator.

Stamane ho voluto provare io stesso. Ho installato la nuova versione, ho premuto i tasti Ctrl+Alt+A et voilà: mi si è aperto un Flight Simulator! Carramba che sorpresa!

Essendo in fissa per tutto ciò che vola o che simula il volo, beh mi sono messo subito in pista, per così dire. Partenza da Kathmandu con un SR22 (ma si può scegliere anche un F16) e voletto con comandi da tastiera. Da tastiera è difficile essere ‘proporzionali’ nei comandi quindi sopratutto il rollio è una tragedia, però se consideriamo che davvero si può volare in tutto il mondo questa si che è una bella novità per i GE users.
Questo l’elenco dei controlli.
Considerando inoltre che questa è la prima relase sono certo che alcune cosette ‘mancanti’ come le visuali e più modelli saranno disponibili nelle prossime releases.

Un post brevissimo, per appuntare qui un altro ‘giant leap’ nella mia curva di apprendimento di jQuery e tecnologie Ajax. Stavolta (per un progetto reale) ho realizato un paio di prototipi di newsticker(s) in Ajax con jQuery che si prendono i dati da un file XML. E’ qui la differenza. Con jQuery è molto sempice fare il parsing di un file XML ed è molto semplice applicargli degli effetti.
Fading | Scoll continuo con pausa in hover

John Resig, ideatore e lead developer di jQuery JS library, ha annunciato oggi la release della versione 1.1.3 che come potete verificare voi stessi dallo slick speed test, il DOM traversal (selettori CSS e XPath) è ora più veloce dell’800%!
In 4 punti:

1. We’re over 800% faster than we were in jQuery 1.1.2.
2. We’re the fastest framework in the most popular browser, Internet Explorer 6.
3. We’re the only framework that doesn’t give incorrect results.
4. And all of this comes at no expense to you ― jQuery is still the same 20KB that you’ve come to expect and enjoy.

Tutto ciò, con mia grande soddisfazione dimostra che quando quasi un anno fa ’scoprii’ jQuery e pensai che questa davvero sarebbe stata una javascript revolution per i designers non mi sbagliavo.

Dopo avere sperimentato un altro pò con la galleria di immagini realizzata nel precedente post, ho realizzato il mio primo plugin ufficiale per jquery: slideViewer.

Si usa molto banalmente; si parte da una lista non ordinata (UL) con dentro delle immagini. Gli si dà un ID (id=”marspanorama”) ed una classe (class=”svw”) e in perfetto stile jQuery gli si ‘applica’ il plugin dopo avere atteso che sia il DOM sia le immagini si siano caricate:


$(window).bind("load", function() {
$("div#marspanorama").slideView();
});


27 giugno 2007: enhanced tooltips
Una cosa che mi ha portato a verificare se un altro plugin poteva essere integrato in slideViewer opzionalmente, e cioè che potesse funzionare con o senza altri plugin estendendo le sue features, è stato il numero di feedback ricevuti sulla discussion list di jQuery.

Commenti come questo, proprio dall’inventore dell’utilissimo toolTip plugin mi hanno fatto molto piacere:

Now, how cool is that? Great stuff. I love the backinout easing. I consider integration of plugins the toughest part of all plugin development, nice to see some great work getting done on that matter :-)

In un paio di giorni (non full-time eh, ho anche gli elicotteri da far volare…) ho integrato il tolTip plugin e ho reso parametrizzabili il tipo di animazione e la sua durata. Il tutorial con gli esempi sono sempre alla stessa pagina comunque posto in queste due righe:


$("div#mygalthree").slideView({
easeFunc: "bounceinout",
easeTime: 2400,
toolTip: true
});


Si tratta del comando che diamo nell’head della nostra paginetta html se vogliamo creare un galleria di immagini che abbia 2 secondi e quasi-mezzo di durata della transizione tra un foto e l’altra, e che rimbalzi per esempio tramite la funzione bounceinout. Ah appunto, vogliamo anche un tooltip un pò gajardo…

et voilà, slideViewer plugin per jQuery.

Got it, thanks. Fantastic, most lightweight/best slide carousel out there. money. :-P
— E.

Una lista di siti che usano jquery.slideviewer aggiornata al 01/04/2008:
Zachary Zavislak Photography
Di Stefano landscaping
Rival Songs

Come probabilmente si é capito da vari post su questo sito, tra i miei interessi al momento c’è jQuery, questo framework JS che sta rivoluzionando il mio modo (ma non solo il mio) di scrivere javascript (il behaviour di una pagina).
Inspirato dagli effetti in dynamic HTML di questo sito e dalle ormai ‘vecchie’ interfacce in Flash tutte sliding e rimbalzanti, mi sono detto: ma perchè non farne una con jQuery?

Di componenti slideShow in js o scritte anche con jQuery già ce ne sono, quindi non mi sono inventato nulla di nuovo, ma ho creato una base su cui lavorare. L’obiettivo é arrivare alla realizzazione di un plugin jQuery per visualizzare delle immagini in una mini-gallery e tale gallery dovrebbe essere parametrica cioè funzionare a prescindere dal numero e dimensione delle foto. Un motore che vada bene per foto grandi e piccole e basato sull’ormai standardizzato concetto che il javascript nelle pagine deve essere “degradabile” e cioè che se l’utente non ha l’interprete JS abilitato nel browser, semplicemente non vede gli “effettini” ma ha accesso comunque ai contenuti.

E così ho creato uno stripViewer (no, non ci sono donnine nude; per strip intendo una ‘fascia’, e cioè un’immagine lunga di cui si vede solo una porzione), e cioè un componente che ‘muove’ con un effetto easing le immagini della gallery, rivelandone solo una alla volta. Il tutto a partire da un markup semplicissimo, come questo:

<ul>
<li><img width="200" height="100" alt="307 r/c airliner" src="stripViewer01.jpg" /></li>
<li><img width="200" height="100" alt="307 r/c airliner" src="stripViewer02.jpg" /></li>
<li><img width="200" height="100" alt="307 r/c airliner" src="stripViewer03.jpg" /></li>
<!-- eccetera -->
</ul>


Ok vediamo nello specifico che ci facciamo con questa lista. La lista è una banalissima lista flottata (così tutti i LI sono orizzontali) e all’interno di ogni LI abbiamo messo un’immagine.
Ok una lista di immagini. Bene, ci mettiamo intorno una DIV col seguente stile:


#stripViewer {
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
border: 5px solid red;
margin: 2em 0;
}


Bene, si vede che questa DIV funge da maschera per il suo child (la lista UL) e ne rivela solo 200px; quindi tutte le immagini le dobbiamo fare 200px? Si, fino a che non avrò reso parametrico il valore width del container della lista…
Ok e ora?
Ora creiamo l’interfaccia. Una serie di ‘bottoni’ che comandino la gallery.
Partiamo sempre da una lista. Le liste, ricordate, sono la chiave per scrivere la struttura di un sito: tutto può essere una lista.


<ul>
<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>
<!-- tanti Li quanti sono quelli della lista immagini -->
</ul>


Ok, a questo punto aggiungiamo un pochino di javascript (jQuery).

var steps = $("#stripViewer>ul > li > img").attr("width");
$("#stripTransmitter ul").find("a").each(function(i) {
$(this).append( (i+1) );
var cnt=-(steps*i);
$(this).click( function() {
$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
});
});


Vediamo come funziona:

var steps = $("#stripViewer>ul > li > img").attr("width");

Qui cerchiamo la dimensione delle immagini nella lista. Si, devono essere tutte della stessa larghezza (ma lavorerò anche su questo per svincolarla dalle dimensioni fisse e renderlo così parametrico).
L’attributo width delle immagini mi torna 200px.
Ok quindi gli step da fare sono tuti da 200. Ad ogni click ’scorro’ sull’asse x di 200px o multipli di esso (a seconda del tasto premuto).

$("#stripTransmitter ul").find("a").each(function(i) {
$(this).append( (i+1) );

Qui per ogni tag A nella mia lista in “div#stripTransmitter” stampo (.append()) il numero. Otteniamo così una lista con bottoni numerati da 1 a n.

E ora la parte divertente:

var cnt=-(steps*i);
$(this).click( function() {
$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
});

Qui la variabile cnt vale 200(steps) moltiplicato l’iteratore (i) quindi varrà 200, 400, 600 ecc.
Sul click di questi tag A nella nostra lista in “div#stripTransmitter” usiamo il metodo .animate() per dire che ci spostiamo a sinistra, quindi negativamente (-) per i pixel passati da steps , in 750 millesimi di secondo con animazione easing di tipo “expoinout”. per funzionare necessita ovviamente di jQuery Easing Plugin v1.1 ma se usassimo i metodi built-in di jQuery ci basterebbe scrivere “slow” al posto di “expoinout” e funzionerebbe lo stesso, ma senza easing effect.

Et voilà, uno stripViewer con jQuery.
Demo1: stripViewer di un’ unica immagine lunga
Demo2: stripViewer di una serie di immagini in una lista

Enjoy!

Street View é una nuova feature di Google Maps che permette di navigare panorami (Adobe Flash) a 360 gradi, ad alta risoluzione, ad altezza della strada di varie (per ora, poche) città degli Stati Uniti. Google ha investito $25 (milioni) per l’operazione ed evidentemente per scattare tutte queste foto ha sguinzagliato i suoi “geeks” in giro per le città. Ecco il tipo di macchina fotografica impiegata.

La cosa simpatica che sta avvenendo, mentre questa nuova feature viene sempre più usata, é che ci sono siti che raccolgono le stranezze di Street View e cioè foto di persone e cose, che a causa dell’adattamento e della post-produzione necessaria a ricreare tutti questi panorami in Flash, appaiono stravolte nelle sembianze, addirittura senza faccia, o immortalati quando meno se lo aspettavano…. guardate un pò voi. Ma chissà cosa dicono le persone fotografate. Avranno dato l’autorizzazione a Google per diffondere le loro foto? Non credo proprio, si vede chiaramente che queste foto sono state scattate in maniera pseudo-automatizzata (ogni tot. metri).

With Street View, you can virtually explore city neighborhoods by viewing and navigating within 360-degree scenes of street-level imagery. It feels as if you’re walking down the street!

Io già ho visitato ‘a piedi’ tutta l’area vicino al bay bridge a San Francisco e vi assicuro che questa nuova feature é davvero fantastica e certamente diverrà popolare molto presto. Provate voi stessi.

Queste le città visibili ad oggi: San Francisco Bay Area, New York City, Las Vegas, Denver and Miami.