NOVIDADES100 Tem de Tudo
Sistema em Php para Envio de Emails
Sistema em Php para Enviar Email com Mensagens e Imagens Anexadas
Obs: Este aplicativo é um pouco diferente do anterior (Ver Aqui), que apenas criava textos em html para sites de relacionamento. Este envia Emails no formato html com mensagens e imagens anexadas.
Teste o Aqui Aplicativo
Veja aqui como colocar no seu Site um sistema simples para que seus usuários possam enviar Emails com mensagens e imagens anexadas. Você poderá criar vários aplicativos para festas do ano como Dia dos Namorados, Aniversário, Natal, etc. Aproveitei aqui para colocar de uma forma bem simplificada, utilizando poucos arquivos, coisa que você pode e deve acrescentar o quanto achar necessário.
Para começar, crie um diretório na raiz do seu site chamado niver_cards. Agora crie um outro diretório dentro deste (niver_cards), e nomeie-o de images. Crie mais uma pasta, esta já dentro da pasta images e nomeie-a de thumbs. Pronto. Coloque dentro de images quatro arquivos de imagens de mais ou menos 360px por 400px, nomeando-as respectivamentes como 01, 02, 03 e 04 (Como disse, utilizarei poucos arquivos). Dentro da pasta thumbs coloque as mesmas imagens, só que em tamanhos reduzidos, tipo 100px por 80px. Todas em jpg (jpeg).
Você pode Baixar o Arquivo Completo Aqui (Inclusive com pastas e arquivos xml para você poder criar um gadget para o Orkut e Igoogle). Depois basta extrair na raiz do seu site.
O url para o aplicativo deverá ficar assim: http://www.seu_site.com/niver_cards/
Diretório do Ajax
Crie uma pasta dentro do diretório niver_cards, nomeie-a como js e salve dentro dela o arquivo abaixo com o nome de ajax.js.
function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
var xmlRequest = GetXMLHttp();
function loadImg(url){
var url = url;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("load_image").innerHTML = "<div style='width:100%;height:420px;text-align:center;'><img src=../images/loading.gif'></div>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("load_image").innerHTML = xmlRequest.responseText;
}
}
Diretório Htm
Neste diretório, você deve salvar quatro pequenos arquivos, cada um representa uma das imagens carregadas na página principal do aplicativo.
Atenção: Cada linha abaixo representa um arquivo, ou seja, a primeira linha você copia separadamente das outras e salve como cartao-01.htm, a segunda cartao-02.htm, a terceira cartao-03.htm e a quarta e última cartao-04.htm.
<img class="image" src="images/01.jpg" alt="imagem" title="imagem"><p class="copiar">01</p>
<img class="image" src="images/02.jpg" alt="imagem" title="imagem"><p class="copiar">02</p>
<img class="image" src="images/03.jpg" alt="imagem" title="imagem"><p class="copiar">03</p>
<img class="image" src="images/04.jpg" alt="imagem" title="imagem"><p class="copiar">04</p>
Index - Arquivo Principal
O código abaixo é o arquivo principal do aplicativo, você deve salvá-lo como index.html, nele contém botões para exibir as imagens grandes (Cartões) e para chamar o formulário de envio de Emails.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Enviar Cartões de Aniversário</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="images/thumbs/favicon.ico">
<script type="text/javascript" src="js/ajax.js"></script>
<style type="text/css">
body{width:98%;height:auto;padding:1%;background:#600;color:#ffa;margin:0px;text-align:center;}
p{color:#ffd;font-size:90%;text-align:left;}
p.copiar{font-size:170%;font-family:arial;font-weight:bold;margin:0px;color:#900;text-align:center;}
table.cartoes{width:100%;height:auto;padding:0px;margin:0px;}
td.cartoes{width:25%;height:auto;padding:0px;margin:0px;background:#ffa;}
img.cartoes{width:100%;height:100px;margin:0px;}
button.display{width:100%;height:70%;padding:0px;margin:0px;border:0px;background:none;}
button.cartoes{background:#290;color:#fff;font-size:100%;border:1px solid #ddb;}
#load_image{width:98%;height:350px;background:#ddb;text-align:center;padding:1%;margin-top:10px;}
img.image{width:100%;height:92%;}
h1{color:#eec;text-align:center;font-size:160%;margin:5px;}
h2.cartao{font-size:120%;color:#ff7;clear:both;}
img{border:0px;}
p{color:#eee;text-align:left;}
i{color:#3cf;}
b{color:#fc0;}
input{height:auto;background:#ffd;color:#00f;border:1px solid #000;background:#fff;font-size:90%;font-weight:bold;}
</style>
</head>
<body>
<h1>Enviar Cartão de Aniversário</h1>
<p>Para enviar um <b>Cartão de Aniversário</b> para um amigo e/ou parente, escolha uma das imagens da tabela abaixo clicando sobre cada uma delas, isto fará com que ela seja mostrada em tamanho grande com um número abaixo, este número será sua identificação, ou seja, este será o nome da imagem que você irá inserir no campo <b>imagem</b> do formulário para enviar. Depois de escolhida a imagem, click no botão <b>verde</b> exposto sob cada imagem da tabela para acessar o formulário de envio.</p>
<table class="cartoes"><tr><td class="cartoes">
<button class="display" onclick="loadImg('htm/cartao-01.htm');"><img class="cartoes" src="images/thumbs/01.jpg" alt="Enviar Cartão" title="Enviar Cartão"></button>
<button class="cartoes" onclick="window.open('htm/enviar.php','popup','width=520,height=570,margin-left=0,margin-top=0');">Enviar Este Cartão</button>
</td><td class="cartoes">
<button class="display" onclick="loadImg('htm/cartao-02.htm');"><img class="cartoes" src="images/thumbs/02.jpg" alt="Enviar Cartão" title="Enviar Cartão"></button>
<button class="cartoes" onclick="window.open('htm/enviar.php','popup','width=520,height=570,margin-left=0,margin-top=0');">Enviar Este Cartão</button>
</td><td class="cartoes">
<button class="display" onclick="loadImg('htm/cartao-03.htm');"><img class="cartoes" src="images/thumbs/03.jpg" alt="Enviar Cartão" title="Enviar Cartão"></button>
<button class="cartoes" onclick="window.open('htm/enviar.php','popup','width=520,height=570,margin-left=0,margin-top=0');">Enviar Este Cartão</button>
</td><td class="cartoes">
<button class="display" onclick="loadImg('htm/cartao-04.htm');"><img class="cartoes" src="images/thumbs/04.jpg" alt="Enviar Cartão" title="Enviar Cartão"></button>
<button class="cartoes" onclick="window.open('htm/enviar.php','popup','width=520,height=570,margin-left=0,margin-top=0');">Enviar Este Cartão</button>
</td></tr></table>
<div id="load_image"><img class="image" src="images/01.jpg" alt="Enviar Cartão" title="Enviar Cartão"></div>
</body>
</html>
Formulário e Resposta Php
Neste exemplo especificamente eu juntei o formulário com a resposta do php, ou seja, o usuário não irá ser redirecionado.
Obs: Como eu coloquei o script em php neste arquivo ele deve ser salvo com a extensão php. Salve-o como enviar.php no diretório htm (Para não criar um outro diretório).
Atenção: Não esqueça de alterar o trecho do código na cor verde para seu domínio completo.
<html>
<head><title>Enviar Cartão de Aniversário</title>
</head>
<body>
<style type="text/css">
body{width:98%;height:auto;padding:1%;background:#eec;color:#007;margin:0px;}
h1{font-size:210%;color:#280;text-align:center;}
p,a,ul,label{color:#009;font-size:90%;font-weight:bold;text-align:left;}
input{background:#ffc;color:#00a;font-weight:bold;border:1px solid #bb9;}
textarea{background:#ffc;color:#00a;font-weight:bold;border:1px solid #bb9;}
</style>
</head>
<body>
<h1>Enviar Cartão de Aniversário</h1>
<p>Para enviar um <b>Cartão de Aniversário</b> para um amigo e/ou parente preencha todos os campos corretamente, digitando no final uma mensagem com até 300 caracteres.<br>
No campo <b>Imagem</b> insira o identificador da imagem escolhida, ou seja, um número de dois dígitos, Ex: 01, 02, 03 e 04.</p>
<form method="POST" action="">
<table><tr><td>
<label>Seu Nome</label>
</td><td><input name="nome" type="text" size="35" maxlength="50">
</td></tr><tr><td>
<label>Seu Email</label>
</td><td>
<input name="email" type="text" size="35" maxlength="50">
</td></tr><tr><td>
<label>Nome do Destinatário</label>
</td><td>
<input name="amigo" type="text" size="35" maxlength="50">
</td></tr><tr><td>
<label>Email do Destinatário</label>
</td><td>
<input name="emailamigo" type="text" size="35" maxlength="50">
</td></tr><tr><td>
<label>Saudação</label>
</td><td>
<input name="titulo" type="text" size="35" maxlength="50">
</td></tr><tr><td>
<label>Escolha uma Imagem<br>
Ex: 01, 02, 03, 04.</label>
</td><td>
<input name="image" type="text" size="35" maxlength="2">
</td></tr><tr> <td>
<label>Digite Sua Mensagem</label>
</td><td>
<textarea name="mensagem" cols="35" rows="08" maxlength="300"></textarea>
</td></tr><tr><td>
<input name="submit" type="submit" style="margin-left:0px;background:#290;color:#fff;border:1px solid #3cf;font-weight:bold;" value="Enviar Cartão">
</td></tr></table>
</form>
<?php
$nome = $_POST['nome'];
$email = $_POST['email'];
$amigo = $_POST['amigo'];
$emailamigo = $_POST['emailamigo'];
$titulo = $_POST['titulo'];
$mensagem = $_POST['mensagem'];
if ($nome == null) {
echo "Você deve inserir seu <b>Nome</b>";
exit();
}
if ($email == null) {
echo "Por favor, digite seu <b>Email</b>";
exit();
}
if ($amigo == null) {
echo "Por favor, insira o <b>Nome do seu Amigo</b>";
exit();
}
if ($emailamigo == null) {
echo "Você deve inserir o <b>Email do seu Amigo</b>";
exit();
}
if ($titulo == null) {
echo "Você deve inserir o <b>Título da Mensagem</b>";
exit();
}
if ($image == null) {
echo "Você deve inserir a <b>Imagem</b>";
exit();
}
if ($mensagem == null) {
echo "Você deve inserir o <b>Sua Mensagem</b>";
exit();
}
$headers = "Content-type:text/html; charset=iso-8859-1";
$mensagem = "<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html><head><title>Feliz Aniversário</title>
<style type='text/css'>
body{width:96%;height:auto;text-align:center;background:#fff;color:#900;margin:0px;padding:2%;}
h1{font-size:320%;color:#290;font-family:impact;}
p{font-size:110%;color:#00f;font-family:verdana;}
p.mensagem{font-size:110%;color:#009;font-family:verdana;}
b{color:#000;}
#content{width:98%;height:auto;text-align:center;padding-top:20px;padding-bottom:10px;}
img{width:86%;height:520px;border:0px;}
a{color:#280;font-size:120%;font-weight:bold;text-decoration:none;}
</style>
</head>
<body>
;<div id='content'><p>Olá ".$amigo. ", " . $nome. " está te enviando um <b>Cartão de Aniversário</b> com uma mensagem, <b>leia</b>
:</p><h1> " .$titulo . "</h1><br><img src='http://www.seu_site.com/niver_cards/images/".$image.".jpg' title='".$titulo."'><p class='mensagem'>".$mensagem."</p>
</div>
</body>
</html>";
$envia = mail($emailamigo,$amigo,$mensagem,$headers);
echo "Seu cartão foi enviado com sucesso!</b>";
?>
<button onclick="window.close();">Fechar</button>
</body>
</html>
Conclusão
Pronto. Se você já está com tudo ok, todas as respectivas pastas completas dentro do diretório niver_cards, tudo a fazer agora é subir para o seu servidor e adicionar niver_cards na raiz do seu Site, depois digite no navegador www.seu_site.com/niver_cards/, tudo deve funcionar sem nenhum problema, caso ocorra erro, revise e encontre o problema, ou refaça tudo do começo.
Veja Também…
Gerar Metatags para Seu WebSite
Veja como Construir Gadgets
Editar Popup's
Criar Slides com JQuery
Redirecionar Url's em Php, JavaScript e Html
Algumas Funções do Formidável JQuery
Criar Banners para Sites e Blogs
Editar Legendas Ocultas em Videos do You Tube
Atributos e Propriedades de Marquee
Criando Páginas Html
Editar e Enviar Sitemaps para Sites e Blog do Blogspot
Criar Slides com o Jquery e o Plugin JQuery Cycle
Vou passar para vocês, de forma muito prática como editar slides. Podem ser usadas imagens da web ou suas próprias imagens.
Primeiramente você deve baixar a biblioteca do Jquery AQUI. Depois faça o download do plugin Cycle AQUI. Agora salve ambos em um diretório específico, exemplo js.
Agora tudo que você tem a fazer é digitar ou copiar o script abaixo (Coloquei uma página html completa), você pode recortar se necessário.
Copiar Tudo Aqui…
Maravilhas do JQuery
Veja abaixo uma das unúmeras funções do JQuery. Esta foca uma imagem, porém você pode utilizar qualquer tipo conteúdo.
Passe o Mouse
Copie o código no Bloco de Notas, salve-o como algum_nome.htm, depois abra-o no navegagor.
Veja outras funções do formidável JQuery AQUI.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#image").mouseover(function(){
$(this).fadeOut(600);
$(this).fadeIn(4000);
});
});
</script>
</head>
<body>
<img id="image" src="http://www.novidades100.com.br/gadget/filmes/terror/images/silent/thumbnail.jpg" width="300" height="300"><br>
<b>Passe o Mouse</b></p>
</body>
</html>
