Label Cloud in stile word press per gestire le etichette di Blogger - 2a Parte

In questo post del sito Blogger Hacks viene spiegato come implementare Label Cloud in stile wordpress per gestire le etichette di Blogger. Si tratta di un sistema molto più pratico ed elegante del semplice widget "Etichette" di Blogger, che si limita a mostrare tutti i tags utilizzati nel blog con il numero di ricorrenze tra parentesi.
Nello script segnalato da Blogger Hacks, invece, si può decidere il numero minimo di ricorrenze necessario per far si che un tags appaia nella Label Cloud. Più un tags è utilizzato all'interno del blog, più il font utilizzato diventa grande, ed anche in questo caso la dimensione minima e massima del font può essere personalizzata. Date uno sguardo a sinistra per vederne il risultato.

Riportiamo di seguito le istruzioni per l'implementazione dello script corredate da alcuni screen shot.

La prima cosa da fare è, ovviamente, includere il widget Etichette nel vostro blog. Per farlo dovete andare sulla sezione di gesione del layout del blog e cliccare su Ad a Page Element.

Posizionarsi su etichette, cliccare aggiungi a blog e nella finestra successiva selezionare il tipo di ordinamento: in ordine alfabetico o di frequenza. Per un risultato finale graficamente migliore consiglio di ordinare le etichette in ordine alfabetico.

Spostatevi nella sezione modifica HTML della scheda layout e lasciate deselezionata la casella di controllo espandi widget. Tramite la funzione trova testo del browser cercate il codice ]]></b:skin>
ed immediatamente prima inserite il seguente codice:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{ }
#labelCloud .label-cloud { }
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Ora posizionatevi immediatamente dopo il codice ]]></b:skin> e inserite il seguente listato

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Il passo successivo consiste nell'andare a cercare il seguente codice:


<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Attenzione: il alcuni blog può essere leggermente diverso, ad esempio il termine Labels può essere sostituito da Tags, pertanto vi sconsigliamo di cercare l'intera stringa con il comando CRTL + F del browser.

Al posto del codice indicato inserire il seguente

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>e
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


A questo punto è sufficiente cliccare su anteprima per verificare il risultato e successivamente su salva per consolidare le modifiche

Un aspetto decisamente interessante di questo script è la facilità di personalizzazione. Per fare ciò è sufficiente modificare i seguenti parametri:

• var claudMin=1 indica che è sufficiente che un tag sia citato una sola volta all'interno del nostro blog per far si che compaia all'interno del Label Cloud. Ovviamente aumentando questo numero si applica una selezione al livello di tags visualizzabili.
• var maxFontSize = 20 indica la dimensione massima del font relativo al tag presente più volte
• var minFontSize = 10 indica invece la dimensione minima del font relativo al tag presente meno volte
• var maxColor = [0,0,255] indica il colore del font relativo al tag presente più volte in formato RGB
  
• var minColor = [0,0,0] indica il colore del font relativo al tag presente meno volte
• var lcShowCount = false indica che non deve comparire il numero relativo alla quantità di volte in cui un tag è presente nel blog. Se invece vogliamo far comparire il numerino di fianco ad ogni tag dovremo sostituire il valore false con true

Consigliamo di rendere questi parametri omogenei allo stile del proprio blog

Angoli smussati con script PHP

Gli angoli smussati nelle pagine web vengono ormai utilizzati da gran parte dei web master. La resa grafica ottenuta arrotondando quadrati e rettangoli è spesso gradevole e rendono un sito internet un po' meno amatoriale senza un eccessivo ricorso alla grafica.

Purtroppo HTML e CSS, stratagemmi contorti a parte, non gestiscono nativamente questo tipo di implementazione.

Lo script che trovate nel sito Tonino Web Site consente di aggiungere angoli smussati con poche righe di codice, senza appesantire le pagine e con risultati grafici decisamente buoni.

Stiamo sperimentando lo script in pagine complesse su un sito del nostro network e al momento l'unico problema rilevato è con i div ad altezza variabile su FireFox 2. Nessun problema invece con Explorer 7

FCK Editor, un editor di testi per il tuo sito

