Ya en Valencia…
Este post he querido escribirlo desde hace bastante tiempo aquí, en KnowHow pero acabo no haciéndolo por pereza u olvido. Ahora ya toca, ya que un amiguete lo necesita. Pues bien, aquí va…
Valencia, 18/08/2012, G.B.
Un Scroller de noticias, news scroller o scrolling news es simplemente eso que vemos en muchas webs en las que en un pequeño apartado -habitualmente un iframe- aparecen una serie de titulares desplazándose generalmente hacia arriba o abajo y que al hacer click en alguno de ellos nos lleva al sitio web en el que se desarrolla la noticia o artículo. Podemos utilizarlo dinámicamente si esos titulares vienen alimentados por un feed.
Hay muchos recursos en la web para crear News Scrollers, pero uno de los más interesantes que conozco y que utilizo desde hace mucho tiempo viene de la mano del ‘ligeramente’ conocido Google. En el sitio de Google Code Playground, en el apartado Feeds, disponemos de varios ejemplos para implementar nuestro propio scroller de noticias basado en la tecnología AJAX.
Si no me equivoco, hasta no hace mucho necesitábamos solicitar una API de Google para poder implementar el código del scroller de noticias alimentado por nuestro propio feed. Creo que eso ya no es necesario, como podemos observar al intentar darnos de alta del API de Feeds de Google (si no nos volvemos locos en el intento…). Por ello, tan sólo necesitaremos copiar y subir 3 archivos a nuestro servidor para poder utilizar esta interesante función en nuestra web o blog: un archivo .js, un archivo .css y el archivo en donde se implementa el código para generar el scroller de noticias y en el que se llama a los dos archivos anteriormente mencionados. La referencia y el código de los archivos necesarios los tenemos en la siguiente dirección web:
http://www.google.com/uds/solutions/dynamicfeed/reference.html Para el tema del API visitad esta web: AJAX Feed API
Y para ilustrar todo esto, vamos a verlo embebido en este mismo post, eso sí, en mi caso con el API, ya que lo hice hace ya algún tiempo:
ApiGoogleFeed.css (el archivo de hoja de estilo): http://webcontenidos.es/ApiGoogleFeed.css
div#capa1 { width: 215px; height: 350px; /*border: 1px solid #000;*/ padding: 0px; /* overflow: hidden; */ position: relative; } p { font-family:Arial; font-size:8pt; text-decoration:none; color:Black; text-align:left; border-collapse:collapse; } a { color:#36C; font-family:Arial; font-size:9pt; font-weight:bold; text-decoration:none; } a.hover { color:#898989; text-decoration:none; }Scroll.class.js (el archivo .js, JavaScript) http://webcontenidos.es/js/Scroll.class.js
function Scroll(id, speed) {
this.speed = speed;
this.oDiv = document.getElementById(id);
this.content = this.oDiv.innerHTML;
this.scroll_layer = «<div id=’scroller_» + id + «‘ style=’position: relative;’>» + this.content + «</div>»;
this.oDiv.innerHTML = this.scroll_layer;
this.oScroll = document.getElementById(‘scroller_’ + id);
this.start();
}Scroll.prototype.paused = false;
Scroll.prototype.oDiv = new Object();
Scroll.prototype.oScroll = new Object();Scroll.prototype.content = «»;
Scroll.prototype.scroll_layer = «»;
Scroll.prototype.mask_height = 0;Scroll.prototype.speed = 1;
Scroll.prototype.start = function() {
this.paused = false;
this.mask_height = this.oDiv.offsetHeight;this.oScroll.style.position = ‘relative’;
this.oScroll.style.top = this.mask_height + «px»;
this.oScroll.style.left = 0;this.scroll();
};Scroll.prototype.pause = function() {
this.paused = true;
};Scroll.prototype.resume = function() {
this.paused = false;
};Scroll.prototype.scroll = function() {
if (!this.paused) {
this.oScroll.style.top = (parseInt(this.oScroll.style.top) – this.speed) + «px»;
if (parseInt(this.oScroll.offsetTop) <= this.oDiv.offsetTop – this.oScroll.offsetHeight) {
this.oScroll.style.top = this.mask_height + «px»;
}
}var _self = this;
window.setTimeout(function() {
_self.scroll();
}, 30);
};Scroll.prototype.showContent = function() {
alert(this.content);
};
Por último, el archivo en el que llamamos a la API, el archivo .css, el .js y en donde especificamos la URL del feed que queremos que se muestre en el Scroller de noticias dinámico:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=utf-8″/>
<title>Noticias de puntocomunica.com – Google AJAX Feed API</title>
<script type=»text/javascript» src=»http://www.google.com/jsapi?key=ABQIAAAAhKDbvqwy4CkWnpwJ1DqebBTkGX2ile0O51qzP18BNeZYF3KVdxT-8j7pEcZ5eVQ2d2ZK1JpvGYb6Lw»></script>
<script type=»text/javascript» src=»js/Scroll.class.js»></script>
<script type=»text/javascript»>
google.load(«feeds», «1»);
function initialize() {
var feed = new google.feeds.Feed(«http://www.puntocomunica.com/feed»);
feed.setNumEntries(8);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(«feed»);
var html=»»;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
html+=»<p>»;
html+=»<b><a href='»+entry.link+»‘ target=’_blank’>»+entry.title+»</a></b>»;
html+=»<br />»;
html+=entry.contentSnippet;
html+=»</p>»;
var div = document.createElement(«div»);
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
container.innerHTML=html;
}
});
}
google.setOnLoadCallback(initialize);
</script>
<style type=»text/css»>
<link rel=»stylesheet» type=»text/css» href=»ApiGoogleFeed.css» />
</style>
</head>
<body><!– <p>Noticias <a href=»» target=»_self»>Vídeos</a></p> –>
<div id=»capa1″ onmouseover=»s1.pause();» onmouseout=»s1.resume();»>
<div id=»feed»></div>
</div>
<script type=»text/javascript»>
var s1 = new Scroll(‘capa1’,1);
</script>
</body>
</html>
Os dejo otro enlace al respecto: http://allwebco-templates.com/support/S_script_IFrame-NewsScroll.htm
Y aquí el iframe de Puntocomunica.com que contiene los 3 archivos:
