Diferencia entre revisiones de «Vergel 439»

De Casiopea
(Propuesta Final Interfaz)
(Exposición)
Línea 1937: Línea 1937:
 
*Espacio contenidos: 100 cms
 
*Espacio contenidos: 100 cms
 
[[Archivo:Sin título-.jpg|300 px]]
 
[[Archivo:Sin título-.jpg|300 px]]
 +
 +
===Cartograma de la método de trabajo===
 +
 +
====Propuesta 1====
 +
[[Archivo:Cartograma-propuesta-1.jpg|700px]]
  
 
===Referencias===
 
===Referencias===
 
<references/>
 
<references/>

Revisión del 16:20 26 may 2014



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,
«Interacción» no se encuentra en la lista (Arquitectura, Diseño, Diseño Gráfico, Diseño Industrial, Náutico y Marítimo, Ciudad y Territorio, Formación y Oficio, Interacción y Servicios, Otra, Magíster) de valores permitidos de la propiedad «Carreras Relacionadas».
ProfesorHerbert Spencer, Katherine Exss


Tabla de Contenidos

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

Mapa de Actores Vergel 439

Contenidos

Arquitectura de información

Mapa de navegación

Mapa de navegación del sitio Vergel 439

Mapa de navegación con arreglo de contenidos

Archivo:Mapa de navegación vergel 333 72dpi-02.png
Mapa de navegación con arreglo de secciones

A partir de las observaciones realizadas en los estudios de usuarios, se modificó la arquitectura de la información anteriormente establecida para garantizar un mejor flujo del usuario en el sitio. Las principales modificaciones se dieron en:

  • las sección de estudios, en donde se agregaron las categorías de estudios geográficos, arquitectónicos, de diseño y sociales; dentro de esta última se cataloga el mapa de actores, el cual anteriormente consideraba una pagina especial. De este modo, los futuros estudios serán mas accesibles si lla se presenta una subcategoría que los especifique.
  • En mapa, al cual se le agregan otros mapas que se están ejecutando dentro del grupo de trabajo de diseño, que no solo consideran la catástrofe del incendio del pasado 12 de Abril, sino que llaman a otros contenidos geográficos, tales como los incendios en Valparaíso dentro de la época de 1998 y 2010, los Drenes (flujos de agras) y bosque nativo en Valparaíso.
  • La última gran modificación es el agregar las idea y relatos dentro del menú superior, debido a que era difícil encontrarlos bajo el ítem de "concurso".

Indexación de contenidos

La estructura del sitio se subdivide en los siguientes 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

La estructura del inicio es la que muestra la actualidad de los contenidos del sitio, los cuales se van filtrando por los post mas recientes (tanto en relatos como en ideas concursantes). La prioridad actual del sitio es incitar a los visitante a crearse un usuario y participar del concurso de ideas y relatos, para recolectar la mayor cantidad de aportes de la comunidad involucrada con el incidente, tanto como al recordar como vivieron el suceso como al aportar con ideas constructivas para el espacio comunitario de Vergel.

Archivo:Partitura de interacción vergel participar en concurso.png
partitura de interacción para participar en el concurso

El flujo de interacción para a intención del usuario de participar varía en el hecho de estar registrado o no, de este modo, al no estar registrado el mis mo sitio te indica el punto en el que es necesario crearse una cuenta para participar, tanto si se elige el botón "regístrate" o "participa". Una vez registrado el flujo para participar es continuo hasta el momento de publicar el contenido.

Archivo:Partitura de interacción vergel ver votar y comentar.png
Partitura de interacción para ver votar y comentar

Para votar es necesario tener una cuenta de usuario en Vergel, mas para comentar solo se necesita estar conectado a una red social, esto se debe al plugin de "discus" que tiene su propia estructura interna para crear comentarios y foros de discusión acerca de una temática.

Archivo:Partitura de interacción vergel iniciar sesion.png
Partitura de interacción para iniciar sesión

Experiencia de Usuario

Personas y escenarios

Caso de estudio 1

Datos personales
  • Nombre: José Ruiz
  • Edad: 22 años
  • Ocupación: Estudiante Universitario de artes y aficionado a la fotografía
Antecedentes

José es un estudiante que ayudó como voluntario en el incendio de Valparaíso, en la remoción de escombros y en la construcción de viviendas de emergencia, pero además es aficionado a la fotografía, por lo que tiene un flickr en donde subió su registro fotográfico.

Escenario

Se entera a través de facebook que existe un sitio que presenta el espacio de vergel como un lugar para la comunidad y se presenta un espacio para dar ideas para construir ese espacio. quiere aportar su idea y compartir además sus registros de fotografías.

  • Recorrido a realizar: Entra al sitio vergel, se crea una cuenta y comienza a participar, primero llena el formulario de participación seleccionando la categoría de idea, agrega la url de sus imágenes por medio del botón de "agregar multimedia". Al publicar su idea la comparte a través de facebook para incitar a sus amigos para que voten por su idea.

Caso de estudio 2

Datos personales
  • Nombre: Cecilia Fuentes
  • Edad: 52 años
  • Ocupación: Ama de casa
Antecedentes

Cecilia fue afectada por el incendio, vive en un albergue junto a su familia, siente gran frustración y quiere expresar su vivencia personal.

Escenario

Se entera por redes sociales desde un android que esta el espacio para compartir si relato, ingresa desde el celular al sitio de vergel para compartir su vivencia.

  • Descripción del proceso a realizar: crea un usuario en el sitio, lee las bases y llena el formulario para compartir su relato, solo escribe, selecciona la categoría "relato" y publica.

Caso de estudio 3

Datos personales
  • Nombre: Cristian Sepúlveda
  • Edad: 48 años
  • Ocupación: Profesor de la carrera de Geografía
Antecedentes

Cristian durante su carrera profesional a desarrollado múltiples estudios sobre las condiciones geográficas de Valparaíso, soluciones y medidas preventivas para evitar otra catástrofe de la magnitud del incendio del 12 de abril.

Escenario

Cristian se entera a través de una invitación por correo de uno de los organizadores del proyecto vergel de que puede compartir sus estudios por medio de un sitio web que se está construyendo.

  • Descripción del proceso a realizar: Al no existir un formulario para subir un estudio, cristian envía su proyecto a través del formulario de contacto que sale en el footer, esperando que los encargados del sitio suban su estudio y lo difundan.

Pruebas de usabilidad

Guía de evaluación Heurística de sitios web

Pauta de Preguntas

Antes de comenzar la interacción entre los usuarios y el sitioVergel 439, se les explicó a las 3 personas que tendrían un tiempo inicial reducido para conocer el sitio, y que eran libres de visitar cualquier área de el.

  1. ¿De qué trata el sitio o de que crees que trata?
  2. ¿Cómo puedo llegar a participar? ¿Qué se hace?
  3. ¿Qué entiendes por "Estudios"?
  4. ¿Cómo Inicias Sesión?
  5. Comenta el relato de una persona
  6. ¿Cómo votarías por la idea de alguien?
  7. ¿Qué esperas encontrar en "Mapa"?

Trabajo con Usuarios

  • Diego Páez
  • 13 años
  • Estudiante Colegio Agustin Edwards

  1. Una página de Valparaíso,que informa sobre Valparaíso.
  2. Haciéndose la cuenta, se registra con el botón central del Home y luego participa.
  3. La pestaña Estudios cree que corresponden a investigaciones que hace esta página, piensa que existen recopiladores que suben información.
  4. Ve de inmediato el login en la esquina superior.
  5. Encuentra la pestaña Concurso y enseguida se introduce a relatos.
  6. De antemano se dió cuenta que se podía votar.
  7. En mapa espera encontrar lugares relacionados a la tragedia,zonas afectadas, albergues, centros de reunión.


  • Marcia Cornejo
  • 31 años
  • Comercio Exterior

  1. Inmediatamente al comenzar a interactuar con el sitio, se dirige a las pestañas de Vergel 439 y Concurso(bases del concurso) siendo la única persona de los 3 usuarios que posee una idea rápida de lo que trata el sitio.
  2. Clickearía en registrarse y después participaría; menciona que deben leerse las bases ante todo.
  3. La pestaña Estudios cree que tiene relación con lo que se quiere hacer en el memorial.
  4. Encuentra de inmediato el login en la parte superior derecha.
  5. Demora en poder comentar el relato o verlo, porque cree que todo el sitio tiene que ver con el espacio físico del memorial, luego nota que también se pueden escribir relatos. Piensa que debe estar logueada para acceder a la información de los relatos. Finalmente encuentra la zona de los relatos, y menciona que está mal ordenado; ya que en el sitio se encuentra primero el poder compartir y votar, luego "más relatos" y al final comentar. Ella determina que sería correcto al final "más relatos" ya que sería un cierre a ese momento, y el comentar tiene un valor más importante por lo que se debe mostrar antes.
  6. Dentro del mismo punto 5.
  7. Cree encontrar en la pestaña Mapa, el mapa del sitio. Luego nota que es un mapa de Valparaíso que trata sobre centros de acopio y otras cosas. Menciona la necesidad de simbología de los íconos en un costado, para tener claro que se está viendo ya que encuentra errores de cosas que son lo mismo y poseen diferente simbología.


  • Carlos Ortiz
  • 35 años
  • Ingeniero Ambiental

Al comenzar a interactuar con el sitio, lee la portada y de inmediato se registra, luego da a la pestaña Vergel 439 y lee un poco sobre el proyecto.

  1. El sitio trata de un concurso de relato de vivencia y estudios.
  2. Para participar, se iría a las bases del concurso para ver que antecedentes se requiere, ya que cree que no cualquier relato puede ser aceptado. Insiste en creer que debería aparecer algo sobre participar en bases del concurso.
  3. En Estudios cree que aparecerán distintos tipos de relatos, que fueron subidos por personas común y corriente y que luego la gente del sitio filtra si se publica o no.
  4. Olvidó cómo se había registrado, pero luego recuerda que fue en el Home.
  5. Se omite el punto 5, ya que el usuario en ningún momento comprendió de que trataban los relatos e ideas.
  6. Cree que se puede votar por el mejor tema, tanto en las pestañas; relatos, ideas, estudios.
  7. En Mapa cree primero que son los diferentes cerros de Valparaíso, luego para saber sobre que trata, clickea los íconos y pensó que al hacerlo aparecerían las ubicaciones de las distintas personas y sus relatos, esos relatos serían de experiencias con Valparaíso.

Visualización de tareas

Parámetros de Medición:

  • Excelente

(Entiende correctamente o logra la acción de manera clara y rápida)

  • Muy bien

(Se logra, pero no de manera rápida o clara)

  • Regular

(Se logra medianamente)

  • Mal

(No lo logra, pero trata de aclarar punto de vista)

  • Muy Mal

(No entiende o No logra la acción)

Tareas realizadas por Usuarios

Redacción de textos

Contenidos del Sitio

Home

Concurso de ideas y relatos Ideas para convertir las ruinas de Vergel 439 en un espacio socio-cultural Lee las bases aquí

  • Ya estás registrado, ahora sólo te falta compartir tu historia.(cuando se está logueado)

Vergel439(pestaña)

Nuestro Proyecto

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 compuesta por su esposa Soledad Ibaceta y su hijo Agustín, damnificados en estos sucesos, han decidido disponer de las “ruinas” de su vivienda en el Cerro La Cruz de Valparaíso, para desarrollar ideas orientadas a convertirlas en un espacio socio-cultural que rememore este acontecimiento.

Este “lugar de la memoria”, pretende ser el espacio donde se entienda constantemente la vulnerabilidad de los hombres frente a su entorno natural, construido y social. Esta vulnerabilidad fue lo que convirtió el incendio en una tragedia urbana.

El lugar, se entenderá como público, en donde todos serán partícipes de su crecimiento y permanente cuidado. El objetivo es pensar un espacio que invite a un buen uso del tiempo libre con acciones concretas de mejoramiento y recuperación del entorno físico y social mediante la educación. Como herramientas de esta propuesta se tiene la acción cultural que va en rescate de la identidad local. En su funcionamiento, pretende ser un espacio que consagre la acción voluntaria, generando una extensión que promueva el libre intercambio de aprendizajes y experiencias entre universitarios y habitantes de los cerros de Valparaíso.

Colaboradores

  • Parque Cultural de Valparaíso
  • Escuela de Arquitectura y Diseño PUCV
  • Facultad de Geografía PUCV

Concurso(pestaña)

Bases del concurso

Concurso Memoria del Incendio de Valparaíso EL VERGEL 439, CERRO LA CRUZ, VALPARAÍSO

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.

Concurso(pestaña)

Participa

Ideas Son propuestas del uso que se le podría dar a la casa afectada por el incendio en el cerro La Cruz, donada por el profesor Luis Álvarez, el cual menciona en una carta abierta: “Será un edificio como memoria para alguna finalidad. Gestionada por los estudiantes…allá arriba…”. Se quiere abrir la oportunidad a la comunidad de proponer ideas para este espacio.

Relatos Los relatos cuentan la experiencia vivida en el incendio de Valparaíso del pasado 12 de Abril, con motivo de construir una memoria colectiva, se seleccionarán experiencias para posteriormente utilizarlas en una exposición que se realizará en el Centro Cultural de Valparaíso.

Si es necesario, puedes insertar elementos multimedia como imágenes y videos.

  • Formulario de inserción de contenidos.

Estudios

Estudios Geográficos Los estudios que se reciben dentro de la categoría geográfica comprende todos los análisis, tesis, proyectos o actividades ejecutadas referentes al territorio de valparaíso, tales como vulnerabilidad de Valparaíso a través de una mirada geográfica, incendios a través de la historia, entre otros. Este espacio queda abierto a múltiples aportes de todo quien desee colaborar.

Estudios Arquitectónicos Los estudios que se reciben dentro de la categorías de arquitectónicos comprende todos los análisis realizados desde la mirada arquitectónica, ya sean observaciones anteriores a la catástrofe referentes a los cerros afectados, propuestas de construcción para solucionar los problemas actuales habitacionales a corto y largo plazo, entre otros. Este espacio queda abierto a múltiples aportes de todo quien desee colaborar.

Estudios de Diseño Los estudios que se reciben dentro de la categoría de diseño comprende todos los proyectos realizados o por realizar referente al área de diseño, tales como ediciones que recolectan temáticas referentes al incendio o posteriores soluciones, proyectos de señalética, actividades recreativas que incluyen al diseño y a la comunidad, entre otros. Este espacio queda abierto a múltiples aportes de todo quien desee colaborar.


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í.


Mapa de estudio

Primera propuesta

Contine tres capas de información:

  1. Drenes: muestra los espacios por donde escurre el agua con las lluvias
  2. Bosque nativo: Crea una trama de lineas en donde cada sector especifica la pendiente, el uso actual, las especies, entre otras.
  3. Incendios en Valparaíso entre 1998-2010, puntos en el mapa con especificaciones de la causa, la superficie, material siniestrado, el combustible, entre otros.

Ver aquí.

Iconografía

Primer mapa

Segundo mapa

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 propuesta

wireframe pc

wireframe movil

wireframe vertical

wireframe horizontal

Nuevos wireframes

Pc

Movil

tablet

Errores

Funcionalidad del sitio

Jerarquía

Parte Funcional

  • Regístrate
  • Participa
  • Ideas
  • Relatos

Parte Información

  • Vergel 439
  • Bases del concurso

Parte Registro

  • Mapa
  • Estudios
  • Prensa

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

Por motivos de tiempo, se comienza a trabajar en el diseño de interfaz a medida que sitio mismo se codifica. Bajo este contexto, no existe una etapa primaria de diseño de interfaz, sino más bien pruebas rápidas diseñadas "sobre la marcha". A medida que el tiempo fue avanzando, se comenzó a proponer nuevos diseños de interfaz, terminando este estudio particularmente, en la proposición de un diseño futuro.

Propuesta 1 Interfaz

Como anteriormente se señaló, la primera etapa de diseño de interfaz se realizó al mismo tiempo que este mismo sitio se codificaba, siendo esta la razón principal de por qué no existe una detención en el diseño.

Estado Actual

Actualmente el sitio está diseñado en base a una grilla de 12 columnas, las cuales construyen y muestran 4. Con un header fixed negro que incluye la navegación principal del sitio, incluyendo el logo que re dirige a la home, y la opción de registrarse y/o iniciar sesión. En relación al body, este muestra una foto correspondiente a la vista del plan de Valparaíso -tomada desde Vergel 439- sobre el cual se explica brevemente la consistencia del concurso y donde también se invita a participar y/o registrarse en el sitio mismo. El resto del body muestra la últimas ideas subidas, al igual que los relatos y noticias. En relación al footer, este muestra los links de enlaces a sitios relacionados y el acceso directo a redes sociales.

Desktop

  • Contenido del sitio
  • Navegación del Header

En relación a la navegación del header, este se muestra negro con letras en color #c6c6c6 en tipografía "Open Sans". Una vez que se hace hover sobre las diferentes opciones de la navegación, este se vuelve rojo, y al hacer click en alguna pestaña desplegable, esta muestra sus opciones en una caja blanca con letras negras. Una vez que sobre esta última navegación se hace hover, esta se muestra con letras rojas y fondo gris.

  • Navegación del Footer

El footer por su parte, también se muestra negra con letras grises, incluyendo links relacionados al sitio y el acceso a las redes sociales. Una vez que se hacer hover sobre estos diferentes links, estos se vuelven rojo.

Tablet

El principal cambio o ajuste desde desktop a tablet, es el cambio en el uso de la grilla, esta pasa 12 a 4 columnas. Y el contenido se vuelve más vertical, pierde los horizontes de lectura que antes se observaban en desktop.

  • Contenido del Sitio
  • Navegación de Header

Smartphone

El sitio visualizado en smartphone, se construye en base a una grilla de columna. El contenido se vuelve vertical por completo y el mapa de navegación en le header se convierte en un ícono desplegable.

  • Contenido del Sitio
  • Navegación de Header

Propuesta 3 Interfaz

En esta nueva etapa de proposición de interfaz se intenta explorar y trabajar sobre los fondos del sitio, sacándole provecho a las imágenes para contextualizar al visitante del sitio.

Propuesta 4 Interfaz

Interfaz 4 Vergel 469-01.png

Desktop

  • Interfaz Sitio (1280x800 px)
  • Navegación Header
  • Navegación Home
  • Navegación Registro/Inicio de Sesión

Tablet

  • Vertical (768x1024px)
  • Horizontal (1024x768px)

Móvil

  • Vertical (320x480 px)
  • Horizontal (480x320 px)

Propuesta 5 Interfaz

Interfaz 5 Vergel 469-09.png

Comparacion Vergel 439 interfaz 5.png

Comparacion colores interfaz vergel 439.png

Desktop

  • Interfaz Sitio (1280x800 px)

Tablet

  • Vertical (768x1024px)
  • Horizontal (1024x768px)

Móvil

  • Vertical (320x480 px)
  • Horizontal (480x320 px)

Propuesta Final Interfaz

Interfaz 6 Vergel 469-09.png

Desktop

  • Interfaz Sitio (1280x800 px)

Tablet

  • Vertical (768x1024px)
  • Horizontal (1024x768px)

Móvil

  • Vertical (320x480 px)
  • Horizontal (480x320 px)

Construcción front

Tema

Wordpress

Esta es una herramienta que te permite la creación de contenido semántico dentro de un aspecto de crecimiento colaborativo a través de sus extensiones creados por los mismo usuarios.

Básicamente lo que permite este sitio, es la selección de un tema predeterminado para luego subir el contenido que desea. Dentro de este esquema de trabajo el usuario lo que hace, es despreocuparse del diseño del sitio a través del código.

Vergel 439, se puede decir que es un híbrido ya que cumple con el hecho de que está dentro de esta plataforma usando un tema (theme) pre-diseñado llamado "Sambox" y además trabaja desde el código. Este tema tiene la gracia de que no contiene estilos aplicados, lo que nos permite diseñar a través de una hoja de estilo externa.

Páginas

Para este sitio se crearon diferentes estilos de páginas, los cuales fueron diseñados en base a plantillas:

Hojas

  1. Concurso
    1. Relatos
    2. Participa
  2. Confirmación Cuenta
  3. Contacto
  4. Documentos
  5. Editar Perfil
  6. Estadísticas Votación (privada)
  7. Estudios
    1. Estudios
    2. Mapa de Actores
  8. Mapa
  9. Prensa
  10. Regístrate
  11. Vergel439
  12. Iniciar Sesión

Plantillas

  1. Plantilla Predeterminada
  2. Archives Page
  3. Links Page
  4. Página Croquis de Fondo
  5. Página para el Mapa

Menús

Los menús son puesto en base al mismo wordpress, este permite la selección ya sea de un menú de Header o bien del Footer. Integras los elementos que desees, vinculándolo a una página ya existente dentro de un mismo sitio u externo. El orden de los menús se maniobra con el cursor llevándolo más arriba o más abajo dependiendo si se desea a la izquierda o bien a la derecha.

Header

  1. Home(ícono)
  2. Vergel 439
  3. Concurso
    1. Bases del Concurso
    2. Participa
    3. Relatos
    4. Ideas
  4. Mapa
  5. Estudios
    1. Estudios
    2. Mapa de Actores
  6. Prensa
    1. Prensa Nacional
    2. Internacional

Footer

  1. Contacto
  2. Escuela de Arquitectura y Diseño - PUCV
  3. Instituto de Geografía - PUCV
  4. Parque Cultural de Valparaíso
  5. Facebook - Vergel439
  6. Twitter - Vergel439

Desgloce del sitio

El tema además permite trabajar el tema a tráves de secciones determinadas como páginas php. Dentro de estas se escribe la fusión de PHP y de HTML, de esta manera wordpress interpreta el tema y muestra en la pantalla el contenido que se desee.

Páginas Php por default del tema

  1. 404.php
  2. archive.php
  3. archives.php
  4. attachment.php
  5. author.php
  6. category.php
  7. comments.php
  8. footer.php
  9. functions.php
  10. header.php
  11. image.php
  12. index.php
  13. links.php
  14. page-croquis.php
  15. page-map.php
  16. screenshot.php
  17. search.php
  18. sidebar.php
  19. single.php
  20. style.css
  21. tag.php
  22. wp_bootstrap_navwalker.php

PHP

Wordpress está basado en un lenguaje de códigos llamado PHP. PHP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTML en lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante.

Less

¿Qué es less?

Para la realización de tema utilizamos la herramienta less Less, es un lenguaje de hoja de estilo con un comportamiento dinámico que trabaja con variables, mixinis, operaciones y funciones. LESS CSS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable se quiere ahorrar tiempo de desarrollo, utilizar características avanzadas de estilos y para ahorrar trabajo —de allí su nombre: "less css (menos css)."

Variables

Una variable es la que nos permite definir en un lugar un valor (color, tipografía, tamaño de la tipografía), después este será utilizado en muchos lugar de la cascada. La ventaja de less es que por ejemplo podemos cambiar el color de la tipografía en la "hoja" donde están las variables y automáticamente en todos los lugares que fue utilizado, ese color cambiará.

Ejemplo de variables:
  @font-size-base:        14px;                 
  @rojo:                  #B81823; 
 
a{
 font-size:
 color:@rojo;
}    

Otra de las ventajas de Less es que estas variables pueden ser multiplicadas, divididas, sumadas y restadas para cambiar su estado.

captiondos{

 padding-left: 10px;
 padding-right: 10px;
 margin-top: @padding-small-vertical*18;
(Se multiplica la variable de un margen superior)

}


Mixins

Los Mixins te permiten embeber todas las propiedades de una clase dentro de otra clase simplemente incluyendo el nombre de la misma como una de sus propiedades.

Ejemplo de variables:

label-variant(@color) {

 background-color: @color;

}

Anidando

Cuando programamos en LESS no es necesario que escribamos largos selectores para especificar la herencia de nuestras reglas. Podemos usar selectores anidados dentro de otros selectores. Esto convierte a la herencia en algo limpio.


main_social{

 facebook_left{
   border-color:@rojo;
   height: 320px!important;
   top:50%;
     iframe{
       height: 320px!important;
       }
  }

}

Funciones del color

Además de existir variables que facilitan el escribir una cascada, también se pueden utilizar funciones de colores que nos permiten transformar un color.

  • lighten(@color, 10%); // devuelve un color un 10% mas "claro" que @color
  • darken(@color, 10%); // devuelve un color un 10% mas "oscuro" que @color
  • saturate(@color, 10%); // devuelve un color un 10% "más" saturado que @color
  • desaturate(@color, 10%); // devuelve un color un 10% "menos" saturado que @color
  • fadein(@color, 10%); // devuelve un color un 10% "menos" transparente que @color
  • fadeout(@color, 10%); // devuelve un color un 10% "más" transparente que @color
  • spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color
  • spin(@color, -10); // devuelve un color con 10 grados de tono menor que @color

[1]

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.


Además, se realiza un afiche para invitar a quienes tengan estudios relacionados a publicarlos en el sitio.

Afiche 1

Afiche 2

Afiche 3

Galería Afiches Finales

Afiche Estudios

Afiche Estudios 2

Afiche Estudios 3

Exposición

Disposición sala de música

Se realizo una maqueta de la sala de (1:20)cm para organizar la disposición de las lámina y los muebles durante la exposición de proyecto.


Propuesta 1

DSC 01372.jpg DSC 01382.jpg

Propuesta 2

DSC 01442.jpg DSC 01482.jpg

DSC 01492.jpg

Propuesta 3

DSC 01592.jpg

Propuesta 4

DSC 01642.jpg

Propuesta 5

DSC 01722.jpg DSC 01772.jpg

Láminas

  • Formato: 90 x 300 cms
  • Márgenes:
    1. Interior: 10 cm
    2. Exterior: 10 cm
    3. Superior: 100 cms
    4. Inferior: 100 cms
  • Columnas: 4
    1. dimensión: 16,3 cms
  • Espacio contenidos: 100 cms

300 px

Cartograma de la método de trabajo

Propuesta 1

Cartograma-propuesta-1.jpg

Referencias