Módulo 5

PAGINAS WEB

Centro Zonal Sur 97

 5.1 DISEÑO DE PAGINAS WEB
UTILIZANDO WORD

Cree una carpeta con su nombre en el escritorio de Abra un archivo nuevo con Word
Windows. Para ello siga los pasos indicados: a) Clic en «inicio»
b) Seleccione Nuevo Documento de Office
a) Botón derecho del mouse c) Seleccione Documento en Blanco (Word)
b) Selecciona la opción «nuevo» d) Seleccione Menú Archivo
c) Selecciona la opción «carpeta» e) Seleccione la opción «Guardar como
d) Póngale nombre a la carpeta HTML...»
f) Seleccione su carpeta
g) Guarde el archivo

Grabe el archivo con extensión

HTML en la carpeta recién
creada. El primer archivo debe,
necesariamente, denominarse
index.

98 Centro Zonal Sur

Ahora, se debe crear un fondo para la página. Para
ello, deben seguirse los pasos siguientes:

a) Menú Formato - Opción Fondo

b) Clic en Efectos de Relleno
c) Seleccionar un tipo de fondo

En la misma opción de elegir fondo, es conveniente

elegir una textura de fondo y no un sólo color. Para
ellos se debe seleccionar la opción efectos de
relleno y luego en textura. Ahí aparecerán diversas
posibilidades de texturas para ser usadas como
fondo de página.

A continuación, se debe elegir una fuente, tamaño

y color de letra adecuada para el fondo seleccionado.

Posteriormente, se procede a escribir el título de la

página y ya se está en condiciones de comenzar a
desarrollar los contenidos.

Centro Zonal Sur 99

 5.2 HIPERVINCULOS Y TABLAS

Hipervínculos o links
Los hipervínculos son textos o gráficos en colores
y subrayados desde donde se puede hacer clic para
saltar a otro archivo, a una parte determinada de
un archivo, a una página HTML en Internet, o
5. Haz clic en el botón agregar de la ventana
establecer un enlace para enviar un correo
anterior
electrónico. Estos hipervínculos pueden establecerse
ya sea con alguna parte de una página en particular,
6. Seleccionar el texto que se quiere que aparezca
o con un sitio web entero.
con vínculo

Hipervínculos con una parte del

7. Establecer el hipervínculo entre el texto
archivo
seleccionado y el marcador correspondiente.
Para ello, hay que ir Menú Insertar, Opción
hipervínculo
Los pasos necesarios son los siguientes:

1. Hacer clic en el lugar o posición donde se desea

poner un marcador

2. Insertar un Marcador en el lugar en que se

desea que vaya la página al hacer clic...

3. En el Menú Insertar hace clic en la opción

Marcador

8. Hacer Clic en el botón Examinar que está en

el lado derecho de la opción Ubicación dentro
del archivo (opcional)

4. Escribir el nombre del marcador o seleccionar

el nombre de uno en la ventana

100 Centro Zonal Sur

8. Seleccionar el marcador correspondiente 4. Hacer clic en el botón Examinar que está al
definido con anterioridad y hacer clic en el Botón lado derecho de la opción Vincular al archivo
Aceptar. o dirección URL.

5. Buscar en las carpetas, el archivo con el cual

se desea hacer el hipervínculo.

9. Hacer nuevamente clic en el botón Aceptar.

Hipervínculos con otro archivo

En este caso, es necesario que se realicen los
siguientes pasos:

1. Asegurarse que el otro archivo ya existe, de lo

contrario, lo primero será crear un archivo con
formato HTML y grabarlo en una carpeta.
6. Hacer clic en el botón Aceptar, en la pantalla
anterior y luego nuevamente en Aceptar en la
2. Seleccionar el texto que se desea vincular con
pantalla que aparecerá a continuación.
otra página.

3. Elegir la opción Hipervínculo del menú

Insertar.

Centro Zonal Sur 101

Hipervínculos con una página web 4. Debajo de «Vincular al archivo o dirección URL»,
escribe la dirección de tu correo, después de la
palabra «mailto:».
1. Seleccionar el texto con el cual se desea hacer
el hipervínculo. Por ejemplo: mailto: jperez@hotmail.com

2. Elegir la opción Hipervínculo del menú

