Salve pessoal!

Gravei esse screencast baseado no mini-curso/palestra que estive apresentando durante esse ano com o título de Começando bem com Zend Framework.

O vídeo não tem edição, foi gravado direto, sem roteiro.
Por isso peço desculpas se acabei atropelando alguma explicação ou se algo não ficar muito claro para alguém, principalmente para iniciantes. Da forma como foi finalizado acabou ficando mais voltado para quem já tem um conhecimento com outros frameworks ou um conhecimento legal de PHP.

Dúvidas? Perguntas? Sugestões? Estamos aí.
Aguardo o feedback de todos.
Grande Abraço!

Alguns Links que aparecem no screencast

• Download Zend – http://framework.zend.com/download/current/
  
• Slideshare.net - http://www.slideshare.net/flavioaugustosilveira/minicurso-zend

Vocês já ouviram falar sobre o Initializr! ?

Ele é um gerador de código que ajuda você a começar seu projeto em HTML5. Ele é baseado no Boilerplate e foi criado por Jonathan Verrecchia (@verekia) com o objetivo de ampliar o uso do HTML5.

Em contato com o Jonathan, combinei com ele de traduzir a documentação oficial do Initializr do francês para o português, para ajudar a divulgar ainda mais essa tremenda ferramenta e quem sabe com isso ver o uso do HTML5 mais e mais em novos projetos.

Segue a tradução da documentação abaixo.
Você encontra a versão original em francês no seguinte link: http://www.html5-css3.fr/html5/initializr-generateur-template-html5-boilerplate.

Conheça esses projetos e começe já a trabalhar com HTML5!
Grande Abraço!

Initializr – Um gerador baseado nos templates Boilerplate HTML5

Initializr permite a você gerar um template baseado no Boilerplate, montando um rascunho de um HTML5 funcional em segundos.

Você pode customizar seus templates como precisar, para evitar começar um projeto com um código muito pesado. Todo o processo do projeto de design e as opções disponíveis estão detalhadas neste artigo.

Se você está começando agora com HTML5 e quer ter uma geral do que tem por trás dessa tecnologia, eu recomendo que você leia uma introdução ao HTML5 antes de seguir em frente.

Boilerplate HTML5

Boilerplate é uma poderosa e confiável ferramenta de templates criada e mantida por Paul Irish (Google) e Divya Manian.

Boilerplate consiste de um grupo de arquivos HTML, CSS e JavaScript, usados para iniciar com o pé direito em um projeto HTML5.

Ele também inclui ferramentas muito úteis, como o Modernizr, JQuery, e um reset CSS.

Também inclui outras ferramentas não tão necessárias como um Profiling JQuery, Código Google Analytics, Funções Javascript para loggin,

um arquivo de configuração para Flash cross domain, Configuração IIS server e Nginx, Páginas de teste, scripts ANT… Bem, quando você for iniciar seu projeto com Boilerplate, você vai precisar de algum tempo para selecionar as partes que você quer e não quer no seu projeto.

Initializr – Um Boilerplate leve e personalizável

A proposta com o initializr é ter o Boilerplate sem essas ferramentas raramente usadas com HTML5 para poder começar um projeto rápido e tão confiável quanto o Boilerplate. O código gerado pelo Initializr é totalmente baseado no Boilerplate, que tem uma força inegável. Initializr oferece diferentes opções para customizar seu template. Aqui estão os detalhes:

HTML / CSS

Por padrão, o Boilerplate entrega a você uma página em branco. Initializr permite a você gerear um conteúdo inicial como base, para te ajudar a começar rapidamente. A página exemplo trás o tema do site da Initializr, com uma página estruturada com um clássico cabeçalho, um rodapé, um menu para navegação, um bloco lateral, e uma estrutura similar a um blog com alguns posts.

Javascript

O Boilerplate inclui a excelente biblioteca de Javascript jQuery. E no Initializr nós também encontramos essa biblioteca, disponível em forma minimizada ou não. Ou também o direito de não incluir ela, ou não incluir nenhum Javascript. Vamos atentar para um ponto: Estamos falando do seu Javascript. Nada no Modernizr ou no HTML5shiv vai garantir uma compatibilidade 100% com todos os navegadores. Então não esqueça de testar isso posteriormente.

Compatibilidade

Html5Shiv

Navegadores modernos suportam totalmente as novas tags do HTML5. Mas versões do Internet Explorer 8, e anteriores a ele, precisam de uma ajudinha para exibir essas novas tags, que por padrão não são reconhecidas. Esta pequena ajuda é chamada HTML5shiv. Ele é um pequeno arquivo javascript que vai permitir ao Internet Explorer reconhecer essas tags graças a uma função createElement():

document.createElement("header");

Todos os novos itens são automaticamente criados antes do conteúdo da página ser completamente exibido. Isso torna obrigatório colocar o HTML5shiv no Head da sua página ao invés de colocar no rodapé, que é o recomendado para todos os outros javascripts.

Modernizr

O Modernizr, é um sensor de suporte das funcionalidades HTML5 e CSS3, que inclui o HTML5shiv. Ele é um arquivo javascript que irá criar um objeto contendo propriedades modernizr para cada funcionalidade, indicando se ela funciona ou não no seu navegador.

if (Modernizr.geolocation){
  // A geolocalização é suportada
}
else {
  // A geolocalização não é suportada
}

Modernizr também adiciona classes CSS para o HTML, para que você possa facilmente indicar um estilo alternativo se certas propiedades CSS3 não forem suportadas.

.multiplebgs header {
  /* Backgrounds múltiplos são suportados */
}
.no-multiplebgs header {
  /* Backgrounds múltiplos não são suportados */
}

Modernizr é bem abrangente na detecção de suporte a HTML5 e CSS3, mas é importante entender que ele não adiciona nenhuma característica faltante (como faz o HTML5shiv em relação as tags). Ele é a ferramenta selecionada por padrão para compatibilidade do Initializr.

A configuração do servidor

O Initializr traz um arquivo de configuração para o servidor, também gerado pelo Boilerplate. Portanto é possível selecionar um arquivo .htaccess para servidores Apache, web.config para Microsoft IIS, ou nginx.conf para Servidores NGinx. É importante notar que por padrão, esses arquivos vão re-escrever a URL da página, removendo o “www” para montar URLs curtas.

Se você preferir manter o seu “www”, você pode remover as seguintes linhas no caso do .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

É apenas um clique no botão!

Após fazer suas escolhas com relação a configuração, um simples clique no botão Download! fará o download de seus arquivos.

Se você manter as configurações padrão, você terá uma estrutura de projeto completa e pronta para uso, como a mostrada abaixo:

Uma rápida olhada no arquivo index.html e você pode ver que o código traz muita coisa do Boilerplate:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">

  <title>Your website name</title>

  <meta name="description" content="">
  <meta name="author" content="">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="css/style.css?v=2">

  <script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>

<!-- Código da página exemplo do Initializr -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
  <script src="js/script.js"></script>
  <!--[if lt IE 7 ]>
  <script src="js/libs/dd_belatedpng.js"></script>
  <script> DD_belatedPNG.fix('img, .png_bg');</script>
  <![endif]-->
</body>
</html>

O arquivo style.css traz em torno de 200 linhas, os primeiros 3 quartos disso um CSS Reset. Se você estiver procurando onde colocar os seus estilos no meio desse código CSS, role o arquivo para baixo até você encontrar o seguinte comentário:

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

Por último, o arquivo script.js contém um simples teste para ver se a biblioteca JQuery está sendo carregada. Nesse arquivo você pode escrever seu código JavaScript.

TODO.txt

Um arquivo todo.txt também é incluído para te mostrar que tarefas você tem de fazer para começar seu projeto e como usar alguns truques de HTML5 presentes no Boilerplate. Por exemplo, você e lembrado para não esquecer de substituir a linguagem se sua página não estiver em inglês, ou para criar uma  página 404.html no seu arquivo se configuração do servidor para fazer um redirecionamento em erros 404.

Indo mais longe

A versão do Boilerplate que vem no Initializr é mais leve que a original. Se você precisa de um entendimento mais profundo do template ou de informações mais detalhadas de todos os arquivos, você pode ver a explicação oficial do Boilerplate em um vídeo feito por Paul Irish em inglês:

Eu também lhe convido a visitar o site oficial do Boilerplate, onde você vai encontrar algumas dicas para melhorar seu site , dicas de compatibilidade e performance.

O que mais gera acessos aqui no Blog são os artigos sobre Codeigniter, e principalmente a parte de layouts. É o artigo Habilitando Layouts no CodeIgniter (Template Engine) que está dividido em parte 1 e parte 2.

Como esse artigo tem mais de um ano, resolvi dar um upgrade nele com algumas observações.

Desde que ele foi escrito temos algumas novidades. A principal dela é  o lançamento de uma versão crítica do Codeigniter. Mas não se preocupe, a mecânica do artigo continua funcionando.
Apenas atente para alguns detalhes.

Preste atenção para a parte do seu controller:

• Agora ele extende da classe CI_Controller e não mais da classe Controller.
• Agora você não tem de ter mais um método construtor com o mesmo nome da classe. Pode arrancar fora aquilo sem medo.

Outros:

• No tutorial anterior há uma correção porque eu tratava minha pasta system diferente do convencional. Com a ajuda e os comentários de vocês, foi feita uma correção que está no final do post. Agora na versão 2 está tudo ok. A pasta system vem separada da pasta application.
• Na versão 2 temos agora arquivos .htaccess, arquivos de configuração, dentro das pastas application e da pasta system. Dentro deles há uma regra para recusar qualquer coisa que tentar acessar a pasta. Certifique-se que, em caso de colocar seus arquivos de estilo, ou seus arquivos javascript dentro de application por exemplo, alterar essa regra no .htaccess.

Então você pode seguir normalmente o tutorial, apenas adapte os detalhes citados acima.
Está com dificuldades ou preguiça? Clique aqui para baixar um exemplo com Layouts em cima do Codeigniter 2.

É isso galera. Abraço!!

Porque participar?

Os Dojos de programação foram criados para desafiar programadores com algoritmos complexos, diferente de algumas empresas ou trabalhos onde você acostuma com as lógicas e regras de negócio e com o tempo acaba apenas replicando aquilo onde você teve que pensar uma única vez.

Ele leva esse nome por ser baseado nos Dojos de artes marciais, onde no tatâme é feito um círculo e enquanto dois lutadores aprendem na prática, os demais aprendem olhando.
Nos dojos de programação a idéia é a mesma, enquanto duas pessoas estão codificando na máquina as demais aprendem olhando o raciocínio e o caminho que essas pessoas estão seguindo.

É muito importante ressaltar que os dojos não são competições de quem programa melhor ou de quem resolve problemas mais rápidos.
O espírito da coisa toda é ser colaborativo e se divertir. E claro aprender.

Em que linguagem é programado e quais são os problemas propostos?

Há Dojos de vários tipos e maneiras por aí.
Algumas empresas estão montando Dojos internos para seus funcionários, nesses casos sempre seguindo a linguagem de desenvolvimento usada na empresa.

Outros Dojos específicos estão por aí, como de Java, Rails e etc.

Mas onde há programadores de várias linguagens, pode se decidir no dia do Dojo que linguagem utilizar, desde que tenha um especialista da linguagem presente para evitar maiores impasses do tipo “como faz um if aqui?”.
Isso é bom para você se desligar daquela linguagem que você trabalha todo dia e olhar para alguma sintaxe diferente um pouco.

Os problemas de lógica são propostos por colaboradores de todo o mundo.
Você pode ver alguns exemplo no Dojo Puzzles.
Os problemas devem ser escolhidos minutos antes de começar o Dojo, evitando que ao escolher um dia ou dois antes, você começe a resolver o desafio na sua cabeça sem perceber.

Como funciona?

Cada dojo pode ter suas regras específicas de tempo ou funcionamento. Mas no geral eles seguem as seguintes premissas:

Programação baseada em testes

Antes de ser escrito uma implementação de código é escrito um teste. Isso é programação baseada em testes. TDD (Test-Driven Development).
Se você não conhece  ou não imagina como é testar um resultado de uma função que ainda não foi criada, o Dojo pode ser uma forma de você se iniciar nessa metodologia e ver quais as vantagens ou desvantagens dela.

Passos de bebê

Quando um bebê está aprendendo a caminhar ele não arrisca dar passos grandes por aí. No Dojo acontece da mesma forma.
O código vai saindo devagar, ajudando para que todos estejam entendendo o que está acontecendo e que rumo tudo está tomando.
Sempre que alguém não estiver entendendo o que está acontecendo, esse tem o direito de perguntar e se encaixar nos trilhos novamente.

Pair Programming – Programação em duplas

A programação é feita em dupla. Um piloto e um co-piloto.
O piloto, obviamente, coloca a mão na massa, digitando e identando código e testes.
O co-piloto palpita ajuda olhando e apontando onde pode melhorar, o que está errado, etc.
Quando esse piloto volta para a platéia após alguns minutos, o co-piloto se torna  piloto e alguém da platéia vem para ajudá-lo no papel de co-piloto.
E assim segue.

Fases

Quando piloto e co-piloto estão sem idéias de como resolver o problema, é liberado que a platéia interaja e opine a respeito do código. Para demais casos há  fases onde a platéia pode opinar ou não. Quem dita essas fases são os testes.

Quando algum teste não estiver passando, não estiver dando um resultado correto, a dupla deve se concentrar em corrigir isso. Nessa fase a platéia não deve opinar, a menos que seja pedido.
Quando os testes estão passando e tudo está ok, é liberado que a platéia de opiniões e sugestões para o piloto e co-piloto.

Onde Acontece?

Os Dojos tem se espalhado por toda parte e com certeza há um perto de você.
O Codingdojo.org traz uma listagem de Dojos pelo mundo que você pode conferir clicando aqui.
Outra fonte de pesquisa, claro, é o google. Pesquisando por Coding Dojo + o nome da sua cidade com certeza irá pintar alguma coisa.

Não encontrou nada?
Ao Invés de reclamar que sua cidade é fraca e não tem nada, porque você não monta um grupo de dojo e chama seus conhecidos?

Então é isso pessoal. Quer se aperfeiçoar? Conhecer novas pessoas? Participar de um grupo bacana?
Procure e participe dos Dojos.

Abraço!

O Post que trago hoje trata de algo bem simples mas que pode não ser muito comum para algumas pessoas.
São usos não muito populares de um de nossos laços de repetição, o FOR.

Quando estamos aprendendo uma linguagem, bem no início, os manuais parecem mais nos confundir do que ajudar.
O que fazemos ?? Saímos em busca de uma comunicação mais direta em Blogs ou Sites.

Essas fontes resolvem nosso problema mais podem acabar deixando alguns vácuos quando se trata de estruturas básicas, como é o caso do FOR.

E sobre o FOR eu te pergunto o seguinte:
Você sabia que os parâmetros passados para ele são opcionais ??
Você sabia que pode passar quantas variáveis quiser para os parâmetros ??

Se já sabe maravilha, caso não, vamos ver como isso funciona.

Nesse primeiro exemplo temos nosso FOR comum, como todos aprendemos:

<?php

        for($i = 0; $i < 5; $i++)
        {
                echo $i;
                echo '<br />';
        }

Nesse segundo exemplo, retiramos o primeiro parâmetro do FOR, e deixamos a variável $i definida fora do laço:
Repare que o resultado que vai sair na tela, vai ser o mesmo do exemplo anterior.

<?php

        $i = 0;

        for(; $i < 5; $i++)
        {
                echo $i;
                echo '<br />';
        }

Agora, vmaos tirar o terceiro parâmetro, e incrementar a variável dentro do laço.

<?php

        $i = 0;

        for(; $i < 5;)
        {
                echo $i;
                echo '<br />';
                $i++;
        }

Por último, vamos retirar o segundo parâmetro.

<?php

        $i = 0;

        for(; ; )
        {
                echo $i;
                echo '<br />';

                if($i == 5)
                {
                        break;
                }

                $i++;
        }

Repare que em todos esses exemplos acima, fugimos do Loop infinito com alguma condição ou mecanismo que colocamos dentro do laço. Tome cuidado. Esse último exemplo se não for feito nada dentro do laço, gera facilmente um Loop infinito.

Outra opção que temos é usar mais de uma variável para cada parâmetro.
Confira:

<?php

        $w = 2;

        for($i = 1, $j = 9; $j > 0; $j - $i, $w*=2)
        {
                echo $w;
                echo '<br />';
        }

Vamos analisar o exemplo acima.
Definimos para o loop a variável $i e a variável $j.
O segundo parâmetro, que define até quando nosso loop vai rodar, nos mostra que será enquanto $j for maior que zero.
E no último parâmetro, definimos que a cada volta $j vai diminuir o valor de $i, e que $w, que é uma variável que está definida fora do loop, será multiplicada por 2.
Dentro do loop, pedimos para exibir $w.
Faça o teste. Confira a saída.

Com esses exemplos acredito que já conseguimos absorver mais usos do que aquele que estamos acostumados do FOR. Todos eles são tratados na documentação e também tem uns exemplos bem bacanas nos comentários dela que valem a pena olhar.

E aí você me pergunta… “E um uso prático disso?? Uma situação real ??”

De cara assim não consigo dar uma resposta, um exemplo.
Mas com isso eu lembro de uma entrevista que um dos melhores guitarristas do mundo, Yngwie Malmsteen, deu há alguns anos para a Guitar Player americana. Ele disse:
“As pessoas falam que eu sou muito técnico e etc. Mas eu preciso conhecer a técnica para fazer virar música. Assim como um escritor deve conhecer várias palavras para escrever um livro…”

Pense nisso!
Devemos conhecer as possibilidades que a linguagem nos dá, e assim ficamos preparados para montar as lógicas que cruzarem nosso caminho.

Grande Abraço!

Hoje trago um artigo pesado e extenso, mas acredito que vá ajudar o pessoal que precisar em várias frentes. Vou Tratar aqui de JQuery, JQuery Validation, a diferença entre síncrono e assíncrono, como fazer ajax síncrono usando JQuery e também soluções para problemas em um dia de trabalho no mundo do desenvolvimento.

Bom, que o JQuery é um dos frameworks mais usados para javascript e que facilita muito a sua vida você já deve saber. E que o plugin para JQuery, JQuery Validation, é uma excelente maneira de validar seus formulários do lado cliente, você também deveria saber.

Veja um exemplo:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">

function init()
{
	$("#form").validate({
		rules:
		{
			nome:{required: true},
			senha:{required: true, minlength: 5}
                }
	});
}

$(document).ready(init);

</script>

</head>
<body>

<form id="form">

	<p>
		<label for="nome">Nome</label>
		<input type="text" name="nome" id="nome" />
	</p>

	<p>
		<label for="senha">Senha</label>
		<input type="password" name="senha" id="senha" />
	</p>

</form>

</body>

Com essas poucas linhas você já tem um formulário com campo obrigatório para nome e campo obrigatório para senha exigindo um mínimo 5 caractéres.Ao não seguir qualquer uma das regras, o plugin insere uma Label com uma mensagem de erro.

Você tem opções para personalizar essa mensagem, além de outras várias opções oferecidas pelo plugin.
Você pode dar uma conferida nessas opções pela documentação e exemplos no site oficial do plugin aqui.

Primeiro Problema

O plugin JQuery Validation é gringo; Internacional se você preferir assim dizer.
Na sua condição de estrangeiro, ele não conhece o que é CPF.
Ele não tem um método para entrada e validação de CPF, o que é muito comum nos formulários de cadastro aqui no Brasil.

Por sorte, o JQuery validation tem uma maneira muito fácil de você inserir novos métodos a ele.
Com uma rápida busca na internet chegamos em vários blogs que nos trazem a solução, como é o caso do TidBits escrito pelo Danilo Augusto, que falou sobre isso em seu post Coleção de métodos para o plugin validate do Jquery.

Primeiro vamos adicionar um campo para o CPF.
Vamos também separar o arquivo .js para ficar mais organizado a coisa toda, separando o que é Html do que é javascript.

Nosso Html vai ficar assim:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<!-- default.js será o arquivo separado do javaScript -->
<script src="default.js" type="text/javascript"></script>

<form id="form">

	<p>
		<label for="nome">Nome</label>
		<input type="text" name="nome" id="nome" />
	</p>

	<p>
		<label for="senha">Senha</label>
		<input type="password" name="senha" id="senha" />
	</p>

	<p>
		<label for="cpf">CPF</label>
		<input type="text" name="cpf" id="cpf" />
	</p>

</form>

Ok, adicionamos o Input para o CPF em nosso HTML.
Agora vamos adicionar o método para o Jquery Validation no nosso arquivo default.js, seguindo o exemplo que pegamos no Blog do Danilo.

function init()
{
	$("#form").validate({
		rules:
		{
			nome:{required: true},
			senha:{required: true, minlength: 5}
	       }
	});
}

jQuery.validator.addMethod("verificaCPF", function(value, element) {
value = value.replace('.','');
value = value.replace('.','');
cpf = value.replace('-','');
while(cpf.length < 11) cpf = "0"+ cpf;
var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
var a = [];
var b = new Number;
var c = 11;
for (i=0; i<11; i++){
	a[i] = cpf.charAt(i);
	if (i < 9) b += (a[i] * --c);
}
if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
b = 0;
c = 11;
for (y=0; y<10; y++) b += (a[y] * c--);
if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
return true;
}, "Informe um CPF válido.");

$(document).ready(init);

Agora falta chamar o método para o seu campo.
Para isso adicione a seguinte validação no seu código javascript:

$("#form").validate({
	rules:
	{
		nome:{required: true},
		senha:{required: true, minlength: 5},
		cpf:{required: true, verificaCPF: true}
       }
});

Repare:
Chamamos o método verificaCPF, e passamos o valor que queremos, no caso, true para que seja um CPF válido.
Faça seus testes.

Segundo Problema

Legal! Temos o formulário validando, inclusive com um campo de CPF, sem muito trabalho pois estamos contando com o JQuery Validation. Mas então nos surgi outro problema. No seu banco de dados você tem um campo onde CPF tem de ser único.

E para ajudar seu usuário, além de mostrar se o CPF é válido ou não, você quer mostrar se é um CPF cadastrado ou não.
E então, como fazemos ?

Para pesquisas no banco de dados sem refresh na página a resposta é fácil não? Ajax!
Mas como juntar isso no Jquery validation?

Você conhecendo a facilidade do Ajax no Jquery, pode sair logo de cara transformando o seu método de validação de CPF para o seguinte:

jQuery.validator.addMethod("verificaCPF", function(value, element) {

value = value.replace('.','');
value = value.replace('.','');
cpf = value.replace('-','');

while(cpf.length < 11) cpf = "0"+ cpf;
var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
var a = [];
var b = new Number;
var c = 11;

for (i=0; i<11; i++)
{
	a[i] = cpf.charAt(i);
	if (i < 9) b += (a[i] * --c);
}

if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }

b = 0;
c = 11;

for (y=0; y<10; y++) b += (a[y] * c--);

if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }

if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;

var verifica = false;
$.get('verificaCpf.php', {cpf : cpf}, function(data){
	if(data == 0) verifica = true;
});

if(!verifica) return false;

return true;
}, "CPF inválido ou já cadastrado!");

Vamos ver o que foi feito aqui. Acompanhe da linha 30 em diante.
Adicionamos uma variável dentro do nosso método chamada “verifica”, e definimos o valor de false para ela.

Em seguida fazemos uma chamada para um arquivo PHP através de Ajax.
Esse arquivo PHP deve fazer uma consulta no seu banco de dados pelo CPF digitado.
Por ser algo simples de fazer e para não estender ainda mais esse post ,não vou tratar desse código PHP aqui.

Para entendimento, basta saber que nosso código PHP retorna o número de linhas onde encontrou aquele CPF.
Esse valor vai vir para o javascript pela variável data.
Repare que é feito uma comparação na resposta do Ajax, que, caso o número de linhas encontradas no banco seja 0, mudamos a variável para true. E fim do Ajax.

Em seguida, verificamos a variável “verifica”.
Se ela for diferente de verdadeira, o método verificaCPF retorna false e será acusado erro em seu formulário.

Ufa! Certo. Vamos testar?
Problemas acontecem não? Está sempre retornando erro.
O que está acontecendo?

Terceiro Problema

Vamos entender:
Seu código PHP é chamado. Ele vai lá no banco de dados, faz a consulta e está retonando o resultado.
Mas enquanto isso, o código javascript já continuou sua execução, e quando a resposta do ajax chegar, a execução do método terá acabado. Com isso ele vai retornar o valor que tinha na variável, false.

Isso acontece, pois o ajax padrão do JQuery, como foi usado acima, é assíncrono.
Você está se perguntando o que é isso? Vou tentar ser claro.
É o fato de não importar quando a resposta do ajax vai vir. Não precisar de sincronismo, compreende?

Porém veja que esse é exatamente o nosso problema aqui. Precisamos desse sincronismo.
Precisamos da resposta do nosso Ajax antes de continuar a execução do código.

Como fazer?
Vamos fazer o Ajax Síncrono.
A execução do javascript só pode continuar depois da resposta do ajax.

Procurando pela internet, achei alguns desenvolvedores falando que não é possível fazer ajax síncrono com JQuery. Isso não é verdade. É uma das primeiras coisas que encontramos na documentação.

Veja como fazer:

jQuery.ajax({
	    url: 'verifica_cpf.php?cpf='+cpf,
	    async: false,
	    success: function(data) {
	       if(data == 0) verifica = true;
	   }});

Passando o valor false para a propiedade async do ajax, temos nosso ajax síncrono.
Repare que o código segue o padrão JQuery e é fácil de entender.
Ao invés de passar as variáveis em uma propiedade, as adicionei no padrão GET diretamente na url.
Uma opção a isso seria usar a propiedade data.

Substituindo esse trecho de código no lugar do nosso ajax assíncrono anterior, temos nosso problema corrigido.

Uma observação importante, é você reparar que a execução dá página dá uma travada enquanto espera a resposta do javascript. Fique atento para não deixar de dar uma resposta em situações de erro ou sucesso. Caso contrário sua página vai ficar travada nesse ponto.

Quarto problema

Não não…brincadeira… hahaha

Legal! Acredito que chegamos finalmente ao final.
Dúvidas? Dicas para melhorar todo esse processo? Não deixem de comentar pessoal…
Grande Abraço!

Muita gente me manda emails ou mensagens no twitter achando que eu escrevi o Plugin JQuery Price para JQuery, que ajuda você a formatar seus campos de texto com valores monetários, valores de preço. Se você ler bem certinho na página oficial do Plugin (http://meiaduzia.com.br/cuducos2/priceformat), e também no código ao baixar ele, verá que eu apenas colaborei com uma nova função do plugin, uma necessidade minha no início do ano de 2009.

O Autor do Plugin é o Eduardo Cuducos, Um tremendo Designer e Desenvolvedor Web do estado de Santa Catarina que conheci por meio desse Plugin. Aqui você pode conhecer mais dele ou seguir seu twitter (http://twitter.com/cuducos) para pegar suas idéias, sejam de designer, política ou pensamentos de vida, que também valem a pena.

Para usar o Plugin é fácil.
Na página oficial consta alguns exemplos bem explicativos.
Mas se você ainda tem dúvidas vou reproduzí-los aqui.

Primeiro crie seu Html com o campo que quer formatar.
Não preciso dizer para você carregar a JQuery e o Plugin JQuery Price preciso ?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jprice.js"></script>
<script type="text/javascript">

	function init()
	{

	}

	$(document).ready(init);

</script>

</head>
<body>

	<h1>Exemplo</h1>

	<label for="price">Valor:</label>
	<input type="text" id="price" />

</body>

Ok.
Reparem que eu já acrescentei um código JavaScript para chamar a funcão init assim que a página terminar de carregar. Isso evita que o JavaScript tente fazer algo com algum campo do Html que não esteja criado ainda. Uma outra solução para isso poderia ser colocar esse código ao final do Html.

Para o uso básico do Plugin, basta fazer a chamada do campo (no meu caso chamei pelo id) e acrescentar o método priceFormat veja:

function init()
{
	$('#price').priceFormat();
}

$(document).ready(init);

Com isso seu input já formata automaticamente os números inseridos nele para as configurações padrões do Jquery Price. Ah sim, ele impede que você digite letras e alfanuméricos nesse campo também.

Ficou legal não?
Mas você não quer esse valor em doláres, você está lidando com o seu Brasil Brasileiro.
Vamos personalizar isso então.

function init()
{
	$('#price').priceFormat({
		prefix: 'R$ ',
		centsSeparator: ',',
		thousandsSeparator: '.'
	});
}

Passando parâmetros para funcão em formato de array, conseguimos personalizar nosso input conhecendo algumas propiedades do plugin.

Com a propiedade prefix, alteramos o que vem antes dos números.
Repare que foi dado um espaço após o cifrão para ficar melhor visivelmente dentro do input.
Em seguida foi modificado o separador de centavos para uma vírgula e o separador de milhar para um ponto.

Muito fácil não ??

E chegamos ao momento mais esperado (Ou não).
Qual foi a minha colaboração com o Plugin ? Qual foi meu problema ?

Eu precisava limitar o valor que o usuário digitava.
Se você testar os exemplos que fizemos até aqui, verá que você pode inserir números até cansar.

Na época fiz um código meio xulo para resolver o problema, porque estava começando com JQuery e não tinha muita desenvoltura para alterar seus plugins. Mandei o código para o Cuducos que fez as devidas adaptações, não estragando a facilidade de uso do plugin.
Vamos a um exemplo:

function init()
{
	$('#price').priceFormat({
		prefix: 'R$ ',
		centsSeparator: ',',
		thousandsSeparator: '.',
		limit: 6
	});
}

Passando mais uma propiedade para o método, chamada limit, agora você só pode inserir 6 numerais dentro do seu input.

Um outro limitador que temos é o de casas para os centavos.

function init()
{
	$('#price').priceFormat({
		prefix: 'R$ ',
		centsSeparator: ',',
		thousandsSeparator: '.',
		limit: 6,
		centsLimit: 4
	});
}

Difícil ? Acredito que não certo ?
Experimente outros valores e confira os resultados.

Por hoje é isso pessoal.
Demos uma passada por todo o uso do plugin JQuery Price além de conhecer a história de como colaborei para o plugin. Espero ter tirado as dúvidas do pessoal que me manda emails e afins.

Agradecimentos imensos para o Eduardo Cuducos que adicionou meu nome dentro do projeto do plugin pela minha pequena colaboração, tornando o meu nome mais visível para a comunidade de desenvolvimento.

Qualquer coisa é só entrar em contato.
Abraços!

No Podcast:

• PHP SC Conf
• Identificação do dispositivo mobile
• Disparo de SMS
• Novo Marketing
• QR Code
• Ferramentas Web para Mobile
• Conteúdo de um site Mobile
• Outros

A trilha sonora é da Banda Auras aqui de Curitiba.
Mais abaixo você tem os links para acompanhar melhor o Cast.

Links:
Tera-WURFL – http://www.tera-wurfl.com/wiki/index.php/Main_Page
W3C Mobile – http://www.w3.org/Mobile
Bruno @Porkaria – http://www.porkaria.com.br/
Gerando QRCode com PHP -http://www.porkaria.com.br/2010/04/24/gerando-qr-code-com-php/
PHP Mobile – http://www.phpmobile.com.br/
JQuery Mobile – http://jquerymobile.com/
WordPress Mobile – http://wordpress.org/extend/plugins/wordpress-mobile-edition/

Abraço!

Uma das grandes vantagens do Adobe Air é o fato de você construir programas para desktop e ele rodar em qualquer sistema operacional utilizando tecnologias conhecidas da Web como Html, Ajax e Flash.
Não vou me ater a detalhes pequenos da ferramenta, como linguagem que usa, onde ficam os componentes, quais são, etc. Vou levar para um lado mais prático para construirmos o exemplo de maneira rápida. Caso passe algo em branco para quem está começando por favor, é só entrar em contato.

Vou usar Adobe Flash Builder, que é a nova versão do Adobe Flex lançada em Março desse ano.
Você pode fazer o download da ferramenta no site da Adobe neste Link.
O Flex traz a integração com desenvolvimento para o Adobe Air desde o Flex 3.

Crie um novo projeto Flex clicando com o botão direito do mouse dentro da janela Package explorer selecionando New > Flex Project como na imagem abaixo.

É aberta uma janela onde você dá um nome de sua preferência para o seu projeto e seleciona o tipo da aplicação em Application type. Como nosso objetivo é o Air, selecione Desktop (runs in Adobe Air). Veja a imagem.

Se você já tem um pouco mais de experiência com a ferramenta pode alterar o caminho do projeto e outras opções, caso contrário mantenha o padrão para não ter dor de cabeça.
Após clicar em Finish, é criado seu projeto e aberto o arquivo principal da sua aplicação que tem o mesmo nome que você deu ao projeto.

Você se depara com a Aba Source onde temos o código MXML usado pelo Flex e a Aba Design que vai facilitar na montagem da cara da sua aplicação. É para lá que vamos, onde no Centro, que chamamos de palco, temos uma preview da sua aplicação (que está em branco), e do lado direito a janela de propriedades e de aparência.

Assim que você troca para o modo design na primeira vez, já vem selecionado o componente Window Application, que seria para o Air como a tag body para o HTML. Na lateral direita, a janela de propiedades mostra as cores do Background e do Preloader.

Primeiro vamos mudar a cor de fundo. Para isso, clique no branco que está na propriedade Background. Ao fazer isso é exibida uma color picker onde você pode escolher a cor de sua preferência. Eu fiquei com um preto.

Ao clicar em Ok você já vê a cor mudar na parte do Design.

Certo. Na lateral esquerda, abaixo da janela Package Explorer, temos as opções dos componentes. Eles são organizados em pastas para facilitar sua localização. Dando uma rodada por eles você encontra dentro da pasta Controls o componente Label. Confira Imagem.

Clique e arraste esse componente para cima da sua aplicação. Você verá um sinal de mais no Mouse indicando que será adicionado. Ao soltar o componente ali você vê um texto escrito em sua aplicação.

Dependendo a cor que você escolheu para o seu fundo, você não vai ver nada.
A cor padrão da fonte do componente Label é preta. Você pode mudar essa cor na caixa de propriedades na lateral direita, da mesma forma que fez com o fundo. Atenção, o componente deve estar selecionado para que as propiedades dele apareçam.

Após mudar a cor da fonte, para branco no meu caso, já alterei o tamanho da fonte para 36 para visualizar melhor.

Ficando assim, confira:

Agora só falta mudar o texto.
Para isso você tem a opção de dar dois cliques em cima do componente ou usar a caixa Text na janela de propriedades. Escreva o texto de sua preferência. O componente será adaptado para o tamanho do seu texto, mas você pode facilmente alterar seu tamanho puxando seus cantos dentro do palco. Da mesma maneira você pode posicionar o componente dentro da aplicação como preferir arrastando ele com o Mouse. A minha ficou dessa forma.

Agora é salvar (Ctrl + s) e rodar a sua aplicação para ver como ela vai funcionar.
Para isso Clique no botão Run (é como um Play) que fica acima da janela Package Explorer.

Feito! O seu aplicativo irá abrir com o texto conforme você montou.

Está feito a sua aplicação em Air usando o Adobe Flash Builder.
Procure experimentar outros componentes e suas propriedades para ver como ficam.

Dúvidas? Só entrar em contato.
Abraços!!

Se você é programador e ainda não sabe sobre as expressões regulares, não perca tempo.
Você precisa se emocionar com o uso delas em seus códigos.

Consulte os links abaixo para iniciar já esse aprendizado:
Wikipedia – http://pt.wikipedia.org/wiki/Express%C3%A3o_regular
Um excelente tutorial para começar do Rafael Jaques- http://www.phpit.com.br/artigos/entendendo-as-expressoes-regulares.phpit
Aurélio Marinho Jargas – O guru das expressões regulares – http://aurelio.net/er/

Certo mas e o SQL Server ? Vamos voltar para ele..

Em um post antigo eu mostro como fazer a formatação de campos como CPF direto pelo SQL.

Mas digamos que alguns campos do CPF estejam com formatação correta com pontuação e dígitos e outras não.
E ainda outras mais ou menos. Ex: 161.364.708-53, 16136470853, 161364708-53.
Você tem um problema e nesse caso um SubString não iria funcionar corretamente.

Solução? RegexReplace. Vamos ver como usar isso.

Primeiro vamos montar a expressão regular.
Vamos montar ela de maneira clara pensando apenas em como o CPF tem de ser exibido.
Não vamos pensar no cálculo do dígito verificador nem nada desse tipo.

Bom o que queremos ?

• 3 números seguidos de um ponto. Vamos lembrar que esse ponto pode existir ou não. Não sabemos como o dado foi salvo no banco.
• Mais 3 números seguidos de outro ponto. Novamente não sabemos se esse ponto estará presente ou não.
• Precisamos agora de 3 números seguidos por um hífen, que também não temos certeza se estará lá ou não.
• Para fechar, dois números.

Legal! Já sabemos o que queremos vamos agora começar a brincadeira.

Não vou explicar aqui cada operador e caracter. Isso é demorado e também não é meu objetivo aqui.
Para começar com Expressões Regulares consulte os links que passei logo no início desse post.

Para trazer numerais na expressão regular usamos o seguinte

[0-9]

Mas isso vai me trazer apenas um numero, mas na verdade queremos 3 então fazemos da seguinte maneira

[0-9]{3}

Se você quisesse 2 números, bastava substituir o 3 pelo 2.

Legal, para pegar os números já temos todas as armas na mão.
E agora os caracteres, o ponto e o hífen opcionais ??
Vamos lá…

O ponto é um operador em expressão regular e não é o operador que vai trazer o que queremos.
Nós precisamos de um ponto literalmente.
Para isso vamos escapar o ponto, assim como escapamos aspas ou caracteres especiais em programação.
Ficando assim:

\.
/*Desconsidere umas das barras, acima
coloquei duas por conta do plugin de sintaxe do wordpress.*/

Agora para deixar isso opcional, basta colocar uma interrogação depois disso.

.?

Para o hífen, não é obrigatório escapar pois ele não é um operador em expressões regulares.
Entretanto eu gosto de escapar ele. Para mim facilita a leitura.

-?

Certo. Temos como pegar os numerais, como pegar hífen e pontos. Agora é juntar tudo.
Vamos usar parênteses para deixar tudo organizado e também para facilitar a nossa formatação mais para frente.

^([0-9]{3}).?([0-9]{3}).?([0-9]{3})-?([0-9]{2})$

Repare que coloquei um circunflexo(^) no início da expressão e um cifrão($) no final.
Isso indica que a String tem que ter um começo e um fim.
Caso não tivesse isso poderia haver qualquer caractere antes ou depois do CPF.

Vejamos por partes então:

• ^ – Inicia a string
• ([0-9]{3}) – 3 números
• .? – Um ponto, que pode ter ou não, por isso a interrogação.
• ([0-9]{3}) – Novamente 3 números
• .? – Mais um ponto, que pode ter ou não.
• ([0-9]{3}) – Mais 3 números
• -? – Um hífen, que pode ter ou não. Não é obrigatório o escape nele.
• ([0-9]{2}) – Dois números.
• $ – Finaliza a String.

Agora vamos para a segunda parte, o RegexReplace do Sql Server.

A função RegexReplace tem 3 parâmetros obrigatórios.
O primeiro é o seu campo, CPF nesse caso. O Segundo a expressão regular, e o terceiro o como queremos exibir.

Os dois primeiros parâmetros já temos.
Para o modo de exibição funciona da seguinte forma.
Quando usamos os parênteses em nossa expressão regular, elas se tornam variáveis que resgatamos com um cifrão e a ordem em que ela aparece na expressão. Então o primeiro parênteses seria o $1, o segundo o $2 e assim por diante.

Agora é só montar a função no Select.
Ficando assim.

Select dbo.RegexReplace('161364.70853',
'^([0-9]{3}).?([0-9]{3}).?([0-9]{3})-?([0-9]{2})',
'$1.$2.$3-$4')

Entre as variáveis você pode colocar os caracteres para exibição como pontos, hífens, underline e qualquer coisa que queira.

Reparem que coloquei o CPF no primeiro parâmetro da função formatado de maneira errada propositalmente.
Experimente modificar essa formatação, deixar só os números, só os pontos, enfim…
Modifique também a exibição da formatação para ver o funcionamento.

É isso galera.

Agradeço ao meu grande brother Anderson Orso por me mostrar possível aprender expressões regulares facilmente.

Espero que tenham curtido.
Qualquer dúvida só mandar.

Abraços!!

UPDATE – 22 de maio

Fala pessoal,
não me dei conta ontem que esqueci um detalhe importantíssimo de todo essa papo aqui.

O RegexReplace e outras funções similares não são nativas no SQL Server ao contrário de outros bancos de dados. Para ter isso disponível nos seus Selects, Updates e etc, você deve compilar um assembly .NET e subir para o banco.

O código para compilar você pode baixar aqui.
Mais detalhes de como fazer e usar tudo isso você encontra nesse link.

Abraço!