60 :: Webdesign

Nesta ltima parte de nosso tutorial, voc ir apren-

der como mudar a cara do seu site em Joomla!. Saber
como criar templates e personalizar ainda mais seu site.
Nas edies anteriores, dentre outras abordagens, expli-
camos como instalar o Joomla!, como usar componentes
free e at como desenvolver o prprio componente.
Agora, falaremos sobre como voc poder alterar o de-
sign que deseja para seu site.
Na primeira parte, voc viu que possvel baixar ou
comprar templates para seu Joomla!. Falamos, tambm,
sobre como voc pode instalar novos templates e mudar
o visual padro de seu site facilmente. Mas como todo
webdesigner, voc deve ter se perguntado por que no
fazer o prprio template do seu site. Antes de qualquer
coisa, voc precisa saber o que Mdulo e Template.
Explicando Mdulo
Mdulo um bloco de cdigo usado para exter-
nar contedo, como, por exemplo, de componentes j
existentes no Joomla! (listagem de ltimas notcias etc.),
de um RSS de outros sites (previso do tempo, RSS de
notcias etc.) ou do prprio administrador do Joomla!
(imagens, pequenos textos etc.). Os mdulos podem
ser aplicados em qualquer parte do template, de acordo
com as posies definidas na criao do template.
No administrador do Joomla, voc pode:
- visualizar todos os mdulos do seu site;
- escolher se o mdulo estar publicado ou no;
- escolher em que rea do site ele vai aparecer, e at;
- escolher em que posio na pgina inicial ele vai estar.
Verifique que, na listagem dos mdulos, existe uma
coluna chamada Position. essa opo que diz em qual
posio o mdulo aparecer no site. Voc pode visualizar
todas as posies disponveis no template acessando:
site > preview > inline with positions.
Joomla!, mos obra! - Parte 4/4
Por Bruno Viana (webdeveloper e pesquisador), Diego Maia (webdesigner),
Julio Pontes (webdeveloper) e W.Gabriel de Oliveira (gerente de marketing,
pesquisador webwriter) da Agncia NOIX (www.noix.com.br). Contato:
joomla@noix.com.br.
Como criar um mdulo simples
Na rea administrativa do Joomla!, v tela de lista-
gem dos mdulos e clique em Novo. Feito isso, d um
DICA: h tambm outra forma de visualizar essas po-
sies. Basta acessar o endereo do seu site e acrescen-
tar: /?tp=1. Exemplo: http://www.seusite.com.br/?tp=1
O Joomla! padro j traz os nomes das posies
definidos, como TOP, RIGHT, USER1 etc. Contudo,
possvel alter-los e tambm acrescentar novas posi-
es. Basta acessar:
site > template manager > modules positions.
Clicando no nome do mdulo, voc entrar na sua
pgina de edio. Nela, voc poder alterar nome, par-
metros, posio, disposio que o mdulo ter no site e
sufixos de classe.
Na coluna da Page/Itens esto todas as reas do
site, organizadas por menu. Nela voc poder escolher
em que pginas seu mdulo ir aparecer.
tutorial :: 61
nome (coloquemos Foto, por exemplo), escolha a posi-
o em que esse mdulo aparecer (nesse caso, escolha
position left) e a opo All na coluna Pages/Items.
Depois de configurar seu mdulo, voc j pode
incluir algum tipo de contedo. Desa a barra de rolagem
at o final da pgina e insira uma imagem na parte de
Content do mdulo.
Assim, veja que seu mdulo Foto aparecer em
todas as pginas do site.
Como criar um mdulo complexo
Vamos agora criar um mdulo complexo, que puxe o
ltimo evento do nosso componente de eventos feito na
matria Joomla!, mos obra! Parte 2/4 e Parte 3/4.
1) mod_eventos.php
Esse arquivo responsvel pela parte lgica e traz o
resultado com forma de lista.
2) mod_eventos.xml
Necessrio para a instalao.
Finalizado o cdigo, faa a compactao do seu
mdulo em formato .zip e instale-o em seu Joomla!. Para
instalar, clique: Installers > Modules. Configure da mesma
forma como fez com o mdulo Foto, criado anterior-
mente, com a position left e a opo All na coluna
Pages/Items.
Agora que entendemos mais sobre mdulos, fica fcil
explicar como transformar seu design em um template
Joomla!.
Transformando design em template Joomla!
Qualquer design criado pode ser transformado em
template. Para preparar um template, voc precisa antes
ter fatiado seu design (transformado em CSS/XHTML)
para aplicar no Joomla!. Para comear, devemos criar uma
pasta com o nome do template. Usemos, como exemplo,
o nome meutemplate. Dentro da pastas, iremos colocar
os seguintes arquivos:
3) index.html
Utilizado por questes de segurana, para que usurios
externos no acessem facilmente pastas internas. Dentro
do arquivo index.html, coloque o seguinte cdigo:
<html><body bgcolor=#FFFFFF></body></html>
4) index.php
Ser o cdigo desenvolvido na fase de corte (recomen-
damos que seja em tableless) do layout adaptado ao Joomla!.
5) templateDetails.xml
Conter todas as especificaes do template, como a
listagem dos arquivos, dados do autor etc.
6) template_thumbnail.png
Miniatura do nosso design para visualizao rpida. A
miniatura aparecer no administrador do Joomla!.
Observao: ainda dentro da pasta meutemplate,
tambm existiro pastas com as imagens e o CSS.
Finalizada a estrutura, vamos implementao do design.
Implementando o template Joomla!
Copie todo o cdigo HTML do layout fatiado e cole
dentro do arquivo index.php. O que faremos simples-
mente substituir o contedo do cdigo por mdulos.
Primeiramente, vamos chamar dentro do <head> uma
funo do Joomla!, que contm todos os parmetros do
site, como o ttulo, o description e as key-words.
<?php mosShowHead(); ?>
Mude o endereo do CSS para templates/meutem-
plat/css/folhaestilo.css
Para definir as posies em que os mdulos sero
carregados usaremos a funo mosLoadModules(). Eis a
chamada da funo:

<?php mosLoadModules(header); ?>
A funo mosLoadModules pode receber at dois
parmetros:
1. O nome da posio que carregar os mdulos
(obrigatrio).
2. Um nmero representando o estilo que os mdu-
los sero carregados. So eles:
0 (zero) - a opo padro do Joomla!. Se esse pa-
rmetro no for passado, o valor 0 ser assumido. Ele
imprime o contedo dos mdulos em tabelas.
-1 (menos um) - Imprime o mdulo como ele origi-
nalmente, sem a adio de nenhuma tag.
-2 (menos dois) - O parmetro -2 traz o mdulo em
volta de DIVs e com o nome do mdulo dentro de H3.
Por padro, o Joomla! j traz essa DIV com uma classe
chamada de moduletable. Voc deve preparar no seu CSS
uma formatao bsica para essa DIV. Entretanto, poss-
vel alterar o nome da classe de qualquer mdulo chama-
do. Isso possvel com o sufixo de classe. O nome que
voc incluir no campo sufixo de classe ser adicionado
classe moduletable.
Exemplo: se voc colocar como sufixo box1, no
momento em que o Joomla! imprimir o mdulo, ele estar
com uma classe chamada moduletablebox1. Assim, voc
pode preparar uma formatao diferente para cada m-
dulo criado.
-3 (menos trs) - Retorna o mdulo dentro de 4 DIVs
aninhadas. til para se fazer cantos arredondados.
DICA: Voc pode aprender mais sobre a estrutura
dos mdulos no arquivo Includes/frontend.html.php.
Considerando que a coluna da esquerda o menu e a
da direita o contedo, vamos trocar toda a coluna da es-
querda pela chamada do mdulo left de parmetro -2
A funo mosCountModules(), indica se h algum
mdulo na posio informada. No nosso exemplo, usa-
mos a posio left. Como queremos que a DIV co-
luna_1 s aparea caso haja algum mdulo na posio
left, fazemos antes a seguinte verificao:
<?php if(mosCountModules(left)) : ?>

<div class=coluna_1>
<?php mosLoadModules(left, -2 ); ?>
<br clear=all />
</div>

<?php endif; ?>
Caso no exista contedo, a coluna no ficar ocu-
pando espao no template. A funo mosMainBody()
carrega todo o contedo vindo do Joomla! (telas inter-
nas, itens de contedo etc.). Portanto, iremos cham-la
dentro da DIV contedo.
<div class=conteudo>
<?php mosMainbody(); ?>
</div>
Ok. Agora voc j pode substituir todas as reas
importantes do site (DIVs, textos, rodap, menus,
imagens etc.) por chamadas de mdulos. Dessa forma,
voc desenvolver o cdigo de seu template ideal para
inserir no Joomla!.
Acabamos aqui a srie de tutoriais que explicou
para voc um dos CMS que mais cresce no mundo. Em
quatro edies, explicamos como instalar o Joomla!,
algumas de suas principais caractersticas e vantagens,
como desenvolver componentes, mdulos e, por fim,
templates personalizados.
Para facilitar a vida de nossos leitores, vamos
disponibilizar todos os cdigos citados nas quatro
edies desse tutorial em nosso site. Acesse www.
noix.com.br/webdesign e faa o download dos cdigos
comentados. Agora com voc: mos obra!
62 :: Webdesign