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/

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

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

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

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

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

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

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

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

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

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

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

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

Plus en détail

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50

CSS. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) CSS 1 / 50 CSS Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) CSS 1 / 50 Plan 1 Généralités sur les CSS 2 Les sélecteurs 3 Les propriétés 4 le dimensionnement et le positionnement Thierry

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

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

Formation dev web de base

Formation dev web de base Formation dev web de base Le Web n est pas internet HTTP Hypertext Transfer Protocol Le client envoie une requête au serveur. Le serveur répond avec un code status et un contenu Le navigateur reçoit la

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

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Programmation client web cours 8 : javascript et applet

Programmation client web cours 8 : javascript et applet Programmation client web cours 8 : javascript et applet Plan Modèles de programmation via le service Web Protocole HTTP HTML BALISES Cascading Style Sheet Javascript Applet java IPW : programmation côté

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

Plus en détail

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013

Initiation HTML 5 / CSS 3. Clément Bourgoin cb@nokto.net v1.0-17/01/2013 Initiation HTML 5 / CSS 3 Clément Bourgoin cb@nokto.net v1.0-17/01/2013 1. Les langages du web Pour créer un site web, on utilise au moins deux langages : le HTML et le CSS. Il en existe d'autres mais

Plus en détail

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

HTML5, CSS3. Apprenez les langages. pour créer votre premier site web. et JavaScript. HTML5, CSS3 et JavaScript - pour créer votre premier site web pour créer votre premier site web Dès le début du livre l auteur présente un tour d horizon du développement sur le Web ; les langages côté client et serveur, les formats d images, les navigateurs afin

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8

Syntaxe CSS 4 Jeu de règles... 4 Propriétés et valeurs... 4 Les sélecteurs... 4 Exemples sur les sélecteurs... 8 Cours CSS 2013 tv - v.1.1 Sommaire Introduction aux feuilles de style 2 Constituants des pages web..................................... 2 Définition...............................................

Plus en détail

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

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

Plus en détail

Utilisation Des Widgets ITEA

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

Plus en détail

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

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

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Mac OS X Dashboard Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Dashboard un ensemble d outils toujours disponibles [F12] trois types d outils : accessoires (très autonomes)

Plus en détail

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web

Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web 52 Les API JavaScript du HTML5 Intégrez la puissance du HTML5 dans vos applications Web D'où proviennent ces données qui permettent de vous localiser? Pour les smartphones, deux procédés peuvent être utilisés

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

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

Réaliser une page du site http://la-ba.lyceegutenberg.net

Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Réaliser une page du site http://la-ba.lyceegutenberg.net Récupérer les éléments récupérer sur le bureau de votre ordinateur à partir du serveur

Plus en détail

INTERNET CRÉER UN SITE EN HTML ET CSS

INTERNET CRÉER UN SITE EN HTML ET CSS INTERNET CRÉER UN SITE EN HTML ET CSS Nous allons vous proposer de créer un site Web de plusieurs pages en utilisant du code HTML et une feuille de style CSS. Toutefois, l utilisation du HTML et du CSS

Plus en détail

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers

Définitions. CSS Cascading Style Sheets Feuilles de style en cascade. FTP File Transfer Protocol Protocole de transfert de fichiers Introduction Ma première page Web (2/2) Ce document est l'étape 2 d'un didacticiel qui a pour but de donner un aperçu de la création d'une page Web. Une ou deux pages seront créées et présenteront leur

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

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

Création d un Site WEB

Création d un Site WEB RAPPORT DE STAGE DE L INFORMATIQUE POUR L INGÉNIEUR Création d un Site WEB Réalisé par : Badie SAADA Med Amine BAATOUT Surveillé par : Mme Syrine CHARFI Mme Sonia ALOUANE 25 septembre 2013 Table des matières

Plus en détail

DHTML ou le Html dynamique

DHTML ou le Html dynamique 1. Définition du DHTML DHTML ou le Html dynamique 1.1 Introduction ou... au risque de vous décevoir Ne cherchez pas de syntaxe ou de références DHTML, vous n'en trouverez pas. Le DHTML n'est pas un langage

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information

Plus en détail

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD

GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD GUIDE DU DESIGN GRAPHIQUE DU SITE ABCD Version 4.0.2 Table des matières Introduction...2 Architecture du site ABCD...2 Les standards du web...3 Accessibilité...4 Type I ou portail du site ABCD...4 Type

Plus en détail

JavaScript, langage et utilisation

JavaScript, langage et utilisation Introduction JavaScript, langage et utilisation Langage côté CLIENT Javascript n'est pas java! intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash permet de rendre

Plus en détail

Création d un site Internet (partie 2 )

Création d un site Internet (partie 2 ) Création d un site Internet (partie 2 ) Objectif : Apprendre les bases des langages XHTML et CSS pour réaliser un site CV Site ressource : http://jleu10.free.fr Adresse mail : jleu10@free.fr Jean-Louis

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS Courrielleur privilégie l usage des courriels HTML pour les envois marketing. En effet, le HTML permet d organiser graphiquement l information de manière

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent La

Plus en détail

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; }

p,ul,li,td { font-size : 100%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : black; background-color : white; } Enregistrer la feuille de style "style.css" mettre dans l'en-tête de la page html (entre les balises ) : mettre dans l'en-tête de

Plus en détail

CATALOGUE DES FORMATIONS

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

Plus en détail

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2»

Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Introduction aux squelettes SPIP «RÉCIT-FP Partenaires v1.3.2» Note importante : Pour l installation de SPIP et des squelettes RÉCIT-FP Partenaires v1.3.2, veuillez vous référer au fichier INSTALL.txt.

Plus en détail

1. La notion de cascade

1. La notion de cascade HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir

Plus en détail

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

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

Plus en détail

Présentation de HTML5

Présentation de HTML5 Présentation de HTML5 Option Web Multimédia Polytech Paris-Sud cycle préparatoire 2e année Claude Barras (claude.barras@u-psud.fr) Université Paris-Sud & LIMSI-CNRS 22 septembre 2014 Introduction HTML5

Plus en détail

1 Utilisation du logiciel Quanta+ 2

1 Utilisation du logiciel Quanta+ 2 COURS HTML-CSS Cours HTML Page 1 Table des matières 1 Utilisation du logiciel Quanta+ 2 2 Les feuilles de style CSS 4 2.1 Définition et principe................................. 4 2.2 Mais pourquoi donc

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB

Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Développement Web INITITIATION AU DEVELOPPEMENT WEB ET PRESENTATION DES DIFFERENTES SOLUTIONS POSSIBLES POUR LA MISE EN PLACE D'UN SITE WEB Olivier Allaert 1 Développement Web Développement Web Principe

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

Introduction Web : Cours. IUT de Villetaneuse.

Introduction Web : Cours. IUT de Villetaneuse. Introduction Web : Cours 1ère année IUT de Villetaneuse. Mathieu Lacroix 1 9 septembre 2014 1. E-mail : mathieu.lacroix@iutv.univ-paris13.fr, Page Web : http://www.lipn.univ-paris13.fr/~lacroix/ IUT de

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail

GWT Développement d'applications clientes en Java. Introduction prise en main

GWT Développement d'applications clientes en Java. Introduction prise en main GWT Développement d'applications clientes en Java Introduction prise en main 1 Pourquoi GWT? GWT est un framework, conçu par Google, pour programmer des applications web en Java ; Il permet de programmer

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

{less} Guide de démarrage

{less} Guide de démarrage {less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site

Plus en détail

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?

Plus en détail

Documentation SPIP. Modifier l'habillage graphique

Documentation SPIP. Modifier l'habillage graphique Documentation SPIP Modifier l'habillage graphique Modifier l'habillage graphique 1. Introduction aux feuilles de style...4 Pourquoi les feuilles de style?...4 Concrètement...5 Notes...5 2. Les feuilles

Plus en détail

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

Plus en détail

ISN : B6-Langages du Web

ISN : B6-Langages du Web ISN : B6-Langages du Web Les langages du Web Michel Van Caneghem Mai 2012 Les langages du Web Langages de description : Présentation du langage HTML et du principe de séparation du contenu et de la mise

Plus en détail

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page

Plus en détail

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

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

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

Plus en détail

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO

Multimédia - Partie WEB. Syllabus de 6 ème PHOTO Multimédia - Partie WEB Syllabus de 6 ème PHOTO Edition : 2015 Professeur : J. Pochet 2 Table des matières Table des matières... 3 Introduction... 5 Manipulation 1 : Page d introduction... 6 Objectif général...

Plus en détail

Introduction au langage (X)HTML-CSS

Introduction au langage (X)HTML-CSS Introduction au langage (X)HTML-CSS Table des matières 1 La syntaxe du HTML 3 1.1 Principe d un langage descriptif............................ 3 1.2 Les balises HTML...................................

Plus en détail

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.

Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue. Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857 Intégrateur de STPo - Robot de Gordon Bennett 2 L'intégrateur XHML,

Plus en détail

Fabrication de site web Damien Nouvel

Fabrication de site web Damien Nouvel Fabrication de site web Plan Gestion de projets informatiques Acteurs de la fabrication de sites web Travail du designer Travail du développeur 2 / 30 Plan Gestion de projets informatiques Acteurs de la

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage HTML / XHTML Laurent Tichit Janvier 2011 Laurent Tichit 2005-2010 1 Comment fonctionne le Web? C'est un mécanisme client-serveur. Logiciel serveur : programme qui a pour

Plus en détail

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES

11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES 11. ANNEXE 3 : SPECIFICATIONS TECHNIQUES 11.1 Hébergement : Plan Antilope Hosteur Caractéristiques détaillées : Hébergement web : - Temps d'exécution de script PHP : 30 secondes - Taille maximale en mémoire

Plus en détail

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

Chapitre 6 : Les objets du navigateur

Chapitre 6 : Les objets du navigateur I. Généralités Chapitre 6 : Les objets du navigateur En JavaScript il existe aussi plusieurs objets rattachés à la fenêtre, à la page et au navigateur. Ils sont appelés window, document et navigator. Ce

Plus en détail

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

XML XML. Example. Structure de document XML

XML XML. Example. Structure de document XML XML XML Wieslaw Zielonka extensible Markup Language C est un standard ouvert élaboré par World Wide Web Consortium (W3C). Les balises XML divisent le documents en plusieurs éléments. 1 er décembre 2012

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

SII Stage d informatique pour l ingénieur

SII Stage d informatique pour l ingénieur SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...

Plus en détail

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

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

Plus en détail

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation

Plus en détail

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

Plus en détail

1 Le code ASCII et le code Latin-1

1 Le code ASCII et le code Latin-1 USTL - Licence ST-A 1ère année 2006-2007 Algorithmes et Programmation Impérative 1 Objectifs du TP 1. travailler la mise en forme d'un achage. TP 1 : Table de caractères ASCII 1 Le code ASCII et le code

Plus en détail

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour.

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour. XHTML : introduction 1. Présentation et historique Le HTML à l origine est un langage simple destiné à la présentation des documents hypermédias. Toutefois au fil des ans, il s est avéré que le HTML ne

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail