Título	Grupo 7: "Carta del Errante"
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	Godofredo Iommi, poesía
Período	2013-2013
Asignatura	Gráfica Digital 2013,
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)	Carolina Nuñez, Bernardo Silva
Profesor	Katherine Exss

Propuestas

En este proyecto se tomo el texto "Carta del Errante" el cual contiene 9 capítulos de similares dimensiones el cual posee texto, imagen y notas.

La jerarquía de la información de dispuso de la siguiente manera:

Capítulos
Acerca de
Notas
Indice de Autores
Enlaces

Ya con esto, se puede trabajar en la creación de wireframes para simular una diagramación con diseño responsivo, se decide trabajar en 3 dimensiones concretas

MÓVIL

Partiendo de un tamaño minino, se trabaja en un espacio de 240 x 320 pixeles. Los Smartphone ofrecen al igual que el tablet, ver el contenido de manera horizontal y vertical, por ello hay que diagramar el contenido en sus dos dimensiones.

Horizontal (320 x 240)

Inicio

Se inicia directamente en el texto, ya que eso es lo mas importante para quien busca el archivo.

Menu

En la parte superior se desprende un menú el cual ofrece navegar por los capítulos, notas, indice de autores y enlaces a otros textos.

Menú desplegado

De esta manera el usuario puede ir directamente al contenido deseado.

Visualización extensa, capitulo de texto

El texto cuenta con notas bastante largas, por esta razón se tomo la decisión de ubicarlas en otra sección, estas funcionan como vínculos lo que permite un ir y volver de las notas al texto y viceversa.

Visualización extensa, sección de notas

La sección "acerca de" ofrece las características del texto y contiene dos notas de edición, la original del texto y la realizada por la biblioteca Constel

Visualización extensa, sección de información

Muchos son los autores nombrados en el texto y se decide crear una sección para este caso.

Visualización extensa, sección de autores

Para un ecosistema, el texto se enlaza a otros títulos publicados por la escuela.

Visualización sección enlaces

Versión Vertical (240 x 320)

Visualización, sección texto
Visualización, sección menu
Visualización, sección texto
Visualización extensa, capitulo de texto
Visualización extensa, sección de notas
Visualización extensa, sección de información
Visualización extensa, sección de autores
Visualización sección enlaces

TABLET

Siguiendo el mismo criterio de jerarquía, se diseña el sitio para Tablet, el tamaño elegido es de 1024 x 600 px ya que en el mercado existen tablets con mayor tamaño lo que implica que no infiere la resolución y el diseño responsivo respecto al ordenador o un notebook.

Horizontal (1024 x 600)

Visualización, sección texto
Visualización, sección menú
Visualización, capitulo de texto
Visualización, sección de notas
Visualización extensa, sección de información (acerca de)
Visualización, sección de autores
Visualización sección enlaces

Teniendo un ancho de 1024 pixeles, se puede establecer una media para la visualización en ordenador o notebook ya que ese valor es mas común entre los dipositivos, siendo no tan distante entre 1280 y 1366 pixeles de ancho.

Dependiendo el largo que posea un dispositivo, permite mostrar con mayor plenitud el sitio.

Vertical (600 x 1024)

Visualización, sección texto
Visualización, sección menú
Visualización, sección de notas
Visualización, sección de información (acerca de)
Visualización, sección de autores
Visualización sección enlaces

Medición en pixeles

Móvil Horizontal (320 x 240)

Visualización, sección texto
Visualización, sección menú
Visualización, sección menú 2
Visualización, imagen
Visualización, sección de notas

Móvil Vertical (240 x 320)

Visualización, sección texto
Visualización, sección menú
Visualización, sección menú 2
Visualización, imagen
Visualización, sección de notas

La diagramación se pensó para que sea lo mas regular posible, esta al estar en vertical o horizontal, lo que se modifica es el ancho de las dimensiones, no así el largo.

la Barra de Navegación cambia en su tamaño

Horizontal

320 x 21 px

Vertical

240 x 21 px

Sin embargo, el menú despegable se mantiene para ambas situaciones

Primer Menú

128 x 97 px (horizontal/vertical)

Segundo Menú

194 x 168 px(horizontal/vertical)

El Tamaño de la tipografía se mantiene pero cambia el ancho de la caja de texto

Horizontal

285px de ancho

Vertical

225 px de ancho. las imágene se adapta al ancho del tamaño 303 x 218 px en horizontal 220 x 189 px en vertical

Tablet Horizontal (1024 X 600)

Visualización, sección texto
Visualización, imagen
Visualización, sección menú
Visualización, sección acerca de
Visualización, sección autores

Tablet Vertical (600 x 1024)

Visualización, sección texto
Visualización, imagen
Visualización, sección menú
Visualización, sección acerca de

Mapa de Divs

Los Mapas de Divs, son cajas que se utilizan para construir y ordenar el contenido del sitio web, serían como las cajas de párrafo en Indesign, así como a estas se les puede dar valores específicos para los elementos que estén dentro de de ella, estos mismo a su vez pueden tener sus propías características dentro del Div, a estos se les da el nombre de Clase.

Propuesta 1

Maqueta de la Home para sitio web.

https://dl.dropboxusercontent.com/u/51056983/Carta%20del%20Errante/Carta%20del%20Errante.htm

Propuesta 2
Estudio basado en el ejemplo otorgado en la clase. Corrección:

Menú despegable

https://dl.dropboxusercontent.com/u/51056983/carta/carta/index.html

Propuesta 3
Corrección:

Menú despegable vinculado

https://dl.dropboxusercontent.com/u/51056983/Carta%20del%20Errante%2C%20correcci%C3%B3n/index2.html

Propuesta 3.1

Propiedad Responsive al Menú
Estilo de Tipografía

https://dl.dropboxusercontent.com/u/51056983/Carta%20del%20Errante%2C%20correcci%C3%B3n4/index2.html

Propuesta 4 avance

Cambio por menú de anclas

https://dl.dropboxusercontent.com/u/8440688/Carpeta%20del%20Errante%2C%20correcci%C3%B3n%205/index3.html

Propuesta final de Css https://dl.dropboxusercontent.com/u/51056983/Carpeta%20del%20Errante%2C%20pre%20final/index7.html

Propuesta Final Responsive

Decisiones Editoriales:
Al igual que la realización de un libro, la simpleza en la lectura debe ser precisa y sin perturbaciones. Al momento de desarrollar el sitio para el texto escogido “Carta del Errante” pensamos en mantener la forma del texto original de 43 páginas.

Se despliega en un comienzo con una Introducción junto a un dibujo. Posteriormente, con una totalidad de 9 capítulos, se recorre el texto con una muestra de sus dibujo al final de cada capítulo. 1 Dibujo por capítulo. Los textos presentan notas, las cuales están dispuestas en la pestaña Notas. La pestaña Acerca de, trata sobre las especificaciones técnicas del libro físico y su Autor.

El menú de navegación, presente en el header, se encuentra en todo momento y de manera que acompañe al texto y sea de rápido avance a alguna parte del cuerpo del texto u otra pestaña.

PALETA DE COLORES
La paleta de colores utilizada fue pensada para no provocar distracciones de colores fuertes, por lo tanto se utilizó blanco para el fondo, negro para las letras y un amarillo suave para simular un papel ahuesado, esto debido a que leer sobre blanco en una pantalla desgasta mas la experiencia de leer.

Tipografías Se utilizan 2 tipografías, Roboto y Open Sans, fuentes tipográficas del tipo sans-serif introducidas en el sistema operativo Android 4.0.

Open Sans, Roboto
Estas tipografías se puede encontrar en Google Fonts y pueden ser utilizadas sin medio de pago, basta con insertar el código en el css y html para poder ocuparlas.

Son utilizadas en sus variantes Regular y Light.
Roboto para los titulos y Open Sans para lectura

Roboto
Open Sans

Header La propuesta esta enfocada un menú estático y desprendible, de esta manera se puede llegar mas rápido a este. Para que no moleste visualmente, este requirió ser pequeño.

Interfaces Se simuló por medio del programa Fireworks(Adobe) la apariencia que tendría el sitio. El ancho de la caja para el texto no debía ser largo ya que el texto es de lectura.