[Guia Fórum] - Manual de BBCode

  • Iniciar tópico DeletedUser15309
  • Data de início
Status
Não esta aberto para novas mensagens.

DeletedUser15309

Guest
4CLsQ9Z.png



Manual de BBCode


Índice:
O que é BBCode?
Formatação de textos
Trabalhando com cores e tamanho do textos
Combinação de tags
Citações
Gerando listas
Crianção de links
Adicionando imagens e vídeos
 
Editado por um moderador:

DeletedUser15309

Guest
4CLsQ9Z.png


O que é BBCode?

BBCode é uma linguagem de marcação leve, seu nome é uma abreviação de "Bulletin Board Code". Com um comportamento semelhante ao html 4.0, também se utiliza de etiquetas (tags) para se expressar "
BSPinj5.png
"(em html é
IEDCA35.png
), ex: [codigo] Exemplo [/codigo]. Utilizado em sistemas de fórum, as características que são permitidas dentro desses sistemas, são definidas pelo administrador do fórum, fazendo com que alguns sistemas tenham funcionalidades diferentes, dependendo da necessidade de cada comunidade.

BBCode serve para que você possa formatar seus posts afim de que eles tenham uma boa apresentação.

É importante saber que as tags devem ser sempre construídas, respeitando uma determinada hierarquia

Correto
EnBwxCO.png


Incorreto
e7QOMKk.png
 
Editado por um moderador:

DeletedUser15309

Guest
4CLsQ9Z.png



Formatação de textos

As tags que integram BBCode possibilitam a alteração rápida do estilo de texto básico (padrão do fórum).
Os tipos são:Negrito, Itálico, Sublinhado e Riscado


Texto em Negrito
O texto marcado em negrito deve estar entre as tags:
LTELpRe.png

E será exibido: Negrito
Texto em Itálico
O texto riscado deve estar entre as tags:
lDEdfct.png

E será exibido: Itálico
Texto em Sublinhado
O texto a ser sublinhado deve estar entre as tags:
FmOLpC0.png

E será exibido:Value
Texto Riscado
O texto riscado deve estar entre as tags:
NXJ9kAk.png

E será exibido: Riscado
 

DeletedUser15309

Guest
4CLsQ9Z.png


Trabalhando com cores e tamanho do textos

Assim como no html, BBCode nos possibilita alterar as cores e tamanhos dos textos produzidos dentro dos fóruns e para utiliza-las deve se utilizar as tags
VGG9RR8.png
e
F92lUMn.png
.

Cores
Para se alterar a cor do texto, você deve usar um código em Hexadecimal (ex: #000000) e para se alterar tamanho, basta inserir um valor numérico. é muito importante lembrar que na frente do valor numérico o simbolo # deve ser colocado, pois sem ele a referência de cor não irá funcionar.

As tags para adição de cores em textos devem ser construidas da seguinte maneira:
d8rymSt.png

Será exibido desta maneira: Texto colorido

Tamanho do texto
Para se alterar o tamanho do texto, o princípio é semelhante ao de inserção de cores, porém a diferença é a de que não precisamos de um código em hexadecimal, apenas precisamos acrescer um valor numérico à tag para que tenhamos o resultado desejado. Os alores podem ser do n°1 ao 7 (recomendados por este fórum). Lógico que o contexto deve ser levado em conta, pois exageros podem prejudicar a visualização das informações do post. Coerência é sempre bem vinda.

As tags para adição de taanhos dos textos devem ser construídas da seguinte maneira:
ZYUZzWI.png

Será exibido desta maneira: Tamanho do texto n°6

Tabela de cores em hexadecimal:

Abaixo segue uma tabela com cores em Hexadecimal para que você possa usar como referência na hora de compor os seus textos.


RCyYPoS.jpg
 
Editado por um moderador:

DeletedUser15309

Guest
4CLsQ9Z.png



Combinação de tags.


As tags podem ser combinadas em um mesmo texto, afim de o possibilitar uma formatação mais ampla.

Ex:
7HhXj4h.png


Será exibido assim:
Olá Mundo!


Ao se combinar tags , deve-se tomar cuidado com a herança das tags e colocalas sempre o conjunto uma dentro da outra.

Correto
7HhXj4h.png


Incorreto
3jE3RX9.png


Na maioria dos casos a inversão das tags não acarreta em problemas, mas dependendo das tags e de alguns browsers, esta mistura pode afetar a visualização da formatação desejada, fazendo com que ela não aconteça, então esta é uma medida mais preventiva da correta utilização das tags, é recomendado usar.
 

DeletedUser15309

Guest
4CLsQ9Z.png



Citações.


Ao participar de fóruns, existem momentos em que as palavras de outros participantes são mencionadas no debate. Para esses momentos temos as tags de referência, elas são as
GbATss4.png


Para fazer uma citação apenas de um texto utilizamos dessa maneira:

BZpjsYR.png


O Texto será apresentado assim:




Podemos fazer citação apenas da parte escrita, do nome do autor e do post em que ocorreu a mensagem:

LxCqhXe.png


Pepper disse:
Texto de Pepper



E podemos realizar citação com menção ao autor e com o post que ele criou:

j8vN8oe.png


Ele será exibido desta maneira:

Vamos manter a ordem, a educação e o respeito... afinal rir é um santo remédio!


Veja neste último exemplo que além do autor, ele exibe este simbolo
fGela1n.png
e que ao ser clicado, ele nos envia diretamente ao post mencionado.

Agora, como posso saber se peguei o endereço correto do post?

Para isso temos 2 caminhos:

1° - Ao se responder um tópico e, no rodapé do post clicarmos nesta opção:
UXZfmne.png
,
a ferramenta do fórum automaticamente se encarrega de criar os códigos dentro da caixa de edição de resposta:

GDS4xxd.png



Agora, quando queremos citar um autor em outro tópico, ai devemos ter o endereço do post.
E como conseguimos o endereço do post?

Em todos os posts, temos uma numeração a ser seguida, e se clicarmos nesta numeração:

tpiuUjK.png


ele abrirá o endereço do post em questão, podemos identifica-lo com o número que é exibido no endereço:

G239vFq.png
;

este número deve ser copiado e inserido em seu post, no local correto afim de construir o link para a sua resposta com citação.
 
Editado por um moderador:

DeletedUser15309

Guest
4CLsQ9Z.png



Gerando listas.


Podemos com BBcode gerar listas de dois tipos: listas sem ordem e listas ordenadas.

Lista sem ordem podem ser construidas com as tags
9edRFpw.png
e cada ítem de sua lista é identificado pela marcação
[*]

O Código para a criação de listas sem ordem é similar a este:
cWTNHmR.png


A lista ficará desta maneira:


  • Doar pontos de forge
  • Polir/Motivar
  • Atacar/Saquear


Listas ordenadas são construídas da mesma maneira porém é adicionado a elemento de ordem a ser utilizado:
Numérica:, é aicionado o valor "1" à tag de abertura:
upnU2g0.png


Será exibido desta maneira:

  1. Doar pontos de forge
  2. Polir/Motivar
  3. Atacar/Saquear

Reparem que foi criado uma sequência numérica. Lembrando que quem define se a frase é um item, é o Simbolo "
[*]".


Para criar listas ordenadas e alfabética deverá construir a sua lista com o valor "a" como no exemplo:
3fHlbIz.png


Alfabética:

  • Doar pontos de forge
  • Polir/Motivar
  • Atacar/Saquear
 

DeletedUser15309

Guest
4CLsQ9Z.png



Criação de links


Para criar links você deve utilizar as tags
Drejzzt.png
. Links são endereços de paginas ou de posts. As tags que geram os links servem para reduzir o tamanho das url´s já que algumas podem ultrapassar um tamanho legível, servem como atalhos para uma informação que se deseja.

Podemos usa-la de duas maneiras:

A primeira é com o link direto dentro das tags:
Byq8R7G.png


Ele será exibido assim: http://www.forgeofempires.com

Podemos criar o link usando uma palavra ou uma frase e ela deve ser declarada dessa maneira:
rgSrCLI.png


E irá aparecer assim: Visite o site do FoE

Adicionando imagens e vídeos

Imagens

Para adicionar imagens as tags são
9PHVHMT.png
, basta colocar o endereço da imagem dentro das tags

ex:
nkeLtJT.png


A visualização será esta:
K15BdDD.png


Videos

As tags para inserção de vídeo são
jEbqEKI.png
, e assim como no caso das imagens, o link do vídeo deve ser inserido dentro das tags.

Ex:
pz3vUmr.png


[video=youtube_share;mHyTOcfF99o]http://youtu.be/mHyTOcfF99o[/video]
 
Status
Não esta aberto para novas mensagens.
Topo