以後要自己架設 Cooliris 照片牆了~

在 2009 年的時候,Heresy 曾經介紹過「Cooliris Express」這個 3D 的網頁照片牆服務。他基本上是一個透過 Flash 來做的照片、影片呈現介面,而由於它的設計在當時算是滿漂亮的、也可以用來取代許多沒那麼好用的照片幻燈片,所以個人還滿喜歡這個服務的~

也因此,在 Heresy 的部落格裡,有不少文章,都有透過 Cooliris Express 來做照片的展示。

不過,Cooliris 這家公司在 2014 年十一月的時候,已經被 Yahoo 收購了,同時 Cooliris Express 這項服務,也被迫關閉了…根據官方的說法,這項服務將在 2015/03/31 完全地關閉,到時候所有連到 Cooliris 的照片牆,都將無法使用。

閱讀全文

廣告

WebSocket++ 的 Client

由於從去年開始,Heresy 就開始有在寫網頁的東西了,所以也開始玩 HTML5 新的 WebSocket 這項技術。而由於當初自己透過 C++ 來建立 WebScoket Server 的需求,所以後來就去找了 WebSocket++ 這個函式庫(官網)來用。

當時也邊學邊寫了幾篇文章,算是自己的紀錄。有興趣的可以參考:

不過,當時 Heresy 都只有把它拿來建立 Server 過,並沒有用來建立 Client 端的經驗;而由於最近要用 C++ 寫個 WebSocket Client,所以就在來追加一下這系列的文章吧~

閱讀全文

瀏覽器的統一指標事件:Pointer Event

在早期的瀏覽器,輸入的事件其實相對單純,只有考慮到滑鼠和鍵盤兩種;而當時的滑鼠事件,其實就是 clickmousedownmouseup 等等的事件(Mouse Event、參考)。但是當手機、平板開始流行時候,再行動裝置上的主要操作介面,已經從滑鼠變成是觸控了~

由於觸控和滑鼠的操作邏輯,算是有根本上的差異的,再加上大部分的裝置又支援多點觸控,所以雖然瀏覽器大多會把觸控的事件對應回傳統的滑鼠事件,但是如果希望能有更細緻的操作,傳統的滑鼠事件是不夠用的。

而目前 W3C 針對觸控操作的部分,則有兩種事件模型可以使用,其中一個是專門為了觸控設計的 Touch Event(W3C),這應該算是目前大部分行動瀏覽器所支援的事件架構;而另一種,則是由微軟所提出的、試圖統一所有指標裝置的事件架構、Pointer Event(W3C)。

閱讀全文

可以在觸控裝置上長壓的網頁按鈕

最近在認真開發一個 Web 上的互動程式,其中一個基本的功能,就是要透過 HTML 的按鈕、來做操作物體的移動與旋轉;而為了方便操作,除了一般的按下按鈕觸發一次事件外,也希望可以透過壓著按鈕,來做到持續性地控制。

而由於 HTML 現在的標準按鈕( <input type="button" />參考)雖然可以長按,但是並沒有辦法偵測他是否被按下,所以,要不就是用別人寫好的,不然就是得自己實作了~

而由於一些原因,Heresy 是選擇自己實作這部分的功能。由於目標平台除了桌上型電腦外,還要考慮以平板為主的行動裝置,所以除了傳統的滑鼠事件外,自然就牽扯到一大多觸控的事件了。而本來想得很簡單,後來真的開始寫了之後,才發現要同時支援觸控、滑鼠,其實還滿繁瑣的,有一堆小細節都得注意到…
這方面的資料,可以參考 HTML5Rock 的《Touch And Mouse》這篇文章,本文有不少內容是參考這篇文章寫的。

閱讀全文

使用 boost::asio 讀取網頁資料

好像很久沒寫 Boost C++ Libraries 的介紹了?轉眼間,他的版本也已經推進到 1.53.0 了。這篇,主要是針對 Heresy 這段期間,在使用 Boost 的 ASIO 這個函式庫(官網),來讀取網頁資料的一些紀錄。

Boost ASIO 這個函式庫,是一個網路、以及 low-level IO 的函式庫,它的功能滿多的,而 Heresy 這邊主要是針對他的網路傳輸功能,更嚴謹地講,是針對他的 ip::tcp::iostream 的 Http Client 這個範例(官方程式碼)、來做使用的經驗來做紀錄;基本上不會講整個函式庫,就是單純簡單介紹這個範例、再根據自己的需要做一點延伸而已。

閱讀全文

透過 WebSocket 傳送 Binary 資料:ArrayBuffer(補充)

這篇基本上是針對前一篇《透過 WebSocket 傳送 Binary 資料:ArrayBuffer》作一些補充。
在《透過 WebSocket 傳送 Binary 資料:ArrayBuffer》一文中,Heresy 主要是在針對由 WebSocket++ 的 C++ Server,傳遞 binary 資料到網頁的 JavaScript Client 來做說明。不過相對的,Heresy 倒是忘了要去弄反方向、也就是由 JavaScript 送 binary 資料到 Server 的部分了;而這一篇,就是簡短地說明一下,反過來由 JavaScript 送到 WebSocket++ Server 要怎麼做。

閱讀全文

透過 WebSocket 傳送 Binary 資料:ArrayBuffer

這篇算是延續之前的《HTML5 WebSocket Client》和《C++ WebSocket 函式庫:WebSocket++》這兩篇文章,來整理一下,除了傳遞文字資料外,要怎麼透過 WebSocket 來傳遞 Binary 資料。而 client 端基本上還是一般的 JavaScript、Server 端也就還是 WebSocket++ 了~

基本上,WebSocket 在 JavaScript 這端,除了純文字(DOMString),在二進位資料的方面,還支援 BlobArrayBuffer 兩種類型的資料。Blob 基本上是一種沒有特定原生 JavaSctipt 型別的 RAW Data,裡面可以塞各式各樣的東西(參考);而 ArrayBuffer 則是固定寬度的陣列資料,不過由於本身沒有記錄內容的型別,所以必須透過 ArrayBufferView 的物件、來指定內容的型別做存取(參考)。

而 Heresy 這邊,基本上就是使用 ArrayBuffer 來做資料的傳遞 C++ 裡面的陣列。

閱讀全文

C++ WebSocket 函式庫:WebSocket++

在上一篇《HTML5 WebSocket Client》裡,算是很簡單地介紹了 WebSocket 的概念,以及在網頁上、使用 JavaScript 開發 client 端程式的方法。而至於 Server 端呢?其實目前已經有很多方案,都可以用來建立 WebSocket Server 了。不過,由於 Heresy 這邊的需求,是要使用 C++ 搭配現有的函式庫來開發,所以不太適合使用一般的網站伺服器方案;而在稍微評估了一下後,後來是決定使用「WebSocket++」這個函式庫,來做為 C++ 環境的 WebSocket Server 開發方案。

WebSocket++ 的官方網站是:http://www.zaphoyd.com/websocketpp,他是採用 BSD License 的 OpenSource、跨平台函式庫,檔案則都放在 Github 上(網頁)。他目前最新的版本是 0.3.x,在 Github 上要切換到「experimental」這個 brahch;而這個版本的 WebSocket++ 基本上是使用 C++11 以及 Boost C++ Libraries 裡的 ASIO(官網)來實作的 Header-Only 的函式庫,所以在使用前不需要特別去建置這個函式庫、只要在需要時去 include 他的 Header 檔就可以了,相當地方便。

閱讀全文

HTML5 WebSocket Client

最近因為有需要開發互動式網頁,而且又需要頻繁地和 server 端坐溝通,所以除了 ajax 之外,也開始研究一些新的東西;而其中一個,就是可以更節省頻寬的 WebSocket、這個 HTML 5 的通訊方法了~

關於 WebSocket 的介紹,建議慶直接參考維基百科,或是 WebSocket.org 的介紹;完整的 API 則可以參考 W3C 的網頁。在 Heresy 來看,WebSocket 和傳統的 HTML 資料取得的方法相比,最大的好處,就是由於 WebSocket 是建立一個持續性的連線,不需要重複地不斷建立連線,所以可以有效地降低延遲、並且減少資料的傳輸輛。

像右圖就是 WebSocket.org 所提供的示意圖,可以看到隨著要求存取的次數的增加,傳統的「Polling」的資料存取方法所需的頻寬會上升地非常地快;相較之下,WebSocket 的頻寬則可以省非常地多。

閱讀全文

[轉載]如果要讓使用者討厭你,網站設計就這樣做吧

原文來自「科技報橘」的《如果要讓使用者討厭你,網站設計就這樣做吧》,原出處是《The 5 Worst UX Mistakes Websites Make》,內容是《UX Magazine》所整理的「做網站千萬別犯的 5 個 UX 錯誤」。

基本上,Heresy 個人是覺得,部分的內容,並不是只會出現在網頁上,而也是適用於一般的使用者介面的~由於覺得算是相當有參考價值,所以就轉過來,稍微紀錄一下了。

下面則是原文:

閱讀全文