0

Encontré en la web "Breaking News" una demostración o ejemplo que se ve muy interesante, pero existen unas dudas que desearía que me puedan explicar:

  • ¿Como funciona este sistema?
  • ¿Como lo puedo integrar para mi propio dominio para que en el se muestre mis noticias como se muestra en el script?

Tengo datos de las noticias registrada en la base de datos o este, solo funciona para blogspot.

¿Me pueden explicar como puedo usarlo?.

Este es el código completo, también esta aquí en https://jsfiddle.net/a8bz26eh/

$(document).ready(function() {
  var e = "https://lunafy.blogspot.com",
    t = 20;
  $.ajax({
    url: "" + e + "/feeds/posts/default?alt=json-in-script&max-results=" + t,
    type: "get",
    dataType: "jsonp",
    success: function(e) {
      function t() {
        $("#adbreakingnews li:first").slideUp(function() {
          $(this).appendTo($("#adbreakingnews ul")).slideDown()
        })
      }
      var n, r, s = "",
        a = e.feed.entry;
      if (void 0 !== a) {
        s = "<ul>";
        for (var l = 0; l < a.length; l++) {
          for (var o = 0; o < a[l].link.length; o++)
            if ("alternate" == a[l].link[o].rel) {
              n = a[l].link[o].href;
              break
            }
          r = a[l].title.$t, s += '<li><a href="' + n + '" target="_blank">' + r + "</a></li>"
        }
        s += "</ul>", $("#adbreakingnews").html(s), setInterval(function() {
          t()
        }, 5e3)
      } else $("#adbreakingnews").html("<span>No result!</span>")
    },
    error: function() {
      $("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")
    }
  })
});
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: #e6e6e6;
    width: 100%;
    height: 100%;
    font: 12px "Open Sans", sans-serif;
}

#wrapper {
    width: 50%;
    height: 560px;
    overflow: hidden;
    margin: 20px auto;
    background: #fff;
    border: 1px solid #c6c6c6;
}

div.screen {
    height: 560px;
    overflow: hidden;
    background: transparent;
    margin: 15px;
}

.list {
    margin-top: 36px;
    text-align: left;
}

.item {
    height: 115px;
    margin-left: 115px;
    clear: both;
}

.item .img, .item span {
    background: #f0f0f0;
}

.item .img {
    float: left;
    width: 96px;
    height: 81px;
    margin-left: -113px;
}

.item span {
    height: 11px;
    width: 320px;
    margin-bottom: 19px;
    float: left;
}

.item span:nth-of-type(3) {
    width: 95px;
    margin-bottom: 0;
}

a:link {
    color: #e76e66;
    text-decoration: none;
    outline: none;
    transition: all 0.25s;
}

a:visited {
    color: #666;
    text-decoration: none;
}

a:link:hover {
    color: #666;
    text-decoration: none;
}

a:visited:hover {
    color: #e76e66;
    text-decoration: none;
}

/* CSS Breaking News */
#breakingnews {
    margin: 15px;
    height: 38px;
    line-height: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e6e6;
}

#breakingnews .breakhead {
    position: absolute;
    background: none repeat scroll 0 0 #444;
    color: #fff;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 6px 12px;
}

#adbreakingnews li a {
    font-family: inherit;
    font-weight: 400;
    color: #666;
    margin-top: 10px;
    transition: all 0.5s ease-in-out;
}

#adbreakingnews li a:hover {
    color: #359bed;
}

#adbreakingnews {
    float: left;
    margin-left: 50px;
    margin-top: 6px;
}

#adbreakingnews ul,#adbreakingnews li {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width:768px) {
    #wrapper {
        width: 80%;
    };
}
<div id="wrapper">

  <div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
    <div id='adbreakingnews'>Loading...</div>
  </div>

  <div class="screen">
    <div class="list">
      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
  <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css' />
  <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

4
  • Vi el snippet de jsfiddle pero se queda cargando. ¿Eso debería pasar? Commented el 1 oct. 2020 a las 5:24
  • 3
    Tengo la impresión de que te estás preocupando por adaptar un ejemplo que te gustó visualmente, pero este ejemplo está diseñado para leer un RSS... ¿Para qué complicarte con generar el formato de RSS cuando podrías obtener tus noticias directamente de un PHP que mande el JSON de lo que quieras? Creo que estás planteando como problema adaptar un caso particular, cuando tu problema es en realidad mucho más sencillo y sólo te interesa que se vea así... ¿Puede ser?
    – Pollo
    Commented el 1 oct. 2020 a las 5:31
  • la implementación dependerá de que lenguaje de programación usas en tu sitio ( backend) para consultar la base de datos, el efecto visual del frontend es simple: mueve hacia arriba y saca un li del principio agregándolo al final, rellena/crea la ul con los enlaces que vienen en el feed, así van rotando ( la función que saca el li se llama con un timer ) Commented el 2 oct. 2020 a las 20:15
  • 1
    @Pollo Si es un diseño que me gustó a mi también, pero no estoy buscando que me lo realicen solo necesito de un ejemplo Dada a la respuesta que me han otorgado :) tengo que traer datos JSON ahora creo que el resto del script del diseño lo puedo utilizar.
    – Mary
    Commented el 5 oct. 2020 a las 3:23

