Alexandre Mattos Blog » Tutorial http://www.alexandremattos.com.br/blog Design Web Fri, 09 Apr 2010 14:12:34 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Sistema de login seguro sem BD. http://www.alexandremattos.com.br/blog/2009/12/sistema-de-login-seguro-sem-bd/ http://www.alexandremattos.com.br/blog/2009/12/sistema-de-login-seguro-sem-bd/#comments Fri, 11 Dec 2009 18:57:38 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=154 Por muito tempo fiz programas com autenticações “baratas” que não necessitavam de banco de dados, somente de uma tela de login para 1 responsável acessar.

Tela de login

Tela de login

Vou ensinar uma maneira bem prática e segura de implementação de login e senha para acesso de uma determinada página.

Login: amblog

Senha: testesha1

Clique aqui para ver o demo do login!

Vi muitos exemplos de programas que colocavam apenas o código padrão mas não davam a devida atenção a senha e o login visivelmente disponível no código. Não temos que reclamar, pois os códigos são somente para estudo, assim como o que vou postar aqui. Você poderá utilizá-lo em seu sistema com uma segurança maior.

Então para você que deseja colocar um sistema com um login simples em PHP, sem a utilização de banco de dados para acesso e com segurança no código fonte. Existe uma maneira muito simples e que funciona. Segue abaixo o antes e o depois, com a implementação do “Simpol Code Encriptator Tabajara”.

$nome = $_POST['input_nome'];
$senha = $_POST['input_senha'];

if ( ($nome == "joão") && ($senha == "maria") ) {

echo "logado";

} else {

echo "senha ou login errado";

}

Nova solução

$nome = sha1($_POST['input_nome']);
$senha = sha1($_POST['input_senha']);

if ( ($nome == "51ab07f2dcf95e7bee7e24a757257bcbc358d7c7") && ($senha == "6935ad4089ac55e552ed7582635a77ac2f8ae4b7") ) {

echo "logado";

} else {

echo "senha ou login errado";

}

O código é esse, a única diferença é que eu coloquei uma penca de números e letras no lugar da senha e do nome. Coloquei também a funcao sha1 na frente das variáveis.

Explicação desta penca de números e letras.

Sha1 é um hash de mão única. O que isso significa? Significa que você pode transformar qualquer valor, seja letras, números, letras e números, caracteres , etc, em um código com 40 letras e números totalmente “estranhos” e sem qualquer tipo de significado para você. O que significa “51ab07f2dcf95e7bee7e24a757257bcbc358d7c7″?

Provavelmente nada para você. Pois não existe função que retorne esse valor para seu valor inicial. Você só pode saber o que ele realmente significa, sabendo que valor ele era. Ficou confuso né, então mais uma explicação.

EX: sha1(’novo’) = “51ab07f2dcf95e7bee7e24a757257bcbc358d7c7″;
ahhh descobriu né!

Eu só sei que “6935ad4089ac55e552ed7582635a77ac2f8ae4sa” é a palavra “novo” porque se eu comparar “6935ad4089ac55e552ed7582635a77ac2f8ae4sa” com o valor de sha1(’novo’), será verdadeiro. Foi o que fizemos no login acima.

Comparamos o ( hash criado ) com o hash do ( valor que o cliente digitou ).

Podemos afirmar que : sha1(’novo’) é igual a “51ab07f2dcf95e7bee7e24a757257bcbc358d7c7″.

Em breve darei explicações e tirarei as dúvidas sobre hash e encriptação.

para testar os valores teste o código a seguir para montar seu login e senha.

<?php

$nome = "XXXXXX"; //digite no lugar de xxxx o login que você deseja fazer o hash
$nome = "XXXXXX"; //digite no lugar de xxxx a senha que você deseja fazer o hash

echo 'nome: '.sha1($nome); // mostra o valor da variavel nome que você escolheu com o hash sha1
echo '<br />';
echo 'senha: '.sha1($senha); //mostra o valor da variavel senha que você escolheu com o hash sha1
?>;

Se já quiserem discutir (pesquisar) sobre isso, vai as dicas.

Para hash ( mão única )

* sha1()
* md5()

e para criptografia ( criptografa e decriptografa )

base64_encode() / base64_decode()

