Criar uma tag cloud não é um processo complexo. Básicamente precisas de ter uma fonte onde vais buscar as tags, normalmente é um vector onde são definidas e depois armazenadas em base de dados e a partir daí trabalhas o código. Vamos então começar.

< ?php
// cria a ligação á base de dados
$query = "SELECT coluna_da_bd AS tag, COUNT(id) AS quantity
FROM tabela
GROUP BY coluna_da_bd
ORDER BY coluna_da_bd ASC";
$result = mysql_query($query);


No código em cima vamos seleccionar qual é a coluna da base de dados que vamos usar para definir as tags.

while ($row = mysql_fetch_array($result)) {
$tags[$row['tag']] = $row['quantity'];
}


$tags[$row['tag']] – vector $tag recebe as keywords da base de dados.
$row['quantity'] – devolve a quantidade de vezes que a keyword existe.

Exemplo

$tag[processadores] = 2; – A palavra processadores existe 2x na pesquisa efectuada.
A quantidade de vezes que a palavra existe é útil para definir o tamanho da tag.


$max_size = 300;
$min_size = 100;


Aqui defines o tamanho mínimo e máximo das fontes. Para que funcione bem com qualquer estilo definido no CSS prefiro interpretar os valores em percentagem (%) em vez de pixels ou qualquer outra medida.

$max_qty = max(array_values($tags));
$min_qty = min(array_values($tags));


Agora é preciso definir quais as keywords com os valores máximos e mínimos do vector $tags e saber qual é o alcance desses valores de forma a podermos calcular o tamanho da fonte.

$spread = $max_qty - $min_qty;
if (0 == $spread) {
$spread = 1;
}

Uma vez feito isso vamos agora determinar o tamanho da fonte.

$step = ($max_size - $min_size)/($spread);
foreach ($tags as $key => $value) {
// Vamos encontrar o $value superior a $min_qty
// multiplicamos esse valor pelo tamanho da fonte ($size)
// E adicionamos o $min_size definido anteriormente
$size = $min_size + (($value - $min_qty) * $step);
// Colocamos o valor em forma de poder ser calculado em percentagem (%)
$size = ceil($size);

// Adicionar link ás tags
echo '<a href="#" style="font-size: '.$size.'%"';
// ajustar o tooltip gerado pelo atributo title do link
echo ' title="'.$value.' ( '.$key.' )"';
echo '>'.$key.' ';
}
?>


E pronto se tudo correu bem deverás ter uma tag cloud. Para limitar os resultados mostrados na tagcloud basta definires o limite quando fazes a consulta á base de dados:

$query = "SELECT coluna_da_bd AS tag, COUNT(id) AS quantity LIMIT 25
Desta forma a tua tagcloud mostra 25 tags.

No tutorial de hoje vou mostrar com é fácil usar a API do Technorati para mostrar o número de reacções (links) á tua página.

Para poderes usar a API do Technorati precisas da API key. Para isso tens de te registar no Technorati depois procura pela documentação da API e lá poderás obter a tua API Key.

Uma vez que já tens a tua API key cria uma constante usando a função define() que te permitirá passar a variável para outras funções sem teres de a declarar global ou escrever a API Key vezes sem conta.

Para definires a tua constante basta adicionares esta linha onde XXXXXXXX é obviamente a tua API Key:

< ?php define('TECHNORATI_KEY','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'); ?>

No exemplo que se segue o código apresentado será para mostrar as recções para a página em questão.

< ?php
    function get_technorati_reactions($page=NULL){
        $page = empty($page) ? 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] : $page;

        $apicall = 'http://api.technorati.com/cosmos';
        $apicall .= '?key='.TECHNORATI_KEY;
        $apicall .= '&url='.urlencode($page);
        $apicall .= '&format=xml';
        $result = simplexml_load_file($apicall);

        return intval($result->document->result->inboundlinks);
    }
?>

O script faz isto de forma automática, caso queiras restar terás de alterar

$page =
empty($page) ? 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] : $page;

para

empty($page) ? 'http://blue.muiomuio.net' : $page;

Neste caso usei o endereço do meu blog, podes usar o endereço que quiseres.

O script em cima são as funções para obter os resultados, falta agora mostra-los na página:

< ?php
    #Para a página que está a ser vista
    echo 'Reacções:  ', get_technorati_reactions();

    #Usando a função para outra página que não a que está a ser visualizada
    $count = get_technorati_reactions('http://muiomuio.net');
    echo 'Muiomuio.net tem', $count ,' Reacções';
?>

Este script vai buscar o número de reacções (links) no technorati que pode ser usado como medidor de popularidade.

Podes ver um exemplo na Smashing Magazine na sidebar no topo direito onde usaram o script para criar um botão personalizado com o número de leitores RSS.

< ?php
//a linha que se segue vai buscar o numero de leitores a tua feed (feed count)
$whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=http://feeds.feedburner.com/bluemuiomuio";

//inicializa o a sessão do Curl
$ch = curl_init();

//devolve o valor em vez de imprimir no browser
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//especifica o URL
curl_setopt($ch, CURLOPT_URL, $whaturl);

//executa um fetch para ir buscar o valor dos leitores feed
$data = curl_exec($ch);
//Fecha a sessão do cUrl
curl_close($ch);

$xml = new SimpleXMLElement($data);
$fb = $xml->feed->entry['circulation'];

//finito
?>

Agora para colocares o número de leitores na página basta fazeres um simples echo da variável $fb:

< ?php echo $fb;?>

É importante relembrar que é necessário alterar o endereço da tua feed na variável $whaturl

O código que se segue é bastante básico portanto se algum especialista em javascript quiser ajudar a criar um código igualmente simples e eficaz com uma estrutura melhor eu agradeço.

<SCRIPT>
function validate() {
var nome=form1.nome.value;
var empresa=form1.empresa.value;
var telefone=form1.telefone.value;
if (nome=='') {
alert('O seu Nome é um campo obrigatório');
return false;
}
if (empresa=='') {
alert('Por favor indique qual a Empresa');
return false;
}
if (telefone=='') {
alert('O campo Telefone é um campo obrigatório');
return false;
}
}
</SCRIPT>


Na primeira parte declaro variáveis caso tenha de adicionar mais código para trabalhar com o valor dos campos. A seguir faço a comparação caso os campos estejam vazios lança o alerta.
De forma a tornar o formulário mais coeso deveria verificar também se os campos não tiverem um determinado numero de caracteres para não validar.
Por agora este código chega para o que pretendo que é lançar um alert caso o cliente não preencha os campos obrigatórios.

Agora de forma a que o formulário não processe antes de verificar se os campos obrigatórios estão preenchidos é necessário antes da action declarar o seguinte:

onsubmit="return validate();"

Assim quando o formulário for submetido primeiro chama a função validate().
Como podes ver o código é relativamente simples, pode ser melhorado em vários aspectos e adaptados como verificar se o telefone possui apenas valores numéricos, se o nome ou empresa não tem espaços apenas para não ficarem vazios e se têm mais de 1 ou 2 caracteres, etc…

Ficam as sugestões para melhorares o código e caso o faças, partilha-o comigo.

Caso queiras aprender mais sobre JavaScript aconselho-te por começares a ler o tutorial de javascript da w3Schools

A solução é então usar JavaScript para detectar se os campos estão bem preenchidos ou não e nos dias de hoje não se justifica usar prompts para alertar o cliente de algo.
A solução é relativamente simples com jQuery.

//Filtros
var filters = {
requerido: function(el) {return ($(el).val() != ” && $(el).val() != -1);},
email: function(el) {return /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/.test($(el).val());},
telefono: function(el){return /^[0-9]*$/.test($(el).val());}};
// Extenções
$.extend({
stop: function(e){
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
}
});
// Código
$(document).ready(function(){
$(”form.validable”).bind(”submit”, function(e){
if (typeof filters == ‘undefined’) return;
$(this).find(”input, textarea, select”).each(function(x,el){
if ($(el).attr(”className”) != ‘undefined’) {
$.each(new String($(el).attr(”className”)).split(” “), function(x, klass){
if ($.isFunction(filters[klass]))
if (!filters[klass](el)) $(el).addClass(”error”);
});
}
});
if ($(this).find(”.error”).size() > 0) {
$.stop(e || window.event);
return false;
}
return true;
});
});


Explicação

A parte de processamento do script começa com $(document).ready o que faz com que o script seja processado apenas quando a página for carregada.

Quando o conteúdo é carregado o script percorre todos os formulários procurando uma class de CSS chamada validable (class=”validable”), podes editar esta variável no código do script, e adiciona um listener quando o formulário for submetido.

Após o formulário ser submetido o script percorre todos os elementos <input />, <textarea /> e <select /> procurando as suas classes e comparando-as com as declaradas na zona dos filtros.
O objecto filters é composto de uma série de métodos que são efectuados para validar os elementos de acordo com as classes.

Se o elemento do html não tiver uma classe declarada é adicionada a class error (class=”error”) ao elemento e não é efectuada a verificação do campo.

Podes testar o script aqui. Este tutorial foi adaptado para português. O tutorial original pode ser visto no anieto2k.com

Código HTML

A tag BUTTON tem uma maior capacidade de personalização que usando input type=submit.
Esta tag foi introduzido com a versão 4.01 do HTML e permite, por exemplo, que sejam adicionadas imagens dentro dele.

Fica aqui algumas referencias úteis:

• http://particletree.com/features/rediscovering-the-button-element/
• http://www.htmlhelp.com/reference/html40/forms/button.html
• http://www.w3schools.com/tags/tag_button.asp

Sem dúvida que a grande vantagem da TAG BUTTON é a sua capacidade de ter conteúdo e é essa capacidade que vou explorar.

<button><span><em>Texto Botão</em></span></button>

O objectivo com este código é criar um botão que permita ter um comprimento variável adaptando-se ao seu conteúdo de forma a que não seja necessário editar o CSS cada vez que quero criar um novo botão.

Após o código HTML é necessário criar uma imagem suficientemente larga para que independente da largura do botão ela se adapte sem quebras. De preferência crio sempre uma imagem com a largura do contentor onde o texto se encontra. Por exemplo se o texto tiver dentro de um DIV com 550 pixels de largura crio uma imagem com 550 pixels. Desta forma sei que por mais longo que o texto seja não irá quebrar.

Imagem usada no tutorial:

CSS

Em seguida vamos aplicar a imagem. A TAG BUTTON irá funcionar como contentor, o elemento SPAN e EM ficam com um estilo geral:

button {
border:none;
background:none;
padding:0;
margin:0;
width:auto;
text-align:center;
height:40px;
}


button span, button em{
display:block;
margin:0;
height:40px;
font:9pt Helvetica, Verdana, Arial, sans-serif;
color:#000000;
}

Em seguida aplicamos a imagem como background do SPAN, a imagem ficará da esquerda para a direita mostrando o canto esquerdo e o fundo do centro do botão:

button span{
padding-left:20px; /* mostrar canto esquerdo arredondado */
background:url(btn_bg.png) no-repeat 0 0;
}


Agora o elemento EM a onde se encontra o texto:

button em{
padding-right:20px;
background:url(btn_bg.png) no-repeat 100% 0; /* os 100% serve para adaptar a largura do botão */
line-height:38px;
}

Este código foi testado em Firefox 2, Internet Explorer 7 e 8 em Windows XP. Agradeço se alguém testar nos outros browsers e sistemas operativos.

Referência: http://www.alistapart.com/articles/slidingdoors/

Breve descrição

A secção extensível é composta por 2 partes:

1. O cabeçalho
2. O conteúdo

O cabeçalho

O cabeçalho é composto por um <span> e por uma de cabeçalho (h2) que ambos serão estilizados com CSS.
Ao clicar no cabeçalho irá mostrar ou ocultar o conteúdo.

O conteúdo

O conteúdo terá um texto de exemplo e um link que permitirá ocultar todo o conteúdo.

Primeiro Passo, o código HTML:

O link chama uma função em javascript chamada cabracega que mostra ou oculta o conteúdo do div com a ID de noticias. Este código pode ser usado para mais de uma secção extensível. Para tal basta atribuir nomes diferentes as secções. (noticias1, noticias2, noticias3…)
Caso contrário poderá causar algum conflito.

Segundo Passo: Código CSS

Terceiro Passo: Código Javascript

O JavaScript vai buscar a ID da secção através de um link:

Resultado final