iBooks Author: เกี่ยวกับการสร้างวิดเจ็ต HTML

คุณสามารถสร้างวิดเจ็ต HTML5 เพื่อใช้กับหนังสือที่คุณสร้างใน iBooks Author

iBooks Author จะรองรับวิดเจ็ต HTML5 (ที่มีนามสกุล .wdgt)

หากต้องการสร้างวิดเจ็ต HTML สำหรับ iBooks Author โปรดใช้โปรแกรม Text Editor หรือแอปฯ การสร้างเนื้อหาเว็บเพื่อสร้างไฟล์ต่อไปนี้:

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

เมื่อคุณสร้างไฟล์บังคับสามไฟล์แล้ว (และบางทีอาจมีไฟล์เสริมบางไฟล์ เช่น CCS หรือ JavaScript) ให้รวมเข้าไปในบันเดิลของวิดเจ็ต:

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

ตอนนี้วิดเจ็ตของคุณก็พร้อมที่จะเพิ่มลงใน iBooks Author แล้ว

หมายเหตุ

  • หากหนังสือของคุณมีวิดเจ็ต HTML ที่มี ไฟล์ที่มีอักขระควบคุมในชื่อไฟล์ จะไม่สามารถเผยแพร่ลงใน iBooks Store ได้ ก่อนที่คุณจะสร้างบันเดิลของวิดเจ็ต ตรวจสอบให้แน่ใจว่าไม่มีไฟล์ใดที่มีบันเดิลที่ใช้อักขระเหล่านี้ในชื่อไฟล์ อย่าใช้ไอคอนโฟลเดอร์ที่กำหนดขึ้นเอง
  • หลีกเลี่ยงการรวมโฟลเดอร์ที่มีชื่อเหล่านี้ข้างในบันเดิลของวิดเจ็ต:
    • ทรัพยากรข้อมูล/
    • ไฟล์สนับสนุน/แหล่งข้อมูล/
    • เนื้อหา/แหล่งข้อมูล/
  • หากคุณกำลังสร้างเนื้อหาสำหรับ iPad หรือ Mac ที่มีจอแสดงผล Retina:
    • เมื่อตั้งรหัสไฟล์ HTML, CSS และ JavaScript ให้ทำตามโปรโตคอลมาตรฐานสำหรับการสร้างเว็บไซต์ที่มีกราฟิก Retina (2x) 
    • บันเดิลของวิดเจ็ตของคุณควรมีไฟล์ Default@2x.png รวมอยู่ด้วย ซึ่งควรจะมีความละเอียดเป็นสองเท่าของไฟล์ Default.png คุณจะไม่สามารถดูไฟล์นี้ได้ใน iBooks Author ได้ แต่จะแสดงใน iBooks บน iPad หรือ Mac ที่มีจอแสดงผล Retina 
  • หากคุณต้องการให้วิดเจ็ตของคุณใช้พื้นที่เต็มหน้าจอเมื่อซูมเข้า โปรดทำขนาด Default.png เท่ากับ 768 x 1024 พิกเซล และ Default@2x.png เท่ากับ 1536 x 2048 พิกเซล หากคุณต้องการให้วิดเจ็ตของคุณแสดงผลเล็กกว่าหน้าจอเต็ม ให้ทำขนาด Default.png ตามที่คุณต้องการให้วิดเจ็ตแสดงผล (ตัวอย่างเช่น 600 x 900) และทำ Default@2x.png ให้มีขนาดสองเท่าของค่านั้น
  • เรียนรู้เพิ่มเติมเกี่ยวกับ การทำหนังสือที่สร้างด้วย iBooks Author ให้เหมาะสมที่สุด

Info.plist 

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

CFBundleDevelopmentRegion อังกฤษ ไม่บังคับ สตริงที่ระบุถิ่นกำเนิดสำหรับบันเดิล ซึ่งปกติแล้วจะตรงกับภาษาท้องถิ่นของผู้ที่สร้างบันเดิลนั้น 
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 <จริง/> ไม่บังคับ เมื่อตั้งค่าไปที่ จริง วิดเจ็ตจะบอก 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 ไม่สามารถใช้แบบอักษรแบบ Bundled

ข้อกำหนดสำหรับภาพยนตร์และเสียง

คุณไม่สามารถใช้สื่อที่มีนามสกุลไฟล์ ".m4v" หรือ ".m4p" 

ขอแนะนำให้คุณใช้วิดีโอ H.264 ในตัวบรรจุ MPEG-4 ที่มีนามสกุลไฟล์ ".mp4"

สำหรับเสียง ขอแนะนำให้คุณใช้เสียง AAC ในตัวบรรจุ MPEG-4 ที่มีนามสกุลไฟล์ ".m4a"

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

หมายเหตุ: ในบางกรณี ไฟล์ภาพยนตร์และเสียงในวิดเจ็ต HTML อาจไม่เล่นใน iBooks Author แต่จะเล่นใน iBooks หากคุณไม่สามารถเล่นภาพยนตร์หรือไฟลเสียงในวิดเจ็ตของคุณใน iBoos Author ลองดูตัวอย่างบน iPad หรือดูด้วย OS X Mavericks ซึ่งควรจะแสดงให้คุณดูว่าจะเล่นไฟล์เป็นอย่างไรในหนังสือฉบับสมบูรณ์ของคุณ

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

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

องค์ประกอบคลิป

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

#video    {       ความกว้าง: 960;       ความสูง: 540;}

การพัฒนาสำหรับ iOS และ OS X Mavericks

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

 

การเปิดวิดเจ็ต HTML

ขึ้นกับว่าวิดเจ็ต 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>
    หมายเหตุ: AppleWidget.js แสดงบน iPad อยู่แล้ว และคุณไม่ต้องรวมไว้ในบันเดิลของวิดเจ็ตของคุณ

  3. ตั้งค่าวิดเจ็ตของคุณให้ iBooks ทราบว่าเมื่อใด HTML จะเริ่มต้น และ iBooks สามารถเปลี่ยนจากการแสดงไฟล์ Default.png ไปแสดงวิดเจ็ต HTML ที่ทำงานอยู่ด้วยการเรียก (ใน JavaScript ที่มีอยู่ ในส่วนหัวของไฟล์ HTML):
    widget.notifyContentIsReady()

สิ่งสำคัญ: หากคุณเลือกที่จะแก้ไขวิดเจ็ต HTML ของคุณไม่ให้เกิดแสงวาบ ต้องให้แน่ใจว่าได้ทำทั้งสามขั้นตอนด้านบนนี้ทั้งหมดแล้ว คุณต้องทำขั้นตอนทั้งหมดให้สมบูรณ์เพื่อให้ทำงานได้อย่างถูกต้อง

เกี่ยวกับการโพสต์ไปยังบริการเว็บภายนอก

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

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