Blog - PauloWD

Construindo uma página (site) usando Tableless

Paulinho — Mon, 01 Mar 2010 03:11:33 +0000

Bom, neste tutorial vou explicar como se cria uma página básica em Tableless (HTML + CSS).

Primeiramente, é necessário que você baixe os arquivos necessários para seguir este tutorial, clicando aqui.

Obs.: Neste download virá um arquivo .zip com duas pastas, uma hamada “imagens”, que contém todas imagens necessárias para a criação do layout que foi utilizado neste tutorial. A outra pasta se chama “modelo-tableless-final” que trás um exemplo já pronto, feito a partir deste tutorial.

Sempre antes do começo do desenvolvimento de qualquer site é preciso ter um planejamento, mesmo que seja algo básico, como você imaginar um layout e rabiscá-lo no papel, por exemplo. Um bom planejamento evita transtornos durante o desenvolvimento, diminuindo assim o tempo de execução do projeto.

Bom, mas agora não estamos interessados muito no planejamento, vamos partir direto para o planejamento, tendo em mãos um simples wireframe.

A única diferença do wireframe acima para o que foi utilizado neste exemplo é a altura das divs centrais, que é de 400px e não de 550px.

Acima podemos ver o esqueleto do nosso site, nele temos a estrutura que será usada em nossa página. Nela já coloquei o nome de cada elemento, a largura (Width), a altura (Height), a distância para o topo da página (Top) e a distância para a borda-esquerda da página (Left).

Para começar, vamos criar um arquivo CSS, que usaremos para declarar os atributos dos elementos usados em nossa página HTML.

Se você nunca mexeu com CSS, leia a próxima parte do artigo, mas se você já conhece o básico de CSS, clique aqui e vá direto para a parte 3.

- Construindo uma página (site) usando Tableless

Ir para:
- Parte 1 | Parte 2 | Parte 3 | Parte 4 | Parte 5

[Tutorial] Como fazer efeito espelho d’água no Fireworks

Paulinho — Wed, 10 Feb 2010 11:59:28 +0000

Neste artigo vou explicar uma maneira fácil, prática e rápida de adicionar o efeito “espelho d’água” à uma imagem no Fireworks.

Primeiramente, escolhemos a imagem que vamos adicionar tal efeito. Para este tutorial peguei uma foto de um monitor encontrada na pesquisa do Google (imagem à direita).

Após a escolha da imagem, é preciso duplicála no Fireworks. Use ctrl+c e ctrl+v para fazer essa duplicação, inverta verticalmente a segunda imagem e posicione-a abaixo da imagem original.

Agora, no menu superior, clique na aba “Commands”, navegue até a opção “Creative” e selecione a opção “Auto Vector Mask” como na imagem abaixo.

Selecionada essa opção aparecerá uma janela pop-up como na próxima imagem, selecione a 3ª opção (em destaque na imagem).

Pronto, após o clique no botão “Aplly”, chegaremos no resultado final, semelhante ao da imagem abaixo.

Existem outras maneiras de se criar este efeito, mas a grande vantagem do uso desta técnica para construir este efeito é a possibilidade de adequar as imagens aos fundos, que não precisam ser necessariamente de cores sólidas, como pode ser visto nas imagens abaixo.

O que você gostaria de ver aqui?

Paulinho — Tue, 02 Feb 2010 17:10:21 +0000

Faaala caros leitores, tudo certo?

Sempre com o intuito de ajudar no que posso, gostaria de saber de vocês, o que gostariam de ver aqui em meu blog.

Comentem aqui neste post sugestões de assuntos para artigos, dúvidas que gostariam que fossem tiradas, etc.

Sintam-se à vontade, quem manda aqui são vocês!

Inspiração para web designers

Paulinho — Mon, 01 Feb 2010 14:14:48 +0000

Hoje resolvi tentar dar uma “luz” para aqueles que estão criando um layout para um site, mas não estão conseguindo criar algo agradável. Isso é bem comum em nosso dia-a-dia, pois vira e mexe precisamos criar um site, mas nossos clientes não deixam muito claro aquilo que querem, ou o que precisam, então precisamos nos virar.

Uma das maneiras de se inspirar para criar um layout é olhando outros sites para vermos elementos que se encaixariam bem naquela página que está sendo criada. Pensando nisso resolvi criar uma pequena lista de galerias que possuem sites altamente inspiradores que podem servir como base na hora de criar novos layouts.

Espero que gostem e aproveitem bastante esta lista:

- Smashing Magazine – Este é um blog que trata de diversos assuntos sobre design em geral, especialmente webdesign, o link ao lado vai direto para a categoria de inspiração do blog. Cada tópico desta categoria traz uma série de sites inspiradores com uma determinada característica em comum.

- Ala Brasil – Uma pequena galeria brasileira de sites em CSS.

- CSS Classic – Uma ótima galeria de sites feitos utilizando CSS.

- CSS ShowCase - Mais uma galeria de sites em CSS, o diferencial desta é a possibilidade do próprio usuário inserir seu site e receber avaliação de outros usuários sobre o site inserido.

- CssDesignYorkShire – Uma galeria CSS inglesa, é bastante simples, mas possui um alto número de sites para se inspirar.

- The FWA – Considerado por muitos a galeria de sites mais inspiradora da internet, indica sites simplesmente perfeitos. É atualizada diariamente e indicada para os amantes de sites em Flash.

[DICA] Sites de paletas de cores

Paulinho — Sat, 30 Jan 2010 12:00:06 +0000

Uma coisa que toma um certo tempo na construção de um layout, ou elaboração de arte para uma peça publicitária, é a decisão das cores que serão usadas.

Há algumas situações em que as cores padrões são obvias, como no caso de uma loja de surf, onde são indicadas cores quentes que lembre o verão, como laranja, vermelho e amarelo, e cores que lembrem o céu, e o mar, nesse caso o azul e branco.

É recomendado também que o projeto de designer saiba pelo menos o básico da Teoria das cores, para saber como causar o impacto desejado através das cores. Exemplo clássico: vermelho representa facilidade, e quando usado em conjunto com amarelo causa fome (por que será que o Mc’Donalds usa essas cores?).

Agora se você está desenvolvendo algo onde o cliente não especificou uma cor desejada (adoro aqueles que dizem: Ah, você que sabe, você que é o designer aqui.), ou simplesmente, não acha uma cor que se adeque ao que você quer transmitir ao usuário, pode recorrer à uma dessas ferramentas abaixo, nelas você pode pesquisar por uma palavra (em inglês) específica e encontrar bons resultados de paletas de cores prontas para serem usadas.

Adobe Kuler – Por ter sido criado pela Adobe, já transmite uma imagem muito boa, além de confiança. Exibe ótimos resultados em suas pesquisas, mas há alguns também muito estranhos. Na categoria “Most Popular” são encontradas as paletas mais usadas, e muito lindas por sinal.

COLOURlovers – Seu diferencial é o foco no usuário. Possui fórum, além de paleta de cores há também texturas para serem usadas como background em sites, além da possibilidade de poder cadastrar uma cor e dar a ela o nome que quiser, vale a pena conferir!

Bom pessoal, espero que tenha gostado e que façam bom proveito desses sites, acredito que eles vão lhe ajudar e muito na escolha de cores para seus layouts.

Abraços à todos.