Arranque: o que é um CRM e a primeira página web

Hoje vais perceber o que é um CRM, preparar o teu computador para programar e criar a tua primeira página web. Não precisas de saber nada: vamos passo a passo.

🎯 No fim desta aula vais conseguir

Explicar, por palavras tuas, o que é um CRM e para que serve numa empresa.
Instalar e usar o VS Code (o programa onde se escreve código) e a extensão Live Server.
Descompactar o kit do projeto e abrir a pasta meu-crm no VS Code.
Criar uma página web com HTML e usar as etiquetas <h1>, <h2>, <p>, <strong>, <em> e <a>.
Escolher a empresa inventada que vai acompanhar o teu CRM até ao fim do ano.

🧰 Antes de começar

Liga o computador e abre um browser (o programa para ver sites: Google Chrome ou Microsoft Edge, de preferência).
Abre esta página do curso no browser (já está aberta, se estás a ler isto 😉).
Tem à mão um caderno: vais escrever previsões e respostas ao longo das aulas.
Hoje vais precisar do kit inicial do projeto: meu-crm-inicial.zip. Não o abras ainda: no passo 2 explicamos tudo.

💡 Como funcionam estas aulas: cada passo explica uma ideia nova e depois tem um bloco de código com o botão 📋 Copiar. Por cima do código aparece sempre em que ficheiro e onde o deves colar. No fim há exercícios sem código pronto: são esses que mostram que percebeste, e o teu projeto final precisa de todos eles.

Parte A — O que é um CRM? (≈ 15 min)

💼 O que é um CRM (e porque é que te interessa)

Imagina um ginásio com 400 sócios. Quem pagou a mensalidade? Quem deixou de aparecer? A quem é que se prometeu ligar na segunda-feira? Se estiver tudo em papelinhos e na cabeça da rececionista, alguma coisa vai falhar.

Um CRM (do inglês Customer Relationship Management, ou seja, gestão da relação com os clientes) é um programa onde a empresa guarda, num só sítio:

os clientes (nome, empresa, contactos, NIF…);
o histórico de contactos (chamadas, emails, reuniões);
os negócios em curso (propostas, orçamentos, vendas ganhas e perdidas).

Há CRM muito conhecidos, como o HubSpot, o Salesforce ou o Zoho. Mas muitas pequenas e médias empresas portuguesas ainda gerem os clientes numa folha de Excel… e é aí que entra alguém que saiba fazer uma aplicação de gestão simples.

Porque é que isto te interessa? Como Técnico de Informática de Gestão, vais trabalhar com aplicações de gestão (clientes, faturação, stocks). Saber construir uma, mesmo pequena, mostra a um empregador que sabes como estes programas funcionam por dentro. E no fim do ano o teu CRM vai para a Internet e para o teu CV, como projeto de portefólio.

👀 Espreita o destino: abre o Mini-CRM como vai ficar no fim (demonstração com dados de exemplo). Experimenta criar um cliente, abrir a ficha de um cliente e ver o painel. Tudo o que vês lá vai ser feito por ti, aula a aula.

Parte B — Preparar o computador (≈ 30 min)

1 Instalar o VS Code e a extensão Live Server

Para escrever código usamos um editor de código. É parecido com o Word, mas feito para programadores: pinta o código com cores, ajuda a fechar etiquetas e mostra os ficheiros do projeto. Vamos usar o Visual Studio Code (VS Code), que é gratuito e muito usado nas empresas.

💡 Se o VS Code já estiver instalado no computador da escola, salta para a parte B) A extensão Live Server. Procura-o no menu Iniciar: escreve code.

A) Instalar o VS Code

No browser, vai a code.visualstudio.com.
Clica no botão grande Download for Windows. O ficheiro de instalação vai para a pasta Transferências.
Abre o ficheiro que descarregaste (clica nele na barra de transferências do browser, ou faz duplo clique na pasta Transferências).
Aceita o contrato (I accept the agreement) e clica em Seguinte (Next) sem mudar nada, até chegares ao ecrã Tarefas adicionais (Select Additional Tasks).
Nesse ecrã, marca as duas opções que falam em «Abrir com Code» (Add "Open with Code" action…). Deixa marcada a opção Adicionar ao PATH.
Clica em Instalar (Install) e, no fim, em Concluir (Finish). O VS Code abre sozinho.

💡 No Mac: descarrega a versão Mac, abre o ficheiro e arrasta o Visual Studio Code para a pasta Aplicações. Onde nestas aulas aparecer Ctrl, usa Cmd.

🇬🇧 O VS Code vem em inglês. Não faz mal (nas empresas também é assim). As palavras que vais usar mais: File = Ficheiro, Open Folder = Abrir Pasta, New File = Novo Ficheiro, Save = Guardar, Extensions = Extensões.

B) A extensão Live Server

Uma extensão é um “acrescento” que dá novos poderes ao VS Code. O Live Server abre a tua página no browser e, sempre que gravas o ficheiro, atualiza a página sozinho. É como ter alguém sempre a carregar no botão de recarregar por ti.

No VS Code, clica no ícone das Extensões na barra da esquerda (são quatro quadradinhos, um deles meio solto) ou carrega Ctrl+Shift+X.
Na caixa de pesquisa que aparece em cima, escreve Live Server.
Escolhe a extensão Live Server cujo autor é Ritwick Dey (tem milhões de transferências).
Clica no botão azul Install. Espera uns segundos.

✅ Deves ver: na barra azul do fundo do VS Code (a barra de estado), do lado direito, aparece Go Live. Isso quer dizer que o Live Server está instalado.

😕 A escola não me deixa instalar o VS Code ou o Live Server

Avisa o professor. Muitas vezes o VS Code já está instalado e só falta a extensão.
Plano B, sem Live Server: faz tudo igual no VS Code, mas para ver uma página vai à pasta meu-crm no Explorador de Ficheiros e faz duplo clique no ficheiro .html: abre no browser. Sempre que gravares uma alteração, vai ao browser e carrega F5 para recarregar.
Funciona quase tudo assim. Só uma coisa da aula 11 (o laboratório SQL a ler os teus dados) pode precisar do Live Server.

2 Descarregar o kit e abrir a pasta do projeto

O professor preparou um kit com os ficheiros iniciais do teu CRM. Vem numa pasta comprimida (.zip): é como uma mala fechada com várias coisas lá dentro. Antes de trabalhar, tens de abrir a mala e tirar as coisas, ou seja, descompactar.

A) Descarregar e descompactar

Clica aqui: meu-crm-inicial.zip. O ficheiro vai para a pasta Transferências.
Abre o Explorador de Ficheiros (o ícone da pasta amarela na barra de tarefas, ou Windows+E) e entra em Transferências.
Clica com o botão direito do rato no ficheiro meu-crm-inicial.zip e escolhe Extrair Tudo…
Na janela que aparece, clica em Procurar…, escolhe a pasta Documentos e clica em Selecionar pasta. Depois clica em Extrair.
Vai a Documentos. Deves encontrar uma pasta chamada meu-crm.

⚠️ Atenção: não trabalhes dentro do ficheiro .zip! O Windows deixa espreitar lá para dentro com duplo clique, mas tudo o que alterares aí perde-se. Trabalha sempre na pasta meu-crm que extraíste para Documentos.

💡 No Mac, basta fazer duplo clique no .zip: aparece a pasta meu-crm. Arrasta-a para a pasta Documentos.

B) Abrir a pasta no VS Code

No VS Code, vai ao menu File → Open Folder… (Ficheiro → Abrir Pasta…).
Escolhe Documentos, clica uma vez na pasta meu-crm e carrega em Selecionar pasta.
Se aparecer a pergunta «Do you trust the authors of the files in this folder?», clica em Yes, I trust the authors. (A pasta é tua e do professor, podes confiar. Sem isto, o Live Server não funciona. Se carregaste em «No» por engano, vê o passo 4, «Se não funcionar».)

✅ Deves ver: no painel da esquerda (EXPLORER) aparece MEU-CRM e, por baixo, a lista de ficheiros: app.js, dados.js, index.html, sql-lab.html, style.css, treino.html e treino.js.

😕 Não vejo estes ficheiros / vejo outra pasta lá dentro

Se no painel aparece uma pasta meu-crm dentro de outra (por exemplo meu-crm-inicial), abriste a pasta de cima. Volta a File → Open Folder… e entra até chegares à pasta que tem o index.html diretamente lá dentro.
Se o painel da esquerda desapareceu, carrega Ctrl+Shift+E.

C) O que é cada ficheiro?

Não te assustes: não precisas de perceber estes ficheiros hoje. Pensa no CRM como uma casa:

Ficheiro	O que é	Na casa seria…
`index.html`	A página principal do CRM: os títulos, o formulário, a tabela (linguagem HTML).	As paredes e as divisões.
`style.css`	O aspeto: cores, letras, espaços (linguagem CSS). Já vem pronto.	A pintura e a decoração.
`app.js`	O que acontece quando carregas nos botões (linguagem JavaScript).	A eletricidade: carregas no interruptor e a luz acende.
`dados.js`	Onde se guardam e leem os dados dos clientes (aula 8).	O arquivo com as pastas dos clientes.
`treino.html` e `treino.js`	Uma página só para treinar JavaScript (aulas 4, 5 e 7).	A garagem onde se fazem experiências.
`sql-lab.html`	Um laboratório de SQL, já pronto (aula 11).	Uma sala especial que só vamos usar mais tarde.

Clica uma vez no index.html para o abrires. Repara nas linhas com : são marcadores que mostram onde vais colar código nas próximas aulas. Nunca os apagues.

Parte C — A tua primeira página web (≈ 30 min)

3 Criar o ficheiro `ola.html`

Uma página web é um ficheiro de texto com a terminação .html. Lá dentro, o texto está rodeado de etiquetas (em inglês, tags) que dizem ao browser o que cada coisa é: um título, um parágrafo, uma ligação… Uma etiqueta escreve-se entre < > e, quase sempre, tem uma de abrir e outra de fechar (com /): <h1>Olá</h1>.

No painel da esquerda do VS Code, passa o rato por cima de MEU-CRM e clica no ícone New File… (uma folha com um +).
Escreve o nome ola.html (tudo em minúsculas, sem acento) e carrega Enter. O ficheiro abre-se, vazio.
Carrega no botão 📋 Copiar do bloco abaixo, clica dentro do ficheiro vazio e cola com Ctrl+V.
Grava com Ctrl+S.

<!DOCTYPE html>
<html lang="pt-PT">
<head>
  <meta charset="UTF-8">
  <title>A minha primeira página</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Esta é a minha primeira página web.</p>
  <!-- PASSO 2: COLAR AQUI -->
</body>
</html>

Repara na estrutura, que é igual em todas as páginas web:

<!DOCTYPE html> avisa o browser de que isto é uma página HTML.
<head> é a “cabeça”: informação sobre a página que não aparece dentro dela (por exemplo, o <title>, que é o texto do separador do browser, e o charset="UTF-8", que faz os acentos aparecerem bem).
<body> é o “corpo”: tudo o que aparece no ecrã.

🤔 Prevê antes de abrir: o comentário  vai aparecer no ecrã? E onde vai aparecer o texto que está dentro de <title>? Escreve no caderno.

Agora abre a página: no painel da esquerda, clica com o botão direito no ola.html e escolhe Open with Live Server. O browser abre sozinho.

⚠️ Atenção: no mesmo menu há uma opção parecida, Open in Integrated Browser. Não é essa! Essa abre a página dentro do VS Code e esconde o código. Escolhe sempre Open with Live Server: a página abre no Chrome ou no Edge e o endereço começa por http://127.0.0.1:5500.

✅ Deves ver: no browser, o título grande Olá, mundo!, e a frase Esta é a minha primeira página web. O comentário não aparece. Na barra de endereço aparece algo como http://127.0.0.1:5500/ola.html.

💡 Põe o VS Code e o browser lado a lado: clica na janela do VS Code e carrega Windows+←; depois clica no browser e carrega Windows+→.

😕 Não funciona?

Não aparece «Open with Live Server» no menu do botão direito → olha para o canto inferior esquerdo do VS Code. Se lá aparecer Restricted Mode (modo restrito), o VS Code desligou as extensões porque não confia na pasta: clica em Restricted Mode e depois em Trust (Confiar). O menu passa a mostrar «Open with Live Server» e aparece Go Live na barra de baixo. Se não aparecer «Restricted Mode», a extensão não está instalada: volta ao passo 1.
Clico num ficheiro e aparece a página em vez do código (em cima, à direita, diz Integrated Browser) → abriste-o com Open in Integrated Browser. Fecha esse separador (no ✕) e volta a clicar no ficheiro: aparece o código. Para ver a página, usa sempre Open with Live Server.
A página está em branco → esqueceste-te de gravar (Ctrl+S). Um círculo branco no separador do ficheiro, no VS Code, quer dizer “não gravado”.
Aparecem símbolos estranhos em vez dos acentos (por exemplo Ã©) → apagaste a linha <meta charset="UTF-8">. Volta a copiar o bloco inteiro.
Plano B: se o Live Server não funcionar mesmo, faz duplo clique no ola.html no Explorador de Ficheiros e usa F5 sempre que gravares.

4 Personalizar a página e conhecer as etiquetas

Agora vais acrescentar a parte da página que fala de ti e da tua empresa. Copia o bloco e cola-o por baixo do comentário  (deixa o comentário ficar). Grava e olha para o browser.

<h2>Sobre mim</h2>
<p>Chamo-me <strong>[o teu nome]</strong> e estou no 12º ano de Informática de Gestão.</p>
<p>Este ano vou construir o meu próprio <em>CRM</em>: um programa para gerir clientes.</p>

<h2>A minha empresa (inventada)</h2>
<p>Nome: <strong>[inventa um nome]</strong></p>
<p>Setor: [ginásio, oficina, imobiliária, salão, loja, restaurante...]</p>
<a href="index.html">Ir para o meu Mini-CRM →</a>

Vamos conhecer as etiquetas que aqui aparecem:

Etiqueta	Para que serve	Exemplo
`<h1>` … `<h6>`	Títulos (heading). O `h1` é o mais importante (o maior); o `h2` é um subtítulo; e assim por diante.	`<h2>Sobre mim</h2>`
`<p>`	Um parágrafo de texto.	`<p>Olá a todos.</p>`
`<strong>`	Texto importante (aparece a negrito).	`<strong>Ana</strong>`
`<em>`	Texto com ênfase (aparece em itálico).	`<em>CRM</em>`
`<a href="…">`	Uma ligação (link). O `href` diz para onde vai.	`<a href="index.html">CRM</a>`
`<!-- … -->`	Um comentário: uma nota para quem lê o código. O browser não o mostra.	`<!-- isto é uma nota -->`

O href do <a> é um atributo: uma informação extra que se escreve dentro da etiqueta de abrir, na forma nome="valor".

Agora personaliza: no ola.html, troca os textos entre [ ] (apaga também os parênteses retos). Por exemplo, [o teu nome] passa a Joana Ferreira. Grava e olha para o browser.

🏢 Escolhe já a tua empresa inventada. O teu CRM vai ser de uma empresa fictícia de um setor à tua escolha: ginásio, oficina, imobiliária, salão de cabeleireiro, loja, restaurante, clínica veterinária, escola de condução… Inventa um nome (não uses empresas reais) e escreve-o, com o setor, no ola.html.

Cada aluno da turma deve ter um setor ou nome diferente: diz ao professor qual escolheste para ele apontar. Vais voltar a esta empresa na aula 17, para adaptar o CRM ao teu setor.

✅ Deves ver: mal gravas, a página no browser atualiza-se sozinha (é o Live Server a trabalhar) e aparecem o teu nome, o nome da tua empresa e o setor.

😕 Não funciona?

Ficou tudo a negrito a partir de certo ponto → apagaste um </strong>. Cada <strong> tem de ter o seu </strong>.
A página não muda → gravaste? Estás a ver o ola.html no browser (vê a barra de endereço)?
Apareceu «Sobre mim» duas vezes → colaste o bloco duas vezes. Apaga uma das cópias (desde <h2>Sobre mim</h2> até à ligação <a>).

5 Abrir o teu Mini-CRM pela primeira vez

Na tua página, clica na ligação Ir para o meu Mini-CRM →. Também podes, no VS Code, clicar com o botão direito no index.html e escolher Open with Live Server (não Open in Integrated Browser).

😕 Clicaste no index.html e, em vez do código, aparece a página dentro do VS Code (em cima, à direita, diz Integrated Browser)? Fecha esse separador (no ✕) e volta a clicar no index.html. Se ainda assim aparecer a página, clica em Integrated Browser e escolhe Text Editor.

✅ Deves ver: uma página muito simples, a preto e branco: o título Mini-CRM · Nome da Tua Empresa, a frase Gestão de clientes simples e rápida e, em baixo, Feito por O Teu Nome.

Está feio? É normal! Por agora o CRM é só “paredes” (HTML). Na aula 2 vamos pôr lá o formulário e a tabela de clientes e, na aula 3, as cores (CSS). Repara que os marcadores  não aparecem no ecrã: são comentários.

🔎 Investiga

No ola.html, troca <h1>Olá, mundo!</h1> por <h3>Olá, mundo!</h3>. O que muda? Volta a pôr como estava.
Muda o texto dentro de <title>, no <head>. Onde é que esse texto aparece no browser?
Num parágrafo, escreve várias palavras separadas por muitos espaços e por Enter. Como aparecem no browser? O que concluis?
No browser, clica com o botão direito na página e escolhe Ver código-fonte da página (ou Ctrl+U). O comentário está lá? Então porque é que não aparece na página?

✍️ Exercícios (fazem parte do teu projeto)

Estes exercícios não têm o código pronto: usa o que aprendeste hoje. Grava sempre e confirma no browser.

E1 · O CRM com o nome da tua empresa

No index.html, personaliza o teu CRM:

troca Nome da Tua Empresa pelo nome da tua empresa inventada;
troca o slogan Gestão de clientes simples e rápida por um slogan teu;
no rodapé, troca O Teu Nome pelo teu nome verdadeiro.

💡 Dica: muda só o texto que está entre o > de uma etiqueta e o < da seguinte. Não apagues o <span class="empresa"> nem as etiquetas <strong>: vão ser precisas mais tarde. O rodapé está dentro de <footer>, perto do fim do ficheiro.

E2 · Os serviços da tua empresa

No ola.html, no fim da página (antes de </body>), acrescenta o subtítulo «Os nossos serviços» e uma lista com pontos com 3 serviços da tua empresa.

💡 Dica: uma lista com pontos faz-se com <ul> (unordered list) e cada elemento da lista fica dentro de <li> … </li> (list item). Todos os <li> ficam dentro do <ul>. Para o subtítulo, que etiqueta de título usaste no «Sobre mim»?

⭐ Desafio · O logótipo

Acrescenta um logótipo da tua empresa ao topo do index.html (dentro do <header>, por cima do <h1>), usando a etiqueta <img src="…" alt="…">.

💡 Dica: faz ou escolhe uma imagem (pode ser um desenho simples) e guarda-a dentro da pasta meu-crm com um nome simples, em minúsculas e sem espaços nem acentos (ex.: logotipo.png). O src é o nome do ficheiro; o alt é uma descrição da imagem (para quem não a pode ver). O <img> não tem etiqueta de fechar. Se ficar enorme, experimenta o atributo width="80".

📦 O que mostrar ao professor

Tenho o VS Code com a pasta meu-crm aberta (e o Live Server instalado, ou o plano B a funcionar).
O ola.html abre no browser com o meu nome, o nome da minha empresa e o setor.
Sei explicar para que servem <h1>, <p> e <strong>.
Disse ao professor o nome e o setor da minha empresa.
E1: o index.html tem o nome da minha empresa, o meu slogan e o meu nome no rodapé.
E2: o ola.html tem a lista com 3 serviços.

⏱️ Se sobrar tempo

Faz o desafio ⭐.
No ola.html, faz uma lista numerada com os 3 dias da semana em que a tua empresa está aberta mais tempo (dica: troca <ul> por <ol>).
Acrescenta uma ligação para o site da tua escola, com <a href="https://…">.
Explora o VS Code: escreve p numa linha vazia do ola.html e carrega Tab. O que acontece?

🤖 Pedir ajuda à IA (opcional)

Uma IA gratuita (Claude, ChatGPT…) pode ajudar-te a ter ideias para a tua empresa inventada. Copia este pedido, troca o texto entre [ ] e cola-o na IA:

Se algo não aparecer como esperas, podes pedir que te expliquem o problema (sem te darem a solução):

📖 Palavras novas

CRM: Programa de gestão da relação com os clientes: guarda clientes, contactos e negócios de uma empresa.
Editor de código: Programa para escrever código, como o VS Code.
Extensão: Acrescento que dá novas funcionalidades ao VS Code (ex.: Live Server).
Live Server: Extensão que abre a página no browser e a atualiza sempre que gravas.
Browser: Programa para ver páginas web (Chrome, Edge, Firefox…).
Pasta comprimida (.zip): Ficheiro que junta vários ficheiros num só. Tem de ser descompactado (extraído) antes de se usar.
HTML: Linguagem que descreve o conteúdo e a estrutura de uma página web.
Etiqueta (tag): Marca entre < > que diz o que é um pedaço de texto, ex.: <p>. A de fechar tem /: </p>.
Atributo: Informação extra dentro da etiqueta de abrir, na forma nome="valor", ex.: href="index.html".
Comentário: Nota no código que o browser não mostra: .