สร้างวิดเจ็ต HTML5 สำหรับ iBooks Author

ดูวิธีสร้างวิดเจ็ต HTML5 ซึ่งคุณสามารถใช้ในหนังสือที่คุณสร้างขึ้นใน iBooks Author

iBooks Author รองรับวิดเจ็ต HTML5 ซึ่งมีนามสกุลชื่อไฟล์ .wdgt หากต้องการสร้างวิดเจ็ต HTML5 ให้ใช้โปรแกรมแก้ไขข้อความหรือแอพสร้างคอนเทนต์เพื่อสร้างไฟล์สามไฟล์ดังต่อไปนี้

  • ไฟล์ HTML หลัก: ไฟล์นี้คือส่วนหลักของวิดเจ็ต ซึ่งสามารถมีชื่อใดก็ได้ที่คุณต้องการ แต่นามสกุลจะต้องเป็น .html คุณสามารถใส่ CSS และ JavaScript ข้างในไฟล์ HTML หลัก หรือเพิ่มไฟล์ .css และ .js ในบันเดิลของวิดเจ็ต แล้วโหลดไฟล์เหล่านั้นจากไฟล์ HTML หลัก โดยสามารถใช้เทคนิคใดก็ได้ที่คุณต้องการใช้ในการออกแบบเว็บเพจ ใช้ HTML เพื่อกำหนดโครงสร้างของวิดเจ็ต ใช้ CSS เพื่อกำหนดรูปแบบภาพ และใช้ JavaScript เพื่อทำให้เป็นแบบอินเทอร์แอ็คทีฟ 
  • ไฟล์ Default.png: วิธีที่ง่ายที่สุดในการสร้าง Default.png คือ การใช้ภาพหน้าจอของไฟล์ HTML หลักในแอพสร้างเว็บคอนเทนต์หรือเว็บเบราเซอร์ โดยจะเป็นภาพที่ผู้อ่านจะเห็นในหน้า และแตะเพื่อเปิดวิดเจ็ต ในเว็บเบราเซอร์หรือแอพสร้างเว็บคอนเทนต์ ให้ถ่ายภาพหน้าจอของไฟล์ HTML หลัก ตั้งชื่อว่า "Default.png" และให้แน่ใจว่าใช้ "D" ตัวพิมพ์ใหญ่ เมื่อวิดเจ็ตเปิดใช้งานก็จะเป็นขนาดของไฟล์ Default.png โดยคุณสามารถเปลี่ยนขนาดได้ในไฟล์ Info.plist
  • ไฟล์ Info.plist: ไฟล์นี้จะให้ข้อมูลที่ iBooks Author และ iBooks ต้องใช้ในการเรียกใช้วิดเจ็ต โดยชื่อไฟล์จะต้องเป็น "Info.plist"

หลังจากที่คุณสร้างไฟล์ที่กำหนดเหล่านี้แล้ว ให้สร้างไฟล์เสริมใดก็ได้ที่คุณต้องการ เช่น ไฟล์ CSS หรือ JavaScript จากนั้นให้เพิ่มไฟล์เหล่านั้นลงในบันเดิลของวิดเจ็ต โดยทำดังนี้

  1. ใน Finder ให้สร้างโฟลเดอร์ขึ้นมาโฟลเดอร์หนึ่ง
  2. เพิ่มไฟล์ลงในโฟลเดอร์ใหม่
  3. เปลี่ยนชื่อโฟลเดอร์แล้วเพิ่มนามสกุล .wdgt ลงในชื่อโฟลเดอร์เพื่อสร้างบันเดิลของวิดเจ็ต ไอคอนโฟลเดอร์จะเปลี่ยนเป็นไอคอนวิดเจ็ต
  4. เพิ่มวิดเจ็ตลงใน iBooks Author

เคล็ดลับในการสร้างวิดเจ็ต

ก่อนที่คุณจะสร้างบันเดิลของวิดเจ็ต ให้ตรวจสอบว่าไม่มีไฟล์ใดในบันเดิลที่มีอักขระควบคุมอยู่ในชื่อไฟล์ หากมีไฟล์ใดที่มีอักขระควบคุมอยู่ในชื่อไฟล์ คุณจะไม่สามารถเผยแพร่หนังสือไปยัง iBooks Store ได้

หากคุณตั้งค่าให้วิดเจ็ตเล่นโดยอัตโนมัติ วิดเจ็ตก็จะไม่สามารถเข้าถึงอินเทอร์เน็ตได้ 

อย่าใช้ไอคอนโฟลเดอร์แบบกำหนดเอง และหลีกเลี่ยงการใช้ชื่อโฟลเดอร์เหล่านี้ในวิดเจ็ต

  • Resources/
  • Support Files/Resources/
  • Contents/Resources/

หากต้องการปรับวิดเจ็ตให้เหมาะกับจอภาพ Retina ให้ทำดังนี้

  • ในไฟล์ HTML, CSS และ JavaScript ให้ใช้โปรโตคอลมาตรฐานสำหรับเว็บไซต์ที่มีกราฟิก Retina (2x) 
  • รวมไฟล์ Default@2x.png ไว้ในวิดเจ็ต ทำให้ไฟล์มีความละเอียดเป็นสองเท่าของไฟล์ Default.png โดยคุณจะไม่เห็นไฟล์นี้ใน iBooks Author แต่คุณจะเห็นได้ใน iBooks บนจอภาพ Retina

ดูเพิ่มเติมเกี่ยวกับวิธีการปรับความเหมาะสมของหนังสือที่คุณสร้างด้วย iBooks Author

Info.plist

ไฟล์ Info.plist ของวิดเจ็ตพื้นฐานจะประกอบด้วยคีย์บังคับบางคีย์และคีย์เสริมบางคีย์ ตารางนี้จะแสดงรายการคีย์เหล่านี้ คำจำกัดความของคีย์ รวมถึงค่าตัวอย่างบางค่าสำหรับวิดเจ็ตที่เรียกว่า "Hello World" 

คีย์ ค่าตัวอย่าง จำเป็น คำจำกัดความ
CFBundleDevelopmentRegion English ไม่บังคับ สตริงที่ระบุถิ่นกำเนิดสำหรับบันเดิล ซึ่งปกติแล้วจะตรงกับภาษาท้องถิ่นของผู้ที่สร้างบันเดิลนั้น 
CFBundleDisplayName Hello World จำเป็น สตริงที่มีชื่อจริงของวิดเจ็ต ซึ่งจะแสดงใน iBooks Author และ iBooks
CFBundleIdentifier com.apple.widget.HelloWorld จำเป็น สตริงที่ระบุความเป็นเอกลักษณ์ของวิดเจ็ต ในรูปแบบโดเมนที่กลับกัน
CFBundleName Hello World ไม่บังคับ สตริงที่มีชื่อวิดเจ็ตของคุณ จะต้องตรงกับชื่อบันเดิลของวิดเจ็ตใน Finder ลบนามสกุลไฟล์ .wdgt
CFBundleShortVersionString 1.0 ไม่บังคับ สตริงที่กำหนดหมายเลขเวอร์ชั่นแบบสั้นของวิดเจ็ต โดยมักจะเหมือนกับ CFBundleVersion
CFBundleVersion 1.0 ไม่บังคับ สตริงที่กำหนดหมายเลขเวอร์ชั่นของวิดเจ็ต
ความสูง 768 ไม่บังคับ หมายเลขที่กำหนดความสูงในหน่วยพิกเซลของวิดเจ็ต หากไม่ได้ระบุไว้ จะใช้ความสูงของ Default.png
MainHTML HelloWorld.html จำเป็น สตริงที่กำหนดชื่อไฟล์ HTML ที่นำวิดเจ็ตไปใช้
ความกว้าง 1024 ไม่บังคับ หมายเลขที่กำหนดความกว้างในหน่วยพิกเซลของวิดเจ็ต หากไม่ได้ระบุไว้ จะใช้ความกว้างของ Default.png
IBNotifiesOnReady <true/> ไม่บังคับ เมื่อตั้งค่าเป็น true วิดเจ็ตจะบอก iBooks ว่าเมื่อใดจึงจะเปลี่ยนจากการแสดง Default.png ไปเป็นการแสดงวิดเจ็ต HTML ที่เรียกใช้งานอยู่ 

 

Info.plist ที่สมบูรณ์สำหรับวิดเจ็ตจะมีลักษณะดังนี้ 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>English</string>
	<key>CFBundleDisplayName</key>
	<string>Hello World</string>
	<key>CFBundleIdentifier</key>
	<string>com.apple.widget.HelloWorld</string>
	<key>CFBundleName</key>
	<string>Hello World</string>
	<key>CFBundleShortVersionString</key>
	<string>1.0</string>
	<key>CFBundleVersion</key>
	<string>1.0</string>
	<key>Height</key>
	<integer>768</integer>
	<key>MainHTML</key>
	<string>HelloWorld.html</string>
	<key>Width</key>
	<integer>1024</integer>
	<key>IBNotifiesOnReady</key>
	<true/>
</dict>
</plist>

ข้อจำกัดและขีดจำกัดของคีย์

ห้ามใช้คีย์เหล่านี้ เนื่องจากคุณสมบัติไม่สามารถทำงานร่วมกันได้

คีย์ คำอธิบาย
AllowFileAccessOutsideOfWidget วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author จะไม่สามารถเข้าถึงไฟล์ในระบบไฟล์ทั่วไปได้
AllowFullAccess ชวเลขสำหรับรายชื่อคีย์ในการเข้าถึงอื่นๆ ซึ่งบางอย่างจะไม่สามารถทำงานร่วมกันได้
AllowInternetPlugins ปลั๊กอินของอินเทอร์เน็ต อย่างเช่น Flash จะไม่มีให้ในหนังสือที่สร้างด้วย iBooks Author คุณสามารถใส่ภาพยนตร์และเสียงได้โดยใช้องค์ประกอบ <วิดีโอ> และ <เสียง> แบบ HTML5
ภาพยนตร์และเสียงภายในวิดเจ็ต HTML จะไม่ได้รับการป้องกัน DRM
AllowJava วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author ไม่สามารถมีคอนเทนต์ Java ได้
AllowSystem วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author ไม่สามารถเข้าถึงคำสั่งของระบบได้
ปลั๊กอิน วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author ไม่สามารถมีองค์ประกอบปลั๊กอิน Cocoa ได้

iBooks Author จะข้ามคีย์เหล่านี้

คีย์ คำอธิบาย
CloseBoxInsetX วิดเจ็ตใน iBooks Author และ iBooks จะไม่แสดงการตกแต่งแบบปิด
CloseBoxInsetY  

 

แบบอักษร วิดเจ็ต iBooks Author ไม่สามารถใช้แบบอักษรแบบเป็นชุดได้

ข้อกำหนดด้านวิดีโอและเสียง

คุณไม่สามารถใช้สื่อที่มีไฟล์นามสกุล .m4v หรือ .m4p ได้ ใช้หนึ่งในรูปแบบเหล่านี้กับไฟล์นามสกุล .mp4

  • วิดีโอ H.264: สูงสุด 720p, 60 เฟรมต่อวินาที โปรไฟล์ High Level 4.2 พร้อมเสียง AAC-LC สูงสุด 160 kbps, 48 kHz, เสียงสเตอริโอ วิดีโอที่เปิดใน iMovie 10 ซึ่งมีตัวเลือก HD 720p จะใช้การตั้งค่าเหล่านี้
  • วิดีโอ MPEG-4: สูงสุด 2.5 Mbps, 640 x 480 พิกเซล, 30 เฟรมต่อวินาที โปรไฟล์ Simple พร้อมเสียง AAC-LC สูงสุด 160 kbps ต่อช่องสัญญาณ, 48kHz, เสียงสเตอริโอ

สำหรับเสียง ให้ใช้ AAC (8 ถึง 320 Kbps, 48 kHz สเตอริโอ) ที่มีนามสกุลไฟล์ .m4a

