docCM TechnoWeb
download 
Plainte Transcription
CM TechnoWeb
Créer et Afficher une carte sur le web Christelle Pierkot Master CarthaGéo Année 2006-2007 Internet : Généralités Réseau informatique mondial Courrier électronique, World Wide Web, … Quelques Protocoles IP : Adresse unique sur le réseau HTTP : Chargement des pages web FTP : Transfert de fichiers SMTP : Envoi de mails POP : Réception de mails De plus en plus d’utilisateurs Le Web Protocole de communication Hypertext Transfer Protocol (HTTP) Accès via les adresses Web http://www.exemple.com Création grâce au langage de balisage HyperText Markup Language (HTML) Caractéristiques d’un site web Gestion du site : Statique VS Dynamique Site statique Site dynamique Pages construites « en dur / non connecté à une base de données Possibilités d’avoir des animations ou fonctionnalités diverses (formulaires..) Pages construites « à la volée » par le serveur / base de données Personnalisation / Interactivité Interactivité : fonctionnalités offertes à l’utilisateur Visualisation simple d’une carte Fonctions de déplacement sur une carte (zooms, pan) + Fonctions de présentation (affichage d’une couche, changement d’échelle, vue globale) Fonctionnalités avancées : acquisition, manipulation, gestion et traitement des données géographiques et attributaires Créer un site web 1. Définir son objectif 2. Définir le public cible 3. Qui va consulter mon site ? Définir sa structure 4. Pourquoi je crée un site ? Comment est organisé mon site ? Définir son contenu Qui a-t-il dans mon site ? Site Web : Étapes de la création Organisation Contenu Page : Document informatique qui peut contenir du texte, des images, des formulaires à remplir et divers autres éléments multimédias et interactifs Page d’accueil : Le point d’entrée de votre site Création Définir une arborescence Liens entre les pages Grâce à un logiciel : FrontPage, Lauyan TOWeb, … Avec un éditeur de texte Publication Choisir un hébergeur Envoyer les fichiers sur le serveur Constituants d’une page web La composition de la page: en HTML ou en XHTML HTML : Langage informatique pour écrire des pages web XHTML se base sur la syntaxe définie par XML La présentation de la page : les feuilles de style CSS CSS : Cascading Style Sheets Définir les couleurs, les polices, le rendu … Objectif : Séparer la structure de la présentation Le graphisme avec des images GIF, JPG, PNG. Des animations en Flash ou en SVG. Des objets multimédias. Des formulaires FrontPage Logiciel pour la création et l’édition de pages web Inclus dans la suite Microsoft Office But : aider à concevoir vos pages web sans avoir à vous soucier du code HTML. Ressemble beaucoup au logiciel Word mais sa fonction n’est pas la même. Cela n’empêche pas de connaître l’HTML ;-). Un site Web FrontPage contient des pages Web, des graphiques, des documents, du multimédia - en fait, presque n'importe quel fichier. HTML HyperText Markup Langage Langage de balisage permettant la création des pages web Écrit entre des balises ouvrantes et des balises fermantes. La première étant la balise <html> et la dernière </html> Deux parties distinctes : <Head> l’entête </Head> et <Body> Le corps </Body> <HTML> <HEAD> ... <TITLE>Titre du document</TITLE> ... </HEAD> <BODY> Contenu du document </BODY> </HTML> CSS Cascading Style Sheets : Feuilles de style en cascade But : définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document Objectif : séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. Bénéfices : Améliorer l'accessibilité, changer plus facilement de structure et de présentation et réduire la complexité de l'architecture d'un document. Publier son site sur le web Trouver un hébergeur Payant Gratuit : Free, ChezCom, Multimania, … Envoyer les pages Directement depuis FrontPage Grâce à un client FTP. Exemple : FileZilla (gratuit) Quelques exemples de sites cartographiques Cartographie classique http://www.monde-diplomatique.fr/cartes/ Quelques exemples de sites cartographiques Carte cliquable : http://sig.ville.gouv.fr/ Quelques exemples de sites cartographiques Cartographie dynamique http://eu-geoportal.jrc.it/ Projet But : Création d’un site cartographique A l’aide de FrontPage Directement en HTML Votre site doit contenir : Une page d’accueil (FrontPage) Plusieurs pages différentes (structure et contenu) dans lesquelles : Il y a des images (FrontPage + HTML) Il y a des liens hypertextes, des signets (FrontPage + HTML) Il y a des tableaux (FrontPage + HTML) Il y a la possibilité de vous envoyer un email (FrontPage + HTML) Il y a des documents à télécharger (FrontPage + HTML) Il y a des titres, des couleurs, des paragraphes … (FrontPage + HTML) Il y a des listes déroulantes (FrontPage + HTML) Il y a des formulaires (HTML) Il y a possibilité de cliquer sur une zone d’une image (FrontPage) Projet (suite) Accueil Étapes préliminaires (sur le papier) Définir l’organisation du site Arborescence Liens entre les pages Affichage : Monde Comprendre la cartographie Cartes Coordonnées Reliefs Amérique du nord Amérique du sud VotrePage Europe Afrique Océanie Liens vers les autres pages (Ex: depuis la page d’accueil, mettre un lien vers « Comprendre la cartographie, Affichage, MonSite) Définir le contenu de chaque page Disposition Texte Images Mise en forme (gras, italique, centré, encadré …) … Description de la page Étape 1 : Création de pages avec FrontPage Étape 2 : Création de pages avec HTML CF. Cours FrontPageV1.Doc pour la documentation de FrontPage et de HTML Étape 3 : Écrire un mini rapport dans lequel vous expliquez vos choix Étape bonus : Utilisation de CSS pour la mise en forme Images
