58 :: tutorial Joomla!, mãos à 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 Agência NOIX (www.noix.com. br). Contato: joomla@noix.com.br. Convidamos você a mergulhar em um dos programas de gerenciamento de conteúdo web que mais crescem no mundo: o Joomla!. Esta conversa, dividida em quatro partes, concentrará informações técnicas e um pouco de epistemologia sobre o sistema. Trabalharemos, como na web, com linguagem rápida e utilizando hipertextos, aproveitando o conhecimento coletivo que a grande comunidade Joomla! já edificou. Seja bem-vindo e mãos à 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: Wikipédia (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 milhão de posts; - Tem fácil instalação, oferecendo-lhe imediatamente um site operacional e com toda a infra-estrutura necessária para crescer (para os iniciantes, rapidamente um site no ar; para avançados, a possibilidade de plugar novos componentes - extensions.joomla.org - ou desenvolver os próprios); - É flexível, permitindo utilizar recursos Web 2.0 (acessibilidade, validações W3C, tecnologia AJAX, dentre outros). Como instalar? Deixemos esta missão com o pessoal do JoomlaMinas, que elaborou um excelente passo a passo - www.joomlaminas. org/joomla/tutoriais/instalando-o-joomla.html. Lá estão os pré-requisitos, downloads, preparação do ambiente e a instalação detalhada. Entendendo o Joomla! Instalado o CMS, vamos compreender as suas divisões. É importante, primeiramente, informar que a sua administração é dividida em Front-end e Back-end: - Front-end: fachada do site, através do qual é possível administrar conteúdo, sem necessitar entrar na área administrativa; - Back-end: área administrativa, onde é possível gerenciar não só conteúdo, mas também acesso de usuários, menus, seções e categorias do site, arquivos de notícias e até extensões do Joomla!, podendo instalar módulos e componentes novos. >> Usuários O Joomla! possui divisão por status de usuários, dependendo do Grupo em que são cadastrados. Os usuários podem ter livre acesso a todas as áreas do CMS ou somente a conteúdos exclusivos, com possibilidade de inserir, editar e/ou publicar conteúdo. É possível também escolher se o usuário terá acesso apenas ao Front-end, com poder limitado, ou ao Back-end, tendo mais possibilidades. >>>> Grupos de acesso ao Front-end - Registered: usuários comuns, com poder de visualização a conteúdos específicos definidos para ele. Não pode criar, editar ou excluir qualquer conteúdo; - Autor: pode criar, editar e excluir somente o próprio conteúdo; - Editor: pode criar, editar e excluir qualquer conteúdo; - Publisher: pode criar, editar e excluir o próprio conteúdo e editar e publicar o conteúdo criado pelos editores e autores. >>>> Grupos de acesso ao Back-end - Manager: pode gerenciar seções e categorias, assim como o conteúdo gerado por autores, editores e publishers; - Administrator: possui todos os acessos e privilégios de gerenciamento;
60 :: tutorial - Super Administrator: está acima do Administrador, podendo excluí-lo. Itens de Conteúdo Estático (para os itens estáticos). >>Seções e Categorias O Joomla! é dividido em Seções (sections) e Categorias (categories). Você pode criar uma Seção e, dentro dela, possuir várias Categorias. Também pode criar Conteúdos (contents), que são os materiais textuais e de imagens do site. Os Conteúdos (contents) podem ser estáticos ou dinâmicos, permitindo que se crie desde uma página com um conteúdo institucional fixo até uma área no site que lista notícias de uma determinada Seção. Abaixo, um exemplo de como seria esta divisão em um portal feito com Joomla!: Seção: Diversão e Arte Categoria: Livros Item de conteúdo: Ariano Suassuna fala sobre Patrimônio Artístico-Cultural Categoria: Música Item de conteúdo: Banda Água de Quartinha se apresenta na capital cearense Item de Conteúdo Estático: A empresa (informações institucionais) 4. Você verá a listagem de todos os itens de conteúdo cadastrados. Clique em NOVO para adicionar um item. 5. Para cadastrar, é obrigatório o preenchimento mínimo de: Título, Texto de Introdução, Seção e Categoria. Após digitar Título e Texto de introdução, escolha a Seção Notícias e a Categoria Últimas notícias. O texto principal é opcional, sem limite de caracteres. Seguindo essa estrutura e inserindo os conteúdos, é possível definir quais conteúdos apareceram no menu, criar listagens de conteúdos e até dizer quais deles apareceram na página inicial. Como criar item de conteúdo? Este é o básico a ser feito dentro do Joomla!. Criaremos um item de conteúdo dinâmico. É possível, para isso, usar o front-end ou o back-end. Utilizaremos aqui o back-end. 1. Para acessar o back-end, digite o endereço no qual o Joomla! está instalado /administrator. Exemplo: http://localhost/joomla/administrator. 6. Clique em SALVAR na barra de botões superior para finalizar o cadastro. 7. Você verá uma mensagem confirmando a criação do novo item Minha primeira notícia. 2. Digite o login admin e a senha escolhida no ato da instalação. 3. Clique no ícone Administrar Itens de Conteúdo (para gerenciar itens de conteúdo dinâmicos) ou Administrar 8. Veja que seu item está OK para PUBLICADO, mas não está OK para aparecer na PÁGINA INICIAL do site. Para mudar, clique sobre o X vermelho.
tutorial :: 61 9. Veja como ficou seu item Minha primeira notícia na página inicial do site. Como trocar template 1. Acesse o back-end e selecione o menu Site > Administrar Templates > Templates do site. 2. A próxima tela exibirá uma listagem dos templates já instalados por padrão no Joomla!. Observação: Há dois templates, madeyourweb e rhuk_solarflare_ii, já cadastrados por padrão, com um deles publicado.
62 :: tutorial 3. Selecione o template madeyourweb e clique no botão Padrão na barra de ferramentas superior. 4. Sua escolha aparecerá OK. Acesse o endereço de seu site e veja o resultado. 4. Preencha os campos solicitados. Como criaremos um menu principal, não precisa mudar o Nível do Item, pois não será submenu. Como criar item de menu 1. Para criar menus no Joomla!, acesse Menus > Administrator Menus > mainmenu e veja a listagem dos itens do menu já criados. 5. Clique em salvar para publicar e finalizar a criação. Confira, na próxima edição, o desenrolar dessa conversa. Falaremos um pouco sobre componentes do Joomla!, abordando suas possibilidades e criando um junto com você. Explicaremos algumas metodologias de desenvolvimento, formas de aplicação e exemplos de customização. Até a próxima! 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 Próximo.
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 Agência NOIX (www.noix.com.br). Contato: joomla@noix.com.br. Joomla!, mãos à obra! - Parte 2/4 Continuando nossa conversa sobre o Joomla!, trouxemos para esta edição 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 específicos para o que precisa, fugindo do sistema limpo e seco da primeira instalação. Isto porque o CMS possibilita a integração de vários Componentes à sua estrutura. Tais componentes podem ser também padrões (que vêm no ato da instalação) ou desenvolvidos por terceiros e de instalação grátis ou não. Temos como componentes padrões: - Banners: administrador simples de banners. Com ele, é possível inserir, por exemplo, banners de patrocínio com possibilidade de um melhor controle de cliques e número de exibições; - Enquetes (Polls): junto com seu módulo, cria rapidamente uma enquete no site; - Conteúdo (Content): considerado o mais importante Componente do Joomla!, porque é visto como o coração deste CMS. Com ele, é possível criar o conteúdo do site e gerenciá-lo. Também possibilita a divisão do conteúdo do site por seções e categorias, facilitando a publicação de conteúdo. Para aqueles, porém, que desejam mais opções a seu site sem precisar comprar uma solução de outros desenvolvedores, existem Componentes Joomla! distribuídos de maneira free na internet. Você pode encontrar estes componentes, organizados por categoria, no endereço 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 são facilmente instalados e desinstalados. Eles vêm em formato.zip, com todos os arquivos de Back-end, Front-end e XML compactados, prontos para você fazer upload para o Joomla! e começar a usá-los. DOCMAN Componente gerenciador de documentos, através do qual o desenvolvedor pode categorizar arquivos e disponibilizá-los para download no site. Alguns dos maiores diferenciais do DOCMAN são a possibilidade de upload de arquivos em lote, a facilidade na modificação do layout do Componente com os temas que ele traz, a opção de hospedar todos os arquivos no servidor local ou externamente e a realização de acompanhamento do Componente através de estatísticas, com um contador de downloads e logs. Mais informações sobre o DOC- MAN podem ser adquiridas no site http://joomlacode. org/gf/project/docman/news/. 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. JACLPLUS Componente que lhe permite cadastrar novos grupos de usuário na área administrativa do Joomla!. Observe a listagem padrão de grupos de usuários do CMS. Você ainda tem a possibilidade de editar um grupo. Veja no exemplo do grupo Manager, a seguir, esta edição. Na edição, é possível ver todas as permissões de acesso que este grupo tem, como: - Adicionar conteúdo - Editar conteúdo - Publicar conteúdo - Editar itens listados na pagina inicial (com_frontpage) - Permissão para acesso ao Media Manager - Permissão negada para editar módulos - Permissão para logar na área administrativa do site.
tecnologia na web :: 59 Observação: este componente é um HACK para Joomla!, ou seja, um componente que altera o código do Joomla! original. Por isso, muita cautela e atenção 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 módulo na página principal, que mostrará em uma pequena listagem dos eventos por mês. 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: não é 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 começar 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 parâmetros para o Joomla!, que neste caso é o option. O parâmetro option informa qual componente estamos acessando, podendo assim visualizar o seu conteúdo de acordo com o acesso permitido para o seu usuário. A princípio, vamos trabalhar com a administração do site, portanto o endereço acessado vai ser: http://www.seusite.com.br/administrator/index. php?option=com_eventos. Informando o parâmetro 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 responsável por receptar as tarefas (tasks) que o usuário está tentando realizar (através do endereço) e realizar um determinado procedimento de acordo com a tarefa escolhida. Com este código 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 endereço acessado for: http://www.seusite.com.br/administrator/index.php?option=com_ eventos&task=new, estamos dizendo que o valor do parâmetro 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 função saveevento(), que realizaria todos os procedimentos necessários para salvar o evento. 2) admin.eventos.html.php Layout do componente. Este arquivo contém todos os HTML s usados. Quando uma tarefa é chamada no Joomla!, ela executa uma função que por sua vez deve chamar uma classe HTML e seu respectivo método para exibir o HTML. 5) toolbar.eventos.html.php Dará a listagem dos menus. 6) eventos.xml Possibilita a instalação do componente, pois faz um mapeamento de todos os arquivos que compõem o componente criado, como imagens, SQL s, PHP s etc.; 7) install.eventos.php Este arquivo lhe permite colocar uma mensagem final após a instalação. Você pode, por exemplo, colocar uma instrução de como utilizar o componente ou os créditos do desenvolvedor. 3)eventos.class.php Ligará o componente ao banco de dados. Este arquivo contém uma classe que vai tratar da parte do banco de dados. 8) uninstall.eventos.php Para a remoção do componente. 4) toolbar.eventos.php Fará parte do controle dos menus do componente. Ok, os arquivos Back-end de seu Componente de Eventos estão criados. Veja na próxima edição 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 próxima.
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 Agência NOIX (www.noix.com.br). Contato: joomla@noix.com.br. Joomla!, mãos à obra! - Parte 3/4 Antes de tudo, queremos agradecer a todos que nos enviaram e-mails parabenizando pelo trabalho, dando dicas e solicitando mais informações sobre o Joomla!. Dando continuidade ao nosso papo, vamos prosseguir no desenvolvimento do Componente que iniciamos na edição passada. Lembrando que estamos desenvolvendo um Componente de Eventos, através do qual você poderá cadastrar, dar nomes, indicar datas e locais, enfim, divulgar seu evento no site. Começamos na edição passada pela parte de Back-end do Componente. Nesta edição, vamos finalizar este desenvolvimento, construindo a parte de Front-end e o XML de instalação. Mãos à obra! A parte de Front-end que iremos desenvolver será a forma de visualização, já no site, das informações cadastradas no Back-end. Ela não é obrigatória, pois há casos em que você pode dispensá-la, como, por exemplo: - Quando você opta por não ter visualização, no site, das informações do Back-end do Componente; - Quando você tem as informações do Back-end do Componente visualizadas através de módulos do Joomla!, e não 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. ATENÇÃO: lembre-se de que os arquivos do Frontend do Componente estão localizados na pasta components/ do diretório raiz do seu Joomla!. Portanto, após a instalação 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 responsável por todas as ações que o Componente realizará. Funciona como o arquivo admin.eventos. php do Back-end. 2) eventos.html.php Arquivo responsável por toda a estrutura de visualização HTML do Componente. 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.
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). Através do arquivo com_eventos. zip, seu Componente poderá ser instalado no Joomla!. Para instalar, siga o passo a passo: i. Acesse a área administrativa do Joomla! e vá ao menu Instalações; ii. Selecione a opção Componente; iii. Localize o arquivo com_eventos.zip e instale-o; iv. Confira na listagem de componentes a existência do seu Componente de Eventos instalado. Veja o exemplo: v. Crie um item de menu para seu Componente (veja na matéria Joomla!, mãos à obra! Parte 1/4, de novembro/2007, em Como criar item de menu. Ao invés de clicar em LINK - URL, deve-se clicar em Componente ) e voilà: você já pode começar a usá-lo.
64 :: Webdesign Veja como seu Componente ficará: Veja o resultado visual: 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 código dos arquivos já existentes. Veja como ficaria esse exemplo da seta: - Incrementando o código do arquivo eventos.html.php Perceba como seu Joomla! pode ganhar novas funcionalidades e ficar cada vez mais profissional. Com a criação de Componentes, o limite de recursos de seu Joomla! só depende de você. Além disso, você também pode criar os próprios layouts do site, aplicando perfeitamente à estrutura do Joomla! que você desenvolveu. Como é possível? Veja na próxima edição dicas importantes sobre como criar os próprios templates de seu Joomla!. Até lá. - Incrementando o código do arquivo eventos.xml - Criar a pasta images/ no diretório 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 básico, desinstale-o. Dentro da mesma área de instalação, você seleciona o Componente anterior e clica em Uninstall Ao final do evento, acontece a aguardada premiação do concurso Peixe Grande, que premia as melhores agências e profissionais 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 Agência NOIX (www.noix.com.br). Contato: joomla@noix.com.br. Joomla!, mãos à 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 edições anteriores, dentre outras abordagens, explicamos como instalar o Joomla!, como usar componentes free e até como desenvolver o próprio componente. Agora, falaremos sobre como você poderá alterar o design que deseja para seu site. Na primeira parte, você viu que é possível baixar ou comprar templates para seu Joomla!. Falamos, também, sobre como você pode instalar novos templates e mudar o visual padrão de seu site facilmente. Mas como todo webdesigner, você deve ter se perguntado por que não fazer o próprio template do seu site. Antes de qualquer coisa, você precisa saber o que é Módulo e Template. Explicando Módulo Módulo é um bloco de código usado para externar conteúdo, como, por exemplo, de componentes já existentes no Joomla! (listagem de últimas notícias etc.), de um RSS de outros sites (previsão do tempo, RSS de notícias etc.) ou do próprio administrador do Joomla! (imagens, pequenos textos etc.). Os módulos podem ser aplicados em qualquer parte do template, de acordo com as posições definidas na criação do template. No administrador do Joomla, você pode: - visualizar todos os módulos do seu site; - escolher se o módulo estará publicado ou não; - escolher em que área do site ele vai aparecer, e até; - escolher em que posição na página inicial ele vai estar. DICA: há também outra forma de visualizar essas posições. Basta acessar o endereço do seu site e acrescentar: /?tp=1. Exemplo: http://www.seusite.com.br/?tp=1 O Joomla! padrão já traz os nomes das posições definidos, como TOP, RIGHT, USER1 etc. Contudo, é possível alterá-los e também acrescentar novas posições. Basta acessar: site > template manager > modules positions. Clicando no nome do módulo, você entrará na sua página de edição. Nela, você poderá alterar nome, parâmetros, posição, disposição que o módulo terá no site e sufixos de classe. Na coluna da Page/Itens estão todas as áreas do site, organizadas por menu. Nela você poderá escolher em que páginas seu módulo irá aparecer. Verifique que, na listagem dos módulos, existe uma coluna chamada Position. É essa opção que diz em qual posição o módulo aparecerá no site. Você pode visualizar todas as posições disponíveis no template acessando: site > preview > inline with positions. Como criar um módulo simples Na área administrativa do Joomla!, vá à tela de listagem dos módulos e clique em Novo. Feito isso, dê um
tutorial :: 61 nome (coloquemos Foto, por exemplo), escolha a posição em que esse módulo aparecerá (nesse caso, escolha position left ) e a opção All na coluna Pages/Items. Depois de configurar seu módulo, você já pode incluir algum tipo de conteúdo. Desça a barra de rolagem até o final da página e insira uma imagem na parte de Content do módulo. módulo em formato.zip e instale-o em seu Joomla!. Para instalar, clique: Installers > Modules. Configure da mesma forma como fez com o módulo Foto, criado anteriormente, com a position left e a opção All na coluna Pages/Items. Assim, veja que seu módulo Foto aparecerá em todas as páginas do site. Como criar um módulo complexo Vamos agora criar um módulo complexo, que puxe o último evento do nosso componente de eventos feito na matéria Joomla!, mãos à obra! Parte 2/4 e Parte 3/4. Agora que entendemos mais sobre módulos, fica fácil 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 começar, 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 questões de segurança, para que usuários externos não acessem facilmente pastas internas. Dentro do arquivo index.html, coloque o seguinte código: <html><body bgcolor= #FFFFFF ></body></html> 1) mod_eventos.php Esse arquivo é responsável pela parte lógica e traz o resultado com forma de lista. 4) index.php Será o código desenvolvido na fase de corte (recomendamos que seja em tableless) do layout adaptado ao Joomla!. 5) templatedetails.xml Conterá todas as especificações do template, como a listagem dos arquivos, dados do autor etc. 2) mod_eventos.xml Necessário para a instalação. Finalizado o código, faça a compactação do seu 6) template_thumbnail.png Miniatura do nosso design para visualização rápida. A miniatura aparecerá no administrador do Joomla!. Observação: ainda dentro da pasta meutemplate,
62 :: Webdesign também existirão pastas com as imagens e o CSS. Finalizada a estrutura, vamos à implementação do design. Implementando o template Joomla! Copie todo o código HTML do layout fatiado e cole dentro do arquivo index.php. O que faremos é simplesmente substituir o conteúdo do código por módulos. Primeiramente, vamos chamar dentro do <head> uma função do Joomla!, que contém todos os parâmetros do site, como o título, o description e as key-words. dos módulos no arquivo Includes/frontend.html.php. Considerando que a coluna da esquerda é o menu e a da direita é o conteúdo, vamos trocar toda a coluna da esquerda pela chamada do módulo left de parâmetro -2 A função moscountmodules(), indica se há algum módulo na posição informada. No nosso exemplo, usamos a posição left. Como queremos que a DIV coluna_1 só apareça caso haja algum módulo na posição left, fazemos antes a seguinte verificação: <?php mosshowhead();?> <?php if(moscountmodules( left )) :?> Mude o endereço do CSS para templates/meutemplat/css/folhaestilo.css Para definir as posições em que os módulos serão carregados usaremos a função mosloadmodules(). Eis a chamada da função: <?php mosloadmodules( header );?> A função mosloadmodules pode receber até dois parâmetros: 1. O nome da posição que carregará os módulos (obrigatório). 2. Um número representando o estilo que os módulos serão carregados. São eles: 0 (zero) - É a opção padrão do Joomla!. Se esse parâmetro não for passado, o valor 0 será assumido. Ele imprime o conteúdo dos módulos em tabelas. -1 (menos um) - Imprime o módulo como ele é originalmente, sem a adição de nenhuma tag. -2 (menos dois) - O parâmetro -2 traz o módulo em volta de DIV s e com o nome do módulo dentro de H3. Por padrão, o Joomla! já traz essa DIV com uma classe chamada de moduletable. Você deve preparar no seu CSS uma formatação básica para essa DIV. Entretanto, é possível alterar o nome da classe de qualquer módulo chamado. Isso é possível 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 módulo, ele estará com uma classe chamada moduletablebox1. Assim, você pode preparar uma formatação diferente para cada módulo criado. -3 (menos três) - Retorna o módulo dentro de 4 DIV s aninhadas. Útil para se fazer cantos arredondados. DICA: Você pode aprender mais sobre a estrutura <div class= coluna_1 > <?php mosloadmodules( left, -2 );?> <br clear= all /> </div> <?php endif;?> Caso não exista conteúdo, a coluna não ficará ocupando espaço no template. A função mosmainbody() carrega todo o conteúdo vindo do Joomla! (telas internas, itens de conteúdo etc.). Portanto, iremos chamá-la dentro da DIV conteúdo. <div class= conteudo > <?php mosmainbody();?> </div> Ok. Agora você já pode substituir todas as áreas importantes do site (DIV s, textos, rodapé, menus, imagens etc.) por chamadas de módulos. Dessa forma, você desenvolverá o código de seu template ideal para inserir no Joomla!. Acabamos aqui a série de tutoriais que explicou para você um dos CMS que mais cresce no mundo. Em quatro edições, explicamos como instalar o Joomla!, algumas de suas principais características e vantagens, como desenvolver componentes, módulos e, por fim, templates personalizados. Para facilitar a vida de nossos leitores, vamos disponibilizar todos os códigos citados nas quatro edições desse tutorial em nosso site. Acesse www. noix.com.br/webdesign e faça o download dos códigos comentados. Agora é com você: mãos à obra!