Réalisation d'un logiciel de screencast open source : Différence entre versions

De Ensiwiki
Aller à : navigation, rechercher
(Le projet Dahu)
 
(22 révisions intermédiaires par 4 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
Sujet proposé par Rémi Barraquand et Matthieu Moy.
+
{{2A}} {{Projets de spécialité - 2A}}
 +
 
 +
[[Catégorie:Deuxième Année]]
 +
[[Catégorie:Informatique]]
 +
[[Catégorie:Projets de spécialité]]
 +
 
 +
Sujet proposé en 2013 - 2015 par [http://remibarraquand.com/ Rémi Barraquand], Denis Becker et [http://www-verimag.imag.fr/~moy/ Matthieu Moy].
  
 
== Résumé ==
 
== Résumé ==
  
L'objectif de ce projet est de développer une "vraie" alternative aux logiciels de Screencasting actuels. En effet, même si il existe une large variété de logiciels proposant la réalisation de Screencasts, aucun de ces logiciels ne proposent de solutions efficaces regroupant les fonctionnalités/propriétés que l’on attend de ce genre d’outil.  
+
[http://dahuapp.github.io/ Dahu] est un logiciel libre développé par des étudiants Ensimag. C'est une alternative aux logiciels de Screencasting classiques, conçu spécifiquement pour réaliser des didacticiels (« tutoriaux ») pour interfaces graphiques. Là où la plupart des logiciels enregistrent les actions faites à l'écran sous forme de vidéo, Dahu capture et enregistre le déroulement de ces actions (capture d'écran, position de la sourie, etc.) pour ensuite générer un contenu indexable et facilement éditable à base de technologies web tel que HTML5, CSS3 et JavaScript. Vous trouverez sur http://www-verimag.imag.fr/~moy/cours/liesse/spyder/ un exemple de screencast permettant de vous faire une idée de ce que Dahu sait déjà faire.
  
Généralement l’approche proposée est de faire un enregistrement vidéo d’une zone de votre écran et d’y coupler de l’audio. Cette approche pose plusieurs problèmes pour la capture (une erreur dans votre manip ou votre discours et il faut tout reprendre ou faire du collage vidéo), la post-édition (ajouter du texte, des animations, et autre, reviens à faire de l’édition vidéo), l’export (les formats sont propriétaires, et souvent bien trop lourd), l’indexation (très difficile d’indexer une vidéo ou un fichier Flash), la lecture (pas pratique de devoir faire défiler le curseur pour trouver l’information que l’on recherche : le moment ou tel ou tel truc est expliqué), etc. Même si des solutions comme Wink, Adobe Captivate, Salasaga, etc. proposent des fonctionnalités intéressantes aucunes ne regroupent les critères suivant :
+
Dahu est né pendant un projet de spécialité en 2013, il est encore jeune et est en cours de (1) '''développement avec l'ajout de nouvelles fonctionnalités''' (2) '''refactoring'''.
 +
 
 +
# '''Ajout de nouvelles fonctionnalités'''. D'un côté, l'interface graphique de capture et d'édition est encore rudimentaire, et de l'autre, le code HTML généré pourrait être amélioré. Plus précisément, une liste d'améliorations possibles est disponible dans [https://github.com/dahuapp/Dahu/issues?state=open le bugtracker de Dahu].
 +
# '''Refactoring'''. Le noyau fonctionnel de Dahu est développé principalement à partir des technologies web HTML5, CSS3, JavaScript. Ce noyau fonctionnel est ensuite embarqué dans un "conteneur" écris en Java (Java8, JavaFx Webview, etc.). Bien que l'architecture du "conteneur" soit relativement stable et extensible, l'architecture du noyau fonctionnel demande un refactoring important afin de permettre à Dahu de s'étendre par la suite. Les details concernant ce refactoring sont décris sur https://github.com/dahuapp/Dahu/wiki/0.4-development. Ce refactoring est en cours dans la branche '''Next''' disponible sur Github [https://github.com/dahuapp/dahu/tree/next].
 +
 
 +
== Plus d'informations sur Dahu ==
 +
 
 +
'''Dahu a son propre site web!''' Allez voir sur http://dahuapp.github.io/ pour plus d'information.
 +
 
 +
L’approche proposée par la plupart des outils de screencasting est de faire un enregistrement vidéo d’une zone de votre écran et d’y coupler de l’audio. Cette approche pose plusieurs problèmes pour la capture (une erreur dans votre manip ou votre discours et il faut tout reprendre ou faire du collage vidéo), la post-édition (ajouter du texte, des animations, et autre, reviens à faire de l’édition vidéo), l’export (les formats sont propriétaires, et souvent bien trop lourd), l’indexation (très difficile d’indexer une vidéo ou un fichier Flash), la lecture (pas pratique de devoir faire défiler le curseur pour trouver l’information que l’on recherche : le moment ou tel ou tel truc est expliqué), etc.
 +
 
 +
Une approche intéressante est d'utiliser des animations plus simples que la vidéo (succession de captures d'écran fixes avec quelques ajouts comme déplacement du curseur de la souris, bulles d'aides, ...), qui permettent un rendu proche de la vidéo, mais en simplifiant et en améliorant la capture et la visualisation. Des solutions comme [http://www.debugmode.com/wink/ Wink], [http://www.adobe.com/Captivate Adobe Captivate], [http://osflash.org/salasaga Salasaga], etc. proposent des fonctionnalités intéressantes dans cette direction mais aucunes ne regroupent les critères suivant :
  
 
* Open source : aucune solution efficace n’est disponible en logiciel libre,
 
* Open source : aucune solution efficace n’est disponible en logiciel libre,
Ligne 15 : Ligne 32 :
 
* Web friendly : malgré le fait que les screencasts sont destinés au e-learning, aucune des solutions ne s’intègre correctement au technologies Web (HTML5, CSS, JS).
 
* Web friendly : malgré le fait que les screencasts sont destinés au e-learning, aucune des solutions ne s’intègre correctement au technologies Web (HTML5, CSS, JS).
  
La solution développée sera composée de trois parties :
+
== Technologies utilisées ==
* Capture : un outil de capture et d’édition écrit en Java+JavaFX permettant a) l’enregistrement des informations relatives aux screencasts et b) la post-édition des screencasts pour l’ajout de méta-données (ex. textes, animations, etc.)
+
 
* Format intermédiaire : un format intermédiaire permettant de stocker le contenu, la forme et la dynamique des screencasts. Ce format devra être définit sur des standards ouverts (XML , JSON , autre), extensible, et portable.
+
* '''JavaScript''', le coeur de Dahu est entièrement écrit en JavaScript et utilise plusieurs technologies notamment:
* Lecture: un lecteur permettant de visionner les screencasts dans un navigateur web (HTML5, JS, CSS).
+
** [http://backbonejs.org/ Backbone.js] et [http://marionettejs.com/ Marionnete.js] pour l'architecture générale MV*
 +
** [http://imakewebthings.com/deck.js/ Deck.js] pour la lecture des screencasts générés.
 +
** [http://gruntjs.com/ Grunt] pour la "compilation".
 +
* '''Java'''
 +
** [http://docs.oracle.com/javase/8/javase-clienttechnologies.htm JavaFx] pour la réalisation du container (1) encapsulant le coeur écrit en JavaScript et (2) faisant l'interface avec le système d'exploitation.
 +
** [https://gradle.org/ Gradle] pour la compilation et le packaging.
 +
 
 +
== Références ==
 +
 
 +
* Wink, http://www.microimages.com/support/Wink.htm
 +
* Screenr, http://www.screenr.com
 +
* Adobe Captivate, http://www.adobe.com/Captivate
 +
* Salasaga, http://freecode.com/projects/salasaga
 +
* screencast-o-matic : http://screencast-o-matic.com/
  
 
== Organisation ==
 
== Organisation ==
  
Ce projet devra être supporté par deux équipes. Une équipe en charge de l’outil de capture, et une équipe en charge de l’outil de lecture. Le point de convergence des deux équipes étant l’intégration et la définition du format intermédiaire.
+
Ce projet devra être supporté par une ou deux équipes. Une équipe en charge de l’outil de capture, et une équipe en charge de l’outil de lecture. Le point de convergence des deux équipes étant l’intégration et la définition du format intermédiaire.
  
== Évaluation ==
+
Taille des équipes : 3 à 5 étudiants (de préférence, plutôt 5 que 3).
 +
 
 +
''Pour ce sujet, il est possible de bénéficier d'un encadrement spécifique sur le thème des '''méthodes agiles.''' Pour plus de détails, voir la page [[Méthodes agiles en projet de spécialité]].''
 +
 
 +
== Liens ==
 +
 
 +
* [[Projets de spécialité - 2A]]
 +
* [[Projets de spécialité Génie logiciel et langages]]
 +
 
 +
== Objectif et évaluation ==
 +
 
 +
L'objectif général du projet est de fournir une solution qui soit utilisable, et évolutive, pour que le développement puisse continuer sur le long terme (par exemple des projets de spécialité Ensimag futurs, mais pourquoi pas des contributions extérieures à l'école).
  
 
L'évaluation prendra en compte les points suivants (liste non-exhaustive) :
 
L'évaluation prendra en compte les points suivants (liste non-exhaustive) :
Ligne 31 : Ligne 72 :
 
* Mise en place de la communauté, (forge, wiki, test, demo, etc.)
 
* Mise en place de la communauté, (forge, wiki, test, demo, etc.)
 
* Soutenance et rapport final
 
* Soutenance et rapport final
 +
 +
== Le projet Dahu ==
 +
 +
Le premier prototype de ce logiciel a été réalisé en juin 2013 par cinq étudiants.
 +
Vous pouvez suivre son avancement sur github : https://github.com/dahuapp/Dahu
 +
 +
Actuellement, ce logiciel permet, sur les systèmes Linux, Mac et Windows :
 +
* de prendre des screenshots en appuyant sur la touche F7
 +
* d'organiser les screen
 +
* de générer des présentations en html+javascript
 +
* de les visualiser avec un navigateur
 +
 +
Les principaux bug connus sont :
 +
* le choix des répertoires de projet se fait par chemins absolus. Un bug de DirectoryChooser (corrigé dans la dernière version de java), empêche une interface plus conviviale
 +
 +
De nombreuses fonctionnalités sont encore à implémenter, notamment :
 +
* ajout de plusieurs position de curseurs de la souris par slide
 +
* ajout de tooltips sur les slides
 +
* copier-coller de slides
 +
* ajout de titre (indexable par google) par slide
 +
* ajout de 'barre de progression' sur la preview pour accéder à des "chapitres" de présentation
 +
* ajout de paragraphes explicatifs par slide pour documenter la présentation
 +
Et encore de nombreuses autres actions...

Version actuelle en date du 21 avril 2015 à 15:29

Mycomputer.png  Deuxième Année  CDROM.png  Projets de spécialité 

Sujet proposé en 2013 - 2015 par Rémi Barraquand, Denis Becker et Matthieu Moy.

Résumé

Dahu est un logiciel libre développé par des étudiants Ensimag. C'est une alternative aux logiciels de Screencasting classiques, conçu spécifiquement pour réaliser des didacticiels (« tutoriaux ») pour interfaces graphiques. Là où la plupart des logiciels enregistrent les actions faites à l'écran sous forme de vidéo, Dahu capture et enregistre le déroulement de ces actions (capture d'écran, position de la sourie, etc.) pour ensuite générer un contenu indexable et facilement éditable à base de technologies web tel que HTML5, CSS3 et JavaScript. Vous trouverez sur http://www-verimag.imag.fr/~moy/cours/liesse/spyder/ un exemple de screencast permettant de vous faire une idée de ce que Dahu sait déjà faire.

Dahu est né pendant un projet de spécialité en 2013, il est encore jeune et est en cours de (1) développement avec l'ajout de nouvelles fonctionnalités (2) refactoring.

  1. Ajout de nouvelles fonctionnalités. D'un côté, l'interface graphique de capture et d'édition est encore rudimentaire, et de l'autre, le code HTML généré pourrait être amélioré. Plus précisément, une liste d'améliorations possibles est disponible dans le bugtracker de Dahu.
  2. Refactoring. Le noyau fonctionnel de Dahu est développé principalement à partir des technologies web HTML5, CSS3, JavaScript. Ce noyau fonctionnel est ensuite embarqué dans un "conteneur" écris en Java (Java8, JavaFx Webview, etc.). Bien que l'architecture du "conteneur" soit relativement stable et extensible, l'architecture du noyau fonctionnel demande un refactoring important afin de permettre à Dahu de s'étendre par la suite. Les details concernant ce refactoring sont décris sur https://github.com/dahuapp/Dahu/wiki/0.4-development. Ce refactoring est en cours dans la branche Next disponible sur Github [1].

Plus d'informations sur Dahu

Dahu a son propre site web! Allez voir sur http://dahuapp.github.io/ pour plus d'information.

L’approche proposée par la plupart des outils de screencasting est de faire un enregistrement vidéo d’une zone de votre écran et d’y coupler de l’audio. Cette approche pose plusieurs problèmes pour la capture (une erreur dans votre manip ou votre discours et il faut tout reprendre ou faire du collage vidéo), la post-édition (ajouter du texte, des animations, et autre, reviens à faire de l’édition vidéo), l’export (les formats sont propriétaires, et souvent bien trop lourd), l’indexation (très difficile d’indexer une vidéo ou un fichier Flash), la lecture (pas pratique de devoir faire défiler le curseur pour trouver l’information que l’on recherche : le moment ou tel ou tel truc est expliqué), etc.

Une approche intéressante est d'utiliser des animations plus simples que la vidéo (succession de captures d'écran fixes avec quelques ajouts comme déplacement du curseur de la souris, bulles d'aides, ...), qui permettent un rendu proche de la vidéo, mais en simplifiant et en améliorant la capture et la visualisation. Des solutions comme Wink, Adobe Captivate, Salasaga, etc. proposent des fonctionnalités intéressantes dans cette direction mais aucunes ne regroupent les critères suivant :

  • Open source : aucune solution efficace n’est disponible en logiciel libre,
  • Multi plateforme : aucune solution efficace libre et gratuite est multi plateforme,
  • Open standard : aucune solution efficace utilise des standards ouverts pour l’export, l’import et la lecture des screencasts. Les formats utilisés sont souvent le Flash ou des formats videos.
  • Multi export : aucune solution efficace propose d’utiliser un format intermédiaire de manipulation des screencasts afin, par exemple, d’offrir plusieurs format d’export/lecture de ces screencasts.
  • Indexable : du fait des formats d’exports choisis par les solutions existantes, il est impossible d’indexer (utile pour les moteurs de recherches mais également pour améliorer la présentation de ces screencasts) les screencasts générés.
  • Ergonomique : les solutions existantes sont souvent très peu ergonomique que se soit pour l’enregistrement du screencasts que pour la lecture, par exemple il faut se servir de la barre de défilement du player Flash ou video pour rechercher/accéder à une partie du screencast particulière.
  • Web friendly : malgré le fait que les screencasts sont destinés au e-learning, aucune des solutions ne s’intègre correctement au technologies Web (HTML5, CSS, JS).

Technologies utilisées

  • JavaScript, le coeur de Dahu est entièrement écrit en JavaScript et utilise plusieurs technologies notamment:
  • Java
    • JavaFx pour la réalisation du container (1) encapsulant le coeur écrit en JavaScript et (2) faisant l'interface avec le système d'exploitation.
    • Gradle pour la compilation et le packaging.

Références

Organisation

Ce projet devra être supporté par une ou deux équipes. Une équipe en charge de l’outil de capture, et une équipe en charge de l’outil de lecture. Le point de convergence des deux équipes étant l’intégration et la définition du format intermédiaire.

Taille des équipes : 3 à 5 étudiants (de préférence, plutôt 5 que 3).

Pour ce sujet, il est possible de bénéficier d'un encadrement spécifique sur le thème des méthodes agiles. Pour plus de détails, voir la page Méthodes agiles en projet de spécialité.

Liens

Objectif et évaluation

L'objectif général du projet est de fournir une solution qui soit utilisable, et évolutive, pour que le développement puisse continuer sur le long terme (par exemple des projets de spécialité Ensimag futurs, mais pourquoi pas des contributions extérieures à l'école).

L'évaluation prendra en compte les points suivants (liste non-exhaustive) :

  • Qualité/quantité du code produit
  • Mise en place de la communauté, (forge, wiki, test, demo, etc.)
  • Soutenance et rapport final

Le projet Dahu

Le premier prototype de ce logiciel a été réalisé en juin 2013 par cinq étudiants. Vous pouvez suivre son avancement sur github : https://github.com/dahuapp/Dahu

Actuellement, ce logiciel permet, sur les systèmes Linux, Mac et Windows :

  • de prendre des screenshots en appuyant sur la touche F7
  • d'organiser les screen
  • de générer des présentations en html+javascript
  • de les visualiser avec un navigateur

Les principaux bug connus sont :

  • le choix des répertoires de projet se fait par chemins absolus. Un bug de DirectoryChooser (corrigé dans la dernière version de java), empêche une interface plus conviviale

De nombreuses fonctionnalités sont encore à implémenter, notamment :

  • ajout de plusieurs position de curseurs de la souris par slide
  • ajout de tooltips sur les slides
  • copier-coller de slides
  • ajout de titre (indexable par google) par slide
  • ajout de 'barre de progression' sur la preview pour accéder à des "chapitres" de présentation
  • ajout de paragraphes explicatifs par slide pour documenter la présentation

Et encore de nombreuses autres actions...