Astra profundo · Capítulo 9 de 31 · 30 min
Adaptar a experiência ao espaço disponível
Você sai com uma revisão de responsividade que preserva a tarefa em telas largas e estreitas.
Este capítulo faz parte do curso gratuito Astra profundo.
A página do Estúdio Aurora, caso fictício, foi aprovada no computador. No celular, o título ocupa mais linhas, a fotografia muda de recorte e a agenda precisa caber em uma área menor. Você vai adaptar a composição a essas condições mantendo a escolha da visita como prioridade. A entrega será uma versão revisada com evidências das larguras examinadas.
Imagine reorganizar uma exposição para uma sala menor. Os objetos continuam importantes, mas a circulação e a proximidade mudam. Na página, responsividade é a capacidade de reorganizar conteúdo e controles conforme o espaço disponível. Diminuir todos os elementos na mesma proporção preserva uma imagem da composição, porém a tarefa exige leitura, toque e sequência adequados ao novo contexto.
O que muda e o que permanece
| Elemento | Adaptação possível | Relação preservada |
|---|---|---|
| Abertura | Texto e imagem passam para sequência vertical | Mensagem antes da escolha |
| Fotografia | Recorte dirigido ao assunto | Significado visual da visita |
| Agenda | Opções ocupam a largura disponível | Horário próximo de sua ação |
| Navegação | Acesso compacto às seções | Rótulos reconhecíveis |
| Formulário | Campos em uma coluna | Orientação junto ao campo |
No exemplo resolvido, o Aurora coloca a fotografia abaixo da apresentação na tela estreita. O título cresce em altura sem cobrir a imagem. A agenda usa opções em sequência, cada uma com horário, breve descrição e ação. A área da fotografia preserva o objeto principal por meio de um recorte escolhido. A composição ganha outra disposição, mas a pessoa continua entendendo a visita antes de selecionar a opção.
Aprofunde as decisões desta aula
Quais informações precisam permanecer próximas?
Comece pelo conteúdo que precisa permanecer junto. Nome da visita, horário e ação de escolha formam uma unidade. Uma descrição de apoio pode mudar de posição, enquanto essa relação continua visível. Defina também o que pode ganhar apresentação resumida. A galeria pode mostrar menos itens simultaneamente e permitir exploração; a agenda precisa continuar oferecendo uma comparação compreensível.
Como escolher larguras de revisão e testar o conteúdo real?
Escolha pontos de mudança olhando o conteúdo. Se duas colunas deixam a descrição apertada, reorganize quando essa relação deixa de funcionar. Examine também larguras intermediárias: uma página pode parecer adequada nos extremos e perder ritmo entre eles. Para o exercício, use uma tela larga, uma intermediária e uma estreita como amostras de revisão. Elas são condições didáticas, não uma lista universal de aparelhos. O texto real é um instrumento de verificação. Experimente um nome de exposição mais longo, amplie o texto e veja se controles continuam localizáveis. Uma altura fixa pode servir a uma peça específica, mas precisa acomodar o conteúdo efetivo. Ao orientar Astra, explique a prioridade e o comportamento desejado, permitindo que a implementação use medidas flexíveis onde isso favoreça a leitura.
Registre capturas nas mesmas condições antes e depois da revisão. Marque o que mudou no título, no recorte e na agenda. Quando houver navegador disponível, percorra a experiência, pois uma captura não mostra abertura de menu, foco ou seleção. O critério de pronto reúne aparência e tarefa: o visitante lê a proposta, encontra a agenda e escolhe sem perder o contexto.
Faça agora: compare três condições de espaço
Reserve dez minutos para leitura e preparação e 20 para inspeção e ajuste.
Passo 1: Escolha as larguras
Prepare visualizações ampla, intermediária e estreita.
Deu certo quando: Você registra as condições da comparação.
Passo 2: Siga a tarefa
Leia a proposta e localize a escolha de horário em cada condição.
Deu certo quando: As relações importantes ficam visíveis.
Passo 3: Ajuste uma região
Reorganize o trecho que mais interfere na leitura ou ação.
Deu certo quando: O conteúdo passa a caber com sua prioridade preservada.
Passo 4: Confira novamente
Repita o percurso e salve capturas da versão escolhida.
Deu certo quando: A melhoria aparece nas condições examinadas.
No fim você tem: Uma página adaptada e um registro visual da revisão de responsividade.
A disposição muda conforme o espaço e o conteúdo. Elementos ligados à mesma decisão permanecem próximos. Registrei as larguras e interações realmente examinadas.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- Frontend vs Backendsugerido pelo grafoApresenta o conceito “Frontend”, usado em “Adaptar a experiência ao espaço disponível”.
- CursoEscrever bem com IAsugerido pelo grafoAs primeiras aulas do Astra pedem um briefing com referências e dirigem cada iteração por texto. O curso de escrita ensina a decidir o que pedir, dar contexto e conferir a saída, que é a base dessas aulas. Ordem decidida quando o Astra ganhou uma página por aula (Etapa 4, wave 3), para que as 31 aulas mostrem o que estudar antes.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo4 capítulos de “Astra profundo” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Frontends com VibecodingDirigir o prompt e avaliar a entrega do agenteExaminar conexões de Dirigir o prompt e avaliar a entrega do agente
- MCP com Chrome: Automação com IAFazer o agente ler a página em texto em vez de fotografarExaminar conexões de Fazer o agente ler a página em texto em vez de fotografar
- Saúde Mental para Autistas em IARegulação sensorial no setup de trabalhoExaminar conexões de Regulação sensorial no setup de trabalho
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
