Program iBooks Autor obsługuje widgety HTML5 (z rozszerzeniem WDGT).
Aby utworzyć widget HTML dla programu iBooks Author, musisz utworzyć następujące pliki przy użyciu edytora tekstów lub aplikacji do tworzenia zawartości stron internetowych:
- Główny plik HTML: ten plik stanowi główną część widgetu. Może mieć dowolną nazwę, ale jego rozszerzeniem musi być HTML. Kod CSS i JavaScript można umieścić w głównym pliku HTML; można też dodać pliki CSS i JS do pakietu widgetu oraz ustawić ich wczytywanie przez główny plik HTML. W tych plikach można używać podobnych technik i sztuczek jak podczas projektowania strony internetowej. Ogólnie rzecz biorąc, kod HTML służy do definiowania struktury widgetu, kod CSS zapewnia styl wizualny, podczas gdy kod JavaScript obsługuje interaktywność.
- Default.png: jest to obraz wyświetlany na stronie, który użytkownicy będą stukać w celu otwarcia widgetu. Obraz musi mieć nazwę „Default.png” z wielką literą „D”. Najprostszym sposobem utworzenia pliku Default.png jest wykonanie zrzutu ekranu głównego pliku HTML działającego w aplikacji do tworzenia zawartości stron internetowych lub w przeglądarce internetowej. Kiedy widget jest aktywny, ma rozmiar obrazu Default.png, chyba że określono inny rozmiar w pliku Info.plist.
- Info.plist: ten plik zapewnia programom iBooks Author i iBooks informacje wymagane do uruchamiania widgetu. Plik musi mieć nazwę „Info.plist”. Poniżej przedstawiono szczegółowe informacje oraz przykład.
Po utworzeniu trzech wymaganych plików (oraz innych opcjonalnych plików, takich jak pliki CSS i JavaScript), należy połączyć je w pakiecie widgetu:
- W programie Finder utwórz katalog i dodaj do niego pliki.
- Zmień nazwę katalogu i dodaj do niej rozszerzenie WDGT. Spowoduje to utworzenie pakietu widgetu. Ikona katalogu zmieni się w ikonę widgetu.
Widget jest teraz gotowy do dodania do programu iBooks Author.
Uwagi
- Jeśli w książce znajdują się widgety HTML zawierające pliki ze znakami sterującymi w nazwie, nie będzie można opublikować takiej książki w sklepie iBooks Store. Przed utworzeniem pakietu widgetu należy się upewnić, że żadne pliki zawarte w pakiecie nie mają takich znaków w nazwie. Ponadto nie należy używać niestandardowych ikon katalogu.
- Należy unikać umieszczania w pakiecie widgetu katalogów o następujących nazwach:
- Resources/
- Support Files/Resources/
- Contents/Resources/
- Podczas tworzenia zawartości dla iPadów lub komputerów Mac z wyświetlaczem Retina:
- Podczas kodowania plików HTML, CSS i JavaScript należy przestrzegać standardowego protokołu tworzenia witryn internetowych z grafiką Retina (2x).
- Pakiet widgetu powinien zawierać plik Default@2x.png o dwukrotnie większej rozdzielczości niż plik Default.png. Tego pliku nie będzie można wyświetlić w programie iBooks Author, ale zostanie on wyświetlony w aplikacji iBooks na iPadzie lub komputerze Mac z wyświetlaczem Retina.
- Aby widget zajmował cały ekran po powiększeniu, plik Default.png powinien mieć rozdzielczość 768 x 1024 pikseli, a plik Default@2x.png — 1536 x 2048 pikseli. Aby wyświetlany widget nie zajmował całego ekranu, należy określić żądane wymiary pliku Default.png (na przykład 600 x 900 pikseli) oraz ustawić dwa razy większe wymiary dla pliku Default@2x.png.
- Dowiedz się więcej na temat optymalizowania książek tworzonych w programie iBooks Author.
Plik Info.plist
Plik Info.plist prostego widgetu zawiera kilka wymaganych kluczy oraz kilka opcjonalnych kluczy. Poniżej przedstawiono te klucze wraz z ich definicjami i przykładowymi wartościami dla widgetu o nazwie „Hello World”.
| Klucz | Przykładowa wartość | Definicja |
| CFBundleDevelopmentRegion | English | Opcjonalny. Ciąg określający natywny region pakietu. Zwykle odpowiada językowi używanemu przez osobę, która utworzyła pakiet. |
| CFBundleDisplayName | Hello World | Wymagany. Ciąg zawierający nazwę widgetu wyświetlaną w programach iBooks Author i iBooks. |
| CFBundleIdentifier | com.apple.widget.HelloWorld | Wymagany. Ciąg jednoznacznie identyfikujący widget w odwrotnym formacie domeny. |
| CFBundleName | Hello World | Opcjonalny. Ciąg zawierający nazwę widgetu. Musi być zgodny z nazwą pakietu widgetu w programie Finder bez rozszerzenia pliku WDGT. |
| CFBundleShortVersionString | 1.0 | Opcjonalny. Ciąg zawierający skrócony numer wersji widgetu. Często identyczny jak ciąg CFBundleVersion. |
| CFBundleVersion | 1.0 | Opcjonalny. Ciąg zawierający numer wersji widgetu. |
| Height | 768 | Opcjonalny. Liczba określająca wysokość widgetu (w pikselach). Jeśli nie określono, zostanie użyta wysokość obrazu Default.png. |
| MainHTML | HelloWorld.html | Wymagany. Ciąg podający nazwę pliku HTML, który implementuje widget. |
| Width | 1024 | Opcjonalny. Liczba określająca szerokość widgetu (w pikselach). Jeśli nie określono, zostanie użyta szerokość obrazu Default.png. |
| IBNotifiesOnReady | <true/> | Opcjonalny. Po ustawieniu wartości true widget będzie informował aplikację iBooks o momencie przełączenia wyświetlania z pliku Default.png na uruchomiony widget HTML. |
Poniżej przedstawiono pełny plik Info.plist dla widgetu:
<?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>
Ograniczenia
Niektóre funkcje nie są zgodne. Nie należy używać następujących kluczy:
| Klucz | Opis |
| AllowFileAccessOutsideOfWidget | Widgety w książkach utworzonych za pomocą programu iBooks Author nie mogą uzyskiwać dostępu do plików w ogólnym systemie plików. |
| AllowFullAccess | Jest to skrót do listy innych kluczy dostępu, z których niektóre są niezgodne. |
| AllowInternetPlugins | Wtyczki internetowe, takie jak program Flash, nie są dostępne w książkach utworzonych za pomocą programu iBooks Author. Filmy i dźwięki można dołączyć za pomocą elementów języka HTML5 <video> i <audio>. Uwaga: filmy i dźwięki umieszczone w widgetach HTML nie są chronione mechanizmem DRM. |
| AllowJava | Widgety w książkach utworzonych za pomocą programu iBooks Author nie mogą zawierać elementów Java. |
| AllowSystem | Widgety w książkach utworzonych za pomocą programu iBooks Author nie mogą uzyskiwać dostępu do poleceń systemowych. |
| Plugin | Widgety w książkach utworzonych za pomocą programu iBooks Author nie mogą zawierać składników wtyczek Cocoa. |
Program iBooks Author ignoruje następujące klucze:
| Klucz | Opis |
| CloseBoxInsetX | Widgety w programach iBooks Author i iBooks nie wyświetlają dekoracji zamykania. |
| CloseBoxInsetY |
|
| Fonts | Widgety programu iBooks Author nie mogą używać dołączonych czcionek. |
Wymagania dotyczące filmów i dźwięków
Nie można używać plików multimedialnych o rozszerzeniach M4V ani M4P.
Zaleca się, aby używać filmów w formacie H.264 w kontenerze MPEG-4 z rozszerzeniem MP4.
W przypadku dźwięku zaleca się, aby używać plików dźwiękowych w formacie AAC w kontenerze MPEG-4 z rozszerzeniem M4A.
Uwaga: pliki audio i wideo w pakiecie widgetu HTML nie są zabezpieczone mechanizmem DRM.
Uwaga: w niektórych przypadkach filmy i pliki dźwiękowe w widgetach HTML mogą nie być odtwarzane w programie iBooks Author, ale będą odtwarzane w aplikacji iBooks. Jeśli nie można odtworzyć filmu lub pliku dźwiękowego w widgecie w programie iBooks Author, można spróbować wyświetlić podgląd na iPadzie lub w systemie OS X Mavericks. Pokaże to, jak plik będzie odtwarzany w gotowej książce.
Lokalizacja
Zlokalizowane ciągi i zasoby nie są obsługiwane w programie iBooks Author. Z tego powodu ciągi tekstowe, które są widoczne dla użytkownika, należy dołączyć w języku docelowym.
Przycięte elementy
Jeśli jakiś element, taki jak element <video>, zostaje przycięty z jednej strony, być może zostaje on rozszerzony w celu wypełnienia większego obszaru niż jest widoczny. Sprawdź atrybut „width:auto” w selektorze #video w kodzie CSS i ustaw go na rzeczywiste rozmiary. Jeśli na przykład widget zawiera film o rozmiarach 960 x 540, sprawdź odpowiedni selektor w kodzie CSS i ustaw wprost odpowiednią wysokość i szerokość:
#video { width: 960; height: 540;}Projektowanie dla systemu iOS i OS X Mavericks jednocześnie
Systemy iOS i OS X wykorzystują zupełnie inne sposoby wprowadzania danych. Z tego powodu podczas tworzenia widgetów HTML dla programu iBooks Author należy uwzględnić zarówno obsługę dotykową, jak i obsługę przy użyciu myszy, jeśli będzie używany jakiś typ elementu sterującego, który nie jest obsługiwany przez standardowe gesty.
- Dowiedz się więcej na temat projektowania zdarzeń dotykowych w systemie iOS.
- Dowiedz się więcej na temat projektowania zdarzeń myszy w systemie OS X.
Otwieranie widgetu HTML
Zależnie od stopnia złożoności widgetu HTML czytelnicy mogą zauważyć mignięcie podczas inicjowania kodu HTML po otwarciu widgetu w programie iBooks. W celu uniknięcia tego mignięcia należy zmodyfikować widget w taki sposób, aby informował aplikację iBooks o momencie przełączenia wyświetlania z pliku Default.png na uruchomiony widget HTML.
Aby dodać tę opcjonalną funkcję, należy dokonać trzech modyfikacji:
- Dodaj element IBNotifiesOnReady o wartości true do pliku info.plist widgetu. Informuje to aplikację iBooks, że dany widget wskaże moment przełączenia na wyświetlanie uruchomionego widgetu HTML:
<key>IBNotifiesOnReady</key><true/>
- Ustaw widget w celu ładowania biblioteki Apple JavaScript w sekcji HEAD pliku HTML:
<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
Uwaga: widget AppleWidget.js znajduje się już na iPadzie i nie trzeba go dołączać do pakietu widgetów. - Ustaw widget w celu informowania aplikacji iBooks o zainicjowaniu kodu HTML. Aplikacja iBooks będzie mogła przełączać się z wyświetlania pliku Default.png na uruchomiony widget HTML przez wywołanie (w kodzie JavaScript dołączonym w sekcji HEAD pliku HTML):
widget.notifyContentIsReady()
Ważne: jeśli widget HTML ma zostać zmodyfikowany w celu uniknięcia mignięcia, należy wykonać wszystkie trzy z powyższych kroków. Aby ta funkcja działała poprawnie, należy wykonać wszystkie podane kroki.
Informacje o publikowaniu w zewnętrznych usługach internetowych
Widgety HTML można publikować w zewnętrznych usługach internetowych tylko w przypadku, gdy te usługi mają zaimplementowane odpowiednie nagłówki CORS (Cross-Origin Resource Sharing).