必威体育下载基督教Heilmann

您当前正在浏览Twitter类别的档案。必威体育简介

“twitter”类别的存档

不引人注目的例子,使用Twitter API延迟加载徽章

星期五,4月11日,二千零八

以下是我的问题在高地讨论分发徽章和ATantek在Twitter上抱怨官方的Twitter徽章我想我可以尝试按照我在演讲中提到的一些最佳实践来创建一个Twitter徽章。这里是结果。

标记

而不是HTML当javascript可用时将用实际数据播种的容器,而当它不可用时则无意义,我想建立在HTML如果不编写脚本并从中获取脚本所需的所有信息,这是有意义的。





不引人注目的例子,懒惰地加载TwitterBadge





为了定制徽章,我允许CSS包含要添加到主容器中的信息的类:





不引人注目的例子,懒惰地加载TwitterBadge





它们的意思是:

  • amount-n定义以n为整数显示的tweet的数量
  • 皮肤名称定义你想要使用的皮肤(现在是灰色和蓝色)
  • 用户信息定义用户的虚拟人物,应显示名称和位置。

剧本

这是完整的脚本,我们将一个一个地看一遍。

twitterBadge=function()
var CONFIG={
默认值:5,
徽章ID:'twitterbadge',
用户标识:“twitterbadgeuser”,
tweetsid:'twitterbadgetweets',
用户信息:'userinfo',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
样式:{
'gray':'twitterbadge.css',
'blue':'twitterbadgeblue.css'
}

};
var badge=document.getElementByID(config.badgeid);
如果(徽章){
var link=badge.getElementsByTagname('a')[0];
如果(链接){
var classdata = badge.className;
var head=document.getElementsByTagname('head')[0];
var amount=config.amountmatch.exec(classdata);
var amount=金额?金额[1]:config.countdefault;
var skin=config.stylesMatch.exec(classdata);
如果(& &皮肤[1]){
var style=document.createElement('link');
style.setattribute('rel','stylesheet');
style.setattribute('type','text/css');
style.setattribute('href',config.styles[skin[1]]);
head.insertbefore(样式,head.firstchild);
}

var name=link.href.split('/');
var resturl='http://twitter.com/status/user_timeline/'+
name[name.length-1]+'.json?回调='+
'twitterBadge.show&count='+amount;
var script=document.createElement('script');
script.src=resturl;
script.type='text/javascript';
函数显示(结果)
如果(classdata.indexOf(config.userinfo)! = 1){
var user=document.createElement('p');
user.id=config.user id;
var img=document.createElement(“img”);
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendchild(img);
var ul=document.createElement(“ul”);
var data=['屏幕名称','名称','位置'];
(var = 0;数据[我];我+ +){
if(结果[0].user[data[i]])
var li=document.createElement(“li”);
li.appendChild(document.createTextNode(result[0].user[data[i]]));
ul.附录(li);
}

}
user.appendchild(ul);
badge.appendchild(用户);
}

var tweets = document.createElement(' ul');
tweets.id=config.tweets id;
对于(var i=0,j=result.length;i var user name=result[i].user.screen\u name;
var li=document.createElement(“li”);
var span=document.createElement(“span”);
span.innerhtml=result[i].text+'';
li.附属物(跨度);
var link=document.createElement('a');
link.setattribute('href','http://twitter.com/'+用户名+
'/status/'+结果[i].id);
link.appendChild(document.createTextNode(相对时间(结果[i].已创建时间));
li.appendChild(链接);
tweets.appendchild(li);
}

badge.appendchild(tweets);
}

函数相对时间(时间值)
var值=时间_值.split(“”);
时间值=值[1]+“”+值[2]+“,“+值[5]+”“+值[3];
var parsed_date=date.parse(时间_值);
var relative_to=(arguments.length>1)?参数[1]:new date();
var delta=parseInt((relative_to.getTime()–parsed_date)/1000);
delta=delta+(相对于.getTimeZoneOffset()*60);
如果(delta<60)
返回“不到一分钟前”;
} else if(delta < 120) {
返回“大约一分钟前”;
否则,如果(delta<(60*60))
return(parseInt(delta/60)).toString()+“分钟前”;
} else if(delta < (120*60)) {
返回“大约一小时前”;
否则,如果(delta<(24*60*60))
返回“about”+(parseInt(delta/3600)).toString()+“hours ago”;
否则,如果(delta<(48*60*60))
返回“1天前”;
其他}{
return(parseInt(delta/86400)).toString()+“天前”;
}

}
}

}
返回{
表演:表演,
初始化:函数(){
head.appendchild(脚本);
}

};
}();
twitterbadge.init ();

我正在使用显示模块模式保持代码简短,避免使用全局回调方法。然而,有一点模块模式中生成的脚本节点的操作异常所以我们必须偏离那里的标准()在主模块之后调用方法。

我首先想到的是为脚本提供一个配置对象。这使得在不需要搜索整个脚本的情况下很容易更改它的设置,而且对于实现者来说,这只是一个很好的服务:


twitterBadge=function()
var CONFIG={
默认值:5,
徽章ID:'twitterbadge',
用户标识:“twitterbadgeuser”,
tweetsid:'twitterbadgetweets',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
样式:{
'gray':'twitterbadge.css',
'blue':'twitterbadgeblue.css'
}

};

这里有所有的身份证,用于从中获取数据的样式名和相应的文件名以及正则表达式。CSS类名。所有的ID和类都是用来定义自己皮肤的钩子。还有一个默认值变量,用于定义未设置Amount类时应显示的项数。


var badge=document.getElementByID(config.badgeid);
如果(徽章){
var link=badge.getElementsByTagname('a')[0];
如果(链接){

我测试了徽章,它包含一个链接,因为这是我们从中获取所有配置数据的地方。


var classdata = badge.className;
var head=document.getElementsByTagname('head')[0];
var amount=config.amountmatch.exec(classdata);
var amount=金额?金额[1]:config.countdefault;
var skin=config.stylesMatch.exec(classdata);
如果(& &皮肤[1]){
var style=document.createElement('link');
style.setattribute('rel','stylesheet');
style.setattribute('type','text/css');
style.setattribute('href',config.styles[skin[1]]);
head.insertbefore(样式,head.firstchild);
}

然后我就可以阅读课堂上的信息了。我为文档头部设置了一个快捷方式,并读取要显示的tweet的数量。如果没有amount-n类集,则返回默认值。

接下来是皮肤,我检查类是否已设置,如果是这种情况,我将创建一个指向右侧皮肤的新链接元素。我从配置样式对象中获取href。

注意我使用插入()将样式添加到文档头而不是AppDead().这样可以确保皮肤CSS文件不会覆盖其他样式表中的设置。最后一个包含的样式表规则了所有这些规则。


var name=link.href.split('/');
var resturl='http://twitter.com/status/user_timeline/'+
name[name.length-1]+'.json?回调='+
'twitterBadge.show&count='+amount;
var script=document.createElement('script');
script.src=resturl;
script.type='text/javascript';

现在是时候找到用户名(通过拆分链接的href属性)并组装休息获取Twitter数据的URL。通常我会将新的脚本节点直接添加到头部,但歌剧院不喜欢这样。


函数显示(结果)
如果(classdata.indexOf(config.userinfo)! = 1){
var user=document.createElement('p');
user.id=config.user id;
var img=document.createElement(“img”);
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendchild(img);
var ul=document.createElement(“ul”);
var data=['屏幕名称','名称','位置'];
(var = 0;数据[我];我+ +){
if(结果[0].user[data[i]])
var li=document.createElement(“li”);
li.appendChild(document.createTextNode(result[0].user[data[i]]));
ul.附录(li);
}

}
user.appendchild(ul);
badge.appendchild(用户);
}

现在是时候开始核心功能了:由twitter调用的show方法REST API回调。我检查是否设置了用户信息,并相应地创建标记。这里没什么了不起的。


var tweets = document.createElement(' ul');
tweets.id=config.tweets id;
对于(var i=0,j=result.length;i var user name=result[i].user.screen\u name;
var li=document.createElement(“li”);
var span=document.createElement(“span”);
span.innerhtml=result[i].text+'';
li.附属物(跨度);
var link=document.createElement('a');
link.setattribute('href','http://twitter.com/'+用户名+
'/status/'+结果[i].id);
link.appendChild(document.createTextNode(相对时间(结果[i].已创建时间));
li.appendChild(链接);
tweets.appendchild(li);
}

badge.appendchild(tweets);
}

接下来我得到tweet信息,整理一个列表并将其添加到徽章中。


函数相对时间(时间值)
[…]
}

}
}

返回{
表演:表演,
初始化:函数(){
head.appendchild(脚本);
}

};
}();
twitterbadge.init ();

相对时间法实际上是从最初的twitter徽章中提取的,并计算twitter有多旧。我用一个返回语句结束模块,该语句定义公共方法(仅在本例中)显示)并添加脚本节点以调用REST API在init方法中。这只对解决歌剧问题是必要的。

下载并举例说明

你可以下载Twitter徽章看到它的作用.

通过对谷歌翻译API的黑客攻击使Twitter多语言化

周一,3月31日,二千零八

在帮助使用正确的语言属性修复雅虎搜索结果页为了让屏幕阅读器用户能够访问它们,我想知道如何使用用户生成的内容来实现这一点。当然,最简单的选择是要求用户在配置文件中提供正确的语言,但如果你像我一样会说两种语言,你实际上会用不同的语言写作。另一种选择是,当我输入语言时,提供我作为用户选择语言,这很烦人。

然后我偶然发现谷歌的Ajax翻译美国石油学会并且认为它应该很容易与之结合,例如杰森产量推特美国石油学会动态添加正确的语言属性。

唉,这不像我想的那么容易。表面上使用谷歌很容易美国石油学会告诉我某个文本是什么语言可能是:


var text = "¿Donde esta el bano ?"
google.language.detect(文本,功能(结果)
如果(! result.error) {
var language='未知';
对于(l在google.language.languages中)
if(google.language.languages[l]结果.language)
语言= L;
断裂;
}

}
var container=document.getElementByID(“检测”);
container.innerhtml=text+“是:”+language+“”;
}

(});

然而,如果你想在一个循环中使用这个,你就走运了。这个google.language.detect检测方法触发内部XHR调用,结果集只给你一个错误代码,信心水平,一个可交付的布尔值和语言代码。这是很多,但没有办法告诉函数得到的结果,哪些文本被分析。如果美国石油学会重复文本或至少允许您为当前XHR请求。

当Ajax请求以随机顺序返回时,无法判断哪个结果对哪个文本有效,所以我被卡住了。

输入萤火虫。分析正在处理的请求时,我意识到REST URL由google.language的内部方法调用。就翻译而言,这是:


http://www.google.com/uds/glangdetect?callback=callback_method&context=number&q=url_encoded_text&key=notsupplied&v=1.0

可以使用数字和自己的回调方法创建脚本返回这些结果的文档中的节点。回电是:


CALLBACK_METHOD(' NUMBER',{"language": "es"," isreliability ": true,"confidence": 0.24716422},200,null,200)

然而,因为我已经在使用PHP从其他服务中获取信息,最后我用curl作为整个概念证明,让twitter用自然语言说话:


    //卷曲Twitter订阅源
    $url='http://twitter.com/status/public_timeline.rss';
    $ch=curl_init();
    卷发($ch,科洛普网址$URL);
    卷发($ch,科洛普_RETURNTRANSFER,1);
    $twitterdata=curl_exec($ch);
    卷曲关闭($ch);
    //获取所有描述
    preg_match_all (" / ([^<]) /MSI“,twitterdata美元,美元desc);
    //跳过主源描述
    foreach($descs[1]作为$key=>d)
    如果($ key=0){
    继续;
    }

    /组装休息调用并卷曲结果
    $url='http://www.google.com/uds/glangdetect?回调=
    'FeedResult&Context='。美元的关键。“& Q=”。urlencode ($ d)。
    '&key=notsupplied&v=1.0';
    $ch=curl_init();
    卷发($ch,科洛普网址$URL);
    卷发($ch,科洛普_RETURNTRANSFER,1);
    $langcode=curl_exec($ch);
    卷曲关闭($ch);
    //获取语言
    preg_match(“/”language“:”([^”]+)“/”,$langcode,$res);
    //写出列表项
    回声

  • ‘D元’。

  • }

    ?>

查看结果:支持自然语言的公共Twitter订阅源

我将很快做一些纯javascript解决方案,也是。这可能是一个很好的机会用户原创内容更容易接近。

感谢马克·托马斯和蒂姆·休格登对如何在XHR问题。