Plataforma web de búsqueda, registro y documentación de memorias y proyectos de tÍtulo pertenecientes a la Escuela de Diseño de la Universidad Diego Portales.
Profesor Guía + Dany Berczeller + Leonidas Loyola
Memoria de Proyecto para Optar al Título de Diseñador con Mención en Diseño Gráfico. Santiago, Chile 2013
VALENTINA ANDREA ALIAGA VARGAS
Plataforma web de búsqueda, registro y documentación de memorias y proyectos de tÍtulo pertenecientes a la Escuela de Diseño de la Universidad Diego Portales.
Profesor Guía + Dany Berczeller + Leonidas Loyola
Memoria de Proyecto para Optar al Título de Diseñador con Mención en Diseño Gráfico. Santiago, Chile 2013
VALENTINA ANDREA ALIAGA VARGAS
Agradezco a todos los que me acompañaron en este año tan movido y complejo y a los que me dieron esos empujones para no dejarme caer. En general a mi familia, amigos, profesores y por supuesto a mis compañeros y compañeras de trabajo, por hacer que este año sea inolvidable.
indice | 05
07
Motivación del Proyeto
09 Introducción
01
04
11 formulación del proyecto 13
Contextualización del Problema
13
Era de Contenidos Digitales
13 Generación de Contenido en las Escuelas de Diseño 14 Accesibilidad al Contenido 15 Revalorización del Contenido 16 Fenómeno de Invención de la Rueda
02
53 el proyecto 55
¿Qué? ¿Por qué? ¿Para Qué?
56
Objetivos Generales y Específicos
57
Viabilidad del Proyecto
58
Ciclo de Vida del Proyecto
59
Definición del Contenido
60
Esquema de un Proyecto de Título
61
Definición del Público Objetivo
62
Definición de Usuario y sus Roles
63
Desarrollo del Prototipo
64 Propuesta de Mapa de Navegación 67
Propuesta de Wireframes
19 marco teórico
76
Partitura de Interacción del Usuario
21
78
Estado del Diseño en Chile
Diseño y Lineamientos Gráficos
22 Carencia de Indicadores
78 Naming
23 Divorcio entre la Academia y las Empresas
79 Logotipo
24 Potencial de Investigación Desperdiciado
80 Definición de la Paleta Cromática
25
83
26
Conclusiones del Encuentro
La Web. Contexto y Evolución
26 Web 3.0 28
Vistas Finales del Primer Prototipo
Web Semántica
30 Antecedentes 38 Referentes
05
105 cierre del proyecto 107
Proyecciones del Proyecto
109 Conclusiones 110 Glosario 112 Bibliografía
03
43 desarrollo del proyecto 45
Caso de Estudio FAAD
46 Indexación de las Tesis 49
50
Experiencia de los Alumnos en Biblioteca FAAD
Descubriendo un Problema
51
Puntos Claves del Problema en el Servicio
motivación del proyecto | 07
Motivación del Proyecto de diseño están sistematizando la información El estímulo que me ha animado a emprender este
recabada por sus alumnos durante este período,
trabajo se origina en la experiencia vivida durante
para de este modo, poder generar un capital de
este proceso de titulación. Empieza despertando
conocimiento que pueda ser aprovechado en un
un cierto interés por hacer visible la información
campo de investigación a futuro? El intentar dar
existente, relativa a los temas o proyectos de grado
respuesta a esta gran interrogante, da pie al desarrollo
para optar al título de diseño y luego, a medida
de un estudio del tipo de navegación semántica
que avanza el proceso, el interés es cada vez
que se verá materializado como un repositorio
mayor llegando a cristalizarse en la idea de realizar
de archivos digitales pertinente a mi proyecto a
un proyecto que signifique un aporte para la
desarrollar.
comunidad; un proyecto de diseño y para el diseño. Trabajar con un proyecto asociado a la web, al El punto de partida fue la vivencia experimentada
diseño de información y a la comprensión de los
en nuestro grupo de trabajo de cómo, cada una
servicios digitales en función del usuario, me
de las personas que lo integramos, nos veíamos
pareció un desafío interesante ya que es un campo
enfrentadas al desarrollo de un proyecto individual
que no manejaba con claridad, por lo tanto, podría
y al proceso de búsqueda de información para
afianzar más mis conocimientos en un área que
determinar un tema a desarrollar. Desde esta
considero importantísima para el desarrollo del
experiencia aflora una importante cuestión;
diseño en la actualidad.
¿cómo las instituciones que imparten la carrera
introducción | 09
Introducción
puede ser una ventaja en un mundo globalizado para compartir conocimiento pero, el tiempo disponible
En la Universidad Diego Portales, la carrera de diseño,
para la ejecución del proyecto solo nos permite tomar la
tiene como requisito de titulación, la presentación
decisión de fijar límites de tiempo para su elaboración.
y ejecución de un Proyecto de Título que debe ser realizado en el plazo de un año lectivo. En general,
La sistematización de la información proporcionará
podemos decir que el sistema educativo nacional,
a los estudiantes, la posibilidad de trabajar sobre la
a través de las diversas instituciones de educación
base de lo que antes hizo otra persona profundizando
superior que forman profesionales en el campo de
una problemática y, a la vez, impedirá que por falta
diseño, contempla también un plazo similar.
de control, se pierda un valioso tiempo realizando proyectos ya hechos y pensando errónea y
Este proceso implica pensar en el posible proyecto,
reiteradamente, que se está “inventando la rueda”.
buscar información, generar y desarrollar ideas, vislumbrar posibles soluciones al problema sobre el
Estamos desperdiciando un capital de innovación
cual versará el proyecto, etcétera. Para poder realizar
en el país y en el área del diseño. Por lo tanto, este
las tareas mencionadas, sería de gran utilidad
proyecto intenta recapitalizar esta pérdida de
contar, con alguna fuente de información que
energía e información que actualmente está
específicamente de cuenta, de manera organizada,
limitado solamente a un “viaje personal e individual”
de los diferentes proyectos de título que se han
de cada estudiante sin considerar la riqueza de los
realizado a través del tiempo en nuestro país.
aprendizajes colectivos para el desarrollo de distintos
Podríamos ser ambiciosos y pensar también en
proyectos o problemas en distintas áreas.
proyectos llevados a cabo en otros países lo cual
FO RMU L ACIÓN DEL P ROYE CTO
01
formulación del proyecto | 13
Contextualización del Problema
Generación de Contenidos en las Escuelas de Diseño
Era de Contenidos Digitales
La escuelas, conforman grandes espacios de
En este momento, primera década del siglo XXI, nos encontramos en una etapa de avance comunicacional que permite generar medios
generación de contenido. Cada año se van sumando a sus bibliotecas, proyectos de titulación de pre y posgrado y publicaciones que también son
de manifestación digital para la difusión de
indexadas en los sistemas de biblioteca.
contenidos e información. La generación de contenidos ha ido creciendo de manera exponencial , lo [1]
que con frecuencia, impide ver lecturas claras de
Cada vez se vuelve más difícil que una
información contextualizada.
persona acceda a la información que busca,
La evolución de los medios comunicacionales ha ocasionado altas exigencias en el modo de acceder a la información, y el diseño de información ha debido responder generando “Hoy en día, si se quiere acceder a un libro fuera de impresión normal, usted tiene sólo una opción, volar a uno de un puñado de las bibliotecas más importantes del país y la esperanza de encontrar en las estanterías.” Sergey Brin Google Cofounder
modelos de acceso a la información cada vez más simplificados, de manera que la interacción del usuario con los medios se vaya haciendo más “amigable”. Hoy en día el proceso de búsqueda de información está a un click de distancia y en solo en unos minutos ya puede tener acceso al material requerido.
[1] Clay Shirky, Here Comes Everybody. New York. 2008
utilizando las bibliotecas. Situación, que ha significado la aparición de un nuevo problema para estos espacios. Las bibliotecas, se han visto en la necesidad de renovar su forma de entregar información a quienes desean acceder a estos contenidos de modo de mejorar los accesos y la atención a las personas. Por otra parte, muchos archivos se van perdiendo en las estanterías a medida que se van sumando nuevos documentos, lo que significa una fuga de información que no es aprovechada.
14 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Accesibilidad al Contenido
por lo tanto, no disponen del tiempo suficiente para poder desarrollar una búsqueda más acabada
En este proyecto, se entiende por usuario, a una
en las bibliotecas disponibles y además en muchas
persona en búsqueda de información para los fines
ocasiones, el servicio que se ofrece dificulta el
que estime conveniente. Éste frecuenta bibliotecas
acceso a los documentos.
y archivos documentados para revisar la bibliografía relacionada con su tema de investigación; también
La solicitud y préstamo de los libros o archivos, sean
recurre a la biblioteca para buscar información
proyectos de título o publicaciones, tienen límites
que pueda servirle para generar ideas nuevas y que
por día y por cantidad. Esto genera un quiebre en el
pudiesen servirle como fuente de inspiración.
acceso a la información, lo que dificulta la revisión de contenidos dentro del tiempo disponible.
Específicamente el usuario, estudiante de diseño, en nuestro caso, utiliza con más frecuencia los
El límite de documentos que se pueden llevar en
sitios y páginas web en busca de información útil
préstamo, dificulta obtener datos entre un archivo
para comenzar sus procesos creativos, siendo ésta
y otro, en donde los contenidos se relacionen y
la principal fuente de inspiración. Esto se explica,
complementen. Las copias disponibles ya han sido
por un factor tiempo y distancia para llegar a los
solicitadas anteriormente y no están a disposición
contenidos que se encuentran en biblioteca.
del investigador. Con frecuencia no se permite sacar
medios utilizados en la búsqueda de inspiración[2] sitios web
bibliotecas universitarias
bibliotecas no universitarias
fotocopias ni escanear, situación que se traduce en Muchos de los estudiantes que comienzan su
un impedimento más para el acceso y utilización
proceso de titulación, ya se encuentran trabajando
óptimo del material presente en los archivos.
[2] Fuente: Encuesta realizada a un universo de 30 estudiantes de carreras creativas. Ver anexos.
otros
formulación del proyecto | 15
diagrama de accesibilidad a la información
Revalorización del Contenido
de diseño produce un excedente de información empírica que es susceptible de ser recogida por
investigador
La dificultad para acceder al contenido de los
una pregunta de investigación en el marco de la
proyectos archivados, sumada a la gran masa
investigación y por lo tanto su valor se debiera
de información que sigue creciendo de manera
mantener al alcance de quién lo necesite.
exponencial, ha significado una cierta pérdida de
recelo por el contenido
inexistente digitalización
los contenidos almacenados en los archivos, los
Las diversas escuelas universitarias requieren
cuales debieran ser compartidos y aprovechados.
revalorizar la información entregada en los
Los contenidos deberían estar más visibles para
proyectos de titulación. Es necesario, generar
activarlos y no permitir que dejen de circular entre
un espacio que ofrezca accesos más fáciles a los
las personas que los necesitan.
documentos para que así quienes los frecuenten encuentren la información de contenidos de
El proceso de diseño desarrollado en la formulación
B
IB
LI
OT
EC
A · R IOS ·E P O S I T O R
manera expedita y no queden en las estanterías.
de un proyecto de título, incentiva la investigación
contenidos · inactivos ·
FÍ
C SI
O
S
de contextos y el testeo de prototipos. Estas
Lamentablemente los sitios universitarios, con
actividades generan conocimiento empírico sobre
documentaciones digitales que existen hoy
el contexto que se interviene y que es acumulado
día en el país, aún entregan visualizaciones y
en el prototipo final. Sin embargo, por la falta de
catalogaciones demasiado complejas y poco
sistematización muchos de estos procesos son
amigables en sus procesos de búsqueda e
desaprovechados y quedan fuera de los circuitos
indexación, que en consecuencia, dificultan la
de transferencia de conocimiento. El proceso
navegación y el acceso a contenidos.
16 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Fenómeno de “Invención de la Rueda”
nivel país y los alumnos/profesores guías toman
durante este proceso, sería un conocimiento
estas agendas para desarrollar proyectos que
“abierto” que pudise servir par aquién estime
Si uno acude a una biblioteca da la Facultad,
signifiquen un aporte. Sin embargo muchas
conveniente. De esta manera las distintas
a primera vista, podrá notar la existencia
veces estos mismo proyectos parecieran estar
controversias que se estudian en los determinados
de trabajos de titulación (proyectos, tesis,
estancados sin progresar ya que no logran
proyectos de título, podrían llegar a formar parte
memorias) muy parecidos entre sí. No sólo
obtener a cabalidad cuáles son las materias
de un completo mapeo de información para el
comparten el desarrollo de un área en común, si
que ya han sido investigadas y desde dónde se
uso colectivo de manera que quede abierta la
no que también comparten resultados, campos de
podría tomar como punto de partida para seguir
posibilidad de trabajar sobre las temáticas y aportar
investigación y conclusiones similares.
avanzando en un mismo tema.
como comunidad a distintas agendas de trabajo.
¿Cuántos proyectos para potenciar el turismo en
¿Qué pasaría si aquellos alumnos hubiesen tenido
La posibilidad de comprender qué proyectos
Chile, habremos realizado? ¿Cuántas veces hemos
la posibilidad de acceder al trabajo realizado por
de título existen y han sido desarrollados nos
rediseñado los sistemas de señalética para las
el otro para así generar una investigación y un
entregaría un campo más directo y transparente
ciclovías? ¿Cuántos registros se han hecho para
proyecto mucho más completo y acabado, a partir
para ver qué áreas o focos de trabajo son
poner en valor la expresión gráfica popular en Chile?
del anterior?
potenciales para desarrollar proyectos más innovadores en el diseño.
A este pequeño fenómeno me gustaría referirme
Considero que si se permitiera la posibilidad de
como el fenómeno de “invención de la rueda”. No
poder continuar con un trabajo ya existente la
supongo este fenómeno como algo intencional si
calidad de los proyectos de título en materia de
no que efectivamente existen hoy en día materias
investigación sería mucho más enriquecedora,
o temas que están generando más influencia a
ya que el conocimiento adquirido por nosotros
formulaci贸n del proyecto | 17
formaci贸n de agendas de trabajo tem谩ticas
tema 1
tema 2
tema 3
MARCO TE ÓRICO
02
marco teórico | 21
entrevista
Estado del Diseño en Chile Encuentro con Manuel Figueroa[3]
Para determinar el estado actual del diseño en Chile, me interesaba comenzar por conocer cuál era el nivel de información que se manejaba respecto a políticas públicas y específicamente qué postura se tiene como institución gubernamental y cultural, en cuanto al desarrollo referido a las escuelas de diseño en Chile. Para poder aclarar mis dudas me reuní con Manuel Figueroa, Coordinador del Área de Diseño del Consejo Nacional de la Cultura y las Artes (CNCA). El encuentro tenía 3 ejes fundamentales de conversación.
1. Cómo se está evaluando el desarrollo del diseño en Chile. 2. De qué manera se está potenciando el desarrollo del diseño en Chile. 3. Cómo se comprende el área de investigación en diseño y cuál es su alcance/proyección a futuro.
[3] Coordinador del Área de Diseño del Consejo Nacional de la Cultura y las Artes (CNCA). Gobierno de Chile.
22 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
A partir de la conversación sostenida con el experto,
diseño, a través de la cantidad de millones de
lo que eventualmente, ha hecho que se retrase el
pude conocer los siguientes aspectos que paso a
dólares facturados por todas las empresas que
levantamiento de información más precisa.
detallar a continuación.
tributan en el Servicio de Impuestos Internos (SII),
Carencia de Indicadores Actualmente, no existe información detallada sobre los indicadores de carácter cuantitativos ni cualitativos sobre el estado del diseño en Chile. Los únicos datos manejados por la CNCA son los que arroja al portal web mifuturo.cl y los porcentajes de ingreso y facturación de industrias que ofrecen servicios de diseño. El primero, mifuturo.cl, se enmarca en el contexto educacional y te indican 3 variantes de información; niveles promedio de salario, proyección de los egresados, nivel de empleabilidad. Mientras que el segundo, intenta dar una aproximación para determinar la influencia del
con un giro de diseño. Sin embargo es sabido que
Si el gobierno maneja sólo datos parciales sobre
una fotocopiadora puede tener el giro de servicios
el número de profesionales que egresan desde las
de diseño, aquí nos preguntamos: ¿cuales prestan
instituciones y las proyecciones de ingresos que
servicios al diseño y cuáles producen diseño? Esa
recibe, no se alcanza a obtener información sobre
información tampoco está determinada.
cuánto es efectivamente el aporte que el diseño está generando en las industrias creativas.
Si ni siquiera tenemos información básica de carácter cuántitativo para conocer el aporte del
El especialista agrega “...Si uno compara por ejemplo
diseño en materia económica a nivel nacional,
con otros países de latinoamérica, estamos muy lejos.”
resulta pacticamente imposible obtener información de carácter cualitativo para determinar la calidad del diseño y el aporte en materia de innovación y desarrollo. Manuel Figueroa explica esta situación basándose en los requerimientos que se necesitan para tener estos datos, montos de recursos financieros y disponibilidad de recursos humanos muy grande,
marco teórico | 23
Divorcio entre la Academia y las Empresas Actualmente no se está viendo el desarrollo del diseño desde un punto de vista colaborativo. Todavía no se tiene claridad respecto a la posición de ciertas instituciones educacionales y su forma de gestionar los requermientos que el país necesita en cuánto a diseño. En cuanto a diseño el Coordinador del área expresa: “...¿Son las empresas las que dictan a la Academia lo que tienen que enseñar a los futuros diseñadores y ésta debiera responder, o es la Academia la que produce investigación y entrega insumos para que las empresas desarrollen innovación? Actualmente ni la empresa ni la Academia está dispuesta a ceder ya que no se está viendo a partir de un tema colaborativo... En otras partes del mundo, es diferente; la innovación y el desarrollo lo llevan las universidades y son las empresas las que van a buscar a las universidades, la materia prima donde hay que moldearla para pegarse el salto.”
24 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Potencial de Investigación Desperdiciado
“Si no logramos apoyar la investigación que está ocurriendo a nivel de escuela para transformarla en
El Área de Diseño del CNCA, tuvo la intención de
investigación aplicada, seguirá ocurriendo lo que
potenciar los focos de observación e investigación
sucede ahora: cualquier cosa que tenga que ver con
aplicada en diseño, llamando a un concurso para
investigación en diseño se queda en las estanterías de
ver qué universidades cumplían con los requesitos
las bibliotecas de las escuelas.”
necesarios para ser certificadas como centros de emprendimiento e innovación en Chile.
Actualmente no se ve mayor interés de los ejecutivos en la Academia por generar una gestión
De este concurso sólo dos cumplían con los
y un seguimiento a los trabajo realizados por sus
requisitos internacionales necesarios: la
estudiantes para sacarlos del nivel de investigación
Universidad de Valparaíso y la del Bío-Bío. Ambas
pura y llevarlos a un nivel de investigación aplicada.
fueron certificadas. Deberían ser las mismas escuelas las encargadas “...Veíamos que teníamos en las universidades grandes
de hacer la gestión para poder sacar los proyectos
proyectos de títulos con diseño e investigación y esto
realizados por sus alumnos, vincularlos con el
tenía que salir, es un tema súper importante. Nosotros no
medio y posteriormete hacer un seguimiento. Si
nos hubiésemos aventurado a mover estas certificaciones
se lograra concretar esta idea, no sólo estarías
si no creyéramos que en las universidades a nivel de
validando el trabajo de tus alumnos, si no que te
pregrado, se estaba desarrollando investigación.”
estarías validando como institución a la vez.
marco teórico | 25
Conclusiones del Encuentro Después de esta conversación sostenida con Manuel Figueroa, se puede concluir lo siguiente:
1. Es necesario contar con un espacio que de cuenta del contenido que hoy se está produciéndo en las escuelas de diseño. Con esto seríamos capaces de identificar cuáles son las grandes agendas donde el diseño puede insertarse y aportar.
2. Son las universidades las que manejan el mayor capital de investigación para el desarrollo del diseño. Por lo tanto, éstas debieran hacerse cargo y aproximar a los almunos y sus proyectos para que éstos salgan a la luz.
3. Los proyectos de título efectivamente contienen información relevante que puede ser utilizada para la resolución de problemas, ya sea que su resultado final, constituya o no, un aporte en materia de prototipo.
26 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
La Web. Contexto y Evolución
Web 3.0
Actualmente, estamos constantemente siendo
Esta expresión aún no se ha terminado de definir.
partícipes de la evolución que se genera en el
Representa una era en la que los principales ejes de
desarrollo de internet y las redes que lo componen
investigación forman parte de un sistema complejo
En sus inicios la web 1.0 aparece como un sistema
de manejo de datos donde su manipulación, ha
restringido a un usuario especialista. Pocas
resultado en el perfeccionamiento de los sistemas
personas tenían acceso.
de búsqueda y accesibilidad de la información y la asociación de datos digitales[4].
Más adelante la web 2.0, orientada a los servicios disponibles en el medio y a la interacción directa
El contexto actual en torno al desarrollo de estás
con el usuario, generaba plataformas colaborativas
tecnologías plantea el desarrollo de una web más
y comunicacionales. Dio como resultado una
inteligente y autónoma a nivel de infraestructura.
generación marcada por las redes sociales y plataformas colaborativas, bajo proyectos
Además, la tendencia hacia una información
importantes como Wikipedia. La narrativa social
compartida y abierta sigue creciendo, surgiendo
se ha ido escribiendo en la red durante los últimos
así las plataformas de código abierto (Open Source),
años y refleja la expresión de las personas. Este
el uso de licencias Creative Commons, la capacidad
medio interconectado, nos ha permitido una mayor
de generar bases de datos asociativos entre ellos
apertura a la información, facilitando la producción
(relación entre contenidos), etcétera.
abierta de contenidos.
[4] Fuente: Entrepreneurs See a Web Guided by Common Sense, by John Markoff. New York Times, 12 de noviembre de 2006
“Los servicios web se han vuelto más robustos y sofisticados, las nuevas estructuras editoriales están diseñadas para permitir a sus comunidades organizar sus contenidos de maneras mucho más colaborativas, transformándose ellas mismas en plataformas de interacción social.” Herbert G. Spencer González http://herbertspencer.net Diseñador de Interacción PUCV
marco teórico | 27
› web 1.0 1990-2000
áreas de desarrollo según el nivel de evolución de la web[5]
› web 2.0
› web 3.0
2000-2010
2010-Presente
Software շշ “World Wide Web” շշ softwares tradicionales շշ web estática
Usuario UX
շշ nula capacidad multimedia
Social Media
Social Network
Software
Software
շշ “Web Social”
շշ “Web Semántica”
շշ no se limita a un sólo dispositivo
շշ modelos de organización inteligentes
շշ herramientas para generar contenidos (multimedia entre otros)
շշ softwares rápidos
շշ sin actualizaciones de contenido
շշ constante actualización
Relación con el Usuario
Relación con el Usuario
շշ sin interacción con el usuario
շշ aprovecha la inteligencia colectiva
շշ sólo lectura de datos
շշ centralización en la experiencias con el usuario
շշ inteligencia individual (sólo para expertos)
շշ democratización de la web
շշ discurso unilateral de emisor (webmaster) a receptor (usuario) շշ no es colaborativo
շշ participación directa del usuario
Casos
Casos
շշ Directorios
շշ Wikis
շշ Gopher
շշ Blogs
շշ Brittanica Online
շշ RRSS (Redes Sociales)
շշ personalización de la web շշ sistemas de geolocalización շշ “oficemática” online շշ protagonismo de motores informáticos y procesadores de información Relación con el Usuario շշ personalización de la web շշ el usuario define la información relevante mediante sistemas de recomendación շշ fidelización del usuario շշ información cualitativa orientada al usuario
Casos շշ iGoogle
Softwares y Herramientas
շշ Google Drive Contenido (Gestión de datos)
Web 1.0
[5] Fuente: “Web 3.0: The Third Generation Web is Coming”por Nova Spivack - “Cuadro comparativo web 1.0, web 2.0 y web 3.0” por Jenifer Barreto
Web 2.0
Web 3.0
շշ Amazon Search շշ Flipboard
28 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Web Semántica La web semántica es una web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida. Al dotar a la web de más significado y, por lo tanto, de más semántica, se pueden obtener soluciones a problemas habituales en la búsqueda de información gracias a la utilización de una infraestructura común, mediante la cual, es posible compartir, procesar y transferir información de forma sencilla. Esta web, basada en el significado, se apoya en lenguajes universales que resuelven los problemas ocasionados por una web carente de semántica en la que, en ocasiones, el acceso a la información se convierte en una tarea difícil y frustrante.
“En su nivel más básico, la búsqueda semántica, aplica significado a las conexiones entre los diferentes nodos de datos de la Web de manera que permitan una comprensión más clara de lo que alguna vez ha tenido hasta la fecha.” David Amerland, Google Semantic Search: Search Engine Optimization (Seo)
marco teórico | 29
Conexiones Semánticas Nodos de Información
Ilustración generada para explicar el funcionamiento de una red mesh en cuanto figura de distribución y conexión entre nodos de información.
30 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Antecedentes
motor de búsqueda
conceptualización con las ideas/proyectos más votados para su posterior evaluación y desarrollo.
caso 1: OpenIDEO
Este sitio no es un sitio de búsqueda de inspiración
Lo interesante es que desde un proyecto, se van
URL: http://openideo.com
individual, por lo tanto la barra de búsqueda no
sumando “contribuidores” que ayudan al desarrollod
tiene una mayor predominancia visual en el home,
e las ideas.
OpenIDEO se define como “una plataforma de innovación
menos en las páginas internas. Aún así la búsqueda
abierta y para el bien social... Somos una comunidad que
se puede realizar a través de categorías: usuarios,
se basa en el optimismo, inspiración, ideas y opiniones de
conceptos, inspiraciones y los resultados pueden
todo el mundo para resolver los problemas juntos.”
ser filtrados por: más recientes, aplausos, más vistos, más comentados, mejor evaluados.
Este caso en particular me llama la atención por tratarse de una plataforma que expone grandes temas o agendas de trabajo y reúne a la comunidad interesada para trabajar sobre ellos. Es un sitio en su fase beta*, y ya suma resultados dentro de las distintas temáticas que cada persona ha aportado a estas agendas.
interacción con el usuario El núcleo del sitio se basa en la participación activa el usuario. Para esto la manera en que expone los contenidos va asociada a la interacción. Durante
tipo de contenido
todo el período en que el contenido está expuesto en la página, el usuario podrá calificar (aplausos),
OpenIDEO expone “agendas de trabajo” lo que
comentar, contribuir y compartir los temas.
llaman ellos desafíos, cada uno de estos posee un brief, y a partir de ese brief la gente expone sus
Además te ofrece un perfil de usuario donde vas
ideas de cómo podría solucionarse tal problema.
viendo tus aportes de manera gráfica y visualizados
Todo desafío expuesto en la página se define en 4
en las distintas etapas de los proyectos, también
etapas: inspiración, conceptualización, evaluación
te permite archivar contenidos que hayan sido de
y realización. A medida que la gente va aportando,
tu interés. Así tu perfil se va transformando en una
se van evaluando, así llegan a una etapa de
pequeña herramienta de trabajo.
marco teórico | 31
շշ Imagen 1
շշ Imagen 2
Imagen 1:Despliegue del Home Imagen 2: Primera vista de un “desafío” y su brief. Se puede ver la predominancia de la barra de evaluación del desafío y la cantidad de colaboradores que está sumando.
32 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
caso 2: Tisch School of the Arts ITP
motor de búsqueda
URL: http://itp.nyu.edu/shows/spring2013/category/ projects/
Muchos de los proyectos contienen enlaces donde se puede apreciar el resultado final (sitios web).
Este sitio sólo se centra en la exhibición de las tesis y proyectos desarrolladas en este programa
Al inicio del sitio se dispone de un espacio para
Es necesario entender que se desarrollan diferentes
por lo tanto la barra de búsqueda no tiene mayor
hacer llamados a participar de las próximas
exhibiciones universitarias donde las escuelas
importancia al interior del sitio. Existe una barra
exhibiciones.
hacen una muestra de los trabajos realizados en
lateral que indica als diferentes promociones y años
ellas para validar sus programas de enseñanza,
para comenzar cualquier búsqueda orientada a un
su perfil de estudiante y abrir puerta a posibles
eje temporal, más que temático
nuevos postulantes. Bajo este contexto el programa de desarrollo tecnológico y de interacción ITP genera esta plataforma virtual a modo de apoyar estos showrooms. Acá se alojan proyectos de diferentes promociones que han participado de estas exhibiciones.
interacción con el usuario La interacción con el usuario a través de la
tipo de contenido
plataforma es practicamente nula, si bien hay unos pequeños llamados para conectarse con el
El contenido se limita a un breve resumen del
programa a través de redes sociales y mailling,
proyecto más el apoyo visual que sea necesario,
no se insiste en que el usuario se haga parte de
para dar a conocer el resultado final.
la plataforma. Esto se explica por este llamado espacio expositivo que plantea una relación
No pretende entregar mayor información del
unilateral: “La Universidad te muestra, tú observas”.
proceso ya que el público al cuál se dirige no anda en busca de inspiración, si no que busca motivación
Este caso es interesante ya que son muchas las
para iniciarse en un programa que lo lleve a
escuelas que generan estos espacios para mostrar
resultados similares o cercanos a lo que se expone.
cómo trabajan y así validarse en el medio y crecer.
marco teórico | 33
շշ Imagen 1
շշ Imagen 2
Imagen 1:Despliegue del Home Imagen 2: Primera vista de un proyecto. No posee ningún llamado a interactuar para el usuario. Se limita sólo a mostrar un resultado final y su link externo.
34 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
caso 3: Casiopea
motor de búsqueda
URL: http://wiki.ead.pucv.cl/index.php/Casiopea Casiopea se define como “ un espacio de registro y
“administración del contenido”.En muchos casos Esta plataforma es una wiki, por lo cual el sistema
esto dificulta la lectura ya que al ser los mismos
de búsqueda es el mismo aplicado en Wikipedia.
usuarios quienes disponen de la publicación del
documentación, de carácter colaborativo para los usuarios digitales de la Escuela de Arquitectura y Diseño de la Pontificia Universidad Católica de Valparaíso.” Casiopea es uno de los primeros casos a nivel nacional que llamaron mi atención. La intención es trabajar para la comunidad de la Escuela, no sólo sirve como repositorio de los proyectos de títulación, si no que a su vez del trabajo realizado en talleres y cursos de la Universidad.
hace que el mismo usuario deba interactuar con la
contenido, éstos no tienen las mismas modalidades tipo de contenido Se exponen proyectos de talleres, cursos, investigaciones, publicaciones, título y posgrado. Es obligación que los alumnos vayan documentando sus avances. Se pueden subir todo tipo de anexos. En el caso de proyectos de titulación, adjuntar un PDF del ejemplar, es de carácter obligatorio y estará disponible para su descarga en el sitio.
de jerarquización al momento de publicar, volviéndose compleja su comprensión. Al ser el usuario el encargado de gestar y publicar el contenido, no tiene ningún otro tipo de interacción No se puede compartir, valorar ni comentar los contenidos, solo se exponen. Los usuarios tienen un perfil en la plataforma que deriva del mismo perfil del portal de la Universidad, sin embargo, éste solo les sirve como acreditación
interacción con el usuario
para publicar contenidos, no permite guardar archivos ni tampoco posee una instancia pública
Esta página corresponde a una wiki, por lo que cada alumno es el encargado de subir la información a medida que avanza su proceso creativo. Esto
para quien desee contactar al alumno.
marco teórico | 35
շշ Imagen 1
շշ Imagen 2
Imagen 1:Despliegue del Home Imagen 2: Primera vista de un proyecto de título. Se pueden observar los principales parámetros descriptivos del proyecto y el índice de contenidos.
36 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
caso 4: Tesis Universidad de Chile
motor de búsqueda
URL: http://tesis.uchile.cl/
Una vez hecho click al enlace éste te deriva al contenido del proyecto. La nueva instancia
La búsqueda puede desarrollarse por “colecciones”
para visualizar la tesis es parte de la plataforma
El Portal de Tesis Electrónicas de la Universidad de
(facultades), tipología de tesis (pregrado,
cybertesis y su interfaz de visualización es
Chile define como objetivo principal la “...publicación,
posgrado), fecha de publicación, autor. También
completamente ajena a la fuente original. Se nota
difusión y conservación de todas las tesis de pregrado
posee un sistema de búsqueda avanzada, que es
que es una interfaz que no se ha actualizado en
y postgrado, generadas por la Universidad de Chile
más bien, complejo de entender y finalmente uno
mucho tiempo y que no posee coherencia gráfica
en texto completo a través de la plataforma web de la
termina buscando de manera libre.
que unifique ambas plataformas.
tipo de contenido
interacción con el usuario
Los contenidos expuestos corresponden a tesis
El sitio en general no llama a la interacción usuario/
tanto de pregrado como posgrado de todas las
contenidos. Ni siquiera en la última instancia de
facultades de la Universidad. Estos contienen papers
visualización te permite valorar y compartir la
en formato PDF, disponibles para su descarga.
materia, lo cuál se contradice con la posibilidad de
Universidad, creando un sistema de información en formato digital” Si bien este es el caso más cercano a un repositorio que compete a toda la Universidad y sus Facultades, la interfaz para exponer los contenidos, presenta carencias importantes.
bajar al contenido de manera abierta. Tampoco Empieza con una previsualización de los datos
te ofrece un acceso a los datos de quiénes son los
del proyecto: autor, año, código de indexación,
autores los proyectos, por lo que simplemente se
etcétera. Adicionalmente muestra el enlace al
están almacenando.
material disponible (ver imagen 2).
marco teórico | 37
շշ Imagen 1
շշ Imagen 2
Imagen 1:Despliegue del Home Imagen 2: Primera vista de un proyecto de título. Se pueden observar los principales parámetros descriptivos del proyecto y un botón de descarga de los archivos adjuntos.
38 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Referentes
visualización del contenido
portada de cada proyecto para después profundizar más en una segunda instancia de visualización de
Awwwards
Al tratarse de un sitio que busca, dentro de sus
URL: http://awwwards.com
objetivos, servir como un espacio de inspiración
los mismos.
para quienes lo visitan; saca provecho de la imagen
Este sitio sirve como una plataforma para validar a
Awwwards se define como el espacio que “...reconoce
como una herramienta visual llamativa para
distintas agencias que desarrollan web en el medio.
el talento y el esfuerzo de los mejores diseñadores web,
atraer al usuario.
El reconocimiento de ésta como un mecanismo de
desarrolladores y agencias en el mundo.” El principal objetivo de este sitio es generar
medición de calidad, ha llevado a esta plataforma a Es así como en su formulario de subida de proyectos
gestar jurados que participan en un segundo nivel
se pide de manera obligatoria, una imagen de
de reconocimiento.
un punto de encunetro donde los expertos y profesionales desarrolladores web, puedan encontrar inspiración, ellos lo plantean como un espacio de debate, para compartir conocimientos y experiencias. Se centra en la interacción con el usuario y desarrolla herramientas de evaluación y participación del público a través de foros, comentarios y sistemas de ranking por comunidad. Este sitio no muestra los procesos desarrollados, si no que se centra al resultado final.
Imagen 1: Vista parcial de un proyecto y su calificación en ranking por jurado y comunidad.
շշ Imagen 1
marco teórico | 39
շշ Imagen 1
շշ Imagen 3
շշ Imagen 4
Imagen 2:Despliegue del Home Imagen 3: Sistema de búsqueda a través de filtros por categoría. Se despliegan hacia abajo, una vez seleccionada la opción. Además puedes quitar o sacar filtros según lo específica que quieras la búsqueda. Imagen 4: Puedes acceder desde el heade a una barra lateral de navegación que te ofrece más opciones de búsqueda.
40 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
շշ Imagen 1
Kippt URL: http://kippt.com Kippt plantea el siguiente statement; “...el flujo de trabajo de encontrar, leer, almacenar, buscar y compartir información en la web parece roto para nosotros. Es muy aleatoria y dispersa en muchos lugares. Kippt creció de esa frustración. Queremos hacer de su flujo de trabajo de información y archivo sin esfuerzo.” El principal objetivo de este sitio es servir como herramienta para organizar la información que se encuentra en internet. Quisiera rescatar este caso en particular por la
interacción con el usuario Esta plataforma va dirigida a un usuario completamente activo que está encargado de administrar su propio contenido. Le permite crear múltiples listas para ir administrando el material que el usuario disponga. A su vez le permite compartir estas listas con otros usuarios generando grupos de trabajo. El elemento predominante de navegación es el sidebar que contiene todos los llamados e interacciones relacionados alperfil del usuario.
barra que te permite linkear distintos trabajos, archivos, papaers, imágenes a determinadas carpetas que el mismo usuario se encarga de crear.
Imagen 1: Sidebar de un perfil. Contiene buscador, listas mensajería y un espacio para incluir proyectos en carpetas.
marco teórico | 41
շշ Imagen 2
Imagen 2: Despliegue de contenidos según la selección de una lista
D ESARROLLO DEL P ROYE CTO
03
desarrollo del proyecto | 45
entrevista
Caso de Estudio FAAD[6] Encuentro con Mª Soledad Mora Córdova[7]
Para introducirme más en el caso real de estudio, solicité a la Jefa de Biblioteca de la FAAD que me proporcionara cierta información clave del modo en que funcionan actualmente los sistemas de indexación de la Escuela y cómo ella visualiza la problemática de búsqueda y acceso a los proyectos.
El objetivo del encuentro, era conocer estos datos y a su vez, generar un vínculo que me permitiera acceder al registro de los proyectos y tesis, en su versión digital de la Universidad. De este modo, podría utilizarlos como caso de estudio durante el desarrollo de mi proyecto para simultáneamente trabajar con mi Escuela.
[6] FAAD: Facultad de Arquitectura, Arte y Diseño. Universidad Diego Portales. [7] Jefa Biblioteca, Facultad de Arquitectura, Arte y Diseño. Universidad Diego Portales.
46 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Hoy, en la Universidad Diego Portales, se titulan
Indexación de las Tesis
Una vez ingresados los datos que Horizon requiere,
aproximadamente, 130 alumnos de la carrera
el sistema te da un código que se refiere a la
diseño, por año. Esta cifra incluye tanto a
Soledad me comenta de qué manera ellos realizan
indexación del ejemplar de tesis o proyecto. Este
diseñadores gráficos como industriales.
la indexación de las tesis:
código es adherid, en forma manual, tanto al formato físico como al digital.
Los procesos de titulación son semestrales por lo
1. Las tesis deben ser aprobadas en Casa Central una vez
cual el ingreso de las tesis y proyectos a la biblioteca
que el alumno ya haya sido evaluado y aprobado en su
ocurre dentro de un período de 6 meses.
exámen de titulación. 2. Una vez que las tesis llegan a biblioteca, éstas pasan
Existen dos lugares físicos de almacenamiento: Memorias Físicas (Formato libro): Son llevadas
Para la titulación es requisito tener tres ejemplares
por Soledad y su equipo para ingresarlas al sistema de
a las estanterías que se pueden ver al entrar a la
de memorias o proyectos impresos, que serán
catálogo online , el cuál sólo consta de un buscador (el
biblioteca, específicamente en el lado oriente. Se
distribuidas entre biblioteca, comisión y estudiante.
contenido no está disponible en este catálogo).
ordenan por año y por carrera; mención (gráfico/
[8]
3. Para ingresar estas tesis al catálogo digital, la biblioteca
industrial).
Si bien, hoy en día puedes encontrar copias digitales
de la FAAD consta de un programa llamado Horizon[9].
de proyectos de título del año 2010 y 2011, es tan
Este administrador de contenidos te exige ingresar los
Memorias Digitales (Formato CD): Éstas son
sólo desde el año 2012 que comenzó a formar parte
siguientes datos para su clasificación:
llevadas a unas pequeñas vitrinas ubicadas al
de manera obligatoria, la entrega de dos copias en versión digital para la biblioteca. Las que serán indexadas en el sistema de biblioteca local.
fondo de la biblioteca de la FAAD. Incluye una serie
• Título del proyecto
• Notas de tesis
• Autor
• Nota de bibliografía
de cajones donde son ubicadas las cajas con los
• Datos publicación
• Materias
• Descripción
• Notas del contenido
respectivos CD.
[8] Catálogo Online de la Universidad Diego Portales. [http://200.14.86.24/#focus] [9] SyrsiDynix, Horizon. Administrador de contenidos utilizado por las distintas bibliotecas de la UDP. [http://www.sirsidynix.com/horizon]
desarrollo del proyecto | 47
nomenclatura de indexación
nomenclatura
Memoria HairLab[10] Alumno: Antonio Baraona Profesor Guía: José Soto Códigos de Indexación DISGRAF Código: B225h.S Año: 2013 c.1
TES DISGRAF
TES DISIND
La memoria en formato digital, contiene:
Tesis Diseño Gráfico
Tesis Diseño Industrial
- PDF de la Memoria Física - Anexos tales como: entrevistas, encuestas, piezas audiovisuales, documentos, planimetrías, etc.
Sello cromático: Copia única Copia para préstamo Tesis de magíster
Sello por año:
Copia única Gráfico 2013
[10] Memoria extraída de la Facultad de Arquitectura, Arte y Diseño. Universidad Diego Portales.
Año 2012
Gráfico / Industrial
Primera letra del apellido del alumno(a)
Año 2011
Gráfico / Industrial
Número arrojado por Horizon
Año 2010
Gráfico / Industrial
Año 2009
Gráfico / Industrial
Año 2008
Gráfico / Industrial
Año 2007
Gráfico / Industrial
Primera letra del nombre del proyecto Primera letra del apellido del profesor guía
48 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Estantes ubicados en la sección de atrás de la biblioteca FAAD. Aquí se almacenan actualmente las versiones digitales de las tesis y proyectos de titulo de diseño, arquitectura y magíster.
Durante la conversación con Mª Soledad se
“...Es absolutamente necesario poder contar con un
aclararon muchas de las dudas que tenía respecto
espacio digital para nuestras tesis, ahora nuestra labor
al modo en que indexaban las tesis o proyectos.
se remite a recibir las versiones digitales y acomodarlas el
Coincidimos en la necesidad de generar una
estante que se encuentra allá. Además, tampoco hemos
plataforma que sea capaz de sostener estas tesis
tenido el tiempo de poder comunicar a los alumnos que
para que estén a disposición de los alumnos y del
existe esta modalidad digital y que efectivamente pueden
cuerpo académico/ejecutivo.
hacer uso de ella.”
desarrollo del proyecto | 49
Descubriendo un Problema
inexistencia de orden de las tesis ya indexadas
Gráfico, con la etiqueta de Diseñador Industrial por lo que en el estante quedaban en ubicaciones
Para trabajar con un contenido real en una próxima
No lográbamos encontrar las tesis por su código ya
completamente opuestas. Una vez identificamos
etapa de prototipado, hice una selección de 20 tesis
que en los estantes no existía un orden alfabético
cuáles eran pude dar con una de las tres faltantes.
repartidas entre el año 2013 y 2012, y seleccionadas
que nos pudiese ayudar.
por diseño industrial o gráfico. Mª Soledad accedió a ayudarme y me acompañó a los estantes donde se
Para solucionar este problema decidimos ordenar
encontraban para buscarlas en conjunto.
las tesis alfabéticamente así, las tesis que en su código, comenzaban con la letra “A” quedaban de
Al enfrentarnos a la búsqueda en el estante
las primeras y las que comenzaban con la letra “Z”
evidenciamos las siguientes dificultades.
quedaban al final. Al ordenar las tesis del estante, encontramos alguna de las tesis de mi selección, sin embargo faltaba por enconrar tres de ellas.
el código no coincidía con su par en digital El par restante era imposible encontrar por código, tampoco quedaban tesis mal indexadas por mención, ya las habíamos corregido. Fue ahí cuando Mª Soledad me señaló “busquemos estas dos por el nombre del proyecto, no por el código de indexación”. Haciendo esto pudimos dar con las dos tesis
tesis de diseño gráfico en diseño industrial
perdidas. Básicamente el código de la tesis física no coincidía con el código de la tesis digital.
Nos dimos cuenta que habían tesis correspondientes a la Mención de Diseñador
Un error humano que dificultó nuestra búsqueda.
50 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Experiencias de los Alumnos en Biblioteca FAAD[11]
claudia merino · Diseñadora Gráfica en Título
ignacio meza · Diseñador Gráfico en Título
cristián arismendi · Diseñador Industrial en Título
“...Para encontrar sobre un tema tienes que leerlas todas
“...En el mayor acercamiento que he tenido con las tesis ya
“...Para mí es súper útil contar con los ejemplos de título de
para ver si hay algo que te sirve. Además desde que entré
impresas ha sido ir, buscar y no me ha dado mucho agrado
acá en la biblioteca... De hecho yo ahora, pedí una cantidad
a trabajar ha sido muy difícil venir a la biblioteca, porque no
encontrarme con un montón de libros que están caídos, que
específica de libros, que los tengo que devolver en una fecha,
tengo otra forma de buscar referentes de títulos si no que venir
están desordenados y eso también te genera una sensación de
pero como no puedo sacar más, he tenido que venir para
y revisar todos los títulos para ver si hay alguno que me sirve.”
desorden del sistema mismo de la biblioteca.”
anotar o sacar fotos de temas que tienen que ver con otras.”
jaime santacruz · Diseñador Gráfico en Título
tamara fonseca · Diseñadora Gráfica en Seminario
francisca reyes · Diseñadora Industrial en Seminario
“...Es dificultoso encontrar la información, sobre todo habiendo
“...He tenido que venir mucho a la biblioteca y es bien complejo
“...Durante este proceso me ha tocado investigar, hacer
hoy día sistemas de información tan sofisticados, tener que ir
estar trabajando de lunes a miércoles y tener sólo un día para
levantamiento de información y he estado trabajando en este
a encontrarse con ese sistema informático del ‘93 es difícil,
poder venir... No es provechoso el tiempo que uno está aquí
espacio, en la biblioteca y por una parte es muy bueno porque
es engorroso y es lento... La búsqueda de información en
porque al final el título de la tesis como que no te sirve mucho
hay mucha información, pero por otra creo que, por ejemplo,
el formato papel se pone cada vez más latera cuando la
y uno igual las tiene que leer enteras para saber si un trozo de
el orden de las tesis no existe... si bien están ordenadas por
comparas con la misma búsqueda de información en el libro
la tesis de otra persona te puede servir de inspiración o lo que
año, no están ordenadas por temáticas entonces uno se toma
en versión digital, vas rápido donde quieres, haces como un
sea... Al final los problemas que uno encontró pueden ser la
mucho tiempo en encontrar la indicada.”
“search” dentro del texto y llegas a los temas que te interesan.”
solución del proyecto de otra persona.”
[11] Frases extraídas a partir de una serie de entrevistas hechas a los alumnos que se encuentran en su proceso de Seminariod e Título y Título. Ver anexos.
desarrollo del proyecto | 51
Puntos Claves del Problema
información de manera rápida y eficaz. La falta de
en el Servicio
un sistema de categorías más específica genera un
Factor Tiempo
ciclo de búsqueda mucho más amplio, por lo cuál
Los alumnos no saben que actualmente pueden
llegar al resultado de búsqueda deseado se vuelve
hacer reservas de ejemplares para que una vez que
un trabajo mucho menos provechoso.
sean devueltos pueden pedirlos en préstamo.
Una gran parte los alumnos que entra a Seminario de Título, se encuentra trabajando, lo que los deja
Límites en las Prestaciones
con un margen de tiempo mucho más acotado y estricto para distribuir sus horas de investigación.
Los límites en la cantidad de copias que puedes
Trasladarse a la Universidad representa un conflicto
pedir prestadas, como decíamos antes, también
y verse enfrentados al sistema de búsqueda interno,
dificultan el proceso investigativo. Este sistema
dificulta aún más el rendimiento de las horas
te obliga a adaptarte a los días y horarios en que
destinadas en la biblioteca.
puedes utilizar cada copia.
Orden de las Tesis La inexistencia de un sistema organizado para disponer las tesis indexadas en biblioteca, dificulta la labor del investigador/estudiante para acceder a la
Difusión de la Información
Existe acá otro punto importante y es que al tener solo una copia para préstamo muchas veces no se encuentra disponible por lo cuál siempre se estará dependiendo de los que andan en búsqueda de una información similar.
Tampoco están informados que pueden acceder a los formatos digitales (versión CD) de las tesis que ahora existen en las bibliotecas. Esto representa un vacío en la comunicación del servicio.
EL P ROYE CTO
04
el proyecto | 55
¿Qué es?
¿Por qué?
¿Para qué?
Corresponde a la creación de una plataforma
Existe una gran cantidad de información no
Los proyectos de título ya no resultarán una fuga de
web que, utilizando las tecnologías actuales,
centralizada ni sistematizada que se traduce en una
ideas si no que, funcionarán como un repositorio
aproveche el escenario para presentar información
búsqueda muchas veces engorrosa, donde el acceso
colectivo que conecta contenidos para construir
digital conectada entre sí, referida a proyectos de
a la información pasa a ser complejo por falta de
el uno sobre el otro, definiendo cuáles son los
grado, memorias o tesis para obtener el título de
experiencia de las y los estudiantes o por falta de
principales pilares de discusión o temas que se
Diseñador en Chile.
tiempo para desplazarse a las bibliotecas.
están tratando actualmente a nivel país.
De manera anexa, el orden de esta información
Esto se traduce en una pérdida de energía
Al capitalizar este conocimiento se generaría, a
podrá generar un mapeo de las distintas
creativa que bien puede ser aprovechada de mejor
su vez, la oportunidad de trabajar sobre la base
controversias que se están llevando a cabo en los
forma para que lo proyectos puedan significar un
de distintas matrices de análisis para el desarrollo
diferentes casos de estudio por estudiantes.
verdadero aporte a los campos de investigación.
investigativo de manera más adecuada.
56 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Objetivos Generales Desarrollar un plataforma web de búsqueda, registro y documentación de información referida a proyectos de titulación, memorias de título, tesis de grado, pertenecientes a la Escuela de Diseño de la Universidad Diego Portales. La elaboración de esta plataforma estará
Específicos • Generar una base de datos con proyectos de titulación para la Escuela de Diseño de la Universidad Diego Portales. • Facilitar el acceso a la información y administrar adecuadamente el conocimiento como activo para procesar mejor la información.
pensada para que el usuario pueda hacer recorridos semánticos; en donde los datos se vinculen generando nodos de información contextualizados.
• Generar patrones de navegación y búsqueda en conjunto a una nueva propuesta de visualización de la información y en la forma de recorrer los contenidos disponibles. • Gestionar la indexación de las memorias de tal manera que pueda darse un cruce semántico de información entre éstas y los contenidos, potenciando de este modo, el conocimiento teórico y la práctica de investigación.
el proyecto | 57
Viabilidad del Proyecto Una plataforma web de esta naturaleza no pretende ser rentable en el sentido de sacar ganancias monetarias directas, pero sí se considera como una inversión que ayudará a elevar los estándares de calidad de la Universidad y específicamente de la Escuela.
Tecnología a Disposición
del proyecto. Ellos deberán manejar los códigos
Tendencias a Considerar
pertinentes que permitan el acceso a las bases de dato para administrar cuentas de usuario y archivos
La Facultad de Arte, Arquitectura y Diseño (FAAD),
de gran contenido como los que pretende abarcar
ya ha mostrado interés por desarrollar una
este proyecto.
plataforma local para mejorar la comunicación interna de la Escuela, lo que significa una
El sitio deberá estar alojado en un hosting de
oportunidad para elaborar nuevos sistemas de
gran capacidad. Hay que comprender que esta
comunicación digital. Además existe una necesidad
plataforma no es un simple contenedor de
reconocida por la administración de la biblioteca
resultados parciales, si no que representa un
de la Facultad; han coincidido en la importancia
sistema de información complejo.
de desarrollar un espacio digital de encuentro que
Para la elaboración de un sitio web es necesario
apoye la labor educativa y formativa de la Escuela.
contar con un equipo de especialistas que apoyen
Se debe considerar un administrador del sitio, que,
la labor de diseñador. Para esto es necesario
podrá derivar en una capacitación para quienes hoy
A lo largo del desarrollo del proyecto, se pudo
considerar a expertos en la etapa previa al
están a cargo de la indexación de los proyectos y
evidenciar la existencia de demandas de parte de los
lanzamiento que ayudarán a concretar el sitio de
tesis de titulación, en la biblioteca. El administrador
alumnos por mejorar los servicios de búsqueda al
manera óptima. Un desarrollador back-end y
deberá manejar un CMS (Content Management
interior de la biblioteca en la facultad
front-end, serán parte obligada en una etapa inicial
System) para la publicación de contenidos.
58 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Ciclo de Vida del Proyecto
prototipado planificación Identificar Requerimientos
diseño
implementación y lanzamiento
Conceptualización de Marca Líneamientos Gráficos Línea Editorial
mantenimiento
testeo
etapa 01 · Planificación
etapa 02 · Diseño
etapa 03 · Prototipado
etapa 04 · Testeo
etapa 05 · Implementación
etapa 06 · Mantenimiento
En esta etapa se identifican los
Desarrollo de mapa de
En esta etapa se elaboran
La etapa de testeo, arrojará
En esta etapa se implementará el
Hay que tener en cuenta que
objetivos del sitio, así como las
navegación, wireframes e
los primeros modelos y
resultados sobre cómo el usuario
sitio web con todas las medidas
una vez lanzado el sitio deberá
necesidades, requerimientos,
identidad de marca, siempre en
prototipos de la interfaz. No
interactúa con las distintas
que aseguren su correcto
estar constantemente siendo
definición del contenido del
base al conocimiento obtenido
necesariamente el aspecto será
partes del sistema que ofrece
funcionamiento. Una vez
actualizado de manera que los
sitio, tipos de interacción,
en la etapa de planificación,
el mismo al que tendrá el sitio
la web. Esto también ayudará a
implementado el sitio y testada
usuarios lo perciban como un
identificación del usuarios
así como de los problemas de
finalizado, pero servirá para
evaluar la interfaz que estamos
su funcionalidad se procede al
producto vigente y no obsoleto.
y sus respectivos roles en la
usabilidad descubiertos en
evaluar la usabilidad del sitio
ofreciendo en este proyecto y el
lanzamiento y difusión para
plataforma, etcétera.
etapas de prototipado.
sin la necesidad de esperar a su
éxito que ésta pueda tener en su
atraer usuarios hacia el sitio.
lanzamiento e implementación.
usabilidad.
el proyecto | 59
Definición del Contenido
Reformulación de los Requisitos
El sitio deberá contener las memorias ya
Nuevo envío de tesis en período de titulación.
respaldadas y documentadas por la institución académica (FAAD). La publicación de estas memorias en el sitio será requisito al momento de la primera entrega por parte de los alumnos. Como mencionábamos en la pasadada entrevista con Soledad, actualmente los requisitos incluyen paralelo a la entrega de la memoria física, dos
• El alumno deberá entregar tres ejemplares originales empastados con tapa dura. Las páginas deben ser impresas por ambos lados. • Un CD o DVD, con portada de igual o similar diseño que la portada de las memorias que contenga la copia en pdf.
copias digitales del documento. Actualmente, días antes, se debe enviar la memoria en formato pdf
La reformulación de estos requisitos al momento de entregar la tesis, incluirá subir el proyecto en el sitio diseñado, así pasarán directamente por el administrador y una vez que esta tesis o proyecto sea aprobado, será acreditado por la institución y será posible su publicación en el portal.
via e-mail al correo de secretaría (katherinne.moreno@udp.cl). Este paso será reemplazado por:
• El ingreso de la memoria en formato pdf a la plataforma de la FAAD (mi proyecto) y seguir los pasos que en el portal se le indican. (Seguirá el mismo proceso que el anterior sólo que a través de la plataforma). Si la memoria no está indexada en el portal no será aceptada para su presentación final.
60 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
շշ Institución
Esquema de un Proyecto de Título
շշ Carrera/Mención շշ Promoción/Año շշ Taller
La navegación a través del sitio a diseñar
շշ Tema
tiene un objetivo principal anteriormente es parte de
mencionado y es ofrecer un contenido
metadatos շշ Disciplina/as
revalorizado, y completo, lo que ayude a la interacción entre el usuario y la información.
ADMIN
շշ Título del Proyecto
son indexadas por
շշ Autor/es շշ Abstract
շշ Bibliotecario
Esta interacción se genera por medio de las
շշ Indexador
proyecto de título
tesis expuestas, las cuales poseen metadatos
de búsqueda.
շշ Tema
son solicitadas por
dentro del sitio. Este diagrama nos ayudará a para acceder al contenido y falicitar el proceso
շշ Profesor Guía շշ Categorías
o clasificaciones que permiten catalogarla entender los diferentes modos de exploración
շշ Promoción/Año
tiene
շշ Etiquetas
INVESTIGADOR շշ Alumnos
pueden ser
շշ Profesionales շշ Académicos շշ Otros
Estos datos enriquecen la exploración del contenido, permitiendo al usuario comprender, por medio de etiquetas, su contexto.
շշ Encuestas
շշ Fotografías
շշ Videos
շշ Grabaciones
շշ Documentos
շշ Imágenes
շշ Conferencias
շշ Música
շշ Entrevistas
շշ Mapas
շշ Motion
շշ Grabados շշ Planimetrías
el proyecto | 61
Definición del Público Objetivo Esta plataforma, si bien está pensada en este primer proceso para la Escuela de Diseño de la Universidad Diego Portales, no pretende ser excluyente a un público externo por lo cual se define el público objetivo como “abierto” y se considera tanto la comunidad académica, estudiantil y administrativa de la FAAD, como a personajes externos que estén interesados en saber qué es lo que se está gestando en el área y específicamente en la escuela.
Una persona, múltiples búsquedas.
62 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
permisos según usuarios
Definición del Usuario y sus Roles Para el desarrollo de la plataforma será necesario tener en cuenta tres tipos de usuarios.
ALUMNO
Alumnos: estos corresponden a la carrera diseño
շշ Buscar Proyectos
(registrados en el sistema UDP). Estarán dentro del proceso de publicación, edición y descarga del contenido del sitio web.
շշ Subir Proyectos de Tesis
Administrador: será el encargado de la
շշ Publicar Proyectos de Tesis
administración del sitio y de los contenidos. Una vez el alumno haya subido su proyecto, deberá revisarlo y finalmente, darle el visto bueno para su publicación en el sitio.
շշ Crear Carpetas de Investigación
շշ Añadir Tesis a Investigción
Invitado: corresponde a aquellas personas que están fuera del sistema de la Universidad y tienen
շշ Descargar Tesis
acceso a la navegación y descarga del contenido según los permisos correspondientes.
շշ Compartir Tesis
ADMIN
INVITADO
el proyecto | 63
desarrollo del prototipo
64 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Propuesta de Mapa de Navegación Una vez establecida las jerarquías dentro del contenido y los principales usuarios a los cuáles irá dirigida esta plataforma, se procede al desarrollo del mapa de navegación y sus instancias. Este mapa ayuda a crear un esquema de organización y navegación del sitio web orientado al usuario y sus necesidades. En el diagrama que se expone a continuación, se puede observar la jerarquización de los contenidos en una
leyenda
disposición vertical. En este caso, el Inicio y sus instancias linkeadas con la primera línea, representan el primer nivel de
Secciones
Pila de Páginas
Páginas
Metadatos*
profundidad; luego a través de un segundo nivel de profundidad representado por líneas en disposición vertical se disponen nuevas instancias de información y así hasta llegar hasta los contenidos más profundos en un mapa.
Especificaciones de los niveles de información.
Punto de éxito o error.
el proyecto | 65 Error
Mensajes
CUENTA USUARIO
2 BUSCADOR
3
Filtros + búsqueda exploratoria
Catálogo de proyectos
Sobre CTRL+i
Mis investigaciones
Contacto
Subir tesis
Mi Perfil
Disciplina CREACIÓN DE PROYECTO
Categoría
Qué es Área
Año
Categoría
INVESTIGACIÓN (X)
Etiquetas Preguntas Frecuentes
Profesor
m apa de navegación
Alumnos
Mail UDP rut clave
Proyecto
CTA ALUMNO
PASO 1 Seleccionar archivos
PASO 2 Datos del proyecto
Enviar a Revisión PASO 3 Metadata CTA ADMIN
Publicar
Proyecto Politicas
Búsqueda libre indexa en catálogo
Inicio El eje central de la página de inicio deberá ser el buscador, herramienta que será el corazón del sitio. Además esta página deberá mostrar los contenidos del catálogo ordenados bajo los siguientes criterios: • Nuevos proyectos • Más consultados • Listado alfabético de proyectos La página de inicio deberá cargar por primera vez y ofrecer un tour exploratorio orientado a introducir al usuario al sistema de búsqueda y las herramientas que agregan valor al sistema.
Buscador El sistema de búsqueda como principio se alimentará de la data y metadata que se añadirá
Preguntas Frecuentes a cada uno de los proyectos al ser creado y disponibilizado en el catálogo.Un sistema semántico de búsqueda será algo que se deberá considerar en la medida que el catálogo crezca y se conecte con el de otras facultades y universidades. Así se podrá ofrecer resultados en contexto a los usuarios.
Catálogo Contenedor de proyectos que debeincluir una una previsualización de éstos y un despliegue de las herramientas de búsqueda.
Qué es Ctrl+i Debe explicar brevemente las bases del sistema, comunicando directamente los objetivos del servicio.
Deberá contener un conjunto de preguntas y respuestas que sirvan como ayuda al usuario según su contexto. La página además deberá tener un acceso al tour que introduce al usuario al sistema y sus herramientas.
Políticas de Privacidad Página estática donde se establecen las condiciones de uso del contenido que se encuentra en el sitio, créditos de autorías, permisos, etcétera.
Login Ingreso para usuarios UDP. Se propone hacer un match con la cuenta de usuario de portal UDP, así los alumnos tendrán su entorno de búsqueda creado al ingreso a la universidad.
Cuenta de Usuario La cuenta de usuario no solo servirá para subir la tesis al final de la carrera, si no que se propone como una herramienta de investigación para los proyectos que tenga que generar el alumno dentro de sus años de carrera ofreciendo un espacio de interacción directa con el usuario.
Mis Investigaciones Lugar donde el usuario podrá encontrar los documentos que haya guardado bajo una temática durante una búsqueda. Este repositorio personal es un homólogo de crear carpetas con vínculos a las tesis que de algún modo sirven de referencia para una investigación o proyecto en específico. Una carpeta podría ser compartida con otros usuarios.
Mi Perfil Página de edición de datos del usuario nombre, e-mail, contraseña. Como usualmente los alumnos utilizan más su mail personal que el que les da la universidad, este campo es uno de los datos que podrá editarse, de forma de que el usuario pueda ingresar el mail personal para que efectivamente le lleguen notificaciones.
Mensajes Visualización como casilla de entrada de los mensajes que se generen tras haber compartido un proyecto o carpeta, comentarios sobre una tesis, aviso de tesis publicada exitosamente. En el caso del administrador podrá ver alertas de las tesis que los alumnos han subido para su revisión, aprobación, publicación.
Subir Tesis Esta página solo se activará cuando el alumno haya comenzado el curso de tesis y en el sistema se traduce a una creación del la ficha del proyecto. El proceso de subida estará dividido en tres pasos. • Seleccionar archivos: El usuario tendrá que subir el .pdf de la tesis y una imagen de portada. Además podrá cargar archivos anexos como vídeos, paper o presentaciones referentes a la tesis.
accesible por el administrador, al cual se le enviará una notificación para que la revise y publique o envie comentarios al alumno.
Proyectos Ficha de un proyecto, se podrán. • Rankear, (“Me gusta”) • Relacionar por etiquetas • Más vistos por...
• Datos del proyecto: Nombre del proyecto, abstract, profesor guía, año.
• Forma de contactar al alumno, url, mail.
• Ingreso de Metadata y envio a revisión: Categoría y etiquetas.
• En caso de que entres como usuario logueado, una forma de guardar en una carpeta de investigación.
Al seleccionar el botón "Enviar a Revisión", esta ficha quedará en un espacio intermedio solo
• Sistema de Recomendación
• Temas más recurrentes
genera mensaje para alumno
Éxito
Login
genera mensaje para administrador
INICIO
el proyecto | 67
Propuesta de Wireframes A partir del desarrollo del mapa de navegación procedo a la ejecución de los wireframes para el sitio, esta es una etapa previa al diseño y sus aspectos gráficos, de esta manera se evitan cambios posteriores en la diagramación del sitio y por lo tanto, perdida de tiempo. Este diseño define las grillas preliminares de diagramación y organización de los elementos de el sitio. Se debe tener en cuenta que los wireframes corresponden a maquetas que no intentan desarrollar a cabalidad los aspectos gráficos, se prioriza el contenido y su distribuición.
68 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Grilla y Segmentación del Sitio Para la propuesta del sitio propongo una grilla de 7 columnas para tener más libertad al seccionar las partes del sitio. Esta grilla servirá de base para todas las instancias descritas en el mapa de navegación. Las filas no están determinada ya que los anchos de caja se darán en muchas ocasiones por la cantidad de contenido e información que contenga cada sección del sitio. La propuesta está diseñada pensando en la resolución de pantalla más recurrente entre los computadores de manera que tenga un funcionamiento estándar.
el proyecto | 69
body width: 1240px
70 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Wireframe I: Página de Inicio header. Barra de navegación que contiene
prefooter. Contenedor secundario, posee tres
footer. Resumen del sitio, lleva los mismos
enlaces directos al catálogo de proyecto, “sobre
columnas, que contienen:
enlaces que el header y se le agregan los términos
la página”, contacto y el ingreso al perfil de usuario a través de la cuenta UDP. navegador de búsqueda. En esta barra se encuentra el buscador principal del sitio, contiene filtros a modo de dropdown para visualizar los contenidos de una manera más exacta. Estos filtros son: carrera, categorías populares, profesores y etiquetas. contenedor de proyectos. Esta zona la contiene un espacio mayor y es la única zona que cambia en la página según la interacción que realice el usuario. Se secciona en dos columnas: una contiene los proyectos y sus respectivos thumbnails. La otra estará dispuesta para diseñar contenidos a modo de lista en orden alfabético para la búsqueda de proyectos.
legales y las condiciones de uso del sitio. • Proyectos más vistos. Se previsualizarán proyectos más visitados y consultados por los alumnos, independientes de su tema. • Nube de Conceptos. Este espacio servirá para evaluar la tendencia en cuanto a temáticas tratadas por los alumnos de la Escuela. A su vez, según la proyección del proyecto, en un futuro se planteará como una instancia de mayor importancia en el sitio pudiendo arrojar data dura sobre cuáles son las agendas de trabajo predominantes. • Espacio para enlazar contenidos que estén sucediendo a nivel de Escuela. Esta sección ayudará a mantener el sitio conectado con lo que pasa en la Escuela, así presentará un espacio de actualización permanente.
A su vez, contiene links para compartir el sitio a través de las redes sociales.
el proyecto | 71
pรกgina de inicio (home)
HEADER BARRA DE Bร SQUEDA
CONTENEDOR PRINCIPAL
PRE-FOOTER
FOOTER
72 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Wireframe II: Página de Resultados de Búsquedas catálogo principal. Se presentarán los
lista de recomendaciones. Teniendo en
proyectos, según los filtros y categorías,
cuenta la búsqueda que el usuario ha realizado
aplicados para lo que el usuario buscaba. La
en la plataforma se mostrará una lista de
previsualización corresponde a un grupo de 24
recomendaciones según el contenido que el
proyectos por página. En esta sección podrás
usuario ha estado buscand.
agregar etiquetas para especificar más aún tu búsqueda. Estas etiquetas estarán en el sistema según el proceso de indexación previo de una tesis a la plataforma por lo tanto, están predeterminadas por el editor de contenidos del sitio, evitando así una acumulación interminable de etiquetas. Existirá la posibilidad de visualiza una lista de proyectos a través de dos órdenes principales, por año y por orden alfabético según el nombre de la tesis o proyecto.
el proyecto | 73
página de resultados de búsqueda
CATÁLOGO PRINCIPAL
LISTADO DE RECOMENDACIONES
74 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Wireframe III: Página de Proyecto primer nivel de interacción. Acá se encuentran los botones para compartir en redes sociales, valorar el proyecto y un conteo de las visualizaciones. Además en esta sección podrás agregar el proyecto a una carpeta de “Mis
• Nombre del Autor: incluye un enlace para dirigirse al perfil del alumno. Incluye el nombre y un mail de contacto, que puede ser el mail udp (si es que el alumno lo mantuvo al acceder al sitio por primera vez) o uno anexo que el alumno haya modificado.
Investigaciones”, sección que se encuentra al interior de tu perfil personal en el sitio.
• Profesor Guía: nombre del profesor que realizó la guiatura del proyecto.
segundo nivel de interacción. En esta sección encontrarás el contenido del proyecto bajo una primera visualización a través de ISSUU[12]. Además acá se podrán visualizar los principales datos del proyecto: • Disciplina: si es que el proyecto es de diseño gráfico o industrial.
• Enlaces de Descarga (para usuarios registrados): en esta sección se incluyen los enlaces correspondiente al material descargable. lista de recomendaciones. Este espacio estará conformado por recomendaciones directamente ligadas al proyecto que se está
• Código de indexación por biblioteca FAAD; este será un link de redirección al catálogo ya existente de la Universidad,
visualizando. Se entregarán sugerencias sobre otros proyectos similares.
[12] ISSUU es una herramienta digital para visualizar .pdf en formato de revista digital. Es un servicio gratis de publicación ilimitada para opciones básicas como las que mi proyecto plantea.
el proyecto | 75
página de un proyecto
PRIMER NIVEL DE INTERACCIÓN
LISTADO DE RECOMENDACIONES
SEGUNDO NIVEL DE INTERACCIÓN
76 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Partitura de Interacción
Cada módulo de interacción se comporta como un patrón de interacción. Estos permiten notar de
Realizar una partitura de interacción, ayuda
qué manera se ensamblan para verificar la lógica
comprender el díalogo entre los usuarios y el
y la calidad de la experiencia en determinados
servicio en tres capas horizontales, que describen a
escenarios de uso.
los agentes y sus acciones en el sistema: Esta funcionalidad se asemeja a un costumer journey map pero asocia el proceso interno de la plataforma 1. El usuario: esta primera capa describe la intencionalidad del usuario.
con la entrega de la información, por lo que permite establecer vínculos de interacción y keypoints para el diálogo entre servicio y usuario.
línea de interacción
2. Contacto directo: los elementos de interfaz que permiten al usuario ejecutar diversas acciones. línea de visibilidad
3. Proceso interno: las funciones que permiten al sistema (servidor, back-end) dar respuesta en el diálogo con el usuario.
La siguiente partitura muestra un proceso de búsqueda e interiorización de un usuario y el catálogo disponible.
el proyecto | 77
Partitura de Interacción
Módulos
Módulo de Búsqueda Central
Acciones del usuario
Módulo de Visualización de Resultados
BUSCAR
Busca tesis
Acción de búsqueda
Ingresa a plataforma ctrl+i
Interactúa con el contenido: comparte, evalúa, descarga, archiva
Visualiza resultados
línea de interacción
Contacto Directo Pantalla BUSCAR
CTRL+i
Ofrece facetas de búsqueda.
Ofrece categorías, disciplina, tema, año, A-Z
Visualización de resultados
línea de visibilidad
Proceso Interno Back-end Muestra o oculta categorías
Discrimina la información entregada
Selecciona opciones de resultados a través de su relación con la metadata
Proyecto “x”
Muestra contenidos y anexos
78 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Diseño y Lineamientos Gráficos
espacio de contenidos e información compartida
primeras exploraciones del naming
para la comunidad. Teniendo en cuenta que Ctrl+i Para la creación del logotipo y en general de la
es un servicio diseñado exclusivamente para
propuesta gráfica me interesaba trabajar con la
proyectos de la Escuela de Diseño de la Universidad
idea de una imagen asociada a la “informática”
Diego Portales, considero que esta identidad
y que remontara a las primeras épocas de la
debe representar una imagen vanguardista,
Era del PC pero con un toque contemporáneo y
asociada más al área creativa de la Escuela
vanguardista.
que al concepto de universidad que evoca un imaginario más tradicional.
Naming Ctrl + i (control más i) es un derivado de la sigla: ctrl+s que es el comando utilizado para guardar un archivo en diferentes softwares.
Es por esto que tanto en la propuesta estilística como comunicacional me quise salir de lo tradicional que comúnmente se asocia a las universidades para acercarme más a un concepto relacionado con el diseño contemporáneo.
A diferencia de ctrl+s, Ctrl+i corresponde a una invención propia para denominar un nuevo comando relacionado a la información lo cuál representa de mejor manera uno de los puntos más importantes del proyecto que es generar un
ctrl + i
el proyecto | 79
Logotipo
resultado exploración tipográfica
El uso de tipografías monospace en el lenguaje
ctrl+i en relative
de programación es una práctica muy común. Es
http://www.colophon-foundry.org/fonts/relative
por esto que el punto cúlmine de mi exploración tipográfica considera una fuente de espaciado fijo como base para el desarrollo del logotipo. A partir de una modificación de la variante 10Pitch de Relative (monospace), se construye el logotipo, el que irá acompañado, en ciertas aplicaciones, de un contenedor.
Relative 10Pitch
0123456789ABCDEFGHIJKLMNÑOPQRSTUVWXYXabcdefghijklmnñopqrstuvwxyz!¡¿?”·$%&(/)=|@#¢[]{}“”
ctrl+i
tracking:0
80 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Definición de la Paleta Cromática
existirá inevitablemente una diferencia al hacer
propuesta cromática para la visualización
la conversión de un modo a otro no será posible
del sitio web
Continuando con la idea de trabajar un imaginario
visualizalos. Para lograr estos colores en su versión
desde la informática se propone como punto de
impresa es necesario el uso de pantones.
partida para la definición cromática, la observación de los primeros monitores en los inicios de la
* Revisar el documento en su versión digital para poder
computación. Éstos monitores monocromáticos,
apreciar la paleta cromática en RGB.
funcionaban con fósforo generando una visualización de datos en verde y negro. Tomando como base estos colores se propone una derivación cromátia más contemporánea, tanto para la aplicación web como para las futuras aplicaciones gráficas.
monitor monocromático de fósforo
se agrega una tercera tonalidad.
Es importante comprender que la paleta cromática que se expondrá a continuación debe ser vista en algún dispositivo digital para apreciar los colores desde un modelo RGB (pantalla) ya que en este documento impreso se encuentran bajo un modelo de color CMYK (impresión) por lo que
complementarios
el proyecto | v
código cromático web y su conversión a cmyk
main colors
շ շ R:20 G:251 B:112 շ շ C:60 M:0 Y:86 K:0 շ շ HEXA: 50F057 շ շ R:153 G:255 B:179 շ շ C:35 M:0 Y:45 K:0 շ շ HEXA: 99FFB3
շշR:40 G:40 B:50 շշC:77 M:71 Y:51 K:61 շշHEXA: 282832
Esquema de colores
Pรกg. 83
vistas finales del primer prototipo
el proyecto | 85
pĂĄgina de inicio
La tipografĂa utilizada en el sitio corresponde a Dosis una google webfont. Esto facilita la labor del frontend y permite que sea leĂda en la mayor parte de los navegadores utilizados por las personas.
86 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
página de inicio
el proyecto | 87
header
navegador principal de b煤squeda aplicaci贸n del logo en el header
88 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
página de inicio
el proyecto | 89
desplegable para ver las estadĂsticas
acceso a proyectos mĂĄs visitados
enlaces a actividades de la escuela
el proyecto | 91
cat谩logo de proyectos
Se trabajaron los m贸dulos de los proyectos de manera que mantuvieran sus proporciones en toda instancia, de esta manera se ahorra una gran cantidad de trabajo al momento de desarrollar las hojas de estilo css del sitio.
92 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
catálogo de proyectos
el proyecto | 93
visualización de filtros a través de “dropdown”
ordenar contenido por
lista de proyectos recomendados
94 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
resultado de búsqueda por etiquetas
dropdown
listado de opciones (s贸lo se puede escoger una)
el proyecto | 97
pรกgina de proyectos
La implementaciรณn de un ISSUU permitirรก una lectura inmediata del contenido sin permitir necesariamente la discarga directa por usuarios externos a la facultad.
98 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
página de proyecto
el proyecto | 99
boton “me gusta” y “archivar en mis investigaciones” vista del contenido digital
acceso a los descargables
el proyecto |101
perfil de usuario
El perfil se despliega del header y está diseñado pensando en la situación dinámica del sitio por lo cual una vez ingresado a tu perfil, podrás desplegar el menú libremente sin que dificulte la lectura del contenido.
102 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
perfil de usuario
el proyecto |103
desplegable del perfil a tra vés del header primera visualización de datos personales enlace directo al portal udp.
sección para guardar proyectos por carpetas creadas por el usuarioa acceso a tu perfil con los datos de tu usuario udp
botón activo para subir tu proyecto (visible solo para alumnos que cursan título)
CIERRE DEL P ROYE CTO
05
cierre del proyecto |107
Proyecciones del Proyecto La creación de una plataforma web para registrar
Como proyección, se aspira a que por el hecho de
tesis y proyectos de título facilitará el trabajo de
comprobar las ventajas de un trabajo compartido
los tesistas, les ahorrará tiempo en la búsqueda de
a corto plazo se empiecen a formar “verdaderas
información, puede ser generador de ideas nuevas.
comunidades de aprendizaje”, tanto dentro de la Universidad como entre universidades nacionales.
Por tratarse de una página abierta, bien utilizada puede permitir su perfeccionamiento
Este proyecto no se cierra a la posibilidad de ser
convirtiéndose en un medio de trabajo
aplicado en otras escuelas de diseño de manera
colaborativo, que por el hecho de compartir
que en un futuro pueda servir para el desarrollo de
minimice los efectos de la individualidad que es uno
este medio colaborativo, ampliando sus niveles de
de los riesgos de la economía del conocimiento.
información de las universidades nacionales.
cierre del proyecto |109
Conclusiones
Los avances logrados por la tecnología digital
de la sistematización de la información, ideando
permiten:
una plataforma web que aprovechando un medio digital ofrecía la posibilidad de generar relaciones
Las conclusiones pueden ser muchas, pero en este caso, nos limitaremos a las que puedan tener una relación más directa con el trabajo realizado.
• Sistematizar información relevante en diversos campos del conocimiento. • Acceder a información de todo tipo, de cultura general y
Considerando que estamos viviendo en una era de
especializada; que bien administrada contribuye tanto
la información y de grandes adelantos tecnológicos,
a la difusión como a la construcción de conocimientos.
se ha aprovechado las posibilidades que ofrece el
• Mantenerse informado respecto a lo que ocurre en
estado actual de la tecnología digital, para ofrecer
diseño gráfico, en un mundo globalizado y con una
un proyecto que ayude a encontrar una solución
cobertura internacional;
a uno de los problemas experimentados por
semánticas dentro de los contenidos.
• Compartir experiencias, lo que en una sociedad del
De la experiencia general, se puede concluir que la utilización de métodos y técnicas de investigación enriquecen el nivel de información de los estudiantes de diseño. Además estimula los procesos de pensamiento y da una dirección y un orden al trabajo. El desarrollo del proyecto en sus inicios obedeció
estudiantes de diseño al iniciarse en el desarrollo de
conocimiento es crucial, como expresa Andy Hargreaves
un proyecto o de una tesis de titulación.
(2003) el trabajo colaborativo es lo que posibilita
a la necesidad de dar solución a un problema
aprendizajes reales.
experimentado por los alumnos, pero, se pensó
Esto implica, las dificultades encontradas para consultar trabajos anteriores producidos por la Universidad Diego Portales y otras.
también, en que además de esto, pudiese significar En relación directa con el proyecto presentado se
un aporte que incentive la utilización de los medios
logró establecer una forma de solución al problema
digitales en la Escuela de Diseño de la Universidad.
110 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Glosario * Beta
Es el proceso formal de solicitar información y
Es una representación simbólica, ya sea numérica,
* Arquitectura de
Si hablamos de Arquitectura de la Información
la Información
(AI), hablamos del arte y la ciencia de organizar
comentarios sobre los resultados del software
alfabética o algorítmica, de un atributo o
la información para que sea encontrable,
todavía en programación.
característica de un ente o entidad. El dato no tiene
* Dato
valor semántico (sentido) en sí mismo, pero al ser
administrable y útil; es decir, se ocupa del
procesado se puede utilizar para la realización de
ordenamiento de la materia (en este caso, Derecho de Copia. Derecho que tiene cualquier
cálculos o toma de decisiones. En programación
Arquitectura). El Information Architecture
autor, sobre todas y cada una de sus obras de forma
un dato es la expresión general describe las
Institute la define como: 1. El diseño estructural en
que podrá decidir en qué condiciones han de ser
características.
entornos de información compartida; 2. El arte y la
reproducidas y distribuidas.
información; de ahí su parentesco con la
* Copyright
ciencia de organizar y rotular sitios web, intranets, * Interfaz
comunidades en línea y software para promover la usabilidad y la ubicabilidad; 3. Una comunidad emergente orientada a aplicar al entorno digital los
* Creative Commons
principios del diseño y la arquitectura.
el usuario puede realizar acciones y comunicarse con
a autores y creadores compartir voluntariamente
el sistema.
su trabajo, entregándoles licencias y herramientas
Su principal objetivo es facilitar al máximo
libres que les permitan aprovechar toda la ciencia,
los procesos de comprensión y asimilación de la
conocimiento y cultura disponible en Internet.
* Flat Design
Flat Design es un concepto que obedece a la tendencia de diseñar los elementos gráficos
información.
yendo a lo minimalista. Colores planos, evitar * CSS
* Back-end
Lugar de interacción o superficie de contacto donde
Es una organización sin ánimo de lucro que permite
los dropshadows y lo que ayude a alejarnos del
CSS o Hojas de Estilo en Cascada (Cascading Style
Tanto en el diseño de software como el diseño
Sheets), es un mecanismo simple de visualización
web, el back-end es la parte de la interfaz que
que permite asignar atribuciones gráficas a un
interactúa con los procesos de funcionamiento.
contenido que será visualizado en pantalla. Las hojas
Ésta está en contacto con el administrador del
de estilo permiten asignar atributos visuales para
sitio, y sus respectivos sistemas. El back-end es la
diferentos formatos.
esqueumorfismo que se aplicaba al diseño web, no hace mucho.
* Front-end
Tanto en el diseño de software como el diseño web, el front-end es la parte de la interfaz que interactúa
parte encargada de procesar la entrada de datos e
CSS se utiliza para dar estilo a documentos HTML
directamente con el o los usuarios. En esta parte
información desde el front-end. Un programador
y XML, separando el contenido de la presentación.
se maquetan las principales interacciones con el
tiende a ser back-end y a través de distintos
Los Estilos definen la forma de mostrar los elementos
usuario y las visualizaciones que éste verá en el sitio.
lenguajes, este recibe, procesa y envía información
HTML y XML. [Definición por Christian Campos Illanes.
Corresponde a procesos como la codificación del
al navegador del usuario.
Pontificia Universidad Católica de Valparaíso, 2009]
diseño en hojas de estilo (CSS), entre otros.
cierre del proyecto |111
* Mapa de Navegación
Pertenecen a la disciplina llamada Arquitectura
* Partituras de
Corresponde a un lenguaje visual que propone
de la Información (AI), la cual crea esquemas de
Interacción
un sistema de notación gráfica para formalizar
son diseños basados en líneas que buscan
organización y navegación con el objetivo de que
los flujos de interacción en una plataforma
definir la diagramación y organización de los
la persona que use el sitio web pueda navegar por
o servicio digital y se deja a disposición de la
elementos de un sitio.
él de forma fluida y por lo tanto eficientemente.
comunidad de diseñadores de interacción
Los wireframes permiten entender la
Esta metodología define una estructura
y arquitectos de información para su uso,
globalidad de un sitio en relación a sus
organizacional de las páginas de un sitio web. Su
modificación y extensión. [Definición por Nicole
contenidos. El Wireframe prioriza diagramación
lectura es a través de profundidades de navegación.
Dupré, Katherine Exss, Herbert Spencer. Pontificia
y distribución de contenidos por sobre los
A su vez, muestra las conexiones de cada una de las
Universidad Católica de Valparaíso, 2009]
aspectos gráficos. Permite centrarse en el
páginas.
* Metadato
* Social Media
Los medios sociales son las plataformas sobre
una página; una línea, una posibilidad directa de
las que interactúan y socializan personas y
acceder desde la caja 1 a la caja 2, es el vínculo entre
comunidades, con el fin de compartir ideas,
dos páginas.
noticias e intereses particulares.
Metadatos literalmente «sobre datos», son datos
* Social Network
El social networking conlleva una acción de
que describen otros datos. En general, un grupo
compromiso. Diferentes grupos sociales,
de metadatos se refiere a un grupo de datos.
con intereses en común, pueden construir
El concepto de metadatos es análogo al uso de
relaciones por medio del Social Networking. Sin
índices para localizar objetos. Por ejemplo, en una
embargo siempre se esperará una respuesta por
biblioteca se usan fichas que especifican autores,
parte de la marca o empresa, ya sea a manera
títulos, casas editoriales y lugares para buscar libros.
de solución o simplemente de comunicación
Así, los metadatos ayudan a ubicar datos.
retroalimentada.
Los metadatos han cobrado gran relevancia en el mundo de Internet, ya que estos son utilizados para la clasificación de la enorme cantidad de información que contienen las plataformas.
Los “Wireframes” o “Prototipos de baja fidelidad”
contenido y no en el diseño visual, definiendo
Gráficamente un mapa de navegación se compone de cajas y líneas. Una caja representa
* Wireframe
su organización, previo al diseño, evitando cambios posteriores y perdida de tiempo.
112 | memoria de proyecto para optar al titulo de diseñador con mención en diseño gráfico
Bibliografía libros
շշ Back-end y Front-end. [http://es.wikipedia.org/
entrevistas
wiki/Front-end_y_back-end] շշ Intuición, Acción, Creación. Graphic Design Thinking, Ellen Lupton. Editorial GG, 2012.
շշ Manuel Figueroa. Coordinador del Área de Diseño շշ Derechos de Autor Universidad de Chile. [http:// www.captura.uchile.cl/page/derechos_autor].
del Consejo Nacional de la Cultura y las Artes (CNCA). Gobierno de Chile.
շշ Here Comes Everybody, Clay Shirky. New York. 2008. [PDF: http://sites.middlebury.edu/engl7103/
շշ Catálogo Online UDP. [http://200.14.86.24/#focus]
files/2009/07/shirky_everyone_1.pdf]
շշ Mª Soledad Mora Córdova. Jefa de Biblioteca, Facultad de Arquitectura, Arte y Diseño. Universidad Diego Portales.
շշ The Ultimate CSS Reference. Tommy Olsson & Paul
artículos
O’Brien. Editorial Sitepoint. 2008. շշ “Entrepreneurs See a Web Guided by Common Sense” by John Markoff. New York Times, 12
weblografía
de noviembre de 2006 [http://www.nytimes. com/2006/11/12/business/12web.]
շշ Ecosistemas de la Información. Herbert Spencer. [http://www.herbertspencer.net]
շշ “Web 3.0: The Third Generation Web is Coming” by
conferencias շշ Sergey Brin y Larry Page hablan sobre Google, 2007. [http://www.ted.com/talks/sergey_brin_and_ larry_page_on_google.html].
Nova Spivack. Lifeboat Foundation Scientific Advisory շշ Creative Commons Organization [http://
Board. [http://lifeboat.com/ex/web.3.0]
es.creativecommons.org/blog/] շշ “A Look at Flat Design and Why It’s Significant” by շշ The Information Architecture Institute [http:// iainstitute.org/] շշ Normalización de Tesis de Grado, Pontificia
Luke Clum. [http://uxmag.com/articles/a-look-atflat-design-and-why-its-significant] շշ “A Rare Peek At The Guidelines That Dictate
Universidad Católica de Chile. [http://www.astro.
Google’s Graphic Design” - Co.Design, 21 Junio
puc.cl:8080/astropuc/grados-docencia/formato-
2013. [http://www.fastcodesign.com/1672777/a-
de-tesis]
rare-peek-at-the-guidelines-that-dictate-googlesgraphic-design#1]
tesis y memorias consultadas շշ Diseño de Wireframe e Interfaz PUCV - Esteban Saavedra Nilo. շշ AURA, Red de Archivos Patrimoniales de Valparaíso. Nicole Dupré, Javiera González, Esteban Saavedra. Coautor: Herbert Spencer.
papers շշ “De la Web 2.0 a la Web 3.0: antecedentes y consecuencias de la actitud e intención de uso de las redes sociales en la web semántica”. Inés Küster, Asunción Hernández. Universidad de Valencia. España. [http://ubr.universia.net/pdfs_web/ UBR37_Web/06.pdf] շշ “Partituras de Interacción”. Katherine Exss, Nicole Dupré. [http://wiki.ead.pucv.cl/images/7/72/Exsspartituras-de-interaccion.pdf]