走走停停看看 » 其他

禁用脚本时显示元素——再从前端角度浅谈产品设计中的可用性和可访问性

Shawphy — Mon, 27 Apr 2009 17:44:17 +0000

三个月前，老鱼在其博客和支付宝UED博客中发表了浅谈产品设计中的可用性和可访问性。
文中阐述了这样一种状况，页面上有元素需要暂时隐藏以避免过多的信息对用户产生干扰。而隐藏的信息需要通过脚本的交互显示出来，以增强可用性。那么对于不启用脚本的用户，如何保证可访问性的问题。
文中提到两种方案：

实现方案1：采用css样式设置企业注册信息的容器默认为隐藏，当用户点选企业后通过js脚本改变容器的隐藏属性为显示。
实现方案2：通过脚本控制企业注册信息的容器的初始状态为隐藏，当用户点选企业后通过脚本改变容器的隐藏属性为显示。

方案一的缺点在于无视可访问性
方案二的缺点在于“要在页面结构加载完成后，再去初始化要隐藏的容器，当客户端网速不佳的情况下，会先显示企业注册信息的内容，几秒后又不见了，体验上有所折扣。”

我又在文章的一楼评论中提出了两个方案：解决了第二个方案的缺点

实现方案3：把脚本直接紧跟着需要隐藏的元素后面
实现方案4：在页面头部最开始的地方写入脚本，这个脚本用于生成隐藏元素的css代码。

方案三的缺点在于结构行为和样式的高度耦合，非常不利于维护，且易被同行耻笑。
方案四比上面略好，但同样由于行为和样式的混杂，不利于维护。

还有这位兄弟提出的

实现方案5：用脚本给body加上个class，所有需要隐藏的元素的CSS都用这个class开头，比如 .js #id{display:none;}

今日又发现新思路，利用noscript标签。这个圡圡的标签。这本来应该是最先想到的，却似乎思维被僵化了，一味从JS和CSS角度去看了，忽略了HTML本身。

实现方案6：首先使用方案一，直接用CSS隐藏元素，然后再方案一的基础上，增加noscript标签，其中的再写入CSS用来覆盖先前的CSS。（演示代码代码在本文结尾）

是的，就这么简单、这么的圡，但很有效。对于 IE 6 和 Firefox 3测试通过。Chrome上我找不到关闭脚本的选项，故未经测试。

当一切看起来这么美好的时候，放到W3C的验证里边就有麻烦了，XHTML下他说noscript不能没有object?我很晕，然后放上object后他又说style不能放在这里，只能放在head里。我换用了link也一样报错。换了html 4也没有好转。
我在XHTML的描述中没有找到相关内容 http://www.w3.org/TR/xhtml1/
而在HTML 4.01中发现，http://www.w3.org/TR/html401/interact/scripts.html#h-18.3.1
然后我纳闷了一下，里边并没有提到noscript里不能放style和link。进一步考据，找到http://www.w3.org/TR/html401/struct/links.html#h-12.1.3
这里提到

The LINK element may only appear in the head of a document.

又找到 http://www.w3.org/TR/html401/present/styles.html#h-14.2.3

The STYLE element allows authors to put style sheet rules in the head of the document.

但无论如何，我head里放个noscript，里边再带个style或者link就不让我通过验证了！什么世道！

当然，这么2的事情，W3标准的制定小组早就想到啦！在HTML 5中，这个问题将会被解决。可以参考这里： http://www.w3.org/TR/html5/semantics.html#the-noscript-element。同时代码页成功通过了验证。

标准这种东西我向来就把他当作迷信一样，不可不信也不可全信。对于这个问题，我宁可不遵守。因为无论从技术实现，还是语义化HTML，抑或者可用性角度来看，这都是个完美的解决方案，我不想被标准这个玩意所束缚。一方面现在主流的浏览器都支持，没有兼容性问题，另一方面将来的标准也支持这种做法，何乐而不为呢？

两种情况下不适合用方案六：
1，你是极端完美主义者。
2，你的老板或者客户只认W3C验证。

测试地址：
http://shawphy.com/demo/noscript-for-css.html
直接到W3C接受检验：
http://validator.w3.org/check?uri=http://shawphy.com/demo/noscript-for-css.html
附代码，我为了方便其间，用了HTML 5的doctype：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用noscript在禁用脚本时显示元素title>
<meta name="generator" content="editplus" />
<meta name="author" content="Shawphy(shawphy.com)" />
<style type="text/css">
div{display:none;}
style>
<noscript>
<style type="text/css">
div{display:block;}
style>
noscript>
head>
<body>
<div>
你看不到
div>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fshawphy.com%2Fdemo%2Fnoscript-for-css.html">到W3C验证a>
body>
html>

Firebug 1.2b3 中文版

Shawphy — Sun, 08 Jun 2008 18:06:10 +0000

本来我不想发这个篇文章的，只在上次那文章里改一下就好

不过考虑到可能有些人是通过RSS订阅的，如果我这不发帖子他们不知道更新了。。。
所以就再发一次

firebug 1.2b3
点击下载firebug 1.2b3
下载的文件如Fx不识别，则下载完后在资源管理器中把文件拖进Fx即可开始安装

适用于firefox 3 的fierbug 和 web developer 中文版

Shawphy — Thu, 05 Jun 2008 18:34:28 +0000

两个版本都更新了一些东西，强烈推荐下载适用
这回两个都不是我翻译的。web developer 可能是基于我先前1.1.5翻译的，不管了，反正有中文版就是好的。
firebug我这个只是启用了简体中文版，我增加了一点点之前没翻译的

web developer 1.1.6

http://downloads.chrispederick.com/work/web-developer/web-developer-localized.xpi

firebug 1.2b3
点击下载firebug 1.2b3
firebug 1.2.0b6

https://addons.mozilla.org/zh-CN/firefox/addon/1843

下载的文件如FF不识别，则下载完后在资源管理器中把文件拖进FF即可开始安装

多行正则替换子目录中HTML注释中的内容

Shawphy — Fri, 25 Apr 2008 20:59:38 +0000

在虚拟机里的XP里写的，用于替换当前目录的子目录中HTML文件中特定的一段，用注释包起来的。
最近做个项目菜单导航很麻烦，页面非常多，但又是纯静态的，超麻烦。所以写个来以后批量改菜单导航。当然也是因为我不喜欢用DW，而拼死用EP手工写代码的“恶果”。DW有模板的……

这个东西用了我当年写大ass2str的样式~
正则用了JS，文件读写用VBS，请用文本编辑器保存为wsf后双击执行(windows scripting file)
for win only。Linux达人我就对不住了。

[quote]

/*
* 批量修改子目录中HTML的目录
*
* Copyright (c) 2008 Shawphy (shawphy.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2008-04-26 02:51:33 +0800
* $Rev: 1 $
*
*当前文件夹下子目录中的所有HTML文件中
*
*之间的内容都将被替换成
*当前文件夹下menu.txt文件的内容
*
*注：要求所有文件为utf-8编码
*
*/
]]>

今日Ubuntu

Shawphy — Fri, 25 Apr 2008 20:53:02 +0000

昨日下载下来，急忙装下，今天一天都在整这玩意
用下来不得不说比之前其他大几个发行版好很多。apt-get超级方便阿~~~
感谢世界各地提供的源

用到最后不得不说，我这搞前台的没办法用LINUX，为啥，因为里边没IE……
我费了好大的劲给安了个ies4linux，结果运行速度实在不令人满意，毕竟基于wine的啊……
不过基本大功能都能实现了，网银啊，支付宝都恩用了。

心不死，干脆按个虚拟机玩，就按出了个virtualbox。小有波折，不过还是可以了，
居然跟scim冲突，努力就卸载了，现在用fcitx呢。

有了WINXP，自然有了IE6/7,还有我钟爱的EDITPLUS阿……
写前台的总不能就窝在LINUX的FF下过日子吧，肯定没多久被炒鱿鱼了……

基本上更多的一时也没法体会，暂时就写到这里。

这几天不用盗版windows了

Shawphy — Wed, 26 Mar 2008 21:45:11 +0000

实际上最近些日子一点一点在意版权问题。我们大多数人都在堂而皇之的使用着XX花园版XP，或者XX政府版的SN时，是不是也要考虑一下这样是不是合适呢？

当然我不是说我本人已经有钱到购买正版的WINDOWS的地步了。

也同样不是说达人到完全使用LINUX内核的系统，比如首页侧边的那个ubuntu

实际上微软有做了一件好事~

就是Windows Server 2008

这个系统有可以试用60天。随后可以申请延长60天，一共可以申请三次

也就是说，前后一共240天，我想我至少在240天内肯定不只重装一次系统，这个限度对于我来说已经完全足够了。

这样既避免使用盗版WINDOWS带来的心理负担（没有负担的请无视这句），也不用承受使用开源的linux发行版带来的“偶尔不得不使用win”带来的窘境。

同时，这个版本使用了vista一样的构架，所以很安全

================================

大家或许没有注意到，我提供的下载的都是zip打包的。尽管rar在国内更普遍，而且本身我也是用winrar评估版压缩成zip的，但zip至少是有开源的解压缩组件的。给一些在自由软件环境下的朋友提供方便。同样那个jQueryApi没有使用chm打包发行也是因为如此，Linux下看chm很不方便。

关于FF与IE的对比以及各自未来

Shawphy — Fri, 14 Mar 2008 22:22:40 +0000

半夜里逛51js，看到这么一贴，是关于FF是否会占有一席之地的
看完后回帖居然说新注册24小时内不能回，就转过来先，
原帖地址：

http://bbs.51js.com/thread-64895-1-1.html

==================================================
今天偶然路过就看到了这么一个强帖。
花了进两个小时看完22页之长。
也归功于各方争论有根有据而非只是单纯的水而已。
故注册一下过来发表一下自己的看法

自己用FF也有2年了吧快，也是从一开始的不习惯到了现在的离不开。

扩展方面
FF的扩展确实让人很欣喜，反观IE下确有那么令人厌恶的东西。
IE6插件管理机制是非常糟糕的
到IE7以后才有所好转，出现了类似FF的管理工具
实际上在FF说安全其实是即便出现了恶意的扩展你也可以随意删除
何况扩展我们99.9%的人都是从官网获取的，极大程度上保证了安全性。
而IE的插件确实糟糕到极点，否则也就不会有当年那个万恶的3721了。

推广方面
本来也没有意识到FF的推广有多么严重的问题
虽然偶尔访问些提供破解下载的小站的时候发现，即便我在FF下，他还是提示我的浏览器不安全，要我装FF -_-|||
当然遇到这些站点很多情况下下载地址是必须用IE才能看到的，这个没办法。
FF的推广或许确实让不少人觉得生厌，看了之前的众多回帖（大多数都是一年前的帖子），略有领略。
我感觉FF这种推广方式正如恒源祥的春节广告一样令人厌恶。好在我看不到:)

回到正题
对W3C标准的支持度上，实际上之前有提到说，FF在完全兼容IE的功能后再有自己的功能那才算强。
那我要说，为什么浏览器都不能在完全支持W3C标准后再有自己的功能才算强？
实际上IE6是非常糟糕的，就我现在的认知水平上，IE6的CSS水平非常低。什么伪类支持的极少
居然不带href属性的a就不能有a:hover这个伪类，太没想法了吧！
（虽然他有他的道理，认为不带href就不是链接，只是个普通的锚标。认为除了链接之外所有元素不能有hover事件）
我现在写网页往往不得不专门针对IE6写兼容。而FF,IE7,OP等很少需要专门兼容。
那现在不是讨论是不是要按照标准做的问题了，而是标准在前进，我们是不是跟上了。

当然，即便是FF也没有能够完全执行W3C标准，当然其他浏览器也都没有。
但FF确实是最接近的一个。
前面某位大大说FF里提供的__XXX__的方法，有四条下划线说开发人员脑子坏掉了。
其实显然人家加上下划线是因为那是私有的方法，不推荐公开使用而已。
同样也有人习惯用_XXX的方法一样。
对于更多W3C所没有的功能，其实FF也提供了非常多。
就比如CSS里，FF就提供了很多私有的-moz-xxxx之类的属性，这些显然IE是不可能支持的，FF也没指望这些私有属性会加入到W3C中。
但如果用的比较好的，肯定还是希望W3C采纳并给予正式名称。
当然FF这样用私有属性的原因还是因为不希望在标准未定下来之前过早的将其作为行业标准。
时刻提醒开发人员，这些属性用起来要注意。

再回到最初LZ说的不利于JS发展的问题上
实际上JS包括了ECMAScript,BOM,DOM等3个部分（js高级程序设计上讲的）
相信E4X和DOM基本上没问题，LZ主要厌恶一些IE下私有的BOM不能在FF下使用而讨厌FF吧。
其实大可不必如此。同样FF也有些自己的方法比较好用。
同样还是上面说的，大家都把各自好用的放到W3C里，那以后的浏览器就更好用了。

再回到最最头上的投票，说FF快完了。
本来我毫不担心的，但最近IE8的BETA貌似已经将W3C标准执行到比FF还要高的层面了，
由此我确实担心FF将会淡出。虽然我现在依然每天都离不开FF。
但带给我们程序员的并不是什么IE一统天下的好事，
而是IE内部版本之间的兼容问题。
正如IE7推广了这么长时间了还是不少人用IE6，即便今年2月12日起IE7强制升级。
依然有人禁止或者卸载IE7。

同样的问题也会出现在将来的IE8上，都在讲用户体验的年代里，
如果你的网页访问的第一眼是一团糟，非要叫用户点一下工具栏上的“IE7兼容模式”才能正常显示，
你说你这个网页写出来也叫有良好的用户体验么？

最后说几句
实际上IE自己也是和FF一样不断进步不断向标准靠拢,(实际上IE和FF也不断通过自己的实践改进着标准)
所以从长远来开，按照标准做才是最保险的事情。
实际上LZ在2000年时候就按照W3C标准写出来的代码我敢保证现在还能用！
同样，现在2008年，如果想现在写的代码在2016年也能用
(实际上8年的话，代码生命周期已经够长了，该结束了)
那就按照现在的标准写吧，标准里有的东西以后还是标准，标准里没有的东西未必以后就会成为标准。
所以LZ应该吸取当年的教训，按标准做，那就不会有现在的担忧了。
当然，这已经与FF无关了。

