PROGRAMAÇÃO WEB

O desenvolvimento de software mudou muito nos últimos anos, evoluindo desde os programas estáticos, feitos para operar em apenas um tipo de hardware, até atualmente, com conexão à Internet, e operação em diversos tipos de dispositivos. Em meados de 1980, a maioria dos softwares era desenvolvida para operar em apenas um computador, para resolver um problema específico. A partir de 1990, começou-se uma tendência ao uso de sistemas distribuídos, para processamento de dados online. Além disso, iniciou-se a propagação de páginas WEB (WOODS, 2016).

Atualmente, a Internet popularizou-se e é disponível para uma enorme quantidade de usuários. Nesse contexto de massivo uso de Internet, o desenvolvimento de software também sofreu migração para plataformas WEB. Constroem-se os programas nessa plataforma combinando-se: 1) componentes de código aberto, ou seja, pedaços de código disponíveis para serem utilizados gratuitamente; 2) serviços remotos disponíveis na Internet; e 3) código personalizado para a aplicação (WOODS, 2016).

Para seu funcionamento, muitos programas mais complexos utilizam bibliotecas e frameworks disponíveis por meio de APIs – Interface de Programação de Aplicativos, do inglês Application User Interface (TREUDE e ANICHE, 2018), que se tratam de um conjunto de classes, métodos (NGUYEN, NGUYEN, et al., 2017) e funcionalidades fornecidos por um terceiro (SAWANT e BACCHELLI, 2015).

A principal vantagem de uma API é a capacidade de reuso de bibliotecas e funções já existentes, evitando-se, assim, o retrabalho (SAWANT e BACCHELLI, 2015). Geralmente, a API apresenta-se por meio de uma documentação que descreve a sua estrutura e como usá-la (TREUDE e ANICHE, 2018).

2.2.1 Funcionamento da WEB

Objetiva-se, nesta seção, mostrar uma visão geral de como funciona a WEB, de modo a se entender a separação do código em front- end e back-end, e como essas partes interagem.

Pode-se separar os agentes conectados à rede como clientes e servidores. Os clientes representam-se por qualquer programa de acesso à Internet em um dispositivo, por exemplo, um navegador. Já, os servidores são computadores que armazenam páginas da WEB, sites, aplicativos, APIs, entre outros. Tem-se que essa relação se inicia quando

o cliente faz uma requisição ao servidor. O servidor, por sua vez, responde à solicitação do cliente (MDN WEB DOCS, 2019). Mostra-se essa relação na Figura 2.

Figura 2 - Diagrama simples de interação entre cliente e servidor a partir de uma requisição.

Fonte: (MDN WEB DOCS, 2019).

Desse modo, então, ao se digitar o endereço de um site na barra do navegador, por exemplo, “google.com”, um servidor de sistema de nomes de domínio (DNS), do inglês Domain Name System, traduzirá esse endereço digitado para o endereço do servidor no qual o site hospeda-se, ou seja, o seu real endereço na Internet. Tal endereço de servidor é um código numérico chamado de número de protocolo de Internet (IP), por exemplo “172.217.12.206”. Realiza-se essa tradução, dada a maior facilidade das pessoas em memorizarem um texto, ao invés do conjunto de números (MDN WEB DOCS, 2019).

Após isso, o cliente, por exemplo o navegador, envia uma requisição do tipo HTTP (Protocolo de Transferência de Hipertexto, do inglês Hypertext Transfer Protocol) para o servidor. Esse protocolo é importante, pois estabelece a linguagem de comunicação entre as duas partes. O servidor, por sua vez, responde ao cliente com o conteúdo requisitado, que pode ser a página da WEB, por exemplo, ou um conjunto de dados, no caso de serviços ou APIs disponíveis pela WEB (MDN WEB DOCS, 2019).

A programação WEB pode ser dividida em duas frentes: front-end e back-end. O back-end responde a requisições solicitadas pelo front-end, o qual possui capacidade computacional limitada (TECHOPEDIA). Em outras palavras, o front-end responsabiliza-se pela exibição da interface apresentada ao cliente e o back-end possui a função de processamento de dados (YUNRUI, 2018). A divisão do código entre front-end e back-end simplifica o processo de programação e a manutenção de código (TECHOPEDIA), além de reduzir custos de comunicação e aumentar a eficiência para produção de um software (YUNRUI, 2018).

2.2.2 Front-End

O desenvolvimento do front-end consiste na descrição e programação da interface gráfica com o usuário. Desse modo, é a parte de um programa WEB relacionada à interação com o usuário e envio de requisições para o back-end (TECHOPEDIA).

2.2.2.1 Linguagens

Nesta seção, comentar-se-á sobre diversas linguagens utilizadas no front-end, porém, não se dará foco na sintaxe da linguagem, mas sim, no entendimento de sua importância.

O front-end de um site WEB é composto por diversas partes, como arquivos de textos estático, código, folhas de estilos (do inglês stylesheet), scripts, mídias, entre outros. Nesses arquivos, predominam três linguagens que são a base para o desenvolvimento de qualquer página no front-end: HTML, CSS e JavaScript (MDN WEB DOCS, 2019).

2.2.2.1.1 HTML

A HTML (Linguagem de Marcação de Hipertexto, do inglês Hypertext Markup Language), como o nome diz, não é uma linguagem de programação, mas sim, de marcação. Isso quer dizer que ela define a estrutura do conteúdo a ser mostrado (MDN WEB DOCS, 2019).

Os elementos em HTML são representados por tags, que representam partes de um conteúdo. Ao ler uma tag, o navegador reconhece como o conteúdo marcado por essa tag deve ser renderizado (W3SCHOOLS).

Quadro 1 - Exemplo em HTML.

Código em HTML Visualização no Navegador

<h1>Isto é um título nível 1</h1>

Isto é um título nível 1

<h4>Isto é um título nível 4</h4>

Isto é um título nível 4

<p>Isto é um parágrafo</p> Isto é um parágrafo Fonte: do Autor (2019).

Utilizam-se, geralmente, as tags em pares, como mostrado no exemplo do Quadro 1. Como comentado anteriormente, nota-se que o uso delas modela a estrutura do texto aparece para o usuário.

2.2.2.1.2 CSS

Outra linguagem importante para desenvolvimento do front-end é o CSS (Folhas de Estilo em Cascata, do inglês Cascading Style Sheets). Introduziu-se essa linguagem para que fosse possível formatar o conteúdo de páginas em HTML, facilitando a adição de estilos em múltiplas páginas de uma só vez. Descrição de estilos em CSS é algo essencial para que qualquer página da WEB não seja apenas texto sem formatação, uma vez que a HTML não deve ser utilizada como meio de formatar uma página WEB, mas apenas descrevê-la (W3SCHOOLS).

Para utilizar o CSS, escolhe-se o elemento que se deseja estilizar, por exemplo, um título de nível 1. Após isso, especifica-se qual a propriedade que deve ser alterada, como, a cor do texto. Por fim, define- se o valor a ser atribuído para essa propriedade (MDN WEB DOCS, 2019).

A aplicabilidade do CSS torna-se mais clara por meio do exemplo do Quadro 2. Nota-se que o código no arquivo em CSS é capaz de alterar propriedades de estilo de um conteúdo marcado em HTML.

Quadro 2 - Exemplo em CSS.

Código em CSS e HTML Visualização no Navegador

h1 {

color: red;

border: 3px solid black; }

<h1>Isto é um título nível 1</h1>