3月 312012
 

我们知道,引用其他人的东西需要注明出处,这包括论述文字也包括图片、视频等。然而互联网上的许多图片中并没有出处、作者等信息,需要手工加注。一般来讲,我们可以在图片外使用独立的文件记录下这些引用信息,不过这着实原始,而且可能使我们的图片文件夹显得混乱。这里说一种不同的方法,通过在图片中嵌入 EXIF 信息来达到记录引用来源的目的。由于 EXIF 算是个标准,而且是内嵌在原文件中,所以应该是个更好的选择。

EXIF 基础知识参见维基

这里使用的工具软件是 exiftool,它是一个 Perl 模块,同时提供了命令行程序。Fedora 下可以用命令 yum install perl-Image-ExifTool 安装。

具体的加入原始链接的操作示例如下:

exiftool -ArtworkSource='http://bloggersalchemy.com/sopa/' stop-sopa-pipa.jpg

之后可以用下面命令查看:

exiftool -ArtworkSource stop-sopa-pipa.jpg

另外,使用

exiftool -a -u -g1 stop-sopa-pipa.jpg

可以查看完整的内嵌信息。这条命令出自 exiftool(1) 的手册页的示例部分,更多请自行 man exiftool 之后搜索 examples

注意上面的 ArtworkSource 其实是 XMP 中的一个标签,我最初想使用 IPTC 下的 source 标签来存储原始链接。后来发现 source 的值是个长度为 0—32 的字符串(包括最后的 NULL 结束符)着实有限,它的本义也并非存储出处信息(参考指南)。另外 IPTC 算是古老陈旧了,新的 IPTCCore 规范已经使用 XMP 格式。你可能会问这些标签名字从何得知,答案是可以看 Image::ExifTool::TagNames(3pm) 的手册页 🙂

2月 162012
 

JavaScript 中数组与对象定义时最后一个元素后如果跟了一个逗号,那么可能引起问题。一个简单的例子是 [2, 3].length 等于 2,而 [2, 3,].length 在 Firefox/Chrome 中仍为 2,但在 IE (旧版)中等于 3 (它会认为最后有一个元素值为 undefined)。有关这个问题,还可以参考 Dan Lee 这篇有趣的博文,以及 Drupal 的一个 Bug 报告。而我最初是在看 GitHub 上 Hotot 的一个 Pull Request 时开始注意到这个情况。

末尾逗号的写法 C/C++ 程序员应该很习惯。末尾逗号能在改变对象中元素顺序、使用代码生成数组、拷贝代码时带来方便。然而在旧的 JavaScript 实现中,这是不允许的。根据这篇博文,IE8 里已经修复了这个 "bug"。另外,ECMAScript 5 规范里已经容许了末尾逗号,目前新版本的 Firefox/Chrome 对这个标准有良好的支持。(参见这里

值得注意的是,JSON 规范中要求不能有末尾逗号的,否则就是格式错误。JSON 不等于 JS 对象。因此,使用代码生成 JSON 格式的字符串时,采用前置逗号是更好的实践。(参考 stackoverflow 上的这个问题

1月 262012
 

CSS 是 web 设计中非常重要的一部分。CSS 也非常的强大,通过指定 media 类型,可以为不同的显示设备指定不同的显示样式。CSS2 可以识别的 media 类型中有屏幕显示(screen)、打印版本(print)、投影仪(projection) 等, 而且不止这些,参见这里。 可以期望 CSS3 会引入更多的 media 类型(比如 3D 眼镜?)。如果 media 类型是 all,则意味着 CSS 文件适合各种设备。这也是缺省设置,未指定特定 media 类型的样式规则会适用于所有设备。

可以在 HTML 文件中指定 CSS 文件适合的 media 类型:

<link href="style1.css" rel="stylesheet" media="all" type="text/css" />
<link href="print.css" rel="stylesheet" media="print" type="text/css" />

不过这样浏览器需要请求多个 CSS 文件,有人担心可能引起性能问题。 我们还有另外一种方式在一个 CSS 文件中为不同的 media 指定不同的样式规则。 例如下面的 CSS 代码使得页面字体无衬线且比较大,适合如今的电脑屏幕; 而打印版本使用 12pt 的带衬线字体,且指定白底黑字,适于打印。

@media screen {
    body {
        font-family: sans-serif;
        font-size: 16px;
    }
}
@media print {
    body {
        font-family: serif;
        font-size: 12pt;
        background-color: white;
        color: black;
    }
}

关于适合打印的 CSS 设计,alistapartmeyerweb 有不错的介绍。

CSS 指定 media 类型时还支持带逻辑运算的高级选择, 通过它可以更精细地为不同屏幕大小指定不同的样式,以更好地设计网页。 下面是一个来自 CSS-Tricks 的例子:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

其中 and 是逻辑与,逗号代表逻辑或。此外 not 也可以使用。更多的介绍参见 CSS-Tricks,事实上我还没有用到这个高级功能。

CSS 标准中有关于分页媒质特有属性和选择器 (selector) 的介绍, 然而我试图使用 :first 选择器时发现在 Firefox 9 中并不好使,原因不详。