Página com fundo degradê

Hoje você VAI aprender como é simples fazer um efeito de fundo degradê em um site com uma pequena imagem de 1 pixel, com HTML e CSS.

Você irá precisar de Photoshop, esta é uma ótima ferramenta para auxiliar o web designer, destaquei a palavra auxiliar pois existem muitos web designers que apenas utilizam o photoshop e geram o html através do photoshop, assasinando todos os padrões web, pois infelizmente o photshop gera um html bem fraco.

Então, vamos abrir o Photoshop neste caso estou usando a versão CS3, mas qualquer versão você poderá fazer.

Crie um documento com as resoluções (1024x768), foi escolhida esta resolução pois atualmente 80% da internet utiliza esta resolução.

Deixe a cor #7fa6ee como primária na sua paleta

Em seguida você irá escolher a ferramenta

Faça um "traço" com a ferramente na imagem da forma como mostra abaixo, isto definirá a área de degradê (Se for necessário clique na imagem para ampliar).

Ao soltar o mouse o photohop criará veja como ficou

Agora é a hora de diminuir esta imagem para que sua página com fundo degradê não fique pesada. Para isso acesse Image->Image Size... (crtl + alt + i).

Ao clicar uma janela é aberta, altere o width (largura) da imagem para 1

Agora depois de alterar a largura da imagem é só salva, agora vai uma das melhores dicas para você deixar seu site leve, SEMPRE salve as imagens em File -> Save for Web & Devices repare o parâmetros Preset para GIF para definir o tipo da imagem e salve-o com fundo.gif.

Agora que já temos a imagem de fundo, vamos por a mão na massa. Crie um documento HTML em branco.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro fundo degradê Vertical</title>
</head>

<body>
<a href="http://webcomoumtodo.blogspot.com" title="Web Como Um Todo!">Web Como Um Todo!</a>
</body>
</html>


Crie um documento CSS denominado wcut.css com o código abaixo, onde definirá propriedade do fundo da tag body

@charset "utf-8";
/* CSS Document */

body{
background:transparent url(fundo.gif) repeat-x 0 0;
}


Agora é só incluir a referência ao documento css na página HTML, insira a linha abaixo entre as tags <head> e </head>

<link href="wcut.css" rel="stylesheet" type="text/css"></link>


Pronto! Seu fundo degradê para seu site está pronto! É só abrir o arquivo para conferir o resultado. Veja aqui o Resultado Final deste tutorial.

• Tweet This!
• Share this on Facebook
• Share this on del.icio.us
• Digg this!
• Add this to Google Bookmarks
• Share this on Linkedin
• Post this to MySpace
• Share this on Technorati
• Share this on FriendFeed

Menu CSS Vertical (efeito flash)

Olá, hoje você VAI aprender como é simples fazer um menu CSS com estilo flash, algo que fica simples, leve(devemos nos preocupar sempre com isso, pois AINDA temos muitos usuários sem banda larga no Brasil), acessível, ou seja, respeitando os padrões do W3C.

Primeiramente vamos criar um documento HTML básico como este abaixo(chame de wcut-menu.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title>
</head>

<body>
</body>
</html>

Em seguida, insira o código de uma lista comum HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title>
</head>
<body>
<ul id="wcut-menu">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="release">release</a></li>
<li><a href="#" title="produtos">produtos</a></li>
<li><a href="#" title="contato">contato</a></li>
</ul>

</body>
</html>

Note que foi incluído um identificador para esta lista (atributo id), e também foi utilizado o atributo title para atender aos Padrões W3C para melhor acessibilidade.

Veja como o exemplo ficou:

Reparou as bolinhas e a cor horrível né?

Então chegou a hora de brincar com o CSS e alterar o estilo da lista. Crie uma folha de estilos (CSS), nomeie para wcut.css e insira o código abaixo:

@charset "utf-8";
/* CSS Document */

#wcut-menu{
font-family:Arial, Helvetica, sans-serif; /* Define-se a família da fonte */
border: 1px solid #000000; /* Define as propriedades da borda do elemento */
width: 200px; /* Define a largura do elemento em pixels(px) */
list-style-type:none; /* Retira os marcadores (bolinhas) da lista */
text-align:center; /* Centraliza o texto dentro do menu */
padding-left:0px; /* Elimina os espaços da esquerda */
}


Agora adicione esta linha entre as tags <head> e </head>

<link rel="stylesheet" href="wcut.css" type="text/css" />

Agora sim, já deu uma melhorada tente entender qual impacto cada linha de CSS teve.

Vamos agora editar cada item da lista (tag li no HTML)

#wcut-menu li a{
display:block; /* Exibe o link em bloco (ocupa toda área) */
color:#663300; /* Altera a cor do elemento */
text-decoration:none; /* Retira o sublinhado do link */
}

Agora, você vai aprender uma propriedade do CSS que será muito útil em efeitos, adicione a linha abaixo em seu arquivo CSS

#wcut-menu li a:hover{
background-color:#663300;
color:#FFFFFF;
}


Eis que surge como mágica um efeito como menu flash

A propriedade :hover em frente ao identificador css (neste caso "#wcut-menu li a" que indica que busca um elemento 'a' dentro de uma tag 'li' dentro de um elemento identificado por wcut-menu ) faz com que o que está descrito dentro será setado somente quando o mouse passar pelo elemento.

Veja aqui o Resultado Final do tutorial

Bom, acho que isso já abre a mente de muitos, agora é só se divertir e criar. Qualquer dúvida é só comentar que respondemos. Pra quem quer se aprofundar mais no CSS este site descreve todas as propriedades do CSS, é só devorar.

Espero que tenha ajudado. Abraços!

• Tweet This!
• Share this on Facebook
• Share this on del.icio.us
• Digg this!
• Add this to Google Bookmarks
• Share this on Linkedin
• Post this to MySpace
• Share this on Technorati
• Share this on FriendFeed

O que é/Como usar JQuery?

JQuery é um framework javascript que enfatiza a interação entre HTML e Javascript, usado em vários sites mais acessados se tornou o framework javascript mais popular do mundo.

Por que usar?
JQuery é Open Source (ô Beleza!) e tem uma sintaxe que torna muito mais fácil a seleção de elementos via DOM, criar animações (Sem flash, é claro!) e torna o AJAX bem simples, e o melhor te deixa criar plugins para facilitar ainda mais o desenvolvimento de todos.

Quem está de olho?
Além de nós(Desenvolvedores), a Microsoft e Nokia já estão de olha para adicionar o JQuery em suas plataformas.

Como usar?

- Faça o download da versão mais recente do JQuery.

- Importe o código em sua página HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>


A maioria dos desenvolvedores quando precisam executar algo quando a página está pronta utiliza o método abaixo
window.onload = function(){ alert("welcome"); }

Porém este código executa antes da página ser completamente carregada, por isso com JQuery é simples resolver este problema, apenas utilize:
$(document).ready(function(){
// Your code here
});
Seleção de objetos
Você pode selecionar um objeto pela sua classe
$('.myCssClass')
ou por seu id
$('#myId')
ou até mesmo pelo nome da tag html
$('a')
Eventos
Você também pode setar eventos como por exemplo click de um elemento.
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Não é mágica, é JQuery
Então o exemplo completo fica assim, copie e salve como .html e veja a mágica do jquery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Não é mágica, é JQuery. (Web como um todo)");
event.preventDefault();
});
});

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

Gostou de utilizar um evento como o click? Nesta página tem a descrição de todos eventos da biblioteca JQuery.

Classes CSS

Você pode adicionar ou remover uma classe CSS a um objeto em tempo de execução
$("a").addClass("test");
$("a").removeClass("test");

Aqui neste link você pode ver a FAQ do JQuery onde poderá retirar as dúvidas e com certeza aprender o básico do JQuery.

Bom por hoje é isso pessoal, se tiverem dúvidas é só deixar nos comentários.

Abraços.

• Tweet This!
• Share this on Facebook
• Share this on del.icio.us
• Digg this!
• Add this to Google Bookmarks
• Share this on Linkedin
• Post this to MySpace
• Share this on Technorati
• Share this on FriendFeed