说@來福誌

5月19日至21日为全国哀悼日。

下半旗志哀，停止公共娱乐活动。

5月19日14时28分起，全国人民默哀3分钟。

愿在这场灾难中逝去的人们安息。

本博客褪色三日，默哀。

UE是个热门词，现时的各色网络公司，都喜欢拿UE来说事儿呢？当然，说归说，UE到底是个什么玩意儿，恐怕很多人实际上却并不那么清楚。

就字面上的意思而言，UE是User Experience的缩写，即“用户体验”。这个概念，也是随着近年来兴起的web2.0的而兴起的。相比由网站本身提供内容、服务与资源的1.0相比，web2.0式的网站更希望通过用户创造内容与价值，进而从中获利，自然会更多地关注到用户的体验与感受。同样关注用户体验的还有电子商务，就像冷言冷语冷面孔的国有百货商店败给满面春风艳若桃李的大型Shoping Mall一样，用户体验与电子商务所获的利润紧密相关。与利益相关，所以“用户体验”显得愈发重要。而可笑的是，许多网站的管理者、运营者，甚至设计者，口口声声地嚷着“用户体验”，实际上却不断地做着与之相去甚远的事情。近日拜读了小龙君的您不是您的用户，感触颇多。

作为网页设计师，小羊满打满算算也有4年的从业经验了。从最开始接触的企业宣传型网站，到后来的1.0门户类网站、电子商务类网站，及至现在从事的2.0网站，小羊始终明白一个道理，不管是客户需求也好，还是用户体验也罢，前期的策划分析，是一项相当必要重要且专业的工作。小羊不敢妄称专业，但自诩对UI的设计以及用户体验还是有那么一些研究的。但是在实际操作中，作为设计师而言却常常苦不堪言。尤其是在用户体验的研究及UI设计上，遇到的阻力往往要比商业客户还要大。其中最直接的，莫过于管理者对于“用户体验”的干扰，小龙君将其戏称为“OE”（CEO/COO/CTO/CXO…….），小羊看到这个词的时候，简直都要感动到落泪了。相信做设计的诸位，也是深有同感吧。

小龙谈到，网站的管理者或是运营者，不应该等同于自己网站的用户，其依据有三：

第一：网站管理者与网站用户的根本目的不同。
第二： 网站管理者与用户关注的焦点不同。
第三：用户角色大有不同。

对于这三点，我是举双手赞同的。因为这其中有一个很明显的利益博弈——作为网站的管理者、运营者，当然希望尽可能多地能通过用户获得价值（不管是直接的还是间接的），而用户，则希望付出尽量少的成本（最好是免费的）从网站获得自己所需的价值。所以，作为网站管理者、运营者而言，的确很难将心态摆到一个普通用户的层面上的。另一方面，作为网站的管理者与运营者，往往试图让自己的网站成为（自己想像中的）一架完美的机器，但是用户显然很难这么认为——尤其是面对成千上万用户的时候。

更重要的是，用户体验研究是一项专业的工作。简单地说，用户体验是指用户访问一个网站或者使用一个产品时的全部体验。包括但不仅限于用户浏览及使用的整个流程，使用时的顺畅程度，使用时的心理活动，使用时遇到的困难与bug、提示与帮助，最终结果以及是否会继续浏览/使用等等。这其中，会涉及但并不仅限于心理学、社会学、人文学、美学、逻辑学、数学、设计理念、人机交互、计算机软硬件知识等等一系列专业要素。同时也是一项需要在个人从业经验、想象力、模拟能力以及逻辑思维在专业详实的数据支持下，（由团队协作）进行分析、讨论、研究、实验完成的工作。说上面一大段的目的，只是想表达这样一个观点，即是：

“用户体验”不是一项某个O拍拍脑袋就能想出来，并且对专业人员进行（瞎）指挥的工作。

亲爱的O大人们，UE means User Experience not Ur Experience …

今天有同事问我9磅等于多少公斤，我就告诉他去谷歌中国转换一下。因为我和他都戴着耳塞在说话，出于我这种爱管闲事的个性，就自己去谷歌中国了一趟准备查一下告诉他。

结果就看到了这个……

点击进去看看……立刻被囧到……文案的第一句话还蛮搞笑的……

尝试输入“人肉”进行搜索之后，看到了事实真相……好吧，天涯问答的推广还真有创意。另外，大家愚人节快乐吧……

首先推荐一本比较好的教程，来自于Jeremy Keith的DOM Scripting，当然我读的是翻译之后的中文版本，JavaScript DOM编程艺术。翻译质量来还算不错，最值得推荐的，便是著者将DOM最主要最精华的部分化解在了几个专业级别的案例应用中进行相熟，思路清晰、循序渐进而不嫌枯燥，甚至可说引人入胜。此外，本书也是贯串了标准化、内容与行为分离、预留退路等等能显著提升用户体验的理念与方法，实属难得。对于入门学习来讲，虽有些许难度但是仍然建议初学者参考。

Day.2 I wanna this, I wanna that!

在DOM的世界中，获取元素及其属性和内容是最基本的操作。前一篇也说过，DOM实际上是构建了一个页面内所有元素及其属性、内容的索引，那么，我们通过这个索引来获取到所需要处理的东西无疑是探囊取物般简单。一般来说，通过JavaScript，我们是从两个基本方法开始的——所谓的方法，就是对文档中对象进行操作的手段——这两个方法便是：getElementById()和getElementsByTagName()方法。

作为一种相当接近自然语言的编程语言，这两个方法的意义很明显，通过html中预先赋予的id属性或是html中的结构标签来取得元素。其应用形如：

其中，第一行的代码获取的，是整个文档中id=”shoplist”的元素，而第二行代码获得的，是整个文档中所有的列表元素（li）。

值得注意的有几点，其一是，（）内的参数，应该是一个字符串，即是说，引号是必需的，无论是单引号还是双引号（我个人比较喜欢双引号，因为在有些编辑器中，两个单引号看起来往往和一个双引号一模一样，在复杂程序中，往往会看错而忘记关闭引号，导致出错）。

而其二便是，“getElement”和“getElements”的区别告诉我们，getElementById()所取得的，是一个单个的元素，而另一个，则（有可能）是复数个的元素（一组元素）。因为在一个符合标准规范的页面中，id属性的值是不能重复的，是一个唯一的值。在疯狂的状态下，我们可以为html页面上每一个元素都赋上一个不同的id值，这样只要用getElementById()方法就可以找到任何需要的元素。但是显然这样的方法是不现实的而且笨重的，同时会造成页面代码的冗余——就像css界泛滥的“div症（divitus）”和“class症（classitis）”一样。id更像是一个挂钩，链接着css，javascript以及DOM。通过getElementById()，getElementsByTagName()以及javascript中循环、判断语句的使用，找到任何的元素都不是问题！

近日里，一句“很黄很暴力”迅速蹿红，替代了“很好很强大”成为2008年第一句流行语。这句话最初出现在2007年12月27日CCTV的《新闻联播》一段抨击网络不良视听的报道中，北京女学生张殊凡语出惊人：“上次我查资料，忽然蹦出一个网页，很黄很暴力，我马上给关了” 。

我本不大看CCTV的官方新闻，所以也并未目睹事发当时的视频片段。如果是在早两年前，这短短4、5秒钟的画面或许根本不会引起人的注意。然而，在随后的几天里，这段视频片段通过网络几乎传染了整个中国，而“很黄很暴力”也迅速蹿红，成为2008年第一流行语。随之蜂拥而至的，是网络上对主角——张殊凡同学的地毯式资料搜查以及各式各样的调侃、鄙视、恶搞甚至漫骂。

不争的事实是，“很黄很暴力”红了，张殊凡也红了。我不知道张殊凡看到的“很黄很暴力”的网页是什么，我却清楚地看到，网络施加在这个13岁的少女身上的暴力。很多网友鄙视这个小姑娘，觉得她当着这着镜头说瞎话。对于张殊凡同学的言行，我无法做出评价，也完全不会去鄙视她什么。作为一个中学生，作为一个优秀中学生代表，作为一个出现在CCTV《新闻联播》中的优秀中学生代表，她的主旋律言论实在是无可厚非。在这样一段主流的新闻报道中，你还能指望她一个小小的中学生说些什么呢？有网友认为在CCTV这样的全国性媒体上说话，“每一句话都要负起责任，如果觉得承担不起，就不要说。”但是，所谓媒体的责任，该是由一个13岁的小女生来承担的吗？如果要说浮夸、虚假、主旋律，其后的那位老师或许所言更甚，而为什么焦点却非要集中在这样一个小姑娘身上？

退一步讲，如果仅仅是对这句话本身所带来的非议进行评论与质疑，也是无可厚非的。但是，伴随而来，恐怕早已经超越了应有的道德底线：

只因这一句“很黄很暴力”，关于张殊凡的视频、图片、恶搞漫画、帖子一夜泛滥成灾；百度贴吧突然出现了张殊凡吧、很黄很暴力吧；猫扑更是把其视频截图放在显著位置，发帖号召人肉搜索，1月1日发出，截至5日凌晨跟帖竟达1200条，足足12页，第一页就有匿名人士把张殊凡的出生年月、所在学校、平时成绩以及受获奖励跟贴出来，精确到出生的医院都清楚。更有甚者，公布了一份2004年的中小学生书法比赛名单，其中就有张殊凡的名字。

这仿佛让我看清了这样一个事实：名义上，这次事件似乎是网友们对于主流媒体造假不满的一次集体性爆发，但实际上，却更像是在猎奇、恶搞、审丑文化、宅男、萝莉控、社区炒作等一系列因素下产生的偏激与过激的集体话语施虐。正因为这次的主角是一个13岁的小姑娘，说出了不那么正常的一句话，其特质刚好符合了整个网络中弥漫的某种不正常心态，所以才能如此迅速地成为事件的焦点。而抓住张殊凡这一句话的辫子，“网民”们孜孜不倦穷追猛打的攻势，早已超越了抨击主流媒体造假这个问题本身，演进为一波又一波集体不负责任的施虐快感。张殊凡无疑成为了主流话语权与网络暴力下被侮辱与被损害的牺牲品！

而在这样的主流话语言语环境的压迫下，真正被侮辱与被损害的，到底究竟又是谁呢？

前几天遇到一个状况，明明打了两个<br />的换行符，上下两行字还是挨在一起，少了一个空行。

不管是IE6还是IE7，状况都是一样，而Firefox里显示很正常。检查了一遍CSS，没发现有什么错误，也没有对br有特殊定义，只好视为IE的bug，只好一条一条CSS来排查。其中有这么一段定义：

当把“letter-spacing: 0.05em;”这一句删除时，状况消失。看来，正是这个letter-spacing属性，导致两个br出了问题。将letter-spacing的值放大到10px，再选取p标签中的文字，可以看到，在IE中，第一个br也被加上了letter-spacing值，而且成为了第一行的最后一个字符，换行的功能丧失。只有第二个br，才真正起到了换行的作用。而Firefox中，没有发现br被加上了letter-spacing值的现象，两个br的功能保持正常。

letter-spacing 这个CSS属性，主要是用于微调字符之间的间距，平时并不常用。查了一下官方资料，并未见其有bug的描述。但是这个状况的确在IE系列浏览器中产生了。如果单纯地删掉letter-spacing的定义，固然能解决这个bug，但是对于版面的细微控制又丧失了。于是尝试对br的letter-spacing进行清除：

可以看到，在IE中的这个bug解决了。虽然只是一个很不常见的小小的bug，却常常让人半天摸不着头脑，IE系列的浏览器还真是烦人啊。

Intro：什么是DOM ？

DOM（Document Object Model），即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型。在这个理想化的树状模型中，任何一个元素或是内容，都只有自己唯一的一个节点。即便这个文档拥有巨量的内容与繁复的结构，只要它本身语义逻辑没有错误，那么用DOM都可以轻易地将这个文档中的任意一个元素或内容检索出来。简言之，对于网页前端开发人员而言，DOM就是一个用于检索网页内任意元素或内容的索引目录。(参见W3C对DOM的定义)

DOM的发展，与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑，DOM才能正确地发挥其功用。如今，正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。因此，在网页前端开发中，DOM的存在，无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API，成为热门的Ajax应用中不可或缺的组成部分。

Day.1 DOM基础

JavaScript

DOM应用基于浏览器客户端的JavaScript技术，通过JavaScript对文档中的对象（Object）进行检索、操作，几乎可以完成任何我们想要的任务。因此，想要熟练地掌握DOM技术，对于JavaScript的学习也是必不可少的。值得注意的几个要点是：

1. 提前对变量进行声明，尽管这不是必须的。
2. 尽量在自定义函数中使用var关键字声明局部变量。如果不使用var，那么该变量将成为全局变量。在一个庞大的JavaScript程序中，变量的混乱将是一场噩梦。

几个概念

1. D（文档）：当创建了一个网页并将其加载到WEB浏览器中时，DOM便将根据这个网页创建出了一个文档对象。
2. O（对象）：所谓的对象，即一种独立的数据集合。例如文档对象，即是文档中元素与内容的数据集合。与某个特定对象相关联的变量，称之为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。
3. M（模型）：自然是文档对象的树状模型咯。在这个树状模型中，网页中的元素与内容表现为一个个相互连接的节点（node）。

节点类型

1. 元素节点：在HTML中，<body>、<p>、<a>等一系列标签，即是这个文档的元素节点。元素节点，组成了文档模型的语义逻辑结构。
2. 文本节点：包含在元素节点中的内容部分，如<p>标签中的文本等等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。
3. 属性节点：元素节点的属性，如<a>标签的href属性与title属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后并不可见的。而且，属性节点总是被包含于元素节点当中。

id属性

id属性的用途是给网页中的某个元素加上一个独一无二的标识符。可以说，id属性是DOM应用中的一个关键。通过这个独一无二的标识符，JavaSript想要找到文档模型中的任意节点，简直是易如反掌！