Linguagens e Tecnologias Web
Construir páginas com HTML e CSS, programar o cliente e o servidor, e explicar HTTP, segurança, expressões regulares e XML.
Ao carregar em Reservar no catálogo, o navegador envia um pedido HTTP ao servidor. O HTML define o formulário, o CSS dispõe os campos e o JavaScript pode atualizar a página sem a carregar de novo. O PHP valida o pedido e consulta a base de dados antes de confirmar a reserva.
Escolhes um livro e indicas a quantidade. O pedido inclui o identificador do livro e essa quantidade. A sessão identifica o utilizador; o servidor verifica a permissão e o stock. Depois responde com HTML ou JSON. Se a quantidade for zero ou o utilizador não tiver permissão, a resposta deve explicar a recusa sem revelar detalhes internos.
Vamos usar um catálogo de livros e pequenas reservas como fio condutor. São exemplos e exercícios próprios, não resoluções de provas oficiais. Precisas de funções, ciclos e estruturas de dados, SQL básico e uso de Git.
Percurso de estudo
- HTML e estrutura semântica. Escolher elementos, construir formulários e prever os dados enviados.
- CSS, caixa e layout. Resolver seletores e cascata, medir caixas e construir layouts responsivos.
- PHP e páginas dinâmicas. Validar pedidos, consultar SQLite e organizar páginas, ações e sessões.
- JavaScript e DOM. Seguir variáveis e funções, alterar a árvore e responder a eventos.
- HTTP e Ajax. Ler mensagens, usar JSON, lidar com promessas e distinguir origem de autenticação.
- Segurança web. Identificar o que o atacante controla e escolher uma defesa para cada fronteira.
- Expressões regulares. Construir padrões, prever o primeiro resultado e interpretar capturas.
- XML e XPath. Distinguir boa formação de validade e selecionar nós com contexto e namespaces.
Cada lição tem exemplos resolvidos e exercícios no fim. Prevê o resultado antes de correres o exemplo, porque é aí que descobres o que ainda não percebeste. Depois altera um dado, uma condição ou um seletor e explica a diferença. A Cheat sheet serve para consultar regras depois de as estudares.
O percurso segue o programa de 2025/26 e a sequência pública de aulas do docente. A ficha de 2026/27 confirma a UC (L.EIC019, 2.º ano, 2.º semestre, 6 ECTS, regência de André Restivo, 2 h teóricas e 2 h teórico-práticas semanais), mas não publica programa, objetivos nem avaliação. A página do docente mantém a edição 2025/26. Consulta a ficha dessa edição e o Moodle para os tópicos e regras aplicáveis.
Para treinar em conjunto, implementa uma reserva que começa num formulário, valida no PHP, usa uma consulta preparada, identifica o utilizador pela sessão e devolve uma resposta. Confirma o pedido no separador Rede do navegador. Repete com quantidade zero, parâmetro ausente e utilizador sem permissão.
Ambiente dos exemplos
Os editores HTML/CSS/JavaScript executam numa pré-visualização isolada sem rede. Mostram DOM, eventos e layout; não fazem pedidos ao teu servidor. Os blocos PHP usam PHP 8.4 numa origem separada. A ficha de 2025/26 indica PHP 7.4 e sqlite3. As regras de conversão e funcionalidades variam com a versão, por isso confirma o ambiente pedido pelo docente.
Para uma aplicação com vários ficheiros, usa o ambiente indicado na aula e cria a base de dados a partir do script SQL. Mantém a base e os ficheiros privados fora da pasta pública. Na raiz do projeto, corre php -S localhost:8000 -t public, se public/ for a pasta das páginas acessíveis. Abre http://localhost:8000/; abrir o ficheiro PHP diretamente não o executa. Este servidor serve para desenvolvimento local.
Avaliação de 2025/26
A ficha de 2025/26 define 50% de exame e 50% de trabalho, com mínimo de 8/20 no exame. Frequência exige participar e entregar o projeto, sem ultrapassar 25% de faltas às práticas e teórico-práticas. A entrega antecede a apresentação na última semana de aulas.
Quem conserva a frequência anterior informa o responsável na primeira semana e não se inscreve nas turmas TP. Trabalhadores-estudantes cumprem os mesmos prazos e combinam apresentações intermédias. O exame pode melhorar no recurso da mesma edição; o projeto não. Melhorar um projeto de uma edição anterior já aprovada exige frequentar novamente a UC.
A página do docente divide os 50% de projeto em 10% e 40%. Os detalhes protegidos de exame, projeto e algumas soluções não estavam disponíveis nesta revisão. Confirma formatos, datas, recursos permitidos e regras de 2026/27 no Moodle e na ficha dessa edição. Estes apontamentos não garantem uma classificação nem substituem esses materiais.
Materiais e bibliografia
O Moodle de 2025/26 remete para a página de André Restivo, com slides e propostas práticas. Os slides nem sempre identificam o ano de produção. As notas e slides ligados pelo arquivo incluem versões históricas; exemplos antigos podem usar APIs ou opções que exigem confirmação no ambiente atual. XML e XPath mantêm-se no percurso porque constam da ficha de 2025/26, embora não apareçam no calendário público mais recente do docente. As explicações e soluções destas páginas foram escritas de novo.
- Slides e exercícios de André Restivo. Segue a sequência de aulas e consulta o enunciado original de cada prática.
- Common Mistakes in the Exam, LTW 2023, no arquivo Accio. O documento destaca âmbito PHP, callbacks e frações de grelha; orienta aplicações próprias sem confirmar o formato atual do exame.
- Âmbito de variáveis PHP, capturas em funções anónimas e referências em foreach.
- Remoção de listeners, incluindo identidade da função e opção de captura.
- Exemplo Chinook do docente. Observa a separação entre páginas, templates, ações e base de dados. Código de demonstração antigo pode usar práticas que precisam de correção, incluindo SHA-1 para palavras-passe.
- Elizabeth Castro e Bruce Hyslop, HTML5 & CSS3: Visual QuickStart Guide, 2011, ISBN 0-321-71961-1.
- David Flanagan, JavaScript: The Definitive Guide, 2011, ISBN 0-596-80552-7.
- Anders Møller e Michael I. Schwartzbach, An Introduction to XML and Web Technologies, ISBN 0-321-26966-7.
Os três livros constam da bibliografia da ficha. As regras normativas de HTTP/1.1 e JSON estão nas RFC 9112 e RFC 8259. Para XML e XPath, consulta as normas XML 1.0 e XPath 1.0. Para pormenores atuais de APIs, consulta MDN Web Docs, manual do PHP e SQLite. Para os contextos de saída e defesas de segurança, consulta as cheat sheets da OWASP sobre XSS, CSRF e palavras-passe.
A norma HTML define quais os controlos que contribuem para os pares enviados por um formulário.
Vídeos para rever
- Escolher elementos sem CSS. Panorama de HTML para rever estrutura e apresentação antes de escolheres os elementos.
- Ler mensagens HTTP. Segue uma mensagem e distingue linha inicial, cabeçalhos e corpo.
- Recursos e métodos. Relaciona recursos e métodos e verifica por que JSON, por si, não define REST.
- Injeção SQL. Vê onde a entrada muda a sintaxe e como os marcadores a impedem.
- Closures e eventos. Panorama da linguagem antes de seguires variáveis em closures e eventos.
- Peças de um padrão. Observa classes, grupos e quantificadores e prevê a correspondência.
Os vídeos são complementos. O programa e as regras de avaliação vêm da FEUP.