Crear widgets HTML5 para iBooks Author

Aprende a crear widgets HTML5 para usarlos en los libros que crees en iBooks Author.

iBooks Author es compatible con widgets HTML5, que tienen la extensión de archivo .wdgt. Para crear un widget HTML5, usa un editor de texto 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 la extensión debe ser .html. El archivo HTML principal puede incluir CSS y JavaScript. O bien puedes añadir archivos .css y .js en el paquete del widget y cargarlos desde el archivo HTML principal. Puedes usar cualquier técnica que utilizarías para diseñar una página web. Define la estructura del widget con HTML, especifica el estilo visual con CSS y hazlo interactivo con JavaScript. 
  • Archivo Default.png: la forma más sencilla de crear un archivo Default.png es hacer una captura de pantalla de tu archivo HTML principal en una app de creación de contenidos web o en un navegador web. Esta es la imagen que aparecerá en la página y que los lectores pulsarán para abrir el widget. En un navegador web o en una app de creación de contenidos web, haz una captura de pantalla de tu archivo HTML principal. Ponle el nombre “Default.png”, con “D” mayúscula. Cuando el widget esté activo, tendrá el 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 a Apple Books la información que necesitan para ejecutar el widget. El nombre de archivo debe ser “Info.plist”.

Después de crear estos archivos obligatorios, crea todos los archivos opcionales que quieras, por ejemplo, archivos CSS o JavaScript. A continuación, añádelos todos a un paquete de widget:

  1. En el Finder, crea una carpeta.
  2. Añade los archivos a la carpeta nueva.
  3. Cambia el nombre de la carpeta y añade la extensión .wdgt al nombre de la carpeta para crear el paquete de widget. El icono de la carpeta se convertirá en un icono de widget.
  4. Añade el widget a iBooks Author.

Consejos para crear widgets

Antes de crear el paquete de widget, comprueba que ningún archivo del paquete tiene caracteres de control en el nombre de archivo. Si algún archivo tiene caracteres de control, no puedes publicar el libro en la Tienda de Apple Books.

Si defines el widget para que se reproduzca automáticamente, no podrá acceder a Internet. 

No utilices iconos de carpeta personalizados y procura no utilizar estos nombres de carpeta en el widget:

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

Para optimizar el widget para la pantalla Retina:

  • En los archivos HTML, CSS y JavaScript, utiliza el protocolo estándar para sitios web con gráficos Retina (2x). 
  • Incluye un archivo Default@2x.png en el widget. Haz que el archivo tenga el doble de resolución que el archivo Default.png. No puedes ver este archivo en iBooks Author, pero sí lo podrás ver en Apple Books con una pantalla Retina.

Aprende a optimizar los libros creados con iBooks Author.

El archivo Info.plist

Un archivo Info.plist básico de un widget contiene unas claves obligatorias y otras opcionales. Esta tabla recoge las claves, sus definiciones y algunos valores de ejemplo para un widget llamado “Hello World”. 

Clave Valor de ejemplo Obligatorio Definición
CFBundleDevelopmentRegion inglés Opcional 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 Cadena que contiene el nombre real del widget. Esto aparecerá en iBooks Author y Apple Books.
CFBundleIdentifier com.apple.widget.HelloWorld Obligatorio Cadena que identifica de forma exclusiva el widget en formato de dominio inverso.
CFBundleName Hello World Opcional 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 Cadena que indica el número de versión corto del widget. A menudo es el mismo que CFBundleVersion.
CFBundleVersion 1.0 Opcional Cadena que indica el número de versión del widget.
Height 768 Opcional Un número que indica la altura en píxeles del widget. Si no se especifica, se utilizará la altura de Default.png.
MainHTML HelloWorld.html Obligatorio Cadena que especifica el nombre del archivo HTML que implementa el widget.
Width 1024 Opcional Un número que indica el ancho en píxeles del widget. Si no se especifica, se utilizará 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>

Limitaciones y restricciones de teclas

No utilices estas claves porque las prestaciones no son compatibles:

