Joomla! 1.

Construindo um sistema online no mínimo

tempo possível.
 Capítulo 1
 O que é CMS ?
 Quando optar por um CMS?
 O que é o Joomla! ?
 Quais suas vantagens?
 Quais suas desvantagens?
 Joomla vs. Drupal
 Referência de páginas em Joomla!
 A Estrutura do Joomla!
 Direitos de acesso
 Conteúdos
 Extensões
 Suportes do Joomla!
 O que é CMS?
CMS ou Content Management System, é um
programa desenvolvido para facilitar a gestão
de um conteúdo (dados)
 Quando optar por um
CMS?
 Quais as reais necessidades do cliente?
 Qual a complexidade do projeto?
 Qual o prazo e orçamento do projeto?
 Quais as particularidades do projeto?
 O que é o Joomla! ?
WCMS (Web Content Management System)
 Quais suas vantagens?
• É free
• É um dos mais utilizados do mundo
• Equipe de desenvolvimento de mais de
45.000 programadores registrados
• Open Source
• Fácil instalação e manutenção
• Não precisa contratar programadores ou
designers
• Vem com diversas funcionalidades prontas
 Quais suas
desvantagens?
• Pesa mais no seu servidor, do que se você
programasse o sistema
• O servidor deve estar apto a receber o
Joomla!
• É mais difícil alterar algo pronto pro Joomla!
ou programar algo pra ele
• Provavelmente não atenderá suas
necessidades se seu sistema tiver muitos
detalhes incomuns
 Joomla! vs. Drupal
• O Drupal é voltado para integração de
sistemas heterogêneos, dá ao
desenvolvedor mais liberdade, porém é
mais complexo para aprender
• O Joomla! também dá ótimo suporte a
integração, mas com interface mais fácil e
ágil.
 Referência de páginas
em Joomla!
www.cnt.com.br
www.porsche.com.br
www.danone.com/
www.joomla.org
www.adagaffneyshaff.com
www.janettenorton.info
www.urth.tv
www.unric.org
www.academiadopalestrante.com.br
www.galeriamalivillasboas.com.br/site/
www.oscarfilho.com.br/standup/
www.rapkolik.net/
 Estrutura do Joomla!

1. Front-End: É o seu site da forma que seus

visitantes e usuários registrados vêem.
2. Back-End: É a área de administração, onde
você define como será a estrutura vísivel de
seu site, assim como os recursos do Joomla!
que serão utilizados na implementação de seu
site. Eg.: Configuração, manutenção, limpeza,
criação de estátisticas, áreas restritas aos
usuários registrados e criação de novos
conteúdos. o Back-End fica numa URL
diferente do site.
 Direitos de acesso
 Há vários grupos de acesso pré-definidos
no Joomla! Cada um com um grau de
direitos e responsabilidades diferentes. Por
padrão, você começa como Super-
Administrador.
Direitos de acesso

Grupos de Usuários com acesso à Front-End do Joomla!

Grupo Direitos de Acesso
Registrado Pode Logar-se e ver o que o visitante comum não pode.

Autor Ele faz tudo que o registrado faz e pode escrever

informações além de alterar sua informação.
Geralmente há um link no menu de usuário para tal
Editor Faz tudo que um autor faz e ainda pode escrever e
mudar qualquer informação do front-end
Publicador Faz tudo que um editor faz e ainda decide o tempo de
vida de alguma informação do site. Pode publicar e
despublicar o que quiser
Direitos de acesso
Grupos de Usuários com acesso ao Back-End do Joomla!
Grupo Direitos de Acesso
Gerente Pode criar conteúdo e ver várias informações sobre o sistema.
Eis o que ele não pode fazer:
•
Administrar Usuários
•
Instalar módulos ou componentes
•
Modificar um usuário para super administrador ou modificar
um trabalho de um super administrador na opção Site |
Configuração
•
Mandar emails em massa para todos os usuários
•
Modificar ou instalar templates ou arquivos de linguagens
Administrador O administrador não pode fazer:
•
Modificar um usuário para super administrador ou modificar
um trabalho de um super administrador na opção Site |
Configuração
•
Mandar emails em massa para todos os usuários
•
Modificar ou instalar templates ou arquivos de linguagens
Super Pode executar TODAS as funções do Joomla! Apenas ele pode
Administrador criar um super administrador ou modificar um usuário para
Super Administrador.
Usuários especiais e
Informações de Contato
Usuários especiais - Por padrão, todos com
direitos acima de autor, são considerados por
padrão usuários especiais. Você pode limitar
certos conteúdos para ser visualizados apenas
por esse grupo.
Informações de Contato – Essa seção
mostra qual formulário de contato está
vinculado a quem. No Joomla! é possível você
ter vários formulários de contato.
 Conteúdos

São os dados que irão aparecer no seu site:

§ Textos
§ Imagens
§ Vídeos
§ Etc.
 Extensões

Componentes
Templates
Módulos
Plug-ins
 Componentes:

O Joomla! foi feito para se adaptar e expandir

de acordo com suas necessidades.São
extensões que acrescentem funcionalidades
ao Joomla! e geralmente tenha sua própria
área na administração. Eg.: uma loja online,
gerenciamento de usuários, fórum, sistema de
newsletter, galeria de imagens são os mais
comuns.
 Templates:

É a parte visual do site, além de cores,

tamanho de fontes, background,
espaçamento, onde será dividido o
posicionamento do conteúdo, menu, enfim,
tudo que é realmente ligado ao visual e é
composto de pelo menos um arquivo HTML ou
PHP, XML e CSS.
 Módulos:

É um campo no front-end que mostra onde os

dados de um componente. os módulos são
mostrados em espaços pré-definidos do
template. Módulos especiais pertinentes aos
componentes, são usados para integrar o
conteúdo da forma desejada em um template.
Eg.: Um módulo mostra a quantidade de
usuários online, enquanto outro módulo
mostra as 5 notícias mais recentes na página
inicial do seu site.
 Plug-Ins:
Responsáveis por juntar conteúdo, sistema e
outros plug-ins programados por você e por
terceiros. Ah! Já ia me esquecendo de dizer!
Qualquer um que programe em PHP pode criar
suas próprias extensões pra Joomla!
Um outro conceito é: Plugin é uma seção de
código que é executado quando um evento pré-
definido acontece dentro Joomla. Editores são
Plugins, e são executados quando o Joomla chama
o evento onGetEditorArea. O uso de plugin
permite que o desenvolvedor possa mudar o
modo como os seus códigos reagem a eventos,
dependendo, é claro de quais Plugins estão
instalados.
 Suportes do Joomla!

Joomla! Suporta XML-RPC (Remote Procedural

Call) que permite que vários programas
comuniquem-se entre si. Eg.: Integre com
Joomla! uma imagem do FlickR ou um post do
wbloggar. O Joomla! também tem uma
interface de abstração que suporta diversos
tipos de bases de dados, no momento sua
compatibilidade é com MySQL 4.x
Sumário
Nesta primeira parte, aprendemos sobre o que é o
Joomla! e suas funcionalidades, tanto no Front End (o
site em si) como no Back End (área administrativa do
site). O próximo capítulo você aprenderá como instalar e
personalizar o Joomla! de acordo com suas
necessidades.
À partir do próximo slide, você terá acesso à adaptação
que eu fiz do livro “Learn Joomla! 1.5 Fast ! – A
beginner’s visual step-by-step guide to set up useful
Joomla! websites in a few hours!”
Autor: Saurabh R. Bhide.
Um jovem desenvolvedor Joomla! e autor indiano, este
livro é completamente voltado para iniciantes e foi
traduzido e adaptado por mim. Faça o download a versão
original do livro aqui:
http://help.joomla.org/files/VisualGuide15.pdf
Aprenda Joomla! 1.5
Rápido
Um guia passo-a-passo visual para
configurar websites úteis utilizando Joomla!
Em poucas horas
Sobre o autor

Esta apresentação é uma adaptação do livro

“Learn Joomla! 1.5 Fast !” – A beginner’s
visual step-by-step guide to set up useful
Joomla! websites in a few hours!
Criado por: Saurabh R. Bhide
Website: www.lagoona.in

O material original está sob a Atribuição da licença

“Creative Commons”, Índia.
Para mais detalhes, acesse
http://creativecommons.org/licenses/by/2.5/in/
Sobre a adaptação
Este material foi adaptado para que você
aprenda Joomla! em 4h, no meu mini-curso
presencial.
Mas, esta adaptação está em sua maior parte
fiel ao livro . Mantive a idéia geral do livro e o
que acrescentei foram algumas etapas ou
observações que julguei necessária para o
melhor aprendizado dos iniciantes em Joomla!
1.5.
Retirei algumas redundâncias e tornei a
linguagem mais facilitada e adaptada para a
realidade brasileira.
Na verdade, achei o livro um pouco incompleto
na parte em que ele ensina apenas a criar
 Prefácio
Obrigada por decidir ler este livro. Eu escrevi
este livro para você aprender Joomla! 1.5
o mais rápido possível.

Este livro foi feito para ser lido capa-a-capa, e

tudo que você tem a fazer é ler uma página,
fazer o
que ela diz, e seguir adiante. Depois de
completar todas as tarefas neste livro, você será
um
usuário fluente em Joomla!, apto a fazer
websites com conteúdo típico.
Index
o Instalando Joomla!
o Criando seu primeiro site em Joomla! :
Babuínos
o Criando seu segundo site em Joomla! :
Faculdade de Engenharia
o Modificando o Template
o Enviando o website para um servidor de
hospedagem na web
Instalando Joomla!
Joomla é um aplicativo web escrito em PHP, e por isso
precisa de um
servidor web para rodar.
Para tornar um website em J! (Joomla!) disponível na web,
você
precisa hospedá-lo em um servidor web. Mas para aprender
J!, você
pode converter seu computador em um servidor web e
instalá-lo nele.

Por isso, instalar J! no seu computador, requer que você

faça duas
coisas antes.Te mostrarei como fazê-las. Mas se você já
tem um
Instalando Joomla!

1) Instalar servidor 2) Criar Base de 3)

web com Dados Instalar o
Instalando um servidor web
usando o XAMPP
Este software gratuito instala um servidor web Apache, PHP e MySQL no seu computador e configura
os três para trabalharem juntos.
Tudo que você tem a fazer é baixá-lo e instalar!
All you have to do is download it and install!
Acesse www.apachefriends.org/en/xampp.html. Há versões diferentes para diversos sistemas
operacionais. Escolha o seu e faça o download.

Click to edit Master text styles

Second level
● Third level

● Fourth level

● Fifth level
Para Criar uma Base de dados em Joomla! E conta para
instalar Joomla!, você pode usar uma aplicação web
chamada “PhpMyAdmin”. Ela vem junto com XAMPP, então
você pode utilizá-la.
1. Crie uma base de dados 2. Adicione um novo usuário

