Bloco 1 · CMS e sites dinâmicos

O que é um CMS

CMS = Content Management System (Sistema de Gestão de Conteúdos).

• Software que permite criar e gerir um website sem programar do zero.
• Separa o conteúdo (textos, imagens) do código e do design (tema).
• Quem publica usa um painel de administração visual.

Exemplos: WordPress (≈43% da web), Joomla, Drupal, Wix, Shopify.
Nesta UC usamos o WordPress — gratuito, standard do mercado, com milhares de temas e plugins.

Site estático vs dinâmico

Um CMS é dinâmico: quando alguém abre uma página, o servidor corre PHP, vai buscar o conteúdo à base de dados e devolve o HTML já montado.

A stack do WordPress

WordPress precisa de 4 peças — o chamado stack AMP (Apache, MySQL, PHP):

• Servidor web (Apache) — recebe os pedidos do browser.
• PHP — a linguagem que gera as páginas.
• MySQL/MariaDB — a base de dados onde vive o conteúdo.
• WordPress — o CMS em si (ficheiros PHP).

Num computador de aula, instalamos tudo isto de uma vez com o XAMPP.

Bloco 2 · Servidor local

Porquê um servidor local

Para desenvolver antes de pôr o site online, corremos tudo no próprio PC — o localhost.

• XAMPP = Apache + MariaDB (MySQL) + PHP + phpMyAdmin, num só instalador (Windows/Mac/Linux).
• Depois de instalar, abre-se o Painel de Controlo do XAMPP e ligam-se os módulos Apache e MySQL (botão Start).
• O site fica acessível em http://localhost.

Alternativas: Local by Flywheel, MAMP, Laragon. A lógica é a mesma.

Estrutura do XAMPP

• Os sites vivem na pasta htdocs (ex.: C:\xampp\htdocs\).
• Cada subpasta de htdocs é um site: htdocs/loja → http://localhost/loja.
• O phpMyAdmin abre em http://localhost/phpmyadmin.

Passos:

1. Instalar o XAMPP.
2. Iniciar Apache + MySQL no painel.
3. Confirmar que http://localhost mostra a página do XAMPP.

Se o Apache não arrancar, quase sempre é a porta 80 ocupada (Skype, IIS) → mudar para 8080.

Bloco 3 · Base de dados

O que guarda a base de dados

Todo o conteúdo do WordPress fica em tabelas MySQL: posts, páginas, utilizadores, definições, comentários.

• Uma instalação WP cria ~12 tabelas (wp_posts, wp_users, wp_options…).
• Gerimos a BD com o phpMyAdmin (interface web para o MySQL).
• Conceitos-chave: tabela, registo (linha), campo (coluna), chave primária.

Sem base de dados não há site — por isso é o primeiro passo antes de instalar o WordPress.

Criar a base de dados (phpMyAdmin)

1. Abrir http://localhost/phpmyadmin.
2. Separador Bases de dados → nome, ex.: loja_wp → Criar.
3. (Boa prática) criar um utilizador dedicado à BD:
   • Separador Contas de utilizador → Adicionar.
   • Nome loja_user, palavra-passe forte, host localhost.
   • Dar todos os privilégios apenas na base loja_wp.

Guarda 3 dados — vais precisar já a seguir: nome da BD, utilizador, palavra-passe.

Segurança da base de dados

• Nunca usar o utilizador root sem palavra-passe num site real.
• Um utilizador por base de dados, com privilégios mínimos.
• Palavra-passe forte (12+ caracteres, mistos).
• Backups regulares da BD (exportar .sql no phpMyAdmin: Exportar → Executar).

A BD é o ativo mais valioso do site: se a perdes, perdes tudo.

Bloco 4 · Instalar o WordPress

Passos da instalação

1. Descarregar o WordPress em wordpress.org (.zip).
2. Extrair para htdocs/loja.
3. Abrir http://localhost/loja → arranca o instalador (famous 5-minute install).
4. Escolher idioma → Português (Portugal).
5. Introduzir os dados da base de dados (nome, utilizador, palavra-passe, host localhost).
6. Definir o título do site e a conta de administrador (utilizador + palavra-passe fortes + email).
7. Instalar → login em http://localhost/loja/wp-admin.

O ficheiro wp-config.php

O instalador cria o wp-config.php com a ligação à base de dados:

define( 'DB_NAME', 'loja_wp' );
define( 'DB_USER', 'loja_user' );
define( 'DB_PASSWORD', '••••••••' );
define( 'DB_HOST', 'localhost' );
$table_prefix = 'wp_';   // mudar (ex.: wpx_) reforça segurança

É o ficheiro mais sensível do site — nunca partilhar nem versionar com as passwords.

Bloco 5 · Painel de administração

O wp-admin

O backend (/wp-admin) é onde se gere tudo. Menu principal:

• Painel — visão geral.
• Artigos (posts) e Páginas — o conteúdo.
• Media — biblioteca de imagens/ficheiros.
• Aparência — temas, personalizar, menus, widgets.
• Plugins — extensões.
• Utilizadores — contas e perfis.
• Definições — leitura, escrita, ligações permanentes (permalinks).

O frontend é o site que o visitante vê. Editas no backend, publicas no frontend.

Configurações essenciais (Definições)

Logo após instalar:

• Definições → Gerais: título, descrição, fuso horário.
• Definições → Leitura: página inicial (últimos artigos ou página estática).
• Definições → Ligações permanentes: mudar para Nome do artigo (/sobre-nos/) — melhor para SEO e leitura.
• Definições → Discussão: moderar/​desligar comentários se não forem precisos.

Artigos vs Páginas: Artigos = conteúdo cronológico (blog, notícias); Páginas = conteúdo fixo (Sobre, Contactos).

Bloco 6 · Planear o site

Antes de construir: planear

Nunca se começa a construir às cegas. Duas ferramentas:

• Mapa do site (sitemap) — diagrama em árvore das páginas e da sua hierarquia (menus, submenus).
• Wireframe — esboço do layout de cada página (onde fica o header, conteúdo, sidebar, footer), sem cores nem conteúdo real.

Fazem-se em papel, no Figma, ou no diagrams.net. Poupam horas de retrabalho.

Exemplo de mapa do site (loja)

Início
├── Loja
│   ├── Categoria A
│   └── Categoria B
├── Sobre nós
├── Blog
│   └── Artigo
└── Contactos

O menu principal reflete o 1.º nível; as categorias podem ir a submenus ou à sidebar. Este diagrama guia a criação de páginas e menus a seguir.

Bloco 7 · Temas

Temas (aparência)

O tema define o design do site (cores, tipografia, layout) sem tocar no conteúdo.

• Aparência → Temas → Adicionar → milhares de temas gratuitos (ex.: Astra, Twenty Twenty-Five, OceanWP).
• Instalar → Ativar.
• Trocar de tema muda o aspeto, não apaga os conteúdos.

Escolher um tema leve e compatível com o editor de blocos.

Personalizar

• Aparência → Personalizar (ou editor de site nos temas modernos): logótipo, cores, tipos de letra, cabeçalho, rodapé.
• Editor de blocos (Gutenberg) — o conteúdo faz-se com blocos (parágrafo, imagem, colunas, botão, galeria).
• Não editar diretamente os ficheiros do tema → usar um tema-filho (child theme) se for mesmo preciso mexer no código, para não perder as alterações nas atualizações.

Bloco 8 · Plugins e conteúdos

Plugins e widgets

• Plugins — adicionam funcionalidades (SEO, formulários, loja, segurança, cache). Plugins → Adicionar → Instalar → Ativar.
• Widgets — pequenos blocos em áreas fixas (sidebar, rodapé): pesquisa, últimos artigos, menu.

Plugins úteis: Yoast SEO (referenciação), Contact Form 7 / WPForms (formulários), WooCommerce (loja), UpdraftPlus (backups), Wordfence (segurança).

Menos é mais — cada plugin é código extra: mais lento e mais superfície de ataque. Instalar só o necessário e de fontes de confiança.

Páginas, menus e conteúdos

• Páginas → Adicionar nova: título + blocos (texto, imagem, vídeo, botão, colunas, formulário, mapa via bloco/plugin).
• Media: carregar imagens (comprimir antes; definir texto alternativo para acessibilidade).
• Aparência → Menus: criar o menu principal, arrastar páginas, definir a localização (cabeçalho).
• Criar, editar e remover páginas/artigos conforme o mapa do site.

Conteúdo web = ícones, botões, texto, imagem, vídeo, formulários e mapas — combinados com equilíbrio.

Bloco 9 · Loja online

WooCommerce

Para vendas online, o plugin WooCommerce transforma o WordPress numa loja:

1. Plugins → Adicionar → WooCommerce → Instalar → Ativar.
2. Assistente: morada da loja, moeda (EUR), tipos de produto, impostos.
3. Cria automaticamente as páginas Loja, Carrinho, Finalizar compra, Conta.

Produtos e pagamentos

• Produtos → Adicionar: nome, descrição, preço, imagem, categoria, stock (SKU, quantidade).
• Tipos: simples, variável (tamanhos/cores), virtual/descarregável.
• WooCommerce → Definições → Pagamentos: ativar métodos —
  transferência bancária, à cobrança, e passarelas como MB Way/Multibanco (IfThenPay), PayPal, Stripe.
• Envios: zonas e portes.

Testar sempre uma compra completa antes de abrir ao público.

Bloco 10 · Segurança e boas práticas

Utilizadores e perfis

O WordPress tem perfis (roles) com privilégios diferentes:

Regra de ouro: dar a cada pessoa o mínimo de que precisa. Um só administrador.

Segurança do site

• Palavras-passe fortes + autenticação em 2 passos (plugin).
• Atualizar sempre WordPress, tema e plugins (correções de segurança).
• Plugin de segurança (Wordfence): firewall, limite de tentativas de login.
• Mudar o wp_ do prefixo das tabelas; esconder a versão do WP.
• HTTPS (certificado SSL) em produção.

A maioria dos sites hackeados estava desatualizada.

Backups

• UpdraftPlus (ou o painel do alojamento): backup de ficheiros + base de dados.
• Agendar (ex.: semanal) e guardar fora do servidor (Drive, Dropbox).
• Testar o restauro — um backup que não se restaura não vale nada.
• Antes de qualquer atualização grande: backup primeiro.

Acessibilidade, direitos de autor e RGPD

• Acessibilidade — texto alternativo nas imagens, bom contraste, navegação por teclado, legendas em vídeo (WCAG).
• Direitos de autor — usar só imagens/texto com licença (bancos livres, Creative Commons) e atribuir quando exigido; nunca copiar sem permissão.
• RGPD — página de política de privacidade, banner de cookies (plugin), recolher só os dados necessários (formulários), e permitir acesso/eliminação. O WooCommerce guarda dados de clientes → tratar com cuidado.