Eduardo Pizarro y Javier Montalbán

ÍNDICE:

FUNCIONES BÁSICAS

Empezando:...................................................................................................................................................................3

Las herramientas de trabajo:.........................................................................................................................................4

Creando las secciones:..................................................................................................................................................4

Estableciendo la navegación de nuestra página:...........................................................................................................5

Cambiando los colores y fuentes de nuestro sitio:........................................................................................................7

Recolocando las páginas:..............................................................................................................................................7

Otras funciones básicas:................................................................................................................................................8

FUNCIONES AVANZADAS

Funciones avanzadas:………………………………………………………………………….………..………………………………………….…………….10

|

Eduardo Pizarro y Javier Montalbán

Empezando:

El objetivo principal de este tutorial es que, mediante su lectura, cualquier persona sea capaz de crear su propio website mediante la herramienta Google Sites. Esta opción que nos ofrece Google sirve, básicamente, para crear una página web de forma sencilla e intuitiva. Como parte negativa, diremos que las posibilidades que nos ofrece también son limitadas, pero es una forma perfecta de adentrarnos en el mundo del diseño de webs.

Para comenzar, lo primero que debemos hacer, es entrar a la página de Google Sites. Una vez allí, deberemos ingresar nuestro nombre y contraseña de GMail (si no se tiene una cuenta de correo electrónico de GMail este es un buen momento para hacerse una, aunque Google permite la creación del site con cuentas de otros servidores también, aunque no todos). Una vez ingresamos con nuestra cuenta nos encontraremos con una página en la que, en un futuro y cuando tengamos alguna página creada, nos dará la opción de entrar a ellas para administrarlas.

Si queremos comenzar con la creación pincharemos donde dice: Crear un sitio nuevo, con lo que llegaremos a la siguiente pantalla:

En primer lugar nos pide que elijamos una plantilla para nuestro sitio. En este caso elegiremos la “plantilla en blanco”, pues es la mejor manera de recorrer todos los pasos necesarios. Un poco más abajo deberemos introducir el nombre que tendrá nuestro sitio. Este nombre será modificable a cambios más adelante, por lo que no debe ser un problema si aun no lo tenemos muy claro. Para el ejemplo yo voy a llamar a la página web que voy a crear “Manual”. Automáticamente la página nos pondrá ese mismo nombre en la extensión que tendrá nuestra página, en caso de que esté ocupado ese dominio solo tendremos que añadir algunos números al final (por ejemplo) y ya podremos utilizarlo. Esto es debido a que no pueden existir dos páginas con el mismo nombre.

Desde esta misma pantalla también podemos elegir un tema para nuestra página. Esto es algo muy personal y debe ir acorde al gusto del creador, pero pasa como con el nombre, que

|

Eduardo Pizarro y Javier Montalbán

después es totalmente modificable, por lo que tampoco es una decisión importante, ya que se puede tanto cambiar de tema más adelante, como modificar un tema a nuestro gusto.

Ya casi para finalizar con este apartado, pinchamos donde dice “más opciones” y decidimos los parámetros de nuestra página. Aquí podemos añadir una pequeña descripción de lo que tratará la página para que la gente pueda leerlo antes de entrar, estableceremos el nivel de privacidad de nuestro sitio y marcaremos si contendrá algún tipo de material para adultos.

Por último, escribiremos el código que nos marca Google en el captcha (para demostrar que no somos una máquina creando páginas de forma aleatoria o con fines publicitarios) y ya tenemos creada nuestra página web.

Las herramientas de trabajo:Una vez tenemos creada la que a posteriori será nuestra página principal, la puerta de

entrada a nuestro sitio, vamos a explicar las herramientas que Google Sites nos ofrece para crearlo. Básicamente disponemos de dos menús de edición. Al primero de ellos accedemos desde la página principal, pinchando arriba a la derecha donde pone: Editar página. Al hacerlo se nos mostrará una barra horizontal sobre la página en la que tendremos las herramientas de trabajo. Las funciones básicas de este menú de edición son las de cualquier editor de texto sencillo y nosotros lo usaremos para editar el contenido de la página en la que nos encontramos (cambiar el título, rellenar con información, añadir fotos, cuadros, tablas…). Una vez hayamos terminado y, para volver a salir del menú de edición, pulsaremos en Guardar o en Cancelar (donde antes estaba editar página) en función de si queremos guardar los cambios o no.

El otro menú de edición del que disponemos es el que nos permite cambiar las configuraciones generales de todo el sitio, no solo de la página en la que nos encontremos. Las posibilidades que nos ofrece son muchísimas, las cuales desarrollaremos más adelante un poco más detenidamente. Para acceder a este menú tenemos varias opciones. La primera y más rápida es pinchar donde dice “Editar barra lateral” justo debajo de la barra lateral que, por defecto, aparece en la parte izquierda de la pantalla. ¿Pero qué sucede si hemos eliminado esa barra lateral? Pues no sucede absolutamente nada, porque podemos acceder a ese mismo menú de edición pulsando en Más accionesAdministrar sitio. El menú al que accedemos por cualquiera de estas vías (nos lleva a una pantalla diferente) está dividido en secciones para modificar el contenido, la configuración o la apariencia de nuestro sitio (no confundir la sección de contenido con el menú anterior, el cual nos sirve para modificar el contenido de una página en concreto, no del sitio, este es un menú más general).

Creando las secciones:Lo primero que vamos a aprender a hacer con nuestro sitio es a crear las diferentes

secciones que queremos que tenga, o lo que es lo mismo, las diferentes páginas que formarán el sito. Para ello, desde la página principal, pincharemos en “Crear página”, arriba a la derecha.

|

Eduardo Pizarro y Javier Montalbán

Al pinchar nos iremos a una página similar a la de la creación del sitio, donde tendremos que elegir el tipo de página que queremos añadir. La primera opción, página web, es similar a la que tenemos como página principal. Las otras tres opciones tienen tres funciones diferentes, la plantilla de anuncios permite escribir por entradas, como si de un blog se tratase (con RSS incluido), la opción archivador permite subir y organizar archivos desde nuestro ordenador y la opción lista nos da la posibilidad de crear un listado a partir de una plantilla o desde cero. Tras elegir el tipo de página le pondremos un título y decidimos en qué nivel la situaremos, pudiendo ser en el nivel superior (en un esquema hipotético de la página y sus secciones, a la misma altura que la página principal) o dentro de la página que tuviésemos seleccionada (en este caso la principal). Para el ejemplo yo crearé tres páginas, llamadas 1, 2, 3 y 4 respectivamente, cada una con un tipo de plantilla diferente.

Como habréis podido observar, al ir creando las páginas, se os han ido colocando en la barra lateral de la página, donde pinchando podréis acceder a ellas.

Esto podremos dejarlo así, de tal modo que cada página que creemos se colocará automáticamente en la barra lateral (y si la creamos dentro de otra de las páginas también se situará dentro de ella en esta barra) o podemos hacerlo de forma manual, lo que explicaremos más adelante.

Llegados a este punto, lo mejor será que creemos todas las secciones que vaya a tener nuestra página, aunque luego podamos añadir más en cualquier momento.

Estableciendo la navegación de nuestra página:En este apartado del manual vamos a aprender a establecer en nuestra página los

diferentes menús de navegación que nos ofrece Google Sites.

La navegación es la forma que tienen los visitantes de, valga la redundancia, navegar por nuestro sitio. Básicamente vamos a tener dos opciones, de las cuales podremos elegir solo una de ellas, o las dos, en función de lo que busquemos o queramos. Estas dos opciones son la barra lateral (por defecto) en la que aparte del menú de navegación podremos poner muchos

|

Eduardo Pizarro y Javier Montalbán

otros elementos, y la barra de navegación horizontal, cuya única función es la de navegar por el sitio.

