Gian Carlo Mingati. Design and development for interactive media.

Ieri mi sono imbattuto in questi due post: Is it time for CSS 2.2? di Roger Johansson e CSS2.2 di Andy Budd.

Si tratta di un paio di riflessioni sull’ argomento Cascading Style Sheets e sulla lentezza con la quale il W3C sta lavorando: é infatti dal 1999 che si attende la release ufficiale dei “moduli” CSS3 (cioè delle specifiche da implementare nei browser al fine di supportare la nuova sintassi CSS3).

The early pace of CSS development was pretty impressive. First proposed by Hakon Lie in Oct 1994, CSS1 became one of the first W3C recommendations in Dec 1996. Nipping at its heals, CSS2 became an official recommendation in May 1998, just 18 months later. By June 1999 the first 3 draft modules of CSS3 had been published, and in their ground breaking book published that same year, Bert Bos and Hakon Lie postulated that CSS3 would arrive sometime in late 1999.
Over 7 years later, and we’re still waiting. This begs the question, what went wrong?

Per noi designers e developers, già avere il pieno supporto da parte di tutti i browser in circolazione, almeno della sintassi CSS2.1 già sarebbe cosa buona perchè non dovremmo usare selettori differenti per ogni tag a seconda dei browser (sopratutto per Microsoft Internet Exploder, che anche nella versione 7 non ce l’ha fatta a supportare almeno un paio di selettori decenti… ma si sapeva… infatti io ancora non me lo sono installato).

Solo Mozilla/Firefox supporta quasi del tutto la sintassi CSS2.1 ma addirittura supporta alcune delle cool features di CSS3 come i multicolumns layout, rounded corners, alcuni potenti selettori di attributo…
Il problema dei CSS riguarda in generale anche il futuro del web perchè se i browser vendors da un lato hanno enormi difficoltà ad implementare le direttive W3C, c’è anche da dire che il W3C stesso sta impiegando troppo tempo a definire il futuro del web, dimenticandosi nel frattempo del presente. Comunque se volete dare un’occhiata alle ‘cool features’ di CSS3 (cool features per designers, ovviamente) guardatevi questo sito e il PDF che Andy Budd aveva preparato per una recente conference sui web standards in Scozia.

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.

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!

Allacciate le cinture. Questo é il test di volo con camera on board effettuato sabato 13 maggio col mio elicottero elettrico classe 600 QuickWorldWide EP10 sopra i campi adiacenti alla mia nuova casa nelle campagne a nord di roma.
La camera è una coolpix s50 attaccata al telaio tramite del Velcro ed isolata dalle vibrazioni tramite una banale spugnetta.

Coi 150 grammi scarsi della s50 la manovrabilità non è influenzata, la potenza è più che sufficiente per almeno altri 100 grammi di carico quindi c’é ancora margine. Il volo dura 4 minuti perchè comunque non ho voluto surriscaldare il sistema. La prossima volta dovrò inclinare di meno la camera, volare più lento e fare virate più dolci.

Enjoy the flight!

Esigenza:

Inserire dinamicamente un’icona, posizionarla in maniera relativa (position: relative;) senza conoscere le dimensioni del container. E fare in modo che funzioni anche su Opera

Si lo so, il titolo è un pochino ‘criptico’ ma i miei colleghi developers e designers forse intuiscono che Opera9 è un browser e ‘posizionamento relativo’ ha a che fare coi CSS.

Ancora non ci siamo? Mi riferisco al bug in cui mi sono imbattuto in relazione al posizionamento ‘relativo’ di un elemento in un altro elemento di cui non è dichiarata la larghezza.

Prendiamo come esempio due siti che utilizzano questa tecnica, di
apporre una gif sopra alla thumbnail (quindi posizionato in maniera relativa) di un video: YouTube e MTV.

Anche io volevo la mia iconcina ma su questo mio blog, le cose non sono così semplici.

Vediamo perchè:

1. Le immagini non sono necessariamente larghe sempre 150px
2. Il wrapper del ‘blocco’ immagine + ombra non ha dimensione fissa
3. Vorrei evitare di ’sporcare’ il codice inserendo “a mano” l’icona
4. Inoltre poichè le immagini con ombra non hanno sempre la stessa dimensione (io le creo da Photoshop larghe 150px, ma come avevo spiegato l’ombra è dinamica e prescinde dalle dimensioni) ed il loro container div non ha dimensione definita, position:relative non funziona su Opera9, che mette l’icona spostata alla destra delle immagini, invece io le voglio sopra alla thumnail

Vediamo ora come ho risolto il problema, con jQuery e come appare la ns. immagine “ingrandibile”.

Come potete notare se fate click sull’immagine, questa si apre nella sua versione originale (non è ingrandita, in realtà è sempre la thumbnail) e non ha l’icona. Ok, l’icona è stata aggiunta a runtime con jQuery.

Ma vi ricordate che ho detto? Opera vuol sapere le dimensioni del container altrimenti per lui position:relative non funziona correttamente.
Ok allora tramite il ns. jQuery possiamo sapere quanto è “largo” qualcosa:

$('img.dropshadow').width();

