Fundamentos do Desenvolvimento Web: uma rápida revisão
Published: 2023-07-24 18:43:47

## Tópicos
&nbsp;1. [Introdução](#introdu%C3%A7%C3%A3o)
&nbsp;2. [Sistema Operacional](#sistema-operacional)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.1. [Terminal de comando](#terminal-de-comando)
&nbsp;3. [Sistema de Arquivos e Diretórios](#sistema-de-arquivos-e-diret%C3%B3rios)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.1. [Programas e Linguagem de Programação](#programas-e-linguagem-de-programa%C3%A7%C3%A3o)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a. [Linguagens Compiladas](#linguagens-compiladas)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b. [Linguagens Interpretadas](#linguagens-interpretadas)
&nbsp;4. [Comandos básicos do terminal](#comandos-b%C3%A1sicos-do-terminal)
&nbsp;5. [PATH](#path)
&nbsp;6. [Editor de Texto e IDE](#editor-de-texto-e-ide)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 6.1. [O VSCode](#o-vscode)
&nbsp;7. [Utilizando o Windows Subsystem for Linux (WSL) no Windows](#utilizando-o-windows-subsystem-for-linux-wsl-no-windows)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.1. [Habilitando o WSL](#habilitando-o-wsl)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.2. [Iniciando e Utilizando o WSL](#iniciando-e-utilizando-o-wsl)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.3. [Intercâmbio com o Windows](#interc%C3%A2mbio-com-o-windows)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 7.4. [Desenvolvimento Web com WSL](#desenvolvimento-web-com-wsl)
&nbsp;8. [Codificação de Caracteres e UTF-8](#codifica%C3%A7%C3%A3o-de-caracteres-e-utf8)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 8.1. [ASCII (American Standard Code for Information Interchange)](#ascii-american-standard-code-for-information-interchange)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 8.2. [Unicode](#unicode)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 8.3. [UTF-8 (Unicode Transformation Format - 8 bits)](#utf8-unicode-transformation-format-8-bits)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 8.4. [Quebras de Linha, Retorno de Carro e Escape de Caracteres em Strings](#quebras-de-linha-retorno-de-carro-e-escape-de-caracteres-em-strings)

## Introdução

Antes de começarmos a entender os conceitos básicos de desenvolvimento web, é importante revisar alguns conhecimentos fundamentais de computação e programação. Por isto este artigo trata de alguns conceitos importantes desde sistemas operacionais até a utilização de IDEs e terminais de comando.

---

## Sistema Operacional

Um sistema operacional é um software fundamental que atua como uma interface entre o hardware do computador e os programas que são executados nele. Ele gerencia os recursos do sistema, como processador, memória, dispositivos de entrada e saída, e permite que os usuários interajam com o computador de forma eficiente. Naturalmente dentro do mundo do Desenvolvimento Web, lidamos com três tipos de sistemas operacionais diferentes: Windows, Linux e MacOS. Cada um destes sistemas possui características diferentes dos demais, mas funcionalmente ambos se comportam de maneira similar no tocante ao desenvolvimento, visto que a nível de kernel todos têm funções semelhantes (apesar de diferenças significativas no tocante a, por exemplo, instalação de aplicações).

Um aspecto importante a ser abordado sobre os sistemas operacionais é o terminal de comando, que abordaremos a seguir.

### Terminal de comando

O terminal de comando, também conhecido como prompt de comando ou shell, é uma interface de linha de comando que permite aos usuários interagir diretamente com o sistema operacional por meio de comandos textuais. Enquanto a maioria dos usuários interage com o sistema operacional através de uma interface gráfica, o terminal oferece uma maneira poderosa e eficiente de executar tarefas e comandos complexos.

No contexto de desenvolvimento de Aplicações Web, é bastante comum utilizar o terminal de comando para automatizar tarefas, manipular diretórios e arquivos, instalar ou remover programas e dependências e para fazer configurações. Apesar de algumas destas tarefas poderem ser executadas de forma até mesmo mais eficiente através da interface gráfica (como por exemplo a manipulação de arquivos), a utilização do terminal de comando é geralmente recomendada quando trabalhamos com desenvolvimento de aplicações.

Mais a frente falaremos de alguns comandos básicos do terminal de comando.

---

## Sistema de Arquivos e Diretórios

O sistema de arquivos é a base para o armazenamento e organização de dados em um computador. Os dados são armazenados em arquivos, que por sua vez ficam armazenados em pastas (ou diretórios). Cada uma destas pastas pode estar dentro de outras pastas, formando uma estrutura hierárquica.

Cada arquivo ou diretório possui um nome, que serve como seu identificador. Em sistemas Linux, os nomes são *case sensitives* ("sensíveis ao caso"), o que significa que letras maiúsculas e minúsculas são tratadas de forma diferente. Assim, `arquivo.txt` é diferente de `Arquivo.txt`, mesmo que ambos estejam dentro do mesmo diretório. Esta mesma observação vale para diretórios, portanto é importante estar atento às letras maiúsculas e minúsculas enquanto estiver lidando com arquivos.

Outro ponto importante a ser lembrado é que essa estrutura hierárquica tem um fim, o que chamamos de **diretório raiz**. O diretório raiz em sistemas de arquivos baseados em Unix (Linux e MacOS, por exemplo), é o `/`; este é o ponto de montagem do sistema de arquivos. No caso de sistemas Windows, a raiz é geralmente indicada por uma letra (`C:` ou `D:`, por exemplo).

Assim, dentro dessa estrutura hierárquica e sabendo da identificação através de nomes, o *caminho* de um arquivo é a estrutura de diretórios em que ele está contido desde a raiz. Por exemplo, `C:\users\ranieri\Desktop\teste.txt` ou `/home/ranieri/desktop/teste.txt`. Isto é o que chamamos de *caminho absoluto*, pois é o caminho completo do arquivo desde a raiz. Podemos também ter caminhos relativos. Neste caso, `.` refere-se ao diretório em questão onde o arquivo está e `..` refere-se ao diretório raiz.

Por exemplo, considere que estamos "olhando" o arquivo `/home/ranieri/desktop/teste.txt`. A partir deste arquivo, se quisermos referenciar um arquivo `nomes.txt` que está no mesmo diretório (`/home/ranieri/desktop/nomes.txt`), poderíamos referenciá-lo usando `./nomes.txt`, já que ele está no mesmo diretório. Se, por outro lado, quiséssemos referenciar o arquivo localizado em `/home/ranieri/.ssh/id_rsa` teríamos que usar o identificador   `../.ssh/id_rsa`, ou seja, voltando ao diretório pai (`../` refere-se à `/home/ranieri`, diretório pai de `desktop` que é onde o arquivo `teste.txt` está localizado).

---

### Programas e Linguagem de Programação

Em termos simples, um programa é um conjunto de instruções escritas por um programador para que um computador execute tarefas específicas. Essas tarefas podem ser desde cálculos matemáticos até a execução de ações complexas em aplicativos, jogos ou servidores web. Os programas são a base de tudo o que fazemos em nossos computadores e dispositivos eletrônicos.

Já as linguagens de programação são conjuntos de regras e instruções utilizadas para desenvolver programas e aplicativos de computador. Elas servem como uma ponte de comunicação entre os seres humanos e as máquinas, permitindo que os programadores expressem suas ideias e lógica de programação de maneira estruturada e compreensível para os computadores.

#### Linguagens Compiladas
Linguagens de programação compiladas são aquelas em que o código-fonte é traduzido para código de máquina antes da execução do programa. O processo de compilação é realizado por um software chamado compilador, que analisa todo o código-fonte e o converte em um arquivo executável específico para o sistema operacional em que o programa será executado. Esse arquivo executável é independente do código-fonte original e pode ser distribuído para ser executado em diferentes sistemas, desde que exista uma versão compatível do compilador para cada plataforma.

Exemplos de linguagens compiladas incluem C, C++, Rust e Go. Quando um programa é escrito nessas linguagens, o código-fonte é traduzido em linguagem de máquina (também chamado de binário) pelo compilador antes da execução.

#### Linguagens Interpretadas
Linguagens de programação interpretadas são aquelas em que o código-fonte é traduzido para código de máquina linha por linha em tempo real, enquanto o programa é executado. Em vez de gerar um arquivo executável independente, o código-fonte é lido e interpretado por um programa chamado interpretador. O interpretador executa cada instrução do código em sequência, realizando as ações necessárias conforme encontradas no programa.

Exemplos de linguagens interpretadas incluem Python, JavaScript, Ruby e PHP. Ao executar um programa escrito nessas linguagens, é necessário ter o interpretador instalado no sistema operacional, pois ele será responsável por interpretar e executar o código. Por exemplo, quando executamos um código escrito em JavaScript, é comum fazermos uma chamada no terminal de comando similar a:

```bash
node my_code.js
```

Isso significa que o programa `node` será executado e irá interpretar o código escrito no arquivo `my_code.js`

---

## Comandos básicos do terminal

Aqui vamos tratar alguns comandos extremamente básicos para utilizar o terminal de comando usando tanto Windows quando Linux (estes comandos no MacOS serão iguais aos do Linux)

**Listar Arquivos e Diretórios:**
**Windows:** 
```
dir
```
**Linux:** 
```
ls
```

**Mudar de Diretório:**
**Windows:** 
```
cd [nome do diretório]
```
**Linux:** 
```
cd [nome do diretório]
```

**Criar Diretório:**
**Windows:** 
```
mkdir [nome do diretório]
```
**Linux:** 
```
mkdir [nome do diretório]
```

**Limpar a Tela do Terminal:**
**Windows:** 
```
cls
```
**Linux:** 
```
clear
```

**Copiar Arquivos:**
**Windows:** 
```
copy [origem] [destino]
```
**Linux:** 
```
cp [origem] [destino]
```

**Mover Arquivos:**
**Windows:** 
```
move [origem] [destino]
```
**Linux:** 
```
mv [origem] [destino]
```

**Remover Arquivos:**
**Windows:** 
```
del [nome do arquivo]
```
**Linux:** 
```
rm [nome do arquivo]
```

**Executar um Programa:**
**Windows:** 
```
[programa].exe
```
**Linux:** 
```
./[programa]
```

É importante notar que, além das diferenças nos comandos, os sistemas operacionais têm algumas particularidades em relação à estrutura de diretórios e aos nomes de arquivos. No Windows, utiliza-se o caractere de barra invertida `\` para separar diretórios, enquanto no Linux usa-se a barra `/`. Além disso, como já falamos anteriormente, no Windows, os nomes de arquivos e diretórios não diferenciam maiúsculas de minúsculas, enquanto no Linux, são considerados como diferentes.

---

## PATH

O conceito de PATH é fundamental para entender como os comandos são executados. O PATH é uma variável de ambiente (um valor nomeado que pode ser acessado e utilizado por programas em um sistema operacional para armazenar informações relevantes) que contém uma lista de diretórios em que o sistema operacional procura por executáveis quando um comando é digitado no terminal.

Quando um comando é inserido no terminal, o sistema verifica o diretório atual (o diretório em que o usuário está no momento) e, em seguida, busca o comando nos diretórios listados na variável PATH. Se o executável do comando for encontrado em um desses diretórios, o sistema executará o comando. Caso contrário, o sistema exibirá uma mensagem de erro indicando que o comando não foi encontrado.

A configuração adequada do PATH é essencial para garantir que os comandos sejam executados corretamente, principalmente quando se trabalha com desenvolvimento de aplicações web, pois muitas vezes é necessário utilizar ferramentas e programas que são instalados em diretórios específicos.

Por exemplo, ao instalar ferramentas como o Node.js, o PHP ou o Python em um sistema operacional, essas ferramentas geralmente são adicionadas aos diretórios do PATH para que possam ser acessadas de qualquer local no terminal de comando. Isso permite que os desenvolvedores executem essas ferramentas diretamente do terminal, sem a necessidade de fornecer o caminho completo para o executável.

A configuração do PATH varia de acordo com o sistema operacional utilizado. No Windows, por exemplo, é possível configurá-lo através das variáveis de ambiente do sistema, dentro do Painel de Controle. Já no Linux e MacOS, o PATH pode ser configurado no arquivo de perfil do usuário, como o `.bashrc` ou o `.bash_profile`.

No desenvolvimento de aplicações web, ter um PATH configurado adequadamente é crucial para garantir a facilidade de uso e a eficiência das ferramentas e comandos utilizados no terminal de comando. Com o PATH configurado corretamente, os desenvolvedores podem agilizar suas tarefas e aproveitar ao máximo as capacidades oferecidas pelo terminal de comando em seus projetos.

---

## Editor de Texto e IDE

Um editor de texto é uma ferramenta essencial para escrever código, e uma IDE (Ambiente de Desenvolvimento Integrado) oferece recursos adicionais para facilitar o desenvolvimento.

### O VSCode

O Visual Studio Code (VSCode) é um dos editores de texto mais populares no desenvolvimento web moderno. Uma das suas principais vantagens é sua vasta biblioteca de extensões que oferecem recursos adicionais e suporte para várias linguagens de programação e frameworks. Com estas extensões e plugins é possível torná-lo uma IDE, com todas as funcionalidades necessárias para o desenvolvimento.

Além disso, é possível personalizar as configurações do VSCode de forma a otimizar seu fluxo de trabalho, alterando atalhos para funções usadas comumente ou alterando as cores do tema para melhorar sua acessibilidade.

---

## Utilizando o Windows Subsystem for Linux (WSL) no Windows

O Windows Subsystem for Linux (WSL) é uma ferramenta poderosa que permite aos usuários do Windows executar uma distribuição Linux completa diretamente no sistema operacional Windows. Isso possibilita a utilização de comandos e ferramentas nativas do Linux no ambiente do Windows, incluindo no desenvolvimento web.

### Habilitando o WSL

Para utilizar o WSL, é necessário habilitá-lo no Windows. Nas versões mais recentes do Windows, o WSL está disponível como uma funcionalidade integrada. Para habilitá-lo, siga estes passos:

1. Abra o "Painel de Controle" do Windows.
2. Clique em "Programas" ou "Programas e Recursos".
3. No painel esquerdo, clique em "Ativar ou desativar recursos do Windows".
4. Localize "Windows Subsystem for Linux" na lista e marque a caixa de seleção ao lado.
5. Clique em "OK" e aguarde o Windows fazer as alterações necessárias.

Após habilitar o WSL, você precisará instalar uma distribuição Linux através da Microsoft Store. Atualmente, existem várias opções disponíveis, incluindo o Ubuntu, Debian, Fedora e outras.

### Iniciando e Utilizando o WSL

Após instalar a distribuição Linux de sua escolha, você pode iniciá-la como qualquer outro aplicativo do Windows. Basta procurar a distribuição no menu Iniciar e clicar em "Iniciar" para abrir um terminal Linux diretamente no Windows.

No ambiente do WSL, você pode utilizar os mesmos comandos e ferramentas que usaria em um sistema Linux tradicional. Isso inclui comandos como `ls`, `cd`, `mkdir`, `rm`, entre outros. Além disso, você pode instalar pacotes e bibliotecas usando o gerenciador de pacotes da distribuição Linux que você escolheu.

### Intercâmbio com o Windows

Um dos recursos interessantes do WSL é a capacidade de intercambiar arquivos e diretórios entre o ambiente do Windows e o ambiente Linux. Dentro do terminal do WSL, você pode acessar os arquivos do Windows através do caminho `/mnt/c/` (ou `/mnt/d/` para outra partição, se aplicável).

Por exemplo, para acessar a pasta "Documentos" do Windows no ambiente do WSL, você pode utilizar o seguinte comando:

```
cd /mnt/c/Users/SeuUsuario/Documents
```

Dessa forma, você pode trabalhar com os arquivos em ambos os ambientes de forma integrada.

### Desenvolvimento Web com WSL

O WSL é especialmente útil no desenvolvimento web, pois permite que você utilize todas as ferramentas e comandos familiares do ambiente Linux sem precisar sair do sistema operacional Windows. Você pode executar servidores web, compilar código, gerenciar pacotes e dependências, e realizar outras tarefas típicas do desenvolvimento web diretamente no terminal do WSL.

Além disso, a integração com o Visual Studio Code (VSCode) é bastante fluída, permitindo que você utilize o editor de texto para desenvolvimento web com suporte total ao ambiente do WSL.

---

## Codificação de Caracteres e UTF-8

No desenvolvimento web, a codificação de caracteres é um aspecto essencial para garantir que os dados sejam representados corretamente e possam ser interpretados corretamente pelos navegadores e servidores. Nesta seção, abordaremos alguns conceitos importantes sobre a codificação de caracteres, incluindo ASCII, Unicode e UTF-8.

### ASCII (American Standard Code for Information Interchange)

O ASCII é um dos primeiros padrões de codificação de caracteres amplamente utilizado na computação. Ele foi desenvolvido nos anos 60 e utiliza um conjunto de 128 caracteres diferentes, incluindo letras maiúsculas e minúsculas, números, símbolos de pontuação e caracteres especiais, como tabulação e quebra de linha. Cada caractere é representado por um valor numérico de 7 bits, variando de 0 a 127.

Por exemplo, o valor ASCII para a letra 'A' é 65, e o valor ASCII para a letra 'a' é 97. Os números 0 a 9 têm os valores ASCII de 48 a 57, respectivamente.

Para visualizar a tabela completa de caracteres ASCII, você pode consultar a [tabela ASCII na Wikipedia](https://en.wikipedia.org/wiki/ASCII).

Apesar de ser amplamente utilizado em seus primórdios, o ASCII apresenta limitações ao suportar apenas um conjunto limitado de caracteres, o que torna inviável a representação de idiomas e símbolos de outros alfabetos.

### Unicode

Para solucionar as limitações do ASCII, o Unicode foi desenvolvido para permitir a representação de um conjunto mais amplo de caracteres, incluindo símbolos, letras e caracteres de idiomas de todo o mundo. O Unicode atribui um número único (chamado de ponto de código) a cada caractere, e atualmente suporta mais de 143.000 pontos de código, permitindo a inclusão de diversos sistemas de escrita, emojis e caracteres especiais.

A tabela Unicode também inclui os caracteres ASCII originais, tornando-o compatível com sistemas legados.

### UTF-8 (Unicode Transformation Format - 8 bits)

O UTF-8 é um dos esquemas de codificação mais populares e amplamente utilizados do Unicode. Ele utiliza um número variável de bytes (8 bits) para representar cada caractere, o que permite que os caracteres ASCII sejam representados usando um único byte, mantendo a compatibilidade com sistemas legados que utilizam o ASCII.

Caracteres não ASCII são representados por um número variável de bytes, dependendo do ponto de código do caractere no Unicode. Isso torna o UTF-8 uma codificação eficiente e econômica para armazenar e transmitir texto multilíngue, uma vez que caracteres menos comuns usam mais bytes, enquanto caracteres mais comuns usam menos.

Por exemplo:
- Caracteres ASCII (0 a 127): Representados em UTF-8 usando 1 byte.
- Caracteres latinos comuns (á, é, í, ó, ú, etc.): Representados em UTF-8 usando 2 bytes.
- Caracteres de outros alfabetos e emojis: Representados em UTF-8 usando 3 ou 4 bytes.

O UTF-8 é amplamente recomendado como a codificação padrão para documentos e páginas da web, pois suporta todos os caracteres necessários para uma representação completa e precisa de texto multilíngue.

### Quebras de Linha, Retorno de Carro e Escape de Caracteres em Strings

Em linguagens de programação, uma string é uma sequência de caracteres. Para representar caracteres especiais, como as quebras de linha e o retorno de carro, dentro de uma string, são utilizados os chamados caracteres de escape. O caractere de escape mais comum é a barra invertida (`\`). Quando seguida de um caractere especial, ela indica que o caractere seguinte deve ser tratado de forma especial.

Por exemplo:
- `\n`: Representa uma quebra de linha.
- `\r`: Representa um retorno de carro.
- `\t`: Representa uma tabulação.
- `\"`: Representa uma aspa dupla.
- `\'`: Representa uma aspa simples.
- `\\`: Representa uma barra invertida.

Esses caracteres de escape permitem que você inclua caracteres especiais dentro de uma string, sem que eles sejam interpretados de forma literal.

Em sistemas Windows, as quebras de linha são representadas pelo par de caracteres `\r\n` (retorno de carro seguido de quebra de linha), enquanto em sistemas baseados em Unix (Linux, MacOS), apenas o caractere `\n` é utilizado para representar uma quebra de linha.

---

Com essa breve revisão, podemos passar para os próximos tópicos desta série e começar a falar sobre linguagens de programação para Desenvolvimento Web, protocolo HTTP e outras coisas mais.