MXStudio » Bruno_Dulcetti

Tamanho Fixo vs Porcentagem Parte II

Bruno_Dulcetti — Wed, 24 Mar 2004 00:00:00 +0000

- TAMANHO FIXO vs. PORCENTAGEM -

- PARTE II -

Olá pessoal.

Estou de volta com a segunda parte do artigo. Na primeira parte

eu citei algumas dicas, vantagens, desvantagens, etc… Agora

eu citarei alguns casos de como, onde e quando utilizar as opções

de porcentagem ou tamanho fixo. Vamos começar?

- TOPOS

Bom, falarei agora

como trabalhar com topos em HTML, tanto fixos, como em porcentagem.

Veremos as diferenças, como e quando utilizar.

Vamos ver o exemplo

abaixo:

1º Exemplo:

Uma desvantagem

de se usar tabelas fixas, é a tabela ficar pequena em uma

resolução maior como foi dito na primeira parte

do artigo, pois pode estar boa em 800×600, mas em uma resolução

1280×1024 pode ficar um pouco mais complicado de se enxergar,

dependendo da complexidade da figura.

Agora vamos

ver o mesmo exemplo com uma tabela em porcentagem:

Clique AQUI

para ver o exemplo

- No primeiro

exemplo, podemos ver uma tabela com 100% de largura e com um tamanho

pré-estabelecido na altura. Podemos ver que a figura se

repete de acordo com o tamanho da tabela, que se adapta com a

resolução do monitor. Caso queiram fazer um teste,

mudem a resolução do seu monitor. Caso esteja usando

800×600, mude para 1024×768, caso seu monitor permita, para vermos

como a figura aparece mais, pois a tabela aumentou por causa da

resolução.

- A segunda é

parecida com a primeira, a diferença é que na segunda

não foi estabelecido nenhum tamanho para altura, então

a altura da tabela fica de acordo com o tamanho da fonte no site

(pela tag ou por CSS).

- No terceiro

exemplo, vemos a tabela com um valor de largura menor que a imagem,

fazendo com o que a figura não fique totalmente visível.

O mesmo acontecendo com o valor da altura.

- No quarto exemplo,

podemos ver apenas uma figura e um fundo liso, imposto na tag

do HTML, e com o tamanho da altura fixo do tamanho

certo da figura.

Depois

desses exemplos nós podemos tirar algumas conclusões:

- Topos com fotos,

ficam melhores se usados com tamanhos fixos, pois não teremos

problemas de acordo com o tamanho da tabela, isso claro, se estivermos

trabalhando com um tamanho da tabela exatamente ao da figura.

Obs.:

Lembrando que nos 3 primeiros exemplos foram usados figuras

como fundo, ou seja, na tag

Na quarta, foi utilizada uma imagem na tag e colocado

uma cor de fundo na tag

2º Exemplo:

Clique AQUI

para ver o exemplo

- No primeiro exemplo

vemos que a tabela com 100% de tamanho, com um fundo liso (#CCCCCC),

colocado na tag

, tendo

duas colunas, cada uma com 50% de tamanho e com duas figuras,

uma em cada coluna. A figura da esquerda está alinhada

à esquerda, enquanto a da direita está alinhada

à direita. Isso faz com que as figuras fiquem intactas,

pois mudando a resolução, apenas a tabela é

que muda, pois as figuras estão alinhas nas extremidades.

- No segundo exemplo

vemos a tabela um pouco parecida com a do primeiro exemplo, a

única diferença são as colunas, nas quais

foram impostas tamanhos de largura diferentes. Na esquerda foi

usado um tamanho fixo de 300px, enquanto na segunda coluna não

foi colocado nenhum valor, e a figura da direita está alinhada

no centro.

Depois

desses exemplos nós podemos tirar algumas conclusões:

- No segundo exemplo,

a figura da direita se move de acordo com a resolução

do monitor, pois a tabela, além de estar em porcentagem,

a figura está centralizada, e não possui nenhum

valor na propriedade de largura. E como a da esquerda tem um tamanho

fixo, ela não irá mudar de tamanho nunca, e a coluna

da direita, como não tem nenhum valor imposto, irá

aumentar de acordo com a resolução.

Faça um teste aumentando

a resolução do seu monitor.

Vemos que o primeiro

exemplo pode ser usado com qualquer topo que tenha imagens sem

fundo, queira colocar alguma cor de fundo, e não queira

modificar a posição das figuras do topo.

No segundo exemplo,

podemos ver que podemos usá-lo quando quisermos que apenas

um lado do topo fique fixo e o outro fique variando de tamanho,

caso de uma logo na esquerda, que ficará fixa, e um banner

no lado direito, que irá se adaptar de acordo com a resolução.

Bom pessoal, chega

ao fim a segunda parte do artigo. Falei um pouco sobre como trabalhar

com figuras em tabelas com porcentagem e tamanhos fixos. Na terceira

parte, irei falar sobre a parte de conteúdo de um site,

como organizá-lo em tabelas em porcentagem e tamanhos fixos,

etc.

Grande abraço

a todos, espero que este artigo sirva para todos vocês.

Qualquer dúvida, comentário, elogio, crítica,

etc, mandem um email.

Bruno Dulcetti

Diretor de Criação

brunodulcetti@studiodigitall.com

StudioDigitALL.com – Porque não existe uma segunda impressão.

http://www.studiodigitall.com

TAMANHO FIXO vs. PORCENTAGEM

Bruno_Dulcetti — Wed, 10 Mar 2004 00:00:00 +0000

- TAMANHO FIXO vs. PORCENTAGEM -

- PARTE I -

Olá pessoal, neste artigo eu irei falar sobre uma das grandes dores de cabeça dos Webdesigners de hoje, o Redimensionamento de uma página, tabela, etc… Se não soubermos trabalhar direito com cada detalhe, teremos chances de perder clientes e usuários impacientes (como nós também), quem que gosta de ficar horas esperando uma página carregar, ou então ter que ajustar a resolução do monitor para podermos visualizar um site?

No começo da internet, a resolução mais usada nessa época, era a resolução com 640x480px, ou seja, 640 pixels na horizontal e 480 pixels na vertical. Mas de uns tempos pra cá, os computadores foram ficando mais potentes, e hoje vemos que as resoluções mais utilizadas são as com 800x600px e 1024x768px, sendo a primeira, ainda a mais usada por usuários domésticos, internautas em geral, e a segunda usada mais por profissionais. Temos ainda as resoluções 1280×1024, 1600×1200, entre outras, que são utilizadas mais por designers, ilustradores 2D e 3D, etc…

E por causa dessa grande variedade de resoluções, que nós, webdesigners, temos que ficar atentos a alguns detalhes, principalmente no design da página. Por exemplo, se você criar uma tabela, com um tamanho fixo de 900 pixels, os usuários que estiverem usando resoluções menores que 1024×768 irão ver a indesejável e amadora barra de rolagem horizontal. Quem que gosta delas? A não ser que seja propositalmente, como já vi em alguns sites, e o resultado é muito interessante. Por isso, temos que ter muito cuidado com os tamanhos das tabelas, resoluções, etc…

Nessa primeira parte, eu falarei um pouco sobre as diferenças, vantagens e desvantagens sobre as duas possibilidade.

Lembrando que essas propriedades são feitas nas tabelas, e com os atributos cellpadding e cellspacing iguais a 0 (zero) e na tag colocar topmargin e leftmargin iguais a 0 (zero), levando em conta o dimensionamento por porcentagem. Mas isso eu explico um pouco mais pra frente, e creio que vocês conheçam HTML, ou qualquer Editor de HTML.

ÁREA ÚTIL DO NAVEGADOR

Nessa parte, iremos ver o máximo que podemos trabalhar sem usar barras de rolagem, tanto horizontal, quanto vertical:

border=0>

Resolução	Largura	Altura
640×480	618	328
800×600	778	430
1024×768	1002	615
1280×1024	1258	871

Obs.: Estou levando em consideração configurações padrões, por exemplo, sem barras do ig, google, e outros objetos do gênero.

TRABALHANDO COM TAMANHOS FIXOS

Trabalhar com tamanhos fixos nas tabelas, é o modo mais utilizado e recomendado para usuários que ainda não possuem muita experiência com HTML e suas características de porcentagem, etc. Nas tabelas com tamanho fixo, você tem várias vantagens, mas porém, algumas desvantagens, que dependendo da situação, pode lhe trazer vários problemas. Abaixo seguem algumas vantagens e desvantagens:

:: VANTAGENS

. É possível colocar figuras de fundo sem ter problemas com resoluções distintas;

. A Tabela irá manter-se no tamanho pré-estabelecido, não importando a resolução do monitor;

. Possibilidade de alinhamento mais correto (a esquerda, centralizado ou a direita) no browser;

. A disposição de objetos e figuras, ficam fielmente posicionados.

:: DESVANTAGENS

. Dependendo da resolução e do tamanho da tabela, ela pode ficar maior que a tela útil do browser;

. Tabelas com um tamanho pré-estabelecido para resoluções pequenas, como 640×480, podem ficar um pouco difíceis de serem enxergadas em resoluções altas como 1280×1024;

. Possibilidade de aparecer barra de rolagem horizontal;

TRABALHANDO COM PORCENTAGEM

Trabalhar tabelas com porcentagem requer uma atenção muito grande, e uma noção de conteúdo, espaçamento, distribuição, entre outras coisas, pois não é todo mundo que usa a sua resolução (como já foi dito anteriormente). Não é somente você criar uma tabela e colocar width=?100%? que está tudo resolvido, nada disso. Ao criar uma tabela com 100% de tamanho, ela se adapta de acordo com o tamanho do espaço útil do browser (os tamanhos para cada resolução está disponível mais acima), fazendo com que todo o conteúdo da tabela se adapte junto, mudando de posição alguns elementos, reduzindo ou aumentando o número de linhas de um texto, etc… E é neste caso que devemos prestar bastante atenção na disposição dos objetos na tabela. Abaixo, algumas vantagens e desvantagens de se utilizar porcentagem em uma tabela:

:: VANTAGENS

. A tabela se adapta a qualquer tipo de resolução;

. Não aparecerá barra de rolagem horizontal (isso, claro, se você utilizar um valor até 100%);

. Utilizando o valor 100%, a tabela nunca irá ficar maior ou menor que a área útil do browser.

:: DESVANTAGENS

. Ao utilizar imagens de fundo na tabela, tem q se ter a noção que a imagem irá se repetir por toda a tabela, ou a tabela pode ficar maior ou menor dependendo da resolução;

. A disposição dos elementos na tela irão se modificar de acordo com a resolução, fazendo com que o conteúdo possa ficar mais vazio, ou mais cheio.

. Não possui um tamanho pré-estabelecido.

Com tabelas fixas, podemos trabalhar tranqüilamente com imagens de fundo, já que o tamanho está fixo. Mas isso se leva mais em conta, o tamanho na horizontal, pois mesmo se definirmos um tamanho fixo para a altura, se um texto necessitar de mais espaço, ele irá pular linhas, fazendo com que a tabela seja aumentada verticalmente. Por isso devemos ter cuidado com esses detalhes.

Ao criar uma tabela fixa, os objetos dentro dela ficarão na mesma posição, independentemente da resolução, pois ela se manterá, e se for o caso, criará a barra de rolagem horizontal.

Tente sempre que puder, manter distância da barra de rolagem horizontal, pois não é muito legal, ter que fazer o internauta correr a página horizontalmente para ver um detalhe, se ele já faz isso verticalmente.

Hoje em dia, a resolução 640×480 está praticamente extinta, mas ainda existem usuários que usam esta resolução. Com isso, você diminui um pouco sua preocupação com os tamanhos das tabelas, pois ao fazer um site compatível com a resolução 800×600, os usuários que possuem resoluções maiores, poderão vê-las normalmente. Você estará descartando alguns usuários que usam 640×480, mas como poucos a usam, não será uma dor de cabeça muito grande, pois o máximo que o usuário irá ver demais será os textos grandes e uma barra de rolagem horizontal.

Tanto para usuários iniciantes, como para profissionais experientes, recomendo o uso de tabelas fixas, com um tamanho 778px de largura, deixando a altura sem nenhum valor, se adaptando de acordo com o conteúdo. E dentro desta tabela, colocar todo o conteúdo do site.

Caso você queira trabalhar com tamanhos diferentes, vá em frente, use, mas recomendo que usem menores, pois maiores poderão lhe trazer alguns problemas com usuários que usam resoluções maiores, como eu. =]

Bom pessoal, essa primeira parte, falei um pouco sobre as diferenças, vantagens e desvantagens, na segunda parte eu usarei mostrarei alguns exemplos de como, onde e quando utilizar cada uma dessas propriedades.

Bruno Dulcetti

Diretor de Criação

brunodulcetti@studiodigitall.com

StudioDigitALL.com – Porque não existe uma segunda impressão.

href="http://www.studiodigitall.com/"

target=_blank>http://www.studiodigitall.com

Fundos Gradientes em HTML

Bruno_Dulcetti — Wed, 18 Feb 2004 00:00:00 +0000

– FUNDOS GRADIENTES EM PÁGINAS HTML -

Linguagem: HTML e CSS

Falae pessoal. Estou aqui para mostrar um efeito mto interessante e que pode ser visto em vários sites da WEB hoje. Muitas pessoas já me perguntaram, ficam em dúvida, etc, em saber como que é possível ter como plano de fundo HTML um gradiente. Bom, antes você poderia fazer um gradiente no Photoshop, ou qualquer outro aplicativo gráfico, e depois colocá-lo no atributo background da tag da linguagem HTML.

Bom, legal… Então porque estamos falando nisso se já temos uma forma de fazê-lo? Aí eu respondo com uma simples palavra: Resolução. A grande vilã de muitos designers desatentos que existem na WEB. Experimente colocar um gradiente feito para resolução 800×600 em uma de 1024×768. O gradiente vai se repetir verticalmente, ou horizontalmente, caso o gradiente seja horizontal, não é verdade? Tirando que se não for feito corretamente poderá se repetir tanto horizontalmente, como verticalmente.

Agora eu mostrarei um jeito muito simples e rápido de se fazer isso utilizando CSS linkado no HTML que terá o fundo. Lembrando que será um gradiente vertical ok? Vamos começar?

- PRIMEIRO PASSO

Crie uma imagem em qualquer editor gráfico (Fireworks, Photoshop, etc…), e crie uma nova imagem com 1x745px (ou seja, 1 pixel de largura e 745 pixels de altura).

- SEGUNDO PASSO

Preencha a imagem com um gradiente, com as cores qu você achar melhor (aqui eu usei o básico mesmo, Preto – #000000 e Branco – #FFFFFF). Agora, exporte a imagem com o nome fundo.gif

- TERCEIRO PASSO

A parte de criação está pronta, agora vamos começar a prorgamação. Vá no seu HTML, e entre as tags e , cole o seguinte código:

Obs.: Nesta linha de código, a página HTML está “importando” atributos de um arquivo CSS externo chamado style.css indicado no atributo href. Levando em conta que o aquivo CSS está no mesmo diretório do arquivo HTML.

- QUARTO PASSO

Terminamos com o HTML, agora vamos começar com oCSS externo. Vá no Bloco de Notas (eu prefiro o Bloco de Notas, mas quem quiser usar algum editor HTML como o Dreamweaver, podem usar), e insira o código abaixo:

body{background-color:#FFFFFF; background-image: url(fundo_body.gif); background-repeat: repeat-x;}

Obs.: Vou explicar essa linha de comando:

– body{ : início do código, depois disso, todo atributo que você colocar, irá influenciar tudo que estiver na tag , ou seja, tudo.

- background-color:#FFFFFF; : nessa parte, estou indicando a cor de fundo da página. Você deve colocar a cor que está na parte inferior do gradiente, e neste caso foi a cor branca, já que fiz um gradiente branco ok?

background-image: url(fundo_body.gif); : aqui ficará a imagem de fundo, ou seja, o gradiente que criamos ok? Seria como o atributo background da tag .

background-repeat: repeat-x; este é o principal atributo. Ele indica a repeticão da imagem que está no background, ou seja, o gradiente. O atributo repeat-x indica que a imagem será repetida apenas pelo eixo x, ou seja, somente na horizontal. O pessoal que quiser fazer o gradiente na vertical, só irá mudar essa parte aqui, colocando ao invés de x, colocar y: repeat-y. Isso fará com que o gradiente se repita somente na vertical, no eixo y.

- QUINTO PASSO

Salve tudo e teste abrindo o arquivo HTML, chamado aqui por gradiente.html. Veja o resultado aqui.

Bom, até a próxima, qualquer dúvida, crítica, sugestão, entre em contato.

Bruno Dulcetti

Diretor de Criação

brunodulcetti@studiodigitall.com

StudioDigitALL.com – Porque não existe uma segunda impressão.

http://www.studiodigitall.com