Questo mi ritorna la larghezza dell’immagine nel link (la thumbnail).


var tbWrapperWidth = ($('img.dropshadow').width() + 34);

Qui creo una variabile che vale la larghezza dell’immagine + il margine necessario per staccare immagine ed ombra dal paragrafo di testo.


$('div.tb-wrapper').css({ width: tbWrapperWidth });

Qui assegno al div che mi avvolge tutto, uno stile in linea che definisce la larghezza in pixel tipo: style=”width: 184px;”
E qui è il trucco. Ora Opera conosce la larghezza del wrapper e mi posiziona l’icona correttamente.

Il resto del codice, tramite il metodo .prepend(content) di jQuery aggiunge la mia icona ed il gioco è fatto.


var tbWrapperWidth = ($('img.dropshadow').width() + 30);
$('div.tb-wrapper').css({ width: tbWrapperWidth });
$("a.thickbox").prepend("<img
class='tb-larger' src='http://www.gcmingati.net/wordpress/wp-content/uploads/tblarger.gif' alt='larger view' />");
});

Enjoy!

modostudio.net è il sito dello studio di architettura dei miei amici Giorgio, Roberto e Fabio.

modostudio si occupa di progettazione architettonica, urbanistica ed industrial design coniugando alla sperimentazione, teoria, ricerca ed innovazione architettonica una elevata conoscenza tecnica e professionalità, grazie alla integrazione delle rispettive competenze dei suoi partners ed alla continua collaborazione e contributo di esperti.

Il sito, di cui ho curato il design e lo sviluppo del front-end è realizzato in (x)html semantico.

Si contraddistingue per la leggerezza del markup, la semplicità di gestione, per il suo design così pulito che fa risaltare i bellissimi rendering realizzati da Fabio e visualizzati tramite il flash component SlideShowPro.

E’ ufficiale e a luglio uscirà il libro “Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques” di Karl Swedberg e Jonathan Chaffer e allora si che inizieremo a fare sul serio, col jQuery.

Anche perchè qui in ufficio sono tutti entusiasti (ho fatto delle demo con dei piccoli snippet di codice per qualche progetto qui e lì), ma altrettanto riluttanti ad usare la documentation o le risorse in rete perchè anche se è fatta molto bene e ricca di esempi, non parte proprio da zero, ma dà per assodati alcuni princìpi e se non si è fatto alcun ‘esperimento’ non è che jQuery sia così immediato.
Come dice il titolo, il libro è scritto per essere comprensibile per tutti coloro che hanno un background da ‘web-designer’ che non hanno molta - o nessuna - esperienza col javascript. Consideriamo che questo è un ‘altro modo’ di scrivere javascript e appunto, la potenza stà nella sintassi che va ‘digerita’ e un bel libro aiuta molto.

Gli elicotteri possono atterrare senza l’ausilio del motore compiendo una manovra che si chiama autorotazione. Questa manovra permette di atterrare in sicurezza in caso di avaria grave al motore e viene ripetuta più volte durante l’addestramento per il brevetto di pilota di elicotteri (veri).

Per quelli r/c come il mio, non è necessario un brevetto ma vi assicuro che fare un’autorotazione col modello o con quello vero è comunque una smaltita. Un’incredibile planata fino a terra, mantenuta sempre sul limite ed eventualmente pure con lo stomaco nelle orecchie, in quello vero.

Le ferrovie francesi hanno stabilito il nuovo record mondiale di velocità su rotaia raggiungendo i 574,8 km orari con un Tgv speciale. Il record è stato segnato sulla nuova linea East European LGV; di potenza doppia rispetto al Tgv normale, la vettura denominata V150 e costruita da Alstom ha ampiamente battuto il precedente record di 515,3 chilometri orari stabilito il 18 maggio 1990 da un Tgv francese tra Parigi e Tours.

In Italia vuoi per le condizioni geo-morfologiche, vuoi per i soldi che si mangiano quelli in poltrona a Roma, non avremo mai un treno del genere. Un mio amico mi faceva notare che però l’ETR (Eurostar) che abbiamo noi potrebbe andare anche più veloce di quanto va, ma mancano le infrastrutture cioè linee veloci. Comunque, ormai abbiamo un gap tale con altri Paesi della UE che non credo riusciremo mai a riprenderci… boh(?!)

Questa è la ns. nuova casa, situata nelle campagne a nord di Roma, precisamente a Formello. Contiamo di terminare il trasloco entro sabato 7 aprile.

Ci sono 4 cavalli, 6 cani + il mio, un pò di gatti ed il posto si trova in discesa tra due colline; c’è un bellissimo verde tutto intorno, si respira aria buona, ci sono degli ottimi ristoranti e least but not last, non dovrò più prendere l’auto per andare al campo di volo e far volare i miei modelli.
Ragazzi da domani avviamento e decollo direttamente dal giardino!

Ahh che pace che c’è, certo dovrò svegliarmi un pochino prima per venire in treno a Roma per lavorare, ma ci pensate che bello il weekend? Cenetta in giardino, barbeque sotto il sole…. basta inquinamento, rumore, caos, traffico e parcheggi.
Che bello!

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

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


$('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:


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