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

Presentación del tema: "BVS Site Customización de una instancia con bvs-site."— Transcripción de la presentación:

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][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.[2] –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][1] Web Standards Project – http://www.wasp.orghttp://www.wasp.org [2][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ón Nivel 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.

14 ! Desarrollar la imagen del banner sin identificación del que idioma está

15 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 Carpeta htdocs/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

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 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 La imagen del banner debe ser enviada vía transferencia de archivos para el directorio de imágenes common

20 Configuración en la CSS El banner está identificado en el código XHTML en el

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 En el ejemplo cambíó el color tambíen Fueron cambiadas el color y la imagen del banner

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. ArchivoDirectorio bvsLogotipo_en.gifhtdocs/images/public/skins/classic/en/ bvsLogotipo_es.gifhtdocs/images/public/skins/classic/es/ bvsLogotipo_pt.gifhtdocs/images/public/skins/classic/pt/

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

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ítulo Ejercicio Rótulo: Título del BVS Sitio Imagen: Imagen que represente el título del BVS Sitio (casos especiales) Mi Sitio Ejercicio Hacer esa tarea

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

35 Cambio en el título Configurando la CSS El título está identificado en el código XHTML en el

36 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

37 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

38 Ejercicio Cambiando el formato en LAYOUT.css OriginalAlterado

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 Copiar la imagen newlogo.gif ubicado en: \BVS\imagenes-customizadas\ para la carpeta \bvs\bvs-site\htdocs\image\public\skins\classic\es Ejercicio

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

45 Configurando la CSS El campo instituciones está identificado en el código XHTML en el. 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 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

47 Banner Finalizado

48 Fin Parte I