iBooks Author mendukung widget HTML5 (dengan ekstensi .wdgt).
Untuk membuat widget HTML untuk iBooks Author, gunakan penyunting teks atau app pembuatan konten web untuk membuat file berikut ini:
- File HTML utama: File ini merupakan bagian utama dari widget. File ini dapat diberi nama sesuka Anda, namun ekstensinya harus ".html". Anda dapat menempatkan CSS dan JavaScript di dalam file HTML utama, atau tambahkan file .css dan .js pada bundel widget dan tetapkan file HTML utama untuk memuat file tersebut. Dalam file ini, Anda dapat menggunakan teknik atau trik yang akan Anda gunakan ketika merancang sebuah halaman web. Secara umum, Anda menggunakan HTML untuk mendefinisikan struktur widget Anda, CSS untuk memberikan gaya visual, dan JavaScript untuk mendukung interaktivitas.
- Default.png: Ini adalah gambar yang akan tampak pada halaman, dan yang akan diklik oleh pengguna untuk membuka widget Anda. Namanya harus "Default.png," dengan huruf besar "D". Cara termudah untuk membuat Default.png adalah dengan membuat jepretan layar dari file HTML utama yang aktif di dalam app pembuatan konten web atau peramban web. Bila widget aktif, maka ukurannya sama seperti Default.png, kecuali Anda menetapkan ukuran lain di dalam Info.plist.
- Info.plist: File ini memberi iBooks Author dan iBooks informasi yang diperlukan untuk menjalankan widget. Namanya harus "Info.plist." Berikut ini adalah rincian dan contohnya.
Setelah Anda membuat tiga file yang diperlukan (dan mungkin beberapa file opsional, seperti CSS atau JavaScript), himpun file tersebut ke dalam bundel widget:
- Dengan menggunakan Finder, buatlah folder, dan tambahkan file tersebut pada folder tersebut.
- Ganti nama folder dan tambahkan ekstensi .wdgt pada nama folder tersebut. Ini akan menciptakan bundel widget, dan ikon folder akan berubah menjadi ikon widget.
Widget Anda sekarang sudah siap untuk ditambahkan ke iBooks Author.
Catatan
- Jika buku Anda berisi widget HTML yang terdiri dari file yang memiliki karakter kendali pada nama file-nya, buku itu tidak dapat dipublikasikan ke iBooks Store. Sebelum Anda membuat bundel widget, pastikan tidak ada file di dalam bundel yang menggunakan karakter berikut sebagai nama file. Jangan gunakan ikon folder khusus.
- Hindari mengikutsertakan folder dengan nama seperti berikut ini di dalam bundel widget Anda:
- Resources/
- Support Files/Resources/
- Contents/Resources/
- Jika Anda membuat konten untuk iPad atau Mac yang memiliki layar Retina:
- Sewaktu melakukan pengodean file HTML, CSS, dan JavaScript Anda, ikuti protokol standar untuk membuat situs web dengan grafik Retina (2x).
- Bundel widget harus memasukkan file Default@2x.png, yang resolusinya harus dua kali lipat file Default.png. Anda tidak akan dapat melihat berkas ini di dalam iBooks Author, tetapi berkas ini akan tampil di dalam iBooks pada iPad atau Mac yang dilengkapi Retina display.
- Jika Anda menghendaki widget Anda memenuhi seluruh layar sewaktu diperbesar di iPad, buatlah Default.png sebesar 768 x 1024 pixels dan Default@2x.png sebesar 1536 x 2048 pixels. Jika Anda menginginkan widget lebih kecil daripada layar penuh, buatlah Default.png dengan ukuran tampilan seperti yang Anda inginkan (misalnya, 600 x 900), dan buatlah Default@2x.png dua kali ukuran tersebut.
- Pelajari selengkapnya tentang mengoptimalkan buku yang dibuat dengan iBooks Author.
Info.plist
Info.plist widget dasar berisi beberapa kunci wajib dan kunci opsional. Kunci-kunci tercantum di bawah ini bersama dengan definisi dan beberapa contoh nilai untuk widget yang disebut "Hello World".
| Kunci | Contoh nilai | Definisi |
| CFBundleDevelopmentRegion | English | Opsional. String yang menyebutkan daerah asal untuk bundel tersebut. Ini biasanya sesuai dengan bahasa ibu dari orang yang membuat bundel tersebut. |
| CFBundleDisplayName | Hello World | Diperlukan. String yang berisi nama aktual dari widget, untuk ditampilkan di iBooks Author dan iBooks. |
| CFBundleIdentifier | com.apple.widget.HelloWorld | Diperlukan. String yang secara unik mengidentifikasi widget, dalam format domain terbalik. |
| CFBundleName | Hello World | Opsional. String yang berisi nama widget. Ini harus sesuai dengan nama bundel widget di Finder, dikurangi ekstensi file .wdgt. |
| CFBundleShortVersionString | 1.0 | Opsional. String yang berisi nomor versi singkat dari widget. Ini seringkali sama seperti CFBundleVersion. |
| CFBundleVersion | 1.0 | Opsional. String yang berisi nomor versi dari widget. |
| Tinggi | 768 | Opsional. Jumlah yang menghasilkan tinggi, dalam piksel, dari widget Anda. Jika tidak disebutkan, tinggi Default.png digunakan. |
| MainHTML | HelloWorld.html | Diperlukan. String yang berisi nama file HTML yang mengimplementasikan widget Anda. |
| Lebar | 1024 | Opsional. String yang berisi lebar widget Anda, dalam satuan piksel. Jika tidak disebutkan, lebar Default.png digunakan. |
| IBNotifiesOnReady | <true/> | Opsional. Bila disetel ke "true", widget akan menginformasikan iBooks kapan harus beralih dari menampilkan Default.png ke menampilkan widget HTML yang sedang aktif. |
Info.plist lengkap untuk widget tampak seperti ini:
<?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>
Pembatasan
Beberapa fitur tidak kompatibel. Anda tidak boleh menggunakan kunci-kunci ini:
| Kunci | Deskripsi |
| AllowFileAccessOutsideOfWidget | Widget dalam buku yang dibuat dengan menggunakan iBooks Author tidak dapat mengakses file dalam sistem file umum. |
| AllowFullAccess | Tulisan singkat untuk daftar kunci akses lainnya, beberapa di antaranya tidak kompatibel. |
| AllowInternetPlugins | Plugin internet, seperti Flash, tidak tersedia di dalam buku yang dibuat dengan menggunakan iBooks Author.Film dan audio dapat disertakan via masing-masing elemen <video> dan <audio> HTML5. Catatan: Film dan audio di dalam widget HTML tidak akan dilindungi oleh DRM. |
| AllowJava | Widget dalam buku yang dibuat dengan menggunakan iBooks Author tidak dapat menyertakan konten Java. |
| AllowSystem | Widget dalam buku yang dibuat dengan menggunakan iBooks Author tidak dapat mengakses perintah sistem. |
| Plugin | Widget dalam buku yang dibuat dengan menggunakan iBooks Author tidak dapat menyertakan komponen plugin Cocoa. |
iBooks Author mengabaikan kunci-kunci ini:
| Kunci | Deskripsi |
| CloseBoxInsetX | Widget dalam iBooks Author dan iBooks tidak menampilkan dekorasi dekat. |
| CloseBoxInsetY |
|
| Fon | Widget iBooks Author tidak dapat menggunakan fon bundel. |
Persyaratan Film dan Audio
Anda tidak dapat menggunakan media yang memiliki ekstensi file ".m4v" atau ".m4p".
Disarankan agar Anda menggunakan video H.264 dalam wadah MPEG-4 dengan ekstensi file ".mp4".
Untuk audio, disarankan agar Anda menggunakan audio AAC dalam wadah MPEG-4 dengan ekstensi file ".m4a".
Catatan: Media video dan audio dalam bundel widget HTML tidak dilindungi oleh DRM.
Catatan: Dalam beberapa kasus, file film, dan audio dalam widget HTML tidak bisa diputar dalam iBooks Author tetapi bisa diputar di iBooks. Jika Anda tidak dapat memutar berkas film atau audio dalam widget Anda di dalam iBooks Author, cobalah untuk melakukan pratayang pada iPad atau dengan OS X Mavericks. Ini akan memperlihatkan kepada Anda bagaimana file tersebut diputar di buku lengkap.
Pelokalan
String dan aset yang dilokalkan tidak didukung di iBooks Author. Oleh karena itu, string teks yang dapat dilihat oleh pengguna harus disertakan sejajar dalam bahasa sasaran.
Elemen yang terpotong
Jika suatu elemen seperti elemen <video> tampak terpotong pada satu sisi, hal tersebut mungkin terjadi karena elemen tersebut melebar untuk mengisi ruang yang lebih besar daripada yang tampak. Cek CSS untuk mengetahui"width:auto" dalam selektor #video dan mengubahnya untuk mencerminkan ukuran yang sesungguhnya. Misalnya, jika widget Anda berisi video yang ukurannya 960 x 540, maka cek CSS untuk melihat selektor terkait dan secara eksplisit tetapkan nilai lebar dan tinggi yang benar:
#video { width: 960; height: 540;}Pengembangan untuk iOS dan OS X Mavericks
iOS dan OS X menggunakan jenis masukkan yang berbeda secara mendasar, jadi bila Anda membuat widget HTML untuk iBooks Author, Anda perlu memastikan bahwa Anda mengakomodasi baik penggunaan sentuhan dan mouse jika Anda ingin menggunakan semua kontrol yang tidak ditangani oleh gerakan standar.
- Pelajari mengenai pengembangan penggunaan sentuhan di iOS.
- Pelajari tentang pengembangan penggunaan mouse di OS X.
Membuka widget HTML
Tergantung dari seberapa kompleksnya widget HTML Anda, pembaca Anda bisa mengalami flash selama inisialisasi HTML ketika mereka membuka widget di iBooks. Untuk menghindari flash, modifikasi widget Anda sehingga dapat menginformasikan iBooks kapan harus beralih dari menampilkan Default.png ke menampilkan widget HTML yang sedang aktif.
Ada tiga modifikasi yang harus Anda lakukan untuk menambahkan fungsionalitas opsional ini:
- Tambahkan parameter "IBNotifiesOnReady" yang disetel ke "true" dalam file info.plist widget, sehingga iBooks tahu bahwa widget ini akan menginformasikan kapan beralih ke menampilkan widget HTML yang sedang aktif:
<key>IBNotifiesOnReady</key><true/>
- Tetapkan widget untuk memuat perpustakaan JavaScript Apple di bagian HEAD dari file HTML:
<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
Catatan: AppleWidget.js sudah ada di dalam iPad, dan Anda tidak perlu memasukkannya dalam bundel widget. - Buatlah widget agar mampu menginformasikan iBooks kapan HTML diinisialisasi, dan iBooks dapat beralih dari menampilkan file Default.png ke menampilkan widget HTML yang sedang aktif dengan memanggil (dalam JavaScript yang dimasukkan ke dalam bagian HEAD file HTML):
widget.notifyContentIsReady()
Penting: Jika Anda memilih untuk memodifikasi widget HTML untuk menghindari flash, pastikan untuk melakukan ketiga langkah di atas. Anda harus menyelesaikan semua langkah agar hal ini berfungsi sebagaimana mestinya.
Mengenai memposting ke Layanan Web eksternal
Widget HTML hanya dapat diposting ke layanan web eksternal jika layanan web tersebut telah mengimplementasikan CORS (Cross-Origin Resource Sharing) headers yang sesuai.