Archive for Fevereiro, 2008

O Poder das Expressões Regulares

Igor Escobar on Fev 19th 2008

Hoje vou falar sobre um assunto que é de suma importância para qualquer programador , expressões regulares. O poder e a facilidade que é proporcionada aos programadores adeptos deste conceito são realmente enormes.

Para quem ainda não faz idéia do que eu estou falando vou mostrar um exemplo para vocês:

  1. if(! ereg(”^([0-9a-zA-Z]+)([._-]([0-9a-zA-Z]+))*[@]([0-9a-zA-Z]+)([._-]([0-9a-zA-Z]+))*[.]([a-zA-Z]){2,3}([0-9a-zA-Z])?$”, $input_email ) ) {
  2. echo "Caracteres Inválidos no campo de e-mail!!!";
  3. }

Estão vendo este grupo de caracteres aparamente mente misturados e sem lógica alguma, certo?

Errado! claro que tem lógica! ;)

A história das expressões regulares começou no ano de 1943 e só foi apresentada ao computador 25 anos depois em 1968 em um algoritmo de busca integrado no editor de textos, na época chamado "qed".

Os pais das expressões regulares foram dois neurologistas que na época publicaram um estudo que teorizava o funcionamento dos nossos neurônios. Alguns anos depois um matemático (não me pergunte quem) descreveu algebricamente os modelos deste estudo usando símbolos que por sua vez foram chamados de grupos-regulares (regular sets) e baseado nestas notações simbólicas foi que deu origem as expressões regulares.

Como puderam notar, as expressões regulares são muito antigas e vem sendo muito utilizado para criar implementações "farejadoras", o uso das expressões regulares nada mais é do que implementar regras de coletação e verificação de sintaxe de textos.

O exemplo que eu dei para verificação do e-mail de um visitante é bem claro em relação a isso, ele verifica se o e-mail digitado pelo visitante possui uma sintaxe válida.

Para o seu estudo e compreendimento existe um e-book publicado pelo Aurélio Marinho Jargas na internet que foi aonde eu aprendi tudo que sei no que se trata de expressões regulares.

Facilitando o Estudo

Na internet existe várias ferramentas que te ajudam na fixação e treinamento dos conceitos aprendidos neste livro, uma destas, é o Regex Tester online, você escreve um texto simples, escreve a regra e o editor vai colorindo as áreas afetadas por sua expressão regular no seu texto.

Guia de Links Uteis

Expressões Regulares - Aplicando

Nos links acima você encontra informações suficientes para em pouco tempo sair criando suas próprias expressões.

Concluindo

Insisto para que se você ainda não sabe criar suas expressões regulares, por favor, leia o e-book que apresentei a vocês, vocês não fazem idéia do quanto as expressões regulares podem facilitar a vida de um programador. Recentemente na empresa na qual trabalho um programador criou uma rotina que tinha aproximadamente 15 linhas de código, vários parsers, loops e funções desnecessárias somente para verificar se o campo foi preenchido com 12 números 1, 2, 3, 4, 5, 6, 7, 8, 9, 0. ou seja, ele criou uma rotina que varria o campo cpf e verificava se os 12 números digitados eram repetidos por ex: 111111111111, 222222222222 ... 999999999999.

De 12-15 linhas implementadas em JavaScript a solução Regex foi:

  1. var Expressao = /([0]{12}|[1]{12}|[2]{12}|[3]{12}|[4]{12}|[5]{12}|[6]{12}|[7]{12}|[8]{12}|[9]{12}|)/
  2. if(campoCpf.test(Expressao)) return false;

Viu? Poupa tempo e neurônios. Uma implementação de 12-15 linhas virar apenas duas.

Objetivo deste post não é ensina-los Expressões regulares e sim tentar mostrar para vocês a importância da aprendizagem do mesmo para tornar você um desenvolvedor muito mais produtivo.

Espero ter contribuído!
[]'s

Filed in Expressões Regulares, Java Script, PHP, Ruby on Rails | 8 responses so far

Trabalhando com Mascaras em Java Script

Igor Escobar on Fev 18th 2008

Recentemente, tive problemas com algumas funções já disponíveis na internet para poder facilitar a aplicação de mascaras em campos do tipo string.

Por exemplo: o cliente precisava que no momento que eu fosse digitando a data no formato (00/00/000) o sistema automaticamente, iria colocando as barras "/" para facilitar o preenchimento do campo.

Baseando-se neste ,desenvolvi uma função em JavaScript para aplicar qualquer tipo de mascara que você precisar basta informar o template da mesma:

  1. /**
  2. * Formata o Campo de acordo com a mascara informada.
  3. * Ex de uso: onkeyup="AplicaMascara('00:00:00', this);".
  4. * @author Igor Escobar (blog@igorescobar.com)
  5. * @param Mascara String que possui a mascara de formatação do campo.
  6. * @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
  7. * @returns {void}
  8. */
  9. function AplicaMascara(Mascara, elemento){
  10.    
  11.     // Seta o elemento
  12.     var elemento = (elemento) ? elemento : document.getElementById(elemento);
  13.     if(!elemento) return false;
  14.    
  15.     // Método que busca um determinado caractere ou string dentro de uma Array
  16.     function in_array( oque, onde ){
  17.             for(var i = 0 ; i <onde.length; i++){
  18.             if(oque == onde[i]){
  19.                 return true;
  20.             }
  21.         }
  22.         return false;
  23.     }
  24.     // Informa o array com todos os caracteres que podem ser considerados caracteres de mascara
  25.     var SpecialChars = [':', '-', '.', '(',')', '/', ',', '_'];
  26.     var oValue = elemento.value;
  27.     var novo_valor = '';
  28.     for( i = 0 ; i <oValue.length; i++){
  29.         //Recebe o caractere de mascara atual
  30.         var nowMask = Mascara.charAt(i);
  31.         //Recebe o caractere do campo atual
  32.         var nowLetter = oValue.charAt(i);
  33.         //Aplica a masca
  34.         if(in_array(nowMask, SpecialChars) == true && nowLetter != nowMask){
  35.             novo_valor +=  nowMask + '' + nowLetter;
  36.         } else {
  37.             novo_valor += nowLetter;
  38.         }
  39.         // Remove regras duplicadas
  40.         var DuplicatedMasks = nowMask+''+nowMask;
  41.         while (novo_valor.indexOf(DuplicatedMasks)>= 0) {
  42.          novo_valor = novo_valor.replace(DuplicatedMasks, nowMask);
  43.         }
  44.     }
  45.     // Retorna o valor do elemento com seu novo valor
  46.     elemento.value = novo_valor;
  47.    
  48. }

Metodos de uso

Mascara para campos do tipo Data:

  1. <input name="data" maxlength="10" onkeyup="AplicaMascara('XX/XX/XXXX', this);" type="text" />

Mascara para campos do tipo Hora:

  1. <input name="hora" maxlength="8" onkeyup="AplicaMascara('XX:XX:XX', this);" type="text" />

Mascara para campos do tipo CEP:

  1. <input name="cep" onkeyup="AplicaMascara('XXXX-XXX', this);" type="text" />

Mascara para campos do tipo TELEFONE:

  1. <input name="tel" onkeyup="AplicaMascara('(XX)XXXX-XXXX', this);" type="text" />

Mascara para campos do tipo CPF:

  1. <input name="cpf" onkeyup="AplicaMascara('XXX.XXX.XXX-XX', this);" type="text" />

E por ai vai, basta seguir os exemplos e ser feliz ;)Espero ter contribuído!
[]'s

Leia também:

Mootools Extension: moo.rd on February 21st, 2008
.

Filed in Java Script, Utilidades | 3 responses so far

Faça seu site carregar 500% mais rápido com PHP Speedy

Igor Escobar on Fev 18th 2008

A AcidDrop lançou recentemente o PHP Speedy, o sistema funciona relativamente simples, tudo o que ele faz é além de comprimir os seus arquivos css, js e html o PHP Speedy agrupa todos eles em um só arquivo e faz a sua compressão.

Se você possui 15 arquivos javascript e 3 arquivos CSS em sua página ele vai unir tudo em 1 arquivo js e 1 arquivo css, além de também comprimir o seu código HTML.

Tudo isso traz benefícios enormes para o seu website ligado a velocidade de carregamento e performance. Além dele carregar até 500% mais rápido ele proporciona os seguintes benefícios:

  • Diminui drasticamente as requisições HTTP.
  • Adiciona um expire-header mais prolongado aos seus arquivos.
  • Gzip os componentes da sua página.
  • Minify seus códigos HTMl, JavaScript e CSS.

Como usar?

Basta colocar o código abaixo, no topo do seu arquivo:

  1. require_once('class.compressor.php'); //Include the class. The full path may be required
  2. $compressor = new compressor('css,javascript,page');

E para terminar, coloque o código abaixo, no final do seu arquivo:

  1. $compressor->finish()

Opções Avançadas

  1. $compressor = new compressor(array("javascript"=>array("cachedir"=>'/minify',
  2. "gzip"=>true,
  3. "minify"=>true,
  4. ),
  5. "css"=>array("cachedir"=>'/wp-content',
  6. "gzip"=>true,
  7. "minify"=>true,
  8. ),
  9. "page"=>array("gzip"=>true,
  10. "minify"=>true
  11. )
  12. ));

No site do autor, também é disponibilizado dois links onde ele apresenta duas versões de um mesmo site, a versão comprimida e a versão não comprimida.

E baseando-se no mesmo site, o autor mostra alguns gráficos comprovando os benefícios do uso do PHP Speedy.

Site de testes antes da compressão

uncompressed-small.gif
Tempo total de carregamento 3.68 segundos.

Site de testes depois da compressão

compressed-small.gif
Tempo total de carregamento 875 microsegundos.

Agora o autor mostra os beneficios antes e depois do uso do PHP Speedy, os gráficos foram obtidos utilizando o plug-in YSlow da Yahoo!

Antes da compressão

uncompressed_yslow.gif

Grade de performace: F(45)

Depois da compressão

compressed_yslow.gif

Grande de performace: A(97)

Espero ter contribuído!
[]'s

Leia também:

Porquê semântica faz diferença! on May 15th, 2008
.

Porquê semântica faz diferença: Tag table on June 17th, 2008
.

Porquê semântica faz diferença: Tag acronym on May 29th, 2008
.

Web Standards vs. Projeto em dia on March 7th, 2008
Principalmente nas micro-empresas este é um dilema muito comum e recorrente na cabeça dos pobres desenvolvedores.

Porquê semântica faz diferença: Tag base on June 2nd, 2008
.

Filed in Otimização, PHP, Utilidades | One response so far

Arquivos CSS até 34% mais leves!

Igor Escobar on Fev 18th 2008

Mais uma ferramenta gratuita que facilita e muito a vida dos desenvolvedores web. Durante muito tempo eu fazia esta otimização manualmente, criando uma sequencia de expressões regulares no Dreamweaver que fazia com que eu obtivesse o resultado parecido porém, o tempo despendido nestas tarefas nem se compara.

Apresento a vocês o Clean CSS.

A ferramenta oferece 5 niveis de compressão do seus arquivos CSS:

  • Muito Alta (Sem legibilidade, máxima compressão)
  • Alta (Legibilidade Moderada, compressão alta)
  • Padrão (Balanceamento entre compressão e legibilidade do código)
  • Baixa (Alta legibilidade)
  • Personalizada (Permite que você crie um template de otimização)

Recomendações

Recomendo aos desenvolvedores que tenham em mãos duas versões do seu CSS, uma versão com nível baixo de compressão, para facilitar a manutenção do mesmo. Este arquivo deve ser de posse apenas do desenvolvedor.

E um arquivo CSS com o mais alto nível de compressão para ser publicado na internet. Assim o desenvolvedor garante o máximo desempenho do seu site/blog sem comprometer a continuidade do código.

Configurações recomendadas

Configurações Clean CSS

As configurações passadas acima vale para qualquer nível de compressão, as que estão destacas em vermelho é que devemos ter uma atenção especial.

Resultados

Fiz a otimização do arquivo CSS do blog e veja o resultado que obtive:
Resultado de otimização do Clean CSS
Espero que tenha contribuído!
[]'s

Filed in CSS, Otimização, Utilidades | 2 responses so far

Firefox, perfeito! Internet Explorer, torto?

Igor Escobar on Fev 15th 2008

Este artigo foi feito especialmente para você, caro designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores.

Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que seu site seja renderizado corretamente em todos os navegadores.

De uns tempos para cá tem se visto muito falar nos tais "CSS Resets". Antes de falar o que é o CSS Reset eu vou explicar por quê seu site aparece de um jeito no Firefox e no Internet Explorer de outro (ou vice-versa).

Este problema acontece por que os valores PADRÃO de um navegador para o outro variam, por exemplo, a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. Se você aumentar o numero de tags e possibilidades vai entender que isso acontece não por que o Internet Explorer seja uma bosta (não que não seja ;P) mas sim por que os navegadores dão valores dafaults diferentes para cada tag. Devido a esta falta de padronização de um navegador para o outro, causa a diferença na hora da renderização.

Claro que não são todos. Os navegadores tentam se aproximar um do outro mais sempre passa despercebido uma tag ou outra.

O CSS Reset veio para tentar minimizar estes problemas, o objetivo dele, é resetar todas as propriedades das tags htmls de marcação para que assim não importe de onde você acessa. A margem, a largura etc... sempre vão ser iguais independente do browser que estiver renderizando seu site.

Agora você ficou interessado né? (hehe)
No endereço abaixo você encontra um exemplo do CSS Reset em ação:
http://www.monc.se/tripoli/sample.html

Agora pegue o andereço que eu passei anteriormente e abra em qualquer navegador (IE, FF, OP, NS etc) que você tiver. Se você observar, logo notará não vai ocorrer diferença de posicionamento, margem, formatação, largura, se tiver vai ser insignificante ou seu browser é jurássico.

O Nome deste CSS Reset foi chamado pela MONC de Tripoli

Como posso começar a usar?

Você precisa de 4 arquivos:

  • reset.css - reseta todas as propriedades independente do browser
  • generic.css - re-constrói e atualiza a forma que o HTML é renderizado pelo navegador
  • ie.css - este arquivo contem regras a parte para que o css reset funcione no Internet Explorer.
  • print.css - torna o HTML legível quando impresso.

Como devo chama-los no meu cabeçalho?

Exemplo

  1. <style type="text/css" media="all">  @import url(css/reset.css);  @import "css/generic.css";  </style> <style type="text/css" media="print"> @import url(css/print.css) print; </style><!--[if IE]>
  2.  
  3. <style type="text/css" media="all"> @import url(css/ie.css); </style> <![endif]-->

Espero que tenha contribuído!
[]'s

Pronto!
Agora você só precisa criar o css do seu site e começar a definir as regras do seu layout.
Webtutoriais:B92473D6

Filed in CSS, Otimização, Utilidades | 8 responses so far