tutorial - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · guia...

34
Universidade Federal de Santa Maria Centro de Tecnologia Programa de Educação Tutorial - Sistemas de Informação TUTORIAL Guia Prático de Utilização do Sistema de Gerenciamento de Conteúdo Joomla 3.4.1 Por: Camila da Luz Nogueira Emerson Pinto Homrich Josué Furlan Machado Leonardo Cancian Steffenello Otávio Bergmann Cassel

Upload: phamthuan

Post on 14-Feb-2018

212 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

Universidade Federal de Santa Maria

Centro de Tecnologia

Programa de Educação Tutorial - Sistemas de Informação

TUTORIAL

Guia Prático de Utilização do Sistema de Gerenciamento de Conteúdo

Joomla 3.4.1

Por:

Camila da Luz Nogueira

Emerson Pinto Homrich

Josué Furlan Machado

Leonardo Cancian Steffenello

Otávio Bergmann Cassel

Page 2: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

2

Sumário

1 Introdução................................................................................................3

2 Instalação.................................................................................................3

2.1 Instalação no computador pessoal..............................................4

2.2 Instalação do Joomla!..................................................................5

2.3 Menu de Administração................................................................9

3 Escolhendo e instalando Temas...........................................................11

4 Gerenciamento de Menus......................................................................13

4.1 Menus.............................................................................................13

4.2 Itens de Menu................................................................................15

5 Gerenciamento de Mídias......................................................................16

6 Gerenciamento de Usuários..................................................................17

6.1 Usuários.........................................................................................17

6.2 Grupos............................................................................................21

6.3 Níveis de Acesso de Visualização...............................................22

6.4 Notas...............................................................................................24

6.5 Categoria das Notas......................................................................25

7 Gerenciamento de Categorias...............................................................25

8 Gerenciamento de Artigos.....................................................................26

8.1 Criação de Artigos.........................................................................27

8.2 Modificação de Artigos..................................................................29

8.3 Exclusão de Artigos.......................................................................30

9 Adicionando Extensões..........................................................................30

10 Algumas dicas e sites úteis....................................................................34

11 Referências...............................................................................................34

Page 3: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

3

1. Introdução

O Software Joomla! é um gerenciador de conteúdo dinâmico (Content Management

System - CMS1) sendo um dos mais eficientes da atualidade, permitindo uma grande facilidade

e flexibilidade na construção de sites. Além da possibilidade de utilização de templates2

prontos, o Jommla oferece a oportunidade da customização e a criação de templates próprios.

A separação entre design, programação e conteúdo permite um melhor controle e

personalização por parte do desenvolvedor - sem a necessidade de ser um especialista na

área - e a concepção de um site extremamente interativo para o usuário final.

O Joomla! pode ser empregado para a criação de sites pessoais, blogs, portais de

conteúdo, lojas virtuais, catálogos de produtos entre outros diversos formatos de conteúdo. Por

ser um CSM de código aberto, existem milhares de templates e extensões (gratuitas e pagas)

disponíveis no mercado, permitindo até mesmo a integração com redes sociais, o que garante

a criação de sua própria página, sem grandes problemas, utilizando um design profissional e

personalizado para a sua necessidade.

Neste tutorial você encontrará o passo a passo desde a instalação, até o

gerenciamento, de conteúdo e extensões, para a elaboração de websites com o Joomla 3.4.1 -

ultima versão estável (em 21 de Março de 2015).

2. Instalação

Para iniciar a construção de seu site, você deve fazer o download do pacote de

instalação do Joomla!, o qual pode ser encontrado no seguinte endereço:

http://www.joomla.org/download. Neste site você também pode encontrar toda a

documentação e tópicos de ajuda caso esteja com algum problema ou dúvida.

A instalação do Joomla pode ser feita de duas formas: 1) No seu computador, onde

você iniciará a construção de seu site em um ambiente de desenvolvimento próprio. Após

finalizada a construção, você poderá enviá-lo para hospedagem em um servidor contratado por

você; 2) Ou a instalação pode também ser feita diretamente em um servidor de hospedagem.

Nos dois casos recomendamos a instalação em servidor Apache, por possuir maior

