ABCD-SITE GUIA DE DISEÑO GRÁFICO

21  Descargar (0)

Texto completo

(1)

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

(2)

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

(3)

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 Webb y código XHTMLc, 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

(4)

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.

(5)

Figura 3 - Portal de Colección

Tipo III o Página de Resultados

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:

(6)

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

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

(7)

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

(8)

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:

(9)

Figura 8 – Reemplazo del logotipo • Etiqueta: identifica el logotipo

• Imagen: imagen a cargarse como logotipo • Enlace: link al 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

(10)

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.

(11)

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

Configurando la CSS

(12)

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.

(13)

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.

(14)

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

(15)

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

(16)

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

(17)

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

(18)

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.

(19)

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

(20)

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.

(21)

Figura 32 – Cambiando los colores de las columnas en la CSS Debajo hay un ejemplo de la redefinición de los selectores mencionados arriba.

Figure

Actualización...

Referencias

Related subjects :