Projet final SNT

INSTRUCTIONS

I-Présentation générale
II-Recherche et collecte des informations
III-Réalisation des pages html et du css
IV-Création du fichier csv
V-Création du fichier python
VI-Finalisation

I-Présentation générale

Le but de ce projet final est de réaliser une carte interactive. Cette carte, réalisée à partir des cartes d'OpenStreetMap, contiendra des marqueurs contenant des informations que vous aurez écrites.
Voici un exemple de ce qui est à réaliser. (Remarque: cet exemple est très simple et ne doit pas servir de modèle: j'attends mieux de vous!).

Pour réaliser ce projet, il faudra donc

Choisir une région, ville, pays..... à présenter
Rechercher les lieux "symboliques" (au moins 6)
Rechercher des informations sur ces lieux "symboliques"
Déterminer les cordonnées GPS de ces lieux
Réaliser une page html pour chacun des lieux
Ecrire un fichier .css qui sera commun aux pages html pour avoir une uniformité de présentation
Ecrire un fichier .csv contenant les données
Modifier un fichier python pour générer la carte
....

II-Recherche et collecte des informations

Sur votre ordinateur, créer un dossier dénommé "projet_SNT"
Commencer par rechercher la région que vous souhaitez présenter (on évitera Dunkerque et sa région!)
A l'aide de recherches (internet, encyclopédie....), déterminez au moins 6 lieux symboliques de cette région
Pour chacun des lieux, rechercher une image ou une photo caractéristique et stockez la dans votre dossier "projet_SNT": choisir un nom explicite et sans accent, ni espace, ni majuscules.... (ex: tour_eiffel.jpg) pour chaque image
Pour chacun des lieux, rechercher des informations (qui serviront à la réalisation des futures pages html).
Vous pouvez, par exemple, créer un fichier de traitement de texte classique (word ou libreoffice ou google docs.....) pour stocker ces informations: un fichier par lieu
Aller sur le site OpenStreetMap et relevez les coordonnées GPS de vos lieux "symboliques" et recopier les dans le fichier "traitement de texte" correspondant à chaque lieu. Pour obtenir les coordonées GPS dans OpenStreetMap: clic droit sur le lieu considéré et choisir "afficher l'adresse"

III-Réalisation des pages html et du css

A l'aide des informations que vous avez collectées, vous allez réaliser une page html par lieu "symbolique".

Créez un fichier style.css (vide pour le moment) dans votre dossier "projet_SNT"
Structure minimale d'un document html
Réaliser vos pages html (une par lieu "symbolique"), en prenant soin d'indiquer des identifiants dans vos balises:
exemple: <p id=paragraphe1>, <h2 id=titre2>..... cela vous simplifiera la gestion du fichier style.css.
Remarque importante: Si vous réalisez ce projet en groupe, il est important d'harmoniser les identifiants entre les différents membres du groupe: il n'y aura qu'un seul fichier css commun pour le projet final
Vos pages html peuvent contenir des images ou des sons: dans ce cas, il faut télécharger les images et les fichiers sons dans votre dossier "projet_SNT". Elles peuvent aussi contenir des liens vers d'autres pages html, ou site, ou formulaire (à créer)......
Modifier alors le fichier style.css pour réaliser des pages html attrayantes: je laisse libre cours à votre sens artistique. Voici quelques liens pour vous aider: ici et là.

IV-Création du fichier csv

A ce stade, votre dossier "projet_SNT" doit contenir:

OBLIGATOIREMENT:
- les fichiers images de chaque lieu "symbolique" utilisées lorsqu'on cliquera sur un marqueur sur la carte
- les fichiers html correspondant à chaque lieu symbolique
- le (et pas les!) fichier style.css
- les fichiers .doc ou .odt correspondant aux recherches sur chaque lieu et contenant les coordonnées GPS.
EVENTUELLEMENT: les fichiers images utilisés dans les pages html; les fichiers sons

Pour créer la carte, il faut donc organiser les données et créer un fichier au format .csv. Pour cela, avec un éditeur de textes comme bloc notes, créer un nouveau fichier dont la structure ressemblera à la suivante:


Nom,Description,image,Lat,Lon,lien

Place Jean Bart,Statue du Corsaire,statueJB.jpg,51.0348447,2.3770246,statueJB.html

Tour du Leughenaer,Une tour historique Dunkerquoise du moyen âge,leughenaer.jpg,51.04018,2.37853,leughenaer.html

.....

Explications:

La première ligne est la ligne d'en-tête: elle est INDISPENSABLE!

Nom est le nom du lieu "symbolique"
Description est une description courte du lieu "symbolique"
image correspond au nom du fichier image correspondant au lieu "symbolique": ne pas oublier l'extension du fichier (.jpg; .png......) voir exemple sur les 2 lignes suivantes sur le modèle précédent
Lat correspond à la latitude
Lon correspond à la longitude
lien correspond au nom du fichier html associé au lieu "symbolique": ne pas oublier l'extension.html

Les lignes suivantes correspondent aux données: il y a donc une ligne par lieu "symbolique".
Enregistrer ensuite votre fichier sous le nom "donnees.csv" (et pas donnees.txt!)

V-Création du fichier python

Pour créer un fichier html contenant une carte de la région considérée, avec des marqueurs, reliés à des données (image, page html), il est nécessaire d'utiliser un peu de programmation: et avec Python, bien sûr!
Pour manipuler les cartes d'OpenStreetMap, avec python, il faut installer le paquet "folium" (voir ici pour l'installation)

Exemple 1:
Pour voir si tout fonctionne, ouvrez Thonny (après avoir installé folium) et copier-coller le code suivant:


import folium

c= folium.Map(location=[51.0294,2.3528])

c.save('maCarte.html')

Enregistrer ce fichier dans un nouveau dossier dénommé "essai".
Lancer le programme.
Vous devriez voir apparaître un nouveau fichier. Quel est son format?
Réponse: html .
En cliquant sur ce fichier, qu'observez-vous? Une carte OpenStreetMap avec Dunkerque au centre.
A quoi correspondent les chiffres: 51.0294,2.3528? Aux coordonnées GPS du centre de Dunkerque

Exemple 2:
Copier-coller le code suivant:


import folium

c= folium.Map(location=[51.0294,2.3528],zoom_start=13)

folium.Marker([51.03784,2.38506],popup="Lycée Jean Bart").add_to(c)

c.save('maCarte.html')

Tester ce code et double cliquer sur le fichier maCarte.html
Quels sont les changements observés par rapport à la carte précédente?
- La carte n'est pas à la même échelle
- Il y a un marqueur sur le lycée
- Quand on clique sur le marqueur, l'inscription "lycée Jean Bart" apparaît
Si l'on souhaite que la carte s'affiche avec un zoom plus important, que faut-il changer dans le code précédent?
Il faut augmenter la valeur de zoom_start
Si au lieu de voir s'afficher "lycée Jean Bart", on souhaite lire "C'est mon lycée", que faut-il modifier?
Il faut modifier le champ popup
A quoi correspondent les chiffres 51.03784,2.38506?
Aux coordonnées GPS du lycée Jean Bart

Retour au projet

Téléchargez le fichier suivant et enregistrez le sous le nom prog-carte.py dans votre dossier "projet_SNT"

Lancer le programme avec Thonny et..... vous devriez voir apparaître un nouveau fichier: index.html dans votre dossier. Ouvrez-le. Qu'observez-vous?

Ajustez le fichier python:

Le zoom de la page doit être adapté à la taille de votre zone "d'exploration"
Vous pouvez modifier la taille des images de la fenêtre pop-up
Vous pouvez modifier la couleur du marqueur, changer le type d'icone
modifier l'organisation de la pop-up
....

VI-Finalisation

Nous sommes presque arrivés au bout du projet! Si vous avez réalisé le projet à plusieurs, il faudra désigné comme "conclueur" un membre de "l'équipe" pour rassembler les différents fichiers html, images.... dans un seul dossier "projet_SNT".
La personne en charge de la finalisation doit donc avoir dans son dossier "projet_SNT" les fichiers suivants:

OBLIGATOIREMENT:
- les fichiers images de chaque lieu "symbolique" utilisées lorsqu'on cliquera sur un marqueur sur la carte
- les fichiers html correspondant à chaque lieu symbolique
- le (et pas les!) fichier style.css
- les fichiers .doc ou .odt correspondant aux recherches sur chaque lieu et contenant les coordonnées GPS: ces fichiers peuvent normalement être supprimés!
- le fichier données.csv
- le fichier prog-carte.py
- le fichier index.html contenant la carte finale
EVENTUELLEMENT: les fichiers images utilisés dans les pages html; les fichiers sons

Travail final à réaliser par le "conclueur":

Afin de "signer" votre travail, vous allez modifier le fichier index.html afin d'ajouter un titre, une description, le nom des auteurs etc.....
Pour cela, ouvrez ce fichier avec un éditeur de textes comme bloc-note et ajouter la ligne suivante "quelque part" dans l'en-tête:
<link rel="stylesheet" href="style.css"/>
Ensuite entre les balises <body>, insérez, au dessus de la carte, du texte correspondant au titre, description...

Enregistrez

Vérifiez

Et c'est fini!

Déposer le dossier Projet_SNT dans le dossier "Projet" du membre de l'équipe responsable de la finalisation et envoyez moi un mail pour m'indiquer dans quel dossier je dois aller chercher votre travail!

python données géolocalisation.
: python données géolocalisation, interactive mathematics, interactive math, server side interactivity

Veuillez noter que les pages WIMS sont générées interactivement; elles ne sont pas des fichiers HTML ordinaires. Elles doivent être utilisées interactivement EN LIGNE. Il est inutile pour vous de les ramasser par un programme robot.