Yan à Paris

沟通篇：男女有别，“别”在何处？

2012-04-11T00:32:00.000+02:00

他和她，一个来自火星一个来自金星，彼此以不同的方式交流和表达爱意。深爱对方的他们却因沟通失败而转相怨恨，可见理解对方相异的交流方式何等重要，不要因为误解而失去人间最宝贵的东西——爱。

男人和女人在诸多方面都有着千差万别。他们以全然不同的视角看世界。要想理解二者的差异，关键在于了解男女沟通方式上的不同之处。

以下是男女在沟通中的6条重要区别，你应该对此有所了解以助提高同爱人的沟通能力，使交流更为顺畅和有效。

1. 为什么要说？

他认为沟通应该有明确目的。每次谈话的背后都存在一个需要解决的问题或需要阐明的观点。沟通是为了尽可能有效地找出困境的根源。

她利用沟通来明了自己的感受以及自己想诉说的内容。她视交谈为一种分享内心感受的行为和一次增进两人亲密感的机会。通过分享，她的消极情绪可以得到释放，同时两性关系也因此得以巩固。

2. 该说多少？

他将生产力和效率放在每日生活的首位，在交谈中也不例外。他对事情进行描述时已经从满脑的混沌中理清了思路，只分享他认为说明中必不可少的细节。他会奇怪“为什么女人有那么多话要说？”因此，在他听得差不多觉得足以提供解决办法时就会打断对方。

她利用交流来探查和整理思绪——便于发觉细节。她不知道哪些信息是必要的哪些是多余的，只有说出来后才知道。但女人打开话匣子不一定是在寻求解决办法，她只是想找个人倾听并理解自己的感受。

3.倾听的意义何在？

他习惯于有效地倾听。当女人发起谈话时他认为她是在征求意见或寻求帮助。他尽力去理解女人，将她说的每句话都过滤成为“眼下我该怎么办？”对他来说，要学会既耐心又不被动地倾听女人说话真不是件容易的事儿。

她认为谈话本身就是件非常重要的事。如果她感到自己被充分倾听或理解，就算问题得不到解决或改善对她而言也无所谓。爱人的倾听有助她缓解内心的焦虑和负面情绪带来的痛苦。与懂她爱她的人交心可以抚平她心灵的伤痕，是她借以摆脱外界麻烦和苦恼所必需的情感工具。

4. 当她心烦时……

他会希望帮助她解决所面临的问题，仿佛一名消防队员等不及想尽快将火扑灭。对他而言，最快的灭火方法就是提供解决办法。由于过于希望向爱人献策，他可能会非常在意对方的情绪并竭力为自己辩解。他或许只听到字面意思，而没有意识到他的爱人在心烦时只是将语言作为表达复杂情感的工具。

她在心烦时会借助语言这个工具来表达自己的复杂情感，从而处理好自己的负面情绪并使其得以发泄。她看重的是对方的支持和抚慰，从分享内心感受中得到极大的满足。当他伴以关切的提问或表达诚挚的关怀来表现出对她的在意时，会让她感受到自己被爱被关心着。他满足了她的第一需要——爱的需要。

5. 当他心烦时……

他心烦或感到有压力时经常会退缩到自己的“洞穴”中（变得安静和孤僻）。男人的“洞穴期”就好比休了一个短假：他通过忘却问题和关注其他事物（如看电视、看报纸或打电游）来缓解压力。

他可能会在压力期内避免同伴侣交流。如果她不断询问或指责，他则会退避得更远，因为他怕爱人不相信自己有能力处理好问题。然而，如果女人能多些支持和理解，男人则会走出洞穴，更愿意交谈、更关爱对方。

她可能会将爱人的沉默解读为她令他感到失望或者她正在失去他。她本能地想通过一大堆表示关心的问题来帮助他脱离困境，抑或会出于担心自己理想中的交流方式不受重视而存有戒心，她想要的是那种有益的开诚布公的交流。

最终，在理解他需要时间独处后她才对他起到更大的帮助，因为他由此看出她相信他自己可以解决问题。信任是她给予他最好的礼物。同时，她也该做些事来照料一下自己，以便不会在他“洞穴期”过后对他心存怨恨。

6. 何时会导致沟通失败

他觉得爱人总对自己指手画脚。对男人来说最重要的是表现出色。当他的能力受到质疑时不仅会感到受伤还会马上竖起一堵防御墙，此时沟通则开始陷入瘫痪。他在自己独当一面的环境中才会茁壮。与告知“你应该怎样”相比，他更愿意听从“你觉得……怎么样？”要想改变他，诀窍在于别告诉他该怎么做。

她的爱人会认为她所说的那些问题实际上都不存在也没那么紧急。他误认为自己说些类似“你是在小题大做”或“你想太多了”的话是在帮助她“检验问题的真实性”。但在她看来，他像是在贬低她的感受或劝她不要有这种感觉。

男人和女人都渴望能让自己的爱人满意，但由于难以理解和接受对方相异的沟通方式而未能如愿。男人和女人需要通过学习这些差异来帮助维持两性关系，才不至于有朝一日彼此怨恨或因沟通不利而犯愁。

当夫妻相处遇到障碍时，我建议他们一起阅读或听从两性关系自助书籍上的指导。如果仍然感到不知所措，那么就应该向专业心理咨询顾问寻求帮助，让自己重新进入正轨，增进彼此间的理解和沟通。

学习之响应式Web设计：Media Queries和Viewports

2012-04-03T16:22:00.002+02:00

题外话

本来是想写篇关于Bootstrap的Scaffolding博文的，不过对于响应式Web设计不是很了解，所以就先有了这篇博文。
博客园原文地址：http://www.cnblogs.com/yhuang/archive/2012/03/29/responsive_web_design.html

目录

前言
什么是响应式Web设计（Responsive Web design）?
响应式Web设计的用途
Media queries & Viewport

@media queries

viewports

width=device-width

initial-scale=1.0,maximum-scale=1.0

width=<actual width>

@media all and (device-width:480)

中间尺寸

推荐设置

参考文章

前言

现在使用移动设备人越来越多，移动版的Website随之也越来越重要；但是移动端设备的大小不一，屏幕分辨率各不相同，我们不可能为BlackBerry，iPhone， iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率，这种设计就叫响应式Web设计

什么是响应式Web设计（Responsive Web design）?

响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。它包括了灵活的网格和布局，图像和智能使用CSS的media queries特性。当用户从Laptop切换到iPad上时，该网站应能自动地切换CSS规则以适应Device分辨率，图像尺寸和脚本执行。换句话说，响应式Web设计是具备能够自动响应用户喜好的技术。这将一劳永逸的满足对每个新上市的移动终端都要进行不同设计和开发的需求。
需要注意的是：响应式Web设计不仅仅是可调屏幕分辨率和可自动调整大小的图像，而且更是一种采用全新思考的Website设计方法。

响应式Web设计的用途

随着越来越多的设备而来的是各式各样的屏幕分辨率、定义和方向。每天都有正在开发的新屏幕尺寸的设备。每个设备都可以拥有不同的尺寸、功能、甚至颜色。有些是横向，有些是纵向，甚至还有些完全是正方形的。如图所示：

下图列出了一些最常见的：

所以，如果你要使你的客户满意，你必须让你的网站能够自动调整并适合上述设备的屏幕。例如，你应该为不同的设备定制不同的布局结构：

定制布局

同样，有些时候，根据需要显示或隐藏一些内容：

显示或隐藏内容

很明显，我们不能为每一种设备定制一个页面。所以，我们应该如何处理这种情况呢?

Media queries & Viewport

解决问题的关键就是Media queries和Viewports。下面的内容是关于如何最好的使用Media queries和Viewports的。但是我并不会深入的讲怎样增强响应的细节，如果感兴趣，可以查看这篇博文的最后一部分：“参考文章”。

@media queries

作为一个网页设计师或前端开发者，我们希望我们的网页总能很容易的自适应不同的设备和屏幕尺寸，不管我们用户使用的是21"台式显示器，13"笔记本电脑，10"的iPad或者更小的智能手机。响应式网页设计使用@media queries根据浏览器的宽度和CSS来改变页面的布局。我们可以这样使用的CSS：

/* Default wide-screen styles */
@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
    /* styles for smaller devices */
}

是的，我们可以设置更小的width，或者中间尺寸。我待会再讨论。CSS media queries是非常强大和复杂的，在这里不想过多的讨论，因为上面的代码已经足够应付响应式Web设计了。如果你想要知道更多关于Media Queries的细节，请阅读参考文献里的相关文章。

viewports

