Places I’ve been to in 2010

New places I’ve been to in 2010.

  • South Korea. Mum, Dad, Sis and I went to Seoul, and Jeju Island for a week where we finally tasted authentic Korean steamboat, and climbed the Halla Mountain.
  • Poland. A week in Krakow and Wrocław where Michal and I took on the Zakopane mountain.
  • Germany. East meets West in Berlin where the berlin wall invoke memories. Hitler’s bunker was totally unconspicously hidden underneath a carpark.
  • GeeksOnTheRoad tour took Shwetank and I to Slovakia, Budapest, Austria and Czech Republic. Best moment? Charles bridge and Viennese architecture.
  • Taiwan. Peko brought Chaals and me to Taipei for a one week developer relations tour. This is the place where the HTML5 Chinese Interest Group started.

2011 is going great as I head to Lagos, Nigeria for a week of Social Innovation Camp.

HTML5中文兴趣小组

什么是W3C

马路需要交警,网路也一样。Tim Bernes Lee在网络上有两贡献,一是发明互联网,二是成立W3C。W3C就是互联网的交警。今天HTML在不同浏览器上通用,其他前端网络技术可以跨浏览器使用,都是W3C在推动及促使这些技术的形成。当然W3C本身不去实践那些技术,这个责任由浏览器承担,W3C只是负责写规范,浏览器商,运营商,手机制造商把规范变成可以使用的东西。今天W3C负责的规范很多,包括了HTML5。

W3C有谁?

交警之所以可以指挥交通,因为政府人民付诸它这个权利。那又是谁付诸W3C这个权利?其实我也不知道,可能也就是历史因素。网络是由美国国防发明,互联网则是Tim Bernes Lee在欧洲发明。当时欧洲和美国都支持W3C,就这样慢慢演变成为一个代表性团体(想到联合国,联合国也是二战战胜国成立然后慢慢的就演变成为一个世界组织)

W3C要吃饭。W3C有300余成员,每一个成员公司按照不同的国家,利润和性质交不同的成员费。按照2007年的会费,一家印度盈利小公司可能付953美金,一家美国非盈利公司缴付6350美金而一家大型法国盈利公司或许就需要缴付65,000欧元。详情看W3C收費

W3C成员其中包括了各浏览器商Microsoft,Google,Firefox,Opera,Apple。

小组由来

W3C有70多个小组,HTML5工作小组或许是大家最熟悉的。这个小组制定你和我将来会如何写html代码。html5中文小组让html5有我们的声音。

html5中文兴趣小组的想法要谈到今年在台北举办的COSCUP/FOSS.ASIA。在八月的聚会,我有幸认识到来自Google的Pingooo老师W3C的Kenny lu兄活跃在火狐台湾社区的柏強兄。我们大家都觉得html5小组应该有一个中文通道。择日不如撞日,当时我们就拉来了W3C的联络人Mike Smith,和Opera的标准官Chaals。当场游说他们。Mike非常赞成,提出了按照程序只要两个(三个?)W3C成员公司支持小组成立就可以了。Chaals本来就是在W3C的Opera代表,立马就说Opera支持。

那时是八月,九月我应Google中国的邀请,出席了北京的Google DevFest。当时我和大陆的朋友分享了这个idea。W3C中国的安琪,纹身佬彪叔W3Ctech的裕波兄都说一定要有HTML5中文小组。就这样 我们大家就开了邮件小组,Kenny正式向W3C申请创办小组。就这样我们就开始了成立W3C HTML5 中文兴趣小组的路程。

这小组到底做什么?

W3C的70多个小组可以归类为工作小组working group,兴趣小组interest group,孵化小组incubator group,协调小组coordination group。中文小组归类为兴趣小组主要让对课题有兴趣的人交流,

Interest Groups

The primary goal of an Interest Group is to bring together people who wish to evaluate potential Web technologies and policies. An Interest Group is a forum for the exchange of ideas.

Pingooo在他的博客提到一些我们可以关注的课题,比如:

  • 直排文書的 CSS3 規格和實作
  • Ruby 的 HTML(5) 規格和實作,Ruby 就是像國小課本文字旁的注音符號那樣縮小排到本文旁邊的字。
  • Web font 的中文支援

除此之外,其他非HTML5小组也需要和我们互动,像我们也需要和他们互动。比方十月奥斯陆的小聚会我和编写W3C DAP calendar contacts API的Richard Tibbett 聊到,他也说希望可以找我们讨论在calendar API的农历做支持。同时大家觉得W3C无论哪个小组文档或规范需要听见我们的看法,不要迟疑。

还有顺便提到,帮忙申请此Kenny lu兄也将担任Ruby的编辑。

谁可以参与?

这个小组是开放制度,无论你的公司是W3C成员否,你都可以参与。看如何参与。这个小组不属于任何“专家”,大家都都是专家,大家都是学生。

如何参与?

我们非常欢迎大家参与。你可以

  1. 讨论HTML,甚至是其他技术的问题。包括CSS,SVG等。
  2. 订阅HTML5中文邮件群组
  3. 修改HTML5中文维基 (暂时性,我们迟些应该决定是否要搬到W3C那)
  4. HTML5中文小组宪章: 英文简中繁中版
  5. 也是最关键的。就是我们需要人手整理我们所讨论的成果。比方早前讨论的直排非常有用,需要有人整理出来。(有兴趣帮忙者可联络我)。

如何订阅?

柏强在维基有解释到

  1. 寄封信到 public-html-ig-zh-requestATw3.org
  2. 內文可留白
  3. Subject / 信件標題打上「subscribe」
  4. 接著會收到確認信,回個信什麼都不必打就可以了
  5. 在你發第一封信到 public-html-ig-zh 時,你需要另外到 W3C 網站上選擇是否願意讓自己的信件保留一份在主機上。
  6. 如果一直遲遲等不到自己的信件出現,別擔心,柏強也等了五六個小時 orz。

总结

邮件群组见!

WebRebuild重构人生,yay!

上周六去了WebRebuild.org主办的front end conference

感觉很好很不错,可以向一班新朋友学习,又可以借机会来北京。其实之前已经在网上读过一些人的blog或ppt,终于有机会见到真人。比方Tommy米饭Joseph定宇。当然还有有时很烦的周裕波。我这次演讲中提到的Div+CSS这个重构概念,也是从Tommy以前的演讲学回来的。

这次真的可以看到北京和中国的前端社区如此活跃,给我感觉就是一个大家庭,大家都非常relax和enjoy。这次活动其实一再让我觉得国内的程序员的一个隐忧,大家在支持standards之于,也非常担心legacy browser,象IE6,IE7对standards的阻力。同时有点surprise中国已经那么多前端尝试CSS3和HTML5,这点我觉得很respect,因为毕竟中国还是有很多人在用IE6,程序员跨出一步尝试新的standards,也是为standards尽一种力量。

我自己就分享了一些我在Opera领悟到的一些HTML5发展史,然后当然要show一些HTML5和CSS3demo。


最后一个神秘嘉宾人人叫他纹身佬,分析浏览器怎么解析一些标签的解法,其实我还真的学习不浅,搞得我自己都不好意思,做浏览器却不懂这些。还有一点就是这次听了W3C的Klaus Birkenbihl讲到RDF,还真的需要去补一补microdata,RDFa,microformat的咚咚。

Anyways,说真的,明年如果有机会一定要去。特别是周裕波哭的场面,真的搞得我很够感动。ok,废话不说我在Opera的ODiN blog也写了一个比较正统的post

前端加油!

HTML5 CSS3 newspaper demo

HTML5 CSS3 Demo

I’ve meshed up a HTML5 and CSS3 demo in the form of the New York Times. No JavaScript involved in the making.

HTML5 Video – I’m using a nice animated video called the Elephant Dream, the video is encoded in WebM. WebM is the newly announced royalty-free media file format. Google, Firefox, Opera and others have announced support for this new format. Currently WebM video works in Opera labs build, and a special Firefox nightly. Opera 10.6 beta will be having WebM support too.

Since Google is the main force behind the WebM project, we should see Chrome support soon as well. (They are the ones who bought a company called On2 Technologies, opened up On2′s video codec and made it into the WebM project).

Safari has not announced support for WebM, not yet at least. You can encode HTML5 Video in H.264 to get Safari working. For older versions of browsers that don’t support it, you’ll probably see an image placeholder.

CSS3 – Well, it’s mostly Transitions/2D Transform and Borders/Background/box-shadow. They make things such as sliding and shadow effect possible.

Transitions work in Safari, Chrome and Opera, but not Firefox. It is suggested that Firefox 4.x will support transitions. So for now, Firefox users will not see the “smooth” transitions of certain news item in the The New York Times.

The rest of the CSS3 stuff should work in all four browsers.

Web Fonts – The newspaper title uses Web Fonts. With Web Fonts, designers are not anymore limited to the font types available on a user’s computer. So now lots of funky fonts can be downloaded to the browser and displayed. It works on Safari, Firefox, Opera and Chrome. For some reasons though, Google Chrome has decided not to enable it by default (yet), you’ll need to either to turn Web Fonts on in Google Chrome or just look at plain fonts instead.

The fonts used is Old English taken from FontStruct, they have some nice creative commons licensed web fonts.

Note1: For all the CSS3/HTML5 stuff mentioned to work, best use Opera Video Labs build or Opera 10.6xbeta. Safari renders very nicely too, but without the video.

Note2: the original layout of the newspaper demo is adapted from Daniel Davis’ Japanese Web Fonts showcase.