Ragnarøkkr's Blog

Certo. Un blog curato, tecnico e professionale, senza tutte quelle strane abbreviazioni, acronimi, sigle da agente segreto che il mondo degli SMS ormai ci ha abituato a vedere e (ahimè) usare in ogniddove (anche in modo spregiudicato, direi, a volte), è sempre piacevole.
Ma è anche vero che in certe situazioni l'utilizzo di una simbologia particolare può evitare di andare in contro a spiacevoli situazioni. Provate, per esempio, ad inviare una mail o un SMS ad un vostro amico e scrivetegli FANNULLONE (o quello che preferite :-)), senza corredare il simpatico appellativo con uno smiley che faccia intendere a chi sta dall'altra parte che si sta scherzando. Molto probabilmente si rischierà di essere insultati con vocaboli più o meno censurabili!
Ecco perchè il più delle volte, quando scriviamo un post o lasciamo il nostro commento su blog altrui, dobbiamo/dovremmo usare questo tipo di codice scritto per far capire a chi ci legge le nostre intenzioni in relazione alla frase da noi scritta. Non essendoci, in questo caso specifico, alcun tipo di interazione visiva e/o verbale tra chi legge e chi scrive, risulterebbe piuttosto difficile capire che chi scrive sta, ad esempio, scherzando se non lo specifica esplicitamente. E poi, via, un tocco di colore non guasta mai!

Dopo questa breve (noiosa? :-) introduzione, passiamo subito al nocciolo della questione e vediamo come sia possibile sfruttare smiley graficamente accattivanti all'interno dei nostri post, cosa fattibile con WordPress, ma già più complessa con Blogger.

Ricordo che qualche tempo fa avevo fatto una ricerca su come inserire gli smiley su blogger, e avevo trovato un sito (che purtroppo non ricordo più quale fosse....l'età :-)) dove veniva spiegato un'interessante modo per poter inserire le faccine, il quale aveva però il difetto di basarsi interamente su di una sostituzione del testo (i caratteri degli smiley) per mezzo di un tag HTML e una routine in JavaScript. Ho evidenziato difetto, in questo caso, per alcuni semplici motivi. Primo tra tutti il fatto che per ogni post nel quale intendevamo utilizzare gli smiley, avremmo dovuto aggiungere il tag HTML direttamente all'interno del codice del modello (con i conseguenti rischi che un errore di battitura può portare). Inoltre, mettiamo che l'utente che visita il nostro blog abbia disabilitato gli script, come risultato otterremmo la completa inutilità di questo sistema.

Con il sistema dei CSS, invece, è possibile sfruttare le caratteristiche dei motori di rendering degli odierni browser, riducendo al minimo la probabilità di non riuscire a visualizzare le nostre faccine. Certo, è sempre possibile che un browser piuttosto datato o poco conforme agli standard (come? No... non mi sto riferendo ad Internet Explorer. Cosa ve lo fa pensare? :-D) possa darci delle noie, ma se il mondo fosse un luogo perfetto non saremmo qui a discutere di poca o molta conformità agli standard, no?

Ok. Passiamo al codice.

Per poter sfruttare questo semplice sistema, abbiamo bisogno di alcune cose:

un editor di testo, dove scriveremo il nostro codice CSS che andremo ad incollare successivamente nel codice HTML del blog (il notepad va benissimo, altrimenti potete dare uno sguardo nella sezione Freeware/OpenSource sotto Programmazione per un editor alternativo);
la nostra collezione di smiley;
un servizio di file repository, uno spazio web dove andremo a caricare le nostre immagini, che permetta il link diretto ai file delle nostre faccine (io qui uso l'ottimo servizio free di DropBox, ma voi potete usare quello con cui vi trovate meglio);
il nostro blog ed un browser (incredibile eh?! :-).

NOTA: il punto 1 è un passaggio in più per evitare di editare direttamente le regole CSS nel codice HTML all'interno dell'editor messo a disposizione da Blogger, ma se vi trovate più a vostro agio con quest'ultimo, potete benissimo saltare il primo punto.

Quindi, per prima cosa dobbiamo caricare la nostra collezione di smiley sul server che fungerà da file repository, e ci permetterà di avere sempre a disposizione online le nostre faccine. Se avete la possibilità, create una cartella pubblica, nominandola, ad esempio, smiles (originale, vero?) e caricatevi all'interno le vostre collezioni, magari catalogandole tramite sottocartelle. In questo modo è più facile avere, ad esempio, smiley con lo stesso nome ma appartenenti a collezioni differenti, non obbligandoci, così, ad inventare decine di nomi differenti per evitare conflitti tra immagini con lo stesso significato ma collezioni differenti, inoltre sarà più facile in futuro intervenire sui file per effettuarvi manutenzioni, sostituzioni, ecc...

Prima di passare al codice CSS, diamo un'occhiata al codice HTML che dovremo utilizzare all'interno dei nostri post (niente paura, si tratta di un semplice tag):

:-)

questo tag ci permetterà, tramite il codice CSS che vedremo tra poco, di utilizzare un file relativamente ad un preciso smiley.

La classe qui definita è smiley, il mio codice CSS farà quindi riferimento a questa classe, ma ovviamente potete adattarla alle vostre esigenze. L'attributo title, invece, qui viene utilizzato per identificare correttamente quale smiley vogliamo visualizzare e, inoltre, ci permette di avere un riscontro visivo dello smiley originale (quello tra le virgolette) nel momento in cui ci posizioneremo sopra con il puntatore del mouse. La ripetizione dello smiley tra i tag di apertura e chiusura  e , invece, ci permetterà (nel caso che chi visita il sito utilizzi un browser che per qualche arcano motivo non supporta le regole CSS che utilizzeremo) di visualizzare comunque le nostre faccine in modalità testuale, inoltre, questo, ci permette di allineare meglio la nostra immagine in relazione al resto del testo.

Il codice così definito, però, non mi permetterebbe di gestire in modo agile i miei smiley nel caso volessimo utilizzarne più di una collezione (che so, ad esempio un tipo di smiley per gli articoli di carattere tecnico, un altro tipo per le news, ecc... qui ovviamente le possibilità sono illimitate) e quindi, facciamo un'ulteriore aggiunta al nostro precedente codice:

:-)

la seconda classe, yolks, andrà ad indicare il nome della collezione dalla quale voglio attingere il file del mio smiley (yolks è solo il nome della collezione che utilizzo per questo esempio, voi potete ovviamente mettere il nome che preferite, a patto che tutti gli smiley facenti parte di quella collezione vengano successivamente identificati con quel nome, altrimenti si verrebbe a creare molta confusione).

Ecco fatto, questo è tutto il codice HTML che ci serve, e lo andremo a digitare all'interno del nostro post, nel punto esatto dove vogliamo che compaia la nostra faccina (passando prima, ovviamente, dalla visualizzazione WYSIWYG a quella codice).

Ora passiamo alle regole CSS. La prima regola che andremo a definire è quella relativa alla classe smiley abbinata al tag :

span.smiley {
    display: inline-block;
    text-indent: -1000em;
    vertical-align: super;
    background-align: top left;
    background-repeat: no-repeat
}

in questa regola definiamo il tipo di visualizzazione del tag a inline-block, in quanto il tag  è un elemento inline-level e non avrebbe la possibilità di essere ridimensionato con l'istruzione che vedremo tra poco.

Così facendo rendiamo il tag un elemento di tipo block-level ma sempre inline, rimanendo quindi all'interno del suo contenitore, invece di crearne uno nuovo, e ne possiamo quindi definire gli attributi quali dimensioni, sfondo, ecc... Inoltre, definiamo l'attributo text-indent per l'indentazione del testo contenuto all'interno del tag (la nostra semplice faccina stile SMS), facendolo indentare di 1000 em negativi (che in pratica porta il nostro testo verso sinistra, al di fuori dell'area visibile nella pagina nel browser, e quindi fuori dalla visuale dell'utente). Qui utilizzo anche l'attributo vertical-align per posizionare meglio i miei smiley (che dovrebbero apparire allineati con la linea base del testo, mentre senza questo attributo apparirebbero centrate rispetto alla linea di testo, ma questo dipende dalla dimensione degli smiley utilizzati). Infine definisco gli attributi di allineamento e ripetizione dello sfondo della tag (che andremo a modificare successivamente).

Definita questa prima regola generale, scendiamo più nel dettaglio e andiamo a definire le regole specifiche per la collezione utilizzata:

span.smiley.yolks {
    width: 24px;
    height: 24px
}

in questo modo possiamo definire la corretta dimensione dell'area che andrà a contenere la nostra immagine (nel mio caso immagini di 24x24 pixel, ma voi dovrete immettere la corretta dimensione delle vostre immagini), permettendoci, così, di categorizzare gli attributi per tipo di collezione e quindi dandoci la possibilità di definire dimensioni diverse per collezioni di smiley differenti.

Fatto ciò passiamo alla parte forse un po' più noiosa, e cioè quella dove andremo a definire l'immagine da utilizzare per ogni faccina:


span.smiley.yolks[title=":-)"] {
    background-image: url(link al file di :-))
}
span.smiley.yolks[title=":-P"] {
    background-image: url(link al file di :-P)
}
...

e così via sino a che non si saranno definite tutte le regole per ogni singolo smiley che vorremo utilizzare.

Qui, per mezzo dei selettori di attributo, andiamo a specificare quale immagine di sfondo dovrà essere abbinata all'elemento  di classe smiley sottoclasse yolks con attributo title pari al valore specificato tra virgolette. Logicamente, qui io ho utilizzato come titolo i caratteri che solitamente si utilizzano per indicare i vari smiley, ma niente vieta di utilizzare altri termini. L'importante è sempre far corrispondere i valori usati per classe e titolo all'interno del tag , anche all'interno dello nostre regole CSS.

Terminato di digitare il codice (per quelli che hanno utilizzato prima un editor di testi esterno), andiamo nella bacheca del nostro blog:

selezioniamo Layout->Modifica HTML;
clicchiamo su Scarica modello completo in modo da creare una copia di backup del nostro template così da poterlo ripristinare in caso di errori;
copiamo tutto il nostro codice dall'editor di testo;
individuiamo un punto all'interno della sezione <head> del nostro modello dove posizionare il nostro codice, e lo incolliamo (nei nuovi modelli usati da blogger, potete inserire il codice appena prima della stringa ]]--> solitamente presente subito prima del tag di chiusura </head>).

A questo punto non ci resta che fare un'anteprima per verificare che tutto sia andato per il verso giusto.

Salviamo le nostre modifiche e siamo a posto. D'ora in poi non dovremo fare altro che inserire il tag HTML visto in precedenza nel punto in cui vogliamo visualizzare lo smiley e niente più.

Uno dei vantaggi di questa procedura è che, volendo, possiamo mettere tutto il nostro codice in un file .css che andremo poi a caricare in uno spazio web (magari lo stesso dove sono stati caricati gli smiley, se il servizio ve lo permette) e sfruttare quindi la possibilità di effettuare un semplice link a quest'ultimo, specificando qualcosa tipo:

<link rel="stylesheet" type="text/css" href="linkfile.css">

all'interno della sezione <head> del nostro blog.

Questo approccio ci permette di apportare modifiche in futuro al nostro file .css, senza più mettere mano al codice HTML del blog. L'unico svantaggio sta nel fatto che, oltre a generare un traffico di dati leggermente superiore (dato che in questo caso ci sarebbe la necessità di collegarsi ad una ulteriore fonte esterna per poter ottenere il foglio di stile), nel caso il server d'appoggio andasse in down per motivi di manutenzione ordinaria/straordinaria/avaria o quant'altro non avremmo la possibilità di visualizzare le immagini, ma potremmo comunque vedere le normali faccine.

Se vorrete aggiungere una nuova collezione, come detto prima, vi basterà aggiungere delle ulteriori regole per una nuova sottoclasse di smiley e ricordarsi di specificare tale sottoclasse quando si andranno ad inserire i tag HTML nel testo del vostro post.

Sembra complicato, ma è più difficile a dirsi che a farsi!

Il risultato lo potete vedere qui di seguito:

:-) --> :-)
;-) --> ;-)
:'-( --> :'-(
:-D --> :-D
:-P --> :-P
8-) --> 8-)
XD --> XD

Un doveroso ringraziamento va a bad-blood, autore delle fantastiche (almeno secondo me) emoticon che ho utilizzato per questo post.

Spero come sempre di essere stato di aiuto. Attendo commenti.
Un saluto a tutti.

Potrebbe interessarti anche: