Curso Joomla para Web Designers

Prévia do material em texto

Joomla! 
 
 
 
Joomla! 
 
 
 
2 2011 Alfamídia Prow 
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 
Joomla! 
 
 
 
3 2011 Alfamídia Prow 
 
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! 
 
 
 
4 2011 Alfamídia Prow 
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! 
 
 
 
5 2011 Alfamídia Prow 
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! 
 
 
6 2011  Alfamídia Prow. 
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. 
Joomla! 
 
 
7 2011  Alfamídia Prow. 
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 oconhecimento 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! 
 
 
8 2011  Alfamídia Prow. 
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! 
 
 
9 2011  Alfamídia Prow. 
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! 
 
 
10 2011  Alfamídia Prow. 
 
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! 
 
 
11 2011  Alfamídia Prow. 
 
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! 
 
 
12 2011  Alfamídia Prow. 
 
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! 
 
 
13 2011  Alfamídia Prow. 
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! 
 
 
14 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 
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! 
 
 
15 2011  Alfamídia Prow. 
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. 
http://localhost/?phpinfo=1
http://localhost/XXX
Joomla! 
 
 
16 2011  Alfamídia Prow. 
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! 
 
 
17 2011  Alfamídia Prow. 
 
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! 
 
 
18 2011  Alfamídia Prow. 
 
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 
dados 
Aqui vai o nome do Banco de Dados criado. 
Após realizar esta configuração, pode clicar em Próximo. 
Joomla! 
 
 
19 2011  Alfamídia Prow. 
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! 
 
 
20 2011  Alfamídia Prow. 
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! 
 
 
21 2011  Alfamídia Prow. 
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! 
 
 
22 2011  Alfamídia Prow. 
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! 
 
 
23 2011  Alfamídia Prow. 
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! 
 
 
24 2011  Alfamídia Prow. 
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! 
 
 
25 2011  Alfamídia Prow. 
 
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 naapostila. 
Para acessar a Adminsitração de Menus, vá ao menu Menus, Administrar Menus. 
Joomla! 
 
 
26 2011  Alfamídia Prow. 
 
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! 
 
 
27 2011  Alfamídia Prow. 
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! 
 
 
28 2011  Alfamídia Prow. 
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! 
 
 
29 2011  Alfamídia Prow. 
 
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! 
 
 
30 2011  Alfamídia Prow. 
 
 
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! 
 
 
31 2011  Alfamídia Prow. 
 
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! 
 
 
32 2011  Alfamídia Prow. 
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! 
 
 
33 2011  Alfamídia Prow. 
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: 
 
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, é 
Página Inicial 
 Sobre nós 
 Serviços 
 Fale Conosco 
 Blog 
Sobre Nós 
Texto sobre a 
empresa com uma foto 
Serviços 
Método de trabalho 
 Gráfica Digital 
 Plotter 
Fale Conosco 
Dados como Telefone, 
e-mail, mapa. 
Blog 
Idéias, novidades e 
notícias sobre os 
serviços 
Gráfica Digital 
Muita informação e 
imagem sobre 
Plotter 
Muita informação e 
imagem sobre 
Joomla! 
 
 
34 2011  Alfamídia Prow. 
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émse 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! 
 
 
35 2011  Alfamídia Prow. 
 
 
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! 
 
 
36 2011  Alfamídia Prow. 
 
 
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! 
 
 
37 2011  Alfamídia Prow. 
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! 
 
 
38 2011  Alfamídia Prow. 
 
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) 
Clique no botão Novo, para incluir um novo item de menu, escolha Link 
Interno/Artigos/Categoria/Layout do Blog de Categoria: 
 
 
Joomla! 
 
 
39 2011  Alfamídia Prow. 
 
Salvando este item de menu, ao clicarmos no mesmo teremos a seguinte tela: 
 
Joomla! 
 
 
40 2011  Alfamídia Prow. 
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) 
Clique no botão Novo, para incluir um novo item de menu, escolha Link 
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! 
 
 
41 2011  Alfamídia Prow. 
 
 
 
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! 
 
 
42 2011  Alfamídia Prow. 
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! 
 
 
43 2011  Alfamídia Prow. 
 
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çõesFlash 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! 
 
 
44 2011  Alfamídia Prow. 
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! 
 
 
45 2011  Alfamídia Prow. 
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! 
 
 
46 2011  Alfamídia Prow. 
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: 
 
 
 alfa_sports 
 10/06/2010 
 Andreo Costa 
 GPL 
 andreo@parque.net.br 
 http://www.alfamidia.com.br 
 1.1 
 Exemplo para treinamento Joomla! 
 
 index.php 
 templateDetails.xml 
 css/template.css 
 img/barra.jpg 
 img/barra_dir_logo.jpg 
 img/barra_esq_logo.jpg 
 
 
 user1 
 user2 
 breadcrumb 
 top 
 left 
 banner 
 footer 
 
 
Joomla! 
 
 
47 2011  Alfamídia Prow. 
 
 Azul 
 Vermelho 
 
 
 
Agora explicando as partes do código mais importantes: 
 
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) 
alfa_sports 
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. 
10/04/2010 
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. 
Andreo Costa 
O nome do autor do tema aparece nesta linha. 
GPL 
Qualquer informação de direito autoral vai nesta linha. 
andreo@parque.net.br 
Aqui pode-se colocar o e-mail do autor 
http://www.alfamidia.com.br 
A URL do web site do autor. 
1.1 
A versão do template. 
 
Arquivos usados no template, estes ficam assiciados dentro deste código através de 
outro código: . 
 
As posições do módulo disponíveis para o template. 
 
Joomla! 
 
 
48 2011  Alfamídia Prow. 
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: 
 
 
 
 
Template para Joomla! 
 
 
 
 
 
 topo aqui 
 
 
 Barra esquerda aqui 
 
 
 Logo aqui 
 
Joomla! 
 
 
49 2011  Alfamídia Prow. 
 
 Barra direita aqui 
 
 
 
 
 Menu lateral aqui 
 
 
 Conteudo aqui. 
 
 
 
 Rodapé Aqui 
 
 
 
 
 
9.1.3 O arquivo CSS (Cascading Style Sheets) 
Somente aquele código, sem nenhum arquivode 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! 
 
 
50 2011  Alfamídia Prow. 
#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! 
 
 
51 2011  Alfamídia Prow. 
} 
.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! 
 
 
52 2011  Alfamídia Prow. 
 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 : 
 
 
Esta declaração PHP serve simplesmente para ter certeza que o arquivo não vai se 
acessado diretamente por segurança. 
Joomla! 
 
 
53 2011  Alfamídia Prow. 
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 
 
 
 
 
template ?>/css/template.css" type="text/css" /> 
 
O código 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 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 : 
 
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 de classe “barra_esq”: 
 getCfg('sitename');?> 
Colocamos esta tag PHP na div da esquerda para conhecermos a maneira de usar o 
nome do site no layout. 
Na de classe “logo”: 
 
Aqui incluímos a posição “user1”. 
Na de classe “barra_dir”: 
Joomla! 
 
 
54 2011  Alfamídia Prow. 
 
Da mesma forma que a anterior, aqui incluímos a posição “user2”. 
Na de classe “menulateral”: 
 
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 de classe “conteudo”: 
 
 
 
 
 
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 de classe “rodape”: 
 
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 , informando qual a tipografia a ser usada no site 
por padrão. 
Joomla! 
 
 
55 2011  Alfamídia Prow. 
 
Joomla! 
 
 
56 2011  Alfamídia Prow. 
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!57 2011  Alfamídia Prow. 
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! 
 
 
58 2011  Alfamídia Prow. 
 
 
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! 
 
 
59 2011  Alfamídia Prow. 
 
Joomla! 
 
 
60 2011  Alfamídia Prow. 
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! 
 
 
61 2011  Alfamídia Prow. 
 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! 
 
 
62 2011  Alfamídia Prow. 
 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.