martes, 8 de noviembre de 2016

Sesión #10 - Creación de examen tipo auto evaluación en PowerPoint 2013

Tutorial “Creación de un examen tipo Auto Evaluación en PowerPoint 2013”

A través del presente tutorial te iremos indicando paso a paso el cómo crear un examen del tipo “auto evaluación” en PowerPoint 2013, así es que, sin mayor preámbulo empezamos.

Las acciones que llevaremos a cabo serán:

·   Crear la portada del examen (1ª. Diapositiva).
· Crear la 2ª. Diapositiva donde solicitamos el nombre del usuario y la contraseña correspondiente.
·  A partir de la 3ª. Diapositiva, iniciaremos con las preguntas del examen.
· La última diapositiva, donde nos “despediremos”, con algún mensaje pertinente.
·   Finalmente, guardaremos nuestra presentación en dos formatos distintos, extensiones "pptm" y "ppsm".

Paso 1. Creación de la portada.   La 1ª. Diapositiva contendrá la “portada” de nuestra presentación, colocando tanto texto como imágenes, para la creación de textos recurriremos a la página Web:

                                   https://es.cooltext.com/


Entrando al sitio Web nos encontraremos con la opción de “Seleccione un Estilo de Logo Tipo”, donde escogeremos el tipo “Quicksilver”, mostrándose la siguiente ventana:



La caja de texto “Texto de Logotipo” nos permitirá dar de alta los textos que deseemos manejar, por ejemplo el nombre de la institución (con un tamaño de texto de 45):


Antes de crear el “Logo”, cambiamos el color que predomina en este tipo de “LogoTipo”, haciendo clic en la pestaña: “Logo”:


Y damos clic sobre el Gradiente gris plateado (señalado por la flecha roja), para cambiar el gradiente (color) y elegimos:


Damos clic sobre el gradiente “Frost Red 02”, tal como se muestra arriba, mostrándose tal como sigue:



Ahora procedemos a crear el “Logo”, haciendo clic sobre el botón “Create Logo”, debiendo mostrarse la siguiente ventana:


Ahora, hacemos clic sobre el texto: “Descargue Imagen”, bajando un archivo con un nombre muy parecido al siguiente:

 cooltext214505678379391.gif       (te sugiero cambia el nombre)

La extensión gif es generada cuando escogemos un logo tipo con movimiento, que es el caso que estamos tratando (“QuickSilver”).

Para el tratamiento del resto de textos, hacemos clic sobre el texto “Edita este Logotipo Image”, esto nos permitirá regresar para introducir los textos que nos hacen falta, te muestro las imágenes que deberás de obtener:

Los nombres de la izquierda, son nombres que sugerí para imagen.gif:


 (ipn.gif)

(v6.gif)
(titulo.gif)
(miNombre.gif)


(avanza.gif)

Ahora procedemos a la creación de la portada, insertaremos el logotipo del IPN, una imagen pertinente, únicamente para que adorne la portada y todos los textos-imagen que hemos creado, a excepción de la texto-imagen “Regresa”, obviamente la usaremos en la siguiente diapositiva, así que la 1ª. Diapositiva deberá de parecerse a la siguiente imagen:


La imagen la conseguimos en la nube (Internet), mediante la opción “Imágenes en línea” de la ficha: “Insertar”, con el texto de búsqueda: “Colores”.

Cuando se ejecuta una presentación de PowerPoint, para seguir adelante, es decir para pasar a la siguiente diapositiva, se tienen cuatro formas para hacerlo, oprimiendo:

·         La tecla Enter.
·   Las teclas de navegación (flecha izquierda, flecha derecha, flecha hacia arriba y flecha hacia abajo).
·         Las teclas “AvPág” (avanza página), y “RePág” (retrocede página).
·         Clic izquierdo del Mouse (Ratón).

