webquest: un recurso educativo para su uso en el...

WQ: Un recurso educativo para su uso en el aula Capítulo 4:Crear unaWQ con PHP WebQuest – Pág. 1

WebQuest: Un recurso educativo para su uso en el aula.

Capítulo 4: Crear una WQ con PHP WebQuest

Reconocimiento-NoComercial-CompartirIgual 2.5 España

Realizado por:○ Juan Alberto Argote Martín: [email protected]

○ Rafael Palomo López: [email protected]

○ José Sánchez Rodríguez: [email protected]

○ Julio Ruiz Palmero: [email protected]

Usted es libre de:• copiar, distribuir y comunicar públicamente la obra • hacer obras derivadas

Bajo las condiciones siguientes:

Reconocimiento - No comercial - Compartir igual: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los créditos. No se puede obtener ningún beneficio comercial y las obras derivadas tienen que estar bajo los mismos términos de licencia que el trabajo original.

http://creativecommons.org/licenses/by-nc/2.5/es/

mailto:[email protected]





1. INTRODUCCIÓN

En este capítulo vamos a realizar una WebQuest utilizando PHP Webquest. A la hora de realizar una, unos consejos generales a tener en cuenta:

• Tener una copia de seguridad del texto en un documento de un procesador de textos.

• En caso de incluir imágenes quedan mejor en formato vertical que en apaisado porque el programa las redimensiona automáticamente.

• Si incluye una imagen de tamaño considerable subiéndola a PHP Webquest tiene poco lugar para el texto.

En relación a PHP Webquest comentar que previamente debemos tener una cuenta de usuario que nos permita acceder y crear nuestros materiales, por lo que es lo que primero haremos.

2. SOLICITAR UNA CUENTA DE USUARIO EN PHP WEBQUESTEs imprescindible disponer de una cuenta de usuario para la realización de una WebQuest. Si se pretende su elaboración por más de una persona, desafortunadamente se debe hacer a través de la misma cuenta (no permite el programa que varios usuarios trabajen en una misma WebQuest desde diferentes cuentas).

Para darse de alta hay que teclear la dirección: http://phpwebquest.org/ Una vez en dicha página hacemos clic en el enlace Usar PHP Webquest situado a la derecha.

La pantalla que nos aparece nos da lugar a realizar dos acciones: la búsqueda de WebQuest atendiendo a distintos criterios (por nivel educativo, por área, por autor, etc.) y la entrada en la plataforma para los usuarios, así como la creación de una cuenta, en caso de no serlo.

En ella haremos clic sobre Solicitar una cuenta que está en azul en un recuadro a la derecha de la pantalla. Una vez hecho nos encontraremos una página que tendremos que rellenar con nuestros datos.

http://phpwebquest.org/


Cuando hayamos rellenado el formulario hacemos clic en Enviar.

Una vez registrados podemos acceder rellenando los campos Usuario y Contraseña y haciendo clic posteriormente sobre el botón Entrar.


3. CREAR UNA WEBQUESTCuando accedemos, la siguiente pantalla nos presenta un cuadro con diversas opciones.

Hacemos clic sobre el botón radial (circulito) que está a la izquierda de Crear una Webquest.La siguiente pantalla nos servirá para elegir el tipo de plantilla que nos guste más. La elegimos haciendo clic sobre el botón radial situado a su izquierda (existe la posibilidad de ver la plantilla a un tamaño mayor haciendo clic encima de la imagen de cada una).

