Grupo 1: "Carta del Errante"

De Casiopea



TítuloProyecto Grupo 1: "Carta del Errante"
Tipo de ProyectoProyecto de Taller
Período2013-2013
AsignaturaGráfica Digital
Del CursoGráfica Digital 2013
CarrerasDiseño Gráfico
Alumno(s)Carlos Chávez, Juan Antonio Godoy, Idar González
ProfesorKatherine Exss


Antecedentes de proyecto

Antecedentes del texto

El texto destinado a la edición de un sitio web Responsive corresponde a la 1a edición de la Carta del Errante publicada como Memoria de título en el año 1976. El autor del texto, Godofredo Iommi, versa en relación al tópico de "Poesía y realidad", como eje central de la lectura. La edición está subtitulada en 9 diferentes capítulos con sus respectivas notas. Está disponible en la biblioteca Constel y en los archivos de la e[ad] PUCV. Disponible su lectura aquí: http://wiki.ead.pucv.cl/images/c/c4/POE_1963_Carta_Errante.pdf":

Ficha técnica

La portada y la ficha técnica forman parte de un documento común presente en Biblioteca Con§tel. En ella se presentan los datos específicos de la edición más una nota como fragmento de un "acto poético". La edición en formato original se encuentra en la sala de Biblioteca e[ad] PUCV. También existe una primera versión en Francés en la Revista Ailleurs, nº 1, París 1963, con el título "Lettre de l'Errant".

Errante portada web.jpg

Imágenes

El proyecto, además de contar con un texto dividido en capítulos, incorpora una serie de imágenes que hacen referencia a los dibujos realizados en el acto poético del día 30 de octubre de 1976. Los dibujos fueron hechos por José Balcells y Claudio Girola. El croquis del lugar del acto y de la obra fue realizado por José Vial A.

Estudio Responsive

Introducción

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.

Técnicas de trabajo

  1. Para diseñar una plantilla se hace uso de grillas de diagramación. Esto con el fin de reestructurar el contenido en sus diferentes formatos de pantalla. Las grillas poseen "break-points" para generar los cambios más puntuales con la medida del formato requerido. Los otros puntos de cambio son efecto del porcentaje asignado a cada elemento del sitio. Entonces es más aconsejable, en cuanto a Responsive, trabajar cada cosa con porcentajes referentes al primer diseño realizado.
  2. Es necesario tener en cuenta lo que está ocurriendo en el mercado con respecto a los escenarios digitales de uso. Finalmente el diseñador está enfocado en el usuario, se adapta a él, y bajo esta premisa las empresas como Apple y su tecnología son referentes para el diseño universal de hoy en día.
  3. Una de las ventajas de trabajar con responsive es el abarato de costos. Ya no es necesario diseñar un portal para cada formato. Por lo tanto, las actualizaciones en el documento original se verá reflejado en todos los navegadores. Los media Queries son necesarios para distinguir cada Break-point que reestrcturará el sitio.


Responsive-web-design.png
Media Queries

Los Media Queries son una forma de entregar diferentes estilos para diferentes dispositivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo media, que controla como se aplican los estilos.

Los Media Queries tienen soporte para Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+,; así también en los Smartphones más modernos y otros dispositivos móviles. Sin embargo, versiones viejas de IE no soporten los Media Queries. Está sólo disponible en su versión 9.

Media queries3.png

Aunque media queries dispone de muchas propiedades diferentes, básicamente viene con cinco:

  1. Aspect-ratio: Observar las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo.
  2. Width y height: Observar las dimensiones del área de visualización. Éstas pueden ser expresadas en valores mínimos y máximos.
  3. Orientation: Revisar si el Lay-out es panorámico (el ancho es mayor que el alto) o vertical (el alto es mayor que el ancho). Esto permite ajustar los diseños para dispositivos con propiedades de giro de la pantalla como el iPhone, otros smartphones y los tablets.
  4. Resolution: Revisar la densidad de los píxeles en el dispositivo de salida. Esto es especialmente útil cuando queremos aprovecharnos de las ventajas de los dispositivos que tiene una resolución mayor a 72 dpi.
  5. Color, Color-index y monochrome: Encontrar el número de color o bits por color. Esto nos permite crear diseños específicos para dispositivos monocromáticos.

Mapa de Contenidos

Mapa de contenidos2.jpg

El mapa de contenidos contiene los siguientes elementos de navegación:

  • Carta del Errante: texto e imágenes del documento original
  • Acerca del Texto: sección que contiene información específica del documento, ya sean el año de edición, el autor, etc.
  • Imágenes: sección de imágenes presentes en el documento original. Las imágenes se vinculan a su vez a cada uno de los capítulos del documento.
  • Índice de Autores: lista de autores mencionados en el documento. Éstos se vinculan a las notas presentes en el documento original.
  • Enlaces: sección que vincula el sitio al resto de los sitios web que incluyen los demás textos.

Wireframes

Propuesta 1

La diagramación del sitio para la pantalla digital considera la utilización de un menú principal superior, el cual contiene en el extremo izquierdo el botón de menú y en el derecho el botón de búsqueda. El menú principal despliega las siguientes opciones rotuladas:

  1. Carta del Errante
  2. Acerca del Texto
  3. Imágenes
  4. Índice de Autores
  5. Enlaces

Al ingresar a la sección "Carta del Errante", aparece un nuevo botón que despliega un menú-índice, el cual contiene el detalle de los capítulos del texto. Los capítulos son los siguientes:

  1. Poesía y Realidad.
  2. La esperanza del Surrealismo.
  3. Lo propio de la poesía.
  4. El poeta y la poesía.
  5. La poesía es fiesta.
  6. El poeta y el mundo.
  7. La rebelión.
  8. Poesía y escritura.
  9. Poesía y poema.
  10. Notas.

Móvil

Se considera una serie de propuestas de lectura que muestran la interacción desde la home hasta el contenido del texto. Además se muestran algunos ejemplos entre las diferentes páginas del sitio (carta del errante, acerca del autor, índice de autores, etc).

  1. Primera propuesta de la serie: El contenido se piensa “encapsulado” en la barra de menú principal. De modo que el rótulo "Carta del Errante" despliega una ventana con todos sus capítulos en el interior. Y así el contenido de los demás rótulos se muestra de la misma forma.
  2. Segunda propuesta de la serie: Se piensan los rótulos del menú principal acoplados en la parte superior de la pantalla. En la URL de “Carta”, por ejemplo, cada capítulo se despliega en el índice de uno en uno, como ventana particular. Esta forma fue planteada para suplir la anterior, que demandaba un Scroll demasiado extenso.
  3. Tercera propuesta de la serie: La barra de menú vuelve a disponerse de manera vertical. Se desecha la idea de que cada contenido esté encapsulado en una ventana particular. Los rótulos entonces redirigen a una URL diferente. El índice de capítulos es planteado como una barra de navegación lateral, ubicada al costado derecho y ocupando ¾ partes del ancho de la pantalla.


Páginas Principales

El formato en cada ejemplo de propuesta se muestra en posición de lectura vertical y horizontal, respectivamente.

  1. Barra de búsqueda: Ejemplo de frontis de la Home con Barra de búsqueda desplegable (el menú principal se ubica en el extremo izquierdo de la pantalla).
  2. Acerca del texto: Presenta de manera sencilla el contenido anexo a la Carta, dispuesta con cada dato específico en lectura vertical.
  3. Índice de autores: (Bibliografía en el documento original), proporciona la lista de cada autor citado en la Carta en orden alfabético y especificado en el número de nota. Su lectura se dispone de manera similar con la URL: “Acerca del texto”.
  4. Sección imágenes: Permite observar continuamente el trabajo visual integrado al documento original. Cada imagen equivale a un capítulo específico. Por eso cada imagen se vincula a los diferentes capítulos presentes en el documento
  5. Sección enlaces: contempla la vinculación del sitio propuesto con los otros textos de estudio. Así se logra la integración total de las ediciones con su respectivo sitio web.


Tablet

Propuestas Iniciales

La primera propuesta considera la utilización de un menú horizontal desplegable. Ésto permite el acceso directo a cada uno de los capítulos del texto. Existe además un modo de lectura a través de un horizonte de capítulos ubicado al comienzo y al final del cuerpo de texto. Ésto permite avanzar en la lectura a través de un botón "siguiente" y seleccionando el número del capítulo específico que se desea leer.

El formato Tablet en modo Portrait o vertical, adopta en gran parte el estilo del móvil, mientras que la versión Landscape u horizontal, se acerca a cómo se visualiza en un computador.

Las grillas de todos los elementos se basan en tercios, donde imágenes y columnas de texto pueden ocupar desde 1 a 3 porciones, dando la totalidad del contenido.

Home y Menú de Navegación

El ícono de menú despegable se mantiene en modo Portrait sin embargo se opta por la visualización completa del buscador, eliminando una variación de menú al interactuar con el ícono de búsqueda (lupa) que está presente en la versión móvil.

En cuanto al modo Landscape el menú de navegación adopta modalidad de computador, por lo tanto deja de estar oculto bajo el íconos de 3 líneas horizontales y se dispone a lo largo de la pantalla, permitiendo una navegación instantánea entre las categoría del sitio sin necesidades llamar un despliegue.

Lectura del texto

El menú que se despliega desde la izquierda hacia la derecha permite al usuario navegar por los capítulos del texto libremente. Esto da una navegación a estilo de ancla, donde se guía al usuario según el capítulo ya que el texto está contínuo. Esta vez el título de cada capítulo del texto se muestra en su totalidad.

En modo Landscape el menú despegable de los capítulos pasa a ser un elemento fijo en la pantalla.

Acerca del texto

Los datos objetivos de la edición original aparecen acá junto con notas de la edición. Nuevamente se mantienen las proporciones.

Notebook

Propuesta 1: "Home" y "Carta del errante"

Propuesta 2 (en base a Tablet)

Se realiza una propuesta para Pantalla PC en base a la diagramación de Tablet. No se observan grandes diferencias entre ellos exceptuando la disminución de márgenes laterales.

Propuesta 2

Introducción

En esta propuesta se establece el orden jerárquico de lo elementos en relación a sus medidas concretas. El refinamiento de los anchos y largos y las proporciones de la interacción en cada Layout de página, son definidos bajo un criterio de experiencia y Benchmarck. Las medidas ejemplares de botones en los diferentes formatos fueron estudiadas en diferentes sitios de la red. Así también los pixeles de los elementos tipográficos y la lectura con presencia extensiva de Scroll. A continuación se muestran las medidas de cada formato y URL que conforman el diseño del sitio.

Móvil

Propuesta 3

Incorporación de Grilla Responsive

Para realizar una segunda propuesta se incorpora la utilización de una grilla, con el objetivo de entablar una relación métrica entre columnas de diagramación para los diferentes formatos digitales donde será navegable el sitio. Con la ayuda de http://gridpak.com/ se diseña una grilla invisible para estructurar el contenido. Por lo tanto, se designa cierta cantidad de columnas para cada formato. En este caso resultaron las siguientes:

  • Móvil: 4 columnas (para un formato de 320 x 480px).
  • Tablet: 7 columnas (para un formato de 768 x 1024px).
  • Desktop: 12 columnas (para un formato de 1366 x 768px).

Una vez realizado este ejercicio, luego será más fácil proyectar los "puntos de quiebre" donde, en la práctica, establecerán el parámetro de resolución en que se salte de un formato a otro.

Móvil

La grilla en dispositivos móviles consta de los siguientes parámetros:

  • 4 columnas de 60px.
  • Padding de 10px.
  • Gutter de 15px.

Las cuatro columnas se ubican flotantes en el centro de la pantalla. Los menús superiores permiten la navegación a través de los contenidos del sitio.

Los menús se dividen en dos:

  • El menú principal o de navegación estándar: Contiene los contenidos generales de navegación del sitio web
  • El menú secundario, o de referencia para cada capítulo del texto: Utiliza la simbología de un libro y permite desplegar la lista de capítulos del texto.

Tablet

Al igual que en móvil, el formato tablet utiliza las mismas columnas (conservando sus anchos, padding y gutter) sin embargo éstas aumentan a 7. Paralelamente el menú general se ubica en el horizonte bajo el header desapareciendo así el ícono que anteriormente en el formato móvil lo desplegaba.

Notebook

El formato Notebook utiliza 12 columnas idénticas a los formatos anteriores. El menú de capítulos se ubica al lado izquierdo de la pantalla permitiendo así la navegación a través de los contenidos específicos del texto.

Interfaz

Primera Propuesta

Tipografía

1. Se utiliza la tipografía Magra para el menú principal y menú lateral de capítulos. Consiste de una tipografía Sans Serif y destaca por su claridad y facilidad de lectura.

Magra.JPG

2. Para los títulos y subtítulos de texto se utiliza la tipografía Open Sans, la cual debido a su multiplicidad de estilos permite construir las diferentes jerarquías tipográficas.


Open sans Variants.png

3. Además se utiliza la tipografía Merriweather, la cual contiene 8 variaciones distintas en su grosor. Es una tipografía con Serif y se utiliza para el cuerpo de texto principal.


Merriweather.jpg

Paleta de Colores

Se utilizan un color de fondo al cual se le superponen los elementos que contienen las cajas de texto y los menús. Éstos últimos se caracterizan por poseer un tono muy cercano al negro, sin embargo éste tiene un leve tono rojizo lo que permite un mejor encuentro entre éste y el fondo ahuesado.

Para títulos se utiliza el color verde y para las notas el naranjo, logrando un realce de éstas al contrastar cromáticamente con el texto.

Paleta 2-01.jpg

Texturizado

Se construye un texturizado que permite otorgar matices cromáticos al fondo. Se construye en base al color #F4F2E7.

Pattern-i1kl.png

Ejemplos de diagramación

Propuesta de Interfaz para las secciones "Leer", "Acerca del Texto" y "Galería de Imágenes".

  • Se consideran una curvicidad en los fondos lo cual otorga suavidad al diseño.
  • Se propone la utilización de un menú lateral para cada una de las secciones principales (Carta, Acerca del Texto, Indice de Autores).
  • La galería de imágenes propone una navegación a modo de Slider.


Segunda Propuesta

Introducción

Entre los cambios realizados en esta propuesta se consideran los siguientes:

  • Se reduce la suavización de los ángulos en los fondos
  • Se utilizan tipografías más delgadas (Merriweather Light) para el cuerpo de texto.
  • El menú principal experimenta cambios en la diagramación del formato Tablet, se libera un espacio de columna por lado, pasando de 7 a 9 columnas de contenido, para así permitir el despliegue del menú de capítulos.
  • Se reemplaza el ícono del menú de capítulos por una flecha que induzca el despliegue. (el ícono de un libro abierto no indicaba el caracter desplegable del menú)
  • Se eliminan los menús laterales para las secciones Acerca del texto, imágenes e índice de autores debido a la poca cantidad de contenidos.
  • En el formato table se agregan dos columnas laterales que ensanchan el formato para dar cabida al menú de capítulos.

Elementos de variación gráfica

Header

1. Móvil: En el formato de pantalla móvil se pueden observar tres diferentes estados de interacción. El estado primero da cuenta del Header en su interacción neutra. El estado segundo despliega un menú vertical con las diferentes secciones del contenido en el sitio. Dependiendo del rótulo escogido, la interacción de la pantalla se posará en el área de la información contenida en él. El estado tercero despliega un menú con el índice del texto "Carta del herrante". Cada capítulo, al igual que en el estado anterior, redirecciona la visualización de la pantalla hacia el capítulo requerido por el usuario.

2. Tablet: En el formato-pantalla de tabletas pueden diferenciarse dos estados de interacción. El primero es el estado neutro, en donde ahora -y a diferencia del formato móvil- se muestra el contenido del menú vertical en su sentido horizontal. Los rótulos del contenido se visualizan inmediatamente en el primer estado. El estado segundo, al igual que en los móviles, se despliega el índice de capítulos del texto.

3. Desktop: El formato Desktop se restringe a un primero y sólo estado, puesto que el índice de autores se presenta ahora en una sección lateral del Texto continuo. El Header sólo muestra los rótulos del contenido del sitio.

Texto continuo

1. Móvil: El texto continuo del formato móvil muestra el contenido casi al ancho entero de la pantalla. El texto se contrasta por un fondo blanco en pro de la lectura. La extensión, al ser más estrecha la pantalla, es mayor en su lectura vertical.

2. Tablet: En el formato de las tabletas se observa un cambio en particular; aparece un fondo en la sección del texto que corresponde al contenido de las notas. Esta decisión se fundamenta en la voluntad de distinguir los diferentes elementos de información que seccionan el contenido, establecer una mayor jerarquía. El texto se despliega en el ancho y su lectura es más detenida.

3. Desktop: En el formato de pantalla Desktop existe otro cambio particular. Como se observó en el caso de los móviles, el índice de autores se ubica en la parte lateral del texto.

Footer

1. Móvil: El footer en el formato móvil se muestra en su lectura vertical; cada rótulo da cuenta de los demás textos enlazados en el sitio.

2. Tablet: El footer en las tabletas no difiere en su visualización con respecto al formato móvil.

3. Desktop: En el formato desktop la pantalla es lo suficientemente ancha para desplegar la lectura en sentido horizontal.

Extensión de textos en su completitud

Se conserva la forma de lectura propuesta en los wireframes anteriores, donde los elementos se disponen de forma lineal en formato Móvil, hasta la separación en columnas verticales del texto principal y el menú lateral (PC).

Móvil

Tablet

Notebook

Tercera Propuesta

La nueva propuesta propone cambios más significativos en la diagramación de los formatos tablet y PC. Ésto debido principalmente a la de-construcción realizada al menú de capítulos, el cual utiliza números que permiten otorgan un sentido simbólico a cada capítulo.


1. Móvil: Se propone un sentido de lectura vertical, donde el header, el menú, el contenido, las notas, imágenes y footer se ubican de manera lineal en el espacio. El menú de capítulos se ubica horizontalmente donde cada número corresponde a un capítulo específico. El menú principal se encuentra oculto y puede ser desplegado al apretar el botón ubicado en la esquina superior izquierda. El footer se ubica en la parte inferior, con los enlaces enlistados de manera vertical.

2. Tablet: En formato Tablet aparecen los nombres de cada capítulo. Además el menú principal se dispone horizontalmente sobre el header, desapareciendo así el ícono que, en formato tablet, era utilizado para desplegarlo. El footer, por otro lado, se encuentra dispuesto en dos columnas de texto (en móvil se utilizaba solamente una)

3. PC: El menú principal se conserva en el header, mientras que el menú de capítulos se dispone verticalmente en el lado izquierdo de la pantalla. Éste se encuentra fijo de manera que el lector pueda navegar a través del documento con facilidad. Las notas se ubican en el lado derecho de la pantalla, permitiendo una "lectura en paralelo". El footer, por otro lado, se dispone en 3 columnas.


Construcción de Identidad

Se reconoce la ausencia de identidad del sitio al no rescatar elementos gráficos propios del documento y plasmarlo en el diseño. Para ello se decide trabajar con las imágenes originales de la "Carta del Errante", y así vincular visualmente el diseño de interfaz con el contenido del documento.

Para ello se decide trabajar los fondos en el Header y posicionar fragmentos de las imágenes del documento en los costados laterales de la página.

Fondo header-03.jpg

Finalmente, debido al estorbo en la visualización del sitio a causa de la gráfica en los costados del Header, se opta por ubicar la imagen en la parte superior. De esta manera, la lectura no se interrumpe en ningún estado ni resolución de la pantalla.

Fondopcc2.jpg

Variaciones Tipográficas

A continuación se muestran los cambios tipográficos experimentados en la diagramación según formato:

Estudio tipografico carta del errante-02.jpg


Debido a que la tipografía utilizada en el header en la primera propuesta (Abbeyline) no se encuentra disponible en servidores como GoogleFonts o Typekit, se decide reemplazar por la familia Petit Formal Script. Ésta otorga curvisidad y plasticidad al diseño del Header, donde mediante este contraste las palabras "Carta del Errante" aparecen con mayor intensidad.


Tipografia petit formal script.JPG


Header

El título principal ubicado en el header ("Carta del Errante: Godofredo Iommi") experimenta cambios en los 3 estados de pantalla. En móvil se utiliza tipografía Petit Formal Script con un tamaño de 18px. En móvil ésta utiliza tamaño 35px, abarcando ahora la totalidad del header. En PC, en cambio, el Título se ubica en el lado izquierdo de la pantalla, utilizando una tipografía de tamaño 25.

Tipografías según formato de pantalla para los textos ubicados en el header:

Móvil

  • Tit. 1: "Carta del Errante": Petit Formal Script 18px


Tablet

  • Tit. 1: "Carta del Errante": Petit Formal Script, Regular, 35px


Pantalla PC

  • Tit. 1: "Carta del Errante": Petit Formal Script, Regular, 25px
  • Subtit. 1: "Godofredo Iommi": Merriweather, Light, 17px

Texto

Móvil:

  • Titulo: Merriweather, Light, 20px
  • Subtítulo: Merriweather, Light, 13px
  • Cuerpo de Texto: Merriweather, Bold, 13px
  • Notas: Merriweather, Light- Italic, 13px


Tablet

  • Tit. 1: Merriweather, Light, 28px
  • Subtit. 1: Merriweather, Light, 25px
  • Cuerpo de Texto: Merriweather, Light, 13px
  • Notas: Merriweather, Light, 13px


Pantalla PC

  • Tit. 1: Se conserva
  • Subtit. 1: Merriweather, Light, 20px
  • Cuerpo de Texto Se conserva
  • Notas Se conservan

Footer

Móvil:

  • Titulo: Merriweather, Bold, 15px
  • Subtítulo Merriweather, Light, 15px

Tablet

  • Titulo 1: Se conserva
  • Subtitulo 1: Se conserva

Pantalla PC

  • Titulo 1: Se conservan
  • Subtitulo 1: Se conserva

Mapa de Divs

Notebook

MapaDivs.jpg

Avance HTML / CSS / Javascript

https://dl.dropboxusercontent.com/u/9815315/Html/indexfinal.html

Actualmente se formatea con la interfaz tipo Propuesta 1, con algunas interacciones, como anclas y que el menú pase a ser una franja fija después de realizar un scroll. Aún así, el código funciona de manera adecuada en los navegadores Firefox y Safari.

Entrega Final

Link Externo a "Carta del Errante": https://dl.dropboxusercontent.com/u/51139182/Entrega%20Fina%20Carta%20del%20Errantel/indexfinal.html