Diferencia entre revisiones de «Caso de estudio: Revista Capital Online»
Línea 105: | Línea 105: | ||
<br> | <br> | ||
*MEDIDA DOS: Elementos y contenidos | *MEDIDA DOS: Elementos y contenidos | ||
a. Adaptación de texto<br> | |||
a.1 Noticias Nivel 1 | |||
<gallery> | |||
Image:TEXTO DESTACADO 1 PAGINA PRINCIPAL.png|Pantalla completa - ipad ''768px x 1024px'' | |||
Image:TEXTO DESTACADO 1 PAGINA PRINCIPAL IPHONE 4.png|Tamaño iPhone 4 ''640px x 960px'' | |||
Image:TEXTO DESTACADO 1 PAGINA PRINCIPAL 320 X 480.png|Tamaño iPhone 3G ''320px x 480px'' | |||
Image:TEXTO DESTACADO 1 PAGINA PRINCIPAL 240 x 320.png|Tamaño Smart Phone Samsung Galaxy Young ''240px x 320px'' | |||
</gallery> | |||
<br> | |||
a.2 Noticias Nivel 2<br> | |||
<gallery> | |||
Image:TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL.png|Pantalla completa - ipad ''768px x 1024px'' | |||
Image:TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL IPHONE 4.png |Tamaño iPhone 4 ''640px x 960px'' | |||
Image:TEXTO DESTACADO 2 Y RESEÑA PAGINA PRINCIPAL 320 X 480.png |Tamaño iPhone 3G ''320px x 480px'' | |||
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 | |||
<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 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> | <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 | |||
<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 | |||
<gallery> | |||
Imagen:SUBTITULO Y TEXTO ARTICULO fscreen.png|Pantalla completa | |||
Imagen:SUBTITULO Y TEXTO ARTICULO 320X 480.png|Pantalla de iPhone 3G ''320px x 480px'' | |||
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> | |||
<gallery> | |||
Imagen:TEXTO EVENTOS FSCREEN & IPAD.png|Pantalla completa | |||
Imagen:TEXTO EVENTOS 320 x 480.png|Pantalla de iPhone 3G ''320px x 480px'' | |||
Imagen:TEXTO EVENTOS 240 x 320.png|Pantalla de iPhone 4 ''240px x 320px'' | |||
</gallery> | |||
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)<br> | |||
<gallery> | |||
Imagen:FOOTER FSCREEN.png|Pantalla completa / ipad | |||
Imagen:FOOTER IPHONE 4.png|Pantalla de iPhone 4 | |||
Imagen:FOOTER 320 X 480.png|Pantalla de iPhone 3G ''320px x 480px'' y Smart Phone ''240px x 320px'' | |||
</gallery> | |||
<br> | |||
c.Contenido sugerido en artículo<br> | |||
<gallery> | |||
Imagen:FOOTER ARTICULO FSCREEN.png|Pantalla completa / ipad | |||
Imagen:FOOTER_ARTICULO_320_X_480.png|Pantalla de iPhone 3G ''320px x 480px'' | |||
Imagen:FOOTER ARTICULO 240 x 320.png|Pantalla de smart phone ''240px x 320px'' | |||
</gallery> | |||
<br> | |||
d.Botones de navegación en subsección "Eventos" | |||
<gallery> | |||
Imagen:BOTONERA EVENTOS FSCREEN & IPAD.png|Pantalla completa / ipad / iphone 4 y 3G | |||
Imagen:BOTONERA EVENTOS 240 x 320.png|Pantalla de smart phone ''240px x 320px'' | |||
</gallery> | |||
*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> | <gallery> | ||
Image:FULL SCREEN menu incio franwevar.png|Estado normal | Image:FULL SCREEN menu incio franwevar.png|Estado normal - iPad | ||
Image:FULL SCREEN menu home logo franwevar.png|Estado del logo con etiqueta "alt" al hacer ''hover''. | Image:FULL SCREEN menu home logo franwevar.png|Estado del logo con etiqueta "alt" al hacer ''hover''. | ||
Image:FULL SCREEN menu CULTURA franwevar.png|Estado de la sección "Cultura" al hacer hover. | Image:FULL SCREEN menu CULTURA franwevar.png|Estado de la sección "Cultura" al hacer hover. | ||
Línea 139: | Línea 205: | ||
<br> | <br> | ||
<br> | <br> | ||
a.4 Pantalla iPhone 3G ''320 px x 480 px'' | a.4 Pantalla iPhone 3G ''320 px x 480 px'' y Pantalla Smart Phone ''240 px x 320 px'' | ||
<gallery> | <gallery> | ||
Image:320x480 vertical menu pagina principal normal.png|Estado normal | Image:320x480 vertical menu pagina principal normal.png|Estado normal | ||
Image:320x480_vertical_menu_pagina_principal_franwevar.png|Despliegue del menú al cliquear. | Image:320x480_vertical_menu_pagina_principal_franwevar.png|Despliegue del menú al cliquear. | ||
</gallery> | </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. | |||
<br> | <br> | ||
CONCLUSIONES | CONCLUSIONES |
Revisión del 01:34 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. 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
Pantalla de iPad (lectura vertical): 768 px x 1024 px'
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
Pantalla de Smart Phone Samsung Galaxy Young (lectura vertical): 240 px x 320 px
TERCERO
- MEDIDA UNO: Grillas
Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla.
a.Plantillas "HOME"
b.Plantillas de "Articulo"
c.Plantillas de "Subsección"
- 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
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
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
a.4.2 Subtitulo y párrafo de un artículo
a.4.3 Texto en subsección "Eventos"
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)
c.Contenido sugerido en artículo
d.Botones de navegación en subsección "Eventos"
- MEDIDA TRES: Control e interacción del usuario
a.Visualización e interacción con el Menú
a.1. Pantalla Completa
a.2 Pantalla iPad 768 px x 1024 px
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
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
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.