BIREME / OPAS / OMS -...

BIREME / OPAS / OMS

Centro Latino-Americano e do Caribe de Informação em Ciências da Saúde

Metodologias da BVS

Guia de Desenho Gráfico da BVS

Versão 4.0

Sao Paulo - Março 2008

Copyright © Março 2008 - BIREME / OPAS / OMS

Guia de Desenho Gráfico da BVS

É garantida a permissão para copiar, distribuir e/ou modificar este documento sob os termos da

Licença de Documentação Livre GNU (GNU Free Documentation License), Versão 1.2 ou

qualquer versão posterior publicada pela Free Software Foundation; sem Seções Invariantes,

Textos de Capa Frontal, e sem Textos de Quarta Capa. Uma cópia da licença é incluída na seção

intitulada "GNU Free Documentation License".

Ficha Catalográfica

BIREME / OPAS / OMS (Brasil)

Guia de Desenho Gráfico da BVS. / BIREME / OPAS / OMS.

Sao Paulo : BIREME / OPAS / OMS, Março 2008.

49 p.

1. Manual do usuário. 2. Acesso à informação. 3. Sistemas

de informação. 4. Gerenciamento de informação. 5.

Saúde Pública. 6. Serviços de saúde. I. BIREME II. Título

Advertência - A menção a companhias e/ou instituições específicas ou a certos produtos não

implica que estes sejam apoiados ou recomendados por BIREME / OPAS / OMS, e não significa

que haja preferência em relação a outros de natureza similar, citados ou não.

BIREME / OPAS / OMS

Centro Latino-Americano e do Caribe de Informação em Ciências da Saúde

Rua Botucatu 862 V Clementino

Este documento foi produzido com a Metodologia para Normalização de Documentos (NorDoc) desenvolvida pela BIREME.

Conjunto de documentos da metodologia

A série completa é composta de 4 documentos, sendo:

1. Guia da BVS 2. Manual para administração do BVS-Site 3. Guia de Desenho Gráfico da BVS

4. Guia de navegabilidade e usabilidade da BVS

I

Sumário

Conjunto de documentos da metodologia ................................................................ I Lista de ilustrações, quadros e tabelas...................................................................IV Abreviaturas utilizadas ......................................................................................VI Como usar este manual .................................................................................... VIII Prefácio ..........................................................................................................1

Sobre a Bireme ...............................................................................................1 Sobre a BVS ...................................................................................................2

Introdução .......................................................................................................4 Sobre o desenho gráfico ......................................................................................5

A Metáfora.....................................................................................................5 A Biblioteca de Babel ....................................................................................5

O logotipo da BVS ............................................................................................6 A Interface da BVS .............................................................................................7

Arquitetura do Portal BVS ..................................................................................7 Web standards.............................................................................................8 Acessibilidade da interface .............................................................................9 A navegação na BVS baseada em três tipos genéricos de páginas web...........................9

Tipo I ou Portal BVS.................................................................................. 10 Tipo II ou Portal de Coleção ou Galeria .......................................................... 11 Tipo III ou Página de Resultados ................................................................... 11

Instruções para personalização (básico)................................................................. 12 Estrutura dos arquivos e pastas no servidor ........................................................... 12 Estrutura das folhas de estilo ............................................................................ 14 Layout em psd .............................................................................................. 14 Troca do Logo............................................................................................... 14

Recorte da imagem ..................................................................................... 15 Carga (upload) da imagem ............................................................................ 15 Troca da imagem no ADMIN ........................................................................... 15

Troca do Banner............................................................................................ 17

II

Guia de Desenho Gráfico da BVS Sumário

Recorte da imagem ........................................................................................ 17 Carga (upload) da imagem................................................................................ 17 Configuração na CSS ....................................................................................... 18 Alteração no título ......................................................................................... 18

Configurando a CSS ..................................................................................... 20 Instituições .................................................................................................. 21

Alterando as Instituições .............................................................................. 21 Configurando a CSS ..................................................................................... 23

Configurações de fontes e cores......................................................................... 24 Configurações do rodapé.................................................................................. 26

Estrutura ................................................................................................. 26 Configuração da CSS.................................................................................... 28

Referências bibliográficas .................................................................................. 30 Glossário ....................................................................................................... 32 Anexo I (avançado) .......................................................................................... 35

Layout Fluido e Layout Fechado ......................................................................... 35 Configuração das Colunas................................................................................. 37

III

Lista de ilustrações, quadros e tabelas

Figura 1 - Arquitetura de processamento da BVS ..........................................................8

Figura 2 – Homepage do Portal Regional da BVS ......................................................... 10

Figura 3 - Estrutura de Diretórios do BVS Site............................................................ 13

Figura 4 – Diretórios a serem trabalhados................................................................. 13

Figura 5 – Etapas para a troca do Logotipo ............................................................... 16

Figura 6 – Troca do logotipo................................................................................. 16

Figura 7 – Localização do banner no código XHTML. .................................................... 18

Figura 8 – Substituição do banner na CSS ................................................................. 18

Figura 9 – Etapas a seguir para a alteração do título da Interface.................................... 19

Figura 10 – Inserindo um título ao BVS Site ............................................................... 19

Figura 11 - Localização do título no código XHTML...................................................... 20

Figura 12 – Mudança de cor do título na CSS styles...................................................... 20

Figura 13 - Exemplo de alterações de margens no título ............................................... 21

Figura 14 – Modificando as Instituições .................................................................... 22

IV

Guia de Desenho Gráfico da BVS Lista de ilustrações, quadros e tabelas

Figura 15 – Caixa de inclusão ou alteração das instituições............................................ 22

Figura 16 – Localização do campo Instituições no código-fonte. ...................................... 23

Figura 17 – Exemplo de ajustes de cores e fontes das instituições ................................... 24

Figura 18 – Seletores responsáveis pelas fontes na CSS. ................................................ 24

Figura 19 – Exemplos de definições de cores nos seletores ............................................ 25

Figura 20 – Definições de cores na CSS e resultado no site............................................. 25

Figura 21 – Etapa para a alteração do rodapé ............................................................ 26

Figura 22 – Selecionando a instituição responsável...................................................... 27

Figura 23 – Editando as informações do Rodapé ......................................................... 27

Figura 24 – Editando as informações em um editor de texto .......................................... 28

Figura 25 – Localizando a estrutura rodapé no código-fonte........................................... 28

Figura 26 – Editando as cores do rodapé na CSS ......................................................... 29

Figura 27 - Layout Fluido e Layout Fechado .............................................................. 35

Figura 28 – Modelo de layout fluido ........................................................................ 36

Figura 29 – Modelo de layout fechado ..................................................................... 36

Figura 30 – Modelo de layout fechado com aplicação de cor de fundo............................... 37

Figura 31 - Colunas ........................................................................................... 37

Figura 32 – Configuração das colunas ...................................................................... 38

Figura 33 – Modelo de redefinição dos valores das colunas ............................................ 38

Figura 34 – Modificação de cores das colunas na CSS ................................................... 39

Figura 35 – Demonstração de mudança de cores das colunas .......................................... 39

V

Abreviaturas utilizadas

BIREME. Centro Latino-Americano e do Caribe de Informação em Ciências da

Saúde.

BVS. Biblioteca Virtual em Saúde.

CGI. Common Gateway Interface.

CSS. Cascading Style Sheet [Folha de Estilo em Cascata].

HTML. HyperText Markup Language [Linguagem de Marcação de Hipertexto].

HTTP. HyperText Transfer Protocol [Protocolo de Transferência de Hipertexto].

OMS. Organização Mundial da Saúde.

OPAS. Organização Pan-Americana de Saúde.

RSS. Really Simple Syndication.

URL. Universal Resource Locator [Localizador Universal de Recurso].

VI

Guia de Desenho Gráfico da BVS Abreviaturas utilizadas

XHTML. eXtensible HyperText Markup Language [Linguagem de Marcação de

Hipertexto Extensível].

XML. eXtensible Markup Language [Linguagem de Marcação Extensível].

XSL. eXtensible Stylesheet Language [Linguagem de Folha de Estilo Extensível].

VII

Como usar este manual

Este manual está dividido em 3 (três) capítulos, dois dos quais dedicados aos conceitos e

normalizações utilizadas e um referente a customizações possíveis no nível básico. O anexo I

contém tópicos avançados em termos de customização e configuração.

A informação neste documento foi escrita como um guia genérico para auxiliar os usuários no

processo de customização de layout e estilos de forma a cumprir os requisitos de uma instância da

BVS. Não se pretende que seja um manual passo-a-passo e assume-se que o usuário tenha

conhecimento prévio básico tanto de XHTML como CSS, bem como controle avançado de web

design e layout.

VIII

Prefácio

Sobre a Bireme

A BIREME cumpre ano após ano sua missão como centro especializado em informação científica e

técnica em saúde para a região da América Latina e Caribe. Estabelecida no Brasil em 1967, com o

nome de Biblioteca Regional de Medicina (que originou a sigla BIREME), atendeu desde o

princípio à demanda crescente de literatura científica atualizada por parte dos sistemas nacionais

de saúde e das comunidades de pesquisadores, profissionais e estudantes. Posteriormente, em

1982, passou a chamar-se Centro Latino-Americano e do Caribe de Informação em Ciências da

Saúde para melhor expressar as suas funções orientadas ao fortalecimento e ampliação do fluxo de

informação científica e técnica em saúde em toda a região, mas conservou sua sigla.

O trabalho em rede, com base na descentralização, no desenvolvimento de capacidades locais, no

compartilhamento de recursos de informação, no desenvolvimento de produtos e serviços

cooperativos, na elaboração de metodologias comuns, foi sempre o fundamento do trabalho de

cooperação técnica da BIREME. É assim que o centro se consolida como um modelo internacional

que privilegia a capacitação dos profissionais de informação em nível gerencial e técnico para a

adoção de paradigmas de informação e comunicação que melhor atendam as necessidades locais.

Os principais fundamentos que dão origem e suporte à existência da BIREME são os seguintes:

acesso à informação científico-técnica em saúde é essencial para o desenvolvimento da saúde;

1

Guia de Desenho Gráfico da BVS Prefácio

a necessidade de desenvolver a capacidade dos países da América Latina e do Caribe de operar as fontes de informação científico-técnica em saúde de forma cooperativa e eficiente;

a necessidade de promover o uso e de responder às demandas de informação científico-técnica em saúde dos governos, dos sistemas de saúde, das instituições de ensino e investigação.

A BIREME, como centro especializado da Organização Pan-Americana da Saúde

(OPAS)/Organização Mundial da Saúde (OMS), coordena e realiza atividades de cooperação

técnica em gestão de informação e conhecimento científico com o objetivo de fortalecer e ampliar

o fluxo de informação científica em saúde no Brasil e nos demais países da América Latina e

Caribe como condição essencial para o desenvolvimento da saúde, incluindo planejamento, gestão,

promoção, investigação, educação e atenção.

O convênio que fundamenta a BIREME é renovado a cada cinco anos pelos membros do Comitê

Assessor Nacional da instituição (OPAS, Ministério da Saúde do Brasil, Ministério da Educação e

Cultura do Brasil, Secretaria de Saúde do Estado de São Paulo e Universidade Federal de São

Paulo – Unifesp). Esta última oferece a infra-estrutura física necessária ao estabelecimento da

instituição.

Em 2004 a instituição assumiu a responsabilidade de tornar-se uma instituição baseada em

conhecimento.

Sobre a BVS

Com o surgimento e consolidação da internet como meio predominante de informação e

comunicação, o modelo de cooperação técnica da BIREME evoluiu, a partir de 1998, para a

construção e desenvolvimento da Biblioteca Virtual em Saúde (BVS) como espaço comum de

convergência do trabalho cooperativo de produtores, intermediários e usuários de informação. A

BVS promove o desenvolvimento de uma rede de fontes de informação científica e técnica com

acesso universal na internet. Pela primeira vez abre-se a possibilidade real de acesso eqüitativo à

informação em saúde.

A BIREME tem a Biblioteca Virtual em Saúde como modelo para a gestão de informação e

conhecimento, o qual envolve a cooperação e convergência de instituições, sistemas, redes e

iniciativas de produtores, intermediários e usuários na operação de redes de fontes de informação

locais, nacionais, regionais e internacionais privilegiando o acesso aberto e universal.

2

Guia de Desenho Gráfico da BVS Prefácio

Hoje todos os países da América Latina e Caribe (Região) participam direta ou indiretamente dos

produtos e serviços cooperativos promovidos pela BVS, envolvendo mais de mil instituições em

mais de 30 países.

A BVS é simulada em um espaço virtual da internet formada pela coleção ou rede de fontes de

informação em saúde da Região. Usuários de diferentes níveis e localização podem interagir e

navegar no espaço de uma ou várias fontes de informação, independentemente de sua localização

física. As fontes de informação são geradas, atualizadas, armazenadas e operadas na internet por

produtores, integradores e intermediários, de modo descentralizado, obedecendo a metodologias

comuns para sua integração na BVS.

A BVS organiza a informação em uma estrutura que integra e interconecta bases de dados

referenciais, diretórios de especialistas, eventos e instituições, catálogo de recursos de informação

disponíveis na internet, coleções de textos completos com destaque para a coleção SciELO

(Scientific Electronic Library Online) de revistas científicas, serviços de disseminação seletiva de

informação, fontes de informação de apoio à educação e a tomada de decisão, notícias, listas de

discussão e apoio a comunidades virtuais.

O espaço da BVS constitui, portanto, uma rede dinâmica de fontes de informação descentralizada

a partir da qual se pode recuperar e extrair informação e conhecimento para subsidiar os

processos de decisão em saúde.

A Biblioteca Virtual em Saúde é visualizada como a base distribuída do conhecimento científico e

técnico em saúde registrado, organizado e armazenado em formato eletrônico nos países da

Região, acessível de forma universal na internet de modo compatível com as bases internacionais.

3

Introdução

O Guia de Interface BVS é parte integral da coleção de metodologias e tecnologias para a operação

das redes de fontes e fluxos de informação da Biblioteca Virtual em Saúde (BVS)

O guia têm o propósito de orientar o processo de desenho gráfico de sites da Biblioteca Virtual em

Saúde - BVS utilizando-se a ferramenta BVS-Site v4.0. O guia é resultado do conhecimento

acumulado nos últimos anos de desenvolvimento da BVS e segue o processo contínuo de

aperfeiçoamento do modelo e da plataforma tecnológica.

O adoção do modelo gráfico descrito no guia para a operação das interfaces nos portais e sítios da

BVS é recomendado considerando os seguinte aspectos:

• O modelo de interface e navegação proposto e mantido pela BIREME está fundamentado nos "Critérios Ergonômicos para Avaliação de Interfaces Humano-Computador"a e estão implementados de modo a facilitar e aumentar a eficiência da operação da BVS, assim como das redes complementares SciELO e ScienTI;

• Uma interface padronizada potencializa o cumprimento das tarefas típicas de localização de informação, particularmente em ambiente de rede de fontes de informação como é o caso da BVS;

• As dificuldades para a implantação deste modelo que venham a ser experimentadas poderão ser superadas com a cooperação técnica da BIREME por meio da sua Unidade de Desenho Gráfico e Interfaces (DGI/GA).

a Bastien JMC; Scapin D. Ergonomic Criteria for the Evaluation of Human-Computer interfaces. Institut National de recherche en informatique et en automatique, France, 1993.

4

Sobre o desenho gráfico

O universo visual expressa-se com códigos e significados, assim como o idioma e a linguagem

escrita. No mundo globalizado, múltiplas culturas, filosofias, técnicas, movimentos e escolas

emergem e estão refletidas na maneira com a qual os povos, as comunidades e os indivíduos se

expressam. Assim, embora este guia proponha um modelo gráfico bem determinado, a sua

concepção sugere que as características das culturas e contexto locais devem enriquecer os

elementos e soluções visuais do design da BVS.

A Metáfora

A Biblioteca de Babel

"El universo (que otros llaman la Biblioteca) se compone de un número indefinido, y tal

vez infinito, de galerías hexagonales, con vastos pozos de ventilación en el medio,

cercados por barandas bajísimas. Desde cualquier hexágono se ven los pisos inferiores y

superiores: interminablemente."

Em "A Biblioteca de Babel", o escritor Jorge Luis Borges descreve uma biblioteca infindável,

abrigando uma infinidade de livros. O texto de Borges exerce uma forte influência e foi fonte

inspiradora na criação do logo e da metáfora da interface gráfica da BVS.

5

Guia de Desenho Gráfico da BVS Sobre o desenho gráfico

O logotipo da BVS

O Hexágono é a forma básica que compõe o logotipo da BVS. Esta forma foi escolhida como a

representação gráfica dos fundamentos do modelo BVS de gestão de informação e conhecimento:

• Arquitetura baseada em 6 tipos de fontes de informação

• Conceito de descentralização na produção e operação das fontes e fluxos de informação produtos, serviços e eventos de informação

• O hexágono pode ser concatenado indefinidamente como uma colméia, sendo uma representação muito clara de trabalho cooperativo em rede

• Formação de redes.

No logotipo da BVS, estão distribuídos três hexágonos em distintos planos e posições que

procuram transmitir o conceito de que cada iniciativa da BVS representado por uma célula, pode

nascer, replicar-se e coexistir, independente do tema, espaço e tempo.

6

A Interface da BVS

Arquitetura do Portal BVS

A arquitetura de processamento de dados e informação da BVS está estruturada em 3 camadas

independentes e interoperantes. Na primeira camada encontram-se os arquivos de dados

correspondentes aos 6 tipos de fontes de informação da BVS. Sobre essa camada, estão os índices

de acesso que são gerados pelas aplicações da BVS e por outros serviços de indexação como por

exemplo, o ISIS, Collexis, Google, OAI, Yahoo, etc. Na última camada, estão as interfaces de acesso

à informação.

Cada uma das camadas é operada na BVS de maneira a compor a Rede de Fontes de

Informação, a Rede de Índices e a Rede de Interfaces.

A separação em camadas abre a possibilidade virtualmente infinita da produção de interfaces de

acesso ao conteúdo e a disponibilização do mesmo com formatação adequada às diversas

linguagens, serviços, mídias e dispositivos de acesso, tais como as telas de computador,

impressoras, dispositivos aurais, PDAs, celulares, etc.

7

Guia de Desenho Gráfico da BVS A Interface da BVS

Figura 1 - Arquitetura de processamento da BVS

Com a operação da Rede de Interfaces espera-se estimular a criação de uma rede de colaboração

no modelo de software livre que poderá explorar e compartilhar novas interfaces de acesso aos

conteúdos da BVS. Deste modo, facilita-se o uso das fontes de informação em inumeráveis

serviços.

Web standards

O Portal da BVS, na versão 4.0, passa a operar utilizando Web Standardsb e código XHTMLc

estruturado em tableless (sem o uso de tabelas como recurso de layout) , fator fundamental que

possibilitou a separação das camadas de conteúdo, índices e apresentação.

b Web Standards Project – http://www.wasp.org

8


Esses standards, estabelecidos pelo World Wide Web Consortium - W3C e outras entidades

reguladoras, são um conjunto de normas e padrões para criar e interpretar conteúdo na web.

A utilização desses padrões resulta na criação de sites mais acessíveis, para um maior número de

pessoas e para uma diversidade de dispositivos de acesso, uma vez que o código XHTML está

baseado no "markup" do conteúdo, o que possibilita a associação de semântica ao código.

Além disso, seu uso facilita a criação e integração de Web Services, que compõe um conjunto de

padrões e protocolos abertos usados para a troca de dados e informação entre aplicações, sistemas

e serviços.

Acessibilidade da interface

Acessibilidade na web significa que pessoas portadoras de dificuldades físicas, sensoriais ou

cognitivas podem perceber, entender, navegar e interagir com a web da mesma forma que

contribuir.

As implementações na interface da BVS atingem o padrão de Conformidade AA (Web Content

Accessibility Guidelines 1.0, WAI - Web Accessibility Initiative, W3C)d, o que representa que todos

os requisitos essenciais bem como os que deveriam ser cumpridos estão atendidos.

A navegação na BVS baseada em três tipos genéricos de páginas

web

O modelo de navegação na interface da BVS está baseado em três tipos genéricos de páginas web:

c Extensible Hypertext Markup Language d WAI

9


Tipo I ou Portal BVS

Página web que opera o accesso à coleções de fontes de informação de dois ou mais tipos.

Constituem os portais das instâncias regional, nacionais e temáticas na BVS. É utilizado também

nos portais das redes SciELO e ScienTI.

Figura 2 – Homepage do Portal Regional da BVS

Na versão 4.0 do BVS-Site, a página de Tipo I é constituída por uma coleção de componentes de

informação que são gerados dinamicamente segundo a organização do conteúdo ou por meio de

Web Services.

Em páginas do Tipo I, os componentes estão distribuídos nas colunas da interface de acordo com a

seguinte organização:

Coluna 1 – Redes: acesso às redes BVS, SciELO e ScienTI, e às iniciativas da BVS

organizadas por país.

10


Coluna 2 – Fontes de Informação: esta coluna organiza o acesso aos diferentes tipos

de fontes de informação.

Coluna 3 – Áreas temáticas: esta coluna organizada o acesso por área temática e

assunto, com uso privilegiado dos thesaurus Descritores em Ciências da Saúde (DeCS)

Coluna 4 – Destaques e Notícias: coluna destinada à comunicação de destaques e

noticias, privilegiando os conteúdos gerados no âmbito da "Rede de Notícias da BVS"

Tipo II ou Portal de Coleção ou Galeria

Página que opera uma fonte de informação isolada ou uma coleção de fontes de informação do

mesmo tipo. Por exemplo, bases de dados bibliográficas, diretório de eventos, etc.

Tipo III ou Página de Resultados

Página que opera a apresentação e a navegação nos resultados de operação sobre uma ou mais

fontes de informação.

A seguir, estão descritos os procedimentos para personalização de um site utilizando-se o sistema

BVS-Site v4.0

11

Instruções para personalização (básico)

A Interface do BVS Site foi desenvolvida propiciando uma personalização fácil e rápida. Para tanto

são necessários alguns conhecimentos básicos de CSS (Cascadind Style Sheets), linguagem de

estilo utilizada pela Interface do BVS Site, também é recomendado um programa de edição e

tratamento de imagens (para fins de exemplificação este manual utiliza o programa Adobe

Photoshop), um editor de HTML & CSS (Macromedia Dreamweaver, HomeSite, ou até mesmo o

Bloco de Notas) e um cliente FTP que será utilizado para fazer o upload das imagens e arquivos

para o servidor.

Estrutura dos arquivos e pastas no servidor

O Sistema BVS Site utiliza uma estrutura de pastas para alocar os arquivos que utiliza, é necessário

um breve conhecimento dessa estrutura para a personalização da interface.

12

Guia de Desenho Gráfico da BVS Instruções para personalização (básico)

Figura 3 - Estrutura de Diretórios do BVS Site

O diretório "base", não será trabalhados nesse Manual, pois é um diretório específico do sistema

que não interfere na personalização da Interface, o diretório a ser trabalhado será o "htdocs" que

contém dois diretórios específicos para personalização o "CSS" e o "image".

Figura 4 – Diretórios a serem trabalhados

O diretório "css" contém as folhas de estilo do BVS Site. Para customizar a Interface será

necessário fazer as alterações nas folhas de estilo do diretório common (figura 02), nela estão

hospedados quatro arquivos de CSS que serão detalhados no tópico a seguir.

O diretório image contém todas as imagens do BVS Site, as imagens do diretório

public/skins/classic são as que aparecem no BVS Site que chamamos de públicas e está dividido

em 4 subdiretórios:

common: contém as imagens comuns em qualquer idioma do BVS Site, são imagens que não são identificáveis em um único idioma. Exemplo: banner e fundos; en: contém os arquivos específicos do idioma inglês. Exemplo: Logo da VHL (Virtual Health Library), títulos do site (quando produzidos como imagens), etc;

13


es: contém os arquivos específicos do idioma espanhol. Exemplo: Logo da BVS espanhol (Biblioteca Virtual em Salud), títulos do site (quando produzidos como imagens), etc; pt: contém os arquivos específicos do idioma português. Exemplo: Logo da BVS (Biblioteca Virtual em Saúde), títulos do site (quando produzidos como imagens), etc.

Estrutura das folhas de estilo

As folhas de estilo do BVS Site são divididas em 4 arquivos diferentes no diretório

htdocs/css/public/skins/classic/common são eles:

general.css – nessa CSS estão os atributos gerais do site, como cor e tipo de fonte padrão utilizada no site.

layout.css – em layout definem-se os tamanhos, posições dos elementos, margens, etc. styles.css – nessa CSS estão as definições de estilo do BVS Site, cores dos elementos, imagem do banner, estilos tipográficos, bordas, etc.

components.css - definições dos componentes do BVS Site. Nesse arquivo pode se efetuar alterações em componentes específicos da Interface. Exemplo: mudar cor de um único componente como a "search box".

As folhas de estilo são carregadas pelo sistema conforme a ordem apresentada anteriormente.

Portanto uma alteração na última CSS a components subscreverá o elemento definido nas CSS´s

anteriores. É por isso que a components é a CSS que abriga as definições de elementos específicos.

Layout em psd

Esta é uma etapa importante da customização, é aqui se define a disposição dos elementos gráficos

presentes na interface. Nessa etapa são trabalhadas as cores e as imagens que representem o tema

do site. Após uma definição do layout seguimos para a aplicação no BVS Site.

Para fins de ilustração esse Manual utiliza o programa Adobe Photoshop, mas podem-se utilizar

outros programas de edição e tratamento de imagens, que suportem os formatos indicados.

Troca do Logo

A Interface do BVS Site, quando instalada já vem com os logos da BVS em seus respectivos

diretórios, mas dependendo do layout será necessário produzi-los novamente.

14


Recorte da imagem

Com a ferramenta CropToll (Adobe Photoshop) recorte o logo do layout e exporte em formato

.GIF (formato que suporta transparência). Observe que o logo deve ser produzido nos três idiomas

(caso esteja habilitado os três idiomas da interface)

Carga (upload) da imagem

As imagens do logo deverão ser enviadas via transferência de arquivos para o diretório específico

de cada idioma.

Exemplo: Supondo que foram desenvolvidos 3 logotipos da BVS sendo eles: bvsLogo_pt.gif,

bvsLogo_en.gif, bvsLogo_es.gif. Estes arquivos devem ser enviados aos seus diretórios

respectivos.

Arquivo Diretório bvsLogo_en.gif htdocs/images/public/skins/classic/en/ bvsLogo_es.gif htdocs/images/public/skins/classic/es/ bvsLogo_pt.gif htdocs/images/public/skins/classic/pt/

Tabela 1 – Upload dos logos.

Troca da imagem no ADMIN

Após o upload das imagens do logo o passo seguinte é efetivamente providenciar a substituição do

logo na interface. Essa substituição é feita pelo Sistema de Administração do Site que está

disponível através do endereço base do BVS Site, acrescido de /admin. Portanto se a Interface

estiver com o seguinte endereço "http://bvsSite.br" o Sistema de Administração estará em

"http://bvsSite.br/admin".

O Sistema pedirá um usuário e uma senha.

Para a troca do logotipo deve-se acessar o link "BVS logotipo" na área de estrutura do sistema de

Administração do BVS Site e logo a seguir clicar e modificar o item que já estará habilitado no BVS

site.

15


Figura 5 – Etapas para a troca do Logotipo

A troca do logotipo é efetuada na janela a seguir:

Figura 6 – Troca do logotipo

Rótulo: identifica o logotipo.

Imagem: Imagem que será carregada no logotipo; Link: link que terá o logotipo.

Após as configurações necessárias para efetuar as alterações é necessário confirmar as mesmas

clicando em Modifica e efetuando a gravação de todas as etapas anteriores.

16


! A troca do logotipo deverá ser efetuada em todos os idiomas habilitados no BVS Site. A Sintaxe %SKIN_IMAGE_DIR% deve preceder o nome do arquivo do logotipo, esta sintaxe garante que o logotipo utilizado será o carregado pela skin criada.

Troca do Banner

No BVS Site o banner é um dos elementos gráficos principais, é ele o responsável pela

representação artística do conteúdo da Interface e pela correlação dos elementos garantindo uma

consistência do desenho com o conteúdo.

Recorte da imagem

Para efetuar o recorte do banner utiliza-se a ferramenta "Crop Tool" (Photoshop), mas antes

devemos retirar qualquer logo ou elementos de texto dele, o banner deve conter somente imagens,

pois ele será depositado em uma área comum e servirá como elemento gráfico em qualquer

idioma. A medida do banner é de 760 pixels de largura por 110 pixels de altura.

Carga (upload) da imagem

A imagem do banner deverá ser enviada via transferência de arquivos para o diretório de imagens

common.

17


Configuração na CSS

O banner está identificado no código XHTML no <div class"top">

Figura 7 – Localização do banner no código XHTML.

As propriedades e configurações do banner estão descritas no arquivo styles.css sendo estas:

Figura 8 – Substituição do banner na CSS

Para substituir o banner edite a propriedadebackground no seletor (.top) substituindo a imagem

desejada e quando necessário fazendo os ajustes de cor.

Alteração no título

O título do BVS Site é alterado pelo Sistema de Administração do Site que está disponível através

do endereço base do BVS Site, acrescido de /admin. Portanto se a Interface estive com o seguinte

endereço "http://bvsSite.br" o Sistema de Administração estará em "http://bvsSite.br/admin".


18


Para efetuar a troca do título da Interface é necessário clicar na opção "Identificação" presente na

área de estrutura do sistema. O próximo passo é selecionar o título e clicar em modificar na janela

que se abre a seguir.

Figura 9 – Etapas a seguir para a alteração do título da Interface

Após clicar em modificar o sistema abrirá uma janela onde se deve inserir o título do BVS Site ou

uma imagem correspondente ao mesmo.

Figura 10 – Inserindo um título ao BVS Site

Rótulo: Título do BVS Site

Imagem: Imagem que represente o título do BVS Site (casos especiais)



19


! A alteração do título do BVS Site deverá ser efetuada em todos os idiomas habilitados no sistema. A alteração em um único idioma não altera os demais.

Configurando a CSS

O título está identificado no código XHTML no <div id="identification">

Figura 11 - Localização do título no código XHTML

Após a substituição do título no sistema de administração do BVS Site, abaixo segue uma lista das

alterações possíveis para o título do BVS Site.

Na CSS styles é possível mudar a cor e/ou tamanho do título no seletor ".top #identification H1"

alterando a propriedade color para mudar as cores e a propriedade font-size para alterar o

tamanho do Título.

Figura 12 – Mudança de cor do título na CSS styles.

Na CSS layout é possível alterar a posição e/ou o tamanho da área destinada ao título no seletor

".top #identification". Alterando o width é possível mudar o tamanho da largura da área destinada

ao título e em height o tamanho da altura da área destinada ao título.

20


Na mesma CSS é possível alterar as margens do título no seletor ".top #identification H1".

Alterando as definições das margens na propriedade margin.

Figura 13 - Exemplo de alterações de margens no título

Instituições

O campo instituições é o campo responsável por apresentar os nomes, logos e links (quando

disponível) das instituições responsáveis pelo BVS Site.

Quando a instituição for representada pelo seu logo se deve ter um cuidado em preparar a

imagem, pois ela deve ser em formato GIF, pois esse formato suporta transparência. O tamanho

definido na configuração padrão do BVS Site é de 55 pixels de altura.

Alterando as Instituições

O campo instituições é alterado pelo Sistema de Administração do Site que está disponível através

do endereço base do BVS Site, acrescido de /admin. Portanto se a Interface estive com o seguinte

endereço "http://bvsSite.br" o Sistema de Administração estará em "http://bvsSite.br/admin".


Para efetuar a substituição das instituições é necessário clicar na opção "Instituições" presente na

área de estrutura do sistema. O próximo passo é selecionar a instituição e clicar em "modifica" na

janela que se abre a seguir.

21


Para inserir uma nova instituição é necessário clicar no campo "adiciona" na mesma janela.

Figura 14 – Modificando as Instituições

Após clicar em modificar o sistema abrirá uma janela onde se deve inserir o título da instituição ou

seu logo e o hiperlink.

Figura 15 – Caixa de inclusão ou alteração das instituições

Nome: Nome da Instituição Imagem: Logo da Instituição (o uso de uma imagem suprime o nome da instituição) Link: Endereço eletrônico da instituição.

22




! A inserção/alteração das instituições deverá ser efetuada em todos os idiomas habilitados no BVS Site. A Sintaxe %SKIN_IMAGE_DIR% deve preceder o nome do arquivo do logotipo, esta sintaxe garante que o logotipo utilizado será o carregado pela skin criada.

Configurando a CSS

O campo instituições está identificado no código XHTML no <div id="institutionList">

Figura 16 – Localização do campo Instituições no código-fonte.

Após a configuração do campo "instituições", alguns ajustes na CSS podem ser necessários. As

definições das instituições são encontradas no seletor ".top #institutionList" presentes nas CSS´s

styles e layout.

Na CSS style estão definidas as cores e tamanhos conforme abaixo:

23


Figura 17 – Exemplo de ajustes de cores e fontes das instituições

text-align – define o alinhamento do texto dentro da área destinada às instituições; list-style – definida como none por se tratar de uma lista é comum o uso de bullets, mas como essa lista é disposta em linha esses bullets foram retirados; font-size: Define o tamanho da fonte; text-decoration: aqui pode-se definir se o texto será sublinhado ou não;

color: define a cor da fonte das instituições. (não se aplica aos logos).

Configurações de fontes e cores

As famílias de fontes tipográficas utilizada na interface do site são Trebuchet MS e Verdana, pois

de acordo com recomendações habituais feitas, possibilitam uma excelente legibilidade nos

tamanhos habitualmente utilizados na Web. São fontes "sem serifa" e, portanto, altamente

recomendada para leitura em telas de computador, e já vem instaladas na maioria dos sistemas

operacionais. Utiliza-se, alternativamente, a família Arial que possui as mesmas características

básicas.

Através de CSS é possível redefinir as famílias tipográficas. As definições genéricas das fontes

encontram-se no arquivo general.css, como mostra a figura a seguir:

Figura 18 – Seletores responsáveis pelas fontes na CSS.

Para modificar a fonte, redefina a propriedade font-family dos seletores BODY, INPUT,

TEXTAREA, SELECT e H1, H2, H3 como mostrado na imagem. As configurações do tamanho das

fontes encontram-se no mesmo arquivo e estão definidas no atributo font-size.

24


Na instalação padrão do BVS-Site 4.0 as cores das fontes não estão definidas na css. Para isso, é

necessário criar dentro dos seletores o campo color. Seguem abaixo, exemplos para definição das

cores nos seletores.

Figura 19 – Exemplos de definições de cores nos seletores

Note que nos dois primeiros seletores não há definição de cores para os elementos ali descritos,

assumindo a cor preta para todos os elementos tipográficos do site.

Abaixo, um exemplo da definição de cores e o resultado no site.

Figura 20 – Definições de cores na CSS e resultado no site.

25


Configurações do rodapé

Na instalação padrão do BVS-Site 4.0, o rodapé contém as informações institucionais, localização

e formas de contato. Para alterar essas informações, é necessário entrar na área de administração

do site.

A área de administração está disponível através do endereço base da sua BVS, acrescido de

"admin". Portanto, se o endereço for http://site.bvs.br/, basta acrescentar "admin" ao final da

URL para entrar na área de administração da BVS, por exemplo:

http://sitebvs/admin

Para maiores informações sobre a área administrativa consulte o Manual BVS Site 4.0, anexo

nesse documento.

Estrutura

Aplica-se ao gerenciamento de dados informativos sobre a BVS (nomenclatura, rótulos, idiomas)

bem como a organização dos componentes (fontes de informação, temas e comunidades) etc.

Para a alteração do conteúdo do rodapé clique em instituição responsável, como mostra a figura

abaixo:

Figura 21 – Etapa para a alteração do rodapé

Em seguida selecione a instituição responsável e clique em modifica

26


Figura 22 – Selecionando a instituição responsável

Em seguida, será aberta uma janela contendo as informações do rodapé. Para facilitar as edições

do texto selecione o editor de XHMTL (clique aqui para usar o editor XHTML), conforme

exemplifica a imagem abaixo:

Figura 23 – Editando as informações do Rodapé

Feito isso, é possível modificar as informações em um editor de texto onde estão disponíveis

diversas ferramentas de formatação semelhantes ao Word.

27


Figura 24 – Editando as informações em um editor de texto

Configuração da CSS

A estrutura do rodapé está identificada no código XHTML como <div id="footNotes">.

Figura 25 – Localizando a estrutura rodapé no código-fonte

As configurações de cores de fundo, cor e tamanho da fonte encontram-se no arquivo styles.css, nos

seguintes seletores:

28


Figura 26 – Editando as cores do rodapé na CSS

29

Referências bibliográficas

1. BIREME - OPAS - OMS. Guia 1999 de desenvolvimento da Biblioteca Virtual em Saúde -

BVS. [documento na internet]. São Paulo SP : Centro Latino Americano e do Caribe de

informação em Ciências da Saúde - BIREME; 2005 [citado 2005 Set 21]. Disponível em:

http://bvsmodelo.bvsalud.org/download/bvs/bvs-guia1999-pt.pdf.

2. BIREME - OPAS - OMS. Guia 2001 de desenvolvimento da Biblioteca Virtual em Saúde -

BVS. [documento na internet]. São Paulo SP : Centro Latino Americano e do Caribe de

informação em Ciências da Saúde - BIREME; 2001 [citado 2005 Set 21]. Disponível em:

http://bvsmodelo.bvsalud.org/download/bvs/bvs-guia2001-pt.pdf.

3. Packer, A. L., Castro, E. de. Biblioteca Virtual en Salud. [monografia na internet]. São Paulo

SP : BIREME - OPS - OMS, 1998 [citado 2005 Set 21]. Disponível em:

http://www.bireme.br/bvs/por/entresp.htm.

4. Documento Básico da BVS. In VI Reunião do Sistema Latino-Americano e do Caribe de

Informação em Ciências da Saúde. San José, Costa Rica : BIREME - OPS - OMS; 23-24 de

março de 1998.

5. Declaração de San José para a Biblioteca Virtual em Saúde. In VI Reunião do Sistema

Latino-Americano e do Caribe de Informação em Ciências da Saúde - IV Congresso Pan-

Americano de Informação em Ciências da Saúde. San José, Costa Rica : BIREME - OPS -

OMS; 23 - 27 de março de 1998.

30

Guia de Desenho Gráfico da BVS Referências bibliográficas

6. Declaração de Havana Rumo ao Acesso Equitativo à Informação em Saúde. [documento na

internet]. In II Reunião de Coordenação Regional da Biblioteca Virtual em Saúde (BVS) - V

Congresso Regional de Informação em Ciências da Saúde (CRICS V). Havana, Cuba :

BIREME - OPS - OMS; 23 - 27 de abril de 2001 [citado 2005 Set 21]. Disponível em

http://www.bireme.br/crics5/P/declara.htm.

7. Declaração de Puebla. In VI Congresso Regional de Informação em Ciências da Saúde

(CRICS VI) - III Reunião de Coordenação Regional da BVS. Puebla, México : BIREME - OPS

- OMS; 05-09 de maio de 2003. Disponível em

http://crics6.bvsalud.org/crics6/es/declaracion.htm.

31

Glossário

Aplicativo. Programa utilizado para executar tarefas direcionadas para uma

aplicação, como criação ou edição de textos, desenhos, diagramação etc. Ex.:

processador de textos, gerenciador de banco de dados, navegador de internet

etc.

Arquivo. Em computação, um conjunto de dados que pode ser gravado em algum

dispositivo de armazenamento. Os arquivos de dados são criados por aplicativos,

como por exemplo um processador de textos.

Base de dados. Coleção de dados estruturados para serem acessados e

manipulados facilmente. É formada por unidades chamadas registros, cujos

diversos atributos são representados por campos. Por exemplo, num arquivo

"cadastro de clientes", cada cliente representa um registro, que possui vários

campos, como "NOME", "CÓDIGO DO CLIENTE", "TELEFONE" etc.

Bases de dados referenciais ou bibliográficas. Versão eletrônica de um catálogo ou

índice bibliográfico.

32

Guia de Desenho Gráfico da BVS Glossário

Biblioteca Virtual em Saúde. A BVS, como biblioteca, é uma coleção

descentralizada e dinâmica de fontes de informação que tem como objetivo o

acesso eqüitativo ao conhecimento científico em saúde.

BVS-Site. Gerenciador de interface que permite criar e administrar uma BVS.

Campo. Ver Base de dados.

CGI. É um padrão para conectar aplicações externas com os provedores de acesso

a informação, tais como o HTTP ou os Web Services.

Comitê Consultivo. Grupo de representantes de instituições usuárias,

intermediárias e produtoras de informação em saúde que tem como função

avaliar o desempenho de cada uma das fontes de informação e da BVS como um

todo.

Estilo. Elemento que define a forma de um caractere, um conjunto de caracteres

ou parágrafo para fins de visualização ou impressão.

Folha de estilo. Arquivo que contém toda a definição de estilos de uma

publicação.

Fontes de informação. Na arquitetura da BVS, fonte de informação é qualquer

recurso que responda a uma demanda de informação por parte dos usuários,

incluindo produtos e serviços de informação, pessoas ou rede de pessoas,

programas de computador, etc.

Formato eletrônico. Qualquer forma de armazenagem, recuperação e

apresentação de informação passível de transmissão online ou gravação em mídia

magnética ou óptica.

Registro. Ver Base de dados.

Stylesheet. Ver folha de estilos.

33

Guia de Desenho Gráfico da BVS Glossário

Tema. Agrupamento específico de informação sobre o assunto de uma BVS cuja

função é permitir ao usuário a navegação por tópicos.

URL. Padrão definido para endereçamento de conteúdos de dados via protocolo

TCP/IP. Os navegadores de internet utilizam a URL para acessar páginas na web.

Web standards. Conjunto de normas e padrões para criar e interpretar conteúdo

web.

XML. Linguagem criada para permitir acomodação de dados de forma estruturada

e hierárquica, facilitando a comunicação de dados entre sistemas e plataformas

diferentes.

XSL. Linguagem criada para permitir a navegação, seleção e captação de dados

de um arquivo XML.

34

Anexo I (avançado)

Layout Fluido e Layout Fechado

Chamamos de layout fluido o desenho que ocupa 100 por cento da área útil do site e, mesmo com a

redefinição da janela, o layout se adapta ao novo formato. Layout fechado é aquele que ocupa uma

determinada porcentagem dessa área, uma área fixa, independente da dimensão da janela.

Figura 27 - Layout Fluido e Layout Fechado

Na instalação do BVS-Site 4.0, o padrão do layout é fluido. A CSS que define as configurações do tamanho

da página estão no arquivo layout.css, no seguinte seletor:

35

Guia de Desenho Gráfico da BVS Anexo I (avançado)

Figura 28 – Modelo de layout fluido

Note, que no código acima não há nenhuma especificação para a largura do container, caracterizando

portanto, o layout fluido.

Abaixo, um exemplo da definição da largura para o container e o resultado no site.

Figura 29 – Modelo de layout fechado

Para definição do background do body, modifique no arquivo general.css o seletor BODY -> background e

incluindo a cor desejada

36


Abaixo, um exemplo da definição da cor de fundo para o BODY e o resultado no site.

Figura 30 – Modelo de layout fechado com aplicação de cor de fundo

Configuração das Colunas

As estruturas das colunas estão identificadas no código XHTML como firstColumn, second Column e

thirdColumn.

Figura 31 - Colunas

As propriedades de configurações do tamanho das colunas estão descritas no arquivo layout.css, sendo

estas:

37


Figura 32 – Configuração das colunas

Para aumentar ou diminuir os tamanhos das colunas edite o campo width localizado em cada um dos

seletores (.middle .firstColumn, .middle .secondColumn, .middle .thirdColumn) com os valores desejados.

Abaixo, a imagem ilustrativa da redefinição dos valores.

Figura 33 – Modelo de redefinição dos valores das colunas

No arquivo styles.css é possível modificar a cor de fundo das colunas, cores e largura das bordas e o

tamanho da fonte. Para isso altere o campo background, border-top, border-left e font-size dos seletores:

.firstColumn DIV, .secondColumn .centerLeftColumn DIV, .secondColumn .centerRightColumn DIV,

.thirdColumn DIV, #search, #searchConcepts, .level2 .middle DIV.

38


Figura 34 – Modificação de cores das colunas na CSS

Abaixo, um exemplo da redefinição dos seletores mencionados acima.

Figura 35 – Demonstração de mudança de cores das colunas

39

BIREME / OPAS / OMS -...

Documents

Transcript of BIREME / OPAS / OMS -...