Este documento proporciona información sobre ambientes virtuales de aprendizaje y tecnologías web para su diseño. Explica herramientas como Moodle, blogs, wikis y webquests que pueden usarse para crear entornos de aprendizaje en línea y ofrece consejos sobre el diseño de páginas y sitios web educativos.

1. Ambientes Virtuales de Aprendizaje M.C. Juan Carlos Olivares Rojas S 8-11 Salón 201

2. Datos de Contacto E-mail: [email_address] MSN: [email_address] Web: http://antares.itmorelia.edu.mx/~jcolivar Asesorías: Lunes a viernes de 10-12 cubo 33 (pasillo de en medio) Edificio I, Departamento de Sistemas y Computación, Instituto Tecnológico de Morelia.

3. Agenda Introducción (contexto actual) Ambientes de Aprendizaje AVA en Tecnologías Web Diseño de páginas Web

4. Evaluación Construcción de un ambiente virtual de aprendizaje utilizando tecnologías Web. El curso sirve de “Freidora”. Llegamos crudos, poco cocidos o muy cocidos y salimos fritos. Se aplicará la metodología “Bambi” .

5. Introducción Las Tecnologías de la Información y del Conocimiento han revolucionado todas las áreas del quehacer humano, y la educación no ha sido la excepción. Proyecto Millenium de las Naciones Unidas De la manufactura a la mentefactura

6. Introducción ¿Por qué no aprenden los alumnos universitarios lo que se les quiere enseñar? Problemas personales Excesivo número de alumnos Poco tiempo Recursos Métodos de estudio Desinterés Recargo de actividades

7. Función de un Profesor Docencia Investigación Extensión Modelo Constructivista basado en Competencias. La tecnología es un medio, no es el fin.

8. Introducción Brecha Digital Educación: conocimiento, habilidades, actitudes y valores. Repetición: favorece un aprendizaje corto Institución Tecnológica: Ciencia y Tecnología Las TICs competencia bási ca: para la vida

9. Inteligencias Múltiples Lingüística Lógica-Matemática Musical Espacial Cinestesico-corporal Interpersonal Intrapersonal Naturalista

10. Tecnología Educativa Tecnología Educativa: TICs + Didáctica La tecnofilia o el “espejismo tecnológico” : cualquier incorporación de tecnología en la enseñanza basta para producir cambios favorables. La tecnofobia o la desestimación de la dimensión técnica de la enseñanza.

11. Era Digital Sociedad del Conocimiento Generación N (NET, Web)

12. Era Digital La Tecnología debe de adaptarse a las situaciones pedagógicas, la didáctica y al contexto social

13. Curriculum Ubicación de las TIC en el curriculum Características del grupo de Alumnos Objetivos y Metas Implementación Evaluación Estrategias Métodos Técnicas Medios

14. Eduación a Distancia E-Learning B-Learning El docente crea ambientes de aprendizaje

15. Innovación Educativa Debe ser regla de oro para los que enseñan que todo se presente a cuantos sentidos sea posible El docente debe de conocer más de su área que de TICs. Innovación Educativa : el docente aplica nuevos métodos, técnicas y medios con el fin de mejorar el aprendizaje.

16. Nuevos Estudiantes

17. Cambios Educativos

18. Habilidades para el Siglo XXI

19. Nuevas formas de trabajo

20. Nuevo Tipo de Escuelas

21. Uso de TICs en todo Copia rápida del pizarrón. Solución: utilizar fotografías

22. Uso de TICs en todo Fotocopiado de algún material impreso como un libro.

23. Uso de TICs en todo

24. Sociedad del Conocimiento El problema actualmente no es tener la información, sino encontrarla. El futuro será de los que sepan buscar la información

25. Problemas de la Tecnología 85% de los usuarios de web utilizan los buscadores para encontrar información 80% se frustan al no encontrar lo que buscan Señor, esto es una biblioteca, si quiere libros vaya a una librería

26. Importancia de la Internet

27. Objetos de Aprendizaje Los docentes debemos de crear”objetos de aprendizaje” usndo TICs . Un objeto de aprendizaje es un recurso didáctico en formato digital , reusable en diversos contextos, puede combinarse con otros para formar nuevos bloques. Está integrado por dos o más elementos ( texto, gráficos, audio, video, imágenes, ejercicios …) articulados para generar competencias en quién los utiliza.

28. Ambientes “Virtuales” Más que ambientes virtuales (modalidad a distancia, presencial o b-learning) es el uso de TICs para desarrollar ambientes de aprendizaje que ayuden a los alumnos. Aplicación informática diseñada para facilitar la comunicación pedagógica entre los participantes en un proceso educativo.

29. AVA = Otro Modelo Pedagógico El AVA está concebido para el aprendizaje. El alumno no es receptor pasivo. El aprendizaje es algo que el alumno elabora y no algo que el alumno recibe (la “enseñanza”). No se aprende todo, ni sólo, lo que se enseña. El Modelo Pedagógico es el Constructivismo Social

30. Consideraciones TIC´s no virtualizan la Educación TIC´s no implican Educación a Distancia AVA no omite práctica docente AVA no implica disminución de costos Aula Virtual es diferente a Sala de tutoría

31. Multimedia La retención de información por vía auditiva (radio) retiene un 20%, por vía audiovisual (tv) un 40%. La información que se adquiere vía audiovisual y con la cual es posible interactuar (como es el caso de Multimedia) se logra retener un 75%. Multimedia es, por encima de cualquier otra cosa que se pueda decir sobre él "la herramienta de comunicación más poderosa que existe”.

32. ¿Qué es una página Web? Archivo de (hiper)texto Indica al navegador qué y cómo presentar la información (hipermedia) Texto Colores, imágenes, ... Enlaces Codificado en lenguaje HTML

33. Páginas Web

34. Elementos de una Página Web Tabla / Herramientas de navegación Título Dirección(URL) Banner Título Pie de página / Derechos de autor Enlaces con gráficos Contenido Herramienta de búsqueda Herramienta de Navegación Marcos Enlaces

35. ¿Cómo crear páginas Web? Editor de texto (Notepad, Wordpad) Aplicación compatible con HTML (Word, PowerPoint) Editor de páginas Web (Composer) Gestor de Webs (FrontPage, DreamWeaver)

36. El lenguaje HTML Etiquetas < center > Inicio de etiqueta ................ Elementos a los que afecta </ center > Cierre de etiqueta Atributos < table border= &quot;0&quot; width= &quot;80%&quot; ... > ............. </ table >

37. Estructura de un documento HTML < HTML > < HEAD > < TITLE > Título </ TITLE > </ HEAD > < BODY > Texto del documento, Gráficos, Enlaces, ... </ BODY > </ HTML >

38. Direcciones URL < A HREF = “http://www.upv.es” > Universidad Politécnica de Valencia </ A > <A HREF = “mailto:jlhueso@mat.upv.es?tema” >

39. Inclusión de imágenes Enlace a la imagen < IMG SRC = “imagen.gif” ALT = “Texto” > </ IMG > La imagen como enlace < A HREF = “dirección de destino” > < IMG SRC = “imagen.gif” > </ IMG > </ A>

40. Colores en una página Texto normal < BODY TEXT = “black” > Texto del enlace < BODY LINK = “blue” > Enlace visitado < BODY VLINK = “#rrggbb” > Enlace activo (en descarga) < BODY ALINK = “#rrggbb” >

41. Fondo de la página Color <BODY BGCOLOR = “white” > Imagen <BODY BACKGROUND = “imagen.gif” >

42. Sitio Web Un sitio Web puede ser visto como una carpeta de la cual se tiene un documento raíz del cual dependen otros elementos. Este contenido puede ejecutarse de manera local o en un servidor.

43. Estructura de un Sitio Web Estética/ Diseño Fidelidad Utilidad Visibilidad ¿Qué puedo hacer? ¿Cómo lo hago? ¿Dónde estoy? Buscabilidad ¿Para qué me sirve? ¿Puedo ver el sitio? ¿Cómo llego?

44. Diseño de una Web Educativa La web tiene que tener una estructura lógica. Tiene que enlazar ideas (hiperenlaces). La web debe potenciar el aprendizaje significativo y activo. La web debe ser un medio para ser explorado.

45. Diseño de una Web Educativa La web debe ser algo dinámico y cambiante. Los objetivos deben de ser claramente explicados en la página de inicio. Resumen introductorio. Mapa de navegación. Contenidos bien estructurados.

46. Diseño de una Web Educativa No es conveniente repetir contenidos. Datos de referencia como el correo del autor y la fecha de la última actualización. Se debe cuidar mucho la “usabilidad” de la página. No utilizar tecnología excesivamente puntera.

47. Lectura en la Web Si bien es cierto que un documento Web es una página con hipertexto, ésta presenta sus características especiales: Los usuarios no leen, “escanean” las páginas. El mejor texto para la web es el periodístico clásico: encabezado y cuerpo. Debe ser corto y directo.

48. Lectura en la Web Destaque palabras clave. Incluya subtítulos informativos. Use listas con puntos o viñetas. Desarrolle una idea por párrafo. Reduzca a la mitad o menos el numero de palabras usadas en texto convencional.

49. Lectura en la Web La Web es “user-driven”: la gente quiere moverse, usar el mouse. Web 4 4 3 2 1 Jerarquía visual

50. Diseño Web Diagramación: Leer un texto de ancho moderado Texto en tabla autoajustable a las dimensiones del browser Color de la fuente-fondo Polaridad negativa y positiva Fondos gráficos: Evitar su uso Buscar símil con la impresión TEXTO TEXTO

51. Consejos para mejorar la Web Evite los códigos HTML que no sean estándar (nuevos plug-ins, por ejemplo). El tiempo de respuesta es más importante que un diseño atractivo (8 segundos promedio por página). Evite usar vínculos (links) hacia afuera de su sitio

52. Consejos para mejorar la Web No use marcos (frames). Cuide la legibilidad de los textos: alto contraste, fuentes sans serif (Arial, Verdana o Tahoma), no use todo en mayúsculas, ni texto intermitente o en movimiento. Trozos de audio y video no deben superar los 60 segundos.

53. Test para un buen Sitio Web ¿Comunica de forma inmediata el objetivo del sitio a los usuarios? ¿El usuario está informado constantemente acerca de su ubicación? ¿El sitio se adapta al mundo de sus usuarios, su lenguaje y sus conocimientos?

54. Test para un buen Sitio Web ¿El usuario posee el control sobre lo que pasa en el sitio? ¿El sitio es consistente internamente y respeta estándares externos? ¿El diseño ayuda a prevenir posibles errores? ¿La página facilita y optimiza el acceso a los usuarios?

55. Test para un buen Sitio Web ¿Hay información irrelevante? ¿La navegación es recordada más que redescubierta? ¿El usuario recibe ayuda cuando lo necesita?

56. AVA con Tecnologías Web Existen varias formas de poder explotar la Web para fines educativos: Sitios Web de Cursos Académicos Sistemas de Gestión de Aprendizaje (LMS) Edublogs Wikis Webquest

57. Moodle Herramienta para la construcción de entornos virtuales de aprendizaje. Basado en el constructivismo social. Permite al docente construir ambientes donde los alumnos puedan el analizar, investigar, colaborar, compartir, construir y generar conocimiento.

58. Moodle Herramientas disponibles en moodle: Comunicación (chat, foros, diarios). Trabajo colaborativo (lecciones, materiales). Evaluación (encuestas, cuestionarios, talleres, tareas) Seguimiento (registro de actividades de los usuarios)

59. Entornos Virtuales de Aprendizaje Moodle - http://moodle.org Claroline - http://www.claroline.net Dokeos - http://www.dokeos.com Atutor - http://www.atutor.ca .LRN - http://dotlrn.org Sakai - http://www.sakaiproject.org/ Blackboard - http://www.blackboard.com/us/index.aspx WebCT - http://www.webct.com Ilias - http://www.ilias.uni-koeln.de/ios/index-e.html

60. Estándares y Proyectos Relacionados IMS Global Learning Consortium http://www.imsglobal.org ADL (SCORM) http://www.adlnet.org/ EML http://eml.ou.nl OKI http://web.mit.edu/oki OpenCourseWare http://ocw.mit.edu/

61. Blog Un blog puede definirse como un diario online disponible a través de la Web . Es el sustituto más fácil de implementar para tener un sitio Web. Es un área de creciente desarrollo por lo que ya existen buscadores especializados: http://www.google.es/blogsearch , http://technorati.com/ , http://www.blogpulse.com/

62. Blog Blogger: www.blogger.com Google page creator: www.googlepages.com Edublogs: http://edublogs.org Wordpress: http://wordpress.org Microblogging: www.twitter.com

63. ¿Qué es una WebQuest? Actividad de investigación que se basa en informaciones obtenidas de recursos existentes en Internet . Recursos preseleccionados por el docente para asegurar el empleo del tiempo en usar la información y no en buscarla.

64. Estructura de una Webquest INTRODUCCIÓN TAREA PROCESO RECURSOS EVALUACIÓN CONCLUSIÓN

65. Carácterísticas de Webquest Promueve un pensamiento creativo o crítico que comprende solución de problemas, juicio, análisis o síntesis. No es una hoja de trabajo para responder a cuestiones concretas. Promueve el trabajo y la discusión grupal. Plantea problemas abiertos, con varias posibles soluciones.

66. Duración de una Webquest Según su diseño y objetivos de una semana a un mes. Si tenemos limitaciones de tiempo y/o dificultades prácticas: MINIQUEST

67. MiniQuest Se pueden construir en tan sólo tres a cuatro horas. Se realizan en una o dos sesiones de clase. Su estructura se reduce a sólo tres pasos: - escenario - tarea - producto

68. Ejemplos de WebQuests El agua y su ciclo Doñana Deporte y discapacidad Un fin de semana en Londres Bullying Peligro, Bacterias! Componer una canción Compramos un coche

69. Wiki Es una herramienta colaborativa con la cual se pueden construir conceptos. Generalmente se asocia a la Web en la cual pueden contribuir usuarios registrados y anónimos. Ejemplos: http://es.wikipedia.org/wiki/Wikipedia http://www.wikilengua.org

70. Wikis Wikcionario: http://es.wiktionary.org/wiki/Portada Wikiquote: http://es.wikiquote.org/wiki/Portada Wikinoticías: http://es.wikinews.org/wiki/Portada Servicios gratuitos de wikis: Wikispaces http://www.wikispaces.com/ Wiki.mailxmail http://wiki.mailxmail.com/ PBWiki http://pbwiki.com/

71. Tarea Definir su tipo de ava y las características del mismo. Recopilar documentos que ayuden a la definición Próxima sesión: aun no definida probablemente el primer sábado de octubre.

72. Recursos Web útiles para los procesos de Enseñanza-Aprendizaje M.C. Juan Carlos Olivares Rojas

73. Google Es un buscador Web creado como proyecto de Doctorado por Sergei Bryn y Larry Page* Actualmente es una de las empresas más importantes del mundo. Google significa una cifra de un 1 con 100 ceros.

74. Mitos de Google Google “lo sabe todo” Si no está en Google es que no está en la Web Si no está en su primera página de resultados, es que no me interesa No hay otras fuentes de información en la Web (que merezcan la pena)

75. Google La visión de la empresa es “ Organizar la información del mundo y hacerla accesible y útil universalmente” Tienen patentado un algoritmo de búsqueda muy eficiente: PageRank Tiene una interfaz muy sencilla de utilizar pero sólo realiza búsquedas básicas.

76. Google El botón voy a tener suerte encuentra la mejor opción. Es accesible desde cualquier dispositivo. Permite realizar búsqueda de imágenes, grupos, directorios, noticias, artículos (google académico). Para sacarle el mayor provecho hay que utilizar la búsqueda avanzada.

77. Búsqueda avanzada http://www.google.com/advanced_search

78. Otros Buscadores Vivisimo: http://www.vivisimo.com Scirus: http://www.scirus.com Alltheweb: http://www.alltheweb.com Ask Jeeves: http://www.askjeeves.com Alexa: http://www.alexa.com A9: http://www.a9.com Teoma: http://www.teoma.com

79. Otros buscadores Por grupos: clusty (vivisimo) http://www.clusty.com Centíficos: scirus De propósito general: Alltheweb, Ask Jeeves, Alexa, A9, Teoma Directorios: yahoo, proyecto opendirectory

80. Bivitec El proyecto Bivitec (Biblioteca Virtual Tecnológica) es un portal educativo en donde se concentran una gran variedad de servicios educativos como buscadores, base de datos, revistas, tesis (proyecto triangulum), etc. Se accede desde la dirección http://www.bivitec.edu.mx y se necesita crear una cuenta. Hay que pertenecer al SNEST para tener acceso a toda la funcionalidad del portal.

81. Optimización de Búsquedas

82. Comandos en Google Site: sirve para encontrar información en un sitio determinado. Filetype: para encontrar la información en un solo formato. Link: muestra los sitios Web que contienen a un sitio predeterminado. Related: par encontrar páginas temáticamente relacionadas.

83. Comandos en Google Año .. Año : busca información comprendida en un rango de fechas. “ Frase” : encuentra la frase exacta. +: sirve para encontrar exactamente una palabra sin sus variantes. -: excluye términos en la búsqueda.

84. Comandos Google Define : muestra la definición de un término Operadores relacionales: OR, AND y NOT Se puede utilizar de calculadora : 4*5 Conversión de moneda: 100 eur a usd También se puede buscar por: Idioma , País , Contenido presente sólo en alguna parte de la página (título)

85. Otras Búsquedas de Google Google Coop: Buscador personalizado. www.google.com/coop Herramientas de Idioma de Google http://www.google.com/language_tools?hl=ES Búsqueda de Documentos Académicos http://scholar.google.com/schhp?hl=es Búsqueda en Libros http://www.google.com/books?hl=es

86. Otros Buscadores Agregar URL en Google: http://www.google.es/addurl Yahoo Search: http://search.yahoo.com Live: www.live.com ahora ( www.bing.com ) Metabuscadores: copernico, www.scitopia.org Buscadores de Libros: www.amazon.com

87. Otros Buscadores Redes sociales Ocio: www.myspace.com , www.hi5.com , www.facebook.com Profesionales: www.linkedin.com Descarga de software: www.softonic.com , www.tucows.com , www.download.com P2P: Ares, eMule, BitTorrent Mapas: http://maps.google.com/

88. Herramientas Básicas Correo Electrónico: institucional y personal Chat / Mensajero Instantáneo Herramientas de Productividad* Búsqueda de Información**

89. Herramientas Multimedia Imágenes: www.flickr.com Videos: www.youtube.com , www.schooltube.com , www.teachertube.com Presentaciones: www.slideshare.com Ofimática: http://docs.google.com Mapas conceptuales: www.cmaptools.com

90. Herramientas Favoritos (marcadores): www.del.icio.us , www.google.com/bookmarks/ Sindicación de contenidos: www.bloglines.com Citas académicas: www.citeulike.com Línea del tiempo: www.xtimeLine.com

91. Herramientas Calendario: www.google.com/calendar?hl=es Swftools: Convierte archivos pdf, imágenes y videos a presentaciones flash, combinar varias presentaciones flash en una sola y extraer videos, audios e imágenes de estas. ( www.swftools.org ). Media Convert ( www.media-convert.com ). Cool PDF Reader y Pdf2exe: Convierten archivos pdf en programas ejecutables y permite extraer su contenido en un archivo de texto. ( www.pdf2exe.com ).

92. Otras herramientas Otras aplicaciones portables: http://portableapps.com/apps Imágenes: http://galeria.educar.org www.openclipart.org http://school.discoveryeducation.com/clipart http://www.hellasmultimedia.com/webimages/education/education_images.htm

93. Otras heramientas Notas: www.notefish.com www.fleck.com www.stickis.com www.mystickies.com Filtrado de contenido (Inteligencia Collectiva, Folskonomía): www.digg.com www.meneame.com

94. Otras Herramientas Ver varias cuentas de correo: www.jumptomail.com Diagramas en línea: www.gliffy.com Correo electrónico grande: www.mailbigfile.com , www.send-large-file.com Compartir archivos: www.foldershare.com ,

95. Otras Herramientas Almacenamiento en Línea: SkyDrive, www.xdrive.com Gestión de Proyectos: www.basecamphq.com , www.assembla.org Knowledge Hub: “Perlas o Diamantes de Información” http://khub.itesm.mx Open CourseWare: http://ocw.universia.net

96. Otras herramientas Manipulación de actividades con palabras: http://wordle.net Lluvia de ideas: www.mywebspiration.com Organización de datos: www.rememberthemilk.com , http://evernote.com Flashcards: www.flashcarddb.com , www.flashcardexchange.com

97. Referencias Litwin,E. comp. (2000) Tecnología Educativa . Buenos Aires, Paidós. Melonie, Julie (2006) Blogger . Madrid: Anaya Multimedia.

98. ¿Preguntas?