LucasIIGD 4909 Postado Outubro 2, 2019 Introdução Primeiros Passos Criando a Conta Leia as Regras Gerando o script HTML Criando um tópico Finalizando o Guia Conhecendo o HTML Básico Diferenças do HTML para o antigo BBCODE Correlação BBCODE x HTML Tags Jump, Anchor e URL Tag IMG Tag List e * Tags Color e Background Tag Spoiler Tag Caixa Tags Table, TR e TD Tag Cabeçalho Recursos Avançados A Classe Style Tag <div> Trabalhando com Bordas Trabalhando com Tabelas Os atributos Margin e Padding Dicas dos Mestres Tutorial Básico em Vídeo - Por LucasIIGD 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. 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 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 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ção de Coletáveis </strong> </td> </tr> <tr> <td rowspan="2" style="text-align: center; border: 1px solid; vertical-align: center" width="100"> FASE 1 </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ário. </td> </tr> <tr> <td rowspan="3" style="text-align: center; border: 1px solid; vertical-align: center" width="100"> FASE 2 </td> <td style="border: 1px solid;"> <p> 3) Atrá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 à 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 11 3 Compartilhe esta postagem Link to post Share on other sites
Nefeslkin94 19 Postado Outubro 10, 2019 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 A mesma imagem, usando mesmo hotlink porem numa resolução 100x200px Spoiler 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 1 Compartilhe esta postagem Link to post Share on other sites
LucasIIGD 4909 Postado Outubro 10, 2019 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 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, mas enquanto eu editava, ele estava funcionando, que tenso 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. 1 Compartilhe esta postagem Link to post Share on other sites
Nefeslkin94 19 Postado Outubro 10, 2019 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
LoiroCroft 1313 Postado Outubro 10, 2019 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
Her1kr 862 Postado Outubro 16, 2019 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
Cafe-Com-Coca 152 Postado Outubro 17, 2019 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 1 Compartilhe esta postagem Link to post Share on other sites
Her1kr 862 Postado Outubro 17, 2019 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
LoiroCroft 1313 Postado Outubro 17, 2019 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... 1 Compartilhe esta postagem Link to post Share on other sites
Cafe-Com-Coca 152 Postado Outubro 17, 2019 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 1 Compartilhe esta postagem Link to post Share on other sites
Her1kr 862 Postado Outubro 22, 2019 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 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 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? 1 Compartilhe esta postagem Link to post Share on other sites
Cafe-Com-Coca 152 Postado Outubro 22, 2019 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. 1 Compartilhe esta postagem Link to post Share on other sites
Her1kr 862 Postado Outubro 22, 2019 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! 1 Compartilhe esta postagem Link to post Share on other sites
Her1kr 862 Postado Outubro 22, 2019 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> 1 Compartilhe esta postagem Link to post Share on other sites
Her1kr 862 Postado Outubro 22, 2019 @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
LoiroCroft 1313 Postado Outubro 22, 2019 @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
Her1kr 862 Postado Outubro 22, 2019 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
LoiroCroft 1313 Postado Outubro 22, 2019 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
Her1kr 862 Postado Outubro 22, 2019 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
aranhaFEILONG 810 Postado Novembro 23, 2019 Fazer um guia é bem mais complicado do que parece hahahaha Compartilhe esta postagem Link to post Share on other sites
ThePlayer1JR 4 Postado Novembro 27, 2019 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! 2 Compartilhe esta postagem Link to post Share on other sites