Servidor Vampire de NwN 1
 
ÍndiceCalendarioFAQBuscarMiembrosGrupos de UsuariosRegistrarseConectarse

Comparte | 
 

 Tutorial BBCode by: Rhapsode.

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
Rhapsode

avatar

Cantidad de envíos : 11
Fecha de inscripción : 17/09/2009

MensajeTema: Tutorial BBCode by: Rhapsode.   Lun Sep 21, 2009 2:06 am

b]Viendo que hay gente que no sabe utilizar la mayoría de las utilidades del BBCode (Esos cuadraditos de ahí arriba) he hecho este tutorial, originariamente es para mi foro de música, pero ya que lo tenía hecho pues he decidido compartirlo con vosotros, al menos la parte que tengo hecha por ahora.
Para aclararos algunas cosas, en el tuto he utilizado también algunas funciones HTML (En el índice) que no explicaré.

Bueno ahí va. Espero que os guste y al menos ayude.[/b]

Bienvenidos a este nuevo tutorial. Esta vez aprenderemos a usar por completo todas las funciones que disponen estos foros sobre el BBCode.

Índice

  • Edición de Textos (Negrita, Cursiva..)
  • Posición de textos
  • Listas e insertar lineas
  • Citas, códigos y tablas


Edición de Textos (Negrita, Cursiva..)
En esta sección, podemos encontrar 4 botones distintos

La B o Negrita sirve para resaltar una frase, palabra, párrfao. Para utilizarlo, solamente tenéis que seleccionar el texto y darle al boton o poner el texto entre estos comandos [b*]Tu texto[/b*] (Sin los asteriscos)
Efecto: Usando el boton B

La I o Itálica, más comunmente conocida como Cursiva sirve para darle un efecto como de Doblado al texto. Para utilizarlo, tendréis que seleccionar el texto y darle al boton I o utilizar este comando (Sin asteriscos) [i*]Tu texto[/i*]
Efecto: Usando el botón I

El boton U o Subrallado sirve para subrallar las palabras que queramos. Para utilizarlo tenemos que seleccionar y pulsar el botón o utilizar estos comandos (Siempre sin asteriscos) [u*]Tu texto[/u*]
Efecto: Usando el botón U

El botón S o tachado sirve para tachar algunas palabras. Es una herramienta muy útil sobretodo para moderadores o para deshabilitar un link que esté desactualizado o ya no sirva. Para utilizarlo seleccionar y pulsar boton o usar estos comando [s*]Tu texto[/s*]
Efecto: [s]Utilizando el botón S[/s]

Posición de textos
En esta sección encontramos 4 botones más , estos sirven para posicionar el texto. No son muy usados i la verdad me parece algo bastante malo, sobretodo si nos toca escribir algún texto largo.

El botón Izquierda sirve para alinear el texto a la izquierda. Para usarlo, seleccionamos el texto y le damos al botón o usamos estos comandos [left*]Tu texto aquí[/left*]
Efecto:
Utilizando alienamiento izquierdo


El botón Centrar sirve para poner en el centro del mensaje una parte o todo tu texto. Para utilizarlo simplemente seleccionamos y le damos al botón o usamos estos comandos [center*]Tu texto aquí[/center*]
Efecto:
Utilizando el Centrado


El botón Derecha sirve para alinear a la derecha un parrafo o un texto. Para utilizarlo seleccionamos y le damos al botón o utilizamos estos comandos [right*]Tu texto aquí[/right*]
Efecto:
Utilizando Derecha


El botón Justificar nos sirve para alinaer perfectamente el texto y que ninguna frase sobresalga por los lados. Para utilizarlo podemos seleccionar y clicar el botón o utilizar estos comandos [justify*]Tu texto aquí[/justify*]
Efecto:
Longing eyes turn into the sun
Low in the winter
Grey as a wolf now the wind has come
Cold as a Hunter


Podemos combinar cualquiera de los tres primeros con el último.

Listas e Insertar lineas

En esta sección tenemos 3 botones sirven para hacer listas estilo Índice, pueden ser numeradas o no, el último de estos tres sirve para insertar una barra para separar lo que queramos.

