魏水平 http://www.wspnet.cn 万创科技攻城师 Tue, 13 Dec 2011 06:27:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 开发之前设计先行 http://www.wspnet.cn/39.html http://www.wspnet.cn/39.html#comments Tue, 13 Dec 2011 06:27:50 +0000 wspnet http://www.wspnet.cn/?p=39
大多数的开发者或者管理者认为，用户体验（UX）不过是选择使用的颜色、字体或者是按钮的圆角之类的修饰，并不是那么重要。而窗口的圆角或者柔美的动画并不是用户体验（UX）的关键部分。我的同事软件传奇人物贝尔·霍利斯（Billy Hollis）称其为“装饰，而不是设计”。
整个程序的用户体验（UX）包含：其工作流，功能集以及所需要的输入的体验。程序的用户体验不是那些手工艺品专家将某些绚丽的内容添加到产品说明书里面。
用户体验会在起到装饰作用的同时决定这个程序的成功与失败。把你的程序想象成一件家具，例如一张桌子。而装饰则是这个桌子光洁的表面，如果说开发者错误的选择了糟糕的材料，即使是世界上最好的设计也会无法满足用户基本的需求。如果你的用户想要一个自然风格装修的客厅，选择木制材料进行修造将会让客户更加满意。而经常需要进行日常消毒的餐厅或厨房使用金属会更好一些。了解了这些之后，你会觉得单纯给用户一把椅子或一张桌子就可以解决他们的问题就可以了吗？
下面的这个示例就会演示怎么突破用户体验的限制来决策软件开发。我也在软件主题演讲中使用了它。
我在去瑞典讲学时浏览Google网站，它的服务器自动监测到我当前的国家/地区以及其应当使用的语言，如果图1所显示的瑞典语界面。通常情况下，对于大多数用户而且这样是正确的，偶尔会发现像我这样的特殊情况，也只需要在右下角进行一次单击就可以永久修复（使用永久型Cookie）问题了。而另外一个例子，在浏览UPS.com的时候如果你必须点击一个大约有30多个国家的列表来选择瑞典，而且它不会记住你的选择，在下一次访问的时候，你需要再次进行上面操作。这样浪费了客户的时间，也浪费了很多流量的成本。
UPS的设计师会遭到来自那些不能自动被检测到的国家用户的谴责。（这样的检测工作是非常容易做到的，只是一个简单的静态列表，每天更新一次，很容易）。他们要不就是蔑视他们的工资，要不就是故意选择浪费每位访问他们网站用户的时间。世界上没有任何的装饰可以掩盖这样的错误。
正如我之前所写的那样，Google明白这样做每月会节约数十亿美元的流量费用。其自动国家/地区检测，自动搜索建议，并自动获取搜索结构结合在一起，然后来解决用户的问题；付出最少的操作，在最短的时间内获得正确的结果。即使是世界上最糟糕的界面也不很难破坏这个网站。
偶尔，谷歌也会加入一些奇思妙想的标志。最近我看到过一个吉他，一个卓别林恶搞的视频，例如图1所示的月食。但是，Google从来没有让这些装饰妨碍它的功能，而且永远不打算做这样的改变。将它称为“Google Doodle”以区分其并非Google基本的功能。
客户经常会在产品完成的时候来要求我评价他们产品的功能。那些已经完成的功能、花掉预算以及僵化的设计，这时已经来不及改变什么了。当我看到我的客户坚持自己的意见的时候，我都想撕扯自己的头发。就像一个癌症外壳医生一样，我想尖叫：“你为什么不在一年前来找我，我可以帮助你的”。像外科医生一样，我可以提供任何保守治疗，像我宣扬的那样，在早期进行干预，而不是在痛苦而无法帮助的时候，再去寻求专家的帮助。
诚如我所言，用户体验设计是在项目在早期，而非结束的时候，感谢阅读。现在去做吧，在开始的时候来找我，而不是结束的时候。

]]>
大多数的开发者或者管理者认为，用户体验（UX）不过是选择使用的颜色、字体或者是按钮的圆角之类的修饰，并不是那么重要。而窗口的圆角或者柔美的动画并不是用户体验（UX）的关键部分。我的同事软件传奇人物贝尔·霍利斯（Billy Hollis）称其为“装饰，而不是设计”。
整个程序的用户体验（UX）包含：其工作流，功能集以及所需要的输入的体验。程序的用户体验不是那些手工艺品专家将某些绚丽的内容添加到产品说明书里面。
用户体验会在起到装饰作用的同时决定这个程序的成功与失败。把你的程序想象成一件家具，例如一张桌子。而装饰则是这个桌子光洁的表面，如果说开发者错误的选择了糟糕的材料，即使是世界上最好的设计也会无法满足用户基本的需求。如果你的用户想要一个自然风格装修的客厅，选择木制材料进行修造将会让客户更加满意。而经常需要进行日常消毒的餐厅或厨房使用金属会更好一些。了解了这些之后，你会觉得单纯给用户一把椅子或一张桌子就可以解决他们的问题就可以了吗？
下面的这个示例就会演示怎么突破用户体验的限制来决策软件开发。我也在软件主题演讲中使用了它。
我在去瑞典讲学时浏览Google网站，它的服务器自动监测到我当前的国家/地区以及其应当使用的语言，如果图1所显示的瑞典语界面。通常情况下，对于大多数用户而且这样是正确的，偶尔会发现像我这样的特殊情况，也只需要在右下角进行一次单击就可以永久修复（使用永久型Cookie）问题了。而另外一个例子，在浏览UPS.com的时候如果你必须点击一个大约有30多个国家的列表来选择瑞典，而且它不会记住你的选择，在下一次访问的时候，你需要再次进行上面操作。这样浪费了客户的时间，也浪费了很多流量的成本。
UPS的设计师会遭到来自那些不能自动被检测到的国家用户的谴责。（这样的检测工作是非常容易做到的，只是一个简单的静态列表，每天更新一次，很容易）。他们要不就是蔑视他们的工资，要不就是故意选择浪费每位访问他们网站用户的时间。世界上没有任何的装饰可以掩盖这样的错误。
正如我之前所写的那样，Google明白这样做每月会节约数十亿美元的流量费用。其自动国家/地区检测，自动搜索建议，并自动获取搜索结构结合在一起，然后来解决用户的问题；付出最少的操作，在最短的时间内获得正确的结果。即使是世界上最糟糕的界面也不很难破坏这个网站。
偶尔，谷歌也会加入一些奇思妙想的标志。最近我看到过一个吉他，一个卓别林恶搞的视频，例如图1所示的月食。但是，Google从来没有让这些装饰妨碍它的功能，而且永远不打算做这样的改变。将它称为“Google Doodle”以区分其并非Google基本的功能。
客户经常会在产品完成的时候来要求我评价他们产品的功能。那些已经完成的功能、花掉预算以及僵化的设计，这时已经来不及改变什么了。当我看到我的客户坚持自己的意见的时候，我都想撕扯自己的头发。就像一个癌症外壳医生一样，我想尖叫：“你为什么不在一年前来找我，我可以帮助你的”。像外科医生一样，我可以提供任何保守治疗，像我宣扬的那样，在早期进行干预，而不是在痛苦而无法帮助的时候，再去寻求专家的帮助。
诚如我所言，用户体验设计是在项目在早期，而非结束的时候，感谢阅读。现在去做吧，在开始的时候来找我，而不是结束的时候。

]]> http://www.wspnet.cn/39.html/feed 0 详解Orchard主题（Theme） http://www.wspnet.cn/34.html http://www.wspnet.cn/34.html#comments Thu, 17 Nov 2011 00:56:27 +0000 wspnet http://www.wspnet.cn/?p=34 主题可以让Orchard用户自定义站点显示界面，度身定制他们想要的站点风格。主题还可以有针对性的对Orchard模块所提供的任何模板进行样式重写、甚至是改变图像、布局等。
主题在哪
主题位于Orchard网站根目录下的Themes文件夹中。
TheThemeMachine（默认主题）
TheThemeMachine是Orchard默认提供的主题，我们可以通过分析这个主题来了解Orchard主题的功能。和其他任何一个主题一样，它也可以在Themes文件夹中找到。

TheThemeMachine被设计成为一个简洁但是确具有前瞻性的主题，它里面几乎包含了主题的各种功能。本文就通过分析这个主题，来介绍主题的相关知识。
分析一个主题
本节介绍了主题中一些必需的和可选的元素。

清单文件（Theme.txt）
每一个主题都必需有一个清单文件来描述该主题。此文件是一个文本文件，命名为Theme.txt，在相应主题文件夹的根目录下。下面是TheThemeMachine主题的清单文件：

Name: The Theme Machine
Author: jowall, mibach, loudej, heskew
Description: Orchard Theme Machine is a flexible m….
Version: 0.1
Tags: Awesome
Website: http://orchardproject.net
Zones: Header, Navigation, Featured, BeforeMain…
文件给出了主题的名称、描述、作者、标签等信息。区域（Zones）字段则描述了该主题所有可用的区域。区域里可以添加任何内容，最常见的是widgets。并不是所有的区域都需要在这里描述，只有那些需要添加widgets的区域才需要在这里进行描述。

此图显示了19个区域，这通常已经超过了你网站所需要的布局。这些区域包括页眉（Header）页脚（Footer），它们位于页面的最上面和最下面。有一个导航区域（Navigation），这里通常是显示导航菜单的。特色区域（Featured）你可能会放一个网站Banner。BeforeMain和AfterMain在你网站主要内容区域的前后。AsideFirst和AsideSecond在你网站主要内容区域的左右。在页面的中部有一个消息区域（Messages），可用于显示消息通知。其次还有BeforeContent和AfterContent也在主内容区域前后，但是却在两侧区域之间。TripelFirst，TripelSecond，TripelThird在页面的最底部，如你想实行三列布局效果，那么就可以用它们。
主题可以让Orchard用户自定义站点显示界面，度身定制他们想要的站点风格。主题还可以有针对性的对Orchard模块所提供的任何模板进行样式重写、甚至是改变图像、布局等。
主题在哪
主题位于Orchard网站根目录下的Themes文件夹中。
TheThemeMachine（默认主题）
TheThemeMachine是Orchard默认提供的主题，我们可以通过分析这个主题来了解Orchard主题的功能。和其他任何一个主题一样，它也可以在Themes文件夹中找到。

TheThemeMachine被设计成为一个简洁但是确具有前瞻性的主题，它里面几乎包含了主题的各种功能。本文就通过分析这个主题，来介绍主题的相关知识。
分析一个主题
本节介绍了主题中一些必需的和可选的元素。

清单文件（Theme.txt）
每一个主题都必需有一个清单文件来描述该主题。此文件是一个文本文件，命名为Theme.txt，在相应主题文件夹的根目录下。下面是TheThemeMachine主题的清单文件：

Name: The Theme Machine
Author: jowall, mibach, loudej, heskew
Description: Orchard Theme Machine is a flexible m….
Version: 0.1
Tags: Awesome
Website: http://orchardproject.net
Zones: Header, Navigation, Featured, BeforeMain…
文件给出了主题的名称、描述、作者、标签等信息。区域（Zones）字段则描述了该主题所有可用的区域。区域里可以添加任何内容，最常见的是widgets。并不是所有的区域都需要在这里描述，只有那些需要添加widgets的区域才需要在这里进行描述。

此图显示了19个区域，这通常已经超过了你网站所需要的布局。这些区域包括页眉（Header）页脚（Footer），它们位于页面的最上面和最下面。有一个导航区域（Navigation），这里通常是显示导航菜单的。特色区域（Featured）你可能会放一个网站Banner。BeforeMain和AfterMain在你网站主要内容区域的前后。AsideFirst和AsideSecond在你网站主要内容区域的左右。在页面的中部有一个消息区域（Messages），可用于显示消息通知。其次还有BeforeContent和AfterContent也在主内容区域前后，但是却在两侧区域之间。TripelFirst，TripelSecond，TripelThird在页面的最底部，如你想实行三列布局效果，那么就可以用它们。
FooterQuad*则可以用于四列布局效果。如果这些区域没有内容，它们将会隐藏。所以你可以灵活的应用这些区域来布局你的网站。
更多关于清单文件的介绍可以查看《Orchard模块和主题的清单文件（Manifest File）》。

主题缩略图
主题还需要包含一个主题效果的缩略图文件Theme.png，位于该主题的根目录下，大小为400X400px，它可以直观的让人们了解该主题的样式。

主题区域概况图
另外主题还可以提供一个主题区域概况图，让人们在添加Widgets时候可以很直观的知道所添加的Widgets将处于页面的那个位置。此图文件名为ThemeZonePreview.png，位于该主题的根目录下，宽度为400px。

静态资源
主题通常还可以包含一些静态资源，如：CSS样式表、JavaScript文件或图片等。这些文件必须分别放置在以下文件夹中：
Css：放置Css样式表。
Script：放置JavaScript文件。
Content：这个文件夹TheThemeMachine主题中没有，如果你的主题中有用到图片，可以创建一个这样的文件夹，并在里面建立一个Images的目录存放图，如果图片很多还可以在此目录下建子目录分类存放。
注意：如果自己创建一个Content文件夹来存放一些图片或其它文件。需要在Content文件夹中创建一个web.config文件，来启用此文件夹中静态文件处理程序映射。如果没有此文件这些静态文件将无法访问，因为Orchard从安全的角度考虑在根目录的web.config中已经移除了所有的处理程序映射。需要在Content文件夹中添加的web.config文件如下：
web.config

















文档类型定义（Document）
一个主题中通常不包含Document.cshtml文件，因为需要改动这个文件的情况很少。这个文件主要是用于定义标签以外元素的。如果文档类型（DOCTYPE）、标签等。主题中如果不包含此文件，默认调用~\Core\Shapes\Views\下的Document.cshtml文件，当然我们也可以把这个文件复制到主题的Views目录下，来重写文档定义。

布局（Layouts）
布局是控制Body标签以内的内容呈现排版的。例如：你要定义主要内容在什么位置显示。你可以在后续的” 标记（Markup）“一节中了解更加详细的内容。
一个主题可以包括任意数量的布局文件，不过在TheThemeMachine主题中只有一个布局文件，名为：Layout.cshtml。例如：一个主题可以添加多个专有布局文件，如：Layout-Blog.cshtml 或 Layout-HomePage.cshtml，这样就可以分别为博客页面或主页定制特有的布局效果。请注意，布局文件的命名规则为：Layout-{layout name}.cshtml。每一个布局文件都可以定义自己特有的区域并组织不同的标记。
关于如何使用这些可以替换的布局文件，可以见《Switching the layout in Orchard CMS》中的讲解。

形状模板（Shape Templates）
在Orchard中，当一个Web页面呈现为Html时，它是作为一个树型结构的形状集合（Shapes）出现的。所谓树型结构的形状集合就是大形状中套小形状，一层一层的套下去。Shapes相当于一个页面的Model，它里面包含了这个页面上的所有对象，如：区域、菜单、菜单项和Widgets等。下图可大致说明这种形状关系：

每一个Shape都可以用一个模板来呈现，这些模板都可以在主题中进行重写。在主题中重写模板，用同名的模板来替换就可以了。例如：主题中如果有一个Menu.cshtml模板存在，它将替换原有的菜单模板。
TheThemeMachine主题中包含了两个形状模板，BadgeOfHonor和Branding。这是从Layout.cshtml建立的并分别注入到页眉和页脚区域的。

// Site name and link to the home page
WorkContext.Layout.Header.Add(New.Branding(), “5″);
// Powered by Orchard
WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), “5″);

注意：模板是两种呈现形状方法的其中之一。除了用模板以外你还可以通过代码的形式来呈现，如：定义一个方法并加上Shape属性即可，你可以在CoreShapes.cs中找到这种写法。这通常用于模块中，但是在主题里也是一样适用的。

内容项模板（Item Templates）
主题还可以重写内容项呈现模板。建立一个\Views\Items文件夹，在该文件夹下就可以添加相应的内容项模板。内容项模板的命名规则：Content-{content type name}.cshtml 或Content-{content type name}.{display type}.cshtml。例如：你要重写博客文章的呈现模板，你就可以在\Views\Items文件夹下，添加一个Content-BlogPost.cshtml文件来进行替换，并且你还可以添加一个Content-BlogPost.Summary.cshtml来替换以摘要形式显示的博客文章。

部件模板（Part Templates）
主题还可以重写部件呈现模板。建立一个\Views\Parts文件夹，在该文件夹下就可以添加相应的部件模板。部件模板的命名规则为：用同名的部件模板进行替换。例如：我们要重写评论部件的模板，我们只用在\Views\Parts文件夹下创建一个Comments.cshtml就可以了。

字段模板（Field Templates）
主题还可以重写字段呈现模板。建立一个\Views\Fields文件夹，在该文件夹下就可以添加相应的字段模板。字段模板的命名规则为：{field type name}.cshtml和{field type name}.{display type}.cshtml。例如，我们重写一个文本字段的模板，可以用Common.Text.cshtml进行替换。

模板的候补（Alternates）

如上文所示，我们可以在皮肤中提供一套相应的模板或布局文件，来控制不同类型的内容的呈现效果。例如：可以添加一个主页的特殊布局样式，还可添加其他子页面的特殊布局样式，还可以以不同的方式显示博客内容。更多关于模板替换的规则可以见《Alternates》。顺便说一句其实我们也不用死记硬背这些规则，因为Orchard已经帮我提供了一个强大的工具，来解决这些问题。《Customizing Orchard using Designer Helper Tools》一文中有关于这个工具的介绍。

小部件重写（Widget Overrides）

在主题中还可以对小部件的呈现样式进行重写。在Views文件夹下，创建一个命名为：widget-{widget type}.cshtml的文件即可重写相应的小部件。例如：我们需要在Html 小部件上加一个红色的边线，我们可以在Views文件夹下创建一个widget-htmlwidget.cshtml的文件，并输入以下代码即可：

@Display(Model.Content)

注：这只是一个简单的示例，通常用CSS样式比直接用内联样式要好。

布局配置文件（Placement Files）

一个主题可以在placement.info文件中定义形状的呈现位置。这个文件在主题文件夹的根目录下。placement.info文件是一个Xml文件，例如：
placement.info







Parts_Blogs_Blog_BlogPostCount="Meta:3"/>


更多关于placement.info文件的介绍可以查看《Understanding the placement.info File》。

标记（Markup）
首先我们要弄明白这里所说的“标记”到底指的是什么，在官网文档中对这个词并没有明确的定义。我的理解是：可在模板中可使用的一些Orchard特有的方法或功能。
在文件中的标记取决于你所选择的视图引擎。Orchard默认的视图引擎为Razor（.cshtml文件）。关于此模板引擎的语法指南可查看《Template File Syntax Guide》。
在一个模板中，Model对象代表了当前模板所需要呈现的形状。这就意味着如果你呈现的是一个Message形状，那就有一个Message的属性。你可以用@Model.Message显示这个属性，这个就是就显示一个形状模板的标记。
此外Orchard提供了另外一个重要的方法来显示形状,这个方法是Display。例如：在layout.cshtml你要显示一个区域，就可以用@Display(Model.Content)来显示。
最后，你也可以在各种各样的模板中看到类似@Html.RegisterScript(“mystyle.css”)或 @Html.RegisterScript(“myscript.js”) 这样的写法。这是注册样式或脚本的方法，类似在页面中添加link或script标签。如果多个模板引用了同一资源，Orchard最终也只会生成一个资源的引用。
主题中的代码
大多数主题通常只包含一个样式文件，一些模板文件（一般是布局文件）和一些图片文件。它们一般没有代码文件在主题中（不是指得在模板中的一些简单代码）。如果需要在主题中添加一些高级应用，就需要添加相应设置代码，创建自定义形状的代码，或者重写形状的代码了。
针对这些情况就需要用创建一个项目的方式来创建主题了，这个主题里面需要包含一个.csproj文件，来告诉Orchard有哪些文件需要编译。

