Category Archives: 其他

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

三个月前,老鱼在其博客和支付宝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 … Continue reading

Posted in 其他 | Tagged , , , | 11 Comments

Firebug 1.2b3 中文版

本来我不想发这个篇文章的,只在上次那文章里改 一下就好 不过考虑到可能有些人是通过RSS订阅的,如果我这不发帖子他们不知道更新了。。。 所以就再发一次 firebug 1.2b3 点击下载firebug 1.2b3 下载的文件如Fx不识别,则下载完后在资源管理器中把文件拖进Fx即可开始安装

Posted in 其他 | 4 Comments

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

两个版本都更新了一些东西,强烈推荐下载适用 这回两个都不是我翻译的。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即可开始安装

Posted in 其他 | 2 Comments

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

在虚拟机里的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: … Continue reading

Posted in 其他 | Leave a comment

今日Ubuntu

昨日下载下来,急忙装下,今天一天都在整这玩意 用下来不得不说比之前其他大几个发行版好很多。apt-get超级方便阿~~~ 感谢世界各地提供的源 用到最后不得不说,我这搞前台的没办法用LINUX,为啥,因为里边没IE…… 我费了好大的劲给安了个ies4linux,结果运行速度实在不令人满意,毕竟基于wine的啊…… 不过基本大功能都能实现了,网银啊,支付宝都恩用了。 心不死,干脆按个虚拟机玩,就按出了个virtualbox。小有波折,不过还是可以了, 居然跟scim冲突,努力就卸载了,现在用fcitx呢。 有了WINXP,自然有了IE6/7,还有我钟爱的EDITPLUS阿…… 写前台的总不能就窝在LINUX的FF下过日子吧,肯定没多久被炒鱿鱼了…… 基本上更多的一时也没法体会,暂时就写到这里。

Posted in 其他 | 6 Comments

这几天不用盗版windows了

实际上最近些日子一点一点在意版权问题。我们大多数人都在堂而皇之的使用着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很不方便。

Posted in 其他 | Leave a comment

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

半夜里逛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采纳并给予正式名称。 … Continue reading

Posted in 其他 | Leave a comment

Edit Plus 3.00 发布

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不够标准,没有正确返回成功的消息。害得我还把之前发的删除了……唉。。。

Posted in 其他 | Leave a comment

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

前些天我抽空汉化了一下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 … Continue reading

Posted in 其他 | 10 Comments