Bibliothèques graphiques
|
|
|
- Norbert Gignac
- il y a 8 ans
- Total affichages :
Transcription
1 Bibliothèques graphiques Cilia Mauro Octobre 2012 ANF DevWeb ASR
2 Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
3 Introduction Modèles colorimétriques 1 pixel RVB CMJ Synthèse additive (sources de lumière, pixels) Synthèse soustractive (impression, vêtements)
4 Introduction Types d images générées Images matricielles Constituée d une matrice de pixels Formats web : JPEG, PNG, GIF Qualité dépend Nombre de pixels Profondeur de la couleur
5 Introduction Types d images générées Images matricielles Constituée d une matrice de pixels Formats web : JPEG, PNG, GIF Qualité dépend Nombre de pixels Profondeur de la couleur Avantages Formats supportés nativement Identiques dans tous les navigateurs
6 Introduction Types d images générées Images vectorielles Format SVG Représentation d objets vectoriels (XML) Objets définis mathématiquement <!doctype html> <title>test SVG dans HTML</title> <p> un disque : <svg> <circle r="40" cx="250" cy="50" stroke="red" fill="white"/> </svg> </p>
7 Introduction Types d images générées Images vectorielles Format SVG Représentation d objets vectoriels (XML) Objets définis mathématiquement 100% Avantages Pas de perte de qualité Utilise moins d octets 800%
8 Introduction Comment dessiner un graphique? 4.2, Statique FTP.jpg Serveur web Client 4.2, Serveur web Dynamique
9 Introduction Côté serveur VS côté client Client <!doctype html> <html> <body> <img src='graphique.php' alt='image'> </body> </html> HTML 1 Côté serveur Serveur
10 Introduction Côté serveur VS côté client Client <!doctype html> <html> <body> <img src='graphique.php' alt='image'> </body> </html> HTML 1 Côté serveur Serveur 2 BDD
11 Introduction Côté serveur VS côté client Client <!doctype html> <html> <body> <img src='graphique.php' alt='image'> </body> </html> HTML 1 Côté serveur Serveur 2 En-tête HTTP/ OK Date: Sun, 02 Oct :04:36 GMT Server: Apache Content-Length: Connection: close Content-Type: image/png Corps 3 Image générée dynamiquement
12 Introduction Côté client Client <!doctype html> <script type="text/javascript"> Côté serveur VS côté client var graph = new Dygraph(document.getElementById('graphique', data); </script> </html> HTML 1 Serveur JS
13 Introduction Côté serveur VS côté client Côté client Client <!doctype html> <script type="text/javascript"> var graph = new Dygraph(document.getElementById('graphique', data); </script> </html> HTML 1 Serveur JS 2 JS Image interactive
14 Introduction Côté serveur VS côté client Interactivité Annotations Menu contextuel Menu contextuel
15 Introduction Côté serveur VS côté client Interactivité Annotations Menu contextuel Sélecteur d intervalle Affichage points lors survol Sélecteur d intervalle
16 Introduction Côté serveur VS côté client Interactivité Annotations Menu contextuel Sélecteur d intervalle Affichage points lors survol Mise à jour dynamique, évolution du graphique dans le temps (Ajax) Dynamisme
17 Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs Rgraph Highcharts
18 Choix d une bibliothèque Critères Le client doit supporter les technologies utilisées JavaScript activé HTML5 SVG Besoin d interactivité Bibliothèque côté client Type de graphique Bibliothèque spécialisée Bibliothèque plus générique
19 Choix d une bibliothèque Critères Pérennité Support normes, documentation, forge logicielle Fonctionnalités offertes Développeur Expérience utilisateur
20 Choix d une bibliothèque Critères Sécurité Côté client : JS activé XSS Consommation des ressources Licence Aspect financier
21 Choix d une bibliothèque Bibliothèques choisies Dygraph Spécialisée dans les courbes RGraph Nombreux types de graphiques HighCharts Nombreux thèmes Dygraph HighCharts RGraph
22 Choix d une bibliothèque Exemples Courbes Histogrammes Diagrammes à secteurs
23 Choix d une bibliothèque Mon premier graphique Créer et configurer Ajout de données (Ajax) Dynamisme
24 Principe du dynamisme JavaScript Ajouter et supprimer des points périodiquement setinterval(a, b) JS Fonction à exécuter Périodicité (ms) setinterval(majcourbe, 1000) ;
25 Principe du dynamisme Type de données Ajax Fichier CSV : intégralité de la courbe Format JSON : points de données [ x, y ]
26 Principe du dynamisme Ajax : format CSV 1
27 Principe du dynamisme Ajax : format CSV Script
28 Principe du dynamisme Ajax : format CSV Script 3 Réponse HTTP HTTP/ OK Date: Sun, 30 Sep :04:32 GMT Server: Apache Content-Length: 207 Content-Type: text/csv Date, Courbe , , ,2.2 En-tête Corps
29 Principe du dynamisme Ajax : format CSV Script 3 4 Réponse HTTP HTTP/ OK Date: Sun, 30 Sep :04:32 GMT Server: Apache Content-Length: 207 Content-Type: text/csv Date, Courbe , , ,2.2 En-tête Corps
30 Principe du dynamisme Ajax : format JSON 1
31 Principe du dynamisme Ajax : format JSON Script
32 Principe du dynamisme Ajax : format JSON Script [ ,2.2] 3 Réponse HTTP En-tête HTTP/ OK Date: Sun, 30 Sep :1:42 GMT Server: Apache Content-Length: 15 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/json [ ,2.2] Corps
33 Principe du dynamisme Ajax : format JSON Script [ ,2.2] 3 4 JS Réponse HTTP En-tête HTTP/ OK Date: Sun, 30 Sep :1:42 GMT Server: Apache Content-Length: 15 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/json [ ,2.2] Corps
34 Principe du dynamisme Ajax : format JSON Script [ ,2.2] 3 4 JS 5 Réponse HTTP En-tête HTTP/ OK Date: Sun, 30 Sep :1:42 GMT Server: Apache Content-Length: 15 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: application/json [ ,2.2] Corps
35 Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
36 Dygraphs Caractéristiques Spécialisée dans les courbes Visualisation interactive de séries de données temporelles denses Open source Utilise HTML5 canvas (compatible IE < 9 avec ExplorerCanvas) Très simple d utilisation : 3 instructions JavaScript Nombreuses options de configuration Exploration de courbes
37 Dygraphs Caractéristiques Spécialisée dans les courbes Visualisation interactive de séries de données temporelles denses Open source Utilise HTML5 canvas (compatible IE < 9 avec ExplorerCanvas) Très simple d utilisation : 3 instructions JavaScript Nombreuses options de configuration Zoom
38 Dygraphs Courbe standard Données de températures fictives Deux courbes d après fichier CSV Une option : sélecteur d intervalle
39 Dygraphs Courbe standard 1 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> JS 1. Inclure la bibliothèque </body> </html>
40 Dygraphs Courbe standard 1 2 <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> JS <div id='graphique' style='width:900px;height:220px'></div> 1. Inclure la bibliothèque 2. Créer le bloc conteneur </body> </html>
41 Dygraphs Courbe standard <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique JS </body> </html>
42 Dygraphs Courbe standard <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique Propriété: valeur </body> </html>
43 Dygraphs Courbe standard <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique Formats de données Fichier CSV var graph = new Dygraph(conteneur, 'data.csv', opnons); </body> </html> 1 ère colonne x 2 ème colonne y 1 3 ème colonne y 2 Tableau de données var graph = new Dygraph(conteneur, data, opnons); var data = [ [new Date("2010/07/01"),25,20], [new Date("2010/08/01"),23,18.5], [new Date("2010/09/01"),18,17] ]
44 Dygraphs Courbe standard <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a></p> </noscript> </body> </html> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique JS
45 Dygraphs Courbe standard <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a></p> </noscript> </body> </html> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve JS
46 Dygraphs Courbe standard <!doctype html> <html> <head> <Ntle>meteo</Ntle> <script type='text/javascript' src='dygraph- combined.js'></script> </head> <body> <div id='graphique' style='width:900px;height:220px'></div> <script type="text/javascript"> var conteneur = document.getelementbyid('graphique'); var opnons = {showrangeselector: true} ; var graph = new Dygraph(conteneur, 'data.csv', opnons); </script> <noscript> <p>acnvez JS pour visualiser les courbes ou consultez la <a href='courbe.php'>version non interacnve</a></p> </noscript> </body> </html> JS 1. Inclure la bibliothèque 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve Configuration du graphique
47 Dygraphs Courbe standard <div id='graphique'></div> <script type="text/javascript"> Configuration minimale var conteneur = document.getelementbyid('graphique'); var graph = new Dygraph(conteneur, 'data.csv'); </script> Configuration personnalisée
48 Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15 Dimensions width: 900, height: 280, rightgap: px }; 280px 15px
49 Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15, Mtle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always' Titre et légende Ntle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always' };
50 Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15, Ntle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always', ylabel: 'Taux de migranon', axislabelfontsize: 12, axislinecolor: 'navy', axislinewidth: 0.5, valuerange: [- 1,7], yaxislabelwidth : 32, pixelsperlabel: 30 Axe des ordonnées ylabel: 'Taux de migranon', axislabelfontsize: 12, axislinecolor: 'navy', axislinewidth: 0.5, valuerange: [- 1,7], yaxislabelwidth : 32, pixelsperlabel: 30, 12pt }; 32px 30px
51 Dygraphs Courbe personnalisée var opnons = { width: 900, height: 280, rightgap: 15, Ntle: 'Taux d\'accroisement migratoire : UE des 15 vs EU', legend: 'always', ylabel: 'Taux de migranon', axislabelfontsize: 12, axislinecolor: 'navy', axislinewidth: 0.5, valuerange: [- 1,7], yaxislabelwidth : 32, pixelsperlabel: 30, strokewidth: 2, colors: ['#FF5555', 'navy'], gridlinewidth: 0.2 }; Style des courbes et de la grille strokewidth: 2, colors: ['#FF5555', 'navy'], gridlinewidth: 0.2
52 Dygraphs Actualiser une courbe Sans interroger le serveur <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
53 Dygraphs Actualiser une courbe Sans interroger le serveur funcnon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; JS 3 } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
54 Dygraphs Actualiser une courbe Sans interroger le serveur funcnon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; JS 6 } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
55 Dygraphs Actualiser une courbe Sans interroger le serveur funcnon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; JS [3, 6] } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
56 Dygraphs Actualiser une courbe Sans interroger le serveur JS funcmon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; graph.updateopmons( { 'file': donnees } ) ; } Dygraphs donnees = [ [0, 5], [1, 3], [2, 7], [3, 6] ] <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
57 Dygraphs Actualiser une courbe Sans interroger le serveur JS funcmon majcourbe() { donnees.push( [ donnees.length, Math.random()*10 ] ) ; graph.updateopnons( { 'file': donnees } ) ; } Dygraphs > 250 appels de majcourbe() <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
58 Dygraphs Actualiser une courbe Suppression du premier point du graphique funcmon majcourbe() { } donnees.push( [ i++, Math.random()*10 ] ) ; if (donnees.length > 100) { donnees.shi\() ; JS } graph.updateopnons( { 'file': donnees } ) ; <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var i = donnees.length; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
59 Dygraphs Actualiser une courbe Suppression du premier point du graphique funcmon majcourbe() { } donnees.push( [ i++, Math.random()*10 ] ) ; if (donnees.length > 100) { donnees.shi\() ; JS } graph.updateopnons( { 'file': donnees } ) ; > 250 appels de majcourbe() <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var i = donnees.length; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
60 Dygraphs Actualiser une courbe Suppression du premier point du graphique funcmon majcourbe() { } donnees.push( [i++, Math.random()*10 ] ) ; if (donnees.length > 100) { donnees.shi\() ; JS } graph.updateopnons( { 'file': donnees } ) ; > 250 appels de majcourbe() donnees = [ [0, 5], [1, 3],, [100, 2] ] <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var i = donnees.length; var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, donnees, opnons) ; setinterval(majcourbe, 1000) ; </script>
61 Dygraphs Actualiser une courbe : fichier CSV En interrogeant le serveur (Ajax) JS Script <script type="text/javascript"> var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, 'datacsv.php', opnons) ; setinterval(majcourbe, 1000) ; </script>
62 Dygraphs Actualiser une courbe : fichier CSV En interrogeant le serveur (Ajax) Dygraphs funcmon majcourbe() { graph.updateopnons( { 'file': 'datacsv.php'} ) ; } <script type="text/javascript"> var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, 'datacsv.php', opnons) ; setinterval(majcourbe, 1000) ; </script>
63 Dygraphs Actualiser une courbe : fichier CSV En interrogeant le serveur (Ajax) Dygraphs funcmon majcourbe() { graph.updateopnons( { 'file': 'datacsv.php'} ) ; } <script type="text/javascript"> var conteneur = document.getelementbyid('graphique') ; var opnons = {drawpoints: true} ; var graph = new Dygraph(conteneur, 'datacsv.php', opnons) ; setinterval(majcourbe, 1000) ; </script> Si trop de données Utiliser format JSON
64 Dygraphs Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) JS <script type='text/javascript' src='jquery.min.js'></script> [3, 6] Script <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
65 Dygraphs Actualiser une courbe : format JSON En interrogeant le serveur (Ajax avec jquery) funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcnon(data) { } } ) ; } <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
66 Dygraphs Actualiser une courbe : format JSON funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcnon(data) { } En interrogeant le serveur (Ajax avec jquery) } ) ; } data [3, 6] PHP <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
67 Dygraphs Actualiser une courbe : format JSON funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcmon(data) { donnees.push(data) ; } En interrogeant le serveur (Ajax avec jquery) } ) ; } JS [3, 6] PHP <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
68 Dygraphs Actualiser une courbe : format JSON funcmon majcourbe() { $.ajax ( { jquery type: 'POST', url: 'datajson.php', datatype: 'json', success: funcmon(data) { JS donnees.push(data) ; graph.updateopmons( {'file': donnees } ) ; } } ) ; } En interrogeant le serveur (Ajax avec jquery) Dygraphs donnees = [ [0, 5], [1, 3], [2, 7], [3, 6] ] <script type="text/javascript"> var donnees = [ [0, 5], [1, 3], [2, 7] ] ; var conteneur = document.getelementbyid('graphique') ; var graph = new Dygraph(conteneur, donnees) ; setinterval(majcourbe, 1000) ; </script>
69 Dygraphs Avantages et inconvénients Spécialisée dans les courbes Interactivité Fonctionnalités offertes Séries données denses Fichiers CSV Pérennité Elément HTML5 canvas Documentation, exemples Forge logicielle, communauté active, demandes d améliorations Développeur Facile 3 instructions pour graphique standard Pas besoin de connaître JS
70 Dygraphs Avantages et inconvénients Expérience utilisateur Aspect professionnel Consultation interactive Sécurité Côté client : JavaScript activé XSS Solution : filtrer les entrées et protéger les sorties Consommation des ressources Navigateur Bibliothèque minifiée < 100Ko Licence Open source (inclure la licence dans vos pages web) Aspect financier Gratuite Faible coût humain
71 Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts
72 RGraph CaractérisNques Visualisation interactive de graphiques (20 types supportés) Gratuit pour une utilisation non commerciale Utilise HTML5 canvas Très simple d utilisation Nombreuses options de configuration hup://
73 RGraph CaractérisNques Visualisation interactive de graphiques (20 types supportés) Gratuit pour une utilisation non commerciale Utilise HTML5 canvas Très simple d utilisation Nombreuses options de configuration Video qui montre l utilisation des annotations + menu contextuel hup://
74 1 RGraph <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> Courbe standard 1. Inclure les bibliothèques </head> </html>
75 1 RGraph <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> Courbe standard 1. Inclure les bibliothèques 2. Créer le bloc conteneur 2 </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html>
76 RGraph Courbe standard <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
77 RGraph Courbe standard <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique Diffère suivant type de graphique
78 RGraph Courbe standard <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
79 RGraph Courbe standard <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.mtle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
80 RGraph Courbe standard <!doctype html> <html> <head><ntle>rgraph</ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique
81 RGraph Courbe standard <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve
82 RGraph Courbe standard <!doctype html> <html> <head> <Ntle>Rgraph</Ntle> JS <script type='text/javascript' src='js/rgraph/rgraph.common.core.js'> </script> <script type='text/javascript' src='js/rgraph/rgraph.line.js'> </script> <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3,2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7, 3.75,4.2,4.8,4.4,4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2,6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4, 3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.ntle', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975)'); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> JS 1. Inclure les bibliothèques 2. Créer le bloc conteneur 3. Créer le graphique 4. Donner une solunon alternanve Configuration du graphique
83 RGraph Courbe standard Configuration minimale <script type='text/javascript'> window.onload = funcnon(){ var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,- 0.6,- 0.4,- 0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4,3.2,3.1,3.05,3,3]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.draw(); } </script> Taille réelle Configuration personnalisée
84 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html> 850px 250px
85 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html> 5px 35px
86 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html> 5px 35px
87 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
88 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> graphe.set('chart.annotatable', true); Interactivité <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
89 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
90 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
91 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
92 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript > window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
93 RGraph Courbe personnalisée <!doctype html> <html> <head> <title>test courbes RGraph</title> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.line.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.annotate.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.context.js' type='text/javascript'></script> <script type='text/javascript'> window.onload = function() { var data1 = [0.9,0.5,0.85,0.9,1.1,1.6,0.2,-0.6,-0.4,-0.45,0.4,0.7,0.5,1.5,2.3, 2.2,3.1,3.7,2.8,2,2.1,1.9,1.5,1.6,2.4,3.7,3.75,4.2,4.8,4.4, 4.1,3.9,4.2,3.7,2.2,2 ]; var data2 = [4,4.1,3.8,4.5,4.4,3.8,2.6,2.1,2.15,1.85,2.2,2.1,2.1,2.5,3.8,6.2, 6.2,5.8,5.5,5.6,5.9,6.1,5.7,5.8,4.1,4.2,4,3.95,3.8,3.6,3.4, 3.2,3.1,3.05,3,3 ]; var graphe = new RGraph.Line('graphique', data1, data2); graphe.set('chart.title', 'Taux d\'accroissement migratoire : UE des 15 vs EU (depuis 1975) ); graphe.set('chart.ymin',-1); graphe.set('chart.ymax',7); graphe.set('chart.gutter.left', 35); graphe.set('chart.hmargin', 5); graphe.set('chart.background.grid.autofit.numhlines', 5); graphe.set('chart.background.grid.autofit.numvlines', 17); graphe.set('chart.labels', [ '1975',,,,,'1980',,,,,'1985',,,,,'1990',,,,,'1995',,,,,'2000',,,,,'2005',,,,,'2010' ]); graphe.set('chart.linewidth', 4); graphe.set('chart.colors', [ 'red', 'green' ]); graphe.set('chart.curvy', true); graphe.set('chart.curvy.factor', 0.5); Interactivité graphe.set('chart.annotatable', true); graphe.set('chart.contextmenu', [ [ 'Voir la palette', RGraph.Showpalette ], [ 'Effacer les annotations', function() { RGraph.ClearAnnotations(graphe.canvas); RGraph.Clear(graphe.canvas); graphe.draw(); } ] ]); graphe.draw(); } </script> </head> <body> <canvas id='graphique' width='850' height='250'> contenu alternatif </canvas> </body> </html>
94 RGraph Diagramme à secteurs <!doctype html> <html> <head> <Ntle>test diagramme secteurs RGraph</Ntle> <script src='js/rgraph/rgraph.pie.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.core.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.dynamic.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.resizing.js' type='text/javascript'></script> <script src='js/rgraph/rgraph.common.toolmps.js' type='text/javascript'></script> <script type='text/javascript > window.onload = funcmon() { // créamon du graphique } </script> </head> <body> <canvas id='graphique' width='600' height='250'> <img src='image.php' alt='graphique alternanf'> </canvas> </body> </html> 1. Inclure les bibliothèques 2. Créer le graphique 3. Créer le bloc conteneur 4. Donner une solunon alternanve
95 RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); Création du graphique } graphe.draw();
96 RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js 400px window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); Conteneur Création du graphique graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.posimon.x', 400); } graphe.draw();
97 RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js 45px 15px window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.mtle', 'Dépense intérieure d\'éducation'); graphe.set('chart.guier.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317,'#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); Création du graphique } graphe.draw();
98 RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js RGraph.common.resizing.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.title', 'Dépense intérieure d\'éducation'); graphe.set('chart.gutter.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317', '#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); graphe.set('chart.resizable', true); Création du graphique Interactivité } graphe.draw();
99 RGraph Diagramme à secteurs Bibliothèques requises RGraph.pie.js RGraph.common.core.js RGraph.common.key.js RGraph.common.dynamic.js RGraph.common.resizing.js window.onload = function (){ var data = [38.5,57,27.2,9.5,2.6]; var graphe = new RGraph.Pie('graphique', data); graphe.set('chart.title', 'Dépense intérieure d\'éducation'); graphe.set('chart.gutter.top', 45); graphe.set('chart.key', ['Premier degré','second degré','supérieur', 'Formation continue','enseignement extra-scolaire']); graphe.set('chart.key.position.x', 400); graphe.set('chart.colors', ['#426F42', '#E47833','#5C3317', '#FCFAE1','#C81902']); graphe.set('chart.exploded', [0,0,15,0,0]); graphe.set('chart.resizable', true); Création du graphique Interactivité } graphe.draw();
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!
JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024
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
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Création de maquette web
Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte
Comment créer son propre monitoring. (Version simple PHP)
Comment créer son propre monitoring. (Version simple PHP) TUTORIELS Louis Foraux DROID CENTER HTTP://DROID CENTER.TK Table des matières Présentation du projet... 2 Crédits... 2 Utilisation... 2 Infos Utiles...
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
Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com
demo.minisites.encharentemaritime.com Insérer des photos Illustrez vos contenus en intégrant Depuis la barre d administration Vous pouvez télécharger des fichiers depuis votre ordinateur ou choisir des
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
TD : Codage des images
TD : Codage des images Les navigateurs Web (Netscape, IE, Mozilla ) prennent en charge les contenus textuels (au format HTML) ainsi que les images fixes (GIF, JPG, PNG) ou animée (GIF animée). Comment
DENOMINATION DU DOCUMENT : CAHIER DES CHARGES «MONITORING DOMOTIQUE» MOE : GROUPE 6 (SANOGO, AFFANE, DIALLO, N GOUAN, DJIMERA)
DENOMINATION DU DOCUMENT : CAHIER DES CHARGES DENOMINATION DU PROJET «MONITORING DOMOTIQUE» MOA : LAURENT AUDIBERT MOE : GROUPE 6 (SANOGO, AFFANE, DIALLO, N GOUAN, DJIMERA) EQUIPE DE SUIVI : LIONEL POURNIN
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
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
WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,
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
Serveurs de noms Protocoles HTTP et FTP
Nils Schaefer Théorie des réseaux (EC3a) Serveurs de noms Protocoles HTTP et FTP Théorie des réseaux (EC3a) Séance 7 Pourquoi DNS? Internet est une structure hiérarchique et arborescente de réseaux et
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
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
Initiation à linfographie
Ce support de cours de l Agence universitaire de la Francophonie est distribué sous licence GNU FDL. Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence
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
Technologies Web. Ludovic Denoyer Sylvain Lamprier Mohamed Amine Baazizi Gabriella Contardo Narcisse Nya. Université Pierre et Marie Curie
1 / 22 Technologies Web Ludovic Denoyer Sylvain Lamprier Mohamed Amine Baazizi Gabriella Contardo Narcisse Nya Université Pierre et Marie Curie Rappel 2 / 22 Problématique Quelles technologies utiliser
Créer des documents interactifs
Créer des documents interactifs 14 Au cours de cette leçon, vous apprendrez à : créer un document en ligne de base ; ajouter des boutons, des transitions de page et des hyperliens ; exporter au format
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
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
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
Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet
Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Présentation I. Echosgraphik Protocoles de travail I. Développement du site II.
Spécifications Techniques - Tablettes
Spécifications Techniques - Tablettes SOMMAIRE : Le Figaro ipad.3 Le Figaro Magazine ipad.16 Interstitiel Le Figaro / Safari IPAD... 20 Le Figaro Madame ipad. 22 Le Figaro GOLF ipad 24 Le Figaro Android
Réglages du portail de P&WC
Réglages du portail de P&WC Afin de régler votre navigateur Internet Explorer et de résoudre quelques problèmes spécifiques que les utilisateurs du portail de P&WC pourraient éprouver, nous vous recommandons
L3 informatique TP n o 2 : Les applications réseau
L3 informatique TP n o 2 : Les applications réseau Sovanna Tan Septembre 2009 1/20 Sovanna Tan L3 informatique TP n o 2 : Les applications réseau Plan 1 Transfert de fichiers 2 Le Courrier électronique
Traitement numérique de l'image. Raphaël Isdant - 2009
Traitement numérique de l'image 1/ L'IMAGE NUMÉRIQUE : COMPOSITION ET CARACTÉRISTIQUES 1.1 - Le pixel: Une image numérique est constituée d'un ensemble de points appelés pixels (abréviation de PICture
Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel
Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel Excel est un des meilleurs outils de manipulation de données et parfois il est nécessaire d exploiter des données
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
Exigences système Edition & Imprimeries de labeur
Exigences système Edition & Imprimeries de labeur OneVision Software France Sommaire Asura 9.5, Asura Pro 9.5, Garda 5.0...2 PlugBALANCEin 6.5, PlugCROPin 6.5, PlugFITin 6.5, PlugRECOMPOSEin 6.5, PlugSPOTin
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
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...
Informations générales. Technologies. css3-html5-php-ajax-j-query-mootools-action-script3
Pascal Gaudin Développeur WEB- php-mysql-javascript 04 67 56 81 51 06 69 39 20 54 al.gau@free.f Informations générales Titre Développeur php-mysql-javascript Ecole Brousse Mtpellier - Afpa Béziers Année
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
Applications KIP Cloud Guide de l utilisateur
Guide de l utilisateur Table des matières Configuration requise... 3 Configuration de l impression par le nuage (sans pilote)... 4 Configuration de l imprimante... 5 Impression par le nuage... 8 Onglet
Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?
![Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?](/thumbs/18/825045.jpg "Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?")
Aide [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers? Au sein d'un ordinateur, les données et les fichiers sont stockés suivant une structure d'arbre appelée arborescence. Pour
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
Introduction : présentation de la Business Intelligence
Les exemples cités tout au long de cet ouvrage sont téléchargeables à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence ENI de l'ouvrage RI3WXIBUSO dans la zone de recherche et validez.
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
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
(structure des entêtes)
Aide mémoire HTTP (structure des entêtes) Fabrice HARROUET École Nationale d Ingénieurs de Brest http://www.enib.fr/~harrouet/ enib 1/10 Structure générale d une requête Requête HTTP méthode ressource
FileMaker Server 12. publication Web personnalisée avec XML
FileMaker Server 12 publication Web personnalisée avec XML 2007-2012 FileMaker, Inc. Tous droits réservés. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 FileMaker et Bento sont
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
Jean-Pierre VINCENT Consultant indépendant
Techniques d accélération des pages Web Jean-Pierre VINCENT Consultant indépendant @theystolemynick Braincracking.org Bonjour, je m appelle Jean-Pierre 13 ans de Web PHP, JavaScript, HTML5, CSS Ex : startups,
FileMaker Server 11. Publication Web personnalisée avec XML et XSLT
FileMaker Server 11 Publication Web personnalisée avec XML et XSLT 2007-2010 FileMaker, Inc. Tous droits réservés. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, Californie 95054 FileMaker est une
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
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
ÉdIteur officiel et fournisseur de ServIceS professionnels du LogIcIeL open Source ScILab
ÉdIteur officiel et fournisseur de ServIceS professionnels du LogIcIeL open Source ScILab notre compétence d'éditeur à votre service créée en juin 2010, Scilab enterprises propose services et support autour
Canvas 3D et WebGL. Louis Giraud et Laetitia Montagny. 9 Avril 2013. Université Lyon 1
Canvas 3D et WebGL Louis Giraud et Laetitia Montagny Université Lyon 1 9 Avril 2013 1 Présentation du sujet Introduction Présentation du sujet Problématique : Représenter de la 3D dans le navigateur sans
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
Failles XSS : Principes, Catégories Démonstrations, Contre mesures
HERVÉ SCHAUER CONSULTANTS Cabinet de Consultants en Sécurité Informatique depuis 1989 Spécialisé sur Unix, Windows, TCP/IP et Internet Séminaire 15 ans HSC Failles XSS : Principes, Catégories Démonstrations,
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/
Développement des Systèmes d Information
Développement des Systèmes d Information Axe ISI Camille Persson Institut Fayol / LSTI / ISCOD École Nationale Supérieure des Mines de Saint-Etienne 158 cours Fauriel, 42000 Saint-Etienne persson@emse.fr
Chapitre 22 Optimisation pour diffusion à l'écran, pour le web
1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................
http://mondomaine.com/dossier : seul le dossier dossier sera cherché, tous les sousdomaines
Principales fonctionnalités de l outil Le coeur du service suivre les variations de position d un mot-clé associé à une URL sur un moteur de recherche (Google - Bing - Yahoo) dans une locale (association
S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i
Modernisation IBM i Nouveautés 2014-2015 IBM Power Systems - IBM i 19 et 20 mai 2015 IBM Client Center, Bois-Colombes S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Mardi
Application Web et J2EE
Application Web et J2EE Servlet, JSP, Persistence, Méthodologie Pierre Gambarotto Département Informatique et Math appli ENSEEIHT Plan Introduction 1 Introduction Objectfis
TP SIN Traitement d image
TP SIN Traitement d image Pré requis (l élève doit savoir): - Utiliser un ordinateur Objectif terminale : L élève doit être capable de reconnaître un format d image et d expliquer les différents types
Développement d applications Internet et réseaux avec LabVIEW. Alexandre STANURSKI National Instruments France
Développement d applications Internet et réseaux avec LabVIEW Alexandre STANURSKI National Instruments France Quelles sont les possibilités? Publication de données Génération de rapports et de documents
Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
4D Web 2.0 Pack DATA LIVES HERE. TM. Internet Riche et Solutions Mobiles en toute simplicité. 4D Ajax Framework 4D Ajax for Dreamweaver 4D for Flex
DATA LIVES HERE. TM 4D Web 2.0 Pack Internet Riche et Solutions Mobiles en toute simplicité 4D Ajax Framework 4D Ajax for Dreamweaver 4D for Flex *Faites vivre vos données 4D Web 2.0 Pack fournit aux développeurs
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...........................
Les images et les animations sur le web. Guérineau Chloé BTS2 Année 2001/2012
Les images et les animations sur le web Guérineau Chloé BTS2 Année 2001/2012 Sommaire I) Les images sur le web 1) Qu est ce qu une image? Les images numériques, destinées à être visualisées sur les écrans
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 à 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
Banque d images SVT. Créer et utiliser une banque d images avec Picasa 2. Version anglaise -Windows 98. Banque photo en SVT : page 1 /14
A..T C..G G..C A..T T..A C..G A..T T..A G..C G..C T..A A..T C..G Sciences de la Vie et de la Terre Lycée de la Venise Verte Banque d images SVT Créer et utiliser une banque d images avec Picasa 2 Version
Livret 1 Poste de travail de l utilisateur :
Manuel Utilisateur Mise à jour 04 Juin 2015 Livret 1 Poste de travail de l utilisateur : - pré-requis techniques - mise en conformité - connexion - impressions.pdf Pour les utilisateurs des compléments
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...
Exigences système Edition & Imprimeries de labeur
Exigences système Edition & Imprimeries de labeur OneVision Software France Sommaire Asura 10.2, Asura Pro 10.2, Garda 10.2...2 PlugBALANCEin10.2, PlugCROPin 10.2, PlugFITin 10.2, PlugRECOMPOSEin 10.2,
On trouvera sur le site du CCDMD un exemple d album construit avec Cantare. (http://www.ccdmd.qc.ca/ri/cantare)
Cantare 2 Introduction L outil logiciel Cantare s adresse à toute personne qui veut construire des leçons visant l apprentissage d une langue par l écoute de chansons ou de fichiers sonores dont les paroles
GUIDE DE DÉMARRAGE. SitagriPro Infinite FINANCEAGRI. Un service. c o r p o r a t e
GUIDE DE DÉMARRAGE SitagriPro Infinite Un service FINANCEAGRI c o r p o r a t e SOMMAIRE ÉTAPE 1 : Installation... p.3 1. Introduction 2. Connexion à SitagriPro Infinite ÉTAPE 2 : Identification... p.5
<Insert Picture Here>ApExposé. Cédric MYLLE 05 Février 2008. Exposé Système et Réseaux : ApEx, Application Express d Oracle
ApExposé Cédric MYLLE 05 Février 2008 Exposé Système et Réseaux : ApEx, Application Express d Oracle Sommaire Introduction Les besoins L outil ApEx Le développement d applications
IPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION
IPHONE BANNIÈRE CLASSIQUE DIMENSIONS Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION Format publicitaire très répandu et simple Permet une présence
Pilote KIP certifié pour AutoCAD. Guide de l utilisateur État de l imprimante KIP
Pilote KIP certifié pour AutoCAD Guide de l utilisateur État de l imprimante KIP Table des matières Introduction... 2 Fonctions... 2 Installation et configuration requise... 3 Configuration requise...
Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement
Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.
Avertissement. La Gestion Electronique de Documents
Sommaire Les plus de GEDExpert... p 1.3 Mise en place Fichiers de bases... p 1.4 Mise en place Plan de classement... p 1.8 La fiche dossier... p 1.13 L acquisition de documents... p 1.19 Les liens avec
Formats de fichiers adaptés à l'archivage électronique à moyen et long terme
RÉPUBLIQUE ET CANTON DE GENÈVE Archives d'etat Formats de fichiers adaptés à l'archivage électronique à moyen et long terme Version Date Objet de la version 1.0 19.10.2011 Document validé par le Collège
FileMaker Server 14. Guide de démarrage
FileMaker Server 14 Guide de démarrage 2007-2015 FileMaker, Inc. Tous droits réservés. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, Californie 95054 FileMaker et FileMaker Go sont des marques
Protection des protocoles www.ofppt.info
ROYAUME DU MAROC Office de la Formation Professionnelle et de la Promotion du Travail Protection des protocoles DIRECTION RECHERCHE ET INGENIERIE DE FORMATION SECTEUR NTIC Sommaire 1. Introduction... 2
BES WEBDEVELOPER ACTIVITÉ RÔLE
BES WEBDEVELOPER ACTIVITÉ Le web developer participe aux activités concernant la conception, la réalisation, la mise à jour, la maintenance et l évolution d applications internet/intranet statiques et
Utiliser le logiciel Photofiltre Sommaire
Utiliser le logiciel Photofiltre Sommaire 1. Quelques mots sur l image 2. Obtenir des images numériques 3. Le tableau de bord de logiciel PhotoFiltre 4. Acquérir une image 5. Enregistrer une image 6. Redimensionner
Utilisation avancée de SugarCRM Version Professional 6.5
Utilisation avancée de SugarCRM Version Professional 6.5 Document : Utilisation_avancee_SugarCRM_6-5.docx Page : 1 / 32 Sommaire Préambule... 3 I. Les rapports... 4 1. Les principes du générateur de rapports...
A5.2.4 Étude d une technologie, d'un composant, d'un outil
Assistance et dépannage des visiteurs : Etude des prérequis de glpi : A5.2.4 Étude d une technologie, d'un composant, d'un outil Sujet : Prérequis Tout ce qu'il faut savoir pour une installation confortable
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
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é
{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
Spécifications techniques
Infos pratiques Bon de commande: indication de réservation publicité Tablette + confirmation de livraison du matériel: envoyer à booking@trustmedia.be Matériel Papier: artwork@mediafin.be 2 jours ouvrables
Service On Line : Gestion des Incidents
Service On Line : Gestion des Incidents Guide de l utilisateur VCSTIMELESS Support Client Octobre 07 Préface Le document SoL Guide de l utilisateur explique comment utiliser l application SoL implémentée
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
Foire aux questions. C est un programme d exploitation et de recherche sur le Web. Exemple : Internet Explorer, Firefox, Opera et Netscape.
Foire aux questions Qu est-ce qu une adresse URL? L adresse URL identifie de façon unique une page Web. Exemple : http://www2.canoe.com/index.html (à ne pas confondre avec l adresse Web : www.canoe.com)
Table des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires...
Manuel utilisateur Table des matières 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5 1.2 Public visé... 5 1.3 Commentaires... 5 2 Généralités sur les applications web... 7 3 Module
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
4D Business Kit version 2.2 ADDENDUM
4D Business Kit version 2.2 ADDENDUM Bienvenue dans 4D Business Kit version 2.2. Ce document décrit les nouveautés et modifications proposées dans cette version. Ces nouveautés concernent les thèmes suivants
Soon_AdvancedCache. Module Magento SOON. Rédacteur. Relecture & validation technique. Historique des révisions
Module Magento SOON Soon_AdvancedCache Rédacteur Hervé G. Lead développeur Magento herve@agence-soon.fr AGENCE SOON 81 avenue du Bac 94210 LA VARENNE ST HILAIRE Tel : +33 (0)1 48 83 95 96 Fax : +33 (0)1
Formation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
POVERELLO KASONGO Lucien SIO 2, SISR SITUATION PROFESSIONNELLE OCS INVENTORY NG ET GLPI
POVERELLO KASONGO Lucien SIO 2, SISR SITUATION PROFESSIONNELLE OCS INVENTORY NG ET GLPI Contexte de la mission Suite à la multiplication des matériels et des logiciels dans les locaux de GSB, le service
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