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 los siguientes criterios:
- CRITERO UNO: Grillas, lo que corresponde al comportamiento de la grilla entre una pantalla u otra.
- CRITERIO 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.
- CRITERIO 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
- PREVIO: 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
- PARÁMETRO UNO: Grillas
Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla.
a.Plantillas
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.
