Tag Archives: ui

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

 

Songza

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.

Vini nel Mondo

Vini nel mondo.org è il sito di una delle più importanti rassegne d’incontro tra produttori e consumatori di vini, ambientata in una città gioiello, quale è Spoleto.

Dal 1 al 3 giugno prossimi, Spoleto torna ad essere la capitale italiana dell’eccellenza enologica. Il programma dell’ appuntamento del vino per gli appassionati, prevede una ricca esposizione di cantine ed etichette, un fitto panorama di degustazioni, incontri e spettacoli, un’importante asta di beneficenza e, per il pubblico del sabato notte, una scintillante seconda Notte bianca del vino.

Quest’anno siamo alla terza edizione e per il secondo anno consecutivo ho curato la direzione tecnico-creativa ed il graphic design del sito; a differenza dell’anno scorso però, non ho sviluppato il markup ed i CSS perchè questi ultimi sono stati realizzati da una società di giovani professionisti di Spoleto che hanno anche realizzato un bel CMS in PHP.

vnm150507

Il risultato finale è un bel portale, che rispecchia in pieno quanto già ideato da Meet per il BTL; abbiamo usato SlideShowPro e jQuery (thickbox e curvy corners) e devo dire che sono stati implementati in maniera egregia.

Un sito moderno dunque, facile da navigare e pieno zeppo di contenuti.

Correte a Spoleto dal 1 al 3 giugno e… buoni vini nel mondo a tutti!