必威体育下载基督教Heilmann

您目前正在浏览可用性类别的存档。必威体育简介

“可用性”类别的存档

必须死亡的接口——onchange选择框

周四,7月10日,2008

令人害怕的是,一些明显不好的实践拒绝消失,开发人员不使用更简单的替代方法,而是跨越重重障碍来保护它们并使它们发挥作用。

我最讨厌的是“象棋规则”选择框(你碰了它,它需要移动):

这是这个接口思想最邪恶的排列。一个较小的邪恶版本是一个大形体的一部分,它将改变形体的其余部分,或者——如果我们冒险回到更多的邪恶巢穴——提交它来反映这些变化。

这个接口的参数并不多:

  • 它为用户节省了按下提交按钮的步骤
  • 动作是即时的

(好吧,它们实际上是相同的,如果你知道的话,请留言。

这个解决方案的缺点是巨大的:

  • 使用键盘的人会提交表单,或者在没有选择正确选项的情况下离开页面。
  • 的人依赖于使用键盘进行web访问,您可能知道可以同时按下Alt+向下箭头键来展开整个下拉菜单,然后再使用向上和向下箭头进行选择并输入。
  • 大多数人都不知道这一点很多的人使用键盘和选项卡从一个字段到另一个字段填写表格。
  • 表格是我们这个时代的一大烦恼——没有人喜欢填表格。大多数时候,我们不会一直盯着屏幕而是查阅纸张上的信息,当然,我们的信用卡或者阅读那些不是在屏幕上而是在我们收到的那封信里的小字。
  • 我不知道这样的东西是如何与开关访问或语音识别一起工作的——可能不是
  • 它依赖于脚本——没有JavaScript,没有服务

后者实际上是一些公司不时使用这种方法的一个原因。在同一个页面上有太多的链接是不好的搜索引擎优化-谷歌认为你的网页不是内容,而是一个网站地图,并排名较低。这就是为什么一些公司开始提供前两个层次的导航作为链接,其余的作为下拉菜单的方式。

然而,这仍然不是一个好的解决方案,这仅仅意味着您为用户提供了太多的选项。

人们是这样做的:Aaron CannonWebAim邮件列表


我和一位同事最近设计了一种方法,使onchange下拉导航框的版本更易于访问。基本上,使用javascript时,我们确定他们是使用鼠标还是键盘来选择列表中的每一项。如果他们使用鼠标,它像往常一样工作,立即将它们带到所选页面。如果选择是由键盘做出的,我们显示一个转轮并延迟x秒。如果用户在这段时间内没有做出另一个选择,它们被带到所选的页面。如果他们这样做,时钟重新启动。

我不是在攻击艾伦,他可能被要求无论如何都要找到一个解决方案,并尽其所能找到一个技术性的方法。对我来说,最大的恐惧是“确定他们是在使用鼠标还是键盘”。我猜他们会检查事件类型,但是像语音识别这样的辅助技术必须模拟点击而不是鼠标。另一个危险信号是计时器和转轮——这使接口更加复杂(“正在加载吗?”)。

我只是不明白为什么我们总是试图让事情正常工作,因为这是设计规范说的,或者这是我们在其他地方看到的。如何真的与用户一起测试,看看会发生什么?

Opera Web标准课程是实时的!

周二,7月8日,2008

在过去的几个月里,Opera的Chris Mills忙着召集了很多优秀的web开发专家(有很多拉皮条的人)来编写可能是web上最全面和最新的web标准课程:Opera Web标准课程

数十篇文章,所有获得Creative Commons许可的内容都可以用于完成web开发的任务:从理解web的原则到Ajax交互。整个课程的重点是可用性,可访问性和编写可维护的代码。我们故意忽略了浏览器攻击和面向后的解决方案,并在渐进式增强和低调的JavaScript

我希望我开始的时候,这将为我节省大量的时间来学习坏的实践和取消它们(这总是一个痛苦的过必威体育下载程)。

所以,读它,用它来教年轻人绝地武士的标准:Opera Web标准课程

让YouTube更容易上载(更新12/06)

周四,6月12日,2008

警告:YouTubeAPI现在很脆弱,所以可能会有一些中断!

在今年的可访问性2.0会议上,来自伦敦的Antonia Hyde说美国的反应要求听众提供技术解决方案,使有学习障碍的人更容易访问社交网络。必威体育下载

她的演讲面向学习障碍人群的富媒体和web应用程序必威体育下载在slideshare上可用。

虽然不能解决所有提到的问题(可能最大的问题是字幕),我花了一些时间玩YouTubeAPI创建一个更简单的界面来观看视频。下面的截图显示了Easy YouTube播放器的运行情况:

轻松的YouTube播放器显示视频

使用播放器

你可以通过多种方式使用播放器,最简单的方法是在url字段中复制和粘贴一个youtube url。然而,还有一种休息界面,让你做更多:

http://icant.co.uk/easy-youtube/

显示播放器没有任何电影加载,空搜索字段和播放列表。

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=9i0-btCTdN8

预加载此YouTube地址的视频,并在播放器中显示预览图像。

http://icant.co.uk/easy-youtube/?search=panda

在YouTube上搜索术语panda,并在右边的播放列表中显示视频链接。你可以用一个以上的搜索词加上一个"”。例如:

http://icant.co.uk/easy-youtube/?search=red+panda

最后一个选项是将某些视频添加到书签中del . icio . us并为用户标记它们。为了将这些视频显示为播放列表,您需要提供您的用户名和以破折号分隔的标记。For example my user name on del.icio.us is "codepo8" and I bookmarked some videos with the tag "easyyoutubeplayer".下面的链接将在播放列表中显示它们:

http://icant.co.uk/easy-youtube/?tag=codepo8-foreasyyoutubeplayer

您可以混合和匹配不同的选项。例如,如果你想显示一个视频,并执行搜索其他视频,你可以使用:

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=3UgpfSp2t6k&search=accents

文档

完整的播放器文档以及如何自己托管播放器的说明可以在docs文件夹中找到轻松YouTube播放器文档

下载

你可以下载播放器与所有演示文件在这里:

变化

12/06/08

  • 完成代码的重写
  • 新的按钮——玻璃太复杂了
  • 新增视频大小控制
  • 增加了搜索和播放列表支持
  • 添加地址字段发送给朋友
  • 播放器现在模板驱动-没有更多的变化,在主要的代码需要
  • 添加文档
  • 添加RESTful接口

28/05/08

  • 将按钮移动到播放器底部
  • 文本现在在按钮下面,并有一个无形的额外“使用此按钮”文本屏幕阅读器
  • 暂停按钮现在切换暂停/播放
  • 静音按钮现在切换静音/声音
  • URL的按钮不是一个锚,而是一个url,但这只是读出正确的命令)
  • 删除“当前突出显示”状态
  • 添加了一个音量级别指示器(作为一个视觉条和一个隐藏的表单字段)

在栖息地筑篱笆——做正确的事情,但却把可达性搞错

星期六,4月26日,2008

这是我在……做的报告AbilityNet的可访问性2.0会议今天在伦敦。在本文中,我将讨论我们如何试图销售易访问性以及在此过程中所犯的错误。

我希望有一个很棒的Ajax API

周二,4月8日,2008

在苏格兰高地舞有趣的是,人们似乎还没有完全相信api的必要性以及它们在未来几年的web开发中所扮演的重要角色。我想这在一定程度上是基于使用api的经验,这些api并没有很好地向非极客解释,而且不一致或难以使用。只有在试图找到没有多少有趣的信息一点点如果所有你想做的是编写一些代码(除非你有老学校黑客/饼干的头脑和不考虑花上几个小时看着hexdumps试图找到一个方法来得到无尽的住在一个游戏浪费时间)。

在我面试Paul Boag在我指出,设计一个好的API与设计任何其他用户界面(包括web页面)一样重要。加雷思Rushgrove在他精彩的演讲中同意了如何成为一流的网络公民。我还指出,在这个问题上缺乏清晰和容易的教程和文章,所以我决定现在就试一试。

设计一个很棒的AjaxAPI

作为一个例子,我将使用最近发布的谷歌翻译API,指出它的优点,列出我认为缺少的东西。我就不写了API而是解释为什么我认为缺失的部分很重要。这不是对谷歌的攻击,我真的很喜欢做这个API想让它更容易使用,所以不要难过,我真的脱帽向你致敬API像这样!

当我们在JavaScript中讨论Ajax api时,我认为以下几点非常重要(Ajax暗示了这一点,但是您会惊讶地发现aREST API广告宣传为Ajax):

  • 好的文档
  • 使用例子复制+粘贴
  • 模块化
  • 将结果链接到条目
  • 提供灵活的输入
  • 允许自定义对象传输
  • 覆盖可用性基础

文档和演示

让我们从一个积极的方面开始Google Ajax语言API是伟大的。您在一个页面上拥有所需的所有信息,包括复制和粘贴示例。这允许你通过API在网上,离线阅读,甚至可以打印出来,在拥挤的公交车上阅读,而不必拿出笔记本电脑。

提示如果你提供的是复制和粘贴的例子——这是你应该做的,因为这是人们做的第一步——确保他们工作!我在必威体育下载书中得到了惨痛的教训JavaScript开始与DOMAjax脚本和没有什么比展示代码片段而不是完整的例子更危险的了——人们会复制和粘贴脚本的部分,试着运行它,然后发邮件告诉你你的代码被破坏了,或者更糟的是,在亚马逊的书评中抱怨。如果你提供复制和粘贴的例子,确保他们都独立工作。

谷歌提供解释API是,你能用它做什么,所有参数的列表以及它们的含义。这对于第一眼看到它的用户来说非常棒。对于铁杆读者,它们还提供了类参考。

使用的例子

第一个代码示例非常好,你可以复制粘贴它,如果你的电脑连上了互联网,它就能工作,如果HTML有一些修正。

首先它缺少a文档类型,哪一个有点恼人,因为它是一个非常重要的部分HTML文档。更重要的一点是没有设置编码。的生活例子版本两者都有-有点讨厌,特别是当我们谈论不同的语言时,以传统汉语为例,正确的编码是必须的。

(注意:具有讽刺意味的,wordpress似乎因为某些原因做得不对…)







??????????



提示:确保您向人们解释您的代码示例需要internet连接和其他依赖项(如require)HTTP因此必须在本地服务器上运行)。JavaScript历史上除了浏览器没有其他依赖,这种情况最近发生了变化,可能令人困惑,特别是在幕后使用Ajax时,就像Flash/Ajax api所做的那样!

模块化是好!

第一个在某种程度上让我感到困惑的是google.load(“语言”,“1”)线,但是有一个直接的解释。

第一个脚本包含加载一个泛型Google AjaxAPI有一个load()方法添加其他,较小的api构建在此之上。在这种情况下,这行代码意味着您希望加载该语言API版本1。

这看起来很笨拙,你会得到不好的反馈(似乎没有什么比一个包含解决方案的脚本更好的了),但实际上是相当聪明的。

通过模块化基础库中的Ajax代码更改核心功能将被要求实现者容易,包括他所需要的api版本号你可以让它实现者升级的选择,而不是打破旧的实现或携带的重量完全向后兼容。

是的,最理想的情况是,您永远不必更改您的功能API-添加新功能-但在现实世界中,不断的变化将使你有必要打乱原有的API。不存在为永恒而构建的完美代码。在基中使用加载器函数API也很聪明,因为这意味着实现者不需要更改url。

进去的东西应该出来。

这就是谷歌造成问题的地方。这两个google.language.detect ()google.language.translate ()方法非常酷,因为它们提供了发送字符串和定义回调方法的功能API返回一个值。然而,在这两种情况下,返回的对象都给出一个结果和状态代码,但不是输入的。你会得到各种各样的其他信息类文档),但拥有原始条目将非常有用。

为什么?Ajax的伟大之处在于它是异步的,这也是它的弱点。这意味着我可以在后台并行发送大量请求,并等待结果。然而,这并不意味着请求也以正确的顺序返回!

这意味着,如果你想循环一组要翻译的文本,以下是一种不安全的做法:

var翻译=['一',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',‘九’,‘十’);
var gtl = google.language.translate;
(var = 0, j = translations.length; i gtl(翻译[我],“en”,“德”,函数(结果){
如果(! result.error) {
var container = document.getElementById(' translation');
container.innerHTML += result.translation;
}

});
}

相反,您需要将数组计数器的增量包装在递归函数中:

var翻译=['一',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',‘九’,‘十’);
var gtl = google.language.translate;
var = 0;
函数doTranslation () {
var gtl = google.language.translate;
如果翻译[我]){
gtl(翻译(我),“嗯”,“德”,函数(结果){
如果(! result.error) {
var container = document.getElementById(' translation');
container.innerHTML += result.translation;
我+ +;
doTranslation ();
}

});
}

}
doTranslation ();

这是安全的,但是我们失去了让多个连接并行运行从而更快地获得结果的机会。如果结果是API电话里有原文,事情会更简单,例如,我们可以填充一个result对象,然后用这种方式将正确的请求与正确的结果匹配:

var翻译=['一',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',‘九’,‘十’);
var gtl = google.language.translate;
var结果= {};
(var = 0, j = translations.length; i gtl(翻译[我],“en”,“德”,函数(结果){
如果(! result.error) {
results[result.input] = result.translation;
}

});
}

更简单的是传递一个事务ID,它可以是循环的计数器。当然,另一个选择是允许输入的数据具有更大的灵活性。

提供灵活的输入

输入文本与结果的匹配和事务ID的匹配仍然意味着对API,这并不是很好,因为它既要花钱,又会对服务器和客户端造成同样的打击。一个更简单的选项是,不仅允许字符串作为文本参数,还允许字符串数组作为文本参数。然后返回的结果也会变成一个数组,调用翻译引擎的大量开销会在服务器上通过一次调用来完成,而不是大量调用API调用。

这不难做到,大多数JavaScript框架方法都是这样工作的,通过检查第一个参数的类型并相应地进行分支。您甚至可以更进一步,允许实现人员将自己定制的对象作为第三个参数发送。

传输自定义对象允许实现者编写更少的代码

的好处是,您可以添加更多的参数API只对实现进行特定的调用。这很可能是对名称空间的引用,以避免重复冗长的方法名或全局变量。您可以从提供任何Ajax调用在可用性方面都有意义的参数开始。

考虑Ajax可用性

任何Ajax调用都应该为用户提供的主要功能是超时。没有什么比得到一个拥有更多交互界面的全新Ajax世界的承诺,却被困在旋转的轮子上,或者更糟糕的是点击链接却一无所获更令人失望的了。现在的语言API没有这样的东西,你必须用手滚动一个解。您还必须检查错误状态代码,以查看是否无法检索数据,并以这种方式调用连接的失败案例。

一个很好的API会给我这些选择,很可能都滚入了一个参数对象。

我的梦想翻译API

把所有这些考虑在内,它将是完美的API提供这些选择:

google.language.translate(输入、参数);

参数是:


输入//字符串或数组
具有以下属性的参数//对象
sourceLanguage:字符串,
开发:字符串,
transactionId:字符串,
customparameters:对象,/ /运输
超时:整数,/ /(以毫秒为单位)
失败:函数(因此,params),//(超时或错误时调用的方法)
成功:函数(因此,params),//(一切正常时调用的方法)

的返回数据API应该提供结果和参数。这将使实现者的生活非常容易。

总结

总之,下面是我对一个伟大的Ajax的期望API:

  • 有一个很好的文档,有完整的类文档支持的即时复制和粘贴的例子吗
  • 构建模块化的api,并允许实现者选择他们想要的版本
  • 提供一个钩子来链接。的结果API方法输入初始数据。最简单的方法是重复这些数据,更复杂的是允许连接ID。
  • 允许发送多个值,它会节省你API调用和实现者破解了返回顺序不可靠的问题。
  • 允许实现者添加一个自己的对象来发送和返回,以允许名称空间和其他数据状态保留。
  • 允许超时,连接是不可信的。

这是一项正在进行的工作

我希望你们在这里找到了一些可以认同的东西如果你们知道要补充的东西,留下评论。