Vous êtes sur la page 1sur 30

DO CURSO DESIGN PARA JOOMLA!

APOSTILA

Este material protegido pela lei do direito autoral. Todos os direitos reservados. Nenhuma parte desta publicao pode ser reproduzida, transmitida, modificada, distribuda, por qualquer meio, seja eletrnico, mecnico ou fotocpia, sem expressa autorizao do autor Bruno vila ou da empresa vila Comunicao. Esta apostila faz parte integrante do Curso Online Design para Joomla e no pode ser comercializado.

01

Instalando um Servidor Local e o Joomla 1.5


1. Instalando um por um, caso voc goste de jogar no modo avanado ou seja sadomasoquista. 2. Utilizando o Wampserver Eu prefiro o item nmero 2. O Wampserver instala esses trs sistemas em sua mquina com apenas alguns cliques, fcil, rpido e prtico. Em nossa vdeo aula mostro como instalar o Wampserver, d uma olhadinha l. ;) Aqui est o link de download do WampServer: http://www.wampserver.com/en/download.php Agora, caso o Wampserver no funcione, a o negcio apelar para o modo avanado do jogo e tentar instalar manualmente cada sistema. Neste tutorial escrito por Marcos Elias voc ter todas as instrues de como instalar o Apache, PHP e MySQL separados sem auxlio do Wampserver: http://www.guiadohardware.net/tutoriais/apachephp-mysql-windows/ Aps a instalao do servidor, abra seu navegador. Digite na URL simplesmente localhost. Veja se abriu uma pgina semelhante a pgina abaixo:

Bem amigos da Rede Globo, voltamos agora em definitivo para o incio de nosso curso. A partir de agora vamos entrar no mundo encantado do Sr.Joomla, o CMS camarada.

Nosso objetivo nesse primeiro momento instalar um servidor local, onde voc poder testar o seu template para Joomla com maior rapidez. Imagine se voc tivesse que enviar o seu html e css para um servidor toda vez que fizer uma mudana? Demorado, no? Pois com o servidor local voc ir fazer o html e css e test-lo na hora. A misso transformar seu Windows num servidor web como qualquer outro. Devemos instalar o Apache, o MySQL e o PHP em sua mquina. Vou explicar o que cada um desses meninos fazem: Apache: um software gratuito, considerado o mais bem sucedido servidor web gratuito do mundo. Atravs desse software que o seu computador se transformar num servidor web como qualquer outro. Voc poder rodar sistemas em php por exemplo e ver a coisa funcionando em seu navegador. MySQL: trata-se de um sistema de gerenciamento de banco de dados que utiliza a linguagem SQL. Sendo mais direto, ele que vai armazenar as notcias, usurios e todas as informaes que voc incluir no Joomla. Seria uma espcie de armrio virtual. Quando o Joomla quiser puxar aquela notcia que voc incluiu ontem, ele ir procurar nas gavetas do MySQL. PHP: famosa linguagem de programao. O responsvel pelo funcionamento de todas as engenhocas do Joomla. Instalando o PHP na sua mquina, os sistemas de atualizao, consulta ao MySQL e todos os outros componentes do Joomla, assim como ele prprio, podero funcionar tranquilamente realizando todas as suas operaes. Existem duas formas de instalar esses trs sistemas em seu computador.

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

01

Instalando um Servidor Local e o Joomla 1.5

Se apareceu, timo, seu servidor est funcionando. Se no apareceu, ocorreu algum problema na instalao do servidor. Nesse caso o melhor tentar a instalao de outra maneira. Caso voc tenha instalado o servidor sem utilizar o Wampserver, a pgina que ir aparecer ser algo semelhante a isso: Agora, com o servidor funcionando, vamos instalar o Joomla 1.5 em sua mquina!

7. Aparecer a tela de instalao. Escolha o idioma e clique em Next/Prximo.

Instalando o Joomla 1.5


Chegou a hora de instalar o Joomla em sua mquina. Na vdeo-aula mostro o passo-a-passo da instalao mas aqui vai um guia rpido para consulta. Chegou a hora de instalar o Joomla em sua mquina. Na vdeo-aula mostro o passo-a-passo da instalao mas aqui vai um guia rpido para consulta. 1. Crie uma pasta para o Joomla. Abra seu gerenciador de arquivos, v at \wamp\www (ou na pasta onde voc instalou o seu Wampserver) e crie uma pasta. Essa pasta pode pode ter o nome que quiser, mas por conveno vamos colocar joomla. Ficar algo como \wamp\www\joomla; 2. Toda pasta criada dentro de wamp/www poder ser acessada pelo navegador, atravs da seguinte url: http://localhost/nome-da-pasta ; 3. Caso voc instale o Apache sem ser via Wampserver, todas as pastas colocadas dentro de \apache\htdocs podero ser acessadas pelo navegador atravs da url: http://localhost/nome-dapasta ; 4. Baixe o Joomla Verso 1.5 Full Package no seguinte endereo: http://www.joomla.org/download.html; 5. Descompacte todo o contedo do zip na pasta joomla que voc criou dentro de wamp/www (exemplo: wamp/www/joomla); 6. Abra o navegador e acesse http://localhost/joomla;
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

8. Na tela seguinte ir aparecer um checklist mostrando os componentes instalados no servidor. Clique em Next/Prximo;

9. Aparecer ento o texto da licena de uso. Clique em Next/Prximo

01

Instalando um Servidor Local e o Joomla 1.5

10. Configurao da base de dados. Selecione o tipo de base MySQL, o nome do host localhost, nome de usurio root e em nome de base de dados coloque joomla. Clique em Next/Prximo; 11. Configurao de FTP . Em localhost no preciso configurar. Em caso de servidor remoto, coloque caminho, login e senha de FTP . Clique em Next/Prximo;

14. No gerenciador de arquivos, apague a pasta installation que fica dentro de wamp/www/joomla. Se voc no apagar, no conseguir entrar na administrao do Joomla:

12. Configuraes finais, coloque o nome do site, email, crie uma senha de administrador e guarde muito bem pois se voc esquecer vai ser bem complicado saber novamente. Aproveite e instale um contedo de exemplo, no boto logo abaixo. Depois clique em Next/Prximo;

15. Para entrar na administrao, abra o navegador e coloque o endereo http://localhost/joomla/ administrator. Aparecer a tela abaixo pedido o usurio (admin) e senha:

13. Pronto. Aparecer a tela final parecido com a tela abaixo:

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

01

Instalando um Servidor Local e o Joomla 1.5

16. Aps o login aparecer a tela de administrao semelhante a tela abaixo:

Na vdeo aula mostro alguns detalhes do funcionamento do Joomla. Na prxima aula colocarei algo mais sobre isso em texto, apresentando um tour sobre o Joomla. No decorrer do curso iremos ver algumas funes do Joomla com mais detalhes, aguarde! Para o alto e Avante!

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

02
Front-End
Posies

Um Tour pelo Joomla!

