Passo 1 de 6
Definir a finalidade de cada página
Organize as necessidades de um centro cultural em um inventário de páginas com finalidades distintas.
Trilha de aprendizado · Nível 7 · Tutorial 1
Ao concluir, você será capaz de planejar as páginas, as pastas e as conexões de um pequeno site antes de montar seus documentos.
Definir a finalidade de cada página
Organize as necessidades de um centro cultural em um inventário de páginas com finalidades distintas. 2 min
Representar as conexões entre as páginas
Transforme o inventário em um mapa de navegação, prevendo caminhos de acesso e retorno entre as páginas. 2 min
Organizar pastas e nomes de arquivos
Planeje onde guardar cada página e recurso, com nomes consistentes e sem confundir pastas com navegação. 3 min
Definir o contrato de navegação compartilhada
Defina os destinos, os rótulos e a ordem do menu principal do centro cultural, mantendo a oficina acessível pelo contexto. 2 min
Planejar as referências a partir de cada página
Registre referências para páginas em pastas diferentes sem alterar os destinos, os rótulos e a ordem da navegação compartilhada. 2 min
Consolidar o plano do pequeno site
Reúna os quatro registros, corrija uma referência e deixe o planejamento pronto para orientar a montagem das páginas. 3 min
Passo 1 de 6
Organize as necessidades de um centro cultural em um inventário de páginas com finalidades distintas.
O inventário de conteúdo reúne o que o site precisa comunicar ou permitir que o usuário faça. A partir dele, defina para cada página uma finalidade — a necessidade que ela atende — e um conteúdo principal que cumpra essa finalidade.
Exemplo
O público precisa conhecer o espaço, escolher atividades, avaliar uma oficina de cerâmica, planejar a visita e tirar dúvidas.
Endereço, horários de funcionamento e informações de acessibilidade ajudam a planejar a visita. Podem ficar juntos em Visita, sem criar uma página para cada informação.
Associe cada conjunto de conteúdos à página mais adequada.
Toque em um item e depois no par correspondente.
Exemplo
Recursos a preparar: foto do espaço para Início e foto da atividade para Oficina de cerâmica.
Dica
Na Programação, basta um resumo da oficina; os detalhes ficam na página específica. Evite manter duas versões completas do mesmo conteúdo.
Em duas frases, formule a finalidade de Oficina de cerâmica e explique se uma lista simples de quatro materiais necessários justificaria criar outra página.
Escreva pelo menos 30 caracteres (0/30).
Passo 2 de 6
Transforme o inventário em um mapa de navegação, prevendo caminhos de acesso e retorno entre as páginas.
O inventário registra quais páginas existem. O mapa de navegação mostra como o usuário poderá passar de uma para outra.
Cada nó representa uma página. Cada seta representa um link planejado e aponta da página de origem para a página de destino.
Exemplo
[Início] → [Visita]
Essa conexão prevê um link na página Início que leva à página Visita. Ela não prevê, sozinha, um link no sentido contrário.
Se o mapa mostra apenas Início → Contato, o link de Contato para Início também está previsto.
Uma página pode ser alcançada a partir de Início passando por outra página. Não é necessário ligar todas as páginas diretamente entre si.
Siga as setas a partir de Início: elas devem permitir chegar às páginas relevantes. Depois, procure os caminhos de retorno, que também podem passar por páginas intermediárias.
Dica
Preveja conexões de retorno no mapa, em vez de depender apenas do botão Voltar do navegador.
Cada nome entre colchetes representa um nó. Estas são as conexões já previstas:
[Início] → [Programação]
[Programação] → [Início]
[Início] → [Visita]
[Visita] → [Início]
[Início] → [Contato]
[Contato] → [Início]
[Oficina] ainda está sem conexões.
Uma pessoa deve sair de Início, consultar Programação, abrir Oficina e depois voltar à Programação antes de retornar a Início.
Sem alterar as conexões existentes de Visita e Contato, quais duas setas faltam? Escreva cada uma como origem → destino e explique sua função.
Escreva pelo menos 30 caracteres (0/30).
Passo 3 de 6
Planeje onde guardar cada página e recurso, com nomes consistentes e sem confundir pastas com navegação.
O mapa registra conexões entre páginas; a árvore de pastas registra onde os arquivos ficam. Criar uma pasta não cria links nem determina quais páginas aparecem na navegação.
Planeje um arquivo HTML para cada página do inventário. Agrupe páginas e recursos por finalidade e crie subpastas apenas quando elas ajudarem a organização.
Dica
Use nomes descritivos, em minúsculas, sem espaços nem acentos e com hífens entre palavras: por exemplo, oficina-ceramica.html. Aplique o padrão também às pastas e aos recursos. Essa é uma convenção do projeto, não uma exigência do HTML.
Exemplo
O inventário prevê Início, Programação, Oficina de cerâmica, Visita e Contato. A foto do espaço pertence a Início; a foto da oficina, a Oficina de cerâmica.
Nesta proposta, index.html representa Início e programacao/index.html representa Programação:
centro-cultural/
├── index.html
├── visita.html
├── programacao/
│ ├── index.html
│ └── detalhes/
│ └── paginas/
│ └── Oficina de Cerâmica.html
└── imagens/
├── espaco.jpg
└── oficina-ceramica.jpgAs pastas detalhes/paginas foram criadas apenas para guardar o arquivo da oficina.
Qual arquivo falta? Como simplificar as pastas da oficina e adequar seu nome à convenção? Responda sem mudar as páginas previstas nem os usos das fotos.
Escreva pelo menos 20 caracteres (0/20).
Exemplo
centro-cultural/
├── index.html
├── visita.html
├── contato.html
├── programacao/
│ ├── index.html
│ └── oficina-ceramica.html
└── imagens/
├── espaco.jpg
└── oficina-ceramica.jpgAgora há um HTML para cada uma das cinco páginas. programacao/ reúne a programação e o detalhe da oficina. imagens/ guarda a foto do espaço, usada em Início, e a foto da oficina, usada em Oficina de cerâmica.
Dica
index.html é um nome convencional para o documento inicial de uma pasta. Os dois arquivos com esse nome são distintos porque ficam em pastas diferentes.
Ao acessar uma pasta, a abertura automática de index.html depende do ambiente e da configuração. O nome, sozinho, não garante esse comportamento.
Como existe programacao/index.html, acessar a pasta programacao/ sempre abrirá automaticamente a página de Programação.
Passo 4 de 6
Defina os destinos, os rótulos e a ordem do menu principal do centro cultural, mantendo a oficina acessível pelo contexto.
O contrato de navegação compartilhada registra três decisões: quais páginas serão os destinos, quais rótulos identificarão os links e em qual ordem aparecerão.
Escolha os destinos que precisam estar disponíveis no menu principal em todo o site. O menu não precisa listar todas as páginas.
Exemplo
Início, Programação, Visita e Contato entram no menu principal.
A página da oficina continua acessível pelo link contextual em Programação, conforme o mapa. Assim, o usuário consulta as atividades e abre os detalhes da oficina sem precisar de um item exclusivo no menu.
Organize o menu conforme a decisão deste projeto: primeiro, oferecer retorno à apresentação inicial; depois, consultar as atividades; em seguida, planejar a ida ao centro cultural; por último, falar com a equipe.
Exemplo
| Ordem | Rótulo | Destino |
| --- | --- | --- |
| 1 | Início | Página inicial, que apresenta o centro cultural |
| 2 | Programação | Página que reúne as atividades |
| 3 | Visita | Página com orientações para planejar a ida |
| 4 | Contato | Página com canais para falar com a equipe |
Acesso contextual mantido: Programação → página da oficina.
Este é o registro que seguirá para as próximas etapas do planejamento. Em todas as páginas, inclusive na oficina, o menu compartilhado mantém os mesmos destinos, rótulos e ordem. Não troque “Programação” por “Agenda” apenas em uma página.
A página Início já segue o contrato registrado. Qual proposta de menu para a página da oficina mantém esse mesmo acordo?
Passo 5 de 6
Registre referências para páginas em pastas diferentes sem alterar os destinos, os rótulos e a ordem da navegação compartilhada.
O contrato define qual página alcançar. Já o valor de href registra como alcançar essa página a partir de um arquivo específico.
Ao aplicar o contrato em outra pasta, preserve destinos, rótulos e ordem. Ajuste as referências relativas quando necessário.
Exemplo
Vamos acompanhar apenas estes arquivos já planejados, localizados a partir da pasta principal:
index.html — Inícioprogramacao/index.html — Programaçãoprogramacao/oficina-ceramica.html — página da oficina de cerâmicaPara o destino Início, a referência será:
index.html: index.html.programacao/oficina-ceramica.html: ../index.html.As duas referências apontam para o mesmo arquivo da pasta principal.
Origem: index.html.
Destino do contrato: Programação, no arquivo programacao/index.html.
Complete o valor de href com uma referência relativa que inclua o nome do arquivo:
href="_____"
Origem: programacao/oficina-ceramica.html.
Destino do contrato: Programação, no mesmo arquivo programacao/index.html.
Complete o valor de href com uma referência relativa que inclua o nome do arquivo:
href="_____"
Exemplo
Este quadro acompanha apenas Início e Programação; os demais destinos do contrato continuam valendo.
| Origem | Destino planejado | Referência (href) |
|---|---|---|
| index.html | Início — index.html | index.html |
| index.html | Programação — programacao/index.html | programacao/index.html |
| programacao/oficina-ceramica.html | Início — index.html | ../index.html |
| programacao/oficina-ceramica.html | Programação — programacao/index.html | index.html |
Faça esse registro para cada destino, preservando os rótulos e a ordem do contrato completo.
Dica
Registre programacao/index.html, em vez de apenas programacao/, quando a origem estiver na pasta principal. Assim, o planejamento não depende da abertura automática de index.html ao acessar uma pasta.
Para acessar Programação, o quadro registra:
index.html: programacao/index.html.programacao/oficina-ceramica.html: index.html.Por que esses valores diferentes de href preservam o mesmo destino? Além do destino, o que deve permanecer igual na navegação compartilhada?
Escreva pelo menos 30 caracteres (0/30).
Passo 6 de 6
Reúna os quatro registros, corrija uma referência e deixe o planejamento pronto para orientar a montagem das páginas.
Reúna o inventário, o mapa de navegação, a árvore de pastas e o contrato com referências por origem. Agora, a tarefa é conferir se esses registros concordam — não criar outro planejamento.
Exemplo
Preserve as finalidades e os conteúdos principais já definidos. Esta é a correspondência entre as cinco páginas e seus arquivos:
| Página | Arquivo na árvore planejada |
|---|---|
| Início | index.html |
| Programação | programacao/index.html |
| Oficina de cerâmica | programacao/oficina-ceramica.html |
| Visita | visita.html |
| Contato | contato.html |
Confira cada linha com o inventário: a página mantém seu propósito e tem um arquivo identificado?
Dica
Inclua os dois registros de imagem do inventário anterior no formato caminho do arquivo → página(s) de uso. Preserve os nomes, as pastas e as associações já definidos; não substitua esses recursos na consolidação.
Exemplo
Navegação compartilhada, nesta ordem: Início → Programação → Visita → Contato. Aqui, as setas indicam a sequência dos itens do menu.
Conexões do mapa: todas as páginas oferecem acesso aos quatro destinos desse menu. Além disso, Programação → Oficina de cerâmica é um link contextual. O retorno da oficina para Programação está previsto no menu.
Assim, a oficina tem acesso planejado sem precisar virar um quinto item da navegação principal.
Exemplo
Os destinos são os arquivos da tela anterior. Há uma referência intencionalmente incorreta neste quadro:
| Rótulo, na ordem do contrato | A partir de index.html | A partir de programacao/oficina-ceramica.html |
|---|---|---|
| Início | index.html | ../index.html |
| Programação | programacao/index.html | index.html |
| Visita | visita.html | visita.html |
| Contato | contato.html | ../contato.html |
Compare cada referência com sua origem e com o arquivo de destino, sem alterar o contrato.
Use os quatro registros anteriores como base, sem mudar páginas, finalidades, conteúdos ou arquivos.
Sua entrega é o plano anterior com essas atualizações; não é necessário reescrever tudo aqui.
Escreva pelo menos 80 caracteres (0/80).
Resumo
Antes de encerrar, confira o conjunto:
Parabéns! Você concluiu: Planejar pastas e navegação de um pequeno site
Guarde os quatro registros consolidados. Eles serão o ponto de partida para integrar os conteúdos nas páginas no próximo tutorial.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
