Grupo 1: "Carta del Errante"
Título | Proyecto Grupo 1: "Carta del Errante" |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Período | 2013-2013 |
Asignatura | Gráfica Digital, |
Del Curso | Gráfica Digital 2013, |
Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Alumno(s) | Carlos Chávez, Juan Antonio Godoy, Idar González |
Profesor | Katherine 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".
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
- 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.
- 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.
- 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.
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.
Aunque media queries dispone de muchas propiedades diferentes, básicamente viene con cinco:
- Aspect-ratio: Observar las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo.
- Width y height: Observar las dimensiones del área de visualización. Éstas pueden ser expresadas en valores mínimos y máximos.
- 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.
- 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.
- 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
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:
- Carta del Errante
- Acerca del Texto
- Imágenes
- Índice de Autores
- 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:
- Poesía y Realidad.
- La esperanza del Surrealismo.
- Lo propio de la poesía.
- El poeta y la poesía.
- La poesía es fiesta.
- El poeta y el mundo.
- La rebelión.
- Poesía y escritura.
- Poesía y poema.
- 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).
- 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.
- 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.
- 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.
- 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).
- Acerca del texto: Presenta de manera sencilla el contenido anexo a la Carta, dispuesta con cada dato específico en lectura vertical.
- Í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”.
- 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
- 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.
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
- Grilla Móvil.fw.png
Grilla Móvil
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.
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.
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.
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.
Texturizado
Se construye un texturizado que permite otorgar matices cromáticos al fondo. Se construye en base al color #F4F2E7.
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.
- Texto continuo móvil.jpg
Texto continuo Móvil
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.
- Footer Móvil.jpg
Footer Móvil
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.
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.
Variaciones Tipográficas
A continuación se muestran los cambios tipográficos experimentados en la diagramación según formato:
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.
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
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
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