forked from VincentDubois/TP3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
336 lines (286 loc) · 21.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TP3 A2</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h1>
Les langages du WEB
<br>
&
<br>
Frameworks
</h1>
</div>
<!-- <div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
-->
<div id="edito">
<h2>
Edito
</h2>
<p>
Un site internet est un ensemble de pages articulées intelligemment entre elles. Chaque page est écrite en langage particulier appelé : HTML. L’essor sans précédent de l’informatique a fait qu’aujourd’hui ce langage, en particulier, et internet, en général, connaissent une évolution très rapide. Tellement qu’il devient difficile de se repérer dans toutes les technologies mises en œuvre dans le web. Cet article vous donne aperçu qui se veut le plus fourni possible sur le langage du web.
</p>
<h3>Source : <a href="http://www.idnext.net/le-langage-web-explique-pour-les-nuls/">Le langage web expliqué pour les nuls</a>
</h3>
</div>
<div class="element">
<h2>
Nico
</h2>
<img src="508.jpg" alt="html">
<p>
HTML est un langage de description de document utilisé sur Internet pour faire des pages Web. Son sigle signifie « HyperText Markup Language » en anglais, littéralement « langage de marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est interprété par un navigateur Web.La formulation du langage HTML est fort simple, en effet des balises permettent d'appliquer différents formatages. Elles sont délimitées par les deux symboles "supérieur à" et "inférieur à". Dans le cas des balises en paires, chaque balise ouverte doit être fermée. Le langage de balisage HTML permet de structurer un document et de le mettre en forme.
</p>
<h3>Source : <a href="https://fr.wikibooks.org/wiki/Le_langage_HTML/Structure_de_base_d%27un_document_HTML">Wikipedia</a>
</h3>
</div>
<div class="element">
<h2>
CSS
</h2>
<p>
Le design d'un site évolue toujours au fil du temps,donc pour cela il est important de savoir maîtriser le langage CSS.
<br><h3>A quoi sert le langage CSS sur une page Web?</h3>
Le langage CSS( Cascading Style Sheets), permet de pouvoir mettre en forme des document web,type page HTML ou XML.En effet, c'est dans la feuille de style CSS,où tout va se dérouler la fabrication de la mise en forme des pages: le positionnement des éléments, l'image de fond, les polices de caractère, les couleurs,etc...
<br><h3>Où écrit-on le CSS? </h3>
Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :
<br>dans un fichier.css;
<br> dans l'en-tête head du fichier HTML ;
<br>directement dans les balises du fichier HTML via un attributstyle(méthode la moins recommandée).
<br><h3>Comment lier le CSS au HTML </h3>
<br>En règle générale, vous placerez toutes les règles CSS dans un fichier portant l'extenssion .css. En général, il se nommera style.css.
Le fichier contenant les instructions CSS (fichier .css, ou feuille de style CSS) doit être lié à toutes les pages HTML auxquelles on veut en changer l'affichage. Dans chaque page HTML, il faut utiliser la syntaxe suivante, à placer dans le head : </br>
<br> link rel="stylesheet" type="text/css" href="style.css" </br>
<br>Remplacez bien entendu "style.css" par le nom de votre fichier CSS, ou son chemin relatif ou absolu, s'il se trouve dans un dossier différent du dossier contenant la page HTML.
À noter que le fichier style.css dans href est un chemin relatif à la page HTML actuelle.
Par contre, les images référencées à l'intérieur du fichier CSS sont relatives au dossier contenant le fichier CSS. Ceci permet ainsi d'inclure le fichier CSS dans des pages HTML d'origines différentes. Nous aurons l'occasion de revenir sur ce fait.
<img src="css3-logo-png.png">
</p>
<h3>Source : <a href="http://css.mammouthland.net/principe-des-css.php">CSS</a>
</h3>
</div>
<div class="element">
<h2>
Boostrap
</h2>
<img src="bootstrap-stack.png">
<p>
Bootstrap est une collection d'outils utile à la création du design (graphisme, animation et interactions avec la page dans le navigateur ... etc. ...) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.
<br>
<br>
La modularité de Bootstrap consiste en une série de feuilles de styles LESS (à partir de la version 4 SASS) qui implémentent différents composants du toolkit6. Une feuille de style principale (bootstrap.less) englobe les feuilles de style des composants. Les développeurs peuvent alors sélectionner les composants dont ils ont besoin en modifiant cette feuille principale. L'utilisation de LESS permet la manipulation de variables, de fonctions, d'opérateurs, sélecteurs6…
Depuis la version 2, Bootstrap dispose d'une option supplémentaire de « personnalisation ».
<br>
<br>
Le système de grille et le style adaptatif sont standardisés sur une grille de 940 pixels de large, que les développeurs peuvent adapter. Ces définitions sont déclinées en quatre variations qui peuvent être utilisées dans différents formats et supports : téléphones (portrait et paysage), tablette et PC (haute et basse résolution). Ces déclinaisons adaptent automatiquement l'affichage de la page
</p>
<h3>Source : <a href="https://getbootstrap.com/">boostrap.com</a>
</h3>
</div>
<div class="element">
<h2>
La bibliothèque jQuery
</h2>
<p>
<img src="https://www.studio-virtu.fr/inc/2013/02/ressources-jquery-600x400.jpg">
<strong>jQuery</strong> est une bibliothèque <strong> JavaScript </strong> libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web.
<br>
<br>
La première version est lancée en janvier 2006 par <strong>John Resig</strong>.
La bibliothèque contient notamment les fonctionnalités suivantes : <strong>parcours et modification du DOM </strong>(y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath)<strong>, événements, effets visuels et animations,
manipulations des feuilles de style en cascade </strong>(ajout/suppression des classes, d'attributs…)<strong>, Ajax, plugins, Utilitaires </strong>(version du navigateur web…).
<br>
<br>
Depuis sa création en 2006 et notamment à cause de la complexification croissante des interfaces Web, jQuery a connu un large succès auprès des développeurs Web et son apprentissage est aujourd'hui un des fondamentaux de la formation aux technologies du Web. Il est à l'heure actuelle <strong>la librairie front-end la plus utilisée au monde</strong> (plus de la moitié des sites Internet en ligne intègrent jQuery).
<br>
<br>
jQuery se présente comme un unique fichier JavaScript de 247 Kio (92,2 kio dans sa version minimalisée par la suppression des commentaires et caractères d'espacements, et 32 kio en ayant fait l’objet d’une compression gzip) contenant toutes les fonctions de base. IL peut être inclus dans toute page web dans une balise script.
<br>
<br>
La bibliothèque jQuery peut être appelée <strong>via la fonction jQuery</strong>, ou $. Cette fonction est chaînable (elle retourne l'objet appelant).
<br>
<br>
Parce que jQuery est un constructeur de code source libre, d'autres personnes utilisent sa syntaxe pour créer de nouveaux modules d'extension afin d'ajouter d'autres fonctionnalités aux bibliothèques.
</p>
<h3>Source : <a target="_blank" href="https://fr.wikipedia.org/wiki/JQuery">Wikipédia</a>
</h3>
</div>
<div class="elementSarah">
<p id="titresarah">PHP</p>
<img id="imagesarah" src="veille-technologique-img-1.png" alt="php">
<h2 id="texteSarah">Qu'est-ce que le PHP ?</h2>
<p id="texteSarah">
PHP est un langage de programmation qui sert à la création d'applications web. Il s'agit d'un langage de scripts Open source. Le langage PHP s'intègre dans les pages HTML.
</p>
<h2 id="texteSarah">A quoi sert le langages PHP ?</h2>
<p id="texteSarah">PHP permet d'automatiser des tâches répétitives. Ainsi, le développeur d'un site internet, n'est pas obligé d'employer des dizaines et des dizaines de commandes pour afficher du code HTML. En fait le langage PHP permet la réalisation de sites dynamiques. Les sites dynamiques s'opposent aux sites statiques, qui eux, ne requièrent que les langages HTML et CSS. A l'inverse, les sites dynamiques sont plus complexes car leurs contenus est mis à jour sans recourir à l'intervention d'un webmaster. Cela est rendu possible grâce aux langages HTML et CSS, évidemment, mais aussi et surtout grâce au PHP et à MySQL. Ce type de site permettent de mettre en place des espaces membres, des forums, des actualités, une newsletter etc.</p>
<h2 id="texteSarah">Comment fonctionne PHP lors d'une requête « http » ?</h2>
<p id="texteSarah">Pour mieux comprendre le fonctionnement du langage PHP, il faut tout d'abord connaître le déroulement d'une requête http.
Lorsque vous tapez l'URL d'une page d'un site web dynamique, le serveur web, sur lequel est hébergé cette page, cherche dans son arborescence l'existence du fichier demandé. Si ce fichier porte une extension de type PHP (.PHP, .PHP3, .PHP4 par exemple) ; alors le serveur web l'envoie à PHP.
Par la suite, PHP analyse le fichier. Il exécute le code PHP contenu entre les balises <?php et ?>. On dit que PHP parse la page.
Il est possible que le code du fichier contienne des requêtes vers une base de données. Dans ce cas, PHP envoie la requête à SQL pour obtenir les informations demandées vers les script.
Une fois que la page est entièrement « parsée » et débarrassée du code PHP, le fichier est alors renvoyé au serveur web. Ce dernier peut transmettre le fichier contenant uniquement du HTML au navigateur web pour qu'il l’interprète et l'affiche.</p>
<h3 id="texteSarah">Source : <a href="http://www.jusderaisin.com/blog/quest-ce-que-le-langage-php/">jusderaisin.com</a>
</h3>
</div>
<div class="element">
<h2>
Le JavaScript (JS)
</h2>
<p>
JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs2 avec l'utilisation (par exemple) de Node.js3. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d'en créer des objets héritiers personnalisés. En outre, les fonctions sont des objets de première classe. Le langage supporte le paradigme objet, impératif et fonctionnel. JavaScript est le langage possédant le plus large écosystème grâce à son gestionnaire de dépendances npm, avec environs 500 000 paquets en août 20174.
JavaScript a été créé en 1995 par Brendan Eich. Il a été standardisé sous le nom d'ECMAScript en juin 1997 par Ecma International dans le standard ECMA-262. Le standard ECMA-262 en est actuellement à sa 8e édition. JavaScript n'est depuis qu'une implémentation d'ECMAScript, celle mise en œuvre par la fondation Mozilla. L'implémentation d'ECMAScript par Microsoft (dans Internet Explorer jusqu'à sa version 9) se nomme JScript, tandis que celle d'Adobe Systems se nomme ActionScript.
</p>
<h3>Source : <a href="https://fr.wikipedia.org/wiki/JavaScript">JAVASCRIPT</a>
</h3>
</div>
<div class="element">
<h2>
MYSQL
</h2>
<p>
<b>MySQL</b> est un <u>système de gestion de base de données.</u> Issu du monde libre, il est l'un des logiciels de gestion de base de données le plus utilisé au monde.
<br>
<img src="489px-MySQL.svg.png" alt="img"><br>
<b>MySQL</b> supporte deux langages informatique, le langage de requête SQL et le SQL/PSM.
<br>
<br>
<b>Une base de données </b>sert essentiellement à stocker des informations (comme des noms, prénoms, adresses, numéros de téléphone ou autre) pour ensuite être capable de les traiter, les filtrer, les trier, etc. afin d'en extraire des statistiques, de récupérer les données d'un individu à partir de son nom, etc.
<br>
<br>
<u><b>Avantages d'utiliser MySQL : </b></u>
<br> <ul>
<li>Il est open source, ce qui signifie qu’il est gratuit et que tout le monde peut l’utiliser et le modifier. </li> <br>
<li>Il est open source, ce qui signifie qu’il est gratuit et que tout le monde peut l’utiliser et le modifier. </li> <br>
<li>Il est largement déployé : MySQL peut être installé sur de multiples et différentes plateformes, et il est habituellement un standard sur la plupart des configurations d’hébergement Web </li>
<br>
<li> Il est facile à utiliser : Mettre en place et travailler avec des bases de données MySQL est relativement simple </li>
<br>
<li> Il fonctionne bien avec PHP : Depuis la version 5.3, PHP dispose d’un driver MySQL, qui est étroitement lié avec le moteur PHP, ce qui en fait un bon choix pour les codeurs PHP </li><br>
</ul>
</p>
<h3>Source : <a href="https://fr.wikipedia.org/wiki/MySQL">Wikipédia</a>
</h3>
</div>
<div class="element">
<h2>
Ruby On Rails
</h2>
<p>
Ruby on Rails, également appelé RoR ou Rails, est un framework web libre écrit en Ruby. Il suit le motif de conception modèle-vue-contrôleur (MVC). Il propose une structure qui permet de développer rapidement et intuitivement.<br>
<img src="rubyonrails.png">
Cependant, il impose un grand niveau d'abstraction dans la programmation qui apporte en contre-partie l'économie d'écrire soi-même la plupart des routines obligatoires d'une application web.
<br>
Rails est une Gem, c'est-à-dire un module open source, développée et maintenue depuis plus de 10 ans par des milliers de développeurs. Il existe en supplément des milliers de gems, d'ailleurs nous vous en avions présenté 25 récemment.<br>Ainsi, lorsqu'une nouvelle fonctionnalité est à développer, dans 90% des cas le travail peut être réalisé rapidement en se basant sur un module existant.
<br>
Le code de chaque gem se trouve sur GitHub, s'il manque quelque chose, aucun souci, il suffit de forker et d'ajouter soi-même la fonctionnalité pour son propre produit.<br>Libre à vous d’ensuite faire une pull request au projet initial pour partager ce développement avec la communauté (give back). Cet esprit est formidable, sur le plan éthique / moral, mais aussi économique, car les développeurs ruby ne réinventent pas la roue et intègrent au mieux ces briques existantes afin de se concentrer sur les besoins business des utilisateurs / clients.<br> Depuis toujours, la communauté Ruby repose sur une culture d'ouverture et de partage. En supplément des multiples communautés sur le web, vous trouverez de nombreux relais physiques partout dans le monde.<br><br>Source : www.lewagon.com<br><br>
Pour en savoir plus concernant le Ruby on Rails, vous pouvez suivre une série de tutoriels en cliquant sur le lien ci-dessous.
</p>
<h3>Lien : <a href="https://openclassrooms.com/courses/initiez-vous-a-ruby-on-rails" target="_blank" >Openclassroom</a>
</h3>
</div>
<div class="element">
<h2>
C Langage
</h2>
<p>
C'est un langage de programmation impératif et généraliste. Il est qualifié de langage de bas niveau dans le sens où chaque instruction du <img src="c.png" alt="image c">langage est conçue pour être compilée en un nombre d'instructions machine assez prévisible en termes d'occupation mémoire et de charge de calcul. En outre, il propose un éventail de types entiers et flottants conçus pour pouvoir correspondre directement aux types de donnée supportés par le processeur. Enfin, il fait un usage intensif des calculs d'adresse mémoire avec la notion de pointeur.
<p>
<h4><em>exemple du langage</em></h4>
<ul> <li>
struct NomDeVotreStructure {
int variable1;
int variable2;
int autreVariable;
double nombreDecimal;
}
</li>
<li> struct Coordonnees {
int x;
int y;
};
</li>
</ul>
</p>
<h3><u>Les opérateurs du C:</u></h3>
Les opérateurs du C permettent de former des expressions, qui diront quoi faire à votre programme. On peut voir un programme C comme étant composé de trois catégories d'instructions :
<br><b>Les déclarations et définitions</b> <em>(variables, fonctions, types)</em> : déclarent et définissent les objets que pourront manipuler le programme.
<br><b> Les expressions </b> : manipulent les déclarations, via les opérateurs.
<br><b> Les instructions </b> : manipulent les expressions pour leur donner une signification particulière (<em>test, boucle, saut,</em> ...).
</p>
<p>
Un programme en langage C est constitué des six groupes de composants élémentaires suivants : <ul>
<li>les identificateurs,</li>
<li>les mots-clefs;</li>
<li>les constantes;</li>
<li>les chaînes de caractères;</li>
<li>les opérateurs;</li>
<li>les signes de ponctuation; </li>
</ul>
<h3><u> La structure en langage C:</u></h3>
<br>Une structure est un regroupement de plusieurs objets, de types différents ou non. C'est finalement une boîte qui regroupe plein de données différentes.
Lors de la déclaration de la structure, on indique le type et le nom des variables qui la composent.
</p>
<h3>Source : <a href="#">Carla Bertolotti</a>
</h3>
</div>
<div class="element">
<h2>
Le framework Django (Python)
</h2>
<p>
Django est une infrastructure d'application (aussi appelé framework) coté serveur extremement populaire et doté de beaucoup de fonctionnalités, écrit en Python.<img src="django.png" /><br><br>
Django s'inspire du principe MVC ou MTV (la vue est gérée par un gabarit) composé de trois parties distinctes :
<ul>
<li>Un langage de gabarits flexible qui permet de générer du HTML, XML ou tout autre format texte</li>
<li>Un contrôleur fourni sous la forme d'un « remapping » d'URL à base d'expressions rationnelles</li>
<li>Une API d'accès aux données est automatiquement générée par le cadre compatible CRUD. Inutile d'écrire des requêtes SQL associées à des formulaires, elles sont générées automatiquement par l'ORM</li>
</ul>
En plus de l'API d'accès aux données, une interface d'administration fonctionnelle est générée depuis le modèle de données. Un système de validation des données entrées par l'utilisateur est également disponible et permet d'afficher des messages d'erreur automatiques.
Sont également inclus :
<ul>
<li>un serveur web léger permettant de développer et tester ses applications en temps réel sans déploiement </li>
<li>un système élaboré de traitement des formulaires muni de widgets permettant d'interagir entre du HTML et une base de données. De nombreuses possibilités de contrôles et de traitements sont fournies </li>
<li>un cadre de cache web pouvant utiliser différentes méthodes (MemCached, système de fichier, base de données, personnalisé) </li>
<li>le support de classes intermédiaires (intergiciel) qui peuvent être placées à des stades variés du traitement des requêtes pour intégrer des traitements particuliers (cache, internationalisation, accès…) </li>
<li>une prise en charge complète d'Unicode.</li>
</ul>
</p>
<h3>Source : <a href="https://fr.wikipedia.org/wiki/Django_(framework)">Wikipedia</a> et <a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/Django">MDN</a>
</h3>
</div>
<div class="element">
<h2>
Langage web: Java
</h2>
<p>
Java est un langage de <strong><span>programmation orienté objet</span></strong>. Ce langage a été créé en <strong><span>1995</span></strong> par deux employés d'une entreprise de fabrication d'ordinateur.
</p>
<p>
Le Java fut créé afin d'améliorer les performances du langage C et C++. Mais finalement, il fut adopté comme langage à part entière. Du coup, il finira par s'intégrer.
au <span>langage du Web</span> dans des navigateurs avant de finir dans <span>des jeux vidéo sur Internet</span> avant de se faire remplacer par Adobe Flash Player.
</p>
<img src="Java.png" alt="Duke3D"><br><br><br><br><br><br>
<h3>Source : <a href="https://fr.wikipedia.org/wiki/Java_(langage)">Wikipédia</a>
</h3>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
</div>
</body>
</html>