Francisco Vera: Identidad Digital

De Casiopea



Título
Palabras ClaveDiseño Gráfico, Identidad
Período2010-2010
CarrerasDiseñ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)Francisco Vera
ProfesorHerbert Spencer


Encargo

El encargo para el Taller de Construcción del segundo trimestre del actual año, consiste en la construcción o mejora de un espacio web del servidor que posee la facultad, de tal manera que el proyecto desglosa una investigación y un desarrollo que finiquita con la construcción de la propuesta aquí presentada.

En esta instancia, la problemática radica en la identidad visual generada por el sitio web de la Facultad (e[ad ) y cómo ésta es percibida por los lectores con relación directa e indirecta con el oficio; se percibe mediante conversaciones con alumnos y el profesor a cargo del Taller, que la visual del sitio no corresponde a la actividad y el ejercicio mismo de la Escuela, siendo inconsecuente el contenido con la forma; esta propuesta, se desarrollará a través de un estudio gráfico y social, enfocado en el alumnado y docencia, que finiquita con una propuesta final que, en este espacio, expone el desarrollo y las correcciones realizadas, pretendiendo elaborar el registro de construcción y una lógica visual poseedora de una serie de reglamentos sobre la publicación de contenidos en el sitio.

Sobre la Identidad

La construcción de espacios interactivos en el universo web, no solo requiere de una efectividad comunicativa y la maleabilidad intuitiva de quién hace uso de ella, sino que además, debe generar una grafía visual capaz de identificar, inspirar y motivar a que el uso de estos espacios sea aún mayor y grato. Sobre esta misma base, y sobre la de una sociedad sobrecargada de imágenes, donde la visualización, los esquemas y todo el lenguaje visual juega un papel importante en la comunicación, no debemos ser indiferentes a como la Imagen de la Identidad es percibida por las personas.

En este estudio, se pone en cuestión sobre la Identidad plasmada en el sitio de nuestra escuela, donde ¿Nos sentimos identificados? ¿Nos motiva interactuar? ¿Es atractivo?, son algunas de las muchas interrogantes que desglosan el concepto de Identidad Digital, apuntando directamente a como se presenta la Imagen ante el mundo, y el desglose de sus variables que mutan la forma de éste concepto.


La Imagen

"La ambigüedad de la imagen no es distinta a la de la realidad, tal como la aprehendemos en el momento de la percepción: inmediata, contradictoria, plural y, no obstante, dueña de un recóndito sentido. Por obra de la imagen se produce la instantánea reconciliación entre el nombre y el objeto, entre la representación y la realidad. Por tanto, el acuerdo entre el sujeto y el objeto se da con cierta plenitud."


Octavio Paz, La Imagen

La Identidad como un proceso constante que se define reiteradas veces, se nos presenta a modo de Imagen -visualmente en este caso- que marcada en el presente, es antecedida por una Tradición, construída por la comunidad y que genera una estampa distintiva; así mismo, la precede una Innovación, como una búsqueda infinita que se pregunta nuevamente sobre la Identidad y que se expresa de una manera distinta, bajo el contexto en que la comunidad se sitúa.

Dentro de la Identidad, y el concepto de Imagen, se pueden distinguir los siguientes conceptos:

(Temporales: Tradición, Innovación)

Dentro de esta Temporalidad, se distingue la variable del Lenguaje que atraviesa esta condición y que se manifiesta en toda situación en dos aspectos que componen a la comunidad.

(Lenguaje: Psicológico, Plástico)

Y en menor instancia, el Descriptivo que enumera los conceptos existentes entre el cruce de Temporalidad y Lenguaje y que se pueden englobar en cuatro principios:

(Descriptivo: Léxico (Modo Verbal), Estilo (Modo Visual), Atracción, Inspiración)

El vínculo existente entre cada agrupación y concepto, se puede entender de la siguiente manera:


Mapa Conceptual de la Identidad Digital Modelo de Identidad

Proceso

Para determinar con exactitud sobre la Imagen que se tiene sobre el sitio, inicialmente se registrará la opinion de los alumnos y docentes en una encuesta que enfoque sus preguntas en como perciben la Identidad de nuestra escuela anterior a una espacio digital, no queriendo anteponer la respuesta a un solo medio de comunicación, sino las bases que generan esta grafía que pretende ser incluída en el sitio, buscando reconocer los elementos que nos caracterizan, y si estos, corresponden a los conceptos del mapa sobre la Identidad; de esta forma, los resultados serán cruzados y serán parte del argumento para la propuesta. En segunda instancia, la navegación de los contenidos será re planteada de acuerdo a la intención que pretende el sitio y sobre un criterio de navegación que reduce la agrupación de contenidos.

Posterior a la construcción del mapa de sitio, se distribuirán el espacio web de la propuesta, jerarquizando y discriminando de acuerdo a las inquietudes e intenciones que posee el espacio web; la propuesta visual que se expondrán acá, serán evaluadas y corregidas por el tutor del Taller y por una Heurística en los alumnos, que finalmente, darán forma a la nueva propuesta de sitio para la Facultad.

Investigación Empírica

¿Qué medir?

Se centrará en la Identidad dentro de su Área Plástica (¿Nos identifica? ¿Te atrae?) ¿Cómo debería presentarse el contenido? de una manera más interactiva, dividida en ¿Cómo percibimos la Identidad del sitio? y ¿Cómo debería ser la identidad del sitio?, encuestando al alumnado y la docencia de la Facultad.

Los Resultados reflejan una gran coincidencia sobre la aprobación en la identificación que posee el sitio, considerando elocuente las decisiones gráficas en como se presentan el contenido, el blanco constante, el léxico en las publicaciones y el registro fotográfico existente; de tal manera, que en su mayoría solo se poseen críticas sobre el contenido y su Arquitectura de Información.

Existe además, un gran interés en re-construir y ser más partícipes de los espacios de foro que existen en en el sitio (asumiendo una postura de mea culpa), pero acompañada de una identidad más contemporánea, innovadora, no variando en su estilo plástico, sino en el asombro a través de interacciones animadas, el grado de conexión con redes sociales con otras entidades internas de la Universidad y mayor consideración y recepción al lector externo.


Encuesta sobre la Identidad Digital del sitio
Resultados de Encuesta de Identidad

Análisis Gráfico

Reconocimiento de Elementos y Escenarios Gráficos

Parte por preguntarse que elementos visuales y habitables son propios de nuestra Identidad, cuáles son los más usuales y que generan un carácter constante entre el alumnado y los docentes, una manera de abarcar el estudio y construir la obra a través de la observación y el dibujo. Estos elementos, serán elementales para la construcción visual del sitio, de tal manera que la identidad tendrá una proyección sobre la línea que sigue la Escuela, y su tradición.


En conversaciones guiadas con estudiantes de la Facultad, se distingue:


  • La Tipografía (Elemento)


Una tipografía manuscrita empleada usualmente en las bitácoras, los estudios, las láminas y las carpetas referentes a Clases, Taller de América, estudio personal, etc. Existe una confesión por parte del Estudiantado sobre el cambio paradigmático que sucede al entrar en la facultad, donde indirectamente se adopta una manera convencional de plasmar ideas, dibujos y anotaciones.


  • El blanco (Espacio / Elemento)


El Blanco, empleado como un espacio de silencio, descanso y habitar en el estudio de la Facultad, es quizás el elemento más usual y propio de la facultad, tan así, que la fachada externa e interna es de dicho color, además de un espacio visual recurrente y necesario tomado por el Taller de Investigación Gráfica y las Ediciones construídas por la comunidad.


  • Amereida (Espacio)


El carácter primero y más reconocible que tiene la comunidad externa e interna sobre la Facultad, es la visión Americana (Eneida Americana), que corresponde a la constitución de un espacio constante de interacción que discute sobre nuestra identidad Americana por medio de la Poética; así mismo, existe un registro que data desde que se funda la Facultad y documentación escrita que reflexiona sobre los temas tratados en cada clase.


  • Obras (Espacio / Elemento)


Puesto que la vértebra de Estudio de la Facultad es sobre la base de la Obra, la segmentación trimestral se lleva a cabo a partir de proyectos que son expuestos a fin de cada etapa a modo de exposición en cada sala; así mismo, Ciudad Abierta es una gran obra interminable, que construye sus espacios como una obra compuesta de mayores piezas, una imagen constante.


  • Pizarra (Espacio / Elemento)


Cada clase y cada sala de la Facultad, alberga una pizarra de tiza que permite una mejor definición de los dibujos y un cuadro de anotaciones que, se expresan en mayor grado, en cada clase de Amereida, donde se componen como módulos movibles por la dunas de Ciudad Abierta.


Propuesta Gráfica

Primera Etapa

En esta primera propuesta, la decisión gráfica elegida tipograficamente, pretende generar una representación de las publicaciones más contemporánea, sin perder el carácter formal propio de una entidad Educacional Universitaria, de tal modo, que la tipografía elegida (Kievit, elaborada por Mike Abbink en el año 2001) posee una estructura neutral con una familia que crea distingos sutiles,tomando elementos tipográficos de características serif y sin serif, dándole un aire más contemporáneo y de alta legibilidad.


En cuanto a los colores, la paleta busca una categoría cognitiva, en el caso del azul, de asociación rápida, de alta distinción y en un tono más opaco, para no generar demasiado ruído visual con el color blanco de fondo del sitio. Así mismo, la frescura que debe poseer el sitio, con una asociación más de apertura y de innovación, está asociado cognitivamente al verde, por su relación con lo terrenal y lo natural; para las distinciones en agrupaciones, los colores seleccionados, ambos grises, no generan gran contraste con el blanco y tampoco da un carácter distinto a los colores anteriormente mencionados; finalmente, el blanco invierno, busca emular visualmente el pigmento del papel Bond Ahuesado y resaltar una parte en la identidad visual de la Facultad.


Primera Etapa de Tipografía y Paleta de Colores

Segunda Etapa

De acuerdo a las correcciones realizadas en el Taller y a la Heurística expuesta más adelante, el carácter tipográfico ahora se asocia directamente a la compatibilidad con navegadores y la facilidad de importación, sin tener que instalar una tipografía en el servidor para la visualización desde cualquier navegador.


Ahora, el color resalta su carácter Editorial, y la paleta, está genera por dos polos, café y azul, generando un contraste más formal y un distingo mas sutil, añadiendo un punto intermedio, de un gris azulado, siempre sobre la base de una fineza Editorial, generando en el ojo una sensación visual más detallista y alejada de paletas más comunes o colores identificables instantaneamente.


El hover sobre un link, asoma el azul de acceso, que ahora es más opaco y elocuente con el café, siguiendo el carácter cognitivo asociado a un link y la cercanía luminosa junto a la paleta restante de colores.


Segunda Etapa de Tipografía y Paleta de Colores

Mapa de Navegación

Mapa de navegación actual del sitio.


Primera Etapa

La navegación de los contenidos, de acuerdo a la opinión reflejada en la encuesta, debe reducirse para poder acceder de una manera más fácil y elocuente al tipo de personas que ingresa al sitio. De esta forma, la sección de Mundo es quitada del menú para integrarse a la sección de Escuela, donde los artículos y la manera de abarcar y expander los estudios hacia el resto, son partes propias de la Escuela, ergo, se considera innecesario construir un apartado. Así mismo, los enlaces anexos que pertenecen al dominio, se añaden en el Home como una zona de links que permite el acceso directo a la actividad paralela de la Facultad.

Sobre la misma base, el Menú de "Carreras" se expande a una por cada carrera ("Diseño", "Arquitectura"), de tal forma que se logra construir un distingo entre ambas disciplinas, perdida en el Diseño actual del sitio, donde cada publicación solo mencionaba la disciplina a la que pertenecía en su categoría; para el caso de "Diseño" y "Arquitectura", ambas integran su postgrado en el desglose del menú, aunando las especialidades por disciplina, y no exponiéndolo como conceptos separados.


Archivo:Mapa navegación propuesta.jpg
Primera Etapa en Mapa de navegación.


Segunda Etapa

Se corrige esta vez la separación de Carreras y la integración de Postgrado a Carreras, puesto que la postulación a los postgrados, no necesariamente debe ser de la misma carrera de donde proviene, se creaba entonces una confusión y un entendimiento errado por su distribución; la sección Carreras vuelve a ser como era antes y se le añade Movilidad Estudiantil debido a que la asociación del intercambio está directamente relacionada con una de las carreras que imparte la Universidad, ahora llamada Intercambio Estudiantil por convención; además, se añaden secciones en el Home que llevarán a los links directos, como Media, que almacena los sitios paralelos al ead.pucv.cl pero que corresponden a la misma actividad de la Facultad, un apartado para Noticias e Información Docente y un cuadro inicial de la última publicación en la categoría Observación.


Archivo:Mapa navegación propuesta 2.jpg
Segunda Etapa en Mapa de navegación.

Visualización

Intención

La entrada principal al sitio muestra una serie de elementos que -de acuerdo a la encuesta realizada- interfieren, exceden en publicación y es difusa la navegación a través de ellos; sobre esta base, se decide mostrar los contenidos de acuerdo a quién accede al sitio, que tipo de usuario y los temas que serían de su mayor interes, velando mayoritariamente por la información visual, la compresión de contenidos textuales y la interacción mediante aplicaciones que expongan los contenidos y enlaces de una manera más lúdica.


Boceto Inicial de grilla


Primera Etapa

La división general del sitio está basada en la visualización constante de imágenes, expuestas analógicamente en forma de lámina y blancos que aparecen con a medida que se navega en el sitio. El diseño home, posee dos instancias, la primera, cargada de blanco tipográfico y el blanco espacial característico en la Arquitectura y en el Diseño, y en segunda instancia, la actividad interna, el ejercicio del alumnado y los docentes, caracterizados en Amereida, Phalene, Actos Poéticos, etc.


Para poder construir un sitio que reciba maleablemente los distintos contenidos y las jerarquías internas de exposición que posee cada publicación, se construye una grilla en base a la visualización anterior del sitio, donde se piensa el ancho de cada columna de acuerdo al ancho mínimo que deba poseer una fotografía y dos anchos máximo para el ancho de un párrafo. Para el alto de las horizontales, son establecidas de acuerdo a la constante publicación de noticias del sitio, de tal manera que en el alto debe caber la mínima información de una publicación (título, fecha de publicación y categoría) y además, se agrega restan de los costados 20 pixeles por un promedio del uso espacial que poseen los navegadores.


Primera Etapa de grilla


Continuamente, el sitio es segmentado en distintas secciones que han sido ordenadas por orden de relevancia, y que se argumentan de acuerdo al interés de los lectores y el modo idóneo de exponerse (¿Para quién? ¿Cómo?):


  • Perfil

Refiere a la visualización gráfica que posee el sitio, la imagen primera que se lee.

¿Para quién?: Para el lector interno y el ajeno (ajeno a la facultad y a las materias).

¿Cómo?: De manera simple, colores planos y que categoricen las secciones del sitio y los oficios, del orden de "categoría".


  • Noticias

Corresponden a las últimas publicaciones internas de la Facultad, que muestran la actividad que se realiza.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: En mayor tamaño una fotografía horizontal de la actividad, con una nota inferior que aparece cuando el cursor pasa por encima que muestra el Título de la noticia, fecha de publicación, breve descripción de la publicación y un ícono de acceso.


  • Observación

Es la sección que semanalmente realiza una observación publicada por algún profesor, carácter único de la escuela.

¿Para quién?: Tanto para el lector interno como externo, con un fin de hacer pública la manera en que la escuela realiza sus estudios.

¿Cómo?: El croquis de la observación con un título sobre el tema observado.


  • Eventos

Actividades realizadas y por realizar, estipuladas en Google Calendar que maneja la escuela.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: Un apartado que muestra los dos últimos eventos y que linkea directamente al Google Calendar.


  • Media

Son las secciones internas que posee el sitio, los espacios donde se publican estudios y/o catálogos de referencias.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: Como un apartado de un color distintivo al costado derecho, que permite el acceso al espacio con un link textual.


  • Contacto

Datos de contacto con la Universidad, mail, fono, dirección.

¿Para quién?: Lector interno y ajeno.

¿Cómo?: Desde un apartado inferior derecho, el boton de Contacto, desglosa los datos (fono, mail, dirección) y un enlace a un Google Maps.


Segunda Etapa

En su primera etapa, el sitio había reducido excesivamente los contenidos que se publicaban, de tal manera, que aún privilegiando la imagen primera que el sitio expone de sí, se decide prolongar la portada de acuerdo a los contenidos que se vayan publicando.


Sobre esta base, se decide dividir en dos instancias, la primera superior, para los contenidos generales que el sitio ofrece, dando énfasis a los espacios paralelos que posee la Facultad (categoría "Media"), donde la imagen situada en el Header, pretende ser la clave para una exposición de imágenes del carácter tradicional que tenga el sitio.

En el segmento secundario inferior, expone las publicaciones, donde el orden de éstas está de acuerdo a la caracterización (¿Para quién? ¿Cómo?) de cada sección, se continúa el carácter minimalista de la propuesta, con el fin de reducir el contenido escrito de las publicaciones; mientras que el segmento izquierdo, expone las publicaciones anteriores y las más relevantes para el lector interno y externo.


Segunda Etapa de grilla


  • Perfil

Refiere a la visualización gráfica que posee el sitio, la imagen primera que se lee.

¿Para quién?: Para el lector interno y el ajeno (ajeno a la facultad y a las materias).

¿Cómo?: Dentro del Header, como una imagen que abarca 1/7 de la pantalla y posee una reseña sobre lo que se ve, se trata de seleccionar una imagen random acerca de actividades internas de la Facultad, propias de la Tradición.


  • Media

Corresponden a los espacios digitales paralelos que posee la Facultad, tanto para difusión y estudio.

¿Para quién?: Principalmente para el lector externo.

¿Cómo?: En un recuadro ubicado en el Header que posee los nombres de cada sección a modo de link.


  • Destacado

Corresponden a las últimas publicaciones destacada.

¿Para quién?: Principalmente para el lector externo.

¿Cómo?: Con una imagen que ocupa cuatro cuadrantes de la grilla y titulada en su inferior, la intención es generar una curiosidad exponiendo un segmento de la imagen que posee el artículo.


  • Noticias

Corresponden a las últimas publicaciones internas de la Facultad, que muestran la actividad que se realiza.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: En 2/3 del segmento inferior derecho de la grilla, donde cada imagen está titulada en su interior con el nombre de la publicación, fecha de publicación y categoría; en contraste con la actual situación del sitio, esta propuesta pretende solo mostrar cuatro imágenes a modo de "Noticia", sin sobrecargar la portada con muchas publicaciones compuestas de imágenes y reseñas de cada publicación.


  • Observación

Es la sección que semanalmente realiza una observación publicada por algún profesor, carácter único de la escuela que analiza asuntos de ubicuidad, habitar, interacción, etc.

¿Para quién?: Tanto para el lector interno como externo, con un fin de hacer pública la manera en que la escuela realiza sus estudios.

¿Cómo?: Segmento del croquis de observación, que en su inferior posee, título, fecha de publicación, autor de la publicación junto a una imagen de él, más el acceso a todas las publicaciones que pertenecen a la categoría "Observación".


  • Alumnos

Actividades realizadas, por realizar y obligatorias para el Alumnado.

¿Para quién?: Principalmente para el lector interno.

¿Cómo?: Un apartado que en un recuadro, muestra el título de cada publicación ordenada por fecha de subida, con un link de acceso de a todas las publicaciones de categoría "Alumnos".


  • Contacto

Datos de contacto con la Universidad, mail, fono, dirección.

¿Para quién?: Lector interno y ajeno.

¿Cómo?: En un footer (pie de página) que alberga datos de contacto, acceso a google maps, especificaciones técnicas sobre el sitio web, y links a las páginas de carácter institucional del sitio.

Boceto/Wireframe

Boceto


El desarrollo de los wireframes se efectua de acuerdo a la jerarquización de los contenidos en cuestión, y las carencias reveladas por el alumnado y docentes de la Facultad, priorizando la exposición del contenido en modo de imagen y con una interacción en jQuery. La maqueta de wireframes está elaborada sobre la base del contenido exclusivamente, o sea, que no considera el grado emocional que posee el sitio, de esa forma, se corrige y se discute solo de la ubicación y la espacialidad de éste dentro de la pantalla.


Primera Etapa

En esta segunda etapa, la propuesta anterior carecía del grado de formalidad que debe lograr una Institución Educacional Universitaria, y los contenidos se presentaban de una manera eficiente y económica, que era uno de los fines principales, pero no expone información que identifique a la Escuela, solo se centraba en el contenido de las publicaciones y los eventos que se realizaban, pero no considera la identidad de la Escuela dentro de esta primera aparición del sitio.



Segunda Etapa

La composición estructural de la etapa anterior, seguía consistiendo en sintetizar excesivamente los contenidos que el actual index del sitio muestra; de tal manera que se decide prolongar la visualización de la portada, primero, en una representación general de la Facultad, con acceso hacia los espacios digitales de trabajo paralelos al sitio e[ad ] y un random del catálogo de Flickr que se carga cada vez que se actualiza el sitio; en la segunda instancia, el sitio divide dos secciones, alumnado y noticias, donde se designa 1/3 para el primero y 2/3 para el tercero, de acuerdo a la intención que se desea obtener con el sitio.


Interfaz

Boceto

En este primer boceto de la portada del sitio, se expone la manera en que las fotografías y los contenidos son expuestos, para las noticias, y en especial, para la última publicación, la imagen da un detalle de la publicación, su fecha de emisión y una pequeña reseña, referida en un recuadro negro que aparece cuando el cursor está en hover sobre la imagen, buscando el dinamismo y el realce visual que debería poseer el sitio.


La noticias anteriores, se muestran al inferior y buscan generar un contraste de las carreras a través de los colores y, con una extensión en jQuery, animarlas en un rollover horizontal y hacer aparecer las demás noticias. La reducción espacial del sitio, busca generar una identidad instantánea sobre la actividad de la escuela, y la línea editorial que se posee por rasgos característicos gráficos de la identidad.


Maqueta uno, visualización de prueba

Primera Etapa

En esta etapa, se corrige de la anterior, una jerarquización visual de colores que no representan la identidad de la Facultad, siendo la línea visual de los proyectos y la comunidad, simple, blanca y reducida en paleta de colores. Así mismo, la impresión primera del sitio, es sobre la identidad misma, con una imagen característica de la actividad y el concepto que genera la Facultad en el perfil de sus egresados.


De igual forma, cada vez que el cursor posa sobre un segmento del Menú, corre una imagen de fondo que muestra: Una imagen característica de la sección superpuesta y un detalle de la fotografía; se intenta con esta forma, generar una segunda navegación del sitio que pasa tanto por revelar los contenidos de cada sección y dar una idea sobre la actividad, alumnado, docencia que posee la Facultad.


Para el caso de la publicación, se limpia la navegación superior y solo se deja el ingreso, la búsqueda y un link hacia el Home. La visual de las publicaciones, emula la relación de las láminas (gran característica de la Facultad) y un agregado de notas para los comentarios; de otra manera, el contenido visual se reduce al presentar las fotografías de la publicación como un apartado izquierdo, que aparece solo al clickearlos como un pase de diapositivas en sentido horizontal.



Segunda Etapa

De acuerdo a la corrección anterior, el Home del sitio, anula demasiado lo que pasa, en cuanto a actividad, dentro de la Facultad, dejando de lado totalmente la sección de Observación; de esta forma, se añade los links hacia las secciones Media que posee el sitio, como imagen primera, la última observación publicada, con una reseña breve y los detalles de esta, y la información de docencia como tercera instancia en la jerarquización de aparición del contenido.



Tercera Etapa


Se decide en esta etapa, que las dos nuevas instancias creadas para la portada del sitio, se distinguen graficamente por la utilización de colores, en la primera, a través del gris y el blanco, más la fotografía de la facultad, y en la segunda, el distingo pictórico de la tipografía. La determinación de la tipografía y los colores, son elegidos de acuerdo a la sensación que producen y a la actividad que la facultad ejerce, queriendo generar modernidad y formalidad que amerita una Entidad Educacional Universitaria.


Una publicación de noticia, distingue dos segmentos principales y la reducción de la fotografía del header para permitir una mayor visualización de la publicación en pantalla; el segmento izquierdo, abarca las últimas publicaciones relacionadas con Noticias, las últimas publicaciones que corresponden a la misma categoría, la publicación destacada y el acceso a los espacios digitales paralelos; la lógica de este orden corresponde a la navegación de acceso hacia la publicación que se está visualizando, y el grado de relación que tiene el artículo con el contenido total del sitio.


La sección derecha, recibe la publicación en sí, las características de ésta y herramientas de envío mail e impresión, añadiendo una imagen de quien la publicó, un link hacia las publicaciones del autor y su mail; en su segmento inferior, el cuadro de comentarios está desfasado de la vertical que justifica el texto de la observación, con fin de darle un mayor carácter editorial a las publicaciones, sin regirse estrictamente por la grilla que la contiene.


La interfaz en una publicación de observación, al igual que un publicación de Noticia, distingue se segmenta de igual forma, pero, en su segmento izquierdo, el orden de relevancia de publicación de contenidos es: Noticia, Observación, Media, de acuerdo a la navegación que lleva a la publicación, y la categoría que se expone.


Cuarta Etapa

Caracterización de Usuarios

Para poder desarrollar la navegación y la grafía del sitio, se asigna una aproximación real de interacción persona-sitio, se considerarán tres representantes con distintas experiencias en el medio y grados conocimiento sobre el mundo web , de tal manera que el ubicarlos en los prototipos, se revelarán las exigencias y necesidades de interacción/navegación de dichas personas y el grado de relación/asociación gráfico que tendrán; de esta forma, la manera de abarcar la construcción, tiene su base técnica y empírica.

Personas y Escenarios

Caso 1

Pye jorge.jpg


  • Nombre: Jorge Vera A.
  • Edad: 58 años.
  • Ocupación: Guardia Privado y Artesano.
  • Nivel de Usuario: Básico.


Descripción: Jorge vive en La Ligua y es trabajador en un condominio privado, además de artesano en orfebrería. En sus ratos libres gusta de ver películas y documentales por TV Cable y buscar en internet revistas y/o galerías de orfebrerías, investigación en sus materiales, técnicas, precios, etc. Se entretiene horas viendo las fotos, ha aprendido a marcarlas en una carpeta de favoritos de su navegador y enviarlas por mail a su familia.

Escenario:

El hijo menor de Jorge estudia en la Facultad de Arquitectura y Diseño, y desea saber en que fecha serán los exámenes de pregrado y de postgrado para ir a visitarlos junto a su esposa y su hijo mayor. Se encuentra con un calendario de todas las actividades que realiza y realizará la Facultad y la Universidad, y añade los calendarios que le interesan a su cuenta de gmail para poder programar un próximo viaje a Valparaíso.


Caso 2

Pye erick.jpg


  • Nombre: Erick Aspe V.
  • Edad: 21 años.
  • Ocupación: Estudiante de Ingenería - USACH.
  • Nivel de Usuario: Avanzado.


Descripción: Erick es estudiante de la Universidad Santiago de Chile y gusta de salir a compartir con sus amigos y jugar juegos online de Estrategia, se interesa mucho por los proyectos de ingenería en Quimica y leer los diarios nacionales a través de internet. Posee un conocimiento avanzado en espacios web, software, y juegos de avanzada tecnología.

Escenario: Erick desea saber leer un artículo que le comentó un amigo, se encuentra con un buscador que le arroja los resultados de manera sencilla, entendible, jerarquizada y con características de poder acceder a otros artículos de la misma línea. Al ingresar se percata que las categorías están linkeadas a una biblioteca "Constel" y un archivo fotográfico en Flickr, y decide enviarlas a sus amigos a través de Facebook y Twitter.


Caso 3

Pye andrea.jpg


  • Nombre: Andrea Zevallos F.
  • Edad: 21 años.
  • Ocupación: Estudiante de Arquitectura - PUC Perú.
  • Nivel de Usuario: Avanzado.


Descripción: Andrea es una joven Peruana que estudia Arquitectura en la Pontificia Universidad Católica del Perú y se apasiona por los proyectos de desarrollo urbano, es avanzada en softwares de modelos 3D, en sus ratos libres le gusta ver películas y viajar con sus amigos. Pretende organizar un grupo de actividad urbana en Lima y cuenta con amigos que la apoyan desde Chile.

Escenario: Andrea está cursando su cuarto año de Arquitectura, y le recomendaron la Facultad de la Pontificia Universidad Católica de Valparaíso, Chile, desea averiguar sobre los requerimientos y el proceso que debe hacer en caso de que se efectúe el intercambio.

Se encuentra con una sección de Carreras y una pestaña especial para Intercambio, la información dada es clara y encuentra un formulario de llenado para la postulación, las direcciones y una vista de Google maps se ubica perfectamente y le genera una mayor confianza; llama a los teléfonos que aparecen en la sección y la transfieren para detallarle de mejor manera, el proceso que debe hacer en su Universidad para realizar el intercambio y la convalidación.


Heurística

Protocolo para Pruebas de Usuarios

¿Qué se desea medir?

De acuerdo a la proposición y la línea de trabajo que posee ésta, mediante una heurística aplicada a estudiantes de la Facultad donde se les pide que se ubiquen en una posición "persona y escenario", se desea evaluar el grado de formalidad gráfica que posee la propuesta, las jerarquías visuales que posee y si las decisiones tomadas representan la actividad y el contexto de la Facultad.


¿Cómo?

La medición, será a través de una evaluación hacia las interfaces que calificarán las personas, estás serán: la portada, una noticia, una observación y un resultado de búsqueda; cada persona será sentada frente a la pantalla, no se le interrumpirá mientras lee el contenido y al finalizar, se le entregará el formulario que se evaluará con escala de 1 a 7 y opiniones que argumentan la evaluación de las preguntas

El formulario se compone de dos partes, una introducción que explica el sentido de la prueba y lo que se le solicitará:

Introducción:

"En el desarrollo de una propuesta de interfaz en un sitio web, la evaluación heurística es imprescindible para las correcciones necesarias que permitan la claridad de los contenidos; en este test, ud está siendo partícipe de la evaluación que mide la efectividad de la propuesta y no sus capacidades; el test consta de una visualización de páginas que componen el sitio de la facultad y la calificación por pregunta de acuerdo a su percepción gráfica."


Lo que se le solicitará:


"A continuación, se le solicitaran los datos de carrera que estudia, año que cursa y ponerse en el caso de una persona y escenario particular que navega por el contenido de cada página, posteriormente, desde su percepción, evaluará las páginas que ha observado en la pantalla de una manera descriptiva, añadiendo observaciones y comentarios, y calificando en escala de 1 a 7."


Preguntas:

  1. ¿Es clara la forma en que se presenta el contenido?
  2. ¿Son visibles las jerarquías visuales?
  3. ¿Alcanza la formalidad propia de una Facultad?
  4. ¿Es elocuente con el contexto y la actividad de la Escuela?
  5. ¿Genera una imagen interesante para el lector ajeno?
  6. La organización espacial ¿te parece correcta?
  7. ¿Debería ser más económica visualmente?


Test Heurístico


Resultados

Luego de hacer las pruebas de identidad a seis estudiantes de la Facultad, se pueden concluir los siguientes puntos:

  • Excede la manera en que se reducen los contenidos, en la sección de Noticias, ocurren más cosas y con mayor descripción, la fotografía reduce a la descripción.
  • Los colores son elocuentes y la tipografía es limpia y clara.
  • Deberían ser más contrastadas, están muy suaves los tonos elegidos; sin embargo, generan una propuesta nueva del sitio.
  • La sección de media, se ve muy alejada del resto, como un apartado.
  • El interés para el lector se puede generar con el grado de interacción que tengan las páginas.
  • El header podría tener más partido.
  • Se logra distinguir la Escuela, pero no la Universidad.

Propuesta Final

Portada del Sitio




Interfaz de Resultado de Búsqueda

Programación Web

Divs

Mapa de Divs

El armado digital del sitio está construido en HTML según las estandarizaciones establecidas por la W3C y comienza por traspasar la diagramación de la interfaz a un mapa de divs que permite posteriormente, ingresar los contenidos de manera organizada y definir los estilos visuales para cada sección (para cada div).


Primera Etapa mapa divs


Código Html de Divs

Primera Etapa

Estructura html de la Primer Etapa en la propuesta




<head> 
<title>Escuela de Arquitectura y Diseño</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="css/estilo.css" /> 
</head> 

<body>

<div id="contenedor">
	<div id="principal">
	
	<div id="header">
	<ul id="menu">
		<li>Escuela</li>
		<li>Amereida</li>
		<li>Carreras</li>
		<li>Postgrado</li>
		<li>Alumnos</li>
	</ul> <!-- fin menu -->
	
	<div id="buscador">
	Buscador
	</div>
	</div> <!-- fin header -->
	
	<div id="contenidos">
	<div id="logo">
		<span id="ead">e[ad]</span> <br />
		<span id="nom_esc">Escuela de Arquitectura y Diseño</span> <br />
		<span id="nom_uni">Pontifica Universidad Católica de Valparaíso</span>
	</div> <!-- fin logo -->
	
	<div id="observacion">
	Observación
	</div>

	<div id="media">
		<div id="media_wrap">
		Media
		</div>
	</div>
	</div> <!-- fin contenidos -->
	</div> <!-- fin principal -->
	
	<div id="secundario">
	<div id="noticias">
		<div id="noticias_wrap">
		Noticias
		</div>
	</div>
	
	<div id="informacion">
		<div id="info_wrap">
		Información
		</div>
	</div>
	
	<div id="hipervinculos">
	Hipervínculos
	</div>
	</div> <!-- fin secundario -->
	
	<div id="footer">
		<div id="footer_wrap">
		Footer
		</div>
	</div> <!-- fin footer -->
	
</div> <!-- fin contenedor -->

</body> 
</html>



Mapa divs Index.png


Wordpress

Estructura header

php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
	<title><?php wp_title( '-', true, 'right' ); echo wp_specialchars( get_bloginfo('name'), 1 ) ?></title>
	<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" />
<?php wp_head() // For plugins ?>
	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url') ?>" title="<?php printf( __( '%s latest posts', 'sandbox' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'sandbox' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url') ?>" />
</head>

<body class="<?php sandbox_body_class() ?>">

<div id="wrapper" class="hfeed">

	<div id="header">
 
    		<div id="fondo_sup">
		<div id="imagen_sup">
		
			<div id="qua_contenedor">
			<div id="qua_imagen">
				<div id="acceder">
                
                	<div id="ingresar">
                    <p>Ingresar</p>
                    </div>
                    
                    <div id="recuperar_cont">
                    <p>Recuperar Contraseña</p>
               		</div>
                    
				</div>
				
				<div id="busqueda">
                <div id="bus_cua">
				<form id="searchform" class="blog-search" method="get" action="<?php bloginfo('home') ?>">
					<div>
						<input id="s" name="s" type="text" class="text" value="<?php the_search_query() ?>" size="17" tabindex="1" />
                        <input id="botondemier" type="submit" class="button" value="<?php _e( ' ' ) ?>" tabindex="2" />
					</div>
				</form>  
                </div>             
				</div> <!-- fin busqueda -->
			</div> 
			</div> <!-- fin qua_contenedor -->
		
			<div id="sup2">
			<div id="hi_imagen">
			<p>Phalene, Quinta Vergara, 1978</p>
			</div> <!-- fin hi_imagen -->
			
			<div id="constel_imagen">
				<div id="titulo">
                <h1>Norma y Apartado </h1>
                <h2>1986, Godofredo Iommi</h2>
				</div>
				
				<div id="cita">
                <h2>"...desde el punto de vista moderno una superficie es una sub-clase de una clase..."</h2>
				</div>
			</div> <!-- fin constel_imagen -->
			</div> <!-- fin sup2 -->
			
		</div> <!-- fin imagen_sup -->
		</div> <!-- fin fondo_sup -->
		
		<div id="logo">
        	<div id="ead">e[ad]</div>
            <div id="subtitle">Escuela de Arquitectura y Diseño<br />Pontificia Universidad Católica de Valparaíso</div>
            <div id="contactoyubicacion"><a href="">Contacto</a>    |    <a href="">Ubicación</a></div>
		</div> <!-- fin logo -->
		
		<div id="media">
		</div> <!-- fin media -->
		
		<div id="menu">
			<ul id="navbar">
	<li class="menusuperior"><a href="#">Escuela</a><ul>
		<li><a href="#">Historia</a></li>
		<li><a href="#">Admisión</a></li>
		<li><a href="#">Campus</a></li>
		<li><a href="#">Cuerpo Docente</a></li>
		<li><a href="#">Autoridades</a></li>
		<li><a href="#">Catolicidad</a></li>
		<li><a href="#">Prensa</a></li></ul>
	</li>
