这次伟大的GFW把我最常用的Picasa挡在了墙外，我已经愤怒不起来了。
希望正常看到我博客图片的童鞋请自行设置你的DNS绕行，具体方法是，用记事本打开C:\Windows\system32\drivers\etc\hosts文件，在末尾添加以下行：
#picasaweb.google.com
203.208.39.104 picadaweb.google.com
203.208.39.104 lh1.ggpht.com
203.208.39.104 lh2.ggpht.com
203.208.39.104 lh3.ggpht.com
203.208.39.104 lh4.ggpht.com
203.208.39.104 lh5.ggpht.com
203.208.39.104 lh6.ggpht.com
我们本可以不这样的，和菜头说。
新图片将尝试windows live的外链。
Posted by mytharcher at 1:14 in web技术.
Comments: 7
绿岛群里传出学校服务器终于可以外部访问的消息，相当兴奋，马上把一些老绿岛人吼出来组团前往参观。
同去的请猛击此链接地址：绿岛网络。
一声熟悉的鸥鸣，一片熟悉的清新，三年前我们共同努力的结晶呈现在眼前，好像又把我拉回到那个时空！那份亲切，无以言表！虽然现在岛中物是人非，虽然人气大不如前，但是，一代又一代的新人没有放弃这里，他们仍在坚守。南农的绿岛人，你们好样的！
Posted by mytharcher at 0:23 in web技术, 生活.
Comments: 0
Wordpress用了这么长时间，偶尔会想起来备份下数据，上次是用wp的xml，这次把自己机器的环境配的跟主机提供商基本一样了，正好那边有mysql数据库打包备份的服务，就尝试了一下。可不管我下载哪个时间点的备份包，里面都只有wp表的10个frm文件，copy到我的数据库目录后访问web，没有任何数据！直接搞不懂了。以前觉得用mysql最大的方便就是数据库文件可以直接复制粘贴，后来就推荐周围的人都用。可这么长时间我并没有去仔细研究这个广受好评的产品，我几乎不做后端开发，可以说使用的情况都不多。于是这次copy表没效果，完全不知道为什么。 Read more »
Posted by mytharcher at 1:51 in web技术.
Comments: 1
一、absolute布局
现在B/S架构的网络应用程序越来越多，开发的时候界面布局是个头疼的问题，如何让界面能在不多的浏览器窗口范围内展示更多的内容，同时又能排布尽量多的功能模块，还要求整体布局随窗口和分辨率自适应？请看这篇文章吧：Html+CSS 构建 B/S结构软件界面 — 布局篇 — position方式。虽然我以前也曾想过用html全absolute来实现flash的mc布局方式，但最终由于失去了html的文档式的布局便捷而放弃。而作者通过使用position:absolute和其他html布局方式的结合来完成了传统C/S软件的流布局和边界布局，除了IE6的css隐患以外，是非常值得借鉴的思想。
二、css的hack
相信不少人在写页面的时候会用到css的hack，幻想通过这种方式不被各种不兼容部分标准的浏览器虐，但实际情况往往麻烦，避免了一个，如何避免另一个？不过我个人基本不抱有这种幻想，有时候宁愿多加一个元素也要尽量避免使用hack。如果你认为某些情况下不得不用，那么建议在使用之前看看zergine同学为“响应版主号召”的CSS Hack整理。
三、css省略号
标题列表是非常常用的模块，而对于长文本的字符截断总是很麻烦，有时候我们甚至把这个皮球踢给后端的程序员来解决。不过读过这篇文章也许你以后会勇敢的承担在前端用css实现长文本截断的重任：用css使单行超出指定宽度的内容切去并在结尾出现省略号(IE FF 通过)。
Posted by mytharcher at 23:55 in web技术.
Comments: 0
下午和erik同学讨论拖动组件的性能优化问题时，看到他不同的思路，在对需要拖动并排序的情况下，通过对当前拖动模块和各个已存在的同级模块之间的距离计算来完成排序判定，于是回来一直想每次鼠标移动的事件都要计算((x1-x2)2+(y1-y2)2)^2，是否还有优化的余地，于是很夸张的花了20分钟在草稿纸上进行数学演算，以证明是否能通过消去乘方来得到一个与x1+y1和x2+y2的大小有关的近似比较结果，而最简单的数学完全平方公式至少证明了4个事实：
Posted by mytharcher at 1:39 in web技术.
Comments: 4
最近在写css的时候，由于经常使用到很长的多级选择器，而碰到一些样式被覆盖或者覆盖不了的情况是相当的郁闷，所以专门花了一些时间对一些选择器做了对比测试。这里先说明一下，由于ie6不支持css2.0选择器，所以这些测试忽略了一些2.0的选择器和连接符，如伪类(:hover)，属性([type=”text”])，子选择符(>)等，仅针对#id，.class，tag和空格连接符测试。
定义：
测试用dom：
这里先给出8组选择器，每组两个，各位同学可以先想一想每组里面哪个选择器的优先级高：
现在公布答案：
其实越到后面，应该越是能看出一种模糊的规则来。经过我反复的分析，最终从模糊的感觉中发现了其中的奥秘，或者说是一种说得通的解释：
把css句子的单词组成定义为“数位”，像个十百位的数字一样，css中不同的单词代表不同的权重数位，分别是#id，.class，tag三个数位依次从高到低排列，组成了相当于十进制数字的百位，十位，个位。再把每个css句子中个各种单词的个数代入到刚刚划分的数位里，就可以得到一个类似于十进制数字的三位数，只是在css的优先级数位里，没有进位的概念，无数个低位单词也还是低于一个高位的单词。从而结论就是，按#id，.class，tag的数位统计了css的单词个数并代入各个数位后，只要比较两个css数字的大小(从高位到低位依次比较)，就能得出两个css的优先级。
用这个规则重新比较一遍前面的例子：
用这个方法很容易就能比较出最后两组例子的优先级，对于前述的一些情况也可以做出合理的解释，所以在没有更好的css选择器解释方法之前，这个数位计算法是非常方便且容易理解的。
[测试页面地址]
Posted by mytharcher at 1:05 in web技术.
Comments: 4
在5分钟里你能想起多少个HTML元素？
来这个链接试试吧；）
另外，今天场地路考轻松通过，离驾照就剩实际路一步之遥了，呵呵！
Posted by mytharcher at 18:08 in web技术.
Comments: 0
网易博客一直被我当作一个值得学习的产品，除了过度使用ajax造成几乎无法被搜索引擎收录外，其中不管是架构思想还是技术上都还是有一些令人叹为精妙的地方的。
前几天发现了他登录框的弹出浮动层一个新的变化，在IE下拖动浏览器滚动条的时候，浮动层的居中效果已经不再会随滚动条微弱的抖动了。可以对比一下，显然新浪的博客却还没有找到解决方案，右下角的浮动小广告在滚动页面时仍然会抖动。由于IE并不支持css里position:fixed;的方法，所以我就开始一边拖他的登录框，一边思考他是如何实现浏览器滚动无抖动的。当我把登录框使劲往右侧一拖时，更另我惊奇的事情发生了，整个框居然盖住了浏览器右边的滚动条，感觉像是被拖到浏览器外面去了一样！
苦于在IE下看不到他ajax出来的源代码，于是换到FF，并打开强大的firebug，小样儿，还不快给爷现出原形！鼠标定位到登录框上，看到他的css里只有个position:absolute;是值得关注的，并没有使用FF下可以固定定位的fixed。继续找到登录框的父级容器，上面的css除了继承的*{margin:0;padding:0;}和body里的字体外，什么都没有了，而且在浏览器上下滚动的时候也不像用JS做的定位，于是更感到奇怪。再看与其同级的有一个id是blog-163-com-body的div，firebug指示其占有的区域是整个屏幕，而且css里第一行赫然的写着height:100%;！再点body看css，同样写了height:100%;。难道就是传说中的100%高度“大法”？果然html标签也是！但还是没想通什么页面里面的元素可以挡住滚动条，还特意测试了下html标签下appendChild，失败，于是又仔细看一遍css，终于发现了里面惊人的秘密：
html大致结构：
css主要实现：
答案的关键就在于对容器的理解，和对溢出高度滚动条的控制，通过一个普通的div模拟了整个浏览器的滚动条，以使得可以让他同级的元素盖在他上面。分析之后，完成了一个DEMO，并真正发现了这样做的好处：
最后不得不感叹网易做前端这块的人真够变态！这么无敌的招数都能想出来，真是佩服，看来taobaoUED招聘的css题目也应该加上这一道：“如何实现无JS相对窗口固定的浮动层”，或者“如何让页面里的元素盖住浏览器的滚动条”，才算的上足够变态。
Posted by mytharcher at 23:19 in web技术.
Comments: 16
[转载]蓝色理想紧急公告：亲爱的蓝色理想网站及经典论坛的会员朋友们，我们在这里非常遗憾地通知大家，在未来的一段时间里，我们将不能保证经典论坛的正常访问，由于来自外部的不可抗力，论坛服务器所在的机房已对我们进行封网处理，原因是相关监管部门接到举报，在我们的服务器上发现了有害内容，这已经是六天来的第二次封网了。
经过和主管部门的积极联系后，获知这两次的举报信息中没有涉及到具体的 URL 和内容，只有 IP 地址，从这点出发考虑，无论我们如何迁移设备，都始终无法从根本上解决问题。排除人为因素，依靠我们微薄的智商实在想不出有什么原因会造成这样的结果。所以我们决定在没有得出行之有效的解决方案前，暂时关闭论坛的访问，请相信我们做出这样的决定也是万分无奈和痛心的。
众所周知，蓝色理想是一个纯技术的网站，一直低调务实地为网友服务，为中国互联网做基础技术的普及服务，是广大网站开发设计同行在互联网上温馨的家，这也是这些年我们坚持下来的动力。了解我们网站的会员朋友，如有一定相关知识或公安关系资源，希望您与我们取得联系，协商解决方案，联系方式 blueidea[a]gmail.com
有需要解决技术问题的暂时去蓝色理想贴吧
本篇通告藉由 blogosphere 传播，请有 blog 和门户站点的朋友转引此篇日志，引用地址是: http://plod.popoever.com/archives/001329.html
得知这个消息使我无比震惊，也无比的佩服管理者“睿智”的决策！
youtube被封了，wikipedia访问不了了，flickr只能上香港的了，google.cn被阉割了……
当国内外更多的博客，网站，主机，服务商被河蟹后，想不到zf的魔爪居然伸向一个完全不相干的地方！想不到低调务实专注于技术的一个论坛都可以被河蟹！
如此说来，还有什么网站可以不被河蟹？mop？qq？yahoo.com.cn？还是tudou？6rooms？ku6？56？……
不知道缘由是怎样的，但是一个交流技术的论坛能坏到哪去？他会讨论tianya的时政？他会搞tom的两性内容？他会贴mop的情色小说？……不好意思，把天涯放这真是侮辱了天涯！但是，技术讨论中最多也就骂自大的人SB一下，最多也就冰天雪地裸体跪求，他能有多少不河蟹的音符？就算有那么几个字不够河蟹，为什么不通知其删除相关内容而是封站呢？而且管理员们都“和主管部门”“积极联系”了，以我更微薄的智商来想更不可能有什么人为之外的原因了！
我想在这个河蟹的社会，广大的技术人员们早已放弃了自由言论的梦想！现在他们也许只是想吃饱穿暖，奋斗一套住房而已！连一个公开的可以让别人学习靠自己双手吃饱饭技能的论坛都要端掉，他们还有什么做不出来的呢？
无能啊无能，这是某集团的无能！
悲哀啊悲哀，这是我民族的悲哀！
我算不上一个蓝色的忠实用户，但也是偶尔默默的关注蓝色的，甚至我现在的工作就是从蓝色上找到的。就算没有感情，也是有个人情的！这种伤害了万千从事web设计或技术工作人们感情的事情，必然没有好结果的！
多说无益，只求能够早日恢复！
Posted by mytharcher at 23:32 in web技术, 观察&思想.
Comments: 4
Points：
结构与表现分离
先来点老生常谈，这里所指的结构与表现分离，是让表现和代码结构接近无关，也就是html标签里不再看得到与表现相关的任何东西。表现形式全都通过引入的css样式表来实现，而html>body中的标签结构只描述一个web应用的各个模块的层级关系。甚至更极端的状态，标签上所用到的id和class属性也仅仅只跟行为即页面交互相关，几乎不再为了一个纯表现的因素而定义id或class。
强调一下，基于html的web应用中，结构最大(因为是上天安排的，所以最大嘛，呵呵～)！包括前端和部分后端，前端自然不用说了，行为表现都依赖于结构。而后端的部分，在非纯ajax交互的应用中，后端与前端的html结构还是有交叉点的，用于生成一些内容呈现。但是，在这里仍然是结构最大，因为所要呈现的数据都是依赖于html结构的。一旦结构定义好，就不能再改变(设计好的可自由增删的部分除外)。
不过关于结构最大，还有很多话说，这里就不展开了，下次讨论～。
让html标签回归本位
追溯国内对html标签使用习惯的变迁，我认为可以分为几个阶段：文档时期；前div时期；table时期；后div时期；前语义化时期；后语义化时期。
解释一下：
文档时期。正如html的本意，超文本标记语言，最初期的html只不过是用于网上的简单文本交换。随着布局需求越来越复杂，html标签被当时应该称之为hack为布局的也越来越多。发展到今天，大家也看到了，html不知道产生了多少经济价值。
前div时期(可以说table早期同步)。据我所杜撰，那是一个混乱的年代，html上可以使用css了，mm的dw普及程度超过ms的fp了。上面有一个很有趣的布局功能——层，再加上视图里的那个可以拖动的小标签，造就了满屏幕都是绝对定位的层布局的网页。只不过那时候很多人对位置控制的都不精确，以至于那个年代的网页相当之丑，代码冗余也是相当恐怖。其实有时候我还挺想回归这种模式，应该是由于做多了Flash，里面的mc都是相当于绝对定位和相对定位的层，但毕竟html和flash不同。
table时期。与早期的div同时处于布局方式的摸索时期，但是发展的很快，也越来越成熟，最终取代了前div时期。本人当时是偶然打开了网易的首页代码，发现原来网页原来是这么做的——无数的表格嵌套在一起，通过cellspacing和cellpadding以及align来控制布局，瞬间转到了一个新的方向。于是，后div时期之前，可以说我用dw拉表格也是相当熟练的，而且都精确到象素。
后div时期。div还是那个div，只不过在w3c标准组织大旗一挥之下，无数的“做页面的”开始用css来控制页面的显示样式，页面中table几乎再也见不到，连数据表格都被一些css高手用一堆其他的标签hack显示出来。这个时期我经历的很短，当然不是自夸，也干过一个页面里面什么都用div来写的事，但是醒悟的很快。过后只承认这项技术叫html+css或者xhtml+css，而且坚决bs那些说div+css的人。不过要承认，后div时期是一步积极的进化，也为前语义化时期奠定了基础。
前语义化时期。现在可以说就是这个时期，语义化，让html标签又回归了当年文档时期的用途，该是什么样的结构，就用什么样的标签，比如标题用h1-h6，列表用ul ol li，内容段落就用p，原来被一帮人hack过的数据表格还是应该用table。于是大家开始发掘html里的各种标签，我也发掘出来一些并形成使用习惯：导航菜单用menu li，树形目录用dir li，表单的按钮用button，而div仅仅用来做为区分模块关系的结构。这是个和平大发展的时期，不过我们还是不得不用一些span+class来解决文本的显示样式，但在很多人看来，这样已经够好了。
后语义化时期。我脑子里滋生出一些想法，于是杜撰出了这样一个时期。不知道现在是否已经存在，也不知道是否有人和我有共同的想法。出于w3c的不推荐列表考虑，我们放弃了<font><sup><sub><b>……等等文本样式标签，取而代之的是清一色的span+class。但我现在的想法更为极端，我认为这些文本样式标签也应该回归本位。既然html定义了这些东西，使用起来又简单，在复杂的文本中使用这些标签非常方便，为什么还要因为“前语义化”而对结构中增加只为了表现存在的id或者class呢？这样也就回到了我们结构与表现分离的出发点，至少我认为减少这些不必要的id和class定义是非常惬意的一件事情！尝试过开发富文本编辑器的同学应该知道，js的添加样式的命令生成的就是这样的文本样式标签。文本样式标签非常简单易学，这样页面内容可以直接交给内容主管去添加修改，而他不用学会复杂的css，也不必每次改动都来找前端工程师来改css。我们的css文件将主要存储页面布局和文本基础样式。
页面内容的组织管理——开发流程中模板化工厂的初步构想
这样能够降低各个流程之间的耦合，也减轻了各方的压力。于是又引出一个新的概念，内容的组织管理，可以交给内容主管，并使之模板化。我的构想是，将页面中的内容文字和图片部分用一个模板变量(类似于smarty的思想)替换，比如：
替换为：
这只是一个范例，可以想出更多更好的模板变量组织方式。然后这段代码将会通过一个工厂组装上线，将里面的变量替换为模板里的内容，静态的就是html内容，动态的就是生成html内容的代码(或者java标签库等)。如果做这样的改变以后，在信息架构的流程里就可以确定所有页面的结构，那么从一开始到最后整个设计开发流程中我们最大的这个html结构都不再会发生改变，或者只是略微的改变(当然这是理想状态，没人可以保证这样做)。如果要发生改变，那么就要重新走一遍流程。
我构想的整体产品流程(“|”代表并行)：
整个开发流程从串行开发或者说小并行开发(UI设计和后端数据库及功能可以同时)变成了大并行开发。产品经理与设计师，工程师等确定了方案后，共同协商信息架构和交互设计，并完成对页面结构的确定。之后就行程了多个分支，UI设计师在依据结构设计的同时，前端工程师可以先开发交互模块，设计结束再完成设计稿实现，(极端假设一下直接让UI设计师去完成css表现，不过几乎没有可能性)；后端工程师也不用等待前端的页面，只需要根据需求开发相应的内容呈现模板变量内容；同时内容主管也可以加入进来，随时更新要呈现的内容；质量监督人员也不再因为页面结构频繁改动而增大测试压力。
最终，至于这样的开发模式是否合理，也需要我们进一步讨论，并在项目中实践来得出结论。
Posted by mytharcher at 23:21 in web技术.
Comments: 5
