Este documento discute o sistema de gerenciamento de conteúdo Joomla!, incluindo o que é um CMS, as vantagens e desvantagens do Joomla!, como configurar sites no Joomla!, e como modificar templates. O próximo capítulo ensinará como instalar e personalizar o Joomla! de acordo com as necessidades do usuário.
2. 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!
Capítulo 1
3. CMS ou Content Management System, é um
programa desenvolvido para facilitar a gestão de um
conteúdo (dados)
O que é CMS?
4. Quais as reais necessidades do cliente?
Qual a complexidade do projeto?
Qual o prazo e orçamento do projeto?
Quais as particularidades do projeto?
Quando optar por um CMS?
6. • É 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 vantagens?
7. • 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
Quais suas desvantagens?
8. • 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.
Joomla! vs. Drupal
10. 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.
Estrutura do Joomla!
11. 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
12. 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
13. 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.
Direitos de acesso
14. 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.
Usuários especiais e Informações de
Contato
15. São os dados que irão aparecer no seu site:
Textos
Imagens
Vídeos
Etc.
Conteúdos
17. 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.
Componentes:
18. É 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.
Templates:
19. É 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.
Módulos:
20. 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.
Plug-Ins:
21. 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
Suportes do Joomla!
22. 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
Sumário
23. Aprenda Joomla! 1.5
Rápido
Um guia passo-a-passo visual para configurar websites úteis
utilizando Joomla! Em poucas horas
24. 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 o autor
25. 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.
Sobre a adaptação
26. 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.
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!
27. 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
Index
28. 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.
Instalando Joomla!
30. 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.
31. 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”
32. 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.
Instalando Joomla! 1.5
33. 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”
Primeira e segunda telas
34. A terceira tela é referente a licença do Joomla!, clique “próximo”.
Terceira e quarta telas
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
35. É 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.
Recomendações
36. 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.
37. 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 prosseguir.
Clique em OK e termine a instalação como de costume.
38. 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.
Criando a o arquivo
“configuration.php”
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.
40. 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.
Introdução
41. 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.
Básicos do Joomla!
Administração
www.sitename.com/administrator
Base de Dados
(BD)
Front-End
www.sitename.com
42. 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.
Gerenciando um site em J!
43. 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:
Seu primeiro site em Joomla! :
Babuínos
45. 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
46. 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.
Conhecendo o Back-End
47. 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
System Info
48. 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
Menu do Site (Site Menu)
49. 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.
Painel de Controle:
Gerenciamento de Usuários
50. 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).
Media Manager (gerenciador de Mídia)
51. 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á.
Configuração Global
52. 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!.
Passo #1: Escreva o nome do site
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!
53. 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
Tornando o Joomla! em português
54. • 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.
Tornando Português sua língua
padrão
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)
55. 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
Passo #2: Crie as páginas
É 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)
56. 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.
Passo #2: Crie as páginas
57. 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.
Observação
58. 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.
Passo #3: Crie Links de 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.
59. 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’.
Selecionando o tipo de menu
60. 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!
61. 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
Vinculando ao artigo
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.
62. 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.
Visualizando nossos links no
Front-End
63. 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!
Limpando a Bagunça
65. Varrendo para debaixo do tapete
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.
66. 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”
Limpando os items de menu extras
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)
67. 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_milkywa
yimages’ ou onde quer que fique o diretório raiz do
seu site com o nome ‘mw_joomla_logo.png’ para
substituir a imagem atual.
Dica
69. Espero que você tenha gostado da sua primeira
experiência em Joomla!. Agora vamos entrar em
um nível intermediário de aprendizado.
Nível Intermediário
70. Como um conteúdo é salvo
Cars● Hatchbacks● Maruti● Santro● City● Corolla● Sedans● Maruti● Santro● City● Corolla
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.
71. 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:
Criando seu segundo site em
Joomla!
73. 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
Estapas para a criação
74. 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 #1: Configurar o nome do site
75. 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.
Passo #2: Criar as páginas sem
categorias
76. 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’
Passo #3: Criar a Seção
(Departments)
77. Sugiro que você olhe a estrutura que
desenhamos e marque as áreas que já estão
prontas. Vamos continuar e criar as categorias.
Dica:
78. 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’
Passo #3: Criar uma categoria para cada departamento
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.
79. 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.
Passo #5: Adicionar páginas/itens
de conteúdo nestas categorias
80. 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.
Criando páginas com categoria
81. Step #6: Adicionar links para
todas as coisas acima no menu
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.
82. 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
83. 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.
Step #7: Organizando a página
84. 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:
Nosso segundo site padrão está
pronto!
85. 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.
Para editar qualquer página...
86. 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_novus_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
Utilizando outro template
87. 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!
Tornando o ‘Novus’ template
padrão
88. 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!
Versão do livro finalizada
89. 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
Sobre a adaptação
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!
90. À 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.
Incrementando o site
91. 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 Módulos no nosso
site
92. 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
93. 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
94. 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.
Dica:
95. 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
96. 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)
97. 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
98. 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
99. 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
100. 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!
101. 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!
102. 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!)
Referências
103. É 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
The End
104. 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.
Obrigada!
Sobre mim
Notas do Editor
OBS: Em detalhe do usuário (User Detail) você pode ver a data de registro do usuário, se ele recebe e-mails do sistema e ainda, a data de seu último login.