WebComic

Petite application web qui permet de publier un webcomic dont les pages sont constituées par des images svgs, les fichiers svg servant essentiellement à la pagination et à combiner le dessin et le texte.

Présentation et principe

L'idée est venu de la manière dont David Revoy difffuse les planches de son webcomic Pepper & Carrot quand il s'agit de traduire les textes : des fichiers svg pour écrire le dit texte avec l'image png de la planche en fond. J'ai trouvé cela judicieux et j'ai essayé d'écrire une application web permettant de publier un webcomic organisé de cette manière.

  • Les numéros du webcomic sont placés dans des dossiers numérotés sauf dans le cas d'un numéro unique.
  • Les images png constituant le webcomic sont placées dans un dossier "shots" dans chaque numéro.
  • Les images svgs (les planches) constituant le webcomic sont placées dans un dossier "svgs" dans chaque numéro.

Organisation one-shot

Webcomic simple

Le webcomic est constitué d'un seul numéro.

css/
    WebComic.css
js/
    WebComic.js
shots/
    ...
svgs/
    ...
cover.png
thumb.png
index.html
index.json 
Organisation des fichiers
{
    "title": "My webcomic",
    "size": 30
}
index.json
import { webcomic } from './js/WebComic.js';
webcomic().then((instance) => {
    // Do something when it is ready
}).catch((err) => {
    console.warn(err);
});
Initialisation.

organisation par numéro

issues/
    001/
        shots/
            ...
        svgs/
            ...
        cover.png
        thumb.png
    002/
        shots/
            ...
        svgs/
            ...
        cover.png
        thumb.png
    index.json 
css/
    WebComic.css
js/
    WebComic.js
index.html
Organisation des fichiers par numéros
{
    "title": "My webcomic",
    "issues": [
        {
            "title": "Issue 1",
            "size": 20
        },{
            "title": "Issue 2",
            "size": 20
        }
    ]
}
index.json
import { webcomic } from './js/WebComic.js';
webcomic({
    basepath: './issues/'
}).then((instance) => {
    // Do something when it is ready
}).catch((err) => {
    console.warn(err);
});
Initialisation.

Organisation par histoires

stories/
    001/
        001/
            shots/
                ...
            svgs/
                ...
            cover.png
            thumb.png
        002/
            shots/
                ...
            svgs/
                ...
            cover.png
            thumb.png
    002/
        001/
            shots/
                ...
            svgs/
                ...
            cover.png
            thumb.png
        002/
            shots/
                ...
            svgs/
                ...
            cover.png
            thumb.png
    index.json 
css/
    WebComic.css
js/
    WebComic.js
index.html
Organisation des fichiers par histoires
{
    "title": "My webcomic",
    "stories": [
        {
            "title": "Story One",
            "issues": [
                {
                    "title": "Story One - Issue 1",
                    "size": 20
                },{
                    "title": "Story One - Issue 2",
                    "size": 20
                }                
            ]
        },{
            "title": "Story Two",
            "issues": [
                {
                    "title": "Story Two - Issue 1",
                    "size": 20
                },{
                    "title": "Story Two - Issue 2",
                    "size": 20
                }                
            ]
        }
    ]
}
index.json
import { webcomic } from './js/WebComic.js';
webcomic({
    basepath: './stories/'
}).then((instance) => {
    // Do something when it is ready
}).catch((err) => {
    console.warn(err);
});
Initialisation.

Configuration

A écrire...

Ressources et références

A écrire...

Historique

2019-03-02
  • fix Taille si hauteur insuffisante.
  • add Variables css pour les polices.
2019-02-23
  • fix Gestion des marges.
2019-02-16
  • fix Définition de l'image cornerbox.
  • fix Définition du dossier racine des bédés.
2018-12-20
  • upd première version publiable.
2016-08-31
  • add Première version plus ou moins fonctionnelle.