curso6 primera unidad

42
Pontificia Universidad Católica del Perú – Facultad de Educación 1 FACULTAD DE EDUCACIÓN Curso 6: Integración de herramientas multimedia para el desarrollo de recursos didácticos Modalidad a distancia

Upload: minerva-galeano

Post on 08-Mar-2016

226 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 1

 

 

 

 

 

 

 

 

 

FACULTAD DE EDUCACIÓN

Curso 6: Integración de herramientas multimedia para el

desarrollo de recursos didácticos

Modalidad a distancia

Page 2: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 2

CCUURRSSOO 66

IInntteeggrraacciióónn ddee hheerrrraammiieennttaass mmuullttiimmeeddiiaa ppaarraa eell ddeessaarrrroolllloo ddee rreeccuurrssooss ddiiddááccttiiccooss

Modalidad a distancia

Coordinadora: Carol Rivero Panaqué

Autor: Richard Marcelo Guardia

Revisión de contenidos: Richard Marcelo Guardia

Producción de materiales: Rita Carrillo Robles

Diseño de carátula: Omar Paz Martinez

Diagramación: Olga Tapia Rivera

Pontificia Universidad Católica del Perú. Facultad de Educación. Página web: facultad.pucp.edu.pe/educacion Teléfono: 626-2000, anexos 5702 – 5705 2013. Segunda edición. Derechos reservados. Hecho el Depósito Legal en la Biblioteca Nacional del Perú N° 2013-11396

Page 3: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 3

Índice Introducción ............................................................................................................................. 5 Autoevaluación ........................................................................................................................ 6 Unidad 1: Diseño multimedia .................................................................................................. 9 Logros del aprendizaje ............................................................................................................ 9 1. Diseño multimedia ............................................................................................................. 11

1.1 Conceptos ..................................................................................................................... 11 1.2 Proceso de desarrollo de un producto multimedia ........................................................ 12 1.3 Maquetación digital ....................................................................................................... 15

1.3.1 Elementos de la maquetación digital ................................................................. 15 1.3.2 Percepción para la maquetación digital ............................................................. 16 1.3.3 Recomendaciones para el diseño de la maquetación digital ............................. 18 1.3.4 El proceso de percepción .................................................................................. 20

1.4 Interacción y navegación ............................................................................................... 22 1.4.1 Interactividad ...................................................................................................... 22 1.4.2 Navegabilidad .................................................................................................... 25

1.5 Storyboard ..................................................................................................................... 31 1.5.1 Elementos de diagramación del storyboard ....................................................... 32

1.6 Selección de herramientas ............................................................................................ 40 Unidad 2: Medios .................................................................................................................... 43 Logros de aprendizaje ............................................................................................................ 43 2. Medios ............................................................................................................................... 44

2.1 Textos digital ................................................................................................................ 44 2.2 Imagen digital ............................................................................................................... 49 2.3 Audio digital ................................................................................................................. 63

2.3.1 Definiciones........................................................................................................ 63 2.3.2 Calidad ............................................................................................................... 65 2.3.3 Edición de sonido ............................................................................................... 67 2.3.4 Formatos de audio ............................................................................................. 68 2.3.5 MIDI (Musical Instrumental Digital Interface) ..................................................... 71

2.4 Video digital ................................................................................................................. 73 Unidad 3: Multimedia educativa ............................................................................................ 79 Logros de aprendizaje ............................................................................................................ 79 3. Multimedia educativa ......................................................................................................... 80

3.1 Aprendizaje multimedia ................................................................................................ 81 3.1.1 Contenidos multimedia ....................................................................................... 82

3.2 Teoría cognitiva del aprendizaje multimedia ................................................................ 83 3.2.1 Procesos cognitivos implicados en el aprendizaje activo .................................. 84

3.3 Principios del diseño multimedia .................................................................................. 85 3.4 Aspectos pedagógicos de la imagen y video ............................................................... 88

Page 4: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 4

3.4.1 Función de la imagen ......................................................................................... 88 3.4.2 Directrices para el diseño y la producción pedagógica del video ...................... 92

3.5 Personal Learning Environment (PLE) ........................................................................ 94

Unidad 4: Integración multimedia ......................................................................................... 99 Logros del aprendizaje ........................................................................................................... 99

4. La importancia de la integración multimedia .................................................................... 100

4.1 Herramientas de integración multimedia ................................................................... 100 4.2 Web 2.0: servicios y aplicaciones .............................................................................. 104 4.3 Integración de medios ................................................................................................ 107

4.3.1 Herramientas de autor: eXeLearning ............................................................... 107

Respuestas de la Autoevaluación ....................................................................................... 117 Referencia bibliográficas ..................................................................................................... 118

Page 5: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 5

Introducción ¡Bienvenido(a) al sexto curso: Integración de herramientas multimedia para el desarrollo de

recursos didácticos!

Por otro lado, se presentan diversas herramientas y servicios incluyendo aquellas que son

de libre distribución u OpenSource que permitirán crear, editar o transformar diversos tipos de medios.

La segunda unidad, trata sobre la inserción de diversos elementos multimediales, de tal

forma que conjuguen y actúen; tal como se pensó en la etapa del diseño. En esta unidad se realizará una aproximación a la programación, en vista que en algunas ocasiones esta permitirá obtener un mejor performance y resultados más flexibles en la forma cómo se presentan los recursos.

La tercera unidad muestra los diferentes tipos de herramientas que permiten la creación de

recursos didácticos y da a conocer los conceptos y principios de la interactividad y navegabilidad. Además, se plantea el desarrollo del recurso mediante la metodología de prototipos; así como el uso de plantillas para facilitar el trabajo.

Finalmente, en la cuarta unidad se brindan los diversos criterios de distribución y

publicación de los recursos elaborados, ya sean a través de la web o mediante el uso de dispositivos digitales u ópticos.

Lo(a) invitamos entonces al estudio de este curso y a compartir el aprendizaje de manera

colaborativa.

Fuente: http://www.linkpyt.com/proyecto/multimedia.php

Dentro de este curso se brindan las herramientas necesarias para trabajar de forma óptima la multimedia empleándola como una estrategia didáctica dentro de la labor docente.

Este curso se compone de cuatro

unidades. En la primera, se presentan los conceptos iniciales y la terminología usada en el campo de la multimedia. Así mismo, se lleva a cabo la concepción del recurso a elaborar a través de esquemas gráficos que describen las características deseables y el nivel de interacción.

Page 6: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 6

1. Multimedia es el conjunto de medios que, al hacer uso de diferentes técnicas, permite unir

distintas tecnologías de diversas plataformas, tanto de soporte técnico como lógico para obtener finalmente, un sistema único e integrado (sistema multimedia).

a) Falso b) Verdadero

2. ¿Cuáles son las aplicaciones del multimedia?

a) Comunicación, información, videos, películas, formación, juegos. b) Entretenimiento, descarga de videos musicales, información. c) Establecer hipertextos, elaborar trabajos colaborativos.

3. Relacione cada una de las tareas en el desarrollo de un producto multimedia

Contenidos ¿Quiénes son los usuarios?

Control de calidad Información y temas

A quién va dirigido Construcción de la aplicación

Integración Evaluaciones y pruebas

Documentos a generar Bosquejo general

Storyboard Información de los medios a usar 4. Complete las siguientes frases:

El storyboard es un documento similar a ……………………………………………donde

se detallan los ……………………………………………………………………………..para cada etapa.

La definición de medios en el contexto multimedia hace referencia a

………………………………………………………………………………………………

5. Mencione algunos dispositivos para capturar imágenes:

a) ……………………………………………. b) …………………………………………… c) ……………………………………………

Autoevaluación

Page 7: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 7

6. Algunos formatos de video son:

a) JClic, Hotpotatoes, CmapTools.

b) Maquetación digital, empacado.

c) Beta, VHS, Hi 8, S-VHS

7. Marque F (falso) o V (verdadero). Las herramientas de autor están:

a) Basadas en fichas, en iconos y en vínculos. b) Basadas en tiempos, en espacios y scripting languages c) Basadas en fichas, iconos, tiempos y scripting languages.

8. Algunas actividades que se pueden trabajar con Hotpotatoes son: a) Ejercicios de relación, de correspondencia, crucigramas, completar espacios en blanco,

combinación de preguntas de opción múltiple y actividades de evaluación.

b) Elaboración de conceptos, diagramar mapas conceptuales, Incorporar y capturar imágenes, aplicación de iconos.

(V) (F) (V) (F) (V) (F)

Page 8: Curso6 primera unidad
Page 9: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 9

Unidad 1: Diseño multimedia

Autor: Ms. Richard Marcelo

Logros del aprendizaje

En esta unidad va a lograr la siguiente capacidad:   @ Reconoce los pasos a seguir para el desarrollo de 

un  producto  multimedia  considerando  la importancia de la maquetación y el storyboard. 

Page 10: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 10

Reconociendo nuestros saberes Observe la siguiente imagen y analice:

1. ¿Qué le sugiere la imagen?

…………………………………………………………………………………………………

…………………………………………………………………………………………………

2. ¿Qué está haciendo?

…………………………………………………………………………………………………

…………………………………………………………………………………………………

3. ¿Con qué está trabajando?

…………………………………………………………………………………………………

…………………………………………………………………………………………………

4. ¿Conoce o ha trabajado con algún sistema similar?

…………………………………………………………………………………………………

…………………………………………………………………………………………………

Page 11: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 11

1. Diseño multimedia

1.1 Conceptos

.

Un sistema multimedia modela la realidad incorporando información a través de múltiples medios de la forma más natural posible. Por lo mismo que ofrece niveles de estímulo elevado, tiene una respuesta inmediata en la persona; y debido al conjunto de elementos físicos y lógicos que intervienen, se puede conseguir un sistema multisensorial e interactivo. En efecto, se hace posible interactuar utilizando varios sentidos a la vez: la vista, el tacto, el oído y hasta el olfato.

Imaginemos una aplicación multimedia como, por ejemplo, una tienda virtual de flores. En ella podemos interactuar a través de una pantalla touchscreen (pantalla táctil) para acceder a una lista de selección mientras se escucha como fondo musical, una suave melodía, una “Minuet de Beethoven”. Al mismo tiempo, mientras navegamos, nuestros ojos se deleitan con las tonalidades plasmadas por el diseñador y, tan pronto como elegimos un ramo de lirios, se percibe en el ambiente su aroma característico.

Multimedia

Puede definirse como el conjunto de medios (tales como: texto, imagen, audio, video, animación, módulos de simulación, entre otros) que han sido integrados en un sistema de información o aplicación informática.

Este sistema puede convertirse en multimedia interactiva cuando el usuario interviene en el control de la navegación y funcionalidad afectando la forma o secuencia en que se presentan los medios.

Fuente: http://rennyflash.blogspot.com/2009/09/diseno-

multimedia.html

El diseño es todo un proceso que se da en forma gradual y repetitiva. El objetivo es que todos los elementos presentes en el escenario final puedan interactuar y ser visibles a la vez. Esta tarea puede hacer uso de cualquier método que ayude a visualizar ideas y pensamientos; por tanto, nunca deja de lado la colaboración de cada uno de los miembros del equipo multidisciplinario que participa en el proyecto como creadores de conceptos, redactores de textos, diseñadores, programadores, entre otros.

A continuación analizaremos los

principales conceptos básicos que nos permitirán diseñar un producto multimedia.

Page 12: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 12

En síntesis, la multimedia es un conjunto de medios que haciendo uso de

diversas técnicas permite unir las tecnologías de diferentes plataformas, tanto de soporte físico (por ejemplo, un dispositivo que permite crear aromas a partir de esencias), como lógico (por ejemplo, una programación para dar flexibilidad en la funcionalidad de los medios presentes) y, como resultado final, se obtiene un sistema único e integrado: un sistema multimedia.

Ahora veamos cómo se desarrolla un producto multimedia.

1.2 Proceso de desarrollo de un producto multimedia

En el desarrollo de un producto multimedia, se debe tener en cuenta una serie

de tareas, la mayoría de las cuales se puede realizar en paralelo. Observemos:

Fuente: Elaboración propia. 

Aplicaciones Las aplicaciones son variadas y aquí mencionamos solo algunas de ellas:

Comunicación (presentaciones, etc.). Información (puntos de información comercial, turística, periódicos, etc.). Entretenimiento (aventuras gráficas, simulaciones, películas interactivas,

juegos de estrategia, etc.). Publicitaria (catálogos, folletos, puntos de ventas, etc.). Formación (enciclopedias educativas, tutoriales, manuales, etc.).

Page 13: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 13

¿A quién va dirigido?

Contenidos

Maquetación digital

Storyboard

Documentación a generar

Es importante conocer al público a quién va dirigido el producto: ¿quiénes serán los usuarios del producto? Dependiendo de ello se puede hacer más o menos complicado el desarrollo de la aplicación. No es lo mismo desarrollar una aplicación multimedia para un curso dictado en ingeniería que para un grupo de niños que está aprendiendo a leer.

También se debe determinar la plataforma sobre la cual se va a distribuir la aplicación. Algunos productos pueden ser distribuidos en plataformas Mac y PC pero los multimedia pueden requerir de una plataforma específica y la conversión de una plataforma a otra puede hacer que se pierdan algunas características.

Se refiere al tema y a la información del producto que se desarrollarán. El equipo debe requerir de la participación de un especialista y conocedor del tema, a quien es bueno asignar algún cargo estratégico para que se comprometa con la tarea.

Se refiere básicamente a la distribución de los elementos que intervienen en la pantalla. Es importante realizar el diseño y tomarse el tiempo necesario, ya que una mala distribución de los elementos podría repercutir considerablemente en los resultados esperados.

