Joomla PDF

Joomla!
Joomla!
Todos os direitos reservados para Alfamdia Prow.
AVISO DE RESPONSABILIDADE
As informaes contidas neste material de treinamento so distribudas NO ESTADO EM

QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as
precaues tenham sido tomadas na preparao deste material, a Alfamdia Prow no tm
qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instrues contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.
12/2011 Verso 1.3
Alfamdia Prow
http://www.alfamidia.com.br
2 2011 Alfamdia Prow

Joomla!
UNIDADE 1 JOOMLA! PARA WEB DESIGNERS......................................................................................................... 5

1.1 SOBRE O CURSO ............................................................................................................................... 5
1.2 ESTRUTURA DO CURSO .................................................................................................................... 5
UNIDADE 2 CONCEITOS............................................................................................................................................... 6
2.1 O QUE CMS................................................................................................................................... 6
2.2 TECNOLOGIAS ENVOLVIDAS ............................................................................................................. 6
2.3 COMPARATIVOS DE MTODOS DE CRIAO DE UM WEB SITE: TRADICIONAL X JOOMLA .................. 6
2.4 HOSPEDAGEM DE SITES COMPATVEL COM JOOMLA ......................................................................... 7
UNIDADE 3 INSTALANDO O JOOMLA! NO SERVIDOR WEB ................................................................................... 8
3.1 BAIXANDO O APLICATIVO JOOMLA! ATUALIZADO............................................................................ 8
3.2 CONFIGURANDO O BANCO DE DADOS NO PROVEDOR DE HOSPEDAGEM. ........................................... 9
3.2.1 Criando o banco de dados .......................................................................................................... 9
3.2.2 Criando o usurio do banco de dados ...................................................................................... 10
3.2.3 Associando o Banco de dados com o usurio criado ............................................................... 11
3.3 ENVIANDO OS ARQUIVOS JOOMLA! PARA O SERVIDOR WEB. .......................................................... 12
3.4 UTILIZANDO SERVIDOR LOCAL PARA INSTALAO ........................................................................ 14
3.5 INSTALANDO SEU SITE EM JOOMLA!. .............................................................................................. 15
UNIDADE 4 UTILIZAO E CONFIGURAES APS A INSTALAO ................................................................ 21
4.1 ACESSO AO SITE ............................................................................................................................. 21
4.2 ACESSO A ADMINISTRAO DO JOOMLA! ...................................................................................... 22
4.3 PACOTE DE TRADUO .................................................................................................................. 22
UNIDADE 5 ADMINISTRAO BSICA DO JOOMLA .............................................................................................. 24
5.1 ADMINISTRAO DE USURIOS ..................................................................................................... 24
5.2 ADMINISTRAO DE MDIAS .......................................................................................................... 24
5.3 CONFIGURAO GLOBAL ............................................................................................................... 25
5.4 MENUS ........................................................................................................................................... 25
5.5 CONTEDO ..................................................................................................................................... 26
5.6 CONCEITOS JOOMLA! ..................................................................................................................... 26
5.6.1 Componentes ............................................................................................................................ 26
5.6.2 Mdulos .................................................................................................................................... 27
5.6.3 Plugin ....................................................................................................................................... 27
5.6.4 Idiomas ..................................................................................................................................... 27
5.7 MENU COMPONENTES .................................................................................................................... 27
5.7.1 Fonte de Notcias Externas ....................................................................................................... 28
5.7.2 Formulrio de Contatos ........................................................................................................... 29
5.8 EXTENSES .................................................................................................................................... 30
5.8.1 Instalar e Desinstalar extenses ............................................................................................... 30
5.9 GERENCIADOR DE MDULO ........................................................................................................... 31
5.10 GERENCIADOR DE PLUGIN ............................................................................................................. 32
5.11 GERENCIADOR DE TEMAS .............................................................................................................. 32
UNIDADE 6 CONTEDO DINMICO: ARTIGOS........................................................................................................ 33
6.1 SESSES ......................................................................................................................................... 33
6.2 CATEGORIAS .................................................................................................................................. 34
6.3 CRIANDO ARTIGOS ......................................................................................................................... 34
UNIDADE 7 MENUS ..................................................................................................................................................... 37

Joomla!
7.1 INTEGRAO ARTIGO/MENU ......................................................................................................... 37

7.2 MENU EM LAYOUT DO BLOG DE CATEGORIA ................................................................................. 38
7.3 MENU EM LAYOUT PADRO DE CATEGORIA .................................................................................. 40
7.4 MENU DO COMPONENTE CONTATO ................................................................................................ 40
7.5 SUBMENUS ..................................................................................................................................... 41
UNIDADE 8 EXTENDENDO O JOOMLA!.................................................................................................................... 42
8.1 EXTENSES TEIS .......................................................................................................................... 42
8.1.1 Comentrios ............................................................................................................................. 42
8.1.2 E-commerce .............................................................................................................................. 42
8.1.3 Galerias de Imagem.................................................................................................................. 43
8.1.4 Formulrios .............................................................................................................................. 43
8.1.5 Agenda/Calendrio ................................................................................................................... 43
8.1.6 Slideshow .................................................................................................................................. 43
8.1.7 Google Maps ............................................................................................................................ 43
8.1.8 Newsletter ................................................................................................................................. 44
8.2 BUSCANDO TEMAS ......................................................................................................................... 44
UNIDADE 9 UTILIZANDO UM TEMPLATE PRPRIO EM CSS ................................................................................. 45
9.1 CRIANDO UM TEMPLATE ................................................................................................................ 45
9.1.1 O arquivo templateDetails.xml ................................................................................................. 46
9.1.2 O arquivo index.php antes dos cdigos Joomla! ...................................................................... 48
9.1.3 O arquivo CSS (Cascading Style Sheets) .................................................................................. 49
9.1.4 O arquivo index.php depois dos cdigos Joomla! .................................................................... 52
9.1.5 Melhorias no arquivo CSS ........................................................................................................ 54
UNIDADE 10 DICAS TEIS ...................................................................................................................................... 56
10.1 OTIMIZANDO O SITE JOOMLA! PARA OBTER MAIS ACESSOS ............................................................ 56
10.2 VINCULANDO O JOOMLA! COM O BANCO DE DADOS ...................................................................... 57
UNIDADE 11 NOVAS VERSES ................................................................................................................................... 57
11.1 VERSES NOVAS DO JOOMLA!........................................................................................................ 57

Joomla!
Unidade 1
Joomla!
1.1 Sobre o Curso
O Curso Joomla! apresenta aos alunos conceitos envolvendo CMS - Content
Management Systems, (Sistema de Gesto de Contedos, em portugus), sistema
este que o Joomla!, como software livre, lder mundial na rea.
Alm de compreender noes importantes, como instalao e gerenciamento do
Joomla!, o aluno aprender como utilizar componentes que se fazem necessrios
para gerir um web site sem necessidade de programao e tambm a adaptar um
layout prprio a este sistema. Aprender tambm a realizar toda a instalao do
sistema e configurao para instarar o banco de dados, mesmo sem ter
conhecimento na rea de programao.
1.2 Estrutura do Curso

Primeiramente trabalharemos com os conceitos principais sobre CMS e Joomla!.
As unidades seguintes abordam tpicos como: comparativo entre mtodos
tradicionais e Joomla! para criao de web site dinmico, instalao de Joomla!
em servidor web, pacotes de traduo, templates para Joomla!, componentes, entre
outros.
O curso traz exerccio prtico para uma melhor fixao do contedo.
Durante o transcorrer de todo o curso o aluno aprender a trabalhar de forma
autnoma no desenvolvimento de web site com Joomla!.

Joomla!
Unidade 2
Conceitos
2.1 O que CMS
Um Sistema de Gesto de Contedo - SGC, (em ingls Content Management
Systems - CMS), um sistema gestor de contedo para web sites, portais e
intranets, que integra ferramentas necessrias para criar, editar e inserir contedos
em tempo real, sem a necessidade de programao de cdigo, cujo objetivo
estruturar e facilitar a criao, administrao, distribuio, publicao e
disponibilidade da informao. A sua maior caracterstica a grande quantidade de
funes presentes.
Podemos dizer que um CMS um framework, um esqueleto de web site pr-

programado, com recursos bsicos e de manuteno e administrao j
prontamente disponveis.
O Joomla! um exemplo de CMS, utilizado para criao de web sites dinmicos,

com possibilidade de insero de componentes das mais variadas funes, quase
sempre gratuito.
2.2 Tecnologias envolvidas

O Joomla! um projeto de cdigo aberto (Licena GNU/GPL), que por usa vez
utiliza a linguagem de programao PHP e banco de dados MySQL. O Joomla! foi
desenvolvido do CMS Mambo.
2.3 Comparativos de mtodos de criao de um web

site: tradicional X Joomla
A grande necessidade de um webdesign atender uma demanda crescente na rea:
Dinamismo para seu web site. Quando necessrio, o webdesigner deve buscar as
parcerias necessrias para dinamizar o site com programadores, porm, muitas
vezes o custo do projeto devido a esta mo de obra extra estrapola e fica invivel
para o cliente.
A soluo usar um framework de gesto de contedo, e o Joomla! destaca-se por
ser para aqueles que no conhecem programao como o mais fcil de aprender.
6 2011 Alfamdia Prow.

Joomla!
Alm do webdesign, muitos programadores preferem utilizar os frameworks, pois

no existe a necessidade de criar algo que j foi criado. Muitas vezes estes
programadores acabam criando novos mdulos para o Joomla! para atender uma
necessidade de um cliente, e este mdulo passa a fazer parte de outros projetos
mundo a fora.
Veja o quadro comparativo a um projeto de um web site dinmico:
Sistema tradicional Joomla!
Profissional de Programao Necessrio Desnecessrio
Tempo de implementao Mdio/Alto Baixo/Medio
Profissionais envolvidos Mnimo 1 Webdesing e 1 programador 1 Profissional suficiente
Olhando o quadro acima, fica claro que o custo do projeto para uma programao
tradicional aumentar, pois ter mais mo de obra especializada. No devemos
desmerecer este custo, afinal, todo o trabalho dispensado para construo de um
sistema/web site merece ser recompensado. Trata-se aqui de aprender a otimizar o
tempo de trabalho obtendo resultados to ou mais satisfatrios.
inegvel que alguns projetos necessitam realmente de programao, pois se trata
de um sistema muito especfico, porm, muitas questes podem ser resolvidas
localizando um componente do Joomla!
2.4 Hospedagem de sites compatvel com Joomla

Para que seja possvel instalar o Joomla!, necessria a contratao de um servio
de hospedagem que d suporte a PHP e tenha banco de dados MySQL. Em geral,
os planos de hospedagem Linux oferecem estes servios.
Existe ainda a possibilidade de contratao de plano de hospedagem que
contempla script de instalao do Joomla!, o mais famoso o script chamado
Fantstico, que muitos servidores oferecem em seus planos de hospedagem. Estes
scripts automatizam a instalao facilitando o processo.
Independente de instalao via script ou manualmente, ainda necessrio o
conhecimento da ferramenta, pois a instalao gera um site padro do Joomla!,
sendo necessrio realizar configuraes necessrias para customizar o projeto. Os
provedores de hospedagem no costumam dar suporte para o contedo do site, ou
seja, no haver suporte para a configurao do Joomla!, somente e quando muito,
para a instalao.

Joomla!
Unidade 3
Instalando o Joomla! no servidor web
Nesta unidade trabalharemos a instalao do Joomla! em um servidor de internet,
configurando o banco de dados e realizando ajustes necessrios para o bom
funcionamento do sistema.
3.1 Baixando o aplicativo Joomla! atualizado

No site www.joomla.org, site oficial do projeto, possvel localizar o aplicativo. O
download est disponvel em ingls, mas existem pacotes de traduo para
portugus que podem ser utilizados, no qual trataremos na sequncia da apostila.
Em nosso trabalho, utilizaremos o pacote completo, j que no site oficial

permitido baixar atualizao de verses.
O pacote completo est compactado (extenso.ZIP), este pacote deve ser
descompactado e enviado via FTP (File Transfer Protocol) para o local onde o site

Joomla!
em Joomla! ficar no seu servidor de hospedagem ou ento utilizar em um

servidor local, utilizando por exemplo a instalao do WampServer, que roda
localmente PHP e MySQL na sua prpria mquina. Abordaremos esta instalao
posteriormente nesta unidade.
Antes de enviar ao servidor, contudo, devemos ter o nosso banco de dados criado
no servidor de hospedagem. o que veremos a seguir:
3.2 Configurando o banco de dados no provedor de

hospedagem.
Cada provedor tem o seu mtodo de criao de banco de dados, nesta apostila
utilizaremos a criao via CPanel, que um dos softwares de Painel de Controle
de Hospedagem mais usado no mundo.
Para poder configurar estes dados, voc dever j ter contratado em um provedor
de hospedagem um plano de hospedagem que contemple Banco de Dados e j ter
configurado os DNS (Domain Name System) do seu provedor no registro do seu
domnio. Caso no tenhas a senha do seu Painel de Controle, solicite ao suporte do
seu provedor para que possas configurar o Banco de Dados.
Tendo estes dados com voc, vamos partir para a configurao:
3.2.1 Criando o banco de dados

1 Acesse o Painel de Controle do servidor pelo endereo que seu provedor
disponibilizou, com seu nome de usurio e senha, e aps localize a opo Banco
de dados MySQL

Joomla!
Entrando em Banco de dados MySQL, a primeira opo da tela para criar um

novo banco de dados. Vamos criar um banco para o Joomla!. Note que
normalmente dado um prefixo ao nome do banco que se est criando. Este
prefixo normalmente o nome de usurio que o seu provedor de hospedagem
designou para voc acessar o painel de controle.
3.2.2 Criando o usurio do banco de dados

Aps criar o Banco de Dados, o prximo passo criar um usurio para utilizar tal
banco. Para isto, na tela do Banco de dados MySQL existe a opo de criao de
usurio, conforme imagem abaixo:

Joomla!
Importante: da mesma forma que o nome do Banco de Dados, o nome criado para
o usurio tambm deve levar um prefixo, que o nome de usurio que o provedor
de hospedagem criou para ser usado na sua conta. Ex: prefixo_alfa.
Guarde bem a senha utilizada pois ela ser necessria para configurar os
parmetros do Joomla!.
3.2.3 Associando o Banco de dados com o usurio criado

Aps a criao do Banco de dados e do usurio a ser utilizado, necessrio criar
um vnculo entre eles, para que possa ser utilizado pelo servidor.
Este vnculo configurado na mesma tela de criao de Banco de Dados e de
usurio para Banco de Dados, conforme mostra a imagem abaixo:
Escolha o Banco e usurio criado por voc para este projeto, e clique em
Adicionar. Uma nova tela aparecer para que seja criado as permisses:

Joomla!
Marque a opo All Privileges para dar a este usurio todos os privilgios de
acesso ao banco, necessrio para a utilizao do mesmo.
Aps, clique em Fazer Alteraes
3.3 Enviando os arquivos Joomla! para o servidor

web.
Aps ter realizado a configurao do Banco de Dados e de ter vinculado o pacote
de instalao do Joomla! ao banco, hora de realizar o upload dos arquivos para o
banco de dados.
Para realizar este upload, voc dever usar um programa de FTP (File Transfer
Protocol). Ns utilizaremos o programa FileZilla, que disponvel gratuitamente
na internet pelo endereo: http://filezilla-project.org
Para realizar a conexo com o seu provedor, necessrio o host, usurio e senha
de FTP.
Conectado ao FTP, do lado esquerdo aparecer o seu computador, e do lado direito
o servidor web da sua hospedagem. Se voc deseja que o Joomla! seja instalado no
diretrio principal do seu site, e que quando digitado o domnio do seu site
(www.enderecodoseusite.com.br) j abra o site em Joomla!, voc dever transferir
os arquivos da esquerda para a direita, para dentro da pasta public_html ou pasta
www. Se desejar em um subdiretrio, crie este diretrio na pasta public_html ou

Joomla!
pasta www. No nosso caso, enviaremos para a pasta joomla que abrir para o
usurio final digitando o endereo no site com /joomla no fim. Ex:
www.enderecodoseusite.com.br/joomla
Para transferir os dados, selecione os arquivos que se apresentam do lado

esquerdo, e aps arraste-os para dentro da pasta de destino. Na parte inferior do
FileZilla acompanhe as transferncias:

Joomla!
Aguarde at que todos os arquivos sejam transferidos.
3.4 Utilizando servidor local para instalao
3.4.1 Instalando o WAMP Server

Primeiramente, devemos baixar o WampServ, software que instalar o Apache,
PHP e MySQL, tambm o phpmyAdmin e SQLitemanager.
Voc deve fazer download do software em: http://www.wampserver.com/dl.php
Aps, execute o arquivo que voc baixou, ele vai perguntar se voc deseja
continuar a instalao, clique em SIM.
Ser exibido a tela de apresentao, clique em NEXT, logo apos leia o Termos de
Uso e clique novamente em NEXT.
Escolha onde ser instalado o software, altamente recomendavel deixar o
c:\wamp como padro, pois nomes com espaos ou maiores que 8 digitos podero
ser problemas no futuro, na hora de configurao dos servidores. Clique em
NEXT, duas vezes, e aps clique em INSTALL.
Voc deve informar o programa, qual o seu navegador padro. Se voc deseja
utilizar o Internet Explorer, voc deve ir no caminho C:\Arquivos de

Joomla!
programas\Internet Explorer e escolher o arquivo iexplore.exe, mas caso voc

prefira o Firefox, escolha o caminho C:\Arquivos de programas\Mozilla Firefox e
selecione o arquivo firefox.exe. Depois de escolher uma dessas opes, clique em
OK.
Voc deve informar o servidor SMTP (servidor de e-mail), mas como estamos
instalando para fins educativos inicialmente deixaremos esta opo como padro,
apenas clique em NEXT.
Instalao concluida! Clique em FINISH para executar o WampServer.
O WS esta rodando em seu sistema, para utiliza-lo voc dever encontrar um cone
igual a este: ao lado do relgio do Windows, clique sobre o boto direito,
v at LANGUAGE e selecione PORTUGUES.
Agora clique uma vez com o boto esquerdo sobre o mesmo icone e ver todas as
opes do programa, como parar, reiniciar e iniciar os servios (php, mysql,
apache).
Os servios j esto ativos no seu sistema. Por padro voc tem as seguintes
configuraes:
Acesso ao servidor web local se dar pelo http://localhost/

Diretrio dos seus arquivos pblicos ser o C:\wamp\www
Gerenciador Mysql Phpmyadmin (recomendado): http://localhost/phpmyadmin/
Gerenciador Mysql SQLiteManager: http://localhost/phpmyadmin/
Informaes sobre o seu servidor: http://localhost/?phpinfo=1
3.4.2 Instalando o Joomla! localmente

Instalado o Wamp, descompacte o pacote do Joomla! na pasta
c:/wamp/www/XXX, onde XXX o nome do projeto que ser trabalhado.
Aps, acesse por http://localhost/XXX (novamente, XXX o nome da pasta
criada)
Aparecer a instalao do Joomla, confirme segue na apostila.
3.5 Instalando seu site em Joomla!.

Depois de enviado para o servidor de hospedagem ou localmente, j podemos
comear o procedimento de instalao do seu site em Joomla! no servidor.

Joomla!
Este procedimento configura o banco de dados com as tabelas necessrias e define

senha de administrao, bem como outras configuraes.
Para instalar, abra seu navegador e entre no endereo web que voc fez upload dos
arquivos, por exemplo: se voc criou uma pasta chamada Joomla! na pasta raiz do
seu site, acesse: www.enderecodoseusite.com.br/joomla.
Abrir a seguinte tela:
Como ainda no foi instalado, o Joomla! redirecionar para o diretrio de instalao, e voc
ter alguns passos a seguir.
No primeiro passo, selecione o idioma para instalao, no nosso caso, PT-BR.
Clique no boto Prximo. Abrir o Passo 2:

Joomla!
No passo 2, devemos prestar ateno para os requisitos (primeiro retngulo, onde todos
requisitos devem ser atendidos. Nas configuraes recomendadas, permitido que alguma
configurao no esteja adequado para avanar para a prxima etapa.
Clicando no boto Prximo, iremos para o passo 3, que trata da licena de uso. O Joomla!
um software regido pela licena GNU/GPL.
GNU General Public License (Licena Pblica Geral), GNU GPL ou simplesmente GPL,
a designao da licena para software livre idealizada por Richard Stallman no final da
dcada de 1980, no mbito do projeto GNU da Free Software Foundation (FSF).
Ao passar para a prxima parte, o passo 4, configuraremos o banco de dados.
Muita ateno nesta configurao:

Joomla!
Os dados a serem preenchidos nesta etapa so os que voc guardou ao criar o Banco de
Dados.
Veja como preencher estes campos:
Nome do Servidor Aqui configuramos o nome do servidor de banco de dados, que
poder ser localhost ou poder ter um endereo especfico. Voc
pode descobrir o endereo no Painel de Controle, no item Banco de
Dados MySQL estar informado o Host SQL Remoto
Nome de Usurio Aqui vai o usurio criado no Painel de Controle da sua
hospedagem.
Senha Aqui vai a senha do usurio criado no Painel de Controle.
Nome do Banco de Aqui vai o nome do Banco de Dados criado.
dados
Aps realizar esta configurao, pode clicar em Prximo.

Joomla!
Nesta etapa configuramos a camada FTP.

interessante que seja criado no Painel de Controle da sua hospedagem um usurio de FTP
exclusivamente para esta camada, pois isto aumenta a segurana do seu site.
Aps configurar os dados de FTP, a prxima etapa nos pede dados para configurao do
Joomla!, como nome do site e senha para administrao.
Preencha o nome do site, que ser o nome usado no Joomla!, preencha o seu e-mail, uma
senha para administrar o Joomla!, e para ns que estamos iniciando no trabalho do Joomla!,
o interessante utilizar a opo Instalar exemplo de contedo, que aparece conforme
imagem abaixo:
Aps realizar este procedimento, clique no boto Prximo.

Pronto, agora para prosseguir necessrio entrar no FTP atravs de um programa
de FTP, como o FileZilla, e renomear a pasta installation, coloque as letras old na

Joomla!
frente, alterando o nome para oldinstallation, desta forma, o Joomla! no mais

procurar instalar quando inicia, e voc ter o site no ar.

Joomla!
Unidade 4
Utilizao e Configuraes aps a
instalao
4.1 Acesso ao site
Aps a instalao e remoo ou edio do nome da pasta installation, acessando a
URL onde o Joomla! foi instalado, voc ver a pgina inicial do Joomla!, no seu
template padro:
Agora, para realizar alteraes na estrutura do site, devemos conhecer o ambiente

de administrao:

Joomla!
4.2 Acesso a Administrao do Joomla!

Para administrar o Joomla!, voc dever entrar com a mesma URL do site, porm
acrescentando/administrator no fim.
Ex: www.enderecodoseusite.com.br/joomla/administrator
Aparecer a tela de login:
O nome de usurio padro que a instalao gera admin, e a senha voc escolheu
em uma etapa da instalao.
Na administrao, por enquanto est liberado apenas o idioma ingls, mas veremos
como acrescentar o idioma portugus.
Entre com seu usurio e senha e vamos comear.
4.3 Pacote de Traduo

Para facilitar a utilizao do Joomla!, aprenderemos primeiramente como alterar o
idioma para portugus do Brasil.
Para isto, voc deve acessar o site oficial do Joomla: www.joomla.org, e localizar a
opo Extensions, nesta opo, uma das categorias Language, onde encontra-se
os pacotes de traduo.
Realize o download do pacote de traduo, cuide para realizar o download da
mesma verso do Joomla! que foi instalado.
Aps o download, na Adminsitrao do Joomla! v ao menu Extensions, opo
Install/Uninstall.

Joomla!
Busque no campo Package File: o arquivo que voc baixou. E aps clique em
Upload File & Install
Este procedimento far com que seja instalado o pacote automaticamente.
Aps isto, v novamente ao menu Extensions, mas agora na opo Language
Manager.
Aparecer o idioma portugus, escolha-o e marque como padro (Default), tanto
na opo Site, quanto Adminsitrador.
Pronto, seu Joomla! est agora traduzido para Portugus, pronto para ser melhor
explorado.

Joomla!
Unidade 5
Administrao bsica do Joomla
5.1 Administrao de Usurios

O Joomla! permite que mais de um usurio utilize a administrao, e que vrios
usurios possam se cadastrar para ter acesso a contedos restritos.
Quando o usurio se cadastra no Joomla! pelo site, ele recebe um e-mail de
confirmao para dar segurana evitando cadastros falsos, pois s confirmando o
cadastro que o usurio poder utilizar sua conta.
O Administrador pode gerenciar estes usurios, desabilitando-os, criando novos
usurios e lhes concedendo permisses maiores.
Para realizar estas alteraes, na Administrao do Joomla!, v ao menu Site,
Administrar Usurios.
Nesta tela voc poder realizar as alteraes necessrias para gerenciar os

Usurios do seu site em Joomla!.
5.2 Administrao de Mdias

Existe um local especfico no Joomla! para inserir imagens e arquivos que sero
utilizados posteriormente pelo site, em artigos e pginas. Este local a
Adminsitrao de Mdias.

Joomla!
SUGESTO: Crie pastas para organizar os arquivos inseridos, pois esta

organizao faz a diferena na hora de dar manuteno no site, quando vai se
utilizar as mdias.
5.3 Configurao Global

No item configurao global podemos configurar dados como descrio do site e
palavras chaves para auxiliar a busca por robs buscadores, configurar dados do
servidor, como banco de dados e configurao de envio de e-mail do site.
Cuide na alterao destas opes, pois a alterao indevida, por exemplo, das
configuraes do banco de dados, pode retirar o site do ar.
5.4 Menus
O sistema de menus do Joomla! funciona como um mdulo, pois dependendo do
menu, muda a posio em que ele se encontra, e ainda assim possvel alterar sua
posio pelo Gerenciamento dos Mdulos, que veremos mais a frente na apostila.
Para acessar a Adminsitrao de Menus, v ao menu Menus, Administrar Menus.

Joomla!
O menu: Main Menu refere-se ao menu principal. nele que est a pgina inicial.
Todos os menus podem ser alterados, incluindo itens e retirando itens. Para tanto,
na coluna: Itens de Menu est um boto para acessar esta ao.
Neste item, podemos incluir novos itens de menus. Estes itens por sua vez, podem
ter diferentes destinos, como links para artigos, para galeria de fotos, ser um
submenu e outros itens que podem ser acrescentados posteriormente, como ser
trabalhado adiante na apostila.
5.5 Contedo
onde encontra-e o importantssimo gerenciador de artigos. Artigos so os itens
individuais de contedo que formam as pginas do site. Temos tambm as
categorias e as sesses. Trabalharemos com estas informaes na apostila, em
unidade posterior.
5.6 Conceitos Joomla!

A diferena de Componentes, Mdulos, Plugins e Idiomas, segundo o site oficial
do Joomla! :
5.6.1 Componentes
O maior e mais complexo tipo de extenso. Componentes so como mini-
aplicaes que desenham o corpo principal da pgina, que podem ser acessados
pela administrao para serem configurados.

Joomla!
5.6.2 Mdulos
Uma extenso mais flexvel e leve usada para renderizar uma pgina um mdulo.
Pode inclusive ser visto dentro de um componente, como componente de artigos,
de registro.
So usados principalmente para ser inseridos nas posies do template.
5.6.3 Plugin
Uma das mais avanadas extenses para Joomla! o plugin. Um plugin uma
sesso de cdigo que roda quando um evento predefinido acontece dentro do
Joomla!. Um exemplo de plugin um editor de texto, que roda quando o evento
que possibilita a edio de um artigo ocorre.
5.6.4 Idiomas
Talvez a extenso mais bsica e importante seja os idiomas: um pacote que traduz
o Joomla! e seus principais mdulos e componentes nativos ou no.
Sobre temas criados, trataremos em outro captulo da apostila. Vamos aprender
aqui a inserir novos temas, buscar temas e adapt-los.
Por padro, os seguintes componentes integram o Joomla!
Contedo
Banners
Contatos
Newsfeeds
Pesquisar
Links
5.7 Menu Componentes

Componentes So as extenses mais importantes para um site Joomla!, eles so os
mdulos, plugins, modelos (templates) e idiomas.
Para buscar as extenses do Joomla! temos o endereo:
http://extensions.Joomla!.org/ que o repositrio oficial de extenses.

Joomla!
5.7.1 Fonte de Notcias Externas

Quando se tem sites com RSS possibilita a insero de contedo dinmico interno.
A tecnologia do RSS permite aos usurios da internet se inscrever em sites que
fornecem "feeds" RSS. Estes so tipicamente sites que mudam ou atualizam o seu
contedo regularmente.
Normalmente os feeds ficam em um endereo como
www.nomedoblog.com.br/feed.
Para inserir uma fonte de notcia externa, basta ir ao menu Componente/ Fonte de
Notcia. Pode-se configurar as Categorias e as Fontes.
Configurando a fonte. Clique no boto Novo:
Digite o link do site com feeds RSS, escolha a categoria criada previamente e
clique em Salvar.
O resultado as ltimas noticias daquele site com o layout do seu site:

Joomla!
5.7.2 Formulrio de Contatos

Contato um componente nativo do Joomla!, devemos configurar os formulrios
de contato, que podem ser mltiplos ou um s, e posteriormente deve ser inserido
via menu da forma desejada.
Para criar um formulrio, v ao menu Componente/Contatos (podemos configurar
categorias e os prprios formulrios)
Criando Formulrio:
No formulrio voc pode configurar os dados que aparecero, e conta com
parmetros que podem inclusive banir determinados e-mails. Veja na imagem a
seguir.

Joomla!
5.8 Extenses
As extenses so de diversos tipos: mdulos, plugins,
templates e idioma. Diferente dos itens abordados do menu
componentes, que so fundamentais para a funcionalidade de
um site Joomla!, as extenses so os outros itens que
agregaro o site, que podem ser instalados e desinstalados
conforme a necessidade.
5.8.1 Instalar e Desinstalar extenses

O link de menu Instalar/Desinstalar direciona-nos para o Gerenciador de
Extenses, onde pode-se inserir novas ou retirar extenses que no se quer mais:

Joomla!
O Joomla! permite instalao de extenses em arquivos zip instalveis. A verso

1.5 ir automaticamente detectar o tipo de extenso e realizar a instalao.
5.9 Gerenciador de Mdulo

O gerenciador de mdulo (Menu Extenses/Administrar Mdulo) controla os
parmetros e alocao de todos os mdulos do site Joomla!, como mostrado na
imagem abaixo:
Mdulos so como mini-componentes. O que os diferenciam que o componente

sempre exibe o seu contedo no corpo principal e o mdulo exibe em local
designado.

Joomla!
Por Exemplo: O mdulo Banner pode ter seu local atribudo no topo, ou,
dependendo do template e estratgia usada, ficaria melhor na posio esquerda.
5.10 Gerenciador de Plugin

O gerenciador de plugin (Menu Extenses/Administrar Plugin) onde voc pode
controlar as opes de plugins instalados.
Alguns plugins no apresentam opes, mas sim servem para fins especficos, a
exemplo do plugin Content Email Cloaking, que busca nas pginas endereos
de e-mails e substitui no cdigo-fonte por JavaScript, evitando assim que
spammers busquem atravs de programas especficos os endereos para envio de
spam.
5.11 Gerenciador de Temas

O gerenciador de temas (Menu Extenses/Administrar Tema) onde voc pode
controlar os templates, instalando e aplicando os mesmos ao seu site Joomla!.
Encontra-se nesta pgina ainda a opo de instalar temas para o site ou para a parte
de administrao.

Joomla!
Unidade 6
Contedo dinmico: Artigos
Os artigos servem para inserirmos notcias e contedos no site Joomla! de forma
dinmica.
Este o tpico no qual devemos mais ter cuidado, porque um contedo bem
distribudo e de fcil acesso a garantia de sucesso na visitao do seu web site, e
o contrrio pode determinar o fracasso do mesmo.
Antes de sair criando artigos, o correto configurar as Sesses e as Categorias
antes, afinal, este um Sistema Gerenciador de Contedo, e sua principal funo e
organizar o contedo.
Antes de mais nada, faa-se um desafio. No designe a funo organizao para o
Joomla!. Faa voc antes um mapa das informaes. Desenhe um rascunho de
como deseja que o contedo seja organizado.
Abaixo montamos um exemplo para facilitar sua vida:
Pgina Inicial
Sobre ns
Servios
Fale Conosco
Blog
Sobre Ns Servios Fale Conosco Blog

Texto sobre a Mtodo de trabalho Dados como Telefone, Idias, novidades e
empresa com uma foto Grfica Digital e-mail, mapa.
notcias sobre os
Plotter
servios
Grfica Digital Plotter

Muita informao e Muita informao e
imagem sobre imagem sobre
6.1 Sesses
As sesses de artigos servem para organizar o material do site. Deve-se criar as
sesses individualizando os itens do site, pois ao criar os menus posteriormente,

Joomla!
possvel apresentar uma lista de todos os artigos de terminada sesso, facilitando a

navegao do site
Para criar novas sesses e administrar as j criadas, v ao menu Contedo,
Administrar Sesso
6.2 Categorias
Aps criar as Sesses, as Categorias so necessrias e servem como subseo,
podendo uma sesso ter vrias categorias. Ajudam tambm na organizao e na
incluso de menus do web site.
Ao criar uma nova categoria, pode-se definir tambm se o mesmo ser pblico ou
restrito aos registrados do site.
6.3 Criando Artigos

Artigos de contedo so a mais baixa camada de hierarquia e so os mais
importantes. Por se tratar diretamente da informao a se passar para o usurio do
web site. a famosa pgina, como o usurio chama.
Ao inserir um novo artigo, possvel escolher em qual Sesso e Categoria ele se
enquadra, se deve aparecer na pgina inicial ou no, e ainda permite a insero de
metadados, como forma de ajuda nas buscas por robs de buscadores na internet.
Para inserir um novo artigo, v ao menu Contedo Administrar Artigos:

Joomla!
Clicando no boto Novo, um editor aparecer e podemos incluir o contedo que

desejarmos.
Ao rodap na insero de artigos, temos 3 botes importantes:
O boto Imagem permite a insero de imagens no artigo.

Clicando neste, abrir uma janela igual abaixo:

Joomla!
Se a imagem j foi enviada anteriormente, basta escolher e clicar em Inserir, do

contrrio, no fim da tela tem a opo de envio de novas imagens, aps realizar o
upload por este campo, possvel inserir a imagem.
DICA: Insira sempre a imagem do tamanho exato que deseja trabalhar no web
site, assim voc evita imagens distorcidas e envia uma imagem com tratamento
adequado, evitando assim ter imagens pesadas no site.
O boto Quebra de pgina serve para que para textos longos, possa ter vrias
pginas para facilitar a leitura e no estragar a parte visual do site.
Ao inserir uma quebra de pgina, no frontend aparecer uma numerao para troca
de pgina para continuao do artigo.
Outro boto que bastante importante o boto Leia Mais...
O boto leia mais serve para que, ao apresentar na capa ou com vrios itens de
categoria, o seu texto no fique muito extenso, podendo em determinado ponto ter
um boto leia mais... para que ao clicar aparea o texto completo.

Joomla!
Unidade 7
Menus
7.1 Integrao Artigo/Menu
E como colocar um artigo como link de menu? Esta uma tarefa importante. No
menu podemos lanar todos os artigos de determinada categoria, ou diretamente
um artigo. Vamos prtica:
Crie um artigo, escolha uma sesso e uma categoria. Se ainda no tiveres
cadastrado nenhuma categoria ou sesso, isto deve obrigatoriamente ser feito.
Depois disto, acesse a Administrao, o menu Menus e Main Menus (mas se
desejar colocar este artigo em outro menu, s escolher outro menu)
Clique no boto Novo, para incluir um novo item de menu, escolha Link
Interno/Artigos/Artigo/Layout Padro de Artigo:
Agora, na lateral direita, em Parmetros (Bsico) clique para escolher um artigo:

Joomla!
Escolha um ttulo e clique em Salvar. Logo aps, teste o site e verifique o novo
item de menu.
7.2 Menu em Layout do Blog de Categoria

Alm da possibilidade de mostrar apenas um artigo, temos como mostrar um
resumo de cada notcia mostrando-os como Blog de Categoria: Uma opo de
menu do Joomla!.
Para este exemplo ficar de fcil visualizao, voc deve ter cadastrado na categoria
desejada no mnimo 5 artigos, e se eles tiverem muito contedo, deve-se usar o
recurso Leia mais..., estudado anteriormente.
Para criar este menu, V em Menus e Main Menus (mas se desejar colocar este
artigo em outro menu, s escolher outro menu)
Interno/Artigos/Categoria/Layout do Blog de Categoria:

Joomla!
Salvando este item de menu, ao clicarmos no mesmo teremos a seguinte tela:

Joomla!
7.3 Menu em Layout Padro de Categoria

O Layout Padro de Categoria lista uma tabela com todos os artigos de uma
determinada categoria. A montagem idntica ao Layout do Blog de Categoria,
mas a maneira como apresentado no site Joomla! Muda.
Para criar este menu, V em Menus e Main Menus (mas se desejar colocar este
artigo em outro menu, s escolher outro menu)
Interno/Artigos/Categoria/Layout Padro de Categoria. Veja o frontend.
7.4 Menu do Componente Contato

O componente interno contato deve ser
inserido no menu atravs da Administrao de
Menus, porm antes deve ser criado o
formulrio pelo menu Componentes/Contato.
No caso de ter vrios formulrios de contato,
possvel listar como Layout de Categoria de
Contato, que no site Joomla! aparecer uma
lista dos formulrios. Um exemplo ter
formulrios por setor ou filiais.
Normalmente utilizado Layout de Contato Padro para apresentar o
formulrio.

Joomla!
7.5 Submenus
Voc pode designar o item de menu para ter
um Item Pai. Desta forma, o item passa a ser
um submenu. Dependendo da formatao do
template/layout, este pode aparecer como
menu pop-up.

Joomla!
Unidade 8
Extendendo o Joomla!
Dificilmente voc encontrar um site Joomla! que no tenha sido adicionado novas
funcionalidades, at porque sem estas funcionalidades o site ficaria bsico.
Existem centenas de extenses disponveis, algumas gratuitas, outras pagas, que
podem simplesmente resolver o problema que voc precisa solucionar por um
preo que realmente compensatrio.
Como j vimos em outra unidade, as extenses so de diversos tipos: mdulos,
plugins, templates e idioma. As extenses so itens que agregaro o site, que
podem ser instalados e desinstalados conforme a necessidade.
J aprendemos a realizar as instalaes, agora vamos focar em conhecer as
principais extenses do Joomla!
8.1 Extenses teis

Apresentaremos algumas extenses e pode acontecer de algumas boas extenses
ficarem de fora da nossa lista. Indicamos sempre buscar em frum da rea e no site
http://extensions.joomla.org ou em http://extensionprofessionals.com
8.1.1 Comentrios
Jom Comment um poderoso sistema de comentrios
baseado em Ajax para o site Joomla! Contempla sistema
Captcha, evitando que spans apaream no site, um sistema
profissional e pago. Existem obviamente vrios sistemas
similares no site oficial de extenses, ao lado temos a
imagem do menu do site oficial de extenses que mostra
onde localizar tais componentes.
8.1.2 E-commerce
O e-commerce mais conhecido e usado o VirtueMart. Trata-se de

um sistema de e-commerce completo, com categorias, produtos,
pedidos, cupom de descontos e ainda pode ser usado apenas como um
catlogo. O site do projeto http://virtuemart.net

Joomla!
8.1.3 Galerias de Imagem

Existem vrias galerias de imagens, e boas galerias. Citamos a Phoca Galerry,
Expos e Ozio Galery. Estas galerias so gratuitas, e contemplam opo de
visualizar a imagem maior. A Ozio trs mais modelos de apresentao, j a Phoca
uma galeria mais fcil para ser utilizada, possibilitando mudana de layout.
8.1.4 Formulrios
Um bom componente de formulrio o perForms
(http://joomlacode.org/gf/project/performs), com suporte a Captcha, cria
formulrios simples em segundos.
Outro muito usado e gratuito o JForms
(http://extensions.joomla.org/extensions/contacts-and-feedback/forms/6965)
8.1.5 Agenda/Calendrio
Uma boa ferramenta de agenda e eventos o
EventList, que alm de criar uma agenda, gerencia
os compromissos no site, cadastrando locais, fotos
dos mesmos, gerando em um calendrio o vnculo
com a agenda pelas datas.
Ao clicar no evento, abre ento todos os detalhes
cadastrados para o mesmo.
8.1.6 Slideshow
O JPG Flash Rotator 2 permite a voc selecionar a partir de uma srie de imagens
para usar em um banner slide show no site Joomla!. Contempla mais de 5
transaes Flash diferentes e permite outras personalizaes, como cor de fundo.
8.1.7 Google Maps

Um plugin que exibe um ou mais mapas do Google dentro de itens de contedo do
Joomla! o plugin GoogleMaps Mambot.
(http://joomlacode.org/gf/project/mambot_google1). Pode com ele configurar a
altura, largura, latitude, longitude e tipo de zoom.

Joomla!
8.1.8 Newsletter
Um bom componente de newsletter e gratuito o ccNewsletter
(http://www.extensions.chillcreations.com/ ). Permite o envio com pausa de tempo
para evitar que seja considretado SPAM.
8.2 Buscando Temas

Aprenderemos mais a frente como criar um template em CSS para o Joomla!.
Neste captulo veremos como localizar templates para o Joomla! pronto. Existem
clubes na internet que voc pode se associar e baixar templates para atualizar seu
site, ou ainda, pode comprar por demanda um template.
Uma boa pesquisa em buscadores pode trazer templates muito bonitos com preos
bem razoveis.
Segue a lista de alguns sites que disponibilizam, pagos ou gratuitos, template para
Joomla!:
http://www.rockettheme.com
http://www.joomla.com.br/
http://www.templatemonster.com/
Alm de uma boa pesquisa nos buscadores, que se encontra muito destes
templates.

Joomla!
Unidade 9
Utilizando um template prprio em CSS
Nesta unidade colocaremos em prtica o os passos para adaptar um template
Joomla!. Especificamente vamos utilizar CSS (Cascading Style Sheets) para
criao de um layout sem uso de tabelas.
O que um Template Joomla?
Um modelo Joomla! um grupo de arquivos que o Joomla! controla na
apresentao do seu contedo. No um web site e no um design completo,
mas a base para a visualizao do seu web site Joomla!
Vantagens e desvantagens de usar um modelo CMS, da forma usada pelo
Joomla!:
H uma separao entre o contedo e a apresentao, especialmente
quando usado CSS. Isto bom pois atende completamente os padres
modernos da Web.
Uma nova aparncia pode ser aplicada a qualquer momento ao site sem
alterar o contedo.
Um layout muito alternativo no design pode ser tarefa complicada para
transformar em um modelo CMS
9.1 Criando um template

Primeiramente, voc deve criar um modelo, desenhando-o da forma que desejar:
Photoshop, Fireworks, ou diretamente no Dreamweaver.
O propsito ter um template pronto no Joomla!, para que possamos utilizar este
template adaptando-o posteriormente para o sistema Joomla!.
Para ilustrar esta possibilidade, criaremos passo a passo um layout pr-pronto,
contendo algumas imagens e criando totalmente no modo tableless, ou seja, sem
tabelas.
Na pasta template do seu Joomla! instalado vamos criar uma nova pasta. Para este
exemplo, usaremos a pasta alfa_sports.
Para ganharmos tempo com a criao, j temos pronta as imagens, que sero
colocadas dentro da pasta do template alfa_sport, na pasta img. O nome da pasta
de imagens no uma regra, mas um bom costume de organizao, j que as
imagens puderam ficar soltas na pasta do template, porm desorganizadas.

Joomla!
9.1.1 O arquivo templateDetails.xml

Este arquivo deve incluir todos os arquivos que so parte do template. O nome
deste arquivo tem que ser exatamente este: templateDetails.xml (inclusive com o
D maisculo). Ele inclui informaes como nome do autor, contato do autor e
verso do tema.
Abaixo segue o exemplo do tema que trabalharemos no nosso exerccio, e
posteriormente o comentrio de cada linha:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>alfa_sports</name>
<creationDate>10/06/2010</creationDate>
<author>Andreo Costa</author>
<copyright>GPL</copyright>
<authorEmail>andreo@parque.net.br</authorEmail>
<authorUrl>http://www.alfamidia.com.br</authorUrl>
<version>1.1</version>
<description>Exemplo para treinamento Joomla!</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
<filename>img/barra.jpg</filename>
<filename>img/barra_dir_logo.jpg</filename>
<filename>img/barra_esq_logo.jpg</filename>
</files>
<positions>
<position>user1</position>
<position>user2</position>
<position>breadcrumb</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>footer</position>
</positions>
<params>

Joomla!
<param name="VariacaoCor" type="list" default="white"

label="Variacao de Cor" description="Variacao do uso de cor">
<option value="blue">Azul</option>
<option value="red">Vermelho</option>
</param>
</params>
</install>
Agora explicando as partes do cdigo mais importantes:
<install version="1.5" type="template">
Instrues para o instalador que diz que o tipo deste documento template, e a
verso do Joomla! 1.5 (mas fica compatvel com verses futuras, desde que
ativado modo de compatibilidade)
<name>alfa_sports</name>
Define o nome do seu modelo. Aqui deve aparecer exatamente o mesmo nome da
pasta do modelo. No deve-se usar caracteres especiais nem espao em branco.
<creationDate>10/04/2010</creationDate>
A data de criao do modelo. O formato em que se apresenta a data no h uma
regra, podendo aparecer o ms e o ano, at por extenso.
<author>Andreo Costa</author>
O nome do autor do tema aparece nesta linha.
<copyright>GPL</copyright>
Qualquer informao de direito autoral vai nesta linha.

<authorEmail>andreo@parque.net.br</authorEmail>
Aqui pode-se colocar o e-mail do autor
<authorUrl>http://www.alfamidia.com.br</authorUrl>
A URL do web site do autor.

<version>1.1</version>
A verso do template.
<files></files>
Arquivos usados no template, estes ficam assiciados dentro deste cdigo atravs de
outro cdigo: <filename> </filename>.
<positions> </positions>
As posies do mdulo disponveis para o template.
<params> </params>

Joomla!
Eles descrevem os parmetros que podem ser passados para permitir funes
avanadas do template, como geralmente, a cor do modelo.
9.1.2 O arquivo index.php antes dos cdigos Joomla!

O que faz o arquivo ndex.php? um arquivo que na realidade contempla bem
mais HTML do que PHP, porm, para que rode o cdigo PHP, devemos t-lo com
a extenso adequada.
Este o arquivo que apresentar o web site Joomla! e contempla a estrutura do
template.
Como estamos trabalhando em um modelo pronto em HTML e CSS,
primeiramente vamos usar um cdigo que representa um layout, e posteriormente
vamos incluir os comandos para que o Joomla! faa parte da estrutura de contedo
do site.
O cdigo HTML que temos, ainda sem os cdigos Joomla!, so estes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Template para Joomla!</title>
<link rel="stylesheet" href="css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
</head>
<body>
<div id="geral">
<div id="topo"> topo aqui </div>
<div id="barra">
<div class="barra_esq">
Barra esquerda aqui
</div>
<div class="logo">
Logo aqui
</div>

Joomla!
<div class="barra_dir">
Barra direita aqui
</div>
</div>
<div id="centro">
<div class="menulateral">
Menu lateral aqui
</div>
<div class="conteudo">
Conteudo aqui.
</div>
</div>
<div id="rodape">
Rodap Aqui
</div>
</div>
</body>
</html>
9.1.3 O arquivo CSS (Cascading Style Sheets)

Somente aquele cdigo, sem nenhum arquivo de estilo, seria apenas um arquivo de
cor branca com textos pretos na tela, nada mais. O estilo do site se d no arquivo
de extenso .css.
Abaixo segue nosso cdigo CSS, que posteriormente ser melhorado para o
template Joomla!
@charset "utf-8";
/* CSS Document */
#geral {
float: left;
width: 950px;
border: 1px solid #D6D6D6;
}

Joomla!
#geral #topo {
background-color: #E2E3EA;
float: left;
height: 40px;
width: 940px;
padding: 5px;
}
#geral #barra {
float: left;
height: 42px;
width: 950px;
background-image: url(../img/barra.jpg);
background-repeat: repeat-x;
}
#geral #barra .barra_dir {
background-image: url(../img/barra_dir_logo.jpg);
background-repeat: no-repeat;
float: right;
height: 42px;
width: 702px;
}
#geral #barra .barra_esq {
background-image: url(../img/barra_esq_logo.jpg);
background-repeat: no-repeat;
float: left;
height: 42px;
width: 68px;
}
#geral #barra .logo {
float: left;
height: 42px;
padding-top: 2px;
width: 180px;
background-color: #FFF;
text-align:center;

Joomla!
}
.logo p{
margin: 0px;
}
#geral #centro {
float: left;
width: 950px;
min-height: 300px;
}
#geral #centro .menulateral {
float: left;
width: 180px;
margin-left: 67px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
min-height: 199px;
}
#geral #centro .conteudo {
float: right;
width: 685px;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;
}
#geral #rodape {
padding: 5px;

Joomla!
float: left;
height: 85px;
width: 940px;
color: #FFF;
background-color: #333;
}
O resultado at agora uma estrutura simples, com esta aparncia:
9.1.4 O arquivo index.php depois dos cdigos Joomla!

Agora devemos adaptar o arquivo ndex.php para que esteja dentro do padro
Joomla! uma tarefa tranquila, pois trata-se apenas de ajustes pequenos, que sero
explicados por partes:
Antes da tag <html>:
<?php
// sem acesso direto
defined( '_JEXEC' ) or die ( 'Restricted' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Esta declarao PHP serve simplesmente para ter certeza que o arquivo no vai se
acessado diretamente por segurana.

Joomla!
O DOCTYPE no muda, tem que ser desta forma para que seja usado XHTML na
forma Transicional, acatando tanto cdigo XHTML quando o HTML.
Dentro da tag <head>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet"
href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this-
>template ?>/css/template.css" type="text/css" /><meta http-
equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
O cdigo <jdoc:include type="head" /> serve para incluir automaticamente o

ttulo, e as tags de descrio que auxiliam a busca pelos robs dos buscadores.
Estas informaes so alteradas nas Configuraes Globais.
Sobre as tags <link> que aparecem, as duas primeiras servem para buscar o CSS
genrico do Joomla!, e a ltima serve para buscar o seu arquivo css. Note que
neste caso o nome do arquivo CSS template.css e est em uma pasta com o
nome css.
As Tags mais importantes
Na tag <topo>:
<div id="topo"><jdoc:include type="modules" name="top"
style="xhtml" /> </div>
Neste caso estamos indicando que neste local aparecer o contedo posicionado
em top no Joomla! o style est indicando que o contedo aparecer em xhtml,
evitando em muitos mdulos a utilizao de tabelas.
Na <div> de classe barra_esq:
<div class="barra_esq"> <?php echo $mainframe-
>getCfg('sitename');?> </div>
Colocamos esta tag PHP na div da esquerda para conhecermos a maneira de usar o
nome do site no layout.
Na <div> de classe logo:
<div class="logo"> <jdoc:include type="modules" name="user1"
Aqui inclumos a posio user1.
Na <div> de classe barra_dir:

Joomla!
<div class="barra_dir"> <jdoc:include type="modules" name="user2"

Da mesma forma que a anterior, aqui inclumos a posio user2.
Na <div> de classe menulateral:
<div class="menulateral"> <jdoc:include type="modules" name="left"
Na div que receber o menu lateral, usamos a posio left. Note que trabalhamos
com as posies padro do Joomla! para facilitar o trabalho.
Na <div> de classe conteudo:
<div class="conteudo">
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
<jdoc:include type="component" style="xhtml" />
</div>
Note que aqui temos duas linhas, a primeira a posio breadcrumbs, onde
costuma-se deixar o mdulo de mesmo nome que serve para auxiliar a navegao.
A segunda linha a posio que todo o contedo principal aparecer. Quando voc
navegar no site, clicar em um artigo, por exemplo, aparecer neste ponto.
Na <div> de classe rodape:
<div id="rodape"> <jdoc:include type="modules" name="footer"
Nesta deixamos a posio footer para indicar itens para o rodap.
9.1.5 Melhorias no arquivo CSS

Devido a maneira diferente que os navegadores apresentam as formataes do site,
o principal deles dar margens e espaamentos diferentes para mesmas tags, uma
declarao importante a se fazer esta:
*{
margin: 0;
padding: 0;
}
Este cdigo far com que globalmente todas as tags fiquem com margem e
espaamento interno zerado. Quando desejar do contrrio, s declarar via CSS
para que isto acontea. No fcil?
Configure tambm a tag <body>, informando qual a tipografia a ser usada no site
por padro.

Joomla!

Joomla!
Unidade 10
Dicas teis
10.1 Otimizando o site Joomla! para obter mais
acessos
O processo de otimizao de site um assunto polmico, porque existem no

mercado muitas opinies referente a prticas para se conseguir mais visitas.
No da noite para o dia que um site aparece na primeira pgina do Google, mas
algumas iniciativas fazem com que isto ocorra mais rapidamente que o natural.
A otimizao est nos detalhes:
O ttulo da pgina, por exemplo, deve sempre estar associado com o que o
contedo trs.
Breadcrumb, por
exemplo, um mdulo
que sempre que possvel
vale a pena usar, pois
ele mostra o caminho que est se navegando e ajuda na indexao do contedo.
Existem tambm algumas extenses especficos para auxiliar na indexao do site

Joomla!, como Tags for Joomla! que cria lista de tags, tags populares e ajuda na
indexao do contedo.
Uma configurao bsica que deve ser feita
na configurao global, marcar Sim nas
configuraes de SEO, porm, no s isto
que faz com que estas configuraes
funcionem, temos que nos preocupar com o
servidor Apache, mod_rewrite
Mas o Que o mod_rewrite?
O mod_rewrite como conhecido, ou rewrite engine, uma mdulo do servidor
web Apache que usado para re-escrever URLs antes que os itens solicitados
sejam buscados no servidor e isto pode ser usados para vrios propsitos. As
regras do mod_rewrite sero lidas a partir do seu arquivo .htaccess, por isso
importante sempre colocar o RewriteEngine On e sempre testar muito bem as
regras para seu site no entrar em loop e ficar inacessvel.

Joomla!
O que uma URL amigvel para o buscador?

Uma URL amigvel uma URL que seja bem aceita pelo motor de busca,
normalmente a URL longa, contm valores dinmicos e dificilmente contm
palavras-chave. J as URLs amigveis so curtas, estticas e contm as keywords
que se deseja obter maior relevncia.
Como ativar o mod_rewrite?
No pacote do Joomla! j vem um arquivo nomeado htaccess.txt, no servidor, altere
o nome deste arquivo para .htaccess (com ponto na frente mesmo). Se j houver
algum arquivo com mesmo nome, faa um backup do mesmo antes e depois refaa
o procedimento para substitu-lo.
Pronto, o endereo que antes poderia ser assim:
http://www.site.com.br/joomla/index.php?option=com_content&view=article&id
=47:artigo-com-imagem&catid=34:alfamidia&Itemid=54
Passa a ficar assim:
http://www.site.com.br/joomla/alfa-blog-de-categoria/47-artigo-com-imagem.html
NOTA:
Algumas extenses do Joomla! podem no funcionar corretamente com a opo de
URL Amigveis ativado. Recomenda-se sempre que esta funo estiver habilitada,
que se teste todo o site.
Para problemas com esta opo, pode-se obter extenses de URL amigveis, como
por exemplo o JoomSEF e o sh404.
10.2 Vinculando o Joomla! com o Banco de Dados

O arquivo configuration.php contm os dados do Banco de Dados. Caso seja
necessria a troca do nome do banco, por um backup ou troca de servidor, conhea
como este arquivo funciona e como pode ser editado:
Mas o que este arquivo?
Este arquivo responsvel por conectar o seu site com o Banco de Dados. Alm
disto, ele contempla informaes importantes de Search Engine Optimization,
tcnica responsvel para alavancar a audincia do site pelos buscadores na
internet, mas sobre isto trabalharemos em outra unidade frente.
Com o arquivo aberto, localize as linhas correspondentes a configurao da base
de dados:

Joomla!
E vamos preencher os dados corretamente. Abaixo a tabela que explica cada uma
das variveis que sero alteradas:
$host Aqui configuramos o nome do servidor de banco de dados, que
poder ser localhost ou poder ter um endereo especfico. Voc pode
descobrir o endereo no Painel de Controle, no item Banco de Dados
MySQL estar informado o Host SQL Remoto
$user Aqui vai o usurio criado no Painel de Controle da sua hospedagem.
$password Aqui vai a senha do usurio criado no Painel de Controle.
$db Aqui vai o nome do Banco de Dados criado.
Abaixo, os dados alterados:
Note que somente foi alterado o que est entre aspas simples, pois qualquer outra
alterao manual neste arquivo poder comprometer o funcionamento do Joomla!,
portanto, preste bem ateno neste procedimento.
Aps alterado, salve o arquivo, que passaremos a fazer o upload para o servidor
web.

Joomla!

Joomla!
Unidade 11
Novas verses
11.1 Verses novas do Joomla!
O Joomla! nesta apostila foi tratada na verso 1.5 e atualmente est na verso 1.7.
Devido a incompatibilidade das verses, alguns componentes, plugins e/ou
mdulos ainda no existem ou no funcionam para novas verses.
Por isso alguns cuidados devem ser tomados ao usar outras verses do Joomla!.
bom vermos se o arquivo que vamos baixar do Joomla! tem compatibilidade.
Nos casos de haver o aplicativo para novas verses, pode ser representado desta
maneira, argumentando que Nativo do 1.5 e serve s extenses 1.6 e 1.7.
No Joomla! 1.6 passou a ser melhorado algumas funes, entre elas destacam-se:
Legacy Mode excludo;

Joomla!
Novo Controle de nveis de acesso (ACL) tendo um novo gerenciamento de

usurios com um controle mais especfico;
Nveis de organizao do contedo ilimitado usando Categorias;
O Joomla 1.6 s funcionar com o PHP 5.2+ e Mysql 5.0.4+;
Retirada do componente de enquete da instalao padro;
Nomeclatura dos artigos de FRONTPAGE(pgina principal) agora chama-se
FEATURED(destaque);
Novo layout de administrao e mudanas na navegao para melhorar a
usabilidade;
Dois novos botes: Salvar e Novo e Salvar como cpia;
Redirecionamento de links (Agora sem desculpas para os famosos erros
404).
Mdulos com data de expirao;
No Joomla! 1.7 foram mantidas algumas funes do 1.6 e outras atribudas:

Artigos criados em lote;

Joomla!
Mdulos com possibilidade de background-image sem precisar acessar o

CSS;
Compatibilidade com a verso 1.6;
Possibilidade de atualizao de verso mantida;
A previso de durao do Joomla! 1.7 de 6 meses. E h uma estimativa de
que o Joomla! 1.8 seja lanado no incio de 2012. Com uma durao
aproximada de dois anos, quando ser lanado o Joomla! 1.9 que ter durao
curta o suficiente para aguardarmos o mtico Joomla! 2.0, com data de
lanamento prevista para 2015-2016, acreditando que a W3C j tenha
comeado a implementar o Html 5.

Joomla PDF

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

Joomla PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Joomla!

Todos os direitos reservados para Alfamdia Prow.

As informaes contidas neste material de treinamento so distribudas NO ESTADO EM

12/2011 Verso 1.3

2 2011 Alfamdia Prow

UNIDADE 1 JOOMLA! PARA WEB DESIGNERS......................................................................................................... 5

3 2011 Alfamdia Prow

7.1 INTEGRAO ARTIGO/MENU ......................................................................................................... 37

4 2011 Alfamdia Prow

1.2 Estrutura do Curso

5 2011 Alfamdia Prow

Podemos dizer que um CMS um framework, um esqueleto de web site pr-

O Joomla! um exemplo de CMS, utilizado para criao de web sites dinmicos,

2.2 Tecnologias envolvidas

2.3 Comparativos de mtodos de criao de um web

6 2011 Alfamdia Prow.

Alm do webdesign, muitos programadores preferem utilizar os frameworks, pois

2.4 Hospedagem de sites compatvel com Joomla

7 2011 Alfamdia Prow.

3.1 Baixando o aplicativo Joomla! atualizado

Em nosso trabalho, utilizaremos o pacote completo, j que no site oficial

8 2011 Alfamdia Prow.

em Joomla! ficar no seu servidor de hospedagem ou ento utilizar em um

3.2 Configurando o banco de dados no provedor de

3.2.1 Criando o banco de dados

9 2011 Alfamdia Prow.

Entrando em Banco de dados MySQL, a primeira opo da tela para criar um

3.2.2 Criando o usurio do banco de dados

10 2011 Alfamdia Prow.

3.2.3 Associando o Banco de dados com o usurio criado

11 2011 Alfamdia Prow.

3.3 Enviando os arquivos Joomla! para o servidor

12 2011 Alfamdia Prow.

Para transferir os dados, selecione os arquivos que se apresentam do lado

13 2011 Alfamdia Prow.

Aguarde at que todos os arquivos sejam transferidos.

3.4 Utilizando servidor local para instalao

3.4.1 Instalando o WAMP Server

14 2011 Alfamdia Prow.

programas\Internet Explorer e escolher o arquivo iexplore.exe, mas caso voc

Acesso ao servidor web local se dar pelo http://localhost/

3.4.2 Instalando o Joomla! localmente

3.5 Instalando seu site em Joomla!.

15 2011 Alfamdia Prow.

Este procedimento configura o banco de dados com as tabelas necessrias e define

16 2011 Alfamdia Prow.

17 2011 Alfamdia Prow.

18 2011 Alfamdia Prow.

Nesta etapa configuramos a camada FTP.

Aps realizar este procedimento, clique no boto Prximo.

19 2011 Alfamdia Prow.

frente, alterando o nome para oldinstallation, desta forma, o Joomla! no mais

20 2011 Alfamdia Prow.

Agora, para realizar alteraes na estrutura do site, devemos conhecer o ambiente

21 2011 Alfamdia Prow.

4.2 Acesso a Administrao do Joomla!

4.3 Pacote de Traduo

22 2011 Alfamdia Prow.

23 2011 Alfamdia Prow.

5.1 Administrao de Usurios

Nesta tela voc poder realizar as alteraes necessrias para gerenciar os

5.2 Administrao de Mdias

24 2011 Alfamdia Prow.