Alexandre Mattos Blog 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 Guia de como iniciar com HTML http://www.alexandremattos.com.br/blog/2010/02/guia-de-como-iniciar-com-html/ http://www.alexandremattos.com.br/blog/2010/02/guia-de-como-iniciar-com-html/#comments Fri, 26 Feb 2010 15:52:05 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=179 Para você que ainda não sabe como iniciar com HTML vou explicar da maneira mais simples e prática para começar a criar sites.

Software necessário:
Bloco de notas do Windows

O que são TAGS?
De uma maneira bem simples tag é tudo aquilo que estiver entre o sinal de menor ( < ) e de maior ( > ). EX:

<html>


Toda Tag tem que ser aberta e fechada em ordem. Para fechar o conteúdo da tag, basta fechala com uma barra logo após o conteúdo. EX:

<div>conteudo</div>
<p>conteudo</p>
<h1>conteudo</h1>

Sempre mantenha a ordem das tags, se abrir uma, não esqueça de fechá-la.

Tags que você tem que decorar:

html -> Tag para inciar o documento html, obrigatório seu uso.
head -> Define o cabeçalho do documento a cabeça, como o título, o que será encorpado, adicionado ao documento html.
body -> todo conteúdo deverá ficar dentro da tag body, seu uso é obrigatório assim como as tags html e head.

Outras tags que você utilizará muito são as de parágrafo, imagens, títulos, links … vou descreve-los e exemplificar.

h1, h2, h3, h4, h5 -> Tags de títulos
p -> tag de parágrafos
img -> tag de imagens

OBS: As tags podem possuir atributos, como identificação, formatação, etc. EX:

<p id="meu-primeiro-paragrafo">Olá, esse é meu primeiro parágrafo</p>

note que todo atributo deverá ser inserido dentro da tag de abertura ( a que não possui a / na frente ), seguido de = e o valor sempre dentro de aspas duplas. OK??? Tem que seguir isso, vamos voltar. ao conteúdo.

O que será ministrado aqui é um ensinamento específico de html para uso com css que depoiiiiisss eu farei um tutorial, por enquanto é hora de aprender HTML.

O link
Para criarmos um site, precisamos de links, que são âncoras de acesso a outros arquivos, páginas, etc. A tag utilizada é a tag seguinte.

<a>Meu link</a>

Calmaaaaaaa, ainda não terminei. Para você conseguir criar o link para outra página, precisamos de um atributo para fazer a ligação, por isso expliquei anteriormente o que era um atributo, então vamos continuar. O exemplo abaixo terá um atributo dentro da tag “a” chamado href, que irá criar a referência.

<a href="pagina.html">Meu link</a>

Como você pode ver, o atributo href faz referência à página html.

Tendo os links e o básico para construir um site primário, vamos ao exemplo para você começar a entender na prática como fazer.
Abra o bloco de notas e digite a estrutura básica do HTML, que é:

<html>
<head>
<title>Meu primeiro site</title>
</head>
<body>

</body>
</html>

Essa é a estrutura básica para criação de um site, a tag html, head e body. Pense em uma pessoa formada de cabeça e corpo. Seria mais ou menos isso. Tudo que você escrever dentro de body será visualizado pelo cliente que acessar a página.

Vamos fazer um pequeno site com 4 links e conteúdo sobre os 4 grandes times de futebol do Rio de Janeiro.

São os links, Botafogo, Flamengo, Fluminense e Vasco.

O conteúdo vamos fazer um comentário com 2 linhas e cada página deverá ter o título com o nome do clube.

Com o bloco de notas aberto e a estrutura digitada, vamos melhorar o código e inserir os links e o primeiro time que é o botafogo.

<html>
<head>
<title>Site sobre times - Botafogo</title>
</head>
<body>

<a href="botafogo.html">Botafogo</a> / <a href="flamengo.html">Flamengo</a> / <a href="fluminense.html">Fluminense</a> / <a href="vasco.html">Vasco</a>

<h1>Botafogo Futebol e Regatas</h1>
<h2>Time da estrela solitária</h2>

<p>Esta é a página do Botafogo.</p>

</body>
</html>

Antes de salvar o documento, crie uma pasta na área de trabalho com o nome times. Agora salve como botafogo.html, igual ao que está no link que você digitou dentro da pasta times que você criou.

DICA: Use sempre letras minúsculas, sem acentos e sem espaços para definir o nome do arquivo. Se tiver que utilizar espaços, use os sinais “-” e “_”. EX: joao-da-silva.html … botafogo_futebol_de_regatas.html.

Agora vamos criar um novo arquivo no bloco de notas com a estrutura básica novamente e vamos inserir o menu com links e o conteúdo do time Flamengo.

<html>
<head>
<title>Site sobre times - Flamengo</title>
</head>
<body>

<a href="botafogo.html">Botafogo</a> / <a href="flamengo.html">Flamengo</a> / <a href="fluminense.html">Fluminense</a> / <a href="vasco.html">Vasco</a>

<h1>Clube de Regatas Flamengo</h1>
<h2>Time da maior torcida do Brasil</h2>

<p>Esta é a página do Flamengo.</p>

</body>
</html>

Note que o menu é o mesmo da página do botafogo. Salve como flamengo.html, do mesmo jeito que escreveu no link da página para quando você clicar no link, ele consiga achar o arquivo.

Repita o processo com o time do fluminense e o time do vasco.

Note que sempre que a última tag a ser aberta será sempre a primeira a ser fechada. EX:

<div><p>Olá, meu outro site é <a href="http://www.alexandremattos.com.br">www.alexandremattos.com.br</a>, acesse!</p></div>

Explicação: Tenho um parágrafo que está dentro de uma divisória. Meu parágrafo contém um link externo ( que leva para outro site ).

times1.

Agora vamos inserir imagens dos times antes do título da página, para ficar bem legal. As imagens se encontram junto com o zip dos arquivos para você poder seguir o passo 2.

Onde está a linha

<h1>Clube de Regatas TIME</h1>

você irá inserir a tag de imagens que é img com o atributo src que fará a ligação com a imagem. EX de como ficará:

<img src="vasco.gif" alt="Escudo do Vasco" />
<h1>Clube de Regatas Vasco da GAMA</h1>

Note que eu fechei a tag img na abertura dela e não com 2 tags como estamos acostumados a fazer, isso é devido a excessões no código. As tags mais comuns de se fazer isso são: img e br.
a tag br é utilizada para quebrar linha ( do inglês break line ).

<br />
<img />

Essas são as 2 tags que fecharão em si mesmas. voltando ao código, o src fará a referencia da figura enquanto o atributo alt dará o nome alternativo. Nunca esqueça de inserir o atributo alt, para caso sua imagem não aparecer, o usuário poder identificar o que a imagem que não abriu queria passar.
Repita com as outras páginas. Abaixo vai uma SS de como ficou.

Vasco

Vasco

<a href='http://www.alexandremattos.com.br/blog/wp-content/uploads/2010/02/times2.zip'>times2</a>
[sourcecode]

Então já sabemos que o primeiro código a fazer é:
[sourcecode language="html"]
<html>
  <head>
    <title>Titulo da pagina</title>
  </head>

  <body>
    <!--conteudo da pagina -->
  </body>
</html>

Agora é só complementar o seu estudo e cair dentro do HTML. Segue um site muito bom para aprender. O site é baseado na lingua inglesa, mas se seguir o raciocínio, só com os exemplos você acaba entendendo.

Site Referência: http://www.w3schools.com/html/default.asp

]]> http://www.alexandremattos.com.br/blog/2010/02/guia-de-como-iniciar-com-html/feed/ 2 Kuler, o que é? Ventoinha? http://www.alexandremattos.com.br/blog/2009/12/kuler-o-que-e-ventoinha/ http://www.alexandremattos.com.br/blog/2009/12/kuler-o-que-e-ventoinha/#comments Fri, 11 Dec 2009 20:14:43 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=166 Kuler

Kuler

Kuler não tem nada a ver com os pequenos vetiladores dos processadores ou dos gabinetes. O Kuler é uma ferramenta que permite visualizar a teoria de combinações harmônicas das cores. No site você encontra paletas prontas, as mais populares e até baseadas em imagens. Vamos supor que você gostou das cores de uma foto e deseja a paleta de cores dela. Você envia a foto através de um formulário e ele automaticamente cria a paleta de cores para você.

Teoria Tríade

Tríade

O mais interessante é que tudo é a partir da teoria. Você percebe como as combinações harmônicas são montadas. Há a possibilidade de compartilhar paletas de cores com outras pessoas, assim como usar as que elas criaram também!

Vemos no site vários tipos de cores tríades, monocromáticas, análogas, complementares, etc. Basta você acessar e conferir. Além de através do flash você definir as cores, ainda tem o resultado das 5 cores em HSV, RGB, CMYK, LAB e HEX.

HSV, RGB, CMYK, LAB e HEX.

HSV, RGB, CMYK, LAB e HEX.

O registro é gratuito, e você pode compartilhar suas paletas, basta se cadastrar!

kuler.adobe.com.

Eu fiz o cadastro e achei muito bom o site. Esta ai uma ótima dica para quem quer desenvolver sites com uma aparência super agradável!

Os créditos foi de um amigo do trabalho! Muito boa dica Vagner!

Abraços!

]]> http://www.alexandremattos.com.br/blog/2009/12/kuler-o-que-e-ventoinha/feed/ 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 Quiz CSS, eu acertei 90% http://www.alexandremattos.com.br/blog/2009/12/quiz-css-eu-acertei-90/ http://www.alexandremattos.com.br/blog/2009/12/quiz-css-eu-acertei-90/#comments Mon, 07 Dec 2009 16:46:17 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=82 Boa tarde, faz muito tempo que não participava de quiz ou outras brincadeiras legais com programação web. A última que ví foi no Blog do Maujor, onde ele faz alguns desafios de css. Eu respondi a uma série de questões sobre CSS no site http://www.w3schools.com/

Comprovação da participação

Comprovação da participação

No site w3 Schools você encontra certificações para css, html, php, entre outras linguagens de marcação ou programação, quiz, tutoriais, guias e etc.

O que eu fiz foi o quiz de CSS, segue os links:

CSS -> http://www.w3schools.com/Css/css_quiz.asp

HTML -> http://www.w3schools.com/html/html_quiz.asp

PHP -> http://www.w3schools.com/PHP/php_quiz.asp

Se procurar tem mais ^^ Quero ver alguem bater ai 90% de aproveitamento!

abraços!

]]> http://www.alexandremattos.com.br/blog/2009/12/quiz-css-eu-acertei-90/feed/ 3 Como organizar seu projeto Web http://www.alexandremattos.com.br/blog/2009/12/como-organizar-seu-projeto-web/ http://www.alexandremattos.com.br/blog/2009/12/como-organizar-seu-projeto-web/#comments Mon, 07 Dec 2009 15:17:10 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=77 Por muito tempo venho aprimorando os conhecimentos para organização e encontrei um meio muito bom para organizar os meus projetos Web. Costumo fazer uma análise dos Sistemas com gerenciamento de conteúdo e vejo a organização deles, que é muito bem projetada. E para quem não tem conhecimento ou está entrando na área agora, o que fazer?

Existe pouco conteúdo na internet que fale a respeito de organização de
pastas para desenvolvimento. Eu irei explicar o que eu costumo utilizar para desenvolver meus sistemas. Primeiramente como uso o XAMPP, deixo meus projetos dentro da pasta htdocs.

Então cada site possui uma pasta dentro da pasta htdocs.

Ex: H:\xampp\htdocs\sitedofulano
H:\xampp\htdocs\sitedociclano
H:\xampp\htdocs\sitedobeltrano

Cada site possui sua estrutura, bem como sites em flash são diferentes de sites feitos em html e css. Com certeza eles não terão a mesma estrutura de pastas. A estrutura abaixo é para sistemas feitos com html e php.

Ex: na pasta do sitedofulano existem 2 pastas:

Estrutura 1

Estrutura 1

A pasta /www guardará todo o conteúdo do site e a pasta documentacao, armazenará toda documentação do site, senhas do servidor mysql, senha de administradores, ftp, configurações, imagens cedidas pelo cliente, tudo que for informação do cliente para o site e documentos do site do seu cliente você colocará dentro desta pasta.

Isso é bom pois quando for enviar o conteúdo html para a hospedagem, você enviará somente o conteúdo da pasta /www

Na pasta www, temos mais outras pastas que fará a separação de conteúdo da animação, dos scripts, dos estilos, etc.

Abaixo tem uma imagem das pastas que costumo usar: class, flash, javascript, css, functions, includes, docs, images.

Pastas de um projeto simples

Pastas de um projeto simples

/class: é a pasta que deve conter todas as classes do seu projeto
/flash: é a pasta que armazenará os arquivos em flash do projeto
/javascript: Todos os scripts do site ficarão dentro desta pasta
/css: esta pasta é responsável por guardar as folhas de estilos do projeto
/functions: responsável por armazenar as funções do projeto
/includes: os arquivos que serão inclusos no site serão guardados dentro desta pasta
/docs: documentos de texto, pdf, entre outros arquivos estarão aqui nesta pasta
/images: guardará todas as imagens do site

Esta é geralmente a que eu uso, outras pessoas adicionam pastas para cms, uploads, xml, entre outras. Eu listei a mais simples para desenvolvimento.

Outra coisa a se falar é a nomeclatura dos arquivos, mantenha sempre um padrão, até mesmo para auxiliar no desenvolvimento de um projeto grande ou com grande quantidade de arquivos.

EX: jQuery.edit-in-place.js
jQuery.gallery.js
mootools.edit-in-place.js
mootools.galery.js

E você que estrutura usa?

]]> http://www.alexandremattos.com.br/blog/2009/12/como-organizar-seu-projeto-web/feed/ 1 Notepad++, uma ajuda no desenvolvimento http://www.alexandremattos.com.br/blog/2009/12/notepad-uma-ajuda-no-desenvolvimento/ http://www.alexandremattos.com.br/blog/2009/12/notepad-uma-ajuda-no-desenvolvimento/#comments Mon, 07 Dec 2009 14:58:49 +0000 Alexandre Mattos http://www.alexandremattos.com.br/blog/?p=72 O Notepad++ é um editor de código livre, que suporta várias linguagens de programação.

Notepad++ com autocomplete

Notepad++ com autocomplete

Além de ser muito fácil de usar, ainda tenho algumas dúvidas quando a utilização pela quantidade de funcionalidades que o software possui. Ainda não achei tudo o que eu queria no Notepad++, mas em breve eu descobrirei. Eu utilizo a versão Portable, e me ajudou bastante no desenvolvimento.

O que chama atenção nos programas é o autocomplete, que ajuda na velocidade do desenvolvimento, pois nós adoramos escrever códigos. O Notepad++ vem com um identador muito bom, marcando o início e o fim das tags, suporta várias linguagens de programação, possui um autocomplete ( segurando CTRL + Barra de espaço ) e as cores para diferenciar o tipo do código. Isso tudo ajuda no desenvolvimento de qualquer projeto, seja ele para pequenos projetos ou grandes aplicações.

Eu baixei e gostei, se souberem mais sobre o software, só comentar, ficarei a disposição de acrescentar mais conteúdo ao post.

Abaixo vai o link para você baixar o programa portátil.
http://portableapps.com/apps/development/notepadpp_portable

Abraço e bom trabalho!

]]> http://www.alexandremattos.com.br/blog/2009/12/notepad-uma-ajuda-no-desenvolvimento/feed/ 0