WebSocket 通訊協定簡介:比較 Polling、Long-Polling 與 Streaming 的運作原理

這裡介紹 HTML5 的 WebSocket 概念,並且跟傳統的即時性網頁技術 Polling、Long-Polling 與 Streaming 做比較。 HTML5 的 WebSocket 是一種建立在單一 TCP 連線上的全雙工(full-duplex)通訊管道,可以讓網頁應用程式與伺服器之間做即時性、雙向的資料傳遞。 WebSocket 跟以往實作全雙工的技術比起來,改進了非常多,不但減低網路頻寬的使用,也降低了網路延遲的時間。(關於網路的頻寬與延遲可參考這裡) ...

January 16, 2014 · G. T. Wang

HINT.css:以 CSS3 與 HTML5 實作的提示訊息方塊(Tooltip)工具

HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫,可以在網頁中呈現漂亮的提示訊息方塊。 一般在網頁中若要顯示提示訊息,可以使用 title 這個 HTML 屬性,像上面這張圖將 title 設定為 "HTML.css Logo",所以當你將滑鼠移到圖片上面時,停留一段時間他就會顯示這行提示訊息。 ...

January 16, 2014 · G. T. Wang

自製中文網頁字形(Web Font)並內崁至網頁中(使用 CSS @font-face)

這裡教大家如何自己製作中文的字形檔,並轉為網頁用的字型格式,藉由 CSS 的 @font-face 功能在網頁中使用。 現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能,但是到目前為止這項技術大部份都是應用於英文的字型上,而中文的字型檔由於大小通常都很大,如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔,通常都會讓整個網頁效率大幅下降,所以大部份的網頁中的中文字都比較少使用自定的字型。 ...

January 2, 2014 · G. T. Wang

Bigfoot.js:以對話方塊顯示網頁文章註解的 jQuery Plugin

Bigfoot.js 是一個可以使用對話方塊顯示網頁文章註解的 jQuery Plugin,讓讀者在閱讀時不用捲動網頁即可即時閱讀註解。 一般在網頁或是部落格中撰寫文章時,有時後會遇到需要加入註解(註腳)的情況,而讀者在閱讀含有註解的文章時,通常會需要使用捲軸(或是以超連結的方式)往下捲動網頁到下方的註解處來閱讀,閱讀完註解再回到本文繼續閱讀。 ...

December 31, 2013 · G. T. Wang

CSS 網頁字型 @font-face 使用教學與範例

這裡介紹 CSS 的 @font-face 使用方式與範例,讓網頁設計者可以在網頁的字型使用上更有彈性。 @font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字,甚至還可以讓設計者使用自己所提供的字型檔,讓網頁的設計更具有彈性,在選擇字型時就可以不需要考慮一般的電腦是否有安裝,凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外,在任何 CSS 條件群組(conditional-group)at-rule 中也可以使用。 ...

December 31, 2013 · G. T. Wang