Diferencia entre revisiones de «Caso de estudio: Revista Capital Online»
Sin resumen de edición |
|||
| Línea 27: | Línea 27: | ||
e. Smart Phone Samsung Galaxy Young: 240 px x 320 px<br> | e. Smart Phone Samsung Galaxy Young: 240 px x 320 px<br> | ||
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 | 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. | *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. | ||
| Línea 71: | Línea 71: | ||
</p> | </p> | ||
==TERCERO== | ==TERCERO== | ||
* | *MEDIDA UNO: Grillas | ||
<P>Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla. </P> | <P>Se clasificas según el tipo plantilla y se comparan según el tamaño de pantalla. </P> | ||
<p> | <p> | ||
| Línea 104: | Línea 104: | ||
*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. | *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> | <br> | ||
* | *MEDIDA DOS: Elementos y contenidos | ||
<BR> | |||
*MEDIDA TRES: Control e interacción del usuario | |||
a.Visualización e interacción con el Menú <br> | |||
a.1. Pantalla Completa | |||
<gallery> | |||
Image:FULL SCREEN menu incio franwevar.png|Estado normal | |||
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 eventos franwevar.png|Estado de la subsección "Eventos" al hacer ''hover''. | |||
Image:FULL SCREEN menu sitio hermano franwevar.png|Estado de link a sitio hermano al hacer ''hover''. | |||
Image:FULL SCREEN menu buscar franwevar.png|Estado de la barra de búsqueda al hacer click. | |||
</gallery> | |||
<br> | |||
a.2 Pantalla iPad ''768 px x 1024 px'' | |||
<gallery> | |||
Image:IPAD VERTICAL menu inicio franwevar.png|Estado normal | |||
Image:IPAD VERTICAL menu inicio desplegado franwevar.png|Despliegue del menú al pulsar el botón a la derecha. | |||
Image:IPAD VERTICAL menu cultura franwevar.png|Comportamiento de la sección "Cultura" al hacer ''hover''. | |||
Image:IPAD VERTICAL menu buscar desplegado franwevar.png |Despliegue de la barra de búsqueda al hacer en la "lupa". | |||
</gallery> | |||
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" | |||
<br> | |||
a.3 Pantalla iPhone 4 ''640 px x 960 px'' | |||
CONCLUSIONES | CONCLUSIONES | ||
Revisión del 00:00 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
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
- MEDIDA TRES: Control e interacción del usuario
a.Visualización e interacción con el Menú
a.1. Pantalla Completa
Estado normal
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
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.
