-SITE GUIA DE DISEÑO GRÁFICO Version 4.0.2 Tabla de Contenido Introducción... 2 Arquitectura del ABCD-Site... 2 Estándares Web...3 Accesibilidad de la Interfaz...4 Tipo I o Portal ABCD-Site...4 Tipo II o Portal de Colecciones o Galería...4 Tipo III o Página de Resultados...5 Instrucciones para Adaptación (básica)... 5 Estructura de archivos y carpetas en el servidor...6 Estructura de la hoja de estilo...7 Substitución del Logotipo...7 Subida de Imagen...7 Reemplazando la imagen en ADMIN...8 Substitución de Banner...9 Subida de imágenes...9 Configuración en CSS...9 Cambios en el encabezamiento... 10 Configurando la CSS... 11 Instituciones... 13 Cambiando las instituciones... 13 Configurando la CSS... 14 Configurando fuentes y colores:... 15 Configuraciones en el pie de página... 16 Configurando la CSS... 16 Anexo I (avanzado)... 17 Presentación fluida y presentación cerrada... 17 Configurando Columnas... 19 1
-SITE GUIA DE DISEÑO GRÁFICO Introducción ABCD-Site funciona como un módulo de ABCD el cual incorpora la idea de portal para unir a los usuarios Con recursos de información relevantes in sistemas enlazados de colegas, El propio catálogo en línea (OPAC) para recuperar la información del propio sistema, pero también otras bases de datos similares, y Con los proveedores de información (la biblioteca) mediante las comunicaciones (por ejemplo avisos o boletines) Este capítulo se divide en tres secciones, dos de ellas dedicadas a los conceptos y normas usadas y otro referido a las posibles adaptaciones a nivel básico. El Anexo I contiene temas avanzados en adaptación e instalación. La información está planteada como una guía genérica para ayudar a los usuarios en el proceso de cambiar la presentación y los estilos para ajustarse a los requerimientos de ABCD. No es la intención ofrecer un capítulo paso-a-paso, y se asume que el usuario tiene conocimientos previos básicos de XHTML y CSS, así como habilidades avanzadas en diseño y presentación Web. La información fue elaborada para guiar en el proceso de de diseño gráfico de sitios ABCD, usando la aplicación BVS-Site v4.0 de BIREME. La adopción del modelo gráfico se recomienda considerando los aspectos siguientes: El modelo de interfaz y navegación se basa en el libro Ergonomic Criteria for the Evaluation of Human-Computer Interfaces a y así ha sido implementado para facilitar e incrementar la eficiencia de la operación. Una interfaz estandarizada mejora la ejecución de tareas típicas de información localizada, en particular en un ambiente de fuentes de información en red. Arquitectura del ABCD-Site ABCD-Site es una versión adaptada y simplificada de la versión BVS-Site v.4.0 de BIREME. Puede obtener la versión completa en http://bvsmodelo.bvsalud.org/php/level.php?lang=es&component=27&item=10 La arquitectura de información y procesamiento de datos está estructurada en tres capas independientes e interoperativas. En la primer capa están los archivos de datos correspondientes a las tres fuentes de información de una Biblioteca Virtual. Encima de esa capa están los índices de acceso generados por otros servicios tales como ISIS, Google, OAI, Yahoo, etc. La última capa incluye las interfaces de acceso a la información. a Bastien JMC; Scapin D. Ergonomic Criteria for the Evaluation of Human-Computer Interfaces. Institut National de Recherche en Informatique et en Automatique, France, 1993. 2
Cada capa es operada dentro de ABCD-Site para componer la Red de Fuentes de Información, la Red de Indices, y la Red de Interfaz. La separación en capas permite la posibilidad virtualmente infinita de producir interfaces para acceso a contenidos y la disponibilidad de contenidos en formatos que sean apropiados a los diferentes idiomas, servicios, medios y dispositivos de acceso tales como pantallas de computador, impresoras, dispositivos de audio, PDAs, teléfonos celulares, etc. Figura 1 Arquitectura de procesamiento de ABCD-Site Con la operación de la Red de Interfaz, se espera promover la creación de una red de cooperación basada en el modelo de software libre. Esta red aspira a explorar y compartir nuevas interfaces para acceso a los contenidos de ABCD-Site. En consecuencia, el uso de fuentes de información en muchos servicios será más simple Estándares Web ABCD-Site opera usando estándares Web b y código XHTML c, con una estructura sin tablas (sin tablas como característica de diseño). Esto es un factor clave que permite la separación del contenido, los índices y las capas de presentación. Estos estándares, establecidos por el World Wide Web Consortium - W3C y otras entidades regulatorias, son un conjunto de reglas y estándares diseñados para crear e interpretar contenidos Web. El uso de estos estándares da surgimiento a sitios que son más accesibles a gran cantidad de personas y una gran diversidad de dispositivos de acceso puesto que el código XHTML se basa en marcas de contenido (markup), que permiten la asociación de la semántica al código. Adicionalmente, su uso facilita la creación e integración de Servicios Web, lo cuales componen un conjunto de estándares y protocolos abiertos usados para intercambio de datos e información entre aplicaciones, sistemas y servicios. b Web Standards Project http://www.wasp.org c Extensible Hypertext Markup Language 3
Accesibilidad de la Interfaz Accesibilidad en el Web significa que las personas con discapacidades físicas, sensoriales o cognitivas sean capaces de percibir, entender, navegar e interactuar con el Web y hacer su contribución. Las implementaciones de la interfaz de ABCD-Site son AA-Compliant (Web Content Accessibility Guidelines 1.0, WAI - Web Accessibility Initiative, W3C) d. Esto significa que todos los requerimientos críticos y otros que deberían lograrse están siendo cumplidos efectivamente. La navegación dentro del Sitio ABCD se basa en tres tipos generales de páginas Web: Tipo I o Portal ABCD-Site Página Web que opera el acceso a dos tipos o más de colecciones de fuentes de información. Figura 2 Página de inicio (home) del Portal del sitio ABCD La página Tipo I de ABCD-Site está formada por una colección de componentes de información generados dinámicamente de acuerdo a la organización del contenido o a través de Web Services. En páginas Tipo I, los componentes se distribuyen en las columnas de la interfaz como sigue: Columna 1 Redes: acceso al Sitio ABCD, otras bibliotecas, o dependencias de la misma institución. Columna 2 Fuentes de información: esta columna organiza el acceso a diferentes tipos de fuentes de información. Columna 3 Destacados y novedades: columna diseñada para habilitar la comunicación de novedades y destacados. Tipo II o Portal de Colecciones o Galería Esta página opera una sola fuente de información o una colección de fuentes de información del mismo tipo, tales como bases de datos bibliográficas, directorio de eventos, etc. d WAI 4
Tipo III o Página de Resultados Figura 3 - Portal de Colección Esta página permite la presentación y navegación desde los resultados de operaciones en una o más fuentes de información. A continuación hay una descripción de los procedimientos para adaptar un sitio usando el sistema ABCD-Site. Figura 4 - Página de resultados Instrucciones para Adaptación (básica) La interfaz ABCD-Site fue desarrollada para permitir una fácil y rápida adaptación. Requiere conocimientos básicos de CSS (Cascading Style Sheets), el idioma de estilo usado por la interfaz ABCD-Site. También es aconsejable usar: 5
1. 2. 3. un software de edición y tratamiento de imágenes un editor de HTML y CSS un cliente FTP para subir imágenes y archivos al servidor e. Estructura de archivos y carpetas en el servidor El sistema ABCD-Site usa una estructura de archivos para asignar los usos de éstos. Se requiere un conocimiento previo de esta estructura para adecuar la interfaz Figura 5 Estructura de directorios del Sitio ABCD-Site El directorio base no será analizado en este capítulo, puesto que este directorio es específico del sistema y no se usa en la adaptación de la interfaz. Este capítulo tratará con los directorios en htdocs el que incluye dos directorios que son específicos para la adaptación: CSS e image. Figura 6 Directorios que serán atendidos e Como ejemplos de software gratuito recomendamos - Irfanview para edición de imágenes - WS_FTP para FTP 6
El directorio css contiene las hojas de estilo de ABCD-Site. Para adaptar la interfaz, deberán ser cambiadas las hojas de estilo del directorio common. Este directorio aloja cuatro archivos CSS que serán detallados en la sección siguiente. El directorio image contiene todas las imágenes de ABCD-Site. Las imágenes del directorio public/skins/classic son las que se muestran en el ABCD-Site, llamadas imágenes públicas, las cuales están divididas en cuatro subdirectorios. common: contiene imágenes comunes a todos los idiomas en el Sitio ABCD-Site, por ejemplo imágenes que no son identificadas en un solo idioma. Ejemplo: banners y colores de fondo; en: contiene archivos específicos al idioma inglés. Por ejemplo: logotipo del ABCD-Site, cabezales el sitio (cuando están producidos como imágenes), etc.; es: contiene archivos específicos al idioma español. Ejemplo: Idem fr: contiene archivos específicos al idioma francés. Ejemplo: Idem pt: contiene archivos específicos al idioma portugués. Ejemplo: Idem Estructura de la hoja de estilo Las hojas de estilo de ABCD-Site se dividen en cuatro archivos diferentes en el directorio: htdocs/css/public/skins/classic/common general.css esta CSS tiene los atributos generales del sitio, tales como color y tipos de letras estándar usados en el sitio. layout.css en esta hoja se tienen las definiciones de tamaños, posiciones de los elementos, márgenes, etc. styles.css en esta CSS hay definiciones de estilo de ABCD-Site, elementos de colores, imágenes de banners, estilos tipográficos, bordes, etc. components.css tiene definiciones de los componentes de ABCD-Site. En este archivo pueden hacerse cambios a elementos específicos de la Interfaz. Ejemplo: cambiar el color de un componente singular, tal como la caja de consulta. Las hojas de estilo se cargan por el sistema en el orden que aparecen en la lista previa. De esta manera, cualquier alteración de la última CSS (esto es, componentes) tendrá preferencia sobre los elementos definidos en las CSS s previas. Por esta razón es que componentes es la CSS que contiene las definiciones de los elementos específicos. Substitución del Logotipo Cuando se instala la interfaz ABCD-Site, ya viene con los logotipos de ABCD-Site por defeco en sus directorios respectivos; sin embargo, dependiendo del diseño de página, podría ser necesario reacomodar otra vez los logotipos. Se recomienda usar un formato.gif como logotipo pues soporta transparencia. Note que el logotipo debe estar disponible en todos los idiomas disponibles en su Sitio. Subida de Imagen Las imágenes de logotipo, si no están en una computadora local, deben enviarse vía FTP al directorio específico de cada idioma. Ejemplo: Suponiendo que hay un logotipo general ABCD-Site (independiente del idioma), logoabcd.gif, entonces deberá almacenarlo en: /site/image/common/logoabcd.gif 7
Pero si el logotipo es dependiente del idioma (tiene inscripciones de texto), entonces deberá preparar uno para cada idioma: logoabcd_es.gif, logoabcd_pt.gif, y subirlos a sus directorios respectivos. Archivo Directorio logoabcd_en.gif htdocs/images/public/skins/classic/en/ logoabcd_es.gif htdocs/images/public/skins/classic/es/ logoabcd_pt.gif htdocs/images/public/skins/classic/pt/ logoabcd_fr.gif htdocs/images/public/skins/classic/fr/ Tabla 1 Carga de Logotipo Reemplazando la imagen en ADMIN Después de cargar las imágenes de logotipo, el próximo paso será reemplazar el logo en la interfaz. Eso se hace a través del Sistema de Administración del Sitio, disponible desde la dirección del ABCD-Site más /admin. De este modo, si la interfaz tiene dirección http://abcd_site.org el Sistema de Administración estará localizado en: http://abcd_site.org/admin. El Sistema le solicitará un nombre de usuarios y una contraseña. Para reemplazar el logotipo, solicite ABCD logotipo en el área de estructura del Sistema de Administración y, luego, solicite en modificar y cambie el ítem que estará disponible en el sitio ABCD-Site. Figura 7 Pasos para cambiar el logotipo El logotipo se reemplaza en la próxima ventana: 8
Etiqueta: identifica el logotipo Imagen: imagen a cargarse como logotipo Enlace: link al logotipo Figura 8 Reemplazo del logotipo Después de los ajustes de la configuración para implementar los cambios, es necesario confirmarlos El logotipo debe cambiarse para todos los! idiomas habilitados en ABCD-Site. La expresión de sintaxis %SKIN_IMAGE_DIR% debe preceder el nombre del archivo usado para el logotipo, y la sintaxis asegura que el logo usado será cargado por la capa creada Substitución de Banner El banner es uno de los elementos más importantes en el Sitio ABCD-Site. Es responsable por la representación artística del contenido de la Interfaz y por la correlación de los elementos, asegurando consistencia en diseño y contenido. El banner debería contener solamente imágenes puesto que será insertado en un área común y servir como elemento gráfico para todos los idiomas. El tamaño del banner es de 760 pixels de ancho por 110 pixels de alto. Subida de imágenes La imagen del banner debe ser enviada, vía transferencia de archivos, al directorio images de common. Configuración en CSS El banner está identificado en el código XHTML en <div class top > 9
Figura 9 Localización del banner en el código XHTML. Las propiedades y configuraciones del banner se describen en el archivo styles.css como sigue: Figura 10 Sustitución del banner en la CSS Para sustituir el banner edite la propiedad background en el selector (.top) ubicando la imagen deseada y haciendo los ajustes de color que sean requeridos Cambios en el encabezamiento El encabezamiento ABCD-Site se cambia a través del Sistema de Administración del Sitio, disponible desde la dirección base del ABCD-Site más /admin. De modo que si la interfaz tiene la dirección http://abcd_site.org el Sistema de Administración estará localizado en http://abcd_site.org/admin. El Sistema solicitará un nombre de usuario y una contraseña. Para reemplazar el encabezamiento de la interfaz, pulse en la opción Identificación presente en el área de estructura del sistema. El siguiente paso es seleccionar el encabezamiento y pulsar en Modificar en la ventana que se abrirá a continuación. 10
Figura 11 Pasos a seguir para cambiar el encabezamiento de la interfaz Después de seleccionar en [Modificar], el sistema abrirá una ventana donde deberá ingresarse el Encabezamiento o una imagen del ABCD-Site Figura 12 Ingresando un encabezamiento en ABCD-Site Etiqueta: Encabezamiento de ABCD-Site Imagen: Imagen representando el encabezamiento de ABCD-Site (casos especiales) Después de los ajustes de configuración para implementar los cambios, es necesario confirmarlos pulsando en [Modificar], grabando los pasos previos.! El Configurando la CSS encabezamiento de ABCD-Site debe cambiarse para todos los idiomas habilitados en el sistema. Cambiándolo en un idioma no cambiará automáticamente los otros idiomas. E encabezamiento se identifica en el código XHTML como <div id= identification > 11
Figura 13 Localización del título en el código XHTML Después que el encabezamiento se reemplaza en el sistema de administración de ABCD-Site, aparecerá una lista mostrando todas las alteraciones posibles para el encabezamiento de ABCD-Site. En CSS styles es posible cambiar el color y/o el tamaño de la fuente en el selector.top #identification H1. Use el atributo color para cambiar colores y use el atributo font-size para cambiar el tamaño del encabezamiento. Figura 14 Cambiando el color del encabezamiento en los estilos de la CSS. En CSS layout es posible cambiar la posición y/o el tamaño del área designada para el encabezamiento en el selector.top #identification. Use width para cambiar el ancho del área designada para el encabezamiento y height para cambiar la altura del área designada para el encabezamiento. En la misma CSS es posible cambiar los márgenes del encabezamiento en el selector.top #identification H1 cambiando las definiciones en el atributo margin. Figura 15 Un ejemplo de cambio del margen en el encabezamiento 12
Instituciones El campo Instituciones presenta lo nombres, logotipos y enlaces (cuando existen) de las instituciones responsables por el Sitio ABCD-Site. Cuando la institución está representada por su logotipo, es importante tomar en cuenta cuando se prepara la imagen. Debería ser formato GIF, porque este formato acepta la transparencia. El tamaño definido en la configuración estándar de ABCD-Site es de 55 pixels de altura. Cambiando las instituciones Para hacer cambios en Instituciones, es necesario seleccionar la opción Instituciones localizada en el campo de estructura del sistema. El próximo paso es seleccionar la Institución y pulsar en [Modificar] en la ventana que se abre a continuación. Para insertar una nueva institución es necesario seleccionar el campo agregar en la misma ventana. Figura 16 Cambiando las Instituciones Después de pulsar en [Modificar] el sistema abrirá una ventana en la que es necesario insertar el título de la Institución, o su logotipo, y su hiperlink. Figura 17 Inclusión o alteración de la caja de Instituciones 13
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: La dirección electrónica de la Institución. Después de los ajustes de la configuración para implementar los cambios, es necesario confirmarlos pulsando en [Modificar], grabando los pasos previos. Insertar/cambiar Instituciones debe hacerse en! todos los idiomas de ABCD-Site. La sintaxis %SKIN_IMAGE_DIR% deberá preceder al nombre del archivo de logotipo así la sintaxis asegura que el logotipo usado será cargado en la capa creada. Configurando la CSS El campo Instituciones se identifica en el código XHTML en <div id= institutionlist > Figura 18 Localización del campo Institución en el código fuente Después de configurar el campo Instituciones, puede ser necesario hacer algunos ajustes en la CSS. Las definiciones de las instituciones se encuentran en el selector.top #institutionlist, el que se encuentra en la presentación de CSS styles. CSS style define los colores y tamaños como sigue: Figura 19 Ejemplo de ajustes de color y fuente para las instituciones text-align define la alineación en el campo designado para instituciones; list-style está definido como none. De usarse una lista, es frecuente el uso de viñetas (bullets), pero si la lista se presenta en renglones, las viñetas deberán ser removidas; 14
font-size: define el tamaño de la fuente; text-decoration: aquí es posible definir si el texto estará o no subrayado; color: define el color de la fuente de las instituciones (no se aplica a logotipos). Configurando fuentes y colores: Las familias de fuentes tipográficas usadas en la Interfaz del Site son Trebuchet MS y Verdana, porque de acuerdo a las recomendaciones generales, dan una excelente legibilidad en todos los tamaños normalmente usados en la Web. Son fuentes sin-serif, y por esta razón altamente recomendadas para leer en las pantallas del computador, y ya están instaladas en la mayoría de los sistemas operativos. Como una alternativa, es posible usar la familia Arial, que presenta los mismos atributos básicos. Mediante la CSS es posible redefinir las familias tipográficas. Las definiciones generales de fuente están localizadas en el archivo general.css como se muestra en la figura abajo: Figura 20 Selectores responsables para las fuentes en la CSS Para cambiar las fuentes, redefina la propiedad font-family en los selectores BODY, INPUT, TEXTAREA, SELECT y H1, H2, H3 como se muestra en la figura. Las configuraciones para tamaño de fuente están localizadas en el mismo archivo y definidas en el atributo font-size. En la instalación estándar del sitio ABCD-Site, los colores de las fuentes no están definidas en la CSS. Es necesario crear el campo color dentro de los selectores. Debajo hay ejemplos acerca de cómo definir color en los selectores. Figura 21 Ejemplos de definición de colores en los selectores 15
Note que en los dos primeros selectores no hay definición de color para los elementos descriptos, asumiendo que todos los elementos tipográficos del Sitio serán negros. Debajo hay un ejemplo de definición de color y el resultado en el Sitio. Figura 22 Definición de color en la CSS y el resultado en el Sitio Configuraciones en el pie de página En la instalación estándar de ABCD-Site las notas al pie de página tienen información institucional, localización y contacto. Configurando la CSS La estructura de la nota al pie se identifica en el código XHTML <div id= footnotes >. Figura 23 Localizando la estructura del pie de página en el código fuente Las configuraciones de colores de fondo, color y tamaño de la fuente están en el archivo styles.css, en los selectores siguientes: 16
Figura 24 Editando los colores del pie de página en la CSS Anexo I (avanzado) Presentación fluida y presentación cerrada Llamaremos presentación fluida (fluid layout) a la imagen que ocupa el 100% del área de trabajo del sitio web, incluso en la redefinición de la ventana, la presentación y el tamaño se adaptan al nuevo formato. Presentación cerrada (closed layout) es la que ocupa un cierto porcentaje de dicha área, un área fija, independiente del tamaño de la ventana. Figura 25 Presentación fluida y presentación cerrada En la instalación de ABCD-Site, la presentación estándar es fluida. La CSS que define las configuraciones de la página está en el archivo \ABCD\www\htdocs\site\css\public\skins\classic\common\layout.css, en el selector.container 17
Figura 26 Modelo de presentación fluida Note que en el código arriba no hay especificación del ancho del container, lo que caracteriza una presentación fluida. Debajo un ejemplo de la definición del ancho del container y la presentación resultante de la página web. Figura 27 Modelo de presentación cerrada Para definir el fondo del cuerpo, cambie en el archivo \ABCD\www\htdocs\site\css\public\skins\classic\common\general.css el selector BODY -> background e incluya el color que desee. Debajo hay un ejemplo de la definición del color de fondo en el BODY y la presentación resultante en el sitio web. 18
Figura 28 Modelo de presentación cerrada con aplicación de color de fondo Configurando Columnas Las estructuras de las columnas están identificadas en el código XHTML como firstcolumn, secondcolumn and thirdcolumn. Figura 29 - Columnas Las propiedades de configuración del tamaño de la columna se describe en el archivo layout.css, como: 19
Figura 30 Configuración de columnas Para incrementar o reducir el tamaño de las columnas, edite el campo width en cada uno de los selectores (.middle.firstcolumn,.middle.secondcolumn,.middle.thirdcolumn) con los valores deseados. La imagen debajo muestra la redefinición de los valores. Figura 31 Redefiniendo los valores de columnas En el archivo styles.css, es posible cambiar el color de fondo de las columnas, colores y ancho de los bordes y el tamaño de la fuente. Para cambiar el campo background, border-top, border-left and font-size of selectors:.firstcolumn DIV,.secondColumn.centerLeftColumn DIV,.secondColumn.centerRightColumn DIV,.thirdColumn DIV, #search, #searchconcepts,.level2.middle DIV. 20
Figura 32 Cambiando los colores de las columnas en la CSS Debajo hay un ejemplo de la redefinición de los selectores mencionados arriba. Figura 33 Demostración de cambio de color de columna 21