Creando el Sitio

Google Sites es un Gestor de Contenidos (o CMS por sus siglas en ingles Content Management System) ofrecido
gratuitamente por Google para la construcción de sitios en internet de una manera rápida y sencilla. En este
documento, veremos los fundamentos básicos para crear un sitio Web con esta herramienta.

Lo primero será entrar a la herramienta a través de la dirección http://sites.google.com/ y colocar su dirección de

correo Gmail y su Password. Ten en cuenta que si la página abre en ingles, podrás cambiar el idioma a español
utilizando el menú desplegable ubicado en la esquina inferior derecha.

Si es la primera vez que ingresas en la herramienta, te aparecerá una pantalla como la siguiente donde deberás
hacer clic en el botón Crear
Una vez hecho esto, deberás primeramente seleccionar la plantilla que mejor se adapte al sitio que quieres crear.

Google Sites generalmente propone los más usados (los cuales varían con el tiempo). Sin embargo dispones de una
galería con una gran cantidad de plantillas prediseñadas para facilitar la construcción de tu sitio. También debes
indicar el nombre del sitio y la dirección URL a utilizar.

Editando el sitio (I)

Una vez creado el sitio, debemos ponernos con las manos a la obra, empezando por la página de inicio. Es
importante recordar que esta página será la primera que verán nuestros visitantes, por lo que lo más recomendable
es evitar que esté muy recargada a fin de que tarde lo menos posible en cargar y además, que invite a revisar el
resto de los contenidos que dispondremos en los menús tal como se verá más adelante. Si dejamos tanto la plantilla
como el tema por defecto, al entrar veremos una página como la que se muestra a continuación:

Tal como se muestra en la imagen anterior, en la esquina superior derecha hay cuatro botones con los que
trabajaremos de manera constante: un lápiz para modificar la página actual, una hoja para agregar una página
nueva, un botón de Más para otras acciones y un último botón para Compartir el sitio.

2.1. Modificar páginas

La función del botón modificar la página es activar el Editor HTML que nos permitirá modificar el contenido de
cualquier página del sitio indistintamente de la plantilla que se esté utilizando (de esto se hablará un poco más
adelante).
Tal como se puede ver en la imagen anterior, al hacer clic sobre este botón, se activan las barras de menú y de
formato, los espacios editables (título de la página y área de contenido) y aparecen en la esquina superior derecha
los botones de Guardar y Cancelar. Es sumamente importante hacer clic sobre el botón Guardar para que se
guarden los cambios que hemos hecho, caso contrario, se descartará cualquier cambio realizado. La barra de
formato funciona igual que en la mayoría de los editores de texto, y para conocer la función de cada uno de los
botones basta con posar el cursor sobre él lo que hará aparecer una pequeña descripción o ToolTip tal como se
muestra en la siguiente imagen:

El menú Diseño permite definir la estructura de diagramación del contenido de la página que estemos editando con
una gran cantidad de opciones disponibles. El uso de una u otra opción dependerá fundamentalmente del contenido
que se quiera agregar a la página. Por lo que es a discreción del diseñador, utilizar un modelo u otro de diseño.

El menú Tabla permite agregar o eliminar tablas, así como ajustar las que ya se hayan insertado y/o suprimiendo
filas encima o debajo, o columnas a la izquierda o a la derecha de la celda que tengamos seleccionada.
El menú Formato permite agregar otras opciones de formato a los textos no disponibles en la barra de formato tales
como: Cabeceras a distintos niveles (Cabecera (C2); Subcabecera (C3); Cabecera inferior (C4)), texto tachado,
superíndice, subíndice, texto tipo código, bloque de cita (Código blockquote), y la alineación del párrafo (única
opción disponible en la barra de formato). A continuación una imagen con ejemplos de los distintos formatos
nombrados anteriormente:

Finalmente el menú Insertar es el más interesante de todos pues permite insertar en la página una serie de objetos
de diversa índole tales como: imágenes, enlaces, gráficos, fotos de Picasa, documentos, hojas de datos y
presentaciones de Google Docs, videos, Gadgets, etc.
A través de estos menús podrá diseñar páginas como todo un profesional y en muy poco tiempo, es solo cuestión de
poner a volar su creatividad.

En este punto es importante tener en cuenta dos cosas. En primer lugar un nombre completo puede tener todo tipo
de caracteres especiales (espacios, paréntesis, puntos, comas, etc.) pero la dirección URL no; y en segundo lugar, el
nombre puede ser cualquiera, pero la dirección URL dependerá de la disponibilidad del nombre. Por ejemplo, El
nombre de sitio Aprendiendo Google Sites es totalmente válido, pero la dirección URL aprendiendogooglesites no
está permitida sea porque otra persona lo está utilizando o porque Google se la reserva por algún motivo.

Podremos saber que una URL no está permitida porque al intentar crear el sitio, ubicado en el centro de la parte
superior de la ventana veremos un mensaje como este:

También puedes seleccionar un tema predefinido al ampliar el menú Selección de un tema:

Al desplegar el menú Más opciones podrás definir la descripción del sitio (fundamental para ayudar a los buscadores
a colocar tu sitio en los primeros lugares de búsqueda cuando busquen sitios de tu tema de trabajo), el nivel de
acceso al sitio al compartirlo con “cualquier usuario o solo con las personas que especifique” y en caso de ser
necesario, la opción de indicar que el sitio contiene contenidos solo para adultos.
Finalmente, coloca el código de seguridad que le indica al sistema que eres un humano y no un bot, y haz clic en el
botón Crear.

Si todos los datos ingresados fueron correctos, podrás ingresar a la página de Inicio de tu Sitio donde podrás poner
manos a la obra con tu contenido personal.
Editando el sitio (II)

2.2. Creación de páginas y las plantillas

El botón Página nueva permite agregar más páginas sitio. Al hacer clic sobre este botón, lo primero será indicar el
nombre de la página, luego la plantilla a utilizar (que analizaremos más adelante), y finalmente la ubicación en el
menú del sitio tal y como se muestra a continuación:

Con respecto a la ubicación

Es importante aclarar lo siguiente: siempre que agreguemos una página, la misma estará por defecto en el Nivel
superior, es decir se mostrará en el menú al mismo nivel que la página de inicio. Sin embargo, si queremos crear
estructuras de contenido como la que se muestra a continuación donde algunas páginas son sub-contenido de otras:

- Estrategias didácticas en la Web

- WebQuest
- Tareonomía de Dodge
- Wikis

Se debe abrir primero la página a la que le queremos agregar la página nueva y al momento de crear la página
seleccionar la opción Clasificar la página en… tal como se muestra en la siguiente imagen:
Con respecto a las plantillas

Google Sites ofrece las siguientes 4 plantillas de página a utilizar:

Página Web Donde se pueden colocar cualquier tipo de contenido estático tal y como ya se discutió en el apartado
anterior.

Anuncios Miniblog donde se pueden postear actualizaciones con respecto a algún tema. Un ejemplo puede ser
en el caso de utilizar el sitio como un aula virtual, este tipo de página puede servir como una cartelera
de anuncios para los profesores.

Archivador Página tipo disco duro virtual donde el dueño del sitio puede subir archivos de cualquier tipo (PDF,
DOC, XLS, ZIP, MPG, AVI…) que los visitantes pueden descargar.

Lista Este tipo de páginas, agregan una funcionalidad interesante a nuestro sitio, y es la posibilidad de incluir
datos utilizando diversas columnas que fungirán como filtros de dicho contenido. Los ejemplos más
sencillos son lista de notas y actividades de un proyecto. En el primer caso, podríamos tener como
columnas: Cedula o ID de la persona, actividad y nota, y en el segundo, responsable, tarea, estatus.
Pudiendo el lector en cualquiera de los casos organizar el contenido en cualquiera de las columnas
disponibles de acuerdo a su interés

Es importante destacar que indistintamente de la plantilla seleccionada, TODAS admiten contenido que puede ser
agregado con el editor HTML quedando este por encima del contenido específico de la plantilla. Veamos esto un
poco más a fondo:

La plantilla de página Web solo permite agregar contenido utilizando el editor HTML que ya se describió en la
sección de modificación de la página principal.

La plantilla de Anuncios funciona como un blog donde vamos posteando noticias, cada cierto tiempo. Dichos post o
entradas, son organizadas automáticamente en orden cronológico inverso, es decir, la última entrada agregada va
primero, debajo la penúltima, y así sucesivamente. Un dato importante es que aquellos visitantes que utilizan
lectores RSS pueden suscribirse a ellas utilizando el vínculo de Suscribirse a las entradas disponible en la página.
En la imagen anterior, se destacó el botón Crear entrada. Será este botón el que permitirá postear nuevas noticias
activando un editor como el que se muestra a continuación:

De este editor, es importante destacar varios puntos:

1. La caja de Entrada sin título es donde se debe indicar el título de la nota que deseemos publicar, y debajo
está la caja de contenido que puede ser editada de la misma manera que cualquier página Web tal y como se
describió en el apartado de Edición de página.

2. La diferencia entre el botón Guardar borrador y el botón Guardar, es que el primero, permite guardar el
post y diferir su publicación, mientras que el segundo, guarda y publica los últimos cambios que se hayan
agregado a la entrada.

Conforme se van agregando posts, los mismos se organizan automáticamente en orden cronológico inverso y se
colocan automáticamente como submenú de la página principal de Anuncios tal y como se muestra en la siguiente
imagen:
Acciones de página

Historial de revisiones

Cada vez que realizamos cambios en alguna página, el sistema guarda una copia de las distintas versiones en orden
cronológico inverso, es decir la última versión primero a objeto de poder mirar y de ser necesario revertir el diseño a
un estado anterior tal como se muestra en la siguiente imagen de ejemplo:

Configuración de la página

Dependiendo de la plantilla página con la que se esté trabajando, se podrán ajustar algunas opciones tales como:
  Mostrar/Ocultar el título de la página [disponible en todas las plantillas].

 Permitir/No permitir comentarios [disponible en todas las plantillas].

 Mostrar/Ocultar enlaces a subpáginas [no disponible en el MiniBlog].

Si bien la herramienta dispone de la plantilla de Archivador para gestionar archivos dentro del sitio, TODAS las
plantillas admiten agregar archivos adjuntos con la salvedad de que no se pueden organizar en carpetas tal y como
lo permite la página de tipo archivador.

A continuación se muestra una imagen con todas las opciones disponibles recordando que como ya se indicó algunas
de ellas no están disponibles en algunas plantillas:

Presentación del Sitio

Dependiendo de la plantilla seleccionada al momento de crear el sitio, variará la distribución del sitio, pero partiendo
de la plantilla base con la que se ha trabajado en todo este material, la distribución por defecto de un sitio en Google
Sites es la que se muestra en la siguiente imagen:
Tal como se puede observar, por defecto los sitios creados con esta herramienta tienen una cabecera, donde va el
título del sitio. En esta posición, se puede colocar un logo personalizado haciendo clic sobre el vínculo de Cambiar
logotipo y buscar la imagen en una unidad local para subirlo y ver su vista previa tal como se muestra en la siguiente
imagen:

El diseño por defecto, también tiene una barra lateral con el menú de navegación predeterminado donde van
apareciendo cada una de las páginas que vamos creando.
Dicho menú puede o no mostrar un título, organizarse automáticamente (en cuyo caso debemos indicar la cantidad
de niveles o sub-menús a mostrar), permitirnos que lo reorganicemos manualmente, incluir links al mapa del sitio
(sitemap) y/o a la actividad reciente del sitio.

Las imágenes que se presentan a continuación muestran las opciones de configuración en caso de que se decida que
el menú se organizará automáticamente (izquierda) o en caso de que se organice manualmente (derecha).

Tal como se puede observar en la imagen de la derecha, las flechas en el lateral derecho, sirven para reubicar las
páginas disponibles sea hacia arriba o hacia abajo, y las flechas de izquierda y derecha el nivel del menú (principal o
submenú). También se pueden eliminar páginas (con la x), Añadir páginas del sitio previamente creadas y que en
algún momento se eliminaron del menú, así como agregar direcciones de páginas Web (URLs) externas.

Este diseño, incluye el espacio de contenido en el que no se puede hacer nada en esta sección y el Pie de página del
sistema donde se pueden ocultar/mostrar los links para:

 Ver sitio para escritorio cuando se está navegando con la versión móvil,

 Acceder a la cuenta de Google.

 Cambios recientes del sitio

 Imprimir página.

Diseño del sitio

En la parte superior de todo el diseño, hay un botón denominado Cambiar diseño del sitio que permite hacer
diversas modificaciones sobre la presentación del sitio entre las cuales destacan:

 Cambiar el ancho del sitio a una cantidad de pixeles específicos o a un porcentaje determinado de la
pantalla.
  Mostrar/Ocultar la cabecera (Header) además de permitir definir su altura (cantidad de pixeles específicos,
automática o de acuerdo al tamaño del logo en caso de tenerlo) así como la alineación vertical y horizontal
de su contenido.

 Mostrar/ocultar una barra de navegación horizontal (cuyo contenido debe ser agregado manualmente
como se verá más adelante).

 Mostrar/ocultar la barra lateral así como definir su ubicación (izquierda o derecha) y su tamaño en pixeles.

 Mostrar/ocultar un pie de página (distinto del pie de página del sistema) así como definir su altura
(automática o en pixeles específicos).

La siguiente imagen muestra cómo se ven las opciones de ajuste de la distribución anteriormente descritas:

Como se acaba de mencionar, en caso de querer agregar un menú horizontal, luego de activarlo en el conjunto de
opciones anteriormente descrito, debe ajustarse manualmente en la página principal del diseño haciendo clic sobre
el vínculo de editar contenido de navegación horizontal tal como se muestra a continuación:
Tal como se observa a continuación, igual que con el menú lateral, se deben Añadir páginas previamente creadas en
el sitio o direcciones Web (URLs) Foráneas y utilizar las flechas de dirección (arriba, abajo, izquierda y derecha) para
ajustar la posición de los objetos del menú. También se puede definir cómo se mostrarán dichas opciones, pudiendo
elegir entre: cuadros, pestañas o links.
IMPORTANTE: cuando se utiliza el menú horizontal, para reajustar las opciones de este menú, debe reactivarse en
el botón de Cambiar diseño del sitio.

Temas, colores y fuentes

Un aspecto importante en el diseño de un sitio, tiene que ver con los colores y las fuentes que utilizamos, algo así
como el maquillaje o la estética del sitio. En este sentido, Google Sites ofrece dos opciones. La primera es un
conjunto de temas con combinaciones de colores y fuentes creados por la propia Google, así como temas creados
por otros usuarios. Tal como se puede observar en la siguiente imagen, hay una gran colección de temas
predefinidos de los cuales escoger. Y solo con hacer clic sobre la lupa ubicada debajo de cada tema o en el botón de
vista previa ubicado la parte superior, se abrirá una ventana mostrando un ejemplo de nuestro sitio con la nueva
plantilla seleccionada.
Siguiendo con la imagen anterior, al hacer clic sobre el botón Buscar más temas ubicado a la derecha de la página,
podremos escoger entre los temas creados por otros usuarios. Estos temas están en constante cambio pues los
usuarios de la herramienta, están agregando continuamente nuevos temas.

También podrás crear tu propio tema haciendo clic sobre el vínculo de crea tu propio tema personalizado o
directamente sobre la opción colores y fuentes del menú izquierdo lo cual te llevará a una página como la que se
muestra a continuación donde es importante destacar que tal como se resalta, en esta opción de menú está
disponible la opción de Buscar más temas (en la esquina superior derecha) que permite seleccionar temas
prediseñados por otros usuarios, así como un listado con los temas básicos creados por Google en un menú
desplegable a la izquierda, esto es con la intención de ahorrar tiempo partiendo de un tema ya hecho:
Si los temas existentes no cumplen con sus expectativas, tal y como se observa en la siguiente imagen podrá
seleccionar la opción que requiera y realizando los ajustes que el sistema permita al lado derecho del recuadro de
opciones:

De la imagen anterior es importante resaltar dos aspectos. El primero es el recuadro de opciones susceptibles de
cambio o de ajuste en la página (imagen de fondo, color de fondo, fuente de la página…) así como las opciones de
cada selección a la derecha de este recuadro.

Así mismo, es importante denotar que debajo de este recuadro hay una vista previa de los cambios que se vayan
realizando. Finalmente, está el botón Guardar de uso obligatorio para que el sistema guarde los cambios que se
realicen sobre la apariencia o Look & Feel del sitio.

En esta sección, hay muchas opciones susceptibles de cambio, es importante ir explorando cada una de ellas, pues es
la mejor manera de conocer cómo influye sobre el diseño particular de cada sitio cada una de las opciones allí
disponibles, recordando siempre que puede utilizar el botón Cancelar para evitar que se guarde cualquier cambio
que no se desee, así como el botón de Borrar todas las personalizaciones que elimina cualquier cambio que se haya
hecho, devolviendo el look de la página al tema original.