Tanto per segnalare qualcosa di utile, Mytom consiglia agli utenti alle prime armi di andarsi a vedere il sito www.fckeditor.com . Gli utenti più esperti (ma anche quelli mediamente esperti) sicuramente conosceranno questo sito. FCKEditor è editor di testo da integrare nel vostro sito internet. Costruito in Java, ma compatibile con ASP, PHP, Perl, Pytom, eccetera, permette di integrare un editor stile word nelle vostre pagine di amministrazione, nel vostro blog. Tale strumento è indispensabile per chi, come Mytom, ha nel proprio sito una sezione di news e tutorial.
Senza perdere tempo nella scrittura manuale dei codici html, FCKEditor permette di scrivere e formattare un testo in modo del tutto naturale, senza necessità di scrivere a mano i tag html.
Permette inoltre di integrare tabelle e immagini, link e quant'altro.
Sarebbe possibile configurare un correttore ortografico, ma la cosa è abbastanza difficile e non sempre funziona (Mytom ha provato con scarsi risultati). Molto più semplice scaricarsi la toolbar di Google (magari tramite la pubblicità che trovate su Mytom, laddove si invita a scaricare FireFox con Google Toolbar o Google Pack) e utilizzare il correttore ortografico integrato.

Metodi di lavoro alternativi per la creazione di un sito

Questo non è un articolo tecnico. I metodi di lavoro alternativi evidenziati nel titolo si riferiscono all'interazione cliente/web master che portano alla realizzazione di un sito.
L'esperienza che Mytom ha maturato nella creazione di siti web gli consente di indicare, tra i tanti, due principali metodi di lavoro, alternativi l'uno rispetto all'altro, che devono essere esposti al cliente prima di iniziare qualsiasi tipo di progetto.

Metodo n. 1: Carta bianca al Web master
Questo è il metodo di lavoro preferito da Mytom e, al contempo, il più economico per il cliente. In sostanza, Mytom chiede al cliente quali sono le sue esigenze, le sue preferenze in fatto di grafica e contenuti, la data approssimativa di pubblicazione del sito e qualche altro dettaglio secondario. Ottenute le risposte, Mytom crea una bozza - solitamente solo grafica, utilizzando Fireworks - e la mostra al cliente, al quale consente di intervenire e suggerire tutte le modifiche che vuole (d'altra parte è lui che paga). Dopodiché inizia la realizzazione delle pagine web, e una volta completate, consegna il sito chiavi in mano al cliente, che può suggerire ancora qualche modifica, ma al quale non è consentito di stravolgere il tutto senza ulteriore esborso monetario.

Metodo n. 2: Interazione continua con il cliente
Questo metodo è decisamente più costoso. Per il cliente, che dovrà pagare cifre più alte. Per Mytom, che dovrà impiegare più tempo, dovrà dormire meno la notte, dovrà sacrificare domeniche e festività, e dovrà spendere cifre considerevoli in medicinali per il fegato, la bile e lo stomaco.
Solitamente Mytom non propone questo metodo di lavoro al cliente, ma è il cliente che lo richiede. Inizia anche questo con una presentazione grafica del sito, che normalmente viene approvata dopo 10/12 rivisitazioni. Dopodiché prosegue con la realizzazione del sito pagina per pagina, sotto il controllo diretto del cliente che normalmente ti fa realizzare l'80% del lavoro, salvo poi farti tornare indietro per rifare tutto da capo. Questo ciclo può ripetersi un numero indefinito di volte, soprattutto se il cliente non ha pagato un acconto (in questo caso o è un amico di Mytom, e non è detto che rimanga tale a lavoro ultimato, o Mytom era ubriaco quando ha accettato di iniziare a lavorare senza vedere soldi).
Alla fine, trascorso un periodo triplo o quadruplo rispetto al primo metodo, sopraffatti dalla stanchezza ci si accorda e il sito viene pubblicato.

Ovviamente può capitare che l'interazione tra cliente e web master porti a risultati migliori in tempi ragionevoli e senza particolari problemi (soprattutto alla cistifellea), ma, per esperienza diretta di Mytom, si tratta di casi più unici che rari.