Pare! Pare tudo o que você está fazendo agora. Você já manja de CSS? Não estou falando daquele painel do Dreamweaver, estou
falando dos recursos que o CSS oferece. Cheguei a conclusão de que todo designer de interface Web tem que saber codificar um bom XHTML na mão. Esse negócio de fazer o layout no Photoshop e entregar ao programador é coisa de webdesigner capenga.
Sabe por que? Simplesmente porque há diversas decisões do design que acontecem durante a codificação. Não existe ainda uma
ferramenta WYSIWYG que agilize tanto a criação de XHTML a ponto de dispensar o Photoshop ou o Flash para esboçar o layout. Então, o layout deve ser criado primeiro e codificado depois. No entanto, quando esse layout vai ser implementado em CSS, algumas adaptações têm que ser feitas para acatar as restrições. Detalhes como área de ação, efeitos rollover e otimização de arquivos são todos decididos nesse momento e isso é tarefa de designer.
Talvez você esteja com duas dúvidas: e esse Flash de que você fala tanto? E o Dreamweaver não quebra o galho? Primeiro, Flash tem suas aplicações mas com certeza disponibilizar textos não é uma delas. E Web ainda é 90% texto. Dreamweaver faz um bom layout baseado em tabelas, mas mesmo na versão 2004 ainda tem que melhorar muito para renderizar um layout baseado em CSS position e float. Ah, você não sabe o que é isso? Então nem adiantaria tentar usar o Dreamweaver, porque ele vai te exigir saber CSS de cor do mesmo jeito. Trate de aprender urgente.
Não é nada complicado. Aliás se você pudesse esquecer tudo o que sabe sobre o arcaico HTML 4, veria que XHTML com CSS é tão fácil que editar código na mão é moleza (ainda mais usando o TopStyle).
Não é aquele bicho de sete cabeças como é o HTML4. Para criar um layout de três colunas basta o seguinte código:
<div id="coluna1" style="float:left; width: 180px;">Olá</div>
<div id="coluna2" style="float:left; width: 400px;">tudo</div>
<div id="coluna3" style="float:left; width: 180px;">bem?</div>
Lembra quantas linhas eram necessárias para fazer isso usando tabelas? Essa tag div aí é análoga as caixas do Pagemaker e do Corel Draw. Olha só, dá pra fazer melhor ainda:
<html><style type="text/css">
.colunalateral { float:left; width: 180px; }
#colunacentral { float:left; width: 400px; }
</style><body>
<div class="colunalateral">Olá</div>
<div id="colunacentral">tudo</div>
<div class="colunalateral">bem?</div>
</body></html>
Opa! Acho que você já pegou quais são as duas grandes vantagens do CSS: separação entre formatação e conteúdo (e consequente facilidade para atualização) e diminuição drástica no tamanho do código. Se você pegar aquelas linhas dentro da tag style e colocar num arquivo externo e carregar em cada página com esse código:
você controla o layout de todas as páginas de um site com um só arquivo. Genial, não? Melhor ainda para seu usuário que só vai precisar baixar isso para uma página fictícia (note como só com o código é possível entender a página):
<body>
<h1><img src="logo.gif" alt="Tabajara design" /></h1>
<p>Nós temos o melhor design do mundo, aquele que pode ser visto
por qualquer pessoa em qualquer lugar. <strong>Ubiquidade</strong>
é nosso codinome.</p>
<div id="destaques">
<h2>Você vai gostar...</h2>
<p><img src="foto_paisagem_nuvens.jpg" alt="Fique tranquilo,
deixe o trabalho com a gente" /> Garantia de <a href="prazo.html">conclusão
no prazo</a> determinado</p>
<p><img src="mao_apontando.jpg" alt="Não fique
aí parado, contrate–nos já!" /> Você foi escolhido
para ser o nosso cliente, saiba <a href="porque.html">porque</a></p>
</div>
</body>
Os estilos que estão no arquivo externo fazem o posicionamento dos elementos, as cores, as imagens de fundo e etc. Agora imagine se o usuário não pode ver a página diagramada, como na ocasião de usar um Palm que tem uma tela de 120×120 pixels ou usando um leitor de tela? Sem problemas, mesmo ignorando os estilos, a página continua completamente usável, um luxo inatingível usando tabelas.
Agora minha última cartada para te convencer: sim, os browsers atuais são compatíveis com essa codificação. Se você
tiver saco de lidar com algumas pequenas diferenças de renderização, seu website vai ficar igual nos browsers Internet Explorer 5+, Mozilla, Opera 7+ e virtualmente qualquer browser que possa vir a surgir. Como eu garanto? Simplesmente porque você está fazendo aquilo que está oficializado pelo W3C como sendo o padrão de mercado.
Por falar em mercado, que tal ganhar algum dinheiro com isso? Diga aos seus clientes que você domina técnicas que podem jogar os websites deles lá pra cima na listagem do Google.
“Imagine digitar o ramo que sua empresa atua e ver ela em primeiro lugar?” Provoque, mexa nos egos deles. Se você conseguir convencê–lo não será difícil cumprir a promessa. Basta escrever um código bem esperto, semântico.
Opa, qual o significado dessa palavra? Significado, oras! Lembra da tag <h1> que a gente nunca usava naqueles tempos de HTML 4 porque ficava muito grande? Pois o conteúdo que estiver dentro dela é interpretado pelo Google como sendo um título, ou seja, coisa importante. Escreva um título gostoso de ler, com uma palavra–chave legal no meio e pronto! Mais um pontinho
no ranking dos buscadores. Não, o seu h1 não vai ficar grande se você colocar isso no CSS: h1 { font–size: 100%; }. Conheça bem as tags semânticas do XHTML e as formatações que o CSS possibilita e arrase. [Webinsider]
.
Frederick van Amstel
Frederick van Amstel (fred@usabilidoido.com.br) é editor do Usabilidoido e mestrando em Tecnologia pela UTFPR.
6 respostas
Conheço CSS há relactivamente 2 anos. Confeço que, quando experimentei fiquei estupefacto com a facilidade que o mesmo me porpocionou, ao contrário das tabelas, no desenho de páginas web.
Comecei a construir as páginas com FrontPage 2000 e depois com o Dreamweaver MX, ambos usando tabelas. Era uma dor-de-cabeça constante na ora de posicionar certos elementos…
Comecei ler alguns turoriais de CSS e descobri o quanto podia dispensar usando simplesmente HTML e CSS. Vale a pena, de facto, aprender. Aliás, é uma obrigatoriedade para os webdesigners. Se alguém ainda não estiver a par disto, convém começar a surfar a net e ler, ler e ler.
Valeu.
Tem algum tutorial que ensino como codificar o CSS para Handhelds e celulares?
eu sou um flasheiro.. de carteirinha…heheheeh.. mais fiquei convencido…. vou começar estuda firme CSS…. to pegando firme no ColdFusion…. linguagem de programação muito simples ….como o CSS basta saber explorá-lo…
Um ótimo, perfeito artigo pra época que foi escrito, quanto os Webstandards e CSS ainda estavam engatinhando no Brasil.
__Gostaria muito que certos webdesigners de faculdade lessem esse artigo…Cara, o caras criam aberrações em Flash! Lógico que não são todos, mas infelizmente a grande maioria é assim. Você entrar numa página com o texto todo, mas todo escrito em flash e o cara ainda vir com aquele papo de usabilidade…Regulamentação da profissão…etc…É a maior falta de vergonha na cara.
Simplesmente uma besteira!