Web

Qué es Bootstrap

Qué es Bootstrap?

Bootstrap es un nuevo Framework para desarrollo FrontEnd buenísimo a la hora de querer hacer sitios responsive design.

Ahoraa.. que ya sabemos qué es Bootstrap! nos preguntamos.. qué es Responsive Design? Vieron aquellos sitios web en los que entras desde la laptop y se ve muy bien y luego pruebas entrar con el smartphone y también se lo ve muy bien pero con ciertos ajustes que parecen haberse hecho a medida para dicho dispositivo móvil? bueno, eso se logra con Resposive Design y uno de los mejores Framework Front End para lograr eso es Botstrap.

Empezando con Bootstrap

Bootstrap es gratuito, lo podemos descargar de su sitio oficial, y comenzar a trabajar de inmediato con él en nuestros proyectos web.
Qué es Bootstrap

Bootstrap Responsive Design

Qué significa que sea un Framework para FrontEnd?

FrontEnd se le llama a todo aquello que tenga que ver con la vista de una página web, en esencia con su diseño, la distribución de los botones, widgets, cabeceras, títulos etc. Todo lo que tiene que ver con la presentación de la misma y que se logra mediante el buen uso de los lenguajes de programación con HTML + CSS (Estilos) + Javascript. Con el HTML lo que se hace es la estructura de nuestras páginas web, con el CSS se le da diferentes formas, colores, bordes y demás estilos a cada parte de nuestros sitios y Javascript es un lenguaje de programación que se ejecuta del lado del cliente y sirve para darle efectos visuales y funcionales a la página. Por ejemplo que se cambie el color de un botón al pasar el mouse sobre él.

Cómo empezar con una página Web con Bootstrap?

Luego de descargar Bootstrap del sitio oficial tendremos las siguientes tres carpetas que son las que nos interesan para comenzar a usar éste framework.

Qué es Bootstrap

Estructura de Archivos de Bootstrap

Lo siguiente es crear un archivo index.php desde el cual empezaremos a crear la vista principal de nuestro sitio web y desde donde enlazaremos las librerias de Bootstrap para usar todo su potencial en nuestras web.

Aquí les muestro un ejemplo de como sería un index.php estandar y como enlazar las librerías de Bootstrap:

 

Qué es Bootstrap

Index.php para enlazar las librerias de Bootstrap

 

 

 

 

Instalar XAMPP en Windows

Instalar Xampp en Windows

En estos simples pasos, les mostraré como instalar XAMPP en windows, uno de los entornos para el desarrollo web en tu computadora más populares.

En los puntos 1 y 2 les mostraré como Instalar xampp en Windows para luego pasar a ver los detalles del panel de control principal; y en los puntos 3 y 4, donde se alojan los archivos para nuestro sitio y como acceder al mismo, a través del buscador web gracias a tener Xampp como servidor local.

 

1-. Primero descargamos Xampp de la página oficial desde éste enlace. Ejecutamos el instalador de Xampp en nuestra computadora. Luego de seguir el paso a paso de la instalación, nos creará una carpeta como la siguiente en el disco donde lo instalamos:

Instalar xampp en Windows

Estructura de Archivos

2-. Para comenzar a usarlo, debemos abrir el icono de color anaranjado xampp-control que es el panel de control del entorno de php (como se ve en la siguiente imagen). Éste es el panel administrador de todos los servicios que nos ofrece. Los que nos interesan, para empezar con nuestro entorno de desarrollo local, son Apache (PHP) y MySQL (servidor de base de datos que contendrá la base de datos de nuestro sitio web).

Instalar xampp en Windows

Xampp

Luego podemos abrir en nuestro buscador el servidor XAMPP. El servidor en este caso como se ve en la URL usa el puerto 8080 de nuestro ordenador, esto es configurable de acuerdo a las necesidades del caso. Por ejemplo, por defecto Xampp usa el puerto 80, como este puerto es utilizado por Skype configuré Xampp para que use el puerto 8080 y no tener ningún problema entre el servidor PHP y Skype y poder usar ambas aplicaciones al mismo tiempo y así puedan tener sus puertos disponibles.

Instalar xampp en Windows

Escritorio Xampp

3-. La estructura de carpetas de nuestro sitio (carpetas, archivos, imágenes) deben ir en la carpeta HTDOC como se ve en la imagen a continuación. Nuestros sitios deben ir sí o sí en esta carpeta, de lo contrario, no podremos acceder a nuestro sitio desde los buscadores. Una vez hecho esto podremos acceder a nuestro sitio ingresando la siguiente URL http://localhost:8080/programertech mediante nuestro servidor apache que hemos “levantado” en el paso 2-. en este caso, es la carpeta de WordPress que se descarga desde el sitio oficial y con el cual construí el sitio, solo que la renombré con el nombre de mi sitio PROGRAMERTECH. Acá explico como crear un sitio con WordPress.

Instalar xampp en Windows

Instalar xampp en Windows

Instalar xampp en Windows

Instalar xampp en Windows

 4-. Luego, podremos levantar nuestro sitio web en nuestro buscador, colocando la url del LOCALHOST seguida por el puerto (8080 en mi caso, pero por defecto es el puerto 80), y el nombre de la carpeta de nuestro sitio que le pusimos dentro de la carpeta htdocs, como se ve a continuación:

 

Cualquier duda, puedes dejar tu comentario! 😉