Guida al BBCode Forumfree, Messaggi, Firme e Tagboard

Col termine BBCode (Bulletin Board Code, codice per bacheche elettroniche) si indica il linguaggio di marcatura usato comunemente nei forum per la formattazione di testo e immagini nei messaggi in maniera più semplice e limitata rispetto a quella ottenibile con l'HTML (o con XHTML), i comandi (tag) disponibili sono di solito indicati racchiudendo tra parentesi quadre le parole chiave, uno dei vantaggi offerti dall'uso del BBCode è che i comandi più utilizzati sono, solitamente, inseribili direttamente utilizzando gli appositi pulsanti presenti nel modulo di inserimento dei messaggi.

Anche se i tag di base sono comuni alla maggior parte dei forum in realtà esistono numerose varianti del BBCode, si può dire che quasi ogni board abbia il proprio BBCode e Forumfree / Forumcommunity non fa eccezione, inoltre qui il BBCode è affiancato (e in parte sostituito) da un uso diretto dell'HTML.

In questa guida tratteremo dell'uso del BBCode nei messaggi, nelle firme e nella tagboard (in quest'ultimo caso il BBCode è l'unico mezzo per formattare i messaggi, non è possibile utilizzare l'HTML in tagboard), i singoli tag verranno descritti seguendo l'ordine dei tasti per il loro inserimento ma sono comunque inseribili o modificabili manualmente (Per chiarezza si specifica che l'ordine usato nella descrizione è da sinistra verso destra e dall'alto verso il basso)

Il BBCode nei messaggi

Tasti B I U

Originariamente inserivano i tag BBCode utilizzati per ottenere testo in grassetto, corsivo o sottolineato

che sono stati rimpiazzati dagli equivalenti tag HTML

in caso vengano utilizzati (copiando e incollando, per esempio, il testo formattato per un altro tipo di board) vengono automaticamente sostituiti con l'equivalente HTML

Testo di esempio Testo di esempio Testo di esempio

Nota

Pur non esistendo un tasto apposito, era possibile utilizzare il tag per ottenere il testo barrato

CODICE

[s]Testo di esempio[/s]

anche questo tag è stato rimpiazzato dall'equivalente HTML

CODICE

<s>Testo di esempio</s>

e, se inserito, viene automaticamente modificato
Testo di esempio

Menù a tendina CARATTERE

Inserisce il tag per la modifica del font del testo

Testo in Arial

Tramite il menù è possibile scegliere fra sei font preimpostati

Testo in Arial

Testo in Times

Testo in Courier

Testo in Impact

Testo in Geneva

Testo in Optima

ma è possibile modificare manualmente il tag, sostituendo il nome del font preimpostato con quello che si desidera utilizzare

Testo in Garamond

E' preferibile evitare l'uso di font particolari, in quanto un browser può visualizzare correttamente solo i font installati nel sistema operativo

Nota

E' anche possibile, come nell'HTML, inserire il nome di una famiglia generica di font, al posto di quello di un singolo font, in questo caso il testo verrà reso utilizzando il font predefinito, per quella famiglia, nel browser che deve visualizzare il testo

CODICE

[font=Serif]Visualizzerete questo testo col font predefinito, nelle opzioni  del vostro browser, per la famiglia di font Serif, solitamente si tratta del Times New Roman[/font]

Visualizzerete questo testo col font predefinito, nelle opzioni del vostro browser, per la famiglia di font Serif, solitamente si tratta del Times New Roman

Menù a tendina Dimensione

Inserisce il tag di modifica della dimensione del testo nel messaggio, nel menù è possibile scegliere fra tre dimensioni preimpostate,
Piccolo

Testo di esempio

Medio

Testo di esempio

o Grande

Testo di esempio

maggiore il valore numerico, più grande sarà il testo, ovviamente è anche possibile inserire manualmente un valore di grandezza a scelta

Testo di esempio

Menù a tendina COLORE

Con questo menù si inserisce il tag per la colorazione del testo

Testo di colore rosso

Sono presenti nel menù sette colori preimpostati

Blu

Rosso

Porpora

Arancione

Giallo

Grigio

Verde

ma è possibile utilizzare tutti i nomi di colore supportati dai browsers

Testo di esempio color fuchsia

trovate un elenco dei 147 nomi di colore supportati dai browsers più diffusi nella Guida ai colori nell'HTML

sezione I nomi dei colori nell'HTML

Nota

Anche nel BBCode, come nell'HTML, è possibile esprimere i colori utilizzando i valori esadecimali, omettendo però il simbolo # che nell' HTML indica il colore

CODICE

[color=0000FF]Blu[/color]

Blu

CODICE

[color=FF0000]Rosso[/color]

Rosso

CODICE

[color=800080]Porpora[/color]

Porpora

CODICE

[color=FFA500]Arancione[/color]

Arancione

CODICE

[color=FFFF00]Giallo[/color]

Giallo

CODICE

[color=808080]Grigio[/color]

Grigio

CODICE

[color=008000]Verde[/color]

Verde

CODICE

[color=FF00FF]Testo di esempio color fuchsia[/color]

Testo di esempio color fuchsia

Per quanto riguarda i valori dei colori, nel modulo di inserimento messaggi trovate anche il link Prendi colore, cliccando sul link si aprira una finestra pop up contenente un generatore di codici colore BBCode e potete anche consultare la Guida ai colori nell'HTML

sezione I valori dei colori nell'HTML

e la Tabella colori HTML

Tasti apice x² e pedice x₂

Questi tasti non inseriscono tag BBCode, ma i due tag HTML che servono, rispettivamente, ad inserire caratteri sopra la riga del testo (apice)

X²

o sotto la riga del testo (pedice)

X₂

Sono tag indispensabili qualora il testo del messaggio che si debba inserire contenga espressioni matematiche o chimiche

H₂O

Tasto http://

Lo si utilizza per inserire link testuali, nella prima finestra che vi apparirà dopo aver cliccato sul tasto copiate l'indirizzo internet della pagina che volete linkare, nella seconda il testo che volete sia visualizzato da chi leggerà il vostro messaggio, il risultato sarà il tag BBCode per l'inserimento di link testuali (che potete anche inserire manualmente)

esempio

NewsBoard Forum

Nota

Nel caso vogliate inserire direttamente il link, in modo che sia direttamente visibile e senza testo, basterà che copiate l'indirizzo internet e lo incolliate nel messaggio, il sistema lo riconoscerà automaticamente come un link e lo inserirà senza ulteriori interventi da parte vostra

http://newsboard.forumfree.net/

citando o modificando il messaggio trovereste che il link è espresso in questo modo

CODICE

[URL=http://newsboard.forumfree.net/]http://newsboard.forumfree.net/[/URL]

Tasto @

Il tasto @ serve ad inserire un indirizzo e-mail che, se cliccato, avvia il programma di posta elettronica predefinito dell'utente (Outlook Express, Mozilla Thunderbird, Eccetra) impostando automaticamente, nel messaggio, l'indirizzo del destinatario, il tag è questo

e il risultato visualizzato da chi leggerà il messaggio è questo

[email protected]

Nota

In realtà l'uso di questo tag, come del suo equivalente HTML, non è particolarmente consigliabile, molti utenti gestiscono le loro caselle di posta elettronica accedendovi direttamente dal web, senza utilizzare client e-mail ed è preferibile non postare indirizzi e-mail in formato riconoscibile in modo da evitare la loro indicizzazione da parte degli spambot (programmi simili a quelli usati dai motori di ricerca per l'indicizzazione dei siti web, ma lo scopo, nel caso degli spambot, è la raccolta di indirizzi e-mail validi allo scopo di realizzare liste di indirizzi per la trasmissione di messaggi di posta indesiderata)

Tasto IMG

Utilizzando il tasto IMG potete inserire immagini nei messaggi, utilizzando il link diretto all'immagine, il tag BBCode (come sempre inseribile anche manualmente) è questo:

esempio



Il tag per l'inserimento delle immagini può essere usato in combinazione con quello per l'inserimento di link testuali allo scopo di inserire immagini con link

esempio

Nota

La maggior parte dei servizi di hosting immagini fornisce, oltre al link diretto all'immagine, anche uno o più tag già pronti per l'inserimento nei forum, solitamente questi tag sono compatibili con Forumfree, il loro uso non è però necessario, è più pratico e sicuro utilizzare il link diretto all'immagine inserito con l'apposito pulsante / tag.
Un caso a parte è quello delle immagini di grandi dimensioni, per queste i servizi di hosting forniscono spesso i codici per l'inserimento, nei messaggi, di anteprima di dimensioni ridotte (thumbnails), cliccando sull'anteprima si aprirà una finestra dove potrete visualizzare l'immagine originale,questo metodo permette di risparmiare l'ampiezza di banda che il sito impiega per rendere disponibile l'immagine e accelererà anche il caricamento della pagina contenente il messaggio da parte degli utenti (oltretutto non tutti gli utenti che visualizzerano la pagina potrebbero essere interessati all'immagine postata).
Potete ottenere un'anteprima cliccabile anche con un metodo "artigianale, vi basterà realizzare, con un opportuno programma di fotoritocco, una versione di dimensioni ridotte dell'immagine, inserirete entrambe, utilizzando i link diretti, con il codice già postato per ottenere l'immagine con link, nel tag URL metterete il link diretto all'immagine grande, in quello IMG quello della versione rimpicciolita, in modo che, cliccando sull'immagine rimpicciolita, vi si apra la pagina contenete l'immagine a grandezza originale.

CODICE

[URL=Link_diretto_immagine_grande][IMG]Link_diretto_immagine_piccola[/IMG][/URL]

Tasto QUOTE

Una cosa di cui si ha spesso necessità, in un forum, è citare (riportare completamente o parzialmente) il messaggio di un altro utente a cui si desideri dare risposta diretta o un testo generico che si voglia commentare.
Se il testo da commentare è un messaggio nella stessa discussione in cui si sta per scrivere, basta cliccare sul tasto QUOTE (o CITAZ, l'esatta dicitura dipende dalla grafica utilizzata per i tasti nel vostro forum) del messaggio che volete citare, la citazione verrà inserita automaticamente nel vosto messaggio, completa di autore, data e ora, con la possibilità di editarne il testo prima dell'inserimento, in modo da citare solo la parte che ci interessa, se, invece, il testo da citare non si trova nella stessa discussione lo copieremo e sucessivamente incolleremo all'interno del tag QUOTE, inseribile manualmente o tramite il tasto QUOTE del modulo di inserimento messaggi, il risultato sarà questo:


Nel caso si voglia inserire anche in questo tipo di citazione, autore, data e ora è possibile farlo manualmente, rispettando questo formato


esempio


Rispettando lo stesso formato possiamo anche inserire informazioni diverse da quelle standard, e anche inserire soltanto uno o due dei campi previsti

Tasto CODE

In origine con questo tasto si inseriva il tag CODE, utilizzato per inserire testo a "passo fisso", in particolar modo codici e tags che dovevano essere letti dai browsers come testo e non eseguiti, per esempio in questa guida è stato usato per mostrare la struttura degli altri tag BBCode, attualmente ha una duplice funzione, cliccando sul tasto vi apparirà un messaggio di conferma, selezionando l'opzione Ok verrà inserito il tag CODE:
tag di apertura

contenuto e tag di chiusura

qui potete vedere degli esempi, con dei tag BBCode


e con un javascript

Selezionando invece l'opzione Annulla, al posto del tag CODE otterremo il tag HTML, la funzione di questo tag è praticamente identica a quella del tag CODE, ma è specifico per i codici HTML, di cui evidenzia le varie componenti con diversi colori:

Tasto SPOILER

Questo tasto serve, per l'appunto, ad inserire il tag SPOILER, il nome di questo tag deriva dall'inglese "To spoil", "rivelare", la sua funzione è l'inserimento, all'interno di un messaggio, di un testo che rimane nascosto e può essere visualizzato solo cliccando su di un apposito link, questa funzione si rivela utilissima quando si deve postare, per esempio, la trama di un'opera letteraria, di un film o di una serie televisiva, in modo da "nasconderne" i punti salienti ed, eventualmente, la conclusione, così che l'utente che si trovi a leggere il messaggio senza essere a conoscenza della trama possa evitare di venire a conoscenza delle parti più importanti oppure, a sua scelta, leggere l'intero messaggio.
Il tag è questo



ovviamente può essere usato per "nascondere" una qualsiasi parte di un messaggio, immagini comprese



come avrete sicuramente notato, cliccando su uno degli spoiler vengono aperti tutti gli spoiler presenti nella stessa pagina, questo non può essere evitato, in una pagina di discussione dove siano presenti più spoiler non è possibile aprire uno solo

Tasto Capolettera

Anche questo pulsante non inserisce, in realtà, un tag BBCode, ma un codice HTML (contenete anche un tag BBCode, quello delle dimensioni del testo, utilizzabile per ottenere un capolettera,

rova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova

Il capolettera può essere utilizzato anche per allineare del testo di fianco ad una immagine

in questo caso, ovviamente, il BBCode per le dimensioni del testo è ininfluente

testo allineato ad una immagine

Tasto Centratura

Nel BBCode originale di Forumfree / Forumcommunity non erano previsti tag per l'allineamento del testo e, quando questa funzione è stata introdotta, si è preferito utilizzare direttamente un equivalente tag HTML, cliccando sul pulsante otterremo quindi questo tag

che ci permette di "allineare" al centro del messaggio testo

Testo di prova

o immagini

Di default, questo tasto inserisce l'allineamento "center", sicuramente il più utile nei messaggi, ma potete modificarlo, in caso vi serva un allineamento diverso, sostituendo center con left, per l'allineamento a sinistra (di scarsa utilità, nei post il contenuto, testo o immagini, è già di base allineato a sinistra), con right per per l'allineamento a destra e con justify per avere il testo allargato su tutta la riga (anche quet'ultimo è di scarsa utilità nei messaggi)

Tasto Elenchi

In origine, questo tasto inseriva il tag BBCode per ottenere elenchi e liste (e precisamente elenchi non ordinati e poteva essere modificato manualmente per ottenere elenchi ordinati)

il risultato sarebbe stato questo

• Uno


• Due

questo tag è stato completamente sostituito dai suoi equivalenti HTML non è più utilizzabile e, se inserito, al contrario dei tag per il testo in grassetto, corsivo e sottolineato, non viene automaticamente convertito, esempio

[list][*]Uno [*]Due [/list]

Attualmente, cliccando sul pulsante, vi apparirà un messaggio di conferma, selezionando Ok otterrete una lista ordinata numericamente, esempio

1. Uno


2. Due

selezionando Annulla avrete invece un elenco non ordinato, esempio

• Uno


• Due

questi tag sono modificabili manualmente per ottenere altri tipi di elenchi, ordinati alfabeticamente, per esempio, oppure non ordinati a quadrati invece che puntati, consultate al riguardo la Guida ai tag HTML più comuni

Sezione 3, Liste o Elenchi nell' HTML

Come realizzare liste o elenchi ordinati

Come realizzare liste o elenchi non ordinati

Appendice 1 - Il tag Flash

E' possibile inserire, nei messaggi, filmati o altri files in flash (formato .swf), utilizzando un apposito tag, questo tag non è inseribile tramite un pulsante e, quindi, deve essere inserito manualmente
[FLASH=600,400]indirizzo del file flash[/FLASH]
all'interno del tag deve essere inserito il link diretto al file, che deve terminare con l'estensione .swf, i due valori numerici nell'apertura del tag a sinistra rappresentano la larghezza e l'altezza espresse in pixel, esempio

CODICE

[FLASH=100,100]http://img300.imageshack.us/img300/5954/orologiozw9.swf[/FLASH]

Appendice 2 - Combinare i tag

Anche nel BBCode, come nell'HTML, è possibile inserire (annidare) i tag l'uno all'interno dell'altro, in modo da combinarne gli effetti, è necessario, nel chiudere i tag, rispettare l'ordine in cui sono stati aperti.
Abbiamo già visto, nel paragrafo che trattava del tag per l'inserimento delle immagini, come sia possibile combinarlo col tag per l'inserimento dei link in modo da ottenere un'immagine con link

CODICE

[URL=Indirizzo_internet][IMG]Link_diretto_immagine[/IMG][/URL]

vedete come sia stato aperto prima il tag URL, poi quello IMG, poi venga chiuso il tag IMG e infine venga chiuso il tag URL, ed è possibile fare la stessa cosa con tutti i tag BBCode (e li si può anche combinare con i tag HTML che vengono inseriti nei messaggi tramite i pulsanti del modulo di risposta), qui di seguito trovate altri esempi.

Testo colorato blu, ingrandito, scritto col font arial, in grassetto / corsivo / sottolineato

CODICE

[color=blue][size=7][font=Arial]<b><i><u>Testo di prova</u></i></b>[/font][/size][/color]

Testo di prova

Link colorato blu, ingrandito, scritto col font arial, in grassetto / corsivo / sottolineato

CODICE

[URL=http://newsboard.forumfree.net/][color=blue][size=7][font=Arial]<b><i><u>NewsBoard Forum</u></i></b>[/font][/size][/color][/URL]

NewsBoard Forum

Appendice 3 - Il modulo di risposta rapida

Il modulo per inserire risposte rapide sche si trova in fondo ad ogni pagina di discussione è utilissimo quando si desideri inserire brevi commenti (o fare rapidi interventi di moderazione) anche se le ridotte dimensioni dell'area di testo lo rendono scosigliabile a chi debba inserire messaggi complessi, i messaggi inseriti in questo modo sono identici a quelli inseriti normalmente e si possono utilizzare tutti i tag dei normali messaggi, ovviamente usando la risposta rapida non è possibile citare automaticamente un messaggio, lo si dovrà fare manualmente e, causa lo spazio ridotto, non sono presenti i tasti apice e pedice nella riga superiore e i tasti capolettera e email in quella inferiore (i tag corrispondenti sono inseribili manualmente)

Appendice 4 - I messaggi privati

Nei messaggi privati si possono utilizzare tutti i tag previsti per le normali discussioni e il modulo di inserimento è identico a quello del messaggi nelle discussioni

Il BBCode nelle firme

I tag utilizzabili nelle firme sono praticamente gli stessi utilizzabili nei messaggi, l'unica eccezione è il tag SPOILER che non può essere usato nelle firme, il modulo di inserimento firma è identico a quello dei messaggi escluso, ovviamente, il tasto SPOILER.

Appendice 1 - Combinare i tag

La combinazione degli effetti dei tag nelle firme è identica a quella nei messaggi, consultate quindi l'Appendice 2 del secondo paragrafo di questa guida

Il BBCode in tagboard

Nella tagboard che Forumfree / Forumcommunity mette a disposizione di ogni forum, per essere utilizzata come metodo di conversazione veloce fra gli utenti o per lasciare messaggi che devono rimanere in evidenza (solitamente la tagboard è inserita in homepage ed è quindi visibilissima) ma che non è necessario conservare oppure come newsboard per gli avvisi dello staff dei forum all'utenza, è possibile utilizzare alcuni (quelli basiliari) dei tag BBCode per la formattazione del testo e, nell'angolo inferiore sinistro della tagboard, trovate anche quattro tasti e un menù a tendina

per facilitarvi l'inserimento di questi tag (una versione ridotta del modulo di inserimento messaggi), i tag sono modificabili manualmente una volta scritti (mediante i tasti appositi) nell'area di testo della tagboard, prima di inserire i messaggi col tasto Invia.

Tasti B I U

Inseriscono i tag BBCode per ottenere testo in grassetto, corsivo o sottolineato

Testo di esempio Testo di esempio Testo di esempio

in tagboard non è possibile, al contrario dei messaggi, utilizzare il tag per i testo barrato

Menù a tendina COLORE

Con questo menù si inserisce il tag per la colorazione del testo

Testo di colore rosso

Sono presenti nel menù sette colori preimpostati

Blu

Rosso

Porpora

Arancione

Giallo

Grigio

Verde

ma è possibile utilizzare tutti i nomi di colore supportati dai browsers

Testo di esempio color fuchsia

trovate un elenco dei 147 nomi di colore supportati dai browsers più diffusi nella Guida ai colori nell'HTML

sezione I nomi dei colori nell'HTML

Nota

Anche in tagboard, come nei messaggi, è possibile esprimere i colori utilizzando i valori esadecimali dei colori (anche qui va omesso il simbolo #)

CODICE

[color=0000FF]Blu[/color]

Blu

CODICE

[color=FF0000]Rosso[/color]

Rosso

CODICE

[color=800080]Porpora[/color]

Porpora

CODICE

[color=FFA500]Arancione[/color]

Arancione

CODICE

[color=FFFF00]Giallo[/color]

Giallo

CODICE

[color=808080]Grigio[/color]

Grigio

CODICE

[color=008000]Verde[/color]

Verde

CODICE

[color=FF00FF]Testo di esempio color fuchsia[/color]

Testo di esempio color fuchsia

Per quanto riguarda i valori dei colori potete consultare la Guida ai colori nell'HTML

sezione I valori dei colori nell'HTML

e la Tabella colori HTML

Tasto http://

Lo si utilizza per inserire link testuali, nella prima finestra che vi apparirà dopo aver cliccato sul tasto copiate l'indirizzo internet della pagina che volete linkare, nella seconda il testo che volete sia visualizzato da chi leggerà il vostro messaggio, il risultato sarà il tag BBCode per l'inserimento di link testuali (che potete anche inserire manualmente)

usare il tag è l'unico modo di inserire link funzionanti in tagboard, al contrario di quanto avviene nei messaggi, i link inseriti direttamente non vengono riconosciuti come tali e sono resi come testo normale.

Questi sono i tag utilizzabili, in tagboard non è possibile utilizzare, oltre al già citato tag del testo barrato, i tag BBCode per la modifica del tipo di font, delle dimensioni del testo, non è possibile inserire indirizzi email cliccabili o immagini (è però possibile inserire, con l'apposito tag, il link all'immagine, esempio:

che sarà visualizzabile in una nuova finestra cliccando sul link, non sono nemmeno utilizzabili i tag QUOTE, CODE, HTML, SPOILER e qualsiasi tipo di tag HTML

Appendice 1 - Combinare i tag

Anche nella tagboard è possibile inserire (annidare) i tag l'uno all'interno dell'altro, in modo da combinarne gli effetti, è necessario, nel chiudere i tag, rispettare l'ordine in cui sono stati aperti.
Ovviamente la cosa va fatta manualmente, prima dell'inserimento del messaggio, non è possibile realizzarla utilizzando solamente i pulsanti, qui di seguito trovate due esempi

Testo colorato blu, in grassetto / corsivo / sottolineato

CODICE

[color=blue][b][i][u]Testo di prova[/u][/i][/b][/color]

Testo di prova

Link colorato blu, in grassetto / corsivo / sottolineato

CODICE

[url=http://newsboard.forumfree.net/][color=blue][b][i][u]NewsBoard Forum[/u][/i][/b][/color][/url]

NewsBoard Forum