Nome do Jogo

Eu sou um fã da 37signals e principalmente do blog Signal vs. Noise, e isto não é segredo para ninguém. Mas existe algumas séries de artigos que eles publicam que gosto mais. Inclusive já traduzi alguns artigos destas séries.

Umas das minhas séries favoritas é a “Design Decisions”, onde eles relatam como foi o processo para se chegar a um consenso sobre um novo layout. Veja por exemplo os passos dados para se chegar a um calendário lateral no Backpack:

O resultado final você pode ver aqui.

MENOS É MAIS, se você não é o dono e nem trabalha para uma "grande" companhia, diga isso bem alto todo dia de manhã e se apegue a isso. É a única maneira de brigar com os grandes.

Um bom programador não é aquele que conhece todas as manhãs da linguagem ou do framework que usa, nem aquele que sabe todos os atalhos do TextMate, ou aquele que consegue digitar na velocidade da luz. Um bom web designer não é o jedi do Photoshop ou aquele faz até chover com HTML, CSS, Javascript, etc.. Os melhores programadores e designers que conheço são aqueles que sabem quando devem dizer: "Nós não precisamos disto".

Por exemplo, no CarreiraTI.com algumas pessoas me pediram para criar campos específicos para informações das ofertas de emprego, como: um campo para experiência exigida, outro para salário, etc.. Mas pensando bem, nós não precisamos disto, quem está redigindo a oferta pode separar da maneira que desejar usando um tracejado (—) ou asteriscos (*), por exemplo.

Seria legal ter campos separados para cada tipo de informação? Seria. O site ficaria bem mais organizado? Sim. Poderíamos criar filtros mais específicos usando estas informações? Seria uma boa. Nós realmente precisamos de tudo isto? Não. Então, não vou perder meu tempo com isto agora.

Veja um outro exemplo. Eu tinha o plano de montar um mapa geográfico baseado nas ofertas de emprego cadastradas, por isto inclui a opção de localizar em um mapa o endereço da empresa. Deixei por um tempo no site para ver como seria a reação disto, e percebi que ninguém precisava disto. Perdi meu tempo e aprendi mais uma.

A melhor maneira de sentir se algo é realmente necessário/importante é recebendo feedback de seus clientes e usando o seu bom senso. Mas não faça tudo que lhe pedirem, primeiro analise quantas pessoas realmente precisam daquela funcionalidade e só depois faça, se o seu bom senso dizer que vale a pena.

Durante um projeto, mudanças no layout são muito comuns. Quando isto ocorre, é normal que alguns códigos em seus arquivos CSS se tornem desnecessários, neste caso é muito simples apagamos ele.Mas imagine um projeto grande com designers e programadores alterando arquivos o tempo todo. Como verificar se aquele determinado trecho de código é realmente redundante?

Tom Armitage escreveu um script simples em Ruby para verificar isto para você. É o CSS Redundancy Checker.

Esta ferramenta é muito simples de usar. Basta informar qual arquivo CSS você deseja verificar e o diretório onde seus arquivos HTML se encontram. Assim:

css-redundancy-checker.rb [cssfile] [directory of html files OR .txt file listing urls to use]

No fim, ele vai te dizer quais linhas do CSS não está sendo usada em nenhum arquivo. Simples assim…

Meu browser predileto é o Firefox, por isto sempre que estou criando algo, tenho o costume de ir testando nele.

O problema é que quando abro meu site (que está lindo no Firefox) no Internet Explorer, fica tudo desalinhado. Mexe aqui, mexe ali, e consigo deixar tudo bonito no IE. Mas quando abro o site no Firefox novamente, ferrei tudo…

Quantas vezes você já passou por isto?

Passei por isto ontem (mais uma vez) e resolvi ir atrás de alguma ferramenta que me ajudasse neste trabalho.

Primeiro encontrei um Javascript que me permite diferenciar as propriedades do CSS de acordo com o browser e até com o sistema operacional:

var css_browser_selector = function() { var ua=navigator.userAgent.toLowerCase(), is=function(t){ return ua.indexOf(t) != -1; }, h=document.getElementsByTagName('html')[0], b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'', os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':''; var c=b+os+' js'; h.className += h.className?' '+c:c; }();

Isto por si só já facilita muito as coisas. Posso criar um CSS assim, por exemplo:

.ie .example { background-color: yellow } .ie7 .example { background-color: orange } .gecko .example { background-color: gray } .win.gecko .example { background-color: red } .linux.gecko .example { background-color: pink } .opera .example { background-color: green } .konqueror .example { background-color: blue } .webkit .example { background-color: black } .example { width: 100px; height: 100px; } .no_js { display: block } .has_js { display: none } .js .no_js { display: none } .js .has_js { display: block }

Entre as opções de browser estão: ie, ie5, ie6, ie7, firefox, opera, konqueror, safari e outros.

Outra coisa interessante que encontrei para estes casos é o CSSVista (apesar do nome só tem uma versão para o Windows XP). Este software permite que você altere o CSS enquanto vê uma versão do site no IE e no Firefox ao mesmo tempo.

Com um layout novo o CarreiraTI estréia o cadastro de currículos. Agora o usuário além de pesquisar vagas, pode cadastrar seu currículo para que as empresas entrem em contato com ele ou enviar os currículos cadastrados diretamente para a vagas.

Não sou web-designer, então não sei se ficou legal. Estou aberto a sugestões e ajuda também, caso alguém tenha interesse.

O CarreiraTI é totalmente desenvolvido em Ruby on Rails.