Após algum tempo longe do blog estou de volta, tentarei manter postagens sempre que possível e responderei todos os comentarios deixados aqui.

por enquanto é isso, até breve!
acompanhe também no twitter: zimar

Bem pessoas, o fato qual me levou a desenvolver este menu foi a necessidade de manter um controle no mesmo, podendo fechar e abrir o mesmo item do submenu, tudo isso usando ul li, direto ao ponto.

Primeira coisa a fazer, como verificar qual menu estava aberto antes do reload?
A solução para isso foi gravar o menu em cookie para verificação, segue abaixo as funções para criar e recuperar o cookie.

Função para recuperar o cookie:

/**
 * Retorna o valor do cookie
 * @autor Deusimar Ferreira
 * @param string name
 */
getCookie = function(Name){
	var re=new RegExp(Name+"=[^;]+", "i");
	if (document.cookie.match(re))
		return document.cookie.match(re)[0].split("=")[1];
	return null;
}

Função para criar e setar o valor do cookie:

/**
 * Define cookie
 * @autor Deusimar Ferreira
 * @param string name
 * @param string|int value
 */
setCookie = function(name, value){
	document.cookie = name + "=" + value;
}

Cirei um atributo para meu submenu chamado de menuIndex.

// Pega submenus
var subContents = $('#menu li ul');

// Percorre o menu e adiciona indice
$("#menu li div a").each(function(index) {
	subContents.eq(index).attr({menuIndex: index + 'c'});
})

Este script contém os eventos accordion do menu, ele faz a verificação de qual submenu esta aberto e chama o evento, caso o item clicado esteja aberto ele será fechado ou inverso, caso seja outro item ele abre o item clicado e fecha os outros itens.

$("div a").click(function() {
	//$("#menu li ul:visible").slideUp("slow"); // Esocnde menu item que visivel
	//$(this).parent().next().slideToggle("slow"); // Mostra o menu item que recebeu o evento click		

	// Criar objeto gobal do parent span a
	var _this = $(this).parent().next();

	// Percorre o menu para verificar as ações que deve ser executada
	// Verifica qual submenu deve ser fechado e qual será aberto
	$("div a").each(function(index){
		if ($('#menu li ul:eq(' + index + ')').attr('menuIndex') != _this.attr('menuIndex')) {
			// Verifica se exite algum submenu que não seja o que recebeu o evento do click aberto
			if ($('#menu li ul:eq(' + index + ')').is(':visible'))
				$('#menu li ul:eq(' + index + ')').slideUp("slow"); // Esocnde submenu item que visivel
		} else {
			(_this.is(':visible')) ? _this.slideUp("slow") // Esocnde submenu item que visivel
					       : _this.slideDown("slow"); // Mostra o submenu item que recebeu o evento click
		}
	})

	// Retorna falso funciona como um pause
	return false;
})

Neste outro script ao fechar a página ele recuperar o índice do menu e cria um cookie com seu valor.

// Evento window unload
$(window).bind('unload', function(){
	$('#menu li ul').unbind(); // Remove eventos
	var expandeIndices = []; // Array indice

	$("#menu li ul:visible").each(function(index){
		// Insere o valor do menuindex no array
		expandeIndices.push($(this).attr('menuIndex'));
	})

	expandeIndices = (expandeIndices.length == 0) ? '-1c' : expandeIndices;
	setCookie('menuIndex', expandeIndices); // Seta o cookie e seu respectivo valor
})

Pega o valor do cookie e mantém o respectivo submenu aberto.

// Verifica o cookie para ver qual submenu deve ser mostrado
$("#menu li ul").each(function(){
        // Mostra o submenu
	if ($(this).attr('menuIndex') == getCookie('menuIndex')) {
		$(this).show();
	} else { // Esconde o restante
		$(this).hide();
	}
})

Eis o script completo:

$(document).ready(function() {
	/**
	 * Retorna o valor do cookie
	 * @autor Deusimar Ferreira
	 * @param string name
	 */
	getCookie = function(Name){
		var re=new RegExp(Name+"=[^;]+", "i");
		if (document.cookie.match(re))
			return document.cookie.match(re)[0].split("=")[1];
		return null;
	}

	/**
	 * Define cookie
	 * @autor Deusimar Ferreira
	 * @param string name
	 * @param string|int value
	 */
	setCookie = function(name, value){
		document.cookie = name + "=" + value;
	}

	/**
	 * Accordion Menu
	 * @autor Deusimar Ferreira
	 * @param #menu li ul
	 * @param #menu li div a
	 */
	if (typeof expandeIndices == 'string')
		expandeIndices = expandeIndices.replace(/c/ig, '').split(',') // Transfoma string value em array (ie: "c1,c2,c3" becomes [1,2,3]

	// Pega submenus
	var subContents = $('#menu li ul');

	// Percorre o menu e adiciona indice
	$("#menu li div a").each(function(index) {
		subContents.eq(index).attr({menuIndex: index + 'c'});
	})

	// Apresenta apenas o primeiro menu list
	$('#menu li ul:not(:first)').hide();
	$("div a").click(function() {
		//$("#menu li ul:visible").slideUp("slow"); // Esocnde menu item que visivel
		//$(this).parent().next().slideToggle("slow"); // Mostra o menu item que recebeu o evento click		

		// Criar objeto gobal do parent span a
		var _this = $(this).parent().next();

		// Percorre o menu para verificar as ações que deve ser executada
		// Verifica qual submenu deve ser fechado e qual será aberto
		$("div a").each(function(index){
			if ($('#menu li ul:eq(' + index + ')').attr('menuIndex') != _this.attr('menuIndex')) {
				// Verifica se exite algum submenu que não seja o que recebeu o evento do click aberto
				if ($('#menu li ul:eq(' + index + ')').is(':visible'))
					$('#menu li ul:eq(' + index + ')').slideUp("slow"); // Esocnde submenu item que visivel
			} else {
				(_this.is(':visible')) ? _this.slideUp("slow") // Esocnde submenu item que visivel
									   : _this.slideDown("slow"); // Mostra o submenu item que recebeu o evento click
			}
		})

		// Retorna falso funciona como um pause
		return false;
	})		

	// Evento window unload
	$(window).bind('unload', function(){
		$('#menu li ul').unbind(); // Remove eventos
		var expandeIndices = []; // Array indice

		$("#menu li ul:visible").each(function(index){
			// Insere o valor do menuindex no array
			expandeIndices.push($(this).attr('menuIndex'));
		})

		expandeIndices = (expandeIndices.length == 0) ? '-1c' : expandeIndices;
		setCookie('menuIndex', expandeIndices); // Seta o cookie e seu respectivo valor
	})		

	// Verifica o cookie para ver qual submenu deve ser mostrado
	$("#menu li ul").each(function(){
		if ($(this).attr('menuIndex') == getCookie('menuIndex')) { // Mostra o submenu
			$(this).show();
		} else { // Esconde o restante
			$(this).hide();
		}
	})
})

Folha de estilo css:

div {
	font-family: Verdana, Arial;
	font-size: 11px;
	font-weight: bold;
	margin: 1px 0px;
	padding: 0px;
	border: 1px #06c solid;
	background-color: gray;
}

ul {
	list-style-type: none;
	max-width: 202px;
	_width: 200px; /* Adivinha para quem serve essa linha - Claro que é o IE! */
}

#menu li {
	margin: 0px 0px;
}

#menu li ul{
	margin: 0px;
	padding: 1px 5px;
	display: none;
}

#menu li div a{
	text-decoration: none;
	outline: none;
	line-height: 18px;
	padding: 1px 4px;
	color: white;
}

a {
	font-family: Verdana, Arial;
	font-size: 11px;
	text-decoration: none;
	outline: none;
	padding: 1px 4px;
	color: #06c;
}

a:hover {
	font-family: Verdana, Arial;
	font-size: 11px;
	text-decoration: underline;
	outline: none;
	padding: 1px 4px;
	color: #06c;
}

Estrutura do menu em lista não ordenada, ul li:

<ul id="menu">
	<li>
		<div><a href="">JQuery Documentation</a></div>
		<ul id="submenu">
			<li><a href="http://docs.jquery.com/Main_Page" target="blank" title="Documentation">Documentation</a></li>
			<li><a href="http://docs.jquery.com/Tutorials" target="blank" title="Tutrorials">Tutrorials</a></li>
		</ul>
	</li>

	<li>
		<div><a href="">Player Game</a></div>
		<ul id="submenu">
			<li><a href="http://www.cdt.unb.br/memoria" title="Memória Empreendedora">Memória Empreendedora</a></li>
			<li><a href="" title="Memória Empreendedora">Memória Empreendedora</a></li>
		</ul>
	</li>

	<li>
		<div><a href="">Sobre</a></div>
		<ul id="submenu" style="border-bottom: 1px #06c solid;">
			<li><a href="http://zimar.wordpress.com/about/" title="Sobre Me">Sobre Me</a></li>
			<li><a href="http://docs.google.com/View?docid=ddft82q4_42hmpmmcgv" title="Curriculum">By Curriculum</a></li>
		</ul>
	</li>
