Desarrollo de proyectos Interactivos

Vista previa del material en texto

Desarrollo de Proyectos 
Interactivos 
 
 
Bloque Electivo 
 
 
Compilador: 
Lic. Ingrid Riquelme Ramírez 
 
 
Licenciatura en Diseño Gráfico 
 
 
CONOCERSE ACEPTARSE AMARSE CUIDARSE SUPERARSE TRANSMITIR TRANSFORMAR 
 
 
 
Introducción 1
Desarrollo de Proyectos Interactivos 
Índice 
 
Introducción 3 
Objetivo General 4 
 
Tema 1. Manejo de la información en interactivos 5 
Objetivo de Aprendizaje 5 
Sinopsis 5 
1.1 Hipertexto 5 
1.2 Hipermedia 8 
1.3 Hipervínculos o enlaces 9 
1.4 Estructuración 12 
 
Tema 2. Interfaces para la interactividad 17 
Objetivo de Aprendizaje 17 
Sinopsis 17 
2.1 Diagramación y estructura 17 
2.1.1 Sistemas de navegación 18 
2.2 Legibilidad 25 
2.3 Proporción 27 
2.4 Accesibilidad para el usuario 28 
2.5 Diagrama de hipertexto 30 
 
Tema 3.Formatos 31 
Objetivo de Aprendizaje 31 
Sinopsis 31 
3.1 Formatos para proyectos interactivos en CD- ROM 32 
3.2 Formatos para proyectos en línea 32 
3.3 Compatibilidad entre plataformas 33 
 
Tema 4. Producción 35 
Objetivo de Aprendizaje 35 
Sinopsis 35 
4.1 Creación de un master 35 
4.2 Programas FTP para colocar proyectos interactivos en Internet 36 
 
Bibliografía General 39 
 
 
 
 
 
 
 
 
 
Introducción 2
Desarrollo de Proyectos Interactivos 
Introducción 
 
Desde el desarrollo de la Word Wide Web, la forma de la lectura ha cambiado 
bastante, anteriormente con los libros sólo se leía de forma secuencial, 
actualmente esto ha cambiado con el hipertexto y la hipermedia, en donde 
muchas de las ocasiones parece no existir una trayectoria definida por el autor, 
sino que el lector elige hacia dónde quiere ir, qué quiere hacer y hasta en algunos 
casos el mismo escribe la historia, formando parte de una comunidad de 
conocimiento inmensurable. 
 
Al contar con todos los elementos es necesario basarse en una estructura 
dependiendo de las necesidades del proyecto y del usuario, con ello se definirá 
desde un principio cuál es el grado de poder del usuario dentro del proyecto y 
qué caminos se desea sean elegibles. 
 
Para tener interactividad con el usuario no hace falta introducir en el proyecto 
todos los medios a nuestro alcance, tampoco basta con que sea interactivo sino 
también accesible, desde el uso correcto de tipografía hasta el acceso vía 
módem o banda ancha o por CD, son aspectos importantes en el desarrollo de 
un proyecto interactivo. 
 
Debe elegirse el soporte más adecuando para el proyecto interactivo ya sea en 
línea o fuera de línea (CD), dependiendo del contenido, usuarios, costo, 
almacenamiento, velocidad, facilidad de acceso, retroalimentación y 
actualización. 
 
Para subir en línea o crear un CD híbrido, es necesario conocer las herramientas 
necesarias, por ejemplo para proyectos en línea lo más recomendable es el uso 
de aplicaciones FTP, mientras que para proyectos interactivos con distribución vía 
CD, se genera el proyector y el ejecutable, existen ciertas limitantes en éste tipo 
de distribución por los sistemas operativos, sin embargo, existen opciones y se 
puede solucionar para que el proyecto sea completamente accesible 
independientemente del uso de Mac o PC. 
 
 
 
 
Objetivo general 3
Desarrollo de Proyectos Interactivos 
 
 
 
 
 
 
 
 
 
 
 
 
Objetivo general 
 
 
 
 
Al término del curso el estudiante manejará los elementos y la estructura 
necesaria para desarrollar y producir proyectos de comunicación interactiva, tanto 
en línea como para CD-Rom. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 4
Desarrollo de Proyectos Interactivos 
 
Tema 1. Manejo de la información en interactivos 
 
Subtemas 
 
1.1 Hipertexto 
1.2 Hipermedia 
1.3 Hipervículos o enlaces 
1.4 Estructuración 
 
 
Objetivo de Aprendizaje 
 
Al término del tema el estudiante comprenderá lo que es el hipertexto e 
hipermedia así como algunas de sus características y formas de estructuración. 
 
 
Sinopsis 
 
Desde el desarrollo de la Word Wide Web, la forma de la lectura ha cambiado 
bastante, anteriormente con los libros sólo se leía de forma secuencial, 
actualmente esto ha cambiado con el hipertexto y la hipermedia, en donde 
muchas de las ocasiones parece no existir una trayectoria definida por el autor, 
sino que el lector elige hacia dónde quiere ir, qué quiere hacer y hasta en algunos 
casos el mismo escribe la historia, formando parte de una comunidad de 
conocimiento inmensurable. 
 
La hipermedia ha enriquecido al conocimiento pues ya no es solo texto, sino se 
conforma de imágenes, sonidos, audio y cualquier cantidad de aplicaciones que 
se le pueden integrar para lograr una mayor interactividad con el usuario. 
 
Al contar con todos estos elementos es necesario basarse en una estructura 
dependiendo de las necesidades del proyecto y del usuario, con ello se definirá 
desde un principio cuál es el grado de poder del usuario dentro del proyecto y 
qué caminos se desea sean elegibles. 
 
 
1.1 Hipertexto 
 
Algunos dicen que el hipertexto comienza con las ideas de Vannevar Bush1, otros 
con los pensamientos de Paul Otlet2, pero quien acuñó el término de Hipertexto 
 
1Vannevar Bush y el Memex (Memory Expander) “As we may think”, 
www.press.umich.edu/jep/works/vbush
2 Paul Otlet, www.boxesandarrows.com/archives/forgotten_forefather_paul_otlet.php 
http://www.press.umich.edu/jep/works/vbush
 
 
Tema 1. Manejo de la información en interactivos 5
Desarrollo de Proyectos Interactivos 
 
fue Ted Nelson con la siguente definición: "un cuerpo de material escrito o 
pictórico interconectado en una forma compleja que no puede ser 
representado en forma conveniente haciendo uso de papel"3. 
 
En los años sesenta se presenta un proyecto llamado Xanadu4, su finalidad es la 
de disponer de toda la literatura escrita por la humanidad. El ve al hipertexto como 
un género literario en donde cualquier texto es Interrelacionable con otro. El 
usuario en el ordenador dispone de la información por medio de una base de 
datos y cada usuario añade vínculos, por lo que nada se pierde. 
 
El hipertexto genera la necesidad de la interacción por parte del receptor, esta 
interactividad puede darse en diversos grados, desde el solo ir cambiando la 
trayectoria a través de los enlaces, hasta que el mismo receptor se convierta en 
autor de la obra. Y así ha seguido evolucionando hasta lo que hoy conocemos 
como la www o world wide web, en donde podemos encontrar toda clase de 
información, transformándose en una red de conocimientos. 
 
Una de las características más importantes del hipertexto es que su lectura no es 
completamente secuencial como podría ser la lectura en un libro, aún limitando las 
trayectorias a las que puede recurrir el usuario, no es tan lineal, algunos escritores 
han creado novelas con hipertexto, donde la lectura es como un hipertexto, un 
ejemplo es la novela Rayuela de Julio Cortázar. 
 
El hipertexto se conforma de información la cual presenta nodos y enlaces, un 
nodo es la unidad de información, ésta puede ser la página, pantalla, escena, etc. 
y el enlace, es el vínculo entre cada unidad de información o nodo y cada nodo 
puede contener toda clase de información incluyendo multimedia aunque al haber 
multimedia se le llama hipermedia. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3 Ted Nelson, http://www.ldc.usb.ve/~abianc/hipertexto.html
4 Xanadú, www.aus.xanadu.com/xanadu/future.html#7
 
 
Tema 1. Manejo de la información en interactivos 6
Desarrollo de Proyectos Interactivos 
 
 
 
Figura 1.1 Ejemplo Nodo y enlace 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 7
Desarrollo de Proyectos Interactivos 
1.2 Hipermedia 
 
El término hipermedia es reciente, tiene una relación muy estrecha con el 
hipertexto, consta de los mismos elementos, un nodo y un enlace, la diferencia 
entre éstos dos son el uso de imágenes, audio, video, animación comoenlace en 
la hipermedia, mientras que en el hipertexto se usa obviamente el texto. 
 
 
Figura 1.2 Ejemplo Nodo y enlace en hipermedios 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 8
Desarrollo de Proyectos Interactivos 
1.3 Hipervínculos o enlaces 
 
Los hipervínculos o enlaces constituyen una de las partes primordiales del 
hipertexto, con ellos se traslada el usuario de un lugar a otro, encontrando 
información y siguiendo un camino predeterminado. 
 
Existen básicamente tres tipos de enlaces: 
 
1. Enlaces estructurales. Con este tipo de vinculación el usuario se traslada de 
un nodo a otro, respetando la estructura de la información, un ejemplo para 
identificar este tipo de vínculo, es cuando en una página de inicio hay varios 
botones los cuales al accionarlos muestran cierta información solicitada. 
 
 
 
 
 
