19 de agosto de 2007

Interfaceando em janelas

Quando se projeta conteúdo para web isto se faz normalmente para ser exibido em janelas de navegadores (browsers), que podem occorrer em dispositivos desktop (de mesa) ou móveis (celulares, palms, etc). Um problema meio recorrente é como projetar quando há necessidade de exibir esse conteúdo em janelas "normais" e/ou pop-ups.

Um argumento forte contra as janelas "que saltam" ou pop-ups é que estas podem não aparecer corretamente em dispositivos móveis. Outro argumento é a invasividade delas (propaganda não solicitada pelo usuário). Por fim, com a proliferação de bloqueadores de pop-ups, conteúdo relevante atrelado a estas pode não ser exibido se o usuário não souber desligar esses bloqueadores (!).

Vale a pena distinguir as situações em que seu conteúdo pode ser exibido em janelas do navegador:

Janelas normais

Neste caso deve-se projetar a interface de forma que o conteúdo apareça:


Encaixado na tela (centralizado
vertical e horizontalmente)
. .
Alinhado à esquerda.


centralizado horizontalmente
. .
layout líquido/fluido (se ajustando á resolução
do monitor sem comprometer a diagramação)

Janelas redimensionadas

Aqui ou o conteúdo tem dimensionamento/posicionamento fixo (Figura 1) ou se adapta a largura da janela (Figura 2). Há que ter cuidado para que o conteúdo seja compreensível em um tamanho "minimo", daí normalmente se optar por layout com largura fixa, ou seja, com barra de rolagem, ao redimensionar.


Figura 1 (1)
. .
Figura 2 (2)

Janelas pop-up


em tela cheia ou fullscreen

Como uma interface web em tela cheia tem de ser carregada por uma janela do navegador, pode-se considerar essa interface um tipo de pop-up ou uma nova janela (sem barra de títulos).

Dispensa dizer que além de desorientar o usuário novato, tem de haver opção de redimensionar ou fechar a janela facilmente.

Uma opção a esta interface seria a janela com elementos de interface 100% personalizados (em CSS chamado Chromeless Window), com barra de titulos, borda, rolagem e botões totalmente personalizados. O problema é como diferentes versões dos navegadores irão interpretar esse recurso (em tela cheia ou tamanho pré-definido).


Chromless
. .
Em tela inteira

Na verdade é um pop-up que sempre aparece ocupando a tela inteira de seu monitor, com barra de títulos.

. .
Em tamanho pré-definido

Este pop-up tradicional se divide em pop-up e pop-up under, que se abrem ao entrar ou sair da página, respectivamente. A pop-up under é conhecida tanto por aparecer em sites "de conteúdo alternativo" como por ser uma "publicidade não-invasiva" (não atrapalha o carregamento da página ou a navegação inicial do usuário).

Uma alternativa que se justifica em tempos de web 2.0 seria o uso de camadas (layers) ou conteúdo dinâmico no lugar das pop-ups, amarrando o conteúdo ao layout e a uma janela única do navegador. Mas isso é assunto para outro texto...

__________________________________________________
[Figura 1] tabelas de tamanho fixo ou com Folha de Estilos/CSS;
[Figura 2] layout HTML puro (com ou sem tabelas de largura proporcional ao tamanho da janela) ou layout líquido (com tabelas ou CSS).

0 comentários neste post

Postar um comentário

Atenção comentarista!
  • Todos os comentários serão rigidamente moderados;
  • Identifique-se! Comentários anônimos não são recomendados;
  • Comentários com três ou mais links serão removidos;
  • Comentários escritos em miguxês ou excesso de gírias serão removidos;
  • Comentários escritos com predominância de maiúsculas serão removidos;
  • Por favor, prove que você é coerente, educado e bem informado: conheça o restante do site, saiba quem somos, sobre o que, para quem e como escrevemos antes de comentar futilidades;
  • Respeite as opiniões dos autores e dos outros comentaristas. Seja breve e sem ofensas;
  • Escreva comentários relevantes e que contribuam de alguma forma para o bem da humanidade;
  • Não seja um inútil social. Lembre-se que o mundo não gira ao seu redor.