Caso Responsivo para la exposición ead 60 años

De Casiopea



TítuloTrabajo de Sitio Responsivo: Exposición de los 60 años
Tipo de ProyectoProyecto de Tutoría
Palabras Claveexposición ead, sitio responsivo
Período2013-2013
AsignaturaGráfica Digital 2013
Del CursoTutorías Gráfica Digital 2013
CarrerasDiseño Gráfico
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]

  1. Noticia publicada por Eugenia Rivieri, Periodista e[ad] • 18 de diciembre, 2012[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)

Web1.jpg

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.

Pestaña Notas abierta y Slider extendido

Móvil

La visualización móvil corresponde a todo el contenido de la pizarra 18 "Diseño,Acto y Celebración"

Archivo:Movilexpo60años.jpg
Vista móvil total

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

Estructuras en comparación


Ver 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

Coloresjuntos.fw.png

Visualizaciones

Visualización Móvil
Visualización Tablet
Visualización Web


Trabajo en html y css

html 1 2 Versión Última

Partes del Sitio

Header: el cual presenta las siguientes pestañas de navegación en forma horizontal

  1. La exposición: La cual corresponde al Home, he introduce a los temas expuestos
  2. Pizarras: Comprendería la totalidad de pizarras(casos) según su tipo; travesías, taller,etc
  3. 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.
  4. 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.

  1. 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.
  2. 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.
  3. 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:

  1. Textos adquiridos de Sitio Ead.pucv.cl
  2. Documentos Word y Excel de profesores, quienes se asignaron distintas temáticas para la exposición
  3. Recopilación fotográfica Exposición 60 años

Cambios

  1. Las dimensiones de las imágenes fueron reducidas para bajar el peso y manteniendo la calidad.
  2. 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.
  3. 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".
  4. 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

Headerunidos.jpg
Imagen al ancho de la caja de texto


Tipografías

Se Utiliza la tipografía Open Sans y Lato, adquirida en google fonts

Fuentes Utilizadas