Escolar Documentos
Profissional Documentos
Cultura Documentos
Tutorial: Joomla 3.4.1
Tutorial: Joomla 3.4.1
Centro de Tecnologia
Programa de Educao Tutorial - Sistemas de Informao
TUTORIAL
2
1. Introduo
2. Instalao
Para iniciar a construo de seu site, voc deve fazer o download do pacote de
instalao do Joomla!, o qual pode ser encontrado no seguinte endereo:
http://www.joomla.org/download. Neste site voc tambm pode encontrar toda a
documentao e tpicos de ajuda caso esteja com algum problema ou dvida.
A instalao do Joomla pode ser feita de duas formas: 1) No seu computador, onde
voc iniciar a construo de seu site em um ambiente de desenvolvimento prprio. Aps
finalizada a construo, voc poder envi-lo para hospedagem em um servidor contratado por
voc; 2) Ou a instalao pode tambm ser feita diretamente em um servidor de hospedagem.
Nos dois casos recomendamos a instalao em servidor Apache, por possuir maior
compatibilidade com este CMS.
1 Aplicativos utilizados para criar, editar, gerenciar e publicar contedo de forma consistentemente organizada permitindo que o
mesmo seja modificado, removido e adicionado com facilidade. Permite a criao, armazenamento e administrao de contedo de
forma dinmica, atravs de uma interface de acesso via Internet.
3
Abaixo mostraremos a instalao do Joomla em um computador pessoal. No final deste
tutorial disponibilizamos alguns links para a instalao em servidores online.
4
Figura 2 - Configurando o XAMPP
Pronto, o seu XAMPP est instalado e configurado, agora podemos iniciar a instalao
do Joomla!. Lembre-se de sempre iniciar o XAMPP quando necessitar trabalhar ou visualizar o
seu site Joomla! no seu localhost.
5
Aps a descompactao digite em seu browser: localhost/tutorial_joomla onde
tutorial_joomla o nome que voc deu para a pasta (lembre que o XAMPP dever estar
aberto).
Nesta primeira etapa voc configurar o Joomla, e deve selecionar o idioma, preencher
o nome e uma descrio para seu site, alm de preencher seu e-mail e um nome e senha de
administrador do site. Mais abaixo h um boto Site Offline, esta opo serve para quem est
desenvolvendo em um servidor online, e caso esteja ativado no permite que outras pessoas
possam visualizar o site. Preencha conforme a figura 4, e passe para o prximo passo.
6
Figura 5 - Configurao do Banco de Dados do Joomla
Na terceira etapa, voc pode instalar um contedo de exemplo, caso deseje iniciar seu
site sem nenhum contedo pode selecionar a opo Nenhum. Neste tutorial instalaremos o
Contedo de exemplo Blog, em ingls (CB). Abaixo da aba Finalizao podemos visualizar as
informaes gerais do site, confira se est tudo correto, e siga para a instalao.
7
Figura 6 - Configurao Geral do Joomla
Nesta parte voc deve apenas aguardar. Aps aparecer uma tela de sucesso da
operao e voc deve remover as pastas de instalao do joomla, clicando no boto marcado
na figura 7.
8
Pronto! O Joomla! foi instalado com sucesso! Agora nesta mesma pgina voc pode,
visualizar o site (ou pela barra de endereo do browser localhost/tutorial_joomla), ou ir para o
painel de controle de administrao (localhost/tutorial_joomla/administrator), onde seguiremos
a construo de nosso site.
Abaixo voc pode visualizar uma imagem do Painel de Controle do Joomla. Atravs
deste painel voc poder gerenciar todas as ferramentas, gerenciar artigos, arquivos, mdias e
usurios. A partir deste painel executaremos todas as outras atividades deste tutorial.
9
Para facilitar a construo do nosso site, vamos trocar a lngua padro do sistema de
ingls para portugus brasileiro, seguindo os seguintes passos:
boto . Volte ao menu Language Manager, que pode ser acessado tambm pelo
menu superior.
10
Figura 11 Selecionando o Language Manager no menu superior.
Marque o cone para selecionar o idioma padro que voc deseja para o sistema,
deixando da seguinte forma:
Perceba que voc alterou apenas a linguagem para o site, o sistema de administrao
continua com a linguagem padro como Ingls. Ento no menu esquerdo selecione a opo
11
Figura 12 Gerenciador de Temas.
Por ser um CMS gratuito e muito popular possvel encontrar diversos sites online com
templates gratuitos para o Joomla! no item 10. Algumas dicas e sites teis deste tutorial
oferecemos uma lista com alguns destes sites. Procure um template que mais o agrade, e faa
o download, no se esquea de conferir a verso do template, esta deve ser compatvel com o
Joomla que estamos utilizando (verso 3.4.1).
Aps o download, no painel de controle do seu site, acesse o menu gerenciador de
selecione ( ).
Se tudo der certo, uma mensagem de sucesso aparecer na tela e o seu tema foi
instalado! Voc tambm pode instalar os temas atravs de uma URL, ou colocando o caminho
do diretrio do arquivo.
12
Volte ao menu de Gerenciamento de Temas ( ) e seu novo template
ir aparecer na lista de temas. Agora, voc tambm pode selecion-lo atravs do cone .
como padro. Usurios mais experientes podem utilizar o boto ( ) para fazer
alteraes no template atravs de seu cdigo fonte.
4. Gerenciamento de Menus
O Joomla permite a personalizao dos menus que temos no topo da pgina. Logo,
voc pode editar, remover e acrescentar seus prprios menus. A ideia permitir que as opes
mais usadas por voc estejam em um lugar apenas, agilizando e facilitando o processo de
gerncia do site.
4.1 Menus
13
Figura 15 Gerenciador de Menus
Nesta pgina ser possvel gerenciar seus menus, com as opes Novo, Editar,
Nesta pgina voc preencher um ttulo para o novo menu, o tipo de menu desejado e
14
4.2 Itens de Menu
Seguindo os passos acima, foi possvel criar um novo menu. Agora, veremos como ser
possvel gerenciar os itens desse menu. Para isso, voc deve clicar em
Nesta pgina, voc poder visualizar todos os itens correspondentes a cada menu de
seu site. Alm disso, voc pode gerenciar estes itens atravs das opes Novo, Editar,
Publicar, Despublicar, Validar, Entrada, Reconstruir, Em lote e Reciclagem. Ao clicar em
Aqui ser possvel adicionar um novo item de menu. As opes marcadas com
asterisco devem ser preenchidas obrigatoriamente. So elas, um ttulo para o item de menu e o
15
tipo de item de menu, que voc poder selecionar ao clicar no boto . Logo, voc
ter uma nova janela, onde haver algumas opes para que voc a escolha. Alm disso, voc
tambm pode preencher os campos Hiperligao, com a localizao do item do menu, Janela
Alvo e Tema de Estilo, alm de outras configuraes de aparncia da pgina.
Feito isso, basta clicar em alguma das opes de Guardar. Com o item criado, voc
pode gerenci-lo de vrias maneiras. Uma forma ajustar a ordem na qual os itens aparecero
5. Gerenciamento de Mdias
Ao criar artigos e public-los em nosso site em Joomla, devemos sempre ter como
objetivo chamar ateno do nosso leitor. A melhor maneira de fazer isso inserindo imagens,
que representem o assunto no qual falaremos e que sirvam para ilustrar o texto. O Joomla
possui um timo gerenciador de multimdia que pode ser utilizado em qualquer parte editvel
do CMS. Vamos aprender uma maneira simples de organizar vrias imagens, videos e links e
utiliz-las em nossos artigos.
Para trabalhar com mdias, vamos abrir o painel do Joomla e vamos clicar no cone
Administrar Mdia. Ou em Contedo -> "Gerenciador de Mdias".
16
Nesta pgina voc criar uma pasta nova e/ou adicionar mdias de acordo com sua
preferncia. Para adicionar uma imagem basta selecionar a pasta e clicar em
6. Gerenciamento de Usurios
O gerenciador de usurios permite a organizao do acesso s configuraes do site.
Voc poder criar e gerenciar usurios, definindo as permisses e configuraes de cada um.
O gerenciador de usurios pode ser acessado pelo menu lateral ( ) ou na
barra de menus superior ( ).
6.1 Usurios
Aba acessada ao entrar no gerenciador (ver figura 20). Aqui voc poder ver todos os
usurios cadastrados e alterar suas configuraes.
Para criar um novo usurio, basta clicar em . Voc ter uma tela de
cadastro como a figura 21:
17
Figura 21 Tela de cadastro: detalhes da conta
Aqui so inseridos os dados bsicos da conta, como nome, nome de usurio, senha e
email. possvel tambm definir se o usurio receber ou no emails do sistema, bloque-lo e
exigir redefinio de senha. Os itens marcados com * so obrigatrios, e os com campo
acinzentado so gerados automaticamente.
Concluda esta aba, partimos para as prximas. Na aba Grupos de Usurios
Atribudos, podemos definir a que grupo esse usurio pertencer. O grupo Registered vem
selecionado por padro.
Na aba Configuraes Bsicas, podem ser definidos o idioma e estilo da interface da
administrao, idioma do site, fuso horrio, editor e site de ajuda. Estes itens afetam apenas
este usurio e recomendado usar o padro.
Abas preenchidas, basta clicar em algum dos botes no topo da tela, como:
18
Figura 22 Lista de usurios cadastrados.
Clicando no nome de algum usurio (Super User, por exemplo), possvel editar as
informaes da conta. A checkbox do primeiro item Ativado serve para bloquear ou
desbloquear um usurio, e a checkbox do segundo item Ativado se refere ao estado da conta
(estar desativada se o usurio no tenha redefinido a sua senha caso seja exigido, por
exemplo).
As mesmas aes citadas acima podem ser feitas tambm pelos botes: ,
em .
19
Figura 24 Configuraes do Gerenciador de Usurios.
Nesta tela, voc poder permitir o cadastro de usurios, definir um grupo para o novo
usurio cadastrado, enviar a senha do usurio como parte do email de registro, notificar os
administradores sobre o novo cadastro, entre outras opes. No item Ativao de Cadastro de
Novo Usurio, podemos definir se a conta do usurio ser ativada imediatamente ou no. Este
item conta com trs opes:
20
Figura 25 Tela de login com link para cadastro.
6.2 Grupos
Nessa aba, o administrador pode criar novos grupos para associar usurios. possvel
visualizar a hierarquia dos grupos pr-definidos e a quantidade de usurios em cada um.
21
Para criar um novo grupo, basta clicar em no menu superior. Na
tela de criao, basta inserir o nome do grupo e definir de qual outro grupo este novo ser filho.
O grupo filho herdar as permisses do grupo pai.
Na imagem acima, criamos um grupo denominado Leitor que filho do grupo Public.
Para editar o nome de um grupo ou mudar sua filiao, basta clicar em cima do nome
Aqui o administrador pode definir o nvel de acesso em que cada grupo fica restrito.
22
Figura 28 Aba de Nveis de Acesso de Visualizao.
23
Para editar algum nvel, basta ir at a aba de Nveis de Acesso de Visualizao, clicar
em .
6.4 Notas
Nessa aba, o administrador pode adicionar e gerenciar anotaes sobre cada usurio.
24
Para editar, publicar notas existentes ainda no publicadas, despublicar, arquivar ou
excluir notas, basta ir na tela inicial da aba Notas, selecionar as notas que se deseja realizar
alguma ao e utilizar os botes no topo da aba.
Nessa aba possvel categorizar as notas. O sistema oferece por padro a categoria
Uncategorised, para quando se cria uma nota sem ter outras categorias existentes.
Assim como nas abas anteriores, a criao bem como todas as aes sobre as
categorias j criadas, como editar, publicar, arquivar, entre outras, podem ser feitas pelos
botes de funo no topo da aba.
7. Gerenciamento de Categorias
Essa rea permite a criao de categorias para os artigos, que auxiliam na classificao do
contedo do site. As categorias funcionam como pastas, e servem para identificar artigos com
contedo semelhante (que possuem o mesmo assunto, por exemplo).
A arquitetura Joomla exige que todos os artigos pertenam a uma categoria. Por isso, antes
de comear criando as categorias, preciso pensar nos nomes que voc pode precisar. Pense
em uma categoria como uma pasta e os artigos como os documentos dentro da pasta.
Para criar uma nova categoria selecione "Gerenciador de Categorias" na pgina inicial, ou
navegue: Contedo - > Gerenciador de Categorias" -> "Nova Categoria".
25
Figura 33 Aba de categorias.
8. Gerenciamento de Artigos
Artigos esto entre as propriedades mais importantes do seu site, pois eles so o
contedo propriamente dito do seu site, sero as noticias e o que voc gostaria de passar ao
usurio. Para criar um artigo, v em "Contedo" -> "Gerenciador de artigos" e clique em
"Novo".
Clicando na opo Gerenciador de artigos, o usurio ir para a seguinte pgina:
26
8.1. Criao de Artigos
Para cada campo na criao do artigo deve-se saber o que estes significam.
27
1. Ttulo - Ttulo do artigo (e consequentemente da pgina);
2. Apelido - Nome utilizado para identificao interna do artigo, facilitando sua
busca dentro do Joomla!;
3. Categoria - Categoria qual o artigo pertence;
4. Estado - Define a situao atual do artigo (se j est publicado, por exemplo);
5. Nvel de acesso - Escolhe quem tem acesso esse artigo (se ele pblico,
apenas para usurios registrados ou apenas para administradores do site);
6. Permisses - Encaminha para a configurao de permisso da pgina;
7. Destaque - Define se o artigo ser destacado ou no;
7.1. Nesta sesso tambm ser determinado a relevncia do artigo, ou seja, se
ele estar no topo de seu site.
- O primeiro voc utiliza se voc deseja que as pessoas vejam uma pequena previso do
artigo e, clicando em "Leia mais" sejam transferidas para o artigo para ler todo seu
contedo. Precisamente, basta selecionar onde voc quer a pr-visualizao termine e,
em seguida, clique no boto "Leia mais";
- J o segundo basta voc clic-lo para que o um meno familiar com o gerenciador de
mdias se abra e voc selecione a imagem desejada.
28
Figura 36 Seleo de imagem para artigo.
Aps finalizado o artigo, voc deve salv-lo, selecionando uma das quatro opes de
salvar que o Joomla nos proporciona.
Importante: Tome cuidado com a opo "Salvar Como", pois esta salva uma duplicata
do artigo se este j estiver sido salvo anteriormente, o que resultar em problemas de
visualizao no seu site.
Toda vez que voc desejar alterar um artigo basta voc navegar novamente at o menu
de artigos. E inserir o nome do artigo ou parte do nome no campo filtrar e clicar em buscar.
29
Esta busca retornar todos os artigos relacionados com a busca, basta selecionar o
desejado e efetuar as alteraes pretendidas em seguida salve novamente como mostrado na
Figura 8.1.3.
9. Adicionando Extenses
O Joomla! conta com uma grande quantidade de extenses, que so pequenas
aplicaes desenvolvidas para adicionar caractersticas ao seu site, como data e hora,
calendrio, previso do tempo, redes sociais, entre outras. Voc pode encontrar extenses
testadas e aprovadas pela comunidade Joomla! no Joomla! Extensions Directory (ver item
10. Algumas dicas e sites teis).
As extenses podem ser classificadas como componentes (aplicao para apresentar
contedo na pgina principal), mdulos (aplicao para mostrada como parte da pgina),
plugins (funo executada em resposta a eventos), temas e idiomas.
30
Figura 40 Gerenciador de Extenses
No menu lateral, voc tem acesso diferentes reas para tratar sobre as extenses.
, e , como os prprios nomes sugerem, so reas para instalar,
atualizar e gerenciar (ativas, desativar, excluir etc) as extenses. serve para tratar
extenses existentes que podem no ter sido instaladas durante o processo normal de
instalao. contm as informaes referentes ao banco de dados. contm
os avisos de erros referentes as extenses e suas instalaes. Em , voc poder
instalar outros pacotes de idiomas para o sistema. Por fim, em voc poder
habilitar e desabilitar os sites de atualizao de cada extenso.
Voltando questo de instalar extenses, h trs formas de se fazer isso:
Enviar pacote de arquivos: voc pode fazer o upload do arquivo compactado (.zip) de
alguma extenso baixada da web. Basta clicar em (ver Fig 9.1) para
31
Figura 41 Aba para instalao a partir de um diretrio.
Instalar a partir de uma URL: se a extenso que voc deseja instalar est disponvel
em uma URL, voc pode instal-la por esta aba. Basta inserir a URL e confirmar a
instalao.
32
Na tela inicial de cada gerenciador, estaro listadas todas as extenses daquele tipo.
Para alterar as configuraes de uma extenso, clique no nome dela ou marque a(s)
Aps a instalao e configurao de uma extenso, voc pode verificar como ficou o
seu site. Abaixo, uma imagem de uma pgina exemplo com tema Blog e com uma extenso
para visualizao de data e hora no site.
33
10. Algumas dicas e sites teis
2 - Templates de Joomla:
2.1 http://www.freshjoomlatemplates.com//
2.2 http://www.joomshaper.com/joomla-templates
2.3 https://www.joomlashine.com/free-joomla-templates.
2.4 http://www.joomlart.com/joomla/templates
2.5 http://www.templatejoomla.com.br/
11. Referncias
34