Valentina Pérez: Intranet Alumnos

De Casiopea



Título
Palabras ClaveDiseño Gráfico, Diseño de Interacción, Taller de Construcción 4, Intranet, Maia, Diseño Gráfico 4, Segundo trimestre
Período2010-2010
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Valentina Pérez
ProfesorHerbert Spencer


Proyecto: Diseño Intranet Alumnos

Introducción

El ramo de Construcción tiene como fin, llegar a una dimensión mas práctica del taller, donde debemos, en poco tiempo, realizar un proyecto que tenga como meta, la construcción de algún cuerpo gráfico. Este año, la construcción se basa en la creación de sitios web, enfrentándonos con cada una de las problemáticas que esto conlleva. Hacemos un recorrido por diferentes materias para poder llegar al producto final que sería el proyecto de cada uno de los alumnos.

Cada uno de los alumnos enfrenta diferentes desafíos, los cuales debe resolver con un trabajo de investigación y estudio. Este año, como mencionamos anteriormente, nos centramos en diferentes tipos de proyectos de carácter digital.

En esta edición veremos el proceso detallado de cada uno de los pasos que damos en esta investigación, desde el estudio, hasta el desarrollo del producto.

Primer estudio

Mapa de navegación del sitio e[ad]

Para dar comienzo la proyecto del ramo, comenzamos por la investigación del sitio de la escuela (www.ead.pucv.cl). Este es un sitio que se encuentra en constante cambio, por toda la cantidad de gente que participa en él, generando diferentes tipos de contenidos.

En este espacio interceptan diferentes tipos de intereses. Desde los mas prácticos, de un interés mas interno de la escuela, hasta intereses de tipo abierto a otras personas anexas a la escuela que estén interesadas en los temas que tocamos en ella.

Por lo tanto nos encontramos con un espacio para múltiples miradas. Para poder adentrarnos en el, hicimos una investigación en el sitio que se conformó por la reproducción del mapa de navegación del sitio.

El mapa de navegación es una herramienta que nos ayuda a poder leer el sitio de manera mas ordenada, así, entendemos su estructura interna y su contenido, de qué manera este se nos presenta en la navegación.

Segundo estudio

Análisis de mapa de navegación del sitio e[ad]

Luego de haber tenido nuestro primer encuentro a profundidad con el sitio de la escuela, hacemos un análisis de este, pero con una mirada más crítica, con el objetivo de ver qué cosas buenas y malas tiene el sitio y donde podemos encontrar un buen espacio donde generar algo nuevo.

Esto se puede basar en diferentes criterios, de partida encontrar qué públicos son los que llama el sitio de la escuela, y si de verdad, se da la instancia de nuevos planteamientos sobre los oficios o la poética. Qué otros tipos de instancias se pueden generar en el sitio o qué elementos de este no tienen un buen uso. También se puede apuntar a otros criterios como de mejoras del sitio, de manera de crear una nueva forma de que los contenidos se muestren.

Éstas son algunas de las preguntas que se hacen de forma previa a la realización del encargo. En las siguientes páginas veremos como se desarrolla este análisis.

Propuestas para el proyecto

Del segundo estudio del sitio veo muchos puntos diferentes, con diferentes tipos de audiencias, sin embargo me llamó la atención dos grandes problemáticas.

  1. La primera trata sobre el espacio de Amereida en el sitio.
  2. Se trata sobre hacer del sitio, no solo un lugar de donde sacar información, si no también que este sea una herramienta para las personas de la escuela, en especial los alumnos.

La primera viene de la poca consistencia que hay dentro de la sección Amereida, sin especificar que este se trata de un ramo.

La segunda se refiere a una intranet para los alumnos de la escuela, un lugar donde se pueda interactuar con diferentes elementos de la facultad, facilitando la organización persona de los alumnos. Esta viene, por el solo hecho que no existe un elemento así.

A continuación se profundizará mas de cada tema.

Espacio Taller Amereida

En una primer lugar, vemos un extenso texto de la descripción del ramos. Consiste en un punteo con información a modo de ficha técnica. Luego una breve descripción. Esto parece un poco inadecuado y muy extenso para quienes recurren mucho a este sitio, en especial los alumnos.

Sin duda muchas personas fuera de la escuela recurren a este sitio, sin embargo, a primera vista del texto, no se logra persivir la riqueza e importancia que tiene este ramo. Los conceptos tradición, oficio y poética no están detras de esta presentación.

Archivo:Nanan

En una primer lugar, vemos un extenso texto de la descripción del ramos. Consiste en un punteo con información a modo de ficha técnica. Luego una breve descripción. Esto parece un poco inadecuado y muy extenso para quienes recurren mucho a este sitio, en especial los alumnos.

Sin duda muchas personas fuera de la escuela recurren a este sitio, sin embargo, a primera vista del texto, no se logra persivir la riqueza e importancia que tiene este ramo. Los conceptos tradición, oficio y poética no están detras de esta presentación.

Archivo:Ksdfjn

En una primer lugar, vemos un extenso texto de la descripción del ramos. Consiste en un punteo con información a modo de ficha técnica. Luego una breve descripción. Esto parece un poco inadecuado y muy extenso para quienes recurren mucho a este sitio, en especial los alumnos.

Sin duda muchas personas fuera de la escuela recurren a este sitio, sin embargo, a primera vista del texto, no se logra persivir la riqueza e importancia que tiene este ramo. Los conceptos tradición, oficio y poética no están detras de esta presentación.


Archivo:Jlh

Más abajo, en la misma página, nos encontramos con mas texto y texto linkeado. Cada uno pertenece a diferentes tiempos, como vemos, algunos de 1996, otros del 2010, y cada una de las publicaciones con una breve, y muy general descripción de la clase.

No sabemos cuantos articulos más existen, lo cual hace muy dificil cuando se está buscando algo puntual. Nuevamente, vemos que el material visual no se presenta ante nosotros para darnos otra dimensión del taller de Amereida. Archivo:Ajksfsdqhbj

A la izquerda encontramos un link llamado “ Podcas: del Taller de Amereida”. Teniendo la importancia que tiene, no la representa debido al lugar en el que se encuentra, haciendo muy dificil el encuentro de los audios de las clases, material muy recurrido. El hecho de que se encuentre junto a otros temas que no se relacionan al taller hace mas dificil su acceso.

Luego de que entramos a Podcas, nos encontramos con archivos clasificados por el tipo, no por la el numero de clase o fecha. De manera que una misma clase está dispersa en diferentes formatos, video, audio e imagen (material que aca no se nos presenta). Archivo:Slañdkf

Navegador Académico

Archivo:Ñjk

El antecedente más cercano a una intranet para los alumnos es el Navegador Académico. Este es igual para todos los alumnos de la universidad, por lo tanto tiene información muy general. Su importancia es mas de tipo administrativo, sin embargo no se pueden hacer trámites oficiales a través de él.

Por lo menos se usa a principios y a fines del trimestre para la preinscripción de ramos y las notas de los ramos anteriores.

Sin embargo no es una herramienta cercana ni imprescindible para los alumnos. Archivo:Lakmds

Por otro lado, no toda la información que contiene el sitio es realmente oficial. Es el caso del horario. En él se muestra una información muy diferente a la que realmente ocurre en el presente, ni la hora ni el lugar que se nos dice son realmente esos. De manera que, cuando se recive, éste no es de fiar para los alumnos, limitando una verdadera organización de la vida universitaria del alumno.

En general, la distancia entre la realidad y el Navegador Académico es muy grande, de manera que su utilidad es muy baja en el día a día. Al igual que su credibilidad.

Proyecto Intranet Alumnos

Resumen del proyecto (Abstract)

Este proyecto tiene como objetivo crear una herramienta para los alumnos adentro del sitio de la escuela. Consiste en un tipo de "Agenda Electrónica" para los alumnos, donde pueden encontrar información del día a día. De esta manera se trata de oficializar el método que usamos actualmente, nosotros y otros talleres, de los servicios de Google Groups.En el encontraremos diferentes elementos que ayudaran al alumno a organizarse en sus actividades universitarias.

Mapas de navegación

Indice de contenido

  1. Biblioteca
    1. Textos disponibles
    2. Arriendo actual
    3. Deuda en biblioteca
  2. Librería (Elsa)
    1. Deudas de librería
    2. Solicitud de plotter
    3. Valor de impresiones
  3. Cafeta
    1. Menú de la semana
    2. Solicitar almuerzo
    3. Deuda de cafeta
  4. Calendario (Agenda Electrónica)
    1. Ramos
    2. Actividades escuela
    3. Plazos biblioteca
    4. Horarios
  5. Sala de PC
    1. Solicitud de plotter
    2. Solicitud de carro-ancho
    3. Solicitud de impresora laser
  6. Laboratorio Mac
    1. Solicitud de Mac
  7. Avisos
    1. Alertas de biblioteca
    2. Alertas de entregas
    3. Alertas de deudas
  8. Noticias
    1. Noticias de última hora de ramos
    2. Noticias de última hora de servicios

Primer Mapa

Propuesta1 de mapa de navegación para intranet

En esta propuesta, se presenta una intranet muy personalizada específicamente para los alumnos de la escuela de la e[ad], ya que tiene la opción de comunicarse con diferentes departamentso de la facultad como “la cafeta”, “la librería”, la sala de computación y diferentes areas con las que el alumno tiene una relación constante del día a día. De manera que se pueda tener un trato también formal con ellos estándo al tanto de las noticas y también las solicitudes que se pueden hacer.

Por ejemplo, en la sala de computación uno puede pedir una hora para el plotter o también saber tu deuda en ella, de manera de evitar malos entendidos.

Sin embargo, este concepto era muy cerrado a solo la escuela, de manera que no incluye a otros alumnos de otras facultades. Esto hace del proyecto poco oficial, de manera que era muy dificil de llevar a cabo.

Segundo Mapa

Propuesta2 de mapa de navegación para intranet

En esta segunda propuesta, se elimina toda la parte del mapa anterior que tenía una relación con elementos específicos de la escuela y se integra toda la información general que se encuentra en el Navegador Académico.

Esta información no es tanta, de manera que se puede mostrar de manera más breve en esta propuesta.

De ésta manera, logramos las dos dimensiones que se quieren lograr del proyecto, tener el ámbito persona del día a día del alumno y también el ámbito administrativo, el cual, por muy poco que se use, es tremendamente importante.

Además, de ésta forma, incluimos a todos los alumnos de la PUCV.


Wireframes 1


Wireframes: Inicio

Este wireframe es el primer estudio de como se quiere que se presente la intranet. La intención, es tener la mayor cantidad de información necesaria para el alumno para comenzar el día, o actualizarse cada cierto tiempo. Por esa razón se incluyen temas como Noticias, lo cual tendría conexión tanto con la facultad que le corresponda al alumno como con la Casa Central de la PUCV.

El calendario es una herramienta personal del alumno, donde el puede poner sus actividades personales, además de tener, de manera predeterminada las actividades que corresponten con su s ramos.


Wireframe: Ramo

Acá nos introducimos a la tarea de ingresar a uno de los cursos. En cada uno de ellos se puede ver una lista de publicaciones hechas por profesores y alumnos, de manera que se puede comunicar facil y oficialmente.

También hay intercambio de archivos, los cuales son adjuntados a las publicaciones que se hacen. Todo puede ser comentado, de manera de crear este canal de comunicación desde el ramo, a las personas.

Las publicaciones son a modo de foro, alguien escribe y el resto comenta. Además de que cada publicación tiene un tema específico.

Vemos una ficha técnica como la que encontramos en el sitio de Taller de América.


Wireframe: Foro de ramo

De los problemas de esta propuesta, es el poco dominio que hay de la grilla. El texto sigue siendo algo que domina en la interfaz, y no elementos que interactúan conmigo.

Aún el diseño se ve con algunos elementos flotando, como la barra gris clara de la izquerda con respecto con la barra oscura.

La inexacta grilla se deja ver por la impresición entre las columnas y los espacios en blanco que rodean a casi todos los elementos. No hay una equidad entre ellos que muestren una norma.

Wireframes 2

Wireframe: Inicio

Hay un segundo intento con ordenar el sitio con la propuesta de una nueva grilla. Éste consiste en cubos que se repiten y cada uno de ellos significa un contenido.

La interfaz aún se apega mucho a la primera, lo cual no permite un gran avance. Su primer problema son la gran cantidad de elementos que se muestran en un solo instante. además de que la grilla no permite llegar a refinamiento limpio del wireframe.

Wireframe: Log in

Wireframe del ingreso del alumno a la intranet. Se piensa como algo muy sencillo y claro.


Wireframe 3

Wireframe: Inicio

El inicio es totalmente distinto, ya que se limpia la pnatalla y la carga de información disminuye de forma muy importante. La información se guarda en las columnas laterales las cuales tienen carácteres distintos: la de la derecha es para los ramos, y la de la izuerda para herramientas personales.

Se trata de hacer un espacio libre de movilidad y no de tener todo en frente de una sola vez.

Hay un menú inferior para las actividades administrativas que tienen menos uso que las barras laterales, por eso lo ponemos con una menor importancia. Son importantes de antemano.


Wireframe:Mensajería

Cuando abrimos la pestaña de mensajes, podemos ver inmediatamente todo lo que nos llega teniendo otro pequeño sub menu a la derecha, el cual le da diferentes funciones a la herramienta de los mensajes.


Wireframe: Calendario

El calendario es de Google, de manera que se puede cargar dependiendo de los ramos a los que estas inscritos.

Además éste se puede complementar con mis actividades personales, así puedo organizar todos mis días y actividades en conjunto con las de la universidad.

Wireframe: Ramo

Cuando entramos a un ramo, se nos presentan todos los temas subidos por los diferente integrantes del curso. Podemos ver temas pasados.

Cada uno de ellos muestra la información de quién lo emitió y cuando, lo cual solo puede ser hecho por personas inscritas en el ramo.

Cuando nos adentramos a uno de los temas del ramo, encontramos una publicación comentada por los participantes. Al igual que en los mensajes, aparece un submenú dentre que le da diferentes funciones que se pueden hacer dentro de un tema o ramo.

Los artículos pueden tener archivos adjuntos de manera que se tenga un dialogo enriquecido y complementado, sin necesidad de recurrir a otro tipo de herramientas.


Interfaz

logo de intranet

Este es el logo de la intranet. La intranet buscar tener su propia identidad, es un sistema interno de la universidad, sin embargo, es una gran máquina que funciona por si sola.

El logo representa la unión de diferentes estructuras representando la interconexión de la información y las personas.

Inicio

La interfaz tiene una fotografía de fonfo que habla sobre la ultima noticia de la facultad. De cierto modo, es para aprovechar el material fotográfico que hay y al mismo tiempo, un modo de informar.

La intranet tiene un logo, el cual de lejos, es como un copo de nieve, pero también se puede mirar como una roda de personas acostadas unidas por los brazos.

Ramo

Calendario

Comentar en ramo

Mensajería

Mapas de divs

sitio

trabajando en el inicio, solo HTML

Escenarios y personas

Interfaces

ingresar actividad al calendario

Enviar aviso a taller de ramo

Leer un mensaje y responderlo

resolucion de pruebas

persona 1

MALO: 1.menu abajo hacia arriba, mas pekeño 2. gris de fondo al seleccionar 3.Mayuscula minuscula 4.la X al seleccionar enviar emergencia. 5.cosas personales con las actividades este en lo mismo 3.mensajes, relacion de color entre seleccion y mensaje

perosna 2


1. Ver lo del color de los eventos (el gris no el mismo). 2. No se entiende el título temas, pero aparte de eso, igual se entiende cuando se crea uno nuevo. 3. La miagen de fondo se tiene que notar más como una noticia (en el caso de que sea) para que tenga una relación con algo y no sea sólo una imagen de fondo. 4. El envío de mensajes está super claro. 5. La x se puede reemplazar con un 'volver al inicio' para no confundir con cerrar la aplicación.

persona 3


Color morado del head es muy fuerte.

El calendario es claro, pero al ingresar actividades no se entienden todos los contenidos que hay que ingresar, por lo tanto, debería ser por partes.

Encontré todos los botones rápidamente, pero en la parte de enviar el mensaje urgente me costó encontrar el botón "crear nuevo".

Se le da mucha importancia a la noticia al poner una foto de fondo relacionada a esta. En la intranet deberían tener más importancia los contenidos de la parte de abajo (avance curricular, certificados...etc.) y las noticias estar en último lugar.

No se entiende que el texto de la parte inferior izquierda está relacionado a la imagen


persona 4

1. Para enviar o responder un mail, deberia abrirse una ventana nueva, exclusiva para envio o respuesta de mails. La otra opcion es que, al escribir un mail, se opaque el color de las opciones que son redundantes o que no se van a utilizar, como "eliminar" o "responder" (en el caso de que también exista simultaneamente una opcion de "enviar"). Sin embargo, esta complicación se evita haciendo uso de la primera recomendacion, al estilo facebook.

2. si en el cuadrado de la hora ya esta estipulada cual es la actividad a realizar, es redundante tener que clasificarla con un color

3. al crear un foro para un ramo, es dificil darse cuenta para un profesor, que lo que se esta haciendo es crear un foro y no un mail.

4. al terminar un mail o un foro, el boton aceptar DEBE cambiarse: es identico al de facebook


persona 5

1. el porte de los caracteres algo pequeña. 2. me resulto mas facil por que ya estaba familiarizada con la plantilla.

persona 6 1. Incluir un encabezado que identifique al propietario de la Intranet (Institucion). 2. Permitir que se amplíe el mensaje mediante un doble click sobre el mensaje seleccionado. 3. Crear un espacio para "Información General" o Noticias de Importancia. Por ejemplo: Suspensión de clases, actividad en la universidad, etc. 4. Incluir corrector ortográfico cuando escribas la respuesta a un mensaje. 5. Aprovechar mejor el espacio de pantalla disponible. 6. Poco amistoso. No entendí el metodo de los colores. Sería mejor si usa un metodo de preguntas sucesivas. Primero, la hora; segundo, cual es la asignatura y luego asigna el color automaticamente. 7. Debería crear bloques para el horario definido. 8. Así como permite incluir actividades todos los días de la semana, debería permitirlo durante todas las horas del día. Mostrar en forma fija el horario habitual 08:00 a 18:00 horas y con scroll el resto del día. 9. Permitir vista alternativas: Solo un día, todo el mes. 10. El procedimiento para que un profesor mande avisos me parece bueno y facil de hacer. Pero creo que debería canalizarce por una vía distinta. No como parte del foro del ramo entre una serie de otros dialogos de menor nivel.; sino como un mensaje o aviso que el alumno vea casi "inevitablemente".

Maqueta navegable

http://labs.ead.pucv.cl/lc/vperez/prueba/ingreso.htm