Aprenda joomla

Construindo um sistema online no mínimo
tempo possível.

 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!

CMS ou Content Management System, é um
programa desenvolvido para facilitar a gestão
de um conteúdo (dados)

 Quais as reais necessidades do cliente?
 Qual a complexidade do projeto?
 Qual o prazo e orçamento do projeto?
 Quais as particularidades do projeto?

WCMS (Web Content Management System)

• É 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

• 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

• 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.

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/

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.

 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.

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

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
Administrador
Pode executar TODAS as funções do Joomla! Apenas ele pode
criar um super administrador ou modificar um usuário para
Super Administrador.

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.

 São os dados que irão aparecer no seu site:
 Textos
 Imagens
 Vídeos
 Etc.

 Componentes
 Templates
 Módulos
 Plug-ins

 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.

 É 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.

 É 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.

 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.

 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

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

Um guia passo-a-passo visual para configurar
websites úteis utilizando Joomla! Em poucas
horas

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/

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
sites utilizando a estrutura de exemplos instalados por padrão, que gera muito
lixo, utilizei esta forma apenas no primeiro site (são dois no livro), no segundo, iremos
gerar do zero, aprendendo também a adicionar e configurar módulos e outras coisas
que levarão você de um usuário iniciante para um usuário de nível intermediário.
Ensinei também a instalar componentes (no caso, as traduções do Joomla! para
português). Misturei muito do material que utilizo no meu mini-curso com o material
do livro, de forma que possa ser lido e utilizado mesmo por pessoas que não
participaram do meu mini-curso.
Acredito que assim, os interessados em Joomla! terão um material mais robusto para
utilizar.
Esta é minha primeira contribuição importante para comunidade e espero que vocês
gostem.
Este material foi adaptado por Jennifer Payne, em abril de 2009.
E-mail: jpaynedesign@gmail.com
Você pode redistribuir ou modificar este material, desde que mantenha um link para o
site do autor do material original, juntamente com seu nome Saurabh R. Bhide
http://www.lagoona.in e uma referência para adaptadora do material para português
(Jennifer payne), seguida do e-mail acima.

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.
Quando eu começei com Joomla! Eu achei fácil de instalar, mas um pouco difícil de aprender a
administração. Ainda mais difícil de aprender foi como personalizar o site aos meus
requerimentos.
Havia diversos tutoriais por aí que explicavam tarefas diferentes, mas nenhum que explicava como
instalar, modificar e administrar um website em Joomla! Para minhas vontades.
Por isso, aprendi J! da maneira mais difícil, tentando tutoriais diferentes, experimentando botões
diferentes na administração, e vendo o que acontecia. Me tornei fluente gradativamente, fazendo
e administrando sites em Joomla!, esta tarefa me tomou 6 meses!
Agora, eu escrevi este livro de uma forma que você aprenderá tudo dentro de uma única semana
ou dois dias. Se você começou a ler este livro hoje de manhã, você estará apto a fazer qualquer
website em joomla! Amanhã à noite.
Então diga à todos que você está ocupado(a), compre algumas pizzas e bebidas e aprenda
Joomla!

 Instalando Joomla!
 Criando seu primeiro site em Joomla! :
Babuínos
 Criando seu segundo site em Joomla! :
Faculdade de Engenharia
 Modificando o Template
 Enviando o website para um servidor de
hospedagem na web

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
servidor web com PHP e MySQL instalado no seu
computador, pule a
primeira etapa e siga à partir da segunda e terceira.

1) Instalar
servidor web com
PHP e MySQL
2) Criar Base de
Dados MySQL e
uma conta
3) Instalar o
Joomla!

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.

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
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!
Vá para PhpMyAdmin e na página
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”

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:xampphtdocs” 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 serviços “Apache” e “MySQL”.
Tenha certeza que o arquivo “xampp-control.exe” está aberto, a palavra “running”
deve estar ao lado dos serviços acima para que esteja funcionando.

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”

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)
Database Name : database_for_joomla (ou a
que você criou, se você utilizou um nome
diferente)
Nesta tela, você providenciou os detalhes da BD
MySQL para o Joomla! utilizar para guardar todos
os conteúdos e outras informaçõ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.

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.

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 prosseguir.
Clique em OK e termine a instalação como de costume.

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 o botão direito se for usuário linux, se
for usuário windows, crie um documento de texto. Em ambos os
casos, renomeie para “configuration.php” e abra o arquivo. Cole
o código que você retirou na instalação do Joomla! e cole no
arquivo. Salve.
Neste arquivo estão as configurações que você gerou na criação
do seu site em Joomla! . Configuration.php e configuration.php-
dist são arquivos diferentes, não os confunda! Não substitua o
conteúdo do configuration.php-dist pelo código que você copiou
para configuration.php. O arquivo configuration.php-dist é
utilizado apenas quando o instalador web falha, nele você coloca
manualmente a mesma coisa que é gerado automaticamente
pelo instalador web do Joomla!, só que você deverá configurar
manualmente.

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 diferentes,
juntamente com um link “leia mais” que mostra o artigo completo. É similar à um blog,
porque
artigos diferentes são mostrados na mesma página. Clicando em “More about Joomla!”
Mostrará uma lista de categorias, cada uma tendo uma descrição curta. Selecionando
uma
categoria mostrará a você uma lista de todos os artigos naquela categoria. Você pode
clicar
nelas para ler os artigos completos.
A enquetes é mostrada numa área lateral, quando você vota nela, resultados são
mostrados
na área de conteúdo principal.

