风羽博客 | 专注网站前端设计

Web前端开发工具整理

风羽 — Mon, 17 Oct 2011 14:25:44 +0000

大名鼎鼎的Firebug

Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但FireBug最吸引我的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能还很强大，比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。

微软的Fiddler

Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据，fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。

微软的Fiddler 包含一个简单却功能强大的基于JScript .NET 事件脚本子系统，他非常灵活非常棒，可以支持众多的http调试任务。Fiddler 是用C#写出来的。它还是一个http调试代理，它能够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。

FSCapture

FSCapture是一款抓屏工具，附带的其他三个小功能：取色器、标尺和屏幕放大镜。对抓取的图像提供缩放、旋转、减切、颜色调整等功能。只要点点鼠标就能随心抓取屏幕上的任何东西，拖放支持可以直接从系统、浏览器或其他程序中导入图片。

A标签点击去除边框虚线

风羽 — Tue, 26 Jul 2011 04:51:05 +0000

a{outline:none;}
a:active{star:expression(this.onFocus=this.blur());}/*IE*/
a:focus{outline:none;}/*FF*/

a {outline: none;star:expression(this.onFocus=this.blur());}
直接写在A标签有些瑕疵，不完美，页面渲染想来可能会很卡，原因是写在A里，那么不管是鼠标放上，鼠标点击，还是默认，都会执行 star:expression(this.onFocus=this.blur());，

解决办法就是写成这样：
a:active {outline: none;star:expression(this.onFocus=this.blur());}

实现的效果是要点击的时候没有虚线，所以就写在a:active里就可以了
要同时兼容IE和火狐浏览器，样式直接写成以下就可以：
a {outline: none;}a:active {star:expression(this.onFocus=this.blur());}

也可以单独写：
===IE===
为链接添加onFocus事件
if(this.blur)this.blur()或者用IE的私有属性hideFocus=”hide”;

===Firefox===
添加CSS
:focus{outline:0}
该CSS可以作为全局存在，即在样式表中单独存在一行该代码即可时全页面的链接不带有虚线框。

===Chrome, Safari===
这两个浏览器在点击链接时本身没有虚线框

===Jquery框架===
如果你使用Jquery框架的话，可以添加以下代码即可实现(raycross 提供)
$(“a”).bind(“focus”,function() {
if(this.blur) {this.blur()};
});

最终用法是在CSS文件直接加入：
a {outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
:focus { outline:0; }

如果页面上只有一两个链接的话，直接加到里面也行，就像这样
< a href=””#”” onfocus=””this.blur()””>

收集了几款日期选择表单控件

风羽 — Sun, 08 May 2011 05:19:23 +0000

第一款较简洁，我作了小小的修改，改成中文日期形式；

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html debug="true"> <head> <title>jQuery Date Input</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript" src="http://www.phoyu.com/myjs/jquery.date_input.js"></script> <script type="text/javascript">$($.date_input.initialize);</script> <link rel="stylesheet" href="http://www.phoyu.com/css/date_input.css" type="text/css"> </head> <body> <h2>This is a test</h2> <p>Please see the file TESTING for more information.</p> <form action="#"> <p> <input type="text" name="date" class="date_input"> </p> <p> </form> </body> </html>

提示：你可以先修改部分代码再运行。

第二款是My97日期控件，功能相当强大，也非常方便使用和修改。

地址：http://www.my97.net/dp/index.asp

第三款，下面这一款是多样式、多类型的一个日期选择插件。

http://jqueryui.com/demos/datepicker/

细节让网页设计与众不同

风羽 — Tue, 29 Mar 2011 15:19:01 +0000

细节使得这个世界从平凡变得不平凡。

一辆豪华汽车与传统汽车拥有同样数量的车轮、座位、门窗，但是使得它在竞争中脱颖而出的却是花费在细节上的时间。加热真皮座椅，一按即启动引擎，无钥车门开关，自动泊车系统，丰富的数字电台等等使得它成为一辆昂贵的新型车。

同样的规则也适用于网页设计。愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。这里的关键词就是价值。我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系，总有一些细节比其他更加重要，关键是要能够确定哪些细节更具有影响力。

增加价值的细节

这一类型的细节是我们愿意在审美层面之外花费额外时间以改进我们工作的细节。我们希望专注于可以深入改变用户体验的视觉调整，例如用户对该网站的主题和消息的体验或者他们如何畅游网站。

一般的没有建站经验的网站访问者，无法指出某些细微差别来的用户体验改善，但是如果这些细节被移除，用户将在感知和可用性方面感觉到明显的差异。这些就是我们愿意花费时间的细节。

那么一个设计细节到底如何为网站带来附加价值呢？诀窍就在于用户体验。网站设计师应该能够出色的理解负空间、对比度、形状、颜色和所有不同的视觉元素在用户使用和体验一个网站设计时所起的作用。真正令人惊讶的是设计者仅仅需要操纵几个像素就可以发生很大的差异，使之产生更大的影响。

这些差异到底是什么？

进一步观察

我觉得Photoshop最令人舒服的是当我将图片放大到500%甚至更大时，它看上去就像在家一样舒服。我们来仔细研究一些相当成功的用细微细节引导用户体验方面图片吧。

以Concentrate 网站为例，它看起来很适合我们初次集中精力来欣赏。从一个高层次的视角开始，我们可以看到Concentrate网站的使用了一个富有创意视觉技巧。

除了这罐橙汁，我们看到一个橙色为主题的调色板和背景，很好的模拟了真实的橙子的果肉口感。进一步研究，我们发现它使用了CSS3为文本增加一些阴影来增加与背景的对比。为了真正的欣赏细节，我们需要在进一步的研究。

像素级完善

真正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围，靠近网页布局顶端的部分。首先，按钮背后的阴影将页面上的这部分突出出来。该区域顶端和底部的两个简单的单像素线是一个简洁的设计方式，它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。

其中的一个单像素线条更引人注意，这是因为它使用了亮橙色。它为两者之间的阴影和背景提供了对比，但是真正起作用的却是第二个暗橙色的线条。两个线条相互配合起来封锁了这个顶部区域。

差异

当这个页面不再包括这些线条的设计的时候，差异就能最好的表现出来。下面，我将移去这些线条来向大家展示两个像素能够带来怎样的不同。

微妙的阴影

阴影效果对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并且经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。

我们在设计中采用CSS3，它可以带来的宏伟的差异让我们很容易为之兴奋不已。而对于我来说，真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。

还是来看这个Concentrate网站，它是一个很不错的例子，使用巧妙而有效地使用文字阴影效果使网站内容更容易阅读。这里以两种方式使用了CSS3的text-shadow属性。首先红色的标题在与背景颜色相近的情况下，被赋予淡淡的阴影以产生内嵌式的效果。基次在段落后面简单地给白色一点发射效果。

差异

比较上面的截图以及同样的页面在IE8（不支持text-shadow属性）下渲染的效果，我们就能发现它更难看得很多。

值得指出的是这个网站卖的是Mac软件，所以自然地不那么重视IE用户的体验了。

导航细微差别

除了增强易读性和强调可能的网站操作，细节对网站导航也有很大的帮助。任何网页最重要的部分之一就是如何将用户导航到另一个页面。毕竟链接是起初使得网页之所以称之为网页的核心，所以为什么不多花一点点时间在适航性上呢？举个例子，我们来看 Lipperhey 站点。

除了为导航的活动状态选择好的颜色以外，我们发现它的设计为网站的主导航栏添加了一些用趣的细节。
Home按钮由于一些颜色变化之外的原因而很显眼。首先我们可以看到它从导航栏下沉了几个像素。其次，按钮背后被加上了阴影并且对透明度做了轻微的调整。这两个细节一起为这个链接赋予了附加维度的感觉，指示了它的重要性及激活状态。

差异

再看一下没有上面提到的细节的导航，我们发现很多令人兴奋的东西都没了并且我们的激活链接会有完全不同的样子和感觉。

细节更进一步

我们研究了一种运用CSS3的一些新功能来辅助我们设计的方法(text-shadow)。但CSS3的强大远不只是阴影。CSS3动画，表现为transform和transition的属性，给我们的细节工作增加了额外的工具。

只要使用得当，CSS3动画为我们的网页元素添加高效的动画效果，而不需要借助Flash或JavaScript。在细节方面，动画允许我们在各种输入情况向用户提供流畅的反馈。例如为链接的hover状态或按钮点击添加过渡动画，可以告诉用户他们鼠标正悬停在（或触摸，对于触屏移动设备）一个活动的元素上面。

与网站细节相伴的工作的美好在于通过进一步努力，我们仍然可以为我们的用户提供部分价值，而不需要疏远那些使用过时的浏览器的用户。关键之处在于我们要使用所有这些技术来为已经很可靠的网页设计增加价值，没有一个基本的可靠的设计而空谈学习这些技术就是本末倒置。

网站还能在哪些细节方面改进来增加它的价值呢？你做过的项目还成功地使用过哪些类型的细节技术？[English]

转载：
作者：RockUX–WEB前端
出自：细节让网页设计与众不同

一些知名网络公司的设计原则实例

风羽 — Sat, 05 Mar 2011 05:02:58 +0000

经常有人问我怎样才能从头脑风暴中所获得的数以百计的创意中选出合适的一个。除了靠直觉和经验外，还有一种方法可以帮我们来决定和界定设计原则。在2007年以前，我们将这些原则称为“设计标准”，现在又有了一个新的定义，就是“设计原则”。

什么是设计原则

l 立足于设计研究
l 简短易记
l 跨功能
l 明确而非“简单易用”
l 将差异化聚集在一起
l 不矛盾

设计原则就是描述了一项产品或服务体验的核心价值。

设计原则的编写应该简短易记。而作为设计师，在做项目的时候则应将这些原则熟记于心。即便有些功能交叉，但一个优秀的设计原则通常都具有明确的功能。因此我们不能将它定义为“简单易用”。设计原则不应矛盾。

设计原则只是用来帮助选择创意，而非产生创意。

设计原则只是帮助人们来选择创意的，而在激发创意的初期就过于坚持这些原则并非一件明智的事情。尽管在头脑风暴时用实体框架来激发创意是个好办法，但在初期草画创意时无需过多的局限于此。否则，我们很难想出一个绝佳的创意。有时一个创意虽然不符合设计原则，却可能给其他设计师带来符合该原则的创意灵感。

下面例举一些知名网络公司的设计原则实例

谷歌用户体验的设计原则

1.      以人为本 – 关注人们的生活，工作和他们的梦想。
2.      争分夺秒。
3.      简单实用。
4.      留住初学者，吸引专家。
5.      勇于创新。
6.      面向全球用户设计。
7.      立足今日，面向未来。
8.      产生视觉愉悦，保持用户关注度。
9.      不辜负人们的信任。
10.   有点人情味。

谷歌日历的设计原则

1. 快捷
2. 具有视觉吸引力及愉悦的使用体验
3. 用极其简单的方式将信息汇集到日历中
4. 屏幕上不光是表格（还有提醒。邀请等）
5. 便捷的分享功能，从而在一个地方关注你的全部生活

微软界面设计团队给自然用户界面的定义

1. 能产生共鸣：性能美学原则
2. 非中介性：直接使用原则
3. 快速简便：手脚架原则
4. 互文性：互文环境原则
5. 直觉：绝对真实感原则

微软的界面应该是：

1. 社会化：多用户同时使用
2. 无缝对接：数字与实体相结合
3. 空间性：人体运动学

Tivo的设计原则

1. 它是娱乐，笨蛋
2. 它是电视，笨蛋
3. 它是视频，天呐
4. 一切平滑轻柔
5. 不做作，结构简单
6. 尊重用户隐私
7. 与电视一样，是耐用品

公共场所放置的有趣的公共空间椅子

风羽 — Mon, 31 Jan 2011 03:04:02 +0000

一位现居以色列的设计师希望给我们的日常生活带来更多乐趣，他设计了一些在公共场所放置的特别座椅，一些是围绕路灯旋转而上，而另一些则悬空挂在墙壁上。

多想一点，多做一点

风羽 — Wed, 19 Jan 2011 14:02:49 +0000

1 先来看个例子：

2 再举个例子：
不知道男同学们有没有帮女同学在自动售货机买过饮料，买完以后顺手递给她，这一切都很自然。
那么你会不会在递给她之前，顺手帮她把瓶子盖拧开？

顺手把某个人的Hi发给对方，或者顺手拧开瓶子盖，其实都不费什么劲。但这样就能带给对方更好的服务，超出对方预期。
关键在于：自己是不是用心，以及有没有站在对方的角度上考虑对方的需求。比别人多想一点，多做一点。

3 实际的工作中也是这样的
也许有同学看出来了，我要说的，其实不是像上面两个例子中的这样的小事，工作中也是这样的。
我们来看一下一些邮件：
邮件1 (From A 2 B)：亲爱的xxx，客户想做一个什么什么东西，你看是不是可以？
邮件2 (From B 2 A)：这个做不了，不符合我们的业务规则
邮件3 (From A 2 B)：那可以给我一个能向客户解释的理由吗？
邮件4 (From B 2 A)：哦，你可以说：xxxxxx
邮件5 (From A 2 B)：已经和客户做了沟通。这个活动对客户很重要，而且关键是她们有很大的预算，你看能不能有其他办法？
邮件6 (From B 2 A)：客户为什么要做这个活动呢？他们的目的是什么？
邮件7 (From A 2 B)：xxxxx
邮件8 (From B 2 A)：那是不是可以这样，xxxxxx

……
时间就是在这样的反复沟通中耽搁了。而且，如果不是有第5封邮件，也许一笔收入就这样离我们而去。理想的情况应该是怎么样的呢？

看看这个，是不是好很多：
邮件1 (From A 2 B)：亲爱的xxx，客户想做一个什么什么东西，你看是不是可以？
邮件2 (From B 2 A)：这个做不了，不符合我们的业务规则，具体解释是这样的：xxx。能告诉我为啥客户要做这个活动吗，预算有多少？我们可以想想是不是有其他的解决方法？
邮件3 (From A 2 B)：哦，因为客户xxxxxxx
邮件4 (From B 2 A)：那是不是可以这样，xxxxxx
为什么一定要被动的让别人推动你呢，为什么不可以自己主动出击？
还是那个问题，关键在于自己是不是用心，以及会不会站在客户的角度上考虑问题。

4 再举一个实际工作中的例子：

邮件(From RD 2 PM)：x系统在y时间出了问题，目前已经修复，请大家知晓。

这个有什么问题呢？考虑一下，如果我是这个系统的利益相关人，我会想知道什么：
* 这个问题的影响面？这决定了我是否应该采取、以及采取什么样的补救措施。
* 为什么会发生这个问题，问题发生概率怎样？
* 以后怎么避免同样的问题再次发生？
* 是否已经采取了相应的预防措施？

有的同学要说了，这样的话多累啊；原来我只用写短短一行字，现在却要写那么多。

其实在缩短由于多次沟通而造成的时间精力的无端浪费之外，这样做的好处还有两个：

首先，时常提供超出预期的体验，会给对方留下深刻的印象，这对建立良好的关系以及接下来的合作都很有帮助。提供超出预期的体验，回报是惊人的。

第二，这是一个强迫自己加深对自己的工作内容了解深度的过程。如果不主动的去多想多做，而只是被外力推着走，那可能很长时间过去，自己对工作的理解还只是停在表层。

5 最后说一个

情况1：很多人遇到了问题，找老板求助的时候会说：啊，我现在遇到一个什么什么问题，怎么处理比较合适？

情况2：而这样会好一点：
我现在遇到一个什么什么问题？具体问题描述：xxxx
可能可以采取的解决方案有：
A xxxxx；这样的好处是：xxxx；坏处是：xxxxx
B xxxxx；这样的好处是：xxxx；坏处是：xxxxx
C xxxxx；这样的好处是：xxxx；坏处是：xxxxx
因为每个方案都有好处和坏处，我无法判断哪个比较合适，请老板也看一下怎么处理？

情况1中，老板不得不怀疑：你对这个问题真的好好想过了吗？而且，做问答题可比做选择题费劲多了。

PS，如果给出了选项，但是不给出每个选项具体的分析，可能也是不太合适的。因为老板不一定在一线，对具体的情况可能没有你了解的多，只有选项的话，老板还得再分析每个选项的好处坏处。
最后再总结一下，总之，这个问题的关键还是在于：
自己的心有没有在这里？自己有没有真的站在对方角度上考虑问题？

转载：http://hi.baidu.com/whoqiaoxin/blog/item/c6a30cf45abe30ff7609d741.html

常用到的商城产品放大镜效果

风羽 — Tue, 04 Jan 2011 15:34:54 +0000

常用到的商城产品放大镜效果

提示：你可以先修改部分代码再运行。

重构者的20种死法

风羽 — Mon, 13 Dec 2010 15:06:25 +0000

最近涉及重构话题的文章不少啊，其实我也一直在憧憬重构，重构很绿色，重构很河蟹，重构令人很激动，重构可能让人死得很惨。
我在这里，就列举一下Refactorman的种种死法，以警后人：
一、一边重构，一边要完成日常任务……
1. 疲于奔命，过劳而死。
2. 吃领导给的鸭梨太大被噎死。
3. 满脑子都是代码，在上班路上不留神被撞死。
4. 冷落了女友，受失恋打击跳楼而死。
5. 无暇社交，不懂人情世故，失意而死。
6. 为了说服领导和同事，心力交瘁而死。
二、重构过程中……
7. 被以前的混账代码气死。
8. 被以前的混账代码搞崩溃，神智错乱而死。
9. 终于明白问题只是冰山一角，力有未逮，忧愤而死。
10. 泥足深陷，举步维艰，进退维谷被活活困死。
11. 自己昏天黑地，看其他同事却吊儿朗当，逍遥快活，心理不平衡致忧郁而死。
12. 重构过程中，踩中前任留下的地雷，被炸得体无完肤而死。
13. 一日偶遇以前代码的作者，怒不可遏，将其一通乱砍，再鞭尸三百，然后切腹而死。
三、千辛万苦，大功告成……
14. 系统重构后性能提高了？漏洞消除了？对不起，领导们没兴趣，失落而死。
15. 系统重构后出现了新Bug，多半会小题大作，被批斗而死。
16. 马上接到通知系统功能要大升级，吐血而死。
17. 同事依旧我行我素，继续在系统中倒垃圾代码，痛心疾首而死。
18. 重构将系统中的阴暗面曝光，被同事记恨，领导排挤而死。
19. 过了不多久，发现系统又乱成了一团，比以前好不到哪儿去，悲愤下一头撞死。
20. 离职后偶遇前公司的新任维护者，被其乱刀砍死再鞭尸。
各种死法中，最后一种，我们比窦娥还冤枉。所以强烈推荐大家还要练一门武功以防身。什么武功，就是：“心惊肉跳、杞人忧天、无中生有、力不从心、行尸走肉、庸人自扰、倒行逆施、废寝忘食、孤形只影、想入非非、呆若木鸡……”。这门传说中的黯然销魂掌，其中一招一式，正是我们最好的写照。

转载：http://www.cnblogs.com/XmNotes/archive/2010/12/13/1904377.html

分享【jquery插件】图文切换效果

风羽 — Wed, 24 Nov 2010 15:04:37 +0000

挺不错的一个效果，做网页的设计的朋友可能在某些时候能用得上。

参数说明：
effects “flaser”效果(默认)|
“scroll”效果|
“fade”效果
speed 效果执行时间；normal（默认）

分享【jquery插件】图文切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>【jquery插件】图文切换效果</title> <link href="http://www.websjy.com/club/websjy_index/38/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.websjy.com/JS/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> (function($){ $.fn.imgTxtCut=function(options){ var opts = $.extend({},$.fn.imgTxtCut.deflunt,options); var targetObj=$(this).find("li"); var targetObjH=$(this).find("li img").height() return this.each(function() { $.fn.imgTxtCut.effect[opts.effects](targetObj,targetObjH,opts); }); }; $.fn.imgTxtCut.effect = { flaser:function(targetObj,targetObjH,opts){ targetObj.hover(function(){ $(this).find('img').stop().animate({height:"0"}, opts.speed); },function(){ $(this).find('img').stop().animate({height:targetObjH},opts.speed); }) }, scroll:function(targetObj,targetObjH,opts){ targetObj.hover(function(){ $(this).find('.scrool-box').stop().animate({top:-targetObjH}, opts.speed); },function(){ $(this).find('.scrool-box').stop().animate({top:0},opts.speed); }) }, fade:function(targetObj,targetObjH,opts){ targetObj.hover(function(){ $(this).find('.imgBox').stop().animate({opacity:0.1}, opts.speed); },function(){ $(this).find('.imgBox').stop().animate({opacity:1},opts.speed); }) } }; $.fn.imgTxtCut.deflunt={ effects : "flaser", speed : "normal" }; })(jQuery); </script> <script type="text/javascript"> $(function(){ $("#img-txt-box1").imgTxtCut({ speed : 300 }); $("#img-txt-box2").imgTxtCut({ effects:"fade", speed : 300 }); $("#img-txt-box3").imgTxtCut({ effects:"scroll", speed : 300 }); }); </script> </head> <body> <h1>【jquery插件】图文切换效果-<a href="http://d2.sodao.com/">Sodao设计组</a>-<a href="http://www.sodao.com/">搜道网（美女时钟）</a></h1> <div class="table-box"> <table width="300" border="0" cellspacing="0" cellpadding="0" class="KS-table"> <tr> <td colspan="2">参数：</td> </tr> <tr> <td width="36%">effects</td> <td width="64%">flaser效果(默认)<br /> “scroll”效果<br /> “fade”效果</td> </tr> <tr> <td>speed</td> <td>效果执行时间；normal（默认）</td> </tr> </table> </div> <hr /> <h2>flaser效果(默认)</h2> <pre>$("#img-txt-box1").imgTxtCut({ speed : 300 });</pre> <div class="img-txt-flaser clearfix" id="img-txt-box1"> <ul> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> </ul> </div> <h2>scroll效果(默认)</h2> <pre>$("#img-txt-box3").imgTxtCut({ effects:"scroll", speed : 300 });</pre> <div class="img-txt-scrool clearfix" id="img-txt-box3"> <ul> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> <li> <div class="scrool-box"> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </div> </li> </ul> </div> <h2>fade效果</h2> <pre>$("#img-txt-box2").imgTxtCut({ effects:"fade", speed : 300 });</pre> <div class="img-txt-fade clearfix" id="img-txt-box2"> <ul> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> <li> <div class="imgBox"><a href="http://www.websjy.com/"></a></div> <div class="txtBox"> <h3><a href="http://www.websjy.com/">标题标题标题标题标题标题标题标</a></h3> <p><a href="#">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述述</a></p> </div> </li> </ul> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3448069-6']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>

提示：你可以先修改部分代码再运行。

简单的页面加载 (Loading) 效果

风羽 — Sat, 20 Nov 2010 17:01:46 +0000

页面加载效果，也就是通常所说的 Loading 效果，能提示访问者使其耐心等待页面加载的完成，有效防止流量损失。

如果服务器置于国外，国内访问可能比较慢，这时友好的页面加载提示就非常有用。当然，通过繁杂的 Ajax 等技术，可以很好的实现。但芒果生性笨拙，只会简单的 HTML+CSS 和仅有的几句 JavaScript，所以此方法没有多少技术含量。

假设需要在加载过程中，页面右上角显示红色的“正在加载中…”提示信息。原理很简单，HTML 代码的部分解释前插入此提示信息，解释完成后隐藏它即可。

首先，在标记后插入：

页面加载中...

你可以自由定义 loading 这个 id 的样式。芒果将其设置为红色背景，白色文字：

#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:0px;right:0px;padding:2px 10px 2px 10px;}

最后，用 JavaScript 代码输出样式，在标记前将其隐藏：

对于 WordPress 用户而言，使用过多插件会导致页面加载速度严重减缓。如果这样，不妨试试这个简单的方法。

3个你可能从未用过的HTML标签

风羽 — Fri, 24 Sep 2010 03:59:56 +0000

html标签众多，在HTML手册里你可以都查到。但有的HTML标签你可能从未使用过。不是因为你欠缺学习精神，而是它们确实用处不大。如果你有探索精神，那就接着往下看吧。

第一个：或

这两个标识是一回事，主要是用于一些英语的缩写，当你把鼠标移上去的时候，你会发现会出现一个小提示来提示缩写的全称，前提是你给标签添加了title属性。但在HTML 5中将废效这个标签了，也好，这么难记的单词。下面是一个示例：

HTML
IEEE
RTFSC

HTML    IEEE   RTFSC

第二个：

这个标识主要就是把引用的文字加上双引号，比较长的引用我们用，比较短的就可以用。下面是个示例：

这个是一句引言

这个是一句引言

第三个，

这个标识很有意思，可以把从左到右的字序全部反转过来。比如：May I help you sir ? 如果加上了这个标识后，就是下面这个样子：

May I help you sir ?

什么事可以为你效劳啊？

May I help you sir ?  什么事可以为你效劳啊？

解决弹出层被FLASH覆盖的问题

风羽 — Thu, 16 Sep 2010 12:06:38 +0000

在下拉导航下面常常是FLASH焦点图片，下拉菜单常常给FLASH挡住
做一个FLASH中国地图，一些交互性的对话框弹出层等

试图设置DIV的z-index属性并不奏效。

解决方案：

一、设置flash为透明：但是如果你在DW中插入动画，再加是不生效的。要把整个的flash插件代码换成如下：

对比一下，和DW自动生成的代码是有区别的，测试过，IE　FF　均可以。

二、设置flash置底，加个代码：但是只加这个代码，IE可行，在FF下，失效。要想在FF下起作用，还要用在object　里加个　wmode=”opaque” ，12实例代码如下：

codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”560″ height=”210″>

type=”application/x-shockwave-flash” width=”560″ height=”210″>

wmode 属性/参数

值 Window | Opaque | Transparent

说明：

（可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player
ActiveX 控件的 Windows 中有效。

“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。”Window”表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。

“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。

“Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。

“Opaque windowless”和”Transparent windowless”都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。

这两种选项之间的差异在于”Transparent”允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而”opaque”则不会显示。

如果忽略此属性，默认值为 Window。仅适用于 object。

几款树矢量图

风羽 — Fri, 10 Sep 2010 14:56:10 +0000

几款树矢量包括AI、eps，如图

下载：树矢量

更小更快更灵活——设计师谈敏捷

风羽 — Mon, 06 Sep 2010 09:05:29 +0000

腾讯一直推广敏捷开发，也在强调敏捷开发，但你会发现，即便如此，还是会陷入以下情景

又丑又长的讨论会
好像人手永远不够
不切实际的想法
悬而不决的功能点
无穷尽的偏好设置
越来越多纠缠不清的细节
项目依然延期

我们如何构建一个更轻巧的开发流程，让我们更快更好的交付结果？作为一个设计师，如何成为敏捷的一分子？以下是一些心得方法，希望和大家分享

1 界面先行

作为设计师，最简单能让大家明白你的想法就是先把它画出来，不要用晦涩的语言和结构图，毕竟不是所有人都能把你的语言转化为图像。而且界面（视觉，交互）设计是相对轻量级的，修改起来也简单，成本也低。但修改程序就远不是那么回事了。保持界面先行可以让你非常灵活，至少在开始开发之前可以随意修改。

界面先行另一个最重要的原因就是，对于用户来讲，界面就是你的产品，界面可以帮助你从用户角度看待自己的产品，如何展现，如何操作，给人感觉怎么样，是不是易用。只有当你面对真正界面的时候才能回答这些问题，文档概要并不能帮你解决实际用户体验问题。

2 初期不需要太关注细节

虽然大家总说，成功来源于细节，当然，这非常对。但前期过分关注细节的同时也会令你止步不前。先把大框架确定下来，而不是一直纠结于

这条提示怎么写更合适？
文字字号用16还是14？
要不再往左挪1像素？
这里加个高光把
把2像素的描边变成1像素

你需要关注细节，但不是现在。所有事情都要从大到小的去做。先把他做出来，把该放的东西放上去，然后实际去用一下。

细节是你在使用的过程中才会慢慢显露出来，只有在使用中你才会发现哪些更值得关注。如果你有足够的时间，当然可以面面俱到，如果没有，请先把精力放在最重要的事情上。

3 不要纠结那些还没有成为问题的问题

“当我们的用户用了这个功能以后还想跟另一个功能配合使用怎么办？”

如果想快速推出版本，就先解决当下。不要花太多时间去考虑还没有成为麻烦的问题。别担心，你还有后续版本。

而且你就真那么确定用户想跟另一个功能配合使用么？如果不是，就先放一边，等问题真正浮出水面的时候再去快速解决。

4 帮助产品经理精简功能

好像大家都在弩着一股劲，比谁做的多。竞争对手的产品如果做了**，我们就要做***，他们有4个功能，我们就要做5个。如果不做，拿什么跟他们竞争？

这种方式是行不通的，因为你会发现，永远是赶超，永远没有自己领跑的那一天。怎么办？

做少

通过做少来打败他们

做的功能越多，功能间的交互就会越复杂，用户的学习成本就会越高。而我们的用户真的用的上那些高深的功能么？他们会不会已经被那些多如牛毛，但我们自以为高明的设置搞得疲惫不堪？试着少做一点，让自己的产品更加轻巧而更具备亲和力——没有人会喜欢使用显得自己很笨的软件。

5 功能间更少的牵扯

把一个功能点做的尽量独立，能保证需求改变时更为快速，更为灵活。

如果功能间的牵扯太多，就如同你身上沾满了蜘蛛丝，每做一点改变，其他的都要进行改变，从设计，到开发，到测试。当你发现改变的代价太大时，你就会放弃，然后依旧背负着带有缺陷的功能一路走下去。

为什么不开始就尽量少牵扯呢，这样更加来去自如

6 要有自己的主张

虽然交互设计通常都会处在不黑不白的阶段，因为没有绝对的对与错。但我们还是需要坚定自己的主张。也许果断的观点看起来目中无人，但总比那些“嗯……其实这样也成……”模棱两可要好的多。敏捷开发中需要的就是快速做决定，而不是唯唯诺诺和稀泥。

————————————————————————————————

也许并不是所有的项目都适合，毕竟初期不考虑细节必然要考虑后期更改的成本。但对于一个新产品，快速触达用户，让用户来使用，验证，反馈，得到的数据更加真实有效。根据这些反馈作出的调整总是比自己拍脑袋来的简单，更加符合用户需求。

敏捷，并不只是站立晨会，迭代总结，理论，文档，更需要的做的是，把它做出来。

(本文出自Tencent WSD Blog)

网页设计师美丽的陷阱

风羽 — Wed, 01 Sep 2010 08:01:01 +0000

从上面的图片你看到了什么？请思考

这是有一次陪同商务同事去一家内衣公司洽谈业务时，内衣公司的网络负责人对我提出的一个问题。当天我们一行4人大概花了2个小时的车程到达客户公司，这家公司在业内有一定知名度，在当地的规模属于比较大，所以感觉上大家都非常重视这一次企业网站建设的谈判。经过3个小时的会谈，到下午2点多吃完饭继续开会，此时已感觉有点疲倦不堪了，客户突然打开了爱慕的网站，指着上面的图片问道：从这张的图片中你能看到了什么？

不知道是不是上午讲了太多东西的原因，一时间突然哑口无言，面对这么简单的一个广告创意居然脑子一片空白，好一会讲不出话来。好在这时商务同事反应迅速，一语惊醒梦中人，她指着那幅由幻灯片打到幕布上面的图片说：这就是爱慕。的确，巩俐这回眸一笑，眉宇之间与男主角暗送秋波，男主角也含情脉脉地望着巩俐，这不就是他们的爱慕之情么。

这个问题你的答案是什么？

回来之后，我将客户这个问题同样地问了设计部的同事，当时大家的回答大概就是这张相处拍得好比较漂亮，所以就放上去了或者是这应该是推荐的重点新品，肯定要放到首页了。后来，我又把这个问题发到国内一个专门做互动的QQ群里，有像灵思、新意这些知名互动公司的设计师在里面，但得到的答案也是类似于此，也有人回答说这可能只是装饰的作用，不一定要表达什么的。说实话，如果当时我回答客户的话，可能也是这些答案。

引起网页设计师思维瓶颈的原因

这么简单的一件事情让我想到了更多，在当前对设计要求越来越高的同时，大多数网络公司的网页设计师似乎并没有跳出固有的思维模式，视觉设计是第一要素这是无可厚非的，但拥有灵魂的设计看才像是一个整体，网页设计师非常注重外表而更少关注思想这样的一种现象，设计师博客设计经历中也有提过，究其原因有下面两点：

一、甲方就是这么想的

设计师不是客户，有时很难抓住客户的想法，许多客户在做网站的时候并不会同设计师一起去交流想法，只是一味地提出他的要求。漂亮、经典、大气这几乎都是客户共同的爱好和流行口头禅，经久不衰且长期有效，许多客户并不会太在意设计师为什么这么做，而是更在意这个版面好不好看的问题。久而久之，设计师的思路就容易被客户所主导，接到项目的时候第一反应便是怎么的版面才能获得客户通过。

二、业界就是这么干的

相信目前网络公司中由一个网页设计师单独完成一个项目是很普遍现象，稍好一点的就是一个美工+一个程序，再往上面就是界面设计师+动画设计师+程序开发，而对于设计创意策划这种工作的，只有在那些国内非常知名的创意公司或者互动公司才会存在。大部分的网页设计师面临着大量代码、Div+css、动画制作、3D、视频特效等等，这大量的工作使得大家都容易忽视了有设计理念这么一样东西的存在。诺曼早在《设计心理学》提过设计人员的两大致命诱惑之一便是陷入误区的外观崇拜，我想说我们要外观崇拜，更要灵魂的崇拜。

网页设计师应该怎么办？

“我问老段说怎么办”，周华健、品冠、李宗盛他们一起说“基本上这个很难”。在网页设计师无法改变客户想法的时候，在我们无法改变外界格局的时候，唯一的办法就是不断地提升自己，可以多读一些广告创意文案，看看别人是怎么思维的；或者多读一些设计大师的书籍，从里面可能学不到版面如何做，但可以学到他们是如何创意的，他们为什么要这么做。慢慢地你自己开始提升了，有了自己很好的设计理念可以改变客户的一些想法，这是一件多么令人愉悦的事情啊。

转载自德意之作(www.dandy.co)

两款颜色选择器

风羽 — Sat, 28 Aug 2010 15:55:58 +0000

两款颜色选择器

Input文本框形式：

提示：你可以先修改部分代码再运行。

图形所见选Input文本框形式：

下载：两款颜色选择

参加WebReBuild.ORG 2010第四届“重构人生”年会小结

风羽 — Mon, 23 Aug 2010 15:34:23 +0000

查看大图片

参加这个会收获不小呀，这也是我第一次参加这种专业性的交流会。会议从web前端技术分享展开，由技术到使用技巧到经验总结分享，再到项目操作经验分享，分享他们是如何把生活的点点滴滴融入到了重构的领域中的，从技术到理念的形成，再升华到人生哲学。

下面是这次会议每个人所分享的主题与内容：

胡坤 - Google开发推广部经理

主题：《下一代的web开发标准—HTML5》

内容：讲述了一些关于HTML5的前景与发展方向，HTML5对于互联网时代的推进，为我们展示了很多HTML5的应用。

胡坤的PPT使用HTML编写，在PPT中通过Google API展示了一些有趣的应用。“提醒API”可以从系统下方弹出提醒tips，而不仅仅是当前页面弹出。观众提问，Chrome和webkit的关系，面对IE9对HTML5某些特性的强势支持，Chrome有什么未来打算。胡坤回答，Chrome受到webkit内核的一些限制，但双方都在积极合作，希望促进未来web的发展。

石玉磊 - 腾讯资深前端工程师

主题：《Web前端开发实用工具》

内容：主要是展示了他自己开发的Fiddler插件 - Willow。可以将url指向到本机文件夹或者特定IP，监控包括但不限于浏览器的所有程序。

石玉磊是Fiddler插件 ——willow的作者，超级实用的一个插件，可以将url指向到本机文件夹或者特定IP，监控包括但不限于浏览器的所有程序。willow起名来自与他的女朋友的名字。

由于前端代码都是开放的，包括HTML,CSS,JS，所以我们可以方便地查看他人的代码。而如果要修改调试的话就需要把文件保存在本机，石玉磊介绍了一种方法，可以通过willow方便保存所有的会话（包括HTML,CSS,JS,图片）到本地。（即使不能站在巨人的肩膀上，还可以坐在他们腿上。）

BOM在前段开发中会引发大量问题，一般的建议是始终使用无BOM的UTF-8编码。willow提供了一个方便的方法检测BOM。

郑焕义 - 设计师+重构工程师/Web标准推行者

主题：《重温网站重构》

内容：重温了《网站重构》这本书，讲了一些重构工程师在做前端开发的时候需要注意的问题。

语义化有很多可能理由，比如SEO等，但是好像都跟我们无关，我们用语义化的标签的真正原因是什么呢？因为这是正确的事情，我们写正确的标签，浏览器就会在细节上为用户优化它们，除此之外还要考虑弱视弱听的用户。

邹惠斌 - 迅雷资深重构工程师

主题：《移动设备的WEB重构》

内容：从主题名字上就能清楚明白说的是什么。

手机平台下还要考虑语义化标签吗？来自迅雷的邹惠斌的建议是，有一些是建议使用，有一些是不建议的，比如ol和ul就不建议使用，因为它们的列表样式用CSS都无法定义。

建议在移动设备开发中，个别兼容，个别不同展现，针对不同平台用不同的样式表现。观众提问提到 html5 manifest，这确实是非常有趣的一个特性，但它能在项目中运用到什么样的程度，还有待探讨。

张思坚 - 彩讯资深前端工程师/最早的前端开拓者

主题：《浏览器兼容性》

内容：首先是介绍了各个浏览器，还有内核。然后就介绍浏览器兼容性方面的知识，还有CSS Reset 和 CSS heck的问题等。

兼容策略：

1、用重设尽量减少浏览器之间的差异；

2、通过W3C的支持度来区分标准浏览器与非标准浏览器；

3、通过内核来区分；

4、通过特定版本Bug…；

5、借助脚本区分浏览器及版本；

介绍了几款文本编辑软件，像Aptana、Editplus、Vim等，都是特别酷的！

陈军 - 金蝶资深项目经理

主题：《Scrum敏捷项目管理》

内容：讲述了重构是敏捷开发中很重要的一部分。Scrum是一个敏捷开发框架，是一个增量迭代的开发过程。Scrum在团队中起到的重要作用。

在每一次迭代开始之前产品经理都会准备一份排好优先级的需求列表，团队可以提出意见，哪些优先级可以排高一些，最后由产品负责人确定本次迭代要开发的功能。在以后的迭代开始之前负责人有权调整这些需求的优先级，以确保每一次团队都在开发最有价值的需求。

Scrum里有一个经典事件：每天早上有一个15分钟的Scrum简会，每位团队成员陈述当前状态，记录在白板上。白板无论对于内部成员还是对外部接口都是一个很好的描述项目进展的展示板。Scrum Master要保证团队不受打扰，保持项目的心跳，让团队自己发挥潜能。

Scrum的核心是“拥抱变化”，它的迭代周期很短，在迭代完成之后的功能演示会议上客户会提出一些需求。因为互联网行业中客户在看到界面之前往往不清楚自己需要的是什么，通过完成核心需求来展示给客户界面，可以让他提出意见，团队好进行下一轮的迭代讨论。

梁璟彪 - WebRebuild创始人之一/Web标准推行者

主题：《化烦为减》

内容：运用了两个-哈-佛-大-学-曾经讨过的课题，引出两种价值取向：是否功利主义。提出了“重点，中点，终点”和“看三，说二，做一”的观点。

果然是压轴的精彩分享，讲点技术讲点生活，又围绕着技术和工作，有大师的风范形散而神不散。从技术开始，由一首歌《每天爱你多一些》引发，最后上升到整个人生：什么都略懂一点，生活更精彩一些。

一组多样式jQuery版的无缝滚动图片代码

风羽 — Fri, 20 Aug 2010 15:22:40 +0000

图片滚动是网站设计中常常用到的效果，也收集过不少，复杂的简单的，但经常都是要用的时候，也不爱从硬盘里面找，因为收集这一类东西太多了，找起来不能很好的预览到效果，最后更多的是再从各资源网站找，或直接找百度谷歌。

这一组多样式jQuery版的无缝滚动图片代码，挺不错的，有多种效果可以设置，可设为垂直或横向滚动。可以直接加载也可以用Ajax形式异步加载，真是方便也强大。

现在我就把它整理一下，主要界面截个图片方便快速查找使用。

浏览器支持：
Internet Explorer 6 (PC)
Internet Explorer 7 (PC)
FireFox 1.5.0.6 (PC/Mac/Linux)
Opera 9.01 (PC/Mac)
Safari 2.0.4 (Mac)
Safari 3.1.0 (PC)
Konqueror 3.4.0 (Linux)

下载：一组多样式jQuery版的无缝滚动图片代码

图片滚动控制JS效果

风羽 — Mon, 16 Aug 2010 15:04:25 +0000

超级经典一套鼠标控制左右滚动图片带自动翻滚

新浪招聘的图片滚动控制JS效果

提示：你可以先修改部分代码再运行。

风羽博客 | 专注网站前端设计

Web前端开发工具整理

A标签点击去除边框虚线

收集了几款日期选择表单控件

细节让网页设计与众不同

增加价值的细节

进一步观察

像素级完善

差异

微妙的阴影

差异

导航细微差别

差异

细节更进一步

一些知名网络公司的设计原则实例

公共场所放置的有趣的公共空间椅子

多想一点，多做一点

常用到的商城产品放大镜效果

重构者的20种死法

分享【jquery插件】图文切换效果

简单的页面加载 (Loading) 效果

3个你可能从未用过的HTML标签

第一个： 或

第二个：

第三个，

解决弹出层被FLASH覆盖的问题

几款树矢量图

更小更快更灵活——设计师谈敏捷

网页设计师美丽的陷阱

两款颜色选择器

参加WebReBuild.ORG 2010第四届“重构人生”年会小结

一组多样式jQuery版的无缝滚动图片代码

图片滚动控制JS效果

第一个：或