《HTML5 完美風暴》


《HTML5 完美風暴》是我投入HTML5 技術領域之後的第一本完整技術圖書,也是早年個人完成C# 技術圖書的出版之後,多年以後再次撰寫格局超過1000 頁的全新著作,從開始整理資料、撰寫到後製出版,前後超過一年的時間,而在這段期間,全球科技產業的面貌早已發生翻天覆地的變化。

當賈伯斯在其Apple 公司的行動裝置平台上拒絕了Flash 並全力擁抱HTML5 ,全球Web 應用開發技術的發展終於走到了十字路口,而今賈伯斯已逝, Adobe 放棄了行動版Flash 的開發,加速轉向HTML5 設計工具的整合,另外一方面,微軟在其最新版的Windows 8 作業系統開發平台,更直接支援HTML5 的開發,網路上各種免費資源與相關函式庫的質量,則是以超乎想像的速度快速成長,一種跨平台,從視窗到瀏覽器、智慧型手機到筆記型電腦、電視到各種數位裝置通用的技術於焉誕生。

無論標準組織或是各種營利商業公司,全球正攜手推動HTML5 技術平台向前邁進,儘管實作有一些細節上的差異,然而因為遵循共同標準,使得跨平台的Web 應用開發成本得以降到最低,也因為瀏覽器的實作,讓各種先進的網路服務發展不再受特定廠商的制肘,HTML5 的出現, Web 應用程式跨越網路觸及使用者的最後一哩路,終於從特定廠商手裏完全被釋放出來。

網路科技經過幾個世代的發展終於成熟,瀏覽器的進化、行動科技的崛起、雲端時代的來臨、全球科技巨擘的共同力挺,還有被所有人接受的開放式標準,這些關鍵要素同時出現,正在全球形成一場完美的科技風暴,《HTML5 完美風暴》直擊HTML5 技術核心,從HTML 標籤的進化與擴充、CSS3 的設計整合到各種API ,全方位剖析這門新時代技術。


我們重視讀者的任何意見,關於《HTML5 完美風暴》一書的任何問題,包含內容釋疑、錯誤,相關的課程疑問,都請在這篇頁面底下留言,工作室將儘快為您提供需要的解答、服務與錯誤修正勘誤。

期待您的回應與交流。

36 則留言:

顏廷展 提到...

P 3-8
第一個details/summary裡面少了一個ul

康廷數位文教網 提到...

謝謝 廷展:

我們會儘快更新至勘誤表,如有任何問題還請不吝讓我們知道。

勘誤表:
http://html5.kangting.tw/books/ps/corrigendum.html


感謝 :)

顏廷展 提到...
作者已經移除這則留言。
顏廷展 提到...

雖然w3c上面有寫,不過目前 keygen 的 keytype還不支援EC跟DSA的樣子。

另外想請教一個問題
如何取得cliect的private key?

康廷數位文教網 提到...

hi,廷展 您好:

作法就如同 3-11 頁討論的,回傳之後可以直接再由 server 端丟出,就可以看到那一大串了 :)

這種東西的支持,目前還很陽春,我一直覺得要用在真正的線上系統還有很長的路要走就是了。

顏廷展 提到...

5-14的程式碼疑問

return false 不是等於

e.preventDefault()
加上
e.stopPropagation()
嗎?

為什麼e.preventDefault()後面還要加
return false?

查無此人 提到...

自從06/16上完課後,對HTML5的威力總算有個較踏實的感受,目前也準備把手上的東西逐步推向上課時所講的架構。對於八月要於台北開的課,若時間允許的話應該還是會去上,希望能提早公布上課日期、地點等infomation以利錯開時間。經過一星期思緒的沈澱後再把未讀完的 HTML5完美風暴 從頭開始看,也找出了一些自已覺得有問題的地方,提供您參考。

3-2
為什麼是不支援?印像中input應該是可以設type=time方式運作吧?
time 表示一組時間或是日期資料(未支援)。

3-32
這行最後的 > 看起來像是多的
原文:media="screen and ()color)">
建議:media="screen and ()color)"

3-41
倒數第4行,對於未來的瀏覽器而言,他們應該算是向 "前" 相容吧
原文:為了向後相容
建議:為了向前相容

查無此人 提到...

4-4
中間
原文:如果你在input元素裡面設定了dirname這個屬性,它會在回傳伺服器時同時一併將dir屬性值回傳伺服器。
建議:如果你在input元素裡面設定了dirname這個屬性,它會在回傳伺服器時同時一併將dirname屬性值回傳伺服器。

4-7
第2行,依據個人的程式邏輯,我覺得用 "或" 似乎比較合理
原文:會發現文字方塊不允許使用者選取並於其中輸入任何文字。
建議:會發現文字方塊不允許使用者選取或於其中輸入任何文字。

4-11
原本想說作者已經於勘誤中訂正了,沒想到還是不對,參照 http://www.w3schools.com/html5/tag_form.asp。

原文:formactionew
建議:formaction

原文:formenctypeew
建議:formenctype

4-16
原文:url URL 絕對IRI
建議:url URL 絕對URL

4-47
倒數第2行
原文:angeUnderflow
建議:rangeUnderflow

查無此人 提到...

6-15
程式碼 HighLight 位置好像不對
原文:<script> 這行
建議:<Section> 這行

6-17
第1行
原文:sectin
建議:section

第3行
原文:網頁中的的分組區塊定義。
建議:網頁中的分組區塊定義。

6-35
中間這個圖,抱歉我眼力沒好到在這麼深的背景下還能找的到第一個標題、第一個標題、第一個標題所要指的位置..
建議:背景顏色搞淺一點,才看的到線指的位置

6-43
倒數第2行
原文:index.hm
建議:index.htm

查無此人 提到...

更正一下
3-2
為什麼是不支援?應該是可以設<time datetime="2012-06-28"></time>方式運作吧?
time 表示一組時間或是日期資料(未支援)。

康廷數位文教網 提到...

HI, 謝謝你哦 :D

針對勘誤的部份您提到的這些,我這幾天處理完一些事,還有結束台北的課程下來,會再好好整理一下更新上去,真的很感謝您 :D

另外一方面,我在ASP.NET 課程上談到的,為了課程需要,已經簡化許多,在後續的日子裏,我這個網站會進一步釋出關於這方面的相關文章,包含 MVC 的運用,有機會再多多交流。

查無此人 提到...

7-12
box-ordinal-group屬性應該會從小排到大
原文:1 2 4 8 7
建議:1 2 4 7 8

7-16, 7-17
依據作者表達方式慣例,程式碼用會HeightLight告知讀者重點,例如這裡可能會標記在各個 box-ordinal-group 吧?

8-18
程式碼未寫出檔案編號 pesudo-first-last-type.html

康廷數位文教網 提到...

好的,謝謝「查無此人」,晚些就會更新上去囉,感謝再感謝 ,勞您這麼費心,這本書屆時再刷有新修訂版寄送一本給您 

任何問題,還請不吝讓我們知道 :D

查無此人 提到...

7-34 中間
原文:ottom
建議:bottom

12-20 中間
原文:session-crosspage_b.htm
建議:session-crosspage_b.html

12-27 最上面的程式碼檔名
原文:Sticky/pad.html
建議:Sticky/pad.htm

13-20 第3行
原文:xv'ideo
建議:xvideo

查無此人 提到...

21-10 中間
原文:按一下 HELLO 按鈕
建議:按一下 取得伺服器資料 按鈕

21-12 第1行
原文:調用此方塊必須小心指定參數
建議:調用此方法必須小心指定參數

查無此人 提到...

21-64 下面第3行
原文:xhrRequest-file.ash
建議:xhrRequest-file.ashx

康廷數位文教網 提到...

謝謝說明,今天再將勘誤表更新上去

另外,之前提到的一些問題,有些我並沒有調整,覺得保留原文下來即可,有些是整本書必須重新調整的地方,會再另外撰文作討論

感謝 查無此人

:D

Hans 提到...

4-6頁中有提到required-demo.htm(倒數第二行),但光碟中找不到此範例喔....

康廷數位文教網 提到...

謝謝 Hans ,的確是漏掉了,這個檔案很簡單,只是在網頁中配置一個 input 標籤,然後 設定了 required 屬性而已,為的是擷取書上 4-6 頁的那個截圖而已,勘誤表我再補上說明。

Cloud 提到...

11-11 頁最下方的 tab 頁籤 manifest-m.css 應修正為 manifest-m.txt

康廷數位文教網 提到...

謝謝 Cloud :我們將會補上勘誤清單中 :D

Cloud 提到...

11-33 頁 browser-state.html 的網頁內容, javascript 程式 function on_offline 重覆寫了 2 遍.

Cloud 提到...

11-34 頁第三行, 這一節就來看看如何透過 update() 與 swap() <--- 這裏應修正為 swapCache()

11-34 頁倒數第三行, 要特別注意 update() 與 swapUpdate() <--- 這裏應修正為 swapCache()

Cloud 提到...

11-36 頁倒數第三行, 會發現其實不需調用 swapUpdate() 亦能更新 <--- 這裏應修正為 swapCache()

查無此人 提到...

7-13 倒數第2行
原文:其中 A 的box-flex屬性值是 A 的三倍
建議:其中 B 的box-flex屬性值是 A 的三倍

7-43 第5行
原文:你會發現還其中還設定了column-gap這個屬性值為0
建議:你會發現其中還設定了column-gap這個屬性值為0

7-53 倒數第3行
原文:而被栽剪的部份同overflow屬性
建議:而被裁剪的部份同overflow屬性

林侑勳 提到...

hi!老師您好
我對這本書有濃厚的興趣
想在天瓏書局買
不過想看過實體的書
因為看一下內容感覺是不是我要的
雖然非常多人推薦

想請問老師
哪些實體書局可以看到此書
謝謝您

康廷數位文教網 提到...

Hi,侑勳 您好:

這本書在台北的天瓏門市或是益大資訊均有現書可以參考,少數的誠品門市會進個一本,可以打電話詢問您就近的門市,如果外縣市的話,我就無法確實得知那裏有現書了,因為這一本書目前的庫存已經很少了,而出版社舖貨的點似乎也不多,市面並不容易找。

這本書是針對 HTML5 的核心進行討論,所以不會有類似 DreamWeaver 之類的視覺化設計工具討論,全部都是探討規格與程式 API ,集中在純粹寫 Code 的部份,內容比較硬,適合寫 JavaScript 有一些基礎的開發人員。

不過書中也附了幾個完整的專案可以參考,如果你是寫 JavaScript Code 的開發人員,這本書是沒有問題的,可以讓你瞭解目前 HTML5 的核心內容議題,否果您是網頁視覺設計人員,那這本書就不適合您了。

以上請知悉,造成不便還請見諒。

:)

林侑勳 提到...

hi...老師!我敗了
哈哈哈!!囧...
謝謝天瓏不需要運費
讓我們這些南部小孩有個福利
更謝謝老師這麼棒的一本書

康廷數位文教網 提到...

Hi,侑勳 您好:

先祝您學習愉快 XD

研讀的過程中,記得回來檢視網站上的勘誤資訊 
http://html5.kangting.tw/books/ps/corrigendum.html

我們持續在改良這本書的內容,同時陸續發表相關的技術文件以及各種 HTML5 應用程式作品,有空歡迎多回來坐坐。

如有任何書中的問題,也歡迎討論。 :D

lin pokil 提到...

作者 您好,

我有買HTML5 完美風暴這本書,其中我參考第17章中"即時檢視股市資料" 來做測試程式

先說明一下 我的系統架構:

Client端:HTML5 & Javascript
Server端(外部網路):ASP , ASHX

我想要Client做個登入畫面,當按下Button時,啟動Javascript去Server端作驗證,接著再由Server端回傳驗證結果
但是我一直到 es = new EventSource("http://itemplatform/server_stock.ashx?ID=12345&PW=11111");

這段就會出錯,無法繼續下去,請問能幫我解答嗎? 感謝

在此提供我寫的程式碼,請幫我看看

[JavaScript]

function stockSearch() {
alert("in");
var msg = "";
var es;
var ID = "11691";
var PW = "11111";
alert("0");
es = new EventSource("http://itemplatform/server_stock.ashx?ID=12345&PW=11111");

alert("1");

es.onmessage = function (event) {
alert("2");
msg = event.data.toString;

if (msg = "0") {
alert("登入成功");
} else {
alert("登入失敗");
}
};
}

[Server]

Public Class server_stock : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim id As String = context.Request.QueryString(0)
Dim pw As String = context.Request.QueryString(1)
Dim data As String

context.Response.AppendHeader("Content-type", "text/event-stream")
context.Response.Write("data:" + DateTime.Now.ToString())
End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property

康廷數位文教網 提到...

hi,lin pokil 您好:EventSource有安全性的問題,必須是同源網站來源才能溝通哦。

康廷數位文教網 提到...

hi, lin pokil 你好:還有你這種功能請使用XMLHttpRequest 來作比較適當,請參考第21章有很詳細的說明,照著作就OK了 :D

lin pokil 提到...

你好,我參照21章的內容,有個疑問
就是 client.open('POST', 'xhRequest-form.ashx', false); 中的'xhRequest-form.ashx' 是否可以改成外網的網址? 例如 http://www.yahoo.com.tw 之類的?

感謝

康廷數位文教網 提到...

hi,lin pokil :HTML5跨越網路的溝通,因為安性的問題,都有同源的限制,也是就非同樣來源的網址是不行的哦,至於相關的議題,你可以 Google ,Ajax、同源、之類的關鍵字,可以找到很多的說明 :D

匿名 提到...

你好,請問一下,關於《HTML5 完美風暴》第二版預購活動,如果現在預購,因為是25名之內,但1/26當天無法參加,可否選擇參加1/27的場次呢?

康廷數位文教網 提到...

有幾位讀者亦提出相同的問題,這一部份我們將會作進一步的協調,屆時會有進一步的通知,我們每天晚上都會名單,再請注意一下,可以在 25名後進行預購,這樣可以確保 1/27 的場次,感謝您 :D