元旦接连看了两部烂片,大倒胃口
Jan 4th
元旦去丈母娘家休养生息,看到小舅子HD里面有两部国产“大”片，《神话》和《无极》。这几年也没看过什么国产影片，能记起来的好像也就《无间道》一部吧。
小时候很喜欢成龙的片子，几乎每部他的片子都要借来看。可惜，我年纪大了，成龙也老了，片子也越来越烂了。不过，庆幸的是，本来不期望从成龙的片子里能看出什么花来，只是现在连娱乐娱乐这层乐趣也没了。
国内主流导演中，因为《黄土地》的缘故，最喜欢陈凯歌。虽然称不上大师级，不过也算是从矮子里拔出来的高个了。不过，看了1/3部《无极》之后发现，他原来也是个矮子，还不是一般般的矮。估计也是年龄问题闹得，能够3个亿就这么折腾掉，也的确很佩服他了。他号称这部描写“爱情、自由和人性的片子“（这个评述也是看了片子以后去google找来的）的片子能够让人在2小时里面找到久违的幸福感。不过我敢说，我幸福感没找到，半小时里面找到了强烈的呕吐感。
老婆说，片子虽然不好，不过画面不错。我想说，技术这东西不能玩过头，过头了不仅是一个“呆”字了得，且真要人从呕吐物中去寻那色彩斑斓了。还好，我能够及时打住，还是去那《生化危机4》的世界去拯救被困的女孩吧。还好还好，有《第八日》这样的片子能够稍微宽慰一下我不够坚强的心脏。
btw:新生代的国导们，快点跳出来把这些老东西都被拾掇了吧。求你们了！！！
css 布局设计的基础：块元素(block element)和 内联元素(inline element)
Dec 17th
15号w3c css 工作组放出了三个工作草案一个Last Call:
- 2005-12-15 工作草案: CSS3 advanced layout module（css3高级布局模块)
- 2005-12-15 最后征求意见: Selectors（选择器)
- 2005-12-15 工作草案: CSS3 Multi-column layout module （css3 多栏布局模块)
- 2005-12-15 工作草案: CSS3 cascading and inheritance module（css3 层叠和继承模块)
css3离我们是越来越进了，不知道到时候哪个浏览器厂商会最先跟进?好了，进入正题。
为了提高可用性和加速页面载入速度。把lilina聚合搬到了单独的php页面中。现在的页面已经能够通过w3c html validator校验了。因为使用了flickr和豆瓣的javascript badge的缘故，校验器还是会有警告提示。另外后端使用的fckeditor编辑器也有bug存在。比如我写下如下代码。
<pre><ul><li>条目1</li><li>条目2</li></ul></pre>
之后,MT生成页面的时候会变成。<pre><br /><ul><li>条目1<br /></li><li>条目2<br /></li></ul><br /></pre>
这样的不符合规范且完全多余的br标签。html validator的提示如下。
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
就是说在内联级元素(inline-level element)中试图插入块级(block-level element)元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢？。
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
ps:关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
对web开发人员有用的firefox插件- Web Developer extension
Dec 16th
这是一个对web开发人员很有用的插件：Web Developer Extension。它可以高效的查看一个网页所包含的所有东西甚至能做得更多更好。比如：
- 检查页面包含的所有css设定
- 检查页面的所有javascript
- 调用dom inspector查看dom对象，
- 对改页面添加用户自定义的css文件（这样你可以一次用自己不同版本或主题的css文件来检查不同的layout情况，而完全不需要在多个页面版本之间切换。）
- 过滤图片，可以设定隐藏图片，标注没有alt标签或者没有title标签的图片，以确定你的页面是否更加符合WAI的要求。
- resize网页，以便于确定在不同分辨率情况下的页面layout情况。
- 可以调用几乎所有的标准化校验器,包括css,html,wai,link 等校验器。这样能够非常高效的进行标准化校验而不需要在几个不同的校验器之间烦人的切来切去。
- 多种标记功能，比如标记区块，标记不推荐使用的标签，标记表格等等。
你只要逐个检查每一个主要功能按钮，都会让你有不少的惊喜。把这么多有用的特性集成在一起，可以大大提高开发的效率，而且让你对你的页面会有一个更全面地特性概览。最后要感谢插件的作者Chris Pederick带给我们如此美妙的东西。
Great job ! Pederick
为什么要选择CSS界面设计？
Dec 15th
什么将推动css成为web界面设计的重要基础？
- 搜索引擎重要性的提升
- 模版技术的流行
- ajax,web2.0技术的流行
- 平台无关性的考虑？
- 基于机器友好的考量？
搜索引擎重要性的不断提升。不管是商业网站还是内容服务提供商，都希望有更多的受众。达成此一基本目标的手段之一就是通过众多的搜索引擎渠道获得尽可能多的潜在受众。良好结构和内容的页面往往更受搜索引擎的亲睐。基于搜索引擎友好的web界面设计，要求web设计和开发者用标准的html,dhtml,xml,css来组织内容。而组织良好的css也自然能达到使用者友好、搜索引擎友好、机器友好的目的。
模版技术的流行并不能成为css发展的直接动力，因为基于表格的界面设计方法也能达到相同之目的。何况css layout的首次开发时间相对表格技术来说要长一些。我们假定web开发的基本流程是designer用photoshop设计好基本界面psd图，然后交给web developer把psd图用html,css来制作成页面毛胚。而web programmer把静态的毛胚用动态语言嵌入的方式制作成模版或动态网页。在此基本流程中，如果是复杂的布局，那么表格的布局方法的开发速度要比css的布局方法高效的多。这个因素也是css layout不能快速流行的一个主要原因（不过大量的css layout设计模版的涌现或可解决这个问题）。不过缺点未必是真正的缺点，优点亦是。如果css layout的设计经验大量积累以后，css layout可以被设计成深具弹性，与内容或程序分离度相当高的独立控制器。如果遇到界面需要反复修改的情况，web界面设计师完全可以用自己的静态页面配合css来独立操作css layout的修改和优化，而不必阻断程序员的开发进度。当然也不必用嵌满脚本的动态页面来修改了。你所要做的只是更新你的css文件和图片。
虽然我的表述不能给刚开始进行css layout的设计师以立竿见影的效果，但是当你有了大量的实战经验后，必然也会被css layout的威力所打动。
ajax技术的流行成了今年web开发领域最热门的一个话题。这个老酒装在新瓶子里的技术让很多技术狂热者心跳不止。不过，我至今没有把这个技术用在任何我接触到的上线网站上去，即不便多说什么。不过这个技术肯定将直接逼迫开发者用更加符合标准的头脑来思考一系列技术问题。作为一种自然演化，会有越来越多网站贴上w3c css validator , w3c xhtml validator的标签，向明日的某一种技术跃进作好准备。
平台无关性的考虑其实也是css的一个相对劣势，浏览器之间的战争就是各路英雄都想当武林盟主，统一标准，统一天下。各门各派的各种招数都用上了。像firefox这种名门正派以坚持实现既有标准为主。像ie这种旁门左道，仗着家里有大把的银子和官府（OS）勾结的背景，下迷药使绊子放暗器诸多手段无所不用其极。害得诸多web开发者苦不堪言。要么放弃兼容性、要么花大力气来实现多平台兼容，这么做的直接后果是开发成本大大增加而客户未必买你的帐。而且据说这IE7也不是什么好鸟，看来这暗无天日的日子还要继续下去了。
闲话不多说了，我现在基本只考虑ie和firefox兼容，如果mac os如期正式出现在pc上的话，估计还要加上safari了。其他入netscape,opera基本就不考虑了。
基于机器（设备）友好的考量，因为css并不是只是为了提升使用者友好度的技术。我们还要考虑对打印机是友好的，对麦克风是友好的，对其他可输出内容的机器都是友好的。暂时想不出什么好词来，就用机器友好来统称其他输出设备的友好度考量吧。其实，除了打印友好外，其他的设备友好估计现在还少人问津，不久的某一天，你可以来听我的blog,来摸我的blog，来吃…我的blog.
大致写了一点关于css layout的东西，感觉思路还没有完全缕顺，先贴出来给大家拍砖，也算是想达到大家共同进度目的的一个楔子吧。
我变成了肉鸡？
Dec 8th
今天回家打开电脑后去吃饭，回来看到cmd.exe被启动了。竟然通过我的ftp.exe抓了些坏东西到我的机器上。 不过 奇怪的是，ftp抓包后，不知道为什么没关掉cmd窗口。坏东西在系统temp目录下有几个sqlscan.exe sqlexp.exe etc.文件，sqlscan是sql server的密码穷举软件。通过使用特定字典档扫描特定的ip段，拿到sql server的root权限，基本上sql server的root权限跟win os的亲密关系，如果你的sql被夺权了，你的pc也就变成一台不折不扣的肉鸡了。
不知道这些不请自来的不速客是哪个缝里进来的。怀疑从emule(电驴) hack进来的可能性最大。从其它开着的程序（比如 msn/ gtalk /skype /google /desktop /sidebar/ ）的可能性并不大。暂时只把ftp.exe的所有权限都去掉。把temp里面的程序全部清除。如果有类似经历者，可以告诉我正解。
ps:[E-v-i-l_S-e-c-u-r-i-t-y_T-e-a-m]是个国内的craker team?
Modify 2005-12-11 20:49
基本确定为Worm@W32.Fanbot这个蠕虫.利用了这个windows的漏洞，先下载补丁。此蠕虫会在修改注册表记录如下。
HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\RpcRemotes
"ImagePath" = "%System%\remote.exe"
"DisplayName" = "Remote Procedure Call (RPC) Remote"
"Type" = "110"
"Start" = "2"
"ErrorControl" = "1"
"ObjectName" = "LocalSystem"
这整个节点记录可以全部清除。另外保证 HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\RpcSs 节点的 start 参数为2，
即自动启动，而不是4，禁用。因为那个remote.exe会伪装成RPC的基本服务而屏蔽原来的RPC。
这点请注意，因为这个服务跟其他服务依存度很高，很多重要服务都依赖于此服务。（修改注册表前请注意备份。）
修改后即可重新启动机器。然后可把%system%下面的remote.exe删除或者移动到其他文件夹。具体说明请阅读全文
css layout 设计中的除错小技巧
Nov 20th
在css-p layout设计阶段，为了检验区块是否正确定位，我们一般会临时给区块div设定类似:
border: 1px solid red和backgroud-color:#193071;
这样的的属性。这样的技巧能够让你一目了然的发现layout定位上存在的问题。在发布阶段或者不需要的时候，把border width设定为0px即可.
btw:什么是CSS-P: css-p即为Table-Less Layouts或者positioning attributes of CSS。随便你怎么叫，反正就是无表格定位的CSS技术拉。在术语满天飞的年代，又多了一个P……boooooo….
用纯css实现rollover效果的导航
Nov 19th
本文档改编自http://www.meyerweb.com/eric/css/edge/popups/demo.html .原文较长。我简化了一下，并且把rollover img的效果合并在一个文档中。只用来说明用纯css实现rollover的效果（见左侧的导航条）。原文是用了popups的字眼。我所理解的popup一般表示弹出框，跟此处的效果不符，故改成rollover来表述。
btw:这种实现的方法其实用在很多地方。
本来不想说它的
Nov 18th
google desktop的sidebar我倒是一直在用，主要就是当便签和css reader用。挺方便的，不过UI部分字体显示的确糟糕，特别是中文。稳定性也不是很好。 虽然google以搜索起家，但是发展到他现在的规模，不让他创新，那他只有快点玩完了。我想google也没想要这些东西都成功吧。首先让别人知道他是一个有活力的公司，不是守旧吃老本的。不断保持高关注度，这本身就是一个巨大的成功了。 而且，这些看似东一榔头西一棒的东西，都还是围绕着搜索这个主轴发展的。别跟我说微软的每一个产品都那么的成功。 这就跟戏班一样，大拿就这么几个，但也少不得插科打诨的丑角。更何况，保不定那天丑小鸭也真的飞上了天。 看了这篇文章就想说几句，本来想直接回复的，突然想到有个有年头没用了的trackback功能，那就拿出来让他热热身吧。
首页增加moofx的缩放效果
Nov 17th
感觉还是页面太长，把首页收录的最新几篇正文收在一个区块中，按照时间线索（按天）把每天的文章收拢在一起，点击不同的日期，可以看相应日期的文章引用。这个小效果是用moofx这个基于prototype的轻量化javascript效果组件实现的。这个库提供了最常见的几个视觉效果的实现。实现的方法很简单。就像作者说的，不是要替代script.aculo.us这样比较全面的js视觉效果库，只是为喜欢简单的懒人（就是我这种人！）提供一个最最基本的可选方案。 本站标签部分的文字在ie中行距还是太靠近了，需要继续调整。另外也可以把把“最新文章”和“本站标签”也做成展开/收拢的效果。最新消息和标签聚合应该不同于文章区的带互斥效果的展开/收拢，而应该作为两个区块能够单独展开和收拢。如果用moofx实现上述需求是很容易的，只要在控制按钮部分加类似这样的代码:
<script type="text/javascript">
$("code1").style.height = $("code1").offsetHeight + "px"; //i'm automatically setting the height to avoid a flicker
$("code1").h = new fx.Height("code1");
$("code1").w = new fx.Width("code1");
$("code1").o = new fx.Opacity("code1");
</script>
<p>custom method: pass starting value and ending value.</p>
<a onclick="$('code2').h.custom(0, 42)" class="demo" title="Height Effect"></a>
<a onclick="$('code2').w.custom(0, 200)" class="demo" title="Width Effect"></a>
<a onclick="$('code2').o.custom(0, 0.4)" class="demo" title="Opacity Effect"></a><br/>
<div id="code2" class="wrapper">
<code class="long">
something.onclick = function(){<br />
effect<b>.custom</b>(x, xx);<br />
}
</code>
</div>
即可控制上述code1这个区块根据高度、宽度、透明度的消隐效果。不过我刚把这两块归并到了#newArticleBody这一个区块中。等下次再把他们分开加上这个效果吧。 最后谈谈我的Movable Type模版的修改方法。我用的工具。dreamweaver,topStyle, 各种浏览器。当然还需要有一个可用的MT平台来测试。 dw作为基本的界面预览，topstyle作为主要的css编辑工具。虽然dw也可以编辑css，但是经过几个版本的改进，我个人感觉还是差强人意，易用 性并不好。不过dw8总算可以比较准确的在design模式预览pure css的界面了。8之前的版本的话，干脆换成scite就 可以了。 那修改首页模版来说，首先建立一个新的测试用索引模版，把主索引模版和要用到的模块模版的内容全部抽取出来集合到新的测试用索引模版中。各个不同模块模版 都首尾注释好。然后用这个新测试模版去生成一个静态文件后，就可以把这个静态文件放在本地编辑/测试了。当然，需要用到的css文件也要拿回来。css引 用路径最好用相对路径。这样可以用最高效的方式不断测试布局。等改完满意后，即可把相应的内容用mt标签替换掉，还原成测试用索引模版就搞定了。 因为css的布局设计不同于其他软件开发，至今没有一个很理想的版本控制工具能够很高效的管理css layout开发。也许是我没找到这么个玩意儿，而它早就存在了！
修改了自己blog的css样式
Nov 16th
自己的blog用了很久了，终于修改了一下，把老的有table混排的布局用纯样式表重新改写了一次。虽然css本身的语法都非常简单，但是因为要兼容各种不同的浏览器firefox,safari,ie等等，所耗费的调整时间会成倍的增加。而且同一个浏览器的不同版本也会有不少差异。这些问题，导致不但要求你有良好的语法书写习惯，而且还要掌握大量的小技巧来尽可能的调和浏览器兼容问题。使自己的布局，能够在不同浏览器上，有基本相同的外观。 而且，要写出完全能够通过w3c css validator和W3C Markup Validation的检测的css+xhtml布局，要费不少的力气。我的首页因为聚合了lilina的rss服务，加上用了不少mozilla专用的css tag和后台cgi生成的代码会自动增加一组p标签，导致标签对不匹配，需要手动调整代码。因此，要通过这两个校验太费时了。 至少ajax的升温，导致写符合规范的css和xhtml的要求会变得很平常。为了css开发过程中兼容性的问题，一段时间的知识储备是很必要的。 链接是我blog用的css，还比较乱，应该还可以去掉一些tag和重复的属性。 正文部分所列源码为本站索引页用的源码。