Thursday, 7. June 2007, 05:01:10
Suite à un horaire léger, jâai pu consacrer un peu de temps à lâ
article dâhier sur le microblogging.
Jâai pu donc tester légèrement lâapplication de
Twitter⦠Jâai pu en tirer les conclusions quâil est simple dâutilisation, que ce que je vous ai dis hier nâétais pas que des « conneries » et autres de ce style⦠Mais en plus il procure un certain amusement à être complété.
Mais je nâai pas fais que cela, jâai aussi récupéré les données de
Google Reader qui étaient partagé afin de remodifier la fonction. La modifier est un bien grand mot, je dirais plutôt lâéclaircir, et la rendre compréhensible.
Au fil de la journée, je suis arrivé à un résultat assez pertinent, qui semble valider, et accessible malgré les technologies utilisées : Adobe Flash, Javascript, etc.
Disons quâil faudrais séparer les deux : lâun est accessible, lâautre pas ?
Afin de partager cela, je vous cite ci-dessous le code source :
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Twitter Party Badge</title>
<script type="text/javascript" src="groumphy.js"></script>
</head>
<body>
<!--
Service Twitter et Google Reader (Shared)
Auteur : Google Inc., Twitter
Modification : Groumphy
Copyright : respectif aux scripts
Version : 1.0.0 alpha
-->
<div id="twitter_and_googlereader">
<!-- debut de Twitter -->
<div>
<object
type="application/x-shockwave-flash" data="http://static.twitter.com/flash/twitter_timeline_badge.swf"
width="250"
height="600">
<param name="movie" value="http://static.twitter.com/flash/twitter_timeline_badge.swf">
<param name="FlashVars" value="user_id=6611282&color1=0x999999&color2=0x999999&textColor1=0x5E5E5E&textColor2=0x0&backgroundColor=0xCCCCCC&textSize=12">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<!-- debut de Twitter (alternatif 1) -->
<div id="twitter">
<ul id="twitter_list">
<li id="texte_twitter"><li>
<li id="temps_passe"></li>
</ul>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/6611282.json?callback=twitterCallback&count=1"></script>
<p><a href="http://twitter.com/statuses/friends_timeline/6611282.rss">Suivez ce que fais le Groumphy (RSS)</a></p>
</div>
<!-- fin de Twitter (alternatif 1)-->
<!-- debut de Twitter (alternatif 2) -->
<noscript>
<p>
<a href="http://twitter.com/statuses/friends_timeline/6611282.rss">Suivez ce que fais le Groumphy (RSS)</a>
</p>
</noscript>
<!-- fin de Twitter (alternatif 3) -->
<!-- debut de Twitter (alternatif 4) -->
<p><a href="http://twitter.com/Groumphy">Suivez les aventures de Groumphy</a><p>
<!-- fin de Twitter (alternatif 4) -->
</object>
<p><a href="http://twitter.com/statuses/friends_timeline/6611282.rss">Suivez ce que fais le Groumphy (RSS)</a></p>
</div>
<!-- fin de Twitter -->
<!-- debut de Google Reader -->
<div id="google_reader">
<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/15343427923727093981/state/com.google/broadcast?n=10&callback=GRC_p(%7Bc%3A%22gray%22%2Ct%3A%22Je%20lis%20en%20ce%20moment%22%2Cs%3A%22true%22%7D)%3Bnew%20GRC"></script>
<noscript><p><a href="http://www.google.com/reader/public/atom/user/15343427923727093981/state/com.google/broadcast">Lisez ce que lis le Groumphy(RSS)</a></p></noscript>
<p><a href="http://www.google.com/reader/public/atom/user/15343427923727093981/state/com.google/broadcast">Lisez ce que lis le Groumphy(RSS)</a></p>
</div>
<!-- fin de Google Reader -->
</div>
</body>
</html>
En Javascript, cela donne :
// ---------------------------------------------------------------
// Script de partage de flux de Google Reader (labs)
// Auteur : Google Inc. (c) 2006
// Modification : Groumphy.net (c) 2007
// Information : v.Labs 1.0
// ---------------------------------------------------------------
(function (){
var z = "/reader/shared/";;;
var G = G || { },
H = this;
if(!Function.prototype.apply){
Function.prototype.apply = function(a,b){
var c = [],
d,
g;
if(!a) a = H;
if(!b) b = [];
for(var e = 0; e < b.length; e++){
c[e] = "args[" + e + "]" }
g = "oScope.__applyTemp__.peek().(" + c.join(",") + ");";
if(!a.__applyTemp__){
a.__applyTemp__ = [] }
a.__applyTemp__.push(this);
d = eval(g);
a.__applyTemp__.pop();
return d } };
if(!Array.prototype.push){
Array.prototype.push = function(){
for(var a = 0; a < arguments.length; a++){
this[this.length] = arguments[a] }
return this.length } }
if(!Array.prototype.pop){
Array.prototype.pop= function(){
var a;
if(this.length){
a = this[this.length-1];
this.length--}
return a } }
Array.prototype.peek = function(){
return this[this.length-1] };
if(!Array.prototype.shift){
Array.prototype.shift = function(){
var a;
if(this.length){
a = this[0];
for( var b = 0; b < this.length-1; b++){
this[b] = this[b+1] }
this.length-- }
return a } }
if(!Array.prototype.unshift){
Array.prototype.unshift = function(){
var a = arguments.length;
for(var b = this.length-1; b >= 0; b--){
this[b+a] = this[b] }
for(var c = 0; c < a; c++){
this[c] = arguments[c] }
return this.length } }
var I = function(a){ return/^\s*$/.test(a) },
J = function(a){ return I(K(a)) },
K = function(a){ return a == null ? "":String(a) },
x = new p;
function p(){
if(document.all){ this.r = true }
else { this.r = false }
this.O = "pop" in Array.prototype;
this.z = "contains" in document;
this.M = "implementation" in document && "createDocument" in document.implementation;
this.L = "compatMode" in document;
this.N = "XMLHttpRequest" in window;
vara = navigator.userAgent,
b = /\(.*\) AppleWebKit\/(.*) \((.*)/.exec(a);
if(b){ this.B = true; this.Q = parseInt(b[1],10) }
else{ this.B = false }
this.A = window.opera;
this.P = a.indexOf("Wii")!= -1 }
p.prototype.n = function(){
return this.r && !this.z && !this.o() };
p.prototype.o = function(){
return this.A };
function v(a,b){
var c = b || document;
return c.getElementById(a) }
function i(a,b,c){
var d = c || document, g = d.createElement(a);
if(b){ for(var e in b){
var h = b[e];
if(x.n() && e == "class"){
e = "className" }
g.setAttribute(e,h) } }
return g }
function j(a){
return document.createTextNode(a) }
var C = function(a){
if(!a) return "";
var b = /<[^>]*>/gi;
return a.replace(b,"") };
function D(a,b){
if(a.length <= b){ return a}
var c = a.split(/\s+/);
a = [];
for(var d = 0; d < c.length && a.join(" ").length <= b; d++){
a.push(c[d]) }
a = a.join(" ");
if(d != c.length){ a += "..."}
return a}
var m = {},
y = { blue: {f:"#fff",
e:"#bccceb",
k:"#090992",
j:"#bccceb",
i:"#1010c8",
d:"#7a7ee0",
h:"#e5ecf9",
b:"#898de9" },
green: {f:"#fff",
e:"#d8dbbc",
k:"#2d8509",
j:"#d8dbbc",
i:"#58bf2f",
d:"#97e07a",
h:"#f5fbeb",
b:"#adb094" },
slate: {f:"#123",
e:"#345",
k:"#5e805e",
j:"#5e6f80",
i:"#abc",
d:"#5e6f80",
h:"#152939",
b:"#abc" },
gray:{ f:"#fff",
e:"#ccc",
k:"#666",
j:"#ccc",
i:"#999",
d:"#ccc",
h:"#eee",
b:"#aaa" },
khaki:{f:"#f2e9ca",
e:"#8e7c6a",
k:"#d52",
j:"#cba",
i:"#543",
d:"#ba9",
h:"#eae0c6",
b:"#987" },
pink:{ f:"#fff",
e:"#aaa",
k:"#d69",
j:"#ddd",
i:"#e684ad",
d:"#ebc",
h:"#fcf0f7",
b:"#a88" },
black:{f:"#000",
e:"#aaa",
k:"#ccc",
j:"#d8dbbc",
i:"#d52",
d:"#7a2b0e",
h:"#111",
b:"#999" } },
u = {margin:0,
padding:0,
background:"transparent none",
border:"none",
textAlign:"left",
textIndent:"0",
textDecoration:"none",
fontWeight:"normal" };
function k(a,b){
//this.l = "readerpublishermodule" + this.p();
this.l = "id_div_googlereader" + this.p();
this.g = a;
this.u = m["c"];
this.v = m["t"];
this.K = m["s"] == "true";
if(b){
b.innerHTML = "";
b.id = this.l;
this.m(v(this.l)) }
else{
document.write('<div id="' + this.l + '" class="reader-publisher-module"></div>');
var c = this;
window.setTimeout( function(){ c.m(v(c.l)) }, 0) } }
k.prototype.p = function(){
if(!("GRC_c" in window)){ window["GRC_c"] = 0 }
return window["GRC_c"]++ };
function A(a){ m =a }
k.prototype.m = function(a){
function b(F){
return F }
var c = this.q();
this.a(c.J, a);
if(this.v){
var d = i("h3");
this.a(c.I, d);
d.appendChild(j(this.v));
a.appendChild(d) }
var g = i("ul");
this.a(c.H, g);
for( var e = 0, h; h = this.g.items[e]; e++){
if(!h.alternate){ continue }
var o = i("li");
this.a(c.G, o);
var t = i("a",{href:b(h.alternate.href),
title:h.title,
"class":"i" });
this.a(c.C, t);
var f = C(h.title);
if(!J(f)){ f = D(f,48) }
t.appendChild(j(f));
o.appendChild(t);
if(this.K && h.origin.title){
var q = h.origin,
l = i("div", {
"class":"s" });
this.a(c.F, l);
o.appendChild(l);
l.appendChild(j(" from "));
var f = q.title;
if(f.length > 48){
f = f.substring(0,48) }
if(q.htmlUrl){ var r = i("a", {
href:b(q.htmlUrl),
title:f });
this.a(c.D,r);
r.appendChild(j(f));
l.appendChild(r) }
else{ l.appendChild(j(f)) } }
g.appendChild(o) }
a.appendChild(g);
var s = i("div", {
"class":"f"});
this.a(c.w, s);
if(this.g.id){
var w = this.g.id.indexOf("feed/") == 0,
E = this.g.alternate && this.g.alternate.href;
if(!w || E){
var n = i("a");
this.a(c.b, n);
//n.href = w ? this.g.alternate.href:"http://www.google.com" + z + this.g.id;
n.href = w ? this.g.alternate.href:"http://my.opera.com/groumphy";
n.appendChild(j("Lire plus..."));
s.appendChild(n) } }
a.appendChild(s)};
k.prototype.q = function(){
if(this.u == "-"){
return{ } }
var a = y[this.u];
return{
J:{ fontFamily:"arial, sans-serif",
fontSize:"10pt",
MozBorderRadius:"8px",
background:a.f,
border:"solid 4px " +a.e,
margin:"0.5em" },
I:{ padding:"0.2em 0",
margin:"0 0.5em",
MozBorderRadius:"8px 8px 0 0",
borderBottom:"solid 1px " + a.j,
color:a.k },
H:{ padding:"0.2em",
margin:"0 0.5em",
overflow:"hidden" },
G:{ listStyleType:"none",
padding:"0.4em 0 0.4em 0" },
C:{ color:a.i,
borderBottom:"solid 1px " + a.d },
F:{ paddingLeft:"0.5em",
color:a.d },
D:{ color:a.d },
w:{textAlign:"right",
borderTop:"solid 1px " +a.e,
background:a.h,
MozBorderRadius:"0 0 4px 4px",
padding:"0.2em 8px",
fontSize:"small",
whiteSpace:"nowrap" },
b:{ color:a.b,
textDecoration:"underline" } } };
k.prototype.a = function(a,b){
if(!a) return;
B(b);
for(var c in a){
b.style[c] = a[c] } };
function B(a){
for(var b in u){
a.style[b] = u[b] } }
window["GRC_p"] = A;
window["GRC"] = k; })();
// ---------------------------------------------------------------
// Script de boite Twitter, pour le microblogging
// Auteur : Twitter (c) 2007
// Modification : Groumphy.net (c) 2007
// Information : 1.0.1modification par Groumphy 06.06.2007
//1.0 version originale
// ---------------------------------------------------------------
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) { return '(moins d\'une minute)'; }
else if(delta < 120) { return '(il y \Ã une minute)'; }
else if(delta < (45*60)) { return '(Il y \Ã ' + (parseInt(delta / 60)).toString() + ' minutes)'; }
else if(delta < (90*60)) { return '(Il y \Ã une heure)'; }
else if(delta < (24*60*60)) { return '(plus de ' + (parseInt(delta / 3600)).toString() + ' heures)'; }
else if(delta < (48*60*60)) { return '(Il y \Ã un jour)'; }
else { return '(Il y \Ã ' + (parseInt(delta / 86400)).toString() + ' jours'; } }
function twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('texte_twitter').innerHTML = obj[0].text;
document.getElementById('temps_passe').innerHTML = relative_time(obj[0].created_at); }
Intéressé ? Simple, modifier quelques variables, et le tour est joué !
Pour voir le résultat opérationnel encore en test, rendez-vous sur
Groumphy.net !
Mais je me pose encore quelques questions⦠Faut-il faire un rafraichissement de la page toutes les X minutes (afin de garder le contenu à jour pour le visiteur) ? Nây a-t-il pas déjà un service qui offre cela (tout combiné dans la même plateforme) ? Etc.
Information : pour le code, l'indentation n'est pas présente.
WIDGETIZE