在一个镜头内完成的广告

一个镜头到底的广告拍摄方式真的很有趣,这是讲述 Johnnie Walker 的故事的。对比起 Intel 的,它用 walk 来表现的方式更是自然。Yeah, Johnnie Walker, The Man Who Walked Around The World. Keep Walking.

真是令人赞叹的广告创意,大概是年度最佳广告了?

极具苏格兰特色的风笛手,讲故事的人从远处漫步而来,历史的质感透过路边的摆设显露出来,背景声音也跟随故事的展开而转变,帽子样式的变换代表了起精神的转变,整体画面的色调风格,说话人的语气,节奏都很有味道。

其文案就是整个创意的主角。”What would the farm-born Victorian grocer have thought of all of this? He’d have loved it. A Victorian farm-born grocer he might have been, but he, and the family that followed him, were possessed by a fiery ambition, with the skill and intelligence to match. Two hundred years later, and Johnnie Walker’s still walking. And he’s not showing any signs of stopping.”

这个广告让我想去了解所谈及的文化特质,从而淡忘威士忌酒负面印象。

你可能感兴趣:
对广告导演 Jamie Rafn 的采访,介绍了他们是怎么在一个镜头内完成的,拍摄的地点是在苏格兰的 Loch Doyne 附近。

低调的 valueOf()

JavaScript Object 上的 valueOf() 方法,是不是看上去很冷门的样子?貌似都不怎么用的。但是,真的没有用到吗?

可能从命名上,你可以了解到它可以返回当前对象的原始值(primitive value)。Number, Date, Boolean 对象会返回其原始值。比如:

new Number(10).valueOf() === 10  // true

作为 Object prototype 上的方法,它够低调的了。低调到用了都不知道。因为实际上,你几乎用不着去调用它,在需要的时候,会被自动调用。比如,进行比较操作,看下面的代码。 继续阅读“低调的 valueOf()”

IE 中对 toString 的双重标准

使用 for .. in 遍历对象,似乎没什么好说的,不过还是有例外。在各个浏览器里面跑下面的代码:

var obj = {
    toString: function() {
        return "custom.toString()";
    }
}
for(var i in obj) {
    alert(i);
}

它们都会 alert 一个 toString,除了 IE。一开始还以为是加载慢,后来才认识到,其实 IE 并不把它当成是一个自定义的对象方法。同样的情况也发生在 valueOf() 方法上,可以猜想,IE 可能把它当成是 native 的了。
Quick Fix – Internet Explorer and toString problems 里面,介绍了使用条件注释(conditional comment)的方法来解决。 继续阅读“IE 中对 toString 的双重标准”

为什么需要更好的网银?

对于有关浏览器的事情,对于我这个整天和浏览器打交道的人来说,真是太有感触了,加上近日社区里面提出了希望各银行的网银提供对更多种主流浏览器的支持的呼吁,我那是一千万个支持,而且不仅希望网银的支持,更加希望扭曲的浏览器市场分布变得更加合理。

以更好的用户体验畅游于公开,开放的互联网,这是多么美好的事情,而这不仅仅是美好的想象,而是切切实实影响我们生活的趋势,我们应该鼓励实践这个美好愿望的行为。比如在 Mozilla 基金会的大力支持下,Firefox 发展迅猛,已经从苦涩的过去走出来成为浏览器中的明星,让我们认识到什么是好的浏览器;Chrome 以 google 的全球战略作为背景,异军突起,成为当前最潮的选择。

除了看到他们,我们还可以看到由此而起的诸多改变。 继续阅读“为什么需要更好的网银?”

蜡笔小新也可以很感动的

太久没看蜡笔小新了,偶然间发现了《蜡笔小新剧场版之大人帝国反击战》,开场蛮有意思的,小新一家 + 世博会 + 超人打怪兽的 crossover,接下来竟然峰回路转……

也许蜡笔小新是个教育有问题的无聊小孩,但也无碍于他对幸福生活的味道的把握,对未来的执着。下面这个是粤语版本。

Chrome,为什么第二张图片看不见呢?

在测试的时候,建立一个最小测试集对于测试调试是很有帮助的。

为了测试与图片装载相关的内容,建立了下面的页面。内容很简单,就是动态添加两个 IMG。

<html>
<head>
    <title>Test Loading IMG</title>
    <style>body { background-color: #00F; }</style>
</head>
<body>
<script>
function show() {
    for (var i = 0; i < 2; i++) {
        var img = new Image();
        img.src = "chrome.png";
        img.title = "Image here";
        document.body.appendChild(img);
    }
}
setTimeout(show, 1000);
</script>
</body>
</html>

用各种浏览器(IE6 除外)打开,理论上应该不会出什么乱子。

但是竟然发现在 chrome 里第二个图不见了。实际上图是在那里的,只是看不见,鼠标移上去,title 是能正确显示出来,进行全选操作之后,图就出现了。

当然,实际页面中不会只有两个 IMG,只要在 body 内加一个字符如 a,chrome 就可以正常显示了,-_-!!

当前我的 chrome 版本是 7.0.517.41 beta,估计会有人跟我说 chrome 更新这么快,beta 嘛,难免的。

希望 chrome 越办越好啦~

IE 中 png 黑底(半透明失效)的那点事

早有听闻 IE7+ 是支持 png 的,用下来感觉也还可以。但忽然之间,发现有一张 png 图片莫名其妙地黑底了,最先想到的是 png 的输出设置可能出现问题,于是试了 N 种设置黑底,只是黑底的形状有点不太一样,相当纳闷。没办法了,还原基本步。

<div id="box">I Believe</div>
<style>
#box {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png) no-repeat;
    color: #FFFFCC;
    text-shadow: 1px 0 2px #897461, 0 1px 2px #897461, 0 -1px 2px #897461, -1px 0 2px #897461;
    filter: Dropshadow(offx = 1, offy = 0, color = #897461) Dropshadow(offx = 0, offy = 1, color = #897461) Dropshadow(offx = 0, offy = -1, color = #897461) Dropshadow(offx = -1, offy = 0, color = #897461);
    
    height: 200px;
    padding: 5px;
    width: 200px;
}
</style>

这个应用场景很简单,有一张 png 作为背景图,上面有些文字,对文字施加了一些发光效果(实际上阴影来实现)。在 firefox 和 IE 下的表现见下图: 继续阅读“IE 中 png 黑底(半透明失效)的那点事”

Javascript 中的 proxy 实现

现在写代码都有个倾向,尽量用简单逻辑,短小的词汇来构成,甚至用到了大量 shortcut (叫 短名 ?),比如多种浏览器都提供了 console API,用来做 log 是不错的,但是到处都 console.log(…) 并不怎么理想,如果可以缩短成 $.log(…) (使用 jquery )就挺好的,而且还有利于屏蔽各种浏览器的差异,随意控制是否启用日志监控。

这里就是需要将 console.log 转换成 $.log,当然还有其它如 error, info。最简单的想法就是

if (window.console) {
    $.log = console.log 
} else {
    $.log = function() {}
}

不过,这个做法仅仅得到 firebug 的支持,在 webkit 中会报告 Uncaught exception,那尝试提供一个 console 的 proxy?
在 Java 中真是小菜一碟,js 里也不难:

$.log = function() {
    console.log.apply(console, arguments);
}

不过,问题就是怎么看,怎么不优雅,太啰嗦,还是原来那个对象,apply 后依然是 console, 还是那个方法,log,实际上就是传递一下参数。是不是有点蠢了。

然后,就没有然后了。我没办法让它更优雅了。

想要得到一个缩略的用法 $.log(…),是有代价的,不过还是值得的。

另外,基于以前的实验,大量的 apply 会明显影响性能,所以,apply 有风险,使用需谨慎。

No.19 苏州博物馆

作为苏州市民休闲的好地方,苏州博物馆的设计真的非常赞。

第一次去动机不纯,那时正值仲夏,只想找个地方避暑,后来还演变成避雨。一进去立马就感受到,虽然看起来人不少,但空气清凉,体感很舒服,这其中应该有建筑设计的因素在里边。里面的出风口并不是镶嵌于天花板中,而是在地上靠墙的,头上就显得特别开阔了,室内采光很充足,所以那吊灯装饰成分更大一些。

室内的水池让人看见就像坐下来好好休息一下 继续阅读“No.19 苏州博物馆”