Caso Responsivo para la exposición ead 60 años
Título | Trabajo de Sitio Responsivo: Exposición de los 60 años |
---|---|
Tipo de Proyecto | Proyecto de Tutoría |
Palabras Clave | exposición ead, sitio responsivo |
Período | 2013-2013 |
Asignatura | Gráfica Digital 2013, |
Del Curso | Tutorías 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) | Carolina Nuñez |
Introducción
Durante la Exposición de los 60 años de la Escuela, llamada "Este Vuelo Quebrado y Anhelante", realizada en el Parque Cultural(Ex-carcel)Valparaíso en la fecha Viernes 21 de diciembre del año pasado. Se cerraba el año de celebraciones del aniversario e[ad], reflejando “el presente a la luz de Amereida”.
El montaje en si mismo constaba de "catorce pizarras temáticas, cada una de las cuales contará con la dimensión de: observación y dibujo; documentación y la palabra poética. Se consideran doce pizarras de travesía donde cada taller expondrá lo realizado este año en el continente americano, con especial atención a la travesía de Sao Paulo, la Bienal de Arte, la travesía a Nueva York y las travesías realizadas en Chile."[1]
Para este trabajo la idea es llevar a cabo la totalidad de la exposición a un medio digital, a través de un sitio web. En este caso se tomará una pizarra con sus respectivos contenidos para mostrarse en el sitio de una manera específica para una futura recopilación de las pizarras con una estructura determinada.
Problemática
Para poder entender la importancia del caso, se debe comprender la totalidad de los contenidos y la forma de estos, por lo tanto, poder hacer visible los contenidos es el reto, y hacerlo de una forma clara, precisa, reconocible y entendible.
Punteo a lograr
- Mostrar contenidos de una forma clara.
- Fácil navegación.
- Textos legibles
Elementos presentes
- Titular o Logo: "Exposición 60 años Escuela Arquitectura y Diseño"
- Header: Título texto y pizarra. "Diseño, Acto y Celebración. Pizarra 18"
- Imagen: Pizarra
- Poema: Fragmento
- Texto: 2 columnas de texto
- Slider: Visualización de imágenes de la exposición y/o de la lámina puesta bajo la pizarra.
Cohesión
Ubicación elementos en los diferentes dispositivos
Web Home
Propuesta Visual previa, (adelanto para pensar una forma de construir y ver facilmente todos los errores)
Vista del sitio, con la pestaña "Notas" abierta, en donde se desplaza la imagen de la pizarra a la izquierda, y se mantiene los márgenes del poema y el texto. Un poco más abajo se puede ver el slider en su estado extendido, es decir, vista maximizada.
Móvil
La visualización móvil corresponde a todo el contenido de la pizarra 18 "Diseño,Acto y Celebración"
Wireframe
El trabajo de wireframe siempre debe hacerse antes para maquetear sobre esta estructura y su forma para luego dar la identidad y el total al sitio que queremos mostrar, en este caso un Sitio sobre la Exposición de los 60 años de la Escuela de Arquitectura y Diseño.
La cual trata de dar a entender lo que fue, lo que se hizo y lo que se dijo en esta Exposición realizada en el Parque Cultural de Valparaíso(Ex-Cárcel) a fines del año 2012(21 de Diciembre)
Para poder comprender el contexto de la exposición, es que rescaté extractos y puntos importantes de la publicación realizada en el sitio de la Escuela, posteriormente a la inauguración, (en mi propuesta utilicé los textos en el Home)
- WireFrame del Home
- WireFrame de Travesías
- Wireframes de la Escuela
Galerías
- Móvil home.fw.png
Home en Móvil 1(840x)
- Móvil1 home.fw.png
Home en Móvil 2
- Móviltravesia.fw.png
Travesía en Móvil
Estructuras en comparación
Tipografías y Color
Helvética y Calibri:
- Helvética: Utilizada para título sitio, títulos, pestañas y footer.
- Calibri: Utilizada para fragmento poema, texto y notas.
Archivo:Helvética y calibri.png
Colores:
- Rojo #8C0000
- Crema #FFEFBF
- Negro #000000
- Blanco #FFFFFF
Visualizaciones
Trabajo en html y css
Partes del Sitio
Header: el cual presenta las siguientes pestañas de navegación en forma horizontal
- La exposición: La cual corresponde al Home, he introduce a los temas expuestos
- Pizarras: Comprendería la totalidad de pizarras(casos) según su tipo; travesías, taller,etc
- Galería de Imágenes: Se pensó en un html distinto que lleva a una galería más exhaustiva, tipo slider. En el archivo se muestra un ejemplo de fotografías.
- Notas: Comprende notas al margen para aclaración de contenidos del sitio.
Cuerpo: El contenido se pensó desde un principio como una extensión de un lienzo, al igual que el trabajo habitual en láminas de contenidos, este lienzo posee titulares los cuales son llamados y se despliega hasta la ubicación de estos. Para la versión móvil, los contenidos siguen manteniendo su forma con la variación de su menú, este desaparece de su forma horizontal y se muestra verticalmente.
Footer: Marginado a la derecha se dejan 2 link relacionados al sitio, corresponde al sitio de la Escuela y A Casiopea para los más interesados en temáticas específicas de la Ead.
Tamaños
Los tamaños El contenedor de todo corresponde a 1349x4700(#content) El recuadro en el que se sostienen los contenidos es en el div.#wrap que corresponde a 736xaltura variable, según cantidad de contenido. Recuadro con los contenidos, texto e imágenes #box.w2 corresponde a 664xaltura variable. Según cantidad de contenido. Footer: 1349x90
El tamaño de las imágenes corresponden a 3 tamaños determinados. Uno de portada y pizarrones y otro de contenido de apertura.
- Portada “Exposición” : Es la fotografía más amplia en el sitio y da la entrada a los contenidos, recorre el ancho máximo del contenido.
- Pizarrones: Estas imágenes abarcan el ancho del div “wrap”, es decir, la caja contenedora de la zona donde se trabaja en el contenido del sitio.
- Imágenes Introducción: Corresponden a 5 imágenes de la temática que inicia La exposición, estas están introducidas al ancho del div box.w2 (donde va el texto y fotos)
Contenidos
El contenido es conformardo por distintos textos:
- Textos adquiridos de Sitio Ead.pucv.cl
- Documentos Word y Excel de profesores, quienes se asignaron distintas temáticas para la exposición
- Recopilación fotográfica Exposición 60 años
Cambios
- Las dimensiones de las imágenes fueron reducidas para bajar el peso y manteniendo la calidad.
- Los pizarrones negros fueron editados, para que su fondo propio del original no rompiera con el color que se usó para el contenido, de modo que se usa el mismo.
- Desde un inicio la imagen inicial correspondería a una imagen insertada dentro de el div wrap, pero luego, se decidió mediante la observación de otros sitios web que el predominio en una gran imagen al inicio, llama al usuario a quedarse, al modo que lo hacen los "artículo fotográficos" o "noticias gráficas".
- Se planteó desde la segunda versión html, crear una página distinta para galería de fotos y poder desplazar a modo de slider las fotografías, esto no se pudo llevar a cabo. Por este motivo se sigue utilizando en la misma hoja las fotografías una al lado de otra, continuando el poema (en el sitio se da un ejemplo de como seguiría) la idea era poder crear distintas galerías en la pestaña.
Se trató de utilizar el siguiente código
<a href="javascript:imgNav(-1)" class="galNavegacion" id="galAtras"></a> <a href="javascript:imgNav(1)" class="galNavegacion" id="galAdelante"></a>
- <img src="URL_miniatura_1" height="100" width="175" />
- <img src="URL_miniatura_2" height="100" width="175" />
- <img src="URL_miniatura_3" height="100" width="175" />
- <img src="URL_miniatura_4" height="100" width="175" />
- <img src="URL_miniatura_5" height="100" width="175" />
"
y para el scripts "<script type="text/javascript"> // la lista de imágenes var imagenGaleria = new Array(); imagenGaleria[0] = ""; // dejar en blanco imagenGaleria[1] = "URL_imagen1.jpg"; imagenGaleria[2] = "URL_imagen2.jpg"; imagenGaleria[3] = "URL_imagen3.jpg"; imagenGaleria[4] = "URL_imagen4.jpg"; imagenGaleria[5] = "URL_imagen5.jpg";
var imgid = 'lasImagenes'; // el ID del bloque donde se mostrarán las imágenes var thumbid = 'lasMiniaturas'; // el ID del bloque con las miniaturas var auto = true; // poner en false si no se quiere que el slideshow funcione automáticamente var autodelay = 5; // cantidad de segundos entre cada imagen </script>" Luego cargando el script y lo ejecutamos: "<script type="text/javascript" src="URL_GAslideshow.js"></script> <script type="text/javascript">slideShow();</script>"
Estructuras y Partes
Tipografías
Se Utiliza la tipografía Open Sans y Lato, adquirida en google fonts