Dica da semana:

Siga nosso blog e receba direto do seu email Mais Códigos, antes de todos.

Artigo do Dia

TOP 5 Códigos Livres - Script Brasil

Linha de Código - Artigos

Blog Do Raí

Novidades de Criarweb.com

::Tutoriais Photoshop::

Photoshopus | Tutoriais Photoshop

Free, design, art

TrabalhosFeitos.com RSS Feed

terça-feira, 11 de junho de 2013

PHP - Enviar Email

Envia os dados recebidos por um formulário para um email.

<?
$to = "alguem@email.com";
$titulo = "Titulo do email";
$from = "nao.responda@teste.com";



$headers = "MIME-Version: 1.0\n".
"Content-type: text/html; charset=iso-8859-1\n".
"From: ".$from." \n";



$mensagem = "<strong>Nome</strong>: ".$_POST['nome']." <br /><br />";
$mensagem .= "<strong>Email</strong>: ".$_POST['email']." <br /><br />";
$mensagem .= "<strong>Mensagem</strong>:<br />". nl2br($_POST['mensagem']);



// enviar email
if ( mail($to,$titulo,$mensagem,$headers,null) ) { $msg = "Email enviado!"; }
else { $msg = "Problema ao enviar!"; }

?>

Fonte: CódigoPronto

PHP - Lendo RSS (feed)

No wikipedia temos uma breve descriçao do que significa RSS,

A tecnologia do RSS permite aos usuários da internet se inscreverem em sites que fornecem "feeds" RSS. Estes são tipicamente sites que mudam ou atualizam o seu conteúdo regularmente. Para isso, são utilizados Feeds RSS que recebem estas atualizações, desta maneira o utilizador pode permanecer informado de diversas atualizações em diversos sites sem precisar visitá-los um a um.

Esse código permite você "leia" um feed RSS e mostre diretamente no seu site.
Dessa forma permitindo que seu site esteja sempre ATUALIZADO, já que ele vai ler as notícias diretamente de sites especializados.

Perceba que nesse código é utilizado o comando file_get_contents() do PHP, lembrando que esse comando muitas vezes está desabilitado nos servidores. Dessa forma é possível utilizar as funçoes cURL.

Para facilitar coloquei no código uma funçao: file_get_contents_curl($url), que substitui a file_get_contents() caso necessário.

Obs: Apenas testei usando a funçao file_get_contents(). Se alguém conseguir usar de forma normal, por favor, comente no post.

 function file_get_contents_curl($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Set curl to return the data instead of printing it to the browser.
curl_setopt($ch, CURLOPT_URL, $url);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
/*
* @desc Funcao que carrega um arquivo RSS ler e mostra em uma lista no seu site
*
* */
function getFeed($feed_url, $n=10) {
        $cont=1;
        $content = file_get_contents($feed_url);
    // $content = file_get_contents_curl($feed_url); // caso esteja desabilitado o comando acima
    $x = new SimpleXmlElement($content);
 
    echo "<ul>";
 
    foreach($x->channel->item as $entry) {
    if($cont > $n) { break; }
    echo "<li> $entry->pubDate <a target='_blank' href='$entry->link' title='$entry->title'>" . $entry->title . "</a></li>";
    $cont++;
    }
    echo "</ul>";    
}
// Utilizando a funcao
$feed_url = "http://g1.globo.com/Rss2/0,,AS0-9356,00.xml";
getFeed($feed_url,20);
 

Fonte: CódigoPronto

PHP - Criar um Captcha simples


Este código está na categoria php e mostra o seguinte assunto: Como criar um Captcha simples com php e javascript, em destaque estão os marcadores php, código, php, javascript,
Esse tipo de teste é um Captcha, acrônimo de Completely Automated Public Turing Test to tell Computers and Humans Apart (Teste de Turing público completamente automatizado para distinguir computadores de seres humanos). Eles também são conhecidos como um tipo de prova interativa humana (Human Interaction Proof - HIP). Você provavelmente já viu montes de testes Captcha em sites na Internet. O mais comum é uma imagem com várias letras distorcidas. Seu trabalho é digitar a série correta de letras em um formulário. Se as letras baterem com aquelas da imagem distorcidas, você passa no teste. Segue um modelo simples em php dividido em 3 arquivos.

 1 - Página principal

<img src="codigo_captcha.php"> <form name="form_consulta" method="post" action="validar_captcha.php"> digite o código: <input name="codigo" type="text" id="codigo2" size="20"> <input type="submit" name="Submit" value="enviar"> </form>

2 - Captcha

<?php session_start(); // inicial a sessao //para gerar o codigo aleatorio $input = array("a","b","c","d","e","0","1","2","3","4","5","6","7","8","9"); //escolhe 5 elementos $rand_keys = array_rand($input,5); //codigo criado $codigo = $input[$rand_keys[0]].$input[$rand_keys[1]].$input[$rand_keys[2]].$input[$rand_keys[3]].$input[$rand_keys[4]]; header("Content-type:image/gif"); $img = imagecreate(80,30); $preto = imagecolorallocate($img,0,0,0); //defino algumas outras cores $branco = imagecolorallocate($img,255,255,255); //IMPORTANTE: Neste exemplo copie o arquivo de fonte para a mesma pasta que este arquivo imagettftext($img,15,10,10,28,$branco,"verdana.ttf","$codigo"); imagegif($img); imagedestroy($img); $_SESSION["codigo"] = $codigo ; ?>

3 - Validar

<?php session_start(); if ($_POST["codigo"] == $_SESSION["codigo"]) { echo "<h1>Código correto</h1>"; } else { echo "<h1>Código incorreto</h1>"; } ?> <a href='javascript:history.go(-1);'>Retornar</a>

Fonte: CódigosFonte

PHP - Separar emails e pegar somente o primeiro nome

Este código está na categoria php e mostra o seguinte assunto: Separar emails e pegar somente o primeiro nome , em destaque estão os marcadores php, código.

Veja abaixo o código:

<?
$para= "joel@onda.com.br,eliel@brt.com.br,guimaster@teste.com.br,maria@yahoo.com.br,";
$para1 = explode(',',$para);

for($i= 0 ; $i < count($para1)-1; $i++)
{
$usuario = substr($para1[$i], 0, strpos ($para1[$i], '@'));
echo "$usuario $para1[$i] PARABENS<BR>" ;
}
?>

Fonte: CódigosProntos

PHP - Tirar email de texto

Esse script ensina como filtrar um email de um texto qualquer. Funciona somente com um email.

Veja abaixo o código:


<?php
//texto
$detalhes ="joel alves da luz joel@onda.com.br teste do teste.";

$detalhes =str_replace('"',"",$detalhes);
$detalhes = str_replace("'","",$detalhes);
$detalhes = str_replace("
"," ",$detalhes);



//parte 1
$part0 = explode("@",$detalhes);
$part01 = $part0[0];
$parte1fim = strrchr($part01,' ');

//parte 2
$emailx = $detalhes;
if (preg_match('/@(.+)$/', $emailx, $matches)) {
$dominio = $matches[1];
$part1 = explode(" ",$dominio);
$parte2fim = $part1[0];
}

echo "Texto original: $detalhes<br>";

echo "email: $parte1fim@$parte2fim<br>";
?>

Fonte: CódigosProntos

Evitar que uma página seja impressa

Veremos um pequeno truque com folhas de estilos para evitar que se possa imprimir uma página web com o botão de imprimir de nosso navegador.

Para isso, temos de usar as folhas de estilo. Tanto se o documento tem uma folha já associada como senão, o que vamos fazer é associar-lhe uma nova folha de estilos. Tal folha conterá um estilo, com o código necessário para ocultar um elemento:

.naover{
visibility:hidden
}

Na hora de associar a folha de estilos, se acrescenta um modificador à etiqueta HTML que linka com o arquivo .css que permite especificar para que tipo de meio se aplicará esta folha. Em nosso caso, se aplica no âmbito da impressão, pelo que se utiliza o atributo media="print".



Uma vez feito isso, basta que toda nossa página esteja dentro de um elemento div, que pertença à classe nãover.





-- Conteúdo --



>


Ao fazer isto provoca que a página seja visualizada na tela, mas que se pelo contrário se decide imprimir, se aplicará a folha de estilos de impressão, na qual o elemento está posto como não visível, portanto não se imprimirá.



Página HTML


<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<div class="naover">

… conteúdo da página

</div>
</body>
</html>

Folha estilos: estilos.css

.naover{
visibility:hidden
}
 
 
Fonte: CodigoFonte 

Barra de rolagem invertida

A barra de rolagem nos aplicativos normalmente são posicionados do lado direito da tela, porém com este código, utilizando o atributo CSS direction:ltr é possível inverter o lado da barra de rolagem.

 <html>
<head>
<title>Barra de Rolagem Invertida</title>
</head>
<body style="direction: rtl">

<div style="height:1080">
<b>Barra de Rolagem Invertida</b>
</div>

</body>
</html>

Fonte: CodigoFonte

Mudando o cursor do mouse de links

Com este código é possível mudar o cursor do mouse, ao passar sobre os links.
Também explicarei como criar um cursor personalizado.

1 - Usando os cursores padrão

É muito simples, com isso você pode fazer aparecer o cursor como se estivesse carregando, ocupado, ajuda, e outros ao passar o mouse sobre uma imagen/texto. 

Exemplo: 

<img src="http://www.blablabla.com/exemplo/ex.jpg" style="cursor:wait">

bastando apenas inserir 

style="cursor:XXX" 

dentro da TAG, onde XXX é o nome do cursor. Abaixo estão os nomes: 

style="cursor:hand" 
style="cursor:crosshair" 
style="cursor:text" 
style="cursor:wait" 
style="cursor:move" 
style="cursor:help" 
style="cursor:n-resize" 
style="cursor:s-resize" 
style="cursor:e-resize" 
style="cursor:w-resize" 
style="cursor:ne-resize" 
style="cursor:nw-resize" 
style="cursor:se-resize" 
style="cursor:sw-resize" 

2 - Usando cursores personalizados

Nesse caso deve se substituir o nome do cursor pela URL do cursor personalizado. Como no exemplo abaixo... 

style="cursor: url(http://www.urldocursor.com/seucursor.cur)"

e ai está, seu cursor diferente, espero que gostem.
 
 
Fonte: CodigoFonte

CSS para resolução de tela

Muitas vezes, temos certos problemas quanto a resolução de tela em Sites ou Aplicações Web. Por exemplo, criamos um serviço muito útil para Web, criado primeiramente para resolução de tela 1024px ou superior, com três colunas de conteúdo, imagens grandes etc., e que recebe diariamente 10.000 visitas.

Vamos imaginar que ao analizar as estatísticas do sistema, verificamos que 30 % dos usuários utilizam resolução 800 x 600
e 8% utilizam ainda a resolução de 640 x 480 px. Com certeza o nível de rejeição de um sistema como esse, por melhores que sejam suas funcionalidades, será alto, pois a experiência que usuários passarão não será muito agradável.

Para tentar resolver esse problema podemos utilizar um recurso simples, em Java Script, hoje muito utilizado no chamado Ajax, fazendo com que o navegador reconheça a resolução do usuário e atribua um CSS específico àquela resolução. Vamos começar abaixo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8&#8243; /><title>Detectando Resolução de tela</title>

<link rel=”stylesheet” href=”geral.css” type=”text/css” media=”screen” />

<script type=”text/javascript” language=”javascript”>

if (screen.width >= “1024&#8243;) {
document.write(’<link rel=”stylesheet” href=”geral.css” type=”text/css” />’)
}
else {
document.write(’<link rel=”stylesheet” href=”auxiliar.css” type=”text/css” />’)
}
</script>

</head>
<body>

...

</body>
</html>
 
 
Fonte: CodigoFonte 

Barras de navegação simples com CSS

Ao desenvolver uma página é necessário na maior parte dos caso do desenvolvimento de uma área de navegação para que o visitante possa acessar rapidamente as páginas do site.

Neste código é apresentada uma barras de navegação, na versão vertical e horizontal.
A barra é bem simples e bonita e que pode ser personalizada facilmente conforme o layout.

<html>
<head>
<title>Barras de Navegação CSS</title>

.::Barras na Horizontal::.

<style type="text/css">
.barNav a {
font: 12px  Arial, Verdana,Helvetica,sans-serif;
color: #FFFFFF;
text-decoration: none;
background:  #6495ED;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 0px solid #000000;
}


.barNav a:hover {
color: #666666;
background: #FCFCFC;
border: 1px solid #666666;
}

-->
</style>

<body>
<p class="barNav">
<a href="seu_link.html" >Home</a>
<a href="seu_link.html">Jogos</a>
<a href="seu_link.html">Mural de Recados</a>
<a href="seu_link.html">Fotos</a>
<a href="seu_link.html">Vídeos</a>
<a href="seu_link.html">Eventos</a>
<a href="seu_link.html">Contato</a>
</p>


.::Barras na Vertical::.

<style type="text/css">
.barNav a {
font: 12px  Arial, Verdana,Helvetica,sans-serif;
color: #FFFFFF;
text-decoration: none;
background:   #6495ED;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 0px solid #000000;
}

</style>


<p class="barNav">
<a href="seu_link.html" >Home</a> <br>
<a href="seu_link.html">Jogos</a> <br>
<a href="seu_link.html">Mural de Recados</a> <br>
<a href="seu_link.html">Fotos</a> <br>
<a href="seu_link.html">Vídeos</a> <br>
<a href="seu_link.html">Eventos</a> <br>
<a href="seu_link.html">Contato</a> <br>
</p>

</body>
</html>
 
Fonte: CodigoFonte 

Menu - Apple (CSS)

Esse código replica o estilo de menu de navegação horizontal normalmente atribuído ao estilo da Apple. Inclui submenus. Para usar é muito simples:
  1. Insira o código 1 dentro do cabeçalho HEAD da página
  2. Coloque o código 2 onde desejar
Customize de acordo com suas necessidades, alterando os links, inserindo novas opções ou submenus.
Recomendo que salve a imagem original (http://www.uploadeimagem.net/upload/4723f62c.png) em seu próprio servidor, para manter a disponibilidade.

Código 1: copie apenas abaixo;
<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>

Código 2: copie apenas abaixo;
<style type="text/css">.cssmenu ul {margin: 0; padding: 7px 6px 0; background: #7d7d7d url(http://www.uploadeimagem.net/upload/4723f62c.png) repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
.cssmenu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
.cssmenu a {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding:  8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;  text-shadow: 0 1px 1px rgba(0,0,0, .3); }
.cssmenu a:hover {background: #000; color: #fff;}
.cssmenu .active a, 
.cssmenu li:hover > a {background: #666 url(http://www.uploadeimagem.net/upload/4723f62c.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
.cssmenu ul ul li:hover a,
.cssmenu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
.cssmenu ul ul a:hover {background: #8f8f8f url(http://www.uploadeimagem.net/upload/4723f62c.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
.cssmenu li:hover > ul {display: block;}
.cssmenu ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(http://www.uploadeimagem.net/upload/4723f62c.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
.cssmenu ul ul li {float: none; margin: 0; padding: 3px; }
.cssmenu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
.cssmenu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
* html .cssmenu  ul {height: 1%;}</style>
<div class='cssmenu'>
<ul>
   <li class='active '><a href='index.html'>Inicio</a></li>
   <li><a href='#'><span>Produtos</span></a>
      <ul>
         <li><a href='#'><span>1</span></a></li>
         <li><a href='#'><span>2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>Sobre</span></a></li>
   <li><a href='#'><span>Contato</span></a></li>
</ul>
</div>
 Fonte: CodigoFonte

Mudando estilos de Links de uma DIV

Neste tutorial iremos aprender à mudar os estilos dos links de uma DIV.
O padrão dos links é azul antes de clicar e roxo, após o clique.
Podemos mudar estes padrões, sem incluir classes na tag do link, baseados apenas na DIV onde os links estão.

//aqui fica o css:

.divdeexemplo a{
color:#fff;
text-decoration:none;
}
//aqui mudamos o nosso link para a cor branca e sem decoração (como sublinhar)
//agora mudamos o link quando passamos o mouse por cima:
.divdeexemplo a:hover{
text-decoration:underline;
}
//quando passa o mouse por cima, o link fica sublinhado.

//agora insira no HTML:

<div class="divdeexemplo">
<a href="#">Link de Exemplo</a>
</div>

//fácil, não?
 
 
 Fonte: CodigoFonte

Usando Pseudo Classes para estilizar links

Aprenda a definir estilo CSS para a tag a (link).

Neste exemplo são utilizadas as Pseudo Class: LINK, VISITED, ACTIVE, HOVER.

LINK é utilizada para links não visitados.
VISITED é utilizada para links já visitados
HOVER é utilizada para definir estilo para quando o mouse é colocado acima do link
ACTIVE é utilizada para quando o link é selecionado via teclado ou clicado pelo mouse.

<style>
<!--
.estilo:link {color: black; text-decoration: none}
.estilo:visited {color: blue; text-decoration: none}
.estilo:active {color: red; text-decoration: none}
.estilo:hover {color: gray; text-decoration : none}
-->
</style>


Atribuindo o estilo ao link :

<a href="link.html" class="estilo"><b>Link</b></a>

 Fonte: CodigoFonte

segunda-feira, 10 de junho de 2013

Adicionando link para seu Feed RSS na barra de endereços do navegador

Os navegadores modernos, como Firefox, Google Chrome, Opera e IE7+ possuem um recurso no qual é possível informar ao visitante que na página na qual ele está navegando há um feed de notícias correspondente e que ele poderá ficar por dentro das novidades daquela página, ou área do site, assinando o feed.

Para informar ao visitante sobre este recurso, os navegadores decidiram colocar um ícone do feed (aquele laranjinha que todo mundo conhece) na barra de endereços (url).

Essa é uma forma interessante de fidelização de visitantes, já que mesmo voltará ao seu site através do feed.

Para adicionar esse recurso, primeiramente você precisa criar o feed rss para seu site e adicionar o seguinte código entre as tags HEAD de sua página:


<link rel="alternate" title="Título do seu Feed RSS" href="http://endereco-completo-do-seu-feed-rss" type="application/rss+xml" />

Fonte: CodigoFonte

Como adicionar RSS na página inicial do Google

Para quem deseja utilizar o Google personalizado [ http://www.google.com.br/ig?hl=pt-BR ] como página inicial e ler feeds nele como os disponíveis aqui no site, fica a dica de como inserir seus conteúdos nele:

Cole no seu navegador a URL
http://www.google.com/ig/setp?et=qkQqPlZN&url=http://www.google.com/ig&n_25=url%3D[#####Aqui#####]%26val%3D3
e substitua o trecho [#####Aqui#####] pelo caminho do Rss que deseja que seja exposto no Google.

Fiz um exemplo na sessão de códigos com todos os caminhos para os feeds disponíveis aqui do site. Testei e funcionaram perfeitamente. É bom pra se manter antenado sempre as novidades.


Apenas copie e cole no seu navegador as urls abaixo...
Pronto, vc tem os feeds do Código Fonte disponíveis no Google...

Notícias e Novidadeshttp://www.google.com/ig/setp?et=qkQqPlZN&url=http://www.google.com/ig&n_25=url%3Dhttp://www.codigofonte.com.br/rss/noticias%26val%3D3
Códigos Fonte http://www.google.com/ig/setp?et=qkQqPlZN&url=http://www.google.com/ig&n_25=url%3Dhttp://www.codigofonte.com.br/rss/codigos%26val%3D3
Downloads http://www.google.com/ig/setp?et=qkQqPlZN&url=http://www.google.com/ig&n_25=url%3Dhttp://www.codigofonte.com.br/rss/downloads%26val%3D3
Vídeo Aulas http://www.google.com/ig/setp?et=qkQqPlZN&url=http://www.google.com/ig&n_25=url%3Dhttp://www.codigofonte.com.br/rss/videos%26val%3D3

 Fonte: CodigoFonte

XML - Aceitar caracteres especiais

O parser do XML não aceita caracteres especias como: & ! ^ ' ", para poder utilizar estes caracteres podemos utilizar a tag CDATA do XML, onde tudo que estiver dentro de uma seção CDATA será ignorado pelo parser, abaixo podemos ver um exemplo da utilização da seção CDATA.


<?xml version="1.0" encoding="iso-8859-1" ?>

<retorno>
<linha><![CDATA[<span id=start>Iniciado</span><br /><br />]]></linha>
<linha><![CDATA[<span id=user>jose:</span> opa ]]></linha>
<linha><![CDATA[<span id=admin>Thiago:</span> e ai ]]></linha>
<linha><![CDATA[<span id=user>jose:</span> blz ]]></linha>
<linha><![CDATA[<span id=user>jose:</span> e ai  ]]></linha>
<linha><![CDATA[<span id=user>jose:</span> como ta vc ]]></linha>
<linha><![CDATA[<span id=user>jose:</span> <strong>Encerrou a sessão.</strong>]]></linha>
</retorno>

Fonte: CodigoFonte

Tradutor

Todos os direitos reservados á Mais Códigos 2013 © Copyright - Designer: