Por favor, parem de usar o IE 6!

Este post é um desabafo.

Estava eu desenvolvendo um dos meus projetos, e tudo funcionando corretamente, até que me dei conta que ainda não havia testado no famigerado Internet Explorer 6.

Dito e feito, problemas apareceram sem um pingo de explicação. Ou alguém sabe de onde surgem as misteriosas margens ao se definir display: block para um elemento li?

É um absurdo que mais de DOIS anos depois do lançamento do IE 7, constato no analytics do site da Câmara de Vereadores de Rio do Sul, que 65% das visitas se originam do IE 6! Nem os números do Firefox são tão ruins, onde as versões mais antigas, como a 1.5, nem aparecem mais.

Os usuários têm que se conscientizar e atualizar seus browsers, para a facilitar a vida deles próprios, e facilitar um pouco mais a vida dos desenvolvedores.

De que adianta estudar Web Standards, CSS 2.1, CSS 3, se na hora de desenvolver, temos que nivelar tudo por baixo? Se tudo que é desenvolvido deve funcionar no IE 6?

E de quem é a culpa? Da microsoft? Dos usuários? Dos desenvolvedores? Acredito que todos tenham a sua parcela de culpa. A Microsoft, por não desenvolver um sistema de update “forçado” como a Mozilla desenvolveu para o Firefox. Os usuários, por terem preguiça de atualizar e ficarem com a idéia de que “se está funcionando desse jeito, então está bom”. E os desenvolvedores, por não se manifestarem quanto a isso tudo, desenvolvendo sites que incentivem a atualização do browser.

E enquanto isso não mudar, vamos continuar nessa m*rda, enchendo sites de hacks, comentários condicionais e códigos ninja para que eles funcionem bem para todo mundo…

brusheezy.com

Pra quem é designer e precisa dar uma incrementada nos trabalhos, vai aí uma ótima dica, o site brusheezy.com.

O site contém dezenas de brushes para Photoshop e padrões para preenchimento de fundos, vetorizados ou não.

Vale dar uma conferida.

oswd.org

Essa é pra quem precisa de uma ajuda na hora de desenvolver um site e enfrenta problemas na parte do design.

O Open Source Web Design é um repositório de layouts gratuitos e de código aberto. No momento, o site conta com mais de 2000 layouts disponíveis para download e uso, de diversos autores diferentes. Estão no site layouts para os mais diferentes tipos de página, desde e-commerce, blogs e páginas pessoais.

Há ainda outras opções, como o Open Design Community, o CSS Creme e o Template World. Uma pesquisa no Oráculo também rende outros bons resultados.

Vale a pena dar uma conferida, se você é designer e está precisando de idéias, ou se você sofre de carência de criatividade.

Background-position

Essa é mais uma propriedade css extremamente útil, mas às vezes pouco utilizada, pelo fato de que muitas pessoas desconhecem seu funcionamento. Desenvolvendo a nova versão site da Câmara de Vereadores de Rio do Sul, precisei fazer algumas imagens cambiáveis. Para isso, me utilizei da seguinte técnica:

Criei uma imagem única contendo as duas imagens que deveriam ser mostradas, a normal e para quando o mouse estivesse sobre. Mais ou menos assim

Para este item criei uma classe no arquivo css assim:

#lateral #icones ul li.minuto a {
background: url(../img/minuto.png) top left no-repeat;
}
#lateral #icones ul li.minuto a:hover {
background-position: bottom left;
}


A primeira define a imagem do fundo, e a segunda, o comportamento quando o mouse estiver sobre o link. No caso, o alinhamento padrão da imagem é top, como mostrado na primeira, e bottom quando o mouse está sobre o link, como mostra a segunda.

A principal vantagem desse método é o fato de apenas uma imagem ser carregada, o que faz com que o link funcione corretamente já na primeira vez. A desvantagem, é o fato de que se a imagem for muito grande, ela demorará mais para ser carregada.

Position: relative;

Depois de algumas reuniões e trocas com a agência de publicidade que está redesenhando o site da Câmara, o layout foi entregue e foi dado início ao desenvolvimeno do novo site (como citei no post anterior, a versão atual do site é a terceira, mas já estamos preparando a quarta, para o início do ano, eu espero).

E no novo layout, solicitamos algumas particularidades, que durante o desenvolvimento deste me preocupavam bastante. Havíamos pedido uma coluna na lateral direita, que ficava sobreposta ao menu do site. O que me preocupava era como resolver isso com css.

Após uma série de testes, lendo a respeito da propriedade position, vi um valor que nunca havia usado: relative. Lendo a respeito, descobre que esse valor faz com que o elemento fique posicionado em relação ao seu conteiner. Ou seja, para um elemento a nível de bloco que tiver seu position como relative, os valores de top e left serão baseados no seu elemento pai.

Para resolver o meu problema, bastou definir a propriedade position do div como relative, e definir valores NEGATIVOS para top e left, e definir o float como right. Com isso, div flutuou lindamente sobre o menu, aparentemente funcionando correto inclusive no IE. O resultado pode ser conferido aqui.

PS: Antes que alguém pergunte o porquê dos hacks no CSS e das cores diferentes dos fundos, isso foi devido à alguns testes que estive realizando durante o dia.

[Update]: Hoje (15/8), pela manhã recebi os novos arquivos de layout, que acabaram com os problemas de cores e diferenças de tamanho.

Câmara de Vereadores de Rio do Sul

Continuando a série de posts sobre meus trabalhos, conforme dito aqui, trabalho na Câmara de Vereadores de Rio do Sul, e uma de minhas funções é o desenvolvimento do web site da mesma.

O site foi desenvolvido em PHP, MySQL e CSS para o layout. Esta é a terceira versão, sendo que apenas a segunda e a terceira foram desenvolvidas por mim. Este site é também um marco, pois foi com ele que descobri e passei a trabalhar com padrões web.

Noeli Assessoria Educacional

Mais um post da série de sites produzidos, apresento o site da professora Noeli Salete Sorgatto.

Este projeto teve como objetivo apresentar o trabalho realizado pela professora, as assessorias realizadas, sua equipe e disponibilizar um canal de comunicação com seus alunos.

O site foi desenvolvido em PHP, MySQL e CSS. Para este projeto, minha noiva Grasiela também atuou na parte do design e no desenvolvimento de algumas rotinas.

Milene C. Z. Capraro

Continuando a série de sites desenvolvidos, apresento o site da advogada Milene Zerek Capraro.

O site foi desenvolvido com o objetivo de apresentar o escritório e as atividades realizadas.

Para este, PHP foi a linguagem utilizada no desenvolvimento, MySQL para o banco de dados e CSS para o layout. O projeto foi desenvolvido em conjunto com minha noiva, Grasiela Barnabé, que trabalhou principalmente no design do site.

Brisa Linhas Áereas

Começando uma pequena série que irá mostras alguns dos sites desenvolvidos por mim, apresento o site da Brisa Linhas Áereas

A Empresa é uma VA (Virtual Airline, Companhia Áerea Vitual), que iniciou suas atividades em Dezembro de 2007. Como é visto aqui, a empresa é uma companhia áerea virtual, que tem como objetivo a diversão de seus pilotos.

O site foi desenvolvido em PHP, seguindo os padrões da W3C, utilizando CSS para o layout. O desenvolvimento concentrou-se na criação do layout e reestruturação do conteúdo.

O proprietário do site e da companhia, Felipe Faria, gostou tanto do resultado, que baseado no layout deste site, criou outros dois: o TMA Floripa, que é um projeto para formação de controladores de vôos virtuais, e o Air Catarina, é uma outra VA voltada para vôos no estado de Santa Catarina. Este último ainda não concluído.