Paulo Eduardo

Nossa série de documentação de projetos acabou com o layout, a partir daí se encerra a fase de documentação e se inicia a fase de codificação, e é dessa fase que pretendo falar agora.

A codificação inciou com o desenvolvimento da camada de conteúdo, ou o XHTML, procurei utilizar as tags corretas para cada tipo de informação inicialmente sem se preocupar com a parte visual que ficaria para o CSS, dividi o layout em três partes iniciais, o topo o conteúdo e o rodapé, e para cada uma dessa partes fui inserindo o uma amostra do que seria o conteúdo.

Inicialmente nenhuma tag wordpress foi utilizada, desenvolvi a marcação inteira do blog como se estivesse desenvolvendo um site estático, não tinha a menor idéia se seria fácil ou difícil adequar isso depois ao wordpress já que nunca tinha feito isso antes.

Após toda a marcação definida comecei a dar cor a estrutura com o uso das CSS, e somente quando tudo já estava do jeito que deveria estar porem com conteúdo falso que entrei na pagina do wordpress para consultar a documentação e descobrir o que estava pela minha frente.

Alem da documentação abri os arquivos do template anterior para que pudesse acompanhar com um exemplo já pronto.

Foi então que descobri que estava fazendo tempestade em copo d’água, a documentação do wordpress contem uma excelente referencia sobre:

• Desenvolvimento de Temas
• O Loop
• Template Tags
• Conditional Tags
• Include Tags

A primeira pagina que visitei foi a de desenvolvimento de temas, essa pagina contem uma visão geral inicial sobre quais são os arquivos necessários a serem criados para que o seu tema funcione, quais devem ser seus nomes e um exemplo de comentário que deve estar presente na sua folha de estilo com as informações sobre o template.

Logo depois de saber como deveria proceder com os arquivos precisava saber como exibir os comentários na pagina, essa é a tarefa do loop, como o próprio nome já diz, ele realiza um loop nos artigos cadastrados no wordpress é exibe as informações especificas daquele artigo através das post tags descritas na pagina de template tags.

A pagina de template tags, alem das post tags, que apresentam informações como nome do artigo, data e conteúdo, contem também outras tags para exibição de informações ou blocos de informações na tela.

Com apenas as referencias contidas nessas três paginas já é possível desenvolver um tema para wordpress, porem a pagina de conditional tags contem os trechos de códigos necessários para verificar se uma pagina é pagina inicial, pagina de artigo, pagina de conteúdo, se os comentários estão habilitados, se o usuário logado tem perfil administrativo e todos os demais “se`s” possíveis.

A pagina de include tags contem as informações necessárias para que você possa separar trechos da pagina em diferentes arquivos, como se utilizasse o include nativo do php, e explica como esses arquivos deverão ser chamados.

Muito mais simples do que eu imaginava, e com uma ajuda imensa da facilidade proveniente do trabalho da equipe de desenvolvimento do wordpress e da excelente documentação da ferramenta.

Continuando a falar sobre a documentação dos projetos ainda usando o exemplo do novo visual do blog, falarei um pouco de como o wireframe inicial se transformou no layout.

Com o wireframe em mãos a proxima etapa para o desenvolvimento do novo visual era o layout, o layout e a representação grafica mais proxima da realidade efetiva do site, nele é são dispostas as cores, fontes e tamanhos de fontes a serem utilizadas no site assim como os elementos graficos como logomarca, imagens e outros elementos.

No caso do novo visual, a ideia era manter a proximidade de cores com a primeira versão do site, com o intuito de com o tempo criar uma identidade visual do site, simplicidade, usabilidade e acessibilidade eram fatores importantes a serem considerados no desenvolvimento do layout.

Com isso o degrade de azul foi mantido no topo e no rodapé, na area de conteudo o preto no branco foi a escolha devido a maior facilidade de leitura quando essas duas cores são usadas, outras cores com alto contraste também proporcionam essa facilidade de leitura, tomando cuidado com o uso de cores muito fortes que podem causar ofuscamento.

A primeira versão do layout seguia a risca a disposição dos elementos do wireframe, porem ao conlui-la optei pela mudança de lados entre menu e conteudo, o menu que no wireframe ficaria a esquerda passou a direita e o conteudo para a esquerda, tambem foi feita uma sobreposição do menu no topo da pagina, com isso um espaço vazio apareceu entre o topo e o conteudo, na altura da sobreposição do menu, optei então pela colocação dos links para as paginas estaticas a baixo do logo com aparencia de abas.

A versão final então está representada abaixo:

Com isso foi finalizado o desenvolvimento do novo layout, as proximas etapa seriam a codificação das telas em XHTML + CSS e a adequação ao wordpress porem essas não fazem mais parte da nossa serie de documentação de projetos, já que não se tratam mais da fase de documentação e sim da fase de desenvolvimento, porem vou contar tudinho como foi essa experiencia em posts futuros.