Bibliothèques graphiques

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Bibliothèques graphiques"

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();

L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012.

L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012. L objectif de ce tutoriel est de créer un site web statique avec Visual Studio. Le site sera composé d une page HTML, une feuille de style CSS et d un fichier Javascript. Etape 1 Lancer Visual Studio L

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

Eclipse et quelques notions de Jquerry

Eclipse et quelques notions de Jquerry Eclipse et quelques notions de Jquerry Tout d abord, une petite présentation s impose. Eclipse est un outil de développement qui permet d éditer du code et de visualiser le résultat grâce à des émulateurs

Plus en détail

Master Class OL3 Documentation

Master Class OL3 Documentation Master Class OL3 Documentation Version 2.0 Éric Lemoine, Camptocamp 10 April 2014 Table des matières 1 Exercices élémentaires 3 1.1 Exercice élémentaire 1.......................................... 4 1.2

Plus en détail

TP JAVASCRIPT OMI4 jquery et ses Plungins

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

Plus en détail

CIM120. Http:// (Creation Web) Page 1

CIM120. Http:// (Creation Web) Page 1 CIM120 Http:// (Creation Web) Page 1 Organisation du module CIM120 Evaluation: 1 eval sur table 1 eval des TP Page 2 Le Web: un peu d'histoire D'Arpanet à Internet... http://fr.wikipedia.org/wiki/histoire_d'internet

Plus en détail

Java script. DU CMSI : Création et Maintenance des Sites Internet. Wadi TAHRI

Java script. DU CMSI : Création et Maintenance des Sites Internet. Wadi TAHRI Java script DU CMSI : Création et Maintenance des Sites Internet Plan Évolution vers le web dynamique Définition du langage JavaScript Avantages Difficultés Codage Exercices Évolution -1- Avant pages Internet

Plus en détail

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

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

Plus en détail

Table des matières. TP Ajax. Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion...

Table des matières. TP Ajax. Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion... Table des matières Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion...7 Bibliographie : http://fr.wikipedia.org/wiki/asynchronous_javascript_and_xml

Plus en détail

AP3.2 : Javascript et la balise <canvas> Informatique et internet

AP3.2 : Javascript et la balise <canvas> Informatique et internet STI2D Option SIN Terminale AP3.2 : Javascript et la balise Informatique et internet Durée prévue : 3h. Problématique : réalisation de pages web utilisant la balise Compétences visées

Plus en détail

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2 LIRMM Université Montpellier 2 May 13, 2009 Quelques clés de compréhension Asynchronous JavaScript And XML (adossé à JavaScript comme à XML) 2005, J.Garret, popularité accrue au travers de quelques applications

Plus en détail

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Objectifs Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

La balise <canvas> 3T61U1EW savoir rédiger pour le multimédia. Jérôme Landré jerome.landre@univ-reims.fr bureau C203 (GMP) bureau H110 (MMI)

La balise <canvas> 3T61U1EW savoir rédiger pour le multimédia. Jérôme Landré jerome.landre@univ-reims.fr bureau C203 (GMP) bureau H110 (MMI) La balise 3T61U1EW savoir rédiger pour le multimédia Jérôme Landré jerome.landre@univ-reims.fr bureau C203 (GMP) bureau H110 (MMI) Licence professionnelle Métiers de l'internet et du Multimédia

Plus en détail

L image numérique. Bitmap (ou matricielle) vectorielle

L image numérique. Bitmap (ou matricielle) vectorielle L image numérique Bitmap (ou matricielle) vectorielle L image Bitmap (ou matricielle) L image est considérée comme un rectangle constitué de points élémentaires appelés pixels. Elle permet la qualité photographique

Plus en détail

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document Examen d'informatique module INF112 1ère session 2003-2004 sans calculatrice, sans document Le barème est indicatif Sauf indiqué contraire, dans les questions à choix multiples, il peut (ou non) y avoir

Plus en détail

DOSSIER D'ACTIVITES SUR LE PHP N 07 Supprimer des données d'une base de données

DOSSIER D'ACTIVITES SUR LE PHP N 07 Supprimer des données d'une base de données DOSSIER D'ACTIVITES SUR LE PHP N 07 Supprimer des données d'une base de données Objectifs : Apprendre à l apprenant à lancer un serveur local «Apache» Apprendre à l'apprenant à lancer un serveur MySQL

Plus en détail

SHADERS. Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 4 novembre 2015 INF5071 - Infographie

SHADERS. Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 4 novembre 2015 INF5071 - Infographie CHAPITRE 8 SHADERS Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 4 novembre 2015 INF5071 - Infographie INTRODUCTION Les shaders sont des programmes qui indiquent à

Plus en détail

Créer un document multimédia avec SMIL

Créer un document multimédia avec SMIL Créer un document multimédia avec SMIL Sébastien Laborie Sebastien.Laborie@iutbayonne.univ-pau.fr http://slaborie.perso.univ-pau.fr 1 Sébastien Laborie Créer un document multimédia avec SMIL XML : extensible

Plus en détail

LES TABLEAUX. Créer un tableau élémentaire

LES TABLEAUX. Créer un tableau élémentaire LES TABLEAUX Il y a deux façons de créer dans un article : directement dans SPIP pour des tableaux élémentaires avec un éditeur html pour des tableaux complexes. Créer un tableau élémentaire Les colonnes

Plus en détail

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr Cours HTML/PHP E.Coquery emmanuel.coquery@liris.cnrs.fr Pages Web Pages Web statiques Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis son navigateur. Adresse tapée, clic

Plus en détail

Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web

Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web IUT d Arles LP ATC/CA 2010-2011 Objectifs : Inclure dans une page web du code ou un fichier d'indirection

Plus en détail

NFA016 : Les formulaires. Les formulaires. Les formulaires (exemple)

NFA016 : Les formulaires. Les formulaires. Les formulaires (exemple) O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Les balises: NFA016 : Les formulaires Les formulaires form : début de formulaire input : différents types de bouton et zone de saisie textarea

Plus en détail

Travaux pratiques de M2105 Web dynamique

Travaux pratiques de M2105 Web dynamique Travaux pratiques de M2105 Web dynamique L objectif des séances de TP du module M2105 est de créer un mini site web d annuaire permettant à différents utilisateurs de gérer leurs contacts. Les informations

Plus en détail

M2202 Algorithmique TD 5 : Une bannière animée interactive

M2202 Algorithmique TD 5 : Une bannière animée interactive M2202 Algorithmique TD 5 : Une bannière animée interactive Nous verrons dans ce TD comment : enchainer une suite d'images en fondu dans une bannière ; afficher une image spécifique de cette bannière par

Plus en détail

PARTENARIAT ICI FORMATION

PARTENARIAT ICI FORMATION PARTENARIAT ICI FORMATION Guide d installation de la vignette ICI Formation sur un site partenaire SOMMAIRE Le Partenariat ICI Formation... 3 Script de partenariat ICI Formation... 3 Génération de l'aperçu

Plus en détail

Modélisation et interopérabilité : Semaine 40, cours 3

Modélisation et interopérabilité : Semaine 40, cours 3 Modélisation et interopérabilité : Semaine 40, cours 3 Benoît Valiron http://inf356.monoidal.net/ 1 Question pratique : Evaluation Trois choses : Un examen final (coef 2/3)

Plus en détail

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS CODE COMPLET ET COMMENTÉ DE L INTERFACE TABLE DES MATIÈRES 1.

Plus en détail

http://deptinfo.unice.fr/~renevier/progwebserveur Intervenants : Elena Cabrio, Guillaume Perez, Philippe Renevier Gonin

http://deptinfo.unice.fr/~renevier/progwebserveur Intervenants : Elena Cabrio, Guillaume Perez, Philippe Renevier Gonin http://deptinfo.unice.fr/~renevier/progwebserveur Intervenants : Elena Cabrio, Guillaume Perez, Philippe Renevier Gonin Philippe.Renevier@unice.fr Introduction à la programmation côté serveur avec php

Plus en détail

Technologies du Web. Phases de travail Objectifs Activités

Technologies du Web. Phases de travail Objectifs Activités Technologies du Web Tutoriel 1 : «Structurer une page Web» PROBLEMATIQUE Créer la structure d une page Web avec un éditeur de texte. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs

Plus en détail

Création d une rubrique du Site Web de l établissement.

Création d une rubrique du Site Web de l établissement. Création d une rubrique du Site Web de l établissement. 0 Ouvrir la page Publisher contenant la famille concernant le jeu Besoin/objet technique et leur histoire que vous avez réalisé. Sélectionner la

Plus en détail

Développement Partie Cliente

Développement Partie Cliente ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1 ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété

Plus en détail

ART OSE Catalogue Année 2003/2004 DEVELOPPEMENT ACCESS BASE. Comprendre les bases de données relationnelles, structurer et gérer une base de données

ART OSE Catalogue Année 2003/2004 DEVELOPPEMENT ACCESS BASE. Comprendre les bases de données relationnelles, structurer et gérer une base de données ACCESS BASE Comprendre les bases de données relationnelles, structurer et gérer une base de données Connaissances d un logiciel, Word, Excel, ou autre 1. Introduction aux bases de données relationnelles

Plus en détail

Dom, XML, Lecture de fichiers

Dom, XML, Lecture de fichiers Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle

Plus en détail

Les images en informatique

Les images en informatique Partie 1 Les images en informatique Anne GEDDES 1 I. Les catégories d images Il existe 2 catégories d images : Les images vectorielles Les images bitmap (ou images raster) 2 A. Les images vectorielles

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

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

Plus en détail

Séance d Exercices Dirigés HTML et JavaScript

Séance d Exercices Dirigés HTML et JavaScript Séance d Exercices Dirigés HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: 2) Par la suite on veut un document composé de deux frames, l'une nommée

Plus en détail

Formulaire de contact avec Xtreme Web Designer

Formulaire de contact avec Xtreme Web Designer Formulaire de contact avec Xtreme Web Designer Pour faire un formulaire avec Xtreme Web Designer, j'utilise 5 pages, vous n'êtes pas obligé, en effet 2 pages peuvent suffir mais c'est moins jolie. Donc

Plus en détail

PHP. Olivier Aubert 1/24

PHP. Olivier Aubert 1/24 PHP Olivier Aubert 1/24 Introduction PHP = Hypertext PreProcessor Site officiel : http://www.php.net Créé en 1994 par Rasmus Lerdorf (Personal Home Page Tool) 1995 : ajout de la gestion des formulaires

Plus en détail

IceCube.Net. Explicatif technique. Version 1.0

IceCube.Net. Explicatif technique. Version 1.0 IceCube.Net Explicatif technique Version 1.0 Structure IceCube.Net IceCube.Net est structurée de la même manière que des serveurs de type Solaris/Unix soit l arborescence suivante : ROOT _bin _htdocs _scripts

Plus en détail

Manuel d utilisation de la personnalisation avancée des pages web

Manuel d utilisation de la personnalisation avancée des pages web Manuel d utilisation de la personnalisation avancée des pages web Version 1.B Payline PROPRIETAIRE Page 1/15 Version du modèle : DocStd_50 Page des évolutions Le tableau ci-dessous liste les dernières

Plus en détail

- Créer, enregistrer et mettre en forme la page d'index. Modifier les propriétés de la page. L'afficher dans le navigateur

- Créer, enregistrer et mettre en forme la page d'index. Modifier les propriétés de la page. L'afficher dans le navigateur Digital et Web : HTML - Devenir Web Master Sessions Mars Avril Mai Digital et Web : HTML - Devenir Web Master Public & pré-requis Toute personne ayant une bonne connaissance de l'internet Maîtriser l'environnement

Plus en détail