Después de seleccionar una de ellas hacemos clic en el botón Enviar.En la siguiente pantalla debemos introducir los datos iniciales de nuestra WebQuest: el nivel al que se destina, asignatura, título de la WebQuest y nombre del autor. Esta misma pantalla nos da la opción de modificar los colores. Como observaréis los colores están definidos con una letras, números o la combinación de ambos (por ej.: #99ccff); para cambiarlos podemos escribir la notación que corresponde al color que deseamos elegir (para ello podemos acceder a un programa de dibujo que nos dé el código de colores) o hacer clic sobre el icono de la paleta de pintor que hay a la derecha de cada campo (ver imagen siguiente).


Podemos hacer las pruebas que deseemos con las paletas y ver el diseño presionando el botón Previsualizar, si no nos convencen los colores elegidos siempre podremos Restablecer los valores que vienen por defecto en cada plantilla.

Una vez que estemos satisfechos con el resultado y completado todos los elementos presionamos el botón Enviar.Una vez hecho esto pasamos a la primera página de la WebQuest propiamente dicha: la Introducción. Podemos apreciar que estamos en ella porque la pestaña está coloreada de un verde más oscuro.


Además, tenemos en esta página un editor muy parecido al de los procesadores de texto con el que podemos incluir, como nosotros queramos, los contenidos de este apartado (se describe más adelante). Una vez se ha hecho se presiona el botón Enviar.Se puede observar en la imagen anterior que se puede subir una imagen a este apartado haciendo uso del botón Examinar (se describe más adelante). Es posible, utilizando el editor web, la inclusión de más imágenes aunque en este caso no se puede subir a PHP Webquest sino que hay que pegar la URL donde se encuentra dicha imagen en Internet

Al pulsar en cualquier página el botón Enviar nos sale la pantalla donde nos indica cuántas fases de la WebQuest llevamos realizadas. Las que están enmarcadas de verde son los apartados ya rellenos; los enlaces nos llevan a apartados todavía sin contenido.

Caso especial merece la pestaña Proceso en la que, aparte del editor Web, disponemos de hasta 9 cajas de texto donde incluir los enlaces que nuestros alumnos deben visitar para la realización de nuestra WebQuest.

En caso de necesitar más de 9 enlaces podemos hacer uso del editor Web para insertar los que deseemos.

Una vez repetido el proceso con cada una de las pestañas (introducir la información y pulsar el botón Enviar) nos aparece una página en la que nos indica la dirección Web de nuestra WebQuest .


4. MODIFICAR UNA WEBQUEST CREADASi se quiere modificar una WebQuest (por cambiar los enlaces, modificas la tarea, etc.) únicamente con volver a entrar y marcar la opción primera Ver, editar o borrar alguna de mis actividades podemos hacerlo.

Una vez elegida esta opción aparece una pantalla donde están todas las WebQuest realizadas. Pinchamos en Entrar si deseamos ver una en concreto, en Completar para terminarla (en caso de no estar finalizada), en Editar para cambiar lo que deseemos, en Borrar para eliminarla (cuidado: una WebQuest borrada no se puede recuperar).

Cuando estemos editando una WebQuest creada previamente, el comportamiento del botón Enviar de cada apartado es diferente a cuando la estábamos creando. Ahora lo que hace dicho botón es mostrarnos el siguiente apartado. Si deseamos volver al menú principal debemos hacer clic en el enlace.

5. SUBIR IMÁGENES A CADA APARTADO

Se ha comentado con anterioridad que PHO WebQuest nos permite subir únicamente una imagen por página. Esto se puede hacer utilizando el botón Examinar.


Nos aparece un cuadro de diálogo para localizar la imagen en nuestro equipo. Una vez la hayamos localizado, la marcamos con el botón izquierdo del ratón y hacemos clic en Abrir.

La ventaja de introducir una imagen de esta forma es que es fácil hacerlo. El inconveniente es que no controlamos nada:

• PHP Webquest crea dos columnas (una con la imagen y otra con el texto). Si el texto es extenso ocupará el espacio que le corresponde a su columna. Puede que estéticamente no nos guste.

• Una vez introducida una imagen no se puede borrar. Se puede sustituir por otra, pero no quitar.

Por tanto, hay que estar seguro de que deseamos introducir una imagen en un apartado y qué imagen queremos introducir.


• Pero si nos decidimos a no introducir ninguna imagen aparece un icono estéticamente no deseable indicando que así ha sido.

Con el navegador Firefox

Con el navegador Explorer

Con el navegador Chrome

Hay una forma de “no incluir” (si no queremos) ninguna imagen y que no aparezca ese icono indicando que no hay ninguna. El “truco” es subir una imagen de 1 píxel x 1 píxel con fondo trransparente (obviamente en un formato que admita transparencia, como gif o png). El la

siguiente imagen se ha introducido dicha imagen (con lo que ha desaparecido el icono), que lo único que hace es restar un píxel a la zona del texto.


6. LOS ENLACES EN EL APARTADO PROCESO

En el apartado Proceso nos encontramos con algo diferenciador: nueve cuadros de texto para introducir enlaces y otros nueve para introducir descripción de dichos enlaces.

Se introduciría de la siguiente forma: descripción a la derecha y enlace a la izquierda.

En la línea de lo descrito con anterioridad para las imágenes, PHP WebQuest pone a nuestra disposición esta forma fácil de introducir enlaces necesarios para nuestra WebQuest. No obstante, también tiene limitaciones (por otra parte inherentes a cualquier plantilla que utilicemos):

• Los enlaces los pone automáticamente al final de la página (y puede que no deseemos que estén ahí).

• Están limitados a ese número: nueve.

Hay una forma de poner los enlaces salvando estos inconvenientes: utilizar el editor Web, que describimos más adelante.


7. USO DEL EDITOR WEB

El editor web es una herramienta, que nos encontramos en cada apartado de PHP WebQuest, con posibilidades interesantes.

La primera fila de iconos, a excepción de los dos primeros, sirven para dar formato al texto. Son muy similares a los de un procesador de textos.

La segunda fila de iconos hacen referencia (los primeros) a acciones con respecto al texto y otras diversas.

Si deseamos pegar únicamente el texto seleccionado (o cortado previamente) pero sin el formato, debemos elegir la opción de “Pegar como texto plano”. Cuando lo hacemos aparece un cuadro de diálogo en el que pegamos el texto mediante la combinación de teclas Ctrl + V. Posteriormente hacemos clic en el botón Insertar.

Si hemos copiado texto desde cualquier procesador de textos (Office Word, OpenOffice Writer, etc.) no se debe pegar directamente en PHP WebQuest, pues es probable que el código de maquetación oculto que traer el texto interfiera en un correcto funcionamiento de nuestra WebQuest. Por tanto, siempre hay que pegar el texto utilizando el icono “Pegar desde Word”. Se nos abre un cuadro de diálogo cuyo funcionamiento es igual al descrito anteriormente.

Guarda la página

Borra el contenido delapartado/página

Equivaldría a seleccionartodo y borrar.

Cambia el texto a negrita,cursiva, subrayado y tachado

Alinea el texto a laIzquierda, centrado,

derecha o justificado.

Elige estilos de párrafo

Cambia el tipo de fuente

Cambia el tamañode la fuente

Corta textopreviamente seleccionado

Copia el texto

Pega textoPega texto plano

(se comenta a continuación)

Pegar desde Word


En Firefox los iconos de cortar, copiar y pegar no funcionan a no ser que se edite las preferencias del usuario, por lo que podemos (tampoco es una mala costumbre) utilizar los atajos de teclado para:

• Cortar (Ctrl + X)• Copiar (Ctrl + C)• Pegar (Ctrl + V)

El funcionamiento de los siguientes iconos es idéntico a los que encontramos en otras aplicaciones.

Nos vamos a detener en los siguientes por las posibilidades que tienen en el apartado Proceso.

Si queremos que los enlaces a los recursos necesarios para la realización de la WebQuest aparezcan en un lugar diferente a la parte inferior del apartado “Proceso” (intercalándose con explicaciones) o si nos hacen falta más de nueve enlaces (que es lo que nos proporciona la plantilla del programa) tendremos que utilizar el icono “Insertar enlace”.Para ello seleccionamos el texto que va a ser el enlace. Escribimos por ejemplo “Banco de imágenes del ITE”, seleccionamos ese texto y pulsamos sobre el icono “Insertar enlace” (que no se activa hasta que haya texto seleccionado). Aparece el siguiente cuadro de diálogo (del que describimos algunas opciones):

Buscar texto Buscar y reemplazar

Viñetas y numeraciones

Aumenta o disminuye sangría

Deshacer y rehacer

Insertar enlace Borrar enlace Insertar/Editar ancla


Pestaña General:• En Dirección del enlace pondríamos la URL a la que nos llevaría dicho enlace (por

ejemplo: http://recursostic.educacion.es/bancoimagenes/web/).• En Destino elegimos dónde queremos que aparezca la página con la que enlazamos: en la

misma ventana (opción por defecto); en una ventana distinta (opción deseable ya que así no deseparecerá nuestra WebQuest del navegador en ningún momento).

• En Título escribimos algún texto descriptivo del enlace. Dicho texto se verá desde nuestra WebQuest al pasar el puntero del ratón sobre el enlace (en la imagen siguiente se comprueba que hemos puesto como título ITE).

Pestaña Popup. Sirve para abrir enlace en una ventana emergente eligiendo ciertos parámetros, en lugar de en una página del navegador.

En la imagen anterior escribimos (o pegamos) en Dirección de la popup la URL de la página Web. Podemos poner Nombre de la ventana, Tamaño de la ventana (en píxeles), Posición que va a ocupar con respecto a la esquina superior izquierda del escritoio. En Opciones, marcando las casillas de verificación (cuadraditos) elegimos las propiedades de la nueva ventana.

Pestaña Eventos.

http://recursostic.educacion.es/bancoimagenes/web/


Si hemos realizado opciones en Popup y cambianos a la pestaña Eventos, veremos que el evento onclick está relleno con el código (en lenguaje javascript) elegido en popup. Este código podríamos utilizarlo en otros eventos.

Con respecto al icono “Insertar/editar ancha” sirve para poner como secciones dentro de cada apartado, con objeto de poner, utilizando el icono “Insertar enlace”, saltos dentro de la página (podría servir para hacer un menú en la parte superior de la página que llevase a secciones dentro de la misma). Consideramos que su uso en las páginas de PHP WebQuest estaría desaconsejado, ya que eso supondría que la página es excesivamente larga.

7.1. SEGUNDA FILA DE ICONOS. INSERTAR IMÁGENES

El icono “Insertar imagen” sirve para insertar imágenes dentro de cada apartado. Eso sí, las imágenes no se pueden subir a PHP WebQuest, sino que debemos publicarlas previamente en Internet o estar ya publicadas.

7.1.1. Imágenes ya publicadas

Si ya están publicadas, al menos debemos utilizar aquellas cuyos autores han dado permiso previo para ello, es decir, las que tengan licencia Creative Commons1 (recordamos que aunque una imagen esté en Internet no tenemos permiso para utilizarlas si no se nos ha dado previamente).

Por tanto, para buscar imágenes debemos de partir de la Web http://es.creativecommons.org/ ya que lo que encontremos desde ella podremos utilizarlo (aunque con las restricciones que impone las distintas modalidades de licencia CC).

Si buscamos imágenes de un castillo (imagen anterior) podemos acceder a Google o a flickr para localizar una imagen que nos interese.

Hagamos clic en una de las dos, por ejemplo en flickr, con lo que nos aparece en la parte inferior imágenes de castillos. Hagamos clic en la imagen que nos interesa. Aparece con unos iconos en la parte superior. Hagamos clic en la lupa.

1 http://es.wikipedia.org/wiki/Creative_Commons http://es.creativecommons.org/licencia/

http://es.creativecommons.org/licencia/

http://es.wikipedia.org/wiki/Creative_Commons

http://es.creativecommons.org/


Esa lupa nos sirve para ver la imagen en distintos tamaños. Elijamos, en la parte superior, el tamaño que nos interesa. Cuando veamos la imagen en pantalla hacemos clic sobre ella con el botón derecho del ratón y, en el menú emergente, elegimos Copiar la ruta de la imagen.

Cuando lo hemos hecho accedemos a nuestra WebQuest. Situamos el cursos en el lugar que queremos insertar la imagen y hacemos clic en el icono “Insertar imagen”. Nos aparece el cuadro de diálogo para poder hacerlo.

• Pestaña General:

En Dirección de la imagen situamos el cursor y pegamos (Ctrl + V o botón derecho del ratón >> Pegar) la dirección de la imagen que antes habíamos copiado.

Podemos escribir también una Descripción de la imagen y un Título.

• Pestaña Aspecto:

Sirve para elegir ciertos parámetros de la imagen que vamos a insertar (Alineación, Dimensiones, tamaño del Borde, etc.)


• Pestaña Avanzado:

Podríamos hacer que la imagen se sustituyera por otra cuando el ratón pasase sobre ella y por otra diferente cuando saliese de la imagen. En este caso las imágenes, para evitar deformaciones, deberían ser del mismo tamaño.

Si en lugar de elegir flickr hubiésemos elegido Google, el procedimiento hubiese sido parecido. Cuando tengamos la imagen en pantalla utilizamos el botón derecho para Copiar la ruta de la imagen.

7.2. SEGUNDA FILA DE ICONOS. INCRUSTAR OTROS ELEMENTOS

Partimos del supuesto que una WebQuest tiene que buscar la claridad en el diseño, con objeto de que los usuarios sepan sin lugar a dudas qué deben hacer, cómo deben hacerlo, cómo se les va a valorar, etc. Por tanto, insertar demasiados elementos en la WebQuest no contribuye demasiado a la simplicidad, aunque en ocasiones puede resultar imprescindible.

Decimos esto porque si hacemos clic en el icono “Editar código HTML” vemos el código en este lenguaje de programación que se va generando a medida que introducimos elementos (texto, imágenes, enlaces, etc.) en cada apartado. En la imagen siguiente se muestra el código de una línea de texto.


Obviamente no tengo por qué conocer ese lenguaje de programación para hacer una WebQuest, pero sí es interesante saber que aquí es donde debe pegarse cierto código proporcionado por diferentes sitios Web.

7.2.1. Vídeos desde Youtube

Si accedemos a un sitio Web en el que haya vídeos, como es el caso de Youtube (http://www.youtube.com), y tenemos uno en pantalla que queremos incorporar a nuestras WebQuest, hacemos lo siguiente:

1. Clic sobre el botón <Insertar>

2. Con el botón derecho del ratón copiamos el código que aparece debajo.

Una vez copiado ese código, accedemos al código HTML a través del icono “Editar código HTML” y allí pegamos, en el lugar que queramos que se inserte el vídeo, dicho código.

http://www.youtube.com/


7.2.2. Presentaciones desde SlideShare

Desde este sitio Web (SlideDhare: http://www.slideshare.net) insertamos presentaciones mediante el mismo procedimiento.

7.2.3. Documento desde Scribd

Desde Scribd (http://www.scribd.com/) podemos insertar documentos.

La lista de sitios Web puede ser extensa:

• Goear para canciones: http://www.goear.com/

• Contadores: http://www.contadorgratis.es/

• Etc.

Como regla: siempre que un sitio Web me facilite el código para insertar algo en mi página Web, puedo hacerlo en la WebQuest a través del icono “Editar código HTML”.

http://www.contadorgratis.es/

http://www.goear.com/

http://www.scribd.com/

http://www.slideshare.net/


7.3. SEGUNDA FILA DE ICONOS. SIGUIENTESLos siguientes iconos sirven para:

7.4. TERCERA FILA DE ICONOS

7.4.1. Maximizar la pantalla

Si ya está trabajando “a fondo” en PHP WebQuest es probable que la zona de edición se le haya quedado pequeña en alguna ocasión. Para aumentar la ventana del editor Web tiene el último icono de la tercera fila “Cambiar a pantalla completa”:

Con él el editor se maximiza y se puede trabajar con más comodidad. Para restaurar el tamaño original se hace clic de nuevo sobre el icono.

7.4.2. Trabajar con tablas

La mejor forma de organizar la información en pantalla es utilizando tablas. Para insertarlas tiene el primer icono de la tercera fila: “Insertar/Modificar tabla”.

Una vez hayamos insertado una tabla se activan algunos botones de esta tercera fila que estaban inactivos. Su funcionamiento es similar al de iconos similares de otras aplicaciones que trabajan con tablas.

7.4.3. Restantes iconos

Sirven para:

Insertar fecha

Insertar hora

Vista previa

Color del texto

Color del fondo

Subíndice y Superíndice

Caracteres especiales

Emoticonos

Película flash Imprimir

Barra horizontal Dirección escritura

webquest: un recurso educativo para su uso en el...

Documents