สื่อวิดีโอและเสียงในบันเดิลของวิดเจ็ต HTML จะไม่ได้รับการป้องกัน DRM

หากภาพยนตร์หรือไฟล์เสียงไม่เล่นในวิดเจ็ตใน iBooks Author ให้ดูตัวอย่างบน iPhone, iPad หรือ Mac ซึ่งจะแสดงให้คุณดูว่าไฟล์จะเล่นเป็นอย่างไรในหนังสือฉบับสมบูรณ์

การแปลเป็นภาษาท้องถิ่น

iBooks Author ไม่รองรับสตริงและแอสเซทที่ผ่านการแปล รวมสตริงข้อความในภาษาเป้าหมายที่ผู้อ่านสามารถมองเห็นได้ในบรรทัด

องค์ประกอบที่ถูกตัดแบบคงที่

องค์ประกอบอย่างเช่น <วิดีโอ> อาจปรากฏโดยถูกตัดที่ด้านหนึ่ง กรณีนี้เกิดขึ้นได้หากองค์ประกอบดังกล่าวมีขนาดใหญ่กว่าพื้นที่ที่มีให้ ค้นหา "width:auto" จาก CSS ในตัวเลือก #video แล้วเปลี่ยนค่าให้แสดงขนาดจริง ตัวอย่างเช่น วิดเจ็ตอาจมีวิดีโอที่มีขนาด 960 x 540 ตรวจสอบ CSS สำหรับตัวเลือกที่สัมพันธ์กัน แล้วกำหนดความกว้างและความสูงเป็นค่าที่ถูกต้อง ดังนี้

#video   {
	width: 960;
	height: 540;
}

การพัฒนาสำหรับ iOS และ macOS

iOS และ macOS ใช้ประเภทการป้อนข้อมูลที่แตกต่างกัน โดยคุณสามารถจัดเตรียมได้ทั้งการป้อนข้อมูลด้วยการสัมผัสและด้วยเมาส์ เมื่อสร้างวิดเจ็ต HTML สำหรับ iBooks Author

หลีกเลี่ยงการกะพริบเมื่อผู้อ่านเปิดวิดเจ็ต HTML

หากวิดเจ็ต HTML มีความซับซ้อนมาก ผู้อ่านอาจเห็นการกะพริบเมื่อเปิดวิดเจ็ตนั้นใน iBooks เพื่อหลีกเลี่ยงการกะพริบ ให้อัพเดทวิดเจ็ตเพื่อให้บอก iBooks ว่าเมื่อใดจึงจะเปลี่ยนจากไฟล์ Default.png มาเป็นวิดเจ็ต HTML โดยทำดังนี้

1. เพิ่มรายการ "IBNotifiesOnReady" ที่ตั้งค่าเป็น true ในไฟล์ Info.plist ของวิดเจ็ต วิธีนี้จะทำให้ iBooks ทราบว่าวิดเจ็ตจะบอกให้รู้เมื่อถึงเวลาเปลี่ยนเป็นวิดเจ็ต HTML

<key>IBNotifiesOnReady</key>
 <true/>






2. ตั้งค่าวิดเจ็ตให้โหลดคลัง Apple JavaScript ในส่วน <หัว> ของไฟล์ HTML ดังนี้

<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>

iOS และ macOS มี AppleWidget.js อยู่แล้ว คุณจึงไม่ต้องรวมไว้ในบันเดิลของวิดเจ็ต

3. ตั้งค่าวิดเจ็ตให้เตือน iBooks เมื่อเริ่มใช้ HTML  ใน JavaScript ที่อยู่ในส่วน<หัว> ของไฟล์ HTML file ให้เรียกดังนี้

widget.notifyContentIsReady()

การโพสต์ลงในบริการเว็บภายนอก

คุณสามารถโพสต์วิดเจ็ต HTML ลงในบริการเว็บภายนอกได้ก็ต่อเมื่อวิดเจ็ตเหล่านั้นใช้ส่วนหัว Cross-Origin Resource Sharing (CORS) ที่ถูกต้อง

วันที่เผยแพร่: