HK Geek Cafe

可以觸摸的網頁

2011-07-22T00:10:00.004+08:00

HTML5 之中定義了對於 Touch Device 相應的功能. 其中最重要的大概是在 JavaScript 之中的 touch event.Touch event 跟 mouse event 某程度上相當相似. 三個 event 分別是 touchstart, touchmove 及 touchend. 這就好比 mouse event 當中的 mousedown, mousemove 及 mouseup 三個 event.不過, touch event 跟 mouse event 的最大分別, 就是它本身設計支援 multi-touch, 所以每個 event handler 接收回來的 event 會包含每一隻手指(或接觸點)相關的資訊. 先拿 touchstart event 做例子:document.getElementById('someid') .

令人又愛又恨的 JavaScript function

2011-06-30T23:07:00.003+08:00

JavaScript 的其中一個特別之處, 就是 function 本身是一種 object 這個設計. 習慣寫 procedural 及 OOP 的人一時間未必能夠完全消化箇中用處. 寫 C 的高手, 或者是學過 LISP 的人, 也許會比較容易明白. 不過同一時間, 當 function 跟 object 一齊使用時, 又帶出了更加麻煩的 binding 問題.JavaScript function 簡介要定義 JavaScript function, 最基本的方法就是直接用 function keyword 來定義function someFunc() { // ... }這樣做的話, 其實等同於定義一個叫 someFunc 的 variable, 並指定一個 function object 作 value:var someFunc = function () { //

借用 Closure Compiler 來 debug JavaScript

2011-06-29T00:29:00.006+08:00

JavaScript 令人頭痛的其中一個地方, 就是 browser compatibility 的問題. 有很多時候, 在一個 browser 運作正常的 script, 在另一個 browser 會出現問題. 很多時進行開發的人都只專注於其中一個運行環境, 待完成後才去作較大規模的測試. 現時很多網站都大量使用 JavaScript, 很容易就會出現過千行的code. 這時候問題一出現就會很頭痛, 因為很多時候這類 browser compatibility 的問題並不會產生甚麼有用的錯誤訊息.舉個例子, 寫 PHP 的人很容易就習慣在建立 array 時在每個 item 後面都加上逗號, 例如是這樣:這樣做的原因, 是可以很方便的加、減或移動項目. 但是 JSON

快速開發 PHP web app - CakePHP

2011-03-31T23:24:00.004+08:00

製作 web app, 一般來說主要都是分兩個部份. 先是設定好 database 儲存資料, 然後就是製作介面, 令用家可以透過介面處理資料.這類介面一般提供資料儲存的四個主要工作功能: 建立, 查閱, 更新以及刪除, 亦即是所謂的 CRUD (create, read update delete).要是為每一個 web app 都重新寫一遍以上的功能, 會是一個又花時間又重覆的工序. 若果懂得利用 open source framwork 的話, 則事半功倍.CakePHP 所提供的, 是 MVC 加上 ORM 的模型. 其概念是從 Ruby on Rails 而來的.使用 CakePHP 的方法, 首先是在 Model 設定每一個 database table, 特別是 table 與 table 之間的關聯. 然後在相應的 Controller 中, 為每一個 View,

在網頁中插入音樂

2010-12-14T14:29:00.006+08:00

一直以來, 要在網頁上播放音樂都是個令人頭痛的問題. 一個不負責任的 developer 可以很隨便的用一個 tag 來處理, 迫使讀者要在特定環境加特定的軟件才可以播放. [後補: 為免誤會, 我在此呼籲... 請各位必須避免在讀者不知情的情況下播放音樂. 例如是當進入頁面時自動播放音樂之類. 當你嚇到使用者的一刻就是他們離開的一刻.] 的最大問題, 是它並不是一個 HTML 4.01 的 tag. 不過這個 tag 在 HTML 5 重新出現, 結果就像是把不負責任的行為合理化一樣... 基本用途就是 embeded content, 亦即是瀏覽器會交由 plugin 去處理內容, 一般來說無法控制顯示的結果. 例如你 embed 的是一個 mp3 檔案的話, 用 IE 時可能會出現 Windows Media Player plugin,

利用 PHP 為圖片加上水印

2010-12-04T22:09:00.006+08:00

為保護自己網站的圖片, 很多時都會為圖片加上水印. 不過如果每一張都要手動加水印的話有時會很不方便.如果使用 PHP 的話, 其實可以利用 PHP 實時為圖片加上水印, 做法亦相當簡單. 而且還可以隨時轉換水印, 相當方便.使用 GD2 library現時一般的 PHP 設定都已經配備了 GD2 library. 利用 GD2 library, 就可以為相片加上水印. 方法是先載入要加上水印的圖片, 以及水印本身的圖片. 這裡假設圖片是 JPEG, 而水印則是 PNG.$image = imageCreateFromJpeg("image.jpg");$watermark = imageCreateFromPng("watermark.png");然後使用imageCopyMerge()這個 function, 就可以把水印加到圖片上. 假設水印是加在圖片右下角的話, 大概是這樣 (

HTML5 storage

2010-10-15T23:45:00.006+08:00

HTML5 的其中一個新功能是 Web Storage. 其中提供了 Local Storage 及 Session Storage 兩個新的 JavaScript object. 兩個儲存功能基本上與 Cookies 相似, 都是在本機以名+值(name & value)的方式儲存資料. Local Storage 讓同一個網站存取資料, 而 Session Storage 則只容許在同一個瀏覽視窗中的同一網站存取資料.假設用戶同時開啟兩個視窗並瀏覽同一個網站. 利用 Local Storage 的話, 在其中一個視窗工作時儲存的資料, 可以在另一個視窗存取. 但如果利用 Session Storage 的話, 則在一個視窗的工作並不會影響到另一個視窗. 這是 Cookies 所不能做容易做到的.不過, HTML 5 的 Web storage 與 Cookie 的最大分別,

Deep linking

2010-08-26T15:46:00.003+08:00

在 AJAX 盛行的這個年代, 網頁內容往往都是利用 JavaScript 抓回來再顯示. 某程度上這樣可以提供一個更好的介面設計, 不過同一時間郤帶來另一問題: 如何讓讀者 bookmark 指定內容? 當讀者使用一個網址瀏覽一個網頁時, 如果網頁內容都是用 JavaScript (或者是 Flash) 更新, 網址不變的話, 讀者無法 bookmark 內容, 只能 boomark 首頁, 亦無法透過網址把內容分享至其他地方. Deep linking 的概念, 就是為網站的指定內容提供特定的網址, 好讓讀者可以利用這個網址去 bookmark 內容, 或和其他人分享. 這樣除了可以令網站更加 user friendly 之外, 同時亦為網站內容提供獨立網址, 方便自己把內容分享到不同地方, 間接擴闊了網站的宣傳渠道. Deep linking 的方法有很多,

Hello World @ JavaScript

2010-07-12T22:07:00.008+08:00

(本文首次刊於茄糞男Blog, 2010-06-24 14:24:34)這其實是做了兩年的 workshop, 都沒有認真考慮過的問題.JavaScript 的 Hello World 應該是怎樣才好呢?一直以來, 我都是用最初學到的一套, 就是用 document.write():這個Hello World 的最大問題, 就是在實際應用之中, 其實甚少會使用 document.write(). document.write() 大部份情況下只適用於當文件正在生成之時. 當文件已經顯示出來之後, 基乎都不會再用. 再者, 現時一般的做法, 都是等待文件載入後才開始執行 JavaScript (onload event),