Intégration des outils numériques constitués sur le château de Thann

Transcription

Institut National des Sciences Appliquées de Strasbourg
Mémoire de soutenance de Diplôme d’Ingénieur INSA
Spécialité TOPOGRAPHIE
Intégration des outils numériques constitués sur le
château de Thann (Haut-Rhin) dans un système
d’information et une base de connaissances
historiques, sous forme d’un site internet.
Présenté le 14 Mars 2013 par Sylvain NOBILE
Réalisé au sein du laboratoire : ICube
Equipe TRIO/INSA
24 Boulevard de la Victoire
67084 STRASBOURG Cedex
Directrice de PFE : Mme Céline STEINER, Agent du développement
économique et local de la ville de Thann
Tuteur pédagogique et correcteur : M. Mathieu KOEHL,
maître de conférences,
INSA de Strasbourg
REMERCIEMENTS
Je tiens tout d’abord à remercier tous les professeurs de mon cursus de géomètre ainsi que toutes les
personnes que j’ai pu côtoyer en cours ou en stage qui, de la première année de BTS à mon Projet de
Fin d’Etudes, m’ont permis de mener à bien mes études.
J’aimerais ensuite remercier plus particulièrement mon professeur et encadrant de PFE M. Mathieu
KOEHL pour m’avoir proposé ce sujet, m’avoir aidé à le mener à bien et pour m’avoir accordé sa
confiance tout au long de ce projet.
Je remercie également ma directrice de PFE Mme Céline STEINER, agent du développement
économique et local de la ville de Thann, ainsi que M. Michel HABIB, 1er adjoint au maire de la ville
de Thann, pour leur implication dans ce projet, leur sympathie et leur soutien.
Merci à M. Pierre GRUSSENMEYER, responsable du groupe PAGE (Photogrammétrie
Architecturale et GEomatique) de l’équipe TRIO (Télédétection, Radiométrie et Imagerie Optique),
pour m’avoir accueilli au sein du laboratoire de photogrammétrie de l’INSA de Strasbourg. Le groupe
l’équipe TRIO du laboratoire ICube.
Je tiens à témoigner toute ma sympathie à M. Samuel GUILLEMIN, technicien de recherches, et M.
Bernard GRANDMOUGIN, technicien informatique, pour leur assistance et leur bienveillance.
Merci à tous mes camarades également en PFE au laboratoire, Selma BIDINO, Nolwenn QUERE,
Hélène MACHER, Nicolas ECK, Dorian KLINGHAMMER, Bertrand OUVRARD, Geoffrey
VINCENT ainsi qu’à mon camarade de promotion Johann TONNERIEUX pour leur soutien, leur
bons conseils leur bonne humeur.
Je remercie également les doctorants du laboratoire Marie-Anne MITTET et Mostafa MOHAMED
pour leur sympathie.
Pour leur soutien inconditionnel tout au long de mes études, je tiens à remercier ma famille et mes
proches, et tout particulièrement mon amie Julie FAVARIO, qui m’a permis de tenir bon durant
certains moments difficiles tout au long de mes études supérieures.
__________________________________________________________________________________
Sylvain NOBILE - 2013
Table des matières
Remerciements
Table des matieres
1.
INTRODUCTION ........................................................................................................................... 1
1.1 L’Engelbourg................................................................................................................................. 1
1.1.1 Histoire ................................................................................................................................... 1
1.1.2 Mise en valeur ........................................................................................................................ 1
1.1.3 Partenariat avec l’INSA de Strasbourg................................................................................... 2
1.2 Objectifs du projet ......................................................................................................................... 2
1.2.1 Sujet du PFE ........................................................................................................................... 2
1.2.2 Organisation du mémoire ....................................................................................................... 3
2.
ETAT DE L’ART ............................................................................................................................ 5
2.1 Site internet et CMS ...................................................................................................................... 5
2.1.1 Qu’est-ce qu’un CMS ? .......................................................................................................... 5
2.1.2 Pourquoi un CMS ? ................................................................................................................ 5
2.1.3 Comparaison des principaux CMS et choix ........................................................................... 6
2.1.4 Choix ...................................................................................................................................... 7
2.2 SIG 3D........................................................................................................................................... 8
2.3 Visite virtuelle ............................................................................................................................... 8
3.
CREATION DE MOYENS NUMERIQUES DE VISITE DE L’ENGELBOURG ..................... 11
3.1 Maquette 3D ................................................................................................................................ 11
3.1.1 Réalisation d’une maquette 3D de l’Engelbourg .................................................................. 11
3.1.2 Mise à jour de la maquette.................................................................................................... 11
3.1.3 Remarques et perspectives ................................................................................................... 18
3.2 Restitution 3D du château de 1660.............................................................................................. 19
3.3 Visite virtuelle ............................................................................................................................. 21
3.3.1 Création de panoramas issus de la maquette 3D .................................................................. 22
3.3.2 Ajout d’une rose des vents sur les panoramas de la visite virtuelle ..................................... 22
3.3.3 Import des nouveaux panoramas et réalisation de la visite virtuelle .................................... 23
3.4 Géolocalisation de photos ........................................................................................................... 25
4.
MISE EN PLACE D’UN SITE INTERNET ................................................................................. 29
4.1 Création d’un site avec Joomla ! ................................................................................................. 29
4.1.1 Mise en place ........................................................................................................................ 29
__________________________________________________________________________________
4.1.2 Fonctionnement général de Joomla ! .................................................................................... 30
4.1.3 Extensions diverses .............................................................................................................. 32
4.1.4 Intégration d’une visite virtuelle (animation flash SWF) ..................................................... 35
4.1.5 Intégration d’un modèle 3D grâce à l’API Google Earth ..................................................... 35
4.1.6 Ajout d’une image « interactive » dans un article ................................................................ 36
4.1.7 Utilisateurs et groupes d’utilisateurs .................................................................................... 36
4.2 Mise en place d’une base de données au sein de Joomla! ........................................................... 38
4.2.1 Essai de l’extension Seblod .................................................................................................. 38
4.2.2 Création d’une base de donnée avec Fabrik ......................................................................... 39
4.3 Evolution du site internet durant le PFE...................................................................................... 41
4.4 Présentation du site internet ........................................................................................................ 42
4.4.1 Page d’accueil....................................................................................................................... 42
4.4.2 Les ruines de l’Engelbourg................................................................................................... 42
4.4.3 Histoire du château ............................................................................................................... 42
4.4.4 Archéologie .......................................................................................................................... 43
4.4.5 Topographie.......................................................................................................................... 43
4.4.6 Visite virtuelle ...................................................................................................................... 43
4.4.7 Informations pratiques .......................................................................................................... 44
4.4.8 Accès partenaires .................................................................................................................. 44
4.5 Mise en ligne ............................................................................................................................... 45
4.6 Evolution future du site internet .................................................................................................. 45
5. INTEGRATION DES MOYENS NUMERIQUES DE VISITE DE L’ENGELBOURG AU SEIN
DU SITE INTERNET ........................................................................................................................... 49
5.1 Intégration de la maquette 3D et de la restitution du château de 1660 ........................................ 49
5.2 Intégration de la visite virtuelle ................................................................................................... 49
5.2.1 Visite virtuelle du château .................................................................................................... 49
5.2.2 Promenade virtuelle .............................................................................................................. 50
5.3 Intégration de photos géolocalisées ............................................................................................. 51
6. ACCES LA BASE DE DONNEES CONSTITUEE SUR L’ENGELBOURG DEPUIS DES
MOYENS DE VISITE NUMERIQUE ................................................................................................. 53
6.1 Accès à la base de données constituées sur l’Engelbourg depuis une visite virtuelle ................. 53
6.2 Accès à la base de données constituées sur l’Engelbourg depuis un modèle 3D ........................ 53
7.
CONCLUSION ET PERSPECTIVES .......................................................................................... 55
__________________________________________________________________________________
GLOSSAIRE ......................................................................................................................................... 57
TABLE DES FIGURES ........................................................................................................................ 61
REFERENCES BIBLIOGRAPHIQUES .............................................................................................. 63
Articles et publications ...................................................................................................................... 63
Sites internet ...................................................................................................................................... 64
__________________________________________________________________________________
INTRODUCTION
_________________________________________________________________________________________________________________
1. INTRODUCTION
1.1 L’Engelbourg
1.1.1 Histoire
Le château de l'Engelbourg fut construit en nid d'aigle au début du 13ème siècle, au sommet du
Schlossberg. Il est situé sur le territoire de la commune de Thann, Haut-Rhin, au carrefour de l'Alsace
et de la Lorraine, et domine le débouché de la vallée de la Thur.
Il fût construit par les comtes de Ferrette pour veiller sur le péage de la route commerciale reliant
l’Italie aux Flandres.
FIGURE 1 – Les ruines de l’Engelbourg vues depuis le vignoble du Rangen (Office de Tourisme du Pays de Thann)
Sa position stratégique en fit la cible de destructions systématiques au cours du 17ème siècle, et Louis
XIV acheva son sort en ordonnant sa démolition en 1673, après le rattachement de l'Alsace à la
France. Il n'en reste aujourd'hui que peu de vestiges, dont une section de tour d'environ 7 mètres de
diamètre et 4 mètres de haut posée sur sa tranche, caractéristique unique dans le paysage castral
régional. Elle est visible depuis la vallée et, baptisée "L'Oeil de la sorcière", est devenue un attrait
phare de la commune.
Classé Monument historique depuis 1930 par les Français (il le fût à la fin du 19ème siècle par les
Allemands), le site est aujourd’hui géré et valorisé par la Ville de Thann.
1.1.2 Mise en valeur
Un programme complet de valorisation a été démarré pour mettre en valeur l’Engelbourg. Il se
réalisera sur 10 à 20 ans par la Communauté de communes du pays de Thann et la Ville en partenariat
avec la Direction Régionale des Affaires Culturelles (DRAC) et le Service Départemental de
l’Architecture et des Paysages (SDAP).
A terme, “l'Oeil de la Sorcière” doit consolider sa réputation de site majeur pour l’animation, l’accueil
du public et le développement touristique au même titre que la Collégiale St-Thiébaut, le centre-ville
et le vignoble du Rangen.
__________________________________________________________________________________
1
INTRODUCTION
_________________________________________________________________________________________________________________
1.1.3 Partenariat avec l’INSA de Strasbourg
L’INSA de Strasbourg travaille sur la modélisation tridimensionnelle des ruines du Château de
l'Engelbourg, dans le cadre d'un partenariat avec la Ville de Thann.
La première phase de ce projet, engagé en octobre 2009, a consisté en la réalisation d’une maquette 3D
de l'état actuel du Château.
Ce projet est financé à 50% par l'INSA et à 50% par la Ville de Thann. Les étudiants qui travaillent sur
ce projet sont encadrés par le maître de conférences Mathieu KOEHL (Laboratoire des Sciences de
l'Image, de l'Informatique et de la Télédétection). L'INSA a déjà effectué un travail similaire sur
l'Abbaye de Niedermunster.
Cela a notamment donné lieu au Projet de Fin d’Etudes mené en 2011 par Solveig BERGER. Fin
2011, Nicolas BRIGAND a réalisé un Projet de Recherche Technologique au sujet de l’étude d’une
visite virtuelle de l’Engelbourg. Désormais, la ville de Thann souhaite profiter de ces travaux en les
mettant à disposition à la fois du grand public et des partenaires de la mise en valeur du site.
C’est ainsi assez naturellement qu’est née l’idée de création d’un site internet utilisant ces moyens
numériques de visite de l’Engelbourg.
1.2 Objectifs du projet
1.2.1 Sujet du PFE
A partir d’une visite virtuelle du site de l’Engelbourg à étudier puis à concevoir, il est prévu
d’interfacer 2 versions de sites internet : un site grand public et un site spécialisé.
- Le site grand public est destiné à la navigation et à la visite virtuelle en version allégée permettant la
compréhension des ruines et apportant des compléments d’informations générales.
- Le site spécialisé consiste en une base de données et de connaissances à mettre en place et à
structurer permettant l’archivage, puis la mise à disposition de l’ensemble des connaissances des
ruines. Un moteur de requêtes devra permettre d’interroger la base de données et de rechercher les
informations liées à des zones particulières du site.
Cette mise en place sera précédée par une étude des besoins recueillis auprès des différents acteurs du
site de l’Engelbourg.
L’interface privilégiée et à étudier consiste en une visite virtuelle. Celle-ci sera conçue en se référant
à des spécialistes du site qui définiront les points de vue initiaux. Elle comportera des vues hybrides à
partir d’images panoramiques prises sur le site ou reconstituées à partir de la maquette 3D.
La maquette 3D servant également de support de modélisation et de présentation des différentes
activités liées au site actuel, l’étude comportera la mise en place d’une chaîne de production allant du
complètement de la maquette 3D (définition d’espace privilégié, proposition d’hypothèse de
restitution, etc.) à la production d’images panoramiques déduites pouvant ensuite être intégrées dans
la visite virtuelle servant d’interface.
L’étude portera ensuite sur le déploiement de l’application et la définition de procédures de mise à
jour rapide.
__________________________________________________________________________________
2
INTRODUCTION
_________________________________________________________________________________________________________________
1.2.2 Organisation du mémoire
Le mémoire débute par un état de l’art présentant l’état des connaissances en matière de site internet et
de CMS, de SIG 3D, et de visite virtuelle.
Il se poursuit par la création et la mise à jour de différents moyens numériques de visite de
l’Engelbourg.
Il détaille ensuite la création d’un site internet concernant l’Engelbourg.
Il fait état après cela de l’intégration à ce site internet des moyens numériques de visite évoqués
précédemment.
Enfin, une conclusion est dressée et des perspectives de poursuite du projet sont évoquées.
__________________________________________________________________________________
3
ETAT DE L’ART
_________________________________________________________________________________________________________________
2. ETAT DE L’ART
2.1 Site internet et CMS
2.1.1 Qu’est-ce qu’un CMS ?
CMS est l’acronyme de content management system, soit, en français, « système de gestion de
contenu ». Il s’agit d’un programme informatique utilisant une base de données et permettant de gérer
de façon complète l’apparence et le contenu d’un site web.
Il permet, à des individus ou à des groupes hiérarchisés, de mettre à jour le contenu d’un site web à
partir d’un panneau d’administration.
Aujourd’hui, le CMS est une plate-forme de déploiement de sites web très populaires, permettant de
créer des sites web complexes à moindre coût, grâce aux nombreux CMS Open Source existant sur le
marché. C’est de ces CMS dont nous allons parler, car même s’il existe des CMS payants, la grosse
majorité des CMS déployés sont Open Source.
2.1.2 Pourquoi un CMS ?
Dans le cadre de ce projet, un site internet devra être créé. Un site internet peut être simplement
constitué de pages web, qui sont des fichiers HTML, comportant des liens entre elles. Le fond et la
forme sont mêlés dans le code html de la page.
L’idée pour le site web à réaliser est de profiter d’une organisation différente, permettant notamment
la dissociation du fond et de la forme rendant plus facile la mise à jour. Cela permettra également de
créer plus aisément un site au design plus actuel et auquel pourront être inclus des éléments améliorant
l’expérience visiteur (galerie d’image, animation flash, formulaire, etc.).
Mais pourquoi un CMS ? Un CMS possède deux grands avantages : la mise à jour du site internet est
grandement facilitée, et les coûts de développement sont réduits.
En effet son attrait premier est de faciliter la création de contenu, notamment par des personnes
n’ayant aucune connaissance en développement web.
Si l’administrateur a reçu la formation adéquate ou a la volonté d’apprendre (on trouve des tutoriels et
des forums d’entraide sur le web), le site peut évoluer sans devoir faire appel aux services d’un
informaticien.
Le second objectif du CMS est de réduire les coûts de développement de sites complexes, incluant la
gestion de comptes utilisateurs, des formulaires, des galeries de photo, des catalogues, etc.
S’il est à la portée de tous d’installer un CMS, il faudra un peu plus de courage pour passer de
l’installation de base à un site personnalisé et entièrement fonctionnel. Il faudra trouver un thème,
installer les modules correspondants, définir toute la structure du CMS. Cette complexité varie un peu
suivant les CMS, mais il n’est pas possible d’obtenir un site prêt en une heure, sauf s’il s’agit d’un
simple blog utilisant toutes les options par défaut de WordPress par exemple.
Mais un CMS possède également certains inconvénients.
Au niveau des performances, même le meilleur des CMS sera toujours plus lent qu’un site en html
simple, ou PHP/asp.net si un formulaire est requis. La raison réside dans le fait que toutes les pages
__________________________________________________________________________________
5
ETAT DE L’ART
_________________________________________________________________________________________________________________
étant dynamiques, beaucoup d’opérations sont requises afin de les construire, le programme doit se
connecter à la base de données pour afficher le contenu, etc. La mise en cache permet de limiter ces
problèmes mais ne les règle pas tous.
Les CMS pêchent aussi au niveau du référencement. Si certains ont fait d’énormes progrès, la
flexibilité pour le SEO n’est pas totale.
Les CMS manquent également de flexibilité. Ils permettent de faire énormément de choses, mais leurs
possibilités sont limitées, notamment concernant la personnalisation.
Au niveau de la maintenance et de la stabilité, un CMS est un programme complexe, qui est donc
susceptible de connaître des pannes. L’utilisation intensive de la base de données augmente cette
probabilité. De ce fait, il faut effectuer de nombreuses sauvegardes de la base de données, pour éviter
des pertes. En cas de panne de celle-ci, c’est tout le site qui n’est plus fonctionnel.
On notera enfin qu’un site sous CMS est plus compliqué à migrer qu’un simple site classique.
2.1.3 Comparaison des principaux CMS et choix
Voici les trois CMS les plus utilisés, avec leurs avantages et leurs inconvénients :
Joomla!
Avantages
Joomla ! est un des CMS les plus puissants du marché.
Il possède une communauté de développeurs importante, développant des modules gratuits et d’autres
payants.
Il possède de nombreux thèmes gratuits permettant de personnaliser l’aspect et l’organisation de son
site.
Inconvénients
Joomla ! est assez « lourd », et peut causer des problèmes de performance.
Il peut également intimider quelque peu certaines personnes par sa complexité apparente.
Enfin il n’est pas optimisé pour le SEO (référencement) par défaut.
WordPress
Avantages
WordPress est probablement le CMS le plus simple d’utilisation.
Il est idéal pour les blogs ou sites très simples.
Enfin, il est très léger.
Inconvénients
Il est à ce jour impossible d’intégrer de forum à un site WordPress, qui est donc inadapté aux sites
communautaires.
__________________________________________________________________________________
6
ETAT DE L’ART
_________________________________________________________________________________________________________________
Drupal
Avantages
Drupal est un des CMS les plus puissants du marché.
Il a été conçu afin de pouvoir être facilement modifié.
Il est en outre idéal pour les sites volumineux, pour lesquels il fonctionne plus vite que ses
concurrents.
Enfin, Drupal est optimisé pour le SEO dès l’installation.
Inconvénients
Drupal peut être intimidant pour les néophytes.
Le système de taxonomie de Drupal est intéressant mais demande un certain temps d’adaptation.
2.1.4 Choix
Pour aider au choix de notre CMS, voici un tableau comparatif
www.comparatif-cms.com :
extrait du site internet
FIGURE 2 – Tableau comparatif des principaux CMS [@Comparatif-CMS, 2013]
Pour aller plus loin, on pourra se référer à ces articles comparatifs des principaux CMS du marché :
http://maniacgeek.wordpress.com/2012/06/30/comparatif-des-meilleurs-cms-sur-le-marche-drupalJoomla!-spip-wordpress-prestashop/
http://www.anthonymolinadiaz.net/comparatif-cms/
http://www.access-dev.com/pdf/CMS-comparatif.pdf
http://www.journaldunet.com/solutions/intranet-extranet/comparatif-wordpress-versus-joomla/
__________________________________________________________________________________
7
ETAT DE L’ART
_________________________________________________________________________________________________________________
Au final, on constate que WordPress a de nombreux avantages, mais parait plutôt adapté à des sites de
type « blog ».
Joomla! apparait ainsi comme le meilleur choix grâce à sa « puissance » et sa communauté permettant
le recours facile à de l’aide ou à des explications et astuces détaillées.
2.2 SIG 3D
De nombreuses publications concernent les SIG 3D mais sans proposer de solution pour la mise à
disposition du grand public sur internet. [Koehl et al., 2008a], [Koehl et al., 2008b], [Koehl et Lott,
2008].
En ce qui concerne la publication de modèles 3D en ligne, Clément Anet a abordé le sujet lors de son
PFE en faisant un bref tour d’horizon des formats et des moyens de visualisation adéquats pour la mise
en ligne de sa maquette 3D. Bien que non exhaustive, cette énumération résume bien les principales
solutions aujourd’hui à disposition. Son choix, l’utilisation de l’Api Google Earth, représente une
solution intéressante mais manquant de performance – inconvénient qu’il a su partiellement résoudre.
Il est en revanche intéressant d’avoir un MNT à grande échelle pour aider à la visualisation du
placement local du site, notamment par rapport à la ville de Thann. [Anet, 2012].
Une solution qu’il n’a pas explorée, à la fois comme format de fichier mais aussi de visualisation de
données 3D, est le PDF 3D.
Cette solution parait particulièrement intéressante, pour les raisons suivantes :
- le format PDF 3D est lisible par toutes les dernières versions de navigateurs internet ;
- les fichiers générés sont particulièrement légers ;
- il est possible de rendre le modèle interactif en rendant des éléments cliquables, ouvrant des boites de
dialogues (contenant textes, images, vidéos, …) ou un lien html. On peut ainsi imaginer une
redirection pour chaque élément du modèle vers les données qui lui sont associées. Il faut par contre
pour se faire disposer du logiciel Adobe Acrobat.
Lien : http://www.adobe.com/fr/manufacturing/solutions/3d_solutions/
2.3 Visite virtuelle
Le rapport de PRT de Nicolas Brigand apporte beaucoup d’explications quant à la réalisation de
visites virtuelles (somme toute assez facile à l’aide des logiciels AutoPano et Panotour, de l’éditeur
Kolor). Il explicite notamment une méthode permettant d’intégrer à la visite un point de vue issu de la
maquette 3D, pour faire le parallèle entre la réalité - tirée de photos - et la maquette virtuelle - obtenue
à partir de mesures sur le terrain.
Son rapport permet un aperçu des possibilités offertes par ces logiciels pour la réalisation d’une visite
virtuelle sur le site de l’Engelbourg, mais reste incomplète du point de vue des objectifs de ce PFE.
[Brigand, 2012].
En effet, il conviendrait d’expliciter les moyens de mise à jour de la visite virtuelle, d’explorer plus en
détail les moyens d’interfaçage pour lier la visite avec une base de données.
__________________________________________________________________________________
8
ETAT DE L’ART
_________________________________________________________________________________________________________________
Pour une visite virtuelle liée à une base de données, on pourra utiliser les différentes formes de
« hotspots » proposés par Panotour (points ou zones cliquables dirigeant vers un autre panorama ou un
lien extérieur). Ces « hotspots » pourront être disposés sur des éléments dans le panorama, comme cela
a déjà été fait par Nicolas Brigand, mais également sur une interface graphique située au nadir (par
exemple sous la forme d’une rose des vents). Il faudra pour cela étudier les moyens de transformation
d’un panorama pour pouvoir inclure une image au nadir sans que cette dernière n’ait à être déformée
préalablement.
On trouve des articles sur internet traitant de cette problématique :
http://wiki.panotools.org/Adding_a_nadir_logo_with_text
http://wiki.panotools.org/Extracting_and_inserting_rectilinear_Views#PTGui
FIGURE 3 – Principe de la « skybox » [@Wikipedia, 2013]
Mais une manière plus simple existe : il suffit de transformer les panoramas créés en « face de cube ».
Le principe, qui est celui de la « skybox » - littéralement « boite à ciel » -, est illustré par la figure 3.
L'image en bas à gauche montre le point de vue (en noir), celle de droite le cube reflétant
l’environnement extérieur, et celle du haut montre le patron du cube, c'est-à-dire, les 6 images
constituant la « skybox » en émulant l'environnement extérieur [@Wikipedia, 2013].
__________________________________________________________________________________
9
CREATION DE MOYENS NUMERIQUES DE VISITE DE L’ENGELBOURG
_________________________________________________________________________________________________________________
3. CREATION DE
L’ENGELBOURG
MOYENS
NUMERIQUES
DE
VISITE
DE
3.1 Maquette 3D
3.1.1 Réalisation d’une maquette 3D de l’Engelbourg
Dans le cadre du PFE de Solveig Berger en 2011, une maquette 3D de l’Engelbourg a été réalisée, à
partir de balayage laser réalisés avec un Trimble GX ainsi que de compléments de levé obtenus par
photogrammétrie. Cette maquette 3D est au final un fichier Sketchup constitué de 868725 faces
texturées avec des motifs simples. Un habillage simpliste a été ajouté, avec des arbres et buissons pour
donner un côté plus réaliste à la maquette.
FIGURE 4 – Extrait de la maquette 3D de l’Engelbourg [Berger, 2011]
Durant l’été 2012 une rénovation d’une partie du mur du grand logis a été nettoyé de sa végétation et
restaurée, et le laboratoire de photogrammétrie de l’INSA a profité de ce changement sur le site de
l’Engelbourg pour faire un relevé avec le récent scanner Faro Focus 3D - dont la fiche technique figure
en annexe -, afin de faire une mise à jour de la maquette 3D.
3.1.2 Mise à jour de la maquette
Acquisition des données
Une campagne de mesure spécifiquement destinée à la
modélisation du mur du logis a donc été effectuée en septembre
2012, suite aux travaux de réhabilitation d’août 2012. Elle va
permettre d’intégrer à la maquette 3D du site une modélisation à
jour mais aussi plus précise de cette partie des ruines.
FIGURE 5 – Levé au scanner laser du mur
du logis sur le site de l’Engelbourg
__________________________________________________________________________________
11
_________________________________________________________________________________________________________________
Avant ce travail, le mur du logis était modélisé grossièrement - comme le montre la figure 6 -, non pas
par négligence mais par le fait que lors des précédentes campagnes de mesure il était recouvert d’un
épais couvert végétal - comme on peut le constater sur la figure 7 - rendant très imprécise sa
modélisation.
FIGURE 6 –Extrait de la maquette 3D montrant la première modélisation du mur du logis
FIGURE 7 – Photos du mur du logis avant (à gauche) et après (à droite) les travaux de rénovation
Ainsi en effectuant cinq scannages depuis cinq stations différentes tout autour du mur, on obtient 5
nuages de points géoréférencés. Ce géoréférencement direct est possible grâce à la présence dans la
scène scannée de sphère dont les positions sont connues dans un repère défini (Lambert 93) grâce à
leur relevé préalable à l’aide d’une polygonation de rattachement effectuée au tachéomètre. Le
processus d’acquisition des données avec le scanner laser Faro Focus 3D en géoréférencement direct
Mise en place des
sphères dans la
scène
Réalisation d'un
cheminement
polygonal de
rattachement
Relevé des sphères
au tachéomètre
depuis des points
connus en
coordonnées
Balayage laser de la
scène depuis
différentes
positions
FIGURE 8 – Processus d’acquisition des données au scanner laser en géoréférencement direct
__________________________________________________________________________________
12
_________________________________________________________________________________________________________________
Traitement des données
Le processus complet de traitement des données acquises sur le terrain est donné par la figure 9.
Géoréférencem
ent des sphères
pour chaque
nuage
Géoréférencem
ent des points
pour chaque
nuage
Fusion des
nuages de
points
géoréférencés
Segmentation
du nuage de
points
Maillage du
nuage de points
FIGURE 9 – Processus de traitements des données suite au levé au scanner laser en géoréférencement direct
Traitement des nuages de points
Mon travail a débuté par la fusion de ces cinq nuages de points préalablement géoréférencés, afin de
débuter une segmentation globale dont le but est d’avoir in fine un nuage de points représentant
uniquement le mur du logis.
FIGURE 10 – Nuage de points après regroupement des cinq nuages de points initiaux
On commence donc par une segmentation grossière, afin d’éliminer les points les plus éloignés des
ruines. Ce premier travail est rapide et sans difficultés.
FIGURE 11 – Nuage de points après une première segmentation grossière
__________________________________________________________________________________
13
_________________________________________________________________________________________________________________
Il faut ensuite segmenter plus finement pour éliminer les points qui concernent non pas le mur en luimême mais ses abords proches (terrain naturel, pierres non rattachées au mur, végétation). Ce travail
est beaucoup plus minutieux et long, et va directement influer sur le résultat final (on délimite en fait
l’emprise future du maillage qui représentera le mur).
J’ai dans un premier temps effectué une segmentation trop imprécise qui m’a mené à des maillages
présentant de nombreuses incohérences, notamment à cause de points pris sur des éléments de
végétation. J’ai donc entrepris une nouvelle segmentation à partir du nuage de points précédemment
segmenté, afin d’affiner le « découpage » du mur, en m’aidant non seulement de la couleur enregistrée
durant le scannage et attribuée à chaque points mais également aux photos de la scène prises le jour de
la campagne de mesure.
FIGURE 12 - Nuage de points final obtenu après segmentation complète
Réalisation du maillage
A partir du nuage de points précédemment obtenu, on réalise un maillage qui consiste en un ensemble
de faces triangulaires ayant pour sommets des points directement issus du nuage ou obtenus par
interpolation.
Dans notre cas, le modèle produit va servir dans un cadre de réalité virtuelle dans lequel la taille
physique du modèle (et donc le nombre de faces du maillage) doit être limité. Il apparait donc
approprié de réaliser le maillage à partir de points interpolés, avec un nombre de faces maximum à ne
pas dépasser. Comme toujours durant cette étape, il faut faire un compromis entre la taille du modèle
et sa précision.
Dans 3D Reshaper, concernant la réduction du bruit dans le nuage de points, il apparait plus judicieux
de procéder par un « maillage en 2 étapes », comme l’évoque Solveig BERGER dans une annexe de
son PFE. En effet, lors de ce processus, le logiciel va d’abord créer un premier maillage « brut », avec
seulement des contraintes de gestion des trous – on peut ainsi lui dire de ne pas créer de faces pour des
trous dans le nuage de points supérieurs à une certaine taille. Le logiciel procède ensuite à une seconde
étape – appelée « affinage à erreur de corde » -, durant laquelle un nouveau maillage va être créé
suivant différents paramètres. Dans notre cas, suite à différents essais, il est apparu concluant
d’interpoler de nouveaux points en « raffinant à une erreur de corde » définie, en introduisant des
__________________________________________________________________________________
14
_________________________________________________________________________________________________________________
contraintes de taille et de nombre de triangles à créer. Il en résulte un maillage lissé par rapport au
premier maillage brut, mais sans pour autant estomper tous les détails, et réduisant le nombre de faces.
FIGURE 13 – Maillage du mur du logis avant et après l’étape
d’affinage à l’erreur de corde de 3D Reshaper
Il persiste dans ce maillage des incohérences qu’il faut corriger. Il peut s’agir de simples trous à
boucher (dus à un manque de points mesurés) comme de structures anormalement complexes,
nécessitant une intervention manuelle pour supprimer certaines faces et en recréer d’autres.
FIGURE 14 – Visualisation des trous présents maillage du mur du logis
__________________________________________________________________________________
15
_________________________________________________________________________________________________________________
FIGURE 15 – Exemple de remplissage d’un trou du maillage sous 3D Reshaper
Une fois ce travail terminé, on exporte ce modèle au format .obj pour pouvoir l’importer dans le
logiciel Trimble Sketchup afin de l’intégrer à la maquette 3D du site.
Intégration du modèle à la maquette 3D du site
Sous le logiciel Trimble Sketchup, on importe le modèle précédemment obtenu au format OBJ. Le
plugin permettant cette importation permet de conserver le géoréférencement en spécifiant simplement
l’unité des coordonnées du modèle.
Il s’agit alors de supprimer l’ancienne modélisation du mur et de raccorder correctement le terrain
naturel à la nouvelle modélisation. On constate que le « nouveau mur » est en retrait par rapport à
l’ancien. C’est tout à fait normal puisque l’ancien était recouvert d’une importante couche végétale
lors de de son scannage alors que le nouveau en a été débarrassé.
En revanche les abords du mur ont été modélisés d’après des scannages faits avant ces travaux et il y
avait donc à ce moment-là beaucoup de végétation qui n’a pas toujours été retirée au moment de la
segmentation (il faut noter que ces précédents scannages ont été faits avec un scanner – le Trimble GX
– n’enregistrant pas d’information colorimétrique, ce qui complique la tâche de segmentation du nuage
de points). Ainsi le nouveau mur s’intègre plutôt mal dans la maquette existante.
Une première solution consiste à supprimer certaines faces du terrain naturel proches du mur qui
apparaissent « aberrantes », puis à créer un maillage comblant l’espace entre le terrain naturel existant
et le mur, grâce au plugin Curviloft, comme l’a fait Solveig BERGER lors de son PFE.
__________________________________________________________________________________
16
_________________________________________________________________________________________________________________
FIGURE 16 – Réalisation d’un maillage de jonction entre la nouvelle
modélisation du mur du logis et le terrain naturel sous Sketchup
Réalisation d’un MNT intermédiaire
J’ai donc proposé de réaliser un MNT - modèle numérique de terrain - intermédiaire qui viendrait
s’intercaler entre le nouveau mur et le MNT de la maquette, et ce, plusieurs mètres autour du mur. A
partir du nuage de points obtenu avant segmentation et à l’aide du logiciel 3D Reshaper, il s’agit de ne
conserver que les points qui ne sont pas situés sur le mur, l’inverse de la première segmentation
effectuée en somme. Néanmoins, il convient de ne garder que les points correspondant au terrain
naturel (terre, pelouse et éventuellement rochers). On peut ensuite à partir de cet ensemble de points
créer un maillage. Ce dernier ne doit pas être trop lourd et contenir trop de faces pour rester cohérent
avec le reste de la maquette (les faces composant le terrain naturel sont relativement grandes) mais
doit être suffisamment détaillé pour bien se raccorder avec le maillage du mur du logis. On choisit
donc un maillage à partir de points régulièrement espacés (40 cm).
FIGURE 17 – MNT intermédiaire (en gris) autour du mur du logis (en violet)
__________________________________________________________________________________
17
_________________________________________________________________________________________________________________
Au Sud-Est du mur, malgré la segmentation préalable, le maillage obtenu comporte certaines
irrégularités dues à la végétation (racines, buisson) et à la nature mal définie du terrain (pierres, mottes
de terre), et il convient donc de supprimer certaines faces puis de reboucher quelques trous. Le
maillage est ensuite lissé pour homogénéiser le relief et parfaire l’intégration dans la maquette.
On importe ensuite sous Sketchup le maillage obtenu au sein de la maquette 3D. Son intégration se fait
en deux temps : on réalise dans un premier temps la jonction entre ce maillage et le maillage du mur
du logis, et s’en suit dans un second temps la jonction entre ce maillage et le terrain naturel de la
maquette. Il faut pour cela préalablement supprimer les faces du maillage qui s’intersectent ou se
superposent. On utilise alors le plugin Curviloft pour réaliser les maillages de jonction, en affinant
certains paramètres pour obtenir un terrain au rendu le plus juste et d’aspect le plus naturel possible.
J’ai pu réaliser la première jonction - entre la nouvelle modélisation du mur du logis et le MNT
intermédiaire – mais pas la seconde, par manque de temps et compte tenu de la relative difficulté de
ces manipulations sous Sketchup. En effet, les faces des maillages sont rarement accessibles une par
une, il est donc difficile de modifier la modélisation existante comme on le souhaite. Cela met à mon
avis en avant certaines limites – en plus de la performance générale - du logiciel Sketchup par rapport
à des logiciels plus professionnels comme 3D Reshaper.
3.1.3 Remarques et perspectives
La maquette comporte encore certaines incohérences, notamment au niveau du terrain naturel. De
plus, certaines parties de murs et de rochers sont modélisées assez grossièrement du fait qu’elles sont
recouvertes de végétation. Les travaux de restauration sur le site doivent se poursuivre dans les années
à venir, il est bien sûr intéressant de continuer à effectuer des scannages des parties dégagées et
restaurées pour tenir à jour la maquette 3D et rendre plus juste et plus fine la modélisation des parties
concernées. Il serait évidemment intéressant de pouvoir terminer l’intégration du MNT intermédiaire
autour de la nouvelle modélisation du mur du logis.
__________________________________________________________________________________
18
_________________________________________________________________________________________________________________
3.2 Restitution 3D du château de 1660
Une hypothèse de reconstruction du château - appelé techniquement "restitution" -, tel qu’il devait être
aux alentours de 1660 - soit en son dernier état avant sa destruction - a été établie par Katia KARLI
lors de son stage de DPEA Architecture et Archéologie. Elle se base techniquement sur la maquette
3D réalisée par l’INSA Strasbourg et réalise son modèle 3D de restitution à l’aide du logiciel
Sketchup.
Elle s'appuie sur deux documents principaux:
- le frontispice de Schenk issue d'une publication de la vie de Saint Thiébaud en 1628, représentant la
limite orientale de la ville de Thann vue depuis la plaine et sur lequel figure le château de
l'Engelbourg.
FIGURE 18 – Frontispice de Schenk
- un plan accompagné d'une légende détaillée, daté de 1657 et dressé par les autorités militaires
royales.
FIGURE 19 – Plan du château de l’Engelbourg daté de 1657
Mais elle prend également en compte des données archéologiques documentées par Martin
EHRETSMANN et Jacky KOCH, ainsi que des comparaisons et rapprochements avec le corpus
d'autres châteaux et villes fortifiées.
Elle obtient au final une modélisation volontairement simpliste – pour les partis-pris sur certains
aspects de détails incertains - du château tel qu’il devait être en 1660.
__________________________________________________________________________________
19
_________________________________________________________________________________________________________________
FIGURE 20 – Hypothèse de restitution du château de l’Engelbourg
__________________________________________________________________________________
20
_________________________________________________________________________________________________________________
3.3 Visite virtuelle
Une première visite virtuelle de l’Engelbourg a été réalisée par Solveig BERGER lors de son PFE en
2011. Par la suite, Nicolas BRIGAND a réalisé une étude complète à ce sujet dans le cadre de son
PRT (Projet de Recherche Technologique), en détaillant notamment comment inclure des vues issues
de la maquette 3D au sein de la visite virtuelle.
Il s’agit maintenant de parfaire la visite virtuelle à partir d’un nouvel ensemble de photos, en
améliorant si possible l’ergonomie et en intégrant une interface faisant le lien avec des pages web,
voire une base de données inclue dans le site internet dans lequel la visite sera intégrée.
Les photos dont nous disposons ont été prises au milieu des ruines du site mais également à ses
alentours, suivant le parcours et les haltes proposés par le guide de Thann. On se propose donc de
réaliser une visite de l’Engelbourg en deux parties : une promenade virtuelle regroupant les vues
panoramiques situées sur le parcours entre le centre-ville de Thann et l’Engelbourg, et une visite des
ruines mêmes.
La première, que nous appellerons « promenade virtuelle », se présente sous la forme de multiples
visites virtuelles à panorama unique qui seront ensuite accessible depuis un plan ou une carte sur le
site internet.
La seconde, que nous appellerons « visite virtuelle du château », est une simple évolution de la visite
virtuelle réalisée par Nicolas Brigand.
Lot de photos
n°1
Panorama 360°
x 180° n°1
Visite virtuelle
n°1
Lot de photos
n°1
Panorama 360°
x 180° n°1
Lot de photos
n°2
Panorama 360°
x 180° n°2
Visite virtuelle
n°2
Lot de photos
n°2
Panorama 360°
x 180° n°2
...
...
...
...
...
Visite virtuelle
unique
FIGURE 21 a – Principe de réalisation de la promenade
FIGURE 21 b – Principe de réalisation de la visite
virtuelle
virtuelle du château
Les photos ont été prises à l’aide d’une tête panoramique Manfrotto 303
SPH. Cette dernière permet d’effectuer des prises de vue avec un pas
angulaire horizontal et vertical défini. Selon le champ de vision offert par
l’objectif monté sur l’appareil photo, ces pas angulaires seront différents car
un recouvrement minimal doit être possible entre les photos. Ainsi, avec un
objectif 28mm monté sur un appareil photo reflex plein format (Canon EOS
5D), un pas angulaire de 30° en horizontal et en vertical est convenable. On
prend ainsi 12 photos à l’horizontal, 12 photos à 30° sous l’horizontale, 12
photos à +30° au-dessus de l’horizontale, 12 photos à +60° au-dessus de
l’horizontale et une photo au zénith, soit 49 photos au total.
FIGURE 22 – Tête panoramique
Manfrotto 303 SPH
__________________________________________________________________________________
21
_________________________________________________________________________________________________________________
Les photos sont assemblées grâce au logiciel Autopano Giga, de l’éditeur de logiciels Kolor, puissant
et relativement simple d’utilisation, tout en ayant de nombreuses possibilités de reprise manuelle en
cas de résultat automatique non satisfaisant. Nous obtenons des images panoramiques, en projection
équirectangulaire donc adaptée à une visualisation sphérique au sein d’une visite virtuelle. En
revanche, le champ couvert verticalement est inférieur à 180° (on ne voit pas le nadir, là où était posé
le trépied). Il est néanmoins dans ce cas possible d’obtenir un panorama couvrant un champ
horizontal de 360° et un champ vertical de 180° (vue sphérique totale), en forçant la valeur de champ
vertical. La partie manquante au nadir est alors comblée par des pixels noirs, que nous pourrons
remplacer par la suite, par exemple par une rose des vents. Avec Autopano Giga, on génère donc pour
chaque station un panorama au format JPEG, d’une résolution de 11400 x 5700 (environ 50% de la
résolution maximale pouvant être obtenue avec les photos d’origine) à 72 dpi, avec un paramètre de
qualité de 11 sur 12. La méthode d’interpolation est l’interpolation bicubique. Tous ces paramètres
visent à obtenir une image finale offrant un bon compromis entre qualité et taille de fichier.
3.3.1 Création de panoramas issus de la maquette 3D
Il est possible avec le logiciel Sketchup et le plugin CubicPano Out de réaliser des panoramas issus de
la maquette 3D. Il faut pour cela se placer à hauteur d’yeux au sein du modèle grâce à la commande
« Position Camera » située dans le menu « Camera ». Il faut également se placer en mode de vue
« perspective ». On peut alors lancer le plugin CubicPano Out, et choisir la résolution des images
« faces de cube » qui seront générées.
3.3.2 Ajout d’une rose des vents sur les panoramas de la visite virtuelle
Le principe est d’insérer une rose des vents comme menu interactif au sein des panoramas de la visite
virtuelle à l’emplacement du nadir (« en bas », à l’opposé du zénith). Pourquoi une rose des vents ?
Car c’est une figure circulaire, donc tout à fait indiqué dans sa forme pour intégrer un panorama
sphérique, et parce que ses branches sont autant d’éléments qui pourront être rendus interactifs ou
« cliquables », redirigeant vers certaines parties du site ou vers des pages de site internet extérieurs, via
des liens html.
Il existe une fonction Nadir dans le logiciel Panotour Pro qui semble toute indiquée pour cette
tâche car elle permet d’ajouter une image exactement au nadir d’un panorama. Il est possible de
changer la taille de l’image insérée au sein du panorama mais pas sa position (elle est centrée
exactement sur le nadir). De plus l’image ainsi ajoutée n’apparait pas sur l’aperçu de panorama utilisé
pour définir les hotspots. Il est donc très difficile de placer des hotspots sur la rose des vents.
Il existe une autre solution pour ajouter une image au nadir : il s’agit de convertir les panoramas de la
visite virtuelle sous forme d’images « faces de cubes », pour pouvoir insérer dans l’image de la face
« du bas » de la vue cubique, que l’on appellera face nadirale. L’avantage ici est que l’on peut à la fois
modifier la taille de l’image insérée mais également sa position, contrairement à la fonction Nadir de
PanotourPro. Il s’agira alors d’assembler ces faces de cube avec la nouvelle face nadirale pour
retrouver un panorama en projection equirectangulaire – pour une visualisation « sphérique ».
__________________________________________________________________________________
22
_________________________________________________________________________________________________________________
Réalisation de la rose des vents
A partir de l’image de la figure 23, on réalise une rose des vents à
l’aide du logiciel Gimp 2. Les points cardinaux sont retirés, l’image
est colorisée dans une teinte orangée. On ajoute un peu de bruit et
on lui donne un effet « peinture à l’huile » pour la rendre plus
artistique et pour qu’elle s’intègre mieux dans les images en
paraissant ainsi moins « brute ». Enfin, on établit la transparence du
fond pour parfaire l’intégration de l’image – qui sera sauvegardée
au format PNG.
FIGURE 23 – Rose des vents
(source :
http://commons.wikimedia.org/wiki/
File:Brosen_windrose-fr.svg )
Intégration de la rose des vents
Une fois les faces de cube générées à partir des panoramas photos ainsi qu’à partir de la maquette 3D,
il faut intégrer la rose des vents sur les faces nadirales. Là, un problème apparait : la rose des vents ne
bouche pas complètement certain "trou" du nadir, et si on l'agrandit ses branches sortent de l'image.
Deux solutions sont possible pour cela : soit pour chaque panorama on assemble les faces de cube
pour intégrer la rose des vents agrandies de façon à ce que les pointes des branches ne soient pas
coupées, soit on déforme la rose des vents de façon à ce que sa partie centrale soit plus importante.
C'est cette deuxième solution que j'ai choisie.
A l'aide du logiciel Gimp, j'ai appliqué un premier filtre de
distorsion, nommé "lentille optique", recréant l'effet de la
déformation causée par une lentille dont on peut définir l'indice
de réfraction. Ainsi avec un indice de réfraction de 1,03 on
obtient un résultat satisfaisant. Pour pallier au léger
agrandissement des branches résultant de la distorsion
précédente, on applique un second filtre de distorsion, nommé
"distorsion de lentille" en jouant sur le paramètre "bordures" dont la valeur peut être réglée de -100 à 100, la valeur par défaut
étant 0. En définissant ce paramètre à 100, les extrémités des
branches de la rose des vents sont légèrement raccourcies.
FIGURE 24 – Rose des vents modifiée
On peut ainsi superposer la nouvelle rose des vents à chacune des images nadirales.
3.3.3 Import des nouveaux panoramas et réalisation de la visite virtuelle
On importe ensuite chacun des panoramas sous la forme de faces de cubes dans le logiciel Panotour
Pro, via la fonction « Import » et « Faces de cube ».
Il s’agit à présent de relier les différents panoramas entre eux de façon logique. Il faut à la fois pouvoir
passer d’une scène à sa voisine, mais également passer de la vue « photo » à la vue « maquette 3D ».
__________________________________________________________________________________
23
_________________________________________________________________________________________________________________
Pour passer d’une scène à une scène voisine, j’ai choisis, contrairement aux visites virtuelles réalisées
par Solveig BERGER et Nicolas BRIGAND, des hotspots sous forme de flèches, qui me paraissent
naturelles pour guider la navigation du visiteur.
Pour passer des vues « photo » aux vues « maquette 3D » correspondantes, j’ai choisi d’utiliser des
hotspots ponctuels animés que j’ai moi-même créés (figure 24).
FIGURE 25 – Extraits des images animés servant pour
les hotspots lian les panoramas en vue « photo » et
ceux en vue « maquette 3D »
Concernant la rose des vents au nadir, on utilise la fonction Ajouter un polygone
de l’éditeur des hotspots.
On sélectionne ainsi la zone que l’on veut rendre « cliquable » et mettre en lien avec une page du site
internet.
__________________________________________________________________________________
24
_________________________________________________________________________________________________________________
3.4 Géolocalisation de photos
Des photos de l’Engelbourg prises de différents points de vue m’ont été transmises par Céline
STEINER. Pour mettre en valeur ces photos, il m’est apparu intéressant de pouvoir placer leur lieu de
prise de vue sur une carte.
Le premier moyen d’y arriver aux yeux d’un topographe averti, connaissant les paramètres de prises
de vue de la caméra ainsi que des références connues en coordonnées dans la photo, est d’effectuer
une résection spatiale pour déterminer les coordonnées 3D (ou 2D, surtout si l’on manque de
références connues dans la photo). Mais cela implique des calculs assez complexes (bien que
parfaitement documentés et pouvant être réalisés à l’aide de programmes informatiques), d’autant plus
que les photos en question ont été pour la plupart redimensionnées.
Partant du postulat que les images ont été redimensionnées mais pas recoupées et que les informations
extraites des paramètres EXIFS des photos sont exacts, on peut imaginer une méthode de
géolocalisation approchée.
A partir de la longueur focale utilisée, de la taille du capteur ainsi que de la largeur de champ couvert
au niveau des ruines, on peut facilement calculer une distance d’éloignement par rapport aux ruines. Il
s’agit ensuite de trouver dans chaque photo des repères facilement identifiables sur une carte ou une
image satellite pour en déduire l’orientation de la prise de vue. Nous disposons d’une direction, d’une
distance et d’un point (les ruines de façon générale), nous sommes donc topographiquement parlant
dans le cas d’une détermination d’un point rayonné. On suppose évidemment pour cela que la prise de
vue est faite dans un plan horizontal. Bien que ce n’est jamais exactement le cas, les prises de vues ne
sont ni en contre plongée ni en plongée marquée. Si l’on estime l’angle de prise de vue maximum par
rapport à l’horizontale comme étant de 15°, on surestime alors au maximum la distance de prise de vue
de 3,5%, ce qui est tout à fait acceptable quand on considère la précision de définition de largeur de
champs couvert par l’image au niveau des ruines, que l’on estime être de l’ordre de 10%.
La photo de la figure 26 a été prise avec un appareil photo Canon dont le capteur est au format APS-C
Canon. Le coefficient de conversion pour obtenir la prise de vue équivalente avec un capteur plein
format (24mm x 36mm) est 1,6. La focale utilisée ici est 55mm, et le champ couvert horizontalement
au niveau du centre des ruines équivaut à une largeur de 310m. Pour obtenir cette mesure de 310m, on
a considéré deux points situés dans un même plan orthogonal à la direction de prise de vue et passant
par le centre des ruines. Sur un plan topographique de l’Engelbourg, on a mesurée la distance entre ces
points (figure 27, en orange), perpendiculairement à l’axe de prise de vue de la photo (en rouge).
__________________________________________________________________________________
25
_________________________________________________________________________________________________________________
Environ 310 m
Environ 70 m
FIGURE 26 – L’Engelbourg photographié depuis le Rangen
70 m ±10%
FIGURE 27 – Mesure de distance sur un plan topographique de l’Engelbourg
__________________________________________________________________________________
26
_________________________________________________________________________________________________________________
Ainsi, on calcule la distance de prise de vue depuis le centre des ruines :
Environ 760 m
FIGURE 28 – Report de la distance de prise de vue depuis le centre des ruines
(source de l’image de fond : Google Maps)
200 m
FIGURE 29 – Zone de positionnement du point de prise de vue
(source de l’image de fond : Google Maps)
__________________________________________________________________________________
27
_________________________________________________________________________________________________________________
A partir de la distance de prise de vue depuis les ruines, on obtient la position du point de prise de vue
le plus probable (figure 28). Mais cette position est largement imprécise.
Dans le cas montré en exemple, si l’on considère une erreur de mesure de la distance sur le plan de
10%, cela entraine une erreur de 31m sur la distance de champ horizontal couvert au niveau du milieu
des ruines. Cela correspond à une incertitude sur la distance de prise de vue aux ruines de 76m. De
même, si on considère une imprécision angulaire de la direction de prise de 5°, cela entraine une
sensibilité de positionnement perpendiculairement à la directement de prise de vue de 66m. On peut
ainsi représenter l’ellipse d’incertitude de positionnement pour cet exemple (figure 29).
Le point bleu représente le point de prise de vue probable - au bord d’un large chemin - compte tenu
de la configuration des lieux dans ce cas.
On peut alors déterminer à l’aide de Google Maps les coordonnées correspondant à la position la plus
probable de prise de vue ainsi déterminée.
Bien sûr cette méthode s’avère très imprécise d’un point de vue topographique, et souffre d’une
grande dépendance à un paramètre difficilement déterminable de façon précise : le champ horizontal
couvert par la photo. Mais dans la plupart des cas, on peut s’aider d’éléments identifiables proches du
point de prise de vue apparaissant sur la photo, et ainsi affiner le positionnement. Pour les photos
ayant un angle de champ de vision important, il est même très facile de positionner le point de prise de
vue sur un plan sans aucun calcul.
__________________________________________________________________________________
28
MISE EN PLACE D’UN SITE INTERNET
_________________________________________________________________________________________________________________
4. MISE EN PLACE D’UN SITE INTERNET
4.1 Création d’un site avec Joomla !
Note : un grand nombre de termes de cette partie sont définis dans le glossaire à la fin du mémoire.
4.1.1 Mise en place
Avant de mettre le site internet en ligne, il est possible de l’installer sur un serveur local. Concernant
Joomla !, il existe une plateforme de développement en version portable basée sur une version
simplifiée de serveur WAMP (Windows Apache MySQL PHP), qui ne possède ni serveur SMTP ni
serveur FTP, appelée « Server 2Go ».
Serveur Joomla! :
Un tutoriel présent en annexe, réalisé par le créateur du serveur 2Go, détaille l’installation complète
d’un site Joomla !. A noter qu’il mentionne la version 1.5 de Joomla!, mais les indications données
sont également valables pour la version 2.5.
On lance le serveur 2Go, qui ouvre automatiquement le navigateur choisi (cela peut être le Firefox
portable fourni avec le serveur 2Go). Attention, en fermant le navigateur, le serveur n’est pas arrêté !
On doit également arrêter le serveur après utilisation, dans la barre des tâches – aussi appelée
« barre tray ».
Nous avons accès à une page d’administration des bases de données « phpMyAdmin », et aux sites
installés, en « back-end » (interface d’administration en arrière-plan) et en « front-end » (site tel que
vu par les visiteurs).
Pour débuter dans l’administration d’un site Joomla!, on pourra se référer au guide en annexe édité par
l’agence de communication Com’3elles pour une première formation rapide à l’administration d’un
site internet Joomla!.
Installation du site internet Joomla! :
Joomla! 2.5 est la dernière version stable en date. Son installation est nécessaire, c’est la base du site
internet à créer.
Lien de téléchargement (consultation en mars 2013) : http://aide.Joomla!.fr/telechargements/Joomla!2-5-package-d-installation-et-patchs
On télécharge Joomla! 2.5, on extrait le contenu de l’archive sous la forme d’un dossier que l’on copie
le répertoire « htdocs » du serveur 2Go.
En lançant le serveur 2Go, on a accès à la version de Joomla! mise en place, il faut alors suivre les
indications concernant son installation.
__________________________________________________________________________________
29
_________________________________________________________________________________________________________________
4.1.2 Fonctionnement général de Joomla !
Template
Le premier élément de personnalisation du site internet Joomla! qu’il convient de choisir est un
template. Pour un site internet, un template est un gabarit d’organisation et de présentation des
données sur les différentes pages. Il possède une mise en page définie, notamment par des positions
déterminées dans lesquelles on place les divers éléments des pages. Un template sert ainsi à séparer le
fond de la forme (un template se présente sous la forme de fichier de style ou fichier CSS), même si
l’on peut en fait modifier la forme dans un site web par d’autres moyens.
L’élément le plus important que gère un template est le positionnement des modules. Il définit des
positions au sein d’une page, qui seront utilisées ou non par l’un ou l’autre module qui sera greffé à
chacune des pages.
Le template que j’ai choisi – Joomspirit 18 - est libre, gratuit et relativement simple, avec quelques
options de personnalisation détaillées en annexe. Il a été réalisé par Joomspirit
(http://www.joomspirit.com). Les différentes positions d’une page type sont représentées sur la figure
30.
FIGURE 30 – Positions offertes par le template Joomspirit 18
Il est possible de disposer des modules dans chacun de ces emplacements.
Prenons l’exemple de la page d’accueil du site de l’Engelbourg (figure 31).
Une image est placée en position « logo » pour créer un en-tête à la page web. Elle a été insérée via un
module personnalisé, qui se présente comme un éditeur de texte, dans lequel il est notamment possible
d’insérer des images.
__________________________________________________________________________________
30
_________________________________________________________________________________________________________________
Le menu principal est en position « menu ». Un module menu a été créé, après avoir préalablement
configuré le menu principal en question via une rubrique d’administration dédiée.
Le champ de recherche est lui aussi un module, placé en position « breadcrumb ».
Un fil d’actualités est en position « user 5 », mais comme il n’y a aucun des autres modules « user »
qui sont utilisés, il occupe l’équivalent de la position « main_component ». Le module utilisé est un
diaporama, « ARI Image Slider », qui affiche tous les articles de la catégorie « Actualités ».
Pour chaque module, on définit les liens de menu, c’est-à-dire les pages selon Joomla, pour lesquels le
module s’affiche à la position indiquée. Dans Gestion des modules on sélectionne alors le menu
concerné, et en cliquant dessus on accède au Module menu. Dans la partie Assignation des menus, il
suffit alors de cocher les pages sur lesquelles le menu devra être affiché.
FIGURE 31 – Page d’accueil du site internet de l’Engelbourg
Le template Joomspirit 18 est simple et sobre, mais possède par défaut un bandeau noir en arrièreplan qui est plutôt dérangeant visuellement parlant. Il est mis en place d’après un fichier
« background.jpg » situé dans le répertoire images du template. Il suffit de modifier cette image remplacer la partie noire par une couleur au choix par exemple - pour modifier l’arrière-plan du site.
Les menus
Un menu comprend des liens de menu qui redirige vers des pages du site. Ainsi, le menu principal
d’un site largement visible sur sa page d’accueil va être la porte d’entrée principale vers le reste du
site. Un menu Joomla! est à la fois une entité à part entière, qui possède une partie d’administration
réservée - Gestion Menus -, mais c’est également un module que l’on va pouvoir positionner à un
emplacement défini sur des pages définies, comme tout autre module. Ainsi pour créer un menu, on
crée tout d’abord un menu en tant que tel, puis un module menu qui fera appel au menu créé. Dans la
gestion des menus, on pourra ensuite créer des liens de menu qui permettront de créer de nouvelles
pages du site.
__________________________________________________________________________________
31
_________________________________________________________________________________________________________________
Pour éviter que le nom d’un lien de menu soit ajouté en contenu principal (au-dessus d’un article
typiquement) comme titre (intégré dans une balise H1) avant même un éventuel titre d’article, il faut
aller dans la gestion de menu, puis à la page de modification du lien de menu concerné. Dans les
paramètres d’affichage de la page (à droite dans la page de configuration), on coche « Non » pour
« Afficher l’en-tête de page ».
Par ailleurs, il est intéressant d’ajouter qu’au niveau des articles, en l’absence de paramétrage par
défaut (pour tous les articles) ou particulier (un article spécialement) du non affichage du titre de
l’article, celui-ci va s’afficher également en en-tête de l’article.
4.1.3 Extensions diverses
Un certain nombre de plugins sont préinstallés dans le Joomla! ! 2.5, mais ce sont des plugins assez
« basiques » et pour plus de fonctionnalités dans le site il faut télécharger et installer des extensions
supplémentaires (certaines sont payantes, mais on en trouve un bon nombre de gratuites).
Plugin Cartes Google Maps
Ce plugin permet l’insertion d’une carte Google Maps. On définit les paramètres d’affichage via la
gestion des plug-ins, et on intègre le code html ainsi obtenu dans un article ou un composant
personnalisé pour l’afficher à l’emplacement souhaité. L’intégration se fait via un code d’appel dans
lequel on peut notamment définir le zoom de base (exemple : {mosmap zoom=’13’}, où le 13 est un
niveau de zoom, compris entre 0 - la vue la plus large - et 20 - la vue la plus resserrée).
Plus d’informations concernant cette extension sont disponibles sur internet à l’adresse
suivante : http://extensions.Joomla!.org/extensions/1147/details
Note : on peut également intégrer une carte Google Maps personnalisée en ayant un compte Google.
On peut alors ajouter des points de repère ouvrant une infobulle contenant du texte, une photo ou une
vidéo. Il est ensuite possible d’afficher la carte ainsi créée dans le site web via une « iframe » dont le
code html est directement fourni par Google Maps.
Diaporama d’images ARI Image Slider
ARI Image Slider est inclus avec le template Joomspirit 18, mais à installer séparément. Il permet
d’afficher des images que l’on peut faire défiler et/ou qui défilent automatiquement, avec différentes
transitions possibles, etc. Il est par contre nécessaire de retailler les images à la taille désirée du
diaporama.
Lecteur vidéo HD Webplayer
HD Webplayer est un lecteur vidéo épuré que l’on peut facilement intégré où l’on veut dans son site,
et qui lit les vidéos en haute définition. Le rendu est joli, par contre le mode de lecture « streaming »
implique que le formatage de la vidéo soit compatible, et dans le cas d’une vidéo au format FLV
(flash) simple, cela ne semble pas être le cas.
Il faut donc convertir la vidéo (par exemple au format MP4), peu importe sa résolution car le lecteur la
redimensionnera automatiquement. Il faudra par contre veiller à paramétrer une taille de lecteur
proportionnelle aux dimensions de la vidéo.
Pour cela le logiciel gratuit SUPER (pour « Simplified Universal Player Encoder & Renderer »)
convient très bien.
__________________________________________________________________________________
32
_________________________________________________________________________________________________________________
Plus d’informations concernant ce logiciel sont disponibles sur internet à l’adresse suivante :
http://www.erightsoft.com/SUPER.html
On peut même, pour convertir une vidéo, se passer d’un logiciel ad-hoc et faire cela directement en
ligne par envoi de la vidéo originale et téléchargement de la vidéo convertie (suppose d’avoir une
connexion internet suffisamment rapide pour limiter les temps de transfert). J’ai personnellement
utilisé le site http://www.mediaconverter.org pour convertir une vidéo au format FLV en vidéo au
format MP4, et j’ai été satisfait du résultat.
A noter que cette extension implique l’installation d’un composant d’administration, d’un plugin
Webplayer, d’un module Webplayer et de trois modules complémentaires : Webplayer Gallery,
Webplayer search et Webplayer Upload. Tout cela est lié à la gestion du lecteur via un composant à
part entière (accessible via le menu « Composants » dans l’administration du site Joomla!). On peut à
partir de celui-ci (onglet Videos) importer des vidéos et choisir leur ordre de lecture dans le lecteur.
On peut ensuite créer un module utilisant ce lecteur (pour cela, quand on crée un module on choisit
comme type de module « Webplayer »), et on peut par exemple l’incorporer en haut de page sous la
barre du menu principal (dans le cas du template Joomspirit 18), pour une ou plusieurs pages du site.
On peut également l’assigner en tant que composant principal (là où les articles s’affichent) d’une
page accessible depuis un lien du menu principal (on peut dans ce cas-là créer un lien de menu nommé
« Vidéos »).
Note sur l’ordre des vidéos : dans la gestion du Webplayer, on définit l’ordre des vidéos. Dans le cas
d’un module pour lequel les vidéos sont visionnées dans l’ordre (définit lors de la création du
module), il faut dans la gestion du Webplayer « ranger » les vidéos dans l’ordre souhaité. Et cet ordre
change à chaque nouvelle vidéo chargée puisque cette dernière passe automatiquement en première
position. Pour remedier à cela, on prendra soin de définir LA vidéo associée à chaque module
Webplayer (à moins que l’on veuille une lecture de toutes les vidéos).
On remarquera qu’avec la version gratuite de l’extension un logo « HD Webplayer FREE » est apposé
au lecteur vidéo (moins gênant quand la vidéo est en plein écran).
Par contre, lorsque l’on veut utiliser cette extension pour afficher plusieurs vidéos différentes à des
endroits différents du site, il faut créer un nouveau module mais la spécification de la vidéo à afficher
ne peut se faire qu’en créant via les paramètres de gestion de l’extension HD Webplayer (à na pas
confondre avec un module) une catégorie spécifique – le module affiche ainsi seulement les vidéos de
cette catégorie. Même avec cette solution je ne suis pas parvenu à afficher une seconde vidéo dans un
nouveau module.
Plus d’informations concernant cette extension sont disponibles sur internet à l’adresse suivante :
http://www.hdwebplayer.com/
Lecteur vidéo Videobox
Videobox : un autre lecteur vidéo qui grâce à l’intégration de balises très simples dans un article ou un
module (du type « {videobox}video_ID{/videobox}) permet d’afficher une vidéo Youtube, Vimeo ou
en HTML5 via une URL. Il suffit d’installer et d’activer l’extension pour que les balises soient prises
en compte. On peut de plus définir quelques paramètres comme la taille du lecteur affiché,
l’alignement, la mise en lecture automatique ou encore le démarrage de la vidéo avec un offset.
__________________________________________________________________________________
33
_________________________________________________________________________________________________________________
http://hitko.si/extensions/Joomla!/videobox
Par rapport à l’extension HD Webplayer présentée précédemment :
Ses avantages sont :
- il n’y a pas de modules à créer, juste des balises à insérer ;
- la publication aisée de multiples vidéos sur différentes pages du site ;
- il n’y a pas de conversion de vidéo à faire.
Ses inconvénients sont :
- la nécessité de mettre la vidéo en ligne, que ce soit sur Youtube, Vimeo ou de disposer d’une vidéo
HTML5 ;
- le temps de mise en ligne d’une vidéo plus long qu’un simple « upload » sur un serveur (surtout pour
Vimeo).
Diaporama Free Slider SP1
Free Slider SP1 est un diaporama qui permet de faire défiler des articles – ou du moins une
introduction, illustrée ou non, d’un article – d’une ou plusieurs catégories. Très pratique car cela
permet d’avoir un affichage dynamique des articles en « vedette » ou d’actualité, sans prendre
beaucoup de place visuellement sur la page (car les articles défilent).
A noter que si un article repris par ce module comprend une image, elle sera reprise dans l’affichage
de la diapositive, ce qui pose facilement problème quand l’image est plus grande que la taille du
diaporama. Pour cela, on peut dans la gestion de l’article concerné définir une image d’intro (menu
Images et liens, à droite sur la page de gestion de l’article). On prendra alors soin de définir une image
de taille inférieure à la taille d’affichage du diaporama, pour pouvoir la visualiser en entier (car elle
n’est pas redimensionnée).
http://www.joomshaper.com/category/15-free-slider-sp1
Créateur de menus MaxiMenu CK
Maxi Menu CK est une extension que j’ai utilisée pour créer des menus déroulant sous des liens de
menu.
http://www.Joomla!ck.fr/en/Joomla!-extensions/maximenu-ck
Galerie d’images Phoca Gallery
Phoca Gallery est une extension permettant l’affichage de galeries d’images avec une gestion des
descriptions assez bien faite, c’est une référence dans le domaine. Elle est composée d’un composant
principal ainsi que de différents modules et plugins.
http://www.phoca.cz/phocagallery
__________________________________________________________________________________
34
_________________________________________________________________________________________________________________
Recherche, indexation et base de données
Le site créé va contenir un grand nombre de données (documents divers : images, textes, références,
croquis, etc.) qu’il sera important de trouver grâce à un moteur de recherche. Ces données seront bien
sûr présentes sur le site et donc accessibles d’une manière ou d’une autre via différents menus, mais
elles devront également pouvoir se retrouver par des mots clés ou divers éléments liés (ex : une date,
un lieu, une personne). L’extension Fly06 Modules Search Plugin permet ainsi d’étendre la recherche
du moteur de recherche intégré nativement à Joomla ! aux différents modules publiés sur le site.
http://extensions.Joomla!.fr/extensions/liste-des-derniers-fichiers/1790-accueil/4509-fly06-modulessearch-plugin
Plan du site
On utilise pour créer puis afficher le plan du site l’extension Xmap .
http://Joomla!.vargas.co.cr/en/downloads/components/xmap
Formulaire de contact
Le formulaire de contact proposé nativement sous Joomla! n’étant pas très satisfaisant, on peut
installer le plugin Fox contact pour remplir cette fonction.
On peut ainsi créer un menu avec un unique lien de menu (Contact) que l’on disposera par exemple à
droite sous la carte sur la page d’accueil et en bas à droite sur toutes les pages (à côté de Plan du site).
http://www.fox.ra.it/downloads/category/1-fox-contact-form.html
4.1.4 Intégration d’une visite virtuelle (animation flash SWF)
Une première façon d’intégrer une animation flash est de profiter de la gestion de média incluse dans
Joomla! ! 2.5, en d’autres termes d’utiliser le lecteur intégré. On crée ainsi un article dans lequel on
insère l’animation grâce à l’outil « Insérer/Modifier un média » dans la barre d’outils d’édition (icône
bande de film cinéma).
Bilan après essai : des messages d’erreurs apparaissant au lancement de l’animation flash et le premier
panorama n’est pas affiché (la visite s’ouvre sur un écran noir).
Une seconde façon est, toujours dans un article, d’intégrer une « iframe » à l’aide d’un code HTML.
4.1.5 Intégration d’un modèle 3D grâce à l’API Google Earth
L’API Google Earth est la solution qu’a retenue Clément ANET lors de son PFE pour l’intégration
d’un modèle 3D en ligne. Il détaille son utilisation dans son mémoire de la page 37 à la page 43.
J’ai pu effectuer un essai d’intégration de la maquette mais nous avons par la suite choisi de ne pas
l’intégrer au site web, dans sa version publique tout du moins.
A noter que pour intégrer du code HTML à un article, il faut dans le menu Configuration du site
sélectionner en tant qu’Editeur par défaut l’Editeur - Non WYSIWYG, et de sauvegarder. On pensera
ensuite, après avoir intégré le code HTML dans l’article souhaité, à rétablir l’éditeur d’origine dans le
menu de configuration.
__________________________________________________________________________________
35
_________________________________________________________________________________________________________________
4.1.6 Ajout d’une image « interactive » dans un article
On peut insérer dans un article une image et ajouter quelques lignes de code html détaillant les zones
de l’image (coordonnées pixels) redirigeant vers un lien extérieur ou activant un élément comme par
exemple une petite fenêtre intégrée (« iframe). Mais cela est long et complexe au premier abord pour
un non initié au code html, surtout si l’on veut obtenir un résultat satisfaisant au niveau esthétique et
pratique.
Une autre solution est offerte par Thinglink (http://www.thinglink.com). Ce site internet permet de
créer des images (100 premières gratuite pour chaque compte créé) dans lesquelles sont placés des
marqueurs ouvrant une infobulle ou un lien externe. On peut ainsi placer de multiples marqueurs pour
créer une interactivité dans l’image. Par exemple pour l’Engelbourg, le plan des travaux effectués se
prête volontiers à ce procédé : on crée un marqueur sur chaque partie du site où il y a eu des travaux, et
on attribue à ce marqueur une description des travaux effectués.
Il faut par contre pour insérer dans Joomla! l’image Thinglink une fois créée suivre une procédure
d’édition du template utilisé, détaillée ici : http://www.thinglink.com/help/Joomla!
Le résultat est satisfaisant surtout en regard de la facilité et la rapidité de création d’une telle image.
4.1.7 Utilisateurs et groupes d’utilisateurs
Voici les différents groupes d’utilisateurs proposés par Joomla! :
FIGURE 32 – Tableau des droits selon le groupe d’utilisateur sous Joomla !
D’autres peuvent être créés sur le modèle d’un de ceux-ci.
On peut ensuite créer des utilisateurs faisant partie d’un ou plusieurs groupes d’utilisateurs. Un
utilisateur possède un identifiant et un mot de passe pour se connecter en front office, en back office
ou les deux (selon le ou les groupes auxquels il est affecté).
Pour plus d’information à ce sujet, les deux liens suivants sont particulièrement intéressants :
http://www.support-Joomla!.com/administration/gestion-des-utilisateurs/groupes-dutilisateurs
http://www.Joomla!bc.com/Joomla!-15/niveau-debutant/gestion-utilisateurs/groupes-de-droits
Si on souhaite autoriser l’affichage d’un lien de menu seulement pour les visiteurs « publiques », on
peut se référer aux indications données par ce sujet : http://forum.Joomla!.fr/showthread.php?148046
__________________________________________________________________________________
36
_________________________________________________________________________________________________________________
Il est également très intéressant d’utiliser les ACL (Access Control List). Concrètement et simplement,
pour par exemple donner l’accès à une catégorie d’articles à un groupe d’utilisateur et pour l’interdire
à d’autre, il suffit d’aller dans la Gestion des catégories (onglet du menu principal d’administration
Contenu). On coche ensuite la catégorie désirée puis on choisit Modifier en haut à droite. On accède
alors à la page de modification de la catégorie, en bas de laquelle se trouvent les paramètres de droit de
la catégorie. On peut alors simplement régler tous les paramètres de droits relatifs à la catégorie pour
chacun des groupes d’utilisateurs.
__________________________________________________________________________________
37
_________________________________________________________________________________________________________________
4.2 Mise en place d’une base de données au sein de Joomla!
Une des problématiques de ce projet de fin d’études est d’intégrer une base de connaissances
concernant l’Engelbourg au sein du site internet créé.
Joomla! gère nativement des bases de données diverses pour la tenue d’un site internet, mais il
apparaissait nécessaire de développer ou d’exploiter une application spécifique au sein de
Joomla! pour mettre en place une base de données qui peut être à la fois consultée, enrichie et éditée
depuis le site internet lui-même.
4.2.1 Essai de l’extension Seblod
Seblod est un CCK. Un CCK(Content Construction Kit) vous permet de créer et gérer des types de
contenus.
Par type de contenu, on sous-entend pour Joomla! :
- un article
- un utilisateur
- un formulaire
- un template …
Une description complète en anglais est disponible sur internet à l’adresse suivante :
http://www.seblod.com/support/documentation/seblod-2x/getting-started/introduction/1570-what-isseblod.html
Intégré à Joomla!, Seblod peut par exemple permettre l’édition d’articles avec de nouveaux champs
entièrement définis par l’administrateur. On pourra alors créer un module de recherche personnalisé
permettant des recherches multi critères selon chacun des champs voulus.
On peut donc, pour la gestion des données de l’Engelbourg, créer une sorte d’article pour chaque
donnée, avec de nombreux champ reprenant toutes les metadonnées nécessaires (date, type, lieu,
personne, etc). On classe tous ces articles –en fait des enregistrements -, présentés sur le site sous
forme de « fiches », dans des catégories, pour un accès simple et global, avec en plus un module de
recherche
dédié
pour
un
accès
précis
à
une
ou
plusieurs
données.
Pour créer ces « fiches », on crée avec Seblod un formulaire personnalisé avec les champs souhaité.
Ainsi au final dans notre site on a une section « Données » où l’on peut :
- ajouter des données en remplissant un formulaire (avec à la fin le téléchargement de la donnée) ;
- visualiser les données triées par catégorie et listées ;
- effectuer une recherche d’après certaines valeurs de champs.
Les étapes de mise en place d’un formulaire et d’une liste de recherche sont les suivante :
- créer une nouvelle catégorie pour stocker les entrées ;
- créer un nouveau répertoire ;
- créer un nouveau type de contenu, dans le dossier créé précédemment ;
- créer des champs pour caractériser les données ;
- on place les champs dans le formulaire d’administration ;
__________________________________________________________________________________
38
_________________________________________________________________________________________________________________
- on place les champs dans le contenu ;
- créer un nouveau type de recherche (sous le bouton « Nouveau », on choisit de pré-remplir la
recherche avec le type de contenu créé précédemment) ;
- on ajoute les champs de recherche voulus ;
- on crée un menu à l’emplacement voulu qui pointe vers le formulaire de recherche que l’on vient de
créer ;
- on ajoute des données via la « Gestion des articles », sous « Nouveau », on choisit le type de
formulaire correspondant au type de contenu que l’on vient de créer.
Pour aller plus loin, de nombreux tutoriels sont disponibles sur internet à l’adresse suivante :
http://www.seblod.com/support/forum/Getting-Started--FAQ.html
Malheureusement, je n’ai pas réussi à mettre en place correctement l’ensemble formulaire et liste de
recherche pour le rendre totalement opérationnel malgré l’aide que l’on a pu m’apporter via le forum
officiel Seblod (http://www.seblod.com/support/forum/Discussions-G%C3%A9n%C3%A9rales.html).
J’ai ainsi décidé de rechercher un moyen similaire de créer une base de données au sein de Joomla !.
4.2.2 Création d’une base de donnée avec Fabrik
Une des solutions les plus simples pouvant répondre à ce besoin est une extension Joomla! de type
« gestionnaire de formulaire » permettant de créer un formulaire visible sur le site. En validant ce
formulaire, un enregistrement est créé et alimente une liste qui n’est ni plus ni moins qu’une base de
donnée. Mais ces extensions n’offrent pas toutes de possibilités satisfaisantes concernant la recherche
de données. En effet, si toutes permettent de consulter la « liste » complète des enregistrements, les
options de recherche sont souvent très limitées, rendant impossible des requêtes de sélection complexe
selon différents critères.
L’une d’elles est néanmoins particulièrement complète : il s’agit de Fabrik.
Voici sa description officielle :
« Fabrik est un composant Joomla open source permettant la création d'applications.
Fabrik offre aux utilisateurs la possibilité de de créer des formulaires, tables et rendus qui
fonctionnent à l'intérieur de Joomla sans requérir des connaissances sur mySQL et PHP, et ceci
depuis l'interface habituelle d'administration de Joomla.
Avec Fabrik vous pouvez créer des applications pouvant aller du simple formulaire de contact à à des
applications complexes telle qu'une application de recherche de travail ou de suivi de bogues. »
Il est ainsi très facile de créer un formulaire de données avec de multiples champs de toute sorte
(champ de texte, date, fichier, lien URL, liste déroulante, …). Ces données peuvent ensuite être
visualisées de différentes façons, mais nous nous en tiendront à un simple tableau de résultats. Une
recherche simple peut être effectuée, en recherchant un ou plusieurs mots dans l’ensemble des champs,
mais des requêtes plus complexes peuvent également être formulées. En effet, il est possible de créer
une requête avec un grand nombre de conditions –appelés « filtres » par Fabrik.
Par exemple : « Où champ1 est égal à valeur1 ou champ1 est égal à valeur2 et champ3 est différent de
valeur3 et champ4 est plus grand que valeur4 »
__________________________________________________________________________________
39
_________________________________________________________________________________________________________________
Au final, le résultat sur le site est très satisfaisant, au détail près que l’affichage du site est
complètement décalé sur la droite. Je n’ai malheureusement pas su trouver de solution à ce problème.
FIGURE 33 – Accès à la base de données créée avec l’extension Joomla! Fabrik au sein du site internet
__________________________________________________________________________________
40
_________________________________________________________________________________________________________________
4.3 Evolution du site internet durant le PFE
J’ai réalisé l’ossature du site internet en m’aidant des remarques de mon professeur encadrant, M.
KOEHL, et de ma directrice de PFE, Mme STEINER, en organisant des entrevues, comme par
exemple la réunion du 27 novembre 2012 (voir compte-rendu en annexe). Mais ce site s’adressant à un
large panel d’utilisateurs, et notamment aux partenaires du projet de valorisation de l’Engelbourg, il
convenait d’avoir leurs avis sur le travail réalisé et de recueillir leurs suggestions.
Ainsi a été organisée le 17 janvier 2013 une réunion de présentation d’une première version du site
internet. Etaient présents : Michel HABIB, premier adjoint à la mairie de Thann, Anne FONTAINE et
Jacky KOCH, archéologues au PAIR, Dominique FIEGEL, directrice de l’Office de Tourisme du pays
de Thann, Noémie SEUILLOT, agent de développement touristique à la communauté de commune
Thann-Cernay, André ROHMER et Olivier MALBOS, de la société d’histoire « Les amis de Thann »,
ainsi que Céline STEINER et Mathieu KOEHL, respectivement maître de stage et encadrant de mon
projet. J’ai ainsi pu présenter mon travail et recueillir de nombreux avis et propositions. La première
chose qu’il convient de dégager de cette réunion est que les différents intervenants n’ont pas tous les
mêmes préoccupations et donc les mêmes attentes vis-à-vis de ce site internet. Et c’est en partie ce qui
a fait la richesse des remarques formulées. Ainsi, historiens et archéologues s’interrogeaient en
particulier sur la nature du contenu et à la transmission des connaissances au public. M. HABIB, en
tant qu’homme politique, s’intéressait à l’accessibilité de l’information, à la forme et l’aspect général
du site ainsi que de sa date prévue de mise en ligne. Mesdames FIEGEL et SEUILLOT étaient quant à
elles particulièrement préoccupées par les éléments de navigation et d’affichage.
Pour plus de détails, vous pouvez consulter en annexe le rapport de cette réunion d’après les notes
prises par M. KOEHL et moi-même.
Toutes ces remarques et suggestions m’ont permis de grandement améliorer le site internet durant les
semaines qui suivirent. Néanmoins, il ne s’agit que d’une première version qui évoluera selon les
besoins futurs.
__________________________________________________________________________________
41
_________________________________________________________________________________________________________________
4.4 Présentation du site internet
4.4.1 Page d’accueil
La page d’accueil du site comprend spécifiquement quatre modules. Le premier est un diaporama
d’images sous le menu principal. Le second est un fil d’actualité en partie principale, affichant tous les
articles de la catégorie Actualités. Les deux autres sont situés à droite de la partie principale et sont des
menus possédant un unique lien de menu. Le premier menu Contact permet d’accéder à un formulaire
de contact adressé à l’administrateur du site internet pour toute demande de renseignement ou
remarque à propos du site. Le second menu comprend un lien de menu - Galerie d’images - sous la
forme d’une image et menant vers la galerie d’images du site (cf. l’extension Phoca Gallery au
paragraphe 4.1.3).
Elle comprend par ailleurs divers éléments qui sont présents sur toutes les autres pages du site internet.
Le premier est bien sûr la bannière située tout en haut de la page. Il y également le menu principal et
ses sept rubriques : Accueil, Les ruines de l’Engelbourg, Histoire, Archéologie, Topographie, Visite
virtuelle et Informations pratiques. Ces six dernières rubriques seront explicitées par la suite. On
retrouve également sur chacune des pages du site un fil de navigation détaillant la rubrique dans
laquelle se trouve le visiteur, en faisant apparaitre la mention en préfixe « Vous êtes ici : ». En pied de
page, une mention légale « © 2012 Tous droits réservés - Ville de Thann / INSA de Strasbourg » est
présente à gauche, alors qu’à droite est présent un menu composé de trois liens de menu : Contact,
Plan du site et Accès partenaires. Le premier renvoie sur le même formulaire de contact qu’évoqué
précédemment. Plan du site dirige vers un plan complet du site faisant apparaitre les différents liens de
tous les menus. Enfin, Accès partenaires dirige vers une page destinés aux partenaires du projet de
valorisation (cf .paragraphe 4.4.8).
4.4.2 Les ruines de l’Engelbourg
C’est une rubrique de présentation générale des ruines. On y trouve une première sous-rubrique de
présentation générale du site en ruines, une deuxième de présentation du programme de valorisation du
site et une troisième sous rubrique consacré aux différents travaux de réhabilitation.
Dans cette rubrique est présent un menu en position « left » - à gauche du composant principal reprend les sous-rubriques précédemment citées et intègre des sous-sous-rubriques : Partenariat avec
l’INSA Strasbourg et Partenariat avec le PAIR liées à la rubrique Valorisation des ruines du château,
et Chantiers jeunes et Chantiers professionnels, regroupant les articles concernant les différents
chantiers, et liées à la rubriques Travaux et réhabilitation.
4.4.3 Histoire du château
C’est une rubrique très simple comprenant un seul article racontant l’histoire du château de sa
construction à sa démolition. Le logo de la société d’histoire « Les amis de Thann » y figure et
comprend un lien vers leur site internet : http://les-amis-de-thann.com/
Un menu a lien unique En savoir plus … redirige vers un article faisant un inventaire bibliographique
des ouvrages concernant l’histoire à l’Engelbourg. Cette partie devra ainsi être renseignée par les
membres de la société d’histoire.
__________________________________________________________________________________
42
_________________________________________________________________________________________________________________
4.4.4 Archéologie
Cette rubrique est composée de trois sous-rubriques. La première, L’archéologie à l’Engelbourg
présente les travaux archéologiques sur le site de l’Engelbourg et notamment l’implication du PAIR
(Pôle d’Archéologie Interdépartemental Rhénan). La seconde, Fouilles archéologiques, détaille
l’opération de fouilles réalisée en 1992 et dirigée par Martin EHRETSMANN. La troisième sousrubrique, Restitution du château de 1660, présente le travail de reconstitution réalisé par Katia KARLI
et comprend une vidéo de présentation du résultat obtenu. (cf. l’extension Videobox au paragraphe
4.1.3)
Tout comme pour la rubrique Les ruines de l’Engelbourg, un menu à gauche de la page reprend les
trois sous-rubriques précédemment mentionnées.
Le logo du PAIR figure à gauche et comprend un lien vers leur site internet : http://www.pairarcheologie.fr/
Tout comme pour la rubrique « Histoire », un menu à lien unique En savoir plus … redirige vers un
article listant des références bibliographiques concernant l’archéologie à l’Engelbourg.
4.4.5 Topographie
La rubrique est composée de trois sous-rubriques.
La première présente les travaux topographiques sur le site et intègre une vidéo réalisée en 2011 par
l’INSA Strasbourg et présentant le projet de fin d’études de Solveig BERGER.
La deuxième sous-rubrique est composée d’une galerie d’images présentant les différents plans,
actuels et anciens, de l’Engelbourg.
La troisième sous rubrique présente la modélisation 3D de l’Engelbourg. En plus d’un descriptif
technique du travail réalisé par l’INSA Strasbourg, une vidéo permet une visualisation complète de la
maquette 3D des ruines actuelles (cf. l’extension Videobox au paragraphe 4.1.3).
Un menu à gauche de la page reprend les trois sous-rubriques précédemment mentionnées.
Tout comme les deux rubriques précédentes, un logo de l’INSA Strasbourg est présent à gauche et
renvoi sur le site internet de l’école : http://www.insa-strasbourg.fr/ , tout comme un lien de menu En
savoir plus … dirigeant vers un article listant divers références bibliographiques à propos de la
topographie à l’Engelbourg.
4.4.6 Visite virtuelle
La rubrique comprend trois façons de visiter virtuellement l’Engelbourg qui sont autant de sousrubriques.
La première sous-rubrique Promenade virtuelle permet à partir d’une carte interactive de se plonger
dans un des neufs lieux situés le long du parcours menant aux ruines sous la forme d’un panorama
sphérique à 360° (cf. paragraphe 3.3).
La seconde Visite du château est une visite virtuelle des ruines, qui permet de se déplacer au cœur des
ruines en profitant aussi bien de vues « réelles » tirée de photos que de vue « virtuelles » issues de la
maquette 3D de l’Engelbourg (cf. paragraphe 3.3).
__________________________________________________________________________________
43
_________________________________________________________________________________________________________________
La troisième sous-rubrique, intitulée L’Engelbourg vu depuis … inclus la carte Google Maps qui
permet de voir les ruines de différents points de vue géolocalisés. (cf. l’extension Carte Google Maps
au paragraphe 4.1.3)
4.4.7 Informations pratiques
Cette dernière rubrique comprend elle aussi trois sous-rubriques.
La première, Accéder à l’Engelbourg, présente les deux itinéraires pédestres permettant de rejoindre
les ruines depuis la ville.
La seconde, Office de tourisme du pays de Thann, indique l’adresse et les horaires d’ouverture de
l’Office de tourisme de Thann. Dans cette rubrique, un plan Google Maps interactif - permettant de se
déplacer et de modifier le niveau de zoom – est présent à droite de l’article.
Enfin, la sous-rubrique Venir à Thann comprend une carte et des indications pour situer la ville de
Thann et indiquer les moyens d’y accèder (en train, en voiture ou en avion).
Dans cette rubrique on trouve à gauche de la partie principale les logos de l’Office de Tourisme du
pays de Thann et de la ville de Thann, faisant le lien avec leurs sites respectifs - http://www.otthann.fr/ et http://www.ville-thann.fr/ .
4.4.8 Accès partenaires
La rubrique Accès partenaires est accessible via le menu de bas de page du site internet.
Elle comprend dans sa partie publique un formulaire spécial permettant aux personnes intéressées par
des documents précis, pour un usage professionnel par exemple, d’effectuer une demande spéciale, qui
sera transmise à l’administrateur du site qui pourra faire suivre la demande à une personne compétente
en fonction de la demande.
Mais cette rubrique permet surtout aux partenaires disposant d’un identifiant et d’un mot de passe
adéquats de se connecter et d’ainsi bénéficier d’un accès privé au site.
Une fois enregistré, un utilisateur partenaire peut modifier les articles concernant leur domaine de
compétence, comme détaillé dans le tableau de la figure 34.
Nom de
l'utilisateur
Archéologues
Historiens
Topographes
Ville de Thann
Partenaires visés
Identifiant
Mot de
passe
Catégories d'articles
éditables
PAIR
Société d'histoire
INSA Strasbourg
Ville de Thann et
Office de tourisme
archeo
hist
topo
mdparcheo
mdphist
mdptopo
ville
mdpville
Archéologie
Histoire
Topographie
Actualités; Travaux; Ville de
Thann
FIGURE 34 – Tableau des utilisateurs ayant un « accès partenaires »
Il a également accès à la base de données spécifique à l’Engelbourg qu’il peut consulter, via un moteur
de requêtes, modifier et enrichir, via un formulaire de soumission de données (cf. extension Fabrik au
paragraphe 4.2.2).
__________________________________________________________________________________
44
_________________________________________________________________________________________________________________
4.5 Mise en ligne
Une fois que le site internet est prêt en local, il s’agit de le mettre en ligne. Il faut pour cela un nom de
domaine (nous avons retenu le nom « engelbourg-thann.fr ») et une solution d’hébergement.
Pour l’hébergement du site, il faut prendre un abonnement chez un hébergeur et ensuite installer le site
sur le serveur mis à disposition. Il s’agit alors de réinstaller Joomla!, en utilisant les paramètres liés au
serveur communiqué par l’hébergeur. On pourra sinon s’aider de l’extension MoovJla qui permet de
modifier directement la configuration du site pour l’adapter au nouvel hébergement.
Ci-après un fil de discussion intéressant concernant la migration d’un site Joomla! 2.5 vers un serveur
de l’hébergeur OVH :
http://forum.Joomla!.fr/showthread.php?167953-Mise-en-ligne-Joomla!-2-5-depuis-local-chez-OVH%28probl%C3%A8me-de-base-de-donn%C3%A9s%29
4.6 Evolution future du site internet
Dans sa version publique, le site internet devra être mis à jour, animé, complété et éventuellement
corrigé. La ville de Thann devra notamment compléter la rubrique « travaux » puis la tenir à jour selon
les chantiers effectués. Elle devra également intégrer avec l’aide probable de Jean-François BAAS,
responsable du système d'information touristique du RésOT d’Alsace, l’agenda des manifestations,
que ce soit en page d’accueil ou dans une rubrique dédiée.
De nouvelles photos pourront être ajoutées à la galerie du site. Il serait enfin intéressant de réaliser des
documents pédagogiques pouvant être téléchargés depuis le site internet, par exemple via une sousrubrique de la partie « Informations pratiques ».
Dans sa version non publique, c’est essentiellement la base de données qui devra être enrichie par les
différents partenaires travaillant avec la ville de Thann sur l’Engelbourg. On peut imaginer que suivant
le besoin de nouveaux champs soient ajoutés ou modifiés.
__________________________________________________________________________________
45
INTEGRATION DES MOYENS NUMERIQUES DE VISITE DE L’ENGELBOURG AU SEIN DU
SITE INTERNET
_________________________________________________________________________________________________________________
5. INTEGRATION DES MOYENS NUMERIQUES
L’ENGELBOURG AU SEIN DU SITE INTERNET
DE
VISITE
DE
5.1 Intégration de la maquette 3D et de la restitution du château de 1660
Tout comme les plans de géomètre, il n’est pas commun pour les topographes de mettre à disposition
du publique des modèles 3D en version « originale ». Ce sont des fichiers relativement lourds et
n’importe quel ordinateur n’a pas les performances requises pour le visualiser correctement. Au niveau
de la lecture, le fait que la maquette et la restitution aient été réalisées avec le logiciel Sketchup est un
plus indéniable puisque qu’une version gratuite de ce logiciel est disponible.
Néanmoins il serait dommage de ne pas faire profiter les futurs visiteurs du site internet consacré à
l’Engelbourg de ces modélisations. C’est pourquoi, il a été décidé de publier des vidéos tirées
d’animation réalisées à partir des modèles 3D. Bien sûr, ces vidéos ne permettent pas de se déplacer
librement dans les modèles mais elles permettent un bel aperçu des résultats obtenus.
5.2 Intégration de la visite virtuelle
5.2.1 Visite virtuelle du château
Une visite virtuelle est une animation flash au format Shockwave Flash (SWF). Une première façon
d’intégrer une animation flash est de profiter de la gestion de média incluse dans Joomla! ! 2.5, en
d’autres termes d’utiliser le lecteur intégré. On crée ainsi un article dans lequel on insère l’animation
grâce à l’outil « Insérer/Modifier un média » dans la barre d’outils d’édition (icône bande de film
cinéma).
Une seconde façon est, toujours dans un article, d’intégrer une « iframe » à l’aide d’un code html.
Exemple de code dans le cas de la visite du château :
<iframe src
="http://127.0.0.1:4001/Joomla25/images/animation/visite_chateau/build/virtualtour.swf"
width="100%" height="720" scrolling="no" frameborder="0">
<p>Votre navigateur ne supporte pas les iframes.</p>
</iframe>
Le chemin vers le fichier SWF est indiqué ainsi que la taille de l’iframe désirée. La phrase « Votre
navigateur ne supporte pas les iframes. » s’affiche si l’affichage d’iframes est impossible avec le
navigateur utilisé.
Il faut toutefois noter que le fait d’encapsuler une animation flash dans une iframe empêche
l’exécution du mode plein écran.
__________________________________________________________________________________
49
SITE INTERNET
_________________________________________________________________________________________________________________
5.2.2 Promenade virtuelle
L’interface de départ de la promenade virtuelle est un plan sous la forme d’une image interactive créée
avec Thinglink. Chaque panorama de la visite est ainsi repéré sur cette image sous la forme d’un point
cliquable laissant apparaitre le nom du panorama et un lien vers un article associé dans lequel est
insérée l’animation flash correspondante. En effet, chaque fichier SWF est inséré dans un article au
moyen d’une iframe, comme vu précédemment pour la visite virtuelle du château. Dans chacune des
pages incluant un tel article, un lien de retour vers le plan de départ est présent en position « user2 ».
FIGURE 35 – Image interactive Thinglink associée à la
promenade virtuelle
__________________________________________________________________________________
50
SITE INTERNET
_________________________________________________________________________________________________________________
5.3 Intégration de photos géolocalisées
Les différentes photos de l’Engelbourg prises de différents points de vue sont désormais géolocalisées
(cf. paragraphe 3.4).
Pour les faire apparaitre placées au bon endroit sur une carte, j’ai retenu la solution de carte
personnalisée de Google Maps. En utilisant Google Maps en étant connecté à un compte Google il est
en effet possible de personnaliser une vue, puis de la faire apparaitre sur un site internet via un code
html. Le principe dans notre cas est de faire apparaitre une icône à chaque emplacement de point de
vue. En cliquant sur une icône, que Google Maps appelle de façon générique « point de repère », on
fait apparaitre l’image en question avec son titre et sa description.
FIGURE 36 – Carte personnalisée avec Google Maps – Trois des quatre types de vue disponibles : satellite, plan
et relief.
Le code html d’intégration de la carte, donné par l’application, est le suivant :
<iframe width="900" height="700" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"
src="https://maps.google.fr/maps/ms?msa=0&msid=206203869840680096900.0004d46bdf64b0
b510797&ie=UTF8&t=k&ll=47.81448,7.100987&spn=0.020173,0.038667&
z=15&output=embed"></iframe><br
/><small>Afficher
<a
href="https://maps.google.fr/maps/ms?msa=0&msid=206203869840680096900.0004d46bdf64b0
b510797&ie=UTF8&t=k&ll=47.81448,7.100987&spn=0.020173,0.038667&
z=15&source=embed" style="color:#0000FF;text-align:left">Engelbourg</a> sur une carte plus
grande</small>
Ce code html est en deux parties. La première concerne l’insertion d’une iframe, qui est concrètement
la carte en elle-même, et la deuxième est un texte situé sous la carte et comprenant le titre de la carte
(ici Engelbourg) en lien vers la carte sur le site Google Maps (https://maps.google.fr). Pour afficher la
carte en iframe, on précise notamment la largeur et la hauteur de l’iframe (ici respectivement 900 et
700 pixels), la référence de la carte (ici 206203869840680096900.0004d46bdf64b0b510797), les
coordonnées géographiques du centre de la carte (ici 47.81448° Nord et 7.100987° Est, dans le
système WGS84) et l’indice de zoom de départ (ici 15, sur une échelle de 0 – vue la plus large - à 20 –
vue la plus rapprochée).
__________________________________________________________________________________
51
SITE INTERNET
_________________________________________________________________________________________________________________
Un des avantages de cette solution est que la carte peut être mise à jour via Google Maps simplement
en étant connecté au compte Google qui l’a créée. On peut alors ajouter, déplacer ou supprimer des
points de repère, et donc des images, changer de type d’icône, ou encore changer le titre et la
description des images. Toutes ces modifications se répercuteront de façon automatique sur la carte
affichée sur le site internet de l’Engelbourg.
__________________________________________________________________________________
52
ACCES LA BASE DE DONNEES CONSTITUEE SUR L’ENGELBOURG DEPUIS DES
MOYENS DE VISITE NUMERIQUE
_________________________________________________________________________________________________________________
6. ACCES LA BASE DE DONNEES CONSTITUEE SUR L’ENGELBOURG
DEPUIS DES MOYENS DE VISITE NUMERIQUE
Nous disposons de deux moyens de visite interactive du site de l’Engelbourg : la visite virtuelle et la
maquette 3D. Seront évoquées dans cette partie les façons, pour les utilisateurs enregistrés et autorisés,
d’accéder à la base de données de l’Engelbourg depuis ces moyens de visite intéractive du site.
6.1 Accès à la base de données constituées sur l’Engelbourg depuis une
visite virtuelle
Le principe serait de rendre accessible aux utilisateurs enregistrés une visite virtuelle du château
calquée sur celle déjà réalisée. A partir des hotspots associés à la rose des vents incluse dans chacun
des panoramas, il serait possible d’accéder à la base de données intégrée au site web. Cela renverrait
en fait pour chaque hotspot vers le résultat d’une certaine requête faite dans la base de données. Une
telle requête serait alors l’affichage de toutes les données ayant, pour un champ donné, une certaine
valeur. On pourrait par exemple diriger vers les données d’une certaine catégorie ou alors, en ajoutant
un champ « Lieu » aux données, diriger vers la liste des données relatives au lieu concerné par le
panorama.
On pourrait aussi créer un champ « Vestige » dans la base de données, à renseigner par le nom du ou
des vestiges éventuellement concernés par la donnée en question. Ainsi, en incluant dans la visite
virtuelle des hotspots positionnés sur certains vestiges, il serait possible de diriger vers la liste des
données liées.
6.2 Accès à la base de données constituées sur l’Engelbourg depuis un
modèle 3D
Depuis un modèle 3D, le principe serait le même, mais au lieu d’utiliser des hotspots, il serait possible
de produire un modèle au format PDF puis d’associer des liens URL à certains éléments du modèle. Il
s’agirait alors de pouvoir segmenter le modèle 3D de façon satisfaisante mais également, comme
évoqué dans la partie précédente, d’ajouter le ou les champs nécessaires dans la base de données. Il
pourrait peut-être même être intéressant que cela soit possible depuis une maquette 3D qui ne serait
pas directement mise en ligne mais seulement téléchargeable depuis la partie privée du site.
__________________________________________________________________________________
53
CONCLUSION ET PERSPECTIVES
_________________________________________________________________________________________________________________
7. CONCLUSION ET PERSPECTIVES
Ce projet a permis de réaliser un site internet à l’aide d’un CMS et d’y inclure des moyens de visite du
site de l’Engelbourg. C’est un moyen de communication au sujet de l’Engelbourg particulièrement
intéressant et qui s’intègre bien dans la volonté de la ville de Thann quant à la valorisation de son
patrimoine. En effet, les résultats de projets précédemment menés sont particulièrement remarquables
(maquette 3D, reconstitution du château de 1660, étude de visite virtuelle) et il aurait été dommage de
ne pas en faire profiter le public.
Mais pour qu’un site internet soit réellement efficace, il faut qu’il soit alimenté, mis à jour et maintenu
attractif de façon générale.
L’annonce et le suivi des actualités relatives à l’ancien château de Thann devront être mis en place via
un agenda, de préférence accessible depuis la page d’accueil.
Chacune des rubriques du site internet devra être compléter si nécessaire par les partenaires concernés.
Il s’agira également de communiquer le plus largement possible l’adresse URL du site et dans la
mesure du possible de créer ou de faire créer des liens vers celui-ci sur d’autres sites web. C’est ainsi
que pourra être amélioré son référencement auprès des moteurs de recherche internet. Car c’est en
effet un des défauts de Joomla!. Mais il existe de nombreux moyens d’améliorer cela, comme par
exemples les astuces détaillées dans l’article suivant : http://blog.web-creation.ca/ameliorerreferencement-joomla
Il serait bien également que par la suite un ensemble de documents pédagogiques puissent être créés et
intégrés au site, pourquoi pas dans une nouvelle rubrique, ou tout du moins soient disponibles sur
demande.
Concernant la partie privée du site, les différents partenaires qui y ont accès devront alimenter la base
de données en renseignant de la façon la plus complète possible les différents champs. De nouveaux
champs pourront bien sûr être créés, si le besoin s’en fait sentir. Bien sûr à chaque champ ajouté c’est
l’ensemble des données qu’il faut tâcher de mettre à jour pour que son ajout soit pertinent. Il
conviendra ensuite de décider si l’accès à la base de données depuis une visite virtuelle réservée aux
utilisateurs enregistrés voire depuis une modélisation 3D.
La problématique de l’affichage du site internet sur des appareils mobiles n’a pas pu être abordée,
mais il serait bien par la suite que ce sujet soit étudié. Il serait en effet intéressant de pouvoir profiter
du site web de l’Engelbourg depuis une tablette tactile, qui pourrait être un complément à une visite
guidée des ruines.
La déclinaison du site en différentes langues, et notamment en Anglais et Allemand sera surement de
mise prochainement. Toutefois cette opération ne devrait pas poser trop de problèmes techniques,
Joomla incluant par défaut la possibilité de créer des versions traduites d’un site internet et de passer
d’une langue à l’autre aisément.
A propos de la maquette 3D de l’Engelbourg, elle devra si possible être tenue à jour en fonction des
travaux réalisés sur les vestiges. Une méthode de mise à jour plus efficace et simple que les
manipulations que j’ai pu effectuer mérite d’être mise au point, surement en se servant moins de
Sketchup et d’avantage d’autres logiciels comme 3D Reshaper. Une piste serait l’utilisation du logiciel
__________________________________________________________________________________
55
CONCLUSION ET PERSPECTIVES
_________________________________________________________________________________________________________________
libre MeshLab, mais je ne peux néanmoins pas la recommander car mon utilisation s’est limitée à une
simple prise en main d’essai qui ne m’a pas permis de pouvoir dresser de conclusion concernant la
pertinence de son utilsation dans ce contexte.
En outre, les résultats obtenus suite à ce projet ne sont qu’un point de départ et seront amenés, je
l’espère à évoluer, s’améliorer et s’enrichir.
__________________________________________________________________________________
56
GLOSSAIRE
_________________________________________________________________________________________________________________
GLOSSAIRE
Topographie
MNT
Modèle tridimensionnel représentant, sous forme numérique, le relief d'une portion de
territoire. (@Granddictionnaire, 2013)
Balayage laser (terrestre)
Technique d’acquisition rapide et automatique de données tridimensionnelles utilisant la lumière laser
pour mesurer directement, sans contact avec l’objet et selon une trame régulière, les coordonnées 3D
des points sur des surfaces depuis une position terrestre. (@AFT, 2013)
Sites internet
Apache HTTP Server
Le logiciel libre Apache HTTP Server (Apache) est un serveur HTTP créé et maintenu au sein de la
fondation Apache. C'est le serveur HTTP le plus populaire du World Wide Web. Il est distribué selon
les termes de la licence Apache. (source : Wikipedia, 2013)
CSS (Cascading Style Sheets)
En français : feuilles de style en cascade. Langage informatique qui sert à décrire la présentation des
documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web
Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la
conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. (source :
Wikipedia, 2013)
HTML
Langage de balisage de texte qui permet la création de documents hypertextes affichables par un
navigateur Web.
Le langage HTML est une application de la norme ISO-SGML (Standard Generalized Markup
Language) et a été défini par le CERN (Centre Européen de Recherche
Nucléaire). (@Granddictionnaire.com, 2013 )
Javascript
Langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi
côté serveur. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses
principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui
sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété
de prototypage qui permet d'en créer des objets héritiers personnalisés. (source : Wikipedia, 2013)
Logiciel libre ou open Source
Logiciel distribué avec l'intégralité de ses programmes-sources, afin que l'ensemble des utilisateurs qui
l'emploient, puissent l'enrichir et le redistribuer à leur tour.
Un logiciel libre n'est pas nécessairement gratuit et les droits de la chaîne des auteurs sont préservés.
(@Granddictionnaire.com, 2013 )
__________________________________________________________________________________
57
GLOSSAIRE
_________________________________________________________________________________________________________________
MySQL
MySQL est un système de gestion de base de données (SGBD). Il est distribué sous une double licence
GPL et propriétaire. Il fait partie des logiciels de gestion de base de données les plus utilisés au
monde1, autant par le grand public (applications web principalement) que par des professionnels, en
concurrence avec Oracle, Informix et Microsoft SQL Server. (source : Wikipedia, 2013)
PHP
PHP: Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de scripts libre
principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais pouvant
également fonctionner comme n'importe quel langage interprété de façon locale, en exécutant les
programmes en ligne de commande. PHP est un langage impératif disposant depuis la version 5 de
fonctionnalités de modèle objet complètes. En raison de la richesse de sa bibliothèque, on désigne
parfois PHP comme une plate-forme plus qu'un simple langage. (source : Wikipedia, 2013)
SEO (Search Engine Optimization)
L'optimisation pour les moteurs de recherche (en anglais, Search engine optimization : SEO) est un
ensemble de techniques visant à favoriser la compréhension de la thématique et du contenu d'une ou
de l'ensemble des pages d'un site Web par les moteurs de recherche. Ces techniques visent donc à
apporter un maximum d'informations concernant le contenu d'une page web aux robots d'indexation
des moteurs de recherche. (source : Wikipedia, 2013)
Serveur FTP
Le serveur FTP (File Transfer Protocol) qui permet, comme son nom l'indique, de transférer des
fichiers par Internet ou par le biais d'un réseau informatique local (intranet). (source : Wikipedia,
2013)
Serveur SMTP
Un serveur de messagerie électronique est un logiciel serveur de courrier électronique (courriel). Il a
pour vocation de transférer les messages électroniques d'un serveur à un autre. (source : Wikipedia,
2013)
Template ou modèle
Fichier HTML sans données réelles qui sert de canevas pour la création d'une page Web.
L'avantage d'un template est de contenir tous les codes HTML nécessaires pour la mise en forme d'une
page Web. L'utilisateur n'a qu'à insérer ses données pour créer une page Web
personnalisée. (@Granddictionnaire.com, 2013 )
__________________________________________________________________________________
58
GLOSSAIRE
_________________________________________________________________________________________________________________
Joomla!
Extension
Add-on ou script qui vient s'ajouter à Joomla! à l'image d'une pièce supplémentaire sur un puzzle.
Composant
Extension complexe ajoutant une importante fonctionnalité à Joomla! (ex : PhocaGallery, Fabrik, ...).
Elle est paramétrable dans l'onglet "Composant" et peut, à l'instar d'un plugin ou d'un module,
s'afficher dans le coeur (MainBody) de la page.
Module
Extension ajoutant une fonctionnalité plus ou moins complexe dans un "bloc" à positionner dans la
position Joomla! de son choix.
Plugin
Extension s'ajoutant à un composant (natif ou non à Joomla!) ou ajoutant une légère fonctionnalité (du
moins légère en terme de poids) telle qu'une ligne supplémentaire dans le <head> par exemple.
Template
Charte graphique, ou gabarit visuel d'un site Internet, se gérant de la même manière qu'une extension.
C'est lui qui définit les fichiers CSS et Javascript de base ainsi que les positions Joomla! disponibles.
Position
Emplacement disponible sur le template pour positionner l'ensemble des modules.
Article
Un article est en général un texte accompagné d'images, de vidéos ou tous autres types de contenu de
ce genre. La gestion des articles dans l'onglet "Contenu" de votre back office Joomla!, vous permet de
gérer tous les articles présents sur votre site web.
Back office
Le back office de votre site Joomla! est tout simplement la partie administrative de votre site,
accessible en tapant www.votresite.fr/administrator. C'est d'ici que vous gérez entièrement votre site
Joomla que ce soient les articles, les extensions ou votre template.
Front office
Par opposition au back office, le front office est la partie de votre site Joomla! visible par vos
internautes et sur lequel ils peuvent profiter des différentes fonctionnalités que vous avez mises en
place.
__________________________________________________________________________________
59
TABLE DES FIGURES
_________________________________________________________________________________________________________________
TABLE DES FIGURES
FIGURE 1 - Les ruines de l’Engelbourg vues depuis le vignoble du Rangen (Office de Tourisme
du Pays de Thann)………………...……………………………………………………………8
FIGURE 2 – Tableau comparatif des principaux CMS [@Comparatif-CMS, 2013]…………..13
FIGURE 3 – Principe de la « skybox » [@Wikipedia, 2013].………………………………….15
FIGURE 4 – Extrait de la maquette 3D de l’Engelbourg [Berger, 2011]………………………16
FIGURE 5 – Levé au scanner laser du mur du logis sur le site de l’Engelbourg……………….16
FIGURE 6 –Extrait de la maquette 3D montrant la première modélisation du mur du logis….17
FIGURE 7 – Photos du mur du logis avant (à gauche) et après (à droite) les travaux de
rénovation……………………………………………………………………………………..17
FIGURE 8 – Processus d’acquisition des données au scanner laser en géoréférencement
direct…………………………………………………………………………………………..17
FIGURE 9 – Processus de traitements des données suite au levé au scanner laser en
géoréférencement direct……………………………………………………………………....18
FIGURE 10 – Nuage de points après regroupement des cinq nuages de points initiaux……….18
FIGURE 11 – Nuage de points après une première segmentation grossière……………………18
FIGURE 12 - Nuage de points final obtenu après segmentation complète……………………..19
FIGURE 13 – Maillage du mur du logis avant et après l’étape d’affinage à l’erreur de corde de
3D Reshaper…………………………………………………………………………………..20
FIGURE 14 – Visualisation des trous présents maillage du mur du logis……………………...20
FIGURE 15 – Exemple de remplissage d’un trou du maillage sous 3D Reshaper……………...21
FIGURE 16 – Réalisation d’un maillage de jonction entre la nouvelle modélisation du mur du
logis et le terrain naturel sous Sketchup………………………………………………………22
FIGURE 17 – MNT intermédiaire (en gris) autour du mur du logis (en violet) ……………….22
FIGURE 18 – Frontispice de Schenk……………………………………………………………24
FIGURE 19 – Plan du château de l’Engelbourg daté de 1657………………………………….24
FIGURE 20 – Hypothèse de restitution du château de l’Engelbourg…………………………...25
FIGURE 21 a – Principe de réalisation de la promenade virtuelle……………………………...26
__________________________________________________________________________________
61
TABLE DES FIGURES
_________________________________________________________________________________________________________________
FIGURE 21 b – Principe de réalisation de la visite virtuelle du château…………....………….26
FIGURE 22 – Tête panoramique Manfrotto 303 SPH……………………………………….....26
FIGURE 23 – Rose des vents (source :
http://commons.wikimedia.org/wiki/File:Brosen_windrose-fr.svg) …………………………28
FIGURE 24 – Rose des vents modifiée…………………………………………………………28
FIGURE 25 – Extraits des images animés servant pour les hotspots lian les panoramas en vue
« photo » et ceux en vue « maquette 3D »……………………………………………………29
FIGURE 26 – L’Engelbourg photographié depuis le Rangen……………………………..……31
FIGURE 27 – Mesure de distance sur un plan topographique de l’Engelbourg………………..31
FIGURE 28 – Report de la distance de prise de vue depuis le centre des ruines (source de
l’image de fond : Google Maps)……………………………………………………………...32
FIGURE 29 – Zone de positionnement du point de prise de vue (source de l’image de fond :
Google Maps)…………………………………………………………………………………32
FIGURE 30 – Positions offertes par le template Joomspirit 18………………………………...35
FIGURE 31 – Page d’accueil du site internet de l’Engelbourg…………………………………36
FIGURE 32 – Tableau des droits selon le groupe d’utilisateur sous Joomla! ………………….41
FIGURE 33 – Accès à la base de données créée avec l’extension Joomla! Fabrik au sein du site
internet………………………………………………………………………………………..45
FIGURE 34 – Tableau des utilisateurs ayant un « accès partenaires »…………………………49
FIGURE 35 – Image interactive Thinglink associée à la promenade virtuelle…………………52
FIGURE 36 – Carte personnalisée avec Google Maps – Trois des quatre types de vue
disponibles : satellite, plan et relief…………………………………………………………...53
__________________________________________________________________________________
62
REFERENCES BIBLIOGRAPHIQUES
_________________________________________________________________________________________________________________
Articles et publications
[Anet, 2012] ANET, C. (2012). Intégration de modèles 3D extérieur/intérieur pour permettre l’accès
aux données archéologiques. Application à la forteresse de Châtel-sur-Moselle. Mémoire
d’ingénieur spécialité Topographie de l’INSA Strasbourg.
[Berger, 2011] BERGER, S. (2011). Etude de la modélisation d’une maquette 3D et de l’intégration
de données. Application au projet archéologique et patrimonial de Thann (Alsace). Mémoire
d’ingénieur spécialité Topographie de l’INSA Strasbourg.
[Brigand, 2012] BRIGAND, N. (2012). Poursuite de la valorisation de l’Engelbourg. Projet de
recherche technologique, INSA Strasbourg.
[Caillet, 2011] CAILLET, V. (2011). Contribution à la valorisation et à la gestion de la documentation
hétérogène du patrimoine sous la forme d’une Interface 3D appliquée au site de Châtel-surMoselle. Mémoire d’ingénieur spécialité Topographie de l’INSA Strasbourg.
[Koehl et Brigand, 2012] KOEHL, M., BRIGAND, N. (2012). Combination of Virtual Tours, 3D Model
and Digital Data in a 3D Archaeological Knowledge and Information System. International
Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, XXXIXB4, 2012.
[Koehl, 2009] KOEHL, M. (2009). Introduction au Système d’Information Géographique. Cours de
SIG de l’INSA de Strasbourg, Spécialité Topographie.
[Koehl et Lott, 2008] KOEHL, M. et LOTT, C. (2008). De la maquette 3D au SIG 3D pour la gestion
du patrimoine archéologique. Géomatique Expert, n°64 pp. 26-35.
[Koehl et al., 2008a] KOEHL, M., MEYER, E., KOUSSA, C., LOTT, C. (2008) SIG 3D et 3D dans les SIG
: Application aux modèles patrimoniaux. GéoEvenement 2008, 8-10 Avril 2008, Paris, 15
pages.
[Koehl et al., 2008b] KOEHL, M., GRUSSENMEYER, P. 3D model for historic reconstruction and
archaeological knowledge dissemination: the Niedermunster Abbey's project (Alsace,
France). IASPRS - XXIth ISPRS Congress, July 2008, Beijing - China, 6 pages CD-ROM.
[Landes et al., 2011] LANDES, T., GRUSSENMEYER, P., BOULAASAL, H. (2011). Les principes
fondamentaux de la lasergrammétrie terrestre : acquisition, traitement des données et
applications (partie 2/2). Revue XYZ n°128, pp. 25-38.
__________________________________________________________________________________
63
_________________________________________________________________________________________________________________
Sites internet
[@AFT, 2013] @AFT (2013). Site internet de l’Association Française de Topographie.
URL : http://www.aftopo.org
[@Com’3elles, 2013] @Com’3elles (2013). Site de l’agence de communication Com’3elles,
spécialisée dans la réalisation de sites internet avec Joomla!.
URL : http://www.com3elles.com
[@Comparatif-CMS, 2013] @Comparatif CMS (2013). Site internet consacré à la comparaison
des principaux CMS du marché.
URL : http://www.granddictionnaire.com
[@Google, 2013] @Google (2013). Site internet pour le développement de l’API Google Earth.
URL : https://developers.google.com/earth/?hl=fr
[@Granddictionnaire, 2013] @Grand Dictionnaire (2013). Site internet de l’Office québécois de
la langue française.
URL : http://comparatif-cms.com/
[@Joomla, 2013] @Joomla (2013). Site internet constituant le portail des utilisateurs
francophones du système de gestion de contenu Joomla!.
URL : http://Joomla.fr
[@Joomla tutos, 2013] @Joomlatutos (2013). Site internet consacré au CMS Joomla!, proposant
des « kits » Joomla! ainsi que des tutoriels pour apprendre à s’en servir.
URL : http://www.Joomlatutos.com
[@Simlab Soft, 2013] @Simlab Soft (2013). Site internet de l’éditeur de logiciel Simlab, spécialisé
dans les logiciels 3D.
URL : http://www.simlab-soft.com
[@Ville de Thann, 2013] @Ville de Thann (2013). Site internet de la ville de Thann.
URL : http://www.ville-thann.fr
__________________________________________________________________________________
64

Intégration des outils numériques constitués sur le château de Thann

Transcription

Documents pareils

Webmaster(avec connaissances Joomla!)

Ce site est réalisé à l`aide de Joomla 1.5 Le template

Retouche d`images avec GIMP - IUT de Bayonne et du Pays Basque

Arbeitsrecht / Droits du travail

FLORENCE FORESTIE

À la ville de Thann

Consultez la plaquette - IUT de Bayonne et du Pays Basque

Chirurgie infantile - Hopital la Roseraie

Course Marais Vernier

1) LISBON-ALFAMA (55€/JOUR)