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
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

Como diseñadores de web, se debe comprender que resolver la mayoría de los problemas es importante para así abarcar y presentar de forma coherente toda la información que anteriormente se presento.

Acerca del responsive desing

Responsive Design o Diseño Adaptativo es un enfoque de estructuración, flexibilidad y fluidez en el diseño y desarrollo web, que propone responder al comportamiento que el diseño debería adoptar en las distintas pantallas o resoluciones disponibles actualmente, para la vista de un sitio web. Dando así una coherencia constante e identidad del sitio web en los distintos dispositivos, permitiendo que no se pierdan ciertos rasgos que lo caracterizan.

“Día a día, el número de dispositivos, plataformas y buscadores que necesitan trabajar con su sitio aumenta. El diseño web adaptable representa un cambio en como vamos a construir sitios web para la próxima década” Jeffrey Veen

"Transplant the discipline name "responsive architecture" which was a research topic in the field of architecture, Implementing that into Web design, generated a similar & new concept. Why to have a custom Web design for each group of users;as architects don't design a building for each group size and type that uses it? (Would be funny if they did) Like responsive architecture, Web design should automatically adjust. It shouldn't require custom-made solutions for each new category of devices of any resolution" Ethan Marcotte, A list Apart

Pantallas y resoluciones a resolver

El Responsive Desing trata de abarcar todos los tipos de tamaño de pantalla, eso quiere decir web, tablet y móvil.

Error al crear miniatura: Archivo más grande que 25 MP

Planteamiento del encargo

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.

Objetivos

  • Creación de un sitio responsive.
  • Presentar el texto Hoy me voy a ocupar de mi cólera de Godofredo Iommi en esta plataforma responsive.

Usuarios

  • Personas interesadas en conocer las reflexiones de Godofredo Iommi.
  • Alumnos y docentes de la Escuela de Arquitectura y Diseño de la PUCV.


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 del 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]

Principalmente es importante la conservación de dichas imagenes según sus características fundamentales dentro del texto. Todo con el proposito de que se conserve lo relevante del original.

Desarrollo

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.


Hoymevoyaocupardemicolera mapsite gd franwevar.png


Decisiones

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


Análisis 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 horizontal


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.

Wireframes baja intensidad

Web


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

Home móvil horizontal
Home móvil vertical
horizontal


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


Segunda parte: Wireframes alta intensidad

Definición de propuesta

Para esta nueva propuesta se tuvo que redefinir la forma de navegar por el texto, es decir, el ritmo de lectura. Esto implico distintas problemáticas independientes de cada dispositivo, ya que mientras los de mayor tamaño permiten ciertas acciones y ritmos, los más pequeños requieren de otros. Si bien en la primera propuesta la navegación era horizontal ,para todos los dispositivos, lo que ayudaba considerablemente a respetar la sintaxis del texto, a su vez se podría volver este modo de leer podría volverse una dificultad técnica a la hora de la programación del sitio para los distintos dispositivos.

Navegación y Capitulación

De esta manera, se planteo una navegación vertical limitada. Esto quiere decir, en el caso de los dispositivos de mayor tamaño (computadores - ipad) que la "página" que se ve en la caja o ventana no baja a través del uso de un scroll bar o la herramienta endless scrolling, si no que el usuario al cliquear o tocar el botón en la interfaz, esta moverá la página hasta un cierto punto o altura. Esto cabe decir sólo sucederá cuando el usuario esta en la sección "Lectura". Este tipo de navegación permite mantener un ritmo, un pasar de página vertical. Si se quiere poner más simple este punto, se puede recurrir a un simple ejemplo cotidiano de lectura en el internet; suele suceder que al leer, extensos textos en sitios web, no existe la posibilidad de leer de otra manera que no sea la vertical, no obstante, esta tiende cansar y sobre todo a desorientar al usuario/lector.

Ahora bien si la sintaxis puede conservarse de cierto modo dentro de las pantallas de mayor tamaño con navegación vertical, por otro lado, en los dispositivos pequeños, esta se pierde. Al tratarse, de pantallas mucho más pequeñas, se torna más difícil manejar los márgenes, mantener los blancos o conservar la posición de las imágenes. Para que el texto conserve un cierto ritmo de lectura y no se vuelva una "sábana" de contenidos, se determina un sistema de partición del texto en 5 capítulos, esto dado por las temáticas que va tocando a través del relato. Cabe mencionar, que esta capitulación también se encuentra en los dispositivos de mayor tamaño, ya que la propuesta consiste en que el usuario pueda acceder al texto de forma completa o continua, es decir, leer el texto por completo; y una lectura capitulada, que permite que el lector se dirija a un determinada parte del texto.

Nota: Los nombres de los capítulos no son los definitivos, así como también los menús llevarían etiquetas alt con el nombre y el título.

Mapa de Navegación

Para el esta nueva propuesta se replanteo el mapa de navegación puesto que el anterior no se adaptaba a la forma de leer que se deseaba para el texto.

ColeraMAPA SITIO 2.png

Dispositivos a comparar

  • MacBook Pro 15": 1440 x 990
  • Ipad lectura horizontal: 1024 x 768
  • Ipad lectura horizontal: 768 x 1024
  • Smartphone #1: 320 X 480
  • Smartphone #2: 240 X 320
Secciones del Sitio
  • HOME

  • PLANTILLAS DE LECTURA
    1. Plantilla A
    1. Plantilla B
    1. Plantilla B2
    1. Plantilla C
    1. Plantilla D

  • SOBRE EL TEXTO

  • RESULTADOS Y BARRA DE BÚSQUEDA

Despliegues de menús
  • Despliegue de "Textos anexos"

Nota: Grupos Hermanos se cambio a Textos anexos, pero por error no se cambio en todos los wireframes.

  • Despliegue de menú de capítulos y botones de navegación

Para algunos dispositivos dadas sus capacidades de uso se han implementando algunos elementos como botones que sólo aparecen al tocar la pantalla, por ejemplo.

  • 1. Macbook

En este caso, al tratarse de un dispositivo no táctil, y que se interactúa mediante un puntero o mouse, el contenido está "enmarcado" entre dos elementos (inferior y superior) que poseen la herramienta para poder moverse por el texto. Este "marco" viene a reemplazar el scroll bar, pues como ya se planteo antes, no sirve para los requerimientos de la propuesta. Así mismo, el elemento de navegación posee dos comportamientos; el primero, cuando se encuentra dentro de la lectura. En este escenario, el elemento no funcionara como una barra de scroll, sino al contrario, cuando el usuario cliqueé la página se moverá con el "limite" que se explico anteriormente. Por último, en cualquier otra sección, se comportará como una barra de scroll pero sin perder su apariencia.


En el caso del ipad, dado el usuario interactúa con él mediante gestos de forma directa sobre la pantalla, se uso esto a favor, dado que al disminuir el tamaño del dispositivo, algunos elementos -como el marco de navegación descrito anteriormente- se superpone sobre el texto e imágenes. Por cual, se planteo como solución que el elemento de navegación solo apareciese cuando el usuario hiciera algún gesto en la pantalla.

  • 2. Ipad (H)


  • 3. Ipad (V)


  • Márgenes Verticales

La grilla esta basada en franjas de 30px x 30px, por lo que cada franja representara 30px.

Las líneas rojas corresponden a los márgenes establecidos para los contenidos.

  • Anchos de Párrafo (px)

móvil

La resolución de pantalla a analizar es de 320x480 px. Tamaño de la mayoría de pantallas de smartphones tiene este tipo de resolución.


Tamaño 320x480 px
  • Home

Homeiphone.png

  • Despliegue del menú
  • Lectura

Capitulo uno activadomedidas.png


Cabe destacar que el scroll aparece solamente al tacto o interacción con la pantalla, permitiendo indicar donde en la lectura se encuentra el usuario.

  • Despliegue de resultados

Una de las importancias de y quiebres en el móvil con respecto al web o tablet, es que en el caso de los resultados de búsquedas estas están dispuestas en barras

La barras de resultados tienen una altura máxima de 74px y un alto mínimo de 62 px.


Sobre los puntos de quiebre

Los puntos de quiebre de este sitio dentro de los dispositivos de este tamaño son: los márgenes (verticales), los anchos de párrafo, algunos aspectos del menú como el despliegue o la compresión en el tamaño de los botones.

Cambios de Fuentes y cuerpos de texto
  • Título Portada H1 (px)
    1. MacBook Pro: 48 px
    2. Ipad (H): 36 px
    3. Ipad (V): 32 px
    4. Móvil: 24px
  • Títulos (px)
    1. MacBook Pro: 22 px
    2. Ipad (H): 18 px
    3. Ipad (V): 18 px
    4. Móvil: 14px
  • Anchos de Párrafo (px)
    1. MacBook Pro: 660 px
    2. Ipad (H): 620 px
    3. Ipad (V): 590 px
    4. Móvil: 260px
  • Cuerpo de texto (px)
    1. MacBook Pro: 16 px / 22 px (interlineado)
    2. Ipad (H): 16 px / 22 px (interlineado)
    3. Ipad (V): 16 px/ 22 px (interlineado)
    4. Móvil: 12px/