现在，当我们调整我们浏览器的大小时，上面的代码已经可以非常不错的完成工作了。但这并不能满足移动端的浏览器。原因是移动端浏览器（iPhone/Safari, Android/Chrome和Fennec）会默认页面是为宽屏幕设计的，所以将它缩小整个页面来适应小屏幕。这就表明了上面的代码完全不足于适应移动端的浏览器，因为设备无法识别正确的宽度。解决方法：在文档的头部使用苹果提供的viewport meta标签，并结合@media queries：

<meta name="viewport" content="...">

以上的代码中，content为空，因为我觉得有必要详细讲一下，而不是直接给出来，这样我们就能更清楚的记住，并且知道content里应该填些什么，并且为什么这样填。

- width=device-width

我们看见很多网站都建议把content属性的值设置为width=device-width。这相当于告诉浏览器将页面宽度假设为设备宽度。不幸的是，只有当设备是纵向时假设才是正确的。当我们把设备旋转成横向时，device-width还是和纵向的一样（比如，320px），这意味着，即使我们把页面设计成适应了480px横向设备，它还是会返回320px的效果。

曾经尝试在media query里使用orientation来解决这个问题，但是orientation不会真正的告诉我们实际的设备宽度，因为它只告诉我们设备的宽度是大于还是小于设备的高度。正如有人指出，由于大部分网页往往垂直滚动，所以这是无关紧要的。

如果我们的页面在纵向和横向设备中样式相同，那么我们就可以用width=device-width就足够了，需要注意的是这个是唯一告诉android设备使用设备宽度的方法。

- initial-scale=1.0,maximum-scale=1.0

initial-scale=1设置告诉浏览器初始化页面时不要对页面进行缩放。解决了没有使用viewport时出现的页面缩放问题。

但还是有bug，当我们把移动端设备从纵向转成横向时，你就会发现这个问题了。这是因为

initial-scale只在页面完全加载后有作用。在我们把移动设备从纵向转成横向的过程中，浏览器就会认为页面不变，但scales会设置为1.5，为了使320px的页面适应480px。但是，因为我们在@media queries中设置了480px这个宽度，那么页面CSS规则也会是适应480px的。结果就是，页面CSS规则是适应480px的，另外scale还是1.5。这

个结果并不可怕，但是不可取。

为解决这个bug，我们可以添加maximum-scale=1这个设置。它的作用是阻止页面在旋转时放大，但它同时带来了更严重的问题：也阻止了用户手动放大或缩小页面。同样user-scalable=no设置也会让用户不能缩放页面。所以一般情况下，不要使用以上俩个设置。

是不是无法解决这个bug了？首先这个bug最多只是在显示层面，带来的后果一点不严重，因为即使页面自动缩放了，它还是成比例的。

- width=<actual width>

有些人建议在viewport里使用特定的width，并且也按这个width设计页面。如果你可以为每个种类的device编写页面的话，这个设置是可行的，但需要我们明白的是它不是响应式设计。打印时，使用固定宽度布局是必要的，但我们网页应该适应用户的各种样式的设备。总之，不要这样使用。

- @media all and (device-width:480)

这是个media query而不是viewport标签里的选项, 我在很多地方看到过这样的代码，但我并不认为这是好的做法。为什么？根据CSS3对media queries的描述，device-width在media queries里表示的是输出设备表面渲染的宽度。对于continuous media来说，device-width就是屏幕的宽度；对于paged media来说，device-width就是页面尺寸的宽度。以continuous media为例，device-width就是设备屏幕的宽度。除非浏览器最大化，它始终大于viewport的width。

测试表明，大多数桌面浏览器把device-width和width当作同义词。而移动端浏览器对此会有点混淆。至于viewport标签里，device-width只在纵向时等于设备的width。例如，一个320*480的设备，device-width总是320px，不论方向。然而对于CSS media queries，device-width是基于其目前方向上屏幕的width。

如果你一定要这样使用，请和orientation一起使用。但绝对不要使用max-device-width和min-device-width，因为用max-width和min-width替换会比较好。同样需要注意的是，新型号设备的宽度可能会改变。

- 中间尺寸

上面我提到过，我们可以为任意数量的width来设计页面。最重要的是在不同width的浏览器中测试他们，通过调整window浏览器的大小来测试是最简单的方法。随着设计页面的width越来越小，我们可以去掉（Display：none；）一些不重要的内容，比如footer，sidebars，menu等，为主要内容留足够大的空间。我们的网站也许需要一个可以在所有width屏幕上运行良好的布局，也许只需要满足两到三个布局。这是非常容易设计和测试的，所以没有理由不做。

- 推荐设置

最后，是我推荐的做法：

使用viewport标签
使用media queries来选择最适合页面尺寸的CSS
在viewport标签里，使用width=device-width,initial-scale=1或者单独使用width=device-width
不要使用maximum-scale=1和user-scalable=no
不要使用width=<specific width>
不要使用@media all and (*-device-width: xxx)

参考文章

Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
Jeremy Keith. 2010. Responsive Enhancement. In adactio.
Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
Webkit based desktop browsers re-render the page correctly as you resize the browser, however they have a minimum width of 385px (on MacOSX) and I was unable to shrink the browser below this. Firefox 4 re-renders the page correctly until the width gets too narrow to fit the navigation toolbar. At that point the viewport width stays fixed even if you shrink the browser. The page is re-rendered if you type something (anything) into the URL bar. Opera 10/11 re-render correctly at all sizes.
Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
Using the Viewport on Safari. In Safari Web Content Guide.
The viewport meta tag. In Safari HTML Reference.
MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
Willison & Downe. Lanyrd.
Lie et al. 2010. Media Queries. W3C Candidate Recommendation 27 July 2010.
If you design your page for the narrow view and expect it to scale when rotated, then use width=device-width and nothing else. If, instead, you design your page for either width, then use width=device-width,initial-scale=1. This is the only way to get the android browser to render a page with the intended width. Mobile Safari will render the page exactly as if initial-scale=1 were specified alone. You will still end up with the zoom on rotate bug.
David Calhoun. 2010. The viewport metatag (Mobile web part I).

AC Milan vs. FC Barcelone : Milan, y croire... ou pas

分享之$(document).ready() jQuery

2012-04-02T14:37:00.003+02:00

本文将讲述$(document).ready()和其重要性。

原文地址： http://www.learningjquery.com/2006/09/introducing-document-ready

作者： Karl Swedberg

学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

有很多方法可以确保事件在页面上正常工作，$(document).ready()比其它方法要更有优势。首先，你不必在HTML上放置任何“ 行为性的”标记。另外，你可以将JavaScript/jQuery写入一个独立的js文件，这样既容易维护，又保证了js与页面内容的隔离。如果你在浏览网页时更加细心，你就会常常看见这种情况：当你将鼠标悬停在一个连接时，有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面，你会在<body>标签中看见“onload”属性。这会导致一个问题：它限定了在body上只能有一个函数事件。是的，因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题，请参考Jeremy Keith的书：DOM Scripting，里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数，它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码，另外，这种方法是在加载window时触发这些事件的，这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

jQuery : écrivez moins pour faire plus !

学习之模块架构 DotNetNuke 6

2012-03-28T11:12:00.002+02:00

前面的博客介绍了：

如何在本地安装DNN6

如何创建DNN模块

博客园原文地址：学习之模块架构 DotNetNuke 6

这篇博客主要是讲模块的架构和加载，以及模块与DotNetNuke门户网站（Portals）系统的关系。充分了解模块可以帮助DNN开发者根据需要更清晰的构建模块。
在DNN中，模块是一个可插入的用户接口组件，用来处理请求并生成动态的内容。它只能出现在ASP.NET页面上，而页面可以包括任意数量的模块"实例"。
整个模块架构包括四个部分：门户网站（Portal），页面（Tab），模块（Module）和模块容器（Container）。

门户网站（Portal）

Portal可以定义为一个基于Web的应用程序，从不同的源聚集内容，并寄宿信息系统的表示层（模块）。下图描述了Portal的基本架构，DNN处理页面请求时需要执行许多步骤。下述步骤在页面初始化的过程中执行，用来在运行时动态地加载模块。动态创建的模块然后就能够处理它们自己的生存周期，包括诸如初始化、加载、呈现等各种事件。

图一： Portal的基本架构

第一步：页面配置检索（Page Configuration Retrieval）

第1步就是为被请求的页面检索模块。检索步骤由许多重要的信息块构成，例如页面上出现的各个模块、模块在页面上显示的区域（即内容窗格Pane），以及与每个模块相关联的安全角色。

//Default.aspx.cs//OnInit//load skin control and register UI js
UI.Skins.Skin ctlSkin = UI.Skins.Skin.GetSkin(this);
//add skin to page
SkinPlaceHolder.Controls.Add(ctlSkin);

//DotNetNuke.UI.Skins.Skin.cs : OnInit()
bool success;
//Load the Module Control(s)
success = Globals.IsAdminControl() ? ProcessSlaveModule() : ProcessMasterModules();

//DotNetNuke.UI.Skins.Skin.cs : ProcessMasterModules()
bool success = true;
if (TabPermissionController.CanViewPage())
{
　　//check portal expiry date
　　if (!CheckExpired())
　　{
　　　　if ((PortalSettings.ActiveTab.StartDate < DateAndTime.Now && PortalSettings.ActiveTab.EndDate > DateAndTime.Now) || TabPermissionController.CanAdminPage() || Globals.IsLayoutMode())
　　　　{
　　　　　　//dynamically populate the panes with modules
　　　　　　if (PortalSettings.ActiveTab.Modules.Count > 0)
　　　　　　{
　　　　　　　　foreach (ModuleInfo objModule in PortalSettings.ActiveTab.Modules)
　　　　　　　　{
　　　　　　　　　　success = ProcessModule(objModule);
　　　　　　　　}
　　　　　　}

第二步：安全审计（Security Audit）

第2步就是判断在上一步中检索出来的安全信息。通过检查当前用户的角色（是注册用户还是匿名用户）以及与每个模块相关联的查看角色，就可以为当前页面形成一列经过“授权”的模块。

private Boolean ProcessModule(ModuleInfo module)
{
　　bool success = true;
　　if (ModulePermissionController.CanViewModule(module) && module.IsDeleted == false &&
((module.StartDate < DateTime.Now && module.EndDate > DateTime.Now) || Globals.IsLayoutMode() || Globals.IsEditMode()))
　　{
　　//...
　　}
　　//...
}

第三步：内容注入（Content Injection）

第3步（也是最后一步）就是将“授权”模块动态地插入到页面上相应的内容窗格中。在所有的模块加载之后，每个模块就能够执行各自的事件并呈现内容。

Pane pane = GetPane(module);
if (pane != null)
{
　　success = InjectModule(pane, module);
}

页面（Tab）

图二描述了基本的Portal的Tab组件。页面本身表示一个完整的标记文档，由大量的内容窗格（Pane）组成，并且在每个内容窗格中还包含大量的模块。

图二：页面组件

每个模块都包含一个标题、若干装饰（Container）以及由模块生成的内容。装饰可以包括若干按钮、链接以及一个改变模块状态或者执行与模块相关功能的悬浮菜单。

模块（Module）

正如前面所述，Portal是基于Web的应用程序，处理各种请求并生成动态内容。每个模块都生成自己的标记块（称为段），再和皮肤的标记一起展示完整的文档。
因为每个模块都生成自己的标记，所以可以将模块视为较大应用程序中的微型应用程序。通常，用户通过单击链接或者提交表单（所提交的表单由门户网站系统及传递给相应模块的命令处理）与每个模块生成的内容交互。

模块容器（Container）

模块周围的装饰称为模块容器。通过容器，用户能够与模块交互，执行诸如最小化、最大化以及其他高级特性（如果用户拥有该页面的编辑特权）的动作。
图三示范了一个HTML模块在用户以编辑特权登录时的模块容器。这个模块容器包含许多项，例如拥有一列管理选项的悬浮菜单、模块的标题。

图三：模块容器

DotNetNuke est le plus gros projet open-source en technologie .Net.

分享之数据库实体关系图 DotNetNuke 5.6.1

2012-03-26T15:25:00.001+02:00

下图所示是DotNetNuke 5.6.1社区版的ERD(Entity-Relationship Diagram). 找了好久只找到这个版本的，估计不是官方的，是一个叫R2i的公司在维护的。但我觉得这个已经足够了，因为5.6.x是DNN 6之前的最后一个版本，所以我觉得DNN 6和它之间内核库不会有Break changes，当然少许的改动或优化总是有的。
为什么要分享这个图呢？因为我觉得ERD对我们理解全部DNN的架构非常重要，并且能够帮助我们减少开发第三方模块的时间。
在下图中，表框的不同颜色表示了他们类别的不同：

蓝色：认证系统，比如用户认证，页面模块查看权限...
红色：内容管理，比如皮肤，页面...
绿色：辅助系统，比如异常记录，任务...
黑色：配置系统，比如模块定义，语言包...
灰色：第三方核心插件，比如Text/HTML模块，搜索模块...

这个图是有点小了，估计大家看不清楚。所以提供PDF下载外加MetaData下载： ERD PDF || METADATA XLS。
希望想学习或想了解DNN的园友看完之后，对DNN的Architecture有更全面的了解。5 jours avant 01 Avril !

如何创建新模块 DotNetNuke 6 & Entity Framework Code First

2012-03-23T16:12:00.001+01:00

博客园原文地址：如何创建新模块 DotNetNuke 6 & Entity Framework Code First

索引 :

第一部分: 开发新模块 – DNN 6

第二部分: 模块里使用EF Code First

第一部分：开发新模块 - DNN6

如果你还不知道DotNetNuke是什么的话，请访问 www.dotnetnuke.com

如果你还不知道如何在本地安装DNN 6, 请猛戳 http://codeciel.blogspot.fr/2012/03/how-to-install-dotnetnuke-6-on-local.html

如果你想要知道如何开发一个你自己的DNN6模块，那么这篇文章就是你需要的。

步骤1：通过DNN6 Host创建desktop module和module definition

从数据库的角度出发，这一步会把新模块的相关信息存入数据库，让DNN可以识别，这样你就可以把这个模块加入任意页面。如果你仔细看了DNN数据库的结构后，你会发现有很多和模块（Module）相关的表 - dbo.DesktopModules, dbo.Modules, dbo.ModuleDefinitions, dbo.TabModules, dbo.PortalDesktopModules. 这儿不会细讲这些表的用途，如果可以的话，有机会我会专门为此写一篇博客。
所以，现在你只要按照下面的步骤就可以创建一个属于你的DNN模块 :
　　- 用host账户登入你的DNN6网站
　　- 点击Host页面，再进入Extensions页面
　　- 单击Manage按钮, 选择Create New Module，你将会看到（如Figure 1所示）：

提示: 如果你找不到Manage按钮，请确认你的页面模式（通常在右上角可以看见）是Edit而不是View或Layout。

Figure 1 : 创建模块

　　- 填好这些文本框后。（最后把"Add Test Page ?"打上勾，以简化步骤）
　　- 单击“Create Module”，然后你就可以看见新的模块已经出现在了“TestEFCodeFirstPage”页面上(如Figure 2 所示)了

Figure 2 : 新页面里包含了新模块

步骤2：把新模块与VS项目联系起来

　　- 现在打开VS2010，创建新项目，如Figure 3 所示。

提示：值得注意的事，项目的名字必须与module的名字相同，即“EFCodeFirst”，开始的时候你可以把这个项目保存到任何位置，因为一旦完成创建之后，我们会把这个文件夹移动到<网站根目录>/DesktopModules里，合并这俩个文件夹。

Figure 3 : 创建新vs2010项目

　　- 再次用VS2010打开“EFCodeFirst.csproj”. 因为我们还需要配置这个项目，来让它可以顺利的在DNN6下编译和运行。
　　- 点击项目属性，然后进入到Compiler页面，修改输出路径为<网站根目录>\bin\
　　- 如果你Site的运行环境是.net framework version 2.0.50727.5448的话，请在IIS里修改Site的application pool为ASP.NET V4.0。因为EF Code First是需要.net 4.0的。
　　- 添加Dotnetnuke.dll引用，它可以在<网站根目录>\bin\下找到。需要注意的是在属性里将copy local设置为false。

提示：上面这种添加Dotnetnuke.dll引用的方法不是企业开发常用的，或者说是应该避免的才比较正确。因为Dotnetnuke不断在更新，为了保证团队开发时，Dotnetnuke.dll引用都是同一个版本，我们通常会固定一个稳定的版本来开发。具体操作是：存放指定版本Dotnetnuke.dll的文件夹是共享的，所有的dnn引用都是指向这个文件夹的。

　　- 重命名web.config文件为web.config.old，因为在网站的根目录已经有了一个web.config。
　　- 删除EFView.ascx文件
　　- 添加一个新文件，文件类型是Web User Control，还是命名为“EFView.ascx ”，以便DNN能识别。
　　- 打开文件EFView.ascx, 我们随便写点东西进去，比如： “This is my first dnn6 module”
　　- 打开文件EFView.ascx.cs，将它的基类换成PortalModuleBase，保存并编译这个项目
　　- 刷新页面http://dnn614/TestEFCodeFirstPage.aspx，你将会看到如Figure 4所示：

Figure 4 : 测试页面和行模块

好了，看到这里你就应该知道如何创建一个DNN6模块了。在这个模块里，你可以根据需求，随意开发。下面的第二部分就是，在一个DNN模块里使用Entity Framework Code First进行实战开发。

第二部分 : DNN模块里使用EF Code First

这部分是基于这篇文章： Introduction to Entity Framework Code First

步骤 3* : Entity Framework 简介

在我直接进入正题之前，我想先介绍一下EF。EF是一个.NET平台下的ORM框架，个人觉得做的很不错，之前还接触过另外俩款在.NET平台下的ORM - LLBLGen Pro和NHibernate。LLBLGen Pro自从收费之后，功能也越来越强大，用起来也挺顺手的，之所以没有继续用的原因很简单：我现在这个客户公司，不想花钱买它的licence。NHibernate是从Java版的Hibernate移植过来的，就好比Lucene.NET与Lucene的关系一样，不同的是Lucene.NET早早就进Apache的孵化器了，而NHibernate的生命力还很强大。我没有用NHibernate的原因也很简单，被它的配置文件惊吓住了。比较这三款的优缺点不是这里的重点，每个人的习惯和思考方式不一样，所以喜好自然不同，选一款自己用的顺手又顺心的ORM就可以了。下面开始介绍EF的三种使用方法：
EF在4.0的时候只提供俩种与实体交互的方法，即数据库优先和模型优先。前一种情况下，你在开发你的应用前开始设计数据库。然后你可以用VS自带的实体数据模型设计工具来设计一个虚拟模型，操作很简单：直接从数据库把表拖拽到设计器中（如Figure 5所示）。后一种情况下，我们先用实体数据模型设计工具来手工设计模型（如Figure 6所示），然后指定数据库的连接。但不管是前面哪种情况，你都要使用实体数据模型设计器来生成你的数据模型对象。

Figure 5 : 数据库优先

Figure 6 : 模型优先

EF在4.1中引入一种新的模式来生成模型对象：代码优先（Code First）。在代码优先这种方式里，你不会遇到任何设计器。先全部用.NET Framework来搭建对象类，然后用一些特定属性和相关技术来生成EF数据模型。（如Figure 7一样）

Figure 7 : 代码优先

上面大致讲了一下这三种方法，如果你感觉有点混淆，静下心来，仔细看Figure 8，我相信你肯定会清楚不少。在我们这个模块中，我们使用的是最后一种。

Figure 8 : EF与实体交互的方式

第二部分的目的不仅仅是完成我们的模块，而是一步一步的，让大家弄清楚使用EF Code First的全部过程。接下来，在开发模块，你将处理一个用来表示博客帖子的数据模型，实际上，数据是驻留在SQL Server里一个名叫BlogPosts表中的。通过使用模型对象，你能够从表中读写数据。

步骤 3 : 创建模型

假设我们的数据模型是用来储存博客帖子和博客贴分类的。根据三层架构的思想，我们应该另外创建一个project来专门开发数据模型：在与“EFCodeFirst”项目同一个solution里创建Library类型的新项目，命名为“EFCodeFirstLib”。这个类库项目里将会包括俩个模型对象，即BlogPost和Category。他们的模型代码如下展示 :

提示: EFCodeFirstLib项目的文件夹应该放在<网站根文件夹>/DesktopModules/, 并且其编译路径应该是<网站根文件夹>/bin/.

public class BlogPost
{
　　public Guid Id { get; set; }
　　public string Title { get; set; }
　　public string Content { get; set; }
　　public DateTime PublishDate { get; set; }
　　public virtual Category Category { get; set; }
}
  
public class Category
{
　　public Guid Id { get; set; }
　　public string Name { get; set; }
　　public virtual ICollection<BlogPost> BlogPosts { get; set; }
}

在BlogPost类中，定义了五个属性： Id, Title, Content, PublishDate 和 Category。注意里面的Category是外键。Category类有三个属性：Id, Name 和 BlogPosts。其中的BlogPosts 是一个属性集合，因为可以有很多个博客帖子属于同一个category。需要记住的是，默认情况下，表示主键的属性类型应该是int或Guid。当然，你可以用一些attributes定制主键。我们将在后面讨论。

步骤4 : 创建Data Context

现在模型对象都已经创建好了，让我们开始创建一个Data Context，通过它可以让你查询和处理实体数据，另外，它的基类是DbContext类。下面就是我们在模块中要使用的Data Context：

public partial class BlogContext : DbContext
{
　　public BlogContext():base("BlogDb")
　　{
　　}

　　public DbSet<BlogPost> BlogPosts { get; set; }
　　public DbSet<Category> Categories { get; set; }
}

BlogContext类继承了DbContext类。在它的构造函数中，调用了基类的构造器并且传递了所需的数据库名称。当你首次运行应用时，将会为你用这个名字创建数据库。如果不传递这个名称，默认创建数据库的名字将会是DbContext类的fully qualified name。在我们这个例子中就是“EFCodeFirstLib.BlogContext”。
BlogContext类定义了俩个公共属性，即BlogPosts和Categories。这些属性的类型是DbSet。DbSet类代表了一个实体集（从数据库角度，就是一个数据库的表），可以执行CRUD（创建，读取，更新，删除）操作

步骤5 : 测试数据库的生成(可选)

我们现在可以测试我们已经写的代码了，当然你也可以选择跳过这一步。
首先在EFCodeFirst项目的“EFView.ascx”中添加一个按钮（button），并且生成相应的按钮点击事件方法。加入我们刚刚创建的EFCodeFirstLib项目的引用。

Figure 9 : 测试页面

然后在按钮点击事件方法中写入以下代码：

using (var db = new BlogContext())
{
　　Guid id = Guid.NewGuid();
　　var cat = new Category { Id = id, Name = "ASP.NET" };
　　var post = new BlogPost { Title="Title1", Content="Hello World!", PublishDate=new DateTime(2011,1,1), Category=cat};
　　db.Categories.Add(cat);
　　db.BlogPosts.Add(post);
　　int i = db.SaveChanges();
}

上面的代码创建了一个BlogContext实例，接着创建了Category和BlogPost类的各自实例。把新创建的实体实例加入到DbSets里面，最后调用SaveChanges()方法。 SaveChanges()方法将持久化加入的实体数据，也就是把实体数据写入数据库相应的表中，并且返回此次操作执行的记录数。
现在我们编译这俩个项目，在浏览器中打开http://dnn614/TestEFCodeFirstPage.aspx. 点击页面中的按钮。因为我们是第一次运行并点击按钮，EF将会在SQL Express里创建新的数据库和表。库名是BlogDb，因为我们在DataContext的构造里已经指出了；俩个表名分别是BlogPosts和Categories。

Figure 11: SQLExpress里创建的数据库和表

值得注意的是BlogPosts和Categories表里的Id列被设定为主键，同样BlogPosts表中，有一名叫Category_Id的外键被定义。

步骤6 : 每次运行（点击按钮）时重新创建数据库

在测试时，你也许想要在每次运行应用时都创建或重新创建数据库，以便初始化运行环境。同时也想在创建数据库的时候加入一些测试数据。当你修改了你的实体代码时，因为数据库的表也会相应的改变, 数据库也应该重新创建。默认情况下，EF只会在你首次运行时创建数据库，之后应用会一直操作这同一个数据库。这当然不是我们想要的，因为我们的实体代码会随着需求的变更而修改或增加，为了改变这种默认行为，你需要在代码里创建一个database initializer，并且继承DropCreateDatabaseAlways类。如名字暗示的那样，DropCreateDatabaseAlways类总是会重新创建数据库。下面的代码就是我们自己的BlogContextInitializer ：

提示：你也可以继承DropCreateDatabaseIfModelChanges类，它只会在Model改变的时候，重新创建数据库。

public class BlogContextInitializer : DropCreateDatabaseAlways<BlogContext>
{
　　protected override void Seed(BlogContext context)
　　{
　　　　Category cat1 = new Category { Id=Guid.NewGuid(), Name=".NET Framework" };
　　　　Category cat2 = new Category { Id = Guid.NewGuid(), Name = "SQL Server" };
　　　　Category cat3 = new Category { Id = Guid.NewGuid(), Name = "jQuery" };
　　　　context.Categories.Add(cat1);
　　　　context.Categories.Add(cat2);
　　　　context.Categories.Add(cat3);
　　　　context.SaveChanges();
　　}
}

BlogContextInitializer 继承了DropCreateDatabaseAlways 基类，并且重写了Seed()方法，方法里写入了一些往数据库里添加样本数据的代码：添加了三个categories。一旦完成了initializer，你需要添加以下代码到按钮点击事件方法里去：

protected void Button1_Click(object sender, EventArgs e)
{
　　Database.SetInitializer<BlogContext>(new BlogContextInitializer());
 　 ...
 　 ...
}

现在你就会发现每次点击按钮时，数据库都会重新创建，并且填充样本数据到Categories表里。

步骤7 : 在Code First里使用已有的数据库

上面的代码里，你允许EF自己创建数据。但在许多情况下，你会想要用已经存在的数据库而不是创建一个新的。又因为我们在DNN里使用EF Code First，所以在任何情况下都不可能全部重新创建DNN使用的数据库（DNN614）。我们不得不使用其它的数据库(比如DNN614_BlogDb)。如何让Code First知道我们想要使用那个数据库呢？只需要在web.config的Connection String里指明就可以了：

<connectionStrings>
　　<add name="SiteSqlServer" connectionString="Data Source=(local)\LEGAL;Initial Catalog=DNN614;User ID=login614;Password=xxx" providerName="System.Data.SqlClient" />
　　<add name="BlogDb" connectionString="Data Source=(local)\LEGAL;Initial Catalog=DNN614_BlogDb;User ID=lgfr;Password=xxx" providerName="System.Data.SqlClient"/>
</connectionStrings>

Figure 12 : 指明已有的数据库

需要注意的地方是，我们在<connectionStrings>里添加的数据库连接字符串的名字，必须和我们在DataContext构造器里指明的一样（“BlogDb”）。
如果你在DataContext没有指明，那么那个数据库连接字符串的名字就必须和DataContext类名一样（“BlogContext”）。
为了让大家更清楚Code First选择数据库连接字符串的流程，我们用这个例子再解释一遍：

　　情况一：在DataContext中（BlogContext）指明了名字“BlogDb”

　　　　　　EF首先会在configuration文件里查找是否有名字为“BlogDb”的数据库连接字符串。
　　　　　　如果有，EF就会使用这个。如果没有，EF就会在本地的SQL Express中创建一个名为“BlogDb”的新数据库。

　　情况二：没有在DataContext中（BlogContext）指明

　　　　　　EF首先也会在configuration文件里查找名为“BlogContext ”的数据库连接字符串。
　　　　　　如果找到，EF就是使用；否则EF就会在SQL Express里创建一个名为“EFCodeFirstLib.BlogContext”的新数据库。其中EFCodeFirstLib是BlogContext的命名空间。

步骤8 : 使用Data Annotations来标明数据表和键的信息

上面的例子中，当创建实体对象对应的数据库和表时，EF使用的是默认的约定。我们也可以用一些data annotations来定制EF的行为。例如下面代码所示，我们添加了一些data annotations属性来标明表名([Table])，主键([Key]) 和外键([ForeignKey])信息。

[Table("BlogPosts")]
public class BlogPost
{
　　[Key]
　　public Guid Id { get; set; }
　　public string Title { get; set; }
　　public string Content { get; set; }
　　public DateTime PublishDate { get; set; }
　　[ForeignKey("Category")]
　　public Guid CategoryId { get; set; }
　　public virtual Category Category { get; set; }
}

[Table("Categories")]
public class Category
{
　　[Key]
　　public Guid Id { get; set; }
　　public string Name { get; set; }
　　public virtual ICollection<BlogPost> BlogPosts { get; set; }
}

总结 :

Entity Framework Code First允许我们直接在代码使用EF特性，比如未经任何实体数据模型设计。这种方式下，全部使用C#类来创建实体对象，需要定义一个继承了DbContext类的DataContext类，同时可以使用data annotation属性显式地标明相关信息。默认时，当应用第一次运行时，EF会在SQL Express里创建新的数据库；我们可以通过创建自己的数据库初始化策略（Database Initializer）来改变这种默认行为。也可以使用已经存在的数据库，只需在configuration文件里标明了数据库连接字符串。
Code First相对与其他两种方式来说，有很大的灵活性。但我觉得在DNN中不太适合使用，因为我不是特别能接受一个DNN网站同时有俩个数据库，维护起立不方便。所以，在现实项目中，我经常使用的方式是Database First。
最后友情提供一下本例中的DNN模块安装包和源代码：安装包源代码。Profitez-le et je vous souhaite un très bon weekend !!

分享几个Web开发必备小抄

2012-03-22T13:26:00.002+01:00

摘选自: "20 Cheat Sheets for Web Development you must have".

点击可查看大图！

1) PHP

本人说不上讨厌PHP，却绝对的不喜欢，可能是上学的时候留下的阴影吧。最近正在用Wordpress建站，不得已得用PHP。

2) HTML Character Entities

3) CSS

