AJAX

Veja e feliz Ano Novo!

A solução que apresento tem como pressuposto uma página ou um site em que o charset é o ISO-8859-1, a linguagem de programação o PHP e o banco de dados o MySQL. Penso, que essa solução, pode facilmente ser adaptada para outras situações.

O assunto já foi objeto de posts no El Micox, no JulioGreef Blog e no fóruns iMaster, pelo menos.

O experimento é apresentado tomando-se como base um exemplo em que considera os métodos GET e POST do objeto XMLHttpRequest e os charset’s UTF-8 e ISO-8859-1 como formatos de gravação no banco de dados. E, claro, de acordo com a combinação entre método e charset é realizada a exibição correta dos caracteres acentuados no padrão da página ou site, no caso o ISO-8859-1.

A primeira medida é colocar no início das rotinas PHP o código a seguir para informar ao AJAX que os textos – label’s dos formulários, mensagens de erro e dados -, estão no formato ISO-8859-1.

<?php header("Content-Type: text/html;  charset=ISO-8859-1",true) ?>

Mesmo com esse código, é interessante observar o comportamento dos browsers frente aos métodos GET e POST do objeto XMLHttpRequest:

• No IE6, IE7, Netscape 8.0 e Firefox 2.0.0.7 os dados chegam nas rotinas chamadas, quando se usa o método GET, no formato ISO-8859-1 e no formato UTF-8 quando é utilizado o método POST;
• Já no Opera 9.0 em ambos os casos os dados chegam no formato UTF-8.

O comportamento em outros browsers, como por exemplo, o Safari, não tenho como estabelecer nessa situação. Quem sabe alguém aí pode ajudar.

Isso posto, o próximo passo é tratar os campos com informações textuais para gravá-los no banco de dados no formato desejado.

O papel é cumprido pelas instruções a seguir, de fácil interpretação, espero, e que leva em consideração as observações acima colocadas:

 if ($charset == "ISO-8859-1" && $metodo == "POST") {

    $titulo = utf8_decode($titulo);       // Converte os dados para ISO-8859-1

    $noticia = utf8_decode($noticia);

 }

 if ($charset == "UTF-8" && $metodo == "GET") {

    if ($browser != "Opera") {

       $titulo = utf8_encode($titulo);    // Converte para UTF-8

       $noticia = utf8_encode($noticia);

    }

 }

 if ($browser == "Opera" && $charset == "ISO-8859-1" && $metodo == "GET") {

    $titulo = utf8_decode($titulo);

    $noticia = utf8_decode($noticia);

 } 

Gravação efetuada, resta agora tratar os dados para que sejam exibidos no padrão ISO-8859-1:

   if ($rsnoticia->charset == "ISO-8859-1") {

      $ch_titulo = $rsnoticia->titulo;

      $ch_noticia = $rsnoticia->noticia;

   } else {

      $ch_noticia = utf8_decode($rsnoticia->noticia);

      $ch_titulo = utf8_decode($rsnoticia->titulo);

   }

Faça o download do experimento para analisar e testar e qualquer dúvida ou problema entre em contato.

O motivo principal que me levou a desenvolver o aplicativo Questionarious foi uma necessidade específica do blog, qual seja, a de se ter um instrumento que facilitasse a publicação de posts relacionados a exercícios propostos e resolvidos de Matemática e que agregasse a possibilidade de interagir de forma mais efetiva com o leitor.

O objetivo referente ao instrumento facilitador foi alcançado. A outra parte … a se ver.

Mesmo que no desenvolvimento do aplicativo tenha imprimido o direcionamento apontado, penso que ele poderá ser útil para outras finalidades que não aquela. E nesse sentido passo a apresentar detalhes da versão por mim batizada de “Zen” em contraposição às tradicionais versões alfa ou beta e a disponibilizar um demo para teste, avaliação, sugestões e efetivo uso, a quem interessar possa, quando for liberada a versão para download.

A versão demo pode ser acionada através do link questionarious na barra de navegação localizada no topo da página e o login e senha de acesso são ambos a palavra consulta.

Principais Características do Aplicativo