Es un bosquejo general del producto que se va a desarrollar; incluye cada una de las pantallas de la presentación, la relación entre ellas, la información sobre los medios: texto, imagen, sonido y video. Un storyboard incluye suficientes detalles que permite a los editores, programadores, diseñadores y cada uno de los miembros del proyecto realizar su tarea eficientemente.

Se refiere a la información de cada uno de los medios que se utilizarán en el producto multimedia los cuales están en formato digital. Es importante tener en cuenta las características de estos, ya que en la etapa final del proyecto se debe añadir algunos archivos especiales que harán posible que la aplicación se ejecute correctamente, y que dependerán de los formatos con los que se hayan trabajado. Esta información se puede detallar en un storyboard documentado.

Page 14: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 14

Prototipo

Integración

Control de calidad

Empacado

Es usual en el desarrollo de este tipo de proyectos emplear el modelo de construcción de prototipos. Esto implica un diseño y desarrollo rápido, que se centra en algunos aspectos que sean visibles para el usuario y el cliente a partir de los requerimientos de este último. Luego se evalúa, se refinan los requerimientos y se presenta un siguiente avance. Este proceso es gradual hasta que los requerimientos sean cubiertos. En general es muy útil para tener una visión sobre la navegación y que su funcionamiento sea el correcto o el esperado.

Haciendo uso del sistema de autor o integrador de medios se va construyendo la aplicación. Para ello, los medios ya deben estar en su etapa finalizada, es decir, ya editados. En la integración no solo se utiliza la herramienta de autor que permite insertar cada uno de los medios, sino también se debe hacer uso de la programación para darle mayor flexibilidad a los elementos en cuanto a funcionalidad; esto permite la creación e innovación de formas personalizadas en la presentación de la aplicación.

Esta etapa es muy importante, por ello se debe tener en cuenta en el cronograma, el tiempo suficiente para realizar las evaluaciones y pruebas, tanto de funcionalidad en determinadas plataformas, como en el uso o interacción con usuarios finales. Luego de pasar el periodo de pruebas, verificando, mejorando y ultimando detalles, se puede proceder a crear el master.

Se refiere a la creación de los ejecutables y la selección de los archivos finales a distribuir. Además de ello se debe tener en cuenta el diseño del CD, si la impresión será en offset, serigrafía, etc.

Reflexione y responda:

¿Considera importante el uso de multimedia dentro de su labor docente? ¿Por qué?

………………................................................................................................................

………………................................................................................................................

¿Qué ventajas ha obtenido al utilizarlas? Comente brevemente.

………………................................................................................................................

………………................................................................................................................

………………................................................................................................................

Page 15: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 15

1.3 Maquetación digital

El término maquetación está estrechamente ligado al término interfaz pero cada uno de ellos son conceptos bien diferenciados. La interfaz es el intermediario entre el usuario y la aplicación, a través del cual se interactúa. Por su parte, la maquetación es la estructuración de la interfaz, como un reflejo de la interacción entre objetivos comunicativos, culturales y cognitivos; es decir, la manifestación visual de la interfaz. Cabe mencionar también que luego de la maquetación viene la tarea de diagramación, que consiste en la distribución, ubicación y organización de los elementos o medios en las áreas preestablecidas y definidas durante la etapa previa, es decir, durante la maquetación.

El objetivo del diseño de medios debería ser la reunión consciente de la síntesis de ambas dimensiones, maquetación e interfaz.

1.3.1 Elementos de la maquetación digital

La maquetación controla la interacción entre todos los componentes visuales de la interfaz que pueden variar en propósito y aspecto. Es conveniente tener una visión general de los componentes principales que intervienen en la interfaz y definir sus objetivos y características principales, pues, a partir de ello se puede establecer las prioridades y realizar la tarea de maquetación.

Una maquetación está compuesta por una serie de elementos, los cuales se podrían agrupar de la siguiente manera:

Este primer grupo de elementos constituyen los componentes básicos de una maquetación digital y tiende a ser el más notorio e imprescindible.

Elementos gráficos y tipográficos:

Tipografía: tipo de fuentes Puntos Líneas Formas Colores

Elementos de imagen:

Fotografías Ilustraciones y animaciones Símbolos e iconos

Maquetación

Describe los aspectos semánticos y formales de una aplicación digital.

No son iguales Interfaz

Significa la función e interacción.

Page 16: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 16

Los elementos de imagen capturan y atraen la atención de los usuarios en cualquier maquetación. El contenido de las imágenes y el lenguaje transmiten directamente el mensaje de forma fácil y rápida.

Los elementos funcionales son los que convierten una maquetación digital en la interfaz de un medio digital. Para dar funcionalidad a una aplicación es posible hacer uso de una gama de elementos funcionales o controles predefinidos por el sistema operativo, pero si se requiere originalidad es posible crear controles propios y definir su funcionalidad personalizando sus características.

Una maquetación es una composición formada por una serie de elementos presentados. La etapa crucial para obtener una buena interfaz de una aplicación digital es plantear una combinación bien pensada.

1.3.2 Percepción para la maquetación digital

Las cuestiones sobre la percepción humana se encuentran entremezcladas a lo largo de todo el proceso de diseño. Estas cuestiones básicas son las siguientes:

Elementos funcionales: Controles definidos por el sistema Controles o elementos propios

Comprensión de un sistema

digital

Orden

Estructura

Ayudan a los usuarios a reconocer las características de una interfaz sin la necesidad de muchas explicaciones.

Constituyen la base para una disposición estandarizada de los contenidos y un desarrollo sistemático del proyecto.

Percepción para la

maquetación

Montaje

Campos de acción

- Formatos

- Ojos

- Tubo de rayos catódicos

- Formatos de

visualización

- Monitores

- Percepción

Page 17: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 17

@ Montaje

Es la combinación de elementos visuales individuales para construir un objeto

nuevo. Este término fue acuñado por los pioneros como Richter, Eisenstein y Fischinger a principios del siglo XX. Estos artistas juntaron texto, imágenes y sonidos para formar collages y, al incorporar la dimensión del tiempo, crearon formas innovadoras de películas experimentales.

Durante el proceso de montaje de una maquetación, los elementos pueden moverse con libertad, colocarse en capas, duplicarse, escalarse, cambiar de aspecto y luego volver a su estado original.

@ Campos de acción Formatos

Ojos

Tubo de rayos catódicos

Formatos de visualización

Debido a que la maquetación digital se hace pensando en el hardware, en el cual se visualizará la interfaz, el formato usado o diseñado es horizontal. Existe un vínculo directo del formato horizontal con los rasgos faciales, los hábitos de visualización y lectura de la mayoría de las culturas. El formato de la pantalla no está predefinido, pues es posible una amplia gama de posibilidades dentro de las limitaciones físicas. El principio base de la representación de aplicaciones en ventanas separadas, como páginas web o software, permite el uso de diferentes tamaños y disposiciones de ventanas.

La cara, por ejemplo, posee un formato horizontal. Su campo de visión horizontal es de 180 grados y en la vertical, de 130 grados, con lo cual se puede hallar una proporción aproximada de 3:2; esto es una base para llegar al formato de pantallas actuales que guardan una relación de 4:3.

Los primeros tubos catódicos (CRT: Ferdinan Braun, Manfred Von Ardenne) utilizados en aparatos de televisión o en películas de cine presentan un formato horizontal, análogos a la cara humana.

El uso de la pantalla en toda su magnitud lleva a una disposición horizontal, pero es posible hacer uso de diferentes ventanas en diversas disposiciones y tamaños, incluso ventanas simultáneas.

Page 18: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 18

Monitores

Percepción

Cantidad de información (bit/s) que se puede percibir por los órganos sensoriales:

Vista 10 000 000 bit/s Oído 10 000 bit/s Olfato 1000 bit/s Gusto 10 bit/s Tacto 100 000 bit/s

1.3.3 Recomendaciones para el diseño de la maquetación digital

Las siguientes recomendaciones nos ayudarán a tener ciertos criterios al momento de diseñar y construir los elementos que intervendrán en la interfaz durante la tarea de la maquetación.

@ Atención

Los estímulos más sutiles llaman la atención al afectar a patrones mentales básicos, como el reflejo de orientación. Es importante tener en cuenta que el uso de varios estímulos al mismo tiempo puede producir un refuerzo o una anulación de algunos de ellos.

Las resoluciones y formatos de visualización se han venido desarrollando de acuerdo al avance de los dispositivos de visualización y casi todas guardan la proporción en su resolución de 4:3. Así mismo, el avance y desarrollo de formatos de visualización en dispositivos móviles han adoptado un formato de 3:4. A pesar de ello, estos formatos guardan el número ocho como máximo común denominador en la resolución de la pantalla.

Al realizar el diseño de una maquetación no se debe perder de vista el hecho de que el sistema multimedia responderá de mejor manera si el modo de interactuar es intuitivo, para lo cual se debe tener en cuenta ciertos elementos de la percepción humana. Mediante los órganos sensoriales podemos percibir gran cantidad de información y la mayor parte de ella la registramos visualmente, por ello los ojos constituyen el centro de percepción humana.

Diseño de la maquetación

digital

- Atención

- Intensidad

- Siete mágico

- Fragmentación

- Estructuración de apartados

Page 19: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 19

@ Intensidad

El tamaño, brillo, velocidad o intensidad suelen centrar la atención en ellos mismos. Cuanto más grande, brillante, rápido o llamativo, más se estimula el reflejo de orientación.

@ Excepción

En una serie de elementos, hacer que alguno de ellos tenga una excepción, ya sea de forma, color, tamaño o alguna característica, conlleva a que dicho elemento se destaque y sea llamativo.

@ Siete mágico

Experimentados científicos cognitivos afirman que nuestra memoria a corto plazo solo puede procesar alrededor de siete más/menos dos unidades independientes de información. Tener en cuenta esto al momento de realizar el diseño de la maquetación hace posible elaborar una aplicación digital de uso fácil por parte del usuario.

@ Fragmentación

Se debe fragmentar la información en unidades de percepción razonablemente manejables, por ejemplo, un número de serie de un software:

Page 20: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 20

@ Estructuración de apartados

Un número adecuado de apartados facilita la orientación y permite la diferenciación más espontánea en unidades inteligibles. Por ejemplo, las lengüetas en una aplicación.

1.3.4 El proceso de percepción

La percepción está compuesta por una serie de eventos. El camino desde el órgano sensorial a las regiones del procesamiento del cerebro toma solo unos segundos. El diseño de la maquetación puede facilitar o dificultar dicho proceso. Por ejemplo, tipos de expresión claros y comprensibles aceleran el proceso de percepción, mientras que los oscuros y desconcertantes lo complican.

Percepción

@ Innovación

Durante el proceso de percepción a veces se obstaculiza la clasificación de un elemento nuevo pero ello puede traer como ventaja la captura de nuestra atención.

@ Irritación

La desviación de los modelos conocidos también llama la atención.

Innovación

Irritación

Instinto

Page 21: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 21

@ Instinto

Gestos, caras o incluso estímulos textuales son provocadores natos de la atención.

Navegación

Es posible agrupar un número mayor de elementos como unidades comprensibles, mediante una jerarquía.

Estructuración por unidades

Es necesario retener una visión general, ya que solo es posible percibir un número limitado de módulos.

Codificación de texto

El etiquetado tipográfico, como los encabezamientos, textos destacados, etc., deben usarse con moderación para poder diferenciarlos y puedan cumplir una función.

Codificación de color

Presentar demasiados colores hace difícil recordar las codificaciones, por ello se recomienda utilizar el principio del siete mágico.

Oír y sentir la maquetación

A diferencia de los medios tradicionales, los medios digitales van más allá de los límites haciendo posible transmitir emociones: dinamismo, sonido e interactividad. El sonido y las imágenes suelen presentar una conexión directa, ya que se encuentran almacenadas en nuestra memoria como experiencias.

Page 22: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 22

Iconos audibles

Al implementar un ruido real e ilustrar acciones en la pantalla, se refuerza y confirma la experiencia de la interacción.

Iconos sonoros

Son sonidos creados, no reales, y sirven para asignarse a elementos con acciones en la pantalla. Debido a que son creados, se añaden a la experiencia para ser registrados y usados en experiencias futuras.

Características simuladas

Añadir características tridimensionales a ciertos elementos, por ejemplo, botones en alto relieve, hace que intuitivamente el usuario intente ubicarse sobre ellos, presionar haciendo clic con el mouse o realizar alguna otra acción que permita recibir una respuesta del sistema.

1.4 Interacción y navegación

La interacción y la navegación son dos características principales de un sistema multimedia en relación a la comunicación entre el sistema y el usuario. 1.4.1 Interactividad

Uno de los requerimientos durante el desarrollo de una aplicación multimedia es que cuente con un alto nivel de interactividad, la cual es entendida como una acción recíproca entre ciertos objetos y elementos de un sistema multimedia con las personas.

Existen dos maneras de comunicación en una aplicación multimedia: en una se mantiene al usuario en estado pasivo y, en la otra, en estado activo.

Page 23: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 23

Existen además, diversas herramientas multimedia que permiten crear

estructuras de interacción para comunicarse con un sistema multimedia. Una de las formas más básica son los botones, otras son las regiones sensibles, también existen algunos elementos sensibles de forma irregular, y los más comunes son los hiperenlaces o hipertextos. Así mismo, existen otros elementos que permiten recibir una acción para realizar una determinada respuesta como son los radio button, checkbox, cajas de entrada de textos, listas y otros.

Los componentes de una interacción principalmente son tres: la forma de

interacción, la respuesta y el resultado.

La forma de interacción

Hay muchas formas que permiten a los usuarios interactuar con el sistema o aplicación multimedia. La forma más básica es a través de botones, otra se da definiendo zonas sensibles de manera rectangular o de formas irregulares.

Otras formas consisten en definir áreas para entradas de texto, controles

definidos como listas de opciones, esperar a que una tecla específica sea presionada o esperar a que se realice una acción determinada con el teclado o el mouse, o al finalizar un tiempo determinado, etc. La respuesta

Se trata de la acción que el usuario realice para interactuar. Puede ser un simple clic sobre un botón, ubicarse sobre una región o área sensible, ingresar un texto, presionar una tecla, realizar una acción con el mouse, seleccionar una opción de una lista o menú, colocar un check en unas casillas, arrastrar un objeto a una región destino, entre muchas otras acciones.

Pasiva Si una aplicación presenta medios como textos, imágenes, videos y sonidos en la que el usuario frente a ello solo se limita a ver, oír y seguir la secuencia preestablecida.

Activa

Si se le da al usuario la oportunidad de responder, realizar determinadas acciones y tomar el control de la navegación, es decir, tomar decisiones durante la navegación, estamos hablando de una forma de comunicación activa, en la que el usuario puede interactuar.

Page 24: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 24

El resultado

Es la acción que se toma luego de llevarse a cabo la interacción. Por ejemplo, al hacer clic, saltar a una parte distinta de la aplicación, reproducir un sonido, bajar o subir los niveles del volumen, abrir una página web, mostrar un mensaje o imagen al ubicarse sobre una región determinada, cambiar la apariencia del cursor y, en general, todo lo que deseemos realizar ante una acción realizada por el usuario.

Hasta este punto, se ha tratado de la interactividad en términos de

comunicación entre un sistema multimedia y el usuario; sin embargo, la interactividad va mucho más allá de cuestiones técnicas. Cuando se habla de aprendizaje, la reciprocidad que genera la interactividad está dada por el intercambio entre una información y una persona. Aquí recae en el alumno una de las tareas más importantes: transformar la información en base a sus conocimientos previos, necesidades y posibilidades para adaptarla a entorno y generar sus propios conocimientos.

Por tanto; en el aprendizaje, en donde interviene como recurso un sistema

multimedia, la interactividad a través de una serie de acciones a realizar en espera de una respuesta no asegurará que la información recibida por el usuario se transforme en conocimiento. Vemos por tanto, que las personas necesitamos de otras para crecer y desarrollarnos. Por ello, el aprendizaje individual y solitario frente a una pantalla requiere de la emulación de ese intercambio, en otras palabras, un sistema multimedia exige la participación de un equipo de profesionales para asegurar un buen diseño, en especial, el instruccional o escenarización pedagógica. Así mismo, no descartar la posibilidad de incluir actividades síncronas o asíncronas que incluyan el intercambio grupal. Entonces cuando se hable de interacción en el sentido más amplio, se deberá entender los aspectos técnicos que conlleva una comunicación (acción - reacción entre sistema multimedia - usuario) y a la vez una interacción entre la información y la persona que aprende (usuario) de forma pertinente, sin descartar la posibilidad de interactuar con otras personas. En un sistema multimedia, la interacción debe pensarse de forma integral, tratando de cubrir casi la mayoría de casos con soluciones creativas que den la sensación de estar acompañados en el proceso de aprendizaje. Un aspecto que se puede aprovechar; por ejemplo, como respuesta a una interacción es la retroalimentación en las actividades para lo cual se debe tener en cuenta cómo podría responder un estudiante ante

Fuente: http://teoriesdelacomunicacio.wikispaces.com/

Interactividad

Vemos que la tarea del diseñador didáctico no es nada sencilla, ya que tendrá que prever las diversas situaciones del usuario que va aprender a través del sistema multimedia. Deberá tener en cuenta los elementos interactivos que favorezcan la motivación, tiempos de atención, carga cognitiva en relación al diseño y al contenido, así como diversas modalidades de presentación que tengan en cuenta los diversos estilos de aprendizaje, de tal forma que se alcance un nivel de interacción significativa entre el contenido y cada uno de los usuarios.

Page 25: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 25

determinadas situaciones al usar un sistema multimedia. Si acierta, considerar una respuesta que lo motive a seguir y si se equivoca, mostrar o sugerir en dónde o cómo se equivocó alentando a continuar. Recordar que también se aprende de los errores.

1.4.2 Navegabilidad

La navegación es una de las tareas más importantes al momento de crear una aplicación. Se trata de un elemento de la usabilidad que debe ser tomado en cuenta a la hora de planificar cualquier aplicación. Generalmente se da como resultado de alguna forma de interacción. La correcta construcción de la estructura, para desarrollar una aplicación multimedia, no asegura que la navegación se dé también de forma ordenada, pero ayuda a tener una mejor visión de los elementos que forman la aplicación y realizar los saltos ordenadamente. Recuerde:

En dicho documento se tuvo en cuenta la relación entre cada una de las pantallas o contenidos, por lo tanto, la tarea se hace fácil si se tiene en cuenta y a la mano, al momento de definir los saltos para la navegación.

La navegabilidad es la facilidad con la que el usuario puede desplazarse por

todas las páginas que componen una aplicación multimedia o un sitio web, y ello es posible gracias al conjunto de recursos y estrategias de navegación diseñados para conseguir un resultado óptimo de localización de la información y de orientación para el usuario. La interacción básica del usuario consiste en hacer clic en elementos de interacción (botones o regiones sensibles) y en los vínculos de hipertexto para moverse por un amplio espacio de información.

Existen algunos tipos de navegación como los que mencionamos a

continuación. Navegación

Jerárquica Lineal Lineal con jerarquía Condicional Múltiple

LLaa eessttrruuccttuurraa eess uunn rreefflleejjoo ddeell ddiisseeññoo ddee ssttoorryybbooaarrdd ccrreeaaddoo aall iinniicciioo ddeell pprrooyyeeccttoo

Reflexione y responda:

Describa brevemente, ¿cuál es la ventaja que tiene la interactividad en el aprendizaje significativo? ……………………………………………………………………………………………. ……………………………………………………………………………………………. …………………………………………………………………………………………….

Page 26: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 26

Navegación jerárquica

Este tipo de navegación se usa cuando se quiere saltar hacia otras secciones de menor jerarquía. Un ejemplo es el caso en que se tiene un menú principal con un grupo de opciones o secciones de las que está compuesta la aplicación, y hacia las cuales se puede acceder a partir de dicho punto. Actúa en ambos sentidos, se puede ir de un nivel superior a inferior o viceversa.

Navegación lineal

Este tipo de navegación es la más simple, es secuencial entre elementos de la misma jerarquía. Por ejemplo, en una sección de galería de fotos se puede visualizar las fotografías y se puede interactuar mediante botones hacia la siguiente foto o hacia la anterior.

La navegación lineal puede ser en ambas direcciones. Lo podemos observar

cuando se presentan contenidos como en un libro y se navega de una página a otra, y se ofrece la posibilidad de que el usuario o lector pueda avanzar o regresar a las otras páginas. Otras veces se puede obligar o forzar al usuario a seguir una sola dirección en la navegación; por ejemplo, imaginemos que nos encontramos en una sección de evaluación o autoevaluación, en la que se presenta una secuencia de preguntas con alternativas y solo se puede navegar hacia la siguiente pregunta hasta llegar a la última.

Page 27: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 27

Navegación lineal con jerarquía

En este caso se puede acceder a una sección u opción a partir de una lista o menú; una vez ya en la sección elegida si se quiere ir a las siguientes, no es necesario volver a la sección con jerarquía superior, se puede navegar directamente entre las secciones del mismo nivel. Por ejemplo, cuando nos encontramos en un capítulo de una aplicación educativa y deseamos pasar al siguiente, se podría hacer uso de botones para navegar entre los capítulos del mismo nivel sin tener que ir hasta el nivel inmediato superior.

Navegación condicional

Algunas veces la navegación no es tan predecible, aunque ya exista un grupo de destinos definidos. Esto ocurre cuando, por ejemplo, en un juego o cuento interactivo en donde el salto se condiciona a las acciones o los caminos que el usuario elija mostrándose un final diferente en cada caso.

Navegación múltiple

Este tipo de navegación se presenta si se hace uso de todas las formas de navegación conocidas. Por lo general, las herramientas de autor permiten realizar saltos de cualquier parte de la aplicación hacia cualquier dirección, sobre todo si se

Page 28: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 28

hace uso de la programación. Esto último obliga incluir alguna forma de información para que el usuario tenga presente, en cada momento, en qué parte de la aplicación se encuentra. Así, por ejemplo, resulta conveniente un mapa de recorrido o la diferenciación de cada una de las secciones por alguna característica en particular, como un color para cada entorno. También se suele denominar navegación en red a este tipo de navegación, ya que la interacción se da de manera direccional y bidireccional, en diferentes niveles.

Es importante tener en cuenta los tipos de navegación anteriores, para

implementarlos en la aplicación general, guardando siempre el orden, ya que podría ser que al final la navegación se torne bastante compleja y confusa.

La navegabilidad es un factor fundamental en aplicaciones web y multimedia.

Por ejemplo, un sitio debe ser cómodo para el usuario y fácilmente navegable. El usuario debe poder ir de un lado a otro del sitio rápidamente y sin perderse.

Recurramos al principio básico de la usabilidad, en este el usuario no tiene

tiempo y menos para estar adivinando cuál es la manera de llegar a los diferentes contenidos de nuestras aplicaciones. Tiene que saber a dónde va y tener confianza en el sitio. Aquí algunos puntos a tener en cuenta a la hora diseñar un sitio. Recomendaciones

Si se trata de una aplicación multimedia distribuida en CD o DVD es conveniente tener el icono de salir en casi todas las pantallas, pues en caso de no ser así, tendríamos que navegar hacia el menú principal para cada vez que se desee salir.

Si la navegación es muy compleja, se debe incluir un mapa de recorrido, en el

cual se indique en todo momento el lugar en el que el lector se encuentra.

Si se presentan textos extensos con barras para avanzar verticalmente, se debe pensar en incluir enlaces a partes del documento, por ejemplo, al inicio del documento por lo menos. En algunos casos es conveniente navegar a través de índices.

Page 29: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 29

Tenga cuidado al navegar e ir bajando de niveles, pues se podría tener un túnel sin salida. A pesar de contar con botones de regresar nivel tras nivel, se debería contemplar un botón que permita navegar hacia el menú principal directamente.

Es posible que al navegar se creen ventanas de información adicional, flotantes a

manera de nodos finales en la estructura; estas deben tener necesariamente algún control para cerrarse y volver al nivel en el que se invocó.

Cuando se está navegando y nos encontramos con un botón de regresar,

asegurémonos de que este sea coherente y nos permita regresar justamente al entorno anterior.

No puede haber demasiados "volver" en el sitio, el usuario puede no saber a

dónde está yendo, causando que pierda la confianza. Si se coloca algún “volver” es recomendable que se ingrese "volver a..." e indicar la sección a dónde va dicho enlace.

Establecer un menú visible de acceso rápido desde todas o casi todas las páginas

del sitio, para acceder a las secciones principales, por ejemplo a la página principal directamente.

Tener en cuenta la regla de los tres clics: el usuario tiene que poder llegar desde

cualquier parte del sitio a cualquier otra en no más de tres clics. Si se supera esa cantidad, algo no está bien.

Además, las interfaces de navegación tienen que ayudar a los usuarios a responder a tres preguntas fundamentales relacionadas con la navegación:

¿Dónde estoy?

La pregunta más importante de la navegación probablemente sea "¿Dónde estoy?", ya que los usuarios nunca podrán llegar a entender la estructura del sitio si no saben dónde están. Así mismo, tampoco tendrá la capacidad de interpretar el significado del vínculo que acaba de seguir.

La ubicación actual del usuario debe mostrarse a dos niveles diferentes:

¿Dónde estoy?

¿Dónde he estado?

¿Dónde puedo ir?

Page 30: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 30

Es necesario que identifique el sitio en todas las páginas, ya que forman un subconjunto de la web. Todas las páginas web se parecen mucho desde la perspectiva del usuario; comparten técnicas de interacción, se descargan (lentamente) en Internet y tienen diseños parecidos. Estas similitudes son buenas, ya que permiten a los usuarios una forma de transmitir las habilidades desde un sitio a otro.

La web en su conjunto domina la experiencia del usuario, ya que este no suele

ver más de cinco páginas a la vez. La desventaja potencial es que los usuarios no sabrán en que sitio están al menos que se les indique. Por lo tanto, la primera regla de navegación consiste en incluir el logotipo (u otro identificador del sitio) en cada página. El logotipo deberá tener una colocación coherente (preferentemente, la esquina superior izquierda si la página está en un lenguaje que se lea de izquierda a derecha) y deberá convertirse en un vínculo de hipertexto con la página de inicio, de forma que los usuarios puedan llegar a su página de inicio desde cualquier otra página.

La ubicación relativa a la estructura del sitio suele darse mostrando estructuras

del sitio y resaltando el área donde se encuentra la página. También es importante tener un titular principal claro en la página que indique su nombre o contenido principal. Por último, el título de la página de la definición de encabezado HTML debe utilizarse para generar un nombre significativo en cada una de las páginas, de forma que los usuarios puedan localizarla fácilmente en su lista de marcadores.

¿Dónde he estado?

Dado que la tecnología web estándar no tiene estado, es posible que sea arduo para los diseñadores de páginas contestar directamente a la pregunta "¿Dónde he estado?", ya que el sitio no lo sabe sin acudir a cookies u otras medidas de control del usuario. Por suerte, algunos de los mecanismos de desplazamiento de los navegadores actuales despejan ciertas dudas sobre esta cuestión. El botón “Atrás” lleva al usuario directamente a la página anterior, la lista de historial incluye una lista de páginas recientemente visitadas, y los vínculos de hipertexto aparecen en un color diferente si señalan a las páginas anteriormente visitadas.

No es recomendable cambiar los colores de vínculo estándar, ya que los

usuarios solo entenderán su significado si tienen el color habitual. Saber los vínculos que conducen a las páginas anteriormente visitadas es útil

por dos motivos: ayuda a los usuarios a aprender la estructura del sitio y les impide perder el tiempo yendo a la misma página muchas veces.

1. En relación con la web como un todo

2. En relación con la estructura del sitio

Page 31: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 31

¿Dónde puedo ir?

A esta pregunta responden las numerosas opciones de navegación y todos los demás vínculos que pueda haber en la página. Además si presuponemos que el usuario ha entendido medianamente la estructura del sitio se habrá hecho una idea general de otros sitios a los que puede ir. Dado que es imposible mostrar todos los destinos posibles en todas las páginas, resulta obvio que una buena estructura de sitio constituye una ventaja muy importante a la hora de ayudar a los usuarios a responder a la pregunta "¿Dónde puedo ir?"

Es momento de revisar lo que significa un storyboard.

1.5 Storyboard

Tanto el diseño de la maquetación como el diseño del storyboard son tareas que se pueden realizar en paralelo, ambas se complementan.

Un storyboard es un documento similar a un plano de una construcción, y puede llegar a ser más complejo donde se detallan los responsables del proyecto, las tareas a realizar y los tiempos considerados para cada etapa. Sirve para indicar la secuencia de pantallas desde el punto inicial, las posibles bifurcaciones entre las

Es un formato de guión usado para cine, animaciones y aplicaciones multimedia que se enmarca en el desarrollo de una aplicación multimedia.

Es un documento en el que se registran gráficamente cada una de las pantallas que conforman una aplicación digital.

Al mismo tiempo, se debe establecer la relación que existe entre las pantallas que intervienen.

Storyboard

Reflexione y responda:

Cuándo navega en la web ¿le ha ocurrido que vuelve a la página muchas

veces?...........................................................................................................................

¿Qué medidas ha tomado para que no le ocurra frecuentemente?

…………………………………………………………………………………………….……

..………………………………………………………………………………………………..

Page 32: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 32

pantallas al realizar determinadas acciones, hasta llegar a la parte final en la que se da por terminado el recorrido de la navegación.

En algunas aplicaciones multimedia se hace necesaria la participación de un

personaje a quien se le encarga el papel de guía en determinadas secciones del producto; por ejemplo, en la sección de ayuda interactiva o en secciones en las que se invita al usuario a rendir una autoevaluación y, al finalizar, el personaje felicita o da las indicaciones al usuario acerca de los resultados.

Es necesario diferenciar niveles en el storyboard; en nuestro curso definiremos

los dos siguientes:

Es importante el diseño de estos documentos, ya que facilitan la tarea de comprensión y comunicación durante el desarrollo del proyecto. 1.5.1 Elementos de diagramación del storyboard

A continuación revisaremos los elementos de diagramación que son parte del storyboard: @ Inicio y fin

Para indicar el inicio y el fin del diagrama del storyboard se usan las etiquetas correspondientes encerradas en elipses cerradas dobles como se muestra en la figura.

Inicio

Fin

@ Relación y dirección de flujo

La línea es un elemento de conexión entre las pantallas, indica la relación que guardan entre ellas. Las puntas de flecha señalan la dirección del flujo. @ Pantallas o ventanas

Se representan con rectángulos, los que contienen elementos definidos en el diseño de la maquetación. Las pantallas se deben identificar con un nombre o código, que sirve de referente al momento de establecer las relaciones entre pantallas.

Pantalla

P001

Nivel 01. Nivel básico: muestra de manera general cada una de las pantallas y las relaciones entre ellas. Nivel 02. Nivel de detalle: muestra detalladamente los elementos que intervienen en cada pantalla y sus principales características.

Page 33: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 33

@ Conectores

Se usan para indicar y realizar saltos en el diagrama, para lo cual se tiene en cuenta el identificador o código de las pantallas.

P01

Consideraciones:

Si se desea que el flujo de la secuencia de pantallas se lleve a cabo mediante alguna acción por parte del usuario, se debe tener cuidado con el uso de las líneas de relación y dirección de flujo.

INTRODUCCIÓN

P001

INTRODUCCIÓN

P001

Caso 1:

En la pantalla se presenta la introducción y luego de cierto intervalo de tiempo el flujo continúa de manera automática. También se podría interpretar como que el usuario presiona alguna tecla o hace clic en cualquier parte de la pantalla para continuar, en cuyo caso se debería mostrar un mensaje adecuado en la pantalla, por ejemplo, “Saltar introducción”.

Caso 2:

En la pantalla se presenta la introducción y luego el usuario tiene el control mediante la acción que realice directamente sobre el botón que aparece en pantalla, el cual podría tener un mensaje adecuado como por ejemplo, “Hacer clic para saltar la animación” o “Continuar”.

Page 34: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 34

A continuación se muestra un ejemplo en el cual se han tomado, como tema de

desarrollo, las cuatro operaciones básicas.

Reflexione y responda: ¿En alguna de sus aplicaciones multimedia ha diseñado el storyboard teniendo en cuenta uno de los casos presentados? Explique brevemente. …………………………………………………………………………………………………

…………………………………………………………………………………………………

…………………………………………………………………………………………………

¿Qué resultados ha obtenido?

…………………………………………………………………….………………………..…

..……………………………………………………………………………………………….

.………………………………………………………………………………………………..

Page 35: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 35

Storyboard - Nivel 01:

Inicio

INTRODUCCIÓN

OPERACIONES BÁSICAS

? S

P002P001

P100

ADICIÓN

? S

M E A

P200

P300

P400

P120P101

ADICIÓN

? S

M E A

P100

Ejercicios

P120

ADICIÓN

? S

M E A

P100

Autoevaluación

P500P500

P600

HH

P002

H

P002

P500

P500

AYUDA

Cerrar ventanade ayuda

Fin

P600

¿DESEA SALIR?

NOSI

CRÉDITOS

Vover al puntode invocación

P610

Page 36: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 36

Storyboard - Nivel 01 (continuación):

P300

MULTIPLICACIÓN

? S

M E A

P320

P600

P301

MULTIPLICACIÓN

? S

M E A

P300

P600

Ejercicios

P320

MULTIPLICACIÓN

? S

M E A

P300

P600

Autoevaluación

P500P500

HH

P002

H

P002

P500

P002

P400

DIVISIÓN

? S

M E A

P420

P600

P401

DIVISIÓN

? S

M E A

P400

P600

Ejercicios

P420

DIVISIÓN

? S

M E A

P400

P600

Autoevaluación

P500P500

HH

P002

H

P002

P500

P002

P200

SUSTRACCIÓN

? S

M E A

P220

P600

P201

SUSTRACCIÓN

? S

M E A

P200

P600

Ejercicios

P220

SUSTRACCIÓN

? S

M E A

P200

P600

Autoevaluación

P500P500

HH

P002

H

P002

P500

P002

Page 37: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 37

Storyboard - Nivel 02:

PANTALLA P002: Menú principal

OPERACIONES BÁSICAS

? S

P002

Descripción de contenidos: Imagen de fondo: Color plano con código RGB: 196-191-102 (#C4BF66) Música de fondo: mix_02.wav Título: representación textual, arial, 30 pts, centrado, color con código RGB: 0-0-0 (#000000). Botones interactivos: Adición, Sustracción, Multiplicación, División, Ayuda y Salir. Características: representación gráfica Estados: up, over, down

Comentarios: Al ubicarse sobre los botones principales, Adición, Sustracción, Multiplicación o División, se visualizará un mensaje debajo de cada botón respectivo y, al mismo tiempo, se oirá una locución que invitará al usuario a dirigirse a la sección que corresponda.

Page 38: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 38

PANTALLA P100: Adición

P100

ADICIÓN

? S

M E AH

Descripción de contenidos:

Imagen de fondo:

Color plano con código RGB: 249-204-68 (#F9CC44)

Música de fondo: mix_05.wav

Título: representación textual, arial, 30 pts, centrado, color con código RGB: 0-0-0 (#000000).

Texto central: teoría de la adición e introducción, arial, 30 pts, justificado, color con código RGB: 0-0-0 (#000000).

Botones interactivos: menú principal(H), menú adición(M), sección Ejercicios(E), sección autoevaluación(A), sección ayuda(?) y salir(S) .

Características: representación gráfica

Estados: up, over, down

Comentarios:

En la barra de botones superior, el botón (M) se presenta desactivado en esta pantalla debido a que la acción sobre él llevaría a esta misma pantalla; estará activado en las pantallas de las secciones Ejercicios y Autoevaluación.

En el ejemplo detallado se muestra el nivel 01 y parte del nivel 02. En un

storyboard se debe realizar el nivel 02 completo, esto quiere decir que se debe especificar las características de cada una de las pantallas que figuran en el nivel 01.

Page 39: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 39

Documentos adicionales

Lista de identificación de pantallas:

Identificador Descripción de pantallas

P001 Introducción

P002 Menú principal: muestra las opciones principales para acceder a

cada sección.

P100 Adición: presenta la introducción y parte teórica.

P101 Adición – ejercicios: muestra una secuencia de ejercicios.

P120 Adición – autoevaluación: muestra una secuencia de preguntas.

P200 Sustracción: presenta la introducción y parte teórica.

P201 Sustracción – ejercicios: muestra una secuencia de ejercicios.

P220 Sustracción – autoevaluación: muestra una secuencia de preguntas.

P300 Multiplicación: presenta la introducción y parte teórica.

P301 Multiplicación – ejercicios: muestra una secuencia de ejercicios.

P320 Multiplicación – autoevaluación: muestra una secuencia de

preguntas.

P400 División: presenta la introducción y parte teórica.

P401 División – ejercicios: muestra una secuencia de ejercicios.

P420 División – autoevaluación: muestra una secuencia de preguntas.

P500 Ayuda.

P600 Confirmación de salida.

P610 Créditos del equipo de desarrollo.

Page 40: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 40

1.6 Selección de herramientas

Una de las tareas más importantes es tener conocimiento de las herramientas que existen en el mercado, conocer cuáles son sus ventajas y desventajas, sus alcances y limitaciones y, finalmente, decidir qué software se debe adquirir para ser usado en el desarrollo. Téngase en cuenta también que existen algunas herramientas Open Source, de código abierto, de libre uso y distribución. Una muy buena y completa colección de software de este tipo se puede hallar en la siguiente dirección: http://www.cdlibre.org.

En la actualidad se ha avanzado mucho en la creación de herramientas especializadas para trabajar de manera profesional con imagen, sonido y video. En este sentido, los softwares son cada vez más intuitivos y fáciles de usar; incluso su instalación es casi de manera inmediata y no se requiere amplios conocimientos de informática. Sin embargo, lo que sí se requiere conocer es la función específica de la herramienta, debido a que muchas cumplen las mismas tareas, pero algunas presentan mejores resultados que otras. Para esto es necesario conocer la teoría de los principales formatos en cada uno de los medios, y así aprovechar al máximo las características que brindan en cuanto a calidad y funcionalidad al ser integradas en un sistema.

A continuación se presentan algunas herramientas catalogadas por el tipo de medio.

Texto

- Creación-edición: Font Creador Program CrossFont TypeTool FontLab

- Visualizadores:

The Font Thing X-Fonter

Imagen

- Creación-edición: Paint Shop Pro

Adobe PhotoShop Gimp

Adobe Illustrator Corel Draw IconForge MicroAngelo

- Convertidores y visualizadores: IrfanView ImageWalker Brennig's

Audio - Edición:

GoldWave SoundForge Audacity

- Convertidores: AudioGrabber Exact Audio Copy CDex

- Reproductores: Winamp Foobar2000

Page 41: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 41

Veamos el esquema que resume la primera unidad.

Video

- Creación - edición: Adobe Premiere Ulead Media Studio

- Visualizadores: Windows Media Player Winamp

- Captura - edición: VirtualDub TMPGEnc

Animación - Creación - edición:

Macromedia Flash Gift Construction Set Professional

Herramientas de autor Integrador: Macromedia Director (basado en tiempo) Macromedia Authorware (basado en iconos) Herramientas extras y dll’s

Reflexione y responda: ¿Ha empleado alguna de estas herramientas?....................................... Inténtelo, le traerá grandes ventajas.

Page 42: Curso6 primera unidad

DDIIPPLLOOMMAATTUURRAA DDEE EESSPPEECCIIAALLIIZZAACCIIÓÓNN EENN TTEECCNNOOLLOOGGÍÍAASS DDEE LLAA IINNFFOORRMMAACCIIÓÓNN YY LLAA CCOOMMUUNNIICCAACCIIÓÓNN PPAARRAA LLAA DDOOCCEENNCCIIAA EENN LLAA EEDDUUCCAACCIIÓÓNN SSUUPPEERRIIOORR

Pontificia Universidad Católica del Perú – Facultad de Educación 42

Diseño multimedia

¿Qué es multimedia?

Elementos de la maquetación

digital

Interactividad

Interacción y navegación

Proceso de desarrollo de un

producto multimedia

Conceptos Maquetación

digital

A quién va dirigido

Contenidos Maquetación

digital Storyboard

Documentación a generar Prototipo

Integración Control de

calidad Empacado

Storyboard

Elementos de diagramación

del storyboard

Percepción para la

maquetación

Recomendaciones para el diseño de la

maquetación digital

Navegabilidad