J! É um “Sistema de gerenciamento de conteúdo”
que significa que é um sistema criado para
gerenciar diferentes tipos de conteúdos
• Todo o conteúdo está guardado em uma base
de dados.
• A área administrativa (back-end) do J!
permite que você edite os conteúdos, delete
ou crie novos.
• Quando alguém visita o website, O front-end
mostra o conteúdo da base de dados, de
maneira organizada, definida por você
utilizando a área administrativa.
Administração
www.sitename.com/administrator
Base de Dados
(BD)
Front-End
www.sitename.com

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.

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.
Wikipédia tem muitas informações sobre babuínos: acesse
http://en.wikipedia.org/wiki/Baboons para maiores
detalhes. Eu as utilizei para a criação deste site que será
muito simples e consiste de 4 páginas.
Veja como faremos nosso site em 4 passos fáceis:

1
• Escreva o nome do site
2
• Crie as páginas
3
• Faça links de menu para estas páginas
4
• Remova o desnecessário no site

 Ok, chega de teoria e vamos começar a criar nosso site.
Para tal, vamos fazer um quick-tour pelo Back End do
Joomla!

 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.
 Abaixo da barra de ferramentas, os
conteúdos, menus, enfim, os dados da área de
administração em que você está, será mostrada.

 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

 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

 Você utiliza para mudar entre as várias áreas da
administração selecionando um item de menu ou
clicando nos ícones mostrados.
 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 agora
olhar rapidamente na edição do usuário. Um Super
Administrador, ou seja, você por default, pode fazer
o que quiser com a conta de outro usuário. A única
parte que realmente nos interessa aprender é sobre
os grupos de usuários e seus direitos.
Gerenciamento de Usuários

 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).

 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á.

Este é muito simples. Vá na área administrativa (back-end) do site
This is really easy. Go to the administrative back-end of the site
acessando http://localhost/joomlabeta/administrator/ ou o nome do seu
site no lugar do “joomlabeta”. Logue utilizando seu username como
“admin” e a senha de administrador que você colocou na tela 6 de
instalação do Joomla. Você entrará na área administrativa do Joomla!.
Clique em “Global Configurations”, agora, utilize o
campo “Site Name” para especificar o nome do seu
site, que é “Baboons” no meu caso. Agora clique no
botão “salvar” no topo, lado direito. Você verá a
mensagem “The configuration Detals have been
updated”. Você também verá o título do navegador
agora conter o nome do seu site. Parabéns, você fez a
primeira modificação do seu site!

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/82-
traducoes.html
Faça o download dos arquivos
Joomla! 1.5 - Backend pt-BR e Joomla! 1.5 - Frontend pt-BR
• Volte para a área administrativa e clique em Extensions ->
Install/Uninstall
• No campo “Upload Package File” clique no botão para procurar o
arquivo que você baixou. Selecione o arquivo, e clique em
“Upload File & Install”
• Uma mensagem avisando que foi instalado com sucesso
aparecerá, repita o processo, instalando a tradução do front-end
também

• 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 coisa, se a
administração não mudar imediatamente para português,
faça um logout e logue novamente na área administrativa
do site.
Alguns itens não estarão traduzidos, eu creio que, porque como as
traduções foram feitas nas versões anteriores à essa (1.5.10) quando
produzi este material, algumas variáveis devem ter mudado de nome
nos arquivos e então, os arquivos de tradução não conseguem localizar
as antigas e o texto permanece em inglês. Mas creio que mais do que
95% permanecerão traduzidos e a utilização do Joomla! em nada será
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)

