Logo Curso Básico  

MenúPráctica 3: ProyectoPráctica 3: Evaluación


En estas Actividades Guiadas se ofrece en detalle los pasos que se requiere para la consecución del Proyecto 3 .

Cuando se quiera crear o modificar una unidad didáctica, lo más aconsejable es utilizar un editor HTML. Hay muchos editores en el mercado y cada persona tiene sus gustos y preferencias por cada uno: cada cual puede utilizar aquel que considere más conveniente. 

Las indicaciones para realizar esta práctica están hechas para el programa FrontPage Express. No siempre se elige el camino más sencillo con este programa sino aquellos métodos generales disponibles en otros editores.

Las explicaciones que siguen destacan las herramientas necesarias para modificar una página ya creada.



Guardar una página desde el navegador

Al visualizar una página con un navegador es frecuente que se muestren imágenes. Éstas no están insertadas en la página, lo que hay son rutas o direcciones para llegar a ellas.

Se recomienda abrir la página en el navegador (Internet Explorer o el que se use). Se puede usar el enlace anterior o bien seguir la ruta Descartes/Curso_basico/proyectos/ejercicio3.htm (la página es ejercicio3.htm que está en la carpeta proyectos del Curso_basico)

Ruta de ejercicio3.htm

Se guardará con otro nombre. Para ello, en el menú Archivo se elige Guardar como: el nombre será envio3.htm dentro de la carpeta proyectos.

Guardar página web

Así se consigue que todas las imágenes que se veían en la página ejercicio.htm (y que podían estar en distintas carpetas) ahora estén en una nueva carpeta que se ha creado y se llama envio3_archivos.

La carpeta donde se guardará la página es fundamental para que funcionen las escenas (es uno de los temas de la práctica 4). En la imagen anterior se observa que se guarda en la carpeta proyectos



Abrir y guardar un fichero HTML
Abrir

Se abre el programa FrontPage Express y después se abre la página:

Abrir archivo I

En la nueva ventana se pulsa en Examinar y se elige el archivo según la ruta anterior:

Abrir envio3.htm

Guardar

Cada vez que queramos guardar la página bastará con pulsar sobre el icono Guardar Guardar. Si se desea guardar con otro nombre, en el menú Archivo se elige la opción Guardar como y el nuevo nombre. 

Comprobar cambios

Para ver los cambios que se hacen, se abre la página en el navegador (doble clic sobre el archivo envio3) de manera que por un lado estará abierta la página en el editor y por otro en el navegador. Para pasar del editor al navegador o viceversa, se hace clic en el botón correspondiente de la barra de tareas:

Barra de tareas

Cada vez que guardemos la página en el editor podremos ver los cambios en el navegador pulsando en el icono Actualizar del navegador Actualizar



Copiar-cortar y pegar Es la técnica más cómoda y usada en cualquier editor.
Seleccionar

Todo el texto de una página puede seleccionarse a la vez mediante la opción Seleccionar todo del menú Edición.

Una palabra puede seleccionarse directamente haciendo doble clic izquierdo sobre ella.

En FrontPage, una línea se selecciona haciendo clic izquierdo a la izquierda de la línea.

Para seleccionar cualquier cantidad de texto se puede seguir uno de estos dos caminos alternativos:

  • Con el ratón: colocar el cursor a la izquierda del comienzo, hacer clic izquierdo y arrastrar a la vez hacia la derecha hasta cubrir con la selección todo el texto.
  • Con el teclado: usar las teclas de desplazamiento izquierda, derecha, arriba y abajo con la tecla de mayúsculas pulsada (no confundir con la tecla de bloqueo de mayúsculas). 

Una tabla, una fila, una columna o una celda de una tabla se seleccionan situando el cursor en una celda y eligiendo la opción deseada en el menú Tabla.

Otros elementos de la página (imágenes, líneas horizontales,...) se seleccionan haciendo clic sobre ellos.

Copiar o cortar

Una vez seleccionado un elemento se puede copiar o cortar (esto es copiar haciéndolo desaparecer de donde está) de tres maneras diferentes:

  • En el menú Edición eligiendo la opción deseada.
  • Pulsando la tecla control (ctrl) de teclado y, sin soltarla, pulsar la tecla c para copiar o la tecla x para cortar.
  • Pulsando con el botón derecho sobre la selección y eligiendo la opción deseada. 
Pegar
OjO
No copiar y pegar imágenes que estén en páginas diferentes, se recomienda insertarlas.

El elemento copiado se puede colocar en otro lugar de esta página o de otra. Para ello, coloca el cursor en el lugar deseado, sigue alguno de los tres métodos anteriores y elige pegar o la combinación de teclas control v.


Colores
Los colores se determinan por la cantidad Rojo-Verde-Azul (código RGB) que lo forman. En la página envio3.htm aparecen los siguientes colores:
Color R V A Código hexadecimal
  0 102 153 #006699
  223 234 236 #DFEAEC
  255 248 225 #FEE6B8
  254 230 184 #FFF8E1
  233 234 204 #E9EACC
Colores personalizados
OjO
Otros editores no permiten personalizar la paleta de  colores y necesitan el código hexadecimal del color pero recuerdan el último color seleccionado en una celda y en un texto. En versiones superiores de Frontpage aparecen disponibles todos colores del documento.

Se puede cambiar el color al texto, al fondo de la página o de una tabla o de una celda de una tabla, a una línea de separación, a los bordes de las tablas 

Durante la confección de una página se necesitará cambiar de color con frecuencia. Resulta muy cómodo tener estos colores ya definidos pues solo tenemos que hacer clic sobre la ventana del color personalizado para que el color quede seleccionado.

Para personalizar colores, se accede a la paleta de colores con el icono Icono color de la barra de herramientas de formato. En la ventana Color se pulsa el botón Definir colores personalizados >>>. Para poner un color personalizado se siguen los pasos que muestra la imagen siguiente. En esta vista ya se han puesto los cuatro primeros colores que se van a utilizar en nuestra página y los 5 pasos a que se refiere definen en la paleta de colores personalizados el color R=233, V=234, A=204.

Paleta de colores


Establecer las propiedades de la página Para acceder a la herramienta que establece propiedades de formato a la página se puede seguir uno de estos dos caminos alternativos:
Abrir las propiedades de página

Haciendo clic derecho sobre el fondo de la página que inicialmente tiene color blanco. Aparece el siguiente menú emergente...

Propiedades de página I

Se elige la opción Propiedades de página...

Seleccionando la opción Fondo... en el menú Formato de la ventana del programa

Propiedades de página II

Se abre a la ventana de diálogo de propiedades de la página con cuatro fichas o pestañas: General, Fondo, Márgenes y Personalizar.

Título de la página
Título

En la ficha General podemos poner un nombre a la página que como sabemos es el que aparecerá en la barra de títulos del navegador cuando sea abierta por él.

El nombre que pondremos a la página es Práctica 3.

Color de fondo
Color de fondo

En la ficha Fondo podemos personalizar el color de fondo de la página.

Para ir a seleccionar el color personalizado R=254, V=230, A=184, en la paleta de colores, se despliega la lista de colores de fondo pulsando el botón flecha abajo de la entrada Fondo y seleccionando la opción de color Personalizar.

Selección de color

Esta opción abre la paleta de colores donde se puede seleccionar el color interesado haciendo clic sobre la pequeña ventana de color personalizado.

La ficha Fondo también permite asignar color a los textos de la página que van a ser hipervínculos.



Tablas

Una tabla es una estructura que permite organizar la información en filas y columnas. En este sentido sirve para presentar organizadamente los datos y para establecer una estructura de diseño de la página. Así se consigue que los diferentes elementos que intervienen en la página (textos, imágenes y escenas) se organicen dentro de la estructura de celdas con diferente dimensión espacial y con color propio de fondo.
Insertar una tabla
OjO
Las tablas están formadas con celdas. Para ver las líneas de división de las celdas se deberá activar la opción Mostrar/ocultar Mostrar/Ocultar en la barra de herramientas estándar. Mostrar es conveniente para poder distinguir una celda de otra y poder seleccionarlas. Las líneas de división no son bordes gráficos que se ven cuando la página se abre con un navegador, sirven para orientarnos mientras editamos la tabla.

Para insertar la tabla se selecciona la opción activa Insertar tabla... del menú Tabla del editor.

Insertar tabla I

La ventana de diálogo que se abre permite definir las principales propiedades de la tabla:

Insertar tabla
  • Tamaño para indicar el número de filas y columnas. 

  • Diseño.

    • La alineación (izquierda, centro, derecha) posiciona la tabla horizontalmente entre los márgenes derecho e izquierdo de la página. 
    • El tamaño del borde (en pixeles) determina el ancho del borde. Tamaño 0 significa que no se dibujará el borde. 
    • El relleno de celdas se refiere a la distancia en pixeles a la que se colocará el contenido que se ponga en las celdas.
    • El espaciado entre celdas es la distancia en pixeles que habrá entre los bordes de las celdas contiguas. 
  • El ancho de la tabla se puede especificar en pixeles (ancho absoluto) o en porcentaje (ancho relativo referido al ancho de la página). Valor 100 en porcentaje significa que cualquiera que sea el ancho de la página, 800 pixeles, 1024 pixeles, etc. de resolución de la pantalla, la tabla  ocupará todo el ancho.

Lo que se ve en el monitor de un ordenador son puntos de colores que forman las imágenes y los textos. Cada uno de estos puntos se llama píxel.

