Este documento presenta un tutorial sobre cómo diseñar un portafolio electrónico utilizando Google Sites. Explica el concepto de portafolio electrónico, sus objetivos y ventajas. Detalla el proceso de diseño, las secciones de contenido y proporciona un ejemplo. Finalmente, guía al lector paso a paso en la creación de un portafolio electrónico propio utilizando las herramientas de Google Sites.

1. DiseDiseño de Portafolios Electrónicosño de Portafolios Electrónicos
Prof. Antonio L. Delgado PProf. Antonio L. Delgado Pérezérez
Diseñador InstruccionalDiseñador Instruccional

2. Introducción
Esta guía 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.

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

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

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

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

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

8. Proceso de diseño
Santamaría, F. (2007)
Blog: Gabinete de Informática

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

10. Secciones del portafolio
• Vitae: 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

11. Secciones del portafolio
• Multimedios: Vídeos variados de: YouTube
• 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

12. Ejemplo

13. Diseño del portafolio
1. Accede a Google Site con tu cuenta de
Gmail.
http://sites.google.com
Nombre uauario Gmail
Contraseña Gmail

14. Diseño del portafolio
2. Oprime el botón: Crear un sitio nuevo.

15. Diseño del portafolio
3. Selecciona la
plantilla
4. Escribe el nombre
del sitio
5. La dirección URL
quedará ubicada
(puede ser cambiada)
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 tu portafolio.

16. Diseño del portafolio
6. Choose a theme: Selecciona un tema de plantilla
haciendo un click sobre la imagen.

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

18. Diseño del portafolio
12. User Settings: Cambia las
configuraciones del idioma y zona
horaria.
13. Oprime: Save changes

19. Diseño del portafolio
14. Tu página inicial ya está lista para trabajar.
Oprime: Editar Página para comenzar a
escribir.

20. Diseño del portafolio
15. La pantalla cambiará al editor HTML. Al
terminar de escribir, oprime Guardar.

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

22. Diseño del portafolio
17. Oprime Formato para
ajustar el texto a diferentes
estructuras de redacción.

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

24. Diseño del portafolio
20. Oprime Tabla para insertar
tablas completas, filas, y
columnas.

25. Diseño del portafolio
21. Oprime para abrir una segunda página de
trabajo. Crea las páginas que sean necesarias.
Escribe el nombre de la
página

26. Diseño del portafolio
22. Selecciona la plantilla de trabajo, escribe el
nombre de la página y presiona:
Procesador de palabras
Bitácora: noticias, reflexiones y artículos
Repositorio de documentos: .doc/.ppt/.pdf
Gestor de proyectos o actividades

27. Diseño del portafolio
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:

28. 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:

29. Diseño del portafolio
26. Utilizado para
descargar
archivos desde
tu computadora o
servicios de la
nube.

30. Diseño del portafolio
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.

31. Diseño del portafolio
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
proyecto personal.

32. Diseño del portafolio
29. Selecciona un formato de las plantillas de
listas o crea una personalizada:

33. Diseño del portafolio
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

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

35. Diseño del portafolio
32. Oprime debajo de Sidebar
(Navegación) para Editar elemento de la
barra lateral.
1. Sustituye el título: Navegación por: Enlaces
2. 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

36. Diseño del portafolio
33. Muestra el Historial de
Revisiones. Aquí puedes
llevar a cabo
configuraciones
importantes de tu sitio
web.

37. Diseño del portafolio
Retorna al portafolio electrónico
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 slide #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 creado
Modifica el acceso a tu sitio web: Público en la web, Usuario con Enlace o
Privado
Permiso para que Google haga promociones en tu sitio
Muestra la direción predeterminada de tu portafolio
Configura la estructura completa, cabecera, área de contenido,
gadgets y navegación horizontal

38. Diseño del portafolio
34. Configuración de Temas, Colores y fuentes
1
2
3
4
5

39. Diseño del portafolio
35. 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.
Si deseas la analítica de acceso a tu portafolio,
utiliza el servicio Google Analytics con tu
cuenta personal de Gmail.

40. Fin del tutorial
Si deseas compartir algún comentario,
sugerencia u opinión acerca del tutorial,
escribe a:
antonio.delgado.perez@gmail.com
¡Gracias por tu atenci¡Gracias por tu atención!ón!