Visualisation d'informations
|
|
|
- Martin Dumais
- il y a 6 ans
- Total affichages :
Transcription
1 Visualisation d'informations Créer un diagramme en bâtons avec D3 Arnaud SALLABERRY D3 1 (Data-Driven Documents) est une bibliothèque graphique JavaScript. Elle permet d'afficher des données numériques ou textuelles sous forme de graphiques dynamiques. Elle est basée sur les technologies SVG, JavaScript et CSS. De nombreux tutoriels, cours, livres, etc. sont disponibles en ligne 2. Dans ce TD, nous allons voir comment créer un diagramme en bâton avec D3. Les exercices sont librement adaptés d'un tutoriel proposé par Mike Bostok 3. Exercice 1 : Dessiner un diagramme en bâton «manuellement» Nous allons considérer le tableau de nombres suivant : var data = [4, 8, 15, 16, 23, 42]; Le but de cet exercice est d'écrire un code HTML permettant d'afficher un diagramme en bâton sans utiliser de JavaScript. Commencez par créer une page HTML : <!DOCTYPE html> <html> <head> <title>bâton</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> Dans le corps, ajoutez un div ayant pour classe «chart» : <div class="chart"> Créer un diagramme en bâtons avec D
2 </div> Dans ce div, ajoutez un div pour chacune des valeurs de vos données. La taille du rectangle doit correspondre à la valeur correspondante. Cette valeur est affichée dans le div : <div style="width: 40px;">4</div> Le but maintenant est de modifier le style de la classe «chart» afin d'obtenir le diagramme suivant : Ajoutez donc une balise style à votre code et modifiez les valeurs des propriétés par défaut de la classe «chart» (vous pourrez modifier les propriétés margin, padding, font, text-align, color) : <style>.chart div { background-color: steelblue;... </style> La solution présentée dans ce premier exercice est limitée. Sa mise en place est laborieuse si le jeu de données est grand, elle nécessite une ré-implémentation pour chaque nouveau jeu de données, Il est donc nécessaire de trouver une solution plus automatisée. Pour cela, nous allons utiliser D3. Exercice 2 : Dessiner un diagramme en bâton «automatiquement» Le but de cet exercice est de re-créer le diagramme de l'exercice 1 de façon automatique en utilisant D3. Commencez par créer une page HTML contenant un div ayant pour classe «chart», ainsi que son style défini dans l'exercice 1. Chargez la bibliothèque D3 : <script src=" Dans le body, ouvrez une balise script et créez une variable contenant vos données : <script type="text/javascript"> var data = [4, 8, 15, 16, 23, 42]; </script> Vous allez maintenant devoir sélectionner le div que vous avez créé. La fonction «select» en D3 permet de sélectionner un élément. Par exemple, le code : var body = d3.select(''body''); permet de sélectionner le body de votre document. L'argument peut aussi être un sélecteur de classe (i.e. «.chart»). Créez une variable chart contenant la sélection du div de classe «chart». Cette variable sera donc le conteneur de votre diagramme : var chart = d3.select(".chart"); Créer un diagramme en bâtons avec D
3 Il va maintenant falloir un conteneur pour chacun des «bâton» de votre diagramme. Pour cela, nous allons commencer par créer une variable contenant tous les divs du conteneur chart (0 pour l'instant, nous y ajouterons ensuite un div par valeur des données). Pour cela, nous allons utiliser la fonction selectall, qui s'utilise de la façon suivante : var section = d3.selectall(''section''); Dans cet exemple, toutes les sections du document sont sélectionnées. Créez donc une variable bar contenant tous les divs du conteneur chart : var bar = chart.selectall("div"); Vous pouvez maintenant ajouter les données à votre nouveau conteneur : var barupdate = bar.data(data); Pour chaque valeur des données, il faut maintenant créer un div. Pour cela, la fonction «enter» permet de sélectionner les valeurs des données pour lesquelles il n'existe pas d'élément graphique (i.e. toutes). Ensuite, la fonction «append» permet d'ajouter les divs : var barenter = barupdate.enter().append("div"); Pour finir, ajoutez une taille et un texte aux divs de la façon suivante : barenter.style("width", function(d) { return d * 10 + "px"; ); barenter.text(function(d) { return d; ); Dans ce code, «d» représente la valeur des données associée à chaque bar. Si votre code est correct, vous devez obtenir une image identique à celle présentée dans l'exercice 1. Pour finir, vous pouvez simplifier votre code de la manière suivante : d3.select(".chart").selectall("div").data(data).enter().append("div").style("width", function(d) { return d * 10 + "px"; ).text(function(d) { return d; ); Exercice 3 : Taille du diagramme Reprenez le code de l'exercice précédent et multipliez les valeurs de départ par 10. Comme vous le constatez, le diagramme dépasse maintenant la taille de l'écran. En visualisation, il est souvent utile de calculer la taille des éléments de façon à ce que l'élément le plus grand ait une certaine valeur maximale. Cela revient à calculer l'échelle du diagramme de façon dynamique, en fonction des données en entrée. Dans notre exemple, le problème vient du fait que notre échelle est fixe (10 lorsque l'on fait d*10). Pour résoudre ce problème, vous allez utiliser la fonctionnalité d'échelonage linéaire de D3 («scale.linear») dans laquelle vous pouvez spécifier une transformation de valeurs d'un intervalle («domain») à un autre («range») : var s = d3.scale.linear().domain([0, d3.max(data)]).range([0, 420]); Une fois cette fonction créée, il vous suffit de modifier la propriété «width» des divs de façon à ce qu'elle Créer un diagramme en bâtons avec D
4 soit égale à s(d)+"px". Exercice 4 : Charger des données Nous allons maintenant séparer les données du code HTML. Commencez par modifier la variable data de la façon suivante : var data = [ {name: "Locke", value: 4, {name: "Reyes", value: 8, {name: "Ford", value: 15, {name: "Jarrah", value: 16, {name: "Shephard", value: 23, {name: "Kwon", value: 42 ]; La valeur pour chaque élément est maintenant contenue dans un champ «value». Il faut donc modifier vos fonctions de façon à ce qu'elles retournent des valeurs calculées à partir de «d.value» et non de «d». La valeur max sera calculée de la façon suivante : d3.max(data, function(d) { return d.value; ) Vous allez maintenant récupérer le fichier JSON «td1.json» contenant les valeurs ci-dessus : [ {"name": "Locke", "value": 4, {"name": "Reyes", "value": 8, {"name": "Ford", "value": 15, {"name": "Jarrah", "value": 16, {"name": "Shephard", "value": 23, {"name": "Kwon", "value": 42 ] Supprimez la variable data et placez votre code à l'intérieur des lignes suivantes : d3.json("votrefichier.json", function(error, data) { ); La varaible «data» contient maintenant les données du fichier «votrefichier.json». Exercice 5 : SVG L'utilisation de divs pour afficher les éléments d'un graphique peut être très limité. Les divs sont des rectangles, et la majorité des visualisations demandent l'utilisation de formes plus complexes. Pour résoudre ce problème, nous allons utiliser le format de données SVG. Celui-ci inclut des primitives pour dessiner des formes complexes comme des courbes de Béziers. Voici le code SVG permettant de construire le diagramme précédent manuellement : <svg class="chart" width="420" height="120"> <g transform="translate(0,0)"> <rect width="40" height="19"></rect> <text x="37" y="9.5" dy=".35em">4</text> Créer un diagramme en bâtons avec D
5 </g> <g transform="translate(0,20)"> <rect width="80" height="19"></rect> <text x="77" y="9.5" dy=".35em">8</text> </g>... </svg> Tout d'abord, un conteneur de type svg est déclaré, avec comme propriété sa classe et sa taille. Puis, pour chaque valeur des données, un conteneur g est déclaré, et la fonction «translate» permet de le placer au bon endroit. Il contient un rectangle de hauteur 19 et dont la taille correspond à la valeur de la donnée correspondante multiplié par 10 (40, 80, 150, 160, 230, 420). Enfin, le texte (i.e. la valeur) est placé à l'extrémité du rectangle. Le style associé est défini ci-dessous : <style>.chart rect { fill: steelblue;.chart text { fill: white; font: 10px sans-serif; text-anchor: end; </style> Créez un nouveau fichier HTML basé sur du SVG et qui reproduit le diagramme en bâton étudié jusqu'ici. Remarque : Il est parfois difficile de savoir qu'elle propriétés en SVG doivent être spécifiées en attribut et quelles propriétés doivent être précisées dans le style. La liste des propriétés de style est disponible sur le site du W3C 4. En général, les propriétés géométriques font parti des attributs (rect, width, transform, ) et les propriétés esthétiques sont des styles. Exercice 6 : SVG et JavaScript Nous allons maintenant voir comment créer automatiquement le même diagramme en SVG. Reprenez le code de l'exercice 4, modifiez le style pour qu'il corresponde à celui de l'exercice 5, remplacez le div de classe chart par un svg comme dans l'exercice 5 (<svg class="chart" width="420" height="120"></svg>) et supprimez le code affichant les divs : d3.select(".chart").selectall("div").data(data).enter().append("div").style("width", function(d) { return d * 10 + "px"; ).text(function(d) { return d; ); Ces lignes vont être remplacées par la création de figures SVG. Commencez par créer une variable chart contenant la sélection du svg de classe «chart» (cf. exercice 2). Ensuite, créez une variable bar contenant la sélection des éléments g de chart (cf exercice en sélectionnant les éléments g au lieu des éléments div). 4 Créer un diagramme en bâtons avec D
6 Ajoutez les données (.data(data)). Vous pouvez maintenant ajouter les éléments de type g en parcourant les valeurs des données qui n'ont pas d'objets graphiques associés (.enter().append("g")). Effectuez la translation des g. Pour cela, vous devez spécifier une valeur pour l'attribut «transform» de la façon suivante :.attr("transform", function(d, i) { return "translate(0," + i*20 + ")"; ); Il ne reste plus qu'à ajouter les rectangles et les textes associés. Voici le code pour les rectangles, en leur spécifiant leur taille comme attribut : bar.append("rect").attr("width", function(d) { return s(d.value); ).attr("height", 19); Et voici le code pour les textes : bar.append("text").attr("x", function(d) { return s(d.value) - 3; ).attr("y", 13).text(function(d) { return d.value; ); Vous devriez maintenant avoir un diagramme identique à l'image donnée dans l'exercice 1. Exercice 7 : Rotation des colonnes Le système de coordonnées en SVG est positionné en haut à gauche de l'écran. Modifiez les attributs «transform», «width», «height», «x» et «y» pour obtenir l'image suivante : Indication : commencez par inverser le range (.range([420,0]);) et adaptez ensuite les attributs. Exercice 8 : Ajout des axes Tout d'abord, nous allons commencer par créer les marges qui contiendront les axes. Pour cela, créez la variable suivante : var margin = {top: 10, right: 10, bottom: 10, left: 10, width = 420, height = 120; Dans votre code, remplacez toutes les occurrences de 420 par width et celles de 120 par height. Ensuite, Créer un diagramme en bâtons avec D
7 modifiez les translations pour que les éléments du diagramme soient entourés par les marges définies cidessous (rectangle avec 400 px de large et 100 px de haut). Vous êtes maintenant libre de régler la taille de votre diagramme. Essayez 500 par 500. Renomez la fonction «scale» en sy, puisque cette échelle est utilisé sur l'axe y. Pour l'axe des x, nous allons créer une échelle ordinale, et non linéaire, car elle sera utilisée pour afficher la suite ordonnée des attributs «name» du fichier CSV : var sx = d3.scale.ordinal().domain(data.map(function(d) { return d.name; )).rangeroundbands([0, width],.1); Vous remarquerez que nous avons utilisé ici la fonction «rangeroundbands», qui retourne la largeur de chaque bâton de façon à ce qu'ils aient tous la même taille et qu'ils occupent l'ensemble de l'espace disponible (entre 0 et 120). De plus, le second argument de la fonction assure que chaque bâton est séparé des autres par un espace. Utiliser «.rangeband([0, 120])» permet d'obtenir la même chose sans les espaces séparateurs. Vous pouvez maintenant mettre à jour votre code afin d'utiliser cette nouvelle échelle :.attr("transform", function(d, i) { return "translate(" + (sx(d.name) +margin.left) + ", " + (margin.top+sy(d.value)) + ")"; );....attr("width", sx.rangeband()); Vérifiez que le diagramme n'a pas changé. Vous pouvez maitenant créer votre premier axe (l'attribut «orient» défini son orientation) : var xaxis = d3.svg.axis().scale(sx).orient("bottom"); Puis vous pouvez ajouter la figure correspondante : chart.append("g").attr("class", "x axis").attr("transform", "translate(" + margin.left + ", " + (height+margin.top+10) +" )").call(xaxis); Et enfin vous pouvez lui donner un style :.axis text { fill: black; font: 10px sans-serif;.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispedges; Votre axe gradué en x doit maintenant s'afficher correctement. Ajoutez maintenant l'axe en y (avec «left» comme orientation). Voici à quoi doit ressembler votre diagramme : Créer un diagramme en bâtons avec D
8 Exercice 9 : Étiquetage des axes Il vous reste une dernière chose à ajouter afin que votre diagramme permette de transmettre de l'information : étiqueter ses axes. Pour cela, vous allez supprimé le «;» qui se trouve à la fin de la ligne.call(yaxis); et ajoutez un texte de la façon suivante :.append("text").attr("transform", "rotate(-90)").attr("y", 13).text("Frequency"); La rotation permet de l'afficher à la verticale, la position y permet de l'afficher à côté de l'axe. L'attribut «text» permet de spécifier le texte à afficher. Voici le diagramme obtenu : Créer un diagramme en bâtons avec D
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?
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
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
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
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
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
.. 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
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
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
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
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
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
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...
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
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
{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
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
DOM - Document Object Model
DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
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/
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
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
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,
Introduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
SYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006
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
Zen, SASS, responsive design
, SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
Introduction : Cadkey
Introduction Cadkey Cadkey est un logiciel de dessin assisté par ordinateur. La fenêtre du logiciel devrait ressembler à quelque chose comme suit: Le menu supérieur: Redraw Autoscale Efface Modifier les
Présentation. Référenciel : textes officiels
Présentation BO n 42 du 23 novembre 2000 BO n 13 du 29 mars 2001 Compétences requises pour le niveau 2 Référenciel : textes officiels Feuille de position niveau 2 (collège) - Culture informatique. - Organiser
Cycle de Découverte n 1 VISUALISER Créer la prochaine application innovante
Cycle de Découverte n 1 VISUALISER Créer la prochaine application innovante 1 Data Driven Summit 2014 Paris Mardi 18 novembre Visualisation efficace du Big Data Bonne pratique de l expérience utilisateur
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
Comment développer et intégrer un module à PhpMyLab?
Comment développer et intégrer un module à PhpMyLab? La structure du fichier Afin de conserver une homogénéité et une cohérence entre chaque module, une structure commune est utilisée pour chacun des modules
RapidMiner. Data Mining. 1 Introduction. 2 Prise en main. Master Maths Finances 2010/2011. 1.1 Présentation. 1.2 Ressources
Master Maths Finances 2010/2011 Data Mining janvier 2011 RapidMiner 1 Introduction 1.1 Présentation RapidMiner est un logiciel open source et gratuit dédié au data mining. Il contient de nombreux outils
Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013
Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326
MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
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
3.2. Matlab/Simulink. 3.2.1. Généralités
3.2. Matlab/Simulink 3.2.1. Généralités Il s agit d un logiciel parfaitement dédié à la résolution de problèmes d'analyse numérique ou de traitement du signal. Il permet d'effectuer des calculs matriciels,
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES Page 1/5 ATELIER INTEGRATION A mi-parcours de votre formation, l'atelier (dont la note est coefficient 2) permet d'évaluer vos connaissances acquises lors
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,
ENVOYER DES NEWSLETTER (POM0580) (/PORTAIL/SERVICES-AU-PUBLIC/1262- ENVOYER-DES-NEWSLETTER-POM0580)
1 sur 7 12/05/2014 15:39 ENVOYER DES NEWSLETTER (POM0580) (/PORTAIL/SERVICES-AU-PUBLIC/1262- ENVOYER-DES-NEWSLETTER-POM0580) Catégorie : Services au public (/portail/services-au-public) Mis à jour le vendredi
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
Comment faire pour créer ses propres pages html?
. Comment faire pour créer ses propres pages html? Insérer une vidéo Pour ajouter une vidéo de votre choix, il vous faut insérer, dans un premier temps, un tableau dans lequel vous placerez un mot, par
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?
RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels
Flex. Lire les données de manière contrôlée. Programmation Flex 4 Aurélien VANNIEUWENHUYZE
Flex Lire les données de manière contrôlée 1 Plan Lier les données Stocker les données Valider les données 2 Gérer des données Lier des données La notion de DataBinding est l une des plus importantes du
Celui qui vous parle. Yann Vigara
Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans
Spécificités Techniques créations publicitaires
Spécificités Techniques créations publicitaires 2012 Sommaire Presentation p3 Sky Flottant 120x600 p17 Spec : Clicktag p4 Flash Transparent 400x400 p18 Spec : Flash transparent / Interstitiel p5 Flash
Optimiser les e-mails marketing Les points essentiels
Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement
BIRT (Business Intelligence and Reporting Tools)
BIRT (Business Intelligence and Reporting Tools) Introduction Cette publication a pour objectif de présenter l outil de reporting BIRT, dans le cadre de l unité de valeur «Data Warehouse et Outils Décisionnels»
Introduction à MATLAB R
Introduction à MATLAB R Romain Tavenard 10 septembre 2009 MATLAB R est un environnement de calcul numérique propriétaire orienté vers le calcul matriciel. Il se compose d un langage de programmation, d
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
Référencement Naturel ou SEO Search Engine Optimization
Agence Référencement R & WebMarketing www.1ere-position.fr Référencement Naturel ou SEO Search Engine Optimization 24 avril 2009 - SNPAR 1ère Position S.A. (siège social) Savoie Technolac - Alouette II
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
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
1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet.
1 ère Université WEB Courbevoie Samedi 21 octobre 2006 Votre site interactif sur internet. Programme de la journée. 10H30 - Introduction Université web Votre site interactif sur internet. 10H35 Généralités
PEPSITE EST COMPATIBLE UNIQUEMENT SUR IE10+
1 Avertissements Ce document a pour but de fournir à tous les moyens pour bien débuter avec PEPSITE. Nous utiliserons donc volontairement un vocabulaire et une méthode de travail accessibles à un public
Responsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Le stockage local de données en HTML5
Le stockage local HTML5, pourquoi faire? Dans une optique de réduction des couts de maintenance, de déploiement, beaucoup d'entreprises ont fait le choix de migrer leurs applicatifs (comptables, commerciales,
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
Création d'un questionnaire (sondage)
Création d'un questionnaire (sondage) Le but de ce petit tuto est d'avoir les séquences pas à pas pour la création d'un questionnaire de façon à ne pas devoir rechercher la manière de procéder si l'outil
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
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
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework
Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework L'objectif de ce document est de poser des bases de réflexion sur la modélisation d'un projet réalisé
101 Réaliser et publier un site WEB
101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1
Travaux pratiques avec RapidMiner
Travaux pratiques avec RapidMiner Master Informatique de Paris 6 Spécialité IAD Parcours EDOW Module Algorithmes pour la Fouille de Données Janvier 2012 Prise en main Généralités RapidMiner est un logiciel
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
ProSimPlus HNO3 Résumé des nouvelles fonctionnalités, décembre 2008
ProSimPlus HNO3 Résumé des nouvelles fonctionnalités, décembre 2008 Cette page présente un résumé des derniers développements effectués dans le logiciel ProSimPlus HNO3. Ceux-ci correspondent à de nouvelles
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
Cours admin 200x serveur : DNS et Netbios
LE SERVICE DNS Voici l'adresse d'un site très complet sur le sujet (et d'autres): http://www.frameip.com/dns 1- Introduction : Nom Netbios et DNS Résolution de Noms et Résolution inverse Chaque composant
Guide de démarrage Tradedoubler. Manuel éditeur / affilié
Guide de démarrage Tradedoubler Manuel éditeur / affilié 1 DEMARRER 1. Devenir éditeur sur Tradedoubler 2. Ajouter ses informations bancaires 3. Bénéficier des paiements internationaux 4. Avoir accès aux
Audit de site web. Accessibilité
Accessibilité 1. Est- ce que le contenu est structurellement séparé des éléments de navigation? 2. Est- ce que le site est compatible avec tous les navigateurs? 3. Le site est- il compatible avec les normes
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
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
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
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
les techniques d'extraction, les formulaires et intégration dans un site WEB
les techniques d'extraction, les formulaires et intégration dans un site WEB Edyta Bellouni MSHS-T, UMS838 Plan L extraction des données pour un site en ligne Architecture et techniques Les différents
La balise object incorporer du contenu en HTML valide strict
Qu'est ce que la balise object La balise object incorporer du contenu en HTML valide strict Beaucoup de monde insère des médias dans leur page web avec la balise non standard . Pourtant il existe
Tarif MediaSpecs plate-forme - 2015 Valable à partir du 01/01/2015
Tarif MediaSpecs plate-forme - 2015 Valable à partir du 01/01/2015 Information générale MediaSpecs.fr comprend deux grands volets pour les spécialistes des médias: 1. Une base de données on-line 2. Une
Informatique : Création de site Web Master 2 ANI TP 1
Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :
Trier les ventes (sales order) avec Vtiger CRM
Trier les ventes (sales order) avec Vtiger CRM Dans l'activité d'une entreprise, on peut avoir besoin d'un outil pour trier les ventes, ce afin de réaliser un certain nombre de statistiques sur ces ventes,
MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"
MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB" Quelques conseils pour bien contribuer 1 Paramétrer votre navigateur web 2 Accéder au module de gestion des pages web 2
Dans l'article précédent, vous avez appris
Pour les débutants Les différents formats de sortie proposés par PHPExcel La bibliothèque orientée objet PHPExcel permet de lire et créer des fichiers pour tableurs. Dans cette série d articles, vous apprendrez
Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte»
Climat Scolaire - Manuel utilisateur - Chapitre 2 : «Créer, Editer et suivi d un texte» Espace collaboratif Co-Ment Date : 01/12/2013 Référence du Projet : Chef de Projet : www.cndp.fr/climatscolaire Caroline
1. Vocabulaire : Introduction au tableau élémentaire
L1-S1 Lire et caractériser l'information géographique - Le traitement statistique univarié Statistique : le terme statistique désigne à la fois : 1) l'ensemble des données numériques concernant une catégorie
Relation entre deux variables : estimation de la corrélation linéaire
CHAPITRE 3 Relation entre deux variables : estimation de la corrélation linéaire Parmi les analyses statistiques descriptives, l une d entre elles est particulièrement utilisée pour mettre en évidence
Nouveautés joomla 3 1/14
Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser