Webdesign.

Post interessante. Link Boxes di “Ask the css Guy” (ovvero: chiedi all’uomo dei css. Il blog si chiama così. Il post è in inglese.)

(Grazie a un bookmark su del.icio.us di Marco Rosella

Ecco una specie di riassunto del post (idee e implementazioni dell’autore, a cui vanno tutti i meriti del caso).

Questione: ho un box, con dentro un titolo e un breve testo, e voglio che sia tutto cliccabile.
Soluzione pratica via css: rendo l’intero div un link, ovvero un <a>. Problema: dentro un <a> non posso infilare roba tipo <h3> e <p>. Soluzione: qualcosa del tipo <a> <span class=”h3″>titolo</span> e idem per il paragrafo. Poi nel foglio di stile setto i miei span come display: block. OK.

E’ un po’ un “workaround” – un aggirare l’ostacolo. Soluzione pulita ma semanticamente parlando non è il massimo.

Alternativa: usare il DOM.

Il mio box (i miei box) diventano, giustamente, dei div, a cui assegno una classe <div class=”linkbox”><h3>titolo</h3><p>testo</p></div>. Nel mio div del box aggiungo però anche un paragrafo in cui vado a metterre il mio link (volevo box link, ovvero cliccabili, no?). Un paragrafo a cui assegno una classe. Quindi avremo:

<div class=”linkbox”><h3>titolo</h3><p>testo</p><p class=”continua”><a href=”#”>leggi oltre</a></div>.

Cosa vogliamo fare a questo punto via DOM?

• cercare al caricamento della pagina i div con classe “linkbox”
• dentro questi div cercare il paragrafo con classe “continua”, il quale contiene un link
• prendere l’attributo di quel link (l’indirizzo) e legarlo all’evento onclick del div
• approfittarne per nascondere il paragrafo “continua”
• per evidenziare il fatto che il div (ovvero il box) è cliccabile, aggiungere una classe “hovering” ai div della classe “linkbox” – tramite cui aggiungere un effetto di rollover, via css.

The CSS Guy prende a questo punto in prestito alcune funzioni js della libreria ES, aggiunge qualcosina di suo e arriva al suo esempio concreto.

Il sorgente della pagina contiene tutto il codice usato, funzioni js e stili css.

Ho provato a fare qualcosa di simile. Ho preso uno dei 40 layout di Layout Gala, gli ho dato un’aggiustatina. E ho fatto la mia prova pratica. (A me piace

Un link al mio esempio.

In ogni caso, quella proposta è solo una delle tecniche possibili per raggiungere lo stesso risultato. Si vedano i commenti al post originale di Ask the CSS Guy per alcune alternative. Segnalo in particolare questa. Solo css. Clean.

Ho scritto qualche settimana fa un post su Hoverbox, elegante ed efficace uso dei css ideato da Nathan di Sonspring.com per gestire una galleria di immagini (thumbs + full size) senza impiegare javascript.

Ieri mi sono imbattuto in una implementazione, meglio in un utilizzo creativo della tecnica che sta dietro a Hoverbox, da parte di Stuart Robertson, di Designmeme: eccoci qui a parlare di Hoverbox menu (l’esempio fatto da Stuart e’ in fondo alla pagina).

Invece di un ormai “comune” – sebbene pur sempre splendido, quando implementato bene – menu con rollover via css Stuart propone un menu in cui nel momento del passaggio del mouse sull’item del menu (stato a:hover) l’immagine di sfondo si ingrandisce (come in hoverbox il passaggio del mouse sulla miniatura offriva la visualizzazione del pic full size). Bello.

Da notare, tra le altre cose, che Stuart usa la tecnica CSS Sprite – una stessa immagine contiene quella base e quella che viene sovrapposta, evitando percezioni di ritardo sul rollover (ed aggirando anche il problema del flickering di IE6) senza bisogno di preload gestiti via js.

OK. Guarda(te) l’esempio di Stuart, dunque, e valutate.

Ma a sto giro ho voluto metterci su le mani anch’io. Ecco dunque il mio esempio.

L’effetto “specchio-riflesso 2.0″ l’ho ottenuto giochicchiando con Gimp, quindi non c’entra con il codice css.

Dove invece ho modificato, minimamente, le spaziature, per evitare sia le sovrapposizioni (che invece Stuart voleva) sia che l’immagine del rollover andasse a muovere le altre, per cui le ho assegnato un margine negativo – in div#navigation li a:hover span abbiamo un margin-right: -45px.

Altra noticina, ovvero un limite in termini di accessibilità: i link testuali sono nascosti – attraverso la regola div#navigation li a span em{display: none;}.

Un’implementazione altamente professionale della tecnica dovrebbe invece utilizzare l’image replacement andando solo a coprire i link testuali – in modo che possano essere fruiti in contesti di visualizzazioni senza immagini.

Il guru da cui pesco il suggerimento è, per l’ennesima volta, Alessandro Fulciniti.

Ultime due cose: il mio esempio è in fase “alfa”, assolutamente non preciso al pixel, nè con .png realmente ottimizzate. E per rendere il menu davvero “cool” manca anche una immagine per lo pseudo-stato active (la pagina corrente).

Posterò un’update…

Maggio, 1. Ergo, tra poco Karina & me ci muoviamo verso la stazione, direzione Milano – MAY DAY i say MAY DAY (Parade).

In ritardo, come spesso, scovo via feedreader un post di webgol in cui Antonio Sofi segnala una sua intervista su Apogeonline…

Intervistato? Marco Rosella. Ovvero? Un italiano premiato a metà Marzo alla SXSW di Austin per… il miglior CSS. Del mondo.

Per questo sito/progetto: the Horizontal Way. In cui Marco ha fatto un lavoro di ricerca, e sperimentazione, sul layout basato sullo scrolling (scorrimento) orizzontale. Una roba in genere abbastanza deprecata, e che invece in certi casi si rivela interessante, e forse anche abbastanza efficace. Certo originale. Insomma Marco ha fatto un meta sito, che cataloga e analizza un certo numero di siti significativamente a scrolling orizzontale. Un bel sito.

Interessante, l’intervista. Con un sacco di spunti e considerazioni sensate e intelligenti sul webdesign.

E mi ha fatto molto piacere leggere due altri nomi italiani citati da Marco: Alessandro Fulciniti e Andrea Proietti (css e js su html.it e framework mootools, rispettivamente). Due tra i nomi che anch’io, umile wannabe professional webdesigner, tengo come riferimento.

Il sondaggio, invece. Una decina di minuti per rispondere alle domande, in inglese, di quelli di A List Apart. Che provano a fare il punto sullo state of the art nel mondo dei webdesigner. E’ la loro survey del 2007. Una quarantina di domande.

Niftycorners. Adesso li uso anch’io. Vedi il mio esempio di utilizzo qui.

Cosa sono i nifty corners.

Si tratta di una tecnica – una delle moltissime a disposizione – per arrotondare gli angoli degli elementi (i div) che compongono le nostre simpatiche paginette html. Senza usare immagini.

L’autore dei nifty corners è Alessandro Fulciniti. Lui scrive per html.it ed è lì che si può leggere l’articolo in cui introduce e spiega i nifty corners.

Questo è l’articolo (e c’è anche una versione inglese).

Nell’articolo – non sto parlando di qualcosa di nuovissimo, è del Marzo 2006 – si prende in considerazione la terza versione dei nifty corners, ribattezzata nifty cube, che è anche quella che ho usato io. (Dall’articolo citato si può procedere a ritroso e andare a vedere versione uno e due).

Nifty cube, quindi. Tecnicamente: un file css e uno script javascript. Facile da implementare. Leggero e molto elegante.

Nell’articolo di Alessandro si fanno anche degli esempi, molto pratici e convincenti, e (quasi) pronti all’uso.

Un paio di mesi fa ho deciso: ci sarà Ajax, nel mio futuro. (“There’ll be AJAX in my future”)

Nel mio presente c’era l’html (ma non l’xhtml), un po’ di css (ma non troppi), un po’ di php (le basi), poco altro. E voglia. E, un minimo di predisposizione.

Ho dato i primi morsi. XHTML. DOM. Una figata, il DOM. Javascript. Di cui avevo un’idea non molto dettagliata e sostanzialmente sbagliata (credevo che fosse da evitare, per il possibile, per il carico lato client, e che servisse per lo più a produrre effettini di contorno luccicanti e poco utili).

I primi esempi, semplici semplici, di implementazione di Ajax (tramite questo tutorial di html.it).

Una deriva, semilaterale, sull’XML. Qualche miglioramento con il PHP.

E Javascript. Esperimenti con gallerie di immagini. Confronti (thickbox, lightbox, smoothgallery). Fare girare le librerie. Metterci gli occhi su, in attesa di capire come metterci le mani. Le prime, minime, personalizzazioni (customization).

Mootools. Ieri era la quarta o quinta volta che ci finivo, sul sito.

Un ambiente di sviluppo (framework) object-oriented in/per javascript. Finivo sul sito perchè nelle mie mezze giornate dedicate al webdesign (complementari allo studio, alla teoria) capitavo su siti belli belli che scoprivo usavano mootools.

Puoi fare delle cose meravigliose con mootools. Non pesanti. Altamente compatibili. Largamente accessibili. Siii… (“this is what i want, this is what i need”)

Dalle prime visite al sito ho capito che ero un novellino a cui poteva dare/dire poco: solo inglese, documentazione non abbondante e molto tecnica. (Where do you want to go, my little Carl0z?)

E però non mi ero scoraggiato, anche perchè mi piaceva, e piace, molto, che a capo del team di sviluppo ci sia un italiano, Valerio Proietti. Che lavora per la web agency romana mad4milk. E… evviva!

Avevo scaricato le librerie. Hanno riposato qualche settimana sull’hard disk.

Ho fatto il mio primo sitarello usando ajax, nel frattempo. Per ora è su localhost, ma solo per un altro paio di giorni (content editing).

Quindi, ieri sono passato all’attacco (all’assaggio). Anche perchè ho scoperto che al tutorial, finalmente, è stata aggiunta una beginners guide. Con tanto di esempio base di utilizzo. Sufficientemente chiaro e alla portata di quelli come me.

Mootools… i’m coming!

Ecco, l’ho fatto. Ho creato una pagina di accesso alle gallerie di foto del mio home-site al Circolab che sfrutta thickbox. Eccola… qui.

Gallerie multiple e tutto. Thickbox è proprio bellino

Ho tenuto le immagini che erano già sul server, con dimensioni medio-grandi (in genere sui 1024×768 px), per cui se questo da un lato dimostra che lo script lavora bene nel ridimensionamento, dall’altro lato le immagini appesantiscono abbastanza la visualizzazione della galleria – che immagino quasi insostenibile da una connessione dial-up.

Per ora lascio così: è un test, e la visualizzazione “tradizionale” è ancora lì sul sito.

In ogni caso, thickbox “rocks”… il lamer is me -:)

Nota. Ovviamente Thickbox non esiste da una settimana (ma da un anno), nè sono il primo a usarlo o a scriverne. Stamane ho trovato un post interessante, questo, di un web-designer italiano, che già un po’ di tempo fa metteva a confronto lightbox e thickbox.

Alla fine mi sono lasciato tentare. Anche perchè (s)parlare di qualcosa che non si conosce bene, che non si è provata, non è esattamente segno di onestà intellettuale…

circolab.net/~carloz/sito/gallerie_js.php

Ho messo alla prova i tre script js di cui nel titolo. Alla prova delle foto dei miei gatti. Ne sono usciti bene, ovvio.

E mi arrogo il diritto di un giudizio semi-tecnico – ma “sbarbatissimo”.
Lightbox è più pesante ma “as it is” + ben rifinita, da un punto di vista grafico/estetico, che thickbox. La quale, in compenso, oltre alla conclamata leggerezza ha anche un’ottima flessibilità: nella bella finestrella tanto 2.0 possiamo far caricare del testo, ma anche un form di login, etc.

La smoothgallery, pensata per gli slideshow di foto, che volendo partono anche in automatico (temporizzati), è proprio un bell’oggettino. Kwel. Con le miniaturine in cima da scorrere, poi… Ecco, non so fino a che punto utile. Ma bella, è bella bella.

Io, per le mie foto, che ho archiviato sul server e ordinato usando il mitico – ma troppo 1.0 – genethumb.sh … userò (quando avrò voglia/tempo/coraggio di mettere mano a quelle directories) … ebbene sì, userò Thickbox.

Ok, c’è lightbox. Di cui ho scritto, e che ho testato. E che mi è piaciuta. Si basa sulle librerie js Prototype (come ambiente di sviluppo, framework) e Sciptaculous (libreria di effetti, con la quale sono stati realizzati siti imho veramente belli).

Ma c’è anche thickbox. Consigliata, e usata, da Davide Salerno – tra gli altri. Fa + o – le stesse cose di lightbox, ma sembra essere decisamente più leggera. Si basa su Jquery (a cui ho intenzione di dedicare attenzioni speciali, soon, essendo che mi sembra molto molto interessante – anche per un “bocia” come /me).

(Il fatto che thickbox possa essere una alternativa valida e + leggera a lightbox è confermato anche da un post sul blog di html.it. Post di diversi mesi fa – tipo di quando io ero in Brasile e organizzavo il matrimonio…)

E però, c’è pure smoothgallery. La segnala il (bel) blog bulletz. Smoothgallery si basa, terza opzione in tutti i sensi, su mootols, altro framework javascript che promette meraviglie 2.0.
Dettaglio sicuramente interessante, mootools è un progetto italiano, dietro cui c’è Valerio Proietti e la romana mad4milk.

Nella sezione javascript di html.it c’è un’articolo, di una decina di giorni fa, che spiega, in italiano, come implementare smoothgallery: questo.

A sua volta la mad4milk mette a disposizione una libreria di effetti, la moo.fx, che andremo + avanti a vedere cosa fa nello specifico, e che si può usare appoggiandosi sui mootools ma anche, volendo, su prototype.

Che dire? Chapeau!

[Aggiornamento]

Le tre librerie messe a confronto: www.circolab.net/~carloz/sito/gallerie_js.php.

Gallerie multiple con thickbox: www.circolab.net/~carloz/sito/projects/photos/galleries.php

Hanno rilasciato la versione 1.0 di Firebug.

Firebug è una extension per Firefox, che rimpiazza e potenzia per 2527 la console degli errori di default del browser. Un must, anche per i novellini del web-development come il sottoscritto.

Ispezione (e possibilità di editing) di HTML e CSS, monitoring del traffico di rete (cioè del tempo che impiegano i vari elementi della pagina a essere caricati), debug di Javascript, visualizzazione del DOM…

I love it!