Embed Size (px)
Citation preview
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
Administração de sites do Centro de Ciências Computacionais
2
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
Administração de sites do Centro de Ciências Computacionais
3
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).
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.
Esta seção, Painel de
Controle, mostra que o
usuário se encontra na
página de administração de
componentes do sistema.
Figura 03
Figura 04
Este item dá acesso direto a todos os menus
(componentes) do seu site. Está presente em
todos os componentes.
Administradores do
site logados.
Administração de sites do Centro de Ciências Computacionais
4
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:
3-Componentes Site
Configuração dos Menus
de sua página
Inserir e editar
componentes do site
Criptografar e-mail
Alterar Senha
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 05
Figura 06
Administração de sites do Centro de Ciências Computacionais
5
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.
5-Inserir um 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. 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.
Inserir um novo
componente no site.
Editar (alterar) um componente.
Volta para o Painel de Controle.
Deletar um
componente.
Figura 07
Figura 08
Administração de sites do Centro de Ciências Computacionais
6
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.
É 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.
Figura 09
Nome do novo componente (definido pelo usuário)
Seleciona o arquivo de imagem como Ícone para o
componente (definido pelo usuário)
Barra de formatação para
o texto introdutório
Administração de sites do Centro de Ciências Computacionais
7
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:
b) Esta é a página de resultado do componente gerado no Painel de Controle:
Figura 12
Figura 11
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
Texto introdutório é um texto de introdução,
também opcional para o componente,
normalmente utilizado como texto
explicativo de uma pagino ou item.
Administração de sites do Centro de Ciências Computacionais
8
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.
Figura 13
Figura 14
Clique no componente
criado
Clique no botão Novo para inserir um novo conteúdo ao componente:
Administração de sites do Centro de Ciências Computacionais
9
Ao clicar no botão Novo, Aparecerá um formulário com quatro opções de configuração do conteúdo do
componente:
Tipo > Especifica a orientação da Foto em relação ao Texto;
Foto > Especifica a Foto da página de rosto;
Título > O Título do Texto do componente;
Texto > Texto explicativo do conteúdo do componente;
Resultado no navegador da página criada no componente Bloco de textos:
Figura 15
Administração de sites do Centro de Ciências Computacionais
10
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.
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:
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.
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.
Clique em Salvar
Figura 17
Figura 18
Figura 19
Após, é só clicar no menu Gerenciamento do site e escolher
o componente para criar ou editar o conteúdo.
Clique em vídeos para
inserir uma página de
novos vídeos à categoria
Administração de sites do Centro de Ciências Computacionais
11
9- Componente - Categoria de vídeos - Inserindo vídeos
Após clicar no ícone Novo, abrirá o seguinte formulário para inserção do vídeo:
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.
Veja um exemplo a seguir...
Figura 20
Figura 21
Clique em Novo para
inserir um novo vídeo à
página de categoria
Título do vídeo
Link do vídeo no Youtube
Salvar
Título do vídeo
Figura 22
Administração de sites do Centro de Ciências Computacionais
12
Exemplo de preenchimento:
Componentes criados:
Resultado final do componente Contato:
Figura 23
Figura 24
Figura 25
Administração de sites do Centro de Ciências Computacionais
13
11- Componente - Galeria de downloads
Para inserir uma Galeria de downloads segue-se os mesmos passos já vistos:
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:
Download
Figura 26
Figura 27
Clique em Novo para
inserir um novo arquivo
para download à página
de categoria
Figura 28
Após é só preencher os campos:
Título, Descrição, selecionar o
arquivo que ficará disponível para
download e Salvar.
Administração de sites do Centro de Ciências Computacionais
14
Resultado:
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.
Após, as fotos devem ser inseridas como descrito a seguir:
Figura 30
Figura 30
Figura 29
Administração de sites do Centro de Ciências Computacionais
15
Clique em fotos para inserir
uma nova categoria
Clique em Novo para inserir
um novo arquivo de foto à
página de categoria
Figura 31
Figura 32
Figura 33
Clique para
escolher a foto.
Administração de sites do Centro de Ciências Computacionais
16
Resultado:
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 34
Figura 35
Administração de sites do Centro de Ciências Computacionais
17
13- Componente - Links Você poderá criar uma lista de links de forma bem simples. Escolha o tipo componente Links:
Veja o resultado:
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 36
Figura 37
Figura 38
Administração de sites do Centro de Ciências Computacionais
18
Resultado:
15- Componente – Notícias – Inserindo fotos É possível também inserir uma foto à noticia:
Figura 39
Figura 42
Após Clicar no ícone do
componente, clique
aqui para inserir uma
foto à notícia.
Clique em Gerenciamento do site
para acessar o Componente
Notícias
Clique no ícone do
Componente Notícias
Figura 40
Figura 41
Administração de sites do Centro de Ciências Computacionais
19
Veja a seguir a página de resultado...
Figura 43
Figura 45
Clique no ícone Novo
para abrir a página para
selecionar a foto.
Selecione a foto
Digite uma legenda para foto
Figura 44
Administração de sites do Centro de Ciências Computacionais
20
Resultado:
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 46
Figura 47
Figura 45
Clique para
inserir um banner
Figura 48
Administração de sites do Centro de Ciências Computacionais
21
Após criar o componente é necessário
inserir os Banners no módulo:
Aparecerá então o Banner criado. Para inserir outros Banners clique no ícone Novo e repita o processo
acima.
Veja o resultado os Banners aparecerão sempre na parte inferior de cada página de seu site.
Preencha o título a URL e
escolha uma imagem para
seu Banner, depois clique
em Salvar.
Figura 46
Figura 50
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.
Figura 49
Administração de sites do Centro de Ciências Computacionais
22
17- Componente - Texto com editor HTML Este componente permite ao usuário modificar seu documento através do editor HTML
Figura 53
Figura 54
Figura 52
Clique para inserir
um texto
Administração de sites do Centro de Ciências Computacionais
23
Resultado:
18- Componente - Texto simples O componente Texto simples é o componente mais indicado para se inserir um texto padrão sem
formatações.
Clique para editar o
arquivo em HTML
Figura 55
Figura 56
Figura 57
Administração de sites do Centro de Ciências Computacionais
24
Resultado:
Observe que o componente Publicidade está sempre presente em todos os componentes.
Digite o texto para
a página, após
clique em Salvar
Aparecerá o ícone do
componente criado.
Figura 58
Figura 59
Figura 60
Administração de sites do Centro de Ciências Computacionais
25
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.
Clicando no botão a seguinte página será mostrada:
É 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
Figura 62
O componente criado aparecerá entre os ícones
dos outros componentes já existentes. Clique
no ícone deste componente para inserir os sub-
componentes.
Administração de sites do Centro de Ciências Computacionais
26
Estes são os sub-componentes padrão do componente Questionários.
Criaremos primeiro um campo para o sub-componente Formulário:
Aparecerá então o sub-componente criado:
Resultado:
Figura 63
Figura 62
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 64
Após clique no botão:
Se o usuário inserir um CPF
inválido, o sistema
apresentará uma caixa de
mensagem avisando o erro.
Figura 65
Figura 66
Administração de sites do Centro de Ciências Computacionais
27
Para adicionar outros campos ao formulário clique no ícone
Aparecerá então a página abaixo com as opções de campos disponíveis para criação:
Para exemplificar, abaixo é mostrada a forma correta de inserir um componente Radio Button respeitando
alguns critérios.
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:
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 67
Figura 68
Figura 69 Figura 70
Administração de sites do Centro de Ciências Computacionais
28
O componente Combo Box deve respeitar também os critérios de repetir todos os campos com exceção do
campo valor.
Figura 73
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 71
Figura 72
Administração de sites do Centro de Ciências Computacionais
29
Figura 74
Figura 75
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.
O resultado no Browser será como
mostrado ao lado:
Figura 76
Administração de sites do Centro de Ciências Computacionais
30
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
Lista de atividades
criadas
Botão de seleção de
atividades
Lista de atividades
selecionadas
Figura 78
Os participantes das atividades serão inseridos de duas formas, como veremos a seguir:
Figura 79
Após, devemos selecionar as atividades
que estarão dentro deste grupo.
Administração de sites do Centro de Ciências Computacionais
31
Figura 81
A primeira forma é o usuário
cadastrando-se no site
A segunda forma é o administrador cadastrar o
usuário diretamente no portal administrativo,
clicando no botão Novo
Figura 80
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
Administração de sites do Centro de Ciências Computacionais
32
20- Componente – Questionários – Relatórios Para criar relatórios você poderá fazê-lo de quatro formas:
1-Clicando no ícone
Relatório você poderá
visualizar um relatório
individual de cada
inscrito
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 83
Figura 84
Figura 86
Figura 85
Administração de sites do Centro de Ciências Computacionais
33
3-Clique no ícone Atividades e logo
após em Atividade Participante.
Abrirá a seguinte janela
mostrando todos os
usuários inscritos na
atividade.
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 87
Figura 88
Figura 89
Figura 90
Administração de sites do Centro de Ciências Computacionais
34
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:
Este item está
escrito com letras
maiúsculas e
também está fora da
ordem desejada. Figura 93
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
Figura 92
Administração de sites do Centro de Ciências Computacionais
35
Para visualizar todos os componentes criados clique em Gerenciamento do Site
Após, clique no componente que deseja alterar:
Neste caso iremos alterar o
componente CONTATO
SUPORTE C3
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.
Figura 94
Figura 95
Figura 96
Administração de sites do Centro de Ciências Computacionais
36
Após abrir o formulário de edição é possível fazer várias alterações:
Neste caso iremos
alterar apenas o
Nome do
componente.
É 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.
Figura 98
Figura 97
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.
Administração de sites do Centro de Ciências Computacionais
37
Resultado:
A seguir veremos como alterar um item do menu para uma ordem desejada.
O item foi alterado
com sucesso.
Figura 99
Administração de sites do Centro de Ciências Computacionais
38
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:
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 100
Figura 101