En el ejemplo, se han cambiado el nº de columnas a 3 y se especifica el ancho de la tabla al 100% del ancho de la página. Si en el Menú Ver está activada las marcas de formato podremos ver lo siguiente:

 

Ejemplo de tabla

Color de la tabla o de la celda

Si el cursor está sobre la tabla estarán activas casi todas las opciones del Menú Tabla. Por ejemplo, en Propiedades de tabla se pueden cambiar los colores de fondo y de los bordes abriendo la lista de opciones: 

Propiedades de tabla

Si el cursor está en una celda y en el Menú Tabla elegimos Propiedades de celda, podremos cambiar el color de la celda como antes: 

Propiedades de celda
Unir o combinar celdas. Dividir celda

Varias celdas consecutivas de la misma fila se pueden combinar (unir) en una sola. Para ello primero se seleccionan de una de las siguientes formas:

  • Con el ratón: Se coloca el puntero del ratón en la primera celda y y se arrastra (hacer clic con el botón principal y se desplaza sin soltar) hasta abarcar todas las celdas deseadas.

  • Con el teclado: Se coloca el puntero del ratón en la primera celda y, con la tecla control (ctrl) pulsada permanentemente, se pulsan las tecas de flechas de desplazamiento hacia la izquierda y derecha hasta la posición deseada.

Una vez seleccionadas las celdas, en el Menú tabla se elige Combinar celdas. En el ejemplo siguiente se ven las dos primeras celdas de la segunda fila combinadas:

Celdas combinadas

FrontPage Express no permite combinar celdas consecutivas de la misma columna salvo que sea toda la columna. Para este caso primero se selecciona la columna colocando el cursor en una celda de la columna y en Propiedades de tabla se elige Seleccionar columna. Después de estar seleccionada se elige Combinar celdas.

Otra opción similar a combinar es Dividir celdas. En la ventana que aparece preguntará si divide en filas o en columnas. Por ejemplo:

1) en la tabla anterior se selecciona la última columna
2) en el Menú tabla se elige Dividir celdas
3) en la nueva ventana se elige la opción Dividir en filas cambiando el Número de filas a 3

y se obtendrá:

Dividir celdas

Borrar tabla

Para borrar una tabla, primero se coloca el cursor sobre una de las celdas y en el Menú tabla se elige Seleccionar tabla, y después se pulsa la tecla suprimir (supr).


Poner formato al texto El formato es una serie de características asociadas a un texto. Éstas son las siguientes : fuente o tipo, estilo (normal, cursiva, negrita y negrita y cursiva), tamaño y efectos (tachado, subrayado, máquina de escribir y color)
OjO
No todos los ordenadores tiene instalados los mismos tipos o fuentes, pero hay una serie de fuentes que siempre podemos ver como Arial, Courier New, Times New Roman y Verdana.

Desgraciadamente no todos los editores proporcionan todos los efectos. Se echa en falta en FrontPage Express los estilos suprarrayado, superíndice y subíndice

Hay dos ocasiones para poner formato al texto:

  • El texto no existe y se va a escribir.

  • El texto ya está escrito pero se desea cambiar su aspecto o formato.

En este segundo caso, el texto  debe de seleccionarse antes de cambiar el formato. 

Para aplicar formato a un texto seleccionado se pueden seguir dos caminos alternativos:

  • Desplegar el menú Formato y seleccionar la opción Fuente...
Formato de texto I
  • Hacer clic derecho sobre el texto para abrir un menú emergente y seleccionar Propiedades de la fuente...
Formato de texto II

En ambos casos se abre la siguiente ventana de dialogo donde se seleccionan todas las características de formato que correspondan

Propiedades de fuente

En la parte izquierda de la barra de herramientas de formato aparecen ventanas de selección de estilos y fuentes, los botones de aumento y disminución del tamaño de la fuente, los botones de conmutación de estilo y efectos (negrita, cursiva, subrayado y color).

Barra de formato de fuente

Los elementos individualizados en esta barra vienen a ser como atajos para establecer una o varias característica del formato.


Insertar imágenes  
OjO

Las imágenes de una página son  archivos que deben ser trasladados con la página cuando ésta sea llevada a otro ordenador.

Las imágenes de las páginas web no están en la página, en ésta sólo figuran las rutas para llegar a ellas. Por tanto, son elementos añadidos a una página y deben acompañarla cuando se lleve a otro ordenador.

Normalmente, las imágenes se sitúan junto a la página o, sin son muchas, en una carpeta próxima a la página.

Para insertar la imagen logo.gif que está en la carpeta  Descartes primero se copiará en la carpeta en la que están todas las imágenes (envio3_archivos): es el proceso de copiar y pegar pero sobre un archivo.

Para situarla en la página se coloca el cursor en la posición deseada. A continuación podemos seguir uno de los siguientes caminos alternativos:

  • Pulsar en el icono Insertar imagen.
  • Elegir la opción Imagen... en el menú Insertar.

Aparecerá la siguiente ventana:

Ventana imagen

Pulsa en Examinar... y busca la ruta para llegar a la imagen. 

Abrir imagen

No es conveniente usar la técnica de copiar y pegar para imágenes que estén en páginas distintas.


Insertar una línea horizontal  

Se empieza por activar el lugar de la página donde se quiere insertar la línea (se posiciona el puntero del ratón y se hace clic izquierdo). El curso de escritura queda activo en el lugar.

En el menú Insertar se elige la opción Línea horizontal y se insertará en el lugar una línea por defecto.

Línea por defecto

Ahora hay que poner las propiedades de tamaño, anchura y color para conseguir el resultado deseado. Se selecciona la línea haciendo clic derecho y en el menú emergente se elige la opción Propiedades de la línea horizontal...

Menú emergente

La ventana de dialogo permite establecer las propiedades que se ven en la imagen. No olvidar poner el color personalizado que tenemos en la paleta de colores R=0, V=102, A=153

Menú línea

Si la línea ya ha sido insertada y se necesita en varios lugares, no es necesario repetir el proceso anterior basta utilizar la técnica de copiar y pegar.


Hipervínculos Los enlaces o hipervínculos suelen ser palabras, trozos de texto o imágenes que permiten enlazar con otra parte de la misma página o con otra página que pueden estar en el ordenador propio (equipo local) o en cualquier ordenador de la red a la que se esté conectado en ese momento (equipo remoto), que en caso de ser Internet, puede estar situado en cualquier parte del mundo. A este sistema de organización de la información se le llama hipertexto.

Interesan dos tipos de enlaces:

  • A una dirección de Internet.
  • A una página creada. En este caso hay otras dos posibilidades:
    • Al comienzo de la página.
    • A una determinada parte de la página en la que está un enlace interno o marcador.
Enlace a una dirección de Internet

Para crear un enlace a una dirección de Internet, se selecciona un texto y en el menú Insertar (o en el menú Edición) se elige Hipervínculo. En la pestaña WWW se escribe la dirección.

Hipervínculo a internet
Enlace a otra página abierta

Para crear un enlace a otra página, ésta debe estar abierta también en FrontPage Express. Cuando hay varias páginas abiertas en FrontPage, se pasa de unas a otras a través del menú Ventana. En la siguiente imagen se observan dos páginas abiertas y está activa la número 1 por la marca que lleva delante:

Páginas abiertas

Para crear un enlace de la página Práctica 3 (envio3.htm) a la página Original (ejercicio3.htm), se selecciona un texto o una imagen en envio3.htm y en el menú Insertar (o en el menú Edición) se elige Hipervínculo. En la pestaña Páginas abiertas se selecciona la página destino tal y como muestra la siguiente imagen.

Hipervínculo a una página

Marcadores

Para que el enlace sea a un lugar de otra página, primero habrá que crear en dicho lugar un enlace interno o marcador. Para ello se coloca el cursor en dicha posición y en el menú Edición se elige Marcador. El nombre del marcador no debería tener caracteres especiales ni espacios.

Ventana del marcador

En la posición del marcador aparecerá una banderita Marcador

Enlace a una posición de una página abierta

Volvemos a la primera página desde el menú Ventana.

Para crear un enlace de la página Práctica 3 a la página Original, como antes, se selecciona un texto o una imagen en Práctica 3 y en el menú Insertar se elige Hipervínculo. En la pestaña Páginas abiertas se selecciona la página destino. En la siguiente imagen se crea un vínculo de la página Práctica 3 a la página Original.

Hipervínculo a un marcador

Enlace en una imagen

Si se quiere crear o modificar un enlace en una imagen, se hace doble clic sobre ella o se elige Propiedades de imagen en el menú que surge al pulsar con botón derecho sobre ella. Aparecerá la siguiente ventana:

Propiedades de imagen

Pulsando en Examinar como muestra la imagen se accede a las ventanas anteriores de hipervínculos.


Sobre las escenas de Descartes

Las escenas de Descartes no se ven en FrontPage pero aparece una indicación del lugar en el que está:

Escena en editor

En algunos editores pueden verse las escenas y en otros no aparece nada. En este último caso será necesario recordar las posiciones de las escenas.


MenúPráctica 3: ProyectoPráctica 3: Evaluación
Metodología

© Ministerio de Educación y Ciencia. Año 2005

Autores: Juan Madrigal Muga, Ángel Cabezudo Bueno, Enrique Martínez Arcos, Josep Mª Navarro Canut, Juan Simón Santamaría