Hey ,

Mon emploi du temps avant Noël ayant changé, je n'ai pas pu finir la beta7. Et comme j'avais juste une matinée, j'ai tenté de faire naître un projet pour le côté apprentissage, pédagogique et ludique des manuels de Hoa que j'ai appelé Popcode.
L'idée est d'utiliser le projet Popcorn.js de Mozilla pour interagir avec une vidéo expliquant un concept, un bout de code, un exemple ou autre chose, bref : un support quelconque aux manuels. Le code est situé dans un éditeur en ligne avec lequel on va pouvoir interagir dynamiquement. J'étais parti sur Ace mais son API n'étant pas documentée, je suis passé à CodeMirror (avec beaucoup de regret car Ace est un projet que j'affectionne particulièrement).

Bref, après quelques heures de codage, voici le résultat (pareil mais au format mov)

Les trucs intéressants : quand le curseur est sur la vidéo, elle se met en lecture, sinon elle se met en pause. Pendant que la vidéo est en lecture, nous pouvons interagir avec les éditeurs : ajouter du code, mettre une ligne en surbrillance etc.
J'ai ajouté un petit système d'onglet si on a plusieurs fichiers, et la vidéo sélectionne le bon onglet toute seule évidemment.

Ce que j'aimerais ajouter c'est une arborescence afin que l'ensemble colle parfaitement à ce que l'utilisateur pourrait avoir chez lui. J'aimerais aussi fournir des PHAR pour que le projet soit téléchargeable.

Le truc que j'ai codé c'est surtout une API pour faire ce genre de choses facilement et rapidement ! Voici l'ensemble du code Javascript pour le faire (c'est encore à l'état de brouillon) :

document.addEventListener('DOMContentLoaded', function ( ) {

    var pc = new Popcode().init('#myvideo');
    pc.corn.popcode({
        start: 1,
        end: 2,
        code: 1
    });
    pc.corn.popcode({
        start: 2,
        end: 4,
        code: 1,
        line: 1
    });
    pc.corn.popcode({
        start: 4,
        end: 6,
        code: 2
    });
});

Les questions qui se posent est : que mettre dans la vidéo ? Déjà on cause, on peut mettre aussi des diagrammes, des animations, le résultat de l'exécution, ce genre de chose. On peut très bien avoir un onglet « sortie terminal », mais si on commence à avoir plusieurs fenêtres, plusieurs pages etc., ça devient difficile de tout faire côté client, donc autant placer ce genre de résultat côté serveur, c'est à dire dans la vidéo. On peut aussi imaginer que des fenêtres vers le manuel d'apprentissage s'ouvre directement sur la bonne section ! Bref, ça donne des idées.

Au final, j'aimerais accompagner chaque chapitre du manuel d'apprentissage d'une vidéo reprenant l'essentiel des concepts et du code. J'aimerais aussi faire ça pour les code snippets dont j'ai parlé récemment (apprendre Hoa par le code et par l'exemple, des p'tits bouts de code comme ça).

Votre avis sur ce projet ?