Estou desenvolvendo um framework CSS para agilizar a maioria dos desenvolvimentos front-end. Ainda não está completo, mas da pra se usar. Ja coloquei o código no Google Code, quem quiser ja pode baixar. No pacote tem um html exemplo com tudo que tem no framework.
Em breve mais novidades.
http://code.google.com/p/pakus/
Enviado por: leandro garcia - Categoria(s): Frameworks, css framework Tags relacionadas: CSS, FrameworksAnteriormente escrevi sobre maneiras de otimizar o carregamento das páginas.
Umas destas maneiras, é colocar todas as chamadas de scripts na parte de baixo da página, mas aí tem um problema. Aqui na empresa as publicidades são dinamicas e exibidas através de script, logo, para eu exibir um superbanner na posição correta, eu deveria chamar o JS externo no head da página, mas é oposto ao que devemos práticar aqui.
Alguns de você dirão, basta que você coloque um posicionamento reletivo(relative) na div container e coloque a publicidade na parte do código e posicione a div com a publicidade em absoluto(absolute).
Isso funciona, desde que a publicidade seja sempre no mesmo local, mas se a publicidade é um island, por exemplo que é no meio do conteúdo, o que fazer?
É aí que surge o Offset da página.
Com o Offse, Você consegue descobrir onde exatamente, em Pixels, está o elemebto que você quer encontrar.
Por exemplo. Eu tenho um campo de busca e quero ao clicar nele, abrir um suggest, é com o Offset.
Ou no caso do Banner, como eu fiz:
Criei uma div com o id bannerposicao nessa div eu joguei o tamanho do banner (height:240px;width:120px). Com isso eu criei um espaço vazio que eu posso preencher porexemplo com o endereço da central de relacionamentos (bom para efeito de SEO).
No final do código eu criei uma outra div com o id banner e joguei (via CSS) o tamanho da publicidade (height:240px;width:120px) e a posicionei como absoluto (position:absolute).
Depois disso, eu usei a função abaixo para posicionar a publicidade no lugar dela.
HTML
<div id="bannerposicao"> <a href="http://www.leandrogarcia.com/blog"> Blog do Garcia </a> </div>
<br class="clear" />
<div id="corpo">Corpo</div>
Aqui abaixo esta o banner
<div id="banner"> <img src="http://www.leandrogarcia.com/blog/wp-content/uploads/2009/03/puboffset.gif" alt="publicidade" /> </div>
<br class="clear" />
<button onclick="alert(document.getElementById('bannerposicao').offsetHeight);"> offsetHeight </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetWidth);"> offsetWidth </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetLeft);"> offsetLeft </button>
<button onclick="alert(document.getElementById('bannerposicao').offsetTop);"> offsetTop </button>
CSS
#bannerposicao{float:left; width:120px; height:240px; background:#ccc}
#banner{display:block; position:absolute; width:120px; height:240px; background:#ccc}
#corpo{clear:both; height:400px}
JS
function exibepublicidade(){
var $arg = document.getElementById('bannerposicao'); //Essa linha pega os dados da div
var $curTop=0,$curLeft=0,$curWidth=0; // Essa, cria as variáveis de largura, left e top
if($arg.offsetParent) {
do {
$curLeft += $arg.offsetLeft;
$curTop += $arg.offsetTop;
}while($arg = $arg.offsetParent)
} //O if acima, pega a posição da Div em relação à janela
var $posicao = document.getElementById('banner');
$posicao.style.top = $curTop + "px";
$posicao.style.left = $curLeft + "px";
}
exibepublicidade();
Com o Offset conseguimos pegar a Altura, a Largua a Posição Left e Top do elemento.
Altura (offsetHeight), Largura (offsetWidth), Left (offsetLeft) e Top(offsetTop);
Enviado por: leandro garcia - Categoria(s): JavaScript Tags relacionadas: Absolute, Absoluto, CSS, Java Script, JavaScript, Offset, PosicionamentoVolto 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): CSS, Complementos do Firefox, JavaScript, Praticas Tags relacionadas: Complementos do Firefox, CSS, css sprites, JavaScript, Praticas, redução de peso, redução do tamanhoSempre 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.
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-sizereferencia-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.
Enviado por: leandro garcia - Categoria(s): CSS Tags relacionadas: CSS, emDando 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, Praticas, dicas Tags relacionadas: boas práticas, CSS, css sprites, redução de peso, redução do tamanho, spritesBuenas, assiduos leitores de de vez em quando….
Boa parte de quem desenvolve interface HTML e se preocupa com a validação do código já se deparou com um problema grave: Minha página precisa conter um arquivo em flash, um vídeo do You Tube, porém isso deixa o código impossível de ser validado. Não mais… Eu lhes trago a solução pra isso.
Há duas maneiras de se fazer isso, um por Javascript, onde você inclue o código na página através de um innerHTML, ou através de um código mais suscinto. Abaixo mostro as três maneiras de se por o código.
A gerada pelo flash e o Youtube, porém errada.
<object> <param name="movie" value="http://www.youtube.com/v/izSOrOmxRgE"></param> <param name="wmode" value="transparent"> </param> <embed src="http://www.youtube.com/v/izSOrOmxRgE" type="application/x-shockwave-flash" wmode="transparent" width="390" height="321"> </embed> </object>
A Gerada por innerHTML
function iniciaFlash(){
var flash = “<object id=’imgflash’ width=’514′ height=’250′ align=’middle’ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0′ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′>”+
“ <param value=’sameDomain’ name=’allowScriptAccess’/>”+
“ <param value=’images/imgflash.swf’ name=’movie’/>”+
“ <param value=’high’ name=’quality’/>”+
“ <param value=’#324b2e’ name=’bgcolor’/>”+
“ <param value=’transparent’ name=’wmode’/>”+
“ <embed width=’514′ height=’250′ align=’middle’ pluginspage=’http://www.macromedia.com/go/getflashplayer’ type=’application/x-shockwave-flash’ allowscriptaccess=’sameDomain’ name=’imgflash’ bgcolor=’#324b2e’ quality=’high’ src=’images/imgflash.swf’/>”+
“</object>”
document.getElementById(”imagensflash”).innerHTML = flash;
}
Dentro da função iniciaFlash, crio uma variável com os dados do flash e incluo dentro da div que tem o id “imagensflash”.
Após isso inicio a função dentro do onload do body.
<body onLoad=”iniciaFlash()”>
E a mais simples e talvez a melhor.
<object type=”application/x-shockwave-flash” data=”arquivo.swf” width=”390” height=”321“> <param name=”movie” value=”arquivo.swf” /> </object>
Agora você pode escolher a que melhor se encaixar no seu projeto.
Abraços e até o próximo Post.
Enviado por: leandro garcia - Categoria(s): JavaScript, Praticas Tags relacionadas: CSS, Flash, HTML, JavaScript, Praticas, W3CNavegantes,
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