2. Finalidade × Análise
Finalidade
Registrar os padrões de interface usados no OLA, orientando a escolha do layout conforme a função da página: leitura, artigo, index, mapa, organização, governança, objeto de aprendizagem, trilha, laboratório ou painel.
Análise
O OLA possui páginas com diferentes papéis. Uma página simples de leitura não precisa da mesma estrutura de uma página de governança ou mapa. Por isso, o padrão de interface deve ser escolhido a partir da função da página.
3. Problema resolvido
O problema resolvido por esta página é a falta de uma regra explícita para escolher o layout adequado conforme o tipo e a função de cada página do OLA.
4. Princípio do padrão
A interface do OLA deve apoiar a organização do conhecimento, e não apenas apresentar conteúdo. Por isso, a escolha do layout deve partir da pergunta:
Estrutura física
Onde a página está localizada no diretório do OLA.
Estrutura semântica
Qual papel conceitual a página ocupa dentro do sistema.
Navegação
Como o usuário retorna, avança, explora e acessa seções internas.
Leitura analítica
Como o conteúdo é dividido em blocos compreensíveis e reutilizáveis.
5. Arquitetura da experiência estrutural do OLA
As páginas estruturais do OLA não são apenas interfaces visuais. Elas funcionam como unidades de experiência orientadas ao conhecimento, combinando navegação, organização, contexto, evolução e estrutura.
| Camada | Função |
|---|---|
| Orientação | Responder onde estou e o que estou fazendo. |
| Navegação | Permitir deslocamento interno e externo. |
| Estrutura | Organizar visualmente e semanticamente a página. |
| Conhecimento | Explicitar conceitos, relações, critérios e decisões. |
| Evolução | Permitir continuidade futura. |
| Tecnologia | Viabilizar implementação técnica com HTML, CSS e JavaScript. |
6. Apoio da IA na construção e evolução da interface
A IA pode acelerar a criação, revisão e evolução das páginas do OLA, mas não substitui a governança estrutural do sistema.
| Uso da IA | Papel |
|---|---|
| Classificação da página | Ajudar a identificar se a página é artigo, mapa, index, organização, objeto de aprendizagem, trilha, painel ou laboratório. |
| Escolha do layout | Sugerir o padrão de layout mais adequado conforme a função da página. |
| Geração inicial | Ajudar a criar a primeira versão do HTML. |
| Revisão estrutural | Verificar aderência aos padrões do OLA. |
| Melhoria de UX/UI | Sugerir ajustes de navegação, legibilidade, responsividade e interface. |
| Manutenção evolutiva | Sugerir páginas impactadas por mudanças estruturais. |
7. Tipos de página e padrões de layout recomendados
Nem toda página do OLA deve usar o mesmo layout. O padrão visual e estrutural deve variar conforme a função da página dentro do sistema.
| Tipo/função da página | Layout recomendado | Elementos principais | Quando usar |
|---|---|---|---|
| Leitura simples | Layout leve em uma coluna | Título, texto, poucos cards, links básicos e rodapé. | Quando a página for curta e tiver baixa complexidade navegacional. |
| Artigo | Layout de leitura contínua | Título, resumo, seções, referências, impressão opcional e boa legibilidade. | Quando a página tiver caráter textual, acadêmico, explicativo ou argumentativo. |
| Página índice | Layout estrutural com cards e agrupamentos | Topbar, breadcrumbs, blocos por categoria, cards de entrada e links principais. | Quando a página funcionar como porta de entrada de área, domínio ou conjunto de páginas. |
| Mapa / página âncora | Layout analítico com índice lateral, grafo, eixos e relações | Problema resolvido, finalidade, análise, grafo, tabelas, percursos e desdobramentos. | Quando a página representar visão de conjunto, relações e estrutura conceitual. |
| Organização | Layout de governança local | Critérios, regras, estrutura física, classificação, manutenção e próximos passos. | Quando a página definir como uma área ou domínio deve ser organizado e mantido. |
| Governança | Layout robusto com índice lateral e tabelas de decisão | Regras gerais, critérios, padrões, decisões, responsabilidades e manutenção. | Quando a página registrar regras válidas para múltiplas áreas do OLA. |
| Objeto de aprendizagem | Layout didático | Objetivo, problema resolvido, pré-requisitos, explicação, atividade, avaliação e próximos passos. | Quando a página for usada diretamente para aprendizagem de um conteúdo. |
| Trilha de aprendizagem | Layout sequencial | Etapas, ordem sugerida, pré-requisitos, progresso, objetos e conclusão. | Quando a página orientar percurso de aprendizagem ao longo de várias páginas ou atividades. |
| Experimento / laboratório | Layout flexível de experimento | Hipótese, contexto, teste, resultado, observações, ajustes e continuidade. | Quando a página registrar exploração, protótipo, teste ou experimento ativo. |
| Painel / dashboard | Layout visual-operacional | Indicadores, cards, filtros, gráficos, tabelas, alertas e ações. | Quando a página servir para acompanhamento, monitoramento ou gestão visual. |
8. Padrão-base registrado
Este é o padrão robusto recomendado para páginas estruturais, analíticas, classificatórias, organizacionais, comparativas e de governança.
| Elemento | Função | Observação |
|---|---|---|
| Topbar fixa | Manter ações principais sempre acessíveis. | Contém marca, menu, índice, voltar e tema. |
| Menu principal | Conectar a página às páginas estruturais da área. | No mobile, deve abrir por hambúrguer. |
| Índice recolhível | Permitir navegação interna por seções. | O botão do índice fica no mesmo nível da topbar. |
| Botão voltar | Retornar à página anterior ou a uma página de fallback. | Evita botão quebrado quando não há histórico. |
| Botão tema | Alternar entre modo claro e escuro. | Preferencialmente com persistência em localStorage. |
| Layout em duas colunas | Separar índice lateral e conteúdo principal. | No mobile, vira uma coluna. |
| Seções-card | Organizar o conteúdo em blocos analíticos. | Favorece leitura progressiva e manutenção. |
| Tabelas responsivas | Permitir comparação e classificação. | Devem usar rolagem horizontal. |
9. Componentes obrigatórios
Os componentes obrigatórios variam conforme o tipo de página. Páginas estruturais, analíticas, de organização e de governança exigem mais elementos de orientação.
| Componente | Obrigatório em páginas robustas? | Uso recomendado |
|---|---|---|
| Breadcrumb físico | Sim | Mostrar a localização do arquivo dentro do diretório. |
| Breadcrumb semântico | Sim | Mostrar a posição conceitual da página no OLA. |
| Finalidade × Análise | Sim | Explicitar para que a página existe e como deve ser lida. |
| Problema resolvido | Recomendado | Mostrar a necessidade prática que originou a página. |
| Índice lateral | Sim, em páginas longas | Necessário em páginas analíticas, classificatórias, organizacionais e de governança. |
| Topbar fixa | Sim | Garante acesso contínuo à navegação, índice, voltar e tema. |
| Rodapé | Sim | Identifica o OLA, a página e a autoria. |
| Próximos passos | Sim, em páginas estruturais | Mostra continuidade, evolução e páginas impactadas. |
10. Encontro das dimensões estruturais da experiência no OLA
O padrão de interface não organiza apenas componentes visuais. Ele integra múltiplas dimensões necessárias para que uma página do OLA funcione como unidade de navegação, leitura, orientação, manutenção e evolução do conhecimento.
| Dimensão | Papel no padrão |
|---|---|
| Interface | Permite interação com o sistema. |
| Layout | Organiza visualmente os elementos da página. |
| Conteúdo | Estrutura a informação apresentada. |
| Usuário | Considera quem utiliza, aprende ou mantém. |
| Contexto | Situa a página dentro do sistema. |
| Conhecimento | Organiza significado, conceitos e relações. |
| Navegação | Permite deslocamento dentro da página e do sistema. |
| Governança | Define regras e padrões. |
| Evolução | Permite continuidade e melhoria futura. |
| Tecnologia | Viabiliza implementação técnica. |
Implementação técnica do layout: Grid e Flexbox
No OLA, o layout é uma decisão estrutural e visual. Grid e Flexbox são mecanismos técnicos usados para implementar essa decisão.
| Elemento | Papel estrutural | Tecnologia utilizada |
|---|---|---|
| Topbar | Organizar botões e navegação horizontal. | Flexbox. |
| Área principal da página | Separar índice lateral e conteúdo principal. | CSS Grid. |
| Cards internos | Organizar blocos menores responsivos. | Grid ou Flexbox. |
| Responsividade | Adaptar layout para telas menores. | Media queries + Grid/Flex. |
11. Quando usar o padrão robusto
O padrão robusto com topbar, índice lateral, cards e tabelas responsivas deve ser usado em páginas que exigem navegação interna, leitura estruturada, análise comparativa ou manutenção futura.
Páginas analíticas
Exemplo: mapas, análises, leituras estruturais e diagnósticos.
Páginas classificatórias
Exemplo: classificação de domínios, tipos, padrões e critérios.
Páginas de governança
Exemplo: regras, critérios de manutenção, padrões e decisões.
Páginas comparativas
Exemplo: comparação entre ferramentas, métodos ou arquiteturas.
12. Quando não usar o padrão robusto
O padrão robusto pode ser excessivo para páginas muito simples, páginas de leitura curta ou páginas cujo foco seja apenas apresentação textual ou visual.
14. Prompt atualizado do layout
O prompt abaixo substitui a versão anterior porque passa a orientar a escolha do layout conforme a função da página e a distinguir menu estrutural de páginas relacionadas.
Crie uma página HTML completa no padrão OLA.
Antes de gerar a página, classifique sua função principal entre:
- página simples de leitura;
- artigo;
- página índice;
- mapa / página âncora;
- página de organização;
- página de governança;
- objeto de aprendizagem;
- trilha de aprendizagem;
- experimento / laboratório;
- painel / dashboard.
Depois de classificar a função, escolha o layout adequado.
Para páginas estruturais, analíticas, organizacionais ou de governança,
usar o padrão robusto:
Topbar funcional + menu principal + botão índice + botão voltar + botão tema
+ índice lateral recolhível + conteúdo em seções-card.
A página deve conter, quando aplicável:
- breadcrumb físico;
- breadcrumb semântico;
- problema resolvido;
- finalidade × análise;
- orientação do leitor;
- próximos passos;
- tabelas responsivas com rolagem horizontal;
- seção “Páginas relacionadas”;
- rodapé no formato:
OLA — O Livro Ajustável • Nome da Página • @walterdominguez.
Regra para menus:
- menu superior: apenas navegação estrutural curta e estável;
- índice lateral: apenas seções internas da página;
- páginas relacionadas: seção própria no conteúdo;
- próximos passos: continuidade, evolução ou páginas futuras.
A página deve permitir ao leitor responder:
- onde estou?
- o que estou fazendo?
- para onde posso navegar agora?
- para onde vou depois?
A interface deve separar claramente:
- estrutura física;
- estrutura semântica;
- navegação;
- páginas relacionadas;
- conteúdo analítico;
- critérios de evolução.15. Fundamentos disciplinares deste padrão
Este padrão de interface não é apenas visual. Ele combina contribuições de UX, UI, Arquitetura da Informação e Engenharia do Conhecimento para orientar a leitura, a navegação e a organização das páginas estruturais do OLA.
| Área | Papel no padrão |
|---|---|
| UX | Experiência de navegação, orientação do leitor, continuidade e redução da carga cognitiva. |
| UI | Componentes visuais, botões, topbar, cards, tabelas, responsividade e tema. |
| Arquitetura da Informação | Organização, localização, navegação estrutural, índice, breadcrumbs e rotulagem. |
| Engenharia do Conhecimento | Organização estrutural do conhecimento, explicitação de relações, classificação e evolução dos artefatos. |
16. Critério de manutenção
Sempre que um novo padrão de interface for criado no OLA, ele deve ser registrado nesta página ou em uma página derivada de governança.
| Pergunta | Critério |
|---|---|
| O padrão resolve um problema recorrente? | Se sim, deve ser registrado. |
| O padrão será reutilizado em mais de uma página? | Se sim, deve ter nome e descrição. |
| O padrão altera a experiência de navegação? | Se sim, deve ter regra de uso. |
| O padrão interfere na estrutura semântica? | Se sim, deve explicar sua relação com breadcrumbs, tags, facetas, mapas ou motores. |
| O padrão depende da função da página? | Se sim, deve ser registrado na matriz tipo/função × layout. |
| O padrão cria nova regra para menus? | Se sim, deve distinguir menu superior, índice lateral e páginas relacionadas. |
17. Orientação do leitor: onde estou, o que estou fazendo e para onde vou
Toda página estrutural do OLA deve ajudar o leitor a se orientar dentro do sistema. A página não deve apenas apresentar conteúdo; ela deve situar o leitor física, semântica e operacionalmente.
| Pergunta do leitor | Elemento da página que responde | Função no OLA |
|---|---|---|
| Onde estou? | Breadcrumb físico + breadcrumb semântico | Localizar a página no diretório e no significado do OLA. |
| O que estou fazendo? | Finalidade × Análise + Problema resolvido | Explicar o papel da página e a necessidade que ela resolve. |
| Para onde posso navegar agora? | Topbar estrutural + menu principal + índice lateral | Permitir navegação horizontal e navegação interna imediata. |
| Que páginas complementam esta leitura? | Seção “Páginas relacionadas” | Apresentar relações semânticas, operacionais e complementares. |
| Para onde vou depois? | Próximos passos | Orientar evolução, manutenção e continuidade futura. |
18. Próximos passos
- Atualizar
index_governanca.htmlcom link para esta página. - Atualizar o portal quando novos padrões estruturais relevantes forem criados.
- Usar a matriz tipo/função da página × layout recomendado antes de gerar novas páginas.
- Revisar páginas estruturais já criadas para verificar se o layout está adequado à função.
- Aplicar a regra de menus: menu superior enxuto, índice lateral interno e páginas relacionadas em seção própria.
- Criar, se necessário, uma página complementar de componentes reutilizáveis da interface.
- Registrar novos padrões quando surgirem páginas com funções ainda não previstas.