</ul>

é isso ai, qualquer dúvida, pergunte!

O CPF é composto por onze dígitos, onde os dois últimos são os dígitos verificadores, que são criados a partir dos nove primeiros.

O cálculo é efetuado em duas etapas utilizando o número 11 como módulo divisor.

Para exemplificar melhor, iremos calcular os dígitos verificadores de um CPF imaginário, por exemplo, 123.123.123-XX.

Primeiro pega-se os nove primeiros dígitos multiplica pelo decréscimo de 10, depois some os valores obtidos.

Ex:
soma = 1*10 + 2*9 + 3*8 + 1*7 + 2*6 + 3*5 + 1*4 + 2*3 + 3*2;

Agora pegue o resultado da soma e faça a divisão por 11.

Ex:
divisao = soma / 11;

O resultado da divisão será 9 quociente e 3 de resto, faça a subtração de 11 pelo resto da divisão.

Ex:
dv = 11 - 3;

O primeiro digito verificador será 8, agora multiplique 8 por 2.

Ex:
digito = 8*2;

Agora vamos calcular o segundo digito verificador, dessa vez iremos multiplica os nove primeiros dígitos pelo decréscimo
de 11 e soma com o resultado de 8*2.

Ex:
soma= 1*11 + 2*10 + 3*9 + 1*8 + 2*7 + 3*6 + 1*5 + 2*4 + 3*3 +8*2;

Agora pege o resultado da soma e faça a divisão por 11.

Ex:
divisao = soma / 11;

O resultado da divisão será 12 quociente e 4 de resto, faça a subtração de 11 pelo resto da divisão.

Ex:
dv = 11 - 4;

O segundo digito verificador será 7.

O resultado final será = 123.123.123-XX

Veja abaixo exemplo que fiz em php.

Boa tarde,

Nessa tarde tive a necessidade de retirar acentos em palavras para gerar um codigo, que reune, quatro digitos numéricos, primeiro nome da pessoa e ano corrente, como existem varios nomes com acentos como José, João entre outros, criei esta função em javascript que troca os caracteres acentuados por caracteres sem acento e o retorna em caixa alta.

Ex:
O nome joão ficará assim – JOAO

Utilizei como base a função feita pelo João Melo.

function strReplaceChr(texto) {
	var chrEspeciais = new Array("á", "à", "â", "ã", "ä", "é", "è", "ê", "ë",
				     "í", "ì", "î", "ï", "ó", "ò", "ô", "õ", "ö",
				     "ú", "ù", "û", "ü", "ç",
				     "Á", "À", "Â", "Ã", "Ä", "É", "È", "Ê", "Ë",
				     "Í", "Ì", "Î", "Ï", "Ó", "Ò", "Ô", "Õ", "Ö",
				     "Ú", "Ù", "Û", "Ü", "Ç");
	var chrNormais = new Array("a", "a", "a", "a", "a", "e", "e", "e", "e",
				   "i", "i", "i", "i", "o", "o", "o", "o", "o",
				   "u", "u", "u", "u", "c",
				   "A", "A", "A", "A", "A", "E", "E", "E", "E",
				   "I", "I", "I", "I", "O", "O", "O", "O", "O",
				   "U", "U", "U", "U", "C");
	for (index in chrEspeciais) {
		texto = texto.replace(chrEspeciais[index], chrNormais[index]);
	}

	return texto.toUpperCase();
}

Eis mais um acrescimo para meu portfolio, este game foi desenvolvido na plataforma web, usando, PHP5, Mysql e Ajax. A finalidade deste aplicativo é auxiliar no aprendizado e inclusão digital de empreendedores.

Este projeto foi desenvolvido pelo Centro de Apoio ao Desenvolvimento Tecnológico – CDT/UnB em parceria com o Ministério do Desenvolvimento, Indústria e Comércio Exterior.

Visite www.cdt.unb.br/memoria, e divirta-se.

Bem galera,
iniciando uma serie de artigos sobres esta fabulosa biblioteca js, o jQuery. Para fazer o download acesse jQuery.

Mãos na massa:

Primeiro vamos criar a nossa função que ira pegar os dados do formúlario e enviar via ajax, neste exemplo usarei a função $.post(url, data, callback).

$(document).ready(function() {
	$("#submit").click(function(){
		// Mostra tela Loding
		$('#loading').ajaxStart(function(){
			$(this).show();
		});

		$.post('jQuery.php', {
			nome: $('#nome').val(),
			email: $('#email').val(),
			tel: $('#tel').val()
		}, function(response) {
			$('#result').html(unescape(response));
			$('#result').fadeIn();
		});

		// Esconde Loading
		$("#loading").ajaxSuccess(function(){
			$(this).hide();
		});

		return false;
	});
})

Pega os parametos enviados pelo formulário, jQuery.php.

<?php
// Extrai os POST
extract($_POST);

// Mostra dados
echo "Nome: " . $nome;
echo "Email: " . $email;
echo "Tel: " . $tel;
?>

Unidos para que o Firefox 3 bata o récorde mundial de download.

Abracem esta idéia!

Seguindo no tema de websever portable, encontrei uma solução bastante enteressate para você levar suas JSPs para onde quiser. O Toncat portable é uma solução util e muito simples.

Para facilitar ainda mais, criei um pacote onde a unca coisa a fazer para rodar suas JSPs no pen-drive é descompacta os arquivos dentro do mesmo e clicar duas vezes em tomcat.exe e pronto.

Para efetuar o download do pacote:
http://rapidshare.com/files/93927807/Webserver_Portable.zip.html

Se prefirir configurar siga os passos encontrados no blog do Rafael Lossurdo, o link para baixar o tomcat2go está quebrado, use o link abaixo.

tomcat2go
http://www.4shared.com/file/37431868/28cd9ab7/tomcat2go-binaries.html

Auto start
Esta opção só funcionará caso não possua outras pasta ou arquivos no seu drive.
Abra o bloco de notas e coloque estes linhas abaixo.

[autorun]
open=tomcat.exe
icon=tomcat.exe
label=Tomcat portable

salve o arquivo com o nome AUTORUN.INF, observe que as extenção que deverá usar é .INF e não txt

Bem pessoal, essa eh uma ótima solução para que tem a necessidade de carregar sua aplicações de modo prático e portatil. O WOS é uma solução completa onde você pode escolher as versôes do Apache, Php e Mysql.

Para escolher as versões e efetuar o download do Wos Portable acesse:
download

Instalação
A instalação é bem simples, basta descompacta os aquivos de wosportable.zip em seu pen-drive, depois abra o diretório onde foi descompactado os arquivos e click no arquivo wos.exe, depois click no botão instalar, agora basta esperar alguns minutos e pronto, ao término da intalação o mysql e apche são iniciados.

Auto start
Esta opção só funcionará caso não possua outras pasta ou arquivos no seu drive.
Abra o bloco de notas e coloque estes linhas abaixo.

[autorun]
open=wos.exe
icon=wos.exe
label=Servidor Php

salve o arquivo com o nome AUTORUN.INF, observe que as extenção que deverá usar é .INF e não txt.

A finalidade deste exemplo é mostra para os iniciantes em ajax como é simples efetuar uma requisição usando o ajax.

A primeira coisa a fazer é verificar se o browser do cliente suporta o ajax e instânciar o objeto.

var ajax;
try {
  // Verifica se o Firefox, Opera 8.0+, Safari suporta o ajax
  ajax = new XMLHttpRequest();
} catch (e) {
  // Verifica se o Internet Explorer suporta o ajax
  try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("Seu browser não dar suporte ao AJAX!");
      return false;
    }
  }
}

Agora vamos processar nosso ajax, observe que neste exemplo estamos tratando o readyState 4, que seguinifica que a requisição foi bem sucedida.

// Processa requisição ajax
ajax.onreadystatechange = function() {
  if(ajax.readyState == 4) {
    document.getElementById('campoResposta').innerHTML = ajax.responseText;
  }
}
ajax.open('POST', 'time.php', true);
ajax.send(null);

Neste exemplo o ajax requisita uma página que contém uma função date(‘H:i:s’)
time.php

date('H:i:s')

Agora juntamos as partes do objeto ajax em uma função para efetuarmos a requisição.

function ajaxSend() {
  var ajax;
  try {
    // Firefox, Opera 8.0+, Safari
    ajax = new XMLHttpRequest();
  } catch (e) {
      // Internet Explorer
      try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Seu browser não dar suporte ao AJAX!");
          return false;
        }
      }
  }

  // Processa requisição ajax
  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      document.getElementById('time').innerHTML = 'Time: ' + ajax.responseText;
    }
  }
  ajax.open('POST', 'time.php', true);
  ajax.send(null);
}