<li class="menusuperior"><a href="#">Amereida</a><ul>
		<li><a href="#">Biblioteca Constel</a></li>
		<li><a href="#">Travesías</a></li>
		<li><a href="#">Taller de Amereida</a></li>
		<li><a href="#">Ciudad Abierta</a></li></ul>
	</li>
<li class="menusuperior"><a href="#">Alumnos</a><ul>
		<li><a href="#">Cuerpo Coordinador</a></li>
		<li><a href="#">Procesos Administrativos</a></li>
		<li><a href="#">Calendario</a></li>
		<li><a href="#">Exalumnos</a></li>
		<li><a href="#">Servicios</a></li>
		<li><a href="#">Movilidad Estudiantil</a></li>
		<li><a href="#">Bolsa de Trabajo</a></li>
		<li><a href="#">Datos Personales</a></li></ul>
	</li>
<li class="menusuperior"><a href="#">Carreras</a><ul>
		<li><a href="#">Arquitectura</a></li>
		<li><a href="#">Diseño</a></li>
		</ul>
	</li>
<li class="menusuperior"><a href="#">Postgrado</a><ul>
		<li><a href="#">Magister Náutico Marítimo</a></li>
		<li><a href="#">Magister Ciudad y Territorio</a></li>
</ul>
	</li>

	<!-- ... and so on ... -->
</ul>
		</div> <!-- fin menu -->
    
	</div><!--  #header -->

	<div id="access">
		<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'sandbox' ) ?>"><?php _e( 'Skip to content', 'sandbox' ) ?></a></div>
		<?php sandbox_globalnav() ?>
	</div><!-- #access -->



CSS


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { 
	border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}

abbr,acronym { 
	border:0;
}


/* Acá comienza la Cascada */

body.home {
	background: white url('img/fondo_header.png') repeat-x;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
}
	
body {
	font-family: Calibri, Arial, sans-serif;
	font-size: 13px;
}

#contenedor {
	margin: auto;
	width: auto;
	height: auto;
	max-width: 1700px;
	min-width: 770px;
	background-color: black;
}

#header {
	height: 377px;
	width: 100%;
	background-color: white;
}

#fondo_sup {
	width: auto;
	height: 174px;
	background-color: black;
}

#qua_contenedor {
	width: 954px;
	height: 93px;
	margin: 0 0 23px 0;
}

#sup2 {
	width: 954px;
	height: 58px;
	margin: 0;
}

#hi_imagen {
	width: 212px;
	height: 28px;
	background-image: url('img/cuadro_negro.png');
	float: left;
	margin: 30px 0 0 0;
}

#hi_imagen p {
	font-style: italic;
	font-size: 12px;
	color: white;
	margin: 7px 0;
	text-align: center;
}

#constel_imagen {
	width: 424px;
	height: 58px;
	background-image: url('img/cuadro_negro.png');
	float: right;
	margin: -2px;
	border-top: solid white 2px;
}

#titulo {
	width: 120px;
	height: 32px;
	margin: 13px 0 auto 0;
	filter:alpha(opacity=100);
 	opacity: 10;
	float: right;
}

#titulo h1 {
	font-size: 13px;
	color: #FFF;
}

#titulo h1:hover {
	color: #877831;
}

#titulo h2 {
	font-size: 11px;
	color: #FFF;
}

#cita {
	width: 260px;
	height: 27px;
	float: left;
	margin: 14px 0 0 14px;
}

#cita h2 {
	font-size: 11px;
	font-style: italic;
	color: #FFF;
}

#qua_imagen {
	background-color: #2A67A4;
	width: 212px;
	height: 93px;
	float: right;
}

#acceder {
	width: 183px;
	height: 29px;
	margin: 19px auto 13px auto;
}

#ingresar {
	width: 76px;
	height: 26px;
	background-color: #1D4677;
	float: left;
}

#ingresar p {
	color: #FFF;
	font-size: 11px;
	text-align: center;
	margin: 7px auto 0 auto;
}

#recuperar_cont {
	width: 65px;
	height: 26px;
	float: right;
}

#recuperar_cont p {
	color: #FFF;
	font-size: 11px;
	text-align: center;
	margin: 2px 4px 0 auto;
}

#acceder p:hover {
	color: #A38657;
}

#busqueda {
	width: 212px;
	height: 35px;
	margin: 0;
	background-color: #1D4677;
}

#bus_cua {
	width: 100%;
	height: 34px;
	margin: 8px 0 0 7px;
	float: left;
}

input#botondemier {
	height: 20px;
	width: 30px;
	border-collapse: collapse;
	border: 1px solid #ccc;
	background: #fff url('img/lupa.png') no-repeat 1px 1px;
}

#logo {
	width: 370px;
	height: 80px;
	float: left;
}

#ead {
	width: 96px;
	height: 58px;
	background: white;
	float: left;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	color: #0174C1;
	font-size: 40px;
	margin-top: 15px;
	padding-left: 10px;
}

#subtitle { 
	width: 257px;
	height: 37px;
	float: left;
	margin-top: 20px;
}

#contactoyubicacion {
	width: 150px;
	height: 20px;
	background: white;
	float: left;
	color: #0174C1;
}

#contactoyubicacion a, #contactoyubicacion a:visited{
	color: #0174C1;
	text-decoration: none;
}

#menu {
	width: 800px;
float: left;
}

#navbar {
	position: relative;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;}
#navbar li {
	list-style: none;
	float: left;}

li.menusuperior {
	padding: 11px 0;
	width: 100px;
	border-left: 1px dotted #ddd;
text-align: center;
font-size: 14px;
font-family: Calibri, Arial, sans-serif;
font-weight: normal; 
}
#navbar li a {
	display: block;
	padding: 3px 8px;
	text-decoration: none; 
	color: #000;
	font-weight: normal; 
}
.menusuperior ul li {
	margin-top: 20px;
	width: 100px;
	z-index: 3;
}
#navbar li a:hover {
	color: #000; }
#navbar li ul {
	display: none;
	  }
#navbar li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: left; }
#navbar li:hover li a, #navbar li.hover li a {
	color: #000; }
#navbar li li a:hover {
	color: #357; }

input#s {
	float: left;
	height: 18px;
	width: 168px;
	border: 1px solid #ccc;
	border-right: none;
	border-collapse: collapse;
}

#imagen_sup {
	width: 954px;
	height: 174px;
	background-image: url('img/foto_header.png');
	margin: auto;
}


Previsualización

Previsualización seccion Header del Theme en Wordpress.