Este é um post para apresentar algumas novidades que, de certa forma, guiarão minhas publicações por aqui. A primeira é que não vou dar continuidade aos meus estudos com .NET, e estou reduzindo meu trabalho com o ASP clássico. Isso não quer dizer que encerrarei meus posts sobre a linguagem, mas como estou me dedicando a estudar outras, possívelmente me focarei nelas.

Ah, preciso agradecer ao Leo Caseiro, que me disponibilizou um material excelente sobre .NET quando comecei a estudar!

Espero que este artigo ajude a orientar de alguma forma as pessoas que procuram pela manjada questão: "que linguagem é melhor estudar?"

Vamos aos motivos das minhas mudanças...

Porque "desistir" o ASP clássico?

Já fazia algum tempo que eu procurava evoluir, trocar de linguagem de programação, e por isso iniciei meus estudos em .NET. Vamos aos 3 4 motivos que me levaram a "pular fora":

Para aprender alguma coisa nova. E não estou dizendo que sei tudo do ASP, não mesmo. Mas mudar é bom, gosto de mudanças, aprender uma linguagem de programação nova é como começar a estudar um novo idioma, estimula o cérebro, tira noites de sono de uma forma positiva, anima!

Queria mudar porque o ASP está se tornando obsoleto (para muitos, já é) devido a migração para o .NET, que apresenta mais possibilidades e melhor desempenho (dizem, nunca testei realmente).

Comunidade de desenvolvedores muito pequena. Tudo bem que existe o Google, existem fóruns e até uma documentação razoável, mas nada comparado a PHP, por exemplo. Muitas vezes eu quebrava a cabeça para desenvolver determinada funcionalidade, sabendo que em outras linguagens uma centena de desenvolvedores já haviam desenvolvido isso e disponibilizado o código para uso, estudo e alterações.

Dinheiro. Grana. Eu pago licença para utilizar o Windows Server no meu servidor. Eu não consigo bons dll´s gratuitos para manipulação de imagem ou arquivos (pdf´s, planilhas, etc...). Quase tudo é pago, seguindo o "padrão" da tecnologia ASP.

Porque não o .NET?

Alguns dos motivos que me fizeram querer mudar do ASP continuam presentes na linguagem .NET, como por exemplo o custo.

A comunidade de desenvolvedores não ser muito grande (ou não gostar de colaborar com o mundo, indo contra a poderosa e adorada "interwebs").

Motivos pessoais: como eu comentei, estou de emprego novo, e por aqui o .Net não é utilizado (pelo menos até onde eu sei).

Porque escolhi o PHP?

Pra ser cool.

O primeiro motivo, obviamente, a linguagem aberta, gratuita. Vou economizar um dinheiro considerável por mês pelo simples fato de não precisar pagar licença do Windows no servidor. Isso será a longo prazo, somente depois que eu migrar meu sistema todo de Intranet para o PHP, que vai levar possivelmente mais do que seis meses...

Para ficar do lado negro da força!*

Comunidade gigantesca de desenvovledores e melhor, que adoram compartilhar conhecimentos. A documentação é maravilhosa.

Linguagem ainda em desenvolvimento (agora o PHP 5, estou certo?), sem a necessidade de "extensões" como os dll´s que já me perturbaram no ASP.

Já tinha um conhecimento superficial sobre a linguagem, foi com ela me inseri no mundo do desenvolvimento criando meu primeiro blog e CMS, lá no meu tempo de guri...

Comecei a estudar loucamente MVC, nunca vi um framework gratuito e funcional para ASP, já me indicaram diversos (e aparentemente muito bons) para o PHP!

É isso... a partir de agora não se assustem se surgir por aqui alguns posts "PHP for dummies", e aceito sugestões de artigos também, viu?

* o título deste artigo é graças ao tweet do @cleiverrr, quando anunciei meus estudos com o PHP: "lol @gserrano está vindo pro lado negro da força! =D"

• faça um select na tabela de usuários, retornando todos os ids
• percorra a lista de ids, retornando cada usuário relativo a esse id
• faz um if para checar o user_level. É ele que define o perfil do usuário

O código seria:

<?php
            $aUsersID = $wpdb->get_col( $wpdb->prepare("SELECT $wpdb->users.ID FROM $wpdb->users ORDER BY %s ASC", ""));
            foreach ( $aUsersID as $iUserID ) :
                $user = get_userdata( $iUserID );
                if($user->user_level==2) { //2 é o user_level para contribuidor
                    //faz o que for necessário com o objeto $user
                }
            endforeach;
?>



Pelo que pude ver da estrutura da base do Wordpress, que eu ainda estou conhecendo, há uma tabela wp_users que tem os usuários e uma outra, wp_usermeta, de metadados. Não entendi porque user_level não faz parte da wp_users pois está ligado diretamente ao usuário (será que nas primeiras versões não existia esse campo e depois criaram como um metadado?), mas certamente um inner join poderia resolver mais elegantemente essa questão.

function ValidarCPF(Objcpf){
    var cpf = Objcpf.value;
    exp = /.|-/g
    cpf = cpf.toString().replace( exp, "" );
    var digitoDigitado = eval(cpf.charAt(9)+cpf.charAt(10));
    var soma1=0, soma2=0;
    var vlr =11;
    for(i=0;i<9;i++){
        soma1+=eval(cpf.charAt(i)*(vlr-1));
        soma2+=eval(cpf.charAt(i)*vlr);
        vlr--;
    }   
    soma1 = (((soma1*10)%11)==10 ? 0:((soma1*10)%11));
    soma2 = (((soma2+(2*soma1))*10)%11);
   
    if(cpf == "11111111111" || cpf == "22222222222" || cpf ==
"33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf ==
"66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf ==
"99999999999" || cpf == "00000000000" ){
        var digitoGerado = null;
    }else{
        var digitoGerado = (soma1*10) + soma2;
    }

    if(digitoGerado != digitoDigitado){
       return false;
    }
    return true;
}

O código é simples:

<ul>
<?php
/**/
$years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date) FROM $wpdb->posts WHERE post_status = "publish" AND post_type = "post" ORDER BY post_date DESC");
foreach($years as $year) :
?>
	<li><a href="<?php echo get_year_link($year); ?> "><?php echo $year; ?></a>

		<ul>
		<?	$months = $wpdb->get_col("SELECT DISTINCT MONTH(post_date) FROM $wpdb->posts WHERE post_status = "publish" AND post_type = "post" AND YEAR(post_date) = "".$year."" ORDER BY post_date DESC");
			foreach($months as $month) :
			?>
			<li><a href="<?php echo get_month_link($year, $month); ?>"><?php echo date( "F", mktime(0, 0, 0, $month) );?></a></li>
			<?php endforeach;?>
		</ul>
	</li>
<?php endforeach; ?>
</ul>

Com isso, será exibido um menu mais ou menos assim

2009

• Maio
• Abril
• Março
• Fevereiro
• Janeiro

2008

• Dezembro
• Novembro

Uma das funcionalidades mais necessárias no PHP é criar uma thumbnail (miniatura) de uma imagem - e certamente é uma das primeiras coisas que alguém que começa a programar em PHP e precisa fazer com imagens, tem a necessidade.

Segue abaixo a função que eu uso - há anos. Não foi desenvovida por mim, achei ela no Google anos atrás, e sei que ela se popularizou!

<?php
   //imagem original
    $source_image = "spork.jpg";

   //altura máxima
    $thumb_height = 40;

    //prefixo da miniatura
    $thumb_prefix = "thumb_";

   //qualidade - vai de 0 a 100
    $quality = 100;

   //checa se imagem existe
   if(!file_exists($source_image)) {
      echo "Imagem não encontrada";
   } else {
       //tipos suportados (jpg, png, gif, etc...)
        $supported_types = array(1, 2, 3, 7);

        //retorna informações da imagem
        list($width_orig, $height_orig, $image_type) = getimagesize($source_image);

        //checa se é um tipo suportado
        if(!in_array($image_type, $supported_types)) {
            echo "Tipo não suportado de imagem: " . $image_type;
        }
        else
        {

           //nome da imagem
            $path_parts = pathinfo($source_image);
            $filename = $path_parts["filename"];

            //calcula as proporções
            $aspect_ratio = (float) $width_orig / $height_orig;

            //calcula a largura da thumb baseada na altura
            $thumb_width = round($thumb_height * $aspect_ratio);
 
            //detecta o tipo de arquivo
            $source = imagecreatefromstring(file_get_contents($source_image));

            //cria canvas
            $thumb = imagecreatetruecolor($thumb_width, $thumb_height);

            imagecopyresampled($thumb, $source, 0, 0, 0, 0, $thumb_width, $thumb_height, $width_orig, $height_orig);
           //destrói, para liberar memória
            imagedestroy($source);
 
            //cria thumb baseada no tipo da imagem
            switch ( $image_type )
            {
                case 1:
                    imagegif($im, $fileName);
                    $thumbnail = $thumb_prefix.$filename . ".gif";
                    break;

                case 2:
                    $thumbnail = $thumb_prefix.$filename . ".jpg";
                    imagejpeg($thumb, $thumbnail, $quality);
                    break;

                case 3:
                    imagepng($im, $fileName);
                    $thumbnail = $thumb_prefix.$filename . ".png";
                    break;

                case 7:
                    imagewbmp($im, $fileName);
                    $thumbnail = $thumb_prefix.$filename . ".bmp";
                    break;
            }
        }
    }
?>

Uma verdadeira mão na roda!

O que é possível fazer com a API do Analytics?

Com a API significa que você pode ter acesso a TODOS os dados disponíveis no Analytics de um aplicativo terceirizado ou desenvolvido por você, ou em sites de terceiros. Para o meu caso pensei em duas aplicações.

1. Exibir relatórios para os clientes em interface própria

Atualmente eu trabalho com aplicativos web e com CMS próprio (GS Intra), porém nunca desenvolvi um sistema de estatísticas para ele por dois motivos principais relacionadas ao Analytics:

• Gratuito
• Não utiliza recursos do meu servidor
• Superioridade técnica ao que eu poderia desenvoler

Com o uso da API será possível que eu centralize em um só aplicativo o gerenciamento do conteúdo, dos clientes e estatísticas do site de meus clientes. Não preciso mandar o cliente para um site externo para que ele visualize as estatísticas. Facilita para o cliente, é obviamente é melhor para o desenvolvedor, que agrega mais funcionalidade e valor ao sistema.

2. Acompanhar impacto de mudanças no site

Eu tenho sérios problemas para acompanhar o impacto das alterações realizadas no And After. Por exemplo, adiciono um elemento de navegação visando aumentar o tempo médio de visita dentro do site no dia 27 de abril.

Preciso de um log, onde eu adicione nesta data todas as alterações feitas para que posteriormente eu colete informações do "antes e depois". Utilizei por algum tempo o Excel para fazer isso, mas era praticamente no CTRL+C e CTRL+V para mesclar dados do Buscapé, AdSense e Analytics em uma mesma tabela, além das datas das modificações.

Agora é possível eu tem um banco de dados com todas as alterações realizadas em no site (como o exemplo do elemento de navegação) e mesclar com os dados que serão importados da API, facilitando a criação do "antes e depois" das alterações de forma automática. 

Quando (e se) a API do AdSense for liberada então, ficará show. Em um único aplicativo será possível medir o impacto de mudanças nas visitas e rendimentos de um site. 

Ta aí a dica para um aplicativo que eu utilizaria. haha :)

Saiba mais sobre a API do Analytics em

Blog oficial do Google Analytics

Google Code Analytics

Javascript

Java

O que já existe desenvolvido?

Polaris

Até o momento testei um aplicativo desktop, o Polaris. Ele utiliza a plataforma (plataforma?) Adobe Air, e a versão free é extremamente simples de usar.

Apresenta diversas informações em uma pequena janela com uma interface bastante intuitiva. 

Confira algumas telas do Polaris , o  analytics desktop:

Recomendo! 

Mobile

Não testei, mas no blog oficial do Analytics recomendaram uma aplicação Android do Analytics.

Assim que eu fizer testes com a ferramenta publicarei os resultados e programações aqui no O desenvolvedor, se você já desenvolveu alguma coisa ou quer compartilhas suas idéias pode publicar um artigo ou comentar. :)

Por padrão ela já vem instalada desde a versão 4.3 do PHP, e com ela é possível desde criar imagens do 0, escrevendo textos, usando filtros de opacidade, até criar miniaturas de outras imagens ou, ainda mesclar as mesmas, criando mosaicos e afins, com saídas em formato jpg, png, e por aí vai. As possibilidades são infinitas, e ficam a disposição e necessidade de quem for implementar.

Abaixo segue o exemplo clássico de uso mais simples da biblioteca: criar uma imagem com largura e altura definida, com um texto no miolo dela.

<?php

function createImageWithText($width, $height, $txt) {

       //cria uma imagem com largura x altura definida pelo usuário
        $im = imagecreatetruecolor($width, $height);
        //aloca as cores para imagem
        $text_color = imagecolorallocate($im, 233, 14, 91);
        //escreve o texto na imagem
        imagestring($im, 1, 5, 5,  $txt, $text_color);
       
        //inicia buffer
        ob_start();
        // cria imagem de saída, formato jpeg, bom 85% de qualidade
        imagejpeg($im, NULL, 85);
        //captura saída para string
        $contents = ob_get_contents();
        //finaliza captura
        ob_end_clean();
        //libera memória
        imagedestroy($im);
        //escreve arquivo em disco, usando os comando básicos do PHP
        $fh = fopen("temp/img2.jpg", "w+" );
            fwrite( $fh, $contents );
        fclose( $fh );

   
    }

   createImageWithText(400, 200, "meu texto");

?>

Em breve farei outros posts a respeito!

Com ele você pode parar o fluxo que está acontecendo exibindo uma caixa de diálogo - na qual a mensagem exibida é passada como parâmetro para esse comando - na qual o usuário tem a opção de escolher entre Sim e Não (ou Ok e Cancelar, dependendo do browser). Quando o usuário faz a seleção, o comando retorna true ou false, o que possibilita que o fluxo seja alterado.

Um exemplo de uso:

if(confirm("Deseja realmente fazer isso?")) {
  //faz algo, como chamar uma função que apaga dados
} else {
  alert("Ok, você não quer mesmo fazer isso...");
}

Simples e prático!

Com poucos arquivos a distribuição acontece tranquilamente, os arquivos são movidos para a pasta de cada usuário, cada usuário recebe uma notificação por e-mail com o link para a área de login do sistema com acesso aos arquivos. Porém todo o servidor tem um limite para execução de scripts e muitas vezes simplesmente aumentar esse limite de tempo de execução não é recomendável, pois se alguma coisa der errado (como um loop infinito) vai ficar sobrecarregndo o servidor.

Isso sim é organizar os documentos em pastas

Começaram a acontecer problemas quando existiam muitos arquivos para mover, pois além da listagem de todos os arquivos o sistema segue uma lógica para identificar de qual usuário é cada arquivo para que a distribução seja feita de forma correta.

A solução para não retornar o erro de limite de tempo excedido e não aumentar loucamente este limite (o usuário certamente vai achar que deu erro quando uma página demorar demais para carregar) foi limitar o número de arquivos movimentados por vez, isso permite dar um feedback entre a "paginação" evitando que o usuário pense que o aplicativo travou ou deu erro e clique repetidamente em botões da interface. Eles gostam disso.

Segue uma parte da solução que adotei.

Como contar quantos arquivos tem em uma pasta utilizando o FSO?

Quando procurei informações de como contar quantos arquivos existiam em uma pasta a maioria envolvia um loop por todos os arquivos, e isso me lembrou minha experiência com POG: Não programe isso!

Twittei para ver se alguém conhecia uma solução melhor do que um loop, @chrisloki, @cleiverrr e @alinedecampos responderam com idéias/sugestões, não achei nenhuma documentação completa do FSO (ok, só dei uma googleada básica) mas resolvi testar algumas coisas como UBound (para pegar o índica mais alto de uma array) e depois um count.

O UBound não funciona, o array de arquivos não pode ser tratado como um normal, mas existe o comando COUNT no FSO, segue abaixo o script para contar quantos arquivos existem em uma pasta:

dirtowalk = "../web_users/gssolutions/arquivos/"

Set fs = CreateObject("Scripting.FileSystemObject")

Set f = fs.GetFolder(server.mappath(dirtowalk))

Set fc = f.Files

total = fc.count

response.write "Total de arquivos na pasta " & dirtowalk & ": " & total

É isso aí, um simples .count no "array" de arquivos retorna o número de arquivos dentro da pasta. Caso existam subpastas, você teria que criar um loop para ir navegando e somando os arquivos dentro de cada subpasta...

Mais funcional e elegante do que um "For Each arquivo In fc"!

Obrigado a todos os que ajudaram e responderam meus pedidos de socorro no twitter, espero ter ajdado também! :)

Um caso que acontece muito pode ser simulado nesse exemplo que segue: um formulário com dois campos e uma rotina que executa a soma dos valores dos dois campos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemplo de soma</title>
<script type="application/javascript">
    window.onload = function() {
        document.getElementById("calcular").onclick = function() {
            var val1 = document.getElementById("campo1").value;
            var val2 = document.getElementById("campo2").value;
            alert(val1 + val2);
        }
    }
</script>
</head>
<body>
<h1>Soma - exemplo</h1>
<form action="#" method="post">
    <label for="campo1">campo 1:</label><input type="text" id="campo1" />
    <label for="campo1">campo 2:</label><input type="text" id="campo2" />
    <input type="button" id="calcular" value="calcular" />
</form>
</body>
</html>

Faça um teste preenchendo os inputs com valores numéricos, e clique no botão de calcular. Se você preencher com, por exemplo, 5 e 3, ao clicar no botão terá um alert() com o valor 53.
O que aconteceu? O interpretador do javascript entende que são strings (textos), e a soma que ele faz é, na verdade, uma concatenação das strings.

Como resolver isso?

Existe um comando nativo do javascript, eval(param), que recebe um parâmetro e o interpreta. Mude a linha que faz a soma para

alert(eval(val1) + eval(val2));

E você verá que a soma, que antes era uma concatenação, vai ser feita da forma esperada: somando realmente os valores.

Mas, fica o alerta: usar o comando eval() deve sempre ser muito bem analisado se vale a pena. Uma vez que ele interpreta qualquer comando que está em uma string, você acaba abrindo o seu código para ser executado por terceiros.

Num próximo post mostro como fazer essa soma de uma forma mais elegante!

Muito bem, voltando ao assunto vou explicar o contexto do meu problema, eu tinha um link que era impresso em Javascript, e precisava adicionar o atributo onClick nele, que ficaria no resultado final assim:

onClick="funcao(´var1´,´var2´)"

Mas no Javascript, se eu fosse usar um document.write ou qualquer outro método de alguma biblioteca (jQuery, no meu caso) quando eu utilizasse a aspa simples automaticamente estaria fechando a string (não sei se string é o correto para o que eu quero definir, sorry) do Javascript, ou seja, estaria "cortando" a minha linha que seria exibida no código pela metade.

Uma pesquisa rápida em fóruns e encontrei a solução: você precisa utilizar uma barra invertida (lembrouexpressões regulares, utiliza a barra para transformar o próximo caracter em "normal"), então ficaria assim no Javascript:

document.write("onClick="funcao(´var1´,´var2´)" ")

Antes das duas aspas VERMELHAS você deve inserir uma barra invertida, não consegui exibir ela aqui pois o sistema de publicação "engole" as barras (depois irei verificar).

Utilizei o document.write apenas como exemplo da possibilidade de uso, no meu caso utilizei as barras invertidas em um $("#link123").html("onClick....") sem problema nenhum.

Uma dica simples que para quem trabalha com Javascript não deve ser novidade, mas lembro de ter tido problemas com isso em um passado distante, como tive o mesmo problema agora resolvi fazer o post para ajudar quem pode precisar (e evitar ter que googlear novamente este mesmo problema).

Dúvidas, dicas e críticas nos comentários :)

Nunca me atrevi a abrir um .fla na minha vida; pelo pouco que conheci do Flash na épcoa do action script 1 e 2, achei que era muito confuso para o resultado final, e que o AS1 e 2 eram voltados a designers (nada contra) que precisavam de poucos recursos nos seus swfs. Por isso que quando saiu o action script 3 eu já fiquei mais animado, pois ele estava muito melhor estruturado, com pacotes de componentes melhor divididos, boa orientação a objetos (e seus paradigmas), documentação online

Quem já trabalhou com qualquer linguagem orientada a eventos (VB, Delphi, C++ Builder) se sente muito confortável, e quem está acostumado a OO só tem o trabalho de descobrir as features do framework. A SDK pode ser baixada livremente.
A Adobe comercializa o Adobe Flex Builder, que permite uma maior facilidade na implementação das interfaces.

Eu não baixei pois queria trabalhar direto no mxml, que é o formato (uma espécie de xml) concebido para os arquivos onde são escritos os códigos de um projeto Flex.

Basicamente, os passos para um Hello World - algo simples - são, além de ter a SDK do Flex na sua máquina, criar o .mxml e compilar o mesmo, para gerar o swf.

O mxml ficou da seguinte forma (pode fazer download aqui):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:explorer="*"
    width="100%" height="100%" pageTitle="Hello World">
   
    <mx:HDividedBox width="100%" height="100%">
        <mx:Text>
            <mx:text>Olá Mundo!</mx:text>
        </mx:Text>
    </mx:HDividedBox>
   
</mx:Application>

Application é o nó pai do documento, seria como no html a tag <html>. Nele, digo que o swf gerado terá largura e altura de 100%.

Então insiro um objeto HDividedBox, que insere uma divisão horizontal nela, e dentro dela uma área de texto (Text).

Com isso, é só salvar (salvei como hello.mxml) e compilar o mesmo, com o comando

../bin/mxmlc -use-network=false hello.mxml

*aponte ../bin para a pasta bin que fica dentro da SDK do Flex da sua máquina.

O swf gerado foi esse aqui

O que achei do Flex? A vantagem é a facilidade na componentização de elementos da interface, com uma qualidade gráfica que CSS/javascript não alcançam com facilidade.

http://br.php.net/manual/en/book.pdo.php

Eu já havia “programado” em PHP, na verdade tudo o que eu tinha feito foi um CMS bem meia boca para um blog, com um sistema de comentários. Nunca gostei do blogger e na época não conhecia o Wordpress (ele existia em 2002?).

