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
Estructura de los archivos y carpetas en el servidor
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".
Estructura de los archivos y carpetas en el servidor
"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:
Estructura de los archivos y carpetas en el servidor
• 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
Cambio de la imagen en el ADMIN
Ejemplo
Cambio de la imagen en el ADMIN
• 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
Cambio de la imagen en el ADMIN
!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
Top Related