Manual de gestão de conteúdo dos sites da UFOB Joomla! 3. Guia de uso do Joomla! 3 - plataforma de gestão de conteúdo dos sites da UFOB

Transcrição

1 Manual de gestão de conteúdo dos sites da UFOB Joomla! 3 Guia de uso do Joomla! 3 - plataforma de gestão de conteúdo dos sites da UFOB Janeiro de

2 Sumário 1. Primeiramente, o que é Joomla!? Usua rios Back-End Front-End Gestão de conteúdo dos sites da UFOB Criando um novo item em K Criando uma nova categoria em K Inserindo imagens no artigo Inserindo links em um artigo K Gerenciamento de menu Ocultar informações da página Inserindo documentos para download em um artigo K Inserindo tabela em um artigo Inserindo arquivos de áudio e vídeo no item K Criação de formulários... 23

3 1. Primeiramente, o que é Joomla!? É uma plataforma gratuita e de código aberto para criação de web sites. Oferece uma interface agradável e muitas facilidades no uso, pois não requer conhecimento profundo em programação. A página inicial do painel administrativo do Joomla! é o Painel de Controle (Figura 1). Figura 1 - Painel de controle do ambiente administrativo Para acessar o painel de controle do Joomla!, primeiramente deve-se fazer o login, digitando no navegador o endereço do site, incluindo no final do endereço a palavra administrator (em inglês). Por exemplo, Desta forma, a tela de login (Figura 2) deve aparecer. Figura 2 - Tela de login do ambiente administrativo 3

4 2. Usua rios Ao clicar em Gerenciar, no menu Usuários (Figura 3), uma lista com todos os usuários cadastrados é mostrada com seus respectivos níveis de acesso. Figura 3 - Menu Usuários Esses usuários podem ser incluídos em grupos com características específicas, o que delimitará suas funções no Joomla! (Figura 4). O administrador da plataforma recebe automaticamente o título de Super User, pois possui todos os privilégios. O controle de acesso desses usuários é dado front-end e back-end. O frontend é o acesso ao site público e o back-end é o site do administrador. Figura 4 - Grupos de usuários A seguir, o destaque das principais funções de cada tipo de usuário: 4

5 2.1. Back-End Manager: um gerente pode criar conteúdo e ver algumas informações sobre o sistema. Não cabe a este tipo de usuário: Administrar usuários; Instalar módulos e componentes; Atualizar um usuário super administrador ou modificar um super administrador; Trabalhar no item de menu do site/configuração Global; Enviar para todos os usuários; e Mudar e/ou instalar templates e arquivos de idiomas. Administrator: pode executar todas as funções do Manager. Não cabe a este tipo de usuário: Atualizar um usuário super administrador ou modificar um super administrador; Enviar em massa para todos os usuários; e Mudar e/ou instalar templates e arquivos de idioma. Super User: este usuário tem permissão para executar todas as funções na administração do Joomla!. Apenas um super administrador pode adicionar outros super administradores Front-End Registered: este usuário registrado pode editar suas próprias credenciais e ver partes do site que os usuários não-registrados não podem ver. Author: o autor pode fazer tudo que um usuário registrado faz. Um autor também pode escrever artigos e modificar seu próprio conteúdo. Geralmente, há um link no menu do usuário para isso. Editor: o editor pode fazer tudo que um autor faz. Um editor também pode escrever e editar todos os artigos que aparecem no front-end. Publisher: o usuário publisher pode fazer tudo que um editor faz, também pode escrever artigos e editar todas as informações que aparecem no front-end. Além disso, ele pode decidir se artigos são publicados ou não. 3. Gestão de conteúdo dos sites da UFOB Para gestão dos conteúdos disponíveis nos sites da UFOB, foi escolhida como 5

