CSS Hacks - IE6, IE7, Firefox
Infelizmente ainda tem muita gente usando Internet Explorer 6 por aí.
Nos grandes portais brasileiros, segundo as últimas pesquisas, esse número chega a perturbantes 40% dos usuários. Ou seja, o seu site precisa ser exibido corretamente no IE6. E seria fácil se o IE7 renderizasse o htm da mesma maneira, assim você faria seu código para o Firefox e precisaria de apenas um hack: que funcionasse no IE6 e IE7. O famoso underline (’_') antes dos seletores (’_width:’) resolveria. Mas isso não acontece, pois essa última versão do IE corrigiu algumas falhas na interpretação dos padrões, não aceita o hack do underline e renderiza os estilos de maneira diferente da versão anterior.
Ou seja, muitas vezes o seu layout aparece de 3 maneiras diferentes dependendo do browser onde está sendo exibido: no Firefox [e outros browsers Standards compliants], no IE7 ou no IE6.
Como isso acontece com frequência (eu já tive esse problema em vários sites) segue uma maneira simples de resolver:
Hacks específicos para cada navegador.
Acima vocês podem ver a mesma página sendo exibida de forma diferente em cada um dos três navegadores (em cada um deles o box aparece de uma cor diferente). Isso acontece porque estou usando o seguinte código:
#box {
width:100px;
height:100px;
border:2px solid #ddd;
background-color:red; /* Todos os navegadores interpretam essa linha: Firefox, IE7 e IE6 */
*background-color:blue; /* Apenas IE7 e IE6 */
_background-color:green; /* Apenas IE6 */
}
As quatro primeiras linhas são interpretadas por todos os navegadores.
A 5ª linha, com o asterisco (’*') na frente do seletor, é interpretada apenas pelo IE7 e IE6, então o Firefox mantém o background vermelho.
E a 6ª linha, com o “_” na frente, é reconhecida apenas pelo IE6, então o IE7 mantém o bg blue.
Isso já resolveu muitos problemas beeem chatos.
Novo(s) layout(s), peça pelo número
Bom, brincando um pouco com CSS cheguei bem perto o que eu queria para este novo template do Top Rated: deixar o código o mais simples possível e a stylesheet bastante flexível. Assim vai ser mais fácil fazer algumas experiências com layouts, javascript, css..
E a primeira experiência é com o visual, quero fazer vários temas e dar a possibilidade do usuário escolher aquele que mais goste, usando apenas CSS para as variações. Mais ou menos como o CSS Zen Garden faz, mas sem recarregar a página. Ainda faltam alguns ajustes, principalmente para fazer com que, depois de escolhido um tema, ele permaneça para os próximos links. Mas já dá pra ter uma idéia:
Tema 01
Tema 02
Tema 03
Por enquanto vou deixar o Tema 03 Tema 02 ligado, depois eu coloco aqui exatamente como eu fiz, código, javascript, etc.
Dreamweaver CS4 Beta
Resolvi fazer o download da versão beta do novo Dreamweaver CS4 pra ver o que a Adobe tinha feito pra melhorar o software.
Confesso que gostei bastante. Praticamente todas as novas features realmente ajudam a melhorar a o fluxo de trabalho, não são apenas pra inglês ver.
Mais Espaço
Uma das novidades que mais gostei foi a nova interface do programa. A barra de título foi retirada e os botões de minimizar, maximizar e fechar foram integrados ao menu, o que favorece a viewport, que ganhou mais espaço para visualização do código e layout.
Live View
Além das visualizações “Code”, “Split” e “Design” agora existe a “Live View”. Uma nova maneira de exibição da página que usa a engine WebKit e renderiza exatamente como a página será vista no browser, mantendo o acesso ao código. Velha solicitação dos usuários finalmente atendida pela Adobe.
Arquivos relacionados a um clique de distância
Agora, logo abaixo da aba com o nome do arquivo que está sendo editado, existe uma lista de todos os arquivos relacionados a ele, incluindo JS’s, CSS’s, XML’s ou mesmo PHP’s. Basta clicar no nome para abrí-lo. E o que é melhor: mesmo que o arquivo não esteja na sua máquina, sendo chamado via endereço absoluto direto da net, você pode também clicar sobre o seu nome e visualizar o conteúdo na hora. Por exemplo, não será mais preciso ficar baixando vários JS’s para saber o que cada um deles faz. Muito bom!
Há muitas outras novas funcionalidades, você pode ver a lista completa aqui.
Tendências
Algumas coisas já podemos afirmar, outras especular.
1. Abas - Acho que elas realmente vieram pra ficar. Toda a interface é baseada nelas, que foram levemente simplificadas.
2. Espaço e customização- Cada vez mais o espaço para edição ganha importância na interface juntamente com a possibilidade de customização. Prova disso é que agora, ao invés de 2, temos 8 configurações diferentes para a workspace.
3. Acredito que as próximas versões da suíte Adobe acompanharão essas mudanças. Tomara.
Pequenas mudanças - layout, parceiros e RSS
Acordado, 1:43h da manhã, tsc tsc… E, como cabeça desocupada é moradia do diabo, melhor arranjar alguma coisa pra fazer. Então aproveitei pra dar uma mexida no layout do blog, só pra passar o tempo. Criei vergonha na cara e também coloquei os links do Herrera, da Júlia e do Mattos na barra lateral ali. Ainda falta mais, vou colocando aos poucos.
Ahh.. resolvi mudar o RSS também. Ao invés de usar o default fornecido pelo Wordpress cadastrei o Top rated no FeedBurner. Se você assina aproveita e já muda aí [http://feeds.feedburner.com/toprated]. Será que os servidores dos caras vão aguentar todo esse tráfego adicional?! 
É isso aí. Top rated, dedicação totaaaal à você.
PSD2CSS - Converta seu layout PSD em HTML e CSS
É exatamente isso que você está pensando! No PSD2CSS você faz o upload do seu layout no formato PSD [PhotoShop Document] e… voila! O site o converte automaticamente para HTM e CSS!!
Ok, ok… o resultado não chega a ser perfeito. Todo o layout é montado com imagens, cada layer é transformada num arquivo PNG. Máscaras não funcionam muito bem e as layers de texto não são reconhecidas, o que é uma pena. O código gerado é parecido com o que se obtém usando a exportação diretamente no Photoshop, mas não igual.
Como disse, o resultado não é ideal, está longe ainda do que se espera de uma página bem estruturada semanticamente e CSS bem escrito. Mas ainda assim, talvez em alguns casos possa ser útil, pra alguém que está começando a aprender a escrever HTML e CSS ou até para layouts bastante simples por exemplo.
Typetester. Compare e escolha a melhor fonte para o seu projeto
Uma dúvida que sempre aparece quando estou começando um projeto é qual fonte usar. Se o cliente já tem boa presença na web e um styleguide bem definido é simples. Mas se o projeto parte do zero é comum fazer diversos testes até chegar na família ideal para aquela cor de fundo, o tamanho que dará melhor leitura, a diferenciação entre headers etc..
Então aqui vai a dica, se estiver com alguma dessas dúvidas, use o Typetester. Um site bacana que permite comparar na mesma tela até 3 fontes diferentes, setando o tamanho, leading, tracking, letter-space e mais um monte coisas. E depois de escolher qual ficou melhor você pode baixar o CSS! Funciona redondinho e ajuda bastante. Liberte-se da verdana rapaz!
ET: e claro, comic sans jamais!