curso de capacitação em gerenciador de conteúdo plone€¦ · logo, ao pensar a hierarquia de...

46
Universidade Federal do Rio Grande do Sul Centro de Processamento de Dados Departamento de Sistemas de Informações 1 Curso de Capacitação em Gerenciador de Conteúdo PLONE

Upload: others

Post on 05-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

1

Curso de Capacitação em Gerenciador de Conteúdo

PLONE

Page 2: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

2

Índice

Menus Sobre a Navegação do Plone 3

Configurar Pastas 4 Visualização Padrão de Pastas 13

Conteúdo Dicas para um Conteúdo Claro 17 Ações de Conteúdo 17

Barra de Ferramentas do Editor Visual 26 Formatações Prontas 40 Criando Novos Estilos 44

Page 3: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

3

Menus

Sobre a Navegação no Plone

A Navegação no Plone pode ser organizada em dois espaços principais.

O primeiro é o menu horizontal de abas que se cria no topo da tela quando se insere pastas dentro da Página Inicial.

O segundo é o menu vertical que se cria no lado esquerdo da tela com pastas, páginas (ou links para arquivos, eventos e notícias) criadas dentro das abas.

Ou seja, cada aba (seja a própria página inicial, ou as outras pastas criadas dentro delas) pode possuir seu próprio menu vertical, desde que se observe a hierarquia de navegação ao se criar os menus.

Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que deve ser página e o que deve ser arquivo.

É recomendável definir a organização do menu antes de começar a criar as pastas e páginas.

Por exemplo, quer se criar um site com a seguinte estrutura de menu:

Básico

Recomenda-se cuidar a seguinte regra: as pastas são os únicos ítens em que se pode criar documentos dentro. Não é possível criar outros ítens dentro de páginas ou arquivos.

Page 4: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

4

Uma vez que se possui o diagrama organizado de antemão é possível fazer a seguinte distinção:

• Página Inicial - já existe por padrão do Plone

Sobre a Instituição - Página criada dentro da página inicial.

Equipe - Página criada dentro da página inicial.

• Flores - pasta criada dentro da página inicial. Deve ser pasta, e não página, porque pretende-se inserir ítens dentro dela.

Rosas - Página criada dentro da pasta flores.

Margaridas - Página criada dentro da pasta flores.

• Animais - pasta criada dentro da página inicial.Deve ser pasta, e não página, porque pretende-se inserir ítens dentro dela.

Cão - Página criada dentro da pasta animais.

Gato - Página criada dentro da pasta animais.

Arquivo para download sobre animais - Arquivo inserido dentro da pasta animais.

Configurar Pasta

As pastas no Plone apresentam diversas opções de configuração que fazem com que o conteúdo possa ser exibido de formas diferentes. Existem também configurações de nível interno, que facilitam e organizam o trabalho dos membros.

Restrição de Conteúdo

É possível restringir o tipo de conteúdo a ser inserido dentro de uma pasta, facilitando assim a organização do mesmo, o que evita enganos.

OBS: Todas as pastas e páginas quando criadas permanecem no estado "Privado". É preciso publicá-las para que elas apareçam ao usuário não logado. Acesse Estado Publicado e Privado para mais informações.

Intermediário

Page 5: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

5

Por exemplo, é altamente recomendável que seja criada uma pasta específica para as imagens do site, uma para links externos e outra somente para documentos.

A restrição de conteúdos é feita depois da criação da pasta. Para configurar vá até a pasta desejada e clique na aba Adicionar Item

Se a pasta estiver inserida dentro da página inicial

Se a pasta for uma subpasta

Page 6: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

6

Ao escolher especificar manualmente os tipos, a seguinte janela com os tipos de conteúdos é exibida

Além da seleção principal, a seleção de tipos secundários é um meio bastante útil de moderar as restrições. Eles dão mais liberdade ao usuário, mas com menor risco de comprometimento de suas regras de conteúdo.

