sexta-feira, 7 de junho de 2013
RESOLUÇÃO DE PROBLEMAS DE LAYOUT
* Listar alguns problemas de visualização de uma página web;
* Apresentar ferramentas que ajudam manipular o código
encontrando soluções para os problemas apresentados.
O float é uma propriedade meio imprevisível no CSS. Eis aqui um tutorial explicando passo-a-passo o seu funcionamento com alguns macetes que não dá pra encontrar em nenhum site de referência CSS.
Para começar, um exemplo de uma estrutura Html simples com 3 tags Div:
<div>
<div>Menu</div>
<div>Conteúdo</div>
</div>
O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do conteúdo. Se quisermos o menu à esquerda e o conteúdo à direita, o que os desenvolvedores geralmente fazem é:
.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }
Mas isso pode gerar uma série de dores de cabeça mais a frente no desenvolvimento. Vamos estudar o que pode dar errado e entender o porquê.
Esta técnica gera – principalmente no Internet Explorer – 2 erros de renderização:
1. Float sobrepõe o resto do site
Note que a borda do div pai que chamamos de “tudo” não está acompanhando os divs internos (.menu e .conteudo).
Para forçar o div “tudo” a circular também os objetos com float, mude o seu modo de exibição para table desta forma:
.tudo { display: table; }
UPDATE: um hack que pode funcionar melhor que o display:table; é adicionar uma div com clear: both; depois de todos os divs flutuantes.
.clear { clear: both; }
<div> </div>
Agora que o seu float está integrado com o restante do conteúdo da maneira que você queria, falta o cheque-mate.
2. Float:right não alinha com o Float:left
Quem já encontrou este problema sabe o quanto é irritante. Em alguns casos, as colunas não ficam uma do lado da outra NUNCA, por mais que você tente.
Para corrigir isso devemos usar o float da maneira correta. Ao invés de colocar float:left; no da esquerda e float:right; no da direita, colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente com um espaço de margem.
.menu { float: left; width: 30%; }
.conteudo { margin-left: 30%; }
Veja o código combinado de html e css:
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.tudo { display: table; }
.menu { float: left; width: 30%; }
.conteudo { margin-left: 35%; }
</style>
<!-- HTML -->
<div>
<div>Menu</div>
<div>Conteúdo</div>
</div>
Finalmente, um float dentro dos padrões e funcionando em qualquer browser.
* Apresentar ferramentas que ajudam manipular o código
encontrando soluções para os problemas apresentados.
O float é uma propriedade meio imprevisível no CSS. Eis aqui um tutorial explicando passo-a-passo o seu funcionamento com alguns macetes que não dá pra encontrar em nenhum site de referência CSS.
Para começar, um exemplo de uma estrutura Html simples com 3 tags Div:
<div>
<div>Menu</div>
<div>Conteúdo</div>
</div>
O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do conteúdo. Se quisermos o menu à esquerda e o conteúdo à direita, o que os desenvolvedores geralmente fazem é:
.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }
Mas isso pode gerar uma série de dores de cabeça mais a frente no desenvolvimento. Vamos estudar o que pode dar errado e entender o porquê.
Esta técnica gera – principalmente no Internet Explorer – 2 erros de renderização:
1. Float sobrepõe o resto do site
Note que a borda do div pai que chamamos de “tudo” não está acompanhando os divs internos (.menu e .conteudo).
Para forçar o div “tudo” a circular também os objetos com float, mude o seu modo de exibição para table desta forma:
.tudo { display: table; }
UPDATE: um hack que pode funcionar melhor que o display:table; é adicionar uma div com clear: both; depois de todos os divs flutuantes.
.clear { clear: both; }
<div> </div>
Agora que o seu float está integrado com o restante do conteúdo da maneira que você queria, falta o cheque-mate.
2. Float:right não alinha com o Float:left
Quem já encontrou este problema sabe o quanto é irritante. Em alguns casos, as colunas não ficam uma do lado da outra NUNCA, por mais que você tente.
Para corrigir isso devemos usar o float da maneira correta. Ao invés de colocar float:left; no da esquerda e float:right; no da direita, colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente com um espaço de margem.
.menu { float: left; width: 30%; }
.conteudo { margin-left: 30%; }
Veja o código combinado de html e css:
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.tudo { display: table; }
.menu { float: left; width: 30%; }
.conteudo { margin-left: 35%; }
</style>
<!-- HTML -->
<div>
<div>Menu</div>
<div>Conteúdo</div>
</div>
Finalmente, um float dentro dos padrões e funcionando em qualquer browser.
quinta-feira, 6 de junho de 2013
TÉCNICAS DE SUBSTITUIÇÃO DE IMAGENS E PADRÕES DE REPETIÇÃO DE IMAGENS
PPSI I - POST 1
Técnicas de substituição de imagens vem do termo inglês “Image Replacement”, o que está técnica faz basicamente é substituir (ocultar) um texto por uma imagem com o mesmo texto, através da propriedade background do css. Isto amplia as
possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site.
Não se vai projetar um texto longo em uma imagem pois isto demandaria um tempo de carregamento da página infinitamente superior ao tempo requerido pelo texto escrito com fonte Arial, Times, Verdana, etc.
No exemplo abaixo o nome de um site está escrito de duas formas. A primeira usando texto puro e a segunda usando uma imagem. A técnica se propõe a substituir o texto puro pela imagem. Estamos buscando servir a imagem via as folhas de estilo, sem uso to elemento IMG na marcação estrutural, como foi feito no exemplo mostrado a seguir.
CSS para Web Design
OBJETIVOS A ALCANÇAR
Neste tutorial, serão abordadas 6 das inúmeras técnicas existentes para image replacement. Não há preocupação de advogar esta ou aquela como a melhor de todas, e nem mesmo listar as 6 escolhidas como as melhores ou mais indicadas. A finalidade deste tutorial é a de indicar o caminho geral a seguir para esconder o texto e mostrar a imagem em navegadores gráficos. Cabe exclusivamente a você decidir qual delas empregar, pois é você quem conhece as condicionantes do seu projeto.
A substituição de um texto por uma imagem com uso de CSS deve ser feita de modo a não bloquear a acessibilidade ao texto substituido. Assim é preciso considerar basicamente as seguintes situações em que o texto deverá estar legível:
FAHRNER IMAGE REPLACEMENT (FIR)
Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.
O código FIR:
HTML:
<h1 id="topo">
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span{
display: none;
}
RADU DARVAS <img> REPLACEMENT
A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.
O código de Radu Darvas
HTML:
<h1 id="topo">
<img src="spacer.gif" alt="CSS para Web Design!" />
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span { display: none;}
h1#topo img {
width: 0px;
height: 0px;
}
STUART LANGRIDGE IMAGE REPLACEMENT
A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
padding: 40px 0 0 0; /* padding-top=altura imagem */
overflow: hidden;
background: url(cwd.gif) no-repeat;
height: 0 !important;
height /**/:40px; /* height=altura imagem - hack IE5's */
}
MALARKEY IMAGE REPLACEMENT (MIR)
Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
letter-spacing : -1000em;
width:270px;
height: 40px;
background-image: url(cwd.gif);
}
/* Hack para Opera, esconde do MacIE */
/*\*/html>body #topo {
letter-spacing : normal;
text-indent : -999em;
overflow : hidden;
}/* Fim do hack */
LINDSAY IMAGE REPLACEMENT
Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
background: url(cwd.gif) no-repeat;
width: 270px;
height: 40px;
font-size: 1px;
color: #xxx; /* cor do fundo */
DAVE SHEA IMAGE REPLACEMENT
Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio! (para desespero dos xiitas).
HTML:
<h1 id="topo" title="CSS para Web Design">
<span></span>
CSS para Web Design
</h1>
CSS:
h1#topo {
position: relative;
width: 270px;
height: 40px;
}
h1#topo span {
background: url(cwd.gif) no-repeat;
position:absolute;
width: 100%;
height: 100%;
}
LINK: http://www.maujor.com/tutorial/image-replacement.php
possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site.
Não se vai projetar um texto longo em uma imagem pois isto demandaria um tempo de carregamento da página infinitamente superior ao tempo requerido pelo texto escrito com fonte Arial, Times, Verdana, etc.
No exemplo abaixo o nome de um site está escrito de duas formas. A primeira usando texto puro e a segunda usando uma imagem. A técnica se propõe a substituir o texto puro pela imagem. Estamos buscando servir a imagem via as folhas de estilo, sem uso to elemento IMG na marcação estrutural, como foi feito no exemplo mostrado a seguir.
CSS para Web Design
OBJETIVOS A ALCANÇAR
Neste tutorial, serão abordadas 6 das inúmeras técnicas existentes para image replacement. Não há preocupação de advogar esta ou aquela como a melhor de todas, e nem mesmo listar as 6 escolhidas como as melhores ou mais indicadas. A finalidade deste tutorial é a de indicar o caminho geral a seguir para esconder o texto e mostrar a imagem em navegadores gráficos. Cabe exclusivamente a você decidir qual delas empregar, pois é você quem conhece as condicionantes do seu projeto.
A substituição de um texto por uma imagem com uso de CSS deve ser feita de modo a não bloquear a acessibilidade ao texto substituido. Assim é preciso considerar basicamente as seguintes situações em que o texto deverá estar legível:
- CSS desabilitada;
- imagens desabilitadas;
- CSS e imagens desabilitadas;
- navegação com leitor de tela.
FAHRNER IMAGE REPLACEMENT (FIR)
Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.
O código FIR:
HTML:
<h1 id="topo">
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span{
display: none;
}
RADU DARVAS <img> REPLACEMENT
A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.
O código de Radu Darvas
HTML:
<h1 id="topo">
<img src="spacer.gif" alt="CSS para Web Design!" />
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span { display: none;}
h1#topo img {
width: 0px;
height: 0px;
}
STUART LANGRIDGE IMAGE REPLACEMENT
A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
padding: 40px 0 0 0; /* padding-top=altura imagem */
overflow: hidden;
background: url(cwd.gif) no-repeat;
height: 0 !important;
height /**/:40px; /* height=altura imagem - hack IE5's */
}
MALARKEY IMAGE REPLACEMENT (MIR)
Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
letter-spacing : -1000em;
width:270px;
height: 40px;
background-image: url(cwd.gif);
}
/* Hack para Opera, esconde do MacIE */
/*\*/html>body #topo {
letter-spacing : normal;
text-indent : -999em;
overflow : hidden;
}/* Fim do hack */
LINDSAY IMAGE REPLACEMENT
Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
background: url(cwd.gif) no-repeat;
width: 270px;
height: 40px;
font-size: 1px;
color: #xxx; /* cor do fundo */
DAVE SHEA IMAGE REPLACEMENT
Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio! (para desespero dos xiitas).
HTML:
<h1 id="topo" title="CSS para Web Design">
<span></span>
CSS para Web Design
</h1>
CSS:
h1#topo {
position: relative;
width: 270px;
height: 40px;
}
h1#topo span {
background: url(cwd.gif) no-repeat;
position:absolute;
width: 100%;
height: 100%;
}
LINK: http://www.maujor.com/tutorial/image-replacement.php
Assinar:
Postagens (Atom)