Étiquette : CSS

Projets

PhpMonDésastre


Dans le cadre du projet SGBDR, j’ai eu l’occasion de créer un site Internet en PHP. Je vous propose donc de découvrir mon projet, nommé phpMonDésastre. Il s’agit d’une version simplifiée de phpMyAdmin qui vous permet d’interagir de manière simplifiée avec une base de données.

Idée

Mon idée était de créer une version simplifiée de phpMyAdmin où les utilisateurs pourraient venir interagir de manière minimaliste avec une base de données et observer les résultats. Cette version, que je nommerais phpMonDésastre, devrait suivre les règles du CRUD, c’est-à-dire Créer, Lire, Mettre à jour et Supprimer.

Cahier des charges

Pour accéder à mon site, les utilisateurs doivent d’abord se connecter à leur session. S’ils n’ont pas de compte, ils devront en créer un. Une fois connectés, ils pourront parcourir les différentes tables de la base de données ainsi que leur contenu. Ensuite, ils auront la possibilité d’exécuter uniquement quatre types de commandes respectant la règle CRUD : créer une table, ajouter du contenu à une table, modifier le contenu d’une table et supprimer une table. Cela permettra de limiter les possibilités des utilisateurs afin d’éviter les abus de la base de données mise à leur disposition.

Mise en place


Pour mettre en place ce projet, il faut commencer par mettre en place une base de données qui contiendra les informations des comptes utilisateurs et qui recevra ces expériences des utilisateurs.

<?php
/*On se connecte à la base de données en entrant les informations nécessaires,
telles que le nom de l'hôte, le nom de la base, les identifiants et le mot de passe.
Ensuite, on définit cette connexion sur la variable $mysqlClient que l'on utilisera
pour gérer toutes les requêtes SQL. 
On permet aussi l'affichage des erreurs pour pouvoir déboguer plus facilement*/
$sql_host="";
$sql_id="";
$sql_password="";
$sql_dbname="";

try {
    $mysqlClient = new PDO(sprintf('mysql:host=%s;dbname=%s;charset=utf8', $sql_host, $sql_dbname),
    $sql_id,
    $sql_password);

    $mysqlClient->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (Exception $exception) {
    die('Erreur : ' . $exception->getMessage());
}



Ensuite, on met en place la page de connexion. D’abord, on s’occupe de la partie frontend, puis de la partie backend.

<!DOCTYPE html>
<html lang="fr" >
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
 <body>
    <?php if (!isset($_SESSION['LOGGED_USER'])) : ?> // On vérifie si l'utilisateur est connecté.
        <center><div class = "message">
            <?php if (isset($_SESSION['LOGIN_ERROR_MESSAGE'])) : ?> // Si une erreur survient, on l'affiche.
                <?php echo $_SESSION['LOGIN_ERROR_MESSAGE'];
                unset($_SESSION['LOGIN_ERROR_MESSAGE']); ?> // Une fois affichée, on l'enlève.
            <?php endif; ?>
            <?php if (isset($_SESSION['SIGNUP_ERROR_MESSAGE'])) : ?> // de même avec les erruer pour l'incription
                <?php echo $_SESSION['SIGNUP_ERROR_MESSAGE'];
                unset($_SESSION['SIGNUP_ERROR_MESSAGE']); ?>
            <?php endif; ?>
        </div></center>
        <section class = "fond-noir"> 
            <div class="signin"> 
                <div class="content"> 
                    <h2>Sign In</h2> 
                        <form class = 'form' action="submit_login.php" method="POST"> 
                            <div class="inputBox" action="submit_login.php" method="POST"> // Boîte pour demander l'adresse e-mail.
                                <input type="Email" name="email" required> <i>Username</i> 
                            </div> 
                            <div class="inputBox" action="submit_login.php" method="POST"> // Boîte pour demander le mot de passe.
                                <input type="password" name="password" required> <i>Password</i> 
                            </div> 
                            <div class="links"> 
                                <a href="forgot_psw.php">Forgot Password</a> <a href="sing_up.php">Signup</a> // Bouton renvoyant vers la page de réinitialisation de mot de passe et la page d'inscription.
                            </div> 
                            <div class="inputBox"> 
                                <input type="submit" value="Login"> // Envoyer la requête de connexion.
                            </div>
                        </form>
                    </div> 
                </div> 
            </div> 
        </section>
    <?php endif; ?>
 </body>
</body>
</html>
<?php
// On démarre la session.
session_start();
/* On importe les différentes pages PHP nécessaires pour l'utilisation complète du script,
telles que "databaseconnect.php" mentionnée ci-dessus pour se connecter à la base de données.*/
require_once(__DIR__ . '/config/mysql.php');
require_once(__DIR__ . '/databaseconnect.php');
require_once(__DIR__ . '/variables.php');
require_once(__DIR__ . '/functions.php');

$postData = $_POST;

// On vérifie que les informations demandées soient bien rentrées.
if (isset($postData['email']) && isset($postData['password'])) { 
  	// On vérifie la validité de l'email fourni.
    if (!filter_var($postData['email'], FILTER_VALIDATE_EMAIL)) {
        $_SESSION['LOGIN_ERROR_MESSAGE'] = 'Il faut un email valide pour soumettre le formulaire.';
    } else {
      	// On vérifie la présence des informations données dans la base de données.
        foreach ($users as $user) {
            if (
                $user['email'] === $postData['email'] &&
                $user['password'] === $postData['password']
            ) {
                $_SESSION['LOGGED_USER'] = [
                    'email' => $user['email'],
                    'user_id' => $user['user_id'],
                ];
            }
        }
		// Si elles ne sont pas présentes dans la base de données, on renvoie une erreur.
        if (!isset($_SESSION['LOGGED_USER'])) {
            $_SESSION['LOGIN_ERROR_MESSAGE'] = sprintf(
                'Les informations envoyées ne permettent pas de vous identifier : (%s/%s)',
                $postData['email'],
                strip_tags($postData['password'])
            );
        }
      // De même pour la page d'inscription.
        if (isset($_SESSION['SIGNUP_ERROR_MESSAGE'])) {
            $_SESSION['SIGNUP_ERROR_MESSAGE'] = sprintf(
                'Les informations envoyées ne permettent pas de vous inscrire'
            );
        }
    }

    redirectToUrl('index.php');
}


En ce qui concerne la page d’inscription, c’est à peu près le même principe, sauf qu’au lieu de vérifier la présence des informations entrées dans la base de données, on les inscrit dans celle-ci avant de rediriger l’utilisateur vers la page de connexion afin qu’il puisse se connecter avec son profil fraîchement créé.


Une fois cette étape franchie, vous arrivez sur une page de connexion semblable à celle-ci :


Une fois connecté, on arrive sur la page principale.

Pour concevoir la page principale, j’ai élaboré une maquette que je suivrai pour la création de la page :

Tout d’abord, nous procédons à l’affichage des tables :

<form class="form" action="index.php" method="post"> // Affichage des tables
    <?php foreach ($TABLES as $table) : ?>
         <?php if ($table[0] === 'users') : ?>
         <?php else : ?>
             <input type="checkbox" value="<?= $table[0] ?>" name="choix_cle" onchange="disableOtherCheckboxesTable(this)" <?= isset($_SESSION['choix_cle']) && $_SESSION['choix_cle'] === $table[0] ? 'checked' : '' ?>>
             <label for="<?= $table[0] ?>"> <?= $table[0] ?></label><br>
         <?php endif ?>
    <?php endforeach; ?>
    <div calss = "case-boutton">
         <input class="submit-bouton" type="submit" value="Valider">
    </div>
</form>

L’affichage des colonnes :

<form class="form" action="index.php" method="post">
     <?php foreach ($CLE as $clecle) : ?>
          <input type="checkbox" name="choix_contenu" value="<?= $clecle['Field'] ?>" <?= isset($_POST['choix_contenu']) && $_POST['choix_contenu'] === $clecle['Field'] ? 'checked' : '' ?>>
          <label for="<?= $clecle['Field'] ?>"> <?= $clecle['Field'] ?></label><br>
     <?php endforeach; ?>
     <div calss = "case-boutton">
          <input class="submit-bouton" type="submit" value="Valider">
     </div>
</form>

L’affichage du contenu :

<form class="form" action="index.php" method="post">
     <?php foreach ($CONT as $cont1) : ?>
          <?php foreach($cont1 as $cont2) : ?>
               <input type="checkbox" name="choix_contenu" value="<?= $cont2 ?>" <?= isset($_POST['choix_contenu']) && $_POST['choix_contenu'] === $cont2 ? 'checked' : '' ?>>
               <label for="<?= $cont2 ?>"> <?= $cont2 ?></label><br>
          <?php endforeach; ?>
     <?php endforeach; ?>
</form>

Ensuite, on procède à l’affichage des commandes :

<div class="div-submit-bouton">
     <form class="form" action="index.php" method="post">
          <center>
          CREATE TABLE IF NOT EXISTS <input class="inputBox2" type="text" name="cree_table" required> (<br><input class="inputBox1" type="text" name="cree_cont" required>);
          <input class="submit-bouton2" type="submit" value="Crée une table"/>
          </center>
     </form>
     <form class="form" action="index.php" method="post">
          <center>
          INSERT INTO <input class="inputBox2" type="text" name="ajout_table" required> (<input class="inputBox2" type="text" name="ajout_valeurs1" required>) VALUES (<input class="inputBox2" type="text" name="ajout_valeurs2" required>);
          <input class="submit-bouton2" type="submit" value="Ajouté"/>
          </center>
     </form>
     <form class="form" action="index.php" method="post">
          <center>
          UPDATE <input class="inputBox2" type="text" name="modif_table" required> SET <input class="inputBox2" type="text" name="modif_def" required> WHERE <input class="inputBox2" type="text" name="modif_condi" required>;
          <input class="submit-bouton2" type="submit" value="Modifier"/>
          </center>
     </form>
     <form class="form" action="index.php" method="post">
          <center>
          DROP TABLE <input class="inputBox2" type="text" name="drop_table" required>;
          <input class="submit-bouton2" type="submit" value="Supprimé"/>
          </center>
     </form>
</div>

Et voici le résultat :

Conclusion

En conclusion, phpMonDésastre représente une tentative de créer une version simplifiée de phpMyAdmin, offrant une interaction minimale avec une base de données. Bien que le projet suive les principes du CRUD et offre des fonctionnalités de base telles que la création, la lecture, la mise à jour et la suppression de données, il reste encore des améliorations à apporter. L’intégration de fonctionnalités supplémentaires et l’amélioration de l’interface utilisateur pourraient rendre cette plateforme plus conviviale et fonctionnelle. En fin de compte, phpMonDésastre constitue un premier pas vers un outil de gestion de base de données simplifié, mais il reste encore du travail à faire pour atteindre son plein potentiel.

Dans le lien de téléchargement ci-dessous, vous trouverez le projet dans son intégralité. Si vous utilisez un environnement local, vous devrez utiliser XAMPP pour exécuter PHP. Si vous hébergez le projet sur un serveur, vous devrez modifier la configuration de « databaseconnect.php » comme présenté précédemment.

Tutoriels

Comment faire un site dynamique en html

Pour débuter ce tutoriel, je vous accompagnerai à travers les étapes de création d’un document HTML en utilisant Notepad++. Suivez attentivement ces quelques instructions.

Premier pas dans la conception d’un site web / création du document HTML

ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille

  • appuyer sur fichier > enregistrer sous…
  • nommer le fichier « index » et sélectionner comme type de ficher « Hyper Text Markup Language file »

Associer un fichier CSS au document HTML

Le CSS est un langage utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler la mise en page, le style visuel, etc.. sur les sites web. Le CSS est un moyen avancé pour personnaliser l’apparence des pages des sites web.

Pour la création du fichier CSS seulement quelques étapes sont nécessaires :

  • ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille
  • appuyer sur fichier > enregistrer sous…
  • nommer le fichier avec à la fin un .css ( exemple : fraise.css, pomme.css, etc.. )
  • taper dans le fichier index le morceau de code suivant sur la 4EME IMAGE

Dans mon cas, j’ai nommé mon fichier CSS « fraise ». Vous devez donc simplement le remplacer par le nom que vous avez choisi au préalable.

Si vous souhaitez également ajouter un fichier JavaScript, il vous suffit simplement de répéter les mêmes étapes, mais en remplaçant le .css par .js.

Après la finalisation de la création de tous vos documents, vous pouvez ainsi explorer un monde de possibilités créatives. Votre document HTML définit la structure de votre site, tandis que le fichier CSS donne vie à votre créativité. Ensemble, ils forment la base d’une expérience web unique. Par la suite, je vais vous présenter plusieurs possibilités de personnaliser votre site web.

Une barre de navigation

La barre de navigation d’un site web, également appelée menu, joue un rôle essentiel pour faciliter la navigation pour les utilisateurs. Elle offre une structure organisée, permettant un accès rapide aux différentes sections du site. En fournissant des liens vers des pages clés telles que l’accueil, les informations à propos du site et les contacts.

Je vais vous proposer un exemple simple et efficace pour votre barre de navigation, avec la possibilité de la personnaliser selon vos préférences, notamment grâce à la feuille de style CSS.

HTML :

<!DOCTYPE html>
<html>
<head>
<title>La Photographie</title>
<link rel="stylesheet" type="text/css" href="css/fraise.css">
</head>
<body>
     <div class="menu">
     <div class="logo"><h1>LA PHOTOGRAPHIE</h1></div>
        <ul>
            <li><a href="a">HOME</a></li>
            <li><a href="a">HISTOIRE</a></li>
            <li><a href="a">APPROVISIONNEMENT</a></li>
            <li><a href="a">AUTRES</a></li>
        </ul>

</body>
</html>

CSS :

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}
body {
    background-color: #656565;
    color: #000;
}
.logo {
    font-size: 1.5rem;
    font-weight: 700;
}
.menu a{
    color: #000;
}
.menu ul{
    position: absolute;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    font-weight: 600;
}
a:hover{
    border: 2px solid black;
    border-radius: 50px;
    padding: 5px;
}