Click to edit Master text stylesClick to edit Master text styles

Second level Second level
● Third level ● Third level

● Fourth level ● Fourth level

● Fifth level ● Fifth level

Vá para PhpMyAdmin e na página Vá para PhpMyAdmin e na página

inicial, você verá um campo para
criar uma nova base de dados.
Digite um nome para esta Base de
Dados (BD) e clique “create”. Eu
nomeei a minha como
“database_for_joomla‟. Você pode
colocar qualquer nome, mas você
terá que lembrar dele, pois
usaremos na instalação do joomla!
inicial, clique em “Privileges”. Então
clique em “Adicionar novo usuário”,
e preencha o formulário para criar
um usuário. Preencha os campos
como descrito na imagem acima e
garanta todos os privilégios para
este usuário, marcando o botão
“Check all”. Criei um usuário
chamado “joomla_user” com
password “joomla”
Instalando Joomla! 1.5
Agora que você tem um servidor web pronto
com PHP e MySQL juntamente com uma
conta que você criou, vamos instalar o
Joomla!. Download a versão mais recente
em www.joomla.org/download.html . Salve o
arquivo .zip no diretório raiz do seu servidor
que deve estar em “C:\xampp\htdocs\” ou
na pasta que você escolheu ao instalar o
XAMPP.
Crie uma pasta “joomlabeta” neste diretório
e extraia o arquivo nele. Agora acesse esta
pasta no seu navegador usando o caminho
“localhost/joomlabeta”. OBS: O XAMPP deve
estar inicializado, juntamente com os
Primeira e segunda telas

A primeira tela você escolhe a linguagem de

instalação do Joomla!, na segunda, mostra
as configurações boas pro Joomla!
OBS: Se a opção “configuration.php writable”
estiver marcada “no” no final da instalação,
deveremos copiar um código e criar o
arquivo “configuration.php” na pasta
“joomlabeta”
Terceira e quarta telas
A terceira tela é referente a licença do
Joomla!, clique “próximo”.
A quarta tela é especificando as
configurações do BD, incluindo o
nome da BD, nome de usuário e
senha.
Use as seguintes configurações:
Use the following settings
Database Type : mysql
Host Name : localhost
Nome de usuário : joomla_user (se
você utilizou um nome diferente no
MySQL, especifique aqui)
senha : joomla (ou a que você
especificou para aquele usuário)
Recomendações

É recomendado que você utilize esta

base de dados exclusivamente para
esta instalação do Joomla! Você pode
criar mais BD’s para outras aplicações.
 Quinta e sexta telas
A quinta tela é para especificar configurações FTP
para Joomla! Mas como estamos instalando-o
localmente, diga “no” para FTO e clique
“Próxima”
A sexta tela é para especificar o nome do Site e
senha para o administrador. Preencha o
formulário com o nome do site, seu e-mail e
senha para o administrador.

Enquanto nesta tela, clique em “Instalar exemplo

de conteúdo” para que seu site tenha algum
conteúdo de exemplo que você pode editar ou
deletar.
Depois de clicar neste botão, você verá uma
mensagem “Exemplo de conteúdo instalado com
sucesso”. Clique em Próximo. Você instalou o
Joomla! agora, delete o diretório “installation”.
Deletar este diretório é uma medida de segurança
para prevenir que ninguém reinstalará o Joomla!
utilizando este diretório.
Instalando “Exemplo de
Conteúdos”

Eu recomendo a você instalar os exemplos de

Conteúdos apenas neste primeiro site, para que
você tenha uma visão geral do Joomla! . A
instalação destes exemplos, gera código e
configurações desnecessárias, acarretando em
mais peso ao seu website. Após o término deste
material, você estará apto a configurar seu site
em J! Apenas com os recursos que julgue
necessários. Quando você estiver seguro para
proceder desta forma, não clique em “instalar
exemplo de conteúdos” e clique em próximo.
Aparecerá um alerta avisando que nenhum
conteúdo foi instalado e pergunta se você deseja
Criando a o arquivo
“configuration.php”
Caso seu “configuration.php writable” estava
em “no” então, na última tela apareceu um
código php dentro de uma caixa. Copie todo
este código e agora vá para a pasta
“joomlabeta” e crie um arquivo vazio,
utilizando
Neste o botão
arquivo direito
estão as se for usuário
configurações que você
linux,na
gerou secriação
for usuário
do seuwindows, crie um
site em Joomla! .
documento de texto.
Configuration.php Em ambos os casos,
e configuration.php-dist são
renomeie
arquivos para “configuration.php”
diferentes, não os confunda! Nãoe abra o
arquivo. oCole
substitua o código
conteúdo que você retirou na
do configuration.php-dist
instalação
pelo do Joomla!
código que e cole
você copiou parano arquivo.
configuration.php.
Salve. O arquivo configuration.php-
dist é utilizado apenas quando o instalador web
Explorando o Front-End

Click to edit Master text styles

Second level
● Third level

● Fourth level

● Fifth level
Introdução
Agora que você instalou o Joomla! Você pode acessar o site escrevendo o
endereço
“localhost/joomlabeta” no seu navegador. Este é o site padrão em Joomla, com o
conteúdo
exemplo padrão. Você verá como modificar este site de acordo com suas
necessidades
adiante.
Por hora, navegue no site, clique em botões diferentes e teste-os. Vote na
enquete e veja o
resultado. Procure por algo usando o campo de pesquisa. Crie PDFs de artigos
usando o
pequeno ícone PDF no lado superior direito de qualquer artigo.
Note as formas differentes em que o conteúdo é acessado e apresentado.
Clicando no link de
“Joomla! License” no menu esquerdo mostrará uma página com a licensa em
Joomla! Esta
página é como uma página estática no website.

Clicando em “The News”no menu principal mostrará introduções de artigos

Básicos do Joomla!
J! É um “Sistema de
gerenciamento de
Front-End
conteúdo” que significa que
www.sitename.com é um sistema criado para
gerenciar diferentes tipos
de conteúdos
• Todo o conteúdo está

guardado em uma base de

dados.
• A área administrativa
Administração
Base de Dados (back-end) do J! permite
(BD) www.sitename.com/administrator
que você edite os
conteúdos, delete ou crie
novos.
Gerenciando um site em J!

Gerenciar um site em Joomla! é

principalmente sobre logar o painel
administrativo e adicionar ou editar conteúdo.
Então, quando você vir um site criado em J! É
o front-end que mostra algum conteúdo da
BD. Todos os dados, direto dos links no menu,
à informação sobre usuários é guardada na
BD. A interface administrativa te permite
editar esta base de dados, te dando portando,
controle total sobre o site.
Seu primeiro site em
Joomla! : Babuínos
Agora que instalou J! No seu computador,
vamos criar seu primeiro site em J! .
Se você procedeu de forma correta até agora,
seu site deverá estar acessível através do
endereço no seu navegador
http://localhost/joomlabeta e você terá
acesso à área administrativa através de
http://localhost/joomlabeta/administrator .
Escolha qualquer assunto para seu primeiro
site. Eu escolhi o assunto “babuínos”.
Caso você não saiba, babuínos são animais
similares aos macacos. Então, vamos criar
um site sobre babuínos.
Organograma do site

4
 Conhecendo o Back-End
Ok, chega de teoria e vamos começar a criar
nosso site. Para tal, vamos fazer um quick-
tour pelo Back End do Joomla!
 Conhecendo o Back-End
Como vocês puderam observar, no topo
temos o menu de opções, à sua direita, 3
imagens. Um preview do nosso site, o número
de pessoas conectadas no momento e se há
alguma nova mensagem enviada para você.

Abaixo do menu do topo, há as ferramentas

que mostram, dependendo da área que você
esteja, as opções possíveis a ser feitas, tais
como: editar, salvar, mandar pra lixeira,
deletar, publicar entre outros. Ao longo do
uso, usaremos essas ferramentas
naturalmente, elas são bem intuitivas.
System Info

Localizado em Help|System info, é dividido em

5 sub-areas. Falaremos dela de acordo com
nossas necessidades.
System Info
Configurações do PHP
Configuração do Arquivo
Permissão de diretórios
Informação do PHP
Menu do Site (Site Menu)

São as configurações aplicadas à todas as

páginas individuais e de seu servidor. Todas
elas estão resumidas no menu do site. Fica na
barra de menu do topo do back-end.
Painel de Controle
Gerenciamento de Usuário
Gerenciador de mídia
Configuração
Logout
Painel de Controle:
Você utiliza para mudar entre as várias áreas
da administração selecionando um item de
menu ou clicando nos ícones mostrados.
Gerenciamento de Usuários

Aqui você cria ou configura os usuários do seu

site. Dependendo dos seus direitos de acesso,
eles podem criar, editar ou ver algum
conteúdo preparado para usuários
registrados. Até agora, você é o único usuário,
o admin e você tem acesso à tudo do Joomla!
e pode também bloquear, mudar o tipo do
usuário, deletar entre outras coisas. Vamos
Media Manager
(gerenciador de Mídia)
Funciona como um FTP para você enviar
arquivos ao site. Por padrão você pode enviar
jpg,gif e png. Útil se você não puder acessar
ao FTP devido às permissões de
administração. Este gerenciador é bem
intuitivo. Você pode deletar diretórios na
opção Visualizar Detalhes (Detail view).
Configuração Global

Administra o valor das variáveis no arquivo

Configuration.php. Você pode dar uma
navegada nessa área para olhar suas opções.
As opções nessa área são muito claras, mas
muito cuidado com as alterações que fará.
 Passo #1: Escreva o nome
doé site
Este muito simples. Vá na área administrativa
(back-end) do site
This is really easy. Go to the administrative
back-endClique
of em
the“Global
siteConfigurations”,
acessandoagora, utilize o
http://localhost/joomlabeta/administrator/
campo “Site Name” para especificar o nome do ou seu o
nome dosite,
seu que é “Baboons”
site no no meu
lugar do caso. Agora clique no
“joomlabeta”.
botão “salvar” no topo, lado direito. Você verá a
Logue utilizando
mensagem “Theseuconfiguration
username como
Detals have been
“admin” updated”.
e a senhaVocê de administrador
também que
verá o título do navegador
agora conter o nome do seu site. Parabéns, você fez a
você colocou
primeirana tela 6 de
modificação instalação
do seu site! do
Joomla. Você entrará na área administrativa
do Joomla!.
Tornando o Joomla! em
português
Você deve ter percebido que apesar da
instalação ter sido em português, todo o
site está em inglês, tanto no front-end
quanto no back-end. Vou ensinar a vocês
como ajustar isso, embora os exemplos de
imagem deste material continuar sendo
utilizados em inglês, colocarei para vocês os
nomes tanto em inglês quanto em
português.
Acesse:
http://www.joomla.com.br/downloads/cat_view/8
Faça o download dos arquivos
Joomla! 1.5 - Backend pt-BR e Joomla! 1.5 -
Frontend pt-BR
Tornando Português sua
língua padrão
• Clique em Extensions -> Language Manager
• Na aba site, aparecerá o idioma português,
selecione português no radio button e
clique em “default” no topo do lado direito
(a estrela)
• Vá na aba “administrator” e faça a mesma
Alguns itens não estarão traduzidos, eu creio que, porque como as
coisa,
traduçõesseforama feitas
administração não
nas versões anteriores mudar
à essa (1.5.10) quando
imediatamente paravariáveis
produzi este material, algumas português, faça deum
devem ter mudado nome
nos arquivos e então, os arquivos de tradução não conseguem localizar
logout
as antigas ee ologue novamente
texto permanece nacreio
em inglês. Mas áreaque mais do que
95% permanecerão traduzidos e a utilização do Joomla! em nada será
administrativa do site.
prejudicada com isso, desde que eu escreverei os caminhos nas duas
línguas.

Se você entende algo de programação, você pode vasculhar por si os

arquivos do Joomla! e traduzir da forma que achar melhor. (só
recomendo esta forma para usuários avançados)
Passo #2: Crie as páginas
Nosso site terá 4 páginas:
1. Inicial
2. Como os babuínos se parecem
3. VidaÉsocial
muitodos babuínos
fácil de criar páginas. Na área
4. Tipos administrativa,
de Babuínos clique em “Add New
Article”, (Adicionar Artigo). Você
também pode ir através de “Content”
-> “Article Manager” (Conteúdo ->
Adicionar Artigo), no menu, no lado
direito, clique em “New” (Novo)
Passo #2: Crie as páginas

Preencha o título para a página, o conteúdo

na seleção de página, selecione “seção” e
“categoria” como “qualquer” ou “sem
categoria” (Uncategorized), e clique o botão
“salvar” no topo, lado direito.
Após salvar a página, você será levado ao
“Gerenciador de Artigos” (Article Manager)
onde você pode editar, deletar ou criar novos
artigos.
Clique no botão “Novo” (New) no topo, à
direita, para criar uma nova página. Desta
forma, faça todas as 4 páginas.
Observação

Note que o J! permite que você escreva

artigos/páginas utilizando um editor de
interface “wysiwyg” – What You See Is What
You Get (Você vê aquilo que você tem), como
mostrado na figura acima. Isto significa que
você pode fazer o texto aparecer da maneira
que quiser.
Utilize este wysiwyg da maneira que usaria
qualquer software de processamento de texto.
Mas para inserir imagens, use o botão
“Image” na parte inferior, à esquerda da caixa
de edição de texto.
Passo #3: Crie Links de
Menu
Há diferentes menus em um site J!, e você
pode adicionar links para as páginas recém
criadas em qualquer um destes menus.
Para este site, usaremos o main menu. Na
interface administrativa, vá para “Menus” ->
“Top Menu” utilizando o menu.

Aqui você verá uma lista de todos os

links que já são presentes no menu
principal.
Selecionando o tipo de
menu
Será mostrado uma lista de
tipos de itens de menu.
1. Clique em ‘artigos’, porque
nós queremos que este link
se víncule à um artigo.
2. Clique em “Layout de Artigo
Padrão” (Standard Article
Layout) quando a lista de
‘artigos’ expandir. Significa
que o artigo por completo
será mostrado quando o
link for clicado.
Editar Link
Tipo do item de menu – Cada Link tem sua
particularidade, Nós entraremos em detalhe à
medida que formos criando os nossos. Cada tipo
pertence à um componente do Joomla!
Click to edit Master text styles
Second level
● Third level

● Fourth level

● Fifth level
Vinculando ao artigo
Na área superior, direita
desta página, você verá
uma caixa nomeada
‘Parâmetros de Item de
UmaMenu’
janela(Menu item com uma
popup aparecerá
parameters).
lista Nesta
de todas as páginas. Caixa,
Você deve
dar um clique-duplo
clique no botão na ‘selecionar’
página em
que quer criar o vínculo com este item
depróximo
menu. ao campo
‘selecionar
Fazendo artigo’
isto, você seleciona parao
artigo/página
especificar quequal
será mostrado
artigo será
quando um usuário clicar neste link
que
mostrado
Agora, quando
o campo ‘selecionar
estamos criando.
o link
artigo’ foro
mostrará
nome da página que você selecionou.
clicado
Agora clique no botão ‘salvar’, você será levado ao
“Gerenciamento de Menu” para o Main menu, e o
link que você acabou de criar estará nesta lista.
Visualizando nossos links
no Front-End
Em uma instalação padrão do
Joomla!, há um link ‘home’ no
menu principal por padrão, mas
nós não o manteremos. Agora,
crie os links para as outras
páginas, repetindo o
procedimento anterior.
Se você visualizar seu front-end
‘localhost/joomlabeta’ ou clique
no link ‘pré-visualização’ no
canto superior direito, você verá
a existência de dois links ‘Home’.
O segundo é aquele que você
Limpando a Bagunça

Está tudo funcionando perfeitamente, mas,

precisamos:
1. Toda esta bagunça no site deverá ser
limpa, de forma que apareça apenas
coisas relacionadas aos nosso babuínos no
site.
2. Quando o site for visitado através de
‘localhost/joomlabeta’, a página ‘Home’
que criamos será mostrada.
3. Todos os outros links para o menu deverão
ser removidos.
A próxima página mostra uma bagunça típica
Seu site deve estar assim
agora: Click to edit Master text styles
Second level
● Third level

● Fourth level

● Fifth level
 Varrendo para debaixo do
tapete
Click to edit Master text styles
Para esconder estes
Second level
● Third level módulos desnecessários, vá
● Fourth level para o back-end
● Fifth level ‘localhost/joomlabeta/admini
strator’ e logue. Vá para
‘Extensões’ ->
‘Administrador de Módulos’
(Module Manager). É aqui
onde você administrará
todos os módulos. Você verá
uma lista de todos os
módulos instalados no seu
site. Haverá em torno de 25
items na lista.
 Limpando os items de
menuAgora
extras
vamos limpar o Main Menu e
esconder todos os outros links além
dos que apontam para nossas 4
páginas e fazer a nossa ‘Home’ ser a
página padrão ao invés da que está
atualmente.
Na área administrativa, vá para
Para limpar o menu‘Menu’
e remover->todos‘Main Menu’.
os links que não são Será
requeridos, faça igual
mostrada
você fez aos módulos. uma
Selecione todos
‘despublicar’ (unpublish)
lista
os links de todos
que deseja esconderos links
e clique em

atualmente vistos no seu site.

Para fazer a sua página ‘Home’
padrão, a selecione marcando o
checkbox e clique em ‘Padrão’
Dica

Modificando a Logo do site:

O logo do Joomla! que você vê no topo das
páginas é parte de um template. Você verá
isto com mais detalhes depois. Por hora, se
você tem uma imagem para substituir, salve-a
em
‘C:\xampp\htdocs\joomlabeta\templates\rhuk_
milkyway\images’ ou onde quer que fique o
diretório raiz do seu site com o nome
‘mw_joomla_logo.png’ para substituir a
imagem atual.
Este é o seu primeiro site
em Joomla!
Click to edit Master text styles
Second level
● Third level

● Fourth level

● Fifth level
Nível Intermediário

Espero que você tenha gostado da sua

primeira experiência em Joomla!. Agora
vamos entrar em um nível intermediário de
aprendizado.
C ● S C
H
● M
S
r a o
e ia

Como um conteúdo é salvo

t rtn
d
c o
a tu
y
h lrt
n
b lo
s i
a a
cO conteúdo em Joomla! são as páginas de informações a ser mostradas no site. Há dois
k
s
tipos de conteúdo: Com categoria ou sem categoria.

Conteúdo sem categoria

Estas geralmente referem-se à páginas estáticas, você pode criar e editar quantas
delas você quiser no Back-end. Estas páginas não pertencem a nenhuma categoria, por
isso, são chamadas assim.

Conteúdo com categorias

Também referem-se à paginas, mas

estas pertencem a uma estrutura, que
é constituída de seções e categorias.
Uma ‘seção’ (section) contém
diferentes ‘categorias’ (categories) que
por sua vez, contém páginas de
conteúdo também chamadas ‘itens de
conteúdo’.
A figura ao lado mostra um exemplo de
um site contendo informações sobre
carros diferentes. “Cars” é uma seção,
que contém duas categorias
“Hatchbacks” e “Sedans”
Estas categorias têm uma página de
cada carro naquela categoria.
Criando seu segundo site
em Joomla!
Faremos um site legal de uma faculdade
utilizando Joomla!
Faça uma nova instalação do Joomla!, mas
desta vez, não instale o exemplo de conteúdo.
Pense em uma faculdade imaginária. Eu
nomearei a minha de “Faculdade Bhide de
Engenharia” ;)
Antes de fazer qualquer site, você deve
decidir a estrutura de seu site. Nós teremos a
seguinte estrutura para nosso site da
faculdade. Eu recomendo fortemente que
você desenhe esta estrutura no papel
B ● D
H
A
T
C
● C
M
E
● P
F
hi b
h
o
e ile ra
ra

Estrutura do site
d m
o
e
n
p c
e
v c
o
c
o
e e
tu
a h
ic jiu
ju
t
P
ra lta l
e
C l
e
r
tc rn it
c
ol tiU
m i
E tty
c
e s
n
e c
n ty
i
s
g c
U
n a
g s
e
e i
ts il s
of p
s n
E a E
e
n l n
e
gi rg
n i
n
e
e
g
er e
n r
g i
n
g
Estapas para a criação

Agora que temos a estrutura em mente, nós a

criaremos em 7 passos, alguns deles você já
fez no primeiro site
1. Configurar o nome do site
2. Criar as páginas sem categorias (Home,
About us, etc...)
3. Criar a Seção (Departments)
4. Criar uma categoria para cada
departamento
5. Adicionar páginas/itens de conteúdo
nestas categorias
Passo #1: Configurar o
nome do site
Como você fez para o site dos Babuínos,
logue-se na área administrativa do seu novo
site
‘localhost/nome_do_seu_site/administrator’,
logue utilizando a senha que você cadastrou
nessa nova instalação e dê um nome ao site
como você deu ao dos babuínos (global
configuration)
Passo #2: Criar as páginas
sem categorias
Olhe na estrutura do site e crie as páginas
sem categorias, assim como criamos as 4
páginas do site dos babuínos.
As páginas são:
Home
About Us
The Principal
Novamente, como da primeira vez, estes
artigos ainda não estão visíveis no front-
end. É necessário criar os links para estes
conteúdos. Você pode criá-los agora, como
Passo #3: Criar a Seção
(Departments)
Criar uma seção é muito fácil. Na área
administrativa, vá para ‘Content’ ->
‘Section Manager’
Você pode retornar para a área principal
do back-end utilizando o menu ‘Site’ ->
‘Control Panel’.
Uma vez que você está em ‘Section
Manager’, clique no botão “New”, lado
direito, no topo, para criar uma nova
seção.
Escreva o nome para a seção com
‘Departments’ e abaixo escreva uma
Dica:

Sugiro que você olhe a estrutura que

desenhamos e marque as áreas que já estão
prontas. Vamos continuar e criar as
categorias.
Passo #3: Criar uma
categoria para cada
departamento
Crie categorias através do ‘Category
Manager’ pelo control panel ou
através do menu ‘Content’ ->
‘Category Manager’.
Escreva o nome da categoria
(Departamento) como título.
E selecione a ‘section’ como ‘departments’,
Agora, criaremos uma categoria para
como esta categoria é um departamento.
cada departamento
Olhe a figurada faculdade.
ao lado se você está confuso.
Para fazê-lo, Escreva
clique uma descrição pequena do
no botão ‘New’
departamento na caixa ‘detalhes’

Então clique no botão ‘save’. Você será

levado de volta para o category manager.
Repita o processo para todos os
departamentos.
Passo #5: Adicionar
páginas/itens de conteúdo
nestas categorias

Agora que criamos uma categoria para cada

departamento, cada departamento precisa de
duas ou três páginas mostrando informações
sobre o mesmo. Por exemplo, o departamento
de engenharia mecânica (mechanical
Criando páginas com
categoria
São criadas da mesma forma que as sem
categoria, sendo que ao invés de selecionar a
opção “qualquer” (uncategorized), você
deverá escolher a seção e categoria da
página. Tenha certeza de que escolheu as
opções corretas.
 Step #6: Adicionar links
para todas as coisas acima
Uma vez que você criou todas as diferentes páginas para cada departamento, é
no menu
hora de adicionar links para todos os conteúdos no menu.
1: Adicione links para os conteúdos sem categoria como fizemos no site
dos babuínos.
2: Add Links to the Department pages

 Estes links são especiais. Criaremos um link

no menu para cada departamento. Quando
clicarmos, aparecerá uma lista contendo
todos os conteúdos pertecentes a categoria
daquele departamento.
1. No back-end, vá para “Menu” -> “Main
Menu”
2. Clique no botão ‘new’
3. Clique em‘Articles’ na lista ‘Internal Links’
4. A lista expandirá. Clique em ‘Category List
Layout’ na sub-lista ‘Category’

1. Na caixa à direita ‘Menu Item

Parameters’ , selecione a categoria
Step #7: Organizando a
página
Agora, coloque o link Home como o padrão
deste site assim como já foi feito no site dos
babuínos. Despublique (unpublish) o link
‘Home’ padrão.
Note que quando clicamos em ‘mechanical
engineering’ no site, muitas coisas além das
páginas aparecem.
Nosso segundo site padrão
está pronto!
Faça as seguintes configurações:
Na caixa ‘parameters – basic’
Table Headings : HIDE
Filter : HIDE
Na caixa ‘parameters – advanced’
Display Select : HIDE
Na caixa ‘parameters – component’
Author Name : HIDE
Hits : HIDE
Estas configurações farão a página
Para editar qualquer
página...
A beleza dos CMS (Sistemas de
Gerenciamento de Conteúdos) é que uma vez
escrito, pode ser modificado a qualquer hora
usando a interface administrativa tanto no
back-end, quanto no front-end.
Agora que temos um site para nassa
faculdade de engenharia, você pode mudar os
conteúdos facilmente indo para o ‘Article
Manager’
No back-end, vá para ‘Content’ -> ‘Article
Manager’ Na lista de páginas que aparecerá,
clique no artigo que deseja modificar.
Utilizando outro template
Um template Joomla! providencia um design
ao Joomla! para mostrar o conteúdo. Se você
é um web designer, você pode criar e/ou
personalizar um template para J!. Não é a
intenção deste material, utilizaremos apenas
templates disponíveis gratuitamente. Há
muitos sites que oferecem templates gratuitos
ou pagos para Joomla! . Vá para joomla.org e
procure por ‘free templates’ você verá
diversos para usar.
Vamos utilizar um da empresa ‘rockettheme’.
O nome do template é ‘Novus’. Está
disponível em:
Tornando o ‘Novus’
template padrão
Agora tornaremos este template como o
padrão. Vá para ‘Extensões’ -> ‘Template
Manager’. Aqui você poderá selecionar o
template padrão para o seu site.
Selecione o template rt_novus utilizando o
radio button como na imagem abaixo e clique
no botão ‘Default’ no lado direito ao topo.
Agora, você poderá modificar este template
de acordo com sua vontade/técnica.
Vá para
“C:\xampp\htdocs\digite_a_pasta_do-
seu_site\templates\rt_novus_j15\images”
Versão do livro finalizada

Você pode usar este método para instalar

qualquer template para Joomla! 1.5. Para
personalizar, vá para a pasta onde o template
foi instalado e faça alterações para imagens,
arquivos CSS, etc. Se você souber fazê-lo,
Sobre a adaptação
Este material que você acaba de ler foi
adaptado e traduzido para português. A
versão está completamente diferente da
original, cortei algumas partes e acrescentei
muitas outras, para que pudesse ser
executado no meu mini-curso de 4h. No
Palavra Finais
começo (do Autor)
deste material há um link que você
poderá utilizar para fazer o download da
Obrigada por ler este livro. Espero que você tenha
versão original em formato pdf, em inglês
gostado.
Adiante, você aprenderá a incrementar muito mais
seus sites em Joomla!
Incrementando o site

À partir de agora, você aprenderá como

incrementar ainda mais seus sistemas em
Joomla! Adicionei algumas coisas que acho
importante você aprender sobre J! Você irá
criar enquetes, adicionar módulos, uma lista
de links (Links Úteis) e criar uma galeria de
imagens e um formulário de contato.
Adicionando Módulos no
nosso site
Vamos adicionar agora os módulos
necessários para finalizar a página inicial do
nosso sistema online:
Clique em Extensões -> Administrar Módulo
Clique em Pesquisa e em seguida no botão
próximo
Preencha os parâmetros que achar necessário
Adicionando Enquetes

 Clique em Componentes -> Enquete

 Clique em Novo
 Preencha os campos necessários
 Atenção – Esse campo segundos entre votos define o
tempo necessário para votar novamente na pesquisa
 Salve
Adicionando Módulos
(enquete)
 Clique em Extensões -> Administrar Módulo
 Clique em “Votação” e em seguida no botão próximo
 Preencha os parâmetros
 Selecione a Enquete desejada
 Salve
Dica:
Para tornar uma área vísivel apenas para
usuários cadastrados, quando criar um
link/artigo há uma box relacionada ao nível de
acesso (acess level), o padrão é “public”.
Public: Todos podem acessar (padrão)
Registered: Apenas usuários cadastrados
Special: Usuários com permissões acima do
nível de autor.
OBS: Se você criou conteúdos para nível
registered ou acima, adicione no seu front-end
um módulo ‘Login’, para que os usuários
possam se cadastrar, ou pelo menos logar-se
Links Úteis

 Esse componente é bem simples, você apenas adiciona

links e diz a forma de comportamento ao clicar nele (ir para
outra janela, abrir na mesma janela)
 Antes de criar os links, devemos criar uma categoria para
eles.
 Clique em Componentes->Weblinks->Categorias, crie uma
categoria
 Clique em Componentes->Weblinks->Links e crie um novo
link, preencha os campos e salve.
 Crie vários links
Adicionando Links Úteis no seu menu

 Vá em Menus -> Main Menu

 Novo -> Weblinks -> Layouts Lista de Categorias (Essa
opção mostra todos os links de uma certa categoria)
Link de Localização

 Vá em Menu->Main Menu
 Crie um novo menu e em Tipo de item de Menu, selecione
wrapper
 Digite a url desejada, configure os parâmetros
 Salve
Criando um formulário de
Contato
 Vá em Componentes -> Contatos -> Categoria e crie uma
nova categoria chamada “Contatos”
 Vá em Componentes -> Contatos -> contatos -> novo
 Tire um tempinho para ler os campos abaixo, eles mostram
as informações do seu contato apenas

OBS: Este componente contato nativo do Joomla é bem

simples, há apenas alguns campos pré-definidos para o
visitante preencher. Mas há vários componentes que
permitem a personalização de campos em um formulário de
contato
Adicionando o Link
Contato
 Crie um novo item de menu, do tipo “Contatos”
 Selecione “Layout de Contato Padrão”
 Dê um nome, selecione o contato nos parâmetros
 Salve
Galeria de Imagens

 Bem, estamos no finalzinho deste mini-curso de... Er...

Esqueci o nome... Vou lá no primeiro slide filar e já volto!
 *Indo no Primeiro slide*
 Ah! Criando um sistema online no mínimo de tempo
possível!
Galeria de Imagens

 Instale o componente Ozio.zip

 Vá em Menu -> Main Menu -> Novo -> Ozio Gallery
 Clique em pré-visualizar
 Nada aconteceu?!? Como assim? Claro, ainda não
passamos de onde ele puxará as fotos!
 Clique em Componentes -> Ozio Gallery
 Clique em settings (um texto minúsculo, perdido por aí!)
 Pra visualizarmos rapidamente, selecione a opção “Use
images from FlickR” na aba general, salve e visualize
novamente
 Legal, não? Se vocês notaram, há várias galerias possíveis
na Ozio Gallery, usem um tempo para brincar com esse
componente!
Referências
Graf, Hagen - Building Websites with Joomla 1.5, PACK
PUBLISHING
www.joomla.org
www.joomla.com.br
http://www.siteground.com/tutorials/joomla15/joomla_create_websit
Learn Joomla! 1.5 Fast ! – A beginner’s visual step-by-step
guide to set up useful Joomla! websites in a few hours!,
Saurabh R. Bhide
www.google.com.br (o oráculo da vida!)
The End
É um prazer contribuir para a vida de cada um que conseguiu
chegar no final deste material, oferecendo conhecimento, algo
tão importante.

Caso você encontre algum erro neste meu material, favor

entra em contato.

No próximo slide, meus contatos

Sobre mim

Jennifer Payne
nennypayne@gmail.com
Entrem no grupo de joomla em que eu faço parte da administração
brasjoomla@googlegroups.com

Este grupo é composto por pessoas dinâmicas e gentis que sempre se

esforçam para ajudar. Caso você tenha dúvidas ou quer se aprofundar
em Joomla!, faça parte! Faremos o possível para ajudar.

Esse mini-curso só foi possível graças ao incentivo e colaboração da

Especializa treinamentos.