Cultura Digital#Blog

Jticker es un “plugin” que usa JQuery (como ya quizá sea más que notable: la librería JavaScript de mis amores), sencillo, limpio y eficaz para mostrar un canal RSS o XML en todo caso en tu sitio web usando un par de efectos prácticamente.
Como digo es un plugin sencillo, limpio y eficaz… así que no le hace falta mucho más ya que hay otras opciones si quieres algo más sofisticado, además es muy personalizable a nivel de opciones o si le metes mano al código… como he hecho yo

En este caso,… lo cierto es que he perdido un poco (no uso SVN ni nada parecido para esto ^^) el hilo de mis modificaciones pero, la más importante por decirlo de alguna manera, es una opción que en mi opinión considero bastante relevante, que es la posibilidad de decidir sobre
Mostrar la descripción de cada Item o no

Así, ahora añadiremos al script dicha opción:
1. Primero, añadiremos el parámetro a la función:
Inicio del Script, variable opciones:

Añadimos el parámetro: showdesc: false,

12
13
14
15
16
17
18
19
20
21
22
23
24

	// TODO: Remove the newwindow option
	var options = {
	TickerID: "",
	delay: 1000,
	newwindow: false,
	showdesc: false,
	url: "tickerdata.xml",
	transition: "slide",
	speed: "slow",
	contentcounter: -1,
	ArrayIndex: -1,
	dataXML: {
},

Para después dejar los parámetros de inyección del HTML de la siguiente manera:

41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Item = $("item", options.dataXML).get(options.contentcounter);
Title = $("title", Item).text();
URL = $("link", Item).text();
Desc = $("description", Item).text();
TickerHTML = '<div class="JTickerTitle"><strong class="yellow">Noticias:</strong> <a href="' + URL + '"';
 
// Options:
// TODO: Remove this attribute!
// New Window Option: Deprecated by Covi Mod, Not Accesible! and no valid to Standars Compliance W3C.
if (options.newwindow) {
	TickerHTML += ' ';
}
// Description Option:
if (options.showdesc == false) {
	TickerHTML += ' title="' + Desc + '">' + Title + '</a></div>';
} else {
	TickerHTML += ' title="Leer la noticia completa: '+ Title +'">' + Title + '</a></div><div>' + Desc + '</div>';
}
// End Options.

Lo que hacemos simplemente es cambiar el código original (que era el último else sin sentencias) para añadir la sentencia e inyectar un código u otro según la opción para la mostrar la descripción (showdesc).

En mi caso, he optado por incluir la descripción en el atributo title del vínculo.
Y… me queda también eliminar la opción de nueva ventana con el atributo no accesible e intrusivo , recordemos que nuestra obligación en estos tiempos de la web es:
“devolver el control al usuario“, es decir, que él mismo decida si quiere o no “abrir el enlace en una nueva ventana” (Ver primer nota inferior).

El uso, en mi caso, sería el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
	//<![CDATA[
	// Inicializando JQuery con documento renderizado:
	$(document).ready(function() {
		// Ticker News RSS:
		$("#news_ticker").jticker({
			delay: 10000,
			showdesc: false, // Forcing not show the description.
			url: "tickerdata.xml",
			transition: "fade",
			speed: 500
		});
	});
/	/ Fin JQuery
//]]>
</script>

Nota 1: Para el tema de accesibilidad y JavaScript no intrusivo podemos usar JQuery o CSS 2.1 como ya he comentado en otras ocasiones:
Un ejemplo sería, el ya comentado selector de CSS para vínculos externos, donde además uso una clase estándar de CSS para los navegadores sin soporte +CSS2.1 (.post a.external):

(Nota: Es obvio que se puede o debe omitir la clase .post):

1
2
3
4
5
6
7
8
9

#content .post a[href^="http:"], .post a.external {
	padding-right:16px;
	background:url("img/external.gif") no-repeat right;
}
/* Internos, anulamos: */
#content .post a[href^="http://culturadigital.org"], #content .post a[href^="http://www.culturadigital.org"] {
	padding-right:0px;
	background:none;
}

Con JQuery es igual o más sencillo puesto que también usa XPath y las posibilidades son tan abrumadoras como divertidas:
Imaginemos que tenemos una clase para vínculos en otro idioma (xml:lang debería ser un atributo obligatorio en relación a la accesibilidad):

1
2
3
4
5
6
7
8
9

// Idiomas, icono para identificar el enlace más texto:
$('a').each(function(index) {
	var $this = $(this);
	var languageLink = $this.attr("xml:lang");
	if(languageLink == 'en') {
		$(this).addClass("ukLink");
		$(this).attr({ title: this.title + ", en inglés"});
	}
});

De esta manera añadimos la clase a los vínculos con el atributo de lenguaje en inglés… igualmente, pero mucho más pesado y complicado, sería intentar mediante PHP obtener el idioma del vínculo enlazado y añadir el atributo de lenguaje oportuno… pero se imagina, no?, pesadísimo chequear todos los vínculos de un documento y encima enlazar a ellos para comprobar su lenguaje.

En mi opinión es mejor establecer tu lenguaje predefinido para todo el sitio e informar de los vínculos en otro idioma…, es lo lógico.

Bien, el ejemplo anterior es la misma técnica para usar con enlaces externos (añadir la clase external dependiendo del atributo href -> $(this).attr("href");), así informamos e damos la posibilidad al usuario de decidir qué hacer sobre ese vínculo externo.

Nota 2: El blog lo tengo bastante descuidado pero en el sitio web que llevo se pueden encontrar muchos ejemplos como éste, de accesibilidad, de JavaScript, Ajax y en concreto JQuery y de cómo convertir Wordpress en un CMS en toda regla

PD: Me hubiera gustado comunicarlo al autor pero el registro en su blog no va y no hay otro medio de contacto, al menos, yo no lo he encontrado