Tutorial de Administração de site em CMS XOOPS ver.3

2.561 visualizações

Publicada em

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.561
No SlideShare
0
A partir de incorporações
0
Número de incorporações
17
Ações
Compartilhamentos
0
Downloads
98
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tutorial de Administração de site em CMS XOOPS ver.3

  1. 1. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.0Este tutorial apresenta algumas funções de administração de um site desenvolvido com o CMS XOOPS.Sumário1 Introdução..................................................................................................................................... 12 Login na área administrativa ................................................................................................... 23 Mudança de tema principal do site e idioma....................................................................... 34 Instalação de módulos .............................................................................................................. 55 Instalação e configuração do módulo News ....................................................................... 96 Publicar Notícias ....................................................................................................................... 127 Utilizar o editor de texto para formatar Notícias .............................................................. 148 Inserir Imagens .......................................................................................................................... 199 Visualizar imagens da galeria................................................................................................ 2110 Criar um formulário de contato – Fale Conosco .......................................................... 2211 Publicar Imagem no módulo Mastop Go2 ...................................................................... 2712 Administrando os blocos de conteúdo nas páginas .................................................. 2913 Criação de blocos personalizados................................................................................... 3214 Criação de página de conteúdo no módulo Mastop Publish .................................... 37HistóricoData Descrição da alteração Versão Responsável29/10/2010 Criação do documento 1.0 Luis Marcelo18/11/2010 Inclusão de administração do módulo Mastop Go2 Luis Marcelo18/11/2010 Inclusão de administração do blocos 2.0 Luis Marcelo02/12/2010 Inclusão de blocos personalizados e página do Mastop Publish 3.0 Luis Marcelo1 IntroduçãoEste Tutorial foi criado para as aulas do Curso Web FAVENI. Para desenvolver as atividades aquiapresentadas, o aluno deverá ter realizado as seguintes tarefas: 1.1 Instalar o CMS XOOPS em seu ambiente de teste, de acordo com o material apresentado na aula 20 disponível na URL http://elencoweb.com.br/modelo/modules/news/article.php?storyid=2 1.2 Fazer o upload da pasta de idioma (portuguese-br) para a pasta http://site_do_aluno.gbhosting.com.br/xoops/language 1.3 Fazer o upload da pasta de tema (web_faveni) para a pasta http://site_do_aluno.gbhosting.com.br/xoops/themes 1.4 Fazer o upload da pasta do módulo Liaise 1.27 (liaise) para a pasta http://site_do_aluno.gbhosting.com.br/xoops/modulesOs arquivos citados acima estão no site de modelo, na URLhttp://elencoweb.com.br/modelo/modules/news/article.php?storyid=1 1 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  2. 2. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.02 Login na área administrativa 2.1 No menu lateral esquerdo do site, informe seu usuário (username) e senha (password) para administração do site. 2.2 Ao clicar no botão “User Login”, o site irá apresentar a mensagem de boas vindas e retornará para a tela inicial. 2.3 Agora, no lugar do bloco de Login, você irá ver um bloco com o Menu do Usuário (User Menu) 2.4 Para acessar a área de administração do site, clique em Administração (Administration Menu). 2 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  3. 3. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.03 Mudança de tema principal do site e idioma 3.1 Ao acessar a área de administração do site você verá uma tela parecida com a imagem abaixo. 3.2 Para alterar o tema (layout) do site e o idioma padrão, clique no ícone de Preferências. 3.3 O sistema irá apresentar o menu de configurações do site. 3 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  4. 4. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.03.4 Clique no link “Editar” da opção Configurações gerais, conforme a imagem ao lado3.5 O site irá abrir uma tela de informações. Veja na figura abaixo o local para alterar o idioma e o tema principal do site.3.6 Vá até o final da tela e clique no botão “Go!” (Prosseguir).3.7 Para conferir o novo tema (layout) no site, clique no ícone no canto superior direito da área de administração do site, conforme imagem ao lado. 4 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  5. 5. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.04 Instalação de módulos 4.1 Volte para área de adminsitração do site. Você uma área parecida com a imagem abaixo. 4.2 Repare na área em destaque os módulos instalados no site. Por enquanto estes são os módulos básicos do site: 4.2.1 System: o módulo principal que controla a administração do site 4.2.2 Private Messages: módulo de mensagens internas do site, enviadas entre os usuários cadastrados 4.2.3 User Profile: módulo que organiza o formato dos formulários de cadastro de usuário e a consulta aos usuários já cadastrados. 4.2.4 Protector: módulo fundamental para a proteção do site com ataques e invasões 4.3 No menu horizontal, pare o mouse sobre o link “Módulos”. Este menu também apresenta a lista de módulos instalados. Clique no link “Módulos” para acessar a área de instalação de novos módulos. 5 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  6. 6. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.04.4 O site irá apresentar a seguinte tela:4.5 A janela maior mostra os módulos instalados no site. Logo abaixo são listados os módulos disponíveis para instalação. Para um módulo estar disponível, seus arquivos precisam estar disponíveis na pasta http://seu_site.com.br/modules4.6 Para instalar o módulo disponível, clique no link do lado direito da tela, conforme a imagem acima.4.7 O site irá pedir a confirmação da instalação do módulo. Clique em Instalar. 6 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  7. 7. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.04.8 O site irá apresentar uma tela com as ações efetuadas para instalar o site. Se não ocorrer nenhum erro, vá até o final da tela em clique no link “Retornar para a página...” conforme a imagem abaixo.4.9 De volta para área de administração dos módulos, o módulo instalado aparece junto com os outros.4.10 Vamos agora alterar o nome dos módulos e a apresentação dos mesmos no site.4.11 Modifique os nomes dos módulos conforme a imagem acima. Na coluna “Ordem” é possível controlar a ordem em que os módulos aparecem no Menu Principal do site. Vamos colocar o valor “0 (zero)” nos módulos que não queremos que apareçam no menu.4.12 Clique em “Prosseguir” para finalizar a edição. 7 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  8. 8. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.04.13 O site irá pedir a confirmação das alterações. Clique em Prosseguir.4.14 O site irá apresentar uma tela de confirmação da edição. Clique no link conforme a imagem ao lado.4.15 Ao final o site irá mostrar como ficou a tela de administração dos módulos. Repita estes passos para instalar outros módulos no site. 8 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  9. 9. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.05 Instalação e configuração do módulo News 5.1 Iremos agora instalar o módulo News 1.66. Para isso precisamos que os arquivos de instalação do módulo estejam na respectiva pasta de módulos do site. 5.2 Siga os passos para a instalação do módulo, de acordo com o item 4 deste tutorial. 5.3 Após instalar o módulo, vá até a área de administração do site e clique no ícone de notícias, conforme a imagem ao lado. 5.4 O site irá apresentar a tela de administração do módulo de notícias. 5.5 Para publicar uma notícia precisamos criar os Tópicos, que irão classificar as notícias. Se estivéssemos criando um site de um jornal online, os tópicos poderiam ser: • Esportes • Política • Cotidiano 5.6 Para criar os tópicos, clique na aba ou no link “Gerenciador de Tópicos”, conforme a imagem ao lado. 9 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  10. 10. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.05.7 O site irá apresentar uma tela com a lista dos tópicos atuais e mais abaixo um formulário para a criação de novos tópicos, conforme a imagem abaixo.5.8 Inicialmente só existe um tópico criado, mas não temos permissão para usá-lo, então iremos editar este tópico para mudar o nome, as permissões e outras opções.5.9 Na lista de tópicos, clique no link Editar, conforme a imagem acima.5.10 Na janela “Modificar tópico” altere o campo “Nome do Tópico”.5.11 O campo “Descrição do tópico” quando preenchido apresenta um resumo sobre o o assunto do tópico no topo da lista de notícias deste tópico. Insira uma descrição breve sobre o tópico para verificar como a informação será apresentada no site.5.12 No item “Tópico relacionado” é possível criar uma hierarquia de tópicos e sub-tópicos para classificar as notícias.5.13 O item cor dos tópicos pode ser mantido sem alteração.5.14 No item “Publicar este tópico como um submenu”, se estiver como marcado como “sim”, este tópico irá aparecer com um item de sub-menu do Item “Notícias” no menu principal do site.5.15 No item “Publicar na página inicial?”, se estiver marcado como “Sim”, uma chamada para a notícia irá aparecer na lista de notícias do site mesmo que o usuário que esteja acessando não tenha permissão para ver a notícia completa. Se você quiser criar uma categoria de notícias que só deve aparecer para usuários específicos, marque esta opção como “Não”. 10 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  11. 11. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.05.16 No item “Imagem do tópico” é possível escolher uma imagem para identificar as notícias. Essa imagem fica sempre no primeiro parágrafo da notícia, do lado esquerdo ou direito. Deixe esta imagem como está para que possa verificar como ela é apresentada no site. Depois você pode retirar ou alterar a imagem. Para não apresentar nenhuma imagem, selecione “blank.gif”. Para usar outra imagem, o aqruivo deve ser enviado via FTP para a pasta .../modules/news/images/topics/ .5.17 Por último iremos definir as permissões de quem pode aprovar notícias, enviar notícias e visualizar notícias. Por enquanto não tratamos sobre os grupos de usuários no XOOPS, mas os grupos principais, definidos na instalação do site são:• Webmaster: usuário administrador do site, no caso, você! Dê a esse usuário as 3 permissões• Registered User: os próximos usuários que irão se cadastrar no site. Por enquanto dê a esses usuários somente a permissão de visualização• Anonymous user: é o usuário visitante do site, que não fez cadastro e não está logado. Dê a esse usuário somente a permissão de visualização5.18 Ao final as permissões irão ficar conforme a imagem abaixo.5.19 Para finalizar a edição do tópico, clique em “Modificar” 11 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  12. 12. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.06 Publicar Notícias 6.1 Para publicar notícias clique no ícone de “Notícias”, na tela de administração do site, conforme a imagem ao lado. 6.2 O site irá apresentar a tela de administração das notícias. Clique na aba “Publicar/Editar notícias”, conforme a imagem ao lado. 6.3 O site irá apresentar uma lista das últimas notícias, que por enquanto estará vazia (ver imagem abaixo). 6.4 Logo abaixo você encontra o formulário para a criação de uma nova notícia. Use o formulário “Enviar notícias” para publicar um novo conteúdo. 12 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  13. 13. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.06.5 Para isso preencha os seguintes campos: 6.5.1 Título: coloque o título da notícia; 6.5.2 Tópico: para escolher a categoria da notícia. Aqui você verá o tópico que acabou de criar no item 5 deste tutorial. 6.5.3 Mostrar imagem do Tópico?: deixe marcado “sim”; 6.5.4 Posição: deixe a opção “esquerda”; 6.5.5 Publicar na Página inicial?: para as notícias das categorias de acesso ao público, deixe a opção “sim”. Para as categorias de notícias internas, deixe a opção “não”. A página inicial das notícias é aquela visualizada ao clicar no link “Notícias” do menu principal do site. 6.5.6 Autor: irá aparecer o nome do usuário que está logado no momento. Isso pode ser alterado nas preferências do módulo de Notícias; 6.5.7 Texto Introdutório: insira neste campo o texto inicial da notícia, geralmente o parágrafo inicial. Este texto irá aparecer como introdução da notícia quando for apresentada no site. Para formatar os dados deste campo e para inserir outros elementos, utilize o editor de texto que fica no alto deste campo. (Veja item 7 deste tutorial). 6.5.8 Texto Complementar: siga o mesmo procedimento para inserir o texto complementar. Este texto só aparece quando o visitante clica no link da notícia para acessar o conteúdo; 6.5.9 * Descrição Meta description: esta será a descrição desta página que será apresentada nos mecanismos de busca (Google, Yahoo, etc). Aqui você pode copiar e colar uma parte do texto introdutório. Para habilitar esta opção teremos que editar as Configurações do módulo de Notícias. 6.5.10 * Palavras-chave Meta keywords: digite aqui algumas palavras principais da notícia, separadas por vírgula, a serem usadas pelos mecanismos de busca para indexar a notícia. Para habilitar esta opção teremos que editar as Configurações do módulo de Notícias. 6.5.11 Selecione um arquivo para enviar: é possível anexar um arquivo do tipo .jpg, .gif, .png, .zip; .doc, .docx ou .pdf. Este arquivo ficará disponível para download num link no final da notícia; 6.5.12 Selecione uma imagem para anexar à notícia: é possível inserir aqui uma imagem para ilustrar a notícia. A vantagem é que facilita a inserção da imagem, que é automática. A desvantagem é que não podemos definir um local diferente onde queremos que a imagem apareça. 6.5.13 Opções: aqui você pode deixar marcada a opção “Aprovar” para publicar a notícia assim que estiver pronta. Se o item “Aprovar” for desmarcado ou não estiver aparecendo no seu formulário a notícia ficará aguardando aprovação e não será publicada no site até ser aprovada por um usuário com permissão para aprovação de notícias.6.6 Nas outras opções é possível também programar o dia e hora para a publicação e para a exclusão da notícia. No item “Notificar por e-mail quando publicado” deixe marcado; Os outros itens deixe desmarcado.6.7 Para visualizar a notícia no layout do site clique em “Exibir”.6.8 Para publicar a notícia, clique em “Publicar”; 13 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  14. 14. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.07 Utilizar o editor de texto para formatar Notícias 7.1 Para editar os textos de Notícias será usado o editor de texto simplificado. As funções disponíveis no editor são: 1 2 3 4 5 6 7 8 9 7.2 Item 1 – Inserir link: utilize esta função para inserir um link dentro do texto. Ao clicar neste botão será apresentada uma janela solicitando o endereço do link. Insira neste campo o endereço da página para onde o visitante será direcionado ao clicar no link. 7.3 Se nenhum texto tiver sido selecionado, o sistema irá solicitar o texto que apresentará o link. Após inserir o texto com o link a caixa de texto irá apresentar o título do link entre dois códigos [url], como no exemplo abaixo. 7.4 Item 2 – Inserir link de email: o procedimento é o mesmo do item 1. O resultado é um link que ao ser clicado abrirá o programa de gerenciamento de email. 14 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  15. 15. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.0 7.5 Item 3 – Inserir imagens: esta função insere uma imagem no texto solicitando o endereço (URL) da imagem. Ao clicar no botão o sistema apresenta a tela solicitando o endereço. Digite ou cole a URL e clique em “OK”. 7.6 O sistema irá solicitar o alinhamento desejado para a imagem: ‘R’ ou ‘r’ para direita (right), ‘L’ ou ‘l’ para esquerda ou se não preencher nada o alinhamento será central. 7.7 Por último o sistema solicita a largura da imagem. Esta função serve para redimensionar imagens grandes para uma largura menor, para que não ultrapassem a largura máxima do site. 7.8 Ao clicar em “OK” o sistema irá inserir o endereço da imagem dentro de dois códigos [img], como no exemplo ao lado.Dica: use este formato quando souber oendereço da imagem a ser usada, caso ela jáesteja sendo usada no site. Evite usar imagensdiretamente de outros sites. Para isso, salve a imagem do outro site em seu computador e envie a imagempara o Gerenciador de Imagens do site, conforme o item 3 deste tutorial. 7.9 Item 4 – Inserir imagens do gerenciador: esta função insere imagens no texto buscando do Gerenciador de Imagens do site (veja tópico 8 deste tutorial). Ao clicar neste botão o sistema abre uma janela de seleção onde é necessário escolher qual categoria de imagem queremos utilizar. 15 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  16. 16. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.07.10 Selecione a categoria de imagens. O sistema irá apresentar a lista de imagens disponíveis na galeria.7.11 Busque a imagem que será usada. Para inseri-la no texto, clique no botão na coluna “Alinhar” referente ao alinhamento desejado para a imagem. O sistema irá inserir o endereço da imagem dentro de dois códigos [img], como no exemplo ao lado. 16 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  17. 17. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.07.12 Item 5 – inserir ‘smiley’: ao clicar neste botão o sistema irá apresentar uma lista de códigos que irão produzir ícones (smileys) no texto.Dica: este tipo de imagem deve ser usado com cautela pois é normalmente associada a uma linguagemmenos formal.7.13 Item 6 – inserir Flash: esta função insere um arquivo em Flash no texto solicitando o endereço (URL) do arquivo. Ao clicar no botão o sistema apresenta a tela solicitando o endereço. Digite ou cole a URL e clique em “OK”.Observação: este método nem sempre gera os melhores resultados. Para uma melhor apresentação oideal seria inserir manualmente os códigos em HTML .7.14 Item 7 – inserir vídeo do YouTube: esta função insere um vídeo do YouTube no texto solicitando o endereço (URL) do vídeo. Ao clicar no botão o sistema apresenta a tela solicitando o endereço. Digite ou cole a URL completa do vídeo e clique em “OK”.7.15 O sistema irá solicitar em seguida a largura desejada para a janela de apresentação do vídeo. Defina o valor e clique em “OK”.7.16 Em seguida o sistema irá solicitar a altura desejada para a janela de apresentação do vídeo. Defina o valor e clique em “OK”.7.17 O Sistema irá inserir o endereço do vídeo dentro de dois códigos [youtube], como no exemplo ao lado.Observação: assim como no item anterior, para uma melhor apresentação o ideal seria inserirmanualmente os códigos em HTML trazendo-os da página do YouTube. 17 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  18. 18. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.07.18 Item 8 – inserir código fonte: esta função insere trechos de código de programação no texto sem que o mesmo seja interpretado como código. Ao clicar no botão o sistema apresenta a tela solicitando o trecho de código a ser inserido. Digite ou cole o código e clique em “OK”.Observação: esta função só é usada em casos específicos de publicação de código de programação.7.19 Item 9 – inserir citação: esta função destaca um trecho do texto para demonstrar que ele é uma citação. O resultado é um trecho com a formatação diferente do restante do texto.7.20 Itens de formatação do texto: os demais botões do editor servem para alterar a formatação do texto. Sugere-se que os itens referentes ao ‘Tamanho’, ‘Fonte’ e ‘Cor’ do texto não sejam alterados, para que isso não comprometa o layout e as definições do texto do site. Utilize somente em casos específicos.7.21 Os demais itens se referem, respectivamente: Negrito, itálico, sublinhado, riscado, alinhamento à esquerda, alinhamento central, alinhamento à direita e tamanho do trecho de texto. Segue abaixo uma tabela com os respectivos códigos que são apresentados antes e depois do trecho a ser formatado: • Negrito: [b]texto a ser formatado[/b] • Itálico: [i]texto a ser formatado[/i] • Sublinhado: [u]texto a ser formatado[/u] • Riscado: [d]texto a ser formatado[/d] • Alinhamento à esquerda: [left]texto a ser formatado[/left] • Alinhamento central: [center]texto a ser formatado[/center] • Alinhamento à direita: [right]texto a ser formatado[/right] 18 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  19. 19. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.08 Inserir Imagens O site possui um Gerenciador de imagens, que organiza as fotos, banners e outros elementos gráficos queserão usados no site. 8.1 Para acessar o Gerenciador entre na área de administração do site (item 2). 8.2 Na tela da área de administração, clique no ícone “Imagens”, conforme a imagem ao lado. 8.3 Ao acessar o gerenciador de imagens pela primeira vez é necessário criar uma categoria de imagens. Você verá o formulário “Incluir categoria de imagens”, conforme imagem abaixo. 8.4 Para criar uma categoria de imagens, informe: 8.4.1 Nome: nome da categoria de imagens, por exemplo, “Notícias”. Dica: coloque no nome da categoria as dimensões permitidas, “Notícias 350 x 500”. 8.4.2 Selecionar os grupos que podem usar o gerenciador de imagem: geralmente são selecionados os grupos que tem permissão para usar imagens, mas não enviar. 8.4.3 Selecionar os grupos que têm permissão para enviar imagens: geralmente os usuários que publicam e aprovam notícias ou a publicação de outros conteúdos. 8.4.4 Tamanho máximo (em bytes): tamanho máximo do arquivo da imagem. 50.000 = 50kb. 8.4.5 Largura máxima (em pixels) e Altura máxima (em pixels): dependendo de onde forem usadas as imagens, é interessante que elas não excedam um determinado tamanho, para não prejudicar a apresentação no site. 8.4.6 Ordem: ordem de apresentação na galeria de imagens. 19 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  20. 20. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.0 8.4.7 Exibir esta categoria?: se estiver selecionado “sim” a categoria só será vista por quem tem acesso a área de administração do site, não sendo visível para visitantes. 8.4.8 Salvar imagens como: prefira sempre “Arquivos no diretório /uploads”.8.5 Após inserir os dados clique em “Enviar”.8.6 Para inserir uma nova imagem, utilize o formulário “Enviar uma nova imagem”.8.7 Para incluir uma nova imagem: 8.7.1 digite um nome para arquivar a imagem no gerenciador; 8.7.2 selecione uma das categorias disponíveis; 8.7.3 no item “Arquivo da imagem”, localize no seu computador o arquivo da imagem que deseja armazenar; 8.7.4 a ordem de visualização fica como “0” (zero); 8.7.5 em “Exibir esta imagem?”, deixe marcado “sim”; 8.7.6 clique no botão “Enviar”. 20 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  21. 21. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.09 Visualizar imagens da galeria 9.1 Para visualizar imagens que foram enviadas para o Gerenciador de imagens, acesse área de administração (item 1), clique no ícone “Imagens” para abrir a página do Gerenciador. 9.2 Ao lado do nome de cada categoria existe um link “[Listar]”. Clique neste link para visualizar as imagens da categoria selecionada. 21 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  22. 22. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.010 Criar um formulário de contato – Fale Conosco 10.1 O módulo Liaise é capaz de criar formulários de contato utilizando vários tipos de elementos, como caixas de texto, lista de seleção, múltiplas escolhas, etc. 10.2 Para ver um formulário de exemplo, criado na instalação do módulo, acesse o link http://seu_site.gbhosting.com.br/xoops/modules/liaise/?form_id=1 10.3 Para criar um formulário de contato iremos usar o Módulo Liaise. Na área de administração do site, clique no ícone do módulo. 10.4 O site irá apresentar a área administrativa do módulo, com a listagem dos formulários disponíveis. 10.5 Por enquanto temos somente o formulário de modelo. Para criar um novo formulário, clique no item “Criar novo formulário”, conforme a imagem acima. 10.6 O site irá apresentar a página para a criação de um novo formulário. 22 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  23. 23. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.010.7 Preencha os dados da seguinte forma: 10.7.1 Título do formulário: este campo irá definir não só o nome do formulário, mas o título (pagetitle) da página do formulário e o Assunto (subject) do email que será enviado pelo formulário. 10.7.2 Grupos permitidos a usar este formulário: sistema de permissão de acesso aos formulários, de acordo com os grupos. 10.7.3 Método de envio: pode ser para o email ou como Mensagem Privada (MP, um email interno dos usuários do site). 10.7.4 Enviar para: grupo de usuários que irão receber os emails deste formulário, ou então o email do administrador do site (definido da página de configurações gerais do site). Deixe selecionado o Webmaster. Dica: para mandar um email para somente um usuário específico, é preciso criar um grupo, por exemplo “contato_secretaria” e adicionar somente um usuário a este grupo. A mensagem do formulário será então enviada somente para o email/MP deste usuário . 10.7.5 Delimitador para caixas de checagem e botões radio: ao criar uma lista de itens, como uma lista de produtos, por exemplo, se for selecionado a opção “Espaço em branco” os itens ficarão em linha. Se for selecionada a opção “Quebra de linha”, os itens ficarão um abaixo do outro. 10.7.6 Ordem de exibição: ao acessar o endereço ...seu_site/modules/liaise, é possível ao usuário e o visitante do site ver uma lista dos formulários disponíveis no site. Este item define a ordem em que eles aparecem. 10.7.7 Texto para o botão submit: este item define o que será escrito no botão ao final do formulário, para que o usuário clique para enviar a mensagem. Pode ser “enviar”, “mandar”, “autorizar”, “solicitar”, de acordo com o conteúdo do formulário de contato. 10.7.8 Descrição do formulário: esta descrição aparece na listagem dos formulários (item 10.7.6). 10.7.9 Introdução do Formulário: texto exibido no topo do formulário, descrevendo para o usuário o que é e para que serve este formulário. 10.7.10 URL para direcionar após este formulário for enviado: se deixar em branco, após enviar o formulário o site será direcionado para a home do site. Aqui você pode direcionar o usuário de volta para a página onde ele clicou no link para o formulário, um catálogo de produtos, ou uma página onde somente ali está o link para aquele formulário, de forma que o usuário volte para o ponto onde estava. 23 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  24. 24. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.010.8 Ao final, se você clicar em “Salvar”, irá criar o formulário e voltar para esta mesma página. Se clicar em “Salve então edite os elementos”, você será direcionado para a página que define os campos do seu formulário.10.9 Ao clicar em “Salve então edite os elementos” o site irá apresentar a tela de elementos do formulário recém criado, conforme a imagem abaixo.10.10 O formulário básico criado tem três campos, para o nome, email e mensagem, sendo que os três são obrigatórios. Vamos configurar o formulário:10.11 Clique no link “Editar” do campo “Your name”. O site irá apresentar a tela de edição conforme a imagem abaixo. 24 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  25. 25. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.010.12 Mude o título do campo, e clique em “Salvar”.10.13 Repita o procedimento para os outros dois elementos, observando as diferenças entre cada elemento.10.14 Depois de criar o formulário e editar os elementos, clique no link “Lista de Formulários”, conforme a imagem ao lado.10.15 O site irá apresentar agora a lista de formulários disponíveis, conforme a imagem abaixo.10.16 Clique no link do novo formulário para ver como ele fica no site. 25 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  26. 26. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.010.17 Repare que o item “Contato” (nome dado para o módulo Liaise no item 4.10) aparece no menu principal do site. Os campos de nome email já vieram preenchidos porque estou logado como usuário.10.18 Porém, o formulário ainda não funcionará porque precisamos definir um email que será usado pelo site para mandar os emails.10.19 Para isso, vá até a administração do site e selecione no menu Preferências o sub-item “Configuração do email”, conforme imagem abaixo.10.20 Para usar um email do Gmail, siga as indicações da imagem abaixo: 26 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  27. 27. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.0 10.21 No “Método de envio”, selecione “PHP Mail()”. 10.22 No “Servidor(es) de SMTP, informe “smtp.gmail.com. 10.23 Para ter certeza que irá receber este email, confira se o seu usuário (admin) está com um email válido11 Publicar Imagem no módulo Mastop Go2 11.1 O módulo Mastop Go2 permite criar um bloco de imagens em sequência que serve de galeria de imagens de destaque no site. Ao clicar em uma imagem o usuário é direcionado para uma página no site ou fora dele. Para fazer o download deste módulo, visite http://www.mastop.com.br/conteudo/open-source/download.mstp 11.2 Para inserir ou editar uma imagem no módulo Mastop Go2, faça o login no site (item 1) e clique no ícone do módulo na tela de Administração, conforme a imagem abaixo. 27 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  28. 28. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.011.3 O sistema irá abrir a tela de administração dos banners, conforme a imagem abaixo.11.4 Na parte superior da tela você pode ver os destaques armazenados no site, alguns estão ativos (bolinha verde) e alguns estão inativos (bolinha vermelha).11.5 Mais abaixo você pode ver o formulário para a criação de novos destaques.Vamos analisar a área de administração dos destaques. Nas colunas estão os seguintes dados: - Coluna 1 – selecionar: para executar ações em bloco com os destaques, selecione os itens e na caixa “Ações em Grupo” escolha a ação a ser executada e clique em Enviar. Você pode Apagar, Ativar, Desativar os destaques ou Limpar o número de acessos (cliques) do destaque; - Coluna 2 – identificador: este item não é alterado, mas você pode mudar a ordem de apresentação dos banners; - Coluna 3 – Imagem: que será apresentada no bloco de destaque; - Coluna 4 – Seção: a categoria do Destaque, no caso só existe a categoria “Geral”; - Coluna 5 – Texto: mostra o texto que irá aparecer no rodapé da imagem no destaque; - Coluna 6 – URL: endereço da página no site, ou de outro site, para onde o usuário será direcionado ao clicar na imagem do destaque; - Coluna 7 – Acessos: quantidade de cliques que já recebeu o destaque. - Coluna 8 – Ativo: se o botão estiver verde, o destaque está aparecendo no bloco, se estiver vermelho, está desativado. Para desativar um item basta clicar no botão vermelho; - Coluna 9 – Ação: um link para editar o destaque e outro para Excluir.11.6 Para inserir um novo destaque, utilize mais abaixo o formulário “Novo Destaque”. 28 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  29. 29. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.0 11.7 Os campos de informação a preencher são: - Imagem: antes dessa etapa vá até o Gerenciador de Imagens (item 8) e envie as imagens para a Galeria do site. Feito isso, na caixa de seleção “Selecionar” escolha a imagem. Ao clicar no nome da imagem, ela irá aparecer no formulário para confirmar se é a imagem escolhida; - Seção: escolha a categoria do banner, neste caso só há a categoria “Geral”; - Texto: digite o texto que irá aparecer no rodapé da imagem no destaque. Procure utilizar uma frase não muito longa, para facilitar a leitura; - URL: endereço da página no site, ou de outro site, para onde o usuário será direcionado ao clicar na imagem. Para isso, sempre crie primeiro a Notícia para depois criar o destaque; - Abrir URL em: “Mesma Janela” é indicado para links de páginas do próprio site. “Nova Janela” é indicado para links que levam para outros sites, que serão abertos em outra janela e deixarão a janela do site ainda aberta; - Ativo: é possível criar um Destaque mas deixá-lo desativado até o momento de fazer a inclusão no bloco de destaques. 11.8 Para confirmar a criação do Destaque clique em “Enviar”.12 Administrando os blocos de conteúdo nas páginas 12.1 Para organizar a apresentação dos conteúdos do site, o XOOPS oferece um sistema de organização de blocos. Veja a imagem abaixo: 12.2 A organização dos blocos pode variar de acordo com o tema utilizado. Normalmente os blocos são distribuídos da seguinte forma: 29 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  30. 30. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.012.3 Para acessar a área de administração dos blocos, clique no ícone “Blocos” na área administrativa, conforme a imagem abaixo. 30 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  31. 31. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.012.4 O sistema irá apresentar a área de administração dos blocos, conforme a imagem abaixo.12.5 Utilize este formulário para alterar as configurações de cada bloco.12.6 Nesta área de gerenciamento dos bloco podemos administrar as seguintes características dos blocos: 12.6.1 Título: digite o título do bloco que será apresentado no site; 12.6.2 Descrição do bloco: este item não pode ser alterado e indica o tipo de bloco que está sendo editado; 12.6.3 Módulo: esta coluna indica a qual módulo pertence este bloco. Ex: Notícias, Destaque, etc. 12.6.4 Tipo: indica a posição em que o bloco será apresentado, conforme a imagem do item 10.2 Blocos do topo Coluna da direita Coluna da esquerda Blocos do rodapé 12.6.5 Visível em: define em que área do site o bloco ficará visível. Ex.: todas as páginas, somente no módulo de Notícias, somente na Home; 12.6.6 Tempo do cache: define o tempo em que o bloco ficará em cache, uma vez tendo sido visualizado uma primeira vez; 31 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  32. 32. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.0 12.6.7 Visível (sim ou não): determina se o bloco estará visível no site ou não; 12.6.8 Posição: define a ordem em que os blocos serão organizados. Se for 0 (zero) é apresentado mais ao alto; 12.6.9 Ação: cada bloco tem suas características de configuração específica. Para administrar estas opções clique em “Editar”, para fazer uma cópia do bloco clique em “Clonar”.Para validar as alterações na posição dos blocos, clique no botão “Enviar” no final do formulário degerenciamento dos blocos.13 Criação de blocos personalizadosComo vimos nos capítulos anteriores, cada módulo apresenta um conjunto de blocos para organizar oconteúdo. Além destes blcos o sistema disponibiliza os Blocos Personalizados. São blocos vazios que podemser criados para apresentar o conteúdo que você desejar, seja um trecho de HTML, um widget de outro site,uma galeria de imagens do Picasa, etc.Iremos agora configurar um bloco personalizado trazendo um widget do Twitter para apresentar no site demodelo as últimas mensagens do seu perfil. 13.1 Acesse a página do Twitter – http://twitter.com . Faça login com seu usuário. 13.2 No canto superior direito, localize o menu de configuração do twitter, clique no link “Settigs” (configuração) conforme figura ao lado. 13.3 Ao acessar a página de configuração do seu perfil, vá até o rodapé e clieque no link “Resources” (recursos). 32 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  33. 33. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.013.4 O site irá apresentar uma página com os recursos disponíveis. Clique em “Widgets”.13.5 Existem dois tipos de widgets, para instalar em seu site ou para instalar no Facebook. Escolha a opção “My Website”.13.6 Existem alguns tipos de widgets, escolha o tipo “Profile Widget”, que irá apresentar as últimas mensagens do seu perfil. 33 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  34. 34. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.013.7 Agora você precisa configurar a aparência do seu widget. Você pode mudar a cor da moldura (shell background), a cor do fundo da área das mensagens (tweet background), a cor dos links, a cor do texto na moldura (shell text) e a cor do texto das mensagens (tweet text). Altere também as preferências (preferences) e o tamanho do widget (dimesions).13.8 Finalizada a customização, clique logo abaixo no botão “Finish & Grab code” (terminar e obter o código).13.9 Copie e cole o texto todo e iremos agora para o site de modelo em XOOPS. 34 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  35. 35. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.013.10 Acesse o site de modelo http://www.elencoweb.com.br/modelo e faça login na área administrativa do site, conforme item 2 deste tutorial.13.11 Na área administrativa, acesse o gerenciador de conteúdo, conforme a imagem abaixo.13.12 No gerenciador de blocos, no campo “Bloco gerado por”, acesse o item “Blocos Personalizados”. 35 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  36. 36. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.013.13 O sistema irá apresentar os blocos personalizados que já foram criados no site e mais abaixo o formulário “Incluir um novo bloco”.13.14 Preencha este formulário com os seguintes dados: 13.14.1 Tipo de bloco: escolha a posição do bloco, conforme descrito no item 12.2 deste tutorial. Prefira os itens “Bloco central esquerda” ou “Bloco central – direita”; 13.14.2 Posição: em que ordem o bloco irá aparecer; 13.14.3 Visível: marque a opção “sim”; 13.14.4 Visível em: marque “Página principal”, para aparecer somente na Home. Se o bloc estiver na lateral esquerda, poderá selecionar “Todas as páginas “ ou algum módulo em específico; 13.14.5 Título: dê um nome para o seu bloco. Se este item ficar em branco, seu bloco irá aparecer normalmente, porém sem a barra de título do bloco; 13.14.6 Conteúdo: neste espaço, cole o código que você obteve na página de configuração do gadget do Twitter; 13.14.7 Tipo de conteúdo: deixe marcado como HTML; 13.14.8 Tempo de cache: deixe sem cache por enquanto; 13.14.9 Grupo: selecione os grupos de usuários que terão acesso a este bloco.13.15 Para finalizar, clique em Enviar e seu bloco estará pronto. Confira no site se ficou de acordo com o que você queria e faça os ajustes necessários. 36 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  37. 37. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.014 Criação de página de conteúdo no módulo Mastop Publish 14.1 A inclusão de páginas de conteúdo no site é fundamental para organizar aqueles conteúdos que não são apresentados em módulos específicos, como o de Notícias ou de Contato. O módulo Mastop Publish tem essa função e num site corporativo, por exemplo, podemos criar as páginas de apresentação da empresa, de localização, de catálogo de produtos, etc. O Mastop Publish conta com um completo editor de textos e código HTML, que facilita a criação de páginas mais elaboradas. Da mesma forma que em outros módulos é possível usar as imagens do Gerenciador de imagens para ilustrar o conteúdo. Também é possível criar conteúdo em um editor de HTML e trazer o código já pronto para usar no site, inserindo no editor de códigos do módulo ou acessando diretamente o arquivo .html, adicionado a uma pasta específica no servidor do site. Iremos criar como exemplo uma página simples, mas existem muitos recursos a serem explorados neste módulo. Para este exercício, iremos criar uma página com um breve texto e um mapa do Google Mapas. A localização apresentada fica a seu critério. 14.2 Acesse a área administrativa do site, conforme o item 2 deste tutorial. Clique no item “Módulos – Mastop Publish – Adicionar conteúdo”, conforme a imagem abaixo. 37 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  38. 38. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.014.3 O sistema irá apresentar o formulário de criação de uma nova página, conforme a imagem abaixo.14.4 Para criar a página, preencha os campos da seguinte forma: 14.4.1 Grupos: defina quais serão os grupos de usuários que poderão visualizar esta página; 14.4.2 Autor: se você não selecionar um autor diferente, o sistema irá apresentar o seu nome de usuário como o autor da página; 14.4.3 Exibir em: deixe por enquanto a opção “Menu Principal”. Depois de criar uma página, você poderá criar uma sub-página para ela, organizando o conteúdo de forma hierárquica. O módulo apresenta alguns blocos de conteúdo, que podem organizar as páginas em Menus, apresentando também os links para os outros módulos. Iremos falar sobre isso mais adiante; 14.4.4 Texto do menu: este item é obrigatório. Ele indica o nome da página nos menus internos de organização do conteúdo do módulo. Escolha um nome que será fácil de lembrar, para que você localize a sua página depois; 14.4.5 Título: este texto irá aparecer no topo da página que está sendo criada, em fonte maior que o texto dos parágrafos. Este item é opcional; 14.4.6 Conteúdo: a área de inclusão de conteúdo do Mastop Publish conta com um editor bem mais completo que os módulos padrão do XOOPS. Para o seu mouse sobre os itens para ver o nome de cada função. O editor é aberto no modo WYSIWYG (Editor Visual), mas pode ser mudado para modo “área de texto” clicando no link no canto inferior direito. Selecione este modo para inserir conteúdo em HTML editado em outra ferramenta. 14.4.7 Opções: deixe por enquanto a visibilidade na opção “Menu e Páginas relacionadas”. A opção “Abrir link em”, deixe a opção “Mesma página”, assim como as demais opções também deixe conforme o valor padrão. 38 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  39. 39. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.014.5 Para inserir o conteúdo proposto para o exercício, vamos inserir um texto de apresentação e um mapa do Google Mapas. Para conseguir o código do mapa do Google, acesse http://maps.google.com.br/ , escolha o local que você gostaria de apresentar em sua página (sua casa, seu local de trabalho, etc) e clique no item “Link”, no canto superior direito da tela, conforme imagem abaixo. Copie e cole o trecho de código do campo “Colar HTML para incorporar ao website”.14.6 Volte à página de edição de conteúdo do Mastop Publish e experimente colar o trecho de código HTML. Lembre-se de selecionar a área de texto, no canto inferior direito do editor de conteúdo.14.7 Sua página de edição irá ficar parecida com a imagem abaixo. 39 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  40. 40. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.014.8 Clique em enviar para criar sua página.14.9 O sistema irá retornar para a área de gerenciamento de conteúdo do Mastop Publish, conforme a imagem abaixo.14.10 Esta área apresenta todas as páginas de conteúdo do site. Localize sua página e clique no número de ID para visualizar seu conteúdo no site.14.11 Visualizando o conteúdo no site, a sua página ficará parecida com a imagem abaixo. 40 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com
  41. 41. Tutorial de administração de site Curso Web FAVENI Utilizando CMS XOOPS 02/12/2010 Versão: 3.014.12 Para editar o conteúdo de sua página, clique no ícone de Edição da sua página, conforme o exemplo abaixo.14.13 Corrija o conteúdo, acrescente mais textos ou as informações que deseja e continue explorando os botões do Editor Visual para descobrir o que mais você pode fazer para aprimorar o conteúdo de sua página. 41 Tutorial criado por Luis Marcelo Zanlucki - lmzanlucki@gmail.com

×