BVS Site

1. BVS Site Customización de una instancia con bvs-site

2. 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.

3. 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

4. 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

5. Tipo I o Portal BVS Pá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ón Fuentes e flujos de información Columna III – Redes de ambientes aprendizes e informados

6. Tipo II Portal de Colección o Galería

7. Tipo III Página de Resultados

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

9. 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.

10. Estructura de los archivos y carpetas en el servidor En nuestro ejemplo prático

11. 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".

12. 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:

13. 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.

15. Estructura de las hojas de estilo Las hojas de estilo del BVS Sitio están divididas en 4 archivos diferentes en la Carpeta htdocs/css/public/skins/clasic/common, • 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 – enlayout 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 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

16. 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

17. 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

18. 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.

19. Carga (upload) de la imagen • La imagen del banner debe ser enviada vía transferencia de archivos para el directorio de imágenes common • bvs-site\htdocs\image\public\skins\classic\common Ejercicio Copiar la imagen \BVS\imagenes-customizadas\bannerMiSitio.jpg para \bvs\bvs-site\htdocs\image\public\skins\classic\common

20. Configuración en la CSS El banner está identificado en el código XHTML en el <div class="top">

21. 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.css El nombre de banner.jpg para banner_misitio.jpg Ubicación del archivo styles.css \BVS\bvs-site\htdocs\css\public\skins\classic\common

22. El banner debe quedarse asi Fueron cambiadas el color y la imagen del banner En el ejemplo cambíó el color tambíen

23. 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.

24. 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)

25. 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.

26. Ejercicio Copiar el archivo logo_misitio.gif ubicado en: /BVS/imagenes-customizadas/ para la carpeta \bvs\bvs-site\htdocs\image\public\skins\classic\es

27. 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

28. Cambio de la imagen en el ADMIN Ejemplo

29. 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

30. Cambio de la imagen en el ADMIN

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

32. 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 

33. Cambio en el títuloEjercicio Rótulo: Título del BVS Sitio Imagen: Imagen que represente el título del BVS Sitio (casos especiales) Ejercicio Hacer esa tarea Mi Sitio

34. 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

35. Cambio en el títuloConfigurando la CSS El título está identificado en el código XHTML en el <div id="identification">

36. Cambio en el título Configurando la CSS En la CSSstyles.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%; }

37. En CSSlayout.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

38. EjercicioCambiando el formato en LAYOUT.css Original Alterado

39. 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.

40. Ejercicio Copiar la imagen newlogo.gif ubicado en: \BVS\imagenes-customizadas\ para la carpeta \bvs\bvs-site\htdocs\image\public\skins\classic\es

41. 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.

42. 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ón Imagen: 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

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

44. Cambiando las Instituciones 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.

45. 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

46. En la CSSstyles.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

47. Banner Finalizado

48. Fin Parte I