58 :: tutorial

Joomla!, mos obra! - Parte 1/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.

Convidamos voc a mergulhar em um dos programas de gerenciamento de contedo web que mais crescem no mundo: o Joomla!. Esta conversa, dividida em quatro partes, concentrar informaes tcnicas e um pouco de epistemologia sobre o sistema. Trabalharemos, como na web, com linguagem rpida e utilizando hipertextos, aproveitando o conhecimento coletivo que a grande comunidade Joomla! j edificou. Seja bem-vindo e mos obra. O que Joomla!? Joomla! (pronuncia-se djumla) um CMS (Content Management System) desenvolvido a partir do Mambo. escrito em PHP e roda no servidor web Apache ou IIS e banco de dados MySQL. - Fonte: Wikipdia (pt.wikipedia.org/wiki/Joomla) Quais as vantagens? - um software livre, aberto e gratuito (GNU/GPL); - Pode ser totalmente modificado por profissionais que desejam adapt-lo a outras realidades de uso; - Possui comunidade com mais de 130 mil registrados (www.joomla.org) e mais de um milho de posts; - Tem fcil instalao, oferecendo-lhe imediatamente um site operacional e com toda a infra-estrutura necessria para crescer (para os iniciantes, rapidamente um site no ar; para avanados, a possibilidade de plugar novos componentes - extensions.joomla.org - ou desenvolver os prprios); - exvel, permitindo utilizar recursos Web 2.0 (acessibilidade, validaes W3C, tecnologia AJAX, dentre outros). Como instalar? Deixemos esta misso com o pessoal do JoomlaMinas, que elaborou um excelente passo a passo - www.joomlaminas. org/joomla/tutoriais/instalando-o-joomla.html. L esto os pr-requisitos, downloads, preparao do ambiente e a instalao detalhada.

Entendendo o Joomla! Instalado o CMS, vamos compreender as suas divises. importante, primeiramente, informar que a sua administrao dividida em Front-end e Back-end: - Front-end: fachada do site, atravs do qual possvel administrar contedo, sem necessitar entrar na rea administrativa; - Back-end: rea administrativa, onde possvel gerenciar no s contedo, mas tambm acesso de usurios, menus, sees e categorias do site, arquivos de notcias e at extenses do Joomla!, podendo instalar mdulos e componentes novos. >> Usurios O Joomla! possui diviso por status de usurios, dependendo do Grupo em que so cadastrados. Os usurios podem ter livre acesso a todas as reas do CMS ou somente a contedos exclusivos, com possibilidade de inserir, editar e/ou publicar contedo. possvel tambm escolher se o usurio ter acesso apenas ao Front-end, com poder limitado, ou ao Back-end, tendo mais possibilidades. >>>> Grupos de acesso ao Front-end - Registered: usurios comuns, com poder de visualizao a contedos especficos definidos para ele. No pode criar, editar ou excluir qualquer contedo; - Autor: pode criar, editar e excluir somente o prprio contedo; - Editor: pode criar, editar e excluir qualquer contedo; - Publisher: pode criar, editar e excluir o prprio contedo e editar e publicar o contedo criado pelos editores e autores. >>>> Grupos de acesso ao Back-end - Manager: pode gerenciar sees e categorias, assim como o contedo gerado por autores, editores e publishers; - Administrator: possui todos os acessos e privilgios de gerenciamento;

60 :: tutorial

- Super Administrator: est acima do Administrador, podendo exclu-lo. >>Sees e Categorias O Joomla! dividido em Sees (sections) e Categorias (categories). Voc pode criar uma Seo e, dentro dela, possuir vrias Categorias. Tambm pode criar Contedos (contents), que so os materiais textuais e de imagens do site. Os Contedos (contents) podem ser estticos ou dinmicos, permitindo que se crie desde uma pgina com um contedo institucional fixo at uma rea no site que lista notcias de uma determinada Seo. Abaixo, um exemplo de como seria esta diviso em um portal feito com Joomla!:

Itens de Contedo Esttico (para os itens estticos).

4. Voc ver a listagem de todos os itens de contedo cadastrados. Clique em NOVO para adicionar um item.

5. Para cadastrar, obrigatrio o preenchimento mnimo Seo: Diverso e Arte Categoria: Livros Item de contedo: Ariano Suassuna fala sobre Patrimnio Artstico-Cultural Categoria: Msica Item de contedo: Banda gua de Quartinha se apresenta na capital cearense Item de Contedo Esttico: A empresa (informaes institucionais) Seguindo essa estrutura e inserindo os contedos, possvel definir quais contedos apareceram no menu, criar listagens de contedos e at dizer quais deles apareceram na pgina inicial. 6. Clique em SALVAR na barra de botes superior para Como criar item de contedo? Este o bsico a ser feito dentro do Joomla!. Criaremos um item de contedo dinmico. possvel, para isso, usar o front-end ou o back-end. Utilizaremos aqui o back-end. 1. Para acessar o back-end, digite o endereo no qual o Joomla! est instalado /administrator. Exemplo: http://localhost/joomla/administrator. 2. Digite o login admin e a senha escolhida no ato da instalao. 8. Veja que seu item est OK para PUBLICADO, mas no 3. Clique no cone Administrar Itens de Contedo (para gerenciar itens de contedo dinmicos) ou Administrar est OK para aparecer na PGINA INICIAL do site. Para mudar, clique sobre o X vermelho. 7. Voc ver uma mensagem confirmando a criao do novo item Minha primeira notcia. finalizar o cadastro. de: Ttulo, Texto de Introduo, Seo e Categoria. Aps digitar Ttulo e Texto de introduo, escolha a Seo Notcias e a Categoria ltimas notcias. O texto principal opcional, sem limite de caracteres.

tutorial :: 61

9. Veja como ficou seu item Minha primeira notcia na pgina inicial do site.

Como trocar template 1. Acesse o back-end e selecione o menu Site > Administrar Templates > Templates do site.

2. A prxima tela exibir uma listagem dos templates j instalados por padro no Joomla!.
Observao: H dois templates, madeyourweb e rhuk_solarare_ii, j cadastrados por padro, com um deles publicado.

62 :: tutorial

3. Selecione o template madeyourweb e clique no boto Padro na barra de ferramentas superior.

4. Sua escolha aparecer OK. Acesse o endereo de seu site e veja o resultado.

4. Preencha os campos solicitados. Como criaremos um menu principal, no precisa mudar o Nvel do Item, pois no ser submenu.

5. Clique em salvar para publicar e finalizar a criao. Como criar item de menu Confira, na prxima edio, o desenrolar dessa con1. Para criar menus no Joomla!, acesse Menus > Administrator Menus > mainmenu e veja a listagem dos itens do menu j criados. versa. Falaremos um pouco sobre componentes do Joomla!, abordando suas possibilidades e criando um junto com voc. Explicaremos algumas metodologias de desenvolvimento, formas de aplicao e exemplos de customizao. At a prxima!

2. Vamos criar um link para o site da Revista Webdesign. Clique em NOVO.

3. Aparecer a listagem com os tipos de menu. Selecione LINK - URL e clique em Prximo.

58 :: Webdesign

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.

Joomla!, mos obra! - Parte 2/4

Continuando nossa conversa sobre o Joomla!, trouxemos para esta edio algumas palavras sobre Componentes. Explicaremos o que um Componente Joomla! e como voc mesmo poder desenvolv-lo. Voc ver como incrementar seu Joomla! com aplicativos especficos para o que precisa, fugindo do sistema limpo e seco da primeira instalao. Isto porque o CMS possibilita a integrao de vrios Componentes sua estrutura. Tais componentes podem ser tambm padres (que vm no ato da instalao) ou desenvolvidos por terceiros e de instalao grtis ou no. Temos como componentes padres: - Banners: administrador simples de banners. Com ele, possvel inserir, por exemplo, banners de patrocnio com possibilidade de um melhor controle de cliques e nmero de exibies; - Enquetes (Polls): junto com seu mdulo, cria rapidamente uma enquete no site; - Contedo (Content): considerado o mais importante Componente do Joomla!, porque visto como o corao deste CMS. Com ele, possvel criar o contedo do site e gerenci-lo. Tambm possibilita a diviso do contedo do site por sees e categorias, facilitando a publicao de contedo. Para aqueles, porm, que desejam mais opes a seu site sem precisar comprar uma soluo de outros desenvolvedores, existem Componentes Joomla! distribudos de maneira free na internet. Voc pode encontrar estes componentes, organizados por categoria, no endereo http://extensions. joomla.org/. Caso deseje ver a lista de componentes j instalados no seu CMS, voc pode acessar o menu Componentes, na barra de ferramentas do seu Joomla!. Lembrando que Componentes so facilmente instalados e desinstalados. Eles vm em formato .zip, com todos os arquivos de Back-end, Front-end e XML compactados, prontos para voc fazer upload para o Joomla! e comear a us-los. JACLPLUS Componente que lhe permite cadastrar novos grupos de usurio na rea administrativa do Joomla!. Observe a listagem padro de grupos de usurios do CMS. Voc ainda tem a possibilidade de editar um grupo. Veja no exemplo do grupo Manager, a seguir, esta edio. Na edio, possvel ver todas as permisses de acesso que este grupo tem, como: - Adicionar contedo - Editar contedo - Publicar contedo - Editar itens listados na pagina inicial (com_frontpage) - Permisso para acesso ao Media Manager - Permisso negada para editar mdulos - Permisso para logar na rea administrativa do site. RS GALLERY2 Componente gerenciador de galeria de imagens. Por meio dele, voc pode facilmente criar em seu Joomla! sua galeria de imagens personalizada. Uma das grandes vantagens deste gerenciador de galeria de imagens a possibilidade de upload em lote de imagens. Ou seja, muitas imagens juntas, compactadas em formato .zip, podem ser enviadas de uma s vez para o gerenciador, que vai descompact-las sem problemas, fazendo unzip automaticamente. DOCMAN Componente gerenciador de documentos, atravs do qual o desenvolvedor pode categorizar arquivos e disponibiliz-los para download no site. Alguns dos maiores diferenciais do DOCMAN so a possibilidade de upload de arquivos em lote, a facilidade na modificao do layout do Componente com os temas que ele traz, a opo de hospedar todos os arquivos no servidor local ou externamente e a realizao de acompanhamento do Componente atravs de estatsticas, com um contador de downloads e logs. Mais informaes sobre o DOCMAN podem ser adquiridas no site http://joomlacode. org/gf/project/docman/news/.

