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 comentaré la línea que apunta al directorio ./public y agrego en su lugar 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

Creadas las rutas para el sitio web, 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.

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
0 Comments
Inline Feedbacks
View all comments