Eternia - Blog da Parque Internet » WebDesign http://eternia.com.br Por Andreo Costa Sat, 10 Jul 2010 16:29:07 +0000 en hourly 1 http://wordpress.org/?v=3.0 Criando formúlário de e-mail e enviando via PHP http://eternia.com.br/blog/274 http://eternia.com.br/blog/274#comments Wed, 27 Jan 2010 20:26:05 +0000 Andreo Costa http://eternia.com.br/blog/274 Vamos então para um tutorial beeem útil para os webdesigners que não são assim, muito ligados em programação, mas também não querem deixar de fazer um formulário de contatos no seu site.

CRIANDO FORMULÁRIO DE E-MAILS E ENVIADO VIA PHP

Primeiramente teremos que criar o formulario em <html>

São dois arquivos envolvidos

contato.html (ou outro nome com extensão html) – Arquivo do formulário
contato.php – arquivo de envio

Repare: extensão PHP no segundo arquivo.
Você pode manter o layout que já criou para o seu formulário, e inserir dentro da DIV que tem o conteudo os dados.
ISTO VAI NO ARQUIVO HTML QUE TERÁ O FORMULÁRIO DE CONTATO:

<form name="contato" id="contato" action="contato.php" method="post">
<table border="0" align="center">
<tr>
   <td>Nome*</td>
   <td><input type="text" name="nome" id="nome" size="45"></td>
</tr>
<tr>
  <td>E-mail</td>
  <td><input type="text" name="email" id="email" size="30"></td>
</tr>
<tr>
  <td>Mensagem</td>
  <td><textarea name="mensagem" id="mensagem" cols="45" rows="5"></textarea></td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="submit" value="Enviar"></td>
</tr>
</table>
</form>

ISTO VAI EM UM NOVO ARQUIVO (contato.php), COM A MESMA ESTRUTURA DE LAYOUT, E SERÁ O ARQUIVO RESPONSÁVEL PELO ENVIO DO E-MAIL E POR AVISAR O USUÁRIO QUE A MENSAGEM FOI ENVIADA.

Insira na div de conteúdo:

<?php
$cabecalho_email="Mensagem via site:\n\n";
$cabecalho_email.="Nome: " . $_POST["nome"] . "\n"; /* reparem que $_POST -> está assim, pois o metodo do formulario para envio de dados está post!! relembrando.. <form method="post"> */
$cabecalho_email.="email: " . $_POST["email"] . "\n"; /* igual para o nome, lembrando que dentro do [""] vai o nome do campo , em html!*/
$cabecalho_email.="Mensagem: " . $_POST["mensagem"] . "\n";
$de = $email;
$return = "emailquereceberaresposta@provedor.com.br";
$headers = "MIME-Version: 1.0\r\n";
$headers.= "From: " . $de . " \n"; /* esta variavel esta recebendo o seu e-mail la em cima, só renomear */
$headers.= "Return-path: <" . $return . "> \r\n"; /* variavel que será armazenado o e-mail para resposta do e-mail */
 mail("andreopc@gmail.com","mensagem via site",$cabecalho_email,"$headers","-f andreopc@gmail.com")
 or die("Erro ao Enviar Email!");
    echo "E-mail Enviado com Sucesso!";
/* lembrando que . MAIL("email que sera enviado o formulario","Assunto do e-mail","Conteudo do e-mail, que é seu formulario em PHP que nós criamos, podendo ser adicionados quantos campos quiser desde que seja adicionado na variavel $cabecalho_email.= campo novo " . $_POST["campo_novo"] .", $headers -> parametros adicionais, para mostrar de quem está sendo enviado o e-mail, e o ultimo -f é para se der erro no envio do e-mail, retornar para este e-mail que está escrito ali.*/
   ?>

]]> http://eternia.com.br/blog/274/feed 0 Saiba como Alterar o menu do botão direito do Flash http://eternia.com.br/blog/267 http://eternia.com.br/blog/267#comments Wed, 27 Jan 2010 12:04:36 +0000 Andreo Costa http://eternia.com.br/?p=267 Esta é uma dúvida que se vê muuuito pelos fóruns…

Ao clicar com o botão direito do mouse sobre o Flash, queremos sempre retirar aquilo tudo  que está neste menu.

Segue o código – Action Script 2:

function changemenu (){
getURL(‘http://eternia.com.br’);
}
var troca_menu:ContextMenu = new ContextMenu();
troca_menu.hideBuiltInItems();
var new_menu:ContextMenuItem = new ContextMenuItem(‘http://eternia.com.br’, rightclick);
troca_menu.customItems.push(new_menu);
_root.menu = troca_menu;

E é só basta copiar e colar no primeiro frame do seu flash, de preferência na camada “Ação” (para ficar organizado) e ta resolvido o problema!

]]> http://eternia.com.br/blog/267/feed 1 Dicas de SEO e Acessibilidade http://eternia.com.br/blog/263 http://eternia.com.br/blog/263#comments Tue, 26 Jan 2010 15:22:36 +0000 Andreo Costa http://eternia.com.br/?p=263 Navegando por estes mares, li um artigo bem interessante no Google Webmaster Central Blog, escrito pelo T.V. Raman, um dos pesquisadores do Google, sobre dicas de como criar um site acessível aos usuários e também ao crawler do Google. Segue o resumo da leitura do artigo dos pesquisadores do Google:

Certifique-se que todo conteúdo crítico de seu site é alcançável:

Usuários e web crawlers acessam seu conteúdo navegando seu site através de hyperlinks. Certifique-se que todo o conteúdo de seu site (suas páginas internas) sejam acessíveis através de hyperlinks HTML. Evite linkar seu conteúdo através de outras tecnologias como JavaScript ou Flash.

Hyperlinks HTML seriam links criados pelo elemento anchor, a famosa tag <a>. Certifique-se também que o “href” de todos os hyperlinks acessam URL´s reais ao invés de usar hyperlinks vazios manipulados, por exemplo, pelo atributo onclick para acessar uma determinada URL.

Evite hyperlinks desta maneira:
<a href=”#” onclick=”javascript:void(…)”>Product Catalog</a>

Dê preferência a este tipo de linkagem:
<a href=”http://www.example.com/product-catalog.html” alt=”Product Catalog“>Product Catalog</a>

Certifique-se que seu conteúdo é de facil leitura:

Um conteúdo útil ao usuário é um conteúdo fácil de se ler. Certifique-se que todo o conteúdo importante em seu site é apresentado dentro de documentos HTML. O conteúdo deve estar disponível na página sem a necessidade de ser alcançado através de algum script. Conteúdo escondido atrás de animações em Flash ou textos gerados no browser pela execução de algum JavaScript são despercebidos pelo Googlebot e podem não ser bem visíveis para alguns usuários.

Certifique-se que seu conteúdo esta disponível na ordem de leitura:

Após estar certo que seu conteúdo está disponível e alcançável para o usuário é importante verificar se qualquer um que navegue seu site conseguirá seguir seu conteúdo pela ordem lógica de leitura. Se você utiliza um layout complexo por multi-colunas para a maioria do conteúdo de seu site, a dica é voltar atrás e analisar como você esta atingindo o efeito desejado. Por exemplo, o uso de tabelas em seu código HTML, profundamente aninhadas, dificulta a ligação conjunta das partes relacionadas do texto em uma ordem lógica.

O mesmo efeito pode ser alcançado pela utilização de CSS junto de elementos com tag <div> HTML logicamente organizados. Além de ajudar a navegação do usuário com essas dicas você descobrirá que seu site abrirá bem mais rápido pelo navegador além de facilitar a leitura do mesmo pelos crawlers.

Não tenha medo de ser redundante:

Manter as informações de seu site na forma mais acessível possível não significa torná-lo primitivo e simples demais. Criar um conteúdo redundante é muito importante por assegurar que este será proveitoso para qualquer usuário que acesse seu site. Aqui vai algumas dicas:

  • Certifique-se que o conteúdo transmitido através de imagens esteja disponível no momento em que estas não podem ser visualizadas. Assegurar que o usuário entenda o “porquê” de uma determinada imagem estar sendo utilizada em seu site vai além de apenas usar o atributo alt tag HTML. Certifique-se que o texto que cerca a imagem faz o trabalho adequado de ajustar seu contexto para o porquê da imagem estar sendo utilizada. Por exemplo, se você quer ter certeza que todos entendam que a imagem que você esta disponibilizando é de uma ponte, então envolva um texto em torno da imagem.
  • Adicione resumos e subtítulos relevantes às tabelas de modo que o leitor possa ter uma leitura de alto nível da informação que esta sendo mostrada antes da visualização detalhada dos respectivos conteúdos.
  • Adicione um resumo textual detalhado às animações visuais ou à qualquer tipo de exposição de dados.

E a minha dica:

Avalie os Resultados

Cadastre-se no Google Analytics e insira o código que é gerado, para que tenhas certeza que estas dicas estão te dando resultados esperados.

]]> http://eternia.com.br/blog/263/feed 1 Esquema de cores para desenvolver layouts http://eternia.com.br/blog/261 http://eternia.com.br/blog/261#comments Sat, 23 Jan 2010 17:00:32 +0000 Andreo Costa http://eternia.com.br/?p=261 Com a colaboração da minha aluna Karen, que achou este ótimo link na internet, segue a dica de um site para escolha de cores similares, complementares, gerando os códigos hexadecimais para auxiliar no desenvolvimento

Trata-se do Color Scheme Designer

http://colorschemedesigner.com/

Até breve!

]]> http://eternia.com.br/blog/261/feed 0 Como deixar o FOOTER fixo no rodapé quando se tem pouco conteúdo na página. http://eternia.com.br/blog/220 http://eternia.com.br/blog/220#comments Sun, 17 Jan 2010 16:32:17 +0000 Andreo Costa http://eternia.com.br/?p=220 Você já deve ter precisado colocar o footer fixo no rodapé quando houve pouco conteúdo na página, por reclamação daquele cliente que acha que tá sobrando muito abaixo do site.

Há uma técnica no CSS que nos permite fazer essa façanha. Não funciona no IE6 (só pra variar).

Lembrando que você pode fazer isso facilmente com JQuery.

Suponha que você tenha o código HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Eternia.com.br - o blog da Parque Internet</title>
</head>
 
<body>
 
<div>
	<div>
		HEADER
	</div>
	<div>
		ESQUERDA
	</div>
	<div>
		DIREITA
	</div>
	<div>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit...
		</p>
		<p>
		Duis id metus enim, sed dignissim magna. Quisque dapibus...
		</p>
	</div>
	<div>
		FOOTER
	</div>
</div>
 
</body>
</html>

E o seguinte CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

*  {
	margin:0;
	padding:0;
}
 
html, body {height:100%;}
 
.geral {
	min-height:100%;
	position:relative;
	width:800px;
}
 
.footer {
	position:absolute;
	bottom:0;
	width:100%;
}
 
.content {overflow:hidden;}
.aside {width:200px;}
.fleft {float:left;}
.fright {float:right;}

Na linha 6, você faz com que as tags body e html tenham 100% de altura. Isso vai fazer com que o footer entenda que o limite dos dois elementos seja o final da janela do navegador.

Na linha 8, defino que a largura mínima do div GERAL que é o div que envolve todo o site, seja de 100%. E define um position: relative; para que o footer seja referenciado por ele.

Na linha 14, eu defino um position: absolute; e bottom:0; para footer, forçando sempre para o final do div.
Se houver pouco conteúdo o Rodapé fica lá embaixo, se houver muito, o rodapé desce junto com o conteúdo.

Funciona em IE7+ e em bons browsers.

Fonte: http://www.tableless.com.br/colocar-rodape-fixo-no-bottom

]]> http://eternia.com.br/blog/220/feed 2