tecnologia na web :: 59

Observao: este componente um HACK para Joomla!, ou seja, um componente que altera o cdigo do Joomla! original. Por isso, muita cautela e ateno no momento de instal-lo. Criando um componente Agora, explicaremos como criar seu componente, com todos os arquivos Back-end, Front-end e XML compactados em formato .zip para serem instalados no Joomla!. Vamos desenvolver um Componente de Eventos. Com ele, voc poder cadastrar eventos em seu site, informando nome, data do acontecimento e o local. Tudo a partir de um mdulo na pgina principal, que mostrar em uma pequena listagem dos eventos por ms. Para entender a estrutura, importante saber que o Componente Joomla! se divide em duas partes: Back-end e Front-end. Back-end a parte administrativa do Componente, que ficar dentro do Joomla!! com acesso restrito por login e senha. J Front-end a parte mostrada na interface do site, que todos podem ver. Fazer um componente como se fosse uma receita de bolo: no complicado, basta seguir o passo a passo. Voc pode encontrar outros passo a passo iniciais muito bons com o pessoal joomla.com. br (http://www.joomla.com.br/artigos-e-tutoriais/tutoriais/programando-componentes-para-joomla-parte-1.html). Para comear o desenvolvimento do Back-end de seu Componente de Eventos, voc dever criar os seguintes arquivos: admin. eventos.php, admin.eventos.html.php, eventos.class.php, toolbar. eventos.php, toolbar.eventos.html.php, eventos.xml, install.eventos. php e uninstall.eventos.php. Agora que conhece quais arquivos precisa criar para o Back-end, veja como faz-los: 1) admin.eventos.php Far parte do controle das atividades do componente. Quando acessamos: http://www.seusite.com.br/index.php?option=com_eventos, enviamos pela URL alguns parmetros para o Joomla!, que neste caso o option. O parmetro option informa qual componente estamos acessando, podendo assim visualizar o seu contedo de acordo com o acesso permitido para o seu usurio. A princpio, vamos trabalhar com a administrao do site, portanto o endereo acessado vai ser: http://www.seusite.com.br/administrator/index. php?option=com_eventos. Informando o parmetro option com o valor com_eventos, estamos dizendo ao Joomla! que ele deve acessar o componente de eventos e por estarmos na parte administrativa do site o arquivo

60 :: Webdesign

que o Joomla! acessar vai ser o admin.eventos.php. Ele ser o responsvel por receptar as tarefas (tasks) que o usurio est tentando realizar (atravs do endereo) e realizar um determinado procedimento de acordo com a tarefa escolhida. Com este cdigo temos a possibilidade de realizar as seguintes tarefas: Criar eventos (new), editar (Edit), salvar eventos novos ou existentes (save), excluir (remove) ou listar eventos(list). Se o endereo acessado for: http://www.seusite.com.br/administrator/index.php?option=com_ eventos&task=new, estamos dizendo que o valor do parmetro task (ou seja a tarefa que queremos realizar) new. Informando assim, ao Joomla!, que queremos criar um novo evento. Se o valor de task fosse save, por exemplo, o Joomla! chamaria a tarefa save dentro do arquivo admin.eventos.php, que por sua vez chamaria a funo saveEvento(), que realizaria todos os procedimentos necessrios para salvar o evento. 2) admin.eventos.html.php Layout do componente. Este arquivo contm todos os HTMLs usados. Quando uma tarefa chamada no Joomla!, ela executa uma funo que por sua vez deve chamar uma classe HTML e seu respectivo mtodo para exibir o HTML. 3)eventos.class.php Ligar o componente ao banco de dados. Este arquivo contm uma classe que vai tratar da parte do banco de dados.

5) toolbar.eventos.html.php Dar a listagem dos menus.

6) eventos.xml Possibilita a instalao do componente, pois faz um mapeamento de todos os arquivos que compem o componente criado, como imagens, SQLs, PHPs etc.; 7) install.eventos.php Este arquivo lhe permite colocar uma mensagem final aps a instalao. Voc pode, por exemplo, colocar uma instruo de como utilizar o componente ou os crditos do desenvolvedor.

8) uninstall.eventos.php Para a remoo do componente.

4) toolbar.eventos.php Far parte do controle dos menus do componente. Ok, os arquivos Back-end de seu Componente de Eventos esto criados. Veja na prxima edio como criar os arquivos de Front-end e de XML, para depois apenas compact-los em formato .zip e instal-los em seu Joomla! At a prxima.

62 :: Webdesign

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.

Joomla!, mos obra! - Parte 3/4

Antes de tudo, queremos agradecer a todos que nos enviaram e-mails parabenizando pelo trabalho, dando dicas e solicitando mais informaes sobre o Joomla!. Dando continuidade ao nosso papo, vamos prosseguir no desenvolvimento do Componente que iniciamos na edio passada. Lembrando que estamos desenvolvendo um Componente de Eventos, atravs do qual voc poder cadastrar, dar nomes, indicar datas e locais, enfim, divulgar seu evento no site. Comeamos na edio passada pela parte de Back-end do Componente. Nesta edio, vamos finalizar este desenvolvimento, construindo a parte de Front-end e o XML de instalao. Mos obra! A parte de Front-end que iremos desenvolver ser a forma de visualizao, j no site, das informaes cadastradas no Back-end. Ela no obrigatria, pois h casos em que voc pode dispens-la, como, por exemplo: - Quando voc opta por no ter visualizao, no site, das informaes do Back-end do Componente; - Quando voc tem as informaes do Back-end do Componente visualizadas atravs de mdulos do Joomla!, e no de arquivos de Front-end do Componente. Neste tutorial, iremos desenvolver um Front-end que mostre uma listagem de eventos por data, da mais recente para a menos recente. ATENO: lembre-se de que os arquivos do Frontend do Componente esto localizados na pasta components/ do diretrio raiz do seu Joomla!. Portanto, aps a instalao ser criada, dentro dessa mesma pasta, uma pasta chamada com_eventos/ Junto dos arquivos de Back-end j criados, voc precisar agora criar os arquivos de Front-end e de XML acompanhando a seguinte estrutura: 1) eventos.php Arquivo responsvel por todas as aes que o Componente realizar. Funciona como o arquivo admin.eventos. php do Back-end. 3) eventos.xml Arquivo que organiza os outros arquivos criados (de Front-end e de Back-end) para que o Joomla! possa interpretar e instalar o Componente. 2) eventos.html.php Arquivo responsvel por toda a estrutura de visualizao HTML do Componente.

tutorial :: 63

Com os arquivos de Back-end (admin.eventos.php ; admin. eventos.html.php ; eventos.class.php ; toolbar.eventos.php ; toolbar.eventos.html.php ; eventos.xml ; install.eventos.php ; uninstall. eventos.php), de Front-end (eventos.php ; eventos.html.php) e de XML (eventos.xml) criados, agora voc precisar compact-los em um arquivo .zip (ex: com_eventos.zip). Atravs do arquivo com_eventos. zip, seu Componente poder ser instalado no Joomla!. Para instalar, siga o passo a passo: i. laes; ii. Selecione a opo Componente; iii. Localize o arquivo com_eventos.zip e instale-o; iv. Confira na listagem de componentes a existncia do seu Componente de Eventos instalado. Veja o exemplo: Acesse a rea administrativa do Joomla! e v ao menu Insta-

v.