4) Javascript

5) JQuery 1.3

6) Regular Expressions

不多说了，必须的必备。

7) Apache Mod Rewrite

Url重写，最近在WordPress里会用到它，既可以让url更易读，又可以提高SEO。

8) WordPress Mind Map

一个讲解了WordPress流程的思维导图，非常清晰。

9) SEO

做一个优秀的SEO必然要花一番功夫的，有的放矢能事半功倍。

小小总结：

以上九个小抄就是我摘录下来的，基本是现在都用的着的。不过有些东东可能正在过时，正在更新好像更准确一些。要是有人或自己能不断更新这些图就好了。Quelle Bonne Idée!

Juice UI: 整合了jQuery UI的开源ASP.NET Web控件

2012-03-21T14:35:00.000+01:00

前言

这篇文章的原文来自Jon Galloway，想看原文的请猛戳链接。第一次接触这个Juice UI是看到同事分享的邮件，当时只是粗略看看，不过感觉把jQuery UI整合到ASP.NET Web控件里去确实是个不错的主意。今天偶然在网上看到了这篇文章，就动手把它翻译过来，和大家分享。以下是译文：

今天早上的MVP峰会上，Scott Hunter刚刚从appendTo网站新发布了一个开源项目，名字叫Juice UI。Juice UI是一个Web窗体控件的集合，并整合了jQuery UI。你可以通过添加JuiceUI NuGet package到你自己的应用中，立即就可以使用它。同时源码是提供下载的（go nuts with the source）, 他的版权协议是基于MIT和GPL的。

Juice UI，能做什么？

jQuery UI 是一个构建在jQuery之上的UI库。它为平常的场景提供了非常多且强大的部件，例如日期选择期，对话框和选项卡等等；并且一些顶尖的js开发者（some of the sharpest Javascript developers in the field）参与开发提供了坚实的基础。虽然你总是可以利用一些使用了jQuery和jQuery UI的库，但是全新的Juice UI控件可以让这些工作更简单。

例如：

   1:  <asp:TextBox runat="server" ID="_Restrict" />

   2:  <Juice:Datepicker

   3:       runat="server"

   4:       TargetControlID="_Restrict"

   5:       MinDate="-20"

   6:       MaxDate="+1M +10D" />

执行这段代码，就可以得到：

组件和行为

Juice UI 发布的时候就已经包括了14个部件或行为。如果你想查看全部控件列表的话，请点击http://juiceui.com/controls, 并且提供互动例子让我们更深入了解控件。

下面也列出了所有控件，点击可直接转到相应文档：

实战

添加JuiceUI NuGet package

打开VS2010，创建项目前请确保VS2010已安装了NuGet插件。创建一个ASP.NET 4 Web Forms项目。右击项目中的References文件夹，选择Manage NuGet Packages..., 然后找到 "juiceui"，点击安装。

JuiceUI 的名字空间

通过NuGet package添加JuiceUI时，NuGet会自动的把Juice UI的名字空间写入到你的web.config文件里, 比如:

   1:  <configuration>

   2:      <system.web>

   3:          <compilation debug="true" targetFramework="4.0" />

   4:          <pages>

   5:              <controls>

   6:                  <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />

   7:              </controls>

   8:          </pages>

   9:      </system.web>

  10:  </configuration>

如果确实需要Juice UI名字空间的话，通常我会移除上面这段config，在页面中使用<@Import Namespace="JuiceUI" />指令来添加名字空间。

使用Juice UI控件

首先，你需要一个<asp:ScriptManager> - 把它添加到一个页面上或者你site的Master页面上。

   1:  <asp:ScriptManager id="_Script" runat="server" />

添加完成后，你就可以使用控件了。这些都是扩展控件，所以你需要使用TargetControlID属性来指出哪个Web窗体控件将扩展Juice UI的行为。这儿有一个精简了的例子，将DatePicker行为与一个TextBox挂钩：

   1:  <asp:TextBox runat="server" ID="DateSample" />

   2:  <Juice:Datepicker runat="server" TargetControlID="DateSample" />

另外我把一个可拖拽（Draggable ）的行为指向一个Panel:

   1:  <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">

   2:      Hi. You can drag me around.

   3:  </asp:Panel>

   4:  <Juice:Draggable runat="server" TargetControlID="DragBox" />

需要注意的是，这只是非常简单的例子并且没有CSS。在Juice UI源码里有很多更复杂的Juice UI样例。

运行这个页面，我们将会看见我们所期待的：一个拥有日期选择器的textbox和一个可以拖拽的panel。

下面是这个页面的源代码：

   1:  <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

   2:      CodeBehind="Default.aspx.cs" Inherits="Juice_Sample._Default" %>

   3:  <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

   4:  </asp:Content>

   5:  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

6:

   7:      <asp:ScriptManager id="_Script" runat="server" />

8:

   9:      <asp:TextBox runat="server" ID="DateSample" />

  10:      <Juice:Datepicker runat="server" TargetControlID="DateSample" />

11:

  12:      <asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">

  13:          Hi. You can drag me around.

  14:      </asp:Panel>

  15:      <Juice:Draggable runat="server" TargetControlID="DragBox" />

16:

  17:  </asp:Content>

如果你有兴趣的话，在浏览器中查看网页的源代码，你会发现web控件和JuiceUI行为已经整合了，使用的是HTML5的data-属性:

   1:  <input name="ctl00$MainContent$DateSample" type="text"

   2:          id="MainContent_DateSample"

   3:          data-ui-widget="datepicker" />

   4:  <div id="MainContent_DragBox"

   5:          data-ui-widget="draggable"

   6:          style="border:1px solid; width:100px;">

   7:      Hi. You can drag me around.

   8:  </div>

似乎很熟悉...

确实，Juice UI用起来非常像Ajax Control Toolkit，但它的核心是jQuery UI。从另一方面说，它是为所有jQuery UI里的部件（widgets）和效果（effects）创建了Web窗体扩展和脚本控制。

学习之Bootstrap - Overview

2012-03-20T13:44:00.000+01:00

今天是在DotNetNuke平台工作一周年的日子，值得纪念一下。回过头来看，这一年基本上是与DotNetNuke的bug斗争中走过的，同时见证了版本5到6的重大升级。DotNetNuke的框架是挺值得学习和借鉴的，非常全面的系统管理功能和超强的扩展能力让它始终在CMS这一块占据一席之地。
我大部分工作是在后台开发，也即开发或者更新一些模块（module）来迎合客户的需要。但有时候，在客户那里工作时（俗称外包），必须为他们的内部网站设计布局和页面。这是我相当头疼的问题，虽然客户只有一个要求就是漂亮好看，但我始终觉得Dotnetnuke是众多CMS中外观最丑的。

幸运的是，DNN提供了异常方便和强大的Skin系统，可以让开发者随意便捷的设计主题。不幸的是，它过于有层次感，让我经常迷惑在CSS的覆盖和Javascript的冲突中。另外，不知道是不是因为我不是专业网站设计的缘故，自己搞出来的东东总是让我很郁闷。

在外包的日子，总有些闲暇的时间，我就会寻找或尝试一些CSS框架来为我的DNN主题设计找出路，这样不但可以方便我前端的工作，更重要的是，CSS框架可以帮助我搭建一个漂亮，简洁和清爽的网站。

我的第一个目标是Blueprint，它是一个CSS框架，其目的是减少你的开发时间。它提供了坚实的CSS基础，易使用的网格，合理的排版，有用的插件，甚至印刷样式让你轻松的建立项目。好景不长，没用几天就放弃了，原因有二：

Doc看的比较吃力，思路不清晰。
没有想象中的强大，总觉得只有CSS不够用。

放弃之后，再也没有时间和心情继续我的DNN主题寻找之旅。直到最近，我在网上看到Twitter的前端工程们发布了新的Bootstrap v2.0.2，较以前成熟的1.4版本有很多Break的升级或改进。以less为基础构建css，新的布局能够定制和响应不同的终端设备，更多的组件和Javascript集成插件，这一切的一切，瞬间让我hold不住了。细细的看了它的在线文档后，突然明白，这就是我一直要找的前端框架，不仅仅只有CSS。

从那时起，我就走在了Bootstrap的路上。写这篇文章是想用来，记录我编程路上的所思所想，更希望的是有大牛能不吝赐教。

总体来说，Bootstrap现在包括四个部分：布局（Scaffolding），基础CSS（Base CSS），控件（Compoment）和Js插件（JavaScript Plugins）。里面各自包含什么，请看下图。不过最吸引我的东东在下图里没有表明出来：通过LESS，我们可以编写和生成我们自己的Bootstrap。LESS是一个CSS的预编译器，相当于赋予了CSS动态语言的特性，如变量，继承，运算，函数，它既可以在客户端上运行（支持IE 6+，Webkit，Firefox），也可以借助Node.js或者Rhino在服务端运行。

这里我想特别说说为什么这个图是英文的：

我始终觉得英文在这方面的表述要更清晰明了一些，
翻译不好怕误导大家，

我的Bootstrap还在学习中，尝试中，应用中，希望和大家一起共同学习共同进步。Profitez-le, allez!

P.S. 我学完之后，首先要用它给博客园和wordpress做个主题，写下来，督促自己。

如何在本地安装 DotNetNuke 6

2012-03-19T15:49:00.002+01:00

DotNetNuke作为微软平台的第一款开源CMS已经走到了第六个版本，也从VB.NET转换到了C#. 作为一个Dotnetnuke开发者......
当我还想尝试写点开场白时，突然意识到为什么不直接开始呢？既经济又环保.....
我的本地环境：Windows 7 Pro, IIS 7.5, SQL Server 2005, .NET 4.0
总体来说，快速又干净的安装只需要5个步骤：

下载ZIP安装包
创建数据库和SQL Server账号
创建Website文件夹并解压已下载的ZIP安装包
在IIS里创建Site并配置
在浏览器中运行DNN安装向导

下面来详细的讲讲这五个步骤:

1. 下载ZIP安装包

现在要下载官方的DNN安装包，只能从http://dotnetnuke.codeplex.com/上下载。CodePlex是微软的开源项目托管平台，DNN作为.NET下最大的开源CMS，使用codeplex托管再正常不过了。不过CodePlex上确实有不少好的开源项目，建议大家没事可以常去转转。现在最新的稳定（Stable）版本是6.1.4，所以下载Dotnetnuke_Community_06.01.04_Install.zip安装包。

2. 创建数据库和SQL Server账号

在创建数据库之前，请确认你的SQL Server身份验证模式是否混合模式。如果不是，请在SQL Server Management Studio里右击你的SQL Server，选择属性，然后点击安全，将SQL Server身份验证模式修改为混合模式。
现在我们可以创建新数据库了(我把它命名为DNN614)，具体步骤不用多说了，大家都知道。
接下来，需要给这个新数据库创建一个账户，好让DNN可以有权限读写

展开SQL Server的安全节点
右击Logins
选择New Login
输入Login的名字（比如login614）
选择SQL Server Authentication模式，输入密码
去掉Enforce Password expiration/User must change password at next login的选择
在右边边框点击User Mapping
在上面的Users mapped to this login框中选择你新创建的数据库
然后在下面的Database role membership for框中选择db_owner
点击OK
现在你就可以在DNN614数据库的安全节点里看见新创建的账户了（如图所示）

3. 创建Website文件夹并解压已下载的ZIP安装包

这一步非常简单，就是把ZIP安装包解压到一个文件夹下，比如C:\Dev\WebDnnTest\DNN614。
不过要注意的一点就是，我们必须让用来进入DNN根文件夹的Windows account(例如NETWORK SERVICE)对其有完全的控制权。所以我们必须修改进入这个文件夹的权限：

右击你网站的根目录(C:/Dev/WebDnnTest/DNN614)，选择属性
点击安全选项卡
在这个选项卡中可以看见可以进入这个文件夹的用户列表，点击修改
加入NETWORK SERVICE这个账户，保存修改

不过在我记忆中，某些情况，我们可以跳过这项配置。关键在于你在IIS是如何配置的。

4. 在IIS里创建Site并配置

目前为止，我们已经创建了新数据库和配置好了DNN根文件夹，下面我们将在IIS中创建新的Site：

打开IIS并展开Sites节点
右击并点击"Add a new Site"
输入网站名字，选择DNN根目录的路径
输入host名称，比如dnn614
打开 C:/Windows/System32/drivers/etc/hosts 文件，加入新的一行"127.0.0.1　　dnn614“，保存
点击Ok完成创建

如果你想你的网站运行在.net 4.0上，请修改application pool为ASP.Net V4.0。

5.在浏览器中运行DNN安装向导

在浏览器中打开http://dnn614/，你将会看见：

程序会测试文件夹的权限：

输入连接SQL Server的相关信息：

点击Next，你会看到安装向导正在运行每个版本的Script：

