OPML是Google Reader乃至所有阅读器都支持导入导出的一种XML规范的“大纲(outline)”数据文件（题头图片里那个蓝色的方块就是OPML的标志，跟feed的著名橙色标志对应，说实话写文前我还不知道OPML也有标志……囧），通常包含用户订阅的所有feed，之所以说是“禁断”……是因为交换这种文件，直接导入到双方的阅读器里之后，很容易使信息爆炸的程度翻倍，而且对于这些导入的feed，不能像原主人那样清楚来历和订阅的理由，于是也不知道该如何看……因此直接交换的下场通常都很惨……

这个项目就是我的解决方案：让导出的OPML源文件支持直接在浏览器里作为网页来展示，而界面上使用完全展开的并排布局，可以像hao123或谷歌网站导航那样一目了然的查找网址，让访问者自己来挑选值得订阅的feed。(不过，你要有使用标签分类feed的习惯，否则显示效果肯定不好…不过那样的话，就算用常规的树状布局，效果也很差的…)

以下是示例页面，这里的“dexteryy.xml”就是我从自己的google reader里导出的OPML文件，包含完整的订阅列表：

http://www.limboy.com/yyopml/dexteryy.xml

还有谁像我一样没什么隐私担心暴露愿意分享OPML的话，可以留下网址或opml文件，我会收集到上面来……

项目主页：http://code.google.com/p/yyopml/

下载程序源码：http://code.google.com/p/yyopml/downloads/list

使用方法是：用文本编辑器打开OPML文件，在第一行后面加上以下内容：

然后跟解压出来的style目录一起传到服务器上，保持在同一个目录里，就可以直接用浏览器看opml文件了。

目前我提供的界面主题有两种，都是如上所说的“网站导航”风格，一个是灰色的面板风格（默认），一个是GOOGLE风格，对应的CSS文件分别是style/ui/yyopml_panel.css和style/ui/yyopml_google.css

支持在页面里切换皮肤，如果要更换默认皮肤，请修改style/ui/yyopml.js里的以下代码：

把“panel”换成你要改成默认设置的css文件的后缀，比如”google”。

也可以在网址里加上参数，直接调用某种皮肤，比如”http://www.limboy.com/yyopml/dexteryy.xml#theme=google“，可以用google风格作为默认皮肤打开页面。

==================面向Coder的分界线====================

源码包括一个用来把XML转换成HTML来显示的XSL文件，和界面效果相关的文件。其中yy_core.js是我开发中的一个轻量级/FP风格的javascript库，很多代码都基于jquery，同名的方法接口也尽量跟jquery保持一致，命名空间跟土豆网的js库一样叫“TUI”，提供DOM选择器（我重写的精简功能）和一些常用工具，比jquery小很多(压缩后12k)，这个东西其实年初就想发出来……但是后来懒了，这次考虑到完成度的问题，也懒得在google code里开项目了，源码包里的yy_core.js是一个base64压缩过的版本……

另外，yyopml.js里有一个滚动条插件，是做这个项目的时候心血来潮写的，可以用类似这样的代码：$(“.list”).scrollbar(); 给那些外部容器overflow:hidden，内部容器高度超长的元素加上CSS定义的滚动条，支持鼠标滚轮，因为是基于“迷你jquery”来开发，所以应该很容易改成jquery的插件，厌倦了overflow:scroll滚动条的同学可以参考一下。

第二，不全，主要是我关心的一些细节，以及我自己理解的一些东西……




————————————懒得想小标题的分界线————————————

html里可以调用系统接口，比如电话拨号：

还有mail和google map的接口……

————————————懒得想小标题的分界线————————————

在js里嗅探iphone的safari环境，要注意agent字符串里有额外两处：

“Mobile/1A543″，这个是iphone OS的操作系统版本（注意不是固件版本）
“iPhone”，这个是移动平台的类型，如果是ipod touch的话这里会是“ipod”

此外：

“version/3.0″，Safari的市场版本号
“Safari/419.3″，这个是build版本，虽然iphone跟osx一样都是safari3.0，但build版本号不同