El botón Lista nos pemite hacer listas ordenadas. Para utilizarlas simplemente seleccionamos lo que queramos y le damos al botón o usamos estos comandos [*list][*]Tu texto [/list*]. Como podréis observar hay un comando [*] entre el primer "List" y el texto, bien tenemos que poner esto delante de cada ítem que queramos ordenar (Saldrá un punto) quedando así:

[list*][*]Item1
[*]Item 2
[*]Item 3[/list*]
Resultado:
  • Item1
  • Item 2
  • Item 3


El botón Lista ordenada es se usa exactamente igual que el anterior solo que en este salen números en vez de puntos cuando ponemos un asterísco. La cosa quedaría así:

[list=1*][*]ïtem 1
[*]Ítem2
[*]Ítem 3[/list*]
Resultado
  1. ïtem 1
  2. Ítem2
  3. Ítem 3


El botón Línea es muy sencillo de utilizar, simplemente tenemos que pulsarlo sin seleccionar nada y una línea aparecerá en nuestro texto. También podemos utilizar el comando [hr*]
Efecto:{
}

PD: He visto que no deja usar HTML, bueno una pena se pierda la gracia del índice xD
Volver arriba Ir abajo
Ver perfil de usuario
Rhapsode

avatar

Cantidad de envíos : 11
Fecha de inscripción : 17/09/2009

MensajeTema: Re: Tutorial BBCode by: Rhapsode.   Lun Sep 21, 2009 2:08 am

Índice
Citas, códigos y tablas
Imágenes, Links, Flash y Videos

Citas, Códigos y Tablas

En este bloque encontramos 3 botones más, algunos de ellos bastante importantes en un foro, como són las "Citas", Códigos y Tablas .

El primero de los botones, Citar sirve para citar lo que otro usuario o tú mismo ha/s escrito en un post anterior o de otro foro y que quieres incluír en tu porpio post. Es muy sencillo de utilizar, podéis simplemente ir al mensaje que queréis citar y darle al botón situado en el lado superior derecho de ese mensaje, si hacéis solo podréis responder en el mismo Hilo en el que ese usuario ha escrito ese mensaje. Si queremos citar un comentario en otro hilo distinto lo que tenemos que hacer, es copiar el texto que queremos citar, pegarlo en nuestro mensaje, seleccionarlo y darle al botón "Citar". Podemos también utilizar los siguientes comandos: [*quote]Texto a citar[/quote*]. Si queremos que salga el nombre del usuario que dijo eso, tenemos que poner esto: [*quote="NombreUser"]Texto a Citar[/quote*]. (Recordad poner el nombre entre comillas, si no, no funciona)
Efecto:
Con nombre:
Carles! escribió:
Bienvenidos a este nuevo tutorial.
Sin Nombre:
Citación :
Bienvenidos a este nuevo tutorial.

El segundo de los botones "Código" sirve para insertar un código (HTML, BBCode, PHP, Java, CSS..) y desactivarlo. Para utilizar, pegamos o escribimos el código en cuestión, seleccionamos y le damos al botón Código. Podemos utilizar también los siguientes comandos: [code*]Tu código[/code*].
Efecto:Tu código como veis el texto sale en negrita.
Código:
[b]Tu texto[/b]
En cambio al utilizar la función Código se ve el código que se ha usado para ponerlo en negrita.

El botón tablas se explicará más adelante que es bastante difícil de utilizar.

Para crear una table, es necesario definir un cuadro 'table' luego insertarle una línea 'tr'. Esta línea puede contener uno o más celdas 'td', así como un cuadro puede contener varias líneas 'tr': .

Código:
[table] [tr][td] Linea 1 - Celda 1 [/td] [td] Linea 1 - Celda 2 [/td] [td] Linea 1 - Celda 3 [/td][/tr] [tr][td] Linea 2 - Celda 1 [/td] [td] Linea 2 - Celda 2 [/td] [td] Linea 2 - Celda 3 [/td][/tr][/table]
Efecto:
Linea 1 - Celda 1 Linea 1 - Celda 2 Linea 1 - Celda 3
Linea 2 - Celda 1 Linea 2 - Celda 2 Linea 2 - Celda 3

Crear una tabla con un borde :
Código:
[table border=1] [tr][td] Linea 1 - Celda 1 [/td] [td] Linea 1 - Celda 2 [/td] [td] Linea 1 - Celda 3 [/td][/tr] [tr][td] Linea 2 - Celda 1 [/td] [td] Linea 2 - Celda 2 [/td] [td] Linea 2 - Celda 3 [/td][/tr][/table]
Efecto:
Linea 1 - Celda 1 Linea 1 - Celda 2 Linea 1 - Celda 3
Linea 2 - Celda 1 Linea 2 - Celda 2 Linea 2 - Celda 3

Crear una tabla con borde sin espacio :
Código:
[table cellspacing=0 border=1] [tr][td] Linea 1 - Celda 1 [/td] [td] Linea 1 - Celda 2 [/td] [td] Linea 1 - Celda 3 [/td][/tr] [tr][td] Linea 2 - Celda 1 [/td] [td] Linea 2 - Celda 2 [/td] [td] Linea 2 - Celda 3 [/td][/tr][/table]
Efecto:
Linea 1 - Celda 1 Linea 1 - Celda 2 Linea 1 - Celda 3
Linea 2 - Celda 1 Linea 2 - Celda 2 Linea 2 - Celda 3

Imágenes, Links, Flash y Vídeos

Esta sección contiene 4 botones bastante fáciles de usar todos ellos..

El primero de todos ellos, el botón Alojar una imagen sirve para subir una imagen a internet, es tan sencillo como clicar el botón y darle a donde pone examinar, acto seguido le damos a Host It y a los pocos segundos, nos saldrá una imagen como esta (Con diferentes URL a las de la imagen) simplemente tenéis que elegir la que está marcada con una flecha.
.
Le dais al botoncito Copy o simplemente la seleccionais y la pegáis en vuestro mensaje.

El segundo botón Imagen sirve para colocar una imagen que hayáis sacado de internet. Buscáis una imagen en Google y copiais la URL de la imagen en cuestión, acto seguido lo pegáis en la casilla desplegable que os sale al pulsar este botón y le dais a Ok. Podéis hacerlo más fácil utilizando estos dos comandos: [img*]URL de la imagen[/img*].
Efecto: [img*]http://illiweb.com/fa/pbucket.gif[/img*]


El siguiente botón, Vínculo sirve para añadir un Link a tu mensaje. Es muy sencillo de usar, clicáis el botón y os salen dos recuadros en los que escribir en el primero ponéis la URL que queráis Linkear en el segundo escribís lo que queréis que salga en vez de la URL. También podéis hacerlo utilizando estos comandos: [url*]Link de tu Web[/url*] (Este sería diractamente la URL) o [url=Link de tu Web*]Mi Web. Pincha aquí[/url*]
Efecto:
[url*]Link de tu Web[/url*]
http://musicaldia.forum.st
[url=Link de tu Web*]Mi Web. Pincha aquí[/url*]
Música al día. Picha aquí

El siguiente botón, Flash sirve para añadir imágenes Flash a tu mensaje. Solamente tienes que buscar una imagen en Flash por internet copiar el link de la imagen, clicar el botón y insertar el link, acto seguido darle a Ok. Puedes ponerle si quieres el tamaño de la imagen aunque esto es opcional. Si quieres puedes hacerlo con estos comandos: [flash*]Link de la imagen[/flash*]. Si le pones el tamaño la cosa sería así: [flash(20,20)*]Link del Flash[/flash*] (El primer número es la altura, el segundo la anchura).
Efecto:


El siguiente botón, son los videos, que ya expliqué en un tutorial anterior. Click aquí

En próximas entregas: Tamaño, Colores y Fuentes de letra.
Volver arriba Ir abajo
Ver perfil de usuario
Rhapsode

avatar

Cantidad de envíos : 11
Fecha de inscripción : 17/09/2009

MensajeTema: Re: Tutorial BBCode by: Rhapsode.   Lun Sep 21, 2009 2:09 am

Índice

  • Tamaño, Color y Fuente de letra
  • Otros


Tamaño, Color y Fuente de letra

En este bloque vamos a ver los siguiente tres botones , estos sirven para cambiar el tamaño, el color y la fuente con la que estamos escribiendo.

El primer botón, Tamaño, sirve para modificar el tamaño de la letra con la que vamos a escribir.Por defecto tenemos 5 tamaños: Muy Pequeño, Pequeño, Normal, Grande y Muy Grande, estos botones equivaldrían a 7,9,12, 18 y 24 Puntos (El tamaño que se usa en programas como el Word o el Open Office). Para utilizarlos, simplemente seleccionamos el texto al que queramos cambiar el tamaño, clicamos el botón Tamaño y finalmente seleccionamos el tamaño deseado. Podemos hacerlo usando los siguientes comandos: [size=Nº de Puntos de tamaño*]Texto[/size*].
Efecto:
[*size=7]Texto[/size*]
Texto
[*size=9]Texto[/size*]
Texto
[*size=12]Texto[/size*]
[*size=18]Tezto[/size*]
Texto
[*size=24]Texto[size*]
Texto

El siguiente botón, Color, sirve para cambiar de color como su nombre indica. Para usarlo, seleccionamos el texto, clicamos el botón y seleccionamos el color de la lista que queramos. Podemos usarlo también con estos comandos: [color:23ad=color que quieras*]Tu texto[/color*], para poner el color que quieras tienes que saber su nombre en inglés.
Algunos ejemplos de Color:
[color]purple
[color]slategrey[/color]
[color]cyan[/color]
[color]tomato[/color]
[color]green[/color]
[color]hotpink[/color]
l[color]ime[/color]
[color]white[/color]
[color]slategray[/color]
[color]brown[/color]
[color]yellow[/color]
[color]gold[/color]
[color]darkviolet[/color]
[color]beige[/color]
[color]dodgerblue[/color]
[color]chartreuse[/color]
[color]darkorange[/color]

[color]aliceblue[/color]
[color]antiquewhite[/color]
[color]aqua[/color]
[color]aquamarine[/color]
[color]azure[/color]
[color]blueviolet[/color]
[color]brown[/color]
[color]burlywood[/color]
[color]cadetblue[/color]
[color]chartreuse[/color]
[color]chocolate[/color]
[color]coral[/color]
[color]cornflowerblue[/color]
[color]cornsilk[/color]
[color]crimson[/color]
[color]cyan[/color]
[color]darkblue[/color]
[color]darkcyan[/color]
[color]darkgoldenrod[/color]
[color]darkgray[/color]
[color]darkgreen[/color]
[color]darkkhaki[/color]
[color]darkmagenta[/color]
[color]darkolivegreen[/color]
[color]darkorange[/color]
[color]darkorchid[/color]
[color]darkred[/color]
[color]darksalmon[/color]
[color]darkseagreen[/color]
[color]darkslateblue[/color]
[color]darkslategray[/color]
[color]darkturquoise[/color]
[color]darkviolet[/color]
[color]deeping[/color]
[color]deepskyblue[/color]
[color]dimgray[/color]
[color]dodgerblue[/color]
[color]fuchsia[/color]
[color]gold[/color]
[color]goldenrod[/color]
[color]gray[/color]
[color]green[/color]
[color]khaki[/color]
[color]lightblue[/color]
l[color]ightcyan[/color]
[color]lightgoldenrod[/color]
[color]lightgoldenrodyellow[/color]
[color]lightgreen[/color]
[color]lightsalmon[/color]
[color]lightseagreen[/color]
[color]lightslategray[/color]
[color]lime[/color]
[color]magenta[/color]
[color]maroon[/color]
[color]mediumblue[/color]
[color]mediumorchid[/color]
[color]mediumpurple[/color]
[color]mediumsalmon[/color]
[color]mediumslateblue[/color]
[color]mediumspringgreen[/color]
[color]mediumturquoise[/color]
[color]mediumvioletred[/color]
[color]midnightblue[/color]
[color]navy[/color]
[color]olive[/color]
[color]olivegreen[/color]
[color]orange[/color]
[color]orchid[/color]
[color]powderblue[/color]
[color]purple[/color]
[color]red[/color]
[color]rosybrown[/color]
[color]royalblue[/color]
[color]saddlebrown[/color]
[color]salmon[/color]
[color]sandybrown[/color]
[color]seagreen[/color]
[color]seashell[/color]
[color]sienna[/color]
[color]silver[/color]
[color]skyblue[/color]
[color]slateblue[/color]
[color]slategray[/color]
[color]snow[/color]
[color]springgreen[/color]
[color]steelblue[/color]
[color]tan[/color]
[color]teal[/color]
[color]thistle[/color]
[color]tomato[/color]
[color]turquoise[/color]
[color]violet[/color]
[color]wheat[/color]
[color]white[/color]
[color]whitesmoke[/color]
[color]yellow[/color]
[color]yellowgreen[/color]

El siguiente botón, Fuente, sirve para cambiar la fuente del texto que vamos a escribir. Para utilizar esta función seleccionamos el texto que queremos cambiar de fuente y le damos a cualquiera de las fuentes que nos ofrecen al pinchar el botón. Podemos utilizarlo también con estos comandos: Tu te4xto[/font*]
Efecto:

Arial Black
Comic Sans
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Otros

En esta sección veremos todas las funciones que nos ofrece la pestaña Otros .

La primera función, Índice, nos permite ponerle un Subíndice a la palabra indicada. Simplemente tenemos que escribir lo que queramos que aparezca como Subíndice al lado de la palabra que lo tendrá, seleccionar el Subíndice y darle al Botón. Podemos también usar estos comandos: Palabra a Subindexar[sub*]1+1[/sub*].
Efecto:
Palabra a Subindexar1+1

La segunda función, Exponente, nos permite ponerle un exponente como si fuera una poténcia en matemáticas. Para usarlo, escribimos el exponente al lado de la palabra que queramos, seleccionamos y le damos a Exponente. Podemos usar estos comandos: Palabra[sup*]Exponente[/sup*]
Efecto:
Palabraexponente

La siguiente función, Spoiler, sirve para cubrir el contenido de cualquier mensaje.Para usarlo, vamos a la pestaña Otros le damos a Spoiler y escribimos lo que queramos entre los dos comandos, o escribimos los dos comandos directamente: [spoiler*]Lo que quieras cubrir[/spoiler*].
Efecto:[b/]
Spoiler:
 

La siguiente función, [b]Oculto
, sirve para ocultar un texto, imagen o link a todos los que noresopndan en el tema en el que se ha usado. Para utilizarlo, escribimos lo que queramos, seleccionamos y vamos a Otros y seleccionamos Oculto. Podemos usar estos comandos: [hide*]Lo que quieras cubrir[/hide*]
Efecto:
(Cuando respondáis al tema veréis lo que pone).

Las dos siguientes funciones, Desplazamiento Vertical y Horizontal, sirven para que el texto se desplace vertical u horizontalmente. Escribmos lo que queramos, seleccionamos, clicamos en otros y seleccionamos D. Horizontal o D.Vertical.Podemos usar estso comandos: D.Horizontal: [*scroll]Lo que quieras desplazar[/scroll*]. D.Vertical: [updown*]Lo que quieras desplazar[/updown*]
Efecto:
Hola Bienvenido
Hasta más ver

La siguiente función, Aleatorio, nos ofrece la posibilidade de generar un número aleatorio. Modo de empleo:
Obtener un número aleatorio precisando un intervalo mínimo y máximo: [rand*]50,100[/rand]
Efecto:
Número aleatorio (50,100) :
68
Obtener un número aleatorio precisando un intervalo máximo: [rand*]50[/rand]
Efecto:
Número aleatorio (1,50) :
31
Volver arriba Ir abajo
Ver perfil de usuario
Rhapsode

avatar

Cantidad de envíos : 11
Fecha de inscripción : 17/09/2009

MensajeTema: Re: Tutorial BBCode by: Rhapsode.   Lun Sep 21, 2009 2:09 am

Realizado por: Rhapsode.

Imágenes: Forumactif

Corrección: Rhapsode


Licencia


Tutorail BBCode para Foroactivo by Rhapsode is licensed under a Creative Commons Reconocimiento-No comercial 3.0 España License.


Muchas gracias a todos por leer este tutorial.
Volver arriba Ir abajo
Ver perfil de usuario
Contenido patrocinado




MensajeTema: Re: Tutorial BBCode by: Rhapsode.   

Volver arriba Ir abajo
 
Tutorial BBCode by: Rhapsode.
Ver el tema anterior Ver el tema siguiente Volver arriba 
Página 1 de 1.
 Temas similares
-
» Tutorial: Cámara estenopeica
» Tutorial para poner nuevas piezas a los transformers parte 5
» Peticion: Tutorial Piroxilina
» TUTORIAL 2: la firma
» Video tutorial: coloreado en photoshop

Permisos de este foro:No puedes responder a temas en este foro.
Vampire la edad oscura :: Off-Topic :: General-
Cambiar a: