En este post empezaremos haciendo un sitio con Bootstrap, el framework de código abierto que nos facilita hacerlo responsivo y dotarlo de cierta interactividad. Se trata de un template básico generado automáticamente por un complemento del entorno de desarrollo que recomendamos antes y que deberemos ir modificando.
En el artículo anterior encontrarás las instrucciones para instalar VS Codium, traducir su interfaz de usuario al español e instalar el complemento de Bootstrap.
Dos cosas que debes tener en cuenta:
- Los comandos que usamos son atajos de teclado, tienes que tipearlos. No funciona el Copy/paste.
- Nuestro gestor de contenidos no me permite mostrar el código HTML por lo que debo usar capturas de pantalla. Para que tengas acceso al código de los ejemplos los subí a GitHub.
Cómo clonar un repositorio GitHub
Lo que separa a los grandes del resto de nosotros es la forma en la que reaccionan a los problemas. A Richard Stallman no le gustaba el driver de su impresora y como no lo dejaron cambiarlo inició el movimiento del software libre. A Linus Torvalds no le convencía ninguna de las plataformas para compartir código y creó la suya propia. Git.
A diferencia de los tradicionales sistemas de distribución de software en el que la única interacción permitida al usuario es la descarga, con Git se puede seguir la evolución del proyecto a lo largo del tiempo. Otras personas pueden clonar el repositorio, hacer modificaciones y proponerles a los desarrolladores del proyecto original que las incorporen. En caso de aceptarlas, los desarrolladores pueden hacerlo fácilmente sin tener que descargar y volver a cargar los archivos.
Existen varios servicios basados en Git, yo elegí GitHub simplemente porque se integra con VS Codium.
Para poder descargar los archivos de ejemplo en tu ordenador solo necesitas instalar el paquete git siguiendo las instrucciones de tu distribución para instalar paquetes en la terminal.
Luego escribes los siguientes comandos.
Yo prefiero guardar los archivos en la carpeta Documentos por eso cambio el directorio con
cd Documentos
Luego clono los archivos con:
git clone https://github.com/dggonzalez1971/bootstrap.git
Te voy a recordar estos pasos en cada uno de los artículos que restan ya que de esta forma irás actualizando los archivos de ejemplo a medida que los vaya subiendo.
Para ver los archivos solo abre el explorador de archivos y busca la carpeta bootstrap.
Haciendo un sitio con Bootstrap
En el caso de que prefieras tipear el código manualmente comenzamos creando una carpeta en la que guardaremos el sitio. Puedes ponerle el nombre que te guste.
Luego seguimos los siguientes pasos:
- Vamos al menú Archivo.
- Pulsamos en Nuevo Archivo de texto.
- Pulsamos sobre Guardar.
- Buscamos la carpeta que creamos y ponemos al archivo el nombre ejemplo1.html.
- Pulsamos en Guardar.
A veces es posible que la ventana del Explorador de archivos quede oculta por la de VSCodium.
Vamos a hacer que la extensión nos cree la plantilla básica. Para esto tipeamos !b5-$
Esto generará el código que vas a encontrar en la carpeta de ejemplos como ejemplo1.html
Veremos lo siguiente:
Este es el código generado por la extensión de Bootstrap.
A este archivo vamos a hacerle algunos cambios. Encontrarás las modificaciones bajo el nombre ejemplo2.html
- En la línea 2 cambiamos el idioma reemplazando eng por es. Esto indica a los buscadores que el idioma del sitio es el español.
- En la línea 6 cambiamos el texto que está bajo las etiquetas title. Ponemos Mi primer sitio Bootstrap.
- En la línea 12 cambiamos el contenido entre las etiquetas h1 por Esto es un sitio hecho con Bootstrap.
A continuación, realizaremos unas modificaciones importantes. Esas modificaciones tienen que ver con:
- El desarrollador del complemento no puede seguir el ritmo de las versiones de Bootstrap y hay otras más actuales.
- Hay muchas opciones de componentes bootstrap y a mi me interesa otra.
- Según la documentación oficial, la llamada a las librerías Javascript deben estar dentro de las etiquetas body.
Para el ejemplo 2 modificamos el contenido de la línea 7, borramos la línea 8 y 9 y subimos el contenido restante para mantener la compatibilidad en la numeración. Luego pulsamos en el final de la línea 10 para crear una nueva línea 11 y poner el enlace a las librerías Javascript.
No te preocupes si no entiendes el código. Voy a explicar la función de cada línea en el próximo artículo.