Figura 1.3a Vínculos estructurales 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 9
Desarrollo de Proyectos Interactivos 
2. Enlaces asociativos. Son palabras o imágenes vinculadas a otros nodos 
que proporcionan mayor información relativa al tema. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.3b Vínculos asociativos 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 10
Desarrollo de Proyectos Interactivos 
3. Enlaces incrustados. Son aquellos vínculos que ayudan a los usuarios a 
encontrar lo que buscan si el lugar en donde están no es el adecuado. 
 
 
 
 
Figura 1.3b Vínculos incrustados 
 
 
Los vínculos al estar ligados íntimamente al hipertexto y a los hipermedios, deben 
ser llamativos y descriptivos. Siguen una función parecida a los encabezados en 
un periódico, te describen cierta información y la destacan de forma breve y 
concisa. 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 11
Desarrollo de Proyectos Interactivos 
1.4 Estructuración 
 
Al haber recolectado la información y contar con todos los nodos, se selecciona la 
estructura de hipertexto/hipermedia, depende básicamente del cada tipo de 
proyecto/usuario y sus necesidades, existen aproximadamente cuatro estructuras, 
las cuales se verán una por una a continuación. 
 
Secuencial o lineal 
 
Es la forma más simple de organizar la información, debido a que es 
completamente secuencial, generalmente es utilizada para contenidos educativos 
o presentaciones donde el contenido se va dando paso a paso, restringe bastante 
la interactividad, la ventaja de este tipo de estructura es que se asegura el acceso 
del usuario a la información. 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.4a Estructuración secuencial 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 12
Desarrollo de Proyectos Interactivos 
Jerárquica 
 
Este tipo de estructura conocida también como arborescente consta básicamente 
de una página principal de la cual se va desglosando la información, dependiendo 
de su orden de importancia, generalmente es utilizado para proyectos 
institucionales. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.4b Estructuración jerárquica 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 13
Desarrollo de Proyectos Interactivos 
Reticular 
 
Este tipo de navegación es una combinación entre la estructura secuencial y la de 
jerárquica, ordena la información categóricamente; es utilizada generalmente para 
uso académico, permite un grado mayor de interactividad por parte del usuario. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.4c Estructuración reticular 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 14
Desarrollo de Proyectos Interactivos 
Telarañas 
 
La telaraña es utilizada básicamente para usuarios avanzados, pues tienen un 
completo dominio sobre la información, pueden vincularse de cualquier parte del 
sitio sin haber un orden jerárquico, para los usuarios principiantes resulta ser muy 
confuso este tipo de navegación. Sin embargo con este tipo de estructura hay 
mucha más interacción con el usuario sin limitarle demasiado los trayectos 
posibles a elegir. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 1.4d Estructuración telaraña 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 1. Manejo de la información en interactivos 15
Desarrollo de Proyectos Interactivos 
La mayor parte de los sitios utiliza más de una estructura de navegación, 
dependiendo de los requerimientos de despliegue de la información. Se puede 
decir que mientras mayor sea el grado de complejidad se tenderá al uso de 
estructuras tipo telaraña y a mayor simplicidad se usará la secuencial. 
 
 
 
 
Figura 1.4e Uso Estructuras 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 16
Desarrollo de Proyectos Interactivos 
Tema 2. Interfase para la interactividad 
 
Subtemas 
 
2.1 Diagramación y estructura 
2.1.1 Sistemas de Navegación 
2.2 Legibilidad 
2.3 Proporción 
2.4 Accesibilidad para el usuario 
2.5 Diagrama del hipertexto 
 
 
Objetivo de Aprendizaje 
 
Al término del tema el estudiante desarrollará proyectos interactivos en base a la 
correcta elección de sistemas de navegación, facilitando la accesibilidad y 
usabilidad al usuario. 
 
 
Sinopsis 
 
La estructura de información se encuentra íntimamente ligada con los sistemas de 
navegación; esto se debe a que mientras mayor control se tenga sobre la 
organización de la estructura, más fácil es decidir sobre que sistema de 
navegación se basará el proyecto interactivo y el grado de interactividad que 
deberá tener; sin embargo, no basta con tener un sistema de navegación correcta 
y contar con toda la información, también hace falta pensar en el usuario. 
 
Para tener interactividad con el usuario, no hace falta introducir en el proyecto 
todos los medios a nuestro alcance, tan sólo basta con estudiar, estructurar el 
proyecto, pero sobre todo ver las necesidades del usuario. No sólo basta con que 
sea interactivo, sino también accesible, desde el uso correcto de tipografía hasta 
el acceso vía modem o banda ancha o por CD, son aspectos importantes en el 
desarrollo de un proyecto interactivo 
 
 
2.1 Diagramación y estructura 
 
Una vez definidos los contenidos del proyecto interactivo y analizando 
previamente sus necesidades se procede a diseñar la estructura de la información. 
Los contenidos se irán conformando con hipertextos e hipermedios dependiendo 
de la naturaleza del proyecto, facilitando así, la interacción de los usuarios. 
 
 
 
Tema 2. Interfaces para la interactividad 17
Desarrollo de Proyectos Interactivos 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Con esta estructuración se definirán las posibles opciones que tiene el usuario en 
su trayectoria además de permitir visualizar fácilmente el grado de interactividad. 
La interfaz gráfica deberá comunicar dicha estructura de la información por medio 
de los sistemas de navegación, independientemente del uso de botones, mapa de 
imágenes, íconos o textos como enlaces. 
 
2.1.1 Sistemas de Navegación 
 
Según los criterios de Gloor(1997)5 existen siete sistemas de navegación las 
cuales pueden ser bastante útiles en un proyecto interactivo, entre estos sistemas 
están la búsqueda, jerarquía, similitud, cada uno se verá a detalle a continuación: 
 
Enlace. Es el sistema básico de vinculación, traslada al usuario de un nodo a otro. 
 
 
Figura 2.1.a Ejemplo enlace, www.kirupa.com 
 
 
 
 
5 Gloor, P. Elements of Hypermedia Design: Techniques for Navigation and Visualization in 
Cyberspace. Birkhäuser, Cambridge MA, 1997. (http://www.ickn.org/elements/index.htm) 
http://www.ickn.org/elements/index.htm
 
 
Tema 2. Interfaces para la interactividad 18
Desarrollo de Proyectos Interactivos 
 
Búsqueda. Al tener una mayor complejidad en la estructuración de información y 
contar con una cantidad inmensa de nodos, la mejor opciónes el motor de 
búsqueda, puede ser por palabras clave, por secciones o categorías, un claro 
ejemplo de este sistema es google. 
 
 
 
 
Figura 2.1.b Ejemplo búsqueda, www.google.com 
 
 
Secuencialización. Con este sistema se aumenta la probabilidad de que el 
usuario no pierda parte esencial de los contenidos siguiendo una secuencia, un 
claro ejemplo son páginas de tutoriales los cuales van guiando paso a paso al 
usuario. 
 
Jerarquía. Simplemente se jerarquiza la información por orden de precisión, como 
ejemplo pueden mostrarse los nodos de mayor importancia a menor o de antiguo 
a reciente. 
 
 
 
Tema 2. Interfaces para la interactividad 19
Desarrollo de Proyectos Interactivos 
Similitud. Se hace uso de elementos comunes como palabras clave, temas, 
objetos, como el periódico en línea, donde están las secciones de ciudad, 
finanzas, internacional, etc. 
 
 
 
 
 
Figura 2.1.c Ejemplo secuencia, www.kirupa.com 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 20
Desarrollo de Proyectos Interactivos 
 
 
 
Figura 2.1.d Ejemplo jerarquía, www.wired.com 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 21
Desarrollo de Proyectos Interactivos 
 
 
 
Figura 2.1.e Ejemplo jerarquía, www.eluniversal.com 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 22
Desarrollo de Proyectos Interactivos 
Mapas. Son representaciones de los nodos que conforman el sitio y reflejan una 
visión global de la información. Son muy utilizados para facilitarle a los usuarios 
todas las opciones que tiene sin pasar necesariamente por todas, un claro ejemplo 
son los mapas de sitio. 
 
 
 
 
 
Figura 2.1.f Ejemplo mapas, www.eluniversal.com 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 23
Desarrollo de Proyectos Interactivos 
Agentes. Son guías que facilitan la realización de cierto proceso o actividad 
siguiendo pasos predefinidos. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 2.1.f Ejemplo mapas 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 24
Desarrollo de Proyectos Interactivos 
2.2 Legibilidad 
 
Legibilidad es la capacidad de definir y distinguir claramente los caracteres del 
alfabeto, mientras tanto que la comprensión se refiere al contenido del texto o 
párrafo. La compresión se encuentra ligada a la legibilidad, mientras más nítido 
sea el carácter y su entorno (color de fondo, interlineado, estilo de la tipografía, 
etc.), se logrará una mayor comprensión del contenido. 
 
Muchas ocasiones se encuentran páginas donde el diseño experimental 
predomina, visualmente puede lucir estético, sin embargo, el contenido ha sido 
dejado a un lado. Habrá usuarios seguidores de éste tipo de sitios, así como 
aquellos que cambien rápidamente de página por no encontrar la información que 
desean, por ello es necesario estudiar el mercado, para saber exactamente hasta 
qué punto lo estético tiene un mayor peso que el contenido. 
 
 
 
 
Figura 2.2.a Uso de tipografía donde lo estético predomina al contenido. 
www.nuevosricos.com 
 
 
 
Tema 2. Interfaces para la interactividad 25
Desarrollo de Proyectos Interactivos 
La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el 
usuario tiende a reducir el número de palabras que lee, esto se debe al cansancio 
producido por el monitor y a la gran competencia existente entre cada página, 
cada una debe llamar la atención del usuario pero sobre todo retenerla. Para 
lograr la retención hay unos puntos básicos a desarrollar en la mayoría de las 
páginas, uno de ellos es el uso de palabras claves destacadas, uso de subtítulos, 
párrafos pequeños y con una sola idea. 
 
 
 
 
Figura 2.2.b Uso de puntos básicos, remarcados en naranja 
www.eluniversal.com.mx 
 
 
 
 
 
 
 
 
2.3 Proporción 
 
 
Tema 2. Interfaces para la interactividad 26
Desarrollo de Proyectos Interactivos 
 
Las aplicaciones encargadas de presentar las páginas Web son los navegadores 
(browsers), entre los que destacan Internet Explorer y Netscape Navigator, 
Mozilla, etc. 
 
La forma de la ventana del navegador es siempre rectangular, pero su tamaño 
varía, dependiendo del monitor y de la tarjeta gráfica. Se hablan de dos tamaños 
de pantalla diferentes: 
 
Tamaño absoluto: es el tamaño "real" de la ventana del monitor, medido 
generalmente en pulgadas, depende de cada monitor. 
 
Resolución o tamaño relativo: viene determinada por el número de píxeles que se 
muestran en la ventana del monitor, siendo el píxel la unidad mínima de 
información que se puede presentar en pantalla. La resolución más utilizada 
actualmente es de 800 x 600 píxeles. 
 
Existen más resoluciones como veremos a continuación: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 2. Interfaces para la interactividad 27
Desarrollo de Proyectos Interactivos 
 
 
Figura 2.3 Algunas resoluciones de pantallas 
 
 
2.4 Accesibilidad para el usuario 
 
Sin desearlo, al diseñar un proyecto interactivo en línea o en CD-ROM, se está 
diseñando para un sin fin de plataformas, navegadores y usuarios, por ello se 
deben tener en cuenta algunas especificaciones técnicas sobre el equipo de los 
usuarios así como aspectos funcionales. Se muestra una breve lista de los puntos 
que no se deben olvidar a continuación: 
 
1. Resolución del monitor 
600 x 800 px 
1024 x 768 px 
1280 x 960 px 
 
Actualmente se diseñan las páginas conforme a estos estándares, sin 
embargo, con el tiempo irán cambiando las medidas por la constante 
evolución de los equipos y mejora en los monitores. 
 
 
 
Tema 2. Interfaces para la interactividad 28
Desarrollo de Proyectos Interactivos 
 
2. Navegadores 
Internet Explorer 
Netscape Communicator 
Mozilla 
 
Y unos 50 más navegadores, pueden obtener información en: 
http://browsers.evolt.org/ 
 
Cada navegador despliega la información según decodifica los lenguajes 
como el html, por ello es que hay ciertas variantes en la visualización de los 
contenidos dependiendo del navegador y su versión, además de que algunos 
plug ins o java scripts no son compatibles con los diversos navegadores 
existentes en el mercado. 
 
3. Velocidad de conexión 
Módem 
Banda Ancha 
 
Es muy importante saber qué tipo de usuarios navegará el sitio, porque de 
eso depende la velocidad en la que descargarán las páginas, no hay que 
olvidar que si la mayoría de nuestros usuarios cuentan con módem, la 
visualización debe ser rápida debido a que el límite para que una persona 
mantenga su atención en una página es de 10 segundos*6 o se corre el 
riesgo de que ya no visiten el sitio por la tardanza, aún siendo un diseño muy 
atractivo. 
 
Cuando se desarrollan proyectos complejos y con muchos elementos de 
multimedia se tiende a caer en el uso de archivos demasiado pesados, una 
manera de solucionar esto es avisando al usuario desde un inicio, cuánto 
tiempo va a tardar en descargar la página, mientras tanto, él puede ir 
visitando otros sitios. 
 
Otra situación es si los usuarios ingresan a la página o proyecto por medio de 
CD-ROM, Intranet o de su trabajo, debido a que generalmente se cuenta con 
banda ancha, por lo tanto, se tiene la libertad de no preocuparse tanto por el 
peso e introducir un mayor número de elementos multimedia. 
 
4. Uso de plug ins 
La especificación del uso de plug ins, es necesaria para la correcta 
visualización del sitio, señalada desde un principio. 
 
La mayoría de las ocasiones se diseña para una descarga rápida del sitio y 
su eficiencia en los ordenadores, pero pocas veces se detienen a ver la 
 
6 Nielsen, Jakob. (2000) Usabilidad Diseño de sitios Web. Pág. 42-45. 
 
 
Tema 2. Interfaces para la interactividad 29
Desarrollo de Proyectos Interactivos 
importancia del usuario y los beneficios que se obtendrían si diseñáramos en 
base a ellos.No es suficiente con la funcionalidad del sitio sino que también 
debe ser accesible y usable, captando así, un mayor número de usuarios. 
 
Al aumentar la interactividad con el usuario hay un mayor aprovechamiento 
de los recursos del sistema. 
 
 
2.5 Diagrama del hipertexto 
 
El diagrama ilustra la estructuración de los nodos y la relación entre ellos, cada 
nodo muestra cierta codificación y muestra con qué otros nodos será enlazada, un 
ejemplo del diagrama se muestra en la imagen a continuación: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 2.5 Ejemplo Diagrama 
 
 
 
 
 
 
 
Tema 3. Formatos 30
Desarrollo de Proyectos Interactivos 
Tema 3. Formatos 
 
Subtemas 
 
3.1 Formatos para proyectos interactivos en CD – ROM 
3.2 Formatos para proyectos interactivos en línea 
3.3 Compatibilidad entre plataformas 
 
 
Objetivo de Aprendizaje 
 
Al término del tema el estudiante conocerá y ejecutará las herramientas y soportes 
para la producción de proyectos interactivos. 
 
 
Sinopsis 
 
Debe elegirse el soporte más adecuando para el proyecto interactivo ya sea en 
línea o fuera de línea (CD), dependiendo del contenido, usuarios, costo, 
almacenamiento, velocidad, facilidad de acceso, retroalimentación y actualización. 
 
Cada soporte tiene ventajas y desventajas como lo veremos en la tabla a 
continuación: 
 
 
 
Características 
 
Soportes On-line Soportes Off-line 
Transporte Pleno Depende del acceso 
Capacidad de Almacenamiento Limitada Ilimitada 
Actualización de contenidos Exige nueva edición En tiempo real 
Transparencia de uso mayor Menor 
Velocidad de Acceso Mayor Menor 
Disponibilidad de la tecnología Ordenadores Multimedia Ordenadores conectados 
Coste de difusión Copias Hospedaje de páginas 
Interactividad con y entre los 
usuarios Nula Plena 
 
Figura 3.a Características Soportes 
 
 
 
Tema 3. Formatos 31
Desarrollo de Proyectos Interactivos 
 
3.1 Formatos para proyectos interactivos en CD-ROM 
 
Los proyectos interactivos pueden desarrollarse en dos software principalmente, la 
selección de uno o ambos depende esencialmente de las necesidades de cada 
proyecto. Ambos son de Macromedia7, uno es llamado Director y el otro es Flash, 
ambos son compatibles, sin embargo, cada uno cumple con ciertas necesidades. 
 
Macromedia Director 
 
Es una herramienta diseñada para crear contenido interactivo para CD y para el 
internet. Con este software se puede incorporar fotografía, video, sonido, 
animación, modelos 3D, texto y swf. 
 
Con Director se pueden crear aplicaciones que dan acceso y controlan otras 
aplicaciones, además de que se puede crear contenido para personas con 
capacidades distintas. Lo más recomendable es usar Director cuando se desee 
hacer contenido interactivo con animación 2D y 3D, video, audio, gráficos, etc. Por 
su desempeño, es ideal para el desarrollo de contenido en CD, DVD y Kioscos. 
 
Macromedia Flash 
 
Es un programa desarrollado para trabajar en vectores principalmente y puede 
desplegar archivos pequeños, como fotografías, video, sonido, texto, optimizando 
todos estos para la Web. Con este software se pueden hacer animaciones 2D, de 
excelente calidad, tiene grandes ventajas a excepción de las animaciones en 3D, 
que no pueden ser controladas de igual forma como con Director. 
 
Los formatos de los archivos generados para su uso en CD, son *.EXE para 
Windows y *.HQX para Mac, posteriormente si se desea que sea un CD auto 
ejecutable encontrarán las instrucciones de cómo hacerlo en el capítulo 4. 
 
También podrían incluirse directamente los archivos de un sitio, es decir, los 
archivos html, pero por lo general, es mejor usar cualquiera de los programas 
anteriores pues se ven con mejor calidad. 
 
 
3.2 Formatos para proyectos interactivos en línea 
 
La tendencia es que las páginas web de Internet sean multimedia. La mayoría de 
las páginas Web sólo son visuales y utilizan medios escritos, de imagen y 
animación, y muchas aún no añaden sonido, sin embargo, sí tienen al menos 
interacción mínima que es una característica importante de los multimedios 
 
7 http://www.macromedia.com/la
 
 
Tema 3. Formatos 32
Desarrollo de Proyectos Interactivos 
 
actuales. Conforme se mejoran las capacidades y el ancho de banda de Internet 
(cantidad de información que puede transferirse a las computadoras conectadas) 
los multimedios se ampliarán a todas sus características. 
 
Cuando vemos una página Web en línea, parece ser un solo elemento y no es así, 
está compuesta por una gran cantidad de archivos que van desde la información, 
imágenes, videos, etc. todos éstos elementos son integrados bajo un lenguaje de 
programación llamado HTML, por sí mismo puede resultar un poco estático, por 
ello, para lograr un mayor grado multimedia o interactividad, existen diferentes 
lenguajes de programación, plug ins o applets que pueden ser integrados en los 
navegadores o plataformas. 
 
 
3.3 Compatibilidad entre plataformas 
 
Existen diferentes plataformas informáticas en función del hardware y sistema 
operativo instalado, a continuación se mencionarán las plataformas existentes en 
la actualidad8. 
 
Plataforma PC/Windows. Es la más extendida, a nivel usuario y doméstico. 
También la encontramos en determinadas empresas que no trabajen en red, 
aunque cada día es más frecuente que estén todos interconectados. Son 
máquinas mono procesadoras (un solo procesador), en cuanto a hardware, con el 
SO Windows, de representación de la información a través de ventanas, que fue 
creado por Microsoft y basado en el sistema visual y de almacenamiento de 
carpetas, escritorio, etc. de Macintosh, un entorno muy intuitivo y agradable. 
 
Plataforma Apple/Mac-Os. Está menos extendida a nivel usuario, ya que se ha 
concentrado en aquellas personas o empresas dedicadas al sector gráfico o 
publicitario. Esto fue debido a que los microprocesadores Apple, su estructura y 
SO, eran más robustos, con mayor fidelidad respecto a los datos manejados y 
mayor capacidad para manejar grandes datos y efectuar grandes operaciones 
como las que se realizan a nivel multimedia o gráficos. Poco a poco el PC va 
adquiriendo una mayor robustez así como unos microprocesadores cada vez más 
potentes y es por esto que el PC, o WS son muy utilizados actualmente en 
empresas de este sector. 
 
En un principio eran totalmente incompatibles, pero cada vez más se aproximan y 
tras el nacimiento del PowerPC, es más factible trabajar con las dos plataformas. 
Son máquinas mono procesadoras y multitarea. (El Mac siempre ha tenido una 
mayor capacidad que el pc) 
 
 
8 http://www.cnice.mecd.es/eos/MaterialesEducativos/mem2001/nutricion/program/in/basi.html
 
 
Tema 3. Formatos 33
Desarrollo de Proyectos Interactivos 
Plataforma WS/Windows NT. Es una plataforma formada por uno o varios 
procesadores intel, con un SO de Windows, pero específico para trabajar en red. 
 
Plataforma Unix. Es una plataforma formada por varios procesadores intel o 
similar y el Sistema operativo Unix creado por Bell, y de libre distribución. Un 
sistema operativo muy robusto y de gran fiabilidad y seguridad en la información. 
Existe un SO unix, creado por Sun y llamado Solaris, muy utilizado en servidores 
de información, bases de datos, redes, etc. 
 
Plataforma WS/Linux. ó PC/Linux. Es una plataforma similar a la de Unix, pero 
para PC mono procesadores. También de libre distribución y que está teniendo 
una gran aceptación e implantación. 
 
Hay que tomar en cuenta las plataformas existentes para hacer el proyecto lo más 
accesible posible, independientemente del sistema operativo o plataforma 
utilizada, la mayor parte de los usuarios o tiene una PC o Mac, su funcionamiento 
es similar, sin embargo, cada uno interpreta la información de forma distinta. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 4. Producción 34
Desarrollo de Proyectos InteractivosTema 4. Producción 
 
Subtemas 
 
4.1 Creación de un master 
4.2 Programas FTP para colocar proyectos interactivos en Internet 
 
 
Objetivo de Aprendizaje 
 
Al término del tema el estudiante utilizará las herramientas necesarias para 
exponer un proyecto interactivo en soporte off-line y on-line. 
 
 
Sinopsis 
 
Para subir en línea o crear un CD híbrido, es necesario conocer las herramientas 
necesarias, por ejemplo para proyectos en línea lo más recomendable es el uso 
de aplicaciones FTP, mientras que para proyectos interactivos con distribución vía 
CD, se genera el proyector y el ejecutable, existen ciertas limitantes en éste tipo 
de distribución por los sistemas operativos, sin embargo, existen opciones y se 
puede solucionar para que el proyecto sea completamente accesible 
independientemente del uso de Mac o PC. 
 
 
4.1 Creación de un master 
 
Director y Flash no tienen la habilidad de crear CDs o habilitar el Auto Ejecutable 
por sí mismos. Los proyectores son específicos para cada tipo de plataforma, un 
proyector para Mac no sirve para Windows y viceversa, sin embargo se puede 
crear un CD híbrido el cual contenga ambos proyectores. 
 
La mejor opción es crear cada ejecutable en cada una de sus plataformas y 
quemarlos en el Mac, con un software llamado Toast de Roxio9. 
 
Auto Ejecutable en Windows10
 
El auto ejecutable puede ser implementado al momento de quemar el CD. Para 
ello se debe generar un archivo llamado AutoRun.inf en el programa Bloc de Notas 
y deberá incluir el siguiente texto: 
 
 
9 http://www.roxio.com/en/support/toast/toasthybrid.jhtml 
10 http://www.macromedia.com/go/tn_13374
 
 
Tema 4. Producción 35
Desarrollo de Proyectos Interactivos 
[AutoRun] 
open=nombre_proyecto.exe 
 
Este archivo deberá colocarse en la misma ubicación que el proyector de 
Windows. Se remplazará el “nombre_proyecto” por el nombre del archivo 
generado. Con estos dos archivos en el CD, en cualquier PC se auto ejecutará el 
proyector. 
 
Auto Ejecutable en Mac 
 
En la Mac, la funcionalidad de Auto ejecutable no funciona como un programa o 
script, como el archivo *.INF en Windows, sino que la ejecuta el Quicktime. 
 
Para crear un proyector para Mac que funcione con el autoPlay, se debe tener un 
software que tenga la opción de AutoPlay, uno de esos programas es el Toast de 
Roxio. 
 
 
4.2 Programas FTP para colocar proyectos interactivos en 
Internet 
 
Para cargar los archivos de un sitio en un servidor en la WWW, es necesario tener 
un programa llamado FileTransfer Protocol (FTP). Con esta aplicación es posible 
acceder y transferir documentos utilizando la red. 
 
Los programas FTP en una parte visualizan la estructura de directorios del 
ordenador local y en la otra parte la estructura del ordenador remoto al que se ha 
hecho la conexión, así es posible cargar o bajar los archivos. De la misma manera 
es posible borrar o renombrar los archivos. Los programas FTP contienen por lo 
general una "página" de administración. En ella se pueden memorizar todos los 
datos de las direcciones FTP (computador servidor o dirección del dominio) 
dirección del servidor, datos de usuario y contraseña. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tema 4. Producción 36
Desarrollo de Proyectos Interactivos 
 
 
 
Figura 4.2.a Ejemplo pantalla Programa Cute FTP 
 
 
En los siguientes links podrán encontrar información sobre algunos de los 
programas FTP existentes, algunos son de uso libre y otros hay que pagar 
licencia. Hay diversos dependiendo del sistema operativo. 
 
http://www.duiops.net/descarga/ftp.htm
http://es.selfhtml.org/selfhtml7/tbcf.htm 
 
Existe una gran cantidad de programas para subir los archivos en Internet por 
FTP, si el sitio fue desarrollado con Dreamweaver, existe la opción de subir los 
archivos con éste mismo programa, sólo basta seguir las siguientes instrucciones: 
 
1. Abrir programa Dreamweaver, ir a Sitio>Nuevo Sitio 
 
2. Seguir las instrucciones en la ventana que aparece, hasta llegar a la sección 
compartir archivos. 
 
3. Ahí hay varias opciones, una de ellas es FTP, se selecciona y se añaden los 
datos. 
 
4. Introducir dirección FTP 
 
5. Nombre de la carpeta donde se almacenarán los archivos 
http://www.duiops.net/descarga/ftp.htm
 
 
Tema 4. Producción 37
Desarrollo de Proyectos Interactivos 
 
6. Nombre del usuario 
 
7. Contraseña 
 
Todos estos datos técnicos los proporciona el proveedor del hosting, no olvidar 
pedir la información antes de configurar el FTP. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 4.2.b Ventana configuración FTP en Dreamweaver 
 
 
 
 
 
 
 
 
 
 
 
Bibliografía General 38
Desarrollo de Proyectos Interactivos 
Bibliografía general 
 
 
- Nielsen Kakob. Usabilidad. Diseño de Sitios Web. Pearson Educación, S.A. 
Madrid, 2000 
 
- Rosenfeld, Louis. Arquitectura de la información para el www. McGraw-Hill, 
México, 2000 
 
- Moreno Muñoz, Antonio. Diseño ergonómico de aplicaciones hipermedia. 
Paidós, Barcelona, 2000 
 
- Green, Tom. Sitios Web Dinámicos con Studio MX 2004. Anaya Multimedia, 
Madrid, 2004 
 
- Dürsteler, Juan Carlos. Visualización de información. Gestión 2000, 
Barcelona, 2003 
 
- Orihuela, José Luis. Introducción al diseño digital. Anaya Multimedia, Madrid, 
1999 
 
- Lynch, Patrick. Principios de Diseño Básicos para la creación de Sitios Web. 
Gustavo Gili, Barcelona, 2002 
 
 
Vínculos 
 
 
- http://www.duiops.net/descarga/ftp.htm 
 
- http://es.selfhtml.org/selfhtml7/tbcf.htm 
 
- http://www.roxio.com/en/support/toast/toasthybrid.jhtml 
 
- http://www.macromedia.com/go/tn_13374 
 
- http://www.press.umich.edu/jep/works/vbush 
 
- http://www.boxesandarrows.com/archives/forgotten_forefather_paul_otlet.php 
 
- http://www.aus.xanadu.com/xanadu/future.html#7 
http://www.duiops.net/descarga/ftp.htm
http://es.selfhtml.org/selfhtml7/tbcf.htm
http://www.roxio.com/en/support/toast/toasthybrid.jhtml
http://www.macromedia.com/go/tn_13374
http://www.press.umich.edu/jep/works/vbush
http://www.boxesandarrows.com/archives/forgotten_forefather_paul_otlet.php