Link Boxes. Css + Dom

maggio 20, 2007

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 + …

maggio 16, 2007

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

aprile 13, 2007

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

aprile 12, 2007

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

aprile 3, 2007

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.insecure t-shirt

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

aprile 1, 2007

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

marzo 6, 2007

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

logo nifty corners

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.


Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.