Desarrollo - de Proyectos - Interactivos PDF

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

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

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
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
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 1
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.
Introducción 2
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.
Objetivo general 3
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.1Hipertexto
Algunos dicen que el hipertexto comienza con las ideas de Vannevar Bush 1 , otros
con los pensamientos de Paul Otlet 2 , pero quien acuñó el término de Hipertexto
1
Vannevar 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

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 Xanadu 4 , 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

Figura 1.1 Ejemplo Nodo y enlace

1.2Hipermedia
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 como enlace en
la hipermedia, mientras que en el hipertexto se usa obviamente el texto.
Figura 1.2 Ejemplo Nodo y enlace en hipermedios

1.3Hiperví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

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

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.

1.4Estructuració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

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

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

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

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. 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
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.

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)

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ón es 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.

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

Figura 2.1.d Ejemplo jerarquía, www.wired.com

Figura 2.1.e Ejemplo jerarquía, www.eluniversal.com

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

Agentes. Son guías que facilitan la realización de cierto proceso o actividad

siguiendo pasos predefinidos.
Figura 2.1.f Ejemplo mapas

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

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

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:

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.

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.

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
Subtemas
3.1 Formatos para proyectos interactivos en CD – ROM

3.2 Formatos para proyectos interactivos en línea
3.3 Compatibilidad entre plataformas
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

Ordenadores
Disponibilidad de la tecnología Ordenadores conectados
Multimedia
Coste de difusión Copias Hospedaje de páginas
Interactividad con y entre los
Nula Plena
usuarios
Figura 3.a Características Soportes
Tema 3. Formatos 30
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 Macromedia 7 , 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 31
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 actualidad 8 .
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 32
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 3. Formatos 33
Tema 4. Producción
Subtemas
4.1 Creación de un master

4.2 Programas FTP para colocar proyectos interactivos en Internet
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 Roxio 9 .
Auto Ejecutable en Windows 10
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
[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.
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
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
- 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
Bibliografía General 38

Desarrollo - de Proyectos - Interactivos PDF

Cargado por

Información del documento

Título original

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

Desarrollo - de Proyectos - Interactivos PDF

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Proyectos

Licenciatura en Diseño Gráfico

CONOCERSE ACEPTARSE AMARSE CUIDARSE SUPERARSE TRANSMITIR TRANSFORMAR

Tema 1. Manejo de la información en interactivos 5

Tema 2. Interfaces para la interactividad 17

Al contar con todos los elementos es necesario basarse en una estructura

Para tener interactividad con el usuario no hace falta introducir en el proyecto

Debe elegirse el soporte más adecuando para el proyecto interactivo ya sea en

Para subir en línea o crear un CD híbrido, es necesario conocer las herramientas

Al término del curso el estudiante manejará los elementos y la estructura

Tema 1. Manejo de la información en interactivos

La hipermedia ha enriquecido al conocimiento pues ya no es solo texto, sino se

Al contar con todos estos elementos es necesario basarse en una estructura

Tema 1. Manejo de la información en interactivos 4

En los años sesenta se presenta un proyecto llamado Xanadu 4 , su finalidad es la

El hipertexto genera la necesidad de la interacción por parte del receptor, esta

Una de las características más importantes del hipertexto es que su lectura no es

El hipertexto se conforma de información la cual presenta nodos y enlaces, un

Tema 1. Manejo de la información en interactivos 5

Figura 1.1 Ejemplo Nodo y enlace

Tema 1. Manejo de la información en interactivos 6

Figura 1.2 Ejemplo Nodo y enlace en hipermedios

Tema 1. Manejo de la información en interactivos 7

Existen básicamente tres tipos de enlaces:

1. Enlaces estructurales. Con este tipo de vinculación el usuario se traslada de

Figura 1.3a Vínculos estructurales

Tema 1. Manejo de la información en interactivos 8

2. Enlaces asociativos. Son palabras o imágenes vinculadas a otros nodos

Figura 1.3b Vínculos asociativos

Tema 1. Manejo de la información en interactivos 9

3. Enlaces incrustados. Son aquellos vínculos que ayudan a los usuarios a

Figura 1.3b Vínculos incrustados

Los vínculos al estar ligados íntimamente al hipertexto y a los hipermedios, deben

Tema 1. Manejo de la información en interactivos 10

Es la forma más simple de organizar la información, debido a que es

Figura 1.4a Estructuración secuencial

Tema 1. Manejo de la información en interactivos 11

Este tipo de estructura conocida también como arborescente consta básicamente

Figura 1.4b Estructuración jerárquica

Tema 1. Manejo de la información en interactivos 12

Este tipo de navegación es una combinación entre la estructura secuencial y la de

Figura 1.4c Estructuración reticular

Tema 1. Manejo de la información en interactivos 13

La telaraña es utilizada básicamente para usuarios avanzados, pues tienen un

Figura 1.4d Estructuración telaraña

Tema 1. Manejo de la información en interactivos 14

La mayor parte de los sitios utiliza más de una estructura de navegación,

Figura 1.4e Uso Estructuras

Tema 1. Manejo de la información en interactivos 15

Tema 2. Interfase para la interactividad

2.1 Diagramación y estructura

Para tener interactividad con el usuario, no hace falta introducir en el proyecto

2.1 Diagramación y estructura

Tema 2. Interfaces para la interactividad 16

2.1.1 Sistemas de Navegació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

Tema 2. Interfaces para la interactividad 17

Búsqueda. Al tener una mayor complejidad en la estructuración de información y

Figura 2.1.b Ejemplo búsqueda, www.google.com

Secuencialización. Con este sistema se aumenta la probabilidad de que el

Jerarquía. Simplemente se jerarquiza la información por orden de precisión, como

Tema 2. Interfaces para la interactividad 18