BlogJava-gembin-随笔分类-Javascript

How JavaScript Timers Work

gembin — Mon, 27 May 2013 05:50:00 GMT

At a fundamental level it’s important to understand how JavaScript timers work. Often times they behave unintuitively because of the single thread which they are in. Let’s start by examining the three functions to which we have access that can construct and manipulate timers.

var id = setTimeout(fn, delay); – Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
var id = setInterval(fn, delay); – Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
clearInterval(id);, clearTimeout(id); – Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.

In order to understand how the timers work internally there’s one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread asynchronous events (such as mouse clicks and timers) are only run when there’s been an opening in the execution. This is best demonstrated with a diagram, like in the following:

(Click to view full size diagram)

There’s a lot of information in this figure to digest but understanding it completely will give you a better realization of how asynchronous JavaScript execution works. This diagram is one dimensional: vertically we have the (wall clock) time, in milliseconds. The blue boxes represent portions of JavaScript being executed. For example the first block of JavaScript executes for approximately 18ms, the mouse click block for approximately 11ms, and so on.

Since JavaScript can only ever execute one piece of code at a time (due to its single-threaded nature) each of these blocks of code are “blocking” the progress of other asynchronous events. This means that when an asynchronous event occurs (like a mouse click, a timer firing, or an XMLHttpRequest completing) it gets queued up to be executed later (how this queueing actually occurs surely varies from browser-to-browser, so consider this to be a simplification).

To start with, within the first block of JavaScript, two timers are initiated: a 10mssetTimeout and a 10ms setInterval. Due to where and when the timer was started it actually fires before we actually complete the first block of code. Note, however, that it does not execute immediately (it is incapable of doing that, because of the threading). Instead that delayed function is queued in order to be executed at the next available moment.

Additionally, within this first JavaScript block we see a mouse click occur. The JavaScript callbacks associated with this asynchronous event (we never know when a user may perform an action, thus it’s consider to be asynchronous) are unable to be executed immediately thus, like the initial timer, it is queued to be executed later.

After the initial block of JavaScript finishes executing the browser immediately asks the question: What is waiting to be executed? In this case both a mouse click handler and a timer callback are waiting. The browser then picks one (the mouse click callback) and executes it immediately. The timer will wait until the next possible time, in order to execute.

Note that while mouse click handler is executing the first interval callback executes. As with the timer its handler is queued for later execution. However, note that when the interval is fired again (when the timer handler is executing) this time that handler execution is dropped. If you were to queue up all interval callbacks when a large block of code is executing the result would be a bunch of intervals executing with no delay between them, upon completion. Instead browsers tend to simply wait until no more interval handlers are queued (for the interval in question) before queuing more.

We can, in fact, see that this is the case when a third interval callback fires while the interval, itself, is executing. This shows us an important fact: Intervals don’t care about what is currently executing, they will queue indiscriminately, even if it means that the time between callbacks will be sacrificed.

Finally, after the second interval callback is finished executing, we can see that there’s nothing left for the JavaScript engine to execute. This means that the browser now waits for a new asynchronous event to occur. We get this at the 50ms mark when the interval fires again. This time, however, there is nothing blocking its execution, so it fires immediately.

Let’s take a look at an example to better illustrate the differences betweensetTimeout and setInterval.

setTimeout(function(){
    /* Some long block of code... */
    setTimeout(arguments.callee, 10);
  }, 10);
 
  setInterval(function(){
    /* Some long block of code... */
  }, 10);

These two pieces of code may appear to be functionally equivalent, at first glance, but they are not. Notably the setTimeout code will always have at least a 10ms delay after the previous callback execution (it may end up being more, but never less) whereas the setInterval will attempt to execute a callback every 10ms regardless of when the last callback was executed.

There’s a lot that we’ve learned here, let’s recap:

JavaScript engines only have a single thread, forcing asynchronous events to queue waiting for execution.
setTimeout and setInterval are fundamentally different in how they execute asynchronous code.
If a timer is blocked from immediately executing it will be delayed until the next possible point of execution (which will be longer than the desired delay).
Intervals may execute back-to-back with no delay if they take long enough to execute (longer than the specified delay).

All of this is incredibly important knowledge to build off of. Knowing how a JavaScript engine works, especially with the large number of asynchronous events that typically occur, makes for a great foundation when building an advanced piece of application code.

from: http://ejohn.org/blog/how-javascript-timers-work/

gembin 2013-05-27 13:50 发表评论

ANSI sequence parser (Node.js) and client-side renderer

gembin — Sat, 21 Jul 2012 15:16:00 GMT

gembin 2012-07-21 23:16 发表评论

HTML5 Case Study: Building the noVNC Client with WebSockets, Canvas and JavaScript

gembin — Fri, 16 Jul 2010 03:55:00 GMT

摘要: from http://www.infoq.com/news/2010/07/html5-novnc 阅读全文

gembin 2010-07-16 11:55 发表评论

45个新鲜出炉的jQuery插件

gembin — Tue, 23 Sep 2008 10:05:00 GMT

之前已经为你介绍了50多个强大的jQuery插件，但是承受着jQuery的流行，越来越多的插件很快的冒出来。本文中为你收集了45个最新的jQuery插件，看看，有哪些是你想要应用到你的网页设计中的？

图象幻灯片展示和画廊插件

1) Galleria -这是一个用jQuery编写的javascript图像画廊插件。之前帕兰已经做过介绍。

2) jQuery Multimedia Portfolio -支持多种多媒体格式，包括:图片，视频 (flv), 音频 (mp3), 并且自动侦测每个文件的扩展名再分别调用合适的播放器。

3) wSlide -通过列表名单切换动画盒式的内容区域。

标签云

4) Hover Sub Tags- 使用jQuery来缩小标签云所占成的页面，比如你有一个”Ajax”的标签, 你可以在这个标签里面再放入二级标签 jquery, mootools, 等…当鼠标悬浮在一级标签上时，就出现一个动态提示效果的二级标签云。

分页系统

5) Pagination-创建一个分页导航,当你的网页内容比如多的时候，比较适合使用这种分页导航系统，同时也有利于SEO。这个利用jQuery编写的分页导航的特点是，你可以把它与搜索相结合，控制搜索结果的显示文章数。

导航系统

6) Accordion Menu -这是一个手风琴效果的演示, 标题使用 H3 标签, 子菜单使用UL标签来实现伸缩。

7) jQuery Treeview Plugin

8 ) Coda-Slider- 一个强大的jQuery滑动门技术，效果平滑，很酷。支持上下页的控制。

9) Simple Horizontal Accordion

表格和网格

10) TableRowCheckboxToggle - 它笼统地加入了切换功能，以任何表行您所指定的基础上的CSS类的名字。它将默认切换任何复选框内的表行。

11) TableEditor - Tableeditor提供了灵活的实时编辑的HTML表格。

12) Ingrid - Ingrid是一个个性的jquery插件，可以为你的图表添加很多网格数据行为，包括大小，分页，整理，排柱造型以及更多。

表单

13) jQuery Nice Form -创建自定义风格的表单事件。

14) Easy Multi Select Transfer 选项菜单选中后到达另一个选项栏的效果。

15) jQuery Form Plugin- 让你轻松自然地升级HTML表单使用Ajax表单和提交的方法，以方便从从表单元素中搜集资料，并决定如何管理提交进程，让你对数据如何提交能有充分的控制权。

滚动和滑动技术

16) jQuery.SerialScroll -此插件可以让你很容易实现任何动画的一系列要素依次滚动。你可以用它作为一节滑块，滚轮文本，幻灯片，新闻股票等。

17) liScroll - LiScroll是一个 jQuery 插件，可以让你转换任何无序列表为一个滚动内容展示。

18) Spinner -可以让你在一个固定区域里无限量的增加内容进行滚动样式的展示。

表单事件

19) jWYSIWYG 一个可以内嵌网页的所见即所得的HTML文本编辑插件。

20) Simple chained combobox -很简单的一个jquery选项插件，通过JSON的加工和返回特点，提供连锁反应式的多重选择。

21) jQuery checkbox

22) jGrow

Toggling

23) jTruncate in Action -jtruncate可以自定义截断你网页中的文本实体。

24) toggleElements - toggleElementS是一个展开/隐藏效果的jqurey插件。

渐变和阴影

25) Drop Shadows -这个插件可以为你的文本生成一个非常有趣的阴影效果。

26) Gradient jQuery plugin - 实现渐变效果，你可以设定渐变的方向和透明度值。

27) Gradient -让你拥有一个动态渐变效果的背景，不需要使用任何图片。

Lightbox灯箱效果

28) Facebox 基于jQuery, Facebook风格的lightbox灯箱插件，可以显示图片、DIV层和文章页面等。

29) jQuery Lightbox Plugin- (balupton edition)

拾色器

30) jQueryColorPicker -一个简单的jquery拾色器插件，可以让用户选择色盘中的颜色来实现背景颜色的切换。

值得试用的一些jQuery插件

31) Animated InnerFade- 完全符合w3c标准的动画幻灯片插件。

32) Easy POP Show 1.0 Release -全屏幕显示的画廊插件。

33) jqChart- Ajax的图表插件

34) UI Datepicker -一个简单的jQuery UI日期拾取器.

35) JSmile -一个完全自定义的添加特定表情图标的插件。

36) ImgAreaSelect - imgAreaSelect是一个 jQuery插件，可以让你在一张图片中选择一个矩形，并且可以列出坐标值。

37) jPrintArea-jPrintArea是一个简单的，用来打印指定的文本内容。查看DEMO演示

38) jTabber- 一个Tab选项卡切换技术，不需要重新载入页面

39) jQuery Calculation Plug-in - 一个计算类插件。可以让你计算一些简单或是复杂的数学公式。

40) jquery.biggerlink - 这个jQuery插件可以让你为指定的链接添加成在线代理后的链接地址。

41) Humanized Messages- 在你的网页上显示一个半透明的内容信息，但是当用户有任何操作时，它就会慢慢消失。

42) Ajax Manager 帮助你管理AJAX请求和回应，(比如，放弃请求，锁定请求，排序请求等).

43) Background-Position Animation

44) Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.Check out their demo page

45) jQuery Tag Suggestion- The same tag suggesting as-you-type support that del.icio.us is uses.Check out their demo page

原文:45+ Fresh Out of the oven jQuery Plugins

gembin 2008-09-23 18:05 发表评论

50多个强大的jQuery插件应用实例

gembin — Tue, 23 Sep 2008 09:59:00 GMT

原文:50+ Amazing Jquery Examples- Part1

jQuery是近段时间里比较流行的一个JavaScript框架，不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。这仅仅是第一个系列，你先品尝，第二道大餐即将到来。
Sliding Panels －滑动门控制
1) Sliding Panels For jQuery -元素可以展开或关闭，创建出手风琴的滑动效果。

(2) jQuery Collapse -这个jQuery插件同样点击后滑动展开或关闭DIV层。
Menu －菜单
3) LavaLamp

(4) A Navigation Menu- 锚链接的无序列表嵌套, 可以添加2级菜单

(5) SuckerFish Style

Tabs - 选项卡
6) jQuery UI Tabs / Tabs 3 - 基于 jQuery 的一个Tab选项卡导航

(7) TabContainer Theme - 当用户在选项卡之间进行切换时，产生JQuery风格的淡出动效果。

Accordion－手风琴效果
8 ) jQuery Accordion

Demo

(9) Simple JQuery Accordion menu

SlideShows －幻灯片
10) jQZoom-让你在你的网页上很简单的实现图片的缩放功能。

(11) Image/Photo Gallery Viewer- 一个图像/相片的画廊展示插件。可以让你对图片进行分组、并产生像Flash一样的多种浏览特效。

Transition Effects - 过渡特效
12) InnerFade - 可以让网页中的任何元素产生淡化效果

(13) Easing Plugin-另外一个简单的过渡效果插件

(14) Highlight Fade

(15) jQuery Cycle Plugin- 拥有多种过渡效果的一个Gallery插件。

奇幻的jQuery
16) Riding carousels with jQuery - 这个jQuery插件可以生成一个水平或垂直的列表，并且允许你控制DIV层的滑动显示。

Demo :

Color Picker －拾色器
17) Farbtastic -这个 jQuery 插件可以让你通过Javascript添加一个或多个拾色器widgets到一个页面中。

Demo :

(18) jQuery Color Picker
LightBox －灯箱效果
19) jQuery ThickBox - is a webpage user interface dialog widget written in JavaScript.

Demo :

(20) SimpleModal Demos - its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

Demo :

(21) jQuery lightBox Plugin - simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.

Demo :

(
iframe
22) JQuery iFrame Plugin

Form Validation -表单验证器
23) Validation - 有一套完整相当的形式验证规则。该插件还动态地创建ID和联系信息。

Demo :

(24) Ajax Form Validation - 在客户端使用jquery验证的一种形式，它可以验证用户名是否有效等。

Demo :

(25) jQuery AlphaNumeric -欢迎对对表单域中的某些字符进行限制

Form Elements －表单事件

(26) jquery.Combobox - 从现在的选择元素中创建一个个性的HTML组合 Demo is here.

(27) jQuery Checkbox -样式化选择框，从而提高交互能力。

(28) File Style Plugin for jQuery -File Style插件让你可以使用图像做为文件浏览按钮，你还可以样式化文件名称区域。
Star Rating －星形评级系统

(29) Simple Star Rating System

30)Half-Star Rating Plugin
ToolTips －提示工具
31) Tooltip Plugin Examples - 一个花俏的提示应用。可以对提示信息进行自定义位置, 设置阴影效果和添加更多内容等.你可以点击demo 演示.

(32) The jQuery Tooltip

Tables Plugins －表格插件
33) Zebra Tables Demo -使用jQuery来创建出斑马线风格的数据表格，鼠标悬浮时能改变背景色。

Demo :

(34) Table Sorter Plugin - 把一个标准的HTML表格分解成Thead和Tbody标签构成的分类表格，不需要刷新。它能够成功地解析和整理多种类型的数据，包括联系资料。

(35) AutoScroll for jQuery -可以生成网页表格的热点自动滚动效果

(36) Scrollable HTML table plugin- 用来转换表格为普通的滚动HTML。不需要额外的编码。

Demo :

Draggable Droppables And Selectables 拖拽
37) Sortables - 一个简单强大的拖拽插件。

(38) Draggables and droppables- 这是一个很好的演示。用来实现拖拽树形菜单项目的操作

Style Switcher －切换风络
39) Switch stylesheets with jQuery允许访客选择他们喜欢的网站样式，使用了Cookie记录，也就是同一个用户下次再访问时，除非他不切换，否则会保留他选择的样式。

Demo演示.
Rounded Corners 圆角效果
40) jQuery Corner Demo

(41) JQuery Curvy Corners- 这个插件可以让你生成光滑、无锯齿的圆角效果。

Must See jQuery Examples 应该了解的一些jQuery应用实例
42) jQuery Air - 一个非常非常特别的客户管理界面应用插件，太特别了，太太太特别了。

Demo :

(43) HeatColor

Demo :

(44) Simple jQuery Examples

(45) Date Picker -一个灵活个性的jQuery日历组件。

Demo :

(46) ScrollTo -这个jQuery插件可以让你实现当点击链接时中滚动到页面中的某一对象

(47) 3-Column Splitter Layout 一个3栏布局分配插件。

(48) Pager jQuery -一个小巧的 jQuery插件，用来增加分页的页码效果

(49) Select box manipulation

(50) Cookie Plugin for jQuery

51) JQuery BlockUI Plugin

gembin 2008-09-23 17:59 发表评论

重新设计网站或博客需要考虑的21个因素和技巧

gembin — Tue, 23 Sep 2008 09:57:00 GMT

开场白:下面是一篇关于网站重新设计时需要考虑的诸多因素的一篇文章，虽然着眼于网页设计，但它其实同样是一篇博客技巧，人人皆适用。所以，俺翻译一下，跟各位博友分享。如有什么翻译不当或错误之处，请勿指正!

原文:21 Factors to Consider Before a Redesign

翻译:帕兰

重新设计一个网站是一个非常复杂的过程。你需要妥善规划考虑到诸多因素，打破原有的设计让网站更加人性化、更利于用户体验、更高的网站效率、更友好的优化之于搜索引擎。这里就让我们来看看21个对网站重新设计时需要考虑到的因素，你一定要考虑:)
1 .重新设计的目标是什么？

你希望完成什么？你希望改变什么？一个明确的认识是很重要的，是的，你应该明确你的要对网站进行重新设计的理由和动机，因为什么样的动机就会使你作出的什么样的决定。如果你不知道你的目标是什么，那你就将缺乏重新设计的方向，你很可能会结束这项工作的时候，还是得不到一个满意的设计效果。
2 .这是一次简单的网站升级还是对网站进行全面整改?

重新设计一个全新的网站，可以从任何一个细节来让网站改头换面。很明显，时间，精力，以及所涉及的费用导致重新设计出来的结果是不同的。但我想首先你应该确定你都需要哪些类型的变化来满足你的目标与设计。如果是一个全面的重新设计，你也得考虑到”全面”到什么程度，通常新的网站设计风格应该类似于旧网站的设计风格。因为如果你之前的访客来到你的网站，被你的全新设计搞得认不出”你”来，你大概不希望这样。
(注:这一点对于我来说不太适合，我就喜欢隔三差五的把博客从“A”变成”B”，因为我觉得这样能给旧的访客带来新鲜感，但他们仍然知道这是我的博客。而新访客，他们并不知道我曾经用过其它的设计。当然，这一点也是博客和网站的区别。同时，其它博客用户尤其是Wordpress用户适乎也不太适用于这一点，因为成千上万的漂亮的“皮”总是让我们经不住诱惑换了又换。)
3 .当前的网站设计中，哪些方面是最值得使用的？

你当前的网站设计中，通常都有一些方面是优秀且效果比较好的，而这些方面，你可能希望保留或将其纳入新的设计方案中。作一个简单的归纳，哪些是你想保留的，这将是好主意，更有利于你清晰规划你的设计方案。

4 .当前的网站设计中，哪些方面是不值得使用的？

如果你是重新设计网站，你势必要丢掉一些设计部份。比如对于你的新访客说，可能有哪些地方不能准确表达的原本想要传达的意义？这就跟上面的正好相反，对于这些不太值得使用的设计，你应该最大程度的改良或丢掉它们。
5 .谁是你的目标用户？

在任何设计过程中，你永远不能忘掉访客，必须以访客为中心(注:除了那些完全不在乎访客的理想主义者)。确定的目标受众群，瞄准他们，打出”致命的一颗子弹”－什么样的设计风格会使你的用户喜欢？(注:在设计过程中，你应该一直让这个问号停留在你的脑海里，打出一颗又一颗子弹，这样，还怕用户不死于你的网站之下？呵呵！)

6 .怎样才能让网站更加方便用户呢？

对于一个网站来说，强大的功能应用确实是一件好事。但如果花费大量的时间堆砌一大堆无谓的所谓”高级功能”，其实并不方便用户的使用。(注:尤其是随着Web2.0的狂潮，简单已经成了一个大势所趋，除蜚你的网站受众都是些专业级别的电脑用户，否则，去掉你那些花哨而又不实用的一大堆特效吧!)

7 .Logo或品牌形象是否需要做改变？

Logo或一些常用的传达网站品牌形象的设计，在你重新设计网站时，是否需要同时对它们进行重设计呢？答案是，如果你的logo不是那种非常优秀的 ”万能logo”，也就是指那种能够在任何网页设计中都跟全局良好融合的logo设计，那你或许应该考虑根据你的新网站风格设计一个风格统一的 logo。(注:帕兰的个人看法, Logo设计讲求的是简单，而设计一个万能logo的最重要因素就是简单再简单！)

8 .是保持还是改变网站的主色调？

在第2点已经说了，因为大部分的时候，你会想为那些旧访客保留网站的大体风格。所以用类似的配色方案是最佳方式之一。当然，你可以加入一些细微的色调，从而让网站看起来确实有了那么些新鲜的感觉，但又不至于让旧访客认不出来。(注:我觉得这要看是什么样的设计风格了，比如我最欣赏的一位网页设计者531，他的博客每隔一段时间，就换一种色调，其一，他的网页设计图片很少，都是通过对一些文字链接进行着色来表现出网页的主色调，这样即使完全更换颜色，在给访客新鲜感的同时，也不会让访客找不着北。其二，如果网页布局没有做什么大的调整，颜色的改变通常也不会造成前后设计的太大差异。)
9 .访客使用什么样的屏幕分辨率？

这一点也是非常重要的，尽管一些网页设计者可能会忽略。像Google Analytics之类的服务可以很容易地给你这方面的资料。很明显，一个固定宽度设计的网页应考虑到访客的屏幕分辨率。
(注:之前有位博友问过我网页自适应宽度的问题，要实现网页的自适应宽度并不困难，但是完全必要。尽管我开始设计网页的时候，也喜欢弄成自适应宽度，但后来发现，这很糟糕! 尤其是当一个自适应宽度的设计运行在1280像素比以上的屏幕分辨率上时，除非你的掌控能力很好以及页面布局确实适合自适应宽度，否则我不建议你使用自适应。
另外，我一般都是以最通用的1024*768的屏幕分辨率为基准来设计。因为，在中国，虽然我没有做过调查，但猜想有一半的用户仍然是使用老式的纯屏甚至普屏，使用1024像素比为基准是最合适的。800*600像素的用户我基本上是选择置之不理!这样，就可以不用管宽屏了，我宁可宽屏用户在很宽的屏幕里面看着有点小的网页，也不愿意网页宽到需要出现横向滚动条!)

10 .浏览者的网络速度？

你的浏览者的平均网络速度，将有助于确定你的网页设计元素。

(注:如果你的浏览者的网络速度普遍偏慢，而你的网页里面使用了一大堆Javascript，左一个音乐播放器，右一个视频播放器。你觉得那会造成什么样的后果？说白了，现在这个宽带高速发展的时代，一个网站最最最最重要的东西，不是SEO，不是网站内容，不是用户体验，是速度! 速度与激情嘛! 你的SEO做的再好，内容质量再高，用户体验再良好，可浏览者需要等待半分钟才可以进入你的页面，你以为地球人就只知道你丫的一个网站啊?

P.S:有点脸红，老帕我的博客有的时候载入甚至超过半分钟，但那不是设计的原因，是因为主机有点烂，最近正在寻找高速的，可要在国外主机里面找个高速的，还真他妈不容易! 国内？我宁可速度慢，也尽量不用国内的。)

11 .应该把设计重点放在什么地方？

每一个设计，是为了提醒大家去注意什么样的地方。知道你自己想强调什么，你也就得到了一个设计重心。你可以看一下Caroline Middlebrook ，在她对她的博客进行重新设计时，她使用了博客里面的一大块区域来放置她的特点内容，比如她写的免费电子书籍。显然，对于她来说，这是她希望别人重点看到的内容，同时也是很好的展示她自己的一个区域。
(注:帕兰总结－像突出广告位那样突出你的设计重点区域。)

12 .怎样才能使导航达到更好的效果？

导航是一个网站最重要的因素之一。如果你之前的网页设计中加入过很多的内容版面，那可能原先的导航不是那么的良好了。你应该尝试着建立一个最大程度上方便用户的网页导航，让他们轻松简便的从这儿跳到那，从那跳回这儿:)
13 .浏览者想要从你的网站看到什么?

对于任何网站来说，满足浏览者的需要是至关重要的。浏览者来你的网站找资料？如果是的话，你应该使这些资料成为一个突出设计，让他们能够很容易的找到这些资料。他们会在看了网页以后到实地来寻找产品？那在产品页面留一个显著的地址就是明智的选择了。站在浏览者的角度想他们所想，把最好最方便的网页设计给他们。
14 .怎样才能增加用户交互？

最成功的网站能够让访客热情的参与其中。博客是这方面最强大的应用，因为它们能够在征求浏览者的意见和讨论。其它的还有论坛，游戏，调查结果显示，竞猜等。让你的浏览者对你的网站更加的引人入胜，您有可能获得更多数量的”回头客”。

15 .谁在维护和更新你的网站？

谁在维护和更新你的网站？当然是你！真的是吗？这是个问题。尤其是对于博客来说，事实上，留言者也正在帮你更新网站内容。虽然你应该保持代码的简洁，但是当别人为你贡献内容的时候，你应该同样让受到别人重视。

(注:比如，对于博客来说，你除了着重突出你的其它设计元素，同时，还应该给你的留言者们提供一个突出的机会。这点老帕做的很不好，但目前使用的主题都是在测试阶段，我会在需要修改的元素达到一定的数目时进行统一的Redesign。)
16 .你是否需要一个内容管理系统（ CMS ）？

很多网站主，现在宁愿选择一个CMS，比如WordPress。因为它们可以很容易的进行更新，而不需要什么网页设计。很多的主题模式设计预先就安装到系统里面。如果想要节省时间，CMS可能是一个很好的选择。

(注: 尽管原文作者说的是事实。但对于需要个性化的Blogger来说，不管他选择什么样的平台，他还是喜欢追求一个属于自己独特个性的网站设计。)

17 .怎样才能使SEO得到改善？

任何时候，一个网站如果要重新设计，搜索引擎都应该加以考虑。目前的设计是否会对搜索引擎造成不友好？如何放置目前的页面标题效果才最好？怎样才能合理的增加内部连接？等等等等。
18 .哪些关键词和短语是你的网页重点？

当然，关键字，应该用于title，head，a链接，alt属性等。设计一个网站，如果不知道你的目标关键词和短语是什么，也就意味着你最合适的设计方案可能失之交臂，甚至不会有太大的效果。而这不只是考虑搜索方面的问题，而是针对你目前的网站，得到最大化的效果。

19 .哪些网页和搜索在你的网站里面是热门的？

如果你的网站上有那种做得非常好的页面，也就是说访问量比较高，搜索引擎排名比较好，对于这些页面，你不应该做重大的更改，那样往往会降低你的页面在搜索引擎中的网页排名。同样，有什么搜索词，是你网站里面目前比较热门的，你也不应该多做手脚。唯一肯定的，他们应该好好的保留在的新的设计方案中。
20 .页面里有哪些内部链接？

当你要重新设计网页的时候，你应该好好看看你的网站里面有哪些内部链接。以确保在新的网页设计中，这些链接不会丢失，最好是使用相同的URL结构。

(注:我拿博客打比个比方，你以前的侧边栏有热门日志、分类、存档的链接，但新的设计中，这些链接都抛弃了。这除了会导致旧的访客不能适应你的新导航感到手足无措外，更重要的是会导致你的网页排名下降。)
21 .如果让访客再次光临你的网站？

最有可能的情况是，你已经想到了一个出色的设计方案:给用户留下”你的网站充满活力”的第一印象。但问题是－怎样做才能保持网站的访客再次光临你的网站？

或许你知道哦，瞎猫也能碰到死耗子! 你这只瞎猫，快来碰一碰吧！

结束语:每翻译一条，就惭愧一次，没有脸红。看来，得抽个时间好好Redesign一下我的Theme了。

gembin 2008-09-23 17:57 发表评论

盘点2007:53个最棒的博客设计

gembin — Tue, 23 Sep 2008 09:56:00 GMT

昨天盘点了2007年里50个最佳CSS网页设计，今天继续盘点，来自adii的My 53 Top Blog Designs of 2007.
1. Alex Buga
This is definitely my favourite blog design of the year - it is just so extremely unique and well done! The etchings / scribbles into the wood panels really gives it a personal touch, whilst I’ve got to give Alex a lot of credit for pulling of the transparent effects on the content boxes, as that is not overly easy.

2. Blogsolid
It’s a great honour for me, to include Blogsolid’s design as #2 in this list, as it was designed by a fellow South African. Again, I think that Imar (the owner and designer of BS) ventured into the uniqueness territory, where most designers don’t want to go, and it paid off, since Blogsolid has been featured on most of the design galleries around the web. Great design!

3. Piktogramme und Icons
You don’t need to understand German (I think!) to adore this super-clean design. I love the hand holding the business card in the header and the rest of the design (looks like it is designed on a grid) is just so functional, minimalistic and beautiful.

4. Carsonified
#4 is almost too love for this design, but the above 3 really gives me warm fuzzy feelings… I really like the logo, the unique featured section (again with the transparent images) and then the content section, which is divided into 3 equal width columns. Great design!

5. Web Designer Wall
You definitely don’t get much more unique than this design. It’s been featured and talked about all over the net andI don’t need to say much more about this super artistic, creative and fun design that smashed everyone’s ideas about what Web 2.0 looks like in 2007. Expect more designs like this one in 2008…

6. The Geniant Blog
A touch of class… Very stylish and trendy, whilst very, very appealing to the eye. I can’t find too many faults with this design - can you?

7. Mark Forrester
Fun, fun, fun… That’s how I feel, when I look at Mark’s extremely creative and colourful design. Mark is a fellow Saffa and again, it’s great to see some of my fellow countrymen making a “mark” (haha - excuse the pun) online.

8. Electric Pulp
That shade of red makes this design great on its own… And the overall colour scheme is fantastic. Combine a textured background with some transparent content boxes, and you’ve got Adii going gaga…

9. I Heart Luxe
Clean and stylish, with all the focus on the content - you don’t get much better minimalistic type designs than this…

10. Koller Media
I don’t really have words to explain why I like and rate this design so highly… The header is pretty cool, whilst a love the gray shading in the sidebars.

11. Simply Fired
The background images makes the design.

12. Elliot Jay Stocks
There’s no Web 2.0 trend graphics to be seen on this very unique, grungy design by Carsonified’s leading designer. Risky direction to go with a new design, but Elliot pulls it off with style!

13. Web Worker Daily
Warm fuzzies, warm fuzzies… The logo and navigation is awesome, whilst merging into the content areas beautifully!

14. Blog Action Day
Great design for a great cause! It’s not easy making a design based on such a shaded colour scheme, look great, but this one is absolutely brilliant!

15. Jesus Rodriguez Velasco
This is another design that got a lot of attention in the CSS design galleries this year… Very unique, grungy feel and that for a university professor - insane!!!

16. PSDTuts
Clean & Beautiful - the two best words to describe a great blog design!

17. TNT Pixel
The header makes a real splash (or is it a bang?) and the rest of the layout / typography is really well thought-out with clever attention to the smaller details.

18. Ideate
I’m not being biased, but this is the third South African design in the Top 20 already… Doesn’t this design remind you of your childhood days dressed up as your favourite superhero?

19. Dream Design
Beautiful personal design by a web designer / illustrator. Very interesting colour scheme as well - you don’t see too many purple / pink designs out there.

20. Elitist Snob
This design really portraits the name of the blog very well (in my opinion), since you do get a sense of snobism / elitism when browsing around the design. The cartoon feel is also pretty cool…

21. Challies Dot Com

22. Bistrian Iosip

23. Clagnut

24. Simplebits
Beauty in simplicity.

25. Larissa Meek
A pretty design for an extremely pretty girl… I’ve previously featured Larissa in an interview on my blog.

26. Brian Jeremy
A Web Designer Wal-type layout and design… Just different and great in its own way!

27. Massive Press
Just because content is king, doesn’t mean you don’t need to look after your blog’s design. Massive Press pulls off both the content and design!

28. Joyeur

29. The Big Noob
Get lost in the blue… Great use of various different shades of blue, as well as a very prominent header image.

30. WebAppers
Old school and antique meets super trendy and slick.

31. FreelanceSwitch

32. Lee Munroe
I love it when I can sense a designer’s personality through a design and this unique design by Lee Munroe makes me feel that I know just a little bit about him already…

33. Super Awesome
The name says it all!

34. Bear Skin Rug
A wickedly, weird design.. But it definitely works!

35. Ordered List

36. Jina Bolton
What does CSS expert Jina Bolton like more you think - CSS or sushi?

37. Yesterday Is Here

38. Blog Perfume

39. Abduzeedo

40. Rob Goodlatte

41. Tim Ferris - Four Hour Work Week

42. Tingsek

43. Lokesh Dhakar

44. One Button Mouse

45. North x East

46. Rik Catlow

47. Bill C English

48. Dream Scape

49. Hyaline Skies

50. Bad Ass Ideas

51. Brian Gardner

52. Lee Dodd

53. Young Go Getter

gembin 2008-09-23 17:56 发表评论

7个强大超酷的CSS导航菜单

gembin — Tue, 23 Sep 2008 09:06:00 GMT

新的技术在不断的发展和更新，利于我们创造更多独特和看上去很酷的菜单效果。下面是7个基于CSS创建的网页导航菜单：

13个效果超酷的Javascript网页导航菜单

gembin — Tue, 23 Sep 2008 09:05:00 GMT

摘要: 阅读全文

gembin 2008-09-23 17:05 发表评论

47个优秀的Ajax/CSS 表单设计资源

gembin — Tue, 23 Sep 2008 08:40:00 GMT

摘要: 阅读全文

gembin 2008-09-23 16:40 发表评论

BlogJava-gembin-随笔分类-Javascript

How JavaScript Timers Work

ANSI sequence parser (Node.js) and client-side renderer

HTML5 Case Study: Building the noVNC Client with WebSockets, Canvas and JavaScript

45个新鲜出炉的jQuery插件

图象幻灯片展示和画廊插件

标签云

分页系统

导航系统

表格和网格

表单

滚动和滑动技术

表单事件

Toggling

渐变和阴影

Lightbox灯箱效果

拾色器

值得试用的一些jQuery插件

50多个强大的jQuery插件应用实例

重新设计网站或博客需要考虑的21个因素和技巧

盘点2007:53个最棒的博客设计

7个强大超酷的CSS导航菜单

1) 强大的 CSS 导航菜单

2) 先进的CSS导航菜单技术

3) 多级下拉导航菜单

4) Tree Frog slide and fly 导航菜单

5) Mike’s Experiment

6) 8 个不能错过的网页导航菜单

7) 下拉选项卡的导航菜单

13个效果超酷的Javascript网页导航菜单

47个优秀的Ajax/CSS 表单设计资源