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 aplikasi 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 aplikasi 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 aplikasi 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:

  1. Di Finder, buat folder.
  2. Tambah file ke folder baru.
  3. Ubah nama folder dan tambahkan ekstensi .wdgt ke nama folder untuk membuat bundel widget. Ikon folder akan berubah menjadi ikon widget.
  4. Tambahkan widget ke iBooks Author.

Tips 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 Bahasa 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 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.
Lebar 1024 Opsional Angka yang menghasilkan lebar widget, dalam satuan piksel. Jika tidak ditentukan, lebar Default.png yang akan digunakan.
IBNotifiesOnReady <true/> 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 elemen <video> dan <audio> 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>, mungkin ditampilkan terpotong di salah satu sisi. Hal ini dapat terjadi jika dimensi lebih besar daripada ruang yang tersedia. Cari CSS untuk :width:auto" dalam #pilihan video dan ubah agar sesuai dimensi sebenarnya. Misalnya, widget mungkin berisi video yang dimensinya berukuran 960 x 540. Periksa CSS untuk pilihan yang sesuai dan atur lebar serta tinggi ke nilai yang benar:

#video   {
	width: 960;
	height: 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>
 <true/>

2. Atur widget untuk memuat perpustakaan Apple JavaScript di bagian <judul> file HTML:

<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>

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. Di JavaScript terdapat bagian <judul> file HTML, bernama:

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.

Tanggal Dipublikasikan: