必威体育下载克里斯蒂安·海尔曼

您当前正在浏览必威体育下载克里斯蒂安·海尔曼四月份的博必威体育简介客档案,2008。

四月份存档二千零八

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

星期二,4月29日,二千零八

这对我来说很有意思dev.opera.com上题为“停止使用Ajax!”的最新文章现在是一件大事。鸣叫,共享书签和谷歌阅读器项目蜂拥而至,人们似乎认为这是一篇惊人的大胆文章。

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

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

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

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

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

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

这就是我现在的处境:我厌倦了人们通过互相指责对方的错误或指出系统存在的问题来进行良好的斗争。当人们要求可访问性或Ajax可用性建议时,你会得到很多抨击和“去验证然后再回来”的答案,但没有很多可以立即使用的信息,甚至是询问导致产品状态的问题。通过问这个简单的问题,你会惊讶地发现什么。

我们必须了解大型系统,框架和公司仍然在运行这个节目,即使我们认为博客,关于网页设计和混搭的书推动了信封的发展。他们这样做,但到目前为止,对于那些销售Ajax和其他现成解决方案的公司来说,这些解决方案还只是一个小小的不适,而这些解决方案更大的部分是人类无法使用的。上一次在非初创企业或小型网络机构的公司中使用聪明的费用或时间跟踪系统是什么时候?当我在年的AjaxWorld会议上纽约市今年早些时候,我听说了很多关于安全的事情,易于部署和可扩展性,但只涉及一点可访问性(Dojo Talk和悠悠说话,事实上)。比起质量或可维护性,人们更关心软件的成本和发布速度。每几年购买一个新系统要比建造一个经过适当测试并适用于所有用户的系统便宜。贵公司是否仍有只在IE/Windows上工作的系统或第三方解决方案?我确信至少有一个,询问人力资源部或财务部。

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

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

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

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

YDN可访问性2.0会议总结

星期二,4月29日,二千零八

我刚刚提出了一个Abilitynet的无障碍2.0会议摘要博客帖子在雅虎开发者网络博客上。

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

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

星期六,4月26日,二千零八

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

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

星期四,4月17日,二千零八

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

正如本博客的读者所知,我非常喜欢幻灯片作为我的演示幻灯片的分发平台。然而,有一些事情让我很恼火。

其中之一是Slideshare提供的相当详细的嵌入代码:



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

我分析了一下代码,添加了一些我在RSSfeed并提出了一个以不同方式嵌入幻灯片的小JavaScript。您只需要以下代码:



这使SlideShare具有相同的功能SEO链接爱情,但要添加的要少得多。而不是整张幻灯片,你会得到一个预览图像,你可以点击它来替换为Flash电影。以下是示例:

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

到目前为止,这是一个黑客,但我和乔纳森·鲍特尔昨天晚上,在旧金山JavaScript MeTUP上,他很高兴能进一步研究这个想法。我的愿望清单:

  • 更大的预览图像
  • 休息美国石油学会以可读的方式给我这个信息的调用

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

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

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

标记

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





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





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





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





它们的意思是:

  • 金额n定义要显示的tweets数量,n为整数
  • 皮肤名称定义要使用的皮肤(目前为灰色和蓝色)
  • 用户信息定义用户的虚拟人物,应显示名称和位置。

剧本

这是完整的脚本,我们将逐一介绍这些位。

twitterBadge=function()
var CONFIG={
默认值:5,
徽章ID:'twitterbadge',
用户ID:'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 i=0;数据[i];i++)
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)
返回“不到一分钟前”;
否则,如果(delta<120)
返回“大约一分钟前”;
否则,如果(delta<(60*60))
return(parseInt(delta/60)).toString()+“分钟前”;
否则,如果(delta<(120*60))
返回“大约一小时前”;
否则,如果(delta<(24*60*60))
返回“about”+(parseInt(delta/3600)).toString()+“hours ago”;
否则,如果(delta<(48*60*60))
返回“1天前”;
}否则{
return(parseInt(delta/86400)).toString()+“天前”;
}

}
}

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

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

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

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


twitterBadge=function()
var CONFIG={
默认值:5,
徽章ID:'twitterbadge',
用户ID:'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);
}

然后我准备好了从课堂上阅读信息。我设置了一个文件头的快捷方式,并读取了要显示的tweets数量。如果没有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 i=0;数据[i];i++)
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);
}

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


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

}
}

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

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

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

下载并举例说明

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