Desarrollo de una Web de asignatura

Web educativa.Web educativa.

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.

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

Construcción de la Web de asignatura - 1 -

ActividadActividad

22

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.)

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.

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)


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)


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.


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


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.


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.


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 SitioII. Objetivos del sitio

III. Público objetivoIV. ContenidosV. Estructura y organización del sitio

5.1 Estructura de directorios y archivos5.2 Estructura de navegación

VI. Interfaz6.1 Estructura del sitio6.2 Estructura de las páginas6.3Caracterí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/)


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.


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.


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


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.


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


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:


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.


Documents

Desarrollo de una Web de asignatura