3 月的第四个星期六,聚集在此的年轻人不会注意到深圳当日阳光刺眼,因为他们一大早就来参加 HTML5 研究小组深圳和广州站联合举办的首期 HTML5 Code Jam——HTML5 研究小组在国内首创的现场开发模式。

现场的人包括 HTML5 研究小组深圳站负责人,腾讯 Qzone 的前端老大,投资银行里的软件工程师,大四学生和一个孕妇。他们之中既有深圳本地人,也有提着行李箱从广州专程赶来的。这些对新技术抱有狂热爱好的人希望通过这种特别的开发模式,结交志同道合的技术达人。

事实上,HTML5 研究小组的 Code Jam 已经举办了很多期,他们在北京和上海两地都获得了不错的反响,譬如北京赛区的《兔子的旅行》游戏,经过两期 Code Jam 的连续开发已经成功上线新浪微游戏。这次深圳的活动是广深两站落地的第一期。

投资银行里的站立编程者

老赵是被研究小组的成员称为技术 “大牛” 的人,主业是在投资银行里的 IT 部门开发交易系统,这其实和 HTML5 没什么关系。他之所以来参加活动完全是因为对新技术的浓厚兴趣:“程序员一写代码就兴奋,而且对新兴的东西很敏感。”

其实,在企业里做技术工作的程序员也很多,只不过他们发出来声音没有互联网人发出的声音那么多。“就拿投资银行来说,每个行业其实都有搞 IT 的,但是你基本听不到他们的声音,他们可能只是埋头做事,其他行业也不像互联网那么瞬息万变,所以不会有那么多新闻出来。” 老赵说,如果比人数,金融行业方面的技术人员不一定比互联网少。

当然,老赵的特殊不只体现在职业上,还包括他工作的架势——把椅子架在桌子上,电脑放在椅子上,站立敲代码——没错,老赵是站立编程的坚决执行者。在老赵的微博上有这样一句话:“要说落实站立编程,还是我的执行力最高,当时在盛大创新院讨论站立编程,还要升降桌什么的,好像这是必要条件,结果我拿书一摞直接开始,一站大半年。”

老赵的 “格子队” 开发了一个名为 DoodlePie 的幼教类项目,主要给识图阶段的小朋友开发智力,三角形、圆形等基础图形,当然,也可以用来识别简单的字词,以及为卡通图片涂色。这个项目在最后的 Demo 中得到了完整的展现,他们在 30 个小时内做出了能够上线试玩的产品。在评比中,DoodlePie 获得了最佳策划和最佳设计两个奖项,并拿到由中青宝提供的 2000 元奖金。

对于能拉来老赵这位壮丁,DoodlePie 的组长张延感到非常兴奋。她在日志里这样写道:“DoodlePie 这个项目,在林挺的牵线下勾搭上了无所不能的老赵,走上了所谓母性的光辉之路。大牛很牛,进度基本上都是老赵在控制,而我就是一遍又一遍重复流程,重复功能点,和美工雪琪 MM 讨论素材的风格、位置,端茶送水。” 能和技术大牛并肩工作,对于一个计算机专业的大学在校生而言,机会十分难得。

虽然拿了奖,但老赵并没打算跟进 DoodlePie 的研发,对于 HTML5 的幼教类产品能否走向商业化,也并不感冒。在他看来,这些都不在他的职责范畴里。“赚不赚得到钱跟技术关系不是太大。我觉得 HTML5 挺有意思的才过来搞搞。”

他属于典型的活在当下的人,从不聊沉重的话题。“我现在为什么搞这个(HTML5)?就是觉得它有趣,既然有趣,也不太注重它未来到底有没有前途。其实我看不到它的未来,我也不关心未来。不懂商业,不懂前景。”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

腾讯工程师谈为何拥抱 HTML5

随着 HTML5 CodeJam 在开发者中的名气越来越大,活动渐渐吸引了大公司里的技术人员,比如 QQ 空间的技术总监黄希彤,大家称他为 “黄老师”。

黄希彤作为 Code Jam 的评委友情参与活动,也兼职做摄影师,时不时拿起相机捕捉活动中的亮点——本期活动的 400 多张纪录照片就出自他手。不过,这位来自大公司的 “老师” 级评委除了和大家打成一片,也让不少人有些生畏。

在场的人对黄希彤的畏惧恐怕要从其本人的一句话说起:“日 PV 不到一亿不要来找我。” 这句话不仅让参赛者不寒而栗,也让原本觊觎拉技术大牛进组的小组长们的野心落荒而散。不过,如此放言并不是黄希彤故意要耍大牌,而是他认为 “小于一亿的网站找我没有用”。

此言何意?

黄希彤在 QQ 空间所做的事,更多的不是编程,而是对新技术的科研。“技术人员通常认为编码就是技术实践,不尽如此。我会推动传输中的技术,把它们变成实际的技术灌到项目里。比如 Facebook 推出的 “多普勒” 工具非常好用,可以检测很多我们检测不到的信息。于是我来写原形,证明这个技术在理论上是可行的,说服团队去做,在编码上由他们实践。”

黄希彤认为,现在有很多 C 语言工程师,编码编得好,但是对于技术的实质缺乏理解。而自己正好和他们相反,很互补。

参赛者已经进入紧张的编程阶段,黄希彤放下手中的单反,泡一杯红茶,与工作人员聊起自己对 HTML5 的理解,当然,从他的老本行——QQ 空间前端工程师的角度切入。

“大家经常提到 HTML5 的音频标签、视频标签,其实就是告诉你音频视频怎么样放最好,标准没有限制工程师用哪些方式放,只是大家都用这样的方式,也就都统一了。” 黄希彤认为,HTML5 其实并没有带来太多新的概念,而是用一种开放的心态把一些技术规范化。

因为浏览器对 HTML5 的支持程度参差不齐,黄希彤建议 QQ 空间的前端团队用保守的方式实现新技术。“我建议他们用 HTML5 做彩蛋,做让用户眼前一亮的东西,但是不建议他们用 HTML5 技术去改变基础性的用户价值的实现。否则你就要面临一个问题——在不支持 HTML5 的老浏览器上面不兼容。”

“在腾讯社交平台上有超过 40% 的 IE6 用户,我们背着一个非常重的兼容性负担。这个时候我的基本出发点是,HTML5 的很炫的效果只能作为加分,让用高端浏览器的用户开心,又不能让没有高端浏览器的用户失落。” 黄希彤说。

对于开发者而言,HTML5 还有另一个好处——预加载,这个功能大大节省了带宽成本的支出。“HTML5 技术可以帮我们把很多计算放到客户端去做,允许我们以更低的服务器成本提供更好的服务。”

“中国的运营商卖带宽而不是流量,网站买 1G 的带宽,意思是说一天最高峰的带宽可以达到 1G。而在非高峰期的时候,也是这个带宽,这就造成了一种资源浪费。“照着 1G 的带宽向你收费,而你有一大段时间白给钱。假如能把多余的带宽用起来,就可以变成很多实际的利益,或许我们用 500M 的带宽就能解决问题。”

HTML5 提供了这样的能力,把黄希彤所述的效果变成现实。“HTML5 有一个标签叫做 Prefetch。它的特性就是用来预加载,但不是可以错峰的预加载。这个页面可以预加载下个页面的资源。而且 HTML5 可以本地化存储,把我晚上可能用到的数据加载好,存到用户硬盘里面去。”

不过,用户收到的流量有可能更多。“因为 6 点的时候预测用户 8 点会做什么事情,有可能预测错。如果预测错了,预加载的东西就没用了,也就是浪费掉了。” 针对这个缺陷,腾讯社交平台的应对方案是,根据当前用户的来源做一个判断,如果用户为手机上网或者通过 3G 上网卡上网的时候,预加载功能不运行。

在 HTML5 之前,一个有可能在技术圈流行的版本是 XHTML,但因为 XHTML 对于 HTML 的规范加入了太多的限制而始终没有流行起来。黄希彤认为,HTML5 不会再一次遭受 XHTML 类似的失败。“HTML5 已经吸取到了足够多的教训,知道有些事情不能做得太过分、太激进,不能够对老标准太不兼容,如果你按照 HTML4 的规范写,它仍然承认你满足 HTML5 的规范。”

“HTML4 已经被浏览器执行得乱七八糟,大家没有统一标准,每个浏览器有自己的理解,在上面添油加醋,导致了互联网的混乱。大家对于 HTML5 那么看好就是因为我们需要终结 HTML 4 时代各自为政混乱的场面,用一个新的标准来一统江湖。” 黄希彤道出业界广泛拥抱 HTML5 的原因。

“将来有可能各种设备计算能力会越来越强,有越来越多现在我们觉得是瓶颈的问题迎刃而解。摩尔定律继续生效,大家迎来一个美好的未来,Web App 也会像 Native App 一样跑得很快。”

且称之为 “Demo Hour

如果说硅谷孵化器中频繁上演的 “Demo Day” 是创业者面对投资人做项目兜售的时候,那么经过不到 30 个小时的封闭开发后,类似 “Demo Day” 的项目 “Demo Hour” 则是一种纯粹的技术交流和创意展示。

在五花八门的 Demo 中包括创意桌球游戏、RPG 游戏、幼儿教育涂鸦板、理财工具等等——虽然这些不一定成为下一个《Draw Something》或者《Angry Birds》,但是后两者都是在尝试了几十款名不见经传的游戏之后绝处逢生的,更何况,这些小创意并不是不起眼,他们中不乏很炫的点子。

比如从新派 RPG 游戏《Battle Heart》中获得灵感,用 HTML5 改写,并加入原作中没有的想法:在屏幕上划出特定图案触发大型招式。再比如创新桌球游戏玩法,把台球桌面从长方形变成 Z 型、菱形、不规则图形等,增加趣味性和难度系数。

“手指舞” 团队是这期 Code Jam11 个小组中的缩影。参赛者李秉骏代表自己的小组完成最后的演示,“手指舞” 的玩法与跳舞毯相似,但是触发传感器的部位由脚变成了手指。它需要玩家根据屏幕上的提示点击指定区域,动用至少两根手指操作,伴随音乐节奏变换点击的频率和位置,玩起来以后就好像是手指在屏幕上跳舞一样。

“手指舞” 虽然画风清新,创意也让现场的人眼前一亮,但是它并没有得任何奖项。李秉骏对此表示淡然,也没有丝毫沮丧,毕竟这不是涉及某个级别的投资意向,也没有任何业绩压力。他只享受整个开发的过程,“看到有人玩我们的游戏就很开心了!” 边说边露出很阳光的笑容。如果不是这样的笑容提醒了周遭的人,大家可能都会忽略掉他目前还是一名大二学生。

唐俊开是广州技术圈里被称为 “极客” 人,他的一本关于 HTML5 应用知识跟手机端 Web 开发的书即将出版。这次 Code Jam 他带来的策划不幸落选,之后被拉进做纸牌游戏的小组,他们的策划来自于日本动漫,考玩家的反应,匹对纸牌。

唐俊开说,之所以关注 HTML5 是因为它是未来的趋势。“手机品牌越来越多之后,原生应用的开发成本变高,这就必须要考虑跨平台的问题,就是说不同平台只需要开发一套应用。” 他非常看好 HTML5 的前景,也愿意为新技术早期的瓶颈打通思路,“用 HTML5 第一次打开网页可能慢一些,但是后续我们直接调用本地的文件,把所有加载的文件全部保存在本地,下次打开的时候就不需要再访问网络了。”

活动赞助方中青宝互动的总裁技术助理王祎在一旁仔细记录每一个创意,他期待它们之中有日后有可为的。他也希望能从参赛作品中找到合适的孵化项目,“中青宝有自己的孵化项目,我们也在全国各地吸取人才,如果有合适的人,欢迎他们加入。” 广东 Code Jam 的联合主办方,腾讯 Q+开放平台的于涛也表示,如果参赛者有意愿,可以把作品放到 Q+,面向市场。

“不论哪家公司能在一周五天的时间内做两个半产品,这家公司都赚翻了。” 在所有的小组做完 Demo 之后,HTML5 小组深圳站负责人林挺如是说,在他看来,这种活动不仅仅是技术交流的平台,也是 HTML5 在国内发展的推动力量。

活动结束后,李秉骏和唐俊开一同返回广州,途中,唐俊开还介绍了自己闲暇时用 HTML5 写的微博阅读器,阅读器没有被发布,“只是自己做着玩的”。

一个半小时后,两人到达广州,各自返回他们分别效力的两家创业型公司。