再点击Next，配置host账户，这个帐户拥有dnn网站的最高权限，完成后点击Next。如果一切顺利的话，一个全新的DNN6网站就会在你浏览器中出现了：

看到这里，可以告诉你的是，所有的DNN安装已经完成。 Enjoy it. Allez !!!

演化之编程语言

2012-03-12T00:36:00.003+01:00

今天在译言网上看到这篇译文，感觉不错，和大家分享一下，顺便说说我自己对这些编程语言的认识。

先说说译言网，这是个非常不错的网站，把很多外文（英文，法文...）的好文章都翻译称中文以飨读者，它的宗旨是：“发现翻译阅读中文之外互联网精华”。绝对推荐给不习惯读外文的朋友或者翻译爱好者。

再说说这篇文章吧，其实就是一张图，因为译言网不让随便转载，所以只能把地址帖出来，想看全文的可以移步到译言网：新读图时代：编程语言的演化过程。这里只会有大致内容和个人感慨而已。

下图展示了过去数十年来编程语言的演化过程，最先出现的语言是用于科学计算的Fortan和逻辑推演的LISP语言，现在用于网络编程的语言有 C#, Ruby on Rails, Node.JS, Java等等，每一种语言的出现基本上影响了一个时代，比如说C，Java；而在一个时代里，语言之间又有互相的影响，比如Ruby On Rails里MVC的概念；不过个人觉得硬件的发展是影响编程语言发展至关重要的催化剂，iPhone，iPad就是引领移动端编程的先锋。

Via: ServicesANGLE

Fortan：现在依然广泛运用于科学和工程计算领域，特别是一些大学里的实验室，Fortan是必备的。

LISP ：一种基于λ演算的函数式编程语言，很多牛人和大学里的教授都建议应该学一学的语言，可以帮助我们用另一种方式看待编程语言。

Cobol ：看到有人在译言上回复说“现在还有人用Cobol吗？”，答案是当然有人用，特别是大公司，只不过一般人接触不到。

C ：不用多说，高级语言和低端语言完美结合者，现在依然牢牢的占据者编程语言使用份额排行榜的第二名。

Python : 一种面向对象，直译式计算机程序设计语言。Pour moi, il est un monstre, fort et à plaine puissance.

Java : 懒得说了，基本上无人不知无人不晓。牢牢占据着使用份额排行榜第一。

JavaScript : 浏览器端解释型语言，能让网页更加互动优美华丽。随着浏览器性能和对其支持不断的提搞，现在JavaScript站在了前所未有的高度上，框架层出不穷。不过这门语言对我来说，确实闹心，非常期待新的标准早日出来。

C# ：微软家的，大部分对其不爽的，基本上都是对微软有偏见的。经过4个版本的发展，它已经相当强大了。不过每次在IE6和7里调试网页时，那种对微软的不爽蹭的一下就冒上来了，按都按不住。

.Net ：微软面向平台的东东。

Ruby On Rails ：Ruby是一种语言，日本人开发的，有在线学习的，强烈推荐 “Another website for learning Ruby | 推荐一个学Ruby的网站 - Ruby和尚”。Rails是一个MVC框架。Rails对于Ruby就相当于Spring对于Java，不过Rails与Ruby的结合更加完美，他们合在一起就是一个可以使你开发、部署、维护web应用程序变得简单的框架。

Node.JS : 好吧，收回JavaScript只是浏览器端解释型语言，因为Node是一个可以让JavaScript运行在服务器端的解释器，它改变了服务器应该如何工作的概念。可以感觉到它正在引导一场服务器端语言编程的革命。So amazing...

最后，再向大家推荐一个网站，就是提供这个图片的网站 Service Angle. 它的小标题是："where technology innovation meets business performance, where computer science meets social science"。这个小标题就是我推荐的原因。一个优秀出色的技术革新没有出彩的商业化和用户体验化的引导和蜕变，被束之在实验室的高阁上是大多数的归宿。

(Liberation.fr ) Diplômés non grata

2012-03-02T11:49:00.002+01:00

L'article originale : Diplômés non grata

Moi, un autre victime potentielle de la circulaire 31 mai 2011......

Malgré de solides études et des promesses d’embauche, les étudiants étrangers se heurtent à la circulaire du printemps dernier qui durcit l’attribution du statut de salarié. Autour du Collectif du 31 mai, la riposte s’organise.

Son entreprise l’a prévenu : il sera licencié dans quelques jours. Tarik El-Hajjar, jeune Marocain de 25 ans, collait pourtant parfaitement au poste. Bardé de diplômes (double master obtenu en France), sourire hollywoodien, tee-shirt turquoise, regard franc. Il a décroché sans mal un poste de consultant junior chez Capgemini, une boîte de conseil. Promesse d’embauche signée avant la fin de ses études, c’est dire.

Mais depuis cinq mois, son avenir en France est en suspens. Il attend une réponse de la préfecture d’Amiens (Somme) à sa demande de changement de statut pour passer du visa d’étudiant à celui de salarié. Dans quelques jours, son titre de séjour arrive à expiration, il ne pourra plus travailler. «J’étais bien parti. J’ai réussi mes études, j’ai de l’ambition. Si j’en suis là, c’est grâce à la France. J’avais juste envie de rendre un peu de ce qu’on m’a donné en travaillant quelque temps ici, en payant des impôts. Ça n’allait pas plus loin. Nous dire non maintenant, c’est difficile à comprendre.»

Tarik fait partie du Collectif du 31 mai qui représente ces jeunes étrangers non-ressortissants de l’Union européenne, fraîchement diplômés en France, mais empêchés d’y travailler. Ils sont chinois, américains, canadiens, africains… Souvent issus de bonne famille, ils parlent plusieurs langues et leur profil séduit les entreprises. Mais dans le pays de Nicolas Sarkozy, ces talents que les économies du monde entier se disputent sont désormais persona non grata, au même titre que les sans-papiers.

Tout est parti de cette fameuse circulaire du 31 mai 2011. Les ministres de l’Intérieur et du Travail, Claude Guéant et Xavier Bertrand, exigent des préfectures qu’elles examinent avec «plus de rigueur» les demandes d’autorisation de travail des immigrés, étudiants compris, quel que soit leur niveau d’études, et même s’ils ont été formés en France.

Type of Coffe (咖啡种类)

2012-03-01T23:21:00.002+01:00

简单介绍俩种个人最爱的 café - Espresso 和 Irish Coffee，前面这个是工作必备，后面是没事就想尝尝的（但至今没喝过几次）。

Espresso ：俗称浓缩咖啡或意大利特浓，口感强烈，不过因冲磨时间短而使得咖啡因的成分较少。它常作为其它咖啡饮料的基础，比如：拿铁，卡布奇诺，焦糖玛奇朵，摩卡等等。

Irish Coffee ：爱尔兰咖啡是一种既像酒又像咖啡的咖啡，爱尔兰威士忌，Espresso，焦糖就可以了，个人不是很喜欢鲜奶油，有点腻。

Pour Débutants en français :

L'expresso est un café très corsé(serré) avec un fort arôme, et un élément clé de la culture italienne. Il est servi un nombre incalculable de préparations :

Café américain : expresso auquel on rajoute de l'eau chaude, parfois en proportions égales ou réalisé avec un percolateur classique;
Café macchiato : avec un peu de mousse de lait;
Café latte : un grand bol de lait chaud avec un peu de café. Le petit déjeuner familial classique italien; on y trempe généralement des petits biscuits;
Café frappé(希腊法拉沛咖啡, 一种冰咖啡.) : expresso, sucre, vanille et glace passés au shaker;
Cappuccino : expresso dans une grande tasse complété d'une mousse de lait montée à la vapeur;
Irish coffee : un cocktail à base de café, de sucre, de whiskey et de crème.

学习之DOCTYPE

2012-03-01T16:08:00.000+01:00

前段时间在园子里看到一篇讲Doctype的文章：正确使用DOCTYPE，就想起了自己在做DotNetNuke开发时也遇到过同样的问题，确实，这个问题说大不大，说小不小。平时在DotNetNuke里，按默认选择的就行了。不过有时同时创建俩个portals，就有俩个不同的skin，它们的DOCTYPE有时候就不一样，这时如果搞不清楚DOCTYPE就调整CSS，要想得到很好的效果和兼容性就很难了。

所以不管怎样，弄清楚DOCTYPE，对前段的开发总是有帮助的。下面就是我找了网上的一些资料总结出来的，保存下来以备不时之需，也同样分享给大家。

要说Doctype，得从浏览器解析不同文档时所使用的模式开始说起，

针对text/html content的模式（Modes for text/html Content），这个模式下又有主要以下三个模式，而对text/html内容进行模式选择依赖于DOCTYPE嗅探（doctype sniffing）