Agora que voc j instalou o Joomla em sua mquina, vamos ver algumas funes importantes do Joomla que voc ir utilizar bastante nas aulas seguintes.

O Joomla dividido em dois ambientes: Front-End: a parte da frente, o ambiente onde todos os visitantes iro ver. Enfim, o site propriamente dito. Back-End: so os bastidores, o que existe atrs do palco. a parte de administrao do site onde apenas o administrador do site tem acesso.

O Front-End do Joomla dividido em diversas reas, chamadas de posies. Essas posies so determinadas por voc, webdesigner, na hora de contruir o layout, atravs de tags especficas que veremos mais a frente. Veja a seguir um exemplo demonstrando as posies do layout default do Joomla.

Essas posies so importantes pois atravs delas voc poder dizer ao Joomla em qual posio dever aparecer a enquete ou qual o local onde dever aparecer o menu principal.

Menus
Todo Joomla vem com 4 menus instalados. So eles: Main Menu, Top Menu, Other Menu e User Menu. Voc poder criar outros menus, atravs do backend, em Menus > Administrar Menu Main Menu O Main menu o menu principal so site. Este menu deve aparecer exatamente na mesma posio em cada pgina do site, afinal, um item importante na navegao. Ele no pode ser apagado pois nele esto
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

02

Um tour pelo Joomla!

configuraes importantes da primeira pgina.

Contedo
Compreende a parte central do site onde todo o contedo de pginas e notcias devero aparecer. Alm disso no contedo onde ficar a primeira pgina ( First/Front Page ) First/Front Page Atravs da primeira pgina possvel mostrar o textochamada de uma notcia contendo data, nome de autor, categoria da notcia, imagem e um leia mais. Sempre aparecer as notcias organizadas por ordem de data. A mais recente aparece como principal.

Top Menu. O top menu recomendado para ser utilizado no topo das pginas oferecendo ao usurio acesso rpido aos itens mais importantes do site.

Other Menu Um menu com links adicionais, que podero ser para pginas do site ou links externos.

User Menu Este menu s aparecer depois de ser feito login por usurios registrados. Nele voc poder colocar links relacionados aos detalhes do usurio, mudana de senha e a opo de deslogar-se.
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

02

Um tour pelo Joomla!

Mdulos e Componentes
Componentes so funes adicionais ao Joomla. Alguns componentes j vem instalados como o gerenciador de banners e enquetes. Mas voc poder adicionar novas funes ao Joomla, bastando instalar novos componentes, normalmente criados por terceiros. Esses componentes podem ser encontrados no site do Joomla em http://extensions.joomla.org/. Alguns so gratuitos, outros no. Mdulos so auxiliadores dos componentes. Servem para mostrar determinadas informao gerada pelos componentes ou ento funciona como um mdulo de interao entre o usurio e o componente. So elementos capazes de serem exibidos nas posies que voc escolher. O Joomla j traz alguns mdulos como a enquete e rea de login. Mdulos criados por terceiros podem ser instalados no Joomla onde voc poder encontrar tambm em http://extensions.joomla.org/ Abaixo da barra de menu superior temos a barra de ferramentas. Do lado esquerdo temos o ttulo e do lado direito temos alguns cones que acendem ao passar o mouse.

A tabela a seguir mostra as principais funes desses cones:


Publicar O elemento selecionado publicado no front-end.

Despublicar

O elemento selecionado sai do front-end mas no apagado da administrao.

Arquivo Novo Editar

O elemento escolhido arquivado Criao de um novo elemento. Edio de mdulo, componente ou template.

Back-End
Para acessar o back-end do Joomla basta acessar o [Nome de Domnio]/administrador/. No nosso caso seria http://localhost/joomla/administrator Atravs da administrao do Joomla, voc pode personalizar o seu site, fazer alteraes, e preench-lo com contedo. Joomla possui uma interface semelhante a qualquer software de Windows. Isto s possvel graas a uma bem-sucedida combinao de JavaScript e AJAX. Assim como no Front-End, a administrao do Joomla constituda por diferentes elementos. Os menus esto no topo, bem como, do lado direito, temos trs elementos: um link para seu site ( Pr-Visualizar ), um aviso de recebimento de mensagens do sistema e um aviso de quantas pessoas esto conectadas no seu site.

Excluir

O elemento selecionado excludo.

Lixeira

O elemento selecionado colocado na lixeira.

Restaurar

O elemento selecionado resgatado da lixeira

Mover

O elemento selecionado movido para outra seo ou categoria. O elemento selecionado copiado para outra seo ou categoria. O elemento selecionado salvo e a tela fechada.

Copiar

Salvar

Aplicar

As alteraes so guardadas e a tela continua aberta.

Cancelar

A edio terminada sem qualquer alterao a ser salvo.

PrVisualizao Enviar

Visualize o site, notcia ou pgina antes de salvar ou publicar. O arquivo escolhido enviado para o servidor.

Ajuda

Voc redirecionado para a ajuda do Joomla atravs do site do prprio Joomla O elemento selecionado passa a ser o padro.

Padro

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

03

Criando um Layout para Joomla!


Entendendo o Gerenciamento de Temas
Continuando o tour da aula passada pelas funes do Joomla que ns webdesigners iremos utilizar bastante em nosso curso, ficou faltando apresentar uma rea muito importante: o gerenciamento de temas. Todos os arquivos de template podem ser instalados diretamente pela funo Instalar do Joomla, do mesmo jeito que se instala um componente ou plugin. Sobre isso iremos ver mais na frente. Ao serem instalados, os arquivos ficam na pasta templates. Um exemplo: se o seu tema se chama "planetaxuxa", ento a pasta onde ficaro os arquivos do template ser "[pasta do Joomla] / Templates / planetaxuxa". Na pasta do template voc ir encontrar normalmente 3 pastas: css: onde ficam armazenadas as folhas de estilo CSS html: contm o html principal (index.html) mas normalmente o html fica na pasta raiz do template images: todas as imagens do template estaro nessa pasta. O arquivo index.php contm toda a estrutura do site. O template.css tem tudo que se refere a parte visual do site. A partir desses dois arquivos, todas as pginas do site sero geradas automaticamente. Tanto o arquivo index.php como o template.css podem ser acessados e editados sem a necessidade de FTP , atravs do gerenciamento de temas.

Finalmente vamos comear a criar o nosso primeiro template para Joomla. Vamos comear com um layout fcil, de formas simples. Optei por uma estrutura bsica de 3 linhas e 3 colunas, formas retas, quase que um wireframe. O objetivo criar um layout bsico, porm no muito diferente, para que nas prximas aulas possamos recort-lo e a sim montlo, fazendo a adaptao para o Joomla. Dessa maneira poderei explicar alguns detalhes que somente com o recorte e montagem terei a oportunidade de mostrar.

Depois de passarmos por todo o processo de recorte e montagem e ficar claro alguns pontos a respeito desses processos, faremos layouts um pouco mais desafiadores com o objetivo de aproveitar os recursos do Joomla mas sem deixar claro para o visitante que ali por trs existe um Joomla. ;) No vdeo mostrarei o passo a passo da criao do layout. Vocs vero que utilizo um wireframe como uma pequena cola. Nesse wireframe j determino onde ficaro todas as posies do Joomla no layout. O wireframe que montei foi exatamente esse aqui:

Note que o nome das caixas correspondem as posies que encontremos no nosso Joomla 1.5 No vdeo voc ir notar como esse wireframe ser muito til para me guiar.

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

03

Criando um layout para Joomla!

Iremos trabalhar bastante com o gerenciamento de temas. Aguarde! Na prxima aula teremos a difcil tarefa de recortar e montar o layout que foi apresentado hoje. Se voc no tem muita experincia em CSS, prepare-se pois iremos encarnar Clodovil e Ronaldo Esper para trabalhar muito com estilos. Cores, tamanhos, medidas, sabe como ... ;)

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

10

03

Criando um layout para Joomla!

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

11

04

Recortando o Layout
vrgula. As propriedades e valores de uma regra sempre devero vir entre chaves {}. Para selecionar um elemento XHTML basta coloc-lo como seletor no CSS, sem os sinais de <e>. Voc pode selecionar mltiplos elementos XHTML em seu CSS, colocando como seletores e separando com vrgulas. Para incluir uma folha de estilo ( CSS ) dentro de uma pgina, basta adicionar a tag <style>. Para sites maiores, com muitas pginas, recomendase utilizar uma folha de estilos dentro de um arquivo externo (.css). Para vincular o arquivo externo CSS sua pgina, basta utilizar o elemento <link>. Fique atento a herana. Se algum estilo for adicionado ao elemento <body>, todos os elementos contidos em <body> herdaro a mesma propriedade. Caso no deseje que algum elemento no se comporte da maneira definida em <body> basta criar uma regra especfica, utilizando o elemento como seletor no seu CSS. Para adicionar classes para diferenciar elementos semelhantes. No CSS, utilize ".nomedaclasse" para definir a regra como uma classe. No XHTML, utilize no elemento escolhido a tag "class=nomedaclasse", sem utilizar ponto antes do nome da classe. Para controlar a exibio dos elementos, as CSS o encaram sempre como caixas. Toda caixa possui rea de contedo, enchimento, borda e margem, sempre opcionais. O contedo do elemento se encontra na rea de contedo. O enchimento importante para destacar o contedo, criando em volta da rea uma moldura transparente. A borda importante para deixar claro uma separao visual do contedo. Porm, borda no obrigatrio. A margem o espao externo cuja finalidade
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

Continuamos nossa saga de criar e montar um layout do zero especialmente para o Joomla. Na aula de hoje iremos recortar e montar utilizando XHTML e CSS o layout da aula passada. Ser bem trabalhoso mas nada que em 1 hora no se resolva.

Dessa vez irei mostrar o recorte e montagem puro e simples, no XHTML utilizando apenas cdigo. Se voc j domina o CSS, maravilha, voc ir tirar de letra. Ah! Voc no sabe muuuito de CSS? Mas que bom, pois a idia dessa aula despertar dentro de voc aquela vontade de se aprofundar no CSS, mostrando todo o poder que ele tem. Prestem bastante ateno nessa aula pois trabalharemos bastante com esses recursos. No iremos falar de Joomla nesse primeiro momento, apenas de cdigo. Na aula que vem pegaremos esse mesmo layout e adaptaremos ao Joomla, onde irei mostrar o que interessa e no interessa para o nosso querido Joomlo, o CMS camarada.

Relembrando o CSS
Fui l no curso PSD para HTML & CSS procurar algumas informaes importantes que podem ser aproveitadas nessa aula. Trata-se de um pequeno resumo-o-o do CSS para voc. Trago tambm alguns links importantes que podem lhe ajudar na rdua tarefa de construir uma folha de estilo. L vai! No se esquea! O contedo presente nas CSS se chamam regras. Cada regrinha ir fornecer um estilo para o elemento XHTML especificado. A regra composta de um ou mais seletores acompanhados de propriedades e seus valores. O seletor ir apontar em qual elemento a regra ser aplicada. No se esquea que no final do valor de cada propriedade deve ser terminado com um ponto-e-

12

04

Recortando o Layout

separar os elementos da pgina Ao utilizar fundo no elemento, seja em cor ou imagem, este ir aparecer por trs do contedo e enchimento, nunca atrs da margem. A largura de um enchimento ou margem pode ser definido em pixels ou porcentagem. J a borda pode ser definido em thin, medium, thick ou em pixels. H oito estilos diferentes para as bordas, solid, double, groove, outset, dotted, dashed, inset e ridge Na CSS voc poder definir em uma linha todas as definies de enchimento, margem e borda ou ento definlos separadamente. Para aumentar a separao das linhas de texto, utilize a propriedade "line-height" Para utilizar imagem como fundo do elemento, utilize a propriedade "background-image" Utilize as propriedades "background-position" e "background-repeat" para definir a posio e o comportamento de repetio da imagem do fundo. Utilize class quando voc for utilizar esta regra para muitos elementos. Utilize o ID quando voc for utilizar esta regra para um elemento, sem necessidade de repetio. No CSS, voc dever identificar um id utilizando o smbolo #. Um id poder ter vrias classes.

Dicas de Sites
Elementos HTML: todos os elementos HTML que voc poder alterar utilizando como um seletor CSS: http://www.abpsoft.com/criacaoweb/htmlguiaref.ht ml Tabela de Cores CSS: veja 504 cores com seus cdigos hexadecimais e seus nomes oficiais que podem ser utilizados no seu CSS: http://www.abpsoft.com/ criacaoweb/tabcores.html Caracteres Especiais: veja todas as entidades dos caracteres especiais para voc utilizar em seu XHTML: http://www.abpsoft.com/criacaoweb/tabcaractesp.h tml

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

13

05

Instalando um Layout no Joomla!


template.css: a folha de estilo do template. O nome pode ser qualquer que seja, contanto que esse arquivo seja chamado no index.php. Por conveno utiliza-se template.css mas voc pode fazer no s com outro nome mas quantos arquivos css voc quiser. Ao colocar na pasta css, suas folhas de estilo iro aparecer no gerenciador de temas, em editar css. Pasta Images: Aqui devem ficar todas as imagens relacionadas ao template ( exceto o template_thumbnail.png )

inalmente iremos adaptar o nosso querido layout simples e bonito no Joomla. Chegou a hora de mostrar o que realmente interessa no HTML e o que devemos modificar no CSS. Como chamar o contedo dinmico do Joomla no HTML? Como alterar o menu? Como alterar o layout do mdulo enquete? muito simples pessoal. Trabalhoso, verdade, mas simples de entender.

Quais arquivos compe um Template Joomla?


Toda instalao de Template para Joomla exige sempre alguns arquivos e pastas fundamentais. Irei descrever aqui quem so essas figuras: templateDetails.xml : nada mais que um arquivo xml. Ele responsvel por dizer ao Joomla quais os arquivos do template sero instalados assim como os detalhes do autor, nome do template, descrio e direitos autorais. Alm disso ser atravs desse arquivo que iremos passar algumas informaes de parmetros ( que ser visto nas aulas seguintes ). Note que a letra D de details maiscula. assim mesmo, no erro no. index.php: o arquivo principal do template contendo toda sua estrutura. ele que informa ao Joomla onde colocar componentes e mdulos. Tratase de uma combinao de PHP e XHTML. template_thumbnail.png: nada mais que uma captura da tela, exibindo o layout. de tamanho reduzido, com cerca de 140 pixels de largura. Funciona como uma pr-visualizao ao passarmos o cursor em cima do nome do template, no gerenciador de temas do Joomla. Pasta CSS: nessa pasta dever ser colocado todas as folhas de estilo do site.

O arquivo templateDetails.xml
Dentro do arquivo templateDetails.xml deve haver uma lista com todos os arquivos que compe o template. Alm disso dever conter informaes como nome do autor, template, descrio e direitos autorais. Essas informaes sero mostradas na administrao do Joomla em Gerenciador de temas. Segue um exemplo desse arquivo xml:
<install version="1.5" type="template"> <name>JornaldoInterior</name> <creationDate>Janeiro 2009</creationDate> <author>Alunos do Bruno Avila</author> <copyright>Curso Design para Joomla</copyright> <authorEmail>cursos@brunoavila.com</authorEmail> <authorUrl>cursos.brunoavila.com.br</authorUrl> <version>1.0</version> <description>Esse template faz parte do primeiro layout do Curso Online Design para Joomla</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>images/bg-topo.png</filename> <filename>images/bullet.png</filename> <filename>images/logo.png</filename> <filename>css/template.css</filename> </files> </install>
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

14

05

Instalando um Layout no Joomla!

Agora vou explicar cada linha desse xml:


<install version="1.5" type="template"> Essa linha diz ao Joomla que iremos instalar um template (type="template") para Joomla verso 1.5 (version="1.5") <name>JornaldoInterior</name> Aqui voc deve colocar o nome do template. ATENO: saiba que o nome que voc colocar aqui tambm ser o nome da pasta onde ficar o template. Como a maioria dos servidores no aceitam nome de pastas com espaos e acentos, evite utilizar. Prefira colocar o nome junto, como no exemplo acima. <creationDate>Janeiro 2009</creationDate> Aqui voc poder colocar a data de criao do layout. Pode ter o formato que quiser, ms e ano ou dia/ms/ano. <author>Alunos do Bruno Avila</author> Aproveite para colocar o nome do autor do template. <copyright>Curso Design para Joomla</copyright> Coloque aqui as informaes de direitos autorais. <authorEmail>cursos@brunoavila.com</authorEmail> Coloque o email do autor. <authorUrl>cursos.brunoavila.com.br</authorUrl> O endereo da URL do site do autor do template <version>1.0</version> Verso do template. <description>Esse template faz parte do primeiro layout do Curso Online Design para Joomla</description> Aproveite para colocar alguma descrio sobre o template <files><filename>index.php</filename Coloque aqui todos os arquivos contidos na pasta do template. Cada arquivo deve estar entre as tags <filename></filename>. Caso o arquivo esteja numa pasta, voc deve considerar a pasta do template como raiz. Exemplo: se o arquivo logo.png est dentro da pasta images, coloque:

algumas tags importantes, dizendo ao Joomla onde ficar cada posio. No esquea desta tag: <jdoc:include type=modules name=LOCATION style=OPTION> Essa tag responsvel por dizer ao Joomla onde ficar em seu layout cada posio. Assim voc poder dizer que o canto direito ficar a posio left e todos os mdulos que estiverem em left devem aparecer ali. Para isso basta colocar a tag <jdoc:include type=modules name=left> E o Style? No se preocupe, mais adiante veremos o que so os styles. ;)

O arquivo template.css
Esse arquivo contm toda a parte visual do layout, mdulos e componentes. Existem alguns ids e classes especficas do Joomla, onde voc poder edit-los. Eis a lista de alguns ids e classes do Joomla que voc ir encontrar por a:
Classes CSS padro do active article_separ author bannerfooter bannergroup bannerheade banneritem blog mdulos artigos Autor de artigo mdulo de banner mdulo de banner mdulo de banner mdulo de banner contedo de blog contedo de blog contedo de blog mdulo breadcrumb ou pathway vrios vrios vrios componente contedo Usado em:

<filename>images/logo.png</filename>
E para finalizar todo o XML, coloque </install>

blog_more blogsection breadcrumbs button buttonheadin

Alm disso o templateDetails.xml poder conter novas posies para o template e parmetros especficos. Sobre isso veremos nas prximas aulas.

O arquivo index.php
O index.php nada mais que uma pgina XHTML com PHP . a estrutura do layout. Nele colocaremos

clr componenthe contedo_em

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

15

05
contedotoc createdate created-date current form-login

Instalando um Layout no Joomla!


contedo contedo contedo contedo contedo contedo contedo contedo contedo title contedo wrapper Menus verticais e horizontais no modo herana mdulo de login mdulo de login mdulo de login mdulo de login mdulo de login edio formulrios formulrios mdulo de ltimas notcias Menus verticais e horizontais Mdulo wrapper Titulo de mdulos sections sectiontable_f sectiontablee sectiontablee sectiontablefo sectiontableh small sublevel contedo contedo contedo contedo contedo contedo Fonte pequena Menus verticais e horizontais no modo subnivel

contedo_rati contedo_vot contedodes contedohea contedopag contedopan contedopan

modlgn_pass form-loginform-loginmodlgn_reme hasTip input inputbox latestnews mainlevel

Claro que voc no precisa decorar tudo isso. Serve apenas como referncia. Temos muitas outras classes. Por isso recomendo o uso do plugin Web Developer do Firefox para que facilite a vida de vocs. o mesmo que utilizo nos vdeos. No decorrer do curso irei apresentar em nossa parte texto mais informaes sobre CSS e tags utilizadas na construo de nossos templates. Aguarde!

menu modifydate moduletable mosimage mostread newsfeed pagenav pagenav_nex pagenav_pre pagenavbar pagenavcoun pagination pathway pollstablebor readon searchbox search searchintro

Menus verticais e horizontais data e hora modificadas de artigos Mdulos em geral imagens Mdulo de leia mais news feeds navegao de pgina navegao de pgina navegao de pgina navegao de pgina navegao de pgina Numerao de pgina mdulo breadcrumb ou pathway Mdulo de enquete Link de leia mais Mdulo de busca Mdulo de busca Mdulo de busca

Para quem ainda usa Joomla 1.0


Apesar do Joomla 1.5 ter uma srie de diferenas do Joomla 1.0, no to difcil criar um layout para ele. O processo 90% semelhante ao que mostro no vdeo, s com algumas diferenas principalmente no que diz respeito a forma de chamar as posies do Joomla dentro do HTML. Aprendemos que no Joomla 1.5, para chamar uma posio no HTML basta utilizar a tag <jdoc:include...>. J no Joomla 1.0 isso diferente. Basta utilizar o <?php mosLoadModules...> Ento se voc quiser chamar por exemplo a posio user1 basta colocar no seu HTML a tag <?php mosLoadModules ( 'user4' ); ?> Se voc quiser chamar os metadados do Joomla em Head, basta utilizar:
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

16

05

Instalando um Layout no Joomla!

<head> <?php mosShowHead(); ?> </head> Abaixo segue um exemplo de HTML utilizando o mosLoadModules. Veja que o processo semelhante ao Joomla 1.5, mudando apenas a tag: ao invs de jdoc:include, utiliza-se o mosLoadModules:
<html><head> <?php mosShowHead(); ?> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="780" border="1"> <!-- Part 1 --> <tr> <!-- Area 1 --> < t d c o l s p a n = " 2 " h e i g h t = " 8 9 " bgcolor="#F5C228">&nbsp;</td> <!-- Area 2 --> <td width="178" height="120" rowspan="2" bgcolor="#FFCC33"> <?php mosLoadModules ( 'user4' ); ?> </td> </tr> <tr> <!-- Area 3 --> <td colspan="2" height="33" bgcolor="#FFCC33"> <?php mosPathWay(); ?> </td> </tr> <!-- Part 2 --> <tr> <!-- Area 4 --> <td width="197" height="233" bgcolor="#F5EE28" valign="top"> <?php mosLoadModules ( 'left' ); ?> </td> <!-- Area 5 --> <td width="389" height="233" valign="top"> <?php mosMainBody(); ?> </td> <!-- Area 6 --> <td width="178" height="233" bgcolor="#FFFF33" valign="top"> <?php mosLoadModules ( 'right' ); ?> </td> </tr> <!-- Part 3 --> <tr bgcolor="#FFCC33"> <!-- Area 7 --> <td colspan="3" height="40"> <?php mosLoadModules ( 'footer' ); ?> </td> </tr> </table> </body></html>
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

17

05
Funo

Instalando um Layout no Joomla!

Comparativo das principais Tags entre Joomla 1.0 e 1.5


Joomla 1.0 <?php mosShowHead(); ?> <?php mosLoadModules ( 'position' ); ?>. Exemplo: <?php mosLoadModules ( 'left' ); ?> Joomla 1.5 <jdoc:include type=head> <jdoc:include type=modulesname=position> Exemplo: <jdoc:include type=modulesname=left> Inclui os metadados do Joomla em <head> Determina a posio onde ser carregado os mdulos

Migalha de Po (Breadcrumbs)

<?php mosPathWay(); ?>

<jdoc:include type=modulesname=breadcrumb s> <jdoc:include type="component">

rea de Contedo Dinmico, corpo do site, parte principal.

<?php mosMainBody(); ?>

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

18

06

Adaptando o Design Joomla em outros navegadores


do Joomla em Administrao de Temas, escolhendo o tema > edit > edit css. Ir aparecer todos os arquivos css contidos na pasta /css de seu template. 3. Edite o index.php de seu template, incluindo a seguinte linha entre <head></head>
<!--[if lte IE 6]> <link rel="stylesheet" href="templates/<?php echo $this>template ?>/css/ie6.css" type="text/css" /> <![endif]-->

Hoje irei mostrar como adaptar seu layout Joomla a outros navegadores, mais precisamente ao Internet Explorer que sei que voc tanto adora. ( ah no? Vc odeia? Ah, mas at que ele bonitinho, vai l... )

Gostando ou no, o Internet Explorer ainda o navegador mais utilizado no mundo. Na nossa vdeo-aula de hoje mostro tambm o layout do nosso novo trabalho de Joomla, onde a misso criar uma capa com cara de capa de site e sem ser aqueles sites sem graa com cara de CMS que s o texto muda mas o resto continua tudo igual.

Adaptando o layout para Joomla no Internet Explorer 6


Na aula de hoje vimos que o layout, assim como qualquer layout que utilize XHTML e CSS, nem sempre bem visualidado no Internet Explorer. Deficincias do navegador? Pode ser, mas o que interessa nesse momento como contornar essa situao, afinal o IE ainda o navegador que todo mundo ( ou pelo menos a maioria ) ainda usa. No vdeo mostrei o layout sendo adaptado ao Internet Explorer 6 graas a um arquivo CSS prprio para esse navegador, com todas as modificaes necessrias. Mas voc mesmo poder adaptar o layout a outras verses. Aqui vo algumas dicas, tambm citadas no vdeo: 1. A primeira coisa a se fazer criar um outro arquivo .css na sua pasta /css do seu template. Recomendo nome-lo de uma forma que voc possa identificar. Exemplo: caso a adaptao seja para o navegador Internet Explorer 6, utilize ie6.css. 2. Esse arquivo poder ser acessado tanto por FTP ( ou no gerenciador de arquivos caso voc esteja trabalhando localmente ) bem como pelo gerenciador

O href deve apontar para o arquivo css criado especialmente para aquele navegador. Abaixo vai uma lista que voc pode utilizar caso queira linkar folhas de estilo de outras verses:
< ! [ i f I E ] > Pa r a t o d a s a s v e r s e s d o I n t e r n e t Explorer<![endif]> <![if IE 5]>Para o Internet Explorer 5<![endif]> <![if IE 5.0]>Para o IE 5.0<![endif]> <![if IE 5.5]>Para o IE 5.5<![endif]> <![if IE 6]>Para o IE 6<![endif]> <![if gte IE 5]>Para verses mais atuais que o Internet Explorer 5 inclusive<![endif]> <![if lte IE 5.5]>Para verses mais antigas que o Internet Explorer 5.5 inclusive<![endif]> <![if lt IE 6]>Para verses mais antigas que o Internet Explorer 6 inclusive<![endif]>

Fonte: http://enternauta.com.br/ferramentas-parasites/diferentes-estilos-css-para-internet-explorer-efirefox/

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

19

07

Instalando um Layout no Joomla Parte II


do Joomla que a posio ir aparecer.

Na aula de hoje iremos recortar nosso segundo layout do Joomla! E esse layout tem algo especial. Trata-se de um layout institucional fora daqueles padres do Joomla de contedo principal e duas chamadas de texto embaixo, sempre da mesma forma. Agora no, nossa capa ser diferente. E somente a capa ter esse layout, as pginas internas sero diferentes, mantendo somente a mesma identidade visual.

Como incluir posies dentro de artigos


Uma tag muito til a que chama uma posio dentro de um artigo. Dessa forma voc poder chamar mdulos do Joomla no meio do contedo. Um cadastro de emails por exemplo ou uma enquete. Mas a grande utilidade desse recurso poder criar o seu mdulo e incluir no artigo. Para que isso seja possvel, voc ir at o gerenciador de artigos, criar ou editar algum artigo existente e l no meio, onde voc quiser, incluir a seguinte tag: {loadposition nome-da-posio} Exemplo, voc quer chamar a posio user1 dentro do artigo? Ento basta colocar onde voc quiser dentro do artigo a seguinte tag: {loadposition user1}

