Diferencia entre revisiones de «Caso de estudio: Revista Capital Online»

Revisión actual - 04:22 12 jul 2013

Título	Revista Capital Online
Tipo de Proyecto	Proyecto de Taller
Período	2013-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)	Francisca Wevar
Profesor	Katherine Exss

PRIMERO

Lo siguiente corresponde al estudio del Responsive Web Design de la Revista Capital Online.

Parametros de medición

Para realizar el estudio de dicho sitio se determinaron los parámetros a continuación:

PARÁMETRO UNO: Tipos de plantilla en el sitio

Se realizo un análisis del sitio y la(s) grilla(s) que este utilza para organizar y mostrar sus contenidos, arrojando así 3 tipos de plantillas o grillas a las que se les denomino con los nombres:
a. Plantilla principal, que corresponde al HOME del sitio. b. Plantilla de artículos. c. Plantilla de subsección, que corresponde a los contenidos del submenú.

PARÁMETRO DOS: CANTIDAD Y TIPOS DE PANTALLAS

Para el estudio se plantearon 5 tamaños de pantallas de dispositivos, que corresponden a:
a. Pantalla Completa: 1440 px x 900 px [1]
b. iPad (en lectura vertical): 768 px x 1024 px
c. iPhone 4 (en lectura vertical): 640 px x 960 px
d. iphone 3G (en lectura vertical): 320 px x 480 px
e. Smart Phone Samsung Galaxy Young: 240 px x 320 px

Medidas

A partir de estos dos parametros se prueba como los contenidos presentes en cada plantillas se comportan ante la pantalla de cada dispositivo. Para estudiar este comportamiento se definen las siguientes medidas:

MEDIDA UNO: Grillas, lo que corresponde al comportamiento de la grilla entre una pantalla u otra.
MEDIDA DOS: Elementos y contenidos de página, lo que corresponde al comportamiento y cambio que presentan los elementos y contenidos en cada tipo de plantilla (parámetro uno)al cambio de dispositivo. De esta manera, se puede determinar por ejemplo que elementos se mantienen o desaparecen durante el proceso.
Visualización de textos, que corresponde a la forma en que el texto comprendido como titulos, subtitulos y parrafos cambian y/o se adaptan en un dispositivo u otro.

MEDIDA TRES: Control e interacción del usuario, lo que corresponde al cambio de los elementos controlados por el usuario y/o que interactuan con él (como menús, etiquetas "alt" y comportamiento de botones y barras)al pasar de una pantalla a otra.

---

SEGUNDO

Colores utilizados en el sitio

Colores utilizados en el sirio
Logo de la revista presente en el sitio

Grilla del sitio en distintas pantallas

Pantalla completa: 1440 px x 900 px

Página HOME
Página de Artículo
Página de subsección Eventos

Pantalla de iPad (lectura vertical): 768 px x 1024 px'

Página HOME
Página de Artículo

Pantalla de iPhone 4 (lectura vertical): 640 px x 960 px'

Página HOME
Página de Artículo
Página de subsección Eventos

Pantalla de iPhone 3G (lectura vertical): 320 px x 480 px

Página HOME
Página de Artículo
Página de subsección Eventos

Pantalla de Smart Phone Samsung Galaxy Young (lectura vertical): 240 px x 320 px

Página HOME
Página de Artículo
Página de subsección Eventos

Contenidos de plantillas tipo en distintas pantallas

A medida que el sitio se visualiza en los distintos dispositivos, los elementos y contenidos en el varían.
Plantilla "Home"

Pantalla Completa
iPhone 4
iPhone 3G
Smart phone 240px x 320 px

Plantilla Artículo

Pantalla Completa
iPhone 4
iPhone 3G
Smart phone 240px x 320 px

Leyenda

1A. HEADER | 1B.PRIMER FOOTER | 1C.SEGUNDO FOOTER
2.LOGO Y MENÚ.
3A.MENÚ DE SUBSECCIONES | 3B.TITULO DE SECCIONES
4A.BARRA DE BÚSQUEDA | 4B.TAGS O ETIQUETAS
5.TITULAR NIVEL 1
6.TITULAR NIVEL 2
7.TITULAR NIVEL 3
8.LINK A SITIOS HERMANOS | 8A.MINIATURA DE REVISTA Y CONTENIDOS | 8B.COLUMNAS DE OPINIÓN | 8C.NOTICIAS SUGERIDAS | 8D.CITA DE UN ARTÍCULO | 8E.CONTENIDO SUGERIDO EN FOOTER | 8F.CONTENIDO SUGERIDO EN ARTICULOS
9A.PUBLICIDAD BARRA IZQUIERDA
10A.SUSCRIPCIÓN Y NEWSLETTER | 10B. BOTONES REDES SOCIALES EN TITULO NIVEL 1 | 10C.BOTONES REDES SOCIALES EN BARRA LATERAL | 10D.COMENTARIOS DE USUARIO
11.ELEMENTO MULTIMEDIA "GALERÍA DE FOTOS"

TERCERO

MEDIDA UNO: Grillas

Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla.

a.Plantillas "HOME"

Tamaño Completo
Tamaño iPad 768px x 1024px
Tamaño iPhone 4 640px x 960px
Tamaño iPhone 3G 320px x 480px
Tamaño Smart Phone Samsung Galaxy Young 240px x 320px

b.Plantillas de "Articulo"

Tamaño Completo
Tamaño iPhone 4 640px x 960px
Tamaño iPhone 3G 320px x 480px
Tamaño Smart Phone Samsung Galaxy Young 240px x 320px

c.Plantillas de "Subsección"

Tamaño Completo
Tamaño iPad 768px x 1024px
Tamaño iPhone 4 640px x 960px
Tamaño iPhone 3G 320px x 480px
Tamaño Smart Phone Samsung Galaxy Young 240px x 320px

Se puede observar que el sitio se va "simplificando", en el sentido de una reducción de la grilla de varias secciones a menos, a medida que se ve en una pantalla mayor a una menor.

MEDIDA DOS: Elementos y contenidos

a. Adaptación de texto
a.1 Noticias Nivel 1

Pantalla completa - ipad 768px x 1024px
Tamaño iPhone 4 640px x 960px
Tamaño iPhone 3G 320px x 480px
Tamaño Smart Phone Samsung Galaxy Young 240px x 320px

a.2 Noticias Nivel 2

TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL.png

Pantalla completa - ipad 768px x 1024px
TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL IPHONE 4.png

Tamaño iPhone 4 640px x 960px
TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL 320 X 480.png

Tamaño iPhone 3G 320px x 480px
Tamaño Smart Phone Samsung Galaxy Young 240px x 320px

a.3 Noticias Nivel 3

TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL.png

Pantalla completa - ipad 768px x 1024px
TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL IPHONE 4.png

Tamaño iPhone 4 640px x 960px
TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL 320X 480.png

Tamaño iPhone 3G 320px x 480px
TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL 240 x 320.png

Tamaño Smart Phone Samsung Galaxy Young 240px x 320px

a.4 Titulos, subtítulos y parráfos
En este item solo se expondrán ciertos casos pues en varias pantallas el comportamiento del texto no varía.
a.4.1 Titulo de un artículo

Título de un artículo en pantalla completa, ipad y ambos modelos de iphone
Título de un artículo en pantalla de 240 px x 320 px

a.4.2 Subtitulo y párrafo de un artículo

Pantalla completa
Pantalla de iPhone 3G 320px x 480px
Pantalla de iPhone 4 240px x 320px

A medida que las pantallas van cambiando, los subtitulos y los textos cambian su alineación inicial resultando en una "perdida" de formato, pues se producen cortes en los subtítulos o "ríos" entre el tejido construido por caracteres tipográficos.
a.4.3 Texto en subsección "Eventos"

Pantalla completa
Pantalla de iPhone 3G 320px x 480px
Pantalla de iPhone 4 240px x 320px

Los estilos de textos no cambian a pesar del cambio de pantallas.

Títulos y subtitulos en negrita y textos en sans serif regular en página home, secciones y subsecciones.
En artículos, subtítulos en mayúscula y negrita y textos en sans serif regular.
A pesar de que las lineas de texto -sobretodo en el caso de los titulares- se "cortan" y forman un cuerpo maciso, no se cambia el estilo tipográfico.

b. Footer (Pie de página)

Pantalla completa / ipad
Pantalla de iPhone 4
Pantalla de iPhone 3G 320px x 480px y Smart Phone 240px x 320px

c.Contenido sugerido en artículo

Pantalla completa / ipad
Pantalla de iPhone 3G 320px x 480px
Pantalla de smart phone 240px x 320px

d.Botones de navegación en subsección "Eventos"

Pantalla completa / ipad / iphone 4 y 3G
Pantalla de smart phone 240px x 320px

MEDIDA TRES: Control e interacción del usuario

a.Visualización e interacción con el Menú
a.1. Pantalla Completa

Estado normal - iPad
Estado del logo con etiqueta "alt" al hacer hover.
Estado de la sección "Cultura" al hacer hover.
Estado de la subsección "Eventos" al hacer hover.
Estado de link a sitio hermano al hacer hover.
Estado de la barra de búsqueda al hacer click.

a.2 Pantalla iPad 768 px x 1024 px

Estado normal
Despliegue del menú al pulsar el botón a la derecha.
Comportamiento de la sección "Cultura" al hacer hover.
Despliegue de la barra de búsqueda al hacer en la "lupa".

El menu principal se comprime en un único botón al igual que la barra de búsqueda la que se comprime en el pequeño símbolo de la "lupa".

a.3 Pantalla iPhone 4 640 px x 960 px

Estado normal
Comportamiento del botón en el menú al hacer hover.
Despliegue del menú al cliquear.
Comportamiento del link "Cultura" al hacer hover.
Comportamiento del link a la subsección "Eventos" al hacer hover.

El menú principal se comprime en una barra "Secciones Capital". Por otro lado, la barra de subsecciones sube a la parte superior de la página en una barra negra. Desaparecen elementos como la barra de búsqueda, los links a sitios hermanos y links a suscripciones y newsletter.

a.4 Pantalla iPhone 3G 320 px x 480 px y Pantalla Smart Phone 240 px x 320 px

Estado normal
Despliegue del menú al cliquear.

En este caso el menú posee semejante apariencia y comportamiento que el iPad 4 a pesar de se trata de una pantalla más pequeña. No obstante, no existen las etiquetas "Alt" que existían en las pantallas anteriores.

Cabe plantearse como se adapta el menú principal a las diversas pantallas y particularmente, por qué en el caso del iPad en lectura vertical las distintas secciones se reunen en un elemento "pequeño" sobretodo cuando se trata de una pantalla mayor a las que poseen una barra con despliegue.
Con respecto a la relación del logo de la revista -que redirige al "Home"- y el menú, se observa que el primero jamás desaparece, en contraste de los otros sin embargo, son eliminados a medida que el sitio fluye a través de las diferentes pantallas resultando en la condensación de la navegación básica y/o "esencial" en único elemento.

CONCLUSIONES

La simplificación de la grilla va en directa relación con la cantidad de contenidos y elementos en las páginas.
La simplificación y/o descomplejización del sitio tanto en su grilla como en sus elementos y contenidos se encuentra íntimamente relacionado con el tamaño de la pantalla.
El comportamiento de los elementos controlados por usuario y/o de interacción con el usuario cambiara según el tamaño de la pantalla al igual que su presencia en la página.
La marca y/o identidad del sitio respecto a la Revista Capital se conserva a través de dos elementos visuales los que son el logo, presente en todas las plantillas y todas las "adaptaciones" del la grilla y los contenidos a las diferentes pantallas.Y por último, los colores que permiten relacionar una plantilla y/o página con otra mientras se navega el sitio a través de todas las pantallas.

@@ Línea 10: / Línea 10: @@
 }}
 ==PRIMERO==
 Lo siguiente corresponde al estudio del Responsive Web Design de la [http://www.capital.cl Revista Capital Online].
+===Parametros de medición===
 Para realizar el estudio de dicho sitio se determinaron los parámetros a continuación:
@@ Línea 26: / Línea 28: @@
 d. iphone 3G (en lectura vertical): 320 px x 480 px<br>
 e. Smart Phone Samsung Galaxy Young: 240 px x 320 px<br>
+===Medidas===
 A partir de estos dos parametros se prueba como los contenidos presentes en cada plantillas se comportan ante la pantalla de cada dispositivo. Para estudiar este comportamiento se definen las siguientes medidas:
-*MEDIDA UNO: Grillas, lo que corresponde al comportamiento de la grilla entre una pantalla u otra.
+*MEDIDA UNO: Grillas, lo que corresponde al comportamiento de la grilla entre una pantalla u otra. <BR><BR>
-*MEDIDA DOS: Elementos y contenidos de página, lo que corresponde al comportamiento y cambio que presentan los elementos y contenidos en cada tipo de plantilla (parámetro uno)al cambio de dispositivo. De esta manera, se puede determinar por ejemplo que elementos se mantienen o desaparecen durante el proceso.
+*MEDIDA DOS: Elementos y contenidos de página, lo que corresponde al comportamiento y cambio que presentan los elementos y contenidos en cada tipo de plantilla (parámetro uno)al cambio de dispositivo. De esta manera, se puede determinar por ejemplo que elementos se mantienen o desaparecen durante el proceso.<BR>Visualización de textos, que corresponde a la forma en que el texto comprendido como titulos, subtitulos y parrafos cambian y/o se adaptan en un dispositivo u otro.<BR><BR>
 *MEDIDA TRES: Control e interacción del usuario, lo que corresponde al cambio de los elementos controlados por el usuario y/o que interactuan con él (como menús, etiquetas "alt" y comportamiento de botones y barras)al pasar de una pantalla a otra.
-*CRITERIO CUATRO: Visualización de textos, que corresponde a la forma en que el texto comprendido como titulos, subtitulos y parrafos cambian y/o se adaptan en un dispositivo u otro.
 ---
 ==SEGUNDO==
+====Colores utilizados en el sitio====
+<gallery>
+Image:Colores revista capital.png |Colores utilizados en el sirio
+Image:LOGO CAPITAL.png|Logo de la revista presente en el sitio
+</gallery>
+<br>
 ====Grilla del sitio en distintas pantallas====
 '''Pantalla completa: ''1440 px x 900 px'''''
@@ Línea 72: / Línea 83: @@
 <br>
 ====Contenidos de plantillas tipo en distintas pantallas====
 A medida que el sitio se visualiza en los distintos dispositivos, los elementos y contenidos en el varían.<BR>
@@ Línea 101: / Línea 113: @@
 *10A.SUSCRIPCIÓN Y NEWSLETTER | 10B. BOTONES REDES SOCIALES EN TITULO NIVEL 1 | 10C.BOTONES REDES SOCIALES EN BARRA LATERAL | 10D.COMENTARIOS DE USUARIO
 *11.ELEMENTO MULTIMEDIA "GALERÍA DE FOTOS"</p>
-<br>
-'''Colores utilizados en el sitio'''
-<gallery>
-Image:Colores revista capital.png |Colores utilizados en el sirio
-</gallery>
-<br>
 <br>
 ==TERCERO==
-*MEDIDA UNO: Grillas
+===MEDIDA UNO: Grillas===
 <P>Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla. </P>
 <p>
-a.Plantillas "HOME"
+'''a.Plantillas "HOME"'''
 <gallery>
 Image:Screen full PAGINA PRINCIPAL GRILLA franwevar.png|Tamaño Completo
@@ Línea 124: / Línea 129: @@
 <br>
 <p>
-b.Plantillas de "Articulo"
+'''b.Plantillas de "Articulo"'''
 <gallery>
 Image:Screen full ARTICULO GRILLA franwevar.png‎|Tamaño Completo
@@ Línea 134: / Línea 139: @@
 <br>
 <p>
-c.Plantillas de "Subsección"
+'''c.Plantillas de "Subsección"'''
 <gallery>
 Image:Screen full EVENTOS GRILLA franwevar.png ‎|Tamaño Completo
@@ Línea 144: / Línea 149: @@
 *Se puede observar que el sitio se va "simplificando", en el sentido de una reducción de la grilla de varias secciones a menos, a medida que se ve en una pantalla mayor a una menor.
 <br>
-*MEDIDA DOS: Elementos y contenidos
+===MEDIDA DOS: Elementos y contenidos===
-a. Adaptación de texto<br>
+a. Adaptación de texto'''<br>
-a.1 Noticias Nivel 1
+'''a.1 Noticias Nivel 1'''
 <gallery>
 Image:TEXTO DESTACADO 1 PAGINA PRINCIPAL.png|Pantalla completa - ipad ''768px x 1024px''
@@ Línea 154: / Línea 159: @@
 </gallery>
 <br>
-a.2 Noticias Nivel 2<br>
+'''a.2 Noticias Nivel''' 2<br>
 <gallery>
 Image:TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL.png|Pantalla completa - ipad ''768px x 1024px''
@@ Línea 161: / Línea 166: @@
 Image:TEXTO DESTACADO 2 PAGINA PRINCIPAL 240 x 320.png|Tamaño Smart Phone Samsung Galaxy Young ''240px x 320px''
 </gallery>
-a.3 Noticias Nivel 3
+'''a.3 Noticias Nivel 3'''
 <gallery>
 Image:TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL.png |Pantalla completa - ipad ''768px x 1024px''
-Image:TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL IPHONE|Tamaño iPhone 4 ''640px x 960px''
+Image:TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL IPHONE 4.png ‎|Tamaño iPhone 4 ''640px x 960px''
 Image:TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL 320X 480.png|Tamaño iPhone 3G ''320px x 480px''
 Image:TEXTO DESTACADO 3 Y RESEÑA PAGINA PRINCIPAL 240 x 320.png ‎|Tamaño Smart Phone Samsung Galaxy Young ''240px x 320px''
 </gallery>
 <BR>
-a.4 Titulos, subtítulos y parráfos<br>
+'''a.4 Titulos, subtítulos y parráfos'''<br>
 En este item solo se expondrán ciertos casos pues en varias pantallas el comportamiento del texto no varía. <br>
-a.4.1 Titulo de un artículo
+'''a.4.1 Titulo de un artículo'''
 <gallery>
 Imagen:TITULO ARTICULO FSCREEN.png|Título de un artículo en pantalla completa, ipad y ambos modelos de iphone
 Imagen:TITULO ARTICULO 240 x 320.png|Título de un artículo en pantalla de ''240 px x 320 px''
 </gallery>
-a.4.2 Subtitulo y párrafo de un artículo
+'''a.4.2 Subtitulo y párrafo de un artículo'''
 <gallery>
 Imagen:SUBTITULO Y TEXTO ARTICULO fscreen.png|Pantalla completa
@@ Línea 182: / Línea 187: @@
 Imagen:SUBTITULO Y TEXTO ARTICULO 240 x 320.png |Pantalla de iPhone 4 ''240px x 320px''
 </gallery>
-a.4.3 Texto en subsección "Eventos"<br>
+A medida que las pantallas van cambiando, los subtitulos y los textos cambian su alineación inicial resultando en una "perdida" de formato, pues se producen cortes en los subtítulos o "ríos" entre el tejido construido por caracteres tipográficos.<br>
+'''a.4.3 Texto en subsección "Eventos"'''<br>
 <gallery>
 Imagen:TEXTO EVENTOS FSCREEN &amp; IPAD.png|Pantalla completa
@@ Línea 190: / Línea 196: @@
 Los estilos de textos no cambian a pesar del cambio de pantallas.
 *Títulos y subtitulos en negrita y textos en sans serif regular en página home, secciones y subsecciones.
-*En artículos, subtítulos en mayúscula y negrita y textos en sans serif regular.
+*En artículos, subtítulos en mayúscula y negrita y textos en ''sans serif'' regular.
-b. Footer (Pie de página)<br>
+*A pesar de que las lineas de texto -sobretodo en el caso de los titulares- se "cortan" y forman un cuerpo maciso, no se cambia el estilo tipográfico.
+<br>
+'''b. Footer (Pie de página)'''<br>
 <gallery>
 Imagen:FOOTER FSCREEN.png|Pantalla completa / ipad
@@ Línea 198: / Línea 206: @@
 </gallery>
 <br>
-c.Contenido sugerido en artículo<br>
+'''c.Contenido sugerido en artículo'''<br>
 <gallery>
 Imagen:FOOTER ARTICULO FSCREEN.png|Pantalla completa / ipad
@@ Línea 205: / Línea 213: @@
 </gallery>
 <br>
-d.Botones de navegación en subsección "Eventos"
+'''d.Botones de navegación en subsección "Eventos"'''
 <gallery>
 Imagen:BOTONERA EVENTOS FSCREEN &amp; IPAD.png|Pantalla completa / ipad / iphone 4 y 3G
 Imagen:BOTONERA EVENTOS 240 x 320.png|Pantalla de smart phone ''240px x 320px''
 </gallery>
+<br>
-*MEDIDA TRES: Control e interacción del usuario
+===MEDIDA TRES: Control e interacción del usuario===
-a.Visualización e interacción con el Menú <br>
+'''a.Visualización e interacción con el Menú''' <br>
-a.1. Pantalla Completa
+'''a.1. Pantalla Completa'''
 <gallery>
 Image:FULL SCREEN menu incio franwevar.png‎|Estado normal - iPad
@@ Línea 224: / Línea 233: @@
 </gallery>
 <br>
-a.2 Pantalla iPad ''768 px x 1024 px''
+'''a.2 Pantalla iPad ''768 px x 1024 px'''''
 <gallery>
 Image:IPAD VERTICAL menu inicio franwevar.png‎|Estado normal
@@ Línea 234: / Línea 243: @@
 <br>
 <br>
-a.3 Pantalla iPhone 4 ''640 px x 960 px''
+'''a.3 Pantalla iPhone 4 ''640 px x 960 px'''''
 <gallery>
 Image:IPHONE 4 menu inicio franwevar.png‎|Estado normal
@@ Línea 245: / Línea 254: @@
 <br>
 <br>
-a.4 Pantalla iPhone 3G ''320 px x 480 px'' y Pantalla Smart Phone ''240 px x 320 px''
+'''a.4 Pantalla iPhone 3G ''320 px x 480 px'' y Pantalla Smart Phone ''240 px x 320 px'''''
 <gallery>
 Image:320x480 vertical menu pagina principal normal.png|Estado normal
 Image:320x480_vertical_menu_pagina_principal_franwevar.png|Despliegue del menú al cliquear.
 </gallery>
-En este caso el menú posee semejante apariencia y comportamiento que el iPad 4 a pesar de se trata de una pantalla más pequeña. No obstante, no existen las etiquetas "Alt" que existían en las pantallas anteriores.
+En este caso el menú posee semejante apariencia y comportamiento que el iPad 4 a pesar de se trata de una pantalla más pequeña. No obstante, no existen las etiquetas "Alt" que existían en las pantallas anteriores.<br>
+*Cabe plantearse como se adapta el menú principal a las diversas pantallas y particularmente, por qué en el caso del iPad en lectura vertical las distintas secciones se reunen en un elemento "pequeño" sobretodo cuando se trata de una pantalla mayor a las que poseen una barra con despliegue.
+*Con respecto a la relación del logo de la revista -que redirige al "Home"- y el menú, se observa que el primero jamás desaparece, en contraste de los otros sin embargo, son eliminados a medida que el sitio fluye a través de las diferentes pantallas resultando en la condensación de la navegación básica y/o "esencial" en único elemento.
 <br>
@@ Línea 257: / Línea 268: @@
 *La simplificación y/o descomplejización del sitio tanto en su grilla como en sus elementos y contenidos se encuentra íntimamente relacionado con el tamaño de la pantalla.
 *El comportamiento de los elementos controlados por usuario y/o de interacción con el usuario cambiara según el tamaño de la pantalla al igual que su presencia en la página.
-*Cabe plantearse como se conserva la imagen y/o concepto del sitio a medida que este se va adaptando de mayor a menor.
+*La marca y/o identidad del sitio respecto a la Revista Capital se conserva a través de dos elementos visuales los que son el logo, presente en todas las plantillas y todas las "adaptaciones" del la grilla y los contenidos a las diferentes pantallas.Y por último, los colores que permiten relacionar una plantilla y/o página con otra mientras se navega el sitio a través de todas las pantallas.