Desenvolvimento Web | Tudo Sobre WEB

Tooltip com Jquery

2009-09-30T05:31:00.000-07:00

Simples Tooltip com Jquery.. plugin vTip pode ser baixado aqui.


<a href="http://www.vertigo-project.com" title="This is an example of a link tooltip." class="vtip">Link Tooltip</a>

<img src="http://www.vertigo-project.com/vertigo.png" title="This is an image!" class="vtip" />

<div class="vtip" title="This tooltip shows for the whole div!">This div has a tooltip.</div><

para implementar é só adiiconar a class vtip e botar um title.
dúvidas só comentar.

Abrir link's em nova janela

2009-09-30T05:08:00.000-07:00

Fala galera, bom muitos já devem de saber mas como o padrão XHTML 1.0 Strict não nos permite usar uns códigos que usavamos no padrão Transitional, então para ajudar a validação do seu site no padrão Strict aqui tem uma solução com Jquery para substituir o famoso target="_blank".

Então vou postar a solução simples e explicar como funciona, segue o código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Teste</title>
<meta http-equiv="Content-Language" content="pt-br" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
 /* <![CDATA[ */

 $(function() {
 $("a[rel~=external]").click(function() { 
  $(this).attr("target","_blank");
 });
 });
 
 /* ]]> */


</script>
<style type="text/css">
body { font-family: Arial; font-size: 12px; }
ul li { width: 500px; heigth: 50px; display: block; background: #ccc; margin: 2px; padding: 5px; }
ul li a { color: white }
ul li:hover { background: #666; color: #f4f4f4 }
</style>
</head>
<body>
 <ul>
  <li><a href="http://www.google.com.br" rel="external">google.com.br</a></li>

 </ul>
</body>
</html>

Bom como o que acontece então?
Simples ao clicar em qualquer link que conter a tag rel="external", irar ser adicionado a tag target="_blank".

Isso é o suficiente parar validar seu código. A tag target="_blank" só sera inclusa quando você utilizar o rel="external".

Espero que tenham gostado e até a próxima.

FAQ: Estilizado com Jquery

2009-07-24T14:20:00.001-07:00

Ae galera segue um exemplo que fica bem legal com Jquery também pode-se usar em outras partes do seu site como por exemplo menus ou algo do tipo.

Quando resolvi bolar este tutorial foi para parte de faq de um site qualquer.

bom vamos ao código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Teste</title>
<meta http-equiv="Content-Language" content="pt-br" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
 /* <![CDATA[ */

 $(function() {
  //aqui escondo todas as linhas que estão com a classe .esconde
  $(".esconde").hide();

  //agora em cada linha que o usuário clicar será mostrado a próxima linha que possui a classe .esconde
  $("ul li").click(function() { 
   $(this).next(".esconde").slideToggle(300);
  });
 });
 
 /* ]]> */

</script>
<style type="text/css">
body { font-family: Arial; font-size: 12px; }
ul li { width: 500px; heigth: 50px; display: block; background: #ccc; margin: 2px; padding: 5px; }
ul li:hover { background: #666; color: #f4f4f4 }
.esconde { background: white !important; border: solid #ccc; border-width: 1px 0; }
</style>
</head>
<body>
  <ul>
   <li>1. Pergunta Um ?</li>

   <li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
   <li>2. Pergunta Dois ?</li>
   <li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>

   <li>3. Pergunta Três ?</li>
   <li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
  </ul>
</body>
</html>

o jquery está comentado o resto é tranquilaço..
só copiar o código e colar em um bloco de notas e ver o resultado..
qualquer dúvida.. prendem o grito

[]'s.

Elementos html com cantos arredondados.

2009-06-22T06:21:00.000-07:00

Plugin para deixar cantos de elementos html arredondados.

Bom primeiramente vamos baixar a última versão do Jquery, no exemplo eu testei com a versão 1.3.2. (aqui).
Após realizado o download do Jquery vamos baixar o plugin jQuery Corner (aqui).

Vamos ao html agora..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<title>Cantos Arredondados</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" charset="utf-8">

/* <![CDATA[ */

 $().ready(function(){
        $("#hp").corner("round");
 });

/* ]]> */
</script>

</head>
<body>
<div id="hp">

  <p>Conteudo aqui</p>
  <p>Conteudo aqui</p>
  <p>Conteudo aqui</p>
  <p>Conteudo aqui</p>

  <p>Conteudo aqui</p>
</div>
</body>
</html>

Muito simples :D

Veja aqui mais exemplos:
http://malsup.com/jquery/corner/

Feito até a próxima.
[]'s

Carregando arquivo em Div - Ajax com Jquery

2009-06-18T04:15:00.000-07:00

Ae galera.. hoje vou demonstrar um exemplo bem simples e de grande utilidade. Vamos carregar um arquivo atráves do Jquery com o método load().
Vou usar um exemplo bem simples com 2 radio buttons onde as opções serão, Pessoa Física e Pessoa Jurídica.

Bom primeiramente vamos criar nosso arquivo html :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<title>Jquery - Carrega Arquivo em Div</title>

<script type="text/javascript" src="/andre/abas/ui/jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */

 $().ready(function(){
  $("#cliente_pj").click(function() {
   $("#load").load('/andre/abas/pfpj.php?tipo=pj',carregando('#load'));
  });
  $("#cliente_pf").click(function() {
   $("#load").load('/andre/abas/pfpj.php?tipo=pf',carregando('#load'));
  }); 
 });

 var divnome;
 var carregando = function(divnome) {
  $(divnome).html("Carregando....");
 }; 

/* ]]> */

</script>

</head>
<body>
<p><strong>Tipo de Pessoa:</strong></p>
<p><input name="tp_cliente" id="cliente_pj" value="pj" type="radio"> <label for="cliente_pj">Pessoa JurÃdica</label></p>

<p><input name="tp_cliente" id="cliente_pf" value="pf" type="radio"> <label for="cliente_pf">Pessoa FÃsica</label></p>

<br />
<div id="load" style="width: 300px; height: 100px; border: 1px solid #ccc;"></div>
</body>
</html>

eu criei a função carregando onde nela vc vai passar um seletor onde vc vai querer que carregue seu arquivo.

criado nosso arquivo html, agora vamos criar um arquivo php, eu chamei ele de pjpf.php


 if(isset($_GET)) {
  if ($_GET['tipo'] == "pj") {
   echo "Pessoa Jurídica.";
  } else {
   echo "Pessoa Física.";
  }
 }

O legal disso que posso passar parametros via GET ou POST para minerar melhor os dados :)..

qualquer dúvidas ou sugestões :)

[]'s

Obter informações de um outro site

2009-06-10T07:10:00.000-07:00

Fala galera, tudo beleza?

Seguinte.. essa semana eu estava desenvolvendo um site para um cliente e houve a necessidade de pegar dados sobre o Clima aqui da nossa cidade (Santa Maria - RS).

Ai pesquisando na internet achei um jeitinho em PHP de pegar informações de um outro site :D

Abaixo segue o código.. bem simples


$ch = curl_init();
$timeout = 0;
curl_setopt($ch, CURLOPT_URL, 'http://tempo1.cptec.inpe.br/cidades/previsao.do?parameter=estendida&id=4599');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$conteudo = curl_exec ($ch);
curl_close($ch);

$conteudo = utf8_encode($conteudo);
preg_match_all('/div id="sub3"(.+)div id="mini"/s', $conteudo, $array); 

$dados = $array[0][0];

echo $dados;

Aqui vai uma breve introdução sobre a biblioteca cURL do PHP

O PHP suporta a libcurl, uma biblioteca criada por Daniel Stenberg, que permite a você conectar e comunicar com vários tipos diferentes de servidor com vários tipos diferentes de protocolos. libcurl atualmente suporta os protocolos http, https, ftp, gopher, telnet, dict, file, e ldap. libcurl também suporta certificados HTTPS, HTTP POST, HTTP PUT, upload com FTP (isto também pode ser feito com a extensão de ftp do PHP), upload baseado em formulário HTTP, proxies, cookies, e autenticação usuário+senha.

Mais informações clique aqui.

Voltando ao código nos gravamos o site na variável $conteudo.
Ai com a função preg_match_all defino com expressões regulares e pequenos trechos de código o que realmente eu quero pegar.. no caso eu pego o conteúdo que está entre os códigos..


div id="sub3"
....
div id="mini"

e após isso o conteúdo fica salvo em um array que denominei de $array.

ai no final eu apenas imprimo a posição onde se encontra o conteúdo dentro do array..

Seria isso.. qualquer dúvidas prende o grito :)

PS: Ai o código esta bem simples.. mas depois você poderá tratar os dados que obter, com str_replace e algumas outras funções para deixar os dados, digamos que mais apresentaveis :)

Outra coisa super importante, ali onde eu coloquei a função preg_match_all deverá colocar as tags das Div's corretamente.

[]'s

Verificando se existe algum elemento com Jquery

2009-06-03T06:26:00.000-07:00

Ae galera beleza?

Bom hoje pela manhã estava desenvolvendo um sistema e estava fazendo um formulário do tipo wizard.
Então ao chegar no último passo do meu formulário eu adiciono o botão que submete meus dados. Só que dai eu estava com um probleminha, pois meu sistema, possui uma navegação dos passos, ai quando eu clico no úlitmo passo mais de uma vez ele adiciona o botão mais de uma vez.

Então eu descobri um jeitinho muito simples com Jquery de como verificar se determinado elemento ou seletor existe.

Exemplo:


if ($(".wizardend").length > 0) {
   alert("O Botão já foi adicionado");
}

Simples, não?

Qualquer dúvida, comentar!

Abraços!

Python + MySql

2009-05-28T15:33:00.000-07:00

Fala galera beleza?

Hoje vamos fazer uma conexão com o banco de dados e realizar uma simples consulta.

Primeiramente vamos baixar e instalar o mysql-python clicando aqui. Descompacte o arquivo e abra o command do windows e digite a seguinte linha


python setup.py install

Após realizar nossa instalação do mysql, agora vamos por a mão na massa :)


import MySQLdb

conecta = MySQLdb.connection('host', 'user', 'pass')
conecta.select_db("banco_de_dados")

cursor = conecta.cursor()
cursor.execute("SELECT * FROM tabela")
resultado = cursor.fetchall()

for x in resultado:
     print x

Simples, não?
Qualquer dúvida... estamos aí!

Abraço!

Instalando Python

2009-05-26T11:07:00.000-07:00

Bom pessoal, aqui vai um breve tutorial de instalação do Python e executando um código na Shell do Python :D

Vamos la então...

Acesse o site do python http://www.python.org/download/ e baixe a última versão eu estou usando esta versão aqui.

Após realizar o download vai clicando em next até o final, por padrão o python é instalado no diretório C:\Python26\

Depois de instalado o python vamos adicionar nas variaveis de ambiente do Windows o caminho do python..
Vá em Iniciar -> Configurações -> Painel de Controle -> Sistema. Na aba Avançado, localize o botão Variáveis de ambiente. Em Variáveis de sistema, localize Path ou PATH, clique Editar e acrescente o valor: ;C:\Python26

Feito isto vamos abrir o command do windows e digitar python, irá aparecer uma tela mais ou menos com isso


Python 2.6 (rr26:66721, Oct 2 2008, 11:35:03) [MSC v.1310 32 bit (Intel)] on win 32
Type "help", "copyright", "credits" or "license" for more information.
>>>

Agora para testar é só digitar


print "Ola Python"

Abraço!

Máscaras com Jquery

2009-04-02T07:13:00.000-07:00

Bom pessoal hoje eu estava trabalhando em um projeto e descobri com um colega de trabalho um plug-in para jquery de mascaras de campos de texto ;DD

Primeiramente baixe o plug-in aqui ou acesse o site do mesmo aqui.

Depois de realizar o download do mesmo, inclua no seu cabeçalho html..
feito isto, ainda no cabeçalho do seu html..
vamos incluir o seguinte código..

var masks = {
set : function() {
$(".mask-cpf").mask("999999999-99");
$(".mask-cnpj").mask("99.999.999/9999-99");
$(".mask-cep").mask("99.999-999");
$(".mask-telefone-nacional").mask("(99) 9999-9999");
}
};

$(function() {
masks.set();
});

ai depois é só incluir o campos de texto..
exemplo abaixo...

CEP: <input type="text" name="cep" id="cep" class="mask-cep" />
CPF: <input type="text" name="cpf" id="cpf" class="mask-cpf" />

bom por enquanto é isso..
caso tiveres dificuldade quanto a implementação do mesmo..
só prender o gritoo..

[]'s

Introdução ao CodeIgniter.

2009-03-31T03:53:00.001-07:00

Bom pessoal, eu vou começar a falar sobre um dos melhores Framework PHP, o CodeIgniter.

O Code Igniter é um framework de desenvolvimento de aplicações - algo como um kit de ferramentas - para quem constrói sites em PHP.

Seu objetivo, através de um abrangente conjunto de bibliotecas voltadas as tarefas mais comuns, de uma interface e uma estrutura lógica simples para acesso àquelas bibliotecas, é possibilitar que você desenvolva projetos mais rapidamente do que se estivesse codificando do zero.

Code Igniter permite que você mantenha o foco em seu projeto minimizando a quantidade de código necessário para uma dada tarefa.

Para quem é o Code Igniter?

Code Igniter é para você se:

* Você quer um framework leve e que não ocupe espaço.
* Você precisa de expecional performance.
* Você precisa de compatibilidade vasta com empresas de hospedagem que rodam uma variedade de versões e configurações do PHP.
* Você quer um framework que precise de quase nenhuma configuração.
* Você quer um framework que não precise que você use a linha de comando

.
* Você quer um framework que não lhe deixe preso a regras restritivas de codificação.
* Você não está interessado em monolíticas bibliotecas como a PEAR.
* Você não quer ser forçado a aprender uma linguagem de templates (no entando, um parser de template está disponível, como opcional, se você desejar um).
* Você evita a complexidade, preferindo soluções simples.
* Você precisa de uma clara e completa documentação.

Aqui no site oficial do mesmo, tem 2 videos-tutoriais bem interessantes para o pontapé inicial.

http://codeigniter.com/downloads/

http://codeigniter.com/tutorials/

Logo eu irei montar um exemplo bem simples, mas utilizando bem os padrões do MVC.

até a próxima.

Salvando os acessos dos Robots

2009-03-30T14:24:00.000-07:00

Fala galera beleza? Bom aqui vai meu primeiro post, gostaria de falar que estou em um dilema com o GoogleBot. Meu amigo possui um site que nunca foi indexado pelo google. Então resolvemos adicionar o site no google através desta URL: Aqui. Adicionamos o site neste serviço do google, passaram-se 2 dias e nada. Ai coloquei um script para detectarmos se os Bot’s estavam ou não acessando a página deste meu amigo, se os bots acessarem o site será incluso em um arquivo .txt

Abaixo o script que foi colocado no inicio da pagina inicial do site:


$robot = array();

if(eregi("google",$_SERVER['HTTP_USER_AGENT'])) { $robot['buscador'] = "Google"; }
if(eregi("slurp",$_SERVER['HTTP_USER_AGENT'])) { $robot['buscador'] = "Yahoo"; }
if(eregi("msn",$_SERVER['HTTP_USER_AGENT'])) { $robot['buscador'] = "MSN"; }

if(isset($robot['buscador'])) {
$fp = fopen("VerificaBots.txt", "a+");
$log = "\n".$robot['buscador']." - ".date("d/m/Y H:m:s")."\n";
fwrite($fp, $log);
fclose($fp);
}

Documentação de Auxílio:
eregi();
fopen();
date();

Dúvidas quanto a implementação do script, é só prender o grito.

Abraços