FsCommand

Category

焦点轮播区域的形式

　　时下在互联网上很流行焦点区域轮播(焦点图)的形式，形式上就是以醒目的大图或配以说明性文字,进行定时交替播放。至于实现的技术手段就是FLASH或javascript的动态前台技术（基本没有什么技术含量可言）。不过从呈现方式上虽然精髓都是同一个，都是以同一区域展示的信息量成倍增加为最终目的，但是呈现效果、用户体验上可就是五花八门，百家争鸣，百花其放，丑态百出（这个好象不搭调）。
　　现面我们就拿几个最典型的实现方式来小论一下:
　　首先是在国内网站上比较流行的一种焦点图方式,所谓的新浪风格:

新浪的焦点轮播

这种轮播方式被国内大大小小网站拿来的拿来,演绎的演绎:

小熊在线的焦点轮播

太平洋电脑网的焦点轮播

　　要说明的是这种轮播图的方式目的已经达到,即上述的内容展示加倍。但是这种形式有两个缺点。第一，下面的当前播放的指示，不知设计人员是怎么考虑的，一个焦点图的位置能放几十还是几百张图片吗？最多超不过10张（通常3－5张），难道把用户当白痴数不清10以内或5以内的数？非要你标记一下那难看的系统字体的数字在下面？下面的指示器目的是说明共几张，当前第几张，小色块就足够了，加数字即影响美观又增加不必要的文件大小，简直是画蛇添足。第二，就是花里胡哨的过场效果，本来就不大的焦点区弄些乱七八糟的过场，用户刚看上去还比较新鲜，不出两三次就会烦，所以不要添加过场，这样就不会触犯任何审美倾向的用户。而且相当程度上减小了文件大小，带宽等开销，提升用户浏览的流畅性。

　　第二种是上述情况的改进型，个人认为是最好的轮播方式，简洁大方，好用易用：

news.yahoo.com

CCTV

　　这两个就是使用了小ICON做播放指示，简洁大方。CCTV的张数就有些多了，这时使用数字才比较合适，不过还可以接受。而YAHOO的那个只有三个，如果换成1.2.3，那真的就是把用户当白痴了，至少我还能数清楚是三张。

　　第三种很流行的是播放指示部分除了指示轮播张数、当前位置的作用外，还增加了内容缩略的作用：

CNET.COM

beijing2008.cn

上面这两个就是将内容缩略和播放指示和二唯一了，这使得用户即能知道当前播放的是那张，一共几张，还能看到每张的大概内容。其中beijing2008的那个增加了进度指示功能，可以让用户清楚自己看到下一张需要等多少时间。当然时间间隔指示有很多种，下面的就不错：

ESPN

这个时间间隔指示使用的是所谓的的2.0样式，一个环状加载指示。

总结：
轮播这种方式要么就用最简单的呈现，上述第二种，即能达到目的，又能给用户带来比较好的体验（这个有点大，通俗点，就是不招人烦）。要么就用第三种，让用户彻底清晰明了，知道自己在看什么，将要看到什么，多久能看到… … 。不伦不类的呈现方式还是尽量避免使用。

前端开发：用户友好、开发者友好、机器友好(转)

转自：http://realazy.org/blog/2007/02/03/frontend-engineering-friendly-developer-friendly-machin-friendly/

忘了从哪看到的一句话，印象挺深：Frontend engineering rocks right now. 没错，随着用户体验等课题的不断发展，如何能够把需求更完美在前端中实现的重担，已经由过去兼职的后端工程师转向了专职的前端工程师。作为一名前端工程师，除了在开发上，必须比后端工程师更关注用户体验，因为用户最终使用中，第一接触UI界面，然后操作，进行交互。能否保证用户友好的界面和交互，除了产品相关人员的功能策划，还有前端工程师对功能在前端中的具体表现的深刻理解，对技术壁垒的一一攻破。前端开发到了rocks的时代了。

但是或许我们会在用户友好中迷失自己。一件产品的诞生，凝聚的是整个团队的努力，所以，前端开发必须注意到自己代码应该是清晰紧凑的，这样，无论是市场的广告投放，后端的数据输送等开发，都可以最佳的方式来配合前端，即需做到开发者友好；我们的代码，不管是由浏览器来处理，还是搜索引擎的检索，都必须尽量做到符合语义，使用当代的开发思想（如web标准）来要求前端的代码，即做到机器友好。

前端开发的任务就是做到：用户友好，开发者友好和机器友好。

用户友好毋须多言，这是我们的首要任务。如果可能，我建议所有的前端工程师都能够把自己定位为用户体验设计师的一员，而且是不可或缺的重要一员。只要是用户体验设计师，无论是谁，都想最佳的体验呈现在用户面前，这个愿望是好的，但是，在这个不是那么美好的时代，我们会受到许多客观条件的制约，如浏览器的支持不足，或者某个重要特性的缺乏，让我们本来预计的美好愿望编程肥皂泡。如果前端工程师在产品设计初期未参与进去，原有的完美设计，在进行到开发的阶段才发现某个不可实现的功能变得四不像。我们可以利用我们的专业技能明确判断哪些可以实现哪些不能实现，那么就能避免很多问题。

开发者友好是前端开发的第二个任务。在讲究流水作业的今天，保证开发者友好的代码、接口等是提高产品开发速度和质量的一个有效途径。开发者友好，意味着降低沟通的成本，意味着合作的顺利进行。不要认为世界上的人都像您这么厉害，即使是最简单的HTML，写上最详尽的注释，这样其他开发者在接手的时候就不必满天查找开始与闭合的div。就算您是多面手，您也必须注意您的前端开发必须开发者友好，否则可能过个个把月您连自己的代码都不认识。

至于机器友好，其实也是保证用户友好的一个前提。如何能保障我们中的特殊群体——残障人士的友好性，机器友好是最重要的一条途径。他们使用的设备，受限于他们的生理条件，同时就受限于处理信息的灵活度。如果不能保证机器友好，那么这些设备就不能保证能正确处理我们提供的信息。即使是普通用户，机器友好的代码也能降低他客户端的资源消耗，提升使用的速度，从而提升用户友好度。我们的用户中也有机器，比如搜索引擎，它们往往是用户找到我们提供的服务的关键。机器友好的一大意义还在于，搜索引擎能更好得处理信息。

用比较商业的术语说，前端开发的客户是：用户，开发者以及机器。我们的价值观的第一条：客户第一。既然如此，我们前端开发的任务，非用户友好、开发者友好、机器友好莫属。

可访问的弹窗链接

　　我们有时候必须使用弹出窗口，所以我们还是要正确使用它。这篇文章会告诉你如何使你的弹窗链接具有可访问性，更可靠，更简洁。

　　弹窗链接就是点击后会弹出新窗口，并且依赖于Javascript实现。通常情况下，弹出新窗口的链接是通过设置链接标记A的“target”属性为”_blank”来实现的。但是Javascript还是被经常用于实现弹出窗口的特殊效果，或者文档的DOCTYPE不允许“target”属性。

链接基础知识

　　概念很简单，但是我们要解释一些术语为下面内容作些铺垫：

　　我们会用到HTML的A标记，并会用到它的”href”和“target”属性。我们还会使用Javascript的“window.open” 方法，并涉及到它的三个参数“url” “name” “features”。下面是这两种方式的类比表格：

概念	a 属性	window.open 参数	说明
链接地址	href	url	要链接到的地址
目标窗口	target	name	一个显示窗口的标识符
特殊功能	N/A	features	目标窗口的呈现形式(大小、工具栏等)

---

糟糕的做法

　　首先，我们来看一个典型的有问题的html弹窗链接。

<a href=”JavaScript:raw_popup(’http://example.com’);void(0)”>pop me up</a>

　　这段代码存在两个严重的可用性问题，第一个很明显，不支持Javascript的用户无法实现跳转。

　　原因很简单，也很愚蠢，链接的地址被写成了一个Javascript函数，而不是实际的url地址。

丑陋的代码

　　第二个问题不是很明显，但是很具有讽刺意义，当用户本来就打算在新窗口中打开此链接的时候，就会出现无法打开页面的问题。
　　当我使用右键单击该链接并选择在新窗口或新标签中打开的时候，很明显，浏览器取得这个链接的href属性中的地址，然后填入新窗口的地址栏。但是href属性的地址不是真正的URL而是一段Javascript，所以浏览器无法找到页面。

　　你可以注意到上面的两个问题全都是源于链接地址的位置被写入了不是地址的Javascript，更好的解决方式就是链接的href属性为真正的链接地址，然后使用一个事件捕捉打开一个弹出窗口，并且设置窗口的各种属性。
下面是一个示例：

<a href=”http://example.com” onclick=”raw_popup(’http://example.com’); return false”>pop me up</a>

　　为了避免冗余，我们可以把链接对象传给处理函数，来取得其href属性：

<a href=”http://example.com” onclick=”raw_popup(this); return false”>pop me up</a>

　　不过第一个示例也不是不好，如果你希望给支持和不支持Javascript的用户提供不同的访问地址，就可以使用第一个示例的方式。并且要记住，通过右键新建窗口打开的地址是href属性中的地址而不是Javascript函数中的地址。

　　如果你希望看到一些强大的Javascript，请不要走开。现在我们做的不是怎样去部署Javascript，而是实现优质的HTML代码。上面的两个示例已经解决了可访问性问题，因为它们的href属性中都是实际的目标地址，这已经足够了，但是我们可以做的更好。

使用HTML完成

　　我编码的原则是如果HTML能够实现的决不用Javascript，Javascript只是一种对HTML的补充。HTML可以打开链接吗?可以。HTML可以弹出新窗口吗？可以(至少是 transitional DOCTYPE)。HTML可以定义弹出窗口的外观属性吗？不能，这才是Javascript引入的原因。
下面是一个改进的HTML代码。

<a href=”http://example.com” target=”_blank” onclick=”raw_popup(this); return false”>pop me up</a>

　　加入了target属性后我们可以确保即使用户不支持Javascript也能够在新窗口打开链接，虽然这样无法定制弹出窗口的样式。
部署Javascript
现在我们的HTML很简洁，现在我们的要部署一些Javascript代码了。下面是一些功能完善的弹出窗口脚本:

　　让我们来仔细看看。
raw_popup是一个”window.open”的增强，使你的工作更简单：

• 更好的默认选项，如果没有定义目标窗口，默认是”_blank”。如果不定义窗口属性，默认属性存在全局变量_POPUP_FEATURES中。
• 焦点：如果弹出窗口已经存在，那么将会被显示在最前。当我们在同一弹出窗口中显示多个页面时，对于使用性而言使窗口显示在最前是正确的方式。

link_popup是专门为使用链接来打开弹出窗口的。它可以获得链接的href属性，和target属性，如果target属性没有定义，那么默认为”_blank”，这使得函数兼容DOCTYPE为strict的文档。

isUndefined函数是一个Js Library中的函数，下面还会用到一些Js Library中的函数。（Js Library），如果你只是想在一个页面中弹出一两个窗口的话，上面已经足够了。如果要进行一些重量级的应用，比如图片相册，CMS系统，那么请继续阅读。

将呈现与逻辑分开

　　你可能经常听说呈现与逻辑分离是多么多么的重要，是的，这确实很重要。我们回头来看一段HTML代码，有些代码不属于那里，是什么呢？Javascript,没有了onclick。

<a id=”my-popup-link”
href=”http://example.com”
target=”_blank”>pop me up</a>

　　现在我们必须给那些要弹出窗口的链接增加一个事件监听器，通过Javascript增加监听器要加入下列代码，并且要放在文档的头部。

function event_popup(e) {
link_popup(e.currentTarget);
e.preventDefault();
}

listen(’load’, window, function() {
listen(’click’, ‘my-popup-link’, event_popup);
// … other onload statements
}
);

　　如果你想要给一个文档对象增加事件监听器，这个对象一定要存在于文档树中。当文档加载完毕，将触发window对象的一个load事件。这时我们可以确定文档的所有对象都被加载，我们使用listen给文档对象注册事件处理函数。

listen是一个跨浏览器的addEventListener()的别名部署，它有三个参数：event， elem，func。为了获得elem对象，使用了getElem方法，这个方法也是Js Library中的函数，用来替代getElementById，它即可以获得对象的ID，也可以获得对象本身，也就是可以返回字符串，也可以返回对象。

　　你会注意到e.currentTarget 和e.preventDefault，IE并不能实现，但是listen 的一个很有用的功能就是，在IE中，将会传递两个虚假的事件对象，来模拟上面的”e”，来实现e.currentTarget 和e.preventDefault。

DOM 也疯狂

　　通过ID给一个对象增加监听器，在需要弹出窗口很少的时候没有问题。当链接很多的时候，这种方式就会很繁琐。基于这种情况，推荐使用mlisten。

　　mlisten和listen很类似，不同的是它操作的是一个对象列表，为列表中的每个对象增加监听器。这个列表可以是一个NodeList，或者一个对象数组，ID数组。下面是一个例子：

mlisten(
‘click’,
document.getElementById(’my-link-list’).»
getElementsByTagName(’a'),
event_popup
);

　　也可以通过classname来获得链接列表，使用Js Library中的getElementsByClass(className [, tagName [, parentNode]]):

mlisten(
‘click’,
getElementsByClass(’popup’,'a’),
event_popup
);

　　这个函数在一个元素使用多个用空格分开的classname的时候也可以工作，因此你可以用一个classname定义元素的样式，另一个用来指示行为。记住这些操作都要在window.onload中。

一个小问题

　　在使用监听器的时候，我们不能传递参数给触发函数，这使我们不能为每个链接定义不同的弹出窗口样式？不是的，下面是解决方法。

function event_popup_features(features) {
return function(e) {
link_popup(e.currentTarget, features);
e.preventDefault();
}
}

// onload…
listen(
‘click’,
’some-link’,
event_popup_features(’width=300,height=800′)
);

我们通过event_popup_features返回一个函数，这样就可以通过event_popup_features给link_popup传递参数了。

示例文件
原文：Accessible Pop-up Links from alistapart.com