展望，也许过一年IE8出来后，FF等浏览器变得毫无优势，于是IE8又再度如他爷爷IE6一样一统江湖
于是又很长时间不更新，又偏离标准，又出现一个新的浏览器，也许叫EE也许叫GG，也许还是叫FF
于是又有人发出投票，抵制那个新的浏览器……

后记。汗，发现从5点半看完写到现在居然6点20了。。。写太多了。。。天都亮了……
吃完早饭睡觉去了……

Edit Plus 3.00 发布

Shawphy — Sat, 16 Feb 2008 15:18:03 +0000

Edit Plus 3.00 终于是发布了，但从冗长的What’s New里边看不到激动人心的重大革新，感觉充其量也只能算是从2.31版升级到了2.4版而已。也许EmEditor这个万年BETA王也因此收到鼓动一下子整出个Final了。tracky很厉害，很快就出了中文版了。大家可以到汉化新世纪这里来下载。2.x的注册码依然可以用。附一个霏凡的：

Name:crsky
Code:A779E-5BF58-63RAC-42O59-66RAC

大家装的时候小心插件…… 这个editplus实在很顺手的原因之一就是自动完成功能，可以到这里看看再转一个，因为找不到作者了。让EP能直接编译和运行JAVA程序。

Tools－＞参数设置-＞配置用户工具
　　 1.添加工具(添加应用程序)
　　  菜单文字：Compile Java Program
　　  程序：C:JDKbinjavac.exe
　　  参数：文件名称
　　初始目录：文件目录

　　 2.添加工具(添加应用程序)
　　  菜单文字：Run Java Program
　　  程序：C:JDKbinjava.exe
　　  参数：文件名称(不含扩展名)
　　  初始目录：文件目录

　　工具组名称可以随便添，比如Debug Java Program。然后在Tools的下拉菜单中，你就会看见Compile Java Program以及Run Java Program这两个选项，以后你就可以利用ctrl + 1编译和ctrl ＋2运行程序了

附注：本来这博客是用ScribFire写的，但可惜PJBLOG的API不是很标准，现在发布失败，还害得我写了两遍，郁闷。。。逼我用WordPress去啊……

==============
再注：原来之前发布成功了……但是果然API不够标准，没有正确返回成功的消息。害得我还把之前发的删除了……唉。。。

Web Developer 汉化测试版以及 Firebug 中文汉化版下载

Shawphy — Sun, 20 Jan 2008 20:22:27 +0000

前些天我抽空汉化了一下Web Developer这个Firefox插件，他是用来查看和调试页面信息的好工具，众多的书籍中说道调试网页就会说起这个工具，还有Firebug也是一个很出色的调试工具。这位仁兄详细介绍了美妙的Firebug，强烈推荐下载使用。

这里简单的介绍下Web Developer

[quote]Web Developer 可说是网页设计师最常使用的一个 Firefox 扩充套件，它可以协助我们在设计网页时能够更加的得心易手，内建 HTML、CSS、Feed…等检验器，让我们所设计出来的网页能够符合标准化，不但可以省下日后维护的时间金钱，更能确保我们所设计出来的网页在各家不同的浏览器，均能正常地显示，且是符合我们预想的成果。其它更有取消 CSS、取消 Java、取消 JavaScript、检视或清除 Cookies…等功能。

CSS — 可编辑当前页面的CSS，并可即时显示修改效果。
Forms — Get/Post转换，显示所有表单信息。
Images — 显示图片的各种属性，可找出未设置Alt,Title等属性的图片。
Information — 最有用的两个功能：查看Cookie信息和Http Response数据，Web调试必备
Micellaneous — 最有用的功能：Clear Session Cookie。已往调试Web，为了新开一个Session，不得不关闭IE，重新再开，现在不用啦。
Outline — 框出Table元素，Cell元素,Div元素
Resize — 模拟800*600等窗口大小，可自定义窗口大小
Tools — 验证CSS/HTML 等
View Source — 显示带关键字颜色的漂亮源代码[/quote]

如果测试中发现什么问题请及时告知，谢谢~~
如果测试没什么问题，此汉化将在官方网站上统一发布。
另外顺便发一下Firebug中文版，这个虽然不是我翻译的，但整合了一下。
如果你还没有用Firefox那快去用吧！

xpi使用方法：在firefox打开的情况下，将文件拖入firefox的窗口即可开始安装。
点击下载Firebug和Web Developer

============================================================
中邪了，这个服务器怎么不认得xpi文件，大家点下面两个链接会说文件不存在，但大家看这里，明明文件就在那嘛！莫名其妙的……

点击下载Web Developer
点击下载Firebug