Identificarte

Versión Completa : Guía de BBCode


.



Oesoto
mayo 19, 2007, 09:25 AM
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 PM
oe...gracias por tu informacion...super interesante y aprendi algunas cositas:) este foro me servira demasiado:P:P

Jh®
julio 8, 2007, 10:49 PM
Amigo quisiera saber atajos de teclado para los tags... imitando lo del html.
Ejemplo: ctrl+b = [ B ][ /B ]

Oesoto
julio 8, 2007, 10:51 PM
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 ;)

Jh®
julio 8, 2007, 11:06 PM
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 PM
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 AM
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 AM
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 AM
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

Juan_©
agosto 2, 2007, 05:58 PM
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 PM
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 ;)

Juan_©
agosto 2, 2007, 08:27 PM
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 PM
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 PM
esta super...yo keria hacr esto desde hac tiempo...grax

leonardom
noviembre 8, 2007, 11:47 AM
una pregunta, se pueden insertar videos directamente ? algunos foros lo admiten poniendo por ejemplo [youtube] codigo [youtube] ???

gracias

Oesoto
noviembre 8, 2007, 11:54 AM
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 PM
Gracias por el dato :), me sirvio de mucha ayuda

=ALEX=
junio 24, 2008, 12:33 PM
Qué bien me gusto este tutorial voy a estarlo intentado a ver qué tal!!!

lordhellriser
septiembre 10, 2008, 10:55 AM
seria bueno que se activaran las etiquetas spoiler en el foro.

joey666me
septiembre 17, 2008, 10:14 PM
Arigato!!! qu ebuen tuto, como muy pocos en realidad te luciste!

MadClown
noviembre 1, 2008, 07:43 PM
Que buen tuto :P:P, que util que pongan estas cosas en las firmas de algunos LANeros y de paso ver que tambien estos espacios sirven para informar.

Empezaré a probar algunas cosas que me parecieron interesantes.

Deejay Z.
noviembre 1, 2008, 08:57 PM
Esta Bueno esto deberias incluir el de Floatright

danreyder
diciembre 6, 2008, 12:22 AM
muy buenos dias muchas gracias por esta informaciòn la estaba buscando desde hace tiempo, sabe necesito ayuda por que quiero remplazar un link por un texto pero lo intento y lo intento y siempre me sale el link no se si lo que hago esta mal por favor necesito ayuda. es un link de un juego es este
http://s13.bitefight.es/c.php?uid=137663 (http://s13.bitefight.es/c.php?uid=137663)
si pueden ayudarme se los agradeceria mucho, soy novato en esto de la pc

Oesoto
diciembre 6, 2008, 01:03 AM
Qué codigo está intentando usar?

danreyder
diciembre 6, 2008, 08:17 PM
buenas intento hacer es esto

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


Código PHP:
Texto a mostrar en el link


Por ejemplo


Código PHP:
Si haces click aquí se abrirá Google


Aparecerá así

Si haces click aquí se abrirá Google (http://www.google.com/)

pero nada, no se si es que lo hago mal y no me sale el texto sino que sigue saliendo el link, muchas gracias por tu pronta respuesta

@ndres
enero 7, 2009, 11:54 AM
No se puede porque ese código incluye HTML y la configuración de los foros no permite inserción de código HTML

Pero como que ciertos usuarios si pueden publicar Videos de YouTube... :rolleyes:



@ndres :cool:

Oesoto
enero 9, 2009, 08:22 PM
Pero como que ciertos usuarios si pueden publicar Videos de YouTube... :rolleyes:



@ndres :cool:

Es un caso especial donde una URL de YouTube se convierte automáticamente al código que permite visualizar el video dentro del post. No es que los usuarios peguen directamente el código HTML para que el video aparezca.

John Doe
agosto 11, 2009, 08:01 PM
Es un caso especial donde una URL de YouTube se convierte automáticamente al código que permite visualizar el video dentro del post. No es que los usuarios peguen directamente el código HTML para que el video aparezca.


Pero cual seria esos caso "especiales" o no esta permitido, por que he visto vídeos en varias secciones, donde es muy común encontrarlos en noticias...

Oesoto
agosto 11, 2009, 10:14 PM
Claro que está permitido. De hecho usted pone un link de YouTube y no aparece el link como tal si no el cuadro con el video. Por eso lo llamo un caso especial, el link no queda ahí como tal si no que se convierte.

John Doe
agosto 11, 2009, 10:20 PM
Si, eso acabo de ver el foro que publique en la sección de "computadores portátiles", de todas formas, muxas gracias por el dato...

offtopic como quedo el asunto con Lizza jejejeje!!!

kaymex
abril 17, 2010, 06:03 PM
por alguna extraña razon no funka en mi firma!!!! :=(

Mxuricio
julio 27, 2011, 10:09 PM
Que bien que encontré este foro seguro me va a servir, gracias.

turson
mayo 26, 2012, 12:45 AM
Foreros, para este foro ¿habrá BBCODE para alinear (poner) imágenes con texto alrededor?, es decir, el texto que escribiremos para acompañar la imagen, tal como los libros ilustrados. Útil en imágenes no muy grandes.
Sé que en algunos otros foros han aplicado de esos BBCode. Pero, no estoy seguro si deban ser personalizados para cada tipo de foro.

Ejemplo:

http://www.jps.com.ve/wp-content/uploads/2011/10/web.jpg