20 de Fevereiro de 2020

Fundamentos do desenvolvimento web

Tudo que temos de decidir é o que fazer com o tempo que nos é dado.
Gandalf - O Senhor dos Anéis: A Sociedade do Anel

Esse post é sobre as tecnologias utilizadas para construir uma página Web: HTML, CSS e JavaScript. Se você ainda não sabe como construir páginas Web e gostaria de aprender, acredito que esse post é um bom local de partida.

O próximo tópico é opcional. Você pode pulá-lo sem que isso prejudique o entendimento dos demais.

Uma breve história da Internet

A Internet que conhecemos hoje começou a ser concebida em 1960. Nessa época, os computadores normalmente ocupavam uma sala inteira e eram caros. Dificilmente uma organização teria orçamento e espaço físico para atender vários projetos que necessitassem utilizar um computador de alto desempenho. Em razão disso, investigações começaram a ser feitas para interconectar usuários com uma tela e um teclado a um computador centralizado. Inicialmente, o objetivo era compartilhar recursos computacionais. Como consequência, algumas pessoas viram o potencial de compartilhar também informação entre os computadores.

Depois de anos e várias pesquisas, por volta de 1990 Tim Berners Lee desenvolveu a Internet conhecida como World Wide Web, WWWW ou só Web. Com esse sistema é possível transmitir documentos pela Internet de um servidor para um navegador (browser) usando um endereço de identificação. Na imagem abaixo podemos ver o primeiro computador utilizado como servidor Web. Detalhe para o adesivo colado: "This machine ia a server do not power it down!!" (Tradução livre: "Essa máquina é um servidor, não a desligue").

Fonte: [1]

Com o passar dos anos e, principalmente, depois de 1995 a Internet se tornou bastante popular e cresce a cada ano. Apesar de termos uma sensação de que todo mundo hoje em dia acessa a Internet, a International Telecommunication Union (ITU) estima que em 2019 53.6% da população mundial teve acesso a Internet [2]. Isso significa que quase metade da população mundial não teve acesso a Internet. Em porcentagem, o Brasil está em 83º com 67.47% da população com acesso a Internet [3].

HTML

HTML (Hypertext Markup Language ou em português Linguagem de Marcação de Hipertexto) é linguagem de marcação para criar páginas Web sendo possível referenciar outras páginas ou partes da própria página por meio de hyperlinks ou simplesmente links. Para visualizarmos um documento HTML utilizamos um navegador (browser). Quando, por exemplo, acessamos um site, o navegador faz uma requisição para o servidor Web, este envia uma cópia do documento e o navegador exibe o conteúdo desse documento. Também é possível exibir no navegador um documento que esteja armazenado na própria máquina do usuário (locamente).

Segundo Forouzam [4] no livro Comunicação de Dados e Redes de Computadores, O termo "linguagem de marcação" teve origem no setor de publicação de livros. Antes de montar e imprimir um livro, um revisor lia o manuscrito e inseria marcações para informar ao autor como o texto seria formatado e visualizado. Por exemplo, para colocar uma linha em negrito o revisor desenhava uma linha ondulada sob essa parte.

Partindo dessa ideia, ao escrever um documento HTML estamos preparando os dados para serem interpretados e formatados pelo navegador utilizando marcações (tags, em inglês). Quais os dados que uma página Web pode ter? Para citar alguns: título, parágrafo, imagem, links, dados tabulados, lista e muitos outros. Para cada tipo de dado temos que usar uma tag adequada para que o navegador saiba o que exibir para o usuário. Dessa forma, ao construir uma página HTML estamos definindo o significado e estrutura do conteúdo.

Suponha que você esteja escrevendo uma página Web justamente para explicar o que é HTML. O conteúdo a ser inserido é:

O que é HTML?

HTML é uma linguagem de marcação.

Analisando esse conteúdo podemos identificar dois elementos: título e corpo. Vamos começar colocando uma tag para identificar que a frase "O que é HTML?" é o título principal da página que está sendo criada. Para isso utilizamos a tag h1.

<h1>O que é HTML?</h1>

O título foi identificado com uma tag de abertura e uma tag de fechamento. A tag de abertura consiste no nome do elemento (que nesse caso é h1) entre os símbolos < (menor que) e > (maior que). Já a tag de fechamento consiste no nome do elemento entre os símbolos </ e >. Assim, temos a tag de abertura, conteúdo e tag de fechamento, que é chamado do elemento HTML.

A segunda parte do conteúdo será identificada como um parágarfo. Para isso utilizamos a tag "p".

<p>HTML é uma linguagem de marcação.</p>

Até o momento a nossa página HTML possui o seguinte conteúdo:

<h1>O que é HTML?</h1>

<p>HTML é uma linguagem de marcação.</p>

Esse código é apresentado da seguinte forma pelo navegador Google Chrome:

Para finalizar vamos adicionar o texto "Saiba mais aqui" com um link para o endereço nomar.dev 😜. Para criar um link utilizamos a tag <a>.

<p>
    HTML é uma linguagem de marcação. 
    <a href="http://nomar.dev">Saiba mais aqui</a>.
</p>

Diferentemente das tags <h1> e <p>, na tag <a> utilizamos um atributo que é o href para especificar o endereço que desejamos acessar. Os atributos de uma tag carregam informações extra sobre um elemento e que não precisam aparecer no conteúdo. Especificamos um atributo em uma tag adicionando um espaço entre o nome da tag ou um outro atributo, digitando o nome do atributo seguido de um sinal de igual (=) e, por fim, o valor entre aspas duplas.

Existem atributos globais que são comuns a todos os elementos HTML e atributos específicos. Exemplos de atributos globais são id (identifica unicamente um elemento) e style (permite alterar a aparência do elemento). O atributo href pode ser utilizado apenas nas tags <a>, <area>, <base> e <link> (não se preocupe se você não sabe o que significa todas essas tags).

Outro ponto importante a ser destacada é que adicionamos a tag <a> dentro da tag <p>. Isso é possível no HTML e dizemos que os elementos estão aninhados. Entretanto é preciso ficar atento ao fechamento correto das tags. Por exemplo, a tag <a> deve ser fechada antes da tag <p>. Apesar do navegador não gerar um erro caso as tags não estejam corretamente aninhadas, isso pode gerar um resultado não esperado.

Nosso código agora está da seguinte forma:

<h1>O que é HTML?</h1>

<p>
    HTML é uma linguagem de marcação. 
    <a href="http://nomar.dev">Saiba mais aqui</a>.
</p>

No navegador Google Chrome está sendo apresentado da seguinte forma:

Se compararmos o código com que é apresentado pelo navegador, podemos ver que a frase "HTML é uma linguagem de marcação" e "Saiba mais aqui" estão em linhas diferentes (4 e 5), mas quando no navegador são exibidas na mesma linha. Isso ocorre porque o navegador por padrão remove qualquer espaço extra ou linha extra antes de exibir o resultado para o usuário. Dessa forma, mesmo se pulássemos várias linhas ou adicionarmos vários espaço, o resultado seria o mesmo.

Então como poderíamos deixar cada frase em uma linha? Podemos seguir dois caminhos:

Colocar a tag <a> fora da tag <p>; ou
Adicionar a tag "br" antes da tag <a>.

Talvez existam outros caminhos, mas vamos pegar o caminho 2 e aproveitamos para conhecer mais uma tag. A tag "br" produz uma quebra de linha. Permitindo adicionar uma divisão entre linhas de um texto.

<p>
    HTML é uma linguagem de marcação.
    <br /> 
    <a href="http://nomar.dev">Saiba mais aqui</a>.
</p>

A tag <br/> é diferente das demais tags apresentadas até agora porque não possui nenhum conteúdo e, por isso, é chamada de elemento vazio. Também podemos escrever essa tag da seguinte forma: <br> (sem a barra / antes do >).

Atualizado nosso código, temos:

<h1>O que é HTML?</h1>

<p>
    HTML é uma linguagem de marcação. 
    <br/>
    <a href="http://nomar.dev">Saiba mais aqui</a>.
</p>

No navegador temos o resultado esperado:

Se colocarmos o código desenvolvido até agora em um documento e salvá-lo com a extensão .html (ou .htm), o navegador já consegue apresentar corretamente para o usuário o seu conteúdo. Entretanto, apesar de funcionar, uma página HTML possui uma estrutura que precisamos seguir:

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

Começamos um documento HTML com a declaração <!DOCTYPE html>. Essa declaração informa ao navegador que a página utiliza a versão HTML5. Isso ajuda o navegador a exibir a página corretamente.

Depois é utilizado a tag <html> como elemento raiz.

Depois temos a tag <head>. Dentro dessa tag colocamos informações sobre o documento. Essas informações são chamadas de metadados. Por exemplo, podemos colocar uma descrição da página, as palavras-chave e o autor. Essas informações podem ser utilizadas pelo navegador, sites de pesquisa e outros.

Por fim, temos a tag <body> que terá todo o conteúdo que será exibido ao usuário que visualizar a página. Assim, o código que escrevemos deve estar dentro dessa tag.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>O que é HTML?</h1>

    <p>
        HTML é uma linguagem de marcação.<br />
        <a href="http://nomar.dev">Saiba mais aqui</a>.
    </p>
  </body>
</html>

Construir uma página HTML se resume a encontrar a tag adequada para o conteúdo que você deseja exibir. Nem sempre é fácil encontrar a tag correta e também não é necessário decorar todas as tags que existem. Existem diversos materias que você pode (e deve) consultar sempre que julgar necessário. Como por exemplo o MDN Web Docs (possui muito material em português). Com a prática você vai naturalmente decorar as mais utilizadas.

Resumo HTML

HTML é uma linguagem de marcação (e não de programação);
Ao construir uma página HTML estamos definindo o significado e estrura do conteúdo;
As marcações no conteúdo são feitas com o uso de tags;
Tags podem ser atributos, que adicionam informações extra e não são exibidas;
Uma página é um conjunto de elementos HTML (tag + conteúdo);
Na dúvida sobre uma tag, consultar materiais como MDN Web Docs - HTML.

CSS

Como foi visto na seção anterior, um documento HTML se preocupa com o significado e estrutura do conteúdo. A apresentação fica por conta do CSS (Cascading Style Sheets ou, em português, Folha de Estilo em Cascata) que não é uma linguagem de programação nem de marcação, mas uma linguagem de folha de estilos. Podemos dizer que o CSS é uma tecnologia que auxilia o HTML. Dessa forma, podemos ter uma separação do conteúdo e da apresentação de uma página HTML.

Para entedermos melhor o papel do CSS, vamos mudar a cor do título "O que é HTML?" criado anteriormente para azul:

h1 {
    color: blue;
}

Estamos diante de uma regra CSS que é composta por um seletor e um conjunto de propriedade:valor. Na regra apresentada, h1 é o seletor, color é a propriedade e blue o valor. Poderíamos ter outras declarações CSS (propriedade:valor) desde que estejam separadas por um ponto-e-vírgula. O resultado dessa regra aplicada ao código HTML utilizado como exemplo é:

O seletor em uma regra CSS identifica o(s) elemento(s) HTML para aplicar o estilo definido. Quando digitamos apenas o nome de uma tag, estamos informando que deve ser aplicada a regra a todos os elementos que utilizam aquela tag. Assim, se na página existisse, por exemplo, dois <h1>, ambos ficariam com a cor azul.

Existem outros tipos de seletores, os mais utilizados são o seletor de ID e o seletor de classe. Antes de sabermos como esses seletores funcionam, precisamos adicionar o atributo id e class nos elementos HTML:

<h1 id="titulo">O que é HTML?</h1>

<p class="primeiro-paragrafo">
    HTML é uma linguagem de marcação.<br />
    <a href="http://nomar.dev">Saiba mais aqui</a>.
</p>

O seletor de ID permite selecionar um elemento HTML com base no atributo id. Para isso, digitamos o símbolo # seguido do id que queremos selecionar. Por exemplo, vamos selecionar o elemento com o atributo id definido como "titulo":

#titulo {
    color: blue;
}

O seletor de classe funciona de forma semelhante. A diferença é que o símbolo utilizado é o sinal de ponto ".". Por exemplos, para selecionar todos os elementos que possuem a classe "primeiro-paragrafo":

.primeiro-paragrafo {
    color: blue;
}

Além do seletor, também temos a declaração CSS que é formada por propriedade:valor. A propriedade indica a característica que será alterada pelo CSS. Por exemplo, se quisermos alterar a cor do texto utilizamos a propriedade color, a cor de fundo utilizamos a propriedade background-color, o tamanho da fonte utilizamos a propriedade font-size, entre outros. Existem diversas propriedade que podem ser utilizadas e, novamente, não se preocupe em saber todas de cabeça. Pois podemos encontrar todas as propriedades CSS em materiais tais como o MDN Web Docs - CSS.

O valor (no par propriedade:valor) indica quanto ou como uma propriedade será estilizada. Cada valor depende da propriedade, por exemplo, a propriedade font-size (tamanho da fonte) pode receber um valor na unidade pixels (px) ou pontos (pt).

Até o momento, aprendemos como escrever uma regra CSS. Mas não como colocá-la em um documento HTML. Existem três forma de fazer isso e, como era de se esperar, vamos utilizar tags e atributos.

A primeira forma a ser apresentada é a inline e utilizamos o atributo global style. O valor que esse atributo recebe são as declarações CSS (propriedade:valor) e apenas o elemento HTML receberá o estilo definido. Por exemplo, para definir que um título tenha a cor azul, fazemos o seguinte:

<h1 style="color: blue">O que é HTML?</h1>

A segunda forma é o interno ou incorporada. As regras CSS são definidas dentro do próprio documento HTML por meio da tag <style>. Essa tag deve fica dentro da tag <head>.

<!DOCTYPE html>
<html>
  <head>
    <style>
        h1 {
            color: blue;
        }
    </style>
  </head>
  <body>
    <h1>O que é HTML?</h1>
  </body>
</html>

Por fim, a terceira forma é o externo. Nesse caso, as regras CSS são definidas em um arquivo .css separado e mais de uma página HTML pode fazer referência a esse arquivo. Essa referência é feita por meio da tag <link> dentro da tag <head>. Supondo que temos um arquivo chamado estilo.css e que este esteja no mesmo diretório de uma página HTML, a referência é feita da seguinte forma:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="estilo.css">
  </head>
  <body>
    <h1>O que é HTML?</h1>
  </body>
</html>

Na tag <link> utilizamos dois atributos. O atributo rel é utilizado para especificar o tipo de relacionamento entre o arquiv e a página HTML, que nesse caso é "stylesheet" (o arquivo será usado como uma folha de estilo). Já o atributo href especifica o local do arquivo.

Resumo CSS

CSS é uma linguagem de folha de estlos;
CSS é uma tecnologia que auxilia o HTML na apresentação do conteúdo;
Regra CSS - composta por um seletor e um conjunto de declarações CSS;
- Seletor - identifica o(s) elemento(s) HTML para aplicar o estilo;
- Declaração CSS - indica o que será alterado por meio da sintaxe propriedade:valor;
Seletores básicos
- Nome de uma tag - aplica a regra a todos os elementos que utilizam a tag;
- ID - seleciona um elemento HTML com base no atributo id. Para isso digitamos # seguido do id. Exemplo: #valor-do-id;
- Classe - seleciona os elementos HTML com base no atributo class. Para isso digitamos o sinal de ponto seguido da classe. Exemplo: .valor-da-class;
Formas de inserir CSS em um documento HTML
- inline - por meio do atributo style do elemento HTML e o valor recebido são as declarações CSS;
- interno - por meio da tag <style>, que deve ficar dentro da tag <head>;
- externo - referenciando um arquivo CSS externo por meio da tag <link> dentro da tag <head>.
Na dúvida sobre uma propriedade CSS, consulte materiais como MDN - CSS

JavaScript

Quando acessamos um documento HTML que está armazenado em um servidor Web, este nos envia uma cópia para que seja exibida pelo navegador. Com as tecnologias HTML e CSS não é possível alterar o conteúdo dessa cópia. Para que seja exibido um conteúdo diferente é preciso acessar outro endereço para que um outro documento HTML seja copiado e exibido. Ou seja, a cada interação do usuário com a página é preciso regarregá-la.

Em 1995, a linguagem de programação JavaScript foi introduzida ao navegador Netscape e posteriormente foi adotada por todos os outros navegadores. A linguagem JavaScript permite que o conteúdo de uma página seja atualizado dinamicamente. Em razão disso, um usuário pode interagir com os elementos de uma página sem que seja preciso recarregá-la.

Seu primeiro programa em JavaScript

Quando se aprende uma linguagem nova, o primeiro programa a ser escrito é normalmente um que retorne a mensagem "Olá, mundo." (Hello world). Isto é, a entrada do programa será vazio e a saída será "Olá, mundo".

A maioria dos navegadores possui um recurso que normalmente é chamado de "ferramentas do desenvolvedor (ou alguma variação disso). No Google Chrome e Firefox, por exemplo, você pode acessar essa ferramenta pela tecla de atalho F12, Ctrl + Shitf + I. Ao abrir a ferramente, o resultado será parecido com a imagem abaixo.

Certifique-se que você esteja na aba Console. Essa aba pode exibir alguns erros, mas não se preocupe com eles. Apenas limpe o conteúdo dessa aba por meio do botão "clear" (ou utilizando a tecla de atalho Ctrl + L).

limparConsole

Posicione o cursor dentro da aba Console, digite o código abaixo e pressione a tecla Enter:

console.log('Olá, mundo')

O resultado será:

Pronto. Você escreveu o seu primeiro programa em JavaScript 🎉.

Talvez você esteja curioso sobre o console.log. Este é uma função que imprime mensagens. Uma linguagem de programação oferece alguns recursos prontos para que a pessoa programadora possa utilizar. O console.log é um desses casos. Não é necessário saber o seu funcionamento interno, mas o que ele faz.

Interagindo com a página por meio do JavaScript

Conforme dito anteriormente, o JavaScript permite que uma página Web tenha um comportamento dinâmico e que o usuário possa interagir com seus elementos sem que seja preciso recarregá-la.

O código apresentado abaixo é apenas para que você possa ver uma dessas interações na prática. Não se preocupe em entendê-lo. Copie e cole na aba Console e observe o resultado:

document.getElementsByTagName('h1')[0].innerText = 'Interagindo com a página usando JavaScript'

Após a execução do código, o título dessa página mudou para 'Interagindo com a página usando JavaScript'. O que esse código fez foi procurar na página pelas tags <h1>, selecionar o primeiro elemento ([0]) e alterar o seu conteúdo (innerText) para 'Interagindo com a página usando JavaScript'. Não foi preciso recarregar a página e as alterações são visíveis apenas para você pois tudo foi executado no seu navegador e nada foi alterado no arquivo original que está no servidor Web. Lembre-se que você está interagindo com uma cópia. Ao recarregar a página, consequentemente essa alteração é desfeita.

Fizemos essa alteração executando diretamente o código, mas poderíamos fazer um botão que ao ser clicado mudasse o texto. Dessa forma, a página mudaria o seu comportamento com a interação do usuário.

Incorporando um código JavaScript

Você pode incorporar um arquivo JavaScript (com extensão .js) a uma página Web ou digitar o código diretamente na página por meio da tag <script>. Suponha que temos um arquivo com o nome meuPrimeiroScript.js, o código para incorporar esse arquivo será:

<script src="meuPrimeiroScript.js"></script>

Se quisermos digitr diretamente o código no docmento HTML, o código ficaria da seguinte forma:

<script>
  document.getElementsByTagName('h1')[0].innerText = 'Interagindo com a página usando JavaScript'
</script>

Resumo JavaScript

JavaScript é uma linguagem de programação
Permite interagir com os elementos de uma página sem que seja necessário recarregá-la
Para incorporar um arquivo JavaScript (.js) ou digitar diretamente um código em uma página HTML utilizamos a tag <script>.

O que fazer depois daqui

A principal recomendação para quem deseja continuar os estudos e se torna uma pessoa desenvolvedora é praticar. Praticar não se resume apenas a escrever o código, mas também a ler atentamente e tentar entender códigos alheios. No início tudo pode parecer confuso e lento, mas aos poucos o progresso ocorre. Assim, tenha paciência com você mesmo e respeite o seu ritmo de aprendizado.

Para escrever um código você precisa basicamente de um editor de textos e salvar os arquivos no formato correto (.html, .css e .js). Não vou entrar no mérito de qual editor é o melhor pois isso é uma escolha pessoal. Inicialmente, não vale a pena gastar muito tempo nisso. Escolha um e teste para ver. Qualquer coisa, depois é só mudar. Caso você não queira fazer essa escolha agora, recomendo utilizar um editor online como o CodePen para iniciar e fazer alguns testes.

PHP, webpack, React, Bootstrap, Gulp...

Vimos que o HTML é assistido pelo CSS e JavaScript. Essas tecnologias estendem o HTML que foi feito para estruturar semanticamente o conteúdo de uma página. Com o tempo, outras tecnologias surgiram para auxiliar, principalmente, o trabalho da pessoa desenvolvedora e evitar a reinvenção da roda a cada novo projeto. No caso do JavaScript, por exemplo, surgiram frameworks e bibliotecas como jQuery, React e Vue.

Temos também linguagens de programação que são executadas no servidor Web como: PHP, Java, C#, Python e, até mesmo, JavaScript. O resultado da execução de umas dessas linguagens é no final das contas uma página HTML com CSS e JavaScript que será enviada para o navegador. Nesse caso, estamos diante de outro "mundo" que é conhecido como backend. Cabe ressaltar que o foco desse artigo é o mundo frontend (que acontece no navegador).

Assim, caso você se depare com alguma tecnologia que ainda não conhece, tente situá-la tendo como referência o HTML, CSS e JavaScript. Além de entender o problema que essa tecnologia tenta resolver. Nem sempre isso fica claro quando se é iniciante, mas é importante fazer esse exercício de compreensão para não ficar com aquela sensação de estar usando uma ferramenta sem saber exatamente o motivo.

Recomendações de leitura

HTML
- Introdução ao HTML
- Elementos HTML
CSS
JavaScript
- O que é JavaScript
- Eloquent JavaScript

Referências

https://commons.wikimedia.org/wiki/File:First_Web_Server.jpg
https://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx
List of countries by number of Internet users
Comunicação de Dados e Redes de Computadores - 4ª Ed. Behrouz A. Forouzan. Pág.: 855.