Material Pedagógico

Conjunto de slides usados na aulas teóricas da UC no ano letivo 2025/2026

Conceitos Base

HCI
User Experience
Conceitos relacionados
Usabilidade
Affordances
Modelo de Interação de Norman
Fosso da Avaliação
Fosso da Execução

Human Centered Design

Human Centered Design (HCD)
Conhecer os utilizadores (perfis, necessidades, contextos)
HCD: Fases

Usabilidade

Desenhar para usabilidade máxima
Princípios de usabilidade (Learnability, Flexibility, Robustness)

Usabilidade (continuação)

Guidelines de usabilidade
Heurísticas de usabilidade
Heurísticas de Nielsen
Avaliação Heurística: Dicas
Exemplo

The Web
Elementos HTML
Atributos HTML
Document Object Model (DOM)
HTML → DOM
HTML Parsing
HTML: Listas
HTML: Tabelas
HTML: Formulários
Markup semântico
Navegação (com o teclado e alternativa)
CSS
Estilos CSS
Cascading Style Sheets
Exemplos
Simple Selectors
Compound Selectors
Complex Selectors
Selector Lists
Pseudo-classes
Propriedades CSS
Responsive Web Design
Resilient Web Design
Media queries

JavaScript

JavaScript
Aparência
Sintaxe
Objetos
Tipos
Funções
Modelo de execução
Ambiente de execução
DOM tree
Event object
User events
Browser events
Exemplo
Event processing
Exemplos

Modelação Conceptual

Modelo mental
Modelo conceptual
Software concepts
Conceptual modeling
Concepts: Trash
Exemplos
Concepts (Composição e Mapeamento)

Web Frameworks

Web Frameworks
Trend: Virtual DOM
Web Frameworks: Modularização
Trend: Components
Web Frameworks: Architectures

Web Components

Components na Web
Web Components
Exemplos
Ciclo de vida de um Custom Element

Introdução a Vue.js

Arquitectura
Setup
Bootstrap
Exemplo
Reactive data (Model)
Computed properties (Model)
Watchers (ViewModel)
Data binding (ViewModel)
Event binding (ViewModel)
Two-way binding (ViewModel)
Exemplo

Componentes em Vue.js

Condicionais
Iteração
Exemplo
JSON server
JSON server (REST)
Exemplo
Fetch API (JS)
Promises (JS)
Lifecycle hooks
Components (lifecycle, props, emits, slots)

Routing em Vue.js

Routing
SPAs ⇒ “MPAs”
Vue Router
Exemplo
Setup
Route properties
Dynamic routes
Exemplo

State Management em Vue.js

State Management em Vue
Exemplo
Provide / Inject
Pinia
Setup
Exemplo

Web Accessibility

The Web
Disability?
Web Accessibility
Accessible < Inclusive < Universal Design
Web Accessibility
Web Content Accessibility Guidelines
Assistive Technologies
WAI-ARIA
The 5 rules of ARIA
Keyboard Navigation
WCAG Conformance Levels
Some WCAG Best Practices
WCAG Compliance

Avaliação de Interfaces

Usability Evaluation
Evaluation Methods
Assessment Methods
Heuristic Evaluation
Cognitive Walkthrough
Analytical Methods
Empirical Methods
Usability Testing
PSSUQ (Post-Study Usability Questionnaire)
SUS (System Usability Scale)
UEQ (User Experience Questionnaire)
NASA TLX (Task Load Index)
Field Studies
Controlled Experiments