• Desenvolvido em PHP e Javascript/Ajax com banco de dados MySql;
• Dispõe das opções Tabelas, Questionários, Perguntas, Respostas, Gabaritos, Soluções, Gerar Questionários, Avaliações e Usuários;
• Faz uso do editor tinyMCE, o mesmo do WP, em várias de suas opções;
• Totalmente construído com AJAX sem o uso de qualquer biblioteca, com exceção do método Effect.toggle da script.aculo.us version 1.6.4 e Prototype version 1.5.0_rc1, para exibir as soluções dos exercícios;
• Permite a construção de dois tipos de questionários, o de avaliação e o de pesquisa;
• Todas as críticas são feitas única e exclusivamente do lado do servidor;
• Como complemento, possui duas maneiras para se publicar os questionários no blog, após incluído via aplicativo, que serão descritas mais adiante.

O que ainda falta fazer na versão “Zen”

• Concluir a opção Tabelas que, no momento, dispõe apenas dos tipos de respostas – cadastradas no “braço – que são fundamentais para determinar o formato do questionário como um todo. Na sub-opção Tipo Resposta são exibidos os detalhes de sua composição;
• A opção Avaliações destinada a gravação e análise das respostas fornecidas pelos usuários, ou entrevistados ou pesquisados, ou sei mais lá o que. Por enquanto apenas computa a quantidade de pessoas que se dignaram a responder um dado questionário;
• O manual de instruções que normalmente dá um trabalho danado de fazer e quase ninguém lê. Em alguns formulários coloquei instruções de preenchimento de campo como um possível mecanismo a ser adotado, mas não o único. Veja lá e diga o que você acha: basta “encostar” o mouse no ícone com a letra “i”, quando você se deparar com um;
• Permitir a impressão do questionário em formato pdf. A opção Gerar Questionário, por enquanto, é utilizada para verificações e testes antes de sua publicação;
• O cadastro de usuários do sistema é ainda provisório e aproveitado de outra aplicação;
• Questões relacionadas à segurança das informações cadastradas;
• Acho que é isso. Mas se você encontrar algo não mencionado aqui me avise, por favor!

Problema não Resolvido

Como iniciei meus conhecimentos há pouco com o editor tinyMCE, e tive um trabalho danado para fazê-lo funcionar com o AJAX, em raras ocasiões no FF e mais frequentemente no IE, ele apresenta uma perda de foco – me parece ser esta a causa – que “trava” todo o formulário.

Minha desconfiança segue por essa direção, pelo menos por enquanto, uma vez que detectei que ao clicar em qualquer dos ícones do editor tudo volta ao normal.

Fica o registro na esperança de que possa ser ajudado na solução do problema.

Outras Informações

• Os questionários são individualizados por usuário. Ou seja, exibe apenas os montados por você com base no seu login;
• Contribui para a denominação “Zen” o fato de não ter construído um banco de perguntas e respostas – a forma correta -, mas sim perguntas e respostas por questionário. O que significa que para “aproveitar” uma pergunta contida em um questionário em outro só com os famosos Ctrl+C e Ctrl+V;
• Dêem um desconto, pois no meu caso o fato dificilmente acontece e meu objetivo era de desenvolver um aplicativo simples, em um primeiro instante e até sem o editor, para atender as necessidades mencionadas no início do post;
• A construção de um questionário segue a ordem estabelecida no menu superior do aplicativo.

Como Publicar o Questionário no WP

• Através de um plugin desenvolvido com base no WP-Polls, de GaMerz, cuja rotina utilizada para esse fim é de autoria de Robert Accettura. Um Exemplo é o Questionarious #2 – Conjuntos, onde o questionário é exibido “aberto”;
• A outra forma é através de um link que permite acionar via AJAX uma rotina em PHP do lado do servidor, cujo exemplo você pode ver no Questionarious #1 – Potenciação e Radiciação.

Considerações Finais

Como vocês viram “arriba” e nos questionários já publicados existem muitas coisas prontas e muitas a se fazer. No ponto em que está, pra mim é mais do que suficiente e atende perfeitamente minhas necessidades.

A razão de divulgá-lo é detectar se há interesse ou não da comunidade blogueira e não blogueira por um aplicativo do gênero e quem sabe angariar reforço para implantar as melhorias mencionadas e outras a serem, certamente, sugeridas.

