Primeros pasos con Bootstrap

Escrito por:

Alvaro Munoz

En el artículo de hoy vamos a hablar sobre el framework Bootstrap, y lo vamos a hacer desde la óptica de una persona que quiere empezar a desarrollar su web con Bootstrap desde cero.

Para esta misión contamos con nuestra compañera Ana, una desarrolladora web que acaba de empezar su experiencia profesional tras realizar el Máster en MPD Marketing, Publicidad y Diseño Web. Ana empezó hace apenas 3 meses a desarrollar su proyecto web utilizando este framework y por eso es la persona idónea para escribir este artículo.

Indice del artículo:

1- Qué es Bootstrap
1.1- Historia Bootstrap

2- Ventajas

3- ¿Cómo empezar con Bootstrap?

4- Descargar Bootstrap

 

¿Qué es Bootstrap?

 
Bootstrap es un framework o conjunto de herramientas de código abierto para agilizar la creación de aplicaciones y sitios web adaptado al tamaño del dispositivo en el que se visualice.

Es decir, es un conjunto de herramientas que nos ayudará a crear páginas web responsive. Este es el tic de la cuestión, crear webs que se adapten a todos los dispositivos de una forma sencilla y eficaz. Ya sabéis que google penaliza aquellas web que no están adaptadas a móviles, así que crear webs responsive debe ser la máxima de cada proyecto.

Un poco de historia de Bootstrap:

Este proyecto de código abierto fue creado en un principio por el equipo de desarrolladores de twitter con el objetivo de crear una librería de recursos propios para que les resultara más sencillo su trabajo.

La verdadera razón es que todos y cada uno de los desarrolladores tenemos una forma de abordar los problemas de codificación diferente y cuando en el proyecto se ven implicados multitud de ellos los problemas de inconsistencias son inevitables.
 
Según palabras de Mark otto:
 
“…un pequeño grupo de desarrolladores y yo nos reunimos a diseñar y construir una nueva herramienta interna y vimos una oportunidad de hacer más. A través de ese proceso, nos vimos construyendo algo mucho más sustancial que otra herramienta interna más. Meses después, terminamos con una primera versión como una manera de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía.”

Finalmente twitter liberó esta herramienta como código abierto en agosto 2011, convirtiéndose en apenas 6 meses después en el proyecto de desarrollo más popular de Github.

Ejemplos de Bootstrap:

Álvaro quiere que este artículo sea más práctico que teórico, por lo que lo primero que quiero compartir con vosotros son unos ejemplos inspiradores de aplicaciones y sitios web construidos con la ayuda de esta herramienta. Los puedes ver pinchando en getbootstrap.

Ventajas de Bootstrap

Bootstrap ofrece una amplia gama de plantillas de diseño basadas en lenguajes como HTML, CSS y extensiones opcionales de JavaScript. No obstante las ventajas de Bootstrap son las siguientes:
 
1- Fácil de usar: solo necesitas conocimientos básicos de HTML y CSS para empezar a trabajar con Bootstrap.
 
2- Responsive design: Nuestro diseño se adaptará a la pantalla del dispositivo con el que accedamos, ya sea un ordenador, Tablet o smartphone.
 
3- Compatibilidad con navegadores: Bootstrap es compatible con todos los navegadores actuales (Chrome, Firefox, Internet Explorer, Safari y Opera).
 
4- Personalizable: El código de Bootstrap es totalmente editable.
 
5- Integra 12 librerías de jQuery: muy completas, con la posibilidad de añadir más.
 
6- ¡Ahorra tiempo! incluye elementos predefinidos en cuanto a estilos y funcionalidades, tales como tablas, formularios, botones, tipografías, menús, y un largo etc.
 
7- Existe una gran comunidad de desarrolladores en Github para dar soporte.

 

Volvemos a poner un ejemplo práctico:

Álvaro vuelve a pedirme que haga más practico este artículo, así que vamos a la obra, vamos aprender lo siguiente:
Cómo saber si una web utiliza o no Bootstrap
Todos sabéis que existen extensiones en chrome que nos ayudan a saber en qué lenguaje y cómo esta creada una web, verdad? Pues bien, vamos a utilizar en este caso wappalyzer para conocer cómo está creada la web de códigonexo.
Desde la barra del navegar abrimos la extensión una vez que estemos en la web (en este caso hemos utilizado el artículo de la Guía analítica web 2) vemos lo siguiente:

En la lista nos aparece que esta web utiliza twitter Bootstrap y más información como qué tipo de CMS utiliza, widgets, tipografías e incluso algunas etiquetas como las de analytics.
 
cómo saber si una web utiliza o no bootstrap
De esta forma sabemos qué páginas han utilizado librerías de Bootstrap para su web.

 

¿Cómo empezar con Bootstrap?

 
Una de las formas más fáciles para comenzar con Bootstrap es con el uso de plantillas. Hay una gran cantidad de plantillas disponibles para su descarga gratuita.
En la siguiente web podemos encontrar varios ejemplos de plantillas de bootstrap.
 
ejemplos de plantillas de bootstrap

 
Los temas incluyen varias secciones de contenido, detalladas en el apartado “Features”. Esta información es de utilidad para encontrar la plantilla de Bootstrap que mejor se adapte a tus necesidades. Por ejemplo, el tema “Agency” incluye elementos como popups, timeline y un formulario de contacto PHP.
 
plantilla agency

 

Descargar Bootstrap

 
Cuando encuentres la plantilla que mejor se adapte a tu diseño, tan solo tienes que descargarla en download como ves en la siguiente imagen:
 
descargar plantilla bootstrap

 
Después de descomprimir la carpeta descargada, verás una estructura de archivos y directorios parecida a la siguiente:
estructura de archivos de bootstrap

Para cada archivo se ofrecen dos variantes: los archivos compilados y los archivos compilados + comprimidos (.min).

Explicación de los archivos:

1- Bootstrap.css: Añade estilos útiles a formularios, tablas, botones, listas e imágenes, así como el pleno funcionamiento de barras de navegación.
2- Bootstrap.js: Código javascript para la creación de modales, carruseles, alertas, ventanas emergentes, menús despegables, etc.
3- Fonts: Incluye 260 iconos creados mediante una fuente especial llamada Glyphicon Halflings.

 
iconos bootstrap

jQuery:Esta herramienta requiere jQuery para funcionar.

Con esto cerramos el primer tema de esta guía que iremos desarrollando a lo largo de este último trimestre del 2016. Espero que os haya gustado y para el próximo capitulo hablaremos del sistema de rejilla para ayudarnos en la disposición de los contenidos de nuestra web y su adaptación a los diferentes tamaños de pantalla de forma automática.

 

Y sobre todo, si quieres un trabajo profesional de diseño web, deja que lo hagan profesionales. ¡No te arrepentirás!

 

 

Comparte el post

Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInPin on Pinterest

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Síguenos en Facebook
Categorias
Últimas Entradas
Síguenos en Google+
Últimos Tweeets