Wikipedia

BBCode

Lenguaje de marcas ligero

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.

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 ?
[editar datos en Wikidata]

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar
Artículo principal: Colores HTML

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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

editar

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:

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:


Usos más complejos

editar

Anidado de elementos

editar

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

editar
Obtenido de «https://es.wikipedia.org/w/index.php?title=BBCode&oldid=163259398»