 |
DiosNosLibre.com
Foro para forros
|
| Ver tema anterior :: Ver siguiente tema |
| Autor |
Mensaje |
Samus_
Zángano común
Registrado: 27 Oct 2006
Mensajes: 3
|
 Publicado: Jue Nov 02, 2006 10:32 am Título del mensaje: Tutorial de BBCode (chirimbolos para los post :P) |
 |
|
buenas buenas! hice esto pal foro donde moro habitualmente y ando paseandolo por todos lados  espero les sirva!
bye_
------------ . ------------
hola mis pequeños pokutes! aqui estamos nuevamente con otro tutorial del tÃo Samoh_ en este vamos a hablar del BBCode, ¿que es el BBCode? ahhh es un lenguaje de markup utilizado por el software phpBB (entre otros) para definir los estilos gráficos de los posts :locureh: FIN!
xDD nah vamos por partes, primero algunas definiciones importantes:
Lenguaje: un lenguaje es un medio por el cual dos o más partes se comunican. En el caso de los seres humanos utilizamos el español, como el que estas leyendo en este momento a traves del cual yo te comunico a tà este tutorial; pero tmb utilizamos un lenguaje al momento de comunicarnos con la computadora (o con alguna parte de ella) y es a traves de ese lenguaje que le decimos a la PC lo que queremos que haga.
Existen dos clases principales de lenguajes para interactuar con la PC, el más utilizado es el gráfico, esto es, cualquier cosa que "toquemos" ya sea con el mouse o con el enter del teclado, donde le señalamos a la máquina determinada opción que nos muestra o le marcamos determinado camino a seguir o acción a tomar, esto es análogo a hacer señas para indicarle a alguien por donde ir o que hacer.
La otra clase de lenguaje es el lenguaje escrito, lo usamos principalmente los programadores, es un lenguaje como el español escrito donde literalmente le "decimos" que tiene que hacer a la PC.
Lengiaje de markup: El BBCode es un lengaje de markup, en español "lenguaje de marcas", es una clase de lenguaje escrito que se coloca encima del mensaje que se transmite para definir detalles del mismo. Notese que el mensaje inicial es en español (en nuestro caso) y porta la idea que tratamos de comunicar, a su ves sobre este se aplica el BBCode que transmite información sobre la presentación del mensaje que vamos a transmitir, no asà de su contenido.
El termino "markup" (marcas) viene del hecho que para comunicar en BBCode que queremos alterar la presentación de una determinada parte de nuestro mensaje "marcamos" o "delimitamos" esa parte con señaladores que indican el comienzo y el final de la seccion asi como la alteración que solicitamos para esa parte (es probable que no se hagan mucha idea de lo que digo acá, paciencia más adelante hay ejemplos asi como una explicación más a fondo de este tema).
Software phpBB: esto es el software del foro, es decir el programa que archiva los posts, los muestra al entrar a los topics y a su ves es quien interpreta el BBCode para mostrar los post de la forma como queremos que se vean.
Bien, dicho esto comencemos; lo primero es detallar el tema de las marcas; todas las marcas siguen un mismo patrón que es:
| Código: | | [marca]texto-marcado[/marca] |
esto es, se encierra el texto a modificar entre los marcadores, de inicio y fin que a su ves tmb tienen un formato determinado.
Las marcas se encierran entre paréntesis cuadrados "[" y "]" y dentro se coloca el identificador que especifica el tipo de modificación a realizar, a su ves en la marca que cierra se precede al identificador con una barra "/".
Un ejemplo, si el mensaje original fuese:
| Código: | | a su ves sobre este se aplica el BBCode que transmite información sobre la presentación del mensaje que vamos a transmitir |
y quisieramos hacer que el texto "sobre la presentación" este en negrita, debemos delimitarlo con los marcadores que señalan esa sección como negrita, este es una "b" por lo que nos queda:
| Código: | | a su ves sobre este se aplica el BBCode que transmite información [b]sobre la presentación[/b] del mensaje que vamos a transmitir |
ahi ven, el marcador que abre, es una "b" entre paréntesis cuadrados y el que cierra es igual solo que con un "/" antes del identificador.
Todos los identificadores utilizan este formato, tanto al momento de colocarlos como para escribirlos en sÃ, sin embargo algunos aceptan parametros y otros son compuestos (usan más marcadores). Más abajo explico.
Los identificadores disponibles en BBCode son: b, i, u, code, quote, size, color, img, url y list.
------------
b, i y u
Producen cambios en el tipo de letra usado, b la hace aparecer en negrita, i crea texto tipo manuscrito (inclinado) y u produce un efecto de subrayado.
Se utilizan de la siguiente manera:
| Código: | | [b]negrita[/b] - [i]manuscrito[/i] - [u]subrayado[/u] |
negrita - manuscrito - subrayado
Una particularidad de los tags BBCode (casi todos ellos) es que son combinables, esto significa que p.ej. se puede aplicar negrita y subrayado a un mismo bloque de texto.
Algo importante en estos casos es el orden en el que colocamos los tags: en la mayorÃa de los casos no importa el orden en que se coloquen los tags de inicio, pero los de fin de bloque se colocan siempre en el orden inverso a los iniciales.
Asi que, para poner negrita y subrayado harÃamos algo asÃ:
| Código: | | [b][u]Ejemplo[/u][/b] |
Observen que si abrimos con "b u" cerramos con "/u /b", también se podrÃa haber hecho de la siguiente manera:
| Código: | | [u][b]Ejemplo[/b][/u] |
Ambos ejemplos nos dan como resultado: Ejemplo
------------
code
Este tag se utiliza para hacer citas de código, se muestra tÃpicamente dentro de un recuadro (la representación depende del skin).
code tiene varias caraterÃsticas interesantes, para empezar el texto marcado con este tag no procesa el BBCode ni los smilies (emoticons) que contenga; esto porque cuando posteamos código lo que queremos es mostrar los simbolos y demas combinaciones de caracteres en ves de su representación habitual, por eso lo utilizo aquà para mostrar el uso de los ejemplos ya que me permite escribÃr los mismos códigos que uso y que se vea como se escriben.
Otra caracterÃstica es que normalmente utiliza una fuente monoespaciada, esto es un tipo de letra donde todos los caracteres tienen el mismo ancho, útil para alinear columnas y ese tipo de cosas.
Por último, también es tÃpico que el texto dentro de este tag no comprima los espacios en blanco, sucede que por lo general, si escribimos varios espacios en blanco seguidos, el software del foro los comprime automaticmaente a uno solo, en el caso del code esto no es asÃ, los espacios en blanco allà dentro se muestran tal cual se escribieron ya que de lo contrario no podrÃamos alinear las columnas como se dijo anteriormente.
| Código: | Ejemplo, los smilies :) :P :o no son interpertados, aparecen como texto asi como los tags [b] a [/b] [code] a [/code] etc.
con respecto a los espacios se trata de lo siguiente:
a aaa aaaaaa |
------------
quote
Este se utiliza para citar texto, se muestra de forma similar al code, sin embargo el texto se representa de la misma forma que en el resto del post y SÃ se interpreta el BBCode y los smilies, esto implica que el quote es combinable con el resto de los tags.
| Cita: | Ejemplo, en este caso al contrario que con el code los smilies   si son interpertados al igual que los tags a etc.
con respecto a los espacios aqui son comprimidos de la misma forma que fuera del quote:
a aaa aaaaaa |
El quote a su ves acepta un parámetro opcional, los parametros son información extra que le damos al tag para que la agregue a la representación habitual de alguna forma.
El parametro es un texto que aparece en lo que serÃa el tÃtulo de la representación, es usual que se utilice para nombrar al interlocutor en caso de citas textuales.
El formato es el siguiente: se coloca el texto a mostrar entrecomillado, precedido de un signo de igual en seguida del identificador que abre la marca.
| Código: | | [quote="texto-del-tÃtulo"]texto-de-la-cita[/quote] |
Y se muestra asÃ:
| texto-del-tÃtulo escribió: | | texto-de-la-cita |
Algunos motores de foro (phpbb entre ellos) además permiten el uso de BBCode en el tÃtulo de la cita, lo cual nos permite hacer cosas interesantes como esta:
| TÃtulo inclinado escribió: | aquà vemos un tÃtulo modificado con BBCode y un emoticon.
Todas las reglas de BBCode se aplican allà también. |
Eso se harÃa de la siguiente manera:
| Código: | [quote="[i]TÃtulo inclinado[/i] :P"]aquà vemos un tÃtulo modificado con BBCode y un emoticon.
Todas las reglas de BBCode se aplican allà también.[/quote] |
------------
size y color
Estos dos sirven para modificar el tamaño y el color del texto respectivamente, ambos llevan un parámetro obligatorio que es el tamaño de la letra o el color deseado. Estos parametros no llevan comillas.
Los valores válidos para el parametro del size son números enteros del 1 al 29. Según la ayuda de phpbb también se puede usar un nombre para el tamaño sin embargo en la práctica esto no funciona ¬¬.
Aquà vemos los diferentes tamaños ordenados de menor a mayor:
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
Como ven no todos los valores equivalen a un tamaño de letra determinado, esto es porque las fuentes (fuentes son el nombre técnico de los tipos de letra) no son por lo general 100% escalables, asi que tienen determinados tamaños prefijados y se mueven dentro de ese rango.
La fuente concreta y por consecuencia sus tamaños dependen del skin que usemos.
Si elijiesemos el tamaño 17 se utilizarÃa asÃ:
| Código: | | [size=17]Texto de tamaño 17[/size] |
Texto de tamaño 17
Con respecto de color existen dos formas de utilizarlo; la más simple es poner como parametro el nombre del color deseado dentro de la siguiente lista: darkred, red, orange, brown, yellow, green, olive, cyan, blue, darkblue, indigo, violet, white y black.
Supongamos que elegimos el verde se aplicarÃa de esta forma:
| Código: | | [color=green]Texto de color "green"[/color] |
Texto de color "green"
La otra forma de utilizarlo es pasando el valor hexadecimal del color deseado con prefijo # como parametro (por más información sobre colores en notación hexadecimal consultar tópic: Como se representan los colores en la PC).
Para el mismo verde se utilizarÃa asÃ:
| Código: | | [color=#008000]Texto de color #008000[/color] |
Texto de color #008000
Nota sobre la lista de nombres de colores: en realidad hay algunos otros nombres que no estan listados y también son válidos, cito esos porque son los que brinda phpbb de forma automática, si necesitan algún color medio exótico lo mejor es que usen la notación alternativa.
------------
img
La forma de utilizar este tag es aplicandolo para marcar la dirección URL de un archivo de imagen para que este a su ves sea incluÃdo en ese punto del post.
Por detalles sobre imagenes y direcciones URL de las mismas ver tópic: como mover imagenes (entre páginas).
Ejemplo:
| Código: | | [img]http://www.diosnoslibre.com/foro/templates/subSilver/images/logo_phpBB.gif[/img] |
------------
url
url crea links, es decir elementos a los cuales les podemos hacer click y nos llevan a otros lugares (a veces abren ventanas nuevas). Tambien se los conoce como "hipervÃnculos" ó "enlaces".
La forma más simple de utilizarlo es marcar una dirección válida de internet:
| Código: | | [url]http://www.diosnoslibre.com/[/url] |
http://www.diosnoslibre.com/
Hay un detalle con respecto a esto, el software phpbb ya de por sà reconoce hipervÃnculos y los hace clickeables aún sin que los marquemos.
O sea que escribiendo esto:
| Código: | | http://www.diosnoslibre.com/ |
Nos queda: http://www.diosnoslibre.com/ que también es clickeable, sin embargo esto no es muy seguro (es hasta molesto algunas veces) porque por ejemplo, si nos queda sin una separación entre el link y algún tag o si la dirección llegase a tener algún caracter especial es probable que el phpbb no la reconozca correctamente, por eso recomiendo siempre utilizar el tag url aún cuando resulte redundante.
url también nos permite introducÃr la dirección como parámetro en ves de marcarla, esto nos da la posibilidad de utilizar la marca para generar otros elementos clickeables aparte de las própias direcciones; un ejemplo:
| Código: | | [url=http://www.diosnoslibre.com/]Este link va a la página principal[/url] |
Esto nos genera un texto que es a su ves clickeable y nos dirije hacia la dirección que le suministramos como parámetro (notese que el parametro no lleva comillas).
Este link va a la página principal
La aplicación más tÃpica de esta caracteristica es la creación de imagenes clickeables, combinando los tags img y url.
En este ejemplo vamos a hacer que se muestre la imagen con la que venimos practicando y que a su ves al clickearla esta nos envÃe a la página principal:
| Código: | | [url=http://www.diosnoslibre.com/][img]http://www.diosnoslibre.com/foro/templates/subSilver/images/logo_phpBB.gif[/img][/url] |
En este caso particular no es posible invertÃr el orden de los tags ya que img solo funciona si se utiliza para marcar una URL de archivo de imagen.
------------
list
Este es el único tag compuesto de los que nos permite el BBCode, el decÃr "tag compuesto" significa que utiliza más de un marcador para funcionar correctamente.
Sucede que, list se utiliza para crear listados de diferentes clases, el elemento en general se marca con list pero a su ves debemos señalar cada item en la lista con un tag especial "*", este no es sin embargo una marca, tan solo un indicador; esto quiere decir que no se debe colocar el tag final "/*" solo el inicial.
El tag que señala el item en la lista se coloca en cualquier parte dentro de la marca y debe colocarse tantas veces como items tengamos.
Vamos a un ejemplo, una lista con dos elementos:
| Código: | [list][*]Primer elemento
[*]Segundo elemento[/list] |
- Primer elemento
- Segundo elemento
List acpeta un parametro opcional, que se utiliza para modificar la clase de listado que se muestra. Este parámetro puede ser tanto la letra 'a' (minúscula o mayúscula) ó el número '1'.
No lleva comillas.
| Código: | [list=a][*]Primer elemento
[*]Segundo elemento[/list] |
- Primer elemento
- Segundo elemento
| Código: | [list=1][*]Primer elemento
[*]Segundo elemento[/list] |
- Primer elemento
- Segundo elemento
Bien eso es todo, mi recomendación para trabajar con esto es que lo piensen como si fuesen cajas, es decir nosotros tenemos un texto digamos:
| Código: | | Un texto cualquiera que acabo de escribir. |
Un texto cualquiera que acabo de escribir.
Entonces lo que hacemos para marcarlo es "meterlo dentro de una caja" (imaginaria por supuesto) que serÃa lo que representan las dos marcas.
Asi que para pasar todo a manuscrita serÃa:
| Código: | | [i]Un texto cualquiera que acabo de escribir.[/i] |
Un texto cualquiera que acabo de escribir.
Si ahora ademas quisiesemos agregarle negrita a todo el texto serÃa como se dijo al principio agregar otra marca, aquà también sirve el ejemplo de las cajas para visualizar mentalmente el orden de las marcas, es como si agarrasemois la "caja" que acabamos de crear (la manuscrita) y a su ves la metiesemos dentro de OTRA caja que serÃa la negrita:
| Código: | | [b][i]Un texto cualquiera que acabo de escribir.[/i][/b] |
Un texto cualquiera que acabo de escribir.
Esquemáticamente:
| Código: | |[b]
|
| |[i]
| |
| | "Un texto cualquiera que acabo de escribir."
| |
| |[/i]
|
|[/b] |
Acá ven claramente porque da lo mismo poner "b i" que "i b" al principio pero según el orden con el que empecemos, el orden con el cual debemos cerrar.
Otro ejemplo, si en ves de hacer negrita todo el texto quisieramos hacer solo la parte "Un texto cualquiera" serÃa asÃ:
| Código: | | [i][b]Un texto cualquiera[/b] que acabo de escribir.[/i] |
Un texto cualquiera que acabo de escribir.
Observen que aquà no es posible invertÃr el orden de los tags ya que eso nos obligarÃa a colocar el "/i" en el medio de la frase y si bien esto es sintácticamente válido no lograrÃamos el efecto que queremos:
| Código: | | [b][i]Un texto cualquiera[/i] que acabo de escribir.[/b] |
Un texto cualquiera que acabo de escribir.
Bien un último caso interesante, supongamos que en ves de esto quisieramos subrayar en donde dice "Un texto cualquiera" y al mismo tiempo resaltar con rojo la parte que dice "texto cualquiera que acabo de escribir.", lo que se nos viene a la mente enseguida es hacer algo asÃ:
| Código: | | [u]Un [color=red]texto cualquiera[/u] que acabo de escribir.[/color] |
Sin embargo esto es un error y traten de darse cuenta porque.
Sucede que en este caso, si lo pensamos desde el modelo de las cajas estamos colocando dentro de una algunas partes que estan dentro de la otra y al mismo tiempo otras que estan por fuera, esto si se tratase de cajas reales serÃa imposible.
Lo correcto en este caso es dividir una de las cajas en dos más pequeñas, una para la que va dentro de la otra y otra que quedarÃa por fuera.
Es decir:
| Código: | | [u]Un [color=red]texto cualquiera[/color][/u] [color=red]que acabo de escribir.[/color] |
También podrÃa ser:
| Código: | | [u]Un [/u][color=red][u]texto cualquiera[/u] que acabo de escribir.[/color] |
En ambos casos nos queda:
Un texto cualquiera que acabo de escribir.
Notese que en el caso particular del subrayado también se deben marcar los espacios en blanco ya que estos también se subrayan.
Esto esquemáticamente serÃa:
| Código: | |[u]
|
| "Un"
|
| |[color=red]
| |
| | "texto cualquiera"
| |
| |[/color]
|
|[/u]
|[color=red]
|
| "que acabo de escribir."
|
|[/color] |
para el primer caso y:
| Código: | |[u]
|
| "Un "
|
|[/u]
|[color=red]
|
| |[u]
| |
| | "texto cualquiera"
| |
| |[/u]
|
| "que acabo de escribir."
|
|[/color] |
para el segundo.
Bien ese es todo el misterio, espero haya sido de vuestro agrado Samus_ out!
_________________
[ www.novenocirculo.com ] El cÃrculo de los traidores... |
|
| Volver arriba |
|
 |
Rod F
Clockwork Orange
Registrado: 24 May 2003
Mensajes: 8198
Ubicación: Montevideo, Uruguay
|
| Publicado: Jue Nov 02, 2006 11:01 am Título del mensaje: |
|
|
ME GUSTA!
BIEN HECHO SAMUS!
No se si da para ponerlo como sticky y ponerlo en 'Soy un Gil Nuevo' en realidad..
_________________
www.DiosNosLibre.com / http://rod-f.blogspot.com/
 |
|
| Volver arriba |
|
|
leoh
Ender el Genocida
Registrado: 31 Jul 2005
Mensajes: 3398
Ubicación: Montevideo, Uruguay
|
| Publicado: Jue Nov 02, 2006 11:59 am Título del mensaje: |
|
|
Movido al sub-foro correspondiente...
_________________
Me aburrió mi firma anterior. Ahora no tengo firma. |
|
| Volver arriba |
|
|
GaaRa
The Preacher
Registrado: 22 Jul 2005
Mensajes: 2900
|
| Publicado: Vie Nov 03, 2006 11:07 am Título del mensaje: |
|
|
kreo k kon los "TUTORIALS" k hay podrian hacer un subforo de tutorials.....y lleve lock, si hay algo para agregar o le mandan un PM a los naranjas o ami y lo desblokeo....
_________________
 |
|
| Volver arriba |
|
|
N3m0
The French Guy
Registrado: 28 Jul 2005
Mensajes: 1619
Ubicación: A. Brocco, esq. L. Alonsoperez
|
| Publicado: Vie Nov 03, 2006 4:07 pm Título del mensaje: |
|
|
Meh.. Está bueno... Me gustarÃa tener tanto tiempo al pedo! jejeje!
_________________
 |
|
| Volver arriba |
|
|
EL chanta
Prisionero polÃtico
Registrado: 23 Feb 2007
Mensajes: 731
Ubicación: En algun lugar de la plaza de comidas
|
| Publicado: Sab Mar 03, 2007 4:52 pm Título del mensaje: |
|
|
Increible, me lo aprendi todo
_________________
http://elchivitoblog.com/ |
|
| Volver arriba |
|
|
randomaxy
Cacho De La Cruz
Registrado: 02 Sep 2006
Mensajes: 635
Ubicación: No, nada de loqueishon, yo estoy bien de la cabeza
|
| Publicado: Sab Mar 03, 2007 5:02 pm Título del mensaje: |
|
|
buen aporte
ahora puedo hacer esto
y esto !
_________________
I LOVE MYSELF SO FUCKING MUCH
I CANT GET ENOUGH OF MYSELF
FUCK ME FUCK ME FUCK ME
LOOK AT ME LOOK AT ME
I LOVE MYSELF SO MUCH
 |
|
| Volver arriba |
|
|
tox
Guarda baboso
Registrado: 27 Mar 2007
Mensajes: 43
Ubicación: montevidead
|
| Publicado: Mar Mar 27, 2007 4:44 pm Título del mensaje: |
|
|
pooookkkkkkkkkkkkuuuuuteeeeeeeeeeeee
estas de nuevo en mi vida (L)
locureh xD
samus :usitas:
_________________
soy careta sa be lo !
mi flalalalag
 |
|
| Volver arriba |
|
|
Athrun Zala
Motociclista veterano
Registrado: 13 Nov 2006
Mensajes: 1301
Ubicación: The Cage
|
| Publicado: Mie Mar 28, 2007 1:53 am Título del mensaje: |
|
|
lol, Samus deberia de cambiar esa firma XD
y es practico este tutorial, si si...
_________________
  |
|
| Volver arriba |
|
|
Samus_
Zángano común
Registrado: 27 Oct 2006
Mensajes: 3
|
| Publicado: Dom May 13, 2007 4:52 am Título del mensaje: |
|
|
| Athrun Zala escribió: | | lol, Samus deberia de cambiar esa firma XD |
-cof cof- copy that!
hola toxie!
(para no hacerlo totalmente spam :$) hay algo que no se menciona ahi y que no aparece en la referencia de phpbb ¬¬ que descubrió un amigo de pedo y es el tag "email" para direcciones de correo:
| Código: |
[email]lalala@gmail.com[/email]
|
lalala@gmail.com 
_________________
[ www.novenocirculo.com ] El cÃrculo de los traidores... |
|
| Volver arriba |
|
|
dbertua
Portero
Registrado: 20 Abr 2007
Mensajes: 75
Ubicación: Montevideo - Uruguay
|
| Publicado: Dom May 13, 2007 12:03 pm Título del mensaje: |
|
|
BuenÃsimo el tutorial, después te escribo algo que tal vez te interese.
Saludos.
Daniel Bertúa
_________________
Todos somos alumnos
_____  _____
Revista - M i n i M i n i M
1 0 0 % ------ GRATUITA
Sitio OFICIAL |
|
| Volver arriba |
|
|
felo92
Johnny Cage
Registrado: 22 Ago 2007
Mensajes: 1256
Ubicación: chizito island
|
| Publicado: Lun Sep 03, 2007 9:24 pm Título del mensaje: |
|
|
foto de prueba (recuerdese q soy un n00b)
esta va en respuesta del jamon del chanta
PD: grande ese tutorial....bien samus
_________________
Mi mama me mima.......... Los granaderos no
beatles, o como me gusta llamarlos: los pikles |
|
| Volver arriba |
|
|
soymanya
Zángano común
Registrado: 22 Oct 2007
Mensajes: 1
Ubicación: montevideo, uruguay
|
| Publicado: Lun Oct 22, 2007 6:27 pm Título del mensaje: |
|
|
bueno muchas gracias, sirvio de mucho
^_^
_________________
vamo el manya!!!! ^_^
 |
|
| Volver arriba |
|
|
|
|
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas
|
Powered by Tovvers
|
Buscar
Lista de Miembros
Grupos de Usuarios
Regístrese
Perfil
Identifíquese para revisar sus mensajes
Conectarse
