1

Manual do Usuário PORTAL CNI

CMS PUBLICA

2

“COMO MONTAR UM CANAL / HOTSITE?”

3

SUMÁRIO 1. CONCEITOS INICIAIS.................................................................................................................04

1.1 O que é um Canal?........................................................................................................04 2. CRIAÇÃO E EDIÇÃO DE UM CANAL.................... ...................................................................05

2.1 Criando o Canal.............................................................................................................05 2.2 Criando a página de interna do canal....................…....................................................10 2.3 Criando outras páginas...................................................................................................13

3. INSERINDO O CONTEÚDO NO CANAL................... ...............................................................14 3.1 Editando o conteúdo das internas do canal..................................................................14 3.1.1 Inserir e configurar a pasta do canal...............................................................14

3.1.2 Inserindo uma interna comum no canal..........................................................16 3.2 Editando o conteúdo da home do canal................…....................................................22

4

1. CONCEITOS INICIAIS Este manual tem por objetivo orientar o usuário na inserção de canais, tanto para a CNI, quanto para as empresas como SESI, SENAI e IEL. Mas antes de seguir para o passo a passo, o usuário deve conhecer alguns conceitos iniciais e os modelos de templates existentes para esses canais.

1.1 O que é um Canal? Um canal é uma espécie de hotsite criado para um programa, evento ou prêmio. Além da home, este possui internas de notícias. Nesses canais há a possibilidade de inserir galeria de fotos, arquivos para download, vídeos, etc. A inserção dessas mídias irá depender de como o usuário irá montar a página. Ao diagramar um canal, ele poderá incluir ou excluir portlets no campo dos Slots.

5

2. CRIAÇÃO E EDIÇÃO DE UM CANAL

2.1 Criando o canal Antes de escolher quais portlets irão compor o meu canal, eu devo criar primeiramente a estrutura inicial dele. Para isso, o primeiro passo é criar a página.

O usuário deverá clicar em páginas, na pasta da empresa na qual o canal faz parte (CNI / SESI / SENAI / IEL). Logo depois, o usuário irá clicar na pasta Canal e aparecerá a seguinte tela:

Figura 2.1: Criando o canal

Nessa tela, o usuário deverá adicionar um título, a identificação do canal e escolher um outro canal para clonar a estrutura base. Depois é só salvar.

Figura 2.1: Criando o canal

Atenção: O campo “identificação” refere-se a URL que o canal terá quando for para o ar. Portanto é preciso pensar num “endereço adequado” ao inserir o identificador desse campo.

6

Após criada a página, o próximo passo é editar o campo de Metadata do canal criado. Basta clicar novamente no canal criado e na aba Metadata. É só apagar as informações presentes na aba e inserir as novas. Veja a imagem abaixo:

Figura 2.1: Criando o canal

Após inserir a página do canal e editar a metada, o usuário deverá escolher os portlets que irão compor a home do seu canal. Ele deve clicar na ferramenta opções (a que se assemelha a um martelo) e escolher a opção diagramação, conforme o exemplo abaixo:

7

Figura 2.1: Criando o canal Na tela de diagramação, o usuário poderá excluir os portles que não quiser que apareça no seu canal e incluir portlets que ele deseja que entre no canal.

Para incluir os itens, o usuário deve se direcionar para campo slot conteúdo e em inserir portlets.

Figura 2.1: Criando o canal

Ao selecionar o portlet que deseja que apareça na home do canal, o usuário deve clicar na

ferramenta: . Após o portlet aparecer no campo de slot de conteúdo é necessário marcar a ferramenta de clone (a que se assemelha a dois bonecos) para habilitar. Ao clicar na ferramenta, um dos bonecos ficará vermelho. Veja a imagem abaixo:

8

Figura 2.1: Criando o canal

Atenção: itens de menu e rodapé são padrão para todas as páginas, logo não há necessidade de marcar a ferramenta de clone. Mas, nos portlets que é necessário alterar para a montagem do canal é fundamental que essa ferramenta seja marcada. Caso o usuário necessite alterar a ordem dos portlets ou excluir algum, ele poderá utilizar as ferramentas de setas e X, que, respectivamente, movimentam e excluem os portlets. Os portlets que são itens de canal, sempre estão identificados com canal antes ou depois do nome. Atenção: O portlet “Separator” é para separar elementos na diagramação, quando a página insistir em quebrar o layout. Veja um Exemplo na figura abaixo:

9

Figura 2.1: Criando o canal No caso acima, para corrigir a quebra, o “Separator” foi posicionado entre o portlet de destaque e o de Galeria Multimídia, como mostra o exemplo:

Figura 2.1: Criando o canal

10

Após inserir os portlets da home do canal, o próximo passo do usuário será criar a página de interna própria do canal.

2.2 Criando a página de interna do canal Após criar a página principal do canal, o usuário deverá criar a base para as internas inseridas abrirem, isto é, uma página de interna geral. Para criar uma interna, o usuário deverá clicar sobre a página do canal criado. Esse selecionado, o usuário deverá clicar no botão copiar (no frame de ações). Ver imagem abaixo:

Figura 2.2: Criando a página de interna do canal

Após copiar a página do canal, o usuário deverá clicar na pasta canal novamente. Ir no botão Colar no frame de Ações:

11

Figura 2.2: Criando a página de interna do canal O usuário deverá localizar a copia e fazer as edições:

1. Trocar o nome para Nomedocanal_interna 2. Trocar o identificador para nomedocanalinterna 3. Trocar o Templete base de Sem Lateral para T-Padrão. 4. Salvar as configurações.

Após fazer as devidas configurações, o usuário deverá trocar os portlets usados na página. Ele deve clicar na ferramenta opções (a que se assemelha a um martelo) e escolher a opção diagramação, conforme o exemplo abaixo:

Figura 2.2: Criando a página de interna do canal

Na tela de diagramação, o usuário deverá excluir todos os portles do “slot conteúdo”. Depois deverá selecionar o portlet “Interna Notícia”, como mostra a imagem abaixo:

12

Figura 2.2: Criando a página de interna do canal

Após completar o slot de conteúdo, o usuário deverá escolher os portlets que irá compor a lateral da página. Todos os portlets adaptáveis a lateral começam com a palavra Lateral. Atenção: Usualmente usamos para as internas dos canais os portlets de “Lateral – Listagem segmentada”, para inserir as últimas notícias, e “Lateral – Mini twitter”. Mas esse item pode sofrer alteração dependendo do conteúdo. Após preencher os slots necessários, o usuário deverá programas os portlets de “Topo – Detalhes” e “Topo – Submenu” para copiarem o conteúdo inserido na página principal do canal. Para essa configuração, o usuário deverá seguir os seguintes passos: Desabilite as ferramentas de clone clicando sobre elas (a luz vermelha se apagará) e clique na ferramenta em

forma de pinça ( ) do portlet “Topo – Detalhes”. Abrirá a seguinte tela:

Figura 2.2: Criando a página de interna do canal

13

Na tela acima o usuário deverá buscar no frame:

1. Site – Portal da Indústria 2012 2. Página – Nomedocanalcriado 3. Portlet – Topo – Detalhes

Depois é só clicar em adicionar. É só repetir o mesmo procedimento no portlet Topo – Submenu, substituindo o item 3 pelo portlet “Topo – Submenu”. A luz da ferramenta se acenderá e ficará da seguinte forma:

Figura 2.2: Criando a página de interna do canal

Após as configurações nos portlets da página de interna, o usuário deverá clicar no botão de Salvar/Publicar, localizado no final dos portlets. Enfim, a interna estará criada. Para sair da página, basta clicar na pasta “Canal” novamente. Essa página será utilizada nas configurações da pasta que usuário precisará criar para o canal no item de aplicativos. Além disso, será necessário editar os portlets laterais no item “Portlets”, que será explicado em breve.

2.3 Criando outras páginas

Em alguns canais, terá a necessidade de criar páginas de contato, formulários ou até mesmo listagem de notícias, publicações, etc. Os procedimentos para a criação desses outros tipos de páginas é o mesmo da interna, porém alterando o Slot de conteúdo, no qual o portlet irá alterar dependendo do conteúdo que o usuário precisará inserir. Abaixo uma lista de portlets que poderão ser utilizados e para quais conteúdos eles servirão respectivamente:

• Interna Notícias: Para internas comuns de notícias. • Corpo – Comentários – Para internas específicas de notícias. • Formulário contato coringa – Para inserir um formul ário de contato no canal que poderá ser

enviado para um e-mail específico (esse editado no item portlets). • Interna publicações – Para conteúdo que irá se asse melhar as publicações. • Listagem de conteúdo segmentado Generico – Pode ser vir para listagem de notícias, de

publicações, etc.

14

3 INSERINDO O CONTEÚDO NO CANAL

3.1 Editando o conteúdo das internas do canal 3.1.1 Inserir e configurar a pasta do Canal Para linkar o submenu com as internas, primeiramente o usuário deverá acrescentar as internas do canal. Essas páginas são internas comuns de notícias, mas são inseridas dentro das pastas de iniciativas (Programa, Evento e Prêmio) de cada empresa (CNI, SESI, SENAI e IEL). O primeiro passo é identificar se o canal é um prêmio, programa ou evento. Logo depois, o usuário deverá inserir uma pasta do canal dentro da pasta de iniciativas da empresa. Por exemplo, para inserir o canal de Estágio do IEL, o usuário seguirá pelo seguinte caminho: Aplicativos → IEL → Iniciativas → Programas Dentro da pasta de programas, o usuário irá clicar com o botão direito e inserir “nova pasta”. Após dar o nome do canal, ele partirá para as configurações da pasta. Veja a tela abaixo:

Figura 3.1.1 Inserir e configurar a pasta do canal Para configurar a tela, o usuário irá até o botão configurações na parte superior da tela. Veja o exemplo:

Figura 3.1.1 Inserir e configurar a pasta do canal

15

Ao clicar em configurações, o usuário deverá, primeiramente, escolher a página na qual o conteúdo irá ter como base, isto é, a página de interna criada para o canal, como ensinado no item 2.2 – Criando a página de interna do canal, na página10 do presente manual.

Após escolher a página associada, o usuário deverá ir para as abas “Publicação” e “Configuração”. Na aba “Publicação”, o usuário deverá marcar o item exportar HTML, como mostra a figura abaixo:

Figura 3.1.1 Inserir e configurar a pasta do canal Já na aba “Configuração”, o usuário deverá marcar Notícias nos itens “Conteúdo padrão” e “Conteúdo habilitado”, como mostra o exemplo:

Figura 3.1.1 Inserir e configurar a pasta do canal

16

Após fazer as devidas marcações no item configurações é só clicar em salvar e pronto: a pasta criada está pronta para receber o conteúdo. Atenção: Caso o conteúdo seja diferente de uma interna de notícias comum, como é o caso de publicações, basta trocar o “conteúdo habilitado” e o “conteúdo padrão” para o aplicativo que será utilizado para o conteúdo. No caso de canais, os mais utilizados são os aplicativos de notícias e publicações. 3.1.2 Inserindo uma interna comum no canal Para cadastrar o conteúdo das internas do canal basta clicar na pasta adicionada e configurada. Aparecerá a seguinte tela:

3.1.2 Inserindo uma interna comum no canal

17

Nessa tela, o usuário poderá preencher as abas circuladas em vermelho, conforme o conteúdo que terá de inserir. Abaixo uma explicação sobre cada uma das abas:

Aba Blocos Nessa aba o usuário tem a opção de inserir blocos acordeons na página. Como no exemplo

abaixo:

3.1.2 Inserindo uma interna comum no canal: acordeons

3.1.2 Inserindo uma interna comum no canal: blocos

Para inserir o acordeon, o usuário deve clicar na aba, em inserir acordeon. Digitar o título do acordeon e o texto interno. Logo depois, ele deve colocar o seguinte código na página inicial (onde ele deseja que o acordeon fique posicionado na página): [ACCORDION1], como no exemplo abaixo:

18

3.1.2 Inserindo uma interna comum no canal: acordeons

Atenção: O usuário poderá inserir quantos acordeons precisar. Caso a interna necessite que entre um accordeon e outro exista um texto, o usuário deverá separar os acordeons com os seguinte código: [ACCORDION:1,2] Texto que ficará entre os acordeons [ACCORDION:3,4] Já para inserir o bloco, o usuário deve clicar na aba e em inserir texto. Digitar o título do bloco e o texto interno. Logo depois, ele deve colocar o seguinte código na página inicial (onde ele deseja que o bloco fique posicionado na página): [BLOCO1], como no exemplo abaixo:

3.1.2 Inserindo uma interna comum no canal: blocos Atenção: O usuário poderá inserir quantos blocos precisar, mas é importante se atentar para quebras de linha, pois podem deixar a página desproporcional. Atenção 2: Não há a possibilidade de separar blocos.

Aba Media Nessa aba o usuário poderá inserir fotos, vídeos, áudios e arquivos para download. É só fazer o upload dos arquivos, no caso de vídeos buscar o embed, e salvar. Veja a figura abaixo:

19

3.1.2 Inserindo uma interna comum no canal: Media

20

Atenção: O sistema permite inserir quantos arquivos de cada mídia o usuário quiser. Depois para que este apareça na página é necessário voltar para a aba geral e adicionar o código da mídia. Por exemplo, um upload de dois vídeos e duas fotos na página ficaria da seguinte forma:

3.1.2 Inserindo uma interna comum no canal: Media

Onde o código da mídia for posicionada na página é que ficará no site.

Atenção 2: Caso a interna necessite que entre um arquivo e outro exista um texto ou até mesmo separar os arquivos dentro dos blocos, o usuário deverá separar com os seguinte código: [ARQUIVOS:1,2] Texto que ficará entre os arquivos [ARQUIVOS:3,4]

Tags A forma correta de inserir as tags é uma embaixo da outra, sem separar por vírgula. Para inserir termos com duas ou mais palavras, é necessário colocá-los entre o caracter de aspas simples, como no exemplo abaixo: Exemplo: ‘sistema indústria’ ‘relações de trabalho’ ‘programas e serviços senai’

Relacionamento Nessa aba, o usuário irá relacionar a galeria de fotos inserida. O procedimento é o mesmo da notícia, porém o aplicativo selecionado é Galeria de Fotos e a pasta selecionada também é

21

Galeria de fotos. Após escolher a Galeria que deseja relacionar, deve-se voltar na aba principal e acrescentar o seguinte código: [GALERIA], como no exemplo abaixo:

3.1.2 Inserindo uma interna comum no canal: Aba relacionamento

Onde o código da Galeria for posicionado na página é que ficará no site. Para relacionar uma galeria, primeiro é necessário que esta seja criada dentro do aplicativo Galeria de Fotos , conforme é explicado no manual 1.

Atenção: Para verificar como ficou sua publicação, o usuário pode dar um preview na página. Basta clicar na ferramenta “opções” (a que se assemelha a um martelo) e clicar em p review ou publicado. No preview, o usuário consegue visualizar as alterações instantaneamente. Já em publicado, que é a forma como vai ser publicada no site, o usuário consegue visualizar a atualização cerca de 30 minutos depois, dependendo do conteúdo inserido. Veja o exemplo da tela abaixo:

3.1.2 Inserindo uma interna comum no canal: preview na interna

22

3.2 Editando o conteúdo da home do canal Depois de criadas a estrutura básica do canal e inseridas as internas, o próximo passo é editar a home. Portlets → Diagramação → CNI (ou SESI ou SENAI ou IEL) → Canal No item Canal, aparecerá o canal criado e seus respectivos portlets, como mostra o exemplo abaixo:

Figura 3.2: Como editar a home

de um canal

Abaixo alguns dos portlets mais utilizados nas home s dos canais e como inserir o conteúdo neles:

Canal – Galeria de Foto Nesse portlet, o usuário irá acrescentar uma foto ou uma galeria com títulos e legendas, além de ter a opção de linkar a galeria para qualquer página. Para adicionar uma foto, basta clicar no campo abaixo e fazer upload e salvar. Para criar uma galeria, o usuário deverá clicar em adicionar e criar campos para inserir mais fotos, isto é, a quantidade de fotos para a galeria, vai determinar a quantidade de campos. Além da imagem para a galeria, o usuário deverá adicionar a imagem também em Thumbnail. Atenção: Em alguns canais, utilizamos esse portlet apenas como um destaque grande, logo é inserido apenas uma foto, sem o item thumbnail.

23

Figura 3.2: Como editar a home de um canal

Canal – Destaque Nesse portlet, o usuário irá inserir um título, uma legenda, uma foto e o link para a página, conforme a figura abaixo:

24

Figura 3.2: Como editar a home de um canal

Canal – Download Nesse portlets, o usuário irá inserir um título, uma legenda, uma foto e um arquivo para download.

Figura 3.2: Como editar a home de um canal

25

Canal – Programação Nesse portlet, o usuário poderá acrescentar uma agenda com a programação do evento ou do programa, como mostra o exemplo abaixo:

Figura 3.2: Como editar a home de um canal Atenção: o link nesse portlet é opcional.

Canal – Lista Destaque Nesse portlet, o usuário poderá colocar vários destaques com foto, porém um embaixo do outro. É só inserir o título, a imagem e o link.

Figura 3.2: Como editar a home de um canal

Canal – 3 notícias O portlet te dá a opção de inserir três notícias posicionadas na horizontal, estas podem ser inseridas tanto manualmente, como por segmentação. Manualmente, é só clicar na aba Destaque e por segmentação, na aba propriedades. Então é só inserir o código.

26

Figura 3.2: Como editar a home de um canal

Mapa Contato / Mapa Brasil

Esses portlets são inseridos da mesma forma. Neles o usuário irá incluir as siglas dos estados do Brasil e o contato em cada estado, no campo descrição. Ambos são em formato do mapa do Brasil, porém o portlet de Mapa contato ocupa apenas o espaço de um portlet, já o de Mapa Brasil ocupa o espaço de dois portlets e possui georeferenciamento quando o usuário acessa o canal em que está inserido.

Figura 3.2: Como editar a home de um canal

27

Canal Texto Grande Portlet de texto, com opções de linkar para algumas páginas. Para inserir o conteúdo é preencher o campo título, chapéu (quando tiver), texto e link, sendo este último optativo. O portlet também poderá aparecer com mais de uma aba no site.

Figura 3.2: Como editar a home de um canal

Canal Vídeo Destaque

Com este portlet, o usuário poderá colocar um ou mais vídeos na home. Basta copiar o código de embed e colocar no campo destinado. Lembran sempre de alterar as dimensões do vídeo, como indica no portlet. Ver exemplo abaixo:

Figura 3.2: Como editar a home de um canal

28

Canal - Facebook No portlet, o usuário deverá inserir o nome que deseja que apareça no facebook e a página.

Figura 3.2: Como editar a home de um canal

Canal – Twitter No portlet, o usuário deverá inserir o endereço do twitter que deseja que apareça na home do canal e a quantidade de twitts.

Figura 3.2: Como editar a home de um canal

Canal – Flickr

No portlet, o usuário deverá inserir o “ID” do Flickr, o link e caso quiser um álbum especifico, o “ID” do álbum também.

Figura 3.2: Como editar a home de um canal

29

Topo – Detalhes Canais Nesse portlet, o usuário deverá incluir a foto de topo (dimensões especificadas na tela), a logo da empresa a qual o canal pertence, o nome do canal, a descrição da legenda e o link do próprio canal, conforme mostra o exemplo abaixo:

Figura 3.2: Como editar a home de um canal

Caso o usuário necessite colocar uma contagem regressiva é só preencher o campo data e trocar o campo Tipo Box para Data.

Topo – Submenu Só colocar o item do submenu e o link, como mostra o exemplo abaixo:

30

Figura 3.2: Como editar a home de um canal

Atenção: Ao editar um portlet, sempre verificar a aba propriedades. Alguns títulos são acrescentados nessa aba. Por ela também o usuário pode escolher a cor do portlet, assim como a cor dos títulos do mesmo.

Além desses portlets acima, o usuário tem outras opções de portlets para montar o canal e a lateral da página da interna. Para conhecer todos basta acessar os links abaixo: Home do canal: http://www.portaldaindustria.com.br/cni/canal/vitrinihome/ Lateral interna: http://www.portaldaindustria.com.br/cni/canal/vitrineinterna/ Atenção 2: Todos os portlets de home de canal possuem a palavra canal no nome, logo é fácil identifica-los na hora da escolha dos portlets.