Como Crear una Página Web con Go 1.15 y Bootstrap 4.5 – Parte 2

Go Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

En la parte anterior de este tutorial Como Crear una Página Web con Go 1.15 y Bootstrap 4.5 – Parte 1 comenzamos con la creación de un nuevo proyecto con Go para la página web, importamos los módulos fmt y net/http, configuramos el servidor inicial en donde correrá la página web y creamos nuestra primera página HTML inicial para verificar que todo se hizo correctamente, en este parte 2 vamos a integrar Bootstrap 4.5 y comenzaremos creando la página Home del sitio web, vamos con ello.

Partes

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida”:  

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Como Crear una Página Web con Go 1.15 y Bootstrap 4.5 – Parte 2. 

La página web va tener 4 páginas que son Home, Nosotros, Servicios y Contacto, para que estas páginas puedan cargar correctamente, vamos a crear sus rutas correspondientes.

Rutas

Abrimos el archivo llamado configuracion.go que se encuentra en el directorio principal del proyecto.

En el archivo configuracion.go agrego 4 rutas para las páginas respectivas.

En el código anterior cada ruta llama a una función, estas funciones son rootHandler, nosotrosHandler, serviciosHandler y contactoHandler, las cuales crearemos a continuación.

Tu le puedes poner el nombre que desees a las funciones, yo para este tutorial les he puesto los nombres mencionados, cada función hace uso del método ServeFile() de Go para leer un archivo, este caso un archivo HTML correspondiente a cada página.

Las páginas HTML que vamos a usar son index.html (Esta página la creamos en la Primera parte de este tutorial, solo falta  crear su diseño con Bootstrap), nosotros.html, servicios.html y contacto.html

Ahora vamos a configurar nuestro servidor para que pueda servir archivos estáticos como Imágenes, CSS, JS, etc.

Sirviendo Archivos Estáticos (CSS, Imágenes, JS, etc.)

Nuestra página web puede contener archivos CSS, JS, Imágenes, etc. y para poder leer este tipo de archivos, debemos hacer uso de http.Handle, http.StripPrefix, http.FileServer y http.Dir dentro de la función o método main(), le decimos que lea todos los archivos estáticos que se encuentren dentro del directorio /public, entonces el método main() ahora se debe ver de la siguiente manera.

Creadas las rutas para el sitio web y configurado el servidor para servir archivos estáticos, pasaremos a crear las vistas HTML de las páginas con Bootstrap 4.5

Página Home

Esta página va ser la página principal de nuestro sitio web, los elementos que va tener esta página es un Carousel de Bootstrap y debajo 3 servicios destacados, comencemos con el Carousel.

Abro el archivo index.html que se encuentra en public > index.html

Dentro del archivo index.html comenzaré a  trabajar el contenido de la página principal.

Carousel

Este Carousel va contener 3 imágenes y cada una pertenece y apunta a un tutorial del Blog de Nube Colectiva, tu le puedes poner el contenido que desees.

Si voy al navegador debería de ver el Carousel sin problemas.

Ahora pasemos a crear 3 servicios destacados debajo del Carousel.

Servicios

Voy a colocar 3 columnas con 3 servicios destacados, esto igualmente lo creo haciendo uso de clases CSS nativas de Bootstrap 4.5, debajo de cada servicio le he colocado un botón.

Igualmente si voy al navegador debería de ver las 3 columnas con los servicios respectivos.

Paso seguido creare unas columnas sobre el contenido que hace Nube Colectiva.

Contenido que hace Nube Colectiva

Voy a crear una sección de 4 columnas en donde mencionamos los temas que habla Nube Colectiva.

Y por último crearé el Footer o Pie de Página.

Footer

El Pie de Página es una sección que estará siempre en todas las páginas del sitio web, el diseño va ser sencillo, solo colocaré información del autor del diseño de la página web con un enlace correspondiente.

Entonces si voy al navegador debería de ver la información sobre los temas que habla Nube Colectiva y el Footer o Pie de Página.

Y bueno con esto entonces hemos terminado de crear la página principal o Home del sitio web, asimismo creamos todas las rutas para todas las páginas del sitio web que iremos construyendo poco a poco.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte de este tutorial, crearemos el contenido de la página Nosotros.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
5 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
ivan
ivan
7 meses atrás

va por buen camino. a ver como continua

Enrique
Enrique
23 días atrás

Hola, podría poner los archivos para descargar o estan en alguna parte? gracias