É comum estarmos a visitar sites e blogs e depararmo-nos com cores horríveis, combinações de cores que não combinam, texto que têm uma leitura péssima por contraste com a cor de fundo. Concerteza que estes exemplos vos fazem lembrar alguns sites…

As cores de um site são, diria eu, quase tão importantes como o seu conteúdo, tornando-se uma grande parte daquilo que é a imagem do blog. Escolher a combinação de cores a utilizar nem sempre é tarefa fácil. Nem todos nós somos designers ou temos uma criatividade por aí além… Para estes casos existem disponíveis gratuitamente uma grande variedade de ferramentas que nos auxiliam na tarefa de encontrar as cores certas.

A ColorBlender é uma ferramenta que sugere 5 cores que combinam com uma cor que é sugerida por vocês.

No ColourLovers encontram milhares de paletes de cores disponíveis, assim como padrões que podem utilizar como inspiração para os vossos sites. Tem também uma ferramenta interessante que obtém uma palete de cores a partir de uma fotografia. Alternativa: Adobe Kuler

O WhatsItsColor dá-vos a cor predominante numa fotografia e sugere paletes de cores que podem ser utilizadas, de acordo com as cores da fotografia que disponibilizaram.

O ColorZilla é um addon para o Firefox que permite saber qual o código de uma cor que estamos a ver no nosso ecrã, e utilizá-la noutro programa. Muito útil.

Alguém tem mais sugestões?

Se o teu blog está muito lento isso pode ser causado pelas imagens que lá tens. Algumas imagens, tais como o logótipo, a imagem de fundo e as imagens dos posts podem tornar o blog muito lento, ou seja, se estas imagens forem muito grandes (em Kb) o blog vai levar mais tempo a carregar.

Uma primeira dica é que a imagem deve ter o tamanho exacto com que é apresentada ao visitante. Dando um exemplo: não convém nada ter uma imagem de fundo de ecrã, de 800 por 600, a carregar na página e depois reduzir o tamanho dessa imagem através de html. Apesar da imagem aparecer mais pequena o browser está sempre a carregar a imagem no seu tamanho original!

A segunda dica é que usem um formato correcto. PNG e JPEG são os melhores formatos. Esqueçam os gif’s e menos ainda os BMP. Mesmo dentro dos formatos mais optimizados devemos sempre escolher uma qualidade baixa, mas que permita a sua visualização sem problemas.

Existem ferramentas que permitem optimizar o tamanho das imagens, mantendo a qualidade. Em alguns casos podemos reduzir o tamanho em 90%! Tendo em conta que as imagens são o factor que ocupa mais recursos no carregamento de uma página, isto pode significar bastantes segundos.

Para optimizar as fotos aconselho a utilização do punypng, que é uma ferramenta gratuita onde vocês fazem o upload da vossa imagem e ele devolve a mesma imagem, mas optimizada. Aposto que não vão notar diferença na qualidade e vão ficar surpreendidos com a diferença no tamanho!

A Linkworth é uma empresa que faz a ligação entre webmasters com anunciantes. Basicamente os webmasters registam o site onde pretendem disponibilizar espaços para os anunciantes e depois recebem propostas destes para adicionar links. Estes links são pagos mensalmente, a Linkworth é muito fiável nos pagamentos, sempre certinhos ao dia 10 de cada mês.

Prova de Pagamento:

Quando registam o site ele fica disponível para os anunciantes, e depois é só esperar que alguns deles façam as propostas. Geralmente um anunciante acaba por deixar ficar bastante tempo o anuncio no vosso blog, o que permite garantir um ganho mensal sustentável.

Aconselho este programa para blogs em inglês. Para blogs em português deve ser mais difícil de arranjar anunciantes, mas em inglês funciona bastante bem.

Trabalho com eles há bastante tempo e a minha experiência é muito positiva. Nunca falharam um pagamento. A plataforma não é das mais simples mas com o tempo ganha-se o jeito. Já alguém conhece e trabalha com eles?

Recentemente tive de mudar um blog wordpress de um hosting para outro. Mudar um site que use bases de dados não é tão simples como fazer apenas a transferência de ficheiros para o novo host através de FTP. Temos de mudar também a base de dados, e garantir que nenhuma informação se vai perder durante a transferência.

Existem várias formas de o fazer, mas desta vez optei por uma que me parece ser a mais eficiente. Através deste processo vamos ficar com uma cópia exacta do blog no novo servidor. Isto evita que se tenha de instalar novamente o wordpress, mantendo todas as informações e definições, tornando desnecessárias quaisquer actualizações.

Preparação para a mudança

Antes de iniciar a transferência é crucial fazer um backup de todos os dados, incluindo a base de dados mySQL.

• Através de FTP passar para o PC todos os ficheiros que estão na directoria do blog.
• Pelo phpMyAdmin fazer a exportação da base de dados. Ver aqui como fazer.

Antes de fazerem a exportação da base de dados aconselho a eliminarem da tabela wp_comments todos os comentários de spam e a fazerem uma optimização de todas as tabelas, para evitar incoerências quando forem fazer a importação para o novo host.

Transferir para o novo host

Agora que já tens todos os ficheiros do blog, incluindo um com a base de dados, chegou a hora de passar tudo isso para o novo alojamento.

Através do cPanel do novo alojamento é necessário criar uma nova base de dados. Para isso entras na área MySQL Databases e fazes criar uma nova base de dados. Depois crias um novo utilizador e associas à base de dados entretanto criado. Podes ver estas tarefas em detalhe aqui.

Assim que a base de dados estiver criada podes fazer a importação do ficheiro com o conteúdo da base de dados. É neste passo que vais importar todos os posts e comentários do blog. A importação é feita através do phpMyAdmin. Entras na base de dados que criaste e fazes import do ficheiro. Neste momento já tens todo o conteúdo do blog no novo servidor.

Agora só tens de fazer o upload de todo o conteúdo do blog, que retiraste do host antigo. Vais fazer o upload por FTP para a pasta correspondente ao dominio, no novo alojamento. Antes de fazer o upload tens de re-configurar o ficheiro wp-config.php com os novos dados da base de dados (i.e. database name, user e password, que criaste no novo host).

Disponibilizar o blog no novo host

Depois de mover a base de dados e os ficheiros só tens de mudar as definições DNS, para que o teu domínio aponte para o novo alojamento. No site onde tens registado o dominio vais à área de gestão do DNS e fazes a actualização para os DNS do novo servidor. Esta actualização demora alguns dias, é provável que não vejas logo que a alteração foi feita. Durante este tempo aconselho que mantenham a outra conta de alojamento activa, mas convém que bloqueiem os comentários no blog antigo para que não se percam nenhuns nesta transferência.

Outros recursos

• http://www.devlounge.net/articles/wordpress-blogs-changing-hosts-the-easy-way
• http://www.optiniche.com/blog/273/move-wordpress-to-new-host/

Encontrei esta imagem que reflecte muito bem as diferentes etapas do design para a web. Se repararem metade do tempo que se perde tem a ver com o Internet Explorer, que apesar de ser o pior browser que há memória (principalmente o IE 6) ainda é utilizado por muitas pessoas.

De acordo com as estatísticas deste site 50% dos visitantes usam Firefox, 38% usam IE e 8% o Chrome. Para os 20% que ainda navegam com a versão 6 do IE: actualizem-se!

Os posts que nós fazemos não são todos iguais… Alguns são mais importantes que outros, pela qualidade de informação que nós disponibilizamos. Agora imaginem um visitante que está pela primeira vez no vosso blog. O mais importante é captar a sua atenção para o conteúdo mais importante, garantindo que ele é visível e se consegue aceder facilmente.

Depois de ler este artigo do Custódio do Blog do Dinheiro decidi que também eu deveria ter uma lista que mostrasse a todos os visitantes quais os artigos mais importantes que foram publicados no blog.

Para quem usa wordpress (como eu) e quer adicionar uma lista com os posts mais populares pode instalar um dos muitos plugins disponíveis para o efeito, por exemplo o Popularity Contest.

Como sabem eu adoro os plugins wordpress, mas sempre que tenho hipótese opto por não os utilizar, de forma a não tornar o blog lento e mais susceptível a erros e até ataques externos.

Assim sendo optei por adicionar esta pedaço de código na sidebar do blog. O que isto faz é ir buscar os 5 posts mais comentados, o que à partida pode significar que são os mais populares. Os plugins disponiveis usam outras variáveis para calcular os posts populares, como os backlinks e o numero de visitas, mas para o efeito parece-me suficiente. Experimentem.

<h2>Artigos Populares</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

Estes dias estava a dar uma olhada pelo blog quando reparei que a sidebar estava muito carregada de links. Como eu gosto das coisas arrumadinhas decidi agrupar os blocos das categorias, arquivos e dos ultimos comentários, tornando a barra lateral do blog bastante mais limpinha e agradável.

Para fazer isto optei por implementar um sistema de navegação por tabs, coisa que se faz facilmente recorrendo a um script java e um pouco de css. Ao optar pela navegação por tabs, é possível colocar muito mais informação no mesmo espaço, por esta fica organizada por separadores.

Existem várias soluções disponíveis e só temos de escolher a que nos der mais jeito, o que pode ser um problema. Como este processo pode demorar muito tempo vou deixar aqui registado qual a opção que tomei e como o fiz, de maneira a que quem quizer uma coisa igual possa facilmente replicar.

Implementar a tab navigation

Decidi implementar a tab navigation recorrendo à biblioteca java do Yahoo, a The Yahoo! User Interface Library (YUI), que tem um componente muito bom para as tabs, o TabView. Escolhi este porque funcionou muito bem e além disso o ficheiros .js são levezinhos.

Para começar podem fazer o download dos ficheiros necessários. São 3 .js e 1 para o .css. Podem fazer o upload deste ficheiros directamente para a directoria onde têm o theme do vosso blog. Depois disso basta adicionar na <head> do vosso theme o código (header.php):
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-element-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-tabview-min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tabs.css" type="text/css" media="screen"/>

Na sidebar (sidebar.php) do theme colocar o seguinte código, onde quiserem que apareca a div com as tabs.
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("tabspace");
</script>
<div id="tabspace" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Categorias</em></a></li>
<li><a href="#tab2"><em>Artigos por Mês</em></a></li>
<li><a href="#tab3"><em>Blogs Amigos</em></a></li>
</ul>
<div class="yui-content">
<div class="tabs">
<ul><?php wp_list_cats('sort_column=name'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_get_archives('type=monthly'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</div>
</div>
</div>

Neste exemplo em cada tab vai aparecer as categorias do blog, os arquivos e na terceira o blogroll. No entanto podem alterar facilmente para mostrar aquilo que quiserem.

Para tudo funcionar têm de alterar a tag <body> para <body class=”yui-skin-sam”>.

Demo e Ficheiros

Podem ver o demo aqui e fazer o download dos ficheiros necessários aqui.

Notas

1. Este exemplo está preparado para três tabs, mas podem facilmente adicionar mais, basta para isso replicar o código.
2. Para alterar as cores basta editar o ficheiro css.
3. Se não conseguirem com os ficheiros que forneci podem ir à página oficial e retirar os exemplos que a Yahoo lá colocou.

E porque hoje é sexta feira e já cheira a fim de semana: