Année 2007-2008 Ecole Supérieure d’Informatique de Gestion (ESIG)

Université de Genève Rapport de stage

Microscope Virtuel

Service NTICE

Étudiante : Arielle Moro Conseillère pédagogique : Mme Atika Laribi (professeure ESIG)

Maître de stage : M. Pierre-Yves Burgi (responsable NTICE) Coach : M. Pierre Lehmann (ingénieur système web, e-learning)

Mandant : M. Davaud (professeur en Géologie)

Microscope Virtuel

Arielle Moro Page 2 sur 31

Remerciements : Je tiens tout particulièrement à remercier M. Burgi, M. Lehmann et Mme Laribi de m’avoir encadrée durant ce stage. Je remercie également M. Davaud, professeur de Géologie, pour qui j’ai réalisé l’application. Je remercie enfin tous les membres du service NTICE (Nouvelles Technologies de l’Information, de la Communication et de l’Enseignement). Ce stage m’a beaucoup apporté, tant sur le plan humain, en ayant rencontré diverses personnes de différents domaines dans le secteur informatique, que sur le plan des connaissances, de l’organisation et de la prise de décision pour certains problèmes auxquels j’ai été confrontée. J’ai été tout simplement ravie de réaliser mon stage à l’Université de Genève dans ce service.

Microscope Virtuel

Arielle Moro Page 3 sur 31

Table des matières

1. Cadre de travail page 4

1.1. Présentation du service NTICE page 4 1.2. Description de l’application page 5 1.3. Cahier des charges page 6 1.4. Modifications apportées page 6 1.5. Déroulement du stage page 7

2. Environnements et langages de programmation page 8 2.1. Adobe Flash CS3 page 9 2.2. ActionScript 2 (côté client) page 9 2.3. Adobe Dreamweaver CS3 page 9 2.4. PHP 4 (côté serveur) page 10 2.5. Zoomify page 10

3. Application réalisée (février 2008 -> mai 2008) page 14

3.1. Analyse préalable (février) page 14 3.2. Structure de l’application page 14 3.3. XML : cœur de l’application page 15 3.4. Choix du serveur page 16 3.5. Fonctionnalités implémentées page 17 3.6. Travail restant page 22

4. Annexes page 23 4.1. Définitions et sources page 23

4.2. Fenêtres de l’application (fin février 2008) page 25 4.3. Emploi du temps du stage page 27

Microscope Virtuel

Arielle Moro Page 4 sur 31

1. Cadre de travail

1.1. Présentation du service NTICE

Dans le cadre de ma dernière année de formation à l’Ecole Supérieure d’Informatique de Gestion et plus précisément pour mon travail de diplôme, j’effectue un stage de cinq mois à mi-temps (vingt semaines) à l’Université de Genève.

Plus précisément, je réalise mon stage dans le service des Nouvelles Technologies

de l’Information, de la Communication et de l’Enseignement (NTICE). Ce dernier est au service de la communauté universitaire et lui permet de pouvoir disposer des dernières technologies informatiques.

Les différents travaux de ce service concernent :

• le Web (site de l’Université de Genève, projet de sécurité Switch-AAI,

portail universitaire…) • l’e-learning (plates-formes d’enseignement : numérisation des cours…) • le multimédia (visioconférence, numérisation de documents…) • la bibliothèque virtuelle (projet en cours qui permettra d’accéder à

l’ensemble des ressources et services documentaires de façon sécurisée)

Le stage que j’effectue touche le domaine de l’e-learning. En effet, l’application que je réalise va permettre aux étudiants d’accéder à un module didactique pour pouvoir observer avec précision des portions de roches extraites d’un carottage depuis leur salle de travaux pratiques, de leur domicile, d’un poste à l’Université (l’accessibilité est très importante).

Equipes de la division informatique

Microscope Virtuel

Arielle Moro Page 5 sur 31

1.2. Description de l’application

Durant ces cinq mois de stage à mi-temps, j’ai pu apprendre à planifier un projet, à

prendre en main les outils, c’est-à-dire les différents langages de programmation ainsi que réaliser le développement d’une brique didactique pour un mandant M. Davaud professeur du département de Géologie à l’Université de Genève.

Objectifs :

La brique didactique va permettre, de façon simple, à un étudiant de visualiser des images (dont il connaît déjà la référence) et de zoomer sur un point précis de celles-ci tout en ayant la possibilité de faire des sauvegardes de portions d’image qui lui paraissent intéressantes. Le professeur, l’assistant, pourront ajouter, supprimer des photos qui pourront être consultées par des étudiants. De façon imagée, il s’agit donc d’un microscope électronique informatisé.

Les raisons pour lesquelles cette application doit être développée sont :

- L’amélioration de l’observation de la carotte (la version informatisée de celle-ci sera plus pratique à observer en comparaison avec une manipulation de portion de roche de la carotte). - L’amélioration de l’observation de coupe de roche (enlève le risque de briser des coupes microscopiques et/ou des microscopes lors des manipulations).

Le but précis est donc de pouvoir améliorer les conditions de travail des étudiants lors de leurs travaux pratiques à l’université. Pour mettre en évidence l’utilité de l’application pour les étudiants, il serait intéressant de voir leurs résultats aux travaux pratiques avant et surtout après l’intégration de cette application dans ceux-ci. Cet indice pourrait mesurer l’impact de cet outil didactique. Ce développement permettra de réduire les coûts, plus précisément réduire les achats de microscopes qui sont assez importants ainsi que de diminuer les risques liés à la manipulation de microscopes ou de coupes microscopiques.

Contraintes : - Il s’agit de développer une application en modifiant un logiciel existant (Zoomify) dont on a le code source. - Les images que Zoomify va diviser en tuiles doivent avoir absolument une haute résolution pour obtenir un zoom très précis.

Situation de départ : Actuellement les travaux pratiques se déroulent sans logiciel mais avec des microscopes, des coupes de roches… Situation désirée : Que le logiciel puisse améliorer la qualité des travaux pratiques et surtout améliorer l’observation (qui n’est pas évident s’il y a plusieurs élèves autour d’une portion de roche issue d’un carottage).

Limitations : - Le temps est un facteur important à prendre en compte (vingt semaines). Celui-ci comporte, dans un premier temps, l’apprentissage de l’environnement (Flash CS3) et du langage de programmation (ActionScript 2.0). Mais également un temps pour comprendre le logiciel annexe (Zoomify) qui sert de base pour l’application à développer. Et pour terminer le développement de l’application en elle-même. - Les connaissances, car je dois en peu de temps assimiler le tout pour la réalisation de l’application.

Microscope Virtuel

Arielle Moro Page 6 sur 31

1.3. Cahier des charges

Suite à un premier entretien le vendredi 8 février 2008 avec M. Davaud, nous avons pu mettre en évidence ses souhaits pour cette application.

Application de base (kit minimum) :

Partie « Utilisateur » (étudiant) :

1. Visualiser et zoomer sur des images 2. Rechercher une image (avec barre de défilement ou par recherche

rapide) 3. Avoir la possibilité de sauvegarder, de copier le cadre de l’image en

cours de visualisation (si possible) -> nomImage_1, nomImage_2… Partie « Administrateur » (professeur) :

1. Ajouter, supprimer des images 2. Éventuellement intégrer un champ-commentaire aux images

Extensions (si le temps le permet) :

1. Rajouter sur n’importe quelle zone un petit texte de façon temporaire Évolution (pour le futur) :

1. Si le temps le permet, d’autres fonctionnalités seront étudiées et intégrées (par exemple : classification par champs)

1.4. Modifications apportées

Après un second entretien le mardi 8 avril 2008 avec M. Davaud, nous avons décidé de renoncer à une fonctionnalité. Cette dernière consistait à sauvegarder une image en cours de visualisation (depuis le viewer de l’étudiant) et à la copier sur le bureau de l’étudiant. Pour l’implanter, il aurait fallu tenir compte de la session de l’étudiant dans le cas où il se connecterait depuis un poste de l’université. De plus, il aurait fallu également l’enregistrer sur un disque par défaut et non sur le bureau car, sur ce dernier, elle n’était pas enregistrée à la fermeture de la session. M. Davaud nous a explicitement dit que cette fonctionnalité était secondaire et que la copie d’une image dans le presse-papier (printscreen de l’écran) était prioritaire.

Microscope Virtuel

Arielle Moro Page 7 sur 31

1.5. Déroulement du stage

Première étape : Découverte du service, des personnes clés durant le stage. Deuxième étape : Entretien avec le mandant M. Davaud pour établir un cahier des charges. Troisième étape : Planification du projet.

Quatrième étape : Prise en main de l’environnement, du langage de programmation ainsi que de l’application Zoomify (plus précisément de la construction du code de ce dernier, étape qui me servira à l’implémenter dans l’application que je construis).

Cinquième étape : Elaboration du dossier d’initialisation. Sixième étape : Développement de la partie professeur (interface avec le viewer, structure de données dans un fichier XML, ajout/modification/suppression d’image, téléchargement d’image sur le serveur…). Septième étape : Rédaction du rapport de stage. Huitième étape : Développement de la partie pour l’étudiant (interface avec le viewer, copie d’écran, si le temps le permet, ajout de note sur le viewer...).

Neuvième étape (si le temps le permet) : Etude de fonctionnalités supplémentaires pour l’application développée. Dixième étape : Rédaction de divers documents (utilisateur, développeur, administrateur). Ces différentes étapes peuvent bien évidemment se dérouler en parallèle.

Microscope Virtuel

Arielle Moro Page 8 sur 31

2. Environnements et

langages de programmation

Introduction : schéma explicatif Architecture client - serveur

=> ce que la personne ne va pas voir (traitement) Côté « Serveur »

Côté « Client »

=> ce que la personne va voir (exécution)

Cette architecture est commune sur Internet et plus généralement en informatique : un serveur contient les informations, les clients s'y connectent et lui soumettent une requête. Les traitements correspondants sont effectués par le serveur et le résultat est affiché sur l'ordinateur du client.

Serveur Apache (interpréteur PHP, HTML…)

Pages html générées avec Player Flash et viewer Zoomify

Données (dossiers images +

fichier XML…)

HTTP (objet reçu) HTTP (objet demandé)

Microscope Virtuel

Arielle Moro Page 9 sur 31

2.1. Adobe Flash CS3

Logiciel d’environnement de développement intégré (IDE) qui se trouve dans la grande suite adobe CS3 avec Flash Player, une machine virtuelle utilisée pour lire les fichiers Flash. Utilisé couramment pour ajouter des animations et des objets interactifs à une page web, de nombreux logiciels de création et systèmes d’exploitation sont capables de créer ou d’afficher du Flash. Environnement qui sera essentiel pour développer en ActionScript 2.0. Il interviendra dans la programmation des deux parties de mon application (Administrateur et Utilisateur), principalement pour le viewer et toute l’interface graphique.

2.2. ActionScript 2 (côté client)

Utilisé au sein des applications Adobe Flash. Langage de script (orienté objet) basé sur ECMAScript (version standardisée de JavaScript). Ce langage permet d'ajouter de l'interactivité aux animations Flash, en répondant aux actions de l'utilisateur, et en pilotant les movie clip (conteneurs graphiques permettant de hiérarchiser les animations), et les différents objets multimédias (images, son, vidéo...). Il permet également la communication de l'application avec le serveur, notamment par le chargement de fichiers ou la communication avec un langage serveur comme le PHP.

2.3. Adobe Dreamweaver CS3

Ce logiciel d’environnement de développement intégré (IDE) est un éditeur de site web de type « tel écrit tel écran » (cette excellente formule remplaçant désormais dans la terminologie informatique le sigle anglophone WYSIWYG (What You See Is What You Get : ce que vous voyez est ce que vous obtiendrez). Ce logiciel va aussi jouer un rôle essentiel car il va permettre de dialoguer avec le serveur et de monter très simplement les différents fichiers de l’application sur le serveur pour que je puisse la tester à chaque modification. Il va également me permettre de visualiser et d’éditer mon fichier XML (eXtensible Markup Language, « langage de balisage extensible »). Fichier incontournable qui est le lien entre les deux parties de mon application (partie administrateur et partie utilisateur). Je pourrais également visualiser et éditer mes fichiers PHP (Hypertext Preprocessor) qui interviendront du côté « serveur » de l’application.

Microscope Virtuel

Arielle Moro Page 10 sur 31

2.4. PHP 4 (côté serveur) Le langage PHP (Hypertext Preprocessor) est utilisé en tant que langage côté

serveur, ce qui veut dire que c'est le serveur (la machine qui héberge l’application en question) qui va interpréter le code PHP et générer du code côté client.

Il a été conçu pour permettre la création d'applications dynamiques, le plus souvent dédiées au Web (e-learning, e-commerce…). PHP est très majoritairement installé sur un serveur Apache (interpréteur).

Son utilisation commence avec le traitement des formulaires (en ActionScript 2.0 côté client dans cette application) puis par l'accès aux données (par le biais du fichier XML).

Libre, gratuit, simple d'utilisation et d'installation, ce langage nécessite comme tout langage de réseau une bonne compréhension des mécanismes sous-jacents ainsi qu'une connaissance des problèmes de sécurité.

2.5. Zoomify Comme je l’ai expliqué dans la description de l’application (point numéro deux), je

vais intégrer dans l’application un logiciel appelé Zoomify qui va permettre de fragmenter une image et de pouvoir l’observer en zoomant sur celle-ci à l’aide d’un viewer.

Nous pouvons trouver diverses distributions (le code ne change pas, cependant les

fonctionnalités sont différentes) : • Zoomify for Flash : Version qui permet de visualiser une image et

également de réaliser un panorama, des hotspots, des transitions. • Zoomify Enterprise : Version qui permet de visualiser une image et qui

fournit un viewer complexe où il est possible de rajouter des notes, de faire des conférences avec différents utilisateurs.

Évidemment ces deux versions sont à personnaliser en fonction des besoins de

l’utilisateur. La compréhension du code est essentielle car il faut extraire les parties qui nous intéressent pour les incorporer au mieux dans notre application.

Les documents fournis en anglais étaient d’une grande utilité pour savoir quelle API utiliser.

Une API (Application Programming Interface) est une interface de programmation, elle permet de définir la manière dont un composant informatique peut communiquer avec un autre. En d’autres termes, elle permet de communiquer au mieux et simplement entre le code fournit avec Zoomify et l’application que je développe.

Le viewer a été réalisé en ActionScript 2.0 pour Zoomify for Flash et en ActionScript 1.0

pour Zoomify Enterprise. Zoomify comprend une partie viewer à personnaliser avec les différentes API et

également un exécutable qui va permettre de fragmenter l’image en tuiles pour créer les fichiers qui seront appelés lors des zooms dans le viewer. Il découpe donc en tuiles (petits morceaux) l’image finale et assure la visualisation.

Microscope Virtuel

Arielle Moro Page 11 sur 31

• Fragmentation d’une image : Voici les étapes de fragmentation d’une image lorsque l’exécutable reçoit en paramètre une image. Exemple : cet exécutable va diviser une image de 148 Mo en 13 dossiers de 256 images environ, de taille inférieure à 12 Ko (excepté le dernier dossier -> 88 images). Plus la résolution de l’image est importante, plus la fragmentation est importante et plus le zoom sera performant.

• Contenu du dossier d’une image fragmentée :

Microscope Virtuel

Arielle Moro Page 12 sur 31

• Contenu d’un sous-dossier « TileGroup0 » d’une image fragmentée :

• Viewer Zoomify et assemblage de petites images pour en construire une seule lorsqu’on dézoome :

Étape n°1 : statut du viewer Zoomify au départ

Microscope Virtuel

Arielle Moro Page 13 sur 31

Étape n°2 : le viewer Zoomify charge petit à petit les petites images plus on dézoome

Étape n°3 : le viewer Zoomify a chargé la totalité des petites images

Microscope Virtuel

Arielle Moro Page 14 sur 31

3. Application réalisée

(février 2008 – mai 2008)

3.1. Analyse préalable (février 2008)

Lors de cette analyse préalable, j’ai identifié les besoins du mandant M. Davaud et vérifié les possibilités de Zoomify. Nous avons également défini un « kit minimum ». Avec cette analyse, j’ai produit le dossier d’initialisation qui récapitule les objectifs principaux des applications (administration et étudiant).

3.2. Structure de l’application Schéma explicatif

Côté « Serveur »

Côté « Client »

Partie

« Administrateur »

Partie

« Utilisateur »

Écran principal

Traitement Traitement

Serveur Solaris (UNIX)

XML Image

Microscope Virtuel

Arielle Moro Page 15 sur 31

3.3. XML : cœur de l’application

Le XML (eXtensible Markup Language, « langage de balisage extensible ») est un langage informatique de balisage générique. Son objectif initial est de faciliter l'échange automatisé de contenus entre systèmes d'informations hétérogènes. La partie « Administrateur » et la partie « Utilisateur » sont reliées toutes les deux par un fichier XML qui centralise les liens avec les dossiers images et contient également diverses informations. Nous pouvons très bien comparer un fichier XML à une base de données très simplifiée et statique car il s’agit d’un simple fichier texte. Exemple : <?xml version="1.0" encoding="utf-8"?> <Dossiers> <Dossier Nom="Carottes"> <Photos> <Photo NomP="Image1" Lien="./carottes/Image11" Description="Cette image est une coupe de roche magmatique" /> <Photo NomP="Image2" Lien="./carottes/Image22" Description="Cette image est une coupe de roche métamorphique" /> </Photos> </Dossier> <Dossier Nom="Autres"> <Photos> <Photo NomP="Image3" Lien="./carottes/Image33" Description="Cette image est une coupe de roche sédimentaire" /> </Photos> </Dossier> </Dossiers>

Microscope Virtuel

Arielle Moro Page 16 sur 31

3.4. Choix du serveur

Le serveur de l’application est un élément majeur de l’e-learning car toutes les données doivent y être stockées. Ce serveur stockera les différents fichiers qui constituent l’application que je développe mais également tous les dossiers des images qui pourront être visualisées. Le serveur de test actuel est un serveur Sun Microsystems (basé sur UNIX). Le serveur final qui contiendra la totalité de l’application et les dossiers images pourra être un serveur Windows ou un serveur Sun. Dans le cas où nous choisirions un serveur Sun, une autre façon de fragmenter l’image sera nécessaire (par exemple avec un script annexe qui fragmentera l’image sur le serveur selon les normes de Zoomify). Car on ne peut pas exécuter le .exe fournit par Zoomify sur un serveur UNIX (il n’est pas reconnu). Tandis que dans le cas où le serveur sera un serveur Windows, l’exécutable pourra être utilisé depuis un script PHP côté « Serveur » car Windows reconnaît les .exe.

Tableau comparatif :

Utilisation d’un

serveur

Windows

Utilisation d’un serveur Solaris

(UNIX)

Fragmentation

de l’image

Exécutable

Script Perl ou

Python

Exécutable

Où ?

Sur le serveur

Sur le serveur

Localement

Upload

Image

Image

Fichier .zip

En conclusion, l’utilisation d’un script qui réalise la fragmentation de l’image sur le serveur permettrait une indépendance totale d’un quelconque serveur et ce serait la solution idéale. Malheureusement il semblerait qu’il se limite à la fragmentation d’une image inférieure à 150 Mo. Si cette solution est trop compliquée à mettre en place et que la taille des images est limitée nous nous tournerons vers un serveur Windows.

Microscope Virtuel

Arielle Moro Page 17 sur 31

3.5.Fonctionnalités implémentées

Les différentes fonctionnalités qui ont été implantées jusqu’à ce jour sont les suivantes :

• Page d’accueil pour introduire les deux partie de l’application (réalisée en ActionScript 2.0)

• Partie « Administrateur » (professeur) :

o Fenêtre d’authentification pour entrer dans la partie « Administrateur »

du Microscope Virtuel (réalisée en ActionScript 2.0 avec fichier texte contenant le login et mot de passe).

La gestion du mot de passe, la possibilité d’entrer d’autres administrateurs, sera mise en place durant le mois de juin

Microscope Virtuel

Arielle Moro Page 18 sur 31

o Fenêtre principale avec viewer Zoomify qui est basée sur une structure XML (réalisée en ActionScript 2.0 avec fichier XML)

o Fenêtre pour ajouter un dossier (réalisée en ActionScript 2.0 avec un script PHP côté serveur qui va réécrire le contenu du fichier XML pour ajouter le dossier)

Microscope Virtuel

Arielle Moro Page 19 sur 31

o Fenêtre pour modifier les données d’une image (réalisée en

ActionScript 2.0 avec un script PHP côté serveur qui va réécrire le contenu du fichier XML pour ajouter les modifications)

o Fenêtre pour supprimer un dossier (réalisée en ActionScript 2.0 avec un script PHP côté serveur qui va réécrire le contenu du fichier XML pour ajouter les modifications)

o o o o o o o o o o o o o o o o o o

Microscope Virtuel

Arielle Moro Page 20 sur 31

o Fenêtre pour supprimer une image (réalisée en ActionScript 2.0 avec un script PHP côté serveur qui va réécrire le contenu du fichier XML pour ajouter les modifications)

o Fenêtre pour ajouter une image (en cours) (réalisée en ActionScript 2.0

avec un script PHP côté serveur qui va réécrire le contenu du fichier XML pour ajouter les modifications + un exécutable ou script qui va servir à fragmenter l’image à ajouter)

Cette partie est en cours de réalisation car le choix d’une solution a pris un certain temps :

Pour ajouter une image il y avait différentes manières de procéder :

• Réaliser la fragmentation de l’image avant même de l’uploader sur le serveur,

dans ce cas uploader un .zip pour que le fichier soit bien pris en charge par ActionScript (côté client) et le dézipper sur le serveur.

• Ou Réaliser la fragmentation de l’image sur le serveur en réalisant un upload simple de l’image mais pour cette solution deux options sont à étudier car nous ne disposons que d’un exécutable Zoomify pour fragmenter l’image:

- utiliser cet exécutable et donc utiliser un serveur Microsoft - utiliser une autre façon de fragmenter l’image (script Python

éventuellement) -> solution encore non testée

Microscope Virtuel

Arielle Moro Page 21 sur 31

• Partie « Utilisateur » (étudiant) : avec viewer Zoomify qui est basée sur une structure XML (réalisée en ActionScript 2.0 avec fichier XML)

Microscope Virtuel

Arielle Moro Page 22 sur 31

3.6. Travail restant

Le travail qui me reste à réaliser durant le mois de juin consiste en ces dernières fonctionnalités :

- Compléter l’ajout d’image - Compléter la gestion de l’authentification - Modifier le nom des dossiers - Lier les suppressions XML au suppression des dossiers images

sur le serveur - Permettre à l’étudiant de copier dans le presse-papier une

capture d’écran - Réaliser des documents supplémentaires (administrateur,

utilisateur, développeur) - Étudier la mise en place des notes sur le viewer de l’étudiant (si

le temps le permet)

Microscope Virtuel

Arielle Moro Page 23 sur 31

4. Annexes

4.1. Définitions et sources

• Application client – serveur :

Architecture de réseau dans laquelle les traitements sont répartis entre les clients qui demandent les informations dont ils ont besoin au(x) serveur(s). http://fr.wikipedia.org/wiki/Client-serveur

• Fichier XML : « eXtended Markup Language » Langage de description des documents qui utilise des balises, permet l'utilisation de balises personnalisées et permet l'échange des données. http://fr.wikipedia.org/wiki/Extensible_Markup_Language

• ActionScript : Langage de programmation utilisé par Flash. L'ActionScript est le langage de programmation disponible dans Flash pour la création d'applications avancées. http://flash.mediabox.fr http://fr.wikipedia.org/wiki/ActionScript

• PHP : « Hypertext Preprocessor » PHP est un langage de script HTML, exécuté coté serveur. Il facilite le développement de sites Internet en proposant une impressionnante quantité d'outils tels que des bibliothèques d'accès aux bases de données, de manipulation d'images, de création de fichiers PDF... http://www.php.net http://fr.wikipedia.org/wiki/PHP

• Zoomify : Logiciel qui permet de fragmenter une image et qui dispose d’un viewer en ActionScript 2.0 (Zoomify for flash) qui assemble chaque image fragmentée selon le zoom désiré. http://www.zoomify.com

Microscope Virtuel

Arielle Moro Page 24 sur 31

• Suite Adobe CS3 (Flash CS3, Dreamweaver CS3…) : Adobe Creative Suite est une suite logicielle de graphisme professionnel

produite par Adobe Systems. http://www.adobe.com

4.2. Fenêtres de l’application (fin février

2008) -> p. 25

Cette annexe concerne les différentes fenêtres de l’application que j’avais prévue fin février (il faut bien tenir compte du fait que dans la partie « Utilisateur », la fonctionnalité de sauvegarde d’image a été supprimée suite à un second entretien avec M. Davaud).

4.3. Emploi du temps du stage -> p. 27 Emploi du temps réalisé jusqu’à présent et pour le futur mois de juin 2008.