Archive for the ‘Design’ Category


19
jan
0

Wallpapers: Calendário 2010

by Marcos Diniz

Ano novo, vida nova, não é o que dizem? Para celebrar a chegada de 2010, como primeiro post do ano, trago a vocês um conjunto de 12 wallpapers, cada um com o calendário de um mês de 2010. Denominadas de “A New Decade of Light”, as fotografias são um espetáculo e de autoria de Kristopher Grunert.

O ponto negativo fica pelo fato de que elas só estão disponíveis em formato widescreen, mais especificamente em 1680×1050. Portanto, se seu monitor tem o formato padrão de tela você tem 2 opções: esticar a imagem preenchendo a tela inteira (arghh!!), ou preencher a parte superior e inferior que irão sobrar com alguma cor (menos mal).

Enfim, os wallpapers são realmente muito bonitos e vale a pena dar uma conferida. Clique aqui para baixá-los!

calendario 2010 Wallpapers: Calendário 2010

25
set
5

Novo Layout

by Marcos Diniz

Novo Layout do computeiro.com.br

É isso aí, o computeiro está de cara nova! Não estava gostando do layout antigo, estava muito sem cor e claustrofóbico.

Mudei o tema para um com mais cara de web 2.0 e comecei a trabalhar em cima dele. Ainda falta muita coisa a ser feita, mas o pontapé inicial está dado.

Peço a ajuda de vocês para descobrir bugs, pois provavelmente eles devem estar por aí! Mas a idéia é essa mesmo, ir atualizando “on the fly”! Críticas e sugestões também são sempre bem-vindas, via comentário ou contato.

Enquanto ainda não coloco o link para o meu twitter, acessem por aqui!

25
ago
0

5 Ferramentas Online para Web Designers/Developers

by Marcos Diniz

Um bom desenvolvedor web que se preze sabe que não param de surgir por aí ferramentas que facilitam (e muito) a vida, principalmente no quesito design.

Muitas dessas ferramentas são online, acessadas diretamente pelo navegador, e facilitam em aspectos básicos de design, que normalmente tomariam um tempo que seria melhor gasto em aspectos mais complexos.

Vou listar e descrever abaixo algumas que eu uso. Caso conheça alguma outra, compartilhe nos comentários! :)


Form style generator

Form style generator: Esta é uma ferramenta bem útil para gerar o CSS de campos de formulário. Você pode personalizar o fundo do campo com degradê, colocar borda de vários tipos e tamanhos, configurar a fonte e efeitos de hover e focus. Depois de configurar do jeito que você quer, basta clicar em “Your CSS” e todo o código CSS será gerado automaticamente para você.

Genfavicon

Genfavicon: Excelente para criar o favicon de seu site (ícone que aparece na “aba” em que seu site está aberto e na barra de endereço). Escolha a imagem que você deseja utilizar por uma URL ou por upload, escolha o tamanho desejado, defina a área de corte e pronto! Seu arquivo favicon será gerado com o formato e o tamanho correto.

Spiffy Corners

Spiffy Corners: Essa é realmente muito útil! Sabe aqueles quadros com borda arredondada que você fazia utilizando imagens no atributo “background” do CSS ou utilizando o border-radius (que não funciona no IE)? Então, essa ferramenta faz todo o trabalho sujo pra você sem utilizar imagens nem border-radius, tornando seus quadros cross-browser. Defina o nome da classe, a cor do fundo, a cor do quadro e pronto! Você terá em mãos o HTML e CSS no ponto para serem usados.

Ajaxload

Ajaxload: Indispensável para quem precisa de uma animação de loading, principalmente para requisições ajax. Você escolhe uma animação entre dezenas de possibilidades, personaliza a cor de fundo (ou deixa transparente) e a cor da animação. Depois é só clicar em “Generate It” e você terá sua animação personalizada em .gif, pronta para ser usada.

Stripe Generator

Stripe Generator: Ferramente perfeita pra criar backgrounds de sites com listras. Você pode configurar o tamanho, o espaçamento, as cores e a orientação das listras, além de definir o estilo do fundo (opaco ou com degradê). Também é possível colocar sombreamento nas listras. A imagem gerada é de 40×40, bastando você repetí-la através do CSS para obter o efeito de listras no fundo do site.

7
jun
11

jQuery: Mostrar/Esconder elementos da página com efeitos

by Marcos Diniz

Continuando os posts sobre jQuery, vou mostrar como mostrar/esconder elementos da página utilizando efeitos básicos. Este é um bom exemplo para mostrar como jQuery facilita sua vida, fornecendo funções prontas que fazem todo o trabalho pra você.

Lembre-se sempre de fazer a leitura do jQuery no cabeçalho de sua página (o script pode ser baixado na página oficial do jQuery):

1
2
3

<head>
   <script language="javascript" src="jquery-1.3.2.min.js"></script>
</head>

O parâmetro callback presente em todas as funções mostradas abaixo é opcional, e representa o que será executado após o término do efeito. Pode ser declarada outra função neste parâmetro, criando efeitos em cadeia.

função hide(speed, callback):

1

$("#conteudo").hide("normal");

Neste exemplo o elemento da página de id “conteudo” se esconderá a uma velocidade “normal”. Este parâmetro de velocidade também pode ser um valor inteiro, representando a velocidade em ms.

função show(speed, callback):

1

$("#conteudo").show("slow");

Efeito contrário à função hide(), mostrando o elemento da página. Neste caso, a velocidade será lenta, e o elemento de id “conteudo” será mostrado a uma velocidade “slow”, ou seja, mais lento.

função slideDown(speed, callback):

1

$("#conteudo").slideDown();

Com esta função, o elemento da página é mostrado com um efeito de “slide”. Neste exemplo, foi utilizada a velocidade padrão, mas assim como as outras funções pode-se configurar a velocidade do efeito com valores inteiros ou utilizando as strings “slow”, “normal” e “fast”.

função slideUp(speed, callback):

1

$("#conteudo").slideUp();

Efeito contrário ao slideDown(), ao invés de mostrar o elemento da página com o efeito de “slide”, o esconde.

função fadeIn(speed, callback):

1

$("#conteudo").fadeIn();

Com esta função, o elemento da página é mostrado com um efeito de “fade”. A velocidade é configurável como nas outras funções.

função fadeOut(speed, callback):

1

$("#conteudo").fadeOut();

Efeito contrário ao fadeIn(), ao invés de mostrar o elemento da página com o efeito de “fade”, o esconde.


Veja aqui uma demonstração de todos os efeitos!
 (Veja o código fonte dessa página para ajudar no entendimento).

Ainda há outros tipos de efeitos e também é possível criar efeitos personalizados, mas isto abordaremos em outro post.

Qualquer dúvida não deixe de perguntar!

31
mai
30

Navegação por abas com jQuery e CSS

by Marcos Diniz

A navegação por abas é uma forma elegante e muito utilizada de organizar o conteúdo de um site. O que irei mostrar neste tutorial é como criar este efeito utilizando jQuery e CSS. A vantagem desta abordagem, é o fato de não haver o recarregamento da página na mudança de aba, tornando a navegação agradável para o usuário. Veja nesta demonstração o resultado obtido para facilitar o entendimento do código!

Agora vamos ver passo-a-passo como isto é feito:

1 – Carregue o script da biblioteca jQuery no cabeçalho de sua página (não se esqueça de indicar o caminho correto do arquivo no seu servidor):

1
2
3

<head>
   <script language="javascript" src="jquery-1.3.2.min.js"></script>
</head>

2 – A estrutura do html ficará dessa forma (é essencial seguir essa estrutura para o script funcionar corretamente):

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="tabnav">
    	<h4>computeiro.com.br - Navegação por abas com jQuery e CSS</h4>
    	<div id="tabs">
        	<a href="#" onclick="opentab(1);">Aba 1</a>
        	<a href="#" onclick="opentab(2);">Aba 2</a>
           	<a href="#" onclick="opentab(3);">Aba 3</a>            
        </div>
        <div id="content">
        	<div> conteúdo da aba 1 </div>
        	<div> conteúdo da aba 2 </div>
        	<div> conteúdo da aba 3 </div>
        </div>
</div>
  • A div “tabs” contém os links que representarão as abas para o usuário clicar
  • Caso queira adicionar mais abas, basta criar mais links na div “tabs” e associar ao evento onclick a chamada da função opentab(), passando como parâmetro a numeração de qual div encontrada em “content” deve ser mostrada (1 para a primeira div, 2 para a segunda e assim por diante).

3 – Para obtermos o visual de abas, estilizamos a estrutura acima utilizando CSS:

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

#tabnav {
	width: 80%;	
	margin: 0 auto;
}
 
#tabs {
	height: 20px;
	position: relative;
}
 
#content {
	position: relative;
	padding: 20px;
	border: 2px solid #78bee2;
}
 
#content div p {
	font-family: Trebuchet MS, Arial, Verdana;
	font-size: 12px;
}
 
#tabs a, #tabs a:visited {
	background: url("tab.jpg") top left no-repeat;
	font-family: Trebuchet MS, Arial, Verdana;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	display: block;
	width: 70px;
	height: 17px;
	_height: 20px;
	margin: 0 10px 0 0;
	text-align: center;
	padding: 3px 0 0 0; 
	float: left;
}

É importante observar que na linha 23 deve-se indicar o caminho correto para a imagem da aba no seu servidor.

4 – Pra finalizar, utilizamos o seguinte script em jQuery que será responsável por manipular os cliques nas abas, escondendo/mostrando as divs com os conteúdos:

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function() {
	$("#content > div").hide();
	$("#content > div:eq(0)").show();
	$("#tabs > a:eq(0)").css("background", "url(tab-selected.jpg) top left no-repeat");
});
 
function opentab(num) {
	$("#content > div").hide();
	$("#content > div:eq(" + (num-1) + ")").fadeIn();
	$("#tabs > a").css("background", "url(tab.jpg) top left no-repeat");
	$("#tabs > a:eq(" + (num-1) + ")").css("background", "url(tab-selected.jpg) top left no-repeat");	
}
  • Na linha 1 é declarada a função que será executada quando a página for carregada.
  • Na linha 2 escondemos todas as divs dentro de “content”, que são as divs com o conteúdo.
  • Na linha 3 mostramos somente a primeira div dentro de “content”, que é o conteúdo da primeira aba.
  • Na linha 4 mudamos a imagem da primeira aba, para dar o efeito dela estar selecionada.
  • Na linha 7 declaramos a função opentab(), que será chamada sempre que uma aba for clicada, e recebe como parâmetro qual div de “content” será mostrada (1 para a primeira, 2 para a segunda e assim por diante)
  • Na linha 8 escondemos todas as divs de conteúdo
  • Na linha 9 mostramos a div indicada no parâmetro, utilizando um efeito de fade, através da função jQuery fadeIn().
  • Na linha 10 alteramos a propriedade CSS background dos links, atribuindo a imagem da aba de quando ela não está selecionada.
  • Finalmente, na linha 11 alteramos a propriedade CSS background somente da aba clicada, atribuindo a ela a imagem de quando a aba está selecionada.

Com essa abordagem fica fácil adicionar mais abas, pois não será necessário nenhuma mudança no CSS e no script, bastando adicionar o link para a nova aba e a div para seu respectivo conteúdo.

Qualquer dúvida ou sugestão, comente!

25
mai
14

Como destacar campos de formulário com jQuery e CSS

by Marcos Diniz

Para debutar os posts sobre programação, vou mostrar como destacar campos de formulário utilizando a biblioteca de javascript jQuery. A primeira coisa a fazer é entrar no site do jQuery e baixá-lo. Marque a opção production e clique em Download (jQuery) como mostrado na imagem abaixo:

Baixando o jQuery

Você será levado a página de download da última versão, que neste momento está na 1.3.2. Baixe o arquivo (jquery-1.3.2.min.js) e o carregue entre as tags de cabeçalho (head) de sua página, como mostrado abaixo:

1
2
3

<head>
   <script language="javascript" src="jquery-1.3.2.min.js"></script>
</head>

Agora iremos criar uma classe CSS para estilizar o campo do formulário para quando este estiver em destaque. A estilização é por sua conta e a mostrada abaixo é apenas um exemplo:

1
2
3
4

input.marcado, textarea.marcado {
	border: 2px solid #000000;
	background: #FFFFCC;
}

Por fim, criaremos o script que adiciona a classe CSS no campo do formulário quando este entra em foco. Além disso, é preciso remover a classe do campo quando este sai de foco. É recomendado colocar o script em um arquivo .js e carregá-lo na página assim como foi feito com a biblioteca do jQuery. Veja o script e uma breve explicação sobre ele:

1
2
3
4
5
6
7
8

$(document).ready(function() {
	$('input, textarea').focus(function() {
		$(this).addClass('marcado');
	});
	$('input, textarea').blur(function() {
		$(this).removeClass('marcado');
	});
});
  • Na linha 1, indica-se que o script só entrará em ação após a página ser carregada completamente.
  • A linha 2 declara uma função que será chamada sempre que tags input e textarea entrarem em foco, ou seja, sejam marcadas para digitação.
  • Na linha 3 a classe .marcado (estilizada logo acima no css) é adicionada a tag que entrou em foco, dando o efeito desejado.
  • A linha 5 declara uma função que será chamada sempre que tags input e textarea saírem de foco.
  • Na linha 6 retira-se a classe .marcado da tag que saiu de foco, fazendo-a voltar ao normal.

Pronto! Um código simples que dá um visual melhor para seus formulários e ainda aumenta a usabilidade. =D

Veja a demonstração!

24
mai
1

Personas: Skins para o Firefox

by Marcos Diniz

Personas: Skins para o FirefoxEu sempre gostei muito do tema padrão do Firefox 3, mas sempre achei ele muito simples, e uma mudança de cores ou textura viria bem a calhar. E é aí que entra o Personas, um complemento pra você “mudar a roupa” do tema padrão do Firefox. Veja como funciona:

Entre no site do Personas e clique no botão “Get Personas for Firefox – Free”:

Clique no botão para instalar o complemento

O Firefox pedirá permissão para instalar o complemento. Aceite, e depois de reiniciar você já estará pronto para escolher as skins que você quiser. Visite a galeria de skins e divirta-se!

Exemplos de Skins do Personas

Celadon theme by the Themes Boutique