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:

  1. En el Finder, crea una carpeta.
  2. Agrega los archivos a tu nueva carpeta.
  3. 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.
  4. 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.
Height 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.
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 <true/> 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 audio mediante los elementos HTML5 <video> y <audio>.
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 por ejemplo <video>, puede aparecer recortado en un costado. Esto puede suceder si sus dimensiones son más grandes que el espacio disponible. Encuentra el CSS para “width:auto” en el selector #video y cámbialo para que refleje las dimensiones reales. Por ejemplo, tu widget puede contener un video con dimensiones de 960 x 540. Verifica el CSS para el selector apropiado y configura el ancho y alto con los valores correctos:

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

2. Configura tu widget para que cargue la biblioteca Apple JavaScript en la sección <head> del archivo HTML:

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

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 sección <head> del archivo HTML, denomina:

widget.notifyContentIsReady()

Publicar en un servicio web externo

Puedes publicar tus widgets HTML en servicios web externos si utilizan los encabezados correctos para compartir los recursos de origen cruzado (CORS).

Fecha de publicación: