Layout - SPURB/participe GitHub Wiki

O layout da consulta é composto pelo cabeçalho padrão do Participe, uma capa, o índice, o conteúdo do objeto da consulta, o rodapé padrão do Participe e um elemento escondido para textos de apoio ou como repositório adicional. Ao desenvolver uma nova consulta, deve-se configurar a capa, o conteúdo do texto e o componente de apoio.

Capa

Capa em dispositivos móveis e desktop

Ao abrir a página de uma consulta, a capa é o elemento que preenche toda a largura e altura disponíveis da tela, logo abaixo do cabeçalho. A escolha da imagem de fundo deve levar em consideração:

  • a abrangência de tamanhos de tela que ela deve suportar,
  • o tamanho do arquivo que será carregado (ou o tempo de espera do carregamento dessa imagem), e
  • que deve ilustrar o conteúdo da consulta.

O box posicionado ao centro da capa contém informações básicas como o número de contribuições, um indicador para verificar se a consulta está aberta ou encerrada, além de espaços para textos introdutórios.

Índice

O índice é gerado automaticamente a partir dos títulos do conteúdo da consulta a partir da atribuição da classe titulo aos elementos determinados (<h1 class="titulo">[título aqui]</h1>, por exemplo), e depois de encapsular o conteúdo da seção dentro de uma tag <section></section>.

Índice em nuvem e índice em lista

Em tamanhos reduzidos, o índice se localiza imediatamente antes do texto, no formato de uma "nuvem" de botões que rolam a página até a seção desejada. Em tamanhos de desktop, é fixado no canto esquerdo da tela, centralizado verticalmente, e acompanha a rolagem em forma de lista de links, que funcionam da mesma maneira.

Os títulos devem ser significativos mas simples e, sempre que possível, curtos.

Conteúdo

É dividido em seções (determinadas pelo elemento HTML <section></section>), que podem assumir qualquer agrupamento do conteúdo. O espaço entre um parágrafo e um título <h2> (primeiro nível de título) é o dobro daquele entre um parágrafo e títulos de níveis inferiores e oito vezes o tamanho do que há entre dois parágrafos.

Espaçamento entre seções e outros elementos (parte 1) Espaçamento entre seções e outros elementos (parte 2)

Em tamanhos de dispositivos móveis, a coluna de texto preenche a largura da tela com um pequeno espaçamento entre as bordas da tela e as da coluna, resultando em linhas de 30 a 40 caracteres. Em telas maiores, a coluna fica centralizada horizontalmente e tem largura máxima de 700 pixels e suas linhas contam de 65 a 80 caracteres. A limitação de caracteres numa linha dinamiza mais a leitura.

Alguns elementos extrapolam a largura máxima da coluna, destacando-o significativamente. Esse recurso deve ser usado para conteúdos de grande relevância, que demandam uma análise minuciosa do usuário ou que ilustrem ricamente o capítulo ou consulta. Diferente destes, os elementos que permanecem menores ou do tamanho da coluna de texto não quebram o fluxo da leitura. Em tamanhos de tela de dispositivos móveis, a largura da coluna é a largura máxima.

Imagem dentro da coluna de texto Imagem com largura maior do que a coluna de texto

Botões auxiliares

Botões auxiliares

No canto inferior direito da página, estão localizados dois botões redondos simples. O primeiro abre um componente que pode conter tanto um texto de apoio quanto um repositório de materiais de apoio à leitura do texto da consulta (ver próximo capítulo). O segundo rola a página até o início do texto da consulta.

Apoio

O componente de apoio, quando acionado, faz deslizar sobre o texto da consulta um objeto simples, "paginado" por abas. Ele garante uma flexibilidade de formatos possíveis de serem inseridos, mas deve-se atentar para que esses formatos sejam sempre complementares ao texto principal e que possam auxiliar na compreensão do objeto da consulta.

Acionamento do texto de apoio

⚠️ **GitHub.com Fallback** ⚠️