Extensión CourseBuilder ADOBE elearning SUITE 6

Transcripción

1 Extensión CourseBuilder ADOBE elearning SUITE 6

2 Avisos legales Avisos legales Para consultar los avisos legales, consulte

3 iii Contenidos Capítulo 1: Introducción Información general Puntos destacados de la versión Usos de CourseBuilder para Dreamweaver Aprendizaje de CourseBuilder para Adobe Dreamweaver Capítulo 2: Tutoriales de Dreamweaver Información general del tutorial Configuración de la estructura del sitio del tutorial Definición de un sitio local Creación de una interacción de CourseBuilder de exploración Definición de las áreas activas Creación de comentarios del usuario Creación de una interacción de arrastrar y soltar Creación de pares de arrastrar y soltar Definición del ajuste a la configuración Creación de comentarios del usuario Creación de una prueba de opción múltiple Definición de la interacción de opción múltiple Creación de una capa para comentarios del usuario Creación de comentarios del usuario Creación de una interacción de opción múltiple Definición de la interacción de opción múltiple Definición de las opciones Definición de la acción Prueba de la interacción Capítulo 3: Conceptos básicos de CourseBuilder para Dreamweaver Información general sobre los conceptos básicos de CourseBuilder Copiado de los archivos de compatibilidad Interacciones de CourseBuilder Copiado de archivos al servidor web Solución de problemas Capítulo 4: Interacciones de CourseBuilder de opción múltiple Introducción Creación de una pregunta de verdadero/falso Preguntas de opción múltiple Creación de una pregunta de respuesta múltiple Opciones de interacción de CourseBuilder de opción múltiple Edición de interacciones de opción múltiple

4 Contenidos iv Capítulo 5: Interacciones de CourseBuilder de arrastrar y soltar Introducción Opciones de interacción de CourseBuilder de arrastrar y soltar Correspondencia de uno a uno y de uno a varios Construcción de ejercicios de coincidencia propios Creación de procedimientos de dos pasos Edición de procedimientos de arrastrar y soltar Capítulo 6: Interacciones de coincidencia Información general sobre las interacciones de coincidencia Plantillas de coincidencia Opciones de interacción de coincidencia de CourseBuilder Trabajo con interacciones de coincidencia Capítulo 7: Interacciones de secuencia Información general de la interacción de secuencia Creación de una interacción de secuencia de CourseBuilder Capítulo 8: Interacciones de CourseBuilder de exploración Información general sobre las interacciones de exploración Creación de exploraciones Edición de interacciones de exploración Capítulo 9: Interacciones de CourseBuilder de entrada de texto Información general de la interacción de entrada de texto Plantillas de entrada de texto Creación de un campo de entrada de texto Trabajo con la interacción de CourseBuilder de entrada de texto Capítulo 10: Interacciones Likert Información general sobre la interacción Likert Opciones de interacción Likert de CourseBuilder Adición o eliminación de una opción Capítulo 11: Mejoras y personalización Mejoras y personalización de las interacciones de CourseBuilder Edición de interacciones de CourseBuilder Cortar, Copiar, Pegar y Borrar interacciones Personalización de comentarios Visualización de comentarios en un marco, una capa, una barra de estado o un campo de texto Limitación del número de intentos Adición de un límite de tiempo en una interacción Configuración del momento en que se evalúa la interacción de CourseBuilder Modificación del nombre del botón Enviar Restablecimiento de una interacción de CourseBuilder Inserción de una interacción de CourseBuilder en una capa Configuración de preferencias Gestión de plantillas de interacción de CourseBuilder

5 Contenidos v Adición de una plantilla de interacción de CourseBuilder a la galería Creación de un icono personalizado para una plantilla Trabajo con archivos de la galería Capítulo 12: Controles de interacciones de CourseBuilder Interacciones de CourseBuilder de botón Interacción de CourseBuilder de temporizador Interacciones de CourseBuilder de regulador Capítulo 13: Gestor de acción Interacciones de CourseBuilder del Gestor de acción Segmentos del Gestor de acción Adición de un segmento Adición de una condición Creación de expresiones para una condición Ajustes del campo Tipo Adición de una acción Trabajo con segmentos, condiciones y acciones Dónde crear acciones Acciones específicas para el aprendizaje Configuración de propiedades de interacción Propiedades de interacción de CourseBuilder Configuración de propiedades del Gestor de acción Configuración de la propiedad JavaScript Adición de un comportamiento personalizado Interacciones de CourseBuilder del Gestor de acción La plantilla Gestor de acción Opciones de Interacción de CourseBuilder de Gestor de acción Capítulo 14: Seguimiento de datos y puntuación Seguimiento del rendimiento del usuario Marcar una respuesta como correcta o incorrecta Puntuación de una respuesta Visualización de comentarios Localización del identificador de la interacción de CourseBuilder en el código fuente HTML Puntuación y seguimiento

