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) ให้รวมเข้าไปในบันเดิลของวิดเจ็ต:
- ใช้ Finder สร้างโฟลเดอร์และเพิ่มไฟล์เข้าไปในโฟลเดอร์
- ตั้งชื่อโฟลเดอร์ใหม่แล้วเปิดนามสกุล .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 คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้จัดเตรียมสำหรับทั้งการจัดการด้วยการสัมผัสและการจัดการด้วยเมาส์หากคุณต้องการใช้การประเภทควบคุมที่ไม่ได้ใช้ลักษณะท่าทางตามมาตรฐาน
- เรียนรู้เกี่ยวกับการพัฒนากิจกรรมที่ใช้การสัมผัสใน iOS
- เรียนรู้เกี่ยวกับการพัฒนากิจกรรมที่ใช้เมาส์ใน OS X
การเปิดวิดเจ็ต HTML
ขึ้นกับว่าวิดเจ็ต HTML ของคุณซับซ้อนเพียงใด ผู้อ่านของคุณอาจเห็นแสงวาบขึ้นระหว่างการเริ่ม HTML เมื่อพวกเขาเปิดวิดเจ็ตใน iBooks เพื่อหลีกเลี่ยงไม่ให้เกิดแสงวาบ โปรดแก้ไขวิดเจ็ตของคุณเพื่อให้บอก iBooks ว่าเมื่อใดจึงจะเปลี่ยนจากการแสดงไฟล์ Default.png ให้แสดง HTML ที่เรียกใช้งานอยู่
มีวิธีการเปลี่ยนแปลงแก้ไขสามวิธีที่คุณต้องทำเพื่อเพิ่มฟังก์ชันเสริมนี้:
- เพิ่มรายการ "IBNotifiesOnReady" ให้ตั้งค่าไปที่ "true" ในไฟล์ info.plist ของวิดเจ็ต เพื่อให้ iBooks ทราบว่าวิดเจ็ตนี้จะบอกว่าเมื่อใดจึงจะให้เปลี่ยนไปแสดงวิดเจ็ต HTML ที่เรียกใช้งานอยู่:
<key>IBNotifiesOnReady</key><true/>
- ตั้งค่าวิดเจ็ตของคุณให้โหลดคลัง Apple JavaScript ในส่วน หัว ของไฟล์ HTML:
<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
หมายเหตุ: AppleWidget.js แสดงบน iPad อยู่แล้ว และคุณไม่ต้องรวมไว้ในบันเดิลของวิดเจ็ตของคุณ - ตั้งค่าวิดเจ็ตของคุณให้ iBooks ทราบว่าเมื่อใด HTML จะเริ่มต้น และ iBooks สามารถเปลี่ยนจากการแสดงไฟล์ Default.png ไปแสดงวิดเจ็ต HTML ที่ทำงานอยู่ด้วยการเรียก (ใน JavaScript ที่มีอยู่ ในส่วนหัวของไฟล์ HTML):
widget.notifyContentIsReady()
สิ่งสำคัญ: หากคุณเลือกที่จะแก้ไขวิดเจ็ต HTML ของคุณไม่ให้เกิดแสงวาบ ต้องให้แน่ใจว่าได้ทำทั้งสามขั้นตอนด้านบนนี้ทั้งหมดแล้ว คุณต้องทำขั้นตอนทั้งหมดให้สมบูรณ์เพื่อให้ทำงานได้อย่างถูกต้อง
เกี่ยวกับการโพสต์ไปยังบริการเว็บภายนอก
วิดเจ็ต HTML จะสามารถโพสต์ไปยังบริการเว็บภายนอกได้ต่อเมื่อบริการเว็บเหล่านั้นได้นำ ส่วนหัว CORS (Cross-Origin Resource Sharing) มาใช้งานอย่างเหมาะสมเท่านั้น