¿Está visualizando el artículo correcto?

Este artículo hace referencia a Digital Publishing Suite. En el caso de los artículos de AEM Mobile, consulte Creación de artículos HTML para AEM Mobile.

Puede importar artículos basados en HTML en una publicación para que se puedan mostrar en el visor como un artículo. Una ventaja de los artículos HTML es que tienen un tamaño mucho menor y, por tanto, más adecuado para publicaciones semanales y artículos sencillos con mucho texto. Los artículos HTML también pueden incluir interactividad no disponible en el panel Folio Overlays.

Tutorial en vídeo

Tutorial en vídeo
<a href="http://tv.adobe.com/watch/learn-digital-publishing-suite/loading-html-articles/">Carga de artículos HTML (en inglés)</a>
Colin Fleming

Para obtener más información sobre el uso de Adobe Edge para crear HTML para DPS, consulte el artículo de Raghu Thricovil Mejora de las publicaciones de DPS con animaciones HTML mediante Adobe Edge (en inglés).

  1. Cree una carpeta que contenga archivos HTML.

    Asegúrese de que incluye solo los activos que está utilizando en la carpeta. Se actualizan todos los activos de la carpeta, incluso si no se utilizan.

  2. Si va a importar el artículo HTML a una carpeta con una sola orientación, añada un sufijo _h o _v al archivo .html, como, por ejemplo, en “index_h.html”.

    Si no se añade ningún sufijo, es posible que el artículo se importe como un artículo con orientación dual. Si intenta obtener una vista previa o publicar una publicación de una sola orientación, se mostrará un mensaje de error.

  3. En el panel Folio Builder, abra la publicación en la que se incluirá el artículo HTML.

  4. En la vista de artículos del panel Folio Builder, elija Importar artículo en el menú del panel.

  5. Elija la opción “Importar un único artículo”, haga clic en el icono de la carpeta Ubicación y, a continuación, especifique la carpeta HTML.

    Asimismo, puede importar artículos HTML mediante la opción “Importar varios artículos” (consulte Estructuración de carpetas para la importación de artículos) o mediante la opción “Importar con el archivo sidecar.xml” (consulte Importación de artículos utilizando archivos sidecar.xml basados en rutas de acceso).

  6. Especifique opciones de configuración adicionales como Desplazamiento suave, y haga clic en OK.

Si va a editar archivos HTML, seleccione el artículo HTML en el panel Folio Builder y seleccione Actualizar.

Requisitos de artículos HTML

  • Puede crear un solo archivo HTML que se pueda utilizar tanto con la orientación horizontal como vertical, o bien puede crear distintos archivos HTML para las dos orientaciones. Si desea utilizar varios archivos HTML para las orientaciones vertical y horizontal, añada los sufijos _v y _h al final de los nombres de archivos HTML, como “index_h.html”. Si va a crear una publicación con una sola orientación, solo necesita un archivo HTML. Incluya los sufijos _h o _v para el archivo HTML en una publicación de una sola orientación.

  • Actualmente, no se admiten los archivos con HTML dinámico (DHTML).

  • En el caso de la estructura de archivos, un método consiste en colocar todos los gráficos y secuencias de comandos asociados del archivo HTML en las carpetas de los distintos artículos. Otra opción consiste en colocar los gráficos y las secuencias de comandos asociados para toda la publicación en un archivo HTMLResources.zip. El archivo HTMLResources.zip debe importarse a la publicación desde el panel Folio Builder o desde Folio Producer en la Web. Consulte Importación de la carpeta HTMLResources.


    Ejemplo de una carpeta HTMLResources

  • Asegúrese de utilizar rutas de acceso relativas en el código HTML. Si está creando un vínculo a una imagen del mismo nivel que el archivo HTML, utilice este método:

    <img src="ImagenGlobal.jpg"/>

    Si está creando un vínculo a una imagen de la carpeta HTMLResources, utilice este método:

    <img src="../HTMLResources/GlobalImage.jpg"/>

Para obtener información sobre la creación de hipervínculos a artículos HTML y desde estos, consulte Creación de hipervínculos navto para artículos HTML.

Creación de artículos HTML para visores Android

Para obtener ayuda para la creación de artículos HTML para visores Android, consulte Cómo crear artículos HTML para visores Android (en inglés).

Recursos HTML5

Permitir que los vídeos en artículos HTML se comporten como superposiciones de vídeo de pantalla completa

Al crear un artículo HTML de una sola orientación con vínculos de vídeo, es posible que el vídeo rote si se rota el dispositivo. Además, cuando termina la reproducción del vídeo, el navegador integrado que reproduce el vídeo se puede descartar. Para activar este comportamiento, use el prefijo “videofile://” en el vínculo del vídeo HTML. Esta opción solo está disponible para aplicaciones de iOS.

Nota:

Para obtener ejemplos de comportamiento de vídeo, consulte el número Ejemplos HTML de la aplicación gratuita DPS Tips (disponible solo en inglés).

Comportamiento de vídeo estándar

Con este ejemplo, el vídeo se reproduce en un navegador integrado y no rota en una publicación de una sola orientación.<a href="Links/video.mp4">Ver vídeo</a>

o bien<a href="../HTMLResources/videos/video.mp4">Ver vídeo</a>

Comportamiento de vídeo mejorado

Con este ejemplo, el vídeo rota correctamente en una publicación de una sola orientación y vuelve al artículo cuando termina el vídeo.<a href="videfile://Links/video.mp4">Ver vídeo</a>

o bien<a href="videofile://../HTMLResources/videos/video.mp4">Ver vídeo</a>

JavaScript

También puede activar este comportamiento con JavaScript, mediante la función playFullscreenVideo en el objeto de ventana.<a onclick="window.playFullscreenVideo('Links/video.mp4');">Ver vídeo</a>

o bien<a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">Ver vídeo</a>

Flujo de vídeo

Este ejemplo reproduce un flujo de vídeo.<a href="videohttp://www.mysite.com/video.mp4">Ver vídeo</a>

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea