博客园_superman 技术园地

D2前端技术论坛之网页无障碍学习笔记

2011-07-10T12:41:00Z

周末有幸参加了淘宝技术嘉年华，这一界的D2前端技术论坛增加了信息无障碍的一些讲坐，现场也提供了无障碍浏览体验区供大家体验，可见中国的信息无障碍已经受到重视。下面是在会上听到的一些心得记录下来：

中国的盲人数量是500多万，如果建成一个国家，人口总数是世界上200多个国家中的110名左右。

盲人操作电脑大部分时间是用全键盘操作，而且最先开始都是用tab键来切换顺序，网页中的链接不能太多，否则想要找到自己想去的链接很费劲。

要让元素支持tab键，可以加上tabIndex。

要让表单元素被读屏软件读到，可以使用以下方法：lable for 、value。比如你使用了:请输入姓名：<input type="text" id="name">，这样子写，盲人朋友根本就不知道要输入什么，请使用 <label for="name">请输入姓名</label>：<input type="text" id="name">

不要使用<img scr="xxx.jpg" onsubmit="submit()" />这种方式来进行表单提交，如果一定要使用，请加上tabindex="0"让其能支持读屏软件。

不要使用诸如：“红色部分必须填写”之类的表单提示，因为盲人或色盲者看不见。

在页面交互时弹出了框，要让框得到焦点，否则盲人不知道有提示框弹出。

不要使用onfocus="this.blur()"取消a标签的虚线框，盲人按tab键时没法操作,可以使用CSS中的outline="none"和IE中的hidefocus属性来实现。

使用onmousedown="init()"此类脚本操作时请考虑到盲人朋友，尽量也支持键盘，比如加上 onfocus="init()" 或者 onkeydown="init()" 。

在某些重要和常用的交互时可以使用accesskey属性来支持快捷键操作。

图片要加上alt属性，好让盲人朋友知道这是个什么图片。

保持HTML的顺序，把用户最想读到的放在前面。比如新浪微博，主体内容的HTML就在左侧栏HTML之后，按很多次tab才读到微博列表，这就是不好的例子。

网页做好以后可使用全键盘进行测试，再加上firefox的Accessibility Features扩展检测可很好的让网页支持无障碍浏览。

总结：暂时就记起这么多，上面其实都是在HTML 4.0时代就有的功能，我们在开发网页时，只要多留一点意识就可以让盲人朋友们很好的浏览网页，可是我们都没有真正的用心去做。从现在起，我决定，也呼吁网页开发者们关注网页无障碍，这可以让我们的产品可以受众更多的用户，也是对社会的一种责任，对残障人士关爱的表现。

最后附上一些链接：
http://www.aliued.cn/2010/01/14/what-can-ued-do-for-wcag.html
http://ued.taobao.com/blog/2011/04/15/onfocus-this-blur/

本文链接

yupoo新版前端技术初探

2011-06-02T12:06:00Z

听说yupoo改版了，打开看了一下，我对设计风格什么的不太懂，所以直接看了下源代码，发现他们用了Modernizr和labjs这两个工具，所以很有兴致的分析了一下前端代码，的确做得不错的说。

首页顶部：

为各个IE版本设置了class，目的应该是处理各种css hack。

继续看：

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame

当使用了这个meta后，网页宽度默认为设备屏幕的宽度，这个标记适用于手机，平板电脑等移动设备。

看下面的JS代码：

这里目的是为了防止网站被iframe的安全处理，冒似是参考的twitter,可以看我前一篇文章。

看下一个亮点：

第一个不多说了，每个网站都应该有。

app-touch-icon作用是ipad和iphone创建快捷方式时的图标。

rel="search"则是为了应对firefox右上角出现它的搜索选项，chrome下好像没有这个东东。

当浏览器为IE6时，加载pngfix.js，pngfix目的是在IE6下能够设定PNG图片的透明度。冒似这样的开源JS库有不少，IE6要用到透明时很棒的解决方案。

再往下看：

var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-8399606-3']);

    _gaq.push(['_addOrganic', 'soso', 'w']);
    _gaq.push(['_addOrganic', 'yodao', 'q']);
    _gaq.push(['_addOrganic', 'vnet', 'kw']);
    _gaq.push(['_addOrganic', 'sogou', 'query']);

    _gaq.push(['_trackPageview', '/index/index']);
    _gaq.push(['_setDomainName', '.yupoo.com']);

    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";

    s.parentNode.insertBefore(g,s)}(document,"script"));

这里是谷歌统计的ga.js，异步加载的，没什么好说的。

再最下面只有一个很小的JS。整个首页的优化我认为做到了极致，也充分利用了各种资源，首页只用到了首页要用的JS，并没加载其它。

看内页（登录后的）：

Modernizr（官方被墙了） + labjs放到了一起，大小只有9k。

下一亮点：

if (Browser.ie6) {
     $$('.button').addEvents({
           mouseover: function(){this.addClass('button-hover')},
           mouseout: function(){this.removeClass('button-hover')},
           mousedown: function(){this.addClass('button-active')},
           mouseup: function(){this.removeClass('button-active')}
     });
}

如果是非ie6则用了:hover伪类来做鼠标移上去的样式处理，ie6则用js来解决同样的效果，这样的代码有好几处，充份利用了浏览器自有功能。

最后一个亮点：

$LAB.setOptions({BasePath: uPai.app.scriptRoot + '/'})
        .script('global.js?15127281.js').wait()
        .script('dashboard.js?15126745.js').wait()
        .script('postbox.js?15127849.js').wait()
        .script('timeline.js?15127232.js').wait()
        .script('share.js?15127136.js').wait()

        .script('textboxlist.js?15126834.js').wait(function(){ uPai.fireEvent('ready', [uPai]); });

利用3K大小左右的labjs加载了页面所用到的全部JS，异步并行加载且保证了加载和执行顺序，充分节约了浏览器资源。总之yupoo前端的处方面在我看过的这么些网站中算很棒的了，不像大多数网站，一系列的<script src="xxx.js"，极其影响效率。

yupoo的页面结构不算复杂，代码不量不大所以很容易看清楚结构。只看了下首页和登录后的首页，这样的代码结构其实正是我所想的。Modernizr + labjs都是目前比较新且炒得比较火的JS库，有兴趣的可以google一下，yupoo在前端性能方面可谓算是做得很不错的了,赞一个！

当然有亮点肯定不止这么一点，不足也肯定有，待有时间再细细品尝吧！

附上介绍modernizr和labjs的相关链接：

【译文】Modernizr——为HTML5和CSS3而生！

LABjs分析

本文链接

twitter中处理网页被iframe方式

2011-05-21T15:43:00Z

记录一下，感觉蛮有意思的

}

本文链接

“拥抱html5”小结

2011-04-26T02:36:00Z

w3ctech在上周末在上海举行了一场针对于HTML5的技术交流会，有幸与团队同事一起参与其中。

第一个开场嘉宾是W3C的工作人员，一位漂亮MM，全面的介绍了W3C的来源和组织架构，还有W3C的工作内容，让我们了解了以往不知道的W3C以及刚刚成立不久的W3C中国。其幽默风趣的演讲让在场笑声不断，期间提到了国内的20多个浏览器在为IE6做支持，希望国内前端者们能支持W3C组织和帮助降低IE6在国内的使用率。

来自opera的子斌主题为“不懂HTML5非好汉”，讲述了HTML的发展历程以及HTML5的由来。不过这个后来几乎每两个嘉宾就有一个要讲HTML历史，有点听腻了。

来自腾讯的前端工程师讲述了WebQQ 目前的项目情况，WebQQ目前使用了大量的Html5和CSS3技术，还有IE9的一些特有的新技术，听起来非常的强大，据说目前正在WebQQ上做web上的视频聊天功能，基于Flash的，近期会发布此功能，未来不久WebQQ会重新定位，不单纯只是称作QQ，至于什么名目前保密，但是听口气应该是称为WebOS的东西。很想见识一下WEBQQ底层使用的框架JX，不知道是否会开源。

来自国外某网游公司的CEO讲述了他们对HTML5开发游戏的看好，讲述了他们公司在HTML5游戏开发上的应用例子，目前开心网上的手机游戏就是他们公司提供的。看来游戏开发是个前景，不过冒似我没有游戏开发的细胞，平时也不爱玩游戏。

来自优酷的工程师讲述了他们的视频在HTML5上的应用，全面支持iPad，对视频不太懂，也没听太明白。

来自创新工场磊友公司的@雷友赵菲，介绍了自主研发手机浏览器以及开发思路，没有采用开源的webkit与V8引擎，完全自主开发DOM解析器和JS引擎，怎一个牛字了得！

来自英国的《javascript DOM 编程艺术》作者Jeremy Keith讲述的HTML5设计原理，全面讲解了HTML5的设计细节，让我们了解了Html5背后的一些故事，每一个功能点是如何设计，为什么这么设计等。更有幸在现场买到了他亲笔签名的《javascript DOM 编程艺术第2版》。

来自台湾的前端工程师布丁 ,自诩为快乐设计师，介绍了他和他的团队打造的一个CSS开发工具sass,sass有很多很好玩的东西，如变量，动态导入等，如你可以这样编写你的CSS：

$blue: #3bbfce;
$margin: 16px;
.content-navigation {border-color: $blue;color:darken($blue, 9%);}
.border {padding: $margin / 2;margin: $margin / 2;border-color: $blue;}

当然这是最简单的东西，更多强大的功能可以上http://sass-lang.com/看看，这个东东给我的印象很深，的确可以提高很多的开发效率，如果长期从事CSS编写的真的可以学学，不过也有一些学习成本，用久了也许连CSS你也不太会写了。

来自惠普的前端负责人讲述了自己的WebOS，HP的WebOS采用linux底层，在APP服务端采用的nodejs做服务，可以使用他们自己的IDE来开发Web app，他们也有一套自己的JS开发框架，感觉和cloud app非常类似，阿云无线这边的兄弟们没去可惜了。但是冒似他们的手机和平板目前市场占有率很少，现场的听众兴趣不大。

最后很遗憾错过了hax的演讲，因为要赶火车，其它啥canvas ，游戏开发之类的也没听懂！

本文链接

在线生成CSS圆角

2009-06-17T05:39:00Z

在线生成CSS圆角代码，推荐http://www.spiffycorners.com/预览图：

使用zoomify在网页中嵌入巨型图片

2009-01-06T14:14:00Z

javascript中使用重载

2008-09-02T15:43:00Z

TreeView绑定硬盘文件

2007-09-19T15:42:00Z

IBatisNet与Oracle的问题,还有两个长久的疑问

2007-08-16T05:24:00Z

NET开源项目介绍及资源推荐：数据持久层

2007-06-15T01:49:00Z

在.NET平台下，关于数据持久层框架非常多，本文主要对如下几种做简要的介绍并推荐一些学习的资源：1．NHibernate2．NBear3．CastleActiveRecord4．iBATIS.NET5．DAAB附加介绍：DLinq一．NHibernate提起NHibernate，相信大家都不陌生，NHibernate来源于非常优秀的基于Java的Hibernate关系型持久化工具，它从数据库底层来持久化.Net对象到关系型数据库,NHibernate为我们完成这一切，而不用自己写SQL语句去操作数据库对象，所写的代码仅仅和对象关联，NHibernat自动产生SQL语句，并确保对象提交到正确的表