Diferencia entre revisiones de «Cacao Tour»
Línea 15: | Línea 15: | ||
=Contenidos= | =Contenidos= | ||
*Home | |||
[[Archivo:Screen home web.jpg|800px|thumb|Tamaño Extendido en la Web]] | [[Archivo:Screen home web.jpg|800px|thumb|Tamaño Extendido en la Web]] | ||
[[Archivo:Familia rizeh home.jpg|800px|thumb|Web, pestaña "Familia Rizeh"]] | [[Archivo:Familia rizeh home.jpg|800px|thumb|Web, pestaña "Familia Rizeh"]] | ||
[[Archivo:Grilla web.jpg|300px]] | [[Archivo:Grilla web.jpg|300px]] | ||
84px=3cm aprox de márgenes exteriores, desde allí la grilla ocupa una superficie par, en web se trabaja con 8 columnas que se sostienen en pantallas de escritorio o portátil, mi notebook es de 15" con una resolución de 1366x768px, al ajustar la ventana a la mitad de su tamaño, la grilla cambia a 4 columnas y es ahí donde se produce el cambio de formato. | 84px=3cm aprox de márgenes exteriores, desde allí la grilla ocupa una superficie par, en web se trabaja con 8 columnas que se sostienen en pantallas de escritorio o portátil, mi notebook es de 15" con una resolución de 1366x768px, al ajustar la ventana a la mitad de su tamaño, la grilla cambia a 4 columnas y es ahí donde se produce el cambio de formato. | ||
[[Archivo:Grilla web1.jpg|300px]] | [[Archivo:Grilla web1.jpg|300px]] |
Revisión del 04:11 4 jul 2013
Título | Caso de estudio: Cacao Tour |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | Responsive Design, Caso de estudio |
Período | 2013-2013 |
Del Curso | Gráfica Digital 2013, |
Alumno(s) | Carolina Nuñez |
URL | http://www.cacaotour.com |
Responsive Design
El diseño responsivo nos hace plantearnos la tarea de analizar un sitio web y su comportamiento, en este caso CacaoTour: El Sendero del Cacao.
Contenidos
- Home
84px=3cm aprox de márgenes exteriores, desde allí la grilla ocupa una superficie par, en web se trabaja con 8 columnas que se sostienen en pantallas de escritorio o portátil, mi notebook es de 15" con una resolución de 1366x768px, al ajustar la ventana a la mitad de su tamaño, la grilla cambia a 4 columnas y es ahí donde se produce el cambio de formato.
En esta dimensión pasa el "formato" Web a un posible tipo de tablet. El menú antes extendido en la parte superior, se ordena verticalmente y es llamativo para el contacto touch, se mantiene el orden de las noticias y las imágenes entre ellas están en poca diferencia de tamaño, a diferencia de el tamaño Web que existe una imagen en tamaño más grande y miniaturas en galería.
En esta dimensión, se mantiene el menú vertical y las fotografías mejor expuestas, una principal y dos columnas de fotos más pequeñas.
Párrafos
- Párrafos Web
Está conformado con cajas de texto de 2 y 3 columnas, las cajas de dos columnas, suele ser por una imagen mayor al ancho del párrafo que lo acompaña o marginado a un costado con la imagen al borde opuesto. Además presenta un banner que soporta las pestañas del menú con su logo central.
La tipografía no presenta cambios en ninguna modalidad.
- Párrafos Tablet(menores a 1280px)
Comprende una caja de texto, flujo continuo, intercalado con imágenes, y como antes se mencionó, presenta dos columnas de imágenes minimizadas en la parte de galería fotográfica. El banner desaparece, se quita el ícono de la semilla que acompaña cada Titular (pestañas y el logo queda como insignia del sitio en su centro.
- Párrafos Celular
Párrafos Marginados a la izquierda, continua con el mismo régimen anterior(tablet), salvo que el logo es reducido. Al girar el celular (sentido horizontal) se continua la misma lógica, sin banner, el tamaño del logo reducido, no existe el ícono de la semilla, y las fotos ocupan todo el cuadro con las dos columnas respectivas dichas. La tipografía se reduce directamente proporcional al tipo de dispositivo con el cual se abre el sitio.