Diseño de Páginas Web Educativas

Prof. Antonio L. Delgado Pérez

Diseñador Instruccional
 Introducción
Este tutorial trata sobre el diseño de páginas web
educativas utilizando Google Sites. La idea de su
diseño responde a una transformación social que ha
abierto un espacio para gestionar el conocimiento,
colaborar socialmente y llevar a cabo reflexiones
profundas sobre los procesos de aprendizaje que se
realizan en las diversas experiencias personales,
profesionales, académicas y socio-culturales.
 Objetivos
• Definir el concepto: Página Web Educativa.
• Presentar las ventajas y limitaciones de su
diseño en el contexto académico.
• Mostrar el proceso de diseño.
• Presentar las partes del contenido.
• Demostrar una página web real.
• Diseñar una página web educativa utilizando
Google Sites.
 Página Web Educativa
• Sitio Web cuyo objetivo es facilitar el aprendizaje.
• Ofrece información y proporciona recursos
didácticos que promueven la comunicación entre
los sujetos de la educación.
• Son recursos educativos abiertos, ubicuos e
inclusivos.
• Accesibles desde diferentes recursos:
Computadoras, Móviles y Tabletas.
 Ventajas
• Accesible 24/7.
• Es ubicua.
• Entorno interactivo para la gestión del
conocimiento.
• Promueve el desarrollo de niveles cognitivos de
orden superior.
• Crea conexiones entre las experiencias de
aprendizaje y la vida real.
 Ventajas
• Promueve el aprendizaje significativo.
• Crea un camino de evaluación centralizado y bajo
el control del aprendiz.
• Promueve la comunicación fuera de los límites
del salón.
• Familiarización con el uso de nuevas tecnologías.
• Accede a los materiales de la clase desde
cualquier computadora conectada a la red.
 Ventajas
• Facilita la adquisición de conocimientos y el
desarrollo de destrezas y habilidades en la
búsqueda, clasificación y organización lógica de
la información.
• Fomenta un aprendizaje activo y dinámico.
• Promueve el intercambio de información y la
colaboración social.
• Aumenta la interacción entre los participantes.
 Limitaciones
• Se requiere una cuenta personal en Gmail.
• Destrezas y habilidades tecnológicas:
Alfabetismo digital.
• La estructura de diseño es limitada.
• Sujeto a la disponibilidad tecnológica con
conexión a la web.
• Actualizaciones constantes al sistema.
• Sujeto a las condiciones de uso de Google.
 Fases Proceso de diseño
Análisis • Piensa en las secciones de la página educativaa crear, según las
necesidades, intereses y preferencias de los lectores.
• Desarrolla un perfil de la comunidad.
Diseño • Establece los objetivos a perseguir.
• Diseña el tipo de contenido a incluir en cada una de las secciones.

Desarrollo • Crea y configura tu entorno digital con tu cuenta de Gmail.

• Agrega información, lecturas, imágenes, vídeos, hipervínculos en
cada sección creada.
Implantación • Comparte tu página con colegas y estudiantes.
• Edita contenidos, corrige errores, actualiza la información y
modifica lo que sea necesario.
Evaluación • Conoce el sentir de tus lectores para saber si cumples con los
objetivos.
• Determina si ya está lista para publicarla a la ciberaudiencia.
 Ejemplo

http://sites.google.com/site/edumorfosis
1. Accede a Google Site con tu cuenta de Google.

http://sites.google.com

Nombre uauario Gmail

Contraseña Gmail
2. Oprime el botón: Crear un sitio nuevo.
3. Selecciona la plantilla
4. Escribe el nombre del
sitio.
5. La dirección URL
quedará ubicada. Tu nombre y apellidos

edumorfosis

Utiliza un nombre de marca o

combinación de nombre y números.
Asegúrate de que sea corto y fácil de
memorizar. Esa será tu dirección web
para acceder a la página educativa

begin
6. Choose a theme: Selecciona un tema de plantilla
haciendo un click sobre la imagen.
7. Moore Options:
Describe brevemente
el sitio Web.
8. Selecciona el modo de
publicación.
9. Desactiva: Contenido
de adultos.
10. Escribe el código.
11. Oprime: Create site.
12. User Settings: Cambia las configuraciones
del idioma y zona horaria

13. Oprime: Save changes

14. Tu página inicial ya está lista para trabajar.
Oprime: Editar Página para comenzar a escribir.
15. La pantalla cambiará al editor HTML. Al terminar
de escribir, oprime Guardar.

Escribe un título

Escribe el cuerpo del mensaje

16. Oprime Insertar para
agregar imágenes,
enlaces, líneas,
calendarios,
documentos, fotos,
presentaciones,
hojas de cálculo,
formularios, vídeos y
otras.
17. Oprime Formato para ajustar
el texto a diferentes
estructuras de redacción.
18. Oprime Tabla para insertar
tablas completas, filas, y
columnas.

19. Oprime Diseño para ajustar la

página en una o dos columnas.
Al terminar de redactar oprime
Guardar.
20. Oprime Tabla para insertar
tablas completas, filas, y columnas.
21. Oprime para abrir una segunda página de
trabajo. Crea las páginas que sean necesarias.

Escribe el nombre de la
página nueva
22. Selecciona la plantilla de trabajo, escribe el
nombre de la página y presiona:

Procesador de palabras

Bitácora: anuncios, noticias y artículos

Repositorio de documentos: .doc/.ppt/.pdf o

hipervínculos
Gestor de proyectos o actividades
colaborativas
23. La página web es un editor de texto en HTML
similar a MS Word.

En este layout escribe toda la información que dea necesaria. No tiene límite.
Puedes agregar hipervínculos, gráficos, fotos digitales y vídeos de YouTube. Al
terminar, oprime:
24. Esta estructura se utiliza para agregar documentos en
varios formatos: .doc, .docx, .ppt, .pptx, .pps y .pdf
25. Organízalos en carpetas desde:

Si usas Slideshare para alojar tus proyectos digitales,

puedes añadirlos desde este botón
26. Utilizado para
descargar archivos
desde tu
computadora o
servicios de la
nube.
27. Utilizado para
vincular un archivo Pega el URL del archivo alojado en Slideshare

en la nube. Se Escribe el título del archivo a compartir

recomienda Redacta una breve descripción del documento o presentación para

subirlos desde que los lectores sepan de qué trata el mismo.

Slideshare
28. Pulsa en: para redactar un artículo,
anuncio, evento, editorial o reflexión:

Aparecerá la ventana de procesador de palabras

HTML en la que redactarás tu anuncio, noticia o
artículo.
29. Selecciona un formato de las plantillas de listas o
crea una personalizada:
30. Trabaja sobre la página creada desde el editor
HTML. Oprime el botón:
Utiliza las herramientas de redacción

Al terminar de escribir, oprime GUARDAR

Escribe el título de la página. Éste será el link que aparecerán el bloque de Navigation (secciones)

Área de redacción
 1
31. Una vez creadas todas las
páginas del portafolio,
cambia el orden de la
barra de navagación
lateral:

2
 32. Oprime debajo de Sidebar (Navegación)
para Editar elemento de la barra lateral.

1. Sustituye el título: Navegación por: Enlaces

2. Activa para mostrar título

3. Desactivar la organización automática

4. Añade las páginas creadas

5. Desactiva el Sitemap

7. Cierra la pantalla
6. Oprime Aceptar el terminar la edición
de edición
33. Muestra el Historial de
Revisiones. Aquí puedes
llevar a cabo configuraciones
importantes de tu sitio web.
Retorna a la página web creada

Muestra todas las actualizaciones realizadas en tu portafolio

Presenta los cambios realizados en cada página creada

Verás un listado con todos los archivos adjuntos

Descripcioń de los layouts del sistema, según descritos en el paso #26

Accedes al Script Editor para configurar los comandos de aplicaciones
para los desarrolladores de Google

Lista de los elementos que han sido eliminados

Configuración general del sitio de Google creado

Modifica el acceso a tu sitio web: Público en la web, Usuario con Enlace o
Privado
Permiso para que Google haga promociones en tu página web
Muestra la direción predeterminada de tu página web

Configura la estructura completa, cabecera, área de contenido, gadgets

y navegación horizontal
34. Configuración de Temas, Colores y fuentes
5

3
2
4

1
35. Tu págima web se verá prácticamente terminada.
Puedes añadirle más secciones, elementos (bloques) y
editar el contenido cuando sea necesario. Comparte
el URL con la comunidad educativa; permite que la
comunidad de usuarios acceda tu entorno de
aprendizaje.

Si deseas activar el servicio de analítica de accesos,

utiliza el servicio Google Analytics con tu cuenta
personal de Gmail.
 Fin del Tutorial
Si deseas compartir algún comentario,
sugerencia u aportación acerca de este tutorial,
escribe a:

antonio.delgado.perez@gmail.com

¡Gracias por tu atención!