Título
Tipo de Proyecto	Proyecto de Titulación
Palabras Clave	administración de archivos, palacios de la memoria, CONTEXTA, AURA, Web semántica
Período	2008-2009
Carreras	Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Esteban Saavedra
Profesor	Herbert Spencer
URL	http://proyectos.ead.pucv.cl/aura/

Proyecto de Titulación Diseño Gráfico
Esteban Saavedra Nilo

Etapas del proyecto
Administrador Web de Archivo | Diseño de Wireframe e interfaz | Interacción, gestión y visualización de contenidos

Otras versiones del estudio

Resumen

El objetivo de este estudio es crear una administrador de archivos con una interfaz genérica que se pueda aplicar en cualquier base de datos de archivos, que permita identificar contenidos y nombrar sus jerarquías visuales, con la capacidad de transversalizar los contenidos, de generar relaciones y potenciar de esta forma la acceder a los contenidos La web semántica y su desarrollo en los motores de recuperación de información apuntan al desarrollo de éstos objetivos, sin embargo, es necesario que la estructura de manejo de contenidos sea flexible desde su administración hasta la visualización de resultados. Para ello se desarrolla a continuación las directrices necesarias para la implementación de un modelo genérico de contenidos que se gestionan respondiendo a relaciones semánticas para los archivos patrimoniales de Valparaíso.

Introducción

El diseño de interfaces de usuarios semánticas tiene como desafío disponibilizar grandes cantidades de datos de manera eficaz y eficiente, lo que permite al minimizar los tiempo de búsqueda, captando la atención de las personas, desafió no menor considerando que la atención es un "bien escaso" nuestros días; para esto es fundamental que las relaciones de lo que se esta viendo se hagan de manera natural, visualmente sean intuitivas y fáciles de comprender, la interfaz debe permitir que el usuario acceda al conocimiento con comodidad y explorar con facilidad. Al desarrollar una interfaz genérica se busca expresar necesidades de información orientadas a solucionar problemas para obtener respuestas relevantes.

El desafío es lograr crear una interfaz genérica que se pueda aplicar en cualquier base de datos de archivos, identificar contenidos y nombrar sus jerarquías visuales.

El proyecto AURA tiene como piloto el archivo patrimonial “José Vial Armstrong” perteneciente a la escuela de arquitectura y diseño, PUCV, este caso particular, cuenta con una gran colección de material relacionado con la arquitectura, el diseño y la historia de la facultad, entre otros su catalogo consta de una variedad de nombres y clasificaciones que en su mayoría solo tienen relación a nivel institucional, por lo que hay que intervenir y crear una nueva estructura valida tanto para este caso especifico como para otros archivos que poseen un nivel de complejidad similar o incluso mayor.

Este estudio se basa en la profundización del manejo de los contenidos digitales de los Archivos Históricos o Patrimoniales apuntando a desarrollar patrones de diseño que mejoren las relaciones semánticas entre los artefactos para la accesibilidad de los usuarios. Cada archivo tiene una cantidad de elementos organizados en estructuras rígidas que responden a su catalogación física, de manera que al momento de digitalizar los contenidos se hace necesario entregar la información de un punto de vista más amplio. Las jerarquías tradicionales de archivística tienen la desventaja de mantener los artefactos aislados en lo más profundo de Series o colecciones, perdiéndose la capacidad de transversalizar los contenidos, de generar relaciones y potenciar de esta forma su accesibilidad ya que sólo se puede llegar por un camino. La web semántica y su desarrollo en los motores de recuperación de información apuntan al desarrollo de éstos objetivos. Sin embargo es necesario que la estructura de manejo de contenidos sea flexible desde su administración hasta la visualización de resultados. Para ello se desarrolla a continuación las directrices necesarias para la implementación de un modelo genérico de contenidos que se gestionan respondiendo a relaciones semánticas.

Proceso de Implementación

Materialización del proyecto diseño en XHTML Y CSS

