Apostila Completa Curso Joomla

APOSTILA
DO CURSO DESIGN PARA JOOMLA!

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
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.
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
s e m a u x l i o d o W a m p s e r v e r :
Aps a instalao do servidor, abra seu navegador.
Digite na URL simplesmente localhost. Veja se abriu
uma pgina semelhante a pgina abaixo:
http://www.guiadohardware.net/tutoriais/apache-
php-mysql-windows/
2
Todos os Direitos Reservados. Bruno vila - http://cursos.brunoavila.com.br
01
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!
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 \ (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:
;
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:
;
4. Baixe o Joomla Verso 1.5 Full Package no seguinte
endereo: ;
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 ;
wamp\www
http://localhost/nome-da-pasta
http://localhost/nome-da-
pasta
http://www.joomla.org/download.html
http://localhost/joomla
7. Aparecer a tela de instalao. Escolha o idioma e
clique em Next/Prximo.
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
3
01
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;
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;
13. Pronto. Aparecer a tela final parecido com a tela
abaixo:
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:
15. Para entrar na administrao, abra o navegador e
coloque o endereo
. Aparecer a tela abaixo pedido o
usurio (admin) e senha:
http://localhost/joomla/
administrator
4
01
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!
5
02
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.
Front-End
Posies
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 back-
end, 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
6
02Um tour pelo Joomla!
configuraes importantes da primeira pgina.
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.
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 texto-
chamada 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.
7
02Um 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 .
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

Back-End

Para acessar o back-end do Joomla basta acessar o
[Nome de Domnio]/administrador/. No nosso caso
seria
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.
http://extensions.joomla.org/
http://extensions.joomla.org/
http://localhost/joomla/administrator
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 O elemento escolhido arquivado
Novo Criao de um novo elemento.
Editar Edio de mdulo, componente ou template.
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.
Copiar O elemento selecionado copiado para outra seo ou
categoria.
Salvar O elemento selecionado salvo e a tela fechada.
Aplicar As alteraes so guardadas e a tela continua aberta.
Cancelar A edio terminada sem qualquer alterao a ser salvo.
Pr-
Visualizao
Visualize o site, notcia ou pgina antes de salvar ou
publicar.
Enviar O arquivo escolhido enviado para o servidor.
Ajuda Voc redirecionado para a ajuda do Joomla atravs do
site do prprio Joomla
Padro O elemento selecionado passa a ser o padro.
8
03
Criando um Layout
para Joomla!
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 mont-
lo, 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.
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.
9
03Criando 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 ... ;)
10
03Criando um layout para Joomla!
11
04
Recortando o Layout
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
i nf ormaes i mportantes 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-
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, recomenda-
se 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
12
04Recortando 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
p o d e m s e r u t i l i z a d o s n o s e u C S S :
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
13
05
Instalando um Layout
no Joomla!
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. Trata-
se 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.
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
r e l ac i onadas ao t e mpl at e ( e x c e t o o
template_thumbnail.png )
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>
14
05Instalando 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.
<cr eat i onDat e>J anei r o 2009</ cr eat i onDat e>
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
<filename>images/logo.png</filename>
E para finalizar todo o XML, coloque </install>
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
Coloque aqui todos os arquivos contidos na pasta do template.
C a d a a r q u i v o d e v e e s t a r e n t r e a s t a g s
<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
Usado em:
active mdulos
article_separ artigos
author Autor de artigo
bannerfooter mdulo de banner
bannergroup mdulo de banner
bannerheade mdulo de banner
banneritem mdulo de banner
blog contedo de blog
blog_more contedo de blog
blogsection contedo de blog
breadcrumbs mdulo breadcrumb ou pathway
button vrios
buttonheadin vrios
clr vrios
componenthe componente
contedo_em contedo
15
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!
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
posi o no HTML bast a ut i l i zar a t ag
<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:
contedo_rati contedo
contedo_vot contedo
contedodes contedo
contedohea contedo
contedopag contedo
contedopan contedo
contedopan contedo
contedotoc contedo
createdate contedo
created-date contedo
current Menus verticais e horizontais no modo herana
form-login mdulo de login
modlgn_pass mdulo de login
form-login- mdulo de login
form-login- mdulo de login
modlgn_reme mdulo de login
hasTip edio
input formulrios
inputbox formulrios
latestnews mdulo de ltimas notcias
mainlevel Menus verticais e horizontais
menu Menus verticais e horizontais
modifydate data e hora modificadas de artigos
moduletable Mdulos em geral
mosimage imagens
mostread Mdulo de leia mais
newsfeed news feeds
pagenav navegao de pgina
pagenav_nex navegao de pgina
pagenav_pre navegao de pgina
pagenavbar navegao de pgina
pagenavcoun navegao de pgina
pagination Numerao de pgina
pathway mdulo breadcrumb ou pathway
pollstablebor Mdulo de enquete
readon Link de leia mais
searchbox Mdulo de busca
search Mdulo de busca
searchintro Mdulo de busca
sections contedo
sectiontable_f contedo
sectiontablee contedo
sectiontablee contedo
sectiontablefo contedo
sectiontableh contedo
small Fonte pequena
sublevel Menus verticais e horizontais no modo subnivel
title Titulo de mdulos
wrapper Mdulo wrapper
16
<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:
<?php mosShowHead(); ?>
<?php mosLoadModules ( 'user4' ); ?>
<?php mosPathWay(); ?>
<?php mosLoadModules ( 'left' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'right' ); ?>
<?php mosLoadModules ( 'footer' ); ?>
<html><head>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="780" border="1">

<tr>

< t d c o l s p a n = " 2 " h e i g h t = " 8 9 "
bgcolor="#F5C228"> </td>

<t d wi dt h=" 178" hei ght =" 120" r ows pan=" 2"
bgcolor="#FFCC33">
</td>
</tr>
<tr>

<td colspan="2" height="33" bgcolor="#FFCC33">
</td>
</tr>

<tr>

<td width="197" height="233" bgcolor="#F5EE28"
valign="top">
</td>

<td width="389" height="233" valign="top">
</td>

<td width="178" height="233" bgcolor="#FFFF33"
valign="top">

</td> </tr>

<tr bgcolor="#FFCC33">

<td colspan="3" height="40">
</td>
</tr>
</table>
</body></html>
17
Funo Joomla 1.0 Joomla 1.5
Inclui os metadados do Joomla em
<head>
<?php mosShowHead(); ?> <jdoc:include type=head>
Determina a posio onde ser
carregado os mdulos
<?php mosLoadModules (
'position' ); ?>.
Exemplo:
<?php mosLoadModules ( 'left' );
?>
<jdoc:include
type=modulesname=position>
Exemplo:
<jdoc:include
type=modulesname=left>
Migalha de Po (Breadcrumbs) <?php mosPathWay(); ?> <jdoc:include
type=modulesname=breadcrumb
s>
rea de Contedo Dinmico, corpo
do site, parte principal.
<?php mosMainBody(); ?> <jdoc:include type="component">
Comparativo das principais Tags entre Joomla 1.0 e 1.5
18
06
Adaptando o Design
Joomla em outros navegadores
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
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>
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:
Fonte:

<! [ i f I E] >Par a t odas as ver ses do I nt er net
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]>

http://enternauta.com.br/ferramentas-para-
sites/diferentes-estilos-css-para-internet-explorer-e-
firefox/
19
07
Instalando um Layout
no Joomla Parte II
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 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:
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
<positions>
<position>mainmenu</position>
<position>logo</position>
<position>banner</position>
<position>creditos</position>
<position>chamada01</position>
</positions>
do Joomla que a posio ir aparecer.
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}
O ar t i go f azendo par t e 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
20
07Instalando 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.
21
08
Pgina Interna
& Parmetros
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.
Parmetros
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
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
<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.
Def i ni ndo um par met r o 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] /
t empl at es / Beez / t empl at eDet ai l s. 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
22
08Pgina 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-
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:
?
?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
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.
Default o valor padro do parmetro.
<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.">
<option value="0">hide</option>
<option value="1">show</option> </param>
</params>
Na tela de administrao do tema, aparecer assim:
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' );
?>
23
08Pgina 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:
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:
N o c a s o , d e t e r mi n e i n o X ML q u e
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!
<?php if ($this->params->get( 'authorCopyright' )) : ?>

<div class="copyright">
Copyright © 2008 Fat Pigeon Templates
</div>
<?php endif; ?>
<body cl ass=" bg_<?php echo $t hi s- >par ams-
>get('backgroundVariation'); ?>">
24
09
Module Chrome
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.
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
25
09Module Chrome
Nele voc ir encontrar algo como cdigo abaixo:
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!
* 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;
}
/*
26
10
Count Modules
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:
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:
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.
$this countModules ( 'user1 + user2' );
$this -> countModules ( 'user1 and user2' );
->
Dessa forma temos:
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:
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:
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.
<?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);
?>
<?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";
?>
<div id="colmeio<?php echo $contentwidth; ?>">
27
10Count 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:
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!
<?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; ?>
28
11
Componentes
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 vdeo-
aula 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:
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
modules/mod_poll/tmpl
modules/mod_newsflash/tmpl
components/com_login/views/login/tmpl
components/com_content/views/section/tmpl
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!
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.

Apostila Completa Curso Joomla

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Completa Curso Joomla

Enviado por

Direitos autorais:

Formatos disponíveis

APOSTILA

DO CURSO DESIGN PARA JOOMLA!

Você também pode gostar