Como criar posies


No Joomla temos por default algumas posies j criadas como left, banner e user1. Mas voc pode criar a posio que bem entender. No Joomla 1.0 aparentemente parece mais fcil, basta ir em site > gerenciador de tema > posies Mas agora no Joomla 1.5 essa tarefa ocorre direto no templateDetails.xml. Uma das vantagens que cada tema ter suas posies especficas e ao desinstalar o tema, a posio tambm desinstalada. Para incluir a posio desejada, bata abrir <positions>, colocar <position>nome da posio, fecha </position> e fecha </positions> como no exemplo abaixo:
<positions> <position>mainmenu</position> <position>logo</position> <position>banner</position> <position>creditos</position> <position>chamada01</position> <position>chamada02</position> <position>chamada03</position> <position>chamada04</position> </positions>

O artigo fazendo parte da composio do layout


Nessa aula vimos como utilizar os artigos a nossa favor na hora de construir um layout para Joomla, sobretudo na capa. Utilizando a combinao artigo + loadposition + css possvel criar uma srie de possibilidades de capa com o Joomla. Como sabemos que o Joomla alimenta o site com contedo na rea de artigos, ou mais precisamente no <jdoc:include type=component>, podemos incluir no artigo que aparecer na capa algumas divs e ids, fazendo com que seu layout se integre ao design principal. A dica desabilitar o editor visual do seu navegador para que o mesmo no suje o seu cdigo e incluir ali diretamente o html, com divs chamando ids ou
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

Caso voc j tenha instalado o tema e esqueceu ou queira criar uma nova opo, basta ir no FTP , na pasta do seu tema e editar templateDetails.xml, incluindo sua posio. Assim basta dar reload no gerenciador

20

07

Instalando um Layout no Joomla - Parte II

classes. Dessa forma, no template.css voc poder dizer que o artigo que est na capa tenha um background diferente e modificar o que quiser no que diz respeito a layout. Incluindo nessa capa a tag loadposition, voc poder criar mdulos especficos como chamadas e imagens que necessitem de atualizao e public-los na capa do site, dentro do artigo. Dessa forma qualquer pessoa poder atualizar trechos do site, bastando editar os mdulos. Dessa forma acredito que voc j est comeando a visualizar inmeras possibilidades de criao. Na prxima aula iremos fazer a pgina interna, diferente da pgina principal mas mantendo sua identidade visual. Abordaremos tambm os parmetros do template, uma funo muito til que novidade no Joomla 1.5. Para o alto e Avante!

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

21

08
Parmetros

Pgina Interna & Parmetros


grupo chamado Parmetros contendo um par de campos denominados Variao de Cor, Variao de Plano de Fundo e Largura. Estes parmetros so default do tema, neste caso, eles controlam o esquema de cores e largura do template. Os Parmetros de Template permitem que o administrador possa ajustar o comportamento de um modelo por meio de um formulrio no gerenciamento do tema. Para acrescentar essas funcionalidades ao seu tema necessrio realizar trs etapas:
? Adicionando um elemento <param> a seo

Na aula de hoje iremos criar a pgina interna de nosso segundo layout do Joomla! A idia fazer uma pgina com formatao diferente da capa, mas conservando os itens importantes de identificao, o logotipo e as posies dos menus.

Depois de realizar essa rdua tarefa, irei apresentar a vocs o Parmetros, uma nova funo que o Joomla 1.5 nos trouxe.

O gerenciador de temas sempre foi uma das mais poderosas funcionalidades do Joomla, mas antes do Joomla 1.5 era difcil para as empresas de web design flexibilizar seus layouts. Por exemplo, um template com vrios esquemas de cores disponveis, para alterar essas cores era necessrio ativar arquivos de css, apontando para pastas especficas para cada cor. Alguns webdesigners criavam seus prprios mtodos para permitir que o administrador do site pudesse alterar cores e outras funcionalidades de forma mais simples, mas mesmo assim, muitas vezes o administrador se via a mexer no cdigo ou fuar no FTP para alterar uma ou outra coisa. Isso tudo mudou com a nova verso 1.5 do Joomla que nos trouxe os parmetros de template. Na verdade, seria mais correto chamar apenas de parmetros j que sua funcionalidade genrica para todos os tipos de extenso: componentes, mdulos, plugins e templates. Nesta aula voc aprender como criar e utilizar parmetros em seus templates. Voc vai aprender a criar o seu prprio parmetro personalizado para atender s suas necessidades especficas. Conhecimento em PHP vai lhe ajudar bastante. Para ver um exemplo de parmetros de template em ao, v em Extenses > Administrar Tema e clique sobre o template rhuk_milkyway. Aps selecionar clique em [Editar]. Nessa tela voc ver que existe um

<params> do templateDetails.xml
? Criando o arquivo params.ini que ir armazenar o

valor atual do parmetro e dever ficar na pasta raiz do template.


? Adicionando cdigo PHP no arquivo index.php para

recuperar o valor atual do parmetro e agir sobre ela.

Definindo um parmetro no templateDetails.xml


O templateDetails.xml est sempre na pasta raiz do template. Por exemplo, para o template Beez o caminho completo ser algo parecido com: [Joomla] / templates / Beez / templateDetails.xml Localize o elemento <params>, geralmente no final do arquivo. Se no houver nenhum elemento <params> voc precisar adicionar uma. Deve ser adicionado abaixo do <install>. No se esquea de fechar o elemento com um </ params>. Para cada parmetro que pretende definir, dever ser adicionado um elemento <param>. Esse elemento tem um nmero de argumentos obrigatrios e opcionais que dependem do tipo de argumento. Os
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

22

08

Pgina Interna & Parmetros

nicos argumento obrigatrio o type e name mas default, description e label, so comuns maioria dos tipos de parmetro. Estes argumentos obrigatrios / comuns so os seguintes:
? Type especifica o tipo de formulrio HTML utilizado no Parmetros na tela do administrador para permitir ao utilizador alterar o valor do parmetro. ? Name o nico nome do parmetro. Voc ir referir-

<option value="0">hide</option> <option value="1">show</option> </param> </params>

Na tela de administrao do tema, aparecer assim:

se este nome ao recuperar o valor do parmetro no cdigo do template. Os seguintes argumentos so opcionais, mas so comuns a quase todos os tipos de parmetro: Default o valor padro do parmetro. ?
? Description o texto que ser exibido como uma dica para o campo no Parmetros na tela do administrador. ? Label o ttulo do campo que ser mostrado ao

Os valores escolhidos nos parmetros sero gravados no arquivo param.ini, que est na pasta raiz do template. Nota: caso aparea a mensagem na caixa de parmetros algo como Protegido ou Unwritable em vermelho, verifique se existe o arquivo params.ini na pasta raiz do seu template. Caso no exista, basta criar um arquivo texto vazio com o nome params.ini. Voc no precisar edit-lo, o Joomla s ir utilizar esse arquivo para gravar os dados selecionados no gerenciador de Parmetros. Tendo definido um parmetro no arquivo templateDetails.xml e guardado um valor para ela no params.ini, voc dever colocar no seu index.php uma funo PHP recuperando o valor gravado em params.ini, seguindo o padro: <?php $myParam = $this->params->get( 'parameterName' ); ?> Por exemplo, suponha que o seu template tem um parmetro chamado templateColour que assume vrias opes de valores que determinam o esquema de cor a ser utilizado. As cores so normalmente definidas em arquivos CSS. O seguinte cdigo recupera o parmetro, em seguida, adiciona o estilo adequado para tornar a pgina com o esquema de cores escolhido.
<?php $tplColour = $this->params->get( 'templateColour' ); $this->addStyleSheet( $this->baseurl . '/templates/' . $this>template . '/css/' . $tplColour .'.css' ); ?>

usurio na tela de Parmetros do template. Os argumentos opcionais dependem do tipo de parmetro. Se voc for programador, tambm possvel criar o seu prprio parmetro personalizado. Nesse caso recomendo a documentao avanada do Joomla em http://docs.joomla.org/ Creating_custom_XML_parameter_types Por exemplo, o cdigo XML a seguir mostra uma seo <params> com dois parmetros, um para uma lista drop-down do template, o outro para um boto que permitir ao usurio mostrar ou ocultar uma mensagem de copyright.
<params> <param name="templateColour" type="list" default="blue" label="Template Colour" description="Choose the template colour."> <option value="blue">Blue</option> <option value="red">Red</option> <option value="green">Green</option> <option value="black">Black</option> </param> <param name="authorCopyright" type="radio" default="1" label="Author Copyright" description="Show/Hide author copyright.">

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

23

08

Pgina Interna & Parmetros

Para outro exemplo, suponha que o seu template tenha um parmetro chamado authorCopyright que assume o valor 0 para ocultar uma copyright, ou 1 para mostrar isso. O seguinte cdigo recupera o parmetro:
<?php if ($this->params->get( 'authorCopyright' )) : ?> <div class="copyright"> Copyright &copy; 2008 Fat Pigeon Templates </div> <?php endif; ?>

No caso de nossa vdeo aula, recuperamos o valor escolhido em parmetros, alterando a cor do topo do layout, bastando utilizar a seguinte funo PHP:
<body class="bg_<?php echo $this->params>get('backgroundVariation'); ?>">

No caso, determinei no XML que backgroundVariation poderia receber dois valores, o blue ou o red. Quando o usurio escolhesse um dos dois, esse nome seria recuperado no body, como um sufixo de uma classe. Portanto, quando o usurio escolhesse blue, este nome iria para a classe de body, substituindo a funo php e ficando class=bg_blue. Ento bastou criar a regra para .bg_blue dentro do CSS do template. Nas prximas aulas iremos trabalhar mais com parmetros em nosso novo layout para Joomla. Aguardem! Para o alto e Avante!

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

24

09

Module Chrome
O Mdulo Chrome
Enquanto montamos o layout do nosso terceiro trabalho, j vou abordar atravs de nossa aula texto uma novidade da verso 1.5 do Joomla e que, se vocs notarem no vdeo, utilizei junto com nossa tag jdoc:include. Trata-se do Module Chrome. O Module Chrome foi inventado para dar uma certa quantidade de controle sobre a forma e as tags de sada do mdulo. Reconhecemos o Module Chrome atravs do seguinte atributo: <jdoc:include type="modules" name="user1" style="custom" /> Onde custom poder ser rounded, table, horz , xhtml, outline e none. Atravs do Module Chrome possvel determinar o tipo e quantidade de pr-HTML inserido antes, depois ou em torno da sada de cada mdulo, usando estilo CSS. Dessa forma possvel criar mdulos com canto arredondados sem necessidade de background. Criando um Module Chrome Voc pode facilmente criar um estilo de Chrome para utilizar em seus mdulos, diferente dos 6 estilos padro do Joomla. Para isso basta editar o module.php. ATENO: Recomendo criar um backup do module.php antes de brincar com ele. Vai que voc brinca, brinca e no sabe mais o lugar de cada coisa? ;) Para encontrar o module.php basta ir na pasta do seu joomla e entrar nas seguintes pastas: administrator > templates > system > html. Pronto, l estar o module.php
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

Hoje iremos criar um site pra valer. E com todo cuidado do mundo pois o site do professor que vos fala. Tem que sair tudo direitinho por isso fiz o nosso terceiro layout com todo carinho, cheio de detalhes ali e acul, para atender as minhas necessidades e objetivos.

Trata-se de um site estilo portal, com diversos mdulos e sees. Seu objetivo apresentar meu trabalho, os servios e cursos. Tem tambm o carter de venda pois atravs do site que o cliente entrar em contato comigo desejando o servio de criao. No caso do Cursos a idia redirecionar para o site especfico de cursos. Vocs vero que ser um trabalho pesado, porm no ser difcil. S ir demandar tempo. Assim, atravs do meu novo site irei explicar alguns detalhes na implementao de um layout para Joomla e novidades da verso 1.5. Em nossa primeira aula sobre o trabalho 3 de nosso curso irei apresentar o layout j pronto para no perdermos tempo. Vocs iro notar que o CSS bem extenso devido a complexidade um pouco maior em relao aos layouts anteriores. Por essa razo j apresento o CSS pronto e a estrutura em XHTML tambm, porm irei comentar cada linha do cdigo produzido. Falaremos muito de CSS e mais uma vez mostrarei a criao de mdulos que ajudaro na composio do layout. A partir da, na aula 10, iremos focar em algumas funcionalidades do Joomla. O desafio ser fazer com que a coluna que consta o type=component mude de tamanho nas pginas internas, crescendo largura e altura quando as colunas da esquerda ou direita no estiverem presentes. Alm disso, nas aulas seguintes irei mostrar a instalao e modificao de layout de alguns componentes importantes para esse layout.

25

09

Module Chrome

Nele voc ir encontrar algo como cdigo abaixo:


* xhtml (divs and font headder tags) */ function modChrome_xhtml($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class="module<?php echo $params>get('moduleclass_sfx'); ?>"> <?php if ($module->showtitle != 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif; }
/*

Note que as tags acima exatamente a sada html do estilo xhtml. Voc poder alterar essa tag como quiser e incluir at algum CSS especfico. Se voc entende PHP , voc estar feito. ;) Divirta-se! E na prxima aula vocs iro ver a difcil tarefa de criar uma pgina interna para o site do profess! Fique a, no mude de canal pois daqui a pouco a gente volta!

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

26

10

Count Modules
Dessa forma temos:
<?php if($this->countModules('colesq and coldir') == 0) ; if($this->countModules('colesq') == 0)"; if($this->countModules('coldir') == 1) "; if($this->countModules('colesq and coldir') == 1); ?>

Na aula de hoje iremos conhcer uma funo muito importante, o count modules. Ser atravs dele que iremos montar uma pgina interna com diagramao diferenciada, mesmo diante de um index.php com tantas colunas e um type=component presente num espao to pequeno.

Como fazer com que a coluna do meio aumente, pegando o espao das demais colunas que no estiverem ativadas? Vou responder essa dvida no nosso vdeozito de hoje. O countModules um mtodo que pode ser utilizado de diversas formas, atravs da contagem de mdulos. Um exemplo: para determinar o nmero total de mdulos ativados nas posies user1 e user2 basta chamar a seguinte funo: $this ->countModules ( 'user1 + user2' ); Alm dos operadores aritmticos ( -, +, etc ), voc poder utilizar os operadores lgicos, and e or. Um exemplo do uso de operadores lgicos. Para determinar se o user1 e o user2 possuem mdulos ativados, basta usar a funo: $this -> countModules ( 'user1 and user2' ); A partir dessa contagem possvel definir condies, atravs de valores. Veja a seguinte situao que descrevo em nossa vdeo aula. Temos trs colunas: colesq, colmeio e coldir. Meu desejo que se nenhum mdulo estiver ativado na coluna colesq, o colmeio aumente sua largura, preenchendo o espao da coluna colesq. O mesmo dever ocorrer caso no seja utilizado nenhum mdulo em coldir. Para isso, primeiro necessrio contar os mdulos e aplicar valores a elas.

A partir da iremos criar condies. Se colesq e coldir estiverem sem mdulo algum ( == 0 ) ento quero que $contentwidth seja igual a "100". Se colesq estiver sem mdulo e somente coldir tem mdulos habiltados ( colesq == 0 ) ento quero que $contentwidth seja igual a "-dir". J se coldir no contiver nenhum mdulo ativo e colesq sim, ento o $contentwidth dever ser "-esq". Agora, se tivermos mdulos em coldir e colesq, ento $contentwidth dever ser "-meio". Dessa forma, a condio ficar assim:
<?php if($this->countModules('colesq and coldir') == 0) $contentwidth = "100"; if($this->countModules('colesq') == 1) $contentwidth = "-dir"; if($this->countModules('coldir') == 1) $contentwidth = "-esq"; if($this->countModules('colesq and coldir') == 1) $contentwidth = "-meio"; ?>

Esses valores que passei em $contentwidth servir para compor o nome da regra CSS de colmeio. Veja como chamar esses valores para o ID da div colmeio:
<div id="colmeio<?php echo $contentwidth; ?>">

Note que o valor que dei em $contentwidth so sufixos. Logo, se tivermos mdulos na coluna da esquerda ( colesq ), o nome do ID da div passar a ser colmeio-dir. Se tivermos mdulos na coldir, o nome do ID ser colmeio-esq. Se existir mdulos ativados nas duas colunas, o nome do ID ser comeio-meio. E se no existir nenhum mdulo em colesq e coldir, ento o nome do ID passar a ser colmeio100.
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

27

10

Count Modules

Pronto! Dessa forma voc poder criar regras CSS diferentes para cada diagramao. No caso do nosso exemplo, se a coluna da esquerda no contiver nenhum mdulo bastar criar a regra CSS colmeio-esq dizendo que sua largura dever ser maior.

Sumindo com as divs


Como sumir com o html referente as divs das colunas que no esto sendo visualizados no layout? Isso fcil de resolver. Utilizando o nosso exemplo, para sumir com o html das colunas coldir e colesq caso essas no tenham mdulos habilitados, basta utilizar a seguinte funo antes de cada div:
<?php if($this->countModules('colesq')) : ?> <div id="colesq"> <jdoc:include type="modules" name="colesq" style="xhtml" /></div> <?php endif; ?> <?php if($this->countModules('coldir')) : ?> <div id="coldir"> <jdoc:include type="modules" name="coldir" style="xhtml" /></div> <?php endif; ?>

Dessa forma, ao ver o cdigo fonte da html gerada pelo index.php e Joomla, as tags referentes a colesq e coldir desaparecero caso no tenha nanhum mdulo habilitado dentro delas. ;) Bem, agora vamos instalar alguns componentes nesse layout? Bora? Na prxima aula irei instalar componentes interessantes e irei mostrar como adapt-los ao nosso layout Joomla. Aguardem!

Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

28

11

Componentes
pasta tmpl contendo os templates com o cdigo de sada. Basicamente html + php. E x p e r i m e n t e e n t r a r e m components\com_easybook\views\easybook\tmpl e alterar o cdigo de default_header.php como fao em nossa vdeo-aula. Atravs desse arquivo possvel acrescentar divs ao componente, bem como atribuir ids, classes e alterar posicionamentos. Enfim, possvel alterar todo o seu layout. A funcionalidade de alterao de template prov um poderoso mecanismo para customizar o site Joomla atravs do seu template. Voc pode criar templates de sada que sejam focalizados nos SEO (mecanismos de busca), acessibilidade ou necessidades especficas de um cliente. Experimente modificar os arquivos contidos na pasta tmpl de outros componentes e mdulos. Mas no esquea de fazer um backup antes. ;) Encerramos ento nosso terceiro trabalho. Estamos chegando pertinho do final do curso mas aguarde a prxima aula pois irei trazer alguns presentinhos virtuais pra vocs, queridos alunos!

Na aula de hoje iremos abordar uma das novidades do Joomla 1.5 que a facilidade de alterar o layout de um componente atravs de arquivos de template. O mesmo poder ser aplicado aos mdulos. Na vdeoaula escolho dois componentes para instalar no meu site, uma fotogaleria e um mural de recados. Vocs vero que a fotogaleria me d uma srie de possibilidades diretamente pelo seu gerenciador. Porm o mesmo no ocorre com o componente de mural. Como resolver essa questo? Simples, senta, senta que l vem a histria!

Estrutura de Template ( Componentes e Mdulos )


Normalmente voc ir encontrar o template do componente ou mdulo dentro da pasta principal do componente, em uma pasta chamada /tmpl/. Por exemplo: modules/mod_poll/tmpl modules/mod_newsflash/tmpl components/com_login/views/login/tmpl components/com_content/views/section/tmpl A estrutura bsica para todos os componentes e mdulos a seguinte: visualizao -> layout -> templates

Alterando o Layout do Componente


Os componentes funcionam quase da mesma maneira que os mdulos, exceto que existem muitas visualizaes associadas com muitos componentes. Por exemplo, se olharmos na pasta com_easybook encontraremos uma pasta chamada views (visualizaes). Nessa pasta encontraremos mais duas, uma chamada easybook e outra entry. Em ambas existem a
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br

29

Este material protegido pela lei do direito autoral. Todos os direitos reservados. Nenhuma parte desta publicao pode ser reproduzida, transmitida, modificada, distribuda, por qualquer meio, seja eletrnico, mecnico ou fotocpia, sem expressa autorizao do autor Bruno vila ou da empresa vila Comunicao. Esta apostila faz parte integrante do Curso Online Design para Joomla e no pode ser comercializado.