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/

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.

https://sites.google.com/view/competenciadigital

Creación de un e-portfolio

Education

Transcript of Creación de un e-portfolio