SEJA BEM-VINDO AO SISTEMA DE PUBLICAÇÃO WEB
O Sistema de Publicação Web é uma ferramenta intuitiva e eficiente, para quem procura uma maneira dinâmica de public ar
e administrar conteúdos diversos para internet. Através de um sistema de navegação ágil e interface
amigável, o programa torna simples a tarefa de criar e gerenciar um web site, permitindo ao usuário publicar
seus primeiros conteúdos com apenas alguns cliques. Com um interessante sistema de visualização, o
usuário pode acompanhar passo a passo cada alteração executada no sistema, inclusive retroceder uma
ação caso fique insatisfeito com o resultado obtido, tendo a chance de testar diversas formatações para um
mesmo elemento, até que alcance a combinação ideal para cada situação.
Autores
Gabriel Rocha, Gabriel Marques e Thiago Suita
Sumário
Introdução ................................................................................................. 2
Fazendo login no sistema ......................................................................... 4
Conhecendo árvore de conteúdo ….......................................................... 5
Conhecendo o Sistema de Publicação Web ............................................. 9
Sub-Abas .................................................................................................. 15
Aba Artigos ............................................................................................... 16
Sub-Páginas .............................................................................................. 18
CSS ........................................................................................................... 19
Página Inicial ............................................................................................. 19
Conteúdo Dinâmico ................................................................................... 20
Conteúdo Fixo ........................................................................................... 22
Inserindo o Logotipo .................................................................................. 23
Criando o Menu ......................................................................................... 23
Publicidade na Coluna da Direita .............................................................. 24
Divisor de Guias ........................................................................................ 25
Enquete ..................................................................................................... 27
Busca ........................................................................................................ 28
Artigos ....................................................................................................... 29
Destaques ................................................................................................. 35
Customizando os Elementos de Destaque ............................................... 38
Paginação ................................................................................................. 39
Imagens .................................................................................................... 40
Nosso Contato .......................................................................................... 41
1 Fazendo login no sistema
Caso você ainda não possua um nome de usuário e senha de acesso para o entre em contato com o
nosso suporte web,através do e-mail: [email protected], ou do telefone: (51) 3022-3006.
Agora que você possui um nome de usuário e uma senha de acesso ao sistema, escolha um navegador web
de sua preferência (sugerimos o Mozilla Firefox), vá até a barra de endereço do navegar e digite o seguinte
endereço: http://96.31.89.20:8080/polopoly/Login.jsp , conforme mostra a imagem abaixo.
Após acessar a página http://96.31.89.20:8080/polopoly/Login.jsp, preencha os campos usuário
e senha com o seu usuário e senha fornecidos pelo nosso Suporte Web, e clique no botão Login,
posicionado logo abaixo dos campos que você acabou de preencher.
22Conhecendo a árvore de conteúdo
Após efetuar o login no sistema, você será direcionado a interface inicial do conforme
a imagem abaixo. Repare ainda que essa interface está divida em duas grandes frações, uma mais
a esquerda e outra a direita. Na fração à esquerda, é que está localizada a nossa árvore de conteúdo.
Nela está organizada a estrutura do nosso site.
Para entender melhor o esquema de uma árvore de conteúdo, tente imaginar um web site como
uma árvore genealógica onde a página inicial seria o elemento pai dessa arvore.
Este elemento pai, que é uma página do nosso web site, pode conter outras páginas dentro dele que são
chamadas de páginas filhas do elemento pai. Estas páginas filhas por sua vez também podem ter filhas,
ou seja, outras páginas dentro delas. Vamos analisar a figura a seguir para entender melhor o funcionamento
de uma árvore de conteúdo e posteriormente voltaremos a árvore de conteúdo do polopoly.
Este elemento pai, que é uma página do nosso web site, pode conter outras páginas dentro dele,
que são chamadas de páginas filhas do elemento pai. Estas páginas filhas, por sua vez também podem
ter filhas, ou seja, outras páginas dentro delas. Vamos analisar a figura abaixo para entender melhor o
funcionamento de uma árvore de conteúdo e posteriormente voltaremos a árvore de conteúdo do nosso
Sistema de Publicação Web.
Agora que nós já sabemos como funciona uma árvore de conteúdo, vamos analisar novamente
a árvore de conteúdo do nosso sistema de publicação Nesse Caso o nosso elemento pai é a página
inicial do nosso site, que está posicionada no topo da árvore de conteúdo, e por padrão recebe o
mesmo nome do site. *Nesse exemplo, seria o “Jornal Exemplo”, como mostra a figura abaixo. As
páginas abaixo dela são as editorias e as demais páginas do nosso site, por exemplo:
O nosso jornal fictício chamado de "Jornal Exemplo", possui 6 editorias mais uma página de contato.
Repare que esse é exatamente o número de páginas que o nosso jornal possui na árvore de conteúdo,
uma para cada editoria, mais uma para a página de contato, totalizando sete páginas que est]ao dispostas
e organizadas na árvore de conteúdo.
Ok, você lembra que nós mencionamos anteriormente que as páginas filhas também podem ter
outras páginas dentro delas? Pois bem, repare ainda na figura a cima que a editoria "Esporte" possui
um sinal de adição a sua esquerda, na árvore de conteúdo.
Você consegue imaginar por quê? Exatamente, porque ela possui outras páginas dentro dela.
Se você clicar no sinal de adição, à esquerda de uma página na árvore de conteúdo ela irá expandir-se
e revelar a(s) pagina(s) que estão imediatamente abaixo dela no esquema de hierárquico da árvore de
conteúdo. Observe a diferença entre as árvores de conteúdo nas figuras da página anterior e a figura abaixo.
A figura anterior ilustra a árvore de conteúdo antes de clicarmos no sinal de adição da editoria "Esporte", já a
figura abaixo ilustra a mesma árvore de conteúdo, porém com o conteúdo da editoria "Esporte" sendo revelado.
Repare também que a página da editoria esporte possui mais duas páginas dentro dela, uma
página para Futebol e outra para Basquete. Observe também na figura a cima, que após clicarmos
no sinal de adição e o conteúdo da página ser revelado, ele transforma-se em um sinal de subtração,
e ao clicarmos nele novamente, o conteúdo que foi mostrado é recolhido e volta a ficar oculto.
3 Conhecendo o Sistema de Publicação Web
Agora que já conhecemos a árvore de conteúdo, e sabemos que ela abriga as diferentes páginas
que compõem o nosso web site, vamos analisar a interface geral do sistema, suas respectivas áreas
e seu modo de navegação. Para conhecermos melhor o sistema, vamos agora focar na segunda grande
Fração, que divide a sua interface posicionada mais a direita conforme mostra a imagem.
É nessa área que realizamos a grande maioria das nossas alterações dentro do sistema, como criar
novos elementos para a página, armazenar, criar e editar artigos e muitas outras funções que aprenderemos
mais adiante. Por hora apenas focalize que essa é uma área bem importante do nosso sistema.
Para começarmos o estudo da interface geral do nosso sistema, vamos fazer um logoff do usuário
(sair do programa) e efetuar o login novamente. Para fazermos o logoff, clique em "sair" no canto
superior direito da interface do programa, conforme mostra a imagem abaixo .
Ao fazer o logoff do sistema, você será direcionado para a página de login. Conforme nós aprendemos
no capítulo um, efetue o login novamente. Para isso digite seu nome de usuário e senha nos campos do
formulário de login e clique no botão "login".
Você será direcionado novamente para a interface inicial do sistema. Agora clique no primeiro
ícone da sua árvore de conteúdo, aquele ícone que como nós vimos tem o mesmo nome do nosso
site. Repare que ao clicar no ícone uma nova aba de navegação interna do sistema será aberta, como
mostra a figura
Visualizando a nova aba, repare que imediatamente abaixo dela nós temos uma barra verde com
as funções básicas disponíveis para essa, aba que são: "Fechar","editar", "visualizar", "atualizar" e
ainda na mesma barra nós temos também os botões usuários, grupos e propriedade, visualize
a barra de ações na imagem
O botão "fechar", como o próprio nome sugere, irá fechar uma aba que estiver aberta quando
clicarmos nele. Já o botão "editar", irá nos permitir fazer diversas alterações em nossa página.
Por exemplo, localize o campo "Nome" na aba página inicial, é o primeiro campo disponível na
aba. Depois de localizá-lo, clique em "editar" e em seguida altere o texto contido no campo para
qualquer nome da sua preferência (não esqueça de guardar o nome original, pois vamos precisar
dele novamente). Feito isso, navegue até a barra de ações e clique em "Salvar e visualizar", pronto!
você acaba de realizar com sucesso sua primeira alteração no sistema. Agora, refaça esse processo
e coloque o antigo nome na página de novo.
Vamos agora verificar como funciona o botão visualizar da nossa barra de ações. Antes de seguirmos
nesse processo, certifique-se de que o seu navegador não irá bloquear a janela gerada pelo sistema.
Caso você esteja utilizando o Mozilla Firefox, navegador que indicamos, siga as seguintes instruções:
Na barra de ferramentas do firefox, clique em Opções.
Ele irá abrir a seguinte janela, clique em "conteúdo". Caso a opção "bloquear janelas
pop up" esteja marcada, desmarque-a.
Depois de realizar esse processo, volte até a barra de ações e clique no botão "visualizar". Uma
nova aba, ou janela será aberta, dependendo das configurações do seu navegador, porém essa
não será uma aba de navegação interna do Sistema, e sim uma nova aba no seu navegador da
internet, como uma nova página.
O conteúdo dessa nova página que foi aberta, é o seu web site. Isso mesmo, você não precisou
digitar uma única linha de código de programação e seu web site já está pronto. Sempre que você
realizar alguma alteração no seu site, ou programar um novo elemento pode utilizar esse recurso
para visualizar o resultado. Essa, com certeza será uma das ferramentas do Sistema que você
utilizará com muita frequência.
Ainda na barra de tarefas ao lado do botão "visualizar", você encontrará o botão "atualizar" que
assim como o botão fechar, ele possui uma função semântica. Ao clicar nesse botão, você estará
solicitando ao Sistema que ele atualize-se, essa ação tem como objetivo receber os últimos dados
que tenham sido enviados para o servidor do sistema, da mesma forma que você atualiza uma
página na internet ou sua caixa de e-mails, por exemplo.
Os botões restantes da barra de ações chamados "Propriedades" e "Usuários e grupos" são tópicos
mais avançados e não serão abordados nesse momento.
4 Sub Abas (sub abas de navegação)
Localizado logo abaixo da barra de ações, você encontrará um conjunto de sub-abas, as
abas inferiores.
Das quais nesse capítulo abordaremos apenas "Artigos", "Página Inicial", "Sub-Páginas" e "Css".
A primeira aba da esquerda para a direita ‚ a aba de "Artigos". Todas as páginas disponíveis
na sua árvore de conteúdo possuem uma sub-aba, chamada "Artigos".
Essa aba, é responsável pelo armazenamento e também pela criação dos artigos do nosso site
em geral. Nesse momento nós iremos conhecer essa aba e seu funcionamento, mas não iremos
criar nenhum artigo pois reservamos um capítulo especialmente para tratar dos artigos, abordando
esse tema com mais pro fundida posteriormente.
Aba Artigos
Agora clique na aba "Artigos", a primeira da esquerda para a direita no conjunto de
sub-abas, logo abaixo da barra de ações, conforme mostra a imagem abaixo
Repare que a sub-aba "Artigos" está divida em mais três sub-abas: "Na editoria", "Busca na editoria"
e "Artigos na editoria". Essas abas servem para mostrar no sistema listas de artigos em diferentes
situações, vamos verificar cada uma delas.
A aba "na editoria", exibe somente os artigos que pertencem a editoria e que estão publicados no site.
Agora clique na aba chamada "busca na editoria", você deverá visualizar um campo com o título "texto livre"
(veja na figura abaixo) onde é possível digitar um título, trecho ou palavra chave de um artigo. É essa
aba que iremos recorrer sempre que quisermos localizar algum artigo armazenado no nosso sistema.
Também é possível encontrar um artigo navegando na editoria onde ele foi criado, e procurar manualmente
na aba "Artigos na editoria", mas a ferramenta de busca acaba sendo mais eficaz e mais adequada.
Por último, clique na terceira aba chamada "artigos na editoria". Essa aba exibe todos os artigos
que nós temos armazenados em uma determinada editoria, independentemente de eles estarem
publicados no nosso site ou não. Não se preocupe se você ainda não sabe como publicar um artigo,
nós iremos abordar esse tema dentro de alguns capítulos.
Sub-páginas
Bem, a aba de sub-páginas funciona como uma extensão auxiliar para a árvore de conteúdo. Todas
as páginas e editorias do Sistem, possuem uma aba de sub-páginas, e é através dessa aba que podemos
verificar se uma determinada página possui alguma sub-página dentro dela. Acompanhe o exemplo
conforme a imagem a seguir.
Vá até a árvore de conteúdo e clique na página do topo da árvore, que no nosso caso é "Jornal exemplo"
e depois disso, na aba de navega„•o de "Jornal exemplo" clique na aba chamada "sub-páginas". Repare
que o conteúdo dentro desta aba é exatamente o mesmo conteúdo da árvore de conteúdo.
E agora, vá até árvore de conteúdo do seu site e clique em uma página qualquer a sua escolha, contanto
que não seja a página do topo da árvore. Repare que o Sistema irá abrir uma nova aba de navegação,
com o nome da página que você clicou. Pois bem, feche a aba que você acabou de abrir e volte para a
aba da página principal, clique em sub-páginas e clique no ícone de uma página qualquer. Repare que
o Sistema também irá abrir uma nova aba com o nome da página que você clicou, da mesma forma que
ele fez quando você clicou em uma página na aba de conteúdo.
CSS
Ainda no menu das sub-abas, vamos agora verificar a aba chamada "css". As CSS são propriedades
estáticas e estruturais de uma página web. A aba "css" contém o arquivo CSS do seu web site. Caso
você não tenha o conhecimento técnico necessário para o manuseio das CSS, você não deve editar o
conteúdo dessa aba, mas caso queira realizar alguma alteração solicite ajuda do nosso suporte técnico
Web, e teremos satisfação em ajudá-lo.
Caso você possua o conhecimento técnico necessário e queira escrever suas próprias regras CSS ,
siga as seguintes instruções:
Clique na aba "CSS". Assim que aba estiver aberta, você irá visualizar dois ícones de folhas CSS. Uma
chamada "CSS estrutural" e outra chamada "css customizado". Você deve escrever as suas regas CSS
na folha "CSS customizado", assim todas as alterações que você fizer irão prevalecer, mas o CSS
original ainda continuara preservado por segurança.
Página Inicial
Vamos agora abordar a aba da nossa página inicial, essa é sem dúvidas uma das partes mais
importantes dessa apostila. Entendendo o conceito de página inicial você estará apto para desfrutar de
todas as vantagens que o Sistema tem a oferecer. A página inicial está‚ divida em três abas: Conteúdo
Dinâmico, Conteúdo Fixo e Artigos Compartilhados.
Como os nomes das abas sugerem, a aba de conteúdo fixo é responsável por todo o conteúdo estático da
página, aqueles conteúdos que independente das ações do usuário dentro do site continuarão presentes
na página. Esses elementos geralmente possuem conteúdos fundamentais do site, e por isso são fixos.
Por exemplo menus, conteúdos institucionais, propagandas tec..
Já o conteúdo dinâmico é exatamente o contrário do conteúdo fixo. O conteúdo dinâmico é onde o
usuário tem total liberdade dentro do site, acessando todos os conteúdos de seus interesse. Como
notícias de uma determinada editoria, fotos, enquetes e etc...
Conteúdo Dinâmico
Agora que nós já temos uma noção do posicionamento dos conteúdos fixos e dinâmicos na nossa
página, vamos analisar como elementos funcionam através do nosso gerenciador de conteúdos.
Ao clicar na aba "Conteúdo Dinâmico", dentro da "Página Inicial" você verá um conteúdo semelhante
ao da imagem a seguir.
Essa é visão que você terá do conteúdo dinâmico da página internamente no Sistema. E todos
elementos contidos nessa aba equivalem a um conteúdo na página inicial do seu site. A ordem que
esses elementos estão exibidos no sistema é exatamente a mesma ordem que eles serão exibidos
na sua página. Portanto, a ordem que eles estão armazenados no Sistema é importante porque influencia
na aparência do seu site.
Nota: Por padrão todo elemento criado por último no Sistema assume o topo da lista de conteúdo, e
consequentemente estará posicionado no topo da sua página ou do elemento na página a qual ele pertence.
TrT
iria
lla
Observe que nós temos nessa ordem, de cima para baixo, os seguintes elementos no Conteúdo
Dinâmico: Destaques superiores, Três Colunas, Destaque de Imagens e por último a Publicidade.
Mostraremos com uma ilustração, de que forma os elementos são distribuídos no site.
Conte€do Fixo
O conte•do fixo ‡ formado pelas ˆreas do site que s…o pouco alteradas, assim como o topo do site,
a coluna da direita e o rodap‡. Para chegarmos at‡ ele, temos que estar dentro da pˆgina inicial do site,
e selecionar a aba 'conte•do fixo'.
Essa ˆrea no topo do site, contornada pela cor azul ‡ chamada de conte•do do cabe„alho. Ela ‡
ideal para abrigar menus e logotipos, e at‡ mesmo algumas mat‡rias.
Coluna da Direita: A coluna da direita ‡ essa ˆrea delimitada pelo ret‚ngulo da cor preta. ‰ uma
excelente op„…o para pequenas publicidades, redes sociais, enquetes, lembretes enfim, conte•dos
importantes mas n…o muito extensos.
Rodap‡: Essa ˆrea mais abaix, marcada pela cor verde ‡ denominada rodap‡. O rodap‡ em geral
abriga informa„Šes institucionais e de contato. Tabe‡m pode conter algum menu de navega„…o.
Inserindo o Logotipo
Para inserirmos um logotipo no nosso site, clicamos na aba "conteúdo fixo" e vamos até a área
Conteúdo Cabeçalho, dentro desta área selecionaremos na combo o elemento de imagem, e em seguida
clicaremos no botão criar. Este irá abrir em uma nova aba que será nossa tela de criação do logotipo.
No campo "imagem", selecionaremos dentro do nosso sistema o logotipo desejado e clicaremos no
botão enviar, para mandar a imagem para o sistema. Preenchemos então os campos de identificação
tais como Nome, Autor, Contato, Licença da URL e também definimos o tipo de link para a imagem,
ou seja, você pode escolher se ao clicar no logotipo o usuário será direcionado para a home do site
ou para algum outro link externo.
Pronto, feito isso clique no botão inserir e seu logotipo já estará na página principal do seu site.
Criando o Menu
Para inserirmos um Menu no nosso site, clicando na aba "conteúdo fixo" vamos até a área chamada
Conteúdo do Cabeçalho. Dentro desta área selecionaremos na combo o elemento de Menu e em seguida
clicaremos no botão criar. Este irá abrir em uma nova aba, que será nossa tela de criação do menu.
Preenchemos o campo nome para identificar o menu dentro do sistema. O menu é basicamente composto
por links, então na nossa combo de seleção de elementos escolheremos o "link". Este mesmo irá ser aberto
em uma nova aba onde preencheremos as informações do mesmo.
Colocamos o nome, lembrando que o mesmo será o que irá aparecer no site. Selecionamos se este link
será interno para 'linkar' com alguma editoria do nosso site, ou externo para ser redirecionado a uma
pagina fora do nosso sistema. No campo URL, iremos preencher com o endereço do link.
O campo título servirá para que quando o usuário pare o mouse em cima do link, ele apareça em uma
Caixa de texto com o título. Feito isso podemos, apertar no botão inserir e logo em seguida na aba do
Menu, apertar inserir para salvarmos o mesmo.
Publicidade na Coluna da Direita
Para inserirmos a publicidade na coluna da direita, precisamos estar na página inicial e entrar na aba
"conteúdo fixo". Dentro da aba conteúdo fixo, encontramos três divisões (Conteúdo Cabeçalho - Conteúdo
Coluna da Direita - Conteúdo Rodapé). Vá até a divisão da Coluna da Direita e crie o elemento Publicidade.
Quando criamos o elemento publicidade, uma nova aba se abre com apenas um campo para colocar o
nome, e outro campo para criar o elemento que você vai usar como publicidade (imagem, gif, flash...).
Suponhamos que a publicidade que você vai utilizar é uma imagem, então dentro da combo de elementos,
crie o elemento imagem, após isso a aba de imagens abrirá no Sistema. Primeiro selecionamos a imagem
desejada e após isso clicamos no botão enviar, como mostra na imagem abaixo
Após enviar a imagem para o Sistema, precisamos OBRIGATÓRIAMENTE preencher o campo do
nome. Ainda podemos escolher se essa imagem será um link. Nesse caso, temos que ir ao último campo
onde diz 'Tipo de Link', e selecionar a opção entre as três que existem (Sem link, link externo e link interno).
Caso o link que você quer colocar seja externo, basta copiar o url do site e colar lá. (atenção, o url tem que
estar nesse formato https://www.google.com.br). Se você escolheu colocar um link interno, basta clicar no
campo navegar que irá abrir e encontrar e selecionar o que você quer que apareça quando clicar na imagem.
Após feitas essas alterações, basta clicar no botão salvar e fechar ou se ainda quer ficar com a página
aberta, clique em salvar e visualizar.
Divisor de Guias
O elemento de guias, como é mais conhecido, está no Sistema com o nome de Tabulação. Selecione o
local onde você quer criá-lo, em seguida abra a combo de elementos e crie a Tabulação. Após isso, uma
nova aba abrirá como podemos ver na imagem.
Após criado o elemento, preencha o campo do nome (lembrando que esse nome aparecerá apenas
dentro do Sistema) e escolha a quantidade de guias que a tabulação terá. Após escolhido o número de
guias, preencha o campo do nome de cada uma (esse nome é o que aparecerá no site). Feito isso, basta
escolher qual elemento você criará dentro da tabulação. Após terminar esse passo, não esqueça de clicar
em 'Inserir', e depois clicar em 'Salvar e visualizar'. A sua tabulação deve terminar conforme a ilustração
abaixo.
Enquete
Agora vamos mostrar como se cria o elemento Enquete. Ele pode ser criado em qualquer lugar, mas
o nosso exemplo será dado dentro do conteúdo fixo, na coluna da direita. Após entrar no conteúdo fixo,
escolha na combo de elementos a Enquete. Uma nova aba abrirá, no campo Nome, coloque a nomeação
que você quer que a enquete tenha no Sistema.
No campo Questão, nós formulamos a pergunta da enquete. O campo resposta, pode ter a quantidade que
quiser. Para alterar a quantidade, coloque o número de respostas que você quer e clique no botão
'Definir Quantidade', conforme a imagem abaixo
Colocadas as respostas, o elemento enquete está pronto para ser usado, basta clicar no botão
'salvar e visualizar'.
Busca
Agora mostraremos como inserir o elemento de busca. Dentro do conteúdo fixo, na divisão da Coluna
da direita, selecione o elemento Busca. Após criado o elemento, complete o campo Nome (lembrando
que esse nome é o que vai aparecer apenas no Sistema). Feito isso, basta selecionar o seu site dentro
do campo "Departamento de pesquisa", como mostra na imagem abaixo.
Após fazer esses passos, não se esqueça de clicar em 'Inserir', e logo após feito isso clicamos em
'Salvar e visualizar'.
Artigo
Agora vamos mostrar como se insere um artigo no nosso site, para ir montando a página inicial. Entre
na editoria que você escolheu para criar o artigo. Na aba artigos, clicamos no botão 'criar'. Feito isso o
sistema abrirá uma nova aba, onde criaremos o nosso artigo. O primeiro campo que aparece é o campo
do Título, coloque o título do seu artigo ali. Logo embaixo, temos o campo 'Principal' que é a mesma coisa
que um resumo do artigo, o preenchimento desse campo não é obrigatório, mas aconselhamos vocês a
sempre colocar resumo nos artigos.
No campo texto, escrevemos o artigo. Você pode escrever direto neste campo, ou se o seu artigo está
digitado em um documento do Word, clique no botãozinho que tem um símbolo do Word. Após isso um
quadro se abrirá, como mostra na imagem abaixo.
Cole o texto que você criou nesse quadro e após isso clique em OK. Feito isso, preencha o campo
onde diz "Autor". Agora mostraremos como colocamos uma imagem dentro do artigo. Clique no botão
'Criar nova imagem' que localiza-se no canto direito superior. Após isso, abrirá uma nova aba de imagem,
como já vimos anteriormente. Selecione a imagem, clique no botão enviar e preencha o campo do nome
da imagem. Após fazer esses passos, clique no botão 'Inserir' que fica na parte superior da aba.
Note que uma miniatura da imagem que você acabou de inserir apareceu no canto direito da tela, na
área da 'Imagens da Galeria'. Siga os passos da imagem agora para tornar essa imagem a imagem
principal.
Após clicar em inserir, a tela voltará para a aba Artigos dentro da editoria que você escolheu. Clique
em salvar e visualizar, para finalizar a criação do artigo.
Agora mostraremos como publicamos o artigo. Para publicar existem duas opções, mostraremos
primeiro a forma mais simples. Após finalizar a criação do artigo, note que na parte inferior existe um
botão que diz 'Inserir artigos nas áreas', não clique nele ainda, note que abaixo do botão há uma lista.
Esta lista refere-se a cada divisor de coluna e a cada destaque do seu site, portanto é importante que
você saiba se achar nos divisores de coluna. Após selecionar o destaque que você quer colocar o novo
artigo, clique no botão 'Inserir artigo nas áreas', como mostra a imagem abaixo
Esta é a maneira menos trabalhosa de publicar um artigo, mas nesse modo é definitivamente
importante que você conheça muito bem cada divisor de colunas do seu site.
Outra maneira de publicar um artigo, é copiando o mesmo para a paleta. A cópia do artigo para a
paleta é muito simples, basta estar dentro do artigo e na parte superior da página clicar no quadrado
que possui "duas folhas", como mostra na imagem a seguir.
*Note que se você deixar o mouse em cima do quadrado, aparecer„ escrito a opção de copiar para
a paleta*
Feito isso, temos que sair da página do artigo, e entrar no destaque que você escolheu para
publicar o artigo. Dentro do destaque, clique em editar que encontra-se na parte superior da tela, e
logo em seguida vá ao campo que está destinado aos Artigos. Note que do lado desse campo, aparecem
dois quadrados, um com uma tesoura e o outro com uma pastinha amarela.
Se você deixar o mouse em cima da pasta amarela, notará que aparecerá o texto "Colar". Clique
neste quadrado que você vai colar o artigo que estava copiado na paleta. Não esqueça de clicar em salvar
visualizar/salvar fechar após terminado isso.
Destaques
Destaque. O destaque é um dos elementos mais utilizados no nosso Sistema, é ele que da forma ao
artigo publicado no site. O lugar mais comum para criar um destaque, é dentro de uma coluna do divisor
de colunas, portanto para criar ele temos que entrar no divisor de colunas que você quer que tenha os
artigos, clicar na combo de elementos e criar o destaque. Após isso, abrirá uma nova aba com diversos
campos.
Se você seguiu os passos e criou o destaque dentro de um Divisor de Colunas, a tela do
seu computador deve estar igual a imagem de cima.
O primeiro campo é reservado para colocar o nome do destaque (nome que só aparece no sistema).
Embaixo desse campo, temos a 'Cartola' e a 'Editoria', que servem para "organizar" os conteúdos dentro
do site (por exemplo: editoria Esportes). Embaixo desses elementos, encontramos três quadros para
preencher.
O primeiro, 'Quantidade máxima de artigos', serve para determinar o número máximo de artigos que
pode ser colocado naquele destaque, você pode escolher quantos artigos quiser. Abaixo dele, temos o
quadro da 'Quantidade de artigos por página', nele decidimos o numero de artigos que aparecerão por
página, ela pode ser maior ou menor do que a 'Quantidade máxima de artigos'.
A 'Quantidade máxima de artigos Descartados', serve para tirar automaticamente do destaque os artigos
mais antigos, deixando sempre limpo o destaque.
*A quantidade máxima de artigos pode ser maior do que a quantidade de artigos por página, por
exemplo: Coloquei 10 artigos na quantidade máxima, e apenas 5 artigos na quantidade por página.
No site mostrarão os 5 primeiros artigos, e embaixo do último artigo aparecerá o elemento de paginação,
com um botão para mostrar os outros 5 artigos.*
Abaixo dessas opções do destaque, temos a parte destinada aos artigos. Na opção 'Artigos', como
vimos anteriormente, é destinada a colar os artigos que você quer que apareça. Basta ter ele copiado
na sua paleta, e colar no quadrado amarelo.
O campo 'Artigos sub-destaques' é destinado aos artigos que estão abaixo do artigo principal, ela serve
para aqueles artigos que não tem a maior importância, ou para artigos que sejam relacionados ao artigo
principal. O procedimento para colocá-los é o mesmo do campo 'Artigo'.
A 'Fila de Publicação' tem a função de colocar artigos "automaticamente" no destaque. Para usar esse
elemento, temos que selecionar dentro do campo a 'Fila de Publicação por Editoria'. Essa Fila de
Publicação por Editoria funciona da seguinte maneira, você cria o seu artigo na editoria que quer, e o
destaque automaticamente busca os últimos artigos criados e os coloca no destaque.
Quando selecionamos a Fila de Publicação por Editoria e clicamos em criar, uma nova aba abrirá com
um campo destinado ao nome (esse nome só aparece dentro do sistema, e não no site), após nomear a
fila de publicação, veja que na 'Divisão para pesquisa' terá um campo com o seu site e com suas editorias,
selecione a editoria que você quer que os artigos sejam "puxados" (no nosso exemplo usamos a editoria
'geral') e depois clique em Inserir.
Na área destinada a 'Renderização do destaque' e 'Renderização dos artigos', podemos decidir o que
o destaque terá. Podemos fazer as combinações de deixar o artigo sem resumo, só com o título, com ou
sem imagem, sem editoria, e assim por diante. Basta clicar no 'X' vermelho que fica no lado direito dos
elementos.
Customizando os elementos do destaque
Vamos verificar os elementos de renderização do destaque, começando pela cartola (a editoria, resumo
e título possuem as mesmas configurações da cartola).
Clicamos no elemento de cartola que irá abrir em uma nova aba. Dentro dessa aba após clicar em
editar, vamos preencher os campos necessários. O campo "Fonte Tamanho" diz respeito ao tamanho
da fonte que será exibida na cartola do seu site. Basta apenas informarmos o número sem a necessidade
de colocarmos a unidade pixels (px) no final do campo.
No campo "Fonte Cor" podemos colocar a cor em formato Hexadecimal(#FFFFFF) ou clicarmos no
botãozinho ao lado do campo, do qual abrirá uma paleta de cores para selecionarmos. Nas opções,
negrito, itálico e sublinhado, apenas é necessário marcarmos os campos com um clique na opção desejada.
No campo "Margem topo" e "Margem rodapé", novamente preenchemos com um valor sem a unidade
no fim, para escolhermos o espaçamento entre este elemento e os demais da página. No campo "Padding
topo" "Padding rodapé", escolhemos também um valor de margin interna para o elemento em questão.
E por fim, escolhemos o espaço do entrelinhamento do texto, este também sem a unidade pixels (px)
no fim.
Paginação
Agora vamos ver o elemento de paginação do Sistema; Clicando em paginação, uma nova aba será
aberta. Dentro da aba de paginação, clique no botão editar para que possamos escolher os itens a serem
alterados.
O primeiro campo "nome", corresponde ao nome de identificação do elemento. No segundo campo
"número de páginas", você irá optar por mostrar ou não o número de páginas contidas no destaque. No
campo "Formato Primeira", você irá selecionar o tipo de botão que será exibido ou não, caso marque "não
mostrar". Você poderá definir entre mostrar o texto "Primeira" ou uma imagem ilustrativa. Mesma coisa
irá ocorrer no campo "Formato Última", você irá selecionar o tipo de botão que será exibido ou não, caso
marque "não mostrar". Você poderá definir entre mostrar o texto "Última" ou uma imagem ilustrativa.
No campo formato anterior e formato próxima, você também vai escolher de qual forma será exibido o
comando de passar as páginas da paginação. Você pode escolher entre não mostrar, mostrar um texto
escrito por exemplo 'Próxima e Anterior' ou apenas um botão. No campo tempo de rotação, o usuário deverá
preencher caso queira que a paginação troque automaticamente, basta apenas definir o tempo para que
isso aconteça.
Imagens
Vamos agora modificar o corte da imagem dentro do nosso destaque. Clicando no elemento imagem,
irá abrir uma nova aba. Nesta nova aba aberta, vamos no campo corte onde podemos verificar que
existem v€rios cortes pré definidos para sua foto. Basta escolher uma das opções e clicar no botão salvar,
e sua foto já estará redimensionada.
Se após você ler todo o nosso polígrafo, e mesmo assim continuar com qualquer tipo de
dúvida, entre em contato com o nosso suporte on-line pelos endereços:
SKYPE: suporteweb.suita
MSN: [email protected]
E-MAIL: [email protected]
Telefone SC: (48) 3025- 6606
Telefone POA: (51) 3022-3006
-Todos os direitos reservados a Suita Sistemas Soluções em Softwares LTDA www.suita.com.br