Vergel 439

De Casiopea


TítuloVergel 439
Tipo de ProyectoProyecto de Taller
Palabras Clavediseño web, wordpress, incendio, Valparaíso
Período2014-2014
AsignaturaTaller de Diseño Gráfico 6ª Etapa, Taller de Diseño Gráfico 7ª Etapa,
Del Curso4º DG 2014,
CarrerasDiseñ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., Interacción"Interacción" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
ProfesorHerbert Spencer, Katherine Exss


Estudio de casos de usuario

Mapa de actores

Iconografia de los actores

Luego de analizar temporalmente todos los actores que participaron en esta catastrofe identificamos algunos que fueron los mas nombrados y principales. Para poder identificar de mejor manera los distintos actores se pensó en hacer iconos de 3 colores distintos para diferenciarlos, a continuación se muestran los 3 grandes grupos y los iconos de cada actor

Voluntarios

Gobierno

Externos


Mapa final con los 3 principales actores según la iconografía en base a la temporalidad del incendio en sus posteriores días. En círculos rojos se marca los conflictos e incongruencias de cada entidad involucrada y como se van cruzando entre ellos



Sustentabilidad del proyecto

Fondos consursables para Vergel 439

Los siguientes fondos fueron seleccionados después de un levantamiento de información, dejando solo los fondos que se podría llegar a postular para financiar el proyecto, indicando a quienes va destinado y cuando es el monto al cual se puede postular.

Fondos pertenecientes al FONDART

  • FONDART Regional: Desarrollo Cultural Regional:

Asociatividad Artística Cultural: Ofrece financiamiento total o parcial para proyectos que incentiven el trabajo colaborativo y asociativo, impulsando el desarrollo artístico y/o cultural a nivel regional.

Monto: $ 5.000.000

  • Ventanilla Abierta:

Línea Apoyo Intercambio y Difusión Cultural: Esta línea de concurso tiene como objetivo contribuir a la difusión y circulación de artistas y mediadores culturales chilenos en espacios de intercambio artísticos y culturales relevantes en el país, con motivo de una invitación, selección, clasificación, compromiso, participación o inscripción en eventos, certámenes, seminarios, congresos, espacios de residencias artísticas, y actividades afines, que contribuyan al fomento profesional de las Artes y la Cultura.

Monto: $ 5.000.000

Organizaciones Culturales: Esta Línea de concurso tiene por objetivo entregar financiamiento parcial para organizaciones culturales que contribuyan al desarrollo artístico y cultural del país.

Monto: $ 150.000.000 ($50.000 por año, asociado a una institución)

Fondos pertenecientes a la PUCV

  • Confía: Fondo concursable de la Dirección de Asuntos Estudiantiles y la Vicerrectoría Académica, dedicado a los estudiantes de pre grado de la PUCV que tengan interés en desarrollar ideas relacionadas con la promoción del arte y la cultura a través de actividades de extensión académica (seminarios, charlas, conferencias, entre otros)

Monto: No se especifica

  • Acción social: Fondo concursable de la Dirección de Asuntos Estudiantiles y la Vicerrectoría Académica, dedicado a los estudiantes de pre grado de la PUCV que tengan interés en desarrollar ideas relacionadas con la ayuda social, donde el eje central sea la responsabilidad social.

Monto: No se especifica

Fondos pertenecientes al sector Privado

  • Centro Cultural del Banco Interamericano del Desarrollo: Los objetivos del programa son:

· Reconocer y estimular las actividades de capacitación de centros de desarrollo cultural que comuniquen y difundan experiencias institucionales o comunales dignas de ser aprovechadas local o regionalmente.

· Favorecer la preservación y restauración del patrimonio histórico cultural.

· Ayudar a la formación de gestores culturales, la recuperación de tradiciones y el desarrollo de manifestaciones artísticas.

Monto: Entre US$3.000 hasta un máximo de US$7.000 dólares americanos.

  • Suelten las lucas: Lo que busca Suelten Las Lucas es la cooperación colectiva para recaudar financiación a través de donaciones en dinero, de personas naturales y jurídicas que quieran ver realizado un proyecto cultural. Es transformar la economía hacia el bien común.

Monto: No se especifica

  • Unesco: Fondo Internacional para la Diversidad Cultura:

El Fondo Internacional para la Diversidad Cultural es una manera de apoyar la aplicación de la Convención y fomentar el surgimiento de un sector cultural dinámico en los países en desarrollo.

Monto: No se especifica

Mapa de Actores Vergel 439

Contenidos

Arquitectura de información

Mapa de navegación

Mapa de navegación del sitio Vergel 439

La estructura del sitio se subdivide en los siguentes temas:

  • Contenido de inicio
    • Concurso ideas
      • Participa
      • Regístrate
    • Últimas ideas
    • Últimos relatos
    • Prensa relacionada
  • Menú superior
    • Vergel439
    • Concurso
      • Bases
      • Participa
      • Relatos
      • Ideas
    • Mapa
      • Mapa Valparaíso
    • Estudios
      • Mapa de actores
      • Estudios
    • Prensa
      • Prensa nacional
      • Prensa internacional
  • Iniciar sesión/registro
    • Regístrate
    • Iniciar sesión
  • Footer
    • contacto
    • colaboradores
      • Sitios de colaboradores
    • Redes sociales
      • Facebook
      • Twitter

Partituras de interacción

Archivo:Partitura de interacción vergel participar en concurso.png
partitura de interación para participar en el concurso
Archivo:Partitura de interacción vergel ver votar y comentar.png
Partitura de interacción para ver votar y comentar
Archivo:Partitura de interacción vergel iniciar sesion.png
Partitura de interacción para iniciar sesión


Redacción de textos

Comentarios de Usuarios a razón de los textos presentes en el sitio

Archivo:Esquemavergel1.pdf Comentarios de Usuarios a razón de los textos presentes en el sitio

Archivo

Prensa

Objetivo

El principal objetivo de esta sección es informar al usuario acerca de los hechos que han ocurrido desde el 12 de abril pero a través de las noticias.

Se mantiene al usuario informado acerca de las más recientes usando como medio el inicio de la página web.

Categorías

Se realizan difertes categorías para la realización de un filtro para cada noticia; de manera de poder etiquetarlas para su búsqueda.

  1. Nacionalidad: nacional / internacional (país)
  2. Medio: impreso / online
  3. Fuente: sitio o diario
  4. Fecha: día de publicación
  5. Autor: quien la escribió / publicó
  6. Tema: campañas de ayuda/ informativa / reportajes o relatos/ entrevistas/ política
  7. URL: dirección web (hecha link)

Etiquetas

Las noticias luego de pasar por una selección fueron subidas a Wordpress, donde fue necesario subirlas y clarificarlas para leer de manera ordenada. Las etiquetas consisten en el nombrar una serie elementos dentro de cada categoría.

NACIONALIDADES

  • Nacional (52)
  • Internacional (52)

MEDIO

  • Online (104)
  • Impreso (0)

`FUENTES

  • 24-horas (9)
  • 24h-montrea (2)
  • ahora-noticias (1)
  • ajeno (1)
  • armada-de-chile (1)
  • autogestion (1)
  • bbc-news (2)
  • biobio (1)
  • chicago-tribune (2)
  • clarin (2)
  • cnn (2)
  • cooperativa (1)
  • de-verdieping-trouw(1)
  • der-standard (1)
  • diario-registrado (1)
  • die-welt (1)
  • el-correo (1)
  • el-desconcierto (1)
  • el-espectador (1)
  • el-matutino (2)
  • el-mercurio-de-calama(1)
  • el-mostrador (1)
  • el-mundo (1)
  • el-pais (2)
  • el-tiempo (2)
  • emol (7)
  • france-info (1)
  • il-fatto (1)
  • indian-express (1)
  • istoe-dinhero (1)
  • la-jordana (1)
  • la-prensa (1)
  • la-segunda (1)
  • la-tercera (6)
  • l'avenir (1)
  • le-monde (2)
  • le-nouvel-observateur(3)
  • liberation (3)
  • minuto-uno (1)
  • nrc (1)
  • onemi (2)
  • pagina-12 (1)
  • plataforma-urbana (1)
  • publico (1)
  • publimetro (1)
  • puranoticia (5)
  • redvalparaiso (1)
  • resumen-irc (1)
  • sindical (1)
  • south-china-morning-post(1)
  • spiegel (1)
  • telam (3)
  • terra (1)
  • the-australian (1)
  • the-globe-and-mail (1)
  • the-guardian (1)
  • the-telegraph (2)
  • tribune-de-geneve (1)
  • ucv-radio (4)
  • usa-today (1)
  • usm (1)
  • zeit (1)

TEMA

  • Reportajes o Relatos(51)
  • Entrevistas (1)
  • Informaciones (52)


WEB

  • Wordpress

En cada noticia fue necesario color una base como PLATAFORMA de formatos de Wordpress para que pudiese tener un orden de lista desordenada.

  • Título de la Noticia
  • Estructura dentro de la noticia
<strong>Bajada de la noticia</strong>
<ul class="ficha-prensa">
	<li><span class="label">Nacionalidad:</span> Nacional</li>
	<li><span class="label">Medio:</span> Online</li>
	<li><span class="label">Fuente:</span> Emol</li>
	<li><span class="label">Fecha:</span> 13/05/2014</li>
	<li><span class="label">Autor:</span>  -</li>
	<li><span class="label">Tema:</span> Relatos o Reportajes</li>
	<li><span class="label">URL:</span> <a href="URL" title="url" 
target="_blank">URL</a></li>
</ul>
  • HTML

La estructura de ficha debe tener un formato HTML que permita definir un estilo posteriormente. pueden ser elementos de una lista (ul.ficha) y dentro de cada

<li> un <span class='label'> (para la etiqueta) 
<html>

<link type="text/css" rel="stylesheet" 
 href="css/aaa.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:
400,300,600,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:
400,300,400italic,700' rel='stylesheet' type='text/css'>   
<meta charset="utf-8">

<head>
	<title></title>
	
</head>
<body>
<h1> Título de la noticia</h1>
<h2><p>fecha</p><p>autor</p></h2>
<h3>Bajada de Título</h3>
<p>texto noticia</p>
<ul class="ficha-prensa">
<li> <span class='label'>Nacionalidad:</span> Nacional</li>
<li> <span class='label'>Medio:</span> Online</li>
<li> <span class='label'>Fuente:</span> 24 Horas</li>
<li> <span class='label'>Fecha:</span> Martes 29/04/2014</li>
<li> <span class='label'>Autor:</span> -</li>
<li> <span class='label'>Tema:</span> Informaciones</li>
<li> <span class='label'>URL:</span>  
<a href="http:////URL<" title="vybujnm" target="_blank">
http://URL</a></li>
</ul>
</body>
</html>
  • CSS

Ésta estructura corresponde al estilo que se le da al HTML anterior.

ul.ficha-prensa {
    background-color: #eee;
    padding: 20px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    list-style: disc;
    list-style-position: center;
    border-radius: 4px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1) inset;
    line-height: 200%;
    }

ul.ficha-prensa li{
    list-style-type: none;
    }
ul.ficha-prensa li span.label{
    display: inline-block;
    width: 90px;
    text-align: right;
    max-height: 5px;
    font-weight: bolder;
}

ul.ficha-prensa li a{
    color: #C00;
}

Pantallazo prensa.jpg

Estudios

Según la RAE se entiendo como un estudio una obra en que un autor estudia y dilucida una cuestión; en este caso es aplicado a Valparaíso y su aún reciente catástrofe. Se considera pertinente la utilización de los antecedentes previos que tengan que ver con el incendio de Valparaíso y claramente los posteriores de la materia. Buscando principalmente darle cabida a los trabajos que tratan de entregar posibles soluciones a los problemas que se han ido manifestando tanto con el incidente en si mismo como con los problemas anteriores al incendio.

Estudios publicados

  • Luis Álvarez en Tolerancia Cerro, Amenaza Colosal por Pastor Mellado[1]
  • Carta Abierta a la Ciudadanía por Carlos Jorge Avedaño Cass [2]

Estudios pertinentes por publicar en sitio

Proyectos que se presenten en la exposión del Parque cultural de Valparaíso en el mes de Junio.Estos se clasifican en estudios realizados y los proyectos por realizar.

Estudios externos a la exposición que se relacionen con Valparaíso, para lo cual se extendera una invitación para compartir proyectos directamente en el sitio.

Proyectos e[ad] PUCV

Mapa

Incorporar en el sitio el mapa del levantamiento de información para la ayuda post incendio, especificando instalaciones utilizadas como centros de acopio, de albergue, de ayuda a animales, centros médicos, además de puntos de encuentro de cuadrillas de trabajo, medios de transporte y la ubicación de la casa ruina que será utilizada como espacio sociocultural.

Modo de trabajo

Investigar plataformas para generar mapas interactivos:

Edición de mapa

1º Separación de capas

Se extrae información de Google Maps Engine (mapa de Levantamiento Valparaíso incendio), a través de la exportación de archivos en formato kml, el cual contiene datos geográficos y sus características. Estos se encontraban divididos en cuatro grupos:

  • Todo el mapa
  • Centros de salud y atención médica
  • Centros de acopio y albergue
  • Zonas afectadas

Teniendo el archivo se importa en un nuevo proyecto de mapbox online en donde se van separando cada capa de información en un mapa diferente para posteriormente exportarlos al formato kml nuevamente.

  • Acopio
  • Albergue
  • Cuadrilla
  • Junta vecinal
  • Catastro
  • Centros médicos
  • Ayuda animales
  • Transporte
  • Vergel 439

2º Creación de capas en Tilemill

Una vez obtenidos los archivos kml, estos se incorporan como una capa en el programa Tilemill (herramienta de escritorio para crear mapas interactivos basado en CartoCSS), generando inmediatamente un estilo en formato mss para los puntos marcados dando un color y tamaño predeterminado. Para reemplazar lo puntos por los íconos realizados, dentro de el estilo se ingresa la ubicación de la imagen junto con las características para la visualización.

Map {
}

#vergel4391 {
  marker-file:url("C:\Users\Administrador\Documents\Marker mapa final\vergel439.svg");
  marker-width: 16px;
  marker-placement: interior;
  marker-allow-overlap:true;
}

Para visualizar la información se ingresa a la plantilla en donde se escribe en código html dentro de la casilla de "posarse sobre el punto" y en la de "hacer click sobre el punto".

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#container {display: block; width:280px;}
h1 {font-family: 'Merriweather', 'Georgia'; font-size: 16px; text-align:center;}
img {width:24px; z-index:1;}
#header {height:28px; background-color:rgba(157, 31, 40, 0.8); border-radius:3px; z-index:0;}
#icon {width:26px; height:26px; padding: 2px; float:center; margin:auto;}
#title {padding-top:4px;}
</style>
<div id="container">
<div id="header">
<div id="icon">
<img src="http://www.clker.com/cliparts/b/3/2/1/14000190441065044319blanco_vergel439.svg"> </img>
</div>
</div>
<div id="title">
<h1>{{{Name}}}</h1>
</div>
</div>
</body>
</html>

Este código contiene una imagen en svg sobre un header de color, la cual tiene que ser subida a la web para poder llamarla. [3]

Información punto

Ya realizado esto se exporta en formato mbtiles cada una de las capas


3º Incorporar capas a Mapbox online

Se suben los archivos mbtiles en la sección "Data" de mapbox generando una capa única para cada grupo de datos. Esta se denomina con el nombre de usuario y una sucesión de números y letras

Ej: cindysanhueza.x5j2hvsr


4º Unión de capas en mapa interactivo generado con código Html

En un archivo html se comienza colocando la cascada de estilo y JavaScript de mapbox para poder llamar al mapa y éste no pierda sus propiedades.

 <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
 <script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
 <link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' />

A continuación se agrega el estilo de los botones que cumplirán la función de manejar el aparecer de las capas.

<style>
   body { margin:0; padding:0; }
   #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
</head>
<body>
<style>
#map-ui {
   position: absolute;
   top: 75px;
   left: 10px;
   list-style: none;
   margin: 0;
   padding: 0;
   z-index: 100;
}

#map-ui a {
   font: normal 13px/18px 'Helvetica Neue', Helvetica, sans-serif;
   background: #FFF;
   color: #3C4E5A;
   display: block;
   margin: 0;
   padding: 0;
   border: 1px solid #BBB;
   border-bottom-width: 0;
   min-width: 138px;
   padding: 10px;
   text-decoration: none;
}

#map-ui a:hover {
   background: #ECF5FA;
}

#map-ui li:last-child a {
   border-bottom-width: 1px;
   -webkit-border-radius: 0 0 3px 3px;
   border-radius: 0 0 3px 3px;
}

#map-ui li:first-child a {
   -webkit-border-radius: 3px 3px 0 0;
   border-radius: 3px 3px 0 0;
}

#map-ui a.active {
   background: #3887BE;
   border-color: #3887BE;
   border-top-color: #FFF;
   color: #FFF;
}
</style>

Para generar el mapa se coloca el código del que va a ser el mapa base, junto con las coordenadas del punto de enfoque inicial. Posteriormente se llama a las capas de información ubicadas en mapbox.

<ul id='map-ui'></ul>
<div id='map'></div>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'j-ulzurrun.i608i6d4').setView([-33.062, -71.613], 13);
var ui = document.getElementById('map-ui');

var vergel439 = L.mapbox.tileLayer('cindysanhueza.x5j2hvsr');
var albergues = L.mapbox.tileLayer('cindysanhueza.yzs7oukh');
var acopio = L.mapbox.tileLayer('cindysanhueza.nfngxo1c');
var catastro = L.mapbox.tileLayer('cindysanhueza.xl16c1ti');
var juntas = L.mapbox.tileLayer('cindysanhueza.zwgi4bji');
var cuadrillas = L.mapbox.tileLayer('cindysanhueza.0onyss2k');
var salud = L.mapbox.tileLayer('cindysanhueza.sxft76tq');
var animales = L.mapbox.tileLayer('cindysanhueza.51suxixd');
var transporte = L.mapbox.tileLayer('cindysanhueza.e4ke2xwk');

Se escribe el nombre de cada botón junto a la capa

addLayer(vergel439, L.mapbox.gridLayer('cindysanhueza.x5j2hvsr'),'Vergel 439', 1);
addLayer(albergues, L.mapbox.gridLayer('cindysanhueza.yzs7oukh'),'Albergues', 2);
addLayer(acopio, L.mapbox.gridLayer('cindysanhueza.nfngxo1c'),'Acopio', 3);
addLayer(catastro, L.mapbox.gridLayer('cindysanhueza.xl16c1ti'),'Catastro y Documentos', 4);
addLayer(juntas, L.mapbox.gridLayer('cindysanhueza.zwgi4bji'),'Juntas Vecinales', 5);
addLayer(cuadrillas, L.mapbox.gridLayer('cindysanhueza.0onyss2k'),'Cuadrillas', 6);
addLayer(salud, L.mapbox.gridLayer('cindysanhueza.sxft76tq'),'Centros Médicos', 7);
addLayer(animales, L.mapbox.gridLayer('cindysanhueza.51suxixd'),'Ayuda Animal', 8);
addLayer(transporte, L.mapbox.gridLayer('cindysanhueza.e4ke2xwk'),'Transporte', 9);

Finalmente se describe la función de los botones para ejercer el mecanismo de visualizar y ocultar cada una de las capas.


function addLayer(layer, gridlayer, name, zIndex) {
   layer
       .setZIndex(zIndex)
       .addTo(map);
   gridlayer
       .addTo(map);
   // add the gridControl to the active gridlayer
   var gridControl = L.mapbox.gridControl(gridlayer, {follow: false}).addTo(map);
   
   // Create a simple layer switcher that toggles layers on and off.
   var item = document.createElement('li');
   var link = document.createElement('a');

   link.href = '#';
   link.className = 'active';
   link.innerHTML = name;

   link.onclick = function(e) {
       e.preventDefault();
       e.stopPropagation();

       if (map.hasLayer(layer)) {
           map.removeLayer(layer);
           map.removeLayer(gridlayer);
           this.className = '';
       } else {
           map.addLayer(layer);
           map.addLayer(gridlayer);
           this.className = 'active';
       }
   };
   item.appendChild(link);
   ui.appendChild(item);
}
</script>
</body>
</html>

Primera propuesta

Primero se importa la información del mapa "Levantamiento Valparaíso Incendio" trabajado por profesores y alumnos de la escuela en la aplicación Google Maps Engine al editor online de Mapbox, el cual permite customizar los colores de los atributos del mapa (calles, áreas, territorio, markers, poligonos, etc), además permite colocar un ícono de Maki Project a los markers para poder distinguirlos. El editor online de Mapbox genera el código para poder embeber el mapa creado en el sitio. Ver aquí


Segunda propuesta

Incorpora los nuevos íconos, el nombre de cada lugar y genera una mayor interacción con el usuario al incluir la visualización de cada capa por separado. Ver aquí.

Iconografía


Los iconos para al mapa se encuentran en la misma ídea que el logotipo: tan simple como sea posible para identificar rápidamente lo que es, y el diseño de estilo flat design. La primera identificación es posible por el color. La segunda, gracias a los iconos.

Wireframes

Wireframes primera etapa

wireframes pc

wireframes movil

vertical


horizontal

Wireframes segunda etapa

wireframes pc

wireframes movil

wireframe vertical

wireframe horizontal

Wireframes propuesta

wireframe pc

wireframe movil

wireframe vertical

wireframe horizontal

Diseño

Influencia

Eduardo Chillida

Si bien es conocido especialmente en su faceta como escultor, comenzó a experimentar con las diferentes técnicas del grabado a partir de 1959, en las cuales se puede apreciar la construcción de la luz a través del negro, que juegan de manera variante para crear figuras y vacíos que construyen un espacio mediante la abstracción.

Primera propuesta

no demoler

Se decide mantener palabras claves que aparecen en la carta abierta escrita por el profesor Luis Alvarez en donde dice los vecinos quieren demoler todo "rastro", las ruinas "no se demuelen". y en la que pide explícitamente que rayen no demoler en los muros, además que es básicamente la finalidad del concurso, mantener y resguardar las huellas que quedan a través de la experiencia.

439

Del mismo modo se decide que la numeración de la casa 439 es relevante, ya que a pesar de que el incendio haya arrasado con todo, incluso las señaléticas del lugar, es algo intangible que permanece, la numeración indica la propiedad privada que ahora pasa a ser pública, es algo que no desaparece.

Segunda propuesta

Recuperando Valpo

Esta idea nació luego de una lluvia de ideas en donde se escogieron ciertas palabras que se reiteraban tanto en la carta de Luis Alvarez, como en las bases del concurso que escribió Gregorio Garretón, y algunas que engloban a otras como: memorial, vestigio, ruinas, preservar, conservar, recuperar. En otra categoría se encuentran aquellas que hacen alusión a lo sucedido como: catástrofe, incendio, siniestro. La tercera categoría hace alusión al contexto ¿dónde ocurrió?: cerro, la cruz, Valparaíso, Valpo y finalmente ¿qué es? ¿a quién va dirigido?: voluntarios, gente, concurso, ideas.

Finalmente se escogió Recuperando valpo, como un eslogan ya que el término recuperar proviene del idioma latín, en donde re significa reiteración y capere significa tomar. El acto de recuperar supone volver a tomar, o utilizar algo que ya había sido desechado o que hacía tiempo había perdido su uso. Además hace alusión a una catástrofe de manera implícita. Valpo se escogió ya que crea contexto sin excluir lugar ni personas y es la forma de decir más cercana y conocida por los porteños.

Tercera propuesta

Memoria Porteña

Esta propuesta recae en tres elementos, un círculo de color rojo opaco, que recae en lo vivo del fuego y de la memoria de esta tragedia, mientras que el segundo elemento es la contra forma de la casa de Luis Álvarez, sin embargo, no se busca representar a ésta, sino, que se toma ésta como concepto de ruina.La tercera corresponde a los textos."Memoria Porteña", estas buscan incorporace dentro de la circurferencia,o esquinandose, o bien, integrandose a la forma de la casa.

"Memoria Porteña" es un nombre que hace referencia de una manera cercana a la gente de Valparaíso. A través del término "memoria" queremos hacer viva una experiencia que contiene un largo recorrido y que hoy en idea sigue motivando a muchas personas a la construcción de un relatoo en conjunto el cual hoy nos motiva a trabajar en esto.

Cuarta propuesta

vergel 439

Intentando hacer un logo con rasgos mas notorios y sin tantos detalles y rescatando la influencia de Chillida, se crean formas y contraformas con la tipografía, para que ésta se integre de mejor manera al logo. Se continúa utilizando la imagen de la casa, pero se mantiene la forma más significativa.

Las primeras variaciones del logo fueron desechadas ya que no se lee correctamente la marca y 439 toma un mayor protagonismo

Quinta Propuesta

La casa quedó en ruinas, al igual que muchas que la rodeaban, sin embargo ésta tiene dos particularidades que se intentan rescatar a través del logo:

  1. su altura
  2. su ventana circular

esta imagen o signo se puede ver desde muchos lugares, y es reconocible a simple vista.

Archivo:Evolución del logo.jpg
Evolución del logo, previo al logo final
Ultimas propuestas

Propuesta final

Color

se pensó utilizar colores traídos desde el lugar donde se ubica las ruinas, sin embargo estos colores eran muy apagados para la página web; color ladrillo, gris ceniza además tenían una gran vibración. Es por esta razón que se usó el rojo # B81823 con el negro, que funcionan bien en la web y tienen tonalidades similares a las escogidas en un comienzo. El rosado #E84E59 nació de la variación del rojo, para crear una combinación monocromática.

Colores-02.png

Tipografía

se utilizan dos familias tipográficas, una con serif y otra palo seco, para que haya un mayor distingo y por que el sitio tiene una gran cantidad de textos

  1. Merriweather
  2. open sans

Interfaz

Primer Estado

Estado Actual

Desktop

  • Contenido del sitio
  • Navegación del Header
  • Navegación del Footer

Tablet

  • Contenido del Sitio
  • Navegación de Header

Smartphone

  • Contenido del Sitio
  • Navegación de Header

Propuesta Nueva Interfaz

Construcción front

Tema

Plugins

Plugins de WordPress utilizados para añadir diferentes funcionalidades al sitio:

Parche de traducción al español para el plugin Profile Builder:

Un problema detectado en el plugin utilizado para la creación de cuentas de usuario por fornt-end fue que no contaba con la opción de modificar los campos de formulario ni los mensajes del proceso en el panel de admninistración de wordpress, por lo tanto, fue necesario modificar cada uno de estos campos manualmente desde los archivos PHP, y respaldarlos, creando así este parche, como una medida contra la pérdida de esta traducción producida al sobreescribirse los archivos PHP cada vez que se actualiza el plugin, y para facilitar este proceso a toda persona que desee una versión en español de Profile Builder.

Mapa de divs

Difusión

Mecánicas del concurso

Bases del concurso

1. Introducción

Producto del trágico siniestro que afectó a la ciudad de Valparaíso el pasado 12 de abril de 2014, el académico Luis Álvarez Aránguiz, y su familia, damnificados en estos sucesos, han decidido disponer de las “ruinas” de su vivienda ubicada en el Vergel 439 del Cerro La Cruz de Valparaíso, para desarrollar un “Concurso Ideas y Relatos” que convoque ideas orientadas a crear un espacio socio-cultural que rememore este acontecimiento. Este Concurso busca ideas para la generación de este lugar que pretende crear la Memoria del Incendio, así como también, el registro de la experiencia de todos quienes voluntariamente apoyaron en los cerros, los días posteriores a la Tragedia.

2. Antecedentes

Son las ruinas de la mayor “tragedia urbana” de Valparaíso, ciudad que vive de la desgracia para refundarse constantemente, con la particularidad de la ciudad Puerto; que se funda y re-funda con el testimonio, que es comunitario y abierto para todos. El propósito de este lugar, es crear una memoria para la ciudad, para quienes la habitan hoy y en un futuro. Será el recuerdo de lo frágil que es el hombre frente a realidades urbanas adversas, asimétricas y excluidas.

3. Convocatoria

Este primer paso para la construcción de la Memoria del Incendio en El Vergel 439, se presenta a modo de Concurso de Ideas y Relatos, que busca registrar la experiencia vivida por cada una de las personas; los que apoyaron en los Cerros de Valparaíso como voluntarios; las familias damnificadas; y los testimonios varios de los espectadores a lo largo de la Región.

La participación busca rescatar la esencia de la experiencia personal vivida en las distintas labores realizadas. La suma, convergencia y divergencia de estas experiencias e ideas harán surgir los siguientes pasos para la construcción del lugar de la Memoria del Incendio. Esta convocatoria es abierta y se extiende a todos quienes quieran participar. Las ruinas de la casa están abiertas a quien quiera visitarlas a modo de guía para la elaboración de las propuestas.

4. Formato de entrega

El formato de entrega es libre, y deberá ajustarse al formulario web disponible en este sitio. Se podrá postular con el medio de expresión que más parezca al postulante (relato escrito, fotografìa, audio, video, dibujo, etc).

La propuesta se podrá clasificar en dos categorías;

(a) un relato de la experiencia antes mencionada (incorpora el registro).

(b) una idea acerca de qué debiera ser y/o cómo se debiera desarrollar en el tiempo, una Memoria-Ruina del Incendio.

Todas las postulaciones se recibirán por medio este sitio web y se podrá enviar la cantidad de propuestas que el participante desee.

5. Plazos

La convocatoria abre su periodo de recepción de propuestas el día jueves 15 de mayo de 2014 y finaliza el día 15 de junio de 2014 a las 23.59 horas.

6. Distinciones y autorías

Este Concurso de Ideas busca la generación de un fundamento y soporte para la posterior realización de un Concurso Profesional para el desarrollo del Proyecto y Construcción del lugar de la Memoria del Incendio en el Vergel 439, al mismo tiempo que se centra en la creación de un registro de las experiencias humanas y sociales vividas los días posteriores al incendio. Todo esto, será parte de una publicación posterior.

Los autores de la(s) idea(s) que resulten seleccionadas, serán invitados a participar en la generación de los siguientes pasos para la materialización del lugar de la Memoria del Incendio.

Existirá un jurado que evalúe las propuestas. Los integrantes de este jurado serán publicados próximamente.

Se entregarán premios a las postulaciones que resulten ganadoras, así como también las postulaciones que obtengan más valoraciones positivas dentro del sitio. Estos premios serán publicados próximamente.

Pasos para participar

Los que deseen participar en esta iniciativa deben:

1. Entrar al sitio www.vergel439.cl

2. Registrarse ingresando sus datos

  • Nombre
  • Apellido
  • Mail
  • Biografía (opcional)
  • Contraseña

3. Llenar ficha de postulación

  • Título
  • Categoría
  • Tu historia
  • Etiquetas

Redes sociales

Para llegar de manera mas rápida a las personas y poder dar a conocer a iniciativa, se crearon cuentas en los 2 sitios mas populares en lo que a medios digitales se refiere, estos son Facebook y Twitter.


Facebook

Al principio se decidió crear una cuenta (un perfil) de facebook pero debido a que este no aceptaba el nombre Vergel como uno real, se creo una página de facebook la cual es administrada por varios alumnos del taller.

Página en facebook

Twitter

[ https://twitter.com/Vergel439 Cuenta en Twitter]

Cabe destacar que ambos sitios están relacionados con el sitio, estos automáticamente publican cualquier nuevo articulo aportado.

Ambas cuentas fueron creadas con una cuenta en gmail. elvergel439@gmail.com

Imagen

Se decidió acompañar al logo con una imagen que de a conocer la procedencia de este, haciendo visible la punta característica del techo, familiarizando a las persona con lugar.

1ra Elección
Portada, 2da Elección

Prensa

Afiche

Se realizan 2 propuestas para ser difundidas de manera impresa y digitalmente.

En ambos se decide trabajar con escala de grises debido al gran contraste que se genera en el blanco de las páginas, además que trabajar a un color reduciría los costos de impresión.

  • Son utilizadas las mismas tipografías que se encuentran en el sitio web.


Afiche 1

Afiche 2

Afiche Estudios