RapportDescriptionCodeSource

REPUBLIQUE TUNISIENNE Ministère de l’Environnement et du Développement durable Agence de Protection et d’Aménagement du LittoralDéveloppement d’un Système d’Information Centralisé sur le Littoral Première Phase : Deuxième étapeRapport Code Source « GISWEB sur les Zones Sensibles Littorales » GRA1PHTECH 6 Rue Ali Kallel 2070 La Marsa Tel : 71 729 404 – Fax : 71 729 405

Système d’Information Centralisé sur le Littoral Rapport Code Source SommaireTable des matières Introduction........................................................................................................... 4 Contexte du projet................................................................................................. 5 Conception et Réalisation ..................................................................................... 6 1.1 Langages et choix des outils utilisés :...................................................... 7 1.1.1 HTML5 : ............................................................................................. 7 1.1.2 CSS3 : ................................................................................................. 7 1.1.3 JavaScript :......................................................................................... 7 1.1.4 SqlServer : .......................................................................................... 7 1.1.5 Bootstrap : .......................................................................................... 8 1.1.6 Adobe Dreamweaver : ........................................................................ 8 1.1.7 FileZilla............................................................................................... 8 1.2 Base de données : ...................................................................................... 9 1.3 Les différentes étapes du développement .............................................. 10 1.3.1 La charte graphique :....................................................................... 10 1.3.2 Programmation : .............................................................................. 10 1.3.3 Code HTML de la page « Index » : ................................................... 14 1.3.4 Code HTML de la page « Présentation » : ....................................... 17 1.3.5 Code HTML de la page « Photothèque » :........................................ 21 1.3.6 Code HTML de la page « Inventaire de données » : ........................ 27 1.3.7 Code HTML de la page « Carte interactive » : ................................ 31 1.3.8 Code HTML de la page « Liens utiles » : ......................................... 31 1.3.9 Code HTML de la page « Contact » :................................................ 36 2

Système d’Information Centralisé sur le Littoral Rapport Code SourceConclusion ........................................................................................................... 42 3

Système d’Information Centralisé sur le Littoral Rapport Code Source Liste des figuresFigure 1 : Interface principale 1......................................................................... 14Figure 2 : Interface principale 2......................................................................... 14Figure 3 : Interface Présentation 1 .................................................................... 17Figure 4 : Interface Présentation 2 .................................................................... 18Figure 5 : Interface Photothèque 1..................................................................... 21Figure 6 : Interface Photothèque 2..................................................................... 22Figure 7 : Interface Inventaire de données........................................................ 27Figure 8 : Interface Carte interactive ................................................................ 31Figure 9 : Interface Liens utiles 1 ...................................................................... 32Figure 10 : Interface Liens utiles 2 .................................................................... 32Figure 11 : Interface Contact 1 .......................................................................... 36Figure 12 : Interface Contact 2 .......................................................................... 37 4

Système d’Information Centralisé sur le Littoral Rapport Code Source INTRODUCTION Le présent document constitue le rapport de la cinquième phase de l’étudede mise en place d’un Système d’Informations Géographiques des Zones SensiblesLittorales.Dans le cadre de ce projet et durant les phases précédentes, on a procédé à :  La préparation du projet et l’analyse de l’existant : Cette phase constituait l’analyse de l’existant en matière de cartographie, d’ouvrages, de SIG… à l’APAL  L’analyse et la définition des besoins : dans cette phase on a précisé les besoins de l’APAL en matière de gestion des zones sensibles à fin de mettre en place un outil efficace d’aide à la décision.  La conception du SIG des zones sensibles : Lors de cette phase on a procédé à la conception de la base de données selon la méthode UML,  La mise en œuvre de la base de données géographique des Zones Sensibles : qui constituait l’étape de la création de la base de données. Dans ce travail on a adapté les données existantes dans la base de données selon le format ESRI Personal Geodatabase.La phase en cours représente l’étape 1 de la phase 2 du projet et elle constitue ledéveloppement d’une application SIG sous l’API JavaScript d’ArcGIS. Cetteapplication renferme les pages suivantes :  Page d’accueil  Présentation  Photothèque  Inventaire de données  Cartes interactives  Liens utiles  Contact 4

Système d’Information Centralisé sur le Littoral Rapport Code Source CONTEXTE DU PROJET Dans le cadre du suivi de l'évolution des écosystèmes Côtiers, pour une gestiondurable du littoral, l'observatoire du littoral a jugé nécessaire la mise en placed'une base de données géographique (GIS WEB) sur les zones sensibles littorales.Un GIS WEB attractif, dynamique et interactif, autant pour son administrationque pour son utilisation, est alors nécessaire au bon fonctionnement et à lacommunication interne et externe d’une telle structure.Afin d’effectuer ce projet, un cahier des charges nous a été fourni. Celui-ci est assezexplicite, non seulement il nous donne les données nécessaires au site mais ilindique également la manière dont ils doivent être disposées. 5

Système d’Information Centralisé sur le Littoral Rapport Code Source CONCEPTION ET REALISATION Résumé Dans cette partie, nous allons détailler les étapes du développement du site, leslangages et le choix des outils dans un premier temps, puis un descriptif de la basede données, les étapes de la programmation avec son design . 6

Système d’Information Centralisé sur le Littoral Rapport Code Source1.1 Langages et choix des outils utilisés : 1.1.1 HTML5 : Le HTML (« HyperText Mark-Up Language ») est un langage dit de « balisage »ou de « structuration » permettant la conception de pages web avec des balises deformatage. Les balises permettent d'indiquer la façon dont doivent être présentésle document et les liens qu'il établit avec d'autres documents. 1.1.2 CSS3 : Le CSS (« Cascading Style Sheets » : feuilles de style en cascade) est un langageinformatique complétant le HTML. Alors que le HTML structure la page Web, leCSS va la mettre en forme en y apportant du style. 1.1.3 JavaScript : Le JavaScript est un langage de script incorporé dans un document HTML.Historiquement il s'agit même du premier langage de script pour le Web. Celangage est un langage de programmation qui permet d'apporter des améliorationsau langage HTML en permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web. 1.1.4 SqlServer : Le SQL server désigne couramment un serveur de base de données.La définition du SQL server est étroitement liée à celle du langage SQL(Structured Query Language), un langage informatique permettant d'exploiter desbases.Concrètement, un SQL server est un outil qui possède toutes les caractéristiquespour pouvoir accompagner l'utilisateur dans la manipulation, le contrôle, le tri, lamise à jour, et bien d'autres actions encore, de bases de données grâce au langageSQL.Le terme désigne également le nom donné au système de gestion de base dedonnées (SGBD) commercialisé par Microsoft, ou plus précisément le nom du 7

Système d’Information Centralisé sur le Littoral Rapport Code Sourcemoteur de bases de données de ce SGDB produit par le fabricant de produitsinformatiques américain. Comme ses concurrents Access, Oracle ou encoreD2B, SQL server offre de multiples fonctionnalités. 1.1.5 Bootstrap : BootStrap est un « Framework CSS », cela signifie qu'il s'occupemajoritairement du code CSS (d'ailleurs, il utilise un préprocesseur CSS, maisnous y reviendrons plus tard) afin de créer une apparence voulue sans travaillerdurant des heures.BootStrap embarque des outils HTML, JavaScript et CSS, il se base sur unsystème de grille qui dicte le placement des éléments d'une page, son avantageprincipal tient du fait qu'il est entièrement responsive et ce, nativement (lamajorité des frameworks le font, soyons franc), son but premier ? Proposer desoutils pour un affichage « mobile-first », à mes yeux, créer sur mobile pour ensuitedévelopper pour écran large est bien plus logique que l'inverse. 1.1.6 Adobe Dreamweaver : Pour la réalisation des pages web du site, j’ai utilisé le logiciel AdobeDreamweaver qui est un logiciel de création de sites web.Si un simple éditeur de texte, comme Notepad ou Bloc-notes fait très bien l’affaire.J’ai tout de même choisi d’utiliser Adobe Dreamweaver. Tout d’abord pour son autocomplétion HTML et CSS qui est très pratique, agréable et rapide. Ainsi que parles différents modes de conception offerts, la transition entre les différents modesde conception est très rapide ce que je trouve très agréable lors du commencementde la structure du site web. Il me permet de voir instantanément si mes élémentsgraphiques ont été correctement appelés, structurés et positionnés. 1.1.7 FileZilla Concernant l’envoi de l’ensemble de mes fichiers vers l’hébergeur web, j’aitransféré mes fichiers avec le client FTP de FileZilla. 8

Système d’Information Centralisé sur le Littoral Rapport Code SourceFTP signifie File Transfert Protocol ou Protocole de Transfert de Fichiers. C'est unprotocole de communication qui permet l'échange de fichiers sur internet avec unréseau TCP/IP. Le FTP fonctionne selon le modèle client-serveur. C’est-à-dire, unclient depuis lequel on envoie les fichiers et un serveur FTP, sur lequel on envoieles fichiers. Un client FTP est donc un logiciel qui permet de faire la liaison entrele client et le serveur. Pour des raisons de sécurité, FileZilla propose un mode danslequel il ne conserve aucune trace des mots de passe sur l’ordinateur. Ainsi, uneauthentification est nécessaire à chaque connexion aux serveurs1.2 Base de données : Comme pour tout site web, la réalisation de celui-ci a requis la création d’unebase de données. Cette base de données a été élaborée avec l’environnementsuivant :  ARCGIS 10.4 (produit Esri).  Personnel Géodatabase (produit Esri).  SGBDR : SqlServer  L’environnement de développement est celui d’ESRI (API JavaScript).Les thèmes de la base de données sont les suivants :  Les sites sensibles littoraux  Les axes de gestion  Etude  Données administratives et socio-économiques  Limite du site  Cadre physique  Qualité des eaux  Hydrodynamisme côtier.  Biodiversité marine et terrestre.  Patrimoine archéologique 9

Système d’Information Centralisé sur le Littoral Rapport Code Source1.3 Les différentes étapes du développement 1.3.1 La charte graphique : Le design du site web est un élément important pour l’utilisateur. Le design dusite web doit représenter virtuellement l’ambiance. Si le site possède un bon designreflètera notre compétence, notre sérieux et l’importance que nous accordons à laqualité. Nous mettons ainsi nos visiteurs et membres en confiance et amélioronsnotre réputation et image auprès d’eux. 1.3.2 Programmation : Le site se doit être simple d’utilisation et de navigation, que ce soit dans sesfonctionnalités ou que ce soit dans son contenu. Le principal but est de faciliter lanavigation le plus que possible. Pour faciliter la navigation, il est obligatoire quel’ensemble des pages du site web possèdent la même structure et organisation. Celapermet d’avoir une logique dans la structure des pages, mais aussi de ne pas gênerla navigation de l’utilisateur, à cause des différentes structures de page à chaquechangement de page. Pour cela, j’ai réalisé un modèle pour la structure des pagesque vous pouvez observer ci-dessous. La totalité des pages visibles par l’utilisateurposséderont cette même structure :  Un en-tête de page avec le nom du SIG WEB.  Un menu de navigation complet. - Le contenu qui se modifiera selon les pages.  Un pied de page avec l’ensemble des informations.  L’en-tête L’en-tête ne comprenant que le nom de SIG WEB.  Exemple Code Source : <!-- Header --> <div id=\"header\"> <!-- Logo --> <h1><a href=\"index.html\" id=\"logo\"> Zones Sensibles littorales </a></h1> 10

Système d’Information Centralisé sur le Littoral Rapport Code Source Le menu de navigationLe menu de navigation est un élément primordial dans laprésentation d’un site web. En effet, il doit permettre derejoindre aisément les autres pages du site web. Le menu qui aété réalisé pour le site web de la section locale fut dans unpremier temps réalisé avec JavaScript. Exemple Code Source :<nav id=\"nav\"><ul><li class=\"current\" ><a href=\"index.html\">Accueil</a></li><li ><a href=\"Presentation.html\">Présentation</a></li><li ><a href=\"Phototheque.html\">Photothèque</a></li><li><a href=\"Inventaire/InventaireSites.html\" title=\"\"><span>Inventaire dedonnées</span></a> </li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a></li><li><a href=\"Liens.html\">Liens utiles</a></li><li><a href=\"Contact.html\">Contact</a></li></ul></nav> Le contenuLe contenu de chacune des pages est la partie la plus importantedu site web. En effet, ce sera là où apparaîtront toutes lesinformations et documentations disponibles et mises en ligne. 11

Système d’Information Centralisé sur le Littoral Rapport Code Source  Exemple Code Source : <!-- Banner --> <section id=\"banner\"> <header> <h2>APAL: <em> <a href=\"http://html5up.net\">Agence de Protection et d'Aménagement du Littoral</a></em></h2> <a target=\"_blank\" href=\"http://www.apal.nat.tn/site_web/index.html\" class=\"button\">Voir plus</a> </header> </section> Le pied de page Le pied de page se trouvera dans la totalité des pages. Cette partie regroupera l’ensemble des informations utiles.  Exemple Code Source : <div id=\"footer\"> <div class=\"container\"> <div class=\"row\"> <section class=\"3u 6u(narrower) 12u$(mobilep)\"> <h3>Adresse</h3> <ul class=\"links\"> <li><a href=\"#\">Siège social : 02 rue Mohamed Rachid Ridha, 1002 Tunis,Belévdère-Tunisie</a></li> </ul> </section> section class=\"3u 6u$(narrower) 12u$(mobilep)\"> <h3>Coordonnées</h3> <ul class=\"links\"> <li><a href=\"#\"></a></li> <li><a href=\"#\"> Tél : +216 71 906 577</a></li> <li><a href=\"#\">Fax : +216 71 908 460 </a></li> <li><a href=\"#\">E-mail: [email protected]</a></li></ul> </section> <section class=\"3u 12u(narrower)\"> <h3>Liens rapides </h3> <ul class=\"links\"> <li><a href=\"#\"></a></li> <li><a target=\"_blank\" href=\"http://www.apal.nat.tn/site_web/e-services.html\">Services en ligne</a></li><li><a target=\"_blank\"href=\"http://www.apal.nat.tn/site_web/services_docs.html\">Documents administratifs</a></li> 12

Système d’Information Centralisé sur le Littoral Rapport Code Source<li><a target=\"_blank\"href=\"http://www.apal.nat.tn/site_web/phototheque.html\">Photothèque</a></li></ul></section><section class=\"3u 12u(narrower)\"><h3>SIG </h3><ul class=\"links\"><li><a href=\"#\"></a></li><li><a href=\"#\"> Géomorphologie Littorale</a></li><li><a href=\"#\"> Zones Humides Littorales </a></li><li><a href=\"#\">Domaine public maritime</a></li></ul></section></div></div><!-- Icons --><ul class=\"icons\"><li><a href=\"#\" class=\"icon fa-twitter\"><span class=\"label\">Twitter</span></a></li><li><a target=\"_blank\" href=\"https://www.facebook.com/APAL.Tunisie\" class=\"icon fa-facebook\"><span class=\"label\">Facebook</span></a></li><li><a href=\"#\" class=\"icon fa-github\"><span class=\"label\">GitHub</span></a></li><li><a href=\"#\" class=\"icon fa-linkedin\"><spanclass=\"label\">LinkedIn</span></a></li><li><a href=\"#\" class=\"icon fa-google-plus\"><spanclass=\"label\">Google+</span></a></li></ul><!-- Copyright --><div class=\"copyright\"><ul class=\"menu\"><li>&copy; Copyright APAL 2017 </li><li>Réalisation: <a target=\"_blank\"href=\"http://www.graphtech-gis.com/\">Graphtech</a></li></ul></div></div></div>L’association veut un site Internet basique composé, premièrement, d’une paged’accueil composée d’un menu. Puis d’une seconde page, présentation, qui doitintroduire le site .La troisième page concerne une photothèque, présentant unegalerie de photos .Dans la quatrième page, l’inventaire, y figure les donnéespermettant d’attirer de consulter les informations .La cinquième page contenantquelques liens utiles. Enfin, nous terminons par une simple page contact avec lesinformations relatives à l’association. 13

Système d’Information Centralisé sur le Littoral Rapport Code Source 1.3.3 Code HTML de la page « Index » :Figure 1 : Interface principale 1Figure 2 : Interface principale 2 14

Système d’Information Centralisé sur le Littoral Rapport Code Source<!DOCTYPE HTML> <html><head><title>Index</title><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /><!--[if lte IE 8]><script src=\"assets/js/ie/html5shiv.js\"></script><![endif]--><link rel=\"stylesheet\" href=\"assets/css/main.css\" /><!--[if lte IE 8]><link rel=\"stylesheet\" href=\"assets/css/ie8.css\" /><![endif]--><!--[if lte IE 9]><link rel=\"stylesheet\" href=\"assets/css/ie9.css\" /><![endif]--> </head> <body> <div id=\"page-wrapper\"> <!-- Header --> <div id=\"header\"> <!-- Logo --> <h1><a href=\"index.html\" id=\"logo\"> Zones Sensibles littorales </a></h1> <!-- Nav --> <nav id=\"nav\"><ul><li class=\"current\" ><a href=\"index.html\">Accueil</a></li><li ><a href=\"Presentation.html\">Présentation</a></li><li ><a href=\"Phototheque.html\">Photothèque</a></li><li><a href=\"Inventaire/InventaireSites.html\" title=\"\"><span>Inventaire dedonnées</span></a> </li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a> </li><li><a href=\"Liens.html\">Liens utiles</a></li><li><a href=\"Contact.html\">Contact</a></li></ul></ul></nav></div><!-- Banner --><section id=\"banner\"><header> </header></section><section class=\"wrapper style2\"><div class=\"container\"> 15

Système d’Information Centralisé sur le Littoral Rapport Code Source< header class=\"major\"> </div><h2>L'Agence de Protection et d'Aménagement du Littoral (APAL)</h2><img src=\"images/Home.jpg\" width=\"932\" height=\"152\" alt=\"\"/><br/> <br/></header> </section> <!-- Posts --> <!-- CTA --> <!-- Footer --> <div id=\"footer\"> <div class=\"container\"> </div> <!-- Icons --> <!-- Copyright --> <div class=\"copyright\"> <ul class=\"menu\"> <li>&copy;Copyright</li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/\">Graphtech</a></li> </ul> </div> </div> </div> <!-- Scripts --> <script src=\"assets/js/jquery.min.js\"></script> <script src=\"assets/js/jquery.dropotron.min.js\"></script> <script src=\"assets/js/skel.min.js\"></script> <script src=\"assets/js/util.js\"></script> <!--[if lte IE 8]><scriptsrc=\"assets/js/ie/respond.min.js\"></script><![endif]--> <script src=\"assets/js/main.js\"></script> </body></html> 16

Système d’Information Centralisé sur le Littoral Rapport Code Source 1.3.4 Code HTML de la page « Présentation » :Figure 3 : Interface Présentation 1 17

Système d’Information Centralisé sur le Littoral Rapport Code Source Figure 4 : Interface Présentation 2<!DOCTYPE HTML><html> <head> <title>Présentation</title> <meta charset=\"utf-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /><!--[if lte IE 8]><script src=\"assets/js/ie/html5shiv.js\"></script><![endif]--><link rel=\"stylesheet\" href=\"assets/css/main.css\" /> <!--[if lte IE 8]><link rel=\"stylesheet\" href=\"assets/css/ie8.css\" /><![endif]--> <!--[if lte IE 9]><link rel=\"stylesheet\" href=\"assets/css/ie9.css\" /><![endif]--> </head> <body> 18

Système d’Information Centralisé sur le Littoral Rapport Code Source <div id=\"page-wrapper\"><!-- Header --> <div id=\"header\"> <!-- Logo --><h1><a href=\"index.html\" id=\"logo\"> Zones Sensibles littorales </a></h1> <!-- Nav --> <nav id=\"nav\"> <ul><li ><a href=\"index.html\">Accueil</a></li><li class=\"current\" ><a href=\"Presentation.html\">Présentation</a></li><li ><a href=\"Phototheque.html\">Photothèque</a></li><li><a href=\"Inventaire/InventaireSites.html\" title=\"\"><span>Inventaire dedonnées</span></a> </li>li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a> </li><li><a href=\"Liens.html\">Liens utiles</a></li><li><a href=\"Contact.html\">Contact</a></li></ul></nav></div> <!-- Main --> <section class=\"wrapper style1\"> <div class=\"container\"> <div class=\"row 200%\"><div class=\"4u 12u(narrower)\"><div id=\"sidebar\"><!-- Sidebar --> 19

Système d’Information Centralisé sur le Littoral Rapport Code Sourcesection><h3>Présentation</h3><p>Dans le cadre du suivi de l'évolution des écosystèmes Côtiers, pour une gestiondurable du littoral , l'observatoire du littoral a jugé nécessaire la mise en place d'une base dedonnées géographique (GIS WEB) sur les zones humides littorales. </p> <footer> </footer> </section></div></div><div class=\"8u 12u(narrower) important(narrower)\"><div id=\"content\"><!-- Content --><article><header> </header><span class=\"image featured\"><img src=\"images/Plozevet5.jpg\" alt=\"\" /></span></article> </div> </div> </div> </div> </section> <!-- Footer --> <div id=\"footer\"> <div class=\"container\"> </div> <!-- Icons --> <!-- Copyright --> <div class=\"copyright\"> <ul class=\"menu\"><li>&copy; Copyright</li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/\">Graphtech</a></li> </ul></div> </div> 20

Système d’Information Centralisé sur le Littoral Rapport Code Source </div> <!-- Scripts --> <script src=\"assets/js/jquery.min.js\"></script> <script src=\"assets/js/jquery.dropotron.min.js\"></script> <script src=\"assets/js/skel.min.js\"></script> <script src=\"assets/js/util.js\"></script> <!--[if lte IE 8]><scriptsrc=\"assets/js/ie/respond.min.js\"></script><![endif]--> <script src=\"assets/js/main.js\"></script> </body></html>1.3.5 Code HTML de la page « Photothèque » :Figure 5 : Interface Photothèque 1 21

Système d’Information Centralisé sur le Littoral Rapport Code Source Figure 6 : Interface Photothèque 2<!DOCTYPE HTML><html><head><title>Photothèque</title><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /> 22

Système d’Information Centralisé sur le Littoral Rapport Code Source <!--[if lte IE 8]><script src=\"assets/js/ie/html5shiv.js\"></script><![endif]--> <link rel=\"stylesheet\" href=\"assets/css/main.css\" /> <!--[if lte IE 8]><link rel=\"stylesheet\" href=\"assets/css/ie8.css\" /><![endif]--> <!--[if lte IE 9]><link rel=\"stylesheet\" href=\"assets/css/ie9.css\" /><![endif]--> </head> <body> <div id=\"page-wrapper\"> <!-- Header --> <div id=\"header\"> <!-- Logo --><h1><a href=\"index.html\" id=\"logo\"> Zones Sensibles littorales </a></h1><!-- Nav --><nav id=\"nav\"><ul><li ><a href=\"index.html\">Accueil</a></li><li ><a href=\"Presentation.html\">Présentation</a></li><li class=\"current\" ><a href=\"Phototheque.html\">Photothèque</a></li><li><a href=\"Inventaire/InventaireSites.html\" title=\"\"><span>Inventaire de données</span></a> </li> <li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a> </li><li><a href=\"Liens.html\">Liens utiles</a></li><li><a href=\"Contact.html\">Contact</a></li> </ul> </nav> 23

Système d’Information Centralisé sur le Littoral Rapport Code Source</div><!-- Main --><section class=\"wrapper style1\"><div class=\"container\"><div class=\"row 200%\"><div class=\"12u 12u(narrower) important(narrower)\"><div id=\"content\"><!-- Content --><Section class=\"row\" id=\"portfolio-items\"> <ul class=\"portfolio\"><li> <article class=\"span3 project\" > <a href=\"#\"> <div class=\"square-1\"> <div class=\"img-container\"> <img src=\"images/Phototheque/Baghdadi.jpg\" alt=\"\"> <img src=\"images/Phototheque/CapZebib.jpg\" alt=\"\"> <img src=\"images/Phototheque/Chaffar.jpg\" alt=\"\"> <img src=\"images/Phototheque/ChattMami.jpg\" alt=\"\"> <img src=\"images/Phototheque/Ghedhabna.jpg\" alt=\"\"> <img src=\"images/Phototheque/Grottes de bizerte.jpg\" alt=\"\"> <img src=\"images/Phototheque/Guebli.jpg\" alt=\"\"> <img src=\"images/Phototheque/Hawaria.jpg\" alt=\"\"> <img src=\"images/Phototheque/Hergla.jpg\" alt=\"\"> <img src=\"images/Phototheque/Moknine.jpg\" alt=\"\"> <img src=\"images/Phototheque/OUED LAABID.jpg\" alt=\"\"> <img src=\"images/Phototheque/Ras Jebel.jpg\" alt=\"\"> <img src=\"images/Phototheque/Rejich_Salakta.jpg\" alt=\"\"> 24

Système d’Information Centralisé sur le Littoral Rapport Code Source <div class=\"img-bg-icon\"></div> </div> </div> </a> </article> </li> </ul> </article></div></div></div></div></section><!-- Footer --><div id=\"footer\"><div class=\"container\"> </div><!-- Icons --><!-- Copyright --><div class=\"copyright\"><ul class=\"menu\"><li>&copy; Copyright</li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/\">Graphtech</a></li></ul> </div> </div> 25

Système d’Information Centralisé sur le Littoral Rapport Code Source </div><!-- Scripts --> <script src=\"assets/js/jquery.min.js\"></script> <script src=\"assets/js/jquery.dropotron.min.js\"></script> <script src=\"assets/js/skel.min.js\"></script> <script src=\"assets/js/util.js\"></script> <!--[if lte IE 8]><script src=\"assets/js/ie/respond.min.js\"></script><![endif]--> <script src=\"assets/js/main.js\"></script> <!-- JavaScripts --> <script type=\"text/javascript\" src=\"js/jquery-1.8.3.min.js\"></script> <script type=\"text/javascript\" src=\"js/bootstrap.min.js\"></script> <script type=\"text/javascript\" src=\"js/functions.js\"></script> <script type=\"text/javascript\" src=\"js/jquery.isotope.min.js\"></script> <script type=\"text/javascript\" defer src=\"js/jquery.flexslider.js\"></script> </body></html> 26

Système d’Information Centralisé sur le Littoral Rapport Code Source 1.3.6 Code HTML de la page « Inventaire de données » : Figure 7 : Interface Inventaire de données<!DOCTYPE HTML><html> <head> <title>Inventaire</title> <meta charset=\"utf-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /> <!--[if lte IE 8]><script src=\"assets/js/ie/html5shiv.js\"></script><![endif]--> <link rel=\"stylesheet\" href=\"../assets/css/main.css\" /> <!--[if lte IE 8]><link rel=\"stylesheet\" href=\"assets/css/ie8.css\" /><![endif]--> <!--[if lte IE 9]><link rel=\"stylesheet\" href=\"assets/css/ie9.css\" /><![endif]--> 27

Système d’Information Centralisé sur le Littoral Rapport Code Source </head> <body> <div id=\"page-wrapper\"> <!-- Header --> <div id=\"header\"><!-- Logo --><h1><a href=\"index.html\" id=\"logo\"> Zones Sensibles littorales </a></h1><!-- Nav --> <nav id=\"nav\"><ul><li ><a href=\"../index.html\">Accueil</a></li><li ><a href=\"../Presentation.html\">Présentation</a></li><li ><a href=\"../Phototheque.html\">Inventaire</a></li><li class=\"current\" ><a href=\"../InventaireSites.html\">Inventaire de données</a></li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a> </li><li><a href=\"../Liens.html\">Liens utiles</a></li><li><a href=\"../Contact.html\">Contact</a></li></ul></nav></div><!-- Main --><section class=\"wrapper style1\"><div class=\"container\"><div class=\"row 200%\"><div class=\"3u 12u(narrower)\"><div id=\"sidebar\"> 28

Système d’Information Centralisé sur le Littoral Rapport Code Source<!-- Sidebar --><section><ul class=\"links\" > <li class=\"active\"><a href=\"InventaireSites.html\" data-toggle=\"tab\"><strong>Sites SensiblesLittoraux</strong></a></li><li><a href=\"InventaireProgramme_Suivi.html\" >Programmes de suivi </a></li><li><a href=\"InventaireEtude.html\">Etude</a></li><li><a href=\"InventaireDonnee_administratives.html\">Données administratives</a></li><li><a href=\"InventaireLimite.html\">Limite du site</a></li><li><a href=\"InventaireBiodiversite.html\">Biodiversité</a></li><li><a href=\"InventairePatrimoine.html\">Patrimoine archéologique</a></li><li><a href=\"InventaireComposantes.html\">Composantes pays </a></li><li><a href=\"InventaireOccupation.html\"> Occupation du sol </a></li><li><a href=\"InventaireInfrastructure.html\"> Infrastructure </a></li><li><a href=\"InventaireEquipement.html\"> Equipements </a></li><li><a href=\"InventairePression.html\"> Pression </a></li><li><a href=\"InventaireSensibilité.html\"> Sensibilité et fragilité </a></li><li><a href=\"InventaireVulnerabilite.html\"> Vulnérabilité </a></li><li><a href=\"InventaireSupport.html\"> Références et supports </a></li></ul></section></div></div><div class=\"9u 12u(narrower) important(narrower)\"><div id=\"content\"> </div><div class=\"tab-pane active\" id=\"tab1\"><iframe width=\"1000\" height=\"700\" frameborder=\"0\" scrolling=\"no\"src=\"Donnees/SitesSensibles/sites.html\"></iframe> </div></div> 29

Système d’Information Centralisé sur le Littoral Rapport Code Source</div></div></section><!-- Footer --><div id=\"footer\"><div class=\"container\"> </div><!-- Icons --><!-- Copyright --><div class=\"copyright\"><ul class=\"menu\"><li>&copy; Copyright</li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/\">Graphtech</a></li></ul></div></div></div><!-- Scripts --> <script src=\"../assets/js/jquery.min.js\"></script> <script src=\"../assets/js/jquery.dropotron.min.js\"></script> <script src=\"../assets/js/skel.min.js\"></script> <script src=\"../assets/js/util.js\"></script> <!--[if lte IE 8]><script src=\"assets/js/ie/respond.min.js\"></script><![endif]--> <script src=\"../assets/js/main.js\"></script> </body></html> 30

Système d’Information Centralisé sur le Littoral Rapport Code Source 1.3.7 Code HTML de la page « Carte interactive » : Figure 8 : Interface Carte interactive1.3.8 Code HTML de la page « Liens utiles » :31

Système d’Information Centralisé sur le Littoral Rapport Code SourceFigure 9 : Interface Liens utiles 1Figure 10 : Interface Liens utiles 2 32

Système d’Information Centralisé sur le Littoral Rapport Code Source <!DOCTYPE HTML><html> <head> <title>Liens utiles </title> <meta charset=\"utf-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /> <!--[if lte IE 8]><script src=\"assets/js/ie/html5shiv.js\"></script><![endif]--> <link rel=\"stylesheet\" href=\"assets/css/main.css\" /> <!--[if lte IE 8]><link rel=\"stylesheet\" href=\"assets/css/ie8.css\" /><![endif]--> <!--[if lte IE 9]><link rel=\"stylesheet\" href=\"assets/css/ie9.css\" /><![endif]--> </head> <body> <div id=\"page-wrapper\"> <!-- Header --> <div id=\"header\"> <!-- Logo --> <h1><a href=\"index.html\" id=\"logo\"> Zones Sensibleslittorales </a></h1><!-- Nav --><nav id=\"nav\"><ul><li ><a href=\"index.html\">Accueil</a></li><li ><a href=\"Presentation.html\">Présentation</a></li><li ><a href=\"Phototheque.html\">Photothèque</a></li><li><a href=\"Inventaire/InventaireSites.html\" title=\"\"><span>Inventaire de données</span></a> </li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a> </li><li class=\"current\"><a href=\"Liens.html\">Liens utiles</a></li> 33

Système d’Information Centralisé sur le Littoral Rapport Code Source <li><a href=\"Contact.html\">Contact</a></li> </ul> </nav> </div> <!-- Main --> <section class=\"wrapper style1\"> <div class=\"container\"> <div class=\"row 200%\"> <div class=\"8u 12u(narrower)\"> <div id=\"sidebar\"> <!-- Sidebar --> <section> <h3>Liens Utiles</h3> <ul class=\"links\"><li > <a target=\"_blank\" href=\"http://www.biodiv.org\"> Convention sur la diversité biologique</a> </li><li><a target=\"_blank\" href=\"http://www.unep.org\">Programme des Nations Unies pourl'Environnement</a></li><li><a target=\"_blank\" href=\"http://www.banquemondiale.org\">Banque mondiale</a></li><li><a target=\"_blank\" href=\"http://www.unepmap.org\">Plan d'Action pour la Méditerranée</a></li><li><a target=\"_blank\" href=\"http://www.rac-spa.org\">Centre d'Activités Régionales pour les AiresSpécialement Protégées (CAR/ASP)</a></li> <li><a target=\"_blank\" href=\"http://www.pap-thecoastcentre.org\">Centre d'Activités Régionales pour leProgramme d'Actions Prioritaires (CAR/PAP)</a></li> <li><a target=\"_blank\" href=\"http://www.ramsar.org\">La Convention de Ramsar pour les zones humidesd'importance internationale)</a></li><li><a target=\"_blank\" href=\"http://www.medwet.org\">L'initiative MedWet</a></li><li><a target=\"_blank\" href=\"http://www.environnement.nat.tn\">Site de l'Environnement enTunisie</a></li><li><a target=\"_blank\" href=\"http://www.apal.nat.tn\">Agence de Protection et d'Aménagement du Littoral(APAL)</a></li><li><a target=\"_blank\" href=\"http://www.citet.nat.tn\">Centre International des Technologies del'Environnement de Tunis (CITET)</a></li> 34

Système d’Information Centralisé sur le Littoral Rapport Code Source <li><a target=\"_blank\" href=\"http://www.mes.tn/instm/fr/acceuil.php\">Institut National des Sciences etTechnologies de la Mer(INSTL)</a></li><li><a target=\"_blank\" href=\"http://www.changementsclimatiques.tn\">Les Changements Climatiques enTunisie</a></li><li><a target=\"_blank\" href=\"http://www.changementsclimatiques.tn\">Les Changements Climatiques enTunisie</a></li><li><a target=\"_blank\" href=\"http://www.tunisie.com\">Site d'information sur la Tunisie</a></li> <li><a target=\"_blank\" href=\"http://www.bawaba.gov.tn\">Le Portail de l'administrationTunisienne</a></li></ul></section></div></div></div></div></div></section><!-- Footer --><div id=\"footer\"><div class=\"container\"> </div><!-- Icons --><!-- Copyright --><div class=\"copyright\"><ul class=\"menu\"><li>&copy; Copyright</li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/\">Graphtech</a></li></ul></div></div></div><!-- Scripts --><script src=\"assets/js/jquery.min.js\"></script> <script src=\"assets/js/jquery.dropotron.min.js\"></script> 35

Système d’Information Centralisé sur le Littoral Rapport Code Source <script src=\"assets/js/skel.min.js\"></script> <script src=\"assets/js/util.js\"></script> <!--[if lte IE 8]><script src=\"assets/js/ie/respond.min.js\"></script><![endif]--> <script src=\"assets/js/main.js\"></script> </body></html>1.3.9 Code HTML de la page « Contact » : Figure 11 : Interface Contact 1 36

Système d’Information Centralisé sur le Littoral Rapport Code SourceFigure 12 : Interface Contact 2 37

Système d’Information Centralisé sur le Littoral Rapport Code Source<!DOCTYPE HTML><html><head><title>Contact</title><meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /><!--[if lte IE 8]><script src=\"assets/js/ie/html5shiv.js\"></script><![endif]--><link rel=\"stylesheet\" href=\"assets/css/main.css\" /><!--[if lte IE 8]><link rel=\"stylesheet\" href=\"assets/css/ie8.css\" /><![endif]--><!--[if lte IE 9]><link rel=\"stylesheet\" href=\"assets/css/ie9.css\" /><![endif]--></head><body><div id=\"page-wrapper\"><!-- Header --><div id=\"header\"><!-- Logo --><h1><a href=\"index.html\" id=\"logo\"> Zones Sensibles littorales </a></h1><!-- Nav --><nav id=\"nav\"><ul><li ><a href=\"index.html\">Accueil</a></li><li ><a href=\"Presentation.html\">Présentation</a></li><li ><a href=\"Phototheque.html\">Photothèque</a></li><li><a href=\"Inventaire/InventaireSites.html\" title=\"\"><span>Inventaire de données</span></a> </li> 38

Système d’Information Centralisé sur le Littoral Rapport Code Source<li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/webapp/amal/APAL/Zones-Sensibles-Littorales/\">Carte interactive</a> </li><li><a href=\"Liens.html\">Liens utiles</a></li><li class=\"current\" ><a href=\"Contact.html\">Contact</a></li></ul></nav></div><!-- Main --><section class=\"wrapper style1\"><div class=\"container\"><div class=\"row 200%\"><div class=\"6u 12u(narrower)\"><div id=\"sidebar\"> <!-- Sidebar --> <section> <h1 style=\"padding-left: 20px; padding-top: 50px;\" Font-Names=\"Verdana\" Font-Size=\"10pt\"ForeColor=\"#215821\" >Agence de Protection et d'Aménagement du Littoral </h1><h1 style=\"padding-left: 65px\" Font-Names=\"Verdana\" Font-Size=\"10pt\" ForeColor=\"#215821\" > 2, RueMohamed Rachid Ridha </h1> <h1 style=\"padding-left: 65px\" Font-Names=\"Verdana\" Font-Size=\"10pt\" ForeColor=\"#215821\" > LeBélvèdére, 1002 Tunis, TUNISIE </h1> <h1 style=\"padding-left: 65px\" Font-Names=\"Verdana\" Font-Size=\"10pt\" ForeColor=\"#215821\" > TEL :(+216) 71 906 577 </h1> <h1 style=\"padding-left: 65px\" Font-Names=\"Verdana\" Font-Size=\"10pt\" ForeColor=\"#215821\" />FAX :(+216) 71 908 460 </h1> <h1 style=\"padding-left: 65px\" Font-Names=\"Verdana\" Font-Size=\"10pt\" ForeColor=\"#215821\" /> Email :[email protected]</h1><img style=\"padding-left: 90px\" src=\"images/10_locale.jpg\" ></img> 39

Système d’Information Centralisé sur le Littoral Rapport Code Source<footer> </footer></section></div></div><div class=\"6u 12u(narrower) important(narrower)\"><div id=\"content\"><!-- Content --><article><header> </header><span class=\"image featured\"><p align=center><iframesrc=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1596.9303835546348!2d10.185030099999992!3d36.821856200000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12fd348933ab7e5b%3A0 x50d1572f7bc9af18!2sRue+Mohamed+Rachid+Ridha%2C+Tunis%2C+Tunisie!5e0!3m2!1sfr!2sfr!4v1435420439055\" width=\"550\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe></span> </article></div></div></div></div></section><!-- Footer --><div id=\"footer\"><div class=\"container\"> </div><!-- Icons --><!-- Copyright --><div class=\"copyright\"><ul class=\"menu\"><li>&copy; Copyright</li><li><a target=\"_blank\" href=\"http://www.graphtech-gis.com/\">Graphtech</a></li> 40</ul></div></div>

Système d’Information Centralisé sur le Littoral Rapport Code Source</div><!-- Scripts --> <script src=\"assets/js/jquery.min.js\"></script> <script src=\"assets/js/jquery.dropotron.min.js\"></script> <script src=\"assets/js/skel.min.js\"></script> <script src=\"assets/js/util.js\"></script> <!--[if lte IE 8]><script src=\"assets/js/ie/respond.min.js\"></script><![endif]--> <script src=\"assets/js/main.js\"></script> </body></html> 41

Système d’Information Centralisé sur le Littoral Rapport Code Source CONCLUSIONNous avons implémenté un GISWEB portable, dynamique et adaptable à tout typed’écran afin de faciliter aux utilisateurs et aux décideurs l’accès aux informationset aux données stockées dans la base de données zones sensibles littorales.42