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