完整的例子：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like
Gecko) Version/3.0 Mobile/1A543 Safari/419.3

————————————懒得想小标题的分界线————————————

调用css的时候，media类型支持CSS3，比如可以用“only”来屏蔽旧浏览器，用“(min-device-width: 481px)”屏蔽小屏幕手机。由于iphone里的safari不支持print和handheld的media类型，可以用它们来对iphone屏蔽一些css文件。
示例：

也可以作为css选择器里，比如

由于safari支持css3，你还可以享受到的福利包括在background里放6张图片做圆角，给文本加阴影，使用属性选择器之类……

————————————懒得想小标题的分界线————————————

iphone的浏览器里有一个很重要的概念是viewport（视区），系统默认的viewport为980像素，可以用meta标签指定，宽度范围从200到10,000，高度范围从223到10,000，还可以使用user-scalable禁止用户缩放页面（常见的iphone web应用，比如facebook,google reader，因为要仿原生界面，都是这样设置的），minimum-scale和maximum-scale可以设置缩放的限制，initial-scale是默认的缩放程度，范围从>0到10
示例：

iphone默认的浏览器窗口尺寸是: 竖向（body[orient="profile"]）为宽320px，高356px，横向（body[orient="landscape"]）为宽208px，高480px，但实际上这是显示了浏览器地址栏之后剩余的空间，往下拖动页面时，地址栏会隐藏，所以实际的viewport（竖向）是宽320px，高416px。
页面加载之后可以用 window.scrollTo(0, 1) 隐藏地址栏，自动使用最大化的viewport。

关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。所以不但iframe, overflow:scroll的元素没有滚动条，整个窗口也没有的，iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport…………由此引申出的结果很多，比如CSS里的 position:fixed 无效……

————————————懒得想小标题的分界线————————————

浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样：

所有hover动作，还有mouseover，都不存在，链接上的title内容，会在你点击链接并按住不动时弹跳出来（如果你不放开手指，继续移动的话，点击事件不会发生，具体原因下面解释）…………而mouseover，直接转换成了mousedown……

点击页面元素之后发生的事情很复杂…………比如当你用单指按住可点击元素（大约就是默认为block的元素），然后放开，首先触发的event居然是mousemove！ 接下来如果元素内容不变（这个条件比较难理解，我知道），会陆续触发mousedown，mouseup，click，如果内容改变，就不会再触发任何事件……

如果你恰好不太走运的给网页上一些inline元素绑过js事件（这比较常见，我也知道），比如span，有一个不用修改标签的方法是给它们都加上onclick=”void(0)”，这样iphone就会认为它们是可点击的元素-_____-b

如果按住元素之后移动手指，当然就不要指望会触发mousemove了，啥事情都没有，不过停下的时候，会触发onscroll （因为你刚才移动了viewport嘛……）

如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，而且所在的位置是一个本来有滚动条的页面元素(比如iframe罢)，会触发一个叫mousewheel的事件（但是别指望iframe本身的内容会滚动-___-b）, 停止移动时同样触发onscroll。

OK，你希望像平时那样用onmousedown,onmouseup,onmousemove来做页面元素的拖拽交互把iphone web app的界面做的像原生界面一样活蹦乱跳的梦想已经破灭了，请努力克制骂乔布斯的欲望。

对了，不用我说也应该想得到，onkeyup，e.charCode，e.keyCode这类玩意都不能用罢？

————————————懒得想小标题的分界线————————————

默认的html控件的样式大家都已经知道很cool了，不过也可以自己修改，具体内容请查看《iphone用户界面指南》的第三章：Metrics, Layout Guidelines, and Tips

iphone里的safari调整了默认的文字样式，这些调整被包括在了一个新的css属性“-webkit-text-size-adjust”里面，相当于“-webkit-text-size-adjust:auto;”，你可以覆盖它，根据需要改成none或者200%

————————————懒得想小标题的分界线————————————

web app可以像原生应用一样，在home界面里上添加一个快捷方式图标，方法是增加一个link标签：

这是针对单个页面的，如果你把图片命名为“apple-touch-icon.png”，放在网站的某个目录里面，该目录下所有页面都会获得添加图标的功能……

