Capítulo 8 Sites

Sites es una herramienta que permite la creación, edición y mantenimiento de sitios web de forma dinámica, sin requerir conocimientos de programación por parte de sus usuarios. Puede usarse como medio de colaboración entre los miembros de un equipo, también permite desarrollar un sitio web de manera que sirva para establecer la presencia básica en Internet de una organización.

Para realizar las actividades propuestas hay que conectarse a Google Workspace como usuario de la asignatura. Las actividades de este capítulo se basan en Google (2021e).

Objetivos del capítulo

Los objetivos de este capítulo son:

  • Conocer una herramienta colaborativa de creación de sitios web.
  • Aprender a crear un sitio web que sirva como medio de colaboración entre los miembros de un equipo.
  • Aprender a realizar las operaciones para personalizar un sitio web corporativo.
  • Poder desarrollar y alojar un sitio web de manera que sirva para establecer la presencia básica en Internet de una organización.

8.1 Introducción

Con Sites, crear un sitio web es equivalente a editar un documento de texto, sin requerir conocimientos técnicos específicos (por ejemplo, no es necesario conocer HTML), diseñada de acuerdo con el principio WYSIWYG (what you see is what you get).

Permite a los usuarios colaborar en la creación y desarrollo del sitio web. El contenido desarrollado se encuentra en la nube de manera que es accesible desde cualquier parte donde haya una conexión a Internet. Se puede combinar fácilmente información de varios tipos en una página web (calendarios, presentaciones, texto, archivos adjuntos, vídeos, …) y compartirla con usuarios específicos, con todos los usuarios de nuestra organización o con cualquier usuario, tanto para verla como para editarla.

8.2 Crear un sitio web

Crear un sitio web para una organización es tan sencillo como editar un documento. Como usuario de empresa, se pueden configurar sitios internos de proyectos, intranets o sitios orientados al cliente. Accedemos a Sites desde el icono Aplicaciones de Google (figura 8.1).

Acceso a Sites.

Figura 8.1: Acceso a Sites.

Hay dos versiones de la herramienta en funcionamiento: clásica y actual. Puede que algún navegador antiguo no soporte la versión actual, se recomienda cambiar de navegador. Aquí usaremos la actual. Para comprobar si el navegador soporta la versión actual accedemos a https://sites.google.com/new. Si no la soporta, aparecerá un mensaje de aviso como el de la figura 8.2.

Aviso del navegador, en caso de no soportar la nueva versión de Sites.

Figura 8.2: Aviso del navegador, en caso de no soportar la nueva versión de Sites.

8.2.1 Sitio web en blanco

Para crear un sitio nuevo, podemos basarnos en alguna de las plantillas existentes o bien crearlo en blanco (figura 8.3). En esta actividad vamos a partir de un sitio web en blanco.

Crear un sitio web.

Figura 8.3: Crear un sitio web.

En primer lugar, vamos a darle un nombre al sitio web. El criterio que usaremos es componerlo a partir de las siglas de la asignatura y nuestro usuario de correo (p.e., en mi caso siscd-jsamos), como se muestra en la figura (figura 8.4).

Nombre del sitio web.

Figura 8.4: Nombre del sitio web.

Este será el nombre del documento que almacena el sitio web y también formará parte de la URL por defecto que le asigne Sites cuando lo publiquemos.

A continuación, vamos a asignarle un título a la página, de la forma “Actividad de Sites de usuario” sustituyendo usuario por nuestro usuario de correo (figura 8.5).

Título del sitio web.

Figura 8.5: Título del sitio web.

8.2.2 Temas

Independientemente de si hemos creado un sitio web en blanco o partiendo de una plantilla, tiene asociado un tema que define el conjunto de colores y tipo de letra de los elementos del sitio web. En cualquier momento podemos cambiar o modificar el tema del sitio web, pulsando sobre Temas en la columna de la derecha (figura 8.6), podemos elegir un tema distinto. Para cada tema podemos personalizar los colores o el estilo de fuente que se usa.

Temas para el sitio web.

Figura 8.6: Temas para el sitio web.

8.2.3 Publicar el sitio web

Una vez definidos el nombre y el título, pulsamos sobre el botón Publicar, en la barra de herramientas. En la ventana que se reproduce en la figura 8.7, nos presenta las opciones actuales para la publicación. En el campo Dirección web está por defecto el valor del nombre del sitio. La URL aparece justo debajo del campo donde podemos cambiar ese valor (si lo cambiamos, no cambia el nombre del sitio): está formada por la URL de Sites, una parte de nuestra organización y, por último, el nombre de nuestro sitio. Si queremos que este sitio sea el sitio web de nuestra organización, posteriormente podremos asignarle la URL de un dominio propio.

