A maioria dos novos usuários em Joomla!, principalmente aqueles que já desenvolveram algum projeto estático, têm dificuldade em entender como funciona e o que é um template?

Nesta série de artigos que inicio hoje, espero contribuir na retirada dessas dúvidas. Começaremos com uma parte teórica e um desenho que faço nos cursos presenciais " aos alunos do curso presencial, finalmente o desenho saiu do quadro ." e seguiremos com vídeo-aulas que serão postadas no ambiente do curso EAD e no youtube abordando a criação de um template a partir de um layout, com uso de css hacks, inserção de um movie clip (flash) de forma acessível no template e atualização do navegador embutida no template.

Para acessar a imagem em tamanho ampliado, clique aqui. Vamos à luta!

1) Vamos começar identificando os marcadores de nosso diagrama

:: caso tenha esquecido, clique aqui para baixar a imagem em tamanho ampliado.

este símbolo identifica a folha de estilos
este símbolo identifica nosso arquivo xml
este símbolo identifica o nosso banco de dados e o backend do Joomla!
este símbolo identifica o arquivo index.php

2) O que é um template?

Muitas pessoas imaginam que "template" é uma exclusividade do Joomla!, ou ainda, que template faz parte do código fonte do Joomla! Ledo engano. Template, é a camada de apresentação gráfica de qualquer aplicativo orientado a objetos que utilize "design patterns" e no caso do CMS Joomla!, é uma extensão como outra qualquer. Da mesma forma que você instala um componente de galeria de imagens por exemplo, você instala um template.

3) Como é organizado o template?

Para que seja considerado um template, a extensão deve ter no mínimo a seguinte estrutura organizacional:

• / - diretório raiz
• /css - diretório css
• /images - diretório images
• /html - diretório html
• / - Template.Details.xml - arquivo xml
• / - index.html - arquivo html
• /- index.php - arquivo php

Dependendo das funcionalidades do template, ele poderá possuir outros diretórios e arquivos. No nosso caso, faremos um template com mudança de tamanho de fonte e utilizando flash de forma acessível. Logo, vamos criar mais 2 (dois) diretórios:

• /js - diretório js
• /swf - diretório swf

4) Entendendo os diretórios

• - Este é o diretório raiz do template. No nosso caso, o nome do template será jb. Logo, o diretório raiz também será nomeado de jb.
• /css - a "barra" significa que o diretório css está dentro do raiz. Ou seja, dentro de jb. No diretório "css" fica a sua folha de estilos que por padrão recebe o nome de template.css
  * Dependendo das funcionalidades do template, o mesmo pode conter várias folhas de estilos dentro de subdiretórios contidos no diretório css. Por exemplo: css/style1
• /images - este diretório é destinado às imagens que irão compor o layout gráfico do template. Botões, imagens de fundo e etc...
• /html - este diretório merece um destaque especial. O Joomla! 1.0 era muito criticado por sua falta de acessibilidade. Tendo em vista o conceito de orientação a objetos implementado no Joomla! 1.5 e graças ao PHP 5, já que no PHP 4 não temos ainda o conceito de orientação a objetos na linguagem, este problema foi resolvido. Neste diretório ficam todas as instruções e estilizações para que seu template implemente a apresentação do conteúdo de forma acessível, ou seja, sem tabelas.
• /js - nosso template irá implementar a troca de fontes, além do flash de forma acessível, logo, precisaremos deste diretório para armazenar o nosso arquivo contendo script javascript.
• /swf - nosso template irá implementar um topo em flash, logo, precisaremos deste diretório para armazenar o movie clip.
• /index.html - o arquivo index.html em branco dentro de qualquer diretório é essencial para evitarmos um tipo de ataque conhecido como "Directory Scanning".
• /TempleDetails.xml - este é o arquivo xml responsável pela instalação do template e posicionamento dos módulos no Joomla, para o mesmo. Neste arquivo estarão contidas as informações relacionadas ao desenvolvedor, versão e licença do template, além de toda a sua estrutura de diretórios e arquivos.
  * este arquivo não permite a utilização de caracteres especiais, inclusive acentuação gráfica.

• /index.php - Jacob Nielsen cita em seu livro Projetando Websites que "na web, o conteúdo é Rei." No nosso caso, o arquivo index.php é o "cara."
  Este arquivo é o responsável por todo o funcionamento do template, é ele que faz a ligação entre a folha de estilos e o CMS Joomla e espero que você entenda melhor assistindo a vídeo-aula.

5 - A estilização gráfica do template

Abra o diagrama em tamanho ampliado e acompanhe comigo a linha de raciocínio do marcador

• estamos dentro do diretório css no arquivo template.css, que você já sabe, é a folha de estilos do nosso template.
• em algum ponto do arquivo template.css temos uma linha de código que começa e termina com {} (chaves). Dentro deste par de {} temos as instruções css. No exemplo da imagem temos: # left { margin-left:5px; background:#000; } que pode ser explicado da seguinte forma:
  * # (símbolo que identifica um seletor e significa que as instruções serão aplicadas a toda a DIV que receba o ID left)
  * margin-left:5px; ( significa que teremos 5 px de espaço em relação a margim esquerda )
  * background:#000; ( significa que a cor de fundo desta DIV será preta )

• A css é uma linguagem interessante e caso deseje aprofundar-se indico o website e livro da maior autoridade brasileira no assunto.
• No diagrama você pode perceber o resultado alcançado pela folha de estilos, no primeiro momento incolor e com a posição left em destaque.

6 - O arquivo xml

Ainda no diagrama em tamanho ampliado vamos acompanhar a linha de raciocínio do marcador

• O Template_Details.xml é o responsável por "apresentar" ao Joomla!, o novo template.
• O arquivo xml possui enquanto característica o fato de que as informações ficam dentro de "nós" que precisam ser iniciados e finalizados. Ex: <filename>/css/template.css </filename>
• A informação acima significa que existe um arquivo template.css dentro do diretório css do template. Caso não exista o arquivo fisicamente, o template apresentará erro no momento da instalação.
• O arquivo xml não permite a utilização de caracteres especiais e acentos. A utilização desses caracteres, não impedirá a instalação do template, porém, irá gerar uma mensagem de erro do tipo caracter inválido.
• O arquivo xml é case sensitive.
• Em nosso diagrama, perceba que existe o nó: <position>left</position> que determina a criação de uma posição de módulo de nome left. Esta posição estará disponível no backend do Joomla!, quando este template estiver sendo utilizado como padrão, ou associado.

7 - O banco de dados

Ainda no diagrama em tamanho ampliado vamos acompanhar a linha de raciocínio do marcador

• Sim, o Joomla! utiliza banco de dados. Você deve estar pensando: "pirou...", lógico que o Joomla! utiliza banco de dados. Bem, eu também penso ser óbvio, porém, fui surpreendido várias vezes com a seguinte indagação: O Joomla! usa banco de dados?
• Atualmente o Joomla! utiliza o Mysql que longe de ser unanimidade, querendo ou não, é o mais utilizado na web e .
• Para entender o relacionamento entre o template e o Joomla!, precisamos primeiro ter em mente que o Joomla! não é nada sem o banco de dados e para cada projeto, geralmente, temos um banco de dados.
• Precisamos compreender também, que no Joomla! não existe o conceito de páginas, aliás, penso que em nenhum CMS exista este conceito já que o conteúdo do website estará gravado no banco de dados e será apresentado quando solicitado, seja por um hiperlink, seja como artigo de página inicial. Olha o termo página de novo na área...
• O que você visualiza no seu website, nada mais é do que os módulos publicados no banco de dados + as imagens de fundo do template + a(s) matéria(s) publicada(s) para aparecer na página inicial. Entendeu? Vou tentar melhorar...
• No diagrama observe o marcador com o número 3, ele representa o banco de dados e a tabela #__modules que irá "cuidar" de todos os módulos do seu website em Joomla!
• Perceba também que existem vários campos na tabela. Vamos manter o foco nos campos: title, position e left. Ou seja: "Temos um módulo cujo título (nome) é Main menu e este módulo está na posição left".
• Para que este módulo seja visível no frontend do seu website será necessário que o template possua uma chamada ao módulo dentro do arquivo index.php e que ele, módulo,  esteja publicado no banco de dados.
• Para publicar ou despublicar um módulo, basta clicar nos ícones existentes no backend do Joomla! Despublicado ele assume o valor 0 no banco de dados e publicado ele assume o valor 1 no banco.
• Para trocar a posição do módulo, basta clicar sobre o nome dele e entrar no painel de edição. Todas as posições do template padrão e dos associados (se for o caso), estarão disponíveis.

8 - O arquivo index.php

Siga agora a linha de raciocínio do marcador

• O arquivo index.php é o arquivo principal do template pois é ele que vai entregar ao "browser" (navegador), o código devidamente implementado para ser renderizado e mostrado na tela do nosso computador.
• A primeira e mais importante linha do template, é a que contém a diretiva defined('_JEXEC') or die('Restricted access');
• Esta diretiva impede o "injection" através de navegação por uma backdoor. Ex: " O cracker, lembre-se que o hacker é o cara do bem, visualiza o código fonte do seu website e verifica que o nome do template é jb. O que ele faz? Digita no navegador: http://www.seudominio.com.br/templates/jb/" e consegue navegar dentro do seu website sem que você saiba e sem estar autorizado. O template jb só pode ser executado, se for o template padrão e  quando for digitado http://www.seudominio.com.br. " Caso contrário, o Joomla! deverá enviar a mensagem de alerta "acesso restrito."
• Seguindo a linha de raciocínio de nosso diagrama, perceba que dentro do arquivo index.php, existe em algum momento, a instrução <div id="left"> que significa que estamos abrindo um espaço no arquivo index.php, com o nome de left.
• O estilo gráfico deste espaço, ou seja: a cor do texto, a fonte, se vai ou não ter uma imagem de fundo, borda e etc... foi programado no arquivo template.css dentro do seletor left.
• a instrução </div> é a tag de fechamento do xhtml.  Ex: <div></div> <p></p> e etc...
• Agora a mágica, dentro da tag <div id="left"> temos a chamada à classe do Joomla! que irá incluir o módulo que está publicado na tabela #__modules, na posição left do banco de dados, neste exato local do arquivo index.php
• <jdoc: include type="modules" name="left">
• Na maioria dos templates, primeiro é verificado se o módulo está publicado. Caso positivo ele será apresentado e o espaço ocupado. Caso negativo, o espaço é "poupado" e desta forma temos os templates líquidos que irão adaptar-se à resolução do monitor.
• Obviamente, para que o template seja líquido ele deve ser tableless e sua folha de estilos deve usar % ao invés de pixels nos valores de fontes, comprimentos (width)  e larguras (height) de de DIVS.
• O ciclo está fechado e o módulo irá ser visualizado no template através do navegador.

9 - O ciclo

1. Temos uma folha de estilos chamada de template.css que define padrões gráficos para uma DIV com o nome de left
2. Temos no arquivo TemplateDetails.xml a criação da posição left através do nó <position>left</position>
3. Na tabela #_modules existe um módulo publicado na posição left
4. No arquivo index.php existe o espaço chamado left, observado em <div id="left"> que irá herdar toda a estilização da DIV left existente no template.css
5. No arquivo index.php temos a chamada  a todos os módulos do Joomla! que estejam publicados e ocupem a posição left, através da instrução <jdoc: include type="modules" name="left">
6. No backend do Joomla! através do menu superior Extensios -> Administrar Módulos -> clicamos no nome do módulo, entramos no modo de edição e escolhemos a posição left
7. O resultado final? A visualização do módulo no template devidamente estilizado.

Desta forma encerro este primeiro artigo de uma série, do curso de criação de templates. Na sequência, teremos várias vídeos-aulas que estarão publicadas aqui no portal JB,  no canal Joomla sem mistérios do youtube, e no ambiente do curso de joomla online e gratuito.

Até o próximo artigo e sucesso!!!