sábado, 24 de octubre de 2015

Tutorial Bootstrap 3: Introducción e instalación | Full Stack Pro

Tutorial Bootstrap 3: Introducción e instalación

En la industria del desarrollo web es comun tener herramientas o frameworks que nos ayudan a optimizar nuestro trabaja tal es el caso de Bootstrap un framework basado en HTML y CSS diseñado los desarrolladores de Twitter y que fue libererado en 2012, desde entonces ha ganado muchos adeptos, hasta el nivel que cuenta con la mayor comunidad de Github del mundo.

Este framework nos ayuda a agilizar la creación del interfaz de nuestra página web, del cual sin exagerar se ha convertido en el mas utilizado, bootstrap permite que nuestro sitio este adaptado a la pantalla del dispositivos con el que accedemos, ya sea un ordenador, tablet, smartphone, television.... Esto significa que tendremos una Web responsive o adaptativa, y desde hace pocos meses, es fundamental de cara al posicionamiento en Google.

Además de agilizar la creación de nuestra Web, se conseguira un crear un diseño limpio, intuitivo, usable y de poco peso, por lo que la carga de nuestra web mucho mas rapida.

Pero ahora hablemos de ¿Por qué usar Bootstrap?

En la web actual tenemos conceptos de Web responsive, que se integran a la perfeccion con este framework. Suit de utilideades o funcionalidades ya diseñadas. La velocidad de carga de la web Compatibilidad con la mayoria de navegadores. En constante desarrollo, tiene una gran comunidad detras y el framework va mejorando cada vez mas.

Como instalar Bootstrap

Para poder instalar iremos a la web oficial http://getbootstrap.com y le damos a Download, hay tendremos tres opciones de descarga.

    1. Descargar el código compilado, es la ideal para comenzar a trabajar con Bootstrap.

    2. Descargar código fuente, contiene todo los archivos originales de Bootstrap, para poder usarlo necesitas compilarlo.

    3. Descargar código fuente en Sass, ésta versión del código fuente esta convertida a Sass para facilitar la implementación con aplicaciones como Ruby,

Si no queremos tener en nuestro servidor los archivos de Bootstrap, podemos utilizar el CDN disponible para ello. Para el que no lo sepa, un CDN es un conjunto de servidores ubicados en diferentes puntos de una red que contienen copias locales de ciertos contenidos, en este caso, los archivos de Bootstrap. Con esto conseguimos mejorar la carga de nuestra web.

En este tutorial nos decantaremos por la opción 1, una vez que lo hemos descargado, descomprimimos el framework en la carpeta de nuestro nuevo proyecto, la estructura de la carpeta debería de quedar así:

Carpeta del Proyecto/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Esta es la estructura más básica de Bootstrap, los archivos acabados en *.min.css o *.min.js son versiones comprimidas.

Si queréis ver el tipo de web que podemos crear utilizando este framework, en la web oficial hay una galería de webs creadas con Bootstrap.

Nuestro primer ejemplo con Bootstrap

Estupendo, ya lo tenemos en nuestro ordenador, ahora vamos a ver como empezar a usarlo. Primero escribimos una estructura básica de HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

Ahora ya todo esta completo ya tenemos nuestra web, ahora llamamos a Bootstrap para que podamos hacer uso de sus funcionalidades

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!–Con esto garantizamos que se vea bien en dispositivos móviles–>
    <title>Mi primer proyecto con los desarrolladores de full stack</title>

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!–Llamamos al archivo CSS –>
</head>
<body>
    <h1>¡Hola mundo!</h1>
     <p> Hola a todos desde Desarrolladores Full Stack, porque esta es mi primera web con Bootsrap ;(</p>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!– Importante llamar antes a jQuery para que funcione bootstrap.min.js   –>
    <script src="js/bootstrap.min.js"></script> <!– Llamamos al JavaScript de Bootstrap –>
</body>
</html>