Códigos BBCode

En esta entrada resumiremos las técnicas que te permitirán formatear la presentación de tus notas en estos foros de discusión. Para acompañar la lectura, es conveniente que abras la ventana de mensajes para lo cual debes presionar el botón Imagenpara presentar esta ventana arriba de este tutorial.

Se puede dar formato al texto con el código BBCode (Bulletin Board Code), el cual es una adaptación del código HTML (Hyper Text Markup Languaje). Por razones de seguridad en phpBB3 ya no se permite que el usuario introduzca código HTML como en la versión anterior (la cual de todas formas era en general desactivada por el administrador). Sin embargo ahora el administrador tiene la posibilidad de crear código BBCode a partir del HTML en forma libre. Esta mejora posibilita la creación de nuevos botones en el encabezamiento del cuerpo del mensaje, tanto de formateo como de audio y video, como verás más adelante.

Los comandos de este lenguaje reciben el nombre de tags o etiquetas. La mayoría de los tags aparecen en parejas según la estructura: un tag de apertura, el texto y un tag de cierre.
Ambos tags se colocan entre [ ] y además el de terminación incluye una barra inclinada /. Los tags son insensibles a las mayúsculas (es lo mismo una letra en mayúsculas que una en minúsculas).
Si colocas el mouse sobre cualquiera de los botones en el encabezamiento del cuerpo del mensaje puedes ver un ejemplo.

Se colocan con el mouse seleccionando el texto y haciendo clic en el botón correspondiente o haciendo clic en el botón y colocar el texto entre los tags de apertura y cierre. También se pueden colocar con el teclado. Algunos incluyen teclas de acceso rápido (que pueden leerse al colocar el mouse sobre el botón). Si tienen algún parámetro para teclear (por ejemplo valores numéricos de un margen), no incluir ningún espacio. Tener presente que si el código BBCode que coloques es incorrecto, el programa no puede interpretarlo y colocará el código en forma literal.

 

A continuación se describen los códigos de interés. La mayoría de ellos fueron creados por nosotros para comodidad de nuestros usuarios. En el futuro se incorporarán más botones, a medida que sean requeridos.

 

Para practicar puedes ir tecleando cada uno de estos códigos en la ventana de mensajes (puedes copiar y pegar si lo deseas) y luego controlar con el botón de [b]Vista Preliminar[/b] que se encuentra al pie, su efectividad.

A Códigos para formatear el texto.

Negrita

Código:

[b]texto[/b]


En el mensaje se verá:
texto

Cursiva

Código:

[i]texto[/i]


En el mensaje se verá:
texto

Subrayado

Código:

[u]texto[/u]


En el mensaje se verá:
texto

Tachado

Código:

[strike]TEXTO[/strike]


En el mensaje se verá:
TEXT

Tamaño de fuente (máximo: 200)

Código:

[size=150]texto[/size]


En el mensaje se verá:
texto

El código se puede colocar más rápidamente sombreando el texto y presionando el tamaño en la caja de selección correspondiente.


Subindice

Código:

[sub]Texto[/sub]


En el mensaje se verá:
Texto normalTexto

Superindice

Código:

[super]Texto[/super]


En el mensaje se verá:
Texto normalTexto

Tipo de fuente

Código:

[font=tipo de fuente]texto[/font]


En el mensaje se verá (ejemplo para Magneto):
texto

 

Texto intermitente

Código:

[blink]texto[/blink]


En el mensaje se verá:
texto

Puede no funcionar en IE.

Alineación

Código:

[align=center]Texto[/align]

En el mensaje se verá:

Texto

 

Las opciones del atributo son: right, left, center y justify

Margen

Código:

[margen=MargenIzq,MargenDer]TEXTO[/margen]

Valores en px

Es necesario dar los 2 parámetros aunque algún valor sea 0.

 

Opciones:

Puede aplicarse a texto o a imágenes

 

Color de fuente

Código:

[color=red]texto[/color]


En el mensaje se verá:
texto

El color del texto puede colocarse con su nombre en inglés ( red, darkred, orange, brown, yellow, green, olive, cyan, blue, darkblue, indigo, violet, white, black, etc) o con el código hexadecimal (#000000 a #FFFFFF) precedido por el signo # .
En este código son seis dígitos hexadecimales, lo cual significa que cada uno tiene 16 posibilidades (0 al F). Corresponden al código de colores RGB, (Red–Green–Blue), los dos primeros dan 16*16 = 256 colores de la gama del rojo (00 al FF), los dos siguientes en la gama del verde y los dos últimos en la gama del azul. En total se tendrán 16 a la 6 = 16777216 colores. Así por ejemplo el rojo será FF0000, el verde 00FF00, el azul 0000FF, el negro 000000 y el blanco FFFFFF.

Código:

[color=#0023ef]texto[/color]


En el mensaje se verá:
texto

Los códigos para colorear un texto o cambiar el tamaño, se pueden colocar más rápidamente sombreando el texto y presionando el color o el tamaño en la caja de selección correspondiente.

Resaltado de texto

Código:

[highlight=#0000FF]Texto[/highlight]


En el mensaje se verá:
Texto

Resaltado de Párrafo

Código

[ColorParrafo=#ffff00]TEXTO[/ColorParrafo]

 En el mensaje se verá:

 

TEXTO

 

Marquesina

Código:

[marquee= right]texto[/marquee]


En el mensaje se verá una marquesina (texto con desplazamiento)

Las opciones del atributo son: down, up, right y left

  

Línea horizontal

Código:

[hr=#00ff00][/hr]

 

En el mensaje se verá la siguiente línea:

 



Notas:

No se debe colocar nada entre los tags.

El color no funciona igual en los distintos exploradores.


B Códigos que colocan viñetas o números

Lista no numerada

Código:

[list]
[*]Elemento 1
[*]Elemento 2
[*]Elemento 3
[/list]


En el mensaje se verá:


Lista numerada (se agrega el atributo =1 para números o =a para letras)

Código:

[list=1]
[*]Elemento 1
[*]Elemento 2
[*]Elemento 3
[/list]


En el mensaje se verá:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

[/list]

 

 

 C Códigos que insertan una imagen, una dirección de Internet o un hipervínculo

Insertar URL o Email
Se teclean directamente:
http://www.mipagina.com
En el mensaje se verá:
http://www.mipagina.com

alguien@direccion.com
En el mensaje se verá:
alguien@direccion.com

Insertar imagen

Código:

[img]http://url_imagen[/img]


En el mensaje se verá la imagen almacenada en esa dirección. Es necesario colocar http://

Insertar imagen o texto con hipervínculo a una URL
se incrusta el código de la imagen dentro de tags [url] con la dirección del hipervínculo

a) Imagen

Código:

[url=http://www.mipagina.com][img] http://url_imagen [/img][/url]


En el mensaje se verá la imagen conteniendo el hipervínculo

b) Texto

Código:

[url=www.mipagina.com]texto[/url]


En el mensaje se verá el texto con el hipervínculo
Ejemplo: colocar el mouse sobre el texto.
texto

c) Adjunto
Se refiere a la posibilidad de que el administrador permita que los usuarios adjunten archivos a sus informes utilizando el panel de Adjuntos que se encuentra debajo del de la escritura del mensaje.
Luego de subido el archivo adjunto, se presiona el botón Intercalar con lo cual el archivo se intercala en el texto a partir del punto de inserción.
El código que aparece automáticamente tiene la estructura:

Código:

[attachment=0]nombrearchivo.extension[/attachment]


El número de cada adjunto es asignado automáticamente por el software.
Al último le asigna 0 y así siguiendo.
Cuando se envía el mensaje se ve la imagen o el nombre del archivo para abrir o descargar, en lugar del BBCode.

Comentario oculto

Código:

[note]TEXTO[/note]


El TEXTO solo aparece en la ventana de edición y no en el mensaje final.

 

 Pagina web incrustada

Código:

[web]http://dirección[/web]


La página colocada entre los tags se incrusta en el mensaje en un tamaño de 700px * 500px. Debe tipearse por ejemplo como: http://www.aprehender.net (sin http://)

Búsqueda en Google o Yahoo

Código:

[google]TEXTO[/google]

 

Código:

[yahoo]TEXTO[/yahoo]


Con un clic en el texto colocado, se abre otra ventana con la búsqueda en Google o en Yahoo.

 

D Códigos que modifican la presentación del mensaje

Cita

Código:

[quote]texto[/quote]


En el mensaje se verá:

Citar:

texto

 

Código:

[quote="Anita"]texto[/quote]


En el mensaje se verá:

Anita escribió:

texto

 


Código

Código:

[code]texto[/code]


Se escribe en fuente Courier o de máquina. Fue empleado frecuentemente en este tutorial.

Spoiler (texto oculto/visible)

Código:

[spoiler]texto[/spoiler]


En el mensaje se verá un botón que habilita o no la visualización del texto.

 

Iframe (archivo extenso)

Código:

[IFrame]URL[IFrame]

En el mensaje se verá el contenido del archivo alojado en esa dirección URL.

 

 

B Códigos que colocan video o audio

Archivo Flash

Código:

[flash=width,height]URL[/flash]


El mensaje se verá así. De paso poné a prueba tus conocimientos de mecánica.


 Fuente: Flash Animation for Physics, Universidad de Toronto.


Los atributos son width=ancho height=alto, ambos en píxeles

Google Video

Código:

[googlevideo]numero ID del video[/googlevideo]

El número ID del video es el número de 19 dígitos después de: docid=- (es el valor que cambia de uno a otro video)


En el mensaje se verá como el siguiente ejemplo. Presiona Start para ver un recital de Queen:


YouTube

Código:

[youtube]ID[/youtube]

El ID es el código después de v= (es el valor que cambia de uno a otro video)


En el mensaje se verá así. Presiona Start para ver un video descripto en http://www.aprehendernet.blogspot.com

MP3

Código:

[MP3]http://url.mp3[/MP3]

Los archivos de audio pueden ser: mp3, wav, mid o au

En el mensaje se verá el siguiente control de MP3. Presionar Start para escuchar un famoso tema de Keane
grabado de su recital en BsAs.

 

Este es el final de este tutorial, confiamos en que te será de utilidad y esperamos ansiosos disfrutar de tus futuras notas multimedia.


Administradores de Aprehender.Net