Layout e grelha

O posicionamento no DeepVisuals é híbrido, e vale a pena perceber porque: os dois eixos comportam-se de maneira diferente, e é isso que faz um dashboard adaptar-se à largura do ecrã sem deixar de ser previsível.

Os dois eixos

Horizontal — 48 colunas. A largura do ecrã é dividida em 48 colunas iguais, sempre. Um widget diz em que coluna começa (COL) e quantas colunas ocupa (LARG). Numa janela larga as colunas são largas; numa estreita são estreitas. O widget acompanha.

Vertical — píxeis. A posição (Y) e a altura (ALT) são em píxeis, e não mudam com a largura da janela. Um gráfico com 300 píxeis de altura tem 300 píxeis de altura em qualquer ecrã.

Isto responde a duas necessidades diferentes: horizontalmente quer-se proporção (metade do ecrã e metade do ecrã), verticalmente quer-se dimensão (um gráfico com 80 píxeis não se lê, independentemente da largura da janela).

As 48 colunas na prática

Quarenta e oito divide bem, e é por isso que é este o número:

Largura	Colunas	Uso típico
Ecrã inteiro	48	Título, faixa de indicadores, tabela larga
Metade	24	Dois gráficos lado a lado
Um terço	16	Três cartões
Um quarto	12	Quatro indicadores
Dois terços	32	Gráfico principal com um secundario ao lado
Um sexto	8	Seis colunas de números

No dashboard de exemplo, o gráfico mensal ocupa 32 colunas e o circular as 16 restantes — dois terços e um terço.

A régua canónica

O editor desenha contra uma largura de referência por dispositivo:

Dispositivo	Largura de referência
Web	1280 px
Tablet	768 px
Telemóvel	390 px

Não é um limite: é a régua contra a qual as colunas são calculadas. Um ecrã de 1920 px mostra as mesmas 48 colunas, mais largas.

Os ecrãs auxiliares em modal ou painel usam a sua própria largura como régua. Um modal de 960 px tem também 48 colunas — mas cada uma mede 20 px em vez de 26,7. Ver Ecrãs auxiliares.

Mover e redimensionar

Arrastar move; as pegas nas arestas e nos cantos redimensionam. Enquanto arrasta, o editor ajusta a posição à coluna mais próxima na horizontal e à grelha de 8 px na vertical.

Para posicionar com exactidao, escreva os números directamente nos campos COL, LARG, Y e ALT do inspector. É o caminho mais rápido para alinhar duas coisas que teimam em ficar a um pixel de distância.

Alinhar e distribuir

Com vários widgets seleccionados (Shift + clique), a barra de ferramentas oferece:

• Alinhar — esquerda, centro horizontal, direita, topo, meio vertical, base;
• Distribuir — espacamento igual na horizontal ou na vertical.

Distribuir precisa de três ou mais widgets: os das pontas ficam onde estão e os do meio são reposicionados.

Sobreposição e ordem

Widgets podem sobrepor-se. Quem fica a frente decide-se pela ordem, controlada na barra de ferramentas: trazer para a frente, enviar para tras, subir um nível, descer um nível.

Sobrepor de propósito é útil — uma etiqueta por cima de uma imagem, um indicador sobre um painel de fundo. Sobrepor sem querer é a causa habitual de "o widget desapareceu": está lá, por baixo de outro. O separador Estrutura do inspector mostra a árvore completa e permite seleccionar o que estiver escondido.

Um metodo que funciona

1. Comece pelo esqueleto. Coloque os painéis e as faixas antes dos widgets de dados. É mais fácil arrumar caixas do que conteúdo.
2. Trabalhe em faixas horizontais. Uma faixa de indicadores, uma faixa de gráficos, uma faixa de tabela. Dentro de cada faixa, todos os widgets partilham o mesmo Y e a mesma ALT.
3. Use as colunas inteiras. 24 + 24, 16 + 16 + 16, 32 + 16. Larguras que não somam 48 deixam uma tira vazia a direita que se nota.
4. Deixe respirar. Uma folga de 8 ou 12 píxeis entre faixas lê-se melhor do que widgets colados.
5. Só depois passe ao tablet e ao telemóvel. Ver Web, tablet e telemóvel.

Quando um widget deve esticar

Por omissão, um widget acompanha a largura da janela proporcionalmente: ocupa sempre as suas colunas. Para um comportamento diferente — margem fixa a direita, altura que estica até ao fundo — existem as âncoras. Ver Âncoras e redimensionamento.