Para trabajar con estas barras, debemos ir al menú de edición al que accedemos desde el botón “Editar barra lateral” (a partir de ahora, menú general). Una vez en él, iremos al apartado llamado “presentación del sitio”. Desde aquí tendremos la posibilidad de editar y modificar la cabecera de la página (donde podemos insertar un logo o una imagen, por ejemplo) y la barra lateral. Además también tenemos la posibilidad, si pinchamos donde dice “cambiar el diseño del sitio” de modificar otros parámetros de nuestra página y añadir nuevos elementos como la barra de navegación horizontal o un pie de página personalizado (ambas opciones se añaden seleccionándolas en este menú.

Para el ejemplo de la página Manual yo añadiré ambas, una barra de navegación horizontal y un pie de página, sin modificar el tamaño de ninguna de las partes del diseño del sitio.

Una vez tenemos la barra de navegación horizontal, vamos a hacer de ella algo útil (pues ahora solo aparecerá la página principal en ella). Para ello pulsaremos, dentro del menú generalpresentación del sitio, en “editar el contenido” de la sección de la barra horizontal. Al hacerlo aparecerá una ventana nueva en la que podremos seleccionar las páginas que queremos que aparezcan en nuestra barra. Para seleccionarlas pincharemos en “Añadir página” y se nos abrirá una ventana nueva en la que, de una en una, deberemos seleccionar las páginas que saldrán, sin importar el orden, pues luego podremos modificarlo. Para hacerlo solo tendremos que pinchar sobre la página que queremos mover, en esta misma ventana de configuración de la navegación y moverla arriba o abajo con las flechas que vemos a la derecha, o hacia izquierda o derecha si lo que buscamos es insertarla dentro de otra página o sacarla. Una vez colocadas las páginas seleccionaremos el estilo con el que aparecerán, de entre las tres posibilidades que se nos ofrecen (cuadros, pestañas o enlaces). La recomendación es que los probéis los tres para decidir cual os gusta más. Yo, para el ejemplo, usaré las pestañas. Una vez hemos terminado pulsamos en aceptar, guardamos los cambios y volvemos al sitio para ver el resultado. Si todo ha ido bien deberíamos tener una barra de navegación horizontal con la página principal y las cuatro páginas numeradas del uno al cuatro, a las que podremos acceder pinchando sobre ellas.

Para modificar la barra lateral volvemos al menú generalPresentación del sitio. Aquí buscaremos el cuadro donde dice: “Barra Lateral”. Dentro de él nos encontraremos con un cuadro con el título “Navegación”. Este cuadro representa una zona de nuestra página, dentro de la barra lateral, en la que podemos poner enlaces a las diferentes páginas de nuestro sitio. Como ya dijimos anteriormente, si no tocamos nada automáticamente se nos irán colocando las páginas según las vayamos creando, pero vamos a explicar cómo se puede hacer esto de forma manual, para poder darle el formato que queramos. Para hacerlo pinchamos en “editar”, dentro del cuadro de navegación. Al hacerlo se nos abrirá una ventana en la que deberemos quitar la selección al cuadro que dice “Organizar automáticamente mi navegación”. Al hacerlo nos aparecerá una ventana similar a la que nos apareció con la barra de navegación horizontal y el proceso de añadir las páginas es el mismo que antes. Además tenemos la posibilidad de poner un título a nuestro cuadro de navegación y de decidir si este título será visible o no.

|

Eduardo Pizarro y Javier Montalbán

En la barra lateral, por defecto, estará puesto para que aparezca un link al “Sitemap” de nuestro sitio. Si queremos eliminarlo solo tendremos que deseleccionar la opción dentro del cuadro de navegación de la barra lateral.

Para ambas barras, en caso de que queramos que las páginas que se encuentran dentro de otra salgan en un menú desplegable, lo que debemos hacer es ir al menú generalpresentación del sitioeditar navegación y, con la página que queramos que aparezca dentro de otra seleccionada, pinchar en la flecha de la derecha.

Para el ejemplo, situaré las páginas 1, 2, 3 y 4 dentro de la página principal en la barra lateral, pero fuera de ésta en la barra horizontal, para que puedan verse ambos ejemplos. Dejaré también el link al sitemap en la barra lateral. Además he puesto como título del cuadro de navegación la palabra “Menú” y lo he marcado como visible.

Cambiando los colores y fuentes de nuestro sitio:El objetivo de esta sección es que cada uno podamos darle el aspecto a nuestro sitio que

más nos guste. Para ello hay dos opciones: Elegir un tema prediseñado y modificarlo (o no) o trabajar sobre el diseño en blanco. Para nuestro ejemplo elegiremos uno de los temas prediseñados, concretamente el “Trazo único azul”, sobre el que luego trabajaremos. Para ello accederemos al menú general y seleccionaremos la opción “Temas”, en la barra lateral de este menú, desde donde podremos elegir y previsualizar todos los posibles.

Teniendo elegido el tema y, tras haber dado un pequeño paseo por el sitio para ver si nos gusta o no (si no nos gusta es un buen momento para cambiarlo). Volveremos al menú general para modificarlo a nuestro antojo. Para ello iremos a la sección “Colores y fuentes”, desde la cual elegiremos la sección concreta de la página que queremos modificar (todo desarrollado en un cuadro que nos aparece) y le cambiaremos los colores o la fuente de las letras. En nuestro caso cambiaremos el color de fondo de la página. Para ello seleccionamos la opción "color de fondo de la página”, seleccionaremos el botón de color personalizado y elegiremos el color que más nos guste. Para el ejemplo seleccionaré un azul cielo.

Una vez realizados los cambios que queramos pulsaremos en guardar cambios y volveremos a la página para ver el resultado.

Recolocando las páginas:Muchas veces, durante la creación inicial de las secciones de nuestro sitio no tenemos muy

claro cómo será todo al final. Si nos damos cuenta de que una de las páginas creadas no está en el lugar que nos gustaría aun estamos a tiempo de arreglarlo. Para ello accederemos al menú general y pincharemos donde dice “Páginas”, en la sección de contenido del sitio. En esta sección podremos ver un mapa de nuestras páginas, organizadas en forma de esquema. Si queremos que una de las páginas esté dentro de otra, simplemente tenemos que pinchar en esa página y arrastrarla hasta el interior de la que será la página contenedora, de tal modo que ya la tendremos en su interior.

|

Eduardo Pizarro y Javier Montalbán

Para el ejemplo voy a insertar todas las páginas con número (1, 2, 3 y 4) dentro de la página principal. Al hacerlo podremos observar que nuestra barra de navegación lateral ha cambiado (si la teníamos en automático, si no tendremos que modificarla nosotros tal y como explicamos anteriormente en la sección del manual llamada “estableciendo la navegación de nuestra página”) y las páginas aparecen en el menú dentro de la página principal, en un menú desplegable.

Si contamos con una barra de navegación horizontal tendremos que modificarlo de forma manual.

Otras funciones básicas:Para finalizar este manual de funciones básicas de Google Sites simplemente voy a

describir una serie de funciones que no se engloban directamente dentro de ninguno de los apartados anteriores, pero que darán un vuelvo a nuestro sitio si los usamos de la forma adecuada.

En primer lugar vamos a hablar de las opciones que podemos añadir a nuestra barra lateral. Para todas ellas deberemos ir a Menú generalPresentación del sitioañadir un elemento de la barra lateral:

- Contador: es un contador de tiempo hasta un evento “X” que nos marcará lo que falta para que ese suceso llegue. Para añadirlo seleccionaremos la opción “Cuenta atrás” del menú de elementos a añadir en la barra lateral. Una vez hecho se nos colocará en la barra lateral del menú de presentación del sitio y tendremos que darle a “editar”. Al hacerlo se nos abrirá una ventana en la que tendremos que seleccionar la fecha del evento y el nombre de éste. Una vez elegido aceptaremos, guardaremos los cambios y automáticamente estará colocado en nuestra barra lateral. Para el ejemplo yo marco los días que faltan hasta el año nuevo de 2012.

- Nuevo cuadro de navegación: podemos añadir a nuestra barra lateral un cuadro de navegación independiente del que ya tenemos. Para ello simplemente añadimos la opción “Cuadro de navegación” y lo editamos exactamente igual que el cuadro que viene por defecto.

- Cuadro de texto: Se añade mediante la opción “Texto” del menú ya comentado. Esta opción nos permite tener un pequeño cuadro de texto en nuestra barra lateral (que podrá aumentar de tamaño si hacemos más ancha la barra lateral, o si lo estiramos cuanto queramos hacia abajo). En él podemos hacer las mismas cosas que en el contenido de la página, tales como escribir, poner enlaces, insertar imágenes… Las posibilidades son múltiples. Para el ejemplo he añadido un cuadro de texto al que he puesto como título la frase: “Manual de Google Sites” y he añadido una imagen con el logo de Sites.

- Actividad reciente: otra de las opciones (en este caso son dos) que podemos añadir a la barra lateral son los cuadros con información de la “actividad reciente del sitio” (avisa de los últimos cambios, comentarios, modificaciones…) y “mi actividad reciente del sitio”

|

Eduardo Pizarro y Javier Montalbán

que avisa sobre lo realizado por el usuario concreto que está visitando la página. Ambas sirven como accesos directos a contenidos que hemos visitado recientemente o contenidos con novedades. Para el ejemplo añadiré un cuadro de “actividad reciente del sitio”, en el que luego puedo editar el número de actualizaciones que se muestren a la vez.

- Información del autor y propietario de la página: son dos opciones que ha añadido Google Sites recientemente. Con ellas creamos un espacio en nuestra barra lateral (no modificable) en el que se muestra el nombre que tengamos asignado en la cuenta de correo desde la que hemos creado el sitio. En este caso, para la página ejemplo, no insertaré ninguna de estas dos opciones.

- AdSense: es un método para obtener ingresos con la página mediante anuncios, en función del número de visitas que tengamos a ella. No nos interesa para este manual.

Todas estas opciones que nos permiten insertar en nuestra barra lateral son modificables de cambiar su posición en ésta. Para ello solo tenemos que ir al Menú generalPresentación del sitio y arrastrar el cuadro correspondiente al elemento que queremos mover hacia arriba o hacia abajo, con lo que su posición en la página cambiará.

En lo referente al pie de página, si hemos decidido añadir el nuestro personalizado, solo tendremos que ir a Menú generalPresentación del sitio y pinchar en el botón de “modificar el contenido del pie de página” donde nos aparecerá un cuadro de texto en el que podremos insertar lo que queramos para este pie de nuestro sitio.

Básicamente estas son las funciones básicas que nos ofrece Google Sites para crear nuestro propio sitio web. Espero sirva de ayuda para todo aquel que quiera adentrarse al mundo del diseño web.

Página ejemplo: https://sites.google.com/site/manual423/

|

Eduardo Pizarro y Javier Montalbán

FUNCIONES AVANZADAS:

¿Cómo poner encuestas en nuestro site?

1. Nos registramos en una página que nos aporte el servicio, por ejemplo, www.99polls.com

2. Diseñar la encuesta como queramos.3. Finalmente, nos saldrá el código de la encuesta. Lo copiamos.4. Nos vamos a nuestro site, le damos a editar página, y en la parte superior nos

aparece una pestañita que pone “html”. Pinchamos en ella.5. Por último, pegamos nuestro código en el cuadro que nos sale. Podremos

alinearlo a nuestro gusto.6. Ya tendremos la encuesta en nuestro site.

¿Cómo añadir un contador a mi site?

1. Nos registramos en una página que nos de el servicio, por ejemplo en www.easycounter.com

2. Realizamos los pasos que nos pide (muy sencillos) y elegimos el tip ode contador.

3. Posteriormente se nos presentará un código, que debemos copiar (igual que hicimos con la encuesta).

4. Finalmente nos vamos a nuestro site, pinchamos en editar página y de nuevo pinchamos en la pestañita “html”.

5. Tendremos nuestro contador insertado en nuestro siet, pudiendo alinearlo a nuestro antojo.

¿Cómo insertar un foro en mi site?

1. Antes que nada, debemos de ir a una página, por ejemplo www.foroactivo.com, y crear un foro siguiendo los pasos que nos pide. Los pasos son muy sencillos. Una vez creado el foro, copiamos la dirección URL.

2. El siguiente paso es ir a nuestro site, y “crear una página nueva” .3. Después pulsamos en “Insertar”, y buscamos Más Gadgets. Aparecerá una

ventana en

|

Eduardo Pizarro y Javier Montalbán

la que seleccionamos “Destacada” y buscamos “Include Gadget (Iframe)”, seleccionándolo.

4. Introduciremos la URL de nuestro foro en el espacio URL to content, en ancho introducimos un procentaje 100% y en altura introducimos 2000 pixeles para garantizar que se verá el mayor espacio posible sin necesidad de barras de scroll.Después debemos des-seleccionar la casilla “mostrar título”, así como la de “Incluir un borde alrededor del gadget”.

5. Ya tenemos nuestro foro.

¿Cómo añadir videos en mi site?

1. Pinchamos e “editar página”, y posteriormente pinchamos en insertar.2. Dentro de insertar, buscamos “video”, y dentro de video elegimos “youtube”.3. Nos aparece un cuadro donde debemos de pegar la URL de la dirección del

video. También podemos elegir entre “ incluir borde alrededor del vídeo de YouTube” e “incluir el título del video”.

|