Category Archives: JavaScript

The future of Processing

Al mio rientro dal fantastico viaggio di nozze negli US, ho cercato di vedere cosa mi ero perso in un mese di completo isolamento da Internet; per 30 giorni non ho controllato mail, visto sketches, controllato le statistiche, nulla di nulla. Solo una lunga immersione in infiniti landscapes, colori mozzafiato, scenari da far West attraverso Utah, Nevada e Arizona, con punte a New York, Las Vegas e San Francisco. 6000 chilometri con mia moglie Alessandra e presto metterò sù una gallery con le foto più belle anche se già vi dico che nessuna foto renderà mai giustizia alle immagini che ho in testa, ai vasti scenari del south-west, roba da restare senza fiato, davvero.

capitol reef
Capitol Reef National Park, 52 Scenic Dr Torrey, UT 84775, USA
Painted with Processing – GC Mingati

Durante questi trenta giorni è stata pubblicata questa interessante intervista agli ideatori di Processing (Ben Fry, Casey Reas), il framework col quale indago su generative graphics, geometry, chaos, particles e qualsiasi altra cosa desti il mio interesse: Daniel Shiffman ha condotto questa intervista pubblicata su Rhizome che vi invito a leggere. Processing stà crescendo, nuove librerie ed entusiasmanti novità sono in fase di sviluppo e vedranno la luce con le versioni 1.5 – 2.0. In particolare il sistema di gestione dei video abbandonerà QuickTime in favore del framework multimediale opensource GStreamer ed inoltre Processing sarà molto meglio integrato con OpenGL, cosa che renderà il framework (le applicazioni che useranno OpenGL) molto più veloci (molti, molti più FPS…); uno degli studenti di Reas, Andrés Colubri, stà lavorando all’integrazione di GStreamer e OpenGL in Processing. Con la versione 2.0, verrà rivisitato anche l’IDE.

Interessante anche processingjs.org (ricordate il porting JavaScript delle parti 2D di Processing eseguito da John Resig? Ne abbiamo parlato qualche tempo fà in ogni modo giusto per ricapitolare in due parole si tratta della possibilità (usando JavaScript ed il tag canvas – parte integrante delle specifiche HTML 5) di effettuare un rendering dinamico di immagini bitmap; il lavoro, continuato da Al MacDonald stà portando alla nascita di una community e fà crescere l’interesse nei confronti del framework perchè permette di ‘disegnare’ senza usare le Applet Java (non è quindi necessario installare un Java runtime environment o nessun altro plugin, ma basta avere un browser di ultima generazione); inoltre la semplicità delle API e della sintassi lo rendono (e lo renderanno sempre di più) uno degli strumenti ideali per lo sviluppo di rich-user-interfaces, widgets per la data-visualization e per lo sviluppo di giochi web-based favorendo la sperimentazione ed incrementando la già notevolissima notorietà di Processing.

happy birthday jQuery

Rapidissimi auguri per jQuery, il celeberrimo framework JavaScript ideato e presentato esattamente 3 anni fa al primo BarCampNYC da John Resig. Inoltre esce oggi la tanto attesa versione 1.3; ecco alcune delle BIG features:

  • Sizzle: A sizzlin’ hot CSS selector engine.
  • Live Events: Event delegation with a jQuery twist.
  • jQuery Event Overhaul: Completely rewired to simplify event handling.
  • HTML Injection Rewrite: Lightning-fast HTML appending.
  • Offset Rewrite: Super-quick position calculation.
  • No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

E sempre da oggi, è disponibile un nuovissimo API browser.
Tanti auguri jQuery!

processing.js

processing.jsIl 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

 

jQ stripViewer

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?

strip viewerDi 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:

1
2
3
4
5
6
<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:

1
2
3
4
5
6
7
8
#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.

1
2
3
4
5
6
7
<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).

1
2
3
4
5
6
7
8
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:

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

1
2
3
$("#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:

1
2
3
4
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!

Flash video accessibili e non intrusivi

jQuery.Flash – sviluppato da Luke Lutman – è un potente e flessibile plugin per jQuery che serve ad aggiungere a runtime un ‘oggetto’ Flash. Come questo.

Loading the player…


Google, the Master Plan. © 2007 O. Halici, J. Mayer

Pages are progressively enhanced when Flash and Javascript are available, and fallback to plain (X)HTML when they’re not — like search-engines, pdas or mobile phones. Replacements can happen as soon as the dom is ready. (X)HTML, CSS and Javascript stay where they belong — away from one another — making it easy to remove, update or swap out down the road.

Il plugin, offre la possibilità di fare dinamicamente l’embed di 5 ‘tipi’ di flash movies (Basic Embed, Flash Text-Replacement – sIFR, MP3 Player, YouTube Video, Inline Params, FlashBlock). Io mi sono ispirato con lo scritp che fa funzionare l’MP3 player.

Questa la mia versione ‘ispirata’ (ma sia chiaro, basata 90% su quanto già scritto da Lutman, ma anche 98…).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 $('a[@href$="flv"]').flash(
{ src: 'flvplayer.swf'},
{ version: 8 },
function(htmlOptions) {
$this = $(this);
htmlOptions.width = '320';
htmlOptions.height = '260';
htmlOptions.flashvars.file = $this.attr('href');
htmlOptions.flashvars.image = $this.children().attr('src');
htmlOptions.flashvars.showfsbutton = 'false';
htmlOptions.flashvars.autostart = 'false';
$this.before($.fn.flash.transform(htmlOptions));
}
);

Infatti, anche se l’esempio con l’mp3 player usa l’SWF FLV 3.6 di Jeroen Wijering (che tra l’altro é il miglior .flv player attualmente reperibile), Lutman non aveva pensato ad usare questo player anche per i video.

E io, che tra elicotteri e gite fuori porta ho parecchi video che volendo potrei postare, avevo bisogno di un sistema che mi mantenga le pagine pulite e semplici da gestire e così ho ‘esteso’ lo script per le mie esigenze.

E questo metodo è perfetto.
Dovunque io voglia un video d’ora in poi, mi basterà inserire un’immagine ed un link:

1
<div class="flv-player-instance"><a href="http://www.domain/media/yourpathtovideofile.flv"><img alt="Bergen Intrepid Turbine R/C helicopter" src="http://www.gcmingati.net/wordpress/wp-content/uploads/bergen.jpg" /></a></div>

Il nostro javscript sostituisce a runtime il link con il nostro bel lettore di file flv e usa come preview l’immagine nel nostro tag ‘a’ e come path per il filmato, l’attributo ‘href’ del link.

Sounds accessible?
Enjoy!

Nota: jQuery Flash plugin su IE ha il bug “jQuery/Packer/ActiveX Bug” che sostanzialmente forza gli utenti a fare click su ogni singolo controlo ActiveX (Flash, Quicktime, etc.) in una pagina, prima di poterlo utilizzare anche se il plugin è embeddato dinamicamente via javascript. Per questo su IE bisogna prima attivare il plugin facendo click sopra al player video e poi riprodurre il filmato. E’ un bug risolvibile e comunque non credo sia bloccante… piuttosto usate Firefox!

Nota: il video qui riprodotto è stato downloadato da YouTube grazie a VideoDL.

Update da mercoledi 13 febbraio 2008: jquery.flash non é più utilizzato per fare l’embed dinamico del player di filmati Flash Video JW FLV Media Player 3.14. Al suo posto utilizzo SFWObject (formerly known as FlashObject) ed é quindi possibile usufruire della modalità full-screen (in Firefox e Opera). Gli esempi in questo post restano comunque validi nella sintassi ma è comunque consigliabile usare SWFObject per l’embed dei file Flash, ed in particolare col JW FLV Media Player vista la disponibilità di una API JS con cui controllare il playback e non solo.