Manual Parte3

Universidade Federal do Rio Grande do Sul
Centro de Processamento de Dados

Divisão de Desenvolvimento de Software
Modelo de páginas para PPGs
PLONE
1
Índice
Portlets.................................................................................3
Opções de Portlets..............................................................................5
Portlet de Navegação.............................................................................................6
Portlet de Calendário..............................................................................................7
Portlet de Eventos..................................................................................................8
Portlet de Login......................................................................................................8
Portlet de Notícias..................................................................................................9
Portlet de Feeds....................................................................................................10
Portlet de Itens Recentes.....................................................................................12
Portlet de Busca....................................................................................................13
Portlet de Texto Estático......................................................................................13
Customizando o Tema........................................................15
Logotipo...........................................................................................18
Cores................................................................................................18
Turquesa.................................................................................................................................20
Vermelho................................................................................................................................20
Vermelho e Preto....................................................................................................................21
Verde......................................................................................................................................21
Verde e Vinho........................................................................................................................22
Verde e Cinza.........................................................................................................................22
Marrom e Bege.......................................................................................................................23
Cores do site da UFRGS........................................................................................................23
2
Portlets
Os portlets do Plone são aplicativos e ferramentas prontas para uso em qualquer instalação
padrão. São ferramentas como calendário de eventos, exibição de notícias do site, menu de
navegação automático, busca e enquete entre outras.
Esses aplicativos, por padrão, encontram-se nas colunas da esquerda e da direita do site.
Como pode-se observar na primeira página da instalação padrão do site:
Para inserir portlets,você deve ser administrador do site, e clicar abaixo das colunas laterais na
página que deseja inserir o portlet, como indica a figura a seguir:
3
Na página a seguir, selecione o tipo de portlet que deseja inserir:
Quando já existirem portlets atribuídos à página, é possível modificar suas posições utilizando as
flechas para cima ou para baixo e/ou excluí-los, utilizando o 'x'. Se não quiser exibir o portlet mas
ainda não tem certeza se quer excluir, clique em Ocultar, para que o mesmo fique escondido. Para
voltar a exibir um portlet oculto, clique em “Mostrar”.
Portlets adicionados na raiz do site aparecerão em todo o conteúdo do site. Você pode optar
também em adicionar portlets em uma seção/pasta específica ou ainda a um único item.
4
Opções de Portlets
Calendário Estático
Coleção
Navegação
Eventos
Login
RSS Feed Itens Recentes
Notícias
Quando inserir um portlet, preste atenção na barra de endereços e na barra de caminhos do plone
para ter certeza que está configurando o portlet exatamente onde você deseja. Por exemplo, se
5
quer adicionar um portlet para todo seu site, na barra de endereços do browser deve ficar algo
como ufrgs.br/seusite/@@manage-viewlets
Agora, se você que adicionar o portlet apenas na página inicial do sei site, para isso primeiro é
necessário ter uma págin a configurada como visão padrão do seu site (ou de um determinada
pasta). Por exemplo, se no seu site está configurado como visão padrão a página chamada
“Inicial”, para adicionar um portlet apenas nessa página, a url no browser deve ficar
ufrgs.br/seusite/inicial/@@manage-viewlets.
Portlet de Navegação
Selecionando esse tipo de portlet, o próximo passo será configurar as informações que vão
preencher esta caixa de navegação. Você poderá indicar um título e através dos Resultados da
busca, selecionar a combinação de informações que vão se configurar em um menu no estilo
árvore. Você ainda pode optar por exibir ou não o nodo topo e apenas exibir o conteúdo da pasta
atual.
6
Importante: Na caixa nível inicial, um valor inteiro que especifica o número de níveis de
pastas abaixo da raiz do site que deve ser excedido antes que a árvore de navegação seja
mostrada. 0 significa que a árvore de navegação deve ser mostrada em qualquer lugar,
incluindo páginas na raiz do site. 1 significa que a árvore somente aparecerá dentro de pastas
localizadas na raiz e abaixo delas, nunca aparecendo no nível raiz.
Portlet de Calendário
Basta selecionar a opção calendário na página de gerenciamento de portlets.
7
O portlet de calendário irá exibir os eventos inseridos no site.
Portlet de Eventos
Selecionando a opção eventos, a seguinte tela carregará:
Selecione nessa tela o número de eventos que devem ser exibidos no Portlet. E em seguida quais
os eventos que devem ser exibidos, com relação ao seu estado no workflow de revisão. Se serão
os privados ou somente os publicados. Depois clique em Salvar. O portlet de eventos foi criado.
Portlet de Login
Basta selecionar a opção Login na página de gerenciamento de portlets.
8
Portlet de Notícias
Selecionando a opção Notícias na página de gerenciamento de portlets, a seguinte página
carregará:
Selecione nessa tela o número de notícias que devem ser exibidas no Portlet. E em seguida quais
as notícias que devem ser exibidas, com relação ao seu estado no workflow de revisão. Se serão as
privadas ou somente as publicadas. Depois clique em Salvar.
O portlet de notícias foi criado.
9
Portlet de Feeds
O portlet de Feeds serve para mostrar notícias de outros sites, a partir do endereço do RSS.
Selecionando a opção Feeds, a seguinte página carregará:
Nessa tela deve-se preencher as seguintes configurações:

Título: é o título que deve aparecer no portlet de de feeds;
Número de itens a exibir: quantos itens de feeds devem aparecer no portlet;
URL da alimentação RSS: é a URL de RSS do site de cujas atualizações se quer disponibilizar no
portlet; O RSS da UFRGS, por exemplo, é http://www.ufrgs.br/ufrgs/noticias/noticias/RSS.
Tempo limite para recarregar a alimentação: tempo em minutos que determina o intervalo entre
uma atualização e outra.
Clique em salvar. O portlet de feeds será criado.
10
Portlet de Itens Recentes

Selecionando itens recentes, abrirá a seguinte tela:
11
Escolha o número de alterações recentes que vocês deseja exibir e clique em Salvar. O portlet será
criado.
Portlet de Busca
Ao selecionar Busca, abrirá a seguinte tela:
12
Deixe o check-box de "Ativar o recurso de BuscaAtiva" e clique em salvar. O Portlet será criado!
Portlet de Texto Estático

Com o portlet de Texto estático você pode fazer praticamente tudo o que faz em uma página, mas
exibindo em forma de portlet, ou seja, em uma caixa nas laterais dos conteúdos do seui site. Ao
selecionar texto estático, abrirá a seguinte tela:
13
Adicione o Título do portlet e o texto desejado. Estes dois itens são obrigatórios.
Também é possível configurar:
Não exibir borda do portlet: quando marcado o portlet aparecerá sem borda.
Rodapé do portlet: é possível incluir um rodapé para o portlet de texto.
Link detalhes: um link para o qual o título e o rodapé remeterá quando inserido.
Clique em salvar.
O portlet foi criado!
14
Customizando o Tema
Em Configuração do Site, clique em Tema.
15
No quadro UFRGS PPGs clique em Copiar.
Na janela que segue, insira o nome que terá o tema do seu PPG. Você pode inserir também uma
descrição para lhe ajudar a diferenciar o tema customizado do original.
16
Clique em Criar. Na próxima janela, clique em “Voltar ao Painel de controle”.
Agora, no quadro do tema do seu PPG, aperte a opção download. Com isso, você baixará para o
seu computador um arquivo “.zip”. Arquivos desse tipo são versões compactas de documentos e
arquivos, para abrir é necessário um programa específico. Normalmente os computadores já
possuem programas descompactadores, caso você não possua, será necessário instalar um (ex.:
17
wirnar, winzip, 7-zip). Descompacte esse arquivo zip no local de sua preferência, pode ser na área
de trabalho ou em uma pasta específica.
Logotipo
Para modificar o logotipo, você precisa ter antes a imagem do logo do PPG no seu computador.
Renomeie o arquivo de seu logotipo para logo.png. Cole o arquivo do seu logo já renomeado na
seguinte localização dentro da pasta do tema que você descompactou:
Pasta do tema> static > imagens
O computador perguntará se você deseja sobrescrever a imagem já existente, responda sim.
DICA: Procure usar um logotipo com boa qualidade e fundo branco ou transparente. O tamanho
da imagem ideal é entre 150px e 200px de altura e com largura máxima em torno de 600px.
Cores
Para modificar as cores, abra o arquivo styles.less, localizado em Pasta do tema> static. Você pode
abrir esse arquivo no bloco de notas.
Nesse arquivo, você deve alterar apenas os valores do segundo bloco de código, como destacado
na imagem.
*** cada linha deve obrigatoriamente acabar com ponto e vírgula.
18
Temos 5 variáveis de cores que podem ser customizadas. No primeiro bloco temos os valores
originais do tema, caso queira voltar atrás. As principais cores são a corBase e a corDestaque, que,
por padrão definem também a cor dos links, modificando apenas essas duas variáveis já se tem
um resultado significativo, como nos exemplos que temos mais adiante.
As cores são declaradas em forma de códigos hexadecimais, que são códigos de 6 dígitos
alfanuméricos precedidos por sustenido (#). São esses códigos que você deve modificar para
alterar as cores.
Abaixo seguem algumas sugestões e exemplos de combinações para você customizar a cor base e
a cor de destaque.
19
Turquesa
Vermelho
20
Vermelho e Preto
Verde
21
Verde e Vinho
Verde e Cinza
22
Marrom e Bege
Cores do site da UFRGS
23
Existe na web uma série de ferramentas para escolha de cores e paletas, uma delas é a Adobe
Color CC.
Depois que você realizou essas alterações, compacte a pasta em um arquivo.zip que deve ter
exatamente o mesmo nome da pasta. Por exemplo, se você salvou o a pasta descompactada do
tema na área de trabalho:
Selecione a pasta do tema customizado e clique com o botão direito do mouse. Encontre a opção
do seu programa de (des)compactação. No exemplo temos o 7-Zip, dependendo de suas
configurações pode aparecer Winrar, Winzip ou ainda opções como “compactar” e “comprimir”.
Você selecionar a opção que salva/cria um arquivo do tipo zip exatamente com o mesmo nome da
pasta.
Já com o arquivo zip de customização pronto, no site, vá em Configurações do Site > Tema e clique
em “Enviar um arquivo ZIP”.
Na janela que segue faça o upload do arquivo ZIP do seu tema customizado. Marque as duas
opções da janela e clique em Importar.
24
25

Manual Parte3

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Parte3

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade Federal do Rio Grande do Sul

Centro de Processamento de Dados

Modelo de páginas para PPGs

Como pode-se observar na primeira página da instalação padrão do site:

Na página a seguir, selecione o tipo de portlet que deseja inserir:

RSS Feed Itens Recentes

O portlet de calendário irá exibir os eventos inseridos no site.

Nessa tela deve-se preencher as seguintes configurações:

Portlet de Itens Recentes

Portlet de Texto Estático

No quadro UFRGS PPGs clique em Copiar.

Clique em Criar. Na próxima janela, clique em “Voltar ao Painel de controle”.

Pasta do tema> static > imagens

O computador perguntará se você deseja sobrescrever a imagem já existente, responda sim.

*** cada linha deve obrigatoriamente acabar com ponto e vírgula.

Cores do site da UFRGS

Você também pode gostar