Javiera Albornoz: Portal de noticias globales de los oficios

De Casiopea

Tabla de Contenidos

Documentación del proceso trabajo | proyecto portal escuela

Reconocer la estructura del sitio web

Mapa de navegación

El primer paso, y primer encargo, consiste en reconocer el modo de navegar, y la estructura de los contenidos que se encuentran en el sitio web. Mapadenavegacion.png

Revisión del sitio web de la e.[a.d]

En el mapa de navegación realizado en el sitio web de la escuela, queda en manifiesto que la gran mayoría de los contenidos corresponden a gente de la escuela, o que posee algún vínculo con ésta (a excepción de contenidos específicos de postulación e ingreso).

Usuarios En general existen 3 tipos de usuarios, alumnos de la escuela, ex-alumnos de la escuela y profesores de la e.[a.d]. De manera más irregular llegan postulantes o personas por google en búsqueda de algún tema en particular.

Artículos y noticias En su mayoría corresponden a temas de la escuela (o bien relacionados), como la poética o la observación.

Textos En general los textos, la biblioteca Constel, y el Taller de Ediciones, corresponden a autores conocidos por la escuela, (o pertenecientes a ella), los temas tratados corresponden al pensamiento de la escuela o a actividades realizadas (por ejemplo el "libro de torneos")

Observación El visitante del sitio web (que no pertenece al ámbito de la escuela) queda ajeno de la mayoría de los contenidos que aquí se encuentran, ya sea si busca un artículo o un texto. Me parece que en las noticias deberían tratarse no sólo lo que ocurre o se realiza en la escuela, sino lo que es de interés de los oficios y esta ocurriendo constantemente, por tanto es importante mantener constantemente informado de lo que "pasa fuera" de la e.[a.d], no sólo para los alumnos y docentes, si no que para cualquier persona que se interese en el tema, sea o no de la escuela.

En el caso del taller de ediciones y biblioteca Constel me parece que tienen un potencial mucho mayor del que se ha realizado, ya que pueden reunir textos que son fundamentales para los oficios, y que los alumnos deberíamos conocer, sin importar que los autores no sean de la escuela, y así seríamos alumnos más integrales capaces de manejar más temas. más autores y conocedores de más visiones (ser universitarios). Esta potencialidad no explorada puede traspasar lo digital al papel (sobre todo en el taller de ediciones), y abrir una bibliografía y contenido más completo a alumnos, profesores y audiencias externas relacionada o interesada con el tema.

Propuesta

Abrir contenidos de noticias, artículos y textos, en donde los autores y los temas no sean exclusivos de la escuela (indicando la fuente).

Objetivos 1) Abrir nuevas audiencias al sitio web, para que personas vinculadas o interesadas al oficio conozcan la escuela al encontrarse con temas de interés general (y no sólo de la e.ad) a través de la búsqueda. Por ejemplo que al poner en google una búsqueda "tanto de diseño" arroje entre sus resultados algún artículo, texto o noticia de la escuela, ya que tendrá mayor diversidad de temas entre sus contenidos (obvio ligados a los oficios).

2) Generar una plataforma informativa y de interés para la comunidad de la escuela, pero que acoja contenidos provenientes no sólo de la e.ad, para que así los alumnos y docentes conozcan lo que esta ocurriendo actualmente, ya sea lo que realizan otras universidades (nacional o internacional), o del oficio en general; pero que estos contenidos estén reunidos en el sitio web, y puedan así abrir nuevas discusiones y visiones.

Resultados en google al buscar diseño gráfico, la universidad de Chile aparece entre los resultados, pero no el sitio de la escuela

Primera propuesta: Plataforma de noticias globales de los oficios

Luego de revisar el sitio web y su mapa de navegación, aparecen dos aspectos que, a mi parecer, impiden o no colaboran la apertura a nuevas miradas y contenidos.

1) Los contenidos de las noticias son exclusivos de actividades de la escuela, (por tanto la comunidad ya posee un cierto conocimiento de ellos), y no incluyen actividades y proyectos que podrían aportar nuevas visiones (por ejemplo, que es lo que se realiza en otras escuelas del mundo, que nuevo proyecto importante ha aparecido, que artículo relevante deberíamos leer, etc).

2) Los contenidos están orientados en su mayoría a gente de la comunidad de la escuela, abrir plataformas a los oficios en general es importante para generar nuevas audiencias interesadas o relacionadas con los temas de arquitectura o diseño.

Revisión de Contenidos

Con respecto a las noticias que aparecen en la portada de la escuela, sus contenidos pertenecen en su totalidad a actividades realizados por la escuela (o alguien de ella), y en varias ocasiones son de interés sólo para audiencia de la comunidad de la escuela (por ejemplo la copa talleres). En la parte superior y del tamaño de 2/3 del ancho de los contenidos aparece la noticia principal del período, luego de 1/3 del ancho las noticias anteriores en la franja izquierda.

Estructura de la visualización de las noticias en la portada del sitio

Relación jerarquía / tamaños / contenidos

Los contenidos de las noticias son variables según lo que en la escuela se genera, a partir de esto aparecen las preguntas:

¿Todas las noticias que se generan en la comunidad de la escuela tienen la importancia para ocupar el espacio mayor en la portada del sitio? ¿Dónde está lo que ocurre en arquitectura y diseño en otros lugares, escuelas, países, proyectos relevantes? ¿Porqué los alumnos re-leen su realidad en el sitio web, en vez de conocer distintos modos de ver y realizar el oficio?

Ejemplo de organización del espacio de la portada del sitio en relación a la noticia principal del período, en esta caso, ¿es la copa talleres lo primero qué debe aparecer?

Audiencias de las noticias

En el caso del ejemplo de la copa talleres, esta orientado en su totalidad a público de la escuela, aunque en la realidad probablemente sólo el 50% de los alumnos de la escuela se interesan en esta actividad, por tanto reducimos la audiencia que leerá la noticia.

Entonces, ¿Por qué esta noticia ocupa el espacio mayor y mejor ubicado?¿Es esta noticia relevante para audiencias externas?

Img audiencias.png


La idea de realizar una plataforma de noticias globales de los oficios posee como objetivos:

1)Generar un espacio donde alumnos y profesores estén constantemente informados directamente desde el sitio de la escuela, acerca de "que es lo que ocurre con los oficios", y se incorporen nuevas visiones a lo que ya conocemos.

2)Recoger y mostrar lo relevante "hecho por otros", abrir opciones de debate y conocimientos, a través de una información que probablemente al no estar en este sitio web no sería conocido por los alumnos (nos estamos perdiendo de ver el oficio en otros lugares y circunstancias).

3)Ampliar las audiencias del sitio, a personas que les interese los oficios, no sólo las actividades específicas de la escuela.

4)Incorporar nuevas audiencias, que lleguen a través del buscador interesados en algún tema correspondiente a los oficios.


Ubicación en la portada del sitio

Se propone que bajo la noticia principal del período correspondiente, aparezcan dos rectángulos, cada uno dedicado a los oficios (arquitectura y diseño respectivamente), donde los alumnos puedan ver (en paralelo a lo que se realiza en la escuela), lo que ocurre fuera de ella.

Ejemplo de la ubicación y tamaño de las noticias del oficio, en la portada del sitio

Ubicación en las secciones del sitio

Dentro de la pestaña "Mundo", se encontrará una sección que indique "noticias globales", donde se encontrará el archivo de las noticias publicadas, junto con las noticias principales del período. A esta sección también se podrá acceder al clickear sobre la noticia de interés en la portada.

ubicación de las noticias globales en el menú principal del sitio (pestañas), se encontraría en la sección "mundo"
ubicación de las noticias globales dentro de la sección "mundo"

Diagramación

En la portada del sitio tomará la ubicación que tienen actualmente la noticia y el artículo de ámbito que se ubican bajo la noticia principal, con su respectiva imagen. El resto de los contenidos seguirá en su ubicación actual.

ubicación de las noticias globales dentro de la diagramación de la portada del sitio
Los archivos de noticias globales tomarían la misma estructura que los archivos de noticias, aunque con una miniatura de imagen


Segunda propuesta: Portal de noticias globales de los oficios

La idea es reunir lo que esta ocurriendo en los oficios, a través de información que pueda existir en distintos formatos, artículos, imágenes, vídeos, audios.

El portal estará enlazado al sitio de la escuela, donde alumnos, docentes, y personas interesadas por los oficios puedan enterarse y entregar opiniones acerca de lo que ocurre en arquitectura y los diseños.

La primera pregunta:

¿quiénes pueden publicar?

La idea es que exista un editor general que reúna, ordene y de jerarquía a los contenidos a publicar, quien tenga también colaboradores que busquen los contenidos.

La participación de la audiencia estará dada en una sección donde puedan publicar sus propios artículos, además de opinar después de los artículos publicados.

Benchmark

Revisión de portales de noticias internacionales, cuadro verde destaca lo observado.


Ubicación en el sitio de la e.ad

Para llegar al portal de noticias globales de los oficias, podrá hacerse desde el sitio de la e.[ad], en la sección mundo, click noticias globales y envía al link, en caso de que no se haga directamente desde su dirección (así como la wiki, que accede desde la ead o de su propia dirección).

Modo de acceso (link) desde el sitio de la e.ad

Pestaña superior

Para acceder directamente a ciertas secciones específicas, se podrá ir directamente a las noticias de alguno de los 3 oficios (arquitectura, diseño gráfico, diseño industrial), además de un archivo sólo de material audiovisual, y una sección de "compartir artículo", donde la audiencia podrá enviar su artículo para posteriormente ser publicados, en caso de ser un aporte al sitio. Para publicar las personas deberán estar registrados, con el mismo registro que poseen para publicar en la wiki y en el sitio de la e.[a.d]

Pestaña superior que da acceso a los distintos contenidos (categorías)

Mapa de Navegación (fragmento, de los oficios)

Modo de navegar al hacer click en alguno de los oficios


Wireframes

Diagramación de la portada del sitio

Luego de ingresar a la portada del sitio, al hacer click en alguna de las categorías del oficio (arquitectura por ejemplo), aparecerá una diagramación que sigue la misma geometría que el home, pero con diferentes contenidos.

Pantalla al clickear en alguno de los oficios (paso 2 luego del home)
Pantalla al clickear en una noticia (paso 3 luego del home)

modificaciones

  • mapa de navegación completo
mapa de navegación

wireframe portada del sitio (versión 2)

Se modifican algunas partes, aunque mantiene la misma estructura, se inscribe en 1024x768 pixeles, en una grilla de 3 columnas x 4 filas, las cuales se van sub-dividiendo en cada caso.

wireframe de la portada del sitio
  1. logotipo del sitio e.ad
  2. barra de menú
  3. noticia principal (img y texto)
  4. segunda noticia (img y texto)
  5. noticias tercer orden(img miniatura y texto)
  6. columnas de artículos del público (img pequeña y texto)
  7. noticias anteriores relevantes (solo texto)
  8. del sitio
  9. log in (mismo sitio e.ad)
  10. video principal (texto e img)


Tercera propuesta: Blog co-realizado por los usuarios e[a.d]

¿dónde?

Insertó en la revista de los alumnos, se encontrará el enlace al blog de los alumnos. La idea es generar un espacio donde los alumnos puedan compartir artículos, experiencias, contactarse (saber quien puede tener algún dato que sirva), en relación a los oficios y a la vida escuela.

Intención

La intención es crear una plataforma que acoja a la audiencia desde su directa participación, de carácter informal y donde el acontecer de los oficios (artículos, noticias, datos) se crucen con la vida escuela, generando una base de datos que sirva a los alumnos.

Que los temas propuestos tengan comentarios, pero potenciando las imágenes del blog para que a partir de ellas se genere el interés que lleva a leer el artículo(como punto de partida a cada tema).

¿quiénes pueden publicar?

Semanalmente se publicará un artículo principal referente a los oficios (al ser parte de la revista de los alumnos tendrá la misma administración), aunque la idea es que los usuarios e.[a.d] que se encuentren registrados, sean también generadores de contenidos, artículos, imágenes, links, datos, etc; además de estar inter comunicados a través de datos y temas de interés común.

Benchmark

Se revisan blogs de diseño, o relacionados, con la intención de conocer la estructura de un blog y la distintas formas de exponer los contenidos.

Listado de contenidos del sitio

  1. artículos generados por el sitio (usuarios y administrador publican artículos)
    1. arquitectura
    2. diseño gráfico
    3. diseño industrial
    4. otros
  2. noticias provenientes de otras fuentes
    1. artículos del mundo
  3. compartir datos
    1. encargos
    2. ¿quién tiene?
    3. ¿quién sabe?
    4. librerias y plotter
    5. enlaces
  4. actividades y eventos
    1. oficiales
    2. no oficiales
  5. login registro
    1. si ya estas registrado en el sitio e[a.d] puedes publicar

Mapa de navegación

mapa de navegación

Wireframes

wireframe 1, portada del sitio
wireframe 1 versión b portada del sitio mostrando botón de navegación, fondo se aclara al 55% para resaltar navegación
wireframe 1 versión c, portada del sitio mostrando los comentarios al artículo principal


Wireframe 1

  1. nombre a modo de logo del blog
  2. barra superior (contenidos a navegar)
  3. artículo principal del período (imagen, titulo, texto, comentarios, fecha y autor)
  4. logo sitio escuela
  5. log in /registrarse
  6. contacto a redes sociales (facebook, twitter)
  7. artículo anterior con sus datos y comentarios
  8. archivos ordenados cronológicamente (por mes)
  9. archivos de video, permite ver en la portada el vídeo del período
  10. del sitio


wireframe 2, archivo de artículos de arquitectura (mismo para los otros oficios), en la barra izquierda aparece el menú de los distintos oficios

Wireframe 2

  1. nombre a modo de logo del blog
  2. barra superior (contenidos a navegar)
  3. artículos con sus respectivos datos (imagen, titulo, texto,leer más comentarios, fecha y autor)
  4. logo sitio escuela
  5. log in /registrarse
  6. mini menú específico de la sección artículos
  7. contacto a redes sociales (facebook, twitter)
  8. archivos ordenados cronológicamente (por mes)
  9. archivos de video
  10. del sitio
wireframe 3, artículo con sus respectivos comentarios, se mantiene la barra izquierda que permite ver y moverse entre los oficios, y al lado derecho el archivo de artículos similares



Wireframe 3

  1. nombre a modo de logo del blog
  2. barra superior (contenidos a navegar)
  3. artículo a leer con sus respectivos datos (imagen, titulo, texto,comentarios, fecha y autor)
  4. logo sitio escuela
  5. log in /registrarse
  6. mini menú específico de la sección artículos
  7. contacto a redes sociales (facebook, twitter)
  8. archivos ordenados cronológicamente (por mes)
  9. archivos similares
  10. del sitio


interfaz de la portada del sitio, la foto de arriba cambia al navegar por el sitio




Wireframes e interfaz nueva propuesta

wireframe 1, portada del sitio
wireframe 2 artículos de un oficio (arq por ejemplo)
wireframe 3 lectura del artículo clickeado, con su imagen, autor, fecha y comentarios(para hacer click)
prueba de nombres para el sitio


portada del sitio
lista artículos de un oficio (arq por ejemplo
lectura del artículo clickeado
lectura de los comentarios del artículo clickeado
mapa de divs de la portada
mapa de divs del archivo de artículos
mapa de divs del artículo clickeado para leer


Escenarios y personas

Primer caso

Diego Olguín

Nombre:Diego Olguín

Edad:22 años

Ocupación: Estudiante de arquitectura de cuarto de año de la PUCV

Descripción: Diego tiene 22 años, es de Quilpué e ingresó a arquitectura en la e[ad] en el 2007, actualmente es presidente del centro de estudiantes de arquitectura y diseño, por tanto conoce las distintas actividades de la escuela, y además debe informar, proponer y generar nuevas instancias de dialogo en la comunidad escuela. Posee un computador en su casa, y se encuentra permanente conectado a msn y redes sociales.

Escenario: Un grupo de alumnos le plantea a Diego, en su condición de presidente, sus ganas de querer realizar una tocata a beneficio de un alumno que atraviesa un duro momento económico producto de una enfermedad, para convocar a nuevas bandas de la escuela para que colaboren, así como a la comunidad para que asista al evento ingresa al "portal escuela" para informar y promocionar el evento.


Segundo caso

Ximena Silva

Nombre: Ximena Silva

Edad:37 años

Ocupación: Diseñadora gráfica titulada de la e[ad]

Descripción: Ximena egresó en 1995 de diseño gráfico, vive en Santiago hace ya varios años, posee su oficina de diseño, donde trabaja junto a su hermana Paula, también egresada de la e[ad], quien es diseñadora industrial. Posee un MacBook, desde donde se encuentra permanente trabajando, y conectada a distintas redes sociales, donde expone también algunos de los textos que escribe, acerca de diversos temas.

Escenario: Un fin de semana, va al sitio de la e[ad] en busca de un texto y encuentra el sitio de "portal escuela", ingresa a saber de que se trata y ve los distintos textos publicados por alumnos, lee uno que habla sobre la percepción de la enseñanza del diseño para medios digitales, y se da cuenta de las diferencias en el modo de enseñar en relación a la época cuando ella estudiaba, donde ni siquiera internet era de uso masivo y casi todo se realizaba a mano. Escribe un comentario luego de leer el artículo para exponer su visión.


Tercer caso

María Paz Cárcamo

Nombre: María Paz Cárcamo

Edad:22 años

Ocupación: Estudiante de cuarto año de diseño industrial de la PUCV

Descripción: María Paz ingresó a la escuela en el 2007, y a principios del 2010 viajó a Torino, Italia, por el programa de intercambio de la universidad, regresó en julio de 2010 a la escuela donde se debe poner al día con respecto a las distintas materias. Posee un notebook donde realiza sus trabajos y se conecta a redes sociales.

Escenario: María Paz escribió un texto donde cuenta su experiencia en la universidad en Italia, y utiliza el "portal escuela" para publicarlo y así dar a conocer lo que aprendió y motivar a sus compañeros a vivir una experiencia similar, ya que fue muy enriquecedor.


Protocolo de pruebas con usuarios

Introducción

Para realizar esta prueba debes ponerte en el caso de ser la persona descrita, y estar en la situación que se comenta en este texto. Estas situaciones son ficticias y las imágenes son maquetas de lo que sería el sitio web real, deberás efectuar las tareas que aquí se piden, siempre recordando que eres la persona descrita. Muchas gracias por colaborar!

Las tareas a realizar son:

  • Tarea 1: Leer y comentar un artículo de arquitectura
  • Tarea 2: Encontar datos de librerias en viña del mar
  • Tarea 3: Publicar un artículo

Las personas con que se realizarán estas pruebas son alumnos de la escuela, ya sean de primer año, como cursos superiores y titulantes, para así obtener distintos comentarios a lo que se esta haciendo, además de probar con alumnos ajenos a la escuela, y tratar de contactar a algún ex alumno que pueda colaborar.

Desarrollo de tareas

Tarea 1:Leer y comentar un artículo de arquitectura

  • Nombre: Diego Olguín
  • Edad: 22 años
  • Ciudad:Quilpué
  • Ocupación: estudiante de arquitectura de la e[ad]


  • Escenario: Diego esta en cuarto año de arquitectura, y este año asumió como presidente del centro de estudiantes, por tanto se encuentra constantemente informado de lo que ocurre en la comunidad de estudiantes, en el "portal escuela" lee un artículo de un ex alumno, que le molesta un poco ya que desconoce la situación actual de la escuela, por tanto decide dejar un comentario en su publicación.


  • Tarea: ingresar al sitio, leer el artículo y comentarlo
tres pasos en la navegación, se ingresa al sitio y se encuentra con el artículo, se clickea para leer entero y luego se leen los comentarios y se agrega un post


Tarea 2:Encontrar datos de librerias en Viña del Mar

  • Nombre: Andrés Morales
  • Edad:19 años
  • Ciudad: Arica, actualmente Viña del Mar
  • Ocupación: estudiante de diseño plan común en la e[ad]


  • Escenario: Andrés ingresó este año a la escuela, además es de Arica por tanto no conoce bien la ciudad. Para comenzar a realizar sus encargos necesita comprar materiales, pero no conoce librerías en la ciudad. Un compañero le comento que en el portal los alumnos dejan buenos datos.


  • Tarea: ingresar al sitio y encontrar los datos de librerias en Viña del mar
pasos en la navegación, se ingresa al sitio y en el menú se encuentra con datos, al hacer click aparecen "librerias y plotter" y al seleccionar aparecen los datos


Tarea 3: Publicar un artículo

  • Nombre: María Paz Cárcamo
  • Edad:22 años
  • Ciudad: Viña del Mar
  • Ocupación: estudiante de diseño industrial e[ad]


  • Escenario: María Paz esta en cuarto año de diseño industrial, y volvió recientemente a Chile luego de su intercambio de 6 meses en Torino, Italia. A su regreso a la escuela sus compañeros le preguntan constantemente acerca de su experiencia, por tanto decide escribir un artículo y publicarlo en el sitio, así pueden enterarse y motivarse a realizar un viaje similar.


  • Tarea: Ingresar al sitio y publicar un artículo
pasos en la navegación, primero ingresa como usuario, y al ser bienvenida puede publicar, seleccionando la categoría de ella


Pruebas con usuarios

Se realizó el protocolo de escenarios y personas, con la interfaz impresa; 12 veces (4 usuarios realizaron cada una de las tareas), se buscaron estudiantes universitarios y egresados, que pudieran ponerse en las circunstancias de las pruebas.

Observaciones generales

Tarea 1 (leer un artículo y comentar)

  • No se ve claramente donde comentar (coincidieron varios usuarios)
  • No se ve claramente donde se pueden ver los otros post (ver más muy pequeño)
  • No sabe si buscar artículos en "artículos" o en "arquitectura" (en ambos casos se llega a los artículos, así que las dos son opciones correctas)

Tarea 2 (encontrar librerías y plotter en Viña del Mar)

  • se realiza correctamente la primera parte de la navegación por todos los usuarios
  • La mitad de los usuarios se confunde con la opción "quién sabe" (en vez de librerias y plotter)

Tarea 3 (publicar un artículo)

  • existe confusión en el modo de llegar a publicar (cual de los botones del menú llega a esa opción)
  • Hubo usuarios que si pusieron "ingresar" en el home para así publicar

Interfaz corregida

De las conclusiones obtenidas en las pruebas con usuarios, se modificó la interfaz, en colores, donde la paleta aumentó a 3 colores (naranjo, gris oscuro, morado azulino), y se modificó el modo de poner el nombre ("portal escuela", además de varias correcciones en cada uno de los pantallazos.

El menú y el sidebar intercambiaron lugares para mayor claridad.


home del sitio
en el home del sitio, modo de mostrar el contenido (los botones) del sidebar
en el home del sitio, en el menu superior, modo de llegar a los archivos de manera directa, por carrera
archivo de artículos de arquitectura (misma estructura para las distintas carreras)
leer un artículo y comentarlo
en compartir datos, así aparecen la lista de datos (ejemplo de librerias y plotter)
modo de publicar de un usuario

intefaz final

head

En la parte superior, ademas de la búsqueda y el login /registro, se encuentra de fondo una imagen con croquis de gente de la escuela, mostrando así un elemento que identifica a la audiencia. Además del nombre del portal.

croquis en el head del sitio
nombre


home
home con menú del sidebar (compartir datos)
artículos de arquitectura (misma estructura para los diseños
lectura de artículos con sus comentarios y opción para comentar, en el sidebar se encuentra el archivo de artículos para poder revisar otros sin tener que volver
modo de mostrar datos (en esta caso librerias y plotter)
modo de publicar contenidos en el sitio, posee categorías y etiquetas, además los textos e imágenes se cargan al sitio
ingreso al sitio de usuarios registrados, para registrarse se lleva al formulario de la ead, porque es la misma base da datos

html

LINK HOME DEL SITIO EN HTML Hay un pequeño desajuste en los blancos entre la maqueta y el html

código home




<html>
<head>
	<title>Portal Escuela ead</title>

</head>

<body>
<img alt="header" src="../imag/home2_javi_r1_c1.gif" width="1270" height="149">
    <img alt="head2" src="../imag/ble5.gif" width="539" height="29">  
 
<img alt="side" src="../imag/ble4.gif" width="193" height="299">
<img alt="p1" src="../imag/home2_javi_r10_c2.gif" width="266" height="178">
<img alt="t1" src="../imag/ble2.gif" width="262" height="247">
<img alt="p2" src="../imag/home2_javi_r2_c3.gif" width="266" height="182">
<img alt="t2" src="../imag/ble3.gif" width="262" height="247">
<img alt="p3" src="../imag/home2_javi_r9_c12.gif" width="256" height="179">
 
<img alt="footer" src="../imag/home2_javi_r11_c4.gif" width="624" height="61">
</body> </html>