#QuarantineDaysOfCode - D11 - Construindo um c-o-n-t-a-d-o-r online de caracteres, palavras e linhas
comentada em 05/04/2020 09:45

Vamos dar uma pausa no assunto de APIs pra voltar a falar de web. 

Tive uma ideia, inspirado em uns vídeos que postei aqui, de criar um serviço simples na web e adicionar  adsense do Google na página para rentabilizar a página com publicidade (essas propagandas que vemos em sites diversos). 

Criei a página inspirada nesses c-o-n-t-a-d-o-r-e-s de caracteres que existem por aí, como o Contagem de Caracteres, Palavras e Linhas , e o que criei está hospedado aqui Calculadora de caracteres mas na hora de adicionar o adsense encontrei um probleminha, que me fez precisar de um domínio próprio (tal como o c-ontadorcaracteres.com.br) e o domínio gratuito do GitHub pages tem o {nome do usuário}.github.io/{nome do repositório}. 

Então não seria possível adicionar o adsense no meu site sem um domínio próprio . Tentei buscar domínios gratuitos mas não tive sucesso. 

Sendo assim, vamos desenvolver o nosso projeto e na hora de adicionar o adsense eu só explico as instruções aqui pra gente ficar sabendo como é e num projeto pessoal ORUTUF de algum de vocês basta ter um domínio próprio que será possível adicionar o adsense. 

Vamos usar HTML, em vez de CSS puro eu resolvi usar Bootstrap - um framework CSS - pra ser mais rápido (Bootstrap · The most popular HTML, CSS, and JS library in the world.) e JavaScript para fazer com que os resultados sejam mostrados em tempo real como vimos na página. 

O que o Bootstrap vai me ajudar é que eu poderei estilizar meus elementos no HTML somente adicionando classes nos elementos, sem precisar digitar uma linha de CSS. 



Sim, deu branco enquanto eu digitava hahahaha.

Então, sem mais delongas, vamos abrir uma pasta e adicionar nela um arquivo index.html e um arquivo main.js. Não precisaremos de um arquivo CSS pois usaremos só Bootstrap. 

Ao abrir nosso index.html, vamos precisar adicionar algumas coisas nele. 

Inicialmente, adicione o arquivo main.js logo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Vamos adicionar uma descrição para nosso site dentro do <head>, numa tag <meta>. Essa descrição é o texto que aparece quando procuramos algum site no Google.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Calculadora de caracteres, palavras e linhas em textos"
    />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Agora vamos adicionar algumas palavras chaves. Elas ajudam com que mecanismos de busca consigam achar nosso site mais facilmente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Calculadora de caracteres, palavras e linhas em textos"
    />
    <meta
      name="keywords"
      content="calculadora, caracteres, texto, palavras, linhas"
    />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Agora precisamos adicionar o Bootstrap ao nosso site. Ele pode ser adicionado de algumas formas. Pode tanto ser baixado como uma folha de estilo normal, um arquivo css, como pode ser adicionado por meio de um link de forma direta sem baixar nada. Vou fazer dessa segunda forma.

Busque no Google por Bootstrap CDN que você achará este site:
Quick Start · BootstrapCDN by StackPath

Vamos adicionar o CSS e o JavaScript que o site nos mostra. O código JavaScript é necessário para efetuar algumas animações dentre outras coisas mais. Abaixo do nosso main.js, adicione:

<script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
></script>
<script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
      integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm"
      crossorigin="anonymous"
></script>

E dentro da tag head,adicione o CSS:

<link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

Para o JavaScript do Bootstrap funcionar corretamente precisamos de uma outra dependência que é o jQuery. Não vou entrar em detalhes no que é o jQuery mas ele basicamente é um código que importamos para nosso código JavaScript que nos facilita realizar tarefas no código JavaScript de forma bem menos verbosa do que usando JavaScript puro. 

O jQuery também tem um link CDN, como o Bootstrap. 

Busque por jQuery CDN no Google: jQuery CDN
Lá no site, eu vou pegar a versão 3x no link "slim", que vai me trazer este código que já vou adicionar ao index.html, logo acima do javascript do bootstrap. 

<script
      src="jQuery CDNjquery-3.4.1.slim.js"
      integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
      crossorigin="anonymous"
></script>

Eu ainda preciso importar mais um código de terceiros que é o que vai gerar o símbolo de teclado que temos no nosso título mas vou fazer isso mais pra frente. 

Então, nosso index.html está assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Calculadora de caracteres, palavras e linhas em textos"
    />
    <meta
      name="keywords"
      content="calculadora, caracteres, texto, palavras, linhas"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
    <script
      src="jQuery CDNjquery-3.4.1.slim.js"
      integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
      integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Já tenho tudo necessário para iniciar nosso projeto. Amanhã iremos adicionar o HTML e o CSS usando Bootstrap.