我先打开了 GIMP，把用的背景图片打开，取了颜色，发现颜色就是其他部分的颜色。我就奇怪了，从数值上说应该是一样的才对。然后我就取了 Firefox 里面的色，发现 Firefox 里面图片对应位置的颜色被修改了？！

下面是一个关于这一 bug 的演示：

如果你看了觉得看到的是一个完全的纯色的区域，那么说明你没有遇到这一问题。但如果你看到不是一个纯色区域，那么就说明你也遇到了同样的问题……找了一圈，没有发现相关的中文资料，觉得非常无语，难道都没人发现这么严重的问题么……

在英文资料中我倒是找到了些头绪。首先，Mozilla 表示这是一个 Feature 而非一个 Bug！他们声称这是在 Firefox 3.0 中引入了默认的颜色管理 (Color Management) 和颜色矫正 (Color Correction)，但默认被禁用，而在 Firefox 3.5 中由于效率的改进将其默认设置改为对于部分图片打开了。根据 Mozilla 官方的资料来看，这无疑是一个很好的进步，因为它使得 Firefox 显示的色彩可以和这一图片反映的真实色彩一致，使得这一图片无论在任何平台或者任何显示、输出设备上得到的颜色都是一样的。可是可是，问题是，如果 Firefox 和 GIMP 上显示的效果不一样，而 Firefox 又是正确的，那么 GIMP 作为可以在大部分场合取代 Photoshop 的图片处理软件的颜面何存呢？所以显然错的是 Firefox……

在官方文档的最后，我们终于找到了，Mozilla 承认这是一个 bug，并且辩称仅仅是因为只支持到了 ICC 第二版，而没有支持到第四版导致的“图片可能偏暗” (This may result in images being too dark.)……Firefox 啊 Firefox，真不是我说你，ICC 第四版早在2001年就发布了，你既然准备支持了还不直接支持到完全，结果搞出这么个莫名其妙的 bug 还好意思说是 Feature……

说的差不多了……最后是解决的办法：对于用户来说，如果遇到这种情况，可以直接在 Firefox 的设置里面调整使之不自作聪明的进行错误的颜色矫正。只要打开 about:config，然后找到 gfx.color_management.mode 一项，将其值修改为 0 并重新启动 Firefox 即可。至于网站制作者，可以通过去除所有可能激活 Firefox 颜色矫正机制的信息来解决，对于 png 图片来说，就是安装 pngcrush 软件，然后对图片运行下面命令：

1

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB 输入文件.png 输出文件.png

这件事呢，不禁让我想起了当年 IE 浏览器（8以下）对于 gamma 值的误读，也是自作聪明地来矫正颜色。这次 Firefox 的做法和当年的 IE 几乎如出一辙，实在是不能不让人感到失望啊。

参考资料：

• ICC color correction in Firefox – MDC
• color correction for images in Firefox 3.5 ✩ Mozilla Hacks
• ICC profile – Wikipedia
• Pixel Acres » Fixing PNG Gamma

最后，来看看你的浏览器和系统是否支持 ICC 标准了？里面还有一个 PDF 文件用于测试你的 PDF 阅读器。根据我的测试，Firefox 3.5（被我调整过设置的）、Chromium 5.0、Opera 10.0 无一支持 ICC，Firefox 3.5（默认设置）倒是可以正常的显示下半部分（ICC version 2），不过 Ubuntu 默认的 PDF 阅读器 Evince 倒是支持的很正常，看来 GNOME 还是很牛X的~

我猜从来没做过网站的人一定会觉得这个很简单，但我觉得一点都不简单……不过似乎可以实现~这种无疑又是对我技术的一次挑战！

一开始，我想用一种十分取巧的方式——直接用 Google Maps~探究了一段时间的 Google Maps。结果虫子要求：一是地图要暗，二是要出来的是亮点。想想，Google Maps 还是算了呃……（话说其实也不是不可以，不过实现了，很多数据从客户端走，也不大好）。不过像 Google Maps 这样极好的地图图片来源实在是太难得了！于是就直接用了~

首先要攻克的第一个问题是，如果我们知道来访者的经纬度，如何知道把他的点点在地图的什么位置？这是一个很神奇的问题，想想经纬度是为球面设计的，现在要把它转换到一个平面上。说来也巧，原来参与过天文软件 Stellarium 某个版本的翻译工作，正好翻译了其中被称作地图投影的部分。因为有好几个不同的投影方式，我渐渐就明白了，那个就是把球面图形映射到平面的方法！于是就找到了地图投影，经过查询，发现 Google Maps 使用的是 Mercator projection (麦卡托投影法/墨卡托投影法/正轴等角圆柱投影)。找到了投影法的名称，自然转换公式不是难事~不过这个公式看不懂……呃……算了，那些公式显然不在我现在的数学水平能够理解的范围之内，直接用好了……

用前面探究到的 Google Maps 的东西，写了个网页，对比了一下 Google Maps 转换的坐标和我的程序转换的坐标之间的情况，发现基本相等，有一部分会出现 1px 的差异，我就直接忽略之了~在调试这个程序的过程中，比较重要的大概就是 PHP 里面的三角函数相关的函数使用的都是弧度，而我们习惯上使用的经纬度都是角度，这样就需要一点点的转换了……好在 PHP 提供了 deg2rad 这样方便的函数~话说我的地图投影这个程序我把它单独分了一个文件出来，主要是里面定义了各种地图转换需要的常数，如果和别的功能合在一起大约看过去会比较乱……

下面遇到第二个重大的问题是：我们如何知道来访者所在的经纬度？！这个问题似乎比上面那个更复杂了……当然你可以直接请来访者告诉你，不过更好的方法显然是根据 IP 地址识别一下。不过说到 IP 地址的识别精度，那我也无奈了。我猜想在 IPv6 普及前，想要准确根据 IP 地址识别出位置大约是不可能的了。不过，可以接受的精度还是可以实现的~国内的 IP 数据库如纯真这样的，提供的都是一个字符串地址，那个是只能给人看的，电脑可不知道那些东西表示什么……于是就转向了国外的 IP 数据库。果然找到了些有趣的数据库，里面能包含 IP 可能对应的经度和纬度，而且还提供 CSV 下载，可好了~这里可以找到这个好东西：IP address geolocation SQL database :: IPInfoDB。然后我需要一个可以提供 PHP 快速查找的文件。其实这个事情第一次做音乐投票系统的时候，为了限制投票 IP 在福建境内，就做过这个东西。思路也很简单：把每个 IP 段的数据变成定长的二进制数据，然后需要的时候二分查找~于是有了下面的转换用 Python 脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#!/usr/bin/env python
# - * - coding: UTF-8 - * -
 
import csv
import struct
import sys
 
fin = open('ip_group_city.csv', 'r')
c = csv.reader(fin, delimiter=';', quotechar='"')
fout = open('ipdata.dat', 'wb')
c.next()
a = 0
s = []
for r in c:
  a += 1
  s.append(struct.pack('>Iff2sh',
      int(r[0]),
      float(r[7]), float(r[8]),
      r[1], int(float(r[10] or '0') * 2)))
  if a % 10000 == 0:
    fout.write(''.join(s))
    s = []
    print >> sys.stderr, a,
fout.write(''.join(s))
print >> sys.stderr, a
fin.close()
fout.close()

这样，就当获取经纬度差不多了吧~嗯~虽然那个精度实在不敢恭维……不过根据那个网站自己的数据，至少国家是不会弄错的（准确度 90%+），只是城市就不跟你保证了~（那个数据貌似显示，这个数据库中城市在中国只有 71% 左右是正确的……）。

最后是关于地图的最后一个问题……如何绘制？

经过考察，这个小网站未来要放的那个服务器是不支持 ImageMagick 的，于是只能用 GD 库了……

那个小点点，其实就是圆咯。于是我一开始用 imageFilledEllipse 函数在地图上画直径为 3px 的圆。不过那个的效果实在是不大行……另外一件事就是关于上传照片的问题，某些相机比较囧的都把照片方向弄在 Exif 里面……虽然 PHP 有很方便的库可以直接读取 Exif，但旋转和翻转就麻烦了……

关于 GD 库，有一件事我觉得很无语，那就是有好几个比较有趣的函数，如 imageAntiAlias、imageRotate 下面都写着：

Note: This function is only available if PHP is compiled with the bundled version of the GD library.

于是就各种囧的不能在我自己机子上调试……目标服务器的 GD 库倒是符合条件，不过我发现其实想要通用还有一种很好的方法：在 Notes 里面找！通常不能通用的函数在 Notes 里面都有相应的通用解决方案~这次我在 Notes 里面找到了图片翻转、旋转、判断 Exif 方向、平滑绘制圆的函数~我觉得有些时候，下面的 Notes 比上面的文档要有意义的多……平滑绘制圆的函数，我为了半透明又改了一点。当然，改的不完美，也就不敢拿出来献丑了，勉强能用就是了~

此外，还抄来了 WordPress 里面一段创建不同大小图片和创建缩略图的代码，很好用嗯~话说，太久没写 PHP，很多东西都忘的差不多了，比如说输入的数据中有单引号会自动被 PHP escape 掉，这还让我苦恼了一下呃……

另外就是，设计中虫子给我提出了一个神奇的要求：跟 twitter。为了这件事，我进行了各种不和谐的活动，以了解 twitter 的 APIs……然后用了一个带缓冲的转接程序弄好了。

至于客户端部分，我再次使用了 jQuery，jQuery 果然是个好东西。而且为了上传，我又使用了 Uploadify。有赖于上一次做音乐征集系统的经验，这次少走了不少弯路，而且大量的 IE6 的 bug 也被我巧妙地解决了~而且我发现 IE6 的某些莫名其妙的 bug （比如我在制作过程中遇到了一个 div 明明 right 是 0，却超出右边界很多）都可以通过设置 zoom: 1; 来解决……不知道 IE6 这种莫名其妙的浏览器到底是什么样 SB 的团队制作出来的。IE 曾经是带领万维网发展的，现在却成为了严重的阻碍者！用 IE 的孩子们赶快觉醒吧……我真得不想在为了 IE 花掉大把的时间调试了……

顺便说一下新发现的 IE6 的 bug（其实我也不知道是不是我新发现的……）：还是隐藏显示的问题。是用 AlphaImageLoader 这个 filter 的元素隐藏后显示，这个 filter 的效果会消失，也就是没用了……为了这个 bug，这次不得不在脚本中都加入了 ie-fix……而且，更严重的是，如果你在显示后再设置这个 filter，又会出现另外一个 bug：这个时候，被设置这个 filter 的元素内部的所有元素可见，但变成不可用，也就是好像点不到一样！我估计是这个 filter 变成了一个在元素内部最上层的一个东西，于是就挡住了其他所有的元素。我汗啊，IE6 的 QA 是干什么吃的啊……这个的解决办法说来也简单，另外弄一个 div，设置在同样的位置，同样的长宽，对他用那个 filter 就行了……

对了对了！说到 AlphaImageLoader 这个 filter，我又想起来一件事，证明了百度不适合用来搜索技术资料，至少比 Google 逊太多了：你分别在这两个搜索引擎里面输入“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”，我把结果贴出来：

请认真对比我的关键词和两个引擎的结果，你会发现：百度第一页没一个是我要找的，甚至连一个完整匹配的关键词都没有！难道是我的关键词是我瞎编的？不，你看 Google 的结果吧……嗯……事实胜于雄辩，百度众自重……

整个网站的代码，可能在经过完善以后会公布，也可能不公布。由于这次的东西不是做给自己的，所以不能完全我自己说的算了……

参考资料：

• Google 地图 API – Google 代码
• What type of map projection does Google use for Google Maps – Google Groups
• Mercator Projection — from Wolfram MathWorld
• MaxMind – GeoIP City Accuracy for Selected Countries
• Twitter API Wiki (请自备专用工具访问)

我要记录下在这个过程中遇到的种种问题和解决方法，以后再遇到就有地方查了~

客户端部分

很早就听说了 jQuery，上次看完 wp-codebox 的代码才顿觉 jQuery 的强大，因此这次选择了这个。经过短暂的学习就基本了解了，还是比较简单的。此外，jQuery 的插件库相当强大，里面找到了所有我需要的东西，包括上传文件的插件和播放器的插件等。

编写客户端代码最艰苦的部分就是配色和设计界面，以及在各个浏览器中调试。关于兼容性的问题放在后面说，前面先写点关于 JavaScript 代码的事。

第一个比较有趣的问题是关于浮点数保留精度的问题。虽然保留精度大是件好事，可是 JavaScript 没有如 C 中的 printf 那么方便的东西（不过网上似乎也有类似实现，不过 JavaScript 实现这个东西……还是算了吧……）。而一下把很长很长的浮点数显示在用户面前，也绝对不是件好事。经过搜寻，最后使用下面代码实现：

1
2
3
4
5
6

Number.prototype.fix = function (num) {
  with (Math) return round(this.valueOf() * pow(10, num)) / pow(10, num);
};
String.prototype.fix = function (num) {
  return parseFloat(this).fix(num);
};

第二个问题就是关于 MP3 播放器背景的问题。我用的这个播放器插件极具可定制性，背景色和前景色都能定制，不过要求都要使用十六进制的形式传入。为了更好的适应主题颜色，我就使用 jQuery 的 .css 方法在脚本中现场获取当前在 CSS 中定义的前景色和背景色。结果发现，其在 Firefox 内返回的是类似 rgb(0, 0, 0) 这样的颜色表大形式。据说在 Firefox 中永远放回这种形式，而 IE 中则总是返回你实际设置时使用的格式。针对这个问题，我写了下面代码来解决（毋庸置疑，这又是抄的）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var hex = function (n) {
  if (n == null) return '00';
  n = parseInt(n);
  if (n == 0 || isNaN(n)) return '00';
  n = Math.round(n);
  if (n < 0) n = 0;
  else if (n > 255) n = 255;
  return '0123456789abcdef'.charAt((n - n % 16) / 16) +
         '0123456789abcdef'.charAt(n % 16);
};
var color2hex = function (color) {
  if (color.search(/rgb/i) > -1) {
    color = color.substring(4, color.length - 1).split(', ');
    return hex(color[0]) + hex(color[1]) + hex(color[2]);
  } else if (color.charAt(0) == '#') {
    color = color.substring(1);
    if (color.length == 3) {
      return color.charAt(0) + color.charAt(0) +
             color.charAt(1) + color.charAt(1) +
             color.charAt(2) + color.charAt(2);
    } else {
      return color;
    }
  }
};

另外就是，为了防止大家大量重复提交同样音乐，这次加入了搜索功能，而且在提交一个音乐的时候就会自动进行搜索，并提示用户检查是否已有相同曲目被提交。至于搜索的实现，采用的是客户端搜索，算法上采用了非常著名而简单的 LCS (Longest common subsequence, 最长公共子序列) 这一 oier 的居家旅行杀人放火必备算法。事实证明，这一算法其实是很有效的~

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function lcs(str1, str2) {
  if (! str1 || ! str2) return 0;
  var arr = [];
  var i, j;
  for (i = 0; i < str1.length; ++i) {
    arr[i] = [];
    for (j = 0; j < str2.length; ++j) {
      arr[i][j] = Math.max(i ? arr[i-1][j] : 0, j ? arr[i][j-1] : 0);
      if (str1.charAt(i) == str2.charAt(j))
        arr[i][j] = Math.max(arr[i][j], i && j ? arr[i-1][j-1] + 1 : 1);
    }
  }
  return arr[str1.length-1][str2.length-1];
}

搜索算法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function search(type, text, callback) {
  text = text.replace(/\s+/g, '').toLowerCase();
  var threshold = text.length * 0.25;
  var result = [];
  getList(type, function (value) {
    if (! value || typeof value == 'number') {
      callback(value);
      return;
    }
    var itemtext, item, i;
    for (i = 0; i < value.length; ++i) {
      item = value[i];
      itemtext = (item.source + item.title).replace(/\s+/g, '').toLowerCase();
      item.len = itemtext.length;
      item.lcs = lcs(text, itemtext);
      if (item.lcs > threshold) result.push(item);
    }
    result.sort(function (item1, item2) {
      if (item1.lcs > item2.lcs) return -1;
      if (item1.lcs < item2.lcs) return 1;
      if (item1.len < item2.len) return -1;
      if (item1.len > item2.len) return 1;
      return 0;
    });
    callback(result);
  });
}

还有一个是关于换肤的。上一次有一篇文章测试过了基于更换 link 标签 href 属性换肤的可行性分析，这次就应用于了这个平台上。但在测试中发现 IE 并不像想像的那么完美。事实上，IE 在这个的测试过程中是非常废品的，几乎相当于不能换。经过多次实验，发现原因出在——IE6 在页面加载完毕后永远不会显示其还没有下载的样式信息。也就是说，更改 href 后，虽然 IE6 将原来的样式表无效化了，但此时发现新的样式表不在其缓存中，便拒绝启用新的样式表。但奇怪的是，IE6 这个时候事实上会连接服务器下载新的样式，因此在下一次访问的时候上次点过的皮肤就可以用了。这说明，我们只要要求 IE 预装载以后可能用到的东西就可以了。因此我就在页面底部加入了一个隐藏的 iframe 用于下载样式表和需要的图片。

除此之外，就是一些关于样式的新发现。我第一次知道当一个元素的 position 属性设置为 relative 的时候，对这个对象本身没有影响，但却使得其使用 position 属性的子元素的位移变由相对页面的位移变为相对该元素的位移。这的上传进度条的实现方法便是应用这一机制。

说到上传进度条，不得不说 Uploadify 这一插件真的很强大……我将其默认的上传进度和管理通过对各个必要函数绑定返回 false 来屏蔽掉了。

最后是关于 jQuery 优化的问题。虽然 jQuery 的官方测试表明，jQuery 的效率非常惊人，但优化下总归是有好处的。参考的资料见下面了，说说我大体做了哪些优化吧。一是缓存 jQuery 对象，防止重复调用选择器带来的性能损失。第二个是为选择器加上上下文限制，第三个是将部分效果移至 $(window).load 里。

在客户端的脚本部分的最最后，小小的埋怨一下 JavaScript 这个语言……我觉得实在是没有 Python 优美啊！什么时候 Python 能成为通用的客户端脚本啊，那个时候用 Python 就可以通吃服务器端和客户端了……

说完了脚本，来说说这次的界面。这次界面个人还是很满意的。在界面设计中，我自认为值得一提的是那个圆角，为什么呢？因为我以前一直以为 GIMP 不能画圆角。这次去网上找了才知道，GIMP 远比我想象的强大的多！猜猜圆角是怎么画出来的？是通过高斯模糊+调整色阶。具体的实现方法放在下面参考资料里面了，这里就不详述了。但我真的觉得很强大，虽然 GIMP 和 Photoshop 等商业软件还有差距，不过对于我来说，看来足够了。

最后再提下这次发现的不同浏览器的兼容性问题：

对于不显示的 Flash，IE 无法与其交互

对于曾经被隐藏但再次出现的 Flash，IE6 无法与其交互

解决方案：完全销毁原有 Flash 对象并重建

IE 中隐藏的 Flash MP3 播放器可以发出声音，但 Firefox 不行

解决方案：统一的办法就是直接销毁播放器，而非单单让其隐藏

IE 的 JavaScript 解析器不支持用 [index] 的方式索引字符

解决方案：使用原有标准的 .charAt(index) 方式索引

在 IE6 中，显示时尚未下载完成的 CSS 元素永远不会显示（如背景图片）

解决方案：在页面中加入一个隐藏的 iframe 用于预加载

IE6 中的双倍外边距 bug

解决方案：给相应对象加上 display:inline; 属性，或通过 hack 专门调低在 IE6 下的外边距

IE6 对于 display 的 inline-block 属性支持不完善

解决方案：给相应对象加上 zoom:1; 属性

IE6 不支持半透明的 png 图片

解决方案：采用 IE 专有的过滤器 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 可以完美解决

IE 的兼容性烦死人啊……看看我的 ie6-fix.css 和 ie7-fix.css 就知道了……

使用部件

• jQuery: The Write Less, Do More, JavaScript Library
• Uploadify – jQuery File Upload Plugin Script
• SWFObject
• jMP3: Sean O’s JavaScript MP3 Player / jQuery plugin
• JSON plugin for jQuery

参考资料

• jQuery中文入门教程
• 如何格式化浮点数计算结果 JavaScript – CSDN社区
• jQuery.sifrSettings
• jQuery性能优化指南 (全部) – 烟雨博客
• 1.3 圆整圆角 – The Gimp – 思魂轩
• Uploadify • View topic – Uploadify doesnt fire uploadifyUpload/uploadifyClearQueue
• IE6下margin双倍问题 – 绯雨的天空
• Making Internet Explorer use PNG Alpha transparency

写下今晚的收获吧……

首先是很早以前就知道的，IE 里面隐藏的 Flash 会被无效化，也就是什么都做不了。放在今天就是，如果我想让那个上传用的 Flash 消失，后果只有一个——上传无法进行……这是非常无奈的事情，而且更重要的是，IE6 和 IE7 皆为如此。

但与 IE6 抗争更艰苦一点：在 IE6 中，只要一个 Flash 曾经从界面上消失过，这个 Flash 就不可用了，至少是不能用来上传了，不能调用其相关函数了……这是一个非常严重的 bug！这意味着，只要其消失一次，就要删掉原来的 object，重新创建。这件事是我今天好不容易才查到的：Uploadify doesnt fire uploadifyUpload/uploadifyClearQueue，非常佩服发现这个 bug 的牛人……

然后最后一点，是如果一个 Flash 在建立之时就是隐藏的，似乎也会出问题……不过不是很确定……

唉……IE6 啊 IE6……我多么想像我在我的首页做的那样直接把你屏蔽掉啊……

不过我的美术不怎么样，让各位见笑了……这是我两三天之内赶制出来的，因为拖久了最后又是没结果……

特别的，这次完全取消了对IE6的支持，如果用IE6访问这个页面，会自动跳转到下面的页面：

即不允许IE6访问。

为什么要这样呢？主要是中间那个大图是png半透明的，IE6不支持。当然，我知道有不止一种方法可以解决这一问题，但我无论如何都不想继续忍受IE6这种愚昧的浏览器！因此选择了不支持……

最早是Neipoor初稿设计的，后来为了体现交流，对其设计做了些许修改，就成了现在的样子。主要修改在几个地方：一是宽度由原来的1024减为980；然后是在那边加了两国国旗；还有就是给那三行字加了我很喜欢的投影效果~另外就是加了很美的鼠标放到链接上时会有发亮的效果，不过IE不支持（使用IE7测试），我的Firefox和Opera都支持。据说支持没有href属性的标签使用hover伪类是CSS2的特性，所以IE不能完全支持……另外就是加了下面的footer，是我后来使用Neipoor留下的素材独立制作的，个人觉得效果蛮赞的说。

这次里面的导航栏完全没有使用A标签或者MAP标签，而是用了新的方式——DIV+Javascript。我个人觉得这种很大的好处是链接放置的位置相当自由，而且很符合我要在背景图上放链接的要求。这次的排版是靠TABLE排的，不过可以几乎认为是absoluted的DIV。个人觉得这次做的不错~