[ Guía ] Explicacion de las herramientas para hacer posts.

Buenos días damas y caballeros. Esta guía tiene como función explicar cuales son las herramientas disponibles a todos nosotros a la hora de escribir posts. Aunque me imagino que todos ustedes ya estan familiarizados con las ventanas para posts, las herramientas aqui son un poco diferentes de las que teníamos en ForoAnime. Incluso pareciera que tenemos menos herramientas que antes. Por lo tanto me voy a ir herramienta por herramienta explicando su funciones.

Herramientas para escribir posts.

Vallamos viendo la pantalla para escribir posts.

[Tienes que estar registrado y conectado para ver este vínculo]

En mi caso, tengo una sola barra con botones, pero es posible que ustedes tengan 2 barras. La única diferencia es la resolución sus monitores. La imagen de arriba fué tomana con una computadora con resolución 1600x900. Por lo tanto no se alarmen si se ve diferente.

Como verán, numeré los botones. voy a ir explicando cada uno en ese orden. También mensionare cuales son las etiquetas que le corresponden a cada función.

Para los que se preguntan, las etiquetas son los pedacitos de codigo que le dan un formato a un texto. Las etiquetas siempre van en pares, una para abrir y otra para cerrar. Toda etiqueta lleva este formato: [etiqueta] texto [/etiqueta]. Un mismo texto puede llevar varias etiquetas, pero si no estaban bien ordenadas, puede que al enviar sus mensajes no se muestre el texto como les hubiera gustado. Si van a usar varias etiquetas, traten de que se vean así: [etiqueta1][etiqueta2][etiqueta3] texto [/etiqueta3][/etiqueta2][etiqueta1]. Por asi decirlo, la última etiqueta en abrirse, es la primera en cerrarse. Una vez que le hagan click a Previsualizar o al boton de enviar, las etiquetas van a desaparecer, pero el texto al que rodearon cambiará de aparencia.

1.- Negrita.

Este boton hace que el texto seleccionado se vuelva más grueso. Comparen la diferencia: Texto, Texto.

Un texto se puede poner en negrita de dos formas: una es seleccionando el texto deseado y hacer click sobre el botón de negrita (la B mayúscula); la otra es poniendo las etiquetas correctas al inicio y al final del texto.

Código:

 [b] Así se pone en negritas [/b]

2.- Itálica/Cursiva.

Nuestra segunda herramienta hace que el texto se vuelva itálica o semicursiva. Este es un ejemplo de itálica.

Las etiquetas para la itálica son:

Código:

 [i] Así se pone en itálicas [/i]

3.- Subrayado.

El tercer botón sirve para subrayar texto. Así se ve algo subrayado. Las etiquetas para el subrayado son:

Código:

 [u] Este es un subrayado [/u]

4.- Rayado.

Esta función hace que el texto aparezca tachado o rallado. Asi se ve tachado un texto. Sus etiquetas son:

Código:

 [s] Este texto esta tachado! [/s]

5.- Alineado a la Izquierda.

Los siguientes 4 botones determinan hacia donde va a estar alineado o recargado el texto escrito. Por default siempre esta activado el boton de la izquierda. Al igual que en MS Word, hace que todo el texto se recargue a la izquierda, haciendo que el lado derecho de los párrafos varie a según la cantidad de letras en el renglón.

Este es un ejemplo de como se ve un párrafo alineado a la izquierda:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
tempor fermentum felis vitae fermentum. Donec aliquet, lectus in tempus
ultricies, sapien nibh lobortis leo, in ultricies odio orci et magna.
Vivamus tempus leo id tellus suscipit convallis. Phasellus ante lacus,
commodo vitae sagittis ac, eleifend nec lorem.

La etiqueta para el alineado a la izquierda es la de ['left'] sin comillas. Como esta funcion esta por defecto, es seguido que sean suprimidas por completo a la hora de previsualizar.


6.- Centrado.

Como su nombre lo dice, hace que el texto o contenido quede centrado en el sitio. Aqui les va un ejemplo:


Para centrar, pueden usar estas etiquetas:

Código:

 [center] texto centrado [/center]
 

7.- A la derecha.

Esta función hace que el texto quede orientado hacia la derecha. Por ejemplo:


Las etiquetas para esto son:

Código:

 [right] texto a la derecha [/right]
 

8.- Justificado.

Este boton hara que el contenido se vea Justificado, lo cual significa que se vera parejo tanto de la derecha como de la izquierda.


Les comento de antemano que solo entrará en efecto propiamente cuando usen texto corrido. Si sus párrafos no lleguan a llenar todo un renglón, ese renglón queará alineado a la izquierda. Las etiquetas para esto son:

Código:

 [justify] texto justificado [/justify]

9.- Listado.

Esta funcion ordena los parrafos que selecciones y les agrega un 'bullet', o puntillo de listado, al inicio de cada párrafo. Por ejemplo:

• Carne Molida
  
• Papas
  
• Cebollas
  
• Cilantro
  
• Tomates
  

Para hacer que cada renglon tenga su propio punto, hay que colorar la etiqueta
[*] antes del renglon. En código la lista de arriba sería:

Código:

[list]
[*]Carne Molida
[*]Papas
[*]Cebollas
[*]Cilantro
[*]Tomates
[/list]

10.- Listado ordenado.

Básicamente es igual que la anterior, pero en lugar de puntos, la lista estará ordenada por números. Veamos la misma lista de arriba.

1. Carne Molida
   
2. Papas
   
3. Cebollas
   
4. Cilantro
   
5. Tomates
   

En código sería:

Código:

[list=1]
[*]Carne Molida
[*]Papas
[*]Cebollas
[*]Cilantro
[*]Tomates
[/list]

11.- Insertar Línea.

Ideal para cuando necesitan cambiar de tema, este boton les inserta una linea divisoria que se mira asi:

---

Para insertarla por medio de código:

Código:

 [hr]

Este es de los pocos casos en donde no se debe poner una etiqueta de cierre.


12.- Citar.

Citar es cuando salen "burbujas" dialogo. Básicamente el texto seleccionado queda metido en una caja, similar cuando uno desea responder a lo que escribió otro usuario y desea mostrar el texto original de la otra persona. Por ejemplo:

Citación :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor
fermentum felis vitae fermentum. Donec aliquet, lectus in tempus
ultricies, sapien nibh lobortis leo, in ultricies odio orci et magna.
Vivamus tempus leo id tellus suscipit convallis. Phasellus ante lacus,
commodo vitae sagittis ac, eleifend nec lorem.

Para usarlo manualmente, las etiquetas son:

Código:

 [quote] texto citado [/quote]

13.- Código.

Quizás se preguntaron porqué estube mostrando recuadritos que decían "Código" arriba de. Bueno, el contenido que quede adentro de etiquetas de código va a completamente ignorar etiquetas y mostrar el texto tal cual. Recuerdan que al inicio mencioné que cuando uno de la click a previsualizar o enviar, todas las etiquetas escritas desaparecen pero el contenido se formatea? Bueno, con el botón de código puedes escribir el texto en código y mostrarlo en código. Aqui les va el ejemplo y las etiquetas.

Código:

 [code] esto es texto en codigo! [/code]

14.- Insertar una Tabla.

Como su nombre lo dice, el botón sirve para insertar una tabla. Como esta:

celda 1	celda 2	celda 3
a	b	c
I	II	III

Al darle click al boton, les saldrá una mini ventanita para que ingresen cuantos renglones y cuantas columnas quieren que contenga su tabla. Una vez creada, les va a salir su nueva tabla muy pegada. Esto es porque esta vacía. Hagan click sobre una de las celdas y empiezen a rellenar.

La misma tabla de arriba en código se vería:

Código:

[table border="1"][tr][td]celda 1
[/td][td]celda 2
[/td][td]celda 3
[/td][/tr][tr][td]a
[/td][td]b
[/td][td]c
[/td][/tr][tr][td]I
[/td][td]II
[/td][td]III
[/td][/tr][/table]

'table border' es para determinar el grosor de la tabla. 'tr' es para determinar de donde a donde abarca un renglon. 'td' es para cada celda en sí de todo el renglón. Noten que cada etiqueta tiene su pareja. entre td y /td debería de estar el contenido de la celda.

16.- Alojar una Imagen.

Una herramienta conveniente, porque les permite buscar una imagen desde su ordenador y la va a 'subir' a imageshack, para luego agregar la imagen a su post. Les abrirá una nueva ventana o tab con el sitio de imageshack y los links a esa imagen. Veamos una imagen.

[Tienes que estar registrado y conectado para ver este vínculo]

Y el código de esa imagen sería:

Código:

[url=http://img808.imageshack.us/i/shoryuken.jpg/][img]http://img808.imageshack.us/img808/5941/shoryuken.jpg[/img][/url]

Se preguntarán porqué hay un URL además de un IMG. Bueno si le dejamos la etiqueta de URL, cuando muevan el cursor arriva de la imagen, cambiará el cursor a uno de la manita para botones. Si quieren que su imagen haga referencia, o que enlace a, otra página o sitio, así se puede hacer. Alternativamente, pueden dejar solamente las etiquetas de IMG y aún se muestra la imagen.


17.- Imagen.

Va de la mano con el botón anterior. Sirve para mostrar imágenes.



Las etiquetas para lo de arriba son:

Código:

[img]http://icanhascheezburger.files.wordpress.com/2008/10/funny-pictures-cat-eats-baseball-players.jpg[/img]

En algunas ocaciones verán que se usa "IMG" y en otras "img". Ambas funcionan. Notan que cuando ponen el cursor arriba de esta imagen, no cambia de aspecto la flechita? Ahi esta la diferencia entre usar y no usar la etiqueta de URL.


18.- Flash.

Sirve para agregar videos, animaciones o archivos que esten en flash. Simplemente indiquen las dimensiones que quieran que se vea y el enlace a la animación.



el codigo es igual que el boton de abajo.

19.- Video.

Este botón es el que usarían para agregar videos a sus posts. Por ejemplo de Youtube, que es de los lugares más comunes de donde obtener videos.



Las etiquetas son:

Código:

 [flash(425,350)]http://www.youtube.com/v/Wo6Q14vBB1c[/flash]

flash(425,350) indica que esas son las dimensiones del video. A pesar de que el video esta en youtube, y que pueden usar la etiqueta 'youtube', a la hora de hacer copy-paste al foro puede que se modifiquen las etiquetas. Tambien pueden utilizar la etiqueta de 'video' para la mayoria de las ocaciones.


20.- Tamaño Fuete.

Con este botón pueden cambiar el tamaño de las letras. El botón les da a escoger entre 5 tamaños diferentes, aunque manualmente se pueden conseguir más tamaños. Veamos las diferencias.

Texto chico. Texto mediano. Texto grande. Texto muy grande.

Y las etiquetas utilizadas serían:

Código:

 [size=9]Texto chico.[/size] [size=12]Texto mediano.[/size] [size=18]Texto grande.[/size] [size=24]Texto muy grande.[/size]

Ustedes podrían escoger manualmente entre los tamaños de letra. Yo les recomiendo que usen los tamaños entre 10 y 30, dejando arriba de 20 para títulos.

21.- Color.

Con este boton puede uno cambiarle el color a las letras. La seleccion disponible esta algo chica, pero en realidad se puede usar cualquier color averiguando si tiene nombre definido o su número en hexadecimal. Veamos unos ejemplos:

Texto en rojo. Texto en blanco. Texto en amarillo-naranja. Texto en rosita. Texto en un color no nombrado.

Para una lista completa de los colores que si tienen nombre definido, pueden ver este sitio: [Tienes que estar registrado y conectado para ver este vínculo]

Si quieren ver más opciones de colores: [Tienes que estar registrado y conectado para ver este vínculo]

Para usar colores por medio de etiquetes hay dos formas. Si el color tiene un nombre definido se puede usar directamente, sino hay que escribir color=#000000, cambiando los 0's por la combinacion correcta. Veamos como hubieran quedado los colores de arriba, y notaran que use un color por su nombre que no venia en el boton.

Código:

[color=red]Texto en rojo.[/color] [color=white]Texto en blanco[/color]. [color=gold]Texto en amarillo-naranja[/color]. [color=violet]Texto en rosita[/color]. [color=#39FCCE]Texto en un color no nombrado[/color].

22.- Fuente de Texto.

Con este boton se puede cambiar la fuente de los textos. Hay Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times new roman, trebuchet y verdana.

Las etiquetas usadas para lo de arriba fueron:

Código:

[font=Arial]Arial[/font], [font=Arial Black]Arial Black[/font], [font=Comic Sans Ms]Comic Sans[/font], [font=Courier New]Courier New[/font], [font=Georgia]Georgia[/font], [font=Impact]Impact[/font], [font=Times New Roman]Times new roman[/font], [font=Trebuchet MS]trebuchet[/font] y [font=Verdana]verdana[/font]. 

23.- Otros

En el boton de otros salen 8 opciones mas.

I) Indice. _{Esto es lo que hace el indice.} Hace que el texto se vea mas chico y un poco mas abajo de la altura normal.

II) Exponente. ^{Esto es lo que hace exponente.} Hace que el texto se vea como un exponente.

III) Spoiler.

Spoiler:

Los tags de spoiler que no encontrabamos.

IV) Oculto. Hace que lo que este adentro no pueda ser visto para usuarios no registrados, o no conectados.

V) Desplazamiento horizontal. Weeeeee se mueve el texto

VI) Desplazamiento vertical. y aqui van los creditos de la pelicula

VII) Aleatorio.

Número aleatorio (1,50) :

33

Para sacar numeros al azar. Si especifican 2 numeros, te sacara un numero al azar entre esos dos; si escriben un solo numero, les sacara un numero al azar entre 1 y el que escribieron

VIII) WoW. [wow]36942[/wow] Para presumir nuestros items de World of Warcraft, jajajaja. Me falta averiguar como hacer que salga el tooltip del item.

Aqui va lo mismo en codigo:

Código:

I) Indice. [sub]Esto es lo que hace el indice.[/sub] 
II) Exponente. [sup]Esto es lo que hace exponente.[/sup]
III) Spoiler. [spoiler]spoler time![/spoiler]
IV) Oculto. [hide]esto esta oculto para los que no estan registrados >=].[/hide]
V) Desplazamiento horizontal. [scroll] Weeeeee se mueve el texto[/scroll]
VI) Desplazamiento vertical. [updown] y aqui van los creditos de la pelicula [/updown]
VII) Aleatorio. [rand]1,50[/rand]
VIII) WoW. [wow]36942[/wow] 

24.- Ayuda.

Abre una nueva ventana o tab con una guia general sobre el uso de BBcode.


24.5-* Suprimir formateo de texto

Si estan en el modo de vista normal, les aparecera un boton que parece
una letra A azul con un circulo rojo en la esquina inferior derecha.
Este boton le quita todo el formateo que estaba aplicado a un texto.


25.- Oscilar entre modo de edicion.

Si hacen click sobre este boton, la caja de contenido va a cambiear entre ver en 'vivo' las modificaciones que uno va agregando, a exclusivamente texto sin formato. A segun lo que se les ofrezca, puede que algo sea mas sencillo en una forma que la otra. Si por alguna razon en texto o contenido de su post no se ve como querian, es posible porque alguna o varias etiquetas no quedaron en el lugar donde debian.

---

Bueno, con esto concluyo mi guia. Espero que les sirva de ayuda o que les responda algunas preguntas que pudieran tener.