Tutorial PHP: Alexa Rank

Embora muitos já usam o alexa rank para definir tops, estatutos, etc… mas pouca gente conhece o método de o usar sem ser através de aplicações já disponíveis na net.

Neste tutorial vou mostrar como criar um script que devolve o valor do Alexa Rank para um determinado site. O script pode ser facilmente adaptado para incorporar outras funções mais úteis.

< ?
class alexa {

    var $xml;
    var $values;
    var $alexa_address;

    function alexa($alexa_address,$domain) {
        $this->alexa_address = $alexa_address;
        $this->xml = $this->get_data($domain);
        $this->set();
    }

    function get_data($domain) {
        $url = $this->alexa_address.'http://'.$domain;
        $xml = simplexml_load_file($url) or die('Feed Indisponivel');
        return $xml;
    }

    function set() {
        $this->values['rank'] = ($this->xml->SD->POPULARITY['TEXT'] ? number_format($this->xml->SD->POPULARITY['TEXT']) : 0);
    }

    function get($value) {
        return (isset($this->values[$value]) ? $this->values[$value] : '"'.$value.'" n&atildeo existe.');
    }
}

$domain = "blue.muiomuio.net";
$alexa_connector = new alexa('http://alexa.com/xml/dad?url=',$domain);

// estilo 1
echo '

Alexa Rank:  '.$alexa_connector->get('rank').' '.$domain.'


'; 

// estilo 2
echo '

'.$alexa_connector->get('rank').' alexa rank para '.$domain.'


';

?>

Validação de campos com JavaScript

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

Validar formulários com jQuery

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

8 dicas uteis em CSS

O CSS Globe publicou á uns tempos um artigo com 8 dicas CSS interessantes. No artigo intitulado 8 Premium One Line CSS Tips podem encontrar exemplos de algumas destas linhas em funcionamento.

  • Alinhamento vertical com Line-Height

    line-height:24px;

    Quando se atribuí uma altura (height) fixa a um bloco pode-se usar a propriedade line-height para centrar verticalmente o conteúdo.
    Mais sobre o line-height:
    http://www.w3schools.com/css/pr_dim_line-height.asp
    http://www.maujor.com/tutorial/elinhas.php

  • Impedir que o conteúdo saia fora do layout

    overflow:hidden;

    Este código irá esconder todo o conteúdo que sair fora do layout. Imaginando que temos um DIV com 500px de largura e um link enorme. O texto do link que ultrapassar a largura definida (500px) não irá aparecer.
    Se quiserem que apareça um scroll para que o conteúdo mostre todo e apenas quando o conteúdo ultrapassar as dimensões definidas podem usar o seguinte código:

    overflow:auto;

  • Impedir que o texto se parta

    white-space:nowrap;

    Podem ver um exemplo aqui do que acontece quando se usa o nowrap.

  • Centrar blocos horizontalmente

    margin:0 auto;

    O valor auto funciona para as margens laterais (esquerda e direita). Isto fará com que o bloco fique centrado horizontalmente.

  • Remover borders de links activos

    Quando se clica num link aparece um border á sua volta. Já falei disso aqui e como remover este link. Nada mais simples:

    outline:none;

Sem dúvida, excelentes dicas :cool:

Botões Liquidos com CSS & HTML

Por vezes na construção de sites deparo-me com um problema, não quero criar uma imagem para cada botão que crio e não me apetece ter um botão quadrado completamente plano, por vezes pode mesmo quebrar o design do site.

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:

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.
Read more…

« Older Entries
Newer Entries »