Web

Minha idéia inicial era escrever sobre a validação de campos de formulário, uma operação relativamente simples, com o uso da ferramenta AJAX. Mudei de rumo (fica para outra oportunidade, a ver se interessa) em função do que digo um pouco mais abaixo (vocês, certamente, vão descobrir) para abordar dois aspectos relacionados, que considero, como os principais e os mais importantes, sobre o assunto:

1. Usabilidade;
2. Validação do lado do servidor com a linguagem utilizada na aplicação em uso ou em desenvolvimento e/ou do lado do cliente com JavaScript.

Quanto ao primeiro item a boa prática recomenda que devemos fazer o possível (ou até o impossível) para impedir que erros ocorram. E, se por acaso, não puder ser feito procure informar (o “jeito” deixo por sua conta) a seus usuários os erros ocorridos tão logo possa.

No entanto, mesmo com as técnicas hoje existentes para evitar (será?) a situação e melhorar a interação com o usuário, é comum se deparar com formulários, as vezes até extensos, em que recebemos a resposta de erro após clicar no famigerado (nestes casos) botãozinho do Submit, Ok, Enviar ou qualquer outro nome que venha a ter. E o que é pior, retorna o erro com o formulário totalmente em branco.

Se o seu browser não estiver parametrizado com o autocomplete ou algo como no FF – Memorizar dados fornecidos a formulários e ao campo de pesquisa -, o único jeito é redigitar tudo. Só faço isso em caso de total interesse, mas mesmo assim desabafo: p#*% que p*&%@. Quando parametrizado basta digitar a(s) primeira(s) letra(s) ou número(s) e aparece a “janelinha” milagrosa para selecionar a informação o que, apenas, ameniza o desabafo.

Quem não passou por essa situação levante o dedo ou, se sim, desabafe nos comentários, mas com bastante calma, heim!

No WordPress, se você não tiver um plugin ou template com JavaScript/AJAX, a validação do formulário de contato, por exemplo, ocorre, como padrão, do lado do servidor. Pelo menos a experiência não é tão dolorosa pois ele retorna com a mensagem dos erros ocorridos e com a informação dos campos digitados anteriormente.

Aliás, foi esse fato que me motivou a escrever este artigo, quando resolvi testar o formulário de contato aqui do Viche. Ele faz exatamente como dito acima, só que as mensagens de erro estão escritas em inglês quando retorna. A mancada permanece só para “inglês ver”.

Resolvi, então, perambular por alguns blogs e sites dos quais assino o feeds (de famosos, pretendentes a, e nem tanto) e me deparei com situações como:

1. Inexistência de formulário de contato (até aqui, tudo bem, a opção é de cada um. E viva a democracia!);
2. Formulários com erros (literalmente);
3. Formulários que criticam de forma eficiente, do lado do cliente, os campos Nome e E-Mail, mas deixam enviar (pelo menos não deu aviso) com o campo Mensagem em branco;
4. Parceiros meus, que retornam a(s) mensagem(ns) de erro em inglês (boa companheiro!) ou mista (português-inglês ou vice-versa);
5. Formulários que criticam todos os campos do lado do cliente com JavaScript (caixa de alerta), porém, quando desabilitei (o JavaScript, claro!) ficou “mudinho”, ou seja, não deu erro e nem mensagem de confirmação (se foi para a caixa postal do autor, sabe-se lá);
6. Sem a adequada informação de quais campos são obrigatórios;
7. Formulários que criticam apenas do lado do servidor, mas com mensagens de erro em português e a validação correta (meus parabéns).

Diante dos fatos apontados será o caso de se criar uma nova campanha, a do Formulator Validator Tabajara? Se não for o caso, dê uma testadinha básica no seu formulário de contato, desde que disponibilizado (óbvio!), e nos:

• informe em qual categoria acima você está; ou
• acrescente uma nova, a lista;
• alternativamente, você pode sugerir um nome para a campanha :-).

Para encerrar, sou a favor do e para a validação de formulário (veja item 2. no início do artigo), apesar do duplo esforço. E você, diga aí o que acha e qual a razão?

