Université de Toulouse-Le Mirail 10 décembre 2013 Département de Géographie-Aménagement-Environnement Laurent Jégou

Dimension: px
Commencer à balayer dès la page:

Download "Université de Toulouse-Le Mirail 10 décembre 2013 Département de Géographie-Aménagement-Environnement Laurent Jégou"

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) : https://www.dashingd3js.com/ 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="http://d3js.org/d3.v3.js"type="text/javascript"></script> 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="http://d3js.org/d3.v3.js" 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>

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="http://d3js.org/d3.v3.js" 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="http://d3js.org/d3.v3.js" 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

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 : https://github.com/mbostock/topojson/wiki 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="http://d3js.org/d3.v3.js" type="text/javascript"></script> 7 <script src="http://d3js.org/topojson.v1.min.js"></script> 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>

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 : https://github.com/mbostock/d3/wiki/geo-projections) Changer de fond de carte en convertissant le fond IGN Géofla des départements.

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes Visualisation interactive de données sur le web Présentation Généralités Repérage dans le support de cours Sur les slides projetés, le numéro de page entre parenthèse correspond à celui de votre support

Plus en détail

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

Tutoriel pour l introduction à l animation en HTML5 et JavaScript Tutoriel pour l introduction à l animation en HTML5 et JavaScript Frédéric Guégan Olivier Fauvel-Jaeger Giacomo Rombaut Table des matières 1. Introduction... 2 2. Création de l environnement... 2 3. Création

Plus en détail

Université de Toulouse-2 Jean Jaurès 18 décembre 2014 Département de Géographie-Aménagement-Environnement Laurent Jégou

Université de Toulouse-2 Jean Jaurès 18 décembre 2014 Département de Géographie-Aménagement-Environnement Laurent Jégou Université de Toulouse-2 Jean Jaurès 18 décembre 2014 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U351_33 Travaux pratiques récapitulatifs PostGIS PHP - Leaflet Pour

Plus en détail

G2C INFORMATIQUE CART@JOUR, LE SIG A LA PORTEE DE TOUS CART@JOUR ONLINE GUIDE DE LA CONSULTATION

G2C INFORMATIQUE CART@JOUR, LE SIG A LA PORTEE DE TOUS CART@JOUR ONLINE GUIDE DE LA CONSULTATION G2C INFORMATIQUE CART@JOUR, LE SIG A LA PORTEE DE TOUS CART@JOUR ONLINE GUIDE DE LA CONSULTATION Septembre 2008 I. OUVERTURE DU PROJET... 4 II. CONSULTATION ET PARAMETRES GENERAUX... 5 A. LA ZONE DE LA

Plus en détail

Projet individuel d algorithmique-programmation AP1 : groupe 1.1 - complément bibliothèque graphique

Projet individuel d algorithmique-programmation AP1 : groupe 1.1 - complément bibliothèque graphique Projet individuel d algorithmique-programmation AP1 : groupe 1.1 - complément bibliothèque graphique octobre 2010 1 Affichage graphique statique Il en existe trois bibliothèques graphiques en Ocaml : la

Plus en détail

3.5.1 Introduction: image bitmap versus image vectorielle

3.5.1 Introduction: image bitmap versus image vectorielle 3.5.1 Introduction 3.5.2 Principe 3.5.3 Avantages et Inconvénients 3.5.4 Applications 3.5.5 Logiciels sur Internet PLAN 3.5.1 Introduction: image bitmap versus image vectorielle Lorsque l'on affiche une

Plus en détail

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet «PARTIE IV Introduction au paradigme objet Programmation objet et événementielle

Plus en détail

HTML. Notions générales

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

Plus en détail

QGIS. Initiation à l'utilisation d'un SIG libre. Alexia LEVRAY, Maison de l'orient et de la Méditerranée, CNRS UMR 3439

QGIS. Initiation à l'utilisation d'un SIG libre. Alexia LEVRAY, Maison de l'orient et de la Méditerranée, CNRS UMR 3439 QGIS Initiation à l'utilisation d'un SIG libre Alexia LEVRAY, Maison de l'orient et de la Méditerranée, CNRS UMR 3439 Présentation Q GIS, ou Quantum GIS, est un logiciel libre de SIG. Il offre les mêmes

Plus en détail

Devoir XML / XSLT / Unicode

Devoir XML / XSLT / Unicode Devoir XML / XSLT / Unicode Frédérik Bilhaut Université de Caen Département d'informatique Les fichiers fournis pour réaliser le devoir sont à récupérer ici : http://www.info.unicaen.fr/~fbilhaut/ens/radi/devoir.tgz

Plus en détail

PG208, Projet n 2 : Dessin vectoriel

PG208, Projet n 2 : Dessin vectoriel PG208, Projet n 2 : Dessin vectoriel Bertrand LE GAL, Serge BOUTER et Clément VUCHENER Filière électronique 2 eme année - Année universitaire 2011-2012 1 Introduction 1.1 Objectif du projet L objectif

Plus en détail

Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body.

Ce code peut s insérer à plusieurs endroits entre les balises head (le plus souvent) ou directement à l intérieur des balises body. A/ Utilisation de Javascript UE Libre : Internet et composition de pages Web TP n 3 Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage

Plus en détail

Cartographie et SIG interactifs en ligne

Cartographie et SIG interactifs en ligne Atelier Cartographie novembre 2012 Département de Géographie / UTM Laurent Jégou jegou@univ-tlse2.fr M2pro Sigma : Module 653 Cartographie et SIG interactifs en ligne Séance 2 : Les moteurs cartographiques

Plus en détail

Ce tutoriel suppose que vous ayez installé les logiciels QGIS. http://www.qgis.org/en/site/ http://scapetoad.choros.ch/

Ce tutoriel suppose que vous ayez installé les logiciels QGIS. http://www.qgis.org/en/site/ http://scapetoad.choros.ch/ Un logiciel SIG (Système d Information Géographique) est une base de données spatiales qui sert, entre autres, à faire des cartes. Cela signifie qu à chaque ligne d un tableau d une base de données correspond

Plus en détail

II Flash - SWF - haxe

II Flash - SWF - haxe II Flash - SWF - haxe A. Introduction On appelle communément «animation Flash» ou «application flash», un contenu animé, dynamique, interactif d un site Internet. Flash existe depuis plus de dix ans maintenant

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

Utilisation Des Widgets ITEA

Utilisation Des Widgets ITEA Utilisation Des Widgets ITEA Sommaire 1 Introduction... 3 2 Intégration sur votre site web... 5 2.1 Intégration du widget en JavaScript... 5 2.2 Exemples... 6 2.3 Paramètres iframe et aveccss... 6 2.4

Plus en détail

Chapitre 7. Canvas. 7.1 Introduction. 7.2 Les attributs de 7.3 Intitialiser 7.3.1 document.getelementbyid(...)

Chapitre 7. Canvas. 7.1 Introduction. 7.2 Les attributs de <canvas> 7.3 Intitialiser <canvas> 7.3.1 document.getelementbyid(...) 108 Chapitre 7 Canvas 7.1 Introduction est un élément HTML qui peut être utilisé pour produire des éléments graphiques sur une page web, en utilisant javascript. Par exemple, il peut être utilisé

Plus en détail

TP JAVASCRIPT OMI4 jquery et ses Plungins

TP JAVASCRIPT OMI4 jquery et ses Plungins TP JAVASCRIPT OMI4 jquery et ses Plungins Objectifs de ce TP : découvrir quelques exemples d utilisation de la bibliothèque jquery et également quelques plugins. Exercice 1 : gestion d un bouton rollover

Plus en détail

PRODIGE V3. Manuel utilisateurs. Consultation cartographique

PRODIGE V3. Manuel utilisateurs. Consultation cartographique PRODIGE V3 Manuel utilisateurs Consultation cartographique 1 Pour plus d'information sur le dispositif : à remplir par chaque site éventuellement 2 SOMMAIRE Table des matières 1. OBJET DU DOCUMENT...4

Plus en détail

Cartographie et SIG interactifs en ligne

Cartographie et SIG interactifs en ligne Atelier Cartographie décembre 2012 Département de Géographie / UTM Laurent Jégou jegou@univ-tlse2.fr M2pro Sigma : Module 653 Cartographie et SIG interactifs en ligne Séance 3 : Les moteurs cartographiques

Plus en détail

Installation de FckEditor dans un projet WebDev

Installation de FckEditor dans un projet WebDev Installation de FckEditor dans un projet WebDev www.ogi.fr 1) Installation de FckEditor Télécharger la dernière version de FckEditor ici : http:www.fckeditor.net/download La dézipper dans le répertoire

Plus en détail

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN

Remerciements. Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 1 Janvier KEIFLIN Cédric 2 Janvier Remerciements Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN KEIFLIN Cédric 3 Janvier Mes sites

Plus en détail

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

Plus en détail

1 élève. 0 8 12 16 20 Note

1 élève. 0 8 12 16 20 Note L'histogramme est utilisé dans le cas d'une série regroupée en classe. Pour construire un histogramme, on porte les classes en abscisse et sur chacune d'elles pris comme base, on construit un rectangle

Plus en détail

Les logiciels. Tutoriel. Créer un modèle de terrain. Mois Année. Centre d'études des Tunnels. www.cetu.developpement-durable.gouv.

Les logiciels. Tutoriel. Créer un modèle de terrain. Mois Année. Centre d'études des Tunnels. www.cetu.developpement-durable.gouv. Les logiciels Tutoriel Créer un modèle de terrain Mois Année Centre d'études des Tunnels www.cetu.developpement-durable.gouv.fr Les logiciels T-Tunnel Tutoriel n 1 Créer un modèle de terrain Septembre

Plus en détail

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

Programmation d'openoffice (boîtes de dialogues)

Programmation d'openoffice (boîtes de dialogues) Programmation d'openoffice (boîtes de dialogues) La deuxième partie de cette étude va porter sur la réalisation d'une boite de dialogue permettant d'introduire dans la cellule sélectionnée la valeur d'une

Plus en détail

SIG : définition. L information géographique contient : - la forme et la localisation de l objet localisé, sous forme graphique.

SIG : définition. L information géographique contient : - la forme et la localisation de l objet localisé, sous forme graphique. I- Qu est ce qu un SIG? SIG : Système d Information Géographique Un SIG est un outil informatisé capable de créer, transformer, afficher, analyser et stocker de l information géographique. Il permet d'organiser

Plus en détail

Flash CS5. A - L environnement auteur de Flash

Flash CS5. A - L environnement auteur de Flash 1 Flash CS5 L objectif de cet apprentissage CS5 est de comprendre les concepts utilisés par le logiciel, et la manière dont il travaille. La description des outils ne sera donc pas exhaustive. Les différents

Plus en détail

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML HTML 5 HTML 5 Nouveau standard en développement basé sur HTML et XHTML Supporté partiellement par les navigateurs: Safari, Chrome, Firefox, et Opera supportent une partie de HTML5 Caractéristiques: Éléments

Plus en détail

Présentation du périmètre technique

Présentation du périmètre technique Présentation du périmètre technique Kit d intégration des fonctions de réservation Open System au sein d un site d information Alliance Réseaux v09012014 1 KIT D INTEGRATION DES FONCTIONS DE RESERVATION

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Arbres Expressions Mathématiques Structure arborescente de l expression

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

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

Plus en détail

Tutoriel : Feuille de style externe

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?

Plus en détail

PhotoFiltre 7 en bref

PhotoFiltre 7 en bref PF7. Fiche 2 PhotoFiltre 7 en bref Présentation de PhotoFiltre 7 Application gratuite PhotoFiltre 7 est un logiciel de retouches d images très complet. Développé en parallèle avec PhotoFiltre Studio, il

Plus en détail

10.6 Créer un fond d image avec une couleur personnelle:

10.6 Créer un fond d image avec une couleur personnelle: 10.6 Créer un fond d image avec une couleur personnelle: La dimension de l écran du système Tellimage est définie à 720 x 480 pixels. Il faut donc utiliser votre logiciel de dessin pour créer un fond d

Plus en détail

PARTIE CONCEPTION REALISATION DU DESSIN

PARTIE CONCEPTION REALISATION DU DESSIN PARTIE CONCEPTION REALISATION DU DESSIN 1.01. LANCER LE PROGRAMME GRAAL CAO 3D Pour créer un nouveau document Pour ouvrir un document existant OU Puis rechercher votre fichier dans votre répertoire 1.02.

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. thierry.vaira@orange.fr

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

PHP-Introduction à la génération de graphiques, fichiers Excel et PDF

PHP-Introduction à la génération de graphiques, fichiers Excel et PDF Cours de Programmation Internet PHP-Introduction à la génération de graphiques, fichiers Excel et PDF Magali Contensin - CNRS PHP est principalement utilisé pour générer des pages Web au format HTML ou

Plus en détail

Initiation à la BASE DE DONNÉES

Initiation à la BASE DE DONNÉES Initiation à la BASE DE DONNÉES 2e édition Guide d apprentissage et notions de base Nom: Classe: Produit par l École Alex Manoogian AW version 6.0 Initiation à la base de données Initiation à la base de

Plus en détail

Base de données avec AppleWorks

Base de données avec AppleWorks Introduction Le gestionnaire de fiches de est probablement le module le plus faible de. Il n a pas les nombreux avantages que l on trouve dans un logiciel dédié comme FileMaker Pro : pas de scripts, pas

Plus en détail

Légende : Créer un lien hypertexte depuis un cadre :

Légende : Créer un lien hypertexte depuis un cadre : Pour découvrir les fonctions de base de Didapages, se référer au tutoriel "Un livre simple avec Didapages 1.1.odt" disponible sur http://auch2.free.fr, rubrique Informatique. Légende : En bleu les points

Plus en détail

CATALOGUE DES FORMATIONS

CATALOGUE DES FORMATIONS CATALOGUE DES FORMATIONS WEB / GRAPHISME ADOBE ACROBAT PRO... 1 ADOBE PHOTOSHOP... 2 ADOBE INDESIGN... 3 ADOBE DREAMWEAVER... 4 ARTISTEER... 5 PREZI... 6 LE LANGAGE HTML... 7 LES FEUILLES DE STYLE CSS...

Plus en détail

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine

Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Télésanté Aquitaine Support Gestionnaire pour les nouvelles versions CPM (outil Drupal) Objet du document Ce document a pour but d'apporter des éléments de support au gestionnaire des nouvelles communautés de pratiques médicales.

Plus en détail

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160

Sommaire. Images Actives Logiciel libre développé par le CRDP de l académie de Versailles 2 Rue Pierre Bourdan Marly le Roi - 78160 Sommaire Choisir son image... 2 Enregistrer son travail... 3 Créer les détails... 4 Supprimer une zone ou un détail... 6 Les commentaires... 6 Créer un lien hypertexte... 8 Appliquer un modèle... 8 Personnaliser

Plus en détail

Figure 6.3: Possibilité d exprimer son talent

Figure 6.3: Possibilité d exprimer son talent SÉANCE 6 Création de schémas 6.1 Présentation du logiciel «Draw» est un logiciel de dessin vectoriel et de PAO (Publication Assistée par Ordinateur). Avec ce logiciel, il vous est possible de créer divers

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Faire une carte de vœux

Faire une carte de vœux Dans un précédent tutoriel : Faire une carte de vœux http://le.site.de.pierre.free.fr/squelettes/pagescours/annexes/cartes_de_voeux.html, je vous ai montré comment faire une carte de vœux, je me propose

Plus en détail

À PROPOS D IMAGES : Fiche professeur

À PROPOS D IMAGES : Fiche professeur À PROPOS D IMAGES : Fiche professeur Damier Assiette Danseuse Eventail Danseuse 1 FICHE ÉLÈVE (1) Que devient une image lorsqu on la grossit? Ouvrir (par exemple avec l application «Aperçu»), les deux

Plus en détail

COURS AUTOCAD. Création et utilisation des blocs. b leclerc. ERP Jean Moulin METZ

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

Plus en détail

Commande d'annonces pour Windows : localisateur

Commande d'annonces pour Windows : localisateur Commande d'annonces pour Windows : localisateur Dernière mise à jour - March 03, 2015 Politique d'acceptation des créations publicitaires Toute création doit répondre aux exigences de Microsoft Advertising

Plus en détail

Chapitre cinq : Représentation des Images

Chapitre cinq : Représentation des Images Chapitre cinq : Représentation des Images Ce chapitre présente les bases pour la représentation des images et des sons. ~ 1 ~ 6. 6.1.1. Introduction Il existe plusieurs moyens de représenter des images.

Plus en détail

Présentation du Framework BootstrapTwitter

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...

Plus en détail

Infogéo68 : Guide utilisateur

Infogéo68 : Guide utilisateur Infogéo68 : Guide utilisateur V3 Juillet 2015 1 Organisation d Infogéo68... 2 2 Le portail... 2 2.1 Accueil... 2 2.2 Cartothèque... 3 2.3 Métadonnées... 6 3 L application cartographique... 7 3.1 Organisation...

Plus en détail

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie Canvas est une balise HTML mais les méthodes de dessin sont l'affaire de JAVASCRIPT. Canvas, comme img, est une balise de type inline qui

Plus en détail

Domaine B4 : Réaliser des documents destinés à être imprimés.

Domaine B4 : Réaliser des documents destinés à être imprimés. Domaine B4 : Réaliser des documents destinés à être imprimés. Item B44: Intégrer les informations (images, fichiers, graphiques,...). Item B46: Créer des schémas (formes géométriques avec texte, traits,

Plus en détail

II. Conversions. I. Initialisation. III. Méthode point. TD Python Traitement d images MP*

II. Conversions. I. Initialisation. III. Méthode point. TD Python Traitement d images MP* Le but de ce TD est d utiliser les procédures et fonctions Python pour traiter des fichiers images. II. Conversions I. Initialisation Importer le module numpy sous l appellation np. On utilise le module

Plus en détail

Guide de l utilisateur VNF. SIG Fédératif Interface Cartographique

Guide de l utilisateur VNF. SIG Fédératif Interface Cartographique VNF SIG Fédératif Interface Cartographique Table des matières 1 Organisation de l'écran... 6 1.1 L entête... 7 1.2 La carte... 7 1.3 Le panneau de gauche... 7 1.3.1 Catalogues de données... 8 1.3.2 Gestion

Plus en détail

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web DHTML TCM-TWEB-01-001-13. Julien BEAUCOURT 2006 pour ETNA DHTML Sommaire Introduction Compatibilité du DHTML Les layers Les balises dynamiques Balise Balise et La balise Animer de éléments Le Document Object Model (DOM) Modifier une

Plus en détail

Licence DANT Université Pierre et Marie Curie UE Nouvelles technologies du web TME SERVLETS

Licence DANT Université Pierre et Marie Curie UE Nouvelles technologies du web TME SERVLETS TME SERVLETS Avant de commencer vous devez installer tout ce qui est nécessaire (JBoss ou un autre serveur d application, Eclipse avec support de votre serveur d application). Pour les deux exercices ci-dessous

Plus en détail

Université de Toulouse-Le Mirail Décembre 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou

Université de Toulouse-Le Mirail Décembre 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou Université de Toulouse-Le Mirail Décembre 2012 Département de Géographie-Aménagement-Environnement Laurent Jégou M2 Sigma Module U50_B33 Les clients légers du WebMapping : APIs et bibliothèques de fonctions

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

Plus en détail

Développement d'une application Android avec PhoneGap

Développement d'une application Android avec PhoneGap Développement d'une application Android avec PhoneGap Olivier Dommange Avant-propos PhoneGap permet le développement d'applications pour plusieurs systèmes d'exploitations de smartphones et tablettes (ios,

Plus en détail

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 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

Plus en détail

Chapitre 1. Prise en main

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

Plus en détail

Auteur : Jean-Joseph THIBAULT email : jeanjo@free.fr Présentation pour les débutants.

Auteur : Jean-Joseph THIBAULT email : jeanjo@free.fr Présentation pour les débutants. Auteur : Jean-Joseph THIBAULT email : jeanjo@free.fr Présentation pour les débutants. Cette présentation à eu lieu lors de la première session de présentation de cenabumix pour l'année 2010-2011 au mois

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. 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

Plus en détail

Ce projet se base sur le fait que les images numériques sont composées de pixels (plus ou moins nombreux selon le contexte).

Ce projet se base sur le fait que les images numériques sont composées de pixels (plus ou moins nombreux selon le contexte). Externat Notre Dame Accompagnement personnalisé (Tle S) Période n 2 Ce projet se base sur le fait que les images numériques sont composées de pixels (plus ou moins nombreux selon le contexte). A chaque

Plus en détail

Mettre en place sa plateforme de veille avec Netvibes

Mettre en place sa plateforme de veille avec Netvibes Mettre en place sa plateforme de veille avec Netvibes Karine Pasquier 6 mai 2011 HEG, Genève 1 Sommaire 1. Introduction... 3 1.1 Qu est-ce que c est... 3 1.2 A quoi ça sert pour la veille?... 3 1.3 Netvibes

Plus en détail

Fiches d initiation au logiciel PowerPoint

Fiches d initiation au logiciel PowerPoint Fiches d initiation au logiciel PowerPoint Préparé par Claude Frenette, RÉCIT de l enseignement privé version XP Ce document vous présente les concepts de base du logiciel PowerPoint de Microsoft. Chaque

Plus en détail

SVG et javascript. Le fichier SVG: plugin dans la page html. Le fichier SVG est repéré par son nom, ici "carte" Le système de coordonnées

SVG et javascript. Le fichier SVG: plugin dans la page html. Le fichier SVG est repéré par son nom, ici carte Le système de coordonnées Le fichier SVG: plugin dans la page html SVG et javascript Le fichier SVG est repéré par son nom, ici "carte" Le système de coordonnées

Plus en détail

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Licence STIC IUT de Marne-la-Vallée 12/03/2015 Cours de jquery Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Philippe Gambette Organisation pratique Contact - Courriel : philippe.gambette@gmail.com

Plus en détail

Microsoft Publisher. Notions de base. Versions Office 2007. Association Informatique Pour Tous - Vieillevigne - 1 - PUBLISHER 2007 NOTIONS DE BASE

Microsoft Publisher. Notions de base. Versions Office 2007. Association Informatique Pour Tous - Vieillevigne - 1 - PUBLISHER 2007 NOTIONS DE BASE Microsoft Publisher Notions de base Versions Office 2007 Gilbert Lecocq 1 2 SOMMAIRE Notions de base La fenêtre de travail page 3 Les modes de travail page 4 Les objets à insérer page 6 Insérer un texte

Plus en détail

Dessin avec l'outil Plume

Dessin avec l'outil Plume Spécialité : Tronc Commun Matière : Atelier Logiciel Mention : TI 1.1, 2, 3, 4, 5, 6,7 Enseignants : Equipe Pédagogique 09/10 Dessin avec l'outil Plume Grâce à l'outil Plume, Adobe Illustrator vous offre

Plus en détail

«SIG et archéologie, Initiation» Master Pro 2 d archéologie, 2008 Logiciel ArcView

«SIG et archéologie, Initiation» Master Pro 2 d archéologie, 2008 Logiciel ArcView «SIG et archéologie, Initiation» Master Pro 2 d archéologie, 2008 Logiciel ArcView Olivier Barge, Emmanuelle Régagnon, Séverine Sanz Maison de l Orient et de la Méditerranée Que sont les SIG? Les SIG sont

Plus en détail

Guide de prise en main de l outil de cartographie

Guide de prise en main de l outil de cartographie Guide de prise en main de l outil de cartographie LM 6139.470 1 Sommaire 1. Présentation générale... 3 1.1. Comment ça fonctionne?... 3 1.2. Aperçu... 3 2. Se déplacer dans la carte...4 2.1. Les touches

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Classes et templates C++

Classes et templates C++ Classes et templates C++ Ce TP propose une application des classes, des templates et du polymorphisme au travers du design de classes permettant de gérer des courbes de Bézier. Contents 1 Bézier unidimensionnelle

Plus en détail

1 Description générale de VISFIELD

1 Description générale de VISFIELD Guide d utilisation du logiciel VISFIELD Yann FRAIGNEAU LIMSI-CNRS, Bâtiment 508, BP 133 F-91403 Orsay cedex, France 11 décembre 2012 1 Description générale de VISFIELD VISFIELD est un programme écrit

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En Théorie Le fonctionnement de SPIP Qu est ce que SPIP? SPIP (Système de Publication pour l Internet Partagé) est un logiciel libre destiné à la production

Plus en détail

Freeway 7. Nouvelles fonctionnalités

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

Plus en détail

RESPONSIVE WEB DESIGN

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

Plus en détail

L image vectorielle avec Inkscape

L image vectorielle avec Inkscape L image vectorielle avec Inkscape Voici encore un merveilleux logiciel, un pur produit sorti du monde du libre, et qui demeure gratuit pour notre plus grand bonheur. Ses possibilités rivalisent avec les

Plus en détail

Utilisation des outils Easy Interactive Tools sous Mac OS

Utilisation des outils Easy Interactive Tools sous Mac OS Utilisation des outils Easy Interactive Tools sous Mac OS Après avoir téléchargé et installé les outils Easy Interactive Tools, vous pouvez utiliser les crayons inclus avec le projecteur BrightLinkMC pour

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

p. 1 Guy K PSE9 Section 21

p. 1 Guy K PSE9 Section 21 p. 1 PSE9 Section 21 Contenu Les calques vectoriels... 2 Généralités... 2 Calques Vectoriels... 2 Simplifier le calque (pour les calques vectoriels)... 2 Les outils... 3 Outils Formes... 4 1 - Menu de

Plus en détail

Présentation et traitement d information sur le Web Présentation du WWW (architectures web)

Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Présentation et traitement d information sur le Web Présentation du WWW (architectures web) Jean-Michel Follin jean-michel.follin@univ-lr.fr

Plus en détail

StreamServe Persuasion SP4 PageOUT

StreamServe Persuasion SP4 PageOUT StreamServe Persuasion SP4 PageOUT Manuel utilisateur Rév. A StreamServe Persuasion SP4 PageOUT - Manuel utilisateur Rév. A 2008 StreamServe, Inc. StreamServe est une marque commerciale de StreamServe,

Plus en détail

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

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,

Plus en détail

TP 7 : Manipulation d images.

TP 7 : Manipulation d images. Lycée Masséna TP 7 : Manipulation d images. On va voir deux choses dans ce TP : les tableaux Numpy, qui sont très pratiques pour les opérations terme à terme entre tableaux de nombres à plusieurs dimensions.

Plus en détail

SIG + Python. Love Story 1 / 41

SIG + Python. Love Story 1 / 41 SIG + Python = Love Story 1 / 41 1. SIG? 2. Pourquoi Python 3. Données vecteur 4. Données raster 5. Des exemples 2 / 41 SIG? 3 / 41 SIG? Systèmes d'information Géographique capturer, créer, stocker, analyser,

Plus en détail

Fiche n 2 Cadre texte & Cadre Image. Table des matières

Fiche n 2 Cadre texte & Cadre Image. Table des matières Fiche n 2 Cadre texte & Cadre Image Table des matières 1-Les textes...1 1.1-Créer un cadre texte...1 1.2-Éditer le texte...1 1.3-Paramétrer le texte...2 1.4-Dégrouper un texte...3 1.5-Convertir une lettre

Plus en détail

INKSCAPE Creative Commons By

INKSCAPE Creative Commons By Creative Commons By Creative Commons By Armel Maran & Jean-Pierre Morfin pour G3L Logiciel Libre pour le DESSIN VECTORIEL Qu'est ce que le dessin vectoriel? Un dessin vectoriel est une représentation composée

Plus en détail

Paint.NET Fiche n 1. Table des matières

Paint.NET Fiche n 1. Table des matières Paint.NET Fiche n 1 Table des matières 1-L'interface...1 2-La barre de menu...2 2.1-Le menu «Fichier»...2 2.2-Le menu «Édition»...2 2.3-Le menu «Image»...2 2.4-Le menu «Ajustements»...3 2.5-Le menu «Effets»...3

Plus en détail

LibreOffice Draw. Découvrir. Sommaire LV08001

LibreOffice Draw. Découvrir. Sommaire LV08001 Découvrir LibreOffice Draw LV08001 Sommaire 1. Dessiner une forme...3 2. Changer la couleur ou la ligne d'une forme...7 3. Insérer une image...8 4. Redimensionner une image ou une forme...16 5. Aligner

Plus en détail

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques.

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. TP Javascript 2013 tv - v.1.0 Sommaire Séquence n 1 : les bases 2 Insertion de code javascript..................................... 2 Exercice n 1.1 : code javascript interne au document.......................

Plus en détail