Html(HyperText Markup Language)

Básicamente html es un lenguaje de etiquetas conocido también como lenguaje de marcado, W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global".

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML con lo cual se le agregan ciertas mejoras y restricciones propias del XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, también es descendiente de SGML).

Originalmente en HTML se incluía información sobre el contenido y sus imágenes, luego las páginas comenzaron a incluir datos de su aspecto: márgenes, tamaños tipográficos y colores. Es así como XHTML se encarga de los contenidos y CSS del aspecto

El proceso de indicar las diferentes partes que componen la información se denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan etiquetas.

Asi la estructura básica del html es

<nombre_etiqueta> ... </nombre_etiqueta>

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrónicos. La principal desventaja es que pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos. A pesar de estos las etiquetas que utilizamos para nuestro sitio no se preocupan del largo que posean ya que buscan ser claras y precisas, para facilitar la comprensión y ubicación de los elementos tanto en el XHTML como en la CSS

Mapa de divs

Los mapas de divs son esquemas estructurales de código que funcionan a partir de divisiones de la página, las cuales actúan como contenedoras de etiquetas específicas para cada caso. Concretamente grafican la relación entre todos los divs que conforman un documento de HTML, manteniendo visualmente las bases de la diagramación de cada página Web, es decir: Cabecera, cetro, buscador, contenedor y pie (en el caso de nuestro sitio), pero detallando todas las etiquetas que son usadas dentro de esta estructura. De esta manera se evidencia la ubicación de cada id y clase, permitiendo a quién tenga que utilizar el código en otra ocasión, tenga un comprensión rápida de la estructura y sea fácil acceder para realizar modificaciones.
Carpeta de título:Bitácora Colectiva de Travesías Amereida, Katherine Exss C - Estefanía Trisotti B, Profesores: Herbert Spencer y Manuel Sanfuentes, Cap. Implementación, Mapa de Divs, pág 108. Escuela de Arquitectura y Diseño PUCV, 2008

NOTA: las capas se identifican de dos formas, con id o con class (clases). El uso es más o menos indistinto, si bien el manual de buenas maneras identifica las capas ID como capas únicas que no se repiten en una misma página, mientras que las del tipo CLASS podemos usarlas más de una vez. En ocasiones puede que tengamos que usar CLASS para una capa cuyo ID necesitemos para otra cosa (javascript, jQuery, etc).

Css (Cascading Style Sheets)

La CSS u hoja de estilo nos permite separar el contenido gráfico de nuestra página respecto al código HTML, PHP, ASP, etc, lo que ayuda a organizar y separar las faena al momento de programar un sitio web. Para trabajar en la hoja de estilo se debe ser muy organizado y si bien hay miles de consejos y trucos la forma de trabajo es parte de cada uno. El mayor problema con el que nos encontramos al desarrollar la CSS son los navegadores, sus distintas versiones y la plataforma donde se visualiza el sitio y aunque poco a poco el estándar esta cada vez más desarrollado, esta tarea es requiere bastante trabajo.( y mas será el trabajo que dará IE).

El código desde cero

Uno de los trucos que use para comenzar es resetear la CSS para evitar que cada navegador dé por hecho algunos estilos que si no se definen aparecen así porque sí. Navegando podemos encontrar variadas formas de resetiar la CSS esta es la que use yo .


<code>

/*se borran para casi todos los tags conocidos,cualquier margen,espacio,interlineado,bordeados,etc*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,  img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd,  ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,  tr, th, td {

margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/*para quitar cualquier efecto predefinido sobre enlaces cuando tienen el foco y  nos olvidamos de los enlaces subrayados*/

:focus { outline: 0;} 

/*este cambio de estilo debe hacerse siempre que vayamos a remarcarlo de otra manera, pues de no hacerlo tendremos problemas de accesibilidad a nuestra página  */

a, a:link, a:visited, a:hover, a:active{text-decoration:none}

/*Para tablas y sus casillas de salida las dejamos con celdas separadas, que los textos se alinean a la izquierda y eliminamos la negrita para campos tipo <td>*/

table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}

/*Elimina el borde en imágenes o iframe aunque formen parte de un enlace*/

img, iframe {border: none; text-decoration:none;}

/*para evitar los símbolos  en los elementos de lista*/

ol, ul {list-style: none;}

/*Para variables típicas de formulario usaremos la tipografía que definamos  expresamente y al tamaño que definamos*/ 

input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}

/*Convertimos el <hr> en una linea simple*/

hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
</code>

Estructura

La estructura del sitio se define previamente en el junto con la arquitectura de la información y el diseño de wireframes este paso es previo a realizar la CSS pero es muy importante tenerlo claro para después no poner parches dentro de nuestro sitio por que nos falta algo o la estructura planteada es deficiente, además de que una vez que se empieza a hacer el código hacer cambio constantemente puede llegar una tarea muy tediosa.

Básicamente en nuestro sitio tenemos tres tipos de plantillas, de una, dos y tres columnas, que se utilizaran para realizar todas las páginas del sitio. Cualquier proyecto web puede tener una gran cantidad de hoja de estilos en nuestro caso se esta programando e solamente en una por lo que el etiquetado y lenguaje usado debe ser claro.

Lenguaje

Para facilitar la comprensión de la CSS todas la etiquetas que se utilizan están en español (aunque la gran mayoría usa el ingles, y el código en si también) está pensado para un público de habla hispana. El tipo de escritura se conocida como etiquetado de camello así se eliminan las preposiciones e ilativos y se escribe solo con minúsculas y mayúsculas para diferenciar las palabras por ejemplo columnaDerecha, mesaTrabajo, etc. Esto es para identificar rápidamente los elementos a modificar dentro de la cascada de estilos.

Cualidad genérica modificable

El desarrollo de la interfaz del Administrador web de archivo es de carácter genérico, esta cualidad debe permitir que la plataforma se adapte a las necesidades de cada institución permitiendo a los administradores de los archivos modificar la gama de colores de los iconos y links sin perder la estructura principal para que los usuarios finales puedan navegar por los archivos de la red ARPA de forma clara y sencilla, teniendo claro que han cambiando de archivo pero que este pertenece a la misma red.

Iconografía adaptable

La iconografía será la mismas para todo los archivos la cualidad que cambiara como se menciono anteriormente será el color; los icono están calados sobre un fondo blanco que es el mismo color de fondo que tiene la interfaz el color fondo no es modificable así propiedad de los iconos podrá surtir efecto.

Construcción de los iconos

El programa usado para diseñar los iconos fue Adobe illustrator trabajo que realizo Nicole Dupré, luego fueron modificados y adaptados para trabajar con pixeles , el programa usado fue Adobe Fireworks ideal para trabajar diseños de pantallas. Explicare brevemente las herramientas utilizadas y cuál es su función.

Paso a paso primero se dibuja lo que va a ser calado sobre un Path blanco.

Para calar el dibujo en el Path blanco se utiliza la herramienta “Punch” que se encuentra en “Modify > Combine path”, para que dé resultado se debe tener seleccionado dos o más paths. Luego se añaden los detalles interiores (como las líneas de en el icono de textos) y para el sombreado interior selecciona Filters + > Bevel and Emboss > Inset Emboss y modifican las propiedades según los parámetros de diseño.

Acá les dejo un vídeo con el paso a paso

Links

Los links son visualmente muy importantes en nuestro sitio ya que son numerosos y juegan un papel importante a la hora de dar color e imagen a cada página, es por ellos que todos poseen un mismo color, para resaltar su jerarquía por sobre al de los textos para que sean fácilmente reconocibles. Con un leve cambio en el código CSS, cambia toda la imagen del Administrador web en lo que a color se refiere. Evitando así el común subrayado bajo los links, que genera mucha suciedad visual a abusar el ellos.