Uno de los principales quebraderos de cabeza con los que se encuentra un desarrollador a la hora de iniciar un nuevo proyecto web, es la creación de un layout básico sobre el que trabajar.
Adicionalmente, si queremos que nuestro diseño sea capaz de adaptarse a los distintos navegadores, configuraciones o incluso dispositivos, la selección de un framework de apoyo puede ahorrarnos mucho tiempo y esfuerzo.
Por desgracia, en la actualidad sigue siendo necesario un profundo conocimiento de los distintos estándares y de como estos se aplican en cada navegador. De nuevo, la adopción de un framework que nos guie en la aplicación del conjunto necesario de buenas prácticas, puede ser crucial.
Con el fin de cubrir estas necesidades surgen frameworks como 960gs o Bootstrap. En este artículo nos centraremos en este último, el cual ha sido desarrollado por Twitter y cuya versión 2.0 ha sido liberada recientemente.
Funcionalidades disponibles
Bootstrap 2.0 es un framework diseñado para simplificar el proceso de creación de diseños web. Para ello nos ofrece una serie de plantillas CSS y de ficheros JavaScript, los cuales nos permiten conseguir:
- Interfaces que funcionen de manera brillante en los navegadores actuales, y correcta en los no tan actuales.
- Un diseño que pueda ser visualizado de forma correcta en distintos dispositivos y a distintas escalas y resoluciones.
- Una mejor integración con tus las librerías que sueles usar habitualmente, como por ejemplo jQuery.
- Un diseño sólido basado en herramientas actuales y potentes como LESS o estándares como CSS3/HTML5
Estructura básica de nuestro proyecto
Una vez descargada la distribución de Bootstrap desde la página principal del proyecto, podemos centrarnos en crear un esqueleto básico sobre el que empezar a trabajar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Nuevo proyecto con Bootstrap 2.0</title>
<meta name="description" content="Artículo en GenbetaDev sobre Bootstrap 2.0">
<meta name="author" content="Ricardo Borillo">
<!—[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]—>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body { padding-top: 60px; }
</style>
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
De esta plantilla mínima, podemos destacar distintos aspectos. El primero de ellos es la inclusión de HTML Shim, el cual se encarga de que Internet Explorer reconozca los tags HTML5 y nos permita asignarles estilos.
Por otra parte, en la cabecera deberemos incluir las CSS que distribuye Bootstrap y, al final de body para que la página se cargue más rápido, veremos el resto de recursos JavaScript que completan el despliegue.
Si nos centramos ya en contenido, podemos comenzar nuestro ejemplo con una barra superior que me permita definir los menús generales del sitio:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Genbeta Dev</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Bio</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</div>
A continuación, simplemente añadimos algo de contenido al cuerpo de la página:
<div class="container"> <h1>Ejemplo de Bootstrap para Genbeta Dev</h1> <p>Plantilla ejemplo para el desarrollo de un proyecto web.</p> </div> <!— /container —>
El resultado obtenido será el siguiente:
Creación del layout de la página
La definición del layout de la página es uno de los puntos fuertes de Bootstrap. La nueva disposición en base a 12 columnas permite una gran flexibilidad a la hora de crear nuestras presentaciones.
Para verlo en acción, vamos a tomar como base el ejemplo que preparábamos en el apartado anterior y pondremos nuestro código dentro del bloque cuyo atributo class sea container. En el ejemplo vamos a crear una disposición sencilla que muestre una región superior seguida de varios bloques más pequeños para presentar distintos productos de nuestra empresa.
Para completar este esquema, la región principal puede seguir la siguiente distribución:
<div class="hero-unit">
<h1>Bienvenidos a nuestra página!</h1>
<p>
Texto principal de bienvenida a nuestra página. Prueba a redimiensinar el
navegador y comprobará como se adapta el diseño al nuevo tamaño.
</p>
<p><a class="btn btn-primary btn-large">Más información</a></p>
</div>
En este simple marcado ya podemos distinguir toques de diseño interesantes. Por ejemplo, los bloques que añaden la class hero-unit se presentan como un panel de bordes redondeados. Adicionalmente, si nos fijamos en el enlace a más información, veremos como Bootstrap lo renderiza en forma de botón grande.
Y a continuación, podemos añadir tres productos utilizando la distribución de 12 columnas. Para ello debemos tener una región con el class row, la cual contendrá a su vez otras regiones con la identificación del número de columnas que ocuparán (por ejemplo, span4 para definir un ancho de cuatro columnas):
<div class="row">
<div class="span4">
<h2>Producto</h2>
<p>
Descripción del producto presentado. Descripción del producto presentado.
Descripción del producto presentado.
</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
En el ejemplo que nos ocupa y para completar un ancho total de 12 columnas, deberemos tener tres bloque identificados con un class span4.
Concluiremos nuestro primer marcado con un pie donde poder poner nuestra información de contacto:
<footer> <p>© Company 2012</p> </footer>
Componentes adaptativos para un diseño fluido
Para completar el diseño del layout, podemos elegir entre un diseño adaptado a 940 pixels o intentar que este pueda ser fluido.
Para ello Bootstrap nos ofrece varios recursos a tener en cuenta. Por una parte, la definición de las filas que habíamos presentado se declaraban con el class row. Si deseamos hacer uso de la versión fluida, tendremos que utilizar un class distinto:
<div class="row-fluid"> <div class="span4">…</div> <div class="span8">…</div> </div>
De igual forma, para definir las áreas principales de la página podemos optar por etiquetar el bloque principal con el class container como en los ejemplos, o de nuevo elegir la opción fluida:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!—Sidebar content—>
</div>
<div class="span10">
<!—Body content—>
</div>
</div>
</div>
Por último, si queremos que nuestra barra de herramientas principal se pueda adaptar a los cambios en el ancho de navegador o a la renderización en otros dispositivos de menor ancho, aplicaremos la siguiente construcción:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Genbeta Dev</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Bio</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</div>
</div>
Como podemos ver en el código, se ha introducido un nuevo enlace con el class btn btn-navbar. Este enlace, gracias a atributos extra definidos gracias a HTML5 (data-toggle y data-target), será mostrado cuando el layout de la página no permita visualizar las opciones textuales convencionales. Este tipo de elementos nos ofrecen mucha versatilidad, ya que se adaptan a cualquier tamaño y resolución. El mismo menú pero ante un menor tamaño se vería de la siguiente forma:
Responsive design
Por último, si queremos asignar estilos específicos a nuestro diseño en función de la resolución del dispositivo en el que se esté visualizando, Bootstrap nos ofrece un conjunto base de media queries con el que podremos construir expresiones del tipo:
// Smartphonesmedia (max-width: 480px) { … } // Tabletsmedia (max-width: 768px) { … } // Tablets apaisados y escritoriomedia (min-width: 768px) and (max-width: 980px) { … } // Escritorio grandemedia (min-width: 1200px) { .. }
Para ello, es obligatorio incluir el siguiente meta en el head de nuestra página:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
En siguientes entregas abordaremos el resto de componentes que ofrece esta excelente librería y, como no, sus plugins JavaScript integrables con jQuery :)
Noticias | Lanzamiento de Bootstrap 2.0
Página principal del proyecto | Bootstrap
Código de ejemplo | Test Bootstrap en Github
Comentarios
Bootstrap es muy útil, lo estoy usando desde que salio y mi único problema fue al integrar un formulario en un menú pero lo solucione deteniendo la propagación del evento click en el navbar.
jQuery(".dropdown-menu").find("form").click(function (e) { e.stopPropagation(); });
Muy, muy interesante. Ya me anoté Bootstrap la otra vez, pero es más cómodo leer un artículo tan bien preparado XD XD XD
Es fascinante como hace ya bastante tiempo (afortunadamente) los desarrollos informáticos no sólo se centran en el producto, sino también en los desarrolladores.
Son pequeños pasos, pero vistos en conjunto, tengo la sensación que hace 10 años desarrollábamos montados en un troncomóvil y ahora vamos en una cómoda limusina.
¡Gracias!
Pues yo creo que de limusina nada, que para eso aún quedan otros 25-50 años más, por lo menos, cuando podamos definir una idea y que se genere sola en código. Ahí sí que iremos en una limusina.
Yo para mí que andamos todavía en un 600, que no obstante es mucho mejor que el troncomóvil de cuando empezamos, por supuesto.
En ese momento dejaremos de ser necesarios ;)
No lo creas, una cosa es que alguien pueda definir "quiero un procesador de textos" y otra cosa es definirle a la máquina todos los modelos de proceso que hagan que el procesador de textos funcione.
Es evidente (creo) que nunca existirá una máquina que le digas "quiero un portal web que haga esto y esto y esto..." y te lo fabrique sin más, porque son procesos ambiguos que una máquina no entiende, pero sí que puede llegar a ser posible que le digamos "quiero un proceso CRUD que tenga estas opciones", "quiero lanzar un XML que haga esto", "quiero conectar con esta BD", y que el propio "programador-dictador" indique luego como unir todas las piezas, para obtener un producto final coherente.
Para eso se necesitará entender los procesos necesarios y no vale cualquiera.
"pero sí que puede llegar a ser posible"
Hace mucho que eso es posible (hay muchos "generadores de aplicaciones por ahí"), dále una lectura a UML.
El problema es, que las aplicaciones son bastante más que "eso" (crud, unas tablas en una bbdd, ...).
Claro que ya hay de eso, era el ejemplo para entenderlo fácil. Las herramientas CASE ya las había cuando yo estudiaba la carrera en el 92. El detalle es que puedas decirle que haga "cualquier cosa que no sea abstracta" y consiga hacerla sin teclear tú nada.
Vamos, que tu hablaras y el ordenador hiciera. No sé, así a bote pronto se me ocurre que dijeras para una página web:
1. hazme una cabecera alineada a la derecha que ponga XXX". 2. hazme un menú de 5 submenús 3. el menú 1 tiene estas opciones 4. el menú 2... 9. quiero un layout con foto flotante a la derecha y tal y tal.
Eso respecto al diseño, luego le indicas la capa de negocios.
1. conectas con la BD de XXX 2. Necesito los campos de nombre, apellidos, etc. (los dices todos y que se mate a seleccionarlos) 3. el usuario puede grabar texto y subir fotos 4....
No sé, algo así, que además no te tuvieras que preocupar del lenguaje a usar, tú solo dictas y listo.
Eso sí lo consideraría una limusina... y no te iba a quitar el puesto uno cualquiera, solo otro que entendiese el proceso como tú.
"Vamos, que tu hablaras y el ordenador hiciera."
XD XD XD ¡ah vale!, entonces aún queda un poco sí, más que nada que si ya es difícil que los humanos nos entendamos hablando, imagínate con un ordenador XD XD XD
El desarrollo de software, ¿Pensáis que será algún día como hacer churros o es un arte?
Personalmente lo tengo bastante claro. No me gustan nada los interfaces autogenerados, ya que cuando diseño un interfaz, por muy simple que sea, siempre intento hacerlo pensando en el usuario y en cómo lo va a utilizar, con lo que aunque sigan patrones comunes, nunca serán generalizables ...
Pues bajo mi punto de vista, ni uno ni otro.
Ya hay (y habrá) las dos cosas, el soft hecho "para todos igual" (como ahora por ejemplo, un ContaPlus, por decir algo) y el personalizado, lo mismo que hay ropa de Zara y de un modisto particular.
Todo está en ver cuánto quieres pagar por tener algo personalizado.
Pero vamos, que ya sale soft como churros está a la orden del día.
Que un soft como ContaPlus sea para todos igual, no quiere decir que haya sido fabricado con una máquina de hacer churros. Puedes tener algo muy estándar y haber cuidado el diseño de los interfaces y de la interacción. Es eso a lo que me refería ...
Cierto, pero me explico de otra manera:
Coge un framework propio que cualquier desarrollador haya realizado para sí mismo tras querer evitar que después de años de hacer las mismas cosas una y otra vez tenga que volver a escribirlas.
Habrá hecho algo que le permita sacar formularios estándar cambiando 4 datos de entre un montón de código. Cada programa tendrá su propia idiosincrasia, pero muchas partes se habrán generado de forma automática con ese framework, ya que ese era el propósito.
Para mí eso sería la fábrica de churros: misma interface, mismo procesamiento, pero nombres de campos diferentes.
Ya casi lo somos, la pena para las cárnicas es el casi.
Yo también lo estoy usando en docuralia.com y estoy encantado. Por ahora el layout que mejor he conseguido adaptar es el responsive design. ¿ Creéis que merece la pena optar por un layout fluido?
En general sería lo deseable, pero creo que depende mucho del tipo de aplicación que estemos haciendo. Con un layout fluido, la capacidad adaptativa crece en los casos que el espacio esté limitado, pero esto puede conllevar problemas. Con esto quiero decir que cuando el espacio crece mucho y de nuevo el diseño se adapta, todo puede quedar estéticamente raro.
Me gusta.
Un articulo realmente intereante. Espero los proximos hablando de los pluggins de javascript Un saludo
Me ha encantado y no lo conocía nada más que de oídas, pero en cuanto pueda me voy a poner a ello :).
Ya se que me vais a tachar de raro, o que vengo a liarla o algo, pero es que yo no le veo el que a esto la verdad :/
Osea entiendo que algunos frameworks mejoran las cosas, por el momento el único que uso es jQuery, pero para hacer el diseño de la web no es más fácil hacerlo de 0? o basandonos en cosas que ya nosotros mismos tengamos hechas, que no que tener que tener que estar tocando y comprendiendo un layout que no has tocado?
Entiendo que con jQuery tuve que hacer lo mismo pero realmente todo lo que me ha aportado jQuery dudo que me lo pueda llegar a aportar un framework así, ya que con jQuery jamás pensé en tocar el código de jQuery para adaptarlo a mis necesidades, en cambio en este me da la sensación de que si que voy a tener que estar tocando el código para adaptarlo a mis necesidades.
Quizás me equivoque, pero en serio, no acabo de entenderlo :/
Para que lo entiendas, pondré un ejemplo.
Cuando quieres ocultar una capa con jQuery, tú haces la capa, tú decides cómo y dónde ponerla y tú le pones el class, id y otros atributos como tú quieres. Entonces, haces algo como:
$('#capa').hide();
Sin embargo, cuando usas un plugin (ej. uno para mostrar un slide de fotos de flickr), debes establecer el layout como el plugin dicta (normalmente), por ejemplo, algo como
<ul>
<li rel="flickr-code-1" />
<li rel="flickr-code-2" />
<li rel="flickr-code-3" />
</ul>
La ventaja de adaptarte a una norma, es que puedes aprovechar el trabajo realizado sobre esa norma (un ejemplo más completo sería el ThemeRoller, todo el trabajo que se base en la norma ThemeRoller, será compatible entre sí [ej. plugins, tu aplicación, ...]).
La desventaja como tú dices, es que a veces, las cosas sencillas se vuelven difíciles (porque la norma no lo permite y "hay que saltársela sin saltársela"). Pero en general, puedes aprovechar muuuucho trabajo de otras personas.
Por eso son TAN importantes los estándares y por eso ha sido TAN malo Flash para la web. (Perdón, no he podido evitarlo).
Arffff ¡para cuando un editor de código! XD :P XD :P
-- editado por última vez a las 14:47
Hola LoBo,
Comparto tu mismo punto de vista, es una excelente ayuda si lo que deseas es tener una gran cantidad de recursos y estilos predefinidos, pero si lo que necesitas es a partir de un psd maquetar un sitio que mejor que seguir algunas buenas practicas de css?
Yo le veo mas utilidad a un par de herramientas que me han dejado asombrado estos días y que es mas, permiten utilizar bootstrap. Me refiero a Sass y Compass funcionan a la maravilla tanto en windows como osx. Con los mixins y poder escribir un css anidando código utilizando variables es algo que aprecio mas que el tener un montón de estilos predefinidos. Ahora escribo mi codigo css en un fichero de tipo estilos.scss y nada mas guardar el se encarga de actualizar mi fichero estilos.css y es mas puedo al finalizar mi css guardarlo de manera comprimida con solo cambiar una opción y el tiempo de carga funciona genial.
En definitiva no veo mal bootstrap pero aprecio mas el tener una herramienta que agilice mi trabajo siguiendo unas pautas de diseño estándares.
Yo bootstrap lo bajé hace ya tiempo y jugué con el, para cosas rápidas está bien, pero el tema de tener que meter divs con clases en plan spanX, o botones que para que sean como quiero sea en plan btn btn-primary btn-large como que no me gusta.
Lo usé alguna vez para algún prototipo rápido, pero nunca para hacer nada en producción.
Cuando salió la 2, estuve mirando un poco por github y creo que usando less y sus mixins se puede solucionar este gordo problema en el marcado... sólo que aún no he tenido tiempo de probarlo.
¿Alguien lo usa sin hacer classitis en el marcado?
Aunque coincido completamente contigo en que la semántica del marcado no debería ensuciarse, el uso de DIV para definir regiones que hace el framework es bastante mínimo.
Si hablamos de las clases, ahí el tema cambia. Es cierto que usa muchas referencias distintas y es feo. Hay otros frameworks más centrados en HTML5 que usan las propiedades data-* que proporciona el estándar para añadir semántica al marcado, pero la verdad es que esta opción también ensucia bastante.
En general creo que Bootstrap 2.0 es bastante tolerable en este sentido, aunque siempre es una cuestión de compromiso y de decidir si toda la funcionalidad que ofrece y la rapidez de prototipado compensan un código un poco menos semántico :)
"la semántica del marcado no debería ensuciarse"
¿Porqué no?, no hay una solución perfecta al problema real que esa sencilla frase implica. Y si puedo hacer una aplicación más fácilmente "ensuciando un poco el marcado", yo lo haré.
En el futuro es posible que esa "mancha" me afecte, o no, ahora prefiero ser más productivo.
Hablo desde la experiencia de desarrollar y mantener la misma aplicación (con mucha evolución) DHTML durante más de 10 años (imaginar lo que en ese tiempo ha ido cambiando la cosa).
La estamos migrando a una nueva versión, no se si durará otros 10 años, pero tengo muy claro que hay problemas por los que no merece la pena molestarse (ej. tener un marcado "inmaculado").
Igual no me he explicado del todo, pero estoy de acuerdo en lo que comentas. Cuando hablo de que todo es una cuestión de compromiso entre correctitud y funcionalidad, quiero decir que mi intención es siempre hacer las cosas lo mejor posible dentro del margen que tengo para hacerlas.
Como profesional, intentaré que la solución que adopte sea lo más estándar, extensible, correcta y sobretodo, fácil de mantener. En cualquier caso, si para conseguirlo debo extender varios meses un proyecto, pues es posible que no esté justificado ...
En mi opinión, tener nuestro código inmaculado debe ser un objetivo que tengamos en mente, aunque no lo cumplamos siempre al 100%. Si además utilizo herramientas que me ayuden a conseguirlo, pues mejor que mejor.
+1 porque te explicas mucho mejor que yo.
Lo he usado para mi pagina web y va como la seda Muchas gracias!!! Si quereis le podeis echar dar un vistazo http://stexas.nixiweb.com/
Está excelente. Tengo varios sitios por crear y creo que me aventuraré con Bootstrap 2.0. Nunca he brillado por ser muy buen diseñador, pero ya con esto espero que mis sitios se vean lo mejor organizado posible.
Alguien sabe porque se ha roto el código de cada uno de los recuadros. En vez de ver los elementos html veo un montón de caracteres rarosss!!!!!!
Se ha roto el código html de cada uno de los recuadros
Gracias por el aviso. No se muy bien que ha pasado, pero ya está arreglado.
Una pregunta de un noob como yo, se puede usar bootstrap apra crear diseños y venderlos? o no esta peermitido?
Sin problema. La licencia de Bootstrap es Apache y permite su uso y libre distribución.
Ahmmm... ¿Y la siguiente entrega? XD
Escribir un comentario
Para hacer un comentario es necesario que te identifiques: ENTRA o conéctate con FacebookConnect