Cómo actualizar iconos de la tabla de contenidos de tu documentación HTML

Crear la documentación más completa, exhaustiva y actualizada es la prioridad número uno de cualquier escritor técnico. Pero los lectores esperan un diseño limpio y moderno y las compañías a veces necesitan integrar páginas web de documentación con su material existente, por lo que se imita un aspecto y una dinámica predefinidos. Por suerte, la herramienta de creación de documentación de ayuda HelpNDoc te permite añadir con rapidez un logotipo o un código CSS personalizado para una rápida personalización, o incluso crear una plantilla completamente nueva para personalizar por completo los entregables de tus proyectos. En este artículo veremos cómo puedes usar iconos personalizados en la tabla de contenidos de la documentación HTML generada.

Crear una nueva plantilla

La documentación producida con HelpNDoc se basa en plantillas, donde puedes personalizar por completo el modo en que se genera tu documentación. Primero crearemos una nueva plantilla HTML y luego personalizaremos sus iconos.

Para poder crear una nueva plantilla HTML, usaremos el editor de plantillas integrado de HelpNDoc:

• En la cinta “Herramientas” de HelpNDoc, haz clic en “Editor de plantillas”
• En la parte superior del cuadro de diálogo “Editar plantilla”, haz clic en el botón “+”
• Haz clic en “Crear plantilla HTML”
• Introduce un nombre de plantilla, como “Plantilla HTML con iconos personalizados”
• Haz clic en “OK”

Ya se ha creado tu nueva plantilla: es completamente funcional, porque es una copia exacta de la plantilla HTML predeterminada de HelpNDoc.

Personalizar iconos de tabla de contenidos

La plantilla HTML predeterminada usa un archivo PNG por tipo de icono. Sencillamente reemplazaremos los iconos que queramos personalizar con un nuevo archivo PNG con el mismo nombre.

Los iconos de la tabla de contenidos se guardan como assets usados por el código de la plantilla personalizada. Vamos a localizarlos en el editor de temas:

• En la parte izquierda del cuadro de diálogo “Editar plantilla”, haz clic en “Assets”: la jerarquía de assets se mostrará a la derecha
• Navega hasta la carpeta de iconos assets/vendors/helpndoc-5/icons: todos los iconos están guardados en esa carpeta

Consejo: Para navegar hasta e inspeccionar la carpeta de plantillas usando Windows Explorer, haz clic en el botón “Abrir ubicación de plantilla” en el editor de plantillas de HelpNDoc.

Digamos que quieres reemplazar el icono de tema “interrogación” predeterminado. Su nombre de archivo es 8.png:

• Localiza y selecciona el archivo llamado 8.png en el directorio assets/vendors/helpndoc-5/icons
• Haz clic en el botón “Eliminar” en la barra de herramientas y confirma
• Haz clic en el botón “Importar”
• Elige el nuevo icono en tu disco duro y haz clic en “Abrir”. Nota: los iconos deben tener un tamaño de 16x16 píxels para que se vean bien en la documentación final
• Si es necesario, renombra el archivo recién importado como 8.png usando el botón “Renombrar” y pásalo a la carpeta correcta: assets/vendors/helpndoc-5/icons
• Haz clic en “Guardar” para guardar los cambios en la plantilla

Tu nueva plantilla ya está lista y puede ser usada en cualquiera de tus proyectos de documentación: utilizará tu icono personalizado como un icono de tema.

Usa la plantilla en tus proyectos de documentación

Ahora que has creado y personalizado la plantilla HTML, se puede usar para crear proyectos de documentación. Veamos cómo hacerlo.

Una vez abierto tu proyecto de documentación en HelpNDoc, en la pestaña “Inicio”, haz clic en la parte superior del botón “Generar ayuda” para acceder al cuadro de diálogo “Generar documentación”.
Selecciona la disposición HTML en la “Lista de disposiciones” de la izquierda y luego haz clic en el enlace “Plantilla HTML predeterminada” que hay a la derecha para elegir la plantilla recién creada.
¡Y ya está! Solo tienes que volver a generar la documentación y se usará automáticamente el grupo de iconos personalizados.

Gracias al potente sistema de plantillas de HelpNDoc, se puede personalizar casi cualquier parte de los proyectos de documentación generados. En este artículo, hemos creado una plantilla nueva para personalizar iconos en la tabla de contenido. Esta es solo una pequeña muestra de las capacidades de las plantillas de HelpNDoc. Puedes inspeccionar una de las plantillas integradas en HelpNDoc (Plantilla HTML de una página, plantilla para iPhone, plantilla kQuery móvil…) para ver algunos ejemplos adicionales. También encontrarás más información sobre plantillas en la documentación, o en diversos artículos en esta página web.
HelpNDoc es gratuito para uso personal y de evaluación. No dudes en probarlo durante todo el tiempo que necesites y, como siempre, ¡disfruta creando documentación!.

Ver también...

El arma secreta de los escritores técnicos: las ventajas únicas de usar el Analizador de caracteres de HelpNDoc

HelpNDoc lleva tiempo siendo la solución perfecta para los profesionales que quieren crear documentación fácil de usar, interesante y de alta calidad. Sin embargo, no son solo su interfaz fácil de …

Lee Mas →

Aprovechar HelpNDoc al máximo: Beneficios de la función "Mantener Archivos Temporales" para los escritores técnicos

Al trabajar creando documentación técnica, toda herramienta y función de la que dispongamos puede marcar una diferencia considerable en la productividad y la eficacia. En HelpNDoc, una de estas …

Lee Mas →

Revitaliza tus archivos de ayuda: convierte archivos antiguos WinHelp HLP en documentación moderna con HelpNDoc

En una época en la que la información se consume en una enorme variedad de dispositivos y plataformas, los archivos clásicos WinHelp HLP (que en su momento fueron la documentación de ayuda estándar …

Lee Mas →

Dominar la publicación multicanal: Por qué HelpNDoc es mucho mejor que WordPress

En el mundo digital interconectado de hoy en día, el concepto de publicación multicanal se ha hecho más esencial que nunca. Al buscar el público información a través de diversas plataformas y …

Lee Mas →