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 StackPathVamos 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 CDNLá 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.
