R7
BABOO

CONTATO
ANUNCIE
SUGESTÕES
RSS
COPYRIGHT

Home Tutoriais

Este é um tema que envolve muita discussão e gera muitas dúvidas em chats e fóruns de informática em geral. Afinal, qual a melhor resolução a ser utilizada para um projeto Web? Como ajustar meu site a diferentes resoluções?! Isso é possível? Veremos cada um destes aspcetos neste tutorial,com exemplos práticos de como utilizar a resolução de melhor forma possível!

O que é resolução?

Antes de começar a explicar qual o melhor método a ser utilizado,é fundamental que vejamos qual o significado da palavra resolução: número ou quantidade de pixels e cores que são geradas pela placa de vídeo e aceitas no monitor. Quando setamos nosso monitor para 800 x 600 isso quer dizer que cada linha Horizontal tem 800 pixels e cada linha Vertical possui 600 pixels! Os modos de cor são: 256, 16 bit (65.536) e 32 bit (mais de 16 milhões de cores). Pixels? O que é um pixel?

Pixel ou Picture Element

É a menor parte de uma imagem, aonde cada pixel ou ponto possui uma informação que diz qual é sua cor. Essa cor é definida através da escala RGB (Red, Green e Blue), que varia de 0 a 255 e é a mistura dessas 3 cores que determinará a cor final do pixel. Mas e os pixels transparentes? Bem, os pixels transparentes utilizam uma cor que denominamos como Canal Alpha, daí o famoso Alpha que muitos utilizam no Photoshop e muitas vezes não sabem o seu real significado.

DPI

DPI (doths per inch ou pontos por polegada) é a unidade de medida da resolução! Ao dizer que uma imagem tem 300 DPI queremos dizer que em cada polegada da imagem há “míseros” 300 pontos! Em imagens para a Internet é comum a utilização de 72 DPI.

Modos de vídeo

A grande maioria dos usuários ainda utiliza uma resolução de 800×600 pixels e normalmente os projetos para Web são produzidos para esta resolução. Quanto ao número de cores visualizadas no monitor conforme já visto acima, temos: 256, 16 bit (65.536) e 32 bit (mais de 16 milhões de cores). Curiosidade: o olho humano é capaz de diferenciar 10 mil tipos de cor. Então pra que colocar 32 bit de cor no monitor? Simplesmente para dar maior nitidez/definição à imagem! ;)

Qual resolução utilizar em meu site?

Bem, embora isso dependa do tipo de site é recomendável que não se utilize resoluções que sejam maiores do que 800×600 pode visualizar, já que esta é a resolução mais utilizada entre os usuários. É importante ressaltar que a resolução definida em 800×600 é para toda a tela do monito e o navegador visualiza uma valor um pouco abaixo disso. Para que seu site não fique com barra de rolagem é recomendável que você utilize no máximo 780 de tamanho horizontal e 420 pixels na vertical.

Em sites do tipo portal, a solução encontrada pelos Web Designers foi a de definir uma tabela com cerca de 780px de largura e ajustá-la ao lado esquerdo da tela com margem de topo definida em 0 pixels, ou seja, ela fica “colada” conforme podemos ver no site do MSN:





Desta forma não há espaçamento e a barra de rolagem horizontal é evitada!

Porém esta não é a única forma de adaptar seu site à uma resolução. Há sites que utilizam uma tabela com 100% de largura como base e dentro desta tabela cria outra tabela centralizada, ficando com a aparência do site da Outerspace:





Desta forma o site pode se ajustar ao navegador em caso de redimensionamento!

Já o site da Apple achou outra solução ao problema de resolução, onde confome o navegador é redimensionado, a testeira também é redimensionada:





Maximizando o navegador temos o seguinte resultado:





A solução da Apple é inteligente por não quebrar o layout do site, já que apenas a testeira é redimensionada e não sofre alterações nos botões do menu. Isso é feito através de um “truque” utilizado pelos Web Designers que pode ser visto quando abriimos o site no Dreamweaver:





Como podemos ver, o menu está dentro de uma tabela que foi definida com largura de 100%:





Essa tabela é então dividida em 3 colunas, sendo que a coluna do meio (2) contém a imagem do menu e as outras duas (1 e 3) ficam sem conteúdo mas com um preenchimento:





Esse preenchimento é na verdade um gif com 1pixel de largura que foi retirado da imagem do menu. Como ele está como fundo da tabela, conforme o navegador é redimensionado a célula (coluna) também é redimensionada, repetindo a imagem GIF e dando a impressão de ser uma imagem só, continuação do menu. Uma bela solução para quem utiliza menus deste tipo! Já o restante do site é colocado em tabelas centralizadas dentro da tabela base:





Na barra de propriedades são centralizadas:





Assim o site é redimensionada e se ajusta de acordo com o monitor, mantendo seu layout desde uma resolução de 800×600 até resoluções superiores a 1024×768!

Sites em Flash

Os sites em Flash podem ser tanto colocados dentro de tabelas quanto diretamente no site, se ajustando a qualquer resolução, desde que configurado corretamente. O site da empresa Eye4U (bastante conhecido) é um exemplo de site Flash que se ajusta a qualquer resolução:





Na imagem acima a resolução era de 1280×1024 pixels e o site se ajustou corretamente. Agora, com o navegador redimensionado:





Com o navegador em tamanho bem menor o site se ajustou novamente! O Flash – se configurado corretamente – possui a opção para se ajustar à tela do navegador automaticamente e isso é muito bom desde que se utilize vetores no site ao invés de Bitmap (uma vez que os Bitmap perdem qualidade considerável dependendo da extensão do redimensionamento).