3 respuestas 3

0

No había entendido tu petición pero ya después de unos minutos lo entendí.

Para que otras personas puedan integrar tus artículos en sus blogs, necesitas proveerle una URL que responda un JSON con los posts de tu blog.

Ya depende de ellos desarrollar un algoritmo que entienda la estructura de tu data, o tu proveerles un script para que ellos solo coloquen una instrucción en su html.

Si entras a la misma url del script que diste (https://lunafy.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=20) veras una estructura de datos.

Para tu proveer una estructura de datos similar, tienes que tener una API REST que responda esa estructura de datos.

Puedes crear la tuya montandola en un servidor con php o con nodejs, o con algún otro lenguaje de preferencia.

Si usas wordpress a lo menor no tienes que hacer mucho trabajo, (aqui te dejo la documentacion)

Si usas blogspot, investiga un poco como puedes obtener un JSON de tus posts.

La cosa es que si o si tendrás que modificar el script para que se adapte a tu estructura de datos.

porque esa estructura de datos es algo como

{
  ...
  feed: {
    entry: {
      // datos de los post aquí
    }
  }
}

pero la tuya puede ser algo como

{
  ...
  posts: {
    // datos de los post aquí
  }
}
// o
{
  ...
  rss: {
    posts: {
      // datos de los post aquí
    }
  }
}
// o simplemente
{
{
  // datos de los post aquí
}

todo depende como tu armes tu data..

Ahora bien, si blogspot ya ta provee una estructura de datos a lo mejor no tienes que hacer nada, solo le das la URL y el algoritmo ya está echo.

2
  • Amigo con dicha información puedo hacer uso del resto del script de la animación y diseño?
    – Mary
    Commented el 5 oct. 2020 a las 3:22
  • Si, es correcto. Commented el 7 oct. 2020 a las 21:21
0
+150

¿Cómo obtener valores de MySQL en un array, que el PHP genere la respuesta como JSON, cómo obtener esos valores en JavaScript desde una petición AJAX?

El primer paso es obtener los valores que te interesen desde la base de datos y llevarlos a un array. Este es un ejemplo genérico que obtiene algunos valores de MySQL

$pdo = new PDO('mysql:host=mihost;dbname=basedatos', "usuario", "contraseña");
$stmt = $pdo->prepare('select autor,titulo,link from noticias order by fecha desc limit 20');
if ($stmt->execute()) {
    $datos = $stmt->fetchAll(\PDO::FETCH_ASSOC);
}

Con esto, podemos asumir que tenemos un array con estos valores:

$datos = [
    ["autor" => "Nombre Apellido", "link" => "https://www.google.com", "titulo" => "Página de Google"],
    ["autor" => "Armando Páginas", "link" => "https://es.stackoverflow.com", "titulo" => "Página de StackOverflow en español"],
    ["autor" => "Armando Estaban Ner", "link" => "https://stackoverflow.com", "titulo" => "Página de StackOverflow"]
];

Luego, la idea es que todo esto sea el resultado del PHP, que sea lo que se imprime cada vez que se llama a la página. Para que esta página devuelva el array como JSON, usamos:

header('Content-Type: application/json');
echo json_encode($datos);

Es decir, cada vez que se vea esa página desde un navegador, tendrá la representación como JSON del array obtenido de la base de datos. Para nuestro ejemplo genérico, sería este texto:

[{"autor":"Nombre Apellido","link":"https:\/\/www.google.com","titulo":"P\u00e1gina de Google"},{"autor":"Armando P\u00e1ginas","link":"https:\/\/es.stackoverflow.com","titulo":"P\u00e1gina de StackOverflow en espa\u00f1ol"},{"autor":"Armando Estaban Ner","link":"https:\/\/stackoverflow.com","titulo":"P\u00e1gina de StackOverflow"}]

Listo con el PHP, vamos a consumir este texto desde JavaScript.

Hacer una petición por AJAX sería vulgarmente lo mismo que navegar hasta esa página pero todo atrás de la cortina de JavaScript: el usuario no lo ve en el navegador, se obtiene el resultado de la página en una variable. Hay muchísimas formas de hacerlo, todas válidas. Yo prefiero mostrar el ejemplo usando fetch(), pero si preferís usar $.ajax() de jQuery, es lo mismo.

//esta es la página que hicimos más arriba
var urlNoticias = 'http://misitio.web/noticias.php';

//acá obtenemos lo que devuelve la página y disparamos una función cuando esté la respuesta
fetch(urlNoticias)
  .then(respuesta => respuesta.json()) //acá convertimos el texto (JSON) en su representación de objeto (Array para este ejemplo)
  .then(datos => mostrarNoticias(datos)) //acá tenemos a datos con el array obtenido
  .catch(error => console.log('Error en fetch', error));

Cuando obtenemos las noticias, estamos disparando nuestra propia función mostrarNoticias(). Por ejemplo, podemos simplemente mostrar en consola:

function mostrarNoticias(datosObtenidos){
    console.log(datosObtenidos);
}

Siguiendo el mismo ejemplo que venimos usando desde el principio, esto sería el código de JavaScript funcionando (usé una web gratuita para que me devuelva el JSON):

//url gratuita de ejemplo
var urlNoticias = 'https://next.json-generator.com/api/json/get/4kSDMcXIK';

//llamada AJAX
fetch(urlNoticias)
  .then(respuesta => respuesta.json())
  .then(datos => mostrarNoticias(datos))
  .catch(error => console.log('Error en fetch', error));

//mostrar en consola
function mostrarNoticias(datosObtenidos) {
  console.log(datosObtenidos);
}


¿Cómo mostrar estos datos de forma simpática, parecida al ejemplo de la pregunta?

El ejemplo de la pregunta estaba hecho para una estructura de datos algo entreverada que procesaba un RSS... Todo innecesario si sólo queremos mostrar datos simples.

Adapté el código de la pregunta a nuestro ejemplo (básicamente borré muchas cosas innecesarias y puse que muestre sólo 2 de los campos que estamos obteniendo: titulo y link):

$(document).ready(function() {
  var urlNoticias = 'https://next.json-generator.com/api/json/get/4kSDMcXIK'; //url gratuita de ejemplo
  fetch(urlNoticias) //llamada AJAX
    .then(respuesta => respuesta.json()) //JSON -> objeto
    .then(datos => mostrarNoticias(datos)) //disparar función
    .catch(error => mostrarError(error));
});

//mostrar el array obtenido por AJAX en un <li> arriba
function mostrarNoticias(datosObtenidos) {
  function t() {
    $("#adbreakingnews li:first").slideUp(function() {
      $(this).appendTo($("#adbreakingnews ul")).slideDown()
    })
  }

  var n, r, s = '';
      
  if (datosObtenidos !== undefined) {
    s = "<ul>";
    
    //recorremos el array que obtuvimos por AJAX
    //vamos generando el html para mostrarlo
    for (var l = 0; l < datosObtenidos.length; l++) {
      n = datosObtenidos[l].link;
      r = datosObtenidos[l].titulo;
      s += '<li><a href="' + escapeHTML(n) + '" target="_blank">' + escapeHTML(r) + "</a></li>"
    }
    s += "</ul>";
    $("#adbreakingnews").html(s);
    
    //timer para ir cambiando entre todos los links que obtuvimos
    setInterval(function() {
      t()
    }, 5e3)
    
  } else {
    $("#adbreakingnews").html("<span>Sin Resultados!</span>");
  }
}

function mostrarError(error) {
  $("#adbreakingnews").html("<strong>Error Cargando Noticias!</strong>")
  console.log(error);
}

function escapeHTML(s) {
    let lookup = {
        '&': '&amp;',
        '"': '&quot;',
        "'": '&apos;',
        '<': '&lt;',
        '>': '&gt;'
    };
    return s.replace( /[&"'<>]/g, (c) => lookup[c] );
}
/* CSS Reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,
u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
embed,figure,figcaption,footer,header,hgroup,menu,nav,output,
ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #e6e6e6;
  width: 100%;
  height: 100%;
  font: 12px "Open Sans", sans-serif;
}

#wrapper {
  width: 50%;
  height: 560px;
  overflow: hidden;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #c6c6c6;
}

div.screen {
  height: 560px;
  overflow: hidden;
  background: transparent;
  margin: 15px;
}

.list {
  margin-top: 36px;
  text-align: left;
}

.item {
  height: 115px;
  margin-left: 115px;
  clear: both;
}

.item .img,
.item span {
  background: #f0f0f0;
}

.item .img {
  float: left;
  width: 96px;
  height: 81px;
  margin-left: -113px;
}

.item span {
  height: 11px;
  width: 320px;
  margin-bottom: 19px;
  float: left;
}

.item span:nth-of-type(3) {
  width: 95px;
  margin-bottom: 0;
}

a:link {
  color: #e76e66;
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited {
  color: #666;
  text-decoration: none;
}

a:link:hover {
  color: #666;
  text-decoration: none;
}

a:visited:hover {
  color: #e76e66;
  text-decoration: none;
}


/* CSS Breaking News */

#breakingnews {
  margin: 15px;
  height: 38px;
  line-height: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e6;
}

#breakingnews .breakhead {
  position: absolute;
  background: none repeat scroll 0 0 #444;
  color: #fff;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 6px 12px;
}

#adbreakingnews li a {
  font-family: inherit;
  font-weight: 400;
  color: #666;
  margin-top: 10px;
  transition: all 0.5s ease-in-out;
}

#adbreakingnews li a:hover {
  color: #359bed;
}

#adbreakingnews {
  float: left;
  margin-left: 50px;
  margin-top: 6px;
}

#adbreakingnews ul,
#adbreakingnews li {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:768px) {
  #wrapper {
    width: 80%;
  }
}
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<div id="wrapper">

  <div id='breakingnews'><span class='breakhead'>
    <i class='fa fa-rss'></i></span>
    <div id='adbreakingnews'>Loading...</div>
  </div>

  <div class="screen">
    <div class="list">
      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="item">
        <div class="img"></div>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</div>

0

Para mí esta es la clave del código:

$.ajax({
    url: "" + e + "/feeds/posts/default?alt=json-in-script&max-results=" + t,
    type: "get",
    dataType: "jsonp",
    success: function(e) {
      function t() {
        $("#adbreakingnews li:first").slideUp(function() {
          $(this).appendTo($("#adbreakingnews ul")).slideDown()
        })
      }
      var n, r, s = "",
        a = e.feed.entry;
      if (void 0 !== a) {
        s = "<ul>";
        for (var l = 0; l < a.length; l++) {
          for (var o = 0; o < a[l].link.length; o++)
            if ("alternate" == a[l].link[o].rel) {
              n = a[l].link[o].href;
              break
            }
          r = a[l].title.$t, s += '<li><a href="' + n + '" target="_blank">' + r + "</a></li>"
        }
        s += "</ul>", $("#adbreakingnews").html(s), setInterval(function() {
          t()
        }, 5e3)
      } else $("#adbreakingnews").html("<span>No result!</span>")
    },
    error: function() {
      $("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")
    }
  })
});

Se trata de una petición, o una api call, es decir genera un httprequest a cierta dirección URL y trata la respuesta de vuelta de acuerdo a lo que está especificado. El resto del código que presentas son cuestiones de estilo y formato, que me imagino que esa parte la entiendas..

Vamos a explicar el ajax o petición http: En este caso está hecho con javascript, iniciamos con $.ajax({}); donde dentro de los {} van los distintos parámetros que acepta, algunos opcionales, separados por comas ','.

  • url, la url de donde hacemos la petición, es una cadena o string, en este caso es dinámica o viene dada en función de otros parámetros como e y t, una cosa que puedes hacer por testear y entender como funciona es sustituir el valor del url por una única cadena algo así como url: "mi cadena", o poner la cadena entera, etc... juega con este parámetro, si no indicas http://... suele suponer que es localhost,
  • type: la petición puede ser de varios tipos: get, put, post... en este caso es de tipo get, que es lógico porque quieres que te devuelva algo, entonces get de conseguir, si fuera un post o put enviarías tú objetos a actualizar/ añadir, etc... pero en este caso es get.
  • datatype: tipo de datos, en este caso jsonp
  • success: la petición que realizas te devuelve una respuesta que en principio puede ser de dos tipos (buena o mala) si es buena (success) viene con un httpStatusCode =200 normalmente, y mediante este parámetro le dices lo que tiene que hacer si es este el caso.
  • Error: igual que success pero en este caso le dices lo que tiene que hacer si la respuesta no es buena, no es successful, normalmente es un BadRequest, que de cara al usuario tendrás que hacer algo, en este caso le dices que ha habido un problema.

Eso a grandes líneas, en el caso de que la respuesta sea satisfactoria (success) puede verse como se añade cada noticia a la web mediante jquery se modifica el html de la página web añadiendo de manera dinámica cada noticia, porque a priori no sabes cuántas vas a recibir, nótese también que se contempla el caso de respuesta satisfactoria pero no hay resultados, es decir no hay noticias nuevas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.