Diseño de Páginas Web EducativasDiseño de Páginas Web Educativas

Prof. Antonio L. Delgado PérezProf. Antonio L. Delgado Pérez

Diseñador InstruccionalDiseñador Instruccional

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.

Introducción

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

Objetivos

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.

• 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

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ñoAnálisisAná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ñoDiseño • Establece los objetivos a perseguir. • Diseña el tipo de contenido a incluir en cada una de las secciones.

DesarrolloDesarrollo • 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ónImplantación • Comparte tu página con colegas y estudiantes. • Edita contenidos, corrige errores, actualiza la información y modifica lo que sea necesario.

EvaluaciónEvaluación • Conoce el sentir de tus lectores para saber si cumples con los objetivos. • Determina si ya está lista para publicarla a la ciberaudiencia.

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

Ejemplo

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

begin

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

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

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:

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

Utiliza las herramientas de redacción

Área de redacción

Al terminar de escribir, oprime GUARDAR

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

1

2

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

1. Sustituye el título: Navegación por: Enlaces2. 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

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 creadoModifica el acceso a tu sitio web: Público en la web, Usuario con Enlace o PrivadoPermiso 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

1

23

4

5

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.

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!¡Gracias por tu atención!

Fin del Tutorial