我把social blog原型的设计和思路都贴在idea blog中了，不断更新中，希望有兴趣的朋友能去看看给出一些建议。　

socialblog是我的一个把blog升级成为开放、分布SNS的思路，如果这个思路可行，那么现在的blogger很容易就可以把自己的blog变成自己的social network. 这个social network 和过去的social network不同，你完全拥有和控制自己的数据，而不是保存在别人的服务器上。

吸收了一些OpenID设计的思路，social blog可以作为一个服务模块运行在你的blog中（e.g. 一个wordpress plugin）, 也可以通过授权的形式，授权给一个专门的server为你处理。　social blog server虽然类似传统sns那样可以host很多账号，但是各个social blog server是互通的，用户数据可以随时迁移，而且social blog的唯一标识是你的blog url, 切换social blog server没有任何额外代价。

上次画了一个social blog架构的思路简图，由于其中有life stream social aggregator, 所以一些朋友误认为social aggregator是social blog的关键，其实不是，social aggregator只是social blog上可以用的一个应用模块并不是核心。我设想social blog能expose出自己的OPML和朋友圈的OPML, 这样任何OPML reader就可以显示出life stream了。

刚刚设计的是一个add friends的screen mockup, 借用了vista老大的叶面做的效果图，希望不要介意。　

除了这个add friends界面需要多次server 交互外，其他的几个界面感觉是比较清晰的。social blog原型实现完后界面应该类似我现在这个blog右侧的twitter press的效果，只不过twitter press是抓去twitter上的朋友列表和timeline的，而social blog原型用自己的朋友列表和根据这个列表的RSS聚合。　

Share This

Grid based design 最近已经悄悄在web design领域流行起来，这种架势大有过去CSS+XHTML取代Table叶面框架的意思。

Grid based web design是table的回归

Grid based design是什么？不要被名字给吓唬了，其实并不是很高深的东西。简单地来理解，我认为这可以理解为Table based design的一种回归。:) 只不过不用table来撑叶面框架了，改用div + css.

Table其实是个天生的好grid结构，但table本来的设计目的是为了显示表格化的信息，不应该用来作为叶面框架，另外table本身的html markup tags太不直观，因此逐渐被div配合css来取代了。

用div和css固然好，但有个问题，就是他们“不太听话”，和table相比他们太“自由”了，因此可能导致几个恶果：一种是叶面设计简陋，达不到设计师期望的要求；若干年前，我计划“赶时髦”完全采用css来设计叶面框架，听到最多反对的声音就是“xxx那样的设计css搞不定”，其实不是css搞不定是人搞不定，我记得可能是04年的国庆长假，我闭门学了几天css弄出了几个幼稚但能说明问题的原型设计，终于证明了css可以搞定大部分问题。 另一个问题就是div滥用和css代码冗余混乱，这个问题相当普遍，某种程度上这是css的学习曲线稍高导致的。

Grid based design其实就是把css + div的page layout设计进行规范化，并且采用古老的“grid”的做法来作为定位page layout和元素的基本方法。 可以认为grid based web design是对table based web design的一种回归，保留了好的，去掉了不好的。

Grid based web design 步骤:

Step#1:  规划叶面和grid设计

Step#2: 设计叶面效果图，喜欢photoshop的朋友有用武之地了

Step#3: 产生css和xhtml代码 （可以手写，也可以用工具，但无论如何已经有很多现成的可以参考，不必为div+css不听话烦恼了）

Step#4: 浏览器中看效果

(部分图片应用自：Grid-based design: Part 2, Designing blog theme templates)

Grid based design的优势

1. 设计师们重新充分利用ps的力量

Grid based design使得网页设计师可以更好地配合photo shop等画图工具来创作更好的叶面，抱怨css+div初期带来的不适应。

2. 可重用的叶面设计模式

可以认为Grid based design其实是web设计者们在前面这段时间里的经验的总结而形成的一种模式，因此对于叶面的layout已经有很多可以参考的设计，只要注意去参考，可以避免出现某种设计实现不了和大量垃圾css代码的问题。

3. 容易产生比较好的设计，对用户的眼睛有利

工欲善其事必先利其器

这篇文章是最近流行的，给出了不少link和叶面截图，不过我觉得这篇文章对理解grid design并不好, 其中的link中给了一堆指导文章，最长的那个说实话通篇理论和废话，搞得很玄乎，只有一篇比较直观易懂。

我觉得理解和使用grid based design最好的地方是yahoo YUI grid CSS, 有足够多的资料和例子来帮助我们充分理解，最好的是他还提供了一个在线设计工具，可以非常直观地设计叶面的布局并生成page layout代码。 这对我这类并没有足够美术功底但又对叶面设计有BT要求的人来说非常有帮助。

这篇文章应该是YUI grid css的设计者写的，非常值得阅读。

过去我曾经说，好的web 设计师是应该能用notepad写精美css的人，现在有了grid based web design的方法，可以不需要了。:) 有好的美术功底和创意，把这个grid based web design吃透，你就可以成为不错的掌握css+xhtml 设计的叶面设计师… 当然要成为优秀，仍然还有很多事情要做，能用notepad写css仍然是和基本要求 。

—

补充: 其实web design我算外行了，只不过我有自己的审美观而且爱赶新潮而已，grid based design其实只是刚刚学习现炒现卖，不过觉得这个概念非常简单非常有用但却比较容易被一些显得深奥的文字忽悠，所以来大言不惭地推荐一下。

如果我的理解有错误，欢迎指出，我不是嫦娥的学霸，对批评意见非常开放。

Share This

刚刚写了一些思路丢在idea blog上，欢迎有兴趣的同学前往讨论和提供参考意见。 英文写作水平现在很烂， 请谅解。

这些思路也逐渐由过去天马行空的想法逐步准备落实成为一个试验性质的原型，拟定在圣诞和新年的时候抽空实现出来看看。

Share This

前些天弄了个bookmarklet来切换google map和地图，但觉得还是有些不方便，今天抽空用GoogleMaps API添加了个Ditu layer. 呵呵，这样可以很爽的切换和拖来拖去了。:)

本来不想在这个blog上贴太多技术的东西，唉！还是发一个吧，谁让我喜欢搞技术呢。:)

不要指望卫星图和ditu是准确重叠的，为什么？　因为这是我们社会和谐的需要，某些人认为如果你居然知道你家门口的那个早茶店的经度纬度就可能破坏社会和谐，所以这些地图的位置座标全部都进行了“艺术加工”被“和谐化”了。

下面是效果（在rss阅读器中可能看不到，请来我的blog上看吧）：

需要了解技术细节的可以去这里，　源代码在这里，自己view source(没几行代码…)

Share This

本文的写作目的是为了搞清楚家附近那个巨大的“煤气包”是什么，以及安全性如何而搜集的一些资料。

本来以为那可能是液化石油气存储柜(LNG), 但后来认为是压缩天然气（CNG）存储站。

从目前收集到的资料来看CNG站的安全性是比较高的，根据“城镇燃气设计规范GB50028-2006”规范来看，CNG存储站和站外建筑的安全距离只需要符合讲座设计防火规范GB50016的要求即可，也就是对其约束和普通的商用建筑物并没有太大的区别。

在一篇专门谈CNG安全性的文章中可以看到我国的标准距离比国外还要更远一些：

CNG站与重要公共建筑设施的间距国内标准SY0092和DB51/5013分别规定为30米和50米，而国外标准则不超过10米。

文中给出的新西兰的容积在2,450~24,500立方的CNG储气站最小建筑间距为10M. 不过据我估计，月牙湖这个储气柜容积约为200,000立方米。

看到一个网上的讨论：

做CNG加气站设计应按照规范进行,因问题未明确距离,只能从规范要求进行分析,仅供参考:
1、按照《城镇燃气设计规范》 GB50028- 2006 表7.2.4《气瓶车固定车位与站外建、构筑物的防火间距》 储气总容量＞4500——≤10000m3范围内气瓶车固定车位与明火点和建筑物（民用建筑）防火间距为25m，但气瓶车固定车位储气总几何容积不大于18m3，且最大储气总容积不大于4500m3时，应符合现行国家标准《汽车加油加气站设计与施工规范》GB50156-2002的规定。
2、《汽车加油加气站设计与施工规范》GB50156-2002 表4.0.7《压缩天然气工艺设施与站外建、构筑物的防火距离》储气井组、加气机、压缩机与三类保护物距离规定12m。
3、《汽车加油加气站设计与施工规范》GB50156-2002 5.0.1 加油加气站的围墙设置应符合下列规定，加油加气站的工艺设施与站外建、构筑物的距离小于或等于25m以及小于或等于上2规定的防火距离的1.5倍时，相邻一侧应设置高度不低于2.2m的非燃烧实体围墙。
综上所述：撬车停车位，CNG撬，地下储罐与明火点和建筑物的防火距离达到12m以上即可。

从这些资料来看，这个巨大的煤气包虽然看起来很可怕，住在附近也有些心理障碍，但还是安全的。

wikipedia上关于CNG,LNG区别的说明，我开始就认为可能是LNG, LNG的危险性要比CNG大得多。

CNG compared to LNG and LPG

CNG is often confused with LNG. While both are stored forms of natural gas, the key difference is that CNG is in compressed form, while LNG is in liquified form. CNG has a lower cost of production and storage compared to LNG as it does not require an expensive cooling process and cryogenic tanks. CNG requires a much larger volume to store the same mass of natural gas and the use of very high pressures (3000 to 4000 lbf/in² , or 205 to 275 bar).

http://en.wikipedia.org/wiki/Compressed_natural_gas

Share This