图标的要求是尺寸57×57，png格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，iphone系统会把图片自动裁剪和渲染成统一的风格……

喔对了……不要高兴太早……这个快捷图标的功能，只有1.1.3或更高的固件版本才支持……考虑到国内那些买旧版本破解机器还被商家反复叮嘱不要升级的用户……呃……

————————————懒得想小标题的分界线————————————

关于网页中的媒体文件，普通图片最大支持200万像素（jpg的话，最大可以显示出3200万的，不过超过200万的jpg都会被压成缩略图），支持的最大尺寸是2 * 1024×1024，gif动画最大支持2m（否则只显示第1帧）

iphone支持的视频格式：

H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
MPEG-4 Part 2 video (Simple Profile)
AAC-LC audio, up to 48 kHz
.mov, .mp4, .m4v, .3gp file formats

需要注意的是这里的“Baseline profile”，由于这种编码的质量跟“Extended Profile”和“main profile”相比效果比较差，目前主流的支持“高清”（h264）的视频网站，比如youtube，土豆，都没有采用Baseline profile压缩h264视频，所以iphone不但不能播放网络上流行的flv视频（因为不支持flash），连刚开始流行的h264也不能直接播放…………提供iphone应用的视频网站无法使用现有资源，不得不压缩iphone专用的视频文件，所以不要指望能立即在iphone上观看视频网站上的所有资源……T__T

由于iphone不支持flash播放器，视频文件只能直接嵌在页面里，用自带的quicktime来全屏播放，示例：

更多细节请看官方文档：Including QuickTime In A Web Page

————————————懒得想小标题的分界线————————————

如果想全面了解iphone上的web开发，推荐阅读：

iPhone Human Interface Guidelines(官方还有一份名字类似的文档，简称OSXHIG，是界面设计者的圣经之一)

Safari Web Content Guide for iPhone

Web Page Development: Best Practices(这篇可以凑合看看，2月8号刚更新过的)

此外，ADC on iTunes里有好多iphone相关的视频，讨厌翻文档的可以去弄来看看，这可是iTunes store里少有的免费资源喔……

————————————懒得想小标题的分界线————————————

就像开头说的，这是2周前写的，一直懒得修改整齐了往blog上帖，但是昨天半夜（好罢是今天凌晨）在twitter上不小心看了iphone SDK发布的实况转播……我发现再拖延的话就只能贴到火星去了……

跟华丽的SDK相比，iphone safari上的开发环境可以说很糟糕，非常限制想象力——对javascript和RIA开发者来说，不过只要看看iphone用户上网的热情和相关数据，可以预见在很长一段时间里，iphone平台仍然会是立志开发web app的勇者们争夺的滩头阵地。

啊啊啊啊啊，2.10G的iphone_sdk.dmg终于下载完了，睡觉去……下周买《Cocoa入门–使用Objective-C》……

实际上我也没用过MAC，所以是凭想象做的，演示页面在此

右上角的导航栏是默认的效果，鼠标滑过时图标变大，会推挤旁边的图标。
下面第一排去掉了推挤效果。
第二排加入了左右移动的功能，图标的数量远远超出页面的宽度，只显示其中一部分，在导航栏上左右移动鼠标时，整个导航栏会向相反方向滑动，显示出隐藏的图标。
第三排把移动的操作改到了左右两侧的箭头，鼠标停留在箭头上时，导航栏就会向对应的方向滑动，鼠标离开箭头时滑动停止，当滑动到最末端的图标时，自动停止。

先实现导航栏的默认效果，HTML如下：

为了追求立体感，图标不能有背景色，所以必须用透明PNG图片，这里用<img>标签插入图片，是因为要实现图标的缩小放大效果（CSS背景里的图片只能控制位置，不能改变大小），图标的长宽要写在元素的style属性里，方便JS程序控制。

由于IE6不支持PNG的透明背景，必须用滤镜来做HACK才能达到一样的效果，而滤镜只能写在CSS的背景属性里…………为了解决这个矛盾，就要依靠JS了：

这个函数已经写在图片的onload事件里了，会在IMG标签的内容加载完后触发（这个事件虽好，也不能到处乱用，根据伟大的犀牛书V5，onload只支持body, frameset, img），函数先判断浏览器类型和版本（IE7支持透明PNG），先创建一个span元素，IMG标签的所有属性、事件都原样COPY到SPAN上，而PNG图片则放到SPAN的背景里，用滤镜处理成透明，注意滤镜属性里必须要有sizingMethod=scale。最后用outerHTML（只有IE支持）把该IMG替换成span。

导航栏的样式：

这样就在IE和Firefox里实现一样的视觉效果了（这里存在一个问题，为了保证图标放大后的清晰度，初始的图标都是缩小的，在IE7和Firefox里都会看到一点锯齿，而IE6由于用了滤镜，缩小的图标边缘仍然是平滑的-_____-b）

接下来做鼠标滑过的放大缩小效果。JS的动画效果一般是利用setTimeout或setInterval的延迟功能，反复循环来实现的。为了避免这些图标在运行函数时发生冲突，我把缩放的动画效果封装到了一个类里：

使用时要传5个参数：目标对象、期望达到的宽度、期望达到的高度、原始宽度、原始高度，像这样：

OK完工……如果是在FLASH里做这种推挤效果，可能还要写一大堆AS，但这里有CSS的浮动属性帮忙，就很省事……

今天终于整理了一部分以前写过的代码，我准备以后陆续在BLOG上发一些WEB交互界面方面的文章，并且逐步补充完善，争取凑出一套原创的控件库和JS效果库。如果你觉得这些东西对自己的开发有帮助，我当然非常欢迎你拿去自由使用，不过我也希望能收到反馈信息——比如你在开发中遇到的问题、或是你在这些代码基础上做的修改和补充——嗯，这也算是一种开源协议，比什么BSD什么阿帕契都要厚道罢……XD

那么先帖篇简单的：一种实现“三栏液态布局”和“圆角边框”的方法，所谓“液态布局”，就是网页内容的宽度能随屏幕分辨率/浏览器的大小而改变，自动撑满。

根据我的经验……目前网页设计中最常见的还是采用固定宽度居中对齐的布局，也就是说当用户的分辨率提高时，页面左右会出现空白，强调用户体验的WEB2.0网站们翰注重个性的BLOG们，经常会针对这些空白专门设计BODY背景和边缘。而采用液态布局的网页中，又有很大一部分是采用两栏式结构。这里我要做的，是同时包括正文、左侧栏和右侧栏，始终撑满整个窗口，中栏的宽度会随浏览器窗口的大小而变化，当然了，在IE和Firefox里不能有差别。

这是我做的效果演示：http://demo.limboy.com/3c.htm

注意：在这个页面里，圆角方块的底部已经做成可以上下拖动的了，类似软件窗口的拖动效果，方便大家测试高度的自适应效果。

首先是HTML，建立三个容器，放在一个层里面，作为左、中、右三个竖栏：

注意：中栏的DIV必须写在左右侧栏的“下面”，否则CSS就达不到效果：

左右侧栏分别采用了左浮动和右浮动，限定宽度。中栏采用居中对齐的样式，只是不限定宽度，而且左右的margin设置为侧栏的宽度，而不是auto。

需要注意的是，为了让容器高度随着内容而增加，三栏外面的容器#main也必须设置为浮动，如果它的下面还有容器，也要设置为浮动，比如演示页面中的#foot，而#main上面的容器则不需要浮动，比如演示页面中的#head和#top。

但只是这样还不够，如果在容器里面加入内容，就会发现在该死的IE里出现了一些瑕疵，IE6和IE7一样，凭这一点就可以猜测是属于layout属性BUG，经过一些测试可以证实。所以解决办法是，给#centerColumn层加入某种能触发layout属性的样式，这里我采用的是IE的专有样式zoom：

以上代码应该放在一个IE专用的样式表里，这样既不会影响其他浏览器，也能通过W3C校验 :D

用微软的专有技术“条件注释”来实现：

注释内的代码只有符合条件判断的IE浏览器会解释。