E eu aprendi errado. Aprendi a programar com um designer, não com um desenvolvedor “de verdade”. Faltava conhecimento técnico para quem me ensinou e eu mal tinha noção da vida, quem dirá de se preocupar com fazer um script correto. Funcionou? Beleza, deixa. Essa é a ética POG.

Hey, antes de ler saiba que...

Esse texto é FOR DUMMIES. Ou um bom exemplo de piada para desenvolvedores mais experientes. É um pouco da minha experiência desde que comecei a programar. Apresento aqui um caso de script BIZARRO, e comento sobre os problemas dele e suas gambiarra.

Se você é ninja pode achar um desperdício do seu precioso tempo continuar a leitura, então recomendo que você vá para a Home e procure algo do seu nível.

Ou continue a leitura e se mije de rir.

Boas soluções lógicas porém debilidade técnica, eis é a fórmula da gambiarra.

Ontem, quando comecei a desenvolver o novo blog do And After (antecipo que o novo blog será sobre Arquitetura de Informação, com uma galerinha que manja muito! :D ) fui dar uma olhada em uns script antigos, desenvolvidos na época do meu estágio, e isso me levou a escrever este artigo.

Ah, e antes que me acusem: eu defendo o estágio, e aprendi muito quando o fiz.

Leia outros artigos sobre estágio:

Estágio é só exploração?

Na vida de um estagiário... (vídeo)

Encontrei uma SUPER GAMBIARRA em um script de paginação (ASP) que era utilizado na empresa que eu trabalhava. Vou repetir: SUPER GAMBIARRA. POG de mestre em POG.

Isso é uma gambiarra.

Vamos lá, como NÃO fazer um script de paginação:

A primeira coisa que precisamos para fazer uma paginação é saber o total de dados e quantos dados vamos exibir em cada página, correto? E já neste início está a gambiarra que eu quero apresentar, para quem está começando jamais utilizar.

Não faça isso também.

Primeiro, cria-se uma consulta no banco para pegar todos os dados, aí está o primeiro problema. Uma consulta extensa e inútil.

set rs = conntemp.execute("SELECT * FROM imoveis WHERE aprovado = 1 ORDER BY data desc")

Agora vamos ver qual o total dos resultados, par saber quantas páginas iremos criar, veja só o que não fazer.

max= 10
total = 0

do while not rs.eof
                total = total + 1
                rs.movenext
loop

Na época mesmo sem entender NADA eu pensei: tem que ter um comando para contar as linhas de uma consulta. E óbvio, isso existe.

Bom, vou pular a parte normal do código e partir para a próxima gambiarra. Vou chamar essa consulta de todos os dados de super consulta. Nunca use uma super consulta. É desnecessário. Se estava na página 1, o script era o seguinte para exibir os dados:

For x = 1 to max

Response.write rs(“dados”)
rs.movenext

next

Onde max é a variável que define o número de itens exibido por página. Achou ridículo? Calma, tem mais.

Se o usuário vai para a página 3, já imaginou como é feito? Isso mesmo, a consulta com todos os resultados continua e calcula se quantos movenext serão necessários para chegar na linha desejada. Veja como fica esta obra de arte POG:

for z = 1 to pagina

                for dado = 1 to max

                               if not rs.eof then

                               rs.movenext

                               end if

                next

next

O que esta gambiarra faz? Se você está na página 3, o script por três vezes repete o comando movenext por 10 vezes (a variável max). Depois disso, repete-se o loop do max, para exibir os itens.

Se você não entendeu porque isso é prejudicial (você é noob), vamos lá, vou falar um pouco de otimização.

Explicando os problemas

Problema #1 – A super consulta

Não precisa ser nenhum gênio para pelo menos imaginar que diversas consultas no banco de dados prejudicam o desempenho de um script. A super consulta pode ter como resultado 9 linhas como 999.234.765 linhas. E você vai usar apenas 10 destas linhas.

Outra coisa muito comum (para quem desenvolve aplicações pequenas e não tem conhecimento técnico) é utilizar o SELECT * FROM. Exemplo, você faz a pesquisa que resulta em 9 colunas por linha. E você precisa apenas de duas, nome e ID.

Solução #1

Retorne os resultados com apenas com os dados que precisa, utilize o comando LIMIT sempre!

Se você vai utilizar somente os 10 primeiros resultados e quer apenas o a coluna ID e o NOME utilize a seguinte consulta:

SELECT id,nome FROM tabela LIMIT 10

Problema #2 – A contagem das linhas

Ficar percorrendo todas as linhas de uma consulta e criar um contato estilo  x = x+1 definitivamente não é uma boa opção. Na verdade não deveria nem ser considerado uma opção.

Solução #2

Como contar as linhas sem utilizer a SUPER CONSULTA? Simples, pequeno gafanhoto.

Utilize o comando COUNT, veja o exemplo abaixo.

SELECT count(ID) as total FROM tabela

Fazendo isso você utiliza o total como umas coluna da tabela, por exemplo:

total = rs(“total”)

Problema #3 – Chegar na linha desejada

Tudo bem, você conseguiu fazer a consulta e pegar o valor total, se a página for a 1 você utiliza o LIMIT, mas quando a página for maior que 1 não tem jeito, você vai utilizar a SUPER CONSULTA e contar os movenext, certo?

NOT!

Nada de SUPER CONSULTA, jamais nesta vida.

Solução #3

Para chegar na linha desejada utilizaremos novamente o comando LIMIT, suponto que você está na página 3 e o máximo de itens exibidos por página é 10. Você precisa pegar da linha 21 até a 30. Sua consulta:

SELECT id,nome FROM tabela LIMIT 21,30

Simples assim, o LIMIT pode não somente limitar o número de resultados, utilizando o formato acima ele seleciona exatamente quais linhas serão resultados da consulta.

Conclusão

Jamais confiem em um designer programando server-side.

Brincadeira! :)

Sou formado em design e está fazendo 5 anos que programo em ASP (clássico). Sim, ASP clássico, eu sei, estou OLD e já passou da hora de me atualizar.

Mas meus códigos de hoje são limpos, são orientados não por uma pessoa, mas por fóruns, blogs e muitas Googleadas. Este ano comecei a estudar .NET (estou começando, na verdade :)), li artigos e um livro de SCRUM, testei scrum solo. Acompanho blogs de desenvolvimento, ano passado comecei a estudar mais a fundo javascript (e jQuery). Ah, fiz um pequeno framework para desenvolver as intranets de meus clientes, está funcionando bem, de forma modular, permitindo diferentes configurações. Além do aprendizado (javascript, ASP, SQL) depois um BOM tempo com o aprendizado comecei a utilizá-la para meus clientes, o retorno financeiro começou no final do ano passado.

O que eu quero dizer é: estude. Estude muito.

Duvidem do código que estão vendo. Duvidem da primeira solução que encontrar.

Se tiverem oportunidade participem de um projeto de porte médio ou grande, ou façam um teste de carga em seus scripts. Gambiarra só “funciona bem” em aplicações pequenas, pois guando o bicho pega vai tudo pro pau.

Estude.

Leia metodologias, baixe scripts, teste soluções novas para problemas antigos.

Aprenda a economizar consultas ao banco de dados.

Aprenda a utilizar cache. Invente um modelo de cache. Mas não gambiarras.

Estudem.

E claro, assinem o FEED do O Desenvolvedor, pois o Chris Benseler manda muito bem. E ele não é um designer metido a programador como eu. :)

Atenção 2

Jamais utilize os códigos que estão em VERMELHO neste artigo. Se você fizer isso provavelmente você perderá o emprego. A honra. E sua conta naquele fórum bacana de desenvolvimento que você participa.

Resolvi usar essa função do Daniel para adicionar um método de truncar ao objeto String do javascript. Com isso, ao invés de chamar a função passando o texto e o limite de caracteres, é só chamar o método passando o limite:

minhaString.truncar(limite);

Vamos à implementação, já com o exemplo de uso:

<html>
<head>
    <title>Truncar - javascript</title>
    <script type="text/javascript">
        /*
        adaptação da função truncar() feita pelo Danilo do Tidbits,
        adicionando-a a classe String
        Função original: http://www.tidbits.com.br/truncar-texto-em-javascript-abreviar-sem-cortar-palavras
        */
        String.prototype.truncar = function(limite){
            if(!limite)
                throw "Limite não informado";
            if(this.toString().length>limite){
                limite--;
                last = texto.substr(limite-1,1);
                while(last!=" " && limite > 0){
                    limite--;
                    last = texto.substr(limite-1,1);
                }
                last = texto.substr(limite-2,1);
                if(last == "," || last == ";"  || last == ":"){
                     texto = texto.substr(0,limite-2) + "...";
                } else if(last == "." || last == "?" || last == "!"){
                     texto = texto.substr(0,limite-1);
                } else {
                     texto = texto.substr(0,limite-1) + "...";
                }
            }
            return texto;
        }

        var texto = "Meu texto";
        alert(texto.truncar(5));

    </script>
<body>
   
</body>
</head>
</html>

O mesmo pode ser visto funcionando aqui!

No caso, utilizei o framework script.aculo.us para criar o slider - mas a lógica vale para qualquer outra biblioteca javascript.

Vamos num passo-a-passo

Inseri no html uma imagem:

<img src="img2.png" alt="imagem" id="zoomImg" />

Depois de ter o script.aculo.us, é feito o include dele e da prototype (ela é usada pela engine do script.aculo.us)

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

No html, deve ser criada uma div com outra dentro. A pai será a área por onde o slider poderá correr, e a filha, o slider propriamente deito:

<div id="square_slider" class="slider">
    <div id="square_slider_handle"></div>
</div>

No CSS, formato o layout das mesmas, imaginando que será um slider vertical:

<style type="text/css">
        div.slider { width:10px; margin:10px 0; background-color:#ccc; height:100px; position: absolute; top:20px; left:20px; z-index:10000000000;}
        div.slider div { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }
</style>

O próximo passo é criar o comportamento do slider. Isso é feito usando a classe Control (implementada pelo script.aculo.us), que possui um método Slider o qual cria o comportamento do slider. A documentação é bem complexa, por isso vou me ater a essa implementação.
Nesse caso, crio uma área de slider (div id="square_slider") cujo slider é controlado pelo elemento div id="square_slider_handle".
Para esse slider, passo as seguintes parametrizações:

• range: valor mínimo e máximo da área de slide
• slidervalues: valor mínimo e máximo em que o slider pode percorrer
• axis: direção do slider
• onChange: função que é chamada quando o usuário acaba de fazer o slide

No caso, digo que é um slider que varia de valores entre 20 e 100, com os mesmos valores máximos, vertical. A função no onChange é onde faço o cálculo. Essa função recebe como parâmetro o valor onde o slide foi solto. Com isso, calculo uma relação (ratio) entre o valor do slide e um valor base (no caso, 600, que é a largura da imagem).

var square_slider = new Control.Slider("square_slider_handle", "square_slider", {
             range: $R(20, 100),
             values: $R(20, 100),
             sliderValue: [100],
             axis: "vertical",
             onChange: function(value) {
                 //divide o valor por 100 para achar a taxa de zoom
                 var ratio = value/100;
                 /*
                 multiplica a largura da imagem pelo inverso do ratio
                 Observação: o valor de width é a base usada para cálculo; no exemplo, é o tamanho original da imagem                   
                 */
                 var width = 600;
                 $("zoomImg").setStyle({width: Math.round(width/ratio) + "px"});
             }
         });

Você pode fazer download do pacote completo, funcional :)

Abaixo, segue o html inteiro da página, para visualização

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Slider</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
    <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    <style type="text/css">
        div.slider { width:10px; margin:10px 0; background-color:#ccc; height:100px; position: absolute; top:20px; left:20px; z-index:10000000000;}
        div.slider div { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }
    </style>
    <script type="text/javascript">
        window.onload = function() {
   
            var square_slider = new Control.Slider("square_slider_handle", "square_slider", {
                range: $R(20, 100),
                values: $R(20, 100),
                sliderValue: [100],
                axis: "vertical",
                onChange: function(value) {
                    //divide o valor por 100 para achar a taxa de zoom
                    var ratio = value/100;
                    /*
                    multiplica a largura da imagem pelo inverso do ratio
                    Observação: o valor de width é a base usada para cálculo; no exemplo, é o tamanho original da imagem                   
                    */
                    var width = 600;
                    $("zoomImg").setStyle({width: Math.round(width/ratio) + "px"});
                }
            });
        }
    </script>
</head>
<body>

<div id="square_slider" class="slider">
    <div id="square_slider_handle"></div>
</div>
<img src="img2.png" alt="imagem" id="zoomImg" />
</body>
</html>

As idéias foram crescendo, Um dos projetos está sendo desenvolvido em um subdomínio, mas por padrões de segurança um cookie só pode ser lido pelo domínio que o criou, então os cookies ficam inacessíveis para os subdomínios.

Se você não sabe NADA sobre cookies recomendo as leituras:

Como criar e ler cookies em ASP

Classe para gravar e ler cookies - por javascript

Para permitir que todos os subdomínios consigam ler o cookie precisamos apenas adiconar a propriedade domain na hora de criar o cookie.

 Por exemplo, tenho um cookie chamado odesenvolvedor que foi criado pelo domínio andafter.org e quero permitir que o subdomínio testes.andafter.org consiga ler este cookie, quando eu gerar o cookie adiciono a seguinte linha:

Response.Cookies("odesenvolvedor").domain = "andafter.org"

Neste cado o atributo domain permite que todos os subdomínios de andafter.org tenham acesso ao domínio.

"That"s the way the cookie crumbles"*

"E é assim que o biscoito é repartido"*

Simples e fácil, agora posso dominar o mundo utilizando diversos subdomínios!

Espero que isso tenha ajudado, sugestões, dúvidas e críticas nos comentários :)

Para quem não lembra no filme Todo Poderoso, esta é a "assinatura" do âncora que se torna deus, interpretado por Jim Carrey. Via Wikiquote

/* função recebe dois parâmetros: o objeto e a lista de métodos que serão adicionados a ele */
    function addMethods(myObject, methods) {
       //percorre a lista de métodos
       for (var property in methods) {
           //adiciona o método ao objeto, dinamicamente
           myObject.prototype[property] = methods[property];
      }
}

Para facilitar, segue um código completo onde no onload da página adiciono ao objeto String (nativo do javascript) duas funções e uma variável:

<html>
<head>
    <title>Adicionar metodos</title>
    <script type="text/javascript">
    /* função recebe dois parâmetros: o objeto e a lista de métodos que serão adicionados a ele */
    function addMethods(myObject, methods) {
        //percorre a lista de métodos
        for (var property in methods) {
            //adiciona o método ao objeto, dinamicamente
            myObject.prototype[property] = methods[property];
        }
    }
    window.onload = function() {
        addMethods(String, {
            func1: function() {alert("Sou a funcao 1");},
            func2: function() {alert("Sou a funcao 2");},
            const1: 2
        });
        var myString = new String();
        myString.func1();
        alert(myString.const1);
    }
    </script>
   
</head>
<body>
  
</body>
</html>

Como resolvi utilizar este como único servidor de e-mails, tive que fazer alterações nos scripts de envio de e-mail, newsletter, contato, etc. dos sites dos clientes, como demorei um pouco para descobrir porque não estava funcionando acho que este pode ajudar quem está com o mesmo problema.

Enviando e-mail em ASP utilizando o Google Apps

Muito bem, é um script simples mas que me tomou algum tempo pois eu havia esquecido de habilitar o SSL. Não esqueça de usar um e-mail do seu domínio como remetente, criar a conta de e-mail (cerifique logando no webmail) e habilitar o uso de SMTP pelo painel do Google Apps.

Feito isso, é só utilizar o código abaixo alterando apenas as configurações para sua conta.

 
Dim objCDOSYSMail

Dim objCDOSYSCon
Set objCDOSYSMail = Server.CreateObject("CDO.Message")
 
Set objCDOSYSCon = Server.CreateObject ("CDO.Configuration")
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver") = "smtp.gmail.com"
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 25
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2

"Aqui estava o meu problema: SSL tem que ser TRUE!
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = True

"o e-mail completo que você utiliza no google apps (não esqueça de habilitar SMTP no painel fo Google apps!
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername") = "eu@andafter.org"
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword") = "senha"
objCDOSYSCon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 30
 
objCDOSYSCon.Fields.update 
Set objCDOSYSMail.Configuration = objCDOSYSCon
 
objCDOSYSMail.From = "Newsletter And After
objCDOSYSMail.To = "Nome <email@andafter.org>"
objCDOSYSMail.Subject = "And After - Newsletter Junho"
objCDOSYSMail.HtmlBody = email
objCDOSYSMail.Send

Set objCDOSYSMail = Nothing 
Set objCDOSYSCon = Nothing 

Limite de envios

O Google libera o envio de apenas 500 e-mails por conta para evitar o uso indevido do Google Apps, por isso você pode utilizar duas ou mais contas se for necessário o envio de Newsletter assim. Por exemplo, crie as contas:

• news1@andafter.org 
• news2@andafter.org 
• news3@andafter.org 
• news4@andafter.org 

Assim você pode realizar o disparo de 2.000 mensagens a cada 24h, configurando cada grupo de usuário para ser atendido por uma conta de e-mail. :)

Espero que ajude, para o envio em PHP também é necessário habilitar o SSL (óbvio...) mas não vou me arriscar no código, se alguém quiser compartilhar publique-o no And After :)

O uso é simples:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Listando arquivos</title>
</head>
<body>
<ul>
<?php
    //define o caminho do diretório
    $dir = "/Applications/MAMP/htdocs/exemplos/files/";
    //listar arquivos
    $files = glob($dir."/*") or die("Erro ao acessar " . $dir);
    //permorre a lista
    foreach($files as $file) {
        if (!is_dir($file)){
?>
    <li><a href="<?php echo $file;?>" title="<?php echo $file;?>"><?php echo $file;?></a></li>
<?php
        }
    }
?>
</ul>
</body>
</html>

Então, o código é:

 <?php
    global $wpdb;
   $spamComments = $wpdb->get_results("SELECT * FROM " . $wpdb->comments . " WHERE  comment_approved="spam"");
   echo sizeof($spamComments);
?>

 No caso, eu poderia ter usado o COUNT do SQL - seria mais performático, inclusive - mas retirei esse código de uma implementação que fiz onde eu precisava da lista de comentários futuramente...

Mas uma pesquisada no Google me fez deparar com um atributo desconhecido por mim até hoje (mesmo depois de mais de 5 anos trabalhando com interfaces para web), não reconhecido pela W3C mas suportado por vários browsers (testei no Firefox do Ubuntu, MacOS X e Windows Vista e XP), Safari, IE 6 e 7: contenteditable

Elementos do (x)html podem ser editáveis com a propriedade contenteditable="true"
Faça um teste em qualquer html seu, colocando assim:

<div contenteditable="true">texto editável</div>

Você verá quea área é cliçavel, e um cursor aparece quando você clica. E pode editar!

Como disse, não é válidado pelo W3C, mas todos os browsers usam... muito útil para um CMS ou qualquer outro onde o usuário possa editar textos!

Abaixo, segue um exemplo de como habilitar/desabilitar uma div para edição. A partir daí, muita coisa pode ser feita :)

<html>
<head>
<title>Exemplo de uso - contenteditable</title>
<script type="text/javascript">
    function toggleEditArea() {
        var field = document.getElementById("edit_area");
        if(!field.getAttribute("contenteditable") || field.getAttribute("contenteditable")=="false")
            field.setAttribute("contenteditable", "true");
        else
            field.setAttribute("contenteditable", "false");
    }
</script>
</head>
<body>
<div id="edit_area">sadsadsadsadas</div>
<a href="?edit" onclick="toggleEditArea(); return false;">habalitar/desabilitar</a>
</body>
</html>

E, não, não quero reinventar a roda! Serve mesmo para estudos ou no caso em que não é possível adotar um framework - sim, de vez em quando precisamos implementar algo só com funções nativas do javascript por requisitos do sistema...

Primeiro, criei uma função javascript chamada MyAjaxLoader(). Nela, instancio um objeto que fará as nossas consultas, de uma forma crossbrowser. Esse código, que verifica se existe o ActiveX (browsers IE) ou não, já foi muito explorado em diversos blogs. Indico essa leitura.
O próximo passo é criar uma função load() e adicioná-la a função MyAjadLoader() com a propriedade prototype (não confundir isso com a biblioteca homônima). Essa técnica permite criarmos funções com funções dentro, o que de uma certa forma pode ser abstraído para uma classe.
Essa função recebe dois parâmetros: a url que será requisitada e uma lista de chaves/valor de opções. Nessa lista de chaves/valor estou tratando apenas duas chaves: params, que podem ser os parâmetros a serem passados para a url e onSuccess, a função que será chamada em caso de sucesso na requisição (veja aqui texto sobre como passar funções de callback)

Abaixo, segue um exemplo funcional da classe!

<html>
<head>
<title>Criando sua própria classe para requisição assíncrona (ajax)</title>
<script type="text/javascript">

/**
* classe para requisições assíncronas - código nativo
*/
function MyAjaxLoader() {

    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
        }
    }

    if  (!xmlhttp && typeof  XMLHttpRequest != "undefined" ) {
        try  {
        xmlhttp = new  XMLHttpRequest();
        } catch  (e) {
        xmlhttp = false ;
        }
    }
    this.xmlhttp = xmlhttp;

}

/**
* método que recebe a url a ser requisitada e pode receber parâmetros adicionais:
* params: parâmetros da url
* onSuccess: função de callback
*/
MyAjaxLoader.prototype.load = function(url, p) {
    //verifica se tem no parâmetro uma chave igual a params; se tiver, concatena com a url
    if(p.params)
        var myUrl = url + "?" + p.params;
    else
        var myUrl = url;
    //abre a conexão
    xmlhttp.open("get", myUrl);
    //faz a requisição
    xmlhttp.send(null);
    var thisMMP = this;
    //verifica os estados de transição
    xmlhttp.onreadystatechange = function() {
            //4 é o final da requisição
            if(xmlhttp.readyState==4) {
                //erro 404: não existe a url ou houve erro ao requisitar
                if(xmlhttp.status==404) {
                    alert("Erro: url não encontrada");
                    return;
                }
                //verifica se tem no parâmetro uma chave igual a onSuccess; se tiver, chama a
                //função de callback passando o resultado da requisição
                if(p.onSuccess)
                    p.onSuccess.call(this, xmlhttp.responseText);   
        }
    }
}


var myAjax = new MyAjaxLoader();
myAjax.load("tmp.htm", {params: "id=1&method=x", onSuccess: functionOk});

/* função de callback */
function functionOk(data) {
    alert(data);
}

</script>
</head>
<body>
</body>
</html>

Download da classe aqui!

Primeiramente, criei duas classes, que abstraem esses dados em forma de objetos. Uma classe é a BlogBlogsBlog, um bean para a entidade blog, e outra a BlogBlogsUser, que por sua vez é um bean para o usuário do sistema. Cada classe recebe no construtor os atributos.

/**
* Dados do usuário do BlogBlogs
*/
class BlogBlogsUser {
    function __construct($username, $firstname, $lastname, $fullname, $thumbnailpicture, $profilepage, $blogs, $favorites, $fans) {
        $this->userName = $username;
        $this->firstName = $firstname;
        $this->lastName = $lastname;
        $this->fullName = $fullname;
        $this->thumbnailPicutre = $thumbnailpicture;
        $this->profilePage = $profilepage;
        $this->blogsCount = $blogs;
        $this->favoritesCount = $favorites;
        $this->fansCount = $fans;
        $this->blogs = array();
    }
   
}

/**
* Dados de um blog do BlogBlogs
*/
class BlogBlogsBlog {
    function __construct($name, $url, $rssurl, $blogpage, $lastupdate, $inboundblogs, $inboundlinks, $rank, $lang) {
        $this->name = $name;
        $this->url = $url;
        $this->rssUrl = $rssurl;
        $this->blogPage = $blogpage;
        $this->lastUpdate = $lastupdate;
        $this->inboundBlogs = $inboundblogs;
        $this->inboundLinks = $inboundlinks;
        $this->rank = $rank;
        $this->lang = $lang;
    }
}

Com isso, podia continuar a implementação. Criei a classe BlogBlogsService. Guardei no atributo apiUrl a url da API, e no construtor da classe recebo o valor da chave da API do BlogBlogs (semelhante ao processo de se usar a API do Google Maps, por exemplo).
Então criei alguns métodos, e os que são úteis para o desenvolvedor:

• setUserName(): seta o username do usuário pelo qual faremos a busca no sistema do BlogBlogs. O método automaticamente busca todos os blogs e os dados do perfil do usuário
• getBlogByUrl(): faz a busca por um blog através da sua url

Assim, temos implementadas todas as buscas possíveis pela API.

class BlogBlogsService {
    private $apiUrl = "http://api.blogblogs.com.br/api/rest/";
    private $userKey;
    private $doc;
   
    /**
    * construtor: recebe a chave da API do BlogBlogs
    * para gerar, acesse http://blogblogs.com.br/dev/chave
    */
    function __construct($k) {
            $this->userKey = $k;
            $this->user = null;
    }
   
    /**
    * recebe o userName no blogblogs e faz a consulta
    */
    function setUserName($userName) {
        $path = $this->apiUrl . "userinfo?key=" . $this->userKey . "&username=" . $userName;
        $this->doc = new DOMDocument();
        $this->doc->load($path);
        //verifica erros: caso tenha um nó com namespace error
        if($this->doc->getElementsByTagName("error")->length==1) {
            $this->errorMsg = $this->doc->getElementsByTagName("error")->item(0)->nodeValue;
            throw new Exception($this->errorMsg);
            return false;
        }
       
   
        if($this->doc->getElementsByTagName("result")->length!=1)
            return;
        //dados do usuário
        $userset = $this->doc->getElementsByTagName("result")->item(0);
        $blogBlogsUser = new BlogBlogsUser($userset->getElementsByTagName("username")->item(0)->nodeValue,
                                              $userset->getElementsByTagName("firstname")->item(0)->nodeValue,
                                              $userset->getElementsByTagName("lastname")->item(0)->nodeValue,
                                              $userset->getElementsByTagName("fullname")->item(0)->nodeValue,
                                           $userset->getElementsByTagName("thumbnailpicture")->item(0)->nodeValue,
                                              $userset->getElementsByTagName("profilepage")->item(0)->nodeValue,
                                           $userset->getElementsByTagName("blogs")->item(0)->nodeValue,
                                              $userset->getElementsByTagName("favorites")->item(0)->nodeValue,
                                           $userset->getElementsByTagName("fans")->item(0)->nodeValue);
        //dados de cada blog
        foreach($this->doc->getElementsByTagName("weblog") as $blog) {
            $blog = $this->createBlogWithXMLNode($blog);
            //$blogBlogsUser->addBlog($blog);
            $this->addBlogToUser($blogBlogsUser, $blog);
        }
        $this->user = $blogBlogsUser;
        return true;
    }
   
    /**
    * recupera um blog por uma url
    */
    function getBlogByUrl($url) {
        $path = $this->apiUrl . "bloginfo?key=" . $this->userKey . "&url=" . $url;
        $this->doc = new DOMDocument();
        $this->doc->load($path);
        if($this->doc->getElementsByTagName("weblog")->length!=1)
            return;
        $blog = $this->doc->getElementsByTagName("weblog")->item(0);
        $myBlog = $this->createBlogWithXMLNode($blog);
        return $myBlog;
   
    }
   
    function createBlogWithXMLNode($node) {
        $blog = new BlogBlogsBlog($node->getElementsByTagName("name")->item(0)->nodeValue,
                                  $node->getElementsByTagName("url")->item(0)->nodeValue,
                                  $node->getElementsByTagName("rssurl")->item(0)->nodeValue,
                                  $node->getElementsByTagName("blogpage")->item(0)->nodeValue,
                                  $node->getElementsByTagName("lastupdate")->item(0)->nodeValue,
                                  $node->getElementsByTagName("inboundblogs")->item(0)->nodeValue,
                                  $node->getElementsByTagName("inboundlinks")->item(0)->nodeValue,
                                  $node->getElementsByTagName("rank")->item(0)->nodeValue,
                                  $node->getElementsByTagName("lang")->item(0)->nodeValue);
   
        return $blog;
    }
   
    function addBlogToUser($user, $blog) {
        array_push($user->blogs, $blog);
    }
}

Vamos ver um passo-a-passo de como ver um atributo de um usuário:

$minha_chave = “XXXXXXXXXXXXXXX”;
$bbService = new BlogBlogsService($minha_chave);
$bbService->setUserName("ChrisB");
echo $bbService->user->fullName;

Se quisermos listar os blogs dele, exibindo as urls dos mesmos, acessamos a lista de BlogBlogsBlog que o BlogBlogsUser possue:

foreach($bbService->user->blogs as $blog) {
$blog->url . “<br />”;
}

Ainda podemos fazer a busca diretamente po um blog, pela sua url:

$bbService->getBlogByUrl(”http://www.chrisb.com.br/blog/”)
//para exibir o nome do blog
$bbService->getBlogByUrl(”http://www.chrisb.com.br/blog/”)->name;

Creio que os exemplos, mesmo simples, mostram a facilidade de uso. []s!

Onde sempre vemos isso? Frameworks como jQuery e Prototype dão a opção de você escolher uma função de callback para sucesso de um evento, outra para falha, outra para quando se inicia o drag de um elemento na tela, e por aí vai. Isso é feito passando, ao invés de uma função, uma lista de funções. No caso, para poder dar nome a elas, usamos a estrutura de chave/valor (key/value).

O exemplo abaixo explica como a função wrapper() passa 2 parâmetros e duas funções de callback: uma para sucesso, outra para falha. Na primeira chamada, a função de callback chamada será a de sucesso, pois é possível efetuar a rotina. No outro caso, dará erro, então será usada a função de falha.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function wrapper(par1, par2) {
    //verifica se o último parâmetro é uma função para chamá-la;
    //os demais parámetros são repassados para a função

    var lastArgument = arguments[arguments.length-1];
   
    try {
        //Classe Math possue o método max(), que retorna o maior valor entre dois parâmetros
        var sum = Math.max(par1, par2);
        //se não for erro, joga (throw) erro
        if(isNaN(sum))
            throw "not a valid result";
        //se chegar até aqui, é um resultado válido e chama função de sucesso
        lastArgument.onSuccess.call(this, sum);
    } catch(e) {
        //se não, chama a função de erro
        lastArgument.onFailure.call(this, e);
    }
       
   
}

function errorHandler(e) {
    alert("Error: " + e);
}

function myFunction(sum) {
    alert(sum);
}
wrapper(10, 2, {onSuccess: myFunction, onFailure:errorHandler}); //será chamado sucesso
wrapper(10, "a", {onSuccess: myFunction, onFailure:errorHandler}); //será chamado erro
</script>
</head>
<body>

</body>
</html>
 

Esse exemplo abaixo funciona para o caso de você saber exatamente quantos parâmetros serão passados para a função e quantos recebidos pela função de callback.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function wrapper(par1, par2) {
    //verifica se o último parâmetro é uma função para chamá-la;
    //os demais parámetros são repassados para a função  
    if(arguments.length>0) {
        var lastArgument = arguments[arguments.length-1];
        if(typeof(lastArgument)=="function") {
            lastArgument.call(this, par1, par2);   
        }
    }
}
function myFunction(par1, par2) {
    alert(par1);
    alert(par2);
}
wrapper("a", "b", myFunction);
</script>
</head>
<body>
</body>
</html>

O exemplo funciona da seguinte forma: a função wrapper recebe duas strings e uma função. Nela, verifica-se se o último parâmetro é uma funcão e, se for, ela chama essa função passando essas duas strings como parâmetro.
Note que esse exemplo vale para a função sendo passada como último parâmetro. Ela pode ser passada em outra ordem, mas aí deve ser feita a devida checagem.

Nos próximos post, mostro como receber uma quantidade aleatória de parâmetros e tratar de repassá-los (usando JSON) e como definir funções de callback específicas dependendo de condições na wrapper.

Mas, como funciona isso? Simples: no javascript, uma function é um Object do javascript. Com isso, ela pode ser passada como parâmetro com a mesma sintaxe de uma variável. Um bom exemplo é:

function myFunction() {
  //faz algo
}

function wrapper(parameter) {
 //faz algo
}

wrapper(myFunction);

No caso, passamos para a função wrapper a função myFunction como parâmetro.

Agora, como fazer para que essa função seja chamada dentro da função wrapper()? Toda função do javascript tem alguns métodos padrão. Um deles é o call(), que com que a função seja exetucada.

function wrapper(parameter) {
    parameter.call(); //executa parameter, que no caso é a função passada como parâmetro
}

Uma boa prática é checar se o parâmetro é mesmo uma função. Para isso, usamos a função typeof() que verifica o tipo do objeto:

function wrapper(parameter) {
    if(typeof(parameter)=="function")
        parameter.call();
}

Segue abaixo o exemplo completo do código para testes:

<html>
<head>
<title>Passando uma função como parâmetro para outra</title>
<script type="text/javascript">
function wrapper(parameter) {
    if(typeof(parameter)=="function")
        parameter.call();
}
function myFunction() {
    alert("teste");
}
wrapper(myFunction);
</script>
</head>
<body>
</body>
</html>

Ao rodar esse exemplo, deverá aparecer na tela um alert com o "teste" impresso.

No próximo post vou explicar como passar além da função outros parâmetros e fazer com que a função wrapper() reconheça os mesmos e repasse para a função myFunction().

Criei uma classe bem simples: instancia-se ela, chama o método start() para iniciar o cronômetro e o stop() para parar. O stop() retorna a diferença de tempo em segundos.

A implementação da classe é:

/*
classe para contador de tempo
*/
function TimeCounter() {
    this.startDate = null;
    this.ellapsedTime = null;
       
    //inicia o timer
    this.start = function() {
        this.startDate = new Date();
    }
       
    /*
    para o timer e retorna a diferença entre a hora atual e a em que foi startado/ dividindo
    por mil pois a diferença é dada em milisegundos
    */
    this.stop = function() {
        return (new Date() - this.startDate)/1000;
    }
}

Segue um uso da mesma; ao carregar a página (onload() da janela) inicio o cronômetro e crio 1000 divs, adicionando-as ao body. Após acabar o laço, paro o cronômetro. *faça o teste em diversos browsers e veja a diferença de performance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Time Counter</title>
<script type="application/javascript">
    function TimeCounter() {
        this.startDate = null;
        this.ellapsedTime = null;

        this.start = function() {
            this.startDate = new Date();
        }
       
        this.stop = function() {
            return (new Date() - this.startDate)/1000;
        }
    }
   
    var timeCounter = new TimeCounter();
    window.onload = function() {
        timeCounter.start();
        for(var i=0; i<1000; i++) {
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(i));
            document.body.appendChild(div);
        }
        alert(timeCounter.stop());
    }
</script>
</head>
<body>
</body>

Simples. O próprio pessoal do Twitter desenvolveu uma biblioteca javascript na qual você só precisa inserir o username (o usuário não pode ter as mensagens privadas) e dizer quantas mensagens quer exibir.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
            <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nome_do_usuario.json?callback=twitterCallback2&amp;count=quantidade"></script>

Troque o nome_do_usuario pelo username do Twitter e o quantidade pela quantidade de mensagens.

Feito isso, crie uma lista ul com o id igual a twitter_update_list.

<ul id="twitter_update_list">
</ul>

É onde as mensagens serão exibidas!

Enquanto na jQuery se utiliza o $ para fazer qualquer tipo de seleção (retornando ou um objeto ou uma lista), na prototype se utiliza o $ para selecionar um objeto pelo id dele e a função $$ para selecionar pelas regras do CSS, retornando um objeto Array da prototype (que é um objeto que extende o Array do javascript).

Vamos a um exemplo prático. Tendo o seguinte html:

<div>
   <ul id="main-nav">
      <li>abc</li>
      <li>fgh</li>
   </ul>
   <ul id="nav">
      <li>abc</li>
      <li>fgh</li>
      <li>abc</li>
      <li>fgh</li>
   </ul>
</div>

usando a função $$, você pode tentar retornar os elementos da seguinte forma:

$$("div ul"); //retorna as duas listas
$$("div.container ul"); //não retorna
$$("div ul#main-nav"); //retorna as lista com id main-nav
$$("div ul#main-nav li"); //retorna os itens de lista da lista com id main-nav
$$("div ul#main-nav li:first-child"); //retorna o primeiro item de lista da lista com id main-nav

A versão 1.6 (atual) suporta seletores do CSS3. Veja na documentação oficial quais são eles.

Uma coisa importante é notar que essa implementação é totalmente crossbrowser e que não está ligada a capacidade do browser de interpretar o CSS (ou seja, um browser que não entende seletores do CSS3 consegue pela prototype usar a função $$ igualmente a um browser que interprete o CSS3).

Quer ver esse código funcionando? Veja nesse html.