!Atención! Si quieres colaborar con algún articulo, contacta con nosotros enviando un email a social.media@nrdigital.es

  • Bootstrap, el diseño web más fácil y potente

    Publicado por: Jordi Vilaro , 05/29/2013 Leido ( 884 ) veces.

    A la hora de diseñar una web podemos optar por montones de frameworks que nos ayudarán tanto en el diseño y prototipado como en la ejecución de complejas funciones a nivel de cliente. Es en estos momentos cuando el desarrollador debe decidir si optar por uno de estos frameworks o programar desde cero la web. Mi opinión personal es que si alguien ya ha realizado el trabajo, y además lo ha hecho bien, no hace falta volver a inventar la rueda.


  • A la hora de diseñar una web podemos optar por montones de frameworks que nos ayudarán tanto en el diseño y prototipado como en la ejecución de complejas funciones a nivel de cliente. Es en estos momentos cuando el desarrollador debe decidir si optar por uno de estos frameworks o programar desde cero la web. Mi opinión personal es que si alguien ya ha realizado el trabajo, y además lo ha hecho bien, no hace falta volver a inventar la rueda. Más, si ese alguien ha puesto a disposición de la comunidad su desarrollo. Claros ejemplos de esto son jQuery, Modernizr o Initializr, y el que nos ocupará durante los próximos párrafos: Bootstrap, un framework creado por dos de los mejores ingenieros de Twitter (Mark Otto y Jacob) que permite la creación desde webs con diseño adaptativo (responsive design), integración de potentes formularios y funcionalidades especiales, todo ello sin perder de vista su compatibilidad total con HTML5, así como con navegadores anteriores a este estándar. Pero vayamos por partes...



    Primeros pasos

    Para empezar, vamos a crear una web sencilla que constará de 4 partes diferenciadas: una cabecera, una barra de navegación, el cuerpo con todo el contenido agrupado en tres columnas y un pie de página con enlaces también agrupados en tres columnas. Queremos que el diseño sea adaptativo de forma que la web se visualice igual de bien tanto en el navegador de escritorio como en un tablet o en un smartphone. Finalmente queremos que el código a utilizar sea HTML5, aunque esto último puede ser opcional, ya que podemos sustituir las etiquetas exclusivas de HTML5 por etiquetas <div> genéricas sin problemas, ya que Bootstrap utilizará unas u otras en función de las necesidades y de forma transparente. Veamos, pues, un diseño inicial del código de nuestra página web y cómo se ve en pantalla:

    <!DOCTYPE html>

    <html lang=”es”>

    <head>

    <title>Ejemplo Bootstrap</title>

    </head>

    <body>

    <header>

    <h1>Ejemplo Bootstrap</h1>

    </header>

    <nav>

    <ul>

    <li><a href=”#”>Opción 1</a></li>

    <li><a href=”#”>Opción 2</a></li>

    <li><a href=”#”>Opción 3</a></li>

    </ul>

    </nav>

    <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula erat diam. Phasellus viverra ullamcorper lorem, et egestas ipsum ultrices non. Morbi risus enim, ullamcorper eu pellentesque nec, accumsan ac diam. Nunc et turpis ante. Fusce non ante eros. Pellentesque vestibulum sollicitudin mi, eu tincidunt ligula vehicula vitae. Sed eget magna tortor, a sodales lorem. Suspendisse nec aliquam nisi. Morbi sit amet erat ipsum. Aenean vitae velit sit amet lorem iaculis elementum. Cras ullamcorper enim nec velit mattis ut ornare metus lacinia. Phasellus vel ornare est. Donec in neque ut sapien blandit mattis vel in massa.</section>

    <section>Etiam tincidunt, nibh non porttitor vulputate, ipsum augue consequat orci, posuere posuere risus dui eget odio. Donec nisi tortor, pulvinar non gravida sit amet, sagittis vehicula orci. Praesent mi leo, lobortis vel rutrum vel, dapibus sit amet sem. Fusce laoreet nulla sed tellus ultricies elementum. Pellentesque mattis sodales felis eget sodales. Curabitur nunc dui, facilisis tincidunt sagittis vitae, vestibulum sollicitudin risus. Quisque lectus lacus, pellentesque sed posuere vel, dapibus in nibh. Sed eu turpis et dui commodo iaculis vitae id lectus.</section>

    <section>Sed augue turpis, tincidunt a placerat a, egestas in orci. Donec volutpat pellentesque nisi, eu eleifend libero elementum vitae. In hac habitasse platea dictumst. Morbi justo nisi, luctus vitae hendrerit in, hendrerit id odio. Morbi malesuada leo quis leo egestas aliquam. Suspendisse id nisl nec urna congue rutrum tempus nec augue. Quisque in risus velit, sit amet aliquet turpis. Ut nec sapien tempus sem molestie cursus blandit vel erat. Aliquam eget est lorem, a placerat sapien. Morbi placerat faucibus est, dignissim tempor lacus semper sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</section>

    <footer>

    <section>

    <ul>

    <li><a href=”#”>Primer enlace 1</a></li>

    <li><a href=”#”>Segundo enlace 1</a></li>

    <li><a href=”#”>Tercer enlace 1</a></li>

    </ul>

    </section>

    <section>

    <ul>

    <li><a href=”#”>Primer enlace 2</a></li>

    <li><a href=”#”>Segundo enlace 2</a></li>

    <li><a href=”#”>Tercer enlace 2</a></li>

    </ul>

    </section>

    <section>

    <ul>

    <li><a href=”#”>Primer enlace 3</a></li>

    <li><a href=”#”>Segundo enlace 3</a></li>

    <li><a href=”#”>Tercer enlace 3</a></li>

    </ul>

    </section>

    </footer>

    </body>

    </html>

    Código fuente.



    Imagen de la página en el navegador.

    Tal como podéis ver, la página es muy sencilla y de momento no tiene ningún tipo de funcionalidad incorporada, exceptuando los enlaces. Ahora vamos a empezar a incorporar algunas mejoras gracias a Bootstrap. Lo primero es descargar la última versión del producto desde este enlace: http://twitter.github.io/bootstrap/ y descomprimirlo. Veremos que el esquema de archivos es el siguiente:
    • css: Archivos de hojas de estilo. Para el ejemplo vamos a necesitar el archivo general bootstrap.css.
    • img: Archivos de imágenes utilizados por los estilos. En nuestro caso incorporaremos al proyecto la carpeta con todo su contenido.
    • js: Archivos JavaScript necesarios para la funcionalidad extendida. En nuestro caso incorporaremos el archivo general bootstrap.js.

    "Como nota adicional, apuntar que para un desarrollo final lo mejor es utilizar las versiones de los archivos con el sufijo .min., ya que estas versiones están comprimidas para ocupar el mínimo espacio posible."




    Por tanto, y después de todo lo comentado, necesitaremos una carpeta con el siguiente contenido:

    • Ejemplo: Carpeta genérica del ejemplo.
      • index.html: Archivo HTML de la página web que vamos a desarrollar
      • css: Carpeta de archivo de hojas de estilo.
        • bootstrap.css
      • img: Carpeta de imágenes
        • glyphicons-halflings.png
        • glyphicons-halflings-white.png
      • js: Carpeta para JavaScript
        • bootstrap.js
    Para empezar a potenciar nuestra web vamos a incorporar los archivos necesarios en la cabecera del archivo HTML de la siguiente forma:

    <head>

    <title>Ejemplo Bootstrap</title>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <link href=”css/bootstrap.css” rel=”stylesheet” media=”screen”>

    <script src=”js/bootstrap.js”></script>

    </head>

    "Hemos añadido la referencia a los archivos de la hoja de estilos y de JavaScript de Bootstrap, así como una etiqueta <meta> para indicar que el viewport será el del dispositivo donde se visualice la página y que el nivel de escala es 1. De este modo en pantallas pequeñas se mostrará el texto en el tamaño original, no permitiéndose realizar ningún tipo de zoom. Esto es esencial para el diseño adaptativo, ya que lo que pretendemos es que la página se adapte al dispositivo, pero sin disminuir el tamaño del texto que contiene."


    Solamente haciendo esto nuestra página ya cambia de aspecto tomando por defecto el tipo de fuente estándar definido para Bootstrap así como los márgenes y los estilos para los enlaces:



    A continuación vamos a empezar a incluir código de Bootstrap para empezar a incorporar nuestras necesidades. Como en nuestro caso queremos un diseño adaptativo vamos a englobar toda la página en una etiqueta <div> y le indicaremos que pertenece a la clase container-fluid:

    <body>

    <div class=”container-fluid”>

    .

    .

    .

    </div>

    </body>


    Al incorporar la clase anterior, la página web ya adopta un diseño adaptativo real. Podéis comprobarlo en la siguiente imagen donde se ha reducido el tamaño de la ventana del navegador:




    Scaffolding

    Ahora vamos a formatear las tres secciones principales para que aparezcan en tres columnas. Bootstrap nos ofrece la posibilidad de tener hasta un máximo de 12 columnas en pantalla, teniendo en cuenta que podemos agrupar por el número que queramos. En nuestro caso deseamos tres columnas. Por tanto, si dividimos 12 entre 3 y nos da el valor 4, que es el que necesitaremos para el formateo. Para ello vamos a incluir las tres secciones centrales dentro de otra etiqueta <div>, a la que añadiremos la clase row-fluid. Una vez realizada esta acción y con la que habremos convertido esa sección central en una fila independiente, vamos a asignar a cada sección la clase span4 con lo que conseguiremos tres columnas (4 x 3 = 12). Si quisiéramos 6 columnas, deberíamos incluir la clase span2; o para dos columnas, la clase span6. Bootstrap nos ofrece la posibilidad de subdividir cada una de las columnas en otras tantas, permitiendo una infinidad de combinaciones. Para más información sobre el scaffolding de Bootstrap, ver el siguiente enlace: http://twitter.github.io/bootstrap/scaffolding.html. Veamos cómo queda nuestro código:

    <div class=”row-fluid”>

    <section class=”span4”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula erat diam. Phasellus viverra ullamcorper lorem, et egestas ipsum ultrices non. Morbi risus enim, ullamcorper eu pellentesque nec, accumsan ac diam. Nunc et turpis ante. Fusce non ante eros. Pellentesque vestibulum sollicitudin mi, eu tincidunt ligula vehicula vitae. Sed eget magna tortor, a sodales lorem. Suspendisse nec aliquam nisi. Morbi sit amet erat ipsum. Aenean vitae velit sit amet lorem iaculis elementum. Cras ullamcorper enim nec velit mattis ut ornare metus lacinia. Phasellus vel ornare est. Donec in neque ut sapien blandit mattis vel in massa.</section>

    <section class=”span4”>Etiam tincidunt, nibh non porttitor vulputate, ipsum augue consequat orci, posuere posuere risus dui eget odio. Donec nisi tortor, pulvinar non gravida sit amet, sagittis vehicula orci. Praesent mi leo, lobortis vel rutrum vel, dapibus sit amet sem. Fusce laoreet nulla sed tellus ultricies elementum. Pellentesque mattis sodales felis eget sodales. Curabitur nunc dui, facilisis tincidunt sagittis vitae, vestibulum sollicitudin risus. Quisque lectus lacus, pellentesque sed posuere vel, dapibus in nibh. Sed eu turpis et dui commodo iaculis vitae id lectus.</section>

    <section class=”span4”>Sed augue turpis, tincidunt a placerat a, egestas in orci. Donec volutpat pellentesque nisi, eu eleifend libero elementum vitae. In hac habitasse platea dictumst. Morbi justo nisi, luctus vitae hendrerit in, hendrerit id odio. Morbi malesuada leo quis leo egestas aliquam. Suspendisse id nisl nec urna congue rutrum tempus nec augue. Quisque in risus velit, sit amet aliquet turpis. Ut nec sapien tempus sem molestie cursus blandit vel erat. Aliquam eget est lorem, a placerat sapien. Morbi placerat faucibus est, dignissim tempor lacus semper sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</section>

    </div>


    Y aquí cómo queda ahora el diseño en el navegador:



    Se puede hacer lo mismo con el pie de página. Es decir, añadiendo a la etiqueta <footer> la clase row-fluid y colocando en cada una de las secciones de enlaces la clase span4:

    <footer class=”row-fluid”>

    <section class=”span4”>
    <ul>
    <li><a href=”#”>Primer enlace 1</a></li>
    <li><a href=”#”>Segundo enlace 1</a></li>
    <li><a href=”#”>Tercer enlace 1</a></li>
    </ul>
    </section>

    <section class=”span4”>
    <ul>
    <li><a href=”#”>Primer enlace 2</a></li>
    <li><a href=”#”>Segundo enlace 2</a></li>
    <li><a href=”#”>Tercer enlace 2</a></li>
    </ul>
    </section>

    <section class=”span4”>
    <ul>
    <li><a href=”#”>Primer enlace 3</a></li>
    <li><a href=”#”>Segundo enlace 3</a></li>
    <li><a href=”#”>Tercer enlace 3</a></li>
    </ul>
    </section>
    </footer>


    Con esto conseguiremos que los enlaces del pie de página también se muestren en tres columnas con diseño adaptativo.


    Toques finales



    "Finalmente vamos a formatear la barra de navegación. Para ello incluiremos la clase nav nav-pills (existen varios diseños diferentes) en la lista que contiene las opciones. Si deseamos tener marcada una opción por defecto podemos añadir la clase active en el elemento de la lista que nos interese"


    <nav>

    <ul class=”nav nav-pills”>
    <li class=”active”><a href=”#”>Opción 1</a></li>
    <li><a href=”#”>Opción 2</a></li>
    <li><a href=”#”>Opción 3</a></li>
    </ul>
    </nav>



    De este modo se consigue la barra de navegación de opciones tal como puede verse en la siguiente imagen:




    Conclusiones

    "Como podéis ver, solamente añadiendo clases a nuestras etiquetas se consigue un diseño adaptativo con un formato muy correcto. De todas formas, Bootstrap no acaba aquí. Sus posibilidades son increíbles, solamente basta dar un vistazo a todo lo que permite (formularios, validaciones, botones, animaciones, etc.) para ver que nos encontramos ante un framework muy potente que con muy pocas modificaciones en nuestro código web nos permitirá tener diseños modernos, adaptables y muy profesionales."










Deja tu dirección email y te notificamos las novedades.

Suscripción


Publicidad

NotesRing Services,S.L.
Revista
Patrocinadores