Link Boxes. Css + Dom

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.

HoverLightbox: Hoverbox + Lightbox + …

Ancora sulle gallerie di immagini ed effetti (+ o – speciali). Dopo Lightbox, versioni 1 e 2, dopo emuli e cloni di Lightbox (tra cui l’ottimo e leggero Thickbox), dopo Hoverbox, (e Hoverbox menu) ecco qui… HoverLightBox.

HoverLightbox integra tre script: il Suckerfish dropdown menu, l’image preview via css di Hoverbox e la finestra in javascript di Lightbox. Risultato? HoverLightbox, di Jon Christopher.

Ho messo sul mio sitarello at Circolab una paginetta, questa pagina qui, dove faccio un veloce confronto tra Hoverbox e le due versioni esistenti di HoverLightbox (la prima, dell’anno scorso, e la versione Redux, di quest’anno). E propongo qualche esempio.

Là ci sono anche un paio di considerazioni, su peso e compatibilità cross-browser dello script. Documentazione più completa – in inglese – sul Monday by Noon, ovvero sul sito originale di HoverLightbox.

Hoverbox: gallerie di immagini via css

Hoverbox: una specie di Lightbox, ma senza javascript. Ovvero, solo css, per ottenere gli effetti sulle immagini di una galleria.

Idea e realizzazione di Nathan, di sonspring.com (il sito religioso con il miglior design che conosca ;-)).

Ecco il post che introduce e spiega hoverbox (del Marzo 2006, quindi niente di trascendentalmente nuovo). Ovviamente, c’e’ una galleria di immagini esempio, realizzata con Hoverbox. Ed e’ disponibile un pacchetto .zip con codice css e file annessi (l’html e le immagini).

Ovviamente si tratta di qualcosa di + semplice e meno versatile che i vari lightbox, smoothbox, thickbox, … Ma anche di molto + leggero.

E, come tutto, si può personalizzarlo per adattarlo alle proprie esigenze: il sito di sonspring, ad esempio, usa Hoverbox per customizzare la badge con le foto di Flickr, nella colonna destra della home.

Fancy menu: “miracoli” con css e javascript

Guillermo l’ha chiamato Fancy menu. Guillermo Rauch dice di essere Argentino, avere 16 anni e di sviluppare per il web da 6. L’età forse è un bluff. Il menu, una figata.

Css, e javascript – meglio: un menu che sfrutta alcuni effetti grafici forniti da Mootools e li combina con un uso intelligente e creativo del css. Risultato: vedi il post di Guillermo sul suo blog.

Un menu di navigazione (orizzontale, nell’esempio), un elemento di sfondo che si muove, e corre nel menu per andare a evidenziare l’elemento su cui puntiamo il mouse.

Il post di Guillermo spiega molto bene anche come implementare il menu. Esiste anche un pacchetto zip, con una release provvisoria, non perfetta ma comunque preziosa (il codice in verità credo sia lo stesso, ma forse mancano le immagini .gif e da un problema con le trasparenze in IE).

Il menu è piaciuto molto – non solo a me. In meno di un mese, 185 commenti al post sul blog, 1750 persone che hanno segnalato l’articolo su digg. E una utile traduzione italiana, grazie a sickbrain.org.

(Ieri ho fatto un primo mio fancy menu di test 😉 Aggiornerò il post con uno o due esempi miei, – prima o – poi).

Vulnerabilita’ Ajax

News decisamente interessante, via html.it: i ricercatori di Fortify hanno rilasciato un advisory in cui segnalano una nuova classe di vulnerabilita’, che hanno denominato JavaScript Hijacking.

Detto in breve – per gli addetti e gli interessati si rimanda all’analisi di Fortify, 10 pagine molto chiare e dettagliate (in inglese, in pdf) -: se abbiamo un applicazione Ajax che usa javascript per trasmettere dati, quei dati possono essere intercettati. Se i dati sono di tipo sensibile, l’applicazione è vulnerabile.

Una vulnerabilità di questo tipo (= ascrivibile a questa classe) era stata individuata (e fixata) a inizio Gennaio in GMail, dove a essere trasmessi via js erano i dati dei contatti (la rubrica) dell’utente di posta.

In precedenza, sempre attraverso una vulnerabilità js, ad avere problemi era stato il servizio mail di Yahoo – giugno 2006, worm chiamato Yamanner.

Fortify ha preso in analisi i 12 framework Ajax + diffusi – Direct Web Remoting (DWR), Microsoft ASP.NET Ajax (Atlas), xajax, Google Web Toolkit (GWT), Prototype, Script.aculo.us, Dojo, Moo.fx, jQuery, Yahoo! UI, Rico e MochiKit. Solo il primo sembra possedere delle protezioni efficaci contro eventuali attacchi di tipo javascript hijacking.

Il testo di Fortify spiega anche perchè le applicazioni web tradizionali non sono affette da questa vulnerabilità, mentre quelle del cosiddetto web 2.0, ovvero le “rich Web applications”, sì. Entra nei dettagli, illustrando come JSON – JasaScript Object Notation -, il formato più usato per gli scambi di dati via js, sia vulnerabile… Vengono forniti esempi su come sia possibile forgiare la richiesta di un client, … Per finire con le raccomandazioni sulle cose che si possono fare per mettersi al riparo da questo tipo di attacchi.