Insertar.

3. Debajo de la opción «Vincular al archivo o

dirección URL», debe escribirse la dirección
de la página Web con la cual se desea hacer el
vínculo.

Uso de tablas

Las tablas se usan especialmente para organizar de

mejor forma el texto y las imágenes.

Existen básicamente dos formas de insertar una

tabla y ello depende del objetivo que se desea lograr:
5. Hacer clic en el botón Aceptar, de la pantalla
anterior
1. Si se desea una tabla más bien de
características homogénea en sus celdas, lo
recomendable es usar la opción Insertar Tabla
Hipervínculos con una dirección del menú Tabla. Hay que definir el número de
electrónica columnas y filas y luego hacer clic en el botón
Aceptar.

1. Escriba su dirección en su página web principal

o bien ponga una imagen que represente al
correo.

2. Seleccione el nombre de su dirección de correo

o la imagen que representa al correo.

3. Seleccione la opción Hipervínculo del menú

Insertar.

102 Centro Zonal Sur

2. Si se requiere una tabla heterogénea en los
tamaños de las celdas, es mejor usar la opción
dibujar tabla en el menú tabla

Con este «lápiz» puedes dibujar una tabla a tu

medida y posteriormente también puedes agregarle
más divisiones a las celdas.

A continuación se indican algunas posibilidades de

edición con el uso de tablas:

1. Agregar bordes a las tablas de las

usando el comando Borde del menú
Tabla.

2. Cambiar el color de fondo o el

sombreado de las tablas con el
comando Propiedades de tabla y
cambiar el color de fondo de una
selección de celdas con el comando
Propiedades de celda, en el menú
Tabla.

3. Cambiar el alto de las filas

seleccionadas y el ancho de las
columnas seleccionadas con el
comando Propiedades de celda (menú
Tabla).

Centro Zonal Sur 103

 5.4 DISEÑO DE PAGINAS WEB
UTILIZANDO FRONT PAGE

Actividad 1
1. Cree una Carpeta en el disco duro. 8. En la primera columna, segunda fila, digite el
siguiente menú:
2. Abra el programa FrontPage Express.
· Datos principales
3. Cree el siguiente esquema utilizando tablas · Objetivos
· Actividades
· Recursos e insumos
· Productos esperados
· Evaluación

9. Céntrelo, agrande la letra (24) y déjela en

5. Digite en la primera fila el nombre del proyecto negrita.
colaborativo, luego céntrelo, cambie el
tamaño (aumente a 36) y el color del título. 10. En la tercera fila, escriba el domicilio y teléfono
correspondientes a suescuela y centre dichos
datos.
6. Inserte una imagen en la celda de la derecha
de la segunda fila (disminuya el tamaño si es
necesario).

104 Centro Zonal Sur

11. Cambie el color de fondo de su página. Para ello, seleccione la opción desde Propiedades de la
página (con botón derecho en cualquier lugar fuera de las tablas), luego seleccionar Fondo.

Abrir este
menú

12. Centre la figura dentro de la celda.

13. Guarda el archivo, con el nombre index en tu carpeta.

Hipervínculos, links o enlaces

La característica que más ha influido en el espectacular éxito del Web (o tela de araña) ha sido, aparte de
su carácter multimedial, la posibilidad de unir los distintos documentos repartidos por todo el mundo por
medio de enlaces hipertexto.

Vamos a distinguir cuatro tipos de hipervínculos o enlaces:

1. Enlaces dentro de la misma página

2. Enlaces con otra página nuestra (otro archivo)
3. Enlaces con una página fuera de nuestro sistema
4. Enlaces con una dirección de e-mail

Centro Zonal Sur 105

Actividad 2

1. Enlaces dentro de la misma página

a) Cree una página web nueva (Archivo - nuevo - página en blanco) que tenga el nombre de:
formulario y guárdela en su carpeta.

b) Prepare un índice como lo muestra la siguiente figura (dele el formato que desee). Para ello,
utilice «Tablas».

Descripción del proyecto

Fecha de realización

Curso/Nivel o Grado

Número de alumnos/grupos participantes

Dirección electrónica

Coordinador/a del proyecto

c) Baje el cursor unas 15 líneas, después del índice creado. Digite la información referente a los datos
del índice, separadas unas de otras por unas cinco líneas o más.

d) Ahora vamos a insertar un marcador o destino para la “Descripción del proyecto”. A este
marcador le va a denominar uno. Entonces...

Ubíquese con el mouse al principio

del texto que describe el proyecto

Seleccione del menú Edición la

opción Marcador.

e) Análogamente, inserte marcadores o destinos para las otras cinco opciones (es decir, para
fecha, curso, número de grupos, dirección URL y cordinador/a) del índice. Llámelos
dos, tres, cuatro, cinco y seis respectivamente.

106 Centro Zonal Sur

f) Ahora insertaremos un enlace o link al marcador o destino uno (o sea a la “descripción del
proyecto”. No olvide que está dentro de la misma página llamada formulario), para ello,
seleccione con el mouse, la palabra Descripción en el índice.

Clic en el botón de enlace o

hipervínculo en la barra de
herramientas o bien, en el
menú Insertar – hipervínculo

Clic en Páginas
abiertas, luego
seleccionar el Marcador
desde la lista de ellos.
(para este caso es
uno).

g) Ahora, usted ya tiene un Enlace o link dentro de su página. De la misma forma, complete
los demás vínculos (es decir, para fecha, curso, etc), luego guarde y cierre la página.

Centro Zonal Sur 107

2. Enlaces con otra página nuestra

a) Abra la página index.

b) Seleccione Datos principales y luego clic en el ícono

c) En la ventana que se despliega, debe seleccionar el archivo que en nuestro caso es

formulario.htm y luego Aceptar

d) Guarde su archivo.

3. Enlaces con una página fuera de nuestro sistema

a) Estando en el archivo Index, haz un clic en la imagen que tienes en tu página.

b) Clic en el botón de hipervínculo y luego en la lengüeta WWW. Ahora debes anotar una dirección
completa en el lugar que dice Dirección URL, por ejemplo:

http://www.conce.plaza.cl

c) Guarde el achivo.

3. Enlaces con una dirección de correo electrónico (e-mail)

a) Para los enlaces o links con e-mail, debe seguir los

mismos pasos que con los anteriores enlaces, pero Por ejemplo:
la dirección que debe poner, es: mailto: jperez@udec.cl
mailto: la direccion correspondiente

Sugerencia: inserte una

imagen y a ella, hágale un
vínculo al correo electrónico

108 Centro Zonal Sur

 5.4 PAGINAS WEB CURRICULARES
Diseño de Webs Educativos
Andrea Góngora Rojas
(Cuadernos Digitales) España
De manera similar a lo que ocurre en el diseño de
cualquier material didáctico, independientemente del
formato en que éste sea editado, los pasos en la
planificación de un web con fines educativos
consisten en:
1. La definición de los objetivos
educacionales del material.
2. La selección de los contenidos que
deben incluirse en el web, en
función de los objetivos en principio
establecidos y de las necesidades
de aprendizaje de los alumnos a
quienes va dirigido el material.
3. Los contenidos resultantes de la
selección serían el punto de partida
para la construcción de la
estructura conceptual que pretende
enseñarse a los alumnos.
4. La elección de las estrategias
instruccionales más adecuadas
para llevar a cabo el proceso de
enseñanza; en la selección de
dichas estrategias es indispensable
considerar las características
propias del soporte en el que será
presentado el material.
Centro Zonal Sur
Hasta aquí, el proceso de diseño de un web educativo
no difiere del que se requiere para la creación de
materiales en otros formatos. La particularización
del proceso se da en los pasos siguientes: la
organización de los contenidos en bloques de
información en función de las características del
formato, página web, y la definición de las relaciones
entre dichos bloques (las páginas), es decir, los
enlaces o hipervínculos.
La organización de la información en bloques de
contenido consiste en la traducción de la estructura
conceptual inicialmente planteada —a la luz de las
estrategias instruccionales elegidas— al soporte de
página web.
El objetivo es que la estructura conceptual se
reproduzca fielmente en la estructura del web,
optimizando las posibilidades que ofrece este medio
de presentación de la información.
Es muy importante evitar que la fragmentación
propia del sistema hipertextual altere el significado
de lo que se quiere expresar; tal fragmentación debe
ser aprovechada como una herramienta para
conseguir la adaptación de los materiales a las
necesidades de aprendizaje de los alumnos, en un
marco de interactividad.
Una vez que se ha establecido qué debe ir en cada
página del web, es necesario determinar las
relaciones que existen entre las páginas. Estas
relaciones definirán la colocación de los enlaces o
hipervínculos del web.
Es importante tener en cuenta que las conexiones
entre las páginas deben contribuir a recrear la
estructura conceptual definida en un primer
momento: dichas conexiones aportarán información
a los alumnos que naveguen por el web y pueden
incidir en el sentido que ellos den a los contenidos.
109
Algunas Publicaciones electrónicas de carácter educativo

En Chile:
Red Enlaces
http://www.redenlaces.cl/
Recursos educativos
http://www.educarchile.cl
Icarito
http://www.icarito.cl
Proyecto Explora-Conicyt
http://www.explora.cl/
Centro de Recursos Educativos
http://www.iie.ufro.cl/Recursos/
Proyecto Aula 21
http://www.aula21.uchile.cl
Experiencias pedagógicas
http://www.conce.plaza.cl
Leubu
http://www.enlaces.cl/webeducativos/
hidrografia/

En el mundo:
Publicaciones educativas
http://www.ctv.es/USERS/sordos-co/
Publicaciones.htm
El cuerpo humano
http://club.telepolis.com/euyin/portal.htm
Actividades matemáticas
http://www.xtec.es/recursos/clic/esp/act/mates/
Literatura para niños
www.leemeuncuento.com.ar
Ciencia para niños
www.cienciaparaninos.com/
Actividades de Física
www.fisicarecreativa.com
Educación Física y deporte
www.efdeportes.com
Artes visuales
www.artesvisuales.com.mx
Centro de colaboración Nueva Alejandría
http://www.nalejandria.com/

110 Centro Zonal Sur

 5.5 PUBLICACION DE PAGINAS WEB

Para «subir» una página o publicarla en Internet,
debe almacenarse en alguna máquina servidora que
pueda ser «visitada» en la red.
Existen varias empresas que ofrecen este servicio
gratuito con algunas condicionantes, siendo la más
importante la cantidad de espacio ofrecido para cada
sitio web. La mayoría ofrece entre 3 y 15 Megabytes
(Mb) como disponibles para un sitio.
Este espacio es más que suficiente para levantar el
sitio de una escuela o de un docente. Es necesario
recordar que los archivos HTML son más livianos
que los archivos originales.
Uno de los sitios que ofrece una mayor cantidad de
Megas, 15Mb, es la empresa «Yahoo!.Geocities»,
cuya URL es www.geocities.com

Si es miembro,
ingrese aquí

Si no es miembro,
regístrese aquí

Centro Zonal Sur 111

 Regístrese áquí

Complete la ficha de registro con sus datos

personales. Los campos marcados en rojo, son
obligatorios

112 Centro Zonal Sur

Seleccione el tema de su sitio web.

La siguiente pantalla le indicará que su sitio ha sido

creado y le enviaron un e-mail de confirmación

Haga clic aquí

para continuar

Centro Zonal Sur 113

Esta pantalla le permitirá «subir» su archivos al
sitio

Esta es la dirección
URL de su sitio

Para «subir»
sus archivos

Cajas de diálogo
para «subir»
sus archivos

Puede enviarse los archivos uno a uno o bien Una vez completados todos los nombres, hacer clic
un conjunto de archivos de una sola vez. en “Upload Files“ para enviarlos al servidor.

En este último caso, seleccione la cantidad deseada
y luego presione el botón “Mostrar” para que el
sistema refresque la pantalla de ingreso de datos.
Si selecciona 5, entonces aparecerán cincocajas de
diálogo para que envíes los archivos.
Debe escribirse en cada “caja” el nombre del archivo
a enviar o bien presionar el botón “examinar”
(recomendado) para buscarlo en el directorio
respectivo.
Se Verá automáticamente los archivos listados en
el directorio cuando finalice el envío.
Finalmente presionas el botón “Salir”.
Ahora puedes “ver” su sitio Web....digitando la
dirección:
http://www.geocities.com/nombre usuario

114 Centro Zonal Sur