A combinação de suas escolhas construirão a identidade de sua pasta e a força da integridade dela e da organização estrutural de seu conteúdo.

Page 7: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

7

Módulos de Visualização

O Plone disponibiliza uma série de modos de visualização, o que permite que seu conteúdo seja disposto de maneiras diferentes.

Para alterar a visualização da pasta, vá até ela em modo de edição (estando logado) e clique na aba exibição.

Os modos de visualização padrão são:

Visão Sumária: mostra o título, a descrição do artigo e um link de "leia mais"

Visão Tabular: Em modo de edição mostra

Para visitantes aparece apenas:

Page 8: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

8

Visão de Miniaturas

Modo mais apropriado para galeria de imagens.

Visão Padrão

Exibe o título e a descrição do item.

Selecionar um item como visão padrão...

Essa opção é indicada quando deseja-se exibir uma página de introdução ao conteúdo, ao invés de mostrar de início o que há na pasta. Nem sempre os modos de visualização do Plone satisfazem. Às vezes preferimos simplesmente mostrar um texto introdutório, explicando o conteúdo ou dando uma prévia do que está por vir. Como o Plone trabalha com pastas, para fazer isso é preciso selecionar um item como visão padrão para a pasta em questão.

Selecionar um item como visão padrão

Nem sempre os modos de visualização do Plone satisfazem. Às vezes preferimos simplesmente mostrar um texto introdutório, explicando o conteúdo ou dando uma prévia do que está por vir. Como o Plone trabalha com pastas, para fazer isso é preciso selecionar um item como visão padrão para a pasta em questão.

O item de visão padrão deve estar contido dentro da pasta.

Clique na aba Exibição -> Selecionar um item como visão padrão

Serão exibidos todos os itens da pasta, selecione o item o qual deseja ter como vizualização padrão.

Caso deseje que este item em questão não seja exibido no menu de navegação:

• vá até o item em modo de edição • clique na aba edição • clique em configurações • selecione Excluir da Navegação

Cuidado! Imagens não são o tipo de conteúdo mais apropriado para visão padrão.

Page 9: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

9

Galeria de Imagens

Configurar uma galeria de imagens no Plone é muito simples. Não é preciso instalar nenhum produto adicional.

Crie uma pasta específica para as imagens.

É melhor que o tipo de conteúdo desta pasta seja restrito a imagens. Se você quiser criar uma série de albuns, permita além de imagens, a criação de pastas nas regras de restrição de conteúdo. Após inserir as imagens desejadas, sua pasta ficará assim:

Altere a visualização da pasta para o modo de visão de miniatura: clique em Exibição -> Visão de Miniaturas

Intermediário

Page 10: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

10

São exibidas miniaturas emolduradas das imagens, com seus respectivos títulos.

Se você deseja criar albuns de imagens, crie outras pastas dentro da pasta raiz da galeria.

Esses álbuns (subpastas), por padrão herdam as configurações de modo de visão de miniatura.

No exemplo vamos separar as fotos em dois álbuns: paisagens e animais.

Depois que as pastas foram criadas, você obterá o seguinte resultado:

Page 11: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

11

Note que as pastas são representadas por um amontoado de molduras, com o título disposto no topo da moldura da frente, seguido por parênteses contendo o número zero. Esse número indica o número de imagens da pasta.

Para popular as pastas Paisagens e Animais podemos recortar as imagens contidas na pasta principal e colá-las na subpasta correspondente. Para saber mais sobre as ações de recortar e colar vá até o item Gerenciamento de Conteúdo deste tutorial.

Você não precisa passar pelo processo de realocação de imagens se já tiver os álbuns planejados. Crie primeiro as pastas e depois insira as imagens.

Depois que as imagens já estão nas devidas pastas:

Ao clicar sobre o álbum:

Page 12: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

12

