Muito sobre Matemática e nem tanto sobre CSS, PHP, AJAX, Javascript, Wordpress e outros assuntos

Javascript

2
ago

Plugin bvGallery - Manage EventsO bvGallery é um simples plugin para WordPress, se comparado com outros existentes e disponibilizados com tal objetivo, destinado, como seu próprio nome indica, a publicar posts com galeria de imagens.

Mesmo sabedor da existência de muitos outros, o seu desenvolvimento foi realizado com a finalidade básica de aprendizagem para seu autor.

Utiliza em sua constituição:

  1. A biblioteca jQuery 1.3.2;
  2. o plugin prettyPhoto, a jQuery lightbox clone de Stéphane Caron;
  3. o plugin tabs da biblioteca jQuery Tools;
  4. a class dUnzip2.php de Alexandre Tedeschi.

Possui arquivos de tradução – po/mo – para o inglês (en). Como leio bem melhor do que escrevo é possível que tenha erros na tradução.

Índice
» Informações sobre o Plugin

Finalidade:
» Criar e Publicar Galerias de Imagens .

Versão:
» 1.0

WP:
» Testado somente na versão 2.8.2.

Download:
» http://www.blogviche.com.br/download/6/

Referências:
» Indicadas acima.

Recomendação:
» Utilize, se possível, uma área que não a do blog, para a realização dos testes de funcionalidade do plugin.

Sugestões:

» Sugestões para melhoria e correções são benvindas e podem ser feitas através do formulário de contato do blog Viche ou de comentário neste post.

Atualizações
Instalação
» Instruções de Instalação

  1. Descompacte o arquivo bvGallery.zip na pasta wp-content/plugins do seu blog. Será criada a pasta bvGallery;
  2. Ative o plugin. Será criada a pasta wp-content/bvGallery com permissões para uploads e que comportará suas galerias;
  3. É, ainda, disponibilizado o template bvGallery-template.php para criar uma página de exibição de suas galerias. Ele deve ser copiado da pasta do plugin para a pasta de seu tema wp-content/themes/nome-do-seu-tema e ajustado, uma vez que está escrito de acordo com as características do tema utilizado no blog Viche. Veja em funcionamento na página Galerias.
  4. Acesse a aba Uso para maiores instruções.

Upgrade
Uso
» Instruções de Uso

  1. Para publicar um post com a galeria cadastrada é suficiente colocar, na posição que desejar, o seguinte: [bvGallery=id_do_evento]. O id_do_evento é exibido na lista de eventos do módulo de administração do plugin. Apesar de funcionar com a sintaxe indicada, recomendo, por questões de compatibilidade com os padrões, a sintaxe ‹div›[bvGallery=id_do_evento]‹/div›;
  2. O plugin disponibiliza uma maneira automática de criação de posts.

Screenshots

Evento: Plugin bvGallery

Screenshots do Plugin

Demo 1

Evento: Férias em Fortaleza - Julho de 2009

Demo 2

Evento: Dinossauro das CSS

Livros publicados por Maurício Samy Silva, o grande Maujor.

Galeria exemplo composta de cinco imagens, sendo as três primeiras no formato jpg, a quarta no formato png e a última no formato gif, com as miniaturas no tamanho 100 x 75 pixels.

Categoria : Javascript | PHP | Técnico | WordPress | Blog
21
jul

A galeria de fotos foi montada utilizando-se:

As fotos foram feitas no pequeno período de 13 a 20/07/2009 em que estive em Fortaleza e mostram alguns lugares turísticos da minha bela terra natal.

O objetivo da galeria é mais para exibir uma aplicação do execelente plugin prettyPhoto.

Evento: Férias em Fortaleza - Julho de 2009

[Atualização 03/08/2009] Galeria republicada com o uso do plugin bvGallery para Wordpress, desenvolvido após a publicação deste post.

Categoria : Fotos | Javascript | Pessoal | Blog
14
out

No desenvolvimento do tema foram utilizados:

  • A biblioteca jQuery 1.1.2;
  • E o plugin Accordion 1.3.

A versão atual do plugin é a 1.5 e a substituição da anterior por esta não apresentou o mesmo comportamento obtido no tema, devido, certamente, a novas características implementadas por seu autor.

O uso da versão 1.3 se justifica, no meu caso, por já tê-la aplicado na construção do menu do site da empresa na qual trabalho. Creio que não haja grandes dificuldades para a migração.

Por fim, um fato a ser observado é que se você utiliza outra biblioteca, como a prototype, por exemplo, é necessário substituir no arquivo accordion.js o “$” por “jQuery” para evitar possíveis conflitos. O arquivo com a alteração mencionada é disponibilizado no final do post para download juntamente com a biblioteca jQuery.

Criando o Tema

Primeiro foi incluído o código abaixo na tag head do arquivo header.php.

<script type="text/javascript" src="<?php bloginfo('url') ?>/pasta_do_arquivo/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('url') ?>/pasta_do_arquivo/accordion.js"></script>

Em seguida inserido, ainda na head, o código abaixo para criar as instâncias Accordion da sidebar a partir da lista não ordenada #theMenu e do conteúdo do blog a partir da div #conteudo, que são iniciadas quando a página é carregada. Para quem não sabe o jQuery().ready é equivalente ao window.load.

<script type="text/javascript">
   jQuery().ready(function(){
   // applying the settings
      jQuery('#theMenu').Accordion({
         header: 'h2.head',
         alwaysOpen: false,
         animated: true,
         showSpeed: 400,
         hideSpeed: 800
      })
   });

   jQuery().ready(function(){
   // applying the settings
      jQuery('#conteudo').Accordion({
         header: 'h2.head',
         active: false,
         alwaysOpen: false,
         animated: true,
         showSpeed: 400,
         hideSpeed: 800
	  });
   });
</script>

A opção header indica o seletor onde se iniciam os conteúdos de cada item a ser (ou não) exibido de acordo com o que é clicado pelo usuário, o evento default do plugin. O evento “click” pode ser alterado acrescentando-se a opção event: ‘mouseover’, por exemplo.

A opção alwaysOpen é setada como false de modo a evitar que sejam executados os permalinks existentes nos títulos dos posts, não retirados do tema, e fazer com que o conteúdo seja exibido na mesma página. Na sidebar não surte nenhum efeito pois o tema não possui links em seus itens.

As três últimas opções – animated, showSpeed e hideSpeed – são auto-explicativas.

Na parte de conteúdo do blog foi utilizada a opção active: false, para a instância Accordion correspondente, para que nenhum artigo fique aberto quando a página estiver totalmente carregada. Por default é aberto o primeiro filho (item 0) da instância. Caso necessite abrir o item 6 do menu como default, por exemplo, use:


<script>
    jQuery().ready(function(){
        jQuery('#theMenu').activate(5);
    });
</script>

Parte da estrutura da sidebar do tema pode ser vista aqui e fornece a idéia de como ela foi construída.

Note que não tem nenhum mistério. Ressalvo apenas o uso do h2 com o em de modo a permitir a colocação do ícone com o ponto de exclamação no ínicio dos títulos e o sinal de + ou – à direita.

<h2 class="head"><em><a href="javascript:;">Posts de Matemática</a></em></h2>

Suponho que a maioria dos temas tenham essa estrutura na sidebar, infelizmente não era o meu caso, o que implicou em alterações nas folhas de estilo, mas nada que não tenha sido resolvido tranquilamente :-).

Por fim nos programas do tema que envolvem conteúdo proceda como indicado abaixo, onde é exibido um trecho da index.php.


<?php get_header(); ?>

<div id="content">
...
   <div id="conteudo">
...
      <h2 class="head"><a href="<?php the_permalink() ?>" title="Permalink"><?php the_title(); ?><a></h2>
...
   </div>
...
</div>

Se você ainda não observou foram adicionados alguns efeitos especiais. Por exemplo, ao clicar em uma das categorias do blog, ao exibir a página o menu correspodente permanece aberto. Tal efeito é obtido colocando-se o código abaixo no programa footer.php do tema.


<?php if (is_category()) { ?>
<script>
    jQuery().ready(function(){
        jQuery('#theMenu').activate(1);
    });
</script>

Isto posto, diga o que você achou levando-se em conta, também, questões de acessibilidade entre outras.

Download

Categoria : Javascript | PHP | Técnico | WordPress | Blog
29
set

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.

Categoria : AJAX | Javascript | PHP | Técnico | Blog
1
abr

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.

Aplicativo Questionarious

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

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.

Categoria : AJAX | Javascript | PHP | Questionarious / Exercícios Resolvidos | Técnico | Blog
25
mar

Teste de Conhecimento em Potenciação e Radiciação

  • Cada pergunta vale um ponto e resposta errada não anula resposta certa. Boa Sorte!
  • (FATEC) Das três sentenças abaixo:

    A) 2x+3 = 2x.23
    B) (25)x = 52x
    C) 2x + 3x = 5x

    • Somente a sentença A) é verdadeira
    • Somente a sentença B) é verdadeira
    • Somente a sentença C) é verdadeira
    • Somente a sentença B) é falsa
    • Somente a sentença C) é falsa
    • Resposta/Solução
  • O valor da expressão:

    Raiz quadrada da Raiz quadrada da raiz quadra de 5

    é:

    • 51/6
    • 51/4
    • 51/8
    • 51/2
    • Nenhuma das respostas anteriores
    • Resposta/Solução
  • (GV-SP) A expressão (1/2)-3 + (1/2)-5 é igual a:
    • 40
    • (1/2)-8
    • -40
    • 1/40
    • Nenhuma das respostas anteriores
    • Resposta/Solução
  • Determine o valor da expressão:

    Expressão

    • 27
    • 29
    • 28
    • 210
    • 257
    • Resposta/Solução
  • (SANTA CASA - SP) O valor de (3-1 + 5-1)/2-1 é:
    • 1/2
    • 1/8
    • 4/15
    • 16/15
    • Nenhuma das respostas anteriores
    • Resposta/Solução
  • Simplificar o radical

    Simplificar o radical raiz quadrada de 576

    • 36
    • 26
    • 24
    • 34
    • 44
    • Resposta/Solução
  • Se n é um número inteiro e a é um número real positivo simplifique a expressão a2n+1.a1-n.a3-n
    • a4
    • an
    • a2n
    • a6
    • a5
    • Resposta/Solução
  • Efetue a operação

    Operação com radicais

    • 23
    • 34
    • 31/2
    • 33
    • 50
    • Resposta/Solução
  • (PUC - SP) O produto am.am é igual a:
    • a
    • am-n
    • a2m
    • am2
    • Nenhuma das respostas anteriores
    • Resposta/Solução
  • (UMC - SP) Seja

    Questão 10

    O valor de n é:

    • 1
    • 2
    • 3
    • 4
    • Nenhuma das respostas anteriores
    • Resposta/Solução

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

Categoria : AJAX | CSS | Exercícios Propostos | Javascript | Matemática | PHP | Questionarious / Exercícios Resolvidos | Técnico | Blog
5
jan

Inicio o ano de 2007 com essa curiosidade, com a qual me deparei no site Matemática? Absolutamente!, batizada por seu autor de Quadros Adivinhos. Talvez uma velha conhecida de muita gente, mas ideal para o propósito estabelecido por mim de publicar um post mais ameno, e penso, interessante, para começar “devagarzinho” (ou é “devagarinho”?) o novo ano. Como no processo bafejado aos ventos, comumente denominado de “esquentar as turbinas”.

A página em questão, desenvolvida com a ferramenta Flash (não conheço “bulhufas” da danadinha), fornece uma explicação sobre a montagem dos 8 quadros utilizados para adivinhar um número, pensado por você, entre 0 e 250, e de como estender o limite máximo de escolha para 511 e 1023.

O princípio da montagem dos quadros (ou tabelas) se baseia no fato de que todo número natural pode ser escrito como a soma de potências de base 2, como dito por lá – no site, claro! Ou em outras palavras, na conversão de números naturais – base decimal – para base 2 ou binária.

A adivinhação consiste em responder, passo-a-passo, se o número está ou não em cada uma das 8 tabelas apresentadas, e após a última é exibido o resultado, ou seja, o número pensado por você. Se as respostas fornecidas forem lúcidas, honestas e corretas não tem falha, a nota é 10 sempre (bingo!).

Você, na altura do campeonato, deve estar se perguntando: se a “coisa” está lá feita e em funcionamento, o que “este cara” quer? Quero apresentar o mesmo experimento só que com a rotina desenvolvida em JavaScript e com os três intervalos acima mencionados (0 a 255, 0 a 511 e 0 a 1023) para a escolha do número pensado por você.

O Algorítimo Utilizado

Certamente deve ser o mesmo utilizado no Matemática? Absolutamente!. Mas como não da para saber, vamos lá! Consideraremos o primeiro intervalo, uma vez que para os demais a construção é feita por pura e genuína generalização deste, para as devidas explicações.

Passo 1 – Como é notório e sabido por todos, o número natural 255 é igual a 11111111 (oito Carolinas, lembra da música, “encarrilhados”) em binário ou base 2. Ou seja:

(11111111)2 = (255)10 = 27 + 26 + 25 + 24 + 23 + 22 + 21 + 20 = 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1

Passo 2 – O fato nos sugere que as oito tabelas necessárias, no caso do intervalo considerado, iniciem com uma das potências de 2. Isto é, a primeira com o número 1, a segunda com o 2, a terceira com o 4, e assim sucessivamente até cessar, a oito com o 128.

Passo 3 – Os demais números que compõem cada uma das 8 tabelas, exibidos em ordem crescente, são determinados a partir da sua representação binária da seguinte forma: se a primeira posição, da direita para a esquerda, é igual a 1 ele é exibido na primeira tabela, se a segunda posição, na mesma ordem é 1, ele será exibido na segunda, e assim por diante. Por exemplo, o número 255 será mostrado nas oito tabelas e o número 15, cuja representação binária é 00001111, será exibido nas quatro primeiras tabelas e não nas restantes (os zeros à esquerda é só para facilitar o entendimento, viu!).

Passo 4 – Como você é bastante esperto, já percebeu como o resultado é obtido: é suficiente somar (cumulativamente, claro), a cada resposta “sim” a primeira posição da tabela, que nada mais é do que uma potência de 2. Mais uma vez uns exemplos para clarear as idéias:

  • Se você pensou no 255, terá que necessariamente responder “sim” para as oito tabelas, o que equivale à soma acima apresentada;
  • No outro extremo, se o número escolhido foi o zero, todas as respostas são “não”, e portanto o resultado será igual ao valor inicial atribuído, que é zero que eu não sou “besta” :-);
  • E, finalmente, se o número escolhido é o 20 (dia do meu aniversário), cuja representação binária é 00010100, ele aparecerá somente nas tabelas 3 e 5, cujos primeiros números são, respectivamente, 4 e 16.

Não precisava, mais eu vou dizer, que para os outros dois intervalos é só acrescentar as potências de graus 9 e 10 de 2, respectivamente, e seguir os passos 1 a 4 com os devidos ajustes.

A Rotina JavaScript

  • Inicialmente é exibida uma caixa de seleção, onde você deve escolher o intervalo do número a ser pensado;
  • Feito isto, é exibida a primeira tabela, composta de todos os números ímpares dentro do intervalo selecionado (preciso explicar?), com a fatídica pergunta: “O número que você pensou encontra-se na tabela 1?”, seguida das respostas “Sim” ou “Não” com um link cada que, como eu disse, você deve clicar com a mais pura e sagrada honestidade;
  • E o processo é repetido até a oitava (primeiro intervalo), até a nona (segundo intervalo) e até a décima (terceiro intervalo) tabela que são numeradas em vermelho para você não se perder :-), onde, não esqueçam, pelo “amor de Deus”, você deve responder clicando, mais uma vez, honestamente, no “Sim” ou no “Não”;
  • E, aí, eis que surge, fagueiro, o resultado mágico, mas esperado, você há de concordar.

Não vou dissertar sobre o código – avisei no começo – mas se você quiser ver e analisar dentro da ótica do aprendizado (meu caso, ao desenvolver) mais do que a da utilidade, ela se encontra “embutida” na página do experimento. Ou então, como “canja” de início de ano, clique aqui (péssimo isto, não?) para exibí-la.

E, para encerrar, mais uma vez, desejo a todos muita paz, muito amor, muitas realizações, …, e muito Viche em 2007. Axé!

Categoria : Curiosidades | Javascript | Matemática | Técnico | Blog
24
dez

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.

Categoria : AJAX | Javascript | PHP | Técnico | Blog
12
out

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

Categoria : AJAX | CSS | Javascript | PHP | Técnico | Web | WordPress | Blog