Tutorial Joomla Webdesign

  • Upload
    tsu-kiy

  • View
    247

  • Download
    0

Embed Size (px)

Citation preview

  • 8/2/2019 Tutorial Joomla Webdesign

    1/14

    58 :: tutorial

    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 par-

    tes, concentrar informaes tcnicas e um pouco de epis-

    temologia sobre o sistema. Trabalharemos, como na web,

    com linguagem rpida e utilizando hipertextos, aprovei-

    tando o conhecimento coletivo que a grande comunidadeJoomla! j edificou. Seja bem-v indo e mos obra.

    O que Joomla!?

    Joomla! (pronuncia-se djumla) um CMS (Content Ma-

    nagement System) desenvolvi do a partir do Mambo.

    escrito em PHP e roda no servidor web Apache ou IIS e

    banco de dados MySQL. - Fonte: Wikipdia (pt.wikipe-

    dia.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 com-

    ponentes - extensions.joomla.org - ou desenvolver os

    prprios);

    - flexvel, permitindo utilizar recursos Web 2.0 (acessibilida-

    de, 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 administra-

    o dividida em Front-end e Back-end:

    - Front-end: fachada do site, atravs do qual possvel

    administrar contedo, sem necessitar entrar na rea ad-

    ministrativa;

    - 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 ex-

    tenses do Joomla!, podendo instalar mdulos e compo-

    nentes novos.

    >> Usurios

    O Joomla! possui diviso por status de usurios, dependen-

    do do Grupo em que so cadastrados. Os usurios podem

    ter livre acesso a todas as reas do CMS ou so mente a

    contedos exclusivos, com possibilidade de inserir, editare/ou publicar contedo. possvel tambm escolher se o

    usurio ter acesso apenas ao Front-end, com poder limi-

    tado, 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 con-

    tedo;

    - Editor: pode criar, editar e excluir qualquer contedo;

    - Publisher: pode criar, editar e excluir o prprio conte-

    do 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;

    Joomla!, mos obra! - Parte 1/4Joomla!, mos obra! - Parte 1/4Por 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: [email protected].

  • 8/2/2019 Tutorial Joomla Webdesign

    2/14

  • 8/2/2019 Tutorial Joomla Webdesign

    3/14

    60 :: tutorial

    - Super Administrator: est acima do Administrador, po-

    dendo 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 feitocom Joomla!:

    Seo: Diverso e Arte

    Categoria: Livros

    Item de contedo: Ariano Suassuna fala sobre Patri-

    mnio Artstico-Cultural

    Categoria: Msica

    Item de contedo: Banda gua de Quartinha se apre-

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

    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://lo-

    calhost/joomla/administrator.

    2. Digite o login admin e a senha escolhida no ato da ins-

    talao.

    3. Clique no cone Administrar Itens de Contedo (para

    gerenciar itens de contedo dinmicos) ou Administrar

    Itens de Contedo Esttico (para os itens estticos).

    4. Voc ver a listagem de todos os itens de contedo cadas-

    trados. Clique em NOVO para adicionar um item.

    5. Para cadastrar, obrigatrio o preenchimento mnimo

    de: Ttulo, Texto de Introduo, Seo e Categoria. Aps

    digitar Ttulo e Texto de introduo, escolha a Seo No-

    tcias e a Categoria ltimas notcias. O texto principal

    opcional, sem limite de caracteres.

    6. Clique em SALVAR na barra de botes superior para

    finalizar o cadastro.

    7. Voc ver uma mensagem confirmando a criao do novo

    item Minha primeira notcia.

    8. Veja que seu item est OK para PUBLICADO, mas no

    est OK para aparecer na PGINA INICIAL do site. Para

    mudar, clique sobre o X vermelho.

  • 8/2/2019 Tutorial Joomla Webdesign

    4/14

    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 template s j

    instalados por padro no Joomla!.Observao: H dois templates, madeyourweb e rhuk_solarflare_ii, j

    cadastrados por padro, com um deles publicado.

  • 8/2/2019 Tutorial Joomla Webdesign

    5/14

    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.

    Como criar item de menu

    1. Para criar menus no Joomla!, acesse Menus > Adminis-

    trator Menus > mainmenu e veja a listagem dos itens do

    menu j criados.

    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.

    4. Preencha os campos solicitados. Como criaremos um

    menu principal, no precisa mudar o Nvel do It em, poisno ser submenu.

    5. Clique em salvar para publicar e finalizar a criao.

    Confira, na prxima edio, o desenrolar dessa con-

    versa. Falaremos um pouco sobre componentes do Joomla!,

    abordando suas possibilidades e criando um junto com

    voc. Explicaremos algumas metodologias de desenvolvi-

    mento, formas de aplicao e exemplos de customizao.

    At a prxima!

  • 8/2/2019 Tutorial Joomla Webdesign

    6/14

    Continuando nossa conversa sobre o Joomla!, trou-

    xemos para esta edio algumas palavras sobre Compo-

    nentes. 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 tambmpadres (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 rapida-

    mente uma enquete no site;

    - Contedo (Content) : considerado o mais impor-

    tante Componente do Joomla!, porque visto como ocorao 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 desen-

    volvedores, existem Componentes Joomla! distribudos de

    maneira free na internet.

    Voc pode encontrar estes componentes, organi-

    zados por categoria, no endereo http://extensions.

    joomla.org/. Caso deseje ver a lista de componentes jinstalados no seu CMS, voc pode acessar o menu Com-

    ponentes, na barra de ferramentas do seu Joomla!.

    Lembrando que Componentes so facilmente insta-

    lados e desinstalados. Eles vm em formato .zip, com

    todos os arquivos de Back-end, Front-end e XML compac-

    tados, prontos para voc fazer upload para o Joomla! e

    comear a us-los.

    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 doComponente atravs de estatsticas, com um contador

    de downloads e logs. Mais informaes 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 gerenc iador,

    que vai descompact-las sem problemas, fazendo unzip

    automaticamente.

    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.

    Joomla!, mos obra! - Parte 2/4Joomla!, mos obra! - Parte 2/4Por 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:

    [email protected].

    58 :: Webdesign

  • 8/2/2019 Tutorial Joomla Webdesign

    7/14

    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 arqui-

    vos 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, infor-

    mando nome, data do acontecimento e o local. Tudo a partir de ummdulo na pgina principal, que mostrar em uma pequena listagem

    dos eventos por ms.

    Para entender a estrutura, importante saber que o Compo-

    nente 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 restr ito 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/progra-mando-componentes-para-joomla-parte-1.html).

    Para comear o desenvolvimento do Back-end de seu Compo-

    nente 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 preci-

    sa criar para o Back-end, veja como faz-los:

    1) admin.eventos.php

    Far parte do controle das atividades do componente. Quando aces-

    samos: 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 administrat iva do site o arquivo

    tecnologia na web :: 59

  • 8/2/2019 Tutorial Joomla Webdesign

    8/14

    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), sal-

    var eventos novos ou existentes (save), excluir (remove)

    ou listar eventos(list).

    Se o endereo acessado for: http://www.seusi-

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

    funo saveEvento(), que realizaria todos os procedi-

    mentos 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 con-

    tm uma classe que vai tratar da parte do banco de dados.

    4) toolbar.eventos.php

    Far parte do controle dos menus do componente.

    5) toolbar.eventos.html.php

    Dar a listagem dos menus.

    6) eventos.xml

    Possibilita a instalao do componente, pois faz um ma-

    peamento de todos os arquivos que compem o compo-

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

    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.

    60 :: Webdesign

  • 8/2/2019 Tutorial Joomla Webdesign

    9/14

    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 Compo-

    nente de Eventos, atravs do qual voc poder cadas-

    trar, 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 i nformaes cadas-

    tradas 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 recen-

    te para a menos recente.

    ATENO: lembre-se de que os arquivos do Front-

    end do Componente esto localizados na pasta compo-

    nents/ do diretrio raiz do seu Joomla!. Portanto, apsa 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 Compo-

    nente realizar. Funciona como o arquivo admin.eventos.

    php do Back-end.

    2) eventos.html.php

    Arquivo responsvel por toda a estrutura de visualizao

    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.

    Joomla!, mos obra! - Parte 3/4Joomla!, mos obra! - Parte 3/4Por 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:

    [email protected].

    62 :: Webdesign

  • 8/2/2019 Tutorial Joomla Webdesign

    10/14

    Com os arquivos de Back-end (admin.eventos.php ; admin.

    eventos.html.php ; eventos.class.php ; toolbar.eventos.php ; tool-

    bar.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. Acesse a rea administrativa do Joomla! e v ao menu Insta-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:

    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.

    tutorial :: 63

  • 8/2/2019 Tutorial Joomla Webdesign

    11/14

    64 :: Webdesign

    Ao final do evento, acontece a aguardada

    premiao do concurso Peixe Grande,

    que premia as melhores agncias e

    profissionais de webdesign.

    64 :: Webdesign

    Veja como seu Componente ficar:

    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 ex isten-

    tes. Veja como ficaria esse exemplo da seta:

    - Incrementando o cdigo do arquivo eventos.html.php

    - 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, desins-

    tale-o. Dentro da mesma rea de instalao, voc sele-

    ciona o Componente anterior e clica em Uninstall

    - Instale o novo Componente com_eventos

    Perceba como seu Joomla! pode ganhar novas

    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 tambmpode criar os prprios layouts do site, aplicando perfei-

    tamente estrutura do Joomla! que voc desenvolveu.

    Como possvel? Veja na prxima edio dicas impor-

    tantes sobre como criar os prprios templates de seu

    Joomla!. At l.

    Veja o resultado visual:

  • 8/2/2019 Tutorial Joomla Webdesign

    12/14

    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 oucomprar 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 denotcias 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/4Joomla!, mos obra! - Parte 4/4Por 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:

    [email protected].

    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.

  • 8/2/2019 Tutorial Joomla Webdesign

    13/14

    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 oltimo evento do nosso componente de eventos feito na

    matria Joomla!, mos obra! Par te 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. Dentrodo arquivo index.html, coloque o seguinte cdigo:

    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,

  • 8/2/2019 Tutorial Joomla Webdesign

    14/14

    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 uma

    funo do Joomla!, que contm todos os parmetros do

    site, como o ttulo, o description e as key-words.

    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 achamada da funo:

    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 quevoc 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 algummdulo 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:


    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.

    Ok. Agora voc j pode substit uir 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. Emquatro 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