Sin embargo, en nuestra presentación “Examen de auto evaluación”, vamos a deshabilitar dichas teclas, de tal manera que la única forma de seguir con la siguiente diapositiva, será a través de un clic a la imagen “Avanza”.

Para deshabilitar las teclas mencionadas previamente, habilitamos la opción: “Examinada en exposición (pantalla completa)” en la ventana del comando: “Configuración de la presentación con diapositivas”, del grupo “Configurar” de la Ficha: “Presentación con diapositivas”, tal como se observa enseguida:



Y oprimimos la tecla “Aceptar”.

Ahora, asociamos a la imagen “Avanzar” la acción de hipervínculo: “Diapositiva siguiente”, a través del comando “Acción” del grupo “Vínculos” de la Ficha “Insertar”, tal como se muestra enseguida:


Paso 2. Creación de la 2ª. Diapositiva que contendrá el proceso de autenticación de usuario”.      Se le pedirá al usuario que teclee su nombre y contraseña, validando únicamente la contraseña, si ésta es correcta entonces el usuario tendrá derecho de realizar el examen de auto evaluación, es decir de continuar, de lo contrario recibirá un mensaje aclaratorio y se le pedirá que vuelva a intentar de nuevo.

Iniciamos con la acción de duplicar la diapositiva actual (diapositiva 1), para ello simplemente haz clic derecho sobre la diapositiva 1 contenida en el panel de la izquierda, debiendo aparecer un menú contextual, del cual elige la opción “Duplicar diapositiva”, tal como se muestra enseguida:


Debiendo aparecer la 2ª. Diapositiva, a la cual le eliminaremos: la imagen (brochas con colores), y el texto: “Examen de auto evaluación”. El nombre lo colocamos al mismo nivel del texto “Avanza”, tratando de centrarlo al texto “CECyT 6….”, y quitamos el texto “Avanza”, tal como se muestra enseguida:


Ahora estamos en condiciones de preparar la interface de usuario para autentificar los datos del usuario.    Añadimos el siguiente texto:

“Teclear la siguiente información:”
“Nombre:”
y “Contraseña:”

Para ello empleamos el comando “Insertar WordArt” de la Ficha: “Insertar” eligiendo el primer tipo (Relleno - Negro, Texto 1, Sombra), con tamaño de texto: 40 puntos, tipo de letra: “Century Gothic” y color RGB Rojo 84, Verde 0 y Azul 0 (color guinda muy oscuro), debiendo quedar como sigue:


Ahora es momento de añadir los cuadros de texto 1 y 2 donde el usuario deberá de teclear su nombre y su contraseña, para ello de la Ficha “Desarrollador” elige el comando “Cuadro de texto (Control ActiveX)” del grupo “Controles”, observa detenidamente la siguiente imagen:




En caso de que no tengas habilitada la Ficha Desarrollador, debes de ir a la opción “Opciones” del menú “Archivo”, después elige la opción “Personalizar cinta de opciones” y del panel de la derecha localiza la Ficha Desarrollador y habilítala (haz clic en el pequeño cuadro para habilitarla).

Ahora dibuja dos cuadros de texto al lado de sus textos correspondientes, como se muestra enseguida:




Enseguida, selecciona el 1er cuadro de texto y haz clic en el comando “Propiedades” del grupo “Controles” de la Ficha “Desarrollador”, tal como se muestra enseguida:


En esta ventana reemplazaremos ciertos valores, TextBox1 (Name) por “nombre”, el tipo de letra Arial por “Century Gothic” con tamaño de 24 puntos, y el color ForeColor por el Azul muy oscuro (&H00400000&), observa bien la siguiente figura:

                                  

Nos muestra la elección del color Azul “muy oscuro”.

Para el cuadro de texto 2 hacemos lo mismo que el cuadro anterior, TextBox2 (Name) por “password”, tipo de letra “Century Gothic” con tamaño de 24 puntos y color el mismo que el cuadro de texto “nombre”.    Las siguientes figuras nos muestra las propiedades de ambos cuadros de texto:

 cuadro nombre:


cuadro password:



 Ahora insertaremos un botón, para ello elige el comando “Botón de comando (control ActiveX)”, del grupo “Controles” de la Ficha “Desarrollador”, tal como se muestra enseguida:



Y dibuja un botón debajo del 2º. Cuadro de texto, como se muestra enseguida:




De igual manera, cambiamos el nombre del botón a través del comando “Propiedades”, por “botónValidar”, tipo de letra por “Century Gothic” con tamaño de 24 puntos, y el texto “CommandButton1” de Caption por “Validar contraseña” y color Azul muy oscuro.

Ahora a este botón le asociaremos la programación correspondiente para validar la contraseña que el usuario deberá de teclear para hacer uso del examen de auto evaluación, para ello y fíjate muy bien, deberás de dar doble clic al botón recién insertado, dando como resultado el tener acceso al ámbito de programación, es decir nos mostrara el siguiente ambiente:



Observa bien, se creará una subrutina (macro) con el nombre del botón (botonValidar) la cual se ejecutará cuando el usuario haga Clic sobre éste.
Teclearemos las siguientes instrucciones, precisamente donde se encuentra en este momento el cursor:

    If (password.Text = "mongol2016") Then
        MsgBox "Bienvenido " & nombre.Text & ", espero te diviertas..."
        password.Text = "" : nombre.Text = ""
        ActivePresentation.SlideShowWindow.View.Next
   Else
       MsgBox "Error, tu contraseña es inválida, intenta de nuevo..."
        password.Text = "" : nombre.Text = ""
   End If


Te explico: la instrucción “if” esta preguntando si el texto introducido en el cuadro “password” contiene el valor “mongol2016” si es así entonces (then) manda un mensaje de bienvenida al usuario y la siguiente instrucción lo envía a la siguiente diapositiva (ActivePresentation…), para que inicie con el examen de auto evaluación, de lo contrario (else) el usuario recibirá el mensaje que su contraseña es errónea y le pide volver a intentar de nuevo, si el usuario no conoce la contraseña no podrá acceder al examen de auto evaluación, en ambas situaciones limpiamos los cuadros de texto (igualándolos a nada - ""), tanto del nombre como el da la contraseña.

Paso 3. Creación de la 3ª. Y 4ª. Diapositiva.   Regresamos al ámbito de PowerPoint, a través de la opción “Cerrar y volver a Microsoft PowerPoint” del menú “Archivo”, ahora duplicaremos la diapositiva 2, eliminaremos los elementos que no se requieren y damos de alta la 1ª. Pregunta, deberás de obtener algo muy parecido a la siguiente imagen:


El texto tiene tamaño de 32 puntos con fuente “Century Gothic”, es del tipo WordArt, así como los “botones” son del tipo “WordArt” con relleno de forma: “Efecto intenso – Oro, Énfasis 4”.  Ahora asociaremos cierta programación a estos botones, que son las respuestas posibles de la pregunta, obvio, la respuesta correcta a esta pregunta es el botón “Blanco”, y los botones “Rojo” y “Azul” son respuestas incorrectas.

Las siguientes macros (correcta e incorrecta) las teclearás en el ámbito de programación, para ello haz clic en el comando “Visual Basic” del grupo “Código” de la Ficha “Desarrollador”, y estarán automáticamente situados dentro del ámbito de programación, elige la opción “Módulo” del menú “Insertar”, y ahí teclea las siguientes instrucciones:

Sub correcta()
MsgBox "Muy bien, has acertado..."
ActivePresentation.SlideShowWindow.View.Next
End Sub

Sub incorrecta()
MsgBox "Muy mal, te has equivocado, intenta de nuevo..."
End Sub


Te explico, la macro “correcta” envía un mensaje al usuario indicándole que contesto correctamente y enseguida lo envía a la siguiente diapositiva, es decir a la 2ª. Pregunta.    La macro “incorrecta” envía el mensaje “Muy mal…” cuando el usuario elige el botón de respuesta equivocado.

Ahora, regresamos al ámbito de PowerPoint y a cada botón de respuesta le asociaremos la macro correspondiente.

Selecciona el primer botón “Rojo” y elige el comando “Acción” del grupo “Vínculos” de la Ficha “Insertar” y en la ventana “Configuración de la acción” en la pestaña “Clic con el mouse” en la sección “Ejecutar macro:” elige la macro “incorrecta”, tal como se muestra enseguida:



De la misma manera, asocia el botón “Blanco” a la macro “correcta” y el botón “Azul” asóciale la macro “incorrecta”.

Regresamos al ámbito de PowerPoint, y duplicamos la diapositiva número 3, y a la diapositiva 4, hacemos cambios, es decir la 2ª. Pregunta deberá mostrarse como sigue:



Observa bien, cambie de posición el botón “Rojo”.    Ahora asocia las macros “correcta” e “incorrecta” a los botones correspondientes de la 2ª. Pregunta (obvio, ya te explique el como, ¿ok?).


Paso 4. Creación de la última diapositiva (despedida).    Duplicamos la 4ª. Diapositiva, eliminamos los elementos que no requerimos e insertamos un “botón” con WordArt (“Salir”), parecido al que usamos previamente, y deberá mostrarse como sigue:


Al “botón Salir”, le asociamos una acción, que ya explique anteriormente, empleando el comando “Acción” utilizando la opción: “Hipervínculo a la acción: Fin de la presentación”.

Paso 5. Asignación de Transición de diapositivas y guardado de la presentación.    Colócate en la 1ª. Diapositiva y selecciona la opción Efecto especial “Cubo” del grupo “Llamativo” de la Ficha “Transiciones”, además hacemos clic sobre el comando “Aplicar a todo” del grupo “Intervalos” de la misma Ficha.

Ahora, ya como acción final, guardamos la presentación empleando dos formatos, el primero es el que contiene la extensión: “pptm” y el segundo tendrá la extensión “ppsm”.

La intención de crear dos formatos, es que la presentación con extensión pptm es la que vamos a conservar, para futuros cambios.

En cambio la presentación con extensión ppsm, se emplea para las tareas ha entregar a terceros, pero además para proteger la autoría de nuestra presentación que hemos elaborado, le asociamos una contraseña contra escritura, así la gente acostumbrada a vivir del esfuerzo ajeno pues ya bailo (en otras palabras “chiflo su mauser”).

Para obtener la presentación con extensión “pptm” simplemente elegimos la 2ª. Opción que nos presenta el cuadro de texto “Tipo”, tal como se muestra enseguida, al usar la opción “Guardar como…” del menú “Archivo”:


Recuerda, se emplearon macros o subrutinas, por ello debemos de guardar nuestra presentación con la extensión “pptm”, la “m” es de Macros.

Ahora guardamos la misma presentación pero con la otra extensión (ppsm), para ello elegimos la 11ª. Opción del menú del cuadro de texto “Tipo”, tal como se observa en la siguiente imagen:



Finalmente, le asignaremos contraseña de escritura a esta presentación, en esta misma ventana “Guardar como…”, haz clic en el comando “Herramientas” y elige la opción: “Opciones generales”, tal como se observa en la siguiente imagen:



En la ventana que aparecerá teclea la contraseña en el cuadro de texto “Contraseña de escritura” y enseguida oprime la tecla “Aceptar” y a manera de verificación te volverá a solicitar reescribir la contraseña, y listo, hemos terminado.


Hasta la próxima, y espero que todo este menjurje les sea de utilidad, bye...













Tutorial "Creando Marcos en HTML"

Tutorial para crear Marcos (Frames) en HTML. Los marcos o  frames  nos permiten dividir una página web en varias ventanas que pueden cargar ...