Internet, le réseau des réseau, a permis d'abolir les frontières physiques de l'échange avec un large public.

Nous ne sommes plus obligé de passer par un éditeur  pour publier un livre ou par un major pour faire écouter sa musique ou ses films. Un simple site web permet de publier du texte, des images, des vidéos, ... ce blog en est d'ailleurs la preuve. On peut même passer par des sites spécialisés pour ses livres, pour sa musique et ses vidéos. N'oubliez juste pas de vérifier que vos données vous appartiennent toujours.

Dans le cas où l'on vise un large public, il faut néanmoins vérifier que celui-ci puissent les utiliser. Outre la barrière de la langue et des handicaps possibles, la technologie peut aussi causer des problèmes techniques.

Les DRM, formats propriétaires et brevets sont voulu par des entreprises pour empêcher le partage et la diffusion des œuvres pour ne réaliser que des ventes histoire de nourrir les artistes et de faire fonctionner le système. Enfin, je doute que ce sois la meilleur solution à en voir les problèmes qui en découlent, le matraquage publicitaire, les DLC et tout ce qui en découle, mais on n'est pas là pour nourrir le troll donc passons.

Dans un guide, j'avais écrit un chapitre sur la publication de récits, que vous pouvez lire ici : HOWTO make a fanfic (mirroir) (Original). Bon, je n'avais pas trop expliqué comment créer une page web rapidement, ce que je vais corriger rapidement ici.

Créer une page web à partir d'un texte

On a la méthode rapide :
<!doctype html><html lang="fr"><head><meta charset="utf-8">
<title>Le titre de votre document</title>
</head><body><pre style="white-space:pre-wrap;font-family:sans-serif;">
votre texte
sur plusieurs lignes
</pre></body></html>
En prenant soin de remplacer "&" par "&amp;" , "<" par "&lt;" et  ">" par "&gt;" dans votre titre et votre texte.
Vous avez une page web HTML5 valide.


Sinon, vous pouvez vous baser sur ce fichier (zip) qui contiens pas mal d'améliorations pour la lecture : Choix de la couleur de fond, largeur de la page, type de police, taille de la police, marque-page en double-cliquant sur un mot.

ATTENTION : Pour la fonction de marque page, la position est enregistrée dans l'adresse de la page (après le #) et vous permet de  reprendre la lecture là où vous vous étiez arrêté dans un long document. Cette fonction n'est malheureusement pas compatible entre les différents navigateurs, leurs calculs internes étant différents, vous devrez reprendre la lecture sur le même navigateur.

Un peu de technique

La première astuce consiste à utiliser la propriété CSS "white-space:pre-wrap" qui indique au navigateur de prendre en compte les retours à la ligne sans avoir besoin des balises HTML spécifiques, et qui permet au texte de revenir à la ligne lorsqu'il atteints le bout de la fenêtre pour éviter d'avoir une barre de défilement horizontale que l'on aurais avec juste la balise <pre>. On change le style de police par défaut.

Un cadre de sélecteurs placé en position "fixed" permet de le laisser visible en permanence dans la page et 7 lignes de javascript Javascript permettent de changer le style de celle-ci, rien de bien compliqué.

La gestion des marque pages utilise 2 fonctions : "sauvegarder_marque_page" et "charger_marque_page".
Elles sont assez techniques mais pas très compliquées à comprendre, la fonction de sauvegarde :
  • Pour marquer la page, la fonction découpe le document en "bouts de texte"
  • On récupère le numéro du "bout de texte" et la position du caractère
  • On enregistre ces 2 numéros dans l'URL
La fonction de chargement, elle :
  • Récupère les 2 numéros dans l'URL
  • découpe le document en "bouts de texte"
  • place un marqueur de position au bon emplacement
  • fait défiler le navigateur à la bonne position
  • restaure le texte d'origine afin de supprimer le marqueur

Le code n'est pas encore parfait et a du mal avec les mises en page complexes, vu que lors du chargement de texte, je ne charge que du texte brut. Je mettrai l'article à jour si nécessaire.

Pour ceux que ça intéresse, la page web du guide HOWTO make a fanfic (mirroir) (Original) est composé d'une seule page web. Vous pouvez consulter le code source pour voir comment sont géré l'affichage des chapitres,  l'inclusion des images et la gestion de l'impression du document.