Import all
19
Formations/NSI/Bloc1/WEB/DIU-EIL-WEB-test.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>DIU-EIL : bloc 1, programmation WEB - test automatisés</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="main-test">Tests automatisés</h1>
|
||||
<div id="mocha"></div>
|
||||
|
||||
<script src="https://unpkg.com/chai/chai.js"></script>
|
||||
<script src="https://unpkg.com/mocha/mocha.js"></script>
|
||||
<script src="DIU-EIL-WEB.js"></script>
|
||||
<script src="DIU-EIL-WEB-test.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
62
Formations/NSI/Bloc1/WEB/DIU-EIL-WEB-test.js
Normal file
@@ -0,0 +1,62 @@
|
||||
/* global mocha suite test chai fibonacci */
|
||||
// voir la documentation https://mochajs.org/#running-mocha-in-the-browser
|
||||
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// initialisation de Mocha
|
||||
mocha.setup('tdd');
|
||||
mocha.globals(['__VUE_DEVTOOLS_TOAST__']);
|
||||
mocha.checkLeaks();
|
||||
|
||||
// ////////////////////////////////////////////////////////////////////
|
||||
// Suites de tests
|
||||
// ////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Voir pour la syntaxe des assertions https://www.chaijs.com/api/assert/
|
||||
|
||||
suite('Tests pour la fonction fibonacci', () => {
|
||||
test('Type de résultats : nombre', () => {
|
||||
chai.assert.isNumber(fibonacci(0));
|
||||
});
|
||||
|
||||
test('Paramètre négatif : résultat indéfini', () => {
|
||||
chai.assert.isUndefined(fibonacci(-1));
|
||||
});
|
||||
|
||||
test('Paramètre mauvais type : résultat indéfini', () => {
|
||||
chai.assert.isUndefined(fibonacci({}));
|
||||
chai.assert.isUndefined(fibonacci(() => 0));
|
||||
chai.assert.isUndefined(fibonacci([]));
|
||||
chai.assert.isUndefined(fibonacci('test'));
|
||||
chai.assert.isUndefined(fibonacci());
|
||||
chai.assert.isUndefined(fibonacci(true));
|
||||
});
|
||||
|
||||
test('Test valeurs initiales', () => {
|
||||
chai.assert.strictEqual(fibonacci(0), 0);
|
||||
chai.assert.strictEqual(fibonacci(1), 1);
|
||||
chai.assert.strictEqual(fibonacci(2), 1);
|
||||
});
|
||||
|
||||
test('Test valeur haute ', () => {
|
||||
chai.assert.strictEqual(fibonacci(30), 832040);
|
||||
});
|
||||
});
|
||||
|
||||
suite('Tests pour la fonction fibonacci', () => {
|
||||
test('Start est à 0 par defaut', () => {
|
||||
chai.assert.strictEqual(range(0,10), range(10));
|
||||
});
|
||||
test('Comportement attendu', () => {
|
||||
chai.assert.strictEqual(range(10), [0,1,2,3,4,5,6,8,9]);
|
||||
chai.assert.Equal(range(10, 4, 2) == [4,6,8]);
|
||||
});
|
||||
test('Liste vide quand end > start', () => {
|
||||
chai.assert.Equal(range(-2, 0), []);
|
||||
});
|
||||
})
|
||||
// Lancement des tests
|
||||
mocha.run();
|
||||
}, false);
|
||||
17
Formations/NSI/Bloc1/WEB/DIU-EIL-WEB.css
Normal file
@@ -0,0 +1,17 @@
|
||||
.soft-btn {
|
||||
background-color:gray;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 1em 2em ;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
66
Formations/NSI/Bloc1/WEB/DIU-EIL-WEB.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>DIU-EIL : bloc 1 - introduction à la programmation WEB</title>
|
||||
<link href="DIU-EIL-WEB.css" rel="stylesheet" media="all" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="header">
|
||||
<h1>Activité pratique «programmation web»</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<nav id="menu">
|
||||
<h2>Menu</h2>
|
||||
<ul>
|
||||
<li><a href="#content-partie-1">Partie 1</a></li>
|
||||
<li><a href="#content-partie-2">Partie 2</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="container">
|
||||
|
||||
<section id="content-partie-1">
|
||||
|
||||
<h2>Partie 1</h2>
|
||||
|
||||
<h3>Un premier boutton</h3>
|
||||
<div>
|
||||
<button id="btn-exec">Exécuter</button>
|
||||
</div>
|
||||
|
||||
<h3>Un formulaire pour une fonction JS</h3>
|
||||
<div>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Stop<input type="text" id="input-range-stop" value="10"/></li>
|
||||
<li>Start<input type="text" id="input-range-start" value=""/></li>
|
||||
<li>Step<input type="text" id="input-range-step" value=""/></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="soft-btn" id="btn-range-eval">Range</button>
|
||||
<button class="soft-btn" id="btn-range-reset">Reset</button>
|
||||
</div>
|
||||
|
||||
<code id="output"></code>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="content-partie-2">
|
||||
<h2>Partie 2</h2>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer id="footer">
|
||||
Contenus à partir de Pierre-Antoine Champin, Emmanuel Coquery, Fabien Duchateau et Romuald Thion.
|
||||
</footer>
|
||||
|
||||
<script src="DIU-EIL-WEB.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
55
Formations/NSI/Bloc1/WEB/DIU-EIL-WEB.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
|
||||
'use strict';
|
||||
|
||||
// //////////////////////////////////////////////////////////////////////////////
|
||||
// Exercice : bases du langage et utilisation de la console
|
||||
// //////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
function fibonacci(n) {
|
||||
if (!Number.isInteger(n) || n < 0) {
|
||||
return undefined;
|
||||
}
|
||||
if (n === 0 || n === 1) {
|
||||
return n;
|
||||
}
|
||||
|
||||
return (fibonacci(n - 1) + fibonacci(n - 2));
|
||||
}
|
||||
|
||||
|
||||
// range //////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Fonction range, pas trop de choix ici dans l'écriture
|
||||
function range(stop, start = 0, step = 1) {
|
||||
const res = [];
|
||||
|
||||
// je mets une "garde" ici pour éviter des boucles sans fin si step est nul ou négatif
|
||||
if (!Number.isInteger(step) || step < 1) return res;
|
||||
|
||||
// for "à l'ancienne" du C ou java. On ne peut pas faire bien mieux
|
||||
for (let i = start; i < stop; i += step) {
|
||||
res.push(i);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// //////////////////////////////////////////////////////////////////////////////
|
||||
// Exercice : Téléchargement asynchrone
|
||||
// //////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
function download_json(callback) {
|
||||
const url = 'https://perso.liris.cnrs.fr/romuald.thion/files/Enseignement/DIU-EIL/DIU-EIL-WEB.json';
|
||||
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(callback)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
// //////////////////////////////////////////////////////////////////////////////
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Document entièrement chargé.');
|
||||
document.getElementById('btn-exec').onclick= () => alert('clic');
|
||||
}, false);
|
||||
35
Formations/NSI/Bloc1/WEB/SuperTable/index.html
Executable file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<title>L'apprentissage de Linux</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Super table</h1>
|
||||
|
||||
<nav>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="corps">
|
||||
<table id="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Age</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="datatable">
|
||||
</tbody>
|
||||
</table>
|
||||
<button id="addRow" type="button">Ajouter ligne</button>
|
||||
</section>
|
||||
<footer>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
</html>
|
||||
103
Formations/NSI/Bloc1/WEB/SuperTable/script.js
Normal file
@@ -0,0 +1,103 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
|
||||
'use strict';
|
||||
|
||||
let datas = [
|
||||
{
|
||||
firstname: "Jill",
|
||||
lastname: "Smith",
|
||||
age: 50
|
||||
},
|
||||
{
|
||||
firstname: "Eve",
|
||||
lastname: "Jackson",
|
||||
age: 94
|
||||
},
|
||||
]
|
||||
|
||||
let editing = false;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateTable(datas);
|
||||
//console.log(Array.from(document.getElementsByClassName('modifier')));
|
||||
document.getElementById('addRow').onclick = () => appendQueryLine();
|
||||
}, false);
|
||||
|
||||
function toggleEditing() {
|
||||
editing = !editing
|
||||
}
|
||||
|
||||
function feedDatas (datas) {
|
||||
return datas.reduce( (acc, d) => {
|
||||
return acc.concat(`<tr>
|
||||
<th>${d.firstname}</th>
|
||||
<th>${d.lastname}</th>
|
||||
<th>${d.age}</th>
|
||||
<th><button class="modifier">Mod</button><button class="remover">Del</button></th>
|
||||
</tr>`)
|
||||
}, "")
|
||||
}
|
||||
|
||||
function updateTable () {
|
||||
let tbody = document.getElementById("datatable");
|
||||
tbody.innerHTML = feedDatas(datas)
|
||||
Array.from(document.getElementsByClassName('modifier')).map(d => d.onclick = () => modifyPersonne(d));
|
||||
}
|
||||
|
||||
function appendQueryLine () {
|
||||
if (!editing) {
|
||||
editing = true
|
||||
let tbody = document.getElementById("datatable");
|
||||
tbody.innerHTML += `<tr>
|
||||
<th><input id="firstname"></input></th>
|
||||
<th><input id="lastname"></input></th>
|
||||
<th><input id="age"></input></th>
|
||||
<th><button id="save">Ok</button><button id="cancel">Ann</button></th>
|
||||
</tr>`
|
||||
document.getElementById('save').onclick= () => savePersonne();
|
||||
document.getElementById('cancel').onclick= () => removeQueryLine();
|
||||
} else {
|
||||
console.log("Already editing")
|
||||
}
|
||||
}
|
||||
|
||||
function removeQueryLine () {
|
||||
if (editing) {
|
||||
feedDatas(datas)
|
||||
updateTable()
|
||||
toggleEditing()
|
||||
}
|
||||
}
|
||||
|
||||
function modifyPersonne (d) {
|
||||
toggleEditing()
|
||||
let cells = d.parentElement.parentElement.children
|
||||
|
||||
d.parentElement.innerHTML = `<button id="save">Ok</button><button id="cancel">Ann</button>`
|
||||
document.getElementById('save').onclick= () => savePersonne();
|
||||
document.getElementById('cancel').onclick= () => removeQueryLine();
|
||||
|
||||
let firstname = cells[0].firstChild.nodeValue
|
||||
let lastname = cells[1].firstChild.nodeValue
|
||||
let age = cells[2].firstChild.nodeValue
|
||||
|
||||
cells[0].innerHTML = `<input id="firstname" value=${firstname} ></input></th>`
|
||||
cells[1].innerHTML = `<input id="lastname" value=${lastname} ></input></th>`
|
||||
cells[2].innerHTML = `<input id="age" value=${age} ></input></th>`
|
||||
}
|
||||
|
||||
function savePersonne () {
|
||||
let firstname = document.getElementById("firstname");
|
||||
let lastname = document.getElementById("lastname");
|
||||
let age = document.getElementById("age");
|
||||
datas.push(
|
||||
{
|
||||
firstname: firstname.value,
|
||||
lastname: lastname.value,
|
||||
age: age.value
|
||||
}
|
||||
)
|
||||
updateTable()
|
||||
toggleEditing()
|
||||
}
|
||||
|
||||
53
Formations/NSI/Bloc1/WEB/SuperTable/style.css
Executable file
@@ -0,0 +1,53 @@
|
||||
body
|
||||
{
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section
|
||||
{
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
thead
|
||||
{
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
th
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
input
|
||||
{
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#mod
|
||||
{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
#del
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#cancel
|
||||
{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#save
|
||||
{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
42
Formations/NSI/Bloc1/WEB/heros/style.css
Executable file
@@ -0,0 +1,42 @@
|
||||
body
|
||||
{
|
||||
margin: 0px;
|
||||
margin: auto;
|
||||
max-width: 50rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section
|
||||
{
|
||||
height: 100vh;
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
text-align: center;
|
||||
margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
|
||||
}
|
||||
|
||||
nav
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
li:nth-child(2n+1) > a
|
||||
{
|
||||
background-color: lightgreen;
|
||||
border-radius: 60px;
|
||||
}
|
||||
li:nth-child(2n) > a
|
||||
{
|
||||
background-color: lightblue;
|
||||
border-radius: 60px;
|
||||
}
|
||||
204
Formations/NSI/Bloc1/WEB/heros/sujet.html
Normal file
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<title>Page HTML dont vous êtes le héros</title>
|
||||
</head>
|
||||
<body>
|
||||
<section id="sec1">
|
||||
<p>1. Alors que vous pénétrez dans les ruines du donjon,
|
||||
apparemment abandonnées,
|
||||
la lourde grille se referme derrière vous, comme par magie.
|
||||
Il va vous falloir trouver une autre sortie !</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#sec2">Rendez vous au 2</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<section id="sec2">
|
||||
<p>2. Vous êtes dans le hall d'entrée.
|
||||
La porte sud est toujours condamnée par une grille,
|
||||
mais trois autres portes sont encores ouvertes.</p>
|
||||
<nav><ul>
|
||||
<li><a href="#sec8">Pour aller à l'ouest, rendez vous au 8</a></li>
|
||||
<li><a href="#sec14">Pour aller au nord, rendez vous au 14</a></li>
|
||||
<li><a href="#sec10">Pour aller à l'est, rendez vous au 10</a></li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec3">
|
||||
<p>3. Plus au sud, un ébouli vous empêche de poursuivre plus loin.</p>
|
||||
<nav><ul>
|
||||
<li>Pour revenir sur vos pas, rendez vous au 16</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec4">
|
||||
<p>4. Vous entrez dans une grande pièce octogonale,
|
||||
munie de trois portes.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller au nord, rendez vous au 17</li>
|
||||
<li>Pour aller à l'est, rendez vous au 14</li>
|
||||
<li>Pour aller au sud, rendez vous au 8</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec5">
|
||||
<p>5. Au centre de la pièce se trouve une fosse sombre
|
||||
d'où sortent des grognements inquiétants.
|
||||
Au bord, un étroit passage relie les deux seules issues de la pièce.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 12</li>
|
||||
<li>Pour aller au sud, rendez vous au 9</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec6">
|
||||
<p>6. Vous êtes au pied d'un escalier de pierre qui monte vers l'est.
|
||||
Un couloir humide part vers le nord.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller au nord, rendez vous au 18</li>
|
||||
<li>Pour monter l'escalier, rendez vous au 16</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec7">
|
||||
<p>7. Vous marchez dans un couloit étroit qui tourne à angle droit.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 15</li>
|
||||
<li>Pour aller au sud, rendez vous au 11</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec8">
|
||||
<p>8. Vous êtes dans une salle sombre dont les seules issues sont
|
||||
à l'est et au nord.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller au nord, rendez vous au 4</li>
|
||||
<li>Pour aller à l'est, rendez vous au 2</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec9">
|
||||
<p>9. Vous vous trouvez dans une grande pièce circulaire,
|
||||
percée de trois portes.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 17</li>
|
||||
<li>Pour aller au nord, rendez vous au 5</li>
|
||||
<li>Pour aller à l'est, rendez vous au 18</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec10">
|
||||
<p>10. Ce couloir est un cul de sac.</p>
|
||||
<nav><ul>
|
||||
<li>Pour revenir sur vos pas, rendez vous au 2</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec11">
|
||||
<p>11. Cette salle a dû être autrefois une salle des gardes.
|
||||
Deux portes donnent vers l'ouest et le nord,
|
||||
tandis qu'une échelle au sud permet de monter sur les murailles.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 18</li>
|
||||
<li>Pour aller au nord, rendez vous au 7</li>
|
||||
<li>Pour monter à l'échelle, rendez vous au 16</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec12">
|
||||
<p>12. Vous marchez le long d'un large couloir
|
||||
formant une courbe régulière.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'est, rendez vous au 5</li>
|
||||
<li>Pour aller au sud, rendez vous au 17</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec13">
|
||||
<p>13. Vous attendez que vos yeux s'habituent à la lumière du soleil
|
||||
avant d'oser y croire, mais ça y est :
|
||||
vous êtes sorti du donjon !</p>
|
||||
</section>
|
||||
|
||||
<section id="sec14">
|
||||
<p>14. Vous êtes au pied d'une haute tour ronde.
|
||||
Deux portes donnent à l'ouest et au sud,
|
||||
et au centre, un escalier en colimaçon monte vers
|
||||
l'étage supérieur.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 4</li>
|
||||
<li>Pour aller au sud, rendez vous au 2</li>
|
||||
<li>Pour monter l'escalier, rendez vous au 19</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec15">
|
||||
<p>15. Vous êtes dans un grand hall,
|
||||
semblable à celui par lequel vous êtes entré dans le donjon.
|
||||
En plus de la porte par laquelle vous êtes arrivé à l'est,
|
||||
une lourde porte occupe la majeure partie du mur nord.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller au nord, rendez vous au 13</li>
|
||||
<li>Pour aller à l'est, rendez vous au 7</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec16">
|
||||
<p>16. Vous marchez sur ce qui doit être l'ancien chemin de ronde.
|
||||
L'à-pic vertigineux rend hélas impossible
|
||||
toute fuite depuis cet endroit.
|
||||
À l'extrémité nord, une échelle redescend à l'intérieur du donjon,
|
||||
tandis qu'un escalier de pierre descend vers l'ouest.
|
||||
Le chemin de ronde continue vers le sud.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 6</li>
|
||||
<li>Pour aller au nord, rendez vous au 11</li>
|
||||
<li>Pour aller au sud, rendez vous au 3</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec17">
|
||||
<p>17. Vous êtes dans une grand pièce,
|
||||
faiblement éclairée par des fenêtres grillagées infranchissables.
|
||||
Vous apercevez trois portes.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller au nord, rendez vous au 12</li>
|
||||
<li>Pour aller à l'est, rendez vous au 9</li>
|
||||
<li>Pour aller au sud, rendez vous au 4</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec18">
|
||||
<p>18. La lumière vous aveugle et
|
||||
vous croyez un moment avoir trouvé la sortie.
|
||||
Vous êtes en fait dans un ancien jardin intérieur,
|
||||
comme en témoignent les terre-pleins envahis par les mauvaises herbes
|
||||
et une fontaine asséchée.
|
||||
Sous les arcades, vous distinguez trois portes.</p>
|
||||
<nav><ul>
|
||||
<li>Pour aller à l'ouest, rendez vous au 9</li>
|
||||
<li>Pour aller à l'est, rendez vous au 11</li>
|
||||
<li>Pour aller au sud, rendez vous au 6</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
<section id="sec19">
|
||||
<p>19. Du sommet de la tour, vous pouvez voir la totalité du donjon,
|
||||
entouré de douves profondes.
|
||||
En plus du pont levis par lequel vous êtes entré, au sud,
|
||||
vous en apercevez un autre, sur la face nord.
|
||||
Votre espoir de fuite ?
|
||||
</p>
|
||||
<nav><ul>
|
||||
<li>Pour redescendre, rendez vous au 14</li>
|
||||
</ul></nav>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
Formations/NSI/Bloc1/WEB/index.rst
Normal file
@@ -0,0 +1,4 @@
|
||||
Notes du jours 2: WEB
|
||||
#####################
|
||||
|
||||
CSS zen garden
|
||||
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/IUTLyon1.jpg
Executable file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/IUTLyon1.png
Executable file
|
After Width: | Height: | Size: 14 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/NewTux.png
Executable file
|
After Width: | Height: | Size: 12 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/arch-logo.jpg
Executable file
|
After Width: | Height: | Size: 935 B |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/debian-logo.png
Executable file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/fondBeige.jpg
Executable file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/linux-mint-logo.jpg
Executable file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/mageia-logo.png
Executable file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/mint-logo.jpg
Executable file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Formations/NSI/Bloc1/WEB/sujet/assets/images/ubuntu-logo.jpg
Executable file
|
After Width: | Height: | Size: 1.2 KiB |
100
Formations/NSI/Bloc1/WEB/sujet/assets/style.css
Executable file
@@ -0,0 +1,100 @@
|
||||
body
|
||||
{
|
||||
margin: auto;
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
header
|
||||
{
|
||||
border-bottom: 2px solid green;
|
||||
}
|
||||
|
||||
header>img,h1
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
nav
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav>ul
|
||||
{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
nav>ul>li
|
||||
{
|
||||
display: inline;
|
||||
color: green;
|
||||
border: solid;
|
||||
border-width: 2px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
nav>ul>li:hover
|
||||
{
|
||||
background-color: green;
|
||||
}
|
||||
nav>ul>li>a
|
||||
{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
section
|
||||
{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
article
|
||||
{
|
||||
float: left;
|
||||
width: 65%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
aside
|
||||
{
|
||||
float: right;
|
||||
width: 30%;
|
||||
background-color: lightgreen;
|
||||
border: unset;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#logos_distrib
|
||||
{
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
footer
|
||||
{
|
||||
clear: left;
|
||||
display: block;
|
||||
border-top: 2px solid green;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer>ul>li
|
||||
{
|
||||
/*border: solid;*/
|
||||
display: inline;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
footer>ul>li:first-child
|
||||
{
|
||||
border-right: 2px solid black;
|
||||
}
|
||||
footer>ul>li:last-child
|
||||
{
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
85
Formations/NSI/Bloc1/WEB/sujet/index.html
Executable file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="assets/style.css">
|
||||
<title>L'apprentissage de Linux</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="assets/images/NewTux.png" alt="Le Pingouin de Linux" />
|
||||
<h1>Linux à l'IUT</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Accueil</a></li>
|
||||
<li><a href="#">SE Linux</a></li>
|
||||
<li><a href="#">Programmation Système</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="corps">
|
||||
|
||||
<article>
|
||||
<h1>Historique de l'enseignement de linux à l'IUT</h1>
|
||||
<p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati
|
||||
recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod
|
||||
contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem
|
||||
formidine tenus iusserim custodiri.</p>
|
||||
|
||||
<p>Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam
|
||||
mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet
|
||||
illa quidem gravitatem, sed amicitia remissior esse debet et liberior et
|
||||
dulcior et ad omnem comitatem facilitatemque proclivior.</p>
|
||||
|
||||
<p>Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex
|
||||
praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum
|
||||
artium nondum per aetatem firmato consilio descripsisse, exulque mittendus,
|
||||
ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius
|
||||
comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae
|
||||
consulari cecidit funesti carnificis manu.</p>
|
||||
|
||||
<p>Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis
|
||||
et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae
|
||||
subsederat extimas partes, novum parumque aliquando temptatum commentum
|
||||
adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem
|
||||
quod cogitabat huius modi.</p>
|
||||
|
||||
<p>Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice
|
||||
Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus
|
||||
ac lege, incertum qua potuit suffragatione absolvi, aperte convictus familiarem
|
||||
suum cum pileo, quo caput operiebat, incantato vetitis artibus ad templum
|
||||
misisse fatidicum, quaeritatum expresse an ei firmum portenderetur imperium,
|
||||
ut cupiebat, et cunctum.</p>
|
||||
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<section>
|
||||
<h1>Choisir sa distribution</h1>
|
||||
<p id="logos_distrib">
|
||||
<img src="assets/images/mint-logo.jpg" alt="Logo de Mint" />
|
||||
<img src="assets/images/debian-logo.png" alt="Logo de Debian" />
|
||||
<img src="assets/images/ubuntu-logo.jpg" alt="Logo d'Ubuntu" />
|
||||
<img src="assets/images/mageia-logo.png" alt="Logo de Mageia" />
|
||||
<img src="assets/images/arch-logo.jpg" alt="Logo d'Arch-linux" />
|
||||
</p>
|
||||
<p>Des étudiants et des enseignants peuvent vous conseiller.</p>
|
||||
<p>Vous pouvez également consulter <a href="http://distrowatch.com/dwres.php?resource=major&language=FR">ce site</a>
|
||||
pour commencer à vous faire une idée.</p>
|
||||
</section><section>
|
||||
<h1>Installer Linux</h1>
|
||||
<p>Avec une machine virtuelle, en dual-boot, sur un live-CD ou comme seul système sur vos machines, peu importe. Ce qui compte, c'est de pratiquer (dans le terminal).</p>
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
<footer>
|
||||
<ul>
|
||||
<li>Réalisé avec Notepad++</li>
|
||||
<li>HTML5 valide</li>
|
||||
<li>CSS valide</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||