Taller práctico para la Jornada A+A+A en el Residencial de Maestros de Colegios Privados, a cargo de la firma Learning Alliances. El mismo estuvo dirigido al diseño de páginas web educativas. Se utilizó la herramienta Google Sites como recurso para diseñar entornos educativos divitales.

2. Diseño de Páginas Web Educativas
Prof. Antonio L. Delgado Pérez
Diseñador Instruccional

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

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

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

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

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

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

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

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

11. Ejemplo
http://sites.google.com/site/edumorfosis

12. 1. Accede a Google Site con tu cuenta de Google.
http://sites.google.com
Nombre uauario Gmail
Contraseña Gmail

13. 2. Oprime el botón: Crear un sitio nuevo.

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

15. 6. Choose a theme: Selecciona un tema de plantilla
haciendo un click sobre la imagen.

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

17. 12. User Settings: Cambia las configuraciones
del idioma y zona horaria
13. Oprime: Save changes

18. 14. Tu página inicial ya está lista para trabajar.
Oprime: Editar Página para comenzar a escribir.

19. 15. La pantalla cambiará al editor HTML. Al terminar
de escribir, oprime Guardar.
Escribe un título
Escribe el cuerpo del mensaje

20. 16. Oprime Insertar para
agregar imágenes,
enlaces, líneas,
calendarios,
documentos, fotos,
presentaciones,
hojas de cálculo,
formularios, vídeos y
otras.

21. 17. Oprime Formato para ajustar
el texto a diferentes
estructuras de redacción.

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

23. 20. Oprime Tabla para insertar
tablas completas, filas, y columnas.

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

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

26. 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:

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

28. 26. Utilizado para
descargar archivos
desde tu
computadora o
servicios de la
nube.

29. 27. Utilizado para
vincular un archivo
en la nube. Se
recomienda
subirlos desde
Slideshare
Pega el URL del archivo alojado en Slideshare
Escribe el título del archivo a compartir
Redacta una breve descripción del documento o presentación para
que los lectores sepan de qué trata el mismo.

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

31. 29. Selecciona un formato de las plantillas de listas o
crea una personalizada:

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

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

34. 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
6. Oprime Aceptar el terminar la edición
7. Cierra la pantalla
de edición

35. 33. Muestra el Historial de
Revisiones. Aquí puedes
llevar a cabo configuraciones
importantes de tu sitio web.

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

37. 34. Configuración de Temas, Colores y fuentes
5
2
3
4
1

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

39. 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!