Arquivos da categoria "CSS":
29/09/2011 - 18:48
Desenvolver o front-end de um site requer que além de termos conhecimento das linguagens HTML, Javascript, etc, também conheçamos técnicas para otimizar a carregação do site.
Já escrevi alguns posts sobre otimização de sites, usando CSS sprites ou diminuindo código, nesta toada apresento-lhes o image sprites.
O IMG sprite tem o mesmo funcionamento do CSS sprites, a diferença é que usado com a tag IMG a imagem é carregada no HTML e não no CSS, que para performance muda em… Nada ou muito pouco, no entanto, é bem interessante de ser usado. Comumente usamos (quem usa) os css sprites trocando um conteúdo por uma imagem isso não é uma pratica muito apreciada pelo Google, além disso, essas imagens não aparecem nas impressões dos usuários.
Vamos fazer uma lista de botões de redes sociais como vemos em toda a internet. Um ao lado do outro, sem nada de diferente.
Imagem
HTML
<ul class="compartilhamento">
<li class="twitter">
<a href="http://twitter.com/leandrogarcia">
<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
</a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/leandrooliveiragarcia">
<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
</a>
</li>
<li class="orkut">
<a href="http://www.orkut.com.br/Main#Profile?uid=1629432921042186633">
<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
</a>
</li>
<li class="rss">
<a href="http://www.leandrogarcia.com/feed/">
<img title="botoes_redes_sociais" src="http://www.leandrogarcia.com/wp-content/uploads/2011/09/botoes_redes_sociais.png" alt="" width="72" height="72" />
</a>
</li>
</ul>
CSS
.compartilhamento li{float:left;width:34px;height:34px;overflow:hidden}
.compartilhamento li.twitter img{margin: 0 0}
.compartilhamento li.facebook img{margin: -36px 0 0}
.compartilhamento li.orkut img{margin: -37px -37px 0}
.compartilhamento li.rss img{margin: 0 -37px 0}
Veja o exemplo
Trabalhar com o IMG sprite é tão simples quanto o CSS sprite.
Uma pratica interessante é mesclar os dois, ou seja, uma única imagem com as imagens de layout e aquela que tem papel efetivo na página, usando o css sprites para os elementos de layout e o img sprites para elementos com papel efetivo. Isto acarretará em duas requisições, mas a imagem já vai estar cacheada, de modo que para o usuário é como se fosse praticamente um único.
Enviado por: leandro garcia - Categoria(s): CSS, HTML, Praticas
Tags relacionadas: boas práticas, Praticas, sprites
29/01/2009 - 22:43
Volto eu aqui para escrever sobre performance de websites.
No mundo atual, as pessoas tem cada vez menos tempo e paciência para esperar por alguma coisa, muito menos se o que devem esperar é uma página ser carregada. Motivo este pelo qual nós, desenvolvedores para internet, devemos pensar na praticidade e velocidade que a página é carregada pelo usuário.
Existem algumas práticas que podem fazer com que seu código mais rapidamente carregado:
Diminua a quantidade de requisições http.
Em cada requisição que um site faz ao servidor, seja qual for (CSS, JS, Imaem, etc), há um trafego de informações, ou seja, sua página envia uma requisição e depois recebe a resposta do servidor, quanto menos requisições você fizer, menor será esse trafego, logo, mais rápido seu site carregará;
Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post.
Utilizar o menor número possível de arquivos CSSs, O ideal é usar apenas um, eventualmente um segundo, mas evitar o terceiro, o quarto a todo custo.
Se possível utilizar apenas um arquivo JS.
Cachear a página ou Header Expires
A inconveniência deste é que ele é server-side, ou seja, é feita através do servidor, mas serve para guardar na memória do usuário os arquivos das páginas que ele visitou, ou seja, um re-acesso ao site seria bem mais rápido.
Compressão de componentes (Gzip Components)
Esta é uma outra técnica de redução server-side. Com ela, o servidor entende que deve comprimir (ou “zipar”) os código, os CSSs os JSs e, inclusive o HTML.
Colocar as folhas de estilo no Header
Uma outra maneira eficaz de ganhar tempo no carregamento das páginas é, além de usar uma única folha de estilos, chamá-la de um arquivo externo e através da tag link posicionada dentro do header
Colocar os Scripts na parte inferior
O ideal é colocar os scripts logo antes da tag </body>, pois desta a página é carregada mais rapidamente. Quando o script está no header, a página primeiro carrega o script depois as demais informações, agora quando esle está posicionado abaixo, a página tem toda a informação carregado e só após isso os scripts são carregados.
Evite expressões em CSSs
Embora existam, as expressões em CSS não são a maneira mais eficaz de criar o seu layout, pois exigem demasiado tempo para serem entendidas pelos navegadores.
ex. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Folhas de Estilo (CSS) e Scripts (JS) externo
Evite colocar estilos e scripts em qualquer lugar no HTML, prefira sempre chama-los através de um arquivo externo. CSSs e JSs, são geralmente caheados pelo browser, o que significa que em uma próxima vista o usuário já terá esses arquivos preveamente carregados.
Otimize seus CSSs e JSs.
Quanto menor for seus códigos, menor tamanho eles terão, logo, mais rápido serão carregado.
Neste link, eu escrevi como se pode otimizar os códigos CSSs
Evite redirecionamentos
Evite ao máximo que suas páginas redirecionem para uma outra, pois desta maneira seu usuário terá que carregar duas ou mais páginas ao invés de uma.
Remova scripts duplicados
Remova todos os scripts duplicados, afinal, não há a necessidade de se carregar duas vezes a mesma coisa.
Reduza o número de DOMs
Reduza ao máximo as “firulas” via DOM do seu código.
Iframes
Se necesário for utilizá-los, utilize o menos possível, pois um ifram,e é uma outra página a ser carregada.
Escolha <link> ao invés de @import
Há duas maneiras de se carregar uma folha de estilo externa, através das tags <link> e @import. Prefira sempre a <link>, pois o @import se comporta da mesma maneira como se você colocasse o <link> lá embaixo.
E tem várias outras maneiras.
O Yahoo, disponibiliza um link onde eles explicam maneiras de se melhorar a performance. Além dessas que eu listei acima, há algumas outras. O line é este.
Como verificar como está o carregamento de meu site?
Não sei dizer quantas maneiras há para se fazer isso, a única que eu conheço, e acredito que a mais eficaz, é o YSLOW (Uái islou) (Porque está devagar).
O YSLOW, é um complemento para o Firefox que pode ser encontrado neste link.
No Próximo Post eu vou explicar como funciona o Yslow.
Enviado por: leandro garcia - Categoria(s): Complementos do Firefox, CSS, JavaScript, Praticas
Tags relacionadas: Complementos do Firefox, CSS, css sprites, JavaScript, Praticas, redução de peso, redução do tamanho
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://tutoriais.leandrogarcia.com/sprites/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, dicas, Praticas
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