It's FROGiology

Facebook Spotlight – Facebook Mobile Hack Hong Kong

Stanley Fok — Sat, 31 Mar 2012 20:10:34 +0000

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:

Facebook Spotlight – Facebook Mobile Hack Hong Kong

View more PowerPoint from Stanley Fok

Our hack – facebook spotlight

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

Demo time!

Frogiology has been transformed to English only…

Stanley Fok — Sat, 31 Mar 2012 19:14:10 +0000

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!

Flash CS5 的新功能

Stanley Fok — Sat, 16 Jan 2010 19:17:43 +0000

對於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也是差不多時候了!

寫Flash的人有福了

Stanley Fok — Fri, 15 Jan 2010 16:49:36 +0000

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

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、開心農場會在不久將來出現在手機上了 =]

用戶體驗 – User Experience

Stanley Fok — Thu, 03 Sep 2009 18:43:46 +0000

在我還小的時候，互聯網剛剛起步，網站設計的焦點都是放在外觀為主。現在我們身處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

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

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

Designing Rich Applications

View more documents from Theresa Neil.

My First JigLibFlash Demo

Stanley Fok — Sat, 08 Aug 2009 05:53:40 +0000

JigLibFlash 是一個ActionScript 3.0 的rigid body physics engine。何謂一個physics engine? 就是說只要你把物件放進一個空間後，然後作簡單的設定，所有物件的碰撞、碰撞後的反應、磨擦力、扭力、吸地心引等影響，全部交給這個physcis engine就好了，你完全不用理會那些複雜的物理及數學問題，大大省卻很多時間呢!

JigLibFlash同時簡也整合了papervision3D、away3D 及 sandy3D的支援，針對不同3D engine的愛好者使用，它提供的API也十分易用易明，令我很欣賞這份細心。

以下這個是Stanley測試時做的demo:

>> 放大來看

是否很有趣呢~? 有興趣可以下載source code 來玩玩~ 要用Flash CS4 compile才行哦!
>> JigLibFlash Demo (480kb)

有用連結:
JigLibFlash Startup Guide
JigLibFlash Offical Website
JigLibFlash Documentation

Flash Development Guide

Stanley Fok — Thu, 16 Jul 2009 17:10:16 +0000

前幾天在公司又搞了我的Flash Sharing Lesson 2: Flash Development Guide。這個presentation的目的，是希望讓沒有Flash基本編程概念的朋友了解如何去展開Flash編程之路。這些內容都是Stanley多年來的心血結晶，尤其是第四部份談到的Best Practices，是我發覺很多人都沒有用心考慮過的問題。如果你覺得做Flash很花時間，不妨在此時細心想想如何可以做得更有效率吧。

Flash Development Guide

View more presentations from Stanley Fok.

下載Flash OOP程式範例 >> flash_sharing_lesson2_demo.zip

Game with Augmented Reality – 遊戲產業的新方向

Stanley Fok — Fri, 10 Jul 2009 18:03:16 +0000

最近的科技愈來愈趨向用戶體驗，好像是wii 的體感操控，iPhone的multi-touch等等。今天Stanley看了一個非利害的game demo，竟然可以將體感操控及Augmented Reality融入遊戲之中，我想這應該是未來數年遊戲產業的新方向了!

這個遊戲只要一張印有地圖的紙，及一個由NVIDIA研發的硬件。這個硬件與手機外型差不多，有touch screen，鏡頭，及高性能的GPU。只要用鏡頭對著平面的地圖，螢幕就會出現立體的建築物。玩家就要用不同的角度及距離，尋找並射殺喪屍。最有趣的，竟然可以利用skittles彩虹糖作為遊戲的道具，例如橙色是炸彈，只要把它放在地圖上，再用槍射它便可引爆，果然創作了十足!

另一個demo是加入了augmented reality 的board game，同樣有趣! 何時會有augmented reality 的大富翁玩!?

意念分享web2.0平台之構思

Stanley Fok — Thu, 25 Jun 2009 19:12:03 +0000

Stanley 常常在思考有甚麼有趣的application可以做，今晚又如平時一樣發呆地想…iPhone App呢? Web 2.0 網站呢? 很多意念都有人做過了，要想一些沒有人做過的東西真是叫人苦惱…

…三個臭皮匠，勝過一個諸葛亮…

對呢，創作思考，很多時都不是一個人的事，當不同的人向同一個問題思考解決辦法，結果都會比一個人來想得更全面、完善。另一方面，很多時會想的人不懂做，會做的人不會想。此時我立即有一個念頭湧上心頭，我可以做一個意念分享的web 2.0平台，把他們通過意念(ideas)撮合在一起!

可能我們也見過有類似的平台，如雅虎知識，討論區等，但這些平台都有一個問題，就是層次太窄，即是只有一人提出問題，其他人回答，然後整件事就完了，沒有跟進或注入新的意念。但事實上，知識是不段的累積、承繼下來的，用電腦人的語言來表達就是樹狀結構 (甚至是網狀結構)。這就好像玩Civilization這個遊戲一樣，要把知識不段開發，才能再發展新的知識。

我心目中的”意念分享平台”，除了把Thinker 及 Implementer撮合外，更重要就是想引入Refiner的角色，把已有的意念承繼、整合、琢磨，然後建立新的意念。當Implementer覺得意念成熟，他就可以認投並找出解決辦法。當意念implement好了，我們可以追索到原來這個東西是基於甚麼意念衍生出來的、又或是貢獻過的人是誰。更加有趣的，就是意念可以分支發展，最後更可能進展到出現兩個完全不同的Implemnetation呢!

這個平台還可以有另一種角色，就是只會Read Only 的User。當整個意念樹不段成長，每一個支節出現過的關鍵字都可能是非常有用的搜索字眼。因為有了這個樹的結構後，關鍵字的關係就更明確了，搜索結果的質素應可提升。

不知這個狂想可否有人refine一下呢~?

我在河上鄉

Stanley Fok — Sun, 14 Jun 2009 17:37:06 +0000

河上鄉位於新界上水的西面，雙漁河旁，於上水小巴站乘坐51K小巴，十多分鐘左右便可到達。這處地方不大，但也有不少拍攝的好地點，如鄉村風情、祠堂、荒廢了的小學、農莊等等。如果玩得餓了，位於鄉村旁的豆品廠就不容錯過了，只需每人給$8，就可以無限添豆腐花及豆漿了。而且豆腐花非常之香滑，絕對是香港最好吃的豆花了!

就連阿蘇也在”蘇Good”節目內介紹過這個地方啊~ 在此建議各位朋友，先到農莊玩完才好去食豆腐花，不然食得太多的話…很容易嘔呢…
蘇Good (II) 任食平靚正豆腐花 (MyTV – tvb.com)
放大

這次拍的相片也很滿意，希望跟大家分享一下: