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

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

6月存档,二千零九

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

星期一,6月29日,二千零九

关于密码字段屏蔽和Jakob Nielsen

星期五,6月26日,二千零九

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

他的论点如下:

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

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

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

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

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

密码淋浴油猴脚本由你。

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

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

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

周四,6月25日,二千零九

这让我今天早上很开心:

在移动浏览器上与PPK聊天,标准支持,测试,会议等

星期三,6月24日,二千零九

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

PPK上的移动浏览器由你。

后来我有机会带他出去吃午饭,并对他的发现进行了简短的交谈,他对图书馆使用的看法,我们可以做些什么来更好地宣传Web标准以及我们认为有必要讨论的其他许多事情。有些事情很有趣,例如,如果通过创建5000个li元素或使用嵌入到iFrAMES

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

[音频:http://www.archive.org/download/interviewwithppkaboutmobilewebdevelopment/interviewppkaboutmobilesearchwebstandardsandlibraries.mp3]

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

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

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

星期二,6月23日,二千零九

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

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

折叠菜单的例子由你。

按图像至转到实况示例

标记

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


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

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

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

思考太复杂

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




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



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

把所有的表演和隐藏都留给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.目标;
如果(t.nodeName.toLowerCase()= = =“按钮”){

//拿到按钮所在的位置
var mom=t.parentnode.parentnode;

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

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

}

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

},是真的;
}

})

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

隐藏不是移除

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

变通的诀窍是改变TAB顺序元素的属性。一个值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 i=0;uls[i];i++){
如果(uls[i].parentnode.classname!“打开”& &
uls[i].parentnode.classname!=“当前”){
var as = uls[i].getElementsByTagName(' a');
禁忌(as,-1);
}

}

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

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

//拿到按钮所在的位置
var mom=t.parentnode.parentnode;

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

如果(mom.className ! = =‘当前’){
if(mom.classname='打开'){
mom.classname='';
禁忌(as,-1);
}否则{
mom.classname='打开';
禁忌(as,-1);
}

}

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

},是真的;
}

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

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

}
})

这个第三个演示就是这样的–使用键盘,当子部分折叠时,可以从父元素切换到父元素。

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

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



良好开端

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