大家看到 win8 的開始畫面，有沒有覺得一格一格的，裡面還有東西會亂動 XD 有人稱他 Metro Style ，但我喜歡稱他 Windows UI，因為在開...
CSS不斷的進化及改變，在過去所遇到的問題、解決方式現在都有著不同的解決方法。在接觸網頁設計一年多，不斷的學習CSS技術，到頭來發現這項技術是沒有極限的，每天都...
介紹我的主題『HTML5 X JavaScript 開發 Windows 8 Apps』，以及我要分享的內容。 大家好，我是win， 目前是一位菜 Fronte...
那些年，我們一起讓瀏覽器當掉的日子 昨天提到了 Worker 就像是主從式架構一樣，有要求才有產出，而前後端的任務切割，就是在將商業邏輯與頁面呈現區隔開來。但隨...
各位「網路工作者」大家好！ Web Worker 是由 W3C 以及 WHATWG 共同制定出來的API，讓 javascript 可以獨立在背景執行而不會影響...
我不是做美術設計的料，但是又希望成品可以美觀一點，這時還是借助一些方法來讓介面好看一點。 自從twitter發佈了bootstrap，看起來真的不少人做過嘗試。...
今天先建立起簡單的視訊會議做驗證。 建立視訊會議的方式，基本上就是昨天描述的過程的實作。連線資訊的傳遞，則透過之前包裝好的ws.io模組。 首先看一下伺服器：...
WebRTC主要的重點是建立瀏覽器之間的即時網路通訊，不過這個規格還很新，基本上能完整支援的瀏覽器目前只有Chrome21以上的版本。不過他能做的應用非常有趣，...
這雖然和前端技術有點像是扯不上關係 但是這和前端的美好未來可能有很多的關係，私心啦!! 你知道判斷一個網站有沒有運用HTML5技術最好的方法嗎? 就是用IE開啊...
依照昨天的構想，把傳送binary資料的功能也實作出來了，就把它用在資源分享上。 分成兩個部分來傳送資料，基本上問題不大，但是要實作，需要在使用方法上制定一些規...
找到問題所在...該來完成ws.io的單元了 這種事情要在腦袋清楚的時候來解決阿...趕稿的時候一定想不出來 由於架構模仿了Socket.IO，問題變得比較複雜...
其實還沒有真的完成，因為這個工作幾乎等於重寫Socket.IO...不過還是來看一下目前進行的狀況 主要的改寫還是在幾個部分，跟昨天的程式比起來，還需要在Man...
先把類似Socket.IO的操作方式加進來，然後開始測試，先從echo開始。 雖然先把namespace、room、broadcast等功能都先加進來，不過目前...
談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。 HTML5 其實還是HTML，只是像軟體有更新一樣，HTML也更新到HTML5而且有更多的功能，具...
既然要用到File API以及URL（或者叫做Blob URL），還是對他做一個簡單的了解。 File API目前主要定義了幾個介面，主要是：Blob、File...
線上會議的應用，除了需要像是視訊、Chat等的機制外，通常也會需要做一些資源分享。先來考慮一下需求，然後看看怎樣實作。 基本上，這裡說的資源共享，主要還是檔案。...
昨天發現了在多人協同繪圖時，會有無法解決的問題。問題主要在於繪圖的動作與WYSIWYG的需求不一致，導致動作的衝突無法解決。要解決這樣的衝突，方法之一就是用兩個...
單人操作白板，或是在瀏覽器間交錯操作，對運作的影響都不太大，但是我們要做的是多人同時操作，這時會發生什麼事呢？ 昨天其實只試做出一個透過WebSocket協同運...
之前針對白板塗鴉的需求，做好基本的抽象化。不過要利用從WebSocket傳來的資料繪圖，就需要進一步考慮。 在繪圖上，一個共享白板的技術需求主要有幾個重點：...
今天先思考一下，要把Canvas與WebSocket整合的話，需要怎樣的技術。順便調整一下之前寫好的Chat伺服器程式，以他為base來接上WebSocket。...
之前的程式碼看起來有些凌亂，所以稍微停下腳步，整理一下。 其實本來其實想自己實作AMD(Asynchronous Module Define)，不過時間來不及，...
2D Context具備了基本的文字繪製功能，不過想要做成在Canvas可以直接打字的效果，還是需要花一些功夫嘗試。 雖然2D Context具備了文字繪製功能...
只能畫長方形其實有點無趣，至少加上圓形跟橢圓形才能讓圖形更完整。另外，為了顯示一些繪圖工具的狀態，加入了自定事件的機制。 圓形用2D Context的arc方法...
最近筆記分享了好幾篇Audio/Video的Methods(方法)、Properties(屬性)、和Events(事件)。 我今天想要單純針對這些方法、屬性、事...
今天先建立一個可以比較彈性加入繪圖功能的機制，然後先嘗試塗鴉及長方形繪製來驗證這個機制。 主要的方向是，利用一個物件來集中管理2D Context的屬性及繪圖方...
參考: http://www.w3schools.com/tags/ref_av_dom.asp HTML5 DOM 為 和 提供了Methods(方法)、Pr...
要製作一個簡單的繪圖應用，自由塗鴉應該是最基本的功能之一。所以就先來看一下怎麼做出來。 塗鴉其實只使用到2D Context的幾個操作方法，主要是lineTo與...
在使用Canvas 2D Context之前，先看看他有哪些能耐。 2D Context有一些全域屬性，這些屬性會與許多繪圖的動作相關，為了方便管理，2D Co...
參考: http://www.w3schools.com/tags/ref_av_dom.asp HTML5 DOM 為 和 提供了Methods(方法)、Pr...
卡斯伯
yiying
fillano
chibc
iamya
iThome鐵人賽
看影片追技術