Actividad

2
W We eb be ed du uc ca at tiiv va a. .
La presente actividad tiene como propsito 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 comunicacin para apoyar y lograr los objetivos de aprendizaje de una asignatura.

Consideraciones del Proyecto

1. DESCRIPCIN DEL SITIO WEB DE UNA ASIGNATURA. 1.1 Diseo de los contenidos y estructura de inicio.

De acuerdo al propsito que tiene nuestra Web debemos determinar los contenidos. Para la construccin del Web docente de la presente actividad se debe considerar los siguientes contenidos: Pgina principal. Contiene la presentacin de la asignatura y la bienvenida Seccin de Programacin. Presenta la programacin de la asignatura (objetivos, contenidos, metodologa, agenda) Seccin de Recursos. Proporciona un conjunto de recursos seleccionados o producidos para apoyar el aprendizaje de la asignatura (videos, lecturas, manuales, guas, presentaciones, videos, programas, enlaces, etc.) Seccin de Actividades. Presenta las actividades programadas para la apropiacin de los contenidos, el desarrollo de habilidades y destrezas (actividades grupales o individuales, Webquest, etc.) Seccin de Foro. Enlaza la presentacin de un foro, para efectuar discusiones sobre los contenidos desarrollados Seccin de Chat. Presenta una sala de chat de la asignatura para efectuar actividades de socializacin y tutora sincrnica. Seccin de Comunicaciones. Presenta el directorio de participantes de la asignatura (docentes, alumnos), y un formulario de mensajes para el docente.

Construccin de la Web de asignatura

-1-

Fig. 1. rbol de directorios y archivos

La estructura de las pginas 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. Rtulo (700x127pix) Men (700 x - pix) Estado (700 x - pix) Cuerpo (700x500 pix.)

Pie (700x30 pix.)

Fig. 2. Estructura de las pginas (index.htm)

Disee los contenidos e ingrese los elementos de la pgina de inicio (index.htm), en el caso del rtulo coloque la imagen (logo) del Centro Educativo y el nombre de la asignatura, en el caso de la seccin de men incluya una barra de navegacin con las opciones: Inicio,
Construccin de la Web de asignatura
-2-

Programacin, Recursos, Actividades, Foro, Chat, Contacto, en la seccin estado inserte la secuencia de navegacin u ubicacin de la pgina en el sitio, la seccin cuerpo se debe emplear para presentar los contenidos de la web, finalmente en el pie considere la informacin sobre los derechos y diseadores del sitio. TIP. Para mejorar el diseo de la Web de asignatura, realice el diseo basado entablas para realizar la distribucin de los espacios para los textos, imgenes u otros elementos.

Fig. 3 Diseo de la pgina principal (index.htm)

1.2 Diseo de los contenidos y estructura de pginas.

Concluido el diseo de la pgina de principal (inicio.html), elabore independientemente las pginas de inicio para cada uno de las opciones asociadas (que se encuentran en las carpetas construidas), para posteriormente vincularlos (insertar hipervnculo) con la pgina de inicio. a) Seccin Programacin (programa.html), donde debe incluirse la informacin referida a las asignatura, como Objetivos (competencias, capacidades), (ver Fig.4)

Construccin de la Web de asignatura

-3-

Fig. 4 Diseo de la pgina de la seccin programacin (programa.htm)

Para la construccin de las pginas de las diferentes secciones y ventanas recomendamos el empleo de plantillas (plantilla.html), para ser modificados de acuerdo a las caractersticas de la asignatura de cada ventana y no elaborarlos nuevamente, adems de dotarles de la misma estructura. (fig.5)

Fig. 5 Diseo de la pgina de plantilla (plantilla.htm)

Construccin de la Web de asignatura
-4-

b) Seccin Recursos (recursos/index.html), debe incluirse bloques para presentar la imagen y descripcin 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 (imgen), . wav (sonido), etc)) (fig.6), para posteriormente enlazarlos y presentar en una pgina nueva cada uno de los recursos. (fig.7)

Fig. 6. Diseo de la pgina de inicio opcin Cursos: Ciencia y Ambiente (index.htm)

Para enlazar y presentar cada uno de los recursos se debe construir una pgina.

Construccin de la Web de asignatura

-5-

Fig. 6 Diseo de la pgina de presentacin de recursos.

c) Seccin Actividades (actividades/index.html), se debe construir un pgina de enlaces en las que se presentan las actividades (, Trabajos individuales, WebQuest, etc.), vinculados a sus respectivos archivos en otras hojas.

Fig. 7 Diseo de la pgina de Actividades (actividades/index.htm)

La presentacin de las actividades debe presentarse en nuevas pginas que presenten informacin detallada de las actividades, incluyendo un formulario para su presentacin. (fig.8)
Construccin de la Web de asignatura
-6-

Fig. 8 Diseo de la pgina de presentacin de actividades (actividades/actividadx.htm)

d) Seccin Foro (foro.html), que va llevar insertado el servicio de foro externo para el desarrollo de actividades.

Construccin de la Web de asignatura

-7-

Fig. 9. Diseo de la pgina foro (foro.html)

e) Seccin Chat (Chat.html), presenta la sala de chat del cdigo incrustado.

Fig. 10 Diseo de la pgina de chat (chat.html)

f) Seccin Contactos (contacto.html), presenta una tabla con listado de los participantes de la asignatura y un formulario para el envo de mensajes al docente por los alumnos.

Construccin de la Web de asignatura

-8-

Fig. 10 Diseo de la pgina de Contactos(contacto.html)

Actividad
1. Elabore el diseo y desarrollo de una Webeducativa para una asignatura con la descripcin de los siguientes pasos (Actividad2_1142.doc): I. Nombre del Sitio II. Objetivos del sitio
Construccin de la Web de asignatura
-9-

III. IV. V.

VI.

Pblico objetivo Contenidos Estructura y organizacin del sitio 5.1 Estructura de directorios y archivos 5.2 Estructura de navegacin Interfaz 6.1 Estructura del sitio 6.2 Estructura de las pginas 6.3 Caractersticas de los elementos

2. Empleando una herramienta de creacin (Front Page, Dreamweaver, etc.) construya la Web educativa de acuerdo al diseo elaborado.

Material del Apoyo

Modelo de proyecto de una Web educativa (Proyecto_Web.doc) Formato para el desarrollo y presentacin de la Actividad II (Actividad2_1142.doc) Gua didctica 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/)

Construccin de la Web de asignatura

- 10 -

 Gua N 1.

Configuracin del SitioWeb

1. Generacin 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 botn Nuevo, y selecciones sitio. 3. En la ventana del asistente en el modo Bsicas realizamos la definicin del sitio, ingresamos la informacin referida al nombre, consigne WebCurso, luego pulse en el botn Siguiente.

Construccin de la Web de asignatura

- 11 -

4. En la ventana siguiente (parte 2), deje seleccionada la opcin No, no deseo utilizar una tecnologa de servidor, y pulse el botn Siguiente.

5. En la ventana siguiente (parte 3), seleccione en el computador o USB la ubicacin de la carpeta creada WebCurso. (Al ubicarlo en la ventana elegir carpeta, pulse en el botn abrir, luego seleccionar) y pulse el botn Siguiente.

6. En la siguiente ventana de conexin al servidor, seleccione la opcin Ninguno en Cmo conecta con su servidor remoto?, luego pulse el botn Siguiente.

Construccin de la Web de asignatura

- 12 -

7. Finalice la definicin del sitio en la ventana pulsando sobre el botn Completado.

8. Cierre la ventana Administrar sitios, pulsando el botn Listo. Note que en el panel de Archivos, aparece la carpeta raz local del sitio creado. Sitio - WebCurso

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
Construccin de la Web de asignatura
- 13 -

(color celeste), ahora haga clic con el botn derecho del mouse para abrir el men contextual, seleccione la opcin Nueva carpeta.

2. Inserte el nombre de la carpeta, (si desea modificar pulse la tecla F2), asigne el nombre de imagenes (minscula sin tildes)

3. Nuevamente seleccione la raz del sitio Sitio-WebCurso, y cree la carpeta recursos luego el de actividades.

Concluido este proceso, iniciamos la creacin de los archivos web: chat.htnl, contacto.html, foro.html, index.html, plantilla.html, programa.html (en la raz del sitio, seguimos el siguiente proceso: 1. Seleccionamos la raz de la carpeta del sitio, pulsamos el botn derecho del mouse para abrir el men contextual, y seleccionamos Nuevo archivo.

2. Reemplace el nombre del archivo. Tenga cuidado y verifique que estos queden con la extensin .html (index.html). Continu con el mismo proceso para generar todos los archivos requeridos para la raz del sitio.

Construccin de la Web de asignatura

- 14 -

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 botn izquierdo la carpeta recursos, y luego haga clic el botn 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 botn izquierdo la carpeta recursos, y luego haga clic el botn derecho para abrir el men contextual y seleccionar Nuevo archivo, inserte el nombre del archivo index.html

Siguiendo los procesos anteriores, genere archivos en las siguientes carpetas: actividades: - actividad1.html - actividad2.html - actividad3.html - actividad4.html
Construccin de la Web de asignatura
- 15 -

- index.html recursos/lecturas: - lectura1.html - lectura2.html recursos/manuales: - namual1.html - manual2.html - manual3.html - manual4.html recursos/ppt: recursos/videos: - ppt1.html - ppt2.html - video1.html - video2.html

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

Construccin de la Web de asignatura

- 16 -

La carpeta imagenes es un contenedor de archivos grficos (jpg, gif, png, swf) que se emplean en las diferentes pginas del sitio, ah deben guardarse los archivos para su empleo. Copie todos los archivos grficos de la carpeta imagenes del proyecto WebCurso-I, a la carpeta imagenes del proyecto WebCurso que se est trabajando.

Construccin de la Web de asignatura

- 17 -