Introduction à la Simulation

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

Download "Introduction à la Simulation"

Transcription

1 ou comment créer votre premier jeu vidéo Jacques Duma

2 Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS

3 Page HTML : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «index.html» <html> </html>

4 Page HTML : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «index.html» <html> <head> </head> <body> </body> </html>

5 Page HTML : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «index.html» <html> <head> <title>jeu de Balle</title> </head> <body> </body> </html>

6 Page HTML : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «index.html» <html> <head> <title>jeu de Balle</title> </head> <body> <h1>balle Rebondissante</h1> </body> </html>

7 Page HTML : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «index.html» <html> <head> <title>jeu de Balle</title> </head> <body> <h1>balle Rebondissante</h1> <div> CADRE </div> </body> </html>

8 Page HTML : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «index.html» <html> <head> <title>jeu de Balle</title> </head> <body> <h1>balle Rebondissante</h1> <div> CADRE <div>balle</div> </div> </body> </html>

9 Feuille de styles en CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «style.css» h1 { color : blue ; }

10 Feuille de styles en CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «style.css» h1 { color : blue ; } #cadre { width : 500px ; height : 300px ; border : 4px black solid ; background-color : silver ; }

11 Feuille de styles en CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «style.css» h1 { color : blue ; } #cadre { width : 500px ; height : 300px ; border : 4px black solid ; background-color : silver ; position : fixed ; top : 75px ; left : 75px ; }

12 Feuille de styles en CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «style.css» h1 { color : blue ; } #cadre { width : 500px ; height : 300px ; border : 4px black solid ; background-color : silver ; position : fixed ; top : 75px ; left : 75px ; } #balle { width : 100px ; height : 100px ; background-color : red ; }

13 Feuille de styles en CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «style.css» h1 { color : blue ; } #cadre { width : 500px ; height : 300px ; border : 4px black solid ; background-color : silver ; position : fixed ; top : 75px ; left : 75px ; } #balle { width : 100px ; height : 100px ; background-color : red ; position : absolute ; top : 10px ; left : 10px ; }

14 Feuille de styles en CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS «style.css» h1 { color : blue ; } #cadre { width : 500px ; height : 300px ; border : 4px black solid ; background-color : silver ; position : fixed ; top : 75px ; left : 75px ; } #balle { width : 100px ; height : 100px ; background-color : red ; position : absolute ; top : 10px ; left : 10px ; } CADRE et BALLE supprimés du texte HTML

15 Lien entre HTML et CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS <html> <head> <title>jeu de Balle</title> </head> <body> <h1>balle Rebondissante</h1> <div> CADRE <div> BALLE </div> </div> </body> </html>

16 Lien entre HTML et CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <h1>balle Rebondissante</h1> <div> CADRE <div> BALLE </div> </div> </body> </html>

17 Lien entre HTML et CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <h1>balle Rebondissante</h1> <div id="cadre"> CADRE <div id="balle"> BALLE </div> </div> </body> </html>

18 Lien entre HTML et CSS : Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <h1>balle Rebondissante</h1> <div id="cadre"> </div> </body> </html> <div id="balle"> </div>

19 Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS HTML : HyperText Markup Language Langage à Balises pour l HyperTexte Balises pré-définies (tag) html, head, link, body, h1, div,... etc.

20 Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS HTML : HyperText Markup Language Langage à Balises pour l HyperTexte Balises pré-définies (tag) html, head, link, body, h1, div,... etc. Structure : Texte écrit entre deux balises de même nom <html> balise ouvrante... ici du Texte éventuellement encadré par d autres balises... </html> balise fermante

21 Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS HTML : HyperText Markup Language Langage à Balises pour l HyperTexte Balises pré-définies (tag) html, head, link, body, h1, div,... etc. Structure : Texte écrit entre deux balises de même nom <html> balise ouvrante... ici du Texte éventuellement encadré par d autres balises... </html> balise fermante Liste Attribut-Valeur dans les balises ouvrantes <div id="balle">

22 CSS : Cascading Style Sheets Feuilles de style en cascade Aspect visuel souhaité Code source de la page HTML Feuille de Styles en CSS Géométrie des cases de texte : Le texte de chaque élément de la structure est affiché dans un rectangle paramétrable : height margin padding Texte border background-color color width #balle { width: 100px; height: 100px; background-color: red; position: absolute; top: 10px; left: 10px; }

23 Animation : Affichage image par image Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Une Animation consiste à changer périodiquement l image affichée (0, 0) x vecteur déplacement Balle (x, y) (dx, dy) y t = 0

24 Animation : Affichage image par image Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Une Animation consiste à changer périodiquement l image affichée (0, 0) x vecteur déplacement Balle (x, y) (dx, dy) t = dt y t = 0

25 Animation : Affichage image par image Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Une Animation consiste à changer périodiquement l image affichée (0, 0) x vecteur déplacement Balle (x, y) (dx, dy) t = dt t = 2dt y t = 0

26 Animation : Affichage image par image Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Une Animation consiste à changer périodiquement l image affichée (0, 0) x Balle vecteur déplacement (x, y) (dx, dy) t = dt t = 2dt t = 3dt y t = 0

27 Animation : Affichage image par image Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Une Animation consiste à changer périodiquement l image affichée (0, 0) x Balle vecteur déplacement (x, y) (dx, dy) t = dt t = 2dt t = 3dt y t = 0

28 Symétrie par rapport à un axe horizontal Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) x y mur bas

29 Symétrie par rapport à un axe horizontal Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) (dx, dy) x y mur bas

30 Symétrie par rapport à un axe horizontal Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) (dx, dy) x (dx, dy) y mur bas

31 Symétrie par rapport à un axe horizontal Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) (dx, dy) x (dx, dy) y mur bas

32 Symétrie par rapport à un axe vertical Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) x mur droit y

33 Symétrie par rapport à un axe vertical Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) x mur droit (dx, dy) y

34 Symétrie par rapport à un axe vertical Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) x mur droit (dx, dy) y ( dx, dy)

35 Symétrie par rapport à un axe vertical Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux (0, 0) x mur droit (dx, dy) y ( dx, dy)

36 Position, Vitesse, Temps, Mouvement Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Mouvement Le mouvement de la balle sur la page sera simulé par un affichage image par image

37 Position, Vitesse, Temps, Mouvement Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Mouvement Le mouvement de la balle sur la page sera simulé par un affichage image par image Temps Le temps écoulé entre deux images sera le nombre dt

38 Position, Vitesse, Temps, Mouvement Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Mouvement Le mouvement de la balle sur la page sera simulé par un affichage image par image Temps Le temps écoulé entre deux images sera le nombre dt Vitesse La vitesse est une variation de position par rapport au temps le déplacement sera représentée par le vecteur (dx, dy)

39 Position, Vitesse, Temps, Mouvement Animation Rebonds de la balle sur les murs horizontaux Rebonds de la balle sur les murs verticaux Mouvement Le mouvement de la balle sur la page sera simulé par un affichage image par image Temps Le temps écoulé entre deux images sera le nombre dt Vitesse La vitesse est une variation de position par rapport au temps le déplacement sera représentée par le vecteur (dx, dy) Position La position est représentée par les coordonnées (x, y)

40 JavaScript : Initialisation Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // initialisation lors du chargement de la page HTML div_balle = document.getelementbyid("balle") ;

41 JavaScript : Initialisation Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // initialisation lors du chargement de la page HTML div_balle = document.getelementbyid("balle") ; timer = setinterval(avancerballedunpas, dt) ;

42 JavaScript : Initialisation Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval // initialisation lors du chargement de la page HTML function init() { div_balle = document.getelementbyid("balle") ; timer = setinterval(avancerballedunpas, dt) ; }

43 JavaScript : Initialisation Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval function avancerballedunpas() {... } // initialisation lors du chargement de la page HTML function init() { div_balle = document.getelementbyid("balle") ; timer = setinterval(avancerballedunpas, dt) ; }

44 JavaScript : Animation de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel tous les dt milli secondes function avancerballedunpas() { }

45 JavaScript : Animation de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel tous les dt milli secondes function avancerballedunpas() { x = x + dx ; y = x + dy ; }

46 JavaScript : Animation de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel tous les dt milli secondes function avancerballedunpas() { x = x + dx ; y = x + dy ; if (x < 0 x > murdroit) { dx = -dx ; // rebond horizontal } }

47 JavaScript : Animation de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel tous les dt milli secondes function avancerballedunpas() { x = x + dx ; y = x + dy ; if (x < 0 x > murdroit) { dx = -dx ; // rebond horizontal } else if (y < 0 y > murbas) { dy = -dy ; // rebond vertical } }

48 JavaScript : Animation de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel tous les dt milli secondes function avancerballedunpas() { x = x + dx ; y = x + dy ; if (x < 0 x > murdroit) { dx = -dx ; // rebond horizontal } else if (y < 0 y > murbas) { dy = -dy ; // rebond vertical } else { // on change la position de la balle div_balle.style.left = x + "px" ; // left : 5px div_balle.style.top = y + "px" ; // top : 9px } }

49 JavaScript : Déclaration des variables Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval

50 JavaScript : Déclaration des variables Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval var x = 250 ; var y = 150 ; // balle au centre du cadre // 1/2*(largeur_cadre, hauteur_cadre)

51 JavaScript : Déclaration des variables Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval var x = 250 ; var y = 150 ; // balle au centre du cadre // 1/2*(largeur_cadre, hauteur_cadre) var dx = 5 ; // vecteur du mouvement de la balle var dy = 2 ; // par exemple (5, 2)

52 JavaScript : Déclaration des variables Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval var x = 250 ; var y = 150 ; // balle au centre du cadre // 1/2*(largeur_cadre, hauteur_cadre) var dx = 5 ; // vecteur du mouvement de la balle var dy = 2 ; // par exemple (5, 2) var murdroit = ; // largeur_cadre - largeur_balle var murbas = ; // hauteur_cadre - hauteur_balle

53 JavaScript : Déclaration des variables Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» var div_balle ; // <div> de la balle var timer ; // pour l animation avec setinterval var x = 250 ; var y = 150 ; // balle au centre du cadre // 1/2*(largeur_cadre, hauteur_cadre) var dx = 5 ; // vecteur du mouvement de la balle var dy = 2 ; // par exemple (5, 2) var murdroit = ; // largeur_cadre - largeur_balle var murbas = ; // hauteur_cadre - hauteur_balle var dt = 20 ; // temps en milli secondes entre chaque pas

54 HTML : Appel JavaScript Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «index.html» <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <h1>balle Rebondissante</h1> <div id="cadre"> <div id="balle"></div> </div> </body> </html>

55 HTML : Appel JavaScript Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «index.html» <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="code.js" type="text/javascript"></script> </head> <body> <h1>balle Rebondissante</h1> <div id="cadre"> <div id="balle"></div> </div> </body> </html>

56 HTML : Appel JavaScript Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «index.html» <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="code.js" type="text/javascript"></script> </head> <body onload="init()"> <h1>balle Rebondissante</h1> <div id="cadre"> <div id="balle"></div> </div> </body> </html>

57 HTML : Clic sur la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «index.html» <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="code.js" type="text/javascript"></script> </head> <body onload="init()"> <h1>balle Rebondissante</h1> <div id="cadre"> <div id="balle"></div> </div> </body> </html>

58 HTML : Clic sur la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «index.html» <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="code.js" type="text/javascript"></script> </head> <body onload="init()"> <h1>balle Rebondissante</h1> <div id="cadre"> <div id="balle" class="mobile"></div> </div> </body> </html>

59 HTML : Clic sur la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «index.html» <html> <head> <title>jeu de Balle</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="code.js" type="text/javascript"></script> </head> <body onload="init()"> <h1>balle Rebondissante</h1> <div id="cadre"> <div id="balle" class="mobile" onclick="clicballe()"></div> </div> </body> </html>

60 CSS : Modification de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «style.css».mobile { background-color : red ; }

61 CSS : Modification de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «style.css».mobile { background-color : red ; }.immobile { background-color : yellow ; border : 8px black dashed ; }

62 CSS : Modification de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «style.css» #balle { position : absolute ; width : 200px ; height : 200px ; }.mobile { background-color : red ; }.immobile { background-color : yellow ; border : 8px black dashed ; }

63 JavaScript : Réaction de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel lors d un clic sur la balle function clicballe() { }

64 JavaScript : Réaction de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel lors d un clic sur la balle function clicballe() { if (div_balle.classname === "mobile") { clearinterval(timer) ; // Stop div_balle.classname = "immobile" ; } }

65 JavaScript : Réaction de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel lors d un clic sur la balle function clicballe() { if (div_balle.classname === "mobile") { clearinterval(timer) ; // Stop div_balle.classname = "immobile" ; } else { timer = setinterval(avancerballedunpas, dt) ; // Go div_balle.classname = "mobile" ; } }

66 JavaScript : Réaction de la Balle Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle «code.js» // appel lors d un clic sur la balle function clicballe() { if (div_balle.classname === "mobile") { clearinterval(timer) ; // Stop div_balle.classname = "immobile" ; } else { timer = setinterval(avancerballedunpas, dt) ; // Go div_balle.classname = "mobile" ; } }

67 HTML CSS JavaScript Technologies du Web côté Client Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle Tout Navigateur Internet interprète : HTML Langage de description du contenu textuel des pages

68 HTML CSS JavaScript Technologies du Web côté Client Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle Tout Navigateur Internet interprète : HTML Langage de description du contenu textuel des pages CSS Langage de description de l aspect visuel de l affichage

69 HTML CSS JavaScript Technologies du Web côté Client Animation : Balle Rebondissante Modification du source HTML Interaction de l utilisateur : Jouer à attraper la Balle Tout Navigateur Internet interprète : HTML Langage de description du contenu textuel des pages CSS Langage de description de l aspect visuel de l affichage JavaScript Langage de programmation des interactions du client sur l inteface

70 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le faire : Édition des codes sources Il vous suffit d un éditeur de texte pour créer trois fichiers

71 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le faire : Édition des codes sources «index.html» la page HTML

72 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le faire : Édition des codes sources «index.html» la page HTML «style.css» la feuille de style CSS

73 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le faire : Édition des codes sources «index.html» la page HTML «style.css» la feuille de style CSS «code.js» le code JavaScript

74 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le tester : Exécution du programme Placez ces 3 fichiers dans un même dossier : «Balle»

75 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le tester : Exécution du programme Placez ces 3 fichiers dans un même dossier : «Balle» Ouvrez alors «index.html» dans un Navigateur Internet. Jouez :

76 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le tester : Exécution du programme Placez ces 3 fichiers dans un même dossier : «Balle» Ouvrez alors «index.html» dans un Navigateur Internet. Jouez : Clic

77 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le tester : Exécution du programme Placez ces 3 fichiers dans un même dossier : «Balle» Ouvrez alors «index.html» dans un Navigateur Internet. Jouez : Clic...

78 Édition des codes sources Exécution du programme Informations complémentaires Vous pouvez le tester : Exécution du programme Placez ces 3 fichiers dans un même dossier : «Balle» Ouvrez alors «index.html» dans un Navigateur Internet. Jouez : Clic... Ensuite... donnez libre cours à votre imagination...

79 Pour plus d informations : Édition des codes sources Exécution du programme Informations complémentaires Vous trouverez les exemples présentés dans cet exposé sur le site : Mathématiques et Informatique http : //math.et.info.free.fr/... ainsi que d autres exemples et des informations complémentaires Et aussi de nombreux problèmes et exemples sur le site : Atelier de Mathématiques «Laurent Schwartz» http : //ateliermathematique.free.fr/

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

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

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

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

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

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

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

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

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

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS

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

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent.

5. Donnez et expliquez 2 arguments justifiant la détection de capacités côté client plutôt que côté serveur, en utilisant l User Agent. Questions de cours LPSIL 2012/2013 1 1. Pour chaque type de site listé ci-dessous, indiquez la ou les approches d adaptation à utiliser parmi les 3 approches vues en cours (1 point) : - Site ayant 2 parties

Plus en détail

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

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

Conception de sites Web

Conception de sites Web Actualité du cours Conception de sites Web L1 bidisciplinaire IDEA Année 2015-2016 Jérôme Darmont http://eric.univ-lyon2.fr/~jdarmont/?page_id=440 http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2 https://twitter.com/darmont_lyon2

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

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

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

QCM TEST ISN SUJET A

QCM TEST ISN SUJET A QCM TEST ISN SUJET A 20 novembre 2012 Nom, prénom, classe : Pour chaque question, on complétera la grille par les numéros de la ou des bonnes réponses Barème : 1 point par bonne réponse à une question,

Plus en détail

STRUCTURE D UNE PAGE HTML/CSS

STRUCTURE D UNE PAGE HTML/CSS STRUCTURE D UNE PAGE HTML/CSS C01 1. STRUCTURE Le langage Html est composé de balises ou (tags) qui permettent de structurer le texte, de le mettre en forme et d insérer des images. Ces instructions sont

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size

CSS. CSS : propriétés. Texte : text-align, text-decoration, text-indent, font-weight, font-family, font-style, font-size CSS s de propriétés en CSS Manuele Kirsch Pinheiro Manuele.Kirsch-Pinheiro@univ-paris1.fr Remerciements Mes sincères remerciements aux collègues de l IUT Nancy Charlemagne pour leur aide lors de mon passage

Plus en détail

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

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

1 XML : Une première définition. 2.1 SGML... 1 2.2 HTML... 2 2.3 Feuille de style CSS... 3. 3 XML : extensible Markup Language 4

1 XML : Une première définition. 2.1 SGML... 1 2.2 HTML... 2 2.3 Feuille de style CSS... 3. 3 XML : extensible Markup Language 4 Introduction au Table des matières 1 : Une première définition 1 2 Historique d 1 2.1 SGML................................................. 1 2.2 HTML................................................. 2

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

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

Une rapide introduction à HTML / CGI

Une rapide introduction à HTML / CGI Une rapide introduction à HTML / CGI Patrick Fuchs Université Paris 7 Equipe de Bioinformatique Génomique et Moléculaire PLAN 1. Généralités 2. Les Bases d HTML 3. Outils HTML avancés 4. HTML dynamique

Plus en détail

Tice -Seconde-Page Web 2015-2016

Tice -Seconde-Page Web 2015-2016 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher

Plus en détail

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

Plus en détail

Les feuilles de styles

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

Plus en détail

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

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

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

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

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 orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet

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

Plus en détail

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

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

Plus en détail

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

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

Rapport des modifications techniques effectuées

Rapport des modifications techniques effectuées Club Alpin Français Nantes-Atlantique Rapport des modifications techniques effectuées BERROU Quentin BRUNED Boris QUEVA Caroline 11 I CMS choisi : Nous avons choisi d utiliser Joomla! de par sa communauté

Plus en détail

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1

Introduction à la conception de sites web. Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 Objectifs Introduction aux langages à balises Introduction à (X)HTML / CSS Introduction à la gestion

Plus en détail

Cours CSS/JavaScript

Cours CSS/JavaScript Cours /JavaScript E.Coquery emmanuel.coquery@liris.cnrs.fr Cascading Style Sheets Principe : séparation du style et de la structure HTML Structure paragraphes, tableaux, liens,... Style polices de caractères,

Plus en détail

JQuery. Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36

JQuery. Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36 JQuery 1/36 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 3/36 Définition

Plus en détail

Devoir Maison Jeu Vidéo

Devoir Maison Jeu Vidéo Devoir Maison Jeu Vidéo Partie I Questions de cours 1) Distinguer les diagrammes de classes et les diagrammes d objets? Ont- ils les mêmes objectifs? Représentent- ils les mêmes aspects d un système? Pouvons-

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

Bibliothèques graphiques

Bibliothèques graphiques Bibliothèques graphiques Cilia Mauro Octobre 2012 ANF DevWeb ASR Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts Introduction Modèles colorimétriques 1 pixel

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

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

Cross plate-forme. HTML5 and CSS3 The Standards for Writing Applications. fcamps@laas.fr P5

Cross plate-forme. HTML5 and CSS3 The Standards for Writing Applications. fcamps@laas.fr P5 HTML5 and CSS3 The Standards for Writing Applications Fragmentation due to the growing number of mobile operating systems Multiple Teams/Products Feature Fragmentation Les fonctionnalités et capacités

Plus en détail

TD 3 : Intégration HTML

TD 3 : Intégration HTML Programmation Web IMAC 2015-2016 TD 3 : Intégration HTML 14 octobre 2015 Objectif: Ce TD a pour but de se servir des concepts appris dans les TDs précédents pour intégrer entièrement une maquette de site

Plus en détail

I Installation de EasyPHP 1.8

I Installation de EasyPHP 1.8 Administration de réseau Le protocole SNMP I Installation de EasyPHP 1.8 Cédric Humbert Page 1/8 L endroit où l on déposera nos dossiers contenant les fichiers html sera : C:\Program Files\EasyPHP1-8\www

Plus en détail

E5SL : PRODUCTION ET FOURNITURE DE SERVICES. Durée : 4 heures Coefficient : 5 CAS SUPMASTER. Éléments de correction

E5SL : PRODUCTION ET FOURNITURE DE SERVICES. Durée : 4 heures Coefficient : 5 CAS SUPMASTER. Éléments de correction BTS SERVICES AUX ORGANISATIONS SESSION E5SL : PRODUCTION ET FOURNITURE DE SERVICES Durée : 4 heures Coefficient : 5 CAS SUPMASTER Éléments de correction Ce corrigé comporte 8 pages numérotées de 1/8 à

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

Plus en détail

Programmation WEB. HTML et Javascript

Programmation WEB. HTML et Javascript Programmation Web : HTML et Javascript Michaël Krajecki Université de Reims Champagne-Ardenne Département de Mathématiques et Informatique Moulin de la Housse - BP 1039 51687 Reims Cedex 2. Tél. : 03 26

Plus en détail

Présentation et explications

Présentation et explications Présentation et explications 1 SOMMAIRE I) Introduction... 3 II) Installation... 3 1) Localement... 3 2) Chez un hébergeur... 4 Installation automatique... 4 Installation manuelle... 4 III) Interface de

Plus en détail

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1

XHTML et CSS. 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 XHTML et CSS 17 et 18 mai 2006 CRI-IUT 2006 METZ - Jérôme LANDRÉ - IUT Le Creusot 1 1) Introduction 2) HTML, XML 3) XHTML 4) CSS 5) Exemples 6) Outils 7) Conclusion Sommaire 17 et 18 mai 2006 CRI-IUT 2006

Plus en détail

XHTML & CSS PLAN. Ce COURS Intro. Ce COURS Intro. Gobelins 2013 2014

XHTML & CSS PLAN. Ce COURS Intro. Ce COURS Intro. Gobelins 2013 2014 PLAN XHTML & CSS Gobelins 2013 2014 Isabelle Biamonti 1. Le Web et ses langages 2. Le langage HTML 3. Créer une page HTML 4. Créer un site en liant les pages HTML 5. Balises spécifiques à HTML 5 6. Le

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

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

Validation de l item 4.5 : 4-5 Chercher et identifier l origine de la publication en utilisant au besoin le code source, pour exploiter un document.

Validation de l item 4.5 : 4-5 Chercher et identifier l origine de la publication en utilisant au besoin le code source, pour exploiter un document. Validation de l item 45 : document Sommaire Origine d'un page HTML Origine d'un document Word 1/2 Origine d'un document Word 2/2 Origine d'un site web Ressources Validation de l item 45 : document Origine

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

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

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

Cours HTML pour débutant

Cours HTML pour débutant Cours HTML pour débutant Guilhem PAROUX 09-10 Mai 2007 I. FONCTIONNEMENT CLIENT-SERVEUR... 3 II. STRUCTURE D UN SITE WEB... 4 III. LE LOGICIEL NVU... 4 IV. METTRE EN LIGNE AVEC LE CLIENT FTP "FILEZILLA"...

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

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) CSS 3 et présentation avancée 1 Qu est ce que le responsive? Démo : Chrome + guardian.com 2 Qu est ce que le responsive? 3 Pourquoi? Explosion de la variété des supports source

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

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

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

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

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet PARTIE I JavaScript: script côté client Programmation objet et événementielle en

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

Guide d intégration des marques grises Destineo

Guide d intégration des marques grises Destineo Guide d intégration des marques grises Destineo Guide d intégration des marques grises service Présentation du Document élaboré par : 1, rue de la Loire 44 966 Nantes Cedex 9 Tél. +33 (0)2 28 20 50 00

Plus en détail

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau SITE WEB Définition Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau Comment mon site est sur internet Je crée mon site sur mon ordinateur, en local.

Plus en détail

Cours Web - Javascript

Cours Web - Javascript Cours Web - Javascript Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Se familiariser avec le langage Javascript et acquérir une pratique minimale. Être capable d intégrer des scripts clients

Plus en détail

Introduction à XML. 1. Notions de base. Introduction à XML

Introduction à XML. 1. Notions de base. Introduction à XML Introduction à XML INTRODUCTION À XML 1. NOTIONS DE BASE 2. EXEMPLE SIMPLE 3. SYNTAXE XML 3.1. LES CARACTÈRES SPÉCIAUX 4. DTD 5. DOCUMENT XML AVEC FEUILLE DE STYLE CSS 6. XLS ET XSLT 6.1. EXEMPLE DE DOCUMENT

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

Formation Site Web : CSS et PHP

Formation Site Web : CSS et PHP Formation Site Web : CSS et PHP Valentin Roussellet Joachim Jablon Chahine Benchorha VIA Centrale Réseaux 1 er décembre 2008 Qu'est-ce que CSS Les sélecteurs La mise en page et le box-model Une CSS (Cascading

Plus en détail

Chapitre 3 : Le langage HTML Fascicule TIC Page 33

Chapitre 3 : Le langage HTML Fascicule TIC Page 33 33 I. Introduction Les pages Web visualisées dans un navigateur Internet sont écrites avec un langage nommé HTML (HyperText Markup Language). C est un langage de description de contenu et de structure.

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

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

LE LANGAGE JAVASCRIPT

LE LANGAGE JAVASCRIPT LE LANGAGE JAVASCRIPT TODO : - v.2.0.0 06/05/200 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com Toute reproduction partielle ou intégrale autorisée selon les termes de la licence Creative Commons

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

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

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 Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

Conception de site web - M1 MATA 2013-2014

Conception de site web - M1 MATA 2013-2014 Ou#ls du web pour la ges#on des connaissances Marilyne Rosselle marilyne.rosselle@u- picardie.fr M2 MEGC 2013-2014 Plan du cours Par#e 1 : Introduc#on et Défini#ons Par#e 2 : Web 1.0 - Éléments de HTML

Plus en détail

Le langage de Transformation XSL

Le langage de Transformation XSL Le langage de Transformation XSL Formatage d un document XML, Le langage XSLT: Définition, Principe de fonctionnement, Structure d une feuille de style, Format d une règle de transformation, Tri, Choix

Plus en détail

HTML INTRODUCTION. LI288 Web et développement web

HTML INTRODUCTION. LI288 Web et développement web HTML INTRODUCTION LI288 Web et développement web WWW = World Wide Web Créé en 1989 au CERN par Tim Berners-Lee Objectif initial : mettre en ligne de la documentation (initialement technique pour physiciens)

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

Commençons. (Bonjour, mon nom est Stéphane)

Commençons. (Bonjour, mon nom est Stéphane) Commençons (Bonjour, mon nom est Stéphane) Objectif - Vue claire de la dynamique d'une page web - Compréhension de la logique des CMS - Quelques réflexes de «bonne pratique» - La réponse à un maximum de

Plus en détail

Technologie Internet

Technologie Internet G. Hunault Angers, janvier 2005 Maitrise Mass Technologie Internet Remarque : tous les fichiers cités sont disponibles sur le web à l URL http://www.info.univ-angers.fr/pub/gh/internet/ti2005.zip Une copie

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

Fiche 6 - Le langage HTML

Fiche 6 - Le langage HTML Fiche 6 - Le langage HTML I Introduction HTML est un langage universel utilisé pour communiquer sur le Web. C est un langage dit de «marquage» (de «structuration» ou de «balisage») qui permet d écrire

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

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique»

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Java EE - Cours 7 Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Rappels 2 Feuilles de Styles : CSS Lorsque l on réalise un site Web, il faut dissocier la partie forme de la partie fond.

Plus en détail

Exercices d application. Lab. JavaScript

Exercices d application. Lab. JavaScript Exercices d application Lab JavaScript l'instruction write() Directives :calcul du carré d un nombre Implémenter le JavaScript présenté en cours fonction de calcul du carré d un nombre dans un fichier

Plus en détail

HTML : Mini tutoriel

HTML : Mini tutoriel HTML : Mini tutoriel I. Introduction HTML est un langage de formatage de texte adapté à la conception de pages web. Le HTML est un langage balisé, fondé en particulier sur la notion de lien hypertexte,

Plus en détail

Présentation. Les surnoms de JS. Historique. Programmation Web

Présentation. Les surnoms de JS. Historique. Programmation Web Présentation Programmation Web JavaScript Jean-Christophe Deneuville jean-christophe.deneuville@xlim.fr Historique JavaScript est un langage reprenant quelques éléments de syntaxe de Java On l intègre

Plus en détail