Tworzenie widżetów HTML5 do użycia w aplikacji iBooks Author

Dowiedz się, jak tworzyć widżety HTML5 do użycia w książkach tworzonych w aplikacji iBooks Author.

Aplikacja iBooks Author obsługuje widżety HTML5. Mają one rozszerzenie nazwy pliku .wdgt. Aby stworzyć widżet HTML5, użyj edytora tekstu lub aplikacji do tworzenia treści i utwórz trzy następujące pliki:

  • Główny plik HTML: ten plik stanowi główną część widżetu. Może mieć dowolną nazwę, ale jego rozszerzeniem musi być .html. Możesz umieścić kod CSS i JavaScript w głównym pliku HTML. Możesz również dodać pliki .css i .js do pakietu widżetu i wczytywać je z głównego pliku HTML. Możesz używać wszystkich technik, które stosuje się w projektowaniu stron internetowych. Kod HTML pozwoli Ci określić strukturę widżetu, kod CSS zdefiniować jego styl wizualny, a kod JavaScript wprowadzić możliwości interakcji. 
  • Plik Default.png: najprostszy sposób na utworzenie pliku Default.png to zrobienie zrzutu ekranu głównego pliku HTML otwartego w aplikacji do tworzenia treści internetowych lub w przeglądarce internetowej. Jest to obraz, który użytkownicy zobaczą na stronie i będą mogli stuknąć, aby otworzyć widżet. Zrób zrzut ekranu głównego pliku HTML otwartego w przeglądarce internetowej lub aplikacji do tworzenia treści internetowych. Nazwij go „Default.png” – konieczne jest użycie wielkiej litery „D”. Gdy widżet jest aktywny, ma rozmiar pliku Default.png. Możesz zmienić jego rozmiar w pliku Info.plist.
  • Plik Info.plist: ten plik zapewnia aplikacjom iBooks Author i Apple Books informacje wymagane do uruchamiania widżetu. Plik musi nazywać się „Info.plist”.

Po utworzeniu wymaganych plików możesz również utworzyć opcjonalne pliki, np. pliki CSS lub JavaScript. Następnie dodaj je wszystkie do pakietu widżetu:

  1. W Finderze utwórz nowy folder.
  2. Przenieś pliki do tego folderu.
  3. Zmień nazwę folderu i dodaj na jej końcu rozszerzenie .wdgt, aby utworzyć pakiet widżetu. Ikona folderu zmieni się w ikonę widżetu.
  4. Dodaj widżet do aplikacji iBooks Author.

Wskazówki dotyczące tworzenia widżetów

Przed utworzeniem pakietu widżetu upewnij się, że żaden z plików w pakiecie nie ma znaku sterującego w nazwie. W przeciwnym wypadku nie będzie można opublikować książki w sklepie Books Store w aplikacji Apple Books.

Jeśli ustawisz widżet tak, aby uruchamiał się automatycznie, nie będzie miał dostępu do Internetu. 

Nie używaj niestandardowych ikon folderów i nie umieszczaj następujących nazw folderów w widżecie:

  • Zasoby/
  • Support Files/Resources/
  • Contents/Resources/

Aby zoptymalizować widżet dla wyświetlaczy Retina:

  • W plikach HTML, CSS i JavaScript użyj standardowego protokołu dla witryn internetowych z grafiką Retina (2x). 
  • Umieść plik Default@2x.png w widżecie. Plik powinien mieć dwa razy większą rozdzielczość niż plik Default.png. Tego pliku nie da się zobaczyć w aplikacji iBooks Author, ale jest widoczny w aplikacji Apple Books na wyświetlaczu Retina.

Dowiedz się więcej o tym, jak optymalizować książki tworzone w aplikacji iBooks Author.

Plik Info.plist

Plik Info.plist prostego widżetu zawiera kilka wymaganych oraz kilka opcjonalnych kluczy. W poniższej tabeli znajdują się te klucze, ich definicje i przykładowe wartości dla widżetu o nazwie „Hello World”. 

