Web Mapping

1
Web Mapping

1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. Fonctionnement du serveur

2
information géographique
1) Les données en mode raster ou maillé ou matriciel :
un quadrillage régulier du terrain

n° l igne
Pix el Image satellitale Document scanné

n° c o l o n n valeur = radiométrie (intensité lumineuse)

3
information géographique
Les données en mode vecteur (ou vectoriel)
Les primitives géométriques sont des objets élémentaires :

Primitives Exemple

x le point une borne

x---x le segment (peu utilisé)

x x la ligne un axe de route

x
x

x x
x la surface une commune
x x

x AB le texte un toponyme St-Mésis

4
Web Mapping

1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. Fonctionnement du serveur

5
6
7
8
Architecture client-serveur

comment cela fonctionne

et

à quoi cela sert

9
{?
10
Que trouve-t-on dans un serveur ?

= un programme

= des fichiers de données

= une base de données = +

11
Architecture client-serveur
www.bidule.fr
+ truc.html
+ identifiant exp.
www.bidule.fr/truc.html
truc.html

affichage

navigateur serveur web

IE, Netscape, Apache
Firefox, etc.

12
13
14
Le client

affichage

navigateur

15
Le serveur

La gestion des fichiers sur le serveur :

• Le client voit : truc.html
• L’administrateur voit :
c:\Program Files\apache\wwwroot\truc.html
• Tout ce qui est en dehors de :
c:\Program Files\apache\wwwroot
est invisible pour le client

16
 c:\
Le serveur
Program Files\

apache\

truc.html
wwwroot\

Apache
truc.html
machin\

17
 c:\
Le serveur
Program Files\
www.bidule.fr
/machin/truc.html
apache\

truc.html
wwwroot\

Apache
truc.html
machin\
c:\Progra m chin\truc.html
Files\apache\wwwroot\ma

18
 Le serveur

www.bidule.fr
/machin/

Apache
truc.html
machin\
c:\Program Files\apache\wwwroot\machin\index.html
c:\Program Files\apache\wwwroot\machin\index.htm
c:\Program Files\apache\wwwroot\machin\index.php
19
20
21
Client et plug-in – serveur et modules
truc.php?x=12&y=45
Apache
www.bidule.fr/truc.php?x=12&y=45
truc.php

affichage
javascript

$x=12
PHP $y=45
plug-in
navigateur
MySQL

=> Le web dynamique

22
Un image dans une page
www.ensg.ign.fr
1- appelle le document + truc.html
+ identifiant exp.
www.bidule.fr/truc.html
truc.html

2- lit le document :
il y a une image dedans
src="Guernesey.jpg" 3- appelle l’image

4- reçoit l’image
et l’insère dans la page

23
Web Services

affichage
javascript

PHP Webservice
plug-in
navigateur
MySQL

24
 Page Dynamique

API Client
3 2
Page dynamique

1 Serveur de l’API

4
5
6
affichage

25
Web Mapping

1. l’information géographique
2. Clients et serveurs, internet
3. Image et internet
4. Client cartographique
5. Serveur cartographique
6. Les flux de données
7. Fonctionnement du serveur

26
 Internet (rappel)

Protocole ?
Internet
Langages Web

HTML / XML
Client / Serveur ?
Feuilles de styles
CSS

Javascript HTTP ?
PHP

URL ?

Firas Bessadok 27
 Internet (rappel)

Protocole :
Internet
Langages Web Spécification de formats de messages et de règles
permettant à 2 ou plusieurs ordinateurs (ou systèmes) de communiquer.
HTML / XML
Client / Serveur :
Feuilles de styles
Architecture de communication entre plusieurs ordinateurs,
CSS qui distingue un ou plusieurs clients du serveur.
Javascript HTTP :
Protocole de communication client-serveur.
PHP Transfert de documents hypertextes (initialement, du HTML).

URL :
Uniform Ressource Locator - Chaine de caractères contenant toutes
les informations permettant à un logiciel d’accéder à la ressource.

Firas Bessadok 28
 Langages web (html)

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 29
 Langages web (html)

Permet de créer des pages web

Internet
Langages Web Structuration du texte avec des balises

HTML / XML Permet de structurer et d’afficher différents objets

Feuilles de styles
Doit pouvoir s’afficher dans n’importe quel navigateur
CSS (attention aux écarts de rendu)

Javascript

PHP

Firas Bessadok 30
 Langages web (html)

Briques de bases => Les balises

Internet
Langages Web Définies entre < et >
HTML / XML
Deux types :
(1) Balises unitaires
Feuilles de styles
CSS (2) Balises binaires

Javascript (1) Constitué d’une seule balise

<mabalise … />
PHP

(2) Constitué d’une balise ouvrante et d’une balise fermante

<mabalise> … </mabalise>

Comportent des attributs

<mabalise att = ’…’ />
Firas Bessadok 31
 Langages web (html)

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 32
 Langages web (html)

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 33
Basic Web Page Operation
Web Server
(Listening for requests)

Request

Response
(HTML document)
 Langages web (html)

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 35
 Langages web (html)

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 36
 Langages web (html)

Internet
Langages Web Limites :
HTML / XML

• Rigidité de la syntaxe (éléments prédéfinis)

Feuilles de styles
CSS

Javascript • Ne décrit pas tous les types de documents

(bases de données, équations mathématiques, etc …)
PHP

• N'est pas un langage de programmation

Firas Bessadok 37
XML – eXtensible Markup Language
• XML is a tagged markup language like <person>
HTML, but is general purpose (users <gender>male</gender>
define tags) <age>29</age>
<firstname>John</firstname>
<lastname>Doe</lastname>
• Designed to simplify storing and </person>
exchanging data

• Documents are in text with opening

and closing tags surrounding data

• The rules with which an XML document

must conform is referred to as a
schema
Gender Age First Last
• Schemas are stored as XML in a XML
Schema Definition file (.XSD) Name Name
Male 29 John Doe
 Langages web (xml)

Langage de description des documents

Internet
Langage de balisage
Langages Web Permet l'utilisation de balises personnalisées
Document à hiérarchie arborescente
HTML / XML Utilisé dans l'échange des données.

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 40
 Feuilles de styles
CSS
Le langage CSS (Cascading Style Sheets) est utilisé pour définir l'aspect futur de votre site,
comme par exemple la couleur du fond de la page ou le type de police.

Plus concrètement, le CSS (ou feuille de style), c'est un petit fichier (exemple "style.css") dans
lequel vous allez définir l'aspect futur de votre site.

Pourquoi utiliser le CSS ?

La structure et la présentation sont gérées séparément
En effet, vous pouvez modifier les couleurs, polices de caratères directement dans le fichier CSS
et la structure (texte, images) directement dans la page HTML.
Il facilite la portabilité du contenu
Une fois le contenu HTML correctement mis en place, il devient facile de changer l'apparence de
son site.
Le code HTML est réduit en taille et en complexité.

41
 Feuilles de styles CSS

Séparation Contenu / Forme

Internet
Langages Web Styles -> permettent d’appliquer des propriétés à des balises HTML

HTML / XML Données HTML -> Contenu

Données CSS -> Forme
Feuilles de styles
CSS Fichier CSS -> un ensemble de styles

Javascript Plusieurs fichiers HTML peuvent utiliser les mêmes styles

PHP => Homogénéité de présentation des pages

=> Simplification des modifications

Firas Bessadok 41
 Feuilles de styles CSS

Deux possibilités :
Internet
Langages Web (1) Intégration dans le fichier HTML, dans une balise <style></style>
entre les balises <head></head>
HTML / XML préciser le type du texte type=‘text/css’

Feuilles de styles
(2) Dans un fichier indépendant avec comme extension .css
CSS Intégration dans le fichier html grâce à la balise <link>

Javascript

PHP

Firas Bessadok 42
 Feuilles de styles CSS

Feuilles de styles : attribuer des propriétés à des balises html

Internet
Langages Web balise1
{
HTML / XML propriete: valeur;
propriete: valeur;
Feuilles de styles
propriete: valeur;
CSS }

Javascript balise2
{
PHP propriete: valeur;
propriete: valeur;
}

Firas Bessadok 43
 Feuilles de styles CSS

Exemple :
Internet
Langages Web
p
HTML / XML
{
color: blue;
font-size: 18px;
Feuilles de styles }
CSS

Javascript (1) <link rel="stylesheet" media="screen" type="text/css"

title="Essai" href="style.css" />

PHP (2) <style type="text/css"> … </style>

Firas Bessadok 44
 Feuilles de styles CSS

Exemple :
Internet
Langages Web <html>
<head>
HTML / XML <title>Exemple test CSS</title>
<link rel="stylesheet" media="screen" type="text/css"
title="Essai" href="essai_css.css" />
Feuilles de styles
CSS </head>
<body>
Javascript <h1>D&eacute;couverte du CSS</h1>
<p>Bonjour !<br />
PHP I am une page XHTML,
mais je sers en fait de test de fichier CSS.
</p>
<h2>et blablabla ....</h2>
</body>
</html>

Firas Bessadok 45
 Feuilles de styles CSS

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 46
 Site web
statique VS dynamique

Site statique ?
Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript Site dynamique ?

PHP

Firas Bessadok 47
 Site web
statique VS dynamique

Site statique :
Internet
Langages Web
Site composé (uniquement) de page HTML
HTML / XML
Pages crées une à une
⇒Gestion difficile
⇒Modification manuelle de toutes les pages en cas de mise à jour
Feuilles de styles ⇒Ne peux être connecté à une base de données
CSS

Javascript Site dynamique :

PHP Pages HTML crées à la volée par le serveur
Peut afficher des données provenant d'une BD
Exemples les plus courants : forum, blog, sites d'information en direct
⇒développé avec des langages de programmation (php, jsp, asp, etc ...)

Firas Bessadok 48
 Site web
statique VS dynamique

Internet Client Pages HTML Serveur

Langages Web
Données

Internet
HTML / XML

Feuilles de styles Navigateur Serveur web

CSS

Requêtes HTTP
Javascript

- Envoi requête HTTP - Réception requêtes

PHP - Recherche fichier HTML
ou exécution de script
- Formatage

- Réception page HTML - Envoi page HTML

- Décodage et affichage

Firas Bessadok 49
 Javascript

Langage de programmation
Internet
Langages Web Insertion d’instructions de programmation dans une page html

HTML / XML Exécution du code sur le poste client

Feuilles de styles
Utilités :
CSS - Tester le contenu d’un formulaire avant son envoi
- Afficher des animations
Javascript - Traiter des évènements utilisateur (déplacement de souris, touche clavier …)
- etc …
PHP
Javascript est différent de Java

Firas Bessadok 50
 Javascript

Internet
Langages Web

Client Pages HTML Serveur

HTML / XML
Données
Feuilles de styles
CSS Internet
Javascript Navigateur Serveur web
JS
Requêtes HTTP
PHP

Firas Bessadok 51
 Javascript

Entre les balises <script> … </script>

Internet
Langages Web Dans un fichier externe
<script language=‘Javascript’ src=’essai.js’></script>
HTML / XML

Syntaxe très proche du C (et du Java, et du Php)

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 52
 Javascript

Exemple :
Internet
Langages Web Essai_js.js
function theEnd()
HTML / XML {
alert(‘Y en a pas !! Jtai bien eu hein !!’);
}
Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 53
 Javascript

Exemple :
Internet
Langages Web Essai_js.html
<html>
HTML / XML <head>
<title>Test Javascript</title>
<script language="Javascript" src="essai.js">
Feuilles de styles
CSS </script>
</head>
Javascript <body>
<p>
PHP Pour afficher le msg secret
<a href="javascript:msg();">click here</a>
or <a href="" onMouseOver="msg();">
passez la souris ici
</a>.
</p>
</body>
</html> Firas Bessadok 55
 Javascript

Internet
Langages Web

HTML / XML

Feuilles de styles
CSS

Javascript

PHP

Firas Bessadok 55
 Conclusion

Internet
Langages Web Présentation non-exhaustive
HTML / XML
Multitude de langages
Feuilles de styles
CSS Besoin d’être maitrisés pour le web mapping
Javascript

Révision « obligatoire »
PHP

Firas Bessadok 62