Foros del Web » Programando para Internet » Javascript »

Ticker twitter para web, problema tildes

 Estas en el tema de Ticker twitter para web, problema tildes en el foro de Javascript en Foros del Web. Qué tal. Estoy intentando implementar un div en nuestra web que destaque los últimos mensajes de twitter. He encontrado este código que funciona muy bien: ...
  #1 (permalink)  
Antiguo 11/01/2011, 06:28
 
Fecha de Ingreso: marzo-2005
Mensajes: 26
Antigüedad: 19 años, 1 mes
Puntos: 0
Pregunta Ticker twitter para web, problema tildes
Qué tal.

Estoy intentando implementar un div en nuestra web que destaque los últimos mensajes de twitter.

He encontrado este código que funciona muy bien:

Código Javascript: 
Ver original
  1. <html>
  2.  
  3.     <head>
  4.  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  6.  
  7. <script type="text/javascript">
  8. jQuery(function($) {
  9.     var tweets = {
  10.         el: '.twitterTicker .twitter-stream',
  11.         items: new Array(),
  12.         count: 0,
  13.         total: -1,
  14.         delay: 6000,
  15.         animate: true
  16.     };
  17.     $(tweets.el+' p').each(function(i) {
  18.         tweets.items[i] = $(this).html();
  19.         tweets.total++;
  20.     }).hide();
  21.     runTweeter();
  22.     function runTweeter() {
  23.         if(tweets.animate == true) {
  24.             if($(tweets.el+' p').length > 0) {
  25.                 $(tweets.el).children('p').fadeOut(500, function() {
  26.                     $(this).parent(0).empty().append('<p style="display: none;">'+tweets.items[tweets.count]+'</p>').children('p').fadeIn(500);
  27.                 });
  28.             } else {
  29.                 $(tweets.el).empty().append('<p style="display: none;">'+tweets.items[tweets.count]+'</p>').children('p').fadeIn(750);
  30.             }
  31.         } else {
  32.             $(tweets.el).empty().append('<p>'+tweets.items[tweets.count]+'</p>');
  33.         }
  34.         setTimeout(function() {
  35.             if(tweets.count == tweets.total) {
  36.                 tweets.count = 0;
  37.             } else {
  38.                 tweets.count++;
  39.             }
  40.             runTweeter();
  41.         }, tweets.delay);
  42.     }
  43. });
  44. </script>
  45.  
  46.         <style type = "text/css">
  47.  
  48.             .twitter-stream {
  49.             background: #d5e8ef;
  50.             border: 1px solid #d5e8ef;
  51.             -moz-border-radius: 7px;
  52.             -webkit-border-radius: 7px;
  53.             -khtml-border-radius: 7px;
  54.             border-radius: 7px;
  55.             padding: 10px;
  56.             margin: 0 0 20px 0;
  57.             font-size: 10px;
  58.             color: #6e6f73;
  59.             font-weight: bold;
  60.             font-family: verdana;
  61.             float: left;
  62.             width: 87%;
  63.         }
  64.         .twitter-stream p {
  65.             padding: 0px;
  66.             margin: 0px;
  67.         }
  68.         .twitter-stream p a {
  69.             color: #45799f;
  70.             text-decoration: none;
  71.         }
  72.  
  73.         </style>
  74.  
  75.     </head>
  76.  
  77.     <body>
  78.  
  79.         <div class="twitterTicker"><img src="http://return-true.com/wp-content/themes/returntrue/images/layout/twittertickerbird.jpg" style="float:left;" />
  80.  
  81.                 <?php
  82.                         $doc = new DOMDocument();
  83.  
  84.                         # load the RSS -- replace 'username' with your own twitter username
  85.                         if($doc->load('http://twitter.com/statuses/user_timeline/USERNAME.rss')) {
  86.                           echo "<div class='twitter-stream'>";
  87.  
  88.                           # number of <li> elements to display.  20 is the maximum
  89.                           $max_tweets = 10;   
  90.  
  91.                           $i = 1;
  92.                           foreach ($doc->getElementsByTagName('item') as $node) {
  93.                             # fetch the title from the RSS feed.
  94.                             # Note: 'pubDate' and 'link' are also useful (I use them in the sidebar of this blog)
  95.                             $tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;
  96.  
  97.                             # the title of each tweet starts with "username: " which I want to remove
  98.                             $tweet = substr($tweet, stripos($tweet, ':') + 1);  
  99.  
  100.                             # OPTIONAL: turn URLs into links
  101.                             $tweet = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@',
  102.                                   '<a href="$1">$1</a>', $tweet);
  103.  
  104.                             # OPTIONAL: turn @replies into links
  105.                             $tweet = preg_replace("/@([0-9a-zA-Z]+)/",
  106.                                   "<a href=\"http://twitter.com/$1\">@$1</a>",
  107.                                   $tweet);
  108.  
  109.                             echo "<p>". $tweet  . "</p>";
  110.  
  111.                             if($i++ >= $max_tweets) break;
  112.                           }
  113.                           echo "</div>";
  114.                         }
  115.  
  116.                         ?>
  117.     </body>
  118.  
  119. </html>

Aportado por AP Design en http://return-true.com/2010/09/building-a-twitter-ticker-with-jquery/

El problema es que no me respeta ñ, diéresis ni tildes como podéis ver en mi ejemplo:
http://www.forpe.es/ej_twitter-paul.php

No tengo conocimientos de javascript, por lo que si me pueden decir cómo solucionarlo se lo agradezco sumamente.

Gracias de antemano.
  #2 (permalink)  
Antiguo 11/01/2011, 06:43
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 19 años, 8 meses
Puntos: 56
Respuesta: Ticker twitter para web, problema tildes
Holas Wilco.

Creo puedes probar reemplazando en cada texto los caracteres incorrectos por los correctos usando la función (método) fromCharCode(), pero eso significaría que tendrías que tener identificados todos los caracteres erróneos y sus respectivas correcciones. En ese sentido, podrías crear una función que reciba el caracter incorrecto y te retorne el correcto, usando la lógica descrita.

Por otra parte, también creo que está en juego la codificación del HTML en donde está contenido tu código. Si lo seteas a una codificación en español tal vez te muestre los caracteres correctamente sin tener que hacer mayor esfuerzo...

Saludos!
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #3 (permalink)  
Antiguo 11/01/2011, 09:40
 
Fecha de Ingreso: marzo-2005
Mensajes: 26
Antigüedad: 19 años, 1 mes
Puntos: 0
De acuerdo Muestra TWEETS en tu web de forma atractiva
¡Magia! http://forpe.es/ya.php

Gracias quinqui, se ha resuelto simplemente seteando el idioma:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta http-equiv="content-language" content="es" />

Dejo el código completo para quien lo quiera usar. Es una aplicación que muestra el número de tweets deseado de una bonita forma.

Código PHP: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8.  
  9. <meta http-equiv="content-language" content="es" />
  10.  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  12.  
  13. <script type="text/javascript">
  14. jQuery(function($) {
  15.     var tweets = {
  16.         el: '.twitterTicker .twitter-stream',
  17.         items: new Array(),
  18.         count: 0,
  19.         total: -1,
  20.         delay: 6000,
  21.         animate: true
  22.     };
  23.     $(tweets.el+' p').each(function(i) {
  24.         tweets.items[i] = $(this).html();
  25.         tweets.total++;
  26.     }).hide();
  27.     runTweeter();
  28.     function runTweeter() {
  29.         if(tweets.animate == true) {
  30.             if($(tweets.el+' p').length > 0) {
  31.                 $(tweets.el).children('p').fadeOut(500, function() {
  32.                     $(this).parent(0).empty().append('<p style="display: none;">'+tweets.items[tweets.count]+'</p>').children('p').fadeIn(500);
  33.                 });
  34.             } else {
  35.                 $(tweets.el).empty().append('<p style="display: none;">'+tweets.items[tweets.count]+'</p>').children('p').fadeIn(750);
  36.             }
  37.         } else {
  38.             $(tweets.el).empty().append('<p>'+tweets.items[tweets.count]+'</p>');
  39.         }
  40.         setTimeout(function() {
  41.             if(tweets.count == tweets.total) {
  42.                 tweets.count = 0;
  43.             } else {
  44.                 tweets.count++;
  45.             }
  46.             runTweeter();
  47.         }, tweets.delay);
  48.     }
  49. });
  50. </script>
  51.  
  52.         <style type = "text/css">
  53.  
  54.             .twitter-stream {
  55.             background: #d5e8ef;
  56.             border: 1px solid #d5e8ef;
  57.             -moz-border-radius: 7px;
  58.             -webkit-border-radius: 7px;
  59.             -khtml-border-radius: 7px;
  60.             border-radius: 7px;
  61.             padding: 10px;
  62.             margin: 0 0 20px 0;
  63.             font-size: 10px;
  64.             color: #6e6f73;
  65.             font-weight: bold;
  66.             font-family: verdana;
  67.             float: left;
  68.             width: 87%;
  69.         }
  70.         .twitter-stream p {
  71.             padding: 0px;
  72.             margin: 0px;
  73.         }
  74.         .twitter-stream p a {
  75.             color: #45799f;
  76.             text-decoration: none;
  77.         }
  78.  
  79.         </style>
  80.  
  81.     </head>
  82.  
  83.     <body>
  84.  
  85.         <div class="twitterTicker"><img src="http://return-true.com/wp-content/themes/returntrue/images/layout/twittertickerbird.jpg" style="float:left;" />
  86.  
  87.                 <?php
  88.                         $doc = new DOMDocument();
  89.  
  90.                         # load the RSS -- replace 'username' with your own twitter username
  91.                         if($doc->load('http://twitter.com/statuses/user_timeline/Fundacion_Forpe.rss')) {
  92.                           echo "<div class='twitter-stream'>";
  93.  
  94.                           # number of <li> elements to display.  20 is the maximum
  95.                           $max_tweets = 10;   
  96.  
  97.                           $i = 1;
  98.                           foreach ($doc->getElementsByTagName('item') as $node) {
  99.                             # fetch the title from the RSS feed.
  100.                             # Note: 'pubDate' and 'link' are also useful (I use them in the sidebar of this blog)
  101.                             $tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;
  102.  
  103.                             # the title of each tweet starts with "username: " which I want to remove
  104.                             $tweet = substr($tweet, stripos($tweet, ':') + 1);  
  105.  
  106.                             # OPTIONAL: turn URLs into links
  107.                             $tweet = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@',
  108.                                   '<a href="$1">$1</a>', $tweet);
  109.  
  110.                             # OPTIONAL: turn @replies into links
  111.                             $tweet = preg_replace("/@([0-9a-zA-Z]+)/",
  112.                                   "<a href=\"http://twitter.com/$1\">@$1</a>",
  113.                                   $tweet);
  114.  
  115.                             echo "<p>". $tweet  . "</p>";
  116.  
  117.                             if($i++ >= $max_tweets) break;
  118.                           }
  119.                           echo "</div>";
  120.                         }
  121.  
  122.                         ?>
  123.     </body>
  124.  
  125. </html>

Encontrado en http://return-true.com/2010/09/building-a-twitter-ticker-with-jquery

Saludos.

Etiquetas: ticker, tildes, twitter
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:20.