Coding 101 (Forumeiros)

TEMPLATES PARA FORUMEIROS: ESTRUTURA BÁSICA

O lugar ideal para construir um template que você usará no Forumeiros seria, é claro, o próprio Forumeiros, mas visto que nem todos possuem um endereço de fórum onde podem postar seus códigos de teste livremente e sem medo de bugar páginas, alguns sites que servem como bons alternativos para visualizar seus códigos são: Scratchpad, Codepen - usado pela Minn -, Tumblr - usado pela Basilton - e W3Schools Online Code Editor. Esses estão longe de serem as únicas opções, mas por nossa staff ter usado esses quatro antes, são os que posso recomendar com mais confiança. Enquanto o Scratchpad lê e oferece uma visualização do código enquanto você digita, no Tumblr e W3S é preciso escrever o código e então clicar para visualizar; em compensação, apenas esses dois últimos possuem a função de salvar o código dentro do próprio site. Ainda assim, minha recomendação quanto ao Forumeiros ser a melhor opção permanece.



A tag <*div> seria como um "recipiente" a ser preenchido com códigos das mais diversas propriedades (por exemplo, background, font, color, etc). Cada <*div> representa uma seção - é possível também incluir várias seções na mesma "div", mas muitas vezes elas são separadas), e mantenha sempre em mente que, uma vez essa tag é aberta, ela sempre deverá ser fechada (<*/div>).

Para customizar uma <*div>, você precisa adicional um "style", tornando então a tag <*div style="PROPRIEDADES DA TAG A SEREM ADICIONADAS"><*/div>. Muito bem, lembre-se desta fórmula, porque é usando ela que construiremos o Template.

fórmula:

Para fazer o fundo do template, você precisa ter em mente duas coisas: o tamanho e a cor. Considerando que todos os outros elementos (título, texto, imagens, etc.) vão estar dentro dessa primeira tag, é bom pensar em como você preencherá o seu template, mas fica como dica pessoal tentar harmonizar os elementos o máximo possível. Por exemplo, não colocar fontes minúsculas em um fundo enorme, e vice versa.

A fórmula para editar o plano de fundo é "background-color: #CÓDIGOHEXADECIMAL; width: LARGURApx; height: ALTURApx;". O código hexadecimal é a sequência de seis caracteres [números e/ou letras] que equivale a uma cor. O site Color Hex te permite brincar com o contador de gotas até alcançar um resultado que seja do seu agrado. Você pode, então, copiar a sequência junto ao símbolo "#" e colar no espaço equivalente a cor.

Weight é o elemento que dirá a largura do seu template, enquanto Height, dirá a altura. Para aqueles que não fazem ideia de qual valor colocarem, tenha em mente que um background com 100px de altura (height) e 100px de largura (width) tem esse tamanho:

fórmula:

OBS: Para uma "div de background", ao invés de estabelecer um valor, eu sugiro colocar "height: auto;". Isso significa que a altura do template ficaria automaticamente flexível,  de forma que você poderia adicionar vários elementos um embaixo do outro sem precisar modificar o número de pixels (px).



Agora que temos um fundo, é hora de dar corpo e função ao template, começando com o elemento de texto. Para tanto, você vai precisar dos seguintes códigos: font-family, font-size, color, text-align, line-height e letter-spacing. Há outras formas de customização de texto em códigos, mas por ser uma lição básica, vamos nos ater primeiro a esses, que são principais.

— FONT-FAMILY: Por agora, vamos usar as fontes mais simples e conhecidas, como Arial, Times New Roman, Calibri, Georgia ou Tahoma, pois elas já são automaticamente processadas, então, para usá-las, basta adicionar o nome. (Por exemplo, "font-family: arial;".)

— FONT-SIZE: Para o corpo do texto, tamanhos entre 10px e 13px ficam melhor. Mas para títulos, depende muito da sua preferência. Vale lembrar que o tamanho do texto leva em consideração aquele que o lê - ou seja, deve acima de tudo ser legível.

— COLOR: Usando o mesmo princípio de quando escolhemos a cor de fundo do template, você escolherá uma cor para o texto usando o código hexadecimal. (Por exemplo, "color: #666666;")

— TEXT-ALIGN: Alinhamento do texto, se à direita (right), à esquerda (left), centralizado (center) ou justificado (justify), da mesma forma que no Word, mas no código, basta adicionar a opção de alinhamento. (Por exemplo, "text-align: justify;")

— LINE-HEIGHT: Espaçamento entre linhas. Pode ser colocado em porcentagem (%) ou pixels (px). Quanto maior o número, mais as linhas estarão separadas. Considere como um valor base 100%  ou 12px.

— LETTER-SPACING: Espaçamento entre letras. No valor 0 pixels ("letter-spacing: 0px;"), a fonte aparece como originalmente é, mas conforme o valor aumenta (1px, 1.5px, 2px, 4px) ou diminui (-0.5px, -1px, 3px, 4px), as letras passam a ficar mais juntas ou separadas.

Na fórmula, essas propriedades estarão da seguinte forma: <*div style="font-family: NOME DA FONTE; font-size: TAMANHODOTEXTOpx; color: #CÓDIGOHEXADECIMAL; text-align: ALINHAMENTODOTEXTO; line-height: ESPAÇAMENTOENTRELINHAS%; letter-spacing: ESPAÇAMENTOENTRELETRASpx;">Lorem ipsum dolor sit amet...<*/div>. A ordem em que esses elementos são colocados não faz diferença aqui.

Agora que temos alguns elementos da nossa tag de texto esclarecidos, que tal fazer um teste?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit nunc vestibulum diam ultricies feugiat. Pellentesque mollis tincidunt tellus, et facilisis tellus porta eu. Aliquam rhoncus eleifend neque, sit amet vulputate magna condimentum elementum. Sed porttitor eleifend arcu, at lobortis nisl tincidunt eget.

fórmula:

Agora, e se juntarmos isso com o que aprendemos no tópico de background? Teríamos o rascunho de um template de postagem, basicamente. Lembrando que a tag de fundo é a primeira e abrange todas as outras, de forma que devemos adicionar a tag de texto dentro da tag de fundo. (Ou seja, ao todo teríamos algo como: <*center><*div style="CÓDIGO DE BACKGROUND"><*div style="CÓDIGO DE TEXTO">Texto<*/div><*/div><*/center>.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit nunc vestibulum diam ultricies feugiat. Pellentesque mollis tincidunt tellus, et facilisis tellus porta eu. Aliquam rhoncus eleifend neque, sit amet vulputate magna condimentum elementum. Sed porttitor eleifend arcu, at lobortis nisl tincidunt eget.

Provavelmente esse não é o resultado que você estava esperando, certo? Isso porque nos falta estabelecer alguma forma de "limite" na tag de texto. Da forma que está, ela estica-se até o tamanho do fundo, e não é assim que a queremos. Logo, você pode usar um dos seguintes códigos:

— PADDING: Pessoalmente falando, é a opção que mais utilizo. Ao criar uma "div de background", basta adicionar um valor de padding e o plano de fundo "se esticará" de acordo, por assim dizer. Por exemplo, um template com 10px de padding (ou seja, "padding: 10px;") na tag de fundo ficaria assim:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit nunc vestibulum diam ultricies feugiat.

fórmula:

Padding também pode ser usado em uma tag de texto. E nesse caso, ao invés do background "se esticar", é o texto que "se encolhe" de acordo com o valor especificado. A seguir, por exemplo, temos um template com 10px de padding na "div de texto".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit nunc vestibulum diam ultricies feugiat.

fórmula:

— MARGIN: Cria uma uma distância entre o texto e os lados do background. Ou seja, o texto "se empurra para dentro" de acordo com o valor atribuído. Com uma margem de 10px, por exemplo, teríamos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit nunc vestibulum diam ultricies feugiat.