必威体育下载基督教Heilmann

您当前正在浏览的是必威体育下载基督教Heilmann六月份的博必威体育简介客档案,2009。

归档6月份,2009

TTMMHTM:容易修复一切,盗版HTML5,iPod vs。随身听,哈勃数据与宣传

周一,6月29日,2009

关于密码字段屏蔽和Jakob Nielsen

星期五,6月26日,2009

Jakob Nielsen刚刚在AlertBox上发布了我们应该停止密码屏蔽(你知道,显示星号或圆点,而不是在用户键入密码时显示密码。

他的论点如下:

大多数网站(和许多其他应用程序)在用户输入密码时都会屏蔽密码,从而理论上防止不法分子监视用户的肩膀。当然,一个真正熟练的罪犯只需看一下键盘就能知道按的是哪个键。所以,密码屏蔽甚至不能完全防止窥探者。
更重要的是,当你登录一个网站时,通常没有人在你身后看着你。只是你,独自坐在办公室里,降低可用性以防止非问题。

这让我想知道尼尔森先生最后一次离开家和现实世界交流是什么时候。作为一个经常旅行的人,我经常看到人们登录酒店大堂的网站(例如,当他们登记航班并输入他们的奖励里程账户详细信息时)。在网吧或在公共场所使用笔记本电脑时。虽然很难认出键盘(尤其是打字速度很快的键盘),但从他们的肩膀上看过去,或者使用我的10倍光学变焦相机,甚至能认出他们从房间另一头进入屏幕的内容,都没有问题。

然而,密码屏蔽不是一个100%的安全措施,但是任何在安全工作的人向你保证100%的安全是任何你应该信任的人。

我同意密码屏蔽在移动设备上是很烦人的,就像输入任何表单一样(我最喜欢的bug是Opera Mini,它是我在任何文本字段中输入的第一个单词——不,不是这个。我的用户名,不是句子)。

因为我每隔几周就会更换一次密码,所以我有时会感到困惑,同样,这就是为什么我写了aGreaseMonkey脚本,它向允许我切换其显示的任何密码字段添加链接

密码淋浴greasemonkey脚本由您。

这个,在我的书中,这应该是浏览器的一个标准特性(或者我们在设计表单时应该遵循的一种惯例)——不要仅仅因为我们认为没有人会看我们,就在屏幕上以可读文本的形式显示敏感信息。

我们也不要忘记,浏览器处理密码类型的输入字段与处理文本类型的输入字段是不同的。对于初学者来说,浏览器不会收集以前输入的信息,并将其作为自动填充字段的选项提供——这对于密码来说是非常危险的。

TTMMHTM:宗教鲁兹,60年代的计算机实验室,盲人狗和触摸屏,新的英国电源插头和坏孩子

周四,6月25日,2009

这让我今天早上很开心:

与ppk手机浏览器聊天,标准支持,测试,会议和更多

星期三,6月24日,2009

今天PPK来参观我们在科文特花园的办公室,伦敦向我们介绍他对移动浏览器的研究和测试
移动设备。

PPK上的移动浏览器由你。

后来我有机会带他出去吃午饭,并对他的发现进行了简短的交谈,他对图书馆使用的看法,我们可以做些什么来更好地倡导web标准,以及我们认为有必要讨论的许多其他事情。有些事情很有趣,例如,如果通过创建5000 LI元素或在嵌入的单个文档中使用每个JS库来测试浏览器性能确实有意义的话iFrAMES

下面是半个小时的公开面试,你可以听听:

(音频:http://www.archive.org/download/InterviewWithPpkAboutMobileWebDevelopment/InterviewingPpkAboutMobileResearchWebStandardsAndLibraries.mp3)

另外转到archive.org网站下载MP3播放器的音频

可悲的是,我的勇气不够,有些采访失败了,但我非常喜欢谈论这些话题,每当有人过来谈话时,我都会继续做这种快速采访。

创建可访问的javascript菜单系统——一些被遗忘的基本步骤

周二,6月23日2009

好啊,所以你想写另一个折叠菜单/部分/小工具thingamabob。这真的很简单,在下面的几个例子中,我想指出一些想法,使它更容易为你。

下面是我们将要建立的-它没有任何铃铛和口哨像流畅的动画,随机独角兽,发出的嗖嗖声或者其他你可能会想到的声音,但这是一个很好的坚实的基础。

折叠菜单的例子由你。

按图像至去看现场的例子

标记

第一个技巧是为小部件使用易于理解和高度可样式化的标记。你会看到很多小部件都在使用无止尽的div,温泉Ns,每个元素上的id和每个子元素上的类。如果您构建的是一个简单的解决方案(而不是框架的一部分的可重用小部件),则不需要这些。在这种情况下,标记如下:


换句话说:包含不同部分标题的嵌套列表。这在没有样式化和脚本编写的情况下是有意义的,这对于关闭了JavaScript的移动设备或环境来说仍然是非常重要的一点(是的,它们不是神话,但确实存在。

辅助访问并不意味着缺少JavaScript

人们所犯的第一个错误是认为这就是你所需要的——因为使用辅助技术的用户没有JavaScript,正确的?错了。辅助技术不是浏览器的替代品,但在大多数情况下,它与浏览器功能挂钩,并提供更容易的访问。换句话说,浏览器所获得的辅助技术所获得的,您必须确保在没有鼠标的情况下仍然有意义(仅举一个例子)。

思想太复杂

人们采取的下一个额外步骤是开始循环使用菜单构造来用JavaScript隐藏元素。使用不使用DOM那样做,但是背上CSS选档发动机,但永远IE6这仍然不是一个选择。你不需要这么做。为了在上面的例子中隐藏嵌套的列表,您所需要做的就是将一个类应用于主列表并将其余的留给它CSS




这意味着为了显示任何嵌套列表,您所需要做的就是向父列表项添加一个名为“open”的类。这个CSS取消隐藏如下:



您可以在呈现页面时在后端添加类,这比任何javascript分析页面的当前打开部分更有意义。window.location或其他欺诈行为。见第一阶段演示。您还可以定义一个“current”类,这意味着您可以以不同的方式对其进行样式设置,脚本只需简单地跳过该部分,而不会折叠它。

把所有的表演和隐藏都留给CSS。当然你不能在CSS(除非你使用webkit),但是你可以让你的动画先于类的变化。

隐藏和显示

因此,显示和隐藏事物的方法就是简单地添加和删除类。我们需要使用事件处理来监听单击事件来实现这一点。单击事件是唯一安全的,因为它们使用键盘和鼠标触发。问题是标题可以被点击,但键盘无法访问。为了解决这个问题,让我们使用DOM在头中插入按钮元素的脚本。您可以使用CSS让它看起来不像一个按钮:



第二阶段演示展示它是如何工作的,下面是代码。


(函数(){

//获取菜单并确保它存在
var m=document.getElementByID(“menu”);
如果(m){

//添加一个类来允许CSS神奇的发生
m.classname='js';

//循环所有头
var headers=m.getElementsByTagname('h3');
对于(var i=0;headers[i];i++)
//获取当前头的内容
var content=headers[i].innerhtml;
//创建按钮,删除标题的内容
//将其替换为按钮,并将内容设置为
//缓存的头内容
var a = document.createElement(' button');
头[i].innerhtml='';
头[我].appendChild(一个);
a.innerhtml=内容;
}

//对菜单应用单击事件
m.addEventListener('单击',函数(e)

//找到事件目标,并确认它是一个按钮
var t = e.target;
如果(t.nodeName.toLowerCase() = = =“按钮”){

//得到按钮所在的位置
var mom = t.parentNode.parentNode;

//检查它的类名是否为content和
//删除open类,如果它存在,其他的
//添加打开的类

如果(mom.className ! = =‘当前’){
if(mom.classname='open')
mom.classname='';
}否则{
mom.classname='打开';
}

}

//不要做按钮通常做的事情
e.preventDefault();
}

},真正的);
}

})()

此代码还利用了事件的代表团–因此不需要对每个标题应用和事件处理程序,即使这对于库和()批次()命令。事件处理是一个伟大的概念,当您费心阅读文档时,您会发现其中的技巧是惊人的。

隐藏不是移除

这是大多数菜单脚本停止的地方。伟大的东西,它膨胀和崩溃,每个人都很高兴。除非你是一个不开心的家伙,你需要用键盘或者旧的移动设备来访问它。你自己试试吧使用第二个例子从一个链接到另一个链接。您将发现必须通过不可见的链接来切换到下一个要打开或隐藏的部分。这肯定不是主意,正确的?

变通的诀窍是改变tabindex元素的属性。的值1将从选项卡顺序中删除它,并将其设置为0将使它们再次可用。所以,为了使键盘访问更容易,让我们先删除制表符订单,然后再重新设置在显示和隐藏菜单时设置或删除它。这是非常烦人的,因为我们必须循环通过链接。我讨厌循环,但是浏览器不是我们的朋友。


(函数(){

//获取菜单并确保它存在
var m=document.getElementByID(“menu”);
如果(m){

//添加一个类来允许CSS神奇的发生
m.classname='js';

//循环所有头
var headers=m.getElementsByTagname('h3');
对于(var i=0;headers[i];i++)
//获取当前头的内容
var content=headers[i].innerhtml;
//创建按钮,删除标题的内容
//将其替换为按钮,并将内容设置为
//缓存的头内容
var a = document.createElement(' button');
头[i].innerhtml='';
头[我].appendChild(一个);
a.innerhtml=内容;
}

//循环所有嵌套列表
//并将嵌套链接的制表顺序设置为-1
//从选项卡中删除它们

var uls=m.getElementsByTagname(“ul”);
(var = 0;极限状态[我];我+ +){
if(uls[i].parentNode.className!‘open' &&
uls[i].parentnode.classname!=“当前”){
var as = uls[i].getElementsByTagName(' a');
tabOrder(1);
}

}

//对菜单应用单击事件
m.addEventListener('单击',函数(e)

//找到事件目标,并确认它是一个按钮
var t = e.target;
如果(t.nodeName.toLowerCase() = = =“按钮”){

//得到按钮所在的位置
var mom = t.parentNode.parentNode;

//检查它的类名是否为content和
//删除open类,如果它存在,其他的
//添加一个打开的类。同时,删除或添加
//标签顺序的链接

如果(mom.className ! = =‘当前’){
if(mom.classname='open')
mom.classname='';
tabOrder(1);
}否则{
mom.classname='打开';
tabOrder(1);
}

}

//不要做按钮通常做的事情
e.preventDefault();
}

},真正的);
}

//从选项卡顺序中删除或添加元素

函数tabOrder(榆树、索引){
对于(var i=0;elms[i];i++)
elms[i].tabindex=索引;
}

}
})()

这个第三个演示就是这样的-使用您的键盘,并惊叹于能够tab从父元素到父元素时,子部分是折叠的。

修复它Internet Explorer 6和7坏老的浏览器

现在,这一切都很好,但当然,我们需要修复代码,以解决浏览器不理解的怪癖W3C事件模型或考虑具有的名字属性与与相同id。我们可以在这里的代码中,但坦率地说,我已经厌倦了。人们给我们提供图书馆来解决浏览器差异让我们的生活更容易。这就是为什么我们可以使用YUI例如,跨浏览器可靠地工作



良好开端

这仅仅是一个开始。一个真正的菜单还应该支持所有类型的键,像这样的菜单在一个真正的应用程序中给我们,并通知屏幕阅读器所有发生的事情。为此,我们需要咏叹调。现在,我很高兴在这里得到一些评论:)