Notebook

Interactions entre l’homme et la machine sur le Web statique :¶

Lors de la navigation sur le Web, les internautes interagissent avec leur machine par le biais des pages Web.

L’Interface Homme-Machine (IHM) repose sur la gestion d’événements associés à des éléments graphiques munis de méthodes algorithmiques.

On parle de pages Web statique lorsque ces méthodes algorithmiques sont toutes exécutées coté client pour afficher leur résultat interactif dans un navigateur...

Le Web, kesako ?¶

A faire vous même n°1 :

Lire la page Introduction au Web proposée par David ROCHE puis répondre aux questions suivantes :

Que signifie l'acronyme www ?

...

Proposer deux synonymes de www :

...

Est-ce qu'Internet est synonyme de www ? Expliquer...

...

Qui est Tim Berners Lee ?

...

A faire vous même n°2:

Coller ci-dessous l'hyperlien vers la première page web ainsi que dans le code Python de la cellule suivante pour l'intégrer dans ce notebook :

...

In [ ]:

%%HTML
<center>
<iframe  src="..." width=70% height="500" ></iframe>
</center>

URL, kesako ?¶

A faire vous même n°3:

Lire la page Les URL proposée par David ROCHE puis répondre aux questions suivantes :

Que signifie l'acronyme URL ?

...

Soit la structure en arborescence suivante :

arborescence

Le contenu du fichier "fichier7.odp" utilise le fichier "fichier5.svg".

A faire vous même n°4 :

Donner le chemin relatif qu'il faudra renseigner dans le fichier fichier7.odp afin d'atteindre le fichier fichier5.svg :

...

Donner le chemin absolu permettant d'atteindre le fichier fichier6.html :

...

HTML/CSS :¶

A coder vous même n°5 :

En rejoignant la classe avec le code fourni, faire les activités d'Introduction à HTML/CSS : réaliser des pages Web

A faire vous même n°6 :

Que signifie l'acronyme HTML ?

...

Que signifie l'acronyme CSS ?

...

Ces langages sont-ils des langages de programmation ? Expliquer...

...

A faire vous même n°7:

Coller ci-dessous l'hyperlien vers une de vos pages Web publiée sur GitHub Pages ainsi que dans le code Python de la cellule suivante pour l'intégrer dans ce notebook :

...

In [ ]:

%%HTML
<center>
<iframe  src="..." width=70% height="500" ></iframe>
</center>

JavaScript :¶

HTML et CSS sont des langages de description d'une page Web pour définir, respectivement, le contenu d'une part et le style d'autre part.

JavaScript est le langage de programmation incontournable pour permettre à l'utilisateur de modifier de façon interactive l'affichage d'une page dans un navigateur Web.

JavaScript a été créé en dix jours par Brendan Eich en 1995. Malgré son nom, JavaScript n'a rien à voir avec le langage Java, même si Brendan Eich affirme s'être inspiré de nombreux langage, dont Java, pour mettre au point JavaScript. Après des débuts chaotiques, il est, comme déjà dit plus haut, devenu incontournable dans le développement web.

JavaScript est souvent qualifié de "verbeux", aussi, de nombreuses bibliothèques ont été développées pour simplifier l'écriture de script Javascript.

C'est le cas par exemple de P5.js.

Exemple 1 un peu de JavaScript avec CanvasRenderingContext2D de Canvas API :¶

A faire vous même n°8 :

Dans un nouveau projet GitHub Pages copier/coller les codes ci-dessous :

dans le fichier index.html :

<!doctype html>
<html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<title>Canvas API</title>
    	<link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1 id="html">Le dessin d'une maison dans un Canvas ;</h1>
    	<canvas id="my-house" width="300" height="300"></canvas>

        <script>
            const canvas = document.getElementById('my-house');
            const ctx = canvas.getContext('2d');

            // Set line width
            ctx.lineWidth = 10;

            // Wall
            ctx.strokeRect(75, 140, 150, 110);

            // Door
            ctx.fillRect(130, 190, 40, 60);

            // Roof
            ctx.beginPath();
            ctx.moveTo(50, 140);
            ctx.lineTo(150, 60);
            ctx.lineTo(250, 140);
            ctx.closePath();
            ctx.stroke();
        </script>

    </body>	
</html>

dans le fichier style.css :

body{
    text-align: center;    
}
h1{
    color : MediumSeaGreen;
}

Expérimenter d'autres exemples : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

Exemple 2 avec P5.js :¶

A faire vous même n°9 :

Dans un nouveau projet GitHub Pages copier/coller les codes ci-dessous :

dans le fichier index.html :

<!doctype html>
<html  lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Interactif avec P5.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">      
    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
    <script language="javascript" src="script.js"></script>    
  </head>
  <body>
    <center>      
      <h1>
        Voici un exemple de page Web rendue interactive grace au JavaScript de P5.js...
      </h1>   
    </center>
  </body>
</html>

dans le fichier style.css :

html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

canvas {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right:auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

dans le fichier script.js :

let ratio = 0.8 ;

function setup() {
  createCanvas(windowWidth*ratio, windowHeight*ratio);
}

function draw() {
  ellipse(mouseX, mouseY, 80, 80);
}

Puis tester en cliquant en déplaçant la souris (ou le doigt)...

On observe qu'avec P5.js, quelques instructions de code Javascript permettent de créer une page Web qui n'est plus figée mais bien interractive.

Exemple 3 en pur JavaScript :¶

A faire vous même n°10 :

Dans un nouveau projet GitHub-Pages copier/coller les codes ci-dessous :

dans le fichier index.html :

<!doctype html>
<html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<title>HTML+CSS+JS</title>
    	<link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
    	<h1 id="html">HTML pour le contenu ;</h1>
        <h1 id="css">CSS pour le style ;</h1>
        <h1 id="javascript">et JavaScript pour l'interractivité...</h1>
    	<button onclick="maFonction()">Cliquer ici</button>
    </body>	
</html>

dans le fichier style.css :

body{
    text-align: center;    
}
#html{
    color : MediumSeaGreen;
}
#css{
    color : darkorange;
}
#javascript{
    color : tomato;
}

dans le fichier script.js :

function maFonction() {
    alert("Le JavaScript fonctionne !")
}

Puis tester en cliquant sur le bouton Cliquer ici...

Comme vous pouvez le constater, le contenu HTML de la page web s'affiche bien avec le style définit dans CSS, et nous avons en plus une fenêtre (souvent qualifiée de surgissante ou pop-up en anglais) qui apparait dans le cas où l'utilisateur clique sur le bouton. L'apparition de cette fenêtre est bien évidemment due à l'instruction "alert" présente dans le JavaScript. On a associé au bouton un événement "onclick" tel que en cas de clic sur la souris, la fonction JavaScript "maFonction()" est exécutée.

Il est évidemment possible de faire des choses bien plus complexes que l'affichage d'un simple pop-up avec JavaScript. Il est possible de modifier le style d'une balise, de modifier la classe (CSS) d'une balise ou encore de modifier le contenu d'une balise...

Autres exemples :¶

Avec P5.js : https://ericecmorlaix-p5js-toto.glitch.me
Avec P5.js et P5.sound.js : https://ericecmorlaix-let-it-snow.glitch.me
Avec jQuery : http://isn.si.lycee.ecmorlaix.fr/casseTete/

A faire vous même n°11:

Décrire les quelques différences et/ou points communs que vous observez entre les langages de programmation Python et JavaScript :

...

A coder vous même n°12 :

Ajouter à vos pages web publiée sur GitHub-Pages de l'interactivité grace à JavaScript (et/ou PyScript) puis copier/coller un lien vers votre projet dans le code Python de la cellule suivante pour l'intégrer dans ce notebook :

In [ ]:

%%HTML
<center>
<iframe  src="..." width=70% height="500" ></iframe>
</center>

Prolongement :

Le but ici n'étant pas d'apprendre à programmer en JavaScript, nous nous contenterons pour le moment de cette simple instruction "alert". Evidemment JavaScript permet de faire bien plus de choses. En effet on retrouve en JavaScript les grands classiques des langages de programmation : variable, condition, boucle, fonction,...

Si vous voulez en apprendre plus sur la programmation en JavaScript : https://www.w3schools.com/js/default.asp.

Autres ressources :¶

Références aux programmes :¶

Contenus	Capacités attendues	Commentaires
Modalités de l’interaction entre l’homme et la machine Événements	Identifier les différents composants graphiques permettant d’interagir avec une application Web. Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter.	Il s’agit d’examiner le code HTML d’une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript.
Interaction avec l’utilisateur dans une page Web	Analyser et modifier les méthodes exécutées lors d’un clic sur un bouton d’une page Web

Contenus	Capacités attendues	Commentaires
Diversité et unité des langages de programmation	Repérer, dans un nouveau langage de programmation, les traits communs et les traits particuliers à ce langage.	Les manières dont un même programme simple s’écrit dans différents langages sont comparées.

Ce document, basé sur le travail de David ROCHE, est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.

Pour toute question, suggestion ou commentaire : eric.madec@ecmorlaix.fr

In [ ]: