gototopgototop

O que é um template Joomla?

Escrito por  @cout45
Avalie este item
(2 votos)

diagrama 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.

css este símbolo identifica a folha de estilos
xml este símbolo identifica nosso arquivo xml
bd este símbolo identifica o nosso banco de dados e o backend do Joomla!
php 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

  • raiz do template - 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 marcadorcss

  • 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 marcadorxml

  • 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.erro xml
  • 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 bd

  • 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 marcadorbd 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 íconesicones 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 template 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!!!

Ler 9695 vezes Última modificação em Qui, 30 Setembro 2010 14:04
divulgue o artigo no orkut

Your are currently browsing this site with Internet Explorer 6 (IE6).

Your current web browser must be updated to version 7 of Internet Explorer (IE7) to take advantage of all of template's capabilities.

Why should I upgrade to Internet Explorer 7? Microsoft has redesigned Internet Explorer from the ground up, with better security, new capabilities, and a whole new interface. Many changes resulted from the feedback of millions of users who tested prerelease versions of the new browser. The most compelling reason to upgrade is the improved security. The Internet of today is not the Internet of five years ago. There are dangers that simply didn't exist back in 2001, when Internet Explorer 6 was released to the world. Internet Explorer 7 makes surfing the web fundamentally safer by offering greater protection against viruses, spyware, and other online risks.

Get free downloads for Internet Explorer 7, including recommended updates as they become available. To download Internet Explorer 7 in the language of your choice, please visit the Internet Explorer 7 worldwide page.