Blog do The Best

Quase todo mundo acompanhou a campanha do Presidente Obama, dos Estados Unidos, e sempre via nos cartazes aquela imagem desfocada em azul e vermelho. Os “Avatares” que o Obama utilizou na sua campanha, desenhados por Shepard Fairey, ficaram eternizados, porém você pode criar um avatar igualzinho ao dele.

Para isso acesse o site Obamicon.me e escolha criar, nela serão dadas duas opções para você criar o avatar, através da foto ou da sua webcam. O site é bem simples e traz algumas frases, que estavam nos carazes do presidente, porém você pode customizara sua.

Eu já criei o meu e você vai deixar essa passar?

Encontrei essa imagem no Ueba e achei genial e interessante a idéia do artista ter feito uma mistura entre o Bart Simpson com uma criança africana.

Se você tem problemas com o seu tema ao alinhar as imagens a esquerda, vou tentar ajuda-lo. Depois de muita pesquisa e testes sem sucesso, consegui uma dica que realmente resolveu no meu caso. E não seria justo não compartilhar com os leitores que utilizam o wordpress e estão com problemas.

Tudo isso acontece porque o seu tema, ou template, não tem no CSS as classes necessária para que o alinhamento das imagens ocorra sem problemas. No Wordpress 2.6.X, você configura a imagem para ser alinhada, assim que termina o upload da mesma (conforme fig. abaixo)

Quando você escolhe o posicionamento da sua imagem, o wordpress inclui no código html da inclusão a classe correspondete ao posicionamento escolhido. Para a opção nenhuma é colocado a classe alignnone para a opção esquerda é colocada a classe alignleft, para a opção direita é colocada a classe alignright e para a opção centro é adicionada a classe aligncenter. O mesmo ocorre quando é utilizado os botões do editor de texto sobre as imagens.

O funcionamento do wordpress é simples. E como exemplo, vou colocar o código da imagem acima:

<img class=”aligncenter size-full wp-image-2544″ title=”alinhamento” src=”http://www.thebest.blog.br/wp-content/uploads/2008/08/alinhamento.jpg” alt=”" width=”500″ height=”28″ />

Como podemos ver em negrito foi utilizada a classe aligncenter para centralizar a imagem, caso deseja-se alterar o alinhamento dela, bastaria trocar essa classe pela correspondente. Porém para que funcione é necessário que as classes estejam configuradas no seu arquivo de css.

Para que o seu problema seja resolvido é importante que se inclua as seguintes linhas:

.alignleft { float:left; margin:0 10px 10px 0; }
.alignright { float:right; margin:0 0 10px 10px; }

Obs.: Você pode tirar as margens que estão configuradas. Elas só estão ali para não deixar juntar a imagem com o texto na sua postagem, mas pode-se configura-las de acordo com a sua necessidade ou simplesmente retira-las.

Com isso o problema deve ser resolvido e as imagens passarão a ser exibidas no melhor estilo revista, quando colocadas a direita ou a esquerda.

Duro de matar alguém com essa ai ….

Um dos fatores que pode levar ao sucesso com os leitores paraquedistas (aqueles que vem de sistemas de buscas) é o tempo de carregamento da sua página. Temos que pensar que esses leitores estão buscando uma informação e, quase sempre, estão com pressa, até porque ele tem uma variedade de escolha com a mesma informação.

O Aconselhável é que o blog/site carregue dentro de 10 segundos, sendo o ideal dentro de 5 segundos. Você deve estar pensando que é difí­cil chegar a um desses valores e eu lhe direi que é muito complicado, pois você acaba tendo que abrir mão de algumas coisas como o excesso de imagens na barra lateral, diminuir os banner de parceiros e etc (mais abaixo vamos ver algumas dicas).

Para você conferir o tempo de carregamento do seu blog/site não é necessário pegar um cronometro e ficar a frente do micro esperando o carregamento, para essa tarefa existem alguns sites que disponibilizam uma ferramenta específica. Vamos conhece-los:

Website Speed Test

Esse site tem uma ferramenta simples e muito intuitiva de usar, pois basta colocar o endereço do blog/site sem o ” http://www. ” e permite verificar até 10 sites diferentes. O resultado é bem simples de se interpretar.

Resultado do blog = 1.43 s

Pingdom

O Pingdom é um site mais completo e mostra em gráfico como está sendo carregada a sua página. Ele leva em consideração todo o processo, para no final dar uma estatística mais completa.

O resultado é um pouco mais complicado de interpretar, porém tem bastante informação para ser analisada e interpretada.

Resultado do Blog = 8 segundos

WebSiteOptimization

Este é site que traz muita informação para analise e informa o tempo de carregamento do seu site para conexões discadas de 14.4k até conexões de 1.44MB. Além de trazer informações sobre imagens internas e externas.

Os resultados são bem estruturados e o site ainda dá algumas sugestões para melhorar a sua performance.

Resultado do blog = 2,26 minutos (56.6k) 14s (1,44MB)

Todos os resultados apresentam diferenças, pois os métodos utilizados são diferentes e, também, pode-se levar em consideração a localização dos servidores.

Dicas para melhorar o tempo do seu blog/site

Antes de dar as dicas é importante que voce entenda como é feito o processo de carregamento de uma página pelo browser. O processo é simples pois ele, basicamente, é um download dos itens que você colocou na sua página.

Vamos ver um exemplo: Numa página tem 5 kB de html (arquivo de texto que contém as informações de carregamento da página), 1 imagem de logo com 20Kb, 1 imagem com 23kb e um texto de 3Kb. O carregamento seria de 5 + 20 + 23 + 3 = 51Kb de downloads.

Porém esses 51 Kb de downloads, que são feitos pelo browser podem apresentar vários resultados dependendo de alguns fatores. O principal deles é a localização do arquivo em relação ao browser e ao site. Para que se entenda esse fator é simples, basta pensar na trajetória do arquivo vindo de um servidor que se encontra na europa para um browser brasileiro e um arquivo que está em um servidor no Brasil para o browser brasileiro.

Agora vamos ver algumas dicas (sugestões) para que seu carregamento melhore bastante.

Compactar imagens

As imagens normalmente são as grandes vilãs para um carregamento lento. Tudo isso por causa do tamanho delas. Dependendo do formato que você utilize para exibir as suas imagens os problemas podem aumentar. eu aconselho que se leia o artigo Que tipo de imagem utilizar em seu blog.

Evitar o excesso de imagens

O excesso de imagens, principlamente nas barras laterais e menus do site, devem ser evitadas, pois ,como vimos anteriormente, elas podem causar alguns problemas de lentidão no carregamento e vão aumentar o a utilização de banda gasta pelo seu site (para os que tem hospedagem paga, o custo também é aumentado).

Devemos apenas usar as imagens necessárias na página fixa do blog/site, pois como ela carrega sempre e independe do artigo que o leitor está lendo, a lentidão e o tráfego passam a ser crônicos. Deixe espaço para que você possa utilizar imagens nos seus textos e embelezar os seus trabalhos.

Evitar layouts muito carregados

É super importante que você antes de escolher o template ou layout do seu blog/site, verificar o tempo de carregamento dele. Para isso você pode utiliza o site de demonstração do template ou instala-lo e testa-lo nos sites acima.

Os templates que são mais básicos tem uma grande probabilidade de serem mais leves, mas não se engane e sempre teste antes. Os templates muito coloridos e com muitas curvas são mais pesados, pois utilzam mais imagens para fazer estas curvas.

Evite colocar muitos banner de parceiros

Como disse anteriormente as imagens são grandes vilãs e os banners, como são imagens e normalmente hospedados em servidores gratuitos, não deixariam de ser também. Cheguei a fazer um teste com 10  e 5 banners numa página de testes e percebi um resultado impressionante de 4,3 segundos de diferença.

* Entendam que não estou entrando no mérito de qualquer sistema de parcerias e muito menos falando o que você deve fazer com suas parcerias, lembre-se que são dicas ou sugestões.

Evite colocar informações duplicadas

Não tem necessidade de você duplicar informação no seu site/blog, principalmente nas partes fixas dele. Toda informação duplicada faz com que seja carregada duas vezes a mesma coisa.

Evite colocar widgets externos

Os widgets externos, principalmente os que mostram informações sobre os visitantes , estatísticas e tráfego. Apesar de ser uma informação interessante para o responsável do blog, mas para os visitantes sócausam transtornos.

O ideal é que se utiliza wigets que tragam informações interessantes para os seus leitores e caso deseje colocar informações estatísticas do seu projeto, faça um artigo com os dados ou coloque em uma página específica. Assim você atingira o seu objetivo e somente quem se interessar pelo assunto vai buscar a informação.

Imagem por apesara

Como disse lá no início do artigo, o tempo ideal para a abertura completa da página é de até 10 segundos em um micro com conexão rápida banda larga. Deveos sempre lembrar que ainda temos pessoas que utilizam conexão discada. Claro que isso depende do objetivo do projeto e de seu tamanho, mas é importante que o carregamento seja rápido para o seu leitor não desistir de lhe visitar.

Essa imagem é a prova real de que os irmãos Mario e Luig, do Mario Bros, tiveram filhos após o sucesso do jogo. ainda não se descobriu nada sobre as mães, mas pode se notar que elas tem traços orientais e, provavelmente foi em alguma passagem pela SEGA JAPAN.

Vi aqui

Algumas pessoas estão me perguntando por email como se coloca uma imagem de identificação para o seu usuário aqui no blog e vou explicar como funciona os gravatars.

Como aqui no blog para comentar não é necessário ter cadastro, cada um utiliza o nome que quer informar, não teria como associar uma imagem ao usuário informado. Porém o Wordpress, ferramenta utilizada para rodar o blog, oferece um recurso compartilhado para associar uma imagem ao email que você utiliza nos comentários.

O gravatar é um serviço gratuito e a inscrição é simples, basta informar um e-mail válido. Para se inscrever clique aqui.

Depois que o processo de cadastro estiver finalizado e você logar, basta escolher a opção Add a new one e a opção que deseja (enviar do seu computador, usar uma imagem da internet ou usar uma imagem da galeria deles).

Depois que escolher ou enviar a imagem, basta esperar uns 10 minutos e conferir nos blogs em que o autor utilize a opção de exibição dos gravatars nos comentários.

Tem gente que não sabe brincar né?? Essa é a prova de que sempre olho a beleza interior.