ForumFree BBCODEs SEO/Accessibility Improver

Informazioni, codice e risorse per inserire questo effetto sul vostro forum su ForumFree, ForumCommunity o BlogFree.

Introduzione

I BBCODE sono spesso molto utili e semplici per la stesura di un topic, sia per la loro scrittura più immediata e compatta rispetto all'HTML sia per coloro che hanno meno familiarità con questo ultimo linguaggio, in particolare i pulsanti simili ai comuni editor WYSIWYG nei moduli per l'inserimento di un messaggio sono di immediata comprensione.
Ho però pensato che alcuni dei tag e dei codici integrati di default in tale editor non sono esattamente la migliore delle scelte, sia per l'utilizzo di tag HTML deprecati e molte volte non accessibili, sia per gli spider che fanno più fatica a riconoscere gli elementi più importanti di un messaggio (come titoli, sottotitoli etc.).
Per questi motivi ho realizzato un semplice script che sostituisce i normali tag BBCODE o HTML utilizzati nei messaggi con alternative migliori, utili per il posizionamento sui motori di ricerca e non deprecati.

Caratteristiche

Lo script opera le seguenti modifiche al form di invio messaggio tradizionale dei circuiti:

• Sostituisce ai tag <b>, <i> e <u> le alternative accessibili e non deprecate <strong>, <em> e <ins>.


• Inserisce un prompt che chiede all'utente se desidera inserire una descrizione per l'immagine alla pressione del pulsante [IMG], sostituendo nel caso tale BBCODE con il regolare tag <img> con la descrizione inserita nell'attributo.


• Sostituisce nel menù a tendina Dimensione il tag [size] con i tag HTML header (<h1>, <h3>, <h5>, ...) , molto utili ai fini di posizionamento sui motori di ricerca.

Termini di Utilizzo

I codici inseriti in questa guida sono di pubblico dominio e liberamente disponibili/utilizzabili da tutti.
La presente guida intesa però nella sua integrità è rilasciata sotto una Licenza Creative Commons 3.0, riassunta, riveduta e corretta nei seguenti punti:
Sei libero di utilizzare, comunicare al pubblico, esporre in pubblico, rappresentare e recitare la guida e gli script annessi (la ridistribuzione ha dei vincoli particolari che potete trovare di seguito) alle seguenti condizioni:

Attribuzione

Devi riconoscere il contributo dell'autore originario e del suo forum. (Informazioni e metodi di attuazione sono reperibili nella sezione seguente)

Non commerciale

Non puoi usare quest’opera per scopi commerciali.

Non opere derivate

Non puoi alterare o trasformare quest'opera, ne' usarla per crearne un'altra

Licenza:

Installazione

Lo script è molto semplice e va inserito in Amministrazione > Grafica > Gestione HTML > In fondo al sito:

HTML

<script type="text/javascript"><!--
/* ============================================
// ForumFree BBCODE SEO/Accessibility Improver
// Realizzato da Bowser
// (C) 2009 http://ffmagazine.forumfree.it
// Versione: 1.0b - Ultima modifica: 31/12/2009 23:56
// ================================================== */
document.REPLIER&&(document.REPLIER.querySelector("button[accesskey='b']").onclick=function(){tag("<strong>","</strong>")},document.REPLIER.querySelector("button[accesskey='i']").onclick=function(){tag("<em>","</em>")},document.REPLIER.querySelector("button[accesskey='u']").onclick=function(){tag("<ins>","</ins>")},document.REPLIER.querySelector("input[accesskey='g']").onclick=function(){if(confirm("Inserire anche una descrizione per l'immagine? (Consigliato)")){var a=prompt("Inserisci l'URL completa dell'immagine che vuoi inviare","http://"),b=prompt("Inserisci la breve descrizione dell'immagine che vuoi inviare","");if(!a)return void alert("Errore! Devi inserire un'URL");if(!b)return void alert("Errore! Devi inserire una descrizione");tag('<img alt="'+b+'" src="'+a+'">',"")}else tag_image()},document.REPLIER.querySelectorAll("select.codebuttons:not([name='mod_options'])")[1]&&(size=document.REPLIER.querySelectorAll("select.codebuttons:not([name='mod_options'])")[1],size.onchange=function(){tag("<h"+this.options[this.selectedIndex].value+">","</h"+this.options[this.selectedIndex].value+">"),this.selectedIndex=0,document.REPLIER.Post.focus(document.REPLIER.Post.caretPos)},size.options.item(1).value="5",size.options.item(2).value="3",size.options.item(3).value="1"));
//--></script>

Senza dover modificare nulla lo script inizierà subito a lavorare e sostituire i BBCODE utilizzati nel vostro forum in modo quasi trasparente all'utente.

Per gli sviluppatori, di seguito potete trovare una versione non compressa che è più semplice da modificare:

SPOILER (clicca per visualizzare)

CODICE

<script type="text/javascript"><!--
/* ============================================
// ForumFree BBCODE SEO/Accessibility Improver
// Realizzato da Bowser
// (C) 2009 http://ffmagazine.forumfree.it
// Versione: 1.0b - Ultima modifica: 31/12/2009 23:56
// ================================================== */
if( document.REPLIER ) {

   // Grassetto, corsivo, sottolineato
   document.REPLIER.querySelector("button[accesskey='b']").onclick = function() { tag('<strong>','</strong>'); };
   document.REPLIER.querySelector("button[accesskey='i']").onclick = function() { tag('<em>','</em>'); };
   document.REPLIER.querySelector("button[accesskey='u']").onclick = function() { tag('<ins>','</ins>'); };

   // Immagini
   document.REPLIER.querySelector("input[accesskey='g']").onclick = function() {

        if( confirm('Inserire anche una descrizione per l\'immagine? (Consigliato)') ){
             var imgURL=prompt("Inserisci l'URL completa dell'immagine che vuoi inviare","http://");
             var imgDesc=prompt("Inserisci la breve descrizione dell'immagine che vuoi inviare","");
             if(!imgURL){
                  alert("Errore! Devi inserire un'URL");
                  return;
             }
             if(!imgDesc){
                  alert("Errore! Devi inserire una descrizione");
                  return;
             }

             tag("<img alt=\""+imgDesc+"\" src=\""+imgURL+"\">","");

        }else{
             tag_image();
        }

   };

   // Dimensione
if(document.REPLIER.querySelectorAll("select.codebuttons:not([name='mod_options'])")[1]){
   size = document.REPLIER.querySelectorAll("select.codebuttons:not([name='mod_options'])")[1];
   size.onchange = function() {
        tag('<h'+this.options[this.selectedIndex].value+'>','</h'+this.options[this.selectedIndex].value+'>');
        this.selectedIndex=0;
        document.REPLIER.Post.focus(document.REPLIER.Post.caretPos); };

   size.options.item(1).value='5';
   size.options.item(2).value='3';
   size.options.item(3).value='1';
}
}
//--></script>

Crediti e Ringraziamenti

Ci tengo a ringraziare 1Dan che con la sua Guida alla creazione di anteprima di immagini per post mi ha ispirato a realizzare questa piccola funzioncina.
Desidero ringraziare anche [Antonio] per avermi aiutato a realizzare lo script nella fase iniziale.
Se avete dubbi, commenti o proposte non esitate a contattarmi o ancora meglio a postarli qui. Alla prossima