Klucz Przykładowa wartość Wymagany Definicja
CFBundleDevelopmentRegion Angielski 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 rzeczywistą nazwę widżetu. Będzie ona wyświetlana w aplikacjach iBooks Author i Apple Books.
CFBundleIdentifier com.apple.widget.HelloWorld Wymagany Ciąg jednoznacznie identyfikujący widżet w odwrotnym formacie domeny.
CFBundleName Hello World Opcjonalny Ciąg zawierający nazwę widżetu. Musi być zgodny z nazwą pakietu widżetu w Finderze bez rozszerzenia pliku WDGT.
CFBundleShortVersionString 1.0 Opcjonalny Ciąg zawierający skrócony numer wersji widżetu. Często jest identyczny jak ciąg CFBundleVersion.
CFBundleVersion 1.0 Opcjonalny Ciąg zawierający numer wersji widżetu.
Height 768 Opcjonalny Liczba określająca wysokość widżetu (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 widżet.
Width 1024 Opcjonalny Liczba określająca szerokość widżetu (w pikselach). Jeśli nie określono, zostanie użyta szerokość obrazu Default.png.
IBNotifiesOnReady <true/> Opcjonalny Po ustawieniu wartości true widżet będzie informował aplikację Apple Books o momencie przełączenia wyświetlania z pliku Default.png na uruchomiony widżet HTML. 

 

Poniżej przedstawiono pełny plik Info.plist dla widżetu: 

<?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 kluczy

Nie używaj poniższych kluczy (ich funkcje nie są zgodne):

Klucz Opis
AllowFileAccessOutsideOfWidget Widżety w książkach utworzonych za pomocą aplikacji 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 nie są zgodne.
AllowInternetPlugins Wtyczki internetowe, takie jak program Flash, nie są dostępne w książkach utworzonych za pomocą aplikacji iBooks Author. Filmy i dźwięki można dołączyć za pomocą elementów <video> i <audio> kodu HTML5.
Filmy i dźwięki umieszczone w widżetach HTML nie są chronione mechanizmem DRM.
AllowJava Widżety w książkach utworzonych za pomocą aplikacji iBooks Author nie mogą zawierać elementów Java.
AllowSystem Widżety w książkach utworzonych za pomocą aplikacji iBooks Author nie mogą uzyskiwać dostępu do poleceń systemowych.
Plugin Widżety w książkach utworzonych za pomocą aplikacji iBooks Author nie mogą zawierać składników wtyczek Cocoa.

Aplikacja iBooks Author ignoruje następujące klucze: 

Klucz Opis
CloseBoxInsetX Widżety w aplikacjach iBooks Author i Apple Books nie wyświetlają dekoracji zamykania.
CloseBoxInsetY  

 

Fonts Widżety programu iBooks Author nie mogą używać dołączonych czcionek.

Wymagania dotyczące plików wideo i audio

Nie można używać plików multimedialnych o rozszerzeniach M4V ani M4P. Należy użyć jednego z następujących formatów z rozszerzeniem MP4:

  • H.264: rozdzielczość do 720p, 60 klatek na sekundę, wysoki profil, poziom 4,2 z audio AAC-LC do 160 kb/s, 48 kHz, dźwięk stereo. Takich ustawień używają pliki wideo, które otwierają się w aplikacji iMovie 10 w formacie 720p HD.
  • MPEG-4: do 2,5 Mb/s, 640 x 480 pikseli, 30 klatek na sekundę, profil prosty z audio AAC-LC do 160 kb/s na kanał, 48 kHz, dźwięk stereo.

W przypadku plików audio należy użyć formatu ACC (8 do 320 Kb/s, 48 kHz stereo) z rozszerzeniem pliku M4A.

Filmy i dźwięki w widżetach HTML nie są chronione mechanizmem DRM.

Jeśli plik wideo lub audio nie odtwarza się w widżecie w aplikacji iBooks Author, wyświetl jego podgląd na telefonie iPhone, iPadzie lub komputerze Mac. Pokaże to, jak plik będzie odtwarzany w gotowej książce.

Lokalizacja

Aplikacja iBooks Author nie obsługuje zlokalizowanych ciągów tekstu i zasobów. Ciągi tekstu widoczne dla użytkownika należy umieszczać w kodzie w języku docelowym.

Poprawianie przyciętych elementów

Elementy takie jak pliki <video> mogą wyświetlać się przycięte z jednej strony. Dzieje się tak, gdy wymiary elementu są większe niż dostępne miejsce. Znajdź atrybut „width:auto” w selektorze #video w kodzie CSS i ustaw go na rzeczywiste rozmiary. Jeśli na przykład widżet zawiera plik wideo o rozmiarach 960 x 540, sprawdź odpowiedni selektor w kodzie CSS i ustaw odpowiednią wysokość i szerokość:

#video   {
	width: 960;
	height: 540;
}

Projektowanie dla systemów iOS i macOS

Systemy iOS i macOS korzystają z różnych sposobów wprowadzania danych. Tworząc widżety HTML do użycia w aplikacji iBooks Author, możesz uwzględnić zarówno obsługę dotykową, jak i obsługę myszą.

Unikanie mignięcia przy otwieraniu widżetu HTML przez czytelnika

Jeśli widżet HTML jest bardzo złożony, czytelnicy mogą zobaczyć mignięcie przy otwieraniu go w aplikacji Apple Books. Aby tego uniknąć, uaktualnij widżet tak, aby informował aplikację Apple Books o tym, kiedy ma przełączać się z pliku Default.png na widżet HTML:

1. Dodaj element „IBNotifiesOnReady” o wartości true do pliku Info.plist widżetu. Informuje to aplikację Apple Books, że dany widżet wskazuje moment przełączenia na widżet HTML.

<key>IBNotifiesOnReady</key>
 <true/>

2. Ustaw widżet tak, aby wczytywał bibliotekę Apple JavaScript w sekcji <head> pliku HTML:

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

Systemy iOS i macOS zawierają już plik AppleWidget.js, więc nie trzeba umieszczać go w pakiecie widżetu.

3. Ustaw widżet tak, aby informował aplikację Apple Books o zainicjowaniu pliku HTML. W kodzie JavaScript w sekcji <head> pliku HTML umieść następujące wywołanie:

widget.notifyContentIsReady()

Publikowanie w zewnętrznych usługach internetowych

Widżety HTML można publikować w zewnętrznych usługach internetowych tylko, jeśli używają odpowiednich nagłówków CORS (Cross-Origin Resource Sharing).

Data publikacji: