Junyu: How the mash-up was created 俊煜：当我们搞在一起

Create a web page to collect all user generated content tagged with "#080808" all over the world? This idea seems incredible at first glance; but actually, with open APIs provided everywhere in the Web 2.0 world, it's very easy to achieve this!

All of these works started from the wire frame design I sent to those genius campaign co-founders, flypig, webleon and babechloe on the afternoon of Aug 7th:



At midnight, I began to actually work out this idea. I started with writing HTML + JavaScript, who are responsible for structures and contents in the page. You geeky guys might be interested in how we made use of various APIs:

• Use Twitter Search API to get search results of "#080808" on twitter, in json format;
• Get search results of "080808" and "080808 icon" via Flickr API and Flickr feeds, both in json;
• Burn search results from Technorati and Google Blog Search into a single json feed, using Yahoo Pipes;
  
• Use Google AJAX Libraries API to load jQuery, a JavaScript library. Then use jQuery to render all these raw datas into HTML;
• Finally we let Google AJAX Feeds API to read feed from this official blog, and display latest updates from it on the mash-up.
  

After all these works we got a "naked" site which works well but looks pretty... ugly. OK, I requested some assets from flypig, then started to do the web design work. Made designs in Fireworks, exported the graphics, wrote CSS codes...

Before sunrise, we have got all things done, and the application went live.

Here's our outcome: http://tag080808.appspot.com

The application is deployed on Google App Engine. But, to be honest, we haven't utilized any server side technology yet. This is just a static HTML page, with all dynamic contents loaded by JavaScript. In this case, if you want to make an exact copy, simply save this page and upload it to your own server. You could make any improvements as you like too.

Given the limited time, we do think there are a lot of space for improvement here. For example, there are various powerful but easy to learn Google APIs suitable for this kind of mashups: AJAX Search API, Maps API, AJAX Languages API, and Chart API. More information please visit Google's API directory.

Mash-ups are really wonderful, they could pull informations from various sources and make best use of them. Web 2.0 does not only mean gradient logos, persistent beta tags and tag clouds, but also means openness.

Hope Chinese Web 2.0 sites could be more open too, so that next time when we create mash-ups, we could pull more content from Chinese sites too...

在几个小时之内搞出一坨页面来收集全球网友发布的带有 #080808 标签的内容？乍一听可能觉得不可思议，但在 Web 2.0 时代纵横交错的各种 API 的帮助下，做起来其实是非常的简单呢！

8月7日那天下午我一边在搞 Google 的“北京夏季运动会”页面 (也是一个mash-up哦)，一边就在 twitter 看到了 flypig、webleon 和 babechloe 的 #080808 这个 idea。“好棒的主意！”我想，“可以做一个更 fancy 的首页把网友们的参与给 show 出来。”于是我在 Gmail 里面给这几位天才的创始人发了一个草图，原始文献如下所示：



8月8日的凌晨我开始动手搞这个。最先动手写的是 HTML + JavaScript，它们决定了页面的结构和内容。Geeks 同学们可能会对我们如何使用这些 API 的细节有兴趣：

• 用 Twitter Search API 拿到了 twitter 上 “#080808”搜索结果的数据，json 格式；
• 通过 Flickr API 和 Flickr Feeds 拿到了 Flickr 的两个数据，一个是“080808”的搜索结果，另一个是“080808 icon”的搜索结果，都是 json 格式；
• 用 Yahoo! Pipes 把 Technorati 和 Google Blog Search 关于“tag080808”的搜索结果烧录到一块, 同样输出成 json 格式的数据；
• 用 Google AJAX Libraries API 加载了 jQuery, 利用 jQuery 把这些 json 格式的数据 render 成 HTML;
• 最后用 Google AJAX Feeds API 把我们这个官方 blog 的 feed 加载进来。

这一步工作完成了以后就有一个裸奔的站点出现在我们眼前啦——功能齐备，就是丑得不堪入目。找飞猪老师讨来设计素材，在 Fireworks 里面做了一些简单的页面设计，输出图片，写 CSS……把它打扮得漂漂亮亮, 就赶在黎明前出街鸟。

这就是我们的成果：http://tag080808.appspot.com

虽然这个 application 放在了 Google App Engine 上，但其实到目前为止我们都没有用到任何服务器端技术。整个页面就是一个静态的 HTML 页面，所有动态的数据都是用 JavaScript 读入的。所以电视机前的观众朋友们，如果您想 copy 这个站点的话，把这个网页直接保存下来然后上传到自己的服务器就可以啦。我们也欢迎你动手做一些改进，时间所限，这个 mash-up 确实还有很大的改进空间。像 Google 就还有许多容易上手又非常强大的 API 可以利用，比如说 AJAX Search API、Maps API、AJAX Languages API 还有 Chart API 等等……详情请参见 Google 的 API 目录页 。

Mash-up 真是很好玩也很有用的东西，把散落在网络四处的信息放在一起重新组合，这本身就是一件很神奇的事情。 Web 2.0 不仅仅意味着半透明渐变 logo，永不消逝的 beta 标签和标签云，像这样的开放性也是 Web 2.0 基因的一部分。

也希望国内的厂商也能多一点开放性，这样子下次我们或许可以显示更多来自国内网站的内容。

Keep #080808-ing 继续#080808

More than 5,000 tweets tagged with #080808!

It's the record we've made on 08/08/08, the opening day of Beijing Olympic Games.

In approximately 24 hours, the simple idea of "putting an anchor in the world's timeline" evolved to the most popular topic in the Twitter world, received strong support from the blogosphere, and finally, hit the Technology page of New York Times.

No time difference at all. Tweeters from Beijing, Shanghai, Taipei, New York, San Francisco, Tokyo, Bangkok, and even some cities we've never heard were sharing their thoughts about the opening ceremony at the same time, on the same platform, with the same tag.

Every 5 seconds, there were more than 20 tweets with "#080808" tag popping up on the result page of Twitter Search. For most of us, it's more exciting than the 29 fireworks forming giant footprints in Beijing's sky.

Now, a quick question: what's next? #080908, #081008, ... until #082308? Oh, no, don't be so silly.

Seriously, why not keep tagging all our tweets about Beijing Olympic Games with #080808?

For sure, we know some of us have been used to pressing the keys of 0 and 8 with the middle finger and index finger of your right hand continuously for three times. Respect users' experience - it's what we've learned in the Internet industry.

It's not time to say good-bye. Keep tuned.

超过 5,000 条带有 #080808 标签的消息！

这是我们在08年08月08日创下的记录。这一天，是北京奥运会开幕日。

在大约24小时里，“标记时间点，改变全世界”这个简单的创意演变成了 Twitter 世界里最热门的话题，得到了来自 Blog 世界的鼎立支持，并最终登上了《纽约时报》的科技版。

完全无时差。来自北京、上海、台北、纽约、旧金山、东京、曼谷以及一些我们从来没有听说过名字的城市的 Twitter 用户们在同样的时间、同样的平台、用同样的标签分享关于开幕式的看法。

每隔5秒钟，就有超过20条带着“#080808”标签的消息出现在 Twitter Search 结果页上。对我们大多数人来说，这比北京上空29个由焰火构成的巨人脚印更令人兴奋。

现在，一个简单的问题：接下来呢？#080908、#081008……直到#082308？还是不要了，别这么愣好不好啊。

老实说，为什么不把我们所有的奥运会消息都给标记上 #080808 呢？

当然，我们知道不少人已经习惯于用右手中指和食指在0和8两个键上连续敲击三下。尊重用户习惯——是我们在互联网行业里学到的。

还没有到说再见的时间。请您不要走开。

New York Times Coverage of #080808 《纽约时报》上的 #080808 报道

Chinese Tweeters Celebrate Olympics With #080808

By STEVEN SCHWANKERT, IDG News Service\Beijing Bureau, IDG
Published: August 8, 2008

A new online movement less than 24 hours old seeks to spread the Olympic spirit among users of the Twitter micro-blogging site.

Using "#080808" (pronounced "tag 080808"), a symbol for the date of the Olympics opening day, August 8, 2008, is "just for fun, a way to 'write down' the day," said Steven Lin, one of the movement's co-founders, who works for official Olympic Web site Sohu.com as a project manager.

Founded by Lin and two other Internet industry managers, they conceived of the idea on Wednesday, and only began propagating it on Thursday. Lin, who tweets as "flypig," said they chose #080808 for a number of reasons but for one above all others: it was easy to type, including on a cell phone.

Also, despite earlier incarnations such as #BJ08 or #BJNOW, Lin and co-founding tweeters "webleon," also based in Beijing, were shot down by Shanghai-based "babechloe." Chloe, who works in the video department of Web site Hexun, suggested #080808 for those who wanted to celebrate the day but were turned off by references to Beijing.

Regional identities and rivalries are strong in China, and people in one city or province are often reluctant to fully embrace activities, ideas or cuisine specifically associated with another area.

Although the number of #080808 tweeters is not known, a new one is being added about every half-second, as of noon in Beijing local time. Applications are now being written for the movement, including an Adobe Photoshop overlay, allowing users to superimpose the slogan over their Twitter avatars.

Such online movements are now an established phenomenon in China. Chinese Internet users adorned their MSN Messenger icons with (L) China, or "Love China," in a display of solidarity during heavy overseas protests against the Olympic torch relay. This was later replaced with rainbows following the May 12 earthquake in Sichuan province.

Click here for the original article on NYTimes.com

中国 Twitter 用户用 #080808 庆祝奥运会

作者：史蒂芬·施万科特 (STEVEN SCHWANKERT) , IDG新闻服务\北京记者站, IDG
日期：2008年8月8日

一个刚刚发起了24小时不到的在线活动正在微博客服务 Twitter 上传播奥林匹克精神。

之所以使用“#080808”(念作“tag 080808”)这个代表了奥运会开幕日2008年8月8日的符号，只是“为了好玩，建立一个‘写下’这一天的途径，”林嘉澍(Steven Lin)说。他是这个活动的联合发起者之一，目前正在奥运官方网站搜狐网(SOHU.COM)从事项目管理方面的工作。

林和另外两个互联网行业的从业人员在周三想出了这个创意，并在周四开始了宣传活动。林在 Twitter 上的昵称是“飞猪”(flypig)，他说他们选择 #080808 有许多原因，其中最重要的一点是：它输入起来很容易，包括在手机上。

而且，林和同在北京的联合发起者“webleon”曾经提议使用 #BJ08 或者 #BJNOW 这样的标签，但是被来自上海的“babechloe”否决了。顾颖(Chloe)在和讯网的视频部门工作，她建议使用 #080808 ，免得那些本想一同庆祝这个日子的人们因为北京元素而选择离开。

区域间的认同和竞争在中国都非常明显，身处某个城市或省份的人们总是不愿意完全接受与另一个区域有显著关联的活动、想法或者地方风味。

虽然没法知道参与 #080808 的具体 Twitter 用户数量，但是在北京当地时间的8月8日中午，每隔半秒钟就会有一条新的消息出现。还有许多关于 #080808 的应用也应运而生，比如一个 Adobe Photoshop 模板，可以让用户在他们的 Twitter 头像上加挂活动口号。

类似的在线活动在中国已经蔚然成风。中国互联网用户曾经在 MSN 昵称里加上 (L)CHINA 的图标(既“红心中国”)，以表现他们在面对海外奥运火炬抗议声浪时的团结一致。不久之后，这个活动又被支持5月12日四川地震的彩虹标志所取代。

点击此处查看 NYTimes.com 上的原文

Echoes in Blogosphere 来自Blog世界的回响

As we said in the previous post, #080808 is not limited to Twitter.

Thank you so much, bloggers from all over the world! Without your help, the words could not get spread so fast!

Here are some great posts from about #080808 we find in English blogosphere.

Twitter Blog / What Will You Be Doing 080808? by Biz Stone
A fun project has emerged out of the Chinese community on Twitter. The idea is to share what you're doing during the opening day of the Olympic Games.

ReadWriteWeb / #080808 Twitter Campaign For Beijing Olympics by Gang Lu
Chinese Web fans have launched a campaign to celebrate and support the opening of the Beijing Olympics, using (you guessed it) Twitter!

Danwei / Web 2.0 Unites Around #080808 Campaign by Adam Schokora
The #080808 campaign allows microbloggers to participate in a worldwide timeline of online Twitter chatter about August 8, 2008, the start of the Beijing Olympics games.

CNReviews / Chinese Twitter World’s A-#080808… by Daivd Feng
Everyone’s going crazy with sticking in the #080808 icon or sticking a photo of them going “#080808“!

Ogilvy China Digital Watch / 080808: How China’s Web Savvy are Following the Games by Kaiser Kuo
One of the best ways to follow all the excitement, I’ve found, is on Twitter. People who are posting about Beijing and the Games are using Hashtags.org and the tag #080808.

就像我们在上一篇日志里说过的那样，#080808 并不仅仅局限于 Twitter。

非常感谢来自世界各地的 blogger ！没有你们的帮助，这个活动的口碑不会传播得这么快！

除去上面的这些英文链接，我们还看到了一些不错的中文日志。在这里和各位分享：

The sky of Daemon! / #080808 明天是个好日子 by Riku
Twitter上被一片 #080808 所包围，我无处可逃，没办法，因此我也决定加入。080808是个好日子，既然无缘亲身体会，那么就在Twitter上与大家一起同乐吧。

Plod / #080808: 在 twitter 上为奥运贴标签活动 by POPOEVER
上线不过数小时，twitter 上响应激烈，一干人等纷纷把头像替换成 #080808 大头贴，#080808 的标签也开始在页面上满溢，这也许是我们这些边缘人的另一种表达奥运情绪的方式。

YUKI.N / 收集了100+個#080808的頭像 ! by YUKI.N
因為明天就是北京奧運還是甚麼的，所以twitter上出現了#080808的熱潮，蠻熱鬧的，然後我就有興趣去收集這些頭像了....

Genius Loves Company! 天才扎堆！

http://tag080808.appspot.com/

Our friend Junyu Wang, a genius designer at Google China, just made an awesome mash-up page for the #080808 campaign.

The most incredible part is, he finished this complicated job in only 6 hours. Stunning!

On this page, you can find the latest activities about #080808 from YouTube, Flickr, Technorati, and Google Blogsearch. And once you put an "#080808" tag to your videos and pictures, they will be on this syndicated page automatically.

So why not tag #080808 everywhere in the World Wide Web?

我们的朋友王俊煜是谷歌公司的天才设计师，他刚刚为 #080808 活动制作了一个巨酷无比的 mash-up 页面。

最神奇的一点是，他只花了6个小时就完成了这个复杂的工程。超赞！

在这个页面上，你可以看到YouTube、Flickr、Technorati 以及 Google Blogsearch 上关于 #080808 的最新动态。而且只要你给自己的视频和图片贴上“#080808”标签，他们机会自动出现在这个聚合页面上。

那么，为什么不把 #080808 活动推向网络世界的每一个角落呢？

Icons Buzz 大头贴物语

After releasing the .psd file of #080808 buddy icon, we witnessed a huge wave of participation on Twitter. Here are some amazing masterpieces.

在发布了 #080808 大头贴的 .psd 文件之后，我们目睹了 Twiiter 上的新一波参与热潮。这里是一些很不错的大作。

Pretty Asia 亚洲美女:



The Wall 与墙共舞:



Team Twitter 推特小分队:



Crossover 跨界:



And proudly announce: yiyinglu, the author of Twitter Fail Whale, made a "little contribution" to #080808.

接下来，很荣幸地宣布：Twitter搁浅鲸鱼的作者yiyinglu为 #080808 做了一个“小贡献”。



"Emoticons in 0 and 8 in color of olympic rings - expressing the individuality and different feelings from all of us as a part of the game." She said.

“以0和8两个数字以及奥林匹克五环色彩构成的人物表情，表现了我们每个人置身奥运热潮中不同的个性和感受。”她说。

Express yourself! 表达自我！

After 2 hours of flooding #080808 tweets, we decided to make the campaign more creative.

Everybody, here's the .psd file of #080808 buddy icon.

So, open the file with Adobe Photoshop, and make your own #080808 buddy icon. Want a hot pink one? Now you can do it yourself.

Please upload your masterpiece onto Flickr with name or tag of "#080808 icon", so we can find them.

We will put the greatest works on this blog!

P.S. We suggest you not change the font type. Because, you know, it's the spirit of #080808 logo. Thank you!

在经历了两个小时潮水般的 #080808 消息之后，我们决定让这个活动变得更有创意一点。

各位朋友，此处奉上 #080808 头像的.psd文件。

然后，用 Adobe Photoshop 打开这个文件，就可以制作属于你自己的 #080808 头像了。想要一个热辣的粉色头像吗？自己动手做吧。

请将你的大作上传到 Flickr ，并且用“#080808 icon”命名或者加注标签，这样我们就能够找到了。

我们会把最棒的作品放到这个 blog 上！

补充：我们建议你不要修改字体。因为，你知道的，这是 #080808 标志的灵魂所在。感谢！