6 1 Capítulo 1: Introducción Información general La extensión CourseBuilder para Adobe Dreamweaver permite crear interacciones de aprendizaje basadas en web en un entorno de creación visual. La extensión CourseBuilder incluye un conjunto de plantillas y herramientas fáciles de usar que simplifican y aceleran el desarrollo del contenido de aprendizaje en línea. Las interacciones de aprendizaje creadas con la extensión son totalmente nativas en web y permiten la entrega con varias plataformas y distintos navegadores sin plugins o applets. Puntos destacados de la versión Extensión CourseBuilder para Adobe Dreamweaver en Mac OS Puede utilizar la extensión CourseBuilder para Adobe Dreamweaver en un entorno de Mac. Todas las funciones para Windows están disponibles en Mac OS. Compatibilidad para el navegador Safari Además de los otros navegadores populares, la extensión CourseBuilder para Adobe Dreamweaver es compatible con el navegador Safari para Windows y Macintosh. La siguiente tabla proporciona detalles específicos de los navegadores admitidos: Navegador Plataforma Versiones Internet Explorer Windows 6, 7 y 8 Mozilla Firefox Windows y Mac OS 3.0 y 3.5 Safari Windows y Mac OS 4 Usos de CourseBuilder para Dreamweaver CourseBuilder para Dreamweaver le ayuda a diseñar rápidamente atractivas interacciones de aprendizaje con instrucciones paso a paso. En minutos, puede: Crear pruebas de tipo verdadero/falso, de opción múltiple y de respuesta múltiple Consulte Interacciones de CourseBuilder de opción múltiple en la página 29 para obtener más detalles. Crear ejercicios de coincidencia de arrastrar y soltar Consulte Interacciones de CourseBuilder de arrastrar y soltar en la página 36 para obtener más detalles. Crear interacciones de coincidencia Consulte Interacciones de coincidencia en la página 47 para obtener más detalles. Crear interacciones de secuencia Consulte Interacciones de secuencia en la página 51 para obtener más detalles.

7 Introducción 2 Crear interacciones de exploración Consulte Interacciones de CourseBuilder de exploración en la página 54 para obtener más detalles. Crear interacciones de entrada de texto Consulte Interacciones de CourseBuilder de entrada de texto en la página 59 para obtener más información. Crear interacciones Likert Consulte Interacciones Likert en la página 65 para obtener más detalles. Crear botones, temporizadores y reguladores Consulte Controles de interacciones de CourseBuilder en la página 77 para obtener más detalles. Realizar un seguimiento del rendimiento del usuario Consulte Seguimiento de datos y puntuación en la página 119 para obtener más información. La extensión permite definir una interacción de aprendizaje basada en web completa. Elija el tipo de interacción que desea crear en la Galería de interacción de CourseBuilder en la página 27. Puede editar el contenido de una interacción de CourseBuilder, de modo que no tenga que empezar desde cero para realizar cambios. Puede ampliar la funcionalidad incorporada en una interacción de CourseBuilder creando sus propias plantillas de interacción. CourseBuilder para Dreamweaver incluye tanto las interacciones de aprendizaje tradicional (opción múltiple, arrastrar y soltar, exploración y entrada de texto) y las interacciones de aprendizaje que funcionan como controles de escritorio (botones, temporizadores y reguladores). Puede combinar las interacciones de CourseBuilder; por ejemplo, se puede incluir un objeto de temporizador con un objeto de arrastrar y soltar que registre el tiempo que el usuario tarda en completar la interacción de arrastrar y soltar. Es posible utilizar una interacción de CourseBuilder del Gestor de acción para controlar las condiciones y acciones para cualquiera o todas las demás interacciones de CourseBuilder en la página. Aprendizaje de CourseBuilder para Adobe Dreamweaver El paquete CourseBuilder para Dreamweaver contiene todo tipo de recursos con los que aprenderá rápidamente a utilizar el programa para convertirse en un especialista en crear sus propias interacciones de página web. Ayuda de CourseBuilder para Dreamweaver La ayuda de CourseBuilder para Dreamweaver proporciona información detallada acerca de todas las funciones de la interacción de CourseBuilder. Tutoriales de CourseBuilder El tutorial de CourseBuilder muestra cómo utilizar CourseBuilder para Adobe Dreamweaver para crear interacciones de aprendizaje. Para obtener más información, consulte Tutoriales de Dreamweaver en la página 3.

8 3 Capítulo 2: Tutoriales de Dreamweaver Información general del tutorial Este tutorial muestra cómo utilizar CourseBuilder para Adobe Dreamweaver para crear muchos tipos de interacciones de aprendizaje. Al desarrollar un módulo de formación de ventas basado en web para representantes de ventas de Discovertoys.com (empresa ficticia), cree: Una interacción de exploración (donde un usuario hace clic en las áreas de una página para obtener más información sobre un objeto) Una interacción de opción múltiple (donde un usuario selecciona una respuesta correcta de un conjunto de opciones) Una interacción de arrastrar y soltar (donde un usuario demuestra conocimiento al arrastrar un objeto de la pantalla a otro objeto de la pantalla). A lo largo del proceso, aprenderá a realizar las siguientes tareas: Copiar archivos de compatibilidad a una carpeta del sitio local Insertar interacciones de CourseBuilder en un documento Utilizar el cuadro de diálogo Interacción de CourseBuilder para seleccionar una plantilla de interacción Personalizar plantillas de interacción de CourseBuilder Utilizar el Gestor de acción para asociar acciones con una interacción Editar las interacciones de CourseBuilder Probar una interacción Previsualización de la interacción de Discover Toys completada Mire en los archivos completados de CourseBuilder para Dreamweaver para hacerse una idea de lo que se planteó como objetivo. En la carpeta en la que instaló CourseBuilder para Dreamweaver, abra la carpeta llamada cb_tutorial. A continuación, busque la carpeta denominada discover_comp y, a continuación, haga doble clic en el archivo llamado discover_nav.htm. La página discover_nav se abre en su navegador, haga clic en los botones de esta página para navegar a otras páginas del sitio. Intente todas las combinaciones posibles de respuestas correctas e incorrectas en las páginas de prueba para ver cómo funcionan las interacciones. Haga clic en Actualizar o Volver a cargar en el navegador para reiniciar una interacción. Cierre el navegador cuando haya terminado de buscar en los archivos. Organización de los archivos de tutoriales La carpeta cb_tutorial contiene tanto los archivos HTML completados como los parcialmente completados utilizados en este tutorial.

9 Tutoriales de Dreamweaver 4 Los archivos completados se encuentran en la carpeta discover_comp. Las imágenes y otros archivos asociados para los archivos completados se encuentran en las carpetas en el interior de la carpeta discover_comp. Los archivos parcialmente completados, en los que va a trabajar, se encuentran en la carpeta cb_discover. (La ruta completa de la carpeta discover_comp varía, dependiendo de dónde tiene instalado CourseBuilder para Dreamweaver). Cada archivo tiene un nombre significativo, por ejemplo, el archivo HTML para la página de navegación del módulo completado se denomina discover_nav.htm. Los archivos parcialmente completados tienen nombres similares a sus homólogos del sitio completo, excepto en que comienzan por cb_; la versión parcialmente completada de discover_nav.htm, por ejemplo, se llama cb_nav.htm. Configuración de la estructura del sitio del tutorial Antes de empezar el tutorial, cree una carpeta en la que transferirá los archivos del tutorial de CourseBuilder para Dreamweaver. Si ha realizado el tutorial de Adobe Dreamweaver y ya ha creado una carpeta denominada Sitios, omita el paso 1. 1 En el nivel raíz de la unidad de disco local, cree una carpeta con el nombre Sitios (por ejemplo, C: \Sitios (Windows) o en el disco duro:sitios (Macintosh). 2 Desde la carpeta CourseBuilder\Tutorial, copie la carpeta cb_tutorial completa a la carpeta Sitios. Definición de un sitio local Configure un sitio local para desarrollar una estructura de archivos para el sitio. Un sitio local contiene todos los archivos que se utilizan dentro de un sitio determinado, como archivos HTML, imágenes, scripts y otros archivos de recursos. Para este tutorial, especifique la carpeta cb_tutorial como la carpeta del sitio local. 1 Inicie Adobe Dreamweaver. Se abre un documento en blanco. 2 Elija Sitio > Nuevo sitio. 3 En el cuadro de diálogo Definición del sitio, asegúrese de que la opción Información local está seleccionada en la lista Categoría. 4 En el campo Nombre del sitio, escriba my_course. 5 Haga clic en el icono de carpeta situado a la derecha del campo Carpeta raíz local, vaya a la carpeta Sitios\cb_tutorial y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). El campo Carpeta raíz local se actualiza para mostrar la ruta al sitio local. Nota: La ruta completa de la carpeta cb_tutorial puede variar, dependiendo de donde se haya creado la carpeta Sitios. 6 Haga clic en Aceptar. 7 Haga clic en Crear cuando se le pregunte si desea crear un archivo de caché para el sitio. Al almacenar en caché los archivos en la carpeta cb_tutorial, se crea un registro de los archivos existentes, de modo que Dreamweaver pueda actualizar rápidamente los vínculos al mover, cambiar de nombre o eliminar un archivo. La ventana Sitio ahora muestra una lista de las carpetas y archivos en el sitio local my_course. La lista también actúa como un administrador de archivos, lo que permite copiar, pegar, eliminar, mover y abrir archivos como lo haría en el buscador o explorador de archivos de su ordenador.

10 Tutoriales de Dreamweaver 5 8 Deje abierta la ventana Sitio. 9 Haga clic en la ventana Documento para que se active. Creación de una interacción de CourseBuilder de exploración Las interacciones de CourseBuilder no se pueden añadir a un documento que no está guardado. Puede empezar con un documento nuevo y, a continuación, guardarlo, o puede abrir un documento existente. En este tutorial, añada interacciones de CourseBuilder a las páginas parcialmente completadas existentes que contienen los mismos elementos, una imagen de fondo y un titular del departamento de formación. A continuación, cree una interacción de exploración. En esta interacción, los usuarios hacen clic en las imágenes de los productos de juguete para obtener más información sobre ellos. Abra el archivo al que añadirá una interacción de exploración de CourseBuilder. 1 Seleccione Archivo > Abrir. 2 En el cuadro de diálogo que aparece a continuación, vaya a Sitios/cb_tutorial/cb_discover, seleccione cb_explore.htm y, a continuación, haga clic en Seleccionar (Windows) o Abrir (Macintosh) para abrir el archivo. Copia de los archivos de compatibilidad CourseBuilder para Dreamweaver requiere archivos de compatibilidad que contengan imágenes y secuencias de comandos; los archivos de compatibilidad permiten que las interacciones de CourseBuilder funcionen. Copie los archivos de compatibilidad a la carpeta cb_discover. 1 Seleccione Modificar > CourseBuilder > Copiar archivos de compatibilidad. Aparece un mensaje con información sobre dónde se copiarán los archivos de compatibilidad 2 Haga clic en Aceptar para crear las carpetas necesarias y copiar los archivos. Los archivos se copian en la carpeta cb_discover. Inserción de una interacción de CourseBuilder 1 Si la paleta Objeto no está abierta, elija Ventana > Objetos para que se abra. 2 En la ventana Documento, haga clic en la parte central del documento para situar el punto de inserción después de los elementos existentes de la página. 3 En el panel Aprendizaje de la paleta Objeto, haga clic en el icono Interacción de CourseBuilder para abrir el cuadro de diálogo Interacción de CourseBuilder. Selección del tipo de interacción 1 Seleccione Explorar en la lista Categoría. Los iconos de la galería representan las interacciones de CourseBuilder de exploración que funcionan en navegadores de la versión 4 y posteriores. 2 Haga clic en el icono correspondiente a la plantilla Explorar áreas.

11 Tutoriales de Dreamweaver 6 Definición de las áreas activas No es necesario modificar los valores predeterminados que se encuentran en la ficha General, empiece por especificar los elementos de área activa de la interacción de exploración (los gráficos de los juguetes a los que los usuarios harán clic). Adición de gráficos para las áreas activas 1 Inicie haciendo clic en la ficha Áreas activas. En la lista Áreas activas, la opción Área activa1 ya está seleccionada. 2 En el campo Imagen, haga clic en Examinar. A continuación, en el cuadro de diálogo Seleccionar aspecto, vaya a la carpeta cb_graphics y seleccione toy_racer.gif. A continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 3 En la lista Áreas activas, la opción Área activa1 ya está seleccionada. 4 En el campo Imagen, haga clic en Examinar. A continuación, en el cuadro de diálogo Seleccionar aspecto, vaya a la carpeta cb_graphics y seleccione toy_racer.gif. A continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. Adición de tres gráficos de área activa adicionales 1 En la lista Áreas activas, seleccione Áreaactiva2. 2 En el campo Imagen, haga clic en Examinar. A continuación, en el cuadro de diálogo Seleccionar aspecto, vaya a la carpeta cb_graphics y seleccione toy_coldfusion.gif. A continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 3 En la lista Áreas activas, seleccione Áreaactiva3. 4 En el campo Imagen, haga clic en Examinar. A continuación, en el cuadro de diálogo Seleccionar aspecto, vaya a la carpeta cb_graphics y seleccione toy_satellite.gif. A continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 5 En la lista Áreas activas, seleccione Área activa4. 6 En el campo Imagen, haga clic en Examinar. A continuación, en el cuadro de diálogo Seleccionar aspecto, vaya a la carpeta cb_graphics y seleccione toy_waverider.gif. A continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 7 Haga clic en Aceptar para cerrar el cuadro de diálogo Interacción de CourseBuilder. 8 Guarde el archivo. Organización de las áreas activas en el documento A continuación, quite las instrucciones de texto en la página y desplace los elementos de área activa para dejar espacio para un nuevo elemento que va a utilizar para proporcionar comentarios a los usuarios. 1 En la ventana Documento, seleccione el texto "Click on a hot area" en la parte superior de la pantalla y, a continuación, pulse la tecla Retroceso (Windows) o Suprimir (Macintosh) para eliminarlo. 2 Seleccione el elemento de área activa. Consulte la documentación de Dreamweaver para obtener más información sobre este paso.

12 Tutoriales de Dreamweaver 7 3 Haga clic en el controlador de la selección de elemento en la esquina superior izquierda. A continuación, arrastre el elemento a su nueva posición. Mueva cada área activa para colocar los elementos de la forma necesaria. 4 Guarde los cambios. Adición de un elemento para los comentarios del usuario A continuación, cree en la página un elemento donde deben aparecer las instrucciones para el usuario y la información de producto. 1 En el panel Insertar, haga clic en Dibujar Div PA en Diseño. 2 Mueva el puntero a la ventana Documento y, a continuación, arrastre para dibujar una DIV en el lado derecho del documento. 3 Seleccione la DIV. A continuación, en el campo ID del Inspector de propiedades, sustituya el texto predeterminado "apdiv1" escribiendo ProductInfo. 4 En la ventana Documento, haga clic en la parte central del elemento ProductInfo. 5 Inserte una imagen en el elemento. Aparecerá el cuadro de diálogo Seleccionar origen de imagen. 6 En el cuadro de diálogo, vaya a la carpeta cb_graphics, seleccione text_any.jpg y, a continuación, haga clic en Seleccionar (Windows) para insertar la imagen en el elemento. Las instrucciones de usuario aparecerán en el elemento ProductInfo en la ventana Documento. Edición de una interacción de CourseBuilder Los elementos se han configurado; sin embargo, sigue siendo necesario definir qué ocurre cuando un usuario hace clic en una de las áreas activas. Para asegurarse de que sus interacciones funcionan correctamente, cambie los elementos de una interacción de CourseBuilder en el cuadro de diálogo Interacción de CourseBuilder. Vuelva a abrir el cuadro de diálogo Interacción de CourseBuilder. 1 En la ventana Documento, siga uno de estos procedimientos para seleccionar la interacción de CourseBuilder: Haga clic en el icono interacción de CourseBuilder en la ventana Documento. Haga clic en cualquiera de los elementos de área activa y, a continuación, haga clic en <interaction> en el selector de etiquetas. 2 En el Inspector de propiedades, haga clic en Editar para abrir el cuadro de diálogo Interacción de CourseBuilder. Creación de comentarios del usuario Cuando el usuario hace clic en un área activa, obtiene información sobre el producto que ha seleccionado. Configure una acción Intercambiar imagen para cambiar la imagen que se muestra en el elemento ProductInfo por una imagen que contenga información acerca del producto en el que se ha hecho clic. Utilice el Gestor de acción para definir lo que sucede cuando se hace clic en un área activa concreta. Elimine el valor predeterminado de los comentarios que se muestran en la acción Mensaje emergente y añada una acción Intercambiar imagen para cada área activa.

13 Tutoriales de Dreamweaver 8 Visualización de la ficha Gestor de acción Inicie haciendo clic en la ficha Gestor de acción. La ficha Gestor de acción muestra los segmentos y condiciones predeterminados en función del tipo de interacción seleccionada. Los segmentos precedidos de un signo más (+) se contraen. Para ver las condiciones y acciones de un segmento contraído seleccionado, haga clic en Expandir en la ficha Gestor de acción. La acción avanza desde la parte superior de la lista hacia abajo hasta que se cumple una condición definida, por ejemplo, si un usuario hace clic en Hot Area 1. Cuando se cumple una condición definida, la acción avanza hasta el siguiente elemento dentro de ese segmento, por ejemplo, si se hace clic en Hot Area 1, se mostrará un mensaje emergente. Aunque los segmentos se añaden automáticamente en el Gestor de acción para comprobar el límite de tiempo y de intentos, las acciones de estos segmentos no se activan a menos que seleccione estas opciones en la ficha General. Adición de una acción Intercambiar imagen para obtener información del producto Racer 1 En la lista Gestor de acción, en "if Hot Area1 Seleccionado", seleccione Mensaje emergente y, a continuación, haga clic en Cortar. 2 Seleccione "if Hot Area1 Seleccionado" y, a continuación, en el menú emergente Acciones elija Intercambiar imagen y, a continuación, haga clic en Añadir. Aparece el cuadro de diálogo Intercambiar imagen: En el cuadro de diálogo Intercambiar imagen, la opción "<img> sin nombre" está activada. Esta es la imagen que ha insertado en el elemento ProductInfo. Cambie esta imagen por una imagen que describa la imagen en Hot Area 1: la imagen del producto Racer. 3 En el campo "Definir origen como", haga clic en Examinar. 4 En el cuadro de diálogo Seleccionar origen de imagen, seleccione text_racer.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 5 Haga clic en Aceptar para cerrar el cuadro de diálogo. Adición de una acción Intercambiar imagen para obtener información del producto ColdFusion Reemplace el texto de instrucción del usuario por el texto que describe el kit de ColdFusion. 1 En la lista Gestor de acción, en "if Hot Area2 Seleccionado", seleccione Mensaje emergente y, a continuación, haga clic en Cortar. 2 Seleccione "if Hot Area2 Seleccionado" y, a continuación, en el menú emergente Acciones elija Intercambiar imagen y, a continuación, haga clic en Añadir. Aparecerá el cuadro de diálogo Intercambiar imagen. En la lista Imágenes del cuadro de diálogo Intercambiar imagen, la opción "image 'Image1' in layer 'ProductInfo'" ya está seleccionada y la imagen está configurada para mostrar text_racer.jpg. Establezca la imagen para mostrar el texto correcto para Hot Area 2, el producto ColdFusion. 3 En el campo "Definir origen como", haga clic en Examinar. 4 En el cuadro de diálogo Seleccionar origen de imagen, seleccione text_coldfusion.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen.

14 Tutoriales de Dreamweaver 9 5 Haga clic en Aceptar para cerrar el cuadro de diálogo. Adición de una acción Intercambiar imagen para obtener información del producto Satellite Reemplace el texto de instrucción del usuario por el texto que describe el producto Satellite. 1 En la lista Gestor de acción, en "if Hot Area3 Seleccionado", seleccione Mensaje emergente y, a continuación, haga clic en Cortar. 2 Seleccione "if Hot Area3 Seleccionado" y, a continuación, en el menú emergente Acciones elija Intercambiar imagen y, a continuación, haga clic en Añadir. 3 En la lista Imágenes del cuadro de diálogo Intercambiar imagen, "imagen 'Imagen1' en la capa 'ProductInfo'" ya está seleccionada. Haga clic en Examinar junto al campo "Definir origen como" para seleccionar la imagen de sustitución. 4 En el cuadro de diálogo Seleccionar origen de imagen, seleccione text_satellite.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 5 Haga clic en Aceptar para cerrar el cuadro de diálogo. Adición de una acción Intercambiar imagen para obtener información del producto Waverider A continuación, reemplace el texto de instrucción del usuario por texto que describa el casco de Waverider. 1 En la lista Gestor de acción, en "if Hot Area4 Seleccionado", seleccione Mensaje emergente y, a continuación, haga clic en Cortar. 2 Seleccione "if Hot Area4 Seleccionado", elija Intercambiar imagen en el menú emergente Acciones y, a continuación, haga clic en Añadir. 3 En la lista Imágenes del cuadro de diálogo Intercambiar imagen, "imagen 'Imagen1' en la capa 'ProductInfo'" ya está seleccionada. Haga clic en Examinar junto al campo "Definir origen como" para seleccionar la imagen de sustitución. 4 En el cuadro de diálogo Seleccionar origen de imagen, seleccione text_waverider.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen. 5 Haga clic en Aceptar para cerrar el cuadro de diálogo. 6 Haga clic en Aceptar para cerrar el cuadro de diálogo Interacción de CourseBuilder. Creación de un vínculo a la página siguiente Vincule esta página a la siguiente página de interacción, la prueba de arrastrar y soltar. 1 En el panel Insertar, seleccione Dibujar DIV PA de la lista Diseño. A continuación, mueva el puntero hacia la página y arrástrelo para dibujar una DIV en el espacio situado bajo el elemento ProductInfo. 2 Haga clic en la DIV para seleccionarla y, a continuación, muévala si necesita colocarla. Utilice el selector de elemento en la esquina superior izquierda del elemento para colocar el elemento: 3 Haga clic en el elemento en el que se va a colocar el punto de inserción. Inserte una imagen en el elemento. 4 En el cuadro de diálogo Seleccionar origen de imagen, abra la carpeta cb_graphics (si no está ya abierta), seleccione Arrow_Sharp_Right.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh).

15 Tutoriales de Dreamweaver 10 Aparece una flecha en el elemento. 5 En el Inspector de propiedades, haga clic en el icono de carpeta situado junto al campo Vínculo. A continuación, en el cuadro de diálogo Seleccionar archivo, vaya a la carpeta cb_discover, seleccione cb_drag_drop.htm y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para seleccionar el archivo que desea abrir cuando se hace clic en la flecha. 6 Cambie el tamaño del elemento. 7 Guarde el documento. Prueba de la interacción de exploración Pruebe la página para ver cómo funciona la interacción. 1 Elija Archivo > Vista previa en el navegador y seleccione el navegador que desea utilizar. El navegador se inicia y muestra la página. 2 Haga clic en cada uno de los productos y asegúrese de que la información sea correcta. 3 Haga clic en la flecha para ver si se dirige a la página "Know your target audience". Creación de una interacción de arrastrar y soltar A continuación, cree una prueba de coincidencia de arrastrar y soltar. Los usuarios pondrán a prueba sus conocimientos de los productos arrastrando un juguete al público de destino para la que se ha diseñado el juguete. Inserción de una interacción de CourseBuilder 1 Seleccione Archivo > Abrir. En el cuadro de diálogo que aparece a continuación, vaya a cb_drag_drop.htm y, a continuación, haga clic en Seleccionar (Windows) o Abrir (Macintosh) para abrir el archivo. 2 Si la paleta Objeto no está abierta, elija Ventana > Objetos para que se abra. 3 En la ventana Documento, haga clic en la parte central del documento para situar el punto de inserción después de los elementos existentes de la página. 4 En el panel Común de la paleta Objeto, haga clic en el icono Interacción de CourseBuilder. Se abre el cuadro de diálogo Interacción de CourseBuilder. Selección del tipo de interacción 1 Seleccione Arrastrar y soltar en la lista Categoría. 2 Haga clic en el icono de la plantilla de coincidencia de muchos a muchos. Definición de las opciones de la ficha General Utilice las fichas en el cuadro de diálogo Interacción de CourseBuilder para definir esta interacción. A medida que selecciona opciones en las fichas, puede especificar la forma en la que la Interacción de CourseBuilder se desarrollará.

16 Tutoriales de Dreamweaver 11 La configuración predeterminada de las interacciones de CourseBuilder está diseñada para facilitar su uso. La mayoría de las opciones que ha seleccionado para sus interacciones son las opciones que se establecen como valores predeterminados actuales. Solo tiene que cambiar algunos valores de configuración para personalizar la información de los cursos, encuestas o pruebas que crea. Utilice las opciones de la ficha General para definir cómo la interacción responde cuando un usuario interactúa con ella. 1 Haga clic en la ficha General. 2 En Evaluar interacción, seleccione "cuando el usuario suelta un elemento de arrastre". Esta opción hace que los comentarios se muestren cada vez que el usuario mueve una imagen de juguete hacia una imagen de público de destino, en lugar de esperar hasta que el usuario haya intentado hacer coincidir cada juguete con un público de destino. 3 En Restablecer, acepte el valor predeterminado "Create a Reset button for this Interaction". 4 En Reacción, seleccione "Volver a ajustar si es incorrecto". Esto devuelve el juguete a su posición original si el usuario lo arrastra al público de destino equivocado. 5 En Reacción, acepte la configuración predeterminada "Volver a ajustar si no se ha soltado en destino". Esto devuelve el juguete a su posición original si el usuario lo arrastra en algún lugar que no sea un área de destino. 6 En DIV, seleccione "Insert this Interaction in a DIV" para colocar el texto de la pregunta en una DIV, que facilita la colocación del texto en el documento. (Cada una de las imágenes de arrastrar y soltar ya está en una DIV individual). La ficha General debe estar configurada como la que se muestra a continuación: Creación de pares de arrastrar y soltar A continuación, añada los elementos de arrastrar y soltar a la interacción. Añada tres imágenes de arrastre y tres imágenes de destino. Los ejercicios de coincidencia de arrastrar y soltar están compuestos de pares objetos de arrastre y destino. Por ejemplo, Satellite es un objeto de arrastre. Su objeto de destino es una imagen de su audiencia de destino: niños con gran imaginación. En este paso, debe sustituir los gráficos de marcadores de posición de la plantilla de arrastrar y soltar por las imágenes que desea utilizar para los objetos de arrastre y destino. Adición de imágenes de arrastre 1 Haga clic en la ficha Elementos. Drag1 ya está seleccionado en la lista Elementos. 2 En el campo Nombre, escriba satellite. 3 Haga clic en el botón Examinar junto al cuadro Archivo de imagen. En la carpeta cb_graphics, seleccione toy_satellite_mini.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen para este objeto de arrastre. 4 En la lista Elementos, seleccione Drag2; a continuación, en el campo Nombre, escriba waverider. 5 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione toy_waverider_mini.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen para este objeto de arrastre. 6 En la lista Elementos, seleccione Drag3; a continuación, en el campo Nombre, escriba racer. 7 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione toy_racer_mini.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen para este objeto de arrastre.

17 Tutoriales de Dreamweaver 12 Adición de imágenes de destino A continuación, añada las imágenes de destino que coincidan con los objetos de arrastre: 1 En la lista Elementos, seleccione Target1; a continuación, en el campo Nombre, escriba satellitematch. 2 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione kids_climbing.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). 3 En la lista Elementos, seleccione Target2; a continuación, en el campo Nombre, escriba waveridermatch. 4 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione kids_bike.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). 5 En la lista Elementos, seleccione Target3; a continuación, en el campo Nombre, escriba racermatch. 6 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione kids_soccer.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). La pantalla debe tener este aspecto. 7 Haga clic en Aceptar para cerrar el cuadro de diálogo Interacción de CourseBuilder. Colocación de las imágenes en el documento Organice las DIV en la ventana Documento para configurar la interacción. 1 En la ventana Documento, seleccione una DIV haciendo clic en su borde. 2 Arrastre los elementos en el documento para que coincidan con este diseño de pantalla. 3 En la ventana Documento, use el puntero para seleccionar el texto predeterminado "Drag the objects on the left to the correct targets on the right, then press the 'Submit' button to check the answer". Reemplace el texto escribiendo Listo para vender? Arrastre cada juguete a su cliente de destino. Creación de pares de arrastrar y soltar A continuación, añada los elementos de arrastrar y soltar a la interacción. Añada tres imágenes de arrastre y tres imágenes de destino. Los ejercicios de coincidencia de arrastrar y soltar están compuestos de pares objetos de arrastre y destino. Por ejemplo, Satellite es un objeto de arrastre. Su objeto de destino es una imagen de su audiencia de destino: niños con gran imaginación. En este paso, debe sustituir los gráficos de marcadores de posición de la plantilla de arrastrar y soltar por las imágenes que desea utilizar para los objetos de arrastre y destino. Adición de imágenes de arrastre 1 Haga clic en la ficha Elementos. Drag1 ya está seleccionado en la lista Elementos. 2 En el campo Nombre, escriba satellite. 3 Haga clic en el botón Examinar junto al cuadro Archivo de imagen. En la carpeta cb_graphics, seleccione toy_satellite_mini.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen para este objeto de arrastre. 4 En la lista Elementos, seleccione Arrastrar2; a continuación, en el campo Nombre, escriba waverider.

18 Tutoriales de Dreamweaver 13 5 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione toy_waverider_mini.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen para este objeto de arrastre. 6 En la lista Elementos, seleccione Arrastrar3; a continuación, en el campo Nombre, escriba racer. 7 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione toy_racer_mini.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para mostrar la imagen para este objeto de arrastre. Adición de imágenes de destino A continuación, añada las imágenes de destino que coincidan con los objetos de arrastre: 1 En la lista Elementos, seleccione Target1; a continuación, en el campo Nombre, escriba satellitematch. 2 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione kids_climbing.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). 3 En la lista Elementos, seleccione Destino2; a continuación, en el campo Nombre, escriba waveridermatch. 4 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione kids_bike.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). 5 En la lista Elementos, seleccione Target3; a continuación, en el campo Nombre, escriba racermatch. 6 Haga clic en el botón Examinar. En la carpeta cb_graphics, seleccione kids_soccer.jpg y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). La pantalla debe tener este aspecto. 7 Haga clic en Aceptar para cerrar el cuadro de diálogo Interacción de CourseBuilder. Colocación de las imágenes en el documento Organice las DIV en la ventana Documento para configurar la interacción. 1 En la ventana Documento, seleccione una DIV haciendo clic en su borde. 2 Arrastre los elementos en el documento para que coincidan con este diseño de pantalla. 3 En la ventana Documento, use el puntero para seleccionar el texto predeterminado "Drag the objects on the left to the correct targets on the right, then press the 'Submit' button to check the answer". Sustituya el texto escribiendo Listo para vender? Arrastre cada juguete a su cliente de destino. Definición del ajuste a la configuración Ya ha definido qué sucede cuando una coincidencia es incorrecta: el juguete vuelve a ajustarse a su posición original. Pero, qué sucede cuando la coincidencia es correcta? Dónde va a parar el juguete? En este paso, se establece de forma precisa la posición del juguete cuando este se arrastra a su público de destino correcto. Tiene que configurar el comportamiento de ajuste solo de los pares correctos; los pares incorrectos ya están definidos. 1 Haga clic en una de las imágenes en la interacción de arrastrar y colocar, a continuación, haga clic en <interaction> en el selector de etiquetas y, a continuación, haga clic en Editar en el Inspector de propiedades. 2 Haga clic en la ficha Pares.

