Proyecto de sitio responsive: "Hoy me voy a ocupar de mi cólera"

De Casiopea


TítuloGrupo 4: "Hoy me voy a ocupar de mi cólera"
Tipo de ProyectoProyecto de Curso
Palabras Claveresponsive design, web, gráfica digital, estudio, constel
Período2013-2013
AsignaturaGráfica Digital 2013,
Del CursoGráfica Digital 2013,
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)Francisca Wevar, Nathaly Sepúlveda
ProfesorKatherine Exss



Introducción al encargo

El siguiente trabajo consta del planteamiento de un sitio web para el texto Hoy me voy a ocupar de mi cólera de Godofredo Iommi y perteneciente a la Biblioteca Constel de la E.ad Particularmente, para este texto se tomo en consideración la existencia de un precedente impreso el que a su vez se basa en un registro sonoro. Por consecuente, este trabajo no solo se aborda en el sentido de que un sitio debe contener el texto, haciéndose más apropiado entonces el término "edición web", tratándose de un sitio web pensado desde una perspectiva que respeta el relato de texto y los elementos que lo definen.


Sobre el texto

El texto a utilizar es Hoy me voy a Ocupar de mi Cólera que es la transcripción del audio de una clase realizada el 20 de Marzo de 1983 por Godofredo Iommi para el Taller de Amereida, el cual se encuentra -formato audio - en la casiopea de la E[ad] - forma digital - en la Biblioteca Constel y - formato análogo - en la Biblioteca Especifica de Arquitectura de la Pontificia Universidad Católica de Valparaíso.

             Colerahoy portada web.jpg

El libro original consta de 33 páginas.


Como se explica es una clase que se realiza para el Taller de Amereida en la cual Godofredo Iommi nos presenta diferentes reflexiones de las cuales también nos propone distintos mecanismos de interpretación de todo lo hablado en algún momento. En todo el discurso presentado nos habla de una pintura ‘Guérnica’ de Pablo Piccaso con la cuál compara demasiadas realidades o pensamientos, ya que está pintura esta catalogada como el apogeo. Una de las aclaraciones que nos presenta o a la cual quiere llegar Iommi es que cada cual tiene una forma de interpretar, presentar y crear una idea o forma propia. Y con ello la identidad de nuestro carácter y forma de vida.


Imágenes en el texto

Las imágenes utilizadas en la edición original, son dibujos extractos del cuadro "Guérnica" de Pablo Picasso. Estos extractos son realizados por un alumno de titulo de la época, ya que Godofredo Iommi lo solicito. [Fuente: Sylvia Arriagada]

Encargo

Decisiones editoriales

Para realización del encargo, se decidió tomar como referencia la edición impresa de Hoy me voy a ocupar de mi cólera (Iommi.G), por ende, el trato del texto y su forma de leer pretende ser lo más cercana a la intención ya dada en la versión impresa. No obstante, trabajar respecto a esta edición trae consigo diferentes factores los cuales se consideraron dentro de la edición web.

Ritmo de lectura > Modo de navegación - Modo de lectura:

Dada la extensión y sintaxis del texto, se plantea de que forma se navegará o bien, leerá el texto. Es decir, debe crearse un modo de lectura que permita llevar un ritmo adecuado para enfrentar la extensión del texto y a su abra paso a su compresión. Por otro lado, este mode de leer -sin desmedro de lo anterior- debe respetar el relato que el texto en si mismo posee y que ha sido deliberadamente estipulado a través de su sintaxis. Así es que se han planteado dos modos de navegación, independientes entre sí:

Modo uno > Navegación horizontal: Este modo de leer satisface los requirimentos del texto, ya que se encuentra -independiente de que se trate de un medio digital/web- más cercano a la lectura del libro, lo que se entiende como un ritmo ciertamente pausado, que posee la detención necesaria para la compresión que requiere el usuario - lector. Primordialmente, una de las razones que sustenta dicha decisión es la experiencia ya existente con el texto Hoy me voy a ocupar de mi cólera (Iommi.G), presente en la plataforma web Wiki Casiopea y el sitio web de la Escuela Ead. El problema con estas "ediciones" web es la ausencia de elementos que marquen el ritmo del texto pues este se muestra como una única columna continua de texto. Asi mismo, esta ausencia de "marcadores" influye en la perdida del ritmo de lectura del propio lector, y a su vez, como este comprende el modo de relatar del texto.

Modo dos > Navegación vertical: Para hacer posible esta forma de leer, se plantean ciertas condicionantes dada las experiencias ya existentes respecto al texto editado como muchos otros que están sujetos al mismo problema del "scrolling". Por tanto, se determina necesario la existencia de un "scroll" limitado, es decir, que cuando el usuario-lector requiera"pasar la página", la porción visible baje hasta un cierto punto, desplegando únicamente el contenido de la "página" solicitada.

Tipo de indexación

El texto Hoy me voy a ocupar de mi cólera (Iommi.G) no posee foliación, capitulación o cualquier tipo de categorización que permita indexar su contenidos de manera inmediata. Frente a esto, se plantea un sistema de numeración de páginas -en base a la versión impresa - que comienza en el cero, número asignado a la portada. No obstante, no existe capitulación -entendida como un nombre para una cantidad de páginas- por lo que el hecho de asignar un numero de pagina a cierto contenido no soluciona el problema, pero la determinación de un cierto "título" a uno u otro contenido del relato puede ir en desmedro de la compresión lectora que cada usuario-lector puede hacer del texto. Como solución se plantea mantener el sistema de foliación creado, pero a este se le agrega una parte de la primera frase de la página númerada. Esto permitira al lector encontrar una referencia de lo que se encuentra en dicha página.