参考文档

http://www.orchardproject.net/docs/Anatomy-of-a-theme.ashx

]]> http://www.wspnet.cn/34.html/feed 0 理解Orchard中的内容管理 http://www.wspnet.cn/32.html http://www.wspnet.cn/32.html#comments Thu, 17 Nov 2011 00:55:34 +0000 wspnet http://www.wspnet.cn/?p=32 Orchard作为一个内容管理系统（CMS），内容管理部分当然是其中最核心的东西。在Orchard中的任何数据都可以把它理解为内容（Content）。页面是内容、博客是内容、文章也是内容。整个网站就是由这些不同类型的内容项（Content Item）构成的。对这些不同内容的类型定义就是内容类型（Content Type）。而内容类型则是通过若干个不同的内容部件（Content Part）组成。这些内容部件都是可以跨类型重用的东西，每一个内容部件都实现了从UI层到数据库层的完整封装。正是由于Orchard这种对内容的组织，我们可以很方便的构造出一种新的类型。如：我们需要做一个产品展示页面，只需要定义一个产品类型（Product Type）。在这个产品类型中我们只用定义一个产品特有内容部件（Product Part，包含价格、品牌等信息），并添加一个路由部件（Route Part，可指定相应产品的名称和详情页地址）、一个文本部件（Body Part，可提供一个富文本输入框，用做产品信息描述）即可。此外，我们还可以添加标签部件（Tags Part），评论部件（Comments Part）等来丰富此产品类型。一旦有了这个产品类型的存在，我就可以很方便的通过后台来维护产品内容了。
Orchard中内容组织结构图示意图

Orchard中博文类型的Part分解图

由上图就可以看出一片博文其实是由多个内容部件组成的。

Orchard中一些常用的内容部件
Route Part：路由部件，可为内容提供路由支持即可通过指定Url访问相应内容。
Body Part：文本部件，可提供一个富文本编辑器的功能。
Comment Part：评论部件，可提供评论功能。
Tags Part：标签部件，可提供内容的标签定义，实现全站的标签检索功能。
Common Part：通用部件，提供所有者信息。
Publish later Part：延迟发布部件，提供内容延迟发布功能。

参考文档：

Orchard中的基本概念：http://www.orchardproject.net/docs/Basic-Orchard-Concepts.ashx

]]> Orchard作为一个内容管理系统（CMS），内容管理部分当然是其中最核心的东西。在Orchard中的任何数据都可以把它理解为内容（Content）。页面是内容、博客是内容、文章也是内容。整个网站就是由这些不同类型的内容项（Content Item）构成的。对这些不同内容的类型定义就是内容类型（Content Type）。而内容类型则是通过若干个不同的内容部件（Content Part）组成。这些内容部件都是可以跨类型重用的东西，每一个内容部件都实现了从UI层到数据库层的完整封装。正是由于Orchard这种对内容的组织，我们可以很方便的构造出一种新的类型。如：我们需要做一个产品展示页面，只需要定义一个产品类型（Product Type）。在这个产品类型中我们只用定义一个产品特有内容部件（Product Part，包含价格、品牌等信息），并添加一个路由部件（Route Part，可指定相应产品的名称和详情页地址）、一个文本部件（Body Part，可提供一个富文本输入框，用做产品信息描述）即可。此外，我们还可以添加标签部件（Tags Part），评论部件（Comments Part）等来丰富此产品类型。一旦有了这个产品类型的存在，我就可以很方便的通过后台来维护产品内容了。
Orchard中内容组织结构图示意图

Orchard中博文类型的Part分解图

由上图就可以看出一片博文其实是由多个内容部件组成的。

Orchard中一些常用的内容部件
Route Part：路由部件，可为内容提供路由支持即可通过指定Url访问相应内容。
Body Part：文本部件，可提供一个富文本编辑器的功能。
Comment Part：评论部件，可提供评论功能。
Tags Part：标签部件，可提供内容的标签定义，实现全站的标签检索功能。
Common Part：通用部件，提供所有者信息。
Publish later Part：延迟发布部件，提供内容延迟发布功能。

参考文档：

Orchard中的基本概念：http://www.orchardproject.net/docs/Basic-Orchard-Concepts.ashx

]]> http://www.wspnet.cn/32.html/feed 0 Orchard中的一些名词 http://www.wspnet.cn/30.html http://www.wspnet.cn/30.html#comments Thu, 17 Nov 2011 00:54:45 +0000 wspnet http://www.wspnet.cn/?p=30 整整看了一天关于Orchard的东西，总的感觉还是一头雾水，先整理了一些关键词记录下来，便于以后深入的学习和了解。

运行机制相关的概念：
Architecture：架构。见下图：

官网介绍地址：http://www.orchardproject.net/docs/How-Orchard-works.ashx

Orchard是配置在IIS服务器上的一个Web站点，它使用了.NET4.0和ASP.Net的技术。代码是C#编写的。是基于ASP.NET MVC3的Web开发框架上编写的一个应用。它使用到了Nhibernate（OR映射工具）、Autofac（依赖注入容器）、Castle（也是一个开源框架，好像说是用到了动态代理之类的东西，目前还没明白，等清楚了再说）等成熟的框架和类库。其实还有一些其他常用的类库，如：sharpziplib（压缩、解压）、log4net（日志）等。估计是太常用了所以并没有将其列在图上。在这些成熟的框架基础上，Orchard建立了一个自己的框架Orchard Framework，主要提供一些最基本的功能，如：视图引擎（我感觉Orchard对Razor进行了重写和扩充）、内容管理、用户认证等，我们可以把它理解为Orchard所要使用的基础类库。在Orchard Framework的基础上，Orchard提供了一个网站运行最核心的功能，这些功能可以被其他模块使用。如：feeds、navigation和routable。在Orchard Code之上就是模块了（Modules），Orchard自带了一些基础的模块，如：博客。另外一些后台的功能也是作为模块提供的，比如：模块管理，页面管理等。

Shell：外壳，可以理解为Orchard站点的运行基础。包括站点设置、可使用的模块列表、主题列表等等。

Tenant：直译为租户，其实是一个逻辑站点的意思。Orchard支持在一个物理的站点上建立多个逻辑的站点。每个逻辑站点都是独立，有自己的数据，自己的主题等。所以我觉得把它翻译成站点更好些。类似DNN中Portals的概念。

皮肤相关的概念：
Theme：主题。是网站皮肤的概念。可以自由的定义显示区域，而且在Orchard中页面上的任何一部分的Html代码都是可以控的。而且可以根据多种情况，对同一个模块进行不同的样式定义。如：不同的站点，不同的请求地址等。总之是一个非常灵活的东西。
Zone：区域。是皮肤上的区块划分。用于在页面上不同的地方呈现不同数据。关于自定义区域功能，好像是动态类型在这里发挥了巨大作用。具体实现，等深入了解后在详细描述。
Layer：层。这也是一个皮肤中的概念。它相当与把平面的东西立体化了。在原有的区域的基础上增加了一个权限和特定情况的维度。即可在某一区域上面根据不同的权限显示不同的数据。如：管理员可见的，注册用户可见的，匿名用户可见的，首页可见的等等。通过层的概念就很好的解决了不同权限显示不同内容的问题。并且层还可以自由定义，具体用法和实现还需要深入学习。

功能相关的概念：
Module：模块。这个定义的范围很广，几乎所有的功能都是由模块构成的。在Orchard的划分中 ContentType、Part、Field，Widget，等都可以称做模块。但我倾向于把一个完整的功能，叫做模块。比如：Blogs模块，商城模块等。其余的内容还是按照各自的属性去划分。
Widget：小部件。可以提供多种功能的东西，如：最近博文，Html内容，登录控件等等。你可以把这些小部件，添加到页面的任意一个区域中。至于小部件还能干什么，就看我们的想象力了。
ContentType：内容类型。这个可是Orchard中非常亮丽的一个功能了。比如：一个文本输入框是一个类型，我们可以定义它在显示的时候是什么样子的、编辑的时候是什么样子的、是如何存储的。也就是说每一种类型都实现了由数据库层到显示层的完整封装。更神奇的是，我们可以利用这些现有的类型组装出一个新的类型。比如：我们可以在后台中添加几个自定义字段、再加一个Body Part（图文编辑器）、再加一个Comment Part（评论），一个新的新闻类型就诞生了。可以想象这样的开发利用率有多高。而且它居然还有一个更更神奇的地方，就是每一种类型在其他新的类型中当作Part的时候，其显示样式都是可以重新定义的。这样将会极大的提高复用的灵活性。
Part：构成类容类型的一个组成部分。它可以是评论、可以是博客，它可以是你任何想表达的业务实体。是做作为显示和处理的基本单元。是Orchard中一个很关键的组成部分。我觉得暂时可以把它理解为组件，等有了深入了解后再做详细的论述。
Field：字段。我觉得可以理解为一种轻量级的内容部件，通常是一个文本框，或者是一个可选择日期的日期输入框。叫做输入控件也许更贴切些。

编程相关的概念：

Record：记录。是实际存储到数据库中的数据。我觉得也可以称它为数据实体。
ContentPart ：内容部件。是呈现到UI上的数据，我觉得也可以称它为业务实体。
Repository：数据仓库。负责数据访问的对象，我们就叫它数据访问层吧。
Handler：处理器。负责定义数据存储的方式。
Driver：驱动器。负责处理部件或字段的呈现逻辑，类似于MVC中的Controller。
Shape：外形。是一个动态类型。它负责把业务数据组装起来在View层上面显示。我们叫它视图模型也许更好一些。

]]> 整整看了一天关于Orchard的东西，总的感觉还是一头雾水，先整理了一些关键词记录下来，便于以后深入的学习和了解。

运行机制相关的概念：
Architecture：架构。见下图：

官网介绍地址：http://www.orchardproject.net/docs/How-Orchard-works.ashx

Orchard是配置在IIS服务器上的一个Web站点，它使用了.NET4.0和ASP.Net的技术。代码是C#编写的。是基于ASP.NET MVC3的Web开发框架上编写的一个应用。它使用到了Nhibernate（OR映射工具）、Autofac（依赖注入容器）、Castle（也是一个开源框架，好像说是用到了动态代理之类的东西，目前还没明白，等清楚了再说）等成熟的框架和类库。其实还有一些其他常用的类库，如：sharpziplib（压缩、解压）、log4net（日志）等。估计是太常用了所以并没有将其列在图上。在这些成熟的框架基础上，Orchard建立了一个自己的框架Orchard Framework，主要提供一些最基本的功能，如：视图引擎（我感觉Orchard对Razor进行了重写和扩充）、内容管理、用户认证等，我们可以把它理解为Orchard所要使用的基础类库。在Orchard Framework的基础上，Orchard提供了一个网站运行最核心的功能，这些功能可以被其他模块使用。如：feeds、navigation和routable。在Orchard Code之上就是模块了（Modules），Orchard自带了一些基础的模块，如：博客。另外一些后台的功能也是作为模块提供的，比如：模块管理，页面管理等。

Shell：外壳，可以理解为Orchard站点的运行基础。包括站点设置、可使用的模块列表、主题列表等等。

Tenant：直译为租户，其实是一个逻辑站点的意思。Orchard支持在一个物理的站点上建立多个逻辑的站点。每个逻辑站点都是独立，有自己的数据，自己的主题等。所以我觉得把它翻译成站点更好些。类似DNN中Portals的概念。

皮肤相关的概念：
Theme：主题。是网站皮肤的概念。可以自由的定义显示区域，而且在Orchard中页面上的任何一部分的Html代码都是可以控的。而且可以根据多种情况，对同一个模块进行不同的样式定义。如：不同的站点，不同的请求地址等。总之是一个非常灵活的东西。
Zone：区域。是皮肤上的区块划分。用于在页面上不同的地方呈现不同数据。关于自定义区域功能，好像是动态类型在这里发挥了巨大作用。具体实现，等深入了解后在详细描述。
Layer：层。这也是一个皮肤中的概念。它相当与把平面的东西立体化了。在原有的区域的基础上增加了一个权限和特定情况的维度。即可在某一区域上面根据不同的权限显示不同的数据。如：管理员可见的，注册用户可见的，匿名用户可见的，首页可见的等等。通过层的概念就很好的解决了不同权限显示不同内容的问题。并且层还可以自由定义，具体用法和实现还需要深入学习。

功能相关的概念：
Module：模块。这个定义的范围很广，几乎所有的功能都是由模块构成的。在Orchard的划分中 ContentType、Part、Field，Widget，等都可以称做模块。但我倾向于把一个完整的功能，叫做模块。比如：Blogs模块，商城模块等。其余的内容还是按照各自的属性去划分。
Widget：小部件。可以提供多种功能的东西，如：最近博文，Html内容，登录控件等等。你可以把这些小部件，添加到页面的任意一个区域中。至于小部件还能干什么，就看我们的想象力了。
ContentType：内容类型。这个可是Orchard中非常亮丽的一个功能了。比如：一个文本输入框是一个类型，我们可以定义它在显示的时候是什么样子的、编辑的时候是什么样子的、是如何存储的。也就是说每一种类型都实现了由数据库层到显示层的完整封装。更神奇的是，我们可以利用这些现有的类型组装出一个新的类型。比如：我们可以在后台中添加几个自定义字段、再加一个Body Part（图文编辑器）、再加一个Comment Part（评论），一个新的新闻类型就诞生了。可以想象这样的开发利用率有多高。而且它居然还有一个更更神奇的地方，就是每一种类型在其他新的类型中当作Part的时候，其显示样式都是可以重新定义的。这样将会极大的提高复用的灵活性。
Part：构成类容类型的一个组成部分。它可以是评论、可以是博客，它可以是你任何想表达的业务实体。是做作为显示和处理的基本单元。是Orchard中一个很关键的组成部分。我觉得暂时可以把它理解为组件，等有了深入了解后再做详细的论述。
Field：字段。我觉得可以理解为一种轻量级的内容部件，通常是一个文本框，或者是一个可选择日期的日期输入框。叫做输入控件也许更贴切些。

编程相关的概念：

Record：记录。是实际存储到数据库中的数据。我觉得也可以称它为数据实体。
ContentPart ：内容部件。是呈现到UI上的数据，我觉得也可以称它为业务实体。
Repository：数据仓库。负责数据访问的对象，我们就叫它数据访问层吧。
Handler：处理器。负责定义数据存储的方式。
Driver：驱动器。负责处理部件或字段的呈现逻辑，类似于MVC中的Controller。
Shape：外形。是一个动态类型。它负责把业务数据组装起来在View层上面显示。我们叫它视图模型也许更好一些。

]]> http://www.wspnet.cn/30.html/feed 0 Flash弱爆了！15个HTML5特效震撼人心 http://www.wspnet.cn/11.html http://www.wspnet.cn/11.html#comments Tue, 20 Sep 2011 14:25:40 +0000 wspnet http://www.wspnet.cn/?p=11      除非你一直在岩石下生活，否则你不会没听过HTML5。现在几乎到处都有HTML5的身影，这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。

    1. Canvas Cycle

　　艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作，这是一幅华丽动人的自然风景画,如冬日的森林，海景和山脉。他们看着这美不胜收并具有音效的图片，心旷神怡。如果你想从工作中获得片刻的轻松，这些照片可以瞬间融化你的紧张感。

　　2. Google Gravity

　　另一个来自于Mr.Doob的惊人之作，这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接，这对那些讨厌谷歌的大公司来说是个很有意思的游戏。

　　3. Canvas Trees

　　这是有Kenneth Jorgenson创制，这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说：你可以点击网站，然后它会带你到一个白色的背景。当开始计算程序中有多少分支时，黑色墨水绘制的树开始成长。你可以不断地刷新，只要你愿意。

　　4. Magnetic

　　这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始，这可以在屏幕上拖动。些许微粒光束围绕着它，如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒，只需双击并拖动他们到任意地方。是的，他们都是有关磁铁和微粒。

　　5. Celebrity Earnings Graph 名人赚钱图表

　　想知道一个电视名人每集节目赚多少？这是个很酷的小图能显示成堆的彩条，它们代表每一个特定特定的名人（或像 Charlie Sheen）. 这是 Daniel Rapp诸多项目中的一个。

　　6. Canvas Ribbon

　　Paul Truong 开发了这个有趣的应用，能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。

　　7. WebGL Water

　　这还有一个很酷的演示，使用了革命性的WebGL（基于Web的图形库），在谷歌chrome上效果最好。在演示中，你可以荡起水中的涟漪，或拖动球体移动它，然后按某些键盘键设置光线的方向和切换重力，所有的都是见证如何在环境中灵活地移动目标。

　　8. Chrysaora

　　另一个由WebGL提供的令人惊异的演示，在这你可以看到一群非常漂亮活泼的水母在水中游动，梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活，最好用谷歌Chrome浏览。

　　9. Voxel [...]]]>      除非你一直在岩石下生活，否则你不会没听过HTML5。现在几乎到处都有HTML5的身影，这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。

Flash弱爆了！15个HTML5特效震撼人心

    1. Canvas Cycle

　　艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作，这是一幅华丽动人的自然风景画,如冬日的森林，海景和山脉。他们看着这美不胜收并具有音效的图片，心旷神怡。如果你想从工作中获得片刻的轻松，这些照片可以瞬间融化你的紧张感。

　　2. Google Gravity

　　另一个来自于Mr.Doob的惊人之作，这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接，这对那些讨厌谷歌的大公司来说是个很有意思的游戏。

　　3. Canvas Trees

　　这是有Kenneth Jorgenson创制，这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说：你可以点击网站，然后它会带你到一个白色的背景。当开始计算程序中有多少分支时，黑色墨水绘制的树开始成长。你可以不断地刷新，只要你愿意。

　　4. Magnetic

　　这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始，这可以在屏幕上拖动。些许微粒光束围绕着它，如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒，只需双击并拖动他们到任意地方。是的，他们都是有关磁铁和微粒。

　　5. Celebrity Earnings Graph 名人赚钱图表

　　想知道一个电视名人每集节目赚多少？这是个很酷的小图能显示成堆的彩条，它们代表每一个特定特定的名人（或像 Charlie Sheen）. 这是 Daniel Rapp诸多项目中的一个。

　　6. Canvas Ribbon

　　Paul Truong 开发了这个有趣的应用，能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。

　　7. WebGL Water

　　这还有一个很酷的演示，使用了革命性的WebGL（基于Web的图形库），在谷歌chrome上效果最好。在演示中，你可以荡起水中的涟漪，或拖动球体移动它，然后按某些键盘键设置光线的方向和切换重力，所有的都是见证如何在环境中灵活地移动目标。

　　8. Chrysaora

　　另一个由WebGL提供的令人惊异的演示，在这你可以看到一群非常漂亮活泼的水母在水中游动，梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活，最好用谷歌Chrome浏览。

　　9. Voxel Rain

　　Voxel rain 意味着3D多色箱降成一个旋转的大块。这就像展示20世纪90年代的计算机，现在涉及到Web浏览器，利用HTML5的能力，互联网中最明亮的时代不会太远。

　　10. HTML5 文本效果

　　通常我们网页设计师不知道HTML5在Web排版突破上到底能给我们带来多大突破，并给你演示答案，比以往任何时候都跟多！你可以选择见证立体效果、霓虹灯效果，甚至移动的霓虹灯效果，未来的网页排版全在HTML5控制中。

　　11. 旋转的 HTML5 Logo

　　我Hold不住了，它旋转、旋转……这很酷。

　　12. 3D绘图

　　厌倦了2D基本HTML绘图服务吗？简单地画条线，然后向左或者向右移动，你将会看到你的旋转3D透视图。3D绘图与HTML5的结合不会更复杂。

　　13. mta.me Conductor

　　mta.me Conductor 通过涌现的点不断移动形成线，当线相互“碰撞”时给予你灵感，他们会引发一些互动。这些都证明HTML5不仅仅是代码，而是互动，是网页对于用户的真正关心。

　　14. Doogle Gmail

　　一个有趣的射击类型游戏，但主角是Gmail！就像经典的射击游戏，你获得生命、得分和全能的激光束。可能一个潜在的演示展示HTML5作为游戏的能力小心，Flash。如果还想玩其他HTML5 游戏，这里有10个HTML5游戏网站。

　　15. W Pilot

　　这是一个上瘾的游戏，它应该是非法的。严重的是，一旦你登录到他们的服务器，你将要玩几个小时。你基本上是到处乱飞拍摄的东西，同时避免由其他球员出手。它很简单并具有可玩性，允许多玩家操作，现在很受欢迎。

　　译文出处：伯乐在线 – 职场博客 – 程序员
　　译文链接：http://www.jobbole.com/entry.php/1433
    原文：Sonia Tracy　　翻译：敏捷翻译 – 翦丹■

Flash弱爆了！15个HTML5特效震撼人心

    除非你一直在岩石下生活，否则你不会没听过HTML5。现在几乎到处都有HTML5的身影，这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。

Flash弱爆了！15个HTML5特效震撼人心

    1. Canvas Cycle 　　艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作，这是一幅华丽动人的自然风景画,如冬日的森林，海景和山脉。他们看着这美不胜收并具有音效的图片，心旷神怡。如果你想从工作中获得片刻的轻松，这些照片可以瞬间融化你的紧张感。 http://www.effectgames.com/demos/canvascycle/

Flash弱爆了！15个HTML5特效震撼人心

    　　2. Google Gravity 　　另一个来自于Mr.Doob的惊人之作，这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接，这对那些讨厌谷歌的大公司来说是个很有意思的游戏。 http://mrdoob.com/92/Google_Gravity_HTML5

Flash弱爆了！15个HTML5特效震撼人心

    　　3. Canvas Trees 　　这是有Kenneth Jorgenson创制，这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说：你可以点击网站，然后它会带你到一个白色的背景。当开始计算程序中有多少分支时，黑色墨水绘制的树开始成长。你可以不断地刷新，只要你愿意。 http://kennethjorgensen.com/canvas/tree.html

Flash弱爆了！15个HTML5特效震撼人心

    　　4. Celebrity Earnings Graph 名人赚钱图表 　　想知道一个电视名人每集节目赚多少？这是个很酷的小图能显示成堆的彩条，它们代表每一个特定特定的名人（或像 Charlie Sheen）. 这是 Daniel Rapp诸多项目中的一个。 http://rappdaniel.com/other/vis/

Flash弱爆了！15个HTML5特效震撼人心

    　　5. Chrysaora 　　另一个由WebGL提供的令人惊异的演示，在这你可以看到一群非常漂亮活泼的水母在水中游动，梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活，最好用谷歌Chrome浏览。 http://chrysaora.com/

Flash弱爆了！15个HTML5特效震撼人心

    　　6. Canvas Ribbon 　　Paul Truong 开发了这个有趣的应用，能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。 http://www.monocubed.com/2010/11/24/html5-canvas-ribbon-ios4-2-device-orientation/

Flash弱爆了！15个HTML5特效震撼人心

    　　7. WebGL Water 　　这还有一个很酷的演示，使用了革命性的WebGL（基于Web的图形库），在谷歌chrome上效果最好。在演示中，你可以荡起水中的涟漪，或拖动球体移动它，然后按某些键盘键设置光线的方向和切换重力，所有的都是见证如何在环境中灵活地移动目标。 http://madebyevan.com/webgl-water/

Flash弱爆了！15个HTML5特效震撼人心

   

Flash弱爆了！15个HTML5特效震撼人心

    　　9. Voxel Rain 　　Voxel rain 意味着3D多色箱降成一个旋转的大块。这就像展示20世纪90年代的计算机，现在涉及到Web浏览器，利用HTML5的能力，互联网中最明亮的时代不会太远。 http://voxelrain.appspot.com/

Flash弱爆了！15个HTML5特效震撼人心

    　　10. HTML5 文本效果 　　通常我们网页设计师不知道HTML5在Web排版突破上到底能给我们带来多大突破，并给你演示答案，比以往任何时候都跟多！你可以选择见证立体效果、霓虹灯效果，甚至移动的霓虹灯效果，未来的网页排版全在HTML5控制中。 http://www.html5rocks.com/en/tutorials/canvas/texteffects/Text-Effects.html

Flash弱爆了！15个HTML5特效震撼人心

    　　11. 旋转的 HTML5 Logo 　　我Hold不住了，它旋转、旋转……这很酷。 http://www.kevs3d.co.uk/dev/html5logo/

Flash弱爆了！15个HTML5特效震撼人心

    　　12. 3D绘图 　　厌倦了2D基本HTML绘图服务吗？简单地画条线，然后向左或者向右移动，你将会看到你的旋转3D透视图。3D绘图与HTML5的结合不会更复杂。 http://hakim.se/experiments/html5/sketch/#786af119

Flash弱爆了！15个HTML5特效震撼人心

    　　13. mta.me Conductor 　　mta.me Conductor 通过涌现的点不断移动形成线，当线相互“碰撞”时给予你灵感，他们会引发一些互动。这些都证明HTML5不仅仅是代码，而是互动，是网页对于用户的真正关心。 http://www.mta.me/

Flash弱爆了！15个HTML5特效震撼人心

    　　14. Doogle Gmail 　　一个有趣的射击类型游戏，但主角是Gmail！就像经典的射击游戏，你获得生命、得分和全能的激光束。可能一个潜在的演示展示HTML5作为游戏的能力小心，Flash。如果还想玩其他HTML5 游戏，这里有10个HTML5游戏网站。

Flash弱爆了！15个HTML5特效震撼人心

    　　15. W Pilot 　　这是一个上瘾的游戏，它应该是非法的。严重的是，一旦你登录到他们的服务器，你将要玩几个小时。你基本上是到处乱飞拍摄的东西，同时避免由其他球员出手。它很简单并具有可玩性，允许多玩家操作，现在很受欢迎。 http://jfd.github.com/wpilot/ (本文来源：泡泡网 )

]]> http://www.wspnet.cn/11.html/feed 0 十款值得收藏的Web应用 http://www.wspnet.cn/8.html http://www.wspnet.cn/8.html#comments Mon, 27 Jun 2011 04:08:16 +0000 wspnet http://www.wspnet.cn/?p=8           据国外媒体报道，随着互联网的飞速发展，WebApps在人们的生活、学习和娱乐中扮演着重要角色。

　　相比传统桌面版应用程序，Web应用的优势在于无须耗时下载、安装、配置，不会占用本地存储资源，较少受操作系统版本影响，用户只要打开相关网站就能使用，十分方便。   　　下面是Techradar网站为大家推荐的十款值得加入收藏夹的WebApps：   　　#1、Newsmap

图（1）

  　　Newsmap是一个全球性的新闻聚合网站，将页面按照不同主题分割为若干区域，且用不同颜色标识。它有别于传统的RSS订阅服务，呈现给用户可视化界面，点击相应版块即可链接到源地址中。   　　Newsmap官方网址：点击进入   　　#2、Instapaper

图（2）

  　　Instapaper 是一项超酷的新型在线书签服务.如果你正在浏览一个网页，但你暂时没有时间去阅读，那你只需要轻松一点，就可以把当前页面收藏到Instapaper，当你有时间阅读的时候，再到Instapaper，那里列出了你收藏的网页书签。这有点像 Del.icio.us ，只是它很简单，去掉了标签或是其它社会化功能。   　　Instapaper官方网址：点击进入   　　#3、Lovely Charts

图（3）

  　　Lovely Charts是一款在线图表绘制工具，可以让您的图表看上去更美。其特色功能主要有：提供吸引人的图标以及确保让这些图标对齐。此外，Lovely Charts一系列新图标，拥有非常直观的编辑模式，上手迅速。   　　Lovely Charts官方网址：点击进入   　　#4、Picnik

图（4）

  　　Picnik的后台完全架构于flash技术，用它来处理图片的操作十分简单，一些专业的英文单词相信稍微接触过PS的人就可以对其熟练操作。   　　支持本地上传，flick，picasa，webcam photo，facebook等导入图片，基本编辑图片提供锐化，自动修复，红眼，裁剪，旋转，曝光，颜色等模式，除此之外还提供柔焦，去色，上色，边缘模糊，边框效果处理，字体添加，小配件装饰等，高级功能需要付费，处理效果更佳。   　　Picnik官方网址：点击进入   　　#5、Bing可视化搜索  

[...]]]>           据国外媒体报道，随着互联网的飞速发展，WebApps在人们的生活、学习和娱乐中扮演着重要角色。

　　相比传统桌面版应用程序，Web应用的优势在于无须耗时下载、安装、配置，不会占用本地存储资源，较少受操作系统版本影响，用户只要打开相关网站就能使用，十分方便。
 
　　下面是Techradar网站为大家推荐的十款值得加入收藏夹的WebApps：
 
　　#1、Newsmap

图（1）

 
　　Newsmap是一个全球性的新闻聚合网站，将页面按照不同主题分割为若干区域，且用不同颜色标识。它有别于传统的RSS订阅服务，呈现给用户可视化界面，点击相应版块即可链接到源地址中。
 
　　Newsmap官方网址：点击进入
 
　　#2、Instapaper

图（2）

 
　　Instapaper 是一项超酷的新型在线书签服务.如果你正在浏览一个网页，但你暂时没有时间去阅读，那你只需要轻松一点，就可以把当前页面收藏到Instapaper，当你有时间阅读的时候，再到Instapaper，那里列出了你收藏的网页书签。这有点像 Del.icio.us ，只是它很简单，去掉了标签或是其它社会化功能。
 
　　Instapaper官方网址：点击进入
 
　　#3、Lovely Charts

图（3）

 
　　Lovely Charts是一款在线图表绘制工具，可以让您的图表看上去更美。其特色功能主要有：提供吸引人的图标以及确保让这些图标对齐。此外，Lovely Charts一系列新图标，拥有非常直观的编辑模式，上手迅速。
 
　　Lovely Charts官方网址：点击进入
 
　　#4、Picnik

图（4）

 
　　Picnik的后台完全架构于flash技术，用它来处理图片的操作十分简单，一些专业的英文单词相信稍微接触过PS的人就可以对其熟练操作。
 
　　支持本地上传，flick，picasa，webcam photo，facebook等导入图片，基本编辑图片提供锐化，自动修复，红眼，裁剪，旋转，曝光，颜色等模式，除此之外还提供柔焦，去色，上色，边缘模糊，边框效果处理，字体添加，小配件装饰等，高级功能需要付费，处理效果更佳。
 
　　Picnik官方网址：点击进入
 
　　#5、Bing可视化搜索
 

　　图（5）
 
　　Bing可视化搜索时微软搜索引擎必应的一款扩展服务，目前仍处于Beta测试阶段。按照微软的设想，Bing可视化搜索将在未来取代传统的搜索方式，通过图片搜索，人们就可获得想要掌握的信息。但从技术层面上来看，存在一定的局限性。
 
　　Bing可视化搜索官方网址：点击进入
 
　　#6、Fonolo

图（6）

 
　　Fonolo提供电话簿导航服务，只要选择电话簿中想要找的人或是服务项目，Fonolo会自动进行前面语音操作的阶段，在接到你所选择的人或是服务项目时进行连接服务。比如，利用它你就能第一时间联系到苹果Apple公司客服。
 
　　Fonolo官方网址：点击进入
 
　　#7、Netvibes

图（7）

 
　　Netvibes是一个免费的在线服务，它把你喜欢的其它媒体、网络资源和服务集成到一个页面上。在你的Netvibes页面上，所有和你有关的东西，比如博客、新闻、天气、视频、社会化网络、电子邮件等等都会自动更新。它们随时可以和你的朋友或其它Netvibes用户分享。
 
　　Netvibes官方网址：点击进入
 
　　#8、Floor planner

图（8）

 
　　这是个基于flash的家居设计网站，无需安装软件，上网就能设计，很好。首先用其中的工具画出房间，再添加门窗，设置地面，然后有各种东西可以拖进去，例如衣柜、沙发、床、鞋柜、餐桌…… 等等，几乎所有的东西都可以更改其尺寸和颜色，人人都可以打造出个性的家居效果图。

Floor planner官方网址：点击进入

 
　　#9、Wakoopa

图（9）

 
　　wakoopa 是一个用于分享软件使用情况的社会化网络，注册登记之后，用户需要下载一个小小的本地客户端，安装完毕之后输入注册过的账户登录，即可在 Web 界面反应出你使用软件的名称和时间。应用十分简单，可以自暴和分享使用软件的情况，客户端支持 Windows 和 Mac OS X。
 
　　wakoopa官方网址：点击进入
 
　　#10、RescueTime

图（10）

 
　　RescueTime 是一款在线的时间管理工具，可以通过日常工作中必然录入的数据，来进行智能的分析，提供客观参考的数据、图表，以及部分简单的建议。目前该款工具商处于公开 测试阶段，支持 Windows 和 Mac OS X 平台。
 
　　主要功能特性：可以追踪用户在如何的使用时间，尽量避免用户主动的录入数据，可以伴随日常事务处理进行数据的收集；及时而简单的统计，包括使用软件与软件应用中的数据统计；支持制定一些目标，和相关的周期，到时限后可以帮助评估效率和达成比率。
]]> http://www.wspnet.cn/8.html/feed 0