DNDI / Web & Documents

DNDI / Web & Documents DNDI / Web & Documents Cours 1 23/11/15 Pierre Châtel-Innocenti Labo Paragraphe/CITU 1 Dans ce cours Création de document Diffusion de document Papier Electronique Télématique Internet Mobile Fichiers

Plus en détail

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration statiques LIF4 - Initiation aux Bases de données : E.Coquery emmanuel.coquery@liris.cnrs.fr http ://liris.cnrs.fr/ ecoquery Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis

Plus en détail

Exercices et corrections. Licence QCI - module O21

Exercices et corrections. Licence QCI - module O21 Exercices et corrections Licence QCI - module O21 Exercice 1 Ecrivez le squelette d une page avec les caractéristiques suivantes - encodage : utf-8 - titre de la page : première page XHTML - auteur : vous

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

Plus en détail

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

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

Créer un modèle pour Joomla 1.5

Créer un modèle pour Joomla 1.5 Créer un modèle pour Joomla 1.5 Dans le dossier templates de Joomla, créer un nouveau dossier au nom du modèle (lettres-chiffres-tirets, éviter caractères accentués et spéciaux) Dans ce dossier template/nom_du_modèle,

Plus en détail

https://angularjs.org/ Gilles Landais -AngularJS 1

https://angularjs.org/ Gilles Landais -AngularJS 1 https://angularjs.org/ 1 Présentation Le Framework AngularJS https://angularjs.org/ Framework javascript depuis 2009 Aujourd'hui (wikipedia) le framework est utilisé dans >8,400/1,000,000 sites web Open-source

Plus en détail

Programmation Web Avancée JQuery

Programmation Web Avancée JQuery 1/27 Programmation Web Avancée JQuery Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017

Plus en détail

Tutoriel sur les bases de HTML et de PHP

Tutoriel sur les bases de HTML et de PHP Tutoriel sur les bases de HTML et de PHP Cours : Inf7214 Développement de logiciel Date : Hiver 2009 Ce tutoriel vous donne un aperçu du développement d application WEB avec les langages HTML et PHP. Vous

Plus en détail

Représenter les images

Représenter les images Représenter les images 4/1/01 1 Travail La séance de travail du 4/1 consiste à travailler l ensemble de ce document Les résolutions des exercices 3 et 11 sont à déposer dans les casiers numériques de vos

Plus en détail

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!

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

Plus en détail

Apprendre à développer avec JavaScript

Apprendre à développer avec JavaScript Présentation du langage JavaScript 1. Définition et rapide historique 11 2. Pré-requis pour un apprentissage aisé du langage 13 3. Outillage nécessaire 14 4. Positionnement du JavaScript face à d autres

Plus en détail

Documentation G4EX (Graphs for EXperiments)

Documentation G4EX (Graphs for EXperiments) Documentation G4EX (Graphs for EXperiments) G4EX version 0.2 14 mai 2013 Auteurs : Emile GENNARI, Vincent NEGRE, Anne TIREAU INRA Centre de Montpellier Note : Ce logiciel fait partie du meta-projet SILEX

Plus en détail

L environnement multi fenêtré

L environnement multi fenêtré Interffaces pour le Web L environnement multi fenêtré Une application s exécutant dans le cadre d un browser Web démarre généralement depuis un lien hypertexte ou un signet stocké dans le bookmark. La

Plus en détail

MEGA Common Features. Guide d utilisation

MEGA Common Features. Guide d utilisation MEGA Common Features Guide d utilisation MEGA 2009 SP5 R7 1ère édition (juillet 2012) Les informations contenues dans ce document pourront faire l objet de modifications sans préavis et ne sauraient en

Plus en détail

HTTP et le Web. 2010 Pearson France Perl moderne Sébastien Aperghis-Tramoni, Damien Krotkine, Jérôme Quelin

HTTP et le Web. 2010 Pearson France Perl moderne Sébastien Aperghis-Tramoni, Damien Krotkine, Jérôme Quelin 21 HTTP, le protocole de transfert à la base du Web est devenu omniprésent. Parce qu il est le seul protocole dont il est quasi certain qu il passera à travers les proxies et les firewalls, celui-ci est

Plus en détail

4D Live Window. Plug-in Navigateur Web Windows /Mac OS. 4 ème Dimension 1985-2007 4D SAS. Tous droits réservés.

4D Live Window. Plug-in Navigateur Web Windows /Mac OS. 4 ème Dimension 1985-2007 4D SAS. Tous droits réservés. Plug-in Navigateur Web Windows /Mac OS 4 ème Dimension 1985-2007 4D SAS. Tous droits réservés. Pour Windows et Mac OS Copyright 1985-2007 4D SAS / 4D, Inc. Tous droits réservés Le logiciel et le manuel

Plus en détail

Qu'est-ce qu'un Web Service?

Qu'est-ce qu'un Web Service? WEB SERVICES Qu'est-ce qu'un Web Service? Un Web Service est un composant implémenté dans n'importe quel langage, déployé sur n'importe quelle plate-forme et enveloppé dans une couche de standards dérivés

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

LES IMAGES NUMÉRIQUES

LES IMAGES NUMÉRIQUES LES IMAGES NUMÉRIQUES On désigne sous le terme d'image numérique toute image (dessin, icône, photographie ) acquise, créée, traitée ou stockée sous forme binaire (ensemble de 0 et de 1). On distingue deux

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-20859 & SCG-66408 HTML & CSS Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques Québec, Canada {Thierry.Badard;

Plus en détail

DESSINER AVEC HTML5 OBJET CANVAS Images statiques première partie

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

Plus en détail

Langage (X)HTML Damien Nouvel

Langage (X)HTML Damien Nouvel Langage (X)HTML Plan Quelques statistiques du web Architecture client / serveur Langage XML Mise en forme HTML Structure d'un document HTML 2 / 36 Plan Quelques statistiques du web Architecture client

Plus en détail

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML PROGRAMMATION HTML Baccalauréat S -Spécialité ISN 4.3 : Langages de programmation : langage HTML Objectifs L'élève doit être capable o de créer une page WEB en langage HTML o d'analyser une page WEB en

Plus en détail

TECHNIQUE DE CONSTRUCTION D UN MODULE

TECHNIQUE DE CONSTRUCTION D UN MODULE TECHNIQUE DE CONSTRUCTION D UN MODULE Pilotage Infographie Description générale Romuald LORTHIOIR Stéphane RIO Aurélie PASSILLY Date de création du document 20 nov. 2006 Version 1.1 Validation pour le

Plus en détail

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

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

Plus en détail

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a Plateforme Systempay v1.24 Personnalisation avancée de la page paiement Version 1.2a Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network

Plus en détail

Exemples de DTD XML pour les interfaces homme-machine JMF

Exemples de DTD XML pour les interfaces homme-machine JMF Exemples de DTD XML pour les interfaces homme-machine 1 Introduction XML utilisé pour les IHM Plusieurs DTD : SMIL, SVG, X3D Evidemment du texte (XML) balisé 2 SMIL (pronounced "smile") 3 4 Présentation

Plus en détail

TD/TP11 - Réseaux. Question : Représenter le protocole téléphonique sous la forme d un diagramme temporel.

TD/TP11 - Réseaux. Question : Représenter le protocole téléphonique sous la forme d un diagramme temporel. Université de Bretagne Occidentale UFR Sciences Département d Informatique Licence STS, 2005-2006 L1, S1, Parcours A-IMP Introduction à l informatique TD/TP11 - Réseaux 1 Travaux Dirigés Exercice 1 Des

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery Programmation web AJAX Jean-Christophe Dubacq IUT de Villetaneuse S3 2013 AJAX A Jean-Christophe Dubacq (IUTV) Programmation web S3 2013 1 / 33 Le modèle classique Jean-Christophe Dubacq (IUTV) Programmation

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

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

Plus en détail

Déroulement. Conception de Sites Web dynamiques. 2 ème année en général. Conception de Sites Web 28/01/2010. Cours 1+2

Déroulement. Conception de Sites Web dynamiques. 2 ème année en général. Conception de Sites Web 28/01/2010. Cours 1+2 Déroulement Conception de Sites Web dynamiques Cours 1+2 Patrick Reuter http://www.labri.fr/~preuter/cswd2010 CM vendredi de 8h00 à 9h00 (Amphi Bât. E 3ème) TD - Groupe 1 : vendredi, 9h00 10h30 (R1-14)

Plus en détail

XML - Semaine 6. XML - Semaine 6. Pierre Nerzic. février-mars 2016. 1 / 42 Pierre Nerzic

XML - Semaine 6. XML - Semaine 6. Pierre Nerzic. février-mars 2016. 1 / 42 Pierre Nerzic XML - Semaine 6 Pierre Nerzic février-mars 2016 1 / 42 Pierre Nerzic Le cours de cette semaine présente l API XML DOM permettant de produire et traiter un document XML : Principes, Création et modification

Plus en détail

Logiciel de gestion d imprimante

Logiciel de gestion d imprimante Cette rubrique aborde notamment les aspects suivants : «Utilisation du logiciel CentreWare», page 3-10 «Utilisation des fonctions de gestion de l imprimante», page 3-12 Utilisation du logiciel CentreWare

Plus en détail

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau.

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau. Ajax IUT de Fontainebleau 1 er mars 2015 Sommaire Introduction 1 Introduction 2 3 4 Sommaire Introduction 1 Introduction 2 3 4 Introduction AJAX se base sur l objet JavaScript XMLHttpRequest qui permet

Plus en détail

Chapitre 2: Présentation de Flex. Développer une application avec Adobe Flex 2.0

Chapitre 2: Présentation de Flex. Développer une application avec Adobe Flex 2.0 Chapitre 2: Présentation de Flex Développer une application avec Adobe Flex 2.0 Thèmes Comprendre l émergence des applications dynamiques pour Internet Présentation de Flex Développer des applications

Plus en détail

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

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

Plus en détail

1. Introduction. 2. Objectifs de la réalisation. 3. Analyse de besoins

1. Introduction. 2. Objectifs de la réalisation. 3. Analyse de besoins 1. Introduction Le travail consiste à concevoir et à élaborer un dispositif de formation à distance, qui va au-delà de simples pages web statiques. On a choisi de faire appel à tout un module d apprentissage

Plus en détail

A6 - HTTP ESIROI 2014-2015

A6 - HTTP ESIROI 2014-2015 A6 - HTTP ESIROI 2014-2015 HTTP HyperText Transfer Protocol Protocole synchrone 3 version : HTTP/0.9 (obsolète) HTTP/1.0 (rare) HTTP/1.1 HTTP - fonctionnement Requête Réponse Icones : http://www.visualpharm.com/

Plus en détail

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

Plus en détail

MAGICA THEME PRESTASHOP RESPONSIVE. Compatible avec toutes les versions PRESTASHOP 1.6

MAGICA THEME PRESTASHOP RESPONSIVE. Compatible avec toutes les versions PRESTASHOP 1.6 MAGICA THEME PRESTASHOP RESPONSIVE MAGICA a été réalisé par PRESTA-THEME Compatible avec toutes les versions PRESTASHOP 1.6 MAGICA est facilement installable depuis votre back-office PRESTASHOP et compatible

Plus en détail

de survie du chef de projet

de survie du chef de projet KIT de survie du chef de projet 01 1 2 3 4 5 6 04 03 07 07 03 03 LE SERVEUR LE CLIENT TECHNOLOGIE WEB CLIENT LE SERVEUR WEB TECHNIQUES & CADRE DE TRAVAIL APPLICATIONS 101 LE SERVEUR Un serveur informatique

Plus en détail

[ Hornet ] Développement Hornet

[ Hornet ] Développement Hornet [ Hornet ] v1.0 vers v2.0 Cette création est mise à disposition selon le Contrat Paternité - Pas d'utilisation Commerciale - Partage des Conditions Initiales à l'identique disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/

Plus en détail

Olympiades québécoises 2014. Projet : 17 Conception de sites Web / Secondaire et post-secondaire

Olympiades québécoises 2014. Projet : 17 Conception de sites Web / Secondaire et post-secondaire Olympiades québécoises 2014 Projet : 17 Conception de sites Web / Secondaire et post-secondaire Le concours provincial de développement de site Web 2014 de Compétences Québec comporte trois modules. Le

Plus en détail

Installation d un proxy web sous ISA server 2006

Installation d un proxy web sous ISA server 2006 Installation d un proxy web sous ISA server 2006 ISA Server est une passerelle de sécurité qui intègre un proxy (anciennement Proxy Server), un firewall et une gestion des VPN. Plus d info sont disponible

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Applets JAVA Jean-Michel FOLLIN jmfollin@univ-lr.fr 1 Extension des fonctionnalités

Plus en détail

Union sociale pour l'habitat

Union sociale pour l'habitat Union sociale pour l'habitat Guide Utilisateur - Organisme, - : 04 72 76 02 30 - : 04 72 76 02 39 SAS PHENIX ENGINEERING 352 200 844 RCS LYON SAS au capital de 637.648 PHENIX ENGINEERING Union sociale

Plus en détail

Présentation d UnivAbsences Par MONJAL Guillaume, LAURENT Corentin, RAFAILLAC Maxime, RAOULT Benoit

Présentation d UnivAbsences Par MONJAL Guillaume, LAURENT Corentin, RAFAILLAC Maxime, RAOULT Benoit Gestion des absences de l Université d Angers Présentation d UnivAbsences Par MONJAL Guillaume, LAURENT Corentin, RAFAILLAC Maxime, RAOULT Benoit 1 POURQUOI? Pourquoi ce sujet? Sans ce projet Gestion des

Plus en détail

NORMES TECHNIQUES 2010

NORMES TECHNIQUES 2010 NORMES TECHNIQUES 2010 -> L'offre Display : Mega bannière - Skyscraper- Pavés -> Offre Display : les formats -> Offre Display : les livrables -> Publi rédactionnel -> Accueil Panoramique -> Habillage du

Plus en détail

Tutoriel pour l introduction à l animation en HTML5 et JavaScript

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

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

Optimiser les performances d un site web. Nicolas Chevallier Camille Roux

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

Plus en détail

Comment extraire l information de pages web

Comment extraire l information de pages web Comment extraire l information de pages web Zhentao Li École Normale Supérieure 2 avril 2014 Zhentao Li (École Normale Supérieure) Comment extraire l information de pages web 2 avril 2014 1 / 11 Extraire

Plus en détail

Programmation du Web : Présentation du protocole HTTP

Programmation du Web : Présentation du protocole HTTP Programmation du Web : Présentation du protocole HTTP Jean-Baptiste Vioix (jean-baptiste.vioix@iut-dijon.u-bourgogne.fr) IUT de Dijon-Auxerre - LE2I http://jb.vioix.free.fr 1-14 Présentation générale Le

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Format XML Jean-Michel FOLLIN jmfollin@univ-lr.fr Limitations HTML Limitations

Plus en détail

Introduction : présentation de la Business Intelligence

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.

Plus en détail

www.tech-tice.net : ATELIER IMAGE NUMÉRIQUE - LISTE DES COMPÉTENCES

www.tech-tice.net : ATELIER IMAGE NUMÉRIQUE - LISTE DES COMPÉTENCES www.tech-tice.net : ATELIER IMAGE NUMÉRIQUE - LISTE DES COMPÉTENCES COMPÉTENCE Indicateur Pré-requis informatique Je connais les unités de taille des objets et supports Octets, Mo, Go, To Je sais invoquer

Plus en détail