Uma das idéias que me passa pela cabeça é a de construir um plugin para o WP em que o aplicativo possa ser utilizado diretamente em sua interface. Conheço pouco ainda do assunto para partir para esta empreitada, mas quem sabe alguém topa contribuir.

Estou inteiramente aberto (opa!) para compartilhar o experimento e fico aqui na expectativa do retorno de vocês.

Finalmente gostaria de agradecer a colaboração do Renato Bontempo do Bicho de Goiaba e do Náiron do El Micox.

[Atualização: 06/03/2007]:

As soluções dos exercícios foram disponibilizadas no questionário. Para vê-las proceda como indicado no texto abaixo.

[/Atualização]

É com grande prazer e satisfação que inauguro mais uma categoria de artigos, se é que se pode dizer assim, a Questionarious.

Consistirá de exercícios propostos sobre as matérias tratadas no Viche em forma de um questionário, com perguntas e respostas de múltipla escolha onde você terá condições de testar seus conhecimentos ao vivo e a cores. Ou seja, você resolve as questões, responde diretamente no questionário e obtém o resultado de sua avaliação clicando no botão “enviar” exibido em seu final.

O primeiro questionário é composto de cinco exercícios sobre potenciação e cinco sobre radiciação.

Ao final de cada pergunta você observará que é mostrado um ícone em forma de uma lâmpada que se destina a fornecer a sua solução. É claro que, por enquanto, você não terá essa facilidade disponível. Será preciso que você tente, primeiro, resolver.

A idéia é que após quinze dias, a contar da data de publicação do questionário, as soluções sejam divulgadas. Achou pouco ou muito, diz aí nos comentários!

No entanto, como “canja” e para você ter idéia de como as soluções serão apresentadas, estou disponibilizando, de imediato, os resultados da primeira e da sétima questão. Seja forte e resista à tentação de “espiar” sem antes tentar resolvê-las. A recomendação é para seu próprio bem :-).

Somente a título de conhecimento, o Questionarious é um aplicativo desenvolvido por mim em PHP, MySQL, JavaScript e AJAX com um pouco de CSS. Para a turma que “mexe” na área, informo que logo, logo, estarei liberando a versão “Zen” em forma de demonstração.

Chega de conversa e vamos ao que interessa: Clique aqui para exibir o questionário e bom teste.

Em fevereiro de 2006, quando ainda não conhecia nada de AJAX, escrevi o artigo Simulando AJAX?, onde usei PHP e JavaScript para criticar o preenchimento de um campo e exibir, quando correto, a descrição correspondente após a utilização da tecla Tab, sem o refresh da página.

Retomo agora o exemplo, para demonstrar a mesma funcionalidade com o uso do objeto XMLHttpRequest do AJAX, mas com uma “cara” nova e bem mais elegante :-).

Apesar de se tratar de uma aplicação simples tem como vantagem evitar a lógica para validar os campos do lado do cliente com JavaScript, que em alguns casos é inviável de ser realizada e somente é efetuada do lado do servidor após o formulário ser submetido (neste post, este aspecto não é considerado).

Além do mais, na maioria dos casos, é bem mais simples escrever a lógica de validação com a linguagem utilizada no desenvolvimento de seus aplicativos e, ainda, com a possibilidade de se aproveitar estruturas já construídas.

Acredito, também, que quando se trata de performance, apesar de não ser um desenvolvedor contumaz, não há perda significativa que justifique o não uso da ferramenta AJAX.

Escopo

Neste experimento mostraremos exemplos comuns de validações, com o uso de um formulário contendo apenas o campo Id Categoria a ser preenchido e da tabela wp-categories do Viche, a saber:

• Preenchimento obrigatório do campo;
• Se o dado informado é numérico;
• E, a verificação da existência ou não da categoria na tabela.

Observe que a terceira crítica é um caso clássico, pelo menos até onde eu sei, em que o JavaScript sozinho não resolve.

A linguagem utilizada do lado do servidor é o PHP, que usa na interação com o JavaScript/AJAX uma técnica que permite a acentuação correta das mensagens exibidas, descoberta através da dica fornecida no artigo Acentuação para conteúdos carregados por AJAX do El Micox e de autoria de Fabrício Nogueira Magri, com o título Palavras acentuadas com AJAX.

O código Javascript está, também, embutido no XHTML do experimento, e a função retirada do artigo mencionado é a url_decode(str), enquanto que no PHP é utilizada a função rawurlencode($resposta). Os detalhes sobre as funções podem ser vistos diretamente no artigo do Fabrício e com informações adicionais bem interessantes.

Detalhamento

Serão descritos apenas os pontos que considero importantes no experimento.

O primeiro é a chamada do objeto XMLHttpRequest criado através da função criaxmlhttp():

<input id="id_cad" name="id_cad" size="6" value="" maxlength="8" onblur="valida_cat(this.value,'S','N','verifica_cat')" type="text">

onde utilizo o evento onblur e a função valida_cat() com os seguintes parâmetros:

1. O conteúdo digitado no campo Id Categoria;
2. Se o campo é de preenchimento obrigatório ou não;
3. O tipo do campo, no caso numérico; e
4. Uma função auxiliar a ser acionada no programa PHP para a verificação da existência ou não da categoria na tabela.

Outro ponto, é a chamada da função passada como parâmetro pelo objeto XMLHttpRequest, no programa PHP:

if ($funcao != "") {
$resposta = call_user_func($funcao, $id);
echo $resposta;
return;
}

em que fazemos uso da função call_user_func() de modo a permitir a generalização da rotina para executar qualquer procedimento adicional definido como parâmetro na url do objeto XMLHttpRequest.

E, finalmente, a decodificação correta dos acentos para que as mensagens sejam exibidas em um bom português:

echo rawurlencode($resposta);  // no PHP

e

var resposta = url_decode(xmlhttp.responseText);   // no JavaScript

de acordo com as orientações do Fabrício anteriormente mencionadas.

Você deve ter notado que na resposta da função não faço uso de rawurlencode(), isto porque se encontra definida no XHTML a meta tag que estabelece o charset como UTF-8, o padrão do WordPress.

Ah! veja agora o experimento em ação.

Feliz Natal com muita paz e muito VICHE.

A barra a que o título se refere é composta de nove links dispostos em três colunas com fundo cinza claro e, se tudo está de acordo com o esperado, encontra-se exibida no início da página. Caso contrário, mude para o tema Viche 3 onde a barra se encontra em funcionamento.

Foi desenvolvida com o uso da função Effect.toggle(element, effect) das bibliotecas script.aculo.us versão 1.6.4 e Prototype versão 1.5.0_rc1. Seu funcionamento se traduz no famoso clica-abre (se fechado) e clica-fecha (se aberto) em cada link da barra.

Deu um tanto de trabalho pois tive de alterar os programas relativos ao tema bem como as suas folhas de estilos, o que para os experts é fácil de compreender. O difícil, após concluído, é estabelecer se a mudança gerou ou não ganhos do ponto-de-vista da funcionalidade (as vezes acho que sim, outras, não).

Fiquei em dúvida até se deveria disponibilizar o resultado dessa experiência de aprendizado pessoal sobre o WP e outras pequenas coisitas mais aos meus leitores. Decidi me arriscar e colocar “a cara a tapas”, mesmo porque existe a alternativa de você escolher outro tema de seu agrado (acredito).

Isto posto, só me resta aguardar com o espírito totalmente desarmado e me colocar à disposição para quaisquer esclarecimentos (será?).

powered by performancing firefox

Depois de muito tempo e a paciente espera do Amós Vilarinho Rangel, um representante da classe dos tecelões, disponibilizo a versão 1.0 do Gerador de Padrões – Técnica Repasso.

Sob o aspecto técnico, consiste de programas em PHP, de rotinas em Javascript/AJAX e de um pouco de CSS e XHTML. Contém um formulário para digitação dos campos necessários (os fundamentais são a sequência de pedalagem e as cores da trama e do urdume) para gerar os padrões de tecidos e uma breve explanação de como utilizá-lo.

Além do que, no combobox Exemplos do gerador é relacionado alguns códigos repasso (reais) extraídos da pesquisa com o objetivo de demonstrar a sua funcionalidade. Basta selecionar qualquer um deles e os campos são exibidos após uma consulta a uma tabela MySQL, via AJAX, e clicar no botão “Gerar” na parte inferior do formulário. Neste caso recomendo, apenas, alterações nas cores, se assim o desejar.

Atenção! A versão 1.0 não armazena as informações digitadas no banco de dados do Viche. No entanto, na página com o resultado, elas são exibidas. Sugiro, portanto, anotá-las ou utilizar os famosos Ctrl+C (copiar) antes da execução e o Ctrl+V (colar) no caso de necessidade de um novo experimento.

As paletas de cores são bem simples e não há validação dos campos preenchidos, nesta versão. Deixo para fazê-la após sua avaliação.

Acrescentada uma terceira cor cinza fixa (#666666) em alguns pontos da trama de modo a proporcionar uma melhor visualização do padrão.

E, finalmente, só me resta aguardar as críticas – ou elogios :-) – e as sugestões de melhorias do gerador, que peço sejam registradas nos comentários deste post.

[UPDATE: 17/09/2006]

A modificação básica efetuada no gerador, da versão 1.0 para a 1.01, consistiu em substituir a exibição do padrão no formato de tabela para o formato em folhas de estilos. A nova versão pode ser acionada no link exibido a seguir, onde você observará que houve um ganho significativo na performance se comparada com a versão anterior.

Gerador de Padrões – Técnica Repasso: Versão 1.01

A versão 1.01 foi testada no FF, IE, Netscape e Opera, sendo que neste último o padrão é renderizado com um tamanho maior do que nos demais.

[UPDATE]

powered by performancing firefox

Nos experimentos anteriores, publicados aqui no Viche, utilizei sómente uma das duas propriedades do objeto XMLHttpRequest que permitem acesso às respostas enviadas pelo servidor – a propriedade responseText.

Como o próprio nome indica, são respostas na forma de um texto não padronizado. Em geral é construído em um formato definido pelo desenvolvedor da aplicação, de maneira que possa ser mais facilmente manipulado para gerar conteúdo em uma página. Como por exemplo, em JSON, HTML ou texto simples sem formatação, normalmente para exibir alertas.

Já a segunda propriedade, responseXML, recebe um objeto XML que é padronizado pela W3C e pode ser manipulado pelas propriedades e métodos dos elementos DOM, através de qualquer linguagem de script.

No exemplo que será detalhado a seguir é utilizado o JavaScript para acessar e manipular o documento XML.

O Resultado do Experimento

Veja de imediato o resultado a ser alcançado, que consiste na manipulação de um objeto XML recebido através da propriedade responseXML, como dito, e apresentado na forma de uma tabela.

Se desejar, clique novamente no link acima para fechar a tabela – claro se aberta :-) – e vice-versa.

O Processo de Desenvolvimento

Penso valer a pena detalhar alguns fatos do processo de desenvolvimento, uma vez que tem um papel importante no resultado final do experimento.

Para minha “surpresa” deparei-me, de cara, com um problema no IE. Enquanto nos demais browsers testados por mim (Firefox, Opera e Netscape) obtinha o resultado esperado, no IE o resultado era nulo. Ou seja, não reconhecia a resposta como um documento XML apesar de ter no programa PHP a instrução correta para gerar o cabeçalho HTTP requerido:

header("Content-type: application/xml; charset=UTF-8");

O uso da instrução header é necessária pois o mime-type do Viche é text/html. Diante do fato fui a procura de informações na WWW, via Google, para identificar e corrigir o problema.

Encontrei vários companheiros na mesma situação e uns poucos artigos publicados com a solução. Testei algumas e, talvez por não compreender de forma adequada as explicações encontradas, continuei na mesma.

Lembrei-me, então, que o Analista de Sistemas Nailson Araújo Brito, da empresa em que trabalho, havia recentemente efetuado uma alteração em nossa Intranet com o uso da propriedade em questão e com o funcionamento correto no IE. Ao analisar o código observei que ele utilizava no método open() do objeto XMLHttpRequest, POST ao invés de GET.

Fiz a substituição e acrescentei a propriedade setRequestHeader(“header”) do objeto para alterar o mime-type do pedido, exigido ao se enviar dados através do método POST, conforme indicado abaixo:

xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Como o experimento a ser detalhado em seguida não exigia a passagem de parâmetros, alterei o método send() para:

xmlhttp.send('1')

E … funcionou, tanto no IE como nos demais browsers mencionados no início do artigo.

As Dúvidas

Mesmo com o problema solucionado ficaram dúvidas:

1. É correta a solução, mesmo com o artifício utilizado no método send()?
2. Por que o IE interpretou corretamente o objeto XML com o método POST?
3. Qual seria a solução, nas condições do Viche (text/html), para funcionar com o método GET?

Deixo, as dúvidas, em aberto para quem quiser contribuir nos comentários e vamos, finalmente, ao que interessa.

O Experimento

O experimento consiste:

De um programa simples em PHP que gera o documento XML a partir da tabela Categories do Viche.

Do objeto XML.

De funções em JavaScript apresentadas a seguir com comentários que detalham os principais procedimentos executados.

// Cria o objeto XMLHttpRequest
function criaxmlhttp() {
   try {
      xmlhttp = new XMLHttpRequest();
   } catch(ee) {
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(E) {
            xmlhttp = false;
        }
      }
   }
}

function leXML(url) {
// Verifica se a tabela foi exibida. Se sim, ao clicar
// no link fecha - função limpaResultado()

   if (document.getElementById("cabecalho").hasChildNodes()) {
      limpaResultado();
      return;
   }
   criaxmlhttp();

   document.getElementById("cabecalho").innerHTML = "<img src="%5C%22http:%5C/%5C/www.nghorta.com%5C/wp_aplicacoes%5C/copa2006%5C/progress.gif%5C%22" alt="\"\"" /> Carregando ...";

   xmlhttp.open("POST", url, true);
   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
   xmlhttp.onreadystatechange=function() {
// Verifica se o servidor enviou a resposta de forma
// correta
      if (xmlhttp.readyState == 4) {
         if (xmlhttp.status == 200) {
            limpaResultado();
            montaResultado();
         }
      }
   }
   xmlhttp.send('1')
}

function limpaResultado() {
//Código HTML utilizado no corpo do artigo para
// exibir a tabela
// <span id="cabecalho"></span>
// <table id="resultado" width="100%">
//     <tbody id="r_body">
//     </tbody>
// </table>
// O uso do elemento tbody é necessário por conta do IE
// que não aceita adicionar o elemento tr a tag table

   var header = document.getElementById("cabecalho");
   while(header.childNodes.length > 0) {
      header.removeChild(header.childNodes[0]);
   }
   var tabela = document.getElementById("r_body");
   while(tabela.childNodes.length > 0) {
      tabela.removeChild(tabela.childNodes[0]);
   }
}

function montaResultado() {
// Cria a linha de título das colunas da tabela
   var tr = document.createElement("tr");
// Cria a célula th
   var celula = document.createElement("th");
// Cria o conteúdo Id da celula
   var textoNode = document.createTextNode('Id');
// Adiciona o conteúdo à célula
   celula.appendChild(textoNode);
// Adiciona a célula th ao elemento tr
   tr.appendChild(celula);
   celula = document.createElement("th");
   textoNode = document.createTextNode('Nome Categoria');
   celula.appendChild(textoNode);
   tr.appendChild(celula);
   celula = document.createElement("th");
   textoNode = document.createTextNode('Posts');
   celula.appendChild(textoNode);
   tr.appendChild(celula);
// Adiciona o elemento tr à tabela
   document.getElementById("r_body").appendChild(tr);
// Adiciona estilo à linha
   tr.style.cssText = "background-color: #404e2a; color: #ffffff; padding: 5px; text-align: center";

// Recebe o objeto XML
   var aDados = xmlhttp.responseXML;
// Recupera todos os elementos categoria do objeto
// XML como uma matriz
   var categorias = aDados.getElementsByTagName("categoria");
   for (var i = 0; i < categorias.length; i++) {
// Atribui a cat cada elemento da matriz
      cat = categorias[i];
// Recupera os valores dos nós id, nome e posts
      id = cat.getElementsByTagName("id")[0].firstChild.nodeValue;
      nome = cat.getElementsByTagName("nome")[0].firstChild.nodeValue;
      posts = cat.getElementsByTagName("posts")[0].firstChild.nodeValue;
// Chama a função que cria as linhas da tabela
      adicionaLinha(id, nome, posts)
   }
// Deste ponto em diante deixo para vocês
   var header = document.createElement("h2");
   var texto_header = document.createTextNode("Resultado: Posts por Categoria");
   header.appendChild(texto_header);
   document.getElementById("cabecalho").appendChild(header);
   document.getElementById("resultado").style.cssText = "border-bottom: 5px solid #404e2a;";
}

function adicionaLinha(id, nome, posts) {
   var linha = document.createElement("tr");
   var celula = criaCelula(id);
   celula.style.cssText = "text-align: center;";
   linha.appendChild(celula);
   celula = criaCelula(nome);
   celula.style.cssText = "padding-left: 5px;";
   linha.appendChild(celula);
   celula = criaCelula(posts);
   celula.style.cssText = "text-align: center;";
   linha.appendChild(celula);
   linha.style.cssText = "color: #404e2a;";
   document.getElementById("r_body").appendChild(linha);
}

function criaCelula(texto) {
   var celula = document.createElement("td");
   var textoNode = document.createTextNode(texto);
   celula.appendChild(textoNode);
   return celula;
}

Observação Final

Para a edição dos códigos JavaScript utilizei a extensão Perfomancing do Firefox (link abaixo) que mantém a indentação ao gravar o artigo.

Mas se você utiliza o excerpt do WP, ou seja, publica apenas um trecho do artigo, e não o artigo todo, cuidado! pois você terá que fazer isto no editor do CMS. E aí, babau, a indentação vai para o espaço. Tema abordado no post Edição de Código no Wordpress

E como resolvi: simplesmente na “marra”, gravei o excerpt direto na Tabela que armazena os posts no MySQL.

Dica da extensão obtida no blog Mr. TheChessMan.

powered by performancing firefox

Uma maneira fácil e rápida de criar botões (buttons) com qualidade é oferecida gratuitamente pelo buttonator.com, cuja interface desenvolvida em AJAX é mostrada abaixo e que, por sua simplicidade, dispensa maiores comentários.

Veja alguns exemplos:

Uma das coisas que acho trabalhosa no WordPress é editar código.

Visualmente no editor do WP, quando se digita um trecho de código, tudo parece funcionar as mil maravilhas. Os problemas surgem quando se aciona o botão salvar ou publicar do editor. Ele destroi toda a indentação, importante para uma leitura mais adequada do código, e faz uns ajustes automáticos no HTML que geram, as vezes, resultados imprevisíveis.

Esse comportamento, talvez, seja decorrência do fato de o WP ter sido criado, também e principalmente, para quem não conhece a linguagem de marcação.

Questionei algumas pessoas sobre esses fatos e, para minha surpresa, as dificuldades que elas tinham eram muito semelhantes. Utilizo-me bastante do Writely para a edição dos meus posts, mas os problemas permanecem, tanto na publicação a partir desse editor, como através da velha e conhecida técnica de copiar e colar.

Se não me engano, li também, provavelmente por conta dessas deficiências, que outras pessoas utilizam plugins para substituir o editor padrão do WP. Se é de seu conhecimento e funciona, agradeceria se você deixasse a sua indicação nos comentários.

Eu, do lado de cá, fiz uma rotina simples em AJAX para, paliativamente, solucionar os (meus) problemas mencionados e que disponibilizo a seguir para sua apreciação e julgamento.

Veja o código JavaScript AJAX utilizado. Ao clicar no link o código é exibido e ao clicar novamente é fechado. Experimente!

[Update] Os sinais de menor e maior, entre aspas, no código JavaScript AJAX correspondem à &_lt; e &_gt;, respectivamente, sem o concatenado.

Um outro exemplo de uso da mesma rotina, que aciona um programa PHP do lado do servidor e retorna como resposta um arquivo XML.

E, por último, veja o código do programa PHP usado acima.

Pelo menos os códigos ficam mais bonitos e compreensíveis (eu acho). E, por um lado, o texto fica mais condensado, mas por outro exige um clique a mais nos links. E você o que achou?