Facebook Spotlight – Facebook Mobile Hack Hong Kong

The facebook team has organized The Facebook Mobile Platform Global Hacks Roadshow in Europe and Asia this March. Luckily, Hong Kong is one of their station in Asia :) It’s a golden chance for me to demonstrate my creativity and show off my hack skills.

The idea of Facebook Spotlight is actually inspired by my girl friend, who is actually a frequent facebook users. However, she always finds it difficult to spot out some previous posts in facebook. I guess that is highly related to the weakness of the facebook search bar now. The current facebook search bar only allows you to search users by name, to search pages or events by title. The words inside contents, such as comments and photo titles, are actually not indexed. So why not let me try to make a hack and enhance the search function! And amazingly, our idea was acknowledged by the judges and we got “The best use of open graph” award.

I really have to say thank you to HTML5 for this hack. Without HTML5′s Web Workers and Web DB storage, our idea won’t be feasible. The Web Workers helps us to speed up the indexing performance using parallel processing. Then the Web DB helps to solve the permanent storage of indexed data. We proved that client side indexing is made possible with HTML5 in this hack.

Please read my slides below so that you can understand more about what facebook spotlight is about:

View more PowerPoint from Stanley Fok

facebook spotlight
Our hack – facebook spotlight

my team
My cool team members – Stanley Ng, Steve Ng, Me and Hon

Demo time
Demo time!

Leave a Comment

Frogiology has been transformed to English only…

Frogiology has been transformed to English only today… It is because I type too slowly in Chinese :)

I hope I will be able to post more interesting technology articles from now on!

Leave a Comment

Flash CS5 的新功能

對於Flash CS5的推出,Stanley真是萬分地期待。今次這個版本,明顯地比CS4更勝一籌! 除了為designer加入了新功能之外,CS5也開始著手改善developers方面的features。Flash,你真是愈來愈成熟了!

Built-in Physics Engine

在CS5中,Flash加入了Physcis Engine的組件,這對於designer來說是一個非常大的喜訊。以前designer要把物件在timeline上模擬真的物理反應,只能逐個keyframe慢慢調整,既花時間又不準確。現在,designer只要把movieclips設定為 “Physics Object”,再設定其他參數,如重量、velocity等等,然後就可以讓CS5 計算物件之間的物理反應,最後為所有Physics Object產生一條timeline。只要把timeline play一下,就可以看到了真正的物理反應!

當然,timeline是不dynamic的,即不能根據user input (如滑鼠標)作出反應。再者,現在應該都未support 3D Physcis,畢竟Flash IDE還是停留在2D的空間呢,不過相信這會是下幾個版本內會發生的事。先看看demo吧:

iPhone Packager

上一篇文章都提過,Flash CS5 可以直接publish出iphone格式執行檔。即代表Flash Developer可以加入iPhone App的開發團隊,在App Store上面賺賺錢了!

FLA會變成XML 格式

Flash終於放棄了用binary的fla檔了!!! 這有甚麼好處!? 如果你曾經做過Flash程式的開發,並且用SVN這些version control的軟件,就會知道有多麻煩了。因為FLA很多時都會被改被save,一save過了,不理有沒有改過東西,FLA檔都會被更新,然後SVN就會當它有更改過,下次commit上SVN時,因為binary檔做不到code diff,因此整個FLA也會上載到SVN server,浪費時間及空間。但當變成XML格式的檔案後,version control就可以發揮功用了!

和Flash Builder結合,而且有更強的Built-in Actionscript Editor

Flash built-in的 Actionscript Editor不好用就人所共知,因此很多人都寧願用其他editor,例如Flash Develop,貪它提供了code hint、auto complete、trace variable等這些好功能。現在Flash CS5終於醒覺了, 這是一個好的IDE至少要有的元素吧!




Flash 能成為RIA界的一哥,”易用易學”是他成功的重要因素。可是如果要讓Flash更成功,我覺得有幾個地方還可以改善的:

設定devlopment framework

Flash的好處是很易用,code 放在哪兒也可以跑得到。但是這卻造就成很多沒有質素的Flash 程式及程式員。Stanley看過了很多不同人做的Flash-based website的source code,很多都爛得可怕…有的code 在timeline,有的code在不知多少層內的movieclip內的keyframe上,trace code 難得要命。如果Flash可以提供一個development framework或一個standard,令每個developer的code structure也差不多,相信會令Flash 的development更加健康。

更多的UI components

Flash 內建的UI components太少了,如果在Flash做form-based的程式,所有UI都要自己寫,太花時間。如果可以把Flex那豐富UI components library也port過來一起用,那是多麼的幸福哦。而且Flash正在開始要攻入手機市場,可以的話,應該要為手機平台做些針對手機使用UI components吧!

我想: 現在寫定一個iPhone UI library for Flash也是差不多時候了!

Leave a Comment

寫Flash的人有福了

今時今日,作為一個developer真是要學寫Actionscript了。為甚麼? Flash 對各平台的支持愈來愈利害了! 在不久的將來,只要你懂做flash application,你就可以用一個code base,deploy到瀏覽器、桌面、智能手機甚至是普通手機了!

Open Screen Project

open screen project

Adobe 正在進行一個叫 Open Screen Project的項目,它的內容主要是想把Flash Player 可以建立在不同的裝置上,如電視機、桌面電腦、手機等,因此以Open Screen為名,希望可以透過Flash平台包容不同大小的screen device,並且為所有平台提供一致的互動性及用戶體驗。

Open Screen Project 官方網頁: http://www.openscreenproject.org/

Flash Professional CS5 – Packager for iPhone


Flash publish出來的程式也很流暢啊~

另一方面,快將推出的Flash CS5,早前已經表明過會包含iPhone Packager,即是你只要把Flash程序寫好,就可以直接把程序publish到iPhone程式的格式,之後就可以上載到App Store供別人下載。到時候,還需要花時間學習複雜的Objective C 麼? 就算是designer,以後都有機會加入寫手機程式的行列了! 雖然iPhone 的Safari已決定不會讓Flash Player 跑,但有iPhone Packager 卻令我更歡喜!

Packager for iPhone: http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

作為Flash Developer的一群,這些對我們都是莫大的喜訊,而我自己也很看好這個發展方向。首先,Flash 開發用戶群廣,有programmer又有designer,而且Flash 發展了這麼多年,很多人都已經懂得寫ActionScript,learning curve又低。以手機開發為例,手機型號那麼多,各有不同的OS及screen size,如果還要針對性為每個手機寫一個程式,都不知寫多少個版本才行了,所以很明顯這對手機或其他平台的程式發展必定有利。

另外,Flash open source community也十分活躍。現時已經有很多很好用又利害的library讓我們使用,如3D Engine、Physics Engine等等,因此要做各式各樣的程式或遊戲,在網上找一找已經有很多東西可以用,大大加快程式的開發時間!

雖然好處多多,但我覺得還有一些決問題還是要考慮的。我們都知道Flash Lite其實推出了也有很多年,可是為何Flash Application在手機上還是這樣不普及呢? 其中一個原因可能是以前的手機一開始沒有預載到Flash Lite Player吧,一般用戶又怎會懂去找Flash Lite安裝在手機上呢? 另一個問題,就是根本沒有Flash Application下載。可是,Apple的App Store已經告訴了我們解決辦法,就是讓community的一群也可以參與程式開發,然後放到online store讓人下載。如果Ovi Store或Android Market也可容許Flash Application,相信用戶將可以享受更加多姿多彩的程式吧!

說不定,facebook的restaurant city、開心農場會在不久將來出現在手機上了 =]

Leave a Comment

用戶體驗 – User Experience

在我還小的時候,互聯網剛剛起步,網站設計的焦點都是放在外觀為主。現在我們身處web 2.0的世代,網站已再不是單向的為我們提供資訊的工具了。我們除了在網站上取得內容 (retrieving information),還會處理資訊 (processing information),甚至是建立資料 (creating information)。由此看見,用戶跟網站的溝通已經變成了雙向、互動的模式。用戶體驗 (User experience,或UX) 一詞,也漸漸被網站設計師及程式員所重視。

那甚麼是用戶體驗? 簡單來說就是指用戶根據某一個設計,經過使用後他所得出的感受。Jesse James Garret 可以說是對用戶體驗有深入理解的佼佼者了。早在2000年時,他已為用戶體驗進行深入探討,並且定下用戶體驗的重要元素,由抽象的概念慢慢延伸至具體的表現方法:

  • User Needs: 研究用戶習慣,了解網站目的
  • Functional Specification: 詳細描述網站的功能,必須為解決用戶需求為大前提
  • Interaction Design: 計劃用戶在網站內的流程 (page flow),以及用戶與資料互動的模式
  • Information Design: 考慮資訊在網站中表達的方法,並且要令介面乎合用戶互動的模式
  • Visual Design: 主要是從美學角度設計網站外觀及感覺 (look and free)
The Elements of User Experience

The Elements of User Experience

Source: “The Elements of User Experience.” Jesse James Garret. (PDF)

以下這個powerpoint,在Interaction Design 及 Information Design 這兩個層面說得也很精彩,Stanley 在此極力推介呢!

更多資料:
http://konigi.com/wiki/user-experience-design
http://semanticstudios.com/publications/semantics/000029.php
http://www.jjg.net/elements/

Comments (7)