A partir da dica fornecida pelo Lucas Alves (comentário #14) penso ter solucionado a questão colocada pelo Henrique Costa Pereira no artigo O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP.

Resultado obtido com a versão do IE 7 com o topo quebrado:

E, abaixo o resultado com o IE 6, onde o site é renderizado corretamente.

Procedimentos:

1. Download Internet Explorer 7 standalone Installer (427KB);
2. Executar o programa de instalação IE7S-setup.exe;
3. Abrir a pasta C:\Arquivos de programas\IE7 em que o Internet Explorer foi instalado;
4. Executar o programa iexplore.exe.

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

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?

Motivado pelo Desafio do Maujor, recém concluído com a vitória do excelente trabalho do Sérgio Burlamaqui, criei o tema Viche para o Blog.

Não é pretensão, nem de longe, fazer comparações, pois não sou Web Designer (e mesmo que fosse). Apenas dedico um pouco de meu tempo lendo (praticando, nem tanto) assuntos relacionados à área e da qual sou admirador de carteirinha. Quem sabe ainda chego lá um dia.

Os demais temas continuam disponíveis para você selecionar aquele que é de seu agrado. Se nenhum deles atender seus critérios de estética ou de leitura a culpa, pelo menos, não será totalmente toda minha, uma vez que alguns deles permanecem praticamente como o seu autor o desenhou.

Para quem já escolheu um como padrão, dê pelo menos uma olhada no novo, sem compromissos. Para isto é só selecionar na aba Temas na barra de navegação o de mesmo nome do Blog.

Não tenho nenhum prêmio para oferecer, mas se você desejar fazer sugestões, garanto, serão muito bem recebidas e avaliadas (olha só! até parece que sou um profundo conhecedor).

Finalmente, registro que enviei um desenho para o Desafio do Maujor mais como uma forma de agradecer ao Mestre que nos presta tão bons serviços do que para vencer (óbvio demais). Ele topou publicar e eu ganhei um bondoso voto – juro de pés juntos que não foi o meu -, ao qual agradeci nos comentários do Resultado do Desafio e o faço novamente agora.

O detalhamento do código do experimento deve ser encarado como um exercício de um aprendiz em AJAX, como claramente explicitado no post original.

O que me motivou a compartilhar com vocês os detalhes foi a divulgação do experimento no Blog da Visie, pelo Elcio Ferreira, algumas (confesso, não muitas) solicitações enviadas através do formulário de contato do VICHE e, por último, o artigo publicado no Blog do Maujor.

Em função desse artigo, os botões (<input type=”button”>) foram substituídos por ícones (<input type = “image”>). Como consequência houve mudanças no código do experimento que passou a funcionar com múltiplos submit’s no formulário. A abordagem no Blog do Maujor é derecionada especificamente para questões de acessibilidade em que confronta as duas versões do experimento.

Esclareço que os ícones são utilizados em uma aplicação Web da Empresa em que atualmente trabalho, reforçando o comentário postado pelo Maurício em seu artigo. E, além do manual de operação, na maioria de seus formulários tem um ícone de ajuda, que acionado, exibe informações sobre a funcionalidade dos ícones utilizados acrescida das de preenchimento de seus campos (veja um exemplo na figura abaixo).

Sugestões são bem vindas e você pode ver agora, antes das explicações, a nova versão em funcionamento.

Contextualização

O experimento consiste de:

• uma tabela em MySQL;
• rotinas em Javascript AJAX que cria o objeto XMLHttpRequest e faz uso de alguns de seus métodos e propriedades;
• um programa em PHP que executa as requisições desse objeto do lado do servidor e retorna a resposta no formato JSON;
• uma página XHTML, a que você navega, com um formulário e o CSS para renderizá-la;
• códigos em Javascript para a construção dos parâmetros a serem passados para o programa PHP, o tratamento da resposta em JSON e sua exibição no formulário.

A tabela e o CSS, por serem simples, não serão tratados. A quem se interessar, o CSS pode ser visto diretamente no próprio código fonte da página. Do XHTML serão apresentadas apenas os excertos necessários à compreensão do experimento.

Criação do Objeto XMLHttpRequest

A sua criação não é tão complicada como você pode ver abaixo:

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

O objeto, e consequentemente o experimento, foi testado no Firefox 1.5.0.4, no Opera 8.54, Netscape 7.2 e no IE 6 (os que tenho instalado). Observe que em xmlhttp teremos o objeto de acordo com o navegador em uso, ou em caso de não ter suporte, lhe é atribuído o valor false.

O Formulário

Os detalhes do experimento serão explicados com base nos elementos e campos do formulário.

a) Código inicial do elemento form

<form class="form-cadastro" name="form_cad" action=""
onsubmit="verifica(document.form_cad.opc.value); return false;" method="get">

Ao submeter o formulário, clicando em qualquer dos ícones, é chamada a função verifica() com o parâmetro correspondente à operação selecionada – incluir, alterar, excluir ou consultar. O parâmetro é setado em um <input type=”hidden”> antes de enviar o formulário.

O return false bloqueia o submit, uma vez que todo o processo é efetuado pelo objeto XMLHttpRequest, evitando-se o refresh da página. A função verifica() e outros detalhes são explicados abaixo.

b) O campo id e o link buscar

Funcionalidade:

Preencher o campo id e clicar no link buscar para realizar uma pesquisa na tabela.

Código XHTML:

<label id="lbl_cad" for="id_cad">Id:
<input type="text" id="id_cad" name="id_cad" size="8" value="" maxlength="12" />
<a xhref="javascript:busca(document.form_cad.id_cad.value)" mce_href="javascript:busca(document.form_cad.id_cad.value)"   >buscar</a></label><br />

Executa a função busca() ao se acionar o link, passando como parâmetro o valor digitado no campo id.

c) a função busca():

Será explicada por partes. A visão geral da função pode ser vista no corpo da página XHTML.

Inicialmente, a função recebe em param o valor digitado no campo id (linha 1), exibe a mensagem “Aguarde …” no campo nome (linha 2) e verifica se esse valor é numérico (linha 3). Caso contrário, exibe um alerta (linha 4), retorna o foco ao campo id (linha 5) e limpa o campo nome do formulário (linha 6).

01 function busca(param) {
02   document.getElementById("id_nome").value="Aguarde ...";
03   if (isNaN(param)) {
04      alert("VICHE! Tem algo de Errado");
05      get_focus('id_cad');
06      document.form_cad.elements[1].value = '';
07      return;
08   }

O método open é constituído de três parâmetros – método = “GET”, url = “rotina2.php?id=”+param e async = “true” – e tem como função preparar o objeto XMLHttpRequest para uma requisição. Quando ativado, requisita o programa PHP passando como parâmetro o valor informado no campo id através do método GET, de forma assíncrona.

   xmlhttp.open("GET", "rotina2.php?id="+param,true);

A função onreadystatechange (veja código abaixo) dispara um evento quando o estado da requisição muda. O if (linha 2) verifica se a requisição foi finalizada com sucesso (= 4) utilizando-se da propriedade readyState do objeto. Se sim, recebe o retorno de rotina2.php em formato JSON, através da propriedade responseText (linha 3) do objeto XMLHttpRequest. O alerta comentado no código, foi utilizado para checagem da resposta durante o processo de desenvolvimento.

Através da função eval() (linha 3) do JavaScript o formato JSON é convertido na matriz aDados, onde aDados[0] indica o resultado da pesquisa/operação e aDados[1] se foi realizada com sucesso.

O if (linha 4) verifica se nenhum registro foi encontrado na tabela. Em caso positivo, limpa os campos do formulário (linhas 5-8), habilita o ícone incluir e desabilita os ícones alterar e excluir (linhas 9-14). A classe imgfull exibe a imagem original do ícone e imgfade a imagem com opacidade para indicar que estão desabilitados. Funcionam sómente no IE e navegadores Mozilla, e foi colocada apenas a título de ilustração (encontram-se no CSS da página).

O else (linha 16) é executado quando o registro é localizado. As instruções (linhas 17-25) habilita os ícones alterar e excluir, desabilita o ícone incluir e exibe os dados no formulário a partir da matriz aDados (linhas 23-25).

A função get_focus() (linha 28) posiciona o foco no campo nome do formulário.

E, finalmente, o método send dispara a requisição (linha 31).

01 xmlhttp.onreadystatechange=function() {
02    if (xmlhttp.readyState==4) {
//     alert(xmlhttp.responseText);
03       var aDados=eval((xmlhttp.responseText));
04       if (aDados[0] == '0' && aDados[1] == 0) {
05          var campos = document.getElementsByTagName('input');
06        for (i=1;i<7;i++) {
07           campos[i].value = '';
08          }
09          document.getElementById("b_incluir").attributes["class"].value = "botao imgfull";
10          document.getElementById("b_incluir").disabled = false;
11          document.getElementById("b_alterar").attributes["class"].value = "botao imgfade";
12          document.getElementById("b_alterar").disabled = true;
13          document.getElementById("b_excluir").attributes["class"].value = "botao imgfade";
14          document.getElementById("b_excluir").disabled = true;
15      }
16      else {
17         document.getElementById("b_incluir").attributes["class"].value = "botao imgfade";
18         document.getElementById("b_incluir").disabled = true;
19         document.getElementById("b_alterar").attributes["class"].value = "botao imgfull";
20         document.getElementById("b_alterar").disabled = false;
21         document.getElementById("b_excluir").attributes["class"].value = "botao imgfull";
22         document.getElementById("b_excluir").disabled = false;
23         for (var i=0;i<aDados.length;i++) {
24            aDados[i]=unescape(aDados[i]);
25            document.form_cad.elements[i].value = aDados[i];
26         }
27      }
28      get_focus('id_nome');
29   }
30 }
31 xmlhttp.send(null)
}

d) Os ícones incluir, alterar, excluir e consultar

Código XHTML:

01 <input name="incluir" id="b_incluir" class="botao imgfade" type="image" disabled="disabled"
value="" title="Incluir Registro" alt="Incluir Registro" xsrc="inclui.gif" mce_src="inclui.gif"   onclick="seta_opc(1)" />

02 <input name="alterar" id="b_alterar" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="modifica.gif" mce_src="modifica.gif"   title="Alterar Registro" alt="Alterar Registro" onclick="seta_opc(2)" />

03 <input name="excluir" id="b_excluir" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="elimina.gif" mce_src="elimina.gif"   title="Excluir Registro" alt="Excluir Registro" onclick="seta_opc(3)" />

04 <input name="consultar" id="b_consultar" class="botao" type="image" xsrc="pesquisa.gif" mce_src="pesquisa.gif"
title="Consulta Registros" alt="Consulta Registros" onclick="seta_opc(4)" />

05 <input name="opc" type="hidden" id="opc" />

Os ícones incluir, alterar e excluir são inicialmente exibidos desabilitados e com opacidade (conforme rapidamente já explicado). O ícone consulta fica sempre habilitado e com sua imagem original.

O evento onclick em todos eles aciona a função seta_opc() cujo código é apresentado a seguir e que dispensa comentários por sua simplicidade:

function seta_opc(opc) {
document.form_cad.opc.value = opc;
}

e) A função verifica()

Executada quando o formulário é enviado, conforme mostrado no item a). Recebe como parâmetro a variável opc, checa qual ícone foi clicado e chama as funções executa() e consulta(), conforme o valor de opc.

function verifica(x) {
if (x == 1) executa('1');
if (x == 2) executa('2');
if (x == 3) executa('3');
if (x == 4) consulta();
}

f) A função consulta()

Quando o ícone consultar é clicado a função seta_opc(4) é executada e, em seguida, a função verifica(4), quando o formulário é submetido.

As instruções contidas na função já foram descritas anteriormente. Cabe apenas observar que a resposta é exibida na forma de um alerta do navegador e é passado o parâmetro con com valor 1.

function consulta() {
xmlhttp.open("GET", "rotina2.php?con=1",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null)
}

g) A função executa()

Executada quando os ícones incluir, alterar e excluir são clicados, de forma semelhante à explicada no item f).

Inicia com a simples verificação de preenchimento dos seis primeiros campos do formulário (linhas 2-10). Em seguida, é montada a string que será passada para o programa PHP, com base nos dados informados nos campos do formulário (linhas 11-15) e da operação selecionada (op). Faz a requisição (linha 16), dispara o evento (linha 17) e checa se a requisição foi realizada com sucesso (linha 18).

Armazena a resposta no formato JSON em aDados (linha 19), verifica qual a operação realizada e se teve sucesso e exibe um alerta (linhas 20-22), limpa os campos do formulário (linhas 24-26) e seta o foco para o campo id (linha 28).

01 function executa(op) {
02   var erro = 0;
03   for (i=1;i<6;i++) {
04      if (document.form_cad.elements[i].value == '') { erro = 1; }
05   }
06   if (erro == 1) {
07      alert("VICHE! Tem Campo em Branco");
08      get_focus('id_nome');
09      return;
10   }
11   var dados = '';
12   for (i=0;i<7;i++) {
13      dados = dados + "c" + i + "=" + document.form_cad.elements[i].value + "&";
14   }
15   var dados1="rotina2.php?op="+op+"&"+dados;
16   xmlhttp.open("GET", "rotina2.php?op="+op+"&"+dados,true);
17   xmlhttp.onreadystatechange=function() {
18      if (xmlhttp.readyState==4) {
19         var aDados=eval((xmlhttp.responseText));
20     if (aDados[0] == 1 && aDados[1] == "OK") { alert("Registro Incluído") };
21     if (aDados[0] == 2 && aDados[1] == "OK") { alert("Registro Alterado") };
22     if (aDados[0] == 3 && aDados[1] == "OK") { alert("Registro Deletado") };
23      }
24      var campos = document.getElementsByTagName('input');
25      for (i=0;i<7;i++) {
26           campos[i].value = '';
27      }
28      get_focus('id_cad');
29   }
30   xmlhttp.send(null)
31 }

h) A função get_focus()

function get_focus(campo) {
document.getElementById(campo).focus();
}

O Programa PHP

Para não se extender muito, serei breve na explicação do programa cujo trecho inicial é apresentado abaixo.

• linha 2: são extraídos os parâmetros;
• linhas 4-5: conecta e seleciona o banco;
• linhas 6-9: verifica se a requisição partiu do link buscar e executa a função checa_entrada();
• linhas 10-37: verifica se a requisição partiu de um dos ícones incluir, alterar e excluir, substitui os caracteres “[", ' e "," utilizados no formato JSON, antes de gravar na tabela, e executa a função executa();
• linhas 38-41: verifica se a requisição partiu do ícone consultar e executa a função consulta();
• linhas 42-54: checa se o registro existe na tabela. Se não, retorna como resposta "['0','0']“. Se sim, retorna uma string semelhante em formato JSON com os dados do registro selecionado;
• A função consulta(), cujo código não é apresentado, seleciona os primeiros 50 registros da tabela e retorna um texto com o id dos registros;
• E a função executa(), idem, constitui-se dos comandos SQL – INSERT, UPDATE e DELETE -, conforme o ícone selecionado.

01 <?php
02 extract ($_GET);
03 extract ($_POST);
04 $conn = mysql_connect("localhost","usuário","senha") or die ("Erro de Acesso");
05 mysql_select_db ("banco");
06 if ($id) {
07    $resposta = checa_entrada($id);
08    echo $resposta;
09 }
10 if ($op) {
11    $c1 = str_replace(',', '', $c1);
12    $c2 = str_replace(',', '', $c2);
13    $c3 = str_replace(',', '', $c3);
14    $c4 = str_replace(',', '', $c4);
15    $c5 = str_replace(',', '', $c5);
16    $c6 = str_replace(',', '', $c6);
17    $c1 = str_replace('[', '', $c1);
18    $c2 = str_replace('[', '', $c2);
19    $c3 = str_replace('[', '', $c3);
20    $c4 = str_replace('[', '', $c4);
21    $c5 = str_replace('[', '', $c5);
22    $c6 = str_replace('[', '', $c6);
23    $c1 = str_replace(']', '', $c1);
24    $c2 = str_replace(']', '', $c2);
25    $c3 = str_replace(']', '', $c3);
26    $c4 = str_replace(']', '', $c4);
27    $c5 = str_replace(']', '', $c5);
28    $c6 = str_replace(']', '', $c6);
29    $c1 = str_replace("'", '', $c1);
30    $c2 = str_replace("'", '', $c2);
31    $c3 = str_replace("'", '', $c3);
32    $c4 = str_replace("'", '', $c4);
33    $c5 = str_replace("'", '', $c5);
34    $c6 = str_replace("'", '', $c6);
35    $resposta = executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6);
36    echo $resposta;
37 }
38 if ($con) {
39    $resposta = consulta();
40    echo $resposta;
41 }
42 function checa_entrada($id_c) {
43    $SEL = mysql_query("SELECT * from cadastro1 WHERE id = '$id_c'");
44    $res = mysql_fetch_object($SEL);
45    if (!$res) {
46       $resposta = "['0','0']";
47    }
48    else {
49       $v = "','";
50       $resposta = "['".$res->id.$v.$res->nome.$v.$res->nome_mae.$v.$res->nome_pai
51       $resposta .= $v.$res->cidade_nasc.$v.$res->pais.$v.$res->telefone."']";
52    }
53    return $resposta;
54 }
55 function executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6) {
56 ...
57 }
58 function consulta() {
59 ...
60 }
61 ?>

