# Manual de administração de conteúdo usando o Plone
# Introdução ao Plone
### O que é o Plone
O **Plone** é um **sistema de gerenciamento de conteúdo (CMS)** *open-source* e altamente seguro, construído sobre a plataforma **Zope** (em Python). Ele é projetado para criar e gerenciar sites, portais, intranets e aplicações web complexas de forma eficiente, combinando flexibilidade, personalização e robustez.
**Principais Características do Plone**:
1. **Segurança Reconhecida**:
- Um dos CMS mais seguros do mercado, com auditorias regulares e compliance com padrões como GDPR e Acessibilidade (WCAG).
- Usado por governos, instituições educacionais e empresas que exigem alto nível de proteção de dados (ex: [NASA](https://plone.com/), ONU).
2. **Interface Intuitiva**:
- Painel de administração amigável, com arrastar-e-soltar, edição visual (WYSIWYG) e organização hierárquica de conteúdo.
3. **Multiplataforma e Escalável**:
- Funciona em servidores Linux, Windows e macOS.
- Suporta milhões de páginas e alto tráfego com configurações adequadas.
4. **Customização Avançada**:
- Baseado em **Python**, permite desenvolvimento flexível.
- Suporte a *add-ons* (produtos extras) para funcionalidades como e-commerce, formulários, integração com ERP, etc.
5. **Workflow e Colaboração**:
- Controle de versões, aprovações em múltiplos estágios e gestão de usuários com papéis específicos (ex: editores, revisores).
6. **Acessibilidade**:
- Atende a padrões internacionais de acessibilidade, ideal para instituições públicas e projetos inclusivos.
### Para que o Plone é usado?
- **Sites Corporativos**: Portais de empresas, intranets e extranets.
- **Governo Eletrônico**: Portais governamentais (ex: [Portal da Transparência](https://plone.org.br/o-plone) no Brasil).
- **Educação**: Plataformas para universidades e bibliotecas digitais.
- **Aplicações Web**: Sistemas de gerenciamento de documentos, catálogos de produtos e bases de conhecimento.
# Visão Geral da Interface
#### Lista de sites:
Ao acessar o endereço do Plone, é exibida uma lista com todos os sites gerenciados pelo Plone:
- Endereço do ambiente de testes: [https://plone-homolog.ufcat.edu.br](https://plone-homolog.ufcat.edu.br)
- Endereço real: [https://plone.ufcat.edu.br](https://plone.ufcat.edu.br)
Selecione um site e clique em "Visit" para ser redirecionado ao endereço correspondente (exemplo: https://plone.ufcat.edu.br/**ufcat**).
#### Acesso ao Painel
Para acessar o painel de gerenciamento será preciso efetuar login com suas credenciais institucionais, caso precise trocar a senha acesse: [https://acesso.ufcat.edu.br/lostpassword](https://acesso.ufcat.edu.br/lostpassword)
1. Clique em "**Login**" na página inicial do site.
#### Menu de conteúdo
No topo da tela, encontra-se o menu de conteúdo, pré-configurado com os padrões do site. Cada opção do menu representa uma **"pasta"**, que pode conter itens internos.
Principais funcionalidades:
[](https://manuais.ufcat.edu.br/uploads/images/gallery/2025-03/N7Limage.png)
#### Organização do Conteúdo:
- **"Menu"**:
Contém as páginas exibidas no menu do site institucional.
- **Observação**: O menu do site é gerado automaticamente com base na estrutura desta pasta.
- **Subpastas** representam **submenus**.
- **"Notícias"**:
Armazena as notícias relacionadas ao setor/site.
- **"Editais"**:
Contém os editais pertinentes ao setor/site.
- **"Eventos"**:
Destinado aos eventos do setor/site.
- **"Carousels"**:
Gerencia os banners com links redirecionáveis (para notícias, editais, eventos, etc.).
#### Estrutura padrão dos sites:
[](https://manuais.ufcat.edu.br/uploads/images/gallery/2025-10/hyIimage.png)
- Quadrado = Pasta
- Círculo/Oval = Conteúdo
# Introdução a Administração Conteúdo
### Tipos de Conteúdo e Configurações
#### **Página**
**Campos essenciais:**
- Título (obrigatório)
- Descrição (resumo do conteúdo)
- Corpo do texto
- Tags (palavras-chave para organização e busca)
#### **Notícia**
**Campos específicos:**
- Imagem de destaque (*recomendado: proporção 16:9*)
- Data de publicação (*para ordenação cronológica*)
- Texto completo (corpo da notícia)
#### **Evento**
**Campos específicos:**
- Imagem de destaque (*recomendado: proporção 16:9*)
- Data de publicação (*para ordenação cronológica*)
- Texto completo (corpo do evento)
#### **Link**
*Representa os banners/carrossel do site.*
**Campos específicos:**
- Imagem de destaque (*recomendado: proporção 16:9*)
- Data de publicação (*para ordenação cronológica*)
- Texto completo (descrição do link)
---
### **Arquivos e Imagens**
*Arquivos que podem ser adicionados ao servidor para eventual download no site.*
**Formatos suportados:**
- **Documentos:** PDF, Word (DOC/DOCX), Excel (XLS/XLSX)
- **Imagens:** JPG, PNG, GIF (*evitar arquivos muito pesados*)
**Boas práticas:**
- Nomear arquivos sem espaços (*usar hifens ou underscores, ex.: `relatorio-2024.pdf`*).
- Compactar imagens antes do upload para melhor desempenho.
---
### **Organização de Conteúdo**
*Por padrão, cada pasta deve conter tipos de conteúdo específicos:*
Pasta
Tipos de Conteúdo Permitidos
**Menu**
Pasta, Página, Imagem, Arquivo
**Notícias**
Notícia, Imagem, Arquivo
**Editais**
Página, Imagem, Arquivo
**Eventos**
Evento, Imagem, Arquivo
**Carrossel**
Link
---
### **Adicionando um Novo Conteúdo**
1. Estando devidamente logado e com permissões no site, acesse a pasta desejada.
2. No painel esquerdo, clique em **"Adicionar Item..."**.
3. Selecione o tipo de conteúdo desejado (*ex.: Página, Notícia, Pasta, Arquivo*).
4. Preencha os campos obrigatórios, como **Título** e **Descrição**.
5. Clique em **"Salvar"**.
6. No painel esquerdo, clique em **"Estado"** e selecione **"Publicar"**.
---
### **Publicação e Fluxo de Trabalho**
#### **Estados do Conteúdo**
Cada conteúdo pode ter diferentes estados no *workflow*:
- **Privado** (*visível apenas para editores*)
- **Pendente** (*aguardando revisão*)
- **Publicado** (*disponível ao público*)
#### **Como Alterar o Estado**
1. Acesse o conteúdo desejado.
2. No menu superior, clique em **"Estado"**.
3. Selecione a opção desejada (*ex.: "Publicar"*) e confirme.
# Adicionando Novo Conteúdo
#### Localização do Conteúdo
A adição de conteúdo no Plone é feita de forma local. Siga estas etapas:
- Navegue até a seção do site onde deseja publicar o novo conteúdo.
- Ex: "notícias"
- No painel lateral utilize a opção "Adicionar novo" para criar o item desejado.
- Caso necessário, você pode reorganizar o conteúdo posteriormente usando as opções Cortar, Copiar e Colar.
Após adicionar o conteúdo e clicar em "**Salvar**", o sistema exibirá a mensagem "**Informação: Item criado**". Neste momento:
- **Status do conteúdo**: O item permanece como ***Privado***, o que significa que:
- Não está visível para usuários comuns
- Só pode ser acessado por editores com as devidas permissões
- Processo de publicação:
- Usuários com permissões de publicação devem:
- Clicar no menu "**Estado**"
- Selecionar a opção "**Publicar**"
- Após esta ação, o conteúdo estará disponível publicamente
Observação: O sistema mantém um histórico de versões, permitindo reverter para estados anteriores se necessário.
# Manipulando o Menu
##### Estrutura de Menus no Plone
A pasta "Menu" contém a estrutura principal de navegação do site. Nela, você pode criar subpastas para organizar submenus, estabelecendo uma hierarquia lógica e intuitiva para o conteúdo.
#### Como criar um submenu:
- Navegue até a localização desejada:
- Exemplo: /menu/setores/
**Pronto!** Você criou uma nova pasta e, consequentemente, um novo submenu.
#### Como alterar a ordenar dos menus:
- Navegue até a ferramenta "Conteúdo" da barra de ferramenta:
- Esta Ferramenta permite "arrastar" os itens para posição desejada:
1. Navegue dentro da ferramenta para pasta desejada.
2. Clique no item e arraste para o local desejado
- Esta Ferramenta também permite "Recortar" um item e "Colar" dentro de outra pasta:
- Para fazer isso selecione o item clique em "Recortar" navegue para o destino e clique em "Colar"
**Pronto!** Você criou alterou a estrutura do menu.
# Conteúdo Personalizado com HTML e CSS
O Plone oferece um editor de texto rico (WYSIWYG - "What You See Is What You Get") que atende à maioria das necessidades de formatação de conteúdo. No entanto, para usuários avançados que necessitam de um controle mais granular sobre a estrutura ou o estilo, é possível editar diretamente o código-fonte HTML.
Embora o Plone permita o uso de HTML e CSS para personalizar a aparência do conteúdo, ele o faz de maneira controlada para garantir a segurança e a integridade do site.
#### Filtragem de HTML por Segurança
Por padrão, o Plone não permite a inserção de *qualquer* código HTML. O sistema utiliza um filtro de segurança que processa o código inserido e remove tags e atributos considerados potencialmente perigosos.
O objetivo principal dessa filtragem é prevenir ataques de Cross-Site Scripting (XSS), onde códigos maliciosos poderiam ser injetados nas páginas, comprometendo a segurança dos visitantes e do próprio site.
**Estas tags e seus conteúdos são completamente bloqueados quando uma página é salva ou renderizada:**
1. HTML Estrutural:
Você pode usar tags como <div> e <span> para agrupar elementos. Isso é particularmente útil quando combinado com CSS.
2. Uso de CSS (Folhas de Estilo):
A forma mais recomendada de aplicar estilos personalizados não é inserir CSS diretamente no editor HTML (embora o atributo style possa ser permitido em alguns casos). A melhor prática no Plone é:
- **Estilos Inline (Se permitido):** Em algumas configurações, o atributo `style` pode ser usado para modificações rápidas:
HTML
```
Texto em azul e negrito.
```
#### Resumo
É perfeitamente possível usar HTML e CSS para criar layouts ricos e personalizados, mas sempre dentro dos limites de segurança impostos pelo Plone. O sistema sempre priorizará a segurança, filtrando tags e atributos que possam representar um risco.
# Como alterar o Título e a Descrição do Site
#### Alterar o Título e a Descrição do Site no Plone é um processo simples. Siga os passos abaixo:
#### **Acesse o Site:** Navegue até a URL da sua unidade ou setor (Exemplo: `https://plone.ufcat.edu.br/seti)`
#### **Acesse a aba Conteúdo:** Na barra de ferramentas lateral (à esquerda), clique no ícone Conteúdo.
#### **Vá para a Raiz:** Para garantir que você está editando as informações da página principal, clique no ícone da **"Casa"** (Raiz) no topo da lista de pastas.
#### **Edite as Informações:**
- #### No topo da página, você visualizará os campos de **Título** e **Descrição**.
- #### Insira o novo texto desejado.
#### **Salve as Alterações:** Role a página até o final e clique no botão **Salvar**.
####
# Guia de Inserção e Dimensionamento de Imagens
Melhores práticas para inserção de imagens e como contornar problemas de visualização e corte quando as imagens possuem proporções muito longas.
#### Método 1: Preparação Prévia da Imagem (Recomendado)
A forma mais segura e eficiente de garantir a exibição correta no portal é adequar as proporções da imagem antes de realizar o upload.
- Utilize um editor de imagens (Photoshop, Canva, GIMP, etc.) para ajustar a largura e a altura.
- Ao inserir a imagem já nas dimensões adequadas, o portal consegue renderizá-la nativamente, sem que a página desconfigure e sem a necessidade de intervenções manuais no código.
##### Dimensões e Proporções Recomendadas
Para garantir que a imagem se adapte perfeitamente ao portal sem quebrar o layout ou sofrer cortes, siga estas diretrizes ao exportar o arquivo no seu editor de imagens:
**1. Largura da Imagem**
- A largura ideal para a área de conteúdo do portal varia entre **800px e 1200px**.
- Se a imagem tiver uma largura maior que essa, o Plone tentará espremê-la para caber na tela, o que pode distorcer a altura ou dificultar a leitura dos textos.
**2. Proporção e Altura**
- **Formatos recomendados:** Dê preferência a formatos horizontais (paisagem, como 16:9 ou 4:3) ou quadrados (1:1).
- **Evite arquivos "fita":** Imagens onde a altura é desproporcionalmente maior que a largura (exemplo: 800px de largura por 3000px de altura) causarão problemas de rolagem e cortes na renderização nativa. O ideal é que a altura não ultrapasse o dobro da largura (proporção máxima de 1:2).
**3. Boas Práticas para Imagens Extensas ou Complexas** Caso você precise publicar infográficos, diagramas muito compridos ou imagens que contenham muito texto pequeno, a inserção de uma imagem única e gigante pode gerar uma experiência de navegação ruim. Nestes casos, recomenda-se:
- **Divisão da imagem:** Recorte a imagem original em partes menores (por tópicos ou seções) e insira essas partes em sequência na página.
- **Disponibilizar em PDF (Recomendado):** Para arquivos que exigem leitura detalhada ou zoom por parte do usuário, insira apenas uma imagem ilustrativa (uma "capa" ou prévia) na página e adicione um link logo abaixo disponibilizando o documento completo em formato PDF. O PDF preserva a qualidade e a acessibilidade do conteúdo.
#### Método 2: Ajuste de Dimensionamento via Código-fonte HTML (Alternativa)
Se não for possível redimensionar o arquivo original e a imagem inserida ficar "cortada" ou com a visualização comprometida, o editor do portal poderá realizar um ajuste manual no código da página.
Siga o passo a passo:
1. No painel de edição da página no Plone, insira a imagem normalmente.
2. Na barra de ferramentas do editor de texto, selecione "text/x-web-textile" para alternar para editor de código.
3. No código HTML que será exibido, localize a tag correspondente à imagem que você acabou de inserir. Ela começará com ``
5. **Atenção à altura:** O valor `1767px` é apenas um referencial. Dependendo da altura real do sua imagem, você precisará alterar esse número (aumentando ou diminuindo, ex: `1200px`, `2000px`) até que a imagem seja exibida por completo.
6. Alterne o editor para o modo "text/html" para sair do modo de código-fonte, salve a página e verifique como a imagem ficou na visualização no portal.
# Uso do Plone como Repositório Oficial de Arquivos
É fortemente recomendado que todos os arquivos e documentos públicos (como PDFs, editais, relatórios e formulários) sejam armazenados diretamente no próprio Plone, e não em serviços de armazenamento de terceiros, como o Google Drive, Dropbox ou OneDrive.
##### Por que não usar o Google Drive ou similares?
Embora prático, o uso de links do Google Drive para disponibilizar arquivos no site institucional gera problemas graves a longo prazo:
- **Dependência de Contas Individuais:** Os arquivos no Google Drive (mesmo institucionais) ficam vinculados à conta do usuário que os criou. Se este servidor for desligado da instituição ou tiver sua conta desativada, todos os documentos sob a propriedade dele se tornarão inacessíveis, "quebrando" os links publicados no site.
- **Perda de Rastreabilidade e Permissões:** O autor do arquivo pode, acidentalmente, alterar as permissões de "Qualquer pessoa com o link" para "Restrito", ou mesmo apagar o documento de seu Drive particular, tornando impossível para a equipe do portal rastrear ou recuperar o arquivo original.
- **Soberania, Custódia e Segurança da Informação:** Documentos públicos, oficiais e institucionais precisam seguir as diretrizes de segurança da informação da Administração Pública Federal. Ao hospedar um arquivo no Plone, a instituição garante a posse, a guarda (custódia) e o backup centralizado do documento em infraestrutura controlada. Arquivos perdidos em drives individuais escapam da gestão arquivística, não podem ser auditados pela equipe de TI e podem gerar perdas irreparáveis de memória institucional.
Vantagens de hospedar arquivos no Plone
- **Acesso Permanente**: O Plone atua como o repositório institucional definitivo. O arquivo pertencerá ao site, e não a uma conta individual. Ele permanecerá acessível independentemente da situação funcional do servidor que realizou o upload.
- **Centralização**: Manter arquivos no Plone garante que toda a gestão de conteúdo, backup e controle de versões fiquem centralizados em uma única plataforma oficial, facilitando a organização e auditorias futuras.
⚠️ Importante: Sempre faça o upload do arquivo (.pdf, .docx, etc.) diretamente pelo menu "Adicionar Item..." > "Arquivo" no Plone, conforme orientado neste manual.
# Como obter o link correto de Imagens e Arquivos
Para incorporar imagens ou arquivos em outros conteúdos (dentro ou fora do portal), é fundamental copiar a URL direta do arquivo, e não a URL de visualização do Plone.
**O Erro Comum:** Ao clicar em uma imagem e selecionar *"Clique para ver a imagem no tamanho completo..."*, o Plone abre uma página de visualização.
- **Não use a URL desta página:** `.../banner-ad-2024.png/image_view_fullscreen`
- **Motivo:** Essa URL é uma página do sistema Plone e não funcionará se inserida dentro de um código HTML ou componente externo.
**A Forma Correta:**
1. Navegue até a pasta onde o arquivo está.
2. Clique com o botão direito do mouse sobre o nome ou a miniatura do arquivo.
3. Selecione a opção **"Copiar endereço do link"** (ou "Copiar atalho", dependendo do seu navegador).
4. A URL correta deve terminar com a extensão do arquivo (ex: `.png`, `.jpg`, `.pdf`), sem textos adicionais como `/view` ou `/image_view_fullscreen`.
> **⚠️ Importante: Permissões de Acesso** Para que o link funcione para o público geral, **o arquivo e a pasta onde ele está localizado devem estar no estado "Publicado"**. Se estiverem como "Privado", apenas usuários logados conseguirão visualizar o conteúdo.
# Vídeo de treinamento
Vídeo do treinamento sobre o PLONE feito pela SETI/UFCAT dia 09/10/2025