Membuat widget HTML5 untuk iBooks Author
Pelajari cara membuat widget HTML5 yang dapat digunakan dalam buku yang dibuat di iBooks Author.
iBooks Author mendukung widget HTML5, dengan ekstensi nama file .wdgt. Untuk membuat widget HTML5, gunakan editor teks atau app pembuatan konten untuk membuat ketiga file berikut:
File HTML utama: File ini merupakan bagian utama dari widget. File ini dapat dinamai apa pun, namun ekstensinya harus .html. Anda dapat menyisipkan CSS dan JavaScript dalam file HTML utama. Atau, Anda dapat menambahkan file .css dan .js ke bundel widget dan memuatnya dari file HTML utama. Anda dapat menggunakan teknik apa pun untuk mendesain halaman web. Gunakan HTML untuk menetapkan struktur widget, CSS untuk memberikan gaya visual, dan JavaScript untuk membuatnya atraktif.
File Default.png: Cara termudah untuk membuat .Default.png adalah mengambil gambar layar file HTML utama dalam app pembuatan konten web atau browser web. Ini adalah gambar yang akan dilihat pembaca di halaman, lalu ketuk untuk membuka widget tersebut. Di browser web atau app pembuatan konten web, ambil gambar layar file HTML utama. Beri nama "Default.png", lalu pastikan Anda menggunakan huruf kapital "D". Bila widget aktif, ukurannya adalah file Default.png. Anda dapat mengubah ukuran di file Info.plist.
File Info.plist: File ini memberi iBooks Author dan Apple Books informasi yang diperlukan untuk menjalankan widget Anda. Nama file harus "Info.plist".
Setelah membuat file yang diperlukan, buat file opsional yang diinginkan, seperti file CSS atau JavaScript. Setelah itu, tambah semua ke bundel widget:
Di Finder, buat folder.
Tambah file ke folder baru.
Ubah nama folder dan tambahkan ekstensi .wdgt ke nama folder untuk membuat bundel widget. Ikon folder akan berubah menjadi ikon widget.
Tambahkan widget ke iBooks Author.
Kiat untuk membuat widget
Sebelum membuat bundel widget, pastikan tidak ada file dalam bundel yang memiliki karakter kontrol dalam nama file-nya. Jika ada, Anda tidak dapat mempublikasikan buku tersebut ke Book Store di Apple Books.
Jika Anda menetapkan agar widget diputar secara otomatis, maka Internet tidak dapat diakses.
Jangan gunakan ikon folder kustom, dan hindari nama folder tersebut dalam widget:
Sumber Daya/
Support Files/Resources/
Contents/Resources/
Untuk mengoptimalkan widget pada layar Retina:
Di file HTML, CSS, dan JavaScript, gunakan protokol standar untuk situs web dengan grafis Retina (2x).
Masukkan file Default@2x.png ke dalam widget. Buat resolusi file dua kali lipat dari file Default.png. Anda tidak dapat melihat file ini di iBooks Author, namun Anda dapat melihatnya di Apple Books pada layar Retina.
Selengkapnya mengenai cara mengoptimalkan buku yang dibuat dengan iBooks Author.
Info.plist
File Info.plist widget dasar berisi beberapa kunci yang diperlukan dan kunci opsional. Tabel ini mencantumkan kunci tersebut, definisinya, dan beberapa nilai contoh untuk widget yang bernama "Hello World".
Kunci | Contoh nilai | Wajib | Definisi |
CFBundleDevelopmentRegion | Inggris | Opsional | String yang menyebutkan daerah asal untuk bundel tersebut. Ini biasanya sesuai dengan bahasa ibu dari orang yang membuat bundel tersebut. |
CFBundleDisplayName | Hello World | Wajib | String yang berisi nama sebenarnya dari widget tersebut. Ini akan tampil di iBooks Author dan Apple Books. |
CFBundleIdentifier | com.apple.widget.HelloWorld | Wajib | 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. Biasanya sama seperti CFBundleVersion. |
CFBundleVersion | 1.0 | Opsional | String yang menghasilkan nomor versi dari widget. |
Tinggi badan | 768 | Opsional | Angka yang menghasilkan tinggi widget, dalam satuan piksel. Jika tidak ditentukan, tinggi Default.png yang akan digunakan. |
MainHTML | HelloWorld.html | Wajib | String yang menghasilkan nama file HTML yang menerapkan widget Anda.Width1024Optional |
Lebar | 1024 | Opsional | Angka yang menghasilkan lebar widget, dalam satuan piksel. Jika tidak ditentukan, lebar Default.png yang akan digunakan. |
IBNotifiesOnReady | Opsional | Saat diatur ke benar, widget akan memberi tahu Apple Books waktu untuk beralih dari menampilkan Deafult.png ke widget HTML yang sedang berjalan. |
Tampilan Info.plist lengkap untuk widget adalah 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>
Persyaratan dan pembatasan kunci
Jangan gunakan kunci tersebut; fiturnya tidak kompatibel:
Kunci | Deskripsi |
AllowFileAccessOutsideOfWidget | Widget di dalam buku yang dibuat dengan iBooks Author tidak dapat mengakses file di dalam sistem file umum. |
AllowFullAccess | Tulisan cepat untuk daftar kunci akses lainnya, beberapa di antaranya tidak kompatibel. |
AllowInternetPlugins | Plugin internet, seperti Flash, tidak tersedia di dalam buku yang dibuat dengan iBooks Author. Anda dapat memasukkan film dan audio menggunakan HTML5 Film dan audio di dalam widget HTML tidak akan dilindungi DRM. |
AllowJava | Widget di dalam buku yang dibuat dengan iBooks Author tidak dapat memasukkan konten Java. |
AllowSystem | Widget di dalam buku yang dibuat dengan iBooks Author tidak dapat mengakses perintah sistem. |
Plugin | Widget di dalam buku yang dibuat dengan iBooks Author tidak dapat memasukkan komponen plugin Cocoa. |
iBooks Author akan mengabaikan kunci-kunci berikut:
Kunci | Deskripsi |
CloseBoxInsetX | Widget di iBooks Author dan Apple Books tidak menampilkan dekorasi tertutup. |
CloseBoxInsetY | |
Font | Widget iBooks Author tidak dapat menggunakan font yang dibundel. |
Persyaratan video dan audio
Anda tidak dapat menggunakan media yang memiliki ekstensi file .m4v atau .m4p. Gunakan salah satu format berikut dengan ekstensi file .mp4:
Video H.264: Hingga 720p, 60 bingkai per detik. Profil Tinggi tingkat 4.2 dengan audio AAC-LC hingga 160 kbps, 48 kHz, audio stereo. Video yang terbuka di iMovie 10 dengan pilihan HD 720p menggunakan pengaturan tersebut.
Video MPEG-4: Hingga 2.5 Mbps, 640 x 480 piksel, 30 bingkai per detik. Profil Sederhana dengan audio AAC-LC hingga 160 kbps per saluran, 48kHz, audio stereo.
Untuk audio, gunakan AAC (8 hingga 320 Kbps, stereo 48 kHz) dengan ekstensi file .m4a.
Media video dan audio di dalam bundel widget HTML tidak dilindungi DRM.
Jika file film atau audio tidak diputar dalam widget di iBooks Author, lihat pratinjau di iPhone, iPad, atau Mac. Langkah ini menunjukkan cara file akan diputar di buku yang telah selesai.
Pelokalan
iBooks Author tidak mendukung string dan aset yang dilokalkan. Sertakan string teks pada bahasa target yang dapat dilihat pembaca dalam tag.
Memperbaiki elemen yang dipotong
Elemen, seperti
#video { lebar: 960; tinggi: 540; }
Pengembangan untuk iOS dan macOS
iOS dan macOS menggunakan jenis input berbeda. Anda dapat memuat input mouse dan sentuh saat membuat widget HTML untuk iBooks Author.
Menghindari lampu kilat saat pembaca membuka widget HTML
Jika widget HTML Anda sangat rumit, pembaca mungkin melihat kilatan saat mereka membukanya di Apple Books. Untuk meghindarinya, perbarui widget Anda agar memberi tahu Apple Books waktu untuk beralih dari Deafult.png ke widget HTML:
1. Tambahkan item "IBNotifiesOnReady" yang diatur ke true di file Info.plist widget. Tindakan ini memungkinkan Apple Books mengetahui bahwa widget akan memberi tahunya waktu untuk beralih ke widget HTML.
<key>IBNotifiesOnReady</key>
2. Atur widget Anda untuk memuat perpustakaan Apple JavaScript di bagian
iOS dan macOS telah memiliki AppleWidget.js, jadi Anda tidak perlu menyertakannya dalam bundel widget.
3. Atur widget Anda untuk memberi tahu Apple Books waktu inisialisasi HTML. Dalam JavaScript yang ada di bagian
widget.notifyContentIsReady()
Mengirim postingan ke layanan web eksternal
Anda hanya dapat mem-posting widget HTML ke layanan web eksternal jika widget menggunakan judul CORS (Cross-Origin Resource Sharing) yang benar.
