Las novelas gráficas, los manga y los cómics (en lo sucesivo, novelas gráficas) son los libros de formato fijo con imágenes emergentes o viñetas virtuales más comunes. Son similares a los libros infantiles y juveniles, pero suponen un reto mayor, ya que suelen ser más largos y tener contenido más complejo.

Las novelas gráficas incluyen imágenes con una gran cantidad de detalles que se tendrán que ver en una pantalla de 1920 x 1200. Para solucionar estas y otras cuestiones de accesibilidad, Amazon aconseja el uso de contenido personalizado y la función vista de viñeta que optimiza el contenido para que el lector disfrute leyendo en alta resolución. Consulte los detalles de Kindle Comic Creator.

Este formato admite la tipografía mejorada siempre que el eBook no contenga texto híbrido (consulte más detalles sobre el texto híbrido).

Importante: Las etiquetas de ancla anidadas no se admiten en libros de formato fijo. Los libros de formato fijo y etiquetas de ancla anidadas se retirarán.

Contenidos

• Pautas de metadatos
• Pautas sobre imágenes
• Vista de viñeta (ampliación de la zona)
• Viñetas virtuales en cómics y manga
• Optimizar contenido para las novelas gráficas
• Pautas sobre texto
• Vista guiada

Pautas de metadatos

El archivo OPF especifica los metadatos necesarios para libros de formato fijo. Pese a las similitudes, los varios tipos de formatos fijos cuentan con diferencias clave. A menos que se indique explícitamente, no deben aplicarse las instrucciones para libros de formato fijo con imágenes emergentes o viñetas virtuales a cualquier otro formato, como libros de formato fijo con texto emergente.

Pautas sobre imágenes

Cuando las novelas gráficas se optimicen para Kindle Fire HD 8.9" 2013, deben mantener una relación de aspecto de 1920 x 1200. La resolución de imagen cambiará dependiendo del factor de zoom necesario para la vista de viñeta.

Sin embargo, Amazon recomienda establecer un diseño con aumento del doble para lograr una mejor calidad de lectura. Las imágenes deben tener formato JPEG. Amazon recomienda usar una resolución de imagen de al menos 300 ppp.

Existen cinco factores de zoom estándar:

La calidad de la imagen para las novelas gráficas tiene que ser la que establecemos en esta sección y, a su vez, debe mantener una relación de aspecto uniforme. Sobre todo, es necesario que optimice las imágenes para que las ilustraciones de fondo y el texto se aprecien con nitidez. Estos dos factores garantizan una calidad máxima en las novelas gráficas.

Vista de viñeta (ampliación de la zona)

La vista de viñeta para novelas gráficas favorece notablemente la percepción del lector. Mejora la accesibilidad y permite a los usuarios experimentar el flujo de acción en cada página en alta resolución y de forma sencilla. Los usuarios pueden deshabilitar la vista de viñeta en cualquier momento si quieren ver la página entera. En esta sección encontrará imágenes de ejemplo de la vista de viñeta.

El usuario puede activar la vista de viñeta pulsando dos veces sobre el "área de pulsación". El área activa (elemento fuente) se oculta y se muestra la vista de viñeta (elemento objetivo).

Para que la vista de viñeta sea compatible, debe seguir estos pasos:

1. Establezca el área de pulsación creando un elemento contenedor bien definido (<div>) que contenga un elemento de ancla (<a>). El <div> proporciona el tamaño y la posición del área de pulsación. El <a> está dimensionado para llenar el <div> y debe especificar la clase app-amzn-magnify. El ancla tiene que tener los siguientes atributos almacenados en un objeto JSON como parte del valor data-app-amzn-magnify:
   1. "targetId":"<string:elementId>" = ID del elemento único del elemento HTML de la vista de viñeta que representa la zona ampliada
   2. "ordinal":<integer:reading order> = orden de lectura de las zonas de ampliación (el orden en que aparecerán las viñetas como parte del flujo de lectura)
2. Cree un elemento <div> de la vista por viñetas de pulsación cuyo tamaño y posición permitan mostrar la imagen de la acción que mejor represente al área de pulsación.
   
   

   Contenido con formato fijo

   El mismo contenido con la vista de viñeta activada.

   Ejemplo:

   <div> <img src="images/page_002.jpg" alt="Comic Book Images" class="singlePage" /> </div> <div id="page_002-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"page_002-1magTargetParent", "ordinal":1}'></a> </div> … <div id="page_002-1-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"> </div> <div id="page_002-1-magTarget" class="target-mag"> <img src="images/page_002.jpg" alt="Comic Book Images"/> </div> </div>

   
   

   ---

   Viñetas virtuales en cómics y manga

   La función viñetas virtuales está presente en los libros de cómics y manga si el editor no ha añadido viñetas. Los metadatos RegionMagnification se utilizan para identificar si el editor proporcionó información sobre los paneles o no. Si el editor incluyó viñetas de ampliación de la zona en alguna página, la vista en viñetas virtuales de Kindle no se habilitará.

   De manera predeterminada, cada página está dividida en cuatro paneles en función del valor primary-writing-mode. Estos ejemplos indican el orden de los paneles.

   Ejemplo:

   Modo vertical:

   

   Horizontal-lr, Horizontal-rl

   

   Vertical-rl, Vertical-lr

   
   

   Modo horizontal:

   

   Vertical-lr y Horizontal-lr, Horizontal-rl y Vertical-rl

   Algunos dispositivos admiten el desplegado sintético:

   

   Vertical-rl, Vertical-lr

   Requisito n.º 1: Utilizar un desplegado sintético cuando el bloqueo de orientación es igual a none

   Si la orientación no está bloqueada, el contenido debe diseñarse tanto para modo horizontal como vertical. Algunos dispositivos muestran un desplegado sintético con dos páginas adyacentes en modo horizontal. Cada página que vaya a usarse en el desplegado sintético debe contar con una página emparejada definida en orientación horizontal. Esto no es necesario en la orientación vertical.

   Las páginas que vayan a usarse en un desplegado sintético deben estar etiquetadas con las propiedades page-spread-left o page-spread-right. Cada página izquierda debe tener asociada una página derecha y viceversa. Las páginas únicas pueden centrarse en el dispositivo en modo horizontal con la propiedad page-spread-center.

   

   En modo vertical, las dos páginas se renderizarán por separado:

   

   Si no se especifica ninguna propiedad o si la página incluye la etiqueta page-spread-left sin una page-spread-right (o viceversa), Kindle utilizará page-spread-center y centrará las páginas sin propiedad de desplegado cuando el dispositivo esté en modo horizontal.

   En el siguiente ejemplo se entiende que primary-writing-mode es igual a horizontal-lr o vertical-lr.

   Ejemplo:

   <lomo> <itemref idref="page1" /> <!--NOTE: assumed to be properties="page-spread-center" --> <itemref idref="page2" /> <!-- NOTE: assumed to be properties="page-spread-center" --> <itemref idref="page3" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> <itemref idref="page4" properties="page-spread-right"/> <!-- NOTE: synthetic spread's; right viewport --> </spine>

   En el siguiente ejemplo se entiende que primary-writing-mode es igual a horizontal-rl o vertical-rl.

   Ejemplo:

   <lomo> <itemref idref="page1" /> <!-- NOTE: assumed to be properties="facing-page-right" --> <itemref idref="page2" /> <!-- NOTE: assumed to be properties="facing-page-left" --> <itemref idref="page3" properties="page-spread-right"/> <!-- NOTE: synthetic spread's right viewport --> <itemref idref="page4" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> </spine>

   En casos en los que una página izquierda no cuenta con una página derecha equivalente (o viceversa), el editor puede insertar una página HTML en blanco y agregar la propiedad layout-blank a la página, a menos que se trate de la última página. De manera opcional, la página en blanco puede incluir el título del libro y la marca de agua del diseño.

   Las páginas con la propiedad layout-blank solo se renderizan en modo horizontal y se ignoran en modo vertical.

   Si lo desea, el editor puede insertar una página en blanco para renderizarla tanto en modo horizontal como vertical. En ese caso, no utilice la propiedad layout-blank. Use las mismas reglas de desplegado sintético indicadas anteriormente y haga referencia a un archivo de imagen que contenga una imagen JPEG "en blanco".

   En el siguiente ejemplo se entiende que primary-writing-mode es igual a horizontal-lr o vertical-lr.

   Ejemplo:

   <lomo> <itemref idref="page1" /> <!-- NOTE: assumed to be properties="page-spread-left" --> <itemref idref="blank-page" properties="layout-blank"/> <!-- NOTE: assumed to be properties="page-spread-right". Ignored in portrait mode. --> <itemref idref="page2" properties="page-spread-left"/> <!-- NOTE: synthetic spread's left viewport --> <itemref idref="page3" properties="page-spread-right"/> <!--NOTE: synthetic spread's right viewport --> </spine>

   
   

   ---

   Optimizar contenido para las novelas gráficas

   Optimizar áreas de pulsación

   Las áreas de pulsación deben cubrir de forma efectiva el 100% de la pantalla. Esto garantiza que el usuario pueda ampliar el contenido siempre que pulse dos veces sobre la novela gráfica.

   
   

   Optimizar las vistas en viñetas

   Las vistas en viñetas deberían ser, de manera predeterminada de un 150% del área de pulsación. Es posible utilizar distintos tamaños de vistas en viñetas para enfatizar un escenario de la acción específico dentro del área de pulsación.

   Coloque las vistas en viñetas de modo que tapen las imágenes del fondo según corresponda. Deben colocarse sobre las viñetas de la página original, y alinearse con los márgenes siempre que sea posible.

   Si se mantiene el contexto a lo largo de muchos paneles, se permite que las vistas en viñetas se solapen ligeramente entre ellas.

   

   Para utilizar el factor de zoom predeterminado del 150%, a veces es necesario dividir un escenario de la acción en dos vistas en viñetas (normalmente, una viñeta derecha y una izquierda o una superior y una inferior). Esto permite que el usuario tenga una mejor percepción que la que obtiene con un factor de zoom menor ya que se mantiene la accesibilidad y aporta una mayor resolución.

   Divida las áreas de pulsación para que la primera esté entre un 50 y un 75% del ancho de toda el área, y la segunda lo que quede hasta el 100%. Esto hace que cuando el usuario pulsa dos veces sobre un área próxima al centro del panel de acción, aparezca primero la vista en viñeta número uno, y la segunda cuando avance.

   Para mantener el flujo de la acción, debe aparecer en las vistas en viñetas cierta cantidad de acción solapada.

   Primera vista de viñeta de un escenario de la acción dividida en dos vistas.

   Segunda vista de viñeta de un escenario de la acción dividida en dos vistas.

   
   

   ---

   Pautas sobre texto

   Para libros de formato fijo con imágenes emergentes: Las imágenes deben tener una resolución mínima de 300 ppp y el texto debe ser legible y nítido, sin pixelar ni desdibujarse. Las mayúsculas deben tener una altura de al menos 2 mm en las ventanas emergentes cuando se visualicen en un dispositivo de 7". Como procedimiento recomendado, esto suele implicar un aumento del 150% o superior.

   Para formato fijo con viñetas virtuales: Las imágenes deben tener al menos 300 ppp y el texto debe ser legible y nítido, sin pixelar o desdibujarse cuando se amplía a 2 mm de altura cuando se visualice en un dispositivo de 7".

   Si el libro tiene mucho texto, Amazon sugiere un tratamiento de texto híbrido que mezcle las características de las novelas gráficas con las de los libros infantiles y juveniles. Amazon recomienda limitar el uso de tratamiento de texto híbrido en secciones de texto demasiado anchas para ampliarlas correctamente. El tratamiento de texto híbrido debe imitar el formato del texto al que representa (altura de línea, cursivas, negritas, etc.) y su aspecto general. Esto hace que aumente la calidad de la lectura.

   Para que el contenido sea válido en el futuro, Amazon recomienda utilizar píxeles para el tamaño del texto y la posición de los bloques de texto. Especificar el tamaño de la fuente o la posición del texto en porcentajes puede generar fracciones de píxel que se interpreten de forma distinta en los dispositivos.

   La tipografía mejorada no admite las novelas gráfica con texto híbrido.

   

   Ejemplo de texto HTML híbrido:

   <div id="Title_page-2-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"></div> <div id="Title_page-2-magTarget" class="target-mag" amzn-ke-id-rtbar="amzn-ke-idrtbar"> <div class="target-mag-text" id="amzn-ke-id-rtbar-Title_page-2-magTarget"> <span id="amzn-ke-id-rtbar-Title_page-2-magTarget-2"></span> <span class="" id="amzn-ke-id-rtbar-Title_page-2-magTarget-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ab aquiline regem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum.</span>

   Ejemplo de texto híbrido de CSS:

   div.target-mag div.text{ height: 100%; padding: 5px; background-color: #000000; font-size: 150%; font-family: "Arial"; }

   
   

   ---

   Vista guiada

   La Vista guiada es una serie de mejoras en la experiencia de lectura de cómics electrónicos que está disponible en algunos cómics Kindle. Estas mejoras permiten a los lectores visualizar un cómic viñeta a viñeta, lo cual es idóneo para dispositivos móviles, de modo que se imite el movimiento natural del ojo del usuario sobre el cómic. La Vista guiada crea un movimiento viñeta a viñeta con deslizar el dedo que indica claramente el progreso de la historia en cada página. Entre las funciones de la Vista guiada se incluyen:

   • Una experiencia de lectura guiada viñeta a viñeta que utiliza el orden de viñetas de la configuración del editor
   • Las viñetas se colocan centradas y a pantalla completa
   • Colores de máscara personalizados que rodean cada viñeta al ampliarla.

   
   

   La Vista guiada se aplica automáticamente a cómics Kindle compatibles y utiliza el código existente de la vista de viñeta para posicionar viñetas con precisión en la Vista guiada. Amazon trabaja para que la Vista guiada sea compatible con un mayor número de títulos. Esta se activa automáticamente cuando es compatible con un cómic Kindle.