O
pen
A
rchive
T
OULOUSE
A
rchive
O
uverte (
OATAO
)
OATAO is an open access repository that collects the work of Toulouse researchers and
makes it freely available over the web where possible.
This is an author-deposited version published in :
http://oatao.univ-toulouse.fr/
Eprints ID : 13341
To cite this version :
Noël, Lucien. Développement d’une application en ligne
d’ostéologie comparée. Thèse d'exercice, Médecine vétérinaire,
Ecole Nationale Vétérinaire de Toulouse - ENVT, 2015, 53 p.
Any correspondance concerning this service should be sent to the repository
administrator: staff-oatao@inp-toulouse.fr.
ANNEE 2015 THESE : 2015 – TOU 3 – 4004
DÉVELOPPEMENT D'UNE APPLICATION EN
LIGNE D'OSTÉOLOGIE COMPARÉE
_________________
THÈSE
pour obtenir le grade de DOCTEUR VÉTÉRINAIRE
DIPLÔME D’ÉTAT
présentée et soutenue publiquement le 16 janvier 2015 devant l’Université Paul-Sabatier de Toulouse
par
NOËL Lucien
Né le 16 décembre 1988 à Montbéliard (25)
___________
Directeur de thèse : M. Giovanni MOGICATO
___________JURY
PRESIDENT :
Mme Isabelle BERRY
ASSESSEURS :
Ministère de l'Agriculture de l’Agroalimentaire et de la Forêt
ECOLE N ATION AL E VETERIN AIRE DE TOULOUSE
Directeur : M. Alain MILON
PROFESSEURS CLASSE EXCEPTIONNELLE
M. AUTEFAGE André, Pathologie chirurgicale
Mme CLAUW Martine, Pharmacie-Toxicologie
M. CONCORDET Didier, Mathématiques, Statistiques, Modélisation
M. CORPET Denis, Science de l'Aliment et Technologies dans les Industries agro-alimentaires
M DELVERDIER Maxence, Anatomie Pathologique
M. ENJALBERT Francis, Alimentation
M. FRANC Michel, Parasitologie et Maladies parasitaires
M. MARTINEAU Guy, Pathologie médicale du Bétail et des Animaux de Basse-cour
M. PETIT Claude, Pharmacie et Toxicologie
M. REGNIER Alain, Physiopathologie oculaire
M. SAUTET Jean, Anatomie
M. SCHELCHER François, Pathologie médicale du Bétail et des Animaux de Basse-cour
PROFESSEURS 1° CLASSE
M. BERTHELOT Xavier, Pathologie de la Reproduction
M. BOUSQUET-MELOU Alain, Physiologie et Thérapeutique
M. DUCOS Alain, Zootechnie
M. FOUCRAS Gilles, Pathologie des ruminants
M. LEFEBVRE Hervé, Physiologie et Thérapeutique
PROFESSEURS 2° CLASSE
M. BAILLY Jean-Denis, Hygiène et Industrie des aliments
Mme BENARD Geneviève, Hygiène et Industrie des Denrées alimentaires d'Origine animale M. BERTAGNOLI Stéphane, Pathologie infectieuse
M. BRUGERE Hubert, Hygiène et Industrie des aliments d'Origine animale
Mme CHASTANT-MAILLARD Sylvie, Pathologie de la Reproduction
Mme GAYRARD-TROY Véronique, Physiologie de la Reproduction, Endocrinologie M. GUERRE Philippe, Pharmacie et Toxicologie
Mme HAGEN-PICARD Nicole, Pathologie de la Reproduction M. JACQUIET Philippe, Parasitologie et Maladies Parasitaires
M. LIGNEREUX Yves, Anatomie
M MEYER Gilles, Pathologie des ruminants M. PICAVET Dominique, Pathologie infectieuse
M. SANS Pierre, Productions animales
Mme TRUMEL Catherine, Biologie Médicale Animale et Comparée
PROFESSEURS CERTIFIES DE L'ENSEIGNEMENT AGRICOLE
Mme MICHAUD Françoise, Professeur d'Anglais M SEVERAC Benoît, Professeur d'Anglais
MAITRES DE CONFERENCES HORS CLASSE
M. BERGONIER Dominique, Pathologie de la Reproduction
Mlle BOULLIER Séverine, Immunologie générale et médicale
Mme BOURGES-ABELLA Nathalie, Histologie, Anatomie pathologique Mlle DIQUELOU Armelle, Pathologie médicale des Equidés et des Carnivores
M. JOUGLAR Jean-Yves, Pathologie médicale du Bétail et des Animaux de Basse-cour
Mme LETRON-RAYMOND Isabelle, Anatomie pathologique M. LYAZRHI Faouzi, Statistiques biologiques et Mathématiques M. MATHON Didier, Pathologie chirurgicale
Mme PRIYMENKO Nathalie, Alimentation
MAITRES DE CONFERENCES (classe normale)
M. ASIMUS Erik, Pathologie chirurgicale
Mme BENNIS-BRET Lydie, Physique et Chimie biologiques et médicales
Mlle BIBBAL Delphine, Hygiène et Industrie des Denrées alimentaires d'Origine animale Mme BOUCLAINVILLE-CAMUS Christelle, Biologie cellulaire et moléculaire
Mlle CADIERGUES Marie-Christine, Dermatologie M. CONCHOU Fabrice, Imagerie médicale
M. CORBIERE Fabien, Pathologie des ruminants
M. CUEVAS RAMOS Gabriel, Chirurgie Equine
Mme DANIELS Hélène, Microbiologie-Pathologie infectieuse Mlle DEVIERS Alexandra, Anatomie-Imagerie
M. DOSSIN Olivier, Pathologie médicale des Equidés et des Carnivores
Mlle FERRAN Aude, Physiologie
M. GUERIN Jean-Luc, Elevage et Santé avicoles et cunicoles
M. JAEG Jean-Philippe, Pharmacie et Toxicologie
Mlle LACROUX Caroline, Anatomie Pathologique des animaux de rente Mlle LAVOUE Rachel, Médecine Interne
M. LIENARD Emmanuel, Parasitologie et maladies parasitaires M. MAILLARD Renaud, Pathologie des Ruminants
Mme MEYNAUD-COLLARD Patricia, Pathologie Chirurgicale M. MOGICATO Giovanni, Anatomie, Imagerie médicale
M. NOUVEL Laurent, Pathologie de la reproduction (en disponibilité)
Mlle PALIERNE Sophie, Chirurgie des animaux de compagnie
Mlle PAUL Mathilde, Epidémiologie, gestion de la santé des élevages avicoles et porcins Mme PRADIER Sophie, Médecine interne des équidés
M. RABOISSON Didier, Productions animales (ruminants)
Mme TROEGELER-MEYNADIER Annabelle, Alimentation
M. VOLMER Romain, Microbiologie et Infectiologie (disponibilité à cpt du 01/09/10)
M. VERWAERDE Patrick, Anesthésie, Réanimation
Mme WARET-SZKUTA Agnès, Production et pathologie porcine
MAITRES DE CONFERENCES et AGENTS CONTRACTUELS
M. BOURRET Vincent, Microbiologie et infectiologie M. DAHAN Julien, Médecine Interne
Mme FERNANDEZ Laura, Pathologie de la reproduction
ASSISTANTS D'ENSEIGNEMENT ET DE RECHERCHE CONTRACTUELS
REMERCIEMENTS
À notre président de thèse,
Madame Isabelle Berry
Professeur à l’Université Toulouse III – Paul Sabatier
CHU Toulouse – Pôle imagerie médicale – Médecine nucléaire
Qui nous a fait l’honneur de présider notre jury de thèse,
Hommages respectueux.
À notre jury de thèse,
Monsieur Giovanni Mogicato
Maître de conférences à l’École Nationale Vétérinaire de Toulouse
Unité pédagogique Anatomie – Imagerie médicale
Qui nous a fait l’honneur de diriger cette thèse,
Hommages respectueux.
Madame Alexandra Deviers
Maître de conférences à l’École Nationale Vétérinaire de Toulouse
Unité pédagogique Anatomie – Imagerie médicale
Qui nous a fait l’honneur de prendre part à notre jury de thèse,
Sincères remerciements.
À l'Unité Pédagogique d’Anatomie – Imagerie médicale de l’École
Nationale Vétérinaire de Toulouse
À Giovanni Mogicato,
Qui en me proposant ce travail, m’a permis de concilier mes deux
passions.
À mes prédécesseurs,
Les Docteurs Lemoine de Vernon, Gaillard, Etchepareborde et
Sesquière,
Pour leur héritage numérique, sans lequel ce travail n’aurait pas vu
le jour.
À la communauté du Site du Zéro,
Grâce à laquelle j’ai acquis les compétences nécessaires pour
développer cette application.
À mon amour,
Ingrid, sans qui ce travail ne serait pas ce qu’il est,
Pour ton indéfectible soutien, ton temps, ton aide et tes conseils
précieux.
À ma famille,
Pour votre amour et votre soutien.
À mon père parti trop tôt…
À mes amies et amis,
De l’école et d’avant, qui sauront se reconnaitre ici,
Pour tous les bons moments passés, votre présence et votre soutien.
SOMMAIRE
SOMMAIRE ... 1
TABLE DES ILLUSTRATIONS ... 3
INTRODUCTION ... 5
PARTIE I GUIDE DE L’UTILISATEUR DE L’APPLICATION WEB ... 7
1 Démarrage ... 8 1.1 Prérequis ... 8 1.2 Chargement de l’application ... 8 1.3 Mode hors-connexion ... 9 2 Prise en main ... 9 2.1 Zone d'affichage ... 9 2.2 Barre de navigation ... 13
PARTIE II GUIDE DE L’ADMINISTRATEUR DE L’APPLICATION WEB ... 19
1 Démarrage ... 20
1.1 Prérequis ... 20
1.2 Chargement de l’application ... 20
2 Instructions d’utilisation ... 21
2.1 Page d’accueil (gestion des espèces) ... 21
2.2 Page d’édition des données d’une espèce ... 23
PARTIE III DÉVELOPPEMENT PRATIQUE DE L’APPLICATION WEB ... 37
1 Technologies et langages informatiques utilisés ... 38
1.1 PHP, MySQL et JSON ... 38 1.2 HTML5 et CSS3 ... 38 1.3 JavaScript ... 39 1.4 Environnement de développement ... 39 2 Organisation de l’information ... 39 2.1 Structure du squelette ... 39 2.2 Images ... 42 2.3 Légendes et liaisons ... 42
3 Conception de l’outil de gestion de l’application ... 43
3.3 Chiffres ... 44
3.4 Résultat ... 44
4 Conception de l’application utilisateur ... 45
4.1 Objectif ... 45 4.2 Développement ... 45 4.3 Chiffres ... 47 4.4 Résultat ... 47 PARTIE IV DISCUSSION... 49 1 Intérêt de l’application ... 50
1.1 Une application destinée à un large public ... 50
1.2 Avantage d’une application en ligne en ostéologie ... 50
2 Pérennité de l’application, limites et évolutions possibles ... 51
2.1 Des technologies qui évoluent rapidement ... 51
2.2 Limites de l’application ... 52
2.3 Un support pour d’autres disciplines ... 52
CONCLUSION ... 53
TABLE DES ILLUSTRATIONS
Figure 1 - Capture d'écran de la page d'accueil de l'application ... 9
Figure 2 - Capture d'écran présentant les boutons de sélection des vues – Chien, tête, vue latérale. 10 Figure 3 - Transition entre la vue ventrale de la tête et sa vue rostrale ... 11
Figure 4 - Mise en surbrillance des éléments au passage de la souris ; de gauche à droite : tête, colonne vertébrale, thorax - Chien, squelette axial, vue latérale. ... 12
Figure 5 - Transition entre le membre thoracique et l'humérus - Chien, humérus, vue latérale ... 12
Figure 6 - Bouton de sélection de l'espèce et son menu ... 13
Figure 7 - Bouton de sélection de l'espèce et son menu en mode « comparaison d'espèce» ... 14
Figure 8 - Chemin vers l'élément étudié – Chien, zoom de l’épiphyse proximale de l’humérus, vue latérale ... 14
Figure 9 - Sous-menu permettant d'accéder directement aux éléments disponibles depuis le membre thoracique – Chien, zoom sur l’épiphyse proximale de l’humérus, vue latérale. ... 15
Figure 10 - Sous-menu permettant d'accéder aux éléments disponible depuis le squelette avec la navigation simplifiée activée – Chien, squelette entier, vue latérale. ... 16
Figure 11 - Affichage dans le chemin, des éléments supprimés en navigation simplifiée. Les boutons sont grisés et non cliquables – Chien, humérus, vue latérale. ... 16
Figure 12 - Bouton de sélection des vues et son sous-menu – Chien, tête, vue latérale. ... 17
Figure 13 - Page de gestion des espèces ... 21
Figure 14 - Menu de sélection d'une nouvelle espèce ... 22
Figure 15 - Page d'édition d'une espèce – Chien, squelette, vue latérale ... 23
Figure 16 - Recadrage d'un élément – Chien, tête, vue caudale ... 25
Figure 17 - Insertion d’une nouvelle légende – Chien, tête, vue dorsale ... 26
Figure 18 - Survol de la légende « fosse temporale » avec la souris – Chien, tête, vue latérale ... 27
Figure 19 - Modification d'une légende – Chien, tête, vue latérale ... 28
Figure 20 - Apparence des légendes dont le libellé n'a pas encore été placé – Chien, tête, vue latérale ... 28
Figure 21 - Disposition des libellés des légendes – Chien, tête, vue latérale ... 29
Figure 22 - Onglet liaisons – Chien, squelette axial, vue latérale ... 30
Figure 23 - Étape de détourage du crâne – Chien, squelette axial, vue latérale ... 31
Figure 24 - Le zoom permet d'améliorer la précision du détourage – Chien, squelette axial, vue latérale ... 32
Figure 25 - Positionnement de la vue latérale de la tête par rapport au squelette axial – Chien, squelette axial, vue latérale ... 33
Figure 26 - Positionnement de la vue rapprochée de l'épiphyse proximale de l'humérus – Chien, humérus, vue caudale ... 34
Figure 27 - Positionnement d'un trait de section – Chien, crâne, vue latérale ... 34
Figure 28 - Menu utilisateur en haut à droite ... 35
Figure 29 - Extrait de la table SQL "elements" ... 40
Figure 30 - Extrait de la table SQL "vues" ... 40
Figure 31 - Extrait du fichier JSON qui décrit la structure du squelette ... 41
Figure 35 - Un cube est utilisé pour modéliser les relations topographiques entre les vues ... 46 Figure 36 - Extrait du code CSS définissant la transition entre les vues (lignes 1 à 10) et décrivant comment est affichée la vue médiale (ligne 11 à 19). ... 47
INTRODUCTION
Parmi les divisions anatomiques qui font appel à la visualisation et à la représentation dans l’espace, figurent l’ostéologie. L’enseignement de cette science fondamentale est susceptible de profiter des technologies informatiques.
Depuis toujours, l’image tient une place prépondérante dans l’apprentissage de cette discipline. Les ouvrages de références, comme « Anatomie comparée des mammifères domestiques – Tome 1 : ostéologie » de Robert Barone [1] offrent une part importante à l’illustration. Les photographies, donnant une dimension plus concrète et attractive au lecteur, sont la base de nombreux atlas, tels que « Atlas of canine anatomy » [2], Color atlas of veterinary anatomy : the dog and cat » [3], « A color atlas of the clinical anatomy of the dog and cat » [4] ou encore « Atlas d’anatomie du chien et du chat » [5, 6, 7].
Entre 2002 et 2006, un logiciel d’ostéologie comparée très complet, « la Générale des Os », a été élaboré dans le cadre de plusieurs travaux de thèse de doctorat vétérinaire [8, 9, 10, 11]. Les étudiants participants à ce projet ont réalisé un travail considérable de dissection et de traitement des os, de photographies, de retouche des images, et de conception du programme. Cependant, au moment de sa conception, certaines technologies étaient moins facilement accessibles qu’aujourd’hui, diminuant le champ des possibilités par rapport à ce qu’il est envisageable de concevoir dans le cadre d’un travail de thèse. Par ailleurs, ce logiciel n’est compatible qu’avec le système d’exploitation Windows XP, dont peu de personnes disposent dorénavant, et qu’il est de toute façon déconseillé d’utiliser pour des raisons de sécurité.
Il nous a semblé intéressant de construire un outil pédagogique disponible librement et simplement, qui permettent d’apprendre l’ostéologie spéciale de façon ludique et agréable.
Une application Web, ou application en ligne, est une application informatique manipulable grâce à un navigateur Web. Elle ne nécessite aucune installation et est utilisable directement en se rendant sur le site Web, ce qui la rend facilement accessible.
En nous appuyant sur le logiciel « la Générale des Os » – notamment sur sa base de plus de 1 300 photographies – et en profitant des technologies Web récentes (HTML5/CSS3 et Javascript), nous avons conçu une application permettant à l’utilisateur de parcourir le squelette de façon intuitive. Lors du développement de cette application, l’accent a été mis sur l’ergonomie, pour que l’exploration du squelette soit la plus intuitive possible. Des transitions entre les différentes photographies (rotations, zoom…) facilitent la compréhension de la topographie. Une place importante est laissée à l’image, de sorte que l’outil informatique se fait oublier.
Cette application s’appuie sur une base de données qui contient les photographies, les légendes et la traduction informatique des liens topographiques qui existent entre les images. Nous avons conçu un outil d’administration de cette base de données, qui permet de la compléter et de la modifier sans connaissances techniques.
Nous exposerons dans une première partie la présentation de l’application Web et son utilisation. Dans une seconde partie, nous détaillerons le fonctionnement de l’outil d’administration. La troisième partie
expliquant les choix qui ont été faits. Enfin, dans une quatrième partie, nous ferons une analyse critique de cette application.
PARTIE I
1 Démarrage
1.1 Prérequis
Pour utiliser l’application, il faut un ordinateur (tous systèmes d’exploitation) connecté à Internet, sur lequel est installé un navigateur Web récent.
L’application est compatible avec les navigateurs Web suivants :
Google Chrome, versions 12 et ultérieures [12]
Mozilla Firefox, version 10 et ultérieures [13]
Safari, version 4 et ultérieures [14]
Opera, version 15 et ultérieurs [15]
À ce jour, la dernière version d’Internet Explorer (version 11) [16] ne prend pas en charge toutes les technologies nécessaires au bon fonctionnement de l’application. Il est déconseillé d’utiliser ce navigateur pour faire fonctionner le programme.
1.2 Chargement de l’application
L’accès à l’application se fait en ouvrant l’URL suivante avec un navigateur Web compatible : http://www.anatimagerie-envt.fr/enseignement/osteologie-comparee/.
Une fois le site Web ouvert, l’application se charge en quelques secondes. La page d’accueil s’ouvre sur une vue latérale du squelette du chien.
Figure 1 - Capture d'écran de la page d'accueil de l'application
L’application se constitue d’une barre de navigation (en haut) et d’une zone d’affichage.
1.3 Mode hors-connexion
L’application est accessible sans connexion internet grâce à l’utilisation de la fonctionnalité Application
Cache d’HTML5. Lors de la première visite du site, l’ensemble des images et des fichiers nécessaires au
fonctionnement de l’application est téléchargé et stocké sur l’ordinateur. On dit que les fichiers sont mis en cache. Lors d’une visite ultérieure, l’utilisateur n’aura pas besoin d’être connecté à internet pour utiliser l’application.
L’utilisateur doit cependant rester connecté sur l’application durant le temps de chargement de tous ces fichiers pour bénéficier du mode hors-connexion. Lorsque tous les fichiers ont été mis en cache, une notification en informe l’utilisateur.
2 Prise en main
2.1 Zone d'affichage
Dans cette zone, figure la photographie de l'élément étudié, selon la vue sélectionnée, accompagnée des légendes.
2.1.1 Affichage des légendes
Une fois l’élément et la vue sélectionnés, les légendes correspondantes sont affichées. Un mode « interrogation » (cf. 2.2.4.2) permet de masquer les légendes pour contrôler ses connaissances, et de ne les afficher qu’au survol.
2.1.2 Boutons de changement de vue
Sur chacun des côtés de la vue sélectionnée, un bouton, figuré par un pictogramme évoquant une caméra, permet de sélectionner la vue adjacente. Par exemple, depuis une vue latérale de la tête, le bouton de gauche permet d'afficher la vue rostrale, et le bouton du haut permet d'afficher la vue dorsale.
Figure 2 - Capture d'écran présentant les boutons de sélection des vues – Chien, tête, vue latérale.
Au survol du bouton, une étiquette apparaît précisant le nom de la vue proposée. Si la vue n'existe pas pour cet élément, le bouton est grisé.
Lorsque l’utilisateur sélectionne une autre vue en cliquant sur le bouton, une transition en 3 dimensions est réalisée.
Figure 3 - Transition entre la vue ventrale de la tête et sa vue rostrale 2.1.3 Navigation entre les éléments
Les éléments sont organisés par lien de filiation : chaque élément a un élément parent (à l’exception du squelette entier) dans lequel il est inclus, et peut inclure lui-même des enfants. Ces éléments peuvent être des ensembles d’os (squelette appendiculaire, membre thoracique), des os ou des portions d’os. Ainsi, l’élément « Zoom épiphyse distale » de l’humérus a pour parent l’humérus, qui a pour parent le membre thoracique, ayant lui-même pour parent le squelette appendiculaire.
Lorsqu’un élément est affiché, tous ses éléments « enfants » sont accessibles directement depuis l’image affichée. Ceux-ci sont mis en évidence par surbrillance lors du survol de la souris.
Figure 4 - Mise en surbrillance des éléments au passage de la souris ; de gauche à droite : tête, colonne vertébrale, thorax - Chien, squelette axial, vue latérale.
Lorsque la souris s’arrête sur un élément, une info-bulle apparait avec le nom de l’élément survolé. Pour afficher cet élément enfant, il suffit de cliquer dessus. Une transition en opacité avec un effet de zoom est effectuée.
dernier est mis en surbrillance, avec une couleur différente. Ainsi, quand la souris s’approche d’un élément, celui-ci se colore en bleu-vert clair, puis il devient plus foncé une fois que la souris le survole. Pour revenir à l’élément parent, il suffit de faire tourner la molette de la souris vers le bas (raccourci classiquement utilisé pour effectuer un zoom arrière).
Le squelette peut donc être parcouru intégralement avec la souris sans quitter la zone d’affichage. Lorsque qu’un élément et une de ses vues sont affichés, la barre de navigation affichent les informations concernant la vue étudiée.
2.2 Barre de navigation
La barre de navigation permet de parcourir le squelette, d’accéder plus rapidement à certains éléments, et de modifier les options.
Quatre éléments composent la barre de navigation : un bouton de sélection de l’espèce, le “chemin” vers l’élément visionné, un bouton de sélection de la vue (latérale, dorsale, …), et un bouton de menu.
2.2.1 Bouton de sélection de l’espèce
Ce bouton affiche l’espèce actuellement étudiée. En cliquant dessus, la liste des espèces disponibles s'affiche.
Il suffit alors de cliquer sur une autre espèce pour voir apparaître la même vue du même élément, pour l'espèce choisie.
En mode comparaison (cf. 2.2.4.1) cette liste permet de sélectionner les deux espèces à comparer.
Figure 7 - Bouton de sélection de l'espèce et son menu en mode « comparaison d'espèce» 2.2.2 Affichage du chemin vers l'élément étudié
Comme expliqué dans le titre 2.1.3, les éléments sont organisés par liens de filiation. Le « chemin » affiche l'ensemble des éléments parcourus depuis le squelette pour arriver sur l'élément étudié.
Figure 8 - Chemin vers l'élément étudié – Chien, zoom de l’épiphyse proximale de l’humérus, vue latérale Chaque élément du chemin est un bouton qui permet d’accéder directement à l'élément
Figure 9 - Sous-menu permettant d'accéder directement aux éléments disponibles depuis le membre thoracique – Chien, zoom sur l’épiphyse proximale de l’humérus, vue latérale.
En mode navigation simplifiée (cf. 2.2.4.3), tous les éléments visibles depuis le squelette entier sont accessibles directement depuis la première vue, supprimant les éléments intermédiaires. Les éléments suivants sont donc supprimés de l’architecture : « squelette axial », « squelette appendiculaire », « colonne vertébrale », « thorax », « membre thoracique » et « membre pelvien ». Par exemple l'humérus devient accessible directement depuis le sous-menu du squelette, sans passer par les « squelettes appendiculaires » et « membre thoracique ».
Figure 10 - Sous-menu permettant d'accéder aux éléments disponible depuis le squelette avec la navigation simplifiée activée – Chien, squelette entier, vue latérale.
Toutefois, ces éléments intermédiaires apparaissent toujours dans le chemin, mais ils sont grisés et les boutons correspondants sont désactivés.
Figure 11 - Affichage dans le chemin, des éléments supprimés en navigation simplifiée. Les boutons sont grisés et non cliquables – Chien, humérus, vue latérale.
2.2.3 Bouton de sélection de la vue
Ce bouton affiche la vue actuellement étudiée pour l’élément sélectionné. Sur la partie gauche de ce bouton, le nombre de vues proposées pour l’élément est indiqué à l’intérieur d’un pictogramme évoquant une caméra.
En cliquant sur le bouton, la liste des vues disponibles pour l’élément sélectionnée est affichée.
Figure 12 - Bouton de sélection des vues et son sous-menu – Chien, tête, vue latérale.
En cliquant sur l’une des vues proposées, celle-ci est affichée. Ce menu permet d’accéder à certaines vues qui ne sont pas accessibles via les boutons de sélection de vue de la zone d’affichage. Tel est le cas des vues caudo-dorsale et cranio-dorsale de la tête.
2.2.4 Bouton du menu
Le bouton de menu permet d’afficher et de paramétrer les options disponibles. À droite de chaque option, un bouton permet de l’activer ou de la désactiver. Ces options sont désactivées par défaut.
2.2.4.1 Comparaison d’espèces
En activant cette option, la zone d’affichage est modifiée pour faire apparaitre côte à côte la même vue d’un même élément pour deux espèces. La sélection des deux espèces se fait en utilisant le bouton de sélection d’espèce (cf. 2.2.1).
2.2.4.2 Masquage des légendes
Cette option permet de masquer les légendes pour contrôler ses connaissances. Les légendes n’apparaissent qu’au survol de la souris.
2.2.4.3 Navigation simplifiée
En activant cette option, certains éléments intermédiaires entre le squelette entier et les os sont supprimés (cf. 2.2.2).
PARTIE II
GUIDE DE L’ADMINISTRATEUR DE L’APPLICATION
WEB
1 Démarrage
Note : dans cette partie, le terme « application » fait référence à l’outil de gestion de l’application Web. Pour l’application Web décrite en partie I, le terme « application utilisateur » sera utilisé.
1.1 Prérequis
L’application a été développée et testée en utilisant le navigateur Google Chrome dans sa version la plus récente. La compatibilité avec d’autres navigateurs n’est pas garantie.
Pour accéder à l’application, il faut un ordinateur connecté à internet, et accéder au site http://www.anatimagerie-envt.fr/osteologie-comparee/admin.
Un nom d’utilisateur et un mot de passe son requis pour accéder au contenu de l’application.
1.2 Chargement de l’application
Une fois le site Web de l’application chargé, l’application s’ouvre sur une page de connexion. Après s’être authentifié avec son identifiant et son mot de passe, l’administrateur est redirigé sur la page d’accueil.
2 Instructions d’utilisation
2.1 Page d’accueil (gestion des espèces)
2.1.1 Présentation de l’interface
Figure 13 - Page de gestion des espèces
Cette page présente simplement la liste des espèces pour lesquelles un fichier a été créé, avec pour chaque espèce un lien permettant d’effectuer des modifications. À côté de chaque lien figure la date de la dernière mise à jour et le nom de l’utilisateur qui l’a effectuée.
Un bouton permet d’ajouter une nouvelle espèce parmi la liste des espèces disponibles pour lesquelles un fichier n’a pas encore été créé. Les six espèces proposées sont celles traitées par le logiciel « la Générale des Os » : Bovin, Chat, Chien, Cheval, Ovin et Porc.
Figure 14 - Menu de sélection d'une nouvelle espèce 2.1.2 Ajout d’une espèce
Pour ajouter une espèce à la base de données, il suffit de cliquer sur son nom dans la liste. La base de données est modifiée en conséquence, puis l’utilisateur est redirigé sur la page d’édition des données de l’espèce nouvellement ajoutée.
2.2 Page d’édition des données d’une espèce
2.2.1 Présentation de l’interface
Figure 15 - Page d'édition d'une espèce – Chien, squelette, vue latérale
Pour chaque espèce, 217 photographies sont disponibles, issues du travail réalisé pour la conception du logiciel « la Générale des Os ». Chaque photographie correspond à une vue d’un élément du squelette. L’application permet, vue par vue, d’ajouter les légendes et de définir les liens entre les différentes vues.
1. En haut de la page, sont affichées les informations concernant la vue traitée : l’espèce, la région à laquelle appartient l’élément, le nom de l’élément duquel est tirée la vue, et le nom de la vue.
Un élément peut-être un ensemble d’os (« squelette », « squelette axial », « vertèbres thoraciques »…) ou un os. Pour chaque élément, il existe entre 1 et 14 vues. Pour les os longs, par exemple, il existe 14 vues. Six pour l’os entier (latérale, médiale, crâniale, caudale, proximale et distale), et quatre (latérale, médiale, crâniale et caudale) pour chaque épiphyse (proximale et distale).
Note : dans la partie administrateur, les vues spéciales (zooms, sections…) sont considérées comme des vues d’un élément, alors que dans la partie utilisateur, elles constituent des éléments à part entière. Dans les deux cas, le mot élément n’a qu’un sens pratique pour la manipulation des données, sans lien avec la réalité anatomique.
4. Le cadre de droite, ou « cadre légendes et liaisons » présente deux onglets : l’un pour la gestion des légendes, et l’autre pour la gestion des liaisons entre les vues.
5. Un bouton permet d’effacer l’image pour en choisir une autre, et l’autre permet de recadrer l’image.
6. Une case à cocher « Passer automatiquement à la vue suivante dès que l'image a été choisie » permet d’accélérer l’envoi des images dans le cas où l’administrateur désire ajouter d’abord toutes les images avant d’ajouter les légendes et les liaisons.
7. Une sauvegarde automatique est effectuée à chaque modification. Une zone d’information notifie l’administrateur que les modifications ont bien été enregistrées.
8. Un bouton « Rechercher » permet d’effectuer une recherche parmi les vues et les légendes pour retrouver plus rapidement une vue.
9. À droite de l’identifiant de l’administrateur, un bouton en forme de flèche permet de développer le menu utilisateur (cf. 2.2.6).
Pour chaque vue, une succession d’étapes, décrites ci-dessous, est nécessaire pour rendre l’application utilisateur pleinement fonctionnelle. Les vues peuvent être traitées dans l’ordre désiré par l’administrateur.
2.2.2 Navigation entre les vues
Pour passer d’une vue à l’autre, l’administrateur peut utiliser les flèches de navigation de part et d’autre des cadres d’affichage. Les flèches gauche et droite du clavier permettent également de faire défiler les vues.
Les touches « Page suivante » et « Page précédente » du clavier (⇞ et ⇟) permettent respectivement de passer directement à la première vue de l’élément suivant et de l’élément précédent.
Le champ qui affiche le numéro de la vue, permet de saisir directement le numéro d’une vue et d’y accéder.
Chaque fois que l’administrateur change de vue, une entrée est ajoutée à l’historique, permettant de naviguer avec les boutons « Page précédente » et « Page suivante » du navigateur.
Enfin, l’administrateur peut chercher une vue en tapant des mots-clés dans le champ de recherche. 2.2.3 Gestion des images
2.2.3.1 Ajout d’une photographie
Pour ajouter une photographie à la base de données, il suffit de cliquer sur le bouton « Choisir un fichier » puis de choisir l’image à envoyer. Les images peuvent aussi être envoyées par glisser-déposer dans le cadre de l’image. Il faut donc disposer sur son ordinateur des images utilisées pour le logiciel « la Générale des Os ».
L’image est envoyée sur le serveur dès qu’elle a été sélectionnée. Une fois sur le serveur, elle est traitée automatiquement. Une bordure noire est ajoutée pour rendre l’image carrée, puis l’image est
orientée vers la gauche. Sur les vues médiales, la partie crâniale doit être orientée vers la droite. Enfin sur les vues crâniales, la partie latérale doit être orientée à droite, et à gauche sur les vues caudales. Il peut donc s’avérer nécessaire d’effectuer des rotations ou des retournements verticaux ou horizontaux.
2.2.3.2 Recadrage de l’image
Les images proposées présentes souvent d’importantes marges noires autour de l’élément photographié. Le bouton « recadrer l’image » permet de supprimer ces marges. En cliquant sur ce bouton, le curseur de la souris est remplacé par un cadre qui permet de définir le nouveau contour de l’image. La molette de la souris permet d’augmenter ou de réduire la taille de ce cadre. En maintenant le clic-droit tout en faisant tourner la molette, on peut ralentir pour modifier plus finement la taille du cadre. L’application interdit un recadrage trop important qui entrainerait une image recadrée d’une résolution inférieure à 400 x 400 pixels.
Figure 16 - Recadrage d'un élément – Chien, tête, vue caudale
Une fois l’image ajoutée et recadrée, l’administrateur doit ajouter les légendes et configurer les liaisons entre les vues.
2.2.4 Gestion des légendes
Pour ajouter les légendes sur une vue, il faut ouvrir l’onglet « Légendes » dans le cadre légendes et liaisons. Par défaut, c’est cet onglet qui est ouvert lors du démarrage de l’application. L’ajout des légendes se fait en deux temps : l’ajout des coordonnées du point concerné par la légende, puis la disposition des libellés de légende.
2.2.4.1 Ajout des légendes
Pour ajouter une légende, il suffit de cliquer sur l’image à l’endroit où doit pointer la légende. Deux types de légendes sont disponibles : point ou zone. Les légendes de type « point » sont utilisées pour les localisations précises ; les légendes de type « zone » sont utilisées pour les légendes qui concernent une surface importante de l’image (par exemple : « corps de la mandibule). Pour passer d’un type de légende à l’autre, il faut faire un clic-central (ou « clic-molette ») avec la souris. Le curseur de la souris change alors en fonction du type de légende à ajouter : une croix pour une légende de type « point » et un petit disque pour une légende de type « zone ».
Au clic sur l’image, une boîte de dialogue s’ouvre à côté du curseur, avec un champ de texte pour saisir la légende. Si des légendes ont été ajoutées sur d’autres vues du même élément, elles apparaissent en-dessous du champ de texte, et il suffit de cliquer sur l’une d’elles pour l’ajouter à la vue traitée.
Figure 17 - Insertion d’une nouvelle légende – Chien, tête, vue dorsale
Chaque légende ajoutée sur l’image apparait dans le cadre légendes et liaisons. Au survol du libellé dans le cadre légendes et liaisons, la légende correspondante est mise en surbrillance sur l’image. Inversement, au survol d’une légende sur l’image, le texte correspondant dans le cadre légendes et liaisons est surligné.
Figure 18 - Survol de la légende « fosse temporale » avec la souris – Chien, tête, vue latérale
Il est possible de modifier une légende en cliquant sur le texte, ou de la supprimer en cliquant sur la croix à droite du texte. Il est possible de modifier le type de la légende (« point » ou « zone ») en faisant un clic-central sur la légende. La modification d’une légende impacte toutes les vues de l’élément sur lesquelles elle est présente. Il est également possible de déplacer le pointeur d’une légende par un simple glisser-déposer.
Les ouvrages permettant de compléter les légendes vue par vue sont référencés dans la bibliographie [2, 1, 17, 18, 5, 6, 7, 19].
Figure 19 - Modification d'une légende – Chien, tête, vue latérale
Une fois les pointeurs placés, il faut disposer les libellés. Les légendes dont le libellé n’a pas encore été placé, ou dont le pointeur a été déplacé depuis, apparaissent en bleu dans la liste.
2.2.4.2 Disposition des libellés de légende
Cette étape permet de disposer les libellés des légendes tels qu’ils apparaîtront dans l’application utilisateur. Il est conseillé d’effectuer cette étape une fois que toutes les légendes ont été ajoutées sur la vue. Dès qu’au moins une légende est ajoutée sur la vue, un bouton « Disposer les légendes » apparait à la fin de la liste des légendes. Cliquer sur ce bouton entraine l’ouverture d’une fenêtre en superposition sur le reste de l’application, où figure l’image dans un cadre de mêmes dimensions que celui utilisé pour l’affichage des légendes dans l’application utilisateur.
Les légendes apparaissent avec leur libellé et leur pointeur (« point » ou « zone ») et un trait reliant les deux. Une « poignée » matérialisée par un carré à l’extrémité du trait, du côté du libellé, permet de déplacer le libellé en effectuant un glisser-déposer avec la souris. Les légendes qui n’ont pas encore été disposées, ou dont le pointeur a été déplacé depuis, apparaissent en rouge ; les autres en jaune.
Figure 21 - Disposition des libellés des légendes – Chien, tête, vue latérale
Une fois tous les libellés convenablement disposés, l’administrateur peut fermer cette fenêtre en cliquant sur la croix en haut à droite.
Par ailleurs, des flèches de navigation de part et d’autre de ce cadre permettent de naviguer d’une vue à l’autre sans avoir à fermer cette fenêtre.
2.2.5 Ajout des liaisons entre éléments
Cette étape permet de configurer les liaisons topographiques qui existent entre les différentes vues. Elle est nécessaire pour que les effets de survol et les transitions soient réalisés dans l’application utilisateur.
Pour configurer ces liaisons, il faut ouvrir l’onglet liaison, en cliquant sur le bouton « Liaisons » dans le cadre légendes et liaisons.
Figure 22 - Onglet liaisons – Chien, squelette axial, vue latérale
La liaison n’est possible que si les images ont été ajoutées pour les deux vues à lier. 2.2.5.1 Les différents types de liaisons
Les liaisons à configurer sont de deux types. D’une part, il est possible de lier un élément « fils » à son élément « parent ». D’autre part, il est possible de lier une vue spéciale (zoom ou section) à une vue normale d’un élément.
Pour les liaisons « parent-enfant », deux étape son nécessaires. Il faut d’abord dessiner le contour de l’élément enfant sur l’image de l’élément parent pour que l’application utilisateur puisse détecter le survol de l’élément et le mettre en surbrillance. Puis il faut positionner la vue à lier par rapport à l’élément parent pour que l’application utilisateur puisse réaliser une transition cohérente entre les deux vues.
Pour les liaisons vers les vues spéciales, seule l’étape de positionnement est nécessaire.
Sous l’onglet « Liaisons », apparait la liste des vues à lier à la vue traitée. Il faut cliquer sur l’une d’elle pour commencer à configurer la liaison.
Une fois une liaison configurée, il est possible de l’éditer en cliquant sur son nom dans la liste, ou de la supprimer en cliquant sur la croix à droite de son nom.
Figure 23 - Étape de détourage du crâne – Chien, squelette axial, vue latérale
Lorsque le curseur est proche du premier point, ce dernier est mis en surbrillance, et un clic ferme alors le tracé.
Pour réaliser avec soin le contour, il est conseillé de zoomer sur l’image en utilisant la molette de la souris.
Figure 24 - Le zoom permet d'améliorer la précision du détourage – Chien, squelette axial, vue latérale
Une fois qu’au moins un tracé a été dessiné, l’administrateur peut passer à l’étape suivante, de positionnement de la vue liée, en cliquant sur le bouton « Continuer ».
2.2.5.3 Positionnement de la vue liée
Cette étape permet de configurer la transition avec effet de zoom entre un élément et un de ses éléments « enfants ». L’image de la vue à lier apparait en transparence par-dessus l’image de la vue traitée. Par défaut, son positionnement est verrouillé, c’est-à-dire qu’il n’est pas impacté par les mouvements de la souris. Pour le déverrouiller, il faut cliquer sur l’image ; la vue à lier suit alors les mouvements de la souris.
Il s’agit alors de faire se superposer le plus précisément possible l’image de la vue à lier à la portion lui correspondant sur la vue traitée.
Figure 25 - Positionnement de la vue latérale de la tête par rapport au squelette axial – Chien, squelette axial, vue latérale
Pour cela l’administrateur peut déplacer la vue à lier en bougeant la souris, et modifier sa taille et la faire tourner en utilisant la molette. Un clic-central permet de basculer du mode modification de taille au mode rotation (le curseur de la souris est modifié en conséquence). Maintenir le clic-droit en tournant la molette permet un réglage plus fin.
Une fois la position configurée, l’administrateur peut verrouiller celle-ci par un clic-gauche. Il peut alors cliquer sur le bouton « Terminer » pour valider cette liaison.
2.2.5.4 Positionnement des vues de type zoom et section
De la même manière que pour les liaisons entre éléments, la configuration d’un zoom ou d’une section commence en cliquant sur son nom dans la liste des liaisons.
Le détourage n’est pas nécessaire ici, car les zooms sont représentés par des carrés et les sections par des traits, qui seront définis automatiquement d’après le positionnement de la vue à lier.
Pour un zoom, le positionnement de la vue à lier se fait de la même façon que pour une liaison vers un élément « enfant ».
Figure 26 - Positionnement de la vue rapprochée de l'épiphyse proximale de l'humérus – Chien, humérus, vue caudale
Pour une section, les commandes à utiliser restent les mêmes. L’administrateur doit positionner le trait de section sur la vue traitée. La moitié de l’image de la vue à lier apparait le long du trait de coupe pour guider l’administrateur dans le positionnement.
2.2.6 Menu utilisateur
Le menu utilisateur est le menu qui se développe lorsque l’administrateur clique sur la flèche à droite de son nom d’utilisateur (en haut à droite de la page).
Ce menu propose trois boutons : « Fermer le fichier », « Effacer le cache » et « Déconnexion ».
Figure 28 - Menu utilisateur en haut à droite
2.2.6.1 Fermer le fichier
Le bouton « Fermer le fichier » permet de retourner sur la page d’accueil de l’application et de libérer l’accès au fichier, permettant à un autre administrateur de le modifier. En effet, quand le fichier est ouvert par un administrateur, il n’est pas possible de l’ouvrir en utilisant un autre compte administrateur ou depuis un autre poste. Les modifications effectuées sont automatiquement sauvegardées avant la fermeture du fichier.
2.2.6.2 Effacer le cache
Pour optimiser le temps de chargement de l’application, toutes les données récupérées lors du premier chargement sont sauvegardées localement, sur le navigateur Web de l’administrateur. Ainsi lors d’une visite ultérieure, l’application n’aura pas besoin de télécharger toutes les données de l’application si aucune modification n’a été faite par ailleurs, accélérant ainsi le temps de chargement.
Le bouton « Effacer le cache » permet de supprimer toutes ces données enregistrées localement. Il peut arriver qu’il soit nécessaire d’effectuer cette action dans le cas où, par exemple, une erreur surviendrait lors de la sauvegarde. Cette action peut faire perdre les dernières modifications qui n’auraient pas été enregistrées, mais n’a aucun impact sur les données sauvegardées sur le serveur.
2.2.6.3 Déconnexion
Ce bouton permet de se déconnecter. Au préalable, les modifications effectuées sont sauvegardées et le fichier en cours d’édition est fermé.
PARTIE III
1 Technologies et langages informatiques utilisés
Le développement d’une application Web nécessite la manipulation de plusieurs langages informatiques. Certains sont exécutés côté serveur, et d’autres côté client.
Le serveur est la machine ou sont stockées toutes les données de l’application, accessibles via une connexion internet. Le client est le navigateur de l’utilisateur, qui effectue des requêtes au serveur et reçoit des fichiers de ce dernier.
Certains de ces langages sont des langages de programmation, lesquels permettent d’exécuter des instructions. D’autres sont des langages de description.
1.1 PHP, MySQL et JSON
1.1.1 PHP
PHP [20] – pour PHP : Hypertext Processor – est un langage de programmation exécuté par le serveur. Dans le cadre de cette application, il est principalement utilisé pour effectuer des opérations de lecture et d’écriture dans la base de données et dans le système de fichiers.
1.1.2 MySQL
MySQL [21] est un logiciel de gestion de base de données exécuté par le serveur. SQL signifie « Structured Query Language » soit « langage de requête structurée ». C’est le langage utilisé pour effectuer des opérations de lecture ou d’écriture (requêtes) dans la base de données. Il est défini par la norme ISO/IEC 9075 [22].
Une base de données est organisée en tables, avec des colonnes et des entrées. Ce format est adapté pour un stockage peu volumineux et un accès rapide, mais il est peu adapté pour l’échange de données entre le serveur et le client.
1.1.3 JSON
JSON [23] – pour JavaSript Object Notation – est un format de données textuelles particulièrement adapté à l’échange de données entre différents langages de programmation. Il décrit les informations sous forme de liste ordonnées (tableaux) ou d’ensemble de paires nom / valeur (objets). Ces éléments peuvent contenir d’autres tableaux ou objets, ou des valeurs génériques comme des chaines de caractères ou des nombres.
1.2 HTML5 et CSS3
Les deux langages suivants sont standardisés par le World Wide Web Consortium [24], qui est un organisme de normalisation chargé de promouvoir la compatibilité des technologies du Web.
Concrètement, l’ensemble des éléments présents sur la page sont décrits par des balises qui peuvent s’imbriquer les unes dans les autres.
HTML5 est la dernière version d’HTML. Ce langage comprend une couche application qui permet sa manipulation par des programmes informatiques, permettant de modifier dynamiquement la structure de la page, et donc d’interagir avec l’utilisateur.
1.2.2 CSS3
CSS (Cascading Style Sheets, soit « feuilles de style en cascade ») [26] est un langage qui décrit la présentation d’un document HTML, c’est-à-dire qu’il définit la mise en page de la page Web.
Sa dernière version, le CSS3, permet également d’effectuer des transitions lorsque la mise en page est modifiée.
1.3 JavaScript
JavaScript [27] est un langage de programmation exécuté par le navigateur qui lit la page Web de l’application. C’est le langage-clé d’une application Web.
Ce langage permet de modifier dynamiquement la structure et la mise en page de la page Web, d’effectuer des requêtes vers le serveur pour récupérer des fichiers ou exécuter des scripts PHP sans recharger la page, et permet une interaction avec l’utilisateur en répondant aux commandes de la souris et du clavier.
1.4 Environnement de développement
Avant d’être mise en ligne, l’application a été développée localement grâce à la plate-forme de développement WampServer [28] qui comprend :
- Apache HTTP Server [29], un serveur HTTP (qui répond aux requêtes du navigateur en servant des fichiers)
- un serveur MySQL [21]
- un interpréteur de script PHP [20]
- phpMyAdmin [30], une application Web de gestion de la base de données MySQL
Les scripts PHP, JavaScript, HTML et CSS ont été écrits avec l’éditeur de texte Notepad++ [31].
2 Organisation de l’information
La conception d’une telle application impose d’organiser l’information qu’elle propose : noms des éléments, images proposées, légendes, liaisons entre les différentes vues. Nous allons détailler ici cette organisation.
2.1 Structure du squelette
L’application utilise deux tables dans la base de données MySQL, communes à toutes les espèces, pour décrire la structure du squelette :
- une décrivant les 46 éléments, avec notamment un identifiant, le nom de l’élément et l’identifiant de l’élément parent
Figure 29 - Extrait de la table SQL "elements"
- une autre décrivant les 217 vues, avec notamment un identifiant, l’identifiant de l’élément auquel elle appartient, son type (normal, zoom, section), une description (uniquement pour les zooms et les sections) et un code définissant l’angle de vue (« lat » pour une vue latérale, par exemple).
Une autre table permet de faire la correspondance entre le code de l’angle de vue et ses noms et ses caractéristiques géométriques.
Si ce format de données est adapté à la manipulation par un programme informatique, il l’est moins pour un humain. En effet, les liens entre les différents éléments et les correspondances entre les éléments et leurs vues se font par des identifiants numériques, ce qui rend difficile la lecture et la manipulation par un humain.
Pour construire cette base de données, nous avons d’abord créé un fichier JSON, dans lequel les éléments sont imbriqués les uns dans les autres, et pour chaque éléments, la liste des vues disponibles est lisible d’un coup d’œil sous forme de tableau.
Figure 31 - Extrait du fichier JSON qui décrit la structure du squelette
Un algorithme lit ce fichier JSON pour écrire les données sous forme de tables dans la base de données MySQL.
2.2 Images
Pour chaque espèce, un dossier dans le système de fichier est créé, destiné à contenir toutes les images pour cette espèce. Chaque image ajoutée est traitée automatiquement et quatre fichiers sont générés :
- original-image-id.png : l’image telle qu’elle a été envoyée par l’administrateur
- HD-image-id.png : l’image précédente, rendue carré par l’ajout de marges noires. Le fond noir est ensuite rendu transparent. Le recadrage est ensuite appliqué.
- 400p-tr-image-id.png : l’image précédente, redimensionnée à 400 x 400 pixels.
« id » correspond à l’identifiant de la vue (cf. 2.1) correspondant à l’image. Actuellement, seul le dernier fichier est utilisé par l’application, mais la conservation du fichier en pleine résolution laisse ouverte la possibilité d’une évolution dans la résolution choisie pour les images.
Cette résolution de 400 x 400 pixels offre une qualité d’image correcte pour une taille de fichier réduite, et donc une meilleure réactivité de l’application lors du chargement des éléments. De plus, elle est adaptée à la hauteur d’affichage disponible sur la plupart des écrans.
2.3 Légendes et liaisons
Pour chaque espèce, deux tables sont créées dans la base de données.
- une table pour les libellés des légendes, avec un identifiant, l’identifiant de l’élément auquel appartient la légende, le texte du libellé et le type de pointeur
Figure 32 - Extrait de la table SQL "dog_legendes"
- une table pour les coordonnées des légendes et les liaisons, avec un identifiant, l’identifiant de la vue sur laquelle la légende ou la liaison apparait, le type (légende, liaisons vers un élément, zoom ou section), l’identifiant de la cible (identifiant de la légende ou identifiant de
Figure 33 - Extrait de la table SQL "dog_coordonnees_legendes"
3 Conception de l’outil de gestion de l’application
3.1 Objectif
L’objectif que nous nous étions fixé était de concevoir un outil complet et simple, permettant de configurer toutes les données nécessaires au fonctionnement de l’application utilisateur sans connaissances techniques en informatique.
En effet, dans le temps dont nous disposions pour concevoir cette application, il n’était pas envisageable d’ajouter toutes les données pour toutes les espèces en plus du développement de l’application. Cette accessibilité de l’outil de gestion permet également une correction aisée des erreurs qui pourraient se glisser dans les informations fournies par l’application.
3.2 Développement
Le développement de l’outil de gestion représente la plus grande partie du travail de développement. En effet, elle doit gérer à la fois la lecture et l’écriture des données. Pour chaque type de donnée, l’application doit donc gérer sa création, sa lecture, sa modification et sa suppression.
Les scripts JavaScript constituent l’essentiel du programme. En effet, c’est ce langage qui permet l’interaction avec l’utilisateur, et les échanges avec le serveur. Côté serveur, quelques scripts PHP, appelés par JavaScript, permettent d’accéder à la base de données et au système de fichiers. L’usage du CSS se limite à la mise en page des nombreux éléments graphiques présents sur la page.
L’extrait de code ci-dessous donne un aperçu de la programmation en JavaScript. Pour simplifier les explications, une quarantaine de lignes ont été omises.
Figure 34 - Extrait simplifié sur script "add-legends.js"
3.3 Chiffres
Les quelques chiffres présentés dans le tableau ci-dessous permettent de donner un aperçu de la part de chaque langage dans le développement de l’application :
Langage Nombre de lignes de code
PHP 251
HTML 78
CSS 854
Javascript 5079
3.4 Résultat
Au final, l’application proposée nous semble remplir les objectifs fixés : l’ajout d’une espèce est des données qui lui sont associées se fait via une interface totalement graphique, sans manipulation de
4 Conception de l’application utilisateur
4.1 Objectif
Pour l’application utilisateur, nous avions pour objectif de fournir un support d’information accessible au plus grand nombre, intuitif est convivial, et qui tire profit de la technologie de façon à proposer une valeur ajoutée par rapport aux outils déjà existants.
4.2 Développement
Pour le développement de l’application utilisateur, la programmation JavaScript et le CSS constitue l’essentiel du programme.
Les feuilles de style CSS ne se limitent pas ici à la mise en page des éléments de la page. Elles sont utilisées pour définir les effets de transition entre les vues et entre les éléments.
Là encore, le script JavaScript permet l’interaction avec l’utilisateur et la communication avec le serveur. C’est également ce script qui va changer le style CSS appliqué à un élément.
L’utilisation de PHP est limitée ici à un script chargé de lire la base de données MySQL pour fournir à l’application un fichier JSON facilement manipulable, décrivant la totalité des informations nécessaires à son fonctionnement.
4.2.1 Représentation géométrique d’un élément
Pour faciliter la compréhension de la topographie, les vues d’un élément sont disposées sur les faces d’un cube, conformément à leur géométrie.
Figure 35 - Un cube est utilisé pour modéliser les relations topographiques entre les vues
La Figure 35 ci-dessus représente le cube utilisé pour modéliser la géométrie en trois dimensions des vues d’un élément. Cela se passe comme-ci l’élément était au sein du cube, et que son image était projeté sur chacune des faces.
Les transitions proposées lors du changement de vue permettent d’imaginer aisément l’élément tournant sur lui-même, et d’en déduire une représentation mentale en trois dimensions.
Le code ci-dessous est extrait du fichier CSS. Il définit comment doit se faire la transition entre les vues ainsi que comment est affichée la vue médiale.
Figure 36 - Extrait du code CSS définissant la transition entre les vues (lignes 1 à 10) et décrivant comment est affichée la vue médiale (ligne 11 à 19).
4.3 Chiffres
Concernant l’application utilisateur, l’utilisation des différents langages est répartie comme suit :
Langage Nombre de lignes de code
PHP 280
HTML 95
CSS 911
JavaScript 1704(1)
(1) 484 lignes de scripts sont utilisées en commun par la partie administrateur et la partie utilisateur.
Lorsqu’une vue est étudiée, seule la face où figure la vue est visible.
4.4 Résultat
L’application proposée nous semble répondre aux objectifs que nous nous étions fixés.
Le support Web a été choisi pour son accessibilité et car il permet une compatibilité aisée avec tous les systèmes d’exploitation, pour peu que l’utilisateur ait installé sur sa machine un navigateur Web récent (tous ceux cités dans le 1.1 de la partie I sont gratuits).
Les langages utilisés pour la programmation sont libres et ne nécessite aucune licence pour être exploités.
Un soin particulier a été apporté à la navigation, pour favoriser l’immersion de l’utilisateur et la compréhension de la typographie, par l’utilisation d’effets de transition pertinents. Ce point constitue le principal critère de différenciation de cette application par rapport aux autres supports informatiques proposés en libre accès (cf. 1.2 de la partie IV).
PARTIE IV
DISCUSSION
1 Intérêt de l’application
1.1 Une application destinée à un large public
1.1.1 Étudiants en médecine vétérinaire
L’ostéologie est une science fondamentale nécessaire à l’apprentissage d’autres disciplines plus pratiques telles la chirurgie ou la radiologie.
En dehors des séances d’enseignement pratique, avec manipulation de pièces réelles, l’ostéologie spécifique peut sembler peu attrayante pour l’étudiant, car l’apprentissage sur des supports tels que des ouvrages papier ou des diaporamas rend fastidieuse la recherche d’un élément en particulier, ou la comparaison entre deux espèces.
Cette application en ligne, facilement accessible et permettant une exploration aisée du squelette, permet d’augmenter l’attrait de cette discipline pour l’étudiant.
1.1.2 Enseignants en médecine vétérinaire
Cette application nous semble offrir un complément intéressant aux cours magistraux et aux travaux dirigés, en ostéologie ou dans les disciplines y faisant référence.
Chaque vue proposée par l’application est associée à une URL. Il est donc possible de faire référence à un élément du squelette en particulier, en fournissant un lien qui mènera directement le lecteur sur la vue concernée.
1.1.3 Praticiens vétérinaires
Dans le cadre de son exercice, le vétérinaire praticien peut avoir besoin d’informations en ostéologie. L’application constitue un moyen rapide et simple de trouver ces informations, notamment dans le cadre de la chirurgie et de l’interprétation radiographique.
Le praticien peut également utiliser l’application comme support pour illustrer l’information qu’il apporte aux propriétaires d’animaux.
1.1.4 Autres utilisateurs
L’application étant accessible librement en ligne, toute personne ayant besoin d’information en ostéologie, ou simplement curieuse, peut explorer le contenu proposé.
1.2 Avantage d’une application en ligne en ostéologie
L’utilisation d’un support informatique offre de nombreux avantages à l’étude d’une discipline visuelle comme l’ostéologie.
La navigation entre les éléments se fait également de manière très intuitive et agréable, ce qui n’est pas le cas sur un support papier ou sur un diaporama.
La comparaison interspécifique est simplifiée, puisqu’on peut faire apparaitre côte à côte la même vue d’un même élément pour deux espèces différentes, ou encore passer d’une espèce à l’autre d’un simple clic. Au contraire, les ouvrages d’anatomie comparée (par exemple [1] et [32]) présentent généralement chaque espèce séparément et la comparaison de deux os identiques chez deux espèces doit se faire en feuilletant d’une page à l’autre.
Le mode interrogation permet de contrôler ses connaissances d’une façon très simple, sans qu’il soit nécessaire de préparer des images muettes ou de se rendre dans un musée d’ostéologie.
Le formidable travail de photographie effectué dans le cadre de l’élaboration du logiciel « la Générale des Os » permettra l’étude complète d’espèce moins représentées dans les ouvrages, telles que le Mouton, le Porc ou le Chat, dès que les données auront été intégrées à l’application.
Par ailleurs, dans le cadre d’un travail de thèse de doctorat vétérinaire, M. Raffaelli [33] a développé en 2011 un site dédié à l’ostéologie comparée des Mammifères domestiques [34]. Ce support, conçu comme un site Web classique et non comme une application en ligne, propose des photographies légendées pour les Carnivores domestiques, le Cheval et le Bovin. Cependant, comme le logiciel « la Générale des Os », le site ne profite pas des dernières technologies du Web, et l’ergonomie du site ne permet pas un parcours aisé entre les différentes pièces du squelette. De plus le Mouton et le Porc ne sont pas représentés. Enfin pour certaines pièces, les photographies ne sont disponibles que pour une ou deux espèces.
Parmi les supports informatiques existants, l’application en ligne présente les avantages suivants : - elle est facilement accessible
- elle ne nécessite pas d’installation
- elle est compatible avec tous les systèmes d’exploitation - elle est consultable depuis un terminal mobile
L’application en ligne comme support d’information en ostéologie nous semble donc indiquée, par les avantages qu’elle apporte par rapport à un support moins interactif comme le serait un livre ou un diaporama.
2 Pérennité de l’application, limites et évolutions possibles
2.1 Des technologies qui évoluent rapidement
L’application profite des dernières évolutions dans le domaine des technologies Web pour offrir une interface attractive et intuitive.
Cependant, l’informatique est un domaine qui évolue rapidement. On peut imaginer que dans quelques années, des technologies qu’il n’est aujourd’hui pas envisageable d’utiliser dans le cadre d’un travail de thèse, en raison notamment de leur coût, ou des compétences nécessaires pour les utiliser, seront plus facilement accessibles. Il sera alors possible de développer un outil plus puissant, faisant appel par exemple à une modélisation en trois dimensions.
2.2 Limites de l’application
À l’instar du logiciel « la Générale des Os », notre application a été conçue pour rentrer dans le cadre de l’ostéologie spéciale, et ne traite donc pas d’ostéologie générale. N’y figurent pas d’explication sur la structure du squelette, le développement et la conformation des os, ni de schéma de constitution de chaque os.
Des connaissances de base en ostéologie générale sont donc nécessaires pour profiter pleinement du contenu proposé par l’application.
Afin de concentrer nos efforts sur l’ergonomie et l’attractivité de l’application, certaines fonctionnalités proposées par le logiciel « la Générale des Os » n’ont pas été portées dans l’application. Ainsi, les légendes ne sont proposées pour l’heure qu’en langue française et les photographies ne sont accompagnées que des légendes, sans proposer de critères de diagnose pour différencier les espèces. Cependant, comme tout site Web, l’application n’est pas figée et certaines améliorations sont déjà envisagées.
2.3 Un support pour d’autres disciplines
Notre application se limite à l’ostéologie. Cependant, le modèle de navigation proposé est transposable à d’autres disciplines en anatomie – comme par exemple la myologie, ou à la radiologie. Ainsi, il est envisageable de se baser sur le code de cette application pour créer un atlas radiographique interactif, ou de modifier l’application existante pour proposer un cliché radiographique correspondant à chaque photographie proposée.
CONCLUSION
Notre travail de conception de l’application montre les possibilités offertes par les technologies Web pour fournir des supports d’informations puissants et facilement accessibles dans le domaine de l’enseignement vétérinaire, en particulier dans une discipline où l’apprentissage se fait par l’image et la représentation mentale.
Cette application permet une approche ludique et attractive de l’ostéologie. Nous espérons qu’elle permettra aux étudiants et aux vétérinaires d’apprendre ou réapprendre de façon agréable.
