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

Transcrição

1 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

2 Copyright Março 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 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.

3 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

4 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 Tipo II ou Portal de Coleção ou Galeria Tipo III ou Página de Resultados Instruções para personalização (básico) Estrutura dos arquivos e pastas no servidor Estrutura das folhas de estilo Layout em psd Troca do Logo Recorte da imagem Carga (upload) da imagem Troca da imagem no ADMIN Troca do Banner II

5 Sumário Recorte da imagem Carga (upload) da imagem Configuração na CSS Alteração no título Configurando a CSS Instituições Alterando as Instituições Configurando a CSS Configurações de fontes e cores Configurações do rodapé Estrutura Configuração da CSS Referências bibliográficas Glossário Anexo I (avançado) Layout Fluido e Layout Fechado Configuração das Colunas III

6 Lista de ilustrações, quadros e tabelas Figura 1 - Arquitetura de processamento da BVS...8 Figura 2 Homepage do Portal Regional da BVS Figura 3 - Estrutura de Diretórios do BVS Site Figura 4 Diretórios a serem trabalhados Figura 5 Etapas para a troca do Logotipo Figura 6 Troca do logotipo Figura 7 Localização do banner no código XHTML Figura 8 Substituição do banner na CSS Figura 9 Etapas a seguir para a alteração do título da Interface Figura 10 Inserindo um título ao BVS Site Figura 11 - Localização do título no código XHTML Figura 12 Mudança de cor do título na CSS styles Figura 13 - Exemplo de alterações de margens no título Figura 14 Modificando as Instituições IV

7 Lista de ilustrações, quadros e tabelas Figura 15 Caixa de inclusão ou alteração das instituições Figura 16 Localização do campo Instituições no código-fonte Figura 17 Exemplo de ajustes de cores e fontes das instituições Figura 18 Seletores responsáveis pelas fontes na CSS Figura 19 Exemplos de definições de cores nos seletores Figura 20 Definições de cores na CSS e resultado no site Figura 21 Etapa para a alteração do rodapé Figura 22 Selecionando a instituição responsável Figura 23 Editando as informações do Rodapé Figura 24 Editando as informações em um editor de texto Figura 25 Localizando a estrutura rodapé no código-fonte Figura 26 Editando as cores do rodapé na CSS Figura 27 - Layout Fluido e Layout Fechado Figura 28 Modelo de layout fluido Figura 29 Modelo de layout fechado Figura 30 Modelo de layout fechado com aplicação de cor de fundo Figura 31 - Colunas Figura 32 Configuração das colunas Figura 33 Modelo de redefinição dos valores das colunas Figura 34 Modificação de cores das colunas na CSS Figura 35 Demonstração de mudança de cores das colunas V

8 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

9 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

10 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

11 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

12 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

13 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

14 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,

15 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

16 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

17 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

18 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 Standards b e código XHTML c 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 8

19 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

20 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

21 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

22 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

23 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

24 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

25 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 " o Sistema de Administração estará em " 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

26 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

27 ! A Instruções para personalização (básico) 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

28 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 " o Sistema de Administração estará em " O Sistema pedirá um usuário e uma senha. 18

29 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

30 ! 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. Instruções para personalização (básico) 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

31 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 " o Sistema de Administração estará em " 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