Guía de BBCode

Oesoto

Director de Comunidad
Miembro del equipo
28 Abr 2004
27,693
En la interfaz de LANeros.com tenemos varios editores. Uno es el editor WYSIWYG (What You See Is What You Get) donde a medida que escribimos vamos viendo los resultados aplicados y el editor estandar donde escribimos todo en código y el resultado final solo se ve una vez se postea o se hace una vista previa del post.

A continuación se explicará algunos de los códigos mas importantes para el editor estandar, su estructura y manejo. Todo se maneja con Tags. Un tag se compone de un inicio y un cierre [INICIO] y [/CIERRE]. Todo lo que esté entre el inicio y el cierre quedará bajo el efecto del Tag.

Toda esta codificación se llama BBCODE por si quieren consultar en fuentes externas.

Comencemos entonces para que conozcan algunos de los Tags disponibles y lo sencillo que es usarlos.

TAG FONT

El Tag Font se usa de la siguiente manera

PHP:
[FONT="Nombre de la fuente"]contenido[/FONT]

Dentro de las fuentes que se pueden usar tenemos las siguientes

- Arial
- Arial Black
- Arial Narrow
- Book Antiqua
- Century Gothic
- Comic Sans MS
- Courier New
- Fixedsys
- Franklin Gothic Medium
- Garamond
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Microsoft Sans Serif
- Palatino Linotype
- System
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana

Si quisiera escribir en Palatino Linotype procedería de la siguiente manera

PHP:
[FONT="Palatino Linotype"]Este es mi texto con mi fuente[/FONT]

y aparecería así

Este es mi texto con mi fuente


TAG SIZE

Permite cambiar el tamaño de la letra

PHP:
[SIZE="Número de tamaño de letra"]Contenido[/SIZE]

El tamaño puede ir de 1 a 9

Si deseo usar el tamaño 4, por ejemplo, escribiría esto

PHP:
[SIZE="4"]Mi texto a tamaño 4[/SIZE]

y aparecería así Mi texto a tamaño 4


TAG COLOR

Permite cambiar el color de una porción de texto

PHP:
[COLOR="Nombre del color"]Contenido[/COLOR]

Hay 40 colores predeterminados que se pueden usar pero no son los unicos. Se puede usar también el valor de determinado color teniendo su equivalencia en Hexadecimal. El color está representado por 3 pares hexadecimales para representar el número RGB del color #RRGGBB

Por ejemplo

PHP:
[color=#32CD32]Contenido [/color]
me pondrá mi texto en un tono de verde pues 32CD32 es el número asignado a ese tono particular de verde. Siempre hay que usar el simbolo # antes de poner el número.

Contenido

o puedo probar con otro color
PHP:
[color=#FF8000]Otro color[/color]

Otro color


TAG B

Pone en negrita el texto

PHP:
[B] contenido [/B]

Al usar el Tag quedaría así

PHP:
[B]Mi texto en negrita[/B]

Mi texto en negrita


TAG I

Pone en itálica el texto

PHP:
[I] contenido [/I]

Al usar el Tag quedaría así

PHP:
[I]Mi texto en itálica[/I]

Mi texto en itálica


TAG U

Pone en subrayado el texto

PHP:
[U] contenido [/U]

Al usar el Tag quedaría así

PHP:
[U]Mi texto en subrayado[/U]

Mi texto en subrayado


TAGs LEFT, CENTER y RIGHT

Los 3 Tags permiten especificar en que posición estará el texto en el post. Izquierda, centro o derecha.

PHP:
[LEFT] contenido [/LEFT]
[CENTER] contenido [/CENTER]
[RIGHT] contenido [/RIGHT]

Así quedaría el texto usando los 3 tags respectivamente

PHP:
[LEFT] Mi texto a la izquierda [/LEFT]
[CENTER] Mi texto en el centro [/CENTER]
[RIGHT] Mi texto a la derecha [/RIGHT]

Mi texto a la izquierda​
Mi texto en el centro​
Mi texto a la derecha​

TAG LIST

Permite crear dos tipos de listas. Una numerada y una lista convencional con viñetas. Ambos tipos de lista usan el mismo Tag con una leve diferencia

PHP:
[LIST=1]
[*]Item 1
[*]Item 2
[*]Item 3
[*]Item 4
[/LIST]

En esta lista el LIST=1 está diciendo que la lista será númerada. Cada Item dentro de la lista tendrá un número y se pueden agregar tantos como se quieran poniendo [*] Nuevo Item

Una lista convencional va así

PHP:
[LIST]
[*]Item 1
[*]Item 2
[*]Item 3
[*]Item 4
[/LIST]

Como pueden ver el =1 ha sido retirado para indicar el modo de la lista

y así se ven respectivamente

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

  • Item 1
  • Item 2
  • Item 3
  • Item 4


TAG URL

El Tag URL permite agregar hipervinculos al texto. Se puede usar de dos maneras

PHP:
[URL] Link [/URL]

Con esto sale un enlace sencillo mostrando la dirección directamente. Por ejemplo

PHP:
[url]www.google.com[/url]

aparece así

www.google.com

El otro modo permite reemplazar la dirección por un texto cualquiera conservando por debajo el link original.

PHP:
[URL="link original"]Texto a mostrar en el link[/URL]

Por ejemplo

PHP:
[URL="www.google.com"]Si haces click aquí se abrirá Google[/URL]

Aparecerá así

Si haces click aquí se abrirá Google


TAG IMG

Con este Tag podremos poner imagenes en los posts

PHP:
[img]Link a la imagen[/img]

por ejemplo si escribo

PHP:
[img]http://img242.imageshack.us/img242/8967/demo4copyho9.jpg[/img]

aparecerá así

demo4copyho9.jpg



TAG QUOTE

Permite citar un texto escrito por otra persona. Es muy importante para conservar el contexto de las conversaciones en un tema. Hay dos formas de usarlo

PHP:
[QUOTE] Texto a citar [/QUOTE]

PHP:
[QUOTE=nombre de quien escribió] Texto a citar [/QUOTE]

Si escribo entonces

PHP:
[QUOTE]Estoy citando un texto[/QUOTE]

PHP:
[QUOTE=Mi patrón]Oe, estás despedido[/QUOTE]

obtengo respectivamente

Estoy citando un texto

Mi patrón dijo:
Oe, estás despedido

TAG CODE

Este tag sirve especialmente para agregar porciones de código para lenguajes de programación conservando su estructura, ya que ingresandolo directamente al post las tabulaciones y otras marcas similares se pueden perder.

PHP:
[CODE]Mi código[/code]

Por ejemplo si escribo

PHP:
[CODE]package MyFirstProject;

public class HelloWorld
{
       public static void main(String args[]) throws Exception
       {
              System.out.println ("Hello world!");
              System.in.read();
       }
}[/CODE]

Aparecerá así

Código:
package MyFirstProject;

public class HelloWorld
{
       public static void main(String args[]) throws Exception
       {
              System.out.println ("Hello world!");
              System.in.read();
       }
}

y si lo escribiera sin usar el Tag Code se dañaría la estructura del código dificultando su legibilidad.

package MyFirstProject;

public class HelloWorld
{
public static void main(String args[]) throws Exception
{
System.out.println ("Hello world!");
System.in.read();
}
}

- Los Tags también se puede combinar entre sí para lograr varios efectos sobre un mismo objeto. Los cambios deben ser de adentro hacia afuera, con esto me refiero a lo siguiente.

Supongamos que tengo una imagen cuyo código es

PHP:
[img]http://img242.imageshack.us/img242/7126/demo2copyug6.jpg[/img]

Si yo quiero que me salga esta imagen y que a la vez sea un link entonces encierro todo el código entre un Tag URL para que toda la foto quede bajo el efecto de ese tag así
PHP:
[url="www.google.com"][img]http://img242.imageshack.us/img242/7126/demo2copyug6.jpg[/img][/url]

y quedará así

y si además quiero todo esto centrado entonces encierro todo ese código entre Tag CENTER así

PHP:
[center][url="www.google.com"][img]http://img242.imageshack.us/img242/7126/demo2copyug6.jpg[/img][/url][/center]

Lo que finalmente me mostrará esto


Una imagen centrada donde, si doy click sobre ella, me lleva a Google.

Como ven, el manejo de los tags para los posts no es un asunto complicado, con la práctica se irá memorizando y luego resultará ser una tarea trivial =)
 
  • Me gusta
Reacciones: 2 personas
Amigo quisiera saber atajos de teclado para los tags... imitando lo del html.
Ejemplo: ctrl+b = [ B ][ /B ]
 
Solo conozco 3, el de Negrilla CTRL + B, el de Itálica CTRL + I y subrayado CTRL + U

Si tiene alguno mas le agradecería compartirlo con nosotros ;)
 
Pregunta

Bueno antes había preguntado por unos códigos: Quote y PHP y como se hacia sangría al texto y como se adjuntaba archivos, pero luego encontré respuesta aqui!! y pensé que esta pagina también puede ayudar mucho más a otros si alguien puede traducirla.
ya saben si quieren profundizar sobre este tema existe esta url http://www.laneros.com/misc.php?do=bbcode#align
 
No conocía esa página. Vea pues, repetí el trabajo ya hecho y sin saberlo. Uno nunca termina de conocer LANeros :D

togaca, ambos tags están explicados en esta guía, que parte no entendiste?
 
Gracias man!

Oe este si es tutorial para el manejo de los codigos, esta muy bueno, gracias por dedicarle tiempo a esto y hacer que los laneros novatos aprendamos a usar la pagina de la mejor manera posible :)

Gracias
 
Oesoto para poder disminuir el Tamaño de Una Imagen, se puede por medio de codigos? o es necesario subir la Imagen a una pagina con el tamaño que se quiere.
 
No se puede por códigos.

Cuando se hace un resize de una imagen se necesitan guardar los cambios, donde se guardarían esos cambios?? .... toca subir nuevamente el archivo al servicio de hosting de imagenes para que la nueva imagen quede disponible a menos de que el código baje la imagen, le haga resize localmente y muestre la imagen pero ningún Tag se encarga de hacer esa tarea especializada que mencionas aunque suena interesante ;)
 
Oesoto dijo:
No se puede por códigos.

Cuando se hace un resize de una imagen se necesitan guardar los cambios, donde se guardarían esos cambios?? .... toca subir nuevamente el archivo al servicio de hosting de imagenes para que la nueva imagen quede disponible a menos de que el código baje la imagen, le haga resize localmente y muestre la imagen pero ningún Tag se encarga de hacer esa tarea especializada que mencionas aunque suena interesante ;)

Gracias Viejo::pirata:: ;) :gasmask:

Otra cosa, es posible crear nuevos codigos para poder editar tamaño, o desde el mismo servidor sin ncesidad de ultilizar el editor dañado, quien haria eso julianD'?.
 
BBCode es soportado por phpBB por lo que tocaría esperar que ellos implementaran algun día eso y lo veo bastante improbable. En caso de que si se pudiera JulianD se encargaría de ese trabajo de integración.
 
una pregunta, se pueden insertar videos directamente ? algunos foros lo admiten poniendo por ejemplo [youtube] codigo [youtube] ???

gracias
 
No se puede porque ese código incluye HTML y la configuración de los foros no permite inserción de código HTML
 

Los últimos temas