Mémoire: diseño de entornos digitales para el registro y memoria by Gabriela Pérez Ponce

archivo histórico travesías

Índice Prólogo

Introducción

Metodología del proyecto

1. Observación

1.1 Investigación teórica 1.2 Análisis 1.3 Contextualización

13 21 33

2. Requerimientos

2.1 Criterios generales 2.2 Brief del proyecto 2.3 Objetivos y proyecciones

47 55 59

3. Modelación y esquemática

3.1 Modelos visuales 3.2 Diagramas - esquemas

65 72

4. Prototipado

4.1 Arquitectura de información 4.2 Wireframes

87 117

5. Diseño

133

5.1 Herramientas de desarrollo 5.2 Interfaz

135 145

6. Implementación

173

6.1 Depuración 6.2 Entregables

175 179

Referencias

199

Colofón

203

Prólogo “the musician should put the sounds first, building the music up from [them] rather than developing the music, then working down to the sounds that make it up.” N. Senada El Diseño se da en un proceso continuo de integración (material, formal y espiritual) dentro de un devenir histórico que se consolida cada vez en una obra singular. No existe Diseño —ni tampoco Arte, me atrevo a decir— aislado de su situación; por el contrario, justamente la potencia poética de su aparición toma su impulso desde ese presente y de sus ramificaciones que lo logran situar, con plena propiedad y sentido, en su tiempo y lugar. Hoy, a medida que el oficio del diseño gráfico va evolucionando, reconocemos la necesidad de articular arquitecturas de lenguaje más adecuadas para los contextos en los que nos desenvolvemos. Esto es, la necesidad de reconocer que los campos gráficos están conectados entre sí, que las organizaciones para las cuales trabajamos requieren de múltiples voces y escalas apelando a un sistema gráfico subyacente que sea coherente y que trascienda a todos ellos. Abordar el diseño gráfico con esta óptica es el sentido y la lección de estos cuatro proyectos: Stampa, Pyxis, Gamma y Mémoire. Cada uno es una obra con su propio valor intrínseco, pero todos ellos obedecen a una arquitectura gráfica y editorial que hace eco de la organización para la cual se diseñaron, la e[ad] Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso. Es curioso reconocer que el diseñador gráfico se vale de muchos elementos para construir su obra sin necesariamente ser el autor de ellos: tipografía, imagen corporativa, ilustración, fotografía, textos, etc. El diseñador compone y articula elementos ya creados para definir la forma de su lectura, utiliza ladrillos hechos por otros (o patrones prefabricados) y añade el cemento que permite articular la comunicación entre la organización y el lector. En este prólogo quiero hablar de ese cemento. La metáfora de la química1 me parece acertada para explicar el paralelismo entre la estructura de la materia y la arquitectura del lenguaje gráfico que buscamos definir: Toda la materia (ya sea sólida, líquida o gaseosa) está compuesta por átomos; estos átomos se enlazan en moléculas, las moléculas constituyen materiales y los materiales pueden llegar a constituir organismos.

prólogo

Los diversos órdenes de magnitud están radical y absolutamente determinados, unos por otros, por lo que pequeños cambios a nivel atómico pueden repercutir en gruesas modificaciones en la escala del organismo. Y, en el sentido opuesto —ya rebasando la metáfora química— el organismo, en su continuo ajuste, puede llegar a modificar sus unidades discretas mínimas, redefiniendo su estructura atómica elemental. Así están pensados estos cuatro proyectos entre sí. Stampa2, a cargo de Catalina Reyes, corresponde a las unidades gráficas mínimas —los átomos de nuestro sistema— como los signos de un alfabeto propio. Si bien los elementos fundamentales incluyen otros componentes como magnitudes y colores, los símbolos gráficos son fundacionales en su sentido formal y lingüístico, con un ADN y un trazo propio. Sus símbolos son pequeñas imágenes abstractas, refinadas luegos de un largo proceso de síntesis, hasta llegar a una colección que logra abarcar cierta totalidad de “requerimientos semánticos” de la organización, en este caso, la escuela. Stampa se define como una familia tipográfica con dos pesos, Stampa Regular y Stampa Ligera. Pyxis3 corresponde al segundo escalón, a las moléculas que articulan las unidades gráficas y de interacción, así como la grilla que define las reglas y le da cabida a estos elementos. Sus definiciones son completamente generales y abiertas, porque es la fundación anterior al uso específico. Es lo que comúnmente se llama “manual de uso de la imagen gráfica” de una organización, que define las especificaciones gráficas para variados soportes y escalas, sólo que exaltado al plano digital llega a transformarse en un framework o herramienta de trabajo que permite maquetear y construir. Aquí se definen todas las medidas, proporciones, tonos y cadencias gráficas. Junto con esto, aparecen los elementos interactivos característicos de una interfaz gráfica, así como sus reglas de adaptación a los múltiples formatos de pantalla.

El diseñador Brad Frost lo nombra como “Diseño Atómico” al sistema jerárquico de elementos constituyentes de un framework para el diseño Web; Frost, 2013 http://bradfrostweb.com/blog/post/atomic-web-design/ 2 http://eadpucv.github.io/stampa/ 3 http://eadpucv.github.io/pyxis/ 4 http://eadpucv.github.io/gamma/ 5 Lo propio del diseño, su conocimiento, radica en el diseñar mismo; en su modo de proceder, de informarse, de colaborar y, por supuesto, de materializar y dar forma. En este sentido, la observación, entendida como “la vía poética-creativa de llegar a la forma”, es la materia que siempre acompañará a todo taller. En el caso del diseño gráfico, que aparece como una constante en todos los proyectos es que éste “sujeto a editar” (contenido y materia) es una organización. Es para una organización –de personas, por supuesto– que hay que construir una voz, un relato, un modo de relatar, un modo visual de aparecer, un modo de interactuar, etc. Es una situación donde las piezas gráficas conocidas están estructuradas desde una matriz anterior, son la superficie de algo mayor, como la punta del iceberg o las sombras proyectadas del mito de la caverna. La observación del diseño debe dilucidar este acto mayor que implica una organización. El croquis de observación tradicional, que observa al habitar humano, los espacios y las luces en las que se inserta, etc; no es suficiente. Necesitamos más dimensiones. Hay que penetrar aún más en esta realidad. En una suerte de triangulación matemática, similar al trabajo de los primeros cartógrafos que debían deducir un mapa a partir de observaciones parciales de la costa, mediciones estelares y mediciones temporales, de vientos y corrientes. Ese mapa nunca antes visto era sólo comparable a cómo nosotros, seres humanos, nos imaginábamos observados por un Dios que está en el cielo. ¿cómo es este mapa? ¿cómo es este juego del pensar algebraico para desencadenar otro lenguaje? 6 http://eadpucv.github.io/memoire/ 1

prólogo

Gamma4 es el tercer escalón, el material de construcción. Corresponde a la aplicación sistemática de Pyxis a una plataforma de gestión de contenidos, en este caso Wordpress. Se trata de llevar a Pyxis a plantillas de diseño específico para un sitio complejo, como ha llegado a ser el sitio de la escuela después de más de 15 años de evolución. Por supuesto, la abstracción genérica de un tema de Wordpress va acompañada del caso particular de los contenidos, de las múltiples adaptaciones y ajustes sobre la marcha que demanda este organismo vivo, así como de las vinculaciones transparentes a otros sistemas, como la wiki o el sitio de las travesías. Idar González y Juan Antonio Godoy trabajaron Pyxis y Gamma de manera conjunta, informándose y actualizándose de manera recíproca para cuidar la absoluta coherencia lógico-gráfica del sistema. De hecho, al comienzo, todos participaron del diseño del framework Pyxis desde alguna arista: las proporciones tipográficas, la paleta de color, la grilla y los elementos de interacción; todos ellos expresiones de la organización que se observa5 e interpreta gráfica y digitalmente. Mémoire6, a cargo de Gabriela Pérez, corresponde al último peldaño de este sistema y a la apuesta de su disponibilidad y apertura para plantear nuevos servicios —con sus correspondientes interfaces gráficas— a partir de un orden y a una lógica establecida de antemano. Mémoire se trata del futuro sitio del archivo histórico de la escuela, de su modo de disponibilizar su material y de presentar también su material editado. El pensamiento del servicio desde la interfaz, más allá de una plataforma específica. El sentido detrás esta lógica es asumir la permanente evolución del lenguaje gráfico de una organización y cómo diseñar una arquitectura que soporte ajustes puntuales y que permita propagar esos cambios hacia todos sus niveles. Esto plantea una nueva forma de finiquito, aquel de las permanentes ediciones. El sentido de apertura irá directamente de la mano de la vida que tenga la organización, en este caso, nuestra escuela.

Herbert Spencer Septiembre de 2014

prólogo

introducci贸n

Introducción

Reconocer el lenguaje y diseñar a través de él La Escuela de Arquitectura y Diseño fue el campo de observación inicial, al abrir Título I. Y desde esa partida, fue imperante aplicar una mirada general a la escuela como ente organizado. Dicha observación derivó al estudio del eje principal que permite todas las acciones y valida la existencia de la misma, siendo el ancla de la organización: las personas que le habitan. La persona y la organización El sentido de pertenencia supone en los individuos de un grupo, un sentimiento consciente de que son parte de ese grupo, y al mismo tiempo este último lo reconoce como parte suyo. ¿Cómo estas personas llegan a unirse a través de un lenguaje? Existe en la escuela un modo y forma de expresión que radica en la enseñanza y formación en el oficio, que proviene de sus tiempos fundacionales. De acuerdo a esto, podemos reconocer que su identidad esta intimamente ligada al cómo se hacen presente los rasgos y fundamentos a través del tiempo, que permiten a este grupo poder reconocerse como tal en su originalidad y al mismo tiempo ser percibido como diferentes a los demás. Este proyecto aborda dos dimensiones o facetas de estudio y diseño. Cada cual con sus diferentes requerimientos, ejes y principios; pero que logran conectarse, mediante ese lenguaje e identidad que le confiere el entorno mayor del cual son parte. Me refiero al estudio y propuesta de una interfaz gráfica para el Archivo Histórico (mémoire) y el rediseño web del sitio de Travesías de nuestra escuela.

introducción

Metodología

Etapas de desarrollo del proyecto

observación

requerimientos

modelación - esquemática

examinar, reconocer y registrar antecedentes para el proyecto

declarar necesidades o requerimientos basados en sus usuarios

esquematización de contenidos para visualizar estado de problemáticas

INVESTIGACIÓN

BRIEF DEL PROYECTO

MODELOS VISUALES

1.1

2.1

3.1

interiorización en los procesos y funcionamiento de forma transversal

establecer metas y alternativas para el proyecto

3.2

ANÁLISIS

OBJETIVOS Y PROYECCIONES

1.2

2.2

observación directa de variables que dan enfoque al proyecto CONTEXTUALIZACIÓN

1.3

metodología del proyecto

DIAGRAMAS

prototipado

diseño

implementación - ajustes

realizar cambios que derivaron de presentar propuestas iniciales

propuesta de estructuras de tipo organizativo para los contenidos propuestos ARQUITECTURA DE INFORMACIÓN

HERRAMIENTAS DE DESARROLLO

DEPURACIÓN

4.1

5.1

6.1

uso de herramientas que permitan mostrar estructuras

aplicar capa visual - emocional a la propuesta

WIREFRAMES

INTERFAZ

ENTREGABLES

5.2

6.2

4.2

metodología del proyecto

01 cap

observación 1.1 INVESTIGACIÓN TEÓRICA 1.2 ANÁLISIS 1.3 CONTEXTUALIZACIÓN

1.1 Investigación teórica

¿Qué es un Archivo Histórico? Un Archivo Histórico es una entidad de carácter público o privado que tiene como finalidad rescatar, clasificar, catalogar, custodiar y poner a disposición (en algunos casos) para la consulta pública o interna, la documentación de carácter archivística. Existen archivos de tipo estatal que se basan en los registros administrativos de actividades institucionales y sociales de una determinada comunidad; resguardando aspectos significativos de su evolución y trasformándolos en fuente directa que permite establecer su identidad. El conocimiento histórico y social de un país, pueblo u organización se vuelve un imperativo necesario, puesto las fuentes documentales son portadoras de huellas de un pasado. Según el Diccionario de Archivística Español 7 se puede definir como: “Conjunto de documentos, sea cual sea su fecha, forma y su soporte material, producidos o recibidos por toda persona física o moral, y por todo servicio u organismo público o privado, en el ejercicio de su actividad, y son, ya conservados por sus creadores o por sus sucesores para sus propias necesidades, ya transmitidos a la institución de archivos competente en razón de su valor archivístico.”

[7] http://www.mecd.gob.es/cultura-mecd/areas-cultura/archivos/mc/dta/ diccionario.html#_a

observación

Podemos decir entonces, que los archivos son la memoria colectiva e individual de una organización o comunidad. Su tarea principal es preservar esa memoria en el tiempo. Existe una confusión al pensar en archivo y biblioteca, por la dificultad de identificar los tipos de documentos en ellos albergados. La diferencia entre Archivo y Biblioteca, es básicamente que los Archivos documentan, preservan la historia, utilizando las fuentes primarias, documentos que han sido creados en un momento histórico determinado, por un individuo o una organización; mientras que la Biblioteca contiene lo que llamamos fuentes secundarias, que son libros que se han producido usando recursos primarios. En sí, lo que diferencia a un archivo de una biblioteca es la manera en que estos documentos son tratados y conservados.

observación

1.1 Investigación teórica

Sobre las travesías Para la Escuela de Arquitectura y Diseño PUCV, las travesías son viajes poéticos por América realizados anualmente a partir del año 1984. Estos viajes son integrados por los alumnos y profesores de las carreras de Arquitectura, Diseño Gráfico y Diseño Industrial. Dichas travesías tienen por finalidad realizar obras a partir de la creatividad del oficio, desplegado en algún punto de América, lugar fijado a través del estudio que desarrolla cada Taller. En 1965 los fundadores de la Escuela decidieron partir bajo la siguiente visión: “América ha de recorrerse en su extensión; es preciso ir al continente,ir a él para reconocerle y habitar su emergencia.partida mañana a las siete antemeridiano desde santiago escalas del avión santiago puerto montt punta arenas los nueve están – jonathan boulting alberto cruz fabio cruz michel degury francois fédier claudio girola godofredo iommi jorge pérez román edison simons – henri tronquoy nos alcanzará en medio de la patagonia”. 8 La primera de travesía, unió Tierra del Fuego, en la Patagonia chilena, con la ciudad boliviana de Santa Cruz de la Sierra, la que proclamaron Capital Poética de América. Los participantes de este viaje fueron Alberto Cruz, Fabio Cruz, Godofredo Iommi, Edison Simons, Michel Deguy, Jonathan Boulting, Henry Tronquoy, Claudio Girola, François Fedier y Jorge Pérez Román.

[8] lAmereida I, pág 58

observación

La primera travesía permitió expandir el horizonte dentro de los procesos educativos y de aprendizaje en el ámbito académico de esos tiempos; en 1984 se incorpora al currículum de los alumnos de Arquitectura y Diseño la realización de una Travesía anual dentro del ámbito de cada Taller. Se han realizado ya más de 100 travesías, éstas se llevan a cabo durante el tercer trimestre de cada año y duran alrededor de 2 semanas.

Fundamento poético El fundamento de esta modalidad se remite a Amereida y a su visión poética sobre la extensión americana. Amereida dice: ...” el signo peculiar de la aparición de esta tierra americana, es que ella irrumpe como un regalo”... América no se ha hecho cargo de si misma, de esta condición de ser regalo y reconocer su origen como sentido poético. Es necesario cambiar este sentimiento y comprender que este continente irrumpió como un regalo, y que hay que agradecerlo.9 Así nos dice la voz poética: “el único lazo posible con América es la gratitud”, y en otra parte: “el sentido del regalo es el alma donde se funde América”... ¿Cómo debemos entonces conocer América?. La poesía nos dice: atravesar y dejarse atravesar por esta América regalada bajo el signo de la gratuidad.

observación

“travesía que no es descubrimiento o invento consentir que el mar propio y gratuito nos atraviese levante en gratuidad o reconocimiento nuestra propia libertad...” Se inician las travesías en la búsqueda del lugar, definido como el espacio donde hay encuentro y con la voluntad de hacerse parte de la construcción de un nuevo continente, trazando signos, conformando su propia heredad. Se han realizado más de 100 travesías, abarcando desde la desembocadura del Amazonas hasta el Estrecho de Magallanes y desde Isla de Pascua hasta el Atlántico. En cada travesía se culmina construyendo obras propias surgidas de los oficios: arquitectura, diseño, escultura. Obras a partir de “signos” que se transforman en ejecuciones a través de las manos y del trabajo de todos. Cada travesía construye su contingencia, mistificando la presencia de lo que aparece. Las obras que ellas acometen son genuinas obras de arte y su rol es el de abrir la realidad americana mas que el dominio de ella.

[9] Reseña acerca de la travesía y el sentido de ésta, extraído de Revista Ciudad Arquitectura, donde se presentó un artículo de Travesía Paranal , de la cual Miguel Eyquem y Salvador Zahr fueron parte.

observación

Ejes conceptuales Amereida La primera Travesía, realizada en 1965, dejó como testimonio una serie de textos, crónicas, poemas, dibujos, anotaciones y cartas que poco a poco fueron editadas hasta constituir lo que hacia 1967 se publicó como el primer poema de Amereida. El título es el resultado de la contracción de las palabras América -”la América regalada, América sin dueño”- y Eneida, el célebre poema épico del siglo I a. C. compuesto por Virgilio. El poema representa a América como un mar interior que invita a ser descubierto con la Cruz del Sur como guía. Los autores visualizan América del Sur en posición invertida, imagen que se vuelve recurrente hacia el final del libro, donde se muestra el inicio de la travesía -la Patagonia- en el extremo superior del mapa. El poema se interroga sobre la condición de América Latina, la filiación europea que lo surca y la identidad propia que se revela de la invocación a la esencia del territorio virgen con el cual se encontraron los conquistadores. Este escrito y la experiencia que a él subyace se convirtieron en el referente de toda la actividad creativa desarrollada al interior de la Escuela. Todo acto poético remite a esa obra fundacional: “Amereida es, después de todo, una visión.” Desde el primer poema el encuentro con lo desconocido abre la posibilidad para comenzar a pensar el nuevo mundo tal un regalo, un don; su seña: la Cruz del Sur, la luz que remonta el horizonte y guía en el septentrion.

observación

La Travesía de Amereida se constituyó como un tiempo extendido en el acto que atraviesa América y le canta su aparecer. Ubicación geográfica - ruta Las travesías definen su recorrido por el continente americano, dicha ruta esta fijada bajo la concepción de Amereida y la disposición de los distintos talleres que conforman la escuela. Los destinos por lo general se enmarcan en el territorio sudamericano, pocas travesías se han realizado al noreste del continente, teniendo una mayor concentración en los países cercanos a Chile dentro del mapa. Pre-travesía Corresponde al proceso de organización realizado con antelación a la travesía por los alumnos de taller y profesores. Dicha organización responde a la necesidad de distinguir las distintas labores a realizar para hacer efectivo el viaje y los requerimientos o implementos necesarios que deben tomarse en cuenta. Los participantes de travesía, se distribuyen por lo general en grupos encargados ya sea en lo que respecta a: cocina, tesoreria o finanzas, salud o botiquín, pañol de herramientas, ámbito (actos o pasatiempos en travesía), campamento, obra y ruta. Faenas Se refiere a las labores de trabajo para la realización de la obra, escultura, evento o acto que se donará al lugar o comunidad visitada.

observación

Obra, acto o regalo La creación de obras o intervenciones artísticas de carácter leve, es un componente esencial que completa lo que es la travesía, puesto el fin de estas, es representar de manera simbólica lo que Amereida dice acerca de la América regalada, donada. Con este fin, la obra es la esencia del viaje y el regalo otorgado a sus habitantes.

observación

1.2 Análisis

Patrimonio histórico documental digital en Chile Los Archivos constan de diferentes tipos de documentos, ya sean documentos de carácter personal o social, correspondencias personales u oficiales, folletos, bancos fotográficos, afiches de época, planos, videos, etc. En Chile existe bajo la dirección de la DIBAM (Dirección de Bibliotecas, Archivos y Museos) el Archivo Nacional de Chile, quienes en su calidad de organismo público, tienen como misión reunir, organizar y preservar el patrimonio documental de la nación, producto de la gestión del Estado y de la acción privada, con el fin de facilitar a la comunidad el acceso a la información administrativa, técnica, jurídica e histórica que contienen los documentos.

Misión y funciones del Archivo Nacional de Chile •

El Archivo Nacional debe asegurar la conservación, preservación y organización del patrimonio documental, tanto público como privado del país y ponerlo al servicio de la comunidad, garantizando el acceso a la información pública.

•

Dictar y normar procedimientos técnicos y administrativos para la gestión documental y para el desarrollo de servicios de información al usuario.

•

Fomentar el desarrollo de archivos a nivel nacional ejerciendo un rol normativo y de supervisión, para los procesos archivísticos de las instituciones de la administración del Estado, según ley asignada.

•

Prestar servicios de certificación y copia de los documentos que custodia.

observación

El Archivo Nacional trabaja con el apoyo de unidades transversales especializadas en ciertas materias como: 1.- Conservación y Restauración 2.- Clasificación y Descripción 3.- Legalización y Certificación 4.- Administración y Presupuesto 5.- Gestión de Proyectos 6.- Relaciones públicas

Catálogos y colecciones digitales Algunos catálogos disponibilizados de manera digital por el Archivo Nacional para su consulta en línea permiten acceder a cada información mediante el uso de búsqueda ya sea avanzada, básica o a través de un índice que tiene los siguientes contenidos:

•

Catálogo de Notarios: es una base de datos que almacena la descripción de 17.838 registros de tipo inventario. Se pueden encontrar escrituras públicas y documentos protocolizados.

•

Catálogo de Conservadores: es una base de datos que almacena la descripción de 4.563 registros descritos a nivel de volúmenes. Contiene la descripción de registros de inscripciones de propiedades de bienes raíces, comercio y minas.

•

Catálogo de Intendencias: es una base de datos que almacena la descripción de 11.241 registros a nivel de inventario. Contiene libros copiadores de decretos, oficios, ordenanzas y de comunicaciones enviadas por la Intendencia y copias y originales recibidos por ella de ministerios, intendencias y de otros organismos del Estado y particulares.

observación

•

Catálogo de Gobernaciones: repositorio que almacena la descripción de 2.026 registros descritos a nivel de inventario. Contiene la descripción de los documentos, generados por las autoridades Provinciales y Departamentales de la Administración del Estado de Chile en sus respectivas jurisdicciones

•

Instituciones Gubernamentales Coloniales y Republicanas: base de datos que almacena la descripción de 362.417 registros descritos a nivel de inventario. Contiene la descripción detallada de los fondos Ministeriales, Servicios Públicos, CORFO (Corporación de Fomento de la Producción), disponibles en el Archivo Nacional de la Administración y descripción de los fondos Intendencias, Gobernaciones, Municipalidades, Ministerios, disponibles en el Archivo Nacional Histórico.

•

Catálogo Fotográfico: repositorio que almacena la descripción de 5.394 registros descritos a nivel de documento. Contiene la descripción de fotografías relativas a inauguración de obras públicas, reuniones y conferencias de prensa de partidos políticos, realización de paradas militares, sesiones del Consejo de Seguridad Nacional, situaciones de emergencia por desastres naturales, actos oficiales de todo el Gobierno de Patricio Aylwin Azócar y del primer año del período de Eduardo Frei Ruiz-Tagle.

•

Otras colecciones digitales: Archivo Histórico Gabriel Valdés, Archivo Fortín Mapocho, Cartas de Recabarren, Creación de Escuelas en Chile, Escuela Santa María de Iquique, Expansión Ferroviaria en Chile, Mujeres al Monte y Publicidad del Salitre.

observación

Declaración Universal de los archivos En la 36 ª Conferencia General de la UNESCO (Organización de las Naciones Unidas para la Educación, la Ciencia y la Cultura) celebrada el 10 de noviembre de 2011, fue instaurada la Declaración Universal sobre los Archivos 10 Dicha declaración fue trabajada por un grupo especial del Consejo Internacional de Archivos y finalmente aprobada por el ICA (Council on Archives) con el fin de dejar en evidencia y hacer conciencia respecto a la importancia que tienen los archivos dentro de una sociedad moderna. Algunos puntos importantes de la declaración sostienen lo siguiente: •

Los archivos custodian decisiones, actuaciones y memoria.

•

Los archivos conservan un patrimonio único e irremplazable que se transmite de generación en generación.

•

Los documentos son gestionados en los archivos desde su origen para preservar su valor y su significado.

•

Los documentos son fuentes fiables de información que garantizan la seguridad y la transparencia de las actuaciones administrativas.Juegan un papel esencial en el desarrollo de la sociedad contribuyendo a la constitución y salvaguarda de la memoria individual y colectiva.

•

El libre acceso a los archivos enriquece nuestro conocimiento de la sociedad, promueve la democracia y derechos del ciudadano.

[10] http://www.ica.org/13343/universal-declaration-on-archives/ universal-declaration-on-archives.html/ http://unesdoc.unesco.org/images/0021/002134/213423s.pdf

observación

1.2 Análisis

Documentación de travesías Sitio actual El presente sitio es una propuesta que propone ser la bitácora colectiva de las travesías de Amereida, permitiendo a todos quienes han participado de ellas, publicar sus textos, dibujos y fotografías. Este sitio corresponde a la tercera edición de la publicación digital de las travesías de Amereida. Para participar como colaborador-editor de esta bitácora es preciso contar con un usuario registrado en personas y luego solicitar acceso especial como editor.

[1] [1] Home actual sitio travesías.ead.pucv.cl

observación

[2]

[2] Detalle de búsqueda por año - presenta todas las travesías registradas en el año seleccionado [3] Detalle del mapa , tooltip con datos de la travesía

observación

[3]

Proyecto de título: Bitácora Colectiva de Travesías Amereida La propuesta del Proyecto de Título del año 2008, de las alumnas Katherine Exss y Estefanía Trisotti consistió en la creación de un espacio virtual basado en una comunidad de usuarios estables y activos, los cuales estarían a cargo de levantar los distintos contenidos del ámbito travesía, que pudiesen haberse generado en los distintos viajes y rutas realizadas por los miembros de la Escuela de Arquitectura y Diseño PUCV. La idea central bajo este proyecto, estaba en crear un espacio donde, a partir del registro colectivo, se pudiese mostrar una dimensión más real y cercana de cada travesía, conectando las diferentes percepciones que se puedan reunir de un mismo lugar y hecho.

[4]

[5]

[4] Vista Home del sitio [5] Sección Explora con filtro de búsqueda

observación

[6]

[6] Secci贸n Publicar [7] Cuenta de usuario [8] Ficha Traves铆a

observaci贸n

[7]

[8]

Proyecto de taller: rediseño sitio travesías

[9]

Edición: Amereida Travesías 1984 a 1988 Esta edición trata de dar cuenta de las Travesías; realizando una mirada de estos viajes, como eventos de gran envergadura que la escuela adoptó a partir del año 1984, lo que finalmente derivó en su implementación dentro del plan de estudios y quehacer en general del cuerpo escuela. Este volumen recoge todas las travesías realizadas entre 1984 y 1988; ordenadamente muestra las distintas concepciones y faenas de un taller tras otro. Para lo cual cada profesor de los distintos talleres y etapas, presentan el material de sus viajes, de la manera que estos dispongan. La conformación de la edición entonces fue emprendida por un curso de Titulación de Diseño Gráfico, los cuales recopilaron todo el material que cada taller entregó.

[9] Interfaz de ficha travesía y mapa, proyecto de alumnos taller de Diseño Gráfico

observación

Cada presentación de cada taller respecto a sus travesías comienza con una página de Amereida, un plano de ello, esto para dar una suerte de gráfica inicial, que según la edición mantiene al vivo, el origen, al recorrer de las páginas que dan cuenta de su generación. Además se incluye, en algunas páginas, poemas o versos de Godofredo Iommi e Ignacio Balcells, recitados en algunas travesías o bien pertenecientes a otros autores. El libro termina con un texto que se refiere a la Escultura: todo origen abre, desata, todas las posibles generaciones. Por eso cada una de estas reclama ir - no aislada - sino que junta, acompañada por una hermana que avance paralelamente. Espaciando por tanto la obra escultórica de Claudio Girola y José Balcells.

Plataformas del archivo Travesías en Flickr Este registro actualmente consta de 58 colecciones fotográficas, que de manera interna, cada una de ellas contiene una serie de álbumes del mismo carácter, con la diferencia de los años en que dichas travesías han sido cursadas. Travesías en Vimeo Existe un registro actual disponible en línea, de 32 vídeos de esta índole, que destacan por ser grabaciones originales derivadas de vhs que han sido digitalizados por el Archivo Histórico y puestos a disposición en su canal Vimeo. Los registros datan del periodo 1984 pasando al año 1996. En ellos se puede visualizar contenido netamente de las labores y acontecer de la travesía, tales como actos, registro de la obra, lugar y colectividad.

[10] Página tipo divisora en libro Travesías Amereida 1984 a 1988

observación

[10]

observaci贸n

S铆mbolo parte del logo del Archivo Hist贸rico Jos茅 Vial Armstrong

observaci贸n

1.3 Contextualización

Archivo Histórico José Vial A. José Vial Armstrong docente y arquitecto de la escuela, funda en el año 1952 el archivo histórico, por su afán fotográfico y especial cuidado a documentos primordiales en su oficio como arquitecto; como planos, correspondencias, carpetas, croquis, etc. El archivo de este modo, toma su nombre como un homenaje a su fundador. La Biblioteca Con§tel desde sus inicios, esta muy asociada al trabajo del archivo; de manera que tiene la labor de editar, corregir, catalogar, referenciar y publicar el material textual disponible en Archivo, que vienen a ser todos los textos, escritos generados por docentes y comunidad escuela desde el año 1952 en adelante. El Archivo Histórico José Vial Armstrong tiene entre sus principales tareas, la misión de: conservar, mantener, valorizar y disponibilizar el patrimonio artístico e intelectual de lo que es y será la Escuela de Arquitectura y Diseño PUCV. Dichos materiales constan de registros fotográficos, videos, audios, dibujos, escritos, planos, pinturas, cuadernos, etc. que corresponden en gran parte a toda actividad llevada a cabo en su vida como comunidad (Escuela, Ciudad Abierta y Valparaíso como ejes generadores de contenido). Además cada año se va adquiriendo nuevo material en torno a las Travesías realizadas por cada taller, Actos, Celebraciones de San Francisco, entre otras. También contiene el material documental de estudios, proyectos y obras mediante planimetrías y carpetas de título que cada año son entregadas por los egresados. El archivo actualmente se da a conocer a través de distintos canales digitales, como son Flickr, SoundCloud y Vimeo.

observación

Conceptos que intervienen en un Archivo Artefacto u objeto 11 El término hace referencia a un objeto único; en un sitio web puede ser el objeto que un usuario busca, lo que almacena un archivo y que posee una clasificación por medio del metadato, que permite asignarle una serie y almacenarlo en una colección. Los metadatos de un artefacto hacen que un artefacto sea reconocido semánticamente en una búsqueda y se relacione a otros artefactos de relación transversal. En ocasiones un artefacto puede referirse a un producto terminado, como el código o el ejecutable, pero más habitualmente se refiere a la documentación generada a lo largo del desarrollo del producto en lugar del producto en sí. Metadatos Se refiere literalmente a “sobre datos”, son datos que describen otros datos. En general, un grupo de metadatos se refiere a un grupo de datos, llamado recurso. El concepto de metadatos es análogo al uso de índices para localizar objetos en vez de datos. Por ejemplo, en una biblioteca se usan fichas que especifican autores, títulos, casas editoriales y lugares para buscar libros. Así, los metadatos ayudan a ubicar datos. Para varios campos de la informática, como la recuperación de información o la web semántica, los metadatos en etiquetas son un enfoque importante para construir un puente sobre el intervalo semántico.

observación

Colección Una colección es una estructura dinámica, activa y cambiante que puede llegar a evolucionar de manera sistemática. No es de tipo estático, ya que se desarrolla, crece, actualiza y también pueden deteriorarse, descartarse en el tiempo. Acorde a su uso, se organizan, catalogan y clasifican para asegurar la consulta eficiente de los recursos presente en ella. Catálogo Es la relación ordenada de elementos pertenecientes al mismo conjunto, que por su número precisan de esa catalogación para facilitar su localización; por ejemplo, en un archivo o una biblioteca. Álbum Es una colección empaquetada de artículos relacionados entre sí (registros de audio, escritos, historietas, etc.). Un objeto para el archivo o espacio que lo aloja, posee un valor de tipo histórico, ya que viene a reflejar un evento o hecho destacado.

[11] Definición según proyecto de título Galexia http://wiki.ead.pucv.cl/index.php/Galexia

observación

Investigador y objeto

Los eventos asociados al objeto pueden ser de tipo: imágenes, audios, videos y documentos. Cada uno de estos formatos presenta cualidades o metadatos que los definen, permitiéndole al investigador un acceso a ellos, en la exploración del contenido a través de los tags, su temporalidad o contexto en que se enmarcan. Un investigador requiere en gran medida exhaustividad en la búsqueda. Si tiene interés por un objeto, necesita abarcar todo lo relacionado a él, para su estudio. Un usuario común va directo a lo que le interesa, sin realizar mayor exploración de información asociada.

[11] Esquema con características del objeto y acciones del usuario

observación

[11]

Colecciones del Archivo Colección Fotográfica En el área fotográfica, el archivo dispone de alrededor de 140.000 fotografías, tanto en sus originales, negativos y diapositivas; de forma que son almacenadas por su distinta naturaleza, en hojas de clasificación de Ph neutro, que permite su conservación, evitando la humedad y deterioro propio de los años. Son guardadas en archiveros metálicos en una sala acondicionada y climatizada, por estas razones es de acceso restringido, sólo son retiradas cuando se presenta alguna solicitud. El material fotográfico y gráfico en general, a medida que se va escaneando, es publicado en el flickr del Archivo, ordenado en colecciones y álbumes temáticos. Las fotografías son registradas con información directa extraída de miembros de la escuela, participantes y personas que han sido parte de las imágenes en algunos casos. Estos metadatos son incluidos en cada foto a través de palabras claves, fechas, georeferencias para la ubicación, etc. Actualmente hay más de 22.000 mil fotografías publicadas. Los archivos más antiguos datan de 1947. Colección Planos y grandes formatos Abarca planos originales de estudio de proyectos y catastros; dispuestos en tubos plásticos de pvc, con ventilación y en un contenedor especial para su conservación, con un promedio de 10 planos por tubo. Lo ideal es que se pueda implementar pronto, su almacenamiento en carpetas de cartón con ph neutro, más organizados y de fácil acceso a su consulta; además de instalar un sistema de copia de plano, mediante acondicionamiento de dependencias del archivo para su fotografiado y posterior digitalización. A la fecha existen 7.608 láminas en papel.

observación

Colección Archivo de la Palabra En este catálogo se publica material a través de la plataforma SoundCloud para los audios y en Vimeo para los videos. El material es de tipo audiovisual, en medida que se edita y procesa digitalmente ( material audiovisual compuesto de cintas de video, cine y audio de distintos soportes) es anunciada su publicación. Trata de concentrar los audios de clases, presentaciones, seminarios, etc. que se pueden oír directamente desde esa plataforma. Los archivos más antiguos, disponibles hasta ahora, son de 1979. Hay archivos de actos, travesías, clases, vida universitaria y actividades académicas. Desde el año 2006 se ha hecho parte de esta colección las clases de Taller de Amereida. Colección Fundadores Todo el material académico y artístico, generado o desarrollado por los profesores fundadores de nuestra Escuela, es almacenado desde 1952. Está compuesta por piezas individuales y series. Hay donaciones realizadas por los mismos profesores o sus familias, que constan de cuadernos, apuntes, dibujos, cuadernos de viaje de Fabio Cruz, Miguel Eyquem, José Vial y últimamente de Alberto Cruz. Colección Documentos Está constituida por cartas, artículos, escritos, fichas, legajos, actas, etc. que la Escuela conserva. Las más antiguas, hasta ahora encontradas, datan de 1937. Hay cartas oficiales de directores, decanos, profesores y autoridades. Dentro de esta colección, el Archivo ya ha publicado por ejemplo, Conversación con Mies van der Rohe y el Voto al Senado Académico de 1973 entre otros.

observación

Fondos fotográficos especiales Fondo Ruperto Lang Una gran cantidad de negativos de 35 mm pertenecientes a Ruperto Lang Benitez, fotógrafo aficionado, fueron donados al archivo. En la actualidad, muchos pueden tener algún tipo de relevancia, pues interpretan la manera de ver y fotografiar reiterada y sistemáticamente hechos del acontecer propio de la ciudad de Valparaíso durante la década del 50. Tal colección se encuentra digitalizada en la categoría Catastros de Valparaíso dentro del Flickr del archivo Fondo Juan Hernández Juan Hernández, fotógrafo de la escuela en sus inicios, también tiene entre su obra al Valparaíso de mediados del siglo XX. Este registro consta de 2.243 negativos 35 mm y 222 placas 6×6.

observación

Gestión en consultas y solicitudes al archivo El archivo trabaja bajo dos sistemas de consulta de material: presencial y online. La consulta directa en el lugar, se realiza previa cita con el personal que trabaja en el archivo, de manera que éste pueda preparar el material solicitado. Al archivo acuden desde estudiantes internos de la escuela, hasta investigadores extranjeros y personajes del ámbito cultural o artístico. La segunda modalidad es la consulta vía e-mail. Es a través de portales como Flickr donde se hace conocida y desde el cual se facilita la búsqueda, de gran parte de las solicitudes.

[12]

[12] Esquema del proceso de solicitud de material

observación

Usuarios y solicitud de contenidos Se definen 4 tipos de usuarios que acuden al archivo a solicitar material: investigador (agente externo), alumno (pregrado, postgrado e intercambio), ex- alumno y docente. En base a ellos, se define el interés por contenidos que requieren para su consulta y posterior estudio. El esquema representa a los actores y sus motivaciones para realizar la solicitud.

Protocolos de solicitud de material Los investigadores pueden ser autorizados a través de una clave especial y temporal para descargar imágenes en distintos tamaños. Para el uso de reproducciones de originales en los formatos que sea (positivos, negativos, diapositivas, digitalizaciones, etc) se debe definir un convenio entre las partes, que fije los posibles usos y restricciones del material de archivo, así como también una correcta especificación de las fuentes de origen. El archivo fotográfico presta servicios profesionales, para la reproducción de originales, para lo cual se deben definir los formatos de salida o resoluciones en caso de archivos digitales. El costo de los servicios esta sujeto a evaluación según sea la magnitud del trabajo y el formato de las reproducciones. [13]

[13] Esquema de usuarios y motivaciones de solicitud

observación

Catalogación de los objetos José Vial Armstrong, arquitecto de la escuela, fallecido en 1983, diseñó una estructura y jerarquía para mantener un control de las fotos y distintos archivos originados dentro de la escuela y las diversas actividades que en ella se desarrollaban. Estableció un código especial, compuesto por una combinación de letras, abreviaciones, descripciones y números que identifican a los objetos o artefactos del Archivo, y que han permitido hasta la fecha realizar determinadas operaciones de búsqueda y de almacenamiento. Dicha nomenclatura, normas o reglas de registro de los objetos,han sido denominado Códigos poéticos.12 Fabio Cruz y José Vial trabajaban, estudiaban y vivían en comunidad. Para ellos la observación arquitectónica incluía además el ejercicio del croquis. El código del Archivo Histórico es un dibujo; una configuración plástica y artística que representa un punto de vista, no una colección sistemática de leyes infalibles e universales. La observación no garantiza resultados; pero sí es el primer paso que conduce a una construcción concreta. José Vial y sus colaboradores observaron los quehaceres y aconteceres de la Escuela y de la Ciudad Abierta y lo tradujeron con mucha simpleza en un código que, al nombrar cada aspecto, lo hacía visible y concreto.

Categorías del archivo Actualmente, existen 11 categorías principales para albergar los archivos; a la vez estas categorías contienen múltiples subcategorías en cada una de ellas. Dichas categorías se comportan de diferentes maneras cuando clasifican las cosas; no responden siempre del mismo modo frente a lo que asocian, pues dependen de criterios no fijos que interactúan sin una jerarquía específica.

observación

[14]

Es parecido a decir que estas categorías agrupan a elementos orgánicos que al relacionarse se modifican entre ellos mismos y así hacen variar a la categoría a la que pertenecen. Cada categoría es capaz de recibir los registros actuales, agrupándolos junto a los más antiguos y configurando una familia nueva que contiene pasado y presente. Estas familias de datos se van multiplicando en cantidad, puesto responden a los quehaceres y aconteceres tanto de Escuela como la Ciudad Abierta; donde se generan los trabajos, estudios y acciones de una comunidad universitaria en ambos territorios; objetos que pueden quedar registrados bajo una imagen, documento, audio o video. Estos objetos quedan registrados bajo las especificaciones de Objeto semántico que ha establecido la Wiki Casiopea. Este tratamiento equivale tanto para el conjunto de documentos y artefactos físicos como para los originales digitales; los antiguos y los nuevos.

[14] Proceso de catalogación de objeto o artefacto [12] http://www.ead.pucv.cl/2013/codigos-poeticos/

observación

02 cap

requerimientos 2.1 CRITERIOS GENERALES 2.2 BRIEF DEL PROYECTO 2.3 OBJETIVOS Y PROYECCIONES

arquitectura de información métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa.

diseño de interacción hacer tangibles las posibilidades del sistema y permitir al usuario comunicar sus comandos al sistema.

usabilidad medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema.

diseño visual la apariencia del objeto, sitio o producto

investigación de usuario recopilación de ideas y experiencias de los usuarios para mejorar el diseño del producto. 46

requerimientos

2.1 Criterios generales

Experiencia de usuario Cuando se habla de diseño de experiencia de usuario en el entorno digital, nos estamos refieriendo a una experiencia que incluye todo, desde la arquitectura de información, diseño visual, la usabilidad, el diseño de interacción y desarrollo de prototipos. Más importante aún, debemos tener en cuenta que el diseño de experiencia de usuario no tiene que ver con el diseño únicamente. Como dijo acertadamente Steve Jobs, “ El diseño no es sólo lo que se ve y cómo se siente. El diseño es cómo funciona “. Por lo tanto podemos deducir con seguridad que la experiencia del usuario comienza mucho antes que los usuarios visitan un sitio web, lo que hace que sea bastante plausible pensar la experiencia del usuario, incluso antes de que se concibió la idea de producto. No hay una fórmula definitiva para crear una gran experiencia de usuario, pero hay algunos principios básicos que pueden ayudar a hacer de esta, algo agradable, entendible y accesible :

Arquitectura de la información (IA) Es la ciencia de la organización, etiquetado y clasificación de la información en un entorno digital. El objetivo es crear una estructura que ayuda a los visitantes - usuarios del sitio a completar sus tareas con éxito y fácilmente. Diseño desde la perspectiva de los usuarios finales La IA debe estar orientada a ofrecer alternativas significativas para los usuarios que se centran en completar una tarea en particular. La mejor manera de hacerlo es mediante la realización de la investigación de las necesidades del usuario.

requerimientos

Definir los objetivos del sitio Además de conocer el público objetivo, un sitio web también debe tener un propósito claro (vender, informar o educar a la gente, entre otros). Toda la arquitectura de información de un sitio está impulsada por las metas que desea alcanzar a través de él. Por ejemplo, si el objetivo de una página web es conseguir que los visitantes compren productos, el contenido debe estar organizado de tal manera que conduzca efectivamente a los visitantes hacia esa meta. Es como crear un camino paso a paso a un destino. Uniformidad El diseño uniforme juega un papel esencial en la creación de una buena arquitectura de información. Cumplir con un mismo patrón para los diseños de navegación hará que sea más fácil para el usuario navegar por el sitio. Layouts con información inconsistente tienden a confundirlo y lo obligan a abandonar el sitio. Organizar el contenido La forma en que el contenido se organiza tendrá un impacto directo en la capacidad de los usuarios de encontrar y gestionar la información en un sitio. No importa si se está rediseñando un sitio o construyendo desde cero, se deben crear las opciones de estructura y clasificación después de la realizar un “inventario” de contenido en profundidad, la construcción de wireframes y mapas del sitio. Tener una estructura visual del contenido ayudará a la organización precisa de la información a través del sitio.

requerimientos

Arquitectura de información

usuarios quiénes son, cuáles son sus comportamientos de búsqueda de información y qué necesitan

contenidos volumen, formatos, metadatos, estructura, organización

contexto modelo del proyecto, política cultura, recursos y límite de recursos

Diseño de interacción El diseño de interacción define la estructura y el comportamiento de los sistemas interactivos. Se centra en el comportamiento del usuario, cómo piensan y cómo esperan que la interfaz de usuario funcione al ejecutarla. Se pueden establecer principios claves dentro del diseño de interacción: consistente perceptible Diseño de interacción

de fácil aprendizaje predecible capacidad de respuesta

Consistencia Es la clave para la creación de interacciones exitosas entre el sitio web y los usuarios. Por ejemplo, si el menú de navegación se coloca en diferentes posiciones, se ve diferente, o se comporta de manera diferente a través de las páginas, daría lugar a confusión. Un elemento básico, como el menú de navegación debe seguir una ubicación coherente y comportarse igual a través de cada página. Un sitio web debe ser coherente en relación con los siguientes elementos de diseño de interacción: • Contenido consistente, por ejemplo mismas palabras o frases no deben transmitir diferentes significados en diferentes páginas o interacciones. • Coherencia tipográfica, como fuente, tamaño de fuente, etc • La consistencia del color, incluyendo el color del texto, color de fondo, etc. • Consistente menú de navegación, respecto a su posicionamiento y comportamiento.

requerimientos

