pCloud Partner Program

強大的HTML5離線作業

程式技術/Javascript 2012/10/25 16:58
views: 132856 times
HTML5裡令人驚豔的一項特性就是可以離線瀏覽功能.

利用這項功能, 可以很容易地讓網頁在沒有網路的環境下, 也能順利讓使用者閱讀及使用, 而且實作上也相當單純, 只需要注意寫好更新網頁的邏輯及時間點即可.

一般來說, 只需要把 manifest 設定好, 基本的離線瀏覽功能就差不多完成了, manifest 的設定容易, 就是把"要"在離線瀏覽的網頁及內容, 寫在 manifest 裡, 例如網頁是

http://test.com/mypage.htm

內容有一個 js/myjs.js
另外還有兩張圖為 imgs/1.jpg 及 imgs/2.jpg

則在 mypage.htm 中的 html tag 裡, 多加上 manifest="mypage.manifest" 而且在 mypage.manifest 中, 加上以下內容(純文字):

CACHE MANIFEST
mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg


這樣就完成了. 有意思的地方是即使用 mypage.php 這樣的動態內容, 一樣可以利用這樣的方式將內容存在客戶端中.

如此一來, 即使在沒有網路的狀況下, 也可以順利瀏覽這個網頁內容 http://test.com/mypage.htm

接下來要說明的是更新方式, 一旦寫入到客戶端的內容, 即使原本的 mypage.htm 更新, 就算是有連線時, 該內容也不會更新(而且即使是動態的 aspx, php 等也都是一樣的), 簡單地說, 在 manifest 中的內容, 就是完全使用客戶端的內容, 不管 server 上的內容, 更新的方式就是更新 manifest 的檔案, 瀏覽器會檢視 manifest 內容來進行更新, 而且會自動更新(在線上時的第一次讀到 manifest 更新時, window.applicationCache.status 會變成狀態 4 (window.applicationCache.UPDATEREADY), 此時可以手動更新, 使用 window.applicationCache.update(); 即可做手動更新, 即使在這次的訪問不更新, 在下一次的訪問時, 瀏覽器也會自動更新.

利用這點, 就可以很容易地實作出離線瀏覽內容的網頁.

若希望只更新這些快取內容, 最簡單的作法是在 mypage.manifest 中, 多加個時間或版本號, 如下:

CACHE MANIFEST
#VER 000151

mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg

其中的 # 代表著這行為註解, 所以可以自由寫入內容, 上例是寫個版本號 000151, 若要強迫客戶端更新時, 可以將這個 manifest 檔的版本號改為 000151 (若其他內容都可以), 這樣就可以方便容易地來維護在客戶端離線的內容更新.

這裡有一篇很清楚的介紹文, 可以參考
http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

另外, 配合良好的設計結構, 可以將離線/在線的功能都實作出來, 方便在無法連線時, 也能使用的網頁, HTML5 的這個功能, 的確非常強大!

在實作測試時, 發現若是有設定 manifest 的網頁, 有些瀏覽器對有些 server request 即使沒有設定在 manifest 中, 也會有快取或存取的異常狀況, 建議在 manifest 的最後, 再多加上

NETWORK:
*

這兩行, 可以讓不正常工作的 server request 正常運作.

相關資料:
http://diveintohtml5.info/offline.html

w3c 的資料:
http://www.w3.org/TR/html5/offline.html

Apple Safari的資料:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

top

線上幸運抽獎(Lucky draw)

程式技術/Javascript 2012/03/20 12:10
views: 562002 times
繼上次的線上賓果產生器(http://diary.tw/tim/990)後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.

網址: http://sample.diary.tw/lucky-draw/

一樣是使用 jQuery, 純 client 執行的程式, 不過這次多配合了 jQuery UI 中的 dialog, 以方便快速編輯 html 中的 select 物件.

工作方式很簡單, 第一動是先輸入流水號, 例如預設的 1~100, 按下產生後, 生成 1~100 號在抽獎名單中, 若有跳號或是不規則號, 都可以藉由雙擊抽獎名單的 select 元件進行編輯, 利用 textarea 進行編輯, 一行一項, 空行會自行避開, 自行貼入或編輯清單.

再來就是輸入獎項了, 一般應該是由小到大排(通常的抽獎順序啦), 當然也可以隨興輸入, 一樣雙擊獎項的 select 會跳出編輯的 dialog.

最後就是令人期待的抽獎了, 抽獎鈕按下時, 若在獎項有被選取的項目, 會先抽該項目的得獎者, 若沒有則從最上面的獎項開始抽起. 每次抽都會隨機排序抽獎名單中的號碼, 所以很隨機, 抽出來的獎項及得獎者會填入最下方的抽獎結果.

隨時都可以再加入獎項(直接再進行編輯即可), 例如加碼, 紅包等, 再繼續抽獎, 而最後的抽獎結果是可以雙擊跳出 dialog 中有 textarea 供複製出來應用, 不過是不能編輯的(才不會被修改), 這樣就完成了這個線上幸運抽獎.

其中編輯 select 及列出 select 內容的 function 是共用的, 都是將其 dblclick 呼叫 editSelect, 如下:

more..



top

線上賓果產生器

程式技術/Javascript 2012/03/15 19:11
views: 189245 times
今天花了一點時間寫個"線上賓果產生器", 是個全 javascript 的程式, 主要是可以給想玩賓果, 但又不想畫格子及填數字的朋友們, 有個小工具可用.

這裡用了一個隨機排序的函數, 引用自: http://javascript.about.com/library/blsort4.htm, 程式如下:


利用了 Math.random() 隨機將一個陣列中的各元素互相交換的方式, 把陣列內容打散, 達成隨機排序, 使用方式就直接呼叫 aryNum.shuffle() 即可, 其中 aryNum 是一個自訂的陣列變數, 一開始先將 n*n 的數字填入, 再利用 shuffle() 函數進行打散.

另外值得一提的是利用了 @media print 的方式, 將操作的表單在列印時隱藏起來, 方便列印出來的賓果表格更清楚, 是一個 css 的技巧, 如下:


請到這裡玩看看: 線上賓果產生器: http://sample.diary.tw/bingo/

只需要填入維度及組數, 馬上就生出來所需要的賓果表格, 除了原來的 5*5 外, 想玩 6*6, 7*7 也不是問題. 快來玩看看囉!
top

好用JSON Editor

程式技術/Javascript 2011/12/30 12:22
views: 112244 times
在開發網頁程式, 用到解析和產生 JSON 是經常發生的事, 不過如何快速的解析或是產生 JSON , 又或是用來除錯這些 JSON 的資料, 不像 XML 可以利用瀏覽器來幫忙, JSON 可以利用這個作者 Thomas - http://www.thomasfrank.se/about.html 開發的工具來進行 JSON 的線上測試.

說明在這裡: http://www.thomasfrank.se/json_editor.html
他有線上使用版, 和下載版, 若是進行除錯, 可以直接使用線上版: http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html

以之前文章 http://diary.tw/tim/22 的資料為例:

{ 'obj1': {
  'child1':'value1',
  'child2':'value2'
  },
  'array1': [1, 2, 3, 4, 5]
};

將內容貼到 JSON Editor 裡, 按下 save 鍵, 就會產生出該 JSON 的樹狀結構在該 editor 左側(記得要自己按下 + 號展開, 如下圖:
用戶插入圖片
這樣可以很容易的理解及看出該 JSON 資料的內容. 若是要取得某一節點, 可以點在該節點上, 並看 editor 上的 label及下面的 value 就可以利用程式取出該 JSON 資料結構的資料點, 以上面的 array1 中的 1 為例, 圖示如下:
用戶插入圖片

這樣是不是十分方便, 對於在使用 JSON 的開發上, 有十足的加速作用呢!


top

Javascript已強大到可以執行linux

程式技術/Javascript 2011/05/20 14:29
views: 159567 times
這篇是在 zdnet 看到的:

http://www.zdnet.com.tw/news/software/0,2000085678,20149826,00.htm

利用 javascript 模擬 pc 執行 linux , 因為 javascript 的處理能力已經相對強大了, 可以跑模擬 pc 後執行 linux, 網址在這裡:

http://bellard.org/jslinux/

這樣看起來, 一般 develper 使用的 javascript 還真是用不了他的功能的 1/10 吧, 看來, 愈來愈強大的 javascript engine 可以做更多更多的事了!
top

VideoJS-HTML5的影片播放器

程式技術/Javascript 2011/02/19 23:19
views: 176245 times
用戶插入圖片

VideoJS-圖片引用自http://videojs.com/

瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.

不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS - http://videojs.com/

這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!


top

web版線上測試javascript-JSFIDDLE

程式技術/Javascript 2010/11/11 14:11
views: 267897 times
這個 JSFIDDLE: http://jsfiddle.net/ 是一個線上版本, 進行 javascript 測試及除錯使用的方便工具, 包含了大量的 javascript frame, 有 MooTools, jQuery, Prototype, YUI, Glow, Dojo, Processing, ExtJS, Raphael, RightJS 及不使用 framework 多種選擇.

不僅如此, html, css 更是能分區編輯, 方便測試, 而且實作的程式結果也可以存下來, 方便日後再拿出來看, 或是進行 share 討論, 還能分支開發 (fork) 下去, 真的是十分方便實用的 javascript 工具.

例如這個測試的程式, 功能就是一直累加而已, 可以玩看看: http://jsfiddle.net/Ej4rC/

還可以直接 embed (透過 iframe ) 放到外站, 如下:



可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!
top

jQuery Mobile版本

手機大未來 2010/10/07 13:34
views: 377534 times
從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/
用戶插入圖片

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!


top

IE9/Safari5/Firefox3/Chrome大車拼

好用軟體 2010/06/10 13:45
views: 143021 times
繼剛寫了Safari5發表的文章後, 想說順便跑一跑其他家的一起來拼一拼.

以下測試 ACID3 是用: http://acid3.acidtests.org/
而 javascript 效率的 Webtest 是用: http://www.101asian.com/webtest.htm

先來看看 IE9 的:
UA: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)(HTTP_USER_AGENT)

ACID3: 68分
用戶插入圖片

WEBTEST: 27ms
用戶插入圖片


再來是 Safari 5的:

more..


top

Fiddler支援Firefox了

好用軟體 2009/04/27 18:39
views: 160155 times
今天同事和我說 Fiddler 已經支援 Firefox 了. 真的是太開心了!

其實 Firefox 下的 Firebug 已經能做到許多 javascript除錯(很好用的javascript除錯工具FireBug (firefox) http://diary.tw/tim/7 ) 及 network monitoring網路 (FireBug更新功能-Network Monitoring http://diary.tw/tim/160 ) 的功能了, 不過其中的 network monitoring 的部分, 若是要看 response 時, 並非是實際該次 request 的結果, 而是展開時, 再一次去 request 的結果, 如此一來, 有時要觀察的 request 對應的 response 總沒有那麼客觀(甚至不是當時的 response), 這個時候 Fiddler (Fiddler-HTTP Debugger http://diary.tw/tim/24 )就好用多了, 因為它是截取當時的 request 及 response 的結果.

於是就進行下載 fiddler 的最新版本, 並且進行安裝, 記得要重新開啟 Firefox, 在右下角就會出現一個該 fiddler extension 的功能操作狀況, 如下:
用戶插入圖片
這個代表安裝完成了 Fiddler for Firefox 的 extension 了, 其中 Fiddler: OFF 指的是 Fiddler Application 沒有開起來, 由於該 extension 不能直接發起 Fiddler Application , 所以手動從程式集裡來啟用這個 application, 該狀態就會變成 Fiddler: ON 的狀態了, 並能順利收集到 Firefox 的 request 及 response 資料囉.

其他功能其實就和原來的 fiddler 一樣囉, 不過真的很棒, 因為從網路層去 monitoring 資料會比 Firebug 來得更精準及更真實, 這個真的值得給他拍拍手, 而且 fiddler 頁面 (http://www.fiddler2.com/fiddler2/ )上也說明了, 可以支援 Internet Explorer, Mozilla Firefox, Opera, and thousands more. 真的很不錯哦, 前進了很多呢!!

接下來就可以交替使用 Firebug 及 Fiddler 囉, 而且也以看實際狀況來應用了, 看起來 Firebug 用在 web design debug (CSS), javascript 很棒, 而 Fiddler 用在 network monitoring 是很好的工具, 如何搭配使用, 看各位應用囉.

[2009/10/31 1:38補充畫面]

用戶插入圖片

top




Patriot美商博帝 BURST 960G 2.5吋 SSD固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)
UNITEK TYPE-C 轉VGA/HDMI/PD充電/HUB 鋁合金多功能轉接器
亞果元素 CASA Hub VH1 Type-C 轉 VGA - HDMI二合一顯示轉接器


 Waiting...