Entenda o desenvolvimento web em menos de uma hora [parte 1]

Este artigo explica o desenvolvimento web estudando seu início e evolução. Não é uma crônica sobre a evolução da web, mas sim a história das necessidades que levaram à evolução da web, para melhor entender essa tecnologia.
Tudo começou com informação. Os seres humanos sempre precisaram encontrar maneiras de compartilhar informações. Como você sabe, antes da Internet, as informações eram trocadas por meio de cartas, jornais, rádio e televisão.
Esses meios de comunicação têm muitos inconvenientes: foi isso que permitiu que a Internet se impusesse.

O artigo será publicado em duas partes :

  1. Lado do cliente: arquitetura e estilos da página
  2. Lado do servidor: formulários e bancos de dados

Vamos começar com o que acontece no lado do cliente.
 

Parte I

Lado do cliente: arquitetura e estilos da página 

 

1. O que é a web?

Imagine poder publicar informações acessíveis a todos e legíveis por qualquer pessoa interessada nessas informações? Isso é exatamente o que a web permite. As informações são armazenadas em um servidor web, e as pessoas podem ler essas informações usando clientes (navegadores da web). Isso é chamado de “arquitetura cliente-servidor”. 
Por que HTTP?
Você provavelmente já viu essas quatro letras na barra de URL do seu navegador. Eles querem dizer Protocolo de Transferência de Hipertexto. Literalmente: “protocolo de transferência de hipertexto”. HTTP é, portanto, um protocolo de comunicação cliente-servidor usado especificamente para a web.
Inicialmente, as informações eram registradas apenas em formato de texto — por isso o nome Protocolo de Transferência de Hipertexto permaneceu mesmo que, agora, diferentes formatos de informação (texto, mídia, arquivo, etc.) sejam trocados por meio desse protocolo.
HTTPS, Protocolo de transferência de hipertexto protegido, é a versão segura do HTTP.
 

2. Como as informações são armazenadas, recuperadas e armazenadas em backup?

HTML
O arquivo HTML é a maneira mais simples e durável de armazenar informações na web. Para entender melhor, tomemos o exemplo de uma empresa publicando seus preços na forma de uma lista de produtos (com preço e data de validade), para que seus fornecedores possam baixar e/ou visualizar. Essa lista é armazenada em um arquivo HTML, colocado em um servidor, e pode ser visualizada por meio de um navegador da web. O navegador solicita este arquivo do servidor (solicitação), o servidor o fornece e fecha a conexão.
HTML é a linguagem de marcação padrão usada para criar páginas da web. Concretamente, trata-se de um arquivo de texto simples, com beacons (tags) que ajudam o navegador a entender como exibir as informações.
 

 

 
APF
CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em uma linguagem de marcação. HTML permite fazer um layout básico, mas é melhor usar CSS para aplicar estilos mais complexos e sofisticados. 
Uma aplicação web contém muitas páginas, dinâmicas ou estáticas. Se usarmos tags HTML para estilizar as informações, teremos que repeti-las em todas as páginas. Imagine que queremos mudar a cor de fundo: então teremos que editar o HTML de cada página do site.
Em vez disso, podemos usar CSS para armazenar nossas definições de estilo em um só lugar e referenciá-las em todas as páginas HTML. Ao editar o arquivo CSS, mudaremos a cor de fundo em todas as páginas que apontam para esta folha de estilo.
É claro que o CSS permite muito mais do que apenas uma cor de fundo: permite alterar a cor de todos os tipos de elementos, fontes, layouts... E muito mais!
Colocamos estilos CSS em nosso exemplo anterior. Digamos que usamos tabelas em páginas diferentes, mas todas usam os mesmos estilos CSS. Podemos, portanto, mover todas essas definições de estilo para um arquivo separado.
Os estilos CSS são sempre chamados na parte superior do documento HTML, entre as tags <cabeça>.
 

 

 

 
Abaixo está um exemplo de uma lista de produtos no site fnac.com.
O CSS permite transformar completamente o HTML básico e fazer layouts complexos: aqui, a tabela de produtos contém uma imagem centralizada; o título e outras informações do quadrinho possuem estilos diferentes permitindo que sejam hierarquizados; os preços são coloridos em vermelho, etc.
 

 

JavaScript

JavaScript é o terceiro pilar da web ao lado de HTML e CSS. Ele é usado para tornar as páginas da web interativas. Para entender JavaScript (JS), você precisa começar sabendo o que é o DOM.
Le Modelo de Objeto de Documento (DOM) é uma interface de programação padronizada que transforma o documento HTML em uma estrutura de árvore. Os nós de cada documento são organizados nesta árvore — chamada de “árvore DOM” (Árvore DOM) — cujo nó mais alto é chamado Objeto de Documento.
 

Trecho da árvore DOM (Fonte: Wikimedia Commons)

 
Quando uma página HTML é renderizada no navegador, o navegador baixa o código HTML para a memória local e cria uma árvore DOM para exibir a página na tela.
 Usando JS, podemos manipular a árvore DOM de várias maneiras:

  • modificar a árvore DOM adicionando, modificando e excluindo todos os elementos e atributos HTML da página;
  • alterar todos os estilos CSS em uma página;
  • reagir a todos os eventos existentes na página;
  • crie novos eventos na página (e reaja a todos esses novos eventos).

Vamos continuar com nosso exemplo de lista de preços, adicionando outra coluna — Preço especial — cujo conteúdo está oculto por padrão. Mostraremos depois que o usuário clicar em um botão. Tecnicamente, usaremos um evento de clique (clique em evento) anexado a um elemento de ancoragem (tag âncora) e altere o texto existente do elemento da web. Em outras palavras, vamos manipular o DOM. Para fazer isso, precisamos usar a linguagem de script aceita pelo navegador, que é… sempre JavaScript.
Para informação: o JavaScript geralmente é colocado no final do arquivo HTML, logo antes do fechamento da tag </corpo>.
 

 

 

 

 
No sítio fnac.com, o botão "Adicionar ao carrinho" aparece ao passar o mouse sobre o produto.
Isso é feito com CSS.
Ao clicar no botão, aparece um pop-in (sem recarregar a página):
 

 
E isso é feito graças ao JavaScript: um evento “click” foi colocado no botão e, quando este evento é executado, uma função responsável por abrir o pop-in é chamada.
O mecanismo de adicionar ao carrinho é gerenciado no lado do servidor.
 
# Tradução do artigo Entenda o desenvolvimento da Web em menos de 1 horaPor Shaik Ismael
 
 
 
 

Audrey Guénée, DEV-FRONT @UX-Republic