E. P.

DE INGENIERÍA DE SISTEMAS

HERRAMIENTAS TIC´S PARA DOCENTES

CAPACITACIÓN DOCENTE

MÓDULO N. º 03

E.P. DE INGENIERÍA DE SISTEMAS FILIAL LIMA

Contenido

1. ¿En qué consiste Google Sites? ............................................................................... 3

2. ¿Cómo crear el primer sitio web en Sites? ............................................................. 4
3. Obtener vista previa .................................................................................................. 6
4. Publicar un sitio web................................................................................................. 7
5. Opción Insertar .......................................................................................................... 8
6. Temas .......................................................................................................................... 9
7. Cambiar imagen principal del encabezado ......................................................... 12
8. Páginas...................................................................................................................... 19
9. Obtener vista previa ................................................................................................ 26
10. Referencias ............................................................................................................. 26

E. P. de Ingeniería de Sistemas 2
 1. ¿En qué consiste Google Sites?

Google Sites es una herramienta gratuita que permite crear y compartir páginas
web fácilmente. Asimismo, facilita la creación y publicación de sitios web internos
en una organización para trabajar en equipo: sitios web de proyectos, de eventos,
etc. No se requieren conocimientos técnicos (HTML, CSS, JavaScript...) para usar
Google Sites. Desde junio de 2016, la nueva versión de Google Sites forma parte
de Google Drive.

En https://sites.google.com/new/ se puede acceder al nuevo Google Sites. Al

entrar por primera vez (con la sesión iniciada), en pantalla se podrá ver información
de bienvenida invitándonos a descubrir la nueva versión:

Acerca de crear un sitio web con Google Sites, hay que recalcar que:

 Google Sites permite crear sitios web para uso personal o profesional.

E. P. de Ingeniería de Sistemas 3
 Tras crear un sitio web, puedes cambiar el nombre del archivo, de las
páginas o del propio sitio web.
 Los sitios web de Google Sites se pueden editar en tiempo real, como si
fueran documentos de Google Drive.

2. ¿Cómo crear el primer sitio web en Sites?

Al acceder por primera vez a Google Sites, se mostrará una pantalla similar a la
siguiente:

Obsérvese que, para crear un sitio web, se tiene que hacer clic en el botón "+".
Seguidamente, aparecerá un "Sitio sin título" y una pequeña visita guiada que
podemos cerrar pulsando en "SALTAR ESTA VISITA GUIADA":

E. P. de Ingeniería de Sistemas 4
ASIGNAR UN NOMBRE AL ARCHIVO DEL SITIO WEB

En la parte superior izquierda de la pantalla se puede nombrar al documento del

sitio web. Dicho nombre será el que tendrá el archivo (documento) del sitio web
en Google Drive.

EJEMPLO Al sustituir "Sitio sin título" por "sito-web-de-ejemplo" se verá:

En Google Drive se puede comprobar que se habrá creado el archivo del sitio web.

E. P. de Ingeniería de Sistemas 5
CREAR UN SITIO WEB DE SITES DESDE DRIVE

EJEMPLO: Para que en "Mi unidad" se creara un sitio web desde Drive debemos
seleccionar:

3. Obtener vista previa

En Google Sites, la "vista previa" permite visualizar un sitio web antes de
publicarlo en Internet.

E. P. de Ingeniería de Sistemas 6
La vista previa muestra cómo se verá el sitio web en un PC (pantalla grande), en
una tableta y en un teléfono móvil.

4. Publicar un sitio web

En Google Sites, al publicar un sitio web, se hará visible en Internet. Para ello, hay
que teclear la URL del sitio web a partir de .../view/, como se muestra en la siguiente
imagen:

E. P. de Ingeniería de Sistemas 7
 5. Opción Insertar
En las páginas de un sitio web creado con Google Sites se puede insertar (añadir)
texto, imágenes y otros contenidos.

E. P. de Ingeniería de Sistemas 8
¿Qué se puede insertar en Google Sites?

Google Sites proporciona un menú (a la derecha de la pantalla) con las siguientes

opciones para insertar:

INSERTAR texto, imágenes y otros contenidos en Google Sites

Menú Opciones
Opciones principales  Texto
 Imágenes
 Insertar URL
 Subir
Google Drive  Desde Drive

 Carpeta de Drive

Inserciones de Google  YouTube

 Calendario

 Mapa

Documentos de Google  Documentos

 Presentaciones

 Hojas de cálculo

 Formularios

 Gráficos

6. Temas
El menú TEMAS de Google Sites permite elegir (cambiar) el estilo del sitio web que
se esté diseñando (creando).

E. P. de Ingeniería de Sistemas 9
 En la siguiente tabla se muestran los posibles estilos (temas y fuentes) que
permite seleccionar Google Sites:

Estilos de temas y fuentes en Google Sites

Temas Fuentes
Sencillo Línea fina, Clásico, Grueso
Aristóteles Moderno, Clásico, Negrita
Diplomático Clásico, Línea fina, Grueso
Visión Negrita, Moderno, Clásico
Uniforme Sans, Grueso, Estrecho
IMPACTANTE Mayúsculas, Cordial, Estrecho
... ...

E. P. de Ingeniería de Sistemas 10
 Nota: Cada tema permite seleccionar diferentes colores.

EJEMPLO En la siguiente captura de pantalla se puede ver seleccionado

el TEMAVisión de color verde con el estilo de fuente Moderno:

En pantalla se visualizará algo parecido a:

E. P. de Ingeniería de Sistemas 11
 En cualquier momento se puede cambiar el TEMA (diseño o estilo) de un sitio
web.

7. Cambiar imagen principal del encabezado

En Google Sites, para cambiar la imagen principal del encabezado de una
página del sitio, se puede hacer clic en Cambiar imagen –en la esquina inferior
izquierda de la cabecera– como se muestra en la siguiente captura de pantalla:

E. P. de Ingeniería de Sistemas 12
A continuación, Google Sites permite seleccionar una imagen de la Galería o de las
mismas opciones proporcionadas cuando se quiere insertar una imagen(Subir, De
URL, Buscar, Tus álbumes o Google Drive)

E. P. de Ingeniería de Sistemas 13
 EJEMPLO En este caso, eligiendo la imagen mostrada en la captura de
pantalla anterior, el aspecto de la página web será:

E. P. de Ingeniería de Sistemas 14
Configurar la imagen principal y el tipo de encabezado

Seguidamente, Google Sites permite Restablecer los cambios realizados, además

de Cambiar imagen y establecer el Tipo de encabezado:

E. P. de Ingeniería de Sistemas 15
 Al hacer clic en Tipo de encabezado (header) se puede seleccionar Banner
grande, Banner o Solo título:

E. P. de Ingeniería de Sistemas 16
Legibilidad (Readability)

Para que el título de la página (en el encabezado) se visualice mejor, Google sites
–en caso de ser necesario– puede cambiar la tonalidad de la imagen de fondo.

EJEMPLO Sin aplicar el filtro de Ajustar para facilitar la lectura, en patalla podría
verse:

E. P. de Ingeniería de Sistemas 17
 Ahora bien, al aplicar el ajuste de legibilidad, obsérvese que la tonalidad de la
imagen del encabezado cambia, facilitando la lectura del texto del título:

E. P. de Ingeniería de Sistemas 18
 8. Páginas

En el menú PÁGINAS de Google Sites se pueden añadir páginas, eliminarlas,

cambiar su orden o anidarlas unas dentro de otras.

E. P. de Ingeniería de Sistemas 19
Añadir página

Después de hacer clic en Añadir página hay que indicar el nombre de la nueva
página y pinchar en COMPLETADO:

E. P. de Ingeniería de Sistemas 20
 A continuación, se abrirá la nueva página para editarla. El tema, color y estilo de
fuente son el mismo para todas las páginas del sitio. No obstante, en cada página
es posible establecer un tipo de encabezado (header) distinto.

Acciones sobre una página del sitio

EJEMPLO Habiendo añadido dos páginas (Página 2 y Página 3) a un sitio web,

sobre cada una de ellas se puede comprobar que –en el menú desplegable de la
derecha– es posible realizar las siguientes acciones:

 Establecer como página principal (home page).

 Cambiar nombre de la página.

E. P. de Ingeniería de Sistemas 21
 Quitar página del sitio.
 Ocultar de la navegación.

Cambiar el orden de las páginas

El orden de las páginas se puede cambiar moviéndolas. Por ejemplo, al arrastar

la Página 3 encima de la Página 2, en la pantalla se podrá ver:

E. P. de Ingeniería de Sistemas 22
Anidar páginas

En Google Sites, unas páginas páginas se pueden anidar dentro de otras,

teniendo en cuenta que no es posible anidar páginas en otras ya anidadas.

EJEMPLO Para anidar la Página 3 en la Página 2, hay que arrastrarla sobre ella:

E. P. de Ingeniería de Sistemas 23
Varias páginas anidadas

EJEMPLO En la siguiente captura de pantalla se muestran las páginas Página

3 y Página 4 anidadas dentro de la Página 2:

E. P. de Ingeniería de Sistemas 24
E. P. de Ingeniería de Sistemas 25
 9. Obtener vista previa

10. Referencias
Tutorial Google Sites (2018). Tutoriales de Informática [online] Available at:
https://www.abrirllave.com/google-sites/presentacion.php [Accessed 27 Mar.
2019].

E. P. de Ingeniería de Sistemas 26