Gley Riquelme: Rediseño Sitio Travesías
| Título | |
|---|---|
| Palabras Clave | Diseño Gráfico, Construcción, Travesías, Diseño de interfaz |
| Período | 2010-2010 |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Gley Riquelme |
| Profesor | Herbert Spencer |
Proyecto
Análisis Sitio Web www.ead.pucv.cl
Observaciones Generales
El Sitio de la escuela es un generador de contenidos, en el sentido de que hasta ahora solo entrega información a quien accede a él, pero no existe un espacio de retroalimentación, salvo los comentarios que se pueden dejar en las secciones, que por lo general son los mismos profesores de la escuela quienes comentan el articulo. Creo que por un lado se puede pensar en cómo hacer que quien acceda al sitio sea colaborador de contenidos, pero también hay que cuestionarse hasta qué punto puede ser esa persona colaborativa, para no perder la fidelidad de la información. Por otro lado falta una muestra de qué ocurre en cada taller de arquitectura y diseño, qué se hace en cada etapa de estas carreras, quizá esto es parte de cómo es la enseñanza en la escuela (falta algo que defina cual es la diferencia de la educacion en la e[ad], en diferencia a las otras escuelas de diseño)cómo podemos describir el perfil de la escuela, y quizá a parte de enfocarse a lo que se realiza en cada taller, dar a conocer las actividades que realiza la escuela, actividades en donde los oficios se complementan, como lo son: Farándula/ Torneos/ Fiesta de San Pedro/ Misiones/ otras.
Audiencia
Según el análisis de Google Analytics, el sitio cuenta con un alto porcentaje de visitas, de las cuales asisten de todos los continentes. Sin embargo, el porcentaje de rebote también es alto lo que implica que no hay algo que retenga o atraiga a la visita en el sitio a menos de que el contenido que reciba sea de su interés.
La audiencia del sitio esta pensada para:
- Estudiantes de la escuela
- Profesotres de la escuela
- Postulantes a la escuela
- Alumnos de intercambio de Diseño y Arquitectura
- Profesores de Diseño y Arquitectura de otros establecimientos
Mapa de Navegación sitio www.ead.pucv.cl
Análisis de Contenidos
- Escuela:
- Historia
- Admisión
- Campus
- Cuerpo Docente
- Autoridades
- Catolicidad
- Prensa
- Amereida:
- Biblioteca Con§tel
- Travesías
- Taller de Amereida
- Ciudad Abierta
- Alumnos:
- Cuerpo Coordinador
- Procesos Administrativos
- Calendario
- Exalumnos
- Servicios
- Movilidad Estudiantil
- Bolsa de Trabajo
- Datos Personales
- Carreras:
- Arquitectura
- Diseño
- Postgrado:
- Magister Diseño Nautico y Marítimo
- Magister Ciudad y Territorio
- Mundo:
- Extensión
- Investigación
- Archivo Histórico José Vial Amstrong
- Taller Ediciones
- Wiki Casiopea
El contenido, a pesar de estar ordenados con una cierta lógica, aun parecen estar muy dispersos, en donde algunas temáticas salen de lugar.
Se debe pensar en un modo de reordenar los contenidos del sitio:
invento cinco categorías posibles:
- Historia y Visión
- Carreras y Postgrados
- Perfil de la Escuela
- Documentación
- Procesos
Propuesta I
Escuela > Campus
Esta Sección va enfocada a quienes no conocen dónde se ubica la escuela de Arquitectura y Diseño,la Ciudad Abierta y la Casa Central de la PUCV. Los recursos de Google Maps estan bien empleados para tener la referencia de cada lugar, pero sin embargo, falta tener ina imagen de los lugares a los cuales se hace referencia, a través de la fotografía, ya que quienes no los conocen hacen un referencia visual con cada uno.
Propuesta II
Amereida > Taller de Amereida
Esta sección habla de una descripción del Taller, qué es, qué se habla, qué se hace, donde es, cuando, etc., pero no hay algo que muestre directamente cómo ocurren cada uno de los talleres, cual es su forma, porqué este taller es tan especiañ. Falta implementar el recurso fotográfico que ya hay, pero que no está aprovechado en esta sección del sitio, algo que se pueda mostrar a alguien ajeno a la escuela Cual es la forma de estos talleres, donde se realizan, quienes participan, cómo participan.
Propuesta III
Amereida > Travesías
En este sitio hay una descripción de lo que son las travesías y junto con ello, se adjunta una colección de todos los viajes realizados por año, acompañados por una referencia en Google Maps de cada lugar al que he ha ido y una documentación resumida de cada experiencia. Sin embargo, este sitio podría construirse de un modo mucho más colaborativo, a través de quienes asistieron a las travesías creando espacios de opinion, grupos en flickr en donde se recopila un documentación fotográfica de los lugares y faenas realizadas que se van publicando en esta sección. De este modo, el relato que hay cada travesías sería apoyado por esta documentación fotográfica más que un Google Maps.
Sitio Travesías
travesias.ead.pucv.cl
Contenidos del Sitio
- Ubicación de todas las travesías (Background Google Maps)
- Acerca de las Travesías
- Años de Travesías
- Travesías por cada año
- Lugar
- Fechas
- Talleres
- Profesores
- Titulantes
- Ayudantes
- Ruta
- Latitud - Longitud
- Textos Leidos
- A Saber
- Travesías por cada año
Análisis del Sitio
- Travesías - 1.jpg
- Travesías - 2.jpg
- Travesías - 3.jpg
- Travesías - 4.jpg
- Travesías - 5.jpg
Escructura Actual del Sitio segun sus espacios de imagenes y Textos:
Estructura Inicio Sitio Travesías
Selección de travesías en un año
Estructura 1 de travesía especifica
Estructura 2 de travesía especifica
Cómo se compone un año de Travesía
En un año, se ejecutan varias travesías, compuestas por distintos talleres y profesores que van documentando desde antes de ejecutar la travesía (pretravesía) ya sea ruta, campamento, comida, ámbito, y otros. en travesía se ejecutan distintas faenas para crear la obra que se presenta finalmente en un acto con la gente del lugar.
Propuesta
Archivo:Mapa navegación Propuesta.jpg La propuesta del mapa de navegación es del resultado de un card sorting, él implica una reagrupación de elementos y evidenciar más la existencia de otros como lo son el hecho de colaborar en el sitio, la existencia de una galeriía.
Wireframes I
Wireframe II
- Imagen del Head que sea capaz de traer algo de la travesía
- Logo de las travesías
- Buscador
- Barra de Acciones
- Menú de Años de Travesías
- Google Map de Todos los lugares de Travesías
- Información de lo que tratan en las travesías (información traída desde la Wiki)
- ventana que se despliega y que contiene post de los usuarios que han ido a travesía
- Habla de la historia de las travesías, como un encabezado de un articulo de la wiki
- Galería de imagenes en flickr de todas las travesías, un feed que se actualiza con las ultimas imágenes subidas
Wireframe III
Wireframe IV
Wireframes V
- Logo de las travesías con enlace al inicio del sitio.
- Buscador.
- Ingreso al sitio a través de "Personas".
- Selección de Travesías que se posicionan en el mapa, por default se muestran todas las travesías realizadas por la escuela.
- Experiencia de Travesía, como un feed de Twitter, en donde no solo pueden comentar las personas que estan registrados en el sitio, sino, basta con tener una cuenta en twiiter
- Mapa donde se visualizan las travesías
- Tablero de los aportes personales
- ventana de contenido
- Corredor de imagenes, en donde se ven las últimas fotografías subidas
- footer del sitio.
Análisis Wireframes
Interfaz (III)
Inicio del Sitio de Travesías
Selección de Travesía
Replanteamiento del Sitio de las Travesías
Sistema de Documentación del Sitio
El Sitio de Travesías planteado en el proyecto es un visor que muestra información proveniente de otros sitios, como lo son en este caso: • Wiki Casiopea • Flickr • Twitter
Archivo:Documentación Sitio Travesías.jpg
Objeto Travesía en la Wiki
El contenido principal de las travesías es el que está documentado en la wiki. la idea es que este contenido proveniente de la wiki, sea llamado mediante un sistema de etiquetas. Para ello habría que crear en la Wiki un “Objeto Travesías”:
Tiempo
- Fecha
- Día
- Mes
- Año
Ubicación
- Lugar
- País
- Localidad
- Latitud
- Longitud
- Ruta
Grupo
- Talleres
- Integrantes (como objeto semántico)
- Profesores
- Integrantes (como objeto semánticos)
- Titulantes
- Integrantes (como objeto semántico)
- Ayudantes
- Integrantes (como objeto semántico)
Textos Leídos
- Etiquetas de los Textos leídos
- Documentación escrita
Sistema de Usuarios
El Sitio de las Travesías trabaja con la misma base de datos de la Wiki (Casiopea) por lo que el ingreso se hace a través de http://personas.ead.pucv.cl/
Usuario / Persona Semántica
Cada Usuario dentro del Sitio Travesías puede marcar las travesías a las cuales ha asistido, de modo que se crea una lista de las personas que asistieron a la experiencia.
¿Pero cómo queda documentado en la Wiki?
A cada usuario de le asocia una Persona Semántica de la wiki, una persona que puede tener proyectos, talleres, etc y Travesías. de modo que al marcar en el sitio una travesía como “asistida“ se crea una etiqueta en el articulo de la Travesía de la Wiki con la persona semántica. Así pordría preguntar por una persona, para saber a qué travesías asistió.
Nuevo planteamiento de Mapa de Navegación
Interfaz (V)
Inicio del Sitio
Selección de "Mis Travesías"
Presentación de Travesía
Personas y Escenarios
1 Caso
- Nombre: Francisco Ahumada
- Edad: 24 años
- Ocupación: Arquitecto egresado de la e[ad]
Descripción: Es de San Vicente, estudió arquitectura en la e[ad], actualmente se encuentra viviendo en la quinta región, haciendo un magister de arquitectura en el mismo establecimiento. Tiene un notebook en su departamento con el que generalmente trabaja en Autocad para hacer planos, revisa su correo, se conecta a msn y navega por internet diariamente.
Escenario: Un día sábado Francisco ingresa desde su casa al sitio de las Travesías ya que recordó que tiene una serie de fotografías y poemas que se leyeron en la Travesía de Ilha Grande, Brasil, del año 2008 y desea subir ese material. __________________________________________________________________________________________________________
2 Caso
- Nombre: Flavia Leguizamon
- Edad: 21 años
- Ocupación: Estudiante de tercer año de Arquitectura de la Universidad de Chile.
Descripción: Es de Santiago, estudia arquitectura en la Universidad de Chile, dispone de tres computadores en su casa, de los cuales dos son notebook. Generalmente suele usar unen Autocad, pero diariamente se conecta a facebook, msn revisa su correo y navega por internet.
Escenario: Un día sábado, en una junta familiar, Flavia se entera de que una prima que estudia diseño en la e[ad], realiza travesías dentro de Sudamérica como una actividad propia del establecimiento. Ella se interesa por el tema, y una vez llegando a su casa, ingresa desde su notebook a internet buscando el sitio de las Travesías,una vez que lo encuentra ella desea conocer más acerca de ellas, de qué se trata y qué proyectos se realizan, y si es posible, poder comentar sus preguntas sobre el tema. ____________________________________________________________________________________________________________
3 Caso
- Nombre: Heredi Hervia
- Edad: 21 años
- Ocupación: Estudiante de Diseño Industrial de la e[ad]
Descripción: Es de la quinta región, vive en Quilpué y viaja casi todos los días a Viña a la e[ad]. En su casa cuenta con 4 notebooks, uno que es totalmente personalizado para ella, en el cual usualmente se dedica a trabajar en Inventor y diariamente se conecta a facebook, msn y revisa su correo.
Escenario: Ya en travesía, Heredi ha sacado muchas fotos del lugar al que han viajado, además pertenece al grupo de cocina en donde tiene documentadas todas las proporciones de los alimentos para las 48 personas que están en su travesía. Llegando al hostal se conecta en uno de los computadores que hay allí para subir las mejores fotos que ha tomado y documentar los antecedentes de las proporciones de comida, además de dejar un comentario de lo que ha vivido en el lugar.
Protocolo para Pruebas con los Usuarios
Lo que se desea medir con este procedimiento es la capacidad de entendimiento de la interfaz del sitio referido a la documentación de las travesías. Si las jerarquías son claras de manera que los procedimientos para realizar alguna acción dentro del sitio, sean claras. Si la manera de ver la documentación es apropiada (distribución de espacios).
Preguntas
- ¿Es clara la distribución del Contenido en el sitio?
- ¿Es legible la opción de selección de las travesías para el mapa?
- ¿Es clara la ventana de ficheros propios en el momento de ingresar?
- ¿te parece correcta la clasificación de los ficheros propios o crees que faltan clasificaciones o sobran?
- ¿Los iconos van de acuerdo a lo que señalan (¿son legibles?)?
- ¿Los términos que se emplean para señalar las cosas son comprendidos?
- ¿La navegación te acomoda o es confusa?
Resultados
- Los espacios del sitio se entienden, se comprende que hay un mapa que muestra el total de viajes llevados a cavo, otro que habla de una documentación y otro que muestra un corredor de fotos de los viajes.Pero en el caso de ver las fotos, creo que sería bueno crear un espacio donde solo pudiesen verse las fotos, sin mapas ni texto al lado.
- Sí es clara, se entiende que hay una selección de categorías que al elegirlas cambian el mapa creando un filtro.
- Se entiende que hay un espacio propio dentro del sitio en el momento de ingresar, cosa que me parece bien ya que uno siempre quiere revisar los aportes propios o ver como uno comienza a hacerse colaborador de un total
- Creo que las categorías son las correctas, pero quizá se podría pensar en la opción de mostrar documentación de videos de las travesías, y me imagino que la categoría de "mis fotos" cambiaría a "mi galería"
- Sí, se entienden al menos cuando van acompañados del texto al lado, en el caso de las categorías del fichero propio. Pero en el caso del "banderín" para marcar una travesía como "mi travesía" no es clara, le hace falta un breve texto que lo acompañe.
- Los términos son legibles, en el caso de la selección de travesías para el mapa, donde dice "travesía por" se hace más comprensible una vez que se despliega el menú que dice: Año - Carrera - País - Profesor. Aunque la categoría Profesor no sé si es muy necesaria.
- La navegación es fácil y comprensible, pero en la parte de selección de travesía una vez que uno va seleccionando las categorías, en la parte lateral se van anotando las selecciones, cosa que me parece muy bien, pero parece un poco repetitivo poner en esa selección: "Travesía/" ya que si apretas "Travesías / País/" de igual forma muestra todas las travesías en el mapa, en el fondo llevan a lo mismo.
Construcción en html y css
html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travesías e[ad]</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#header #container-header #container-buscador nav #container ingreso ul {
font-size: 12px;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="container-header"><a href= "">
<img src="imagen/LOGO color.png" alt="Página principal de Travesías e[ad]"
width="130" height="42" class="master-sprite" id="logo"/></a>
<h1>bitacora de las travesías</h1>
</div>
</div>
<div id="container ingreso">
<ul>
<li><a href="http://personas.ead.pucv.cl">Ingresar</a></li>
</ul>
</div>
<div id="Contenedor Suport">
<div id="Contenedor Contenido">
<div id="contenedor Fichero">
<div class="contenedor carpetas">
<a href= "">
<h2>Mis Travesías</h2>
</a>
<a href="">
<h2>Mis Fotos</h2>
</a>
<a href="">
<h2>Mis Entradas</h2>
</a>
</div>
</div>
<div id="tablero">
<div id="Contenido">
<h3>Acerca de las Travesías</h3>
<p>Las travesías son viajes poéticos por América que realiza anualmente la e[ad] Escuela de Arquitectura
y Diseño PUCV a partir del año 1984. Estos viajes son integrados por los alumnos y profesores de Arquitectura,
Diseño Gráfico y Diseño Industrial. Este sitio corresponde al registro de dichos viajes por el continente e
invita a todos quienes han participado a colaborar en esta bitácora colectiva. En las travesías se realizan
obras desde la creatividad del oficio, en algún punto de América fijado a través del estudio que desarrolla
cada Taller. América ha de recorrerse en su extensión; es preciso ir al continente, ir a él para reconocerle
y habitar su emergencia. El 1965 los fundadores de la Escuela decidieron partir en esa visión:</p>
<p>partida mañana a las siete antemeridiano desde santiago
escalas del avión santiago puerto montt punta arenas
los nueve están – jonathan boulting alberto cruz fabio
cruz michel degury francois fédier claudio girola godofredo
iommi jorge pérez román edison simons – henri tronquoy
nos alcanzará en medio de la patagonia1</p>
<p>Esa primera travesía abre el horizonte dentro de los procesos educativos y de aprendizaje en el ámbito académico;
en 1984 se incorpora al currículum de los alumnos de Arquitectura y Diseño la realización de una Travesía anual dentro
del ámbito de cada Taller. El continente se extiende y nosotros con ellos vamos a él para habitar su intimidad y su mar
interior al que amereida canta. Se han realizado ya más de 100, en donde la totalidad de los talleres de la Escuela,
alumnos y profesores realizan obras concretas de Arquitectura y Diseño, en algún punto de América fijado a través del
estudio que desarrolla cada Taller. Estas Travesías se llevan a cabo durante el tercer trimestre de cada año y duran
alrededor de un mes. </p>
</div>
<input type="text" value="" name="s2" id="s2"/>
<div id="barra menu">
<input type="image" id="searchsubmit">
</div>
<div id="mapa">
<iframe width="910" height="538" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.cl/?ie=UTF8&t=h&ll=-35.603719,-71.542969&spn=49.197016,105.46875&z=3&output=embed">
</iframe>
</div>
</div>
</div>
</body>
</html>
css
@charset "UTF-8";
/* CSS Document */
Inspect
ConsoleHTMLCSSScriptDOM
body {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
}
#contenedor Fichero {
height:250px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:inherit;
margin-top:5px;
position:relative;
width:400px;
}
#Contenido {
height:350px;
margin-bottom:0;
margin-left:20px;
margin-right:auto;
margin-top:inherit;
margin-top:5px;
position:relative;
width:400px;
}
#mapa{
left:433px;
margin-bottom:0;
margin-left:0;
margin-right:20px;
margin-top:10px;
padding-left:15px;
position:absolute;
top:346px;
width:935px;
text-align: left;
height: 538px;
}
#contenido ul {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}
#texto {
left:0;
margin-top:10px;
position:absolute;
top:80px;
width:400px;
}
#alumnos {
border-left-color:#CCCCCC;
border-left-style:solid;
border-left-width:1px;
left:460px;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:10px;
padding-left:15px;
position:absolute;
top:80px;
width:224px;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#header {
background-color:#2B2B2B;
padding-bottom:5px;
padding-top:20px;
width:100%;
}
p {
color:black;
font-family:'Trebuchet MS', helvetica, arial, sans-serif;
font-size:13px;
font-weight:normal;
line-height:140%;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
text-decoration:none;
}
h1 {
color:#666;
font-family:'helvetica neue', helvetica, arial, sans-serif;
font-style:italic;
font-size:14px;
font-weight:normal;
letter-spacing:3px;
margin-bottom:0;
margin-left:20px;
margin-right:0;
margin-top:0;
text-align:left;
}
h2 {
color:black;
font-family:'Gill Sans', Verdana;
font-size:13px;
font-weight:lighter;
letter-spacing:2px;
line-height:14px;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:3px;
text-align:left;
text-indent:20px;
text-transform:uppercase;
}
h3 {
color:#F90;
font-family:georgia, serif, times, 'Times New Roman', times-roman;
font-size:25px;
font-weight:100;
letter-spacing:-1px;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0.5em;
text-transform:none;
}
h4 {
color:#A2B138;
font-family:georgia, serif, times, 'Times New Roman', times-roman;
font-size:18px;
font-weight:100;
margin-top:2em;
text-align:left;
}
h5 {
color:#333333;
font-family:'Gill Sans', Verdana;
font-size:13px;
font-weight:normal;
margin-bottom:0.5em;
text-transform:uppercase;
}
a {
color:#666666;
font-family:'Lucida Grande', Arial, sans-serif;
font-size:12px;
padding-left:10px;
padding-right:10px;
text-decoration:underline;
text-decoration:none;
}
a.enlaces_tarea {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}
a.enlaces {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}
a:link, a:visited {
color:#09C;
text-decoration:none;
}
a:hover, a:active {
color:#06C;
text-decoration:none;
}
