Monthly Archives: May 2007

CSS3: si ma quando?

css3infoIeri 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

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!

Go Fly!

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.

Loading the player…


Aerial photography flight test with a EP10 r/c electric helicopter. Pilot: Gian Carlo ‘JeKo’ Mingati

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!

Opera9, il posizionamento relativo degli elementi e jQuery

Avvertenza: le porzioni di codice riportate in questo post non corrispondono più alla reale implementazione iniziale nel blog. Ragioni di manutenibilità, compatibilità o mera obsolescenza ne hanno reso necessaria la rimozione.

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

relatively_positioned

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 enlarge img icon ma su questo mio blog, le cose non sono così semplici.

  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

fake_positioned_twoCome 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 enlarge img icon è 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:

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

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

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

1
$('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.

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

Enjoy!