Ejemplo:

  • 1. Hace dieciocho años...
  • .
  • .
  • 11. Rápido partido...
  • .
  • .
  • 16.¿Qué nos pasa en América?
  • 17. (Viene de 16) [...] ayer hablaba como un vendedor...
  • .
  • .
  • 21.¡No! Entonces...
  • .
  • .
  • 33. Nota del Editor


Mapa de navegación

  • Home: Contiene el título, el que se denomina página "0" pues cumple dos funciones, recibir al usuario y dar inicio a la lectura.
  • Sobre el texto: Ficha del texto y nota sobre la edición web.
  • Lectura continua: Desde el HOME que contiene la pagina "0" (título) hasta la página 33 (Nota del Editor). Como en la lectura de un libro el usuario-lector no puede volver omitiendo cierto intervalo de páginas. No obstante, puede recurrir a la lectura indexada para dicho proposito.
  • Lectura indexada: Si el usuario-lector desea leer una página en particular debe cliquear "Lectura Indexada", donde estará el indice de las páginas.
  • Búsqueda o "Search": El motor de búsqueda busca el elemento consultado dentro del texto y trae los distintos resultados de forma ordenada a tráves de la indexación de las páginas.
  • Sitios Hermanos: Vínculos a los sitios web de los textos realizados por otros grupos.


Análisis del texto y páginas tipos

Para la presentación del texto en la edición de web, se revisaron los distintos tipos de grillas de la versión impresa, lo que arrojo N° plantillas en las que el texto se encuentra contendió en una caja centrada respecto a la página y lo que varía es el corte del texto y su posición dentro de esta, siendo ambos elementos los que determinan el ritmo o sintaxis del relato.

Distintos tipos de plantillas de texto

PUNTOS DE QUIEBRE Dado que el propósito final es la lectura del texto sin afectar su sintaxis, no existe un gran número de elementos que se puedan considerar de los puntos de quiebre. No obstante, se debe considerar dentro de este punto la apariencia y el comportamiento de menú.

Apariencia del menú Sitio web: Todos los contenidos y la barra de búsqueda se presentan en una barra ubicada en la parte superior de la ventana en lugar de un header.


Móvil - Navegación modo horizontal: Todos los contenidos y la barra de búsqueda se condensan en un botón con tres lineas y la palabra "MENÚ" ubicado en la parte superior izquierda de la ventana en lugar de la barra que utilizaba la parte superior por completo.

Ejemplo de navegación vertical


Móvil - Navegación modo vertical: Cuando el móvil cambia su modo de navegación (no confundir con posición/orientación de lectura) a vertical el botón de menú se comprime Todos los contenidos y la barra de búsqueda se condensan en un botón con tres líneas ubicado en la parte superior izquierda de la ventana en lugar del botón con la palabra menú presente en el otro tipo de navegación en móvil y la barra que utilizaba la parte superior por completo. Este cambio se hace necesario dado que el botón "MENÚ" interferiría entre la interacción del usuario e interface al navegar hacia arriba o abajo.

Ejemplo de navegación vertical
  • Comportamiento de menú 1

Sitio web: La barra de menú se encuentra presente en todo el sitio con las mismas secciones y contenidos. Cada sección del menú tiene la posibilidad de ser cliqueada y así, desplegarse para mostrar sus contenidos. Los menús de cada sección se despliegan solo si son cliqueados y se colapsan automáticamente cuando uno de los contenidos es elegido.


Móvil: Al estar todos las secciones y contenidos dentro de un botón y al tratarse de pantallas más pequeñas, el menú se despliega cubriendo la pantalla. Una vez desplegado se visualizan las secciones. Ahora, al interactuar con las secciones existen tres acciones resultantes: 1. HOME y "Sobre el texto": El botón HOME redireccionará a la página "0" donde se encuentra el título y desde donde se puede comenzar nuevamente la lectura. "Sobre el texto" realiza el mismo tipo de acción pero redirecciona a la página con su nombre que posee la ficha del texto (autor, edición, etc.) y una nota sobre la edición web.


2. Botones "SEARCH" y "SITIOS HERMANOS" : Ambos botones se despliegan dentro del mismo menú 1, es decir, no hay re-dirección a otra página sino que todo sucede en una misma ubicación. Colapsan al volver a hacer click en ellos.


3. "LECTURA INDEXADA": Al cliquear en está sección, se va del menú 1 al menú 2, este último correspondiente a la sección. En el menú 2 se encuentra el indice de páginas. Este menú soporta scrolling táctil por lo tanto posee un link de retorno al menú 1 al principio y al final de indice o bien, el usuario puede dar "tap" al volver de su teclado táctil.

Desarrollo

Web

Dentro del

primera propuesta home para web
primera propuesta despliegue "sobre texto" para web
primera propuesta despliegue resultados de busqueda para web

Bosquejos de proporciones dentro de la pantalla para realizar posteriormente los wireframe

Móvil

Ejemplo de navegación vertical
Ejemplo de navegación vertical
Ejemplo de navegación vertical


Bosquejos de proporciones dentro de la pantalla para realizar posteriormente los wireframe