Master Class OL3 Documentation
|
|
|
- Sylvaine Mongrain
- il y a 8 ans
- Total affichages :
Transcription
1 Master Class OL3 Documentation Version 2.0 Éric Lemoine, Camptocamp 10 April 2014
2
3 Table des matières 1 Exercices élémentaires Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Exercice élémentaire Corrections des exercices élémentaires Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Correction exercice élémentaire Développement d une application Étape Étape Étape Étape Étape Étape Étape Correction application Correction étape Correction étape i
4 ii 4.3 Correction étape Correction étape Correction étape Correction étape Correction étape
5 Ce document contient les énoncés et corrections des exercices de la master class OpenLayers 3 donnée aux Rencontres SIG-la-lettre Il est disponible en ligne à http ://erilem.net/master-class-ol3/exercices/. Une version PDF peut être téléchargée à http ://erilem.net/master-class-ol3/exercices/exercices.pdf. La partie Exercices élémentaires contient des exercices relativement simples visant à se familiariser avec OpenLayers 3. Chaque exercice élémentaire est indépendant. La partie Développement d une application propose le développement d une (modeste) application web cartographique de A à Z. Les données géographiques utilisées pour cette application sont issues de la plate-forme GéoBretagne. C est le service WMS mis à disposition par GéoBretagne qui sera utilisé. Liens utiles : Doc de l API : http ://ol3js.org/en/master/apidoc/ Exemples officiels : http ://ol3js.org/en/master/examples/ Table des matières 1
6 2 Table des matières
7 CHAPITRE 1 Exercices élémentaires Tous les exercices de cette partie se font à partir de la page HTML suivante : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm() ] </script> </body> </html> Note : Pensez à lire les indices! 3
8 1.1 Exercice élémentaire 1 Afficher une carte simple 1. Copier le code HTML donné ci-dessus et le coller dans un fichier du nom de votre choix, exercice-elementaire-1.html par exemple. 2. Placer ce fichier dans un répertoire rendu accessible par HTTP par le serveur web. 3. Ouvrir la page web dans un navigateur, en utilisant http comme protocole d accès à la page. 4. Vérifier que l exemple fonctionne correctement. 5. Utiliser les interactions et les controls de la carte. (Pas de correction pour cet exercice.) 1.2 Exercice élémentaire 2 Choisir le renderer de la carte OL3 peut utiliser trois technologies web différentes pour l affichage de la carte : WebGL, Canvas, et DOM. Si rien n est précisé par l utilisateur la librairie OL3 choisit WebGL si le navigateur prend en charge WebGL. Sinon OL3 choisit Canvas, et enfin, si Canvas n est pas pris en charge, c est le renderer DOM qui est utilisé. 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-2.html par exemple. 2. Faire en sorte que le renderer Canvas soit utilisé par la carte. Il faut pour ceci positionner la propriété renderer dans l objet d options passé au constructeur ol.map. Et la valeur pour cette propriété doit être canvas. 3. Faire maintenant en sorte que ce soit le renderer DOM qui soit utilisé. Correction exercice élémentaire 2 Indice : Pour vérifier quel renderer est utilisé vous pouvez effectuer un clic droit sur la carte et sélectionner Inspecter l élément. Si c est le renderer DOM qui est utilisé l élément inspecté sera une balise <img>, sinon ce sera une balise <canvas>. Cette technique ne permet pas de distinguer Canvas de WebGL. 1.3 Exercice élémentaire 3 Initialiser la vue de la carte 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-3.html par exemple. 2. Modifier l objet d options passés au constructeur ol.view2d pour que la vue soit initialisée avec un niveau de zoom égal à Modifier à nouveau l objet d options pour que la vue soit initialisée avec un centre égal à [ , ]. 4. Modifier à nouveau l objet d options pour que la vue soit pivotée (rotation) d un angle de 45 dans le sens des aiguilles d une montre. Correction exercice élémentaire 3 4 Chapitre 1. Exercices élémentaires
9 1.4 Exercice élémentaire 4 Changer la vue de la carte 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-4.html par exemple. 2. Ouvrir la nouvelle page HTML et ouvrir les outils de développement du navigateur. Vous pouvez utiliser la touche F12 comme raccourci. 3. Saisir dans la console des outils de développement la commande JavaScript permettant d obtenir le centre actuel de la vue. 4. Toujours dans la console, agir sur la vue pour changer son centre à [ , ]. 5. Obtenir dans la console la résolution actuelle de la vue. 6. Agir sur la vue pour passer à une résolution fois plus petite que la résolution actuelle. 7. Agir sur la vue pour faire pivoter la carte de 45 degré à l est. 8. Ajouter les lignes JavaScript saisies précédemment dans la console dans le code JavaScript de la page HTML, juste après la création de la carte. Recharger la page dans le navigateur et vérifier que la vue est correcte. Indice : La variable map définie dans le code JavaScript de la page est globale. Elle est donc directement accessible dans la console. Pour obtenir l objet vue (ol.view2d) avec lequel la carte a été configurée il faut utiliser map.getview(). Les objets de type ol.view2d fournissent des fonctions getter pour accéder aux états de la vue. Exemple : view.getcenter(). De la même façon ils fournissent des setters pour changer les états de la vue. Exemple : view.setrotation(45). Correction exercice élémentaire Exercice élémentaire 5 Aller un peu plus loin avec la vue 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-5.html par exemple. 2. Modifier le code JavaScript de la page afin que l objet ol.view2d soit créé à l extérieur de la définition de l objet des options passé à la carte. L objet ol.view2d créé sera référencé par une variable nommé view. Et c est cette référence qui devra être passé à la carte par l intermédiaire de l option view. 3. Après la création de la carte, agir sur la vue (référencée par la variable view) pour recentrer celle-ci sur l étendue [ , , , ]. 4. Changer le code pour que la vue n ait pas d état initial, et pour qu elle ne soit rééllement définie que lorsque qu elle est recentrée sur l étendue spécifiée. 5. Tenter de comprendre pourquoi la fonction fitextent a besoin des dimensions de la carte en pixels pour faire ce qui lui est demandé. Indice : C est la fonction fitextent de ol.view2d qui doit être utilisée pour ça. La fonction getsize de ol.map doit aussi être utilisée pour cette exercice. Pensez à jetter un oeil à la doc de l API : http ://ol3js.org/en/master/apidoc/. Correction exercice élémentaire Exercice élémentaire 4 5
10 1.6 Exercice élémentaire 6 Utiliser une autre source de donnée de type OpenStreetMap 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-6.html par exemple. 2. Changer les options de la vue pour centrer la carte sur l ENSG. (Options utilisées dans Exercice élémentaire 3 par exemple.) 3. Passer au constructeur ol.source.osm un objet d options contenant une propriété url dont la valeur est Voir http :// pour obtenir des informations sur cette source de donnée. Et voir OSMOptions dans la doc de l API pour connaître toutes les options qui peuvent être passées à ol.source.osm. 4. Ajouter une attribution à la source pour que les conditions d utilisation des tuiles OpenCycleMap soient respectées. Une attribution du type <a href=" est en accord avec ces conditions. Indice : Regarder l exemple http ://ol3js.org/en/master/examples/localized-openstreetmap.html pour inspiration. Correction exercice élémentaire Exercice élémentaire 7 Changer les paramètres d affichage d une couche 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-7.html par exemple. 2. Dans l objet d options passé au constructor ol.layer.tile ajouter des propriétés opacity, hue, saturation, brightness, et contrast. 3. Dans la console, récupérer une référence sur la couche et changer sa visibilité. Indice : ol.map fournit une fonction getlayers. Cette fonction retourne un object de type ol.collection, qui lui même fournit des méthodes pour accéder aux différents objets de la collection. Voir la doc de l API pour plus d informations. Correction exercice élémentaire Exercice élémentaire 8 Manipuler les projections 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-8.html par exemple. 2. Dans une console, afficher le centre de la vue. 3. Le système de coordonnée (projection) de ce centre est EPSG :3857 (connu sous le nom de Spherical Mercator). Convertir les coordonnées du centre de EPSG :3857 à EPSG :4326 (longitude/latitude WGS84). 4. Les coordonnées GPS de l ENSG sont latitude : 48, , longitude : 2, Modifier le code JavaScript de la page pour que la vue soit centrée sur ces coordonnées à l état initial. Changer aussi le zoom à 17 pour un meilleur résultat. Indice : La fonction ol.proj.transform est à utiliser pour transformer des coordonnées d un système de coordonnée à un autre. Voir la doc de l API. Correction exercice élémentaire 8 6 Chapitre 1. Exercices élémentaires
11 1.9 Exercice élémentaire 9 Manipuler les controls 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-9.html par exemple. 2. Modifier le code JavaScript de la page de telle façon qu une échelle graphique soit ajoutée à la carte. 3. Modifier la configuration du control pour que les unités de mesure anglo-saxonnes (inches, feets, miles) soient utilisées plutôt que les unités métriques. Indice : C est le control ol.control.scaleline qui permet d ajouter une échelle graphique sur la carte. La fonction ol.control.defaults permet d obtenir une collection (ol.collection) contenant les controls par défaut, qui peut être étendue avec sa méthode extend (qui prend un tableau en argument). Correction exercice élémentaire Exercice élémentaire 10 Manipuler les interactions 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-10.html par exemple. 2. Modifier le code JavaScript de la page pour ajouter une interaction de type ol.interaction.dragrotateandzoom à la carte. (C est la touche SHIFT qui active cette interaction.) Indice : La fonction ol.interaction.defaults permet d obtenir une collection (ol.collection) contenant les interactions par défaut, qui peut être étendue avec sa méthode extend (qui prend un tableau en argument). Correction exercice élémentaire Exercice élémentaire 11 Utiliser une couche/source vecteur 1. Copier le code HTML de base dans un nouveau fichier, exercice-elementaire-11.html par exemple. 2. Télécharger le fichier http ://ol3js.org/en/master/examples/data/geojson/countries.geojson et le placer dans le même répertoire que le fichier HTML. 3. Modifier le code JavaScript de la page pour ajouter à la carte une couche vecteur (ol.layer.vector) dont le source est un source GeoJSON (ol.source.geojson) dont l URL référence le fichier countries.geojson téléchargé à l étape précédente. 4. Changer le style de la couche vecteur et utiliser d autres couleurs pour les contours et les fonds des polygones. Indice : Il est nécessaire de passer au source GeoJSON la même projection que celle utilisée dans la vue. (Ceci changera peut-être dans des versions utérieures d OpenLayers.) L objet objet à utiliser pour changer le style des contours est ol.style.stroke. Pour les fonds il s agit de ol.style.fill. Correction exercice élémentaire Exercice élémentaire 9 7
12 8 Chapitre 1. Exercices élémentaires
13 CHAPITRE 2 Corrections des exercices élémentaires 2.1 Correction exercice élémentaire 1 Exercice élémentaire 1 Aucune correction pour cet exercice. 2.2 Correction exercice élémentaire 2 Exercice élémentaire 2 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm() ], renderer: canvas 9
14 </script> </body> </html> Pour que renderer DOM soit utilisé il faut passer la valeur dom pour l option renderer. 2.3 Correction exercice élémentaire 3 Exercice élémentaire 3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 17, center: [ , ], rotation: 45, layers: [ new ol.layer.tile({ source: new ol.source.osm() ] </script> </body> </html> 2.4 Correction exercice élémentaire 4 Exercice élémentaire 4 > view = map.getview() > view.getcenter() > view.setcenter([ , ]) > view.getresolution() 10 Chapitre 2. Corrections des exercices élémentaires
15 > view.setresolution(view.getresolution() / ) > view.setrotation(45) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm() ] view = map.getview() view.setcenter([ , ]) view.setresolution(view.getresolution() / ) view.setrotation(45) </script> </body> </html> 2.5 Correction exercice élémentaire 5 Exercice élémentaire 5 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; 2.5. Correction exercice élémentaire 5 11
16 </style> </head> <body> <div id="map"></div> <script src=" <script> var view = new ol.view2d(); var map = new ol.map({ target: map, view: view, layers: [ new ol.layer.tile({ source: new ol.source.osm() ] var extent = [ , , , ]; view.fitextent(extent, map.getsize()); </script> </body> </html> La fonction fitextent a besoin de connaître les dimensions de la carte en pixels pour être capable de recentrer la vue sur une étendue donnée. La vue est en effet complétement déterminée par un centre, une résolution et une rotation, et elle n a aucune connaissance des dimensions du rectangle d affichange dans la page. Dans ces conditions, si on ne lui passe pas des dimensions (largeur et hauteur en pixels), il ne lui est pas possible de recentrer la vue sur une étendue géographique. 2.6 Correction exercice élémentaire 6 Exercice élémentaire 6 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ 12 Chapitre 2. Corrections des exercices élémentaires
17 zoom: 17, center: [ , ], layers: [ new ol.layer.tile({ source: new ol.source.osm({ attributions: [ new ol.attribution({ html: <a href=" ol.source.osm.data_attribution ], url: ], renderer: canvas </script> </body> </html> 2.7 Correction exercice élémentaire 7 Exercice élémentaire 7 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm(), brightness: 0.1, contrast: 1.625, hue: -1.25, 2.7. Correction exercice élémentaire 7 13
18 opacity: 0.5, saturation: 5 ] </script> </body> </html> Il est important de noter ici que les paramètres d affichage (opacity, etc.) sont des paramètres de l objet Layer, et non de l objet Source. La source ne concerne que les données elles mêmes, et pas la façon dont ces données sont affichées. Pour changer la visibilité de la couche dans la console : > layercollection = map.getlayers() > osmlayer = layercollection.getat(0) > osmlayer.setvisible(!osmlayer.getvisible()) > osmlayer.setvisible(!osmlayer.getvisible()) osmlayer.getvisible() retourne un booléen (true ou false). osmlayer.setvisible(!osmlayer.getvisible()) permet donc d inverser la visibilité. 2.8 Correction exercice élémentaire 8 Exercice élémentaire 8 Dans la console : > ol.proj.transform(map.getview().getcenter(), EPSG:3857, EPSG:4326 ) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var center = ol.proj.transform( [ , ], EPSG:4326, EPSG:3857 ); var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 17, center: center, 14 Chapitre 2. Corrections des exercices élémentaires
19 layers: [ new ol.layer.tile({ source: new ol.source.osm() ] </script> </body> </html> 2.9 Correction exercice élémentaire 9 Exercice élémentaire 9 Si rien concernant les controls n est spécifié dans l objet d options passé au constructeur ol.map alors ol.map crèe trois controls (les controls par défaut) : ol.control.attribution, ol.control.logo, et ol.control.zoom. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm() ], controls: ol.control.defaults().extend([ new ol.control.scaleline({ units: imperial ]) </script> </body> </html> 2.9. Correction exercice élémentaire 9 15
20 2.10 Correction exercice élémentaire 10 Exercice élémentaire 10 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm() ], interactions: ol.interaction.defaults().extend([ new ol.interaction.dragrotateandzoom() ]) </script> </body> </html> 2.11 Correction exercice élémentaire 11 Exercice élémentaire 11 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>exercice élémentaire</title> <link rel="stylesheet" href=" type="text/css"> <style> #map { width: 600px; 16 Chapitre 2. Corrections des exercices élémentaires
21 height: 400px; </style> </head> <body> <div id="map"></div> <script src=" <script> var map = new ol.map({ target: map, renderer: canvas, view: new ol.view2d({ zoom: 0, center: [0, 0], layers: [ new ol.layer.tile({ source: new ol.source.osm(), new ol.layer.vector({ source: new ol.source.geojson({ url: countries.geojson, projection: EPSG:3857, style: new ol.style.style({ fill: new ol.style.fill({ color: rgba(237,12,203,0.3), stroke: new ol.style.stroke({ color: rgba(0,0,0,1), width: 2 ] </script> </body> </html> Correction exercice élémentaire 11 17
22 18 Chapitre 2. Corrections des exercices élémentaires
23 CHAPITRE 3 Développement d une application Vous allez ici créer une carte occupant tout l écran et compatible avec des appareils mobile. Cette carte affichera des données issues de la plate-forme GéoBretagne, selon la projection Lambert93 (projection officielle pour les cartes de France métropolitaine). 3.1 Étape 1 Créer une page web avec une carte occupant tout l écran Votre objectif à cette étape est d obtenir une carte quelconque occupant tout l écran. La carte sera la plus simple possible : projection globale EPSG :3857 (projection par défaut dans OL3), et une couche OSM. Vous pouvez, si vous le souhaitez, d ores-et-déja centrer la carte sur la Bretagne. Voici une étendue dans le système de coordonnée EPSG :3857 pour la Bretagne : [ , , , ]. Indice : 1. Pour créer une carte occupant tout l écran vous pouvez vous inspirez de l exemple http ://ol3js.org/en/master/examples/mobile-full-screen.html. 2. Pour créer une carte OSM la plus simple possible vous pouvez vous inspirez de l exemple http ://ol3js.org/en/master/examples/simple.html. Correction étape Étape 2 Charger proj4js dans la page et ajouter la projection Lambert93 Cette étape consiste à ajouter la bibliothèque proj4js et à la configurer pour qu elle puisse fonctionner avec la projection Lambert93 (EPSG :2154). Pour ajouter la bibliothèque proj4js ajouter à la page une balise <script> dont l attribut src est positionné à Et pour que proj4js puisse être utilisé pour la projection Lamber93 il faut déclarer cette projection auprès de proj4js. Comme ceci : Proj4js.defs[ EPSG:2154 ] = +proj=lcc +lat_1=49 +lat_2=44 +lat_0= lon_0=3 +x_0= y_0= ellps=grs80 +towgs84=0,0,0,0,0,0,0 + +units=m +no_defs ; 19
24 Cette ligne doit donc être ajoutée dans le code JavaScript de la page, avant la création de la carte. Le chargement de proj4js et la déclaration de la projection EPSG :2154 ne devrait avoir aucun impact sur la carte créée à l étape précédente. Recharger la page dans le navigateur pour vous en assurer. Correction étape Étape 3 Ajouter la couche carte de la plate-forme GéoBretagne À cette étape vous aller modifier la carte pour que celle-ci la couche WMS carte de la plate-forme GéoBretagne, et que l affichage se fasse selon la projection EPSG :2154. Vous allez pour ceci modifier la configuration de la vue (View2D), et remplacer la source ol.source.osm par une source ol.source.tilewms configurée correctement. 1. Le service WMS de la plate-forme GéoBretagne que nous utilisons ici prend en charge l extension WMS-C pour fournir des images (tuiles) selon une grille donnée. Cette grille fixe les résolutions d affichage et l étendue des tuiles. Dans un but de préparation créer dans le code JavaScript de la page, après la définition de la projection EPSG :2154, deux tableaux JavaScript : un contenant les résolutions prises en charge par le service WMS-C, et un contenant l étendue des tuiles. Proj4js.defs[ EPSG:2154 ] = +proj=lcc +lat_1=49 +lat_2=44 +lat_0= lon_0=3 +x_0= y_0= ellps=grs80 +towgs84=0,0,0,0,0,0,0 + +units=m +no_defs ; var resolutions = [ , , , , , , , , , , , , , , , , , , , , , ]; var extent = [ , , , ]; Le service de la plate-forme GéoBretagne utilisé ici est décrit à cette page : http ://tile.geobretagne.fr/gwc02/home. Les résolutions et l étendue sont définies dans le document WMS GetCapabilities à cette URL : http ://tile.geobretagne.fr/gwc02/service/wms?service=wms&version=1.1.1&request=getcapabilities&tiled=true 2. Il s agit maintenant de configurer la vue (View2D) pour que la carte soit représentée selon la projection EPSG :2154 et que les résolutions d affichage soient celles prises en charge par le service WMS-C. var view = new ol.view2d({ projection: EPSG:2154, resolutions: resolutions 3. Vous allez maintenant créer un objet de type ol.layer.tile permettant d afficher les tuiles de la couche WMS-C carte du service http ://tile.geobretagne.fr/gwc02/service/wms. Voici le code à écrire pour créer cet objet : var cartelayer = new ol.layer.tile({ source: new ol.source.tilewms({ url: 20 Chapitre 3. Développement d une application
25 params: { LAYERS : carte, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent Ce bloc de code peut être ajouté après la création de la vue. Prenez un peu de temps pour le comprendre. (Et poser des questions!) 4. Maintenant que la vue et la couche sont créées il faut adapter l objet d options passé à ol.map : var map = new ol.map({ target: map, renderer: canvas, view: view, layers: [cartelayer] À noter que le renderer Canvas est utilisé ici. Dans ce cas précis, à cause d une limitation au niveau du service WMS (en-tête CORS non positionné par le serveur), il n est pas possible d utiliser le renderer WebGL. 5. La dernière étape consiste à centrer la vue sur la Bretagne : var initialextent = [ , , , ]; view.fitextent(initialextent, map.getsize()); Correction étape Étape 4 Ajouter une deuxième couche tuilée Ajoutez à cette étape une deuxième couche WMS tuilée, exactement du même type que la première mais reposant sur la couche WMS satellite. Les deux couches étant opaques vous observerez que la couche satellite recouvre complètement la couche carte. Correction étape Étape 5 Ajouter un outil de sélection de couche À cette étape vous allez ajouter un outil de type <select> permettant de sélectionner, parmi carte et satellite, quelle couche est visible. Cette étape nécessite d ajouter des éléments HTML dans la page, et de manipuler ces éléments en JavaScript. Pour faciliter la manipulation d éléments DOM en JavaScript nous allons utiliser la célèbre bibliothèque jquery. Tout d abord, pour charger jquery dans la page ajouter la balise <script> suivante : 3.4. Étape 4 21
26 <script src=" Ensuite, ajouter une balise <select> dans le code HTML, à l intérieur du div de la carte : <div id="map" class="map"> <select id="background-selector"> <option value="carte" selected>carte</option> <option value="satellite">satellite</option> </select> </div> Afin de placer le sélecteur dans la carte, un peu de CSS est nécessaire : #background-selector { position: absolute; top: 2px; right: 2px; z-index: 100; Il ne reste alors plus qu à écrire le code JavaScript permettant de changer la visibilité des couches quand la sélection change : $( #background-selector ).change(function() { var selected = $(this).find( :selected ).val(); if (selected == carte ) { cartelayer.setvisible(true); satellitelayer.setvisible(false); else if (selected == satellite ) { cartelayer.setvisible(false); satellitelayer.setvisible(true); $( #background-selector ).trigger( change ); À titre d exercice, déterminer pourquoi cette dernière ligne est nécessaire. Toujours à titre d exerice vous pouve écrire ce code JavaScript sans utiliser jquery. Il est en effet un peu idiot de charger jquery pour si peu. Correction étape Étape 6 Ajouter une couche image Pour cette étape vous devez ajouter une couche non-tuilée (de type image) pour la couche WMS zonage_plu_cc_paimpol_goelo du service WMS http ://geobretagne.fr/geoserver/paimpolgoelo/wms. Pour bien visualiser la couche vous pouvez changer la valeur de initialextent pour se rapprocher de la commune Paimpol : var initialextent = [ , , , ]; view.fitextent(initialextent, map.getsize()); Indice : 22 Chapitre 3. Développement d une application
27 1. Vous utiliserez ici ol.layer.image plutôt que ol.layer.tile. 2. Et vous utiliserez ol.source.imagewms plutôt que ol.source.tilewms. Correction étape Étape 7 Ajouter un bouton de géo-localisation Il s agit à cette étape d ajouter à la carte un bouton permettant à l utilisateur de centrer la carte sur sa position actuelle. La classe ol.geolocation d OpenLayers doit être utilisée pour ça. En exercice bonus : animer le recentrage de la carte pour chaque géo-localisation. (La solution de cette exercice bonus n est pas donnée dans la correction.) Correction étape Étape 7 23
28 24 Chapitre 3. Développement d une application
29 CHAPITRE 4 Correction application 4.1 Correction étape 1 Étape 1 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href=" type="text/css"> <title>application</title> <style type="text/css"> html, body,.map { margin: 0; padding: 0; width: 100%; height: 100%; </style> </head> <body> <div id="map" class="map"></div> <script src=" <script> var view = new ol.view2d(); var map = new ol.map({ target: map, view: view, layers: [ new ol.layer.tile({ source: new ol.source.osm() ] var extent = [ , , , ]; view.fitextent(extent, map.getsize()); </script> 25
30 </body> </html> 4.2 Correction étape 2 Étape 2 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href=" type="text/css"> <title>application</title> <style type="text/css"> html, body,.map { margin: 0; padding: 0; width: 100%; height: 100%; </style> </head> <body> <div id="map" class="map"></div> <script src=" <script src=" <script> Proj4js.defs[ EPSG:2154 ] = +proj=lcc +lat_1=49 +lat_2=44 +lat_0= lon_0=3 +x_0= y_0= ellps=grs80 +towgs84=0,0,0,0,0,0,0 + +units=m +no_defs ; var view = new ol.view2d(); var map = new ol.map({ target: map, view: view, layers: [ new ol.layer.tile({ source: new ol.source.osm() ] var extent = [ , , , ]; view.fitextent(extent, map.getsize()); </script> </body> </html> 26 Chapitre 4. Correction application
31 4.3 Correction étape 3 Étape 3 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href=" type="text/css"> <title>application</title> <style type="text/css"> html, body,.map { margin: 0; padding: 0; width: 100%; height: 100%; </style> </head> <body> <div id="map" class="map"></div> <script src=" <script src=" <script> Proj4js.defs[ EPSG:2154 ] = +proj=lcc +lat_1=49 +lat_2=44 +lat_0= lon_0=3 +x_0= y_0= ellps=grs80 +towgs84=0,0,0,0,0,0,0 + +units=m +no_defs ; var resolutions = [ , , , , , , , , , , , , , , , , , , , , , ]; var extent = [ , , , ]; var view = new ol.view2d({ projection: EPSG:2154, resolutions: resolutions var cartelayer = new ol.layer.tile({ source: new ol.source.tilewms({ url: params: { LAYERS : carte, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent 4.3. Correction étape 3 27
32 var map = new ol.map({ target: map, renderer: canvas, view: view, layers: [cartelayer] var initialextent = [ , , , ]; view.fitextent(initialextent, map.getsize()); </script> </body> </html> 4.4 Correction étape 4 Étape 4 Pour créer la deuxième couche : var satellitelayer = new ol.layer.tile({ source: new ol.source.tilewms({ url: params: { LAYERS : satellite, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent La nouvelle configuration de la carte : var map = new ol.map({ target: map, renderer: canvas, view: view, layers: [cartelayer, satellitelayer] 4.5 Correction étape 5 Étape 5 28 Chapitre 4. Correction application
33 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href=" type="text/css"> <title>application</title> <style type="text/css"> html, body,.map { margin: 0; padding: 0; width: 100%; height: 100%; #background-selector { position: absolute; top: 2px; right: 2px; z-index: 100; </style> </head> <body> <div id="map" class="map"> <select id="background-selector"> <option value="carte" selected>carte</option> <option value="satellite">satellite</option> </select> </div> <script src=" <script src=" <script src=" <script> Proj4js.defs[ EPSG:2154 ] = +proj=lcc +lat_1=49 +lat_2=44 +lat_0= lon_0=3 +x_0= y_0= ellps=grs80 +towgs84=0,0,0,0,0,0,0 + +units=m +no_defs ; var resolutions = [ , , , , , , , , , , , , , , , , , , , , , ]; var extent = [ , , , ]; var view = new ol.view2d({ projection: EPSG:2154, resolutions: resolutions var cartelayer = new ol.layer.tile({ source: new ol.source.tilewms({ url: params: { 4.5. Correction étape 5 29
34 LAYERS : carte, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent var satellitelayer = new ol.layer.tile({ source: new ol.source.tilewms({ url: params: { LAYERS : satellite, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent var map = new ol.map({ target: map, renderer: canvas, view: view, layers: [cartelayer, satellitelayer] var initialextent = [ , , , ]; view.fitextent(initialextent, map.getsize()); $( #background-selector ).change(function() { var selected = $(this).find( :selected ).val(); if (selected == carte ) { cartelayer.setvisible(true); satellitelayer.setvisible(false); else if (selected == satellite ) { cartelayer.setvisible(false); satellitelayer.setvisible(true); $( #background-selector ).trigger( change ); </script> </body> </html> 30 Chapitre 4. Correction application
35 4.6 Correction étape 6 Étape 6 Le code pour créer la couche zonage_plu_cc_paimpol_goelo : var paimpollayer = new ol.layer.image({ source: new ol.source.imagewms({ url: params: { LAYERS : zonage_plu_cc_paimpol_goelo, VERSION : 1.1.1, TRANSPARENT : true, extent: extent La nouvelle configuration de la carte, ainsi que le nouvel appel à fitextent pour centrer la vue sur Paimpol : var map = new ol.map({ target: map, renderer: canvas, view: view, layers: [cartelayer, satellitelayer, paimpollayer] var initialextent = [ , , , ]; view.fitextent(initialextent, map.getsize()); 4.7 Correction étape 7 Étape 7 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href=" type="text/css"> <title>application</title> <style type="text/css"> html, body,.map { margin: 0; padding: 0; width: 100%; height: 100%; #background-selector { position: absolute; top: 2px; right: 2px; z-index: 100; 4.6. Correction étape 6 31
36 #geolocation { position: absolute; top: 2px; right: 76px; z-index: 100; </style> </head> <body> <div id="map" class="map"> <select id="background-selector"> <option value="carte" selected>carte</option> <option value="satellite">satellite</option> </select> <button id="geolocation">localise moi!</button> </div> <script src=" <script src=" <script src=" <script> Proj4js.defs[ EPSG:2154 ] = +proj=lcc +lat_1=49 +lat_2=44 +lat_0= lon_0=3 +x_0= y_0= ellps=grs80 +towgs84=0,0,0,0,0,0,0 + +units=m +no_defs ; var resolutions = [ , , , , , , , , , , , , , , , , , , , , , ]; var extent = [ , , , ]; var view = new ol.view2d({ projection: EPSG:2154, resolutions: resolutions var cartelayer = new ol.layer.tile({ source: new ol.source.tilewms({ url: params: { LAYERS : carte, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent var satellitelayer = new ol.layer.tile({ source: new ol.source.tilewms({ 32 Chapitre 4. Correction application
37 url: params: { LAYERS : satellite, VERSION : 1.1.1, tilegrid: new ol.tilegrid.tilegrid({ resolutions: resolutions, origin: [ , ], extent: extent var paimpollayer = new ol.layer.image({ source: new ol.source.imagewms({ url: params: { LAYERS : paimpol_zone_plu_ccpg, VERSION : 1.1.1, TRANSPARENT : TRUE, extent: extent var map = new ol.map({ target: map, renderer: canvas, view: view, layers: [cartelayer, satellitelayer, paimpollayer] var initialextent = [ , , , ]; view.fitextent(initialextent, map.getsize()); $( #background-selector ).change(function() { var selected = $(this).find( :selected ).val(); if (selected == carte ) { cartelayer.setvisible(true); satellitelayer.setvisible(false); else if (selected == satellite ) { cartelayer.setvisible(false); satellitelayer.setvisible(true); $( #background-selector ).trigger( change ); var geoloc = new ol.geolocation({projection: EPSG:2154 geoloc.on( change, function() { view.setcenter(geoloc.getposition()); geoloc.settracking(false); $( #geolocation ).click(function() { geoloc.settracking(true); 4.7. Correction étape 7 33
38 </script> </body> </html> Ce document est mis à disposition selon les termes de la license Creative Commons Attribution- ShareAlike 3.0 Unported License. 34 Chapitre 4. Correction application
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
Travaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
Canvas 3D et WebGL. Louis Giraud et Laetitia Montagny. 9 Avril 2013. Université Lyon 1
Canvas 3D et WebGL Louis Giraud et Laetitia Montagny Université Lyon 1 9 Avril 2013 1 Présentation du sujet Introduction Présentation du sujet Problématique : Représenter de la 3D dans le navigateur sans
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
Serveur d'application Client HTML/JS. Apache Thrift Bootcamp
Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
Université de Toulouse-Le Mirail janvier 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou
Université de Toulouse-Le Mirail janvier 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U50_B33 Le WebMapping côté client : les API et bibliothèques Javascript Positionnement
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
TUTORIEL CartoDB www.cellie.fr 11/03/15
TUTORIEL CartoDB www.cellie.fr 11/03/15 1 INTRODUCTION Issue de la technologie du cloud, CartoBD est une application créée par la société Vizzuality. Elle permet de réaliser des cartographies à partir
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Développer des Applications Internet Riches (RIA) avec les API d ArcGIS Server. Sébastien Boutard Thomas David
Développer des Applications Internet Riches (RIA) avec les API d ArcGIS Server Sébastien Boutard Thomas David Le plan de la présentation Petit retour sur les environnements de développement ArcGIS Server
Introduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Création de fonds de cartes statiques et dynamiques avec R et Google Maps
Création de fonds de cartes statiques et dynamiques avec R et Google Maps Jérôme SUEUR MNHN UMR CNRS 7205 - OSEB Mardi 7 février 2012 Plan Pourquoi faire? Cartes statiques RgoogleMaps dismo Cartes dynamiques
Rapport de Mini-Projet en ArcGIS Engine
Rapport de Mini-Projet en ArcGIS Engine Réalisée par : Asmae BENMESSAOUD 3ème Année Cycle d Ingénieur Géoinformation Année Universitaire 2010- Sommaire 1 Introduction L analyse géographique et la visualisation
SPÉCIFICATIONS TECHNIQUES DES FORMATS PUBLICITAIRES
SPÉCIFICATIONS TECHNIQUES DES FORMATS PUBLICITAIRES DIRECTIVES COMMUNE POIDS Display Standard: 70 KB Display «Expandable»: 115 KB Video: 40 MB Video Mobile: 3 MB Performance: 30 KB Mobile: voir page 9
Dans l Unité 3, nous avons parlé de la
11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n
Intégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
Convers3 Documentation version 3.07. Par Eric DAVID : vtopo@free.fr
Convers3 Documentation version 3.07 Par Eric DAVID : vtopo@free.fr 1 INSTALLATION DE CONVERS... 2 2 UTILISATION DE CONVERS... 2 2.1 FENETRE PRINCIPALE... 2 2.1.1 Convention de saisie et d affichage des
Responsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
INCORPORER EXCEL EN LIGNE DANS UN FICHIER CRÉÉ AVEC L ÉDITEUR DE TEXTE 15 avril 2015
TABLE DES MATIERES Incorporer une feuille de calcul dans un fichier créé avec l Éditeur de texte de PLACE... 1 Avantages :... 1 Contraintes :... 2 Accéder à Microsoft OneDrive :... 2 Créer un classeur
HMI target Visu / PLC HMI. Pour réaliser une interface homme machine avec PLC control
HMI target Visu / PLC HMI Pour réaliser une interface homme machine avec PLC control VERSION : 1.4 / PH DATE : 5 Novembre 2014 Sommaire Ce manuel explique de manière pratique les étapes successives pour
Les grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully
Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery
AMELIORATIONS DES FONCTIONNALITES DISPONIBLES
AMELIORATIONS DES FONCTIONNALITES DISPONIBLES DANS LE GEOSERVICE RIS.NET GESTION V.2 Zoom + vue) : Permet de faire un zoom avant sur la carte (uniquement en cadrant une Zoom à l échelle déroulante, : Possibilité
Documentation Administrateur
Documentation Administrateur Gestion des droits Comprendre Gestion des fiches Gestion des extensions Réaliser Gestion des utilisateurs Accompagner Gestion des thèmes Siège social : 24 av de l Europe 44
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Responsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.
Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel
Les outils actuels permettent-ils d automatiser la production de cartes? De quels outils dispose-t-on?
Le "Portrait de la Biodiversité Communale" est un document réalisé au niveau national pour chaque commune, regroupant les connaissances publiques disponibles et mobilisables à l'échelle nationale en matière
FAIRE UN PAIEMENT TIPI
FAIRE UN PAIEMENT TIPI I. Accès au site II. Je n ai pas de compte sur ce site 1. Indiquer une adresse email valide a. J ai une adresse email b. Je n ai pas d adresse email 2. Indiquer les informations
GUIDE D UTILISATION DU BACKOFFICE
GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
HTML. Google Maps. Approfondir. 3 :HIKONB=^UZ^Z]:?k@l@g@h@a"; Codez une fois, déployez sur Android, ios, Kindle... Smartphones. Matériel.
![HTML. Google Maps. Approfondir. 3 :HIKONB=^UZ^Z]:?k@l@g@h@a; Codez une fois, déployez sur Android, ios, Kindle... Smartphones. Matériel.](/thumbs/23/1764755.jpg "HTML. Google Maps. Approfondir. 3 :HIKONB=^UZ^Z]:?k@l@g@h@a; Codez une fois, déployez sur Android, ios, Kindle... Smartphones. Matériel.")
100 % développeur Mensuel n 167 - Octobre 2013 Approfondir HTML www.programmez.com Smartphones Avec Corona SDK Codez une fois, déployez sur Android, ios, Kindle... Google Maps Utiliser Maps et Street View
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Association UNIFORES 23, Rue du Cercler 87000 LIMOGES
RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler 87000 LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon 2013-2014 Table des matières I. Présentation de l'entreprise...3 II. Description
Prise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Atelier Le gestionnaire de fichier
Chapitre 12 Atelier Le gestionnaire de fichier I Présentation Nautilus est un gestionnaire de fichiers pour l environnement de bureau Gnome. Il offre toutes les fonctions de gestion de fichier en local
Aide GeoGebra. Manuel Officiel 3.2. Markus Hohenwarter et Judith Hohenwarter www.geogebra.org
Aide GeoGebra Manuel Officiel 3.2 Markus Hohenwarter et Judith Hohenwarter www.geogebra.org 1 Aide GeoGebra 3.2 Auteurs Markus Hohenwarter, markus@geogebra.org Judith Hohenwarter, judith@geogebra.org Traduction
Spécifications techniques
Spécifications techniques Décembre2009 1. Récapitulatif des formats : p2 1. Formats classiques p2 2. Formats Rich Média p2 2. Emplacements : p3 1. Directions.fr p3 2. Newsletter Directions p4 3. Contraintes
Spécificités Techniques créations publicitaires
Spécificités Techniques créations publicitaires 2012 Sommaire Presentation p3 Sky Flottant 120x600 p17 Spec : Clicktag p4 Flash Transparent 400x400 p18 Spec : Flash transparent / Interstitiel p5 Flash
ORUXMAPSDESKTOP v.1.4 EN PREMIER, TU DOIS AVOIR LA MACHINE VIRTUELLE JAVA DANS TON PC, PUISQUE ORUXMAPSDESKTOP EST UNE APPLICATION JAVA.
ORUXMAPSDESKTOP v.1.4 Version française élaborée par hugo06 le 26 Mai 2010 en attente de correction par des utilisateurs francophones. EN PREMIER, TU DOIS AVOIR LA MACHINE VIRTUELLE JAVA DANS TON PC, PUISQUE
Démonstration de la mise en cache via HTML 5 sur iphone
Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent
Formation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
Dojo Toolkit. Créer des applications AJAX/RIA en JavaScript. Thomas Corbière www.itsi-formation.com
Dojo Toolkit Créer des applications AJAX/RIA en JavaScript Auteur Site Web Dernière modification Dojo Toolkit Thomas Corbière www.itsi-formation.com 20/02/2012 (révision 3) 1.6 Ce support de cours est
Utilisation avancée de SugarCRM Version Professional 6.5
Utilisation avancée de SugarCRM Version Professional 6.5 Document : Utilisation_avancee_SugarCRM_6-5.docx Page : 1 / 32 Sommaire Préambule... 3 I. Les rapports... 4 1. Les principes du générateur de rapports...
Editer un script de configuration automatique du proxy
Editer un script de configuration automatique du proxy INTRODUCTION... 2 AVANTAGE D UN SCRIPT DE CONFIGURATION... 2 SYNTAXE DU SCRIPT DE CONFIGURATION AUTOMATIQUE... 2 MISE A DISPOSITION DU SCRIPT... 4
3 : créer de nouveaux onglets dans Netvibes Cliquer sur le bouton «+» et renommer le nouvel onglet (par exemple Encyclopédies en ligne)
Créer son portail d information privé et public avec Netvibes 1 : création d un compte : 2 2 : nommer votre espace Netvibes personnel 2 3 : créer des onglets pour classer les informations en ligne : 2
Point 3.7. Publier des contenus dans un portail e-sidoc. Janvier 2013 Documentation détaillée V 2.2
Point 3.7 Publier des contenus dans un portail e-sidoc Janvier 2013 Documentation détaillée V 2.2 INTEGRER DES DOCUMENTS (TEXTES, VIDEOS, IMAGES) SUR UN PORTAIL E-SIDOC... 2 Savoir utiliser l éditeur wysiwyg
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Relever le défi du Web mobile
Relever le défi du Web mobile Bonnes pratiques de conception et développement François Daoust Dominique Hazaël-Massieux Groupe Eyrolles, 2011, ISBN : 978-2-212-12828-4 4 Les bases d un bon site web mobile
Développement mobile MIDP 2.0 Mobile 3D Graphics API (M3G) JSR 184. Frédéric BERTIN fbertin@neotilus.com
Développement mobile MIDP 2.0 Mobile 3D Graphics API (M3G) JSR 184 Frédéric BERTIN fbertin@neotilus.com Présentaion : Mobile 3D Graphics API JSR 184 M3G :présentation Package optionnel de l api J2ME. Prend
Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement
Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.
Créer un compte itunes Store
P r o f i t e r d I n t e r n e t A t e l i e r 0 9 Créer un compte itunes Store en 4 étapes L ipad est un ordinateur aux nombreuses capacités dès la sortie du carton mais ses capacités ne sont rien face
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions
Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1
Soyez accessible. Manuel d utilisation du CMS
Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise
Campagnes d e-mailings v.1.6
Campagnes d e-mailings v.1.6 Sommaire Objet Page I Préparation de la campagne 3 I 1 / Le compte de messagerie pour l envoi des emails 3 I 2 / Configurer le modèle de l email 4 I 3 / La préparation des
Firefox pour Android. Guide de l utilisateur. press-fr@mozilla.com
Firefox pour Guide de l utilisateur press-fr@mozilla.com Table des matières À propos de Mozilla Firefox pour... 3 Prise en main... 4 Mise à niveau de la navigation mobile... 5 Déplacez-vous à la Vitesse
Publier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i
Modernisation IBM i Nouveautés 2014-2015 IBM Power Systems - IBM i 19 et 20 mai 2015 IBM Client Center, Bois-Colombes S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Mardi
Paginer les données côté serveur, mettre en cache côté client
Paginer les données côté serveur, mettre en cache côté client Vous voulez sélectionner des lignes dans une table, mais celle-ci comporte trop de lignes pour qu il soit réaliste de les ramener en une seule
GESTION DU LOGO. 1. Comment gérer votre logo? 2. 2.1. Format de l image 7 2.2. Dimensions de l image 8 2.3. Taille de l image 9
GESTION DU LOGO 1. Comment gérer votre logo? 2 1.1. Insérer un logo 3 1.1.1. Insérer un logo dans le bandeau 3 1.1.2. Insérer un logo dans les éditions 4 1.2. Supprimer un logo 6 1.2.1. Supprimer un logo
Comment accéder à d Internet Explorer
Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application
Formation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
Création d un site web avec Nvu
Création d un site web avec Nvu sources principales d'informations: http://www.framasoft.net/article2656.html http://info.sio2.be/nvu/index.php http://www.anseladams.com Pensez à sauvegarder fréquemment
Sextant V4.0. Le portail de diffusion de l information géographique de l Ifremer. Sextant Présentation générale
Sextant - Infrastructure de données spatiales sur le domaine marin Sextant V4.0 Le portail de diffusion de l information géographique de l Ifremer E. Quimbert, M. Bellouis, F. Lecuy, M. Treguer Centre
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
PRODIGE V3. Manuel utilisateurs. Consultation des métadonnées
PRODIGE V3 Manuel utilisateurs Consultation des métadonnées Pour plus d'information sur le dispositif : à remplir par chaque site éventuellement 2 PRODIGE V3 : Consultation des métadonnées SOMMAIRE 1.
Le service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX
Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX Logiciels nécessaires : - - - Google Chrome comme navigateur internet FireShot qui est un add-on qui se greffe sur
HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles
46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes
TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
Tutoriel de démarrage rapide destiné aux EDITEURS
Tutoriel de démarrage rapide destiné aux EDITEURS 2007 Joseph Beeson josephbeeson@gmail.com Sous une licence Creative Commons : Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales.
Introduction à HTML5, CSS3 et au responsive web design
1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent
II. Les données géospatiales dans les Systèmes d'information Géographique (SIG)
Plan du cours: I. Systèmes de référence et projections cartographiques. II. Les données géospatiales dans les Systèmes d'information Géographique (SIG) Systèmes de référence géographique Comment repérer
Créer des documents interactifs
Créer des documents interactifs 14 Au cours de cette leçon, vous apprendrez à : créer un document en ligne de base ; ajouter des boutons, des transitions de page et des hyperliens ; exporter au format
Compte Rendu d intégration d application
ISMA 3EME ANNEE Compte Rendu d intégration d application Compte Rendu Final Maxime ESCOURBIAC Jean-Christophe SEPTIER 19/12/2011 Table des matières Table des matières... 1 Introduction... 3 1. Le SGBD:...
Introduction à MATLAB R
Introduction à MATLAB R Romain Tavenard 10 septembre 2009 MATLAB R est un environnement de calcul numérique propriétaire orienté vers le calcul matriciel. Il se compose d un langage de programmation, d
Cartographie avec R. Baptiste Coulmont. 16 septembre 2010
Cartographie avec R Baptiste Coulmont 16 septembre 2010 Introduction Ce document est à considérer comme une introduction à certaines formes de cartographie avec le logiciel R. Je suppose ici que l installation
WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,
Guide d utilisation. Version 1.1
Guide d utilisation Version 1.1 Guide d utilisation Version 1.1 OBJECTIF LUNE Inc. 2030 boulevard Pie-IX, bureau 500 Montréal (QC) Canada H1V 2C8 +1 514-875-5863 sales@ca.objectiflune.com http://captureonthego.objectiflune.com
Flex. Lire les données de manière contrôlée. Programmation Flex 4 Aurélien VANNIEUWENHUYZE
Flex Lire les données de manière contrôlée 1 Plan Lier les données Stocker les données Valider les données 2 Gérer des données Lier des données La notion de DataBinding est l une des plus importantes du