Desarrollo web

Creación de sitios web con capacidad de respuesta con Bootstrap

Keith Pijanowski

Es solo cuestión de tiempo que un cliente escriba la dirección URL de su sitio web en un dispositivo móvil. ¿Verá el usuario una representación de su sitio que sea imposible de usar en un teléfono porque el sitio se diseñó solo para escritorio? Si es así, ese usuario con total probabilidad se irá a un sitio más adaptado para dispositivos móviles. ¿Qué ocurriría si en su lugar ese usuario encontrase una experiencia de usuario diseñada específicamente para un factor de forma de móvil y disfrutara de una fácil interacción con su sitio?

En el pasado, un sitio web que admitiese dispositivos móviles y de escritorio necesitaba bases de código distintas. Sin embargo, hoy día existen marcos de interfaz de usuario que permiten que las páginas web de un sitio admitan móviles, tabletas, dispositivos de escritorio e incluso pantallas grandes de escritorio, todo ello con una sola base de código. Aunque estas herramientas no son una panacea para los desarrolladores web móviles, pueden facilitar considerablemente el proceso de desarrollo. Aun así, se debe reflexionar para determinar si una es adecuada para su sitio.

En este artículo se presenta una introducción a una de estas herramientas, Bootstrap, que se incluye en muchas de las plantillas de aplicación web de Visual Studio 2013. Bootstrap es un marco que permite el con capacidad de respuesta (Responsive Web Design, RWD), un enfoque para diseñar sitios web cuyo objetivo consiste en ofrecer una experiencia de visualización aceptable en todos los factores de forma con una sola base de código. Después de la introducción, se explicarán algunos factores que pueden ayudarle a decidir si un marco como Bootstrap es adecuado para su sitio.

El comienzo

Ha sido necesaria una cierta evolución para que la industria del software llegue al punto en que surge una solución como Bootstrap. Después de un inicio intermitente, que comenzó en 1998, cuando surgieron Wireless Markup Language (WML), Compact HTML y XHTML Mobile Profile para después desaparecer, finalmente HTML5 se convirtió en el estándar HTML de próxima generación para todos los dispositivos en 2009. Pero los estándares por sí solos no bastan. Aunque el estándar para el marcado web móvil estaba en constante evolución, también se producían avances significativos en el hardware, los exploradores móviles y el ancho de banda. Los procesadores se volvieron más rápidos, los exploradores móviles avanzaron hasta el punto de poder mostrar cualquier página web (incluso aunque la página no hubiera sido diseñada para un dispositivo móvil) y el ancho de banda aumentó. Así se creó un entorno para que los desarrolladores tomaran el mando.

A los desarrolladores les encanta crear herramientas para otros desarrolladores y la web móvil no es ninguna excepción. Hoy en día, hay más de una docena de marcos de interfaz de usuario distintos en el mercado. Sería injusto etiquetar uno de estos marcos como "el mejor" porque existen enfoques diferentes y los sitios web tienen requisitos distintos. Elegí Bootstrap para este artículo porque tiene un gran nivel de adopción, está completamente documentado y se incluye en las plantillas de aplicación web de ASP.NET.

¿Qué es Bootstrap?

Bootstrap es un marco de interfaz de usuario con capacidad de respuesta para la creación de sitios web. El marco de Bootstrap, al igual que muchos otros marcos de interfaz de usuario para el desarrollo web, es una colección de clases CSS, componentes de interfaz de usuario y complementos de JQuery. Bootstrap se considera un marco ligero. En otras palabras, usa más CSS que JavaScript para realizar su trabajo. Aunque Bootstrap se considera ligero, una página web que use herramientas de Bootstrap sigue necesitando más procesamiento para representarse que una página que se diseñe específicamente para un factor de forma determinado. Por este motivo, el rendimiento debe ser una consideración importante al diseñar, desarrollar y probar las páginas que usan cualquier parte del marco de Bootstrap.

Bootstrap hace mucho por usted de forma automática. También permite personalizar fácilmente el comportamiento predeterminado de un factor de forma específico, mientras mantiene un buen aspecto de la página en otros factores de forma. La versión 3 de Bootstrap incluye clases CSS cuyos destinos son los anchos de pantalla de los exploradores que se encuentran normalmente en los exploradores móviles, de tabletas e incluso en los que se ejecutan en grandes pantallas de escritorio. Puede usar las clases CSS Bootstrap para anotar elementos de HTML5. Las clases más usadas de CSS incluyen el sistema de cuadrícula de Bootstrap, una colección de clases que organizan el diseño de una página mediante filas y columnas. Explicaré el sistema de cuadrícula con más detalle más adelante en este artículo.

Bootstrap tiene una serie de componentes de interfaz de usuario para crear la interfaz de usuario de un sitio, entre los que se incluyen el botón desplegable, el grupo de botones, la lista desplegable, la barra de exploración, la ruta de navegación, los objetos multimedia, las barras de progreso y paginación, por nombrar solo algunos. Muchos de estos componentes tienen capacidad de respuesta en sí mismos, lo que significa que se representan de forma distinta según el ancho del explorador. Por ejemplo, la barra de exploración es un componente potente que pasa automáticamente de una barra de menús que muestra las opciones de menú por todo el ancho de la pantalla en los escritorios a una llamativa versión compacta que ofrece opciones mediante una barra de menús de lista desplegable que se activa cuando el usuario toca la barra de exploración.

Para conocer más características avanzadas de interfaz de usuario, Bootstrap también tiene una colección de complementos personalizados de JQuery, entre los que se incluyen carruseles, paneles que se pueden contraer, avisos con diálogos modales y mensajes que se superponen.

Introducción

Los archivos de JavaScript y CSS de Bootstrap se incluyen automáticamente en el proyecto cuando se usa la plantilla de aplicación web de ASP.NET para Visual Studio 2013 para crear el proyecto. El cuadro de diálogo Nuevo proyecto para plantillas de aplicación web se muestra en la Figura 1. Bootstrap también requiere JQuery. Cuando obtiene Bootstrap de la plantilla de aplicación web de Visual Studio 2013, obtendrá Bootstrap v3.0.0 con JQuery v1.10.2. Si utiliza las plantillas para Visual Studio 2012, estos archivos no se incluirán en el proyecto. Además, Bootstrap no se incluye automáticamente si se crea un nuevo sitio web mediante Archivo | Nuevo sitio web.

Figura 1. Diálogo Nuevo Proyecto de Visual Studio 2013 de la plantilla de aplicación web de ASP.NET

Si prefiere usar las versiones mayores y más recientes de Bootstrap y JQuery, use NuGet para actualizar el proyecto. Y use NuGet para obtener Bootstrap si tiene una versión de Visual Studio anterior a Visual Studio 2013. En el sitio de Bootstrap (getbootstrap.com) se muestra cómo se vincula a una versión de Bootstrap hospedada en CDN, lo que puede suponer una ventaja considerable de rendimiento.

Experimentar con el sistema de cuadrícula de Bootstrap

Bootstrap ofrece lo que se conoce como un diseño con capacidad de respuesta de 12 columnas. Puede diseñar las páginas con cualquier número de filas, pero debe usar 12 columnas. Estas 12 columnas tienen el mismo tamaño a lo ancho del explorador y puede usar las clases CSS de Bootstrap para especificar cuántas columnas debe ocupar un elemento HTML. Se trata de un tipo diferente de sistema de cuadrícula con respecto al que están acostumbrados los desarrolladores de XAML para Windows Phone y Windows 8. El sistema de cuadrícula de XAML permite que un diseño de página tenga cualquier número de filas y columnas. Entonces, los desarrolladores colocan cada control en una celda especificando un número de fila y de columna. Lo que hace que el sistema de cuadrícula de Bootstrap sea especialmente potente es que puede especificar una extensión de columna distinta para grandes equipos de escritorio, equipos de escritorio normales, tabletas y teléfonos. Por ejemplo, un patrón de diseño común es crear una serie de etiquetas div y, para cada div, especificar que debe ocupar 2 columnas en un escritorio grande (esto significa que cabrían 6 div en cada fila), 3 columnas en un escritorio normal, 4 columnas en una tableta y 6 columnas en un teléfono (que generaría 2 div por fila). Este escenario se codifica en la Figura 2, usando las clases col* que componen el sistema de cuadrícula de Bootstrap. Las clases de color (gris, naranja, etc.) simplemente determinan el color del fondo de un div. En la Figura 3 y la Figura 4 se muestra cómo se representaría esta página en un escritorio y en un teléfono, respectivamente.

Figura 2. Un patrón de diseño común con el sistema de cuadrícula de Bootstrap

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

Figura 3. Representación del ejemplo de la Figura 2 en un escritorio con la clase col-md-3

Figura 4. Representación del ejemplo de la Figura 2 en un teléfono con la clase col-xs-6

Es importante tener en cuenta que en realidad Bootstrap no detecta el tipo de dispositivo. En su lugar, Bootstrap usa consultas multimedia para determinar si se debe aplicar una clase CSS. Las cuatro categorías de clases se muestran en la Figura 5, junto con los intervalos de ancho que harán que se aplique cada categoría.

Figura 5. Categorías de clases del sistema de cuadrícula de Bootstrap

Puede usar cualquier combinación de estas categorías al diseñar un elemento de HTML específico. Por ejemplo, en la siguiente línea de código se usa una clase de cada categoría:

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

Esto es equivalente al pseudocódigo siguiente:

Si el ancho del explorador es inferior a 768 píxeles, este div abarcará 6 de las 12 columnas disponibles, por lo que ocupará la mitad (6/12) de la pantalla.

Si el ancho del explorador se encuentra entre 768 y 991 píxeles, este div abarcará 4 de las 12 columnas disponibles, ocupando un tercio (4/12) de la pantalla.

Si el ancho del explorador está comprendido entre 992 y 1.200 píxeles, este div abarcará 3 de las 12 columnas disponibles y ocupará un cuarto (3/12) de la pantalla.

En el caso de que el ancho del explorador sea mayor de 1.200 píxeles, este div abarcará 2 de las 12 columnas disponibles, por lo que ocupará un sexto (2/12) de la pantalla.

No tiene que especificar explícitamente un número de columnas para cada categoría. Si no se especifica una categoría determinada, se usará la siguiente categoría inferior en tamaño. Por ejemplo, si quiere un diseño único para teléfonos, pero se puede aplicar el mismo para tabletas, escritorios y escritorios grandes, solo debe especificar una clase para teléfonos y otra para tabletas, de la siguiente forma:

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

Bootstrap usará la configuración para tabletas para los factores de forma de escritorio y escritorio grande. Además, la clase predeterminada para el teléfono es col-xs-12, que coloca cada div en su propia fila. Si se trata de un diseño aceptable para un teléfono, la línea de código anterior puede reducirse aún más:

<div class="col-sm-4"> {HTML elements here.} </div>

Observe que en la Figura 2 no se especifican las filas. El sistema de cuadrícula de Bootstrap moverá automáticamente un elemento div a la fila siguiente si ya se ha agotado la fila actual o si no hay espacio suficiente para el elemento div. Puede forzar que se use una nueva fila mediante la clase row, como se muestra a continuación:

<div class="row">
  {Place columns here.}
</div>

¿Por qué 12 columnas? Puede parecer que el número 12 se ha elegido al azar para este sistema de cuadrícula, pero no es así. Este número ofrece mucha divisibilidad y un gran margen de formas de composición. Por ejemplo, los números 1, 2, 3, 4, 6 y 12 pueden dividir de forma entera el número 12. Con estos valores para las extensiones de columna, se puede generar un diseño de contenido de 12 columnas, 6 columnas, 4 columnas, 2 columnas y 1 columna, respectivamente. Además, las combinaciones como 3+9, 9+3, 4+8 y 8+4 son combinaciones visualmente atractivas para el diseño de contenido.

Componentes de Bootstrap

Bootstrap contiene más de 20 componentes, que se pueden usar en su estado actual o ampliar con facilidad. Visite el sitio de Bootstrap para obtener una descripción de cada componente y un ejemplo de uso. La documentación de los objetos multimedia usa incluso un vídeo de música de REO Speedwagon para mostrar su uso. Aunque no los recuerde de los años 80, deles una oportunidad y escúchelos.

Analizaremos en más detalle el componente de la barra de exploración, que se usa para crear una barra de menús en la parte superior de una página. En la Figura 6 se muestra cómo usar el componente de la barra de exploración para crear un menú sencillo que contenga la marca del sitio y algunas opciones de menú. Cuando el ancho de un explorador es mayor de 768 píxeles, la barra de exploración se representa como se muestra en la Figura 7. Si el ancho del explorador es menor de 768 píxeles, la barra de exploración se representa como se muestra en la Figura 8. En este caso, se muestran las opciones de menú cuando el usuario pulsa el botón que contiene las líneas horizontales.

Figura 6. Uso del componente de la barra de exploración de Bootstrap

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Figura 7. Representación de la barra de exploración en navegadores con anchos iguales o superiores a 768 píxeles

Figura 8. Representación de la barra de exploración en navegadores con anchos inferiores a 768 píxeles

Obviamente, se trata un ejemplo muy simple. La barra de exploración también puede contener botones de menú desplegable e incluso incorporar funcionalidad de búsqueda en la propia barra. Además, la parte de la marca de la barra de exploración, que en el ejemplo es texto, puede ser una imagen.

Complementos de JQuery

Bootstrap tiene sobre una docena de complementos de JQuery, que se documentan en la pestaña de JavaScript del sitio de Bootstrap. A primera vista, parecen funcionalmente similares a los componentes descritos en la sección anterior, en el sentido de que son clases de CSS que se usan para aumentar los elementos de HTML5. Sin embargo, estas clases de CSS desencadenan actividad de JQuery cuando se representa el elemento HTML o cuando varios eventos activan el elemento HTML. Las páginas que hacen un uso intensivo de estos complementos deben someterse a pruebas para detectar problemas de rendimiento, especialmente en dispositivos con CPU más lentas y memoria limitada.

El código de JavaScript necesario para ejecutar estos complementos se encuentra en bootstrap.js. Cada complemento también está disponible como un archivo independiente, que permite incluir solo los complementos que necesita una aplicación y, por tanto, se consigue una representación más rápida de la primera página.

En la Figura 9 se muestra cómo usar el complemento Carousel, que ofrece funcionalidad de presentación. Si la página ya tiene un vínculo a bootstrap.js o bootstrap.min.js, todo está listo. O bien puede vincular a carousel.js si el complemento Carousel es el único que la página requiere.

Figura 9, Uso del complemento Carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

En la Figura 10 se muestra la representación del complemento Carousel para Windows Phone. El complemento Carousel se ajusta a sí mismo de forma adecuada para los factores de forma de tabletas, escritorios y escritorios grandes.

Figura 10. Representación del ejemplo de Carousel en el emulador de Windows Phone

Consideraciones

Como indiqué anteriormente, Bootstrap no es adecuado para cada situación. Para determinar si Bootstrap es adecuado para su sitio, hay algunas cosas que deberá tener en cuenta:

1. Si tiene un sitio existente cuyo rendimiento se ha ajustado durante los años y se ha optimizado para los usuarios, querrá proceder con precaución. La creación de prototipos de páginas muy usadas y complejas es también una buena idea. Si una página con Bootstrap habilitado no funciona adecuadamente, considere la posibilidad de configurar un sitio móvil y codificarlo todo usted mismo. En el artículo de Dino Esposito, "Movilización de un sitio web existente" (bit.ly/1CaVEWR), se muestra cómo configurar un sitio móvil.
2. Si va a crear un sitio nuevo, cree un prototipo de las páginas más complejas y de las páginas que crea que más se usarán. Asegúrese de que funcionan bien en los dispositivos de bajo rendimiento y en áreas con poco ancho de banda. Si una página muestra ser problemática, intente cambiar el diseño para que funcione adecuadamente. Un sitio móvil también es una opción para los nuevos sitios, pero esto se debería hacer solo si un cambio de diseño no funcionaría.
3. Asegúrese de que el sistema de cuadrícula de Bootstrap y los componentes usados para la navegación no son muy restrictivos con respecto al diseño del sitio. Coordínese con los diseñadores de la experiencia de usuario en las primeras etapas del proceso de investigación de Bootstrap. En mi opinión, una herramienta como Bootstrap obliga a diseñar para móviles, lo que le exige que mantenga las páginas limpias y despejadas. Sin embargo, el diseñador de la experiencia de usuario puede confirmar si Bootstrap puede usarse para representar correctamente su marca y ofrecer una experiencia adecuada para sus usuarios.

Más información y herramientas

Si va a desarrollar su sitio con Bootstrap, querrá revisar todos los componentes y complementos de JQuery documentados en el sitio de Bootstrap, donde también encontrará muchos ejemplos útiles. También debería consultar:

• Bootswatch (bootswatch.com), que contiene temas gratuitos para Bootstrap.
• Wrap Bootstrap (wrapbootstrap.com), que contiene temas y plantillas económicos de Bootstrap.
• Font Awesome (fontawesome.io), que es un sitio que ofrece iconos vectoriales escalables gratuitos que se pueden personalizar fácilmente con CSS.
• "Implementar una aplicación web móvil de ASP.NET MVC 5 en el servicio de aplicaciones de Azure" (bit.ly/1CMOGwq), donde se muestra cómo aplicar Bootstrap a un sitio web existente para adaptarlo a dispositivos móviles. En el artículo también se muestra cómo implementar un sitio en Microsoft Azure.

Resumen

El material que se presenta aquí es solo una breve introducción al marco de interfaz de usuario de Bootstrap. De ninguna manera describe completamente todos los componentes, clases y complementos de CSS que incluye Bootstrap. Deberá ir al sitio de Bootstrap para obtener una descripción completa de todas las herramientas disponibles y para explorar las páginas de ejemplo que muestran los distintos diseños de experiencias de usuario. Estos ejemplos son un buen punto de partida si necesita tener una idea de lo que es posible con Bootstrap.

Antes de continuar con un esfuerzo de desarrollo importante con Bootstrap o cualquier otro marco, tenga en cuenta el rendimiento y la facilidad de uso. La creación de prototipos de las páginas principales es la mejor manera de confirmar que Bootstrap se puede incorporar en su sitio y que le ofrecerá los resultados que espera.

Keith Pijanowski es un ingeniero, emprendedor y hombre de negocios. Tiene más de 20 años de experiencia en la industria del software y ha trabajado para startups y grandes empresas en roles que van desde la escritura de código al desarrollo de negocios. Puede ponerse en contacto con él en la dirección de correo electrónico keithpij@msn.com o mediante su cuenta de Twitter twitter.com/keithpij.

Gracias a los siguientes expertos técnicos de Microsoft por revisar este artículo: Rick Anderson y Cephas Lin