La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

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.

introducción
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

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.

Primera propuesta de la serie
Segunda propuesta de la serie
Tercera propuesta de la serie

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.

Barra de búsqueda
Acerca del texto
Índice de autores
Sección imágenes
Sección enlaces
Lectura de Contenido

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.

Propuesta Inicial página de Contenido
Propuesta Inicial de Home
Cambios experimentados del formato Portrait a Landscape

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.

Acerca del Texto
Indice de Autores: Se propone un cambio de dos a tres columnas.
Galería de Imágenes

Notebook

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

Home]]
Visualización extensiva de "Carta"

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.

Home Pantalla PC
Home Pantsalla PC menú desplegado
Sección Galería de Imágenes