compatibilidade com este CMS.

1 Aplicativos utilizados para criar, editar, gerenciar e publicar conteúdo de forma consistentemente organizada permitindo que o

mesmo seja modificado, removido e adicionado com facilidade. Permite a criação, armazenamento e administração de conteúdo de forma dinâmica, através de uma interface de acesso via Internet.

2 Instrumento utilizado para separar a apresentação do conteúdo - design do site.

Page 4: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

4

Abaixo mostraremos a instalação do Joomla em um computador pessoal. No final deste

tutorial disponibilizamos alguns links para a instalação em servidores online.

2.1 Instalação no computador pessoal

Para o desenvolvimento do site no seu computador será necessário fazer o download

de um ambiente de desenvolvimento para criação de um servidor local, ou ‘localhost’. Neste

tutorial utilizaremos o XAMPP o qual é gratuito e pode ser encontrado no seguinte endereço:

https://www.apachefriends.org/pt_br.

Após o download, instale o XAMPP em seu computador, selecionando um local de

instalação de fácil acesso (C:\xampp). Ao concluir a instalação, inicie o programa e clique em

Start nos módulos Apache e MySQL como indicados na figura 1:

Figura 1 - Iniciando o XAMPP

Clique em Config e selecione um Browser (Utilizamos aqui o Google Chrome) e

marque em “Autostart of modules” as opções Apache e MySQL. Deste modo, sempre que

iniciar o programa, estas opções serão executadas automaticamente. Após, clique em Save.

Page 5: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

5

Figura 2 - Configurando o XAMPP

Pronto, o seu XAMPP está instalado e configurado, agora podemos iniciar a instalação

do Joomla!. Lembre-se de sempre iniciar o XAMPP quando necessitar trabalhar ou visualizar o

seu site Joomla! no seu localhost.

2.2 Instalação do Joomla!

