NOTAS DO PROFESSOR 📖 A thumb zone A thumb zone é o conceito que melhor mostra como o design mobile parte da ergonomia da mão, não da estética do ecrã de desktop. Convém que os alunos percebam que segurar o telemóvel com uma mão é o caso de uso mais comum e que isso condiciona onde colocar cada elemento. Pedir-lhes para criticarem apps que já usam, à luz das zonas verde/amarela/vermelha, torna a aula muito concreta. 🗣️ Pontos a desenvolver oralmente • Pedir aos alunos que peguem no telemóvel e testem o alcance do polegar • Analisar uma app real e classificar a posição dos seus botões principais • Discutir porque o menu hambúrguer no topo é polémico em acessibilidade

NOTAS DO PROFESSOR 📖 Touch targets e viewports Este slide reúne três fundamentos técnicos que separam um site mobile funcional de um frustrante: alvos de toque grandes, a meta tag de viewport correta e breakpoints sensatos. Importa frisar que o número 44px não é arbitrário — é a média da ponta de um dedo — e que esquecer a viewport tag é um erro clássico de principiante. Estes valores devem ficar como referência prática para os projetos. 🗣️ Pontos a desenvolver oralmente • Mostrar o efeito de esquecer a viewport tag num telemóvel real • Justificar os 44/48px com a anatomia do dedo e os erros de toque • Explicar que os breakpoints são guias, não regras rígidas

NOTAS DO PROFESSOR 📖 Gestos em mobile Os gestos são uma linguagem que o utilizador já domina — desde que se respeitem as convenções. A mensagem central é não inventar gestos sem dar pista visual, porque o que é invisível não é descoberto. O comportamento do botão back em Android é um detalhe que distingue apps cuidadas de apps amadoras e vale a pena destacá-lo. 🗣️ Pontos a desenvolver oralmente • Mapear cada gesto ao padrão de uso esperado (swipe, long press, pinch) • Dar exemplos de gestos "escondidos" que falham por falta de pista visual • Explicar a importância do comportamento correto do back no Android

NOTAS DO PROFESSOR 📖 As três abordagens de desenvolvimento mobile É importante que os alunos percebam que não existe a "melhor" abordagem em absoluto — cada uma resolve um problema diferente de custo, alcance e acesso ao hardware. A PWA merece destaque por ser construída com as tecnologias web que já conhecem, dando capacidades de app sem o custo do desenvolvimento nativo. Este enquadramento prepara a tabela de decisão do slide seguinte. 🗣️ Pontos a desenvolver oralmente • Dar um exemplo real de produto para cada abordagem • Explicar o que é exatamente uma PWA e o que a distingue de um site normal • Discutir quando o acesso completo ao hardware justifica ir para nativo

NOTAS DO PROFESSOR 📖 Tabela de decisão entre abordagens Esta tabela transforma a discussão anterior numa ferramenta de decisão concreta, comparando critério a critério. Vale a pena treinar os alunos a usá-la perante um briefing fictício: dado um orçamento e um requisito, qual a abordagem que recomendam e porquê. A nota de que as PWA já suportam push notifications em iOS (16.4+) é uma atualização recente que muda a tabela face a manuais antigos. 🗣️ Pontos a desenvolver oralmente • Propor um cenário de cliente e pedir uma recomendação justificada • Destacar a evolução recente do suporte a PWA em iOS • Relacionar cada linha da tabela com um custo ou risco do projeto

NOTAS DO PROFESSOR 📖 Padrões de leitura em mobile Os padrões F e Z descrevem como os olhos realmente percorrem um ecrã — varrendo, não lendo tudo. A lição prática é colocar a informação crítica onde o olhar passa: topo, início das frases e antes do fold. Mostrar mapas de calor reais de eye-tracking torna este conceito tangível e convincente. 🗣️ Pontos a desenvolver oralmente • Distinguir quando se aplica o padrão F (muito texto) e o Z (mais visual) • Mostrar mapas de calor de eye-tracking se possível • Reforçar a regra de pôr o essencial antes do fold

NOTAS DO PROFESSOR 📖 Escrever para mobile Escrever para mobile é um exercício de subtração: cortar tudo o que não acrescenta valor, porque o ecrã é pequeno e a atenção é curta. A regra de começar pelo verbo e usar labels de botão específicos — "Ver menu" em vez de "Clique aqui" — é simples e de aplicação imediata nos projetos. Vale a pena praticar reescrevendo em aula textos demasiado longos. 🗣️ Pontos a desenvolver oralmente • Reescrever em conjunto uma frase longa numa versão mobile-first • Contrastar labels de botão vagos com labels de ação concretos • Explicar porque a linguagem passiva prejudica a leitura em scan

NOTAS DO PROFESSOR 📖 Porque a performance mobile é crítica Os dados deste slide servem para ancorar a performance num argumento de negócio, não apenas técnico: um site lento perde metade dos visitantes em 3 segundos. É importante explicar o contexto físico do mobile — redes mais lentas, CPU limitado, uso em movimento — porque é isso que justifica todas as otimizações seguintes. A ligação ao ranking do Google reforça que não é opcional. 🗣️ Pontos a desenvolver oralmente • Traduzir os 3 segundos / 53% de abandono em perda concreta de clientes • Explicar como o contexto mobile difere do desktop em rede e hardware • Referir o mobile-first indexing do Google como incentivo ao negócio

NOTAS DO PROFESSOR 📖 Core Web Vitals em mobile As três métricas — LCP, INP e CLS — medem aspetos distintos da experiência: velocidade de carga, resposta à interação e estabilidade visual. Convém associar cada métrica a uma sensação concreta do utilizador, porque os números só fazem sentido quando ligados ao que se sente. A lista de otimizações dá-lhes ações práticas para melhorar cada uma delas nos projetos. 🗣️ Pontos a desenvolver oralmente • Associar cada Web Vital a uma frustração concreta do utilizador • Mostrar uma análise no PageSpeed Insights de um site real • Ligar cada otimização da lista à métrica que melhora

NOTAS DO PROFESSOR 📖 Princípios de push notifications As notificações são uma faca de dois gumes: o canal de maior CTR, mas também o mais fácil de tornar irritante ao ponto de o utilizador as desativar. A linha que separa o útil do intrusivo é o valor real para quem recebe, não o interesse de quem envia. Pedir aos alunos exemplos de notificações que já desativaram torna a discussão imediata. 🗣️ Pontos a desenvolver oralmente • Pedir exemplos de notificações que os próprios alunos já desligaram • Distinguir notificação com valor real de notificação de pura retenção • Discutir o custo de desinstalação que uma má estratégia de push provoca

NOTAS DO PROFESSOR 📖 Copywriting de notificações O contraste entre as colunas "mau" e "bom" é a melhor ferramenta pedagógica deste slide: a versão boa é sempre específica e pessoal, a má é genérica. Os limites de caracteres (50 para título, 100 para corpo) não são detalhe — são impostos pelos próprios sistemas operativos que truncam o resto. Vale a pena fazer um exercício de reescrita em aula. 🗣️ Pontos a desenvolver oralmente • Analisar par a par a tabela e nomear o que torna cada "bom" melhor • Explicar porque os limites de caracteres existem (truncagem do SO) • Propor um exercício rápido de reescrita de notificações fracas

NOTAS DO PROFESSOR 📖 Emuladores vs dispositivos reais A mensagem-chave é que o emulador é ótimo para iterar depressa em layout, mas mente sobre a performance e não testa hardware nem gestos reais. Convém deixar claro que nenhum projeto profissional sai sem teste em dispositivo real, mesmo que seja apenas um. Os serviços cloud (BrowserStack e afins) são a ponte realista entre não ter dispositivos e testar em muitos. 🗣️ Pontos a desenvolver oralmente • Listar o que o emulador NÃO consegue testar (performance, gestos, hardware) • Insistir que pelo menos um teste em dispositivo real é obrigatório • Apresentar os serviços cloud como alternativa quando faltam aparelhos

NOTAS DO PROFESSOR 📖 Debugging mobile O remote debugging dá aos alunos uma superpotência: inspecionar e corrigir o site diretamente no browser do telemóvel a partir do computador. Convém demonstrar o fluxo ao vivo, tanto Android (chrome://inspect) como iOS (Web Inspector do Safari), porque ver acontecer fixa melhor que descrever. O alerta sobre o iOS Safari é especialmente útil — é a origem da maioria das surpresas em produção. 🗣️ Pontos a desenvolver oralmente • Demonstrar ao vivo o chrome://inspect com um telemóvel ligado • Mostrar o equivalente em iOS com o Web Inspector do Safari • Avisar para os bugs típicos de iOS Safari e o overflow horizontal

NOTAS DO PROFESSOR 📖 Síntese: mobile como contexto principal A frase de fecho condensa toda a unidade: mobile não é uma versão reduzida do desktop, é o ponto de partida. Vale a pena usar este slide para rever a cadeia completa — da thumb zone aos testes — pedindo aos alunos que liguem cada etapa a uma decisão de projeto. É o momento de reforçar a mentalidade mobile-first antes de avançarem para o trabalho prático. 🗣️ Pontos a desenvolver oralmente • Percorrer a cadeia do resumo e pedir um exemplo de aplicação por etapa • Discutir o que significa, na prática, projetar "mobile-first" • Recolher dúvidas finais antes de iniciar o projeto da unidade