¶ Manual de configuração do portal Editor
¶ SUMÁRIO
- Acessar área admin
- Sidebar do editor
- Páginas
- Página ***Principal*** (home) do Site
- Página Notícia
5.1 Página Notícia (filha) - Página default
6.1. Página default (filha) - Configuração do sidebar
- Componentes
8.1. Text Rich
8.2. Raw HTML
8.3 Simple Carousel
8.4 Wide Banner
8.5 Featured List
8.6 Accordion
8.7 Featured List Group
8.8 Dynamic Table
8.9 Dropdown Menu
8.10 Header
8.11 YouTube
8.12 Doc PDF
8.13 Grid Row
8.14 Select a news page list (with image)
8.15 Select a news page list (without image)
8.16 Select a News page list (campuses)
8.17 Button Link
8.18 Rotation Banner
8.19 Tab
8.20 Social
8.21 Header Current
8.22 Message
8.23 Form
8.24 Galery Image
8.25 Flicker
8.26 API Generic - Detalhes técnicos
¶ 1. Acessar área admin
- Digite no navegador, browser, o endereço do site https://nome_site/admin
- Digite seu usuário e senha para ter acesso a área admin do wagtail.
¶ 2. Sidebar do editor
No sidebar teremos as seguintes opções: (Busca, Páginas, Imagens, Documentos, Configuração portal, Configuração footer, Configuração header, Relatórios e Ajuda).
¶ 3. Páginas
Em Páginas é possível fazer a manipulação das páginas do site, desde da principal (home), notícia e demais páginas (default).
- Página ***Principal*** (home) do site;
- Página default
- Página Notícia
¶ 4. Página ***Principal*** (home) do Site
A página principal (home), possibilita várias configurações e ajustes em seu conteúdo.
- Título da página: por padrão deixar igual ao nome do vinculo da unidade;
- Descrição: uma breve descrição sobre a home;
- Responsável: é o usuário que fará o gerenciamento das páginas da unidade;
- Conteúdo: em conteúdo é possível fazer a gestão do conteúdo visível na página através de módulos, basta clicar em conteúdo na opção “+”.
Para configurar a página, clique nos “...” e selecione a opção editar, na página é possível fazer a edição do título, descrição e responsável. Na página home é possível ajustar o sidebar do site, caso as páginas noticia e default fiquem com a opção de herdar sidebar, o sidebar da home será o padrão do site.
¶ Criando uma Página Home
- Clique Páginas no menu lateral
- Clique em Páginas no menu que abrir
- Clique no "+" e escolha Página ***Principal* (home) do site
IMPORTANTE: Não é possível criar uma Página Home dentro de outra Página Home ou suas subpáginas.
¶ Na página que abrir, preencha as informações solicitadas.
- Título: por padrão deixar igual ao nome do vinculo da unidade Campo Obrigatório
- Descrição: breve descrição da página
- Conteúdo: em conteúdo é possível fazer a gestão do conteúdo visível na página. Basta clica no "+" para visualizar os módulos. Clique aqui para uma descrição dos módulos.
- Responsável: usuário que fará o gerenciamento da unidade
- Body sidebar: adicionar seções ou imagens no menu lateral da home.
¶ IMPORTANTE
Na Aba Promover preencha o nome do Slug para a página. Slug é o nome que será mostrado na URL. http://domain.com/[nome-slug]
Exemplo:
Slug: home
na URL:http://nome-do-site.com/home
¶ Módulos disponíveis:
• Selecione uma Lista de Páginas de Notícias (com imagem) módulo para gerenciar card de notícias com foto, que não sejam destaque.
• Selecione uma Lista de Páginas de Notícias (sem imagem): módulo para gerenciar card de notícia sem foto, que não sejam destaque.
• Selecione uma Lista de Páginas de Notícias (Campi) módulo destinado a reitoria, onde vai mostrar cards de notícias destaque da demais unidades.
• Botão com Link: módulo para criar um botão com link para páginas internas ou links externos.
• Banner Rotativo: Módulo para adicionar um slideshow de notícias destaque.
• Raw html: módulo para inserção de html, css e Javascript.
• Carrossel Simples (somente imagens): módulo de carrossel de imagens, apenas para imagem.
• Banner largo: módulo para gerenciar banner grande com a opção de link.
• Grupo de lista em destaque: módulo para card de listagem, pode ser notícia, editais e outros, desde que seja uma lista.
• Tabela dinâmica: módulo para gerar tabelas.
• Cabeçalho: módulo para gerar título personalizado com 3 (três) opções de tamanhos.
• Mensagem: módulo para inserção de mensagens na página.
• Guia: módulo para inserção do componente de tabulação, com categoria e conteúdo vinculado.
• Youtube: módulo para gerenciar vídeos do youtube.
• Linha de grade: módulo para gerenciar grides, com a opção de 1 (um) a 4 (quatro) colunas e acesso aos módulos (Link Image, Link Youtube, Feature List Group).
• Social Media: módulo para gerenciar as redes sociais, suporte até 10 itens.
• Cabeçalho Atual: módulo alternativo ao header, seguindo o novo padrão adotado pelo govbr.
• Body sidebar: módulo para o gerenciamento do sidebar na home. É possível configurar tanto as categorias, links e imagens no sidebar, para imagens limitando-se a 5 (cinco).
• Divisor: Módulo para adicionar uma linha horizontal, ideal para separar conteúdos
¶ 5. Página Notícia
Na página de notícia é possível tanto realizar cadastro para a página pai, de listagem (listagem ou card), como para receber as páginas de notícias em si.
-
Na definição da página pai, será obrigatório o preenchimento do título, no caso dele deve ser levado em consideração o padrão adotado, exemplo, Notícia ou Notícias
-
Descrição é opcional, mas aconselhável seu preenchimento;
-
Responsável é de preenchimento obrigatório e deve ser selecionado uma forma de visualização das notícias filhas, com duas opções, Lista página default e Lista página card.
-
Em Promover, temos opções para gerenciar o nome da url (slug), o nome que será visível nos motores de busca (Tag de título) e o meta descrição para os motores de busca (Meta descrição).
-
Listar Páginas Default: marcando esta opção irá mostrar as páginas de notícias em formato de lista, conforme exemplo abaixo.
-
Lista Páginas Card: marcando esta opção irá mostrar as páginas de notícias em formato de cartões, conforme exemplo abaixo.
¶ 5.1 Página Notícia {filha}
- Título: preenchimento obrigatório
- Descrição: é aconselhável com texto resumido sobre o texto da notícia,
- Conteúdo da notícia: cadastrar o conteúdo da notícia, clique aqui para consultar os módulos disponíveis.
- Responsável: opcional
- Marcadores: opcional, mas seu preenchimento é refente as tags visíveis no rodapé da notícia e uma imagem.
- Marcando a opção "Notícia Destaque" fará com que a notícia em home fique visível em Rotating Banner, caso contrário ficará visível nos Collection News e Simple Collection News,
- Marcando a opção Detalhes da página irá mostrar o rodapé da notícia, com o autor, data e atualização da notícia e tags.
- Na aba Promover, temos opções para gerenciar o nome da url (slug), o nome que será visível nos motores de busca (Tag de título) e o meta descrição para os motores de busca (Meta descrição).
¶ Exemplo de Notícia
¶ Módulos disponíveis:
• Selecione uma Lista de Páginas de Notícias (com imagem) módulo para gerenciar card de notícias com foto, que não sejam destaque.
• Selecione uma Lista de Páginas de Notícias (sem imagem): módulo para gerenciar card de notícia sem foto, que não sejam destaque.
• Selecione uma Lista de Páginas de Notícias (Campi) módulo destinado a reitoria, onde vai mostrar cards de notícias destaque da demais unidades.
• Botão com Link: módulo para criar um botão com link para páginas internas ou links externos.
• Banner Rotativo: Módulo para adicionar um slideshow de notícias destaque.
• Raw html: módulo para inserção de html, css e Javascript.
• Carrossel Simples (somente imagens): módulo de carrossel de imagens, apenas para imagem.
• Banner largo: módulo para gerenciar banner grande com a opção de link.
• Grupo de lista em destaque: módulo para card de listagem, pode ser notícia, editais e outros, desde que seja uma lista.
• Tabela dinâmica: módulo para gerar tabelas.
• Cabeçalho: módulo para gerar título personalizado com 3 (três) opções de tamanhos.
• Mensagem: módulo para inserção de mensagens na página.
• Guia: módulo para inserção do componente de tabulação, com categoria e conteúdo vinculado.
• Youtube: módulo para gerenciar vídeos do youtube.
• Linha de grade: módulo para gerenciar grides, com a opção de 1 (um) a 4 (quatro) colunas e acesso aos módulos (Link Image, Link Youtube, Feature List Group).
• Social Media: módulo para gerenciar as redes sociais, suporte até 10 itens.
• Cabeçalho Atual: módulo alternativo ao header, seguindo o novo padrão adotado pelo govbr.
• Body sidebar: módulo para o gerenciamento do sidebar na home. É possível configurar tanto as categorias, links e imagens no sidebar, para imagens limitando-se a 5 (cinco).
• Divisor: Módulo para adicionar uma linha horizontal, ideal para separar conteúdos
¶ 6. Página default
Na página default é possível tanto realizar cadastro para a página pai, para demais páginas do portal que não sejam de notícia, de listagem (listagem ou card), como para receber as páginas em si.
- Título: preenchimento obrigatório, deve ser levado em consideração o padrão adotado, exemplo: Departamento ou Departamentos.
- Descrição: opcional, mas aconselhável seu preenchimento
- Responsável: preenchimento obrigatório
- Promover: temos opções para gerenciar o nome da url (slug), O nome que será visível nos motores de busca (Tag de título) e o meta descrição para os motores de busca (Meta descrição).
- Listar Páginas Default: listar as páginas filhas em formato de lista
- Listar Páginas card:: listar as páginas filhas em formato de card
¶ 6.1. Página default {filha}
- Título: preenchimento obrigatório, deve ser levado em consideração o padrão adotado, exemplo: Departamento ou Departamentos.
- Descrição: opcional, mas aconselhável seu preenchimento
- Responsável: preenchimento obrigatório
- Marcadores: opcional
- Promover: temos opções para gerenciar o nome da url (slug), O nome que será visível nos motores de busca (Tag de título) e o meta descrição para os motores de busca (Meta descrição).
- Listar Páginas Default: listar as páginas filhas em formato de lista
- Listar Páginas card:: listar as páginas filhas em formato de card
¶ Módulos Disponíveis
- Rich Text: módulo para inserção de texto rico, através dele é possível a inserção de outros elementos no texto, como imagem, documentos, links, incorporar vídeo, lista numerada, marcadores, citação, cabeçalhos.
- Raw html: módulo para inserção de html, css e Javascript.
- Simple carousel (images Only): módulo de carrossel de imagens, apenas para imagem.
- Wide Banner: módulo para gerenciar banner grande com a opção de link.
- Featured List Group: módulo para card de listagem, pode ser notícia, editais e outros, desde que seja uma lista.
- Accordion: módulo para criar elemento acordion, com a inserção de título e conteúdo do elemento, sendo possível, texto, link, imagem, documento.
- Dynamic Table: módulo para gerar tabelas.
- Header: módulo para gerar título personalizado com 3 (três) opções, indo de h2 a h6.
- Dropdown Menu: módulo para criar um menu no estilo dropdown na página, sendo possível criar categorias e seus respectivos links.
- Content Image: módulo para inserção de imagens na página, sendo possível posicionar a imagens, à esquerda, direita e centralizada.
- Message: módulo para inserção de mensagens na página.
- Tab: módulo para inserção do componente de tabulação, com categoria e conteúdo vinculado.
- Header Current: módulo alternativo ao header, seguindo o novo padrão adotado pelo govbr.
- Form: módulo para gerenciar um formulário de contato, sendo possível definir os campos, tipo de campo, validação e caixa de e-mail que irá receber.
- Galery Image: módulo para inserção e múltiplas imagens, para criação de página de galeria de imagens.
- Youtube: módulo para gerenciar vídeos do youtube.
- Doc PDF: módulo para inserção de documento na página, iframe para visualização do conteúdo do documento direto na página.
- Grid Row: módulo para gerenciar grides, com a opção de 1 (um) a 4 (quatro) colunas e acesso aos módulos (Link Image, Link Youtube, Feature List Group).
¶ 7. Configuração do sidebar
Esse é um componente com comportamento a parte nas páginas, sendo o da página home o mais relevante, pois, caso as páginas de noticia e default não tenham seus sidebar configurados, elas herdarão da página home.
Body:
- Category title: é o título da categoria que vai agrupar as páginas internas ou links externos.
- Icon: é a personalização do ícone para catagory title. Acesse o Manual de Icones
Menu itens:
- Title: é o título para a url de páginas internas ou links externos.
- External URL: url para links externos ao site.
- Icon: é a personalização do ícone para title. Acesse o Manual de Icones
¶ 8. Componentes
¶ 8.1. Text Rich
No componente é possível fazer a estilização do texto, inserção de imagem, documento, links, listas, citações, inserção de vídeo. Aconselhável para todos os usuários.
¶ 8.2. Raw HTML
Recurso Avançado. É possível fazer a inserção de elementos html, css e javascript, lembrando que deve ser feito com cuidado para não impactar em elementos estruturais da páginas como em outros elementos. Sendo possível seguir o padrão do govbr ds https://www.gov.br/ds/home
¶ 8.3 Simple Carousel
No componente é possível fazer a inserção de múltiplas imagens para que fiquem trocando sequencialmente. Máximo 10 imagens.
¶ 8.4 Wide Banner
No componente é possível a inserção de imagem grande, banner, na página, sendo possível também vincular um link para o banner, posicionamento, texto de descrição da imagem.
- Banner image: opção para escolher ou fazer upload de uma imagem.
- Banner link: opção para inserção de link a imagem.
- Content Aligment: opção para alinhamento da imagem.
- Alt text: texto descritivo da imagem.
- Open link in: como o link da imagem será aberto.
Same Tab: Mesma aba atual do navegador
New tab: abrirá uma nova aba no navegador.
¶ 8.5 Featured List
Featured List: no componente é possível fazer a inserção de um List title, icon, Link title, Internal page, External page.
- List title: é o título do card de listagem.
- Icon: é o ícone visível ao lado do List title, default calendar-alt. Manual de Icones
- Link title: título do link.
- Internal page: selecionar um item de página interna.
- External link: colocar o link de uma item externo.
¶ 8.6 Accordion
Accordion é um título que ao ser clicado revela um conteúdo. No componente accordion é possível fazer a inserção de Title, e content (Text Rich)
- Title: título do item accordion
- Content: é o conteúdo dentro do accordion, sendo possível a inserção de texto rico, com seus elementos.
¶ Exemplo de Accordion
¶ 8.7 Featured List Group
É o componente para inserção de uma lista de páginas em um card, sendo possível fazer a inserção de List Title, Main page e icon.
- List Title: é o título que ficará visível no card.
- Main Page: é o grupo de páginas que irá aparecer no card, limitado a 5 últimas publicações do grupo
- Icon: é o ícone ao lado do List Title.
Exemplo de Featured List Group
¶ 8.8 Dynamic Table
É o componente para inserção de tabelas nas páginas, sendo possível a inserção Collumn Header e Content Cell.
- Collumn Header: é o título para o header da coluna.
- Content Cell: é o conteúdo das linhas.
Exemplo
https://drive.google.com/file/d/11eFunSUpB2rRggroBw4fR6IhfvW54BlH/view?usp=drive_link
¶ 8.9 Dropdown Menu
É o modulo para inserção de menu nas páginas, sendo possível a inserção de Category Title, Item name, Internal page, External page.
- Category Title: é o título da categoria onde será agrupado os Item name.
- Item name: é o título para o nome do link.
- Internal page: é a possibilidade de vincular aquele item name a umapagina interna.
- External page: é a possibilidade de vincular a um link externo o item name.
¶ Exemplo de Dropdown Menu
¶ 8.10 Header
Header é o módulo para personalização de um título dentro de uma página, sendo possível a inserção de Title, Heading Size (Heading 1 a 6, mesmo h1 a h6), Color.
- Title: é o título, texto, que ficará visível.
- Heading Size: é o tamanho do texto, sendo possível ajustar de 1 a 6, sendo 1 o maior tamanho e 6 o menor.
- Color: existem 3 (três) padrões de cores (green – educação, Orange – justiça, purple – tecnologia).
¶ 8.11 YouTube
Módulo para inserção de vídeos do youtube, sendo possível a inserção do Title, Video id e Caption
-
Title: é o título do vídeo.
-
Video id: é o id referente ao vídeo, exemplo, na url do MEC https://www.youtube.com/watch?v=Xd6aESe1e40, o trecho do id é logo após “?v=”. Como mostrado na imagem abaixo
-
Caption: é a descrição do vídeo.
¶ 8.12 Doc PDF
Modulo para inserção de documentos e visualização direto na página, sendo possível a inserção do Document title, Select a PDF document e Frame height.
-
Document title: é o título do documento que ficará visível.
-
Select a PDF document: é a opção para seleção e upload do documento
-
Frame height: é a altura do frame na página para visualização do documento.
¶ 8.13 Grid Row
É o modulo para divisão do conteúdo em gride, sendo possível a inserção de alguns elementos dentro das grides (image with link, youtube link), podendo ter a seguinte disposição, divisão da gride, em até 4 (quatro) colunas.
¶ 8.14 Select a news page list {with image}
É o modulo para inserção de cards de notícia com imagem, que não são destaques, sendo possível a inserção de Title e Section.
- Title: é o título para o grupo de cards, ficando visível em tela.
- Section: é a opção para seleção da página pai de notícia, lembrando que esse modulo é restrito ao conteúdo de notícias, pois seus filtros estão apontando para o atributo destaque.
- Emphasis: Nesta opção podemos escolher se queremos escolher página marcadas como destaque (Emphasis) ou que não são destaque (No Emphasis).
- News Order: opção para escolher a ordem que as notícias vão ser apresentadas.
- Ascending (oldest first): as notícias mais antigas serão mostradas primeiro.
- Descending (newest first): as notícias mais recentes serão mostradas primeiro.
¶ 8.15 Select a news page list {without image}
É o modulo para inserção de cards de notícia sem imagem, que não são destaques.
- Title: é o título para o grupo de cards
- Section: é a opção para seleção da página pai de notícia, lembrando que esse modulo é restrito ao conteúdo de notícias, pois seus filtros estão apontando para o atributo destaque.
- Emphasis: Nesta opção podemos escolher se queremos escolher página marcadas como destaque (Emphasis) ou que não são destaque (No Emphasis).
- News Order: opção para escolher a ordem que as notícias vão ser apresentadas.
- Ascending (oldest first): as notícias mais antigas serão mostradas primeiro.
- Descending (newest first): as notícias mais recentes serão mostradas primeiro.
¶ 8.16 Select a News page list {campuses}
Módulo para inserção de cards de notícia das unidades, deve ser utilizado somente pela reitoria, pois está vinculado a página do portal.
- Title: título do componente.
- Section: sessão da página de notícias, deve ser sempre a página de listagem.
¶ 8.17 Button Link
É o modulo para inserção de um botão de direcionamento, sendo possível a inserção de Internal Page, External URL, Text, Link Style, Alignment, Open link in.
- Internal Page: é a opção para seleção de paginas internas do site.
- External URL: é a opção para links externos ao site.
- Text: será o texto visível em tela no botão.
- Link Style: é o estilo do botão, com 3 (três) opções.
- Alignment: é o alinhamento do botão, sendo possível alinhar a esquerda, direita e centro.
- Open link in: opção para abrir na mesma página ou em uma nova aba.
¶ 8.18 Rotation Banner
É o modulo para o banner rotativo, vinculado a página de noticia, com filtro ativo para destaque, sendo possível fazer a inserção de Title e Section.
Esse componente por estar vinculado a notícias não sendo possível a utilização em outras páginas do site.
- Title: é o título para identificação do elemento, não é visível em tela.
- Section: opção para seleção da pagina interna de notícias, devendo ser definido a página pai da lista.
¶ 8.19 Tab
É o módulo para o componente tabulação, nele é possível criar as categorias com seus respectivos conteúdos.
Title: título da categoria.
Content: conteúdo da categoria.
¶ 8.20 Social
módulo para o gerenciamento das redes socias na página home, é possível a inserção de até 10 (dez) itens.
Social media title: título da rede social
Social media icon: ícone da respectiva rede social.
External URL: url do link da rede social.
¶ 8.21 Header Current
Módulo para o novo modelo de header, baseado no govbr.
- Title: texto no título do header.
¶ 8.22 Mensagem
Message: módulo para inserção de mensagens na página, é possível a inserção de texto, link e alterar o tipo da mensagem.
- Description message: descrição que ficará visível na mensagem.
- Type message: tipo de mensagem (sucess, danger, info e warning).
- External URL: url para um link externo.
- Show buttom close: habilitar o botão para fechar a mensagem.
¶ 8.23 Form
módulo para o gerenciamento de formulário de contato na página,sendo possível selecionar o tipo de elemento, validação, quantidade e e-mail que irá receber as mensagens.
- Active form: o formulário deve estar ativo para receber mensagens.
- Destination Email: e-mail que irá receber as mensagens.
- Form Fields: é possível a inserção de 4 (quatro) tipos de elementos, são:
- Campo input;
- Campo Textarea;
- Campo Radio Button;
- Select Button
¶ 8.24 Galery Image
Módulo para inserção de imagens, transformando a página em uma página do tipo, galeria, aceita no máximo 20 (vinte) imagens.
Image: a imagem vinculada, sendo possível fazer o upload ou editar a imagem.
¶ 8.25 Flicker
Módulo para inserção de imagens da rede social flicker.
Embed code: é o código de incorporação do recurso de compartilhamento do flicker que deve ser colado nesse campo.
¶ 8.26 API Generic
Módulo para inserção de informações alimentadas por API externas.
- Title of content: título do serviço ou descrição.
- API URL: url da api externa.
- Token: caso necessite de uso de token para acessar o serviço.
- Custom Headers: customização do header, cabeçalho, no formato json para acessar o serviço.
- OAuth config: customização do header, cabeçalho, no formato json, para acessar o serviço, quando solicita credencias de acesso, como usuário e senha.
- Title: título do valor mostrado em tela.
- Path in JSON: é o valor que será mostrado em tela, exemplo, em um cenário que quero trazer http://pessoa/api o valor do sexo masculino, filtrar, pessoa.sexo.masculino, lembrando que isso é apenas uma hipótese, deve ser analisado o json de resposta para montar o filtro ou a documentação da api.
¶ 9. Detalhes técnicos
Vamos abordar algumas situações sobre a aplicação abaixo:
Exclusão de páginas: por uma questão de segurança a função de exclusão ficou restrita somente ao usuário administrador do sistema.
Backup: a função de backup é realizada somente pelo administrador do sistema, em caso de sinistro onde necessite a recuperação do site. Sempre será full e nunca parcial ou por unidade.
Sobre os ícones: será disponibilizado um manual com uma lista no repositório mas também é possível pelo site https://fontawesome.com/search?ic=free, sendo que para utilização deve-se suprimir o começo dos icon,
Exemplo:
fa-solid fa-house
Em vermelho deve ser retirado, ficando só house
Mais detalhes sobre o wagtail: https://wagtail.org/.
Mais detalhes sobre o govbr ds: https://www.gov.br/ds/home.