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

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

“可用性”类别的存档

必须关闭的接口–onchange选择框

星期四,7月10日,二千零八

很可怕的是,一些明显不好的实践拒绝消失,开发人员为了保护它们,让它们工作,而不是使用简单的替代方法。

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

这是这个界面概念中最邪恶的排列。一个较小的邪恶版本是一个大型表单的一部分,它将改变表单的其余部分,或者——如果我们冒险回到更邪恶的巢穴中去——提交它来反映这些变化。

此接口的参数不多:

  • 它保存了用户按提交按钮的一个步骤
  • 行动迅速

(好的,这实际上是同一个论点,如果您知道一些,请发表评论。)

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

  • 使用键盘的人将提交表单或离开页面,而没有选择正确的选项。
  • 那些依赖于使用键盘进行Web访问,您可能会知道,在选择“上下箭头”和“回车”之前,可以同时按Alt+向下箭头键展开整个下拉列表。
  • 但大多数人都不知道这一点,许多很多人使用键盘和标签来填写表格。
  • 表格是我们这个时代的一大烦恼——没人喜欢填表格。大多数时候,我们不会一直盯着屏幕,而是在纸上查找信息,我们的信用卡或者读一读我们收到的那封信上的印刷品——当然——不在屏幕上。
  • 我不知道这样的东西是如何与交换机接入或语音识别一起工作的——可能不是。
  • 它依赖于脚本——没有javascript,没有服务

后者实际上是一些公司不时使用它的原因。同一页上的链接太多对SEO-谷歌认为你的网页不是内容,而是一个网站地图,排名较低。这就是为什么有些公司开始提供前两个级别的导航作为链接,其余的作为下拉列表以这种方式。

然而,这仍然不能使他们成为一个好的解决方案,这仅仅意味着你为你的用户提供了太多的选择。

下面是人们做的工作:亚伦大炮WebAIM邮件列表


我和一个同事最近设计了一种方法,使OnChange下拉式导航框的版本更容易访问。基本上,使用javascript,我们确定他们是使用鼠标还是键盘来选择列表中的每个项目。如果他们用老鼠,它照常工作,立即将它们带到所选页面。但是,如果选择是由键盘进行的,我们显示一个微调器并延迟x秒数。如果用户在该时间内没有进行其他选择,它们将被带到所选的页面。如果他们这样做了,时钟重新启动。

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

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

Opera Web标准课程是实时的!

星期二,7月8日,二千零八

在过去的几个月里,来自Opera的Chris Mills正忙着召集他身边的许多优秀的Web开发专家(你的很多人真的很喜欢拉皮条),以便在Web上组装最全面和最新的Web标准课程:Opera Web标准课程

几十篇文章,所有获得Creative Commons许可的软件都将用于涵盖Web开发的任务:从理解Web的原理到Ajax交互。在整个过程中,主要关注的是可用性,可访问性和可维护代码的编写。我们故意忽略了浏览器黑客和后向解决方案,并基于渐进增强和不引人注目的javascript.

我真希望我刚开始的时候这个就不在了,这会节省我很多时间去学习坏的实践和不去学习它们(这总是一个痛苦的过必威体育下载程)。

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

使YouTube更容易和更容易访问(2006年12月更新)

星期四,6月12日,二千零八

警告:YouTube美国石油学会现在很脆弱,所以可能会有一些中断!

在今年伦敦举行的2.0会议上,联合反应要求观众提供技术解决方案,使学习障碍人士更容易访问社交网站。必威体育下载

她的陈述针对学习障碍人士的富媒体和Web应用程序必威体育下载在Slideshare上提供。

虽然不能解决所有提到的问题(可能是最大的问题是字幕),但我花了一些时间在YouTube上玩。美国石油学会创建一个更容易观看视频的界面。下面的屏幕截图显示了操作简便的YouTube播放器:

显示视频的简易YouTube播放器

使用播放器

你可以通过多种方式使用播放器,最简单的方法是在URL字段中复制并粘贴YouTube URL。然而,还有一种休息允许您执行更多操作的界面:

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

显示未加载任何电影的播放机,空搜索字段和播放列表。

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?V= 9IO-BTCTDN8

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

http://icant.co.uk/easy-youtube/?搜索=熊猫

在YouTube上搜索术语panda,并在右侧显示播放列表中视频的链接。您可以使用多个搜索词,方法是将它们添加到““。例如:

http://icant.co.uk/easy-youtube/?搜索=红色+熊猫

最后一个选择是将某些视频加入书签书签并为用户标记它们。为了将这些视频显示为播放列表,您需要提供用户名和用破折号分隔的标签。例如,del.icio.us上的用户名是“codepo8”,我用“easyoutubeplayer”标记了一些视频。以下链接将在播放列表中全部显示:

http://icant.co.uk/easy-youtube/?tag=codepo8用于Youtubeplayer

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

http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=3ugpfsp2t6k&search=重音符号

文档

在docs文件夹中提供完整的播放器文档,其中包含如何自己托管播放器的说明。简易YouTube播放器文档.

下载

您可以在这里下载带有所有演示文件的播放器:

变化

12/06/08

  • 完成代码重写
  • 新纽扣——玻璃太复杂了
  • 添加了视频大小控件
  • 添加搜索和播放列表支持
  • 添加了要发送给朋友的地址字段
  • 播放器现在由模板驱动-不需要对主代码进行更多更改
  • 添加的文档
  • 补充皇家经济学会TFUL接口

28/05/08

  • 将按钮移动到播放机底部
  • 文本现在位于按钮下方,并具有一个不可见的额外“使用此按钮”文本,用于屏幕阅读器
  • 暂停按钮现在切换暂停/播放
  • 静音按钮现在切换静音/声音
  • 这个统一资源定位地址按钮中的不是锚,而是一个URL(没有任何作用,但这只是为了读出正确的命令)
  • 删除了“当前突出显示”状态
  • 添加了音量指示器(作为可视栏和隐藏窗体字段)

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

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

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

我想要一个伟大的Ajax API

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

从…回来高地放荡有趣的是,人们似乎还不太相信API的必要性,以及在未来几年的Web开发中所扮演的重要角色。我想这部分是基于API的经验,这些经验没有正确地解释给非极客,不一致或难以使用。如果你只想写一些代码,那么一点一点地寻找信息就没有多大乐趣了(除非你有老派的黑客/黑客头脑,并且没有考虑花几个小时去看HexDumps,试图找到一种在游戏中获得无尽生命的方法,这是浪费时间)。

在我接受采访时保罗博格在我指出设计一个好美国石油学会与设计任何其他用户界面(包括网页)一样重要。加雷斯·拉什格罗夫在他精彩的谈话中同意了如何成为一流的网络公民.我还指出,这方面缺乏清晰易懂的教程和文章,所以我决定现在就试试看。

设计一个伟大的Ajax美国石油学会

作为一个例子,我将使用最近发布的谷歌翻译美国石油学会,指出它的好部分,列出我认为遗漏的东西。我不会去写美国石油学会但要解释为什么我认为缺失的部分很重要。这不是对谷歌的攻击,我只是很喜欢和这个一起工作美国石油学会想让它更容易使用,所以没有什么不好的感觉,我真的脱掉了你给我的帽子美国石油学会像那样!

以下是我在讨论JavaScript中的Ajax API时认为重要的几点(Ajax意味着这一点,但您会惊讶于REST API作为Ajax发布):

  • 良好的文件
  • 复制粘贴示例
  • 模块性
  • 将结果链接到条目
  • 提供灵活的输入
  • 允许自定义对象运输
  • 涵盖可用性基础知识

文件和陈述

让我们从一个积极的开始:文档谷歌Ajax语言美国石油学会很棒。您在一个页面上拥有所需的所有信息,包括复制和粘贴示例。这使您可以通过美国石油学会在线,离线阅读,甚至打印出来在拥挤的公交车上阅读,而不必拿出你的笔记本电脑。

小费:如果您提供复制和粘贴示例(无论如何,您应该这样做,因为这是人们作为第一步所做的),请确保它们工作正常!我在必威体育下载书中学到了艰辛的方法开始使用javascript国内脚本和Ajax没有什么比展示代码片段而不是完整的示例更危险的了——人们会复制和粘贴部分脚本,试着运行它,或者通过电子邮件告诉你你的代码被破坏了,或者更糟的是,在亚马逊的书评中抱怨。如果您提供复制和粘贴示例,请确保所有示例都独立工作。

谷歌提供解释什么美国石油学会是,你能用它做什么?所有参数及其含义的列表。这对于初次浏览的用户来说非常好。对于核心读者,他们也提供了一个课堂参考。

使用实例

第一个代码示例非常好,你可以复制和粘贴它,如果你的电脑连接到互联网,它会工作,或者它会工作,如果HTML得到了一些修正。

首先,它缺少文档类型,这有点烦人,因为它是HTML文件。更重要的一点是没有设置编码。这个实时示例版本两者都有点麻烦,尤其是当我们谈论不同的语言,以繁体中文为例时,必须使用正确的编码。

(注:讽刺的是,看来WordPress做得不好是因为某些原因…)







??????????????



提示:确保向人们解释您的代码示例需要Internet连接和其他依赖项(如超文本传输协议因此必须在本地服务器上运行)。Javascript历史上除了浏览器没有其他依赖项,这是最近发生的变化,可能会令人困惑,尤其是当您在后台使用Ajax时,比如某些flash/Ajax API!

模块化好!

在某种程度上让我感到不安的第一点是google.load(“语言”,“1”)线,但是有一个直接的解释它意味着什么。

第一个脚本包括加载泛型谷歌AJAX美国石油学会有一个加载()方法添加其他,较小的API构建在这个之上。在这种情况下,行意味着您要加载语言美国石油学会版本号为1的。

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

通过在基本库中模块化Ajax代码,对核心功能的更改将很容易,并且通过要求实现者将所需的API包含在版本号中,您可以让实现者选择升级,而不是破坏旧的实现,或者必须承载完全向后兼容性的重量。

对,完美的世界场景是你永远不需要改变你的功能美国石油学会-只需添加新功能——但在现实世界中,会有不断的变化,使您有必要与原始的美国石油学会.没有完美的代码是为永恒而建立的。在基础中使用加载器函数美国石油学会也相当聪明,因为这意味着实现者不需要更改URL。

进去的东西应该出来。

这就是谷歌制造问题的地方。两个google.language.detect()。以及google.language.translate()。方法非常酷,因为它们提供发送字符串和定义回调方法,当美国石油学会返回一个值。然而,两种情况下返回的对象都会给出结果和状态代码,但不是输入的内容。您可以获得各种其他信息(如类文档)但是有原始条目是非常有用的。

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

这意味着如果你想循环一系列的文本来翻译,以下是一种不安全的方法:

var translations=['one'、'two'、'three'、'four'、'five'、'six'、'seven'、'eight'、'nine'、'ten'];
var gtl=google.language.translate;
对于(var i=0,j=translations.length;i GTL(翻译[i]、'en'、'de'、函数(结果){
如果(!)结果.错误){
var container=document.getElementByID(“translation”);
container.innerhtml+=结果.translation;
}

})(二)
}

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

var translations=['one'、'two'、'three'、'four'、'five'、'six'、'seven'、'eight'、'nine'、'ten'];
var gtl=google.language.translate;
var i=0;
函数doTranslation()。{
var gtl=google.language.translate;
如果(翻译[I])。{
GTL(翻译[I],“恩”“de”,功能(结果){
如果(!)结果.错误){
var container=document.getElementByID(“translation”);
container.innerhtml+=结果.translation;
I++;
doTranslation();
}

})(二)
}

}
doTranslation();

这样比较安全,但是我们失去了并行运行多个连接的机会,从而更快地获得结果。如果结果美国石油学会呼叫中包含原始文本,事情会更容易,例如,我们可以填充一个结果对象,并以这种方式将正确的请求与正确的结果匹配:

var translations=['one'、'two'、'three'、'four'、'five'、'six'、'seven'、'eight'、'nine'、'ten'];
var gtl=google.language.translate;
var结果=
对于(var i=0,j=translations.length;i GTL(翻译[i]、'en'、'de'、函数(结果){
如果(!)结果.错误){
results[result.input]=result.translation;
}

})(二)
}

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

提供灵活的输入

输入文本与结果和事务ID的匹配仍然意味着对美国石油学会,这真的不太好,因为它需要钱,而且会像打击服务器和客户机一样。一个更简单的选项是,不仅允许将字符串作为文本参数,还允许使用字符串数组。然后,返回也将成为一个数组,调用翻译引擎的大量开销将在服务器上通过一次调用完成,而不是通过大量调用美国石油学会电话。

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

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

自定义对象进出的好处是可以向美国石油学会仅特定于实现的调用。很可能这是对命名空间的引用,以避免重复长方法名或全局变量。可以从可用性的角度出发,提供对任何Ajax调用都有意义的参数。

思考Ajax的可用性

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

一个不错的美国石油学会会给我这些选择,很可能所有这些都在一个参数对象中滚动。

我的梦想翻译美国石油学会

考虑到所有这些,最好是美国石油学会要提供这些选项:

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

参数为:


输入//字符串或数组
参数//具有以下属性的对象
源语言:字符串,
目标语言:字符串,
transactionid:字符串,
自定义参数:对象,/运输
超时:整数,//(毫秒)
失败:函数(结果,参数)//(出现超时或错误时要调用的方法)
成功:函数(结果,参数)//(当一切正常时调用的方法)

返回的数据来自美国石油学会应同时提供结果和参数。这将使实现者的生活变得非常容易。

总结

总之,这是我对伟大的阿贾克斯的期望美国石油学会

  • 有一个良好的文档,立即复制和粘贴示例,并由完整的类文档进行备份
  • 构建您的API模块化,并允许实现者选择他们想要的版本
  • 提供挂钩以链接美国石油学会方法获取输入的初始数据。最简单的方法是重复这些数据,更复杂的是允许连接ID。
  • 允许通过发送多个值,它会救你的美国石油学会调用和实现人员围绕不可靠的返回顺序问题进行黑客攻击。
  • 允许实现者添加要发送的自己的对象,然后返回以允许名称间距和其他数据状态保留。
  • 允许超时,不信任连接。

这是一项正在进行的工作

我希望你能在这里找到一些符合的东西,如果你知道要补充的东西,只需发表评论。