Tutorial de Administração de sites do Portal C3 Carlos Magno da Rosa Graduando Sistemas de Informação Estagiário Centro de Ciências Computacionais
Sumário Sumário... 2 1-Apresentação Geral... 3 3-Componentes Site... 4 4-Ações com os componentes do site... 5 5-Inserir um novo componente... 5 6-Apresentação - Novo componente... 6 7-Componente - Bloco de textos... 7 8-Componente - Categoria de vídeos... 10 9- Componente - Categoria de vídeos - Inserindo vídeos... 11 10- Componente - Contato... 11 11- Componente - Galeria de downloads... 13 12- Componente - Galeria de fotos... 14 13- Componente - Links... 17 14- Componente - Notícias... 17 15- Componente Notícias Inserindo fotos... 18 16- Componente - Publicidade... 20 17- Componente - Texto com editor HTML... 22 18- Componente - Texto simples... 23 19- Componente Questionários... 25 20- Componente Questionários Relatórios... 32 21- Organizando seu site... 34 22- Ordenando componentes... 38 2
1-Apresentação Geral O portal de administração de sites do C3 é dinâmico e intuitivo, pois a utilização dos recursos disponíveis para criação e edição de sites é bem simples e apresentada de forma direta proporcionando ao usuário uma administração fácil. Abaixo é apresentada a página inicial padrão para todos os usuários e seus respectivos ícones. Esta seção mostra algumas informações e configurações para o usuário, tais como: Criptografar email (protege o email para acesso público), Operando no site (mostra o nome do site do usuário), Alterar senha (o usuário poderá alterar a sua senha). Figura 03 A seção Acesso Rápido mostra todos os componentes criados em seu site. Os dois ícones que aparecem indicados (Componentes site e Menu), são criados automaticamente pelo sistema como padrão, os outros ícones são visualizados ao inserir um novo componente. Este item dá acesso direto a todos os menus (componentes) do seu site. Está presente em todos os componentes. Administradores do site logados. Figura 04 Esta seção, Painel de Controle, mostra que o usuário se encontra na página de administração de componentes do sistema. 3
2-Painel de Controle O portal de administração de sites do Centro de Ciências Computacionais, por se tratar de um CMS (Component Management System), foi elaborado com uma interface de fácil utilização, tornando a tarefa de criação e edição de componentes do seu site simples e intuitiva. Após acessá-lo com seu Login e Senha, será apresentado o Painel de Controle com o seguinte layout abaixo: Criptografar e-mail Inserir e editar componentes do site Alterar Senha Configuração dos Menus de sua página Figura 05 3-Componentes Site Este componente é padrão para todos os usuários do CMS. Através deste componente é que serão criados todos os demais componentes de seu site, tais como: formulário de contato, álbum de fotos ou vídeos, textos e componentes de notícias, entre outros. O componente Menu também é padrão para todos os usuários. Veremos mais tarde a utilização deste componente. Figura 06 4
4-Ações com os componentes do site Cada componente de seu site deve ser criado através do menu Componentes Site, assim como todas as alterações ou exclusões. Figura 07 Inserir um novo componente no site. Figura 08 Editar (alterar) um componente. Deletar um componente. 5-Inserir um novo componente Volta para o Painel de Controle. Ao clicar no ícone Novo, o usuário é remetido para página de criação de componentes na qual poderá escolher qual componente do site irá criar. A qualquer momento o usuário poderá voltar para o Painel de Controle clicando no item Gerenciamento do site o qual dá acesso direto a todos os menus do site. 5
6-Apresentação - Novo componente Ao clicar no ícone Novo, o usuário é remetido para página de criação de componentes na qual poderá escolher qual componente do site irá criar. OBS.:A qualquer momento o usuário poderá voltar para o Painel de Controle clicando no item Gerenciamento do Site o qual dá acesso direto a todos os menus do site. Nome do novo componente (definido pelo usuário) Seleciona o arquivo de imagem como Ícone para o componente (definido pelo usuário) Figura 09 Barra de formatação para o texto introdutório É possível criar 11* (onze) componentes diferentes em seu site, veja a seguir: *OBS. : Constantemente estão sendo desenvolvidos novos componentes, os que estão sendo apresentados nesta apostila são apenas os principais. Analisaremos os componentes de acordo com a ordem em que são apresentados. 6
7-Componente - Bloco de textos Segue abaixo todo o processo de criação do componente Bloco de textos. a) Esta é a página de criação e configuração do componente: Digite aqui o nome do componente, que será também o nome do menu no site Este item é OPCIONAL. Se desejar, escolha uma figura para ícone do componente Figura 11 Texto introdutório é um texto de introdução, também opcional para o componente, normalmente utilizado como texto explicativo de uma pagino ou item. b) Esta é a página de resultado do componente gerado no Painel de Controle: Figura 12 7
c) Após a criação do componente, é necessário inserir conteúdo ao componente. Clicando em Gerenciamento do Site usuário poderá voltar para o Painel de Controle o qual dá acesso direto a todos os menus do site. Clique no componente criado Figura 13 Clique no botão Novo para inserir um novo conteúdo ao componente: Figura 14 8
Ao clicar no botão Novo, Aparecerá um formulário com quatro opções de configuração do conteúdo do componente: Tipo Foto Título Texto > Especifica a orientação da Foto em relação ao Texto; > Especifica a Foto da página de rosto; > O Título do Texto do componente; > Texto explicativo do conteúdo do componente; Figura 15 Resultado no navegador da página criada no componente Bloco de textos: 9
8-Componente - Categoria de vídeos Para criar um componente Categoria de vídeos, segue-se os mesmos passos já descritos nas figuras 9, 10 e 11. Após, é só clicar no menu Gerenciamento do site e escolher o componente para criar ou editar o conteúdo. Figura 17 Neste caso é o componente Categoria de vídeos que iremos acrescentar um conteúdo da mesma forma como mostrado na figura 14, e após, colocamos um Título e uma Descrição como mostrado abaixo: Clique em Salvar Figura 18 Aparecerá como mostrado abaixo o componente criado. Agora iremos inserir os vídeos no componente. OBS.: Os vídeos deverão estar previamente publicados no Youtube. Clique em vídeos para inserir uma página de novos vídeos à categoria Figura 19 Cada título de componente agrupará vários vídeos. Por exemplo: O item acima tem o título Tecnologia, este é o título da categoria dos vídeos e esta poderá agrupar diversos vídeos conforme veremos na próxima página. 10
9- Componente - Categoria de vídeos - Inserindo vídeos Figura 20 Clique em Novo para inserir um novo vídeo à página de categoria Após clicar no ícone Novo, abrirá o seguinte formulário para inserção do vídeo: Título do vídeo Salvar Link do vídeo no Youtube Figura 21 Para cada vídeo que será inserido, deve-se repetir o processo acima. 10- Componente - Contato Os itens deste componente são praticamente os mesmos (nome, ícone, tipo) já descritos na página 7, figura09, o que difere é que ao selecionar este componente, o formulário disponibiliza mais um campo, Email para contato, o qual será o email que receberá as mensagens do formulário de contato. Figura 22 Veja um exemplo a seguir... 11
Exemplo de preenchimento: Componentes criados: Figura 23 Figura 24 Resultado final do componente Contato: Figura 25 12
11- Componente - Galeria de downloads Para inserir uma Galeria de downloads segue-se os mesmos passos já vistos: Download Figura 26 Após criar o componente o usuário seguirá os mesmos passos seguidos para os componentes anteriores (figuras 13 e 14). Inserindo arquivos para download: Figura 27 Clique em Novo para inserir um novo arquivo para download à página de categoria Após é só preencher os campos: Título, Descrição, selecionar o arquivo que ficará disponível para download e Salvar. Figura 28 13
Resultado: Figura 29 12- Componente - Galeria de fotos Para criar uma galeria de fotos cria-se o componente e a categoria de componente como já visto antes. É necessário apenas preencher o Título e a descrição da categoria de fotos. Figura 30 Após, as fotos devem ser inseridas como descrito a seguir: 14
Clique em fotos para inserir uma nova categoria Figura 31 Clique em Novo para inserir um novo arquivo de foto à página de categoria Figura 32 Clique para escolher a foto. Figura 33 15
Resultado: Figura 34 Você pode escolher uma das fotos para capa da Galeria de fotos. Clicando na Foto (capa) abrirá a página da galeria de fotos escolhida. Figura 35 16
13- Componente - Links Você poderá criar uma lista de links de forma bem simples. Escolha o tipo componente Links: Veja o resultado: Figura 36 Figura 37 14- Componente - Notícias A configuração do componente Notícias também é simples. É necessário apenas preencher os campos do formulário apresentado abaixo. Figura 38 17
Resultado: Figura 39 15- Componente Notícias Inserindo fotos É possível também inserir uma foto à noticia: Figura 40 Clique em Gerenciamento do site para acessar o Componente Notícias Clique no ícone do Componente Notícias Figura 41 Figura 42 Após Clicar no ícone do componente, clique aqui para inserir uma foto à notícia. 18
Figura 43 Figura 44 Clique no ícone Novo para abrir a página para selecionar a foto. Selecione a foto Figura 45 Digite uma legenda para foto Veja a seguir a página de resultado... 19
Resultado: Figura 46 16- Componente - Publicidade Este componente funciona como um módulo para banners. Estes banners ficarão na parte inferior de cada página do seu site. Primeiro passo é criar o componente: Figura 47 Clique para inserir um banner Figura 48 20
Após criar o componente é necessário inserir os Banners no módulo: Preencha o título a URL e escolha uma imagem para seu Banner, depois clique em Salvar. Figura 49 Aparecerá então o Banner criado. Para inserir outros Banners clique no ícone Novo e repita o processo acima. Figura 50 Veja o resultado os Banners aparecerão sempre na parte inferior de cada página de seu site. Figura 51 IMPORTANTE! Você poderá inserir quantos Banners desejar. Após inserir o quinto Banner estes serão mostrados em ordem aleatória, 4 Banners de cada vez. 21
17- Componente - Texto com editor HTML Este componente permite ao usuário modificar seu documento através do editor HTML Figura 52 Clique para inserir um texto Figura 53 Figura 54 22
Clique para editar o arquivo em HTML Figura 55 Resultado: Figura 56 18- Componente - Texto simples O componente Texto simples é o componente mais indicado para se inserir um texto padrão sem formatações. Figura 57 23
Digite o texto para a página, após clique em Salvar Figura 58 Aparecerá o ícone do componente criado. Resultado: Figura 59 Figura 60 Observe que o componente Publicidade está sempre presente em todos os componentes. 24
19- Componente Questionários Este componente é o mais complexo de todos os componentes, pois é um componente que particularmente contém vários sub-componentes dependentes, além de vários campos a serem preenchidos. É necessário preencher todos os campos para se obter um resultado satisfatório ao inserir este componente. O formulário deste componente contém os seguintes campos: Email para contato (email do formulário o qual serão enviados os dados); Texto de confirmação (texto que será enviado para o email acima para confirmar a inscrição); Texto de sucesso (texto exibido na página web quando enviado o e-mail); Texto introdutório (já visto anteriormente); Figura 61 Clicando no botão a seguinte página será mostrada: O componente criado aparecerá entre os ícones dos outros componentes já existentes. Clique no ícone deste componente para inserir os subcomponentes. Figura 62 25
Estes são os sub-componentes padrão do componente Questionários. Criaremos primeiro um campo para o sub-componente Formulário: Figura 63 Após clique no botão: Figura 64 Aparecerá então o sub-componente criado: Figura 65 Resultado: Obs.: Podemos perceber a criação do componente Nome de forma automática, já o campo que indica o e-mail que receberá os dados é criado junto com o componente Questionários, como é mostrado na Figura 58. Figura 66 Se o usuário inserir um CPF inválido, o sistema apresentará uma caixa de mensagem avisando o erro. 26
Para adicionar outros campos ao formulário clique no ícone Figura 67 Aparecerá então a página abaixo com as opções de campos disponíveis para criação: Você poderá criar vários tipos de campos para o formulário, alguns destes, pré definem a máscara de entrada para o tipo de informação, outros devem respeitar certos critérios para que os mesmos apresentem o resultado esperado. Alguns campos que necessitam respeitar estes critérios são: Radio Button, Checkbox e Combo Box. Figura 68 Para exemplificar, abaixo é mostrada a forma correta de inserir um componente Radio Button respeitando alguns critérios. Figura 69 Figura 70 Perceba que o campo criado acima tem os mesmos itens, com exceção do item Valor que identifica qual o dado que será selecionado. Desta forma os itens ficarão juntos em um mesmo grupo veja outro exemplo na próxima página: 27
O componente Combo Box deve respeitar também os critérios de repetir todos os campos com exceção do campo valor. Figura 71 Figura 72 Vamos alterar o nome deste componente (Menu) de Envie sugestões para Faça sua Inscrição clicando no ícone Componentes sites, no componente desejado e então no botão Editar. Aparecerá a tela ao lado. Após realizar as mudanças desejadas clique em Salvar. Figura 73 28
Figura 74 Já adicionamos os campos no formulário, agora iremos adicionar uma Atividade e os participantes desta atividade. Foram adicionados alguns campos no formulário, agora iremos adicionar o sub-componente Atividades. Para cada atividade deve-se preencher os dados da mesma, como: Nome da atividade, Data e hora de início e fim (opcionalmente), o palestrante, o currículo do palestrante(opcionalmente), o tipo de atividade e o numero de vagas. Figura 75 O resultado no Browser será como mostrado ao lado: Figura 76 29
O item que organiza as atividades é o Agrupador de atividades, através deste item poderemos determinar qual a atividade estará disponível criando um grupo de atividades. Figura 77 Após, devemos selecionar as atividades que estarão dentro deste grupo. Figura 78 Lista de atividades criadas Botão de seleção de atividades Lista de atividades selecionadas Os participantes das atividades serão inseridos de duas formas, como veremos a seguir: Figura 79 30
A primeira forma é o usuário cadastrando-se no site Figura 80 A segunda forma é o administrador cadastrar o usuário diretamente no portal administrativo, clicando no botão Novo Figura 81 Você, com permissão de administrador, poderá inserir novos participantes para as atividades criadas, podendo marcar o participante como: Confirmado (participante que pagou) e Retirou material (participante que recebeu o material do evento) Figura 82 31
20- Componente Questionários Relatórios Para criar relatórios você poderá fazê-lo de quatro formas: Figura 83 1-Clicando no ícone Relatório você poderá visualizar um relatório individual de cada inscrito Figura 84 Figura 85 2-Clicando em Gerar Relatório. Será gerado um relatório com todos os inscritos, mostrando se os mesmos retiraram ou não o material e se estão confirmados (se pagaram). Figura 86 32
Figura 87 3-Clique no ícone Atividades e logo após em Atividade Participante. Figura 88 Abrirá a seguinte janela mostrando todos os usuários inscritos na atividade. Figura 89 Clique em Gerar Relatório, então será gerado um relatório com todos os inscritos, mostrando se os mesmos estão presentes ou não. Figura 90 33
4-Clicando no ícone Participantes mostrará um relatório contendo todos os inscrito com seus respectivos e-mails e um espaço para assinatura. Figura 91 21- Organizando seu site Perceba na próxima página que há alguns itens desorganizados no site, veremos agora como organizar estes itens de forma bem simples. Poderemos também editar, deletar e organizar os menus e outros objetos do site seguindo a mesma seqüência que será apresentada a seguir. Abaixo vemos a página inicial de resultado do site criado: Figura 92 Este item está escrito com letras maiúsculas e também está fora da ordem desejada. Figura 93 34
Para visualizar todos os componentes criados clique em Gerenciamento do Site Figura 94 Após, clique no componente que deseja alterar: Neste caso iremos alterar o componente CONTATO SUPORTE C3 Figura 95 Figura 96 Para alterar um componente devemos clicar no ícone Componentes Site e não no ícone do componente. Clicando no ícone do componente aparecerá a página para alterar o conteúdo do componente e não o componente em si. 35
Clicando no componente CONTATO SUPORTE C3 e após em Editar ou apenas um clique duplo sobre o item, abre-se o formulário de edição para alterá-lo. Figura 97 Após abrir o formulário de edição é possível fazer várias alterações: É possível alterar todos os campos no formulário de edição do componente, mas não é possível alterar o tipo do componente. Para isso devemos deletar o componente existente e criar um novo componente com o tipo desejado. Neste caso iremos alterar apenas o Nome do Figura 98 36
Resultado: O item foi alterado com sucesso. Figura 99 A seguir veremos como alterar um item do menu para uma ordem desejada. 37
22- Ordenando componentes O ícone Menu é um componente padrão para todos os sites o qual é utilizado para ordenar todos os componentes de seu site: Figura 100 Ao clicar no item Menu, são mostrados todos os componentes já criados Clicando nas setas indicadas é possível alterar a ordem dos menus no site, colocando-os para cima ou para baixo na ordem em que aparecerão no menu. Figura 101 38