Bac à Sable

On the web again…

2019-05-28T09:00:20+00:00

Deux ans de silence

Le précédent “post” sur ce blog / site date maintenant de près de deux ans… 21 septembre 2017 pour être précis.
Entretemps,une fin de vie professionnelle assez chaotique. Un début de retraite plutôt ramollo. Et surtout, une grosse remise en question de mes différentes activités, avec un regard plus que critique sur la qualité, entre autre, de mes photos.

D’où un silence prolongé ici et un retrait total des différents forums où je sévissais. Le coup de blues, rien de bien original.

Un redémarrage modeste

J’ai définitivement renoncé à jouer dans la cour des grands. Et me satisfais aujourd’hui d’images moyennes, mais qui me font plaisir. Avec quelques regrets néanmoins du temps passé à tourner en rond pour lever certaines de mes difficultés techniques, en photo ou en informatique.
Des regrets aussi de certains achats de matériel, qui se sont avérés fort discutables…

Il me reste juste une envie de partager, sans vouloir donner de leçons ou de cours à quiconque, mes petites découvertes et mes divers errements. Quelques enthousiasmes ou quelques agacements. Et si ça peut servir à quelqu’un ou en amuser un autre…

Évolutions

Évidemment, depuis 2017, nombre de changements dans les façons de faire, logiciels et matériels utillisés. Avec pas mal de satisfaction dans le cas des softs. On se reparle de tout ça dans un prochain billet…

WebSlides.js, revisité

2017-09-21T13:00:20+00:00

Si vous êtes adepte de Powerpoint ou apparenté, vous utilisez probablement l’apparition d’éléments successifs sur la même diapo. Lignes de texte, portions de graphiques… Pour produire ces effets, il manque à WebSlides.js une possibilité d’animation à l’intérieur d’une section.

Merci, Tatsuya Iwamatsu

L’auteur original de Webslides.js ne semblant pas désireux d’ajouter cette fonctionnalité dans l’immédiat, un autre développeur, Tatsuya Iwamatsu, propose sur Github une extension à Webslides. Nommée WebSlidesAnimation, cette extension permet d’ajouter, à l’intérieur d’une section (diapositive), des effets d’animation par apparition/disparition ou mouvement des objets. Un peu de Javascript, un peu de CSS : WebslideAnimation est facile à mettre en œuvre et bien efficace.

Pour vous en convaincre, j’ai modifié ma démonstration de Webslides.js en intégrant l’extension WebslidesAnimation. J’en est profité pour mettre à jour Webslides.js, qui en est maintenant à sa version 1.50.

Intégrer WebSlidesAnimation

La documentation de WebslidesAnimation est relativement claire et explicite. Pour résumer, il faut rajouter quelques lignes au code HTML de votre page, charger un fichier .css et un script .js. Vous pouvez télécharger l’ensemble du code de mon exemple depuis le dépôt Github correspondant :

La feuille de style

Je ne modifie pas la feuille de style de Websildes, mais rajoute une nouvelle feuille, custom.css, dans laquelle je fais mes surcharges et mes ajouts. Ceci m’évite bien des pertes de temps au moment des mises à jour assez fréquentes de Webslides.

Voici ci-dessous le contenu actuel de ma feuille de style :

.animate-show {
    display: none !important;
  }
  .animate-show.animated {
    display: inherit !important;
  }
  
  .animate-show-visibility {
    opacity: 0 !important;
    visibility: hidden;
  }
  .animate-show-visibility.animated {
    opacity: 1 !important;
    visibility: visible;
  }
  
  .animate-hide {
    display: inherit !important;
  }
  .animate-hide.animated {
    display: none !important;
  }
  
  .animate-hide-visibility {
    opacity: 1 !important;
  }
  .animate-hide-visibility.animated {
    opacity: 0 !important;
  }

Le fichier index.html

Chargement des feuilles de style :

   <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
   <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
   <link rel="stylesheet" type='text/css' media='all' href="static/css/custom.css">

Puis modification de la section 6, une photo plein écran avec une légende apparaissant au dessus après utilisation de la roulette de la souris ou de la touche [Flèche vers le bas] du clavier. Notez les deux lignes comprenant data. La première indique le nombre total d’étapes d’animation dans la section : data-step-count=1 La seconde indique quel élément de la page doit apparaître : animate-show" data-step=1.

<section>
  <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
    <span data-step-count=1></span>
    <span class="background" style="background-image:url('static/images/ayers_rock.jpg')"></span>
    <div class="wrap">
      <div class="content-left bg-trans-dark fadeInUp animate-show" data-step=1>
        <h2><strong>Projet Ornithorynque</strong></h2>
        <p>Découvrez ici les travaux des élèves de CP de la classe de Madame Marckert ... après les congés d'été.</p>
      </div>
    </div> 
</section>

Et enfin, chargement du nouveau script .js, en fin de fichier HTML évidemment.

    <script src="static/js/webslides.js"></script>
    <script src="static/js/webslides-animation.js"></script>
    <script defer src="static/js/svg-icons.js"></script>
    <script type='text/javascript' src='https://cdn.knightlab.com/libs/soundcite/latest/js/soundcite.min.js'></script>
    <script>
      window.ws = new WebSlides();
      new WebSlidesAnimation(window.ws);
    </script>
  </body>
</html>

Et voilà, rien de bien compliqué. Il me reste à espérer que vous trouverez beaucoup de plaisir et/ou d’utilité à utiliser ce Webslides.js enrichi.

WebSlides, un outil de storytelling

2017-07-07T13:00:20+00:00

Ma fille me demande : “Aurais-tu une solution sympa pour mettre en ligne les dessins de mes élèves… un projet artistique sur les ornithorynques ?” Et c’est en cherchant comment faire que j’ai trouvé WebSlides au détour de GitHub…

Vu sur le Web

Vous avez certainement vu, dans les journaux en ligne, par exemple, de ces articles un peu longs qui intègrent de grandes images, des vidéos en pleine page et des textes fouillés, dans une présentation inspirée des sites “One pager” ? Attention, je ne vise pas ici à recréer les grosses machines que vous trouverez sur Arte : superbes, spectulaires mais qui demandent des moyens financiers, techniques, humains… qui ne sont pas à la portée du premier venu. Et dépassent largement mes possibilités.

Je ne m’arrêterai pas non plus aux nombreuses réalisations de Réseau Canopé, comme la série Raconte ta ville. Il s’agit là de webdocumentaires réalisés par des classes avec la solution Klynt. Klynt est un outil superbe, très utilisé par les grands médias, et suffisament facile à prendre en main pour travailler avec des élèves. Il a néanmoins l’inconvénient d’un prix non négligeable…

Ce que je recherche, c’est une présentation simple et gratuite, pour mettre en ligne une ou deux interviews de façon plaisante et efficace. Ou un conte illustré. Sans tomber dans ces présentations de site à l’ancienne, avec une malheureuse vidéo en petit format qui se bat en duel avec trois bouts de texte. Quand ce n’est pas avec des bannières de pub, toutes choses que je supporte de plus en plus difficilement.

Il y a quelques années, pour réaliser un roman-photo en ligne avec des élèves de lycée, j’avais découvert JDocumentary. Malheureusement, cet outil n’est plus maintenu par son auteur et utilise des technologies obsolètes, comme le plugin Flash.

WebSlides, un framework de présentation

D’où ma satifaction d’avoir découvert WebSlides. Cet outil libre, disponible sur Github, vous permettra de réaliser sans grande difficulté des présentations /sites /récits superbes. Faites directement un tour du côté des démos pour en voir tous le potentiel… J’ai été impressionné par la qualité des résultats.

Évidemment, ce n’est pas vraiment un outil destiné à Madame Michu… Il s’agit d’un framework CSS + Javascript et il nous faudra coder notre récit à la main. Utilisez pour ce faire un IDE light, comme Sublime Text, Atom ou Visual Code Studio.

J’apprécie beaucoup le compromis entre les nombreuses possibilités offertes d’une part, et la cohérence des présentations graphiques plutôt simplifiées, d’autre part. L’auteur a su faire des choix très efficaces.
Vous pourrez faire défiler vos récits, au choix, horizontalement ou verticalement, par clic, scroll de la souris, touches Fléches ou Espace du clavier. WebSlides fait la part belle aux éléments graphiques de grand format, comme des vidéos ou des photos plein écran.
Notez l’apparition des éléments de navigation au survol par la souris du haut ou du bas de page.

Deux ou trois petites choses me gênent toutefois avec Webslides, malgré ses indéniables qualités. D’abord la présentation du code sous forme d’un interminable fichier HTML. J’aimerais bien quelque chose de plus modulaire, avec un fichier par section/page par exemple. Chacun des écrans correspond dans le code à une balise <section> ... </section>. Voyez l’exemple ci-dessous, présentant une page avec une photo couvrant toute la partie gauche de l’écran et le texte correspondant sur la droite :

<section class="fullscreen bg-apple text-apple text-context">   <!-- slide 06 -->
    <div class="card-50">      
      <div class="flex-content">
        <h2>À suivre !</h2>
        <p>Le site <em>Platypus</em> est un chantier en cours.</p>
        <p class="text-intro">Retenez bien notre adresse, notez-là dans vos favoris et ne manquez pas d'y revenir au mois de septembre.</p>
        <h3 class="anime zoomIn">https://www.bac-a-sable.eu/platypus</h3>
      </div>
      <!-- end .flex-content-->
      <figure>
        <img src="static/images/bushwalking.jpg" alt="Áqaba, Jordan">
        <figcaption>
          <a href="https://unsplash.com/@dburka" title="Daniel Burka">
            <svg class="fa-camera">
              <use xlink:href="#fa-camera"></use>
            </svg>
            Daniel Burka (Unsplash)
          </a>
        </figcaption>
      </figure>
    </div>
    <!-- end .card-50-->
</section>

Il me manque aussi la possibilité de faire apparaître un texte / un élément de page seulement au bout d’un temps donné ou après un clic de souris / un appui sur la touche Espace. Pour avoir le temps d’admirer en détail une photo plein écran, avant d’en découvrir la légende.

Et enfin la documentation est remplacée par les nombreux fichiers de démo. Mais trouver dans les fichiers d’exemple (interminables, comme dit plus haut) une syntaxe précise est un peu galère.

Parmi les points positifs, le projet, disponible sur Github, est régulièrement maintenant et amélioré. Et son auteur, José Luis Antúnez répond rapidement aux éventuelles questions posées.

De mon côté, je travaille à la mise en place d’un thème Jekyll basé sur WebSlides, afin de rendre la création des présentation un peu plus efficace. Au cas où les ornithorynques se présenteraient en troupeaux. Je vous en reparlerais ici, pour autant que le résultat soit satisfaisant.

WebSlides, pour quoi faire ?

Je compte bien utiliser cet outil de façon quasi systématique pour des récits longs. Un peu en concurrence avec Twine, quand il n’y a pas besoin d’interactivité. Idem pour la présentation de portfolios photo, où WebSlides remplacera efficacement les galeries classiques. WebSlides fera également merveille pour des reportages et des interviews mêlant photos, vidéo et fichiers sonores.

Je mettrais à contribution pour ces reportages SoundCite. Cet outil fourni par Knight Lab, comme le TimeLine.js bien connu, permet d’insérer un fichier son directement et harmonieusement dans votre texte de présentation, sans le très agaçant bouton Cliquez pour écouter. SoundCite se marie vraiment très bien avec WebSlides.

Prenez le temps de découvrir WebSlides et ne manquez pas de me faire part de vos impressions en commentaires…

Des macros pour Sugarcube

2017-06-15T13:00:20+00:00

Sous le pseudonyme de Chapel, un contributeur vient d’annoncer sur le forum Twine la mise à disposition d’un dépôt Github intitulé Custom Macros for Sugarcube 2. Il y propose des scripts permettant d’enrichir vos propres histoires de quelques fonctionnalités intéressantes.

L’ensemble est destiné à Sugarcube 2 et se présente sous forme de fichiers .js. Les exemples sont à copier dans la fenêtre *Modifier le Javascript de l’histoire” de Twine. Quelques outils inttéressants sont proposés à ce jour, et la liste devrait s’allonger.

Système simple d’inventaire
Système de cycles : jour et nuit, saisons, tours de jeux…
Compteur de temps : décompte et affiche le temps de jeu d’un joueur
et quelques macros mineures…

Notons que l’auteur a assorti cette ressource d’une documentation complète.

P.S. Allez faire un tour dans la partie Aventures de ce blog, vous y trouverez aussi pas mal de snippets à grappiller.

Mon choix de thèmes pour Jekyll

2017-06-08T14:37:58+00:00

Ceci n’est pas une recension exhaustive, critique… des thèmes disponibles. Juste une liste de ceux que j’ai repérés et qui, pour des raisons diverses, ont su me séduire. Ils intègrent des fonctionnalités usuelles sur un site moderne : design responsive, barre de navigation fixe, menu hamburger… Certains sont pourvus d’une documentation très complète pour aider à les personnaliser. Nombre d’entre eux sont des portages sous Jekyll de thèmes pré-exitants.

Les thèmes officiels

Trois thèmes distribués avec Jekyll ou directement proposés par l’équipe des auteurs. Une référence pour un codage propre des thèmes, à étudier pour apprendre à personnaliser vos sites.

Minima: Démonstration du thème; Dépôt Github; Auteurs : Joel Glovier, Ben Balter, Parker Moore et d’autres; Minima est le thème par défaut installé d’origine avec toute nouvelle instance de Jekyll. Simple mais efficace, une référence.
Swiss: Démonstration du thème; Dépôt Github; Auteur : Diana Mounter; Swiss est un thème typographique, aux titres énormes, inspiré par le design …suisse. Très élégant dans sa simplicité.
Athena: Démonstration du thème; Dépôt Github; Auteur : Diana Mounter; Encore une création très épurée de Diana Mounter. Convient parfaitement à un blog très textuel, par exemple.

Les thèmes One Page

Une présentation moderne de votre site : au lieu de parcourir diverses pages, tout le contenu se concentre sur une unique page divisée en plusieurs sections, vers lesquelles le visteur va glisser successivement. Cette structure ne convient pas vraiment à des sites très complexes. Elle est parfaitement adaptée à la présentation d’un projet, d’une association ou d’une petite entreprise.

Single Paged: Démonstration du thème; Dépôt Github; Auteur : Tim O’Brien
Agency: Démonstration du thème; Dépôt Github; Auteur : Rick K.
Hyperspace: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich
Grayscale: Démonstration du thème; Téléchargement; Auteur : David Miller

Solid State: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich
Urban: Démonstration du thème; Dépôt Github; Auteur : CloudCannon; CloudCannon est un hébergeur dédié aux générateurs de site statique, qui fournit des services étendus par rapport à Github.

Les thèmes À la Pinterest

Comme sur le réseau social bien connu, des billets, sous forme de cartes illustrées, viennent s’additionner à l’infini. Ce type de thème convient très bien à des sites dont le contenu ne sera rédigé qu’au fur-et-à-mesure. Comme un blog, par exemple.

Gridster: Démonstration du thème; Dépôt Github; Auteur : Digital Mind
Mister Brown: Démonstration du thème; Dépôt Github; Auteur : Artem Sheludko
Webdja Karna: Démonstration du thème; Dépôt Github; Auteur : Sharath Kumar
Airspace: Démonstration du thème; Dépôt Github; Auteur : ThemeFisher / Adaptation à Jekyll : Andrew Lee

Les thèmes classiques

Ils présentent habituellement une arborescence plus ou moins complexe, mêlant pages et billets. Cette structure convient bien aux sites de taille importante, fortement structurés.

Feeling Responsive: Démonstration du thème; Dépôt Github; Documentation; Auteur : Moritz Sauer - Phlow
Minimal Mistakes: Démonstration du thème; Dépôt Github; Documentation; Auteur : Michael Rose; Avec quelques modifications, Minimal Mistakes est le thème utilisé pour le site Bac-à-sable.
Skinny Bones: Démonstration du thème; Dépôt Github; Documentation; Auteur : Michael Rose

Michael Rose est l’un des principaux auteurs de thèmes Creative Commons pour Jekyll. Il est très actif sur le forum Jekyll, accompagne ses créations d’une documentation très fouillée et répond de façon rapide et approfondie aux questions posées par les utilisateurs.

Forty: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich

Andrew Banchich adapte de nombreux thèmes, surtout issus du site HTML5 Up! à Jekyll. Son dépôt Github est donc à surveiller régulièrement.

Editorial: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich
Massively: Démonstration du thème; Démonstration du thème; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich
Alpha: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich
Starving artist: Démonstration du thème; Dépôt Github; Auteur : Chris Tarwater

Les thèmes Starter

Des thèmes très simples, destinés avant tout à servir de boîte à outils pour développer vous-même vos propres créations originales. Ils ne sont pas vraiment prévus pour être utilisés tels quels.

Start Bootstrap: Démonstration du thème; Dépôt Gitlab
So Simple: Démonstration du thème; Dépôt Github; Documentation; Auteur : Michael Rose
HCZ Material theme: Démonstration du thème; Dépôt Github; Auteur : Ashutosh Chaudhary
Basically Basic: Démonstration du thème; Dépôt Github; Auteur : Michael Rose; Michael Rose se propose ici de remplacer le thème par défaut Minima, par un thème plus élaboré et facile à personnaliser. Une documentation complète est disponible sur le dépôt Github. Voir aussi les examples de posts dans la démo du thème.

Les thèmes Photo

Comme leur nom l’indique, ces thèmes sont conçus pour mettre en valeur les œuvres d’un photographe (ou d’un graphiste) et privilégient l’image par rapport au texte.

Photography: Démonstration du thème; Dépôt Github; Auteur : Ram Swaroop
Photorama: Démonstration du thème; Dépôt Github; Auteur : Anna Prigkipaki; Un superbe thème présentant de grandes photos animées par effet Ken Burns.

Lens: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich; Rien qu’une galerie photo, mais superbement réalisée.

Les inclassables

Quelques trouvailles qui ne rentrent dans aucune des catégories précédentes…

Jekyll Documentation Thème: Démonstration du thème; Dépôt Github; Un thème destiné à publier la documentation exhaustive d’un logiciel, voire un livre technique en ligne. Une documentation exhaustive est proposée dans la démo.
Malt: Démonstration du thème; Dépôt Github; Thème événementiel, les contenus défilent sur un grand graphisme fixe.
Ethereal: Démonstration du thème; Dépôt Github; Auteur : HTML5 Up! / Adaptation à Jekyll : Andrew Banchich; Un thème assez proche des One Page, présentant la particularité d’un défilement uniquement horizontal d’un écran à l’autre.
Base: Démonstration du thème; Dépôt Github; Auteur : CloudCannon; Un thème destiné à créer une base de connaissances composés d’articles et de tutoriels vidéo. Propose une recherche par Javascript intégrée.

Mike Hadley anime vos aventures

2017-05-15T14:27:26+00:00

Mike Hadley (pseudo mikewesthad) vient d’annoncer sur le forum Twine la mise à disposition d’un dépôt Github intitulé Twine Resources. Il y propose des snippets¹ pour enrichir vos propres histoires, réalisés à l’occasion d’un cours donné à ses étudiants.

L’ensemble est destiné à Sugarcube 2 et se présente sous forme de mini-histoires à télécharger et cannibaliser. Les exemples proposés sont déjà assez nombreux à ce jour, et la liste devrait s’allonger.

Animations de textes et d’images, intégration de CSS et librairies Javascipt dans Twine
Images cliquables
Utilisation de polices de caractères personnalisées
Utilisation des css pour des fonds de passages individualisés, des boîtes de texte
Hébergement des histoires sur Github…

P.S. Allez faire un tour dans la partie Aventures de ce blog, vous y trouverez aussi pas mal de snippets à grappiller.

Petits bouts de code utiles, partagés par un développeur et à recopier dans votre propre application / histoire. ↩

Twine : vos aventures sur Github

2017-05-12T08:33:33+00:00

Écrire une histoire ou une aventure avec Twine, c’est bien. Il est ensuite nécessaire de lui trouver un public à la mesure des efforts fournis. Si vous ne disposez pas d’un site institutionnel, voici une possibilité simple, efficace et gratuite de diffuser vos œuvres.

Github et compagnie

Github et ses quasi-clônes

Créer un compte

Un dépôt par histoire

Afficher ses pages

Charger les fichiers sur Github

Vos images en ligne

Une des particularités un peu agaçantes de Twine est qu’il ne permet pas de façon simple d’intégrer les images dans vos aventures si elles ne sont pas préalablement mises en ligne. Une façon de faire agréable, si elles ne sont pas trop lourdes/nombreuses consiste à les charger préalablement sur votre dépôt Github. Et à les insérer grâce à leur URL : ainsi, dès la phase de test dans Twine, vous pourrez les voir en place.

Organiser son atelier Twine

Utiliser Git

Git : petit guide: Une introduction sommaire mais efficace : les commandes essentielles de Git, résumées dans quelques pages en gros caratères, à la manière d’un Powerpoint.
Pour arrêter de galérer avec Git: Une initiation un peu plus complète (et non sans humour). Les principes sous-jacents sont présentés de façon très abordables.
Try Git: Un tutoriel interactif vous permet de prendre en main Git pour une formation pas-à-pas. Un must pour commencer, si vous ne craignez pas l’anglais.
Git immersion: Assez proche du précédent, mais plus complet. Principale différence : vous travaillez ici sur un dépôt Git réellement créé sur votre ordinateur. Également en langue anglaise.

Twine : nouvelles versions

2017-05-11T08:04:05+00:00

Depuis mon article sur le choix d’une version de Twine, pas mal de nouveautés. Et des progrès, autant pour le logiciel Twine que pour ses principaux formats d’histoire, Harlowe et Sugarcube.

Twine 2.1.3

Depuis le début de la série 2.1 de Twine, je déplorais une série de bugs sévères m’obligeant à en rester à la bonne vieille et éprouvée version 2.0.11. La version 2.1.3 lève (presque) entièrement la malédiction.

Les améliorations apportées ici sont surtout visibles au niveau de l’ergonomie. L’interface graphique a été entièrement repris, pour une bien meilleure lisibilité de la carte des passages. Un plus notable dès que votre histoire commence à s’étoffer quelque peu.

Quand vous lancez votre histoire dans Twine, un clic droit vous permet maintenant d’inspecter l’élément de votre choix avec les outils de développement de Chrome. Bien pratique pour effectuer rapidement des modifications de CSS.

La version 2.1.3 intègre les formats d’histoire Harlowe 2.0.1 et Sugarcube 2.18.0. Voyez ci-dessous leurs présentations plus détaillées.

Une habitude à prendre

Dans Twine, la syntaxe suivante est utilisée pour faire un lien entre le passage que vous êtes en train d’éditer et un autre passage :

 [[Mon passage|passage]]

Si le nouveau passage n’existe pas, Twine le crée automatiqument, du moins en théorie. Un petit bug, facile à contourner, produit parfois la situation illustrée dans la figure 2 ci-dessous.

Figure 1 : éditeur de passages.

Si je ferme le passage en train d’être édité en cliquant n’importe où en dehors du cadre d’édition : pas de nouveau passage créé automatiquement, juste la croix rouge d’erreur de lien…
Si je ferme proprement le passage en train d’être édité en cliquant sur la petite croix noire (fléchée en figure 1), tout se passe normalement.

Prenons donc, en attendant la correction de ce bug minime, l’habitude de fermer proprement l’éditeur.

Figure 2 : J’ai mal fermé l’éditeur.

Pour mettre à jour les formats d’histoire, voir la section correspondante dans mon article Twine : quel format choisir.

Harlowe 2.0.1

La version 2 de Harlowe apporte de nombreuses améliorations en ce qui concerne la mise en page et la programmation. Elle refait ainsi une partie de son retard sur Sugarcube, qui est jusqu’à présent mon format favori… Il va falloir que je fasse de nouveaux essais. Parmi toutes ces nouveautés, j’ai entre autres noté un nouveau marquage permettant de disposer les textes en colonne dans un passage. Et une série d’ajouts, tant dans le marquage que les macros, pour gérer l’apparition et la disparition de liens dans les passages.

Revenir à un thème clair

Le thème de base dans Harlowe est désormais sombre, texte blanc sur fond noir, comme dans Sugarcube, alors qu’il proposait des caractères noirs sur fond blanc dans les précédentes versions. L’ancien thème clair peut être restauré en insérant le code suivant dans un passage portant le tag header.

(enchant: ?page, (text-colour:black)+(background:white))

Sugarcube 2.18.0

Sugarcube se développe à un rythme nettement plus rapide que son rival Harlowe. Huit mises à jour se sont déjà succédées depuis le début de l’année 2017 ! Vous y trouverez une série d’ajouts fort intéressants dans les dernières versions. Les évolutions récentes les plus importantes se situent probablement dans les possibilités offertes par l’auteur de modifier (assez) facilement l’interface utilisateur.(API UiBar et special passage StoryInterface).

J’ai également appécié l’introduction de Config.navigation.override dont vous voyez ci-dessous un exemple d’utilisation tiré de mon Mini-monde. En glissant dans le Javascript de votre aventure un bout de code équivalent, vous allez pouvoir surveiller dans l’ensemble des passages, une condition fixée à l’avance. Ici, à chaque lien vers un autre passage, je teste si le joueur a déjà rencontré tous les animaux. Auquel cas il a gagné et est automatiquement envoyé au passage victoire. Pratique, et pas bien compliqué.

/*! Passage Override en cas de victoire */
Config.navigation.override = function (passageName) {
  if (State.variables.animaux == State.variables.max_animaux)
  {return "victoire";}
};

Si comme moi, vous n’appréciez pas la présentation blanc sur fond noir de Sugarcube, sachez que l’auteur a également mis à jour la feuille de style spécifique Bleachit, qui permet d’obtenir un Sugarcube clair. Voyez l’article Feuilles de style ready-made pour Sugarcube pour plus de détails sur la façon de la télécharger et de l’utiliser.

Votre atelier Jekyll sous Windows

2017-05-09T15:36:34+00:00

Je vais vous proposer ici d’installer sous Windows non seulement le générateur de sites statiques Jekyll, mais aussi deux outils complémentaires, Git, gestionnaire de versions et Atom, outil avancé d’édition de programmes et de sites web. En un mot, un atelier Jekyll complet. Il y faudra un peu plus de trois clics… Ce billet s’inspire partiellement d’un article de Sverrir Sigmundarson Jekyll 3 on Windows.

Prélude : installer Ruby

Jekyll est un logiciel développé avec le langage de programmation Ruby. Relativement récent, Ruby est présent par défaut sur les systèmes Mac et Linux, mais pas sous Windows. Il nous faudra donc commencer par installer Ruby. Ce sera aussi l’occasion de nous remettre à utiliser une bonne vieille fenêtre de commandes.

Rendez-vous sur le site de RubyInstaller et téléchargez la dernière version de la série 2.2 de Ruby-installer pour Windows 64. Début juin 2017, il s’agit de Ruby 2.2.6 (x64). Téléchargez également la version correspondante du Ruby Dev-kit, en bas de la même page web.

Installez Ruby de la façon habituelle : lancez l’installeur par un double clic. Deux points de détails à respecter cependant :

Choisissez un dossier d’installation dont le nom ne comprend pas d’espace (Plutôt C:\Ruby que C:\Program Files\Ruby)
Dans la boîte de dialogue initiale, si elle est visible, cochez la case Add Ruby executables to your PATH.

Figure 1 : Installer Ruby.

Ruby DevKit

Le Ruby DevKit est un ensemble d’utilitaires dont nous aurons besoin pour faire fonctionner Jekyll. Le fichier que vous avez téléchargé plus haut est une archive auto-extractible. Cliquez deux fois pour lancer sa décompression. Là aussi, vous choisirez un dossier dont le nom ne comporte pas d’espace. Par exemple C:\RubyDevKit\.

Il faut maintenant initialiser le DevKit et le lier à votre installation de Ruby.

Fenêtre de commandes Windows

Les étapes suivantes passent par l’utilisation de la fenêtre de commandes Windows. Pour la lancer :

Allez dans le Menu démarrer
Repérez le champ Rechercher les programmes et fichiers
Tapez-y cmd : Windows vous propose, en haut du menu cmd.exe
Cliquez deux fois sur cmd.exe pour lancer la fenêtre de commandes
Repérez l’icône correspondante dans la barre des tâches, en bas de votre écran. Faites-y un clic-droit et sélectionnez Attacher à la barre des tâches. Ceci vous permettra d’accéder très rapidement à la fenêtre de commandes.

Suivant votre version de Windows, vous pouvez également ouvrir le navigateur de fichiers, aller dans le dossier voulu et y faire un Majuscule+Clic Droit. Vous verrez alors apparaître un item de menu Ouvrir une fenêtre de commandes ici.

Figure 2 : La fenêtre de comandes Windows.

Initialiser le DevKit

Ouvrez la fenêtre de commandes Windows et allez dans le dossier où vous avez extrait le DevKit puis initialisez-le.

cd C:\RubyDevKit
ruby dk.rb init

Vérifiez que l’initialisation du DevKit s’est faite sans erreur :

ruby dk.rb review

Complétez maintenant l’instllation en liant le DevKit à votre version de Ruby.

ruby dk.rb install

Chaque fois que, comme ici, vous utilisez des commandes qui vont modifier les chemins de recherche de Windows, le Path, il est nécessaire de fermer puis de réouvrir la fenêtre de commandes. Sans quoi elle ne prendra pas en compte les nouveaux chemins, et vous obtiendrez des messages d’erreur.

Installer Jekyll

Dans une fenêtre de commandes, tapez :

gem install jekyll bundler
gem install wdm

L’utilitaire wdm permet de mettre à jour automatiquement votre serveur web local, pour y voir les modifications apportées aux pages votre site en temps réel.

Vérifiez enfin votre installation, toujours dans la fenêtre de commandes :

jekyll --version

Si tout se passe bien, vous pouvez maintenant sauter la section suivante et aller directement à Installer Git pour Windows.

Erreur SSL

Il est possible que votre première installation d’un fichier .gem échoue, avec un message dans votre fenêtre de commandes similaire à celui-ci :

ERROR: Could not find a valid gem 'jekyll' (>= 0), here is why:
Unable to download data from https://rubygems.org/
- SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://rubygems.org/latest_specs.4.8.gz)

Il s’agit d’un bug dans l’établissement d’une liaison sécurisée avec le dépôt officiel des fichiers .gem. Pour le corriger, il faudra installer manuellement une mise à jour.

Télécharger rubygems-update

Vous devez tout d’abord déterminer votre version de RubyGems en entrant gem -v dans votre fenêtre de commande Windows. Seuls les deux premiers chiffres sont à retenir. Par exemple si gem -v vous renvoie 2.5.1, vous retiendrez seulement 2.5

Allez sur la page des rubygems-update et repérez dans la liste l’entrée la plus récente correspondant à votre version. Ici, ce serait :

**2.5.2** - February 01, 2016 (464 KB)

Cliquez sur le lien correspondant à cette version de rubygems-update. Il vous consuit à une page présentant en détails cette version de RubyGems. Sur la droite de cette page repérez une barre de navigation latérale proposant une liste de liens. Cliquez sur Download et sauvegardez le fichier .gem, par exemple sous C:\rubygems-update-2.5.2.gem (pas d’espace dans le nom de dossier !).

Mettre à jour rubygems

Entrez les commandes suivantes dans votre fenêtre de commandes Windows :

cd C:
gem install --local rubygems-update-2.5.2.gem

Fermez, puis rouvrez votre fenêtre de commandes. Ceci fait, vous pouvez maintenant recommencer la séquence installer Jekyll comme indiqué plus haut.

Installer Git pour Windows

Git est un logiciel intimement lié au développement de Linux : il a été développé initialement par Linus Torvalds, le père de l’OS libre il y a une dizaine d’années. Git est un logiciel de contrôle de versions : il vous permet de gérer les différents étapes de la construction de votre projet et de revenir en arrière à tout moment. Git facilite grandement le travail coopératif. Il est disponible sous Linux, Mac et Windows.

Téléchargez le logiciel et installez-le de la façon habituelle. Il faudra porter attention à quelques options durant le processus d’installation.

Figure 3 : Git pour Windows - Options.

Dans les panneaux suivants, validez également les options :

Use Git from GitBash only
Checkout Windows-style, commit Linux-style line endings
Enable file system caching
Enable Git Credential Manager

Installer Atom

Atom, logiciel à mi-chemin entre l’éditeur de code et l’IDE¹, est lui aussi une production de Github. Un bon équilibre, ce me semble, entre la richesse des fonctionnalités et une relative facilité d’emploi. Il dispose de packages, de modules additionnels, pour la plupart des besoins de l’atelier Jekyll et peut s’installer à l’identique sur les différents systèmes d’exploitation : Linux, Mac et Windows. Téléchargez et installez le logiciel de la façon habituelle. Attention, le processus est un peu long.

Et quelques packages

Pour installer des Packages dans Atom :

Cliquez sur Edit -> Preferences (ou Settings) :
Les préférences s’affichent comme un nouveau document.
Dans ce pseudo-document, à gauche, cliquer sur + Install.
Dans le champ de recherche (1), tapez Jekyll puis cliquez sur Packages.
Les Packages pertinents sont affichés (2) : faites votre choix.
Une fois la sélection des Packages terminés, sauvegardez et fermez les préférences : CTRL-S puis CTRL-W.

Figure 4 : Installer des Packages dans Atom.

Installez les Packages suivants dans Atom :

Pour Jekyll : jekyll et language-liquid
Pour Markdown : language-markdown et markdown-writer
Pour Git : git-plus

Atom 1.18 (encore en beta fin mai 2015 - téléchargement) propose une intégration accrue avec Git et Github comme vous pouvez le voir ci-dessous. La totalité des opérations courantes de contrôle de version et de publication en ligne peuvent se faire sans quitter Atom et donc sans fenêtre de commande ou terminal. Inutile avec cette version d’installer le package git-plus. Je n’y ai pas trouvé de bug gênant malgré une utilisation intensive (mais je travaille avant tout sous Linux…) et vous conseille donc cette version-là pour sa simplification du workflow.

Figure 5 : Ce billet dans Atom 1.18 beta.

L’Integrated Development Environment (Environnement de développement intégré) est un ensemble d’outils regroupés autour d’un éditeur de code et destinés à développer la productivité des programmeurs. ↩

Twine : quel format choisir ?

2017-04-24T10:25:30+00:00

Parmi les trois formats d’histoires proposés dans Twine, je n’utilise plus guère que Sugarcube. Découvrez pourquoi dans la suite de ce billet.

Prêtez attention au menu principal de Twine, dans la colonne de droite, vous trouvez un item marqué Formats.

Figure 1 : sélectionner les formats.

Voyez sur la figure 1 ci-dessus cet item marqué de rouge. Un clic fera apparaître une boîte de dialogue assez complexe : la boîte de paramétrage des formats.

Figure 2 : boîte de dialogue des formats.

Onglets de sélection : ici, les formats d’histoire.
Étoile de format par défaut : cliquez dessus pour choisir le format attribué automatiquement aux nouvelles histoires.
Une première version de Sugarcube (1.0.34) livrée avec ma vieille version de Twine 2.0.11.
Une seconde version de Sugarcube (2.15.0) mise à jour manuellement.
Étoile de format par défaut : elle est bleue car j’ai sélectionné Sugarcube 2.15.0 comme format par défaut.
Poubelle : il est possible de désinstaller des formats ajoutés manuellement.

Histoire … et correction

Twine utilise deux types différents de formats, qui bénéficient chacun d’un onglet séparé dans la boîte de dialogue. Il s’agit des formats d’histoire et des formats de correction.

Les formats d’histoire sont utilisés pour créer un récit dans Twine. Ce sont eux qui sont responsable du type de programmation utilisée, de l’aspect des commandes, de l’interface utilisée pendant le jeu. Twine est livrée d’origine avec trois formats d’histoire différents : Harlowe, Snowman et Sugarcube. Ces formats d’histoire sont habituellement mis à jour plus rapidement que le logiciel Twine lui-même, mais il est très simple d’importer de nouveaux formats ou des mises à jour.

Les formats de correction permettent de visionner facilement l’ensemble d’une histoire, en la présentant sous forme textuelle, sans les post_it de l’interface auteur. Paperthin est le format de correction livré par défaut avec Twine. Très peu de fonctionnalités : toute l’histoire d’un seul tenant, les passages séparés par une ligne pointillée, leurs titres en gras.

Figure 3 : une histoire vue dans Paperthin.

De plus, Paperthin est un format en lecture seulement : il n’est pas possible d’y effectuer des modifications au texte de votre histoire. En cas de faute d’orthographe, par exemple, la correction devra se faire obligatoirement dans les *post-it” de l’interface de saisie.

Illume, un format à essayer

Michael McCollum nous propose une alternative aux possibilités très limitées de Paperthin : le format de correction Illume.

Figure 4 : une histoire vue dans Illume.

Il offre des fonctions de statistiques, permet de lister les modifications effectuées, d’exporter le travail vers différents formats. Mais toujours pas d’éditer effectivement le texte de l’histoire avant de le ré-injecter dans Twine. Dommage… comme le fait que son interface soit exclusivement en anglais. Pour l’installation de Illume, voyez plus bas la section Mise à jour.

Mise à jour

Pour mettre à jour une version de Harlowe ou Sugarcube,

Allez sur leurs sites respectifs et télécharger l’ archive *.zip correspondante
Décompactez-là à l’endroit de votre choix. Pour ma part, je copie les formats dans un sous-répertoire de mon dossier Twine. Sous Linux, ceci me donnera /home/pierre/Twine_2.0.11/SugarCube-2/.

A partir de là, pour installer Illume, la manœuvre sera identique :

Ouvrez la boîte de dialogue des formats comme indiqué en figure 1
Sélectionnez l’onglet Ajouter un format
Dans la boîte de dialogue ci-dessus, entrez l’adresse du format. Selon les cas, ce sera une adresse de type web (http://www.maximumverbosity.net/twine/Illume/format.js pour Illume) ou de type fichier pour Sugarcube (/home/pierre/Twine_2.0.11/SugarCube-2/format.js sur mon ordinateur). Dans tous les cas, c’est l’adresse du fichier javascript format.js qu’il faut entrer.
Cliquez sur le bouton vert Ajouter.

Par suite de bugs récurrents, il n’est pas possible de mettre à jour ou d’installer des formats dans les versions 2.1.x de Twine. Voyez cet article pour le choix d’une version de Twine.

Harlowe

Harlowe est une création de Leon Arnott. Sa documentation est disponible sur le site de l’auteur. Voyez ici Le loup et l’agneau un example d’histoire réalisée avec le format d’histoire Harlowe.

Ce format propose par défaut une interface claire, simple et agréable. Il convient parfaitement aux nouveaux utilisateurs qui ne veulent pas utiliser de façon très approfondie les possibilités de codage offertes dans Twine. Les débutants auront tout intérêt à choisir Harlowe pour commencer leur exploration de Twine.

{
(set: $photo='<img src="./images/'+ (passage:)'s name + '.jpg" />')
(set: $son_auto='<audio src="./son_auto/'+ (passage:)'s name + '.mp3" autoplay />')
}

Figure 5 : un example de code dans Harlowe

Harlowe est le format d’histoire par défaut dans les versions 2 de Twine.

Sugarcube

Sugarcube est une création de Thomas Michael Edwards. Sa documentation est particulièrement complète et compréhensible (bien qu’en anglais…). De plus, l’auteur est très actif sur le forum Twine et fait habituellement des réponses très complètes, assorties d’exemple de code, aux questions qui sont posées. Surveillez le pseudo TheMadExile.

Par défaut, Sugarcube se présente avec une interface sur fond noir que j’apprécie peu. L’auteur fournit néamoins une feuille de style permettant d’afficher l’histoire de façon plus classique. Pour plus de détails, voyez cet article.

<<set $online_medias_url to "https://www.bac-a-sable.eu/mini-monde/medias/">>
<<initInv>>
<<set $son_nuit to $online_medias_url+"start.mp3">>
<<set $son_maison to $online_medias_url+"maison.mp3">>

Figure 6 : un example de code dans Sugarcube

Sugarcube facilite le développement d’une interface personnalisée sans trop de difficultés.

Snowman

Snowmann est conçu et maintenu par le créateur de Twine lui-même, Chris Klimas. Dans le forum Twine, vous le rencontrerez sous le pseudo de Klembot. Il définit son format d’histoire comme un format minimaliste, dessiné pour des utilisateurs maîtrisant Javascript et CSS. Quasi inutilisable sans un important travail de programmation, mais ouvert à toutes les extensions et personnalisations. Si vous fréquentez le forum, vous verrez rapdement que Snowman est, de loin, le format le moins populaire. Vous trouverez (un tout petit peu) plus d’infos dans le dépôt Bitbucket de Chris.

Pour quelqu’un qui débute dans la rédaction d’histoires sous Twine, Snowman n’est pas le choix le plus pertinent.

Pourquoi plutôt Sugarcube ?

Sugarcube est aujourd’hui mon format d’histoire par défaut, bien que j’ai commencé par écrire des histoires simples sous Harlowe. Sa plus grande richesse en matière d’outils simples pour enrichir programmatiquement une histoire a fini par me séduire. Avec Harlowe, vous finirez presque certainement par vous trouver un peu à l’étroit dans le jeu des fonctions et commandes proposées par défaut. Certes, il est toujours possible de créer de nouvelles fonctionnalités à grands coups de Javascript. Mais Sugarcube offre nativement la plupart des outils dont j’ai besoin. J’y ai apprécié tout particulièrement :

l’interface de navigation latérale, facilement personnalisable
la gestion fine des ambiances sonores

En résumé

Vous êtes débutant : Harlowe
Vous voulez pimenter vos histoires d’un peu de programmation : Sugarcube
Vous êtes un développeur chevronné : Snowman