El pase de diapositivas requiere JavaScript.

Ahora le toca el turno a HTML5, CSS3, Javascript, JQuery y Bootstrap que me están seduciendo día a día y finalmente he caído en la tentación.

Algo que en varios sitios se está usando mucho es ese carousel de gran tamaño que va pasando una secuencia de varias imágenes y que desde mi punto de vista es una herramienta muy práctica ya que es como si fuera un anuncio tipo espectacular pero con la ventaja de que se la imagen cambia en lapsos de tiempo corto, como el que ya habrán visto en el encabezado de este artículo.

Por otro lado Twitter (mi amado twitter!) ha liberado su librería de desarrollo llamada Bootstrap, esto no es nuevo y además es un buen detalle por parte de los desarrolladores de twitter, de grande quiero ser como ellos, así que teclas a la obra!!!

Descarga e instalación de bootstrap

Lo primero es descargar bootstrap desde el si sitio principal, en mi caso se ha descargado el archivo bootstrap.zip que al descompactarlo ahora tengo una carpeta llamada bootstrap.

Según la guía junior de bootstrap, si no tienes un editor de código (yo tengo más de uno) y si no tienes conocimientos básicos de HTML y CSS (yo se python, espero que cuente de algo!), entonces ve a buscar a alguien que si los tenga (me puedes preguntar a mi y de paso me invitas un café!).

Cuando descargues el bootstrap, descarga la versión compilada, ya que es más compacta y funcionará más rápido, a menos que quieras modificar el código fuente, entonces descarga la versión en código fuente (sólo para machitos y féminas aguerridas), pero seguro que no te equivocarás, el botón están resaltado con un rojo azul intenso que prácticamente le das click sin querer (hooo! no es rojo es azul a veces no se en que estoy pensando!) al botón, claro está.

Si tienes habilidad con alguna otra lengua que no sea la tuya, entonces podrías revisar la guía junior directo en la página de bootstrap, donde podrás ver la estructura de directorios y que todos los plugins de javascript necesitas jquery, pero no te preocupes, estos programadores han pensado en todo y decidieron incluir ya jquery también, para que esto sea todavía más sencillo.

Para poder usar bootstrap en nuestro sitio lo que se tiene que hacer es copiar dos archivos

Original Destino
bootstrap/css/bootstrap.min.css public_html/css
bootstrap/js/bootstrap.min.js public_html/js

Ojo, estoy considerando que mi proyecto está todo dentro de la carpeta public_html.

Ahora si ya todo listo para comenzar!

Plantilla HTML básica para usar bootstrap

La verdad que la guía junior es fantástica y tiene una plantilla que prácticamente voy casi a reproducir en su totalidad

<!DOCTYPE html>
<html>
  <head>
    <title>Plantilla Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hola, como estas?</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Este código lo guardo en un archivo llamado index.html y estará dentro de mi carpeta public_html/

Sólo para corroborar, abro el archivo index.html en un navegador y obtengo lo siguiente
bootstrap-carousel-04

Listo! Ya tengo todo para comenzar a crear el carousell…

Insertando el carousel (vaya finalmente!)

Un ejemplo de como se verá este carousel se puede ver en el mismo sitio de bootstrap, pero aquí les dejo una captura
bootstrap-carousel-05

Entonces lo primero es adicionar el código html correspondiente al carousel, por lo que es necesario adicionar el siguiente código html al archivo index.html:

    <div id="contenedor">
        <div id="myCarousel" class="carousel slide">
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
          </ol>
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="active item"><img  src="img/banner598x374-1.jpg" alt="banner1" /></div>
            <div class="item"><img  src="img/banner598x374-2.jpg" alt="banner2" /></div>
            <div class="item"><img  src="img/banner598x374-3.jpg" alt="banner3" /></div>
            <div class="item"><img  src="img/banner598x374-4.jpg" alt="banner4" /></div>
            <div class="item"><img  src="img/banner598x374-5.jpg" alt="banner5" /></div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.myCarousel').carousel()
        });
    </script>

yo elegí que sean 5 imagenes que ya tengo en mi carpeta public_html/img, también he adicionado algo de CSS para centrar el carousel, colocar borde y un fondo quedando el resultado como este:
bootstrap-carousel-06
a poco no se ve bien hot!!!

Poniéndolo a punto!

Esta es la mejor parte (en tooooodo! a poco no?) donde se puede ajustar algunas propiedades, en realidad se puede ajustar todo lo que uno quiera pero se requiere de mayores habilidades en javascript y jquery principalmente.

Como ejemplo, cada cuadro se muestra 5000 miliseg en automático, así que voy a modificar ese valor a unos 3000 miliseg, lo que se hace modificando las últimas líneas, donde se activa el carousel en si como muestro aquí…

    <script>
        $(document).ready(function(){
            $('.myCarousel').carousel({
                interval: 3000
            });
        });
    </script>

Salu2+