Depois de concluído o download do Joomla! (http://www.joomla.org/download) crie

uma pasta com o nome do seu site dentro da pasta htdocs do XAMPP (C:\xampp\htdocs ou no

diretório onde você instalou). Neste tutorial nosso site será chamado “tutorial_joomla”

(necessário deixar o nome sem espaços ou acentos). Descompacte o arquivo que você fez o

download dentro desta pasta, devendo ficar semelhante à figura 3:

Figura 3 - Descompactando os arquivos do joomla!

Page 6: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

6

Após a descompactação 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 descrição para seu site, além de preencher seu e-mail e um nome e senha de

administrador do site. Mais abaixo há um botão “Site Offline”, esta opção serve para quem está

desenvolvendo em um servidor online, e caso esteja ativado não permite que outras pessoas

possam visualizar o site. Preencha conforme a figura 4, e passe para o próximo passo.

Figura 4 - Configuração do Joomla

A segunda etapa será a configuração do Banco de Dados que armazenará todas as

informações do nosso site. Preencha os campos como a imagem abaixo, deixando o campo

“Nome de Usuário” como root e “Senha” como vazio (ou como preencheu na instalação do

XAMPP, pois esta é nossa conexão com o Banco de Dados), mas em “Nome do Banco de

Dados”, você pode preencher como quiser. E em “Prefixo das Tabelas”, deixe como está, pois

o Joomla gera isso automaticamente. O preenchimento ficará semelhante à imagem abaixo:

Page 7: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

7

Figura 5 - Configuração do Banco de Dados do Joomla

Na terceira etapa, você pode instalar um conteúdo de exemplo, caso deseje iniciar seu

site sem nenhum conteúdo pode selecionar a opção “Nenhum”. Neste tutorial instalaremos o

“Conteúdo de exemplo Blog, em inglês (CB)”. Abaixo da aba Finalização podemos visualizar as

informações gerais do site, confira se está tudo correto, e siga para a instalação.

Page 8: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

8

Figura 6 - Configuração Geral do Joomla

Nesta parte você deve apenas aguardar. Após aparecerá uma tela de sucesso da

operação e você deve remover as pastas de instalação do joomla, clicando no botão marcado

na figura 7.

Figura 7 - Remoção das pastas de instalação do Joomla

Page 9: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

9

Pronto! O Joomla! foi instalado com sucesso! Agora nesta mesma página você pode,

visualizar o site (ou pela barra de endereço do browser localhost/tutorial_joomla), ou ir para o

painel de controle de administração (localhost/tutorial_joomla/administrator), onde seguiremos

a construção de nosso site.

2.3 Menu de Administração

Através do endereço localhost/tutorial_joomla/administrator, onde tutorial_joomla é o

nome do seu site, você pode acessar o painel de controle de administração. Preencha com o

usuário e senha que você preencheu na primeira etapa de instalação do Joomla!

Figura 8 Acesso ao painel de controle do Joomla!

Abaixo você pode visualizar uma imagem do Painel de Controle do Joomla. Através

deste painel você poderá gerenciar todas as ferramentas, gerenciar artigos, arquivos, mídias e

usuários. A partir deste painel executaremos todas as outras atividades deste tutorial.

Figura 9 Painel de Controle do Joomla!

Page 10: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

10

Para facilitar a construção do nosso site, vamos trocar a língua padrão do sistema de

inglês para português brasileiro, seguindo os seguintes passos:

No menu lateral selecione o botão ( )

Figura 10 Selecionando o Language Manager.

Após selecione no canto superior esquerdo. Busque pelo idioma

selecione o idioma na tabela que aparecerá, clique no

botão . Volte ao menu “Language Manager”, que pode ser acessado também pelo

menu superior.

Page 11: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

11

Figura 11 Selecionando o Language Manager no menu superior.

Marque o ícone para selecionar o idioma padrão que você deseja para o sistema,

deixando da seguinte forma:

Figura 12 Selecionando o Language Manager no menu superior.

Perceba que você alterou apenas a linguagem para o site, o sistema de administração

continua com a linguagem padrão como Inglês. Então no menu esquerdo selecione a opção

e siga os mesmos passos da instalação da linguagem para o site.

Pronto! O seu Joomla! está totalmente em português agora, caso o idioma padrão não

se altere automaticamente, feche o seu browser e acesse novamente o Painel de Controle.

3. Escolhendo e instalando Temas

A escolha e personalização de Temas (templates) permite você alterar o modo e o

formato como seu site é visualizado. Aqui mostraremos como fazer o download e instalar novos

templates. Você pode encontrar o menu de gerenciamento de temas na tela inicial, no meu

esquerdo ( ) ou na barra de menu superior( ) do painel

de controle.

Neste menu você poderá ver todas os templates instalados no sistema. Observe que

existem dois tipos: “Site” e “Administrador”. O primeiro refere-se ao tema que o site está

utilizando e o segundo ao tema do painel de controle do administrador. Altere entre os temas

disponíveis, da mesma forma que o idioma padrão, através da seleção do ícone ,

visualize a mudança do template do site acessado (localhost/tutorial_jommla) e atualize a

página para verificar a mudança.

Page 12: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

12

Figura 12 Gerenciador de Temas.

Por ser um CMS gratuito e muito popular é possível 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 faça

o download, não se esqueça de conferir a versão do template, esta deve ser compatível com o

Joomla que estamos utilizando (versão 3.4.1).

Após o download, no painel de controle do seu site, acesse o menu gerenciador de

extensões, no menu esquerdo da tela inicial ( ) ou no menu superior em

“Extensões” ( ). Através do botão ( ), selecione o arquivo de

tema o qual você fez o download, não é necessário a descompactação do mesmo, após

selecione ( ).

Figura 13 Instalando extensão Tema

Se tudo der certo, uma mensagem de sucesso aparecerá na tela e o seu tema foi

instalado! Você também pode instalar os temas através de uma URL, ou colocando o caminho

do diretório do arquivo.

Page 13: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

13

Volte ao menu de Gerenciamento de Temas ( ) e seu novo template

irá aparecer na lista de temas. Agora, você também pode selecioná-lo através do ícone .

Figura 14 Selecionando novo tema

Você pode possuir vários temas instalados em seu site, mas terá sempre apenas um

como padrão. Usuários mais experientes podem utilizar o botão ( ) para fazer

alterações no template através de seu código fonte.

4. Gerenciamento de Menus

O Joomla permite a personalização dos menus que temos no topo da página. Logo,

você pode editar, remover e acrescentar seus próprios menus. A ideia é permitir que as opções

mais usadas por você estejam em um lugar apenas, agilizando e facilitando o processo de

gerência do site.

4.1 Menus

Para acessar este gerenciador de menus, clique em , na parte superior da

página. Você será redirecionado para o Gerenciador de Menus. Realizado isto, você terá uma

tela como mostrada na figura 15:

Page 14: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

14

Figura 15 Gerenciador de Menus

Nesta página será possível gerenciar seus menus, com as opções Novo, Editar,

Eliminar e Reconstruir. Ao clicar em , você verá uma nova página, onde

será possível adicionar um novo menu como na figura 16:

Figura 16 Adicionar novo menu

Nesta página você preencherá um título para o novo menu, o tipo de menu desejado e

uma possível descrição. Por conseguinte, é clicar em para salvar o novo

menu. Se clicar em , você será remetido à página anterior. Se clicar em

, os dados serão salvos e você poderá adicionar um novo menu. Dessa

forma, um novo menu será adicionado. Criado esse novo menu, será possível visualizá-lo ao

posicionar o mouse sobre a opção . Assim, teremos a possibilidade de adicionar

novos itens a esse menu criado.

Page 15: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

15

4.2 Itens de Menu

Seguindo os passos acima, foi possível criar um novo menu. Agora, veremos como será

possível gerenciar os itens desse menu. Para isso, você deve clicar em

, no lado esquerdo da página. Realizado isto, você terá uma

tela como mostrada na figura 17:

Figura 17 Gerenciador de Itens de Menus

Nesta página, você poderá visualizar todos os itens correspondentes a cada menu de

seu site. Além disso, você pode gerenciar estes itens através das opções Novo, Editar,

Publicar, Despublicar, Validar, Entrada, Reconstruir, Em lote e Reciclagem. Ao clicar em

, é possível criar um novo item de menu, como na figura 18:

Figura 18 Adicionar novo item de menu

Aqui será possível adicionar um novo item de menu. As opções marcadas com

asterisco devem ser preenchidas obrigatoriamente. São elas, um título para o item de menu e o

Page 16: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

16

tipo de item de menu, que você poderá selecionar ao clicar no botão . Logo, você

terá uma nova janela, onde haverá algumas opções para que você a escolha. Além disso, você

também pode preencher os campos Hiperligação, com a localização do item do menu, Janela

Alvo e Tema de Estilo, além de outras configurações de aparência da página.

Feito isso, basta clicar em alguma das opções de Guardar. Com o item criado, você

pode gerenciá-lo de várias maneiras. Uma forma é ajustar a ordem na qual os itens aparecerão

no menu, devendo você clicar no item e

arrastá-lo para cima ou para baixo, reposicionando-o. Pode-se também ou

um item, selecionado o item e clicando sob a opção desejada.

5. Gerenciamento de Mídias

Ao criar artigos e publicá-los em nosso site em Joomla, devemos sempre ter como

objetivo chamar atenção 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 multimídia que pode ser utilizado em qualquer parte editável

do CMS. Vamos aprender uma maneira simples de organizar várias imagens, videos e links e

utilizá-las em nossos artigos.

Para trabalhar com mídias, vamos abrir o painel do Joomla e vamos clicar no ícone

“Administrar Mídia”. Ou em “Conteúdo” -> "Gerenciador de Mídias".

Aparecerá uma pagina como a figura 19:

Figura 19 Gerenciador de Mídias.

Page 17: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

17

Nesta página você criar uma pasta nova e/ou adicionar mídias de acordo com sua

preferência. Para adicionar uma imagem basta selecionar a pasta e clicar em

e enviar a imagem a sua escolha. A partir deste passo a

imagem estará dentro de seu Joomla pronta pra ser usada em qualquer artigo. Como adicionar

imagens em artigos será mostrado na sessão 8 (Gerenciamento de Artigos).

6. Gerenciamento de Usuários

O gerenciador de usuários permite a organização do acesso às configurações do site.

Você poderá criar e gerenciar usuários, definindo as permissões e configurações de cada um.

O gerenciador de usuários pode ser acessado pelo menu lateral ( ) ou na

barra de menus superior ( ).

Este gerenciador permite a configuração de usuários, grupos, níveis de acesso, notas

de usuário e categoria das notas. As abas de configuração podem ser encontradas na barra

lateral esquerda da página, e serão explicadas individualmente.

Figura 20 Gerenciador de Usuários.

6.1 Usuários

Aba acessada ao entrar no gerenciador (ver figura 20). Aqui você poderá ver todos os

usuários cadastrados e alterar suas configurações.

Para criar um novo usuário, basta clicar em . Você terá uma tela de

cadastro como a figura 21:

Page 18: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

18

Figura 21 Tela de cadastro: detalhes da conta

Aqui são inseridos os dados básicos da conta, como nome, nome de usuário, senha e

email. É possível também definir se o usuário receberá ou não emails do sistema, bloqueá-lo e

exigir redefinição de senha. Os itens marcados com * são obrigatórios, e os com campo

acinzentado são gerados automaticamente.

Concluída esta aba, partimos para as próximas. Na aba “Grupos de Usuários

Atribuídos”, podemos definir a que grupo esse usuário pertencerá. O grupo “Registered” vem

selecionado por padrão.

Na aba “Configurações Básicas”, podem ser definidos o idioma e estilo da interface da

administração, idioma do site, fuso horário, editor e site de ajuda. Estes itens afetam apenas

este usuário e é recomendado usar o padrão.

Abas preenchidas, basta clicar em algum dos botões no topo da tela, como:

para salvar e continuar na tela de cadastro; para salvar e

voltar para a tela inicial do gerenciador de usuários; ou para salvar e iniciar

outro cadastro. De volta à tela inicial, você já verá o novo usuário listado.

Page 19: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

19

Figura 22 Lista de usuários cadastrados.

Clicando no nome de algum usuário (“Super User”, por exemplo), é possível editar as

informações da conta. A checkbox do primeiro item “Ativado” serve para bloquear ou

desbloquear um usuário, e a checkbox do segundo item “Ativado” se refere ao estado da conta

(estará desativada se o usuário não tenha redefinido a sua senha caso seja exigido, por

exemplo).

As mesmas ações citadas acima podem ser feitas também pelos botões: ,

, e . Para excluir usuários, basta selecioná-los e clicar

em .

O botão permite o processamento de vários usuários simultaneamente. Uma

aba suspensa será aberta, onde é possível adicionar, remover ou definir os usuários

selecionados na lista à outros grupos, além de poder modificar a exigência de redefinição da

senha.

Figura 23 Aba de processamento em Lote.

Outra grande funcionalidade no Gerenciador de Usuários é a possibilidade de permitir

que os usuários se cadastrem no seu site. Para isso, vá na tela inicial do Gerenciador de

Usuários e clique em no canto superior direito para ser redirecionado para as

configurações do gerenciador de usuários.

Page 20: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

20

Figura 24 Configurações do Gerenciador de Usuários.

Nesta tela, você poderá permitir o cadastro de usuários, definir um grupo para o novo

usuário cadastrado, enviar a senha do usuário como parte do email de registro, notificar os

administradores sobre o novo cadastro, entre outras opções. No item “Ativação de Cadastro de

Novo Usuário”, podemos definir se a conta do usuário será ativada imediatamente ou não. Este

item conta com três opções:

● Nenhum: o usuário é ativado imediatamente após o cadastro;

● Usuário: o usuário receberá um email link para ativar sua conta;

● Administrador: o usuário receberá um link para verificar seu email. Os

administradores com permissão para criar usuários serão notificados para ativar

a conta.

Para salvar quaisquer alterações, basta clicar em ou

. Se a opção “Permitir Cadastro de Usuário” for ativada, um link para cadastro

é adicionado à tela de login do seu site, como pode ser visto na figura 25.

Page 21: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

21

Figura 25 Tela de login com link para cadastro.

6.2 Grupos

Nessa aba, o administrador pode criar novos grupos para associar usuários. É possível

visualizar a hierarquia dos grupos pré-definidos e a quantidade de usuários em cada um.

Figura 26 Hierarquia de grupos de usuários.

Page 22: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

22

Para criar um novo grupo, basta clicar em no menu superior. Na

tela de criação, basta inserir o nome do grupo e definir de qual outro grupo este novo será filho.

O grupo filho herdará as permissões do grupo pai.

Figura 27 Tela de criação de novo grupo.

Na imagem acima, criamos um grupo denominado “Leitor” que é filho do grupo “Public”.

Para concluir, basta clicar em: , ou . Para

cancelar, basta clicar em . Ao retornar para a aba de Grupos, o novo grupo já

deverá ter sido alocado na hierarquia.

Para editar o nome de um grupo ou mudar sua filiação, basta clicar em cima do nome

ou selecionar o grupo que se deseja editar e clicar em . A tela de edição é a mesma

da criação de grupos. Para excluir, basta selecionar os grupos e clicar em .

As permissões dos grupos podem ser visualizadas e editadas em na

pop-up na barra de menu superior. No item 10. Algumas dicas e sites úteis, você

encontrará a documentação sobre Access Control List (listas de controle de acesso), onde

poderá entender um pouco melhor sobre grupos, níveis e permissões de ações.

6.3 Níveis de Acesso de Visualização

Aqui o administrador pode definir o nível de acesso em que cada grupo fica restrito.

Page 23: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

23

Figura 28 Aba de Níveis de Acesso de Visualização.

Para criar um novo nível, basta clicar em . Na tela de criação do

nível, deve-se informar um nome e selecionar os grupos. Feito isso, basta clicar em alguma das

opções para salvar.

Figura 29 Exemplo de criação de um nível de acesso de visualização.

Na figura acima, criamos um nível chamado “Auxiliar”, que possui as permissões de

“Public”, “Author”, “Editor” e “Publisher”.

Page 24: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

24

Para editar algum nível, basta ir até a aba de Níveis de Acesso de Visualização, clicar

no nome ou selecionar o desejado e clicar em . Para excluir, basta selecionar e clicar

em .

6.4 Notas

Nessa aba, o administrador pode adicionar e gerenciar anotações sobre cada usuário.

Figura 30 Aba de Notas de Usuário.

Para criar uma nota, clique em , selecione um usuário clicando em

, preencha os campos e escolha uma das opções de salvamento no topo.

Figura 31 Tela de criação de nota.

Page 25: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

25

Para editar, publicar notas existentes ainda não publicadas, despublicar, arquivar ou

excluir notas, basta ir na tela inicial da aba Notas, selecionar as notas que se deseja realizar

alguma ação e utilizar os botões no topo da aba.

As notas também podem ser adicionadas pela aba Usuário, no botão

abaixo do nome de cada usuário.

6.5 Categoria das Notas

Nessa aba é possível categorizar as notas. O sistema oferece por padrão a categoria

“Uncategorised”, para quando se cria uma nota sem ter outras categorias existentes.

Figura 32 Aba de Categoria das Notas.

Assim como nas abas anteriores, a criação bem como todas as ações sobre as

categorias já criadas, como editar, publicar, arquivar, entre outras, podem ser feitas pelos

botões de função no topo da aba.

7. Gerenciamento de Categorias

Essa área permite a criação de categorias para os artigos, que auxiliam na classificação do

conteúdo do site. As categorias funcionam como pastas, e servem para identificar artigos com

conteúdo semelhante (que possuem o mesmo assunto, por exemplo).

A arquitetura Joomla exige que todos os artigos pertençam a uma categoria. Por isso, antes

de começar 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 página inicial, ou

navegue: Conteúdo - > ¨Gerenciador de Categorias" -> "Nova Categoria".

Page 26: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

26

Figura 33 Aba de categorias.

8. Gerenciamento de Artigos

Artigos estão entre as propriedades mais importantes do seu site, pois eles são o

conteúdo propriamente dito do seu site, serão as noticias e o que você gostaria de passar ao

usuário. Para criar um artigo, vá em "Conteúdo" -> "Gerenciador de artigos" e clique em

"Novo".

Clicando na opção Gerenciador de artigos, o usuário irá para a seguinte página:

Figura 34 Página de artigos.

Page 27: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

27

8.1. Criação de Artigos

Ao clicar em novo aparecerá uma tela como a da figura 35:

Figura 35 Novo de artigo.

Para cada campo na criação do artigo deve-se saber o que estes significam.

Page 28: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

28

1. Título - Título do artigo (e consequentemente da página);

2. Apelido - Nome utilizado para identificação interna do artigo, facilitando sua

busca dentro do Joomla!;

3. Categoria - Categoria à qual o artigo pertence;

4. Estado - Define a situação atual do artigo (se já está publicado, por exemplo);

5. Nível de acesso - Escolhe quem tem acesso à esse artigo (se ele é público,

apenas para usuários registrados ou apenas para administradores do site);

6. Permissões - Encaminha para a configuração de permissão da página;

7. Destaque - Define se o artigo será destacado ou não;

7.1. Nesta sessão também será determinado a relevância do artigo, ou seja, se

ele estará no topo de seu site.

8. Idioma- Seleciona em qual idioma o artigo foi escrito;

9. ID - Valor sequencial usado para identificação do artigo;

10. Conteúdo do artigo - Nesse grande campo texto deve ser redigido o conteúdo

propriamente dito do artigo;

Outras duas opções interessantes são os botões abaixo do artigo: "Leia mais" e

"Imagem":

- O primeiro você utiliza se você deseja que as pessoas vejam uma pequena previsão do

artigo e, clicando em "Leia mais" sejam transferidas para o artigo para ler todo seu

conteúdo. Precisamente, basta selecionar onde você quer a pré-visualização termine e,

em seguida, clique no botão "Leia mais";

- Já o segundo basta você clicá-lo para que o um meno familiar com o gerenciador de

mídias se abra e você selecione a imagem desejada.

Page 29: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

29

Figura 36 Seleção de imagem para artigo.

Após finalizado o artigo, você deve salvá-lo, selecionando uma das quatro opções de

salvar que o Joomla nos proporciona.

Importante: Tome cuidado com a opção "Salvar Como", pois esta salva uma duplicata

do artigo se este já estiver sido salvo anteriormente, o que resultará em problemas de

visualização no seu site.

Figura 37 Salvar artigo.

8.2. Modificação de Artigos

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.

Figura 38 Buscar artigo.

Page 30: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

30

Esta busca retornará todos os artigos relacionados com a busca, basta selecionar o

desejado e efetuar as alterações pretendidas em seguida salve novamente como mostrado na

Figura 8.1.3.

8.3 Exclusão de Artigos

A exclusão de artigos pode se dar de duas maneiras, a primeira e mais recomendada é

a despublicação do mesmo do site, e a segunda é o enviando para a lixeira. Em ambas o artigo

não aparecerá mais para as pessoas visitantes do shopping, mas ao enviar um artigo a lixeira

você corre o risco de excluí-lo permanentemente.

Para excluir um artigo basta selecionar o desejado e no menu superior clicar em lixeira

ou despublicar de acordo com o seu objetivo para com o artigo. Conforme a figura 39:

Figura 39 Excluir artigo.

9. Adicionando Extensões

O Joomla! conta com uma grande quantidade de extensões, que são pequenas

aplicações desenvolvidas para adicionar características ao seu site, como data e hora,

calendário, previsão do tempo, redes sociais, entre outras. Você pode encontrar extensões

testadas e aprovadas pela comunidade Joomla! no Joomla! Extensions Directory (ver item

10. Algumas dicas e sites úteis).

As extensões podem ser classificadas como componentes (aplicação para apresentar

conteúdo na página principal), módulos (aplicação para mostrada como parte da página),

plugins (função executada em resposta a eventos), temas e idiomas.

O Gerenciador de Extensões pode ser acessado pelo menu lateral ( )

ou em no menu pop-up , na barra superior. Você será

redirecionado para uma tela como a figura 40.

Page 31: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

31

Figura 40 Gerenciador de Extensões

No menu lateral, você tem acesso à diferentes áreas para tratar sobre as extensões.

, e , como os próprios nomes sugerem, são áreas para instalar,

atualizar e gerenciar (ativas, desativar, excluir etc) as extensões. serve para tratar

extensões existentes que podem não ter sido instaladas durante o processo normal de

instalação. contém as informações referentes ao banco de dados. contém

os avisos de erros referentes as extensões e suas instalações. Em , você poderá

instalar outros pacotes de idiomas para o sistema. Por fim, em você poderá

habilitar e desabilitar os sites de atualização de cada extensão.

Voltando à questão de instalar extensões, há três formas de se fazer isso:

● Enviar pacote de arquivos: você pode fazer o upload do arquivo compactado (.zip) de

alguma extensão baixada da web. Basta clicar em (ver Fig 9.1) para

selecionar o arquivo .zip da extensão e depois em e pronto! O Joomla!

cuidará de descompactar os arquivos e instalá-los nas pastas corretas.

● Instalar de um diretório: se você tiver realizado o upload de pacotes de arquivos de

extensão para o seu site, você pode extrair e instalar a extensão por aqui. A pasta “tmp”

vem definida como a pasta de instalação por padrão.

Page 32: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

32

Figura 41 Aba para instalação a partir de um diretório.

● Instalar a partir de uma URL: se a extensão que você deseja instalar está disponível

em uma URL, você pode instalá-la por esta aba. Basta inserir a URL e confirmar a

instalação.

Figura 42 Aba para instalação a partir de uma URL.

Após a instalação da extensão, você provavelmente precisará configurar alguns

parâmetros, como textos, posição ocupada na página, se a extensão estará disponível em

todas as páginas do site, entre outras. Para tais configurações, você precisará acessar os

gerenciadores específicos para cada tipo de extensão (módulos, plugins, temas e idiomas), que

podem ser encontrados no menu pop-up na barra de menus superior.

Figura 43 Gerenciadores de extensões no menu superior.

Page 33: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

33

Na tela inicial de cada gerenciador, estarão listadas todas as extensões daquele tipo.

Para alterar as configurações de uma extensão, clique no nome dela ou marque a(s)

desejada(s) e clique em . Demais ações sobre as extensões podem ser feitas

utilizando os botões na parte superior do gerenciador, como pode ser visto na imagem abaixo.

Figura 44 Gerenciador de Módulos.

Após a instalação e configuração de uma extensão, você pode verificar como ficou o

seu site. Abaixo, uma imagem de uma página exemplo com tema “Blog” e com uma extensão

para visualização de data e hora no site.

Figura 45Página exemplo com uma extensão para data e hora.

Page 34: TUTORIAL - site.ufsm.brsite.ufsm.br/arquivos/uploaded/uploads/d6ad22b6-5452-4812-95ad-ec... · Guia Prático de Utilização do Sistema de ... informações gerais do site, confira

34

10. Algumas dicas e sites úteis

1 - Instalação do Joomla! em um servidor online:

http://wiki.locaweb.com.br/pt-br/Joomla_3

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/

3 - Tutorial sobre Listas de Controle de Acesso nas versões 3.x do Joomla:

https://docs.joomla.org/J3.x:Access_Control_List_Tutorial

4 - Extensões para o ambiente Joomla:

http://extensions.joomla.org/

5 - Migração para o servidor

http://www.joomlaclube.com.br/doc/index.php?title=Migrando_o_Joomla!_para_outro_S

ervidor

11. Referências

1. Tutorial Iniciantes - Documentação do Joomla - Encontrado em:

https://docs.joomla.org/Tutorials:Beginners/pt-br - Acessado em Março de 2015

2. Joomla! 2.5 - Livro do Iniciante – Encontrado em: http://cocoate.com/pt-br/j25pt -

Acessado em Abril de 2015

3. Tutoriais de Joomla – Encontrado em: http://www.joomlabr.org/ - Acessado em Março

de 2015

4. Joomla Tutorials – Encontrado em: https://www.joomlatutorials.com/ - Acessado em

Março de 2015