O base64 você pode transformar um valor em outro e esse valor gerado pode ser revertido no valor inicial.

Abaixo segue o código completo da página de login, todo comentado para você iniciante não se perder.

index.php

<?php
ob_start(); // irá pegar todos os dados de saída e guardar em buffer para você poder redirecionar a página e não da erro no cabeçalho
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog | Login simples</title>
<style>
*{margin:0;padding:0;}
body{padding:40px 0 0 0;}
.nome, .senha {padding:5px;}
.erro{background:#ff0000;color:#ffffff;padding:5px;}
.alinhamento {margin:auto;width:300px;padding:5px; background:#fff;color:#0099ff;border:1px solid #ccc;}
input[type=text], input[type=password]{border:2px solid #0099ff;padding:4px;}
input[type=submit]{border:none;color:#ffffff;background:#0099ff;padding:5px;}
</style>
</head>
<body>
<?php

if (!$_POST) { // se foi postado (se o cliente clicou no botão enviar)

	// veja que o action é a página que fará a verificação, que no caso é esta mesmo.
	echo '
	<div class="alinhamento">
	<h1>Login</h1>
	<form method="post" action="index.php">
	<div class="nome">NOME: <input type="text" name="input_nome" /></div>
	<div class="senha">SENHA: <input type="password" name="input_senha" /></div>
	<input type="submit" value="entrar" />
	</form>
	</div>
	';

}else{

	//resgata os valores inseridos pelo cliente
	$nome = sha1($_POST['input_nome']); // valor passado pelo metodo post, nome do campo "input_nome"
	$senha = sha1($_POST['input_senha']); // valor passado pelo metodo post, nome do campo "input_senha"

	//nomes corretos
	//nome "amblog"
	//senha "testesha1"

 	// o codigo abaixo significa, se o $nome = "amblog" e $senha = testesha1 faça
	if ( ($nome == "51ab07f2dcf95e7bee7e24a757257bcbc358d7c7") && ($senha == "6935ad4089ac55e552ed7582635a77ac2f8ae4b7") ) {

		header("Location: logado.php"); // redirecionar para página logado.php

	} else { //senão (quer dizer se não for igual a comparação acima) faça

		//escreve o campo de login novamente para o cliente digitar o login e a senha e mostra uma div informando que tem campo errado.
		echo '
	<div class="alinhamento">
	<h1>Login</h1>
	<div class="erro">Login e/ou senha errado(s)</div>
	<form method="post" action="index.php">
	<div class="nome">NOME: <input type="text" name="input_nome" /></div>
	<div class="senha">SENHA: <input type="password" name="input_senha" /></div>
	<input type="submit" value="entrar" />
	</form>
	</div>
	';

	} // fim if comparação

} // fim if se foi enviado

?>

</body>
</html>



Um abraço e bom estudo!
]]> http://www.alexandremattos.com.br/blog/2009/12/sistema-de-login-seguro-sem-bd/feed/ 1 Menu CSS com jQuery Round Corners http://www.alexandremattos.com.br/blog/2009/12/menu-css-com-jquery-round-corners/ http://www.alexandremattos.com.br/blog/2009/12/menu-css-com-jquery-round-corners/#comments Wed, 09 Dec 2009 18:02:42 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=135 Olá amigos, estou adicionando agora um menu que é super legal e bem simples de fazer. O que terá de novidade é que o menu terá bordas arredondadas através do jQuery e usará a propriedade text-shadow, que é uma propriedade do CSS para fazer a sobreposição. O menu será baseado no menu do site  jQuery.com, aquele azul. Vamos fazer ele no modo horizontal e no modo vertical para atender a demanda para qualquer tipo de aplicação.

Veja os menus em funcionamento.

Menu com jQuery

Menu com jQuery

O menu é bem simples de fazer. Siga os passos seguintes para criação.

Vamos ao que interessa. No passo 1, crie o arquivo html, que é a estrutura do menu. Vamos primeiro fazer o menu horizontal. Você precisa baixar o plugin jQuery Corner, e a Biblioteca jQuery. Feito isso vamos a estrutura do html.

<!DOCTYPE html>
<html language="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alexandre Mattos | Menu com jQuery</title>
<link href="menu.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="menu-h">
    <ul>
        <li><a href="#">Download</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Bug Tracker</a></li>
        <li><a href="#">Discussion</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos ao CSS, crie o arquivo menu.css. Note que ele já foi referenciado no código acima com este nome.

menu.css

<pre>* {
 margin: 0;
 padding: 0;
 font-family: arial;
 font-size: 12px;
}

a{
 outline: none;
}

/* menu horizontal */

body{
 background: #0F1923;
}

#menu-h {
 float: right;
 margin: 30px;
 background: #0f67a1;
}

#menu-h ul {
 float: left;
 margin: 0;
 background: none;
 padding: 0 2px 0 2px;
}

#menu-h ul li {
 float: left;
 list-style: none;
 border-right: 1px solid #0d5995;
 border-left: 1px solid #1175ae;
 height: 34px;
 background: none;
}

#menu-h li a {
 float: left;
 padding: 0 12px;
 color: #eee;
 text-decoration: none;
 line-height: 34px;
 position: relative;
 background: none;
}

#menu-h li:first-child {
 background: none;
 border-left: none;
}

#menu-h li:last-child {
 background: none;
 border-right: none;
}

#menu-h li a:hover {
 color: #fff;
 text-shadow: 1px 1px 1px #000000; /* sombra */
}

Repare que na última linha tem o código text-shadow, que faz a sombra do link. Tudo pronto, mas ainda não está com as bordas arredondadas. O que fazer?

Simples! Agora faremos as referencias do jQuery Round e criaremos os scripts. Eu usarei ele refereciado nos sites listados acima.

Inclua dentro da tag head do seu html, logo abaixo da tag title o seguinte código.

<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // Arredonda a borda do elemento menu-h
    $('#menu-h').corner("3px");
})
</script>

Como vocês podem ver, somente inclui o js do jQuery, o js do plugin corner e abaixo fiz uma função para arredondar a borda da div que criamos, que no caso é menu-h. Com essa função você pode arredondar qualquer elemento que possui uma borda.

Muito simples não? Então agora vamos fazer o outro exemplo que é o menu vertical. Como já definimos que o menu horizontal, feito ainda pouco, se chamou menu-h, o vertical será chamado de menu-m. Este já será criado com o jQuery embutido, para posteriormente não ter que adicionar os scripts.

<!DOCTYPE html>
<html language="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alexandre Mattos | Menu com jQuery</title>
<link href="menu2.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // Arredonda a borda do elemento menu-m
	$('#menu-m').corner("round 3px");
})
</script>

</head>

<div id="menu-m">
<ul>
        <li><a href="#">Download</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Bug Tracker</a></li>
        <li><a href="#">Discussion</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos fazer o arquivo css, note que o nome do arquivo css é menu2.css.

menu2.css

* {
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 12px;
}

a{
	outline: none;
}

/* menu horizontal */

body{
	background: #0F1923;
}
#menu-m {
	background: #fff;
	float: right;
	margin: 30px;
	background: #0f67a1;
}

#menu-m ul li {
	list-style: none;
	border-top: 1px solid #0D5995;
	border-bottom: 1px solid #1175AE;
}

#menu-m li a:link, #menu-m li a:visited {
	color:#ffffff;
	text-decoration:none;
	display: block;
	text-align: left;
	padding: 8px 10px 8px 10px;
}

#menu-m li:first-child {
	border-top: none;
}

#menu-m li:last-child {
	border-bottom: none;
}

#menu-m li a:hover {
	color: #fffffe;
	text-shadow: 1px 1px 1px #000000; /* sombra */
}

Repare que a última linha tem o código da sombra. Agora sim está pronto seus menus.

O que foi feito neste menu é que, em vez de colocar para cada link o float left, eu mantive o inline, não citando a propriedade float.

E é isso, qualquer dúvida só perguntar. Abaixo tem o arquivo para download.

Download: Menu com jQuery.

Abraços!

]]> http://www.alexandremattos.com.br/blog/2009/12/menu-css-com-jquery-round-corners/feed/ 0 Você conhece o “Mestre” do CSS? http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/ http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/#comments Tue, 08 Dec 2009 20:37:38 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=119 Não? Como assim não conhece?

Site do Majour

Site do Majour

O nome dele é Maurício Samy, autor do site do maujor. Posso dizer que muitas coisas que aprendi sobre CSS foi buscando informações no site dele. Tutoriais, guias, explicações, traduções, exemplos, e muitos outros recursos. Começar a trabalhar com CSS não foi fácil. Não tinha ninguém para me explicar e tive que correr para o site mais poderoso de todos, o Google.

Pesquisando encontrei o site do Maujor, que tem um guia muito, mas muito bom de como iniciar com CSS, abaixo segue o link.

http://maujor.com/tutorial/joe/cssjoe1.php

Comecei a estudar através deste link e logo a seguir parti para os outros tutoriais contidos no site do Majour. Como ainda não terminei meu tutorial de CSS+HTML para iniciantes. Deixo esta excelente referência para aprendizado.

O Maurício escreveu alguns livros que são na minha opinião, muito bons. Quer um livro para aprender realmente, abaixo segue os livros com os links.

Livro Criando sites com HTML ( http://www.livrohtml.com.br/ )

Livro Construindo Sites com CSS e (X)HTML ( http://www.livrocss.com.br/ )

Livro AJAX com jQuery ( http://www.livroajaxjquery.com.br/ )

Livro jQuery A Biblioteca do Programador JavaScript ( http://www.livrojquery.com.br/ )

Espero que tenham aprendido a lição! ^^)

Abraços

]]> http://www.alexandremattos.com.br/blog/2009/12/voce-conhece-o-mestre-do-css/feed/ 1 Separando o código com PHP http://www.alexandremattos.com.br/blog/2009/12/separando-o-codigo-com-php/ http://www.alexandremattos.com.br/blog/2009/12/separando-o-codigo-com-php/#comments Tue, 08 Dec 2009 18:34:51 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=100 Trabalhar com HTML puro é estressante? Fica pior quando o site é muito grande? Eis a solução para seus problemas.

O seu Dreamweaver também fica assim?

O seu Dreamweaver também fica assim?

No post anterior eu ensinei como iniciar o trabalho com PHP, a partir daí, vamos dar continuidade ao nosso processo de aprendizado. Quando comecei a trabalhar com PHP, esse foi o meu maior motivo para continuar. Por causa de um link, ter que mudar página por página, para trocar somente “um maldito link” que estava errado é um saco. Agora imagina alterar 500 páginas? Melhor então, seu chefe manda você trocar o banner do site que consta em umas 300 páginas do site? Super Hiper Mega estressante não?

Veja o exemplo em funcionamento!

Com o PHP você pode separar o conteúdo do site em partes e quando você tiver que alterar o banner do site ou o menu, ou qualquer outra coisa que quiser, terá apenas que editar somente 1 arquivo. Isso mesmo, é bem simples. Segue o tutorial.

Primeiro criaremos a página header, que é o topo do site. Ele terá menu, banner, todo cabeçalho do documento, e salvaremos como header.php

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - PHP Require</title>
<!-- CSS da página -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
<!-- JavaScript jQuery-->
</head>
<body>
<div id="menu">
	<a href="index.php">Home</a> | <a href="arquivos.php">Arquivos</a> | <a href="downloads.php">Downloads</a> | <a href="contato.php">Contato</a>
</div>
<div id="conteudo"> <!-- inicio da div do conteudo -->

Agora criaremos a página footer.php, que terá o final do html e o rodadé da página.

</div> <!-- fim da div do conteudo -->
<div id="rodape">
	<div class="esquerda">Meu Blog <a href="http://www.alexandremattos.com.br/blog" title="Alexandre Mattos Blog">amBlog</a></div>
    <div class="direita">Editado por: <a href="http://www.alexandremattos.com.br">Alexandre Mattos</a></div>
</div>
</body>
</html>

Antes de criar as páginas de conteúdo, faremos o css. Use o css que tenho como base deste html e grave como estilo.css

@charset "utf-8";
/* Desenvolvido por Alexandre Mattos
Site: alexandremattos.com.br
email: xandynnn@gmail.com
 */

*{
	padding: 0;
	margin: 0;
}

#menu {
	padding:  5px;
	border-bottom: 1px solid #CCCCCC;
	color: #999999;
}

	#menu a:link, #menu a:visited {
		color: #3399ff;
		text-decoration: none;
		padding: 0 5px 0 5px;
	}

	#menu a:hover {
		color:#999999;
		text-decoration: underline;
	}

#conteudo {
	color: #999999;
	padding: 20px;
}

	#conteudo h1{
		color:#00CC99;
		margin-bottom: 10px;
	}

	#conteudo img{
		margin: 100px 0 0 0;
	}

	#conteudo a:link, #conteudo a:visited {
		color: #3399ff;
		text-decoration: none;
	}

	#conteudo a:hover {
		color:#999999;
		text-decoration: underline;
	}

#rodape {
	color:#999999;
}

	#rodape .esquerda{
		float: left;
		margin: 0 0 0 20px;
	}

	#rodape .direita{
		float: right;
		margin: 0 20px 0 0;
	}

	#rodape a:link, #rodape a:visited {
		color: #3399ff;
		text-decoration: none;
	}

	#rodape a:hover {
		color:#999999;
		text-decoration: underline;
	}

Próximo passo é criar todas as páginas que farão parte do site.
Criarei somente 2 páginas para não alongar o post, mas é exatamente o mesmo processo para as demais.

index.php

<?php
require_once('header.php');
?>

    <h1>P&aacute;gina Principal</h1>

    <p>par&aacute;grafo da p&aacute;gina principal.</p>

<?php
require_once('footer.php');
?>

Agora a página de contato.

contato.php

<?php
require_once('header.php');
?>

    <h1>Contato</h1>

    <p>par&aacute;grafo da p&aacute;gina de contato.</p>

<?php
require_once('footer.php');
?>

Tudo pronto! Opa, ainda não! Falta 2 coisas, uma é eu explicar os códigos acima. O PHP disponibiliza em sua biblioteca de funções, uma função chamada require_once(), que permite você carregar um arquivo externo para página. Existe outras maneiras de inserir arquivos em uma página, mas no momento utilizaremos esse, que é o mais seguro neste caso.

O que essa função faz é abrir o arquivo indicado por você entre aspas simples, como no exemplo acima.

Sobre os títulos de cada página, tag title.

Eles serão os mesmos para todas as páginas Alexandre? Eu te respondo que não, pois vamos alterar agorinha mesmo.

O que temos que fazer é inserir um pequeno código em cada página de conteúdo e outro código da página header.php.

Abra o arquivo header.php e altere a seguinte linha:

<title>Alexandre Mattos Blog - PHP Require</title>

para:

<title>Alexandre Mattos Blog - <?php echo $titulo; ?></title>

Salve o arquivo header.php e abra agora todos as páginas de conteúdo criadas, que são index.php, contato.php, downloads.php e arquivos.php e insira o código a seguir na primeira linha do script php, antes do require_once do header.php.

$titulo = 'Nome da página';

Ex: O arquivo index.php que era assim:

<?php
require_once('header.php');
?>
    <h1>P&aacute;gina Principal</h1>
    <p>Par&aacute;grafo da p&aacute;gina principal</p>
<?php
require_once('footer.php');
?>

ficará assim:

<?php
$titulo = 'Nome da página';
require_once('header.php');
?>
    <h1>P&aacute;gina Principal</h1>
    <p>Par&aacute;grafo da p&aacute;gina principal</p>
<?php
require_once('footer.php');
?>

Agora faça isso em todas outras páginas e altere o valor que está entre aspas simples da variável $titulo para o nome da página referente. Você também pode fazer isso para incluir arquivos css para páginas específicas, javascripts, entre outras coisas. É muito mais simples na hora de fazer manutenção no site ou sistema, pois só terá o trabalho de alterar 1 arquivo. Quando a aplicação rodar todas as páginas incluirão a página header como cabeçalho, então se mudar o arquivo header.php, todas as páginas mudarão também.

Com sou um menino bonzinho, disponibilizo o download do exemplo. Se você não leu o tutorial, leia, pois está tudo explicado neste post.

Abraços e qualquer dúvida só perguntar.

]]> http://www.alexandremattos.com.br/blog/2009/12/separando-o-codigo-com-php/feed/ 3 jQuery FadeTo – Efeito Google.com http://www.alexandremattos.com.br/blog/2009/12/jquery-fadeto-efeito-google-com/ http://www.alexandremattos.com.br/blog/2009/12/jquery-fadeto-efeito-google-com/#comments Tue, 08 Dec 2009 15:52:34 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=87 Olá amigos, hoje vou explicar como funciona o efeito da página inicial do Google utilizando jQuery. Como todos já sabem, o jQuery é uma biblioteca Javascript que permite alterar características da página do lado cliente. Alguns exemplos são, formulários com validação sem ter que acessar outra página e páginas que dão uma resposta a um evento sem ir para uma segunda página de processamento.

Você já deve ter visto a página do Google.com com o efeito hover correto? Ainda não viu, acesse aqui -> jQuery.am-fadeto ou aqui -> google.com.

O funcionamento desse efeito é o seguinte. A página começa sem alguns elementos visíveis como: menu, rodapé, alguns links e parágrafos, deixando o banner como o único conteúdo visível na tela, reforçando a marca do produto. O que vamos fazer é um exemplo simples do funcionamento deste efeito que irá esconder alguns itens do conteúdo, o menu e o rodapé da página.

Primeiramente precisaremos da Biblioteca Javascrip jQuery. Iniciaremos com o arquivo puro, somente com o html para vocês verem que é muito simples.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - jQuery FadeTo</title>
<link rel="stylesheet" type="text/css" href="http://www.alexandremattos.com.br/exemplos/estilo.css" />
</head>
<body>

<div id="menu">
	<a href="http://www.alexandremattos.com.br">Meu site</a> | <a href="http://www.alexandremattos.com.br/blog">Meu Blog</a> | <a href="http://jquery.com/">Biblioteca Javascript jQuery</a>
</div>

<div id="conteudo">
	<img src="http://www.alexandremattos.com.br/exemplos/logo-amfadeto.png" alt="Logo Alexandre Mattos" />
    <p>Este fade &eacute; um efeito muito interessante, usado na p&aacute;gina inicial do <a href="http://www.google.com">Google</a></p>
</div>

<div id="rodape">
	<div class="esquerda">Utilizando <a href="http://jquery.com/" title="jQuery">jQuery</a></div>
    <div class="direita">Editado por: <a href="http://www.alexandremattos.com.br">Alexandre Mattos</a></div>
</div>

</body>
</html>

Como vocês podem ver o conteúdo é completamente normal, no inicio a chamada para o css, somente para formatar as id e classes do documento. Preste atenção nos nomes das ids e nas classes e elementos da página, usaremos os essas referências para o jQuery.

Agora insira entre a tag head o link para o jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

Logo após insira o efeito FadeTo nos elementos selecionados.

<script type="text/javascript">
$(document).ready(function(){

	$("#menu").fadeTo("fast", 0.0);
	$("#rodape").fadeTo("fast", 0.0);
	$("#conteudo p").fadeTo("fast", 0.0);

	$("html").hover(function(){

		$("#rodape").fadeTo("slow", 1.0);
		$("#menu").fadeTo("slow", 1.0);
		$("#conteudo p").fadeTo("slow", 1.0);

	});
});
</script>

Primeiro definimos quais elementos ficarão escondidos. Dizemos que os elementos #menu, #rodape, #conteudo p, ficarão escondidos.

Logo abaixo na linha: html hover function, significa que quando passar o mouse acima do documento html ele deve executar a função. Dentro da função definimos quais elementos ficarão visíveis. No nosso caso são os elementos que escondemos logo de início (#menu, #rodape, #conteudo p).

Abra a página e não mecha o mouse. Você perceberá que só aparecerá o logotipo.

Exemplo1 - Elementos escondidos

Exemplo1 - Elementos escondidos

Quando você movimentar o mouse em cima da página, os elementos escondidos aparecerão.

Exemplo2 - Página com todos os elementos visíveis

Exemplo2 - Página com todos os elementos visíveis

Bem simples e você pode implementar em seu site, blog ou qualquer outra aplicação.

Demo: jQuery.am-fadeto

Clique aqui para baixar o exemplo jQuery FadeTo.

Um abraço

]]> http://www.alexandremattos.com.br/blog/2009/12/jquery-fadeto-efeito-google-com/feed/ 1 Menu simples com CSS http://www.alexandremattos.com.br/blog/2009/12/menu-simples-com-css/ http://www.alexandremattos.com.br/blog/2009/12/menu-simples-com-css/#comments Sun, 06 Dec 2009 07:29:43 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=55 Vou explicar como criar um menu bem legal com HTML e CSS. Abaixo tem uma imagem de como ele ficará.

Menu 1

Menu 1

Menu 1

Primeira mente vamos escrever o código da seguinte forma.

Criaremos uma div com a id “menu” com os links que você quer para seu menu.

<div id="menu">
<a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a>
</div>

Perfeito, agora como faremos nosso menu com CSS? O CSS é a melhor maneira para dar visual a páginas web, com ela você pode inserir cores dos links, colocar imagens de fundo para cada elemento, uma série de coisas podem ser feitas pelo CSS.

Agora temos que colocar o visual. O menu poderá ser ajustado para ficar do lado esquerdo ou direito, basta alterar o float para left (esquerda) ou right (direita).

#menu {
margin: 15px;
padding: 10px;
background:#333333;
color: #ffffff;
float: left;
}

#menu a:link, #menu a:visited {
color: #ffffff;
text-decoration: none;
}

#menu a:hover {
color: #0099FF;
text-decoration: underline;
}

Este menu é bem simples. a id #menu define as características para o elemento que tem a id menu, no nosso caso a divisória. Demos 15px de margem, 10px de padding, que é a distância do texto, imagem, ou qualquer outro tipo de conteúdo para a borda, definimos uma cor (cinza escuro) para o fundo, que é a propriedade background, a propriedade color define a cor do texto, dizemos que será branco e por último usamos float, que significa que o texto irá flutuar a esquerda.

Menu 2

Primeiramente digitaremos o código html, que é nossa estrutura. Abaixo segue a imagem de como ele ficará.

Menu 2

Menu 2

Vamos ao código. Insira uma divisória com id “menu2″. Agora vamos fazer de um modo diferente, usando lista para formar-mos nosso menu.

<div id="menu2">
    <ul>
    	<li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
    </ul>
</div>

A tag “ul” é usada para listas que não possuem uma ordem, em inglês unordered list. A tag “li” é utilizada para definir um item da lista, do inglês list item.
Agora vamos implementar o CSS.

#menu2 {
margin: 0px;
float: right;
margin: 15px;
}

#menu2 ul {
background:#0099FF;
color: #ffffff;
list-style: none;
padding: 4px;
float: left;
}

#menu2 li {
float: left;
}

#menu2 li a:link, #menu2 li a:visited{
background: #0099FF;
display: block;
padding: 8px;
background: #8DCDEF;
text-decoration: none;
color: #ffffff;
}

#menu2 li a:hover{
background: #0099ff;
color: #ffffff;
}

Eu aconselho que sempre use para links a Pseudo classe :link e :visited e não deixar somente como a. Estes 2 códigos auxiliam o estado do nosso link. Se no caso você já visitou o link e não tiver formatado ele com CSS, ele ficará da cor padrão do navegador, que é roxo se eu não me engano.

As 4 pseudo classes usadas pela tag “a” são:

a:link -> Para o link normal
a:visited -> para links que o usuário já tenha acessado.
a:hover -> para quando o usuário passar o mouse em cima ele dar o estilo
a:active -> para quando o usuário clicar no link ele dar o estilo

Abaixo segue o código dos 2 menus juntos. Espero que tenham gostado.

“Copy aeee”

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - Menu</title>
<style>

* { /* esta formatação é para remover qualquer tipo de margin e padding do documento */
margin: 0px;
padding: 0px;
}

#menu {
margin: 15px;
padding: 10px;
background:#333333;
color: #ffffff;
float: left;
}

#menu a:link, #menu a:visited {
color: #ffffff;
text-decoration: none;
}

#menu a:hover {
color: #0099FF;
text-decoration: underline;
}

/********************* fim do menu 1 *************************/

#menu2 {
margin: 0px;
float: right;
margin: 15px;
}

#menu2 ul {
background:#0099FF;
color: #ffffff;
list-style: none;
padding: 4px;
float: left;
}

#menu2 li {
float: left;
}

#menu2 li a:link,
#menu2 li a:visited{
background: #0099FF;
display: block;
padding: 8px;
background: #8DCDEF;
text-decoration: none;
color: #ffffff;
}

#menu2 li a:hover{
background: #0099ff;
color: #ffffff;
}

</style>
</head>
<body>
<div id="menu">
	<a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a>
</div>

<div id="menu2">
    <ul>
    	<li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
    </ul>
</div>
</body>
</html>

Um abraço!

]]> http://www.alexandremattos.com.br/blog/2009/12/menu-simples-com-css/feed/ 0 Criando logotipo com Adobe Fireworks http://www.alexandremattos.com.br/blog/2009/12/criando-logotipo-com-adobe-fireworks/ http://www.alexandremattos.com.br/blog/2009/12/criando-logotipo-com-adobe-fireworks/#comments Sat, 05 Dec 2009 07:43:18 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=40 Meu logotipo

Meu logotipo

Fiz um tutorial passo-a-passo  para você criar um logotipo bem legal para seu site.

1 – Primeiramente abra o Fireworks -> Novo documento. O documento inicialmente terá largura de 800 pixels e altura de 450 pixels. Mude resolução para 96 pixels/inch, pois é a melhor para internet. Dê Ok.

2 – Escreva o nome que deseja para seu site, exemplo “Site de Fulano” ou “SdF”, com a ferramenta Text Tool.

Escolha uma fonte bem bacana para deixar seu logotipo bem bonito e altere o tamanho da fonte a seu gosto.

3 – clique com o botão direito do mouse sobre a imagem e clique em Convert to Patchs.

Convert to Patch

Convert to Patch

4 – clique na ferramenta Subselection Tools e selecione uma letra para modificar. Perceba que ele apareceu todo pontilhado. Agora você clique na barra de propriedades, onde você escolhe a cor e o posicionamento. A cor você irá trocar de solid para Gradient -> Linear. Escolha 2 cores para fazer o contraste. Eu aconselho usar 2 cores iguais com tonalidades diferentes.

Letra a Selecionada

Letra a Selecionada

Como você pode perceber, a letra a, que foi selecionada, encontra-se toda com seus pontos marcados. Isso permite que você altere a fonte usando a ferramente Subselection tools.

Inserindo o gradiente

Inserindo o gradiente

5  – Se você quiser mudar o posicionamento do gradiente, basta clicar na ferramenta Pointer Tool com a letra selecionada e mudar a posição. Repita isso com todas as letras.

6 – Agora vamos inserir uma borda para ela. Selecione todo o conteúdo, apertando CTRL+A na tela. Conteúdo selecionado, na barra de propriedades adicione um novo filtro -> Shadow and Grow -> Drop Shadow. Deixe os valores como: distância: 2; softness: 1; e opacidade 100%. A cor deixe preta mesmo.

Adicionando borda

Adicionando borda

7 – Você agora tem um nome para seu site. Vamos agora criar um simbolo para ilustrar. O que eu fiz foi um círculo com gradiente da mesma cor que o texto, usando a ferramenta Elipse. Após fazer o circulo com a altura do meu texto, eu criei outro círculo para poder fazer o corte. Posicione ele onde quiser no circulo maior, deixe os 2 círculos selecionados e clique no menu Modify -> Combine Patchs -> Punch.

Cortando um círculo com outro círculo

Cortando um círculo com outro círculo

8 – Agora você repita o processo de sombreamento escrito no passo 6 no círculo que está cortado.

9 – insira outro círculo menor dentro do espaço vazio e pronto seu logotipo.

10 – Remova o fundo na barra de propriedades -> Canvas, e clique no quadrado branco com um corte vermelho para remover o fundo. Nota: o fundo deve ficar quadriculado.

Sem fundo

Sem fundo

11 – Com a ferramenta Croop Tool, selecione toda a área do texto e do círculo ou qualquer outra forma que desenhou e faça um quadrado que envolva somente o logotipo, excluindo o espaço em branco. Após selecionar aperte enter para cortar.

Uso da ferramenta Croop

Uso da ferramenta Croop

12 – Salve o arquivo em png mesmo para manter a transparência e não perder a qualidade.

Está pronto seu logotipo com apenas 12 passos! Ao passar do tempo você ganhará prática e os próximos sairão melhores e mais rápidos. Viu como é fácil! Tendo dúvidas só comentar!

]]> http://www.alexandremattos.com.br/blog/2009/12/criando-logotipo-com-adobe-fireworks/feed/ 0