Outra forma de exibir fotos ou imagens é aplicar o modo de visão sumária, de preferência em pastas de apenas um nível. A visão sumária aplicada à pasta de imagens exibe o título, a descrição e o link de "leia mais" à esquerda, e uma miniatura da imagem à direita.

Ao clicar na imagem, no título ou no link o usuário é redirecionado até a página de exibição da imagem:

Page 13: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

13

Ao clicar sobre a imagem ou sobre o link de redirecionamento para imagem em tamanho completo:

A imagem é exibida em uma página branca, sozinha, em seu tamanho original, com um link no topo da página que retorna para a exibição anterior da imagem.

Visualização padrão de pastas

Quando uma pasta é criada dentro da Página Inicial do Plone ela se transforma em uma aba no menu horizontal.

Ao clicar nessa aba acessa-se primeiramente o conteúdo da pasta em si. Porém, as pastas no Plone não tem a opção de inserir conteúdo, apenas título e descrição.

Assim, para que se possa ter algum conteúdo a ser visualizado logo que se clica em uma aba é preciso seguir os seguintes passos.

Por exemplo, no quadro a seguir tem-se a pasta CPD com as páginas "Plone" e "tutorial" dentro dela.

Page 14: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

14

Porém, quando se clica na aba "CPD" não há nenhum conteúdo visualizado diretamente. Assim, digamos que pretende-se que o conteúdo da página tutorial apareça quando se clica na aba "CPD". Primeiramente é preciso esconder o link "Tutorial" da navegação. Para isso, estando na página "Tutorial" (passo 1 na imagem) clique na aba "Edição" (passo 2 na imagem). E em seguida na opção "configurações" (passo 3 na imagem) dentro da aba "Edição", assinale a alternativa "Excluir da Navegação" (passo 4 na imagem) e clique em salvar (passo 5 na imagem).

Page 15: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

15

Essa etapa é necessária pois essa página será acessada quando se clicar na aba. Assim, não é necessário que ela apareça no menu vertical.

Page 16: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

16

Em seguida clique na aba em que se pretende inserir o conteúdo. Estando na aba, clique em "Exibição" e escolha a opção "Selecionar um item como visão padrão".

Será aberta uma página com uma tabela mostrando todas as pastas e páginas que a aba contem. Selecione a página "Tutorial", que foi excluída da navegação, e clique em "Salvar".

Pronto, agora sempre que se clicar na aba configurada, se visualizará o conteúdo dessa página criada para ser sua visualização padrão. A mesma página pode ser editada sempre que necessário.

Cuidado! Imagens não são o tipo de conteúdo mais apropriado para visão padrão.

Page 17: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

17

Conteúdo

Dicas Para um conteúdo Claro

Para que o conteúdo do seu site seja claro para o usuário, antes ele precisa estar claro para você. Para tanto, é preciso uma boa organização estrutural e um planejamento estratégico da exibição deste conteúdo. Se você já passou pelas outras seções deste tutorial, como Organização de

Menus, você já deve estar habilitado tecnicamente para controlar, organizar e customizar o seu conteúdo. Caso ainda não o tenha feito, indicamos que o faça.

Ações em Conteúdo

São 6 ações que podem ser realizadas com qualquer conteúdo inserido em pastas.

Além disso, alguns deles podem ser realizados de mais de uma forma.

Copiar Item

1 - Copiando um item no próprio item

Estando na própria página (ou qualquer outro item) que se deseje copiar selecione a opção "Ações" e em seguida clique em "Copiar".

Básico

Básico

Page 18: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

18

Pronto! O item foi copiado.

2 - Copiando um item pelo modo de visualização de conteúdo da página que o contem

Estando na pasta que contem a página (ou qualquer outro item) que se deseje copiar selecione a opção de modo de visualização de conteúdo.

Selecione o(s) item(ns) que se deseja copiar e logo após clique no botão "Copiar" abaixo da tabela.

Pronto! O item foi copiado.

Page 19: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

19

Recortar Item

1 - Recortando um item no próprio item

Estando na própria página (ou qualquer outro item) que se deseje recortar selecione a opção "Ações" e em seguida clique em "Recortar".

Pronto! O item foi recortado.

2 - Recortando um item pelo modo de visualização de conteúdo da página que o contem

Estando na pasta que contem a página (ou qualquer outro item) que se deseje recortar selecione a opção de modo de visualização de conteúdo.

Selecione o(s) item(ns) que se deseja recortar e logo após clique no botão "Recortar" abaixo da tabela.

Nota: O item pode ser colado na mesma pasta ou em outra. Basta selecionar a pasta em que se deseja colar e clicar em colar.

Page 20: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

20

Pronto! O item foi recortado.

Colar Item

1 - Colando um item no próprio item

Estando na própria página (ou qualquer outro item) que se deseje colar, após ter copiado ou recortado algum item, selecione a opção "Ações" e em seguida clique em "Colar".

Nota: Ele não irá desaparecer da tabela imediatamente. Se ele for colado posteriormente em outra pasta ele desaparecerá.

Page 21: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

21

Pronto! O item foi colado.

2 - Colando um item pelo modo de visualização de conteúdo da página que o contem

Estando na pasta que contem a página (ou qualquer outro item) que se deseje colar selecione a opção de modo de visualização de conteúdo.

Após ter copiado ou recortado algum item selecione o(s) item(ns) que se deseja colar e logo após clique no botão "Colar" abaixo da tabela.

Pronto! O item será colado na pasta escolhida.

Nota: O item pode ser colado na mesma pasta de que foi copiado ou recortado, ou em qualquer outra pasta do site

Page 22: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

22

Renomear Item

1 - Renomeando um item no próprio item

Estando na própria página (ou qualquer outro item) que se deseje renomear selecione a opção "Ações" e em seguida clique em "Renomear".

Se abrirá a seguinte tela:

Note que o sistema apresenta a opção não só de renomear o título da página, mas também o Nome curto da mesma. O nome curto é o que aparece na URL do link. A URL compõe-se de:

http://paginas.ufrgs.br/nome_do_seu_site/nome_curto_da_pagina

Page 23: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

23

Após escolher o novo título e o novo nome da página clique na opção "Renomear Tudo" e pronto! A página está renomeada.

2 - Renomeando um item pelo modo de visualização de conteúdo da página que o contem

Estando na pasta que contem a página (ou qualquer outro item) que se deseje renomear selecione a opção de modo de visualização de conteúdo.

Selecione o item que se deseja renomear e logo após clique no botão "Renomear" abaixo da tabela.

Se abrirá a seguinte tela:

Nota: nunca utilize acentos, letras maiúsculas ou espaços no nome curto!! Escolha um nome curto que seja bastante semelhante ao título da página eliminando apenas os espaços (substitua por underline), os acentos e letras maiúsculas.

Page 24: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

24

Note que o sistema apresenta a opção não só de renomear o título da página, mas também o Nome curto da mesma. O nome curto é o que aparece na URL do link. A URL compõe-se de:

Após escolher o novo título e o novo nome da página clique na opção "Renomear Tudo" e pronto! A página está renomeada.

Excluir Item

Estando na pasta que contem a página (ou qualquer outro item) que se deseje excluir selecione a opção de modo de visualização de conteúdo.

Selecione o(s) item(ns) que se deseja recortar e logo após clique no botão "Excluir" abaixo da tabela.

Pronto! O item foi excluído.

Nota: Nunca utilize acentos, letras maiúsculas ou espaços no nome curto!! Escolha um nome curto que seja bastante semelhante ao título da página eliminando apenas os espaços (substitua por underline), os acentos e letras maiúsculas.

http://paginas.ufrgs.br/nome_do_seu_site/plone

Page 25: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

25

Alterar Estado

1 - Alterando o estado de um item no próprio item

Selecione o item "Estado" e altere para o estado desejado.

Publicar: serve para publicar o item quando este estiver privado.

Retirar: serve para tornar o item privado quando este estiver público.

Enviar para a publicação: essa opção pode ser usada quando no fluxo de trabalho houver pessoas encarregadas de revisar e publicar o texto.

Enviar de volta: esta opção pode ser usada quando no fluxo de trabalho houver pessoas encarregadas de revisar e publicar o texto e ao invés de publicar a pessoa queira que aquele que escreveu refaça.

2 - Alterando o estado de um item no modo de visualização de conteúdo da pasta que o contem

Selecione o modo de visualização de conteúdo da pasta em que está o item que se deseja alterar o estado. Selecione o(s) item(ns) que se deseja alterar o estado.

Page 26: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

26

Clique em "Alterar Estado" abaixo da tabela.

Se abrirá a seguinte tela:

Pode-se escolher entre as opções demonstradas, ou programar uma data para publicação do item. Também é possível estabelecer uma data de expiração para o item, em que ele torna-se previado novamente.

Barra de Ferramentas do Editor Visual

A barra de ferramentas aparece acima do campo de edição de texto quando se escolhe a opçao Editar de uma página. Lembrando que essa opção só aparece quando o usuário está logado e tem permissão para editar a referida página.

Page 27: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

27

Ferramentas

Os itens mais básicos na barra de ferramentas são os seguintes:

Negrito: representado por essa imagem este botão transforma o texto em negrito. Para isso, basta selecionar o texto e apertar no botão.

Salvar: representado por essa imagem este botão salva o texto que está sendo editado sem sair do modo de edição.

Itálico: representado por essa imagem esta botão transforma o texto em itálico. Para isso, basta selecionar o texto e apertar no botão.

Page 28: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

28

Alinhamentos: é possível escolher 3 tipos de alinhamento para o texto. O botão da esquerda alinha o texto à esquerda. O botão do centro centraliza o texto e o botão da direita alinha o texto à direita.

Inserir Links no texto

Links Internos

Links internos são links criados para outras páginas do seu site ou arquivos hospedados no Plone.

Para isso vá na página em cujo conteúdo pretende-se criar um link para o arquivo.

Selecione o texto designado para tornar-se link e clique na opção "Inserir Link"

Localize a página ou o arquivo (se for arquivo você visualizará o título dado ao arquivo) e selecione.

Page 29: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

29

Clique em ok. O arquivo ou link será linkado no local escolhido.

Links Externos

Links externos são links criados para outras páginas da web. Para isso vá na página em cujo conteúdo pretende-se criar um link para a web. Selecione o texto designado para tornar-se link e clique na opção "Inserir Link externo"

Caso você não visualize nenhum arquivo clique na opção "Current Folder" que os arquivos e páginas aparecerão.

Page 30: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

30

Digite o link para o endereço na web desejado.

Digite sempre o endereço completo do início ao fim. Sem esquecer do http://

Clique em ok. O link estará inserido no texto.

Âncoras

Para inserir âncoras ao longo do texto no Plone siga os seguintes passos: Selecione o texto que deve ser transformado em âncora, ou seja o texto para o qual se quer que o usuário vá quando clicar no link que remete à âncora.

Page 31: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

31

Agora, com o texto selecionado, vá no menu com as opções de formatação pronta e escolha a "Subheading".

O texto selecionado terá a formatação alterada.

Em seguida selecione o texto que se quer transformar em link que remeta à âncora, clique em "Inserir Âncora".

Page 32: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

32

Será aberta a seguinte tela:

Note que os textos aos quais atribuiu-se a formatação de Subheading já aparecem como opções para serem linkadas.

Escolha a opção desejada e pronto! O link escolhido remeterá à âncora atribuída.

Page 33: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

33

Listas

Existem dois tipos de listas em HTML, as listas ordenadas e as desordenadas. 1 - As listas ordenadas são listas numeradas, para habilitá-las no Plone selecione o texto que se quer transformar em lista.

Em seguida clique no botão "Lista Numerada". Note que os ítens da lista são determinados por parágrafos. Ou seja, é preciso dar "Enter" no teclado para que um elemento se transforme em um item.

Recomenda-se digitar todo o texto completo antes de clicar no botão de criar a lista, ou podem ocorrer alguns problemas de formatação.

Nas listas ordenadas é possível modificar o tipo de numeração. Para isso, basta acessar o menu mostrado na tela abaixo:

Page 34: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

34

2 - As listas desordenadas são aquelas cujos caracteres que separam os itens não são números, e sim pequenos círculos.

Para criar uma lista desordenada selecione o texto desejado e clique em "Lista Desordenada".

A lista será criada.

Page 35: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

35

Inserir Imagens

Para inserir uma imagem vá na página em cujo conteúdo pretende-se que a imagem apareça. Clique com o cursor no espaço em que você quer que a imagem seja localizada. Clique na opção "Inserir Imagem"

Clique na opção "Enviar Imagem aqui"

Depois clique na opção Home e escolha uma pasta da pasta imagens previamente carregada. Configurando as opções

1 - Enviar para: current folder Através desse campo o usuário envia a imagem desejada, procurando ela em seu computador e clicando em ok.

2 – Título

O título da imagem é importante e deve descrever o que a imagem representa. A inserção desse título de maneira adequada auxilia na acessibilidade de deficientes visuais.

3 – Alinhamento

Nessa opção o usuário pode escolher onde a imagem deve estar localizada com relação ao texto.

4 – Tamanho

Page 36: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

36

Essa opção normalmente só aparece para edição após a imagem ter sido inserida. São disponibilizadas as seguintes opções:

Large A imagem é adaptada em 768 pixels x 768 pixels

Preview A imagem é adaptada em 400 pixels x 400 pixels

Mini A imagem é adaptada em 200 pixels x 200 pixels

Thumb A imagem é adaptada em 128 pixels x 128 pixels

Tile A imagem é adaptada em 64 pixels x 64 pixels

Icon A imagem é adaptada em 32 pixels x 32 pixels

Listing A imagem é adaptada em 16 pixels x 16 pixels

5 - Texto Alternativo A inserção desse texto é de extrema importância, pois é o que aparece para o usuário quando a imagem não é carregada por algum motivo. Esse texto também aparece em uma caixinha amarela quando o mouse é passado por cima.

Atenção: Essas opções de tamanho da imagem só devem ser utilizadas quando o tamanho original também for quadrado. Ou seja, quando também tiver valores iguais para altura e largura. Pois se o tamanho original tiver valores diferentes para altura e largura a imagem ficará distorcida. Outra forma de redimensionar a imagem: para transformar o tamanho da imagem sem distorcê-la, o mais recomendável é selecionar a imagem e mudar seu tamanho através do mouse. Ou ainda, para um trabalho mais otimizado, utilizar um editor de imagens em seu computador.

Page 37: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

37

Tabelas

Para inserir uma tabela no Plone, recomenda-se não copiar e colar uma tabela previamente feita em algum editor de texto. Para se obter uma formatação satisfatória recomenda-se primeiramente clicar no botão "Inserir Tabela".

A seguir surgem algumas opções.

Page 38: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

38

1 - Classe da Tabela. Nessa opção escolhe-se a formatação, ou seja a aparência que a tabela terá: Subdued Grid

Invisible Grid

Fancy Listing

Page 39: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

39

Fancy Grid Listing

Fancy Vertical Listing

Page 40: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

40

Formatações prontas

Heading

Heading em inglês significa cabeçalho.

Essa formatação é utilizada para textos que se deseja transformar em título.

Ela não é recomendada, pois pode confundir com o título da página em si.

Para configurar essa formatação selecione o texto desejado e clique na felcha do menu.

Em seguida escolha a opção "heading".

O texto terá a mesma formatação do título da página.

Page 41: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

41

Subheading

É uma formatação pronta para subtítulos.

Com ela o conteúdo fica com a fonte um pouco maior que o texto comum e em negrito.

É recomendada para separar as seções do texto.

Para configurar essa formatação selecione o texto desejado e clique na felcha do menu.

Em seguida escolha a opção "Subheading".

Literal

Essa formatação coloca o texto selecionado dentro de um quadro azul com a fonte Courier.

Ela é típica de documentos que descrevem códigos de linguagens de informática. Nesses documentos, normalmente na parte em que o código é demonstrado, ele aparece com esta formatação.

Porém, pode ser utilizado para destacar quaisquer elementos no texto.

Para configurar essa formatação selecione o texto desejado e clique na felcha do menu.

Page 42: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

42

Em seguida escolha a opção "Literal".

Discreet (discreto)

Discreet em inglês significa discreto.

Com essa formatação o texto aparece com uma cor cinza mais clara que o texto em greal.

Ela é recomendada para trechos que devem receber menos destaque.

Para configurar essa formatação selecione o texto desejado e clique na felcha do menu.

Em seguida escolha a opção "Discreet".

Page 43: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

43

Pull-quote (citação)

Essa formatação é conhecida pois é tida como a correta para citações que excedem 3 linhas pelas normas da ABNT.

Com ela o texto terá um recuo à esquerda e se situará alinhado à direita da tela.

Para configurar essa formatação selecione o texto desejado e clique na flecha do menu.

Em seguida escolha a opção "Pull-quote".

Criando Novos Estilos

Os Estilos de Formatação são opções de visualização do texto que podem ser selecionados nessa caixa na barra de ferramentas do editor visual.

Page 44: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

44

Essa caixa já traz alguns estilos prontos que são explicados nesse link.

Porém, é possível criar seus próprios estilos seguindo os passos abaixo.

Acima do cabeçalho selecione a opção "Configuração do Site"

Ou simplesmente digite na URL o texto

Nas duas opções você visualizará essa tela (estando logado):

Selecione a opção "Visual Editor"

http://paginas.ufrgs.br/nome_do_seu_site/plone_control_panel

Page 45: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

45

Será aberta uma tela com várias opções de customização do editor visual. O último item é o "Estilos".

Aqui é possível visualizar os estilos já existentes listados. Cada um desses estilos estará ocupando uma linha com a seguinte sintaxe:

Exatamente como aparece acima, cada item da sintaxe é separado do outro por uma barra vertical.

O Título é nome do seu estilo, ou seja, o que aparece na caixa de opções de estilos na barra de ferramentas do editor. Como por exemplo, o estilo "Subheading".

A tag é o elemento HTML que se pretende alterar. No caso do Subheading a tag alterada é a tag "P" de "Paragraph".

A Classe é o nome da classe que foi criada no arquivo public.css na interface de gerência do zope.

Exemplo:

Pretende-se criar um estilo com o Título Destaque. Nesse estilo se pretende alterar a tag p com uma classe chamada classe-destaque.

título|tag|classe

Page 46: Curso de Capacitação em Gerenciador de Conteúdo PLONE€¦ · Logo, ao pensar a hierarquia de navegação de um site pode-se definir o que deve ser pasta, o que ... Departamento

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

Departamento de Sistemas de Informações

46

A sintaxe de criação será:

No arquivo public.css, na interface de gerência do Zope cria-se a classe:

Assim, o novo estilo "Destaque" aparecerá na caixa de opções de estilos na barra de ferramentas do editor visual.

.classe-destaque{ font-weight: bold; color: red; border: 1px solid #333; }

Destaque|p|classe-destaque