Cuando terminamos un  proyecto queremos difundir los resultados y una excelente opción es plasmar todo el proceso en un sitio web.

Es por eso que este tutorial es ideal para cualquier persona que quiera aprender a crear su propio sitio web sin tener ningún conocimiento de programación y con una herramienta gratuita y fácil de usar. 

Dicho esto podemos comenzar

La herramienta que vamos a utilizar es Google Site, la cual nos permite crear y editar sitios web, además con Google site podemos compartir contenidos desde Google Drive.

El primer paso es iniciar sesión con nuestra cuenta de correo electrónico de gmail. Si aún no tienes una cuenta de gmail, te dejo un video en la descripción de cómo crear una.

Clic en las aplicaciones y luego en google drive. Hay otra forma de ingresar, pero en este caso usaremos esta.

Una vez dentro de google drive, vamos a dar clic derecho, carpeta y vamos a crear una carpeta con el nombre de ABP. Es recomendable tener todo los archivos guardados en esa carpeta. En el caso de haber terminado el proyecto deben tener todo guardado en su y solo deben subirlo a Google drive, y en el caso de estar en el desarrollo del proyecto pueden ir subiendo todo e ir trabajando con la web.

Vamos a dar doble clic sobre la carpeta para ingresar a ella y luego clic derecho, más y clic en sitios de google.

Ahora debemos comenzar a trabajar con nuestra web

Lo primero que haremos es ponerle un nombre, donde dice sitio sin titulo, vamos a escribir el nombre del proyecto o puede ser la pregunta inicial.

Ahora procederé a agregar una imagen en la cabecera, para eso clic en cargar imagen y cargar.

Tengo la imagen guardar en una carpeta con el nombre imagen, clic sobre la imagen y luego en abrir.

Listo, y tenemos nuestra imagen de cabecera, ahora agregaremos un titulo a la cabecera.

Si seleccionamos el texto que acabamos de escribir, podemos hacer uso de las herramientas para darle estilo y formato al título, podemos elegir si es título, párrafo, entre otros.

Podemos cambiar la fuente, el tamaño, poner negrita, cursiva, tachado, agregar un link, alinear, borrarlo, entre otros. Es cuestión de poner a correo nuestra creatividad.

Ya hemos trabajado con la cabecera, ahora vamos a trabajar justo debajo de la cabecera. Vamos a poner un mensaje de bienvenida y ofrecer un resumen en forma de guía por el sitio web, para eso vamos utilizar las herramientas que están en la parte derecha.

Ese espacio está divido de la siguiente manera: primero está insertar, luego pagina y por último pagina.

En insertar tenemos varias opciones para insertar elementos a nuestro sitio web, que puede ser: 

Vamos a empezar agregando un texto, para eso solo debemos ubicarnos en insertar y luego clic en texto.

Justo debajo de la cabecera se agrega un elemento para poder agregar el texto y darle estilo formato, voy a escribir la bienvenida y lo colocare en el centro.

Puedo ponerle un color de fondo al texto que acabamos de agregar, para pulsamos sobre el fondo del texto y en la parte izquierda aparece un icono donde podemos elegir un estilo.

En ese mismo orden, si pulsamos en tema, tendremos algunas opciones para cambiar el estilo y color del tema.

Vamos a pulsar en temas y justo donde están los círculos de colores, en el último podemos elegir un color, voy a elegir el color verde. Si deseo cambiar la fuente, puedo hacerlo justo debajo.

Ahora vamos a escribir el resumen y la guia del sitio web, la idea es que cuando alguien visite esta web encuentre al inicio una guia de como navegar por la misma.

Ya sabemos como agregar texto, para eso clic en insertar y luego cuadro de texto.

Este es el mensaje resumiendo en que consiste el poyecto y una pequeña guia de como navegar el sitio web. 

Ahora vamos a agregar algunas imágenes justo debajo del texto que acabamos de colocar.

Es importante pulsar sobre el bloque para insertar cualquier elemento, de esa forma el elemento que se agregue quedar justo debajo. Cli en insertar y bajamos hasta donde sé el icono o silueta de 3 imágenes.

La idea que tengo es agregar 3 imágenes relacionadas con el proyecto, para eso hay que dar clic sobre cada circulo para ir agregando las imágenes.

Recuerden que comente la importancia de tener una carpeta con los archivos y es recomendable subirla a Google Drive.

Al pulsar en en el círculo se despliegan algunas opciones para subir archivos, podemos cargarlo desde nuestra pc, agregarlo desde google drive, agregar vídeos desde Youtube o mapas. Voy a pulsar en Seleccionar imagen.

Como tengo una carpeta con el nombre de ABP que contiene otra carpeta con el nombre de imágenes y dentro contiene varios archivos, me aparecen todas y aquí solo debes dar clic sobre la imagen y luego en insertar. 

Al pulsar en insertar, se agregara a es bloque y justo debajo podemos escribir de lo que trata la imagen. Este procedimiento debo repetirlo con cada imagen que quiero agregar a este bloque. 

Nos quedaría de la siguiente forma:

Si queremos podemos cambiar el color de fondo de ese bloque, ya sabemos que solo hay que pulsar sobre el, y luego el icono de la parte izquierda y elegir el de color.

Nuestra web va tomando estilo, ahora vamos a agregar el menú. Es decir, cada página.

Es importante que tengan una idea plasmada de las páginas que quieren que tenga la web.

Una sugerencia es tomar una hoja en blanco y con un lapicero crear un menú. 

Yo voy a poner los siguientes elementos al menú: Nosotros, proyecto, fase 1, fase 2, fase 3 y cierre.

En la página de Nosotros, voy a colocar los datos del centro educativo y los docentes que ejecutaron el proyecto.

En la página del proyecto, voy a poner un resumen del proyecto.

En las páginas de las fases, colocare las actividades que se desarrollaron en cada una y en la página de cierre voy a colocar las informaciones relevantes del proyecto y las evidencias.

El siguiente paso es pulsar en Páginas y observen como se muestra justo debajo una página con el nombre de Página principal. Esa es la página que hemos trabajado hasta el momento.

Al colocar el puntero sobre él, nos da las opciones de agregar un vínculo o agregar una nueva página.

Vamos a colocar el puntero sobre el signo de más y luego en página nueva, luego escribimos el nombre de la página, recuerden el menú que hablamos anteriormente. Voy a ponerle Nosotros. En configuraciones avanzadas puedo agregar un link, pero lo dejaremos asi por el momento. Vamos a dar clic en Listo. 

Observen como se ha agregado un nuevo elemento justo debajo del elemento Página principal.

De igual forma, en el menú principal de nuestro sitio web se ha agregado una nueva pestaña que es Nosotros. El objetivo de esa pestaña es cuando alguien visite nuestra web y pulse sobre esa pestaña cambie de página y ofrezca la información que se coloque allí.

Explico, cuando alguien ingrese a nuestra web podrá navegar por cada pestaña para ir viendo las informaciones, si no comprendes a fondo este parte, no te preocupes que al pronto lo entenderá. 

Ahora vamos a proceder a crear la página que llevará como nombre: Proyecto.

Deben tomar en cuenta la jerarquía, puesto que podemos agregar sub-menu a las pestañas de nuestro menú. Observen como la página que acabamos de crear está de color azul y si ahora pulsamos en el boton de más para crear una nueva página, la misma será sub-menu de la página Nosotros. 

Entonces, debemos crear una página con la misma jerarquía que Página principal y Nosotros debemos pulsar en Página principal y luego en el signo de más. Vamos a hacer eso.

Clic en Página principal y luego en signo de más, escribimos el nombre: Proyecto y clic en Listo.

Para agregar el menú completo debemos seguir los mismos pasos anteriores, la idea es que quede como nos guste.

Nuestro menú se ve de esta forma.

Voy a cambiar el nombre de Página principal, y le voy a poner Inicio, para eso debemos colocar el puntero sobre Página principal y clic en los 3 puntos.

Ahora debemos pulsar en Propiedades.

Eliminamos Página principal y escribimos Inicio y clic en Listo.

Nuestro menú ha quedado excelente, ahora nos toca trabajar las informaciones que debe tener cada página, tal como lo hicimos al inicio.

Agregar información a cada página es sencillo y ya ustedes conocen la gran variedad de elementos que podemos agregar, tal como iniciamos agregando texto, imágenes, entre otros.

El único elemento a tomar en cuenta es dar clic en el menú sobre la página que queremos editar o agregar información.

Observe que si damos clic sobre la página inicio se muestran las informaciones e imágenes que agregamos, pero si damos clic sobre las demás páginas no se muestra nada, eso es debido a que aún no tienen información.

Vamos a hacerlo, clic sobre en el menú sobre la Página Nosotros.

¿Qué pasos debemos dar para agregar información?

Excelente, ya eres expert@ en Google Site, clic en Insertar y partir de aquí el límite es nuestra imaginación. Voy a poner un texto de primero, para eso clic en Cuadro de texto.

Al pulsar en Cuadro de texto, se agregar un bloque donde podemos agregar el texto y dar estilo, voy a escribir el texto, con alineación central y al dar clic sobre la A, puedo ponerle color, le voy a poner de color blanco.

Ahora iré a diseño y voy a agregar una imagen y texto.

Ya conocemos cómo agregar imágenes y texto. Pulsamos en el círculo y cargar para agregar una imagen. 

Luego de agregar la imagen, agregamos el texto, como título le voy a poner Somos AcademyPop y un resumen de lo que somos. La idea es poner en esa página los datos del centro educativo. 

Si queremos agregar otro bloque debajo de los datos que acabamos de agregar  solo debemos dar clic sobre insertar y luego en el elemento que queremos agregar.

Ya tenemos la pagina de nosotros lista, ahora vamos a trabajar con la pagina de proyecto, para eso vamos a realizar el procedimiento anterior.

¿Qué pasos debemos dar para agregar contenido a una página?

El primer paso es dar clic sobre la página que queremos agregarle las informaciones o editarla.

Primero agregaremos un texto, en este caso voy a poner una pregunta

Ahora, a diseño para insertar una imagen y texto, primero y también agregaremos un video

Realizamos el mismo procedimiento para insertar un diseño que contenga texto e imagenes.

Ahora vamos a agregar un vídeo justo debajo.

Si crearon un video introductorio y lo subieron a Youtube puede agregarlo dando clic en Youtube y luego buscarlo a copiar el link del video en la barra de búsqueda, luego pulsar en buscar en la lupa.

Al dar clic en la lupa, justo debajo aparecerá el video, pulsamos sobre él y luego en seleccionar en la parte inferior. 

Acabamos de agregar un nuevo bloque que contiene un vídeo, pero se nos olvidó pulsar sobre el último bloque para que el nuevo bloque se coloque al final, ¿Cómo podemos solucionar esto?

Al colocar el puntero sobre un bloque en la parte izquierda se habilitan un rectángulo de puntos, si pulsamos sobre ese rectángulo, podemos arrastrar hacia arriba o hacia abajo sin soltarlo para colocar el bloque en lugar que queremos. 

Hemos avanzado bastante, pero aun no sabemos como va quedando, vamos a ver nuestra creatividad.

Vamos a pulsar en la parte superior derecha sobre el icono de laptop y celular. Al pulsar allí se muestra una vista previa de nuestra web.

Va quedado genial… y además, podemos navegar por el menú. En la parte inferior se muestran icono para seleccionar la forma que se vería en x dispositivo, por ejemplo, si pulsamos en el icono de celular se muestra como se verá en los celulares.

Vamos a pulsar sobre el icono de celular para verlo:

Ya solo queda que continúe practicando y luego nos deje su comentario compartiendo el link del sitio web que ha creado…

Si te guata aprender mediante vídeo, a continuación te comparto uno que explica como realizar un sitio web en Google Site paso a paso y desde cero.