BlogJava-gembin

Supporting OSGi Bundles in the Java Module System（zhuan）

gembin — Tue, 07 Oct 2008 06:00:00 GMT

摘要: JSR277 OSGi support 阅读全文

gembin 2008-10-07 14:00 发表评论

Advanced Message Queuing Protocol(zhuan)

gembin — Sat, 27 Sep 2008 07:06:00 GMT

摘要: Advanced Message Queuing Protocol", IEEE Internet Computing, vol. 10, no. 6, 2006, pp. 87-89. 阅读全文

gembin 2008-09-27 15:06 发表评论

创建SvcHost.exe调用的服务原理与实践

gembin — Sat, 27 Sep 2008 06:32:00 GMT

摘要: 创建SvcHost.exe调用的服务原理与实践阅读全文

gembin 2008-09-27 14:32 发表评论

Thermo From Adobe Labs

gembin — Wed, 24 Sep 2008 06:33:00 GMT

Thermo

From Adobe Labs

Product Codename: "Thermo"

"Thermo" is an upcoming Adobe product that makes it easy for designers to create rich Internet application UIs. Thermo allows designers to build on familiar workflows to visually create working applications that easily flow into production and development.

Features

Use drawing tools to create original graphics, wireframe an application design, or manipulate artwork imported from Adobe Creative Suite tools.
Turn artwork from Adobe Photoshop, Illustrator, or Fireworks directly into functional components that use the original artwork as a “skin”.
Define and wire up interactive behavior, such as what to do when a user clicks on something, without having to write code.
Easily design UIs that work with dynamic data, such as a list of contacts or product information, without having access to the actual data source. Design-time sample data can be used as a realistic placeholder when laying out an application, testing interactivity, and choreographing motion.

Applications created in Thermo are Flex applications that can be loaded directly into Flex Builder, providing a great roundtrip workflow for designers collaborating with developers. The designer's work can be incorporated directly into the production application with no loss of fidelity, and designers can continue to refine the design throughout the iterative development process.

Check back for more details on Thermo soon!

Thermo

Converting Artwork to Functional Components

Working with Design Time Sample Data

Visually Wiring Up Events and Bindings

Drawing Tools to Create Original Artwork or to Manipulate Graphics

Retrieved from "http://labs.adobe.com/wiki/index.php/Thermo"

gembin 2008-09-24 14:33 发表评论

MAX2007年会总结十项技术(转)

gembin — Wed, 24 Sep 2008 06:21:00 GMT

关键字: flex max

1. Flex Builder 3/AIR beta2 on lab

这两样东西会在 max 期间放出 beta 2 (M5) 应该算是旧闻，还有人事先不知道才是比较奇怪。beta2 本身的新功能在 wiki 上有详细介绍，但重点不外乎在 IDE 本身的强化、AIR 整合、CSS 设计与 Profiler等。比较重要的是大概有三点-新售价出来了，将来 FB 分两种版本
Standard: $299
Pro: $699Standard 比现在 $499 还降200元，所以现在是流行新版本都要降两百吗？不过没有 charting component, 这些玩意(包含像 AdvancedDataGrid 这种 visual data component等)都移到 Pro 版。这样做的意义很明显，主要就是要大幅降低 flex 的进入门坎，原本要$499 才能有拥有 IDE，现在只要 $299 几乎是人人买的起，另一方面，对每天靠开发 flex 为生的人来说，将好料的一次全塞入pro版，而且比现在 $799 低了 100元，也算是方便许多，至少付一次钱就可以买到全部的东西(而不用再一样样去付费然后拼起来)，这个市场策略不错。-Linux 版问市
这世界上似乎有很多人一直想在 linux 上开发 flex，而且只用 text editor + sdk 还不够，一定要有 IDE 才过瘾，现在可称心如意了，beta版已可在 lab 上下载。-flex testing framework 改为免费
以往要用 Mercury Quicktest Pro 来做 UI testing 时，必需要先装 testing framework, 但它需要一组 FDS 的序号才能使用，而几乎没人会愿意花 $6,000-$12,000的价钱去买这玩意。两个月前我在玩某个fb3 beta 版本时，意外在安装目录下发现居然内建了这个 installer，而且还真的可以装也可以用，那时我以为是只是单纯的意外不小心包了进去(或是 adobe 心想反正卖不掉干脆欢乐大放送)，现在才知道原来这些是故意的啊~

2. Thermo

粗略简介看这里

Max 期间另一个重头戏就是 Thermo 初亮相，网络上已经有一些影片可看。

目前看来它的操作方式很像 adobe 产品的大合体，我观察到的包含-可直接读入 Photoshop PSD 档，并且当然保留所有的 layer 信息与 meta info-读入的 psd 档会以 tracing image 的方式显示在底层(这是跟 dreamweaver 与 golive 借来的概念)-可用类似 edit in place (这是 fireworks, image ready, golive 时代就有的东西)将画面元素转换为 mxml 组件，而且会保留 style info-转换成 mxml 后会使用新的 tag 来标识，例如 mx:bitmapGraphic 与
mx:borderSkinFactory-可制作多个 state 并在其间切换(这跟 fireworks cs3 里新出现的 page 面板概念完全一致)-拥有 timeline 可制作 transition/effect，例如 mouseover 时某个对象要渐大或渐小等变化，乍看之下很像是 flash 附身 XD整段影片看完初步的感觉如下：1、我至少在 thermo 里看到 photoshop, flash, fireworks, dreamweaver, image ready, golive 等软件的功能与影子，这应该可说是合并后 1+1 > 2 的例子之一吧2、目前看来工作流程会是这样Photoshop -> Thermo < -> Flex也就是视觉的东西 70% 都在 photoshop/illustrator 里做好，然后将 psd 丢给 thermo 做 interaction design，但它也同时提供了 mxml 产生器，让设计师可以将进一步跨界将视觉元素转成可编程的 mxml 组件，最后交给工程师去 coding。3、至于 thermo 实不实用呢？嗯，这要看你怎么定位它。从历史上来看，类似 fireworks/image ready 这种 psd to html 产生器的工作流程基本上从来没成功过，因为 one-way 式的从 psd 到 html 或许很容易，但当 html 要回到 psd 时，困难度就很高，到最后都是『工人智慧』来解决。但如果从 quick-prototyping or Proof of Concept(POC)的角度来看，thermo 可能会是很好的帮手，因为设计师可以尽情的发挥视觉设计将美美的版面做出来，然后透过 thermo 产生可实际操作的 flex 接口，这样客户可以看的到也摸的到将来实际成品可能的样貌，制作团队也能比较完整的掌握客户想要的东西。至于真正要开始制作 flex app时，我想 thermo 的帮助就不大，因为让不懂程序的设计师来帮忙切 ui 组件？决定每个 module 该如何画分？这样冒的风险实在太大，切出来的mxml 大概也没法用，最后还是要重新来。但这又带到另一个鸡生蛋、蛋生鸡的老问题。Thermo 之所以会出现，是为了解决工程师不懂如何将视觉画面转换为成品，因此希望由设计师来帮忙这件事，但由设计师来做这件事缺点也很多，上面也已稍微解释，所以这仍然是一个两难的问题，也就是设计师帮忙切画面，切出来的东西可能工程师觉得不好用或无法用，但由工程师去切画面，可能整支程序画面也就毁了，所以最终下场差不多。依我这几年全职开发 flash/flex 的经验来看，以往许多人提出的
graphic designer - interaction designer - developer 三级分工制只能算是第一步，thermo 的出现可能可以实质帮到 interaction designer 的忙，但 interaction designer 到 developer 这段仍然会是断层，而解决之道，则是要找到一个方式将这 missing link 给补起来，这也将是 thermo 成败的最大关键(目前看来，blend/expression/xaml 的尝试不甚成功，希望 adobe可以另觅它途让人眼睛一亮啊)

3. Flash Player 10 (codename Astro)

FP9 从 as2 发展到 as3 可说是 flash 十年来最惊人的大跃进，几乎完全改写了 RIA 的历史，原本以为大概很难再看到同样 level 的改版，但很显然我错了。FP10 新增的几个重点功能大略包含-简易的 hardware 3D support：看来原本打死不愿意为 fp 加入3d功能的 engineering team 还是很顺应民情啊，当然目前看到的 3d 功能还非常有限，有人称它为 2.5D，也有人称为 card-game style 3D，不过就我对 flash player team 的了解，将来内建的 3D 功能追上 Papervision3D 应该是没问题的。-advanced text layout: 这包含了 multi-column 的走文方式，也包含了 right-to-left layout(RTL)，这两件事在过去我们都遇过，去年制作的一个大型app在多国语言化时，客户居然问：『希伯来文版的接口文字应该是从右到左啊，可以改一下吗？』当时心里的回答：『当然可以，你先买下 flash player team 交给我指挥，我保证半年内生出来给你…』现在这件事可简单多了，只是 UI Component 部份要改写的东西还是很费力啊。-custom filter/effect with “Hydra” image processing language:
这算是非常有趣的新玩意，Hydra 是一种类似 C 的语言，user 可用它编辑自已独门的 filter/effect，之前有 Vector/Bitmap API 大家就已经玩出一堆疯狂的把戏，现在有了更 low-level 的工具，呵呵呵，精彩可期，只是以后教 flash 的讲师是不是也要进修一下 C/C++ 了? Orz

4. Flash Lite 3 推出

功能介绍看这里重点有
-flash home: 这个算是真正的新玩意，以往 flash lite 都是以 app 的型式存在于手机上，也就是要用时才启动，但 flash home 则是直接用 flash lite 取代掉手机的开机画面，一开机完就是 flash lite 在那里，而且它是 instant on。之前曾聊过 LG phone 整个 UI 都用 flash lite 写成，现在则是更进一步攻占了开机画面，未来的发展非常有趣啊，希望它能尽快追上 as3 的脚步，把传说中的 flex framework for mobile 搬出来，届时可就玩到乐翻天了。-as2 support: 这个好像喊很久了，现在真的支持 class 了吗？
-flv support: 这个到是很重要的新功能，不过已经不是新闻，今年初时就已发表
-xml loading: 从 flash lite 2.1 起就可以支持 socket server，所以要在手机上玩 push/pull 变的非常简单

5. VOIP in flash

FP 将支持 voip 不是新闻，但真正看到它运作还是吓一跳。Pacifica 是这个产品的代号，它将提供下列功能:Version 1:
* HQ voice chat
* text instant messaging
* presence
* NAT/Firewall traversal
* Ajax/HTML, Flash/FlexFuture Roadmap:
* video chat
* p2p
* AIR
* PSTN Access要注意的重点是这几个字: VoIP, SIP, SDP 与 P2P。
你能想象一旦 flash player 本身内建 VoIP 与 SIP 支持后，可能的应用有多广吗？简单来说，上面listing 里面随便一项，都可以将这个世界再翻一遍，差不多就是这样的影响力。

6. CoCoMo

这可不是 Adobe 与 Beach Boys 的异业结盟。CoCoMo 是 Adobe Connect (也就是 Breeze) 新版本的代号，不出所料果然用 flex 全部改写，但更惊人的是它开始玩起另一个更有潜力的市场，API platform !将来 flex developer 可操作 Adobe Connect 的 API 来制作各种 desktop sharing, audio/video chat & collaboration，相较之下，之前炒的火热的 facebook platform 实在是没什么啊(不过当然这两者可以是完美的互补，不一定是零合游戏)。

7. Share

一个在线文件、分享、阅读的平台，每个user 有 1gb 空间。同样用 flex 写成，用了许多熟悉的组件，例如 page component (oh, the great Ely!) 与 flash paper，也提供 REST style API 可供 mesh up，将来打算整合 Buzzword 提供编辑功能。从本质来看，online-doc sharing 这种东西当然早就有人做过了，网络上随便都可以找到一狗票，同样是让人上传文件，然后转档成 swf 再用 flash player 来看，那 adobe 又何苦呢？就我来看，Share 是 adobe 在 web publishing 方面的新尝试，主要利用的优势当然就是自家的 PDF 与 flash player，但跟其它单纯只是 web 2.0 startup 公司不同的是，adobe 心里想的应该是它完整的 electronic publishing 平台，从内容、制作、生成到消费，希望能通通包下来，建立大一统的体系，我相信 Share 与之前介绍过的 ebook reader 都只是这个计划下的部份产物，未来发展还待观察。

8. C/C++ to AS3 conversion

这个玩意非常有趣，这位神人写了一个 compiler，可以将 C/C++ 的 code 直接转译成 AS3，然后再编译成 swf 供 flash/flex/air 使用，现场最另人震撼的 demo 就是他直接将 Quake (一个 doom-like 的射击游戏) 编译成 flash 版然后玩了起来，你可以想见现场会疯狂到什么程度!! (更酷的是这位工程师还是一副平淡的表情，真正是扮猪吃老虎的极致表现啊)。好，热情完毕，接着分析师上身。我主要思考的是下列三点：1. 为何需要这个东西？上图中四个角落写着 (ruby, php, python, lua), 它代表什么？
2. 这东西背后的企图是什么？
3. 谁会获益？它可以用在什么地方？发展潜力有多大？基本上我已经有了一套大致的想法与理论，但很有兴趣想听听各位的想法。

9. Adobe 买下 Buzzword

这件事其实几个月前就有风声出来，当 adobe 第一批工程师进驻 buzzword 办公室时，明眼人就知道是怎么回事了，反而比较奇怪的为何 SlideRocket 一直谈不下来(趁人家还没 IPO 前多撒点钱快点搞定将来比较好办事啊)？从市场角度来看，Buzzword(类似 word 的文字编辑器) 与 SlideRocket(类似 powerpoint 的简单软件) 应该是当今 RIA 业界最俱代表性与杀伤力的两支app，它们几乎有撼动 Office 市场的能力，因此 adobe 对它们的重视与关爱可说是其来有自，亳不奇怪。比较值得观察的将是，迟早 Adobe 手上会有 word, powerpoint 与 excel 兼容的软件(当然是 built with Flex/AIR)，届时世界上只有四间主流商业公司有成熟的 office 产品(OO.o 这种就先不算进来，呃，好，其实还有 IBM Lotus Symphony，不过知名度不高也先放一边)-Microsoft: Office 的霸主地位无庸置疑，runs on desktop only
-Apple: Mac 上的 Office 霸主, runs on desktop only
-Google: Doc 系列产品，算是目前 web-based 里最成熟的一家
-Adobe: 同样为 web-based, 但因为采用 flash 制作，因此操作接口与功能将明显超越 google docs (与其它 ajax 系列的 office-apps)而其中只有 google 与 adobe 已经很积极在 web-based 这块深耕(MS的 office live 则还未成熟)，从趋势来看(on-line, access everywhere, collaboration, messaging)，web式的产品前途是比较看好的，而从技术面来看，flash式的 web app 往往又比 ajax 式的好一点(至少在 tool 级这个领域)，所以 adobe 可以说是已经站在比较有利的 position，这是很有趣也值得观察的事(而且要睁大眼睛好好看着)。

10. Flash CS4 与 Fireworks

CS4Flash 部份有许多不错的新功能，例如可在 authoring time live preview video content，timeline 大改良, tween 方式更自由，以及神奇的 IK 效果，我想对能掌握这些新东西的多媒体设计师来说，这应该是非常棒的消息。Fireworks 部份则是强调与 flex 的整合，例如可在 fireworks 里制作组件与style/skin 然后直接输出有 scale-9 的 swc 给 flex 用，基本上都还是很粗浅的整合尝试，未来12个月还要多努力。

总结

综观以上 highlight 出来的 10点，如果你仔细去推敲每一点背后所代表的意义，并思考它们未来可能的影响力与冲击效应，或许你会像我一样觉得全身发热心跳加快。基本上观察这次 Max 揭露的消息，感觉很像在看高手对弈，当你看到局中一步棋时，就知道胜负已定，未来所有的步数皆已确定，结果只是时间问题，而更令人惊讶的是，往往这致胜的一步是如此的不明显与不经意，轻轻的滑过就决定了未来，这才是真正让人自叹弗如的地方。想到这里，只能说这真的是一个 exciting times，很高兴能置身其中、亲自经历而不是在十年后回头来赞叹当年。

gembin 2008-09-24 14:21 发表评论

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 发表评论