15/10/2008 - 06:01
Sempre que trabalhamos com CSS utilizamos algum tipo de unidade de medida para fontes ou margins…
A unidade mais comumente utilizada é o PX(Pixel), que é uma unidade relativa assim com o “EM”. Muitos dizem que o “em” é melhor para se utilizar em locais onde há um script de zoom nos textos.
Segundo o Maujor
A unidade de medida - em
A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).
Os exemplos abaixo esclarecem as definições:
h1 { line-height: 1.2em }
line-height de <h1> será 20% maior do que o tamanho das letras de <h1>
h1 { font-size: 1.2em }
font-size de <h1> será 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px
1em = 16px
Caso deseje começar a utilizar o em, existe uma calculadora on-line para tal no link abaixo.
Calculadora Em
Enviado por: Leandro Garcia - Categoria(s): CSS
Tags relacionadas: CSS, em
24/09/2008 - 23:05
Dando continuidade na redução do peso das páginas, apresento à vocês uma técnica chamada: CSS Sprites!
Mas o que diabos é isso? É um novo refrigerante?
Não, não é refrigenrante é a arte de fazer uma unica requisição de imagem via CSS para diversos itens.
Como assim?
Vamos começar do básico.
Segundo o Wikipedia
Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby flat images are seamlessly integrated into complicated three-dimensional scenes.
Em português
Sprites foram originalmente inventadas como um método de composição rápida de algumas imagens juntas em jogos de video game em 2d usando hardwares especiais. Como forma de otimizar o careggamento dos softwares….
Creio que Já é o sificiente!
Vamos ao que interessa. Os Sprites em CSS
A técnica é simples e você pode utilizar para quase todas as imagens do seu layout, desde que essas imagens não se repitam dentro de um mesmo elemento ou não tenham tamanho definido. Exemplo: em um background de página você não deverá utilizar o Sprites, pois não há um delimitador de altura e largura para a exibição desta imagem.
Vamos a um exemplo prático:
Façamos um menu.
Briefing: Quatro links, cada um com a cor de fundo diferente, cada um deve ter um degradê.
1º Passo: A IMAGEM
2º Passo: O HTML
<ul class=”sprites”>
<li class=”um”><a href=”#”>1</a></li>
<li class=”dois”><a href=”#”>2</a></li>
<li class=”tres”><a href=”#”>3</a></li>
<li class=”quatro”><a href=”#”>4</a></li>
</ul>
3º Passo: O CSS
*{list-style:none}
.sprites li{float:left; text-align:center; width:50px; height:30px; background:url(http://www.leandrogarcia.com/tutorials/images/sprites.jpg) repeat-x}
.sprites li.um{background-position: 0 0}
.sprites li.dois{background-position: -30px 0x}
.sprites li.tres{background-position: 0 -60px}
.sprites li.quatro{background-position: 0 -90px}
.sprites li a{color:#000;font-weight:bold}
Resultado
Assim Conseguimos um layout, onde cada um dos itens do menu tem uma imagem de fundo, mas não precisamos requisitar quatro imagens, apenas uma.
Vantagens?
Entre as vantagens, posso citar:
a facilidade de manutenção, uma vez que haverá menos imagens a alterar;
o menor número de requisições HTTP;
maior velocidade de carregamento, uma vez que haverá menos itens a requisitar.
Pra finalizar
Ao utilizar o sprites, nós possíbilitamos ao usuário uma maior velocidade no carregamento. Uma página carregada mais rápido, deixa o usuário mais feliz, um usuário mais feliz, tende a voltar mais vezes, desde que o conteúdo seja relevante
Veja em funcionamento: link
Download: Sprites
Enviado por: Leandro Garcia - Categoria(s): CSS, Praticas, dicas
Tags relacionadas: boas práticas, CSS, css sprites, redução de peso, redução do tamanho, sprites
20/08/2008 - 20:33
Certa vez precisei incluir a funcionalidade de impressão em um sistema. Deveria imprimir um relatório, mas tendo a opção de imprimir ao clicar em um botão.
Pesquisei e encontrei uma fucionalidade em Javascript que faz isso, window.print();
Essa funcionalidade passou a estar disponível a partir da versão 4.0 do internet explorer. Hoje, até onde sei, está presente em todos os browsers atuais.
Qual é a vantagem desta funcionalidade?
Não obriga o usuário a ir em arquivo -> imprimir ou Ctrl+p. Além desta facilidade, lhe dá mais opções para layout.
Abaixo a função para impressão
<script type="text/javascript">
function DoPrinting(){
if (!window.print){
alert("Use o Netscape ou Internet Explorer \n nas versões 4.0 ou superior!")
return
}
window.print()
}
</script>
Esta função deve ser incluída entre as tags header de seu HTML ou em um arquivo externo .js que você deve linkar.
dentro do body
<input type="button" value="imprimir" onClick="DoPrinting" id="botao" />
Legal, mas o botão também foi impresso. Eu não preciso do botão impresso.
Temos como não imrprimir o botão, mas vamos fazer de uma maneira melhor. Vamos configurar o layout de impressão.
Como?
Através de CSS.
<style rel="stylesheet" type="text/css" media="print">
#botao{display:none}
</style>
Como formatar, vai da sua imaginação.
Abraços
Enviado por: Leandro Garcia - Categoria(s): CSS, Descategorizado, JavaScript
Tags relacionadas: função, imprimir, JavaScript, print, window
11/06/2008 - 22:51
Navegantes,
faz dois meses que mudei de emprego (puxa, sorte sua. Teho mais o que fazer…).
Antes me preocupava apenas em não deixar as imagens ou animações em flash muito pesadas, mas não pensando em trfego, mas no usuário que ia acessar.
Logo que entrei aqui, no **, percebi quão necessário é a otimização dos códigos HTML, CSS, JavaScript e das imagens. Pensava, um kb a mais não fará diferença, mas se a página que você desenvolveu tiver uma regularidade de acessos muito grande, algo como 5 milhões mês, esse 1 kb, se torna mais de 4 gigas de trafego, isso é muito por tão pouco, não acham?
“Garcia, as páginas que costruo nunca passam de 1000 visitas mês, por que preciso me preocupar?”
É simples, trafego custa dinheiro. Em um servidor barato mais 100 mbs de trafego você pagará cerca de R$ 10,00 mês. Ou seja, você estará perdendo cerca de R$ 120,00 mês, simplesmente por que não quer melhorar seus códigos ou diminuir um pouco a resolução da uma imagem. Sem contar que você ajuda aquele que navega, pois carrega mais rápido, conseqüentemente ele acaba voltando. Você ajuda na indexação do seu site no Google, pois um código menor e melhor é melhor visto pelo robo deles. E, por incrível que pareça, você ajuda a natureza. (Como assim? Não vou plantar árvores nem nada) Simples, quanto menos a quantidade de Kbs de uma página mais rápido ela se torna para carregar o que economiza energia de quem está acessando e do servidor, pois trabalha menos.
“Legal, acho que vou tentar, mas como? O que eu posso fazer para diminuir o peso das minhas páginas?”
São Algumas coisas simples que com o tempo se tornam rotineiras pra você.
Vou citar algumas ações dividindo-as por IMG, CSS e HTML.
IMG.
No caso de Imagem, o que você pode fazer é diminuir o tamanho e a qualidade.
Ex. Você tem uma imagem com 500×500, mas vai exibir em 400×400, por que não diminuir o tamanho desta imagem, afinal você não utilizará ela toda.
Já a qualidade da imagem você pode diminuir utilizando um software de edição de imagens como o Photoshop. No caso do Photoshop, você precisa clicar em arquivo e exportar para Web. Selecionar jpg e diminuir a qualidade. Por padrão vem em 100%, mas cerca de 40% é o suficiênte para não perder muita qualidade.
CSS.
Veja este código.
a#link{
color:#000000;
font-size:15px;
font-family:Arial;
font-weight:bold;
margin-top:10px;
margin-left:5px;
margin-bottom:10px;
margin-right:5px;
}
(160 bytes)
tudo em uma linha. Eu costumava pra facilitar a visualização, programar cada propriedade em uma linha diferente. O Simples fato de passar a programar em uma linha diminui o peso do código em cerca de um kb.
Ex. em uma linha:
a#link{color:#000000; font-size:15px; font-family:Arial; font-weight:bold; margin-top:10px; margin-left:5px; margin-bottom:10px; margin-right:5px; }
(148 bytes}
Evitar espaços. Cada espaço consome 1byte, se você tiver em seu código 1024 espaços você terá 1kb em espaços.
Ex. sem espaço.
a#link{color:#000000;font-size:15px;font-family:Arial;font-weight:bold; margin-top:10px;margin-left:5px;margin-bottom:10px;margin-right:5px;}
(140 bytes)
Tirando o ; da última propriedade.
a#link{color:#000000;font-size:15px;font-family:Arial;font-weight:bold;
margin-top:10px;margin-left:5px;margin-bottom:10px;margin-right:5px}
(139 bytes)
Uma única propriedade para vários atributos, quando possível.
a#link{color:#000000;font:bold 15px Arial;margin:10px 5px}
(58 bytes)
Diminuindo para 3 a quantidade de caracteres de uma cor quando tiver os 6 caraceres iguais.
ex.
a#link{color:#000;font:bold 15px Arial;margin:10px 5px}
(55 bytes)
Setando direto a tag quando for sempre igual.
ex.
a{color:#000;font:bold 15px Arial;margin:10px 5px}
(50 bytes)
Viram, apenas com isso reduzi de 160 para 50 bytes esse código, agora imagine em um código de 500 linhas…
HTML.
Não consigo pensar um exemplo assim de cara, mas o simples fato de você setar a tag com as propriedades css fará com que você diminua a quantidades de declaração de classes e de ids.
Concluindo…
Não é dificil. É apenas uma prática, uma prática que se tornará usual a você. Você terá um site mais rápido, um site melhor indexado, um site com possibilidades de mais visitas e de quebra você ainda ajuda a salvar o planeja.
Tem também a identação que pode e deve ser usada no CSS e no HTML, isso eu explico depois.
Abraços
Enviado por: Leandro Garcia - Categoria(s): CSS, Praticas
Tags relacionadas: CSS, HTML, Identação, Peso da Página, Praticas