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:
FormatoSignificadoAspecto [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"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] Tamaño 18 <div style="clear:both;">
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.
FormatoSignificadoAspecto [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 <div style="clear:both;">
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:
FormatoSignificadoAspecto [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 <div style="clear:both;">
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: