Redefinição das categorias dos testes de sensibilidade S I e R
Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML •...
Transcript of Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML •...
![Page 1: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/1.jpg)
Interface BVS-Site
Arquiteturtae
Personalização da Interface
Julio [email protected]
Desenho Gráfico e InterfacesDGI-GA | BIREME/PAHO/WHO
![Page 2: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/2.jpg)
Tópicos
• Arquitetura da BVS• Modelo de Interfaces da BVS• Web Standards / código Tableless • Acessibilidade• Customização - CSS• Criação de “Skins” no BVS-Site 4.0
![Page 3: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/3.jpg)
Arquitetura da BVS
3 camadas independentes e Interoperantes
Interfaces
Índices
Fontes de Informação
![Page 4: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/4.jpg)
Arquitetura Orientada a Serviços
interfaceinterface
interfaceinterface
interfaceinterface
interfaceinterface
interface
interfaceinterface
FIFI
FIFI
FIFIFIFI
![Page 5: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/5.jpg)
BVS-Site
Web Services
XML component
XHTMLXSLT
TemplateCSS
ApresentaçãoModelo de Interfaces
![Page 6: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/6.jpg)
BVS-Site 4.0
Nível AA de conformidade com Web Accessibility Initiative – WAI
Web Standards+
Código Tableless
Todos os requisitos obrigatóriosbem como os que deveriam estar atendidos estão efetivamente implementados
![Page 7: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/7.jpg)
Web Standards
• São tecnologias para criar e interpretar conteúdo na Web criadas e regulamentadas pelo W3C
• Essas tecnologias foram projetadas para proporcionar maior benefício e acessibilidade a um grande número de usuários
• Sua utilização garante correcta visualização a medida que os navegadores evoluem e novos dispositivos de acesso surgem no mercado
![Page 8: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/8.jpg)
Web Standards• Linguagens estruturadas
– Extensible Markup Language (XML) 1.0– Extensible Hypertext Markup Language (XHTML)
• Linguagens de apresentação– Cascading Style Sheets (CSS) level 1, 2 and 3
• Object Models– Document Object Model (DOM)
![Page 9: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/9.jpg)
Código Tableless
XHTML sem tabelas como recurso de layout
– Markup baseado no significado– Código simple e compreensível– Propicia maior acessibilidade– Apropriado para a leitura de mecanismos de
busca– Downloads mais rápidos
![Page 10: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/10.jpg)
CSS – Cascading Stylesheets
– Descreve como o markup XHTML será exibido em
Telas dos computadoresImpressorasLeitores de telaTelefones celulares e dispositivos móveis
![Page 11: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/11.jpg)
CSS – Cascading Stylesheets
– VantagensCamada de apresentação de todo o websitecentralizada em um arquivo (ou grupo de arquivos)O mesmo conteúdo pode ter seu conteúdo optimizado para diferentes dispositivos de acessoCódigo reduzido em tamanho e complexidade
<< voltar
![Page 12: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/12.jpg)
Guidelines para acessibilidade
ATAG – Authoring Tool Accessibility Guidelines
WCAG – Web Content Accessibility Guidelines
UAAG – User Agent Accessibility Guidelines
![Page 13: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/13.jpg)
Personalização
Requerimentos– Editor de imagens– Cliente FTP para upload de arquivos– Editor de HTML & CSS
Habilidades recomendadas– Web Master– Web Designer
![Page 14: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/14.jpg)
Criação de “Skins” no BVS-Site 4.0
Step 1/2 - Criação dos diretórios
CSS Files
eportuguese
Image Files
eportuguese
Inglês
Espanhol
Português
Todos os idiomas
![Page 15: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/15.jpg)
Criação de “Skins” no BVS-Site 4.0
[SITE INFO]DEFAULT LANGUAGE=en
[ENVIRONMENT]DIRECTORY=/SITE_PATH=/home/ghl2/htdocs/DATABASE_PATH=/home/ghl2/bases/site/SERVERNAME=ghl2.bvsalud.org
[SKIN]SKIN_NAME=classic
[METASEARCH]ENGINE=serverSERVER=regional.bvsalud.org:8080TIMEOUT=10000RESULT=BOX
Step 2/2 - Edição do arquivo bvs-site-conf.php
[SITE INFO]DEFAULT LANGUAGE=pt
[ENVIRONMENT]DIRECTORY=/SITE_PATH=/home/eportuguese/htdocs/DATABASE_PATH=/home/eportuguese/bases/site/SERVERNAME=eportuguese.bvsalud.org
[SKIN]SKIN_NAME=eportuguese
[METASEARCH]ENGINE=serverSERVER=regional.bvsalud.org:8080TIMEOUT=10000RESULT=BOX
![Page 16: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/16.jpg)
Personalização do skin eportuguese
• Alteração do logo• Alteração do banner• Edição do “title”• Alteração dos logos de Instituições
![Page 17: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/17.jpg)
Estrutura da CSS no BVS-Site 4.0
• general.css– Atributos genéricos do site e redefinição de
elementos de HTML
• layout.css– Definição das dimensões, posição e margens dos
elementos.
• styles.css– Cores, imagens, bordas e estilos de tipografia.
• components.css– Definições específicas dos componentes da
interface.
![Page 18: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/18.jpg)
Alteração do logo
• Recorte da Imagem
/images/public/skins/eportuguese/pt/
logobvs.gif
http://seusite/admin
• Upload da Imagem
• Ajustes no Admin
![Page 19: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/19.jpg)
Alteração do banner
/images/public/skins/eportuguese/common/• Image upload
• Adjustments to CSS
• Image cropping banner.jpg
/css/public/skins/eportuguese/common/style.css
![Page 20: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/20.jpg)
Edição do “title”
http://seusite/admin • Ajustes no Admin
indisponivel
![Page 21: Interface BVS-Site · – Atributos genéricos do site e redefinição de elementos de HTML • layout.css – Definição das dimensões, posição e margens dos elementos. • styles.css](https://reader033.fdocumentos.com/reader033/viewer/2022052100/603967d5961be703ed606566/html5/thumbnails/21.jpg)
Alteração dos logos de Instituições
• Retorte da Imagem
/images/public/skins/eportuguese/pt/
http://seusite/admin
• Upload de Imegens
• Ajustes no Admin
logoWHO.gif
WHO
%SKIN_IMAGE_DIR%logoWHO.gif
http://www.who.int