接下来在三栏中都加入若干圆角方框，作为基本容器。我的圆角方框是这样的：

样式：

为了适应各种大小，顶部边缘和底部边缘用了单独的圆角图片和横向重复的背景，而中间没有任何图片，用边框颜色和内外两个层之间的空隙颜色来做出边缘阴影的效果。

当页面里内容不足的时候，这些圆角方框都会显得不够长，可以在样式里加入最小高度来解决这个问题：

min-height属于CSS2标准，IE6并不支持，但可以利用IE6的一个最常见的overflow BUG：当容器内的东西大小超过容器时，按照W3C标准，超出的内容会“飘”出来显示在容器外面，而在IE6里容器会被撑大，所以只要直接在IE专用样式表里写.widgetCenter{height:130px;}就行了……然则，IE7修正了overflow BUG，而且支持min-height属性-_______-b…………所以，必须写成这样：

*html是某种只有IE6认识的东西……而IE7不认识……因此以上样式只对IE6及以下的浏览器生效……(随便说一下，也有一种只有IE7能识别的前缀：*+html )-_______-b

这样就做出了一个比较灵活的三栏布局，只改动少量代码和背景图片就可以适应不同的页面设计（代码重用性在网页中同样重要）。更详细的内容请自行查看演示页面的代码。

以下是html形式的代码：

菜单的CSS：

控制菜单弹出位置的JS程序：

需要注意的就是不能让菜单超出浏览器边缘，产生滚动条。

最后的效果：点这里

但是这样做的话，就必须把菜单的HTML代码写在网页面文件里，不能随时调用，如果一个页面里会出现多个菜单的话，就要每个都写一套HTML代码。如果用JS来创建菜单，并且把CSS和程序都封装到一个类里面，每次要用菜单的时候就只需要写很少的代码创建一个实例，虽然第一次比较麻烦，但以后就很方便了：

调用这个类的方法是……首先创建菜单的对象，在window.onload = function(){}或body onload=”"里加上：

注意不能写作var YYmenu = new RightMenu();那样YYmenu就不是全局的了……

接下来，根据实际需要，设置菜单的具体项目，写成一个数组：["菜单项的名称","打开方式","点击的事件"]，比如：

需要几种样式的菜单，就建立几个数组。然后，给需要右键弹出菜单的页面元素加上oncontextmenu事件和自定义属性“hasmenu”（如果没有覆盖整个页面的全局右键菜单，就不用加这个属性）， 比如：

参数“b”就是包含菜单项目的那个数组。

如果想要在整个页面任何地方点右键都可以弹出一个通用的菜单，需要像这些调用：

这里我处理的不太好，IE和FIREFOX在获取鼠标当前目标时，有一些差异还没完全理解……

最后的效果：点这里

这个javascript类的源文件：点这里

菜单的外观我就没时间弄了，如果你想把菜单做成本文左上角那副图里的效果，只要换一张背景图片，并且给每个LI加上背景就行了……

最近被经理调出来做下一个项目的前期工作，今天做了一个会员管理的页面，用来给客户做演示，“会员管理”听上去就只是那种无趣的后台页面，不过经理要求加入一些富客户端技术，因为是web2.0网站嘛-___-b ，于是我便正好借此机会练习一下:

这是今天完工的半成品，接下来还要用Ajax在页面里显示会员列表、字母查询等，把添加、删除、编辑、查询、帮助等功能都做在一个页面里，另外，还要连接一个很复杂的数据库……不过目前的页面里已经实现了几种交互功能。在这里记录一下几个问题：

2007.4.1更新：今天我从BLOGGER里转移这篇文章的时候，感觉本文后面写的一些技术问题相当幼稚，还有一些错误理解，为了避免以讹传讹，我就把这些内容删掉了：D 现在想起来，那个时候还是我第一次在开发中大量使用DOM技术。

虽然代码里遗留了很多不合理的地方，不过这个“会员管理”页面最终实现的功能和效果还是很不错的（甚至有点过于花哨了），现在已经应用在ICPS医生数据库的管理界面里，最终的效果在这里可以看到：http://68.236.165.90/index/