BBCode

[Nem0]

COMANDOS BÁSICOS

BBCode (del inglés "Bulletin Board Code") es un mini-lenguaje de marcas utilizado en foros para embellecer la presentación de los mensajes. No es más que un catalogo de órdenes entre corchetes [] que se ponen a ambos lados del texto que queramos afectar. La marca de apertura y la de cierre tienen el mismo nombre, salvo que a está última la precede una barra inclinada: [orden]...[/orden] y da igual que se usen mayúsculas o minúsculas. Además algunas etiquetas aceptan un parámetro interno: [orden=dato]...[/orden]

Un fallo frecuente de los novatos es olvidarse de cerrar alguna marca (o escribirla mal), con lo cual el efecto se extiende por todo el comentario en vez de quedarse en la zona que interesaba. Cuando algo salga mal, hay que revisar hasta encontrar el fallo.


.......................................................
FORMATO DEL TEXTO

Itálica:	[i]poner texto[/i]	Ejemplo: Texto en cursiva o itálica.
Negrita:	[b]poner texto[/b]	Ejemplo: Texto en negrita.
Subrayado:	[u]poner texto[/u]	Ejemplo: Texto subrayado.
Tachado:	[s]poner texto[/s]	Ejemplo: Texto tachado.
Sub-Índice:	[sub]poner texto[/sub]	Textosubindice
Super-Índice:	[sup]poner texto[/sup]	Textosuperindice

......................................................
COLOR DEL TEXTO
Va por nombre inglés:

Azul:	[color=blue]poner texto[/color]	Ejemplo: Texto en color.
Blanco:	[color=white]poner texto[/color]	Ejemplo: Texto en color.
Rojo:	[color=red]poner texto[/color]	Ejemplo: Texto en color.
Negro:	[color=black]poner texto[/color]	Ejemplo: Texto en color.
Verde:	[color=green]poner texto[/color]	Ejemplo: Texto en color.

.............................................
TAMAÑO DEL TEXTO

Si queremos grande: [size=20pt]aqui va texto[/size]	Texto grande
Si queremos pequeño: [size=5pt]aqui va texto[/size]	texto pequeño

..............................................
ALINEACIÓN CENTRADA

[center]aqui va texto o lo que sea[/center] Ejemplo:

Objeto centrado.

.............................................
ENLACES
(Dicho enlace lo podeis copiar de la barra de direcciones del navegador, en la página de destino que os interese. También se puede copiar con el botón derecho del ratón)

---Se pueden poner a la vista: [url]AQUIvaENLACE[/url]	Ejemplo:    http://clasico.fantasitura.com/thread-3132.html
---O también ponerlos disimulados, usando un parámetro interno: [url=AQUIvaENLACE] texto cualquiera [/url]	Ejemplo:    Comentario de la serie Devs

.............................................
IMAGENES
[img]aquiVAdireccionIMAGEN[/img]
Ejemplo: [img]https://cdn.pixabay.com/photo/2017/11/09/21/41/cat-2934720__340.jpg[/img]


--Si ponemos varias imagenes en una misma linea/parrafo ... apareceran juntas (si caben)
--Si ponemos varias imagenes en distintas lineas/parrafos ... aparecerán separadas, una encima de la otra.

Spoiler for Hiden:

NOTA:
Las etiquetas [IMG]...[/IMG] admiten parametros para cambiar el tamaño de la imagen:
[IMG width=numero height=numero]...[/IMG]
aunque basta con usar el primero (pues el segundo se auto-ajusta proporcionalmente):
[IMG width=numero]...[/IMG]
Ejemplos:
[img width=200]https://cdn.pixabay.com/photo/2017/11/09/21/41/cat-2934720__340.jpg[/img]

[img width=50]https://cdn.pixabay.com/photo/2017/11/09/21/41/cat-2934720__340.jpg[/img]


Además, muchos foros limitan automáticamente el tamaño máximo de las imágenes. Por ejemplo, este foro solo permite hasta width=500

Spoiler for Hiden:

A como conseguir (en la red) enlaces para pegar, le he dedicado un par de hilos:
---Pilla IMAGENES EN LA RED
---Catálogos online de IMÁGENES LIBRES

.............................................
CITAS
[quote]aqui va lo que se quiera[/quote]
Un ejemplo:

En los foros ya hay botones de CITAR, si pulsas uno de ellso equivale a pulsar RESPONDER pero ya incluye el código del mensaje que has elegido citar. Si resulta muy largo, conviene recortalo hasta dejar la parte que te importa.

En general la orden [quote]...[/quote] tambien suele usarse para poner algún texto que queramos destacar y que venga de fuera del foro (como las reseña de alguna novela)

............................................
SPOILERS
[spoiler]aqui va lo que se quiera[/spoiler]
Ejemplo:

Spoiler for Hiden:

Es un bloque de contenido que se oculta o se despliega al clikear en él. Se suele usar para comentarios que desvelan el contenido de una novela o una pelicula, ect.

.............................................
LINEAS SEPARADORAS
Es sencillito, basta poner [hr] para trazar una linea. Y no hace falta cerrarlo.

[Nem0]

ENSAMBLAR VARIOS COMANDOS

Para conseguir efectos simultáneos, se puede meter varios comandos unos dentro de otros. PERO hay que seguir dos reglas:

[1] Se cierran en el orden inverso al que se hayan abierto. (Para que así los efectos vayan quedando anidados unos dentro de los otros).

Ejemplo bien: [b][i][color=green]aqui va texto[/color][/i][/b]
Ejemplo malo: [b][i][color=green]aqui va texto[/b][/i][/color]

[2] Las ordenes de bloque (generales) deben envolver a las de segmento (locales). Es decir, los comandos débiles no son capazes de afectar a los fuertes desde fuera, hay que meterlos dentro para que funcionen.

Ejemplo bien: [quote][color=green]aqui va texto[/color][/quote]
Ejemplo malo: [color=green][quote]aqui va texto[/quote][/color]



Con esas dos reglas en mente se puenden hacer combinaciones útiles...

---Acumular efectos de letras:

[b][i]negrita e italica[/i][/b]	negrita e italica
[color=green][u]coloreado y subrayado[/u][/color]	coloreado y subrayado
[i][b][s][u]cuatro efectos a la vez[/u][/s][/b][/i]	cuatro efectos a la vez

---Centrar imágenes:
[center][img]http://https://i.ibb.co/mSwGMQ5/gato.png[/img][/center]

Spoiler for Hiden:

SIN CENTRAR:


CENTRADA:

---Asociar imágenes a un enlace. Si metes una imagen [img]..[/img] dentro de un [ulr=enlace]...[/url], cuando se haga click en ella se activa el enlace que la acoge:
[url=AQUIvaENLACE][img]AQUIvaDIRECCIONimagen[/img][/url]

Spoiler for Hiden:

CODIGO:
[URL=https://es.wikipedia.org/wiki/Felis_silvestris_catus][IMG]https://i.ibb.co/mSwGMQ5/gato.png[/IMG][/URL]

RESULTADO:

Clikear en la imagen para activar el enlace.

[Nem0]

COMANDOS MÁS AVANZADOS

No es que sean más díficiles de hacer, su problema es que no están disponibles en todas las webs y foros de la red. Por ello, puedo poner unos cuantos que SÍ que funcionan aquí (pero casi seguro que no lo harán en otros sitios). Y al revés, hay más comandos que ya no pongo debido a que no funcionana AQUÍ.

Los comandos básicos que puse arriba son un repertorio suficiente y universal. Vale la pena aprenderlos. Estos otros, sin embargo, son una rareza (solo valen para fardar, y solo en algunos sitios). Seguramente, los más espabilados ya habrán entrado en el botón de AYUDA del foro, para mirar cuales son los comandos BBCodes disponibles.


....................................................
MÁS FORMATOS DE TEXTO
Este foro dispone de comandos para sombras [shadow=COLOR,NUMERO]...[/shadow] y también para auras [glow=color,número]...[/glow] que precisan de los parametros COLOR (el nombre ingles del color) y NÚMERO (la cantidad de pixels que usan, suelen ser 2 o 3, no hay que pasarse).

Sombreado, usando "shadow": [shadow=red,2]..........[/shadow]	Texto con sombras.
Aura, usando "glow":    [glow=green,3]...........[/glow]	Texto con aura.

.....................................................
OTRAS FUENTES DE TEXTO
Se hace con el comando [font=NOMBRE]...[/font] donde  el parametro NOMBRE es el de la "fuente de texto" que se quiere usar.

[font=Courier New]Fuente courier new[/font]	Fuente courier new
[font=Arial]Ejemplo de fuente Impact[/font]	Ejemplo de fuente arial
[font=Impact]Ejemplo de fuente Impact[/font]	Ejemplo de fuente Impact

Usado así, con NOMBRE PROPIOS, tiene un problema: que solo sirve para usuarios cuyo sistema operativo tenga esas fuentes disponibles. En este caso solo funcionará para los Windows, pero NO para los Linux, ni los Mac, ni los Android. Para evitarlo es mejor usar FAMÍLIAS GÉNERICAS de fuentes  que están disponibles en todos los sistemas, y son tres: monospace, serif y sans serif. Aunque su aspecto cambia según el navegador que se use.

[font=monospace]Fuente tipo máquina[/font]	Fuente tipo máquina
[font=serif]Fuente menos burda[/font]	Fuente menos burda
[font=sans serif]Fuente mejorada[/font]	Fuente mejorada u optimizada

.....................................................
OTROS COLORES DE TEXTO
Verdaderamente universales (disponibles en todos lados) solo el blanco (white) el negro (black) y los tres primarios RGB (red-green-blue, rojo-verde-azul). Ahora bien, si el motor gráfico del navegador lo permite (y hoy en día casi todos pueden) hay disponible un enorme número de colores usando el código RGB (formado por el símbolo # y  tres pares de números exadecimales unidos). Ahí va un web que te dá el código RGB del color que desees: https://htmlcolorcodes.com/

[color=#DDA0DD]Rosa[/color]	Rosa
[color=#A6B117]Verduzcos[/color]	Verduzcos
[color=#A817B1]Fuxias[/color]	Fuxias
[color=#B11723]Granates[/color]	Granates

.....................................................
INVISIBILIDAD = TRANSPARENCIA
El motor de este foro (SMF) acepta un color muy peculiar [color=transparent]...texto...[/color], que consigue el efecto de que el texto tenga el mismo color que el fondo, lo que lo hace invisible. No le veo mucha utilidad, salvo para forzar el tamaño de alguna celdilla en las tablas (añadiendole una palabra-texto oculto muy largo que no pueda cortar).

Spoiler for "Arte ASCII":

También valdría para este tipo de "dibujos usando letras" (aprovechando la tremenda oferta de caracteres del catálogo UNICODE), por ejemplo:

[font=monospace][size=2pt][color=#000000]
[color=transparent]░░░░░░[/color]▄▄▄████████▄▄▄
[color=transparent]░░░░[/color]▄████████████████▄
[color=transparent]░░[/color]▄████████████████████▄
[color=transparent]░[/color]████████████████████████
[color=transparent][/color]▐████████████████████████▌
[color=transparent][/color]██████████████████████████
[color=transparent][/color]██████████████████████████
[color=transparent][/color]██████████████████████████
[color=transparent][/color]▐████████████████████████▌
[color=transparent]░[/color]████████████████████████
[color=transparent]░░[/color]▀████████████████████▀
[color=transparent]░░░░[/color]▀████████████████▀
[color=transparent]░░░░░░[/color]▀▀▀████████▀▀▀
[/color][/size][/font]

Quedaría:

░░░░░░▄▄▄████████▄▄▄
░░░░▄████████████████▄
░░▄████████████████████▄
░████████████████████████
▐████████████████████████▌
██████████████████████████
██████████████████████████
██████████████████████████
▐████████████████████████▌
░████████████████████████
░░▀████████████████████▀
░░░░▀████████████████▀
░░░░░░▀▀▀████████▀▀▀

.....................................................
OTRO ALINEAMIENTO
Arrimado a la derecha: [right]Aqui va texto o lo que sea[/right] Solo le veo utilidad para echar alguna firmita. Ejemplo:

TEXTO PUESTO A LA DERECHA.

......................................................
MOVIMIENTO
Este foro tiene el comando [move]aquí va texto o cualquier cosa[/move] Es un bloque que va moviendose de derecha a izquierda. Aunque esta web lo tiene, solo funciona con algunos navegadores. Como ejemplo vamos a probar con un gif animado:
[move][img]_{https://www.gifss.com/animales_fantasticos/images/dragon-fantastico-03.gif}[/img][/move]


.......................................................
NOTAS FLOTANTES
En los ordenadores (no en las tablets, ni en los móviles) cuando pasas el ratón por encima de algún objeto a veces sale un mesajito flotante a modo de ayuda dando alguna explicación. Pues bien, este foro tiene el comando [acronym="TEXTO"]...[/acronym], inicialmente pensado para poder explicar con una nota de esas el significado de siglas de texto (compruébese en... USA, UGT, URSS), pero que en realidad se le puede aplicar cualquier objeto (imágenes, enlaces, citas). El mensaje flotante del parámetro ha de ir entre comillas.
[acronym="CLICKEAME"][url=http://......][img]......[/img][/url][/acronym]



......................................................
INTRA-ENLACES
El comando básico para enlaces [url]direccion[/url] abre dicho enlace en una nueba pestaña. Pero si lo que deseamos es que se reemplaze nuestra ventana actual por el contenido del enlace, entonces usese [IURL]direccion[/IURL]. O también vale ocultar la dirección como parámetro: [IURL=direccion]texto cualquiera[/IURL]


...........................................................
LISTADOS
Aunque un listado se puede improvisar poniendo una rayas (---) delante de los párrafos, también podemos hacerlo bonito con comandos BBCode:

[list]    [li]texto de una opción[/li]    [li]texto de otra opción[/li]    [li]otra opción[/li]    [li]y otra más[/li] [/list]

Texto de una opción. Texto de otra opción. Otra opción. Y otra más.

.......................................................
TABLAS
Para montar una tabla BBCode hay que ensamblar 3 comandos: primero declaramos la tabla [table]...[/table] luego dentro de ella declaramos una fila ("table row" en inglés) [tr]...[/tr] y finalmente dentro de esa fila declaramos una o varias celdillas ("table data" en inglés) [td]...[/td].  Es decir, que el esquema general de, por ejemplo, una tabla 3x3 sería:

[table]
[tr]	[td]TEXT0[/td]	[td]TEXT0[/td]	[td]TEXT0[/td]	[/tr]
[tr]	[td]TEXT0[/td]	[td]TEXT0[/td]	[td]TEXT0[/td]	[/tr]
[tr]	[td]TEXT0[/td]	[td]TEXT0[/td]	[td]TEXT0[/td]	[/tr]
[/table]

Donde puse TEXTO, puede ir cualquier cosa. Generalmente las tablas sirven para presentar datos en columnas bien ordenadas. Pero también se pueden usar para maquetar el mensaje: poniendo en unas celdas textos, en otras imágenes, o citas. La tabla mínima constaría de una sola fila con una sola celdilla (que sería como no hacer nada). Con una fila y dos celdas, ya se podría hacer un mensaje partido en dos columnas (imitando a las revistas).


...................................................
ANULAR BBCode
Para hacer todo este hilo tuve que usar a cada momento el comando [nobbc]...[/nobbc]  que hace precisamente eso: ingnorar las ordenes BBCode que vayan dentro, pues sino el visor del foro las ejecutaría y no se dejarían presentar como texto.