Curso6 primera unidad by minerva galeano

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

FACULTAD DE EDUCACIÓN

Curso 6: Integración de herramientas multimedia para el desarrollo de recursos didácticos

Modalidad a distancia

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

CURSO 6 Integración de herramientas multimedia para el desarrollo de recursos didácticos 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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Í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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Introducción ¡Bienvenido(a) al sexto curso: Integración de herramientas multimedia para el desarrollo de recursos didácticos!

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.

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

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Autoevaluación

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

5. Mencione algunos dispositivos para capturar imágenes:

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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.

(V)

(F)

b) Basadas en tiempos, en espacios y scripting languages

(V)

(F)

c) Basadas en fichas, iconos, tiempos y scripting languages.

(V)

(F)

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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?

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Diseño multimedia 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. Fuente: http://rennyflash.blogspot.com/2009/09/disenomultimedia.html

A continuación analizaremos principales conceptos básicos que permitirán diseñar un producto multimedia.

1.1 Conceptos

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

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

los nos

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

¿A quién va dirigido? 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. Contenidos 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. Maquetación digital 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. Storyboard 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. Documentación a generar 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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Prototipo 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. Integración 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. Control de calidad 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. Empacado 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. ………………................................................................................................................ ………………................................................................................................................ ………………................................................................................................................

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

Interfaz

No son iguales

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

Significa la función e interacción.

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: Elementos gráficos y tipográficos:     

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

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 de imagen:   

Fotografías Ilustraciones y animaciones Símbolos e iconos

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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. Elementos funcionales:  Controles definidos por el sistema  Controles o elementos propios

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. Orden Comprensión de un sistema digital

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.

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:

Montaje

- Formatos

Percepción para la

- Ojos

maquetación

- Tubo de rayos catódicos Campos de acción

- Formatos de visualización - Monitores - Percepción

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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



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



Tubo de rayos catódicos 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.



Formatos de visualización 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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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



Percepción 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. Cantidad de información (bit/s) que se puede percibir por los órganos sensoriales: Vista Oído Olfato Gusto Tacto

10 000 000 bit/s 10 000 bit/s 1000 bit/s 10 bit/s 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 - Intensidad Diseño de la maquetación digital

- Siete mágico - Fragmentación - Estructuración de apartados

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

@ 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:

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

Innovación Irritación

Percepción

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

@ 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. Pontificia Universidad Católica del Perú – Facultad de Educación

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Pasiva

Activa

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.

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.

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR



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.

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.

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 24

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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. Reflexione y responda: Describa brevemente, ¿cuál es la ventaja que tiene la interactividad en el aprendizaje significativo? ……………………………………………………………………………………………. ……………………………………………………………………………………………. …………………………………………………………………………………………….

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:

La estructura es un reflejo del diseño de storyboard creado al inicio del proyecto

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR



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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR



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 Pontificia Universidad Católica del Perú – Facultad de Educación

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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?



¿Dónde he estado?



¿Dónde puedo ir?

¿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:

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

1. En relación con la web como un todo 2. En relación con la estructura del sitio

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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



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

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

Storyboard

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

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

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

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

Pantalla

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

@ 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. 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”. P001

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

INTRODUCCIÓN

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

A continuación se muestra un ejemplo en el cual se han tomado, como tema de desarrollo, las cuatro operaciones básicas.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Storyboard - Nivel 01: Inicio P001

P002

OPERACIONES BÁSICAS P200

INTRODUCCIÓN

P300

P400

S P600

P500

P002

P100 P120

P100

ADICIÓN

P002

P101

ADICIÓN

Ejercicios

P100

P120

Autoevaluación

P500

P600

P500

AYUDA ¿DESEA SALIR?

Cerrar ventana de ayuda

Vover al punto de invocación

P610

CRÉDITOS

Fin

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Storyboard - Nivel 01 (continuación):

P002

P002 P220

P200

SUSTRACCIÓN H M

P200

P002

P201

P220

SUSTRACCIÓN H M E

SUSTRACCIÓN H M

Ejercicios

P002 P320

P300 MULTIPLICACIÓN H

P500

P600

P002

P600

MULTIPLICACIÓN H

P002

M E

P002

P400

DIVISIÓN

H M

MULTIPLICACIÓN H

P500

S P600

P400

P002

P420

H M E

DIVISIÓN

H M

Autoevaluación

? P600

P500

P400

Ejercicios

P600

P401

DIVISIÓN

P600

P300

P500

P600

P420

Autoevaluación

P002

P320

P500

P300

P301

Ejercicios

Autoevaluación

P500

P200

P500

S P600

P500

P600

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Storyboard - Nivel 02:

PANTALLA P002: Menú principal Descripción de contenidos: Imagen de fondo:

P002

OPERACIONES BÁSICAS

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

PANTALLA P100: Adición

P100

ADICIÓN

Descripción de contenidos:

M E

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.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Documentos adicionales Lista de identificación de pantallas: Identificador P001

Descripción de pantallas Introducción Menú principal: muestra las opciones principales para acceder a

P002 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. Multiplicación – autoevaluación: muestra una secuencia de

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

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

Audio - Edición: GoldWave SoundForge Audacity

Imagen - Creación-edición: Paint Shop Pro Adobe PhotoShop Gimp Adobe Illustrator Corel Draw IconForge MicroAngelo - Convertidores y visualizadores: IrfanView ImageWalker Brennig's

- Convertidores: AudioGrabber Exact Audio Copy CDex - Reproductores: Winamp

Foobar2000 40

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

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

- 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

Reflexione y responda:

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

Veamos el esquema que resume la primera unidad.

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

DIPLOMATURA DE ESPECIALIZACIÓN EN TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA DOCENCIA EN LA EDUCACIÓN SUPERIOR

Diseño multimedia

Conceptos

¿Qué es multimedia?

Proceso de desarrollo de un producto multimedia

A quién va dirigido Contenidos Maquetación digital Storyboard Documentación a generar Prototipo Integración Control de calidad Empacado

Maquetación digital

Interacción y navegación

Storyboard

Elementos de diagramación del storyboard Elementos de la maquetación digital

Interactividad

Navegabilidad Percepción para la maquetación

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

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