O VICHE entrou definitivamente no espírito da Copa. Primeiro com pequenas mudanças no layout padrão – o qual pode ser “recuperado” na barra lateral de navegação no rótulo Temas -, e agora com um experimento que disponibiliza a tabela de jogos da primeira fase da competição, feito com a ferramenta AJAX.

O experimento é composto de consultas que se utilizam:

• do CSS Framework de Mike Stenhouse, com adaptações;
• de três tabelas MySQL (seleções, jogos e fases);
• de um programa em PHP; e
• de uma rotina bem simples em AJAX.

Os dados e os ícones das bandeiras dos países, apresentados no experimento, foram obtidos no site oficial da FIFA. A única mudança foi a dos horários dos jogos, com a redução de 5 horas correspondente ao fuso entre o Brasil e a Alemanha.

BRASIL HEXA!!! A emoção vai começar e a nossa torcida também.

Como uma pequena retribuição ao aprendizado obtido por mim e que, com certeza, ainda obterei, com os excelentes artigos e tutorais publicados no iMasters por seus articulistas e sua equipe, registro, com grande prazer, a sua adesão aos padrões Web.

Para conhecer os detalhes de como se deu todo o processo de migração, nada melhor do que visitar o blog do Maujor que publicou, com exclusividade, uma bela entrevista com o jovem André Metzen do iMasters, responsável direto pela codificação. Ambos, o entrevistador e o entrevistado, estão de parabéns.

Ainda mais, foi lá no iMasters, que passei a conhecer um dos mais completo site brasileiro sobre CSS e Web Standards.

Registro e submeto às críticas e sugestões meu primeiro experimento com a ferramenta AJAX. Atualmente, sou aluno do módulo AJAX I do curso online da Visie Treinamentos Web.

O experimento tem como objetivo demonstrar algumas funcionalidades dessa ferramenta sem a preocupação de um tratamento rigoroso de alguns procedimentos normalmente exigidos em uma aplicação comercial.

Trata das velhas e conhecidas operações de manutenção de uma tabela de dados – incluir, alterar, excluir e consultar -, bem simples, onde utilizo a técnica de passagem de parâmetros através da URL (“?’ e “&”) para um programa PHP que se encarrega de operacionalizar, do lado do servidor, essas tarefas. É claro que poderia ser adotado outros mecanismos para a passagem de parâmetros.

As respostas do programa PHP são retornadas no formato JSON. Por esta razão os caracteres “[", "]“, ‘ e “,” são eliminados dos campos antes da gravação na tabela.

Pela simplicidade da rotina desenvolvida não vale a pena me alongar em explicitar detalhes. Veja funcionando e dê o seu feedback. Fico na esperança de que tenha alguma utilidade.

Em vista do número de visitas ao VICHE originadas a partir dos dois últimos trabalhos publicados por mim, resolvi disponibilizar aqui seus links de acesso:

1. Blix Theme: publicado no CSS Table Gallery, de Chris Heillman. Experimento destinado a exercitar sua criatividade manipulando uma tabela 100% por CSS;
2. Snowdrop: tema publicado no Gigastyle, de Mark Creeten. Baseado na idéia original do CSS Zen Garden, de Dave Shea. Inspirado no tema Farol publicado no Revolução do CSS e nas cores da bandeira brasileira já que estamos em tempo de Copa do Mundo de Futebol.