Clave Descripción
AllowFileAccessOutsideOfWidget Los widgets de libros creados con iBooks Author no pueden acceder a los 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 plug-ins de Internet, como Flash, no están disponibles en los libros creados con iBooks Author. Puedes incluir archivos de vídeo y audio utilizando los elementos HTML5 <video> y <audio>.
Los archivos de vídeo y audio de los widgets HTML no dispondrán de protección DRM.
AllowJava Los widgets de los libros creados con iBooks Author no podrán incluir contenido Java.
AllowSystem Los widgets de los libros creados con iBooks Author no pueden acceder a los comandos del sistema.
Plug-in Los widgets de los libros creados con iBooks Author no podrán incluir un componente del plug-in Cocoa.

iBooks Author ignora estas claves: 

Clave Descripción
CloseBoxInsetX Los widgets de iBooks Author y Apple Books no muestran una decoración de cierre.
CloseBoxInsetY  

 

Tipos de letra Los widgets de iBooks Author no podrán usar los tipos de letra integrados.

Requisitos de vídeo y audio

No puedes utilizar archivos multimedia con las extensiones .m4v o .m4p. Utiliza uno de estos formatos con extensión .mp4:

  • Vídeo H.264: Hasta 720p, 60 fotogramas por segundo, perfil alto nivel 4.2, audio AAC-LC de hasta 160 kb/s, 48 kHz, audio estéreo. Los vídeos que se abren en iMovie 10 con la opción HD 720p utilizan estos ajustes.
  • Vídeo MPEG-4: hasta 2,5 Mb/s, 640 x 480 píxeles, 30 fotogramas por segundo, perfil simple con audio AAC-LC de hasta 160 kb/s por canal, 48 kHz, audio estéreo.

Para el audio, utiliza AAC (de 8 a 320 kb/s, 48 kHz, estéreo) con la extensión de archivo .m4a.

Los archivos de vídeo y audio de los paquetes de widgets HTML no disponen de protección DRM.

Si un archivo de vídeo o audio no se reproduce en tu widget en iBooks Author, previsualízalo en el iPhone, iPad o Mac. Así es como se reproducirá el archivo en el libro terminado.

Localización

iBooks Author no es compatible con componentes o cadenas localizados. Incluye cadenas de texto en el idioma de destino que el lector puede ver integrado.

Corregir elementos recortados

Puede que un elemento, por ejemplo un <vídeo>, aparezca recortado por un lado. Esto puede pasar si sus medidas superan el espacio disponible. Busca el CSS para “width:auto” en el selector #video y cámbialo según las dimensiones reales. Por ejemplo, el widget puede incluir un vídeo con las medidas 960 x 540. Busca el selector correspondiente en el CSS y define la altura y la anchura con los valores correctos:

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

Desarrollar para iOS y macOS

iOS y macOS usan diferentes tipos de entrada. Al crear widgets HTML para iBooks Author, puedes utilizar entradas táctiles y de ratón.

Evitar que se active el flash cuando los lectores abran el widget HTML

Si tu widget HTML es muy complejo, puede que los lectores vean un flash al abrirlo en Apple Books. Para que esto no suceda, actualiza el widget para decirle a Apple Books cuándo cambiar del archivo Default.png al widget HTML:

1. Añade un elemento “IBNotifiesOnReady” definido en Verdadero en el archivo Info.plist del widget. De esta forma, Apple Books sabe que el widget le dirá cuándo pasar al widget HTML.

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

2. Configura el 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 AppleWidget.js, así que no tienes que incluirlo en el paquete del widget.

3. Define el widget para indicar a Apple Books cuándo se inicializa el HTML. En el JavaScript que está en la sección <head> del archivo HTML, haz esta invocación:

widget.notifyContentIsReady()

Publicar en un servicio web externo

Solamente puedes publicar widgets HTML en servicios web externos si utilizan los encabezados Cross-Origin Resource Sharing (CORS) correctos.

Fecha de publicación: