Ficha 01 · Contexto móvel, abordagens, usabilidade e desenho adaptativo

Exercício 1 · Desktop vs móvel

Indica três diferenças concretas entre o contexto de uso de um site em computador de secretária e num telemóvel, e explica uma consequência prática de cada uma para o desenho da interface.

Exercício 2 · Escolher a abordagem certa

Para cada caso, indica se recomendarias uma aplicação nativa, híbrida, web app ou PWA, e justifica em uma frase: (a) jogo 3D competitivo com gráficos exigentes; (b) catálogo de produtos de uma loja pequena, sem orçamento para app; (c) app de bilhética de um festival, que precisa de funcionar offline e ter ícone no ecrã principal, sem equipa nativa dedicada.

Exercício 3 · A zona do polegar

Desenha (em texto) um ecrã de telemóvel dividido em três zonas de alcance do polegar e indica que tipo de elemento colocarias em cada zona: navegação principal, título da página, botão de ação primária (ex.: "Comprar").

Exercício 4 · Corrigir a área de toque

O código seguinte tem um botão de 20px de altura, sem espaçamento a outro botão ao lado. Reescreve o CSS para cumprir a área mínima de toque recomendada.

.btn { height: 20px; width: 50px; padding: 0; margin: 0; }

Exercício 5 · Mobile-first com media queries

Escreve o CSS de uma lista de cartões que aparece em 1 coluna no telemóvel, 2 colunas a partir dos 700px, e 3 colunas a partir dos 1100px, seguindo a abordagem mobile-first.

Exercício 6 · Unidades relativas

Explica, com um exemplo de cada, a diferença entre rem, em e vw, e diz qual usarias para definir o tamanho de letra de um parágrafo, de forma a respeitar as preferências de acessibilidade do utilizador.

Exercício 7 · Imagens adaptativas

Um catálogo mostra uma imagem de produto que deve ocupar 100% da largura no telemóvel e 50% a partir dos 600px. Escreve o HTML com srcset e sizes para que o browser escolha a imagem certa em cada caso.