Arwosoft: 2012

Hace poco, implementando para lo que será el nuevo tema del blog, me di cuenta que jCarousel Lite es mas fácil de configura que el Easy News, del cual habiamos hablado anteriormente, sin pasos tediosos incluso valida el código HTML sin problema alguno.

Vamos a ver la forma practica y sencilla de sacarle provecho a esta herramienta para nuestro blog ó proyectos web para mostrar cualquier contenido HTML.

Paso 1

Descargar ó referenciar tanto el jQuery como el complemento jCarousel Lite ¿fácil no?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script>

Paso 2

Ahora luego nada más, definir algunos estilos para los elementos HTML que vamos a usar.

<style>
#contenedor{
        border:1px solid red;
        width:600px;
}
.preview{
        height:200px;
        border:1px solid blue;
}
</style>

Paso 3

Luego de la etiqueta <body> debemos configurar jCarousel Lite para especificar por ejemplo que elemento del DOM va usar para mostrar el carrusel, velocidad, etc.

<script type="text/javascript">
  jQuery(function() {
        jQuery(".galeria").jCarouselLite({
          visible: 1,
          speed: 2000,
          auto: 2000,
        });
  });
</script>

Paso 4

El HTML tendrá la siguiente estructura:

<div id="contenedor">
  <div class="galeria">
    <ul>
      <li>
        <div class="preview">
          <--contenido a mostrar, fragmento de un post -->
        </div>
      </li>
      <li>
        <div class="preview">
          <--contenido a mostrar, fragmento de un post -->        
        </div>
      </li>
      <!-- n elementos <li /> -->
    </ul>
  </div>
</div>

Para nuestro ejemplo lo vamos a llenar de este contenido de ejemplo:

<div id="contenedor">
  <div class="galeria">
        <ul>
          <li>
                <div class="preview">
                  <h2><a href="http://www.ribosomatic.com/articulos/detect-mobile-browser-detectar-navegador-de-telefono-movil/">Detect Mobile Browser, detectar navegador de teléfono móvil</a></h2>
                  <p>Muchos me han preguntado por correo una forma de direccionar de una pagina web estandar a una versi&oacute;n para movil cuando se accede desde uno de estos dispositivos. Esto me hace recordar una herramienta web muy pr&aacute;ctica que use, se trata de Detect Mobile Browser. As&iacute; es, esta herramienta no es nueva, ya tiene su tiempito en la web y...</p>
                </div>
          </li>
          <li>
                <div class="preview">
                  <h2><a href="http://www.ribosomatic.com/articulos/carteles-de-anuncios-creativos/">Carteles de anuncios muy creativos</a></h2>
                  <p>En muchas de las veces los carteles de anuncios son una molestia en cada edificio alto que encontremos a nuestro paso, carteles con un dise&ntilde;o y conceptos pobres. Sin embargo la&nbsp;recopilaci&oacute;n&nbsp;que hace Designer Daily son realmente divertidos, creativos y destacados. Vease algunos:Adidas Strong  tape billboard  Panasonic  hair nose trimmer Law  and order  McDonalds  Lego...</p>
                </div>
          </li>
          <li>
                <div class="preview">
                  <h2><a href="http://www.ribosomatic.com/articulos/pong-game-adobe-flash-vs-html-5/">Pong game: Adobe Flash vs HTML 5</a></h2>
                  <p>Code Computerlove ha desarrollado el famoso juego Pong con HTML 5, el cual se puede jugar con el teclado, demostrando as&iacute; que este lenguaje puede competir en el desarrollo de animaciones, incluso complejas, como Adobe Flash. Curiosamente el &aacute;rea juego del Pong est&aacute; dividido en dos partes correspondiente a cada tecnolog&iacute;a, izquierda Flash y derecha HTML, y como &eacute;stas interactu&aacute;n...</p>
                </div>
          </li>
          <li>
                <div class="preview">
                  <h2><a href="http://www.ribosomatic.com/articulos/recurso-1000-iconos-de-alta-calidad/">Recurso: 1000 iconos de alta calidad</a></h2>
                  <p>Uno de los recursos a tener en cuenta todo desarrollador &oacute; webmaster para sus proyectos en web son: los iconos. De esto no hay duda. Nada mas en nosotros cuando navegamos por la web, fijamos nuestra vista en las imagenes mas que en el texto. En todas las p&aacute;ginas web si algun texto describe, algun producto por ejemplo, seguramente encontrar&aacute;...</p>
                </div>
          </li>
        </ul>
  </div>
</div>

Como se puede ver es muy sencillo configurar este carrusel. Espero les sea útil la información.

Arwosoft

viernes, 16 de noviembre de 2012

Huracan Sandy

Mis videos

El baile que esta de moda conocido como el baile del caballo

viernes, 3 de agosto de 2012

jCarousel Lite, carrusel de contenido HTML

Paso 1

Paso 2

Paso 3

Paso 4

jueves, 2 de agosto de 2012

Windows 8 ya es ‘gold’, RTM entregada a fabricantes