Publicado por (7) Comentários
Tomei conhecimento do tema BloxPress 2.0 desenvolvido em AJAX por Kjell Bublitz e fiz sua instalação no VICHE. Trata-se de um excelente trabalho e em constante aperfeiçoamento pelo autor, como se pode depreender do fórum construído especificamente para discutir o tema. Para vê-lo em funcionamento selecione-o na barra lateral de navegação na aba Temas.
BloxPress é um tema totalmente modular e altamente extensível. O nome escolhido para o tema é decorrência da maneira como ele trabalha. No lugar de ter barra de navegação (sidebar) estática é utilizado o conceito de blocos – pequenas partes de conteúdo – que podem ser arrastados (drag-and-drop), fechados, minimizados e adicionados, de modo a permitir que você defina como deseja visualizar o Blog.
Utiliza as mais recentes tecnologias em desenvolvimento Web – Bibliotecas JavaScript Prototype, Behaviour e Script.aculo.us – visando fornecer o máximo de compatibilidade.
A configuração default do tema pode ser vista na página demo disponibilizada por seu autor. Compare com a exibida no VICHE e observe que foram introduzidas várias modificações com a criação de novos blocos, posicionamento diferenciado dos blocos fornecidos e uma parte estática na barra lateral direita.
É necessário ainda fazer alguns ajustes mas já dá para você se divertir. Melhor visualizado em 1024 x 768 ou superior em função de imagens que utilizo no blog com comprimento superior à 400 pixels.
Observação: Por enquanto o menu add blocks funciona corretamente apenas no Firefox, entre os testados por mim.
Publicado por (3) Comentários
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.
O experimento consiste de:
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.
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.
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();
}
Para não se extender muito, serei breve na explicação do programa cujo trecho inicial é apresentado abaixo.
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 ?>
Publicado por (5) Comentários

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:
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.
Publicado por (185) Comentários
INTRODUÇÃO
No artigo publicado em 23 de fevereiro de 2006, aqui no VICHE, abordei a definição e propriedades da potenciação. Caso você não tenha o domínio desse assunto, sugiro a sua leitura, visando uma melhor compreensão do que será exposto a seguir. O interesse demonstrado pelo tema foi e ainda permanece considerável, tomando-se por base o número de visitas ao artigo (1030 até o momento em que escrevia este post, segundo dado estatístico fornecido pelo software Webalizer). Agora, dando continuidade, trataremos da radiciação de números relativos e expressões algébricas.
Serão tratados os conceitos e propriedades da radiciação sob o ponto de vista primordialmente teórico, como no da potenciação, acrescidos de alguns exemplos. No entanto, caso seja demonstrado interesse, estarei criando uma seção específica (aceito sugestões para o seu nome) com o objetivo de responder, com o devido detalhamento, a questões e dúvidas colocadas nos comentários ou enviadas para o E-Mail nghorta@brturbo.com.br. As soluções serão fornecidas dentro do mesmo padrão aqui adotado, uma vez que é praticamente inviável de serem apresentadas diretamente no formulário dos comentários, devido às restrições ali impostas.
Apenas uma ressalva: por limitação de tempo, pois tenho que ganhar o pão nosso de cada dia, do trabalho que dar escrever artigos de matemática (estou “matutando” escrever um post sobre este fato) e em função da demanda, talvez não tenha condições de responder a todas as dúvidas e questões. Porém, prometo fazer todo o esforço necessário para não deixar nenhuma de fora. Por último, solicito que as questões sejam elaboradas da forma mais clara possível e se reportem, preferencialmente, ao assunto que está sendo tratado – no caso radiciação.
DEFINIÇÃO
Radiciação de números relativos é a operação inversa da potenciação. Ou seja,
Em outros termos, dado um número relativo a denominado radicando e dado um número inteiro positivo n denominado índice da raiz, é possível determinar outro número relativo b, denominado raiz enésima de a (ou raiz de índice n de a), representada pelo símbolo , tal que b elevado a n seja igual a a.
Antes de partir para o próximo tópico – as propriedades da radiciação – algumas observações importantes e exemplos:
Exemplos:

PROPRIEDADES
Apenas algumas das propriedades abaixo serão demonstradas, deixando a verificação das demais como exercício. Havendo manifestação de interesse poderei publicar um post específico com a verificação das propriedades não apresentadas.
P1. A raiz enésima do produto a.b é igual ao produto das raízes enésimas de a e b:
Demonstração:
Da definição de radiciação, temos que:
Por outro lado, utilizando-se a propriedade da potência de grau n de um produto, e, novamente, a definição de radiciação, obtemos:
Como se vê dos passos anteriores, foi demonstrado que ambos os lados da igualdade da propriedade elevado ao expoente n é igual ao produto a.b. Portanto, a base dessas potências são necessariamente iguais e a verificação da propriedade está concluída.
Aplicação prática da Propriedade (simplificação de radicais):
P2. O produto das raízes de a e de b com o mesmo índice n é igual a raiz enésima do produto a.b (note que esta propriedade é a recíproca de P1. Nas demais propriedades a recíproca também é válida. Esclarecimentos do que se entende por recíproca você pode obter no artigo sobre Potenciação ):
A demonstração de P2 é semelhante à de P1.
P3. O quociente de raízes de mesmo índice n é igual a raiz enésima do quociente dos radicandos:
P4. A potência de grau m da raiz de índice n de a é igual a raíz de índice n de a elevado à potência m:
Demonstração:
Para demonstrar a propriedade P4 utilizarei a técnica de demonstração por indução sobre m, considerando n fixo, que consiste em:
1. A propriedade é verdadeira para m = 0, pois
2. Considerando que P4 é verdadeira para m = p, m > 0, isto é:
provemos que é verdadeira para m = p + 1, ou seja:
De fato:
Observe que na expressão acima utilizamos a hipótese (verdadeira para m = p), a propriedade P2 e a propriedade de produtos de potências de mesma base.
3. Considerando agora m < 0 façamos -m = q > 0, então:
Na expressão acima foram utilizadas a propriedade de potência de expoente negativo, a hipótese, a propriedade P3 e regra de divisão de frações.
P5. A raiz de índice m de uma raiz de índice n de a é igual à raiz de índice mn de a:
P6. A raiz enésima de a elevado a m é igual a raiz de índice p.n de a elevado a p.m obtida multiplicando-se o índice e radicando por p. A mesma propriedade é válida para a divisão:
Exemplo: Redução de radicais ao mesmo índice
P7. A raiz de índice n da potência de grau m de a é igual à potência de grau m/n de a:
Demonstração:
Da propriedade P6, dividindo-se o índice e o radicando por n:
Exemplos:
É interessante observar que todas as propriedades de potências para expoentes inteiros positivos são válidas, também, para as potências de expoentes fracionários.
Referências:
Publicado por (8) Comentários
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.
Comentários