¿Qué son los BBCodes y para qué sirven?

Son códigos usados en los foros para embellecer, dar formato y organizar los mensajes.

Son esos códigos que se muestran en una tabla justo encima del cuadro donde se escribe el mensaje. Todos tienen dos mini-códigos llamados balizas. Una de apertura y otra de cierre. La de cierre tiene este signo "/", y la de apertura no la tiene. Para que el BBCode funcione, deben aparecer las dos balizas.

Aquí les mostraré en forma detallada cómo funcionan.

Este BBCode sirve para hacer más gruesas las letras, lo que comúnmente se les llama "negritas". Su formato es:

Código:

[b][/b]

La letra "b" es de "bold" (en inglés).
La forma sencilla de usarlo es seleccionando con el mouse la palabra o el texto que deseas, luego, con todo seleccionado, presionas el BBCode, y enseguida el texto quedará enmedio del código que te mostré un poco antes. Este BBCode nos sirve para resaltar palabras o frases que deseamos destacar para que llame la atención.

Ejemplo:

Código:

[b]Letra en negrita[/b]

Resultado: Letra en negrita
Hace que la letra se vea inclinada. Se procede de la misma manera: seleccionas la palabra o texto, presionas luego con el mouse el BBCode de la "I" y es todo.

Ejemplo:

Código:

[i]Letra itálica o cursiva[/i]

Resultado: Letra itálica o cursiva
Se muestra con la letra "U", porque en inglés se dice "underline". Seleccionas y aplicas ese BBCode:

Ejemplo:

Código:

[u]Letra subrayada[/u]

Resultado: Letra subrayada
Tiene la letra "s" porque en inglés, tachado se dice "strikethrough".

En lo personal aún no le he encontrado utilidad a este BBCode.
Ejemplo:

Código:

[strike]Letra tachada[/strike]

Resultado: Letra tachada
El formato por defecto es el alineado a la izquierda, lo cual quiere decir que si no le aplicas formato de alineación al texto, por defecto se alineará a la izquierda.

Seguro que esto no requiere de mucha explicación: existe el formato de texto centrado, el alineado a la derecha, y el último es el justificado, o sea que se extiende a todo lo ancho del espacio de la escritura.
Ejemplo:

Código:

[center]Texto centrado[/center]

Resultado:

Código:

[right]Texto alineado a la derecha[/right]

Resultado:
Texto justificado:

Código:

[justify](para que se note tiene que ser un texto lo suficientemente largo como para que abarque todo el ancho del espacio de la escritura.)[/justify]

Resultado:
Texto sin justificar
(para que se note tiene que ser un texto lo suficientemente largo como para que abarque todo el ancho del espacio de la escritura.
La viñeta que viene por defecto es un puntito; no se puede elegir otra viñeta.

Para realizar esta lista, lo primero es presionar el botón BBCode. Te aparecerá este código:

Código:

[list][*][/list]

El código con el asterisco representa una viñeta.
Enseguida del asterisco escribe lo que será tu primera viñeta, tu primer concepto, tu primer artículo, la información de tu primera línea.
Luego presiona el código
[*]que está ahí:

Y enseguida escribe lo que será tu segunda viñeta, tu segundo concepto, tu segundo artículo, la información de tu segunda línea. Y así sucesivamente.

Entonces, si yo escribo:

Código:

[list][*]Primera viñeta
[*]Segunda viñeta
[*]Tercera viñeta[/list]

El resultado será éste:

• Primera viñeta
  
• Segunda viñeta
  
• Tercera viñeta
  

Se procede exactamente igual que con la lista con viñetas.

A diferencia de la anterior, esta lista agrega numeración consecutiva, ya sea con números o letras. Si deseas números, sólo presiona el BBCode y aparecerá esto:

Código:

[list=1][*][/list]

Por defecto viene el orden con números.
Ejemplo:

Código:

[list=1][*]Primero presiono el BBCode.
[*]Escribo el primer artículo.
[*]Escribo el segundo artículo.
[*]Escribo el tercer artículo.[/list]

Resultado:

1. Primero presiono el BBCode.
   
2. Escribo el primer artículo.
   
3. Escribo el segundo artículo.
   
4. Escribo el tercer artículo.
   

Y si deseo que el orden sea con letras, alfabéticamente, sólo cambio el 1 por la letra "a":

Código:

[list=a][*]Primer artículo
[*]Segundo artículo
[*]Tercer artículo[/list]

Resultado:

1. Primer artículo
   
2. Segundo artículo
   
3. Tercer artículo
   

Esto nos sirve para separar párrafos o bloques de texto, ya sea porque editamos un mensaje, o solamente para diferenciar una información de otra.

Ejemplo:

Código:

[hr]Inserté una línea

Resultado:

---

Inserté una línea
Este BBCode sirve para encerrar en un cuadro un texto dicho por otra persona, o traído de otro sitio.

Hay dos formas de usarlo. Una es primeramente presionando el BBCode; te aparecerá esta ventanita para que agregues al autor del texto:

Una vez lo agregues, le das a "Insertar"...

Aparecerá esto:

Código:

[quote="Ejemplo de citación"][/quote]

Luego escribes o pegas el texto que deseas:

Código:

[quote="Ejemplo de citación"]Texto que deseo[/quote]

Y te dará esto como resultado:

Ejemplo de citación escribió:Texto que deseo

La otra forma de usarlo es pegando o escribiendo el texto que deseo. Luego seleccionarlo, y presionar en el BBCode. Después puedes escribir al autor del texto, tal y como lo pudiste ver en el código del ejemplo anterior.
Este BBCode es muy útil porque nos permite presentar códigos puros para tutoriales como éste.

La razón es porque, si yo escribo los códigos usando sólo las balizas, el resultado no será el código, sino el efecto que el BBCode elegido aplique al texto. Entonces, para poder dar a entender perfectamente, metemos el código primero entre las  balizas "Code", para que se vea en su formato original, y después lo presentamos sin el BBCode "Code" para que se pueda ver el resultado.
Muy útil cuando vamos a mostrar textos muy largos, como un poema por ejemplo.

Ejemplo:

Código:

[spoiler="Ejemplo de spoiler, presiona aquí"]Aquí irá el texto que debo reducir porque posiblemente sea demasiado largo, y alargue innecesariamente este mensaje.[/spoiler]

Resultado:

Ejemplo de spoiler, presiona aquí:

Como puedes ver, con sólo presionar en el Título del spoiler (el cual puse cuando me apareció un cuadrito parecido al del bloque de citación), se despliega el mensaje.
Este BBCode permite que la parte de texto que esté dentro, no sea visible más que para el propio autor del mensaje, y para el usuario que llegue a postear al tema. Si un usuario no postea en el tema, será incapaz de ver el mensaje.

Ejemplo:

Código:

[hide]Texto que ocultaré y sólo lo podrán ver los que posteen en este tema[/hide]

Resultado:
Muchas veces deseamos hacer referencia a otro sitio web, y para no presentar la URL, lo que hacemos es integrarla a una parte del texto.

Al presionar sobre ese BBCode, aparecerá un conocido cuadrito:

Le das a "Insertar" y aparecerá este código...

Código:

[url=http://psicologoalrescate.foroactivo.mx]Foro Psicólogo al Rescate[/url]

El resultado: [Tienes que estar registrado y conectado para ver este vínculo]
En donde:

Código:

[url=URL DEL SITIO]Nombre del sitio[/url]

Presionas en cualquier logo e insertas la URL que te proporcione cada sitio, y luego a "Insertar".
Resultado tamaño 10
Resultado tamaño 13
Resultado tamaño 16
Resultado tamaño 18
Resultado tamaño 24
Si deseas un tamaño diferente, lo puedes editar desde el código. Por ejemplo, tienes el código para letra tamaño 18:

Código:

[size=18]Resultado tamaño 18[/size]

Y la quieres en tamaño 20. Sólo cambia el número dentro del code → "size=20"

Código:

[size=20]Resultado tamaño 18 (modificado a 20)[/size]

Y el resultado será:
Resultado tamaño 18 (modificado a 20)
Seleccionas el texto deseado, presionas en el BBCode Color, seleccionas el color, y aparecerá este código:

Código:

[color=#ff0000]Letra con color rojo[/color]

Resultado:
Letra con color rojo
Es igual si en lugar del [Tienes que estar registrado y conectado para ver este vínculo] pones el nombre del color en inglés:

Código:

[color=red]Letra con color rojo[/color]

Letra con color rojo
Ahora letra en color azul (con nombre del color en inglés)

Código:

[color=blue]letra en color azul (con nombre del color en inglés)[/color]

Seleccionas el texto deseado, presionas en el BBCode de "Fuente", y eliges el tipo de letra que deseas. Resultado:
Resultado fuente Arial
Resultado fuente Arial Black
Resultado fuente Comic Sans Ms
Resultado fuente Courier New
Resultado fuente Georgia
Resultado fuente Impact
Resultado fuente Times New Roman
Resultado fuente Trebuchet MS
Resultado fuente Verdana
Código:

Código:

[font=Arial]Resultado fuente Arial[/font]

Al presionarlo te muestra más o menos botones BBCodes.
Seleccionas el texto que deseas colocar como índice (Ejemplo: Xa+b-Ya-b; en este caso seleccionas "a+b"...), presionas el BBCode, y aparecerá este código:

Código:

X[sub]a+b[/sub]-Y[sub]a-b[/sub]

Y se verá así:
X_a+b-Y_a-b
Seleccionas el texto deseado, presionas el BBCode, y aparecerá este código:
X^a+b-Y^a-bY se verá así:

Código:

X[sup]a+b[/sup]-Y[sup]a-b[/sup]

Este BBCode le da movimiento al texto. Procedes igual, seleccionas el texto deseado, presionas en el BbCode, y aparecerá este código:

Código:

[scroll]Texto que se mueve a la izquierda[/scroll]

Y el resultado es éste:
Texto que se mueve a la izquierda
También es para movimiento, y se procede igual: seleccionas el texto, presionas el BBCode, y aparecerá este código:

Código:

[updown]Texto que se mueve hacia arriba[/updown]

Y éste es el resultado: Texto que se mueve hacia arriba
Se usa con números, y es para obtener números aleatoriamente; es como un "piedra, papel o tijera". En este caso no habrá texto seleccionado. Sólo presionas sobre el BBCode, para que aparezca el código:

Código:

[rand][/rand]

Enmedio de las dos balizas, puedes proceder de dos maneras.

• Si quieres que aparezca un número aleatorio con un mínimo y un máximo, anotas el mínimo y el máximo entre las balizas, separados con una coma.
  

  Código:

  [rand]50,100[/rand]

  Este código elige un número al azar, dentro del rango de mínimo 50, y máximo 100. Resultado:

  Número aleatorio (50,100) : 97

• Si deseas sólo un intervalo máximo, el mínimo será el 1. Dentro del código escribes sólo un número que representará tu número máximo.
  

  Código:

  [rand]50[/rand]

  Resultado:

  Número aleatorio (1,50) : 48

Este código agrega la fecha actual. Basta con presionarlo y aparecerá esto → 23.10.2015
Igual que la anterior, sólo basta presionarla y aparecerá la hora en la que estás escribiendo → 10:35:46


Como aquí no hay botón BBCode para presionar en el panel, se procede un poco diferente. Copias y pegas este código:

Código:

[flipv][/flipv]

Luego introduces el texto que deseas, entre las dos balizas. Ejemplo:

Código:

[flipv]En el amor no hay temor, sino que el perfecto amor echa fuera el temor[/flipv]

Resultado:
En el amor no hay temor, sino que el perfecto amor echa fuera el temor 


Agregas texto a este código:

Código:

[fliph]En el amor no hay temor, sino que el perfecto amor echa fuera el temor[/fliph]

Resultado:
En el amor no hay temor, sino que el perfecto amor echa fuera el temor 

---

Si deseas, puedes combinar estos dos códigos (cuidado, debemos respetar el orden de apertura y de cierre de cada código):

• Primero, pegas el primer código:
  

  Código:

  [flipv][/flipv]

• Luego, enmedio de ese código, pegas el otro:
  

  Código:

  [flipv][fliph][/fliph][/flipv]

• Introduces el texto enmedio del último código que introduciste:
  

  Código:

  [flipv][fliph]En el amor no hay temor, sino que el perfecto amor echa fuera el temor[/fliph][/flipv]

• Resultado: En el amor no hay temor, sino que el perfecto amor echa fuera el temor  

Pareciera que no funciona porque el texto casi no se ve; pero es justo el efecto, como de difuminado, medio borroso...

Código:

[blur]En el amor no hay temor, sino que el perfecto amor echa fuera el temor[/blur]

Resultado:
En el amor no hay temor, sino que el perfecto amor echa fuera el temor


El efecto es en el color de fondo del texto. Para que sea visible tiene que aplicarse a un texto largo.

Código:

[fade]En el amor no hay temor, sino que el perfecto amor echa fuera el temor[/fade]

Resultado:
En el amor no hay temor, sino que el perfecto amor echa fuera el temor

Algunas balizas pueden combinarse (ejemplo color y negrita, negrita e itálica, etc.). Sin embargo, se debe cuidar mucho el orden de las balizas de apertura, y las balizas de cierre. Recuerda que las balizas de cierre siempre tienen este signo "/", no así las balizas de apertura, que no lo tienen; así las podrás reconocer

Por hoy es todo. En otro tema hablaremos de las tablas.