Perceptibilidad Los usuarios del sitio deben ser capaces de percibir las oportunidades de interacción dentro de un sitio. Proporcionar pistas visibles a los usuarios acerca de cuándo iniciar una interacción e identificar las señales de interacción. Algunos elementos que mejoran la perceptibilidad de la interacción: • Texto legible • Iconos fácilmente distinguibles y legibles • Los hipervínculos con diferentes colores respecto a otros contenidos Facilidad de aprendizaje Esto significa que los usuarios deben ser capaces de usar una interfaz, instruirse a través de ella, repetir y recordar el procedimiento para futuras interacciones. Utilizar lenguajes y símbolos que los usuarios puedan entender fácilmente. Previsibilidad Hacer la interacción predecible. Los usuarios deben tener una idea clara de lo que es una interacción particular, a lo que lleva y cuáles son los pasos a seguir. Capacidad de feedback En la mayoría de los casos, los usuarios no tienen mucha paciencia para esperar una tarea especial en proceso, por lo que a menudo abandonan la interacción. Proporcionar pistas visuales o mensajes de texto, mientras que una tarea está ejecutandose le dará al usuario una imagen clara de lo que está sucediendo dentro de la aplicación.

requerimientos

Usabilidad La experiencia del usuario se enfoca en gran medidad en la facilidad de uso. Existen algunos principios de usabilidad claves para construir un sitio fácil de usar para un público objetivo.

Usabilidad

usuario

accesibilidad jerarquías contenidos

Múltiples opciones de accesibilidad Los usuarios deben tener múltiples opciones para acceder a una determinada pieza de información en su sitio web. Por ejemplo, un archivo puede estar en formato HTML y PDF descargable, por lo que el usuario puede descargarlo para verlo más tarde. Jerarquía Aspirar a proporcionar pasos lógicos para llegar a determinada información en un sitio web. Sin embargo, lo que puede sonar lógico puede ser confuso para el usuario, por lo tanto, una buena práctica es llevar a cabo las pruebas de investigación de usuario y usabilidad antes de decidir sobre la jerarquía de la información. Contenido accesible En términos de usabilidad, este aspecto no esta limitado sólo a la categorización o etiquetado de contenidos, también se refiere a la estructura del texto, como el formato, párrafos, títulos, fuente, etc, el objetivo es hacer del contenido algo legible y accesible. Los diseñadores deben tener en cuenta que los usuarios tienen diferentes patrones de lectura en la web y en el papel.

requerimientos

Diseño visual Al igual que todos los otros elementos de diseño de experiencia de usuario, el diseño visual o el diseño centrado en el usuario es también una actividad estratégica. El diseño no es todo acerca de los elementos visuales, se trata también de la capacidad del diseño para interactuar con el público objetivo. Un diseño centrado en el usuario debe seguir un proceso bien definido, como se menciona a continuación: Estrategia Se trata de la planificación de las actividades de diseño basado en el objetivo y las metas de un proyecto de diseño. A menos que los objetivos de diseño no sean claras, el diseño no va a entregar una buena experiencia de usuario. Requisitos El diseño nunca debe comenzar sin una comprensión clara de los requisitos de los usuarios finales, el contenido, las necesidades de información, y el alcance del proyecto. El diseño de información El diseño de información tiene como objetivo la presentación de información de manera que los usuarios sean capaces de entenderla. Se trata de esquemas de navegación, tablas de contenidos, jerarquía visual, para que los usuarios finales pueden navegar fácilmente a través de la información.

requerimientos

investigación entender a los usuarios

casos de uso innovación Diseño visual

evaluación de prototipos diseño de interfaz

validación desarrollo

Diseño visual Es el paso final en el proceso de diseño centrado en el usuario que permite ver y sentir toda la estructura de la plataforma de información. Aquí, los diseñadores trabajan en los elementos gráficos del diseño, tales como la tipografía, colores, texturas, y la alineación, para mejorar el atractivo visual de la información.

Investigación de Usuario

tendencias y nuevos diseños buenas prácticas y soluciones de diseño

Prototipos

orientar las acciones comportamientos individuales

nuevas soluciones de diseño para testear

Usabilidad

Investigación de usuario Es el componente más esencial en cualquier iniciativa de diseño de experiencia de usuario. Es bastante evidente que si se está diseñando para un usuario, se debe investigar las necesidades del mismo, requisitos y expectativas. Prototipos Implica la evaluación de un prototipo con usuarios potenciales para entender cómo una interfaz de usuario o la aplicación web se ve y se comporta en un escenario real. Un prototipo da una buena idea de cómo un determinado producto, sitio o aplicación responderán a las entradas del usuario, y qué mejoras se pueden hacer en el diseño del producto para que sea factible.

requerimientos

Ilustraci贸n extra铆da del libro The Back of the Napkin de Dan Roam

requerimientos

2.2 Brief del proyecto

Sitio Archivo Histórico Problemáticas actuales y requerimientos Visibilidad Si bien el Archivo Histórico está presente bajo dos grandes vías de acceso, que son el sitio principal de la escuela y wiki Casiopea; su visibilidad o reconocimiento en ellos es débil, partiendo por la navegación para hallarlo, en ambos resulta difícil de encontrar. Requerimiento El archivo como tal requiere una interfaz propia, cohesionada en estructura al sitio que le contiene (sitio escuela) y que permita presentar la extensión de sus contenidos y la riqueza presente en estos, como por la usabilidad que requiere para acceder al material. El archivo y la catalogación del material disponibilizado en la web, tiene una estrecha conexión con Casiopea, resulta necesario no perder ese lazo, crear algún modo de mantener unificadas estas materias. Trabajar en una propuesta de interfaz que permita la visualización, presentación y publicación de contenidos por categorías, en medida que estos vayan actualizándose en sus distintos canales de exposición. Los distintos registros del archivo, son requeridos constantemente desde diversos lugares del mundo; cosa que no sería posible si no se diera a conocer mediante otras plataformas como flickr, vimeo, entre otros. Estos soportes han potenciado las comunicaciones y el reconocimiento del archivo, por lo que resulta necesario mantener los enlaces en ellos.

requerimientos

Identidad y Unificación Falta gestionar un diseño de interfaz que otorgue al archivo una mejor organización tanto interna como externa, donde se pueda mostrar y a la vez archivar los distintos objetos gráficos de los cuales dispone; mantener informado al cuerpo escuela y público objetivo de las novedades que allí ocurren y dar cabida a una mejor gestión de los documentos almacenados y catalogados existentes. Creación de una imagen propia vinculada al archivo. Requerimiento La unificación se trabajará utilizando Pyxis Framework, de manera que los elementos del sitio permitan establecer una coherencia visual con la organización en general; además se incorporará un menú de navegación rápido, presente en el diseño del sitio de la escuela, que facilitará la encontrabilidad de contenidos esenciales para el usuario interno a la escuela. Catalogación y registro Mantener el sistema de indexado con que trabaja el archivo (códigos de catalogación), de manera que permitan acercar y orientar al usuario al contenido. La presentación de contenidos organizados por estas categorías y subcategorías permite la encontrabilidad y efectividad en los resultados de búsqueda por parte del solicitante, además de lograr una mejor navegación por cada objeto o álbum de contenido. Idioma Un requerimiento notable, por el medio digital actual, es que el archivo cuente con un sistema de comunicación de tipo bilingüe en su plataforma web y sus portales

requerimientos

Sitio Travesías Problemáticas actuales y requerimientos Menú de navegación y jerarquías En cuanto a la navegación o información proporcionada por el sitio, no existe como tal un menú principal visible, las opciones de navegación se dan en el footer del sitio, quedando un poco ocultas a primera vista; es necesario por ello desplazarse verticalmente para poder acceder a dichas secciones o enlaces.Se puede indicar que no hay mayor profundidad respecto a este menú inferior, puesto todos los enlaces contemplan una única página o vista de la sección consultada. Interacción Las interacciones posibles de realizar por parte del usuario son mínimas. Se tiene un filtro por años, que desprende información de travesías realizadas. Sobre el mapa es posible encontrar datos menores acerca del punto o ubicación de alguna travesía en especifíco. Interfaz Se utiliza un mapa base en todas las plantillas del sitio; además de una franja transparentada que en ocasiones al contener texto o enlaces se confunde con la trama de fondo del mapa. Disponibilidad de contenidos La información o ficha que cada travesía presenta, se halla incompleta o bien no existe en algunos casos.

requerimientos

2.3 Objetivos y proyecciones

Sitio Archivo Histórico Objetivos generales Uno de los principales objetivos que conlleva realizar este proyecto es implementar un sistema digital o sitio web que permita presentar al archivo histórico de manera clara y accesible según el tipo de usuario. Se plantea como una interfaz dirigida por un lado al usuario primario que seria el encargado de archivo o administrador del sitio, quien de manera interna, ponga a disposición el contenido catalogado, clasificado, archivado y registrado, pudiendo actualizar los datos, las veces que sea necesario. Por otro lado, esta el usuario secundario que es el lector o persona que visita el sitio en busca de obtener información o por simple conocimiento. Los objetivos a cumplir en este usuario tipo, son que pueda recorrer tanto de manera visual como semántica los contenidos allí expuestos; entendiendo por ende los códigos con que se maneja el archivo. Exponer las modalidades de trabajo del archivo, para la solicitud de material; presentar los contenidos y permitir la búsqueda, lectura y/o visualización de ciertos documentos, trabajando conjuntamente dentro del sitio, con los medios que posibilitan estos procesos (plataformas usadas por el archivo).

requerimientos

Objetivos especifícos

1. Poder generar y sostener una interfaz propia, que mantenga sus conexiones con Casiopea y otros canales asociados (sistema de enlaces y catalogación) que permita exponer a través de un registro organizado e indexado la identidad, memoria y herencia presente en el archivo histórico, hasta ahora poco reconocido por gran parte de la comunidad escuela. 2. Gestionar las distintas publicaciones y por ende enlaces a la documentación. 3. Construir un sistema de ingreso o registro de información presentada en el sitio y búsquedas a través de metadatos establecidos (para el administrador del sitio).

[15] Diagrama de ejes principales y componentes que dan forma a la propuesta de rediseño sitio Travesías.

requerimientos

Sitio Travesías Objetivos generales Permitir una cohesión a partir de su Arquitectura de información, interfaz y contenidos. De manera que el centro articulador (AI) pueda generar una estructura a través de los contenidos (recursos del mapa, búsquedas y navegación, reseñas y presentación) que sostienen una organización mediante esta arquitectura. A su vez la AI en su relación con la interfaz, se configura en el diseño de la información, para permitir una experiencia de usuario agradable, basada en la interacción y respuesta, el diseño e identidad visual y la accesibilidad y usabilidad. Por un tema de usabilidad y presentación, por la riqueza de estos contenidos, el sitio actual de travesías requiere una renovación en primera instancia, principalmente de lo que sostiene todo el diseño, su arquitectura de información y luego una propuesta de interfaz que permita hacer visible dichas capas de información.

recursos del mapa

a tr avé s

interacción y respuesta diseño e identidad visual

búsquedas y navegación fluida

contenidos

arquitectura

estructura

e la

ru y st

sen

pre

[15]

interfaz accesibilidad y usabilidad

reseñas y presentación vé

con st

e la ruy

n ne

experiencia de usuario

de vés tra

ob tie

organización

a tr

diseño de información requerimientos

03 cap

modelaci贸n y esquem谩tica 3.1 MODELOS VISUALES 3.2 DIAGRAMAS - ESQUEMAS

http://www.theillustratedprofessor.com/visual-language-learning-and-explanation/

modelaci贸n y esquem谩tica

Modelación y esquemática

Lenguajes visuales Para poder facilitar la comprensión de la información que se quiere analizar, por la gran cantidad de datos y relaciones posibles que surgen de ello; es necesario hacer uso de diagramas o esquemas, que nos permitan modelar las partes que arman el sistema. El uso de un lenguaje visual permite que los datos sean leídos con mayor facilidad antes que presentar grandes cantidades de información, a veces incomprensible para un futuro lector. El modelo debe presentar la simplificación de la realidad estudiada, tomando como base lo más relevante y dejando de lado aspectos innecesarios.

modelación y esquemática

modelaci贸n y esquem谩tica

3.1 Modelos visuales

Archivo Histórico

Mapa interacciones y tareas Archivo Con el fin de poder organizar tanto las tareas como los entes que intervienen o llegan a hacer uso de ciertos recursos, se plantea un diagrama que propone la visualización de las acciones propias del archivo, de manera interna y de las acciones posibles del público o usuario objetivo del sitio a diseñar. Esta primera instancia de organización, comprende objetos,personas y escenarios.

modelación y esquemática

modelaci贸n y esquem谩tica

Primer modelo visual archivo Comprensión de interacciones y labores internas El modelo visual requiere graficar lo anteriormente analizado en el mapa o diagrama de acciones y usuarios. Este primer intento registra aquello, donde se muestran los procesos o tareas internas del archivo para con el objeto o artefacto y su conexión con el sitio propuesto, y además por otro lado el usuario objetivo que interactúa o accede al objeto dentro del sitio, con distintos motivos.

modelación y esquemática

modelaci贸n y esquem谩tica

Transacciones sitio Travesías: interacciones y usuarios El esquema se divide en 3 ejes: participantes, interfaz y contenidos. Cada una de estas variables comprende una modalidad analizada. Para el caso de los participantes (alumno, docente e investigador) se plantean las posibles acciones de realizar dentro del sitio de travesías. Luego se revisa el entorno en el cual navega este usuario (interfaz). Para llegar a los objetos o contenido revisado o disponible dentro de la plataforma.

modelación y esquemática

3.2 Diagramas - esquemas

Travesías Tomando como base el análisis teórico anterior del sitio travesías, y a modo de poder representar gráficamente lo analizado, de manera que permita desprender información relevante en cuanto a usuarios, sistema, funciones y necesidades, se utilizan los diagramas de tipo UML (Unified Modeling Language)como primera opción de representación.

Lenguaje de Modelado Unificado (UML) El UML está compuesto por diversos elementos gráficos que se combinan para conformar diagramas. Un diagrama es la representación gráfica de un conjunto de elementos con sus relaciones. En concreto, un diagrama ofrece una visión del sistema a modelar. Debido a que el UML es un lenguaje, cuenta con reglas para combinar tales elementos. Un modelo es una representación simplificada de la realidad; el modelo UML describe lo que supuestamente hará un sistema, pero no dice cómo implementar dicho sistema. Para poder representar correctamente un sistema, UML ofrece una amplia variedad de diagramas para visualizar el sistema desde varias perspectivas. Se presentan los siguientes diagramas: • • • • • • • • • 72

Diagrama de casos de uso Diagrama de clases Diagrama de objetos Diagrama de secuencia Diagrama de colaboración Diagrama de estados Diagrama de actividades Diagrama de componentes Diagrama de despliegue

modelación y esquemática

Para analizar el caso del sitio travesías, las interacciones posibles en él, funcionalidad y atributos se utilizarán dos diagramas: caso de usos y el de clases. Para aprender a construir estos, se utilizan las aplicaciones Lucidchart y Gliffy, ambas con distintas funcionalidades y diagramas.

Diagrama de casos de uso El diagrama de casos de usos representa gráficamente los casos de uso que tiene un sistema. Se define un caso de uso como cada interacción supuesta del cliente (actor) con el sistema a desarrollar, donde se representan los requisitos funcionales (forma, tipo y orden en como los elementos interactuan). Es decir, se está diciendo lo que tiene que hacer un sistema y cómo. Un diagrama de casos de uso consta de los siguientes elementos:

actor

caso de uso

Actor Es un rol que un usuario juega con respecto al sistema. Es importante destacar el uso de la palabra rol, pues con esto se especifica que un Actor no necesariamente representa a una persona en particular, sino más bien la labor que realiza frente al sistema. Casos de Uso Es una operación o tarea específica que se realiza tras una orden de algún agente externo, sea desde una petición de un actor o bien desde la invocación desde otro caso de uso.

modelación y esquemática

Relaciones de Uso, Herencia y Comunicación: •

•

Asociación: es el tipo de relación más básica que indica la invocación desde un actor o caso de uso a otra operación (caso de uso). Dicha relación se denota con una flecha simple.

límite del sistema

asociación de comunicación

Dependencia o Instanciación: es una forma muy particular de relación entre clases, en la cual una clase depende de otra. Dicha relación se denota con una flecha punteada.

generalización include

•

Generalización: este tipo de relación es uno de los más utilizados, cumple una doble función dependiendo de su estereotipo, que puede ser de Uso (<<uses>> <<include>>) o de Herencia (<<extends>>).

•

Include o Uses: cuando relacionamos dos casos de uso con un include, estamos diciendo que el primero (el caso de uso base) incluye al segundo. Es decir, el segundo es parte esencial del primero. Sin el segundo, el primero no podría funcionar bien; pues no podría cumplir su objetivo.

•

Extend: en el caso del extend hay situaciones en que el caso de uso de extensión no es indispensable que ocurra, y cuando lo hace ofrece un valor extra (extiende) al objetivo original del caso de uso base. En cambio en el include es necesario que ocurra el caso incluído, tan sólo para satisfacer el objetivo del caso de uso base.

modelación y esquemática

extend

Usuarios, acciones y sistema Para entender un poco el funcionamiento, acciones y las personas involucradas en lo que respecta al sitio de travesías, se esquematiza esto, antes de pasar a crear el diagrama de casos de uso.

modelación y esquemática

Caso de uso: usuario registrado Se define un usuario general, ya registrado, que visita el sitio travesías, que tiene como posibles acciones : navegar, buscar, publicar nueva travesía y editar travesía. La acción Buscar utiliza la relación extend puesto la acción realizada no esta condicionada, es más bien opcional.

Caso de uso: usuario no registrado Se realiza un diagrama especial, separado del anterior para la acción publicar, puesto la idea de los diagramas de caso de uso, no es crear confusión y caracterizarse por ser bastante simples, para entenderlos tanto por quien lo dibuja como los posibles clientes a los que es presentado en un proyecto. La acción Publicar se presenta en el caso de un usuario que no se encuentra registrado y la intención de publicar o editar una travesía dentro del sitio. Para ello se utiliza la relación include ya que esta determina que hay un paso que debe cumplir que es el de ingresar a el login de Personas y registrarse.

[16] Diagrama de caso de uso para usuario registrado [17] Diagrama de caso de uso para usuario no registrado

modelación y esquemática

[16]

[17]

modelaci贸n y esquem谩tica

Diagrama de clases El diagrama de clases muestra un conjunto de clases,interfaces y sus relaciones, en torno al sistema. Esta información respecto a cómo la relación entre un objeto y otro, la herencia de propiedades de otro objeto, conjunto de operaciones/propiedades son implementadas para una interfaz gráfica. Un diagrama de clases esta compuesto por los siguientes elementos: • •

Clase: atributos, métodos y visibilidad. Relaciones: Herencia, Composición, Agregación, Asociación y Uso.

La caja distintiva de este diagrama se compone de tres partes: el nombre de la clase, abajo los atributos de la clase y por último en la parte inferior, las operaciones de ella. Esta estructura de símbolo permite que el elemento sea mejor definido, logrando que el lenguaje sea más claro entre las partes y las relaciones sean comprensibles.

[18] Diagrama de clases en torno al término o concepto Travesías y sus elementos

modelación y esquemática

Diagrama de clases : relaciones que derivan del elemento travesía

[18]

modelación y esquemática

Mapa de tareas, usuarios y elementos que intervienen en sitio travesías Se realiza un diagrama que permita establecer relaciones y observar las distintas operaciones, objetos y actores que interactúan actualmente en el sistema del sitio Travesías.

modelación y esquemática

modelaci贸n y esquem谩tica

Cuadro esquemático: diagnóstico general Con el fin de poder identificar las posibles falencias que inciden en el sitio actual de travesías, se realiza inicialmente un esquema a modo de diagnóstico; sobre el cual se pueda desprender el funcionamiento y factores que dan forma al sitio. Se plantean dos entornos digitales relacionados entre sí (travesías - casiopea), que se retroalimentan al recibir información y utilizarla cada cual en su interfaz. El sitio de travesías tiene una relación sostenida con Casiopea a través de su uso para el registro de la información. Casiopea funciona en este caso como una especie de base de datos que alimenta al sitio de travesías, proporcionando a través de los enlaces la interacción con el usuario. Se definen 4 usuarios o lectores tipo que navegan el sitio: 1. 2. 3. 4.

Alumno Ex-alumno Docente Investigador o ente externo

Tales usuarios determinan acciones dentro de ambos sitios. Se grafican estas haciendo un paso desde el sitio que nos interesa explorar (travesías) y la acción que nos lleva al otro (casiopea). Las interacciones posibles en una primera instancia en el sitio travesías comprenden: Buscar, Visualizar, revisar, Localizar en el mapa, Leer y Publicar, documentar.

modelación y esquemática

Esta última acción, Publicar - documentar requiere el registro o login en el sitio Personas, de este modo la acción se ve condicionada a pertenecer al sistema Personas o bien registrarse. Una vez pasado este punto, se tiene otro grupo de acciones disponibles: Publicar nuevo objeto, Subir archivo, Editar, Entender lenguaje wiki, Descargar, Cancelar y Llenar formulario wordpress.

modelación y esquemática

04 cap

prototipado 4.1 ARQUITECTURA DE INFORMACIÓN 4.2 WIREFRAMES

Esquema propuesto por Donna Spencer en su libro â&#x20AC;&#x153;A practical Guide to Information Architectureâ&#x20AC;?

prototipado

4.1 Arquitectura de Información

Mapa de navegación Un mapa de navegación deberá proporcionar una representación esquemática de la estructura del sitio diseñado, indicando los principales conceptos o secciones incluidos en el espacio de la información y las interrelaciones existentes entre ellos. Se enfoca en la organización de las páginas y muestra cómo funcionarán los hipervínculos dentro del sitio, pudiendo existir distintos enlaces, tanto a nodos principales como subnodos. El mapa debe expresar todas las relaciones de jerarquía y secuencia y permitir elaborar escenarios de comportamiento de los usuarios. El principal valor de un mapa de navegación es que permite anticipar errores de organización de la información, de modo de corregirlos cuando aún no se ha invertido tiempo y dinero en la construcción del objeto de diseño. Es necesario comprender tres cosas muy importantes antes de diseñar una AI, de manera que esta funcione bien: •

Personas: lo que necesitan hacer, la forma en que piensan y lo que ya saben.

•

Contenido: lo que se tiene, lo que se debe tener y lo que se necesita.

•

Contexto: los objetivos personales o de negocio para el sitio, ¿quiénes participan y cuáles son sus limitaciones?

Finalmente, la arquitectura de información, tiene que ver con la satisfacción de las necesidades de las personas, el contenido y el contexto. prototipado

Sin una buena comprensión de estas tres cosas, simplemente no se puede crear una buena IA. Si no se sabe lo suficiente acerca de la gente, proyecto o requerimiento, no será posible agrupar el contenido en formas que tengan sentido para el usuario.

Organización actual contenidos Como el AHJVA no cuenta con un sitio propio, más que utilizar algunas páginas tipo dentro de la wiki y el sitio de la escuela; es necesario elaborar un mapa de contenidos y de navegación, con los datos que se tienen. Se trabaja con la información relacionada a la estructura de catalogación actual y el manejo de los archivos. 1.1 Colección fotográfica

Soportes y aplicaciones iPhoto Es una aplicación informática desarrollada por la empresa Apple exclusivamente para su sistema operativo Mac OS X. La aplicación puede importar, organizar, editar, imprimir y compartir fotos digitales. Funcionalidades: Permite una fácil importación desde cámaras digitales, escáneres, CD con imágenes y desde internet. iPhoto soporta los formatos de imagen más comunes. Una vez que las fotos son importadas, opcionalmente pueden ser tituladas, marcadas, ordenadas y organizadas en grupos (conocido como “álbumes”). Individualmente las fotos pueden ser editadas usando herramientas

prototipado

básicas de manipulación de imágenes como el filtro de ojos rojos, ajuste de brillo y contraste, cortar y cambiar el tamaño así como otras funciones básicas. Cuenta con herramientas de gestión de fotos como Faces y Places. Faces se encarga de organizar de forma automática a las personas a partir del rostro, es decir, etiquetamos a alguien en una foto y esta función busca a esa persona automáticamente en todas las fotos de nuestra biblioteca fotográfica. Places se encarga de organizar nuestras fotos por lugares donde han sido tomadas. Existen numerosas opciones para compartir fotos. Entre ellas, cuenta con un plugin llamado FlickrExport, lo que facilita la transferencia de imágenes hacia esa plataforma, integrando los metadatos, tales como lugares, caras, eventos y títulos otorgados a los álbumes allí subidos. Flickr Es un sitio web que permite almacenar, ordenar, buscar, vender y compartir fotografías y vídeos en línea. Actualmente Flickr cuenta con una importante comunidad de usuarios que comparte las fotografías y videos creados por ellos mismos. Esta comunidad se rige por normas de comportamiento y condiciones de uso que favorecen la buena gestión de los contenidos. La popularidad de Flickr se debe fundamentalmente a su capacidad para administrar imágenes mediante herramientas que permiten al autor etiquetar sus fotografías y explorar y comentar las imágenes de otros usuarios.

prototipado

1.2 Colección planos y grandes formatos Aún no presenta una clasificación o catalogación digital.

1.3 Colección Archivo de la Palabra Clasificados bajo los códigos de catalogación del archivo, al igual que las fotografías. Para facilitar la navegación, el Archivo de la Palabra también reúne los archivos en álbumes y sets especiales. Hasta el momento cuenta con 3 tipos de categorías: Clases Magistrales / Taller de Amereida, Exámenes y Eventos especiales; dentro de los cuales constantemente se han ido procesando para subirlos al canal en soundcloud. Registros La colección Archivo de la Palabra, del Archivo Histórico contiene registros de audio antiguos y actuales. Los registros antiguos provienen, principalmente de cintas o cassettes, grabadas entre 1979 y 1997, en los Talleres de Amereida impartidos por Alberto Cruz y Godofredo Iommi. También hay registros de Claudio Girola. Existen alrededor de 80 cintas y la mitad ha sido digitalizada y está disponible en esta plataforma. Las registros actuales provienen de grabaciones digitales que comenzaron regularmente el año 2006, primordialmente del Taller de Amereida, aunque también hay exámenes y eventos especiales. Soundcloud Los registros están en la plataforma Soundcloud del Archivo Histórico. El ordenamiento y catalogación de estos archivos está estructurado de acuerdo al Catálogo

prototipado

del Archivo Histórico José Vial A. Para mejoraran la navegación, el Archivo de la Palabra también junta los archivos en álbumes y sets especiales. Esta plataforma de distribución de audio on-line permite que sus usuarios puedan colaborar, promocionar y distribuir sus proyectos musicales y registros de audio de toda índole. Posee un sencillo reproductor en el que se puede ver la forma de onda del archivo de audio. En él, los usuarios pueden dejar sus comentarios, compartir el archivo y, en algunos casos, descargarlo. Este reproductor se puede insertar en páginas webs o en otras redes sociales de modo que cuando se hace una actualización en SoundCloud aquellos sitios que enlacen el reproductor quedarán actualizados.

1.4 Colección Fundadores Estos archivos no se encuentran digitalizados, por su carácter privado, pueden ser consultados sólo de manera presencial por el momento.

1.5 Colección Documentos Los archivos de este tipo se conservan en 3 estados: archivos originales, que pertenecen a un mismo archivador, catalogados y ordenados en archivadores en el depósito climatizado del Archivo, otros están disponibles como imágenes en el flickr del Archivo, mientras que algunos sólo están en formato pdf, a través de un enlace al documento con GoogleDocs. Todos los documentos fueron digitalizados en formato tiff, en sus tamaños originales (tamaño carta la mayoría) a 300 dpi (2500 x 3500 dpi aprox.) Los documentos PDF fueron realizados en tamaños adecuados al e-mail.

prototipado

1.6 ColecciĂłn audiovisual (canal vimeo) El archivo utiliza la plataforma Vimeo para subir sus videos y colecciones audiovisuales del quehacer de la escuela en general Vimeo Vimeo (Video sharing for you) es un sitio que permite compartir y almacenar videos digitales para que los usuarios comenten en la pĂĄgina de cada uno de ellos. Los usuarios deben estar registrados para subir videos, crear su perfil, cargar avatares, comentar y armar listas de favoritos.

[19] CategorĂas y colecciones derivadas

prototipado

[19]

prototipado

Formulación de contenidos Anotando conceptos sueltos que derivan o relacionan los requerimientos y el hacer del archivo, se comienza a estructurar un mapa de contenidos, para luego definir uno de navegación. Pensando en que se trata de un medio de presentación digital, se anotan palabras acordes a lo que se desea tener en él. De este modo, se van agrupando para obtener una estructura y saber cuál es el objeto principal que agrupa a cada serie de palabras. Estas palabras conciernen a lo que seria la navegación por el sitio para un usuario externo, que lo visita.

Grupo de palabras A cada grupo de palabras se le asigna un nombre o categoría que define su ubicación o sección dentro del sitio.

Primera propuesta mapa de navegación Luego de agrupar viene la etiquetación final de las secciones, junto a las indexaciones que correspondan en cada una de ellas. Existen modificaciones a nivel del nombre que se ha otorgado a las secciones principales y las anidaciones en algunos casos. Las secciones de navegación propuestas son: Sobre el Archivo, Colecciones, Editorial, Solicitudes al archivo y Contacto.

[20] Contenidos y conceptos sueltos [21] Aplicación de orden y jerarquías a esos conceptos

prototipado

[20]

[21]

prototipado

Propuesta inicial y modificada

prototipado

Modificaciones al mapa de navegación La modificación presentada,destacada en naranjo, vincula directamente al sitio archivo como parte del sitio e[ad], a través de la sección Extensión y metabarra, desde donde se podrá acceder a sus contenidos

prototipado

Propuesta inicial de contenidos Home o portada Los contenidos iniciales a incluir en este apartado tratan de reflejar el acontecer de la labor del archivo, esto es, presentar los álbumes destacados, publicaciones recientes (audio, vídeo, fotografías o documentos) y noticias relacionadas. El funcionamiento de cada componente que arma el home, es a través de una reseña y enlace de acceso rápido para ampliar la información en una página especial enfocada en ello. Los títulos y ante títulos toman partido por ubicar al objeto dentro de una categoría o etiqueta dentro del sitio. De esta forma, igualmente se usan iconos que relacionan las publicaciones con una temática específica.

Sobre el Archivo Presenta secciones anidadas o interiores que dan cuenta de lo que es el archivo y su metodología de trabajo, además de mostrar noticias relacionadas. Nuestra labor Se toma en cuenta la labor del archivo, para con la escuela, participantes y público objetivo. Por otro lado se exponen a los encargados de la administración y sus funciones. Historia Es una narración acerca del fundador que dio origen al archivo y expone en parte la trayectoria del archivo. Dependencias del archivo Se refiere a la infraestructura y módulos de trabajo con que cuenta el lugar.

prototipado

Noticias Agrupa las noticias recientes y archivadas por categorías, presentando un extracto de ellas, de modo que al seleccionar una se pueda acceder a un mayor detalle de la información (página especial).

Catálogos Los catálogos exponen separadamente, el grupo de colecciones que forman parte de lo últimamente actualizado en las distintas temáticas. Cada objeto ya catalogado es presentado con su respectiva información (metadatos) y archivado bajo una colección. Los catálogos expuestos son de tipo fotográfico, audiovisual y archivo de la palabra.

Ediciones del archivo (editorial) Se piensa en una sección, que presenta algunos textos base que surgen dentro del archivo, que pueden corresponder de igual manera con alguna de las publicaciones presentes en la escuela bajo la Biblioteca Constel o bien Ediciones e[ad]. Incluye además los Boletines del Archivo que son mensuales y presentan las novedades y contenidos que el Archivo disponibiliza. Los objetos de tipo texto o publicación pdf correspondientes a Biblioteca Constel y Ediciones e[ad] contemplan en la wiki, una serie de datos que responden a su origen y significado.

prototipado

Dichos datos se componen de: • • • • • • • • • • •

Título Fecha o año Autor Temática o categoría Tipo de publicación Editorial N°Edición Lugar Palabras claves Carreras relacionadas Notas o abstract

Se adoptara una estructura de visualización similar a la que se utiliza para las fotografías, pero con un lector tipo flipbook para algunos textos disponibilizados. Los metadatos serían incorporados bajo esta presentación del texto.

Solicitudes Explica las modalidades que pueden realizarse para solicitar un objeto perteneciente al archivo, ya sea para su uso en una investigación, proyecto o publicación. Se adjunta un formulario para poder detallar la solicitud.

Contacto Ubica al usuario a través de un mapa e información de contacto (dirección, teléfono, correo electrónico), además incluye un formulario para consultas,reclamos o sugerencias.

100

prototipado

Categorías de noticias o publicaciones A partir de las categorías ya dadas por la clasificación de álbumes dentro del archivo, se toman estas para su uso como etiquetas de noticias o publicaciones dentro del sitio, estas son: • • • • • • • • • • •

Obras Actividades Ciudad Abierta Vida Universitaria Catastros Estudios Teóricos Diseño Gráfico Diseño Industrial Arquitectura Travesías

De este modo, cada publicación al interior del sitio, se visualizará con un ‘antetítulo’ según corresponda la temática.

prototipado

101

Propuesta final mapa navegaci贸n Archivo

102

prototipado

Secciones Home Los contenidos finales a incluir dentro de la portada del sitio son: • Carousel o slider con información referente a las secciones: noticias, archivo en el mundo y publicaciones en canales externos. • Colecciones del archivo presenta 5 tipos de colecciones de las cuales dispone el archivo; esto es: fotográfica, audio, video, documentos y textos fundamentales de Biblioteca Constel. • Destacados es un apartado para mostrar el acontecer de 3 de las colecciones (últimos álbumes en Flickr, Vimeo y Soundcloud). • Archivo en el mundo es una sección para la publicación de eventos , investigaciones en las cuales el archivo ha participado. • Noticias agrupa toda publicación relacionada al archivo de tipo informativo. Sobre el Archivo Transmite la labor del archivo, su historia y fundación, y muestra además, el área de trabajo o dependencias. Tambíen se integra la portada de noticias, que permite enlazar todas las publicaciones relacionadas. Colecciones Colecciones de las que dispone el archivo, con sus descripciones, actualizaciones y enlaces a álbumes o últimas publicaciones y catálogo de archivo en la wiki. Publicaciones Concentra los artículos referentes a Boletines del Archivo y Archivo en el mundo. Solicitudes Especifíca las modalidades de solicitud de material y adjunta un formulario para ello. Contacto Sección básica para poder realizar consultas mediante un formulario o acceder a los datos de ubicación. prototipado

103

Organización actual de contenidos El sitio actual de travesías presenta el recurso de GoogleMaps, que incorpora la visualización de los puntos sobre el mapa, para poder distribuir e indicar la ubicación de las travesías albergadas en el registro del sitio. Sobre esta capa de información, surge un elemento fijo que se mantiene como una franja trasparentada, donde los contenidos se van desplegando. La interfaz base entonces se genera en estas dos capas imagen - texto.

Navegación No existe como tal un menú, las opciones de navegación se dan en el footer del sitio, quedando un poco ocultas a primera vista; es necesario por ello desplazarse verticalmente para poder acceder a dichas secciones o enlaces. Se puede indicar que no hay mayor profundidad respecto a este menú inferior, puesto todos los enlaces contemplan una única página o vista de la sección consultada.

104

prototipado

Mapa Búsqueda por años sobre el mapa Junto a la información inicial que se desprende en torno al mapa, se tiene una serie o listado de años y número de travesías del enlace a consultar. Al elegir uno de estos se despliega sobre el espacio destinado a textos y datos, una estructura de títulos (nombre travesía o lugar) y mapas con la ubicación especifíca de las travesías del año elegido. Esto dirige a la ficha informativa con los antecedentes del viaje.

[22]

Puntos de georreferencia sobre el mapa Se utiliza un mapa de Google para apuntar las zonas de travesías realizadas. De este modo, al posicionarse sobre uno de estos marcadores se indica el lugar, nombre de la travesía y algunos datos importantes como los participantes, distancias y talleres asistentes.

Enlaces o menú Escuela de Arquitectura y Diseño PUCV: redirigue al sitio principal de la Escuela. Colabora: Presenta una reseña que invita y cuenta los fines del sitio y la importante labor de colaboración del posible usuario, en general para todos los que hayan recorrido América en alguna travesía. Expone la modalidad de registro para aquellos que quieran contribuir, a través del acceso y registro en Wiki Casiopea.

[22] Vista mapa y buscador por años

prototipado

105

Nueva travesía: Redirige a el login de Personas para poder acceder a registrar travesía. Acceder: Dirige a login de Personas para acceder a registrar travesía Acerca de las travesías: Es una breve reseña del inicio y lo que da forma a las travesías; citando un escrito perteneciente a Amereida I, que indica parte del recorrido y viaje de los fundadores de la escuela en la primera travesía realizada. Colofón: Especifica la forma de proceder en el sitio y lo que representa. Indica que tipo de publicaciones son requeridas y se explica que el sitio corresponde a la tercera edición de la publicación digital de las travesías de Amereida.

106

prototipado

Propuesta inicial de navegaci贸n sitio Traves铆as

prototipado

107

Secciones de navegación propuesta inicial sitio travesías Explorar Esta sección corresponde a la visualización de un mapa de tipo interactivo y un buscador con filtros para la información que se desea analizar. Mapa interactivo Los elementos o capas de información sobre el mapa que son visibles o bien que son activados por el usuario o lector al momento de interactuar con ellos. Esto es marcadores, iconografías, pop-ups con información o imágenes, enlaces, etc. Filtros de búsqueda Los filtros de búsqueda son una estrategia que nos permiten encontrar artículos de manera eficiente dentro de un sitio web. Es una herramienta cuyo objetivo principal es atenuar el efecto negativo causado por el exceso de información en las bases de datos, reducir al mínimo la obtención de información superflua o redundante, así como elevar el nivel de especificidad o sensibilidad de la búsqueda al máximo posible. Los filtros a utilizar clasificarían las visualizaciones por: año, lugar, nombre de travesía, participantes y talleres. La idea principal radica en que el sitio de travesías tenga una sección especial, dedicada a sólo las búsquedas y despliegue de información de los resultados en pantalla; no del modo en que se encuentra ahora, donde los datos y toda la información es trabajada sobre una misma base o plantilla, que es el mapa.

108

prototipado

Estos campos de búsqueda o filtros se generan frente al usuario, por un lado como espacios selectivos (año, taller, nombre ) y por otro como campos de llenado de información (lugar, participante). Por cada resultado derivado de la búsqueda, se obtiene, si es que se encuentran coincidencias: ficha técnica de la travesía, registros o archivos y bitácora o reseña del viaje. Cada uno de estos elementos son visualizados previamente y se pueden ampliar para ver en detalle, cliqueando el nombre de la travesía. Ficha travesía Corresponde a los datos de la travesía, la bitácora que narra el proceso viaje, faenas, actos y ruta.

Travesías Se expondrán los ejes o directrices de lo que es la travesía: América, Obra y Acto. Esta sección puede incluir material a través de citas, que responde a enlaces a la documentación. Además contará con información de travesías destacadas y recientes como ficha y ubicación en el mapa de cada una de estas travesías.

prototipado

109

que es posible sólo a través del registro en sistema de Personas o realizar una donación documental a través del Archivo Histórico de la escuela, puesto este mantiene un registro detallado de gran parte de las travesías (fotográfico y documental). Se tiene la opción de registrar una Nueva Travesía, mediante el acceso previo por el sistema Personas para luego crear un nuevo objeto semántico en la wiki, con los contenidos de la nueva travesía a ingresar, de modo que esta información se verá replicada en el sitio de travesías, porque funciona con un plugin que permite esa facilidad (wiki append para wordpress).

Colofón Se mantiene este rótulo que proviene del sitio original, allí se presenta información relativa al sitio en general, una especie de Quiénes somos.

Footer Se utiliza el footer que establece una conexión a sitios relacionados, que están en el entorno “escuela” además de incluir un párrafo poético perteneciente a Amereida, el cual pueda ser un sello de qué es lo que aborda el sitio. acceder a los distintos enlaces relacionados a la escuela. El menú principal es replicado igualmente en este espacio.

110

prototipado

Portada o home Los contenidos iniciales a incluir en este apartado serán a partir del acontecer de las travesías, publicaciones recientes (audio, vídeo, fotografías o documentos) y noticias relacionadas. El funcionamiento de cada componente en este punto, se piensa como una estructura cliqueable o enlazable, de acceso rápido donde la información se relaciona con alguna sección del menú y que puede revisarse con más detalle en una página especial enfocada en ello. Aparece un mapa general, junto a los otros elementos, de modo de instar al lector o usuario a echar un vistazo en las travesías.

prototipado

111

Propuesta final de navegación sitio travesías Se modifica el mapa de navegación propuesto en una primera etapa, por su complejidad y tras realizar un análisis de las reales necesidades que presenta el sitio, mediante diagramas y casos de uso. La propuesta rearma su estructura, por ejemplo se elimina del menú “Explorar” que presentaba el mapa y sus filtros como una página por si sola y se inserta ésta directamente en el home, actualizandose las búsquedas sobre el mapa.

112

prototipado

113

Secciones de navegación propuesta final Home Se reformulan los contenidos a presentar en la portada del sitio, con la intención de poder mantener lo más posible la propuesta actual donde se muestra el mapa interactivo desde un inicio; se fija ese aspecto porque es necesario para la ubicación y esencia del sitio; donde se muestra de manera general cada uno de los puntos geográficos que han sido abordados en cada travesía registrada. El sistema de filtros se modifica también en este punto, cambiando su ubicación y forma sobre el mapa. Además del mapa, la información relacionada a los fundamentos u origen que dan forma a las travesías será expuesto, como reseñas para orientar a quien visita el sitio sin conocer de qué trata. Otra variable importante a incorporar en la portada y que se mantiene de la idea inicial, anticipada en el primer mapa de navegación, es un espacio para las travesías recientes, esto es publicaciones de viajes realizados, que funcionarán como enlaces a la información en mayor amplitud.

Explorar Corresponde al buscador sobre el mapa presentado en el home, con los filtros de búsqueda propuestos (por nombre, año, participante, taller y lugar). Su forma es un elemento tipo “select” con estas 5 opciones de filtrar, luego una vez seleccionada una de ellas, puede elegir o ingresar la opción de búsqueda.

114

prototipado

Acerca de travesías Mantiene la información referente a los fundamentos de las travesías, como modo de explicar de dónde provienen estos viajes y su funcionamiento. Aloja tambien el contenido organizado de las últimas publicaciones de travesías recientes y un espacio tipo portadilla de las travesías destacadas. A la vez si el usuario quiere revisar una de estas travesías, es redirigido hacia la ficha individual seleccionada.

Colaborar Expone las modalidades posibles para que el usuario pueda contribuir en lo que respecta a la bitácora colectiva. Se elimina la opción de poder subir archivos directamente, puesto para realizar esto, se deja en claro que es posible sólo a través del registro en sistema de Personas o realizar una donación documental a través del Archivo Histórico de la escuela, puesto éste mantiene un registro detallado de gran parte de las travesías (fotográfico y documental).

Colofón Se presenta información relativa al sitio en general y su creación.

prototipado

115

Ilustraciones presentaci贸n Leah Buley - Adaptative path http://www.adaptivepath.com/ideas/ia-summit-08-slidecast-howto-be-a-ux-team-of-one/

116

prototipado

4.2 Wireframes

Prototipado El prototipado nos permite definir de una manera rápida y sencilla, a través de la construcción de wireframes, los bloques o secciones que va a tener cada una de las páginas de un sitio web, de modo que podamos jerarquizar la información y definir los contenidos. La idea no es presentar el aspecto estético, sino que dar espacio a cómo el contenido debe representarse; de manera que pueda servirle al usuario, como una base para entender las ideas que se tienen. Por ello, el diseño de los bloques no debe contener mayores detalles, como titulares o fotografías, sino que debe centrarse en definir las partes del sitio, dando énfasis a los bloques y su estructura y no en los elementos que irán dentro.

¿Qué es un wireframe? Un wireframe en diseño es una herramienta muy útil para la construcción de esquemas de página, para su posterior diseño en pantalla; además puede ser entendido como una guía visual que representa el esqueleto o estructura visual del sitio web a diseñar. Este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos. Los wireframes pueden ser dibujados a mano o a través de herramientas de diseño como Illustrator o aplicaciones especializadas en ello, disponibles en internet. Un wireframe grafica básicamente: Elementos de navegación: menús, accesos directos e hipervínculos. Elementos de información: contenidos de texto e imágenes. Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar.

prototipado

117

Versiones wireframes archivo

[23]

[23] Wireframe Home archivo [24] Wireframe secci贸n Nuestra labor

118

prototipado

[24]

[26] [25]

[25] Wireframe secci贸n Portada de noticias [26] Wireframe secci贸n Historia

prototipado

119

[28]

[27]

[27] Wireframe Noticia espec铆fica [28] Wireframe secci贸n Dependencias

120

prototipado

[30]

[29]

[29] Wireframe sección Catálogos [30] Wireframe sección categorías Catálogo

prototipado

121

[31]

[32]

[31] Wireframe Álbum [32] Wireframe sección Solicitudes [33] Wireframe sección Contacto [33] 122

prototipado

123

Versiones wireframes sitio Travesías

[35]

[34]

[34] Wireframe Home sitio travesías [35] Wireframe sección Explorar

124

prototipado

[36]

[37]

[38]

[36] Wireframe sección Explorar con vista Ficha Travesía [37] Wireframe sección Explorar con vista Registros travesía [38] Wireframe vista elementos travesía (ficha técnica, registros y bitácora)

prototipado

125

[40]

[39] [39] Wireframe sección Travesías [40] Wireframe vista lightbox imágenes

126

prototipado

[41]

[43]

[41] Wireframe sección Portada bitácoras [42] Wireframe sección Portada Travesías destacadas [43] Wireframe vista ficha bitácora

[42] prototipado

127

[44] 128

prototipado

[44] Wireframe home travesĂas [45] Wireframe Ficha travesĂa [45]

prototipado

129

[46]

[47]

[46] Wireframe sección Colaborar [47] Wireframe sección Colofón [48] Wireframe sección Acerca de travesías [48] 130

prototipado

[49]

[49] Wireframe portada secci贸n Traves铆as Destacadas

prototipado

131

05 cap

dise単o 5.1 HERRAMIENTAS DE DESARROLLO 5.2 INTERFAZ

Ilustraci贸n de Leah Buley - Adaptative path http://www.adaptivepath.com/ideas/ia-summit-08-slidecast-howto-be-a-ux-team-of-one/

134

dise帽o

5.1 Herramientas de desarrollo

Diseño front-end Es la parte que ven los usuarios y en la cual interactuán con la interfaz de usuario (UI), el diseño, imágenes, colores, botones, formas, tipografía, animaciones (javascript) y contenido (css y html); y por lo general un montón de lógica que permite los procesos que se realizan en el back-end.

Elementos de desarrollo web HTML Es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido, como texto, imágenes, etc. Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. CSS CSS (Cascading Style Sheets) son Hojas de estilo en cascada. Es una tecnología que nos permite controlar la apariencia de una página web. CSS describe como los elementos dispuestos en la página son presentados al usuario. El principio de las hojas de estilo consiste en la utilización de un solo documento para almacenar las características de presentación de las páginas asociadas a grupos de elementos. Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

diseño

135

LESS (The Dynamic Stylesheet Language) Es una ampliación de las hojas de estilo CSS, pero a diferencia de estás funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras, para acelerar y enriquecer los estilos en un sitio web. LESS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable cuando se quiere ahorrar tiempo en el desarrollo y utilización de características avanzadas de estilos.

GitHub GitHub es una plataforma de desarrollo colaborativo de software para alojar proyectos utilizando el sistema de control de versiones Git. GitHub aloja el repositorio de código y brinda herramientas muy útiles para el trabajo en equipo, dentro de un proyecto. En la actualidad, GitHub es mucho más que un servicio de alojamiento de código. Además de éste, se ofrecen varias herramientas útiles para el trabajo en equipo. Entre ellas, caben destacar: •

136

Una wiki para el mantenimiento de las distintas versiones de las páginas.

diseño

•

Un sistema de seguimiento de problemas que permiten a los miembros de tu equipo detallar un problema con tu software o una sugerencia que deseen hacer.

•

Una herramienta de revisión de código, donde se pueden añadir anotaciones en cualquier punto de un fichero y debatir sobre determinados cambios realizados en un commit específico.

•

Un visor de ramas donde se pueden comparar los progresos realizados en las distintas ramas de nuestro repositorio.

diseño

137

Unificación gráfica: Pyxis Framework Este proyecto cuenta con una primera experiencia de uso del framework Pyxis 1.0.1. En general, con el término framework, nos estamos refiriendo a una estructura digital definida por componentes personalizables e intercambiables para el desarrollo de una aplicación o sitio web. En otras palabras, un framework se puede considerar como una aplicación genérica incompleta y configurable a la que podemos ir añadiéndole constantemente piezas para construir una aplicación concreta. Los objetivos principales que persigue un framework son: • • •

acelerar el proceso de desarrollo de un sitio reutilizar código ya existente promover buenas prácticas de desarrollo con el uso de patrones o esquemas de diseño.

Se ha planteado el desarrollo de un framework versionado, que establezca normas de diseño web aplicables a los sitios a rediseñar de la escuela, siendo este sitio del archivo, un usuario tipo para probar sus distintas variantes en una primera etapa. A partir del framework se toman elementos para componer el sitio, que comprenden: tipografía, grilla, interacciones, color e iconografía.Cada una de estas variables agrupa un estilo o manera de trabajarlas. El framework propone los componentes para armar el diseño y esta abierto a su extensión a través de las nuevas clases o atributos que puedan surgir en este proyecto.

138

diseño

Componentes Tipografía Merriweather La familia tipográfica Merriweather, es usada en su versión light para texto continuo, poemas o textos diferenciados, que componen parte del sitio. Diseñada por Eben Sorkin, Merriweather cuenta con una altura de x grande, de letras levemente condensadas, una tensión diagonal leve, remates fuertes y formas abiertas. Fue diseñada para su lectura en pantalla. En su primera entrega hay 4 estilos: Regular, Light, Bold, y Black. Es un proyecto en evolución por lo tanto actualizable; en mayo de 2013 se han incorporado un juego de caracteres más grandes, y estilos itálicos para todos los pesos. Esta tipografía es de código abierto, por lo que su uso es gratuito a través de Google Fonts y otras plataformas de fuentes libres. Source Sans Pro Primera familia tipográfica de código abierto de Adobe,diseñada por Paul D. Hunt. Es un tipo de letra sansserif que se lee bien en pantalla. Se utiliza la familia tipográfica Source Sans Pro, para títulos y encabezados de texto. Esta tipografía, presenta gran versatilidad a través de sus 12 pesos: Regular, ExtraLight, Light, Semibold, Bold, Black, Italic, ExtraLight Italic, Light Italic, Semibold Italic, Bold Italic, Black Italic.

diseño

139

Grilla Una grilla proporciona una estructura visual para la colocación de todos elementos que van a formar parte de nuestro proyecto. El uso de un sistema reticular al momento de realizar un diseño web es tan importante como el contenido que se mostrará, las retículas permiten ordenar y equilibrar, hasta el peso visual y los grados de importancia entre cada elemento; las grillas se utilizan básicamente para darle ubicación a los textos y las imágenes. Pyxis ajustó el sistema de grilla adoptado inicialmente de 24 a 12 columnas, para trabajar el contenido, junto a la incorporación de un gutter o espaciado entre ellas de 30px.

Interacciones El diseño de interacción determina las posibilidades de operación de un sistema tecnológico: las posibilidades de acción de las personas que lo usarán, y las reacciones del sistema ante estas acciones. La interacción es un diálogo de comportamiento entre dos entidades, el accionar de una condiciona la respuesta de la otra. El diseño de interacción y el diseño de la interfaz son mutuamente dependientes, muchas veces las decisiones de un plano condicionarán las decisiones en el otro plano.

140

diseño

Las interacciones más comunes trabajadas dentro del sitio, responden a: • • • • • • •

Links Formularios Líneas o cajas de texto Botones Menús dropdowns Checkboxes Efectos con Javascript (transiciones, carousel, etc)

Paleta de color El sitio del archivo toma en una primera experimentación la paleta de colores que en Pyxis va desde los grises, a rojos-claros y adicionales. Estos colores forman parte de la interfaz aplicándolos a fondos, para destacar títulos o enlaces, bordes de objetos, entre otras cosas.

Iconografía Stampa es un proyecto de familia tipográfica de iconos diseñada para trabajar de manera complementaria con Pyxis framework. La gráfica de los íconos de Stampa esta diseñada para que acompañen la lectura en la fuente tipográfica Source Sans Pro, al mismo tiempo de entregar en cada ícono una esquematización correcta del concepto o idea a transmitir. Los íconos apuntan a una simpleza y condensación de contenidos dentro de la interfaz, y a su vez, a una navegación instintiva por el sitio.

diseño

141

Referencias para visualización de mapa Mapbox Mapbox es uno de los mayores proveedores de mapas en línea personalizados para grandes sitios web como Foursquare, Pinterest, Evernote, Financial Times, entre otros. En él, a través del recurso Mapbox Studio, se puede crear rápidamente atractivos mapas interactivos y visualizaciones de datos. Para una personalización básica de mapas, el usuario puede diseñarlos con un editor de mapas en línea o bien descargar un programa base que permite la construcción de mapas a través de código y dibujo.

142

diseño

GoogleMaps y GoogleMaps Engine Google Maps es un servidor de aplicaciones de mapas en la web que pertenece a Google. Ofrece la capacidad de realizar acercamientos y alejamientos para mostrar el mapa. El usuario puede controlar el mapa con el mouse o las teclas de dirección para moverse a la ubicación que se desee. Los usuarios pueden ingresar una dirección, una intersección o un área en general para buscar en el mapa. Permite la creación de pasos para llegar a alguna dirección. Esto permite al usuario crear una lista paso a paso para saber cómo llegar a su destino, calculando el tiempo necesario y la distancia recorrida entre las ubicaciones. Google Maps Engine Lite y Pro ayudan a crear mapas personalizados, que pueden ser compartidos y publicados de forma online. En él se puede visualizar y cartografiar datos. Una vez creado el mapa, se tienen las siguientes opciones: • •

•

Dibujos: permite añadir líneas, formas o marcadores al mapa. Importación de datos: se pueden subir archivos de tipo CSV, XLSX, un mapa de la opción “Mis mapas”, un archivo KML o una hoja de cálculo de Google Drive con datos geográficos como direcciones, nombres de lugares o latitudes y longitudes. Capas: muestra u oculta diferentes tipos de contenido para que el mapa se entienda mejor.

diseño

143

144

dise単o

5.2 Interfaz

Capa visual-emocional Se denomina interfaz al conjunto de elementos en pantalla que permiten al usuario realizar acciones sobre el sitio web que está visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción. Jakob Nielsen, Ingeniero de interfaces, autor de varios artículos relacionados con la usabilidad, destaca que los elementos más importantes de todo sitio, se pueden resumir en cuatro postulados generales: 1.- Dejar claro el propósito del sitio Se refiere a que el sitio debe explicar a quién pertenece y qué permite hacer a quienes lo visitan; se entiende que debe hacerlo de manera simple y rápida. 2.- Ayudar a los usuarios a encontrar lo que necesitan Implica que debe contar con un sistema de navegación visible y completo, pero que además deberá estar complementado por algún sistema de búsqueda que sea efectivo para acceder al contenido al que no se logra acceder o que no se encuentra a simple vista. 3.- Demostrar el contenido del sitio Significa que el contenido se debe mostrar de manera clara, con títulos comprensibles por parte del usuario y con enlaces hacia las secciones más usadas que estén disponibles donde el usuario los busque. 4.- Diseño visual para mejorar y no para definir interacción del sitio Se refiere a que los elementos gráficos del sitio deben estar preparados para ayudar en los objetivos del sitio y no sólo como adornos utilizados para rellenar espacio.

diseño

145

Maquetaci贸n: evoluci贸n de la propuesta

[50] 146

dise帽o

[52]

[51]

[50] Interfaz portada o home archivo [51] Interfaz sección Nuestra Labor [52]Interfaz noticia específica

diseño

147

[53]

[55]

[54]

[53] Interfaz sección categoría fotográfica [54] Interfaz Álbum [55] Interfaz detalle metadatos álbum

148

diseño

[57] Segunda implementaci贸n interfaz home

[57] dise帽o

149

[58]

[59]

150

dise単o

[51]

[60]

[62]

[58] Detalle elementos en home para mostrar álbumes destacados [59] Sección Catálogos fotográficos [60] Sección categorías catálogo [61] Detalle presentación información categoría [62] Detalle al realizar hover sobre opciones del catálogo diseño

151

[63]

[63] Interfaz Álbum [64 Detalle información o ficha metadatos álbum

[64] 152

diseño

[65]Tercera versi贸n home

[65] dise帽o

153

[66]

[66] Interfaz secci贸n Historia

154

dise帽o

[67]

[68] [67] Interfaz Solicitudes [68] Detalle interfaz Dependencias del archivo

dise単o

155

[69]

[70]

[69] Interfaz sección Colección Fotográfica [70] Detalle de objetos de la colección y efecto hover en rojo, que indica cantidad de elementos y nombre de la categoría

156

diseño

[71]

[71] Interfaz categoría fotográfica Travesías

diseño

157

[72]

[74]

[73]

[72] Detalle vista Colección Archivo de la Palabra [73] Interfaz últimas publicaciones de audio, dentro categoría Taller de Amereida [74] Detalle publicación 158

diseño

[75]

[76]

[77]

[78]

[75] Detalle de Colección Audiovisual [76] Detalle de efecto hover sobre elemento colección [77] Detalle de publicación video [78] Interfaz categoría videos Actos Poéticos diseño

159

Elementos de interfaz Menú de navegación El menú de navegación adopta un efecto dropdown, es decir, al cliquear en cualquiera de las secciones, despliega las opciones interiores de navegación. El menú del archivo presenta 5 secciones principales que alojan contenido interiormente: Sobre el archivo, Colecciones, Publicaciones, Solicitudes y Contacto.

Breadcrumb Un breadcrumb (miga de pan) es un tipo de esquema de navegación secundaria que revela la ubicación del usuario en un sitio web o aplicación web. El término proviene del cuento infantil Hansel y Gretel en el que los dos niños dejaban migajas de pan para formar un sendero de regreso a su casa. Al igual que en el cuento, el breadcrumb en aplicaciones del mundo real ofrece a los usuarios una manera de trazar el camino de regreso a su punto original de navegación.

Sección Para denotar límites en cuanto a contenidos dentro de la página, se disponen títulos que nombran la sección que viene.

Footer general Un footer por lo general, contiene enlaces de interés a sitios relacionados e incluye los datos de contacto de la institución y su presencia en redes sociales. En la navegación superior sólo se mantienen los vínculos más importantes. Todos los demás enlaces se indican exclusivamente en el área de pie de página.

160

diseño

El sitio de la escuela, propone un footer que es utilizado además en el sitio del archivo, en él se encuentran los distintos sitios o enlaces principales de la escuela, redes sociales y un mapa de ubicación.

Álbumes destacados La sección álbumes destacados en la portada del sitio, se enfoca en presentar contenido más relevante del último tiempo y lo categoriza, según lo indica el icono esquinado en cada recuadro. Tal icono viene a enmarcar el álbum o publicación dentro de una temática o área de las categorías ya planteadas antes (por ejemplo Actividades = icono-acto). Además cada álbum aquí presentado, dispone un título, reseña y etiquetas que se vinculan con el contenido. Estos recuadros en la portada, funcionan a modo de enlaces descriptivos, donde al cliquear el titulo de la publicación o el signo +, permite acceder al álbum en completitud.

Carousel Un carousel o slider, es un elemento dinámico que permite la visualización de imágenes, contenidos y datos breves como extractos de noticias, álbumes, publicaciones recientes, en fin, mostrar a través de imágenes contenido. El sitio del archivo utiliza un carousel tipo con ancho total de 12 columnas, dentro del cual en el caso de la portada por ejemplo, se disponen 4 hechos a destacar: Noticias, Publicaciones, Álbumes y Documentos.

diseño

161

Noticias La portada presenta 3 tipos de extensión de noticias: artículo, extracto y enlace. Cada uno de ellos permite la lectura previa de la noticia (de mayor a menor medida), para luego acceder a más información al hacer clic sobre el título o signo más.

Publicaciones recientes Esta sección esta enfocada sólo en mostrar una reseña de las últimas publicaciones que se dan dentro del marco Plataforma externa del archivo, que viene a ser Flickr, Soundcloud, Vimeo y GoogleDrive para los documentos. Funciona también como enlace, pudiendo direccionar directamente a la plataforma asociada o bien al objeto dentro del catálogo donde se aloje.

Reseñas Existen distintos estilos para mostrar componentes de texto, por un lado hay cuerpos o párrafos de texto para describir un álbum de manera extensa, reseñas de información de datos personales más breves (nombre, cargo, mail, teléfono y perfil casiopea) y por otro lado, existe una tabla con metadatos que se exponen como un listado y de manera más precisa las características de un álbum.

162

diseño

Colecciones y categoría La portada que contiene las colecciones de tipo fotográfico, presenta 11 recuadros con una imagen característica en cada caso, según categoría (Obras, Actividades, Ciudad Abierta, Vida Universitaria, etc). Al hacer hover sobre alguna de ellas, se muestra el nombre del catálogo y número de colecciones que posee el objeto internamente. Luego, si accedemos por ejemplo a la categoría Travesías, esta desprende una cuadrícula con los álbumes disponibles dentro de esa categoría. Al cliquear el cuadro rojo con un signo +, podemos ingresar al álbum especifico.

diseño

163

Maquetación: primera versión sitio travesías Se plantea un diseño de interfaz que responde a lo que se tiene actualmente, para producir una propuesta en el plano organizativo, mediante la presentación de sus contenidos. Los recursos tipográficos, iconográficos, cromáticos, grilla, estructura de cajas,interacciones se toman en base a lo planteado por Pyxis Framework en su versión inicial. Una premisa fue tratar de no alejarse a lo que visualmente es ahora el sitio de travesías: un espacio colaborativo, interactivo a través de un mapa muy presente, que integre el lenguaje gráfico como herramienta que logra aunar los distintos sitios de la escuela.

[79] Vista primera propuesta de interfaz para sitio Travesías

164

diseño

[79] dise単o

165

[80]

[81] 166

dise単o

[82] [80] Detalle Ficha Travesía primera propuesta [81] Detalle elementos informativos que componen la ficha [82] Detalle de sección Acerca de travesías

diseño

167

[84]

[83]

[83] Vista interfaz sección Travesías Destacadas [84] Vista interfaz sección Travesías Recientes

168

diseño

[85]

[85] Secci贸n Colaborar [86] Secci贸n Colof贸n [86] dise帽o

169

[87]

[87] Vista interfaz secci贸n Explorar propuesta inicial

170

dise帽o

[88]

[88] Detalle selects y campos de llenado en la bĂşsqueda

diseĂąo

171

06 cap

implementación 6.1 DEPURACIÓN 62 ENTREGABLES

174

implementaci贸n

6.1 Depuración

Ajustes en base a requerimientos finales Se realiza una reunión con Jaime Reyes, director del archivo, con el fin de detectar posibles problemáticas en cuanto a la forma, contenido y diseño del sitio propuesto. Las observaciones realizadas en torno a ello: •

Ajustar colores y forma del logo del archivo, presente en el header.

•

Con respecto al home, los contenidos que se exponen están relativamente bien. Seria bueno que el espacio dedicado a las noticias, no sean publicaciones que provienen del sitio principal de la escuela, sino que correspondan a noticias esencialmente referentes al archivo y su acontecer. En la sección Álbumes destacados, debiesen presentarse los 5 tipos de publicaciones del archivo: Constel, GoogleDocs (documentos), Flickr, Vimeo y Soundcloud.

•

Cambiar la ubicación de las noticias menores o enlaces breves dispuesto al comienzo de la página, bajo el carousel; desplazarlo al final o bajo sección Destacados. Esto para darle mayor jerarquía a lo que si se actualiza más frecuentemente, que son las distintas colecciones del archivo, presente en las plataformas externas.

implementación

175

Cambio en el rótulo y organización de contenidos: •

Nombrar como Colecciones en vez de Catálogos en menú de navegación.

•

Destacados en vez de Álbumes Destacados en la portada.

•

Colecciones en línea en vez de Catálogos en línea en portada.

•

Sección Publicaciones recientes quitar.

Agregar secciones:

176

•

Nombrar como Últimos proyectos del archivo o Archivo en el mundo, serían las distintas publicaciones en las cuales el archivo ha sido parte, colaborando con material diverso para exposiciones, publicaciones de catálogos, investigaciones, etc.

•

Disponer de enlaces directos a plataformas del archivo, de manera que estén más visibles al usuario.

•

Agregar el catálogo disponible en Casiopea (lista de archivos u objetos publicados y categorizados) para la encontrabilidad y presentación de estos al usuario tipo.

•

Agregar sección Colecciones Planimetrías y Fundadores, aunque no esté aún disponibilizado el material, se necesitará más adelante de este espacio.

implementación

•

En vez de Ediciones del Archivo cambiar a Publicaciones, dentro de esta se puede encontrar Boletines del Archivo y publicaciones especiales realizadas por este archivo. Puede visualizarse como una lista no categorizada, pero ordenada.

Segunda corrección - viernes 01 agosto 2014 Se acuerda una segunda reunión con Jaime Reyes y Katherine Exxs, para verificar los cambios realizados y ver la factibilidad de ellos por pantalla; además de poder proyectar el sitio en un tiempo futuro (wordpress). •

Se obtienen nuevas ideas a nivel de organización de los contenidos. Por ejemplo, el home se utilizará como medio de enlaces a las distintas plataformas, sustrayendo las portadas distintas que se crearon para las colecciones por ejemplo.

•

Los distintos apartados que componen el home como la sección Destacados, se deben organizar idealmente con una vista más real del contenido; romper un poco la estructura de grilla que se tenía, y permitir la visualización que entrega el iframe desde la misma plataforma.

implementación

177

[89] 178

implementaci贸n

6.2 Entregables

Mémoire: memoria y presente del archivo Mémoire es el nombre otorgado al repositorio en GitHub que aloja este proyecto. Mémoire es “memoria” en fránces y dicha palabra con su significado vienen a representar el por qué de este proyecto. La conservación de objetos u artefactos de tipo históricos o documentales, esta afecta a su materialidad, disposición, entorno; pero muy por encima a su temporalidad. Los archivos son la memoria colectiva e individual de toda organización o comunidad. Su labor principal radica en preservar ese patrimonio en el tiempo. Dicha similitud persigue este archivo, puesto tiene entre sus misiones: conservar, mantener , valorizar y poner a disposición de quien lo necesitase, el patrimonio artístico e intelectual de lo que es y en un futuro será la Escuela de Arquitectura y Diseño PUCV. Mémoire presenta una propuesta de diseño front- end para el sitio del Archivo Histórico de esta escuela, trabajada en conjunto con Pyxis Framework y el lenguaje iconográfico Stampa. Se puede acceder a él y navegar sus contenidos a través del siguiente enlace o dirección:

http://eadpucv.github.io/memoire/

implementación

179

[90]

[91]

[89] Vista general propuesta final Home archivo [90] Detalle de sección Colecciones del Archivo y efecto hover en rojo [91]Integración de galería Flickr en sección Destacados [92] Vista de publicación tipo noticia en home [93] Detalle de iconografía utilizada para diferenciar las distintas colecciones del archivo (flickr, soundcloud, vimeo, documentos, y constel

180

implementación

[92]

[93]

[95]

[94]

[94] Secci贸n Nuestra Labor que presenta el quehacer del archivo y la organizaci贸n de 茅ste. [95] Detalle del euipo de trabajo del archivo

implementaci贸n

181

[96]

182

implementaci贸n

[97]

[98]

[99]

[96] Secci贸n Portada de noticias [97] Detalle de publicaciones tipo [98] Detalle elemento Carousel o slider [99] Detalle modulo de enlaces a publicaciones recientes

implementaci贸n

183

[100] Vista general propuesta final secci贸n Colecciones [100] 184

implementaci贸n

[102]

[103]

[101]

[101] Detalle de cada colección presentada [102] Elemento menú ancla incorporado en la sección Colecciones [103] Enlaces a publicaciones recientes en todas sus categorías implementación

185

[104]

[104] Secci贸n Archivo en el mundo [105] Secci贸n Boletines del archivo

186

implementaci贸n

[105]

[106] Vista general publicaci贸n Archivo en el mundo [106] implementaci贸n

187

[107] Secci贸n Solicitudes

[107] 188

implementaci贸n

[108]

[109]

[108] Detalle formulario de solicitud [109] Vista secci贸n Contacto

implementaci贸n

189

[110]

190

implementaci贸n

6.2 Entregables

Rediseño sitio travesías

[111]

[113]

[112]

[110] Home propuesta final sitio Travesías [111] Detalle del mapa y su buscador Explorar [112] Detalle de publicación Fundamentos [113] Detalle de ficha previa de Travesía destacada

implementación

191

[114]

[116]

[114] Búsqueda por año y ejemplo de rsultados tras la búsqueda [115] Búsqueda por lugar y ejemplo de rsultados tras la búsqueda [116] Búsqueda por nombre de travesía y ejemplo de rsultados tras la búsqueda [117] Búsqueda por taller y ejemplo de rsultados tras la búsqueda [118] Búsqueda por participante y ejemplo de rsultados tras la búsqueda

192

implementación

[115]

[117]

[118]

Explorar: sobre el mapa y sus búsquedas El mapa permitirá la búsqueda a través de 5 factores: por año, por lugar, por nombre de la travesía, por taller (ARQ, DG, DI) y por participante. La idea principal es conseguir una visualización del mapa como fondo que va arrojando los resultados de búsqueda. Se integra el buscador sobre el mapa por un tema de mejor uso y disposición que permite visualizar y buscar sin tener que acceder a otra sección para ello. Los campos de búsqueda están separados en dos formas: a través de “Select” que son aquellos que tienen variadas opciones, dependendiendo de la categoría de búsqueda en que se inscriban. Para este caso laas categorías que presentan esta modalidad son: búsqueda por año, por nombre de travesía y por taller. Por otro lado, los campos que requieren ser llenados por el usuario, donde la búsqueda no esta normada, sino que la dictan los resultados arrojados conforme a la palabra que escriba el usuario son: búsqueda por lugar y por participante.

implementación

193

[119]

[120]

[121]

[122] [119] Vista general del mapa y buscador [120] Vista marcador o tooltip dentro del mapa, con información breve y que permite acceder a la ficha de travesía seleccionada. [121] Iconografía adoptada de Stampa para realizar la diferenciación de los campos de búsqueda [122] Vista del resultado de una búsqueda realizada

194

implementación

[123] [123] Detalle de composición página sección Acerca de Travesías

implementación

195

[124]

[125] [124] Detalle del mapa que presenta la ficha de traves铆a seleccionada [125] Detalle de informaci贸n presentada en la ficha

196

implementaci贸n

197

referencias BIBLIOGRﾃ：ICAS DIGITALES

Referencias Bibliográficas •

Spencer, D. (2010) A Practical Guide to Information Architecture (Practical Guide Series),United Kingdom, ISBN: 978-0-9561740-4-8, publicación digital, Editorial Five Simple Steps.

•

Campos Illanes, C.(2009) Galexia, estudio de navegación en un sitio web semántico, proyecto de título,Valparaíso,Escuela de Arquitectura y Diseño PUCV

•

Dupré, N. González, J. Saavedra, E.(2009), Aura, web semántica para archivos patrimoniales, proyecto de título, Valparaíso, Escuela de Arquitectura y Diseño PUCV.

•

Escuela de Arquitectura y Diseño,(1991), Amereida Travesías 1984 a 1988, Viña del Mar, Chile, Primera edición, 861 AME, Editorial Taller de Investigaciones Gráficas, Escuela de Arquitectura UCV

•

Varios Autores,(1967), Amereida, Santiago, Chile, Primera edición, 861 AME, Editorial Cooperativa Lambda.

•

Exxs, K. Trissoti, E. (2008), Bitácora Colectiva de Travesías Amereida, proyecto de título, Valparaíso, Escuela de Arquitectura y Diseño PUCV.

Digitales •

•

200

Sitio web Archivo Nacional Chile: http://www.archivonacional. cl/Vistas_Publicas/publicContenido/contenidoPublicDetalle. aspx?folio=4583&idioma=0 Sitio web International Council of archives: http://www.ica. org/13343/universal-declaration-on-archives/universal-declarationon-archives.html/

referencias

• • • • • •

• • • • • • • • • • • • • •

Artículo de Jaime Reyes sobre catalogación Códigos poéticos: http://www. ead.pucv.cl/2013/codigos-poeticos/ Atomic Design: http://bradfrostweb.com/blog/post/atomic-web-design/ DSpace repositorio y software en línea para gestión de archivos: http:// www.dspace.org/ Omeka - Plataforma para publicaciones digitales: http://omeka.org/about/ Sobre la catalogación de archivos: http://vraweb.org/ccoweb/cco/ partone. html Declaración Universal de los Archivos documento: http://www.ica. org/13343/universal-declaration-on-archives/universal-declaration-onarchives.html/ Sobre Diseño Front-End: http://www.lynda.com/Web-Web-Foundationstutorials/Front-end-design/158666/158685-4.html What is front-end development?: http://www.theguardian.com/help/ insideguardian/2009/sep/28/blogpost What is front-end development? Git Guía rápida: http://rogerdudler.github.io/git-guide/index.es.html Sobre Github: http://conociendogithub.readthedocs.org/en/latest/data/ introduccion/ Nielsen Norman Group: http://www.nngroup.com/ Uso de breadcrumb: http://www.smashingmagazine.com/2009/03/17/ breadcrumbs-in-web-design-examples-and-best-practices/ Sobre Mapas conceptuales: http://www.dubberly.com/concept-maps Acerca de travesías: http://www.ead.pucv.cl/amereida/travesias/ Elementos experiencia de usuario: http://www.jjg.net/elements/translations/ elements_es.pdf Diagramas de Garret: http://www.jjg.net/ia/visvocab/spanish.html Diagramas UML: http://www.clubdelsuran.com.ar/site/materiales/proyecto/ diagramas_del_uml.pdf Folders v/s Metadata: http://john-norris.net/2011/06/23/documentorganization-folders-vs-metadata/ Metadata: http://www.capture.co.uk/posts/2012/06/metadata-101/ http://blog.braintraffic.com/2012/03/an-intro-to-metadata-and-taxonomies/ The Back of the Napkin: http://www.danroam.com/the-back-of-the-napkin/

referencias

201

colof贸n

Colofón técnico

Tipografías, tamaños y colores Textos continuo: Source Sans Pro, Light, tamaño: 10pt, color: C:61.8, M:57.93, Y: 55.96, K: 32.72 Capítulos: Roboto Slab, Regular, tamaño: 21pt, color: C:75, M:68, Y:67, K: 90 y Roboto Condensed, Light, tamaño: 10pt, color: C:0, M:0, Y: 0, K: 0 Fondo color: C: 0, M:80, Y:79, K:0 Íconos: Stampa Ligera v.3.0.0 Títulos: Roboto Condensed, Light, tamaño:18pt, color: C:61.8, M:57.93, Y:55.96, K: 32.72 Títulos sección: Roboto Condensed, Light, tamaño:14pt, color: C: 0, M:80, Y:79, K:0 Subtítulos: Roboto Condensed, Regular, tamaño:11pt, color: C:61.8, M:57.93, Y: 55.96, K: 32.72 Notas o referencias: Source Sans Pro, Light, tamaño: 7pt, color: C:61.8, M:57.93, Y: 55.96, K: 32.72 Foliación página: nombre capítulo: Roboto Slab, Light, tamaño: 7pt, color: C:41, M:36, Y: 35, K: 28 número página: Roboto Condensed, Light, tamaño: 7pt, color: C: 0, M:80, Y:79, K:0

De la edición y su construcción El diseño del sitio web para el Archivo Histórico José Vial Armstrong, a través del repositorio en GitHub de nombre ‘‘mémoire’’ y la propuesta de rediseño del sitio Travesías, son el proyecto de titulación de la alumna Gabriela Pérez Ponce, bajo la guía de los profesores Herbert Spencer y Katherine Exss. Consta de cuatro ejemplares correspondientes al registro del período de Titulación I, II Y III ( marzo 2013 a septiembre 2014)

204

colofón

El formato es de 19 x 24,5 cms. El papel para la portada es Hilado 180 y fue impreso en una impresora láser HP en la sala de computación, y el interior, compuesto por papel Tradition Blanco Sahara de 90 grs. El empaste de los ejemplares fue realizado por el Sr. Adolfo Espinoza, encargado del Archivo Histórico José Vial Armstrong. Esta edición fue impresa el 15 de Septiembre del 2014 en la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.

Agradecimientos Especiales agradecimientos a quienes permitieron el desarrollo de este proyecto, ya sea guiando, animando, aportando sus críticas y comentarios. A Herbert Spencer, por instruirme y permitir el desempeño de este proyecto; a Adolfo Espinoza por la paciencia y enseñanza a lo largo del estudio. A Jaime Reyes por su especial dedicación e interés en la formulación de esta misión. A mi familia y personas más cercanas por entregarme las herramientas, cariño y el apoyo necesario ante este desafío en mi formación como diseñadora gráfica.

colofón

205