Creación de Ambientes de Aprendizaje

M. Sc. Juan Carlos Olivares Rojas

Marzo 2010

Outline• Introducción• Tecnologías Web

– Sitio Web– Blog– Wiki– Otros recursos– VLE: moodle

• Desarrollo de un ambiente de aprendizaje con tecnologías Web (100% Proceso-Producto).

Datos de Contacto• E-mail: jcolivar@itmorelia.edu.mx• MSN: juancarlosolivares@hotmail.com

• Web: http://antares.itmorelia.edu.mx/~jcolivar

• Twitter: @jcolivares

• Facebook: Juan Carlos Olivares Rojas

Mundo Actual

Era Digital• Sociedad del Conocimiento

• Generación N (NET, Web)

Cambios Educativos

Era Digital

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

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.

Inteligencias Múltiples

Lin

gü

ísti

ca

Lógica-Matemática

Musical

EspacialCinestesico-

corporal

Interpersonal

Intrapersonal

Natu

ralista

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.

Nuevas formas de trabajo

Nuevo Tipo de Escuelas

Uso de TICs en todo• Copia rápida del pizarrón.

• Solución: utilizar fotografías

Uso de TICs en todo• Fotocopiado de algún material impreso

como un libro.

Uso de TICs en todo

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

Importancia de la Internet

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.

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.

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

Ambientes de Aprendizaje

Plataformas VLE• Herramientas y recursos:

– Foro– Wiki– Mensajes– Sección de tareas– Glosario– Calificaciones– Cuestionarios– Recursos

AVA

Docentes interesados en las tecnologías

Docentes usuarios de las tecnologías

Autores y Desarrolladores

Especialistas

Innovadores

NIVELES DEATENCIÓN

•Las TIC como apoyo a la práctica Las TIC como apoyo a la práctica docentedocente

•Ambientes Virtuales de AprendizajeAmbientes Virtuales de Aprendizaje

•Planeación EstratégicaPlaneación Estratégica

•Formación y Actualización DocenteFormación y Actualización Docente

•EspecializadosEspecializados

•Las TIC como apoyo a la práctica Las TIC como apoyo a la práctica docentedocente

•Ambientes Virtuales de AprendizajeAmbientes Virtuales de Aprendizaje

•Planeación EstratégicaPlaneación Estratégica

•Formación y Actualización DocenteFormación y Actualización Docente

•EspecializadosEspecializados

AVA

AVA

Medios de Comunicación

Evaluación

Evaluación

¿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

Páginas Web

Elementos de una Página Web

Tabla / Herramientas de navegación

Título

Dirección(URL)

BannerTítulo

Pie de página / Derechos de autor

Enlaces con gráficos

Contenido

Herramienta de búsqueda

Herramienta de Navegación

Marcos

Enlaces

¿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)

El lenguaje HTML• Etiquetas

<center> Inicio de etiqueta

................ Elementos a los que afecta

</center> Cierre de etiqueta

• Atributos<table border="0" width="80%" ...>

.............

</table>

Estructura de un documento HTML

<HTML><HEAD>

<TITLE>Título</TITLE></HEAD><BODY>

Texto del documento, Gráficos, Enlaces, ...</BODY>

</HTML>

Direcciones URL<A HREF = “http://www.upv.es”>

Universidad Politécnica de Valencia

</A>

<A HREF = “mailto:jlhueso@mat.upv.es?tema”>

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>

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

Fondo de la página• Color

– <BODY BGCOLOR = “white”>

• Imagen– <BODY BACKGROUND = “imagen.gif”>

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.

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?

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.

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.

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.

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.

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.

Lectura en la Web• La Web es “user-driven”: la gente quiere

moverse, usar el mouse.

Web

4

4

32 1

Jerarquía visual

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

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

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.

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?

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?

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?

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

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.

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)

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

Estándares y Proyectos Relacionados

• IMS Global Learning Consortiumhttp://www.imsglobal.org• ADL (SCORM)http://www.adlnet.org/• EMLhttp://eml.ou.nl• OKIhttp://web.mit.edu/oki• OpenCourseWarehttp://ocw.mit.edu/

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/

Blog• Blogger: www.blogger.com

• Google page creator: www.googlepages.com

• Edublogs: http://edublogs.org

• Wordpress: http://wordpress.org

• Microblogging: www.twitter.com

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

Estructura de una Webquest

INTRODUCCIÓNINTRODUCCIÓN

TAREAPROCESO RECURSOS

EVALUACIÓN

CONCLUSIÓN

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.

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

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

Ejemplos de WebQuests 1. El agua y su ciclo2. Doñana 3. Deporte y discapacidad4. Un fin de semana en Londres5. Bullying6. Peligro, Bacterias!7. Componer una canción8. Compramos un coche

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

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/

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.

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)

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.

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.

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

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

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

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.

76

Optimización de Búsquedas

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.

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.

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)

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émicoshttp://scholar.google.com/schhp?hl=es

• Búsqueda en Libroshttp://www.google.com/books?hl=es

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

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/

Herramientas Básicas• Correo Electrónico: institucional y

personal

• Chat / Mensajero Instantáneo

• Herramientas de Productividad*

• Búsqueda de Información**

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

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

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

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

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

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,

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

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

Referencias• Litwin,E. comp. (2000) Tecnología

Educativa. Buenos Aires, Paidós.

• Melonie, Julie (2006) Blogger. Madrid: Anaya Multimedia.

¿Preguntas?