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

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” 

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>

ข้อจำกัดและขีดจำกัด

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

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

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

คุณไม่สามารถใช้สื่อที่มีนามสกุลไฟล์ ".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 คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้จัดเตรียมสำหรับทั้งการจัดการด้วยการสัมผัสและการจัดการด้วยเมาส์หากคุณต้องการใช้การประเภทควบคุมที่ไม่ได้ใช้ลักษณะท่าทางตามมาตรฐาน

• เรียนรู้เกี่ยวกับการพัฒนากิจกรรมที่ใช้การสัมผัสใน iOS
• เรียนรู้เกี่ยวกับการพัฒนากิจกรรมที่ใช้เมาส์ใน OS X

การเปิดวิดเจ็ต 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) มาใช้งานอย่างเหมาะสมเท่านั้น