Pyxis framework y Gamma: El diseño y la gráfica como un ecosistema digital

Pyxis framework y rediseño del sitio ead

Título	Pyxis framework y rediseño del sitio ead
Tipo de Proyecto	Proyecto de Titulación
Palabras Clave	lenguaje gráfico, interacción, layout, tipografía, color, framework, red gráfica, responsive design, tema wordpress, diseño atómico, diseño genético
Período	2014-2014
Del Curso	Taller de Diseño Gráfico Titulación 2,
Carreras	Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Juan Antonio Godoy, Idar González, Gabriela Pérez, Catalina Reyes
Profesor	Herbert Spencer

Introducción

Gráfica de la e[ad] como organización

La e[ad] como organización es fundamentada en base a la investigación realizada durante la primera etapa del proyecto. Pyxis Framework y Gamma son dos plataformas digitales almacenadas en dos repositorios diferentes y disponibles en GitHub. Gamma depende de Pyxis para su desarrollo front-end y pyxis depende de Stampa para su complementación de íconos gráficos. Pyxis alimenta gráficamente a todos los proyectos, por lo que también es lícito decir que los proyectos en su totalidad son dependencias de Pyxis.

En este sentido, cada proyecto depende y se complementa con el otro, dentro de un mismo ecosistema digital. En base a este fundamento el diseño atómico es un atractivo método teórico y práctico para llevar a cabo el desarrollo unificado del todo y las partes.

El diseño atómico

Atomic Design

La lógica base del diseño atómico es que las interfaces sean entendidas como construcciones de pequeños componentes fundamentales para luego combinarse y generar estructuras complejas en mutua relación. Citando a Stephen Hay: "Nosotros no estamos diseñando páginas, nosotros estamos diseñando sistemas de componentes". El diseño atómico es partidario del método, evadiendo el desplante subjetivo que aún permea los encuadres del oficio. Las unidades atómicas se complementan para formar moléculas, que luego se combinan para crear organismos más complejos. De aquí deviene la analogía con el comportamiento físico-cuántico de los átomos.

Existen cinco niveles diferenciados en el diseño atómico:

1. Átomos: Los átomos vienen a ser los bloques-base para cimentar una relación de la estructura en la página. Ahora, aplicado a las interfaces, los átomos se identifican en los elementos fundamentales que requiere, por ejemplo, un Framework especializado en operar la gráfica global de ciertas organizaciones. Elementos como paletas de colores, tipografías y aspectos necesarios como bloques y animaciones. Elementos abstractos que no son 100% explotables por sí solos, pero donde un contexto determinado puede asimilar en su conjunto como una estructura unificada.

1. Moléculas: Las moléculas son grupos de átomos combinados para generar una coherencia semántica derivada, como puede serla un formulario a través de un etiqueta Input, un text-area y un botón. El formulario es ahora una estructura lúcida en sí misma, capacitada para suplementar la interacción del usuario con el sistema.

1. Organismos: Los organismos son estructuras de moléculas para generar secciones en la interface. La complejidad se incrementa puesto que una sección está disponible para establecer un modo en que sus moléculas se combinen.

1. Templates: Los templates ahondan en el lenguaje. Los grupos de organismos se diseñan para conformar un layout concreto que provea un contexto semántico funcional y reconocible por el usuario. Ejemplos de esto están en el diseño de Wireframes - HTML.

1. Páginas: Las páginas albergan el contenido representativo del sitio en cuestión. Es el momento en que el diseño comienza a develar el resultado final en su contexto y motivo real. Las imágenes, combinaciones de tonos escogidos en relación directa con la interacción y las animaciones configuran secciones diagramadas en conjunto para, finalmente, ser una propuesta gráfica estructurada sobre una pauta escalonada que representa niveles de pensamiento en relación al todo.

Sobre Pyxis

¿Qué es Pyxis framework?

Patrón / Matriz gráfica

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 y promover buenas prácticas de desarrollo con el uso de patrones o esquemas de diseño.

Nuestro trabajo en este punto, ha planteado, el desarrollo de un framework que establezca normas de diseño web aplicables a los sitios a rediseñar de la escuela.

Estructura gráfica unificada

Como segunda etapa del proyecto que designa a Pyxis como un Framework de componentes visuales en la iterface, el trabajo radica en la complementación del proceso que fundamenta las decisiones de dichos componentes para el pryecto, anteriormente llamado "EGO", disponible también en la documentación de Casiopea.

La grilla (originaria de Bootstrap), la interacción (formularios) y tipografía (Source Sans Pro - Merriweather) están presentes en la anterior documentación. Iconografía (Stampa) es un componente registrado en su propia documentación. En la documentación presente se halla el fundamento gráfico de los componentes color y versatilidad.

Color

Metodología de estudio: Habitando el color

El habitar en la Escuela tiene una visibilidad, luces y colores determinados, que surgen desde la herencia gráfica (tintas y papeles) y con los materiales con los que se construye (maderas, concreto, fierro, etc), es por esta razón que se busca una coherencia entre el modo de hacer en el oficio y cómo el cuerpo de alumnos y profesores habita el espacio. Se toma partido por ahondar en lo cromático del espacio, registrando lo visible y cotidiano.

Registro

Para poder decidir qué espacios son los relevantes, se recurre a un levantamiento de información realizado el trimestre pasado en el mismo proyecto, donde se muestra el tránsito, las concentraciones de carreras y cómo los alumnos recorren el campus.

Tránsito: a través de rutas o senderos que guían un recorrido por el entorno. Existe un recorrido determinado por niveles. De forma externa, por las rutas que se van presentando en la escuela, mediante escalinatas y grandes plataformas de cemento y además esta el espacio de recorrido interior que se da entre paredes y oficinas. El espacio exterior se perfila entonces, por trazos irregulares de concreto más libre y el interior por trazo lineal más estrecho.

Habitar y permanencia: relacionado con aquellas áreas en que se visualiza un estado de permanecer de la comunidad escuela, como nodos de reunión o gran afluencia de personas. Hay lugares que convocan o crean estados de permanencia o reposo. Patios, salas mayores o las mismas formas en que esta construida la escuela (escaleras, bloques), generan estadía, reúnen a la comunidad, sin ser necesariamente lugares aptos para ello.

En el recorrido aparecen objetos con los cuales se interactua de manera directa y estos objetos tienen colores potentes, ya sea con las bancas de madera, barandas rojas, franjas amarillas al comienzo de una escalera, pizarras negras y además con entornos de determinado color, como los muros blancos, pisos rojos, pisos grises con tramas, etc.

Abstracción

El proceso de edición de las fotografías, comienza por trabajarlas desde Photoshop y allí utilizar la herramienta "Rango de color" y determinar cuál será el tono esencial de cada fotografía. Este tono esencial será lo único que permanezca luego de borrar los tonos que estén alejados de la gama cromática. Luego, la imagen se indexa cromáticamente y se le exige que construya la imagen en 24 colores. De esta manera, se obtiene una gama de 24 colores por fotografía, abstrayendo el color de su contexto natural.

Cruce teórico

Una vez escogidos los diversos tonos de las fotografías, junto con establecer un cruce teórico con la Psicología del color, se logran determinar 5 variables cromáticas por cada fotografía, de esta manera la decisión cromática adquiere una densidad mayor, rescatando el efecto que puede tener sobre el usuario.

Decisión gráfica e implementación

Una vez establecida la paleta gráfica, se ordenan con sus respectivos nombres para ser nombrados a manera de catálogo (para así trabajar con ellos fácilmente con LESS) y poder transcribir de codificación HEX a RGBA y así usarlos en el framework y todos los sitios que se desprenden de sus variables cromáticas.

El recorrido habitual del alumno

El espacio y lo cromático

Las imágenes son divididas por su lugar en el campus, luego en la misma fotografía sin editar, se muestra con un círculo blanco, cuál es la tónica cromática de la fotografía que se quiere conservar, en el siguiente cuadro se muestra su versión específica, con un negro borrando los tonos no deseados y así no interferir, para poder acceder a una paleta más limpia.

Patio primero año Diseño

1. Grises 2. Rojos

Patio segundo año Arquitectura

3. Rojos 4. Cafés 5. Beiges

Escalera primer año Arquitectura

6. Olivas - petróleos

Corredor Librería

7. Grises

Corredor interior

8. Cafés

Escalera Cafeta

9. Naranjas

Cafeta (Ampliación)

10. Grises 11. Grises

Patio de la palmera

12. Rojos 13. Grises

Piso balcón

14. Grises

MadLab

15. Rojos

Psicología del color

• Rojo: El más caluroso y y dinámico de los colores. Estimulante, apasionado, poderoso y expansivo. Se usa normalmente para llamar la atención de elementos críticos.

• Naranja: Es más balanceado, energético y amistoso. Se una generalmente para usuarios jóvenes y provocar una buena impresión de voluntad.

• Amarillo: Es el color más brillante y enérgico de los colores cálidos. Es usado para generar una impresión de felicidad y alegría.

• Verde: Color secundario, calmo, balanceado y rejuvenecedor. Representa estabilidad y posibilidades.

• Azul: El color azul representa dependencia, responsabilidad, confianza. En sus variantes oscuras, es usado generalmente para negocios e instituciones de educación.

• Púrpura: Representa nobleza, abundancia y dignidad. También imaginación y creatividad. Se usa para caracterizar la riqueza y el lujo.

• Negro: Representa poder, elegancia y modernidad. También misterio.

• Gris: Representa neutralidad y calma. Se puede asociar a un diseño más conservador.

• Blanco: Representa claridad, limpieza, esperanza y abertura. Está asociado con la esterilidad y simplicidad.

• Crema: Este color representa calma, elegancia y pureza.

• Beige: Se asocia con la piedad y el conservar. Es un color, como el gris, muy apagado.

• Café: Este color puede representar experiencia y confort.

Paleta final escogida

Layout

El layout puede ser entendido como una plantilla o esquema, que representa la página en cuanto a los contenidos y su distribución. La idea es que, a partir del layout, el sitio web pueda dejar en evidencia sus contenidos y que la información se vaya presentado según su importancia de manera organizada.

El diseño de sitios web habituales se divide en bloques: header, menú, contenidos y footer. Visualmente, los bloques se disponen en varias filas y columnas organizadas.

En el header suele incluirse el encabezado de la página (como el nombre de la empresa o de una publicación), en la columna de la izquierda aparecen por lo general secciones del sitio (Quiénes somos, Qué hacemos, etc.), la columna del medio comúnmente es destinada al desarrollo de los contenidos y la columna de la derecha, a publicidad o banners.

Layouts de ancho fijo

Se refiere a aquellos diseños en que existe un contenedor principal, con un ancho especifíco del espacio web, independiente de la resolución de pantalla por donde se observe. Un ancho fijo común es el de 760 píxeles por ejemplo, tamaño que garantiza a los usuarios con una resolución de pantalla de 800 × 600 píxeles la visualización de la ventana completa sin desplazamiento lateral, que puede ser una molestia en algunos casos.

Ventajas y desventajas

• Al trabajar con un ancho fijo se tiene un mayor control del área de contenido principal, de manera que no es necesario establecer el ancho mínimo-máximo.

• Aquellos diseños que cumplen un ancho fijo, a veces es más fácil darles estilo y ajustarlos a lo deseado.

• El trabajar con un ancho de 760 píxeles (área común de contenido principal)ayuda a obtener una legibilidad en pantallas diferentes.

• El ancho ideal para legibilidad óptima (760px) puede no funcionar bien si el texto se amplía o desproporciona enormemente (con el navegador) puesto que el interlineado no aumenta a la vez con el cambio de tamaño de texto.

• No es factible para aquellos que utilizan pequeños pantallas (640 × 480 píxeles, pues terminan con una barra de desplazamiento horizontal en un sitio de ancho fijo de este tipo. Se trata de un problema poco frecuente para los pc pero no así para los dispositivos móviles.

• Hay una limitación que propicia los espacios en blanco o fondos, lo que podría no funcionar bien si la información presentada no esta de todo equilibrada en este espacio de trabajo utilizado.

Layouts de ancho fluido

Estos layouts se crean no especificando un ancho absoluto en píxeles sino mediante un porcentaje. El layout tomará el 100% de la ventana del navegador sin que surja una barra de desplazamiento horizontal cuando se aumenta o disminuye ésta.

Ventajas y desventajas

• Atestar de contenido el espacio de trabajo o dejar poco aire o espacios en blanco pueden ocasionar problemas de usabilidad. Mucho contenido puede confundir al usuario y crear una vista de un sitio demasiado congestionado o desordenado.

• Mucho espacio en blanco también puede provocar la sensación de no acabado o incluso de ser un sitio débil en contenido.

• Una desventaja de trabajar con porcentajes es la exactitud, no así sucede con los píxeles.

• Lo bueno de trabajar bajo un diseño de layout fluido, es que se puede dar flexibilidad y/o adaptabilidad a gran parte de los elementos organizados en el sitio, junto con la garantía de visualización en distintas resoluciones dependiendo el dispositivo.

Layouts de ancho elástico

En los layouts de ancho elástico, el contenedor principal del sitio y otros elementos se miden utilizando los em como unidad de medida. Los em son proporcionales con el tamaño de texto o font size. Por lo tanto, si se aumenta el tamaño del texto, los divs medidos en ems aumentarán el tamaño en sí.

Un sitio que presenta variados ejemplos de este tipo es http://www.csszengarden.com/. Propone diseños o plantillas con un HTML único fijo sobre el cual se tienen distintos archivos CSS para generar los diferentes tipos de sitios.

Ventajas y desventajas

• El diseño es estable porque todo se re-dimensiona al mismo ritmo. Nada cambia desproporcionadamente.
• El aumentar un texto demasiado puede no ser una ventaja para la usabilidad del sitio pues hace que nos perdamos o no sean bien entendidas las jerarquías propias del sitio.

Fuentes

• Blog Green-Beast que menciona el diseño de Layout*
• Diseños de CSS Zen Garden
• Estructuras comunes de organización de página
• Artículo acerca de la técnica denominada Faux Columns

Referencias

Durante la primera etapa del proyecto, Pyxis era una compilación de componentes para diseñar un framework estable y sustentable con la unificación gráfica de la e[ad] como organización. Este proyecto llevaba el nombre de "EGO (experiencia gráfica en la organización)" y estaba falto de componentes gráficos hoy en día estandarizados por los desarrolladores. Por lo que, de manera ulterior, se verificó dicha actualidad y sus componentes llevando a cabo una breve investigación de los Frameworks reconocidos por su popularidad en la web, a saber:

Bootstrap

Bootstrap

Descripción

Twitter Bootstrap es un framework o conjunto de herramientas de software libre para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript opcionales adicionales.

Referencia

Como referencia, Bootstrap es la base de Pyxis fundamentado excepcionalmente en la grilla que diagrama la estructura del Layout de las páginas, a través de sus 12 columnas porcentuales; la flexibilidad en el diseño se configura en cada soporte digital de manera simultánea. Esto es sólo posible gracias al código y su solidez que generan los desarrolladores de Twitter.

Foundation

Fundation

Descripción

Fundation framework es una colección de herramientas -al igual que Bootstrap-, para la creación de sitios web y aplicaciones. A diferencia de éste, Fundation no trabaja con LESS sino con extensiones de cascada en Saas.

Referencia

La referencia complementada en Pyxis deviene de la observación de las diferencias entre frameworks reconocidos por los estándares del uso popular en la web. El protocolo similar de contener secciones específicas como Tiporafía, Grilla (la cual utiliza 24 columnas en vez de 12, permitiendo -desde cierto punto de vista- la complejidad de una diagramación en la página más específica y detallada), interacción, plugins de JavaScript, etc.

Skeleton

Skeleton

Descripción

Skeleton, frente a frameworks más pesados como Bootstrap o Fundation, se mantiene en base a lo necesario para la maquetación de un sitio con una grilla simple de 12 columnas y 960px de ancho máximo.

Referencia

Muchas veces la extensa variedad de herramientas que ofrece un Framework es una complicación para su uso. Lo observado en Skeleton deviene de una simpleza para estructurar un lenguaje transversal en la gráfica de sitios web.

GEL (bbc)

BBC - GEL

Descripción

GEL (Global Experience Language) es otro reconocido Framework que establece las normas y transversalidad en el diseño para unificar la experiencia del usuario en línea, otorgando un patrón de diseño también para todos los servicios de la BBC.

Referencia

La referencia aplicada desde este proyecto se fundamenta en el incentivo conceptual de utilizar el "modo" o la "cualidad" para nombrar un estado presente de una organización o empresa de trabajo. Esto quiere decir que la identidad se vuelve una raíz que brota de la gráfica y de la manera en que dicha gráfica quiere decirse a ella misma. "GEL Authentic, Current, Pioneering, Modern British, Local/Global, Compelling, Distinctive, Joined-up, Universal, Best."

La e[ad] como organización fue entendida en parte y a base de esta línea que propende al "adjetivo" para ser observada. De tal manera la gráfica debe ser correspondida con la observación. Pyxis, originado en parte por dicha observación, abarca hoy el estigma conceptual de GEL como proyecto desarrollado en la web.

Implementación

Dependencias del ecosistema digital

Las dependencias de Pyxis Framework son Stampa, Meta (personas), Gamma y AHJVA. Este quiere decir que cada dependencia forma parte de un ecosistema digital donde radica el complemento y alimentación directa entre las mismas, cada una desde su propia ruta en GitHub.

Stampa

Stampa

¿Qué es Stampa?

Stampa es un proyecto centralizado en la iconografía que se complementa con Pyxis. Es una rama de la función del Framework para desarrollar las herramientas de diseño, externalizada en su propio repositorio y documentación.

Origen

"Stampa", en italiano, significa: "carattere, indole", lo que en español se traduce como "carácter o índole", referenciando la tipografía y lo iconográfico.

¿Qué es Meta?

Meta es una plataforma (al igual que Stampa, Gamma y AHJVA almacenada en GitHub), donde se desarrolla el proceso de datos internos (meta-data) que efectúa el sistema para una idónea interacción con el sitio e[ad].

Su propósito es mejorar la interacción con el usuario al unificar las plataformas digitales de la e[ad] como organización en la web. Incrustado en la interface de cada sitio relacionado con la organización, Meta es graficado en una barra superior donde el usuario puede identificarse y navegar a través de ellos, a saber:

• Sitio e[ad]
• Wiki Casiopea
• Archivo histórico (AHJVA)
• Estorninos

Gamma

Gamma

¿Qué es Gamma?

Gamma es una plataforma digital de trabajo colaborativo (específicamente almacenado como repositorio en GitHub), donde se registra el avance de las maquetas navegables para el re-diseño del sitio web oficial de la e[ad] ,previamente investigada como una organización compleja de estructuras en base a una jerarquía y oficio reconocibles en su identidad. Es desde la conceptualización de dicha identidad que Gamma sostiene el proceso constructivo-gráfico ulterior a la arquitectura de información y diseño de Wireframes.

Origen

El nombre del repositorio "Gamma" constituye una referencia directa con la estrella del mismo nombre que forma parte de la constelación "Pyxis", ubicada en el hemisferio sur entre los paralelos 20º a 40º de latitud sur, cerca de la constelación Puppis, muy próxima al ecuador de nuestra galaxia. Es una de las tres estrellas principales de la constelación, junto a las otras dos: Alpha y Beta.

Esta analogía pretende enlazar de manera creativa los elementos constituyentes del proceso "Atomic-design", donde la identidad se torna relevante si consta formalmente de una imagen coherente y holística (construida metódicamente a través de niveles aesignados) y, en este caso, con un carácter mitológico.

Archivo Histórico José Vial Armstrong

El Archivo Histórico (AHJVA) existe como plataforma digital en Flickr. Sin embargo hoy es un proyecto en paralelo y que forma parte de Gamma, para transformarse en un sitio de diseño autónomo, también con su propia documentación.

El modo de diseñar (metodología de trabajo con software)

La metodología durante el proceso de diseño de código (HTML+CSS) requiere del uso de Softwares especializados para el desarrollo eficiente en las plataformas de trabajo y en el diseño mismo como resultado. Las opciones de Softwares de trabajo son múltiples y variadas; en este proyecto, en base al estudio de la mayor eficiencia con respecto al tiempo y la documentación, fueron de gran uso las siguientes:

Github

GitHub

GitHub es un servicio web gratuito para alojar proyectos utilizando el sistema de control de versiones Git. Este sistema es efectivo en cuanto le otorga a cada programador una copia local del historial del desarrollo entero, y los cambios se propagan entre los repositorios locales. Estos cambios se importan como ramas adicionales y pueden ser fusionados en la misma manera que se hace con la rama local. De esta manera un mismo proyecto se alimenta con de ramas de trabajo diferentes.

Algunas ventajas de trabajar con GitHub:

• El factor "tiempo" a la hora de codificar un diseño previamente estipulado se vuelve un obstáculo si no se piensa el front-end colaborativo y de manera simultánea. GitHub es un excelente compilador de código distribuido en ramas diferentes donde cada diseñador actualiza los cambios (HTML + CSS) en una rama local (dentro de un repositorio común), para así luego fusionar dichos cambios en una rama común que almacena el resultado final.

• Los sitios desarrollados en GitHub están disponibles de manera pública a través de un enlace que alberga la última versión del proyecto. En este sentido es posible visitar el sitio en la web con los diferentes navegadores para evaluar su diseño y usabilidad previo a ser implementado en un Hosting.

• Además GitHub recaba en un "sistema de seguimiento de problemas" a través de su interface local; esto quiere decir que identifica los errores de "cambios" en la estructura del código y sobre-escribe los errores en los archivos para hacer un seguimiento y repararlos de forma expedita.

Jekyll

Jekyll

Básicamente Jekyll es un operador de estructuras de Código para customizar Layots y contenido de manera estática. Es una herramienta eficaz para diseñar un sitio almacenando la información en partes y, con esto, no requerir de iteración en escrituras de código que se reiteran en la interface, permitiendo trabajar diferentes categorías, páginas, post y layouts finiquitados.

Algunos ventajas de trabajar con Jekyll:

• El controlar templates y layouts de manera estática quiere decir, como también dispone Github, que es permisible trabajar en ramas diferenciadas y, sin embargo, estas ramas no ser más que estructuras de código tales como las correspondientes al protocolo del sistema web convencional: Headers, Footers, Asides (como ejemplos) y más contenido que se reitera en las diferentes páginas del sitio que se hallan previamente escritas y que mediante un proceso de compilación local y una extensión del archivo es posible distribuirlas en los diferentes layouts desarrollados.

• Con herramientas externas Jekyll permite identificar los elementos dinámicos y los estáticos; gestionar estos dos modos se valora por el hecho de hacer más resumido el código de los archivos. Nuevamente entra en juego el factor "tiempo".

• Además, esta herramienta permite la combinación de layouts y plantillas (includes), siendo las primeras útiles para una maquetación más genérica del sitio, y las últimas con un marcado más específico.

Bower

Bower

Bower es un administrador de paquetes para la web. Significa "enramada" y fue creado por los desarrolladores de Twitter. El trabajo de bower es básicamente descargar y distribuir librerías o paquetes en una ruta específica y que sean útiles para complementar el trabajo de front-end, como Jquery, un framework externo u otro proyecto de desarrollo para así generar dependencias de terceros.

Algunas ventajas de trabajar con Bower:

• Cuando se quiere descargar un proyecto de terceros o una librería se debe ir al sitio y descargarla, ya sea desde el sitio oficial o a través de GitHub. Muchas veces esto se torna complicado o tedioso. Bower soluciona este problema al descargar las versiones más recientes y administrarlas en paquetes de manera eficiente y expedita.

• Las dependencias del proyecto son brevemente actualizables a través de un sencillo comando en la consola (bower install). Bower se apoya en repositorios de GitHub los cuales están versionados mediante tags. De esta manera es muy sencillo gestionar los paquetes de los que depende el proyecto.

• También es posible escoger la versión específica del proyecto, eliminarlo, cambiar la ruta de los archivos, listar los paquetes o generar dependencias de cierta dependencia. Todo esto es muy positivo si se toma en cuenta el poco trabajo que requiere escribir los comandos necesarios en la consola.

Less

Less

LESS es un lenguaje de programación que extiende CSS (cascada de estilo) para dotarlo de un comportamiento dinámico a través de variables, mixins, operaciones y funciones. El navegador interpreta el código CSS común a través de un proceso de compilación de las plantillas escritas en LESS.

Algunas ventajas de trabajar con Less:

• Variables: Las variables permiten aplicar el principio DRY (Dont Repeat Yourself). Se define en un solo lugar un valor que será utilizado en múltiples sitios de nuestro código CSS. Esto nos permite reciclar código y en caso de cambiar por ejemplo un color rgba, tendremos que cambiarlo solo en un lugar de nuestro archivo CSS.

• Mixins: Los Mixins permiten embeber todas las propiedades de una clase dentro de otra clase; simplemente incluyendo el nombre de la misma como una de sus propiedades en la hoja de estilos.

• Reglas de anidación: Al programar en LESS es posible usar selectores anidados dentro de otros selectores. Esto convierte a la herencia en una codificación más limpia y escueta.

Sobre Gamma

Investigación

La observación de una organización

La Escuela de Arquitectura y Diseño es una organización que posee un ecosistema de plataformas digitales, todos con diversos usos y contenidos. El tratado gráfico en cada una de las plataformas, sostiene un valor gráfico que da pie para que los usuarios logren identificarse con cada una de ellas. Sin embargo las variables son tan amplias que termina siendo un conjunto de sitios de diverso carácter.

Durante la primera etapa de titulación, se construye un proceso que dio paso a encontrar conceptos, ideas, identidades y rasgos que son traducidos a lenguajes gráficos. Todo este proceso está documentado en esta página de la Wiki

Luego de observar a la Escuela de Arquitectura y Diseño como organización, entender su configuración y flujo de estudiantes, se proponen conceptos que engloben a la Escuela.

1. Fundadora : Consonante La relación de lo otro, oficio-poesía, el modo de originar la obra a través de vínculos
2. Americana : Difusa Los límites del oficio, los límites americanos y la extensión del oficio.
3. Moderna : Abierta No-convencional, estar permanentemente abierta a lo nuevo, a una inovación constante
4. Poética : Leve El momento presente y la levedad del acto poético, la Phalène
5. Autónoma : Tenaz Consistencia en el quéhacer, en su manera de obrar, en su propósito
6. Colectiva : Pulsante El flujo de la comunidad, la manera rítmica de su interacción, lo dinámico
7. Lúdico : Maleable La adaptación del presente
8. Mesurada : Depurado La justa medida del hacer, la sutileza en la obra

El siguiente paso fue verificar estos conceptos, es por eso que se decide hacer encuestas a los mismos alumnos y que desde ellos surgan conceptos y palabras que identifiquen a la Escuela. De esta manera, ella misma se nombrará y se identificará naturalmente, se evidencia su propia percepción y quehacer.

Verficación de la identidad

'Esquema identitario'

En un plano cartesiano se ubican cuatro polos que exponen adjetivos: "Moderna" contrapuesto a "Tradicional", y "Poética" contrapuesto a "Práctica". De esta manera el participante sitúa a la Escuela dentro del esquema, revelando la percepción que se tiene sobre la situación actual de la organización.

Por otro lado, cada adjetivo está escalado dentro del plano,de manera que la respuesta de los participantes frente a la identidad se profundiza más.

Resultados

El primer esquema muestra los resultados del ejercicio realizado por alumnos de la Escuela de Arquitectura y Diseño, mientras que, el segundo, da cuenta de un ejercicio análogo realizado por profesores de la facultad.

Los alumnos ha respondido, en su mayoría, que la e[ad] es 50% Moderna y 50% Poética. Por otra parte, la segunda mayoría se ha debatido en que fuera Moderna y Práctica, o Tradicional y Poética. Estos son los resultados finales, de 25 respuestas, donde el paréntesis "()" da cuenta del número de personas que respondieron dicha combinatoria de adjetivos. Quienes han marcado el punto justo en la línea, han respondido neutro, puesto que el punto se ubica en medio de dos adjetivos contrapuestos:

• 50% moderna, 50% poética (9)
• 100% moderna, 100% práctica (2)
• 50% tradicional, 50% poética (2)
• 50% tradicional, 100% poética (2)
• 100% tradicional, 100% poética (2)
• 50% moderna, 100% poética (1)
• 100% moderna, 50% poética (1)
• 100% moderna, 100% poética (1)
• 100% tradicional, 50% poética (1)
• 100% tradicional, 50% práctica (1)
• neutro entre moderna y tradicional, 50% poética (1)
• neutro entre moderna y tradicional, 100% poética (1)
• neutro entre moderna y tradicional, neutro entre poética y práctica (1)

Encuestas online

Luego, a un modo más objetivo se decide hacer encuestas online donde cualquier alumno puede responder y esto arrojará porcentajes, jerarquías y tendencias.

Primera encuesta

"La encuesta se articula en dos momentos, el primero, que pregunta acerca de los escenarios y la comunidad. Mientras que el segundo, del oficio y ámbito de la escuela. Lo que se busca es que los alumnos puedan ellos mismos, nombrar realmente qué se hace en la escuela, cómo se hace y dónde se hace. Así que todas las preguntas son pensadas en función de ese objetivo, donde se pueda obtener información que nos sirva para identificar en concreto la organización a través de sus acciones."

*Procesos administrativos

Se declara mediante esta serie de preguntas sobre los procesos académicos dentro de la organización que el principal ingreso a la Escuela es el ingreso regular, mediante PSU. Además, que la secretaría se vuelve la principal fuente de información sobre consultas administrativas, donde la inscripción de ramos es la temática más fuerte de consulta seguida por la regularización de matrícula.

*Ámbito / actividades

Reuniendo las respuestas a los distintos puntos, podemos concluir que el espacio físico dentro de la Escuela donde más concurren los estudiantes a realizar actividades específicas es la Biblioteca, seguida por la Sala del Taller y el Laboratorio de Computación. Complementando estos resultados, el espacio donde los estudiantes recurren para 'esperar o hacer tiempo' es principalmente el Patio de la Palmera, seguido de igualmente por la Biblioteca.

*Plataformas digitales

Se establece la cantidad de personas que conocen ciertas plataformas ligadas a la comunidad de la Escuela, y al mismo tiempo la intensidad de sus visitas, que van desde 'Casi nunca' hasta 'Todos los días'. Podemos observar que las plataformas con mayor intensidad de visita (lo que permitiría establecer que son de mayor importancia para la comunidad) son la Wiki Casiopea, el sitio oficial de la Escuela y las comunidades presentes en facebook.

En cuanto a las actividades realizadas al interior de la plataforma digital, se desprende que el sitio oficial de la Escuela de Arquitectura y Diseño es el medio principal para acceder a noticias e información oficial de la organización, mientras que la plataforma donde se genera mayor interacción es Wiki Casiopea, en donde los alumnos acceden a contenido almacenado y también lo nutren con sus propios trabajos e investigaciones.

*Ciudad Abierta

En torno a las preguntas sobre Ciudad Abierta, los participantes respondieron que en su mayoría, arriban al campus mediante bus o micro y no realizan actividades aparte del curso Cultura del Cuerpo.

*Oficio

Al preguntarle sobre el área más cercana a su carrera, la mayoría de los estudiantes respondieron 'artística', lo que indica la presencia del arte dentro de la metodología en la Escuela, y cómo los alumnos la recogen y reconocen como parte de su formación.

Segunda encuesta

"La encuesta se construye a partir del querer conocer el modo en que la comunidad percibe a la Escuela, desde el ingresar a la organización hasta su actuar dentro de ella, permitiendo acceder a las cualidades identitarias de la propia comunidad, además de sus necesidades como cuerpo Escuelero."

*Ámbito y comunicación

Frente a la pregunta sobre la razón por la cual el participante ingresó a la organización, predominan el prestigio de la Escuela de Arquitectura y Diseño y también el prestigio de la PUCV. Las respuestas que siguen son el carácter poético de la Escuela y recomendaciones de conocidos o amigos.

En cuanto a la comunicación con el taller, los participantes respondieron que en su mayoría se contactan mediante grupos en facebook, seguido por el chat del mismo servicio.

Sobre las actividades en que los encuestados han participado, aparece la Farándula como un quehacer transversal, acompañada por charlas y en una menor medida, exposiciones. Al plantear la pregunta '¿Has pensado hacer una práctica profesional?', la gran mayoría admitió que sí, seguida por un porcentaje que ya la hizo. Esto permite desprender que existe una necesidad real de al menos publicar información sobre prácticas profesionales.

* Cualidades indentitarias

Frente a la interrogante sobre las debilidades y fortalezas de la Escuela, aparecen consideradas como debilidades la Malla Curricular, los Cursos y Seminarios, la Participación con la Comunidad, la Infraestructura y la Investigación. En el otro polo, de las fortalezas, aparece la Travesía como la mayor fortaleza de la Escuela, seguida por el Campus en Ciudad Abierta, el Cuerpo Académico y los Actos Poéticos.

Tanto la Plataforma Digital como el Campus aislado en Recreo se consideran como elementos neutros en cuanto no muestran una preferencia significativa.Al calificar las cualidades identitarias de la Escuela, recogidas previamente en la etapa de observación, los participantes revelan su percepción de la organización a la que pertenecen. De esta forma, son consideradas como ciertas (ya sea completamente o parcialmente) la cualidad Poética, Fundadora, Autónoma, Tradicional, Lúdica y Colectiva. En contraposición, aquellas consideradas como falsas son la cualidad de Práctica, Abierta, Moderna, Transparente y Medida.

Conclusiones generales

• Los participantes en el esquema identitario sitúan a la Escuela de Arquitectura y Diseño dentro de los ejes de "Moderna" y "Poética", sin embargo, la cualidad de moderna se contrapone con los datos recogidos en la segunda encuesta online. Se puede establecer, de todas formas, que la cualidad de 'Poética' es uno de los pilares dentro de la formación académica.
• Como parte de los mapas conceptuales, se aprecia que la organización es concebida a partir del oficio, la poética y la comunidad. Esto confirma el valor que los estudiantes le otorgan a la cualidad de "Poética".
• De las dos encuestas online, se llegan a conclusiones en el área de proceso académicos, donde la secretaría de docencia se lleva gran parte de la carga en cuanto a comunicar informaciones administrativas y llevar a cabo trámites; carga que podría ser asumida por un otro organismo, como por ejemplo, el navegador. académico.
• A su vez, al analizar los resultados de preguntas en torno a las plataformas digitales, se aprecia que aquellas de mayor relevancia para los estudiantes son el sitio de la e[ad], donde obtienen información y anuncios oficiales y la Wiki Casiopea, donde los estudiantes obtienen y publican información académica. Al contrario, los sitios de travesía, Soundcloud y Vimeo, dependientes de la Escuela, tienen dificultades en su difusión, siendo apenas visitados y no logran ser de gran relevancia para los estudiantes.
• Se puede establecer que una de las cualidades fuertes de la organización para agentes externos es su prestigio académico, el cual atrae a los estudiantes a ingresar a la Escuela. Ya una vez adentro de la organización se consideran como elementos para potenciar a las travesías, Ciudad Abierta y el cuerpo académico. Por el otro lado, se deben solucionar las problemáticos tanto de la malla curricular, ampliar la cantidad o la difusión de cursos y seminarios, y también aumentar la participación con la comunidad.
• Se toman como cualidades ciertas, o verificadas, de la Escuela lo "Poética", "Fundadora", "Autónoma", "Tradicional", "Lúdica" y "Colectiva". Estos adjetivos, posteriormente tendrán eco en la imagen digital e institucional de la Escuela de Arquitectura y Diseño.

Definición de cualidades identitarias

Tradicional

Se valora la historia y el recorrido de la manera de hacer oficio dentro de la Escuela, donde arquitectos y diseñadores convergen en una estampa gráfica que proviene de la observación del espacio y la ciudad.

Fundadora

La actitud pionera que tuvo la Escuela desde los años sesenta a los ochenta se traslada al presente con la cualidad de fundadora, en tanto formula una visión poética de América, “Amereida”, lo que dice de su origen y destino como organización.

Autónoma

La Escuela de Arquitectura y Diseño goza de autonomía creativa en relación con el resto de las facultades de la PUCV. Va ligado esencialmente a la ubicación aislada del campus en Recreo, además de contener a la Ciudad Abierta como campus experimental.

Poética

La poética como cualidad constituyente de la Escuela celebra los oficios, su presente y su eventual trascendencia. Se manifiesta tanto en actos poéticos como en travesía y taller, impregnando con la palabra el estudio del espacio.

Lúdica

Es un principio de la Escuela su carácter lúdico, es decir, que se relacione el oficio constantemente con el juego del hacer. Se expresa tanto en los ágapes, habituales actos realizados dentro de la Escuela como modo de reunión en torno a la celebración, como en torneos y en el regalo que se le otorga a un otro dentro de la travesía.

Colectiva

La Escuela de Arquitectura y Diseño es colectiva como organización. Reúne a el cuerpo escuelero como organismo activo, trascendiendo de la experiencia universitaria y pasando a reunir tanto profesores como ex alumnos, que con un mismo sentido poético hacen oficio.

Esta colectividad permite plantearse las plataformas digitales como un todo formado por experiencias individuales y sensitivas.

Problemática

Antecedentes de la organización en lo digital

La importancia de un diseño unificador dentro de una organización

El proyecto en sí, plantea la necesidad de unificar el diseño, configurar la forma y contenidos del sitio de la escuela. Existe una necesidad imperante, de rediseñar, partiendo con la idea de que dicho sitio debe reinventarse, reestructurase acorde a los requerimientos de contenidos y usabilidad.

Se deben revisar y/o replantear el siguiente listado de parámetros que miden la eficiencia del sitio:

• General: se refiere a la revisión del cumplimiento desde los contenidos, estructuras, diseño, actualizaciones hasta los objetivos principales del sitio.
• Identidad e Información: verificar que el sitio exponga la identidad de la organización y que exista una coherencia en torno a ello a través de la información que presenta.
• Lenguaje y redacción: preocuparse de un lenguaje claro y definido según el tipo de usuario.
• Rotulado: se refiere a establecer un orden y correcto etiquetado de las secciones que componen el contenido del sitio. De forma que pueda ser entendida y permita ser encontrada la información allí expuesta.
• Estructura y navegación: se refiere a mantener un orden jerárquico, de hipervínculos y un control de la navegación por el sitio.
• Layout de la página: se refiere a la estructuración de la página en relación a jerarquías establecidas para mostrar diferentes objetos, la interfaz y longitud de la página en sus contenidos.
• Búsqueda: sobre la accesibilidad y obtención de resultados.
• Elementos multimedia: sobre el uso de imágenes o recursos audiovisuales o canales para presentar la información de tipo dinámico.
• Ayuda: mantener al usuario informado frente a dudas o información especifíca, ofrece ayuda contextual en tareas complejas (presencia de sección FAQs).
• Accesibilidad: preocuparse de la legibilidad y acceso a los contenidos.
• Control y retroalimentación: sobre la navegación del usuario dentro del sitio, pregunta y respuestas del sistema y pocas restricciones de uso dentro del sitio.

Fuente: Guía de evaluación heurística aplicable a un sitio web

Se trabaja entonces, basándose en el desarrollo de una experiencia gráfica o un entorno digital, que aplica herramientas base para la construcción de los distintos sitios que componen lo que es la organización, en nuestro caso la Escuela de Arquitectura y Diseño e[ad]. Dichas bases o esquemas fundamentales se refieren a establecer un modo y diseño en el organizar, presentar y concebir a la organización, tratando de observarla y plasmarla según su identidad, permitir una coherencia gráfica dentro del lenguaje visual, que cada sitio debiese evidenciar.

Análisis

Estadísticas: el sitio en Google Analytics

Google Analytics es un servicio de Google, que permite medir el estado de un sitio web, proporcionando información respecto a sobre cómo los visitantes utilizan el sitio, cómo han llegado a él y qué se puede hacer para que sigan visitándolo.

Analytics propone el uso de herramientas de análisis, que facilitan el acceso a datos de interés para quien esta a cargo del sitio. De manera que se obtienen informes donde es posible medir y entender cómo interactúan los usuarios dentro del sitio.

A partir de esta plataforma podemos observar en relación a las acciones dentro del sitio de la escuela lo siguiente:

• cuántas personas se encuentran en el sitio en un momento dado.
• ubicaciones geográficas y fuentes de tráfico desde donde se está visitando el sitio.
• las páginas y eventos con los que interactúan los usuarios.
• las conversiones de objetivo que se han producido.

Toda esta información, es presentada a través de informes, siendo dos para nuestro caso los que revelan mejores datos: Visualización de Flujo de Tráfico y Analítica de página el primero permite analizar las rutas del visitante en el sitio, en tanto que el segundo, ayuda a evaluar visualmente cómo interactúan los usuarios con las distintas páginas del sitio. Una forma de visualizar este contenido y datos es integrando diversos gráficos que facilitan el entendimiento de la información.

Analítica de página

Datos de tiempo, porcentuales acerca de las visitas al sitio

Visión general del sitio

Archivo:Información general - Google Analytics.png

Información general del sitio

Dentro de la visión general del sitio podemos encontrar datos de tipo demográfico, modalidad por donde surge la navegación, esto es, navegador utilizado, sistema operativo, tipo de dispositivo (pc o móvil), proveedor de internet (redes). Tal información puede sernos de gran ayuda a la hora de pensar en cómo esta siendo visualizado nuestro sitio; la ampliación del campo de dispositivos, requiere siempre pensar en una adaptación o más bien respuesta del sitio en ellos.

Si se revisan los gráficos, el sitio de la escuela tiene un mayor acceso a través de pc que por medios móviles. Esta baja en los dispositivos móviles puede deberse a la poca visibilidad de los contenidos y adaptación (responsive) del sitio para resoluciones menores como celulares. Las vías o tráfico principal de acceso a la página, en el momento de revisión, es a través de redes sociales (facebook), donde tal vez fue compartido algún link asociado al sitio.

Las principales páginas activas, por donde se mueven los usuarios, en este caso, varían en contenido, van desde artículos de noticias, consulta a ciertas secciones del menú, información académica o docente a datos más específicos de proyectos.

• Visión general de público - Google Analytics (2).png

  Datos demográficos de las visitas

• Visión general de público - Google Analytics (4).png

  Datos especifícos por ciudad

• Visión general de público - Google Analytics (5).png

  Datos por navegador utilizado

• Visión general de público - Google Analytics (6).png

  Datos por sistema operativo de la visita

Hay una mayor concentración de visitantes al sitio, del continente americano; siendo Chile, México y Argentina los principales usuarios en el último tiempo. La naturaleza de público a partir de distintas ubicaciones tiene una riqueza notable, por la apertura y conocimiento de la escuela a partir del sitio. Situación que permite la llegada de estudiantes de intercambio que provienen de distintas localidades del mundo. Gran parte de estos usuarios son de habla hispana, en menor grado visitantes norteamericanos; lo que hace pensar en la posibilidad de implantar mejores accesos a los contenidos dependiendo del usuario que lo mire. Encontrar contenidos en modo bilingüe, no debiese ser un problema o limitante para los usuarios.

• Visión general de público - Google Analytics (7).png

  Información del proveedor de internet

• Visión general de público - Google Analytics (9).png

  Vista de visitas a través de dispositivos móviles

• Visión general de público - Google Analytics (8).png

  Información del sistema operativo utilizado a través de móviles

• Visión general de público - Google Analytics (10).png

  Información resoluciones de pantalla

Contenido y eventos

Archivo:Analytics e-ad- Escuela de Arquitectura y Diseño Páginas .png

Páginas visitadas

Los usuarios recorren diferentes espacios del sitio, obviamente en primer lugar lo más frecuentado es la portada del sitio, pues es la puerta de entrada a los contenidos, le sigue información acerca de las carreras, la temática sobre qué es la observación, noticias,cuerpo docente e información en la sección postgrados.

Por un lado se pueden reconocer patrones de usuarios tipo, a través de sus búsquedas; se puede intuir que el sitio de la escuela, es visitado por personas internas a ella (alumnos, docentes), así como también alumnos novatos y posibles estudiantes que quieren realizar un intercambio.

• 

  Títulos páginas y visitantes activos

• Analytics e-ad- Escuela de Arquitectura y Diseño Desglose de contenido 20131101-20131130-01.png

  Desglose de contenidos visitados

• 

  Gráfico para mostrar eventos diarios en el sitio

• 

  Gráfico eventos semanales en sitio

• 

  Gráfico eventos mensuales

Un rebote se produce cuando un visitante abandona el sitio después de haber visto una sola página web, en unos pocos segundos. Muchos sistemas de estadística fijan el tiempo para que una visita se considere rebote en 30 segundos: un visitante se define como desinteresado si abandona la página antes de 30 segundos. Un bajo porcentaje de abandono indica una buena organización de los contenidos y un aspecto gráfico correcto, que invita al visitante a continuar la exploración del sitio web.

En el caso del sitio escuela, un usuario permanece un tiempo revisando una página, no mas de 2 minutos. Tiene un gran porcentaje de rebote promedio (cerca del 71,2%) y salidas del sitio (53,5%); lo que hace presumir que no halló lo que buscaba o llegó por error al sitio, entre otras variables.

Ubicaciones del público

Información en tiempo real de ubicaciones de visitantes

Las regiones que componen el mapa de visitantes del sitio, se dan mayormente en el espectro de habla hispana, países cercanos a Chile en su mayoría. El número de nuevos visitantes es mayor que los visitantes recurrentes, lo que aporta la idea de que el sitio es observado constantemente por nuevos usuarios. En ese sentido, el sitio gana espacio disponibilizando los contenidos a público nuevo.

• Analytics e-ad- Ubicación 730 (1)-01.png

  Desglose datos visitantes de Estados Unidos

• Analytics e-ad- Ubicación1 (3)-01.png

  Mapa con datos de ubicación y gráfica

• Analytics e-ad- Ubicación (2)-01.png

  Ubicaciones a nivel nacional

• Analytics e-ad- Visión general de público0-01.png

  Visión general de público visitante sitio

Fuentes de tráfico del sitio

Rutas seguidas por los usuarios dentro del sitio

Se refiere a el tráfico de los usuarios por el sitio, desde la ubicación del usuario (nodos), conexiones y sus interacciones en las páginas. Tal gráfica proporciona el porcentaje de abandono y estadía en las páginas, fijando la ruta que recorre el usuario y entrega la cantidad de visitantes en tales secciones.

• 

  Gráfico por estados de Norteamérica visitantes

• 

  Detalle estados norteamericanos

• Analytics e-ad- Escuela de Arquitectura y Diseño Tiempos de página de velocidad del sitio 2666140301-20140320-01.png

  Velocidad de carga de páginas visitadas

• Analytics e-ad- Visión general de velo0 (1)-01.png

  Visión general velocidad del sitio

• Analytics e-ad- Visión general de velocidad del sitio df (1)-01.png

  Detalle tiempos de carga por países.

Además es posible visualizar el estado de carga de la página, respecto a su velocidad dependiendo el país, región o ciudad donde se encuentre el navegante.

Arquitectura de información

Mapa de Navegación

Un mapa de navegación es la representación gráfica de la organización de la información de una estructura web. Expresa todas las relaciones de jerarquía y secuencia y permite 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.

Organización actual de contenidos

En conjunto, se decide analizar la estructura de contenidos actual del sitio de la escuela. A partir de esta observación se tienen discrepancias respecto a orden y nombres asignados a algunas secciones. Se tiene piensa a nivel de navegación y profundidad de la información. Se declaran los siguientes posibles cambios en el mapa:

• Cambio en el rotulado de Prensa a Normas gráficas.
• Traslado del tópico Admisión presente en sección Escuela a sección Carreras.
• Cambio de la página Biblioteca (sistema de bibliotecas pucv) presente en sección Escuela a sección Servicios.
• Replanteamiento acerca del contenido disponible en sección Catolicidad.
• Integración en una sola sección de Carreras y Postgrados
• Cambio en rotulado que nombra a carreras y postgrados.
• Diseño de menú de navegación paralelo al principal, con links de acceso rápido a contenidos relevantes para usuarios de tipo experto (cuerpo escuela)
• Modificar la forma y estructura de contenidos expuesta en sección Movilidad estudiantil. Tratar de diferenciar entre los que ingresan (extranjeros) y los que salen (alumnos e[ad]).
• Diseñar una plantilla tipo para mostrar los contenidos de la sección Travesías. Adaptar la modalidad de mapa al diseño que se defina en el sitio.
• Definir las jerarquías internas dentro de la navegación, para cada sección del sitio.

Mapa de Navegación actual

Propuesta de organización de contenidos

Los cambios efectuados respecto al mapa anterior, se componen de un ajuste de orden en ciertas secciones, traslados de objetos o páginas de una sección a otra, re-estructuración de los contenidos expuestos, entre otras cosas. Lo graficado a continuación tiene los cambios (marcado con color rojo) abarcados inicialmente en la propuesta.

• La barra de navegación rápida contendrá los accesos rápidos a: Calendario, Wiki Casiopea, Bolsa de Trabajo, Biblioteca y Archivo Histórico.
• Se ubica la sección Admisión dentro del menú principal. La información contenida allí es dividida acorde al usuario tipo: alumno pregrado y alumno postgrado.
• Se fusionan las secciones Carreras y Postgrados en una sola, que recibe ambos nombres. Interiormente los contenidos son presentados en un orden desde los planes de estudio de las carreras a los programas de magíster.
• Dentro de la sección Estudiantes es cuestionada la importancia y presencia de Cuerpo Coordinador por un tema de no existencia de tal grupo actualmente.
• En el home del sitio se decide colocar: Noticias, Agenda e Información secundaria que corresponde al aside con materias de publicaciones recientes en redes sociales, información de docencia y datos de interés.

Mapa de Navegación propuesta 1

Reunión y evaluación de propuesta 1

Una vez desarrollada la propuesta de contenidos del nuevo mapa, existe la necesidad de establecer cierta retroalimentación de estas decisiones, con personas entendidas en la materia, que dentro de la escuela y en el espacio digital sean entes de transmisión de la información generada dentro de la escuela. Por ello, se acuerda una reunión con Francesca Cambiaso Oesterle, periodista pucv y Oscar Andrade, encargado de difusión en la escuela.

Junto a ellos, es posible definir ciertos parámetros respecto a lo que se tiene actualmente y lo que se necesita en la navegación por el sitio.

Calendario o Agenda

Se requiere una actualización y mejoras en la visibilidad y contenidos presentes en la agenda o calendario. Lo que se ofrece actualmente, no separa o agrupa el contenido en datos por su tipología, que serian docente (inscripciones, matrículas, fechas, etc) y actividades (charlas, exposiciones, eventos culturales, etc); tal división solucionaría el problema de dar mayor espacio a la información dependiendo del carácter o categoría en que se dispongan. En el fondo, falta precisar una imagen mas despejada de la información que se entrega al alumno.

El implementar esta materia, potenciaría la organización y difusión online de información (actualmente disponible a través de afiches y anotaciones en pizarrones y algunas publicaciones en Google Calendar), creando un canal abierto y actualizado de comunicación, que amplia el rango de alumnos al tanto de lo que sucede en la escuela.

Jerarquías en contenidos laterales (aside)

La información presentada en el sitio, en los espacios laterales, provee de links de acceso directo a noticias, archivos, eventos, publicaciones, entre otras cosas. Dichos contenidos adicionales a lo que se muestra en el espacio central del home, se replican interiormente en las páginas, sin mayor jerarquía que algo dispuesto al azar o bien por temática de lo que se esta leyendo. La estructura debiese contener un orden y mantenerse dinámico en el sentido de que los contenidos sean constantemente actualizados u ordenados por su fecha, para orientar en cierto modo al lector/usuario que visita el sitio.

Canales de información

A través del sitio principal de la escuela, poder establecer puentes de comunicación entre el profesorado y alumnado. De manera que se construya una interacción más plena dentro del sitio, donde los contenidos tengan mayor recepción y/o conocimiento por todos. Que lo que se quiere comunicar no quede sólo en las redes sociales, como sucede comúnmente, sino que el sitio de las instancias de comunicar o inducir aquellas conexiones.

El calendario o agenda junto a la sección La observación de la semana propician esta manera de acceder a contenidos compartidos ya sea por el estudiante o docente.

Sección Movilidad estudiantil

Dentro de lo que es contenidos y presentación, la página interior, creada para dar cuenta de los requerimientos y modalidades de intercambio, tanto para quien pertenece a la escuela y desea efectuar estudios en el extranjero, como para quien viene del exterior y desea cursar parte del programa de estudios en la escuela; no tiene una diferenciación estructuralmente ni una correcta etiquetación para nombrar o destacar los datos. La reformulación de esta sección y sus datos, debe preocuparse de facilitar el acceso a los contenidos dirigidos a ambos usuarios (interno - externo).

Etiquetas para artículos

Una etiqueta o tag es una palabra clave asignada a un dato o información dentro de un sitio, guardada en un repositorio. Las etiquetas son en consecuencia un tipo de metadato, pues proporcionan información que describe el dato y que facilita su búsqueda.

Resulta necesario por un tema de orden y semántica dentro del sitio, fijar categorías de grupos de etiquetas, para asignar a las distintas publicaciones que se van desarrollando. De esta forma, la navegación y sistema de búsquedas al interior del sitio resulta más eficaz y claro.

División en los programas de estudio

La barra de navegación actual divide los programas de pregrado (carreras de arquitectura y diseño) y postgrado (magísters) en dos secciones. La idea es tratar de agruparlos bajo un rotulado que los aúne; por el tipo de información desplegada que ambos contemplan. Se propone pasar de Carreras y Postgrado a Programas de estudio por ser un nombre que abarca las dos temáticas.

Página Travesías

El sitio de travesías funciona de manera alterna al sitio escuela. Se presenta como un mapa extendido (recurso de Google Maps) sobre el cual se van anclando, mediante iconografías, las distintas travesías realizadas y datos asociados a ellas. La idea es incorporar un layout tipo, para presentar los contenidos allí expuestos.

Modificaciones e iteración del mapa versión 2

En base al feedback obtenido dentro de la exposición de la propuesta de navegación, y además de las observaciones y consejos allí surgidos, se presenta una nueva arquitectura de los contenidos.

Propuesta de mapa propuesta 2

Aplicación de técnicas participativas: Card-Sorting

La técnica de card sorting se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio.

De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental.

Se debe buscar participantes para realizar el testeo. Hay que tener en cuenta que éstos deben tener características y perfiles acordes con el público objetivo del sitio.

Aplicación con usuarios tipo

Al realizar la prueba, se establecen 3 usuarios tipo:

• Estudiante : Persona realizando estudios de pregrado dentro de la Escuela. Se identifica a sí mismo como parte del cuerpo escuelero.

• Agente interno : Persona administrativa o académica que se involucra con el sitio a modo de colaborador

• Agente externo : Persona no perteneciente ni a la administración, cuerpo académico o escuelero, que accede al sitio de manera esporádica.

A partir de estos modelos, se reúnen 5 participantes para el card-sorting.

Registro y resultados

Los cinco participantes de la actividad se dividen en 3 estudiantes, 1 agente interno y 1 agente externo.

• 

  Participante del card-sorting

• 

  Participante del card-sorting

• 

  Participante del card-sorting

La instrucción dada a los participantes es situar en una primera instancia las categorías (de color rosado) en el orden que ellos estimen convenientes teniendo en cuenta que se modificará el sitio oficial de la Escuela de Arquitectura y Diseño; a partir de ésto, se les indica que deben colocar los diferentes elementos (de color amarillo) bajo las categorías, armando de esta forma el menú principal de la barra de navegación. Se les señala que pueden agregar o quitar categorías y elementos si lo consideran pertinente.

• 

  Resultado de card-sorting

• 

  Resultado de card-sorting

• 

  Resultado de card-sorting

• 

  Resultado de card-sorting

Conclusiones a partir de los resultados

La Categoría 'Admisión', tiende a quedarse sin elementos, pero los participantes explicitan que la consideran como necesaria dentro del sitio para dirigirse a los postulantes.

El elemento 'Servicios' tiende a causar confusión en el card-sorting, lo consideran como parte de la categoría 'Escuela'.

Un elemento que pareció quedarse fuera de las categorías fue 'Catolicidad', con el que los participantes tuvieron conflicto.

En dos casos se incorporó una categoría al menú del sitio. En el primer caso se añade 'Investigación', otorgándole mayor protagonismo al desarrollo de proyectos. En el segundo, se incorpora 'Cuerpo Docente', ya que el participante considera que el profesorado debería estar al mismo nivel de importancia que los estudiantes.

Modificaciones y propuesta versión 3

Las categorías principales mantienen sus rotulados pero cambia el orden. Amereida se decide situar al final del menú pensando en que agentes internos visitarían el sitio en búsqueda de información específica.

Se decide retirar 'Catolicidad' del menú, y en cambio, incluirla dentro de la descripción de 'Escuela' (portada).

Se simplifica la categoría 'Admisión', quitando las especificaciones para estudiantes de posgrado (las cuales pasan a formar parte de los magíster en sí).

Propuesta de mapa propuesta 3

Actualización

El sitio actual de la Escuela tiene más de 7 años por lo que deja en evidencia una desactualización en términos de cómo se construyen los sitios web hoy en día. El hecho de que esté en Wordpress le permite que se publiquen entradas periódicamente sin problemas y una cierta actualización en widgets pero no en estructura ni diseño. De todas maneras, no se trata de romper con la identidad visual del sitio, eso podría generar una lejanía con los usuarios actuales, donde normalmente el usuario no se acostumbra fácilmente a los cambios radicales. Para lograr actualizar el diseño y la construcción del sitio (arquitectura de información y estructura semántica), es necesario entender qué funciona y qué no, por lo general es suficiente con cambios menores, ejemplos notorios de esto pueden ser grandes portales usados por miles de usuarios como Google, Amazon o Yahoo. Al respecto, Jakob Nielsen señala que: Los usuarios odian el cambio, por lo que por lo general es mejor quedarse con un diseño familiar y evolucionar gradualmente. A la larga, sin embargo, el incrementalismo finalmente destruye la cohesión, pidiendo una nueva arquitectura de la interfaz de usuario.

Usabilidad

El sitio actual de la Escuela posee rótulos que están siendo coherentes con el contexto interno de la escuela, es decir con un vocablo interno, dejando una profunda confusión en usuarios ajenos o posibles futuros alumnos. Esto es una temática compleja puesto que tampoco se quiere dejar de lado las palabras esenciales y características de las expresión verbales de un estudiante de la Escuela y caer en sinónimos más frecuentes. No se trata de querer imponer una imagen de diferente pero por lo menos se quiere exponer que existe un modo de nombrar las cosas dentro del universo de la e[ad].

La interacción del sitio actual en algunos momentos es esteril y poco evidente, dejando enlaces, páginas o usabilidades ocultas a un usuario que está navegando el sitio recientemente. Un ejemplo de esto es el menú de navegación central, que además de ser un elemento dropdown (menú desplegable), es también un enlace directo. Esto podría ser coherente si se cumpliera para cada uno de los rótulos pero no es así puesto que en "Escuela" se redirige a "historia".

La falta de jerarquía visual en el sitio y sobre todo en la Home hace que no siempre se entienda la mecánica de publicación del sitio. Todo esto hace que el sitio pierda dinámica y que los usuarios vayan perdiendo interés paulatinamente.

Accesibilidad

Actualmente el sitio de la Escuela carece de un diseño responsive. Esto hace que acceder al sitio desde dispositivos portátiles como smartphones y tablets sea una experiencia poco agradable. Es por eso que se usa Pyxis framework, donde las columnas y bloques son reorganizados y mantienen una coherencia gráfica sin importar el soporte de donde se acceda y la experiencia de navegación sea óptima.

Objetivos

Estructura y referencias globales

Wordpress es una plataforma que permite administrar contenidos por diversos usuarios sin necesidad de tener conocimiento de código para cambiar los contenidos del sitio web. Esto permite que los contribuidores de contenido se centren solamente en el contenido y no en cómo los elementos gráficos se comportarán, puesto que la plataforma es un sistema que resuelvo eso mediante algoritmos y el diseño previamente definido.

Para lograr pensar en el sitio de manera abstracta y así identificar las partes necesarias para el flujo de contenidos, es necesario entender cuáles son los 2 grandes componentes de Wordpress:

Entradas

Las entradas o post, son las entradas, se enlistan de manera cronológica inversa, apareciendo siempre el más reciente primero. Son los que alimentan los RSS feed. Poseen datos del momento de publicación como geolocalización, fecha, autor, categorías, tags (etiquetas), etc.

[Enlace a Wordpress (inglés) http://en.support.wordpress.com/posts/]

Páginas

Las páginas son las secciones estáticas de un sitio web, sin categorías ni etiquetas. Las páginas pueden incluir post y por lo tanto usarse como una portadilla de post que coincidan bajo categoría o etiqueta.Por lo general las páginas de "sobre nosotros" y la "home/inicio" son páginas, variando entre contenido estático o dinámico (con post).

Propuestas y construcción

Arquitectura de información

Propuesta

Se ajusta la propuesta 3 en conjunto con Herbert para llegar a una coherencia mayor entre los contenidos y la disposición de las secciones.

PROPUESTA DE ARQUITECTURA

Propuesta de Arquitectura

Definición de contenidos

Se define y concretan los contenidos por cada sección del sitio según la arquitectura de información propuesta. Esto significa que se tiene que requerir contenido específico a profesores o periodistas de la escuela puesto que aquél contenido actualmente no existe o está en un estado débil.

Propuesta

Contenidos del sitio

Elementos permanentes

• Menú de navegación

Menú principal que proporciona la navegación por todo el sitio. Cada rótulo del menú es un enlace que despliega enlaces. Se toma la decisión de que aquellos rótulos no sean páginas a las que uno pueda acceder y que sirvan de portadilla, sino que sean conceptos que engloban su contenido y al cliquearlos se accede a cada uno de los contenidos.

• Footer

El footer habla de dónde está la Escuela de arquitectura y diseño, por dirección y por mapa, además de mostrar los sitios relacionados, redes sociales casi a modo de colofón existe otra franja que proporciona elementos que existen en el footer actual como licencias, RSS, etc.

• Comentarios

Estarán disponibles solamente en los post (Entradas, como eventos, noticias y publicaciones genéricas) *Aside (Elemente anexo) Una columna derecha que acompaña el contenido central ofreciendo una lectura continuada con otros enlaces relevantes en relación a lo que se está leyendo (Esto se organiza mediante las categorías y etiquetas correspondientes)

Home

Se exponen todas las áreas principales del menú de navegación, presentando en cada una de ellas información relevante o artículos destacados dentro de su categoría, las secciones abordadas en el home serían:

Se exponen las áreas más relevantes del contenido del sitio, mostrando actualidad de la escuela y contenidos del quehacer, los oficios e información relevante tanto para el alumno como para gente externa.

Sección destacada

• Carousel

Con fotografías que muestran noticias, travesías, una página estática y observación de la semana. Acá se debe escoger el contenido que se mostrará, por lo tanto debe haber una decisión y actualización por algún actor específico.

Sección de actualidad

• Información académica

Se mostrará acá un anuncio que estará vigente por un par de días, por lo que después de un tiempo es probable que se oculte hasta un nuevo anuncio.

• Eventos

Serán mostrados los eventos agendados más recientes, la cantidad de eventos que se previsualizarán dependerá del tamaño de la pantalla de donde se navegue pero la variación cambiaría entre 3 a 4 eventos, descartando el 4to al disponer de menor tamaño horizontal y así distribuir de manera más limpia las columnas.

• Noticias

Al igual que los eventos, las noticias se muestran partiendo desde la más reciente sin categorizar. En esta sección también aparece (En pantallas de mayor resolución), el twitter oficial de la e[ad].

Alumnos postulantes

• Escuela y enlaces

Sección dedicada especialmente a los posibles alumnos, esta sección deberá aparecer en períodos de postulación y luego no estar presente. Esto se fundamenta con los datos obtenidos de Google Analytics.

Noticias categorizadas

• Noticias por carrera

Se muestran las 3 noticias más recientes por cada una de las carreras de pregrado de la escuela.

Publicaciones

Las categorías que aparecen acá buscan mostrar contenidos del sitio y por lo tanto del quehacer de la Escuela, de los oficios, magíster, amereida, etc. Las categorías son:

1. Magíster de Arquitectura y diseño
2. Archivo histórico José Vial Armstrong
3. Taller de amereida
4. Bolsa de trabajo

Historia

1. Imágenes y carousel que muestren registros fotográficos
2. Reseña histórica de la fundación de la Escuela
3. Fundadores de la escuela
4. Visión / Misión escuela / Lineas estratégicas
5. Metodología enseñanza (El taller como columna central del estudio y la observación)

Amereida

1. Imágenes y carousel que muestren registros fotográficos
2. Origen de amereida
3. Enlaces a temáticas y textos relacionados

Campus

1. Imágenes y carousel que muestren registros fotográficos
2. Dependencias (ubicación, dirección) y cómo llegar
   1. Casa de estudio (matta 12)
   2. Ciudad Abierta, Ritoque
      1. Fundación e historia

Cuerpo Académico

1. Listado del cuerpo académico (No enlazar a la wiki)
   1. Profesores de talleres
   2. Profesores ayudantes
   3. Staff

Autoridades

1. Listado de autoridades
   1. Decanato
   2. Dirección
   3. Docencia

Portada de noticias

1. Carousel con las noticias más recientes
2. Noticias más recientes por categorías
   1. Arquitectura
   2. Diseño Gráfico
   3. Diseño Industrial
   4. Fondos y concursos
   5. Estudiantes
   6. Magíster de Arquitectura y diseño
   7. Seminarios
   8. Extensión

Portada de eventos

1. Calendario por mes donde muestran los eventos publicados en ese mes
2. Columna central muestra los eventos de agendados ese mes y mostrando a la vez la fecha del evento.

Portada de Información académica

1. Entradas bajo la categoría Información académica

Prensa

1. Página con descripción normas gráficas escuela ( web e impresos)
2. Presentación de elementos gráficos que componen la identidad gráfica, esto es:
   1. Logo
   2. Tipografía
   3. Colores base
   4. Definición de tamaños tipográficos para cada formato
   5. Enlaces de descarga de logo o imagen gráfica en sus distintos formatos.

Wiki Casiopea

1. Introducción de la wiki, donde se cuenta la finalidad, uso y enlace directo al sitio.

Para las 3 carreras de pregrado: Arquitectura, Diseño Gráfico y Diseño Industrial

1. Carousel con imágenes indexadas por categorías pertenecientes a la carrera
2. Estudiar en la e[ad]
3. Competencias fundamentales / disciplinares / profesionales / genéricas de formación
4. Objetivos educacionales
5. Concepción Perfil del egresado
6. Malla curricular o programa de estudios
7. Docentes o académicos vinculados a la carrera: ficha o listado con profesores y modulos impartidos. Puede dirigir a la wiki personal del profesor.

Magíster de Arquitectura y diseño

1. Introducción a la mención de Magíster
2. Requisitos de ingreso
3. Postulaciones
4. Perfil de Ingreso
5. Calendario
   1. Semestres
   2. Duración
   3. Modalidad
   4. Aranceles
   5. Documentación necesaria
   6. Información de contacto
   7. Formulario
6. Cuerpo docente
7. Módulos de estudio / Programa
8. Metodología estudio
   1. Descripción
   2. Competencias
   3. Objetivos
   4. Bibliografía fundamental
9. Proyectos de tesis
10. Embarcación Amereida
11. Travesía Anual magíster

Pregrado

1. ¿Por qué estudiar en la ead? / Vida Universitaria
2. Vías de ingreso
   1. Regular (PSU)
   2. Complementario
   3. Especial de admisión
3. Aranceles
4. Becas / Financiamiento
5. Acreditación
6. Postulaciones (ponderaciones por carrera)
7. Vacantes y claves
8. Títulos y grados

Postgrado

1. Presentación Magíster Arquitetura y Diseño
2. Menciones (Naútico y Marítimo / Ciudad y territorio)
3. Postulaciones y calendario
4. Documentación a entregar
5. Aranceles / becas / vías de financiamiento

Intercambio estudiantil

1. Introducción a programas disponibles (ARQ-DIS)
2. Cursos y actividades complementarias (Taller de Amereida - Taller de Travesía)
3. Postulaciones y calendario
4. Documentación a entregar
5. Aranceles / becas / vías de financiamiento

Becas / ayudas estudiantiles

1. Detalle de becas internas y externas (escuela y PUCV)
2. Calendario postulaciones
3. Preguntas frecuentes

Cuerpo Coordinador

1. Información de interés
   1. Federación estudiantes PUCV
   2. DAE
   3. Beneficios
   4. Convenios con empresas o instituciones
   5. Fondos concursables (concursos internos - externos)

Asuntos Estudiantiles

1. Formulario de consultas o contacto
2. Enlaces a sitios interés alumno (Bibliotecas universidad, mail ucv,etc)
3. Actividades / Talleres extraprogramáticos
4. Procesos administrativos / documentación de interés (reglamentos carrera, sobre el título profesional, solicitudes, terceras oportunidades)

Estudia en el extranjero

1. Introducción / Descripción
2. Convenios bilaterales escuela y PUCV (universidades extranjeras asociadas)
3. Modalidad de postulación
4. Requisitos
5. Documentación a presentar
6. Calendario
7. Becas y financiamiento
8. Información de contacto (encargado programa)

Servicios

1. Página con listado de servicios escuela a modo de ficha
2. Servicios entregados: Secretaria docencia, Laboratorio, Biblioteca, Archivo, #Librería y fotocopia, Taller de investigaciones gráficas, MadLab.
3. Convenios bilaterales escuela y PUCV (universidades extranjeras asociadas)
4. Modalidad de postulación

Bolsa de trabajo

1. Introducción / Descripción
2. Ofertas laborales
3. Publicar un trabajo
4. Acerca de las prácticas profesionales
5. Concursos internos y externos

Ex-alumnos

1. Introducción / Descripción
2. Listado alumnos (wiki)
3. Redes y sitios
4. Enlace a programas de postgrado (formación continua)

Archivo Histórico

1. Introducción y enlace al sub-sitio
2. Post recientes del archivo histórico

Ediciones

1. Introducción / Sobre ediciones
2. Colecciones Biblioteca Constel
3. Publicaciones digitales

Taller de amereida

1. Presentación / Descripción
2. Modalidad del curso
3. Publicaciones (registro de clases, podcast, etc)

Ciudad abierta

1. Introducción al ámbito poético de Ciudad Abierta

Travesías

1. Introducción y origen poético
2. Enlace al sitio de travesías

Biblioteca Constell

1. Presentación
2. Colecciones o categorías (textos)
3. Enlace a wiki casiopea B. Constel
4. Enlaces de descarga publicaciones

Wireframes

Concepto gráfico en la página

Se busca definir una composición de página que permita mostrar una simultaneidad de contenidos, una densidad ordenada que sea cómoda de leer y al mismo tiempo evidencie un espesor de contenido e invite a seguir leyendo. Se piensa en el trabajo gráfico que realizan los periódicos con las tipografías y los blancos, pero también se piensa en el modo propio de anotación en las bitácoras. Es por esta última razón que se decide buscar patrones gráficos, esquemas visuales, estructuras de composición en algunas bitácoras de Alberto Cruz, Fabio Cruz y Godofredo Iommi que están en el Archivo histórico.

De la herencia gráfica a la invención

El análisis se enfoca en estudiar tanto cuadernos, registros de escritura sobre pizarrones como observaciones y croquis.

Inicialmente se pueden dividir estos hallazgos por:

Orientación de la escritura

Existe una publicación pequeña de una balada francesa, a modo librillo, disponible en el archivo histórico, traducida por Godofredo Iommi y Mauricio Schiavetti Rosas llamada La belle dame sans merci del poeta John Keats. Dicha publicación ha sido traducida por ambos, y refleja en cuanto a composición un poco lo que es el texto de Amereida. La presencia de grandes espaciados, interlineados y margenes superiores extensos y dispares entre si, genera una diagramación y ritmo de lectura dispar, donde la estructura se construye a partir de estas sangrías y saltos entre una frase y otra.

Se descomponen y comparan las siguientes páginas que contiene esta pequeña edición; surge la idea de que el layout predominante en este sentido, es uno de tipo fijo al centro de la página, desde donde el texto se va amplificando hacia los margenes laterales y separando por bloques interiormente.

Otras páginas responden a este espacio de trabajo centrado, donde las piezas interiores se descomponen en menor medida, guardando espacios menores de sangría y tratando de alinear en un sentido.

Páginas extraídas librillo La belle dame sans Merci de Godofredo Iommi y Mauricio Schiavetti Rosas

La mayoría de los registros que se observan fueron trabajados en máquina de escribir, a pesar de esto, se intenta siempre fijar un dibujo con el texto a través de distintas entradas o irrupciones,cortando el alineamiento o alejándose de la composición inicial.

Otro texto antiguo elaborado también en máquina de escribir, es el documento de Partido General de los Terrenos de Ciudad Abierta. La estructura planteada a lo largo de páginas apaisadas responde a 2 columnas, donde de igual manera se hace un intento de dar sangría a elementos como títulos o subtítulos. Los márgenes internos y externos hallan correspondencia, son medidos. Al presentarse la variable columna se crea un entorno más de bloque.

Página extraída de copia de documento en archivo Ciudad Abierta. Ágora 7.1.1971

Márgenes y blancos en espacio de trabajo

Extracto páginas de cuaderno correspondiente a Contenedor materia de estudio: Casa de los Nombres, Galería La Puntilla. Fabio Cruz. Noviembre 1992

Los cuadernos de Fabio Cruz resultan interesantes de analizar, puesto tienen una organización basada en grupos o bloques de texto dentro de márgenes laterales menores. Estos bloques o anotaciones agrupadas se alinean en su mayoría hacia un sentido de la página, dando un gran margen o aire antes de comenzar cada cuerpo de texto. La escritura se da con forma escalonada, sangrías y textos enmarcados.

Extracto páginas de cuaderno correspondiente a Contenedor materia de estudio: Casa de los Nombres, Galería La Puntilla. Fabio Cruz. Noviembre 1992

Ocupación o extensión de página

Se toma en este punto como base para analizar su estructura compositiva, la Bitácora de Primera Travesía Amereida. Año 1964. Alberto Cruz que contiene notas, observaciones y dibujos realizados durante el viaje a la Pampa Argentina, registrando esto en cuadernos elaborados a mano.

En sus páginas se puede verificar cierta tendencia a organizar la escritura en casi toda la extensión del cuaderno, llegando a traspasar de una página a otra. La escritura es orientada acorde a los espacios libres que van quedando; los croquis y esquemas quedan reducidos entre los textos y un intento de columnas o hileras que se van formando.Hay planas completas de escritura que no dejan márgenes, salvo por las columnas y su división interior.

Ocurre en algunos casos, formaciones de bloques de texto en distinto sentido, separados únicamente por un trazo o linea.

La página en muy pocos casos presenta una apertura, dando énfasis a los pequeños esquemas y descripciones. Además hay un interés por marcar, enumerar, etiquetar o destacar ciertos apuntes dentro de la página.

Páginas Bitácora de Primera Travesía Amereida. Año 1964. Alberto Cruz

• 
• 
• 
• 
• 
• 
• 
• 
• 

Páginas cuaderno Fabio Cruz Prieto, perteneciente a Contenedor materia de estudio: Casa de los Nombres.Noviembre 1992

• 
• 

Propuestas de Layout

Tomando como base lo analizado, se determina que es necesario destacar y afinar para el diseño de layout tipo, en cada uno de los parámetros lo siguiente:

• Orientación del texto: el espacio a ocupar y la orientación de un texto, dependerá siempre de su extensión y carácter. Conforme a lo estudiado en este aspecto, se puede declarar un diseño que puede ser del tipo ancho fijo, compuesto ya sea por una columna central o bien dos, de manera que el contenido principal es albergado en un centro, pudiendo usar una columna de mayor anchor que la otra, para jerarquizar contenidos; dando espacio a los elementos laterales o sidebars.

Propuesta 1: dos columnas

• Márgenes y blancos en la página:un layout que reserva espacios y es más limpio visualmente, puede extraerse del modo de redacción y composición encontrada en los cuadernos de Fabio Cruz. La identación (sangría) propia en ellos, es tomada para destacar un elemento de otro (como notas laterales, descripciones, artículos, comienzo de un párrafo, etc). Los blancos se abarcan en el contenedor general de la página, a partir del cual hay un trabajo con a lo más dos columnas centrales, que guardan un menor margen interior entre si. Dicha columna central puede contener imágenes en detalle, el contenido principal, etc.

Propuesta 2: contenedor lateral con columnas menores interiores

• Ocupación o extensión del espacio de trabajo: al determinar un layout con un contenedor central que despliega interiormente elementos a modo de bloque, se conserva esta idea extraída de la bitácora de travesía de Alberto Cruz, donde la página se estructura de tal manera, que se conserva un mayor espacio para márgenes exteriores, dejando la mitad de esta medida para los márgenes interiores, donde se trabaja mediante columnas de texto o imágenes.

Propuesta 3: 4 columnas

Dejar ciertos bordes de la página libres crea algo más depurado y no atestado de elementos. Se prueba con un sólo elemento lateral, al costado izquierdo de la pantalla, que no ocupe toda la altura de la página (puede ser un menú, información breve o recursos linkeables) de modo que se producen blancos en la parte inferior de la navegación.

Páginas

Home

Wireframe Home

El inicio (home) del sitio busca mostrar una simultaneidad, una variable notable de contenidos que le permitan a cualquier usuario entender a grandes rasgos qué es lo que se hace y qué está ocuriendo en la Escuela. Existe una analogía a cómo un periódico compone la página, con diversas columnas y secciones que se dividen por elementos lineales que permiten ordenar el contenido denso.

La primera sección del sitio destaca contenidos publicados en forma de ventana a hitos ocurridos. Luego la sección de actualidad busca actualizar al usuario y contarle de información académica, eventos próximos, noticias ocurridas. Luego la sección dedicada hacia los posibles postulantes, esta sección se fundamenta en los resultados de Google analytics, donde en período de postulación se frecuentan páginas del sitio que hablen sobre cómo es la escuela, por lo tanto esta sección busca facilitarle al usuario y exponerle de manera ordenada los enlaces de interés. Finalmente la última sección busca mostrar publicaciones más recientes, de diversas categorías.

Portada de Noticias

Wireframe portada de eoticias

La primera parte central de la página es un carousel de imágenes y sus correspondientes textos. El contenido que aparece en el carousel son un par de noticias recientes.

La segunda parte de la página son tres columnas de cajas de noticias, que se ordenan por sus categorías correspondientes. La lectura de las categorías es en forma vertical donde se muestran 3 noticias por categoría y luego pasa a una siguiente categoría. Si el usuario desea ver sólo noticias de una categoría, basta con hacer click en el rótulo de la categoría y accede a una misma diagramación pero con contenido categorizado.

Desde estos wireframes en adelante aparece el aside (contenido anexo) hacia el lado derecho de la pantalla, con enlaces a más publicaciones relacionadas, el twitter oficial de la escuela y botones que permiten compartir la página en las redes sociales del usuario.

Portada de eventos

Wireframe portada de eventos

Portada de eventos posee un calendario simple donde se muestra el mes actual junto con los días en que se agenda un evento. El calendario se inserta en una columna de menor tamaño a la izquierda dedicada a widgets y elementos auxiliares a la página. Estos elementos por lo general son de tipo fixed, que acompañan al usuario al empezar a hacer scroll por la página.

En cuanto a la columna central, se muestran todos los eventos agendados bajo el mes actual del calendario, con la fecha de duración y del evento mismo. Además de la fecha aparece la fecha de publicación y un extracto de lo publicado en el evento.

Portada de información académica

Wireframe portada de información académica

Las publicaciones de información académica corresponden a mensajes puntuales hacia los alumnos, ya sean trámites administrativos o suspensión de clases, etc. Es por eso que generalmente no incluyen mayor datos como fotografías, localización ni fechas de duración. Por esa razón se adopta una diagramación más densa y múltiple. Se van mostrando cajas de a 12 y un botón permite cargar más, puesto que no existe una separación por variable temporal como por ejemplo, meses.

Reseña introductora

Wireframe reseña introductora

La propuesta de esta página es introducir a alguien ajeno al contexto de la Escuela, mostrando una gran fraja de imágenes y luego una columna centrada sin más elementos como aside o widgets, donde se permita una lectura cómoda y limpia. En el contenido central varía según la página, en historia se muestran los profesores fundadores, mientras que en campus se muestran mapas y geopuntos, en amereida se introduce al ámbito poético, etc. Es una grilla flexible dentro de lo minimalista en su composición.

Enunciado

Wireframe enunciado

Esta es la página que más se utilizará en el sitio puesto que es una página que permite mostrar una gran cantidad de contenido, imágenes, tablas, etc. El aside (columna derecha anexa) se ajusta al contenido, como en el caso de las carreras aparece una ficha que muestra los datos objetivos y duros de la carrera.

La columna central puede contener algún carousel o alguna imagen o simplemente ser texto plano. Esto dependerá totalmente del contenido.

En el costado izquierdo se utiliza el mismo comportamiento de portada de eventos pero acá se utiliza a modo de anclas de navegación, permitiendo saltar entre contenidos que contiene el enunciado, dando una noción de lo que uno va a leer a continuación y además para ayudar a identificar hitos en el contenido.

Enunciado + post

Wireframe enunciado + publicación

Esta página es una variable o una extensión si acaso se puede entender mejor, de la página "Enunciado", puesto que la estructura es la misma a diferencia que al final incluye publicaciones insertas (indexadas por su categoría) y funciona casi como a modo de portada, pero sin presentar a las publicaciones como su eje central.

Listado cuerpo académico

Wireframe listado cuerpo docente

En esta propuesta existe una diferencia notable en relación al sitio actual. En el sitio actual de la e[ad], bajo el rótulo "Cuerpo docente", se incrustan datos desde la Wiki Casiopea, es lógico y quizá es simple pero también es limitante por el layout de la Wiki, haciendo complejo insertar imágenes o mostrar a los docentes más a modo de presentación.

Sin embargo no se propone nada muy ajeno al resto del sitio, sino que son bloques que presentan el nombre, oficio, una imagen y una pequeña reseña del profesor, añadiendo un grado de trasfondo y donde la comunidad pueda adquirir mayor información acerca de los docentes. Acá también están los profesores docentes y staff, todos con la misma jerarquía y se ordenan de manera alfabética dentro de su categoría.

Resultado de búsqueda

Wireframe listado cuerpo docente

No existen alementos anexos en esta página, solamente aparecen los resultados coincidentes tras la búsqueda en la barra Meta (sistema de búsqueda avanzado desarrollado para la Escuela).

Puesto que no se está directamente trabajando con el motor de búsqueda, se decide no integrar más elementos como filtros o búsquedas avanzadas ya que eso dependerá de cómo funcione la mecánica de búsqueda en el sitio. De todas maneras es algo que puede iterar y se le puede añadir la columna de widgets a la izquierda de la página y no rompería el diseño ni la disposición de bloques.

Entradas

Publicación

Wireframe Publicación genérica

En el encabezado aparece el título de la publicación junto con otros datos como fecha de la publicación, categorías y etiquetas.

La columna principal de la publicación es versatil en el sentido de que una publicación puede incluir fotos o no hacerlo, así como imágenes insertas en la columna de texto, etc.

Al final de la entrada se vuelven a repetir las etiquetas, permitiendo al usuario seguir navegando por publicaciones que contengan ese concepto.

Toda publicación incluye la sección de comentarios, donde se muestra la foto del usuario (una por defecto si acaso no tiene), nombre de usuario (registro en personas.ead) y un mail de contacto. Al costado derecho está el bloque que permite dejar un comentario en la publicación.

Evento

Wireframe Publicación genérica

Muy similar al post de publicación, sin embargo acá la fecha tiene una jerarquía mucho mayor. Es necesario que se sepa la duración del evento además de saber cuándo se publicó el evento en el sitio.

La variable (que en publicaciones también se puede añadir si es que lo amerita), es el mapa de geolocalización, pudiendo facilitarle al eventual asistente al evento cómo llegar. Esto es muy utilizado en otros sitios y es un widget muy util.

Finalmente también cuenta con la posibilidad de comentar y ver comentarios realizados en el evento.

Secciones y flujo de alimentación

Una vez construida la propuesta de arquitectura de información y en conjunto con tener en mente que wordpress va a sostener el sitio, es necesario pensar en cómo las páginas y post, los wireframes van a corresponder a la estructura del sitio, de manera que todo quede conectado y coherente. A continuación se muestra una correspondencia entre las páginas y cómo fluyen en el sitio.

Las variables de diagramación (wireframes) son 11 variables. Ellas se dividen en 2 grupos:

Páginas

• Portadas

1. Home
2. Portada Noticias
3. Portada Eventos
4. Portada Información académica

• Páginas

1. Reseña introductora
2. Enunciado
3. Enunciado + publicación
4. Listado
5. Resultado de búsqueda

Entradas

• Específica

1. Evento

• Genérica

1. Publicación

secciones y plantillas

Alimentación de Home y portadas

Todas las publicaciones tienen que cumplir con datos para ser enlazados e indexados correctamente. Al introducir categorías y etiquetas, permite que cada publicación ocupe su lugar dentro de alguna portada de contenido y así mismo aparezca en la Home al ser una publicación reciente. Esto también asegura que el usuario pueda acceder a la lectura de la publicación según donde se encuentre categorizada, por ejemplo:

1. Evento X aparece en la home, el usuario puede escoger ir a la portada de eventos o acceder directamente a la publicación.

Widgetización y administrabilidad

Para lograr una coherencia de estructura y diagramación en todo el sitio es necesario identificar columnas que serán destinadas específicamente para widgets y elementos adicionales al contenido central (sin ocupar la columna del elemento anexo, el aside)

Código

Esta sección está limitada a describir el método con respecto al orden y el parámetro, el comportamiento responsivo y la meta-data presentes en la codificación del sito e[ad]. Como primera etapa y propuesta en el diseño de códigos se dan a conocer los primeros elementos sin la iteración requerida para estandarizar y complementar los documentos de Html y Css.

Orden y parámetro de los elementos

Durante esta etapa del proceso de construcción en base a la de investigación, los parámetros de medidas y clases referentes al código seguirán ajustándose y re-estructurándose con el objetivo de enaltecer la legibilidad y la lógica coherente propia de un sitio web estandarizado. Lo observado en estos casos introduce dicho comportamiento con los elementos gráficos del sito. El parámetro ha de ser lo más genérico y transversal con respecto a los componentes; desde este punto vista el trabajo de la grilla -respondiendo a los estándares de Pyxis- permite ser una referencia, generando un primer parámetro de clase y propio a la nomenclatura de Bootrstap para señalar los anchos de pantalla del navegador. Siguiendo esta lógica se requiere conservar lo mejor posible el carácter unificado, y re-utilizar esta nomencltura en la mayor cantidad de componentes.

Página

Es necesario establecer un ancho para el contenido genérico de las páginas en el sitio. Por esta razón se establecen diferentes tipos de contenedores. Los contenedores pueden estar al ancho máximo de la pantalla (ej: Contenedor de Carousel) para dibujar una franja completa en cualquier pantalla del navegador, o pueden estar a cierto porcentaje de la pantalla (ej: 90%) para generar blancos diseñados a los costados del contenido. En cierto contexto el ancho fijo es también una variable de estos parámetros, donde se escribe una medida decisiva en pixeles (ej: para el ancho de pantalla más holgado (lg) la medida es de 1366px, estandarizada como el ancho de navegador más común a nivel global).

parámetro de anchos

1. Ancho: 1366px
2. Ancho: 1024px
3. Ancho: 100%
4. Ancho: 90%

Bloques

Para lograr construir la maqueta de manera coherente y fluida, se establecen parámetros de medida (altos) de acuerdo a la nomenclatura presente en la grilla (ej: alto-(ancho de pantalla)) para generar cuatro bloques tipo donde se incrusta el contenido (tanto elementos de bloque (ej: imágenes) como elementos de línea (ej: párrafos) y elementos de interacción (ej: enlaces)). Además cada bloque toma en cuenta los márgenes y rellenos (Gutter) de separación entre cada uno de ellos, gracias al carácter porcentual establecido en la grilla.

parámetro: clases de altos

Los tamaños de bloque son los siguientes:

1. alto-xs
2. alto-sm
3. alto-md
4. alto-lg

Interacción

La interacción en el sitio abarca desde botones hasta estructuras de formulario para diferentes acciones del usuario que recurren a la meta-data codificada en el sistema para generar una respuesta determinada. En esta etapa del proceso de código, los parámetros han sido establecidos para tamaños de botones y formularios. Las medidas corresponde, como en los casos anteriores, a la nomenclatura que establece la grilla para dilucidar sus anchos de pantalla.

parámetros: clases de tamaños

• Botones:

1. btn-xs
2. btn-sm
3. btn-md
4. btn-lg

• Formularios:

1. formulario-xs
2. formulario-sm
3. formulario-md
4. formulario-lg

Comportamiento Responsive

El todo y las partes

Para diseñar el carácter responsivo del sitio es necesario complementar los diferentes anchos de pantalla con el re-diseño de sus elementos en cada una de ellas. Para los elementos lineales (ej: párrafos) la grilla responde de manera porcentual a su distribución de caracteres y, sin embargo, la tipografía debe ajustarse para una legibilidad fiel a los diferentes dispositivos de navegación.

En el caso de los bloques ocurre el mismo comportamiento porcentual, pero los elementos tales como márgenes y rellenos varían en cada ancho de pantalla. Para la visualización de imágenes es necesario ajustar los porcentajes con respecto a su contenedor que, como es obvio, también varía con respecto al ancho porcentual del navegador.

Es en base a este método que ciertos elementos son parametrizados y otros entendidos por el comportamiento de la grilla que, en líneas generales, es el fundamento para un diseño responsivo eficiente.

Pantallas

1. Comportamiento responsivo para cada página diseñada

Elementos

1. Comportamiento responsivo en elementos parametrizados

Meta-data

En relación a los estándares de la web, los microformatos y la microdata es una parte esencial. Por la misma razón, se cree que el sitio no puede estar ajeno a una semántica estándar en la web.

¿Pero qué es la microdata? Básicamente es un vocabulario específico que describe elementos en el HTML, asignándole valores y atributos de indexación específicos. De esta manera, un software puede leer el contenido de una manera mucho más simple y así se interactua tanto con el usuario como con los sistemas.

Para mayor lectura:

Schema.org

Whatwg.org

Bajo el proceso de la construcción de las maquetas en Gamma, se logró aplicar en cierta manera en las publicaciones, sin embargo, se pretende bajo la iteración, implementar esto a una mayor escala, donde todo el sitio pueda ser indexado de una manera óptima según su propio contenido, permitiendo que el sitio quede mejor posicionado y accesible para navegadores y web crawlers.

Wordpress

Wordpress funciona con un lenguaje llamado php y el código de Gamma está escrito en Html y Less, en conjunto con Jekyll que es de lenguaje markdown que ensambla trozos de código y así arma una página que puede estar compuesta de diversas partes que se pueden repetir, como el header, footer, aside, etc.

En ese sentido, Jekyll es similar a php, por lo que se asemeja la forma de operar pero de todas maneras hay que traducirlo.

De diseño a sistema

El diseño front (maquetas navegables) deben ser capaces de mostrar la mayor cantidad de comportamiento posible, como para poder traducirlo a un tema de wordpress y así hacer funcionar el sistema con el diseño establecido en la etapa de maqueta.

El front-design es el encargado de tratar las imágenes, los estilos, la experiencia del usuario, la estructrua html, la interacción del usuario y el diseño gráfico general del sitio / aplicación pero además dialoga con términos más cercanos al servidor, como github, jQuery, node.js, GIT, etc. Esta es la transición entre el diseño a un sistema funcional.

Traducción de .html + .less a .php

Las maquetas están en github [1], por lo que todo el código está siendo compartido y se puedo acceder a él de fácil manera. El proceso queda a cargo de Rodrigo Moya, quien ya ha participado numerosas veces en cuanto a sistemas digitales de la Escuela. El tema quedará prácticamente igual a lo establecido en las maquetas, luego habrá que iterar, poner a prueba el diseño y luego mejorarlo para asegurar un feedback real de los usuarios.