bireme / opas / oms -...
TRANSCRIPT
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
Guia de Desenho Gráfico da BVS A Interface da BVS
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
Guia de Desenho Gráfico da BVS A Interface da BVS
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
Guia de Desenho Gráfico da BVS A Interface da BVS
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
! 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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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".
O Sistema pedirá um usuário e uma senha.
18
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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)
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.
19
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
! 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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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".
O Sistema pedirá um usuário e uma senha.
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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.
! 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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Instruções para personalização (básico)
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
Guia de Desenho Gráfico da BVS Anexo I (avançado)
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
Guia de Desenho Gráfico da BVS Anexo I (avançado)
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
Guia de Desenho Gráfico da BVS Anexo I (avançado)
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