Manual de administração de conteúdo usando o Plone

• Introdução ao Plone
• Visão Geral da Interface
• Introdução a Administração Conteúdo
• Adicionando Novo Conteúdo
• Manipulando o Menu
• Conteúdo Personalizado com HTML e CSS
• Como alterar o Título e a Descrição do Site
• Guia de Inserção e Dimensionamento de Imagens
• Uso do Plone como Repositório Oficial de Arquivos
• Como obter o link correto de Imagens e Arquivos
• Vídeo de treinamento

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, 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 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
• Endereço real: 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

1. Clique em "Login" na página inicial do site.

    2. Insira suas credenciais institucionais.

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:

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:

Estrutura padrão no Plone:

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.

• Formulário de edição será aberto.
  • Preencha os campos obrigatórios (título, descrição, corpo do texto, imagem, etc.).

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/
    

• Adicione uma nova pasta

• Clique em "Adicionar Item" > "Pasta"

• Preencha os campos obrigatórios

• Clique em "Salvar"
  

• Publique a alteração
  • Não se esqueça de publicar a pasta para que o submenu fique visível no site.

 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:

Tags válidas:

Como usar HTML e CSS na Prática

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.

Em seguida clique em Edição

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 <img.

4. Dentro dessa tag, adicione o seguinte parâmetro de estilo: style="min-height: 1767px; object-position: top;".

   • Exemplo de como deve ficar: <img src="link-da-imagem.jpg" style="min-height: 1767px; object-position: top;" alt="Descrição">

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

• https://eduplay.rnp.br/app/video/360825