Il cardine del progetto è Popcorn.js, una libreria javascript che facilita l’integrazione di un video (html5) nella pagina web e agevola l’interazione dell’utente con il video.
Come è scritto nell’home page della library, Popcorn serve a integrare il web in una produzione video. Cosa vuol dire? Non solo controllare la riproduzione del video dalla pagina web, ma anche fare in modo che sulla pagina accadano determinate cose in un preciso istante del video. Un paio di esempi che mi vengono in mente: far apparire delle mappe in una parte della pagina, mentre nel video vengono inquadrati dei luoghi, oppure mostrare il transcript di un intervista, in sincrono con l’intervista stessa.

Ma le potenzialità della library sono decisamente maggiori ed esempi anche più complessi sono già visibili facendo partire il video di presentazione della libreria che c’è nell’home page di Popcorn.js oppure nella sezione demo.

Di recente è stato presentato One Millionth Tower (visibile qui), un documentario che racconta come potrebbero essere riqualificate alcune zone popolari di Toronto.

One Millionth Tower è anche uno spettacolare esperimento di documentario interattivo. Si presenta con un interfaccia tridimensionale all’interno della quale l’utente può muoversi e sfrutta Popcorn.js per permettere all’utente di interagire con il documentario stesso (sottotitoli, scelta di quale parte del documentario visualizzare etc.) e per integrare in alcuni momenti del video informazioni da Wikipedia, Twitter, Flickr, Google Maps e altri servizi.

Popcorn è evidentemente di uno strumento potentissimo per chi fa storytelling. Può essere usato per arrichire un video con informazioni che vivono a margine del player, nella pagina web, e probabilmente sarà questo il modo in cui molto spesso verrà utilizzato. Ma si può anche immaginare un utilizzo più radicale, come quello che si è visto in One Millionth Tower: un utilizzo nel quale il video è solo una parte dell’esperienza complessiva e coesiste, è coordinato, è pensato e progettato per avere un senso con altri tipi di contenuti ugualmente importanti, mentre chi fruisce il video viene chiamato a fare delle scelte, cliccare, interagire, intervenendo sulla riproduzione del filmato.

Le possibilità sono infinite e certo non mancheranno esperimenti e progetti in cui ritroveremo il video un po’ più ipertestuale e lo spettatore un po’ più utente (specialmente se prenderanno piede soluzioni come Popcorn Maker, l’interfaccia visuale che permette anche ai non sviluppatori di realizzare video interattivi con Popcorn).

Joyride è un plugin jQuery che permette di aggiungere questo tipo di tour alla pagina in maniera molto semplice: si tratta di creare una lista con i contenuti da visualizzare di volta in volta ad ogni step del tour (in questa lista si identificano – tramite ID – gli elementi della pagina su cui applicare i tooltip, e quindi a livello di javascript, chiamare il metodo joyride.

Inevitabile quindi che sia arrivato il plugin per jQuery che permette di creare timeline in una pagina html. Il punto di partenza, a livello di markup, sono un paio di liste UL, poi fa tutto il plugin, o quasi. Da provare: timelinr

Una soluzione che è piaciuta a molti è questa specie di “foto comparativa” con la quale è possibile confrontare due foto scattate dal satellite sulla stessa zona ma in due diversi momenti, prima e dopo la catastrofe.
Trascinando il cursore (che nell’immagine qua sotto vedete in blu, proprio al centro) si scopre la foto del “prima” e si copre allo stesso tempo la foto del “dopo”, e viceversa. In questo modo si possono confrontare facilmente le due immagini e rendersi conto della devastazione che quei luoghi hanno subito.

Il New York Times ne pubblica otto, una dietro l’altra, in questa pagina: Satellite Photos of Japan, Before and After the Quake and Tsunami.
Troviamo lo stesso tool su Der Spiegel (con l’aggiunta di un menu per muoversi tra le varie foto disponibili): Tsunami-Satellitenbilder: Der Tod kam aus dem Meer, sul Guardian: Japan tsunami – before and after pictures e sull’Herald Sun Before-and-after interactive photos from the Japan earthquake and tsunami.
Alcune sono fatte in flash, altre in html+javascript.

Venendo in Italia, anche il Corriere.it ne fa una gallery: Prima e dopo il sisma, le foto interattive, e rispetto agli altri – a parte la solita tremenda pratica di aprire la pagina in una popup – troviamo un dettaglio in più: in ogni visualizzazione ci sono due link che permettono di passare da una foto all’altra e viceversa molto rapidamente, senza dover fare drag’n'drop, amplificando l’efficacia del confronto tra le due foto.
È una scelta azzeccata, perché la velocità e la naturalezza della transizione è fondamentale per rendere l’idea del cambiamento. Mi viene in mente un’altra foto interattiva, Signs of Occupation, nella quale per dare risalto alle conseguenze dell’occupazione USA di Baghdad, Maps of war aveva optato semplicemente per una dissolvenza incrociata comandata da un pulsante “change view”, puntando tutto sull’immediatezza della transizione per aumentare il contrasto tra le due immagini.

Link: so you still think the Internet is free

Nulla contro le impostazioni di default del browser, ma, se serve, questo comportamenteo può essere modificato con Javascript e l’aspetto della finestra può essere personalizzato attraverso i fogli di stile.

trovate il tutorial e il relativo plugin per personalizzare questa finestra di dialogo su tutorialzine: How to Create a jQuery Confirm Dialog Replacement

Ma Webdesignerwall ha pubblicato un’interessante variante, che sfrutta le potenzialità dell’elemento CANVAS di Html5.

Le immagini in stato normale vengono renderizzate in bianco e nero, mentre al passaggio del mouse l’immagine gradualmente recupera i colori originali. La manipolazione di CANVAS avviene attraverso jQuery. Il tutorial è qui: HTML5 Grayscale Image Hover.

Se utilizzate SWFobject per embeddare correttamente nella pagina web i filmati flash in formato SWF (trovate tutte le ragioni per farlo, e come farlo, in questo post su swfobject e file flash che ho scritto qualche mese fa), e al contempo utilizzate JQuery come libreria javascript, non potete rinunciare a jQuery SWFObject Plugin.

Una volta che framework e plugin sono stati richiamati nella pagina, è sufficiente una riga di codice per embeddare il filmato. Ecco un esempio:
(supponiamo di voler caricare il filmato “mymovie.swf” nel div “swfdiv”):

$(document).ready(function () {  
 $('#swfdiv').flash({swf: 'mymovie.swf'  });  });

Tra le features previste e documentate anche il supporto per le flashvars.

$(document).ready(function () { 

$('#swfdiv').flash({

 swf: 'mymovie.swf'  

 flashvars: {  name1: 'value1', 
 name2: 'value2',
 name3: 'value3'  }

});

});

Se siete su twitter ci sono tra gli altri  un paio di account che potete seguire (oltre il mio).
@mootols: l’account della ormai celebre libreria javascript rilancia snippet, plugin, tutorial e in generale spunti legati a mootools, appunto.

Ovviamente è da seguire anche l’omologo account, legato al framework messo a punto da John Resig (e che da queste parti si adora)  @jquery.

Se anche voi seguite qualche account twitter che raccoglie risorse per designer o sviluppatori, fatevi sotto nei commenti..

In questo tutorial scopriremo una nuova risorsa per riprodurre un file flv nel nostro sito utilizzando: FLOWplayer, ma la logica che seguiremo per embeddare il player sarà la solita: utilizzeremo javascript e il DOM per inserire il player swf all’interno di un elemento della pagina; il player quindi riprodurrà il video flv. Il risultato sarà simile a questa demo.


Sia il player, sia la libreria javascript sono contenute nel pacchetto d’istallazione di Flowplayer che possiamo scaricare qui. Sul sito di Flowplayer troveremo tre possibili download, e tre possibili licenze, a seconda dell’uso che abbiamo in mente per il player (per un utilizzo commerciale, flowplayer è a pagamento).

L’installazione base del player prevede tre step.
Innanzitutto è necessario includere lo script nella pagina:

<script type="text/javascript" src="flowplayer-3.0.0-rc3.min.js"></script>

Quindi è necessario impostare l’elmento della pagina html che verrà sostituito con il player. Il funzionamento dello script ci permette di specificare semplicemente un link diretto al file FLV al quale, perchè javascript e il DOM funzionino, è necessario assegnare un ID. Chiaramente, lo stile (nel quale in particolare vengono specificate le dimensione del player) può essere assegnato anche con un css esterno.

<a  	 href="video.flv"  
	 style="display:block;width:400px;height:300px"  
	 id="player"> 
</a>

A questo punto richiamiamo la funzione javascript flowplayer, specificando due parametri: l’ID del link da sotituire, ed il nome del file swf da utilizzare come player:

<script>
	flowplayer("player", "flowplayer-3.0.0-rc3.swf");
</script>

Questo è quanto, se è tutto corretto e javascript è attivato, il player dovrebbe funzionare a dovere, proprio come si vede nella demo.

Quella che abbiamo appena visto insieme è l'implementazione minima di Flowplayer (come è documentata anche sul sito di FP). Nei prossimi post vedremo in che modo customizzare il player, e capiremo come sfruttare a pieno lo script per far sì che il video sia comunque accessibile. Ottimi motivi per iscriversi al feed rss di danielerollo.com: stay tuned...