twitter

Haciendo hablar a Twitter

Hace tiempo que tenia pendiente hacer un mashup de la librería javascript de Twitter, Google Translate y las nuevas oportunidades de HTML5. Pues al final me he animado y no ha sido muy complicado: por un lado detectar el idioma del tweet, por otro lanzar la ejecución del el audio, y por ultimo integrar estas dos funciones el la librería widget.js que ofrece Twitter.

Esta es una primera aproximación, que puede ser mejorada considerablemente. A continuación el código y ejemplo (esta probado que funciona en chrome).

El widget.js modificado se puede descargar aqui.

<br />
&lt;html&gt;<br />
	&lt;head&gt;<br />
	&lt;/head&gt;<br />
	&lt;body&gt;<br />
	&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi?key=AIzaSyBMhwGvMwDbGgXIVU4SI_aVy7AjeGFnorw&quot;&gt;&lt;/script&gt;<br />
		&lt;script type=&quot;text/javascript&quot;&gt;<br />
		google.load(&quot;language&quot;, &quot;1&quot;);</p>
<p>	var auxtest = &quot;&quot;;<br />
	var elapsedtww = 0;</p>
<p>	function cleanHtml(html){<br />
		 	var result = html.replace(/&lt;.*?&gt;(.*?)&lt;\/.*?&gt;/g, function(a,s){return s;});<br />
	  	var result2 = result.replace(/#(.*?)/g, function(a,s){return s;});<br />
	  	var result3 = result2.replace(/@(.*?)/g, function(a,s){return s;});<br />
	  	return cleanLinks(result3);<br />
	}</p>
<p>	function cleanLinks(text){<br />
  	var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;<br />
  	return text.replace(exp,&quot;&quot;);<br />
	}</p>
<p>	function sleep(milliSeconds){<br />
		var startTime = new Date().getTime(); // get the current time<br />
		while (new Date().getTime() &lt; startTime + milliSeconds); // hog cpu<br />
	}</p>
<p>	function submitGtext(text) {<br />
			while (elapsedtww &gt; 0){<br />
				sleep(1000);<br />
			}<br />
			elapsedtww = 1;<br />
      auxtest = cleanHtml(text);<br />
      google.language.detect(auxtest, playVoice);<br />
      return false;<br />
    }</p>
<p>	function playVoice(result){<br />
	  var langcode = &#8216;en&#8217;;<br />
    if (result.language) {<br />
        var language = &#8216;unnamed&#8217;;<br />
        for (l in google.language.Languages) {<br />
          if (google.language.Languages[l] == result.language) {<br />
            language = l;<br />
            break;<br />
          }<br />
        }</p>
<p>        if(language == &quot;SPANISH&quot;){<br />
         langcode = &#8216;es&#8217;;<br />
        }<br />
        if(language == &quot;PORTUGUESE&quot;){<br />
         langcode = &#8216;pt&#8217;;<br />
        }<br />
        if(language == &quot;GERMAN&quot;){<br />
         langcode = &#8216;de&#8217;;<br />
        }<br />
    }<br />
		var audio_file = document.getElementById(&#8216;voice&#8217;);<br />
		while(audio_file.currentTime &lt; audio_file.duration &amp;&amp; audio_file.currentTime != 0){<br />
			sleep(100);<br />
		}<br />
		audio_file.src = &#8216;http://translate.google.com/translate_tts?q=&#8217;+escape(html_entity_decode(auxtest))+&#8217;&amp;tl=&#8217;+langcode;<br />
		document.getElementById(&#8216;audiopaths&#8217;).value =  document.getElementById(&#8216;audiopaths&#8217;).value +&quot;\r\n\r\n&quot;+html_entity_decode(auxtest);<br />
		audio_file.load();<br />
		audio_file.play();<br />
		elapsedtww = 0;<br />
	}</p>
<p>	function html_entity_decode(str)<br />
	{<br />
	    try<br />
		{<br />
			var  tarea=document.createElement(&#8216;textarea&#8217;);<br />
			tarea.innerHTML = str; return tarea.value;<br />
			tarea.parentNode.removeChild(tarea);<br />
		}<br />
		catch(e)<br />
		{<br />
			//for IE add &lt;div id=&quot;htmlconverter&quot; style=&quot;display:none;&quot;&gt;&lt;/div&gt; to the page<br />
			document.getElementById(&quot;htmlconverter&quot;).innerHTML = &#8216;&lt;textarea id=&quot;innerConverter&quot;&gt;&#8217; + str + &#8216;&lt;/textarea&gt;&#8217;;<br />
			var content = document.getElementById(&quot;innerConverter&quot;).value;<br />
			document.getElementById(&quot;htmlconverter&quot;).innerHTML = &quot;&quot;;<br />
			return content;<br />
		}<br />
	}<br />
	&lt;/script&gt;<br />
	&lt;script src=&quot;http://www.ikeralbeniz.net/wp-content/uploads/2010/12/widget.js&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
new TWTR.Widget({<br />
  version: 2,<br />
  type: &#8216;search&#8217;,<br />
  search: &#8216;meneame_net&#8217;,<br />
  interval: 9000,<br />
  title: &#8216;Test&#8217;,<br />
  subject: &#8216;Test de GoogleTranslate + twiiter&#8217;,<br />
  width: 250,<br />
  height: 300,<br />
  theme: {<br />
    shell: {<br />
      background: &#8216;#8ec1da&#8217;,<br />
      color: &#8216;#ffffff&#8217;<br />
    },<br />
    tweets: {<br />
      background: &#8216;#ffffff&#8217;,<br />
      color: &#8216;#444444&#8242;,<br />
      links: &#8216;#1985b5&#8242;<br />
    }<br />
  },<br />
  features: {<br />
    scrollbar: false,<br />
    loop: true,<br />
    live: true,<br />
    hashtags: true,<br />
    timestamp: true,<br />
    avatars: true,<br />
    toptweets: true,<br />
    behavior: &#8216;default&#8217;<br />
  }<br />
}).render().start();<br />
&lt;/script&gt;<br />
	&lt;audio id=&quot;voice&quot; src=&quot;&quot;&gt;<br />
		&lt;h3&gt;Este ejemplo solo funciona con navegadores que soportan HTML5 como CHROME&lt;/h3&gt;<br />
	&lt;/audio&gt;<br />
	&lt;body&gt;<br />
&lt;/html&gt;<br />




Este ejemplo solo funciona con navegadores que soportan HTML5 como CHROME

La que ha liado Twitter!!

Una vulnerabilidad en el método onmouseover se esta convirtiendo en la broma de moda en Twitter.. el problema es que esta vulnerabilidad de broma no tiene nada ya que permite ejecutar código javascript solo al pasar el ratón por encima de nuestro twitt.. Yo he probado a hacer una prueba con el hashtag #zinemaldia. Imaginaos las de visitas que podría conseguir bombardeando los hashtags de los trending topics.

La sentencia que he probado es la siguiente:

<br />
#zinemaldia http://twitter.com/RainbowTwtr#@"onmouseover="javascript:window.location = 'http://www.ikeralbeniz.net/';"/<br />

Lo que hago es una redirección a mi sitio.. por lo que si queréis hacer un poco el tonto podéis probar:

<br />
#zinemaldia http://twitter.com/RainbowTwtr#@"onmouseover="javascript: alert(‘no me pises por favor!’);"/<br />

Adiós SMS de 1€! hola Twitter!

Desde eitb.com llevan años trabajando para la integración de las nuevas tecnologías y redes sociales en la programación de los canales del grupo, para intentar que sus contenidos sean más interactivos. Además coincide que he sido un firme opositor a los sistemas de SMS de pago en los programas de televisión ya que siempre he creído que eran una forma de estafa encubierta sobre todo en programas que tenían un publico claramente menor de edad.





Por tanto la idea de sustituir los mensajitos de marras por Tweets que se ha llevado acabo en el programa “El conquis” (programa de debate del reality “El conquistador del Fin del Mundo”) me llamo la atención desde el primer momento y me pareció una iniciativa digna de aplaudir y de dar a conocer de cara a que estas practicas sean mas populares en los medios de comunicación.

En el caso de este programa el sistema es muy sencillo: se define un hashtag (#conquis) y los usuarios pueden enviar comentarios a través de sus cuentas de Twitter añadiendo dicho hashtag en sus comentarios. Desde el programa se sigue el feed generado a partir del hashtag y se muestra en la parte inferior de la pantalla.



Simulación (no he conseguido una imagen real) de como se muestran los tweets en directo



Soy realista y no espero que programas como Salvame, La Noria o DEC renuncien a una (sino la principal) de las fuentes de ingresos de sus programas. Pero si creo que por lo menos las televisiones públicas no deben de participar de este tipo de estafas que son los SMS de pago y apostar por sistemas de participación más abiertos y accesibles.

Esperemos que estas iniciativas que se están llevando a cabo en diferentes medios de comunicación se popularicen en detrimento de otras practicas menos recomendables.

Primeros pasos con Buzz

Ha llegado Buzz y a primera vista lo que parece es un Twitter avanzado o un Facebook simplificado, como se vea. Pero mas allá de esta primera aproximación, me interesaba concer que funcionalidades se escondian tras esta nueva funcionalidad de Google. Por tanto el mejor sitio para empezar a buscar es el propio Google y su portal de APIs.

http://code.google.com/intl/es-ES/apis/buzz/

Actualmente solo existen dos opciones de integración disponibles:

  • De Buzz a tu Web
  • De tu Web a Buzz

De Buzz a tu Web

Buzz permite generar un RSS con tus comentarios en Buzz con lo que es posible generar plugins al estilo Twitter para tu blog. La forma de acceder a dicho RSS es la siguiente:

http://buzz.googleapis.com/feeds/{user_id}/public/posted

El user id es posible obtenerlo dirigiéndote a “Perfil de Google”..

En mis caso la dirección de mi perfil es la:

http://www.google.com/profiles/111738004311961586383

Por lo que mi user_id es 111738004311961586383 y mi url de RSS

http://buzz.googleapis.com/feeds/111738004311961586383/public/posted

De tu Web a Buzz

Buzz automáticamente permite que se integren en Buzz tus aplicaciones de Google, es decir, se generará un comentario cada vez que añadas una imagen a Picasa o subas un video a Youtube..

Si quieres que se genere un comentario cada vez que añades una entrada a tu blog debes conectar tu blog y Buzz bidireccionalmente:

Por un lado debes añadir una etiqueta en la cabecera de tu pagina de la siguiente manera:

<link rel=”me” type=”text/html” href=”{user_id}”/>

En mi caso será de la siguiente manera

<link rel=”me” type=”text/html” href=”http://www.google.com/profiles/111738004311961586383″/>

Además debes añadir tu Web como Web de confianza,  para ello dirígete a tu perfil de Google:

http://www.google.com/profiles/me/editprofile

y en la sección Enlaces añade un enlace a tu Web

Una vez terminado este proceso cada entrada nueva será comentada en tu Buzz.

Listo!

segunda parte »

 Scroll to top