Mantendo seu código organizado
Recentemente comecei a trabalhar com a Claudia no xCakeBlogs e isso me gerou uma necessidade que eu não tinha quando trabalhava sozinho: a organização de código.
A maioria de nós programa a nossa maneira, devido a alguns vícios de longa data. E isso gera problemas na hora de trabalhar em equipe. Então aí vai umas dicas que você pode implementar desde já nas suas tarefas de programação.
E por que começar agora, mesmo trabalhando sozinho? Para se acostumar. Faz bem.
Indente seu código
Quando você usa o TAB para espaçar seu código, a leitura dele fica mais fácil. Se uma DIV está dentro de outra, faça ele visualmente parecer que está contida lá dentro.
Defina padrões
Na grande maioria das vezes, tudo que vai ficar dentro da tag head vai ser igual a muitas outras páginas de projetos diferentes. Mantenha sempre uma ordem específica neles para facilitar na hora de mudar algo.
Comente seu código
As vezes tento procurar por determinada area do código e não acho. Comentários do tipo “bloco de anúncios vai aqui” ajuda horrores, ainda mais se um leigo quiser mudar algo.
Use nomes óbvios em classes
Evite nomes do tipo “bloco1″ quando for criar uma DIV. “Bloco1″ não significa nada, exceto que é um bloco com um número. Uma DIV com nome “conteudo_principal” já remete a algo mais óbvio.
Comente, não remova
Não é incomum você remover um pedaço de código que pode trazer problemas que você não note de primeira, ainda mais se não foi você que escreveu-o. Deixe aquilo comentado e preferencialmente com uma explicação de porque quis remove-lo.
Separe em pastas
Essa dica é simples: separe os arquivos comuns em pastas. Eu sempre crio uma pasta img para todas as imagens, css para as folhas de estilo, lib para javascript e psd para os arquivos fonte (como as imagens em Photoshop). Facilita a procura por um determinado arquivo.
Nomes padrões para arquivos
Afim de manter um padrâo e facilitar a vida de todo mundo, tente sempre manter um padrão para os nomes de arquivos. Por exemplo, o arquivo CSS padrão pode ser sempre main.css. Evite usar “main” em um projeto, “principal” em outro e “estilo” num terceiro. O mesmo vale para sub-nomes, ou categorias. Eu sempre uso form_proc.php para um script que só irá processar informações de um formulario, db_proc.php para processar um pedido ao banco de dados, etc.
Faça a limpa final
Antes de entregar o site finalizado, faça uma limpa nele; tire os comentários desnecessários, o excesso de espaços em branco (exceto a indentação), insira os nomes dos autores como meta-tag, assm como a data de última alteração e confira se está tudo bonitinho. Faça também os testes básicos (que deveriam ter sido feitos no decorrer do projeto, mas não custa nada tentar de novo).
Essas foram minhas dicas. Não são baseadas em nenhuma convenção ou semelhante. O aconselhável é que você defina seus próprios sempre baseado em linhas lógicas. Assim, quando qualquer um que entenda de programação bater o olho no que você fez, entenderá rapidamente como foi feito.
E você? O que mais faz para manter seu código limpo e de fácil entendimento?
18 Comentários
10/10/2008 às 12:03 | #
Html Tidy, e em um clique esta tudo tabulado =)
10/10/2008 às 12:09 | #
Boa Canha… Grande artigo… :)
10/10/2008 às 12:24 | #
Comentar o código é a melhor coisa que existe. E mesmo trabalhando sozinho. Questão de organização e forma de deixar o workflow de mudanças (sempre necessárias) muito mais rápido.
As outras dicas também são ótimas!
;*
10/10/2008 às 13:39 | #
normal isso, eu faço de um jeito que eu ultilizo sem muito espaço e sem aquela pulação de linha pra fazer rapido,kkk, mas da pra entender tudo no final, mas tem aqueles casos que são extremos na hora de descobrir onde é oq, principalmente um site inteiro feito em tabela e sem css, igual aconteceu uma vez, preferi refazer o site do cara msm kkk
10/10/2008 às 14:44 | #
Aqui no trampo, eu chamo isso aí que c citou no artigo de “Práticas altruístas”. Pois, mais que ajudar o cara que faz, ajuda o outro camarada que cai de paraquedas no projeto. :)
10/10/2008 às 15:23 | #
huahuhauha
comentar é bom… o problema é o maldito ctrl c…
uma vez peguei um site pra arruma e ele era todo comentado… em alemão oO
ahwuhaweu
10/10/2008 às 15:39 | #
Nunca na história uma união entre um homem e uma mulher fez tão bem a blogsfera brasileira. Resultado: ótimos trabalhos, excelentes artigos!
Parabéns @canha, parabéns @claudiaregina.
Abraços
:D
12/10/2008 às 02:32 | #
Me dei conta de como isso era importante quando tive que modificar um arquivo de 2 mil linhas, sem comentário algum, todo bagunçado e feio.
Outra coisa que eu acho interessante e essencial também é separar o código que vá ser usado mais de uma vez em arquivos separados e apenas incluí-los quando necessário. Ajuda muito na “estética”.
12/10/2008 às 21:15 | #
manter sempre a acessibilidade em alta, pois os “alt’s” das imagens ou os “titles” dos links são bem significativos para o presente momento. Deixar o CSS em altar e reduzir ao máximo o número de tabelas… Sei que é óbvio mas também é muito importante para uma boa estruturação do código.
13/10/2008 às 10:16 | #
Vale lembrar também que código organizado e bem estruturado é prática de SEO. Portanto os Search Engines agradecem. :DDD
14/10/2008 às 09:22 | #
Olá Canha,
lhe enviei um e-mail lhe pedindo uma ajuda, se puder, me dar, lhe agradeço, ok!?
mandei para o ######
Abraços!
15/10/2008 às 17:43 | #
comentar o código além de ser um óptima prática em programação é um bom cartão de visita para quem vê o nosso trabalho em código. Já consegui alguns trabalhos à custa de códigos bem estruturados e devidamente comentados.
16/10/2008 às 23:08 | #
A organização do código é algo imprescindível. Quando se está trabalhando em equipe então, nem se fala.
No entanto, pelo menos relacionado a web, algo que me preocupa as vezes é se o usuário realmente precisa receber um arquivo maior apenas por conter comentários (que pra ele de nada será util).
Lógicamente isso não se aplica a pequenos projetos, aonde a diferença talvez nem seja notada. Mas imagine se um JQuery ou uma MooTools da vida viesse completamente comentada? O arquivo acabaria mais gordinho. :)
18/10/2008 às 11:31 | #
Olá canha e cia, eu sou o pedro, dono do antigo blog Nerdesign (lembram ?). Eu estou de volta com um blog novo (não tão novo agora), o blog do nogueira.
Fiquem ligados que eu vou fazer uma materia sobre o digital paper.
um abraço!
http://pedronogueira.wordpress.com/
20/10/2008 às 14:02 | #
Fala Canha, boas dicas para a galera !
comentar o código é algo que não vivo sem, desde que começei com meus estudos, até hoje (não faz tanto tempo)…
então hoje convivendo no ambiente de trabalho, em que é essencial o trabalho em equipe, minhas práticas desde o início ajudaram/ajudam muito.
Outra dica, mas já na área de otimização de rankeamento dos mecanismos de busca (SEO), ao criar as páginas .html, .aspx, .php, etc, é de extrema importância manter nomenclaturas completas, com palavras separadas por hífen(-). São as conhecidas (ou não) URLs amigáveis, o wordpress é fantástico neste quesito (e em todos os outros né? :)), pq já trás pronto, é só configurar.
Conheço o blog a pouco tempo e não sei se tem algo publicado sobre este assunto. Então fica como dica para um próximo. \o
Abraço, até + \o
30/10/2008 às 11:12 | #
Simplesmente espetacular esse artigo.
Simples, mas que vai ajudar muita gente.
Abraços.
30/10/2008 às 17:21 | #
Muito boa as dicas.
A única coisa que eu deixo de fazer das dicas,são os comentário ao invés de remover.
Para deixar os meus códigos mais organizados eu os coloco no css em ordem alfabetica é um jeito muito legal porque se eu quiser fazer alguma modificação eu vou direto ao ponto.
18/11/2008 às 13:34 | #
ótimas dicas… valeu. Sempre trabalhei sozinho agora tenho um sócio e passarei a usar essas dicas suas que são de grande ajuda!