Ver el código de «Proyecto de sitio responsive: "Segunda Carta sobre la Phalène"»

{{Proyecto
|Título=Grupo 5: "Segunda Carta sobre la Phalène"
|Tipo de Proyecto=Proyecto de Curso
|Palabras Clave=responsive design, web, gráfica digital, estudio, constel
|Año de Inicio=2013
|Año de Término=2013
|Carreras Relacionadas=Diseño Gráfico
|Asignaturas Relacionadas=Gráfica Digital, 
|Cursos Relacionados=Gráfica Digital 2013,
|Profesor=Katherine Exss,
|Alumnos=Karla Vargas, Gabriela Pérez,
}}
==Introducción==
===Acercamiento al término Responsive web design===

El desarrollo de nuevas tecnologías ha hecho necesario que se replanteen los procesos de producción de plataformas digitales pues, por lo general actualmente, no sólo se puede pensar en los computadores de escritorio, como único medio de lectura y disposición de contenidos digitales. El nuevo mercado de smartphones y tablets ha abierto un mundo de posibilidades de conexión para los usuarios. Para diseñadores y desarrolladores web, este proceso de adaptación puede resultar dificultoso, dado que las páginas que vayan a ser construidas deben funcionar adecuadamente desde cualquier lugar en que se vean. Aquí parte el trabajo del Responsive web design.


[[Archivo:Responsive-dispositivos.jpg|500px|thumb|center| Responsive aplicados a distintos dispositivos]]


''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. Esta técnica le permite al sitio web acomodarse fácilmente a la experiencia del usuario, teniendo en cuenta, en una primera instancia, la resolución del dispositivo desde el cual se esta visitando el sitio web y el tamaño y orientación que ésta requiera. Esto quiere decir que la plataforma debe adecuarse sin problema en un computador como en un iPhone y responder con la misma efectividad al visitante.

Este proceso podría eliminar la necesidad de un diseño diferente y generar una fase de desarrollo para cada nuevo dispositivo en el mercado o lo que se aproxima en cuanto a tecnologías.
Podemos decir entonces, que el Responsive Web Design representa el proceso de ''restauración y fluidez del diseño original''.

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

Ethan Marcotte, diseñador, publicó un artículo donde describe el tema en el portal ‘A List Apart’; allí resalta los tres aspectos más relevantes para elaborar exitosamente un sitio web con diseño adaptable, estos criterios son:
#El esquema debe ser flexible, para esto es necesario definir parámetros como el tamaño, el espacio y la alineación de la página para hacerla encajar en diferentes dispositivos.
#Las imágenes en sí mismas deben ser flexibles. Puede ser tedioso pero hay que hacer posible que el tamaño de la imagen sea proporcional al espacio que proporciona el dispositivo.
#Por último, el elemento que hace que la página realmente se adapte es el uso de Media Queries, lo que permite crear diferentes layouts, en base a un mismo código HTML.

===Pantallas y resoluciones===

*Computadoras de escritorio, PCs y tablets
**800 х 600 px
**1024 x 768 px (iPad) 
**1280 x 720 px
**1280 х 1024 px
**1600 х 900 px 

Como grupo se decide trabajar para el caso de computador de escritorio con la resolución de 1280 x 720 píxeles, así para Tablets se elige la resolución de iPad de 1024 x 768 píxeles. 

    [[Archivo:Desktop resolution1-01.png|400px]][[Archivo:Tablet resolution1-01-01.png|300px]]


*Los dispositivos móviles
**640 х 480 px 
**480 х 320 px (iPhone) 
**320 х 240 px (otros teléfonos inteligentes populares)

Para el caso de móviles se opta por la resolución tipo de iPhone de 480 x 320 píxeles.


                        [[Archivo:Movil resolution1-01.png|300px]]

===Grilla flexible===

Plantearse una forma inicial de trabajar en el sitio responsive, trae la utilización de una grilla o diagramación que se comporte de manera flexible en cualquier pantalla. Se recomienda para ello comenzar a trabajar ya no en una grilla basada en píxeles o ems, la idea es trabajar con porcentajes.

                      [[Archivo:Gridlayout 1.jpg|300px]]

La grilla flexible funciona correctamente para algunos tamaños de pantalla, pero cuando nos vamos a los extremos necesitamos cambiar la estructura. En esto nos ayudan los media queries. Por ejemplo, si tenemos una página con tres columnas (33% de ancho cada una) con texto e imágenes y la vemos en 1024 px (iPad horizontal), seguramente se verá correctamente en 768 px (iPad vertical); las columnas serán más estrechas pero el contenido se verá sin problemas. Si llevamos estas tres columnas a un iPhone (320 x 480 px) será muy difícil ver el contenido. Por medio de los media queries (CSS) podemos indicar que, en caso de que la pantalla sea menor que 480 px las columnas deberán estar al 100%, lo que hace que queden unas encima de otras. Las imágenes que antes ocupaban todo el ancho de esas columnas (el 100% de un 33%) ahora deberán ocupar el 100% del nuevo ancho de columna (100%).

==Estudio y planteamiento de proyecto responsive==

En torno al principio de Responsive Web Design, se estudiaran textos pertenecientes al catálogo de la Biblioteca Constel que cumplen con tener algunos de los siguientes elementos:

*Texto
*Títulos
*Subtítulos
*Párrafos (+ de un estilo)
*Imágenes (1 o +)
*Bajada de imagen
*Elementos de navegación

Respecto a los títulos abordados, se proponen los siguientes:

#Carta del Errante
#De la Utopía al Espejismo
#Hay que ser absolutamente moderno
#Hoy me voy a Ocupar de mi Cólera
#Segunda Carta Sobre la Phalène
#Mantos de Gea

Se hace una división de 12 grupos, de 2 a 3 integrantes cada uno, dentro del curso. Estos deberán plantearse un diseño y estructurar en base a un texto escogido, una propuesta de diseño responsivo de su sitio. Cada uno de estos textos estarán relacionados entre sí y habrán 2 sub grupos a cargo de cada una. Los sub grupos deben vincularse entre sí del 1 al 6 y del 7 al 12 (siendo éste nuestro "elemento de navegación").

===Antecedentes del texto===

El texto Segunda Carta sobre la Phalène pertenece a la Biblioteca Constel, colección poética. Como tal expone parte del pensamiento artístico y poético de la escuela, fundamentalmente en torno a los actos, la phalène y la condición poética del hombre. 

El texto corresponde a un capítulo del libro dos conversaciones de Godofredo Iommi. Libro editado en 1984 y que reúne una serie de conversaciones mantenidas por Godo y los miembros del instituto de arte UCV, en el año 1969.

===Elementos previos de la edición===

Existen actualmente dos ediciones oficiales de este texto. La primera de ellas es el libro de 1984 mientas que la segunda corresponde a una edición digital (PDF) realizada para el sitio web Casiopea cuya fecha de creación se desconoce. Ambas, aunque en distinto soporte, comparten ciertos elementos. 

[[Archivo:2 Conversaciones web.jpg|thumb|300px|center|Portada de la primera edición de “Dos conversaciones de Godofredo Iommi. Fuente: wiki ead.]]

*'''Ficha técnica:''' 

En la primera edición no existe concretamente una ficha técnica aunque algunos de los datos técnicos están expuestos a manera de colofón o como bajadas en la portada. Las edición PDF incorpora una ficha técnica estructurada.
 
*'''Contenido principal y notas:''' 

Lógicamente se encuentra en ambas ediciones. Primero se expone un contenido que carece de capitulación, luego vienen tres notas entre las cuales la última responde al nombre de nota para relación de arquitectura y Phalène. Esta última, a diferencia del resto, no corresponde a dichos de Iommi sino que de Alberto Cruz. El resto de las notas, por su parte, no tienen un nombre específico.

*'''Índice de autores:''' 

La edición PDF incluye este apartado. Contiene en una lista alfabética los autores nombrados durante el texto.

*'''Imágenes:''' 

El texto contiene cinco imágenes las cuales se reparten entre las notas y el contenido. Son dibujos de Alberto Cruz basados en unas series fotográficas capturadas en los phalènes distintas. Las series son PH-AP pla 70 - Phalène de las Playas y CAP aul 73 - aula Amereida. Existe un grado de abstracción en los dibujos lo que los vuelve una invención gráfica más que un simple croquis. Esta abstracción de Alberto se fundamenta en la intención de retratar un ritmo. Con dos elementos, la posición del sol y la cercanía de un barco, se construye una continuidad temporal. Es bajo esta misma lógica que los dibujos se sitúan en ambas ediciones. Repartidos según su orden  en el espacio del texto y las notas, consiguen marcar aquel ritmo en el texto.Las imágenes presentadas no tienen descripción alguna, por ello se definen como abstracciones de acciones y símbolos presentes en las phàlenes ya mencionadas.

<gallery>
Imagen:Imagen1texto.png|Imagen 1 
Imagen:Imagen2texto.png|Imagen 2
Imagen:Imagen3texto.png|Imagen 3
Imagen:Imagen4texto.png|Imagen 4
Imagen:Imagen5texto.png|Imagen 5
</gallery>

===Criterio editorial===

Tomando en cuenta las limitaciones espaciales de los soportes móviles se decide dividir en texto principal en cinco unidades temáticas o capítulos. Con ello se evita la incorporación de columnas de textos demasiado extensas. Al dividir el texto por capítulos se le permite al lector navegar por distintas partes del texto si así lo desea además de ahorrarle la necesidad de hacer demasiado sroll. 

Como son cinco capítulos, a cada uno se le asigna una imagen al pie. Al ponerlas cada una marcando el fin de un ciclo de lectura y en su mismo orden, se mantiene la idea de secuencia y ritmo propuesta en las ediciones anteriores. 

Las tres notas, por su parte, disocian del texto adjuntándose como una sección independiente. Se define así para que tengan su propio lugar dentro de la navegación. A su vez la nota dos se divide en tres capítulos por ser muy larga.

La ficha perteneciente a la versión en PDF toma parte del sitio como una sección. 
Además se toma en cuenta la inclusión de los enlaces para cada uno de los textos considerados dentro del encargo.

==Wireframes baja intensidad==

===Propuestas para móviles===
====Grilla inicial para móvil====

Al analizar un diseño posible para móviles, se plantea la necesidad de contar con una organización de contenidos agradable y limpia en cuanto a su presentación en la pantalla; dado que esta estructuración de información del sitio netamente de lectura en nuestro caso, ahora deberá pensarse en una resolución menor, comparada con otros dispositivos (320 x 480 px).

Se aborda una medida general, que podría denominarse como el ''contenedor'' o la resolución real de la pantalla: 320 x 480 px en este caso tomadas de un iPhone.
En base a este contenedor, se construye interiormente la organización inicial de lo que queremos presentar al usuario al ingresar al sitio y lo que por el tamaño debe ser ocultado antes de una primera interacción por parte del usuario.



[[Archivo:Wireframespropuestamovilmedidas1 -07.jpg|thumb|400px|center|Grilla propuesta 1 para móvil]]

====Estructura inicial de la propuesta====

Esta grilla presenta un Header, que contiene a modo de iconografía por el momento unas barras que representan el menú oculto antes de su despliegue.
Anexo a este header se halla el menú secundario, que separa datos correspondientes al texto (Notas y Ficha Técnica con datos acerca del autor y editoriales), pero que como propuesta han sido separados del texto general, para ser abordados individualmente, ya que representaban espacios adicionales innecesarios en el área de visualización móvil principal.

Además, se plantea la incorporación de una barra de navegación por capítulos, que se mantenga fija en el área del footer o parte inferior de la pantalla. Esta barra permitiría establecer un manejo por parte del usuario respecto al texto que lee y su ubicación capitulada en 5 divisiones a lo largo de la lectura.

====Diagramación y planteamiento de secciones de navegación====

Cuando se plantea una estructura, que permita agrupar el contenido dividido en 5 capítulos enteramente textuales, junto a una imagen que acompañe a estos, en algunos casos, se tiene que establecer una medida o forma de mostrar las distintas categorías o capas de información, así definimos en una primera instancia, que la barra de navegación principal haga aparición en pantalla, cuando la persona cliqueé el ícono dipuesto en el header. Este icono despliega el menú general y a la vez hace descender el menú secundario que contiene las Notas y Ficha del texto.

Una vez presentado el menú a completitud, lo que sucede es que dentro de las secciones están los links a los otros textos de la Biblioteca Constel junto al texto principal que da origen a este sitio web (este es destacado para saber que estamos revisándolo en ese momento).
La barra fija de navegación por capítulos se encargará de ir avanzando o retrociendo por los ítems divididos, dejando siempre remarcado el círculo y número de capítulo que indicará donde estamos dentro del texto general.

[[Archivo:Wireframes propuestamovil1.1.jpg|thumb|800px|none|Propuestas para móvil 1]]


La sección Notas del menú secundario, al ser dividida, por constar de 3 unidades de textos según su original, se desprende y es mostrada en 3 links inicialmente, que aparecen en el espacio anterior al texto principal, bajo el menú secundario y destacadas con otra jerarquía tipográfica.
La Segunda Nota que entrega el texto, es de especial interés para analizar, puesto resulta necesario aplicar en ella al igual que los capítulos, una división esta vez en 3 partes, por su extensión, mayor comparada con la Primera y Tercera nota. De este modo ahora la barra de navegación fija en el footer, pasa a mostrar sólo 3 círculos, que permiten recorrer ahora la Segunda Nota. 


====Sección Notas====

Al acceder al botón notas se abre una nueva sección que expone un menú de navegación.  A través de este nuevo menú el usuario puede escoger qué nota quiere leer. Luego de esta sección de menúes el usuario llega al sitio de la nota escogida. Cuando se despliega el menú de navegación a través de los textos de la biblioteca, los botones se desplazan hacia abajo.
Algunas secciones de lectura de notas carecen de la barra de navegación por capítulos pues no poseen más de un apartado.

[[Archivo:Wireframes propuesta movil seccion notas1 -21.png|thumb|800px|none|Propuestas para móvil en la sección notas]]

===Propuesta 2===

La barra de capítulos se vuelve un botón el cual al ser seleccionado muestra la barra de navegación. De este modo se optimiza el espacio. El usuario puede prescindir de la barra de navegación por capítulos cuando lo desee aumentando su espacio de lectura.
En esta propuesta se plantea además dejar tanto los textos de Constel como las notas y las fichas en un menú lateral. El menú se despliega  por el lado izquierdo al seleccionar el botón “constel”. Dentro de este menú los contenidos se encuentran etiquetados en dos grupos, un grupo dedicado a los textos Constel y otro dedicado a los anexos se pude navegar con el scroll a través de este menú en el caso de estar apaisado por ejemplo. 

Cuando la barra se desliza por el costado izquierdo deja entrever el contenido del home. A pesar del desplazamiento el botón “constel” sigue visible lo cual permite volver al estado previo. 

Cuando el lector realiza la opción de scroll dentro del texto leído el header se desvanece. Esto genera que queden en la pantalla tan solo los elementos esenciales para la lectura y la navegación. 

Es importante recalcar que los dos botones de navegación permanecen fijos. Esto permite al usuario acceder a ellos sin importar en que punto de la lectura se encuentre.

Luego se proponen otras maneras posibles de desplegar tanto el menú de la bilbioteca como el menú de navegación por capítulos.


[[Archivo:Wireframes propuestamovil2 -22.jpg|thumb|800px|none|Propuesta para móvil 2]]

===Propuestas para tablets===

====Composiciones iniciales en tablet====

Inicialmente la propuesta para tablet se definió como una navegación con barra lateral, siguiendo un poco la idea general utilizada en los sitios comunes en desktop. Esta barra lateral presenta en una primera instancia las siguientes secciones: 
*Textos
*Notas
*Ficha

Cada uno de ellos, excepto Ficha despliega hacia abajo secciones interiores. Cuando se está en algún Texto o Nota, esto queda indicado con el cambio de color con que se destaca el título de la sección o el botón en general.
La medida tomada ahora es de 768 x 1024 px, para el caso de vista vertical, planteando márgenes entre cada uno de los elementos interiores del sitio.

Las vistas propuestas presentan el contenido en su extensión total, en el caso de algún capítulo y además se muestra el despliegue y forma total de la barra lateral de navegación.

[[Archivo:Wireframes propuesta tablet1-10.jpg|thumb|800px|none|Propuesta para tablet 1]]

===Segunda propuesta para Tablet===

La propuesta para tablets 2 sigue la misma lógica que la propuesta para móviles 2. Las estructuras de navegación funcionan de la misma manera aunque con márgenes más generosos.

[[Archivo:Wireframes propuesta tablet2-11.jpg|thumb|800px|none|Propuesta para tablet 2]]

===Propuestas para desktop===

====Propuesta inicial====

De manera similar a lo que ocurre con el home en el espacio tablet, aquí es diseñado ahora el modo desktop, enfrentándose a un tamaño superior, donde el texto principal parece quedar rodeado de blancos o espacios sin rellenar. En sí, esto de pensar en como pasar de algo comprimido en el caso móvil a algo con más aire, tanto de manera lateral como interiormente, se busca mantener el menú lateral expuesto en la versión tablet, pero ya el nivel de navegación inferior, que la barra de capítulos navegable entregaba en los otros dispositivos,desaparece, ya que ahora se privilegia que el contenido este expuesto totalmente, dando paso a un   scroll que se integra haciendo uso de un recurso de navegación a un costado, mediante botones de ''flechas arriba y abajo'' que permitirían navegar.

[[Archivo:Wireframes propuesta desktop1-09.jpg|thumb|800px|none|Primera propuesta menú desktop 1]]

Básicamente la idea o propuesta 2 en el modo desktop, sigue esta navegación fija de los capítulos, pero ahora bajo el header.
En tanto que el menú sigue estando a un costado del sitio y los textos presentados se dan en 2 columnas una texto y al lado una de imágenes, correspondientes si es que el capítulo presenta esta.


[[Archivo:Wireframes propuesta desktop2 -10.jpg|thumb|800px|none|Propuesta para desktop 2]]

===Propuesta de despliegue de menú en desktop===

En este caso el menú surge y se divide en dos íconos, uno que contiene la Información Anexa del texto, esto es, Notas y Ficha y el otro es el que contiene los enlaces a los otros textos disponibles en Biblioteca Constel.

Ambos menús tienen un despliegue diferente hacia un lado de la pantalla, de este modo, el menú que alberga las Notas se desplegaría hacia la derecha del ícono y el menú Bibioteca o Textos hacia la izquierda del ícono.

==Wireframes alta intensidad==

===Definición de propuesta===

====Desktop====

En el sitio en versión desktop se decide incorporar todo el contenido de manera estática salvo el texto propiamente tal. Para ayudar al usuario a desplazarse por el capítulo que está leyendo se incorpora una barra de scroll. Cada capítulo posee su imagen la cual se puede ver a lo largo de toda la lectura. En el caso de las notas y la ficha se deja este espacio libre.

Las medidas de botones se ajustan a los estándares de las pantallas de ordenadores (por las cuales se navega mediante el cursor) por lo cual se reducen en tamaño.


*''Medidas principales de elementos compositivos en pantalla: 1280 x 720 píxeles''


[[Archivo:Wireframe desktop homemedidas-01-01.png|400px|thumb|center|Medidas elementos en desktop]]


*''Home''

[[Archivo:Wireframe desktop menudesplegado-04-04.png|400px|thumb|center|Vista del Home]]


*''Seccion notas''

[[Archivo:Wireframe desktop seccionnota2-07.png|400px|thumb|center|Vista de la sección Notas]]


*''Sección Ficha técnica''

[[Archivo:Wireframe desktop fichatecnica1-06.png|400px|thumb|center|Vista sección Ficha Técnica]]

====Tablet====

En el caso de las tablets, para optimizar el espacio, se utilizan dos botones superiores para los menús. Estos botones permiten al lector acceder a las barras de navegación solamente cuando lo requiere. En el resto del tiempo la pantalla permanece en un estado que privilegia la lectura. 

Para que el usuario tenga todo el tiempo la posibilidad de acceder a los menús, el header permanece estático a largo de la lectura. 

Los botones están optimizados en sus dimensiones para ser digitados cómodamente.

El botón biblioteca despliega la barra lateral donde el usuario encuentra los anexos y otros textos. El botón “caps” hace aparecer el menú por capítulos, presente en el texto y en la nota dos. En ambos botones para volver al estado inicial basta con volver a presionar el botón escogido. 

Las imágenes se presentan diagramadas en la misma columna que el texto. Para poder verlas en un mayor tamaño el usuario puede seleccionarlas para que, mediante un lightbox, la imagen surja en mayor detalle.

*''Medidas en resolución de pantalla: 768 x 1024 píxeles''

       [[Archivo:Wireframe tabletmedidasvertical-12.png|300px]][[Archivo:Wireframe tablet medidasmenuvertical-13.png|300px]]


*''Home''

[[Archivo:Wireframe tablet vistabarracapitulovertical-18.png|300px]]
[[Archivo:Wireframe tablet vistatextobarracapituloshorizontal-21.png|300px]]



*''Menú de navegación''

[[Archivo:Wireframe tablet menudesplegablevertical-20.png|300px]]
[[Archivo:Wireframe tablet vistamenudesplegablehorizontal1-19.png|300px]]


*''Sección Notas''

[[Archivo:Wireframe tablet vistanota1vertical-22.png|400px|thumb|center|Vista sección Nota 1, orientación vertical de la pantalla]]

[[Archivo:Wireframe tablet vistanota2barracapvertical-23.png|300px]]
[[Archivo:Wireframe tabletvistanota2horizontal-17.png|300px]]


*''Visualización de imágenes por pantalla''

[[Archivo:Wireframe tablet vistaimagentextovertical-27.png|300px]]
[[Archivo:Wireframe tablet vistaimagentextohorizontal-25.png|300px]]


[[Archivo:Wireframe tablet vistaimagenlightboxvertical-28.png|300px]]
[[Archivo:Wireframe tablet vistaimagenlightboxhorizontal-26.png|300px]]


*''Sección Ficha Técnica''

[[Archivo:Wireframe tablet fichatecnicavertical2-31.png|300px]]
[[Archivo:Wireframe tablet fichatecnicahorizontal2-32.png|300px]]

====Móvil====

En el caso móvil las interacciones y botones se mantienen con ciertos cambios. Uno de ellos es la posibilidad de ocultar el header para dar máximo espacio a la lectura. Cuando el usuario comienza a hacer scroll en la pantalla el header se esconde, desplazándose hacia arriba y quedando como una pestaña en el margen superior de la pantalla. También se puede ocultar el header presionando la pestaña superior o bien deslizando el header hacia arriba. Si el usuario desea volver a ver el header solo debe hacer el acto inverso. Presionando la pestaña superior el header vuelve a aparecer.

Las opciones de menú “biblioteca” se pueden minimizar en sus sub categorías “anexos al texto” y “otros textos de la biblioteca constel”. 

Se reducen las proporciones del header.

*''Medidas en resolución de pantalla: 320 x 480 píxeles''


[[Archivo:Wireframe movilmedidasvistaverticalhome-37.png|300px]][[Archivo:Wireframe movil medidaselementoshorizontal-39.png|300px]]


*''Home y barra de capítulos''

[[Archivo:Wireframe movil barracapitulosvertical-24.png|300px]]
[[Archivo:Wireframe movil barracapituloshorizontal-26.png|300px]]


*''Menú de navegación''

[[Archivo:Wireframe movil medidasmenuhorizontal-40.png|400px|thumb|center|Medidas menú  vista horizontal]]


[[Archivo:Wireframe movil menuvertical-23.png|300px]]
[[Archivo:Wireframe movilvistamenudesplegadovertical-38.png|300px]]


*''Despliegue del menú ''

Cuando el usuario decide revisar el menú, en una orientación de la pantalla horizontal, este se ajusta mediante pestañas, esto es resultado de que no hay un espacio suficiente para desplegar completamente el menú tal como sucede en la vista vertical, ahora se opta por disponer dos títulos principales ( Anexos al Texto y Otros textos Biblioteca Constel) de manera que cliqueando alguno de ellos, hace despliegue de su interior en cuanto a lo que contienen. De esta manera pueden ser abiertos o cerrados a gusto para navegar en las distintas secciones.

[[Archivo:Wireframe movil menudesplegadoseccionotrostextoshorizontal-30.png|400px|thumb|center|Menú desplegado vista orientación horizontal de la pantalla]]

*''Header y menú oculto ''

[[Archivo:Wireframe movil vistaheaderocultovertical-25.png|300px]]
[[Archivo:Wireframe movil headerocultohorizontal-27.png|300px]]


*''Sección Nota 2''

El texto presenta 3 notas, de las cuales la segunda debió ser segmentada por su extensión en la pantalla para el caso móvil, al igual que sucedió de manera general con el texto. Esta división de la Nota 2, se ve reflejada en la navegación al presentar una barra de 3 capítulos, disponible en la misma ubicación bajo el header.

[[Archivo:Wireframe movil nota2vertical-34.png|300px]]
[[Archivo:Wireframe movil vistaseccionnota2horizontal-31.png|300px]]


[[Archivo:Wireframe movil vistasinheadernota2horizontal-32.png|300px|thumb|center|Vista con header oculto, orientación horizontal de la pantalla]]



*''Visualización de imágenes por pantalla''

Se utiliza el estilo de visualización lightbox, de manera que al cliquear la imagen dentro del texto, el fondo de toda la pantalla genera una opacidad para mostrar el detalle de la imagen, disponiendo además un icono, que permita el cierre de esta opción de visualización.


[[Archivo:Wireframe movil textoeimagenvertical-35.png|300px]]
[[Archivo:Wireframe movil vistaimageneshorizontal1-43.png|300px]]

[[Archivo:Wireframe movil lightboxvertical-36.png|300px]]
[[Archivo:Wireframe movil vistaimageneslightboxhorizontal-44.png|300px]]




*''Sección Ficha Técnica''

En esta sección se exponen los datos técnicos tipo ficha acerca del autor, composición, diagramación, año, lugar e imágenes. 
La decisión gráfica en este punto, es seguir mostrando la información a modo de lista o como puntos, pero se implementa a través de cada dato una línea divisoria muy tenue, que permita diferenciar cada ítem.


[[Archivo:Wireframe movil fichatecnicavertical1-45-45.png|300px]]
[[Archivo:Wireframe movil fichatecnicahorizontal1-46.png|300px]]

===Comparaciones por pantalla===

Se realiza una comparación en los distintos niveles de resolución de pantalla y secciones de contenido del texto o menús, con el fin de mostrar los quiebres o decisiones tomadas en cuanto a las variaciones o cambios definidos, ya sea para una correcta visualización de los contenidos o bien para lograr la adaptación de los mismos elementos compositivos, dentro de una grilla, que se trata de manera flexible, con el fin de no generar cambios tan drásticos a la vista del usuario.

*''Sección Texto y Barra de capítulos''

[[Archivo:Comparaciones pantallas 1-01.jpg|600px|center]]


*''Sección Nota 2''

[[Archivo:Comparaciones pantallas 2-02.jpg|600px|center]]


*''Sección Ficha Técnica''

[[Archivo:Comparaciones pantallas 3-03.jpg|600px|center]]


==Mapa de Divs==

*Mapa de Divs para Desktop
[[Archivo:Mapa de divs desktop1-01.png|300px|center]]

*Mapa de Divs para Tablet
[[Archivo:Mapa de divs tablet-02.jpg|300px|center]]

*Mapa de Divs para Móvil
[[Archivo:Mapa de divs movil-03.jpg|300px|center]]

==Programación del home propuesta 1==

https://dl.dropboxusercontent.com/u/51004032/Sitio%20responsive%20Grafica%20Digital/Home_sitio_%20Segunda_Carta%20sobre_la_Phalene/home_sitio_desktop.html

==Propuesta inicial diseño front-end==

===Paleta de color===

Los colores elegidos para el sitio responsive tienen dos usos principales: se toman los colores grises y rojizos para títulos y secciones destacadas y tonos suaves de estos mismos colores para tramas o tonalidades en los fondos del header y cuerpo interior de contenido.
 
[[Archivo:Paleta color sitio1-11.png|700px|center]]

===Tipografías===

====Oswald====
[[Archivo:Oswald.png|300px|center]]

Esta tipografía fue utilizada en su versión regular para '''títulos''' en especial para el caso del header, donde es presentado el nombre del texto estudiado. El tamaño tipográfico para este carácter es de 48px.

====Droid serif====
[[Archivo:DroidSerifPro.gif|300px|center]]

La tipografía Droid serif fue implementada para '''texto continuo''' en su versión regular. De este modo, todo lo que se refiere a contenidos centrales que es el texto completo en la pantalla, son trabajados con esta tipografía, en un tamaño de 13px para desktop y 11px para tablet y móvil respectivamente.

====Lobster====
[[Archivo:Lobster.png|300px|center]]

Para el caso de los '''subtítulos''' presentes bajo el título principal en el header, se utiliza esta fuente en su versión regular, a un tamaño tipográfico de 14px; con el fin de destacar y diferenciar el nombre de la edición y su autor.

=====Comparación tipográfica según header=====

Las variaciones tipográficas respecto a sus tamaños, en su disposición de la página, tienden a ir aumentando en sus distintas categorías de estilo (títulos, subtítulos y texto continuo). 

[[Archivo:Comparaciontipografiasytamaños-12.png|600px|center]]

=====Comparación tipográfica según cuerpo de texto=====



[[Archivo:Textocontinuotamañostipograficos-15.jpg|800px|center]]

===Cambios en disposición contenidos===
[[Archivo:Contenidosdisposicioncambios-14.jpg|600px|center]]

===Comparación versiones home===
[[Archivo:Comparacion1homedisp-13.jpg|600px|center]]

===Home: plantillas principales===

<center>
<gallery>
Imagen:Diseño interfaz-10.jpg|Home Móvil
Imagen:Diseño interfaz-4.jpg|Home Tablet
Imagen:Diseño interfaz-9.jpg|Home Desktop
</gallery>
</center>

===Interacción Tablet===

<gallery>
Imagen:Diseño interfaz-2.jpg|Despliegue de menú
Imagen:Diseño interfaz-3.jpg|Hover sobre etiquetado
Imagen:Diseño interfaz-1.jpg|Aparición barra de capítulos, modo ancla
Imagen:Diseño interfaz-8.jpg|Vista Ficha técnica
Imagen:Diseño interfaz-5.jpg|Vista texto continuo e imágenes en tablet
Imagen:Diseño interfaz-7.jpg|Hover sobre imagen
Imagen:Diseño interfaz-6.jpg|Vista lightbox detalle imagen
</gallery>

===Criterios y decisiones gráficas===


*'''Menú y header'''
Anteriormente, se había pensado en un menú visible (desktop) y oculto (tablet y móvil) que reuniera las notas presentes en el texto, la ficha técnica que detalla los datos de edición y autores y que además agrupaba los textos anexos al leído, que corresponden a 5 textos también pertenecientes a la Biblioteca Constel.

Una primera evaluación, en torno a la funcionalidad responsive que requiere el caso de estudio, determina que el menú continué visible a un costado del texto para el caso del modo desktop, de forma lateral. De este modo el posible usuario durante la navegación, mantendrá esta referencia acerca del texto que esta leyendo y las otras posibilidades de navegación propias del texto junto a lecturas anexas. El modo de recorrer este menú se da por anclas, que redirigen dentro de la misma página a la sección de interés cliqueada dentro del menú lateral, despliega su interior, donde están alojados sólo las notas relacionadas al texto, dejando fuera los textos anexos, que ahora se presentan como lista en ambos casos en el footer.


La implementación de un botón para capítulos y otro para notas determina este quiebre presente al pasar del desktop al tablet y móvil.
Para el caso móvil y tablet el menú lateral desaparece y pasa a conformarse en un botón superior en el header, que funciona también como un ancla dentro de la navegación del texto general.

<center>
<gallery>
Imagen:Detalle header desktop.jpg|Detalle header versión desktop
Imagen:Header tablet.jpg|Header versión tablet
Imagen:Detalle header tablet.jpg|Detalle header en tablet
</gallery>
</center>


*'''Barra de capítulos'''
Se contempla una barra de capítulos, para hacer de la lectura extensa actual algo más agradable y sin mayores interrupciones, respecto al scroll que surgiría. La barra permite en nuestro diseño, mantener al usuario informado y más que eso ubicado dentro del texto, de manera que éste pueda recorrer y leer por segmentos o capítulos definidos el contenido aquí expuesto;  sin perder de vista esta barra durante su navegación, pudiendo retroceder o revisar las distintas particiones o capítulos dados al texto en general.

A la vez esta herramienta visual, servirá para implementar las notas en el caso del dispositivo tablet.

El header se comportará de manera similar en el caso de tablet y móvil, ya que define un estado fijo y con una pestaña superior que permitiría ocultarlo o desvanecerlo, para una lectura más amplia y sin cortes de texto en pantalla.

<center>
<gallery>
Imagen:Detalle despliega caps tablet.jpg|Detalle despliegue barra capítulos tablet
Imagen:Despliegue anexos tablet asi mejor mas claro.jpg|Despliegue anexos versión tablet
Imagen:Menu movil caps.jpg|Detalle despliegue barra capítulos movil
Imagen:Menú movil anexos.jpg|Despliegue anexos versión movil
</gallery>
</center>


*'''Ficha técnica'''

La ficha técnica como otros elementos ocultos anteriormente del texto, ahora ha sido dispuesta en el comienzo de la plantilla tipo, en el caso tablet.
Pensando en los puntos de quiebre del sitio, respecto a la ordenación o comportamiento de los elementos por tipo de pantalla, este caso pasa a cambiar considerablemente, ya que ahora se extiende junto al contenido central o bien se desplaza creando una caja a un costado de éste.


*'''Footer'''
El footer trae los datos tanto del texto como de la biblioteca. Contenidos a modo de etiquetas y links que permiten obtener mayor información respecto al mismo texto y sus pares pertenecientes a la biblioteca constel.
Se decide para el caso del footer desktop, tablet y móvil, habilitarlo como un espacio que repite el menú principal, pero con otra estructuración, tipo lista.

<center>
<gallery>
Imagen:Footer desktop detalle.jpg|Detalle del footer para versión desktop
Imagen:Footer wide tablet apaisada o estado intermedio entre desktop y tablet.jpg|Footer apaisado versión intermedia a desktop y tablet
Imagen:Detalle footer tablet.jpg| Detalle footer en versión tablet
Imagen:Detalle movil footer.jpg| Detalle footer en versión movil
</gallery>
</center>


*'''Extensión del texto en los distintos soportes'''
<center>
<gallery>
Imagen:Diseño interfaz-10 VERSIÓN DESKTOP COMPLETA.jpg|Vista completa diseño versión desktop
Imagen:Diseño interfaz-12 tablet completa.jpg|Vista completa diseño versión tablet
Imagen:Diseño interfaz-14 movil completo .jpg|Vista completa diseño versión móvil

</gallery>
</center>

=Entrega Final=

https://dl.dropboxusercontent.com/u/51004032/Sitio_responsive_segunda_carta/grilla_responsive_grafica.html

versión final

https://dl.dropboxusercontent.com/u/18853960/Responsive%20sitio/grilla_responsive_grafica.html#cap_3

===Archivo rar===
https://dl.dropboxusercontent.com/u/51004032/Responsive%20sitio.rar

versión final 

https://www.dropbox.com/s/pml54di06q21ujz/Responsive%20sitio.rar