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.
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.
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>
.
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.
É 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.
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.
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.
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.