iBooks Author: Acerca de la creación de widgets HTML

Puedes crear widgets HTML para usarlos en los libros que elabores en iBooks Author.

iBooks Author es compatible con widgets HTML5 (con la extensión .wdgt).

Para crear un widget HTML para iBooks Author, utiliza una app de edición de textos o de creación de contenidos web para crear los archivos siguientes:

  • 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 incluir CSS y JavaScript dentro del archivo HTML principal, o añadir archivos .css y .js al paquete del widget y configurar el archivo HTML principal para cargarlos. En estos archivos puedes usar cualquier técnica o truco que utilizarías al diseñar una página web. En general, puedes usar HTML para definir la estructura de tu widget, CSS para darle el aspecto visual y JavaScript para hacerlo interactivo.
  • Default.png: Esta es la imagen que aparecerá en la página y que los usuarios pulsarán para abrir tu widget. El nombre debe ser "Default.png", con "D" mayúscula. La forma más sencilla de crear un Default.png es hacer una captura de pantalla de tu archivo HTML principal ejecutándose en una app de creación de contenidos web o en un navegador web. Cuando tu widget esté activo, tendrá el tamaño de Default.png, a menos que especifiques un tamaño distinto en Info.plist.
  • Info.plist: Este archivo suministra a iBooks Author y iBooks la información que necesitan para ejecutar tu widget. Su nombre debe ser "Info.plist". Más abajo encontrarás detalles adicionales y un ejemplo.

Una vez hayas creado los tres archivos necesarios (y quizás algunos otros opcionales, como un CSS o JavaScript), ensámblalos en un paquete de widget:

  1. En el Finder, crea una carpeta y coloca los archivos en la misma.
  2. Cambia el nombre de la carpeta y añade la extensión .wdgt al nombre de la carpeta. Así se creará el paquete del widget, y el icono de la carpeta pasará a ser un icono de widget.

Tu widget ya está listo para añadirse a iBooks Author.

Notas

  • Si tu libro incluye widgets HTML que contengan archivos con caracteres de control en su nombre de archivo, no podrá publicarse en el iBooks Store. Antes de crear tu paquete del widget, asegúrate de que ninguno de los archivos contenidos en el paquete utiliza esos caracteres en el nombre de archivo. No utilices iconos de carpeta personalizados.
  • Evita incluir carpetas con estos nombres dentro del paquete del widget:
    • Resources/
    • Support Files/Resources/
    • Contents/Resources/
  • Si estás creando contenido para iPad u ordenadores Mac con 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 con el doble de resolución que el archivo Default.png. No podrás visualizar este archivo en iBooks Author, pero sí se mostrará en iBooks en los modelos de iPad o Mac con pantalla Retina. 
  • Si quieres que tu widget ocupe toda la pantalla cuando se haga zoom al máximo, asegúrate de que Default.png tenga 768 x 1024 píxeles y Default@2x.png tenga 1536 x 2048 píxeles. Si quieres que tu widget ocupe menos espacio que la pantalla completa, dale a Default.png las dimensiones a las que quieras que se vea el widget (por ejemplo, 600 x 900) y duplica las dimensiones para Default@2x.png.
  • Aprende más acerca de cómo optimizar libros creados con iBooks Author.

El archivo Info.plist 

El archivo Info.plist básico de un widget contiene unas claves obligatorias y otras opcionales. Estas claves se enumeran a continuación junto con sus definiciones y algunos valores de ejemplo para un widget llamado "Hello World". 

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 y que se mostrará en iBooks Author y iBooks.
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 píxeles del widget. Si no se especifica, se utilizará 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 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 iBooks 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

Algunas funciones no son compatibles. No deberías utilizar estas claves:

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. Es posible incluir películas y audio mediante los elementos <video> y <audio> de HTML5, respectivamente.
Nota: 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: 

CloseBoxInsetX Los widgets en iBooks Author y iBooks no muestran una decoración de cierre.
CloseBoxInsetY  

 
Fonts Los widgets de iBooks Author no pueden utilizar tipos de letra integrados.

Requisitos para películas y audio

No puedes usar contenidos que tengan las extensiones de archivo ".m4v" o ".m4p". 

Te recomendamos que utilices vídeo H.264 en un contenedor MPEG-4 con una extensión de archivo ".mp4".

En el caso del audio, te recomendamos que utilices audio AAC en un contenedor MPEG-4 con una extensión de archivo ".m4a".

Nota: Los contenidos de vídeo y audio en paquetes de widgets HTML no están protegidos mediante DRM.

Nota: En algunos casos, los archivos de películas y audio en widgets HTML podrían no reproducirse en iBooks Author, pero sí en iBooks. Si no puedes reproducir un archivo de película o de audio en tu widget en iBooks Author, prueba a hacer una vista previa en un iPad o con OS X Mavericks. Así deberías poder ver cómo se reproducirá el archivo en el libro completado.

Localización

iBooks Author no es compatible con cadenas y componentes localizados. Por tanto, las cadenas de texto visibles para el usuario deben ir incluidas e integradas en el idioma de destino.

Elementos recortados

Si un elemento <video>, por ejemplo, aparece recortado por un extremo, puede deberse a que se expande para rellenar un espacio mayor que el visible. Comprueba el CSS para "width:auto" en el selector #video y cámbialo para que refleje las dimensiones reales. Por ejemplo, si tu widget contiene un vídeo cuyas dimensiones son 960 x 540, busca en el CSS el selector apropiado y define explícitamente la altura y la anchura con los valores correctos:

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

Cómo desarrollar simultáneamente para iOS y OS X Mavericks

iOS y OS X utilizan tipos de entrada fundamentalmente distintos, así que cuando crees tus widgets HTML para iBooks Author querrás asegurarte de tener en cuenta la gestión mediante toques y mediante ratón si quieres emplear algún tipo de control no gestionado por los gestos estándar.

 

Apertura del widget HTML

En función de lo complejo que sea tu widget HTML, los lectores podrían experimentar un parpadeo durante la inicialización de HTML cuando abran el widget en iBooks. Para evitar este parpadeo, modifica el widget de forma que le indique a iBooks cuándo pasar de mostrar el archivo Default.png a mostrar el widget HTML en ejecución.

Para añadir esta función opcional debes realizar tres modificaciones:

  1. Añade un ítem "IBNotifiesOnReady" configurado como "true" en el archivo Info.plist del widget para que iBooks sepa que el widget le indicará cuándo debe empezar a mostrar el widget HTML en ejecución:
    <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>
    Nota: AppleWidget.js ya se encuentra presente en el iPad, así que no es necesario que lo incluyas en el paquete del widget.

  3. Configura tu widget para que informe a iBooks de cuándo se va inicializar el HTML y iBooks pueda pasar de mostrar el archivo Default.png a mostrar el widget HTML en ejecución realizando una llamada (en JavaScript incluido en la sección HEAD del archivo HTML):
    widget.notifyContentIsReady()

Importante: Si optas por modificar tu widget HTML para evitar el parpadeo, asegúrate de realizar los tres pasos anteriores. Debes llevar a cabo todos los pasos para que todo funcione correctamente.

Acerca de la publicación en servicios web externos

Los widgets HTML solo pueden publicar en servicios web externos si esos servicios web han implementado las cabeceras CORS (Cross-Origin Resource Sharing) pertinentes.

Importante: La mención de productos y sitios web de terceras partes se realiza sólo con fines informativos y no implica recomendación ni aprobación. Apple declina toda responsabilidad referente a la elección, el funcionamiento o el uso de la información o los productos contenidos en estos sitios web. Apple sólo ofrece información de los mismos para la comodidad de nuestros usuarios. Apple no ha probado la información contenida en estos sitios y no defiende su precisión o fiabilidad. El uso de cualquier información o producto encontrado en Internet conlleva riesgos inherentes, y Apple declina toda responsabilidad en este aspecto. Debe comprender que los sitios de terceras partes son independientes de Apple y, por lo tanto, Apple no tiene ningún control sobre los contenidos de estos sitios. Póngase en contacto con el proveedor para obtener información adicional.

Fecha de publicación: