Initial commit

author: Gaspard Coulet <gaspard.coulet@mines-ales.org> 2021-04-28 23:05:53 +0200
committer: Gaspard Coulet <gaspard.coulet@mines-ales.org> 2021-04-28 23:05:53 +0200
commit: 9fe033ea88c2f705ec18c232873d056e0c229d72 (patch)
tree: 0647dc8c51610c7336c88c04de2068ea14b21e17 /sem_3/SiteWeb/tp2
9 files changed, 289 insertions, 0 deletions
diff --git a/sem_3/SiteWeb/tp2/ImageCassoulet.jpg b/sem_3/SiteWeb/tp2/ImageCassoulet.jpg
new file mode 100644
index 0000000..5dcc385
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/ImageCassoulet.jpg
diff --git a/sem_3/SiteWeb/tp2/Thumbs.db b/sem_3/SiteWeb/tp2/Thumbs.db
new file mode 100644
index 0000000..3088411
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/Thumbs.db
diff --git a/sem_3/SiteWeb/tp2/base.css b/sem_3/SiteWeb/tp2/base.css
new file mode 100644
index 0000000..dbfc7f4
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/base.css
@@ -0,0 +1,21 @@
+body {
+	background-color:dimgray;
+}
+div.div1 {
+	background-color: #FF0000;
+	padding: 3px 5px 3px 5px;
+}
+div.div2 {
+	background-color: #00FF00;
+	padding: 3px 5px 3px 5px;
+}
+div.div3 {
+	background-color: #0000FF;
+	padding: 3px 5px 3px 5px;
+	border-style:solid;
+	border-width:2px;
+}
+div.div4 {
+	background-color: #007777;
+	padding: 3px 5px 3px 5px;
+}
diff --git a/sem_3/SiteWeb/tp2/base.html b/sem_3/SiteWeb/tp2/base.html
new file mode 100644
index 0000000..9c49eff
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/base.html
@@ -0,0 +1,84 @@
+<html>
+  <head>
+	<link rel=stylesheet href=./base.css type=text/css>
+ </head>
+  <body>
+<div class="div1"><p>
+	I <br>
+		Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
+quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+fugit, sed quia consequuntur magni dolores 
+eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+ sed quia non numquam eius modi tempora incidunt ut labore et dolore
+magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, 
+quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
+ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+ reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+consequatur, vel illum qui dolorem eum
+fugiat quo voluptas nulla pariatur?</p>
+</div>
+
+
+<div class="div2"><p>
+	II <br>
+	Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
+quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+fugit, sed quia consequuntur magni dolores 
+eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+ sed quia non numquam eius modi tempora incidunt ut labore et dolore
+magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, 
+quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
+ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+ reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+consequatur, vel illum qui dolorem eum
+fugiat quo voluptas nulla pariatur?</p>
+</div>
+
+<div class="div3"><p>
+	III<br>
+	Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
+quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+fugit, sed quia consequuntur magni dolores 
+eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+ sed quia non numquam eius modi tempora incidunt ut labore et dolore
+magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, 
+quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
+ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+ reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+consequatur, vel illum qui dolorem eum
+fugiat quo voluptas nulla pariatur?</p>
+</div>
+
+<div class="div4"><p>
+	IV<br>
+	Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+accusantium doloremque laudantium, 
+totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
+quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+fugit, sed quia consequuntur magni dolores 
+eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+ sed quia non numquam eius modi tempora incidunt ut labore et dolore
+magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, 
+quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
+ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+ reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+consequatur, vel illum qui dolorem eum
+fugiat quo voluptas nulla pariatur?</p>
+</div>
+
+</body>
+</html>
diff --git a/sem_3/SiteWeb/tp2/cassoulet.css b/sem_3/SiteWeb/tp2/cassoulet.css
new file mode 100644
index 0000000..1c9c1a6
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/cassoulet.css
@@ -0,0 +1,35 @@
+body {
+  background-color: #d3d3d3;
+}
+
+ul {
+  background-color: #f5deb4;
+}
+
+img {
+  float:right;
+}
+
+table {
+  background-color: #ffa301;
+  margin-left: 33%;
+}
+
+table tr th {
+  background-color: #fffe00;
+}
+
+table caption {
+  background-color: #ffa301;
+}
+
+li a {
+  color: darkgreen;
+}
+
+p.note {
+  background-color: yellow;
+  margin-left:60px;
+  margin-right:60px;
+  font-size:x-small;
+}
diff --git a/sem_3/SiteWeb/tp2/cassoulet.html b/sem_3/SiteWeb/tp2/cassoulet.html
new file mode 100644
index 0000000..821b788
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/cassoulet.html
@@ -0,0 +1,84 @@
+
+<HTML>
+<Head>
+<link rel=stylesheet href="./cassoulet.css" type=text/css>
+</Head>
+<body>
+
+<p>
+
+
+
+	<h2>Cassoulet de Castelnaudary</h2>
+
+Pour 8 personnes - temps de cuisson 4h
+
+
+<ul>
+	<li>800 g de haricots  <a href="http://www.lingotdunord.com">lingots <a> ou mieux, de <a href="http://www.haricot-tarbais.com/">haricots tarbais</a>.
+	<li>800 g d'�chine de porc
+	<li> 8 tranches de poitrine de porc
+	<li>200 g de couennes fra�ches
+	<li>1 saucisson � l'ail
+	<li>2 cuill�res de soupe de saindoux
+	<li>2 jarrets de porc sal�s
+	<li>250 g de tomates
+	<li>3 oignons piqu�s de clous de girofle
+	<li>200 g de carottes
+	<li>1 bouquet garni
+	<li>poivre concass�
+</ul>
+</p>
+
+<p>
+<img src="cassoulet.jpg">
+Dans grand pot faire revenir avec du saindoux les tomates et la
+poitrine de porc coup�es en d�s ainsi que les carottes
+�minc�es. D�poser les haricots sur le roux
+ (tous les �l�ments au-dessus) dans le m�me pot, couvrir avec deux
+ litres d'eau, ajouter le bouquet garni,
+ l'ail, les oignons, les couennes, les jarrets dessal�s et la
+ viande. Laisser mijoter deux heures � feu doux.
+ </p>
+
+ <p>
+Verser le tout dans une "cassole*", 
+ou un plat en terre creux et profond. Repartir la viande et adjoindre
+le saucisson � l'ai coup� en tranches �paisses.
+</p>
+
+<p>
+Poser le plat dans un four tr�s doux. Quand il est recouverte d'une
+ cro�te dor�e, appuyer
+ avec une spatule pour qu'elle s'enfonce dans les haricots
+ (recommencer six fois pendant
+ tout le cuisson). Cuire au four pour au moins deux heures. Cette
+ longue et minutieuse
+ pr�paration est essentielle pour la r�ussite d'un excellent
+ cassoulet.
+ </p>
+
+ <p class="note">
+ *Une "cassole" est un pot en terre d' <a href="http://www.issel.fr">Issel<a> dans laquelle on peut
+ mijoter et dorer. C'est l'origine du terme cassoulet.
+
+</p>
+
+</p>
+
+<table border>
+<caption align=bottom>
+L'apport nutritionnel du cassoulet pour 100g</caption>
+<tr>
+<th>Glucides</th>
+<th>Lipides</th>
+<th>Protides</th>
+<tr>
+<tr>
+<td>45g</td>
+<td>30g</td>
+<td>25g</td>
+<tr>
+</table>
+</body>
+</HTML>
diff --git a/sem_3/SiteWeb/tp2/cassoulet.jpg b/sem_3/SiteWeb/tp2/cassoulet.jpg
new file mode 100644
index 0000000..f8a312d
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/cassoulet.jpg
diff --git a/sem_3/SiteWeb/tp2/index.html b/sem_3/SiteWeb/tp2/index.html
new file mode 100644
index 0000000..3f1c656
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Gaspard Coulet</title>
+  <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+  <h1 id="titre"> TP2</h1>
+  <div class="Cadre">
+    <a class="lientp2" href="../index.html"><img class="image" alt="Image de l'acceuil" src="../photo.png">Acceuil</a>
+    <a class="lientp2" href="./base.html"target = "_blank"><img class="image" alt="Image du premer site web realisé en TP2" src="./photobase.png">Site Base</a>
+    <a class="lientp2" href="./cassoulet.html"target = "_blank"><img class="image" src="../photo2.png" alt="Image du second site web realisé en TP2">Site Cassoulet</a>
+  </div>
+  <div class="Cadre">
+    <h2> Notes et réponses aux questions :</h2><p>
+      Par défaut, une div html occupe de l'espace en fonction de son contenu, en l'occurence, la largeur est de
+      100% de la page, et la hauteur est relative au nombre de ligne.</p><p>
+
+        Par défaut il n'y a pas de marge! Le décallage visible est du au padding du conteneur parent : ici body
+        qui lui a un padding par defaut de 8px, d'ailleurs, la notion de "par défaut" est absurde car elle dépend
+        du navigateur utilisé.</p><p>
+
+          On remarque que la largeur d'une bordure s'additionne avec le padding de la division.
+        </p><p>
+          En placant le texte contenu dans les div dans des balises p, on remarque qu'une marge se créée au dessus
+          et en dessous du texte, on peut même préciser que cette derniére fait 16 px.
+        </p><p>
+          Concernant la durée de vie des support de stockage, il apparait que le support le plus fiable est
+          le stockage flash.</p><p>
+
+            Parmis la liste de format fourni, seul le .jpg est un format compressé.
+
+            Parmis les formats d'archivage par defaut sur les sessions de la fac, les suivants permettent le verouillage :
+            .cbz; .ear; .war; .zip;
+            Ces 4 formats semblent permettre de protéger aussi la liste des fichiers.
+
+            La division en multiples petits fichiers peut permettre une plus grande sécurité lors des transfert par le reseau
+            ( une instabilitée du reseau risquant de couper le transfert, il est preferable de le faire morceau par
+            morceau, pour ne pas avoir à tout recommencer.
+          </p><p>
+            SAUVEGARDE
+            Sauvergarde incrementale :
+            "Méthode de backup se basant sur une sauvegarde complète, elle ne sert à sauvegarder que les fichiers modifiés depuis la dernière sauvegarde. Une sauvegarde incrémentielle copie donc uniquement les fichiers modifiés depuis la dernière sauvegarde complète ou incrémentielle et conserve les différentes versions d'un fichier.
+            Dès modification du ou des fichiers, l'attribut "archive" est positionné, devient "actif". C'est de cette façon que la sauvegarde incrémentale reconnait les fichiers modifiés pour les sauvegarder en réinitialisant du même coup cet attribut.
+            . Avantage : Comme une sauvegarde incrémentielle ne sauvegarde que les fichiers modifiés, elle constitue une protection rapide contre la perte de données. Elle nécessite également moins de ressources de stockage.
+            .Inconvénient : Chaque sauvegarde incrémentielle (entre deux sauvegardes complètes) doit être conservée car chacune d'elles se « construit » à partir de la précédente."
+            (<a href="http://www.infonitec.com/definition-informatique-telecom/definition-informatique-telecom.php?id=478"> reference</a> )
+          </p><p>
+            Synchronisation de supports : visiblement inexistant de google.
+          </p><p>
+            Gestion de version ( on est en france, s'il vous plait) :
+            "Lorsque vous travaillez sur un projet de code, vous allez régulièrement y apporter des modifications, et par moments ces modifications vont provoquer des bugs. Lorsque vous revenez sur votre projet après quelques jours ou même quelques heures, il peut être difficile de vous souvenir des dernières modifications que vous avez effectuées et de retrouver vos repères dans votre code.
+            Avec un logiciel de versioning comme Git, vous pouvez garder la trace de toutes les modifications faites sur votre code pour pouvoir vous y retrouver à tout moment. À chaque fois que vous faites une série de modifications (créer un fichier, supprimer un fichier, modifier un texte dans un fichier, etc.),  vous allez pouvoir enregistrer ces modifs dans un commit."
+            ( <a href="http://openclassrooms.com">reference</a> )
+          </p><p>
+            Logiciel de sauvegarde incrémentielle : ex : Bacula.
+            Logiciel de gestion de version : Git.
+          </p><p>
+            Exemple de piratage d'information récent : <a href="https://techcrunch.com/2017/10/10/equifax-hack-included-nearly-11-million-us-drivers-licenses/"> ici</a>
+          </p>
+        </div>
+        <footer> <p> Par : Gaspard Coulet</p><p> Contact : <a href="mailto:gaspard.coulet@etu.umontpellier.fr"> gaspard.coulet@etu.umontpellier.fr</p></footer>
+        </body>
+        </html>
diff --git a/sem_3/SiteWeb/tp2/photobase.png b/sem_3/SiteWeb/tp2/photobase.png
new file mode 100644
index 0000000..6ff1cfa
--- /dev/null
+++ b/sem_3/SiteWeb/tp2/photobase.png
author	Gaspard Coulet <gaspard.coulet@mines-ales.org>	2021-04-28 23:05:53 +0200
committer	Gaspard Coulet <gaspard.coulet@mines-ales.org>	2021-04-28 23:05:53 +0200
commit	9fe033ea88c2f705ec18c232873d056e0c229d72 (patch)
tree	0647dc8c51610c7336c88c04de2068ea14b21e17 /sem_3/SiteWeb/tp2