Instituto Brasileiro de Informao

ibict em Cincia e Tecnologia

Customizando
Customizando a Revista
Com o crescimento da comunidade de usurios do sistema SEER (OJS), a
necessidade de customizar individualmente as revistas que utilizam este
software livre se tornou premente. Este documento oferece uma viso geral
de como customizar uma revista, incluindo:

Alterao de cores de fundo e fontes

Alterao de cabealho

Incluindo uma imagem para cada edio

Incluindo links de navegao

Publicando Notcias e Novidades

Integrando Blogs, Wikis, Foruns entre outros

Incluindo uma interface multilnge

Incluindo uma pgina de abertura (Splash Screen)

Incluindo suporte a MP3

Alterando Cores de Fundo e Fontes

Uma instalao nova do sistema possui uma folha de estilo padro, com uma
variedade de escolhas de cores e fontes.

Figura 1: Layout padro do sistema

Customizando o SEER 2.x 1

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

No entanto, pode-se preferir customizar a revista, tornando-a mais atrativa,

diferenciando-a de outras instalaes padro. Algumas alteraes simples
so alterar a cor de fundo e as fontes.

Perceba a alterao abrangente realizada para a revista Critical Studies in

Improvisation (http://www.criticalimprov.com/):

Figura 2: Customizao de cor

Para alcanar este efeito, necessrio ter acesso ao arquivo de folha de

estilos. Este documento est disponvel na pasta styles do sistema, na raiz do
cdigo fonte. Abra o arquivo common.css
common.css. Este o arquivo padro para uma
instalao do sistema.

Para alterar a cor de fundo e a fonte, procure esta parte do cdigo:

body {
margin: 0;
padding: 0;
background-color: white;
color: #111;
font-family: Verdana,Arial,Helvetica,sans-serif;
}

O comando background-color: white; permite alterar a cor padro, como

branco. Poderia ser informado o valor hexadecimal para branco: #FFFFFF, por
exemplo.

O comando color: #111; permite alterar a cor da fonte da revista. Neste

exemplo, a abreviao do cdigo hexadecimal foi utilizada, pois os pares de

Customizando o SEER 2.x 2

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

valor #RRGGBB (2 pares de vermelho, verde e azul, respectivamente) so

repetidos.

O comando font-family: Verdana,Arial,Helvetica,sans-serif; permite

alterar a fonte da revista para Times New Roman, por exemplo.

Concludas as alteraes, pode-se enviar a nova verso do arquivo

common.css de volta atravs de acesso direto ao servidor via ftp/ssh ou
envi-lo atravs da interface do sistema, como Editor Gerente (veja
Configurao, Passo 5 - Visual).

Figura 3: Enviando a folha de estilos

Caso possua conhecimento profundo da tecnologia CSS, sero possveis

alteraes radicais ao layout da revista.

Alterando o Cabealho

Outra alterao a ser considerada a incluso de um cabealho exclusivo

revista. Este exemplo da revista Acadiensis
(http://dev.hil.unb.ca/Texts/ojs2/index.php/Acadiensis):

Figura 4: Incluindo um cabealho prprio

Customizando o SEER 2.x 3

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Esta alterao realizada pelo Editor Gerente, no passo 5 Visual de

Configurao da revista, enviando uma imagem atravs do formulrio:

Figura 5: Incluindo imagens e cabealho exclusivo

Esta imagem aparecer no topo de todas as pginas da revista.

Incluindo uma Capa para cada Edio

Outro aprimoramento incluir uma capa para cada edio da revista. Isto
requer, obviamente, acesso a esse tipo de recurso.

A revista Postcolonial Text (http://postcolonial.org/) utiliza bastante este

recurso:

Figura 7: Capa da edio V. 2 N 2 2006

Figura 6: Capa da edio V. 2 N 1 2006

Estas imagens foram enviadas na criao da edio pelo Editor, em Criar

Edio:
Customizando o SEER 2.x 4
 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Figura 8: Enviando uma capa

Incluindo Itens de Navegao

Outro melhoramento no sistema a possibilidade de incluso de links

adicionais barra de navegao padro. A revista Copenhagen Journal of
Asian Studies (http://ej.lib.cbs.dk/index.php/cjas) incluiu links para o Centro
de Pesquisas Asiticas:

Figura 9: Incluindo links na barra de navegao

Estes links podem ser includos pelo Editor Gerente, no passo 5 Visual de
Configurao da revista:

Figura 10: Incluindo links de navegao adicionais

10: Incluindo

Customizando o SEER 2.x 5

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Vrios links novos podem ser includos na barra de navegao, apontando

para um arquivo no servidor ou uma URL externa.

Incluindo Avisos e Novidades

A pgina inicial da revista pode conter o Sumrio da ltima edio, ou pode

ser utilizada como espao para comunicao com os leitores, para anunciar
novidades sobre a revista, como a chamada para submisses:

Figura 11:
11: Avisos e Novidades publicados na pgina inicial da revista

Estes avisos podem ser includos pelo Editor Gerente, no passo 5 Visual de
Configurao da revista:

Figura 12:
12: Incluindo Avisos e Novidades na pgina inicial da revista

Customizando o SEER 2.x 6

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Integrando
Integrando Blogs, Wikis,
Wikis, Foruns entre outros

Um uso interessante para links adicionais na barra de navegao incluir

links para blogs ou wikis, permitindo uma interao maior com os leitores, e
o desenvolvimento de uma comunidade virtual. A revista Copyright
(http://www.copyrightjournal.org) utilizou este recurso extensivamente,
incluindo blogs, Foruns e muito mais:

13: Barra de navegao com links adicionais

Figura 13:

Incluir estas opes torna a experincia da leitura muito mais interativa.

Incluindo uma Interface Multilnge

O sistema possui atualmente maior suporte para a interface em vrios

idiomas, incluindo Ingls, Espanhol, Francs e Portugus, entre outros.
Outras tradues tambm esto a caminho para lanamento em breve. Isto
permite aos usurios navegar na revista com todos os links, grande parte do
texto, e ajuda do sistema no seu idioma nativo.

A revista pode ser em um nico idioma, em qualquer dos idiomas disponveis

no sistema, ou pode-se torn-la multilnge, ativando um menu de idiomas:

Customizando o SEER 2.x 7

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Figura 14:
14: exemplo de interface multilnge

Para isto, o Administrador do Sistema dever primeiro definir os Idiomas, na

Administrao do Portal. Neste ponto, o Administrador dever instalar os
idiomas disponveis e marcar os desejados para utilizao na revista.

Figura 15:
15: Instalando
Instalando idiomas na administrao do portal

Customizando o SEER 2.x 8

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Em seguida, o Editor Gerente dever ativar todos os idiomas desejados, na

seo de Idiomas na Administrao da Revista:

Figura 16:
16: Idiomas na administrao da revista

Incluindo uma pgina de abertura (Splash Screen)

Outro recurso visual possvel adicionar uma pgina de abertura, que pode
aparecer antes dos leitores acessarem a revista. Cosmos and History
(http://www.cosmosandhistory.org) oferece um timo exemplo deste
recurso:

Figura 17:
17: Exemplo de pgina de abertura

Customizando o SEER 2.x 9

 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Para isto, basta criar uma pgina index.html com o contedo desejado e
adicionar um link para a pgina inicial da revista. Neste caso, o link enter
site.

Incluindo suporte a MP3

Uma customizao inovadora da revista The International Review of Research

in Open and Distance Learning (http://www.irrodl.org/) a incluso de
verses em udio dos seus artigos, com arquivos MP3:

Figura 18:
18: Incluindo arquivos de udio

Os arquivos de udio foram gravados fora do sistema, porm enviados como

documentos suplementares a cada submisso. Neste caso, a tarefa ficou a
cargo do Editor de Seo, na pgina de Resumo da submisso:

Figura 19:
19: Incluindo arquivos suplementares

Os arquivos tambm poderiam ser enviados pelo autor, como parte do

processo de submisso.
Customizando o SEER 2.x 10
 Instituto Brasileiro de Informao
ibict em Cincia e Tecnologia

Para saber mais sobre o sistema, visite a pgina oficial disponvel

(http://pkp.sfu.ca), leia o OJS Technical Reference e o OJS em uma Hora,
alm de navegar o frum de suporte on-line.

Customizando o SEER 2.x 11