I possibili problemi di sicurezza legati alle applicazioni sviluppate in Ajax non sono una novità assoluta, si veda ad esempio questo articolo, sempre da html.it, dove quasi un anno fa si evidenziava il monito di Billy Hoffman, intervenuto alla Black Hat Security Conference con un intervento provocatoriamente intitolato “Ajax (in)security”, che insisteva sull’importanza di usare in modo consapevole Ajax, sfruttando le sue potenzialità ma conoscendone anche le possibili vulnerabilità.

Interessante, molto interessante.

Se ne parlerà, molto probabilmente, in Cialtroni nello Spazio, la trasmissione di approfondimento informatico che il Circolab di Brescia tiene su Radio Onda d’Urto – martedi’, ore 12:40, e poi sul sito, da scaricare.

Smoothbox: thickbox con mootools

Thickbox rappresenta un’alternativa efficace, e + leggera, a Lightbox. Lightbox si appoggia su Prototype e Scriptacoluos, Thickbox usa Jquery. Adesso è arrivato Smoothbox . Che fa le stesse cose di Thickbox, ma usando come framework, invece che Jquery, Mootools. Il coder è il parigino Boris Popoff.

Cmq, con Smoothbox si fanno le stesse cose che si fanno con Thickbox, ed è ugualmente semplice da installare/configurare/usare: un file .css, un file .js (e una .gif animata per il loading). (Oltre al .js del framework, ovvio)

Cosa fa: mette in “background” la nostra finestra del browser e ne apre una nuova, ben centrata, in cui possiamo mostrare un’immagine, o una galleria di immagini, ma anche del contenuto html, o Ajax.

Sul sito di Thickbox sono spiegate in modo dettagliato (in inglese) le funzionalità dello script, e ci sono delle chiarissime demo. Inutile che mi dilunghi in parafrasi, dubbie, qui.

Fuori, piove.

Niftycorners: angoli arrotondati con css e javascript

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.

Joost. E altre quotidianità

Ho un invito (token) per fare da betatester a Joost. Chi interessato mi lasci la sua mail.

[you can skip this]

Oggi è un giorno strano – misto di cose che non vogliono andare per il verso giusto e di piccole ma deliziose sorprese. E di mal di testa

Ho passato il pomeriggio a sbatter la faccia contro la carousel.js, una delle librerie di cnet che sfrutta mootools. Serve a fare questo. Vorrei capire cosa sto sbagliando…) A domani, carousel!

Ho ricevuto un paio di telefonate di ringraziamento (un regalo ricevuto, un lavoro trovato) e una mail (per un suggerimento dato) che hanno pareggiato i conti.

Ho fatto un giro su technocrati. Questo bloggettino, nato un mese fa come “angolo catartico” [ovvero: scrivere mi fa bene, su qualsiasi supporto, di qualsiasi argomento. E non lo stavo facendo da mesi], mi sta appassionando. E quindi lo voglio curare. Fare le cose bene.

Technocrati è sicuramente uno strumento utile e intelligente per connettere il mio minuscolo blog al resto della blogosfera.

Mi sono registrato un paio di settimane fa. E settimana scorsa su Digg. Voglio crescere. Crescere. Fare soldi. Avere successo. (?!?)

Sperimentando. Sto scoprendo il potere dei tag. L’altro giorno ho scritto un post sul tizio che metteva dei filmatini hard
della moglie (ripresa, pare, di nascosto) su video.libero. Una cosa passata al tg5. Il nick del tale era spiaremiamoglie. Beh, ho associato al mio post il tag “spiaremiamoglie”. E in tre giorni quasi 2000 persone sono venute a leggersi il post.

(Qui si potrebbe aprire una parentesi su cosa cerchiamo in rete, ma la rimando a un post successivo).

Insomma questo era un bloggettino da nulla, iniziato da poco, che non avevo ancora segnalato agli amici, che non includo nella firma delle mail… e mi ci vengono su mille persone al giorno. Ai ripari! Ai ripari!

[/end skippable part]

Idiozie a parte. Continuerò a scriverci di javascript e Ajax e webdesign e altre cose che mi appassionano. Di web2.0, di politica internazionale, di cinema, di attivismo, di informatica opensource, di letteratura, di Brasile.
Ah, e di Joost.

Il post partiva da quello. Ero su technocrati, appunto, mezz’ora fa. Tra le parole + cercate oggi c’è appunto Joost.

Al che mi sono ricordato che, come suppongo agli altri betatester, Joost un paio di giorni fa mi ha dato due token, per invitare due persone a beta-testare anche loro la televisione peer to peer. Ho già scritto, sinteticamente, di Joost.

È un’applicativo carino e con molto futuro, anche se con dei limiti, al momento, sia per i contenuti che per altro.

E… siccome i tre anni in Brasile su una spiaggia semi-deserta mi hanno rasato via il 90% dei contatti che avevo, qui.

E, siccome tra gli amici del Circolab nessuno ha dimostrato interesse a provare Joost… se qualcuno ha letto fin qui e vuole provare la joost television, può lasciarmi la sua mail. (Nota: al momento non esiste un client Linux. Solo Win e Mac. Servono un pc decentemente potente e una connessione adsl.)

Martedì 6 manderò gli inviti.

Mootools: sto arrivando…

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!

Thickbox: le mie gallerie

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.