Diego Cipriano

PHP - Mascara para CNPJ

2012-09-25T10:15:00.000-03:00

Muitas vezes por questões de estéticas queremos mostrar o CNPJ para o usuário na forma "correta" separando as casas por pontos e por último um hífen se você grava somente os números no banco de dados você tem que fazer um tratamento antes de exibir para o usuário e isso pode ser feito tanto do lado servidor como do lado cliente então vamos ao que interessa.

function MCnpj($v1){
        // aqui nós verificamos se o número passado contem 14 dígitos se os dados estiverem armazenados como números eles não vem com os zeros a esquerda então aqui nós colocamos se for necessario 
 for($n=0; strlen($v1) < 14; $n++){
  $v1 = "0$v1";
 }
        // aqui pecoreemos cada digito e colocamos os "separadores"
 for($n=0, $v2 = NULL; $n < 14; $n++){
  if($n == 2)
   $v2 .= ".";
  else if($n == 5)
   $v2 .= ".";
  else if($n == 8)
   $v2 .= "/";
  else if($n == 12)
   $v2 .= "-";
   
  $v2 .= $v1{$n};
 }
 return $v2;
}

Senha Padrão dos computadores bitlinux/ubuntu

2012-05-10T21:47:00.000-03:00

Bom pessoal não precisa falar muita coisa né? quem estiver com dificuldade para instalar programas as senhas padrões são essas se quiser instalar um programa sem problemas basta autenticar com o usuario root que é o "superusuario".

# su -
esse comando serve para autenticar pelo root "super usuário"

depois é só digitar a senha que é bitlinux

Usuário Padrão
login: usuario
senha: usuario

Super Usuario
login: root
senha: bitlinux

Engenharia de Produção

2012-04-01T10:57:00.000-03:00

Hoje, acordei com a missão de voltar a postar novas dicas de JAVASCRIPT, PHP, HTML5 e um assunto inédito vai começar a rolar por aqui que é Engenharia de Produção curso do qual estou fazendo no momento na verdade é só mais um pretexto pra mim estudar um pouco mais. Então em breve estarei fazendo novos posts no BLOG, quem quiser enviar sugestões é só escrever nos comentários desse post. Obrigado.

Blekko? Google killer?

2010-11-02T15:27:00.000-02:00

Depois do HTML5 ter ganhado o apelido de Flash killer virou moda atribuir a concorrentes tal denominação "killer" o que nesse caso é um absurdo o Blekko foi lançado hoje (11/2010) e mesmo com todo planejamento não podemos afirmar se um produto ou serviço vai da certo no mercado ainda mais lutar contra o "CUSTUME" as pessoas as vezes utiliza um serviço por impulso ou rotina é um mecanismo automático, mas vamos falar do blekko e porque ele traz grandes expectativas, mas ainda esta longe de ser um Google killer a proposta do novo serviço é filtrar o conteúdo da web bem mas o que é isso? quantas vezes você já procurou por algo no google e acabou caindo em sites que nem se quer tinha o mínimo de relevância sobre o que você buscava? Então o Blekko promete retirar esses sites ( que contem muito mais conteúdo marqueteiro do que informações relevantes sobre o que procura) dos resultados. O que ele faz é exibir sites pre aprovados pelos usuários, resta saber se é de fato eficiente esse sistema de busca e qual a sua eficácia para indexar a web, até o dado momento a base de dados do blekko esta voltada na sua maioria para sites americanos.

A google tambem fornece várias formas de filtrar as buscas e não deve ficar parada diante desse cenário ao menos alguma manifestação deverá ser feita em breve.

HTML 5 - Como nem tudo é um mar de rosas

2010-11-02T10:59:00.000-02:00

Ouvimos muito os elogios ao HTML 5 mas vale lembrar que ele tambem tem seus pontos negativos e um deles é que os dados armazenados durante a navegação pode ser analisados (históricos de acesso e localização) isso pode parecer insignificante porem vai ser um prato cheio para empresas de marketing e para os espíritos de porcos mais uma brecha, pois quando bem trabalhadas e analisadas essas informações as empresas de marketing podem usar para fazer uma diferenciada a cada perfil, para alguns isso não tem nenhum problema mas tenha certeza que tem muita gente que se incomoda com a captura dessas informações sem a prévia autorização, não tiro a razão dessas pessoas pois da mesma forma que as empresas de marketing podem utilizar essas informações os cracker podem usar para a pratica da engenharia social e obter mais dados ainda sobre você, não sei ainda se utilizadas bem trabalhadas as ferramentas (HTML5) pode se obter dados mais sigilosos como senhas email's entre outros dados.

HTML 5 - Uma demonstração prática do novo ambiente - Criando um jogo

2010-10-29T13:19:00.004-02:00

ja mostrei aqui alguns exemplos de como o HTML5 vai revolucionar a WEB mas nada com a tag canvas ja tem um tempo que não posto nada devido ao tempo reduzido que estou tendo esses últimos dias então vou somente disponibilizar o código aqui e semana que vem vou fazer um novo post comentando o código eu peguei o mesmo semi pronto o que eu implementei foi apenas algumas outras funcionalidades. segue o link de onde retirei o script original como montar um jogo em HTML5. veja o jogo aqui >>
para visualizar o código basta pedir para o browser exibir o código fonte porem o mesmo esta logo abaixo
Seu HTML

<div style="width:500px; height:20px; font-size:15px; padding:5px; overflow:hidden;" class="redondo gradienteL">
    <strong>Level: </strong><samp id="level">1</samp> 
    <strong>Barras restantes: </strong><samp id="barras">0</samp> 
    <strong>Pontos: </strong><samp id="pontos">0</samp>
       <samp id="pontos"><input style="float:right; font-size:15px; font:Verdana, Geneva, sans-serif; padding:0;" type="button" id="ST" value="PLAY" onClick="status(this)"></samp>
   </div>
   <div style=" width:500px; height:400px;">
    <canvas style="border:#CCC double;" id="canvas" width="500" height="400"></canvas> 
    <div id="result" style="position:relative;left:50%; top:-50%; margin-left:-100px; margin-top:-50px; height:100px; width:200px; border:#CCC double; text-align:center; display:none;"></div>
    <div id="XxX"></div>
    <div id="resultado2"></div>
   </div>
   <script src="jogo.js" type="application/x-javascript"></script>

Seu código javascript "jogo.js"

var x = 150;
var y = 280;
var dx = 3;
var dy = 5;
var IncrementoDx = dx;
var  NROWS = 5; // total de linhas
var  NCOLS = 3; // total de colunas
var xb = 150; // tamanho horizontal da barra
var yb = 10; // tamanho vertical da barra
var St = document.getElementById("ST");
var level = document.getElementById("level");
var result = document.getElementById("result");
var canvas = document.getElementById("canvas");
var pontos = document.getElementById("pontos");
var Pontos = 0;
var n = 0;
var barras;
var WIDTH;
var HEIGHT;
var ctx;
var paddlex;
var paddleh;
var paddlew;
rightDown = false;
leftDown = false;
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var intervalo;
function initbricks() {
  BRICKWIDTH = (WIDTH/NCOLS) - 1;
  BRICKHEIGHT = 15;
  PADDING = 1;

  bricks = new Array(NROWS);
  for (i=0; i < NROWS; i++) {
    bricks[i] = new Array(NCOLS);
    for (j=0; j < NCOLS; j++) {
      bricks[i][j] = 1;
    }
  }
}



function keyDown (evt) {
 key = evt;
  if (evt.keyCode == 13) status(St);
  else if (evt.keyCode == 39) rightDown = true;
  else if (evt.keyCode == 37) leftDown = true;
}

function keyUp(evt) {
 key = null;
  if (evt.keyCode == 39) rightDown = false;
  else if (evt.keyCode == 37) leftDown = false;
}

document.onkeydown=function(event){keyDown(event);}
document.onkeyup=function(event){keyUp(event);}



function init_paddle() {
 posX = (WIDTH/2)-(xb/2);
   paddlex = posX;
   paddleh = yb;
   paddlew = xb;
}


function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}


function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
barras = NCOLS*NROWS // total é igaul a colunas x linhas
if (canvas.getContext) {
  ctx = canvas.getContext("2d");
  WIDTH = canvas.width;
  HEIGHT = canvas.height;
  init_paddle();
  initbricks();
  intervalo = setInterval(draw, 10);
}
}
function perdeu(){
 var canvas = null;
 clearInterval(intervalo)
 init();
}

function ganhou(){
 var canvas = null;
 clearInterval(intervalo)
 NROWS =  NROWS+1;
 NCOLS =  NCOLS+1;
 barras = NCOLS*NROWS
 init();
 levelAt = level.innerHTML;
 level.innerHTML = eval(levelAt)+eval(1);
}
function pontuacao(){
 Pontos = eval(Pontos)+(50*level.innerHTML)/3;
 pontos.innerHTML = Pontos.toFixed(0);
}
function draw() {
  clear();
  circle(x, y, 10);
  if (rightDown){
   if (paddlex < WIDTH-57)
   paddlex += 5;
  }
  else if (leftDown)
  {
   if (paddlex > -5)
   paddlex -= 5;
  }
  rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);

  //draw bricks
  for (i=0; i < NROWS; i++) {
    for (j=0; j < NCOLS; j++) {
      if (bricks[i][j] == 1) {
        rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
             (i * (BRICKHEIGHT + PADDING)) + PADDING,
             BRICKWIDTH, BRICKHEIGHT);
      }
    }
  }

  //have we hit a brick?
  rowheight = BRICKHEIGHT + PADDING;
  colwidth = BRICKWIDTH + PADDING;
  row = Math.floor(y/rowheight);
  col = Math.floor(x/colwidth);
  //if so, reverse the ball and mark the brick as broken
  if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
    dy = -dy;
    bricks[row][col] = 0;
 pontuacao();
 barras -= 1
 if(barras == 0){
  St.value = "PLAY";
  i = 0
  j = 0
  x = 150;
  y = 280;
  result.innerHTML = "<h1>Você Ganhou</h1> Pressione <b>enter</b> para comtinuar";
  result.style.display = "block";
  ganhou();
 }
  }

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy < 0)
    dy = -dy;
  else if (y + dy > HEIGHT-10) {
    if (x > paddlex-10 && x < paddlex + paddlew-10)
 {
  dy = -dy;
  if(key.keyCode == 37)
  {
   if(dx > 0 )dx = -dx;
  }
  else if(key.keyCode == 39){
   
   if(dx < 0 )dx = (dx*-1);
 
  }
 }
    else{
    var i = 0
    var j = 0
        for (i=0; i < NROWS; i++) {
      for (j=0; j < NCOLS; j++) {
          if (bricks[i][j] == 1) {
     bricks[i][j] = 0
    }
   }
  }
 St.value = "PLAY";
 i = 0
 j = 0
 x = 150;
 y = 280;
 result.innerHTML = "<h1>Você Perdeu</h1> Pressione <b>enter</b> reiniciar";
 result.style.display = "block";
 perdeu();
    clearInterval(intervalId);
 }
  }
  if(St.value == "STOP"){
   x += dx;
   y += dy;
  }
  document.getElementById("barras").innerHTML = barras;
}
function status(el){
 if(el.value == "PLAY")
 {
  result.style.display = "none";
  el.value = 'STOP'
  if(dx < 0) dx = dx*-1;
 }
 else el.value = 'PLAY'
}

Então até o próximo post onde vou comentar esse código abraço e obrigado!

OBs: ainda falta muitos detalhes para ficar perfeito mas isso é apenas uma demonstração sinta se a vontade apara usar o código e melhora-lo

HTML 5 CSS 3 - Animação com Quadros(keyframes) e transition

2010-10-18T20:56:00.001-02:00

Olá mais uma vez o assunto é HTML5 gostaria de apresentar algo mais complexo mas assim como muitos ou todos estou em fase de aprendizado e devido a escassês de informações consegui somente alguns efetos basicos utilizando HTML5, CSS3 e um pouco de javascript para produzir o efeito desse texto eu utilizei o seguinte CSS

/*Aqui nós criamos a animação com o nome  apresentacao vale lembrar que os quadros da função keyframes é definido pelo tempo primeiro nós declaramos quais os atributos iniciais do frame logo depois definimos os atributos que o elemento deve conter ao chegar a certa percentagem(de tempo). Exemplo: se a animação durar 10 segundos quando tivermos em 30% logicamente vamos estar em 3 segundos*/
@-webkit-keyframes apresentacao {
 from {
   -webkit-transform: rotateY(-180deg) rotateX(-180deg);
   margin-top:170px;
 }
 30%{
  margin-top:-300px;
  -webkit-transform: rotateY(-180deg) rotateX(-180deg);
 }
 50%{
  margin-top:-300px;
 }
 100% {
   margin-left:0px;
   margin-top:0px;
   -webkit-transform: rotateZ(0deg);
 }
}

Agora só falta criar uma forma de chamar a apresentação então criei uma classe CSS

.apresentacao{
  -webkit-animation-name: apresentacao; /*Declaro qual apresentação vou chamar ao utilizar a classe */
  -webkit-animation-duration: 8s;/*quanto tempo ela deve durar */
  -webkit-animation-iteration-count: 1; /* quantidade de loops(repetições) */
  -webkit-animation-timing-function: ease-in-out; /*Mais detalhes */
  -webkit-animation-direction: alternate; /*Mais detalhes */
}

Coloquei somente os dois link's porque acho que são os unicos precise de Mais detalhes

Abaixo mais alguns efeitos =D

Click aqui para ver tudo.
Para produzir esse efeito basta utilizar esta CSS

.EsconderTexto{
   opacity: 1;
 -webkit-transition-property: width,
  height;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  border: 2px solid #000;
  width: 170px;
  height:20px;
  overflow:hidden;
}

e esse script

<script>if(addEventListener){
 ob = document.querySelector('#texto');
 ob.addEventListener('click', function () {
  if(ob.style.width != "500px"){
   ob.style.width="500px";
   ob.style.height="550px";
  }
  else{
   ob.style.width="170px";
   ob.style.height="20px";   
  }
  }, true);
}
</script>

Forma de Uso

<div id="texto" class="EsconderTexto" >
 escrever aqui o seu texto
    </div>

Passe o mouse para desbotar o elemento
CSS

.desbotar {
  opacity: 1;
  -webkit-transition: opacity 2s linear;
}

.desbotar:hover {
  opacity: 0.2;
}

Bom com isso ja da pra se ter uma noção do que esta por vir

HTML 5 CSS3 - Marcadores de texto!

2010-10-18T11:12:00.001-02:00

Bom pessoal trago aqui mais uma de muitas funcionalidades do HTML5 que é fazer marcadores veja como é simples a source do CSS

<style>
.row:nth-child(even) {
  background: #AB9DF9;
}
.row:nth-child(odd) {
  background: #B9FFC7;
}
</style>
  <div class="row">
Linha 0</div>
<div class="row">
Linha 1</div>
<div class="row">
Linha 2</div>
<div class="row">
Linha 3</div>
<div class="row">
Linha 4</div>
<div class="row">
Linha 5</div>
<div class="row">
Linha 6</div>
<div class="row">
Linha 7</div>
<div class="row">
Linha 8</div>
<div class="row">
Linha 9</div>

Como podem ver é muito simples basta declarar a classe em qual quer tag que o CSS se responsabiliza em realizar o restante da tarefa!

Linha 0

Linha 1

Linha 2

Linha 3

Linha 4

Linha 5

Linha 6

Linha 7

Linha 8

Linha 9

WebP: novo formato de imagens do Google quer matar o JPEG

2010-10-12T15:39:00.001-03:00

Além do HTML5 temos uma nova ferramenta para descarregar os servidores, eu gostei muito da iniciativa e vou apoiar o seu uso devo fazer alguns estudos a mais sobre o assunto e estarei compartilhando em breve com vocês

O que é WebP?

Desenvolvido totalmente com base nas pesquisas realizadas com relação à navegação, a empresa (GOOGLE) criou seu próprio formato de imagens comprimidas, chamado WebP. Ele possui dois métodos de compressão um com perda e outro sem perda a compressão com perda é de 25% a 34% menor que o JPEG com relação ao seu tamanho em bytes e com índices de qualidade equivalente já o a a compressão sem perda é 25% menor que o formato PNG e além de tudo o WebP suporta transparência coisa que o JPEG não faz.

As vantagens e desvantagens do formato
Como dito acima, a grande vantagem do WebP é o fato de ser uma maneira de comprimir as imagens ainda mais do que antes e, mesmo assim, manter uma qualidade muito boa. O lançamento é totalmente em código aberto, para que todos os que quiserem contribuir consigam fazê-lo com facilidade.

Para saber mais acesse https://developers.google.com/speed/webp/?hl=pt-BR
Exemplos de imagens em WebP https://developers.google.com/speed/webp/gallery?hl=pt-BR

Link adicionar contato msn direto do site com um click

2010-10-11T14:04:00.000-03:00

Link para adicionar contato no msn <a href="msnim:add?contact=seu email" title="Add Msn">TEXTO PARA LINK</a> Atenção só funcionar no MSIE pelo menos por enquanto

teste o link
TEXTO PARA LINK

HTML5 - Onde encontrar materiais para estudo da nova e mais esperada versão do HTML

2010-10-09T22:14:00.000-03:00

A nova versão do HTML5 faz muitas pessoas darem o sangue para encontrar materiais para estudo na internet e outros roerem unhas a espera do dia em que vão poder utilizar essa nova versão que ainda não é recomendada pelo W3C mas que ja vem sendo usada por diversas empresas como Apple, Google, Almeida Sports entre outras bom como prometi no post anterior aqui esta os links com ótimos materiais para estudo.

Apresentação interativa

Aqui você encontra uma boa introdução com códigos fontes de HTML, CSS e JAVASCRIPT vale apena conferir
HTML5 Playground

Aqui você tem um editor e depurador para avaliar o seu código (tem vários códigos prontos).
Tutoriais

Aqui todos já sabem, explicação de forma detalhada sobre várias funcionalidades do HTML5.
Exemplos de utilização.
aqui só uma observação não se espante tudo é real da pra fazer mesmo com a nova versão do HTML5.

Studio

Aqui você tem belos exemplos também e mais uma vez podem acreditar e utilizar em suas aplicações os códigos =D

HTML5 - drag and drop (arrastar e soltar) do desktop

2010-10-09T21:54:00.001-03:00

Vo compartilhar com vocês o script que permite com que o usuário araste um arquivo diretamente para página para fazer o upload sem precisar de selecionar peguei esse script na área de playground do HTML5 vou postar logo depois desse post um outro disponibilizando o link onde peguei esse que serve para estudos e tem outros scripts interessantes para serem estudados e mais 2 links que também serve para estudos.

veja o exemplo

<div id="content"></div> 
    <p id="log" style="color: gray"></p> 
    <script> 
      // Content section used alot
      var content = document.getElementById('content');
      
      if (!window.FileReader) {
        content.innerHTML = "<p>Seu navegador não da suporte ao arrastar e soltar do HTML5</p>";
      } else {
        // Layout da Página
        content.innerHTML =
          '<p>Escolha um arquivo clicando abaixo ou araste do seu desktop para ca<br> <input type="file" id="file" /></p>' +
          '<p><b>Nome:</b> <span id="name"></span><br>' +
          '<b>Tamanho do arquivo:</b> <span id="size"></span><br>' +
          '<b>Conteudo:</b> <br><br> <span id="file-content"></span>' +
          '</p>';
      
        // Imprime as propiedades do arquivo
        function displayFile(file) {
          document.getElementById('name').textContent = file.fileName;
          document.getElementById('size').textContent = file.fileSize;
      
          var reader = new FileReader();
      
          reader.onload = function(event) {
            document.getElementById('file-content').innerHTML = 
              event.target.result.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n|\r/g, '<br>');
          };
      
          reader.onerror = function() {
            document.getElementById('file-content').innerHTML = 'Não é possivel ler arquivo ' + file.fileName;
          };
      
          reader.readAsBinaryString(file);
        }
      
        // Inserir arquivos
        document.getElementById('file').onchange = function() {
          displayFile(this.files[0]);
        };
      
        // esconde a borda de destaque ao soltar o arquivo
        content.style.border = '10px solid transparent';
      
        // Adiciona borda se existir evento arrastar
        content.ondragenter = function() {
          content.style.border = '10px solid #b1ecb3';
          return false;
        };
      
        content.ondragover = function() {
          return false;
        };
      
        content.ondragleave = function() {
          return false;
        };
        // esconde a borda de destaque ao soltar o arquivo
        content.ondrop = function(event) {
          content.style.border = '10px solid transparent';
          displayFile(event.dataTransfer.files[0]);
          return false;
        };
      }
    </script>

HTML 5 CSS 3 - Eliminando imagens para fazer layout sem perder a impressão visual.

2010-10-06T15:30:00.006-03:00

Primeiro Post sobre HTML 5.

Esta chegando a hora de dizer bay bay as páginas pesadas na WEB com a chegada do html5 não precisamos mais de usar imagens para fazer layout, com CSS3 e HTML 5 resolvemos o problema de uma só vez veja neste post como é simples fazer um layout(desenho de uma página WEB) com html5 segue abaixo o código e logo depois o exemplo, é uma pena ainda não podermos aderi a essas tecnicas de forma global devido a incompatibilidade de certos navegadores principalmente do MSIE(Microsoft internet explorer) que sempre foi um pé no ~~saco~~ para qual quer desenvolvedor web, pra mim esse navegador tinha que ser exonerado da WEB falou em incompatibilidade falou em MSIE ou ele muda(muda não nasce de novo) ou ele vai sumir essa é a tendência.

A W3C prevê a publicação oficial do html5 para 2012 mas esta fazendo de tudo para adiantar o cronograma bom aproveitem!

<style>
/* nenhuma novidade*/
.bodyY{
border:1px #CCC solid;
width:500px; 
}
.estremos{
padding:4px;
width:480px;
margin:5px;
}
.conteudo{
width:295px;
margin-right:5px;
padding:5px
}
.ColAuxiliar{
width:155px;
float:right;
padding:5px; 
}
/* Novidades */
.bordaredonda{
-moz-border-radius:20px;  /* mozila */
border-radius: 20px;  /* outros */
exemplo
border-radius: 20px 30px 40px 50px.
*/
}
.gradienteL{
background-image: -moz-linear-gradient(top, #999, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#999), to(#FFF));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#999,endColorstr=#FFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#999,endColorstr=#FFF)";
}
.gradienteLF{background-image: -moz-linear-gradient(top, #CCC, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#FFF));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCC,endColorstr=#FFF);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCC,endColorstr=#FFF);
}
.sombra{
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.reflexo{
-webkit-box-reflect: below 10px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255, 255, 255, 0.25))) 0 0 0 0 stretch stretch;
}
h4{
margin:0;
}
</style>
<div class="gradienteLF reflexo bodyY">
<div class="gradienteL sombra bordaredonda estremos" ><h4>Eliminando imagens para criar layout com CSS3 e HTML5</h4></div>
<div style="height:350px; margin:10px;">
<div class="gradienteL sombra bordaredonda ColAuxiliar">Coluna Auxiliar para colocarmos propagandas, links, seguidores, enquetes entre outros gadgets........</div>
<div class="gradienteL sombra bordaredonda conteudo">Aqui viria o conteudo do su site. bom é isso ai a unica conclusão que eu consigo tirar disso tudo é que HTML5 é uma maravilha vamos poder eliminar muitos dos aplicativos para criar nossos web sites e o usuário uma exeperiencia ja mais vista antes com tanta leveza e rapidez viva ao HTML5. <br />
</div>
</div>
<div class="gradienteL sombra bordaredonda estremos">CSS3 HTML5</div>
</div>

Pontos a serem observados

*Sintaxe: border-radius: top left top right bottom right bottom left;

Exemplo: border-radius: 20px 30px 40px 50px.

isso vale tambem para seus derivados como por exemplo -moz-border-radius:

*Sintaxe: background-image: -moz-linear-gradient(sentido do gradiente top-bottom-left-rigth, cor inicial, cor final);

Exemplo: background-image: -moz-linear-gradient(left, #999, #FFF);

*Sintaxe: background-image: -webkit-gradient sintax(tipo de gradiente linear - radial, sentido inicial do gradiente, sentido final do gradiente, from(cor inicial), to(cor final));

Exemplo: background-image: -webkit-gradient(linear, left top, left bottom, from(#999), to(#FFF));

*Sintaxe:box-shadow: bottom rigth extrusão cor da sombra formato (rgba(x, x, x, x));

Exemplo: sombra vermelha box-shadow:5px 5px 5px rgba(255, 0, 0, 100)

isso vale tambem para seus derivados como por exemplo -webkit-box-shadow: 5px 5px 5px rgba(255, 0, 0, 100);

Para vizualizar corretamente esse exemplo use o ou
Até a data em que foi postado essa matéria o Mozila não dava suporte para animation pulse

body

Eliminando imagens para criar layout com CSS3 e HTML5

Coluna Auxiliar para colocarmos propagandas, links, seguidores, enquetes entre outros gadgets........

Aqui viria o conteudo do su site. bom é isso ai a unica conclusão que eu consigo tirar disso tudo é que HTML5 é uma maravilha vamos poder eliminar muitos dos aplicativos para criar nossos web sites e o usuário uma exeperiencia ja mais vista antes com tanta leveza e rapidez viva ao HTML5.

CSS3 HTML5

CSS - Texto em volta da imagem e zoom ao passar o mouse

2010-10-05T19:26:00.003-03:00

Hoje trago uma funcionalidade simples mas útil e bem mais simples do que uma solução javascript a algum tempo ja podemos descartar javascript para fazer muitas coisas graças ao CSS e em breve com o novo HTML e CSS vamos poder incrementar ainda mais o CSS, javascript, e eliminar flash silverligth entre outros agora deixa de bla,bla,bla e vamos ao que enteressa bom o resultado do script abaixo vocês podem ver na imagem do carro logo abaixo basta passar o mouse na mesma e através deste código css vocês podem fazer adaptações da forma que vocês quiserem qual quer duvida pode postar que estarei respondendo o mais breve possível em breve vou começar uma seção de Post sobre HTML5 aguardem!

(Vou colocar varias palavras aqui só para simular um texto para vocês verem como a imagem se comporta) SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT SOLUÇÔES SCRIPT CSS PHP JAVASCRIPT

Segue o Código abaixo.

<style>
/* tira as margens do paragrafo*/
p{
 margin:1em 0;
}
/* define o tamanho do texto*/
p.text{
 width:500px;
}
/* define o tamanho da imagem, borda e como o texto se comporta ao redor dela */
.img img{
 width:120px;
 height:100px;
 border:5px #999 double;
 clear: left;
 float: left;
 margin-bottom: 1em;
 margin-right: 1em; 
}
/* aqui é onde alteramos o tamanho da imagem*/
a.img:hover img{
 position:absolute; /* para ficar por cima do texto se retirada funciona tambem porem vai empurar o texto quando for redimencionada*/
 width:300px; /* largura */
 height:250px; /* altura */
}
</style>
<p class="text">
<a class="img" href="#"><img src="http://images.paraorkut.com/img/papeldeparede/1024x768/c/carro-4039.jpg" /></a>
xxxxxxxxx </p>

Mascara Javascript - Moeda (Monetário)

2010-10-01T12:45:00.003-03:00

Outro dia estava atrás de um script para mascara de moeda e não achava de forma alguma dai um amigo meu disponibilizo esse script o qual eu ainda não parei para fazer uma análise mas ele sempre funcionou perfeitamente.'

Até onde eu sei o Autor do script é Gabriel Fróes

<script language="javascript">
function MascaraMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){
    var sep = 0;
    var key = "";
    var i = j = 0;
    var len = len2 = 0;
    var strCheck = '0123456789';
    var aux = aux2 = '';
    var whichCode = (window.Event) ? e.which : e.keyCode;
    if (whichCode == 13) return true;
    key = String.fromCharCode(whichCode); // Valor para o código da Chave
    if (strCheck.indexOf(key) == -1) return false; // Chave inválida
    len = objTextBox.value.length;
    for(i = 0; i < len; i++)
        if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break;
    aux = '';
    for(; i < len; i++)
        if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i);
    aux += key;
    len = aux.length;
    if (len == 0) objTextBox.value = "";
    if (len == 1) objTextBox.value = "0"+ SeparadorDecimal + "0" + aux;
    if (len == 2) objTextBox.value = "0"+ SeparadorDecimal + aux;
    if (len > 2) {
        aux2 = "";
        for (j = 0, i = len - 3; i >= 0; i--) {
            if (j == 3) {
                aux2 += SeparadorMilesimo;
                j = 0;
            }
            aux2 += aux.charAt(i);
            j++;
        }
        objTextBox.value = "";
        len2 = aux2.length;
        for (i = len2 - 1; i >= 0; i--)
        objTextBox.value += aux2.charAt(i);
        objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
    }
    return false;
}
</script>
<form>
Valor R$: <input type="text" name="valor"  onKeyPress="return(MascaraMoeda(this,'.',',',event))">
</form>

Veja o exemplo

G1 - Eleitor terá que levar documento de identificação com foto para votar - notícias em Eleições 2010

2010-09-30T16:05:00.000-03:00

Fique ligado para evitar transtornos "Os documentos oficiais para comprovação de identidade que serão aceitos, segundo o Tribunal Superior Eleitoral (TSE), são carteira de identidade ou documento de valor legal equivalente (identidades funcionais), certificado de reservista, carteira de trabalho e carteira nacional de habilitação, com foto." "O uso de telefones celulares, máquinas fotográficas e filmadoras dentro da cabine de votação também foi proibido pela minirreforma eleitoral. leia toda reportagem no G1 G1 - Eleitor terá que levar documento de identificação com foto para votar - notícias em Eleições 2010

Globo - Ibope divulga o que os brasileiros pensam das eleições 2010

2010-09-29T21:58:00.000-03:00

Link para ver o video na globo

E enquanto continuar assim vamos continuar no mesmo caminho...

Geolocalização com google Maps

2010-09-29T13:36:00.016-03:00

Olá pessoa hoje venho apresentar a vocês uma forma de geolocalização com o Google Maps é extremamente fácil de utilizar nesse exemplo estarei usando a API V3 o primeiro exemplo que vou mostrar tem as seguintes características ele tenta determinar o local do usuário por meio da propriedade navigator.geolocation do W3C primeiro e depois tenta o método do Google Gears e suspende a operação se nenhum dos métodos funcionar exibindo assim uma localização predeterminada.

Segue o script.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
var initialLocation;
var brasilia = new google.maps.LatLng(-15.780111,-47.9291899);
var browserSupportFlag =  new Boolean();

function initialize() {
  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // Try W3C Geolocation (Preferred)a
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
  
  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("O serviço de geolocalização falhou.");
      initialLocation = brasilia;
    } else {
      alert("Seu browser não suporta geolocalização. Você verá Brasília.");
      initialLocation = brasilia;
    }
    map.setCenter(initialLocation);
  }
}
window.onload = function(){
                initialize();
}
</script>
<div id="map_canvas" style="width:600px; height:400px"></div>

Na terceira linha do segundo script vocês podem ver que eu coloquei uma latitude e uma longetude a qual leva até Brasília então caso o script não consiga pegar a localização do usuário ele determinará esse ponto como padrão na linha 5 depois da function initialize() eu indiquei o ID da div que vai receber as imagens do Google que no caso foi map_canvas esse é um padrão utilizado pelo Google.

Esse é o resultado produzido por esse script:

Vamos para o Segundo exemplo.
O segundo exemplo é basicamente o mesmo do primeiro porem vamos ter identificar o endereço de ip do usuário enviar par o geoplugin e como retorno receberemos os dados do ip disponibilizado pelo mesmo segue o script.
Segue o Script.

<?php
$ip = $_SERVER['REMOTE_ADDR']; // pego o endereço de IP
ini_set("allow_url_fopen", 1);
$response = file_get_contents("http://www.geoplugin.net/php.gp?ip=$ip");
ini_set("allow_url_fopen", 0);
$array = var_export( unserialize ( $response  ), 1);
eval( '$array = '. $array .';');
$data  = new stdClass();
// latitude e longitude
$lt = $data->lat         = $array['geoplugin_latitude'];
$lg = $data->long        = $array['geoplugin_longitude'];
?>
<br>
<br>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(<?php echo $lt; ?>, <?php echo $lg; ?>);
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body>
<?php
echo "Você esta em :";
echo $data->city   = $array['geoplugin_city'];
echo ", ";
echo $data->region = $array['geoplugin_region'];
echo ", ";
echo $data->country     = $array['geoplugin_countryName'];
echo " - ";
echo $data->countrycode = $array['geoplugin_countryCode'];
?>

</body>
</head>
<body onLoad="initialize()">
 <div id="map_canvas" style="width:30%; height:30%"></div>
</body>
</html>

Esse é o resultado produzido por esse script

Bom pesso é isso ai qual quer dúvida ja sabem é so postar ai que vou estar fazendo o maximo para responder!

Mascaras Javascript - DATA - CEP - CPF - CNPJ - SITE

2010-09-28T16:19:00.007-03:00

Uma questão que aflige muitas pessoas que entra na área de programação é como fazer com que o usuário tenha uma visão limpa do que esta digitando.

As expressões do javascript nos auxilia e muito para fazer isso de forma pratica e limpa.

Veja o script das mascaras mais utilizadas

<script>
function mascara(el,masc){
el.value=masc(el.value)
}
function soNumeros(d){
 return d.replace(/\D/g,"")
}
function semNumeros(d){
 return d.replace(/\d/g,"")
}
function soMinusculas(d){
 return d.toLowerCase()
}
function soMaiusculas(d){
 return d.toUpperCase()
}
function cep(d){
    d = soNumeros(d)
    d=d.replace(/^(\d{5})(\d)/,"$1-$2")
    return d
}
function cnpj(d){
    d = soNumeros(d)
    d=d.replace(/^(\d{2})(\d)/,"$1.$2")
    d=d.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")
    d=d.replace(/\.(\d{3})(\d)/,".$1/$2")
    d=d.replace(/(\d{4})(\d)/,"$1-$2")
    return d
}
function cpf(d){
    d = soNumeros(d)
    d=d.replace(/(\d{3})(\d)/,"$1.$2")
    d=d.replace(/(\d{3})(\d)/,"$1.$2")

    d=d.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
    return d
}
function url(d){
    d=d.replace(/http:\/\/?/,"")
 d = soMinusculas(d)
    dominio=d
    d="http://"+dominio
    return d
}
function telefone(d){
    d = soNumeros(d)
    d=d.replace(/^(\d\d)(\d)/g,"($1) $2")
    d=d.replace(/(\d{4})(\d)/,"$1-$2")
    return d
}
function data(d){
    d = soNumeros(d)
    d=d.replace(/(\d{2})(\d)/,"$1/$2")
 d=d.replace(/(\d{2})(\d)/,"$1/$2")
    return d
}
</script>

function mascara ela nada mais é de quem chama a mascara a ser executada ela recebe como parâmetro o elemento que esta chamando ela e qual tipo de mascara ele deseja mas não é obrigatório o uso dela chama-la diretamente é preciso fazer apenas algumas adaptações simples.

Como todas as mascaras aqui tem como base uma única função eu vou dar explicação só da função caso precise de um esclarecimento maior sinta se a vontade para perguntar.

a função que utilizamos para criar as mascaras é replace ela simplesmente substitui os caracteres que você especificar por outro ta mas e esse monte de barra por exemplo replace(/\D/g,"") as barras são delimitadores e nesse exemplo ele substitui tudo que não for número por "" (vazio) caso você passe para ela o seguinte texto ("15 Dias") ela retorna 15 para entender melhor veja abaixo

<script>
texto = "ABCDE abcDe 12345 HIJKL hijkl 67890";
alert(texto.match(/\d/)); // essa expressão diz para retornar o primeiro número que ele encontrar na variável texto naturalmente ele retorna 1.

alert(texto.match(/\d/g)); // já essa expressão diz para retornar todos os números naturalmente ele  retorna 1,2,3,4,5,6,7,8,9,0.

alert(texto.match(/[d]/)); // já essa expressão diz para retornar a primeira letra d  aqui ele encontrar retorna null pois na variável <strong>texto</strong> só existe "D".

alert(texto.match(/[d]/i)); // já essa expressão diz para retornar a primeira letra d  aqui ele encontrar naturalmente ele retorna "D".

alert(texto.match(/[d]/gi)); // já essa expressão diz para retornar a primeira letra d  aqui ele encontrar naturalmente ele retorna "D,D".

</script>

Veja os exemplos

Só números	Sem números

Só Minúsculas	Só Maiúsculas

CEP	CNPJ

CPF	Telefone

Data formato dd/mm/aaaa	URL

3 - CAPTCHA COM PHP - colocando em prática

2010-09-28T10:58:00.006-03:00

Depois de ver alguns conceitos e entender a importancia de cada função chegou a hora de montar nosso captcha então segue abaixo o script comentado, caso alguem tenha alguma dúvida poste ai.

<?php
session_start();
/* se voce quiser que ele diferencie minúsculas de maiúsculas substitua isso 
$resposta = strtolower($_POST["CAPTCHA"]) != strtolower($_SESSION["CAPTCHA"]) por isso
$resposta = $_POST["CAPTCHA"] != $_SESSION["CAPTCHA"]*/

if($_POST["CAPTCHA"]) $resposta = strtolower($_POST["CAPTCHA"]) != strtolower($_SESSION["CAPTCHA"])? "Você digitou CAPTCHA errado tente novamente" : "Você digito CAPTCHA corretamente";

$v = array("a","A","e","E","i","I","o","O","u","U");
$c = array("b","B","c","C","cr","CR","d","D","f","F","g","G","h","H","nh","NH","lh","LH","ch","CH","j","J","k","K","l","L","m","M","n","N","p","P","qu","QU","r","R","rr","RR","s","S","ss","SS","t","T","v","V","w","W","x","X","y","Y","z","Z","pr","PR","tr","TR");

$tamanho_palavra = rand(4,7); // defini minimo e o maximo de caracteres
$Caractere = 0;
// cria a palvra do CAPTCHA
while($Caractere < $tamanho_palavra){
   $V = $v[rand(0,count($v)-1)];
   $C = $c[rand(0,count($c)-1)];
   $palavra .=$C.$V;
   $Caractere = strlen($palavra);
}
$_SESSION["CAPTCHA"] = $palavra; // guardo a palavra gerada na sessão
// começo a criar a imagem //
$font = imageloadfont("fontes/lizze.gdf"); // carrego a fonte a ser usada 
$Nome = "CAPTCHA.png"; // define o nome da imagem gerada
$imagem = ImageCreate(300,100); // define os tabanhos

$branco = ImageColorAllocate($imagem, 255, 79, 79); // cor do fundo

$w = 60; // define a largura do circulo
$h= 60; // define a altura do circulo
// faço os circulos para confundir os robos a função rand determina o minimo e o maximo de circulos
for($n=0;$n<rand(2,4);$n++)
{
 // cor da linha do circulo aqui eu fiz uma seleção que de valores randomicos para gerar cores do tom vermelho a verde
 $cordalinha = ImageColorAllocate($imagem, rand(10,255), rand(100,255), rand(0,100)); 
 $i=0;
 $x = rand(0,285);
 $y = rand(0,85);
 $quantos = rand(10,100);
 for($i=0;$i<$quantos;$i++)
 {
  imagearc($imagem, $x, 20, $w-($i/5), $h-($i/5),rand(90,360),rand(90,360),$cordalinha);
        imagearc($imagem, $x, 20, $w+($i/5), $h+($i/5), rand(90,360),rand(90,360), $cordalinha);
    }
}
/// texto ///
$cordotexto = ImageColorAllocate($imagem, rand(39,0), rand(18,100), rand(55,255));
ImageString($imagem, $font, rand(20,55), rand(20,35), $palavra, $cordotexto);
// salva a imagem 
ImagePNG($imagem, $Nome );
// limpa a memória
ImageDestroy($imagem);
// coloca a imagem no diretório
$destino = "./imagens/$Nome";
$copy = copy($Nome, $destino); 
?>
<table width="304" height="100" bgcolor="#ff4f4f">
 <tr>
  <td>
   <img style=" position:absolute; width:300px; height:100px; text-align:center; z-index:1" src="imagens/fundo.png" />
   <img src="imagens/CAPTCHA.png" />
  </td>
 </tr>
 <tr>
  <td align="center">
   digite o texto acima<br />
   <form method="post">
    <input type="text" size="30" name="CAPTCHA" /><input type="submit" value="Enviar" /><br />
    <font size="-1">O programa não diferencia maiúsculas ou minusculas!</font>
   </form>
  </td>
 </tr>
</table>
<?php
echo $resposta;
?>

Obs: Cria uma pasta chamada imagens no local onde o script for executado ou altere o local para onde a imagem deve ir.

Veja este Exemplo abaixo:

download do exemplo
Para acompanhar todos os post relacionado a esse tema basta seguir esse link Criar captcha

Validar CPF

2010-09-27T16:40:00.006-03:00

Olá amigos.

Vou compartilhar uma função para gerar e validar CPF.

pra questão de entendimento vamos exemplificar como que se faz isso no papel.

Primeiramente pegamos 9 números entre (0-9) aleatóriamente.

Para descobrir o primeiro digito verificador é só multiplicarmos o primeiro digito por 10 o segundo por 9 de forma constante e decrescente depois somamos os resultados e dividimos por 11 pegamos o resto e arredondamos caso o resultado seja 10 o digito verificador é 0 veja no exemplo abaixo.

|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |
|  x  |  x  |  x  |  x  |  x  |  x  |  x  |  x  |  x  |
|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |
|-----|-----|-----|-----|-----|-----|-----|-----|-----|
   1   + 4  +  9  +  16  + 25 + 36  + 49  + 64  + 81  = 285 / 11 = 25,909090... arredondamos o resto da divisão e obtemos o 10 então o nosso primeiro digito é 0

para descobrir o segundo digito verificador é basicamente da mesma forma.
veja o exemplo abaixo.

|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  0  |
|  x  |  x  |  x  |  x  |  x  |  x  |  x  |  x  |  x  |  x  |
|  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |
|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
  0   +  2  +  6  +  12  + 20 + 30  + 42  + 56  + 72  +  0  = 240 / 11 = 81,818181... arredondamos o resto da divisão e obtemos o 9 nesse caso o nosso digito é 9

então nosso CPF é 123.456.789-09

segue nosso script comentado

<script>
function CPF (acao){
var ResponseCpf  = "cpf";
var ResponseVerifica = "status";
 
 if(acao == "Gerar")
 {
  n=0;
  var cpf = "";
  // gera os 9 digitos
  for(n==0; n<9; n++)
  {
   x = String(Math.round(Math.random()*9));
   cpf += x;
  }
  // faz o calculo do primeiro digito
  dg1 = (cpf.slice(0,1)*1+cpf.slice(1,2)*2+cpf.slice(2,3)*3+cpf.slice(3,4)*4+cpf.slice(4,5)*5+cpf.slice(5,6)*6+cpf.slice(6,7)*7+cpf.slice(7,8)*8+cpf.slice(8)*9)%11;
  
  // se for 10 então é = 0
  if(dg1==10) dg1=0;
  
  // acrescenta o digito no nosso cpf
  cpf +=eval(dg1);
  
  //faz o calculo do primeiro digito
  dg2 = (cpf.slice(0,1)*0+cpf.slice(1,2)*1+cpf.slice(2,3)*2+cpf.slice(3,4)*3+cpf.slice(4,5)*4+cpf.slice(5,6)*5+cpf.slice(6,7)*6+cpf.slice(7,8)*7+cpf.slice(8,9)*8+cpf.slice(9)*9)%11;
  
  // se for 10 então é = 0
  if(dg2==10) dg2=0;

  // acrescenta o digito no nosso cpf
  cpf +=eval(dg2);
  
  document.getElementById(ResponseCpf).value = cpf;
  document.getElementById(ResponseCpf).focus();
 }
 
 if(cpf == 00000000000 || cpf == 11111111111 || cpf == 22222222222 || cpf == 33333333333 || cpf == 44444444444 || cpf == 55555555555 || cpf == 66666666666 || cpf == 77777777777 || cpf == 88888888888 || cpf == 99999999999)
 {
  document.getElementById(ResponseVerifica).value = "Falso";
  return false;
 }
 add = 0;
 for (i=0; i < 9; i ++)
 add += parseInt(cpf.charAt(i)) * (10 - i);
 rev = 11 - (add % 11);
 if (rev == 10 || rev == 11)
 rev = 0;
 if (rev != parseInt(cpf.charAt(9)))
 {
  document.getElementById(ResponseVerifica).value = "Falso";
  return false;
 }
 add = 0;
 for (i = 0; i < 10; i ++)
 add += parseInt(cpf.charAt(i)) * (11 - i);
 rev = 11 - (add % 11);
 if (rev == 10 || rev == 11)
 rev = 0;
 if (rev != parseInt(cpf.charAt(10)))
 {
 document.getElementById(ResponseVerifica).value = "Falso";
 return false;
 }
 document.getElementById(ResponseVerifica).value = "Verdadeiro";
 return false;
} 
</script>

Formulário para gerar e verificar CPF

<form name="cpf">
CPF:<input type="text" id="cpf" maxlength="11" onkeyup="CPF('Verificar');" /><br />
Status: <input size="6" type="text" disabled="disabled" id="status" /><Br />
<input type="button" onclick="CPF(this.value)" value="Gerar" />
<input type="button" onclick="CPF(this.value)"  value="Verificar" /><br />
</form>

Veja o Exemplo

é isso ai qual quer dúvida postem ai!

2 - CAPTCHA COM PHP Quais funções vamos utilizar?

2010-09-25T19:27:00.003-03:00

Esse é o segundo post sobre como criar um captach é para esclarecer quais funções vamos usar para ficar bem claro o que estamos fazendo.

Essas são as funções que vamos utilizar.
strtolower() ou strtoupper()
array()
rand()
strlen()
imageloadfont()
ImageCreate() ou imagecreatetruecolor()
ImageColorAllocate()
imagearc()
ImageString()
ImagePNG()
ImageDestroy()
$copy()

O strtolower() - Converte uma string para minúsculas e o strtoupper() - Converte uma string para maiúsculas.

Exemplo

echo strtolower("CAPATCHA");

O exemplo acima imprime: captcha.

Exemplo:

echo strtolower("captcha");

O exemplo acima imprime: CAPATCHA então vamos escolher uma das duas para fazer um código que não diferencie maiúsculas de minúsculas.

A função array() é onde nós vamos armazenar as vogais e consoante paga futuramente gerar uma palavra aleatória.

Exemplo:

echo array('b','B','c','C','cr')

Esse exemplo retorna Array

A função rand() gera um número aleatório vamos utilizar para posicionar a palavra do captcha em posições diferentes e também os círculos como também gerar palavras e círculos com cores diferentes.

A função count() auxilia a função rand() a selecionar as vogais e consoante da array() para formar nossa palavra.

Exemplo:

echo count(array('b','B','c','C','cr'));

O exemplo acima retorna 5 é o número de índices do array().

A função strlen() é responsável por contar quantos caracteres tem a nossa palavra e parar a função que gera a palavra quando atingir o número de caracteres especificado ou gerado em tempo de execução.

Exemplo:

echo strlen('captch');

O exemplo retorna 6 esse é o nuúmero de caracteres da palavra captch.

A partir daqui não temos mais exemplos somente uma pequena descrição das funções.

A função imageloadfont() carrega a fonte que vamos utilizar para criar a imagem da palavra.

A função ImageCreate() ou imagecreatetruecolor() retorna um identificador de imagem representando uma imagem .

A função ImageColorAllocate() aloca cores dentro da imagem no formato RGB para ser usada na imagem.

A função imagearc() cria circulos dentro da imagem.

A função ImageString() cria texto dentro da imagem.

A função ImagePNG() é quem determina qual formato será gerada a imagem vamos passar dois parâmetros a variável onde esta armazenada a imagem e o nome da imagem.

A função ImageDestroy() esvazia a memória utilizada para criar essa imagem.

A função copy() é usada para copiar a imagem para o local desejado

Para acompanhar todos os post relacionado a esse tema basta seguir esse link Criar captcha

1 - CAPTCHA COM PHP - Pequena descrção de captcha

2010-09-25T09:27:00.006-03:00

Estou iniciando hoje uma série de post sobre CAPTCHA até o final vamos aprender fazer um.

CAPTCHA é um acrônimo da expressão "Completely Automated Public Turing test to tell Computers and Humans Apart" (teste de Turing público completamente automatizado para diferenciação entre computadores e humanos) em outras palavras é um sistema para evitar que spammers certas operações constantemente em um período curto de tempo ou até mesmo que computadores realize essa operação e é ai que o captcha entra ele pode ser uma seqüencia de caracteres distorcida assim como uma operação matemática onde os números também venha distorcidos ou perguntas aleatórias lembrando que a missão não é dificultar que humanos utilize o serviço pelo contrario tem que ser de fácil entendimento para humanos mas difícil para os computadores. Veja a foto do nosso futuro captcha.

Até o próximo post. para acompanhar todos os post relacionado a esse tema basta seguir esse link Criar captcha

Como armazenar dados no BD sem correr o risco de sofrer sql injection inclusive aspas simples, duplas e tags?

2010-09-24T13:50:00.006-03:00

As vezes é preciso guardar fielmente os dados que o usuário passa para seu banco de dados para depois devolve-lo da forma que ele postou e se você simplesmente deixar-lo livre para inserir os dados de qual quer maneira um usuário com espírito de porco pode simplesmente apagar toda a tabela onde fica armazenado esses dados utilizando técnicas de sql injection então
Para fazer tal coisa sem correr riscos é muito simples basta aplicar uma criptografia nos dados antes de inserir no banco de dados caso tenha alguma tag que você queira eliminar(impedir o seu uso) basta usar as expressões regulares para fazer isso então vamos lá.

O script completo no está final do post

Vou disponibilizar a função anti_sql_injection de duas maneiras uma que elimina as tags indesejáveis e uma outra caso você queira que a tag não seja executada mas que apareça como a pessoa digitou nos 2 exemplos vou utilizar a tag <script> </script> como indesejada mas você pode colocar quantas tags quiser como indesejada.

Primeiro temos essa que mentem a tag mas não a utiliza.

<?php
function anti_sql_injection ($str) {
 $str = preg_replace("[<script>]", "&lt;script&gt;", $str);
 $str = preg_replace("[/<script>]", "&lt;/script&gt;", $str);
 $str = base64_encode($str);   
 return $str;
}
?>

No exemplo acima se você digitar <script> alert("1") </script> <strong>O rato roeu a roupa do rei de roma</strong> o resultado será:
<script> alert("1") </script> O rato roeu a roupa do rei de roma
Depois temos essa que elimina as tags indesejadas

<?php
function anti_sql_injection ($str) {
 $str = preg_replace("[<script>]", "", $str);
 $str = preg_replace("[/<script>]", "", $str);
 $str = base64_encode($str);   
 return $str;
}
?>

No exemplo acima se você digitar <script> alert("1") </script> <strong>O rato roeu a roupa do rei de roma</strong> o resultado será:
alert("1") O rato roeu a roupa do rei de roma

Para reverter a operação e mostrar ao usuário é so chamar a função TrataDados($str)

<?php
function TrataDados($str) {
  
 $str = base64_decode($str);
 return $str;
}
?>

Código completo

Ajax sem segredo

2010-09-23T15:46:00.001-03:00

Para compreender perfeitamente você deve atender aos requisitos abaixo.
Requisitos minimos: ter noções básicas de HTML.
Requisitos recomendado: ter noções básicas de HTML, saber o que é funções javascript e como chama-las.

Quem não entender pode postar suas dúvidas que estarei respondendo às aqui mesmo.

Vou mostrar um exemplo onde você seleciona um estado e o ajax busca as cidades do estado.

O que é ajax?
Grande parte das pessoas que iniciam a programação na web se perguntam que linguagem de programação é essa? Calma filho ajax não é uma nova linguagem de programação é apenas uma técnica de usar o java script para fazer páginas dinâmicas ou seja atualizar os dados na tela sem precisar carregar a página toda novamente então vamos lá para um exemplo simples como todos já sabem só se começa pelo começo.

Primeiramente vamos criar o nosso script que pode ser criado em um arquivo .js ou declarar no cabeçalho da sua página (entre as TAG's <head><script>...</script></head> vou explicar um pouco mais logo abaixo.

<script>
var ajax;
var requeste;

function RequisicaoAjax(tipo,url,status){
 // criamos o objeto
 if(window.XMLHttpRequest){
  ajax = new XMLHttpRequest();
 }else
 {
  if(window.ActiveXObject){
   ajax = new ActiveXObject("Msxml2.XMLHTTP");
   if(!ajax){
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
   }
  }
 }
 // verificamos se o objeto foi criado
 if(ajax){
  inicia(tipo,url,status); // chama a função que inicia o objeto
 }else{
  alert("Não possui suporte a AJAX");
 }
}

// inicia o objeto e envia a requisição
function inicia(tipo,url,bool){
 ajax.onreadystatechange=trataResponse;
 ajax.open(tipo,url,bool);
 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
 ajax.send(requeste);
}
function enviaDados(url){
 criaQueryString();
 RequisicaoAjax("POST",url,true);
}

function criaQueryString(){
 requeste="";
 var frm = document.forms[0];
 var numElementos = frm.elements.length;
 for(var i=0;i < numElementos;i++){
  if(i< numElementos-1){
   requeste += frm.elements[i].name+"="+
   encodeURIComponent(frm.elements[i].value)+"&";
  }else{
    requeste += frm.elements[i].name+"="+
    encodeURIComponent(frm.elements[i].value);
  }
 }
}
function trataResponse(){
 if(ajax.readyState==4){
document.getElementById("aguarde").innerHTML="aguarde...";
  if(ajax.status ==200){
   document.getElementById("aguarde").innerHTML="";
   document.getElementById("result").innerHTML = ajax.responseText;
  }else{
   document.getElementById("aguarde").innerHTML="Erro na requisição"+ajax.responseText;
  }
 }
}

function CapturaDados(form)// Função que pega todos os dados do formulário
{
 var url = form.name; // pega o nome do formulário
//captura os dados dos select
 elementosForm = form.getElementsByTagName("select");
 for(i=0; i < elementosForm.length; i++){
  
  if(elementosForm[i].value != ""){
   url = url + elementosForm[i].name + "=" + elementosForm[i].value + "&";
  }
 }
// chama a requisição
RequisicaoAjax("GET",url,true);
}
</script>

Agora é só criar o formulário e pronto virão como é fácil

<form name="AulaAjax.php?" method="post" action="javascript:void%200" onsubmit="return false;">
Estado:
<select onchange="CapturaDados(this.form)" name="estado">
 <option value="">Selecione...</option>
    <option value="AC">ACRE</option>
    <option value="AL">ALAGOAS</option>
    <option value="BA">BAHÍA</option>
</select>
Cidade:
<select id="result">
</select>
<br />
<input type="submit" onclick="CapturaDados(this.form)" value="Enviar" />
</form>

Veja exemplo funcionando

Dowload do exemplo.

OBS: essa função não permite a requisição em páginas fora do seu domínio.

Em breve vou estar postando como utilizar JSON com PHP e AJAX.