6 ferramenta de edição a extensão K2 presente em Componentes (Figura 5). Essa ferramenta apresenta algumas funcionalidades além das oferecidas pelo próprio editor de texto do Joomla! Criando um novo item em K2 Figura 5 - Componente K2 Antes de começar, verifique qual editor está em uso. Clique no ícone de usuário, na barra superior, e em Editor, selecione Editor - JCE (Figura 6). 6

7 Figura 6 - Selecionar editor Para criar um novo item é preciso que, no lado esquerdo do monitor, clique no botão Items e depois em Novo (Figura 7). Figura 7 - Visualização de itens do K2 Ao clicar em Novo, aparecerá a tela abaixo (Figura 8). Nela será possível digitar o Título (Title), selecionar a Categoria (Category) a qual o item pertence e escrever o texto do artigo no ambiente editor. 7

8 Figura 8 - Adicionar novo item 3.2. Criando uma nova categoria em K2 Para criar uma nova categoria a fim de organizar os artigos no componente K2, clique em Categories e depois em Novo (Figura 9). Figura 9 - Visualização de categorias do K2 No ambiente de criação de categoria escolha o título da categoria e depois clique em Salvar (Figura 10). 8

9 3.3. Inserindo imagens no artigo Figura 10 - Adicionando nova categoria Para inserir uma imagem no seu artigo K2, clique no botão Imagem, localizado na barra abaixo do ambiente de edição de texto (Figura 11). Figura 11 - Botões do Editor de Texto K2 Na caixa de seleção de imagem, adicione a imagem de qualquer lugar do seu computador clicando em Selecionar arquivo... (aparecerá uma aba de sua biblioteca, selecione a imagem que deseja clicando duas vezes) e depois em Iniciar Envio para que a imagem seja enviada para o ambiente Joomla! (Figura 12). 9

10 Figura 12 - Caixa de seleção de imagem Para adicionar a imagem escolhida no seu artigo, basta escolher a imagem desejada e clicar em Inserir (Figura 13). Figura 13 - Inserir imagem 10

11 3.4. Inserindo links em um artigo K2 Para inserir algum link em algum texto do artigo, basta selecionar a palavra que deseja inserir o link e clicar no ícone Inserir/Editar link, ilustrado na Figura 14. Figura 14 - Inserir link no texto Na caixa de seleção (Figura 15), no campo URL insira o endereço desejado (pode ser direcionado para uma página web ou para diversos tipos de itens presentes no banco de dados do site, navegando pelos itens de link na caixa central de seleção). Clique em Inserir para inserir o link. Finalmente, clique no botão Salvar Gerenciamento de menu Figura 15 - Inserindo link Para visualizar todos os itens de menu existentes na página do seu site, vá em Menus > Todos os itens de menu (Figura 16). Nessa página será possível editar 11

12 os menus que já existem e/ou criar novos. Figura 16 Botão Todos os itens de menu Para criar um novo item de menu, clique em Novo. Abrirá uma página onde será possível escolher o título do menu e, na aba Detalhes, poderá escolher o tipo de item de menu, clicando em Selecionar. Normalmente a janela de destino será Pai, e o tema de estilo Padrão (Figura 17). Figura 17 - Novo item de menu Para vincular um item do K2 a esse item de menu, na aba Detalhes, clique em Selecionar (Figura 17). Na janela que surgir, clique em K2 e em Item (Figura 18). 12

13 Figura 18 - Vincular item do K2 a um item de menu Em seguida, ainda na aba Detalhes, clique em Select e selecione o item desejado (Figura 19) Ocultar informações da página Figura 19 - Selecionar item do K2 Ao criar um novo item você pode mostrar e/ou ocultar algumas informações. Por exemplo, as informações sobre o autor e os links para imprimir ou enviar por podem ser ocultadas quando não forem necessárias. Para fazer essas modificações, deve-se editar algumas opções do item K2. 13

