CSS

Dois artigos me conduziram mais uma vez a desenvolver um novo layout para o Viche, porém mantendo algumas características do anterior:

1. O artigo Faux Absolute Positioning de Eric Sol, e,
2. O sobre o plugin para WordPress Lead Manager (Gerenciador de Capas) desenvolvido pela equipe do Ministério da Cultura – Minc.

O primeiro aborda uma técnica sobre a construção de layout’s com o uso das CSS e o segundo os procedimentos de instalação e uso do plugin utilizado no site do Ministério da Cultura. Os detalhes podem ser obtidos nos links acima.

Antes de avançar um pouco mais sobre a descrição do tema, gostaria de parabenizar os autores do artigo e do plugin pelos trabalhos de excelente qualidade. Em especial à equipe do Minc em que tive o prazer de trabalhar por bastante tempo, como brevemente descrevo na página Sobre do blog. Como me desliguei do serviço público em 1997 não conheço, acho, nenhum dos membros da equipe atual.

Registro feito vamos em frente.

Como se trata de uma mania específica e quase compulsiva do autor do Viche de experimentar e por não saber se terá efeitos concretos o gerenciamento de capas em um blog sem as características de portal, caso do Minc, disponibilizei no final da primeira coluna da home um link e aqui também para o retorno ao tema anterior.

Para não haver distorção entre um e outro desenvolvi uma função, utilizada na capa Últimos Posts localizado na coluna do meio, para exibir apenas três e não prejudicar o loop original do WP, que está parametrizado para mostrar dez posts na página principal, caso você não goste deste tema ou se porventura venha a ocorrer algum problema uma vez que não tenho um histórico de como será o comportamento.

E se você foi e desejar retornar para o tema Viche Minc? Simples, clique aqui. Eita! que confusão! para, certamente, um número pequeno de leitores que testarão o vai-e-volta!

Finalmente, informo que utilizei os scripts jQuery do site do Minc para o drag-and-drop e o “abre-e-fecha” das capas, porém sem gravar cookies para “decorar” a possível customização feita pelo leitor, o que significa que ao recarregar a página inicial é exibido sempre o layout original.

No mais, se desejar, dê seu palpite.

[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.

Esse é o nome do mais novo Blog e Podcast da blogosfera brasileira voltado para temas relacionados à publicidade e também à publicitários, nas palavras de Renato Bontempo, um de seus cinco autores.

Tive a grata satisfação de contribuir com seu nascimento. Minha participação foi tão somente adaptar as CSS a partir do tema Default do WP 2.1 e o seu código, para obter o excelente design do blog elaborado por eles. Quem dera estivesse nesse estágio da arte!

E como o tema central tratado por lá é propaganda, não custa nada (e nem dói) eu fazer a minha, embora me considere coadjuvante no projeto.

Mesmo que o assunto não seja o seu “pedaço” e o site seja recém-nascido vale a pena visitar o Bicho de Goiaba – Propaganda e inutilidades afins.

Outra coisa que penso ser merecedora de menção é que o Viche agora pode ser acessado através do endereço http://www.blogviche.com.br graças a gentileza do Renato que registrou o domínio prá mim (não tenho CNPJ).

Por enquanto o endereço está sendo redirecionado para o antigo em função de fatores como o PR, FeedBurner, Alexa, Technorati, entre outros. Mas pelo menos tem a vantagem de ser mais fácil de “decorar”.

Acho que a interação com os “bam-bam-bans” da propaganda me afetou e antes que eu diga o que não deva, fui!

Uma excelente notícia neste final de ano de 2006 foi a decisão tomada pelo Maurício Samy de reativar o Zen Garden do Maujor.

Esse foi o caminho utilizado por mim quando iniciei meus estudos com CSS para por em prática a teoria sobre o assunto que também se encontra disponibilizada, em forma de tutoriais, no site do grande mestre.

Como sou fã de carteirinha dessa modalidade de exercício como meio de aprendizagem, reforço o convite do Maurício para você participar e ter seu tema publicado. Não sei quais os critérios a serem adotados, com a reativação, para que o fato ocorra.

Posso apenas dizer que na versão anterior não era levado em conta o design o que abria a oportunidade aos iniciantes em CSS de participar. Tenho quatro temas publicados e, se você quiser verificar, estão por lá (quase todos, acho) por pura complacência ou como forma de incentivo do Maurício. Independente de qual tenha sido a razão só me resta agradecer.

Mesmo que as regras tenham mudado, penso não ser o caso, recomendo fortemente que os iniciantes (ou não) ponham a “mão na massa” e utilizem o instrumental disponibilizado para aprender (ou exercitar seu potencial artístico). E neste sentido você só tem a ganhar.

Parabéns Maurício e conte comigo e com o Viche para que o Zen Garden do Maujor permaneça no ar.

[Atualização: 02/01/2007] E tem mais, o Maurício está promovendo um Desafio – Redesign do tema padrão do Zen Garden do Maujor, com prêmios para os três primeiros colocados, até o instante desta atualização. Para saber mais detalhes clique no link acima. Eu já enviei minha colaboração ao desafio: o tema Card Games. E você não vai enviar a sua?

O blog Mr. TheChessMan acaba de publicar o post Construindo um site inteiro seguindo os padrões, que consiste em montar ao vivo e a cores, passo a passo, o seu novo layout baseado nas técnicas Tableless, CSS e essa “baboseira” de WebStandards, nas palavras do próprio autor.

Uma ótima oportunidade de aprendizado para aqueles que estão a iniciar na área ou não. A técnica a ser adotada no desenvolvimento da experiência é a da modularidade das folhas de estilos (Tipografia, Estrutura, Elementos visuais gerais e Elementos específicos).

No momento da publicação desta notícia o blog encontrava-se “zerado”, ou seja, sómente com o XHTML sem nenhum CSS – texto puro.

Gostei da idéia e recomendo.

powered by performancing firefox

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

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.