Web educativa

educativa. Actividad

2
La presente actividad tiene como propósito el desarrollo de un
proyecto de Web educativa formativa (Web de asignatura), de
acuerdo al proyecto elaborado, ésta deberá proporcionar un
conjunto de recursos de aprendizajes (apuntes, manuales, etc.),
actividades de aprendizajes y canales de comunicación para
apoyar y lograr los objetivos de aprendizaje de una asignatura.

Consideraciones del Proyecto


1. DESCRIPCIÓN DEL SITIO WEB DE UNA ASIGNATURA.

1.1 Diseño de los contenidos y estructura de inicio.

De acuerdo al propósito que tiene nuestra Web debemos

determinar los contenidos. Para la construcción del Web
docente de la presente actividad se debe considerar los
siguientes contenidos:

 Página principal. Contiene la presentación de la

asignatura y la bienvenida
 Sección de Programación. Presenta la programación de
la asignatura (objetivos, contenidos, metodología, agenda)
 Sección de Recursos. Proporciona un conjunto de
recursos seleccionados o producidos para apoyar el
aprendizaje de la asignatura (videos, lecturas, manuales,
guías, presentaciones, videos, programas, enlaces, etc.)
 Sección de Actividades. Presenta las actividades
programadas para la apropiación de los contenidos, el
desarrollo de habilidades y destrezas (actividades
grupales o individuales, Webquest, etc.)
 Sección de Foro. Enlaza la presentación de un foro, para
efectuar discusiones sobre los contenidos desarrollados
 Sección de Chat. Presenta una sala de chat de la
asignatura para efectuar actividades de socialización y
tutoría sincrónica.

Construcción de la Web de asignatura -1-

  Sección de Comunicaciones. Presenta el directorio de
participantes de la asignatura (docentes, alumnos), y un
formulario de mensajes para el docente.

Fig. 1. Árbol de directorios y archivos

La estructura de las páginas de inicial a construirse deberá contener

cinco tablas, para el rotulo, opciones (menú), barra de estado,
cuerpo de contenidos y pie, como se observa en la siguiente figura.

Rótulo (700x127pix)

Menú (700 x - pix)

Estado (700 x - pix)

Cuerpo (700x500 pix.)

Construcción de la Web de asignatura -2-

 Pie (700x30 pix.)

Fig. 2. Estructura de las páginas (index.htm)

Diseñe los contenidos e ingrese los elementos de la página de inicio

(index.htm), en el caso del rótulo coloque la imagen (logo) del
Centro Educativo y el nombre de la asignatura, en el caso de la
sección de menú incluya una barra de navegación con las
opciones: Inicio, Programación, Recursos, Actividades, Foro, Chat,
Contacto, en la sección estado inserte la secuencia de navegación
u ubicación de la página en el sitio, la sección cuerpo se debe
emplear para presentar los contenidos de la web, finalmente en el
pie considere la información sobre los derechos y diseñadores del
sitio.

TIP. Para mejorar el diseño de la Web de asignatura, realice el

diseño basado entablas para realizar la distribución de los espacios
para los textos, imágenes u otros elementos.

Fig. 3 Diseño de la página principal (index.htm)

1.2 Diseño de los contenidos y estructura de páginas.

Construcción de la Web de asignatura -3-

 Concluido el diseño de la página de principal (inicio.html), elabore
independientemente las páginas de inicio para cada uno de las
opciones asociadas (que se encuentran en las carpetas
construidas), para posteriormente vincularlos (insertar hipervínculo)
con la página de inicio.

a) Sección Programación (programa.html), donde debe incluirse

la información referida a las asignatura, como Objetivos
(competencias, capacidades), (ver Fig.4)

Fig. 4 Diseño de la página de la sección programación

(programa.htm)

Para la construcción de las páginas de las diferentes secciones y

ventanas recomendamos el empleo de plantillas (plantilla.html), para
ser modificados de acuerdo a las características de la asignatura de
cada ventana y no elaborarlos nuevamente, además de dotarles de la
misma estructura. (fig.5)

Construcción de la Web de asignatura -4-

 Fig. 5 Diseño de la página de plantilla (plantilla.htm)

b) Sección Recursos (recursos/index.html), debe incluirse bloques

para presentar la imagen y descripción de los recursos (comprende
un listado de documentos como apuntes, lecturas, manuales, etc.
vinculados a los archivos respectivos, los que pueden ser de diversos
tipos .doc (word), .ppt (PowerPoint), .xls (Excel), .avi (video), . jpg
(imágen), . wav (sonido), etc)) (fig.6), para posteriormente enlazarlos
y presentar en una página nueva cada uno de los recursos. (fig.7)

Construcción de la Web de asignatura -5-

 Fig. 6. Diseño de la página de inicio opción Cursos: Ciencia y
Ambiente (index.htm)

Para enlazar y presentar cada uno de los recursos se debe

construir una página.

Construcción de la Web de asignatura -6-

 Fig. 6 Diseño de la página de presentación de recursos.

c) Sección Actividades (actividades/index.html), se debe construir

un página de enlaces en las que se presentan las actividades (,
Trabajos individuales, WebQuest, etc.), vinculados a sus respectivos
archivos en otras hojas.

Fig. 7 Diseño de la página de Actividades (actividades/index.htm)

La presentación de las actividades debe presentarse en nuevas

páginas que presenten información detallada de las
Construcción de la Web de asignatura -7-
 actividades, incluyendo un formulario para su presentación.
(fig.8)

Fig. 8 Diseño de la página de presentación de actividades

(actividades/actividadx.htm)

d) Sección Foro (foro.html), que va llevar insertado el servicio de

foro externo para el desarrollo de actividades.

Construcción de la Web de asignatura -8-

 Fig. 9. Diseño de la página foro (foro.html)

e) Sección Chat (Chat.html), presenta la sala de chat del código

incrustado.

Fig. 10 Diseño de la página de chat (chat.html)

f) Sección Contactos (contacto.html), presenta una tabla con

listado de los participantes de la asignatura y un formulario para el
envío de mensajes al docente por los alumnos.

Construcción de la Web de asignatura -9-

 Fig. 10 Diseño de la página de Contactos(contacto.html)

Actividad

1. Elabore el diseño y desarrollo de una Webeducativa para una
asignatura con la descripción de los siguientes pasos
(Actividad2_1142.doc):
I. Nombre del Sitio
Construcción de la Web de asignatura - 10 -
 II. Objetivos del sitio
III. Público objetivo
IV. Contenidos
V. Estructura y organización del sitio
5.1 Estructura de directorios y archivos
5.2 Estructura de navegación
VI. Interfaz
6.1 Estructura del sitio
6.2 Estructura de las páginas
6.3 Características de los elementos

2. Empleando una herramienta de creación (Front Page,

Dreamweaver, etc.) construya la Web educativa de acuerdo
al diseño elaborado.

Material del Apoyo


• Modelo de proyecto de una Web educativa (Proyecto_Web.doc)
• Formato para el desarrollo y presentación de la Actividad II
(Actividad2_1142.doc)
• Guía didáctica del curso (GUIA_Web_1142.pdf)
• Macromedia Inc. (2005) Primeros paso con Dreamweaver 8.
San Francisco (Manual Dreamweaver Spanish.pdf )
• Curso de Dreamweaver 8.
(http://www.aulaclic.es/dreamweaver8/index.htm)
• Lora V. (n.d. )Un sitio en Internet. Argentina
(http://www.monografias.com/trabajos5/laweb/laweb.shtml)
• Modelo desarrollado de la Web de curso
(http://www.velaldo.com/WebTIC/)

Construcción de la Web de asignatura - 11 -

 Guía Nº 1. Configuración del SitioWeb

1. Generación del Sitio Web.

Se debe definir una carpeta local (disco duro o usb) para cada Sitio
Web que se genere, para organizar las carpetas y archivos del
proyecto.

Genere en su computador o USB desde el explorador Windows una

carpeta de archivos denominado WebCurso.

Ahora para crear el Sitio Web de la asignatura, debemos seguir los

siguientes procedimientos:

1. Inicie Dreamweaver y seleccione el menú Sitio > Administrar

sitios, aparece la caja Administrar sitios.

2. Haga clic en el botón Nuevo…, y selecciones sitio.

3. En la ventana del asistente en el modo Básicas realizamos la

definición del sitio, ingresamos la información referida al
nombre, consigne WebCurso, luego pulse en el botón
Siguiente.

Construcción de la Web de asignatura - 12 -

 4. En la ventana siguiente (parte 2), deje seleccionada la opción
No, no deseo utilizar una tecnología de servidor, y pulse
el botón Siguiente.

5. En la ventana siguiente (parte 3), seleccione en el computador

o USB la ubicación de la carpeta creada WebCurso. (Al
ubicarlo en la ventana elegir carpeta, pulse en el botón abrir,
luego seleccionar) y pulse el botón Siguiente.

Construcción de la Web de asignatura - 13 -

 6. En la siguiente ventana de conexión al servidor, seleccione la
opción Ninguno en ¿Cómo conecta con su servidor remoto?,
luego pulse el botón Siguiente.

7. Finalice la definición del sitio en la ventana pulsando sobre el

botón Completado.

8. Cierre la ventana Administrar sitios, pulsando el botón Listo.

Note que en el panel de Archivos, aparece la carpeta raíz local
del sitio creado. Sitio - WebCurso

Construcción de la Web de asignatura - 14 -

 2. Generar estructura de carpetas y archivos del sitio.

De acuerdo al proyecto vamos a iniciar creando

primeramente las carpetas dentro del sitio. Para ello seguimos los
siguientes pasos:
1. Haga clic sobre el nombre del sitio. Sitio-WebCurso debe
quedar seleccionado (color celeste), ahora haga clic con el
botón derecho del mouse para abrir el menú contextual,
seleccione la opción Nueva carpeta.

2. Inserte el nombre de la carpeta, (si desea modificar pulse la

tecla F2), asigne el nombre de imagenes (minúscula sin
tildes)

3. Nuevamente seleccione la raíz del sitio Sitio-WebCurso, y

cree la carpeta recursos luego el de actividades.

Concluido este proceso, iniciamos la creación de los archivos web:

chat.htnl, contacto.html, foro.html, index.html, plantilla.html,
programa.html (en la raíz del sitio, seguimos el siguiente proceso:
1. Seleccionamos la raíz de la carpeta del sitio, pulsamos el
botón derecho del mouse para abrir el menú contextual, y
seleccionamos Nuevo archivo.

Construcción de la Web de asignatura - 15 -

 2. Reemplace el nombre del archivo. Tenga cuidado y verifique
que estos queden con la extensión .html (index.html).
Continué con el mismo proceso para generar todos los
archivos requeridos para la raíz del sitio.

Ahora, vamos a crear las carpetas lecturas, manuales, ppt, videos

y el archivo index.html dentro de la carpeta recursos
1. Crear carpetas. Seleccione la carpeta haciendo clic con el
botón izquierdo la carpeta recursos, y luego haga clic el
botón derecho para abrir el menú contextual y seleccionar
Nueva carpeta, inserte el nombre de las carpetas. Repita el
proceso para crear todas las carpetas requeridas.

2. Crear archivo. Seleccione la carpeta haciendo clic con el

botón izquierdo la carpeta recursos, y luego haga clic el
botón derecho para abrir el menú contextual y seleccionar
Nuevo archivo, inserte el nombre del archivo index.html

Construcción de la Web de asignatura - 16 -

Siguiendo los procesos anteriores, genere archivos en las
siguientes carpetas:

actividades: - actividad1.html
- actividad2.html
- actividad3.html
- actividad4.html
- index.html

recursos/lecturas: - lectura1.html
- lectura2.html

recursos/manuales: - namual1.html
- manual2.html
- manual3.html
- manual4.html

recursos/ppt: - ppt1.html
- ppt2.html

recursos/videos: - video1.html
- video2.html

La estructura de carpetas y archivos creada debe ser la siguiente:

Construcción de la Web de asignatura - 17 -

 La carpeta imagenes es un contenedor de archivos gráficos
(jpg, gif, png, swf) que se emplean en las diferentes páginas del
sitio, ahí deben guardarse los archivos para su empleo.

Copie todos los archivos gráficos de la carpeta imagenes

del proyecto WebCurso-I, a la carpeta imagenes del proyecto
WebCurso que se está trabajando.

Construcción de la Web de asignatura - 18 -