Crie um item de menu para seu Componente (veja na

matria Joomla!, mos obra! Parte 1/4, de novembro/2007, em Como criar item de menu. Ao invs de clicar em LINK - URL, deve-se clicar em Componente) e voil: voc j pode comear a us-lo.

64 :: Webdesign

Veja como seu Componente ficar:

Veja o resultado visual:

Perceba como seu Joomla! pode ganhar novas Caso deseje incrementar seu Componente (como, por exemplo, com uma pequena seta ao lado da listagem de cada evento citado), voc poder adicionar arquivos ao pacote .zip e alterar o cdigo dos arquivos j existentes. Veja como ficaria esse exemplo da seta: - Incrementando o cdigo do arquivo eventos.html.php funcionalidades e ficar cada vez mais profissional. Com a criao de Componentes, o limite de recursos de seu Joomla! s depende de voc. Alm disso, voc tambm pode criar os prprios layouts do site, aplicando perfeitamente estrutura do Joomla! que voc desenvolveu. Como possvel? Veja na prxima edio dicas importantes sobre como criar os prprios templates de seu Joomla!. At l.

- Incrementando o cdigo do arquivo eventos.xml

- Criar a pasta images/ no diretrio de trabalho que deve ser zipado novamente, inserindo o arquivo seta.gif e recriando o arquivo com_eventos.zip - Se j havia instalado o Componente bsico, desinstale-o. Dentro da mesma rea de instalao, voc seleciona o Componente anterior e clica em Uninstall

Ao nal do evento, acontece a aguardada premiao do concurso Peixe Grande, que premia as melhores agncias e prossionais de webdesign.

- Instale o novo Componente com_eventos

60 :: Webdesign

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.

Joomla!, mos obra! - Parte 4/4

Nesta ltima parte de nosso tutorial, voc ir aprender 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, explicamos como instalar o Joomla!, como usar componentes free e at como desenvolver o prprio componente. Agora, falaremos sobre como voc poder alterar o design 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 externar 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. Clicando no nome do mdulo, voc entrar na sua pgina de edio. Nela, voc poder alterar nome, parmetros, 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. DICA: h tambm outra forma de visualizar essas posies. Basta acessar o endereo do seu site e acrescentar: /?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 posies. Basta acessar: site > template manager > modules positions.

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. Como criar um mdulo simples Na rea administrativa do Joomla!, v tela de listagem dos mdulos e clique em Novo. Feito isso, d um

tutorial :: 61

nome (coloquemos Foto, por exemplo), escolha a posio 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.

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 anteriormente, 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 Assim, veja que seu mdulo Foto aparecer em todas as pginas do site. 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) 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. <html><body bgcolor=#FFFFFF></body></html> 4) index.php 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:

Ser o cdigo desenvolvido na fase de corte (recomendamos que seja em tableless) do layout adaptado ao Joomla!. 5) 1) mod_eventos.php Esse arquivo responsvel pela parte lgica e traz o resultado com forma de lista. templateDetails.xml Conter todas as especificaes do template, como a listagem dos arquivos, dados do autor etc.

6) 2) mod_eventos.xml Necessrio para a instalao. Finalizado o cdigo, faa a compactao do seu

template_thumbnail.png

Miniatura do nosso design para visualizao rpida. A miniatura aparecer no administrador do Joomla!. Observao: ainda dentro da pasta meutemplate,

62 :: Webdesign

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 simplesmente 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/meutemplat/css/folhaestilo.css Para definir as posies em que os mdulos sero carregados usaremos a funo mosLoadModules(). Eis a chamada da funo:

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 esquerda pela chamada do mdulo left de parmetro -2 A funo mosCountModules(), indica se h algum mdulo na posio informada. No nosso exemplo, usamos a posio left. Como queremos que a DIV coluna_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; ?>

<?php mosLoadModules(header); ?> Caso no exista contedo, a coluna no ficar ocuA funo mosLoadModules pode receber at dois parmetros: 1. 2. O nome da posio que carregar os mdulos Um nmero representando o estilo que os mdu<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! (obrigatrio). los sero carregados. So eles: 0 (zero) - a opo padro do Joomla!. Se esse parmetro no for passado, o valor 0 ser assumido. Ele imprime o contedo dos mdulos em tabelas. -1 (menos um) - Imprime o mdulo como ele originalmente, 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, possvel alterar o nome da classe de qualquer mdulo chamado. 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 mdulo 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 pando espao no template. A funo mosMainBody() carrega todo o contedo vindo do Joomla! (telas internas, itens de contedo etc.). Portanto, iremos cham-la dentro da DIV contedo.