Versión Completa : Guía de BBCode
Oesoto
mayo 19, 2007, 09:25
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 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
contenido
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
Este es mi texto con mi fuente
y aparecería así
Este es mi texto con mi fuente
TAG SIZE
Permite cambiar el tamaño de la letra
Contenido
El tamaño puede ir de 1 a 9
Si deseo usar el tamaño 4, por ejemplo, escribiría esto
Mi texto a tamaño 4
y aparecería así Mi texto a tamaño 4
TAG COLOR
Permite cambiar el color de una porción de texto
Contenido
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
Contenido 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 Otro color
Otro color
TAG B
Pone en negrita el texto
contenido
Al usar el Tag quedaría así
Mi texto en negrita
Mi texto en negrita
TAG I
Pone en itálica el texto
[I] contenido
Al usar el Tag quedaría así
Mi texto en itálica
Mi texto en itálica
TAG U
Pone en subrayado el texto
contenido
Al usar el Tag quedaría así
Mi texto en subrayado
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.
contenido
contenido
contenido
Así quedaría el texto usando los 3 tags respectivamente
Mi texto a la izquierda
Mi texto en el centro
Mi texto a la derecha
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
Item 1
Item 2
Item 3
Item 4
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í
Item 1
Item 2
Item 3
Item 4
Como pueden ver el =1 ha sido retirado para indicar el modo de la lista
y así se ven respectivamente
Item 1
Item 2
Item 3
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
Link
Con esto sale un enlace sencillo mostrando la dirección directamente. Por ejemplo
www.google.com
aparece así
www.google.com
El otro modo permite reemplazar la dirección por un texto cualquiera conservando por debajo el link original.
Texto a mostrar en el link (link original)
Por ejemplo
Si haces click aquí se abrirá Google (www.google.com)
Aparecerá así
Si haces click aquí se abrirá Google (www.google.com)
TAG IMG
Con este Tag podremos poner imagenes en los posts
Link a la imagen
por ejemplo si escribo
http://img242.imageshack.us/img242/8967/demo4copyho9.jpg
aparecerá así
http://img242.imageshack.us/img242/8967/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
Texto a citar
Texto a citar
Si escribo entonces
Estoy citando un texto
Oe, estás despedido
obtengo respectivamente
Estoy citando un texto
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.
Mi código
Por ejemplo si escribo
package MyFirstProject;
public class HelloWorld
{
public static void main(String args[]) throws Exception
{
System.out.println ("Hello world!");
System.in.read();
}
}
Aparecerá así
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
http://img242.imageshack.us/img242/7126/demo2copyug6.jpg
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í http://img242.imageshack.us/img242/7126/demo2copyug6.jpg (www.google.com)
y quedará así http://img242.imageshack.us/img242/7126/demo2copyug6.jpg (www.google.com)
y si además quiero todo esto centrado entonces encierro todo ese código entre Tag CENTER así
http://img242.imageshack.us/img242/7126/demo2copyug6.jpg (www.google.com)
Lo que finalmente me mostrará esto
http://img242.imageshack.us/img242/7126/demo2copyug6.jpg (www.google.com)
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 =)
Mely Upegui
mayo 24, 2007, 04:19
oe...gracias por tu informacion...super interesante y aprendi algunas cositas:) este foro me servira demasiado:P:P
Amigo quisiera saber atajos de teclado para los tags... imitando lo del html.
Ejemplo: ctrl+b = [ B ][ /B ]
Oesoto
julio 8, 2007, 10:51
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 ;)
Oesoto hasta ahora cuento con la extensión de Firefox: BBCodeXtra. Es compatible con este sistema de manejo de contenido que usan en LANeros: el vBulletin. Es una herramienta muy útil pero solo para usuarios de Firefox:
https://addons.mozilla.org/es-ES/firefox/addon/491
togaca
julio 10, 2007, 05:42
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!! (http://www.laneros.com/misc.php?do=bbcode#align) 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
Oesoto
julio 11, 2007, 06:48
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?
©arlosponce2k8
julio 26, 2007, 02:09
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
Raséc
julio 26, 2007, 02:26
Oesoto hasta ahora cuento con la extensión de Firefox: BBCodeXtra. Es compatible con este sistema de manejo de contenido que usan en LANeros: el vBulletin. Es una herramienta muy útil pero solo para usuarios de Firefox:
https://addons.mozilla.org/es-ES/firefox/addon/491
Esa extensión está muy buena, gracias por el dato
[RED]
agosto 2, 2007, 05:58
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.
Oesoto
agosto 2, 2007, 08:07
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 ;)
[RED]
agosto 2, 2007, 08:27
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'?.
Oesoto
agosto 2, 2007, 08:36
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.
night_hacker
octubre 25, 2007, 02:55
esta super...yo keria hacr esto desde hac tiempo...grax
leonardom
noviembre 8, 2007, 11:47
una pregunta, se pueden insertar videos directamente ? algunos foros lo admiten poniendo por ejemplo [youtube] codigo [youtube] ???
gracias
Oesoto
noviembre 8, 2007, 11:54
No se puede porque ese código incluye HTML y la configuración de los foros no permite inserción de código HTML
QuelloScelto
noviembre 28, 2007, 07:21
Gracias por el dato :), me sirvio de mucha ayuda
ALXXLA
junio 24, 2008, 12:33
Qué bien me gusto este tutorial voy a estarlo intentado a ver qué tal!!!
lordhellriser
septiembre 10, 2008, 10:55
seria bueno que se activaran las etiquetas spoiler en el foro.
joey666me
septiembre 17, 2008, 10:14
Arigato!!! qu ebuen tuto, como muy pocos en realidad te luciste!
vBulletin®, Copyright ©2000-2008, Jelsoft Enterprises Ltd.