NOVIDADES100 Tem de Tudo
Aplicativo Gerador de Texto Html
Criar Sistema em Php Gerador de Códigos Html para Sites de Relacionamento
Veja e Teste o Aplicativo em Execução
Vou apresentar aqui de uma forma bem simplificada de como criar um aplicativo que ajudará aos uruários sem muito conhecimento de linguagem de internet a criarem textos personalizados em html para site de relacionamento como o Orkut e outros que aceitem textos nesta codificação.
Como disse, é bastante simples, o principal requerimento é você dispor de um servidor para hospedar suas pastas e arquivos necessário para criar o aplicativo
Primeiramente vamos a criação dos arquivos e pastas (diretórios) necessários.
Na raiz do site (onde fica o arquivo index.html), criaremos a pasta aplicativos, será aí aonde tudo estará disposto. Dentro da pasta aplicativos criaremos um arquivo chamado index.php, uma pasta chamada js, outra pasta chamada htm, mais outra chamada images e por último, uma pasta chamada thumbs, esta já dentro da pasta images.
Agora vem o mais simples, apenas copie os códigos destacados abaixo da forma em que estão e salve-os em bloco de notas com os nomes designados para cada um e nas pastas equivalentes.
Você pode Baixar o Arquivo Completo Aqui e extrair no diretório aplicativos na raiz do seu site.
Diretório do Ajax
Este primeiro deve ser salvo na pasta js com o nome de ajax.js. É o arquivo responsável para o carragamento das imagens na página.
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_img").innerHTML = "<b>Aguarde…</b>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("load_img").innerHTML = xmlRequest.responseText;
}
}
Diretório Htm
Neste diretório, você deve salvar dez 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ê salva como imagem-01.htm, a segunda imagem-02.htm, a terceira imagem-03.htm e assim até o décimo arquivo htm.
<img src="images/01.jpg" alt="imagem" title="imagem"><p>01</p>
<img src="images/02.jpg" alt="imagem" title="imagem"><p>02</p>
<img src="images/03.jpg" alt="imagem" title="imagem"><p>03</p>
<img src="images/04.jpg" alt="imagem" title="imagem"><p>04</p>
<img src="images/05.jpg" alt="imagem" title="imagem"><p>05</p>
<img src="images/06.jpg" alt="imagem" title="imagem"><p>06</p>
<img src="images/07.jpg" alt="imagem" title="imagem"><p>07</p>
<img src="images/08.jpg" alt="imagem" title="imagem"><p>08</p>
<img src="images/09.jpg" alt="imagem" title="imagem"><p>09</p>
<img src="images/10.jpg" alt="imagem" title="imagem"><p>10</p>
Index - Arquivo Principal
Este script abaixo é o arquivo principal do aplicativo, você deve salvá-lo como index.php, nele contém o formulário que o usuário irá enviar e a resposta em html que o php enviará para que seja copiado e colado no Orkut ou outro site de relacionamento que aceite html.
<html>
<head><title>Gerador de Códigos Html</title>
<script type="text/javascript" src="js/ajax.js"></script>
<style type="text/css">
body{width:98%;height:auto;padding:5px;background:#ffd;font-family:verdana}
#load_img{width:96%;height:auto;margin:2%;text-align:center;}
img.imagem{width:80%;height:340px;border:0px;}
i{color:#230;}
</style>
</head>
<body>
<h1 class="recado">Expresse Seu Humor</h1>
<p class="recado">Expresse Seu humor, envie recados, mostre como você está no momento com este aplicativo simples e de fácil configuração. Você pode digitar como está seu humor, escolher uma imagem mais apropriada para o momento acrescentando textos personalizados. Basta apenas que você escolha a cor, a fonte do texto, depois escolha a imagem, clicando em alguma das que estão na tabela e inserido o número referente a ela no campo adequado.<br>
<b>Nota</b>: As cores serão inseridas no formato RGB hexadecimal (insira apenas três dígitos), para que todos os navegadores exibam corretamente.</p>
<table class="imagens"><tr>
<td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-01.htm');">
<img class="imagens" src="images/thumbs/01.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-02.htm');">
<img class="imagens" src="images/thumbs/02.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-03.htm');">
<img class="imagens" src="images/thumbs/03.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-04.htm');">
<img class="imagens" src="images/thumbs/04.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-05.htm');">
<img class="imagens" src="images/thumbs/05.jpg" alt="imagem" title="imagem"></button>
</td></tr><tr><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-06.htm');">
<img class="imagens" src="images/thumbs/06.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-07.htm');">
<img class="imagens" src="images/thumbs/07.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-08.htm');">
<img class="imagens" src="images/thumbs/08.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-09.htm');">
<img class="imagens" src="images/thumbs/09.jpg" alt="imagem" title="imagem"></button>
</td><td class="imagens"><button class="load_img" onclick="loadImg('htm/imagem-10.htm');">
<img class="imagens" src="images/thumbs/10.jpg" alt="imagem" title="imagem"></button>
</td></tr></table>
<div id="load_img"><img class="imagem" src="images/05.jpg" alt="imagem" title="imagem"><p class="copiar">05</div>
<form id="orkut" method="POST" action="">
<p><input type="text" size="20" name="title" maxlength="20">
<i>Isto vai ser o título. Digite como está você - Ex: Raiva, Triste, Feliz, Apaixonado(a), etc.</i><br>
<input type="text" size="5" name="color" maxlength="5">
<i>Digite a Cor do Texto da Mensagem. Ex: 000, 00F, 007, 900, 3CF, 290, AC0, etc.</i><br>
<input type="text" size="5" name="family" maxlength="40">
<i>Digite o Tipo de Fonte do Texto. Ex: comic sans ms, georgia, impact, digifacewide, etc.</i><br>
<input type="text" size="5" name="img" value="05" maxlength="02">
<i>Escolhar Outra Imagem - Copie o Nome que Aparece Abaixo da Imagem e Cole Neste Campo. Ex: img01, img12, img20, etc.</i><br>
<textarea name="text" maxlength="400" cols="40" rows="8"></textarea><br>
<i>Digite o a Mensagem. Até 400 Caracteres.</i><br>
<input type="submit" value="Gerar Código"></p>
</form>
<?
$title = $_POST['title'];
$text = $_POST['text'];
$color = $_POST['color'];
$family = $_POST['family'];
$img = $_POST['img'];
echo "<div style='width:98%;height:auto;border:1px solid #ccc;text-align:left;color:#00f;font-size:90%;font-family:comic sans ms;padding:1%;margin-bottom:80px;'>";
echo "<table style='width:100%;height:auto;'>
<tr><br>
<td style='width:98%;height:auto;text-align:center;padding:5px;'><br>
<h1 style='color:#".$color.";font-family:".$family.";'><i style='color:#250;'>".$title."</i></h1><img src='http://www.seu_site.com.br/aplicativos/images/<i style='color:#250;'>".$img."</i>.jpg' style='width:160px;height:140px;margin-left:5px;margin-bottom:5px;float:right;'>
<p style='text-align:center;color:#<i style='color:#250;'>".$color.";</i>margin:5px;font-family:<i style='color:#250;'>".$family.";</i>'><i style='color:#250;'>" .$text. "</i></p>
</td>
</tr>
</table>";
echo "</div>";
?>
</body>
</html>
Diretório de Imagens
Por último, na pasta images, hospede dez imagens (mais ou menos no tamanho de 300px por 250px), que você deve criar com os respectivos nomes: 01, 02, 03, e assim por diante até a décima imagem.
Dentro deste diretório, deve conter um outro diretório chamado de thumbs, com as mesmas imagens do diretório superior images, porém num tamanho menor, tipo 100px por 100px.
Pronto. Está tudo aí o necessário para criar seu aplicativo, é bastante simples, apenas a inicialização para a criação de aplicativos mais avançados.
Veja como Construir Gadgets para exibir este aplicativo no Orkut e Igoogle.
Veja Também…
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