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 zawartości www 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:
W Finderze utwórz nowy folder.
Przenieś pliki do tego folderu.
Zmień nazwę folderu i dodaj na jej końcu rozszerzenie .wdgt, aby utworzyć pakiet widżetu. Ikona folderu zmieni się w ikonę widżetu.
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. |
Wzrost | 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 widget.Width1024Optional |
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 | 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ęk można dołączać przy użyciu rozwiązań ze standardu 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 iPhonie, iPadzie lub Macu. 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
Element taki jak
#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ą.
Dowiedz się więcej o projektowaniu zdarzeń dotykowych w systemie iOS.
Dowiedz się więcej o projektowaniu zdarzeń myszy w systemie macOS.
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>
2. Ustaw widżet tak, aby w części
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 JavaScript znajdującym się w części
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).
