《HTML5 完美風暴》第二版





隨著 HTML5 進入 CR 階段,2012年5月出版的《HTML5完美風暴》亦完成全新的版本修訂,為了將最新版的 Indexed Database API 規格納入,我們擴充了全新的第二十三章,讓書的內容更為紮實。同時亦另外增加一本輕小說「陳大刀傳」,讀者將能看到我們將 Canvas 功能運用在電子書的製作當中。


本書目前於各大通路販售中,歡迎購買閱讀學習,與我們一起進入 HTML5 的世界,關於本書的依何問題,歡迎於底下留言讓我們知道。


勘誤


》第 8-28頁表格中,最後一項 E~F 說明錯置,應調整為 「E元素之出現的F元素」

》第 8-12頁表格裡的E[foo~="bat"],其中的 "bat"應該以半型 "bat" 印刷。

》第 11-2頁最後兩行中,offline-msg-demo.css 改成 offline-demo.css ,offline-msg-demo.js 改成 offline-demo.js ,第 11-3 頁第 1 行 offline-msg-demo.html 改成 offline-demo.html 。

》第 11-4頁中間,「這是因為瀏覽器儲存了快取資料,而當它發現無法取得檔案時,便會直接從應用程式快取區域中取出先前儲存的網頁與相關的檔案」改成「這是因為瀏覽器儲存了快取資料,下次瀏覽時,瀏覽器會先檢查快取清單,若是沒有改變,會直接從應用程式快取區域中取出先前儲存的網頁與相關的檔案」 。

》第 10-65 頁
function clearCanvas_w(){
     canvas.width=canvas.height;  => canvas.width=canvas.width;
}

》第 11-31 頁的內容,印刷發生錯誤,誤植為 11-29,以下為正確的內容。


》第 14-15 頁,「再建立一個名稱為"HBOOK"的子目錄」,其中 HBOOK 改成 Html 以符合 14-14 頁的截圖。

》第 14-16 頁,程式碼說明第 5 行中的 TBOOK 改成 BOOK 。

》第 14-17 頁,範例 14-16 的載圖說明中,「Book資料夾以及info.txt檔案 … 」改成「Book資料夾以及html-demo.txt檔案」 。

》第 14-22 頁,第三行中,「file() 於 ErrorCallback …」改成 「file() 於 FileCallback …」 。

》第 14-28 頁,最後兩行從「除此之外,我們再一次寫入…」開始均為誤印冗字。

》第 14-31 頁,截圖下方的說明「…指定檔案 info.txt」改為「...指定檔案 html-demo.txt」。



19 則留言:

匿名 提到...

我有買第一版,書實在太厚了。

若可以把字縮小一點,
讓書本變薄一些,
會比較好閱讀。

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

Hi, 謝謝您的留言:

第二版我們將字還有空間都縮小了,但省下來的頁數,又補上一章完整的 Indexd Database API,所以頁數還是一樣厚了,真的不好意思

第二版的裝訂有進一步作補強,所以會更容易翻閱 ~~

這本書針對 HTML5 進行完整的介紹,目標是希望讀者有了這本書後,可以將入門 HTML5 所需的知識一次搞定,可以不需要再尋求其它的書籍來補足

HTML5內容浩瀚,寫到這麼厚實非得已,往後若是還有改版的空間,或許我們會將其拆成兩部來處理

無論如何,感謝您的支持,也祝您學習愉快

:)




匿名 提到...

第11章的 11-31是否印到11-29的內容?

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

查了一下,的確是的,我們將儘快補上勘誤說明,造成您的困擾非常抱歉 ~

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

已補上錯誤的 11-31 頁內容,請參考本貼文的最後勘誤內容,謝謝您。

匿名 提到...

8-28 頁 表格E~F 的意義應該解釋得不太對,該選擇器應該會選擇"所有F元素前面有E元素,且E與F有相同父元素"的所有F元素

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

E~F 表示如果F元素之前是 E 元素,則將此 F 元素挑出來,表格說明中應改為「E 元素之後出現的 F 元素」

謝謝您

匿名 提到...

8-12頁
表格裡的E[foo~="bat"]
是否全型"都改成半型"會比較好,初次看我還以為有空格。

9-59頁
function名稱是否都少了H
mousedownandler
mousemoveandler
--------------------------------
mousedownHandler
mousemoveHandler

10-65 頁
function clearCanvas_w(){
canvas.width=canvas.height;
}
是否改成
canvas.width=canvas.width;
會比較好,範例裡的寬度是480,高度是270,這樣寬度會變窄

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

其中9-59頁中的function名稱因為是自訂的,所以對程式沒影響,不過這是手誤,書重印時會調整回來

其它已更新至勘誤表,謝謝您的指正。:D

匿名 提到...

10-73頁裡的範例10-30
我感覺在這範例增加
context.save()以及context.restore()
似乎不能表達出應用這兩個方法的效果,就算拿掉那兩行出來的結果也是對的,因為沒有第二個狀態覆蓋第一筆狀態。
範例10-31因為是多個以上的狀態才明顯有把這兩個方法效果給用出來,所以範例10-30在這本書是否改成會因為有撰寫那兩個方法而產生影響會較好?不然感覺是多餘的範例:)

匿名 提到...

14-15 頁
再建立一個名稱為"HBOOK"的子目錄,應該把HBOOK改成與14-14頁的圖片相符的"HTML"的子目錄

14-16頁
"TBOOK"子目錄在範例14-5裡沒出現

14-17頁
筆者於其中新增了一個Book資料夾以及info.txt檔案
在範例的圖片裡,您是建立了html-demo.txt

14-22頁

方法file()於ErrorCallBack型態回呼函示successCallback()回傳File物件

