Aline Branco - Design e webdesign: fevereiro 2009

quarta-feira, 18 de fevereiro de 2009

Otimize seu CSS usando declaração única.

Otimize seu CSS. Agrupe sempre que possível. Facilita a manutenção. Poupa consumo de banda quando o site estiver publicado.

A declaração única nada mais é do que compactar diversas propriedades com a mesma finalidade em apenas uma.

Exemplo:

p {
color:#999966;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
font-variant: small-caps;
line-height:15px;
}

Por mais incrível q possa parecer, o código abaixo substitui perfeitamente o código acima.

p {
color: #996;
font: italic small-caps bold 12px/15px Arial, Helvetica, sans-serif;
}

Com o tempo, a gente acaba pegando o jeito e já criamos o código assim.
Os sites abaixo podem ajudar:
http://www.cssoptimiser.com/
http://flumpcakes.co.uk/css/optimiser/
http://iceyboard.no-ip.org/projects/css_compressor

Acima, fiz com fontes, mas se usa muito fazer com margin, paddign, border, list-style-type e background.
Exemplo para vc copiar o código, salvar e ver como fica no navegador:
Não esqueça de fazer uma imagem.gif para vc ver como fica o background.

<!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>Untitled Document</title>

<style type="text/css">
</style>
</head>

<body>
<div>Curabitur ullamcorper ultricies nisi. Nam eget dui. </div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate bbeget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</body>
</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>Untitled Document</title>

<style type="text/css">
</style>
</head>

<body>
<div>Curabitur ullamcorper ultricies nisi. Nam eget dui. </div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate bbeget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</body>
</html>

segunda-feira, 16 de fevereiro de 2009

Escolher paleta de cores

Cores
É comum designers gastarem um bom tempo na escolha da palheta de cores. Uma boa escolha faz toda a diferença no layout. Alguns artifícios podem ajudar.
Estes trabalham com as teorias das cores:
Kuler

Color Scheme designer

Color Jack
Pourpre

Quando temos uma imagem acho interessante o 'whats its color', pois carregamos a imagem e obtemos as cores principais. Muitas vezes, podemos trabalhar com a cor principal para escolher a paleta de cores.
whats its color

sábado, 14 de fevereiro de 2009

"Rivais crescem e ameaçam Internet Explorer"

Fico MUITO feliz com essa notícia!!!!!!!!!!!!!
IEca perdeu espaço.
Mozilla cresceu de 16,98% para 21,53% no ultimo ano.
Não falou do Opera, mas resaltou o Chrome.
Leia na integra

Menu em CSS - horizontal, vertical e drop down

Fazer menus exige cuidado. Mas calma e tempo no meio da correria do dia-a-dia é raridade. Esse site se torna uma "mão na roda" pra agilizar um serviço ou para aprender como se faz menus de vários tipos. CSS Menu Maker

sexta-feira, 13 de fevereiro de 2009

Abandonando as antigas tabelas.

Para quem ainda trabalha construindo sites com tabelas ou para quem está começando e querendo saber mais sobre CSS, padrões web e Tableless. Vale a pena conferir.

quinta-feira, 12 de fevereiro de 2009

Revigoramento da marca Cativa - Moda feminina

Trabalho acadêmico realizados durante a disciplina de Desenvolvimento de Competências Profissionais. 2º semestre de 2008. Criação da marca, cartões, embalagens, layouts de site, folder, ... Trabalho completo. rsrss
A Cativa atua no mercado de moda como uma loja multimarca. Trabalha com roupas e acessórios femininos. O publico alvo é mulheres de classe média alta, independentes, urbanas, trabalhadoras, consumistas e com faixa etária entre 30 a 50 anos. Palavras chaves: feminilidade, status, detalhes, elegância e bom gosto.

quarta-feira, 11 de fevereiro de 2009

Fundos listrados (Backgrounds)

É comum vermos e fazermos bacgrounds com os mais diversos tipos de listras. Mas quanto maior a quantidade e o tamanho das imagens, mais tempo a página leva para carregar e abrir. Por isso, usamos imagens de backgrounds pequenas que se repitam. Para fazermos as listras, tais imagens têm que se encaixar perfeitamente. É comum vermos pessoas com dificuldade de gerar tais imagens. Afinal, nem sempre isso é tarefa fácil. O Stripe Generator pode ajudar, e muito!

terça-feira, 10 de fevereiro de 2009

Escolha a tipografia e gere o CSS facilmente.

Escolha a melhor tipografia para o seu layout no site: CSS Type Set. A facilidade de alterações e a rápida visualização do resultado facilitam o trabalho de escolha da fonte e suas características. Depois, é só copiar o código CSS que já estará prontinho.

Se você gosta de opções, use o Font Tester. Não possui um visual tão bonito e clean como o CSS Type Set, mas permite a geração e visualização simultânea de até 3 textos. Ótimo para comparações. E ainda apresenta o mapa de caracteres da fonte utilizada.

segunda-feira, 9 de fevereiro de 2009

Geradores de texto

É comum usarmos geradores de textos para preencher espaços destinados a textos nos layouts em desenvolvimento. Produz um resultado muito mais próximo do real e mais profissional. Usar nonono ou texto texto texto, não é nada bom.

O Blindtextgenerator trabalha com uma coleção de geradores, inclusive com o conhecidíssimo o Lorem Ipsum. Em uma única página, de forma prática e rápida, você tem acesso a várias linguagens e estilos. Vale a pena conferir.

domingo, 8 de fevereiro de 2009

Tableless e tabelas

"Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares." Wikipedia

Ou seja, tableless não é ausência total de tabelas. Devemos usar cada tag para o que esta foi criada. Se tenho dados tabulares, devemos usar tabela. E a página será validada pelo padrões W3C, sim.

Detalhe importante: O título da tabela deve ficar na tag capition. Infelizmente, é raro vermos isso. Geralmente está em uma tag p ou span ou mesmo como um subtítulo. E ainda que esteja na primeira linha da tabela, este não é o lugar correto. Sempre imagine que um cego gostaria de ter acesso a seu site através de softwares que lêem o conteúdo das páginas em voz alta. Se o título da tabela não estiver na tag capition, não será lido como título da tabela, e o cego ficará confuso.

<!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>
<title>Exemplo de tabela </title>

<style>
table {
background-color:#F9ECD0;
font:12px Arial, Helvetica, sans-serif;
color:#310000;
border:double 3px;
text-align:center;
}

caption {
font-size:14px;
text-align:left;
}

th {
background-color:#E4CAAF;
font-weight:bold;
border:none;
border-bottom:#660000 solid 1px;
width:120px;
height:25px;
vertical-align:middle;
}

td {
border:none;
border-bottom:#660000 dotted 1px;
height:20px;
}
</style>
</head>

<body>

<table>
<caption>
- Título da tabela
</caption>

<tr>
<th>Título da coluna A </th>
<th>Título da coluna B </th>
<th>Título da coluna C </th>
</tr>
<tr>
<td>A1 </td>
<td>B1 </td>
<td>C1 </td>
</tr>
<tr>
<td>A2 </td>
<td>B2 </td>
<td>C2 </td>
</tr>
<tr>
<td>A3 </td>
<td>B3 </td>
<td>C3 </td>
</tr>
</table>

</body>
</html>

Para saber mais sobre tabelas visite o Maujor.

quinta-feira, 5 de fevereiro de 2009

Plugins do Firefox para Webdesigners

Plugins que considero importantes e interessantes para webdesigners, pois contribuem no desenvolvimento e na otimização do trabalho:

firebug : Como já disse, simplesmente indispensável.

Web Developer : Cheio de recursos.

yslow : Mede o desempenho da página em vários pontos. Pelo seu resultado podemos perceber se devemos melhorar a página e onde mexer para conseguir um melhor resultado.

MeasureIt : Uma régua para medir em pixels e perceber alinhamentos.

colorzilla : Mostra instantaneamente as cores (em hexadecimal e RGB).

Palette Grabber : Captura paletas de cores. Auxilia no desenvolvimento de layouts.

Programa free para trabalhar com CSS e HTML

Dentre os programas gratuitos para se trabalhar com HTML e CSS, gostei do Free CSS Toolbox. Ele exibe uma lista de opções durante a digitação do código e possui recursos de arrumação e compressão do código (acerta a indentação, retira espaços e linhas em branco, apaga comentários,...). Bem interessante e free.
http://www.blumentals.net/csstool/

quarta-feira, 4 de fevereiro de 2009

Para iniciantes em CSS e HTML (Tableless)

Enfim, começar a escrever... Começar é sempre um desafio. Nem sempre sabemos por onde. Resolvi começar a escrever sobre CSS, pois trabalho com isso. Aconteceu também que, semana passada, um amigo me pediu ajuda pra começar a trabalhar com CSS. É bem verdade q existe muita coisa boa sobre esse assunto na internete, mas pra quem tá começando... Como saber onde é bom mesmo? O q está desatualizado? Tantas incertezas... rs Muitas informações dispersas. Então vamos lá!

Primeira coisa que se precisa... As ferramentas. Começe instalando (ou atualizando) programas:

Firefox: http://br.mozdev.org/

Sei que a maioria dos internautas usam IE, mas quem vai construir sites precisa de um navegador de verdade. Também amo o Opera, vale a pena instalar: http://www.opera.com/

Firebug: https://addons.mozilla.org/pt-BR/firefox/addon/1843

Simplesmente INDISPENSÁVEL. É um complemento onde, estando numa página da internete (seja a q estamos fazendo ou uma já existente) podemos ver o código html de um lado e o código css do outro. Pra quem quer aprender, vale a pena abrir páginas interessantes e ver como o profissional construiu aquela página. Aprendi várias coisas assim. É indispensável na hora q estamos construindo uma página, pois nele podemos testar (editando o código no próprio firebug e vendo instantaneamente como fica na página). Também nos ajuda a achar onde estão as alterações a serem feitas.

O Firebug é sem sombra de dúvidas o melhor, mas vale a pena instalar os "similares", para nos auxiliar quando estivermos acertando o layout nos outros navegadores. Isso mesmo, ainda que vc queira criar uma página visando o IE, é melhor construi-la no Firefox primeiro. Lembre-se q é importante aprender certo. E para isso é preciso construir páginas para bons navegadores (firefox, opera,...).

Para o IE: Debugbar - http://www.debugbar.com/
Para o Opera: Dragonfly - http://www.opera.com/dragonfly/

É possível construir suas páginas de HTML e CSS até mesmo no bloco de notas, mas facilita usar programas q ajudem "completando" e "colorindo" o código, pois é muito comum cometermos erros de digitação. E quem está começando comete muitos erros. Podemos achar chato e acabarmos por desistir se ficarmos meia hora pra descobrir cada errinho de digitação. Dreamweaver e e-texteditor são bons programas pra isso, mas são pagos.

Aline Branco - Design e webdesign