WebComic

Organisation one-shot

Démonstration

Le webcomic est constitué d'un seul numéro placé dans un dossier « one-shot » :

{
    "config": {
        "title": "One-shot webcomic",
        "basepath": "one-shot",
        "size": 6
    }
}

Organisation par numéro (issues)

Démonstration

{
    "config": {
        "title": "Multiple issues Webcomic",
        "defaultSize": 6,
        "basepath": "./issues/"
    },
    "issues": [{
        "title": "Issue 1"
    }, {
        "title": "Issue 2"
    }]
}

Quelques nouveautés ici :

• Nous avons placer les ressources images dans un répertoire issues, renseignée grâce à la configuration basepath.
• Les ressources de chaque numéro sont ensuite stockées dans un répértoire avec un nom à trois chiffres (001, 002, 003, etc.). Cette numérotation peut être personnalisée grâce à la configuration numFormat.

Organisation par histoires (stories)

Démonstration : Webcomic organisé par histoires

{
    "config": {
        "title": "Webcomic with stories",
        "defaultSize": 6,
        "basepath": "./stories/"
    },
    "stories": [{
        "title": "Story 1",
        "issues": [{
            "title": "Story 1, Issue 1"
        }, {
            "title": "Story 1, Issue 2"
        }]
    }, {
        "title": "Story 2",
        "issues": [{
            "title": "Story 2, Issue 1"
        }, {
            "title": "Story 2, Issue 2"
        }]
    }]
}

Format des pages

A écrire...

Pile d'images dans un fichier svg

Un fichier svg correspond à une page de l'histoire, un moment de la narration. On souhaite parfois montrer plusieurs vues différentes d'une même scène sans pour autant rajouter des pages puisqu'il s'agit du même moment. Les piles d'images sont là pour permettre cela : empiler plusieurs vues (images) d'une même scène dans un seul fichier svg (page). La navigation entre ces images s'ajoutera à celle des pages.

demo

Ajouter des mots-clés

Vous avez la possibilité de définir une liste de types de mots-clés puis de marquer chaque numéro du webcomic. Les listes seront ensuite affichées dans la page d'accueil et le lecteur pourra filtrer les numéros par mot-clé. Il pourra aussi les classer par importance (occurence d'utilisation).

Dans l'exemple qui suit, nous définissons deux types de mots-clés, « characters » et « places », puis nous marquons chaque numéro en précisant les personnages présents et le lieux de l'action :

{
    "config": {
        "title": "Demo with keywords",
        "defaultSize": 6,
        "basepath": "./issues/",
        "keyword_names": ["characters", "places"]
    },
    "issues": [{
        "title": "Issue 1",
        "characters": ["Batman", "Superman"],
        "places": ["Gotham", "Metropolis"]
    }, {
        "title": "Issue 2",
        "characters": ["Superman", "Wonder Woman"],
        "places": ["Metropolis", "Themyscira"]
    }]
}

Démonstration

Configuration générale

    /**
     * Base du chemin pour récupérer les ressources images. 
     * Répertoire courant par défaut.
     */
    basepath = '';
    
    /**
     * Display close button.
     */
    close_button = true;
    
    /**
     * Texte affiché sur la dernière page d'un numéro s'il n'est pas le dernier.
     */
    continue_label = 'To be continued';
    
    /**
     * Affichage d'une [corner box](https://www.cbr.com/comic-book-corner-box-marvel-dc/)
     * sur les couvertures des numéros. L'image ``cornerbox.png`` doit être placé à la 
     * racine (``basepath``)
     */
    cornerbox = true;

    /**
     * Liste de nom d'images png (sans l'extenion) pouvant servir de cornerBox. 
     * Toutes ces images doivent être placées à la racine (``basepath``).
     * 
     * @type {string[]}
     */
    cornerboxes = [];

    /**
     * Si le défilement entre les images servant dans le cornerbox doit 
     * s'effectuer de manière aléatoire. Si ce n'est pas le cas, le 
     * défilement se fait dans l'ordre de déclaration des images.
     */
    cornerboxes_randomize = false;
    
    /**
     * Nombre de pages par défaut d'un numéro
     */
    default_size = 10;
    
    /**
     * Texte affiché sur la dernière page du dernier numéro.
     */
    end_label = 'End';
    
    /**
     * Identifiant du WebComic. S'il n'est pas fournit; un identifiant 
     * automatique est assigné.
     *
     * @type {string}
     */
    id = null;

    /**
     * Manage keywords
     */
    keywords = true;
    
    /**
     * Liste des noms de données pouvant servir de mots-clés.
     * 
     * @type {string[]}
     */
    keyword_names = [];

    keywords_thumbnail = false;

    /**
     * Action de la navigation avec la molette de la souris
     */
    wheel_navigation = true;

    /**
     * Activation de la navigation au clavier
     */
    keyboard_navigation = true;

    /**
     * Format de la numérotation des numéros ou des histoires.
     * 
     * Par défaut; la numérotation se fait sur 3 chiffres: "001", "002", etc.
     */
    num_format = 3;

    /**
     * Format de la numérotation des numéros quand le contenu est organisé sous 
     * forme d'histoire.
     * 
     * Par défaut; cette numérotation se fait sur 2 chiffres: "01", "02", etc.
     */
    subnum_format = 2;

    /**
     * Élément HTML qui portera WebComic. Insérer dans le body du document par défaut.
     * 
     * Si la propriété est définit comme chaîne de caractère; ce doit être
     * l'identifiant d'un élément présent dans la page.
     * 
     * @type {string | HTMLElement}
     */
    parent = null;

    /**
     * Webcomic page ratio
     */
    ratio = 16/9;

    /**
     * Date du début de publication du WebComic.
     * 
     * La propriété est utile uniquement pour générer automatiquement des dates 
     * de publication pour chaque numéro;en association avec la propriété 'period'.
     * 
     * Si une chaîne de caractère est fournit; elle doit être au format ISO8601
     * (ex: "2021-05-29")
     * 
     * @type {string | Date}
     */
    start_date = null;

    /**
     * Rythme de publication des numéros.
     * 
     * La propriété n'est utile que si les numéros n'ont pas de date et que la
     * propriété 'start_date' est définie. Les valeurs possibles sont :
     * 'daily', 'weekly', 'biweekly', 'monthly', 'bimonthly'.
     */
    period = 'weekly';

    /**
     * Optional size (single issues)
     */
    size = 10;

    /**
     * Nom de l'image servant de miniature pour un numéro.
     */
    thumbname = 'thumb.png';

    /**
     * Titre du webcomic; affiché sur la couverture de chaque numéro.
     * 
     * Il est facultatif comme toutes les autres propriétés mais il serait 
     * évidemment maladroit de ne pas le définir.
     */
    title = 'Webcomic';

Configuration d'un numéro (issue)

Configuration d'une histoire (Story)

A écrire...

Créer un lien vers une page donnée

#<issue.id>_<page>