Apostila de JOOMLA

Joomla!
Joomla!
Todos os direitos reservados para Alfamídia Prow.
AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as
precauções tenham sido tomadas na preparação deste material, a Alfamídia Prow não têm
qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instruções contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.
12/2011 – Versão 1.3
Alfamídia Prow
http://www.alfamidia.com.br
2 2011 Alfamídia 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 MÉTODOS DE CRIAÇÃO DE UM WEB SITE: TRADICIONAL X JOOMLA .................. 6
2.4 HOSPEDAGEM DE SITES COMPATÍVEL 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 usuário do banco de dados ...................................................................................... 10
3.2.3 Associando o Banco de dados com o usuário criado ............................................................... 11
3.3 ENVIANDO OS ARQUIVOS JOOMLA! PARA O SERVIDOR WEB. .......................................................... 12
3.4 UTILIZANDO SERVIDOR LOCAL PARA INSTALAÇÃO ........................................................................ 14
3.5 INSTALANDO SEU SITE EM JOOMLA!. .............................................................................................. 15
UNIDADE 4 UTILIZAÇÃO E CONFIGURAÇÕES APÓS A INSTALAÇÃO ................................................................ 21
4.1 ACESSO AO SITE ............................................................................................................................. 21
4.2 ACESSO A ADMINISTRAÇÃO DO JOOMLA! ...................................................................................... 22
4.3 PACOTE DE TRADUÇÃO .................................................................................................................. 22
UNIDADE 5 ADMINISTRAÇÃO BÁSICA DO JOOMLA .............................................................................................. 24
5.1 ADMINISTRAÇÃO DE USUÁRIOS ..................................................................................................... 24
5.2 ADMINISTRAÇÃO DE MÍDIAS .......................................................................................................... 24
5.3 CONFIGURAÇÃO GLOBAL ............................................................................................................... 25
5.4 MENUS ........................................................................................................................................... 25
5.5 CONTEÚDO ..................................................................................................................................... 26
5.6 CONCEITOS JOOMLA! ..................................................................................................................... 26
5.6.1 Componentes ............................................................................................................................ 26
5.6.2 Módulos .................................................................................................................................... 27
5.6.3 Plugin ....................................................................................................................................... 27
5.6.4 Idiomas ..................................................................................................................................... 27
5.7 MENU COMPONENTES .................................................................................................................... 27
5.7.1 Fonte de Notícias Externas ....................................................................................................... 28
5.7.2 Formulário de Contatos ........................................................................................................... 29
5.8 EXTENSÕES .................................................................................................................................... 30
5.8.1 Instalar e Desinstalar extensões ............................................................................................... 30
5.9 GERENCIADOR DE MÓDULO ........................................................................................................... 31
5.10 GERENCIADOR DE PLUGIN ............................................................................................................. 32
5.11 GERENCIADOR DE TEMAS .............................................................................................................. 32
UNIDADE 6 CONTEÚDO DINÂMICO: ARTIGOS........................................................................................................ 33
6.1 SESSÕES ......................................................................................................................................... 33
6.2 CATEGORIAS .................................................................................................................................. 34
6.3 CRIANDO ARTIGOS ......................................................................................................................... 34
UNIDADE 7 MENUS ..................................................................................................................................................... 37

Joomla!
7.1 INTEGRAÇÃO ARTIGO/MENU ......................................................................................................... 37

7.2 MENU EM LAYOUT DO BLOG DE CATEGORIA ................................................................................. 38
7.3 MENU EM LAYOUT PADRÃO DE CATEGORIA .................................................................................. 40
7.4 MENU DO COMPONENTE CONTATO ................................................................................................ 40
7.5 SUBMENUS ..................................................................................................................................... 41
UNIDADE 8 EXTENDENDO O JOOMLA!.................................................................................................................... 42
8.1 EXTENSÕES ÚTEIS .......................................................................................................................... 42
8.1.1 Comentários ............................................................................................................................. 42
8.1.2 E-commerce .............................................................................................................................. 42
8.1.3 Galerias de Imagem.................................................................................................................. 43
8.1.4 Formulários .............................................................................................................................. 43
8.1.5 Agenda/Calendário ................................................................................................................... 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 PRÓPRIO 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 códigos Joomla! ...................................................................... 48
9.1.3 O arquivo CSS (Cascading Style Sheets) .................................................................................. 49
9.1.4 O arquivo index.php depois dos códigos 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 VERSÕES ................................................................................................................................... 57
11.1 VERSÕES 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 Gestão de Conteúdos, em português), sistema
este que o Joomla!, como software livre, é líder mundial na área.
Além de compreender noções importantes, como instalação e gerenciamento do
Joomla!, o aluno aprenderá como utilizar componentes que se fazem necessários
para gerir um web site sem necessidade de programação e também a adaptar um
layout próprio a este sistema. Aprenderá também a realizar toda a instalação do
sistema e configuração para instarar o banco de dados, mesmo sem ter
conhecimento na área de programação.
1.2 Estrutura do Curso

Primeiramente trabalharemos com os conceitos principais sobre CMS e Joomla!.
As unidades seguintes abordam tópicos como: comparativo entre métodos
tradicionais e Joomla! para criação de web site dinâmico, instalação de Joomla!
em servidor web, pacotes de tradução, templates para Joomla!, componentes, entre
outros.
O curso traz exercício prático para uma melhor fixação do conteúdo.
Durante o transcorrer de todo o curso o aluno aprenderá a trabalhar de forma
autônoma no desenvolvimento de web site com Joomla!.

Joomla!
Unidade 2
Conceitos
2.1 O que é CMS
Um Sistema de Gestão de Conteúdo - SGC, (em inglês Content Management
Systems - CMS), é um sistema gestor de conteúdo para web sites, portais e
intranets, que integra ferramentas necessárias para criar, editar e inserir conteúdos
em tempo real, sem a necessidade de programação de código, cujo objetivo é
estruturar e facilitar a criação, administração, distribuição, publicação e
disponibilidade da informação. A sua maior característica é a grande quantidade de
funções presentes.
Podemos dizer que um CMS é um framework, “um esqueleto” de web site pré-
programado, com recursos básicos e de manutenção e administração já
prontamente disponíveis.
O Joomla! é um exemplo de CMS, utilizado para criação de web sites dinâmicos,

com possibilidade de inserção de componentes das mais variadas funções, quase
sempre gratuito.
2.2 Tecnologias envolvidas

O Joomla! é um projeto de código aberto (Licença GNU/GPL), que por usa vez
utiliza a linguagem de programação PHP e banco de dados MySQL. O Joomla! foi
desenvolvido do CMS Mambo.
2.3 Comparativos de métodos de criação 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 necessário, o webdesigner deve buscar as
parcerias necessárias para dinamizar o site com programadores, porém, muitas
vezes o custo do projeto devido a esta mão de obra extra estrapola e fica inviável
para o cliente.
A solução é usar um framework de gestão de conteúdo, e o Joomla! destaca-se por
ser para aqueles que não conhecem programação como o mais fácil de aprender.
6 2011  Alfamídia Prow.

Joomla!
Além do webdesign, muitos programadores preferem utilizar os frameworks, pois

não existe a necessidade de criar algo que já foi criado. Muitas vezes estes
programadores acabam criando novos módulos para o Joomla! para atender uma
necessidade de um cliente, e este módulo passa a fazer parte de outros projetos
mundo a fora.
Veja o quadro comparativo a um projeto de um web site dinâmico:
Sistema tradicional Joomla!
Profissional de Programação Necessário Desnecessário
Tempo de implementação Médio/Alto Baixo/Medio
Profissionais envolvidos Mínimo 1 Webdesing e 1 programador 1 Profissional é suficiente
Olhando o quadro acima, fica claro que o custo do projeto para uma programação
tradicional aumentará, pois terá mais mão de obra especializada. Não devemos
desmerecer este custo, afinal, todo o trabalho dispensado para construção de um
sistema/web site merece ser recompensado. Trata-se aqui de aprender a otimizar o
tempo de trabalho obtendo resultados tão ou mais satisfatórios.
É inegável que alguns projetos necessitam realmente de programação, pois se trata
de um sistema muito específico, porém, muitas questões podem ser resolvidas
localizando um componente do Joomla!
2.4 Hospedagem de sites compatível com Joomla

Para que seja possível instalar o Joomla!, é necessária a contratação de um serviço
de hospedagem que dê suporte a PHP e tenha banco de dados MySQL. Em geral,
os planos de hospedagem Linux oferecem estes serviços.
Existe ainda a possibilidade de contratação de plano de hospedagem que
contempla script de instalação do Joomla!, o mais famoso é o script chamado
Fantástico, que muitos servidores oferecem em seus planos de hospedagem. Estes
scripts automatizam a instalação facilitando o processo.
Independente de instalação via script ou manualmente, é ainda necessário o
conhecimento da ferramenta, pois a instalação gera um site padrão do Joomla!,
sendo necessário realizar configurações necessárias para customizar o projeto. Os
provedores de hospedagem não costumam dar suporte para o conteúdo do site, ou
seja, não haverá suporte para a configuração do Joomla!, somente e quando muito,
para a instalação.

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

No site www.joomla.org, site oficial do projeto, é possível localizar o aplicativo. O
download está disponível em inglês, mas existem pacotes de tradução para
português que podem ser utilizados, no qual trataremos na sequência da apostila.
Em nosso trabalho, utilizaremos o pacote completo, já que no site oficial é

permitido baixar atualização de versões.
O pacote completo está compactado (extensão.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 então utilizar em um

servidor local, utilizando por exemplo a instalação do WampServer, que roda
localmente PHP e MySQL na sua própria máquina. Abordaremos esta instalação
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 método de criação de banco de dados, nesta apostila
utilizaremos a criação 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
domínio. Caso não 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 configuração:
3.2.1 Criando o banco de dados

1 – Acesse o Painel de Controle do servidor pelo endereço que seu provedor
disponibilizou, com seu nome de usuário e senha, e após localize a opção Banco
de dados MySQL

Joomla!
Entrando em “Banco de dados MySQL”, a primeira opção 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 usuário que o seu provedor de hospedagem
designou para você acessar o painel de controle.
3.2.2 Criando o usuário do banco de dados

Após criar o Banco de Dados, o próximo passo é criar um usuário para utilizar tal
banco. Para isto, na tela do Banco de dados MySQL existe a opção de criação de
usuário, conforme imagem abaixo:

Joomla!
Importante: da mesma forma que o nome do Banco de Dados, o nome criado para
o usuário também deve levar um prefixo, que é o nome de usuário que o provedor
de hospedagem criou para ser usado na sua conta. Ex: prefixo_alfa.
Guarde bem a senha utilizada pois ela será necessária para configurar os
parâmetros do Joomla!.
3.2.3 Associando o Banco de dados com o usuário criado

Após a criação do Banco de dados e do usuário a ser utilizado, é necessário criar
um vínculo entre eles, para que possa ser utilizado pelo servidor.
Este vínculo é configurado na mesma tela de criação de Banco de Dados e de
usuário para Banco de Dados, conforme mostra a imagem abaixo:
Escolha o Banco e usuário criado por você para este projeto, e clique em
Adicionar. Uma nova tela aparecerá para que seja criado as permissões:

Joomla!
Marque a opção “All Privileges” para dar a este usuário todos os privilégios de
acesso ao banco, necessário para a utilização do mesmo.
Após, clique em “Fazer Alterações”
3.3 Enviando os arquivos Joomla! para o servidor

web.
Após ter realizado a configuração do Banco de Dados e de ter vinculado o pacote
de instalação 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). Nós utilizaremos o programa FileZilla, que é disponível gratuitamente
na internet pelo endereço: http://filezilla-project.org
Para realizar a conexão com o seu provedor, é necessário o host, usuário 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
diretório principal do seu site, e que quando digitado o domínio 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 subdiretório, crie este diretório na pasta public_html ou

Joomla!
pasta www. No nosso caso, enviaremos para a pasta joomla que abrirá para o
usuário final digitando o endereço 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 após arraste-os para dentro da pasta de destino. Na parte inferior do
FileZilla acompanhe as transferências:

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

Primeiramente, devemos baixar o WampServ, software que instalará o Apache,
PHP e MySQL, também o phpmyAdmin e SQLitemanager.
Você deve fazer download do software em: http://www.wampserver.com/dl.php
Após, execute o arquivo que você baixou, ele vai perguntar se você deseja
continuar a instalação, clique em SIM.
Será exibido a tela de apresentação, 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 padrão, pois nomes com espaços ou maiores que 8 digitos poderão
ser problemas no futuro, na hora de configuração dos servidores. Clique em
NEXT, duas vezes, e após clique em INSTALL.
Você deve informar o programa, qual o seu navegador padrão. 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 opções, clique em
OK.
Você deve informar o servidor SMTP (servidor de e-mail), mas como estamos
instalando para fins educativos inicialmente deixaremos esta opção como padrão,
apenas clique em NEXT.
Instalação 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 relógio do Windows, clique sobre o botão direito,
vá até LANGUAGE e selecione PORTUGUES.
Agora clique uma vez com o botão esquerdo sobre o mesmo icone e verá todas as
opções do programa, como parar, reiniciar e iniciar os serviços (php, mysql,
apache).
Os serviços já estão ativos no seu sistema. Por padrão você tem as seguintes
configurações:
Acesso ao servidor web local se dará pelo http://localhost/

Diretório dos seus arquivos públicos será o C:\wamp\www
Gerenciador Mysql – Phpmyadmin (recomendado): http://localhost/phpmyadmin/
Gerenciador Mysql – SQLiteManager: http://localhost/phpmyadmin/
Informações 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.
Após, acesse por http://localhost/XXX (novamente, XXX é o nome da pasta
criada)
Aparecerá a instalação 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
começar o procedimento de instalação do seu site em Joomla! no servidor.

Joomla!
Este procedimento configura o banco de dados com as tabelas necessárias e define

senha de administração, bem como outras configurações.
Para instalar, abra seu navegador e entre no endereço 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 não foi instalado, o Joomla! redirecionará para o diretório de instalação, e você
terá alguns passos a seguir.
No primeiro passo, selecione o idioma para instalação, no nosso caso, PT-BR.
Clique no botão Próximo. Abrirá o Passo 2:

Joomla!
No passo 2, devemos prestar atenção para os requisitos (primeiro retângulo, onde todos
requisitos devem ser atendidos. Nas configurações recomendadas, é permitido que alguma
configuração não esteja adequado para avançar para a próxima etapa.
Clicando no botão Próximo, iremos para o passo 3, que trata da licença de uso. O Joomla! é
um software regido pela licença GNU/GPL.
GNU General Public License (Licença Pública Geral), GNU GPL ou simplesmente GPL, é
a designação da licença para software livre idealizada por Richard Stallman no final da
década de 1980, no âmbito do projeto GNU da Free Software Foundation (FSF).
Ao passar para a próxima parte, o passo 4, configuraremos o banco de dados.
Muita atenção nesta configuração:

Joomla!
Os dados a serem preenchidos nesta etapa são 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 endereço específico. Você
pode descobrir o endereço no Painel de Controle, no item Banco de
Dados MySQL estará informado o Host SQL Remoto
Nome de Usuário Aqui vai o usuário criado no Painel de Controle da sua
hospedagem.
Senha Aqui vai a senha do usuário criado no Painel de Controle.
Nome do Banco de Aqui vai o nome do Banco de Dados criado.
dados
Após realizar esta configuração, pode clicar em Próximo.

Joomla!
Nesta etapa configuramos a camada FTP.

É interessante que seja criado no Painel de Controle da sua hospedagem um usuário de FTP
exclusivamente para esta camada, pois isto aumenta a segurança do seu site.
Após configurar os dados de FTP, a próxima etapa nos pede dados para configuração do
Joomla!, como nome do site e senha para administração.
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 nós que estamos iniciando no trabalho do Joomla!,
o interessante é utilizar a opção “Instalar exemplo de conteúdo”, que aparece conforme
imagem abaixo:
Após realizar este procedimento, clique no botão Próximo.

Pronto, agora para prosseguir é necessário entrar no FTP através 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! não mais
procurará instalar quando inicia, e você terá o site no ar.

Joomla!
Unidade 4
Utilização e Configurações após a
instalação
4.1 Acesso ao site
Após a instalação e remoção ou edição do nome da pasta installation, acessando a
URL onde o Joomla! foi instalado, você verá a página inicial do Joomla!, no seu
template padrão:
Agora, para realizar alterações na estrutura do site, devemos conhecer o ambiente

de administração:

Joomla!
4.2 Acesso a Administração do Joomla!

Para administrar o Joomla!, você deverá entrar com a mesma URL do site, porém
acrescentando/administrator no fim.
Ex: www.enderecodoseusite.com.br/joomla/administrator
Aparecerá a tela de login:
O nome de usuário padrão que a instalação gera é admin, e a senha você escolheu
em uma etapa da instalação.
Na administração, por enquanto está liberado apenas o idioma inglês, mas veremos
como acrescentar o idioma português.
Entre com seu usuário e senha e vamos começar.
4.3 Pacote de Tradução

Para facilitar a utilização do Joomla!, aprenderemos primeiramente como alterar o
idioma para português do Brasil.
Para isto, você deve acessar o site oficial do Joomla: www.joomla.org, e localizar a
opção Extensions, nesta opção, uma das categorias é Language, onde encontra-se
os pacotes de tradução.
Realize o download do pacote de tradução, cuide para realizar o download da
mesma versão do Joomla! que foi instalado.
Após o download, na Adminsitração do Joomla! vá ao menu Extensions, opção
Install/Uninstall.

Joomla!
Busque no campo Package File: o arquivo que você baixou. E após clique em
Upload File & Install
Este procedimento fará com que seja instalado o pacote automaticamente.
Após isto, vá novamente ao menu Extensions, mas agora na opção Language
Manager.
Aparecerá o idioma português, escolha-o e marque como padrão (Default), tanto
na opção Site, quanto Adminsitrador.
Pronto, seu Joomla! está agora traduzido para Português, pronto para ser melhor
explorado.

Joomla!
Unidade 5
Administração básica do Joomla
5.1 Administração de Usuários

O Joomla! permite que mais de um usuário utilize a administração, e que vários
usuários possam se cadastrar para ter acesso a conteúdos restritos.
Quando o usuário se cadastra no Joomla! pelo site, ele recebe um e-mail de
confirmação para dar segurança evitando cadastros falsos, pois só confirmando o
cadastro é que o usuário poderá utilizar sua conta.
O Administrador pode gerenciar estes usuários, desabilitando-os, criando novos
usuários e lhes concedendo permissões maiores.
Para realizar estas alterações, na Administração do Joomla!, vá ao menu Site,
Administrar Usuários.
Nesta tela você poderá realizar as alterações necessárias para gerenciar os

Usuários do seu site em Joomla!.
5.2 Administração de Mídias

Existe um local específico no Joomla! para inserir imagens e arquivos que serão
utilizados posteriormente pelo site, em artigos e páginas. Este local é a
Adminsitração de Mídias.

Joomla!
SUGESTÃO: Crie pastas para organizar os arquivos inseridos, pois esta

organização faz a diferença na hora de dar manutenção no site, quando vai se
utilizar as mídias.
5.3 Configuração Global

No item configuração global podemos configurar dados como descrição do site e
palavras chaves para auxiliar a busca por robôs buscadores, configurar dados do
servidor, como banco de dados e configuração de envio de e-mail do site.
Cuide na alteração destas opções, pois a alteração indevida, por exemplo, das
configurações do banco de dados, pode retirar o site do ar.
5.4 Menus
O sistema de menus do Joomla! funciona como um módulo, pois dependendo do
menu, muda a posição em que ele se encontra, e ainda assim é possível alterar sua
posição pelo Gerenciamento dos Módulos, que veremos mais a frente na apostila.
Para acessar a Adminsitração de Menus, vá ao menu Menus, Administrar Menus.

Joomla!
O menu: Main Menu refere-se ao menu principal. É nele que está a página inicial.
Todos os menus podem ser alterados, incluindo itens e retirando itens. Para tanto,
na coluna: “Itens de Menu” está um botão para acessar esta ação.
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 Conteúdo
É onde encontra-e o importantíssimo gerenciador de artigos. Artigos são os itens
individuais de conteúdo que formam as páginas do site. Temos também as
categorias e as sessões. Trabalharemos com estas informações na apostila, em
unidade posterior.
5.6 Conceitos Joomla!

A diferença de Componentes, Módulos, Plugins e Idiomas, segundo o site oficial
do Joomla! é:
5.6.1 Componentes
O maior e mais complexo tipo de extensão. Componentes são como mini-
aplicações que desenham o corpo principal da página, que podem ser acessados
pela administração para serem configurados.

Joomla!
5.6.2 Módulos
Uma extensão mais flexível e leve usada para renderizar uma página é um módulo.
Pode inclusive ser visto dentro de um componente, como componente de artigos,
de registro.
São usados principalmente para ser inseridos nas posições do template.
5.6.3 Plugin
Uma das mais avançadas extensões para Joomla! é o plugin. Um plugin é uma
sessão de código 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 edição de um artigo ocorre.
5.6.4 Idiomas
Talvez a extensão mais básica e importante seja os idiomas: um pacote que traduz
o Joomla! e seus principais módulos e componentes nativos ou não.
Sobre temas criados, trataremos em outro capítulo da apostila. Vamos aprender
aqui a inserir novos temas, buscar temas e adaptá-los.
Por padrão, os seguintes componentes integram o Joomla!
 Conteúdo
 Banners
 Contatos
 Newsfeeds
 Pesquisar
 Links
5.7 Menu Componentes

Componentes São as extensões mais importantes para um site Joomla!, eles são os
módulos, plugins, modelos (templates) e idiomas.
Para buscar as extensões do Joomla! temos o endereço:
http://extensions.Joomla!.org/ que é o repositório oficial de extensões.

Joomla!
5.7.1 Fonte de Notícias Externas

Quando se tem sites com RSS possibilita a inserção de conteúdo dinâmico interno.
A tecnologia do RSS permite aos usuários da internet se inscrever em sites que
fornecem "feeds" RSS. Estes são tipicamente sites que mudam ou atualizam o seu
conteúdo regularmente.
Normalmente os “feeds” ficam em um endereço como
www.nomedoblog.com.br/feed.
Para inserir uma fonte de notícia externa, basta ir ao menu Componente/ Fonte de
Notícia. Pode-se configurar as Categorias e as Fontes.
Configurando a fonte. Clique no botão 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 Formulário de Contatos

Contato é um componente nativo do Joomla!, devemos configurar os formulários
de contato, que podem ser múltiplos ou um só, e posteriormente deve ser inserido
via menu da forma desejada.
Para criar um formulário, vá ao menu Componente/Contatos (podemos configurar
categorias e os próprios formulários)
Criando Formulário:
No formulário você pode configurar os dados que aparecerão, e conta com
parâmetros que podem inclusive banir determinados e-mails. Veja na imagem a
seguir.

Joomla!
5.8 Extensões
As extensões são de diversos tipos: módulos, plugins,
templates e idioma. Diferente dos itens abordados do menu
componentes, que são fundamentais para a funcionalidade de
um site Joomla!, as extensões são os outros itens que
agregarão o site, que podem ser instalados e desinstalados
conforme a necessidade.
5.8.1 Instalar e Desinstalar extensões

O link de menu Instalar/Desinstalar direciona-nos para o Gerenciador de
Extensões, onde pode-se inserir novas ou retirar extensões que não se quer mais:

Joomla!
O Joomla! permite instalação de extensões em arquivos zip instaláveis. A versão

1.5 irá automaticamente detectar o tipo de extensão e realizará a instalação.
5.9 Gerenciador de Módulo

O gerenciador de módulo (Menu Extensões/Administrar Módulo) controla os
parâmetros e alocação de todos os módulos do site Joomla!, como mostrado na
imagem abaixo:
Módulos são como mini-componentes. O que os diferenciam é que o componente

sempre exibe o seu conteúdo no corpo principal e o módulo exibe em local
designado.

Joomla!
Por Exemplo: O módulo Banner pode ter seu local atribuído no topo, ou,
dependendo do template e estratégia usada, ficaria melhor na posição esquerda.
5.10 Gerenciador de Plugin

O gerenciador de plugin (Menu Extensões/Administrar Plugin) é onde você pode
controlar as opções de plugins instalados.
Alguns plugins não apresentam opções, mas sim servem para fins específicos, a
exemplo do plugin “Content – Email Cloaking”, que busca nas páginas endereços
de e-mails e substitui no código-fonte por JavaScript, evitando assim que
spammers busquem através de programas específicos os endereços para envio de
spam.
5.11 Gerenciador de Temas

O gerenciador de temas (Menu Extensões/Administrar Tema) é onde você pode
controlar os templates, instalando e aplicando os mesmos ao seu site Joomla!.
Encontra-se nesta página ainda a opção de instalar temas para o site ou para a parte
de administração.

Joomla!
Unidade 6
Conteúdo dinâmico: Artigos
Os artigos servem para inserirmos notícias e conteúdos no site Joomla! de forma
dinâmica.
Este é o tópico no qual devemos mais ter cuidado, porque um conteúdo bem
distribuído e de fácil acesso é a garantia de sucesso na visitação do seu web site, e
o contrário pode determinar o fracasso do mesmo.
Antes de sair criando artigos, o correto é configurar as Sessões e as Categorias
antes, afinal, este é um Sistema Gerenciador de Conteúdo, e sua principal função e
organizar o conteúdo.
Antes de mais nada, faça-se um desafio. Não designe a função organização para o
Joomla!. Faça você antes um mapa das informações. Desenhe um rascunho de
como deseja que o conteúdo seja organizado.
Abaixo montamos um exemplo para facilitar sua vida:
Página Inicial
 Sobre nós
 Serviços
 Fale Conosco
 Blog
Sobre Nós Serviços Fale Conosco Blog

Texto sobre a Método de trabalho Dados como Telefone, Idéias, novidades e
empresa com uma foto  Gráfica Digital e-mail, mapa.
notícias sobre os
 Plotter
serviços
Gráfica Digital Plotter

Muita informação e Muita informação e
imagem sobre imagem sobre
6.1 Sessões
As sessões de artigos servem para organizar o material do site. Deve-se criar as
sessões individualizando os itens do site, pois ao criar os menus posteriormente, é

Joomla!
possível apresentar uma lista de todos os artigos de terminada sessão, facilitando a

navegação do site
Para criar novas sessões e administrar as já criadas, vá ao menu Conteúdo,
Administrar Sessão
6.2 Categorias
Após criar as Sessões, as Categorias são necessárias e servem como subseção,
podendo uma sessão ter várias categorias. Ajudam também na organização e na
inclusão de menus do web site.
Ao criar uma nova categoria, pode-se definir também se o mesmo será público ou
restrito aos registrados do site.
6.3 Criando Artigos

Artigos de conteúdo são a mais baixa camada de hierarquia e são os mais
importantes. Por se tratar diretamente da informação a se passar para o usuário do
web site. É a famosa “página”, como o usuário chama.
Ao inserir um novo artigo, é possível escolher em qual Sessão e Categoria ele se
enquadra, se deve aparecer na página inicial ou não, e ainda permite a inserção de
metadados, como forma de ajuda nas buscas por robôs de buscadores na internet.
Para inserir um novo artigo, vá ao menu Conteúdo – Administrar Artigos:

Joomla!
Clicando no botão Novo, um editor aparecerá e podemos incluir o conteúdo que

desejarmos.
Ao rodapé na inserção de artigos, temos 3 botões importantes:
O botão Imagem permite a inserção 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

contrário, no fim da tela tem a opção de envio de novas imagens, após realizar o
upload por este campo, é possível 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 botão Quebra de página serve para que para textos longos, possa ter várias
páginas para facilitar a leitura e não estragar a parte visual do site.
Ao inserir uma quebra de página, no frontend aparecerá uma numeração para troca
de página para continuação do artigo.
Outro botão que é bastante importante é o botão Leia Mais...
O botão leia mais serve para que, ao apresentar na capa ou com vários itens de
categoria, o seu texto não fique muito extenso, podendo em determinado ponto ter
um botão “leia mais...” para que ao clicar apareça o texto completo.

Joomla!
Unidade 7
Menus
7.1 Integração Artigo/Menu
E como colocar um artigo como link de menu? Esta é uma tarefa importante. No
menu podemos lançar todos os artigos de determinada categoria, ou diretamente
um artigo. Vamos à prática:
Crie um artigo, escolha uma sessão e uma categoria. Se ainda não tiveres
cadastrado nenhuma categoria ou sessão, isto deve obrigatoriamente ser feito.
Depois disto, acesse a Administração, o menu Menus e Main Menus (mas se
desejar colocar este artigo em outro menu, é só escolher outro menu)
Clique no botão Novo, para incluir um novo item de menu, escolha Link
Interno/Artigos/Artigo/Layout Padrão de Artigo:
Agora, na lateral direita, em Parâmetros (Básico) clique para escolher um artigo:

Joomla!
Escolha um título e clique em Salvar. Logo após, teste o site e verifique o novo
item de menu.
7.2 Menu em Layout do Blog de Categoria

Além da possibilidade de mostrar apenas um artigo, temos como mostrar um
resumo de cada notícia mostrando-os como “Blog de Categoria”: Uma opção de
menu do Joomla!.
Para este exemplo ficar de fácil visualização, você deve ter cadastrado na categoria
desejada no mínimo 5 artigos, e se eles tiverem muito conteúdo, 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 Padrão de Categoria

O Layout Padrão de Categoria lista uma tabela com todos os artigos de uma
determinada categoria. A montagem é idêntica 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 Padrão de Categoria. Veja o frontend.
7.4 Menu do Componente Contato

O componente interno contato deve ser
inserido no menu através da Administração de
Menus, porém antes deve ser criado o
formulário pelo menu Componentes/Contato.
No caso de ter vários formulários de contato, é
possível listar como “Layout de Categoria de
Contato”, que no site Joomla! aparecerá uma
lista dos formulários. Um exemplo é ter
formulários por setor ou filiais.
Normalmente é utilizado “Layout de Contato Padrão” para apresentar o
formulário.

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 formatação do
template/layout, este pode aparecer como
menu pop-up.

Joomla!
Unidade 8
Extendendo o Joomla!
Dificilmente você encontrará um site Joomla! que não tenha sido adicionado novas
funcionalidades, até porque sem estas funcionalidades o site ficaria básico.
Existem centenas de extensões disponíveis, algumas gratuitas, outras pagas, que
podem simplesmente resolver o problema que você precisa solucionar por um
preço que realmente é compensatório.
Como já vimos em outra unidade, as extensões são de diversos tipos: módulos,
plugins, templates e idioma. As extensões são itens que agregarão o site, que
podem ser instalados e desinstalados conforme a necessidade.
Já aprendemos a realizar as instalações, agora vamos focar em conhecer as
principais extensões do Joomla!
8.1 Extensões úteis

Apresentaremos algumas extensões e pode acontecer de algumas boas extensões
ficarem de fora da nossa lista. Indicamos sempre buscar em fórum da área e no site
http://extensions.joomla.org ou em http://extensionprofessionals.com
8.1.1 Comentários
Jom Comment é um poderoso sistema de comentários
baseado em Ajax para o site Joomla! Contempla sistema
Captcha, evitando que spans apareçam no site, é um sistema
profissional e pago. Existem obviamente vários sistemas
similares no site oficial de extensões, ao lado temos a
imagem do menu do site oficial de extensões 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
catálogo. O site do projeto é http://virtuemart.net

Joomla!
8.1.3 Galerias de Imagem

Existem várias galerias de imagens, e boas galerias. Citamos a Phoca Galerry,
Exposé e Ozio Galery. Estas galerias são gratuitas, e contemplam opção de
visualizar a imagem maior. A Ozio trás mais modelos de apresentação, já a Phoca
é uma galeria mais fácil para ser utilizada, possibilitando mudança de layout.
8.1.4 Formulários
Um bom componente de formulário é o perForms
(http://joomlacode.org/gf/project/performs), com suporte a Captcha, cria
formulários simples em segundos.
Outro muito usado e gratuito é o JForms
(http://extensions.joomla.org/extensions/contacts-and-feedback/forms/6965)
8.1.5 Agenda/Calendário
Uma boa ferramenta de agenda e eventos é o
EventList, que além de criar uma agenda, gerencia
os compromissos no site, cadastrando locais, fotos
dos mesmos, gerando em um calendário o vínculo
com a agenda pelas datas.
Ao clicar no evento, abre então todos os detalhes
cadastrados para o mesmo.
8.1.6 Slideshow
O JPG Flash Rotator 2 permite a você selecionar a partir de uma série de imagens
para usar em um banner slide show no site Joomla!. Contempla mais de 5
transações Flash diferentes e permite outras personalizações, como cor de fundo.
8.1.7 Google Maps

Um plugin que exibe um ou mais mapas do Google dentro de itens de conteúdo 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 capítulo 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 preços
bem razoáveis.
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/
Além de uma boa pesquisa nos buscadores, que se encontra muito destes
templates.

Joomla!
Unidade 9
Utilizando um template próprio em CSS
Nesta unidade colocaremos em prática o os passos para adaptar um template
Joomla!. Especificamente vamos utilizar CSS (Cascading Style Sheets) para
criação de um layout sem uso de tabelas.
O que é um Template Joomla?
Um modelo Joomla! é um grupo de arquivos que o Joomla! controla na
apresentação do seu conteúdo. Não é um web site e não é um design completo,
mas a base para a visualização do seu web site Joomla!
Vantagens e desvantagens de usar um modelo CMS, da forma usada pelo
Joomla!:
 Há uma separação entre o conteúdo e a apresentação, especialmente
quando usado CSS. Isto é bom pois atende completamente os padrões
modernos da Web.
 Uma nova aparência pode ser aplicada a qualquer momento ao site sem
alterar o conteúdo.
 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 propósito é 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 criação, já temos pronta as imagens, que serão
colocadas dentro da pasta do template alfa_sport, na pasta img. O nome da pasta
de imagens não é uma regra, mas um bom costume de organização, já que as
imagens puderam ficar soltas na pasta do template, porém desorganizadas.

Joomla!
9.1.1 O arquivo templateDetails.xml

Este arquivo deve incluir todos os arquivos que são parte do template. O nome
deste arquivo tem que ser exatamente este: templateDetails.xml (inclusive com o
D maiúsculo). Ele inclui informações como nome do autor, contato do autor e
versão do tema.
Abaixo segue o exemplo do tema que trabalharemos no nosso exercício, e
posteriormente o comentário 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 código mais importantes:
<install version="1.5" type="template">
Instruções para o instalador que diz que o tipo deste documento é template, e a
versão do Joomla! é 1.5 (mas fica compatível com versões 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. Não deve-se usar caracteres especiais nem espaço em branco.
<creationDate>10/04/2010</creationDate>
A data de criação do modelo. O formato em que se apresenta a data não há uma
regra, podendo aparecer o mês e o ano, até por extenso.
<author>Andreo Costa</author>
O nome do autor do tema aparece nesta linha.
<copyright>GPL</copyright>
Qualquer informação 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 versão do template.
<files></files>
Arquivos usados no template, estes ficam assiciados dentro deste código através de
outro código: <filename> </filename>.
<positions> </positions>
As posições do módulo disponíveis para o template.
<params> </params>

Joomla!
Eles descrevem os parâmetros que podem ser passados para permitir funções
avançadas do template, como geralmente, a cor do modelo.
9.1.2 O arquivo index.php antes dos códigos Joomla!

O que faz o arquivo índex.php? É um arquivo que na realidade contempla bem
mais HTML do que PHP, porém, para que rode o código PHP, devemos tê-lo com
a extensão 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 código que representa um layout, e posteriormente
vamos incluir os comandos para que o Joomla! faça parte da estrutura de conteúdo
do site.
O código HTML que temos, ainda sem os códigos Joomla!, são 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 código, 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 extensão .css.
Abaixo segue nosso código 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 aparência:
9.1.4 O arquivo index.php depois dos códigos Joomla!

Agora devemos adaptar o arquivo índex.php para que esteja dentro do padrão
Joomla! É uma tarefa tranquila, pois trata-se apenas de ajustes pequenos, que serão
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 declaração PHP serve simplesmente para ter certeza que o arquivo não vai se
acessado diretamente por segurança.

Joomla!
O DOCTYPE não muda, tem que ser desta forma para que seja usado XHTML na
forma Transicional, acatando tanto código 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 código <jdoc:include type="head" /> serve para incluir automaticamente o

título, e as tags de descrição que auxiliam a busca pelos robôs dos buscadores.
Estas informações são alteradas nas Configurações Globais.
Sobre as tags <link> que aparecem, as duas primeiras servem para buscar o CSS
genérico 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 conteúdo posicionado
em “top” no Joomla! o style está indicando que o conteúdo aparecerá em xhtml,
evitando em muitos módulos a utilização 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 incluímos a posição “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 incluímos a posição “user2”.
Na <div> de classe “menulateral”:
<div class="menulateral"> <jdoc:include type="modules" name="left"
Na div que receberá o menu lateral, usamos a posição “left”. Note que trabalhamos
com as posições padrão 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 posição “breadcrumbs”, onde
costuma-se deixar o módulo de mesmo nome que serve para auxiliar a navegação.
A segunda linha é a posição que todo o conteúdo 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 posição “footer” para indicar itens para o rodapé.
9.1.5 Melhorias no arquivo CSS

Devido a maneira diferente que os navegadores apresentam as formatações do site,
o principal deles é dar margens e espaçamentos diferentes para mesmas tags, uma
declaração importante a se fazer é esta:
*{
margin: 0;
padding: 0;
}
Este código fará com que globalmente todas as tags fiquem com margem e
espaçamento interno zerado. Quando desejar do contrário, é só declarar via CSS
para que isto aconteça. Não é fácil?
Configure também a tag <body>, informando qual a tipografia a ser usada no site
por padrão.

Joomla!

Joomla!
Unidade 10
Dicas úteis
10.1 Otimizando o site Joomla! para obter mais
acessos
O processo de otimização de site é um assunto polêmico, porque existem no

mercado muitas opiniões referente a práticas para se conseguir mais visitas.
Não é da noite para o dia que um site aparece na primeira página do Google, mas
algumas iniciativas fazem com que isto ocorra mais rapidamente que o natural.
A otimização está nos detalhes:
O título da página, por exemplo, deve sempre estar associado com o que o
conteúdo trás.
Breadcrumb, por
exemplo, é um módulo
que sempre que possível
vale a pena usar, pois
ele mostra o caminho que está se navegando e ajuda na indexação do conteúdo.
Existem também algumas extensões específicos para auxiliar na indexação do site

Joomla!, como “Tags for Joomla!” que cria lista de tags, tags populares e ajuda na
indexação do conteúdo.
Uma configuração básica que deve ser feita é
na configuração global, marcar Sim nas
configurações de SEO, porém, não é só isto
que faz com que estas configurações
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 módulo 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 vários propósitos. As
regras do mod_rewrite serão 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 não entrar em loop e ficar inacessível.

Joomla!
O que é uma URL amigável para o buscador?

Uma URL amigável é uma URL que seja bem aceita pelo motor de busca,
normalmente a URL é longa, contém valores dinâmicos e dificilmente contém
palavras-chave. Já as URLs amigáveis são curtas, estáticas e contém as keywords
que se deseja obter maior relevância.
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, faça um backup do mesmo antes e depois refaça
o procedimento para substituí-lo.
Pronto, o endereço 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 extensões do Joomla! podem não funcionar corretamente com a opção de
URL Amigáveis ativado. Recomenda-se sempre que esta função estiver habilitada,
que se teste todo o site.
Para problemas com esta opção, pode-se obter extensões de URL amigáveis, como
por exemplo o JoomSEF e o sh404.
10.2 Vinculando o Joomla! com o Banco de Dados

O arquivo configuration.php contém os dados do Banco de Dados. Caso seja
necessária a troca do nome do banco, por um backup ou troca de servidor, conheça
como este arquivo funciona e como pode ser editado:
Mas o que é este arquivo?
Este arquivo é responsável por conectar o seu site com o Banco de Dados. Além
disto, ele contempla informações importantes de Search Engine Optimization,
técnica responsável para alavancar a audiência do site pelos buscadores na
internet, mas sobre isto trabalharemos em outra unidade à frente.
Com o arquivo aberto, localize as linhas correspondentes a configuração da base
de dados:

Joomla!
E vamos preencher os dados corretamente. Abaixo a tabela que explica cada uma
das variáveis que serão alteradas:
$host Aqui configuramos o nome do servidor de banco de dados, que
poderá ser localhost ou poderá ter um endereço específico. Você pode
descobrir o endereço no Painel de Controle, no item Banco de Dados
MySQL estará informado o Host SQL Remoto
$user Aqui vai o usuário criado no Painel de Controle da sua hospedagem.
$password Aqui vai a senha do usuário 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
alteração manual neste arquivo poderá comprometer o funcionamento do Joomla!,
portanto, preste bem atenção neste procedimento.
Após alterado, salve o arquivo, que passaremos a fazer o upload para o servidor
web.

Joomla!

Joomla!
Unidade 11
Novas versões
11.1 Versões novas do Joomla!
O Joomla! nesta apostila foi tratada na versão 1.5 e atualmente está na versão 1.7.
Devido a incompatibilidade das versões, alguns componentes, plugins e/ou
módulos ainda não existem ou não funcionam para novas versões.
Por isso alguns cuidados devem ser tomados ao usar outras versões do Joomla!. É
bom vermos se o arquivo que vamos baixar do Joomla! tem compatibilidade.
Nos casos de haver o aplicativo para novas versões, pode ser representado desta
maneira, argumentando que é Nativo do 1.5 e serve às extensões 1.6 e 1.7.
No Joomla! 1.6 passou a ser melhorado algumas funções, entre elas destacam-se:
 Legacy Mode excluído;

Joomla!
 Novo Controle de níveis de acesso (ACL) tendo um novo gerenciamento de

usuários com um controle mais específico;
 Níveis de organização do conteúdo 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 instalação padrão;
 Nomeclatura dos artigos de FRONTPAGE(página principal) agora chama-se
FEATURED(destaque);
 Novo layout de administração e mudanças na navegação para melhorar a
usabilidade;
 Dois novos botões: “Salvar e Novo” e “Salvar como cópia”;
 Redirecionamento de links (Agora sem desculpas para os famosos erros
404).
 Módulos com data de expiração;
No Joomla! 1.7 foram mantidas algumas funções do 1.6 e outras atribuídas:

 Artigos criados em lote;

Joomla!
 Módulos com possibilidade de background-image sem precisar acessar o

CSS;
 Compatibilidade com a versão 1.6;
 Possibilidade de atualização de versão mantida;
A previsão de duração do Joomla! 1.7 é de 6 meses. E há uma estimativa de
que o Joomla! 1.8 seja lançado no início de 2012. Com uma duração
aproximada de dois anos, quando será lançado o Joomla! 1.9 que terá duração
curta o suficiente para aguardarmos o mítico Joomla! 2.0, com data de
lançamento prevista para 2015-2016, acreditando que a W3C já tenha
começado a implementar o Html 5.

Apostila de JOOMLA

Enviado por

Dados do documento

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 de JOOMLA

Enviado por

Direitos autorais:

Formatos disponíveis

Joomla!

Todos os direitos reservados para Alfamídia Prow.

As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

12/2011 – Versão 1.3

2 2011 Alfamídia Prow

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

3 2011 Alfamídia Prow

7.1 INTEGRAÇÃO ARTIGO/MENU ......................................................................................................... 37

4 2011 Alfamídia Prow

1.2 Estrutura do Curso

5 2011 Alfamídia Prow

O Joomla! é um exemplo de CMS, utilizado para criação de web sites dinâmicos,

2.2 Tecnologias envolvidas

2.3 Comparativos de métodos de criação de um web

6 2011  Alfamídia Prow.

Além do webdesign, muitos programadores preferem utilizar os frameworks, pois

2.4 Hospedagem de sites compatível com Joomla

7 2011  Alfamídia Prow.

3.1 Baixando o aplicativo Joomla! atualizado

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

8 2011  Alfamídia Prow.

em Joomla! ficará no seu servidor de hospedagem ou então utilizar em um

3.2 Configurando o banco de dados no provedor de

3.2.1 Criando o banco de dados

9 2011  Alfamídia Prow.

Entrando em “Banco de dados MySQL”, a primeira opção da tela é para criar um

3.2.2 Criando o usuário do banco de dados

10 2011  Alfamídia Prow.

3.2.3 Associando o Banco de dados com o usuário criado

11 2011  Alfamídia Prow.

3.3 Enviando os arquivos Joomla! para o servidor

12 2011  Alfamídia Prow.

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

13 2011  Alfamídia Prow.

Aguarde até que todos os arquivos sejam transferidos.

3.4 Utilizando servidor local para instalação

3.4.1 Instalando o WAMP Server

14 2011  Alfamídia 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  Alfamídia Prow.

Este procedimento configura o banco de dados com as tabelas necessárias e define

16 2011  Alfamídia Prow.

17 2011  Alfamídia Prow.

18 2011  Alfamídia Prow.

Nesta etapa configuramos a camada FTP.

Após realizar este procedimento, clique no botão Próximo.

19 2011  Alfamídia Prow.

20 2011  Alfamídia Prow.

Agora, para realizar alterações na estrutura do site, devemos conhecer o ambiente

21 2011  Alfamídia Prow.

4.2 Acesso a Administração do Joomla!

4.3 Pacote de Tradução

22 2011  Alfamídia Prow.

23 2011  Alfamídia Prow.

5.1 Administração de Usuários

Nesta tela você poderá realizar as alterações necessárias para gerenciar os

5.2 Administração de Mídias

24 2011  Alfamídia Prow.

SUGESTÃO: Crie pastas para organizar os arquivos inseridos, pois esta

5.3 Configuração Global

25 2011  Alfamídia Prow.