必威体育下载基督教Heilmann

您当前正在浏览必威体育下载基督教Heilmann四月的博客必威体育简介档案,2008年。

四月份存档2008年

哦,看,以一种愚蠢的方式使用Ajax不是一个好主意?

周二,4月29日,2008年

这对我来说很有趣dev.opera.com上最新的一篇文章题为“停止使用Ajax!”现在是一件大事。推特,共享书签和谷歌阅读器项目如潮水般涌入,人们似乎认为这是一篇非常大胆的文章。

事实是:詹姆斯是对的。他当时也是对的他或多或少地提供了与去年在海兰弗林的一次谈话相同的信息。在我介绍渐进式增强和JavaScript之后。

然而,这没有什么令人震惊、大胆或新鲜的。betway体育官方网他只说:

  • 不要为了使用它而使用任何技术
  • 在使用可能不合适的技术之前,请考虑您想要联系的用户。
  • 确保您的解决方案可用且可访问
  • 在有用的东西上构建解决方案,然后加强它。

这是我在开发任何软件或Web解决方案时认为的一个正常实践。

然而,现在真正的问题是,我们为什么处于这种状态——为什么我们认为这些信息是大胆的,令人震惊的或有争议的,为什么很多评论仍然是“我不关心可访问性,因为我的用户不需要它”?为什么假设和简单的可访问性谎言盛行,而好东西却闻所未闻?

好吧,事实上,我们向唱诗班讲道的时间太长了。我在Web可访问性和标准宣传社区已经有很长时间了,每当我问到企业开发和CMS一被告知,这是不值得战斗,因为“我们将永远达不到他们”。好吧,这就是资金和大量工作的所在,而且事实上,在许多情况下,无障碍和标准活动人士甚至不知道让这些领域的利益相关者忙碌的问题。我的数字Web文章“客户不关心可访问性的10个原因”以及后续行动七个可达性错误第一部分第2部分列出了这些问题以及我们3年前如何解决这些问题的错误方法。我上周在Abilitynet会议上的演讲栖息地围栏还提到了这种态度和问题。

我现在的处境是:我厌倦了人们为了正义而互相指责对方的错误,或者把问题归咎于唾手可得的体系。当人们询问可访问性或Ajax可用性建议时,您会得到许多批评,并得到“先验证然后再返回”的答案,但是不能立即使用的信息并不多,甚至不能回答导致产品状态的问题。通过问这个简单的问题,你会惊讶地发现什么。

我们必须了解大型系统,框架和公司仍然在运行这个节目,即使我们认为博客,关于web设计和mashup的书籍突破了极限。是的,但是到目前为止,对于那些销售Ajax和其他开箱即用解决方案的公司来说,这还只是一个小问题,因为这些解决方案是不可访问的,而且大部分对人类来说是不可用的。上一次在非初创企业或小型网络机构的公司中使用聪明的费用或时间跟踪系统是什么时候?当我参加AjaxWorld会议的时候纽约市今年早些时候,我听说了很多关于安全的事情,易于部署和可伸缩性,但只有一点关于可访问性(Dojo talk和悠悠说话,实际上)。人们更关心软件的成本和发布的速度,而不是质量或可维护性。每隔几年买一个新系统要比构建一个经过适当测试并适用于所有用户的系统便宜。贵公司是否仍有只适用于IE/Windows的系统或第三方解决方案?我相信至少有一个,问问人力资源部或财务部。

它没有帮助创造另一个术语和调用可访问且可用的Ajax解决方案hijax,请要么。尽管我很喜欢这个主意,但我还是同意詹姆斯的评论我们不需要再多说一句话,我们需要一个原因对于人们来说,不仅要在不考虑问题的情况下使用现成的解决方案,甚至更好的做法是,首先为那些基于假设构建解决方案的公司提供帮助。几周前我在Twitter上对一家大公司的一个系统大发牢骚时,他们的市场经理EMEA开始跟踪我,我开始和他们交谈。

我已经听过很多次了,我关于渐进式增强和可访问性的想法只是一种“短暂的时尚”,“在真正的软件市场上,你没有时间去做这些”。挑战这种态度是有区别的——通过使用我们以可预测和安全的方式提供的技术,证明我们可以节省您的时间和金钱。然而,关于这一点的案例研究并不多……

当我不知道人们为了做正确的事情必须克服哪些障碍时,我无法改变世界。每个开发人员都想做正确的事情,以干净和可维护的方式,为他们所做的一切感到自豪。由于项目仓促,出现了不良产品,糟糕的管理和开发人员变得非常沮丧,他们可以发布低于标准的,只是为了得到钱,或最终得到分配到一个不同的项目。

这是我们需要战斗的战斗——这些问题来自哪里?不是要避免什么技术。你可以很好地使用任何技术,您只需要能够销售它,而不需要炒作,也不需要假设开发软件的速度和编写一篇关于它的很酷的新闻稿的速度一样快。

YDN可访问性2.0会议总结

周二,4月29日,2008年

我刚刚提出了一个关于AbilityNet易访问性2.0会议的博客摘要在雅虎开发者网络博客上。

写一个你自己参加的会议的摘要是很难的,我的发现。无论如何,我想对所有参与组织这次会议的人以及其他发言者表示感谢。我在必威体育下载这次会议上学到了不少东西,我很高兴明年能来看看我们到了哪里。

在栖息地设置围栏——做正确的事情,让人无法进入。

星期六,4月26日,2008年

这是我在AbilityNet的可访问性2.0会议今天在伦敦。在这篇文章中,我谈到了我们如何努力推销无障碍性,以及在这样做时所犯的错误。

黑客Slideshare的嵌入添加了一个预览,并大大缩短和可读性。

星期四,4月17日,2008年

编辑: 脚本中有一个bug(请参阅注释),但是GoogleCode不允许我编辑自己的文件。一旦我解决了这个问题,我就会解决它。在评论中报告的错误现在已经修复,可悲的是,我还不得不重新编写转换器,因为谷歌代码不允许我替换旧版本的下载(或者有什么诀窍?).新文件称为预览2.JS

正如本博客的读者所知,我是……的超级粉丝幻灯片共享作为我的演示幻灯片的分发平台。然而,这件事有些事使我烦恼。

其中之一是SlideShare提供的相当冗长的嵌入代码:



这是一个相当大的问题,主要的问题是当您在一个文档中使用多个幻灯片嵌入时,当需要实例化这些Flash嵌入并试图预缓存S3中的前三张幻灯片时,您将放慢页面的呈现速度。

我已经分析了一些代码,添加了一些其他的信息,我发现在RSSfeed并提出了一个以不同方式嵌入幻灯片的小JavaScript。你只需要以下代码:



这使SlideShare具有相同的功能搜索引擎优化链接爱情,但要添加的要少得多。不是完整的幻灯片,您将得到一个预览图像,您可以单击它,它将被flash电影替换。以下是一些例子:

现在,为了把一个转换成另一个,你可以用手来做,或使用幻灯片共享嵌入转换器或安装Greasemonkey脚本

到目前为止,这是一个黑客,但是我和乔纳森·鲍特尔昨天晚上在旧金山JavaScript会议上,他很高兴能继续这个想法。我的心愿单:

  • 更大的预览图像
  • 休息美国石油学会调用它以可读的方式提供此信息

一个不显眼的例子,使用Twitter API的延迟加载标记

星期五,4月11日,2008年

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

标记

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





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





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





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





它们的意思是:

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

剧本

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

twitterbadge = function(){
变量配置={
默认值:5,
徽章ID:'twitterbadge',
用户ID:'twitterbadgeuser',
tweetsid:'twitterbadgetweets',
用户信息:'userinfo',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
样式:{
'gray':'twitterbadge.css',
“蓝”:“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?callback=' +
‘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.userID;
var img = document.createElement(' img');
img.src = result[0].user.profile_image_url;
img.alt = result[0].user.name;
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(结果[0].user[数据[我]]));
ul.附录(li);
}

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

var tweets=document.createElement('ul');
tweets.id = config.tweetsID;
(var = 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/'+用户名+
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendChild(链接);
tweets.appendchild(li);
}

badge.appendChild(微博);
}

函数relative_time(time_value){
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){
返回“少于一分钟前”;
}否则,如果(delta<120){
返回“大约一分钟前”;
}否则,如果(delta<(60*60))。{
返回(parseInt(delta / 60)).toString() + ' minutes ago';
}否则,如果(delta<(120*60))。{
返回“大约一小时前”;
}否则,如果(delta<(24*60*60))。{
返回“about”+(parseInt(delta/3600)).toString()+“hours ago”;
} else if(delta < (48*60*60)) {
返回“1天前”;
}其他{
return(parseInt(delta/86400)).toString()+“天前”;
}

}
}

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

}(二)
}();
twitterBadge.init();

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

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


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

}(二)

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


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

我测试了badge,它包含一个链接,因为我们将从这里获取所有配置数据。


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);
}

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

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

注意我用了插入()将样式添加到文档的头部,而不是附加子项().这样可以确保皮肤CSS文件不会覆盖其他样式表中的设置。最后一个包含的样式表将它们全部规则化。


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

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


函数显示(结果){
如果(classdata.indexof(config.userinfo)!=-1){
var user=document.createElement('p');
user.id = config.userID;
var img = document.createElement(' img');
img.src = result[0].user.profile_image_url;
img.alt = result[0].user.name;
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(结果[0].user[数据[我]]));
ul.附录(li);
}

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

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


var tweets=document.createElement('ul');
tweets.id = config.tweetsID;
(var = 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/'+用户名+
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendChild(链接);
tweets.appendchild(li);
}

badge.appendChild(微博);
}

接下来我会得到tweets信息,组装一个列表并将其添加到标记中。


函数relative_time(time_value){
[…]
}

}
}

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

}(二)
}();
twitterBadge.init();

relative_time方法实际上是从原始twitter标记中提取的,并计算tweet的年龄。我用一个返回语句结束模块,该语句定义公共方法(仅在本例中)显示),并添加要调用的脚本节点REST API在init方法中。这只对解决歌剧问题是必要的。

下载并举例说明

你可以下载Twitter徽章行动起来看看.