14 Clique em K2 > Items > Nome do seu arquivo. Na barra acima das informações do item, clique em Display Settings (Figura 20). Nas opções que surgirem, você pode configurar as informações que devem ser mostradas e ocultadas no site (Figura 21). Figura 20 - Opções de visualização Figura 21 - Opções de visualização do item K Inserindo documentos para download em um artigo K2 Para inserir documentos para download em artigos, no site usamos o componente Phoca Download. Para isso, no menu principal do ambiente administrativo escolha Componentes > Phoca Download > Files (Figura 22). Um ambiente para visualizar todos os documentos aparecerá. Para adicionar um arquivo no Phoca Download clique no botão Novo (Figura 23). 14

15 Manual de gestão de conteúdo dos sites da UFOB Joomla! 3 Figura 22 - Acessar arquivos do Phoca Download Figura 23 - Botão para inserir novo arquivo Na tela seguinte (Figura 24), no campo Title digite o título do seu documento e em Category selecione a categoria do seu documento. Em Filename escolha o arquivo que deseja disponibilizar para download. 15

16 Figura 24 - Inserindo novo arquivo Ao clicar em Select Filename (Figura 24), será aberta uma janela (Figura 25). Se o arquivo ainda não estiver no servidor, clique em Escolher arquivo e depois em Start Upload. Assim que o documento estiver disponível no servidor, selecione-o e, então, clique em Salvar. Figura 25 Fazer upload de arquivo Para disponibilizar este arquivo para download em um artigo qualquer, primeiramente crie um novo item do K2 (caso queira apenas disponibilizar o arquivo em uma página já existente, vá em K2 > Items > Nome do arquivo desejado) e no ambiente de editor de texto clique no botão Phoca Download File (Figura 26). 16

17 Figura 26 - Botão Phoca Download File Na janela ilustrada pela Figura 27 é possível escolher diversas opções do Phoca Download. Neste exemplo utilizamos o Link to File, para disponibilizar apenas um documento no item K2. Figura 27 - Seleção do tipo do link Após clicar em Link to File, selecione o arquivo que será disponibilizado para download. Em Title escolha um título para o arquivo (deixe vazio se quiser que o nome do documento fique como título) e finalmente clique em Insert Code para adicionar o link (Figura 28). 17

18 3.8. Inserindo tabela em um artigo Figura 28 - Inserindo documento no artigo Para inserir uma tabela no artigo de um item K2, acesse o editor de texto do item e depois clique no ícone de tabela (Figura 29). Figura 29 - Botão inserir nova tabela Ao clicar no botão de tabela, aparecerá a janela Tabelas. Na aba Geral, escolha a quantidade de colunas e de linhas da tabela. Também é possível escolher o alinhamento e a espessura da borda (deixe o valor em branco ou zerado se não quiser borda) (Figura 30). 18

19 Figura 30 - Opções gerais da tabela Na aba Avançado (Figura 31) é possível editar configurações avançadas da tabela, como, por exemplo, opções de borda (espessura, estilo e cor) e cor de fundo. Figura 31 - Opções avançadas da tabela Clique em Inserir, a tabela será inserida no editor de texto (Figura 32) e estará pronta para adicionar e editar o texto desejado. Outras modificações da tabela podem ser feitas no próprio editor, como fonte e tamanho da letra. 19

20 Figura 32 - Tabela adicionada ao artigo 3.9. Inserindo arquivos de áudio e vídeo no item K2 Para inserir os arquivos de áudio e vídeo a serem postados na página do item K2, pode-se utilizar os recursos disponíveis no Gerenciador de Mídia do K2. Para acessá-lo, clique em Componentes > K2 > Media Manager (Figura 33). Figura 33 - Gerenciador de mídia do K2 Primeiramente, insira os arquivos de áudio e vídeo em uma pasta, por exemplo, a pasta phocadownloadpap. Para fazer o upload dos arquivos para o servidor, clique no ícone de upload na barra superior do gerenciador de mídia, ou clique com botão direito no interior da página e escolha a opção Upload files (Figura 20

21 34). Figura 34 - Inserir arquivos no Gerenciador de Mídia Na caixa de seleção do gerenciador de mídia clique em Select files. Na caixa de seleção escolha o(s) arquivo(s) do seu computador e clique em Abrir (Figura 35). Finalmente, os arquivos ficam disponibilizados no servidor Joomla! para seu uso. Figura 35 - Selecionar arquivos de áudio e vídeo para upload Para adicionar os arquivos áudio MP3 e vídeo MP4 em um item K2, utiliza-se o plugin AllVideos. Crie um item K2 para disponibilizar estes arquivos. Para inserir o arquivo de áudio, você deve escrever as tags {mp3remote} {/mp3remote} (Figura 36) e entre essas tags coloque o endereço onde está armazenado o arquivo de áudio que você inseriu no servidor Joomla! na etapa anterior. Este caminho é composto pelo endereço no qual você está trabalhando, seguido da pasta onde se encontra o arquivo de áudio. Neste exemplo, estamos 21

22 trabalhando no este endereço deve ser substituído pelo site em que você está trabalhando, por exemplo, Em seguida, coloque o caminho da pasta onde o arquivo de áudio foi armazenado, no exemplo, images/phocadownloadpap. Em seguida, coloque o nome do arquivo de áudio que você inseriu no servidor. Neste exemplo, o nome do arquivo é audio.mp3 (Figura 36). Figura 36 - Comando para inserir arquivo de áudio Para inserir um arquivo de vídeo, deve-se seguir o mesmo padrão adotado para inserir o arquivo de áudio, modificando apenas as tags para {mp4remote} {/mp4remote} (Figura 37). O endereço é composto também da mesma forma, modificando apenas o nome do arquivo de vídeo que você inseriu. Figura 37 - Comando para inserir arquivo de vídeo Finalmente, salve o seu item K2 e os arquivos de áudio e vídeo já estarão disponibilizados na página web (Figura 38). Figura 38 - Visualização dos arquivos de áudio e vídeo na página web 22

23 Neste exemplo, foram utilizados apenas arquivos de formatos mp3 e mp4. No entanto, com o plugin AllVideos podemos utilizar diversos formatos de arquivos de áudio e vídeo. A Tabela 1 destaca os tipos de arquivos mais comuns e as tags para utilização do AllVideos. Tipo de Arquivo.mp3.mp4.wma.flv.3gp.mov.mpeg.mpg.avi.wmv 4. Criação de formulários Tabela 1 - Tipos de Arquivos AllVideos {mp3remote} {/mp3remote} {mp4remote} {/mp4remote} {wmaremote} {/wmaremote} {flvremote} {/flvremote} {3gpremote} {/3gpremote} {movremote} {/movremote} {mpegremote} {/mpegremote} {mpgremote} {/mpgremote} {aviremote} {/aviremote} {wmvremote} {/wmvremote} Para criação de formulários, utiliza-se o componente JSN UniForm. Para visualizar todos os formulários criados, clique em Componentes > JSN UniForm > Formulários (Figura 39). 23

24 Figura 39 - Acessando Formulários Para criar um novo formulário, clique em Novo e então em Formulário em Branco (Figura 40). Figura 40 - Opção Formulário em branco Na aba Geral inclua o nome do formulário no campo Título (Figura 41). 24

25 Figura 41 - Opções gerais para criação de formulário A aba Design é onde cada campo do formulário será criado (Figura 42). Ao clicar em Adicionar Campo, uma caixa de seleção com várias opções deve aparecer. Cada botão na caixa de seleção representa um tipo de campo que pode ser adicionado ao formulário. A Tabela 2 descreve cada um desses campos. Figura 42 - Adicionar campos do formulário 25

26 Tabela 2 - Descrição dos Componentes do JSN UniForm Componente Descrição Utilização Single Line Text Campo de texto utilizado em formulários para que usuário escreva um texto livre (por exemplo, Nome). Multiple Choice Dropdown Paragraph Text Checkboxes Campo utilizado para fornecer várias opções ao usuário. Neste tipo de campo, o usuário só pode escolher um único valor. Este componente disponibiliza valores pré-definidos em uma lista para escolha do usuário. Neste tipo de componente, o usuário só pode selecionar um dos valores pré-definidos. Este componente corresponde a uma caixa de texto para que o usuário possa escrever um texto livre. Pode ser usado, por exemplo, para descrição de informações importantes que se deseja saber do usuário. Neste tipo de componente você pode definir a quantidade máxima de palavras ou caracteres. Este componente corresponde a um conjunto de valores prédefinidos. Neste tipo de componente o usuário pode marcar mais de uma opção. List Static Content Este componente também disponibiliza uma lista de valores pré-definidos ao usuário. A diferença é que neste componente o usuário consegue escolher mais de um valor. Este componente possibilita escrever um texto (alguma informação) que deve ser mostrado ao usuário. 26

27 Google Maps Campo utilizado para mostrar algum mapa (Google Maps). Name Este campo especifica uma forma organizada para que o usuário digite o nome. O mesmo ainda pode escolher como quer ser referido (senhora ou senhorita, por exemplo) e especificar separadamente nome e sobrenome. Este tipo de componente é utilizado para especificar o e- mail do usuário no formulário. File Upload Campo utilizado quando é necessário enviar algum arquivo (pdf, doc, docx, jpg, etc.) junto com os dados do formulário. Likert Campo utilizado para coletar informações através da escala de Likert. Address Campo utilizado para que o usuário informe o endereço. Este campo utiliza blocos separados para especificar o nome da rua, bairro, cidade, estado, CEP, etc. Website Campo usado para digitar algum endereço de site. Neste tipo de campo, pode-se especificar um exemplo para o usuário. Data/Time Este campo é utilizado para que o usuário informe uma data específica através de um calendário no popup. 27

28 Country Este campo especifica uma lista de países para ser escolhido pelo usuário. Number Um campo de texto simples para inserção de número. Phone Campo específico para telefone. Currency Campo específico para trabalhar com valores de moedas. Password Campo específico para trabalhar com definição de senha do usuário. A Figura 43 ilustra o exemplo de um formulário criado com o JSN UniForm. Figura 43 - Exemplo de formulário 28

29 Outra configuração importante do JSN UniForm concentra-se na ação do formulário. É possível informar, por exemplo, para qual devem ser enviadas as respostas do formulário quando o usuário as submeter (Figura 44). Figura 44 - Notificação de Na aba Ação, pode-se configurar informações: Adicionar insere o para receber os dados do formulário. Enviar para emissor: você pode personalizar uma mensagem de resposta. Após envio do formulário: campo para personalizar a ação que deve ser realizada após o usuário clicar no botão de submissão do formulário. Pode-se, por exemplo, mostrar uma mensagem personalizada de Formulário submetido com sucesso! (Figura 45). Figura 45 Opções de ação de envio 29

30 Além de optar por receber os formulários por , é possível visualizar todos os formulários submetidos a partir do ambiente administrativo do Joomla!. Para visualizar os formulários submetidos, clique em Componentes > JSN UniForm > Envios (Figura 46). Figura 46 - Caminho para visualização de formulários Ao clicar em Envios, o ambiente ilustrado pela Figura 47 deve aparecer. Figura 47 Escolhendo um formulário 30

31 No campo de seleção escolha o formulário que deseja visualizar os envios e todos os dados de formulários submetidos podem ser visualizados. Para ver todos os detalhes e campos do formulário, clique em Detalhes (Figura 48). Figura 48 - Visualizando envio de formulários Ao clicar para visualizar os detalhes de algum formulário na lista de envios, a seguinte tela deve aparecer (Figura 49). Neste ambiente, você pode visualizar todos os dados inseridos no formulário, bem como todos os arquivos que possam ter sido enviados ao preencher o formulário. Além disso, é possível fazer alguma correção nos dados enviados pelo formulário, caso seja necessário. Figura 49 - Visualizando detalhes de um formulário 31