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.
 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
 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)
 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
 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
Proceso de diseño
Santamaría, F. (2007)
Blog: Gabinete de Informática
 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
 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
 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
Ejemplo
 Diseño del portafolio

1.  Accede a Google Site con tu cuenta de

Gmail-Google.

http://sites.google.com
 Diseño del portafolio

2. Oprime el botón: Crear un sitio nuevo.

 Diseño del portafolio
3. Selecciona la
plantilla
4. Escribe el nombre
del sitio
5. La dirección URL
quedará ubicada
(puede ser cambiada)
 Diseño del portafolio
6. Choose a theme: Selecciona un tema de plantilla
haciendo un click sobre la imagen.
 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
 Diseño del portafolio
12. User Settings: Cambia las
configuraciones del idioma y zona
horaria.

13. Oprime: Save changes

 Diseño del portafolio
14. Tu página inicial ya está lista para trabajar.
Oprime: Editar Página para comenzar a
escribir.
 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

 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.
 Diseño del portafolio
17. Oprime Formato para
ajustar el texto a diferentes
estructuras de redacción.
 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.
 Diseño del portafolio
20. Oprime Tabla para insertar
tablas completas, filas, y
columnas.
 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
 Diseño del portafolio
22. Selecciona la plantilla de trabajo, escribe el
nombre de la página y presiona Crear.
 Diseño del portafolio
23. La página web es un editor de texto en HTML
similar a MS Word.
 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
 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:
 Diseño del portafolio
28. Pulsa en: Nueva entrada para redactar un
artículo/anuncio:
 Diseño del portafolio
29. Se;ecciona una plantilla de lista o crea una
personalizada:
 Diseño del portafolio
30. Trabaja sobre la nueva página desde el editor
HTML. Oprime el botón:
Utiliza las herramientas de redacción

Al terminar de escribir, oprime GUARDAR

Escribe el título de la página. Éste será el link que aparecerán el bloque de Navigation (secciones)

Área de redacción
 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 Título de la barra de Secciones

Navegación: editar

Al terminar oprime
Aceptar y Guardar
Cambios Utiliza las flechas
para mover las
páginas de orden
 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.
 Diseño del portafolio
A. Muestra el reistro de las Actividades Recientes
 Diseño del portafolio
B. Muestra el archivo de administración de las
páginas por: Autor, Actualización y Revisión.
 Diseño del portafolio
C. Muestra los Archivos Adjuntos en las páginas.
 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

 Diseño del portafolio
E. Muestra los parámetros de acceso a los
usuarios de la Web.

Selecciona el modo de acceso a invitados

usuario@gmail.com,

C
O
Acceso al público en general N
T
A
C
T
O
S
 Diseño del portafolio
F. Suscripción al servicio Adsence para
promoción de anuncios publicitarios.
 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
 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

 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
 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
 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.
 Diseño del portafolio
34. La pantalla cambiará de la siguiente manera:
 Diseño del portafolio
35. Aparecerá un bloque en el que
seleccionarás uno de cinco
elementos nuevos:
•  AdSense
•  Navegación
•  Texto
Oprime el botón para añadirlo
•  Actividad reciente
del sitio Oprime el botón para añadirlo
•  Actividad reciente
•  Cuenta atrás
 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.
 Diseño del portafolio
37. Se agregará el
elemento en la Escribe el título del bloque
de texto

estructura de la
página. Oprime en
editar para realizar los 1. Escribe los nombres de los
entornos Web que tengas:

cambios en el mismo. 1. Se escogió elFacebook,

elemento deMySpace,
texto Páginas
personales, sitios Web u otras
2. Escribe el título del elemento (bloque)
38. Oprime el enlace 2. Oprime Enlace para activar el vínculo
3. Escribe los nombres de tus entornos Web:
hacia tu página personal
Facebook, MySpace, Páginas Web
Volver al sitio para 3. Al pesonales u otros.
terminar, oprime el botón Aceptar. Tus
cambios ya están realizados
4. Oprime Enlace para activar el vínculo
acceder el formato de 4. Oprime Volver al sitio para regresar a la
5. Oprime Aceptar y luego Guardar cambios
pantalla de edición de tu página
edición de la página.
 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.
Fin del tutorial