19 Tutoriales de Dreamweaver 14 Tenga en cuenta que debido a que ha establecido coincidencias para los elementos Drag1 y Target1, los pares de coincidencia ya están configurados: satellite y satellitematch son una coincidencia correcta, pero satellite y waveridermatch son una coincidencia incorrecta. 3 Seleccione el par "satellite:satellitematch" si aún no está seleccionado. 4 En Ajustar a, seleccione "píxeles debajo", y en el campo de píxeles debajo escriba 70. A continuación, seleccione "select pixels to right of the target element's upper left corner" y en este campo escriba 30. La pantalla debe tener este aspecto. Cuando se produce una coincidencia, el elemento de arrastre se mueve hacia esta posición concreta en el elemento de destino. 5 Seleccione el par "waverider:waveridermatch". 6 En Ajustar a, seleccione "píxeles debajo", y en el campo "píxeles debajo" escriba 70. A continuación, seleccione "pixels to the right of the target element's upper left corner", y en este campo escriba Seleccione el par "racer:racermatch". 8 En Ajustar a, seleccione "píxeles debajo", y en el campo "píxeles debajo" escriba 70. A continuación, seleccione "pixels to the right of the target element's upper left corner", y en este campo escriba 30. * No aparece atenuada cuando se desactiva Creación de comentarios del usuario Los usuarios obtienen comentarios solo si realizan una coincidencia que sea correcta. Si una coincidencia es incorrecta, el juguete vuelve a su posición original para que el usuario pueda volver a intentarlo. Toda la interacción es correcta solo cuando el usuario realiza las tres coincidencias correctamente. Para esta interacción existen dos tipos distintos de comentarios: uno cuando una coincidencia es correcta y otra cuando toda la interacción es correcta. Configuración de comentarios para una respuesta correcta La condición "if Correcto" controla lo que ocurre cuando la interacción completa es correcta. 1 Haga clic en la ficha Gestor de acción. 2 Seleccione la acción Mensaje emergente en "if Correcto" y haga clic en Editar. Aparecerá el cuadro de diálogo Mensaje emergente. 3 En el campo Mensaje del cuadro de diálogo, cambie el texto predeterminado "Correcto" escribiendo Está listo para vender! 4 Haga clic en Aceptar para cerrar el cuadro de diálogo. Eliminación de comentarios predeterminados para una respuesta incorrecta o desconocida No es necesario que establezca la condición "else if Incorrecto", porque no proporciona comentarios a los usuarios cuando hacen una coincidencia incorrecta. Además, no es necesario que establezca una respuesta para "else if Unknown Response", ya que los usuarios pueden responder de un modo que no pueda identificar. 1 Seleccione "else if Incorrecto" y haga clic en Cortar. 2 Seleccione "else if Unknown Response" y haga clic en Cortar.

20 Tutoriales de Dreamweaver 15 Las condiciones y sus acciones Mensaje emergente asociadas se cortan automáticamente. Adición de comentarios por coincidencia correcta A continuación, añada otra condición para proporcionar comentarios a los usuarios cuando logran una coincidencia correcta durante el proceso de finalización de la interacción. Hasta que se haya completado toda la interacción y se haya cumplido la condición "Todas las correctas y ninguna incorrecta", las coincidencias correctas reciben estos comentarios. 1 En la lista Gestor de acción, seleccione la acción Mensaje emergente en "if Correcto", elija Else en el menú emergente Acciones y, a continuación, haga clic en Añadir. Se añade Else a la lista Gestor de acción. 2 Habiendo seleccionado "-- else", seleccione Mensaje emergente en el menú emergente Acciones y, a continuación, haga clic en Añadir. Aparecerá el cuadro de diálogo Mensaje emergente. 3 En el campo Mensaje, escriba Correcto! 4 Haga clic en Aceptar para cerrar el cuadro de diálogo. 5 Haga clic en Aceptar para cerrar el cuadro de diálogo Interacción de CourseBuilder. 6 Seleccione Archivo > Guardar para guardar el documento. Creación de un vínculo con la interacción siguiente Vincule esta página a la página final del curso, la prueba de opción múltiple. 1 En el panel Insertar, seleccione Dibujar DIV PA de la lista Diseño. A continuación, mueva el puntero a la ventana Documento y arrastre el puntero para dibujar una DIV PA en la parte inferior derecha del documento. 2 Seleccione la DIV PA y colóquela con el Inspector de propiedades. 3 Haga clic en la DIV PA. Luego, en el panel Insertar, seleccione Imágenes > Image from the Common list. 4 En el cuadro de diálogo Seleccionar origen de imagen, vaya a la carpeta cb_graphics, seleccione Arrow_Sharp_Right.gif y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). Aparece una flecha en la DIV. 5 En el Inspector de propiedades, haga clic en el icono de carpeta situado junto al campo Vínculo para seleccionar el archivo que se va a abrir cuando se haga clic en la flecha. 6 En el cuadro de diálogo Seleccionar archivo, en la carpeta cb_discover, seleccione cb_mc.htm y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh). 7 Haga clic en el borde de la DIV para seleccionarlo y, a continuación, utilice uno de los controladores de DIV para cambiarle el tamaño para que se ajuste al gráfico. Prueba de la interacción de arrastrar y soltar Pruebe la página para ver cómo funciona: 1 Seleccione Archivo > Guardar y, a continuación, seleccione Archivo > Vista previa en el navegador. El navegador se inicia y muestra la página. 2 Arrastre los juguetes a las descripciones.