Publicar el sitio web.

Figura 8.7: Publicar el sitio web.

También podemos definir quién puede ver el sitio web, por defecto lo puede ver cualquier usuario de nuestra organización. Esto se puede cambiar pulsando sobre GESTIONAR, podemos definir opciones similares a las de compartir los Documentos de Google.

En este momento las opciones por defecto son adecuadas. Para continuar, pulsamos sobre el botón Publicar de la ventana.

Nos ofrece la posibilidad de ver el resultado pulsando sobre un enlace temporal que aparece. En cualquier caso, podemos verlo desde el menú asociado a la operación Publicar, en la barra de herramientas, pulsando sobre la punta de flecha a su derecha (figura 8.8).

Opciones para un sitio web publicado.

Figura 8.8: Opciones para un sitio web publicado.

Si pulsamos sobre Ver sitio web publicado, nuestro sitio web se abre en el navegador. Adicionalmente, desde ese mismo menú, podemos cancelar la publicación o cambiar las opciones que hemos definido para realizarla.

Por las opciones que hemos utilizado, con la URL, cualquier persona de nuestra organización puede ver nuestro sitio web. La barra de herramientas incluye la opción Copiar el enlace de un sitio web publicado (figura 8.9), que lo copia en el portapapeles.

Copiar el enlace de un sitio web publicado.

Figura 8.9: Copiar el enlace de un sitio web publicado.

8.2.4 Vista previa

Para ver el resultado del sitio web que estamos desarrollando, no es necesario que lo publiquemos. Podemos hacerlo pulsando sobre el icono Vista previa en la barra de herramientas (figura 8.10).

Vista previa del sitio web.

Figura 8.10: Vista previa del sitio web.

En lugar de abrirse en una nueva hoja, en la hoja actual se muestra la vista previa del sitio y podemos elegir el tipo de dispositivo en la parte inferior de la pantalla (figura 8.11) o cerrarlo para volver al diseño del sitio web.

Opciones de presentación de la vista previa del sitio web.

Figura 8.11: Opciones de presentación de la vista previa del sitio web.

8.2.5 Edición colaborativa

Se puede desarrollar un sitio web de forma colaborativa. Para invitar a otras personas a colaborar, en la barra de herramientas, pulsamos sobre Compartir con otros (figura 8.12).

Compartir con otros.

Figura 8.12: Compartir con otros.

En la ventana que se abre (figura 8.13), añadimos el correo de las personas con las que queremos compartir el trabajo y definimos si son editores o solo lectores.

Personas con las que compartir.

Figura 8.13: Personas con las que compartir.

Al igual que para Documentos de Google, recibirán un correo que les facilitará el acceso al sitio web para que puedan realizar las operaciones autorizadas sobre él.

8.3 Contenido de una página

Aunque hemos creado un sitio web “en blanco” este incluye un encabezado con una imagen, donde hemos definido el título, también una zona de logotipo donde incluye el nombre. Podemos cambiar estos o añadir otros elementos predefinidos de la página y también añadir contenido adicional a partir de los elementos del menú Insertar.

8.3.1 Logotipo, encabezado y pie de la página

Nuestro sitio web tiene definido el título con un texto y una imagen, también tiene una zona de logotipo donde está incluido el nombre del sitio web y podemos añadir una imagen, e incluye la posibilidad de añadir un pie de página (figura 8.14).

Elementos de una página.

Figura 8.14: Elementos de una página.

Podemos definir o personalizar estos tres elementos: logotipo, encabezado y pie de la página. En la figura 8.14, se muestran las operaciones que se pueden hacer sobre ellos. Estas operaciones son accesibles al situar el puntero del ratón sobre cada uno de los elementos.

Por ejemplo, para el encabezado, podemos cambiar su imagen, el tipo o directamente eliminarlo y, si queremos tener encabezado, volver a definirlo.

8.3.2 Añadir contenido

El resto de contenido de una página se define desde el menú Insertar en la barra lateral (figura 8.15).

Elementos que se pueden insertar en una página.

Figura 8.15: Elementos que se pueden insertar en una página.

Para añadir un tipo elemento, pulsamos sobre él en la barra lateral. Según el tipo, tendremos que definir sus características en la ventana que se abre.

Una vez situado sobre la página, se puede mover (pulsando-arrastrando-soltando). También se pueden definir otras características como el color de fondo o se puede eliminar: se muestran las operaciones pulsando sobre el elemento o al situar el puntero sobre cada elemento. En algunos casos también se puede cambiar su tamaño o, para las imágenes, recortar.

Entre los elementos que se pueden definir están aquellos que podemos crear con otras aplicaciones de Google Workspace (figura 8.16).

Elementos de Google Workspace que se pueden insertar en una página.

Figura 8.16: Elementos de Google Workspace que se pueden insertar en una página.

8.4 Páginas y navegación

La gestión de las páginas del sitio web se realiza desde el apartado Páginas del menú lateral (figura 8.17).

Gestión de páginas.

Figura 8.17: Gestión de páginas.

A continuación, vamos a ver cómo añadir y organizar las páginas, y también cómo configurar el menú de navegación.

8.4.1 Gestión de páginas

Al crear el sitio web tenemos una página llamada Inicio que es la página principal. A partir de ella podemos crear nuevas páginas al mismo nivel, duplicándola, o crear subpáginas. Estas operaciones las podemos hacer desde el menú asociado a cada página (figura 8.18). Pulsando sobre la opción Propiedades podemos cambiar el nombre de la página.

Añadir páginas y subpáginas.

Figura 8.18: Añadir páginas y subpáginas.

Adicionalmente, como se muestra en la figura 8.18, situando el puntero sobre el botón con el signo “+” podemos elegir entre definir una nueva página al mismo nivel o bien incluir un enlace (a una página de nuestro sitio o usando una URL externa).

Las páginas que vamos definiendo se muestran en la lista de páginas reflejando su estructura de anidamiento. Podemos cambiar esa estructura pulsando-arrastrando-soltando cada página hasta su nueva ubicación (figura 8.19).

Organizar las páginas.

Figura 8.19: Organizar las páginas.

Para definir el contenido de cada una de las páginas, la seleccionamos en el menú Páginas y definimos sus elementos desde el menú Insertar.

8.5 Gestión de sitios web

Una vez hemos acabado nuestro sitio web, podemos crear otros. También podemos asignarle una URL personalizada.

8.5.1 Página principal de Sites

Pulsando sobre el icono Página principal del sitio web (figura 8.22), accedemos a la página principal de Sites.

Página principal del sitio web.

Figura 8.22: Página principal del sitio web.

En la página principal, además de las plantillas de la figura 8.3, aparece la lista de los sitios web que hemos creado, en este caso solo uno (figura 8.23). Desde el menú asociado, podemos cambiarle el nombre, eliminarlo o abrirlo.

Gestión de sitios web.

Figura 8.23: Gestión de sitios web.

8.5.2 URL personalizada

Una vez tenemos nuestro sitio web implementado, podemos seguir usando la URL asignada cuando lo creamos o también podemos asignarle una URL personalizada.

Los detalles para adquirir y gestionar una URL se explican en clase de teoría. En Utilizar una URL personalizada en tu sitio web se describe cómo utilizar la URL propia en Sites. Si se siguen las recomendaciones de clase de teoría, solo deberíamos llevar a cabo los pasos 2 y 3.

Ejercicio 8.1 Crea un nuevo sitio Web:

  • Utiliza la versión nueva de Sites.
  • Asígnale un nombre al sitio de la forma “siscd-usuario”, sustituyendo “usuario” por tu usuario de correo de la asignatura.
  • Asígnale un título que empiece por “usuario-”, sustituyendo usuario por el mismo usuario.
  • Cambia la apariencia del sitio Web y define algunos elementos:
    • Personaliza el tema.
    • Añade un logotipo al sitio y cambia la imagen de la barra del título.
    • Añade un pie de página indicando el nombre de la asignatura y el curso actual.
  • Crea tres páginas adicionales y ubícalas, dos al mismo nivel que la página principal, una bajo la página principal.
  • Crea un enlace a una página de la UGR y sitúalo bajo una de las páginas que están al nivel de la página principal.
  • Cambia la barra de navegación de lugar.
  • Añade contenido a las páginas del sitio Web (al menos los siguientes elementos repartidos en las distintas páginas):
    • un diseño,
    • un calendario,
    • un video,
    • un mapa,
    • un elemento desde Google Drive,
    • un cuadro de texto,
    • una imagen,
    • un botón,
    • inserta un sitio Web.
  • Publícalo de manera que cualquier usuario de iagc-siscd-UGR pueda encontrar y ver la versión publicada.
    • Indica la URL del sitio Web en el documento de documentación del ejercicio.

Para documentar la realización de este ejercicio, copia las pantallas necesarias para mostrar las páginas y todos los elementos que incluyen, indicando para cada pantalla incluida qué es lo que se documenta con ella.

Bibliografía

Google. 2021e. “Ayuda de Sites.” Post. Ayuda de Google. https://support.google.com/sites/#topic=7184580.