Esta partida está en revisión. Si el director no da señales de vida o es aprobada por un cuervo será borrada en 15 días
Seguro que alguno utiliza aun el BB code y sino muchos de los comandos creo que son aplicables al ck, pero lo investigare
El lenguaje BBCode presenta elementos que pueden ser agrupados en cinco grandes categorías:
Los siguientes marcadores sencillos pueden ser utilizados para modificar la apariencia del texto, la mayoría de estos marcadores proviene del HTML y su uso está ampliamente distribuido en diferentes versiones de BBCode:
Formato | Significado |
[*b]Negrita[/*b] |
Texto en negrita |
[*u]Subrayado[/*u] |
Texto subrayado |
[*i]Cursiva[/*i] |
Texto en itálica o cursiva |
[*s]Tachado[/*s] |
Texto tachado |
[size=18*]Tamaño 18[/*size] |
Amplía el tamaño del texto hasta 18 puntos |
El uso de marcadores de alineación en BBCode puede ser más o menos similar al del HTML dependiendo del sistema de foros utilizado, existen dos mecanismos principales para alinear ya sea texto, tablas o imágenes.
Formato | Significado |
[align="left"]Contenido a alinear[/align] |
Alinea a la izquierda |
[align="right"]Contenido a alinear[/align] |
Alinea a la derecha |
[align="center"]Contenido a alinear[/align] |
Alinea al centro |
[align="justify"]Pequeño párrafo que demuestra el texto contenido justificado[/align] |
Justifica el texto contenido |
[+left]Contenido a alinear[/left] |
Alinea a la izquierda |
[+right]Contenido a alinear[/right] |
Alinea a la derecha |
[+center]Contenido a alinear[/center] |
Alinea al centro |
[+justify]Pequeño párrafo que demuestra el texto contenido justificado[/justify] |
Justifica el texto contenido |
BBCode permite modificar el color del texto mostrado, ya sea utilizando el nombre de alguno de los colores predefinidos en el estándar HTML, o introduciendo directamente el color deseado en código RGB hexadecimal. Este último método aunque un poco más complicado, permite trabajar con una mayor variedad de colores, el único requisito es saber cómo generarlos. Existen utilidades que se encargan de esto, por ejemplo, la extensión ColorZilla para el navegador Mozilla Firefox.
Ciertos programas de foros admiten el uso de una variante acotada de 3 dígitos del Sistema hexadecimal RGB (siendo R el valor del color rojo, G el del color verde y B el del color azul) este sistema resulta más simple de utilizar a costa de poseer menos matices de colores. Sin embargo, generalmente se utiliza el sistema de 6 dígitos hexadecimales (RRGGBB, donde RR representa el valor perteneciente al color rojo, GG al color verde y BB al color azul) este sistema permite en teoría representar 16.777.216 colores.
Una pequeña lista de algunos ejemplos de colores disponibles en BBCode provenientes del estándar HTML.
Formato | Significado | Aspecto |
[color="black"]Negro[/color] |
Texto en color Negro | Negro |
[color="brown"]Marrón[/color] |
Texto en color Marrón | Marrón |
[color="maroon"]Granate[/color] |
Texto en color Granate | Granate |
[color="red"]Rojo[/color] |
Texto en color Rojo | Rojo |
[color="coral"]Coral[/color] |
Texto en color Coral | Coral |
[color="orange"]Naranja[/color] |
Texto en color Naranja | Naranja |
[color="yellow"]Amarillo[/color] |
Texto en color Amarillo | Amarillo |
[color="olive"]Oliva[/color] |
Texto en color Oliva | Oliva |
[color="lime"]Verde lima[/color] |
Texto en color Verde lima | Verde lima |
[color="limegreen"]Verde claro[/color] |
Texto en color Verde claro | Verde claro |
[color="green"]Verde[/color] |
Texto en color Verde | Verde |
[color="darkgreen"]Verde oscuro[/color] |
Texto en color Verde oscuro | Verde oscuro |
[color="teal"]Cerceta[/color] |
Texto en color Cerceta | Cerceta |
[color="cyan"]Cian[/color] |
Texto en color Cian | Cian |
[color="lightskyblue"]Azul cielo claro[/color] |
Texto en color Azul cielo claro | Azul cielo claro |
[color="blue"]Azul marino[/color] |
Texto en color Azul marino | Azul marino |
[color="navy"]Azul naval[/color] |
Texto en color Azul naval | Azul naval |
[color="pink"]Rosa[/color] |
Texto en color Rosa | Rosa |
[color="magenta"]Magenta[/color] |
Texto en color Magenta | Magenta |
[color="purple"]Púrpura[/color] |
Texto en color Púrpura | Púrpura |
[color="gray"]Gris[/color] |
Texto en color Gris | Gris |
[color="silver"]Plata[/color] |
Texto en color Plata | Plata |
[color="white"]Blanco[/color] |
Texto en color Blanco |
Blanco
|
[color=#B0C4DE]#B0C4DE[/color] |
Texto en color RGB #B0C4DE |
#B0C4DE
|
BBCode también permite la opción de cambiar la fuente del texto, sin embargo es conveniente tener en cuenta que no todas las fuentes serán visibles para todo el mundo, ya que para que una fuente pueda ser presentada en un navegador, debe estar instalada en el sistema operativo sobre el que el navegador está funcionando. Aquí algunos ejemplos de las más comunes:
Formato | Significado |
[font="Arial"]Arial[/font] |
Texto con fuente Arial |
[font="Wingdings"]Wingdings[/font] |
Texto con fuente Wingdings |
[font="Comic Sans MS"]Comic Sans MS[/font] |
Texto con fuente Comic Sans MS |
[font="Century Gothic"]Century Gothic[/font] |
Texto con fuente Century Gothic |
[font="Courier"]Courier[/font] |
Texto con fuente Courier |
[font="Fixedsys"]Fixedsys[/font] |
Texto con fuente Fixedsys |
[font="Georgia"]Georgia[/font] |
Texto con fuente Georgia |
[font="Lucida Sans"]Lucida Sans[/font] |
Texto con fuente Lucida Sans |
[font="Monotype Corsiva"]Monotype Corsiva[/font] |
Texto con fuente Monotype Corsiva |
[font="Times New Roman"]Times New Roman[/font] |
Texto con fuente Times New Roman |
[font="Trebuchet MS"]Trebuchet MS[/font] |
Texto con fuente Trebuchet MS |
[font="Verdana"]Verdana[/font] |
Texto con fuente Verdana |
En umbria no se puede usar
Para mostrar una imagen BBCode dispone del marcador img. El formato general de este elemento es:
[*img]Ruta de la imagen[/img]
En muchos foros es posible modificar el tamaño de la imagen, utilizando los atributos width (ancho) y height (alto). Por defecto ambos atributos indican el tamaño en píxeles con que será mostrada la imagen, aunque puede ser adaptado utilizando el modificador "%" (porcentaje) para indicar que porcentaje del área visible será ocupada.
Por ejemplo el código:
[*img width=264 height=240]http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg[/img]
[img width=264 height=240]http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg[/img]
Problema del tamaño solventado aunque en ck no funciona
Como lenguaje derivado del HTML, uno de los elementos más poderosos con los que cuenta BBCode es el hipervínculo, en general representado por la etiqueta URL. Existen dos maneras directas de crear hipervínculos de texto en BBCode utilizando la etiqueta URL:
Formato | Significado |
[+url]http://www.google.com[/url] |
Muestra el hipervínculo sobre la dirección de destino |
[url="http://www.google.com"]Google[/+url] |
Muestra el hipervínculo sobre una palabra a elección |
BBCode cuenta con dos tipos principales de estructuras ordenadas, las listas y las tablas. Estas últimas no son universalmente aceptadas y sólo algunos sistemas de foros permiten trabajar con ellas. A su vez existen dos tipos de listas, las listas simples y las listas ordenadas. Todas las estructuras ordenadas en BBCode son esencialmente similares a sus pares de HTML.
Una lista desordenada muestra a cada ítem en forma secuencial, uno detrás de otro indentando cada comienzo de ítem con un carácter bala. Para crear una lista desordenada se utilizan las etiquetas
y se define cada ítem de la lista con la etiqueta especial
.
Por ejemplo el siguiente código
[+list]
Primer ítem
Segundo ítem
Tercer ítem
[/*list]
Generaría el siguiente resultado:
El segundo tipo de lista, la lista ordenada, brinda la posibilidad de decidir que se va a mostrar como indicador de orden antes de cada ítem.
Para crear una lista ordenada se puede utilizar por ejemplo
para crear una lista numerada, o alternativamente se puede utilizar por ejemplo
para crear una lista alfabética. Adicionalmente se puede comenzar la lista ordenada por cualquier otro número o letra. Como con las listas desordenadas, los ítems se especifican utilizando
Por ejemplo el código
[*list=1]
Ir a la tienda
Comprar una nueva PC
[/*list]
Generaría el siguiente resultado:
O si se utilizara una lista alfabética:
[*list=a]
Ir a la tienda
Insultar a la PC cuando se cuelgue
[/*list]
Generaría el siguiente resultado:
La gestión de tablas en BBCode es muy similar a aquellas de HTML, y se hace por medio del elemento [*table] [/table] el cual cuenta además con las etiquetas [*tr] [/tr] que sirven para delimitar cada línea, y las etiquetas [*td][/td] con las que se delimita cada celda. Un ejemplo de código de una tabla de tres líneas y cuatro columnas sería:
[*table border="1"]
[tr] [td]Celda 1.1[/td] [td]Celda 1.2[/td] [td]Celda 1.3[/td] [td]Celda 1.4[/td] [/tr]
[tr] [td]Celda 2.1[/td] [td]Celda 2.2[/td] [td]Celda 2.3[/td] [td]Celda 2.4[/td] [/tr]
[tr] [td]Celda 3.1[/td] [td]Celda 3.2[/td] [td]Celda 3.3[/td] [td]Celda 3.4[/td] [/tr]
[/table]
El atributo border=" " sirve para indicar el ancho en píxeles de los bordes de la tabla; si se iguala a 0 los bordes no se muestran. Por lo general la etiqueta también admite los atributos width=" %" para indicar el ancho en porcentaje que debe ocupar la tabla, y align=" " donde se indica la alineación de la tabla como bloque, no del contenido de las celdas, eso debe hacerse dentro de cada etiqueta [tr], si se desea alinear el contenido de una línea, o dentro de cada etiqueta [td] si se desea alinear cada celda en particular.
El anterior código entregaría un resultado como el que sigue:
Celda 1.1 | Celda 1.2 | Celda 1.3 | Celda 1.4 |
Celda 2.1 | Celda 2.2 | Celda 2.3 | Celda 2.4 |
Celda 3.1 | Celda 3.2 | Celda 3.3 | Celda 3.4 |
Y al modificar la primera línea por:
[*table border="1" align="center" width="90%"]
Se obtiene:
Celda 1.1 | Celda 1.2 | Celda 1.3 | Celda 1.4 |
Celda 2.1 | Celda 2.2 | Celda 2.3 | Celda 2.4 |
Celda 3.1 | Celda 3.2 | Celda 3.3 | Celda 3.4 |
BBCodes permite el manejo de bloques de texto con características especiales utilizados en general para diferentes tipos de citas o referencias. En concreto la mayoría de los foros permite el uso de tres bloques de texto de utilidad especial. Las citas, las referencias a código fuente, y los spoilers.
Los bloques de citas se utilizan para transcribir los dichos de otras personas, referenciando de manera adecuada quién fue el autor de tales dichos. El marcador utilizado es
Cita:
.
Ejemplo de código:
[*quote="James"]Éste es el texto que quiero citar.[/*quote]
Mostraría algo similar a esto:
James dijo: |
Éste es el texto que quiero citar. |
Por otra parte si no se quiere citar a nadie en particular, se puede utilizar el marcador quote sin especificar ningún nombre:
[*quote]Éste es el texto que quiero citar.[/*quote]
Cuando es necesario citar código fuente de algún lenguaje de programación o de marcado, es una buena costumbre el utilizar el marcador code. El marcador code cumple una doble función, por una parte lo que queda contenido dentro de las etiquetas [*code] [/*code] no es interpretado por el programa del foro, lo que evita que se puedan producir accidentes en la presentación de formato al hacer uso de expresiones o palabras reservadas, y por otro lado hace mas legible el código fuente en si, ya que se utiliza un tipo especial de letra monospace en la que todos los caracteres, incluyendo el espacio, tienen el mismo ancho y en la que existe la misma separación entre todos los caracteres. Como consecuencia el código fuente permanece horizontal y verticalmente ordenado en diferentes líneas.
Ejemplo de código:
[*code]
int main()
{
printf("hola");
}
[/*code]
Se vería así
Código: |
int main() { printf("hola"); } |
El elemento
Spoiler (marca el texto para leerlo):
se utiliza para ocultar contenido sensible que puede molestar a otros usuarios, dejando a cada quién la opción de revisar este contenido o no. Otro uso frecuente es para reducir el tamaño vertical de un post, para que no resulte demasiado cansado recorrer todo el tablero.
El contenido de un spoiler puede mostrarse pinchando sobre un botón usualmente titulado "spoiler", "mostrar" o "desplegar".
Por ejemplo el siguiente código:
[*spoiler]Este es el contenido que debe permanecer oculto[/*spoiler]
Mostraría un resultado similar a este:
SPOILER
[mostrar]
Mientras que el siguiente código:
[*spoiler="Título del Spoiler"]Este es el contenido que debe permanecer oculto[/*spoiler]
Mostraría un resultado similar a este:
Título del Spoiler
[mostrar]