módulo interactivo de consulta permanente como...
TRANSCRIPT
Proyecto de Título para optar al título de Diseñador, mención Diseño Gráfico de la Escuela de Diseño de la Facultad de Arquitectura y Urbanismo de la Universidad de Chile.
Autora:Bernardita Ramirez S.
Módulo interactivo de consulta permanente como apoyo a la clase presencial de Diseño
Editorial
Profesor Guía:Juan Eduardo Calderón R. Santiago de Chile,2006
dedicatoria
A la duda que me mantiene despierta,
y a la capacidad de creer, que me hace soñar...
... y a todos los que hacen que dude y crea a la vez.
índi
ce
Portada
DedicatoriaÍndice
CAPITULO I: PRESENTACION DEL PROYECTO 1.1Introducción 1.2 Fundamentación 1.2.1 Descripción del proyecto
1.2.2 Detección de la Necesidad
1.3 Objetivos1.3.1 Objetivo General
1.3.2 Objetivos Específicos
1.4 Metodología
CAPITULO II: MARCO TEORICO 2.1Educación y diseño
2.1.1 Respecto del aprendizaje
Evolución y técnicas del aprendizaje
2.1.2 De una educación pasiva a un aprendizaje activo
Educación en nuestro contexto
2.1.3 Gestión de Conocimiento
Gestión del conocimiento y educación
2.1.4 Informática educativa
Educación asistida por computador
2.1.5 TIC, nuevas tecnologías y su uso en las Universidades
Escenario de las TIC en la Universidad de Chile [ Moodle y U-curso ]
2.2 Multimedia y Diseño Web
2.2.1 Multimedia y diseño web
Principios que rigen la aplicación multimedia
2.2.2 Interfaz Gráfica
Estilos de interfaz gráfica
Elementos necesarios para el diseño de una página
Algunos conceptos a considerar de Internet
Legibilidad en Pantalla
Software para desarrollar el Proyecto
12
5689
10
1111
11
11
131415
16
19
20
21
23
24
25
26
29
3233
34
35
36
38
39
40
42
2.3 Diagramación y Retículas2.3.1 Glosario
2.3.2 Introducción a las retículas
2.3.3 Retículas
2.3.4 Conceptos básicos de la retícula
Componentes básicos
2.3.5 Clasificación de la Retícula
Retícula de Manuscrito
Retícula de Columna
Retícula Modular
Retícula Jerárquica
2.3.6 Deconstrucción de la Retícula
2.3.7 Cómo deconstruir una Retícula
Deconstruccion lingüística
Deconstruccion espontanea
2.4 Conclusiones de investigación
CAPITULO III: Análisis Estratégico 3.1 FODA
3.2 Tipología
CAPITULO IV: Definición del Proyecto
4.1 Marco conceptual
4.1.1 Conceptualización para elementos gráficos a transmitir
4.1.2 Público Objetivo
4.2 Propuesta de Diseño 4.2.1 Desarrollo de la Marca
4.2.2 Imagotipo
4.2.3 Código cromático
4.3 Definición y planteamiento del Sitio 4.3.1 Características Técnicas
4.3.2 Viabilidad del proyecto
4.4 Arquitectura de la Información 4.4.1 Navegación Básica
4.4.2 Unidades de Contenido
4.4.3 Mapa de Navegación
4.4.4 Estructura general de una Página
4.5 Diseño del módulo 4.5.1 Tipografía de los contenidos
4.5.2 Layout
4.5.3 Proyección del sitio
Conclusiones
BibliografíaAnexos
2 / 3
4445
48
50
57
58
59
59
60
61
62
63
70
70
71
72
7779
80
8789
89
92
9393
93
95
9797
98
9898
99
100
101
102102
103
109
capítulo IPresentación del Proyecto
intro
ducc
ión
Si bien no se ha actualizado públicamente el nuevo plan de Orientaciones
Estratégicas de La Universidad de Chile, publicado en el año 2000 [ y
cuya vigencia comprendía hasta el año 2005 ], este deja en manifiesto
el interés de la Universidad por alcanzar objetivos que apunten hacia la
optimización de la enseñanza / aprendizaje a través de la utilización de
las nuevas tecnologías presentes dentro de la institución. De este modo
se fortalecería la metodología aplicada y se incentivaría la creación de
materiales educativos de apoyo.
Para contextualizar el tema base del proyecto dentro de la realidad de la
Universidad de Chile, está la inexistencia de un ramo de composición y
diagramación propiamente tal dentro de la malla curricular de la carrera
de Diseño Gráfico, pese a la importancia de estos tópicos al momento
de la etapa proyectual de cada pieza gráfica a realizar, y lo que conlleva
a una falta de material disponible para el alumnado correspondiente a
este tema. A diferencia de otras casas de estudio que si incorporan esta
materia como un ramo en particular dentro de su malla académica.
La carencia del aprendizaje de manera explícita respecto de la
diagramación, puede fomentar a que el alumnado pueda cometer errores
básicos y reiterados sin percatarse, inclusive en la etapa avanzada de la
carrera. Esto se traduce en el bajo desarrollo de un lenguaje común, tanto
para el desarrollo de la disciplina en investigación, como en la ejecución
y proyección de ésta.
Radica aquí la importancia de un mejor dominio de herramientas como por
ejemplo las retículas o grillas, en pos de fomentar una mayor instrucción
de calidad.
6 / 7
El inevitable encuentro del diseñador frente a
medios impresos, hace que su destreza en la
comunicación del mensaje se traduzca en una
composición eficaz respecto del mismo. Para ello,
se hará necesario comprender las estructuras que
componen los impresos y cobra importancia el
estudiar algunas herramientas que nos permitan
potenciar dicha composición, como lo es el caso
de la utilización de retículas [ refiérase no sólo
al conocimiento de la clasificación de retículas,
sino su utilización, edición y adecuación frente
a los propósitos comunicacionales de cada
proyecto ].
Este punto se suma a una creciente inquietud
personal, que va desde el interés por la docencia
[ que me ha conducido a formar parte de
monitorias en Taller de Primer año de la carrera,
desde el año pasado ], hasta la detección de una
carencia en la práctica de mi propio dominio de
un lenguaje de diseño, situación que se repite en
otros estudiantes de igual grado académico.
De aquí nace mi interés en contribuir a una mayor
instrucción, y así aportar a las herramientas que
apoyan al desarrollo de un mejor profesional en
esta disciplina.
Fundamentación del proyecto
Descripción del proyecto:Desarrollo de una aplicación multimedia interactiva de carácter virtual, destinado para apoyar el
proceso de enseñanza / aprendizaje del contenido académico cuya temática esta relacionada a la
“diagramación mediante retículas en el diseño editorial”.
Su utilidad específica es apoyar la clase presencial de diseño editorial, a fin de poder contar con un
material de consulta permanente acerca del mismo tópico.
El carácter virtual responde a un formato on-line, que será implementado a futuro a través del servidor
de la Universidad de Chile, como lo es hoy Moodle Fau [ y que próximamente será U-curso ], que
es una plataforma de aprendizaje que hoy se encuentra operativa para la implementación de apoyo
docente y de cursos e-learning.
Cabe aclarar que el uso de la tecnología no será limitada al traspaso del contenido de las clases
presenciales al formato digital, sino utilizar este medio como apoyo y complemento de la misma. La aplicación interactiva tendrá por función, entregar
al estudiante conceptos tanto teóricos como prácticos de la disciplina, con el fin de potenciar la
incorporación de términos formales a su lenguaje cotidiano.
Por lo mismo, un posible escenario futuro e idóneo de un proyecto con esta temática, es contribuir a
la generación de otros prototipos que abarquen las diversas materias y contenidos de la carrera, y así
incrementar el material docente de calidad a disposición del alumnado.
Este trabajo por consiguiente tendrá el fin de, reforzar un área que se encuentra fuera del paradigma
de las nuevas tecnologías, como lo es la visualidad impresa. Aportando a la creación de un lenguaje
común dentro de la carrera, que nos sirva para desenvolvernos entre nuestros pares [ estudiantes ],
como con el cuerpo docente y de igual modo con otros diseñadores profesionales. Y no sólo un
lenguaje que quede en el papel, sino que sea aplicable de un modo práctico en el desarrollo de
proyectos. Respondiendo así a la metodología constructivista actual en docencia.
El desarrollo del proyecto será a través de una metodología que permita crear un prototipo cuyo
contenido académico es divisible para ser incluido dentro de ramos prescritos según cada año de la
carrera.
8 / 9
Detección de la necesidad:En términos reales hoy el contenido teórico
del diseño editorial, es enseñado con poca
profundidad, y más aún, la metodología utilizada
dista mucho de las nuevas tecnologías aplicables
en educación, por ende se hace menos eficiente el
traspaso del material académico a la comunidad
estudiantil. Es por esto, la importancia de mejorar
la eficiencia en el desarrollo y la entrega de
contenidos a través de la TIC [ Tecnologías de la
Información y la Comunicación ] indispensables
en la integración de la Gestión del Conocimiento
dentro del proceso enseñanza / aprendizaje
actual de los estudiantes de pregrado de Diseño
de la Universidad de Chile.
Corresponde a 3 tipos de usuarios:
1. Estudiantes de pregrado pertenecientes a la carrera de Diseño Gráfico de la Universidad
de Chile, FAU.
Al ser este el grupo más específico al que va destinado la creación del módulo interactivo
en apoyo a la clase presencial, se le constituirá como el Grupo Objetivo del
proyecto.
2. Equipo docente de la carrera de diseño Gráfico de la Universidad de Chile [ conformado
por profesores, ayudantes y monitores ] que les competa desarrollar dentro de su carga
académica el tópico del diseño editorial.
3. Usuarios externos, abarcado tanto por estudiantes de otras asignaturas, como de otras
carreras afines al Diseño Gráfico, como Diseño Industrial o Arquitectura.
Público Objetivo
Objetivo Principal:Contribuir a la optimización y al apoyo visual del método de enseñanza / aprendizaje de las clases
presenciales del contenido temático “construcción, uso y diagramación de piezas gráficas editoriales mediante retículas”, destinado a
alumnos de Diseño Gráfico, mediante una aplicación digital basada en las nuevas tecnologías.
Objetivos específicos: + Evaluar de un modo autodidacta, la realidad del desarrollo y uso de las TIC dentro de la
Universidad, y su aplicación en la docencia.
+ Fomentar la importancia en la creación de un lenguaje común [ en este caso particular
respecto de tópicos como diagramación en base a retículas ].
+ Aportar al desarrollo de éste lenguaje de diseño mediante una aplicación concreta.
+ Presentar una interfaz gráfica que aporte comunicacionalmente al desarrollo y comprendimiento
del tema expuesto.
+ Contribuir como material de apoyo en las cátedras de diseño.
+ Estructurar el contenido teórico de forma coherente en módulos temáticos, de manera que
sean aplicables a un soporte digital.
Objetivos
El tipo de investigación tiene un carácter exploratorio, por tratarse de un proyecto que
carece de referentes y de información teórica respecto del tema, que se encuentren activos dentro
de la Universidad. Por consiguiente el objeto de estudio está muy poco desarrollado a la fecha;
esto conlleva a la investigación de antecedentes que permitan su adaptación para el desarrollo del
proyecto.
Metodología
10 / 11
capítulo IIMarco Teórico
educ
ació
n y
dise
ño
Es evidente la orientación educativa del proyecto como aplicación, por ende, se hace necesario
investigar en cierto grado esta materia, de manera de poder apoyar el desarrollo de los contenidos
con una buena estructura [ tanto conceptual como comunicacional ], y que sea capaz de transmitirlos
del mejor modo posible.
Respecto del aprendizaje:Ahondar en temas como el aprendizaje hereditario y en el desarrollo psicológico, biológico, social y
medio ambiental de cada etapa, seria exagerado para efectos de este proyecto, por consiguiente el
presente informe se atañerá al aprendizaje dentro de las organizaciones educativas. Se diferenciará
entonces, el proceso de enseñanza y de aprendizaje, donde tomaremos por:
1. Enseñanza: según la RAE: Instruir, doctrinar, amaestrar con reglas o preceptos. Donde
la enseñanza es administrada por el educador, docente y medio organizacional que permite
el proceso educativo.
2. Aprendizaje: según la RAE: Adquirir el conocimiento de algo por medio del estudio
o de la experiencia. Para este caso, el concepto se ampliará no sólo al acto de asir una
materia, sino también al carácter de motivación personal que conduce a una persona o
estudiante a adentrarse en una materia dada.
De esto mismo se extrae que, si el proceso de enseñanza / aprendizaje depende en gran medida
de la organización educativa, es obligación que ésta se preocupe de mejorar y enriquecerse
permanentemente, de modo de ofrecer mejores experiencias pedagógicas al estudiante, reflejando
así su grado de compromiso.
El acceso a la información tradicional se logra a través de las clases expositivas / presenciales, que
junto con entregar la materia de un determinado programa, asigna tareas y ejercicios para que
los alumnos las realicen. Este tipo de estructura tiende a estimular la memorización mediante la
repetición por parte del docente o especialista, adquiriendo el alumno un dominio mecánico de la
operación, vale decir un estado pasivo en el proceso de producción de conocimientos [ nótese el uso
del concepto alumno1 para referirse al estado pasivo en la recepción de conocimientos a diferencia
del concepto estudiante2, que involucra un rol activo en su propia educación ]. Esta estructura
atiende más bien a modelos de aprendizaje como el conductismo, o de un mejor desarrollo de la
psicología cognitiva.
� Según la RAE: Discípulo, respecto de su maestro, de la materia que está aprendiendo o de la escuela o universidad donde estudia./ Persona criada o educada desde su niñez por alguno, respecto de este [ www.rae.es ]
� Según la RAE: Ejercitar el entendimiento para alcanzar o comprender algo. Se le tomará como el verbo estudiar, como acción de ser educado.
Respecto del aprendizaje
14 / 15
Para desarrollar un prototipo de informática educativa, es necesario basarse en algún método de
aprendizaje, y así concebirlo de una manera adecuada. Existen varias teorías relacionadas con el
aprendizaje, sin embargo la que más concierne para esta investigación es:
Constructivismo y aprendizaje significativo: Básicamente el constructivismo es el modelo que sostiene que una persona, tanto en los aspectos
cognitivos�, sociales y afectivos del comportamiento, no es un mero producto del ambiente ni un
simple resultado de sus disposiciones internas, sino una construcción propia que se va produciendo
día a día como resultado de la interacción de estos factores. En consecuencia, según la posición
constructivista, el conocimiento no es una copia de la realidad, sino una construcción del ser
humano; esta construcción se realiza con los conocimientos previos que la persona ya posee, o
sea con lo que ya construyó en su relación con el medio que lo rodea.
Esta construcción que se realiza todos los días y en casi todos los contextos de la vida, depende
sobre todo de dos aspectos:
+ De la representación inicial que se tiene de la nueva información y,
+ De la actividad externa o interna que se desarrolla al respecto.
En definitiva, todo aprendizaje constructivo supone una construcción que se realiza a través de un
proceso mental que conlleva a la adquisición de un conocimiento nuevo. Pero en este proceso no
es sólo el nuevo conocimiento que se ha adquirido, sino, sobre todo la posibilidad de construirlo
y adquirir una nueva competencia que le permitirá generalizar, es decir, aplicar lo ya conocido a
una situación nueva. Además adquiere importancia el quitar el carácter negativo del error, y lograr
mostrarlo como un elemento importante de la experiencia y de un real aprendizaje.
El aprendizaje significativo es un concepto que se acompaña de la metacognición. El primero
ocurre sólo si se satisfacen una serie de condiciones: Que el estudiante sea capaz de relacionar
de manera no arbitraria, lógica y clara, la nueva información con los conocimientos y experiencias
previas que posee en su estructura de conocimientos. Por otro lado, la metacognición depende de
la disposición [ motivación y actitud ] de aprender significativamente, vale decir, la conciencia que
debemos tener de nuestro propio conocer y como la regulamos.
� Según la RAE: perteneciente o relativo al conocimiento.
Evolución y teorías del aprendizaje
El Modelo Constructivista considera que la construcción se
produce�:
+ Cuando hay participación activa del estudiante, por lo tanto se
enfatiza el descubrimiento [ Bruner ]
+ Cuando el sujeto interactúa con el objeto del conocimiento de un
modo particular al resto [ Piaget ]
+ Cuando interactúa desarrollando su potencia al estar solo, lo que se
denomina “Zona de Desarrollo Próximo” [ ZDP ], el que es capaz
de adquirirse con la intervención de otra persona [ instrumento
mediático ] con mayor conocimiento que él [ Vigotsky ]
+ Cuando esto lo realiza en interacción con otros, facilitando la toma
de decisiones y soluciones de problemas [ Vigotsky ]
+ Cuando es significativo para el sujeto [ Ausubel ]
La concepción constructivista del aprendizaje se sustenta en la idea de
que la finalidad de la educación que se imparte es promover los procesos
de crecimiento personal del estudiante.
La utilización de medios tecnológicos dentro de este modelo de
aprendizaje es factible, ya que se pueden adaptar a los receptores y
ofrecerles interactividad inmediata. Así las tecnologías fomentan la creación
de entornos comunicativos específicos, potenciando el aprendizaje
significativo, es así como el medio tecnológico pasa a ser un guía en este
proceso [ equivalente al tutor de mayor conocimiento del ZDP ]. En el caso
del proyecto en curso, es importante trabajar el “módulo de interactivo de
apoyo” de manera paralela a la clase presencial, donde el alumno recibe
una serie de estímulos o nuevos conocimientos que se deben reforzar o
explorar dentro del módulo.
Una estrategia adecuada para llevar a la práctica este modelo es "El
método de proyectos", ya que permite interactuar en situaciones concretas
y significativas y estimula el “saber”, el “saber hacer” y el
“saber ser”, es decir, lo conceptual, lo conductual y lo actitudinal.
� CABERO Julio, Tecnología Educativa – diseño y utilización de medios en la enseñanza, Primera Edición, Ediciones Paidos Ibérica S.A., 2001, Pág. 255
16 / 17
En este Modelo el rol del docente cambia. Es moderador, coordinador,
facilitador, mediador y también un participante más. El constructivismo
supone también un clima tal que, ayuda a que los estudiantes se vinculen
positivamente con el conocimiento y por sobre todo con su proceso de
adquisición.
Para nuestro caso y tal como lo sostiene el constructivismo, el aprendizaje
se realiza a través de un proceso mental que finaliza con la adquisición de
un nuevo conocimiento, ahora se entiende que los conocimientos previos
de los estudiantes son claves para la construcción del nuevo conocimiento.
Aprender significativamente supone la posibilidad de atribuir significado a
lo que se debe aprender a partir de lo que ya se conoce.
Si bien también la enseñanza debe individualizarse en el sentido de
permitir a cada alumno trabajar con independencia y a su propio ritmo,
es necesario promover la colaboración y el trabajo grupal cooperativo
[es decir: Enseñanza / Aprendizaje cooperativo – Vygotsky ], ya que se
desarrollan habilidades sociales más efectivas, como:
1. Enseñarle a pensar: Desarrollar en el estudiante un
conjunto de habilidades cognitivas que les permitan optimizar sus
procesos de razonamiento.
2. Enseñarle sobre el pensar: Animar a los
estudiantes a tomar conciencia de sus propios procesos y
estrategias mentales [ metacognición ] para poder controlarlos y
modificarlos [ autonomía ], mejorando el rendimiento y la eficacia
en el aprendizaje.
3. Enseñarle sobre la base del pensar: Quiere
decir incorporar objetivos de aprendizaje relativos a las habilidades
cognitivas.
Luego de realizado este análisis sobre el
constructivismo, se puede concluir que:
+ La reforma educacional tiene como base
el constructivismo, ya que todas sus
acciones tienen a lograr que los estudiantes
construyan su propio aprendizaje logrando
aprendizajes significativos.
+ Las experiencias y conocimientos previos
del estudiante son claves para lograr
mejores aprendizajes.
+ Cuando hablamos de "construcción de
los aprendizajes", nos referimos a que el
estudiante para aprender realiza diferentes
conexiones cognitivas que le permiten
utilizar operaciones mentales y con la
utilización de sus conocimientos previos
puede ir armando nuevos aprendizajes.
+ El profesor tiene un rol de mediador
en el aprendizaje, debe hacer que el
estudiante investigue, descubra, compare
y comparta sus ideas.
Formas de la EducaciónEl desarrollo económico para bien o para mal, sumado a la preocupación por los planes de estudio,
ha hecho inminente la expansión del sistema de educación formal. La conclusión de ello fue que los
sistemas de la educación formal se adaptan lentamente a los cambios socio-económicos alrededor
de ellos. Es entonces donde nace una distinción de los sistemas de aprendizaje, por cierto sutil,
acerca de la educación: como informal, no-formal, y formal propiamente tal.
+ Educación Formal: Es aquella que se imparte en establecimientos educativos
aprobados, en una secuencia regular de ciclos lectivos, con sujeción a pautas curriculares
progresivas, y conducente a grados y títulos, a esta pertenecen la educación preescolar, básica
primaria y secundaria, media y superior5.
+ Educación Informal: Se da de forma no intencional y no planificada. No ocupa un
ámbito curricular dentro de las instituciones educativas. Se trata de una acción educativa no
organizada, individual, provocada a menudo por la interacción con el ambiente de manera
cotidiana.
+ Educación NO-Formal: se entenderá por esto a los contextos en los que, existiendo
una intencionalidad educativa y una planificación de las experiencias de enseñanza / aprendizaje,
estas ocurren fuera del ámbito de la escolaridad obligatoria. Se ofrece con el objeto de
complementar, actualizar, suplir conocimientos y formar, en aspectos académicos o laborales
sin sujeción al sistema de niveles y grados establecidos para la educación formal�. En esta
categoría entra la educación virtual definida como medio educativo.
Representan actividades educativas de carácter opcional, complementario, flexible y variado
[ por ejemplo: Internet ].
¿Para qué este esclarecimiento de sistemas de aprendizajes? Porque que el proyecto a realizar
esta planteado como apoyo de la materia contenida en una malla académica [ vale decir, pasaría
a ser parte de la educación formal recibida por el alumno ], sin embargo al estar a disposición de
la comunidad académica pasa a constituirse como un módulo aparte para consulta personal y por
iniciativa propia [ pasaría a ser parte de la educación no-formal que éste adquiera ].
La educación no-formal se transforma en un complemento a las instancias formales, permitiendo
extender los eventos educativos fuera de los espacios tradicionales. Su finalidad = elevar la calidad
de la educación y de un modo constante.
� http://www.mineducacion.gov.co/normas/subtema.asp?CodigoSubTema=90
� http://www.mineducacion.gov.co/normas/subtema.asp?CodigoSubTema=90De una Educación Pasiva a un Aprendizaje Activo
18 / 19
La aceleración que conlleva la condición contemporánea pone en crisis el
sistema educacional basado en planificación, lo que produce que deban
existir medios complementarios al sistema tradicional de educación que
puedan responder a las falencias que éste vaya generando. El vuelco se
encuentra en poder generar el cambio de una “Educación Pasiva a un Aprendizaje Activo”. Para esto es necesario generar
soportes que se encuentren fuera de las instituciones y que sean capaces
de estar en una condición de respuesta a los cambios.
Es así como el proyecto, buscará ser un prototipo inicial hacia un Soporte Multimedial del Aprendizaje, en donde los conceptos
de personas como partícipes de su aprendizaje [ no usuarios pasivos sino
estudiantes activos ], y las nuevas tecnologías al servicio de todos, serán
parte de una investigación sobre el diseño como ente participativo en la
generación de mejores instancias educativas. work in progress [ un siendo, más que un es ]. En este caso el proyecto actúa como soporte
y gatillador que diseña las condiciones básicas para que la instancia
educativa ocurra [ el proyecto pone a disposición el material existente, su
finalidad es entregarlo comunicacionalmente de un mejor modo, factible
de ser expandido a futuro y no cómo una taxonomía teórica definitiva].
Hoy definimos una nueva sociedad que está determinada por su acelerada
relación con la información, las comunicaciones y su dependencia con
la tecnología, esta es la llamada “sociedad de la información”. Es una
sociedad hyper-conectada que ha ido difuminando sus fronteras, en una
sociedad global que busca una economía neoliberal de alcance planetario
que a impulsado a las Tecnologías de Información y de Comunicación
[ TIC ], que han redefinido nuestra relación con la realidad y a abarcado
todos los ámbitos de la actividad humana, los negocios de transforman
en E-bussines, la ciencia en E-science, el aprendizaje en E-learning, y la
educación en la E-ducation.
Hoy dado el escenario en que nos situamos,
frente a esta sociedad de la información, la
educación se torna en crisis, nuestros sistemas
educativos [ infraestructuras, tácticas de
enseñanzas, mallas académicas ] no cambian
al ritmo de la sociedad contemporánea. Todos
nuestro sistema educativo esta basado en
formas estructuradas y rígidas pensadas en el
siglo XIX y ajustados lentamente hasta nuestros
días, pero sin poder dar alcance a los ritmos
cada vez más acelerados de los cambios de
la sociedad.
Educación en
nuestro contexto
La compleja situación educacional de Chile no
sólo pasa por el nivel económico, sino a modo
global, hay problemas como la baja calidad de
la educación chilena y la escasa adopción y
adaptación de nuevas tecnologías. A esto se le
suma un problema de la falencia tecnológica:
una fuerza de trabajo inadecuadamente
calificada dificulta el proceso de adopción y
adaptación de nuevas tecnologías.
“Hoy es necesario buscar, seleccionar, analizar y sintetizar críticamente o de manera inteligente
y racional la gran cantidad de información disponible, con el fin de aprovecharla con el máximo
rendimiento social o personal.” �
Como se ha planteado con anterioridad, una de las finalidades del presente proyecto es constituirse
como una herramienta facilitadora de información, por consiguiente
mediar para que dicha información esté a disposición del los estudiantes. Para ello debemos primero
esclarecer que significan el conceptos de “conocimiento”, cuales son sus características y tipos,
para luego poder determinar como gestionar dicho conocimiento y relacionarlo con la educación
superior.
Conocimiento:El concepto de conocimiento es complejo y tiene múltiples definiciones, es así como según la RAE
corresponde a: Entendimiento, inteligencia, razón natural.� Otro diccionario lo define como: “El producto
o resultado de ser instruido, el conjunto de cosas sobre las que se sabe o que están contenidas en la
ciencia”9 Para Muñoz Seca y Riverola el “conocimiento es la capacidad de resolver un determinado
conjunto de problemas con una efectividad determinada”.10
En resumen podemos entender el concepto de “conocimiento” como un conjunto integrado por
información, reglas, interpretaciones y conexiones puestas dentro de un contexto y de una experiencia,
que se ha producido dentro de una organización o bien de un individuo. El conocedor [ persona
determinada ] interioriza el conocimiento de modo racional o irracional.
Características del conocimiento:Para Andreu y Sieber [ 2000 ]11, son básicamente tres características:
+ El conocimiento es personal: puesto que se origina en las personas, que
lo asimilan como resultado de su propia experiencia [ es decir, de su propio “hacer”, físico o
intelectual ] y lo incorporan a su acervo personal. Este punto nos indica una clara relación con el
modelo constructivista y el aprendizaje significativo visto anteriormente.
� http://es.wikipedia.org/wiki/Gestión_del_conocimiento
� http://www.rae.es/
� http://www.gestiondelconocimiento.com/conceptos_conocimiento.htm
�0 [ 199� ] http://www.gestiondelconocimiento.com/conceptos_conocimiento.htm
�� [ 199� ] http://www.gestiondelconocimiento.com/conceptos_conocimiento.htm
Gestión del conocimiento
20 / 21
+ Puede repetirse su utilización sin que el conocimiento “se consuma”: como ocurre con otros bienes físicos, permite “entender” los fenómenos
que las personas perciben y también “evaluarlos” según el momento determinado en que
ocurra.
+ Sirve de guía para la acción de las personas: vale decir, decidir
qué hacer en cada momento.
Estas características convierten al conocimiento, en la base para el desarrollo de las ventajas
competitivas. Por otro lado, en la medida en que el conocimiento es el resultado de la acumulación
de experiencias de personales, su imitación es complicada a menos que existan representaciones
precisas que permitan su transmisión a otras personas de forma efectiva y eficiente.
Gestión del conocimientoComo antecedente, para explicar este concepto, podemos decir que en Internet no sólo existe una
gran cantidad de información, sino que esta crece de manera exponencial en perjuicio de su calidad,
es así que es bastante común encontrar que un gran porcentaje de ésta, se encuentra expuesta
y publicada de un modo caótico. Por lo contrario, la aplicación de la información en un sitio Web,
donde se presente de un modo manejable y que optimice su uso para el usuario, agregándole al
mismo tiempo calidad, contempla dentro de su construcción la gestión del conocimiento.
Una definición para Gestión del Conocimiento sería:
“El conjunto de procesos y sistemas que permiten que el Capital Intelectual de una organización
o de una persona, aumente de forma significativa, mediante la gestión de sus capacidades de
resolución de problemas de forma eficiente [ en el menor espacio de tiempo posible ], con el
objetivo final de generar ventajas competitivas sostenibles en el tiempo”. 12
Su objetivo es, que la organización o bien el individuo sea más competitivo y más adaptable,
así como crear procesos y mecanismos que permitan optimizar en tiempo los procesos de
aprendizaje, tanto en su creación como en su difusión [ Gestión de la Información ], ya sea dentro
de la organización como con su entorno.
�� http://www.gestiondelconocimiento.com/conceptos_conocimiento.htm
Ambos conceptos se encuentran estrechamente relacionados, puesto que la educación es
probablemente el gran gestionador del conocimiento, ya que sus bases se fundamentan en poder
organizar la información a través del tiempo de la forma más eficiente y efectiva posible.
Es así como podemos comprender que una institución formal educativa como lo es “la Universidad”,
ha sido durante muchos años una de las mejores formas de estructurar el conocimiento, ya
que entre sus funciones básicas se encuentran la docencia, la investigación y la extensión de este.
Sin embargo este conocimiento sin gestionar carecería de desarrollo fututo, más aún considerando
que cada vez es más fácil acceder a la información sin la necesidad de pasar por instituciones
como “la Universidad”, como es el caso del material disponible en Internet.
Sin embargo, pese a la gran cantidad de información disponible en este medio “Internet”, sólo el
11% del total de la información acerca de Gestión de Conocimiento que circula [ y que no tenga un
carácter comercial ] corresponde a información generada por instituciones educativas y por tanto
de calidad..
Es así como la universidad se encuentra frente a la necesidad de generar una ventaja competitiva
respecto de este medio, y por ende hacer esfuerzos por incorporar las nuevas tecnologías que
favorezcan su desarrollo en la gestión de su conocimiento.
Gestión del Conocimiento y educación
22 / 23
La función educativa de este proyecto, conduce a la investigación de conceptos y medios presentes
en la actualidad y que se han incorporado a la educación de hoy, dentro de los cuales encontramos
el presente tema. El estudio de la utilización, efectos y repercusiones de las nuevas tecnologías de
la información en el proceso enseñanza-aprendizaje ha dado lugar al nacimiento de la Informática
educativa, como una nueva disciplina.
La informática educativa es un medio y no un fin, es decir, el foco central debe estar definido por
el aprendizaje, y la tecnología debe ser una herramienta más, que contribuya al desarrollo de éste
en los estudiantes.
Hoy es cuando, la real explosión de la informática lleva al hombre a tener una verdadera capacidad
de almacenamiento de sus conocimientos, así como también puede compartirlos de una manera
eficiente, ello hace referencia a que en la actualidad la adquisición de computadoras se hace cada
vez más accesible, debido a su descendente costo, por ende este instrumento se ha masificado
dentro de los hogares con una notable rapidez.
Ahora ¿Cómo llegó la revolución tecnológica a la creación de la multimedia interactiva [ como
sistema de comunicación ] dentro de la educación actual? Esta pregunta tiene por respuesta cuando
la tecnología se incorporó de forma dispar a la educación tradicional, esto se refiere a que se parte
desde las Universidades y centros de investigación, para luego expandirse a las otras instituciones
educativas. Aún esta dinámica se encuentra en constante desarrollo y experimentación, por lo
mismo, se puede establecer que muchos programas actuales de educación que integran a las
nuevas tecnologías, sólo sirven para hacer más de lo mismo, es decir, sólo traspasan al computador
las clases y actividades tradicionales, donde cambia sólo el soporte y no se aprovechan las reales
cualidades y potencialidades que este medio ofrece.
Una de las más notorias ventajas que ofrecen las nuevas tecnologías es que el estudiante controla
el ritmo de aprendizaje, amplia por ende las experiencias y participa activamente de su educación.
Pasando de su calidad de alumno pasivo a estudiante activo.
Informática Educativa
Expone más claramente Jaime Sanchez Ilabaca del siguiente modo1�:
Ventajas:
+ La interacción que reproduce entre el computador y el alumno [ el estudiante asume un rol
activo a diferencia del alumno en la educación tradicional ]
+ La posibilidad de dar una atención individual al estudiante [ cada experiencia como única según
las necesidades y estilos de aprendizaje para cada individuo ]
+ La potencialidad de amplificar las experiencias de cada día [ el computador puede crear
micromundos que estén a disposición del estudiante ]
+ El aporte del computador como herramienta intelectual
+ La capacidad que otorga al estudiante para controlar su propio ritmo de aprendizaje [aportando
con flexibilidad, eficacia y eficiencia ]
+ El control del tiempo y la secuencia del aprendizaje [ el estudiante elije el movimiento a través
del material, controlando la secuencia y el flujo del mismo ]
+ Otorga al estudiante el control del contenido del aprendizaje [ promueve una capacidad de
autoadministración y automanejo ]
+ Ofrece la posibilidad de ejercer como una herramienta de evaluación [ la inmediatez de los
resultados que se presenten y las correcciones de los errores, promueven al computador como
herramienta evaluativo ]
+ Ofrece una nueva forma de escribir y pensar, que ha ido cambiando paulatinamente la
concepción lineal del libro tradicional. Sumado a ello el manejo de símbolos y la destreza en la
asociación de los mismos, lo constituye como un metamedio por excelencia.1�
Por ultimo y no menos importante. El uso de la computación y de herramientas tecnológicas, genera
el espacio suficiente para que el docente retome su función básica, como la estimulación de la
creatividad y el pensamiento crítico y lógico, dejando de lado tareas que van en desmedro de su
dedicación personal.
Sin embargo, no podemos olvidar que este medio también existen desventajas, por ejemplo:
+ Una mala utilización de esta tecnología, puede generar una elección errónea de los elementos
multimediales de apoyo o bien conducir a un mal diseño de la interfaz. Como resultado no sólo
estará el fracaso como medio educativo, sino que reforzará el concepto de que trabajar con
ordenadores es solo para algunos o que se limita a una función básica.
�� Jaime Sanchez Ilabaca,1992, INFORMATICA EDUCATIVA, Editorial Universitaria, Santiago de Chile
�� Jaime Sanchez Ilabaca,1992, INFORMATICA EDUCATIVA, Editorial Universitaria, Santiago de ChileEducación asistida por computador
24 / 25
+ Por ello es necesario prestar atención tanto al mal uso como al abuso de las nuevas tecnologías.
Un ejemplo de ello es la gran cantidad de información dentro de la Web pero que es de mala
calidad.
+ Debe existir un permanente mantenimiento tanto de los contenidos como de la funcionalidad
de este. No sólo se trata de exponer un material en un formato digital, solo hay que cerciorarse
que la navegabilidad, la funcionalidad de links y la actualización del contenido sea constante,
por ende debe existir un mantenimiento que muchas veces resulta costoso.
El rol como diseñadores es explorar el cómo manejar la imagen para que esta comunique
adecuadamente los contenidos, en la que se pueda explotar el modelo constructivista y el rol activo
del usuario.
Lo primero es entender que significa TIC: son las Tecnologías de la Información y la Comunicación
o ICT [ Information and Communication Technologies ] y que actualmente se están implantando en
diversas áreas, por consiguiente, ocurre también dentro de la educación.
La gestión del conocimiento pasa, cada vez más, por el manejo de Internet, hecho que pone en
entredicho el sistema tradicional de aprendizaje [ en que el saber se concentraba en el aula ].
En la Conferencia Mundial sobre Educación Superior de la UNESCO [ 199� ] se subraya el papel
que las TIC tienen en el desarrollo educativo y se establece como marco de acción prioritario su
generalización, a fin de:
“reforzar el desarrollo académico, ampliar el acceso, lograr una difusión universal y extender el saber y facilitar la educación durante toda la vida”15
El reto es repensar la educación superior entorno al desarrollo de las nuevas tecnologías para
hacer frente a los desafíos de un contexto globalizado. Es por esta razón que se están impulsando
en varios países medidas de desarrollo tecnológico entorno a la política educativa, bien desde el
gobierno, o bien desde asociaciones universitarias. Se trata de asentar unas líneas estratégicas
para el desarrollo de una educación abierta.
La aparición de nuevos centros de enseñanza virtual afecta a los viejos sistemas de educación superior
a distancia, que también están adoptando el modelo de la Universidad Abierta. Es precisamente la
Universidad a distancia la que más ha visto modificado su sistema de aprendizaje.
�� www.UNESCO.orgTIC, nuevas tecnologías y su uso en
las Universidades
La revolución tecnológica que está
experimentando la Educación Superior está
modificando los esquemas clásicos de
formación y enseñanza. Los docentes no
pueden impartir sus clases a espaldas de
las nuevas tecnologías de la información, el
alumnado tiene que formarse en las nuevas
tecnologías, y más que acumular conocimiento
es cada vez más importante conocer donde
se encuentra la información. Pero además, la
Universidad, mientras sea institución presencial,
debe saber aprovechar las oportunidades que
las nuevas tecnologías ofrecen, para ampliar
mercado sobre la base de una nueva oferta.
Se habla hoy de entornos virtuales de
aprendizaje, de nuevos escenarios para la
Educación, de e-learning, educación virtual,
aprendizaje on-line. También de la combinación
“blended learning”, o articulación de sistemas
presenciales y a distancia.
Por otra parte, esta evolución de las Nuevas
Tecnologías en contextos de enseñanza y
aprendizaje está sujeta a cómo se insertan
estas en la práctica educativa y en el contexto
socio-económico y cultural de la denominada
“aldea global” y la metáfora del “aula sin muros”.
En los últimos años se han incorporado las
Tecnologías de la información y Comunicación
para la Educación a distancia, y éstas nos
hacen pensar en posibilidades diferentes de
acceso a la información y comunicación.
Hoy, si analizamos algunas propuestas de Educación a distancia,
podremos observar que se utilizan las TIC con fines “reproductivistas”,
en un modelo transmisivo, en lugar de contribuir a la significación y
producción de conocimiento. Esto demanda además la alfabetización
digital de docentes a la hora de diseñar un proyecto didáctico a distancia
con las Nuevas Tecnologías. Es decir, ese encuentro entre el mediador, los
sujetos que aprenden y el conocimiento a través de formas de interacción
discursivas y mediante el uso de materiales didácticos digitales.
El tema del tutor merece una especial atención pues con el avance de las
Nuevas Tecnologías en Educación hoy en día se instalan cursos en la red
y en ellos aparece la figura del tutor pero...¿realmente se está capacitado
para ejercer este rol?.
Finalmente, como formadores de Formadores ha de tenerse el compromiso
de orientar para el procesamiento de la información, de promover la lectura
crítica, de evaluar las producciones de las TIC y preguntarnos ¿Cómo
hacemos para que esta información se transforme en conocimiento?
Adaptación de los centros docentes ante la influencia de las TIC: + Escenario tecnócrata: Las escuelas se adaptan
realizando simplemente pequeños ajustes en su malla.
+ Escenario reformista: se introducen en las prácticas
docentes nuevos métodos de enseñanza / aprendizaje constructivitas
que contemplan el uso de las TIC como instrumento cognitivo [ aprender
CON las TIC ] y para la realización de actividades interdisciplinarias y
colaborativas.
+ Escenario holístico: “la escuela y el sistema
educativo no solamente tienen que enseñar las nuevas tecnologías, no sólo
tienen que seguir enseñando materias a través de las nuevas tecnologías,
sino que estas nuevas tecnologías aparte de producir unos cambios en
la escuela producen un cambio en el entorno y, como la escuela lo que
pretende es preparar a la gente para este entorno, si éste cambia, la
actividad de la escuela tiene que cambiar”.1�
�� Aviram 2002. citado en “Impacto de las TIC en el mundo educativo. Funciones y limi-taciones de las TIC en educación”, Dr. Pere Marquès Graells, 2000. Departamento de Pedagogía Aplicada, Facultad de Educación UAB. http://dewey.uab.es/pmarques/siyedu.htm
26 / 27
Del tema presentado se puede concluir que, no hay duda que el conocimiento es el capital
intangible del futuro. Por ende ha la Universidad ha de tomar un rol activo como agente productor del
conocimiento, además de gestionador del mismo, así convertirlo en nuevas y renovadas ventajas
competitivas tanto como institución, como la de formadora de profesionales. La utilización de las
nuevas tecnologías para este proceso es inminente si se quiere acortar la brecha que separa la
actual educación con la creciente y rápida evolución de la tecnología en la sociedad.
Conclusión
Para la implementación del prototipo educativo se hace necesario el
estudio de las aplicaciones actuales de las TIC que se encuentran activas
dentro de la Facultad de Arquitectura y Urbanismo.
Hace algunos años se encontraba activo un software llamado WebCT. Sin
embargo al ser este una plataforma de código cerrado su mantención
anual en licencias, terminó por hacer que MOODLE, fuese la plataforma
elegida ha implementar desde el año 2005, ya que esta cumplía con
la misma función de ser un ambiente de aprendizaje integrado para
desarrollar cursos en línea o aprendizaje a distancia, pero en este caso
corresponde a un código abierto.
Ambas corresponden a aplicaciones de las nuevas tecnologías en la
educación superior de carácter constructivita, en las que se pueden
realizar actividades didácticas, evaluaciones on-line y comunicación on-
line, así como también permite la entrega de información sincrónica como
asincrónica.
MOODLEMoodle es una plataforma de aprendizaje a distancia. Es un sistema de gestión de la enseñanza [ course management system
o learning management system ] es decir, una aplicación diseñada para
ayudar a los educadores a crear cursos de calidad en línea. Estos tipos
de sistema de aprendizaje a distancia a veces son también llamados
ambientes de aprendizaje virtual o educación en línea.1�
Moodle es una aplicación web que se distribuye gratuitamente como
Software libre [ Open Source ], que puede funcionar en cualquier ordenador
en el que pueda correr PHP, y soporta varios tipos de bases de datos
como MySql [ ambos de código abierto ]. Ya que esta diseñado para dar
soporte a un marco de educación social constructivista
�� http://es.wikipedia.org/wiki/Moodle
Características del Moodle:+ Promueve una pedagogía constructivista
social [ colaboración, actividades, crítica,
etc ].
+ Apropiada para el 100% de las clases en
línea, así como también para complementar
el aprendizaje presencial.
+ Tiene una interfaz de navegador de
tecnología sencilla, ligera, eficiente, y
compatible.
+ Es fácil de instalar en casi cualquier
plataforma que soporte PHP. Sólo requiere
que exista una base de datos.
+ La lista de cursos muestra descripciones
de cada uno de los cursos que hay en
el servidor, incluyendo la posibilidad de
acceder como invitado.
+ Los cursos pueden clasificarse por
categorías y también pueden ser buscados
- un sitio Moodle puede albergar miles de
cursos.
+ La mayoría de las áreas de introducción
de texto [ recursos, mensajes de los foros
etc. ] pueden ser editadas usando el editor
HTML, tan sencillo como cualquier editor
de texto de Windows.
Por lo tanto se considerará a moodle como una
alternativa valida para el desarrollo de la parte
proyectual.
Escenario de las TIC en la Universidad de Chile
28 / 29
Sin embargo el conocimiento de esta plataforma
dentro de la FAU, gracias a la información
proporcionada por Pedro Soza [ encargado del
Aula Virtual FAU ] nos proporciona otros datos
importantes de mencionar para el desarrollo del
proyecto, como:
+ La plataforma moodle tiene hoy en el
mundo alrededor de �.000 universidades
donde se implementa, con una suma total
de usuarios superior a los �5.000. por
lo tanto habla de la gran difusión como
plataforma de aprendizaje.
+ Dentro de la facultad el moodle se
implemento hace sólo un año [ 2005 ], y hoy
cuenta con 2�11 usuarios inscritos [ entre
alumnos, docentes, parte administrativa,
académicos, etc ]
+ Cuenta con 1�2 cursos creados, de los
cuales a la fecha se utilizan alrededor de
20, lo que habla de una incorporación lenta
de esta herramienta.
+ Los cursos se subdividen en �5 cursos de
diseño, 2� de arquitectura, � de geografía,
� de formación general, � de posgrado,
etc.
+ Hoy la facultad se gasta sólo en mantención
de licencias alrededor de �� millones de
pesos. Sin contar con la mantención de
los equipos. Por lo mismo, hoy se piensa
en acceder a softwares de código abierto:
como lo es LINUX, de modo de destinar
esos recursos a otras instancias.
Tipo de enseñanza empleada en moodle:+ No existe un modelo definido y claro respecto del modelo pedagógico
del contenido que implementan los académicos.
+ Hoy existen alrededor de � cursos que efectúan evaluaciones
mediante el moodle, las que se realizan en Mysql y la idea es
que adjunto con el STI [ Dirección de Servicios de Tecnologías de
información, a cargo de Gustavo Anabalón ] se realice una maya
que comprenda todo tipo de evaluaciones donde los datos sean
traspasados en red automáticamente al sistema, de modo que toda
la documentación existente pase a ser parte del material disponible
mediante la red.
Gráfica empleada:+ Este responde a un formato PRE DETERMINADO. Donde los iconos
son preestablecidos por el sistema y son de uso universal [ en otros
moodles ]
+ Moodle si bien permite personalizar la gráfica y poder editarla;
por ejemplo para poder modificar la gráfica de los iconos, se
debe mandar un mail al creador del moodle en Australia, el que
implementa dichos elementos gráficos como una nueva alternativa,
por lo tanto se hace engorroso este tramite.
+ O bien, se puede configurar una aún más personalizada pero por
medio de la edición de cada uno de los elementos por separado.
Esta tarea aun no se ha realizado dentro del moodle fau, puesto que
los docentes a cargo a la fecha recién comienzan a interiorizarse en el
uso del moodle, y su dominio es básico aún en la materia. Se espera
que más adelante los participantes de cada curso cuenten con un
dominio tal que se personalicen los sitios según cada necesidad.
U-CursoPese que a la fecha aún no se ha implementado dentro de la FAU, se ha
previsto la incorporación de otro sistema como plataforma de aprendizaje
a distancia, llamada U-Curso. Actualmente vigente tanto en la Facultad
de Ciencias Físicas y Matemáticas de la Universidad de Chile como
recientemente en la Facultad de Medicina, esta plataforma ha sido
creada en la Facultad de Beauchef, y se encuentra en la práctica hace
más de 5 años. Los datos correspondientes a esta plataforma han sido
proporcionados gracias a la colaboración de Cristian Céspedes, quien
pertenece al ADI.
Su ventaja radica en la facilidad de actualización puesto que su mantención
se encuentra dentro de la misma casa de estudio, ADI [ Área de Desarrollo
de Infotecnología ]. Si bien no será gratuito, la incorporación de este
sistema, permitirá a la facultad pertenecer a un sistema central de base
de datos, lo que hará a largo plazo más eficiente el sistema.
U-curso funciona al igual que moodle, como un repositorio de documentos
de fácil utilización para el usuario. Ya que será implementada a través
de los servidores de la universidad, este ofrece múltiples tecnologías
para los diversos formatos en los que se implemente el contenido, tal
como lo sería .doc, .exe o bien .swf entre otros. Del mismo modo existiría
un espacio prácticamente ilimitado a disposición de los docentes para
la implementación de cursos. Además cabe mencionar que a la fecha
no se realizan evaluaciones on-line, pese a que si esta capacitado para
hacerlo.
En cuanto a la gráfica y la navegación aplicada en la plataforma, esta no
responde a ninguna metodología ni de aprendizaje, ni de comunicación,
sino que ha sido creada bajo la necesidad de una lógica y nivel práctico
ofrecido.
En cuanto a los costos de la implementación, se encuentran en
conversaciones, y por ende estos datos no podrán ser considerados al
momento de evaluar los costos del proyecto.
Otra instancia ofrecida por U-curso y que no posee Moodle, es la
incorporación del sistema de mensajería “escuela móvil”, la que consiste
en el envío de mensajes de texto para los inscritos
a la plataforma.
Si bien hoy no se ha implementado ningún
módulo de aprendizaje como el que se plantea
para el prototipo del proyecto, se nos enuncia,
que si es factible de ser habilitado y que se esta
trabajando en esta línea y la futura incorporación
de elementos interactivos para la entrega de
contenidos.
30 / 31
mul
timed
ia y
dis
eño
web
Ya que el soporte para el Módulo Interactivo en apoyo a la clase presencial de diagramación
editorial mediante retículas, será implementado a través de las TIC actualmente en uso dentro
de la Facultad, se hace indispensable abarcar los temas de multimedia e Internet, para tener una
base teórica al momento de la etapa proyectual. Considerando asimismo conceptos como el de
usabilidad e interfaz, los que se ligan al diseño pensado en el usuario.
Términos relacionados:+ Multimedia: Se refiere a la combinación o utilización de dos o más medios de
comunicación al mismo tiempo.
Esta cualidad no sólo esta vinculada con la informática, puesto que si un libro trae adjunto un
CD de audio, también corresponde a una obra multimedial. Esto no asegura una mejor calidad,
sino que son necesarios más medios para que el mensaje sea transmitido completamente.
Sin embargo si están bien empleados aproxima el aprendizaje a una comunicación más
cotidiana del ser humano al utilizar más de un sentido para la comprensión del mensaje.
Dentro de la informática, los medios más utilizados son: texto, imágenes estáticas, imágenes
en movimiento y audio. Al sumar la Internet, aparece otro concepto utilizado: HIpermedia [ es
la combinación de la multimedia con el hipertexto ].
+ Hipertexto: es un texto organizado en módulos autocontenidos llamados nodos y
unidos entre si por medio de vínculos o links. Esto nos permite estructurar la información de
un modo similar al como pensamos, vale decir, no lineal. Además permite llegar a un mismo
nodo por diferentes caminos.
Cabe mencionar que el hipertexto es la base funcional de la World Wide Web, lo que implica
el trabajo bajo un protocolo especifico de Internet llamado HTTP [ acrónimo del inglés Hiper
Text Transfer Protocol = “Protocolo de transferencia de Hipertexto” ].
Por otro lado, para permitir la descarga y mostrar finalmente en la pantalla los gráficos [ tanto
estáticos como en movimiento ], el sonido y el texto de los documentos de hipertexto, se hace
necesario contar con un software que lo permita, a este navegador se le denomina browser.
+ Arquitectura de la Información: Hace referencia del diseño estructural de
los sistemas de información, organizando y presentando de una forma articulada y coherente
el contenido. Se utiliza principalmente en espacios virtuales como los sitios Web de Internet,
donde se requiere que el propio usuario obtenga la información sin ayuda de terceros.
Multimedia y Diseño Web
32 / 33
+ Usabilidad: Jacob Nielsen en 1990, se refiere a este término como al efecto de
producir en el usuario especifico una buena “experiencia” al usar una aplicación multimedia.
Esto contempla su utilidad, facilidad de uso, facilidad de aprendizaje, su apreciación y la
satisfacción que le genere.
Principios que rigen la aplicación
multimedia
1
____________________1 Definiciones extraídas de “Guión Multimedia” de Guillem Bou Bouzá
+ Principio de Múltiple Entrada: Las aplicaciones multimedia por lo
general están diseñadas para un usuario en particular, de ahí que se hace necesario conocer
cuales son las características del mismo, como lo es la manera en que se almacena la
información [ cognitivamente, afectivamente y bajo un factor de la experiencia previa ].
+ Principio Multicanal: Manda un mensaje a través de diferentes canales
perceptivos, pero de forma sincronizada.
+ Principio de Interactividad: Esta es una de las principales ventajas de la
multimedia, y para planificarla ha de basarse en 6 directrices:
1. La interacción tiene como función reforzar el mensaje.
2. Evitar los periodos prolongados en los que el usuario deja de interactuar
activamente.
3. La aplicación ha de entregar la sensación de decisión entre distintas alternativas para
ir avanzando.
4. Evitar el uso de elementos confusos [ ej. simular botones que no lo son ].
5. Pensar si la aplicación puede ser utilizada por más de un usuario a la vez.
6. Que de la aplicación se pueda obtener un registro de la conducta de los usuarios.
+ Principio de Libertad: Hacer sentir al usuario que tiene la libertad de decidir
pese al esquema predeterminado que estructura el multimedia.
+ Principio de Retroalimentación: Tiene que ver con la capacidad de
corregir el funcionamiento del sistema.
+ Principio de Vitalidad: Responde a lo dinámico que ha de ser. Por ejemplo
que suceda algo aunque el usuario no haga nada. Así se intensifica la atención, por ejemplo
con iconos animados.
+ Principio de Atención: Tiene que ver con la mantención de la atención
cognitiva [ valor de la información contenida, por ende, que sea relevante y bien organizada ]
y la atención afectiva [ relacionada con el impacto que se logra en el receptor ].
Corresponde a un “algo” que media en la relación de interacción de un usuario con un sistema
[ máquina ]. No es un objeto, sino un espacio en el que se articula la interacción entre el cuerpo
humano y la herramienta.
Interfaz Gráfica de usuario: [ en inglés “Graphic User Interface”, también conocido
con su acrónimo GUI ] es un método para facilitar la interacción del usuario con el ordenador o la
computadora a través de la utilización de un conjunto de imágenes y objetos pictóricos [ iconos,
ventanas, etc. ] además de texto1. Es la especificación del “look and feel” de un sistema
computacional, lo que se refiere al acoplamiento estructural entre el usuario y la herramienta, a través
de la percepción visual.2
La interfaz nos informa que acciones son posibles, el estado actual del objeto, y los cambios producidos
y nos permite actuar con o sobre el sistema o la herramienta. En nuestro caso particular del proyecto
como módulo de apoyo a la clase presencial, se incorporarán los tres elementos que tienen que ver
con la elaboración de la interfaz, se tiene en primer lugar al usuario [ estudiante y docente ], una tarea
u objetivo a realizar [ acceder a los contenidos educativos presentes en el módulo ] y un elemento
constituyente del esquema [ computador ].
� http://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuario
� Del objeto a la interfase, Gui Bonsiepe
Interfaz Gráfica
34 / 35
Los tres estilos más comunes de Interfaz Gráfica hombre – computador son:
+ WYSIWYG:“What you see is what you get”, o “lo que tu ves es lo que puedes conseguir”, se refiere a
lo que el usuario ve en la pantalla es esencialmente la misma imagen gráfica creada por la
aplicación.
Cuando no existe interfaz WYSIWYG es cuando el sistema utiliza códigos de control para
obtener un resultado, tal como lo es el código HTML, por ejemplo: bold, Italic, tamaño, etc. en
HTML seria: <B>bold, </B><I>Italia</I>, <font size=5>tamaño.</font>.
Sus desventajas son:
- La resolución, la intensidad del color y otras características que no resultan iguales de
pantalla a un dispositivo de impresión.
- Algunas aplicaciones no pueden ser implementadas solo con WYSIWYG.
- No siempre pueden generar cambios escalares [ ej, mover una sangría ], por tanto la
interfaz pasa a llamarse WYSIAYG “what you see is all you get”.
+ Manipulación directa:Es cuando a través de acciones físicas los usuarios manipulan los objetos gráficos. Las
acciones realizadas son apoyadas por experiencias del mundo real, materializadas a través
de metáforas, por ejemplo a través del Mouse.
Este tipo de interfase realiza constantemente le proceso de retroalimentación. Lo que asigna
un sentido de control de la aplicación al usuario. Sus principios son:
- Continua representación de los objetos y acciones de interés.
- Acciones físicas o presión de botones etiquetados en lugar de sintaxis muy compleja.
- Rápidas y reversibles operaciones que afectan a los objetos de interés son inmediatamente
visibles.
Sus desventajas son:
- La exactitud dentro de la manipulación es dejada a la habilidad que tenga el usuario con
el uso del Mouse.
- Requiere mucho conocimiento del mundo real.
- Para el usuario más experimentado se puede volver más lento el cumplimiento de ciertas
tareas, que podría realizar más rápidamente a través de la sintaxis de código.
Estilos de Interfaz Gráfica
+ De usuario Basada en Iconos:Este estilo se basa en representar a través de iconos los elementos
como objetos, acciones, una propiedad o algún concepto. El icono
tiene por ventajas:
- Los iconos bien diseñados pueden reconocerse más rápido que
las palabras.
- Utilizan menos espacio en la pantalla.
- Puede llegar a ser usado como un lenguaje universal,
independiente del idioma.
Sin embargo autores como Francisco Jiménez Ordoñez, en su
“Tutorial de Diseño de Interfaz Gráfica”, enuncia que no siempre el
icono es mejor para representar algún concepto o acción, y que
muchas veces es mejor utilizar texto para representar algo.
El uso de iconos en este tipo de aplicación, que se proyecta como
módulo multimedia como apoyo a la clase presencial, busca las
siguientes características:
- Reconocer: que tan rápida y correctamente el significado del
icono puede ser reconocido.
- Recordar: que tan bien el significado del icono puede ser
recordado una vez que se ha aprendido.
- Discriminar: que tan buen icono puede ser distinguido de los
otros.
Es importante no confundir al usuario con tipos de iconos que inviten
a la realización de varias acciones, por ello el diseño ha de ser claro.
Además los iconos no necesariamente tienen que ser figurativos,
estos pueden ser de manera abstracta y con el uso del programa
pasar a representar determinadas acciones.
36 / 37
En este apartado trataremos los elementos necesarios de considerar para la proyección del módulo
multimedial de carácter virtual, particularmente en Internet.
+ Espacio de pantalla: jerarquizar visualmente los contenidos secundarios de la
página, de modo que no ensucien el contenido principal. Además considerar el porcentaje
perdido por los controladores del sistema operativo y del navegador.
Como norma se ha de utilizar al menos la mitad del diseño de una página, aproximadamente
un 80%, eliminando todos los elementos que no sean prescindibles, y dar una mayor
simplicidad a la navegación.
+ Diseño independiente de la resolución: ha de considerarse la
resolución promedio que utiliza el grupo objetivo, el que para efectos de esta aplicación
particular corresponde a 1024 x 768 píxeles3.
Teniendo en cuenta la masividad de muchas páginas como los Blogs, y que pueden generar
páginas de una extensión casi ilimitada en su “alto” [ scrollin screen ], donde la barra de
desplazamiento avanza proporcionalmente a dicho alto, esto no significa que sean lo mas
óptimo para presentar un contenido extenso.
Es decir, que no ha de dejarse al azar el tamaño de la página a diseñar, sino que ha de
valuarse la necesidad del contenido y el diseño modular de la totalidad de las páginas.
+ Uso de contenido no estándar: la constante innovación en tecnologías da
resultados que no siempre son compatibles con todos los sistemas o navegadores, por ello
habrá de evitarse el uso de códigos que no sean estándar.
+ Estética y Diseño minimalista: al igual que el dialogo de una conversación,
Internet es bidireccional, donde la información de un sitio Web no ha de estar por el simple
hecho de estar, ya que cada información extra competiría en relevancia y contaminaría la
totalidad. Jacob Nielsen4 agrega que “las páginas Web deben ser diseñadas con la velocidad
como prioridad”, por lo tanto cada elemento extra implica una nueva descarga, lo que para
conexiones lentas se traduce en un problema.
3 Dato extraído de encuesta realizada al grupo objetivo, disponible en el apartado [ anexos ].
4 Nielsen, Jacob. Ten usability heuristics: useit.com [ en linea ] http://www.useit.com/papers/heuristic/heuristic_list.html
Elementos necesarios para el diseño de
una página
+ Tiempo de respuesta: Jacob Nielsen postula que el tiempo limite para hacer sentir
al usuario que es sistema esta reaccionando instantáneamente es de aproximadamente una
décima de segundo.
Un segundo es el límite que hay para que el usuario piense que no hay interrupción, por
el contrario 10 segundos es el límite máximo para mantener la atención del usuario. Una
manera de ayudar en la espera, es colocar el tamaño o el tiempo de descarga de los archivos
junto al vínculo.
En torno a la encuesta realizada dentro del grupo objetivo, y considerando que el soporte del proyecto
es Web, hemos de considerar el tipo de conexión a Internet con las que cuenta dicho grupo objetivo
y lo masivo del mismo.
Según un estudio del Instituto de Estudios Mediales UC WIP5, que se realizó en cooperación con el
Centro de Estudios de la Economía Digital de la Cámara de Comercio de Santiago el año 2004 se
extraen los siguientes datos:
- Sobre el 35% de los hogares hacen uso de Internet.
- El 48,7% de los usuarios de Internet tiene menos de 24 años.
- Los lugares más frecuentes donde se conectan los usuarios, es el lugar de trabajo o de
estudio.
- Dentro de las actividades más frecuentes están el envío de e-mails con un 77% y las
actividades de estudio con un 75%.
- Hoy más del 53,1% de los usuarios posee banda ancha.
Estos datos extraídos del estudio, concuerdan con los datos obtenidos en la encuesta que se realizó
dentro del grupo objetivo, por tanto podemos dar fidelidad a los datos presentados, los que nos dan
un respaldo de la viabilidad del proyecto.
� http://www.wipchile.cl/esp/index.htm
Algunos conceptos a considerar de
Internet
38 / 39
Como se trata de un módulo multimedial que
será transmitido a través de la pantalla, y que
contendrá un buen porcentaje de información
escrita, hemos de considerar la legibilidad de la
tipografía en pantalla tomando en cuenta la baja
resolución y la luz proyectada por la misma.
Existen recursos que ayudan a que la baja
resolución de la pantalla [ compuesta por 72
píxeles en un área cuadrada de 1 pulgada ], y
que producen distorsiones en los detalles como
el contorno de las curvas y líneas inclinadas con
un efecto de “sierra”, llamado aliasing, puedan
ser depurados. Es el caso del suavizado del
contorno, conocido como antialiasing, lo que nos
permite hacer más agradable la visualización de
los signos como la tipografía en la pantalla.
Por otra parte existen tipografías que no requieren
de este suavizado, puesto que están diseñadas
para ser utilizadas dentro de la pantalla, y por
tanto se ajustan a la grilla de 72 píxeles. Entre
las más conocidas y difundidas están: Georgia,
Trebuchet MS y Verdana.
Sin embargo, para efectos de la aplicación en
curso cuya maqueta estará realizada en SWF,
lo que nos permitiría eventualmente adjuntar
cualquier tipo de tipografía [ ya que la trata como
una forma de gráfico, tal como lo sería un jpeg ],
se tomará en cuenta lo necesario de que el
contenido tipográfico sea editable para efectos
de una posterior mantención, lo que se traducirá
en que se respetará la legibilidad de la tipografía
en la pantalla y las tipografías creadas para este
propósito, y sólo serán tratadas como imagen
las tipografías que se utilicen para elementos
puntuales como títulos o botones.
Legibilidad en Pantalla
Además al tratar el contenido como texto y no como imagen, disminuye el peso de los archivos, y por
ende el tiempo de descarga.
El tamaño del cuerpo es lo primer factor a considerar. Recordemos que su unidad de media es el
punto, y que este equivale a 0.350 milímetros, es por ello que un tamaño idóneo estará entre los 10 y
12 puntos. Pese a ello debemos tener en cuenta a que tipo de usuario nos estaremos presentando,
ya que no es lo mismo una tipografía para un adulto que para un niño.
Luego del tamaño, es necesario considerar el espaciado de la tipografía, la que estará en constante
evaluación. El Kerning por una parte, trata acerca del espaciado que el diseñador determina entre los
caracteres al momento de crear una tipografía, y el Traking en tanto, se ocupa de variar la separación
entre letras de manera uniforme en líneas de párrafo, de manera que no interrumpa el flujo de la
lectura.
El tercer factor es el interlineado, que es la separación entre las líneas de un párrafo. Los párrafos
se presentan como un conjunto gris formado por una serie de líneas negras aisladas por canales
blancos.
Por ultimo está la longitud de la línea, que hace más adecuado el uso de columnas relativamente
estrechas, que no fuercen el ojo y que sean leídas con facilidad. Para ello se toma en cuenta la
fisiología del ojo y el recorrido que hace en una línea para luego saltar a la siguiente.
40 / 41
El presente proyecto de un Módulo Interactivo en apoyo a la clase
presencial de diagramación editorial mediante retículas será desarrollado
mediante el software Macromedia Flash.
Este software nos permite un desarrollo audiovisual digital con una gran
facilidad, pues integra la imagen estática [ ya sean vectores o mapas de
bit ], la imagen en movimiento [ video ] y el sonido con un leguaje simple
de programación llamado actionScript. Además, el software se encuentra
disponible para su uso dentro de la Universidad de Chile, contándose con
sus licencias y actualizaciones legalmente adquiridas, lo que nos permite
su utilización para fines de este proyecto.
Esta aplicación en SWF [ ShockWave Fash ] al ser exportada para Web,
requiere de un plug-in de Flash Macromedia para ser vista, dicho plug-in
se encuentra disponible gratuitamente para ser descargado en:
http://www.adobe.com/shockwave/download/download.cgi?P1 Prod Versi
on=ShockwaveFlash&promoid=BIOW, lo que permite a cualquier usuario
acceder a su última versión.
El inconveniente más notorio de esta plataforma es que los textos no
se pueden seleccionar para copiar desde el browser, sin embargo para
solventar esta desventaja respecto de las páginas generadas en HTML, se
pueden adjuntar archivos descargables para el usuario.
Otro punto a considerar es que el contenido de los archivos SWF no son
factibles de ser encontrados por buscadores a menos que se conozca
la URL exacta. Para resolver este punto es indispensable recordar que el
proyecto esta contemplado y desarrollado para ser habilitado dentro de
la plataforma de aprendizaje a distancia disponible dentro de la Facultad,
como moodle o bien U-curso las que, como ya se mencionó, están
creadas mediante el uso de códigos abiertos y bases de datos. Por lo
tanto, bastaría con incorporar datos del contenido académico del módulo
[ palabras claves ] que puedan ser encontrados por los buscadores, dentro
de la página inicial del módulo, la que se desarrollará mediante HTML.
Software para desarrollar el Proyecto
De la misma forma la plataforma de aprendizaje a distancia U-curso
[ próximamente disponible ], nos entregará las herramientas necesarias
para facilitar la bidireccionalidad del medio, puesto que ofrece la posibilidad
de incorporar foros de discusión y una serie de otras herramientas que,
aunque actualmente no se encuentran implementadas, están en proceso
de desarrollo dentro de la Facultad de Ciencias Físicas y Matemáticas de
la Universidad de Chile [ entidad que se hará cargo de la mantención de
la plataforma ]6.
6 Esta información ha sido proporcionada por Cristian Céspedes, del Area
de Desarrollo de Infotecnologias ADI
42 / 43
diag
ram
ació
n y
retíc
ulas
La motivación principal del proyecto es potenciar el aprendizaje de un lenguaje común respecto
de la diagramación, y más específicamente del uso de grillas o retículas [ ya sea para potenciar su
comprensión y uso, o bien para facilitar su deconstrucción y el apoyo de un diseño más intuitivo y
orgánico ]. Para esto es indispensable conocer cuál es la materia que se expondrá posteriormente
como contenido del proyecto en curso.
Es entonces que, en una primera instancia se expondrá una breve introducción de lo que son las
retículas, su construcción y su aplicación de un modo general; para luego diferenciarlas en dos macro
clasificaciones: Diseño con Retícula y Diseño con Retícula Deconstruida.
Previo a todo análisis es indispensable poder formular un lenguaje que nos sea uniforme para la
posterior comprensión, esto a raíz de que muchos autores se refieren a una misma instancia con
diferentes términos o palabras, las que no siempre son las más adecuadas.
Es por esto que definiremos como glosario:
+ Malla: según la RAE [ Real Academia de la Lengua Española ]� se define como: Cada uno
de los cuadriláteros que, formados por cuerdas o hilos que se cruzan y se anudan en sus cuatro
vértices, constituyen el tejido de la red. // Cada uno de los eslabones de que se forma este
tejido.
+ Redes: según la RAE: Aparejo hecho con hilos, cuerdas o alambres trabados en forma
de mallas, y convenientemente dispuesto para pescar, sujetar, etc. // Líneas que forman una
estructura pero que pueden construirse libremente, sin ningún orden o tener un estricto rigor
geométrico.
+ Rejilla: según la RAE: Entramado o tejido en forma de red de cualquier material.
+ Planilla [templates]: Impreso o formulario con espacios en blanco para rellenar,
en los que se dan informes, se hacen peticiones o declaraciones, etc.
Se hará una especial atención a esta palabra puesto que, la plantilla es una herramienta de
mucha utilidad para el formato realizado para pantalla, por ejemplo para las páginas web. Las
plantillas ahorran mucho tiempo de repetir elementos constantes como las barras de menú, el
banner principal, etc.
� Diccionario de la Lengua Española, disponible en: http://www.rae.es/
Glosario
44 / 45
Los términos definidos anteriormente si bien no están tan alejados en
contenido, son muy generales o bien en ninguno se aplica una medida
estándar o proporcional que se respete, y su construcción puede ser
aleatoria o dispar, es por esto que no nos serán aplicables para definir
nuestra materia.
Ahora definiremos los términos que nos serán más aplicables:
+ Grilla: en este caso la RAE no nos ayuda mucho, puesto que
define a la grilla como la hembra del grillo.
Por otro lado, esta palabra se utiliza para mostrar guías de apoyo
dentro de software como FreeHand, Illustrator, Autocad, etc. [ o una
cuadrícula con espacio configurable ], vale decir, que en estos casos
si sería aplicable la palabra para referirnos a nuestro tema.
Existen también grillas especiales, como las isométricas que facilitan
el trabajo en perspectiva.
+ Cuadrícula: según la RAE: Conjunto de los cuadrados que
resultan de cortarse perpendicularmente dos series de rectas
paralelas.
Para efectos de diagramación, nos será aplicable en cierta
medida, puesto que se pueden dar asociaciones que no impliquen
necesariamente cuadrados.
+ Retícula: según la RAE: Conjunto de hilos o líneas que se ponen
en un instrumento óptico para precisar la visual. // Placa de cristal
dividida en pequeños cuadrados, generalmente de un milímetro de
lado, que se usa para determinar el área de una figura.
En este caso se le toma como una medida estándar concreta, por lo
tanto considera líneas regulares de igual o proporcional longitud.
Este término también es utilizado en el diseño y composición
periodística, donde los márgenes del texto se proporcionan de
manera uniforme y la retícula pasa a ser un conjunto de cuadros que
facilitan el trazo para reproducir con mayor exactitud.
O bien, en la retícula se aplican las simetrías [ equilibrio ] para la
distribución de las líneas sobre el espacio del campo gráfico.
+ Diagramación: según la RAE: acto de diagramar.
+ Diagramar: según la RAE: Elaborar un esquema, gráfico o dibujo con el fin de mostrar las
relaciones entre las diferentes partes de un conjunto. // Diseñar el formato de una publicación.
Por lo tanto, es el manejo del espacio, donde se muestra las relaciones simétricas dentro del
campo gráfico [ ej: papelería, revistas, folletos, etc. ]
+ Composición: es el esquema guía que sirve para dividir el espacio, localizar el centro y de
esta manera facilitar el acomodo de las líneas de la retícula.
Luego del análisis de los términos recién expuestos llegamos a la conclusión de que tomaremos a
la palabra retícula para referirnos a las zonas determinadas [ como resultado similar a una
matriz ] para la distribución de los elementos en la diagramación [ el acto ] y así determinar la
composición dada [ el todo finalizado ].
+ Guía: lo definiremos como el elemento básico que constituye la
retícula de diagramación.
Dentro del software, puede tomarse a la guía como la línea que
se genera cuando se arrastra el puntero desde la regla vertical u
horizontal a fin de señalar un punto de referencia.
Considerar para ello la unidad de medida que se utilizará según sea
el formato, por ejemplo, pixeles para formato web, y centímetros
para formatos impresos.
46 / 47
Lo primero es, no predisponerse a que el uso de grillas o retículas puede coartar la libertad en el
diseño o implicar una forma de opresión estética, por el contrario, la existencia de éstas ha sido a
raíz de factores como lo es que, para muchos diseñadores, dichas retículas son parte esencial de su
trabajo, ya que les suministra precisión, claridad, economía y continuidad. Aporta a la maquetación
un orden sistematizado, diferenciando los diversos tipos de información y aclarando al usuario la
forma de distribución del contenido. En cuanto a la economía, se refiere al ahorro de tiempo sobre
todo para proyectos de gran envergadura como lo es el desarrollar un libro o una serie de estos.
Además de la continuidad visual, la retícula permite subdividir el proyecto en varias personas, sin
que la coherencia visual se vea perjudicada.
El uso de la retícula aporta claridad, tal como lo hace la retícula tipográfica. No obstante a ello,
también es importante que validemos la estructura y la libertad que pueden existir en el diseño
orgánico de hoy.
Para explicar el uso de retículas, primero se expondrán los tipos básicos que existen y los que se
utilizan con mayor frecuencia, su rol en la organización de la información y su aplicación como
marco para la composición en el diseño estructural o tradicional.
Para explicar la deconstrucción de retículas, se señala la ruptura de la estructura normada, y la
existencia de métodos alternativos, espontáneos u orgánicos [ o bien, donde se ignora a la retícula ].
y no por ello son menos eficaces en el diseño actual.
Introducción a las retículas Retícula tipográfica: el principio de su existencia se basa
en algún significado “x” y cómo crear un orden que haga comprensible
ese significado. Hoy es un dogma fundamental del estilo internacional
[ es un sistema ortogonal de planificación que parcela la información
en fragmentos manejables. Este sistema parte de la base de que las
relaciones entre ubicación y escala que se establecen entre los elementos
que transmiten información – textos o imágenes – ayudan a los lectores a
comprender el significado de dichos elementos ].
Los objetos se disponen de manera parecida, a fin de que sus
semejanzas resulten más evidentes y así, más reconocibles. La retícula
sitúa los elementos en un área espacial dotada de regularidad, que los
hace accesibles. Las uniones entre las divisiones verticales y horizontales
actúan como señales indicativas para la localización de la información�.
__________________________
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.09.
Cabe aclarar que este estudio no pretende en ninguna medida llegar a ser categórico, ni constituirse
como una taxonomía definitiva, sino más bien, llegar a ser un instrumento que sirva para el análisis
y la aplicación. La importancia del conocimiento de esta materia, permitirá servir como base o
como herramienta para la maquetación de futuros proyectos.
Para la explicación gráfica de la retícula [ de la teoría a la práctica ], se recurrirá a Infografías o
diagramás simples aplicados sobre ejemplos y obras que permitan una adecuada comprensión.
Panorama GeneralLa presencia de las retículas no es materia reciente, sino que su aplicación aparece mucho antes de
lo que nos imaginamos. Si ahondamos sólo un poco, nos daremos cuenta que muchos movimientos
artísticos tienen que ver con el uso de retículas en mayor o menor grado. Y, si consideramos que
como diseñadores muchas veces nos vemos enfrentados al estudio de movimientos artísticos
caemos en la cuenta que, lo queramos o no, estamos frente a retículas.
La tranversalidad de contenidos como las retículas, hace que sea propicio poder incluir un poco
de historia y así comprender de modo general los comienzos y repercusiones de la retícula en la
evolución, tanto de movimientos artísticos como de nuestra disciplina.
Por ejemplo: comprender cómo movimientos, como De Stijil, cuidaron celosamente el uso ortogonal
de las formás, o cómo la inclinación de la misma generó rupturas dentro de los movimientos. O
bien, la evolución del diseño posterior a las guerras, donde se dio más relevancia al orden y a
la claridad, y de donde se extrajo que la retícula podía proporcionar dicho orden para organizar
las imágenes, son hoy datos que nutrirán la comprensión de la misma. Del mismo modo, como
se contrasta su estructura minimalista al lado de la constante cinética expuesta en los entornos
multimedia.
Hoy la relevancia que ha adquirido el diseño dentro de la conciencia pública, sumado a la
incorporación de las tecnologías en la comunicación, hacen que la creación y la organización de las
formás, estén estrechamente relacionadas a la transmisión visual de la información. Es la inherente
reflexión del diseñador sobre cómo y dónde poner las cosas en el campo gráfico.
48 / 49
Si bien no es nuestro propósito ir en desmedro de la historia de la retícula, para efectos de la
investigación, tardaríamos demásiado en llegar al diseño contemporáneo que es lo que más nos
involucra como diseñadores hoy, es por ello que tomaremos como punto de partida a ciertos autores
que determinaron que la retícula que se utiliza hoy en día, s e desarrolló durante la Revolución
Industrial.
Por la complejidad y extensión del tema histórico, la información que se expondrá a continuación
estará desarrollada de un modo conciso a modo de ofrecer un panorama general y no como un
estudio minucioso.
Breve HistoriaLa Revolución Industrial [ �740 ] cambio la vida de las personas, y por ende afecto a la cultura;
el poder paso a manos de la clase trabajadora, la población empezó a acrecentar su poder
adquisitivo, se estimulo la tecnología y la producción en serie, se redujeron los costos y aumento la
disponibilidad de los productos. El diseño entonces potenció su rol cada vez más relevante a la hora
de comunicar los atractivos de los bienes materiales que se producían. Así mismo, el aumento de
la alfabetización creó un público mayor para los materiales de lectura [ cabe aclarar, todo esto en el
marco del desarrollo y no de los puntos en contra que también se produjeron ].
Por cierto, también se produjo una confusión estética, durante décadas se había mantenido
la tradición de las Bellas artes, es decir de lo neoclásico. En Inglaterra el movimiento Arts and
Crafts, activó los ámbitos de la arquitectura, así se alteró el estilo victoriano y su predilección por
los elementos góticos. El diseño, no quedo exento a lo que sucedía y también reaccionó a este
cambio.
Un vanguardista del movimiento, William Morris, se encargó de revitalizar la estética cotidiana en
Inglaterra, así surgieron creaciones como la Casa Roja, construcción que se alejaba completamente
de la simetría impuesta hasta la fecha por lo neoclásico. El inmobiliario creado especialmente para
dicha construcción respetó la idea de que el propósito inspira la forma.
Retículas
El inicio de salirse de lo que era impuesto hasta entonces, repercutió en que el diseño tipográfico
y de libros también cambiase. Es el caso de Arthur Mackmurdo y su publicación The Hobby Horse
[ �884 ], que incorporó las mismás características: una distribución del espacio intencionadamente
proporcionada y un control cuidadoso de la selección y el cuerpo de la tipografía, los márgenes y la
calidad de impresión.2
Las siguientes publicaciones [ como The Works of Geoffrey Chaucer, de Morris ] comenzaron a
emplear recursos y su maquetación atendió a una estructura general predefinida que unificaba de
forma drástica las páginas y permitía una producción más rápida. Es decir la transición entre el
manuscrito medieval y la moderna maquetación y articulación de los elementos de la nueva página.
Este estilo evolucionó en otros países como:
+ Francia: pasó a ser más sensual y orgánico, conocido como Art Noveau
+ Alemania y Bélgica: más pictórico y arquitectónico, conocido como Judendstijil.
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.�5.
Apareció la tendencia de que el espacio es la esencia del diseño, en el que “las partes es al
todo, como el todo es a la parte, y que todos están comprometidos con un propósito concreto”.
Por lo tanto las relaciones de proporción y la organización asimétrica pasaron a ser principios de
referencia de lo que sería el movimiento moderno.
Se empezó a buscar la simplicidad funcional y evitar la ornamentación ya en �900. Un movimiento
que buscaba el orden y la unidad entre las diversas artes. Se comenzó a experimentar con
la maquetación de libros y con las nuevas fuentes sin remates. El primer libro que se publicó
con tipografía sin remate fue el “Celebration of Life and Art”, de Peter Behrens, sin embargo, su
composición de página siguió siendo al estilo manuscrito de Morris, pero desarrolla la retícula para
el uso de este género de tipografía.
50 / 51
“La textura de esta clase de tipografías, más uniformes, produce un efecto de neutralidad del texto
que enfatiza su forma en contraste con el espacio blanco que lo rodea, la ubicación de los bloques de
texto y los intervalos que separan dichos bloques adquieren así mayor importancia visual.”�
Beherens se dedicó al análisis de la estructura compositiva junto con Mathieu Lauweriks en �904,
quien desarrolló una aproximación metódica para la enseñanza de la composición, que se basa en
la división de un círculo mediante un cuadrado, lo que da como resultado una retícula de espacios
proporcionales.
Beherens en �907 creó la primera imagen corporativa industrial AEG, creando una tipografía
corporativa, esquemás de color, etc. Donde cada uno de los diseños se articulaban a partir de un
conjunto específico de proporciones que organizaban la presentación visual y así convertirla en un
todo armónico.
En Alemania luego de la primera guerra, se nombró a uno de los antiguos aprendices de Beherens,
llamado Walter Gropius, como director de la antigua escuela de Artes y Oficios de Weimar, quien la
rebautizó como Staatliches Bauhaus [ o Casa estatal de la Construcción ], lugar donde predominó el
racionalismo y la experimentación para crear un nuevo orden social.
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.�5.
Esta casa pasó primero por el expresionismo [ pintores como Johannes
Itten y Wassily Kandinsky y el grupo Blaue Reiter ], luego se influenció con
el movimiento De Stijil [ de Theo Van Doesburg ] que tenia por dogma
una estricta geometría. Cuando la sede cambio de lugar, a Dessau,
Laszlo Moholy-Nagy se incorporó al taller de tipografía, experimentando
con la maquetación asimétrica, el fotomontaje y los elementos de la caja
tipográfica llevando la expresión geométrica de la modernidad al ámbito
del diseño gráfico.
Lissitsky quien tuvo contacto con la Bauhaus publicó en �924 “The Isms of Art” publicación que
marca un antes y un después en el desarrollo del uso de las retículas. Separó por gruesos filetes el
texto corrido maqueteado en tres idiomás de forma paralela que organizó en columnas.
Según alineaciones verticales y horizontales dispuso las imágenes, pies de fotos y folios,
integrándolos en la estructura global.
El uso de la composición asimétrica, las tipografías de palo seco y la organización geométrica
de la información basado en retículas aún no estaba másificado dentro del diseño grafico; fue
un calígrafo llamado Jan Tschichold quien se encargó de la difusión de estas ideas reductoras e
intrínsecamente funcionales mediante una publicación [ “Elementare Typographie” ] que era dirigida a
impresores, tipógrafos y diseñadores teniendo gran acogida. En este inserto defendió el deshacerse
de los ornamentos, dar preferencia a los tipos de palo seco y crear composiciones basadas en
la función verbal de las palabras. Apoyándose en las ideas de la Bauhaus y de Lissitsky construía
las composiciones sobre un sistema de alineaciones verticales y horizontales, donde introdujo la
estructura reticular jerárquica para crear orden y espacio para las imágenes.
52 / 53
En el año �927, Tschichold codificó una estructura tal que el formato
de papel DIN [ Deutsches Institut für Normung, o Instituto Alemán de
Estandarización ] esta sustentado en ella.
Avanzados los años, la segunda guerra mundial y el nacional-socialismo
terminaron por cerrar la Bauhaus en �9�2, y los diseñadores y artistas
se vieron obligados a emigrar a América o bien a países neutrales como
Suiza que poseían centros culturales como Zürich y Basilea.
Max Bill uno de los emigrantes a Suizva continuó su desarrollo constructivista,
fundamentado en la medición matemática y la división espacial; su
contribución fue doble, por un lado la aplicación de la matemática a
proyectos de publicidad e identidad corporativa y en segundo lugar, la institucionalización de la retícula
mediante su colaboración en la creación de la escuela de Artes Aplicadas de Ulm [ Alemania ] en
�950, por ende las nuevas generaciones de diseñadores adoptaron la retícula.
En Zürich un grupo de editores intentó buscar solución para una expresión visual universal; en
su revista Neue Grafik transmitieron este estilo internacional a los demás países. Esta retícula contaba
con 4 columnas y � bandas horizontales o zonas espaciales, que organizaban tanto el contenido
como las imágenes. Además de la creación de un “módulo” [ unidad de espacio que al repetirlo
integra las partes de la página ], donde su anchura define le ancho de la columna y su altura define
la profundidad de los párrafos, vale decir, las filas.
Dentro del recién nombrado grupo de editores se encontraba Josef Múller-Brockman quien en �960
publicó “The Graphic Artist and His Design Problems”, y “The Grid Systems in Graphic Design”, libros
donde no sólo describe a la retícula sino prácticamente realiza un manifiesto acerca de ésta: “El
sistema reticular implica el deseo de sistematizar, de clarificar, el deseo de penetrar hasta llegar a los
elementos esenciales… el deseo de cultivar la objetividad más que la subjetividad.”4
En Basilea entre tanto, la Allgemeine Gewerbeschule [ o Escuela de Diseño de Basilea ]
contribuía al desarrollo del estilo internacional pero con una perspectiva diferente a la de Zürich, aquí
se estimulaba un método de composición intuitivo, basado en la forma simbólica y los contrastes
entre cualidades ópticas de la abstracción: claro / oscuro, orgánico / geométrico y curva / ángulo.
En �947 Emil Ruder se une como profesor de tipografía, él apoyaba el equilibrio entre forma y función,
explorando con rigor los matices de la tipografía y los contrastes ópticos además de utilizar estructuras
reticulares sistemáticas y generales, por ende contribuyó a másificar el uso de la retícula en los
estudiantes hasta que la misma se convirtiese en uno de los pilares del diseño moderno.
“La retícula tipográfica es una guía proporcional para texto, tablas, imágenes, etc. Es un programa
formal a priori para unos contenidos “x” desconocidos. El problema: encontrar el equilibrio entre la
máxima acomodación y la máxima libertad. O bien: el mayor número de constantes combinado con
la mayor variabilidad posible.”5
El uso de retículas comenzó a dominar el diseño estadounidense en los ´60, donde resultó
especialmente eficaz para la realización de programás comunicacionales que ayudasen a organizar
la imagen pública de las grandes organizaciones o empresas. Esto fue potenciado por la llegada de
estudiantes de las escuelas suizas y otros europeos que traían arraigada consigo el uso de la retícula.
Así nacieron diversos manuales con medidas definidas al detalle a modo de asegurar la uniformidad
visual en cualquier aplicación.
En Europa Mássimo Vignelli junto con su esposa, fundaron un estudio de diseño en Milán en �960.
Vignelli adoptó una perspectiva que se centraba en la segmentación del espacio de una retícula
modular en zonas semánticamente diferenciadas. Este sistema de división permitió centrarse más en
zonas concretas que integraban la estructura modular global y así esclarecer un material informativo
complejo. Al otorgar a estas divisiones horizontales una entidad visual, que adoptaba la forma de
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.�7� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.�9.
54 / 55
bandas sólidas, el ojo aprende a orientarse para encontrar información
específica.6 El potencio el diseño como un sistema global, y rechazó todo
impulso de expresión individual.
Ya a fines de los ´70 los diseñadores utilizaban la retícula como un fin “per
se” y exploraban el potencial visual de la forma en sí misma.
Solo en los ´80 y ´90 se volvió a experimentar de forma radical con
la retícula lo que condujo a investigar nuevos modos organizativos,
sobrepasando los límites de la estructura racional. Se habla entonces de
deconstrucción, que terminó siendo incorporado por la práctica
común, lo mismo que las rígidas estructuras reticulares y otros métodos
completamente antiestructurales, como el llamado diseño orgánico.
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gus-tavo Gili, 2004, p.�9
La retícula ha llegado a convertirse en una de las muchas herramientas
que los diseñadores pueden utilizar para alcanzar sus objetivos
comunicacionales. Aún en los ́ 90 se siguieron experimentando con nuevos
métodos organizativos derivados del estilo internacional, ayudados por la
proliferación de la revolución digital. Resulta impresionante el desarrollo
de la retícula durante los últimos �50 años, lo que al sumado a los nuevos
medios tecnológicos al servicio del diseño nos indica que el desarrollo de
ésta aún puede potenciarse durante muchos años más.Conclusión
Ya visto la evolución de la retícula en el desarrollo del diseño contemporáneo,
se hace necesario comprender su estructura y las partes que la forman.
Para ello la desglosaremos en sus componentes y daremos nombre a los
tipos más relevantes.
Una retícula es una forma de presentar conjuntos de imágenes, símbolos,
campos de texto, titulares, tablas de datos, etc. a fin de comunicar; vale
decir, la resolución de problemás tanto visuales como organizativos. Éstas
pueden ser flexibles y orgánicas o rigurosas y mecánicas.
Lo primero que ha de hacerse es valorar profundamente el contenido a
transmitir, tanto en lo visual como en lo semántico del espacio tipográfico,
esto porque la retícula es un sistema cerrado. Entonces ha de evaluarse si
es que hay diferentes tipos de información, que tan largos son los titulares
o con que tipos de imágenes se cuentan.
El espacio tipográfico se definirá como la relación entre las
partes y el todo, donde encontraremos que: la letra como núcleo forma
parte de la palabra y que estas a su vez, forman la línea, no sólo línea en
contenido, sino la línea de la página como elemento visual contenida en el
campo gráfico. Al colocar una línea sola dentro de un formato cualquiera,
se crea automáticamente una estructura, donde se definen dos áreas: un
espacio sobre la línea y uno bajo de esta. El conjunto de líneas formará
el párrafo, con un límite físico y visual, donde al estirarlo dará forma a
la columna. “Los espacios vacíos entre párrafos, columnas e imágenes
contribuyen a orientar el movimiento del ojo a través del material, así como
también la mása que constituye la textura de palabras a la que rodean.”7
Cuando los espacios vacíos entre los elementos son regulares, se crea
una composición8 estática. Por el contrario si se realizan cambios, como
un intervalo mayor entre las líneas o un cuerpo mayor, se enfatiza un
elemento de la composición, creando una nueva relación entre las partes
y el cerebro lo interpreta como de mayor importancia, jerarquizando así
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.�9� De componer. Según la RAE: Formar de varias cosas una, juntándolas y colocándolas con cierto modo y orden. Disponible en: http://www.rae.es/
Conceptos básicos de la retícula
la información. Para esta tarea es útil la retícula,
pues crea previamente la relación entre las
alineaciones y la jerarquía de los elementos.
Lo segundo es maquetear acorde con las
guías establecidas por la retícula. Es importante
considerar que aunque la retícula sea un sistema
cerrado, nunca ha de imponerse sobre los
elementos que se coloquen dentro de ella, sino
que su rol se limita a proporcionar un orden
global.
El análisis del material que se dispondrá nos
indica que existe una infinidad de problemás de
diseño según cada proyecto, y por ende cada
uno de ellos requerirá una retícula particular para
darles solución. Para ello se toma una retícula
básica que más se adecue a las necesidades y
que luego se ajustará según el proyecto.
56 / 57
Independiente de la complejidad de la retícula, todas comparten componentes básicos. Estas se
combinan en función de las necesidades o bien omitirse según lo estime el diseñador. Estas son:9
� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Edito-rial Gustavo Gili, 2004, p.25.
Componentes básicos
Existen cuatro tipos básicos de retícula construida, los cuales pueden
acomodarse y variar según las necesidades del proyecto. Estas son:
+ Retícula de manuscrito [ o de bloque ]:
Su estructura es la más sencilla, basada en un área grande y
rectangular [ o bien cuadrada ] que ocupa la mayor parte del formato
de la página. Su función es contener textos extensos y continuos,
como lo sería un libro. Creada a partir del antiguo texto manuscrito,
su estructura consta del bloque de texto y los márgenes que definen
su posición en la página y una estructura secundaria para los detalles
como: posición del folio, numeración de página y área para las notas
de pie de página.
Para este tipo de retícula ha de tenerse en cuenta: que la lectura
continua pueda leerse cómodamente, puesto que, el volumen de
tipografía es una composición pasiva y gris. Por lo tanto hay que
crear interés visual a fin de motivar a la lectura y evitar la fatiga del
lector.
Para ello existen formás de fomentar el interés visual como el juntar
las proporciones de los márgenes [ recordar que los márgenes
interiores de la doble página, deben ser mayores para evitar que el
texto desaparezca en el medianil ]. Asimismo, algunos diseñadores
se valen de una proporción matemática para definir el equilibrio entre
los márgenes y el bloque de texto. Esto porque, los márgenes más
anchos ayudan a centrar el ojo en el texto y generan una impresión
de calma o estabilidad.
Los márgenes laterales estrechos aumentan la tensión, porque el
espacio tipográfico se encuentra más próximo al borde de la página.
Los márgenes son por lo general simétricos, cuando no ocurre
ello, y se generan con diferente proporción, se añade espacio en
blanco donde descansar el ojo o bien un espacio donde colocar
notas o ilustraciones pequeñas que no se dan con regularidad, y que
por ende no ameritan una columna destinada a ello porque no se
articulan de forma constante con el bloque de texto.
Otro modo de generar interés, es la
diferencia en el cuerpo de la tipografía según
sea del bloque de texto o de la información
secundaria, modificaciones como el color,
el tamaño, la alineación etc. Lo que atribuye
a jerarquizar la información.Clasificación de retículas
58 / 59
+ Retícula de columnas: Esta retícula es más compleja que la manuscrita pues sirve cuando
hay información discontinua. Puede disponerse como columnas
independientes si se trata de pequeños bloques de texto, o cruzarse
para formar columnas más anchas, o bien cuando la información es
notoriamente diferente, se puede crear un tipo de columna para cada
información, pasaría a ser una retícula de columnas compuesta. En el
caso de que se presente texto corrido las columnas también pueden
depender unas de otras. Es una retícula flexible, que se presta para
separar diferentes tipos de información.
La anchura de las columnas depende del cuerpo de la letra del
texto corrido. Debe ser una anchura que resulte cómoda de leer en
una única línea, si es demásiado estrecha es probable que se den
muchas particiones de palabras, y si es demásiado ancha, al lector
puede que le sea difícil encontrar el principio de la línea consecutiva.
La anchura puede alterarse mediante el interlineado y el espaciado
del cuerpo de letra.
El medianil entre las columnas esta dado por lo
general con una medida “x” y a los márgenes
“2x”. Alteraciones como: márgenes más
anchos que el medianil entre las columnas,
hace que el ojo se dirija hacia el interior de la
página, evitando la tensión entre el borde del
formato y la columna.
En este tipo de retícula se aplican las líneas de
flujo, la más común es la que indica por la parte
superior el comienzo del bloque de texto [ define
el área entre el borde superior del formato de la
página y el comienzo del bloque de texto ]. Otra
común es la que indica en el borde superior
el lugar destinado a los folios, al número de
página o de división de sección, así como los
de pie de página para las citas.
+ Retícula modular: Esta retícula es, en esencia una retícula de columnas con un gran
número de líneas de flujo horizontales que subdividen las columnas en
filas, creando una matriz de celdas que se denomina módulos.�0
Estas al agruparse generan las zonas espaciales, a las que se les
puede designar una función específica de la información. El exceso
de módulos, no solo permite mayor flexibilidad, sino que puede
generar confusión y redundancia. Su proporción puede ser horizontal
o vertical que puede vincularse al tipo de imágenes que se vayan
a disponer. Al crearse los módulos, también ha de considerar los
márgenes y los medianiles entre ellos.
Esta retícula es apropiada para textos con información tabulada,
como cuadros, formularios, sistemás de navegación, etc. porque
estandariza el espacio de las tablas y ayuda a integrarlas a la
estructura del texto o de las imágenes con las que comparten el
campo gráfico.
Su origen se encuentra en el pensamiento racionalista de la
Bauhaus y el estilo internacional suizo que promueven el orden y la
objetividad.
�0 SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.28.
60 / 61
+ Retícula jerárquica: Estas retículas se adaptan a las necesidades de la información cuando
ésta no se adecua a ninguna de las otras retículas. Su construcción
obedece a la disposición intuitiva de las alineaciones respecto de las
proporciones de los elementos y no a intervalos regulares.
Se parte por evaluar la relación que los elementos tienen entre sí y
el efecto visual que provocado al disponerlos al azar en el campo
gráfico, para luego crear una estructura que los coordine. Este tipo
de retícula unifica elementos dispares.
Las páginas Web están generalmente creadas a base de este tipo
de retícula, sufriendo ajustes cuando la ventana del navegador se
altera, por ende requiere de gran flexibilidad.
La retícula jerárquica es la forma más cercana al diseño orgánico,
por la manera en que se ordena la información y los elementos que
la integran.
Estas clasificaciones o tipos de retícula, no
implica que el diseño se vuelva aburrido, por
el contrario, el diseñador ha de ser capaz de
no someterse frente a una regularidad, y ha de
mantener el dinamismo y el interés visual. La
retícula como una estructura contenida en el
nivel más profundo de la maqueta, no habrá
de imponerse frente al contenido. Para ello es
útil la realización de maquetas en pequeño
tamaño que nos entregue una idea de cómo se
comportan los contenidos página tras página y
así realizar los ajustes que sean necesarios.
Como se mencionó anteriormente la deconstrucción de la retícula se le reconoce explícitamente
a fines de los ´60 como un modo radical de experimentación en cuanto a lo organizativo, saliendo
drásticamente de la metodología tradicional y de lo racionalista del estilo internacional.
Llamado también diseño orgánico, este cambio fue ayudado por la propagación de las tecnologías
y su másificación.
Para entender que significa el término deconstrucción, recurriremos a su definición según la RAE:
+ Deconstrucción: Acción y efecto de deconstruir. // Desmontaje de un concepto o
de una construcción intelectual por medio de su análisis, mostrando así contradicciones y
ambigüedades
+ Deconstruir: Deshacer analíticamente los elementos que constituyen una estructura
conceptual.
El término deconstrucción fue generalizado por el postestructuralista Jacques Derrida el cual
consiste fundamentalmente en mostrar cómo se ha construido un concepto cualquiera a partir
de procesos históricos y acumulaciones metafóricas, mostrando que lo claro y evidente dista de
serlo��. Principalmente este término nace de la filosofía y de la literatura, y corresponde a una
traducción del alemán destruktion [en vez del literal “destrucción”], porque no se trata de la
reducción a la nada.
Durante el siglo XX el diseño estuvo influenciado por una tendencia más racionalista, cuya razón fue
que los aspectos pragmáticos y racionales del diseño ayudan a los clientes a comprender y a confiar
en el diseño como recurso. Pero como toda corriente surgieron pensamientos contradictorios.
La difusión de las nuevas tecnologías, potenció el desarrollo de métodos de composición alternativos
e intuitivos, que sobresalen en el diseño actual. Es un periodo en el que se alienta la exploración de
lo absurdo y lo primitivo en el arte y el diseño tal como lo hicieron las publicaciones de Freud.
Paralelo al desarrollo de la retícula, se presentó un panorama diferente: aparecen tendencias como
el “art noveau” que fomenta lo sensual de una imaginería vegetal, lo individual y lo orgánico; la
agresividad del expresionismo; la exploración del subconsciente y los estados oníricos así como
lo absurdo del lenguaje por parte del dadaísmo y del surrealismo. Cabe recordar que estos
movimientos nacieron como reacción a la Primera Guerra Mundial.
�� Disponible en: http://es.wikipedia.org/wiki/Deconstrucci%C�%B�n
Deconstrucción de la retícula
62 / 63
Entre los que se destacan están Marcel Duchamp,
quien partió como pintor cubista para luego
pasar al simbolismo y los juegos lingüísticos.
Fundió el lenguaje y lo explosivo en los poemas
dadaístas, así como sus carteles sin sentido en
los que las palabras no se correspondían con
ningún significado explicito. En este movimiento
las palabras y las letras son imágenes de estados
emocionales o psicológicos y su expresión
emana de las disposiciones visuales agresivas
que representan estos estados.
Schwitters es uno de los diseñadores del siglo
XX que ayudaron a asimilar e institucionalizar
las perspectivas no racionales en el diseño, en
especial en la tipografía, junto con las que iban
desarrollando los estructuralistas racionales�2.
�� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Edi-torial Gustavo Gili, 2004, p.���.
Lo mismo sucedió con el futurismo donde
Marinetti utilizaba tramas de letras repetidas para
transmitir ideas de sonidos y movimiento.
Otra representación fue el “collage”, basado en
el cubismo creó relaciones dinámicas donde se
acentuó el azar en la percepción del significado.
Un artista destacado en ello fue Kurt Schwitters,
que ayudó tanto a crear sistemas reticulares
como sistemas irracionales, de allí sus carteles
con recortes tipográficos en collage.
Este fenómeno también se dio en instituciones
como la Bauhaus, lugar en el que exponentes
como Johannes Itten [ junto con Kandinsky
] contribuyó en potenciar la exploración en la
creación de marcas personales dentro del
plan de estudio. Experimentos en el taller de
tipografía en el que dictaba clases, incorpora
la composición pictórica, no rectilínea y el uso
de elementos de la caja tipográfica [ como las
líneas de plomo ] para potenciar visualmente;
un resultado de las páginas estructuradas de
manera intuitiva fue su publicación “Utopía” el
año �92�.
Paralelamente se desarrolló en los Países Bajos,
particularmente en Holanda, un diseño con
otra perspectiva, diseño que destaca por las
formas simbólicas y abstractas. Un exponente
es Piet Zwart, quien fusionó lo simbólico con
los colores primarios propio del movimiento De
Stijl, la composición dinámica del dadaísmo y
el futurismo.
Uno de los trabajos más destacados fue el desarrollado para la empresa
NKF, en el que combinó lo estructural y lo intuitivo para proyectar el
contenido del catalogo.
64 / 65
Luego de la segunda guerra Mundial, hecho que repartió a los diseñadores
por Europa, y acrecentó el espíritu critico, sobre todo de los fundamentos
del diseño; en Basilea Emil Ruder, como profesor de tipografía, se centro
en un diseño inspirado en posiciones estructuradas, pero la combinó con
la imaginería para dar énfasis.
Mezcló con libertad los pesos tipográficos, inclinaciones y cuerpos a modo
de conseguir una representación semiótica del lenguaje. Un resultado es
su libro “Typography”.
Este principio semántico de la tipografía condujo
a la aparición de trabajos deconstructivistas
dentro de sus estudiantes y como en sus propios
trabajos. Vale decir, favoreció a preparar el
terreno para la deconstrucción de la retícula en
el contexto de la estética racional del diseño
gráfico estructuralista. En medio de la metódica
eficiencia del estilo internacional; la búsqueda de
expresión basada en experiencias y narrativas
personales se vio impulsada por el “rock and
roll” la revolución sexual y ascenso de la cultura
popular de los jóvenes.��
Fue el redescubrimiento del modernismo, nacen
lenguajes y contra-movimientos dentro del diseño
como los carteles psicodélicos. Estas tendencias
prevalecieron durante los ̀ 60 y ̀ 70, pese al estilo
internacional.
�� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.��4.
En Basilea por ejemplo destacó Wolfgang Weingart quien recurrió a la
impresión accidental, como las líneas de plomo para separar las líneas
tipográficas entre sí.
Aunque marcó una gran diferencia ya que en su perspectiva retomó la
idea de composición visualmente semántica [ tipografía que basa su
forma visual en la estructura verbal de las palabras que representa ] pero
llevándola más allá de la presentación funcional a la que aspiraban artistas
como Ruder, para llegar a un punto de vista personal.
Al destacar grupos de palabras cercanas con
áreas en negativo, se crean frases secundarias;
cuando se rellena el espacio vacío de un texto
justificado a la izquierda, agrega impacto a la
página; lo mismo que crear combinaciones
de formas tipográficas o espaciarlas de forma
intencionada.
Como resultado Weingart agregó más potencia
visual mediante la deconstrucción, dando más
relevancia al contexto a la hora de optar por la
retícula o por un sistema alterno.
Estudiantes de todas partes del mundo se vieron
influenciados por su particular punto de vista. La
organización y el tratamiento del material visual
son controlados por la intuición y por una reacción
directa y visceral frente a sus características
ópticas y conceptuales�4. Entre los estudiantes
se encontraba April Greiman, estadounidense
que fue a Basilea a adquirir conocimientos y
que terminó como muchos siendo profesora
�� SAMARA, Timothy. Diseñar con y sin retícula. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Editorial Gustavo Gili, 2004, p.��5.
66 / 67
en Estados Unidos, tanto en escuelas como la
de Philadelphia Collage of Art y Carnegie Mellon
como en Nueva York y Los Ángeles, masificando
los conocimientos a otras partes del mundo.
Ya en �970 diseñadores como Katherine
McCoy, que trabajaba con el estilo internacional
minimalista suizo, comenzó a impartir clases en
Cranbrook [ escuela de Michigan ], pero se tuvo
que adecuar al espíritu experimental de la casa
de estudio, cuestionando así el sistema reticular.
“Learning from Las Vegas” (�972), una de sus publicaciones, amplió
la forma de acercar el diseño al publico local, y en vez de rechazar
expresiones visuales chillonas y populares las utilizó para lograr una
conexión más personal.
Durante �97� y �984 se adoptó el término deconstrucción para
describir aquello que constituía el objetivo de aquellos experimentos:
desmontar las estructuras preconcebidas, o bien utilizarlas como punto de
partida para encontrar nuevas formas de establecer conexiones visuales y
verbales entre las imágenes y el lenguaje.
La segunda revolución industrial también afectó de manera notoria la
forma de experimentar la organización de los elementos en el campo
grafico y su interacción entre sí. El nacimiento del ordenador personal en
�984 por Apple Computers, revolucionó las alternativas del diseño.
Tanto el diseño estadounidense como el holandés,
que se había caracterizado por ser un campo
de pruebas para las innovaciones visuales,
no sólo acogieron los avances tecnológicos
y teóricos sino también a la gran cantidad de
estudiantes provenientes de las escuelas de
EEUU. Un ejemplo es David Carson, quien no
estudio nada referente al diseño, pero gracias
a sus maquetas improvisadas hechas de un
modo intuitivo situaba los elementos que tenían
más que ver con la interpretación del contenido
que con una forma racional o imparcial de
organizarlo. Carson recurrió al ordenador para
componer los textos y experimentar diversas
posiciones, superposiciones tipográficas y
efectos que hubiesen sido imposibles de hacer
sin el ordenador.
Por ejemplo en su revista “Raygun”, no existe
ninguna estructura global, pese a ello existen
elementos que relacionan un número con el
siguiente. Existe una constante destrucción de la
conformidad de todas las páginas lo que define
un sistema identificable, a pesar de la carencia
de una estructura reticular.
Hoy sigue adquiriendo importancia el método impulsado por la experiencia,
en su condición de ser un método viable para el diseño, porque esta
centrado en el destinatario para organizar la información. Este y los otros
métodos descritos anteriormente amplían la baraja de alternativas que
puede optar el diseñador para el mejor desarrollo de cada proyecto en
particular.
68 / 69
La decisión de utilizar o no una retícula depende
básicamente del contenido del proyecto, y
muchas veces ese contenido no se adecua
a ningún tipo de retícula preestablecido, o
bien, muchas veces el contenido tiene que
abandonar todo tipo de estructura para transmitir
determinadas reacciones emocionales.
La capacidad del público para recibir información
se ha vuelto paulatinamente más compleja con
el tiempo, esto debido al constante bombardeo
de información. Hoy es entregada de un modo
más ágil que antaño, en que se intercalan
superposiciones de información así como la
cinética propia de algunos medios, lo que
hace que el público se adiestre a una mayor
complejidad.
Por lo mismo los diseñadores han de agregar
un mayor esfuerzo por generar emociones
significativas que puedan competir con este
cinético mundo visual, y para ello se hace
necesario la experimentación de nuevas formás
de organización.
La finalidad de “deconstruir” es desmontar un
espacio racionalmente estructurado de modo
que obligue a los elementos que se encuentran
en él a establecer nuevas relaciones entre sí.
Para ello no existen reglas específicas para
ello, pudiendo alterar una estructura en infinitas
formás. Lo más común es “recortar” ciertas
zonas y desplazarlas en diferentes direcciones,
alinearlas con otros elementos a modo de
generar nuevas conexiones, cambiar el cuerpo
o la densidad de textos, etc.
Cómo deconstruir una retícula
Una estructura reticular convencional repetida
puede utilizarse para analizar un espacio
arquitectónico más dinámico, mediante la
creación de diferentes ejes de alineación.�5
Algunos métodos para la deconstrucción dentro
del campo grafico serian:
Deconstrucción lingüística:Un modo es seguir el ritmo natural del
lenguaje hablado para dar énfasis y dar peso
a ciertos tramos. Como por ejemplo, una
palabra pronunciada con voz más alta puede
componerse con una tipografía que enfatice su
estado, pudiendo ser en negrita, cursiva, etc.
o tratar ciertas palabras para crear estructuras
secundarias con ritmos orgánicos.
�� SAMARA, Timothy. Diseñar con y sin retícu-la. Título original: “Making and Breaking the Grid: A Graphic Design Layout Workshop”. Barcelona. Edito-rial Gustavo Gili, 2004, p.�22.
Composición óptica espontánea:Se la puede definir como la disposición intencionadamente intuitiva de material en función de sus
aspectos formales, vale decir, estar conciente de las relaciones y los contrastes inherentes a un
material determinado. Guarda cierta relación con el “collage”, y tiene una estructura que depende
de las tensiones ópticas de la composición y de su conexión con la jerarquía informativa que existe
dentro del espacio.
Por el gran espectro de piezas que puede abarcar este concepto, agregaremos dentro de esta
categoría dos subcategorías que se relacionan directamente:
+ Alusión conceptual o pictórica:Otra forma para componer, consiste en llevar una idea visual
del contenido y aplicarla al formato de la página; alude a una
representación ilusoria de un tema dado.
+ Operación aleatoria: Realizar una operación aleatoria implica que el azar está siendo
controlado en cierta medida, por ejemplo, aumentar el cuerpo de
la tipografía escogida para una composición sin ajustar su posición
inicial puede dar lugar a una composición de tipo orgánica.
70 / 71
conc
lusi
ón in
vest
igac
ión
72 / 73
Dentro del análisis comprendido en el marco teórico se abordó en primer lugar lo referente a la
educación, de aquí se desprende que el conocimiento es el capital intangible del futuro, donde la
Universidad debe ser uno de los principales agentes que produzcan conocimiento, y por sobre todo,
que ha de saber cómo gestionarlo, aprovecharlo y convertirlo en una ventaja competitiva.
El incorporar la educación a los medios digitales y a las TIC, siempre que se tenga un buen desarrollo
e investigación, puede lograr llevar a la docencia a un mayor nivel, fomentando el rol de estudiante
activo dentro de su propio aprendizaje, lo que se traducirá en la formación de mejores profesionales.
La tecnología disponible, hace posible que la computación haya dejado de significar sólo informática,
constituyéndose hoy como acceso e información, y que además permite dar recursos al aprendizaje
que otros medios en este caso no alcanzan a ofrecer.
Hoy la información dentro de la Universidad se encuentra dispersa y respecto del tópico “diagramación
mediante retículas” es más difusa aún, existiendo escasos referente dentro de la literatura disponible
en la biblioteca de la facultad y por consiguiente las oportunidades de aprender de este tema se
limitan.
Es así como dentro del apartado de multimedia y diseño Web, podemos concluir que es este, un
medio propicio para ser un soporte que no sólo aporta en su alcance como medio, sino que se
constituye como un soporte comunicacional factible de ser utilizado para los fines académicos. Este
medio ofrece un excelente acceso asincrónico, permite una fácil actualización y ampliación de los
contenidos y la interactividad que proporciona crea mejores experiencias con el usuario.
La multimedia involucra utilizar varios sentidos, varios canales, al igual que la comunicación entre
personas, esto ayuda a una mejor comprensión e involucra más al usuario dentro de la experiencia que
se gesta a través de la interfaz gráfica. Por lo tanto, para la parte proyectual no sólo hay que considerar
elementos formales que hagan funcional un módulo de aprendizaje, sino que la comunicación visual
es sumamente relevante para lograr una comprensión más óptima. Es este el rol del diseñador como
comunicador visual, de adaptar el contenido y los conceptos a una realidad local.
Se propone entonces, un módulo Interactivo para que los estudiantes de diseño accedan de manera
rápida, fácil y permanente a información como lo es la “diagramación mediante retículas” y que apoye
la clase presencial de diseño editorial. Es una propuesta para enseñar el diseño gráfico, a los futuros
profesionales del siglo XXI, incorporando las herramientas y los medios digitales del siglo XXI.
capítulo IIIAnálisis Estratégico
FODA
y ti
polo
gía
A continuación se presentará un FODA que contempla algunos puntos respecto de la Universidad
de Chile que nos serán de utilidad para analizar la viabilidad del proyecto.
FODA: Fortalezas:+ Poseer un grupo objetivo claro y que nos pueda proporcionar la información necesaria para la
elaboración del material.
+ El grupo objetivo adopta fácilmente nuevas tecnologías e innovación y está en constante
búsqueda de nuevas tendencias en la adopción de conocimiento.
+ Se suma la comodidad que ofrece la búsqueda en el soporte Internet, sobre soportes
tradicionales.
La aplicación al ser proyectada hacia la plataforma de educación a distancia perteneciente a la
facultad nos permite:
+ Contar con un espacio para su implementación dentro del servidor de la Universidad de
Chile.
+ La plataforma en la que será incluido el prototipo posee foros y, al ser on-line, permite generar
discusión a favor de mejorar y actualizar la aplicación multimedial.
+ La plataforma al ser multimedial y on-line, permite una mayor interacción, retroalimentación y
comunicación que otros medios respecto del aprendizaje que se plantea.
Oportunidades:+ Fomentar la generación de futuras aplicaciones e-learning.
+ Contribuir al material educativo como oferta y valor agregado a la carrera de Diseño de la
Universidad de Chile.
+ Bajo costo en producción y mantención, respecto de otro tipo de soportes educacionales.
+ Creciente digitalización del público objetivo.
Dentro de las oportunidades que ofrece la Universidad de Chile están:
+ El crecimiento que se espera en el futuro en el campo de investigación, la creciente
globalización y el desarrollo de las tecnologías de información.
Debilidades:+ La heterogeneidad de los individuos que conforman la escuela es muy amplia, en particular
la brecha entre alumno-profesor.
+ El grupo objetivo utiliza tanto la plataforma Mac, como PC, por lo que la aplicación ha de ser
compatible con ambas plataformas, lo que podría limitar la tecnología ha utilizar.
+ Carencia de referentes activos dentro de la Universidad en cuanto a aplicaciones multimediales
educativos.
FODA
Dentro de las debilidades que tiene la Universidad
de Chile están:
+ La escasa integración entre unidades
académicas.
+ El desarrollo desequilibrado entre algunas
disciplinas.
+ La rigidez interna en la asignación de
recursos.
Amenazas:+ Que los mismos referentes como moodle,
terminen contagiando el resultado grafico
del proyecto.
78 / 79
En esta unidad se mostrarán una serie de sitios Web relacionados con el tema a desarrollar.
Lo que nos permitirá analizar las gráficas existentes y determinar si existen patrones comunes.
Además si la aplicación será incluida dentro de una plataforma de aprendizaje a distancia, ha de
considerarse su gráfica y códigos que posee, para saber si es que hay que considerar alguna
normativa para la parte proyectual.
La distribución de la información esta dada por la jerarquía generada por
bloques, siendo el más importante el del centro, el que está reforzado por
un cuerpo tipográfico en bold. Se le suma un “menú de categorías” de
gran interés para el usuario en este sector. Su cromatismo es incluso de
mayor atracción que el cromatismo del imagotipo de la Universidad de
Chile [ deficiencia en la jerarquía visual, puesto que el imagotipo intenta
ganar importancia sólo en base a su tamaño ].
A los costados:
+ Bloque a la izquierda: 2ª jerarquía:
1 Información del usuario que ingresa.
2 Un menú principal [ que no esta reforzado gráficamente y que
pasa desapercibido como tal ].
3 Zona de búsqueda.
4 Se repite el “menú de categorías” pero en tipografía regular, por
lo tanto de menor importancia visual. En este caso la reiteración
no es relevante, y pasa a constituirse como ruido visual.
+ Bloque a la derecha: 3ª jerarquía: información menos relevante.
1 Calendario
2 Usuarios en línea: sirve aparentemente solo para el Chat.
3 Links.
El Imagotipo “Universidad de Chile” está presente en la zona superior, al
costado derecho del imagotipo de MOODLE. Su cercanía produce una
competencia de importancia entre los logos.
Tipología Existente
MOODLE FAU
http
://w
ww
.fau.c
l/mod
le/
Gama cromática:Está dada por colores básicos que vienen por defecto en el programa. El color de fondo es un gris
claro, en dos tonos, más un marco amarillo anaranjado para segregar los bloques. Se suma la
presencia de diversos iconos que vienen por defecto en el programa.
+ Tipografías: orden de importancia dada por: Rojo y azul en bold para el texto más relevante;
Azul en tipografía de bloques de texto regular y Negro: para texto de apoyo.
+ El imagotipo está compuesto por colores básicos relacionados con la facultad.
El color de fondo es amarillo anaranjado en baja saturación, que guarda relación con el color
de las paredes externas de la facultad. Su tipografía “UNIVERSIDAD CHILE” es clásica, posee
serifas, está en mayúsculas y en color negro, se puede inferir que esta relacionada con la
tipografía de la fachada de la facultad. La palabra “de” en tono verde, ha de tener relación con
el verde del edificio de diseño presente en la facultad y para enfatizar su diferencia la tipografía
mayúsculas pero de menor cuerpo y más condensadas. Por ultimo se presenta una franja
donde se sitúa la fecha y la hora de ingreso, en un color gris claro que sumado al fondo dan
poca legibilidad.
Como se aprecia el orden de los elementos guarda relación con lo funcional de la página, más que
al atractivo visual que pueda generar.
80 / 81
2ª Página:Menú principal en el centro.
Desaparece el menú desplegado anterior para acceder a otras
categorías [ se presenta ahora en forma de pestaña ]. Lo que convierte la
navegación en no lineal y donde hay más de un recorrido para acceder a
la información, afirmando el estilo constructivista de la aplicación.
En la barra superior se presenta un recorrido de la dirección que se lleva,
donde las palabras que la componen funcionan como botones para
hacer saltos de página.
Gráficamente se mantiene la estructura básica de la página.
3ª Página:Los cursos presentados a modo de lista, gráficamente no se diferencian.
Tampoco hay presencia de elementos representativos de los contenidos.
La página se utiliza más para el envío de archivos por parte de los alumnos,
que para la entrega de nuevo material por parte de los profesores.
Se presenta una nueva estructura a la predeterminada, donde se cambia
el color de fondo y se le da mayor importancia al logo “Arcis en línea”.
Existe relación entre el fondo y logo, los que se apoyan cromáticamente.
La barra de acceso y la zona de búsqueda no se pierden visualmente. La
distribución de la información también es por bloques, pero se eliminan
los bloques de información innecesarios como el de calendario o el
de usuarios en línea presentes en el index. Por lo tanto se segrega la
información más claramente. El menú “categorías” se presenta desde un
inicio en forma de pestaña, dando así un mayor orden visual. Además otro
punto importante es que no se ocupa el scroll en la pantalla.
Respecto a la Tipografía: para diferenciar el menú del resto de los bloques
de texto, se utiliza un mayor cuerpo tipográfico.
Arcis en línea
http
://a
nt.ua
.cl/m
oo
dle
/co
urs
e/c
ate
go
ry.p
hp
?id
=7
El banner superior presenta el logotipo al costado derecho de la pantalla,
a diferencia de todos los otros ejemplos. Corresponde al logotipo de la
universidad y no a uno hecho para efectos del moodle.
El cromatismo utilizado es en base a grises y tipografías en un rojo de baja
luminosidad. Las jerarquías están dadas por el cuerpo del texto. Y la distribución
de la información similar a las anteriores.
Se presenta el logotipo de “MOODLE” en la parte inferior como pie de
página.Universidad
Adolfo Ibañez
http
://w
eb
curs
os.
uai.c
l/doc/
82 / 83
Misma disposición que las paginas anteriores,
pero utilizando cromatismos en color amarillo
anaranjado en su totalidad.
Universidad Tecnológica
Metropolitana Esta plataforma responde a una gráfica y navegación funcional, donde su
estructura es estática y simple. Posee un menú principal siempre ubicado
al costado izquierdo de la pantalla, un logo central e información del
usuario en el costado superior derecho del banner.
El contenido se despliega en un bloque central de la pantalla donde
predominan los hipervínculos dentro de la navegación. Cabe destacar que
carece de iconos o botoneras no textuales.
http
://146.8
3.1
81.2
1/a
lis
U-Curso escuela Ciencias Físicas y
Matemáticas, Universidad de Chile
http
s://u
curs
os.
ing
.uchile
.cl/i
ng
enie
ria
/
Todos se citan por su utilidad, donde se recopilan
todas las aplicaciones educativas dentro de la
Pontificia Universidad Católica de Chile. Estas
se clasifican por nombre y temática, lo que
facilita su búsqueda y acceso.
“Pensamiento Pedagógico” posee una
estructura cerrada [ requiere de login y
password para ingresar ], ya que ocupa formas
de evaluación.
Las demás aplicaciones son bastante estáticas
en cuanto a estructura gráfica se refiere. La
disposición del contenido siempre es un bloque
central y con un menú principal al costado
izquierdo de la pantalla. Y al estar hechos en
html, se generan [ excepto en la portada ]
bloques de texto muy extensos.
Para hacer la diferencia de las aplicaciones se
generan portadas distintas según la temática,
sin embargo todas comparten la carencia de
iconos o botones no textuales, lo que nos indica
que en temas educativos complejos, se hace
difícil la iconización de algunos términos que
son de más fácil entendimiento mediante la
palabra.
CONCLUSION
APLICACIONES EDUCATIVAS
http
://w
ww
.puc.c
l/sw
_ed
uc/c
ata
log
o/h
tml/f
ram
e.h
tml
El análisis de todas las páginas nos indica que las gráficas aplicadas en las plataformas moodle,
tienen mayor relación con lo funcional de la página, y no tanto al atractivo visual que se puede generar
para mantener la atención de los visitantes. Además del despliegue plano de la información y el
escaso apoyo gráfico que se expone acerca del contenido.
Sin embargo es en la Pontificia Universidad Católica donde podemos apreciar aplicaciones de las TIC
en las materias impartidas por la casa de estudio, ayudando así al proceso de enseñanza / aprendizaje.
Sin embargo la mayoría de dichas aplicaciones educativas son hechas mediante interfaces pobres
[ tanto gráficamente como de navegación ], y es por ello que la disciplina del Diseño mediante su rol
comunicacional que, asociado a un equipo de docentes, puede generar soluciones reales y efectivas
a proyectos de Informática Educativa.
84 / 85
capítulo IVDefinición del Proyecto
defin
ició
n de
l pro
yect
o
Marco Conceptual
Para el desarrollo del proyecto, se determinan seis grandes etapas, la primera es delimitar el marco conceptual, para luego desarrollar una Propuesta de Diseño - imagen de marca que nos permita identificar el contenido del módulo. Las siguientes etapas del Módulo
interactivo de consulta permanente como apoyo a la clase presencial de diseño editorial son:
+ Definición y Planteamiento del sitio Web.
+ Arquitectura de la información del módulo.
+ Diseño del módulo.
+ Proyección del módulo.
Definición
del Proyecto
Como ya se expuso, existe la necesidad de que las asignaturas de la Escuela de Diseño y de la
Facultad en general, se unan a las nuevas tecnologías; de aquí nace la importancia en mejorar la
eficiencia, el desarrollo y las instancias de entrega de contenidos a través de las TIC [ Tecnologías de
la Información y Comunicación ] imprescindibles al momento de integrar la gestión del conocimiento
dentro del proceso de enseñanza / aprendizaje actual. Al proponer el proyecto como apoyo a la
clase presencial, se admite el desafío en la búsqueda de la optimización de la entrega de los
contenidos como una herramienta de conocimiento, y en torno a esto ha de generarse el diseño
del proyecto.
Los conceptos son extraídos tanto por la metodología de enseñanza vivida [ experiencia de
estudiante ], como por lo analizado en el marco teórico anterior, sumando lo observado durante
el periodo de monitorias que he llevado dentro de talleres de primero en la escuela, las que
se plasmarán un resultado funcional y gráfico, que aproveche las tecnologías existentes. Estos
conceptos son:
+ El primer concepto responde a los códigos visuales con los que un diseñador [ y particularmente
el estudiante de diseño ], se puede dar a entender en una primera instancia. Es el cómo el diseñador expresa por primera vez las ideas que tiene en mente, vale decir cómo se enfrenta al blanco.Dentro de esta experiencia del “cómo enfrentarse al blanco”, se pueden observar a modo de
representación: al boceto� y el croquis�. Sin embargo para ser entendidos por un espectro
� Proyecto o apunte general previo a la ejecución de una obra // Indicar con alguna vaguedad un con-cepto o plan.� Diseño hecho sin precisión ni detalles. // Diseño ligero de un terreno, paisaje o posición militar, que se hace a ojo y sin valerse de instrumentos geométricos.
88 / 89
de estudiantes más amplio ha de depurarse el trazo del boceto a mano alzada, para pasar
a uno más limpio y que no produzca ruidos visuales innecesarios para la comprensión del
contenido, pero que respete la intención inicial del mismo.
+ Concepto central a desarrollar: “desordenadamente ordenado / ordenadamente desordenado”. Resume la intención de la grilla construida
como la deconstruida y su aplicación en piezas de diseño.
+ Dinamismo: la interfaz gráfica poseerá elementos que representarán de forma directa
a las grillas ya que son el contenido a presentar. Dichas grillas han de crear un recorrido para
los elementos de la pieza gráfica, generando una interacción entre ellos. De aquí se puede
obtener tanto un diseño estático como dinámico visualmente. En este caso el soporte Web
nos permite poder reflejar e intensificar el dinamismo necesario para mantener la atención del
usuario.
Además se puede crear una retroalimentación dada por instancias de comunicación como
los Foros o Chat que ofrece el soporte del módulo de aprendizaje como lo es el moodle o
U-curso.
+ Modernidad: aunque el diseño este en constante innovación y renovación de si mismo,
que es básicamente la motivación de todo diseñador, de conocer tanto las tendencias como
hacia donde se dirige hoy en día, no hemos de obviar la historia del mismo y sus orígenes.
Este concepto se apoya en la vanguardia que ofrece la comunicación global que provee
Internet.
Una cuota de actualidad puede estar dada por la incorporación de nuevos elementos que
apoyen la materia, tales como piezas gráficas de alumnos de pregrado, como de profesionales
y que se incorporen para nutrir la galería de ejemplos que ayuden a la comprensión del
contenido.
+ Calidad del contenido: Para dar mayor validez a la información que se expone,
han de considerarse la incorporación de elementos que la respalden, como lo es el nombre
de la universidad y de la facultad de donde se genera este material. Considerando las normas
corporativas de estos.
+ Cromatismo: para no extender este tema, se han tomado una serie de decisiones que es
expondrán a continuación, las que se respaldarán de manera que no lleve a una connotación
antojadiza en su uso.
Se utilizará el color rojo para las zonas de importancia, dado por su preganancia y el nivel de
recordación que crea el rojo sobre el blanco, lo que es adecuado para elementos de aprendizaje
que han de ser recordados. En este caso el rojo corresponderá a su valor más puro.
Este color rojo se apoyará en elementos que utilicen una escala cromática de grises, en diferentes
tonos hasta llegar al negro. La elección monocromática para la mayoría de la superficie a diseñar
ha sido elegida porque es congruente con el color del grafito que se utiliza usualmente en la
elaboración de bocetos. Esto concuerda con el concepto de “cómo enfrentarse al blanco”.
Como se mencionó se respaldará el significado de la elección cromática, mediante una literatura
acorde a ello:
ROJO:�
“Se sabe que el rojo estimula el sistema nervioso y alerta los sentidos en proporción a la amplitud
de la exposición.”
Un juego de ilusión óptica de su aplicación: El cuadrado rojo sobre fondo blanco parece más
pequeño que el enmarcado en negro. El rojo inserto e un color oscuro parece más claro y, en
consecuencia, parece ocupar un área mayor, mientras que los márgenes pálidos tienen el
efecto opuesto.
En combinación con el blanco y el negro, el rojo aporta profundidad y movimiento. Además, no
sólo refleja la vitalidad y la tensión que se quiera lograr, sin dejar de lado la elegancia del mismo.
Y en combinación con el blanco crea una imagen tersa y limpia.
Hay asociaciones universales independientes del carácter político al que se le asocie el rojo,
como lo son; el calor, la sangre, la emoción y el peligro. Al mismo tiempo el rojo puro [ como
color primario ] compatibiliza indistintamente de la edad y del sexo.
Por ultimo el libro se hace mención que al aplicarlo en un logotipo se introduce una nota
contemporánea a este.
� El libro del rojo, Russell, Dale, biblioteca del color, �990, Editorial Gustavo Gili, S.A., Barcelona ISBN 84 – �5� – �436 - X
90 / 91
BLANCO Y NEGRO:�
El gris es acromático y se ve influido por los colores más dominantes., además depende de
la línea o de la trama. Un ejemplo de ello es que el gris teñido de magenta hace resaltar con
suavidad la fuerza del rojo, en contraste con el negro sobre un fondo blanco.
Al igual que el rojo, el negro tiene una connotación de sofisticación y sexualidad. El blanco por
su parte, puede expresar también la simplicidad y una limpia sofisticación, elegancia y eficiencia
funcional. El gris en cambio, tiene connotaciones de sentido común, sosiego y sobriedad. Su
neutralidad intrínseca se presta en el diseño a una aplicación minimalista del color.
+ Formas predominantes: las retículas no sólo se encuentran en el diseño editorial,
sino que están presentes en elementos del cotidiano. Para graficar esto, es factible recordar
juegos como el clásico “gato” cuya estructura ortogonal reprodujimos infinitas veces cuando
niños, e inclusive observar los mismos elementos del edificio de Diseño; a modo de ejemplo,
el uso de diagonales, elementos sólidos y elementos creados por la unión de líneas [ ej: rampa
se constituye por la superficie creada por la reiterada posición de listones paralelos de madera,
ventanales creados por la ortogonalidad de la estructura metálica que soporta los vidrios, etc.].
Combinando la claridad, lo moderno, el cromatismo y los otros conceptos que se quiere
transmitir, se optará por un enfoque más bien minimalista en el desarrollo de las formas. Es
así como se utilizará un juego de líneas visualmente simples, necesarias para crear series
de retículas dadas tanto por su ortogonalidad, como por su diagonalidad al momento de su
deconstrucción.
� El libro del blanco y negro, Russell, Dale, biblioteca del color, �990, Editorial Gustavo Gili, S.A., Barcelona ISBN 84 – �5� – �436 - X
Público Objetivo
Corresponde a 3 tipos de usuarios:
�. Estudiantes de pregrado pertenecientes a la carrera de Diseño Gráfico de la Universidad de
Chile, FAU.
Al ser este el grupo más específico al que va destinado la creación del módulo interactivo en
apoyo a la clase presencial, se le constituirá como el Grupo objetivo del proyecto.
�. Equipo docente de la carrera de diseño Gráfico de la Universidad de Chile [ conformado
por profesores, ayudantes y monitores ] que les competa desarrollar dentro de su carga
académica el tópico del diseño editorial.
3. Usuarios externos, abarcado tanto por estudiantes de otras asignaturas, como de otras
carreras afines al Diseño Gráfico, como Diseño Industrial o Arquitectura.
Propuesta de Diseño - Desarrollo de marca
La marca servirá para crear una coherencia editorial, tanto dentro de la aplicación presentada como
prototipo, como para ser utilizada en otros formatos que se extraigan del formato inicial; por ejemplo,
en la confección de módulos futuros que hablen de tópicos relacionados. Por lo tanto, la marca ha
de ser parte de una estructura mucho más amplia que el tópico que se presenta en este módulo
particular.
Selección del nombre:
El nombre ha de ser simple, y por ser un tema de escaso dominio dentro de la comunidad estudiantil,
ha de relacionarse lo más posible con esta. De aquí aparecen dos términos posibles para desarrollar
como marca: grilla y retícula.
Ambos términos son tratados como sinónimos, sin embargo sumaremos otro punto para la elección
final: dentro de los softwares utilizados tanto por estudiantes como por docentes del área gráfico del
diseño, y para referirse a la función de la constricción de grillas, se utiliza su traducción anglicana:
“grid”.
Esta será la palabra seleccionada finalmente, por tener una mayor cercanía al uso cotidiano del
público objetivo lo que ayudará a lograr una mayor recordación.
Para dar una mayor consistencia a la forma gráfica de representar la marca, está se apoyará
explícitamente en el contenido [ como tema ], es así, como se construirá una grilla de base que
acogerá a la palabra “grid”, creándose un conjunto interdependiente que origina finalmente la marca;
y donde se aplica desde un comienzo la temática inicial del proyecto.
La forma de la imagen de marca ha de ser actual, lo suficientemente llamativa para atraer, lo
adecuadamente clásica para no requerir una constante actualización, y especialmente ser lo
armónicamente neutra como para generar otros módulos que le sean congruentes.
Imagotipo:
Tiene como base la fuente Automatica (BRK)
La tipografía utilizada será adaptada a una grilla modular formada por un cuadrado perfecto, cuya
dimensión esta dado por la altura de la “x”. Luego se tomará la anchura de ese cuadrado para
pasar a ser ésta medida la altura máxima de las letras con ascendentes y descendentes, dando una
tipografía más achatada.
92 / 93
Para generar un mayor dinamismo, estos se ligarán entre sí. Sin embargo
la unión al ser equivalente entre la “i” y la “d”, genera un punto conflictivo
que dificulta la lectura. Es por ello que se adaptará a un grosor proporcional
para lograr la unión de las letras respetando su estructura individual.
Primer acercamiento a la unión de las letras, donde se monta la letra “r”
sobre la “g”.
Para hacer más notoria la presencia de la letra “r”, a la sección montada se
le adjudicará un color diferente. Sin embargo se crea un punto conflictivo,
que impide una buena lectura.
Construcción final:La retícula modular creada a base de la reiteración de los rectángulos
[ llamados módulos ], de base “x” y alto “y”, nos entrega una forma
proporcional para la unión de las letras que conforman el imagotipo,
evitándose así puntos críticos que ensucien la marca.
Finalmente se dejarán algunas de las líneas que componen la retícula
anterior, y cuya función no es una forma meramente estética de apoyar
el contenido, sino que en este caso cumple con un rol funcional, ya que,
la retícula permite que se haga más legible la letra “i”, porque al estar
compuesta sólo por un ovalo flotante, el resto de su estructura se construye
visualmente gracias a la grilla de base.
La gama cromática para la estructura formal ya definida de la marca, como ya se enunció
anteriormente, esta dada por: un color gris para la retícula de base [ �0% de negro, #CCCCCC ], de
modo que contenga visualmente al imagotipo sin competir cromáticamente con este, y que responde
al color grafito antes mencionado, color usual al momento de bocetear.
El imagotipo se creará a base de dos colores, negro en su mayoría, color que incrementa el acto
que se produce luego de un bocetaje y que se utiliza para remarcar lo ya solucionado. Y rojo, para
destacar alguna zona particular. Recordemos que es usual la utilización del color rojo para destacar
elementos durante el proceso de aprendizaje por el potencial de la visibilidad del color en función del
tiempo de exposición.
Anteriormente vimos la psicología del color expuesta por Dale Russell, a la que agregaremos ahora
la opinión vertida por Joan Costa en su libro “Diseñar para el ojo”5, aquí se plantea la potencial
visibilidad del color en función del tiempo y en asociación entre ellos. Particularmente nos referiremos
al rojo, puesto que es el color elegido para destacar y enfatizar elementos dentro de esta aplicación
Interactiva.
Para Costa, el rojo significa vitalidad y energía, es exaltado y agresivo. Además por su visibilidad
en función del tiempo que lo ubica de primero en una tabla con su valor superior de ��6 / �0.000
segundos sobre verde, gris, azul y amarillo.
� Costa, Joan. “Diseñar para los ojos”, Editorial Desig, Bolivia , �003, Pág. 64
94 / 95
Código cromático
La visibilidad de los colores disminuye en la asociación entre ellos y resaltan
por este orden:
�. negro sobre blanco
�. negro sobre amarillo
3. rojo sobre blanco4. verde sobre blanco
5. blanco sobre rojo
6. etc.
Como se ve, el rojo sobre blanco en asociación se ubica en el tercer lugar
de la tabla de visibilidad, superando su inverso blanco sobre rojo y a otros
más. Esta asociación será utilizada para la tipografía que presentará el
contenido dentro del módulo interactivo.
Reiteramos que el cromatismo seleccionado y las formas que construyen
la imagen de marca y que acompañarán al resto del diseño del módulo,
no interferirán en el futuro uso de su estructura para la creación de otros
módulos que hablen de tópicos relacionados.
Es así como la neutralidad en la visualidad y la lectura de la imagen de
marca, puede dar paso a otras marcas que en conjunto funcionen como
una familia integrada, por ejemplo:
De la investigación previa se desprende que para que sea factible llevar a cabo este proyecto ha de
contarse con datos técnicos y datos que nos proporcionen atención a las necesidades informativas
del grupo objetivo.
CARACTERISTICAS TECNICAS: datos extraídos de la encuesta realizada al grupo objetivo.
+ Plataforma de visualización: Mac o Pc, según la plataforma del usuario
+ Soporte: Internet a través de plataforma e-learning como moodle o U-curso presente en la
Facultad.
+ Resolución de visualización: �0�4 x 768 a 7� dpi
+ Velocidad de conexión recomendada: Modem de 56 kbps o superior
+ Browser: Internet Explorer, Mozilla Firefox, Safari u otro similar.
[ extraído de manual U-curso alumnos 4.0, donde los requisitos mencionados son únicamente:
una conexión a Internet, un browser y ser docente o alumno de las facultades que tengan
activo el sistema dentro de la Universidad de Chile ]
+ Interacción: formato SWF [ ShockWave Flash ] a 30 fps, version 6.0
+ Software de creación imágenes: Adobe Photoshop CS�
Macromedia FreenHand MX �004
+ Software de optimización de imágenes: Adobe ImageReady CS�
+ Software de creación multimedia: Macromedia Flash MX �004
+ Software de montaje Html: Macromedia Dreamweaver MX �004
+ Formato de imágenes: jpeg, png y gif optimizados para pantalla y uso on-line
+ Programación: la presente maqueta simula secciones que en la realidad debiesen trabajar y
componerse mediante lenguajes como Html, ActionScript para Flash, SWF, PHP o ASP, Mysql,
sumado a la utilización de recursos como CSS [ Cascading Style Sheet ] que permiten una
mayor compatibilidad entre sistemas y navegadores, además de permitir la implementación
del proyecto en soportes como Moodle o U-curso, actualmente en uso dentro de la Universidad
para fines pedagógicos.
Por ello abra de contarse con la tecnología para la implementación del módulo interactivo, es decir:
el dominio de una dirección Web, Servidor y alojamiento para la Web. Todos estos recursos serán
proporcionados a futuro por el servicio disponible dentro de la Facultad de Arquitectura y Urbanismo,
puesto que, si el módulo se incorpora a la plataforma de aprendizaje implementada dentro de la
FAU, los servidores y el Web hosting corresponderán a los que use la misma Facultad.
Como la implementación final no estará disponible para efectos del día de la presentación ante la
comisión, se construirá una simulación respecto de los recursos monetarios ocupados.
Definición y Planteamiento del Sitio
96 / 97
Viabilidad del proyecto:Dominio Nic.cl:
.cl agrupa todos los dominios inscritos dentro de la Republica de Chile, en el Departamento de Ciencias
de la Computación de la Universidad de Chile NIC CHILE, el dominio tiene un valor de $ �0.�70 [ iva
incluido ] cuya vigencia abarca dos años. Una simulación de Web Hosting para un proyecto de este
tipo tiene un valor de aproximadamente $ 47 .000 [ iva incluido ] anuales.
El uso de softwares, sus licencias y costos, serán proporcionados por los ya adquiridos dentro de la
Universidad de Chile.
Por ultimo la producción y el diseño del proyecto ha sido planteada desde un comienzo sin fines de
lucro.
Corresponde a la organización de la información para el sitio. Para esto es necesario tener claro
cuanta es la cantidad de información necesaria y mínima para cada una de las secciones y menús
del módulo interactivo.
La arquitectura de la información debe responder no sólo a la entrega del contenido de forma
aislada, sino ha de considerar como primer factor al usuario al que esta destinada la creación
del módulo interactivo. Es por ello, que el presentar el contenido de una manera plana y carente
de interacción iría en contra de la constante tendencia en la búsqueda de una nueva forma de
conocimiento por parte del usuario, sea cual sea la temática a consultar.
Además para potenciar la navegación, esta ha de ser considerablemente intuitiva, para marcar la
diferencia entre la Arquitectura de la Información tradicional, con la que está creada para espacios
digitales intangibles como esta aplicación interactiva, por lo tanto se hace necesaria la presencia de
claves visuales que orienten la vista en la pantalla.
Para generar una navegación fluida, seria propicio contar con sintéticas referencias, que fuesen
leídas y comprendidas en rápidos barridos como es lo natural de la lectura en pantalla. Por lo tanto
se le tratará como capsulas de corta extensión.
Navegación básica:Acá definiremos cuales serán los sistemas de navegación primario y secundario.
En el sistema de navegación primario se encontrará el menú principal que esta alojado, de forma
visible y permanente, dentro de la zona inferior de la pantalla destinada a complementar la cabecera
corporativa. Todo para tener un acceso fácil y rápido a las secciones principales.Arquitectura de la información
Por otro lado la navegación secundaria dependerá de la sección en la que se encuentre el usuario,
desplegándose un submenú particular por sección, que no siempre permanecerá visible, esto porque
en algunos casos su presencia puede ensuciar el contenido presentado.
Los módulos han de tener vínculos virtuales, es entonces que al pasar de una página a otra dentro
de una sección por ejemplo, los puentes virtuales tienen como función generar puntos de llegada los
contenidos de la nueva página, vale decir crear una relación visual entre las páginas.
Unidades de contenido:
El contenido total se subdividirá en 4 secciones identificables:
�. Historia de la Retícula: presenta como contenido, la historia de la retícula
a través del tiempo y su evolución, mostrando ejemplos de los hechos sitados. Se dividirá
la página en dos, mostrando la historia de la retícula construida y enfrentandola a la retícula
deconstruida. Esta unidad al presentar la historia, crea un nexo con otras materias incluidas
dentro de la malla académica como lo es: “Historia y Teoría del Diseño”, mostrando así la
transversalidad de su contenido.
�. Retícula Construida: es una de las dos principales categorías en las que se
divide el tema. Se complementa con la página de inicio, donde se presentan las Partes
que componen la retícula base y un glosario que permitirá comprender algunos términos
empleados.
La retícula Construida se subdivide en cuatro categorias principales, las que se tratarán de
manera particular pero relacionandolas entre ellas. Las categorías son:
Retícula Manuscrita,
Retícula de Columnas,
Retícula Modular,
Retícula Jerárquica.
Cada una presenta tanto su contenido académico, como una serie de ejemplos que apoyen
de manera explicita el contenido presentado anteriormente.
3. Retícula Deconstruida: es la otra de las principales categorías. Su estructura
y navegación responderá a la misma que se presenta en el menú de Retícula Construida,
presentando las subcategorías:
Deconstruccion Lingúistica
Composicion Espontánea
4. Tips: en esta sección se presentarán una serie de “tips” o consejos, que relacionan
a la retícula con el diseño editorial y que no hayan sido incluidas dentro de las categorías
anteriores.
98 / 99
Mapa de Navegación:
Como el contenido a presentar aun no tiene
mucho reconocimiento por parte del usuario, al
que en algunos casos le parecerá completamente
nuevo, se propone el reconocimiento en la
parte de presentación de cada categoría y no
de la memorización de esta, de modo que se
comience a agregar de manera creciente a su
bagaje de diseño.
Estructura general de una páginaSe explicará el contenido de manera general, puesto que la estructura es mutable según la sección.
+ Portada: sólo contempla la inclusión de un icono sobre un fondo blanco a modo de cargador
previo a la entrada al contenido del sitio propiamente tal.
El fondo blanco posee un pequeño bisel al costado derecho e inferior para emular una hoja en
blanco, que refleja de un modo sutil el concepto de “enfrentarse al blanco”.
+ Primera página:
El primer impacto estará dado por el Logotipo “grid”, dado por su ubicación y permanencia a
lo largo de la página.
La portada nos indica desde un comienzo la estructura básica de la página, dividiéndola en
dos zonas marcadamente diferenciadas, siempre trabajando sobre una “hoja en blanco”, por
una parte estará una zona contemplada como “un lleno permanente”, el que acogerá a un
banner principal para la navegación principal y una zona pensada como un “vacío”, que será el
espacio en permanente cambio y que ha de ser llenada con el contenido según cada una de
las secciones.
Esta página esta destinada a retener la atención del usuario e invitarlo a ser participe del “llenado
de la pagina” desde un comienzo.
+ Páginas secundarias: variaran según el contenido por sección, donde lo que se destaca es
que la presencia de figuras en color rojo serán claves para ir avanzando paulatinamente por el
contenido.
Se destacarán palabras significativas, textos que se lean con facilidad y rapidez, posibilidad de
quiebres en la navegación ya que todo esta tratado cono pequeños módulos cargables sólo
mediante la intervención del usuario.
Esta estructura base será común en todas las paginas subsiguientes.
El pie de página con la información corporativa de la Universidad de Chile, será agregada en la
página inicial HTML vinculada directamente a la plataforma de aprendizaje disponible.
100 / 101
Considerando todos los parámetros que se han mencionado a la fecha para el diseño del módulo
interactivo, se ha determinado la utilización de las siguientes tipografías:
Trebuchet MS para el texto en general en un cuerpo de ��pt. Esta fuente tipografía viene incluida en
el navegador de Internet Explorer versión 5, para Macintosh y Windows. Corresponde a una Sans
Serif humanista construida para una buena legibilidad en pantalla.
Se propone el ideal de no alterar el traking y que la línea tipográfica no supere una longitud que
haga incomoda su lectura, sin embargo para efectos de enfatizar ciertos contenidos esta será
alterada. El interlineado será superior al tamaño del cuerpo más un �0% [ vale decir �4pt ].
Trebuchet MS:
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 @#$%&/()=_.+[]{},¨^<>?
Las siguientes tipografías serán utilizadas para fines específicos como títulos, subtítulos, o palabras
claves que hayan de ser destacadas, como su cantidad es menor en relación al texto total, se les
tratará como imagen para evitar que la diferencia de browser las altere.
ISOCTEUR: ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyz0123456789 @#$%&/()=_.+[]{},¨^<>?
Automatica (BRK)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 @#$%&/()=_.+[]{},¨^<>?
Colores establecidos para la tipografía:+ Letra negra / fondo blanco
HTML # 000000 / # FFFFFFRGB: R0, G0, B0 / R�55, G�55, B�55
+ Letra roja / fondo blanco [ no se ocupara el rojo puro, para evitar que la tipografía pueda “vibrar” en la pantalla ]HTML # E60F0F / # FFFFFFRGB R�30, G�5, B�5 / R�55, G�55, B�55
+ Letra gris / fondo blanco HTML # 666666 / # FFFFFFRGB R�0�, G�0�, B�0� / R�55, G�55, B�55
Diseño del módulo
Para el diseño total se tomará como premisa lo expuesto por Gui Bonsiepe, y se diseñará en base al
“look and feel”, que es el proceso de acoplamiento estructural a través de la percepción visual entre
el cuerpo del usuario y las herramientas. Para ello ha de contarse con elementos que permitan
una mejor experiencia de navegación y la valoración del sitio por parte del usuario, un ejemplo es
hacer notar la diferencia entre obtener el contenido a través de la literatura convencional impresa y
el nuevo modo ofrecido a través de la aplicación interactiva.
Además, para el diseño ha de tomarse en cuenta el caudal de información y experiencia previa que
posee el grupo objetivo de manera de crear elementos que sean acordes a su realidad.
El layout o diagramación de la aplicación Web, ha
sido diseñado para profundizar en los contenidos
sin perder de vista lo general.
layout
102 / 103
Por esta razón el menú principal se mantendrá
disponible a la vista, junto con la cabecera
corporativa [ que contiene el logotipo ] y un
elemento indicador de la sección en la que se ha
ingresado, por lo tanto, el usuario siempre podrá
saber donde se encuentra por profunda que haya
sido su navegación, además de contar de una
manera rápida de acceder a otras secciones
importantes.
Los colores deben entregar la jerarquía de
las secciones [ área de navegación principal
y secundarias, de identificación de sección,
cabecera corporativa y áreas de contenido ]
La aplicación será diseñada para una resolución
de pantalla de �0�4 x 768, respetando los
espacios del browser que disminuyen el espacio
libre para diseñar, de modo que no se visualicen
barras de desplazamiento [ scrollbars ] horizontal
ni vertical.
La disposición de la página inicial será centrada,
para ello se construye un frameset con 3 frames
verticales, donde los laterales modifican su ancho
por porcentajes mientras que el central lo hará
por píxel para acomodarse perfectamente a �0�4
x 768.
Los botones se presentan a modo de roll over con cambios de tonalidad y su ejecución incorpora
un pequeño sonido para mejorar la experiencia de la navegación y así dar mayores signos de
interacción, puesto que los botones producirán una acción post evento.
Como hemos apreciado en la etapa de estudio, tanto de la teoría como de los referentes, es poco
frecuente el uso de iconos para graficar botones cuando son términos complejos en información.
No sólo por su complejidad para generarlos, sino por su dificultad en la comprensión del usuario
cuando no son términos conocidos. Por tanto se hace más valido y efectivo el uso de la palabra
escrita.
Dentro de la composición por cada una de las grillas presentadas la presencia de una línea negra
hace las veces de puntuación. Y separa espacios en zonas puntuales.
Dentro de las formas presentadas se encuentran pequeños botones triangulares a modo de cuña,
para dirigir la mirada hacia donde se descargará alguna información.
104 / 105
“Partes de la Retícula”:
La informacion se despliega mediante la
interacción constante con el usuario al pasar
el cursor sobre los elementos sensibles, que
en este caso corresponde a todas las áreas
destacadas en rojo dentro de la página de
muestra.
“Retícula Modular”:
Es un ejemplo de las páginas que muestran el
contenido teórico de una retícula en particular,
ocupando su estructura como base, y a la vez,
como elemento gráfico.
La información se despliega mediante la
interacción con botones destinados para ello,
estos al tener una forma triangular, cumplen un
rol de “cuña” y señalan la dirección en la que será
desplegado ela información.
“aplicaciones”:
Se muestran una serie de grillas
correspondientes a esta categoría. Estas grillas
en color rojo cumplen la funcion de “muestra” y
al estar orientadas en sentido vertical, permiten
el reconocimiento y comparación por parte del
usuario, además son botones, que develan una
pieza gráfica cuya construcción es a base de
esa retícula en particular seleccionada.
106 / 107
108 / 109
Se le tomará como una versión beta, para ser
probada tanto en su arquitectura de la información,
como problemas de programación, lo que se
constituye como la primera aproximación de una
evaluación y mantenimiento.
Proyección del sitio
“El arte hace preguntas y el diseño soluciona problemas…
…diseño gráfico… es la praxis que nació con la imprenta gutenberguiana, el dibujo de los tipos de
letra, la composición de la página impresa [ por cierto, con la “proporción áurea” o el “número de
oro”, que definían la arquitectura de la página impresa, es decir, una síntesis de la geometría y la
matemática: cosas mentales ]. Después vino el cartel, que ya no está emparentado con el dibujo sino
con la pintura, que no es el mundo de la línea sino de la mancha. Luego vendría la Bauhaus en pleno
industrialismo, que convirtió la praxis artesana del diseño al rango de disciplina…
…El diseño no tiene otra ideología que la eficacia. La eficacia es el objetivo del pragmatismo, no del
arte. El diseñador gráfico busca la eficacia en la solución de un problema de comunicación…”
Joan Costa.
Bibliografía
bibl
iogr
afía
Bibliogrfía
Libros
+ Bonsiepe, Gui. [ 1999 ] “DEL OBJETO A LA INTERFASE”. Ediciones Infinito. Buenos Aires.
Argentina.
+ Bou Bouzá, Guillemo [ 1997 ] “GUIÓN MULTIMEDIA”, Anaya Multimedia, Madrid, España.
+ Cabero, Julio. [ 2001 ] “TECNOLOGÍA EDUCATIVA, DISEÑO Y UTILIZACIÓN DE MEDIOS EN LA
ENSEÑANZA”, Ediciones Paidos Ibérica. Barcelona, España.
+ Costa, Joan. [ 2003 ] “DISEÑAR PARA LOS OJOS”. Grupo Editorial Design, La Paz, Bolivia.
+ Costa, Joan y Moles, Abraham. [ 1991 ] “IMAGEN DIDÁCTICA”, 2ª Edición. Barcelona Ediciones.
Barcelona, España.
+ Foges, Chris. [ 2000 ] “DISEÑO DE REVISTAS” Editorial McGraw-Hill/Interamericana Editores.
Ciudad de México, México.
+ Fuentemayor, Elena [ 1996 ] “RATÓN, RATÓN... INTRODUCCIÓN AL DISEÑO GRÁFICO
ASISTIDO POR ORDENADOR” Editorial Gustavo Gili, Barcelona, España.
+ Holzschlag, Molly [ 2002 ] ”COLOR PARA SITIOS WEB, noción básica del color para formato
digital”. editorial McGraw-Hill/Interamericana Editores. Ciudad de México, México.
+ Iglesis, Jorge. [ 1989 ] “CROQUIS: dibujo para arquitectos y diseñadores”, editorial Trillas.
México.
+ Meggs, Philip. [ 2000 ] “HISTORIA DEL DISEÑO GRÁFICO”, editorial McGraw-Hill/Interamericana
Editores, Ciudad de México, México.
+ Nielsen, Jacob. [ 2000 ] “USABILIDAD, DISEÑO DE SITIOS WEB”, Editorial Prentice Hall,
México.
+ Poynor, Rick. [ 2003 ] “NO MAS NORMAS”
+ Samara, Timothy. [ 2004 ] “DISEÑAR CON Y SIN RETÍCULA”, Editorial Gustavo Gili, Barcelona,
España.
+ Sánchez Ilabaca, Jaime. [ 1992 ] “INFORMÁTICA EDUCATIVA” Editorial Universitaria. Santiago
de Chile.
+ Swan, Alan [ 1990 ] “COMO DISEÑAR RETÍCULAS: modos de construcción digita” Editorial
Gustavo Gili, Barcelona.
+ Woolman,Matt. [ 2001 ] “TIPOS EN MOVIMIENTO: construcción tipográfica más aplicabilidad
en espacios.”, Editorial McGraw-Hill/Interamericana Editores. Ciudad de México, México.
Memorias
+ Pantoja, Alejandro. [ 2003 ] “DISEÑO DE UN SITIO WEB COMO
SOPORTE DE COMUNICACIÓN, PROMOCIÓN Y DIFUCIÓN
PARA LA ESCUELA DE DISEÑO DE LA UNIVERSIDAD DE CHILE”
Memoria de Titulo Universidad de Chile. Profesor Guia: Juan
Eduardo Calderón R. Santiago de Chile
+ Madriaza, Juan Paulo. [ 2003 ] “DESARROLLO DE UNA APLICACIÓN
DIGITAL EN EL APOYO DE LA ENSEÑANZA DE LA ASIGNATURA
DE MULTIMEDIA DE PREGRADO EN LA ESCUELA DE DISEÑO
DE LA FACULTAD DE ARQUITECTURA Y URBANISMO DE LA
UNIVERSIDAD DE CHILE” Memoria de Titulo Universidad de Chile.
Profesor Guia: Juan Eduardo Calderón R. Santiago de Chile
Páginas Web
+ www.rae.es
+ http://es.wikipedia.org
+ http://www.gestiondelconocimiento.com
+ http://www.aprender.org.ar/aprender/home64.html
+ http:/ /www.nodos.enredando.com/formacion/seminarios/
seminario0.html
+ http://conocgest/intro/gali.cl
+ http://www.geocities.com/athens/sparta/6007
+ http://www.face.uc.edu.ve/~lpacheco/revision.htm
+ http://www.mineduc.cl
+ http://www.UNESCO.org
+ http://dewey.uab.es/pmarques/siyedu.htm
+ http://www.fotonostra.com/grafico/simetriacompositiva.htm
+ http://platea.cnice.mecd.es/~jmas/manual/html/plantillas_y_estilos.
html
+ http://www.mailxmail.com/curso/informatica/diseno2/capitulo22.
htm
+ http://www.desarrolloweb.com/articulos/2259.php
+ http://www.foroalfa.com/D.php//3
Documentos
+ Nielsen, Jacob. Ten usability heuristics: useit.com[en linea ] http://www.useit.com/papers/
heuristic/heuristic_list.html
+ Síntesis de Resultados WIp Chile 2004 en http://www.wipchile.cl/esp/index.htm
Entrevistas
+ Céspedes, Cristían. [ 2006 ] tema: “DESARROLLO DE INFOTECNOLOGIAS”, realizada el 6 de
Junio en Facultad de Ciencias Físicas de la Universidad de Chile.
+ Soza, Pedro. Coordinador de medios digitales FAU [ 2006 ] tema: “Moodle FAU”, realizada el
1 de Junio en la Facultad de Arquitectura y Urbanismo de la Universidad de Chile.
Otros
+ Guía 2002, [ 2002 ] Facultad de Arquitectura y Urbanismo, Dirección Académica Estudiantil.
Santiago de Chile.
Anexos
anex
os
Objetivo específico 1.7
Fortalecer las actividades de educación continua e incorporar nuevas
tecnologías de comunicación al proceso docente.
Se impulsara decididamente la educación continua, educación a distancia
y la incorporación de nuevas tecnologías de información y comunicaciones
al proceso docente. La Universidad de Chile avanzara en esta dirección
a través de una estrategia institucional que coordine la labor de las
facultades y organismos, introduciendo innovaciones que signifiquen un
real mejoramiento de la calidad de la docencia y una mejor efectividad de
los procesos de aprendizaje.
El aprovechamiento integral de la actual disponibilidad institucional de redes
y de las mas modernas tecnologías de comunicaciones, permitirá mejorar
en este periodo el acceso del alumno a textos, medios audiovisuales,
bibliotecas actualizadas y digitalizadas y a medios que lo contacten a
fuentes de información y conocimiento. Paralelamente, será necesario
favorecer e impulsar acciones que conduzcan a la creación de contenidos
educativos apoyados en tecnologías de información y comunicación.
Este es un proceso que se orientara primordialmente a:
• Fortalecer la infraestructura tecnológica.
• Implementar y desarrollar programas de entrenamiento en el uso
de tales tecnologías en los estudiantes y docentes.
• Diseñar y ejecutar programas de educación interactiva a distancia,
tanto en el nivel de los estudiantes de los programas regulares de
formación, como en el de los programas de extensión.
La Universidad de Chile buscara con otras instituciones de educación
superior nacionales e internacionales, y con organismos que tengan un
alto reconocimiento en la creación e implementación de programas de
educación a distancia.
Objetivo específico 3
Fortalecer y consolidar la investigación científica y la creación: Se establecerá
una relación aún más estrecha entre los programas de investigación y
los programas de posgrado. Asimismo, se fomentará la formación de
investigadores con capacidad de ahondar en los temas del conocimiento,
enriqueciendo las áreas de docencia de la Universidad y transfiriendo los
resultados de su quehacer a los sectores productivos y de servicios. Del
mismo modo, se propiciará la investigación en las áreas tecnológicas
ligadas a la sociedad de la información.
Objetivo específico
Objetivo específico 4.3
Lograr una mayor efectividad en la transferencia tecnológica.
La Universidad de Chile se ha propuesto fortalecer las actividades de
transferencia tecnológica que sean de alto impacto nacional. Se intensificara
la vinculación con el sector productivo en los ámbitos público y privado,
con el objetivo de asegurar una mayor efectividad en dichas actividades.
Se implementara una política de incentivos que permita lograr una mayor
aplicación de los resultados obtenidos en los proyectos de investigación y
desarrollo, tales como FONDEF.
Objetivo específico 5.5
Fortalecer programas en materias de comunicaciones e información.
Se intensificara el uso de tecnologías de información con el fin de contribuir a
mejorar el proceso de enseñanza – aprendizaje, a a apoyar la investigación
y los servicios, ampliando el acceso a estos recursos de académicos y
estudiantes. Ello implica habilitar la biblioteca digital en todos los campus,
asegurando la conservación y acceso a la información y conocimiento
generados por sus académicos, como asimismo incorporando y
manteniendo el patrimonio histórico y cultural institucional.
ORIENTACIONES ESTRATEGICAS 2000 – 2005 (extracto)
Encuesta realizada a estudiantes de la Escuela de Diseño de la universidad de Chile. Se realizó
tanto de manera convencional como por vía on-line. De aquí se extrae tanto el dominio general del
tema, como los conceptos técnicos a manejar en la etapa proyectual.
Corresponde a una encuesta de carácter: opinión y representación.
Diagramación _ encuesta
1. Semestre en curso:_____3er a 5º semestre______
2. Dentro del desarrollo de tus estudios, se contempló la diagramación como materia particular?
• SI = 39 %
• NO = 61 %
3. Se contempló asimismo un ramo de tipografía? Tanto de construcción tipográfica como su
uso y aplicación?
• SI = 33 %
• NO = 67 %
4. Conoces lo que es una retícula o una grilla? Cuales?
• SI = 67 %
• NO = 33 %
No saben ni cuales, ni diferencian los términos
“Grilla”: relacionan más el término
5. Que implica el diagramar?
• Acto de disponer cosas? = 95 %
• O las cosas ya dispuestas en un espacio?
• Otro [Cuál?] _______ = 5 % no sabe
6. Haz diseñado alguna vez con el uso de retículas?
• SI [Qué piezas?] _______ = 22 %
• NO = 72 %
6 % no sabe
Para revistas
Hay una contradicción al afirmar que se prefiere un método más suelto como la retícula
visual, pero se usa un método geométrico al momento de ejecutar.
Encuesta
7. Qué método usualmente utilizas para diagramar? [Simple gusto o aplicación de teorías de
color, jerarquización de algún tipo, sección áurea, etc.]
Método geométrico / sección áurea = 39 %
Instinto / gusto personal / “ojimetro” = 39 %
Jerarquizacion / pesos visuales = 83 %
Teoría del color = 50 %
Uso de líneas o guías constructivas = 11 %
Regla de los 3/3 = 11 %
8. En que te fijas para optimizar un sistema de lectura?
Legibilidad = 44 %
[ interletraje, interlineado, tamaño de la fuente, “lecturabilidad”]
Cantidad de caracteres o tamaño de párrafo = 17 %
Color = 6 %
Simplicidad o claridad = 17 %
Ritmo y vectores de dirección = 22 %
Nada = 11 %
Según referentes = 6 %
Web _ encuesta
9. Cuándo consultas una página Web con contenido educacional, crees desde un comienzo
que la información entregada es verdadera?
• SI = 39 %
• NO = 61 %
10. Qué elemento te permitiría darle mayor credibilidad al contenido ofrecido?.
• No necesito de ningún elemento para adjudicarle veracidad
• El logotipo de una universidad o entidad de educación acreditada = 83 %
• El logotipo del ministerio de educación. = 28 %
• Cualquier marca comercial = 11 %
11. Con qué fines navegas [ principalmente ]?
• Leer mail = 44 %
• Entretención = 44 %
• Obtener información = 89 %
12. Has realizado algún curso online [ e-learning ]?
• Si = 11 %
• No = 89 %
13. Conoces Moodle Fau?
• Si = 95 %
• No = 5 %
14. Utilizas alguna de estas plataformas de comunicación dentro de tu taller?
• Moodle = 72 %
• Blog = 61 %
• Mail común para el curso = 72 %
• Otro [Cuál?] _________________ = 17 % propio Web, msn
15. Utilizas alguna de estas plataformas de comunicación dentro de tu taller?
• Moodle = 72 %
• Blog = 61 %
• Mail común para el curso = 72 %
• Otro [Cuál?] _________________ = 17 % propio Web, msn
16. Te interesa que haya alguna plataforma disponible en línea con información académica?
• Si = 95 %
• No = 5 %
17. Qué tipo de contenido te gustaría que tuviese?
• Contenido de ramos multimediales = 72 %
• Contenido de ramos editoriales = 56 %
• Tutoriales = 72 %
• Publicación de notas = 44 %
• Otro [Cuál?] _____ = 22%
lectura de material de apoyo, foros, información de trabajos de diseño actuales
18. Qué plataformas utilizas normalmente?
• PC = 95 %
• Mac = 5 %
19. A qué resolución de pantalla trabajas?
• 640 x 480 = 0 %
• 800 x 600 = 22 %
• 1024 x 768 = 61 %
• 1280 x 1024 = 17 %
20. Qué navegador [ browser ] utilizas?
• Explorer = 56 %
• Netscape = 0 %
• Firefox = 56 %
• Safari = 6 %
• Otro [Cuál?] _________________ = 6 % opera
21. Qué versión Flash posees?
• Versión 4 = 6 %
• Versión 5 = 0 %
• Versión MX = 72 %
• Superior = 22 %
22. Qué tipo de conexión posees?
• MODEM = 17 %
• Cable = 17 %
• Adsl [ Asymmetric Digital Subscriber Line = “linea de abonado digital asimétrica o
banda ancha] = 44 %
• Wireles =
• T1 =
• Lan = 11 %
• Otro [Cúal?] _____________ = 6