Tutorial in Italiano SIFR per il text replacement
by: Stuart
Total views: 1351
Word Count: 1025
Il diffondersi di una cultura SEO ha favorito il "ritorno alle origini" dello sviluppo web. Non più complesse animazioni Flash, sliced tables, DHTML, ma un più usabile, e indicizzabile, (X)HTML. Il corretto uso di tag, intestazioni, testi ed immagini rende infatti una pagina web infinitamente più appetibile per i motori di ricerca di un documento in cui vi sia un intenso utilizzo di grafica e multimedialità, ma poche informazioni utili per gli spider. La maggior parte dei webmaster si sta progressivamente piegando a questa svolta reazionaria, che pone i contenuti testuali accessibili al centro del web development.
Nonostante lo studio approfondito dei CSS (Cascade style sheets) abbia permesso la creazione di layout ottimizzati dall'indubbio impatto visivo, molti designer, abituati all'antialiasing di Flash e Photoshop e ad una scelta pressochè illimitata di stili e caratteri, hanno continuato a lamentare l'assenza di una valida alternativa ai classici font Arial, Verdana, Times New Roman, Courier, Tahoma.
Sulla base di questa esigenza (non solo di designer, ma anche di marketeer desiderosi di rendere più gradevoli landing e sale page), sono state studiate nell'ultimo anno diverse tecniche di text-replacement. La caratteristica fondamentale del text-replacement è il mantenere il codice intatto, con testi inclusi in heading tag e paragrafi, ma mostrare "a video" gli stessi testi ma in forma grafica, dando al webmaster totale libertà di scelta di font, dimensioni, stile, antialiasing.
Le tecniche di text-replacement più famose sono Dynatext, basata su Javascript e PHP, JS-Enhanced-IR , molto semplice , che sfrutta javascript e CSS e, la mia preferita, sIFR, basata su Flash, CSS e Javascript.
Questo tutorial in italiano renderà il lettore capace di installare, gestire e usare il SIFR all'interno delle sue pagine web.
Comincio innanzitutto a segnalare il sito di Mike Davidson, creatore del sIFR (Scalable Inman Flash Replacement), da cui si scaricheranno i sorgenti che utilizzerò in questa miniguida: sIFR 2.0 - Rich Accessible Typography for the Masses
Ho utilizzato sIFR per svariati siti e posso confermare le note riportate nel sito ufficiale, che lo descrivono accessibile e search engine friendly. Il codice HTML infatti non presenta alcun ostacolo all'indicizzazione e, in caso di Css e Javascript disabilitati oppure mancanza del plugin di Flash, i testi vengono comunque correttamente visualizzati. Da non sottovalutare anche il fatto che sIFR , contrariamente a quanto avviene con le tecniche javascript/Css based, non "nasconde" i testi: ciò che vede l'utente corrisponde totalmente a ciò che indicizzerà lo spider. Il che rende questa tecnologia assolutamente etica e in linea con le guidelines dei motori di ricerca.
Come esempio reale da osservare nell'esposizione dei processi di installazione e utilizzo di sIFR, si faccia riferimento al sito PNL by Acme, nel quale il text-replacement è stato applicato a diverse intestazioni e sui link.
Il bundle con i file sorgenti include anche due font in formato SWF, utilizzabili subito anche da chi non possiede una copia di Flash. Per usare altri caratteri sarà però necessario modificare il file sorgente sIFR.fla per aprire il quale sarà necessario Flash MX (o superiore) installato sul proprio PC. Oppure potete spedire il file ad un vostro amico web designer e chiedergli di crearvi dei diversi file in formato SWF.
STEP 01.
Scaricare e salvare sul proprio hard disk il file sIFR2.0.2.zip (vedi sito ufficiale prima menzionato)
Scompattare l'archivio zip con un apposito programma ed estrarre tutti i file dentro una cartella del PC (non importa quale, basta che vi ricordiate dove si trova)
STEP 02.
Nel bundle troviamo due font già pronti: vanderkeere.swf e tradegothic.swf, ma se ci accontentassimo di questi, il divertimento dove sarebbe?
Creerò ora un nuovo font, che utilizzerò negli step successivi.
Apro con Flash il file sorgente sifr.fla incluso nel package prima scaricato. In questo esempio utilizzerò Flash 8, ma il procedimento non cambia se si ha a disposizione una versione precedente di questo applicativo.
1. Come si presenta lo stage
2. Edito il movie "holder" posto sul layer 1 (textbox) dello stage selezionandolo con un click, tasto dx del mouse, dal menu contestuale scelgo EDIT
3. Seleziono con un click il testo "Please do not remove this text"
4. Scelgo dalla lista dei font sul PC quello di mia preferenza (nell'esempio ho scelto il Plain Germanica)
5. Esporto il movie, dandogli un nome scelto arbitrariamente, e facendo attenzione a esportarlo in versione Flash player 6 (per avere la massima compatibilità anche con browser meno aggiornati)
A questo punto ho un nuovo font (germanica.swf) da usare nelle pagine web, a mio piacimento. Da notare anche che non è necessario che l'utente abbia il font installato sul suo pc per poterlo visualizzare correttamente.
STEP 03.
Per utilizzare il mio nuovo font gotico in una pagina web, non dovrò fare altro che copiare i seguenti file:
sifr.js
sifr-addons.js
sIFR-screen.css
sIFR-print.css
germanica.swf
Nella sezione HEAD della pagina web:
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>
Al fondo del codice HTML della pagina, immediatamente prima della chiusura del tag </BODY> inseriremo questo javascript interno:
<script type="text/javascript">
if(typeof sIFR == "function"){
//aggiungere tante linee quanti sono gli heading da modificare- vedi esempio sotto
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"germanica.swf",
sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:0,
nPaddingBottom:0, sFlashVars:"textalign=center&offsetTop=6"}));
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"germanica.swf",
sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:0,
nPaddingBottom:0, sFlashVars:"textalign=center&offsetTop=6"}));
};
</script>
ATTENZIONE: per maggiore sicurezza copiare il javascript interno soprariportato dalla pagina esempio inclusa in sIFR 2.0
STEP 04.
Ora creerò il CSS che gestirà l'intestazione H1
Ovviamente questo può essere fatto all'interno del CSS che già avete utilizzato per la vostra pagina web.
h1 {
text-align: center;
font-size: 100px;
padding: 20px 0 20px 0;
margin: 0 20px 0 20px;
}
Salvo il file come all.css e lo richiamo nella pagina mettendo l'apposito comando nell'HEAD della pagina
<link href="all.css" rel="stylesheet" type="text/css" />
STEP 05.
A questo punto sono pronto per scrivere qualcosa nella pagina (all'interno del tag body e PRIMA del javascript interno prima documentato)
e vedere sIFR in azione.
<h1>Stuart D.</h1>
Salvo la pagina, e se tutto è andato bene, vedrò una pagina simile a questa
Altre considerazioni
L'implementazione del sIFR non è immediata. Necessita, all'inizio, di molti test per testarne le funzionalità, l'efficacia, e riuscire a configurarlo.
Tuttavia, superato l'impatto iniziale, alla fine si rivela un ottimo strumento per dare ai propri siti un look originale e graficamente d'impatto senza
rinunciare all'ottimizzazione per i motori di ricerca.All'interno del package di installazione sono presenti due pagine di esempio, con inclusi CSS e javascript interno.
Per qualsiasi ulteriore dubbio si faccia riferimento alla documentazione estensiva fornita nell'archivio.
About the Author
Stuart è editor del sito Googlerank.com, e modera la sezione Posizionamento nei motori di ricerca del Forum GT
Rating: 4.00
