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 tocará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”.

El archivo Info.plist completo de un widget tiene este aspecto:

Limitaciones y restricciones de teclas

No utilices estas claves porque las prestaciones no son compatibles:

iBooks Author ignora estas claves:

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

Un elemento, como por ejemplo,

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.

• Más información acerca de cómo desarrollar eventos de toque en iOS.

• Más información acerca de cómo desarrollar eventos de ratón en macOS.

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.

2. Configura tu widget para que cargue la biblioteca JavaScript de Apple

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

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.