BBCode

BBCode (Bulletin Board Code)
Desarrollador
PhpBB
http://php.net/manual/en/book.bbcode.php
Información general
Tipo de MIME	text/html
Type code	TEXT
Tipo de formato	Lenguaje de marcado
Extendido de	HTML
Extendido a	XBBCode
Estándar(es)	No existe un documento estandarizador
Formato abierto	?

BBCode, proveniente del inglés Bulletin Board Code, es un lenguaje de marcas ligero utilizado preferentemente en foros de discusión y correos electrónicos para embellecer la forma en que un mensaje o post es presentado.

Los BBCodes no pueden ser interpretados directamente por un navegador web, por lo que es el propio sistema del foro el que se encarga de traducir el contenido marcado en BBCode hacia un lenguaje que los navegadores web puedan entender, ya sea HTML o XHTML.

No se encuentra oficialmente regulado, pero debido a su amplia utilización se ha convertido en un estándar de facto, así como en un estándar de mejor práctica actual.

Historia

BBCode fue creado por PhpBB para sus propios foros e introducido por primera vez en 1998 con el software de foros Ultimate Bulletin Board en su versión 3. Es por eso que a veces es también denominado UBBCode. Finalmente, gracias a su sencillez, potencia y funcionalidad se ha difundido en la gran mayoría de los foros web y hasta en los correos electrónicos.

Propósito

BBCode fue ideado para proporcionar un mecanismo que permitiera a los usuarios mejorar la presentación de sus mensajes de una manera más segura, más sencilla y más limitada. Previamente muchos foros permitían el uso de HTML, con el efecto colateral de que si había HTML mal escrito se trastornaba toda la distribución de la página, o el HTML podía ser usado para incluir JavaScript lo que causa graves problemas de seguridad al permitir ataques XSS.

Sin embargo algunas implementaciones de BBCode han sufrido problemas relacionados con el modo en que traducen el BBCode a HTML, lo que podría contradecir la seguridad que se intentaba dar con BBCode. Una alternativa es un filtro HTML correctamente escrito (muchos de los cuales están libremente disponibles).

A pesar de que las etiquetas básicas de BBCode son similares en la mayoría del software para foros de Internet, de hecho no existe un documento que estandarice los BBCode y como consecuencia hay muchas variantes muchas veces incompatibles entre sí. Algunas variantes distinguen entre mayúsculas y minúsculas en los nombres de las etiquetas, mientras que otras no. Algunas variantes tienen etiquetas que ponen de relieve el formato HTML, ASP, PHP, SQL y otros lenguajes de marcas y lenguajes de programación. Etc.

Estructura y sintaxis

BBCode se encuentra basado en el lenguaje HTML, y es muy similar a este en estructura y sintaxis. BBCode cuenta con elementos y atributos como el HTML, aunque al ser una versión simplificada del mismo resulta mucho más sencillo de aprender y utilizar.

Los elementos son la estructura básica del lenguaje, cada elemento tiene dos propiedades esenciales: contenido y atributos.

Elementos

Los elementos en BBCode por lo general poseen una etiqueta de inicio y una etiqueta de cierre, el contenido queda enmarcado entre ambas etiquetas. En BBCode el nombre de una etiqueta se encuentra delimitada por corchetes [ ], a diferencia de HTML, donde se utilizan los símbolos de desigualdad < >. Algunas etiquetas contienen un modificador, también conocido como atributo, cuyo valor se asigna a la propia etiqueta con el símbolo =.

Atributos

La mayoría de los atributos de un elemento en BBCode son simplemente valores, escritos en la etiqueta de comienzo de un elemento y asignados a la misma por un signo de igual =, después del nombre de esta. El valor puede estar rodeado por comillas dobles o no, la mayoría de los sistemas de foros son tolerantes a estas modificaciones. Sin embargo, dejar los valores sin comillas es considerado una práctica poco segura.

La sintaxis general es entonces:

[nombre_etiqueta="atributo"] Contenido [/nombre_etiqueta]

Parsing

BBCode como tal, sería interpretado por un navegador sólo como texto. Para que no aparezca como tal, sino que muestre un formato especial, en primer lugar debe ser procesado por un script de análisis o parser del lado del servidor en el que se encuentra contenido el programa del foro. El parser analiza el texto introducido por el usuario antes de entregarlo al navegador con un formato adecuado para que este pueda interpretarlo. Un parser BBCode busca específicamente las etiquetas de BBCode y las reemplaza con las correspondientes etiquetas de HTML, haciendo primero un análisis de sintaxis para comprobar que no haya errores.

Por ejemplo, el elemento BBCode [b] [/b] para negrita, se puede escribir sustituido por el elemento HTML < b> </ b>, pero no sería correcto hacerlo para una única etiqueta [b], de modo que después de que el parser ha efectuado el análisis de error de sintaxis entrega el código HTML de salida.

Como regla general, el parsing se hace "one way", es decir, un mensaje en el foro se guarda en la base de datos del foro junto con el BBCode de manera estable, y cada vez que un navegador accede a ese post en particular, el parser del foro traduce el BBCode antes de presentárselo al navegador.

Los scripts de parsing pueden ser escritos en diferentes lenguajes de programación del lado del servidor algunos muy populares son por ejemplo PHP y Perl.

Un ejemplo de un parser muy básico escrito en PHP, sería:

<?php 
$text = preg_replace("/\[b\](.*)\[\/b\]/Usi", "<b>\\1</b>", $text);
$text = preg_replace("/\[i\](.*)\[\/i\]/Usi", "<i>\\1</i>", $text);
$text = preg_replace("/\[u\](.*)\[\/u\]/Usi", "<u>\\1</u>", $text);
$text = preg_replace("/\[color=(.*)\](.*)\[\/color\]/Usi", "<span style=\"color:\\1\">\\2</span>", $text);
$text = preg_replace("/\[email=(.*)\](.*)\[\/email\]/Usi", "<a href=\"mailto:\\1\">\\2</a>", $text);
?>

Uso del BBCode

El lenguaje BBCode presenta elementos que pueden ser agrupados en cinco grandes categorías:

• Modificadores de la apariencia del texto
• Presentación de imágenes
• Hipervínculos
• Estructuras ordenadas
• Bloques de texto de utilidad especial

Modificadores de la apariencia del texto

Los siguientes marcadores sencillos pueden ser utilizados para modificar la apariencia del texto, la mayoría de estos marcadores proviene del HTML y su uso está ampliamente distribuido en diferentes versiones de BBCode:

Formato	Significado	Aspecto
[b]Negrita[/b]	Texto en negrita	Negrita
[u]Subrayado[/u]	Texto subrayado	Subrayado
[i]Cursiva[/i]	Texto en itálica o cursiva	Cursiva
[s]Tachado[/s]	Texto tachado	Tachado
[size=18]Tamaño 18[/size]	Amplía el tamaño del texto hasta 18 puntos[Nota 1]​	Tamaño 18

1. "Size" se puede usar hasta el tamaño 30. También hay foros que tienen un tamaño por defecto asignado y unos límites. Esos casos se utiliza otro tipo de código. Ejemplo: [size=+3]Tamaño por defecto 19, tamaño mostrado 22[/size]

Modificadores de alineación

El uso de marcadores de alineación en BBCode puede ser más o menos similar al del HTML dependiendo del sistema de foros utilizado, existen dos mecanismos principales para alinear ya sea texto, tablas o imágenes.

• [align=alineación]Contenido a alinear[/align] donde el atributo alineación puede tomar los siguientes valores:

left: para alinear contenido a la izquierda.

right: para alinear contenido a la derecha.

center: para centrar el contenido.

justify: para justificar el contenido.

• [Alineación]Contenido a alinear[/alineación], donde el atributo sustituye al nombre de la etiqueta.

Formato	Significado	Aspecto
[align="left"]Contenido a alinear[/align]	Alinea a la izquierda	Contenido a alinear
[align="right"]Contenido a alinear[/align]	Alinea a la derecha	Contenido a alinear
[align="center"]Contenido a alinear[/align]	Alinea al centro	Contenido a alinear
[align="justify"]Pequeño párrafo que demuestra el texto contenido justificado[/align]	Justifica el texto contenido	Pequeño párrafo que demuestra el texto contenido justificado
[left]Contenido a alinear[/left]	Alinea a la izquierda	Contenido a alinear
[right]Contenido a alinear[/right]	Alinea a la derecha	Contenido a alinear
[center]Contenido a alinear[/center]	Alinea al centro	Contenido a alinear
[justify]Pequeño párrafo que demuestra el texto contenido justificado[/justify]	Justifica el texto contenido	Pequeño párrafo que demuestra el texto contenido justificado

Colores

BBCode permite modificar el color del texto mostrado, ya sea utilizando el nombre de alguno de los colores predefinidos en el estándar HTML, o introduciendo directamente el color deseado en código RGB hexadecimal. Este último método aunque un poco más complicado, permite trabajar con una mayor variedad de colores, el único requisito es saber cómo generarlos. Existen utilidades que se encargan de esto, por ejemplo, la extensión ColorZilla para el navegador Mozilla Firefox.

Ciertos programas de foros admiten el uso de una variante acotada de 3 dígitos del Sistema hexadecimal RGB (siendo R el valor del color rojo, G el del color verde y B el del color azul) este sistema resulta más simple de utilizar a costa de poseer menos matices de colores. Sin embargo, generalmente se utiliza el sistema de 6 dígitos hexadecimales (RRGGBB, donde RR representa el valor perteneciente al color rojo, GG al color verde y BB al color azul) este sistema permite en teoría representar 16.777.216 colores.

Una pequeña lista de algunos ejemplos de colores disponibles en BBCode provenientes del estándar HTML. Para más colores consultar el artículo principal:

Formato	Significado	Aspecto
[color="black"]Negro[/color]	Texto en color Negro	Negro
[color="brown"]Marrón[/color]	Texto en color Marrón	Marrón
[color="maroon"]Granate[/color]	Texto en color Granate	Granate
[color="red"]Rojo[/color]	Texto en color Rojo	Rojo
[color="coral"]Coral[/color]	Texto en color Coral	Coral
[color="orange"]Naranja[/color]	Texto en color Naranja	Naranja
[color="yellow"]Amarillo[/color]	Texto en color Amarillo	Amarillo
[color="olive"]Oliva[/color]	Texto en color Oliva	Oliva
[color="lime"]Verde lima[/color]	Texto en color Verde lima	Verde lima
[color="limegreen"]Verde claro[/color]	Texto en color Verde claro	Verde claro
[color="green"]Verde[/color]	Texto en color Verde	Verde
[color="darkgreen"]Verde oscuro[/color]	Texto en color Verde oscuro	Verde oscuro
[color="teal"]Cerceta[/color]	Texto en color Cerceta	Cerceta
[color="cyan"]Cian[/color]	Texto en color Cian	Cian
[color="lightskyblue"]Azul cielo claro[/color]	Texto en color Azul cielo claro	Azul cielo claro
[color="blue"]Azul marino[/color]	Texto en color Azul marino	Azul marino
[color="navy"]Azul naval[/color]	Texto en color Azul naval	Azul naval
[color="pink"]Rosa[/color]	Texto en color Rosa	Rosa
[color="magenta"]Magenta[/color]	Texto en color Magenta	Magenta
[color="purple"]Púrpura[/color]	Texto en color Púrpura	Púrpura
[color="gray"]Gris[/color]	Texto en color Gris	Gris
[color="silver"]Plata[/color]	Texto en color Plata	Plata
[color="white"]Blanco[/color]	Texto en color Blanco	Blanco
[color=#B0C4DE]#B0C4DE[/color]	Texto en color RGB #B0C4DE	#B0C4DE

Fuentes

BBCode también permite la opción de cambiar la fuente del texto, sin embargo es conveniente tener en cuenta que no todas las fuentes serán visibles para todo el mundo, ya que para que una fuente pueda ser presentada en un navegador, debe estar instalada en el sistema operativo sobre el que el navegador está funcionando. Aquí algunos ejemplos de las más comunes:

Formato	Significado	Aspecto
[font="Arial"]Arial[/font]	Texto con fuente Arial	Arial
[font="Wingdings"]Wingdings[/font]	Texto con fuente Wingdings	Wingdings
[font="Comic Sans MS"]Comic Sans MS[/font]	Texto con fuente Comic Sans MS	Comic Sans MS
[font="Century Gothic"]Century Gothic[/font]	Texto con fuente Century Gothic	Century Gothic
[font="Courier"]Courier[/font]	Texto con fuente Courier	Courier
[font="Fixedsys"]Fixedsys[/font]	Texto con fuente Fixedsys	Fixedsys
[font="Georgia"]Georgia[/font]	Texto con fuente Georgia	Georgia
[font="Lucida Sans"]Lucida Sans[/font]	Texto con fuente Lucida Sans	Lucida Sans
[font="Monotype Corsiva"]Monotype Corsiva[/font]	Texto con fuente Monotype Corsiva	Monotype Corsiva
[font="Times New Roman"]Times New Roman[/font]	Texto con fuente Times New Roman	Times New Roman
[font="Trebuchet MS"]Trebuchet MS[/font]	Texto con fuente Trebuchet MS	Trebuchet MS
[font="Verdana"]Verdana[/font]	Texto con fuente Verdana	Verdana

Presentación de imágenes

Para mostrar una imagen BBCode dispone del marcador img. El formato general de este elemento es:

[img]Ruta de la imagen[/img]

Por ejemplo el siguiente código:

[img]http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg[/img]

Mostraría el siguiente resultado

En muchos foros es posible modificar el tamaño de la imagen, utilizando los atributos width (ancho) y height (alto). Por defecto ambos atributos indican el tamaño en píxeles con que será mostrada la imagen, aunque puede ser adaptado utilizando el modificador "%" (porcentaje) para indicar que porcentaje del área visible será ocupada.

Por ejemplo el código:

[img width=264 height=240]http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg[/img]

Mostraría este resultado:

Hipervínculos

Como lenguaje derivado del HTML, uno de los elementos más poderosos con los que cuenta BBCode es el hipervínculo, en general representado por la etiqueta URL. Existen dos maneras directas de crear hipervínculos de texto en BBCode utilizando la etiqueta URL:

Formato	Significado	Aspecto
[url]http://www.google.com[/url]	Muestra el hipervínculo sobre la dirección de destino	http://www.google.com
[url="http://www.google.com"]Google[/url]	Muestra el hipervínculo sobre una palabra a elección	Google

Estructuras ordenadas

BBCode cuenta con dos tipos principales de estructuras ordenadas, las listas y las tablas. Estas últimas no son universalmente aceptadas y sólo algunos sistemas de foros permiten trabajar con ellas. A su vez existen dos tipos de listas, las listas simples y las listas ordenadas. Todas las estructuras ordenadas en BBCode son esencialmente similares a sus pares de HTML.

Listas simples o desordenadas

Una lista desordenada muestra a cada ítem en forma secuencial, uno detrás de otro indentando cada comienzo de ítem con un carácter bala. Para crear una lista desordenada se utilizan las etiquetas [list] [/list] y se define cada ítem de la lista con la etiqueta especial [*].

Por ejemplo el siguiente código

[list]

[*]Primer ítem

[*]Segundo ítem

[*]Tercer ítem

[/list]

Generaría el siguiente resultado:

• Primer ítem
• Segundo ítem
• Tercer ítem

Listas ordenadas

El segundo tipo de lista, la lista ordenada, brinda la posibilidad de decidir que se va a mostrar como indicador de orden antes de cada ítem.

Para crear una lista ordenada se puede utilizar por ejemplo [list=1] [/list] para crear una lista numerada, o alternativamente se puede utilizar por ejemplo [list=a] [/list] para crear una lista alfabética. Adicionalmente se puede comenzar la lista ordenada por cualquier otro número o letra. Como con las listas desordenadas, los ítems se especifican utilizando [*].

Por ejemplo el código

[list=1]

[*]Ir a la tienda

[*]Comprar una nueva PC

[*]Insultar a la PC cuando se cuelgue

[/list]

Generaría el siguiente resultado:

1. Ir a la tienda

2. Comprar una nueva PC

3. Insultar a la PC cuando se cuelgue

O si se utilizara una lista alfabética:

[list=a]

[*]Ir a la tienda

[*]Comprar una nueva PC

[*]Insultar a la PC cuando se cuelgue

[/list]

Generaría el siguiente resultado:

a. Ir a la tienda

b. Comprar una nueva PC

c. Insultar a la PC cuando se cuelgue

Tablas

La gestión de tablas en BBCode es muy similar a aquellas de HTML, y se hace por medio del elemento [table] [/table] el cual cuenta además con las etiquetas [tr] [/tr] que sirven para delimitar cada línea, y las etiquetas [td][/td] con las que se delimita cada celda. Un ejemplo de código de una tabla de tres líneas y cuatro columnas sería:

[table border="1"]

[tr] [td]Celda 1.1[/td] [td]Celda 1.2[/td] [td]Celda 1.3[/td] [td]Celda 1.4[/td] [/tr]

[tr] [td]Celda 2.1[/td] [td]Celda 2.2[/td] [td]Celda 2.3[/td] [td]Celda 2.4[/td] [/tr]

[tr] [td]Celda 3.1[/td] [td]Celda 3.2[/td] [td]Celda 3.3[/td] [td]Celda 3.4[/td] [/tr]

[/table]

El atributo border=" " sirve para indicar el ancho en píxeles de los bordes de la tabla; si se iguala a 0 los bordes no se muestran. Por lo general la etiqueta también admite los atributos width=" %" para indicar el ancho en porcentaje que debe ocupar la tabla, y align=" " donde se indica la alineación de la tabla como bloque, no del contenido de las celdas, eso debe hacerse dentro de cada etiqueta [tr], si se desea alinear el contenido de una línea, o dentro de cada etiqueta [td] si se desea alinear cada celda en particular.

El anterior código entregaría un resultado como el que sigue:

Celda 1.1	Celda 1.2	Celda 1.3	Celda 1.4
Celda 2.1	Celda 2.2	Celda 2.3	Celda 2.4
Celda 3.1	Celda 3.2	Celda 3.3	Celda 3.4

Y al modificar la primera línea por:

[table border="1" align="center" width="90%"]

Se obtiene:

Celda 1.1	Celda 1.2	Celda 1.3	Celda 1.4
Celda 2.1	Celda 2.2	Celda 2.3	Celda 2.4
Celda 3.1	Celda 3.2	Celda 3.3	Celda 3.4

Bloques de texto de utilidad especial

BBCodes permite el manejo de bloques de texto con características especiales utilizados en general para diferentes tipos de citas o referencias. En concreto la mayoría de los foros permite el uso de tres bloques de texto de utilidad especial. Las citas, las referencias a código fuente, y los spoilers.

Citas

Los bloques de citas se utilizan para transcribir los dichos de otras personas, referenciando de manera adecuada quién fue el autor de tales dichos. El marcador utilizado es [quote].

Ejemplo de código:

[quote="James"]Éste es el texto que quiero citar.[/quote]

Mostraría algo similar a esto:

James dijo:

Éste es el texto que quiero citar.

Por otra parte si no se quiere citar a nadie en particular, se puede utilizar el marcador quote sin especificar ningún nombre:

[quote]Éste es el texto que quiero citar.[/quote]

Códigos fuente

Cuando es necesario citar código fuente de algún lenguaje de programación o de marcado, es una buena costumbre el utilizar el marcador code. El marcador code cumple una doble función, por una parte lo que queda contenido dentro de las etiquetas [code] [/code] no es interpretado por el programa del foro, lo que evita que se puedan producir accidentes en la presentación de formato al hacer uso de expresiones o palabras reservadas, y por otro lado hace más legible el código fuente en si, ya que se utiliza un tipo especial de letra monospace en la que todos los caracteres, incluyendo el espacio, tienen el mismo ancho y en la que existe la misma separación entre todos los caracteres. Como consecuencia el código fuente permanece horizontal y verticalmente ordenado en diferentes líneas.

Ejemplo de código:

[code]

int main()

{

printf("hola");

}

[/code]

Se vería así

Código:

int main() { printf("hola"); }

Spoilers

El elemento [spoiler] [/spoiler] se utiliza para ocultar contenido sensible que puede molestar a otros usuarios, dejando a cada quién la opción de revisar este contenido o no. Otro uso frecuente es para reducir el tamaño vertical de un post, para que no resulte demasiado cansado recorrer todo el tablero.

El contenido de un spoiler puede mostrarse pinchando sobre un botón usualmente titulado "spoiler", "mostrar" o "desplegar".

Por ejemplo el siguiente código:

[spoiler]Este es el contenido que debe permanecer oculto[/spoiler]

Mostraría un resultado similar a este:

SPOILER

Este es el contenido que debe permanecer oculto

Mientras que el siguiente código:

[spoiler="Título del Spoiler"]Este es el contenido que debe permanecer oculto[/spoiler]

Mostraría un resultado similar a este:

Título del Spoiler

Este es el contenido que debe permanecer oculto

Usos más complejos

Anidado de elementos

BBCodes permite anidar elementos, para obtener resultados mucho más vistosos, un ejemplo típico sería por ejemplo crear un enlace sobre una imagen y no sobre una línea de texto.

El código para esto sería:

[url="ruta del enlace"][img] ruta de la imagen [/img][/url]

Otros ejemplos son por ejemplo cambiar el tamaño, color y fuente de un texto o párrafo, cambiar el color de un enlace, etc.

Prácticamente no existen límites para las posibles combinaciones, sin embargo y para evitar resultados inesperados debidos a errores de parsing, siempre es conveniente cerrar las etiquetas exactamente en orden contrario a como fueron abiertas.

Por ejemplo esta sería una forma correcta:

[font="Comic Sans Ms"][color="orange"][size=18] Texto a formatear [/size][/color][/font]

Y esta una forma incorrecta:

[font="Comic Sans Ms"][color="orange"][size=18] Texto a formatear [/font][/color][/size]

Enlaces externos

• Explicación del BBCode (desde phpBB-Es.COM)
• Explicación en inglés (Web de phpBB, creadora del lenguaje)
• Editor multiplataforma off-line de BBCode
• Pear: Package Information: HTML_BBCodeParser

• Datos: Q617770