bvs site customización de una instancia con bvs-site

BVS Site

Customización de una instancia con bvs-site

Se recomienda la adopción del modelo gráfico descrito en la guía para operar las interfaces en los portales y sitios de la BVS considerando los siguientes aspectos:

Criterios Ergonómicos para Evaluación de Interfaces Humano-Computadora

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

Web Standards• El Portal de la BVS, en la versión 4.0,

– Web Standards[1] – Código XHTML[2] estructurado en tableless (sin el uso de tablas como recurso

de layout), factor fundamental que hizo posible la separación de las capas de contenido, índices y presentación.

– Una vez que el código XHTML se basa en el "markup" del contenido, lo que posibilita la asociación de semántica al código.

– Establecidos por el World Wide Web Consortium - W3C y otras entidades reguladoras, son un conjunto de normas y patrones para crear e interpretar contenido en la web.

– Sitios más accesibles– Facilita la creación e integración de Web Services

[1] Web Standards Project – http://www.wasp.org[2] Extensible Hypertext Markup Language

La navegación en la BVS basada en tres tipos genéricos de páginas web

• Tipo I - Portal BVS

• Tipo II - Portal de Colección o Galería

• Tipo III - Página de Resultados

Tipo I o Portal BVSPágina web que opera el acceso a las colecciones de fuentes de información de dos o más tipos. Constituye el portal de las instancias regionales, nacionales y temáticas en la BVS. También se utiliza en los portales de las redes SciELO y ScienTI

E está constituida por una colección de componentes de información que son generados dinámicamente según la organización del contenido o por medio de Web Services.En páginas del Tipo I, los componentes están distribuidos en las columnas de la interfaz de acuerdo a la siguiente organización:

Columna I – Redes regionales, nacionales, temáticas e institucionales

Columna II – Redes de contenidos: Colecciones de productos, servicios y eventos de informaciónFuentes e flujos de información

Columna III – Redes de ambientes aprendizes e informados

Tipo II Portal de Colección o Galería

Tipo III Página de Resultados

A continuación se describen los procedimientos para personalizar un sitio utilizando el sistema BVS-Sitio

v4.0

Instrucciones para PersonalizaciónNivel Básico

• Ofrecer una personalización fácil y rápida. • Algunos conocimientos básicos de CSS (Cascadind Style Sheets),

lenguaje de estilo utilizado por la Interfaz del BVS Sitio; • Programas

– Edición y tratamiento de imágenes (para fines de ejemplificación, este manual utiliza el programa Adobe Photoshop),

– un editor de HTML & CSS (Macromedia Dreamweaver, HomeSite, o incluso el Bloc de Notas) y

– Un cliente FTP que será utilizado para llevar a cabo el upload de las imágenes y archivos para el servidor.

Estructura de los archivos y carpetas en el servidor

En nuestro ejemplo prático


El directorio "base" no será trabajado en este Manual, ya que es un directorio específico del sistema que no interfiere en la personalización de la Interfaz;

El directorio a trabajar será el "htdocs" que contiene dos directorios específicos para personalización: el "CSS" y el "image".


"css"

•Las hojas de estilo del BVS Sitio.•Carpeta common (figura 02); •cuatro archivos de CSS que serán detallados en el tópico a continuación.

image •Contiene todas las imágenes del BVS Sitio;• public/skins/classic son las imágenes que parecen en el BVS Sitio que llamamos de públicas •está dividido en 4 subdirectorios:


• common: contiene las imágenes comunes en cualquier idioma del BVS Sitio, y estas imágenes no pueden ser identificadas en solamente un idioma. Ejemplo: banner y fondos;

• en: contiene los archivos específicos del idioma inglés. Ejemplo: Logotipo de la VHL (Virtual Health Library), títulos del sitio (cuando producidos como imágenes), etc;

• es: contiene los archivos específicos del idioma español. Ejemplo: Logotipo de la BVS español (Biblioteca Virtual en Salud), títulos del sitio (cuando producidos como imágenes), etc;

• pt: contiene los archivos específicos del idioma portugues. Ejemplo: Logotipo de la BVS (Biblioteca Virtual en Salud), títulos del sitio (cuando producidos como imágenes), etc.

! Desarrollar la imagen del banner sin

identificación del que idioma está

Estructura de las hojas de estilo

• general.css – en esta CSS se encuentran los atributos generales del sitio, como color y tipo de fuente patrón utilizada en el sitio.

• layout.css – en layout se definen los tamaños, posiciones de los elementos, márgenes, etc.

• styles.css – en esta CSS se encuentran las definiciones de estilo del BVS Sitio, colores de los elementos, imagen del banner, estilos tipográficos, bordes, etc.

• components.css - definiciones de los componentes del BVS Sitio. En este archivo es posible efectuar alteraciones en componentes específicos de la Interfaz. Ejemplo: cambiar color de un sólo componente como la "search box".

Las hojas de estilo del BVS Sitio están divididas en 4 archivos diferentes en la

Carpetahtdocs/css/public/skins/clasic/common,

Las hojas de estilo son cargadas por el sistema según el orden que se presentó anteriormente.

Por lo tanto, una alteración en la última CSS a components suscribirá el elemento definido en las CSS´s anteriores.

Por ello la components es la CSS que abriga las definiciones de elementos específicos

Layout en psd• Define la disposición de los elementos gráficos presentes en la interfaz. • Trabajan los colores y las imágenes que representan el tema del sitio. • Después de definir el layout seguimos para la aplicación en el BVS Sitio.

Para fines de ilustración ese Manual utiliza el programa Adobe

Photoshop, pero es posible utilizar otros programas de

edición y tratamiento de imágenes, que soporten los

formatos indicados

Cambio del Banner

• Banner es uno de los elementos gráficos principales

• Es el responsable por la representación artística del contenido de la Interfaz

• La correlación de los elementos,

• Garantizando una consistencia del diseño con el contenido

Recorte del image•Recorte del banner herramienta "Crop Tool" (Photoshop),

• Borrar cualquier logotipo o elementos del texto,

• El banner debe contener solamente imágenes,

• Porque será depositado en un área común

•Servirá como elemento gráfico en cualquier idioma.

La medida del banner

es de 780 pixels de ancho

por 110 pixels de alto.

Carga (upload) de la imagen

• bvs-site\htdocs\image\public\skins\classic\common

Ejercicio

Copiar la imagen

\BVS\imagenes-customizadas\bannerMiSitio.jpgpara

\bvs\bvs-site\htdocs\image\public\skins\classic\common

•La imagen del banner debe ser enviada vía transferencia de archivos para el directorio de imágenes common

Configuración en la CSS

El banner está identificado en el código XHTML en el <div class="top">

Configuración en la CSS

Las propiedades y configuraciones del banner styles.css:

Para sustituir el banner edite la propiedad background en el selector (.top) sustituyendo el nombre de la imagen deseada y, cuando sea necesario,

ajustando el color.

Ejercicio

Cambiar en el archivo styles.cssEl nombre de banner.jpg para banner_misitio.jpg

Ubicación del archivo styles.css\BVS\bvs-site\htdocs\css\public\skins\classic\common

El banner debe quedarse asi

En el ejemplo cambíó el color tambíen

Fueron cambiadas el color y la imagen del banner

Cambio del Logotipo

La Interfaz del BVS Sitio, cuando instalada ya viene con los logotipos de la BVS en sus respectivos directorios, pero en función del layout será necesario producirlos de nuevo.

Recorte de la imagen

• Con la herramienta CropToll (Adobe Photoshop) recorte el logotipo del layout y exporte en formato .GIF (formato que soporta transparencia).

• Observe que el logotipo debe ser producido en los tres idiomas (si se han habilitado los tres idiomas de la interfaz)

Carga (upload) del image

• Los imágenes del logotipo deben enviarse vía transferencia de archivos para el directorio específico de cada idioma.

• Ejemplo: Vamos a suponer que se desarrollaron 3 logotipos de la BVS: bvsLogotipo_pt.gif, bvsLogotipo_en.gif, bvsLogotipo_es.gif. Estos archivos deben enviarse a sus directorios respectivos.

Archivo Directorio

bvsLogotipo_en.gif htdocs/images/public/skins/classic/en/

bvsLogotipo_es.gif htdocs/images/public/skins/classic/es/

bvsLogotipo_pt.gif htdocs/images/public/skins/classic/pt/

Ejercicio

Copiar el archivo logo_misitio.gif

ubicado en:/BVS/imagenes-customizadas/

para la carpeta \bvs\bvs-site\htdocs\image\public\skins\classic\es

Cambio de la imagen en el ADMIN

• Sustitución del logotipo en la interfaz.

– Sistema de Administración del Sitio que está disponible a través de la dirección base del BVS Sitio, a la cual se adiciona /admin. Ej. http://localhost/admin/

– El Sistema pedirá un usuario y una contraseña.– Acceder al enlace "BVS logotipo" en el área de estructura del

sistema de Administración del BVS Sitio – y logotipo; a continuación, hacer un click y modificar el item que ya

estará habilitado en el BVS sitio


Ejemplo


• Rótulo: identifica el logotipo. • Imagen: Image que será cargada en el logotipo; • Enlace: enlace que terá el logotipo.

Después de efectuar las configuraciones necesarias para llevar a cabo las alteraciones, es necesario confirmarlas por medio de un clic en Modifica y efectuar la grabación de todas las etapas anteriores

El cambio del logotipo se efectúa

en la siguiente pantalla


!El cambio del logotipo debe ser

efectuado en todos los idiomas habilitados en el BVS Sitio. La Sintaxis %SKIN_IMAGE_DIR% debe preceder el nombre del archivo del logotipo; esta sintaxis asegura que el logotipo utilizado será el cargado por la skin creada.

Ejercicio

Hacer las etapas escritas anteriormente, cambiando el nombre del banner para logo_misitio.gif

logo_misitio.gif

Cambio en el título

• Acceder el sistema de Administración del Sitio: http://localhost/admin".• El Sistema pedirá un usuario y una contraseña.• Para efectuar el cambio del título opción "Identificación" presente en

el área de estructura del sistema. • El próximo paso es seleccionar el título

Cambio en el títuloEjercicio

Rótulo: Título del BVS SitioImagen: Imagen que represente el título del BVS Sitio (casos especiales)

Mi Sitio

Ejercicio

Hacer esa tarea

Cambio en el título

Después de las configuraciones necesarias para efectuar las alteraciones hay que confirmarlas por medio de un clic en Modifica y efectuar la grabación de todas las etapas anteriores

!El Câmbio del título del

BVS Sitio debe efectuarse en todos los idiomas habilitados en el sistema. El cambio en un sólo idioma no altera en los demás.

Cambio en el título Configurando la CSS

El título está identificado en el código XHTML en el

<div id="identification">

En la CSS styles.css es posible cambiar el color y/o tamaño del título en el selector ".top #identification H1" alterando la propiedad color para cambiar los colores y la propiedad font-size para alterar el tamaño del Título.

Ejercicio

.TOP #identification H1 {color: #075d31;font-size: 180%;

}

Cambio en el título Configurando la CSS

En CSS layout.css es posible cambiar la posición y/o el tamaño del área destinada al título en el selector ".top #identification".

Alterando el width es posible cambiar el tamaño del ancho del área destinada al título y en height se modifica el tamaño de la altura del área destinada al título.

En la misma CSS es posible alterar las márgenes del título en el selector ".top #identification H1". Se alteran las definiciones de las márgenes en la propiedad margin

EjercicioCambiando el formato en LAYOUT.css

Original Alterado

Instituciones

• El campo instituciones es el campo responsable por presentar los nombres, logotipos y enlaces (cuando disponible) de las instituciones responsables por el BVS Sitio.

• Cuando la institución es representada por su logotipo, hay que tener cuidado al preparar la imagen, ya que ella debe estar en formato GIF, porque este formato soporta transparencia.

• El tamaño definido en la configuración patrón del BVS Sitio es de 55 pixels de altura.

Copiar la imagen newlogo.gif ubicado en: \BVS\imagenes-customizadas\

para la carpeta

\bvs\bvs-site\htdocs\image\public\skins\classic\es

Ejercicio

Cambiando las Instituciones

• Acceder el Sistema de Administración– http://Localhost

• El Sistema pedirá un usuario y una contraseña.

• Para efectuar la sustitución de las instituciones es necesario hacer un click en la opción "Instituciones" presente en el área de estructura del sistema.

• El próximo paso es seleccionar la institución y hacer un click en "modifica" en la ventana que se abre a seguir.

• Para insertar una nueva institución es necesario hacer un click en el campo "adiciona" en la misma ventana.

Después de hacer un click en modificar el sistema se abrirá una ventana en la que se debe insertar el título de la institución o su logotipo y el hiperenlace.

Nombre: Nombre de la InstituciónImagen: Logotipo de la Institución (el uso de una imagen suprime el nombre de la institución)Enlace: Dirección electrónica de la institución

Ejercicio - cambiar la imagen a travéz del admin.

Después de las configuraciones necesarias para efectuar las alteraciones es necesario confirmarlas por medio de un click en Modifica y efectuar la grabación de todas las etapas anteriores.

!La inserción/alteración de las

instituciones debe efectuarse en todos los idiomas habilitados en el BVS Sitio. La Sintaxis %SKIN_IMAGE_DIR% debe preceder el nombre del archivo del logotipo; esta sintaxis garantiza que el logotipo utilizado será el cargado por la skin creada.

Cambiando las Instituciones

Configurando la CSS

El campo instituciones está identificado en el código XHTML en el <div id="institutionList">

•. Las definiciones de las instituciones son encontradas en el selector ".top #institutionList"

•Presente en las CSS´s styles.css y layout.css

En la CSS styles.css están definidos los colores y tamaños conforme se puede ver abajo:

text-align – define la alineación del texto dentro del área destinada a las instituciones;list-style – definida como none; por tratarse de una lista es común el uso de bullets, pero como esta lista está dispuesta en línea esos bullets han sido retirados;font-size: Define el tamaño de la fuente;text-decoration: aquí se puede definir si el texto será subrayado o no;color: define el color de la fuente de las instituciones (no se aplica a los logotipos

Banner Finalizado

Fin Parte I

bvs site customización de una instancia con bvs-site

Documents