Crea widgets HTML5 para iBooks Author
Obtén información sobre cómo hacer widgets HTML5 que puedes usar en los libros que creas en iBooks Author.
iBooks Author es compatible con los widgets HTML5, que tienen la extensión de archivo .wdgt. Para hacer un widget HTML5, utiliza un editor de textos o una app de creación de contenidos para crear estos tres archivos:
Archivo HTML principal: este archivo es la parte principal del widget. Puede tener el nombre que quieras, pero su extensión debe ser .html. Puedes añadir el lenguaje CSS y JavaScript dentro del archivo HTML principal. O puedes añadir archivos .css y .js al paquete del widget y cargarlos desde el archivo HTML principal. Puedes emplear cualquier técnica que utilices habitualmente para designar una página web. Utiliza HTML para definir la estructura del widget, CSS para proporcionar un estilo visual y JavaScript para que sea interactivo.
Archivo Default.png: la manera más sencilla de crear un archivo Default.png es tomar una captura de pantalla de tu archivo HTML principal en una app de creación de contenidos o en un navegador. Esta es la imagen que los lectores verán en la página y sobre la cual tocarán para abrir el widget. En un navegador o una app de creación de contenidos web, toma una captura de pantalla del archivo HTML principal. Nómbralo “Default.png” y asegúrate de utilizar la letra D mayúscula. Cuando el widget se activa, es del tamaño del archivo Default.png. Puedes cambiar el tamaño en el archivo Info.plist.
Archivo Info.plist: este archivo proporciona a iBooks Author y Apple Books la información que necesitan para ejecutar tu widget. El nombre del archivo debe ser “Info.Plist”.
Después de crear los archivos necesarios, crea cualquier archivo opcional que desees, como archivos CSS o JavaScript. Luego, agrégalos a un paquete del widget:
En el Finder, crea una carpeta.
Agrega los archivos a tu nueva carpeta.
Vuelve a asignarle un nombre a la carpeta y agrega la extensión .wdgt al nombre de la carpeta para crear el paquete del widget. El ícono de la carpeta cambiará al ícono del widget.
Agrega el widget a iBooks Author.
Sugerencias para crear widgets
Antes de crear el paquete del widget, asegúrate de que ningún archivo en el paquete tenga caracteres de control en su nombre. Si este es el caso, no puedes publicar el libro en Book Store de Apple Books.
Si configuras el widget para que se reproduzca automáticamente, no puede acceder a Internet.
No utilices íconos de carpeta personalizados y evita los siguientes nombres de carpeta para tu widget:
Recursos/
Support Files/Resources/
Contents/Resources/
Optimizar tu widget para una pantalla Retina:
Cuando escribas tus archivos HTML, CSS y JavaScript, sigue el protocolo estándar para crear sitios web con gráficos Retina (2x).
El paquete del widget debería incluir un archivo Default@2x.png. Elabora el archivo con el doble de resolución que la del archivo Default.png. No puedes ver este archivo en iBooks Author, pero puedes verlo en Apple Books en una pantalla Retina.
Obtén más información sobre cómo optimizar libros creados con iBooks Author.
Archivo Info.plist
El archivo Info.plist básico de un widget contiene algunas claves obligatorias y otras opcionales. En esta tabla, se mencionan estas claves, sus definiciones y algunos valores de ejemplo de un widget llamado “Hello World”.
Clave | Valor de ejemplo | Obligatorio | Definición |
CFBundleDevelopmentRegion | Inglés | Opcional | Una cadena que especifica la región nativa del paquete. Normalmente, se corresponde con la lengua materna de la persona que creó el paquete. |
CFBundleDisplayName | Hello World | Obligatorio | Una cadena que contiene el nombre del widget. Se mostrará en iBooks Author y Apple Books. |
CFBundleIdentifier | com.apple.widget.HelloWorld | Obligatorio | Una cadena que identifica de forma exclusiva el widget en formato de dominio inverso. |
CFBundleName | Hello World | Opcional | Una cadena que contiene el nombre del widget. Debe corresponderse con el nombre del paquete del widget en el Finder, sin la extensión de archivo .wdgt. |
CFBundleShortVersionString | 1.0 | Opcional | Una cadena que indica el número de versión corto del widget. A menudo es el mismo que CFBundleVersion. |
CFBundleVersion | 1.0 | Opcional | Una cadena que indica el número de versión del widget. |
Altura | 768 | Opcional | Un número que indica la altura en pixeles del widget. Si no se especifica, se usará la altura de Default.png. |
MainHTML | HelloWorld.html | Obligatorio | Una cadena que especifica el nombre del archivo HTML que implementa tu widget. Width1024Optional |
Width | 1024 | Opcional | Un número que indica el ancho en pixeles del widget. Si no se especifica, se usará el ancho de Default.png. |
IBNotifiesOnReady | Opcional | Cuando se configura como true, el widget le indica a Apple Books cuándo pasar de mostrar Default.png a mostrar el widget HTML en ejecución. |
El archivo Info.plist completo de un widget tiene este aspecto:
<?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>
Restricciones y limitaciones de la clave
No utilices estas claves; las funciones no son compatibles:
Clave | Descripción |
AllowFileAccessOutsideOfWidget | Los widgets de libros creados con iBooks Author no pueden acceder a archivos del sistema general de archivos. |
AllowFullAccess | Forma abreviada para una lista de otras claves de acceso, algunas de las cuales no son compatibles. |
AllowInternetPlugins | Los módulos de Internet, como Flash, no están disponibles en los libros creados con iBooks Author. Puedes incluir películas y audios usando HTML5 Las películas y el audio dentro de los widgets HTML no estarán protegidos por DRM. |
AllowJava | Los widgets de libros creados con iBooks Author no pueden incluir contenidos Java. |
AllowSystem | Los widgets de libros creados con iBooks Author no pueden acceder a comandos del sistema. |
Plugin | Los widgets de libros creados con iBooks Author no pueden incluir un componente del módulo Cocoa. |
iBooks Author ignora estas claves:
Clave | Descripción |
CloseBoxInsetX | Los widgets en iBooks Author y Apple Books no muestran una decoración de cierre. |
CloseBoxInsetY | |
Fonts | Los widgets de iBooks Author no pueden usar tipos de letra integrados. |
Requisitos de video y audio
No puedes utilizar archivos multimedia con las extensiones .m4v o .m4p. Usa uno de estos formatos con una extensión de archivo .mp4:
Video H.264: hasta 720p, 60 fotogramas por segundo, perfil alto de nivel 4.2 con audio AAC-LC de hasta 160 kbps, 48 kHz, audio estéreo. Los videos que se abren en iMovie 10 en HD 720p utilizan estas configuraciones.
Video MPEG-4: hasta 2,5 Mbps, 640 x 480 pixeles, 30 fotogramas por segundo, perfil simple con audio AAC-LC de hasta 160 kbps por canal, 48 kHz, audio estéreo.
Para el audio, utiliza AAC (de 8 a 320 Kbps, 48 kHz, estéreo) con una extensión de archivo .m4a.
Los contenidos de video y audio en paquetes de widgets HTML no están protegidos mediante DRM.
Si el archivo de una película o de un audio no se reproduce en tu widget en iBooks Author, genera la vista previa en tu iPhone, iPad o Mac. Esto muestra cómo se reproducirá el archivo en el libro completado.
Localización
iBooks Author no es compatible con cadenas y componentes localizados. Incluye cadenas de texto en el idioma meta que el lector puede ver en línea.
Fijar los elementos recortados
Un elemento, como
#video { ancho: 960; alto: 540; }
Desarrollo para iOS y macOS
iOS y macOS usan tipos de entrada distintos. Puedes acomodar la entrada para toques y para el mouse cuando creas tus widgets HTML para iBooks Author.
Evitar un flash cuando los lectores abren el widget HTML
Si tu widget HTML es muy complicado, es posible que los lectores vean un flash cuando lo abran en Apple Books. Para evitar esto, actualiza tu widget para indicarle a Apple Books cuándo debe pasar del archivo Default.png al widget HTML:
1. Agrega un artículo “IBNotifiesOnReady” configurado como “true” en el archivo Info.plist del widget. Esto le permite a Apple Books saber que el widget le avisará cuándo pasar al widget HTML.
<key>IBNotifiesOnReady</key>
2. Configura tu widget para que cargue la biblioteca Apple JavaScript en la
iOS y macOS ya tienen la extensión AppleWidget.js, por lo tanto, no necesitas incluirlo en tu paquete de widget.
3. Configura tu widget para notificarle a Apple Books cuando se inicia el HTML. En el JavaScript que está en la
widget.notifyContentIsReady()
Publicar en un servicio web externo
Puedes publicar tus widgets HTML en servicios web externos solo si utilizan los encabezados correctos para compartir los recursos de origen cruzado (CORS).