Nosso site terá 4 páginas:
1. Inicial
2. Como os babuínos se parecem
3. Vida social dos babuínos
4. Tipos de Babuínos
É muito fácil de criar páginas. Na área
administrativa, 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)

 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.

 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.
 Note ainda que estas páginas criadas por você ainda
não estão visíveis no site. E estarão visíveis somente
após criarmos um link de menu para elas.
 Agora que temos as 4 páginas, vamos ao próximo
passo e criar links de menu para elas.

 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.
Agora, clique no botão “novo” (new) no topo à direita,
para criar um link de menu para uma de nossas 4
páginas.

 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.
 Agora você será levado à uma tela onde
você tem que especificar o nome deste
link e o artigo vinculado a ele.
 Nosso primeiro link é para a página
inicial, por isso, escrevi o título e apelido
(alias) „Home‟.

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!

Na área superior, direita desta página, você
verá uma caixa nomeada „Parâmetros de
Item de Menu‟ (Menu item parameters).
Nesta Caixa, clique no botão „selecionar‟
próximo ao campo „selecionar artigo‟ para
especificar qual artigo será mostrado
quando o link for clicado
Uma janela popup aparecerá com uma
lista de todas as páginas. Você deve dar
um clique-duplo na página em que quer
criar o vínculo com este item de menu.
Fazendo isto, você seleciona o
artigo/página que será mostrado
quando um usuário clicar neste link que
estamos criando.
Agora, o campo „selecionar artigo‟ mostrará o
nome da página que você selecionou.
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.

 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ê criou. Clique nele e ele mostrará a
a página que você criou.
 Se você já criou os links para os outros
artigos, você será capaz de visualizá-lo como na
figura abaixo, se não, crie-os agora.

 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 do J! quando
o mesmo é instalado utilizando os “exemplos de
conteúdo” Há muitas „coisas‟ nele. Estas coisas são
chamadas „módulos‟, foram descritas anteriormente, e são
mostradas em caixas na figura seguinte. O único módulo
requerido é o „Main Menu‟, e todos os outros não são
necessários no nosso site. Vamos escondê-los!

Para esconder estes módulos
desnecessários, vá para o back-end
„localhost/joomlabeta/administrator‟
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.
Marque as caixas ao lado de todos os
módulos, exceto por „Main Menu‟ e
então clique no botão „Desabilitar‟ no
topo direito.
Isto deverá esconder todos os
módulos, caso você tenha uma
segunda página de módulos, você
deve ir nela e desabilitá-los também.

 Agora 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 „Menu‟ -> „Main Menu‟. Será
mostrada uma lista de todos os links atualmente vistos no seu
site.
 Para fazer a sua página „Home‟ padrão, a selecione marcando o
checkbox e clique em „Padrão‟ (Default) no topo à direita.
 Agora você notará que uma estrela apareçeu próxima a este
link, ele agora é o que aparecerá quando você digitar
“localhost/joomlabeta”
Para limpar o menu e remover todos os links que não são requeridos, faça igual
você fez aos módulos. Selecione todos os links que deseja esconder e clique em
„despublicar‟ (unpublish)

 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:xampphtdocsjoomlabetatemplatesrhuk_
milkywayimages‟ ou onde quer que fique o
diretório raiz do seu site com o nome
„mw_joomla_logo.png‟ para substituir a imagem
atual.

 Espero que você tenha gostado da sua
primeira experiência em Joomla!. Agora
vamos entrar em um nível intermediário de
aprendizado.

Cars
(Section)
Hatchbacks
(Category)
Maruti
(Content Item)
Santro
(Content Item)
Sedans
(Category)
City
(Content Item)
Corolla
(Content Item)
O conteúdo em Joomla! são as páginas de informações a ser mostradas no site. Há dois
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.

 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
manualmente, e será muito mais fácil de fazer o site.
 Quando quer que eu faça um site ou aplicativo
web, eu primeiro desenho a estutura em um pedaço
de papel. Isto facilita bastante. Então aqui está a
estrutura:

Bhide College of Engineering
Home
(Uncategorized)
About Us
(Uncategorized)
The Principal
(Uncategorize
d)
Contact Us
(Special)
Departments
(Section)
Mechanical
Engineering
(Category)
Faculty
(content Item)
Facilities
(content Item)
Projects
(content Item)
Electrical
Engineering
(Category)
Civil Engineering
(Category)
Faculty Projects

 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
6. Adicionar links para todas as coisas acima no
menu
7. Organizando a página

 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)

 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 fez no site dos
babuínos ou fazê-los posteriormente.

 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 descrição para ela no campo de
texto. Uma sugestão de descrição seria:
 “Esta seção contém todas as informações sobre os
diferentes departamentos em nossa faculdade”.
Salve através do botão “Save”.
 Esta seção foi adicionada à lista de seções e você
poderá editá-la, deletá-la ou criar uma nova em
„Section Manager‟

 Sugiro que você olhe a estrutura que
desenhamos e marque as áreas que já estão
prontas. Vamos continuar e criar as
categorias.

 Crie categorias através do „Category Manager‟ pelo
control panel ou através do menu „Content‟ -> „Category
Manager‟.
 Agora, criaremos uma categoria para cada departamento
da faculdade. Para fazê-lo, clique no botão „New‟
Escreva o nome da categoria
(Departamento) como título.
E selecione a „section‟ como
„departments‟, como esta categoria é um
departamento. Olhe a figura ao lado se
você está confuso.
Escreva uma descrição pequena do
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.

 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 engineering) precisa de 3 páginas:
1. Faculty: Uma página sobre o corpo docente do departamento
2. Facilities: Mostra todos os laboratórios e maquinários
3. Projects: Mostra todos os projetos legais feitos por estudantes no departamento.

 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.

Uma vez que você criou todas as diferentes páginas para cada departamento, é
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.

 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‟
5. Na caixa à direita „Menu Item Parameters‟ , selecione a categoria
apropriada.
6. Abaixo desta caixa, há mais duas caixas que estão minimizadas no
momento mas podem ser expandidas ao clicar no nome.
7. Clique no botão „Save‟ no topo, à direita
8. Se você visitar o site, verá o link no menu e ao clicar nele, verá uma
lista de todos os artigos/páginas pertecentes àquele departamento.
2: Add Links to the Department pages

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.
Na verdade, só precisamos dos nomes das páginas, vamos remover o
resto. No back-end, vá para menus -> main menu -> mechanical
department.
Esta página contém as facilidades para editar as configurações para o item
de menu. Agora você apenas tem que mudar os parâmetros para este
item de link. À direita, a caixa „Parameters-basic‟ deverá ser
expandida, clicando em seu nome.

 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 aparentar
assim:

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.
Ao editar qualquer página/link/categoria, os 5 botões acima estarão
disponíveis no lado direito, acima.
Preview : Mostra a você como o conteúdo que você escreveu será mostrado
no navegador.
Save : Salva as modificações feitas e vai para a página anterior a essa que
você está criando/editando.
Apply : Salva suas modificações e permanece na página de edição.
Close : Fecha a tela de criação/edição sem salvar. A não ser que você já
tenha clicado em „Apply‟ antes. Permanece a última versão salva.

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:
http://joomlacode.org/gf/download/frsrelease/6418/20469/rt_no
vus_j15.tgz
Como já vimos antes, um template é uma extensão do sistema
Joomla!. Para instalá-lo, logue no back-end e vá para
„Extensions‟->‟Install/Uninstall‟
Na caixa „Install from URL‟, digite a URL acima. Clique Install.
Joomla! automaticamente fará o download e instalará o template!
Você receberá uma mensagem de que foi instalado com sucesso
e um screenshot

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:xampphtdocsdigite_a_pasta_do-
seu_sitetemplatesrt_novus_j15images”
Há duas imagens que pode ser substituídas:
inset-banner.jpg
logo.png
Modifique estas imagens ao seu gosto e estamos prontos!

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, claro!

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 começo deste material há um link que
você poderá utilizar para fazer o download da versão
original em formato pdf, em inglês
Palavra Finais (do Autor)
Obrigada por ler este livro. Espero que você tenha gostado.
Adiante, você aprenderá a incrementar muito mais seus sites em
Joomla!

 À 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.

 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

 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

 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

 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 para visualizar o conteúdo.
 Caso logue um usuário com permissões para
modificar o site (autor, administrator, etc), nas áreas
onde ele pode alterar, aparecerá um botão de
edição, assim, este usuário não precisa logar-se na
área administrativa para modificar conteúdos do site.

 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

 Vá em Menus -> Main Menu
 Novo -> Weblinks -> Layouts Lista de Categorias (Essa opção
mostra todos os links de uma certa categoria)

 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

 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

 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

 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!

 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!

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_
website.htm
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!)

É 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

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.
Obrigada!

Aprenda joomla

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Aprenda joomla

Similar a Aprenda joomla (20)

Aprenda joomla

Notas del editor