Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 10/10/08

Melhorando seu processo de trabalho

Quem já não passou pela situação, com pelo menos 6 meses de experięncia na área de Web Standards, ao observar seu antigo código HTML / CSS e percebeu a melhoria tanto na organização como na performance do site?

Já escrevi por aqui um artigo bem interessante sobre como melhorar seu rendimento profissional, além de outro fator que influencia diretamente no assunto deste post, a colaboração que deve ocorrer entre Web Designer e desenvolvedor CSS.

Agora falaremos de algo que envolve a organização do trabalho, seja numa equipe com várias pessoas, como um simples freelancer: a padronização.

Como foi comentado no evento da W3C, o brasileiro geralmente não gosta da palavra padrão, pois pode parecer “engessado”, algo que realmente não combina com as práticas em nosso mercado de trabalho. Mas com o tempo a gente aprende e vę que a organização do desenvolvimento e fluxo de trabalho garante um resultado mais preciso e, conseqüentemente, com nível de qualidade superior.

Digamos que chegue um grande site para desenvolvermos e, logicamente, existe um prazo a ser cumprido. No entanto, deveremos tomar algumas providęncias para que o tempo não seja excedido e, em casos extremos, não percamos o cliente.

Supondo que o layout já esteja feito, assim já pulamos a parte de briefing, Arquitetura da Informação e Criação, indo diretamente ao desenvolvimento HTML e CSS. Então, deve-se iniciar pelos códigos HTMLs, focando totalmente nesta parte, mantendo sempre os princípios do KISS (keep it simple stupid) e semântica do código pois, como sempre digo, o código HTML bom é aquele que não precisa ser ajustado de acordo com “firulas” do layout.

Padronização de HTML

Na etapa do HTML devemos adotar uma padronização no desenvolvimento, como por exemplo estabelecer um estilo de DOCTYPE dependendo do foco do site (grandes portais tendem a ser administrados por uma ferramenta, por isso o XHTML 1.0 Transitional é o mais indicado por ser mais tolerante a erros no código) e um arquivo padrão, com um header e suas meta tags pré-escritas. O modo pelo qual inserimos o CSS também deve ser padronizado: alguns preferem utilizar @import com estilo inline, enquanto a maioria (como eu) preferem utilizar o <link rel="stylesheet"... />.

Segue abaixo o exemplo de “template” HTML que utilizo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Carlos Eduardo de Souza" />
<title>T&#237;tulo do site</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/estilo_ie7.css" media="screen" /><![endif]-->
</head>
<body>
</body>
</html>

Além do código propriamente, deve haver um consenso entre os desenvolvedores da nomenclatura dos arquivos e organização de pastas, assim com o decorrer do projeto e sua manutenção, não perde-se tempo para encontrá-los.

Fica também a sugestão do controle de versőes, ítem importante principalmente em equipes numerosas como aqui na agęncia e, para este fim, utilizamos o Eclipse.

Padronização de CSS

Já na parte do CSS a padronização é um pouco mais complicada, pois muita coisa é subjetiva, ou seja, está relacionada com as preferęncias de cada desenvolvedor. Ao começar pela escrita das regras: muita gente prefere escrever uma regra com uma propriedade por linha, enquanto outros aderem a prática de uma regra por linha, com todas as propriedades seguidas lado a lado. Particularmente prefiro esta última opção, pois o documento fica muito menor e para encontrar as regras fica muito mais fácil.

Também temos que nos ater aos comentários, também estabelecendo um padrão para que o documento fique mais legível:

/*
Cliente: Nome do Cliente
Projeto: Nome do Projeto
*/

/*
--------------
ELEMENTOS e CLASSES
--------------
*/

/* ------- GERAL ------- */

Este é um exemplo do início de código CSS que adotei em meus projetos pessoais e na agęncia. Pode-se observar que o código começa com o nome do cliente e projeto, seguido de um “comentário principal”, para os elemtentos e classes aplicados a todo o site. Já o comentário “geral” é um exemplo de código utilizado para separar as seçőes, algo como um “comentário secundário”.

Além da escrita dos comentários e regras, também temos que mentalizar a forma que iremos exibir as propriedades. Muitos desenvolvedores optam por escrever as propriedades em ordem alfabética, mas eu prefiro escrever em ordem de relevância, por exemplo, colocando as propriedades de posicionamento, float, display, width, height, margin, padding, etc., na frente, enquanto as outras relativas a fontes, alinhamentos de texto, etc., ao final de cada linha. Assim todos os desenvolvedores da equipe encontrarão as informaçőes principais em primeiro lugar.

Também temos que nos ater aos hacks pois há diversas soluçőes, principalmente no que se diz a respeito de Internet Explorer. Há a possibilidade de usarmos conditional comments ou os famigerados hacks dentro do CSS. O importante é que haja uma padronização e a equipe siga o mesmo caminho para solucionar tais problemas.

Padronização é a chave para o sucesso

Sei que este artigo não é direcionado aos novatos da área, até porque envolve aspectos mais administrativos de nossa profissão, mas nada impede que estas dicas sejam seguidas desde seu começo na área.

O importante é que saibamos a relevância de seguirmos certas regras e que, com elas, nosso rendimento aumentará, além de termos uma base para que não aconteçam ou, pelo menos, diminuam as chances de erros durante o processo do projeto.

Assuntos: CSS, Geral, Web Standards, XHTML
Trackback Feed deste artigo

7 comentários para "Melhorando seu processo de trabalho"

  1. Lincoln | 10/10/08 - 5:31 pm

    Acho legal comentar também sobre a hierarquia das pastas e organização dos arquivos dentro delas … assim, qualquer projeto que faça hoje, no futuro caso haja manutenção, o fluxo a ser seguido é o mesmo, e até mesmo o Padrão de HTML (header etc) pode sempre ser o mesmo – setado no software… (pspad claro eeheh).

    Topo
  2. Carlos Eduardo de Souza | 10/10/08 - 6:06 pm

    Com certeza a padronização na hierarquia de pastas e arquivos é importante.

    Como citei durante o post, este é um dos itens importantes:
    Além do código propriamente, deve haver um consenso entre os desenvolvedores da nomenclatura dos arquivos e organização de pastas, assim com o decorrer do projeto e sua manutenção, não perde-se tempo para encontrá-los.

    Topo
  3. Maicon Junches | 14/10/08 - 11:12 am

    Gostei do seu, eu fiz um também mas vou aderir o seu porque achei mais completo =)

    Topo
  4. CSS simples: abreviando as propriedades · Portfolio e blog sobre Web Standards - project.47 | 15/10/08 - 4:50 pm

    […] Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual vocę dispőe os valores, mas é interessante manter um padrão de escrita: […]

    Topo
  5. 1 Fórum W3C Brasil - Por uma Web Única · Portfolio e blog sobre Web Standards - project.47 | 24/10/08 - 11:19 am

    […] a realidade é que a adoção dos Web Standards trará mais flexibilidade ao layout, ao mesmo tempo que padroniza os […]

    Topo
  6. 1 Fórum W3C Brasil - Por uma Web Única - Mídia Digital | 28/10/08 - 9:39 am

    […] é que a adoção dos Web Standards trará mais flexibilidade ao layout, ao mesmo tempo em que padroniza os […]

    Topo
  7. Abreviação das propriedades CSS | Blog Web Standards | 31/05/11 - 7:11 pm

    […] Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita: […]

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons