02/10/2008 - 00:19
O que é?
O doctype é a maneira de você dizer para qualquer navegador como ele deve agir ao ler seu código HTML.
Uma estórinha…
Certa vez Joãozinho, programador web experiente e usuário de firefox, programou seu site vendo-o apenas no firefox. Ele já esperava que quando fosse abrir pelo Internet Explorer fosse acontecer alguns problemas de layout, normal, porém o que ele viu deixou-o perplexo… Seu site, todo seu trabalho de dias e horas estava totalmente quebrado. Xingou a Microsoft por seu software. Resolveu abrir no Opera, no Safari, no Google Chrome, e… Tudo estranho. Joãozinho ficou desesperado, arrancando seus cabelos, mas como programador experiente que é, parou. Saiu, se acalmou e foi avaliar seu código. Seu primeiro passo foi validar seu código via W3C e para sua surpresa, o erro era simples, faltava o DOCTYPE.
Moral da estória… preste atenção no que você faz!
Por que a falta do DOCTYPE no site do João zinho causou tantos problemas?
Porque cada browser tem um padrão próprio de renderizar o HTML sem DOCTYPE.
Bela estória Garcia. Mas me diga uma coisa, Que tipos de DOCTYPES existem e onde colocá-los em meu código?
Até onde sei são quatro tipos para cada compilação HTML (HTML 4.0, HTML 4,1, XHTML, etc).
Os DOCTYPES devem ser a primeira coisa que um browser lê em seu código HTMl, ou seja, na primeira linha.
Quais são eles?
Strict, Transitional e Frameset.
XHTML STRICT
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
O Strict é o “melhor” uma vez que ao dizer para um browser renderizar com ele, você está dizendo que seguirá rigorozamente os padrões.
XHTML Transitional
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Com este você diz ao Browser que seu código está em transição, não necessáriamente seguirá rigorozamente os padrões, mas não fará um “ninho de ratos”
XHTML FRAMESET
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Já o Frameser, ser para renderizar os enfadonhos e arcáicos Frames.
Enviado por: Leandro Garcia - Categoria(s): Praticas
Tags relacionadas: doctype, frameset, padroes, strict, transitional, webstandards
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
25/07/2008 - 19:45
Buenas, 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, W3C
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