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.

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

E, como não poderia deixar de ser, utiliza parte da codificação do excelente plugin postTabs, de autoria de Leo Germani.

As informações sobre o sidebarTabs a seguir é mais um exemplo de aplicação do plugin postTabs.

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

• 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

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

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.

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

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

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

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

Principais Características do Aplicativo

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

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

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

Problema não Resolvido

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

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

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

Outras Informações

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

Como Publicar o Questionário no WP

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

Considerações Finais

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

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

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

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

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

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

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

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

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.

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

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

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.

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

Posts relacionados trazidos a você pelo Yet Another Related Posts Plugin.