Intr Gestion Produccion

Universidad de Antioquia Facultad de Comunicaciones
Introducción a la formulación y
Gestión de Proyectos
multimedia**
Objetivo
Aprender los pasos a seguir para:
• Definir,
• Diseñar y
• Desarrollar
una aplicación multimedia

Contenidos Metodología
• Introducción
• Etapa de Definición de proyecto

Teoría
•Arquitectura de la información
Entrega
•Etapa de Diseño
Entrega Práctica:
• Etapas de producción Ejercicios
•Etapas de desarrollo, explotación y Entregas

pruebas
Entrega
¿Qué es un proyecto?
“Un proyecto es un intento

por lograr un objetivo
específico mediante un
grupo único de tareas
interrelacionadas y la
utilización efectiva de los
recursos.”
Gido y Clemens, Administración exitosa de

proyectos (1999)
¿Qué es un proyecto multimedia?
“Mediante el diseño de interfaces

que combinan textos, sonidos e
imágenes se permite a uno o más
usuarios un determinado proceso
comunicativo con intercambio de
información y que se aplica a una
funcionalidad que puede ser
difundida y operada mediante
diversas alternativas de
tecnología”
Alpiste, Brigos, Fernández y Monguet, Gestión y Organización de

la producción I, 1999. GIM-BARCELONA
¿Qué es una producción multimedia?
“El proceso productivo del producto multimedia es un

conjunto de procesos destinados a transformar ideas,
media, programación, etc., en un producto o servicio que
puede ser utilizado por unos determinados usuarios.
La aplicación multimedia final representa un incremento

de valor añadido con relación a los componentes iniciales”
Producción Proyecto
multimedia multimedia
Alpiste, Brigos, Fernández y Monguet, Gestión y Organización de la producción I, 1999. GIM-BARCELONA

¿Qué significa gestionar un proyecto?
1. Planear el trabajo
Definir qué, cómo y cuándo
2. Trabajar el plan
Controlar que lo definido se cumple durante el
desarrollo de la producción
Etapas de la producción multimedia
1. Definición del proyecto
2. Diseño
Producción
La Metodología define y
Realización
agrupa las diferentes
3. Desarrollo
tareas a realizar en cinco
etapas
4. Pruebas
5. Explotación
* Laboratorio de aplicaciones multimedia LAM, de

la Universidad Politécnica de Cataluña. Barcelona
Definición de proyecto
“Redactar un documento con el concepto de la

aplicación, definirá lo que ella será”.
“El concepto de la aplicación pone de acuerdo

a los diferentes implicados sobre su alcance.”
Objetivos Usuarios
Contenidos
Mantenimiento Tratamiento
Tecnología
Plan de producción y plazos
Plan de explotación Presupuesto

Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Objetivos
Tecnología
Plan de producción y plazos Objetivos generales
Son aquellos que explican el por qué.

Es decir, definen a grandes rasgos y
en términos políticos los motivos por
los que se hace la aplicación.
Objetivos específicos
OBJETIVOS Especifican los usos que tendrá la

aplicación. En este caso, cada
¿QUÉ QUEREMOS HACER?
objetivo es único y concreto.
Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Usuarios
Tecnología
Características
exógenas
Plan de explotación Presupuesto • Demográficas

• Sociales
• Culturales
Características
endógenas
USUARIO •Utilización de la aplicación

• Experiencia
¿A QUIÉN NOS DIRIGIMOS?
• Motivación
Objetivos Usuarios
Contenidos
Mantenimiento
Tratamiento Contenidos Expertos
Tecnología
Documentación
Documentos, textos, datos, información

para crear las funcionalidades: todos los
recursos en bruto que se encuentran
disponibles para ser integrados en la
aplicación.
Definición de los contenidos

CONTENIDOS
¿QUÉ DIREMOS? Estructura aproximada
Necesidades mínimas de
organización y funcionamiento de un sitio Web
Arquitectura de la Información
• “Arte y ciencia de organizar la información para

ayudar a la gente a encontrar la información que
quiere.”
• “Los sitios se forman de contenido editorial,

contenido gráfico y codificación.”
• “La manera en que todo eso se estructura es la

arquitectura de la información.”
Razones para dividir la información
• Organizacionales
• Limitaciones humanas
...”pequeños trozos de información relacionada son más fáciles de

organizar en unidades modulares de información que comparten un...
...Esquema de organización consistente...
...que forme la base del documento hipertexto (Sitio Web).”
“Pequeño” es un termino relativo”

Porqué dividir la información
• “Los humanos tienen limitaciones para mantener en

su memoria trozos grandes de información...”
• “... por eso lectores-usuarios raramente leen pasajes

largos y contiguos de texto en pantallas de
computadora, y se sentirán “perturbados” cuando
tengan que hacerlo...”
Pasos básicos en la organización de la información
1. “Dividir en unidades lógicas (los trozos de
información).
2. “Establecer jerarquía de importancia y generalidad
entre esas unidades”.
3. “Usar esa jerarquía para ESTRUCTURAR las
relaciones entre los trozos de información”.
4. “Estudiar, probar, y analizar el éxito (o fracaso)
estético y funcional del sitio.”

...¿¿¿ Cómo organizar de la información ???
Usando métodos consistentes para...
• Agrupar
• Ordenar
• Etiquetar y
• Desplegar gráficamente
... la información
1. “Dividir en unidades lógicas -Trozos de información-

• Trozo de información” ... Concepto flexible acorde con el sentido
común, organización lógica y conveniencia del usuario...”
• “La naturaleza del contenido sugiere la mejor manera de subdividir y

organizar la información...
Ej.: trozos cortos para leer en pantalla ó...
...puede que más largos para facilitar impresión”
2. “Establecer jerarquía de importancia y generalidad entre

esas unidades.
...aún si solo sirve para determinar las estructuras básicas de navegación”
“
Home Page
Menús
principales
Submenús
principales
Páginas de
contenidos
3. “Usar esa jerarquía para ESTRUCTURAR las RELACIONES

entre los trozos de información...”
“Los usuarios se construyen modelos mentales acerca de la

organización de la información, y luego usan esos modelos para
encontrar cosas que no han visto aun...”
Modelo
confuso?
Arquitectura de la Información Ciencia de la

Organización de la
Información
Disciplina emergente basada en
que define Entendimiento humano
Organización de la información
Navegación En los sistemas
de información
Etiquetados
Sistemas de búsqueda
Para diseñar una aplicación se debe definir:
» objetivos
» contenidos
» funcionalidades
» navegación
» interacción en general
Todas éstas son tareas propias de la Arquitectura de la Información

“Contenido mal estructurado + sistemas de

búsqueda e interacción no claros = mala experiencia
del usuario = fracaso del diseño de la aplicación”
Las fallas en la AI producen:
Pérdidas económicas.
Pérdidas de productividad.
Problemas legales
Qué es un arquitecto de la Información
Richard Saul Wurman

• “Una persona que hace claro lo complejo.
• “Una persona que crea el mapa o la estructura de información

que permite a otros encontrar su camino personal al conocimiento”
• “La ocupación profesional emergente del siglo XXI dedicada a las

necesidades de la era, basada en la claridad, el entendimiento
humano y la ciencia de la organización de la información.”
Wurman fue el primero en usar el término “Arquitectos

de la Información” en su libro del mismo nombre
publicado en 1962.
Edward Tufte:
“El responsable de diseñar la presentación de la información para

facilitar el entendimiento.”
Tufte es profesor en la Universidad de Yale.

Su trabajo, plasmado en diversos libros, trata acerca de cómo
presentar todo tipo de información en la forma más clara posible.
Rosenfeld y Morville
“El AI clarifica la misión y visión del sitio, equilibrando las

necesidades del patrocinador y las necesidades de la audiencia”
“Determina el contenido y funcionalidad que el sitio va a tener”
APUNTE: Louis y Peter fundaron Argus, empresa especializada en consultoría de Arquitectura de

la Información. Con la publicación de su libro en 1998 generaron una comunidad en torno al
tema, llamada ACIA. El libro ha sido traducido al español por la editorial McGraw-Hill el año
2000, bajo el nombre "Arquitectura de la Información para el WWW"
Rosenfeld y Morville
“Especifica cómo los usuarios van a encontrar la información al

definir su organización, navegación, etiquetado y sistemas de
búsqueda”
“Mapea cómo el sitio se va a acomodar al cambio y crecimiento

en el tiempo”
Perfil de un arquitecto de la Información
• Periodismo / Ciencias de la Información
• Bibliotecología
• Psicología
• Diseño Gráfico
• Marketing
•Ciencias de la Computación
El arquitecto de la Información dentro del equipo
“Naturaleza multidisciplinar del diseño : el diseño de un

proyecto multimedia no puede ser desarrollado por una sola
persona. Son necesarios:
• Jefe de proyectos (project manager)

• Arquitecto de la Información
• Director artístico
• Director técnico
• Director comercial”
La relación de la AI con la usabilidad

Arquitectura
de la USABILIDAD
información
“…medida en la cual una aplicación puede ser usada por

usuarios específicos para conseguir objetivos específicos con:
• “Efectividad: La medida en la cual los usuarios pueden alcanzar

sus metas de tareas”.
• “Eficiencia: Mide los recursos usados para realizar la tarea”.
• “Satisfacción: Mide la reacción afectiva de los usuarios respecto a

la aplicación”.
La relación de la AI con el UCD
USABILIDAD
orígenes
UCD - User Centred Design-
“…una forma de entender el diseño que tiene en

cuenta al usuario en cada fase de su proceso…”
La relación de la AI con el UCD
Adaptado de: Terry Swack, “Experience Design”.

La relación de la UCD con HCI

UCD (User Centred Design)
orígenes
HCI (Human Computer Interaction)
“…Corriente de estudio multidisciplinar que investiga la

