Générateur de PréAO

Générateur

de PréAO

Rapport de projet tutoré Les projets tutorés sont destinés à̀ faciliter l'acquisition de la pratique et le maniement des concepts enseignés. Plus particulièrement, ils doivent favoriser l'acquisition d'un « savoir-faire » et d'un « savoir être » dans une optique professionnelle. Ils doivent ainsi développer les qualités d'organisation et de méthode. Réalisés individuellement ou collectivement, ils doivent améliorer la qualité́ du travail personnel et permettre l'apprentissage du travail professionnel en groupe.

Tuteurs : Gaëtan Davoult, Christian Delaruelle, Philippe Le Pivert, Hugues Duflo

Le 27 Février 2017 – Université du Havre – IUT Le Havre

Équipe 43

Maxence Hamel, Pierre Ribet, Félix Denis, Steeve Boucher

M1106 – Projet Tutoré Rapport de Projet – Equipe 43 2/15


Création d’un générateur

de PréAO

Rapport de projet tutoré

Maxence Hamel – Pierre Ribet – Félix Denis – Steeve Boucher

Groupe 43


Sommaire

INTRODUCTION ............................................................................................................................................. 5

1. L’ORGANISATION DU PROJET ................................................................................................................... 6

• Répartition des rôles dans l’équipe et des différentes activités ......................................... 6

• Analyse du sujet pour cerner les différents points à prendre en considération ................. 6

• Rencontre avec le client ....................................................................................................... 7

• Réalisation d’un cahier des charges pour le client .............................................................. 7

a. OUTILS .......................................................................................................................................... 7

• Un navigateur Web .............................................................................................................. 7

• Un serveur FTP maison : Filezilla ......................................................................................... 7

• Une interface shell pour aider l’utilisateur à réaliser sa présentation ................................ 8

• Un logiciel de code : Sublime Text ....................................................................................... 8

• Des ressources informationnelles et techniques ................................................................ 9

2. LES APPRENTISSAGES ............................................................................................................................. 10

a. DANS LA GESTION DE PROJET............................................................................................................. 10

• L’analyse des besoins pour définir les activités ................................................................. 10

• Construire et planifier les activités .................................................................................... 10

• Conduire et piloter ............................................................................................................. 11

• Clôturer et évaluer ............................................................................................................. 11

b. DANS LA TECHNIQUE ....................................................................................................................... 11

3. ÉVALUATION DU GENERATEUR PREAO ................................................................................................... 13

a. LES DIFFICULTES RENCONTREES .......................................................................................................... 13

• Pour le technique : ............................................................................................................. 13

• Pour le social : .................................................................................................................... 13

b. LES POINTS FORTS .......................................................................................................................... 13

c. LES POINTS A AMELIORER ................................................................................................................. 14

CONCLUSION ............................................................................................................................................... 15


Introduction

Dans notre groupe composé de Maxence (développeur), Félix (chef de projet), Pierre (testeur) et Steeve (testeur), nous avons réalisé une application dans le cadre du module M1106 – Projet Tutoré. Ce projet permet à un utilisateur (ou un client) de concevoir très rapidement une présentation assistée par ordinateur. Le nom PréAO signifie présentation assistée par ordinateur.

La finalité de ce projet est simple. L'utilisateur doit définir sa présentation dans un fichier texte en respectant certaines règles. Puis, il va générer à l'aide de l’application un(des) fichier(s) HTML (semblables à une ou plusieurs page(s) web). Les fichiers générés associé(s) à une feuille de style (de mise en forme) donnent la présentation demandée dans un navigateur.

L’objectif de ce projet est de concevoir une application qui répond aux exigences d’un client, la tester et fournir les documents associés à l’utilisateur comme le manuel d’utilisation.

Pour ce projet, nous avons eu l’aide de différents professeurs.

• M. Davoult Gaëtan (Professeur de Conception de Documents et Interfaces Numériques)

• M. Delaruelle Christian (Professeur de mathématique et d'algorithme)

• M. Le Pivert Philippe (Professeur d'algorithme)

• M. Hugues Duflo (Professeur de réseau)

Afin de mener à bien ce projet, nous avons dû travailler ensemble.

Tout d’abord, c’est un travail d’équipe. Dans notre groupe de quatre personnes, nous nous sommes réparti les tâches pour gagner du temps et avancer dans le projet.

Ensuite, nous avons élaboré une solution informatique à partir d'un cahier des charges donné par les tuteurs. En effet, le but du projet était de créer un logiciel du PréAO et de trouver un moyen de le concevoir.

Puis, Nous avons livré une solution stable et autonome étant donné que l’objectif final était de rendre un programme fonctionnel qui respectait les demandes du cahier des charges.

Et pour terminer, nous avons proposé un projet couvrant les modules :

- M1102 - Intro à l'algorithmique et à la programmation, M1103 - Structures de données et algorithmes fondamentaux qui couvrait le programme principal et ainsi, les ¾ du projet,

- M1105 Conceptions de Documents et Interfaces numériques qui couvre les documents rendus et l’interface visible de la PréAO

- M1205 Expression-Communication pour ce qui couvre le langage, la rédaction et aussi la présentation orale à la fin du projet.

Ainsi, nous allons présenter l’organisation du projet et les choix réalisés avant la conception, puis, la synthèse des apprentissages notamment en Java mais aussi en gestion de projet, et avant de conclure une partie sur ce qui a bien fonctionné ou est à améliorer.


L’organisation du projet

Répartition des rôles dans l’équipe et des différentes activités

Le projet a été structuré en différentes parties basées sur un planning de projet.

La première partie consistait en la réalisation d’une réflexion sur les objectifs du projet qui est consultable en annexe où nous avons analysé le sujet. La réflexion a permis de cerner les objectifs du projet avant d’effectuer un entretien avec le client afin d’éviter de réaliser une application qui ne correspond pas à ses besoins. Par cette analyse, nous avons pu organiser le travail au sein du groupe.

Cette analyse comprend entre autres la répartition des postes :

- Chef de projet : Félix Denis - Développeur spécialiste : Maxence Hamel - Testeur / Rapporteur : Pierre Ribet - Secrétaire / Rédacteur : Steeve Boucher

Le chef de projet (Félix) avait pour objectif de coordonner l’ensemble du projet, de ses membres et des activités. Il a assuré une bonne répartition du travail pour que tout le monde soit occupé. Il a aussi rassemblé tous les éléments au sein du projet pour avoir une vision d’ensemble.

Le développeur spécialiste (Maxence) s’est focalisé sur les éléments du code plus complexes. Il a été le coordinateur du code. Il a été aidé par Pierre et Félix.

Le testeur (Pierre) a dû essayer les différentes versions de l’application, permettant de déceler les erreurs de programmation. Pour cela, il a pris temporairement le rôle du client, et a observé si l’application respectait le cahier des charges ou non. Il s’est assuré aussi de la propreté et de la clarté du code. Il a aussi développé de son côté les deux scripts Shell pour faciliter l’expérience utilisateur.

Le rédacteur a retranscrit à l’écrit les différents événements du projet. Il a aussi rédigé les notices d’utilisation. Il a aussi en charge la rédaction du rapport de projet (en collaboration avec les autres membres du groupe). Il a aussi aidé le chef de projet à rédiger le code CSS pour la mise en page du programme.

Analyse du sujet pour cerner les différents points à prendre en considération

Le fichier de réflexion sur le projet dans lequel nous avons mis la définition des éléments d’une PréAO contient aussi, notre définition d’une PréAO avec ce qu’elle contient et sous quelle forme.

Par la suite, nous avons défini le degré de complexité selon les éléments à intégrer (le titre, les paragraphes, les listes, les tableaux, les liens, etc..) et, pour finir, le choix d’un logiciel que nous avons présenté à l’oral à la fin du projet et nous aidant du logiciel de PréAO.


Rencontre avec le client

Dans un deuxième temps, une rencontre avec le client a eu lieu. Cette entrevue a permis de poser des questions sur le projet, pour mieux maitriser le sujet et bien assimiler les demandes afin d’éviter de potentielles erreurs dans les fonctionnalités tels que les listes à puce.

Réalisation d’un cahier des charges pour le client

Ensuite, nous avons rédigé notre propre cahier des charges (avec les éléments communiqués par le client et par le sujet). Cet exercice nous a entrainé à concrétiser nos idées de départ sur ce projet. Par la suite, un cahier des charges donné par le client a été distribué. Ainsi, nous partions tous sur un pied d’égalité avec les objectifs précis du client. La phase de recherche d’éléments pour notre présentation a alors commencé.

Dès cet instant, la phase de conception a aussi débuté et s’est terminée au moment où l’application devait être rendue. La soutenance et la présentation du logiciel choisi ont suivi.

Outils

Un navigateur Web

Nous avons fait appel à plusieurs outils pour concevoir l’application. Pour toutes les recherches documentaires, nous avons tout simplement utilisé un navigateur internet, qui nous a aussi aidé à rechercher des solutions pour la conception de l’application.

Un serveur FTP maison : Filezilla

Ensuite, pour faire circuler les fichiers de l’application entre les différents membres du groupe, nous avons utilisé un serveur FTP, un cloud simplifié. Pour ce faire, Félix a hébergé sur un pc personnel un serveur. Il a utilisé Filezilla Serveur. Grâce à un identifiant et un mot de passe, nous avons pu accéder à ce serveur depuis l’IUT par l’explorateur de fichier très simplement. Pour les membres travaillant sous un environnement Windows ou Mac OS, nous avons utilisé le logiciel client du même éditeur : Filezilla.


Capture d’écran de Filezilla

Une interface shell pour aider l’utilisateur à réaliser sa présentation

Le but de notre application est de transformer un fichier de données rédigées par un utilisateur en un diaporama basé sur des pages HTML/CSS. Pour faciliter l’expérience utilisateur, nous avons développé deux scripts : un pour Windows et un pour Linux. C’est une interface permettant d’entrer des données par l’utilisateur comme son nom, le nom de sa présentation, etc. Il peut, s’il le souhaite, afficher le manuel d’utilisation. Donc, nous avons utilisé deux langages : le Shell pour interagir avec l’utilisateur, et le langage Java pour réaliser les fonctionnalités de l’application.

Un logiciel de code : Sublime Text

Pour concevoir l’application, nous avons utilisé le langage Java. Pour rédiger le code source de l’application, nous avons utilisé Gedit (sur linux) et Sublime Text (Windows et Mac OS). Ces outils sont de simples traitements de texte qui permettent de programmer sous différents langages. On peut citer par exemple Java, HTML/CSS, PHP… Ressemblant à un éditeur de texte basique, ils ont l’avantage de colorer le texte comme le montre l’exemple ci-après, souligner les erreurs, les oublis. Ce qui lui donne l’avantage de pouvoir différencier facilement les signes de calculs, les variables, les commentaires… contrairement au très connu Notepad de Windows qui écrit noir sur blanc.


Capture d’écran de SublimeText

Des ressources informationnelles et techniques

Nous avons aussi eu l’aide des cours de programmation, d’expression-communication ou encore de Projet Personnel et Professionnel pour la cohésion et l’entente du groupe. Nous avons utilisé les cours de programmation Java pour les parties du programme portant sur les tableaux simples et doubles dimensions et celles sur le traitement des fichiers de données.

De plus, nous avons usé de plusieurs ressources. Internet fut d’une grande aide pour les questions techniques grâce aux sites tels que StackOverflow ou encore OpenClassroom. Ces sites avaient pour but d’améliorer nos programmes avec des fonctionnalités qui nous étaient à ce moment-là inconnues telles qu’une fonctionnalité d’auto-incrémentations de puces numérotés, réalisés grâce à l’éditeur de style CSS plutôt qu’avec le générateur de PréAO. En effet, nous avons rencontré quelques difficultés avant de trouver cette solution. On a alors pu simplifier aussi des morceaux de code. Ainsi, ça nous permettait d’acquérir de nouvelles connaissances dans les langages de programmation Java et HTML/CSS.

Nos professeurs nous ont aussi soutenus dans ce projet et notamment en répondant à des questions portant sur les foncions de la PréAO qui pouvait demander une explication supplémentaire.


Les apprentissages

Dans la gestion de projet

Ce projet nous a bien entendu permis de développer, de confirmer quelques compétences en gestion de projet. Voici le détail de leur évolution durant ce projet.

L’analyse des besoins pour définir les activités

Précisons tout d’abord que nous n’avions pas le cahier des charges dès le début du projet.

Avant ce projet, l’analyse des besoins se faisait, pour nous, par le simple fait de lire un cahier des charges pré-fait. Alors que pour celui-ci, nous avions un rendez-vous avec un professeur, qui jouait le rôle du client. Nous avons donc préparé en amont nos questions, ce qui a permis une meilleure compréhension des attentes et ainsi de bien commencer le projet. Ainsi, nous ne nous sommes pas plongés dès le départ dans du code pour n’en ressortir qu’en fin de projet. Ce temps de réflexion a été précieux pour la coordination du groupe et la répartition des tâches par la suite.

Finalement, cette situation de rendez-vous avec un client nous a mis dans une situation plus réelle de projet et nous a permis de nous faire une expérience plus concrète sur le monde de l’entreprise.

Construire et planifier les activités

La répartition des tâches s’est faite assez naturellement puisque 3 membres du groupe (Félix, Steeve et Maxence) avaient précédemment travaillé ensemble et donc connaissaient leurs compétences. Et, pour le 4ème membre (Pierre), c’est en se basant sur ses précédentes expériences que nous avons ensemble choisi son rôle. Grâce à une bonne répartition des rôles, notre communication dans le groupe a été très bonne.

Vient ensuite le temps de la planification des activités. Cette dernière étant déjà fourni ou plutôt suggérée, car nous avions un planning avec des délais de rendus à respecter. Aussi, nous avons ajouté quelques moments butoir dans les étapes du projet : ce qui nous permettait de savoir l’avance ou le retard que nous avions pris. Puis, nous avons ajouté des temps de partager sur les avancées de chacun.

Durant nos précédents projets nos avons toujours respecté le planning et ça a aussi le cas cette fois.


Conduire et piloter

Chaque début de journée commençait par un bilan de la veille et par un test complet de la dernière version fonctionnelle de notre programme. Nous avions donc adopté un système de versionning, c’est-à-dire qu’à chaque nouvelle fonctionnalité ajoutée nous passions à la version suivante (pour un total de 10 versions à la fin du projet). Par souci de sécurité, les versions étaient sauvegardées sur nos ordinateurs et sur le serveur FTP.

Pour cela, la bonne cohésion de groupe était primordiale. Il fallait mettre en commun tous nos avancements pour faire d’une version éclatée, une version complète et parfaitement fonctionnelle.

Clôturer et évaluer

C’est encore une fois la communication qui a été utilisé dans cette partie. En effet la rédaction de la documentation demandait la même compréhension du programme pour tous et donc une explication commune réalisée en fin de projet.

Dans la technique

Par choix mais aussi et surtout car nos connaissances sont limitées en langage de programmation, nous avons choisi d’adopter le langage java comme langage principal et unique. C’est donc évidemment en java que nos compétences ont le plus évolué.

La principale évolution se trouve dans la lecture et l’écriture de fichier via un programme java. Ci-dessous la justification de ces deux compétences dans notre projet.

Justification

Ce schéma ci-contre illustre parfaitement l’utilité d’une lecture et d’une écriture de fichier. En effet l’étape 1 du projet consistait à lire le fichier source, qui se trouvait être un fichier texte tout simple, pour ensuite le traiter avec le générateur java. Puis l’étape 2, c’est ici que nous générons les diapositives en HTML donc dans des fichiers HTML qu’il fallait créer et remplir selon les envies de l’utilisateur.

Nous voyons bien que l’entièreté du projet reposait sur ces deux compétences réunies et non dissociées puisque si l’une d’elle n’était pas maitrisée alors le projet n’aurait pas pu aboutir.

Fichier source Générateur en

java

Diapositive en

HTML Étape 1 Étape 2

Schéma de simplification du projet


Vient ensuite comme deuxième évolution dans nos connaissances, le traitement d’une chaîne de caractères. L’utilisateur ne rentrant que des lignes simples dans le fichier source (par exemple : « PS:Voici un paragraphe simple »), il fallait réussir à séparer le texte de l’utilisateur des indications sur la nature du texte qui ne devaient pas apparaître sur la diapositive.

Exemple de traitement

Voici une ligne que l’utilisateur peut rentrer : « PS:Ceci est le titre de mon premier paragraphe ».

Il fallait ensuite transformer cette ligne par le code HTML suivant : « Ceci est le titre de mon premier paragraphe ».

Tout de suite nous voyons que le « PS: » a disparu car il n’était là que pour nous préciser la nature du texte suivant les deux points pour être ensuite remplacé par « » et « » qui sont la traduction d’un paragraphe simple en HTML.

Voilà pourquoi, à travers de cet exemple, la nécessité de connaissances en traitement d’une chaîne de caractères était requise.

Les compétences secondaires telles que les boucles, les tableaux ou les conditions ont aussi évolué mais étant déjà bien acquises pour tout le groupe elles se sont confirmées.


Évaluation du générateur PréAO

Les difficultés rencontrées

Pour le technique :

Quelques problèmes sont survenus lors d’ajouts de nouvelles fonctionnalités. Notamment, la numérotation des listes à puces a été difficile, il fallait gérer le cas où le texte que nous étions en train de traiter était ou non le dernier élément de la liste qu’il compose avec ses prédécesseurs. En effet selon les cas nous devions fermer ou non les balises* HTML qui représentent une liste à points.

*une balise HTML est en quelque sorte un indicateur, pour le site web, sur le texte qu’elles encadrent. Par exemple pour un paragraphe les balises sont pour l’ouverture et pour la fermeture. Avec ceci le texte « Bonjour » codé comme ceci « Bonjour » revient à dire que Bonjour est un paragraphe.

Ensuite il y a eu le passage d’une diapositive à plusieurs. En effet, jusqu’à la version 6, nous avons travaillé sur une unique diapositive. Il a donc été nécessaire de se réunir pour adopter une méthode efficace et rapide pour opérer ce passage sans qu’il soit pour autant être une source interminable d’erreurs. Et, après une après-midi de codage, nous avons pu sortir une version presque fonctionnelle.

Pour le social :

Nous n’avons pas vraiment rencontré de problème de communication ou de compréhension. Le groupe a tout de suite été efficace et soudé. Alors certes il y a eu quelques mésententes sur certaines stratégies pour le codage ou la rédaction des documents. Mais tous ces petits problèmes étaient temporaires et se calmaient avec de la communication et de l’écoute de la part du groupe.

Les points forts

Premièrement, notre projet est simple d’utilisation puisqu’en parallèle à notre générateur nous avons développé un programme qui permet à l’utilisateur, en lançant juste ce dernier via un double clic, de configurer entièrement son diaporama. En effet, ce programme lui demande son nom et son prénom pour qu’ils soient affichés en bas des diapositives. Il demande aussi un nom de dossier pour ranger tous les fichiers relatifs au diaporama afin d’éviter de se retrouver avec plusieurs dizaines de fichiers sur son bureau. Il ouvre aussi un fichier source vide portant le nom qu’il a demandé et avec l’éditeur de texte par défaut. Et pour finir, nous pouvons rentrer le nom de notre navigateur préféré et notre diaporama fini sera alors ouvert dès la fin de sa création avec ce navigateur.


Il est aussi très facile de naviguer dans le diaporama puisque le sommaire à gauche est complétement cliquable ce qui permet si nous le souhaitons de passer de la diapositive 1 à la 5 en un clic sans avoir besoin de passer toutes les diapositives entre la première et la cinquième.

L’apparence du diaporama est personnalisable à souhait, puisque dans la documentation il est expliqué comment modifier selon nos envies le fichier CSS qui est responsable de l’apparence des diapositives. Ce dernier a aussi été agencé de telle manière que les éléments modifiables soient mis en évidence avec un commentaire explicatif.

Notre générateur gère soit une image seule ou alors une galerie d’images se présentant sous la forme d’un cadre d’image avec deux flèches pour passer les images au fil de la présentation.

Si jamais l’utilisateur rentre trop de texte pour une seule diapositive le texte ne sera pas coupé mais une barre de défilement apparaitra sur la droite permettant de descendre sur la page pour avoir accès au texte caché. Il en va de même pour les images qui seront redimensionnées pour qu’elles ne deviennent pas le fond d’écran de la diapositive cachant tous les autres éléments de la page.

Les points à améliorer

Nous pensons que l’ergonomie de nos diapositives est le principal point à améliorer et plus particulièrement celle de sommaire sur la gauche des diapositives. En effet si les titres servants au sommaire sont longs alors la ligne du sommaire va déborder tout en allongeant ce dernier. Il faudrait donc revoir la disposition du sommaire.

Quant au deuxième point à améliorer, il s’agirait selon nous des galeries d’images. Ces dernières peuvent, en fonction de la taille des images que l’utilisateur souhaite insérer sur sa diapositive, passer de la taille d’un timbre à la taille d’un fond d’écran pour cinéma en caricaturant. Nous devrions donc rajouter une fonction qui détecterait la taille des images pour les redimensionner en une taille unique. En effet, lors de notre présentation orale, les images étaient souvent trop petites et donc illisibles.


Conclusion

Cette semaine a été pour nous très enrichissante. On a pu découvrir le travail de groupe à travers un projet. Au travers de prises d’initiatives, comme l’ajout d’une interface qui aide l’utilisateur à créer sa présentation, le respect de chaque membre de notre groupe, l’écoute, on a pu réaliser un produit assez stable qui répondait à la plupart des critères du client dans une bonne ambiance de travail.

De plus, cette PréAO a permis de mettre en lien nos connaissances au service d’un projet concret. Chacun avait des connaissances plus poussées dans un domaine et donc le travail d’équipe se résume en un mot : la coordination.

Réalisant que certains points de notre projet ne correspondaient pas exactement aux attentes du client comme les listes à puces que nous avons transformées en listes numérotées. Nous avons aussi constaté que des améliorations visuelles pouvaient s’imposer (structure de la page, boite d’animations).

Toutefois, l’écoute et la coordination du groupe ont permis de réaliser nos objectifs rapidement comme la transformation d’un diaporama d’une diapositive à plusieurs et ce, en une après-midi. Une autre réussite dont nous sommes fiers est le programme de lancement qui guide l’utilisateur dans la réalisation de son projet. Comme spécifié dans le cahier des charges, nous avons rendu possible la modification du style de diaporama. Les couleurs, les tailles d’écriture… sont expliquées dans le fichier « style.css ».

Nous avons conclu que si c’était à refaire, nous nous donnerions plus de temps à une phase de test final pour déceler les erreurs, notamment dans les fichiers générés en HTML, fichiers servants à afficher les diapositives.