Descripción y uso de un plugin para crear un ticker de noticias dinámico en jQuery, que muestra varias noticias en un espacio reducido, por medio de un scroll suavizado.
En este caso estoy lanzando el plugin "como Diós manda", es decir, en su propio archivo js, con comentarios sobre el uso, especificación de la licencia y todo aquello que suelen tener los plugins jQuery que utilizamos en el día a día. Implica un poquito más de trabajo, pero creo que merece la pena para las personas que quieran aprovechar este trabajo para ponerlo en producción en sus sitios web. No obstante, tal como estoy acostumbrado a hacer en DesarrolloWeb.com, presentaré a continuación una descripción detallada sobre cómo utilizarlo y unas pequeñas notas sobre las claves acerca de su ingeniería.
Descripción del plugin
Se trata de un sencillo plugin para hacer una presentación de novedades o noticias, de manera dinámica y con animaciones suavizadas. Las noticias rotarán, mostrándose con un scroll o desplazamiento en un espacio reducido, que es totalmente configurable por medio de estilos CSS.En resumen, este plugin produce de manera sencilla lo que se conoce como ticker de noticias, una de las aplicaciones más clásicas del HTML Dinámico.
Lo mejor para hacerse una idea exacta de qué hace este complemento es ver un ejemplo en marcha.
Autoría y Licencia
El plugin ha sido relacionado por el que firma este artículo, léase, Miguel Angel Alvarez, para DesarrolloWeb.com.La licencia es "Open source under the BSD License", osea que en palabras que todos entendamos, puedes utilizar este script para los usos que desees, incluso comercialmente.
Por supuesto, se agradecería el reconocimiento con un enlace a www.desarrolloweb.com.
Uso del Plugin de noticias dinámico, paso a paso
Por ponerle un nombre más o menos comercial he llamado al plugin "dwDinaNews". Puedes descargar el plugin y los ejemplos desde github.En resumen, para usar el plugin debes crear un contenedor cualquiera y dentro una lista UL con tantos LI como noticias desees que aparezcan en rotación. Debes llamar al plugin con el contenedor donde hayas colocado dicha lista.
$("#contenedor").dwdinanews();
Quizás con esa corta explicación tengas más que de sobra para montar tu propio ejemplo del plugin en marcha, ya que es todo bastante sencillo. No obstante, para las personas que necesitan una guía más detallada, ahora explicaré una receta paso a paso.
1) Incluir los scripts Javascript:
En la cabecera (HEAD) de la página tenemos que incluir varios scripts Javascript:
- El framework Javascript jQuery
- El plugin jQuery Timer, un script realizado por otros desarrolladores útil para la gestión de los tiempos de retardo entre la presentación de cada noticia.
- El plugin ticker de noticias dinámico "dwDinaNews", es decir, el desarrollo que estamos presentando en este artículo.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.timer.js" type="text/javascript"></script>
<script src="jquery.dwdinanews.0.1.js" type="text/javascript"></script>
2) Código HTML de las noticias a mostrar:
El listado de las noticias a mostrar dinámicamente en el plugin lo debes hacer en HTML, con un código como puedes ver a continuación.
<div id="novedades">
<ul>
<li>
<a href="#">Novedad primera</a>:
<br>
Lorem ipsum est quo sit amentus apis larumser.
</li>
<li>
Segunda novedad...
</li>
<li>
...
</li>
</ul>
</div>
Como puedes apreciar, tenemos un contenedor y dentro una lista UL normalita. Dentro del UL colocamos tantos LI como noticias deseemos rotar. El código que coloques dentro de los LI es indiferente, pero generalmente querrás poner un enlace para abrir la noticia correspondiente y quizás un texto de descripción de ese enlace. Nada impide colocar imágenes dentro de los LI y utilizarlo simplemente para hacer una rotación de fotografías, comúnmente conocido como slide de imágenes.
Lo que es importante es que le pongas un identificador al elemento contenedor de la lista, porque luego tendrás que referirte a ese elemento para aplicarle estilos CSS e invocar al plugin jQuery. En este caso hemos colocado id="novedades".
3) Estilos CSS para funcionamiento de la lista, de modo que muestre únicamente lo que tú desees:
Ahora viene la parte en la que más podrás innovar y personalizar el aspecto de tu ticker de noticias. Se trata simplemente de aplicar los estilos CSS que juzgues oportunos para adaptar la lista a tu sitio web y el contenedor de la misma.
Ahora bien, harán falta algunos estilos específicos que sí serán necesarios. Me refiero a la parte en la que conseguimos que, de todos los elementos de la lista (todas las novedades), sólo se muestre el primero y los otros estén ocultos. Esto se consigue con un overflow: hidden en el elemento contenedor y definiendo un tamaño suficiente para que se muestre sólo lo que tú desees. Esos estilos los ves en el selector "#novedades". Además, le hemos colocado también un tamaño a cada elemento de la lista, selector "#novedades li", y también un overflow: hidden para que no se descuadre, si el contenido sobrepasa las dimensiones asignadas.
Otro detalle importante es colocarle a la lista UL el estilo position: relative, que sirve para que nos admita los atributos top y left, para modificar la posición de la lista. Esto resulta clave porque vamos a generar la animación con jQuery cambiando el atributo de CSS "top" de la lista UL.
El resto de estilos, a pesar de tener algún motivo para nuestro ejemplo, son principalmente opcionales. A continuación puedes ver las declaraciones que utilizamos nosotros en el primero de los ejemplos.
#novedades{
border: 1px solid #ccc;
width: 234px;
height: 60px;
overflow: hidden;
}
#novedades ul{
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 0;
}
#novedades li{
margin: 0;
padding: 5px;
height: 50px;
overflow: hidden;
line-height: 16px;
}
#novedades li a{
font-weight: bold;
text-transform: uppercase;
}
4) Javascript para invocar al plugin dwDinaNews:
Ya está todo casi listo, simplemente nos falta llamar al plugin para que nos empiece a animar nuestra lista de novedades. Esto lo conseguimos con esta sencilla línea Javascript.
$("#novedades").dwdinanews();
$(document).ready(function(){
$("#novedades").dwdinanews();
})
Opciones de personalización del plugin dwDinaNEWS
He realizado un pequeño conjunto de opciones que puedes utilizar para personalizar un poco más tu plugin de novedades dinámicas. Para ello, al invocar al plugin puedes pasar un objeto de opciones típico de jQuery, que podrá tener las siguientes propiedades:retardo: El tiempo que debe permanecer una noticia, en milisegundos. Es decir, los milisegundos que pasan entre la visualización de una noticia y otra. Por defecto son 2 segundos.
tiempoAnimacion: el tiempo que tarda la animación al pasar de una noticia a otra, también en milisegundos. Por defecto es medio segundo.
funcionAnimacion: la función a utilizar para la animación entre noticias. Esta función podrá ser una de las proporcionadas por el plugin Easing de jQuery (ver más adelante). Por defecto se utiliza la función estándar de jQuery.
Así se invocaría al plugin enviando unas opciones de configuración distintas:
$("#otrasnovedades").dwdinanews({
retardo: 5000,
tiempoAnimacion: 1000,
funcionAnimacion: 'easeInOutElastic'
});
Uso del plugin "jQuery Easing" (opcional)
Si lo deseas, puedes usar opcionalmente el plugin "jQuery Easing", que te permitirá especificar una gran variedad de funciones de animación en el parámetro de opciones del plugin "funcionAnimacion", de una manera super sencilla.Para ello tienes que incluir el plugin Easing de jQuery en el HEAD de tu página y pasar en la opción funcionAnimacion cualquier nombre de función de animación de las que implementa Easing.
Para más información te recomiendo leer el artículo con la explicación del plugin Easing.
En el segundo ejemplo de los que encontrarás en este enlace puedes ver una animación personalizada aun más gracias a Easing.
Código del plugin con comentarios
Para que se pueda entender un poco mejor cómo se ha desarrollado el plugin, y de paso puedas sentirte un poco más libre para hacer las modificaciones que estimes necesarias, voy a colocar a continuación el código Javascript del componente con comentarios.
//comienza el código del plugin
(function($) {
//el nombre del plugin se define aquí
$.fn.dwdinanews = function(opt) {
//definición de las opciones por defecto
var opciones = {
retardo: 2000,
tiempoAnimacion: 500,
funcionAnimacion: ''
}
//se mezclan las opciones por defecto con las opciones recibidas al invocar el plugin
jQuery.extend(opciones, opt);
//para cada elemento donde se invoque el plugin
this.each(function(){
//accedemos a la lista LU que hay dentro del contenedor
var listaNovedades = $(this).children("ul");
//accedemos a un array de los elementos LI que hay en la lista
var elementosLista = listaNovedades.children("li");
//se marca el elemento que el plugin está mostrando en este momento
var elementoActual = 0;
//invocamos al plugin timer para realizar los retardos entre noticia y noticia
$.timer(opciones.retardo, function(timer){
//incrementamos el elemento a mostrar, sin salirnos del rango de LIs
elementoActual = (elementoActual + 1) % elementosLista.length;
//modificamos la posición de la lista UL para producir la animación
listaNovedades.animate({
top: "-" + $(elementosLista[elementoActual]).position().top + "px"
}, opciones.tiempoAnimacion, opciones.funcionAnimacion)
});
});
return this;
};
})(jQuery);
- Las animaciones jQuery realizadas con el método animation las vimos en el artículo jQuery animate(): Animación de propiedades CSS.
- Te interesarán también las reglas de construcción de plugins, así como la gestión de opciones en plugins jQuery y la manera en que se oculta el código de los plugins.
Nada más nos queda desear que aproveches este desarrollo, ya sea para aprender un poco más de jQuery o para implementarlo en tu página web.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...