Donc, ceci n’est qu’un exemple parmi d’autres, et il est facilement modifiable selon ses préférences. Pour lier les différents boutons aux pages respectives, il suffira simplement de remplacer les a entre les guillemets par le lien vers l’autre document ou son nom.

Faire apparaître un texte

Voici un exemple amélioré vous permettant d’afficher un texte avec un effet spécial en utilisant le document HTML associé à une feuille de style CSS. Cela donnera vie à votre texte et animera votre page web.

HTML :

<!DOCTYPE html>
<html>
<head>
<title>La Photographie</title>
<link rel="stylesheet" type="text/css" href="css/fraise.css">
</head>
<body>
<div class="container">
    <div class="texte">
       Exemple 123
    </div>
</div>
</body>
</html>

CSS :

.container {
  height: 100vh;
}

.texte {
  width: 22ch;
  animation: typing 2s steps(10); 
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid;
  font-size: 5em;
}

@keyframes typing {
  from {
    width: 0
  }
}


La partie steps(10) dans la feuille de style CSS devra probablement être modifiée en fonction du nombre de caractères que comporte votre texte. Il faut remplacer le 10 par le nombre souhaité.

DS

Correction du sujet de l’épreuve Blanche de 1ère NSI,…

Dans le cadre de l’évaluation en contrôle continu, les élèves étudiant la spécialité NSI passent des épreuves de de contrôle continu lors du troisième trimestre de leur année de première.

Introduction

Les épreuves de la session 2021 ont été annulés, mais les épreuves blanches dans notre établissement ont été maintenues.

Nous vous proposons la correction de cette épreuve. Elle contient 40 questions de la banque officielle des sujets ainsi qu’une question « One More Thing » sur deux points. Il est néanmoins hypothétiquement possible que certaines des réponses proposées dans ce sujet ne soient pas à 100 % « totalement officielles ».

Le sujet est disponible en version PDF :

Cette correction a été entièrement préparé et rédigé sur ce site web par nos élèves de la spécialité NSI du lycée Louis Pasteur.

Les sujets sont sous licence CC BY-NC-SA 3.0 FR, le présent corrigé est sous la même licence.

Thème A : types de base

Question A.1
Quel est un avantage du codage UTF8 par rapport au codage ASCII ?

Réponses
A. il permet de coder un caractère sur un octet au lieu de deux
B. il permet de coder les majuscules
C. il permet de coder tous les caractères
D. il permet de coder différentes polices de caractères
E. UTF8 permet de descendre de la montagne même quand ASCII ce n’est pas possible.

Correction : Réponse C
Après une très longue réflexion, la E nous semblait être la plus pertinente. Néanmoins n’aimant pas le Ski mais préférant la course à pied, nous avons plutôt choisi la C. En effet UTF8 permet de coder tous les caractères et même le très franchouillard « Â » ou encore le « ß » de nos cousins germains.

Question A.2
On considère les codes ASCII en écriture hexadécimale (en base 16).Retour ligne automatique
Le code ASCII de la lettre A est 0x41, celui de la lettre B est 0x42, celui de la lettre C est 0x43, etc. Quel est le code ASCII, en hexadécimal, de la lettre X (c’est la 24e lettre de l’alphabet usuel).

Réponses
A. 0x58 
B. 0x64 
C. 0x7A
D. 0x88

Correction : Réponse A
Ici le piège si on ne lisait que les chiffres c’était de croire que le X qui est la 24 ème lettre de l’alphabet usuel (soit la 24 lettre en décimal). On additionnait donc des décimaux et des hexadécimaux et paf, on tombait en plein dans l’erreur. Il faut donc convertir 23 (car il y a 23 d’écart entre A et X) en hexadécimal, puis l’additionner à l’hexadécimal de A. Et paf, ça fait des chocapics (où plutôt 0x58) !

Question A.3
Quelle est la représentation en binaire de l’entier 64 sur un octet ?

Réponses
A. 0101 0000
B. 1100 0100
C. 0100 0000
D. 0000 1100

Correction : Réponse C
C’est dans cette question où on verra qui sont les béotiens du binaire, je crois qu’on ne peut faire plus simple, tomberas-tu dans le piège qui te dit que c’est trop facile donc tu coches autre chose (d’illogique evidemment) puis en fait il s’avère que tu avais raison, donc tu as un énorme seum pasque tu sais que tu avais bon. Bref, j’espère que tu as la C sinon tu crains.

Question A.4
Quelle est l’écriture hexadécimale de l’entier dont la représentation en binaire non signé est 1100 0011 ?

Réponses
A. BB
B. C3
C. CB
D. 7610

Correction : Réponse B
Excepté si vous souhaitez vous rendre dans le chaleureux (et très perdu) canton d’Eu, ou avoir une carte bancaire, ou même écraser un bébé (???), euuu je vous conseille de prendre la Citroen C3, c’est la plus fiable et vous aurez moins de problèmes.

Thème B : types construits

Question B.1
On considère le script suivant :

t = [2, 8, 9, 2]
t[2] = t[2] + 5

Quelle est la valeur de t à la fin de son exécution ?

Réponses
A. [42, 13, 9, 2]
B. [2, 8, 14, 2]
C. [7, 13, 14, 7]
D. [7, 13, 9, 42]

Correction : Réponse B
Bon, même si le 42 attire inéluctablement nos regards, on doit l’oublier (excusez nous). Ça nous laisse plus que deux possibilités, B et C. Si vous vous débrouillez super bien en calcul mental, vous verrez que 9+5=14. Vérifier le calcul si vous doutez évidemment, je ne suis sure de rien. Donc, on remplace à l’indice 2 (n’oubliez pas qu’on commence avec l’indice 0 dans une liste) avec votre calcul effectué avec brio ci-dessus. On se demande où ils sortent leur réponse C quand même.

Question B.2
Que vaut l’expression [ 2*k for k in range(5) ] ?

Réponses
A. [0,2,4,6,8]
B. [2,4,6,8,10]
C. [1,2,4,8,16]
D. [2,4,8,16,32]

Correction : Réponse A
Une seule réponse sera l’élue, avec un zéro dedans puisque le inrange(5) démarre dès 0, donc sauf si vous avez des problèmes de vue, ou autres hein (ignare), impossible de trouver autre chose.

Question B.3
Après l’affectation suivante :

alphabet = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ]

quelle est l’expression qui permet d’accéder à la lettre E ?

Réponses
A. alphabet[42]
B. alphabet[’E’]
C. alphabet[4]
D. alphabet[5]

Correction : Réponse C
Donc, pour trouver l’expression qui permet d’accéder à la lettre E, il suffit de compter à quel rang elle est dans l’alphabet. Ensuite il nous faut retrancher à ce nombre 666, puis ajouter un peu de poudre de perlimpinpin de 69, quelques carabistouilles de 42 et enfin, traverser 120 fois la rue pour trouver un travail. Et voilà ! Vous tombez sur la réponse C (le premier indice de la liste est 0).

Question B.4
On définit le dictionnaire d = ’a’ : 1, ’b’ : 2, ’c’ : 3, ’z’ : 26. Quelle expression permet de récupérer la valeur de la clé ’z’ ?

Réponses
A. d[4]
B. d[26]
C. d[z]
D. d[’z’]

Correction : Réponse D
Vous savez utiliser un dictionnaire ? Et ben voilà c’est pareil ! On cherche la “définition” (appelée ici “valeur”) de “z” donc tape donc la réponse D, et magie on a comme retour la valeur de “z”.

Question B.5
On définit : L​ = [10,9,8,7,6,5,4,3,2,1] Quelle est la valeur de L[L[3]] ?

Réponses
A. 3
B. 4
C. 7
D. 8

Correction : Réponse A

Il faut apprendre à décomposer on cherche donc le retour de la liste L d’indice de la valeur de l’indice 3 de la liste L. Autrement dit, on regarde la valeur d’indice trois. Comptons :
1, 2, 3 ; c’est donc “8” ! Et bien non chers nsistes ! Il ne faut pas oublier que pour une liste en Python, la première valeur est celle d’indice “0”. Donc la valeur d’indice “3” est “7” !
On cherche ensuite la valeur de la liste d’indice “7” ; soit “3” !!

Question B.6
On exécute le code suivant :

A = [ [ 1 , 2 , 3 ], [ 4 , 5 , 6 ], [ 7 , 8 , 9 ] ] 
B = [ [ 0 , 0 , 0 ], [ 0 , 0 , 0 ], [ 0 , 0 , 0 ] ] 
for i in range( 3 ):
	for j in range( 3 ): 
		B[i][j] = A[j][i]

Que vaut B à la fin de l’exécution ?

Correction : Réponse C

Pour l’audace, la E. Nan plus sérieusement, il faut d’abord comprendre ce que fait le programme. On se rend compte que la liste B va être « remplie » des éléments de la liste A mais pas dans l’ordre, seulement, il y a des petits pièges, puisque le programme ne fait pas qu’inverser la liste, mais les indices de la liste. Ainsi pour une valeur de B ; soit B[i][j], on mettra la valeur de A[j][i]. 
Un exemple parle toujours mieux : 
Si on a B[1][2] ; soit la troisième valeur de la deuxième sous-liste de B, on va y mettre comme valeur, celle de A[2][1] ; soit 8 !

Thème C : traitements de données en table

Question C.1
On définit la fonction suivante qui prend en argument un tableau non vide d’entiers :

def f (T) : 
    s = 0
    for k in T: 
        if k == 8 :
            s = s+ 1 
        if s > 1 :
            return True 
        else :
            return False

Dans quel cas cette fonction renvoie-t-elle la valeur True ?

Réponses
A. dans le cas où 8 est présent au moins une fois dans le tableau T
B. dans le cas où 8 est présent au moins deux fois dans le tableau T 
C. dans le cas où 8 est présent exactement une fois dans le tableau T 
D. dans le cas où 8 est présent exactement deux fois dans le tableau T
Correction : Réponse B

Question C.2
Soit le tableau défini de la manière suivante :
tableau = [[​1​,​3​,​4​],[​2​,​7​,​8​],[​9​,​10​,​6​],[​12​,​11​,​5​]]
On souhaite accéder à la valeur 12, on écrit pour cela :
Réponses
A. tableau[4][1]
B. tableau[1][4]
C. tableau[3][0]
D. tableau[0][3]

Correction : Réponse C
Encore une fois on a affaire à ces foutus tableaux de tableaux grrrr, bref simplement de la logique, comme dhab vous avez l’indice 0 en premier, donc pour trouver 12, selon ce raisonnement foncièrement bon, vous allez au tableau 3, indice 0 (pasque on va du plus grand au plus petit, bref si tu comprends pas va voir ton cours loulou).

Question C.3
On définit :

contacts = { 'Toto' : 'toto@nsi.fr' , 'Chloé' : 'chloe@nsi.com' , 'Paul' :'paul@nsi.net' , 
            'Clémence' : 'clemence@nsi.org' }

Parmi les propositions suivantes, laquelle est exacte ?

Réponses
A. ’Chloé’ est une valeur de la variable contacts
B. ’Chloé’ est une clé de la variable contacts
C. ’Chloé’ est un attribut de la variable contacts
D. ’Chloé’ est un champ de la variable contacts
E. ’Chloé’ a été identifiée “cas contact” par le ministère de l’éducation nationale

Correction : Réponse B
Si j’étais vous je m’approcherais pas de Chloé. Bon ça fait une semaine maintenant, vous pouvez aller lui faire plein de poutoux ! Si vous voulez quand même la dm, vous lui envoyez un petit mail 😉 Bref, quesque chloé ? Nan c’est pas une personne débilos, c’est la clé de ton cœur (oof) :)) Donc grâce à la force de l’amour tu as trouvé la réponse !

Question C.4 (Pas Picasso)
Laquelle de ces listes de chaînes de caractères est triée en ordre croissant ?

Réponses
A. [’Chat’, ’Chien’, ’Cheval’, ’Cochon’] 
B. [’Chat’, ’Cheval’, ’Chien’, ’Cochon’] 
C. [’Chien’, ’Cheval’, ’Cochon’, ’Chat’] 
D. [’Cochon’, ’Chien’, ’Cheval’, ’Chat’]

Correction : Réponse B
On ne parle pas d’ordre croissant de préférence, nan nan, mais bien au niveau de la place des lettres dans l’alphabet. Étant tous des non illettrés, nous savons que O est après H, et que E avant I, donc sauf si vous lisez à l’envers, quoique très courant de nos jours, je vous propose la réponse B (en plus le chat est clairement au dessus du cheval, du chien et du cochon, c’est pas pour rien qu’il était adulé en Egypte hein).

Thème D : interactions entre l’Homme et la Machine sur le Web

Question D.1
Par quoi commence l’URL d’une page Web sécurisée ?

Réponses
A. http 
B. https 
C. ftp 
D. smtp

Correction : Réponse B
Regarde l’URL de ton site préféré (nsi.xyz evidemment), il y aura toujours “http” mais si tu veux être sur que ce site est sécurisé il y aura un “s” comme pour “sécurité_juste_pour_toi”. Tu pourras donc livrer tes informations les plus privées à Google comme tes mot de passe, tes codes de carte bleu, etc… (même si il sait déjà tout 🤫).

Question D.2
Quelle méthode d’envoi des paramètres est-il préférable d’utiliser, pour un formulaire d’une page web, destiné à demander à l’utilisateur un mot de passe pour se connecter (le protocole utilisé est HTTPS) ?

Réponses
A. la méthode PASSWORD 
B. la méthode CRYPT
C. la méthode GET 
D. la méthode POST

Correction : Réponse D
Euuuuuu alors, non ca peut pas etre un caveau souterrain servant de sépulcre, ni un mot de passe (oui vous avez vu on parle couramment anglais ici). Plus que 2 possibilités, mais seule la méthode POST vous permet d’entrer un mdp sur un site sécurisé (qui va encore sur ce genre de site mon dieuuuuu).

Question D.3
Parmi les langages suivants, lequel est exécuté sur le serveur lors de la consultation d’une page Web ?

Réponses
A. JavaScript
B. HTML 
C. CSS 
D. PHP

Correction : Réponse D
Le PHP, c’est lourd, complexe ! C’est pour cela que ce langage s’exécute côté serveur. Sinon ça serait trop complexe pour ton ordi qui a fait les 2 guerres mondiales. On laisse tous ces calculs à des supers machines de la mort qui tuent, et comme ça toi, t’es tranquille.

Question D.4
Quelle est la machine qui exécute un programme JavaScript inclus dans une page HTML ?

Réponses
A. le serveur WEB qui contient la page HTML 
B. la machine de l’utilisateur qui consulte la page HTML 
C. un serveur du réseau 
D. un routeur du réseau

Correction : Réponse B
Une fois que tu as reçu les programmes venant du serveur, alors tout se fait sur ta machine, y compris les programmes JavaScript. Au passage, une petite astuce, si sur ton site tu appelles un script JS, appelle le à la fin de ton script HTML, comme ça la page s’affiche et après calcul le Java (ce qui est donc “plus mieux” rapide).

Question D.5
Quelle est la balise HTML utilisée pour indiquer un titre de niveau d’importance maximum ?

Réponses
A. la balise <h0>
B. la balise <h1>
C. la balise <head>
D. la balise <header>

Correction : Réponse B
Bon, j’ai vraiment besoin de développer ça ?! Juste tu veux un titre en HTML, alors tu utilises <h1>.

Question D.6
Dans le code HTML les délimiteurs tels que et s’appellent ?

Réponses
A. des bornes
B. des balises
C. des paragraphes
D. des liens

Correction : Réponse Ø
Bhahahahahah là y a pas de réponse, juste tu marques que le prof a fait une erreur –oui les profs en font-, ducoup t’as un point gratos et ça fait assez plaiz surtout quand tu verras ta note (oof).

Question D.7
Parmi GET et POST, quelle méthode d’envoi de formulaire crypte les informations envoyées au serveur ?

Réponses
A. les deux : GET et POST
B. GET seulement
C. POST seulement
D. aucune des deux

Correction : Réponse D
GET et POST sont fourbes ! Ces deux méthodes sont hyper utiles, MAIS elles ne cryptent rien, ce qui n’est pas vraiment super pour nous… Mais pas le choix d’utiliser autre chose, tant pis 🤷‍♂️ (si on peut utiliser https au moins c’est crypté ! mais si on utilise get alors ça apparaît dans l’url donc pas ouf ! Le nec ++ ultra c’est donc POST + HTTPS mais bon on sait pas pour la NSA (pas encore…)).

Question D.8
Parmi les éléments suivants, lequel est un protocole ?

Réponses
A. GET
B. POST
C. HTTP
D. HTML

Correction : Réponse C
GET et POST étaient précédemment définis comme étant des méthodes, donc pourquoi ça deviendrait un protocole ???? La réponse est vraiment dans les questions précédentes, donc bon, je sais pas quoi vous dire de plus mmmmmm. HTML est un langage de balisage, tout comme LateX, plus qu’une réponse, faites par élimination (même si devant la copie j’avoue qu’on panique).

Question D.9
Pour créer un lien vers la page d’accueil de Wikipédia, que devra-t-on écrire dans une page Web ?

Réponses
A. <​a target="http://fr.wikipedia.org">Wikipédia</a>
B. ​<a href="http://fr.wikipedia.org" />
C. <​a href="http://fr.wikipedia.org">Wikipédia</a>
D. ​<link src="http://fr.wikipedia.org">Wikipédia</link>

Correction : Réponse C
OUIII WIKIPEDIA, on va encore pouvoir faire toutes nos recherches dessus (sans tricher), et c’est les profs qui nous donnent le droit donc, tout est permis !!!! Bon la si vous trouvez pas le bon vous craignez, ça on l’a vu en SNT (vous avez eu la chance de le voir ; nuance), même si oui on a rien fait dans cette matière l’année dernière, je l’admet, ON A QUAND MÊME VU LES LIENS, cherchez pas des excuses.

Thème E : Architectures matérielles et système d’exploitation

Question E.1
Identifier parmi les éléments suivants celui qui n’est pas un capteur.
A. haut-parleur 
B. caméra 
C. accéléromètre 
D. microphone

Correction : Réponse A
Essayez de crier dans un haut-parleur. Bravo vous avez cassé la membrane de la Devialet à 1500 € !! Vous avez plus qu’à prendre des écouteurs de Ryanair en les mettant dans l’enceinte pour pas que vos parents vous défoncent. Tout ça parce que vous êtes pas capables de savoir qu’un haut-parleur n’enregistre pas du son.

Question E.2
Lequel de ces objets n’est pas un périphérique ? 
A. le clavier 
B. une clé USB 
C. la carte graphique 
D. la carte mère

Correction : Réponse D
Un périphérique est un objet que tu rajoutes à ton PC, mais sans cet objet ton PC pourra toujours fonctionner. On peut faire marcher fonctionner un PC sans clavier, sans clé USB, ni carte graphique. Mais sans carte mère… c’est un peu complexe.

Question E.3
L’adresse IP du site www.education.gouv.fr est 185.75.143.24. Quel dispositif permet d’associer l’adresse IP et l’URL www.education.gouv.fr ? 
A. un routeur 
B. un serveur DNS 
C. un serveur de temps 
D. un serveur Web 
E. L’application TousAntiCovid, qui empêche également le virus de rentrer dans les écoles.

Correction : Réponse B
Tu as désormais l’adresse IP du gouvernement !! Trop bien, tu peux maintenant hacker tout le gouvernement en passant par un serveur DNS et ainsi te mettre plein de 20/20 (c fo ils ont pas eu le budget pour avoir un serveur à eux tout seul ; essayez de taper l’I.P. sur internet) ! (tu peu le fer poure moua estépé). Par contre a-t-on des retours sur l’efficacité de TousAntiCovid (aka HadopiCovid) ?!

Question E.4
L’architecture client-serveur : 
A. est un mode de communication entre programmes 
B. est une architecture matérielle de coopération entre machines 
C. est un mode de communication entre routeurs 
D. est un mode de communication entre commutateurs 
E. est le mode de fonctionnement des restaurants avant la crise sanitaire, qui sont actuellement fermés donc je ne peux pas répondre à la question car je dois respecter les gestes barrières.

Correction : Réponse A
Attention à ne pas confondre hardware et software.
L’architecture client-serveur est un mode de communication entre programmes, au même type que l’’architecture P2P. Elle ne dépend pas du hardware, mais bien du logiciel installé, qui peut être un client ou un serveur. (Corrigé par un enseignant)

Thème F : langages et programmation

Question F.1 (Ca va vite)(Attention vous avez pas le permis hein)
On considère le code suivant :
Quelle construction élémentaire peut-on identifier dans le code ci-dessus ?

if x < 4 :
	x = x + 3
else :
	x = x - 3

Réponses
A. une boucle non bornée 
B. une structure conditionnelle 
C. une boucle bornée
D. un appel de fonction
E. Un troll des cavernes
F. La réponse F.

Correction : Réponse B
Vous pouvez répéter la question ??
Fioooooooum ! Est-ce que qu’il y a besoin de tant déblatérer sur celle-là, c’est pourtant évident !

Question F.2 (Après F1 (normalement))
La fonction suivante calcule la racine carrée du double d’un nombre flottant. from math import sqrt Quelle est la précondition sur l’argument de cette fonction ?

def racine_du_double(x):
   return sqrt(2*x)

Réponses
A. x < 0 
B. x >= 0 
C. 2 * x > 0 
D. sqrt(x) >= 0

Correction : Réponse B
Ton prof de maths ne t’a jamais dit qu’une racine carré NE PEUT PAS manger de la soupe et de la pizza en même temps être négative ; une racine carrée, c’est toujours content (on garde ça pour le prochain spot de pub sur les maths) !

Question F.3
On considère le code suivant : Quelles sont les préconditions sur les arguments ?

def puiss(y,x): 
	res = y 
	for i in range(x): 
	    res = res*y 
	return res

Réponses
A. les arguments doivent être obligatoirement de type entier 
B. les arguments peuvent être de type entier ou flottant 
C. le type des arguments n’a pas d’importance 
D. il n’y a pas de préconditions dans ce cas

Correction : Réponse A
T’as déjà essayé de multiplier un nombre décimal en python ? Si oui ça marche ? Si oui dis moi comment tu fais !! Bon t’as bien compris qu’on peut pas… donc on s’assure bien que ce soit un entier avant tout.

Question F.4 (fait Alt+F4 stp)
Quelle est la valeur de la variable x à la fin de l’exécution du script suivant :

def f(x):
   x = x + 1
   return x + 1
x = 0
f(x+1)

Réponses
A. 0 
B. 1 
C. 2 
D. 3 
E. Georges

Correction : Réponse A
La variable x définie par x=0 est une variable globale qui n’a aucun rapport avec la variable locale nommé x de la fonction f. L’appel f(0+1) retourne bien la valeur 3, mais ce n’est pas la question posée. La variable globale n’a pas été modifiée, sa valeur est toujours 0. (Corrigé par un enseignant)

Question F.5(prenez un peu d’air frais)
On exécute le script suivant.

a = 11
for i in range(3):
   a = a * 2
   a = a - 10

Que contient la variable a​ ​à la fin de cette exécution ?

Réponses
A. 0 
B. 14 
C. 18 
D. 26

Correction : Réponse C
Dans le for i in range, ça veut dire que i ira pas jusqu’à 3 mais s’arrêtera à 2. Mais vous me diriez “Mon ptit bonhomme”, mais il part d’où ce A ?
Et bien c’est simple de rien, comme nous dans 3 ans sur le marché du travail. Mais rien c’est pas une valeur ?! 
Si, j’ai un indice le premier nombre arabe, le début de tout, le nombre “presque” suprême.
Et oui c’est le 0 !
Donc i va prendre les valeurs de 0, puis 1, puis 2, en faisant pendant ce temps sa mixture avec a.

Question F.6
On définit la fonction suivante :

def f(x,y):
     x = x +y
     y = x -y
     x = x -y
    return (x,y)

Quel est la valeur renvoyée par l’appel de patrick ​de chez carglass (mais non c’est Olivier de Carglass ) f(2019,2020)​ ?
Réponses
A. (2019,2019)
B. (2019,2020)
C. (2020,2019) 
D. (2020,2020)

Correction : Réponse C
OH MON DIEU DES MATHS J’AI ENVIE DE ME CREVER LES YEUX ET DE BOIRE MON SANG, bref.
La réponse est C, car elle est forcément égale à 2019 : (2020+2019)-2020 = 2019 (un vase peut y arriver, même un spé philo peut le faire).

Question F.7 (Vous avez vérifié nos fautes ?)
Un programme Python commence par la ligne : import​ os

À quoi sert cette ligne ?
Réponses
A. C’est du poulet basquaise
B. c’est la déclaration du système d’exploitation (operating system)
C. Python 3.6 exige cette ligne au début de tout programme
D. c’est la déclaration d’une bibliothèque (ou module) que le programme compte utiliserRetour ligne automatique
Correction : Réponse A
Bon la on se pose même pas la question, la nourriture est prioritaire partout. Juste le poulet c’est pas fou, on aurait pu trouver mieux hein. (os → module déclaré, pas de bouffe, dommage, un jour omega nous livrera à domicile). Donc réponse D, on verra si vous lisez toutes nos réponses de folie comme ça.

Question F.8
La fonction Python suivante ne calcule pas toujours correctement le résultat de 𝑥 𝑦 pour des arguments entiers. Parmi les tests suivants, lequel va permettre de détecter l’erreur ?

def puissance (x,y):
   p = x
   for i in range (y - 1):
      p = p * x
   return p

Réponses
A. puissance(2,0) 
B. puissance(2,1) 
C. puissance(2,2) 
D. puissance(2,10)

Correction : Réponse A
On sait bien que 20 = 1 ! Mais si on regarde le logarithme népérien de 0, on remarque que la réponse A permet avec certitude de déclarer Patrick Balkany comme prochain guest de Just Dance after the covid. (#Lourdeur)

Thème G : algorithmique

Question G.1 (meilleure classe, confirmé par près de π/3*100 de tous les rédacteurs)

Que fait la fonction suivante :

def trouver(L):
   i = 0
   for j in range(1, len(L)):
      if L[j] >= L[i]:
         i = j
   return i

Réponses
A. elle renvoie le maximum de la liste 
B. elle renvoie le minimum de la liste 
C. elle renvoie l’indice de la première occurrence du maximum de la liste 
D. elle renvoie l’indice de la dernière occurrence du maximum de la liste

Correction : Réponse D
Que nous imaginassions nous trouver dans un champ de pommes. On choisit la plus grande (je t’ai vu sourir raph), et si deux font la même taille on prend la deuxième.
Donc voilà vous savez on vire donc la A et la B car ça retourne l’indice tout ça. Ensuite on l’a dit si y en a 2 on prend la deuxième, donc c’est la réponse D. (Bon on avoue, on a un peu triché on a incanté le dieux des 1G1 et du 42 pour trouver la réponse, car c’est l’entier entre les deux extrêmes du deuxième dieu, soustrait au G du dieu de la classe :)).

Question G.2 (ahhhhh les G2 y en a qu’une qui est bien…🥰) (en effet)
On exécute le script suivant :

compt = 0
resultat = 1
while compt != 7 :
   resultat = resultat * compt
   compt = compt + 1

Laquelle de ces affirmations est vraie ?

Réponses
A. Le script ne s’arrête pas
B. Le script entre 7 fois dans la boucle et à la fin de son exécution, r​esultat ​vaut 0 
C. Le script entre 7 fois dans la boucle et à la fin de son exécution, r​esultat ​vaut 720 
D. Le script entre 6 fois dans la boucle et à la fin de son exécution, ​resultat ​vaut 0

Correction : Réponse B
Déjà quelque chose multiplié par 0, tu sais que ça fait 0 (sauf ∞ mais on parle pas de ça maintenant). Donc notre fameux “temp”, il rentre 7 fois dans la boucle parce que “while != 7” veut dire “ca rentre tant que c’est différent du chiffre 7”.
Mais bon c’est une situation temporaire comme ils disent tous au début donc on s’en fiche un peu.

Question G.3
Quelle est la valeur du couple (​ s,i)​ à la fin de l’exécution du script suivant ?

s = 0
i = 1
while i < 5:
   s = s +i
   i = i + 1

Réponses
A. (4, 5) 
B. (10, 4) 
C. (10, 5) 
D. (15, 5) 
E. (42, 5)

Correction : Réponse C
Bah là y’a rien à dire… juste c’est des maths de la logique banane / humour d’arbre !

Question G.4 (G4 Cube)
La fonction suivante doit calculer le produit de tous les éléments de la liste passée en paramètre. Avec quelles expressions doit-on la compléter pour que cette fonction soit correcte ?

def produit (L):
p = …
for elt in L:
     .......
     return p

Réponses
A. 1 puis p​ = p * elt 
B. 0 puis ​p = p * elt 
C. 1 puis p​ = elt
D. 0 puis ​p = elt
Correction : Réponse A

Un produit fois 0 c’est comme si on vous donnait 42 fois 0 PS5 (de toute façon y en a plus ils sont pas foutu d’en produire 2), donc c’est pas bon vu qu’on en veut. Donc c’est forcément 1. Il ne reste que la A et la C (à la fin il n’en restera qu’un 😁). et vu qu’on veut faire le produit de tout c’est forcément la A !

Question G.5 (The last) (but not the least)
Quelle est la valeur de e​lement ​à la fin de l’exécution du code suivant :

L = [ 1 , 2 , 3 , 4 , 1 , 2 , 3 , 4 , 0 , 2 ] 
element = L[ 0 ]
	for k in L:
	    if k > element: 
	        element = k

Réponses
A. 0 
B. 1 
C. 4 
D. 10

Correction : Réponse C
La dernière question, elle nous promet une difficulté intense, une réflexion poussée, un stress à son comble. Non c’est une liste, dur retour à la réalité, de nos actes, nos pensées, nos vies inintéressantes.
En fait on cherche juste la valeur de la liste la plus grande (toujours cette notion de plus grand, pourquoi comparer les gens c’est inutile, on est tous unique, donc comparer des gens ou même des nombres ça revient à les dégrader). Pourquoi, ici 4 serait supérieur aux autres, c’est injuste pour le 0 qui est très beau, pourquoi, pourquoi ?!!

Pour le petit bonus,

bah c’est juste 36 // 42 // 666 // 404 (logique).
On tiendrait quand même à parler de quelques succès des One More Thing :
On peut trouver un Mac que je suis le seul à trouver magnifique le Powerbook G3 aussi nommé Clamshell,

Il est pas magnifique ce PowerBook G3 Clamshell 🥰 ?

Ici vous verrez une magnifique photo de cette beauté colorée

Bon après il y a aussi des ratés commes : 
– Itunes Match (si quelqu’un connait, qu’il lève la main) 
– Face Time

Bref on espère que ça vous aura plus.
42,
Peace,
NSI

One more thing

Ce script ci-dessous est exécuté.

Vous devez déterminer les valeurs des variables quarantedeux , Quarantedeux , quaranteDeux et QuaranteDeux à la fin de l’exécution de ce script.

# déclaration des variables
wan, tu, free, fore, faiv, sɪks, seven = 7, 6, 5, 4, 3, 2, 1
quarantedeux = Quarantedeux = quaranteDeux = QuaranteDeux = 0
 
# déclaration des fonctions
 
def double(x):
    return x ** 2
 
def cube(y):
    return 2 * y
 
def carre(z):
    return z ** 3
 
# déclaration des affectations de variables
 
quaranteDeux = fore + fore * ( double( wan + faiv ) )
 
if carre(sɪks) == cube(fore):
    quarantedeux = 666
else :
    quarantedeux = 42
   
while QuaranteDeux != 42:
    QuaranteDeux += 1
   
for i in range(7):
    Quarantedeux = 6 * i

Le dernier exercice de ce sujet n’est pas corrigé ici mais plus haut hihihi.

Sachez juste que derrière une variable appelée 42 peut se cacher autre chose que 42. 😂

Conclusion

Vous pouvez réagir ici :

En particulier si les élèves auteurs de ce corrigé se sont trompés.

Le précédent corrigé : Correction du sujet n°42 de la BNS des E3C de NSI

contenait lui 2 erreurs fâcheuses 😱

Projets

Site avec un piano fonctionnelle , un générateur de…

Site qui renvoie aléatoirement vers un piano fonctionnel, un générateur de citation, ou un compte à rebours.

Ce projet est un site composé de 4 pages codées en html : 

La page principale

  • Présentation 

Voici la page principale de notre site, c’est elle qui renverra l’utilisateur vers 3 autres pages au hasard grâce à un script javascript que vous retrouver plus tard dans cette article. La redirection vers les sites est effectué par une interaction sur un bouton cliquable situé au centre de la page. De plus autre bouton placé en bas à droite de la page permet de changer la couleur du dégradé de fond.

  • Le code HTML
<html lang="fr">
<head>
        <link rel="stylesheet" href="main.css">
        <link rel="icon" type="image/ico" href="favicon.ico" />
        <title>Bienvenue</title>
        <meta charset="utf-8"/>
        <script src="https://package.nsi.xyz/api/"></script>
        <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</head>
<body>
  <div id="container" class="orange1">
        <h2> CLIQUEZ SUR CE BOUTON POUR ACCÉDER À UN DE NOS SITES</h2>
        <button id="style_boutton"; type="button"; ><h2>CLIQUEZ MOI</h2></button>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="target" class="orange"></button>
</body>
  • Le code CSS
html{
        margin: 0;
        height: 100%;
}
 
body {
    font-family: Verdana;
 
}
 
#container {
    width: 32rem;
    height: 21rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 20px;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
 
 
h2{
  color: #d3d3d3;
  text-align: center;
}
 
 
 
#style_boutton {
        border-radius: 20px;
    font-family: Verdana;
    animation: boutton_animation 3s infinite;
    background-color: transparent;
    color: #C0C0C0;
    height: 6rem;
    width: 15rem;
    border-width: 4px;
    margin: 0;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
}
 
 
 
#style_boutton:hover {
    animation: boutton_animation 2s ease infinite;
    animation-fill-mode: forwards;
    cursor: pointer;
    height:40%;
    width:60%;
    font-size: 100%;
}
 
 
 
@keyframes boutton_animation {
    0% {border-color: red;}
    25%{border-color:yellow;}
                35%{border-color:orange;}
    50%{border-color:green;}
    75%{border-color:blue;}
    100% {border-color: purple;}
}
 
 
 
html {
  background: linear-gradient(to bottom right, #1B998B, #0D1317);
}
.black {
     background: linear-gradient(to bottom right, #006BA6, #D81159);
}
.blue {
     background: linear-gradient(to bottom right, #C81D25, #23395B);
}
.orange{
     background: linear-gradient(to bottom right, #1B998B, #0D1317);
}
.black1 {
     background: linear-gradient(to top left , #006BA6, #D81159);
}
.blue1 {
     background: linear-gradient(to top left , #C81D25, #23395B);
}
.orange1 {
     background: linear-gradient(to top left , #1B998B, #0D1317);
}
#target {
          height: 50px;
          width: 50px;
        color: #fff;
        border-radius: 50%;
          display: inline-block;
          text-shadow: #000 1px 1px 1px;
          cursor: pointer;
          border: none;
          position:absolute;
          bottom:0;
          right:0;
          transition: 0.5s;
}
#target:hover{
          height: 58px;
          width: 58px;
}
  • Les scripts javascript
  • Le script changeur de thème

Ce script sera exécuté lorsque l’utilisateur appuiera sur le bouton en bas à droite de l’écran. Il changera alors la class de l’arrière-plan. Les classes (dans le css) « black », « blue », et « orange » sont utilisé pour l’arrère plan de l’html alors que « black1 », « blue1 », et « orange1 » sont utilisé pour l’arrière plan du container au ilieu de l’écran.

<script>
    var colors = [
    'orange',
    'blue',
    'black'
  ];
    var colors1 = [
    'orange1',
    'blue1',
    'black1'
  ];
    var currentColor = 0;
    var currentColor1 = 0;
    var target = jQuery('#target');
    var target1 = jQuery('html');
    var target2 = jQuery('#container');
 
 
    target.click(function (evt) {
      currentColor += 1;
      currentColor1 += 1;
      currentColor %= colors.length;
      currentColor1 %= colors1.length;
      target1.prop('class', colors[currentColor]);
      target.prop('class', colors[currentColor]);
      target2.prop('class', colors1[currentColor1]);
 
    });
</script>
Télécharger

Le scripte qui renvoi vers d'autre sites
Lorsque le bouton au milieu de l'écran est utilisé, le script sera utilisé, et l'utilisateur sera renvoyé vers une de nos pages aléatoirement.

<script>
  var links = new Array();
  links[0] = "http://kebab.nsi42.net/new/compte_a_rebours.html";
  links[1] = "http://kebab.nsi42.net/new/citation.html";
  links[2] = "http://kebab.nsi42.net/new/piano.html";
 
  function openLink() {
    var i = Math.floor(Math.random() * links.length);
    parent.location = links[i];
    return false;
  }
</script>

Le piano

  • Présentation

Voici notre page piano dans laquelle est présent un « extrait » de piano que l’utilisateur pourra utiliser grâce aux touches de son clavier. Lorsque l’utilisateur appuiera sur l’une des touches du clavier, la note correspondante à la touche s’affichera au dessus du piano.

  • Le code HTML
<html lang="fr">
<head>
        <title>Piano</title>
        <link rel="stylesheet" type="text/css" href="piano111.css">
        <meta charset="utf-8">
  <script src="https://package.nsi.xyz/api/"></script>
</head>
<header>
  <h1>Piano</h1>
  <h2>Afin d'utiliser ce magnifique piano il faut utiliser les touches de ton clavier. Regarde le tableau de correspondance des touches. Et vas y petit Mozart.</h2>
</header>
<body>
  <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
  <section id="wrap">
    <section id="main">
        <div class="nowplaying"></div>
        <div class="keys">
                        <div data-key="81" class="key" data-note="Do"><p>Q</p></div>
                        <div data-key="90" class="key sharp" data-note="Do#"><p>Z</p></div>
                        <div data-key="83" class="key" data-note="Ré"><p>S</p></div>
                        <div data-key="69" class="key sharp" data-note="Ré#"><p>E</p></div>
                        <div data-key="68" class="key" data-note="Mi"><p>D</p></div>
                        <div data-key="70" class="key" data-note="Fa"><p>F</p></div>
                        <div data-key="84" class="key sharp" data-note="Fa#"><p>T</p></div>
                        <div data-key="71" class="key" data-note="Sol"><p>G</p></div>
                        <div data-key="89" class="key sharp" data-note="Sol#"><p>Y</p></div>
                        <div data-key="72" class="key" data-note="La"><p>H</p></div>
                        <div data-key="85" class="key sharp" data-note="La#"><p>U</p></div>
                        <div data-key="74" class="key" data-note="Si"><p>J</p></div>
                        <div data-key="75" class="key" data-note="Do"><p>K</p></div>
                        <div data-key="79" class="key sharp" data-note="Do#"><p>O</p></div>
                        <div data-key="76" class="key" data-note="Ré"><p>L</p></div>
                        <div data-key="80" class="key sharp" data-note="Ré#"><p>P</p></div>
                        <div data-key="77" class="key" data-note="Mi"><p>M</p></div>
        </div>
 
      <audio data-key="81" src="http://carolinegabriel.com/demo/js-keyboard/sounds/040.wav"></audio>
      <audio data-key="90" src="http://carolinegabriel.com/demo/js-keyboard/sounds/041.wav"></audio>
      <audio data-key="83" src="http://carolinegabriel.com/demo/js-keyboard/sounds/042.wav"></audio>
      <audio data-key="69" src="http://carolinegabriel.com/demo/js-keyboard/sounds/043.wav"></audio>
      <audio data-key="68" src="http://carolinegabriel.com/demo/js-keyboard/sounds/044.wav"></audio>
      <audio data-key="70" src="http://carolinegabriel.com/demo/js-keyboard/sounds/045.wav"></audio>
      <audio data-key="84" src="http://carolinegabriel.com/demo/js-keyboard/sounds/046.wav"></audio>
      <audio data-key="71" src="http://carolinegabriel.com/demo/js-keyboard/sounds/047.wav"></audio>
      <audio data-key="89" src="http://carolinegabriel.com/demo/js-keyboard/sounds/048.wav"></audio>
      <audio data-key="72" src="http://carolinegabriel.com/demo/js-keyboard/sounds/049.wav"></audio>
      <audio data-key="85" src="http://carolinegabriel.com/demo/js-keyboard/sounds/050.wav"></audio>
      <audio data-key="74" src="http://carolinegabriel.com/demo/js-keyboard/sounds/051.wav"></audio>
      <audio data-key="75" src="http://carolinegabriel.com/demo/js-keyboard/sounds/052.wav"></audio>
      <audio data-key="79" src="http://carolinegabriel.com/demo/js-keyboard/sounds/053.wav"></audio>
      <audio data-key="76" src="http://carolinegabriel.com/demo/js-keyboard/sounds/054.wav"></audio>
      <audio data-key="80" src="http://carolinegabriel.com/demo/js-keyboard/sounds/055.wav"></audio>
      <audio data-key="77" src="http://carolinegabriel.com/demo/js-keyboard/sounds/056.wav"></audio>
      </section>
  </section>
 
    <table class="tableau-style">
 
        <thead>
            <tr>
                <th>Do</th>
                <th>Ré</th>
                <th>Mi</th>
                <th>Fa</th>
                <th>Sol</th>
                <th>La</th>
                <th>Si</th>
                <th>Do</th>
                <th>Ré</th>
                <th>Mi</th>
                <th>Do#</th>
                                <th>Ré#</th>
                                <th>Fa#</th>
                                <th>Sol#</th>
                                <th>La#</th>
                <th>Do#</th>
                                <th>Ré#</th>
            </tr>
        </thead>
 
 
        <tbody>
            <tr>
                <td>Q</td>
                <td>S</td>
                <td>D</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
                <td>J</td>
                <td>K</td>
                <td>L</td>
                <td>M</td>
                <td>Z</td>
                <td>E</td>
                <td>T</td>
                <td>Y</td>
                <td>U</td>
                <td>O</td>
                <td>P</td>
 
            </tr>
 
        </tbody>
 
    </table>
  • Le code CSS
html{
  background: linear-gradient(#006494, #FF1053);
        margin: 0;
        height: 100%;
}
 
body  {
        font-family: 'Noto Serif', serif;
        text-align: center;
      }
 
 
header {
      position: relative;
      margin: 30px 0;
    }
 
header:after {
      content: '';
      width: 460px;
      height: 15px;
      display: inline-block;
      text-align: center;
      background-size: 70%;
    }
 
h1 {
      color: #fff;
      font-size: 50px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin: 0;
    }
 
h2 {
      color: #fff;
      font-size: 24px;
      font-style: italic;
      font-weight: 400;
      margin: 0 250px 30px;
 
    }
 
 
 
.nowplaying {
      font-size: 120px;
      line-height: 1;
      color: #eee;
      text-shadow: 0 0 5rem #028ae9;
      transition: all .07s ease;
      min-height: 120px;
    }
 
.keys {
      display: block;
      width: 100%;
      height: 350px;
      max-width: 880px;
      position: relative;
      margin: 40px auto 0;
      cursor: none;
    }
 
.key {
      position: relative;
      border: 4px solid black;
      border-radius: .5rem;
      transition: all .07s ease;
      display: block;
      box-sizing: border-box;
      z-index: 2;
    }
 
.key:not(.sharp) {
      float: left;
      width: 10%;
      height: 100%;
      background: rgba(255, 255, 255, .8);
    }
 
.key.sharp {
      position: absolute;
      width: 6%;
      height: 60%;
      background: #000;
      color: #eee;
      top: 0;
      z-index: 3;
    }
 
.key[data-key="90"] {
      left: 7%;
    }
 
.key[data-key="69"] {
      left: 17%;
    }
 
.key[data-key="84"]  {
      left: 37%;
    }
 
.key[data-key="89"] {
      left: 47%;
    }
 
.key[data-key="85"] {
      left: 57%;
    }
 
.key[data-key="79"] {
      left: 77%;
    }
 
.key[data-key="80"] {
      left: 87%;
    }
 
.playing {
      transform: scale(.95);
      border-color: #028ae9;
      box-shadow: 0 0 1rem #028ae9;
 
    }
 
.hints {
      display: block;
      width: 100%;
      opacity: 0;
      position: absolute;
      bottom: 7px;
 
      font-size: 20px;
        }
 
 
 
.tableau-style  {
        cursor: none;
    border-collapse: collapse;
    min-width: 400px;
         font-style: italic;
    width: auto;
    box-shadow: 0 5px 50px rgba(0,0,0,0.15);
    margin: 100px auto;
    border: 2px solid black;
}
 
thead tr {
    background-color: black;
    color: #fff;
    text-align: center;
}
 
tbody tr {
    background-color: white;
    color: black;
    text-align: center;
}
 
th, td {
    padding: 15px 20px;
}
 
tbody tr, td, th {
    border: 1px solid ;
}
 
tbody tr:nth-child(even){
    background-color: #f3f3f3;
}
  • Le scripts javascript du piano

Dans ce script javascript est présent une ligne très importante :

if (e.repeat) return;

qui empèche la répétition de la note de musique qui ferait planter le piano lorsque l’utilisateur maintiendrai la touche enfoncée.

<script>
                const keys = document.querySelectorAll(".key"),
                note = document.querySelector(".nowplaying"),
                hints = document.querySelectorAll(".hints");
 
                function playNote(e) {
                const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`),
                key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
                if (!key) return;
                if (e.repeat) return;
 
                const keyNote = key.getAttribute("data-note");
 
                key.classList.add("playing");
                note.innerHTML = keyNote;
                audio.currentTime = 0;
                audio.play();
                }
 
                function removeTransition(e) {
                if (e.propertyName !== "transform") return;
                this.classList.remove("playing");
                }
 
                function hintsOn(e, index) {
                e.setAttribute("style", "transition-delay:" + index * 50 + "ms");
                }
 
                hints.forEach(hintsOn);
 
                keys.forEach(key => key.addEventListener("transitionend", removeTransition));
 
                window.addEventListener("keydown", playNote);
        </script>

Le compte à rebours

  • Présentation

Voici la page compte à rebours de la fin présumé d’internet. Au centre de l’ecran se trouve le compte à rebours ayant pour fin 2023 sur un fond gif.

  • Le code HTML
<html lang="fr">
<html>
<head>
  <link rel="stylesheet" href="compte_a_rebours.css">
  <link rel="icon" type="image/ico" href="favicon.ico" />
  <title>END</title>
  <meta charset="utf-8"/>
  <script src="https://package.nsi.xyz/api/"></script>
</head>
<body>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
<div class="container">
  <h1 id="headline">Compte a rebours de la Fin d'Internet:</h1>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div class="message">
    <div id="content">
      <span class="emoji">&#128126; </span>
      <span class="emoji">&#128187;</span>
      <span class="emoji">&#128128;</span>
    </div>
  </div>
</div>
  • Le code CSS
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html, body {
  height: 100%;
  margin: 0;
}
 
body {
  align-items: center;
  background-image:url(images/36010.gif);
  display: flex;
  font-family: -apple-system,
    "Segoe UI",
    "Helvetica Neue",
    sans-serif;
}
 
.container {
  color: white;
  margin: 0 auto;
  text-align: center;
}
 
h1 {
  font-weight: bolder;
  letter-spacing: .125rem;
  text-transform: uppercase;
}
 
li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}
 
li span {
  display: block;
  font-size: 4.5rem;
}
 
.message {
  font-size: 4rem;
}
 
#content {
  display: none;
  padding: 1rem;
}
 
.emoji {
  padding: 0 .25rem;
}
  • Le scripts javascript du compte à rebours
<script>
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;
 
  let annee = "Janvier 1, 2023 00:00:01",
      countDown = new Date(annee).getTime(),
      x = setInterval(function() {
 
        let now = new Date().getTime(),
            distance = countDown - now;
 
        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
 
        //do something later when date is reached
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");
 
          headline.innerText = "C'est la Fin !";
          countdown.style.display = "none";
          content.style.display = "block";
 
          clearInterval(x);
        }
        //seconds
      }, 0)
  }());
 
</script>
  • Le script javascript de la page qui s’ouvre

Ce script Javascript permet de d’ouvrir une page lorsque l’utilisateur écrira le mot « end » avec les touches de son clavier.

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
 
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
            var index = 0;
            var magic_word = "end";
                if (e.key == magic_word[index]) {
                    index++;
 
                    if (index == magic_word.length) {
                        window.open("https://www.youtube.com/watch?v=EqaHgjv_Snc", "_blank");
                        index = 0;
                    }
                } else {
                    index = 0;
                }
            }
</script>

Le générateur de citations

  • Présentation

Voici la page générateur de citations qui présentera à l’utilisateur lorsqu’il qu’il le voudra divers citation de personne fictif ou bien réel. Enregistré en variable dans les scripts javascript. De plus le fond de la page est une gradation de couleur en mouvement constant.

  • Le code HTML
<html lang="fr">
<head>
        <link rel="stylesheet" href="citation.css">
        <link rel="icon" type="image/ico" href="favicon.ico" />
        <title>Citation</title>
        <meta charset="utf-8"/>
        <script src="https://package.nsi.xyz/api/"></script>
<body>
        <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>
</body>
 
        <div class="container">
                <div class="citation">
                        <div id="citationplace"></div>
                </div>
                <div class="auteur">
                        <div id="auteurplace"></div>
                </div>
        <button>Nouvelle Citation</button>
</div>
</body>
</html>
  • Le code CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 
.container{
        width: 32rem;
        height: 21rem;
        box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .3);
        border-radius: 20px;
        overflow: hidden;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.08);
        overflow: hidden;
        color:white;
}
 
.guil{
        font-size: 10%;
}
 
.citation{
        text-align: left;
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        font-size:31px;
}
 
.auteur{
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        text-align: right;
        font-size:28px;
}
 
html {
        font-family: 'Montserrat', sans-serif;
        background: linear-gradient(to top left, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        width:100%;
        height:100%;
}
 
button{
        width:30%;
        height:20%;
    position:absolute;
    bottom:0;
    right:0;
        transition: 0.3s;
    cursor:pointer;
        color: white;
        text-transform: uppercase;
        background-color: rgba(0, 0, 0, 0.08);
        padding: 20px;
        border-radius: 5px;
        display: inline-block;
        border: none;
        transition: all 0.4s ease 0s;
        border-radius: 5px;
}
 
button:hover{
        background-color: rgba(0, 0, 0, 0.2);
        letter-spacing: 2px;
        animation: titre 1s;
        width:31%;
        height:21%;
}
 
 
@keyframes gradient {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
}
  • Les scripts javascript
  • Le script changeur de citation

A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle citation qui est dans dans la variable « citations » sera affiché.

<script>
        var auteur = [
                "Maitre Oogway",
                "Maitre Oogway",
                "Martin Luther King",
                "Confucius",
                "Jean-Paul Sartre",
                "Victor Hugo",
                "Albert Einstein",
                "Oscar Wilde",
                "Albert Einstein",
                "Emmanuel Kant",
                "Douglas Adams",
                "Maitre Yoda"
        ]
        var citations = [
                "❝Hier est derrière, demain est mystère, et aujourd'hui est un cadeau, c'est pour cela qu'on l'appelle le présent.❞",
                "❝On rencontre souvent sa destinée par les chemins qu'on a pris pour l'éviter.❞",
                "❝Celui qui accepte le mal sans lutter contre lui coopère avec lui.❞",
                "❝Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés.❞",
                "❝Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.❞",
                "❝On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.❞",
                "❝La vie, c'est comme une bicyclette, il faut avancer pour ne pas perdre l'équilibre.❞",
                "❝La beauté est dans les yeux de celui qui regarde.❞",
                "❝Un problème sans solution est un problème mal posé.❞",
                "❝La musique est la langue des émotions.❞",
                "❝42 est la réponse à la grande question sur la vie, l'univers et le reste❞",
                "❝Difficile à voir. toujours en mouvement est l'avenir.❞"
        ]
        function nouveaux() {
                var rand = Math.floor(Math.random() * (citations.length));
                document.getElementById('citationplace').innerHTML = citations[rand];
                document.getElementById('auteurplace').innerHTML = auteur[rand];
        }
        </script>
  • Le script javascript changeur d’image

A chaque fois que l’utilisateur actualise la page ou que le bouton est utiliser, une nouvelle image tiré au hasard de Flickr sera affiché. Cette image est trouvé grâce au mot clé « autumn forest ».

</script>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
        var keyword = "autumn forest";
        $(document).ready(function (){
                        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                        {
                                        tags: keyword,
                                        tagmode: "any",
                                        format: "json"
                        },
                        function (data) {
                                        var rnd = Math.floor(Math.random() * data.items.length);
                                        var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
                                        $('.container').css('background-image', "url('" + image_src + "')");
                        });
        });
 
 
        </script>

Un problème rencontré

Lors de la programation de nos page nous avons constaté plus précisément dans la page du piano, que la personne ayant codé le javascript avait codé avec un choix de touche adapté au clavier QWERTY il a donc fallut modifié les touches du clavier en l’adaptant pour un clavier AZERTY. Cette action a était possible en changeant les DATA-KEY des touches.

Découvrir

nsi42.net : Les projets web crées par nos élèves

Le site https://nsi42.net/ héberge les projets web de nos élèves. Codé par un ancien élève, ce site propose un jeu de piste à travers une interface en ligne de commande…

En classe de première

En classe de première, les élèves réalise un premier site web de quelques pages en février, et ils s’initient aux protocoles HTTP, HTTPS, FTP à travers ces projets.

C’est l’occasion de leur faire découvrir les langages HTML et CSS.

En classe de terminale

En classe de terminale, les élèves réalisent un premier site web dans lequel ils doivent intégrer des modules imposés et des modules librement choisis en octobre.

L’objectif est alors d’approfondir leurs connaissances en JAVASCRIPT.

Plus tard dans l’année, ils peuvent utiliser cet espace web pour mener à bien un projet centré sur les bases de données, et ce frotter ainsi aux langages PHP et SQL.

Découvrir le site nsi42.net 

Le site https://nsi42.net/ sera peut-être pour vous une découverte de l’ASCII Art et qui sait, peut-être que la console accepte les commandes Linux !

Projets

labohelp, nous allons vous aider sur labomep !

Labomep est un exerciseur de mathématiques en ligne, gratuit et facile à prendre en main. Il est utilisé par de nombreux enseignants français pour faire progresser leurs élèves.
Nous avons conçu labohelp pour aider les élèves à résoudre les petits problèmes qu’ils rencontrent parfois sur la labomep.

Labomep vous connaissez ?

Considéré comme un instrument de torture mathématique par certains, source d’angoisses pour d’autres, labomep est un formidable outil pour s’entraîner sur les automatismes du point de vue du prof.

Et lorsque les élèves comprennent qu’on va les faire travailler et que l’on peut contrôler finement ce travail, vérifier par exemple s’il est fait au dernier moment, vient alors le moment où certain tentent de trouver toutes les parades pour passer à travers, éventuellement en inventant des bugs imaginaires.

Certains enseignants renoncent alors à utiliser cet outil alors que 90% des problèmes rencontrés par les élèves sont imaginaires ou facilement dépassables.

Le site internet labohelp va vous aider à résoudre les principaux problèmes rencontrés par les élèves.

Le cahier des charges

L’idée de base est donc de proposer un chemin de résolution aux principaux problèmes rencontrés sous labomep. Il s’agit dans 90% des cas de problèmes annexes, qui n’ont rien de mathématique. Et quand c’est un problème en mathématiques, un peu d’autonomie de la part de l’élève et quelques prises d’initiatives peuvent aider ou suffire.

Le format flash étant obsolète et déprécié, labohelp n’aidera pas les élèves à résoudre leur problème avec le plugin flash dans le navigateur web.

Ainsi par un jeu de question / réponse, l’assistant aide l’utilisateur (un élève) à résoudre tout seul son problème.

Si le problème n’est pas résolu, il invite l’utilisateur à contacter son professeur mais des précautions sont prises pour éviter les abus.

Les URLs générées sur labohelp étant uniques, si un enseignant reçoit une demande d’élève qui se trouve dans la base de donnée, il lui suffit de copier / coller cette adresse et de l’envoyer à l’élève.

Ainsi à un élève vraiment de mauvaise fois qui ne trouverait pas la page de connexion on pourrait lui envoyer cette adresse : http://labohelp.nsi.xyz/index.php?ref=12

Laborobot répond à vos questions sur labohelp !

Pour rendre l’outil plus agréable, un petit robot est conçu. Un concours interne à l’équipe de développement du site (votation truquée bien évidemment) décide que le robot élu sera le croquis numéro 6.

Le croquis est donc réalisé au propre avec quelques améliorations graphiques, puis numérisé au format PNG et on y applique la charte graphique du site générée tout à fait aléatoirement sur coolors.co.

Tout est désormais en place pour développer un site amusant et coloré !

Choix techniques

L’idée étant de profiter de ce projet pour apprendre / progresser dans la maîtrise des langages HTML / PHP il est décidé de réaliser un unique script PHP, qui servira toutes les pages en interrogeant un annuaire de questions / réponses.

Après quelques tentatives infructueuses (car peu pertinentes) avec un fichier CSV, nous partons sur un fichier XML qui nous permettra de structurer facilement l’annuaire de questions / réponses.

L’unique script php de 400 lignes est ainsi capable de générer les nombreuses pages de ce labohelp.
D’après nos informations, il y aurait plus de 42 pages, et on me souffle dans l’oreillette qu’il y aurait des pages cachées (6 à la date du 11 février 2020), ainsi qu’un menu caché qui sera accessible ultérieurement ! Sauras-tu les retrouver ?

Bien évidemment, une feuille de style CSS habille le site internet, vous pouvez d’ailleurs le visiter sans la feuille de style ou avec celle-ci. Pour désactiver la feuille de style, il suffit de rajouter &style=no à la fin de l’adresse de la page visitée.

Minimaliste mais efficace, la feuille de style intègre également la gestion des écrans ayant une petite résolution avec la déclaration CSS

@media screen and (max-width: 1000px) {

}

Du coup si l’écran de l’ordinateur offre une résolution très faible, le navigateur affichera la version pour smartphone du site.

Le site labohelp, pour qui ?

  • Pour les élèves qui se noient dans un verre d’eau
  • Pour les élèves qui cherchent une réponse à un problème courant
  • Pour les enseignants qui souhaitent l’utiliser avec leurs élèves

Il est possible de faire évoluer l’annuaire de questions / réponses, si vous êtes enseignant et que vous souhaitez l’enrichir contactez-nous.

Si vous êtes un élève, la réponse à vos problèmes sur labomep se trouve peut-être sur labohelp.nsi.xyz, nous ne répondrons à aucun message concernant un bug sur labomep envoyé par un élève.

Découvrir

La programmation en spé NSI

En spécialité NSI, on étudie principalement le langage de programmation Python, dans lequel on écrit les algorithmes traité en classe, ainsi que le langage SQL qui permet d’interroger une base de donnée.
Les projets réalisés par les élèves leurs permettent de découvrir et de s’amuser avec du HTML, du CSS, du JavaScript.
La découverte des systèmes d’exploitations est l’occasion de s’initier au BASH.

A noter :

L’expertise dans tel ou tel langage de programmation n’est cependant pas un objectif de formation, en spécialité NSI on découvre des langages, chacun est libre d’approfondir ces connaissances lors de la réalisations des projets.

Les différents langages découverts ou approfondis

Python

Un langage de programmation est nécessaire pour l’écriture des programmes.
Les lycées français ont choisis le langage Python, qui est à la fois simple d’usage, interprété, concis, libre et gratuit, multiplateforme et largement répandu.

# Python 3
print("Hello NSI !")

HTML

Aujourd’hui, de plus en plus de nos actions se passent par le Web, qui est aux centres de nos vies. Il faut donc pour cela expliquer aux spécialités NSI, son organisation, ses complexités, et à commencer par l’HTML. Ce n’est pas vraiment un langage, car il fait le lien entre plusieurs langages, mais il est l’élément central pour le fonctionnement des pages Web comme celle que vous êtes en train de regarder.

<strike class="physique">La Physique c'est bien</strike>
<h1 id="nsi">La NSI c'est super</h1>

CSS

Nous retrouvons donc le CSS qui va de pair avec le HTML, si ce dernier est l’élément central, sans le CSS, le Web ressemblerait à la première page Web. C’est donc ce qui permet de donner un petit peu de style au Web, pour le rendre plus attrayant.

#nsi {
  color : purple;
}
.physique {
  background-color: black;
}

JavaScript

Le JavaScript est aussi un des éléments clés du fonctionnement du Web que nous aborderons en spécialité NSI. Il permet de faire fonctionner certains éléments de façon dynamique, comme un menu, mais aussi certaines interactions avec l’utilisateur comme sur notre portail des élèves et a aussi bien d’autres avantages, que vous pourrez découvrir dans le cadre des projets en spé NSI.

//let nsi;
//nsi = "En classe de première, je choisis la spécialité NSI";
window.alert("En classe de première, je choisis la spécialité NSI");

SQL

Le SQL permet de traiter simplement d’immenses bases de données, de les classifier, les regrouper, etc… Il est extrêmement puissant tout en étant d’une simplicité déconcertante, et permet à nos élèves, de mettre un pied dans le monde des bases de données immenses, ou la moindre recherche manuelle serait un parcours du combattant.

SELECT *
FROM nsi

BASH

Le BASH, c’est magique, peu de personnes vous le diront car elles n’ont pas l’occasion de l’utiliser au quotidien et de découvrir sa praticité. Mais c’est quoi au fait ? C’est tout simplement la langue du terminal, vous savez cette fenêtre noire et peu rassurante qui s’ouvre de temps en temps. Nos élèves découvrent donc cette interface au travers du monde incroyable de Linux/GNU, à travers un petit jeu interactif en ligne : Terminus

mkdir nsi
cd nsi
sudo apt-get install reussite
./reussiteNSI.elf

Les autres fondamentaux en spé NSI

De la même manière qu’un élève étudiant la spécialité Physique au lycée ne sera pas obligatoirement en charge de piloter une centrale nucléaire, les élèves étudiant la spécialité NSI ne seront pas tous développeurs informatique, et ne feront peut-être même pas un métier lié à l’informatique. Cette spécialité est ouverte à tous, filles comme garçons, intéressés de découvrir le fonctionnement des outils qui nous entourent de plus en plus, et désireux d’acquérir des compétences pour le futur.

La spécialité NSI est l’occasion de découvrir une nouvelle science, appelée informatique.
Les concepts fondamentaux étudiés en spécialité NSI vont bien au delà de la simple conception de programme, ils permettent de rentrer et de découvrir ce monde fabuleux que sont les sciences informatiques.

Projets

Générateur de citations

Vous êtes à la recherche d’inspiration ? Ne vous en faites pas, le générateur de citations de notre site est fait pour ça ! 
Vous connaissez les bases du HTML ? Cette article vous présente et explique pas à pas la création du site ainsi que l’intégration des quelques modules utilisés.

Si vous êtes sur cet article, il est probable que créer un générateur, de citations en l’occurrence, vous a intrigué. Voilà les explications du procédé de sa création et de son intégration sur notre site :

Notre projet a été de créer un site qui comporte un générateur de citations de grands auteurs ou philosophes mais également certaines répliques de films connus afin d’apporter une source d’inspiration pour nos visiteurs. Pour cela, nous avons fait le choix de créer qu’une seule page de site, ce qui est amplement suffisant pour mener à bien le projet. Cependant, une consigne a été imposée : intégrer des modules. Heureusement pour nous, la toile regorge de scripts intéressants et variés de générateurs : de JavaScript à Python, le choix est large.

Avant de commencer

Tout d’abord, avant d’intégrer quelconque script choisi par nos soins, nous devions mettre la balise <nsi-xyz> préalablement installée sur l’éditeur de texte avant la réalisation du site. Cette balise sert de « support » pour les fonctionnalités que nos professeurs peuvent ajouter. Cette ligne doit se situer entre les balises <head>.

<script src="https://package.nsi.xyz/api/"></script>

Après avoir ajouté la fonction menu fournie par nos professeurs, ils pourront relier les sites réalisés par les autres élèves avec le notre.

< !— Appel du menu —>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>

Icône du menu

Le script du générateur et du bouton

Pour pouvoir générer des citations aléatoirement nous avons pris un module sur le site freeCodeCamp.org qui nous permet d’apprendre le codage chez soi et apporte des aides précieuses pour les projets. Pour le nôtre, il explique pas à pas le processus de construction du script JavaScript complet. Il contient également un bouton qui permet de générer les citations que nous avons préalablement choisi ainsi que le générateur. Ce script sera le cœur de notre site. 

Cependant, la question se pose : comment un bouton a pu être relié au générateur me direz-vous ? Le déroulement est simple : il existe une fonction dans le langage HTML nommé “onclick” qui permet, ainsi inséré dans les balise “button”, de définir une fonction sur le bouton, qui dans notre cas, sera paramétré dans le script JavaScript et que nous aurons appelé “newQuote()”.

<button onclick="newQuote()"> Appuyez </button>
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]
    document.getElementById('quoteDisplay').style.fontFamily = 'Scope One', serif;
}

En revanche, au niveau de la stylisation des citations, celle-ci diffère d’une stylisation en CSS car elle se fait directement dans le script JavaScript. En effet, on place les citations entre des balises qu’on utilise également dans le langage HTML, comme les balises de sauts de lignes, d’alignement de texte, de la couleur, de la taille et bien plus encore selon vos envies. Une fois les citations tapées dans le script JavaScript et la stylisation faite, le générateur est prêt à fonctionner !

<br><br><center><div style="font-size : 155%"><p style="color:white ;"> "La vie sans musique est tout simplement une erreur, une fatigue, un exil" </center></p></div> <br> <center><div style="font-size : 120%"><p style="color:white ;"> Friedrich Nietzsche </center></p></div>

Le Header

Au niveau de la mise en page, lorsqu’on vous impose l’intégration de modules, la difficulté est tout autre que ce que l’on peut penser : il faut CHOISIR parmi des CENTAINES de scripts tous aussi beaux et impressionnants les uns que les autres. La difficulté est d’en choisir UN pour chaque fonctionnalités ou décoration du site. Réussir à les intégrer correctement est une autre histoire…

Pour ce faire, nous avons tout d’abord décidé de créer un header plutôt esthétique. Nous le rappelons, ce que nous voulons est de permettre aux visiteurs du site de lire des citations inspirantes. Ces visiteurs sont donc à la recherche d’inspiration, d’apaisement, de revigoration. L’esthétique du site compte alors énormément. Nous allons même jusqu’à dire que c’est ce qui compte ! Pour un site, le header, « en-tête » en anglais, est le haut du site, le commencement et est donc est la première partie sur laquelle arrive le visiteur. Cela signifie qu’elle doit être accrochante et agréable esthétiquement parlant, pour ainsi donner au lecteur une idée de la qualité du site et des citations mis à sa disposition.

Un diaporama de belles images sous une petite opacité et le titre du site fut une très bonne idée. Avec la simple recherche « slider photos css html » (slider qui veut dire « glissant » en anglais), nous avons choisi parmi un très large choix le tutoriel de Salvador el semestre « Speed Code-Full Screen Automatic Image Slider Background-HTML CSS », qui nous a permis d’intégrer un header qui prend toute la largeur de l’écran pour un plus beau résultat et un rendu plus fluide et aéré. L’intégration s’est très bien déroulée sans aucun blocage.

<div class="slider">
			<div class="load">
			</div>
			<div class="content">
				<div class="principal">
                    <h1>Citations Inspirantes</h1>
					<p>Générateur de citations et répliques de films</p>
					<p>Diaporama d'images inspirantes</p>
				</div>
			</div>
		</div>
.load {
  animation : slide 1s;
}

.slider {
  background-repeat : no-repeat;
  background-size : cover;
  background-position : center;
  width : 100%;
  height : 100vh;
  animation : slide 20s infinite;
}

.content {
  color : black;
  width : 100%;
  height : 100vh;
  background-color : rgba(255, 255, 255, 0.2);
}

.principal {
  left : 50%;
  top : 50%;
  transform : translate(-50%, -50%);
  position : absolute;
  letter-spacing : 5px;
  text-align : center;
}

.principal h1 {
  font-size : 70px;
  margin-bottom : 20px;
  font-family : 'Playfair Display', serif;
}

.principal p {
  font-size : 20px;
  font-family : 'Playfair Display', serif;
}

Résultat :

Par rapport au script original, nous avons modifié les images du slider avec background-image, le texte aux balises h1, p et nous avons ajouté un peu d’opacité avec opacity

Création de la boîte qui contient le générateur de citations

Ensuite, dans le corps du site, le « body« , il a fallu trouver une mise en page sympa afin d’y insérer le script JavaScript du générateur de citations. L’idée de créer une sorte de boîte avec des ombres pour lui donner du relief mais surtout l’illusion d’une petite feuille avec une citation inscrite dessus était intéressant. Pour cela, rien de plus simple : on tape sur son moteur de recherche « text box html css » et nous avons trouvé le tutoriel de Kevin Powell « CSS box-shadow – how to make them look good ».

En effet, taper votre recherche en anglais vous donne la plupart du temps plus de contenu et de réponses, alors il ne faut pas hésiter ! Pour cette boîte, un simple script suffisait puisqu’on ajuste nous même la forme de la boîte et son apparence selon nos envies en le modifiant.

Cependant, nous avons eu un PROBLEME au niveau de la dimension de la boîte : en effet, lorsqu’on active le générateur en cliquant sur le bouton, les dimensions de la boîte changeaient selon la taille de la citation (elle s’élargissait et inversement). Il a fallu un certain nombre de recherche sur internet avant de comprendre d’où venait le problème et comment le résoudre : le script original ne comportait pas les paramètres width et height, qui indiquent respectivement la largeur et la hauteur d’un objet. Sans eux, la dimensions de la boîte n’a pas été définie, ce qui implique que la taille de la boîte s’adapte à la taille des citations.

<div class="box">

			<div id="quoteDisplay">
				<p>
			< !— citation ici —>
				<p class="titre">...</p>
				</p>
			</div>
		</div>
.titre {
  text-align : center;
  color : black;
  font-family : 'Rubik', sans-serif;
  font-size : 40px;
}

.box {
  background : #F5B7B1;
  width : 1000px;
  height : 400px;
  padding-top : 120px;
  padding-right : 20px;
  padding-left : 20px;
  box-shadow : 10px 10px 9px black;
}

Résultat :

Par rapport au script original, nous avons modifié la taille de la boîte avec width, height, padding-top, padding-right, padding-left, les dimensions de l’ombrage avec box-shadow, la couleur de fond avec background et nous avons remplacé le texte par notre générateur de citations en ajoutant id= »quoteDisplay »

Stylisation du bouton du générateur

Bien sûr, le mieux est que le visiteur puisse activer ce générateur de citation via le bouton sur lequel il devra cliquer. La stylisation d’un bouton est une chose facile puisque des centaines de scripts de styles différents existent sur le web. Cette fois cependant, nous avons essayé d’intégrer une dizaines de scripts mais il arrive que cela ne soit pas aussi simple que ça puisse paraître puisque certains n’affichent pas le résultat espéré, même après maintes et maintes modifications du script.

Nous avons alors opté pour un simple bouton animé très sympa qui utilise du html/css. Il provient du site w3school.com qui est un site optimisé pour l’apprentissage et la formation du langage web. L’intégration n’a causé aucun problème et nous l’avons évidemment adapté aux couleurs de la page.

button {
  position : relative;
  background-color : black;
  border : none;
  border-radius : 3px;
  font-size : 15px;
  color : #FFFFFF;
  padding : 20px;
  width : 100px;
  text-align : center;
 -webkit-transition-duration : 0.4s; /* Safari */
  transition-duration : 0.4s;
  text-decoration : none;
  overflow : hidden;
  cursor : pointer;
}

button:after {
  content : "";
  background : white;
  display : block;
  position : absolute;
  padding-top : 300%;
  padding-left : 350%;
  margin-left : -20px !important;
  margin-top : -120%;
  opacity : 0;
  transition : all 0.8s;
}

button:active:after {
  padding : 0;
  margin : 0;
  opacity : 1;
  transition : 0s;
  border : none ;
}

Résultat :

Par rapport au script original, nous avons modifié la forme du bouton avec border-radius pour arrondir les coins, la couleur avec background-color et background lors du cliquage et le texte dans la balise button

Le Diaporama d’images

Enfin, l’idée finale du projet a été de donner la possibilité aux visiteurs du site d’avoir à disposition également certaines images inspirantes qui pourraient accompagner le concept des citations inspirantes. Pour se faire, encore une fois, la recherche « diaporama css html » nous a permis de choisir le script du site pierre-giraud.com qui est un site incroyablement bien fait pour apprendre à coder et contient toutes les ressources sur le développement web. L’intégration du script s’est très bien déroulé et nous avons bien évidemment intégré nos images dans le diaporama, avec un très beau rendu.

<div class="d1"></div>

	<div class="conteneur"></div>
.d1 {
  width : 576px;
  height : 384px;
  margin : 50px auto;
  box-shadow : 0px 15px 10px -5px #777;
  border-radius : 15px;
  background-color : #EDEDED;
  background-size : contain;
  animation : fondu 15s ease-in-out infinite both;
}

.conteneur {
  max-width : 576px;
  margin : 50px auto;
}

.d1:hover, .d2:hover {
  animation-play-state : paused;
}

@keyframes fondu {
  0% {
    background-image : url(ins.jpg);
  }
  33.33% {
    background-image : url(ins1.jpg);
  }
  66.67% {
    background-image : url(ins2.jpg);
  }
  100% {
    background-image : url(ins.jpg);
  }
}

Résultat :

Par rapport au script original, nous avons modifié la taille du diaporama avec height, arrondi les coins avec border-radius et modifié les images avec background-image

Les Plus+

 Nous avons aussi fait le choix d’intégrer un bouton qui nous ramène automatiquement en haut de page, ce qui est une fonction pratique lorsque le site est très long. Pour notre part, nous voulions permettre au visiteur de remonter la page au moment où il arrive au niveau du diaporama d’images, afin de lui permettre d’atteindre plus rapidement la partie du générateur de citations.

Pour cette fonctionnalité et pour bien d’autres encore, le site w3school.com contient des dizaines de scripts expliqués et que l’on peut modifier directement sur le site pour en comprendre le fonctionnement. Après l’intégration du script JavaScript cette fois-ci du bouton, nous l’avons bien sûr modifié afin de le fondre dans l’esthétique du site.

<button onclick="topFunction()" id="myBtn" title="Go to top">🔝</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() scrollFunction();

function scrollFunction() {
  if (document.body.scrollTop > 1400 || document.documentElement.scrollTop > 1400) {
   mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
#myBtn {
  display : none;
  position : fixed;
  bottom : 20px;
  right : 30px;
  z-index : 99;
  font-size : 23px;
  border : none;
  outline : none;
  background-color : #EC7063;
  color : white;
  cursor : pointer;
  padding : 7px;
  border-radius : 30px;
}

#myBtn:hover {
  background-color : #555;
}

Résultat :

Par rapport au script original, nous avons modifié la couleur du bouton avec background-color, le texte dans la balise button, la taille du texte avec font-size, sa taille avec padding et arrondi les coins avec border-radius

 C’est également le cas du scroll bar qui se trouve à l’extrême droite du site. Nous avons intégré son script dans le code de la page et aucune modification n’a été nécessaire dans sa stylisation car elle convient parfaitement aux couleurs de notre site.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
  width : 10px ;
}

/* Track */
::-webkit-scrollbar-track {
  background : #f1f1f1 ; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background : #888 ; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background : #555 ; 
}

</style>

Résultat :

Pour résumer, l’intégration des modules et des scripts nous ont permis d’obtenir un site avec un rendu agréable et esthétique avec quelques fonctionnalités comme le slider du header, le générateur de citations et le diaporama d’images. Cela donne un aspect sympa et vivant au site car le niveau de codage est plus poussé donc le résultat est plus intéressant et complexe. Cependant, à ne pas oublier que pour intégrer des modules dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML, car il sera très souvent nécessaire de modifier certains paramètres pour obtenir le résultat attendu, que ce soit dans le code HTML, JavaScript ou le style CSS.

Voici une vue d’ensemble de notre site :

Source

Projets

De la musique ? Oui, mais pas que.

Envie d’écouter de la musique avec style ? Le Web regorge de site Internet sans aucune utilité, comme les Cookies Clickers, les sites vierges, ou Parcoursup. Et bien, je peux fièrement annoncer que mon site est l’un d’entre eux, mais ne paniquez pas ! Avec mon site, vous pourrez mettre de la musique (téléchargée au préalable, il faut pas déconner non plus), et l’écouter sereinement, sans crainte. Mais le plus important c’est que vous pourrez écouter votre musique… avec style et bagou.

Ce site, qui est constitué d’une seule et unique page, est constitué de 4 programmes différents, que j’ai intégré a ma page html, et nous allons les détailler un par un.

1 La souris animée

Sur mon site, nous avons une petite boule animée qui suit la souris, avec un temps de retard.Retour ligne automatique
Cette souris est animée grâce a deux petits codes css et javascript, que je me permet d’afficher ici, car il est vraiment petit, et simple a afficher (pour les codes plus long, je prendrais des extraits).

D’abord le Javascript ;

const cursor = document.querySelector('.cursor');
 
document.addEventListener('mousemove', e => {
    cursor.setAttribute('style', 'top:'+(e.pageY - 20)+"px; left:"+(e.pageX - 20)+"px;")
})
 
document.addEventListener('click', ()=>{
    cursor.classList.add('expand');
 
    setTimeout(()=>{
        cursor.classList.remove("expand");
    }, 500);
})

Comme on a dit, le « setTimeout » sert a initialiser le retard du curseur, pour donner cette impression de ralenti. Retour ligne automatique
Le « cursor.setAttribute » place le cercle animée a la pointe du curseur, et pas au milieu, ce qui se passerait si cette commande n’aurait pas été la.

Le CSS :

.cursor {
    width: 40px;
    height: 40px;
    border: 1px dashed white;
    border-radius: 50%;
    position: absolute;
    animation: Anim1 1s infinite alternate;
  pointer-events: none;
}
 
.cursor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5px;
    height: 5px;
    background: crimson;
    border-radius: 50%;
}
 
.expand {
    animation: Anim2 .5s;
    background: crimson;
    border: 1px solid crimson;
}
@keyframes Anim1 {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(0.7) rotate(190deg);
    }
}
 
@keyframes Anim2 {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(2);
    }
    100%{
        transform: scale(1);
        opacity:0;
    }
}

Le curseur est crée grâce a ".cursor", est le curseur après-clic est crée grâce à ".cursor::before"

L’animation du cercle lorsqu’il est statique est générée ici :

les "@keyframes" s’en occupent, en le faisant tourner, et en le faisant respirer.

Evidemment, pour que la souris fonctionne, il ne faut pas oublier de déclarer la souris dans le html, grâce a cette unique ligne : <div class="cursor"></div>
Bref, la souris est surtout un élément esthétique (comme si il n’y en avait pas assez…), et ne demande pas beaucoup d’analyse, c’est un code relativement simple, ou du moins compréhensible, ce qui n’est clairement pas le cas des codes suivants (bon courage).

2 Le background avec les lignes animées

On parlait d’élément esthétiques, bah en voila un autre.

Ces lignes, qui donnent du dynamisme au site, sont générées uniquement en CSS (sans compter la déclaration dans le HTML).

Le HTML :

<div class="lines">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

On peut remarquer que chaque ligne est indépendantes, ce n’est pas juste un background animé.

Le CSS :

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
}
.lines .line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.lines .line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #ffffff), to(#ffffff));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  -webkit-animation: run 7s 0s infinite;
          animation: run 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.lines .line:nth-child(1) {
  margin-left: -25%;
}
.lines .line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.lines .line:nth-child(3) {
  margin-left: 25%;
}
.lines .line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
 
@-webkit-keyframes run {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}
 
@keyframes run {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

Ici aussi, l’animation des lignes est juste une histoire de délais : pour que les lignes soit décalées, un délai de 2 seconde est donné a la première ligne, et un délai de 2.5 est donnée a la troisième ligne.

On peut d’ailleurs le voir quand on lance le site : la deuxième ligne, celle qui n’a pas de délai, descend en première, suivi de la première est de la troisième .

Grace a « webkit », le navigateur gère (presque) tout seul les animations, et cela est moins lourd dans le code.

Bref, je ne vais pas tout détailler, mais cet effet apporte tellement au site (sans être ironique pour le coup), quand on lance une musique, on a l’impression que les lignes bougent en rythme.

Passons au programme majeur du site.

3 Le spectre audio + le bouton d’upload

Alors, faisons un point.

Il est hors de question que j’explique le code ligne par ligne, déjà parce que c’est long, et puis j’avoue que je n’y comprend pas grand chose, c’est hors de mes capacités. Je vais expliquer comment marche le bouton, mais je vais très peu parler des spectres audio.

Le bouton est juste un… bouton. SAUF que, il permet d’uploader le mp3, pour, de 1 lancer la musique, et de 2, initialiser le spectre audio.

Ce code Javascript, est ce qui permet au site de récupérer la musique, via le bouton :

input();
                shade.init();
                document.getElementById("input").addEventListener("change", function(e){
                        document.getElementsByClassName('label')[0].innerText = e.target.files[0].name;
                        fileReader = new FileReader();
                        fileReader.readAsArrayBuffer(e.target.files[0]);
                        music.init();
                       
                }.bind(this), false);

Le "input" demande le fichier choisi, et le "getElement" récupère le fichier, pour l’upload dans le site. Le "innerText" permet de donner au bouton le nom du fichier, et le fait de choisir un nouveau fichier, écrase le précédent, comme nous le montre "fileReader = new FileReader() ;".
Enfin, "music.init" lance la musique sur le navigateur.

Pour ce qui est des deux spectres audio, tout ça est contrôlé par de nombreuuuses formules mathématiques, voici un petit exemple du Javascript :

color : function(){
                        var r = [false, Math.floor(Math.random() * shade.data.max)],
                        g = [false, Math.floor(Math.random() * shade.data.max)],
                        b = [false, Math.floor(Math.random() * shade.data.max)];
                        setInterval(function(){
                               
                                if(r[1] === shade.data.max) r[0] = true;
                                if(r[1] === shade.data.min) r[0] = false;
                                if(r[0] === false) r[1]++;
                                if(r[0] === true) r[1]--;
 
                                if(g[1] === shade.data.max) g[0] = true;
                                if(g[1] === shade.data.min) g[0] = false;
                                if(g[0] === false) g[1]++;
                                if(g[0] === true) g[1]--;
 
                                if(b[1] === shade.data.max) b[0] = true;
                                if(b[1] === shade.data.min) b[0] = false;
                                if(b[0] === false) b[1]++;
                                if(b[0] === true) b[1]--;
 
                                for(var i = 0; i <= 1; i++){
                                        colour = 'rgba('+r[1]+','+g[1]+','+b[1]+',0.8)';
                                        ctx[i].fillStyle = colour;
                                        document.getElementsByClassName('label')[0].style.setProperty('border-color', colour,'');

A ce que j’ai compris, ceci sert a régler les couleurs , car oui, les couleurs réagissent aussi a la musique, et ça, c’est quand même plutôt cool.

Les teintes r (rouge), g (vert), et b(bleu), évoluent au rythme des « shades », qui sont a mon avis les variations du spectre audio.

Bref, ce code rajoute quand même au site tout son charme, et arrachera surement un « wow » a vos amis, si vous en avez.

Passons au dernier programme, tout simple, symbole de l’ego surdimensionné du programmeur :

4 La signature du beau développeur

Tout en bas, a droite, nous avons un petit « Made by Robin Metais », animé, et cliquable.

Le CSS :

a{
  color:white;
  font-size:9px;
  text-decoration:none;
  letter-spacing:2px;
  font-family: "Open sans", sans-serif;
  position:fixed;
  z-index:5;
  bottom:10px;
  right:10px;
  transition:all 0.2s 0s ease-in-out;
}
a:hover{
  color:#95afab;
  letter-spacing:3px;
  transition:all 0.2s 0s ease-in-out;
}

la partie « a » est le bouton (car c’est un bouton) d’origine, et le "a:hover" est le bouton lorsqu’il est survolé.

Le Javascript :

var a = document.createElement("a");
a.innerText = "Made by Robin Metais";
a.href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
a.title = "";
a.target="";
body.insertBefore(a, body.childNodes[0]);

Ici, on définit le texte qui doit être affiché, et ce qui doit se passer quand le bouton est cliqué.
Un mystérieux lien mystique est apparu dans mon fichier Javascript, comment l’enlever ? ( ͡° ͜ʖ ͡°)

Avec ça, je crois que nous avons fait le tour de ce sublime programme !

Etes vous prêt a mettre le « fire » dans vos diners de famille, et enflammer le « dancefloor » ?

Tutoriels

Adresse IP et date du jour en javascript

Dans cet article nous allons voir tout d’abord le but du projet que nous allons vous présenter. Puis, nous allons voir les différents codes de javascript que nous avons inséré dans la page HTML et leurs buts. Pour finir, nous allons vous expliquer les difficultés rencontrées durant la conception de cette page et les solutions que nous avons mis en œuvre pour résoudre ces derniers.

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Le but du projet

Ce projet nous a été proposé par nos professeurs.
Le But : Faire de l’insertion de javascript dans une page HTML.
Différentes consignes nous avait été énoncées comme par exemple insérer un module, nous le verrons par la suite, mais aussi un menu et un ou plusieurs codes en javascript.
Au bout de ce projet nous devions donc écrire l’article que vous lisez en ce moment même.

Maintenant que nous vous avons exposé le but de ce projet nous allons donc pouvoir commencer à parler des différents codes qui sont présent dans la page HTML.

Les différents codes de la page

La page est constituée d’un menu qui contient les différentes informations que donnent les codes que nous développerons ensuite. Le menu est généré par 3 lignes au début du code HTML et par 3 lignes qui se situent à chaque début de code, juste avant les codes javascript.
Les différentes lignes sont affichées ci-dessous :

Accueil</button>
Date</button>
Adresse IP</button>

ci dessus sont affichées les lignes de codes qui permettent de créer le menu.

À chaque début de code intégré dans le code de la page HTML nous avons des lignes comme celles-ci :

  <div id="Date" >
</div>

qui permettent d’afficher l’information relatif à cette ligne lorsque l’on sélectionne une partie du menu.

Voici le résultat 

Le premier code dont nous allons parler est le module que nos enseignants nous ont imposé d’insérer. Ce module permettra, dans le futur, de relier les différentes pages des différents élèves.

<script src="https://package.nsi.xyz/api/"></script>
<nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>

La première ligne permet d’exporter un script externe tandis que la seconde permet d’insérer le menu qui a été importer avec la ligne précédente 

Au final, on obtient un menu dépliant qui se situe en haut à droite de la page HTML et une fois déplié on obtient ceci :

Maintenant nous allons parler des trois codes javascripts que nous avons insérés dans la page.

Le premier code est un code permettant de donner l’adresse IP de la personne qui ouvre la page. 
Pour obtenir son adresse IP la personne qui a ouvert la page devra cliquer sur un « bouton » qui lancera le programme en javascript.
Le code est affiché ci dessous :

cliquer ici pour avoir votre adresse ip</button>
 <p id="lastcheck"></p>
<script type="text/javascript">
var i = 0;
var prev;
var timer = null;
function stop() {
  clearInterval(timer);
}
function start() {
  checkIP();
  clearInterval(timer);
  timer = setInterval(function() {
    checkIP();
  }, 5000);
}
function checkIP() {
  var text = "";
  $.get("https://api.ipify.org", function(data) {
    text =
      "  L'adresse ip de votre ordinateur est : " + data;
    document.getElementById("lastcheck").innerHTML = text;
    if (data != prev) {
      document.getElementById("log").innerHTML += text;
    }
    prev = data;
  });
}
</script>

la partie du code :

cliquer ici pour avoir votre adresse ip</button>

permet de créer un bouton qui lance le code.

tandis que la ligne :

 text ="  L'adresse ip de votre ordinateur est : " + data

Permet elle de donnée par écrie l’adresse IP

Et on obtient donc au final :

Le second code que nous avons inséré est un code permettant de donner la date. Contrairement au code précédent nous n’avons pas inséré de boutons car cela n’est pas nécessaire. Ce code est associé à un troisième que nous verrons ultérieurement.

Le code qui permet de donner la date à l’écrit est le suivant :

<script type="text/javascript">
        var mois=new Array(13);
        mois[1]="Janvier";
        mois[2]="Février";
        mois[3]="Mars";
        mois[4]="Avril";
        mois[5]="Mai";
        mois[6]="Juin";
        mois[7]="Juillet";
        mois[8]="Août";
        mois[9]="Septembre";
        mois[10]="Octobre";
        mois[11]="Novembre";
        mois[12]="Décembre";
        var time=new Date();
        var month=mois[time.getMonth() + 1];
        var date=time.getDate();
        var year=time.getYear();
        if (year < 2000)
        year = year + 1900;
        document.write("Nous sommes le  " +date + " ");
        document.write(month + " " + year);
</script>

Ce code est relativement court comparé aux autres mais il permet de donner la date à laquelle on ouvre la page.

Et le dernier code est complémentaire du précédent car il fait afficher un calendrier pour se situer dans le mois.Retour ligne automatique
Le code permettant cela est le suivant :

<div id="Date" class="tabcontent">
 
         <br>
         <script type="text/javascript">
         <!--
         var d = new Date();
         var dm = d.getMonth() + 1;
         var dan = d.getYear();
         if(dan < 999) dan+=1900;
         calendrier(dm,dan);
         function calendrier(mois,an) {
         nom_mois = new Array
         ("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet",
         "Ao&ucirc;t","Septembre","Octobre","Novembre","D&eacute;cembre");
         jour = new Array ("Lu","Ma","Me","Je","Ve","Sa","Di");
         var police_entete = "Verdana,Arial"; /* police entête de calendrier  */
         var taille_pol_entete = 3;           /* taille de police 1-7 entête de calendrier  */
         var couleur_pol_entete = "#FFFF00";     /* couleur de police entête de calendrier  */
         var arrplan_entete = "#000066";        /* couleur d'arrière plan entête de calendrier  */
         var police_jours = "Verdana,Arial"; /* police affichage des jours  */
         var taille_pol_jours = 3;           /* taille de police 1-7 affichage des jours  */
         var coul_pol_jours = "#000000";     /* couleur de police affichage des jours  */
         var arrplan_jours = "#D0F0F0";        /* couleur d'arrière plan affichage des jours  */
         var couleur_dim = "#E00000";        /* couleur de police pour dimanches  */
         var couleur_cejour = "#FFFF00";        /* couleur d'arrière plan pour aujourd'hui  */
         var maintenant = new Date();
         var ce_mois = maintenant.getMonth() + 1;
         var cette_annee = maintenant.getYear();
         if(cette_annee < 999) cette_annee+=1900;
         var ce_jour = maintenant.getDate();
         var temps = new Date(an,mois-1,1);
         var Start = temps.getDay();
         if(Start > 0) Start--;
         else Start = 6;
         var Stop = 31;
         if(mois==4 ||mois==6 || mois==9 || mois==11 ) --Stop;
         if(mois==2) {
          Stop = Stop - 3;
          if(an%4==0) Stop++;
          if(an%100==0) Stop--;
          if(an%400==0) Stop++;
         }
         document.write('<table border="3" cellpadding="1" cellspacing="1">');
         var entete_mois = nom_mois[mois-1] + " " + an; inscrit_entete(entete_mois,arrplan_entete,couleur_pol_entete,taille_pol_entete,police_entete);
         var nombre_jours = 1;
         for(var i=0;i<=5;i++) {
           document.write("<tr>");
           for(var j=0;j<=5;j++) {
             if((i==0)&&(j < Start))     inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
             else {
               if(nombre_jours > Stop)           inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
               else {
                 if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))                  inscrit_cellule(nombre_jours,couleur_cejour,coul_pol_jours,taille_pol_jours,police_jours);
                 else             inscrit_cellule(nombre_jours,arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
                 nombre_jours++;
                 }
               }
             }
             if(nombre_jours > Stop)           inscrit_cellule("&#160;",arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
             else {
               if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))           inscrit_cellule(nombre_jours,couleur_cejour,couleur_dim,taille_pol_jours,police_jours);
               else              inscrit_cellule(nombre_jours,arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
               nombre_jours++;
             }
             document.write("<\/tr>");
           }
         document.write("<\/table>");
         }
         function inscrit_entete(titre_mois,couleurAP,couleurpolice,taillepolice,police) {
         document.write("<tr>");
         document.write('<td align="center" colspan="7" valign="middle" bgcolor="'+couleurAP+'">');
         document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
         document.write(titre_mois);
         document.write("<\/b><\/font><\/td><\/tr>");
         document.write("<tr>");
         for(var i=0;i<=6;i++)
           inscrit_cellule(jour[i],couleurAP,couleurpolice,taillepolice,police);
         document.write("<\/tr>");
         }
         function inscrit_cellule(contenu,couleurAP,couleurpolice,taillepolice,police) {
         document.write('<td align="center" valign="middle" bgcolor="'+couleurAP+'">');
         document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
         document.write(contenu);
         document.write("<\/b><\/font><\/td>");
         }
         //-->
         </script>

Grâce à ce code on obtient ceci :

Cependant si vous copier ces codes vous n’obtiendrez malheureusement pas le même résultat car il manque le code CSS qui permet de mettre en « forme » et en « couleur » la page. 

Donc en premier lieu nous allons voir la mise en page en générale puis nous verrons partie par partie les différents code qui permettent de faire la même mise en page finale.

<style>
body {margin:0;}
body {
    margin: 15;
    border : ;
    background-color: #black;
                font-family: 'Gadugi';
}
h3 {
    color : #EFEFEF;
    text-align : center;
    font-family : ;
    font-weight : bold;
        font-size : 20px;
        font-family: 'Gadugi';
}
h2 {
        font-family : ;
    color :#EFEFEF;
    text-align : center;
        font-size : 30px;
                font-family: 'Gadugi';

Cette partie du code permet de faire la mise en page avec la couleur de fond, de définir la police des texte qui auront la balise h2 et h3.

Ensuite nous avons le code qui permet de modifier le « bouton » pour le programme de l’adresse IP :

.bouton {
    padding: 10px 10px;
    background: #CCCCCC;
    color: #39304A;
    border-radius: 30px;
        }

Et enfin voici le code CSS qui permet de faire la mise en page du menu, qui contient toutes les informations, que donnent les codes que nous avons vus précédemment.

Le code est ci-dessous :

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #839788;
  background-color: #BDBBB6;
  width: 30%;
  height: 300px;
}
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
}
.tab button:hover {
  background-color: #ddd;
}
.tab button.active {
  background-color: #ccc;
}
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Les lignes de codes ci-dessus permettent la mise page du tableau qui contient les informations données par les codes en javascript.

Nous en avons donc fini avec les différentes lignes de codes qui composent notre page HTML

Les problèmes rencontrés et leurs solutions

Durant la conception de notre page HTML nous avons rencontrés très peu de problèmes concernant les codes. Cependant nous avons eux quelques fois le menu, permettant de faire le lien entre les futures pages des élèves, qui ne s’affichait plus. Le problème était tout simplement que le code n’était pas bien positionné, il se situait dans le partie CSS alors qu’il fallait tout simplement le mettre dans la partie « head ».

Le plus gros problème a été de réussir à trouver des codes qui fonctionnaient correctement et qui n’étaient pas trop complexe ni trop simples.

Les différentes modifications apportées aux codes

Durant la création de la page nous avons très légèrement modifié certains codes. Il y avait des éléments qui paraissaient inutiles. 
Par exemple :

  • Le code qui donne l’adresse IP avait une autre partie de code qui permettait de se souvenir de l’adresse IP du précédent utilisateur du programme. Cela ne faisait que mettre la même adresse, ce qui paraissait un peut inutile, nous l’avons donc supprimé.
  • Nous avons aussi modifié la couleur et la forme du bouton qui permet de lancer le code qui donnait l’adresse IP.

Conclusion et code final

Voici donc ce compte rendu terminé j’espère que nous vous aurons aidé à comprendre les différentes lignes des codes que nous vous avons proposé.

Vous trouverez donc ci-joint le code final, entièrement complété qui vous permettra d’avoir la même page que la mienne.

Merci de votre lecture.