tutorial: diseño de portafolios electronicos
DESCRIPTION
Este tutorial trata sobre el diseño de portafolios electrónicos educativos. En el mismo se define el término, se mencionan las ventajas instruccionales, los pasos para su diseño, un ejemplo de un portafolio real y se proveen instrucciones detalladas para diseñar un portafolio electrónico utilizando el servicio Google Sites.TRANSCRIPT
![Page 1: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/1.jpg)
![Page 2: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/2.jpg)
Introducción
Este tutorial trata sobre el diseño de portafolios electrónicos 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.
![Page 3: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/3.jpg)
Objetivos
• Definir el concepto: Portafolio Electrónico • Presentar las ventajas de su diseño en el
contexto académico • Mostrar el proceso de diseño • Presentar las partes del contenido • Demostrar un portafolio electrónico real • Diseñar un portafolio electrónico utilizando
Google Sites
![Page 4: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/4.jpg)
Portafolio Electrónico • Recopilación del trabajo pensado para un objetivo
específico: “proporcionar un registro de logros” (National Learning Infrastructure Initiative, 2004)
• Sistema de gestión de la información basado en la web que usa medios y servicios electrónicos. El aprendiz construye y mantiene un repositorio digital de los artefactos (objetos), que puede usar para dejar constancia de su capacidad y reflexionar sobre su aprendizaje.” (ePortfolio Portal, 2004)
• Colecciones ensambladas, mantenidas y cuidadas por el usuario, que evidencian o certifican lo que esa persona podría hacer para sí mismo o para otros” (The E-Eearning Framework, 2004)
![Page 5: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/5.jpg)
Ventajas
• Accesible 24/7 • Cero distancias • Evita el peso y espacio innecesario • Entorno interactivo para la gestión del
conocimiento • Promueve el desarrollo de altos niveles
cognitivos • Crea conexiones entre las experiencias de
aprendizaje y de la vida real
![Page 6: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/6.jpg)
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
![Page 7: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/7.jpg)
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
![Page 8: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/8.jpg)
Proceso de diseño Santamaría, F. (2007)
Blog: Gabinete de Informática
![Page 9: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/9.jpg)
Secciones del portafolio
• Inicio: Describe el propósito y la justificación del proyecto
• Objetivos: Describe los objetivos de aprendizaje y las expectativas del estudiante
• Datos del autor/a: Información personal que se desea compartir: pasatiempos, intereses personales, lugares y actividades preferidas
![Page 10: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/10.jpg)
Secciones del portafolio
• Resumé: Trabajo ocupacional, comunitario y extracurricular
• Experiencias: Documenta una serie de actividades personales y profesionales
• Aportaciones: Proyectos realizadas y creación de productos innovadores
• Publicaciones: Artículos interesantes, investigaciones, reflexiones, análisis crítico, editoriales y diarios reflexivos
![Page 11: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/11.jpg)
Secciones del portafolio
• Multimedios: Vídeos variados de: YouTube y Google Video
• Galería imágenes: Afiches, hojas sueltas y programas de las actividades en las que hayas participado: Congresos, talleres, presentaciones y eventos oficiales o institucionales
![Page 12: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/12.jpg)
Ejemplo
![Page 13: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/13.jpg)
Diseño del portafolio
1. Accede a Google Site con tu cuenta de Gmail-Google.
http://sites.google.com
![Page 14: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/14.jpg)
Diseño del portafolio
2. Oprime el botón: Crear un sitio nuevo.
![Page 15: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/15.jpg)
Diseño del portafolio 3. Selecciona la
plantilla 4. Escribe el nombre
del sitio 5. La dirección URL
quedará ubicada (puede ser cambiada)
![Page 16: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/16.jpg)
Diseño del portafolio 6. Choose a theme: Selecciona un tema de plantilla
haciendo un click sobre la imagen.
![Page 17: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/17.jpg)
Diseño del portafolio 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
![Page 18: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/18.jpg)
Diseño del portafolio
12. User Settings: Cambia las configuraciones del idioma y zona horaria.
13. Oprime: Save changes
![Page 19: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/19.jpg)
Diseño del portafolio
14. Tu página inicial ya está lista para trabajar. Oprime: Editar Página para comenzar a escribir.
![Page 20: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/20.jpg)
Diseño del portafolio 15. La pantalla cambiará al editor HTML. Al
terminar de escribir, oprime Guardar.
Escribe el título de la página
![Page 21: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/21.jpg)
Diseño del portafolio
16. Oprime Insertar para agregar imágenes, enlaces, líneas, calendario, documento, fotos de Picasa, presentaciones, hojas de cálculo, formulario, vídeos y otras.
![Page 22: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/22.jpg)
Diseño del portafolio
17. Oprime Formato para ajustar el texto a diferentes estructuras de redacción.
![Page 23: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/23.jpg)
Diseño del portafolio
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.
![Page 24: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/24.jpg)
Diseño del portafolio
20. Oprime Tabla para insertar tablas completas, filas, y columnas.
![Page 25: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/25.jpg)
Diseño del portafolio
21. Oprime +Crear Página Nueva para abrir una segunda página de trabajo. Crea las páginas que sean necesarias.
Puedes hacer cambios en todo momento oprimiendo el botón Editar página
![Page 26: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/26.jpg)
Diseño del portafolio 22. Selecciona la plantilla de trabajo, escribe el
nombre de la página y presiona Crear.
![Page 27: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/27.jpg)
Diseño del portafolio 23. La página web es un editor de texto en HTML
similar a MS Word.
![Page 28: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/28.jpg)
Diseño del portafolio 24. Esta estructura se utiliza para agregar
documentos en varios. formatos: .doc, .docx, .ppt, .pptx, .pps y .pdf
25. Organízalos en carpetas desde: Mover a
![Page 29: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/29.jpg)
Diseño del portafolio 26. Añade un archivo desde tu computador o
desde: Slideshare, Scribd, Box.net. 27. Describe brevemente el contenido de tu
documento:
![Page 30: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/30.jpg)
Diseño del portafolio 28. Pulsa en: Nueva entrada para redactar un
artículo/anuncio:
![Page 31: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/31.jpg)
Diseño del portafolio 29. Se;ecciona una plantilla de lista o crea una
personalizada:
![Page 32: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/32.jpg)
Diseño del portafolio 30. Trabaja sobre la nueva página 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
![Page 33: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/33.jpg)
Diseño del portafolio
31. Al crear todas tus páginas puedes cambiar el orden de las secciones de navagación. Oprime el enlace Editar Barra Lateral
En el bloque de Navegación: editar
Al terminar oprime Aceptar y Guardar Cambios
Título de la barra de Secciones
Utiliza las flechas para mover las páginas de orden
![Page 34: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/34.jpg)
Diseño del portafolio
32. Selecciona: para cambiar: Contenido,
Configuración, Apariencia, Presentación, Colores/Fuentes y las plantillas de Temas del Sitio.
Las siguientes pantallas mostrarán las configuraciones a realizar en cada una de las secciones.
![Page 35: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/35.jpg)
Diseño del portafolio A. Muestra el reistro de las Actividades Recientes
![Page 36: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/36.jpg)
Diseño del portafolio B. Muestra el archivo de administración de las
páginas por: Autor, Actualización y Revisión.
![Page 37: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/37.jpg)
Diseño del portafolio C. Muestra los Archivos Adjuntos en las páginas.
![Page 38: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/38.jpg)
Diseño del portafolio D. Muestra la página de Administración General
del Sitio Web.
Escribe el título del Sitio
Espacio para escribir la descripción del sitio
Opción para cambiar la página de inicio
Google Analytics: Herramienta que se utiliza para monitorear el acceso de los usuarios a tu sitio Web
Opción para borrar tu Sitio Web
![Page 39: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/39.jpg)
Diseño del portafolio E. Muestra los parámetros de acceso a los
usuarios de la Web.
Selecciona el modo de acceso a invitados
Acceso al público en general
C
O
N
T
A
C
T
O
S
![Page 40: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/40.jpg)
Diseño del portafolio F. Suscripción al servicio Adsence para
promoción de anuncios publicitarios.
![Page 41: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/41.jpg)
Diseño del portafolio G. Muestra la configuración para cambiar el
nombre de dominio del Sitio Web.
Se utiliza para personalizar el nombre de dominio de tu Sitio Web
![Page 42: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/42.jpg)
Diseño del portafolio H. Muestra la pantalla para realizar los cambios
estructurales de tu Sitio Web.
Agrega en la cabecera un logotipo personalizado. Se recomienda diseñar un banner con las siguientes dimensiones: W: 300 X H:125 aproximadamente
Agrega nuevas barras laterales con textos o enlaces Web externos
![Page 43: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/43.jpg)
Diseño del portafolio I. Configura los colores y fuentes de las
páginas, barras, bloques, textos y enlaces.
Selecciona la estructura a cambiar:
1. Página completa 2. Cabecera del sitio 3. Área de contenido 4. Gadgets del área de contenido 5. Gadgets de la barra lateral 6. Gadget de navegación
![Page 44: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/44.jpg)
Diseño del portafolio J. Muestra la pantalla para realizar los cambios
estructurales de tu Sitio Web.
Puedes cambiar la plantilla de diseño de la página cuando lo desees. Hay sobre 56 diseños a escoger
Oprime el clik en el círculo de opciones, al lado izquerdo del nombre de la plantilla
Oprime Guardar los cambios para terminar
![Page 45: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/45.jpg)
Diseño del portafolio
32. El bloque de navegación editado se verá de esta forma:
33. Puedes añadir o eliminar elementos nuevos (bloques).
Oprime el enlace Editar barra lateral, localizado en la parte inferior de la pantalla de edición.
![Page 46: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/46.jpg)
Diseño del portafolio
34. La pantalla cambiará de la siguiente manera:
![Page 47: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/47.jpg)
Diseño del portafolio 35. Aparecerá un bloque en el que
seleccionarás uno de cinco elementos nuevos:
• AdSense • Navegación • Texto • Actividad reciente
del sitio • Actividad reciente • Cuenta atrás
Oprime el botón para añadirlo
Oprime el botón para añadirlo
![Page 48: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/48.jpg)
Diseño del portafolio
36. Al agregar un Cuadro de texto se verá como en la imagen de la derecha. Pulsa sobe el enlace editar para entrar la información en el cuadro de texto.
![Page 49: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/49.jpg)
Diseño del portafolio
37. Se agregará el elemento en la estructura de la página. Oprime en editar para realizar los cambios en el mismo.
38. Oprime el enlace Volver al sitio para acceder el formato de edición de la página.
1. Se escogió el elemento de texto
2. Escribe el título del elemento (bloque)
3. Escribe los nombres de tus entornos Web: Facebook, MySpace, Páginas Web pesonales u otros.
4. Oprime Enlace para activar el vínculo
5. Oprime Aceptar y luego Guardar cambios
1. Escribe los nombres de los entornos Web que tengas: Facebook, MySpace, Páginas personales, sitios Web u otras
2. Oprime Enlace para activar el vínculo hacia tu página personal
3. Al terminar, oprime el botón Aceptar. Tus cambios ya están realizados
4. Oprime Volver al sitio para regresar a la pantalla de edición de tu página
Escribe el título del bloque de texto
![Page 50: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/50.jpg)
Diseño del portafolio
39. Tu portafolio electrónico se verá prácticamente terminado. Puedes añadirle más secciones, elementos (bloques) y editar el contenido cuando sea necesario. Comparte tu URL con otras personas; permite que la comunidad de usuarios acceda tu entorno de desarrollo profesional y promociónalo.
40. Si deseas monitorear quiénes acceden a tu página utiliza el servicio Google Analytics con tu cuenta personal de Gmail.
![Page 51: Tutorial: Diseño de Portafolios Electronicos](https://reader034.vdocuments.co/reader034/viewer/2022052523/5571f26049795947648c80d2/html5/thumbnails/51.jpg)
Fin del tutorial