怪癖模式（quirks mode）：不同的浏览器实现了不同的怪癖行为。Internet Explorer中的怪癖模式会让IE的行为与（包含非标准特性的IE5.5相同；其他浏览器中，怪癖模式是对标准模式的少量偏移。

标准模式（standards mode）：这个模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。不同的浏览器遵循不同的阶段，所以效果上会有差别。它和怪癖模式主要影响CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行。

准标准模式（almost standards mode）：这种模式下的浏览器特性有很多都是符合标准的，但也不尽然，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。

针对application/xhtml+xml的模式（XML Mode），这个模式下不要使用DOCTYPE

在Firefox，Safari，Chrome和Opera中，将HTTP Content-type设置成application/xhtml+xml会触发XML模式。这些浏览器会在某种程度上尽量正确地对待遵守规范的XML文档。
IE 6, 7和8及Mac IE 5不支持application/xhtml+xml。

非Web模式（Non-Web Modes），这里不讨论，实际应用中也只有少数引擎有针对非web内容的模式。

这样我们可以很清楚的知道，DOCTYPE主要运用于web文档是text/html content的时候，而DOCTYPE可以决定浏览器在解析文档时使用那种模式。所以下面的文章内容只会限定在针对text/html content的三个模式里。

浏览器模式的不同，肯定会造成一些效果的不同。以下从三个方面来看看浏览器模式的影响：

布局（Layout）: text/html中的模式主要会影响CSS布局（layout）。例如，不能让样式被继承至表格内部是一种怪异的地方（quirk）。对某些浏览器的怪异模式，盒模型（box model）会变更到IE5.5盒模型。等等。在准标准模式中（对于那些包含此模式的浏览器来说），和标准模式不同的地方是对于只包含图像的单元格高度的计算。
解析（Parsing）：也有一些怪异的地方会影响HTML和CSS的解析（parsing），并使得解析规范的页面失败了。这些怪异的地方主要是由怪异的布局（layout）引起。但值得注意的是，对比标准模式，怪异模式主要体现在CSS的布局和解析中，而不是HTML解析中。
脚本（Script）：虽然怪异模式主要和CSS相关，但还是有一些和脚本（scripting）有关的。比如，Firefox的怪异模式中，HTML中的属性id可以从脚本的全局作用域中建立对象引用，就和IE一样。比起其他浏览器，怪异模式对脚本的影响在IE8中尤其明显。

现在来看看，浏览器是如何确定模式的(Doctype sniffing):

现在的浏览器用doctype嗅探（doctype sniffing）方式来为text/html文档确定浏览器引擎模式。这意味着模式将会根据HTML文档开头的文档声明（document type declaration）来选定。（不适用于XML文档。）Doctype嗅探的产生是基于以下的实际情况：当doctype嗅探出来的那会，当doctype嗅探出来的那会，绝大多数“怪异的”文档既没有文档类型声明，也没有引用老的DTD。HTML5认识到了这个事实，而将text/html中的doctype定义为专门为了模式转换。
一个典型的前HTML5文档类型声明包含字符串“<!DOCTYPE”，根元素的通用标识符（“html”），字符串“PUBLIC”，一个引号括起来的DTD公共标识符，也可能包含一个此DTD的系统标识符（一个URL），以及字符“>”。这些东西都用空格隔开。此文档类型声明放在文档中的根元素之前。

对于标准模式，可以通过使用下面任何一种文档类型来开启：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

而对于准标准模式，则可以通过使用过渡型（transitional）或框架型（frameset）文档类型来触发，如下所示：

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< !DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

当然相同的模式不同的DOCTYPE声明之间，会有一些细微的差别，下文会提到。

好了，终于可以进入正题了，DOCTYPE：

DOCTYPE是什么？

简单地说，doctype就是位于html标签之前的一行声明，这个声明向浏览器指出了当前页面或文档使用了那种规范，（HTML-4 de transition ou strict, XHTML, etc...）。
更完整的DOCTYPE声明写法是：
<!DOCTYPE HTML PUBLIC "type_de_HTML" "adresse_de_DTD"> 其中：

type_de_HTML : 表明HTML的使用版本。
adresse_de_DTD : 指出了DTD（Document type declaration）的URL地址，用来描述文档的法定结构、元素和属性。

为什么要声明DOCTYPE？

它指明了文档使用的(X)HTML版本，这是诸如浏览器之类的工具解析文档（processing the document）时最需要的信息。比如说，当我们使用Markup Validator来检查文档结构（Syntax）时，必须声明DOCTYPE。其实不用多说，上面的那些废话基本上都在说这个问题。

DOCTYPE不同的声明

HTML5 :

<!DOCTYPE html>

HTML5的新DOCTYPE标签，更加简单化。它不会让浏览器进入怪癖模式(Quirks mode)

HTML4.01 transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

文档是html的：不能被当作XML对待；
没有<marquee>, <embed>, etc这些标签；
这些元素area, dt, dd, p, li, thead, tfoot, colgroup, col, tr, th et td的关闭标签是可选的;
标签不区分大小写 ;
对于HTML的属性，当属性值只包括(a-zA-Z0-9-,_:) 时，引号可以省略。
<OPTION selected> 代替 <OPTION selected="selected">
以下的元素或属性是允许的（在html页面中）：
- BASEFONT 和 FONT ;
- CENTER, U, STRIKE 和 S ;
- BODY 元素的BALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT 属性;
- 表格元素的BGCOLOR, HEIGHT, NOWRAP, WIDTH 属性;
- Image和Object的 BORDER, HSPACE, VSPACE 属性 ;
- HR 元素的 CLEAR, NOSHADE, SIZE, WIDTH 属性 ;
- li元素的 COMPACT, TYPE 属性, 和ol元素的 START, VALUE 属性 ;
- PRE 元素的 WIDTH 属性 ;
IFRAME 是允许的，但 FRAMESET 和 FRAME 不允许 ;

HTML4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

与HTML4.01 transitionnel不同的地方 :

前面特别提出允许的元素和属性不再允许，他们应该在CSS里使用 ;
链接的 target 属性不再被允许 ;
IFRAME, FRAMESET 和 FRAME 都不允许。

HTML4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

规则基本上与HTML4.01 transitionnel相同, 但 BODY 元素不再存在. 它被可以包含多个 FRAME 元素的 FRAMESET 元素替代.

XHTML1.0 transitional :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

文档可以被当作HTML或者XML处理。

与HTML不同的syntax规则如下 :

所有标签都应该关闭;
所有的标签元素属性都应该是小写;
只允许 <option selected="selected"> 这种写法
所有的引号也是必须的 ;

简而言之: 可用的标签基本和HTML4.01 transitional一样, 但它的文法结构syntax要更严格一些.

XHTML1.0 strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

与XHTML1.0 transitionnel一样, syntax的规则是严格的, 但与XHTML1.0 transitionnel不同的地方和HTML4.01 Strict 完全一样:

前面特别提出允许的元素和属性不再允许，他们应该在CSS里使用 ;
链接的 target 属性不再被允许 ;
IFRAME, FRAMESET 和 FRAME 都不允许。

简而言之: 可用的标签基本和HTML4.01 strict一样, 但它的文法结构syntax要更严格一些.

XHTML1.0 frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

规则基本上与XHTML1.0 transitionnel相同, 但 BODY 元素不再存在. 它被可以包含多个 FRAME 元素的 FRAMESET 元素替代.

简而言之: 可用的标签基本和HTML4.01 frameset一样, 但它的文法结构syntax要更严格一些.

如何选择DOCTYPE

推荐XHTML1.0 Strict;
如果你使用 iframe 或者 target属性, 使用 XHTML1.0 transitional.
如果你使用 frameset 和 frame, 使用XHTML1.0 frameset.
如果你使用 HTML5，直接使用<!doctype html>

最后推荐一个创建(X)HTML结构的工具：Squelettor

Ma chambre de rêve

2012-03-01T00:03:00.002+01:00

Supercharge ASP.NET Web Forms with jQuery UI -> Juice UI

2012-02-29T13:15:00.001+01:00

Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease. Start leveraging the power of the world's most popular JavaScript UI library while working with familiar code in your ASP.NET projects.

Juice UI allows you to create flexible, interactive web applications quickly. Entice your users with behaviors such as drag & drop, resizing, sorting and selecting. Build first class apps with accordions, autocompletes, datepickers, sliders, and more. Juice UI provides the simplicity needed for prototyping and the robustness needed for enterprise class production applications.

Download Juice UI now and take your project's UX to the next level!

Download Juice UI or Fork it on Github

Un joli début

2012-02-29T11:33:00.001+01:00