Creación de un e-portfolio

Curso: Desarrollo de las competencias digitales
Departamento de FIEE
IES Mediterráneo
1
Creación de un e-portfolio con Google site
Objetivo: crear un eportfolio o portafolio electrónico a partir del nuevo editor de páginas web
de Google site.
La idea genérica de los portafolios es la de crear un lugar en el que podamos incorporar
trabajos que integren elementos multimedia. Los trabajos realizados en portafolios permitirían
al alumno/a organizar los trabajos por asignaturas, cursos académicos o realizar portafolios
para trabajos concretos.
El nuevo editor de webs de Google aporta muchas ventajas respecto del anterior Google site:
 Fácil de editar
 Es más intuitivo
 Permite diseños funcionales a la par que elegantes
 Totalmente compatible con Google Drive
 El acceso a nuestras webs es mucho más fácil.
Sin embargo, hay que tener en cuenta que se trata de un editor que está en fase beta, y que
aún no incorpora algunas características que disponía la versión clásica del editor. También
presenta algunos errores en el diseño final, especialmente en el encabezamiento si no vamos
guardando de vez en cuando nuestros progresos.
En este breve tutorial vamos a ir viendo cómo se construye una web con la nueva versión de
Google site.
Atención. El nuevo editor de Google site sólo funciona con el
navegador Chrome o con su equivalente en Linux Chromium.
Primer paso. Acceder a nuestra cuenta de Google
Una vez que hemos accedido a nuestra cuenta,
tendremos que pulsar en el conjunto de
aplicaciones de Google, y desde allí buscar el icono
de Google site

IES Mediterráneo
2
Si no aparece la primera vez que activamos las aplicaciones
de Google, habrá que pulsar en más, y puede que incluso en
“aún más” hasta que por fin encontremos el icono.
Una vez que pulsamos sobre el icono, nos aparecerá una
página desde la que podremos dirigirnos al nuevo editor de
webs
Debemos ahora pulsar en el link del editor.
En la parte inferior derecha aparece el icono que nos permite crear
nuestro nuevo sitio web.

IES Mediterráneo
3
Segundo paso. Diseñando la portada
El editor divide la pantalla en dos grandes áreas
La de la izquierda que es sobre la que vamos a trabajar. Y la de la derecha que es dónde se
alojan los elementos que podemos incorporar a nuestra web.
La ventaja que proporciona este nuevo editor es que podemos empezar a trabajar
directamente sobre algunas de las secciones que aparecen por defecto para personalizarlas.
Encabezamiento del portafolios
Vamos a empezar a trabajar sobre el título del portafolios.
Al colocar el ratón sobre el centro del encabezamiento, vemos que se activa un área para que
pongamos un título a nuestro portafolios. Podemos poner el título que queramos.

IES Mediterráneo
4
En mi caso el título va a ser “Competencias digitales”. Desde aquí podemos modificar el
tamaño del título, la alineación o incluso añadirle un hipervínculo a otro sitio web.
Ahora podemos modificar el aspecto. Para eso podemos cambiar el tipo de imagen que
aparece por defecto y el tipo de encabezado.
Para cambiar la imagen sólo tenemos que pulsar sobre ña pestaña y podemos
a. insertar alguna de las imágenes que nos ofrece el editor
b. Subir nuestra propia imagen
c. Incluir una imagen copiando la url de alguna imagen de internet. Esta opción no es muy
recomendable.
Seleccionamos la imagen que
mejor nos parezca y
pulsamos sobre la pestaña
“seleccionar”
El editor ya se encarga de
ajustar la imagen al espacio
del encabezado.

IES Mediterráneo
5
Así queda después de la selección de imagen que he realizado
Si volvemos a colocar el ratón sobre el encabezado, podremos modificarlo, decidiendo si
queremos un banner (tamaño de la imagen) más grande, o incluso dejarlo sin imagen.
Dando título a la página inicial.
Como estamos haciendo la portada de nuestro portafolios, la página que estamos editando es
la página inicial, así que le podemos dar el nombre de “portada”, “página inicial”, “inicio”, o lo
que queramos. Para ello sólo tenemos que colocar el cursor en la parte superior izquierda y
colocar el título
Colocamos el nombre que queramos y ya tenemos nuestro encabezamiento del portafolios.

IES Mediterráneo
6
Paso tres. Guardando el trabajo realizado.
Es importante
empezar a guardar
todo lo que hemos
hecho. Sólo tenemos
que pulsar en
“publicar” y
seleccionar el nombre
que va a tener
nuestro portafolios.
Esta es la parte más delicada, porque tenemos que elegir un nombre que esté disponible en la
web. No conviene colocar nombres muy largos. Por ejemplo, podemos intentarlo con nuestro
nombre seguido de una fecha, o “portafolios2017”. Esto dependerá de vuestra imaginación.
En el espacio en blanco es
donde debemos colocar el
nombre elegido y esperar a
que Google nos dé el visto
bueno. En tal caso aparecerá
un tic en azul indicándonos
que el nombre está
disponible.
En mi caso me ha aceptado
el nombre de “competencia
digital”. Ahora sólo hay que
pulsar en “PUBLICAR”.
Nos debe aparecer el
indicativo de que el sitio se
ha publicado
correctamente. Sí, no
apareciera la imagen que
hemos seleccionado, mala
suerte. Podemos intentar
cambiarla repitiendo la operación anterior, o intentar crear un site nuevo. Recordad que
estamos en un editor nuevo en fase beta, y en ocasiones comete algún error.

IES Mediterráneo
7
Paso cuatro. Incorporando elementos en la página de inicio.
A] Incorporando textos
Para poder incorporar un texto sólo tenemos que pulsar en el icono “cuadro de texto”
A continuación, se abrirá un recuadro en el que podremos insertar un texto. El mismo
recuadro ya nos ofrece las distintas posibilidades del texto. Podemos decidir si queremos que
el texto sea un título, un subtítulo, texto normal….. es conveniente hacer una selección del tipo
de texto antes de insertarlo.
Yo he decidido colocar un título, y esta es la imagen final que queda

IES Mediterráneo
8
Al colocar el cursor sobre el recuadro se abrirá a la izquierda la posibilidad de colocar una
imagen de fondo sobre el texto.
De esta forma podemos enfatizar un
fragmento de texto o un título. Al colocar el
cursor sobre el icono de la paleta, se
despliegan las posibilidades de énfasis que
se ofrecen, incluyendo la posibilidad de
incrustar una imagen.
En la siguiente sección se ha colocado un segundo recuadro de texto en el que se ha insertado
texto normal. Al recuadro anterior se le ha colocado un “Énfasis 1” para distinguirlo del texto.
El resultado final es este.

IES Mediterráneo
9
B] Incorporando imágenes
Para insertar una imagen en la página tan sólo hay que seguir unos simples pasos
1. Pulsar en la parte superior derecha en el icono “imágenes”
2. Se abrirá una pestaña para que seleccionemos el origen de la imagen. Si la subimos desde
nuestro ordenador, desde una dirección web, o desde una imagen que tuviésemos
almacenada en Google Drive.
3. Pulsamos en la pestaña inferior “subir”
Una vez que se ha incorporado una
imagen, podemos redimensionarla
simplemente arrastrando desde los
puntos situados en los bordes de la
imagen. En este ejemplo he subido una
imagen simple generada con el editor de
nubes de palabras
http://www.nubedepalabras.es/

IES Mediterráneo
10
Un aspecto muy importante a tener en cuenta, es que el nuevo editor de webs de Google
funciona mediante módulos. Cada vez que insertamos un elemento, sea este un texto, una
imagen, un vídeo o un documento, lo que estamos haciendo es incorporar un módulo. Cada uno
de los módulos pueden ser desplazados e integrados en otros módulos. En el caso de la imagen,
si quisiera llevarla hasta el lado izquierdo del texto superior, sólo tendría que colocar el cursor
sobre la imagen y arrastrarla hasta el texto.
El resultado de arrastrar la imagen y colocarla en el texto es este
Ahora sólo queda pulsar de nuevo sobre la imagen y redimensionarla
Al hacer esta operación el texto se va a ajustar de forma automática para dejar espacio a la
imagen.

IES Mediterráneo
11
C] Incorporando vídeos
Para insertar un video desde Youtube, el proceso es muy similar al
de insertar una imagen.
En el margen izquierdo seleccionamos el icono de YouTube y
esperamos a que se abra la nueva pestaña.
Buscamos en primer lugar la dirección url del vídeo que queremos
incorporar. Luego sólo tenemos que pegarla en el espacio de
navegación y pulsamos sobre el icono de la lupa
Desde el propio editor de se
buscará el vídeo
seleccionado, que queda
remarcado en azul. Luego
sólo queda pulsar en la
pestaña “Seleccionar”

IES Mediterráneo
12
El vídeo se inserta en la web, y ya sólo queda redimensionarlo o arrástralo a la zona que
queramos.
Recordad que, si lo que queremos en mover un bloque o módulo completo, lo que hay que hacer
es colocar el cursor sobre el módulo, en el borde izquierdo, y cuando aparezca el icono de
desplazamiento, podemos mover todo el módulo dentro de la página,
También podremos cambiar el fondo de la imagen del módulo pulsando sobre el icono de la
paleta de colores.
D] Incorporando otros documentos
El nuevo editor de web permite incorporar los documentos que tengamos guardados en
nuestras carpetas de Google Drive. El proceso es similar a insertar una imagen y la integración
con Google Drive es muy buena. Esto nos permite insertar en nuestro portafolios cualquier
documento (imágenes, presentaciones, formularios, textos, hojas de cálculo…) que tengamos
almacenados en nuestras carpetas de Google Drive.

IES Mediterráneo
13
Paso cinco. Añadiendo subpáginas.
En este nuevo editor, añadir una subpágina a nuestro sitio web es muy fácil.
Hay que pulsar en la pestaña páginas de la sección superior derecha
En la pestaña “Añadir página” pulsamos y damos nombre
a la nueva página.
Podemos dar el nombre que queramos. Yo he dado el
nombre de una actividad realizada con una de las
herramientas TIC que se incluyen en el curso, Storify.
Una vez puesto el nombre sólo hay que pulsar en
completado para que se abra la nueva subpágina.
Para editar esta nueva página hay que volver a pulsar sobre la pestaña INSERTAR. El resultado
sería este

IES Mediterráneo
14
Fijaos que la nueva página se ha colocado a la derecha de la página principal.
Desde la pestaña PÁGINAS podemos alterar el orden de las páginas simplemente arrastrando
los módulos de cada página en el orden que queramos.
Para colocar el trabajo realizado con Storify, sólo
hay que copiar la url del trabajo que tengamos
realizado. Luego pulsamos sobre icono Insertar
url y pegarlo en el espacio correspondiente y
pulsar AÑADIR.

IES Mediterráneo
15
Finalmente tenemos nuestra nueva subpágina.
Al pulsar sobre la imagen que se genera del trabajo realizado con Storify, nos conducirá hasta el
trabajo para que podamos verlo. El inconveniente que tiene este nuevo editor es que no
permite, por ahora, incrustar código html como se hacía en el antiguo editor de Google Site.
Pero el resultado es más que aceptable, especialmente por lo fácil que resulta el proceso.
Para navegar en las distintas subpáginas que tengamos dentro de un eportfolio sólo tendremos
que buscarlas en el margen superior izquierdo y pulsar sobre ellas. Hay otra forma de editar el
resultado final de un portafolios con el nuevo Google Site, pero eso quedará para otra ocasión.
Dos últimas cuestiones
1. Para poder enviar la url de nuestro eportfolio hay que:
a) Pulsar el PUBLICAR
b) pulsar en la pestaña VER que aparece en el margen inferior de la pantalla
En el ejemplo, la url generada es la siguiente:

IES Mediterráneo
16
https://sites.google.com/view/competenciadigital
2. Un aspecto muy interesante que tiene este nuevo editor es que permite que una misma
página la puedan editar varias personas. Esto permitiría a distintos alumnos trabajar sobre un
mismo eportfolio.
Para activar esta posibiloidad hay que pulsar en el icono de “Añadir editores de la parte superior
Desde esta nueva
pestaña
insertaremos los
emails de las
personas que quiera
ser editores de la
propia web y
asignarles y rol a la
hora de editar.
Con esta
posibilidad, se
puede tener un
portafolios de aula o
de asignatura y que
los alumnos/as
aporten sus
trabajos.

Creación de un e-portfolio

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Creación de un e-portfolio

Similar a Creación de un e-portfolio (20)

Más de Jose Luis Fernández

Más de Jose Luis Fernández (8)

Último

Último (20)

Creación de un e-portfolio