Antes de tudo, o mais importante para você criar páginas profissionais é ter consciência que o código, embora fique oculto sob os olhos do internauta convencional, é extremamente importante para futuras manutenções. Se você é o webdesigner ou webmaster de um site e será responsável por atualizá-lo no futuro, irá preferir fazer manutenções de forma rápida e simples e para isso basta você criar sua própria organização.

Com uma organização bem definida, você encontrará os trechos que deseja alterar mais facilmente. Mas não é apenas organizar o código que vale, importante também organizar seus arquivos em pastas, padronizar o nome, etc. Veja algumas dicas de arquivos e códigos abaixo:

• Use nomes de arquivos em minúsculo: dizem que escrever tudo em maiúsculo na Internet indica “gritar”. Porque então não aplicamos também isto aos nomes dos arquivos? Além de ser uma padronização, garante compatibilidades: servidores Unix ou Linux são “caso sensitivo”, ou seja, o arquivo Index.htm é diferente de index.htm e se for linkado erroneamente, irá dar erro de “página não encontrada”. Claro, não apenas para arquivos HTML: GIF, JPG, ASP, SWF, MP3, tudo coloque sempre em minúsculo;

• Quanto mais pastas, mais organizado: faça uma estrutura hierárquica de seu site. Por exemplo, se você tem um site sobre música e falará de vários tipos de som, crie um menu com cada um dos estilos apontando para pastas e não para arquivos, ou seja, ao invés de criar junto com o index.html da homepage um arquivo rock.html, crie a pasta /rock e lá dentro crie o index.html. E crie uma pasta para cada estilo. E se dentro de rock existir “rock clássico” e “metal”? Dentro da pasta “rock” crie “classico” e “metal”, ficando assim na hierarquia: /rock/classico e /rock/metal;

• Saiba onde colocar as imagens: se uma imagem será usada apenas em um caso, tente colocá-la no local específico de onde será chamada. Por exemplo, se a imagem metallica.jpg for utilizado apenas do index.html da pasta /rock/metal, crie uma pasta /rock/metal/imagens e jogue-a aí dentro. O que muitos fazem é jogar todas as imagens apenas na pasta /imagens do site, ou seja, misturar todas as imagens. Utilize /imagens apenas para imagens utilizadas em vários lugares diferentes do site;

• /imagens também deve ser organizado: criar a pasta /imagens é útil para as imagens da homepage em si e para imagens usadas em diversas partes do site. Mas mesmo assim, crie subpastas e organize os arquivos. Uma idéia é criar /imagens/layout para as imagens que compõe o layout total do site, pois será ser chamada sempre. Ou outras pastas como /imagens/banners, /imagens/flash para SWF, etc;

• Nunca acentue ou use espaços em nome de arquivos ou pastas: um erro grave é colocar acentos ou espaços nos nomes dos arquivos. Motivo: o Internet Explorer sabe tratar (fora das especificações) estes caracteres mas navegadores diferentes não necessariamente. E nestes todos os links podem não ser acessados e fazer com que seja impossível navegar em seu site. O mesmo vale para espaços nos nomes. Ao invés deles use o “underline:_”;

• Escreva os comandos em maiúsculo: é uma boa prática pois visualmente você consegue identificar os blocos de comandos e blocos de texto mais facilmente pois dificilmente você vai escrever blocos de textos grandes tudo em maiúsculo para os visitantes do seu site. Isso vale para os comandos e parâmetros, mas tome cuidado pois em alguns casos, como JavaScript, o conteúdo dos parâmetros (dentro das aspas) devem realmente estar em minúsculo. Aí é questão de prática;

• Saiba referenciar pastas corretamente: uma boa idéia é sempre referenciar pastas desde a raíz do site (/) quando o objeto chamado for genérico ao site inteiro, por exemplo, as imagens de layout como citamos antes. Mas para objetos pouco usados, ou seja, somente para aquele arquivo, utilize a referência relativa. Veja mais informações sobre isso nas “perguntas de usuários” aqui na sessão de Dicas, com o título “Imagens que não aparecem”;

• Evite comentar blocos de códigos antigos: o que muitos fazem é utilizar-se do comando de comentário (que inibe a exibição) <!– e –> para deixar de exibir um bloco antigo de HTML e escrever outro novo. Embora o resultado visual seja o mesmo que removendo o bloco, existe um fator importante: tamanho do arquivo. Mesmo não sendo exibido ele será baixado pelo usuário e trafegará mais e no final das contas serão bytes inúteis. Sempre lembre-se que ainda existem muitas pessoas que usam modem, e muitas ainda modems antigos e lentos, e 2 kbytes de texto comentado demoraram um segundo a mais para carregar seu site. Ao invés de comentar o bloco, apague-o ou encoste-o em um outro arquivo;

• Quebre linhas durante o código: embora vá um pouco em contradição à dica anterior, quebrar linhas dentro do código HTML é fundamental para organizar. Por exemplo, ao abrir um comando <TABLE>, dê um “enter” antes e ao fechar dê outro. Se você criar uma lista e cada item tem um texto próprio, deixe uma linha em branco entre cada título e texto do item. Em geral, saiba deixar uma linha em branco em trechos de código que faça você chegar a um ponto mais facilmente em uma manutenção;

• Faça endentação dos códigos: para comandos compostos como <TABLE> que possui o comando <TR> dentro e por sua vez este possui o <TD> dentro, afim de evitar se perder no “abre e fecha” de tags, faça endentação das mesmas, ou seja, para tags internas, alinhe uns 3 ou 4 espaços mais para a direita do que o anterior, e feche-o na mesma “coluna”, voltando assim cada vez mais para esquerda e fechando os comandos na mesma coluna, seguindo a hierarquia até a primeira coluna. Mas cuidado, tente não exagerar nas endentações para que não tenham linhas começando muito longe da primeira coluna e criando barras de rolagem horizontais enormes de serem roladas. Além disso, tente usar TAB para endentar e lembre-se que infelizmente a endentação aumenta consideravelmente o tamanho do código, conforme descrito duas dicas acima.

by ThiagoSouza.com.br