那個ErrorCallBack型態,應該改成FileWriterCallback型態才對

14-28頁 最下面

你會發現@#$%&這些文字顯示在文字檔的最後方。"除此之外,我們再一次寫入另外三個連續字元XYZ,並且指定寫入的索引值為6",如下頁圖

下一頁的圖片沒有顯示"除此之外,我們再一次寫入另外三個連續字元XYZ,並且指定寫入的索引值為6"的執行結果,應該是誤打的文字吧

14-31頁
檔案info.txt,應該改成html-demo.txt,跟您的範例圖片才符合

15-8~15-11頁

您在13.5節有提到BlobBuilder 已經從Html5規格中被棄置了,可是範例15-2好像忘了改過來,還是用到BlobBuilder。
範例15-2的image-source.html要改成
function imgfile_change() {
var imgobject = document.getElementById('imgfile').files[0];
if (imgobject) {
var imgurl = window.URL.createObjectURL(imgobject);
document.getElementById('simage').src = imgurl;
}
}
image-target.html要改成
window.addEventListener("message", function (e) {
if (e.origin == locationurl) {
var imgurl = window.URL.createObjectURL(e.data);
document.getElementById('target-img').src = imgurl ;
}
}, false);
才能正常執行

15-14頁
star_source.html裡的
var target = window.open("http://localhost:2725/target.html", "cwin");
port 2725改成與您範例圖片相同的port 59163 可能較不會搞混

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

感謝讀者 :D

我們正逐一將錯誤的部份提上勘誤,造成學習困擾,在此先跟您說聲抱歉,您的不吝指正是我們進步非常重要的動力,再次感謝。

匿名 提到...

16-12頁的範例16-6
因為BlobBuilder HTML5已取消,所以書中該範例執行會錯誤。直接Blob格式物件就可。
worker-self.html 的script內容若改成
var worker;
window.onload = function () {
try {
var url = window.URL.createObjectURL(new Blob([jsstring]));
worker = new Worker(url);
worker.onmessage = function (event) {
document.getElementById("message").textContent =
event.data;
};
} catch (e) {
alert(e);
}
};
則可運行,但在chrome底下能執行,IE執行會有SecurityError 發生,若改成另外一種寫法,先額外增加另外一個js檔案worker-helpr.js
worker-helpr.js 內容只有
self.onmessage = function (e) {
self.onmessage = null; // Clean-up
eval(e.data);
};
再來把原本worker-self.html 的script內容改成以下內容,則IE也能動態建立背景執行的javaScript,不會有SecurityError出現
var worker;
window.onload = function () {
try {
worker = new Worker('worker-helper.js');
worker.postMessage(jsstring);

worker.onmessage = function (event) {
document.getElementById("message").textContent =
event.data;
};
} catch (e) {
alert(e);
}
};
範例16-7與16-9您也都是用BlobBuilder,所以也都不能執行,都要改成Blob直接傳入才可。

16-19頁上方
onconnect=function(e){//回應 message 事件...}的onconnect應該打錯,應該是onmessage

匿名 提到...

17-3頁
上放的圖的第二個,跨文件訊息傳遞被web Workers的字蓋住

17-15頁
下方的
:first-message
Data:
Data應該改成小寫的data

17-16頁上方的
data:

data

data
data
書上說這一段包含兩組設定,第一組與第二組data於觸發的事件中傳送空字串,我不太懂上面的文字與書中的說明之間的關係,第一組與第二組data是指?

17-21頁 上方的
es;=new EventSource('Server-stock.ashx?sid='+sidstring)
es;有誤打一個;

body onload="init()"
似乎onload="init()"是多寫的

18-8頁下方
Host: localhost:3600
Origin: http://localhost:2568
Sec-WebSocket-key:A9OcAJKc+WZOeYVZvjg5UW== 與您範例18-2圖片都不同,可能訊息一致會比較好

18-22頁
書中您這樣寫
int payload_data_length=(byte)(payload_data.Length);
memoryStream.WriteByte((byte)payload_data_length);
memoryStream.Write(payload_data, 0, payload_data_length);

不如直接這樣寫,還少一次轉型所花的overhead
memoryStream.WriteByte((byte)payload_data.Length);
memoryStream.Write(payload_data, 0,payload_data.Length);

另外該範例輸入超過125 bytes個就會當掉,因為WebSocket的header超過125個字又有不同的設定方式,可能要多個判斷式判斷長度是否超過125個bytes

Chu-Siang Lai 提到...

難得可以在買完書的同時得到作者的導讀,重點是還得到作者的簽名,真的是太棒了 :D

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

Hi,Chu-Siang Lai:希望課程與書對你有幫助,也祝你學習愉快,職涯順利 ~ :D

Jasper Lai 提到...

Hi, 您好:

有買了第一版的 HTML5 完美風暴; 剛剛在網路上查資料時, 看到似乎有第三版要出來了, 不知是否為真? 與前兩版相比較有何差異?

HTML5 完美風暴 (第三版)

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

Hi,Jasper Lai 您好:

年後會有第三版上市,除了修正錯誤的部份,另外還有針對規格定稿後的調整,最重要的一個是檔案讀寫相關 API ,第二版之後有新增一整章的 第十八章 Indexed Database ,第三版則新增第十一章 SVG ,第八章加入 RWD 的新內容,除此之外,有移除一小部份不合時宜的內容

第七章之後的章節有作了比較好的整理規畫,重新異動調整了。

原來光碟中的小案例也不再收錄。

如果第一或是第二版,不建議再重複購買囉,我們網站會陸續釋出關鍵的更新內容指引。

感謝留言,祝您學習愉快。

Jasper Lai 提到...

Hi, 您好:
謝謝您,
Best Regards,