Ir para conteúdo
LucasIIGD

Tutorial de Guias - Versão 1.01

Recommended Posts

tUsZbT4.png

 

  1. Introdução
  2. Primeiros Passos
  3. Conhecendo o HTML Básico
  4. Correlação BBCODE x HTML
  5. Recursos Avançados
  6. Dicas dos Mestres
  7. Histórico de Versões do Tutorial

 

► 1. Introdução

 

O motivo deste Tutorial é porque agora estamos operando em uma versão atual do Ipboard, ou seja, não estamos mais usando o bom e velho BBCODE, no lugar dele temos o poderoso e consagrado HTML, a princípio as mudanças podem ser consideradas radicais, mas com o tempo vai perceber que é tudo uma questão de adaptação.

 

Eu sei que existem muitos sites gringos que tem guias ótimos, mas também acredito no potencial da nossa nação gamer, acreditamos que fazer guias é a melhor forma de compartilhar a sua experiência com os jogos, é muito legal quando você conta pra alguém o quão difícil foi conquistar aquela platina, o que você passou, o que você sentiu e como superou aquele desafio. Te convidamos a fazer parte dessa comunidade guiadora, que não tem prazer só nos troféus, mas em compartilhar a melhor forma de obtê-los.

 

Neste tutorial vamos tentar esclarecer ao máximo todas as dúvidas pertinentes à criação de guias, bem como dar dicas para quem já esta no ramo há um tempo. A grande novidade é que este guia não será feito apenas pela minha pessoa, mas sim, por toda a comunidade guiadora do Mypst, veja a seção Dicas dos Mestres para mais detalhes. Bora guiar galera !!!

 

► 2. Primeiros Passos

 

CRIE SUA CONTA NO PORTAL/FÓRUM MYPST

Para isso, basta clicar AQUI e seguir as instruções, basicamente você preencherá alguns dados e fará a confirmação pelo seu e-mail. Esse passo é necessário pois o seu guia será um tópico aqui do fórum, e só pode postar quem tiver uma conta aqui.

 

LEIA AS REGRAS DA SEÇÃO DE GUIAS

Como toda comunidade / fórum, nós também temos regras para melhor atendê-los, clique aqui para acessar o tópico. Seria interessante você também acompanhar este tópico para conhecer a staff do Mypst e saber quem são os analistas de guias, assim você saberá para quem solicitar ajuda.

 

GERANDO O SCRIPT HTML

Esse script HTML nada mais é do que um código HTML pré-definido, o seu guia se baseará nesse código de forma que você não vai precisa escrever o guia do zero. Veja abaixo como é fácil obtê-lo.

 

Existem três maneiras de gerar o script, veja abaixo quais são e como fazer:

 

1) Caso o jogo ainda não tenha guia, basta entrar no portal do Mypst, ir até a página do mesmo e clicar na opção Gerar BBCODE, como podemos ver na imagem abaixo. Clicando nessa opção uma nova página com toda a estrutura do guia vai ser aberta, basta copiar esse conteúdo, colar no fórum e começar a editá-lo, veja mais detalhes no próximo tópico.

 

 

cZxv5B2.jpg

 

Caso o jogo já possua um guia as outras duas maneiras de gera-lo são através da URL da página do game, uma exportando as dicas como na primeira forma e outra sem as dicas, como podemos ver abaixo.

 

2) Para gerar o script com as dicas , basta digitar "/BBcode" ao fim da URL do jogo no portal, exemplo:

http://mypst.com.br/jogos/NPWR12733_00/
http://mypst.com.br/jogos/NPWR12733_00/bbcode

3) Para gerar o script sem as dicas, basta digitar "/bbcode/?dica=0 ao fim da URL do jogo no portal, exemplo:

http://mypst.com.br/jogos/NPWR12733_00/
http://mypst.com.br/jogos/NPWR12733_00/bbcode/?dica=0

 

CRIANDO O TÓPICO

Agora que gerou o script basta selecionar todo o conteúdo e copiá-lo (ou salve em um arquivo txt). Crie o tópico na seção "Guia de Troféus - NOVOS GUIAS", o nome do tópico deve ser: Nome do Jogo - Guia de Troféus [Em Construção] e cole o conteúdo do script HTML, lembre-se de clicar na opção Código-Fonte antes de colar o código. Conforme imagem abaixo:

 

Spoiler

uyVWV40.jpg

 

Caso essa opção não esteja aparecendo basta enviar uma MP (Mensagem Privada) para o nosso ADM @ighorfagundes ou contate um analista de guias.

 

Agora tudo que precisa fazer é editar o guia, procure digitar as informações e ir clicando em Editar tópico para que o fórum salve a sua digitação, ou se preferir e tiver pleno conhecimento de HTML você pode fazer o guia usando um programa editor de texto de sua preferência, como Bloco de Notas ou Notepad++ e colar o conteúdo aqui pra já ir "validando" o seu guia.

 

Lembre-se que é não recomendável usar a visualização do fórum, só o fato de ligar e desligar o botão do Código-Fonte já ajuda a validar seu código HTML, procure sempre desligar o Código-Fonte antes de Editar ou Salvar o seu guia.

 

FINALIZANDO O GUIA

Após fazer as edições necessárias no seu guia, faça uma leitura completa do seu guia e veja se a escrita está correta, se as dicas estão bem compreensíveis, se não faltou algum detalhe importante, se os links ou hyperlinks que você criou estão funcionando de fato e por aí vai.

 

Depois de fazer essa revisão e ver que está tudo OK. Então mude o título do tópico para [Finalizado] Nome do Jogo - Guia de Troféus, copie o link do seu guia, entre nesse tópico e poste o link do seu guia, assim todos os analistas serão notificados para analisar o seu guia.

 

Depois disso é só aguardar a mensagem privada (MP) do analista de guias, nela o analista vai te dizer o que precisa ser ajustado no seu guia para que o mesmo fique adequado às regras vigentes, bem como ele/ela poderá dar dicas para melhorar o seu guia. A partir daí vocês vão irão conversar sobre o guia, procure fazer todas as alterações que o analista pedir e sempre avise-o pela MP que você já terminou os ajustes. Enfim, depois disso o analista vai tomar as providências e finalmente oficializar o seu guia.

 

► 3. Conhecendo o HTML Básico

 

Muito bem, agora é hora de editar o seu guia, recomendo que explore a caixa de edição de fórum, pois nela você conseguirá editar atributos básicos do seu guia, como por exemplo, alinhamento, mudanças na fonte como tamanho, cor, cor de fundo e até mesmo o estilo, além disso poderá usar a opção Spoiler, adicionar emoticons, inserir links e por aí vai.

 

Apesar de tudo isso, a caixa de edição é limitada e para fazer guias precisamos usar aprender um pouco sobre o HTML.

 

O HTML é uma linguagem de programação usada para construir páginas da internet, tudo funciona através das TAGS, cada tag tem um nome diferente e uma função específica, elas seguem a seguinte estrutura:

 

<NOME DA TAG-ABERTURA> CONTEÚDO <NOME DA TAG-ENCERRAMENTO>

 

Para representar isso melhor, vamos usar um texto em itálico, o qual usa a tag <em> ou <i>

 

Código HTML

<em>Texto em Itálico</em> | Texto Normal

Resultado

Texto em Itálico | Texto Normal

Perceba que só o "Texto em Itálico" ficou em Itálico, pois somente ele é que está dentro das tags <em> e </em>. Basicamente 99% de toda a linguagem HTML é assim, perceba também que para encerrar uma tag é necessário colocar a / para o compilador do HTML entender que você está fechando a tag.

 

Então se eu escrever <em> Texto em Itálico <em> vai ficar ERRADO, pois o compilador não vai entender que você fechou a tag <em> e provavelmente seu guia vai bugar ficando todo em itálico.

 

Se você usava o antigo BBCODE já percebeu que o funcionamento é o mesmo, então podemos dizer que você já dominou 50% do HTML. É claro que o Itálico pode ser aplicado usando a caixa de edição do fórum, isto foi apenas um exemplo de uso do HTML.

 

DIFERENÇAS DO HTML PARA O ANTIGO BBCODE

Lembra do que disse antes à respeito do HTML ? sobre 99% se resumir em abrir e fechar tags ? Sim, diferente do BBCODE onde 100% das tags tinham que abrir e fechar, o HTML tem algumas tags onde não é preciso fechar, na verdade eu conheço apenas 3, pode ser que haja mais, mas apenas para efeito de curiosidade são elas <br>, <hr> e <img>

 

Outra diferença em relação ao BBCODE é que no HTML boa parte das tags tem atributos que podem agregar propriedades especiais, vou exemplificar mostrando a tag <a> a qual serve para fazer links, vamos lá.

 

Veja como a tag funciona:

<a href="https://mypst.com.br">PORTAL MYPST</a>

Resultado

PORTAL MYPST

Perceba que para usar a tag <a> tive que usar o atributo href="" o qual indicou a URL que deverá ser aberta ao clicar no link, no caso o portal do Mypst. Esse link te levou para o portal do Mypst, mas atrapalhou completamente a sua leitura né ? tanto que teve voltar a página para continuar lendo, para evitar isso podemos usar outros atributos da tag <a>, como por exemplo: os atributos target e title. 

 

Veja abaixo como usá-los

<a href="https://mypst.com.br" target="_blank" title="Clique aqui para abrir o link em outra janela">PORTAL MYPST</a>

Resultado

PORTAL MYPST

Perceba que agora o link nos emite um aviso ao passar o mouse em cima (caso esteja vendo pelo computador) e nos direciona para o portal em outra aba/janela do navegador. 

 

Acho que podemos concluir o básico do HTML, mas lembre-se essa linguagem é muito simples, mas ao mesmo tempo muito complexa, nem todos os comandos HTML vão funcionar aqui no fórum, até por questões de segurança, mas vale muito a pena explorar e conhecer os atributos de cada tag.

 

► 4. Correlação BBCODE x HTML

 

Nesta seção vamos ver alguns recursos do BBCODE e como eles deverão ser aplicados em HTML. Alguns deles serão bem fáceis, mas outros serão bem avançados, então prepare-se. Para evitar bugs não citarei as tags do BBCODE usando o colchetes "[ ]", ao invés disso vou usar a cor roxa.

 

1) TAGS JUMP, ANCHOR E URL

Essas lindas tags são responsáveis por criar hyperlinks que, ao serem clicados, vão te direcionar para uma parte específica do guia ou para um site, veja o índice desse tutorial por exemplo, quando você clicar no link tutorial você será direcionado para o início dele, e poderá voltar para esta seção se clicar no link 4 - Correlação de BBCODE x HTML. Isso acontece porque nós colocamos uma "ancora" em um determinado trecho do código (tag anchor)  e criamos um hyperlink que direciona para ela (tag jump). Vejamos como essas tags funcionam e seus códigos traduzidos para o HTML.

 

BBCODE da tag anchor

[anchor]Topo[/anchor]

HTML da tag anchor

<p id="Topo"></p>

OBS: Na verdade a tag <p> é apenas um parágrafo, o segredo na verdade está no atributo id o qual atribui um endereço para aquela tag, no caso colocando o endereço com o nome Topo. Esse atributo id pode ser usado em várias tags HTML.

 

Agora vamos para a tag JUMP, veja o BBCODE para essa tag

[jump=Topo]Clique Aqui para voltar ao início do Tutorial[/jump]

Agora veja o HTML.

<a href="#Topo">Clique aqui para voltar ao início do Tutorial</a>

Resultado

Clique Aqui para voltar ao início do Tutorial

 

OBS: Perceba que na verdade a tag <a> do HTML pode equivaler às tags URL e JUMP do BBCODE, tudo depende do conteúdo do atributo href. Vale lembrar que o conteúdo da ID e a referência devem ser exatamente iguais, inclusive nas letras maiúsculas e minúsculas, portanto escrever "TOPO" no anchor e "topo" na jump vai dar erro, tanto no HTML quanto no BBCODE.


Já que falamos da tag URL veja como escrevê-la no BBCODE e no HTML.

 

BBCODE

[url=https://mypst.com.br]Portal Mypst[/url]

HTML

<a href="https://mypst.com.br">Portal Mypst</a>

Resultado

Portal Mypst

 

2) TAG IMG

A tag IMG serve para adicionar imagens ao guia, vejamos a sua aplicação:

 

BBCODE

[img=URL da imagem] OU [img=URL da imagem]

 

HTML

 

<img src="http://forum.mypst.com.br/uploads/emoticons/platinum.png">

 

Resultado

platinum.png

 

OBS: Aparentemente o editor do fórum consegue converter a tag IMG do BBCODE para o HTML automaticamente. Além disso se você copiar o link (URL) de uma imagem na internet, o editor do fórum automaticamente cola a imagem no post. A mesma coisa ocorre com vídeos.

 

3) TAG LIST e * 

Essas tag cria listas e adiciona marcadores, eles podem ser uma bolinha, um número ou uma letra. Pela caixa de edição do fórum você consegue criar listas ordenadas com números ou com marcadores em forma de bolinhas facilmente, vou explanar essa tag apenas para quem tem guias no antigo BBCODE e quiser postar em HTML. Vejamos o funcionamento da tag. 

  

BBCODE (lista com marcador em forma de bolinha)

[list]
[*]Tópico 1[/*]
[*]Tópico 2[/*]
[/list]

HTML

<ul>
  <li>Tópico 1</li>
  <li>Tópico 2</li>
</ul>

Resultado

  • Tópico 1
  • Tópico 2

 

Para criar uma lista ordenada, no BBCODE você usaria a tag list=1 e no HTML você usaria a tag <ol>.

 

 

4) TAGS COLOR E BACKGROUND

Essas tags são para atribuir cor e aplicar um fundo colorido ao texto, estas tags também podem ser reproduzidas usando o editor do fórum. Vejamos como elas funcionam:


BBCODE 

[background=#0000FF][color=#FFFFFF]Texto escrito na cor branca em um fundo azul[/color][/background]

HTML

<span style="background-color:#0000FF; color:#FFFFFF">Texto escrito na cor branca em um fundo azul</span>

 

Resultado

 

Texto escrito na cor branca em um fundo azul

OBS: Na verdade vos digo que o segredo das cores e dos fundos não estão na tag html <span>, mas sim no atributo style e seus sub-atributos background-color e color. Se você usar esses mesmos atributos na tag html <p> vai funcionar da mesma forma.

 

5) TAG SPOILER 

Esta tag serve para contar o final dos filmes, animes e séries que assistimos para ocultar um conteúdo que poderá ser visualizado caso o usuário clique na opção mostrar, no caso dos guias, é obrigatório usar essa tag para ocultar imagens e vídeos, deixando o guia mais objetivo. Esta tag também pode ser reproduzida usando o editor do fórum. Vejamos como ela funciona.

 

BBCODE

[spoiler]Conteúdo dentro do spoiler[/spoiler]

HTML

<div class="ipsSpoiler" data-ipsspoiler="">	
  <div class="ipsSpoiler_header">		
    <span>Spoiler</span>	
  </div>
  <div class="ipsSpoiler_contents">
    Conteúdo dentro do Spoiler
  </div>
</div>

No HTML ficou bem mais complicado né ? Ainda bem que o editor tá aí pra nos ajudar.

 

6) TAG CAIXA

Esta tag serve para dar destaque a um trecho ou uma citação, ela contém um título na linha de cima e, geralmente um textão na linha de baixo, muitos gostam de combiná-la com a tag spoiler. Infelizmente o editor do fórum não tem esse recurso, então se quiserem usá-lo terão de fazer manualmente. Vejamos como fazê-lo.

 

BBCODE

[caixa=TÍTULO DA CAIXA]Conteúdo da Caixa[/caixa]

HTML

<div style="padding:10px;border:1px solid #d8d8d8;background-color:#F7F7F7;">
	<div style="font-weight:bolder;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#d8d8d8;padding-bottom:5px;">
		Título da Caixa
	</div>

	<div style="padding-top:5px;">
		Texto dentro da Caixa.
	</div>
</div>

RESULTADO

 

Título da Caixa
Texto dentro da Caixa

 

OBS: Perceba que esse efeito foi graças ao atributo style que é um atributo de CSS, e sim se você editar as informações você poderá personalizar o cor da fonte, o fundo da caixa, a cor da linha divisória e por aí vai, mas já vou avisando, tenha bom gosto e requinte, use com moderação. O uso da Caixa não é recomendado, pois a visualização dela em temas escuros não fica legal, caso queira utilizá-la mesmo assim, recomendo que retire o atributo background-color.

 

7) TAG TABLE, TR E TD

Com essas tags podemos criar tabelas, as tabelas são úteis para organizar diversas informações, essa tag precisa ser digitada manualmente, vejamos como funciona:

 

BBCODE

[table] 
 [tr] 
  [td] 
   Linha 1, Coluna 1.
  [/td] 
  [td] 
   Linha 1, Coluna 2.
  [/td] 
 [/tr] 
 [tr] 
  [td]
   Linha 2, Coluna 1.
  [/td] 
  [td] 
   Linha 2, Coluna 2.
  [/td] 
 [/tr] 
[/table] 

HTML

<table border="1">
 <tr> 
  <td> 
   Linha 1, Coluna 1.
   </td> 
  <td> 
   Linha 1, Coluna 2.
  </td> 
 </tr> 
 <tr> 
  <td>
   Linha 2, Coluna 1.
  </td> 
  <td>
   Linha 2, Coluna 2.
  </td> 
</tr>
</table>

RESULTADO

 

Linha 1, Coluna 1. Linha 1, Coluna 2.
Linha 2, Coluna 1. Linha 2, Coluna 2.

 

OBS: O editor do fórum cria a tag <tbody> a qual acredito que sirva para aplicação de estilos por toda a tabela, mas com a vinda so CSS a tag acaba se tornando obsoleta. Para que a tabela tenha linha, é necessário usar o atributo border=1 na tag table. Usar a tabela sem linhas pode ser um recurso bem avançado e ajuda bastante com o alinhamento das informações.

 

8) TAG CABEÇALHO

Essa tag serve para adicionar uma linha acima e/ou abaixo de um texto, ela tinha 4 variações no BBCODE, vamos reproduzi-las em HTML, caso queira utilizá-las.

 

Veja todos os modelos em BBCODE

[cabecalho1=0000FF]Cabeçalho 1 (azul) com linha simples acima e abaixo[/cabecalho1]

[cabecalho2=00FF00]Cabeçalho 2 (verde) com linha dupla acima e abaixo[/cabecalho2]

[cabecalho3=FF0000]Cabeçalho 3 (vermelho) com linha simples abaixo[/cabecalho3]

[cabecalho4=FF00FF]Cabeçalho 4 (roxa) com linha dupla abaixo[/cabecalho4]

Agora veja em HTML

<div style="border-bottom: 4px solid #0000FF; border-top: 4px solid #0000FF;">
	Cabeçalho 1 (azul) com linha simples acima e abaixo.
</div>

<div style="border-bottom: 4px double #00FF00; border-top: 4px double #00FF00;">
	Cabeçalho 2 (verde) com linha dupla acima e abaixo.
</div>

<div style="border-bottom: 4px solid #FF0000;">
	Cabeçalho 3 (vermelha) com linha simples abaixo.
</div>

<div style="border-bottom: 4px double #AAAAAA; width:100%;">
	Cabeçalho 4 (cinza) com linha dupla abaixo.
</div>

 

Resultado

 

Cabeçalho 1 (azul) com linha simples acima e abaixo.

 

Cabeçalho 2 (verde) com linha dupla acima e abaixo.

 

Cabeçalho 3 (vermelha) com linha simples abaixo.

 

Cabeçalho 4 (cinza) com linha dupla abaixo.

 

 

► 5. Recursos Avançados

 

Agora que conseguimos reproduzir alguns recursos do BBCODE, neste tópico vamos abordar alguns recursos exclusivos do HTML que vão deixar seus guias muito profissionais. Vale a pena lembrar que eu não sou programador e muito menos um expert no assunto, vou apenas explicar aquilo que aprendi nos meus testes aqui no fórum.

 

A CLASSE STYLE

Este poderoso atributo (também conhecido como classe) pode aplicar estilo em boa parte das tags HTML, os estilos que podem ser criados são incríveis, eu diria que se dominar esta tag, nem a estratosfera será o seu limite. Vejamos como esse atributo funciona.

 

HTML

<div style="text-align:center; color:#FFFFFF; background-color:#444444; font-size: 16px">
  O texto aqui estará centralizado, na cor branca, com fundo cinza escuro e com fonte tamanho 16.
</div>

Resultado

 

O texto aqui estará centralizado, na cor branca, com fundo cinza escuro e com fonte tamanho 16.

 

Perceba que aqui atribuímos diversos estilos no conteúdo da tag div, mudamos o alinhamento a cor da fonte, a cor de fundo e o tamanho da fonte, de maneira genérica informamos esse atributo da seguinte forma:

style="nome_atributo1: valor1; nome_atributo2: valor2; ... nome_atributoX: valorX"

Para uma lista completa de estilos que podem ser alterados, basta clicar aqui.

 

TAG <DIV>

Esta linda tag cria uma espécie de "divisão" na página, tudo que estiver dentro da tag DIV sofrerá os estilos aplicados nela, essa tag aplica os recursos na largura da pagina e não somente na extensão do conteúdo como acontece com a tag <span> ou <p>, veja um exemplo:

 

HTML

<div style="color:#FF0000; background-color:#CCCCCC;">
  O conteúdo da tag div ficará escrito em vermelho com um fundo cinza que vai até o final da largura da página.
</div>
<span style="background-color: #CCCCCC; color:red;">
O conteúdo da tag span ficará em vermelho e o fundo cinza se estenderá somente ao texto.
</span>

Resultado

 

O conteúdo da tag div ficará escrito em vermelho com um fundo cinza que vai até o final da largura da página.

 

O conteúdo da tag span ficará em vermelho e o fundo cinza se estenderá somente ao texto.

 

Isso é só um exemplo do que você pode fazer com a tag div, há muitos outros recursos e estilos a serem explorados, veremos isso mais adiante.

 

TRABALHANDO COM BORDAS

Utilizar bordas é um recurso muito bacana para dar um destaque a um título ou um trecho do guia. Vejamos como utilizá-lo.

 

HTML

<div style="border: solid 1px #FF0000;">Título envolto em uma borda vermelha e com tamanho de 1 pixel</div>

Resultado

 

Título envolto em uma borda vermelha e com tamanho de 1 pixel

 

Perceba que dentro do atributo border temos sub-atributos que determinam o TIPO (solid), TAMANHO (1px)  e COR (#FF0000) das bordas. Eu usei a borda na tag div para que ela ocupasse a página toda ao invés do texto.

 

Os tipos de borda que você pode usar são: solid, double, dotted, dashed, groove, ridge, inset e outset. Teste cada tipo de borda e use a que mais lhe agradar, caso queira ver o resultado dessas bordas clique aqui.

 

Particularmente eu amei a borda do tipo outset, graças a ela eu pude fazer esse cabeçalho com um fundo azul e com a escrita na cor branca, aquela onde está escrito ► 5. Recursos Avançados. Veja como eu fiz:

 

HTML

<div id="Avançado" style="border: 5px outset #105DB4; background-color: #105DB4">
	<span style="color:#FFFFFF;"><span style="font-size:20px;"><strong>► 5. Recursos Avançados</strong></span></span>
</div>

O atributo id serve para que o link no índice funcione e me traga direto para esse tópico. Repare que os sub-atributos da tag border podem estar em qualquer ordem, além disso eu coloquei um fundo da mesma cor da borda para obter este efeito incrível, dentro da div eu simplesmente usei os recursos da caixa de edição do fórum, eu mudei a cor da fonte o tamanho dela e usei negrito, simples assim.

 

Também é possível aplicar bordas e formatá-las individualmente, usando os atributos border-top, border-bottom, border-left e border-right, mas recomendo que não faça isso, senão seu guia poderá se transformar em um carnaval.

 

Caso queira usar bordas arredondadas use o atributo border-radius e defina a curvatura em pixels, veja como funciona:

 

HTML

<p style="border: solid 1px; border-radius: 5px;">
  Bordas Arredondadas
</p>

RESULTADO

 

Bordas arredondadas.

 

TRABALHANDO COM TABELAS

Ah as tabelas, elas são amplamente usadas para organizar as informações, vejamos um exemplo de aplicação de tabela:

 

Relação de Coletáveis  
Fase 1 1) Dentro da sala de jogos, embaixo da mesa de sinuca.
  2) Em cima do armário.
Fase 2 3) Atrás do muro pichado
  4) Em cima do carro roxo.
  5) Um pouco antes do chefe à direita.

 

Veja como as informações ficam mais organizadas, apesar disso a tabela acima ainda está esteticamente um pouco desajeitada, não acha ? Vamos melhorá-la então !!! Veja essa nova tabela abaixo:

 

Relação de Coletáveis 
 FASE 1 

1) Dentro da sala de jogos, embaixo da mesa de sinuca.

2) Em cima do armário.
 FASE 2 

3) Atrás do muro pichado.

4) Em cima do carro roxo.
5) Um pouco antes do chefe à direita.

 

Podemos perceber que a segunda tabela está bem mais organizada, o título está mesclado e centralizado, as fases estão mescladas e centralizadas na vertical e na horizontal e o texto está mais "afastado" das bordas, gerando uma visualização melhor. Veja abaixo o código HTML e alguns atributos que foram usados nessa tabela.

 

Spoiler

<table cellpadding="5" width="100%">

   <tbody>

      <tr>

         <td colspan="2" style="text-align: center; border: 1px solid;"> <strong>Rela&ccedil;&atilde;o de Colet&aacute;veis&nbsp;</strong> </td>

      </tr>

      <tr>

         <td rowspan="2" style="text-align: center; border: 1px solid; vertical-align: center" width="100"> &nbsp;FASE 1&nbsp; </td>

         <td style="border: 1px solid;"> <p> 1) Dentro da sala de jogos, embaixo da mesa de sinuca. </p> </td>

       </tr>

       <tr>

         <td style="border: 1px solid;"> 2) Em cima do arm&aacute;rio. </td> </tr> <tr> <td rowspan="3" style="text-align: center; border: 1px solid; vertical-align: center" width="100"> &nbsp;FASE 2&nbsp; </td>

         <td style="border: 1px solid;"> <p> 3) Atr&aacute;s do muro pichado. </p> </td>

      </tr>

       <tr>

         <td style="border: 1px solid;"> 4) Em cima do carro roxo. </td>

       </tr>

        <tr>

         <td style="border: 1px solid;"> 5) Um pouco antes do chefe &agrave; direita. </td>

       </tr>

   </tbody>

</table>

 

cellpadding="5" - este atributo é responsável por deixar o texto um pouco mais afastado das bordas da células da tabela, pode ser usado na tag <table>, caso queira aplicar na tabela toda ou na <td> caso queira aplicar apenas em uma célula. O número significa a distância em pixels, ou seja, neste caso temos 5 pixels de distância.

 

width="100%" ou width="100" - este atributo define a largura da tabela (usando na tag <table>) ou da célula (usando na tag <td>), o valor pode ser em percentual ou em pixels. Se este atributo não for definido a tabela se ajustará de acordo com o conteúdo inserido nela, use o tamanho 100% para que ela ocupe toda a largura da tela, nesta tabela acima, foi usado 100% na tabela (tag <table>) e tamanho de 100 pixels na primeira coluna <, para que a visualização fique melhor no celular. 

 

colspan="2" - este atributo é usado na tag <td> e serve para mesclar colunas, ele foi usado no título RELAÇÃO DE COLETÁVEIS, assim o título ocupa as duas colunas, mas é visualizado como se fosse uma só. O número significa quantas colunas serão mescladas, no exemplo acima, serão mescladas apenas duas colunas.

 

rowspan="2" - mesma coisa do colspan, mas serve para mesclar linhas, ele foi usado nos títulos FASE 1 e FASE 2. O número significa quantas linhas serão mescladas, no exemplo acima, o FASE 1 usou rowspan="2" para mesclar 2 linhas e o FASE 2 usou rowspan="3" para mesclar 3 linhas.

 

OBS: O atributo border deve ser usado na tag <table> porém, infelizmente ele buga em alguns temas, então para evitar maiores problemas eu usei a tag/atributo style e apliquei uma borda em cada célula, além disso usei os sub-atributos vertical-align e text-align para centralizar os títulos FASE 1 e FASE 2. Com o atributo style você pode até pintar as bordas da tabela.

 

Se você der uma pesquisada no Google você encontrará sites que geram o código HTML da tabela automaticamente, isso ajuda bastante, pois construir uma tabela do zero é bem trabalhoso. Só não esqueça de aplicar bem os atributos.

 

OS ATRIBUTOS MARGIN E PADDING

Esses atributos são bem legais pois eles são capazes de criar um espaçamento (também podemos chamar de margem) externo (margin) e interno (padding) no elemento que estiver usando. Vamos usar alguns exemplos práticos para explicá-los melhor. Veja o texto abaixo:

 

Este parágrafo está sem margem, ou seja o texto está muito próximo da borda e ela ocupa a largura total da página.

 

Agora vamos aplicar o atributo margin nesse mesmo contexto.

 

Este parágrafo está com margem exterior no tamanho de 25px, ou seja tanto o texto como a borda estão menores em relação ao exemplo anterior e não ocupam a largura total da página.

 

Agora vejamos um exemplo usando o atributo padding nesse mesmo contexto.

 

Este parágrafo está com uma margem interna no tamanho de 25px, ou seja o texto está distante da borda, mas ela ocupa a largura total da página.

 

► 6. Dicas dos Mestres

 

Esta seção nada mais é do que um espaço onde os guiadores mais experientes compartilham suas técnicas avançadas de guiagem e escrita, assim todos nós temos a oportunidade de aprender algo novo e melhorar a qualidade dos nossos guias.

 

Esta seção funcionará da seguinte forma, caso você ou algum guiador queira compartilhar alguma dica bacana para os guias, você deverá postá-la aqui no tópico mesmo, procure ser o mais didático possível, mostrando o código (usando a opção Código do editor do fórum) e o resultado dele. Se a dica for boa, ela será postada aqui e você receberá os devidos créditos.

 

Se você viu um guia que usou uma técnica bacana e decidiu compartilhá-la procure indicar a fonte da sua inspiração. Lembre-se que, só irá receber os créditos quem tiver a humildade de postar aqui no tópico. Por exemplo: Fulano A, fez algo bacana, mas o Fulano B é quem postou, então os créditos serão dados ao Fulano B, no entanto, seria muito cortês se o Fulano B mencionasse o Fulano A.

 

Agora é só aguardar as dicas dos profissas, quero aprender coisas novas !!!

 

TUTORIAL BÁSICO EM VÍDEO - Por LucasIIGD

Fala galera, a pedido de alguns colegas do fórum eu resolvi fazer um vídeo na verdade eu gravei a tela do meu notebook mostrando como fazer um guia básico, pegando o script do portal e criando o tópico aqui no fórum, não precisa seguir canal e nem dar like, mas se puder, compartilhe o vídeo com outros gamers, assim quem sabe mais pessoas se interessem por essa incrível arte que é escrever guias. Lembrem-se Platinar é Moda, Guiar é Foda !!!

 

Chega de conversa fiada, segue abaixo o vídeo, em spoiler:

Spoiler

 

 

► 7. Histórico de Versões do Tutorial

 

Nesta seção vou detalhar as alterações que forem feitas no Tutorial.

 

Versão 1.01

- Adicionado o vídeo do Tutorial Básico

 

 

  • Curtir 11
  • Esplêndido 3

Compartilhe esta postagem


Link to post
Share on other sites

HTML é bem mais robusto que o BBcode, mas ai tem isso de ser um pouco mais complicada no inicio, com o tempo o povo pega jeito, tenho umas dicas para postar, só que não to lembrando de todas, mas colocando aqui se puder

1. Você quer colocar uma imagem no seu guia, porém ele é muito grande, e você ou não sabe, ou está com preguiça de fazer um redimensionamento, é só usar:

 

<img src="AQUI VOCÊ ADICIONA O LINK DA IMAGEM" alt="AQUI VOCÊ PODE DESCREVER A IMAGEM, NÃO É OBRIGADO" style="width:LARGURA; height:ALTURA;" />

 

 

Aqui um exemplo dentro do spoiler, uma imagem aleatória da interwebs com resoluçã de 1440 x 810:

 

Spoiler

spacer.png



A mesma imagem, usando mesmo hotlink porem numa resolução 100x200px

 

Spoiler

DEV CONSOLE DO PS5 MUITO FEIO, CARALHOOOOOOOO

 

só clicar com botão esquerdo do mouse e verificar que o link das imagens nos spoilers são iguais.




Não sei se da pra ativar isso de alterar resolução de imagem nesse CMS de fórum, tem alguns que da pra fazer isso no próprio editor.


EDIT: Parece que o código de alterar resolução não funcionou depois de enviar o comentário o fórum colocou tudo em auto, mas enquanto eu editava, ele estava funcionando, que tenso :foreverAlone:

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites
29 minutos atrás, Zarohpyel disse:

HTML é bem mais robusto que o BBcode, mas ai tem isso de ser um pouco mais complicada no inicio, com o tempo o povo pega jeito, tenho umas dicas para postar, só que não to lembrando de todas, mas colocando aqui se puder

1. Você quer colocar uma imagem no seu guia, porém ele é muito grande, e você ou não sabe, ou está com preguiça de fazer um redimensionamento, é só usar:

 


<img src="AQUI VOCÊ ADICIONA O LINK DA IMAGEM" alt="AQUI VOCÊ PODE DESCREVER A IMAGEM, NÃO É OBRIGADO" style="width:LARGURA; height:ALTURA;" />

 

 

Aqui um exemplo dentro do spoiler, uma imagem aleatória da interwebs com resoluçã de 1440 x 810:

 

  Mostrar conteúdo oculto



A mesma imagem, usando mesmo hotlink porem numa resolução 100x200px

 

  Mostrar conteúdo oculto




Não sei se da pra ativar isso de alterar resolução de imagem nesse CMS de fórum, tem alguns que da pra fazer isso no próprio editor.


EDIT: Parece que o código de alterar resolução não funcionou depois de enviar o comentário, mas enquanto eu editava, ele estava funcionando, que tenso :foreverAlone:

 

Aparentemente funcionou sim, pois a primeira imagem demorou horrores pra abrir, já a segunda abriu rapidão. (não se isso tem a ver).

 

Se realmente funcionar, eu coloco na opção DICAS DOS MESTRES, confirma aí certinho, vlw.

  • Esplêndido 1

Compartilhe esta postagem


Link to post
Share on other sites

O Código funciona, porém o fórum muda tudo para auto quando enviamos o comentário, porém se clicar duas vezes em cima da imagem abre uma tela de edição para trocar a resolução da imagem, então acho que não é preciso colocar esse código, o próprio fórum tem a ferramenta para isso.

Sobre a imagem carrega rápido, esse código não compacta a imagem, se tu colocar uma imagem com 1000x1000 e colocar para dimuir para 100x100 o navegador vai carregar a imagem original de 1000 e só vai redimensionar para 100x100

Compartilhe esta postagem


Link to post
Share on other sites

Durante a edição, mantenha o CTRL pressionado e clique sobre uma imagem com o botão direito do mouse (Ou clique duas vezes sobre a imagem, como disse o @Zarohpyel).

Selecione "Editar Imagem" e em "Tamanho", desmarque a opção "Manter proporção original".

Modifique a altura e largura como desejar e clique em "Atualizar".

Compartilhe esta postagem


Link to post
Share on other sites

Eu tenho uma dúvida: Qual o código para inserção de vídeos do YouTube em um guia?

Compartilhe esta postagem


Link to post
Share on other sites
6 minutos atrás, Her1kr disse:

Eu tenho uma dúvida: Qual o código para inserção de vídeos do YouTube em um guia?

Tem que gerar manualmente pelo youtube. basta ir na barra de compartilhar vídeo no youtube, e depois na barra incorporar.

 

Aqui tem um miniguia para esse tipo de código específico:

 

https://support.google.com/youtube/answer/171780?hl=pt-BR

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites
6 minutos atrás, Cafe-Com-Coca disse:

Tem que gerar manualmente pelo youtube. basta ir na barra de compartilhar vídeo no youtube, e depois na barra incorporar.

 

Aqui tem um miniguia para esse tipo de código específico:

 

https://support.google.com/youtube/answer/171780?hl=pt-BR

 

Sim, sobre a incorporação eu já tinha conhecimento. A minha dúvida era mesmo em que 'região' do código eu poderia inserir esse código de vídeo, sabe? Sem medo de quebrar algum código específico e acabar estragando metade ou todo um guia.

Compartilhe esta postagem


Link to post
Share on other sites
19 minutos atrás, Her1kr disse:

 

Sim, sobre a incorporação eu já tinha conhecimento. A minha dúvida era mesmo em que 'região' do código eu poderia inserir esse código de vídeo, sabe? Sem medo de quebrar algum código específico e acabar estragando metade ou todo um guia.

 

O que você pode fazer é colocar tipo uma marcação no editor (Código-Fonte desligado), tipo "INSERIR AQUI". Depois alterna para o Código-Fonte e substitui a marcação pelo código de vídeo. Depois desliga o Código-Fonte novamente e o vídeo vai estar lá... Aí é só centralizar, colocar em spoiler...

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites

 Exatamente o que o Loiro disse, eu geralmente coloco uma sequência numérica para substituir, principalmente quando eu vou colocar em spoiler e centralizado:

 

EX:

 

 

Spoiler

123456789

 

Ai eu troco pelo modo manual e altero colocando o link já direcionado do YouTube. Ai não tem risco de perder ou quebrar as linhas do html 

 

spacer.png

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites
Em 16/10/2019 em 21:41, Cafe-Com-Coca disse:

 Exatamente o que o Loiro disse, eu geralmente coloco uma sequência numérica para substituir, principalmente quando eu vou colocar em spoiler e centralizado:

 

EX:

 

 

  Mostrar conteúdo oculto

 

Ai eu troco pelo modo manual e altero colocando o link já direcionado do YouTube. Ai não tem risco de perder ou quebrar as linhas do html 

 

spacer.png

 

Opa, perdão pela demora. Sim, eu havia feito isso e agora mesmo acabei de inserir vídeo nos meus guias. Mas surgiu um porém... Eu coloquei os vídeos em spoilers, mas quando eu relevo eles, os vídeos "empurram" a caixa do spoiler para fora da linha central de textos e etc [talvez fosse melhor você visualizar esse problema]. 

 

Sabe me dizer qual dimensão serviria para inserir os vídeos nas caixas de spoiler?

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites
16 minutos atrás, Her1kr disse:

 

Opa, perdão pela demora. Sim, eu havia feito isso e agora mesmo acabei de inserir vídeo nos meus guias. Mas surgiu um porém... Eu coloquei os vídeos em spoilers, mas quando eu relevo eles, os vídeos "empurram" a caixa do spoiler para fora da linha central de textos e etc [talvez fosse melhor você visualizar esse problema]. 

 

Sabe me dizer qual dimensão serviria para inserir os vídeos nas caixas de spoiler?

Você pode colocar eles dentro de uma tabela, talvez resolva o problema de resoluções, tipo eu vi nos meus outros guias pelo celular a proporção está muito alta, vou ter que coloca-los em tabelas para realizar justamente esse ajuste. mas também tem a configuração de resolução, o problema é achar a linha de programação certo para auto ajuste, se alguém souber e puder deixar para nós.

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites
5 minutos atrás, Cafe-Com-Coca disse:

Você pode colocar eles dentro de uma tabela, talvez resolva o problema de resoluções, tipo eu vi nos meus outros guias pelo celular a proporção está muito alta, vou ter que coloca-los em tabelas para realizar justamente esse ajuste. mas também tem a configuração de resolução, o problema é achar a linha de programação certo para auto ajuste, se alguém souber e puder deixar para nós.

 

Uma tabela seria muito bem-vinda, mas o problema é colocar:[Tabela>Spoiler>Vídeo<Spoiler<Tabela] ou [Spoiler>Tabela>Video<Tabela<Spoiler] 

e acabar por estragar a harmonia do guia mesmo.

 

Sobre a proporção do vídeo, eu tentei desde 360p até 1080p e todas elas ficaram desproporcionais, eu cheguei até a incorporar o background do spoiler para ver se nos códigos aparecia a dimensão de pixel e mesmo assim não tinha nada útil.

Mas enfim, vou testar a tua sugestão da tabela e já te dou um toque!

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites

Tomando a liberdade... é válido ressaltar que os vídeos que eu incorporei ficaram em Height: 480 x Wight: 1351 dentro do Spoiler.

 

Código de um vídeo incorporado APLICADO [Guia: Resident Evil CODE: Veronica X]: H480xW1351.

Spoiler

 


<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="480" id="ips_uid_1141_3" src="https://www.youtube.com/embed/rAlpzKSiVg0" width="1351"></iframe>

 

 

Código de um vídeo incorporado NÃO APLICADO [PlayStation 4 - Youtube]: H729xW410.

Spoiler

 


<iframe width="729" height="410" src="https://www.youtube.com/embed/x7QhUL8NUK4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

 

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites

@LoiroCroft @Cafe-Com-Coca

 

Amigos, obrigado pelo lembrete anterior sobre a incorporação do vídeo. Sobre a proporção recomendada para colocar um vídeo dentro de um Spoiler, Tabela ou Caixa é de (Height)500x900(Widght), é possível diminuir ela também por 300x600 (invertido ao head dos Guias), ou aumentá-lo caso desejem.

 

<iframe width="900" height="500" src="https://www.youtube.com/embed/x7QhUL8NUK4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Exemplo da dimensão 500x900:

Spoiler

 

Válido ressaltar: o código da incorporação se altera após aplicar ele em um tópico, e a linha de código muda também, mas acredito que saibam qual o valor correto para altura e largura.

Compartilhe esta postagem


Link to post
Share on other sites

@Her1kr

 

O problema é que no Smartphone, este código e esta resolução, cortou quase 2/3 do vídeo na posição vertical e quase a metade na horizontal.

Compartilhe esta postagem


Link to post
Share on other sites
2 minutos atrás, LoiroCroft disse:

@Her1kr

 

O problema é que no Smartphone, este código e esta resolução, cortou quase 2/3 do vídeo na posição vertical e quase a metade na horizontal.

 

Eu já esperava por esse problema no smartphone, esse vai demandar mais tempo para corrigir, visto que têm que ficar harmonioso tanto no PC quanto no SP. Infelizmente o HTML não padroniza a proporção como o BBCode fazia.

Compartilhe esta postagem


Link to post
Share on other sites
6 minutos atrás, Her1kr disse:

 

Eu já esperava por esse problema no smartphone, esse vai demandar mais tempo para corrigir, visto que têm que ficar harmonioso tanto no PC quanto no SP. Infelizmente o HTML não padroniza a proporção como o BBCode fazia.

 

O que eu estou fazendo é o seguinte... durante a edição (Código-Fonte desligado) eu clico no ícone do olho (No menu de edição) para adicionar um Spoiler.

Depois eu colo o link de um vídeo com CTRL + SHIFT + V (Assim o vídeo carrega automaticamente) e fica de boa no PC e no Smartphone.

Compartilhe esta postagem


Link to post
Share on other sites
1 minuto atrás, LoiroCroft disse:

 

O que eu estou fazendo é o seguinte... durante a edição (Código-Fonte desligado) eu clico no ícone do olho (No menu de edição) para adicionar um Spoiler.

Depois eu colo o link de um vídeo com CTRL + SHIFT + V (Assim o vídeo carrega automaticamente) e fica de boa no PC e no Smartphone.

 

Tá aí o meu problema: eu utilizo o Opera, e quando eu uso esse código, ele literalmente abre a página "home" do meu navegador, dai sou obrigado a usar o botão direito do mouse para colar sem-formatação (que parece não funcionar).

 

Mas vou tentar fazer isso que tu recomendou em outro navegador assim que eu baixar e te dou um toque.

Compartilhe esta postagem


Link to post
Share on other sites

Acredito que não tenham comentado, mas tem uma maneira de ajudar na "pré-visualização" do guia.

 

Um arquivo HTML pode ser aberto por qualquer navegador, basta você salvar uma cópia do seu arquivo .txt com a extensão .html.

Exemplo arquivo original: Guia.txt 

Salvar como: Guia.html

Dê um click duplo no seu arquivo HTML para abri-lo.

 

Qualquer dúvida é só dar um toque!

  • Curtir 2

Compartilhe esta postagem


Link to post
Share on other sites

Crie uma conta ou entre para comentar

Você precisa ser um membro para fazer um comentário.

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×
×
  • Criar Novo...