Blue

Uma das formas de navegação introduzidas com o surgimento da Web 2.0 foi a navegação através de Tags.
Uma tag é nada mais nada menos que uma keyword que define algo. Se escrevo num site de informática sobre um processador, esse artigo pode ser marcado com uma keyword processadores, desta forma a pesquisa por artigos relacionados com processadores é simplificada.

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.

O Technorati é um dos mais conhecidos agregadores de conteúdos de blogs em toda a web que pussui uma API.

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.

Este tutorial vai ensinar como mostrar os leitores RSS do feedburner em texto. O script usa a API do Feedburner.

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

Em junho escrevi um artigo sobre a validação de campos usando o jQuery. É uma forma eficaz, pratica e moderna mas que nem sempre o cliente gosta.
Esta semana vi-me forçado a criar uma validação de campos á maneira antiga devido a uma escolha do cliente.

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

Normalmente quando crio um formulário apenas depois de o processar é que o PHP envia a mensagem de erro o que pode ser chato para o cliente especialmente se o formulário for algo extenso. Não quero que o cliente desista apenas porque o formulário complicou tudo.

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