Université de Toulouse-Le Mirail 10 décembre 2013 Département de Géographie-Aménagement-Environnement Laurent Jégou
|
|
|
- Jules Lamontagne
- il y a 8 ans
- Total affichages :
Transcription
1 Université de Toulouse-Le Mirail 10 décembre 2013 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U351_33 Bibliothèques JavaScript de GéoVisualisation L'exemple de Data-Driven Documents (D3) Positionnement Les techniques de représentation interactive des données, ou data visualization (dataviz) connaissent depuis quelques année un fort développement sur le support Internet, grâce aux fonctionnalités nouvelles apportées par le standard HTML5 et la manipulation d'objets vectoriels au format SVG. Des bibliothèques de fonctions JavaScript permettent de rendre accessible la création de ce type de graphismes interactifs sur Internet, en simplifiant la manipulation des objets graphiques et des données. Bibliographie : Scott Murray, "Interactive Data Visualization", paru aux éditions O'Reilly en 2013 (gratuit voir lien ci-dessous). Mike Dewar, "Getting started with D3", O'Reilly, Michael Bostock, Jason Davies, "Code as cartography", revue The Cartograhic Journal, vol. 50 n 2, mai Nick Qi Zhu, "Data Visualization with D3.js Cookbook", éditions Pakt Publishing, 2013 (cf site avec les codes sources en lien ci-dessous). Sites Internet : D3 : Scott Murray (cf. biblio) : Delimited.io (tutoriels) : SmashingD3 (tutoriels, démos) : D3 visualization cookbook : Les fichies utilisés dans ce support sont disponibles en ligne à l'adresse suivante : Présentation de Data-Driven Documents (D3) D3 est une bibliothèque de fonctions JavaScript créée par Mike Bostock, employé dans l'équipe du site Internet du New York Times. Projet open-source, cette bibliothèque a connu un grand développement grâce à la participation de nombreux développeurs et testeurs. Aujourd'hui de nombreux exemples d'utilisations, tutoriels et mêmes ouvrages sont disponibles pour découvrir son utilisation.
2 Structure du fichier HTML de base D3 étant une bibliothèque de fonctions JavaScript, on l'utilise côté client en l'appelant depuis un fichier HTML. D3 va servir à créer des graphismes vectoriels au format SVG, à partir de données fournies directement ou en provenance c'un fichier ou d'un flux externe et d'un programme qui va choisir le type de représentation et d'interactivité à fournir. Le fichier HTML de base aura la forme suivante 1 : Code source HTML : 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>fichier de base D3</title> 6 <script src=" 7 <script type="text/javascript"> 8 function draw(data) { 9 // le code de dessin viendra se placer ici 10 } 11 </script> 12 </head> 13 <body> 14 <script type="text/javascript"> 15 d3.json("data/data.json", draw); 16 </script> 17 </body> 18 <html> Description : Ligne 6 : Appel de la bibliothèque. Lignes 7 à 11 : Le script de dessin proprement-dit. Lignes 14 à 16 : Le script de chargement des données, qui lancera le dessin une fois terminé. Notez son positionnement dans le <body>. Avec cette organisation, la page HTML va se charger, lancer la récupération des données (qui peut être longue s'il s'agit d'un flux) puis seulement exécuter le code de réalisation du graphisme. Ainsi, le programme se lancera une fois que tous les éléments nécessaires (éléments de la page et données) seront disponibles. Première réalisation : un histogramme interactif 1 Les exemples utilisés dans ce support sont inspirés de ceux proposés dans l'ouvrage de Scott Murray.
3 Les données [ Tout d'abord, prévoir le jeu de données, au format JSON (JavaScript Object Notation). {"mois":"janvier", "valeur":5}, {"mois":"février", "valeur":10}, {"mois":"mars", "valeur":13}, {"mois":"avril", "valeur":19}, {"mois":"mai", "valeur":21}, {"mois":"juin", "valeur":25}, {"mois":"juillet", "valeur":22}, {"mois":"août", "valeur":18}, {"mois":"septembre", "valeur":15}, {"mois":"octobre", "valeur":13}, {"mois":"novembre", "valeur":11}, {"mois":"décembre", "valeur":12} ] Ce format est en fait la notation objet JavaScript, avec ici un tableau [] qui contient des objets {} eux-mêmes contenant deux couples variable: valeur. Le fichier data/data.json du serveur contiendra les données selon ce format. Ensuite, on peut construire une première version, très simple, de notre histogramme. L'histogramme : première version 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>fichier de base D3</title> 6 <script src=" type="text/javascript"></script> 7 <script type="text/javascript"> 8 function draw(dataset) { 9 //Largeur et hauteur du graphe 10 var larg = 500; 11 var haut = 100; 12 var barpadding = 1; //Padding des barres //Creation de l'élément SVG 15 var svg = d3.select("body") 16.append("svg") 17.attr("width", larg) 18.attr("height", haut); svg.selectall("rect") 21.data(dataset) 22.enter() 23.append("rect") 24.attr("x", function(d, i) { 25 return i * (20 + barpadding); //Largeur de de padding 26 }) 27.attr("y", function(d) { 28 return haut - (d.valeur * 2); // Hauteur - valeur 29 }) 30.attr("width", 20) 31.attr("height", function(d) { 32 return (d.valeur * 2); // Valeur de la donnée 33 }) 34.attr("fill", "teal"); 35 } </script> 38 </head>
![{"mois":"juillet", "valeur":22}, {"mois":"août", "valeur":18}, {"mois":"septembre", "valeur":15}, {"mois":"octobre", "valeur":13}, {"mois":"novembre", "valeur":11}, {"mois":"décembre", "valeur":12} ]](/docs-images/44/6244185/images/page_3.jpg "Ce format est en fait la notation objet JavaScript, avec ici un tableau [] qui contient des objets {} eux-mêmes contenant deux couples variable: valeur. Le fichier data/data.")
4 39 <body> 40 <script type="text/javascript"> 41 d3.json("data/data.json", draw); 42 </script> 43 </body> 44 </html> Description : La fonction de dessin (lignes 8 à 12), va d'abord établir les valeurs de variables globales : les dimensions du graphes et la largeur de l'intervalle entre deux barres (padding). Le bloc entre les lignes 15 et 18 va ajouter un élément de type SVG au <body> de la page en précisant ses dimensions. Le bloc entre les lignes 20 et 34 dessine les barres de l'histogramme, par une boucle qui va générer des objets SVG <rect> à partir des données issues du fichier json chargé précédemment, et contenus dans la variable dataset. A l'intérieur de la boucle, cette variable prendra le nom "d". Cette boucle crée des rectangles de la manière suivante : - ligne 23 : ajout d'un objet SVG <rect> - ligne 24 : attribut de position x selon le n de barre indiqué par la variable i, plus la largeur de barre (20 pixels) et le décalage entre barres (barpadding) - ligne 28 : attribut de position y selon la hauteur de barre, valeur d * 2, oté de la valeur de hauteur générale du graphe car la position verticale 0 du format SVG se trouve en haut. - ligne 32 : attribut de hauteur de la barre en cours selon la valeur d * 2 - ligne 34 : couleur de remplissage de la barre : bleu. Exercices : - faire varier les dimensions du graphe dans la page. - changer la hauteur des barres pour que la plus grande barre tienne dans toute la hauteur du graphique moins 20 pixels pour placer les libellés. - changer la largeur individuelle des barres pour que le graphique occupe toute la largeur réservée pour lui. - colorer les barres en fonction de leur valeur. L'histogramme : deuxième version, avec des libellés
5 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>premier histogramme</title> 6 <script src=" type="text/javascript"></script> 7 <script type="text/javascript"> 8 function draw(dataset) { 9 //Largeur et hauteur du graphe 10 var larg = 500; 11 var haut = 100; 12 var barpadding = 2; //Padding des barres 13 var nbb = dataset.length; //Nb de barres 14 var lb = ((larg - nbb) / nbb); //Largeur barre 15 var ch = (haut / d3.max(dataset, function (d) { 16 return d.valeur //Coef. hauteur. 17 })); //Creation élément SVG 20 var svg = d3.select("body") 21.append("svg") 22.attr("width", larg) 23.attr("height", haut); svg.selectall("rect") 26.data(dataset) 27.enter() 28.append("rect") 29.attr("x", function(d, i) { 30 return (i * lb); 31 }) 32.attr("y", function(d) { 33 return haut - (d.valeur * ch); 34 }) 35.attr("width", lb - barpadding) 36.attr("height", function(d) { 37 return (d.valeur * ch); 38 }) 39.attr("fill", function(d) { 40 return "rgb(0, 0, " + (d.valeur * 10) + ")"; 41 }); svg.selectall("text") 44.data(dataset) 45.enter() 46.append("text") 47.text(function(d) { 48 return d.valeur; 49 }) 50.attr("x", function(d, i) { 51 return (i * lb) + 12); 52 }) 53.attr("y", function(d) { 54 return haut - ((d.valeur * ch) - 12); 55 }) 56.attr("font-family", "sans-serif") 57.attr("font-size", "11px") 58.attr("fill", "white"); 59 } 60 </script> 61 </head> 62 <body> 63 <script type="text/javascript"> 64 d3.json("data/data.json", draw); 65 </script> 66 </body> 67 </html>
6 Description : L'histogramme est désormais adaptatif selon les dimensions du rectangle global : les positions et les tailles des barres sont proportionnelles à l'espace disponible. L'ajout des libellés est réalisé par le bloc en fin de fonction, de la ligne 43 à la ligne 58. Il s'agit d'une nouvelle boucle selectall, qui va créer des objets <text>, qui vont être positionnés dans les barres de l'histogramme par leurs attributs x et y. Le style de ces libellés est précisé par les attributs "font-family", "font-size" et "fill" (lignes 56 à 58). Un peu d'interactivité L'interaction la plus simple à créer consiste à réagir au survol des barres par le curseur de la souris. Il suffit d'ajouter un changement de couleur dans la classe CSS rect : 58 <style> 59 rect:hover { 60 fill: orange; 61 } 62 </style> 63 </head> Deuxième réalisation : un diagramme de points XY Diagramme simple 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>diagramme de points</title> 6 <script src=" type="text/javascript"></script> 7 <script type="text/javascript"> 8 function draw(dataset) { 9 //Largeur et hauteur du graphe 10 var larg = 600; 11 var haut = 200; 12 var padding = 20; //Création de l'élément SVG 15 var svg = d3.select("body") 16.append("svg") 17.attr("width", larg) 18.attr("height", haut); var xscale = d3.scale.linear()
7 21.domain([0, d3.max(dataset, function(d) { return d[0]; })]) 22.range([padding, larg - padding * 2]); var yscale = d3.scale.linear() 25.domain([0, d3.max(dataset, function(d) { return d[1]; })]) 26.range([haut - padding, padding]); var rscale = d3.scale.linear() 29.domain([0, d3.max(dataset, function(d) { return d[1]; })]) 30.range([2, 5]); svg.selectall("circle") 33.data(dataset) 34.enter() 35.append("circle") 36.attr("cx", function(d) { 37 return xscale(d[0]); 38 }) 39.attr("cy", function(d) { 40 return yscale(d[1]); 41 }) 42.attr("r", function(d) { 43 return rscale(d[1]); 44 }); svg.selectall("text") 47.data(dataset) 48.enter() 49.append("text") 50.text(function(d) { 51 return d[0] + "," + d[1]; 52 }) 53.attr("x", function(d){ 54 return xscale(d[0]); 55 }) 56.attr("y", function(d) { 57 return yscale(d[1]); 58 }) 59.attr("font-family", "sans-serif") 60.attr("font-size", "11px") 61.attr("fill", "grey"); 62 } 63 </script> 64 </head> 65 <body> 66 <script type="text/javascript"> 67 d3.json("data/points.json", draw); 68 </script> 69 </body> 70 </html> Description : Cette fois-ci, nous allons dessiner un diagramme de points selon leurs coordonnées x et y, disponibles dans un fichier json contenant des valeurs formatées en tableaux. [ ] [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] De plus nous allons utiliser un outil de mise à l'échelle automatique de D3, les "scales". Les blocs des lignes 21 et suivantes, puis 24 et suivantes, créent des fonctions de proportionnalités
![data(dataset) 34.enter() 35.append("circle") 36.attr("cx", function(d) { 37 return xscale(d[0]); 38 }) 39.attr("cy", function(d) { 40 return yscale(d[1]); 41 }) 42.](/docs-images/44/6244185/images/page_7.jpg "attr(\"r\", function(d) { 43 return rscale(d[1]); 44 }); 45 46 svg.selectall(\"text\") 47.data(dataset) 48.enter() 49.append(\"text\") 50.text(function(d) { 51 return d[0] + \",\" + d[1]; 52 }) 53.")
8 entre des limites fournies. Ici on va utiliser les largeur et hauteur maximales, moins une valeur de "padding", c'est à dire d'enrobage, pour éviter que les éléments graphiques soient rognés. Le bloc entre les lignes 32 et 44 dessine les cercles, en les positionnant selon leur valeur x et y pondérée par les fonction "scale" décrites ci-dessus. De même, le bloc entre les lignes 46 et 61 ajoute les libellés sur les points. On ajoute des axes On modifie le fichier précédent pour ajouter, à la fin du code JavaScript : 63 var xaxis = d3.svg.axis() 64.scale(xScale) 65.ticks(5) //Nombre approx. de barbules 66.orient("bottom"); var yaxis = d3.svg.axis() 69.scale(yScale) 70.orient("left") 71.ticks(5); svg.append("g") 74.attr("class", "axis") //Assigne la classe CSS "axis" 75.attr("transform", "translate(0," + (haut - padding) + ")") 76.call(xAxis); svg.append("g") 79.attr("class", "axis") 80.attr("transform", "translate(" + padding + ",0)") 81.call(yAxis); 82 } 83 </script> 84 <style> 85.axis path, 86.axis line { 87 fill: none; 88 stroke: black; 89 shape-rendering: crispedges; 90 } 91.axis text { 92 font-family: sans-serif; 93 font-size: 11px; 94 } 95 </style> 96 </head>
9 Les axes sont créés automatiquement par la fonction d3.svg.axis (lignes 63 et 68). Ils sont dimensionnés par les fonctions "scale" utilisées précédemment. On les ajoute au graphe en créant un nouvel élément SVG de type "g" pour chaque axe (groupe, lignes 73 et 78), qui en plus leur affecte une classe de style CSS dédiée, "axis". Cette classe est définie par la suite dans un bloc <style>, ajouté au code en suivant le bloc <script>. Exercice : - décaler les libellés des points pour mieux les visualiser - changer la couleur des points en fonction de leur valeur - ajouter un changement de couleur au survol par le curseur de la souris/ Troisième réalisation : une carte D3 montre toute sa puissance dans le dessin des graphismes complexes que sont les cartes vectorielles, notamment en gérant un très grand nombre de projections. Créer une carte thématique peut se révéler aussi simple que charger un fond de carte, des données localisées et choisir un mode de représentation. D3 n'est pas capable de lire directement les formats SIG courants, il utilise là encore le format JSON et plus spécifiquement un format adapté aux entités spatiales munies d'attributs, les GeoJSON. La bibliothèque de fonctions OGR 2 (parente vectorielle de GDAL) possède un programme utilitaire qui permet de faire des conversions entre formats SIG courants, ogr2ogr. Cet utilitaire sait écrire le format GeoJSON et il est donc simple de convertir un fond au format shapefile en GeoJSON. Par exemple, voici le début du fond IGN Géofla des départements, converti en GéoJSON : { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "ID_GEOFLA": 1, "CODE_DEPT": "01", "NOM_DEPT": "AIN", "CODE_CHF": "053", "NOM_CHF": "BOURG-EN-BRESSE", "X_CHF_LIEU": 8717, "Y_CHF_LIEU": 65696, "X_CENTROID": 8814, "Y_CENTROID": 65582, "CODE_REG": "82", "NOM_REGION": "RHONE-ALPES" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ , ], [ , ], Le format TopoJSON est une évolution qui permet, comme son nom l'indique, de gérer la topologie. Un utilitaire de conversion à partir des shapefiles est disponible : On peut généraliser le fond avant la conversion pour simplifier et alléger les transferts de données. 2
10 Code source : 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>carte</title> 6 <script src=" type="text/javascript"></script> 7 <script src=" 8 <script type="text/javascript"> 9 function draw(dataset) { 10 //Largeur et hauteur du graphe 11 var larg = 600; 12 var haut = 600; var projection = d3.geo.orthographic() 15.scale(280) //Échelle 16.translate([larg / 2, haut / 2]) //Dimensions 17.rotate([-4, -48]) //France au centre 18.clipAngle(90) 19.precision(.1); var path = d3.geo.path() 22.projection(projection); //Création de l'élément SVG 25 var svg = d3.select("body") 26.append("svg") 27.attr("width", larg) 28.attr("height", haut); svg.insert("path") 31.datum(topojson.feature(dataset, dataset.objects.land)) 32.attr("class", "land") 33.attr("d", path); svg.insert("path") 36.datum(topojson.mesh(dataset, dataset.objects.countries, function(a, b) { return a!== b; })) 37.attr("class", "boundary") 38.attr("d", path); 39 } 40 </script> 41 <style> 42 body { 43 background: #fcfcfa; 44 } land { 47 fill: #262; 48 } boundary { 51 fill: none; 52 stroke: #fff; 53 stroke-width:.5px; 54 } 55 </style> 56 </head> 57 <body> 58 <script type="text/javascript"> 59 d3.json("data/world-50m.json", draw); 60 </script> 61 </body> 62 </html>
![orthographic() 15.scale(280) //Échelle 16.translate([larg / 2, haut / 2]) //Dimensions 17.rotate([-4, -48]) //France au centre 18.clipAngle(90) 19.precision(.1); 20 21 var path = d3.geo.path() 22.](/docs-images/44/6244185/images/page_10.jpg "projection(projection); 23 24 //Création de l'élément SVG 25 var svg = d3.select(\"body\") 26.append(\"svg\") 27.attr(\"width\", larg) 28.attr(\"height\", haut); 29 30 svg.insert(\"path\") 31.datum(topojson.")
11 Description : Le fichier HTML de base est le même, le fichier TopoJSON est chargé comme précédemennt les fichiers JSON (igne 59). À partir de la ligne 14 on définit la projection qui va permettre de visualiser les données brutes du fond de carte. Ici une projection orthographique hémisphérique, pivotés pour que la France soit positionnée au centre de l'image. Le fond possède deux types d'entités : les continents et les frontières entre États. Ces deux entités sont ajoutées à la page aux lignes 30 à 38 et leurs styles d'affichages sont gérés par le bloc <style> entre les lignes 40 et 55. Exercices : Modifier légèrement les paramètres de la projection : zoom, centrage. Changer de projection (cf. la référence ici : Changer de fond de carte en convertissant le fond IGN Géofla des départements.
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 à Adobe Illustrator pour la cartographie et la mise en page
Atelier Carto. Septembre 2009 Dept. Géographie / Université de Toulouse-Le Mirail Laurent Jégou Introduction à Adobe Illustrator pour la cartographie et la mise en page Le présent support n'a pas prétention
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
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?
.. 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
Initiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
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
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
Laurent Jégou 07/12/2012 M2 Sigma
Laurent Jégou 07/12/2012 M2 Sigma M2 Sigma U50_B33 WebMapping Séance 4 Les systèmes de gestion de bases de données spatiales : L'exemple de PostGIS Webographie spécifique : Tutoriel FOSS4G 2011 (en français)
Présentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
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,
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
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
www.geomaticien.com Par Daniel FAIVRE WebMapper ... Publication de cartes pour Internet avec ArcGis
www.geomaticien.com. Par Daniel FAIVRE WebMapper......... Publication de cartes pour Internet avec ArcGis WebMapper Publication de cartes pour le web Fonctionnalités de l'application WebMapper exporte
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
Fête de la science Initiation au traitement des images
Fête de la science Initiation au traitement des images Détection automatique de plaques minéralogiques à partir d'un téléphone portable et atelier propose de créer un programme informatique pour un téléphone
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
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
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
LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation
ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier
{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
SIG ET ANALYSE EXPLORATOIRE
SIG ET ANALYSE EXPLORATOIRE VERS DE NOUVELLES PRATIQUES EN GÉOGRAPHIE Jean-Marc ORHAN Equipe P.A.R.I.S., URA 1243 du CNRS Paris Résumé L'offre actuelle dans le domaine des logiciels de type Système d'information
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
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
Publication Assistée par Ordinateur
Présentation OpenOffice Draw est l'outil de dessin vectoriel de la suite bureautique OpenOffice. De fait, Draw permet de réaliser certains documents comparables à ceux de Publisher, le logiciel de P.A.O.
Débuter avec Quantum GIS 2.6
Débuter avec 2.6 Date de mise à jour : 14 janvier 2015 Historique des versions du document Version Auteur 1 Fabien Potiez Commentaires janvier 2015 Document rédigé par Fabien Potiez Tél. 02 99 20 64 55
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/
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Mai 2014. Médiathèque «Les Trésors de Tolente»
Mai 2014 Médiathèque «Les Trésors de Tolente» Sommaire Google, premiers repères Google, le moteur de recherche Google map Gmail Google agenda Google drive Google+ Conclusion / Framasoft Pour continuer
PHP 5.4 Développez un site web dynamique et interactif
Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Table des matières Table des matières 1 Chapitre 1 Introduction 1. Objectif de l'ouvrage.............................................
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.
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
Manuel d utilisation email NETexcom
Manuel d utilisation email NETexcom Table des matières Vos emails avec NETexcom... 3 Présentation... 3 GroupWare... 3 WebMail emails sur internet... 4 Se connecter au Webmail... 4 Menu principal... 5 La
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Laurent Jégou novembre 2014 M2 Sigma U351_33 WebMapping. Séance 2 Les systèmes de gestion de bases de données spatiales : L'exemple de PostGIS
Laurent Jégou novembre 2014 M2 Sigma U351_33 WebMapping Webographie spécifique : Séance 2 Les systèmes de gestion de bases de données spatiales : L'exemple de PostGIS Tutoriel FOSS4G (en français) : http://www.postgis.fr/chrome/site/docs/workshop-foss4g/doc/index.html
Prise en main du logiciel. Smart BOARD Notebook 10
Prise en main du logiciel Smart BOARD Notebook 10 1. Introduction : Le logiciel Smart BOARD est utilisable avec les tableaux blancs interactifs de la gamme SMART. Toutefois, il n'est pas nécessaire d'avoir
Tp_chemins..doc. Dans la barre "arche 2" couleur claire 1/5 21/01/13
TP de création : utilisation des chemins vectoriels Finis les mauvais rêves : vous aurez enfin votre dreamcatcher (Indienss des Grands Lacs) 1 ) Créez une nouvelle image de 300 pixels sur 600 pixels en
Infrastructure - Capacity planning. Document FAQ. Infrastructure - Capacity planning. Page: 1 / 7 Dernière mise à jour: 16/04/14 16:09
Document FAQ Infrastructure - Capacity planning EXP Page: 1 / 7 Table des matières Détails de la fonctionnalité... 3 I.Généralités... 3 II.Configuration... 3 III.Vue globale des capacités...3 IV.Vue par
Note de cours. Introduction à Excel 2007
Note de cours Introduction à Excel 2007 par Armande Pinette Cégep du Vieux Montréal Excel 2007 Page: 2 de 47 Table des matières Comment aller chercher un document sur CVMVirtuel?... 8 Souris... 8 Clavier
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
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
Diffuser un contenu sur Internet : notions de base... 13
Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................
ArcGIS Server 9.3.1 / 9.4. Gaëtan LAVENU Jean-Marie DULISCOUET
ArcGIS Server 9.3.1 / 9.4 Gaëtan LAVENU Jean-Marie DULISCOUET ArcGIS Server 9.3.1 / 9.4 Plus de performance Plus de fonctionnalités Des processus simplifiés (développement, déploiement, licences) Plus
Mode d'emploi abrégé du GPS GeoExplorer3 et du Software GPS Pathfinder Office
Mode d'emploi abrégé du GPS GeoExplorer3 et du Software GPS Pathfinder Office Remarque...2 Introduction...2 Préliminaires...2 Almanach...2 Préparation des fichiers avant d'aller sur le terrain...2 Réglage
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.
Didacticiel de mise à jour Web
Didacticiel de mise à jour Web Copyright 1995-2012 Esri All rights reserved. Table of Contents Didacticiel : Création d'une application de mise à jour Web.................. 0 Copyright 1995-2012 Esri.
Réflexion sur la mise en place d'un système mobile d'aide à la navigation destiné aux services d'urgence basée sur une solution libre.
Réflexion sur la mise en place d'un système mobile d'aide à la navigation destiné aux services d'urgence basée sur une solution libre. Denis Fouquet * Jean-Michel Follin ** Laboratoire de Géodésie et de
INTRODUCTION GENERALE...1 LA CONNEXION ODBC :...1. CONNEXION AU TRAVERS D EXCEL(tm)...6. LOGICIEL QUANTUM GIS (Qgis)... 10
PROGRAMME RÉGIONAL DE RENFORCEMENT DE LA COLLECTE DES DONNÉES STATISTIQUES DES PECHES DANS LES ÉTATS MEMBRES ET DE CREATION D UNE BASE DE DONNÉES REGIONALE Manuel de formation TABLE DES MATIERES INTRODUCTION
Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
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
PAGE 1. L écran du logiciel d Open Office Draw. Barre de menu: Les commandes du logiciel
PAGE L écran du logiciel d Open Office Draw Nom du document : Nom d enregistrement Barre de mise forme: Ligne, couleurs, fond,... Barre de menu: Les commandes du logiciel Barre d outils: Les boutons de
Gestion de projet. GanttProject Didacticiel V1.0. 23 novembre 2013. Gérard Gervois Frédéric Giamarchi
Gestion de projet GanttProject Didacticiel V1.0 23 novembre 2013 Gérard Gervois Frédéric Giamarchi Département G.E.I.I. I.U.T. de Nîmes Université Montpellier II Présentation GanttProject est un logiciel
DRUPAL Réalisez des développements professionnels avec PHP (2ième édition)
Introduction 1. Les systèmes de gestion de contenu 11 2. Les avantages de Drupal 15 3. Le fonctionnement de Drupal 17 4. L'environnement de développement 20 5. L'installation de Drupal 25 6. Le passage
Modules Multimédia PAO (Adobe)
Modules Multimédia PAO (Adobe) Pré-requis : Bonne maîtrise de la manipulation d'un PC (environnement Windows ou Mac) et de la navigation Internet. Disposition pour le graphisme recommandée. Mémoire visuelle,
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...
Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.
1- Optimiser le poids de votre image : Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. Tous les types d utilisateurs (auteur, publicateur,
MODULES 3D TAG CLOUD. Par GENIUS AOM
MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.
Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs.
Le framework YUI et le développement 4D Par Olivier DESCHANELS, Responsable Programme 4D S.A. Note technique 4D-201004-08-FR Version 1 - Date 1 avril 2010 Résumé Dans la présente note technique, nous allons
Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur
Adobe Illustrator Logiciel de dessin vectoriel et de Cartographie Assistée par Ordinateur I- Ouverture d une nouvelle feuille de travail Fichier / Nouveau (ou ctrl + N) Indiquer dans la fenêtre qui s ouvre
Cédric Gendre Inra, ESR Toulouse
ODR, Bases de données administratives à différentes échelles spatiales Cédric Gendre Inra, ESR Toulouse 2èmes journées de recherches en sciences sociales INRA SFER CIRAD 11 & 12 décembre 2008 LILLE, France
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
Livre Blanc WebSphere Transcoding Publisher
Livre Blanc WebSphere Transcoding Publisher Introduction WebSphere Transcoding Publisher vous permet d'offrir aux utilisateurs des informations Web adaptées à leurs besoins. Il vous permet, par exemple,
Tutoriel Inscription et utilisation basique d'un blog hébergé chez Blogger.com
Tutoriel Inscription et utilisation basique d'un blog hébergé chez Blogger.com Contenu I.Validation (ou inscription) de son adresse chez Google...2 II.Utilisation des fonctionnalités du blog...5 1.Accès
Exemple d application en CFD : Coefficient de traînée d un cylindre
Exemple d application en CFD : Coefficient de traînée d un cylindre 1 Démarche générale Avec Gambit Création d une géométrie Maillage Définition des conditions aux limites Avec Fluent 3D Choix des équations
Opérations de base sur ImageJ
Opérations de base sur ImageJ TPs d hydrodynamique de l ESPCI, J. Bico, M. Reyssat, M. Fermigier ImageJ est un logiciel libre, qui fonctionne aussi bien sous plate-forme Windows, Mac ou Linux. Initialement
Utilisation du logiciel GALAAD
1 Sommaire: Présentation du logiciel GALAAD 1. Démarrer le programme........ 2. Présentation de l écran du logiciel....... Les barres d'outils, sauvegarder... 3. Créer un nouveau fichier........ 4. Préparer
COURS AUTOCAD. Création et utilisation des blocs. b leclerc. ERP Jean Moulin METZ
COURS AUTOCAD Création et utilisation des blocs QU EST-CE QU UN BLOC? C est un élément de dessin, auquel peut être associé du texte (des attributs ). Un bloc constitue un élément de bibliothèque. Il peut
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés
TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»
TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives
Table des matières. F. Saint-Germain / S. Carasco Document réalisé avec OpenOffice.org Page 1/13
Voici un petit tutoriel d'utilisation du tableau numérique de la marque promethean. Ce tutoriel est loin d'être complet, il permet juste une première approche simple des outils de base du logiciel ACTIVstudio.
Projet ISN - dossier réalisé par Randrianarimanana Stéphanie. Titre du projet : Site de rencontre. le nom de notre site de rencontre : Linkymeet
Projet ISN - dossier réalisé par Randrianarimanana Stéphanie Titre du projet : Site de rencontre le nom de notre site de rencontre : Linkymeet ( tout astérisque* signifie voir annexe) l'équipe : Randrianariamanana
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
Utilisation de XnView
http://www.rakforgeron.fr 27/02/2015 Utilisation de XnView Les photos d'actes généalogiques, les scans de documents réalisés par vous, ou vos saisies d'écran de documents téléchargés sur Internet, au-delà
FAA : Fonctions Automatiques de l Application. Les fonctions automatiques incluses dans vos applications développées avec
FAA : Fonctions Automatiques de l Application Les fonctions automatiques incluses dans vos applications développées avec Fonctionnalités automatiques WinDev 12 - Version 2-03-08 Fonctionnalités automatiques
Table des matières. Publicateur de CartoVista - Contenu de l'aide... 1. Publicateur de CartoVista - Contenu de l'aide... 1
Table des matières Publicateur de CartoVista - Contenu de l'aide... 1 Publicateur de CartoVista - Contenu de l'aide... 1 Commencer à utiliser le publicateur de CartoVista...... 1 Droits d'auteur... 2 Obtenir
Guide pour la réalisation d'un document avec Open Office Writer 2.2
Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer
Parcours FOAD Formation EXCEL 2010
Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation
Guide de démarrage rapide
Guide de démarrage rapide 1 Sommaire 1.Préambule...3 2.Démarrage du programme...4 3.Prise en main...6 3.1.Les saisies...6 3.2.Les listes...10 4.Gestion courante...13 4.1.Saisie d'un devis...13 4.2.Transformation
Module d introduction Comment réaliser vos propres cartes avec ArcGIS Online
Module d introduction Comment réaliser vos propres cartes avec ArcGIS Online Table des matières 1 Commencer avec ArcGis Online... 2 2 Créer des cartes I (utiliser les cartes disponibles /les services de
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é
Document Object Model (DOM)
Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés
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 Géodatabases en 9.2
Les Géodatabases en 9.2 Session Technique Géodatabase 9.2 Versailles SIG 2007 Nouveautés dans les Géodatabases Géodatabase adaptée À la taille de l entreprise À l architecture déployée Aux processus de
Un exemple avec WORKSPACE d'interwrite
S'approprier un utilitaire de TNI Un exemple avec WORKSPACE d'interwrite Objectifs : S'approprier un utilitaire de TNI («soft»)afin de percevoir la plus-value pédagogique de l'outil. Pour cela utiliser
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
1 / Introduction. 2 / Gestion des comptes cpanel. Guide débuter avec WHM. 2.1Créer un package. 2.2Créer un compte cpanel
Guide débuter avec WHM 1 / Introduction WHM signifie Web Host Manager (ou gestionnaire d'hébergement web). WHM va donc vous permettre de gérer des comptes d'hébergement pour vos clients. (création de compte,
Administration du site (Back Office)
Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface
MANUEL D UTILISATION ORBITVU EDITOR V.3
MANUEL D UTILISATION ORBITVU EDITOR V.3 1 INFORMATIONS GENERALES : Logiciel Orbitvu Editor V 3 Le logiciel accepte les systèmes d exploitation suivants : - Microsoft Vista avec service pack 2 et les dernières
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
79140 CERIZAY. Collège G. CLEMENCEAU. Page 1 sur 18
SEGPA 79140 CERIZAY Page 1 sur 18 SOMMAIRE 1. ASPECTS JURIDIQUES DU LOGICIEL SOLIDWORKS.. 2 2. OUVRIR LE LOGICIEL SOLIDWORKS.. 3 3. TRAVAILLER DANS L ESQUISSE (2D). 4 4. COMMENT DESSINER UN RECTANGLE..
Projet Matlab/Octave : segmentation d'un ballon de couleur dans une image couleur et insertion d'un logo
Projet Matlab/Octave : segmentation d'un ballon de couleur dans une image couleur et insertion d'un logo Dans ce projet, nous allons réaliser le code qui permet d'insérer sur une image, un logo sur un
Chapitre 1 Introduction
Les éléments à télécharger sont disponibles à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence ENI de l'ouvrage SOBI10SHA dans la zone de recherche et validez. Cliquez sur le titre
Cahier Technique. «Développer une application intranet pour la gestion des stages des étudiants» Antonin AILLET. Remi DEVES
Antonin AILLET Remi DEVES Thibaut AZZOPARDI 2 ème année de DUT Informatique Cahier Technique «Développer une application intranet pour la gestion des stages des étudiants» Encadré par Didier BOULLE Année
Traitement de texte : Quelques rappels de quelques notions de base
Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui
Création d'un site dynamique en PHP avec Dreamweaver et MySQL
Création d'un site dynamique en PHP avec Dreamweaver et MySQL 1. Création et configuration du site 1.1. Configuration de Dreamweaver Avant de commencer, il est nécessaire de connaître l'emplacement du
Création d'un site neutre et présentation des éléments de la page d'accueil
Création d'un site neutre et présentation des éléments de la page d'accueil Alkante Page 1/8 Table des matières Préambule... 3 Création d'un site neutre... 3 Rubriques de pages éditoriales...5 Contenu