ICONOS Barras de Herramientas en Phpp

  • Upload
    ainhoa

  • View
    219

  • Download
    0

Embed Size (px)

Citation preview

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    1/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    1

    CMO CREAR UNA WEBQUEST Paso a Paso

    1.-Lo primero que tenemos que hacer es acceder a la pgina del instituto usando Mozilla (no usar elnavegador Firefox que puede dar problemas)

    URL: www.ieseltablero.org

    En el men de la izquierda justo al final de la pgina disponemosde un enlace que pone PHPWEBQUEST. Lo pulsamos paraacceder a nuestro servidor de webquests.

    2.-Una vez que hemos accedido debemos registrarnos si no lo hemos hecho con anterioridad.

    Deberemos completar el formulario con nuestros datospersonales.

    Para que nuestra solicitud sea aceptada debemoscomentarle a Francisco Aguilera que ya hemos enviadonuestra solicitud de registro para que as puedaaceptarla.

    NOTA:No olvidar anotar nuestro nombre de usuario ynuestra contrasea.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    2/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    2

    3.-Acceder de nuevo a la pantalla principal e introducir nuestrousuario ycontraseapara entrar en la aplicacin.

    4.-Una vez que accedemos nos debe aparecer el men principal donde podemos:I.- Ver, editar y borrar actividades que hemos realizado con anterioridad.

    II.- Crear nuevas actividades (webquest, cazas del tesoro e incluso miniquest).III.- Solicitar que se aadan nuevas asignaturas y/o niveles donde pueda tener cabida nuestra

    actividad (til para asignatura de FP que seguramente no se encuentran incluidas en el ndice de

    asignaturas)

    Nosotros marcaremos la opcin Crear una Webquest para crear una nueva actividad.

    5.-En la siguiente pantalla debemos elegir una plantilla para nuestra actividad:

    Para elegir una plantilla pulsamos sobre el botn circular que se encuentra situado a la izquierda de la

    misma y seguidamente pulsamos sobre el botn enviar para acceder a la siguiente pantalla.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    3/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    3

    En este formulario debemos:

    a) Elegir un nivel/asignatura para nuestra actividad.(ejemplo SECUNDARIA/Informtica). Cada uno elegir elnivel para el cual desea crear su actividad y una de lasasignaturas que imparte. En el caso de que no exista elnivel o la asignatura deseada comentrselo a Paco paraque lo aada.b) Ponerle un ttulo a nuestra actividad y nuestro nombrepara que conste como autor.c) Modificar el aspecto de la plantilla:

    Cambiando colores. Cambiando tipos de letra y tamaos.

    NOTA IMPORTANTE: Llegado a este punto debemos tenerclaro sobre que tema vamos a realizar nuestra actividad. Seaconseja parar un momento y abrir una nueva pestaa en elnavegador Mozilla y recopilar informacin en Internet que nos pueda ser de utilidad a la hora de crear

    nuestra actividad.

    Informacin que debemos buscar:

    Informacin para la introduccin de nuestra actividad. Un conjunto de pginas web (anotar sus direcciones) que puedan consultar nuestros

    alumnos para realizar la actividad (por ejemplo la url de wikipedia) Fotos o imgenes que hagan ms atractiva nuestra actividad. (anotar la direccin de la foto)

    Cmo obtener la URL o Direccin de una imagen o de una Web?

    De una imagen:

    a.- abrir google, elegir la opcin imgenes y poner el texto de bsqueda.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    4/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    4

    b.- Elegir la imagen deseada de entre todas las ofertadas.

    Para elegir una imagen slo debemospinchar con el ratn sobre la imagendeseada.

    Nos deber aparecer una ventana como lasiguiente.

    c.- arriba del todo tenemos la opcin ver imagen en tamao completo. Pulsamos sobre dicho enlacepara acceder a una pantalla donde slo se ver nuestra imagen.

    En dicha pantalla, en la barra de direcciones de nuestro

    navegador debe aparecer la URL o la Direccin de lafotografa.

    d.- Escribir en un papel dicha direccin o sealarla con elratn y usar la opcin de Mozilla (Edicin-Copiar).

    De una web:

    Para obtener la direccin (URL) de una web solamente esnecesario acceder a dicha web y memorizar la direccinque aparece en la barra de direcciones de nuestronavegador.

    Una vez que ya tenemos organizada la informacin quevamos a necesitar en nuestra actividad slo tenemos que

    ponernos manos a la obra.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    5/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    5

    6.-Disear la introduccin de nuestra webquest.

    Qu elementos podemos incorporar a nuestra introduccin?

    Textos (Con diferentes colores, tamaos, tipos de letra) Imgenes Enlaces a otras pginas

    (En las pginas de la 5 a la 10 se explican todos los elementos que podemos usar)

    La pantalla de edicin es donde creamos nuestra actividad insertando textos, imgenes, tablas,enlaces Las principales opciones son:

    Para volver al men principal. (Perderemos todos los cambios que no se hayanguardado con el botn enviar)

    Pulsando en estas pestaas podemos editar las distintas partes o fases de nuestra webquestteniendo en cuenta que para grabar los cambios debemos pulsar el botn enviar.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    6/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    6

    Para insertar una imagen desde nuestro discoduro. Esta opcin no est permitida en la pgina web del instituto por motivos tcnicos pero puede

    sustituirse por el botn de insercin de imgenes que adems tiene varias ventajas.

    Barra de herramientas

    Cuadro de edicin

    En la barra de herramientas aparecen una serie de iconos que nos permiten modificar los estilos ytipos de letra, insertar enlaces, hipervnculos o enlaces, imgenes, tablas

    El cuadro de edicin es donde nosotros introducimos el texto y dems elementos de nuestrawebquest.

    Hace la misma funcin que el botn enviar, graba lo que llevamos hecho y pasa a la siguientepestaa.

    Para modificar los estilos de letra. Empezando por la izquierda tenemos: Negrita,Cursiva, Subrayado y Tachado.

    Para elegir la justificacin del texto. Empezando por la izquierda tenemos:Justificacin izquierda, centrada, derecha y total o justificada.

    Suelen usarse los dosltimos para elegir el tipo de fuente (arial, courier) y el tamao de la misma.

    Los iconos de edicin nos permiten (empezando por la izquierda) cortar(equivalea copiar y borrar), copiar, pegar, pegar como texto plano (sin estilos) y pegar desde word.

    De izquierda a derecha: Buscar un texto en el cuadro de edicin y Buscar un texto yreemplazarlo por otro texto dentro del cuadro de edicin.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    7/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    7

    Listar / Numeracin y vietas.

    Disminuir sangra / aumentar sangra.

    El texto de arriba tiene mucha sangra, en cambio el texto de abajo no tiene apenas sangra y poreso ocupa todo el prrafo.

    Deshacer / Rehacer.

    Crear un enlace / Borrar un enlace / Crear un punto de anclaje.

    Los enlaces son hipervnculos que nos llevan a otras pginas web. Para poder insertar un enlacedebemos sealar previamente el texto que va ha realizar las funciones de enlace. Por ejemplo siqueremos poner un enlace a la pgina de GOOGLE podemos escribir google, sealarlo y pulsar

    sobre el icono . Nos debe aparecer la siguiente ventana:

    En el campo Direccin del enlace debemos poner la URL de la pgina que deseamos visitarcuando pulsemos el enlace. NO OLVIDAR EL http://

    En el campo Anclas podemos especificar la zona de anclaje de la pgina destino que deseamosver, por defecto si no ponemos nada iremos al principio de la pgina.

    En el campo Destino podemos elegir que cuando pulsemos sobre el enlace este se visualice enotra ventana nueva (cosa que recomendamos para as no perder la webquest y que al alumno lesea ms fcil el trabajo) o que se vea en la misma ventana.

    Un ancla es un smbolo que identifica una zona en nuestra web, de tal forma quepodemos aadir un enlace en otra zona de nuestra web para que cuando lopulsemos vayamos al ancla. Cada ancla viene identificado por un nombre y se

    suele poner un ancla al principio de nuestra web con el nombre inicioy un enlace o hipervnculo alfinal de la pgina que nos lleve a dicho ancla con el ttulo volver al inicio de tal forma que cuandollegamos al final de la pgina tenemos la opcin de volver al principio de la misma se forma directa.

    Este es uno de los botones ms utilizados ya que nos permite incorporar una imagen a nuestraactividad a partir de su direccin URL (una direccin URL es una direccin de Internet y desde

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    8/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    8

    Guadalinex se puede obtener pulsando el botn secundario del ratn sobre la imagen quedeseamos obtener su URL y eligiendo la opcin copiar direccin)

    Una vez que pulsamos sobre dicho botn nos aparecer una ventana donde debemos especificarla URL desde la cual vamos a insertar la imagen:

    En la imagen de la izquierda se muestra la pestaa Generaldonde debemos poner la URL de laimagen (una imagen termina en una extensin grfica siendo las ms comunes .gif y .jpg), ademspodemos especificar un ttulo para dicha fotografa. En la imagen de la derecha se muestra lapestaa Aspecto donde podemos especificar la alineacin de la imagen (izquierda, abajo,derecha), podemos modificar las dimensiones e incluso incluirle un borde (para incluir un bordedebemos especificar el grosor del mismo en el cuadro borde).En la pestaaAvanzadopodemos hacer cosas como que cuando pasemos el ratn por encima dela imagen nos cambie la imagen por otra imagen

    Una vez que finalicemos pulsaremos el botn insertar y nos debe aparecer la imagen en el cuadro

    de edicin donde podremos moverla y modificar su tamao.

    TRUCO: Las pginas web suelen ofrecer pocas posibilidades de alineacin de objetos(imgenes) de tal forma que si por ejemplo queremos que nuestra imagen se encuentre entredos textos nos resultara prcticamente imposible conseguirlo, los diseadores de pginas websuelen solucionar este contratiempo insertando tablas con el tamao de borde puesto a 0 de talforma que la tabla no se va a ver pero podemos usar sus celdas para alinear los objetos.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    9/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    9

    Para insertar una tabla. Debemos especificarel nmero de filas y columnas. Tambin podemosespecificar el tamao del borde y la alineacin.Una vez que los datos son correctos pulsaremosinsertarpara que nos aparezca nuestra tabla en el

    cuadro de edicin.

    Las lneas discontinuas de los bordes significanque el tamao de los mismos est puesto a 0 yque cuando vayamos a ejecutar la actividad estosno se vern.

    Siguiendo con el truco hemos insertado una tabla con 5 columnas y 1 fila con tamao de borde 0.Si os fijis cada celda es como una nueva pgina web y los objetos contenidos tienen su propiaalineacin dentro de la celda permitindonos muchsimas ms posibilidades de alineacin de formasencilla y con la ventaja de que cuando ejecutemos nuestra actividad las celdas de la tabla no severn.

    Propiedades de la fila / Propiedades de la celda. Nos permite definir propiedades como laalineacin, color de fondo

    Insertar una fila arriba (de la fila actual)/ Insertar una fila abajo (de la fila actual) / Borrarla fila actual.

    Igual pero con las columnas.

    Elementos de edicin de celdas avanzados. Nos permiten combinar celdas(unir) o dividir una celda en dos

    Subndice / Superndice.

    Para editar cdigo html (para programadores avanzados)

    Insertar fecha y hora.

    Vista previa. MUY TIL para ver el resultado de lo que estamos haciendo.

    Zoom

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    10/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    10

    Color del texto / Color de fondo del texto.

    Insertar smbolos (griegos) / Insertar e-motions / Corrector ortogrfico /Insertar FLASH / Insertar barra separacin / Imprimir.

    Una vez que hemos finalizado podemos pulsar el botn previsualizar y si todo es correcto

    pulsaremos enviar para grabar los datos. HASTA QUE NO SE PULSE ENVIAR NADA SE HAGRABADO.

    7.-Disear la fase TAREAS.8.-Disear la fase PROCESO.9.-Disear la fase EVALUACIN.10.-Disear la fase CONCLUSIONES.

    Una vez grabado veremos una pantalla como la anterior donde podemos continuar creandonuestra actividad. Slo debemos pulsar sobre la parte o fase que deseamos editar.

    Todas las fasesse completan de forma similar a la INTRODUCCIN excepto la fase PROCESOen la cual tenemos una lista donde podemos especificar una serie de WEB que deseamos visitennuestros alumnos. En la columna de la izquierda pondremos la URL de la pgina a visitar y en lade la derecha una descripcin o ttulo para la misma.

    Consultar la pgina web:

    http://www.ieseltablero.org/phpwebquest/webquest/soporte_tablon_w.php?id_actividad=214&id_pagina=1

    para ver un ejemplo de webquest creada por nuestro compaero Jos Carlos Castillo o acceder ala pgina web del instituto (www.ieseltablero.org) y visitar el espacio dedicado al proyecto escuelaespacio de paz (Proyectos->Escuela espacio de paz) donde tambin podremos consultar lawebquest de nuestro compaero.

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    11/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    11

    Fase proceso

    Una vez que rellenemos todas las fasesnos aparecer la siguiente pantalla:

    En el recuadro tenemos la URL de nuestra actividad y podemos ejecutarla simplemente pulsadosobre la misma.

    MODIFICACIN DE UNA WEBQUEST

    Para modificar una actividad debemos ir al men de usuario y elegir la opcin ver,editar o barrar alguna de mis actividades:

  • 7/26/2019 ICONOS Barras de Herramientas en Phpp

    12/12

    IES EL TABLERO CURSO DE REVISIN Y ACTUALIZACIN TIC

    12

    Accederemos a una pantalla donde veremos un listado con todas nuestras actividades:

    Pulsaremos :

    Entrar: Para ejecutar una actividad Completar: Para finalizar una actividad que hemos dejado a medias. Editar: Para modificar una actividad ya finalizada. Borrar: Para eliminar una actividad.