A visualizar apenas posts colocados no ano de 2009

Conseguir o primeiro lugar no Google num termo competitivo não é fácil, no entanto muitas empresas que fornecem serviços de optimização para motores de busca fazem-no parecer como a tarefa mais fácil do mundo.

O problema é que os primeiros lugares que conseguem não são de termos competitivos, mas passam a mensagem aos seus clientes que fizeram um óptimo trabalho para garantir o primeiro lugar no Google.

Google

Acho graça quando uma empresa diz que domina o SEO porque conseguiu para o seu cliente o primeiro lugar no Google para a pesquisa por “quero saber o preço da carne no talho do zé”, um termo que ninguém pesquisa claro está. E o cliente fica todo satisfeito!

Outros lançam um site e depois vêm as estatísticas e dizem ao cliente que o site deles está muito bem posicionado para uma palavra qualquer para a qual nem fizeram nenhum trabalho de optimização mas até recebe 15 cliques por mês. É como dizer que eu sou um grande “optimizador” porque recebo muitos cliques de pessoas que procuram “como ser agricultor” no Google :lol:

Garantir o primeiro lugar no Google para um termo competitivo é difícil e está dependente de muitas variáveis externas, as quais não controlamos. Aliás, é por causa dessas variáveis terem um peso tão grande no algoritmo do Google que os seus resultados tem uma qualidade superior aos resultados do Bing por exemplo ;)

E garantir o primeiro lugar no Google para um termo competitivo nem sempre é sinónimo de muitas visitas, o termo pode nem ser pesquisado ou o nosso site pode falhar na entrega da mensagem nos SERP’s.

Titanium Solutions

Remodelação da primeira versão do site Titanium Solutions para melhorar a disposição do conteúdo e tornar mais simples a navegação e o acesso aos vários serviços.

Titanium Solutions

Primeira versão do site Titanium Solutions, apresentado como PAP no curso Técnico de Multimédia da EPTD – Rumos.

De acordo com o nome, que vai de encontro a uma posição forte na Internet, foram usados exemplos de tecnologia e engenharia que usaram titânio para superar dificuldades nos seus projectos, como o SR-71 Blackbird, o Koenigsegg CCR e o Tokyo Forum.

Ontem escrevi sobre reduzir o tamanho dos ficheiros CSS, Javascript e HTML, mas ainda existem mais dicas que vou partilhar convosco para reduzir ainda mais o tamanho dos ficheiros CSS.

E é algo tão simples como combinar vários atributos num só utilizando os shorthands.

Código CSS

No post anterior já expliquei os benefícios de reduzir o tamanho de um ficheiro CSS, portanto vou directo ao assunto.

Margin e Padding
Porquê indicar o atributo margin e padding para cada um dos lados se podemos usar apenas um atributo para tudo? Fica aqui um exemplo para verificarem qual acham que é mais eficaz.

1
.class {margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px}

O exemplo em cima é comum em muitos sites e temas para gestores de conteúdos. Aquela linha de código ocupa 77 bytes. No seguinte exemplo usamos o shorthand, temos o mesmo efeito visual e usamos apenas 19 bytes. Aliás, bastam dois atributos de margin ou padding para compensar usar o shorthand, se for apenas um atributo não vale a pena usar o shorthand.

1
.class {margin:1px}

Parece que já vos estou a ouvir perguntar “Então e se quiser um valor diferente para cada lado?”. Vamos supor que queremos dar um padding de 10px no topo, 20px no fundo e 5px para cada lado.

1
.class {padding:10px 5px 20px 5px}

Simples, não? Os valores são indicados seguindo o movimento dos ponteiros do relógio, cima, direita, baixo, esquerda. Para aqueles que não se dão bem com ponteiros podem pensar na palavra TRouBLe e associar as consoantes aos respectivos valores. Top, Right, Bottom e Left.

Outra dica, se quisermos indicar um valor nulo não é necessário escrever 0px. Certo que em CSS temos sempre que indicar as unidades, mas 0 é 0, seja px, pt, em ou percentagem.

 

Border
O border também funciona tal como o margin e o padding se todos os lados tiverem a mesma dimensão. O shorthand indica primeiro as dimensões, o estilo e a cor.

1
.class {border:1px solid #000}

A diferença para o margin e o padding é que se quisermos por exemplo o border apenas no topo e no fundo temos que indicar explicitamente esses lados, como no exemplo que se segue.

1
.class {border:1px solid #000; border-left:0; border-right:0}

É verdade que neste último exemplo apenas reduzimos o tamanho do código em 3 bytes, mas cada byte conta para um site mais rápido.

 

Cores
Os códigos hexadecimais das cores também podem ser reduzidos para ocupar menos espaço. Aliás, já devem ter reparado que nos exemplos acima apenas usei o código #000 para indicar preto.

Vamos então ver um exemplo de um border a branco e a cor de texto laranja.

1
.class {border:1px solid #ffffff; color:#ff9900}

Podemos reduzir este código facilmente, uma vez que os valores para cada canal do RGB são iguais. Por exemplo, na cor #575757 não podemos usar um valor hexadecimal mais curto, já na cor #557700 podemos usar o código #570.

Assim o código de cima poderia ser optimizado da seguinte forma.

1
.class {border:1px solid #fff; color:#f90}

A cor vai ser exactamente igual, mas cada código hexadecimal vai usar metade do espaço.

 

Fontes
Indicar a fonte que um site usa ocupa bastante espaço num ficheiro CSS. Mas podemos combinar todos os elementos (ou apenas alguns) num só atributo: font. Segue o exemplo.

1
.class {font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:14px; font-family:Verdana, Arial, Helvetica, sans-serif}

Usando o shorthand podemos reduzir o código de 155 bytes para 85 bytes.

1
.class {font:italic small-caps bold 12px/48px Verdana, Arial, Helvetica, sans-serif}

Os vários atributos devem ser indicados por ordem, como no primeiro exemplo. Começamos com font-style e seguimos para font-variant, font-weight, font-size, line-height e finalmente font-family. Reparem que, para indicar o line-height é obrigatório indicar o font-size e estes valores devem ser separados por uma barra (/) entre eles. Tal como no exemplo, 12px/48px indica um tamanho de texto de 12px e um tamanho de linha de 48px.

Não é no entanto obrigatório indicar todos os valores. Vamos supor que queremos apenas o tamanho do texto a 12px com o tipo de letra Verdana.

1
.class {font:12px Verdana, Arial, Helvetica, sans-serif}

Os restantes valores serão usados por defeito ou serão aplicados valores de classes superiores.

 

Background
Tal como no font, o shorthand background permite poupar bastante espaço no ficheiro CSS. Vamos observar o seguinte exemplo:

1
.class {background-color:#fff; background-image:url(imagem.png); background-repeat:no-repeat; background-position:top; background-attachment:scroll}

Usando o shorthand podemos reduzir o código de 148 bytes para apenas 61 bytes.

1
.class {background:#fff url(imagem.png) no-repeat top scroll}

Tal como nas fontes, os vários atributos devem ser indicados por ordem. Primeiro o background-color e depois background-image, background-repeat background-position e background-attachment.

 

Espero que estes exemplos vos possam ser úteis e que os possam aplicar nos vossos projectos para reduzir o tamanho dos ficheiros CSS. Usar os shorthands no desenvolvimento de um projecto são uma boa prática para reduzir o tamanho do código CSS e tornar o seu carregamento mais rápido.

Tenho partilhado várias dicas aqui no blog para tornar um site mais rápido. Algumas das dicas são relacionadas apenas com o WordPress, outras podem ser aplicadas a todos os sites em geral.

Hoje partilho com vocês a “arte” de reduzir o tamanho do código CSS, Javascript e HTML. E como já foi explicado anteriormente, um site de tamanho reduzido não só é mais rápido como poupa tráfego e recursos do servidor.

Interior de um relógio

Existem developers obcecados com “código bonito”, todo indentado e com comentários úteis a demarcar cada secção, algo que apenas é útil ao próprio developer ou àqueles webmasters de vão de escada que andam a copiar o código dos outros. Um utilizador comum (ou um developer com mais que fazer) não vai ligar ao código fonte, se é bonito ou feio.

Ora, eu sempre fui obcecado com código eficaz e não bonito. Se um carácter ocupa 1 byte posso começar a juntar o código todo numa só linha e a reduzir o tamanho do site. Como auto-didacta que sou comecei a fazer isto e a ver o tamanho de uma página a reduzir consideravelmente e apliquei este método na Sprint Total, pois na altura não tinha mais nenhum site.

Se acham que isto é má prática ou se acham que não resulta, então consultem o código fonte do Google, pode ser que mudem de ideias.

Existem ferramentas que fazem este trabalho por nós nos ficheiros CSS e Javascript, e assim podemos facilmente ter um ficheiro com “código bonito” para trabalhar e outro ficheiro em produção com código eficaz e reduzido.

Reduzir tamanho dos ficheiros CSS
O site CSS Drive tem uma óptima ferramenta para minimizar o código dos ficheiros CSS, é o CSS Compressor. Remove espaços, indentação, quebras de linha e comentários. No modo avançado ainda permite reduzir o tamanho dos códigos de cores, por exemplo passando #ffffff para #fff.

Eu habituei-me de tal forma a desenvolver os meus ficheiros CSS para poupar o máximo de espaço que, após correr o código no CSS Compressor passei a reduzir apenas 1% a 2% do tamanho final do ficheiro, quando tinha valores perto dos 8% a 9%. Pode-se dizer que o CSS Compressor me ajudou a desenvolver de uma forma mais eficaz.

Reduzir tamanho dos ficheiros Javascript
Existe um site dedicado apenas à compressão online de ficheiros Javascript usando o YUI Compressor desenvolvido pela Yahoo! Developer Network. O Online YUI Compressor permite utilizar o YUI online para reduzir o tamanho dos nossos scripts de uma forma segura.

Aqui podemos não só minimizar o código removendo espaços, indentação e quebras de linha como reduzir o nome de algumas variáveis que utilizamos nos scripts. No entanto aconselho a utilizar esta última função com código e a ter sempre um backup antes de aplicar o código minimizado.

Reduzir tamanho dos ficheiros HTML
Para reduzir os ficheiros HTML não conheço nenhuma aplicação, mas podem aplicar manualmente as dicas que indiquei anteriormente (é o que eu faço). Remover espaços, tabulações, usar CSS em vez de estilos no HTML e juntar tudo na mesma linha.

Com estas reduções, basta agora aplicar a compressão Gzip a estes ficheiros e certamente que ficam com um nível de optimização de código muito acima da média.

Muito se fala do Adblock, e curiosamente, fala-se mais das formas de bloquear os utilizadores do Adblock e dos problemas que esta extensão pode ter na actual Internet gratuita para todos do que outra coisa.

A meio deste ano decidi conduzir uma experiência num dos meus sites sobre o uso do Adblock, recolhi vários dados, efectuei alguns testes e obtive resultados bastante interessantes. Afinal o hype do Adblock não passa disso, simplesmente quase ninguém o usa.

Adblock Plus

Desenvolvi algum código que detectasse quando a publicidade não era carregada, gravando os dados recolhidos para perceber quem estava a bloquear a publicidade e porque razão. Tirei da equação os visitantes de bancos e ministérios públicos que normalmente navegam em conteúdo controlado por proxy e comecei a fazer uma recolha de dados mais efectiva. Cheguei a um valor interessante, cerca de 97 utilizadores diários usavam o Adblock, estamos a falar de apenas 1.4% das visitas diárias do site onde efectuei o teste.

Com uma percentagem tão baixa de utilizadores decidi ir mais longe e colocar um aviso que aparecia apenas uma vez a cada 24 horas a pedir para desligarem o seu bloqueador de publicidade, pois o site que estavam a visitar era gratuito graças às receitas de publicidade.

A partir daqui continuei a gravar os dados e a controlar quem desligava o Adblock ou quem continuava a utilizar o Adblock. Após 15 dias voltei a analisar os dados e só 58 utilizadores diários continuavam a usar o Adblock, apenas 0.8% das visitas diárias daquele site. Removi o código que colocava o aviso e continuei guardar os dados dos acessos e, curiosamente, os números mantiveram-se bastante estáveis durante outros 15 dias.

Após mais de 1 mês de testes removi completamente o código e tirei as minhas conclusões. O Adblock pode ser detectado e bloqueado facilmente, se um developer assim o desejar. No entanto podemos usar este tipo de código apenas para alertar os utilizadores para desligarem o Adblock. Se a publicidade num site não é intrusiva, como é o caso do site onde testei, então o mais provável é o utilizador por sua iniciativa desbloquear os anúncios nos sites que gosta e manter essa definição assim durante muito tempo.

Já existem vários sites, alguns de jornais de renome, que bloqueiam totalmente os utilizadores do Adblock, outros que avisam os utilizadores sempre que a publicidade é bloqueada. A guerra contra o Adblock é grande, mas a percentagem de utilizadores desta extensão do Firefox é extremamente baixa.

Manter um blog actualizado não é fácil, chegamos sempre a uma altura que não temos nada para escrever. Mas existem pequenos truques que nos ajudam a superar o Writer’s Block e a ter conteúdo sempre fresco, ou de reserva para quando não sai mesmo nada de novo pelas pontas dos nossos dedos.

Netbook Sony Vaio

Quando tenho uma ideia para um novo post tento sempre escrever em algum lado o tópico e uma curta descrição da ideia que tenho. Regra geral uso o Word Mobile ou uma aplicação de notas no telemóvel para guardar estas ideias, que depois transcrevo para o blog.

E porque faço isto? Quando tenho ideias para escrever estou sempre longe do computador, posso estar a conduzir, a passear, a tomar banho. Se não escrevo estas ideias nalgum local vou acabar por me esquecer e o que poderia ser um bom post vai cair no esquecimento.

Com uma lista organizada de tópicos coloco mãos à obra e, quando me sinto com vontade de escrever, começo a dar forma às ideias que tive anteriormente.

Se escrever mais do que um post acabo por o programar para ser colocado no blog mais tarde. Outros cujo conteúdo continuará actualizado por muito tempo, o chamado conteúdo evergreen, ficam guardados como reserva para serem publicados quando tiver numa fase em que não tenho mesmo nada de novo para escrever.

Assim, além de ficar com uma base de dados de ideias para futuros posts, mantenho-me prevenido contra o Writer’s Block e consigo manter o conteúdo de um blog sempre fresco e actual.

 
Copyright © 1985 - 2017 Eduardo Maio. Alguns direitos reservados.
eduardomaio.net - Às vezes mais valia ser Agricultor do que Programador
Ao navegar no blog eduardomaio.net está a concordar com os termos legais e de privacidade.