interacción entre las personas y los ordenadores desde
diferentes puntos de vista: procesos psicológicos,
comunicativos, físicos, ergonómicos, etc…”
¿PORQUÉ IMPORTA?
DESDE LA PERSPECTIVA DEL USUARIO
• Inhabilidad para encontrar información.
• Las necesidades de información varían.
• Las preferencias varían.
• La experiencia varía.
¿PORQUÉ IMPORTA?
DESDE LA PERSPECTIVA DE LOS PRODUCTOS
• Costos de encontrar la información.
• Costos de no encontrar la información.
• Costos de administrar el contenido.
• Costos políticos.
TAREAS PROPIAS DEL ARQUITECTO DE INFORMACIÓN
• Aclarar la misión y la visión del sitio.
• Definir contenido.
• Definir funcionalidades.
• Definir la organización, navegación, rotulado

y búsqueda.
• Planificar cómo se adaptará el sitio al cambio

TAREAS PROPIAS DEL ARQUITECTO DE INFORMACIÓN
• Antiguamente una misma persona era responsable

de todos los aspectos de un sitio. (Webmaster
clásico)
• Todologo.
• Obsoleto.
• Actualmente se requiere un equipo multidisciplinario.

EQUIPO MODERNO
Arquitectura
de la
información
Diseño
Marcadotecnia
gráfico
Administración
de proyectos
Programación Editorial
•Introducción a la Arquitectura de la Información

•Proceso de diseño de la aplicación en AI:
• Fase 1: Planificación estratégica

• Fase 2: Análisis de contenidos y servicios
• Fase 3: Organización de la información
• Fase 4: Diseño de los sistemas de navegación
• Fase 5: Diseño de los sistemas de rotulación
• Fase 6: Diseño de página (AI-Diseño interfaz)
Fase 1. Planeación Estratégica

FASE 1: Planeación estratégica
• “Definición concreta de los objetivos de la aplicación”
• “Establecer formas de actualización de contenidos”
• “Establecer responsables del diseño y desarrollo del site”
“ …Esta fase la ejecuta, normalmente, el Jefe de Proyecto. El

Arquitecto de la Información le ayuda en la definición de objetivos…”
• “Definición concreta de los objetivos de la aplicación”
• “Establecer formas de actualización de contenidos”
• “Establecer responsables del diseño y desarrollo del site”
“ …Esta fase la ejecuta, normalmente, el Jefe de Proyecto. El

Arquitecto de la Información le ayuda en la definición de objetivos…”
Objetivos Usuarios
Contenidos
Mantenimiento Tratamiento
Tecnología

Fase 2. Análisis de contenidos y servicios

FASE 2: Análisis de contenidos y servicios
“Define toda la información que el usuario podrá

encontrar dentro de la aplicación o site y todos los
servicios, (utilidades: webmail, encuestas,
buscadores, foros, chat, juegos, contacto, mapa,
opción de imprimir, otros)”.
Fase 3. Organización de la información

FASE 3: Organización de la información RETOS
• El contenido en Internet se ha multiplicado

casi exponencialmente.
• Cada autor es responsable de organizar su

contenido.
• La información está en alguna parte, pero no

es fácil encontrarla.
FASE 3: Organización de la información
Ambigüedad El lenguaje es ambiguo
Heterogeneidad
DIFICULTADES
(en el proceso de
organización de Diferencias en Perspectiva del creador diferente
la información) las perspectivas a perspectiva del usuario.
Políticas internas Compromisos de la empresa

Sistemas de
Clasificación
- Esquemas -
Organización “Definir con que

Se basa en criterios o atributos se
de la
van a agrupar los
información
contenidos”.
Estructuras
“Define tipos de
relaciones entre
los elementos del
contenido y los
grupos”.
Sistemas de Clasificación - Esquemas-
Sugieren un modelo mental.

Cómo agrupar y navegar.
Caminos de acceso a la información.
¿Cómo organizo mi información?
Estructuras
Tipos de relación entre el contenido.

La forma de la información.
¿Cómo estructuro la información?
Alfabético
Secciones muy definidas y
Exactos excluyentes entre ellas.
Cronológico
El usuario debe saber el
nombre de lo que busca.
Geográfico
Sistemas de
clasificación de
la información Temáticos: por tipos de contenido
Funcionales: (software: abrir...)
Para audiencias. Públicos específicos:

Ej: profesores-estudiantes)
Ambiguos Conducidos por metáforas: (Windows)
NO!!! Esquemas híbridos: ¡confunden!

FASE 3: Organización de la información.

Sistemas de organización: Esquemas exactos
• “Describen información conocida”.
• “Son objetivos.” Alfabético

Secciones muy definidas y
excluyentes entre ellas.
• “Fáciles de mantener.” Cronológico
El usuario debe saber el
• “Fáciles de usar.” nombre de lo que busca.
Geográfico
• “Todo tiene un lugar exacto.”
• “Perfecto para usuarios que saben exactamente lo que

buscan”
FASE 3: Organización de la información. Sistemas de organización:
Esquema exacto: Cronológico
http://www.annals.org/
Esquema exacto: Alfabético
http://www.rxlist.com/
http://www.emedicinehealth.com/script/main/art.asp?articlekey=60185
Esquema exacto: Geográfico
http://maps.yahoo.com/ http://maps.yahoo.com/flash/features

Sistemas de organización: Esquemas ambiguos
“Describen información incompleta.” Temáticos
“Son subjetivos.”
Funcionales
“Difíciles de mantener.”
“Difíciles de usar.” Por audiencia o

Públicos específicos:
“Los elementos se traslapan.”
“Perfecto para usuarios que no Conducidos por metáforas

saben con precisión lo que buscan.”
“Útil para vagar por el sitio” Esquemas híbridos


Sistemas de organización: Esquemas ambiguos
Temáticos: por tipos de información, por
“Dividen la información en materias o tópico
categorías que proponen
definiciones exactas.“ Funcionales: orientados a la realización de
procesos o tareas. (software, abrir...)
“Están impregnados por la
Por audiencia o Públicos específicos: En
ambigüedad del lenguaje y de la
casos en que se pueden predefinir con
subjetividad humana.”
claridad una o más audiencias Ej: profesores-
estudiantes
“No obstante, son más útiles
que los exactos. “ Conducidos por metáforas: relaciones entre
elementos conocidos de la vida cotidiana y
“Por ejemplo la antigua ficha elementos novedosos y desconocidos.
catalográfica, muestra tres (Windows ventanas)
esquemas primarios de
organización. Se pueden buscar Esquemas híbridos: ¡confunden! puede
libros según autor, título o materia.” ocurrir cierta desorientación.
Esquemas ambiguos: Temáticos
http://www.mp3.com/
Esquemas ambiguos: Funcionales
http://www.microsoft.com/spain/seguridad/pc/
http://www.snoopy.com/comics/peanuts/fun_and_games/link_icons.html

http://www.grupobancolombia.com/home/trans/trans.asp?keepThis=true&TB_iframe=true&height=350&width=500#
http://www.microsoft.com/spain/
Esquemas ambiguos: Por audiencia
http://www.microsoft.com/spain/
“Definen tipos de relaciones

Estructuras entre los elementos del
contenido y los grupos”.
Secuenciales
Jerárquicas
Estructuras
Hipertextuales
Matriciales
Matriciales dinámicas
Estructura secuencial multimedia
http://www.download.com/

Estructura secuencial multimedia
“La estructura más familiar, que nos recuerda a las páginas de un libro o a una colección de
diapositivas. Se muestran series cronológicas de varias estructuras lineales, ejemplo: la
historia de diferentes disciplinas artísticas, su representación conjunta permite establecer
conexiones entre ellas”

Estructura jerárquica
Estructura jerárquica
“Empiezan con un menú principal que se ramifica en

diferentes vías. Los ejemplos más característicos son los
diagramas organizativos y los árboles de información”
http://doctorat.e-gim.net/

Estructura hipertextual
1 2 3 4
http://www.nosolousabilidad.com/index.htm
http://argus-acia.com/index.html

Estructura hipertextual multimedia
“Tiene los nodos conectados entre sí en

función de una relación que el autor ha
previsto”.
“En numerosas aplicaciones de

formación, se organizan y se relacionan
contenidos a partir de la evolución o
ampliación de los contenidos”.
“Da lugar a complejas redes de

contenidos que siguen una estructura
relacional de contenidos”
http://www.nosolousabilidad.com/index.htm
http://argus-acia.com/index.html

Estructura Matricial
Alumnos Profesores Tutores
Curso 1
Curso 2
Curso 3

Estructura Matricial
Concepto de Bases de datos
La consulta de valores de los campos permite obtener un conjunto de

información que cumpla unas condiciones de búsqueda determinadas.
Otras veces, la aplicación se estructura sobre una base de datos para

garantizar su mantenimiento, aunque el acceso del usuario a la información se
vea limitado por el diseño y las funcionalidades del sistema.
http://www.3xl.net/

Estructura Matricial en el diseño modular dinámico
Lunes
Módulo Módulo Módulo
NOTICIA FOTO DEL ENCUESTA
DÍA
Fútbol
Básquet
Tenis
http://www.3xl.net/p3xl/3xlItem.jsp?seccio=home3xl&item=programacio&idint=069

Martes
DÍA
Fútbol
Básquet
Tenis

Miércoles

DÍA
Fútbol
Básquet
Tenis
Estructuras combinadas
Convoc. Convoc. Convoc.

1 2 3
Curso 1
Curso 2
Curso 3
EJEMPLO
DESCRIPCIÓN PROYECTO
“Proyecto de diseño y desarrollo de un CD-ROM
promocional de unas galerías comerciales”
OBJETIVOS
“Promocionar las tiendas y servicios del centro comercial”.
USUARIOS
“Los clientes del centro. Se les regalaría el CD-ROM al
comprar en cualquier tienda del centro, para que conozca
todos los servicios y otras tiendas que le ofrece el centro”.
Totalidad de información
El conjunto de tiendas y locales del centro comercial.

Dividir en unidades lógicas

Tania
Diva Spa
Disco “Salsita”
Bar Manolo
Arturo Calle
Pub “El lobo” Pizzería Mamma

Definir sistema de clasificación

Sistema de clasificación exacto:

Clasificación alfabética
Arturo Calle
Bar Manolo
Disco “Salsita”
¡NO!
Diva Spa El usuario tendría
que saber los nombre
Pizzería Mamma de los locales...
Pub “El lobo”
Tania
Sistema de clasificación ambiguo:

Clasificación temática
Diva Spa
Tania
Disco “Salsita”
Restaurante Manolo
Relación: son tiendas de ropa
Relación: son restaurantes

Relación: son para salir de noche
Arturo Calle
Pizzería Mamma
Pub “El lobo”
Definir estructura de contenidos

Centro comercial
tiene
Para comprar ropa Para salir Para comer Para peinarte
tiene tiene tiene tiene
Tania Arturo Disco Pub Rest. Pizzería Diva Spa

Calle “Salsita” “El lobo” Manolo Mamma
Fase 4. Diseño de sistemas de navegación

Hipertexto: “una tipología textual subyacente a todas las realizaciones

tecnológicas que permiten la interconexión de nudos multimediales para
permitir un recorrido reticular al lector”
Gianfranco Bettetini, Nicoletta Vittadini y Barbara Gasparini. “Gli spazi dell’ipertest”, Milán.1999:XI.
“Interpretar el hipertexto “en clave espacial”, o sea entenderlo como un

“lugar donde se estructura y vuelve visible un significado,
predisponiéndose para su encuentro con el lector”
Gianfranco Bettetini, Nicoletta Vittadini y Barbara Gasparini.“Gli spazi dell’ipertest”, Milán 1999:X
En otras palabras,
“El hipertexto, un macrotexto compuesto por microtextos, se caracteriza

por:
• “Organización modular y reticular del contenido”
• “Presencia de diferentes tipologías de links que conectan los

módulos textuales”.
• “Ausencia de una dirección de lectura única y obligatoria.

interactividad en la lectura”.
“Esta definición de Hipertexto es amplia e incluye, más allá del género al

cual pertenecen, tanto a las producciones off-line (cd-rom) como a Internet.”
Arquitectura
• “Estructura, forma”
• “Sistema de organización de algo.”
Estructura
• “Distribución, orden y enlace de las partes de un todo.”
• ~ de datos: “agrupamiento de un conjunto de datos que

tienen unas propiedades características.”
FASE 4: Diseño de los sistemas de navegación
“La jerarquía de la información es el

Jerárquicos sistema de navegación principal”.
“Sistema que afecta a todo el site, y está

Tipos de Globales presente en todas las páginas”.
sistemas de
navegación
“Sistema que afecta a un sub-site, y convive
Locales con el sistema global de navegación”.
Ad hoc “Hipertexto, o vínculos externos especiales”

Barras de navegación. Conjunto vínculos

hipertextuales juntos. Navegación global y local.
Integrados Siempre visible. Problema en la elección de iconos.
Menús textuales. Secciones de 1r

nivel de contenidos.
Menús desplegables. Muchas opciones de

navegación compactas. Ojo con tapar contenido.
Elementos
de navegación
Tabla de contenido: en sistemas jerárquicos.

Texto o imágenes. Muy útil.
Índice: Cuando no jerárquico.
Remotos Mapa del site: Presenta estructura de forma

visual, más allá del texto.
Visita guiada: muy útil en zonas restringidas

con servicios. Navegación lineal.
“Tener en cuenta que,

además de los elementos
de navegación, se tiene:
Elementos
de navegación
• Sistemas de búsqueda
• La navegación del
browser”
Fase 5. Diseño de sistemas de rotulación.

Titulación
Fase 5. Diseño de sistemas de rotulación. Titulación
“Etiquetar, dar nombre a las

unidades de contenidos, a los
Rotular grupos de contenidos, y a los
o
servicios y funcionalidades de
Titular
la aplicación o el sitio web”.
“Es muy difícil (ambigüedad del

lenguaje)”.
Fase 5. Diseño de sistemas de rotulación: Titulación
Especialmente importante
Rotulado de los sistemas de navegación
“Aplicados con eficacia

crean
Sentido de familiaridad”
Fase 5. Diseño de sistemas de rotulación. Titulación
Rótulos de indexación
<META> o registro base de datos
“No visibles para el usuario”

“Muy importantes para los sistemas de búsqueda”
Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Tratamiento
Tecnología

Primera aproximación de la interfaz:
Plan de explotación Presupuesto - Estilo artístico (colores,

tipografía, texturas,...)
- Composición
- Formas de interacción
- Navegación...
TRATAMIENTO
¿CÓMO LO DIREMOS?
Diseño de página
Fase 6. Diseño de página

“Diseño de la página de inicio
Diseño
de
página
Diseño de las páginas interiores
Importancia diseño navegación”
Fase 6. Diseño de página. Página de Inicio
• “El diseño de página de la página de inicio es diferente a

la del resto de páginas. Comparten estilo visual”.
• “Las páginas de bienvenida que no dan información

son totalmente inútiles y lo único que hacen es ralentizar
el acceso del usuario en su intento por llegar a la
información que le interesa”.
• “Ha de responder a lar preguntas: ¿DÓNDE ESTOY? y

¿QUÉ ENCONTRARÉ EN ESTA APLICACIÓN?
• “El Logotipo debe ir más grande que el de las páginas

interiores”
• “Debe incluir un directorio de las principales áreas de

contenido de la aplicación”
• “Si la aplicación tiene mucha información, en la página de

inicio debe tener un buscador”.
• “Se presentan las noticias o promociones especiales”.
• “Se destina mucho más espacio para la navegación que en el

resto de páginas”.
• “La navegación global puede ser diferente que en el resto de

páginas”.
• “Debe ser una página “viva”, con información constantemente

nueva”.
Fase 6. Diseño de página. La navegación aplicada al

diseño de página
“En todo diseño de página, deben estar presentes

4 tipos de navegación”
• “Navegar “hacia abajo”, hacia los hijos de la página”
• “Navegar “hacia arriba”, hacia los padres de la página”.
• “Navegar a través de secciones de la aplicación”
• “Navegar con utilidades como la ayuda o el buscador”

Fase 6. Diseño de página. La navegación aplicada al

diseño de página
• Vista de alta fidelidad.
• Vista de baja fidelidad.
• Vista abstracta.
Fase 6. Diseño de página. La navegación aplicada al diseño de

página. Vista de alta fidelidad




página. Vista de baja fidelidad

página. Vista de baja fidelidad (wireframe)

página. Vista Abstracta
• Motor de búsqueda. • Ofertas y promociones.
• Productos y servicios. • Opciones de personalización y

• Soporte. registro.
• Software. • Anuncios legales y de

privacidad.
• Noticias.
•Retroalimentación.
• Promociones principales
• Perfiles de visitantes.
y secundarias.
•Comprar. • Perfiles de aplicación


http://www.scholastic.com/kids/
Fase 6. Diseño de página. Navegar a ítem “hijo”

1. Navegar a ítem “hijo”

Fase 6. Diseño de página. Ítem “hijo”

Fase 6. Diseño de página. Navegar a sección padre

2. Navegar a sección padre

Fase 6. Diseño de página. Sección padre

http://www.scholastic.com
Fase 6. Diseño de página. Navegar a través del site
3. Navegar a través
de las secciones
del site
Fase 6. Diseño de página. Navegar a través de las utilidades
4. Navegar a través de utilidades

Fase 6. Diseño de página. Navegaciones

Fase 6. Diseño de página. Navegación aplicada al diseño

de la página
• “La navegación global debe estar en todas las páginas (en el

home puede ser diferente)”.
• “Utilizar un mismo estilo de navegación en todas las páginas

para crear una navegación consistente e incrementar el control
del usuario sobre ésta”.
• “Separar (espacial y visualmente), los cuatro tipos de

navegación: arriba, abajo, a través, utilidades”.
• “Utilizar encabezados descriptivos arriba de las páginas”.

Fase 6. Diseño de página. Navegación aplicada al diseño

de la página
• “Ayudar a los usuarios que lleguen desde links externos a

acceder a la página principal y a las secciones principales”.
• “No crear páginas muertas, no a las páginas sin opción de

navegación”.
• “Situar los elementos de navegación arriba y debajo de las

páginas”.
• “Incluir elementos de navegación que lleven a utilidades

básicas (Ej: Ayuda)”
Fase 6. Diseño de página. Elementos de navegación integrados
Barras de navegación
Elementos Menús textuales

de navegación
integrados
Menús desplegables
Fase 6. Diseño de página. Barras de navegación
• Conjunto de vínculos hipertextuales juntos”
• “Navegación global y local”
• “Siempre visible”
• “Problema en la elección de iconos (que sean

conceptualmente claros)”
Necesidades de Organización y funcionamiento

de una aplicación o sitio web
Aplicación
Sitio web
Arquitectura funcional
Arquitectura de navegación
Arquitectura de información
Diseño de página
EJEMPLO
Fase 6. Diseño de página. Ejemplo
Centro comercial
tiene
Para comprar ropa Para salir Para comer Para peinarte
tiene tiene tiene tiene
Tania Arturo Disco Pub Rest. Pizzería Diva Spa

Calle Salsita El lobo Manolo Mamma
Bienvenida Mapa
¿qué quieres hacer?
Comprar ropa Salir Comer Peinarte
Tania Arturo Disco Pub Rest. Pizzería Diva Sp

Calle Salsita El lobo Manolo Mamma
Sí ¿quieres hacer algo más?
Opciones generales siempre disponibles:

No
Página web -Salir de la aplicación
-Imprimir lista de establecimientos
Salir -Mapa del centro
Logo
grande
¿Qué quieres hacer?
comprar salir comer peinarte

Logo
grande
comprar salir comer peinarme
Funcionalidades: Mapa, Imprimir, Salir

Logo
grande
comprar salir comer peinarme
Tania
Arturo Calle
logo Tania
Imágenes
1 2 3
Arturo Calle
logo Tania
Imágenes
1 2 3
logo Tania
Imágenes
1 2 3
Rest. Manolo Pizzería Mamma

Ejemplo:
El MODELO ARGUS
Para el diseño de la información
AI: ¿Cómo se trabaja? Proceso ARGUS
EJEMPLO:
Cliente: empresa que fabrica material para la

construcción
Descripción del proyecto: Diseño y desarrollo

de un sitio web con catálogo de productos y
posibilidad de venta online a constructores y
promotores inmobiliarios.
Objetivos
• “Agilizar el proceso de venta a empresas y clientes
fijos”
• “Aumentar la bolsa de clientes”
• “Ofrecer información de interés a los clientes para

que visiten a menudo el site y así vean las ofertas
de productos”
• “Mejorar la imagen de la empresa”

Audiencia
• “Comprarán: constructores y promotores (a ellos se

debe orientar los contenidos y parte de la interfaz)”
• “Efectuarán la compra: secretarios y/o comerciales”
• “Hábito de uso de nuevas tecnologías, a ellos se debe

orientar parte de la interfaz”

Requisitos de contenidos y funcionalidades
• Contenidos:
• Información de las productos y de las
ofertas
• Actualidad relacionada con el mundo de
la construcción
• Información corporativa
• Funcionalidades:
• Búsqueda de producto concreto
• Mapa del site
• Compra en entorno seguro
Agrupar contenido
1. Catálogo de productos
1.1. Productos tipo x
1.1.1. Producto 1
1.2.3. Producto n
1.2. Productos tipo Z
2. Actualidad
3. Información corporativa
Diseño conceptual
• "Página inicio: atracción a través de actualidad

informativa y de ofertas de productos”
• “Catálogo: Primero información producto más

fotografía, luego posibilidad compra”
• Otros.
Brainstorming
Aportación conjunta de ideas sobre:

• Diseño conceptual
• Metáforas
• Interfaz:
Fuentes
Colores
Tamaños
Imágenes
Otros
Explorar metáforas
• “Construcción: interfaz que juegue con elementos

visuales del mundo de la construcción”.
• Ejemplo.:
• “Página de inicio se estructurará a nivel visual
sobre un plano de arquitecto”
• “Noticias como clasificados inmobiliarios en los
periódicos”
• “En lugar de carrito de la compra, una carretilla
de construcción”
Escenarios
• "Plano arquitectónico: página

inicio
• Marketplace
• Noticias
• Otros

Mapas de alto nivel
Inicio
Catálogo Información Actualidad

corporativa
Productos X Productos Z
Noti 1 Noti n
PX1 PX2 PXn PZ1 PZ2 PZn
Compra Compra Compra

paso 1 paso 2 paso 3
Bocetos de diseño
• “Esquemas de la interfaz visual, aplicando la

composición, colores, tipografía, tratamiento
de los elementos multimedia... “
• “El conjunto de elementos que darán la

imagen corporativa: look & feel”
Esquemas de página Información Corporativa
Barra Funcionalidades
logo Comprar Buscar Mapa
Línea oferta Línea oferta Actualidad

Entradita entradita Entradita entradita Línea titular noticia
entradita entradita entradita entradita
tradita texto texto Entradita vvventradita
entradita entradita vvetraditata
Línea oferta Entradita vvemadtaita
Entradita entradita Entradita entaa.
Línea oferta entradita entradita
Entradita entradita
entradita entradita Línea titular noticia
tradita texto texto Línea oferta Línea titular noticia
entradita Entradita entradita
entradita entradita
Línea titular noticia
Monográficos
Línea oferta
Entradita entradita Línea nombre monográfico
entradita entradita Línea nombre monográfico
Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Tecnología
Mantenimiento
Contenidos
Media
MANTENIMIENTO Evolución de la aplicación

¿HABRÁ QUE HACERLO?
¿CÓMO?
Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Tecnología
Tecnología

Requerimientos de producción
Hard y soft
TECNOLOGÍA Requerimientos de usuario

¿QUÉ NECESITARÉ PARA LLEVAR A
Hard y soft
CABO EL PROYECTO?
Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Tecnología

Calendario de plazos
Personas y responsabilidades
PLAN DE PRODUCCIÓN
¿CÓMO LO ORGANIZAREMOS? Recursos técnicos
Plan de realización
Planificación
“Listado de tareas y la relación entre ellas.

Asignación de recursos.”
Programación
“Cuantificación del esfuerzo de cada tarea y

organización en una escala temporal.”
Control
“Determinar medidas de control de cumplimiento

del plan de realización.”
Objetivos Usuarios
Contenidos
Tratamiento
Mantenimiento
Tecnología
Plan de explotación
Presentación y “packaging”
Promoción y publicidad
Distribución
PLAN DE EXPLOTACIÓN
Venta
¿CÓMO LO “VENDEREMOS?
Objetivos Usuarios
Contenidos
Elementos de un presupuesto
Tratamiento
Mantenimiento
Tecnología
Recursos Recursos Contratación
humanos técnicos de servicios

Diseño

Desarrollo
Pruebas
Difusión
PRESUPUESTO
¿CUÁNTO VA COSTAR? Otros
Material y ejemplos tomados de:

“Los espacios hipertextuales : la arquitectura de la información.” Clicks modernos. Cátedra de Fundamentos
de Comunicación digital. www.uvic.es
Los Elementos de la Experiencia de Usuario. Jesse James Garrett.jjg@jjg.net. Traducción al Castellano por
Javier Velasco
Sobre mi. Editorial Stone.2001
Interfaces_interacciones_hipertextos_cyberculturas
http://dialogica.com.ar/clicsmodernos/archives/2003/09/8_los_espacios.html#more
**Información tomada del Material de apoyo a la docencia del Master

Diseño de aplicaciones multimedia y espacios Internet
LAM-UPC. Barcelona
MATERIAL PARA EL CURSO ESTRUCTURA HIPERTEXTUAL RIZOMATICA

Por: Clara Inés Espinel C
asignaturas07@yahoo.com
Medellín. Colombia.

Intr Gestion Produccion

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Intr Gestion Produccion

Cargado por

Copyright:

Formatos disponibles

Universidad de Antioquia Facultad de Comunicaciones

Aprender los pasos a seguir para:

una aplicación multimedia

• Etapa de Definición de proyecto

• Etapas de producción Ejercicios

•Etapas de desarrollo, explotación y Entregas

“Un proyecto es un intento

Gido y Clemens, Administración exitosa de

¿Qué es un proyecto multimedia?

“Mediante el diseño de interfaces

Alpiste, Brigos, Fernández y Monguet, Gestión y Organización de

¿Qué es una producción multimedia?

“El proceso productivo del producto multimedia es un

La aplicación multimedia final representa un incremento

Alpiste, Brigos, Fernández y Monguet, Gestión y Organización de la producción I, 1999. GIM-BARCELONA

¿Qué significa gestionar un proyecto?

Etapas de la producción multimedia

1. Definición del proyecto

* Laboratorio de aplicaciones multimedia LAM, de

“Redactar un documento con el concepto de la

“El concepto de la aplicación pone de acuerdo

Plan de producción y plazos

Plan de explotación Presupuesto

Plan de producción y plazos Objetivos generales

Son aquellos que explican el por qué.

OBJETIVOS Especifican los usos que tendrá la

Plan de explotación Presupuesto • Demográficas

USUARIO •Utilización de la aplicación

Documentos, textos, datos, información

Definición de los contenidos

• “Arte y ciencia de organizar la información para

• “Los sitios se forman de contenido editorial,

• “La manera en que todo eso se estructura es la

Razones para dividir la información

...”pequeños trozos de información relacionada son más fáciles de

...Esquema de organización consistente...

...que forme la base del documento hipertexto (Sitio Web).”

“Pequeño” es un termino relativo”

Porqué dividir la información

• “Los humanos tienen limitaciones para mantener en

• “... por eso lectores-usuarios raramente leen pasajes

Pasos básicos en la organización de la información

1. “Dividir en unidades lógicas (los trozos de

2. “Establecer jerarquía de importancia y generalidad

entre esas unidades”.

3. “Usar esa jerarquía para ESTRUCTURAR las

relaciones entre los trozos de información”.

4. “Estudiar, probar, y analizar el éxito (o fracaso)

estético y funcional del sitio.”

...¿¿¿ Cómo organizar de la información ???

Usando métodos consistentes para...

Pasos básicos en la organización de la información

1. “Dividir en unidades lógicas -Trozos de información-

• “La naturaleza del contenido sugiere la mejor manera de subdividir y

Pasos básicos en la organización de la información

2. “Establecer jerarquía de importancia y generalidad entre

Pasos básicos en la organización de la información

3. “Usar esa jerarquía para ESTRUCTURAR las RELACIONES

“Los usuarios se construyen modelos mentales acerca de la

Arquitectura de la Información Ciencia de la

que define Entendimiento humano

Para diseñar una aplicación se debe definir:

Todas éstas son tareas propias de la Arquitectura de la Información

“Contenido mal estructurado + sistemas de