Tutorial Google Sites

Google Sites:
Es una aplicacin online gratuita, Esta aplicacin permite crear un sitio web o una intranet
de una forma tan sencilla como editar un documento
1. Registro Previo
1.1- Pantalla de Bienvenida
Acceda a este servicio en la siguiente direccin: http://sites.google.com
Para utilizar esta aplicacin es necesario tener una cuenta en gmail, ya que nos pide
que nos identifiquemos con nuestro usuario y contrasea.
Una vez que hemos entrado haga clic en:
http://sites.google.com
Google sites
Tutorial Google Sites
1.2- Datos esenciales
Hay que rellenar un formulario, como aqu se muestra con sus datos personales:
1. Escriba el nombre con el que se denomina su sitio ejemplo: Pruebas con Google
sites, Manolo's Web, Clase de 1ESO, Proyecto Alpujarra,.... Este nombre
en el marco superior de toda la web.
2. Ahora Escriba el nombre que usted quiere que contenga la URL o ubicacin para
localizar el sitio.
Ejemplo:
http://sites.google.com/site/pruebascongooglesite
A continuacin usted encuentra algunas opciones para seleccionar, con el fin de agilizar
la creacin se propone pasarlas por alto y editarlas ms adelante
Por ltimo anotamos el cdigo que nos presenta y Crear sitio para terminar.
Google sites
Tutorial Google Sites
2. La pgina de Inicio
El sitio creado tras el registro previo, tendr este aspecto:
La estructura que presenta mientras no la cambiemos es la siguiente:
Marco superior: Nombre del sitio: Pruebas con Google sites
Marco lateral: Men de navegacin
Marco Principal: Pgina Principal (ahora vaco)
Marco Inferior: Archivos adjuntos Comentarios
Google sites
Tutorial Google Sites
Esta es la pgina que se denomina De Inicio, porque es la primera que aparecera
al entrar en la web. Es importante tener especial cuidado en su diseo y contenido
por la importancia que tiene, ya que puede ser el punto de entrada y de partida de
todo el sitio. Ah se debe publicar el mensaje de bienvenida y los enlaces principales
de la pgina.
Para construir esta y cualquier otra pgina que aadamos, hacemos uso de las
herramientas de edicin que aparecen cuando hacemos clic en Editar pgina
Para configurarla adecuadamente, hacemos clic en
Mas Acciones.
3. Editando la pgina
Para ello se debe pulsar el botn Editar pgina.
1.-Lo primero que aparece es una barra de edicin rpida, con la que se puede
editar, podemos el tipo de letra y el tamao, el formato y color de la fuente,
enlaces, numeracin, vietas, sangras y justificaciones, quitar el formato o
el HTML (si somos expertos)
Google sites
Tutorial Google Sites
Se recomienda empezar escribiendo algn texto como saludo o presentacin.
El resultado poda ser como este:
2.- Tambin se tienen 4 mens desplegables que nos proporcionan muchos elementos
a incluir, y posibilidades de configuracin; algunas ya presentes en la barra anterior.
Men insertar: Para insertar cualquier tipo de elemento
Men formato: Cambia tamaos y pone algunos formatos especiales de texto
Men tabla: Para insertar tablas
Men Diseo: A elegir entre pginas a 1 2 columnas
Cualquier cambio que hagamos hay que aceptarlo con Guardar. Cancelamos
haciendo clic en Cancelar.
Google sites
Tutorial Google Sites
Vemos a continuacin todas las posibilidades de estos mens.
3.1- Men Insertar
Es bastante completo por la cantidad de elementos que integra. Estn agrupados
para ms facilidad.
1. Elementos simples:
Imagenes
Enlaces
Indice de contenidos
Linea horizontal
2. Servicios de Google:
Calendario
Documentos de texto
Albumes web de Picasa
Presentaciones
Hojas de clculo
Formularios Videos
(Youtube, Google Video)
3. Gadgets de Google:
Ultimas entradas o
posts Ultimos archivos
actualizados Listas actualizadas
Cuadros de Texto
Mas Gadgets
Google sites
Tutorial Google Sites
3.1.1-Insertar una Imagen
Si la imagen esta en el computador, dar click en Examinar, localizarla y aadir.
Para ingresar una imagen de Internet dar click derecho sobre la imagen y sealar
copiar URL de imagen en el men desplegable.
En el siguiente ejemplo se ingreso una foto:
Google sites
Tutorial Google Sites
Dar click en la imagen, para ver el men de edicin:
Alinear L: Alinea a la izquierda
Alinear C: Alinea al centro
Alinear R: Alinea a la derecha
Tamao S: Tamao pequeo
Tamao M: Tamao mediano
Tamao L: Tamao grande
Original: Tamao original
Ajustar de: Contorno de texto
Ajustar apagado: Sin contorno de texto
Eliminar: Elimina la imagen
3.1.2- Insertar un enlace
Marcar donde va a ingresar el enlace:

Google sites
Tutorial Google Sites
La imagen muestra 3 posibilidades:
1 Enlazar con una pgina que existe en el sitio (Pagina Existente):Solo tenemos que
sealar la que nos interese de entre las que tenemos (aparecen listadas debajo)
2 Enlazar con otra web (Direccin Web): Escribir la direccin de la web
3 Crear una nueva pgina en el sitio y enlazar con ella (Crear pgina nueva): Ingresar el
titulo y elegir el tipo de pgina.
3.1.3- Insertar otros elementos importantes
ndice de contenidos
Insertar>Insertar ndice de contenidos
Como en el ejemplo, un ndice de contenidos
es un ndice que se correspondecon los
distintos apartados o secciones que contiene
un escrito o texto dentro de una pgina. En
ocasiones puede resultar til insertarlo para
navegar ms rpido.
Solo se crear esta tabla si los distintos apartados o secciones del
escrito tienen estilo de encabezado.
Google sites
Tutorial Google Sites
Servicios de Google
Calendario, documentos, hojas de clculo, presentaciones, fotos de Picasa, formularios,
videos pueden ser aadidos a la pgina rpidamente.
Cuando se trata de un documento, hoja de clculo o presentacin, muestra los archivos
almacenados en Google Docs.
Seleccionar el documento
a insertar.
En los otros casos pegar la direccin web o URL del elemento y completar algunos
apartados para configurar a la medida.
Escribir la direccin web
Seleccionar tamao
Incluir bordes y titulos
Google sites
Tutorial Google Sites
Gadgets
En el men hay acceso a lo siguiente:
Entradas Recientes: ltimos posts, anuncios o entradas
Archivos actualizados recientemente: ltimos archivos actualizados
Elementos de lista recientes: ltimos listados
Cuadro de Texto: Caja o cuadro de texto
Tener en cuenta que para insertar cualquiera de los tres primeros gadgets, se deben
crear previamente las pginas correspondientes, es decir debern existir estas
pginas en el sitio y adems contener informacin o archivos.
Por eso al intentar insertar el Gadget: Entradas Recientes. Que se refiere a mostrar
cuales son los ultimos posts o anuncios, nos sale una ventana como esta que nos
indica que solo podemos mostrar una lista de archivos que existan. Adems no
deja seguir.
Google sites
Tutorial Google Sites
SI la pgina esta creada ingresar un ttulo y sealar el n de entradas a presentar.
El resultado final ser como este ejemplo:
Este gadget y otros que se refieren a actualizaciones son propios para insertarlos en
la pgina de inicio para estar puntualmente informado.
Cuando se trata de insertar un cuadro de texto, no habr ningn problema, porque no
depende de ninguna pgina creada. Es un artilugio que nos puede dar bastante juego,
ya que permite incluir no solo texto sino tambin: enlaces, tablas, lneas, imgenes.
Google sites
Tutorial Google Sites
Insertar cualquier gadget
Insertar> Mas
Tendramos que seleccionar o buscar el que nos interese de los miles que anuncia Google.
3.2- El men Formato de Texto
Para establecer el tamao y ms detalles:
Tachado
Superndice
Subndice
Alineacin (Izquierda, centro, derecha)
Tambin se puede borrar el formato
Google sites
Tutorial Google Sites
.3- El Men Tabla
Permite insertar una tabla directamente y de manera grfica.
Una vez creada, con este men se podrn elaborar filas y columnas
cuando se desee y de la misma manera las puede eliminar.
3.4- El Men diseo
nicamente se puede optar entre presentar cada pgina en una o dos columnas.
Google sites
Tutorial Google Sites
4. Agregar nuevas pginas
Ingresar el nombre de la pgina que va a crear y elegir uno de los 5 tipos
disponibles. El contenido de lo que queremos poner en ella nos decantar
por uno u otro estilo.
Finalmente elegir la jerarqua de la pgina. Se ofrecen 2 posibilidades:
1 Ponerla en el nivel ms alto: Es la opcin por defecto. Supone una pgina mas junto con la
Home o de Inicio.
2 Ponerla debajo: Sera una subpgina.
Google sites
Tutorial Google Sites
La diferencia se puede apreciar en el mapa de navegacin siguiente:
Se puede ver como la pgina denominada web page 2,
Es la nica que est debajo de Home.
Todas las dems estn creadas en el nivel alto.
A no ser que desee una disposicin muy especial y
necesite subpginas, lo normal ser no cambiar el nivel
que presenta por defecto.
Cuando se crean subpginas, su nombre con el enlace
aparece justo al final(abajo) de la pgina de la
que dependen.
4.1 Agregar una pgina web simple
Es la opcin Pgina Web.
Presenta una pgina en blanco que estructuraremos y rellenaremos con los contenidos
que queramos. No olvidar que dispone de un men de edicin rpido y aparte 4 mens
desplegables que facilitan las cosas.
Es el tipo de pgina que se adapta a cualquier necesidad y que se puede configurar
combinando e incluyendo todo tipo de elementos.
Google sites
Tutorial Google Sites
Google sites
4.2 Agregar una pgina estructurada tipo tablero
Es la opcin Dos columnas.
Aparecen 4 mdulos vacos como ste en la pgina.
Comprobamos como al hacer clic sobre se
despliega el men Insertar que ya conocemos.
Por tanto podemos montar la pgina rpidamente
aadiendo cualquier elemento: foto, documento,
gadgets,..A cada mdulo, resultando as
perfectamente estructurada.
Pero esta predisposicin inicial se puede alterar,
aadiendo mas mdulos (solo marcar uno y
copiar-pegar donde nos interese). De esta manera
se puede tener por ejemplo en la misma pgina 8
espacios donde insertar 8 fotos.
Tambin se puede eliminar los que quisiramos (marcar con el ratn y Eliminar).
Este tipo de pgina, podra ser til cuando pensamos en una galera fotogrfica, o en cualquier
situacin donde se quieran incluir distintos mdulos o tableros informativos y no nos queremos
complicar para que se alineen, por ejemplo un calendario, post recientes, archivos actualizados,
un documento de texto para consultar.
Veamos un ejemplo de pgina configurada con 3 mdulos: Un calendario, relacin de
novedades y ltimos archivos que se han actualizado. El cuarto mdulo se ha eliminado.
Tutorial Google Sites Google sites
4.3- Agregar una pgina tipo Blog
Es la opcin Anuncios.
Esta pgina se confecciona aadiendo entradas que se convertirn en anuncios informativos
Titulo
Contenido
Aparece una ventana de edicin donde lo primero que se realiza es poner un ttulo
a la entrada y seguidamente escribir el contenido de la noticia o comunicado.
Cuando termine y salve un post aparece este ejemplo:
Observe las distintas partes del blog:
Ttulo
Fecha y hora en que se publica
Autor de la publicacin
El contenido
Al momento de insertar el mdulo de ltimos posts en una pgina, es importante elegir
el n de posts que desea mostrar. Es apropiado para una pgina de inicio.
Google sites Tutorial Google Sites
4.4- Agregar una pgina contenedora de archivos
Es la opcin Archivador
Es una pgina preparada para almacenar y mostrar los archivos
1 escriba el nombre de la pgina (en el ejemplo Archivos) y dar click en aadir archivo.
2 Buscar el archivo con el botn Examinar. Y dar click en Subir.
3 Al ingresar el archivo aparece con la siguiente informacin:
Nombre Descripcin - Tamao Versin Fecha y hora de subida - Autor
Google sites Tutorial Google Sites
Organizar los archivos en carpetas
Primero seleccionar el cuadradito que se encuentra a la
izquierda del nombre del archivo y elegir entre crear una
nueva carpeta o mover a una existente.
Borrando archivos y carpetas
Para borrar un archivo, lo selecciona como se explica en el apartado anterior,
y dar click en Eliminar.
Para eliminar una carpeta solo dar click sobre Eliminar que aparece entre
parntesis y a la derecha del nombre.
Suscribir a cambios
Es importante estar informados de los cambios que se realizan en la pgina,
para eso dar click en el botn Subscribe to page change.
Si hay alguna novedad o modificacin, llegar un correo a la cuenta donde
informa de los cambios realizados.
Google sites Tutorial Google Sites
4.5- Agregar una pgina tipo lista
Es la opcin Lista.
Se trata de una pgina que contiene listados confeccionados a la medida.
Como en los casos anteriores lo primero ser poner el nombre a la pgina. Entonces,
se abre una ventana con 4 opciones.
Al momento de dar click sobre cualquiera de las tres primeras aparece unas plantillas con
las listas ya estructuradas. Se recomienda la ltima opcin (Crear tu propia lista), donde
pueden crear desde principio listados definiendo el numero de columnas.
Google sites Tutorial Google Sites
Hay que poner nombre o etiqueta a la columna y al mismo tiempo elegir el tipo de contenido
que va a tener. As podr optar por:
Casilla de verificacin: Si usted quiere colocar un cuadradito de opcin para marcar o
desmarcar.
Fecha: Para poner fechas
Desplegable: Men desplegable para seleccionar distintas opciones
Texto: Para aadir texto
URL: Para poner hiperenlaces
Jugando con todas estas posibilidades podr confeccionar cualquier listado que se adapte a
sus necesidades.
En el siguiente ejemplo, se recopila informacin, y se define para ello 5 columnas:
Nombre: Nombre y apellido de un alumno. Utilizar la opcin Texto
Tema 1-Tema 2-Tema 3: Llevar el control de 3 temas. Marcando la casilla si est supera
do. Utilizar la opcin Casilla de verificacin
Global: Ingresar una valoracin. Utilizar la opcin Desplegable y elegir entre Mal-Bien-Muy
bien.
En otras ocasiones nos puede interesar reflejar fechas, enlaces, datos de contacto.
Google sites Tutorial Google Sites
Sobre este ltimo ejemplo que tiene 3 registros, veamos como:
1. Aadimos un nuevo registro a la lista
Haciendo clic en Aadir elemento rellenaramos el formulario que nos parece con los
datos requeridos. Cuando salvamos se aadir el nuevo registro.
2. Ordenamos los datos
Haciendo clic en Ordenar, que se encuentra justo debajo de la etiqueta de cada colum-
na. Nos da la posibilidad de ordenar alfabticamente de manera ascendente o descen-
dente.
3. Modificamos la estructura del listado
Haciendo clic en Personalizar esta lista en cualquier momento podemos personalizar el
listado modificando, aadiendo o eliminando las columnas.
Google sites Tutorial Google Sites
5. Configurar el sitio
5.1- El acceso o como se comparte con los dems
Configuracin del sitio>Compartir este sitio
Un sitio puede ser compartido con todo el mundo (pblico) o con los usuarios que espe-
cifiquemos. Tenemos que explicar primero que hay 3 posibilidades de interactuar:
1 Como propietario
2 Como colaborador
3 Como simple usuario o lector
El propietario es el que tiene todos los privilegios para gestionar el sitio. El colabora-
dor puede:
Crear, editar, mover y borrar pginas
Aadir archivos adjuntos
Aadir comentarios
Aadir y eliminar pginas del men lateral de navegacin
Subscribirse a los cambios que se produzcan en el sitio
El usuario simple o lector, solo puede ver las pginas.
Google sites Tutorial Google Sites
El sitio creado nos permite invitar a otros como propietarios, colaboradores y lectores, a travs
del formulario donde se escribirn las direcciones de correo, que podemos extraer sin
ningn problema de nuestros contactos de gmail.
Si el sitio es pblico para que todo el mundo pueda verlo, el apartado de permisos avanzados
deber tener marcada la siguiente casilla.
Si se desea que sea privado, solo para unos pocos, deberemos desmarcarla.
Recuerdo que esta opcin tambin estaba disponible durante el proceso de creacin y registro
inicial del sitio.
5.2 Configur la apariencia
Configuracin del sitio>Cambiar aspecto
5.2.1-Cambiar el diseo del sitio
Por defecto, ocupa nuestra pgina el ancho de toda la pantalla:100
Google sites Tutorial Google Sites
Si se quiere un espacio libre a ambos lados y no completar la pantalla se cambia la anchu-
ra a 90, 80, 70.
Quintando la opcin cabecera, eliminar el marco superior que contiene el ttulo y el logo.
La altura est por defecto al tamao del logo. Se puede cambiar tambin esta altura.
Quitando la opcin Barra lateral, eliminara la barra lateral. En este caso tendr una web a
toda pgina y sin marcos laterales.
En el ejemplo se ha cambiado la dimensin del sitio al 80 % y el ancho de la barra lateral a
140 pixeles.
5.2.2- Cambiar el logo
Est predeterminado arriba a la izquierda en la cabecera, y no admite otra posicin.
Si queremos poner otro logo que no sea el de Google sites , haremos clic en cambiar
el logotipo.
Google sites Tutorial Google Sites
5.2.3- Configurar la barra lateral.
Este marco que como vemos tiene una anchura de 150
pixeles, est formado en un principio por 2 cuadros o
mdulos:
Navegacin: Men de navegacin
Actividad reciente del sitio: Informacin sobre la reciente
actividad en el sitio.
Con las opciones de: editar, suprimir o aadir un
nuevo mdulo (Aadir un elemento de la barra lateral)
Veamos con mas detalle cada una de las opciones y como
lo adaptamos a nuestras necesidades
En el men de navegacin se sita los hiperenlaces a pginas que existen dentro del sitio.
Google sites Tutorial Google Sites
Se puede cambiar el ttulo Navegacin por otro. En el ejemplo esta nombrado como Men.
Con las dos flechas que aparecen a la derecha se cambia el orden del listado de las pginas
Aadir nuevos mdulos:
Para que aparezcan en la barra lateral. Haciendo clic en +Aadir un elemento de la barra
lateral. Vemos como se despliegan 5 alternativas.
1-Navegacin: Enlaces a pginas individuales del sitio. Como lo explicado antes.
2-Texto: Para aadir texto.
3-Actividad reciente del sitio: Una lista de la reciente actividad del sitio
4-Mi actividad reciente: Una lista de la reciente actividad como usuario del sitio
5-Cuenta atrs: Un contador de dias a una fecha que hay que especificar
Aadir el mdulo Texto, puede resultarnos til para insertar enlaces a sitios externos, incluir
iconos y dibujos, logos y publicidad.
Aadir una Cuenta atrs, puede tener una finalidad informativa para destacar una fecha de un
evento o acontecimiento.
Nos puede interesar, en determinadas ocasiones el aadir varios mdulos. As, varios mens
de navegacin junto con enlaces a otros sitios de inters, ms de un contador de fechas veni-
deras.
Una vez creados los mdulos, podemos ordenarlos en la barra lateral. Pinchando y arrastrando
se colocarn donde queramos.
Otro camino, quizs ms rpido para configurar el marco lateral, sera acceder desde Editar
barra lateral, que lo localizamos justo al final del marco.
Google sites Tutorial Google Sites
5.2.4- Cambiar los colores y fuentes
Aspecto> colores y fuentes
Con la barra deslizante, seleccionar un elemento para cambiarle el color del ttulo,
fondo, marco lateral.
Podr poner una imagen como fondo de cabecera, de pgina, de barra lateral. Al selec-
cionar el elemento, tendr que buscar la imagen con examinar.
Podr cambiar algunos elementos, tambin el tipo de letra o fuente.
Cualquier cambio que se realiza lo muestra en la parte inferior de la pantalla, lo que
agiliza y facilita esta tarea.
5.2.5- Cambiar el tema del sitio
Aspecto> Tema
Google sites Tutorial Google Sites
Se cuenta con una serie de temas, cada uno con combinacin de colores y fuentes.
Para probarlo y ver como quedara, solo debe hacer click en vista previa
5.3- Otros ajustes de configuracin
Es la pestaa Mas
Desde aqu podr:
Poner nombre al sitio
Mostrar el nombre del sitio en lo alto de las pginas.
Describir brevemente el sitio
Indicar si el contenido es solo para adultos.
Cambiar la pgina de entrada cuando se accede al sitio: la denomina pgina de destino.
Por defecto es la pgina Home pero podr cambiarla por otra con cambiar.
Activar las estadsticas a travs de Google Analytics.
Haciendo clic en Ms informacin se nos presentan unas instrucciones de como
hacerlo. Deberemos entrar en Google Analytics, darnos de alta y siguiendo todos los
pasos, llegar un momento en que nos mostrar un cdigo como el que yo he pegado
en mi sitio.
Para comprobar si funciona deberemos esperar aproximadamente 24 horas. Siempre
que queramos ver las estadsticas deberemos acceder a Google Analytics.
Google sites Tutorial Google Sites
Un detalle importante a tener en cuenta se refiere al espacio que hay ocupado en el sitiio
(100 MB disponibles). El cuadro se encuentra situado a la derecha.
Configuracin de la pgina
Una vez tenga abierta una pgina
Mas acciones>Configuracin de la pgina.
Desde aqu podr entre otras cosas, mostrar o no al final de la pgina comentarios y permitir
archivos adjuntos.