Analise Na Definição, Customização E Desenvolvimento De Templates Para O Cms Joomla!

1.            Introdução

 Desde sua explosão em 1994, a Internet passa por evolução muito acelerada. Os sites eram desenvolvidos no formato HTML (HyperText Markup Language) tendo, portanto, conteúdo estático, conjunto de instruções que dizem ao navegador como apresentar o conteúdo de uma página Web. Com o advento das linguagens de programação e o surgimento de novos serviços, como uma simples busca até uma compra de um produto em uma loja virtual. Neste momento surge o problema da desorganização do conteúdo, tanto para quem o oferece como para quem o procura. E como o número de páginas a serem mantidas em um site é cada vez maior, o processo de criação e edição tornou-se muito complexo.

Segundo Correa (2009), a solução encontrada para este problema foi à criação de gerenciadores de conteúdo o CMS, que permitissem a separação da camada de conteúdo da interface e ainda oferecesse módulos independentes com funções específicas e que pudessem ser adicionados ou excluídos do sistema sem qualquer alteração do conteúdo apresentado.

Isso significa que um site CMS será moderado e criado por uma equipe técnica, e gerenciado e dirigidos por usuários não técnicos. Joomla! é provavelmente a configuração mais fácil entre todos os CMSs atualmente disponíveis, que permite aos usuários com as mais modestas habilidades técnicas aproveitar o seu poder. (North, 2008).

Outro fator essencial de um site é a interface, ela precisa auxiliar o internauta a entender o que são, como estão organizados e como se comportam seus elementos mais complexos. Costa (2009) complementa quanto mais efetiva for à interface nesse aspecto, mais fácil será a aproximação da entrega de conteúdo com a necessidade que originou sua busca.

 2.            Referencial Teórico

 CMS é um uma coleção de scripts que separa o conteúdo de sua apresentação. Suas principais características são as facilidades de criação e edição de conteúdo e páginas Web dinâmicas. A maioria faz mais, tendo a capacidade de adicionar uma ampla variedade de extensões ou plugins para aumentar a funcionalidade (North, 2008).

Segundo Wakasugui (2009), um CMS serve para ajudar na criação de um website ou um portal de forma rápida e eficiente. O Joomla! é um CMS open surce (código aberto) desenvolvido a partir do Mambo. É escrito em PHP (Hypertext Preprocessor) e roda no servidor Web Apache[1] ou IIS[2] (Internet Information Services) e banco de dados MySQL[3]. Entre suas características o Joomla! possui uma massiva comunidade de desenvolvedores no mundo todo que contribui com mais de 2000 extensões, o fórum oficial do Joomla! possui 331.297 membros, seu fórum no Brasil possui 14.128, North (2008) complementa, embora seja uma medida grosseira, é uma maneira útil de se ver o quão grande a comunidade ao redor do Joomla! pode realmente ser.

Sua linguagem, o PHP é uma linguagem de criação de scripts do lado do servidor que foi projetada especialmente para Web. Dentro de uma página HTML, linguagem de marcação utilizada para produzir páginas Web, é embutido o código de PHP que será executado toda vez que a página for visitada. O código de PHP é interpretado no servidos Web e gera HTML ou outra saída que o visitante verá. (Luke; Laura, 2005).

Paralelamente com o código HTML existe o CSS (Cascading Style Sheets) um simples mecanismo para adicionar formatação em documentos Web, separando completamente o conteúdo da apresentação. Silva (2009) descreve a necessidade do surgimento do CSS, adveio do fato de que o HTML aos poucos ter deixado de ser usado apenas para criação de conteúdo na web, portanto havia uma mistura de formatação e conteúdo textual dentro do código de uma mesma página. Contudo, na criação de um grande portal, fica quase impossível manter uma identidade visual, bem como a produtividade do desenvolvedor. É nesse ponto que entra o CSS.

Outro fator presente nas páginas Web são as imagens, então surge à necessidade do uso de um editor de imagem, software caracterizado como editor de imagens bidimensionais. Segundo Santos, ele pode ser usado para edição de imagens, diagramação de material impresso, criação de layout para páginas de Internet, criação de ilustrações, finalização de imagens técnicas como humanização de projetos arquitetônicos e várias outras opções relacionadas com imagens.

2.1         Templates Joomla!

 Template Joomla!, é uma série de arquivos que controlam a apresentação do conteúdo. Um template não é um website e também não deve ser considerado um design completo do website North (2008).  O template define a disposição das informações no site, podendo existir de um a diversos templates para um mesmo site, possibilitando a migração de um template para outro com clique. Para produzir o efeito de website completo, o template trabalha em conjunto com o conteúdo armazenado no banco de dados Joomla! Coelho (2009), descreve alguns tipos de templates:

• Templates free: são templates gratuitos, é muito fácil encontrar de boa qualidade, com apelo visual bom e com nível de configuração razoável.  
• Templates profissionais: são templates desenvolvidos por empresas especialistas que tem como principais atrativos o forte apelo visual, recursos Web 2.0, componentes de efeitos exclusivos, documentação, tutoriais e fóruns.
• Templates exclusivos são feitos para atender um projeto específico, e geralmente são desenvolvidos do zero a partir do briefing e preview aprovado pelo cliente.

      Tabela 1. Tabela comparativa entre templates (Coelho, 2009).

2.2.1        Definir, Customizar ou Desenvolver

 Além da impressão visual ao definir um template, deve-se analisar também o que está por traz, verificar o que é possível alterar via configuração ou seja sem programação, a quantidade, qualidade e nível de parametrização das extensões, a documentação, exemplos, tutoriais e fóruns. Há diferenças brutais nesses aspectos onde um template bonitinho pode ser uma armadilha no sentido de limitações diversas na customização e de o barato acabar saindo caro. Quanto mais personalizado for o site, mais programação demanda e quanto mais tecnologia o template disponibiliza maior é o conhecimento necessário para se customizar. (Coelho, 2009).

Quando se trata do desenvolvimento é necessário observar vários aspectos: usabilidade, acessibilidade e otimização de ferramentas de buscas são todas expressões empregadas para descrever a alta qualidade das páginas da Web atualmente. A maneira mais fácil de conseguir esses três objetivos é empregando os componentes disponibilizados pela W3C (World Wide Web Consortium), órgão de empresas de tecnologia com o objetivo de levar a Web ao seu potencial máximo, desenvolvendo padrões para a criação e a interpretação dos conteúdos para a Web.

Sites desenvolvidos seguindo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software utilizado, de maneira rápida e compatível com os novos padrões e tecnologias que possam surgir com a evolução da Internet. (North, 2009). 

2.2.2        Usabilidade, Acessibilidade e Otimização

 Otimização de um site é o princípio de boas práticas de SEO (Search Engine Optimization) em português conhecido como otimização de site, no processo são feitas alterações no código, deixando o site mais limpo e mais "legível" aos robôs de busca, gerando assim uma diminuição no peso do site. (Simoni, 2009).

A acessibilidade de um site permite que portadores de deficiências utilizem os recursos que um site oferece. Essas ferramentas podem constituir em sintetizadores de voz para deficientes visuais e teclados virtuais para portadores de deficiência motora. (Simoni, 2009).

A usabilidade está diretamente ligada ao diálogo entre o site e o cliente. Um site com uma usabilidade testada e bem planejada permite que o usuário alcance suas metas de interação com o site. Uma boa navegação deve ser de fácil aprendizagem, facilidade de ser memorizada e alto nível de satisfação do cliente. Estes são os aspectos fundamentais para a percepção da boa usabilidade por parte do cliente. (North, 2009). A Figura 1 representa um Website de boa qualidade e um Website de má qualidade levando em consideração a usabilidade, acessibilidade e otimização.

Figura 1. A superposição entre a usabilidade, acessibilidade e o SEO, (North, 2008). 

3.            O Template Desenvolvido

  Utilizando os mecanismos essenciais para o desenvolvimento de páginas Web foi desenvolvido um template Joomla! (Figura 2), com objetivo de mostrar seus componentes, de forma simples podendo eventualmente a partir dele criar outras versões com mais funcionalidades e com layout mais elaborado.

 Figura 2. Representação dos template desenvolvido: tcc_template (Bueno, 2009)

3.1         Os componentes de um template Joomla!

Os compenetes de um template Joomla! devem sercolocados no diretório /templates de uma instalação Joomla!. Então, se tivermos dois templates instalados, nosso diretório se parecerá com:  

/templates/dbueno_template

/templates/tcc_template

O nome do diretório dos templates devem ser os mesmos do template, neste caso dbueno_template e tcc_template. Tradicionalmente, as iniciais do web designer ou o seu próprio nome é empregado como prefixo. Dentro de um diretório de um template existem alguns arquivos chaves:

 /dbueno_template/templateDetails.xml

/dbueno_template /index.php

Estas duas localizações e nomes de arquivos devem ser exatamente como são apresentados, pois é assim que são chamados pelo script central do Joomla.

Abaixo a descrição dos arquivos que compõem um template Joomla!:

• templateDetails.xml

O arquivo templateDetails.xml relaciona todos os arquivos que fazem parte do template. Isto inclui, ainda, informações, tais como, o autor e direitos autorais. Alguns desses são apresentados na área de administração do site, no gerenciamento de template.

• index.php

Este arquivo é o mais importante, Ele monta a apresentação do site e diz ao Joomla onde colocar os diferentes componentes e módulos. É uma combinação de PHP e HTML.

• template_thumbnail.png

A captura da tela do template aberto no navegador. Depois que o template for instalado, isto funciona como uma imagem de pré-visualização visível na área de administração de gerenciamento de template.

•  css/template_css.css

O arquivo CSS do template. A localização da pasta é opcional, mas deve-se especificar onde ela estará. Observe que o nome do arquivo é importante, pois ele é referenciado no arquivo index.php. Você pode denominá-lo como quiser.

•  images/logo.png

Quaisquer imagens que serão mostradas no template. Novamente, por critérios de organização, muitos web designers colocam-nas em uma pasta denominada images (imagens).

 A partir do template "tcc_template" o template "dbueno_template" (Figura 2) foi desenvolvido, acrescentando novas posições e com layout mais limpo, com objetivo de mostrar que partindo da idéia e dos componentes que formam um template Joomla!. O Joomla! não é voltado somente para sites do estilo portal, com grande quantidade de conteúdo e com lugares definidos para seus módulos e componentes mais explorando os recursos dos editores de imagem e os estilos CSS é possível deixar o template de acordo com a necessidade e exigências dos clientes.

 Figura 3. Representação dos template desenvolvido: dbueno_template (Bueno, 2009)

 4.             O Template Customizado

 Durante o processo de pesquisa e desenvolvimento foi realizado a customização do template "Chic Design", para o site de uma instituição de ensino, ao longo do desenvolvimento do site e exigências dos colaboradores da instituição houve a necessidade de sua customização, abaixo as principais mudanças:

• imagens: as imagens foram trabalhadas no editor de imagem, processo de fundamental importância na customização de um template.
• cores: a cor ocupa um lugar de destaque na criação, já que a simples mudança de um tom pode mudar a percepção do observador, a mudança ocorrida foi no arquivo template.css;
• tamanho: a resolução do template era 1024x768 pixels, após as modificações passou para 800x600 pixels, mudança ocorrida foi no arquivo template.css, essa mudança se deu pelo fato de que mesmo em queda ainda há um grande número de usuários que utilizam resolução 800x600.
• posições: o fator posições dentro de um template Joomla! é muito importante, pois são as posições de definem onde os componentes e módulos ficaram, essa mudança foi realizada no arquivo index.php;

Figura 4. Representação do template customizado, à esquerda antes da customização à direita após.   

 5.            Metodologia

 A pesquisa de campo foi realizada com vinte usuários do Joomla! na cidade de Varginha, entre os entrevistados, desenvolvedores de empresas de desenvolvimento Web, freelances e usuários iniciantes, levantando dados sobre os tipos de templates que estão sendo usados e seus  benefícios.

 6.            Resultados e Discussão

 Hipótese 1

Acredita-se que o desenvolvimento de templates, é algo comum entre profissionais, usuários iniciantes não possui essa prática.

 Gráfico 1 - Desenvolvimento de template Joomla! Fonte: Dados da Pesquisa

 Entre os entrevistados 71% nunca desenvolveu template e o restante 29% já desenvolveu.

Hipótese 2 :

Acredita-se que a customização de templates é necessária devido à originalidade que ela proporciona. 

Gráfico 2 - Customização de template Joomla! Fonte: Dados da Pesquisa

 Entre os entrevistados 57% acha a customização necessária, mesmo com dificuldade é impossível utilizar um template sem fazer alteração, 31% acha fácil, na maioria dos templates são necessárias alterações no código, 6% acha difícil, optando por um template que não vai precisar de alterações e 6% tiveram outra resposta: eles montam os templates, de acordo com o que o cliente necessita.

Hipótese 3:

Acredita-se que a escolha de um template se dá de acordo com as necessidades do cliente

Gráfico 3 – Tipo de template utilizado Fonte: Dados da Pesquisa.

Entre os entrevistados 64% já utilizaram templates free, 29 % utilizou templates variados, dependendo da necessidade, 7% exclusivos, desenvolvidos do zero desenvolvidos, por empresa especializada e não houve porcentagem para templates profissionai

Hipótese 4:

Acredita-se que o CMS é um facilitador que auxilia o trabalho do web design.

Gráfico 4 – Autonomia em relação aos CMSs. Fonte: Dados da Pesquisa

 Entre os entrevistados 58% discorda da afirmativa, 42% concordam em partes, o CMS é um facilitador e para o desenvolvedor ter autonomia é necessário conhecimento em varias áreas, não houve porcentagem concordando com a afirmativa.

Hipótese 5:

Acredita-se que a qualidade dos templates oferecidos pela Internet é boa, mesmo assim tem muitas limitações.ráfico 5 – Qualidade dos templates oferecidos na Internet. Fonte: Dados da Pesquisa

 Entre os entrevistados 53% acha que a qualidade dos templates oferecidos na Internet é boa atendendo sua necessidade, 40% acha regular, pois a maioria tem "cara" de Joomla!, 7% tem outra opinião achando que eles servem de base para personalizações e não houve porcentagem que acham ótimos.

Hipótese 6:

Acredita-se que a maioria dos templates oferecidos pela Internet passa uma imagem de que o site foi desenvolvido no CMS Joomla!

Gráfico 6 – Aparência dos templates oferecidos pela Internet. Fonte: Dados da Pesquisa

Entre os entrevistados 73% se posicionou de forma que seus clientes não reconhecem a aparência de Joomla!, para  20% depende do  conhecimento que o cliente tem e para  7% seus clientes reconhecem a aparência dos templates Joomla!.

Hipótese 7: 

Acredita-se que ao desenvolver um site, muitos desenvolvedores não realizam testes em vários navegadores.

Gráfico 7 – Incompatibilidade entre navegadores. Fonte: Dados da Pesquisa

Entre os entrevistados 67% não encontrou incompatibilidade entre navegadores nos sites desenvolvidos e 33% já encontrou incompatibilidade.

Hipótese 8:

Acredita-se que ainda é necessária uma série de iniciativas para alavancar e divulgar o desenvolvimento dos padrões Web.

Gráfico 8 – Padrões W3C. Fonte: Dados da Pesquisa

Entre os entrevistados 67% nunca ouviu falar dos padrões da W3C e 33% já ouviram falar.

7.            Conclusão

A utilização do CMS Joomla! no desenvolvimento Web é um importante aliado dos web designes, numa época onde a Internet e  as informações estão cada vez mais usadas isso porque um CMS serve para ajudar a publicar e administrar conteúdo Web mais facilmente, inclusive por pessoas não técnicas tudo isso a partir de uma "base" já pronta.

O design de uma página  Webé de extrema importância, ele é o responsável pela imagem que a página passa de determinada empresa ou serviço. Para o sucesso de um site o design precisa está em conjunto com o conteúdo, ambos com qualidade. Oferecer um layout original, levando em consideração as exigências dos clientes, exigências que coincidem com bom design, faz parte de desenvolvimento, por isso tanto o processo de customizar ou de desenvolver e de extrema importância.

A pesquisa de campo mostrou dados interessantes referente à cidade de Varginha, foi possível observar que os usuários cada vez mais buscam soluções para desenvolvimento de suas aplicações, e que eles estão cientes dá importância do design no ambiente Web, a porcentagem de usuários que já desenvolveu algum template coincide com a porcentagem dos usuários que encontram incompatibilidade entre navegadores e que conhecem e buscam a utilização dos padrões da W3C.

O CMS se torna um facilitador quando o desenvolvedor possui algum conhecimento, excluindo a idéia de que em um CMS o desenvolvedor perde a autonomia.

 Um ponto satisfatório devido ao tema, é que as páginas Web desenvolvidas com Joomla! são facilmente mantidas, atualizadas, adicionadas e removidas, sem prejuízo de tempo e  isso tudo aliado com  layout personalizado e de qualidade se torna um diferencial no universo da Web onde osprofissionaisprecisamestá atualizados e conectado com os recursos que o avanço tecnológico oferece.

Referências

BELEM, Thiago Dutra da Fonceca  Tecmedia: Web 3.0 – um bicho de sete cabeças?. Disponível em: < http://www.tecmedia.com.br/novidades/artigos/web-3-0-um-bicho-de-sete-cabecas. Acesso em 30/10/2009.

BUENO, Daiana; Desenvolvimento de templates para Joomla! - Portal do TCC. Disponivel em: <http://www.tcc.daiana.w4solutions.com.br/> Acesso em: 22/11/2009

BUENO, Daiana; Desenvolvimento de templates para Joomla! - Portal do Design Web. Disponivel em: <http://www.portal.daiana.w4solutions.com.br/> Acesso em: 22/11/2009

COELHO, Delfino Vieira; Portal 2 Web: Como escolher template Joomla!; Disponível em : Acesso: 09/11/2009

CORREA, Daniel; Comunidade Joomla! Minas: Histórico, Disponível em: . Acesso em 21/11/2009.

COSTA, Roberto Soares; Tecmedia: Diferentes olhares para uma interface.  Disponível em: < http://www.tecmedia.com.br/novidades/artigos/diferentes-olhares-para-uma-interface>. Acesso em 30/09/2009.

ROGÉRIO, Pedro; Pinceladas da Web: Firebug e CSS; Disponível em: < http://www.pinceladasdaweb.com.br/blog/2009/08/11/firebug-e-css/> Acesso: 26/10/2009

SIMONI, Rodrigo; VIA6: O que é otimizar um site; Disponível em: Acesso: 26/10/2009

NORTH, Barrie M; JOOMLA! Guia do Operador. Rio de Janeiro: Alta Books, 2008.

NORTH, Barrie M; Joomla! 1.0.X Tutorial para template Comunidade Joomla! Brasil, Disponível em: <www.joomla.com.br/downloads/.../21-tutorial-de-templates-traduzido.html> Acesso em 19/11/2009.

WAKASUGUI, Helio; Comunidade Joomla! Brasil, O que é Joomla!?, Disponível em < http://www.joomla.com.br/>. Acesso em 21/11/2009.

[1]Apache é um software de desenvolvimento colaborativo que busca criar um servidor Web robusto, de nível comercial e com código-fonte livre de distribuição. Pode ser considerado como um dos mais poderosos e flexíveis dentre os disponíveis no mercado.

 [2] IIS (Internet Information Services) é um servidor Web criado pela Microsoft, uma de suas características mais utilizadas é a geração de páginas HTML dinâmicas.

 [3] MySQL é um simples sistema gerenciador de bancos de dados relacional, de código aberto, multithread, rápido, confiável e de fácil uso.