iT邦幫忙

html5相關文章
共有 218 則文章
鐵人賽 IT技術 DAY 18
且戰且走HTML5 系列 第 18

技術 且戰且走HTML5(18) 再看多人協同運作

單人操作白板,或是在瀏覽器間交錯操作,對運作的影響都不太大,但是我們要做的是多人同時操作,這時會發生什麼事呢? 昨天其實只試做出一個透過WebSocket協同運...

鐵人賽 IT技術 DAY 17
且戰且走HTML5 系列 第 17

技術 且戰且走HTML5(17) 將Canvas繪圖進一步抽象

之前針對白板塗鴉的需求,做好基本的抽象化。不過要利用從WebSocket傳來的資料繪圖,就需要進一步考慮。 在繪圖上,一個共享白板的技術需求主要有幾個重點:...

鐵人賽 IT技術 DAY 16
且戰且走HTML5 系列 第 16

技術 且戰且走HTML5(16) Canvas與Websocket整合

今天先思考一下,要把Canvas與WebSocket整合的話,需要怎樣的技術。順便調整一下之前寫好的Chat伺服器程式,以他為base來接上WebSocket。...

鐵人賽 IT技術 DAY 15
且戰且走HTML5 系列 第 15

技術 且戰且走HTML5(15) Canvas基本繪圖-架構調整

之前的程式碼看起來有些凌亂,所以稍微停下腳步,整理一下。 其實本來其實想自己實作AMD(Asynchronous Module Define),不過時間來不及,...

鐵人賽 IT技術 DAY 14
且戰且走HTML5 系列 第 14

技術 且戰且走HTML5(14) Canvas基本繪圖-打字

2D Context具備了基本的文字繪製功能,不過想要做成在Canvas可以直接打字的效果,還是需要花一些功夫嘗試。 雖然2D Context具備了文字繪製功能...

鐵人賽 IT技術 DAY 13
且戰且走HTML5 系列 第 13

技術 且戰且走HTML5(13) Canvas基本繪圖-更多圖形

只能畫長方形其實有點無趣,至少加上圓形跟橢圓形才能讓圖形更完整。另外,為了顯示一些繪圖工具的狀態,加入了自定事件的機制。 圓形用2D Context的arc方法...

鐵人賽 IT技術 DAY 13
只是路過 HTML5 系列 第 13

技術 HTML5 屬性、方法和事件

最近筆記分享了好幾篇Audio/Video的Methods(方法)、Properties(屬性)、和Events(事件)。 我今天想要單純針對這些方法、屬性、事...

鐵人賽 IT技術 DAY 12
且戰且走HTML5 系列 第 12

技術 且戰且走HTML5(12) Canvas基本繪圖-圖形

今天先建立一個可以比較彈性加入繪圖功能的機制,然後先嘗試塗鴉及長方形繪製來驗證這個機制。 主要的方向是,利用一個物件來集中管理2D Context的屬性及繪圖方...

鐵人賽 IT技術 DAY 11
只是路過 HTML5 系列 第 11

技術 HTML Audio/Video Events(1)

參考: http://www.w3schools.com/tags/ref\_av\_dom.asp HTML5 DOM 為 和 提供了Methods(方法)、...

鐵人賽 IT技術 DAY 11
且戰且走HTML5 系列 第 11

技術 且戰且走HTML5(11) Canvas基本繪圖-塗鴉

要製作一個簡單的繪圖應用,自由塗鴉應該是最基本的功能之一。所以就先來看一下怎麼做出來。 塗鴉其實只使用到2D Context的幾個操作方法,主要是lineTo與...

鐵人賽 IT技術 DAY 10
且戰且走HTML5 系列 第 10

技術 且戰且走HTML5(10) Canvas 及 2D context可以做到的事情

在使用Canvas 2D Context之前,先看看他有哪些能耐。 2D Context有一些全域屬性,這些屬性會與許多繪圖的動作相關,為了方便管理,2D Co...

鐵人賽 IT技術 DAY 10
只是路過 HTML5 系列 第 10

技術 HTML Audio/Video Properties(4)

參考: http://www.w3schools.com/tags/ref\_av\_dom.asp HTML5 DOM 為 和 提供了Methods(方法)、...

鐵人賽 IT技術 DAY 9
只是路過 HTML5 系列 第 9

技術 HTML Audio/Video Properties(3)

參考: http://www.w3schools.com/tags/ref\_av\_dom.asp HTML5 DOM 為<audio> 和&lt...

鐵人賽 IT技術 DAY 9
且戰且走HTML5 系列 第 9

技術 且戰且走HTML5(9) 應用的主軸:Canvas

Canvas是HTML5中很熱門的技術,目前已經有非常多的應用。接下來就會以Canvas做主角,逐漸發展出應用。先來簡單了解一下Canvas是什麼。 其實Fir...

鐵人賽 IT技術 DAY 8
且戰且走HTML5 系列 第 8

技術 且戰且走HTML5(8) Socket.IO的架構與連線管理機制

其實Socket.IO的文件並不完整,雖然不需要完整的說明就可以使用,但是要清楚他的功能跟架構的話,大概要直接追蹤原始碼。 打開socket.io目錄中的pac...

鐵人賽 IT技術 DAY 8
只是路過 HTML5 系列 第 8

技術 HTML Audio/Video Properties(2)

參考: http://www.w3schools.com/tags/ref\_av\_dom.asp HTML5 DOM 為<audio> 和&lt...

鐵人賽 IT技術 DAY 7
且戰且走HTML5 系列 第 7

技術 且戰且走HTML5(7) 進階的Chat應用

管理連線、利用Storage來存放變數其實也是Socket.IO內建的功能。另外,也稍微追蹤一下原始碼,看看要怎麼做出更複雜的功能。 管理連線主要有兩個部分。S...

鐵人賽 IT技術 DAY 7
只是路過 HTML5 系列 第 7

技術 HTML Audio/Video Properties(1)

參考: http://www.w3schools.com/tags/ref\_av\_dom.asp HTML5 DOM 為<audio> 和&lt...

鐵人賽 IT技術 DAY 6
只是路過 HTML5 系列 第 6

技術 HTML Audio/Video Methods

參考: http://www.w3schools.com/tags/ref\_av\_dom.asp HTML5 DOM 為<audio> 和&lt...

鐵人賽 IT技術 DAY 6
且戰且走HTML5 系列 第 6

技術 且戰且走HTML5(6) 多人協同運作

觀察一下目前有哪些有趣的多人協同運作的應用,並且稍微考慮一下想在鐵人賽中實作應用的範圍與技術的困難度。 今天是週日,輕鬆一點,來稍微思考一下多人協同運作的應用,...

鐵人賽 IT技術 DAY 5
且戰且走HTML5 系列 第 5

技術 且戰且走HTML5(5) 更深入Socket.IO

除了使用簡單,Socket.IO更內建了一些Chat必須的邏輯,可以減少一些開發的工作。 如果一個Chat只能支援一個聊天室,那功能就太簡單了。今天來看一下,要...

鐵人賽 IT技術 DAY 5
只是路過 HTML5 系列 第 5

技術 HTML5的Video標籤(3)

介紹在<video>裡可以放置的特性(Attributes)- control preload loop muted control 指定是否顯示控...

鐵人賽 IT技術 DAY 4
只是路過 HTML5 系列 第 4

技術 HTML5的Video標籤(2)

audio和video都是Media Elements- 介紹在<video>裡可以放置的特性(Attributes)- src autoplay...

鐵人賽 IT技術 DAY 4
且戰且走HTML5 系列 第 4

技術 且戰且走HTML5(4) 基本的Chat應用

大致上了解了Socket.IO的使用方式,接下來就來試試看,怎樣用它做出簡單的Chat功能。 基本的Chat應用,在伺服器端其實跟單純的Echo差不多。只是原本...

鐵人賽 IT技術 DAY 3
且戰且走HTML5 系列 第 3

技術 且戰且走HTML5(3) 使用Socket.io

WebSocket必須要有伺服器端的支援才能運作,所以來看看Node.js最多人使用的Socket.IO怎麼使用。 Socket.IO是Node.js上最早的W...

鐵人賽 IT技術 DAY 3
只是路過 HTML5 系列 第 3

技術 HTML5的Video標籤(1)

應該要先講HTML5的結構 > < 但剛好最近在研究Video標籤。 今天分享筆記: 影片檔是什麼? 編譯解碼器是什麼? 簡單使用&lt...

鐵人賽 IT技術 DAY 2
且戰且走HTML5 系列 第 2

達標好文 技術 且戰且走HTML5(2) 應用主軸:WebSocket

WebSocket是瀏覽器與伺服器交換資料的方式之一,與HTTP最大的不同是,他是一個持續的雙向的連線,所以沒有重新連線,重新傳送檔頭等多餘的負荷,反應更即時。...

鐵人賽 IT技術 DAY 1
只是路過 HTML5 系列 第 1

技術 HTML5的相關網站介紹

過去的HTML,對視覺設計者和程式開發者而言,在網頁製作上較為困難和辛苦。 HTML5則是將內容和外觀明確的訂定出來。 學習新技術之前,會先找一些資料, 分享小...

鐵人賽 IT技術 DAY 1
且戰且走HTML5 系列 第 1

達標好文 技術 且戰且走HTML5(1) 前言:為何且戰且走

HTML5有許多規格已經即將成為穩定的標準,不過還有很多有趣的東西還沒有進入這個階段,而這些功能其實對於實作一個Web應用來說,其實也非常關鍵。 除了已經大致穩...

技術 Mac Pow + Html5 應用

由於在學習RoR的時候使用了一個好東西 Pow 這陣子要拿來單純測試Html5 卻一直出現Not Found 這篇文章記錄一下解決問題的過程 雖然在Mac上We...