Caso de estudio: Revista Capital Online

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. 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

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.
• 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

Sitio web Capital.cl en sus distintas versiones.

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 Image:Iphone 4 pagina principal franwevar.png|Página HOME Image:Iphone 4 articulo-franwevar.png|Página de Artículo Image:Iphone 4 eventos franwevar.png ‎|Página de subsección Eventos </gallery>

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

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

  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.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.

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.

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.