Lavora con noi

Web design

Siti tematici

Speciali

Pagine:

RSS

sIFR: la nuova tipografia per il web

di: Alessandro Fulciniti 02 Marzo 2005

Una volta realizzati i filmati Flash (.swf) per la sIFR, non ci resta che metterci all'opera con CSS e JavaScript per attivarla. Dell'esempio semplice vogliamo rimpiazzare l'<h1>, l'<h2> e il paragrafo (<p>)con id="pullquote".

Per prima cosa agiremo quindi sul CSS, aprendo il file sIFR-screen.css, ovvero il file CSS dell'esempio che l'autore della sIFR ha preparato. Una parte del CSS non si può modificare, ma dal commento a metà pagina in poi cancelleremo tutto, per aggiungere le seguenti righe:

.sIFR-hasFlash h1, .sIFR-hasFlash h2,.sIFR-hasFlash p#pullquote{
visibility: hidden
}

La regola appena vista è indispensabile a nascondere il testo html rimpiazzato se la sIFR può operare. Un CSS per la stampa è inoltre necessario per ripristinare il testo normale e nascondere il filmato Flash, ma in tal caso non saranno necessarie modifiche e/o aggiunte al file sIFR-print.css fornito nell'esempio.

A questo punto creeremo un nuovo file JavaScript, e aggiungeremo le dichiarazioni necessarie per effettuare la sostituzione dei titoli. Nel caso dell'esempio, ho realizzato un file .swf con il font "Aapex" per il titolo <h1>, uno con il font "Insaniburger" per rimpiazzare i titoli <h2> un terzo con il font "One Stroke Script LET" per il paragrafo in evidenza. Ecco le righe JavaScript che scriveremo nel nuovo file:

if(typeof sIFR == "function"){
sIFR.replaceElement("h1","aapex.swf","#B2181A",null,null,"#FFF",0,0,0,0);
sIFR.replaceElement("h2","insaniburger.swf","#FBC711",null,null,"#FFF",0,0,0,0);
sIFR.replaceElement("p#pullquote","quote.swf","#666666",null,null,"#FFF",0,0,0,0);
}

Quello che dovrete cambiare è il contenuto tra parentesi (ossia i parametri della funzione principale dellla sIFR), tenendo presente che è necessaria un'istruzione (ovvero una riga) per ogni gruppo di elementi che vorrete rimpiazzare. I parametri sono nell'ordine:

selettore CSS su cui effettuare il replacement (sono anche validi selettori di classe e di id, a cui però verrà anteposto il nome del tag, per esempio h1#logo o h4.news),
il nome del filmato flash con eventuale percorso,
il colore del testo rimpiazzato,
il colore per i link in stato normale e in stato hover (se non userete la sIFR sui link, basterà aggiungere due null,
il colore di sfondo
infine i quattro valori (top, right, bottom e left) del padding.

Il file JavaScript andrà salvato (io gli ho dato nome sreplace.js, ma un nome qualsiasi andrà bene, l'importante è l'estensione) anch'esso nella stessa cartella del file HTML, dei filmati Flash e del CSS per la sIFR.

Non ci resta ora che riaprire il file HTML semplice che avevamo preparato all'inizio e aggiungere nella sezione <head> della pagina le seguenti righe:

Ottenendo quindi il risultato finale.

Nota:Con le stesse aggiunte nella sezione <head> che abbiamo appena visto, possiamo applicare la sIFR a tutte le pagine che vorremo.

Questo, in breve, è il principio di preparazione per la sIFR. C'è una piccola aggiunta da fare: per regolare la dimensione del font sui titoli rimpiazzati, se necessario, potremo intervenire sul font-size o sul letter-spacing degli elementi rimpiazzati intervenendo sulle regole CSS del file sifr-screen.css. Nel caso dell'esempio non ce n'è stato bisogno. Codice e filmati swf dell'esempio sono disponibili per il download.

Accenniamo brevemente a una novità aggiunta proprio nell' ultima versione della SIFR, ovvero gli addons. È possibile infatti, grazie ai dei link con chiamate a JavaScript disabilitare la sIFR e mantenere la preferenza grazie ai cookie. Funzionalità che possono essere approfondite nella pagina di esempio dell' autore e l'articolo di presentazione della sIFR.

Note finali sulla sIFR

La sIFR è una tecnolgia già abbastanza diffusa e collaudata, accessibile e con un'elevata compatibilità cross-browser. È comunque piuttosto recente e, seppure prossima a una versione definitiva, non lo è ancora. Inoltre, cosa di cui non abbiamo ancora parlato, è una tecnologia piuttosto costosa, dato che richiede Macromedia Flash dalla versione 6 in avanti. Nel prossimo appuntamento presenteremo una soluzione un po' meno versatile ma senza dubbio più economica che ho realizzato con SwishMax. Alla prossima.