Étiquette : CSS

Projets

Un site internet pour tester à la volée des…

Ici nous allons vous montrer un site internet pour essayer les codes HTML ; CSS ; javascript.

Introduction au projet

On ne voulait utiliser un site fait maison pour être sûr de pas se faire attaquer par le DNS du service informatique, qui peut arbitrairement décider de bloquer tel ou tel site web.

On a alors posé un cahier des charges :

  • Un site permettant de charger du HTML, du CSS et du JS.
  • Intuitif.
  • Un retour console pour le JS car c’est mieux que d’aller dans la console du navigateur.

Une fois fait, on s’est mis a coder, on était large, on avait 2 jours pour proposer au prof un outil clé en main.

Interface

L’idée de l’interface est simple :
<emb751|center>
En rouge : le site retour.
En bleu : les zones d’édition.
En noir : le bouton pour envoyer tout ce beau code

L’architecture est un système de div, très pratique pour la mise en page.
Afin de ne pas interférer avec le code éventuel des élèves, on donne des ID aléatoirement générés pour les parties vitales du site (inputs, outputs).

Le JavaScript

C’est la partie la plus importante du site.

Pour le bon fonctionnement du site, il nous faut 3 fonctions :

  • Une fonction de récupération de console.
  • Une fonction d’envoi du code.
  • Une fonction traitant le CSS à envoyer.

Récupération console

On réécrit la fonction console.log et on associe cette fonction à la fonction window.onerror.

<code class="javascript">Retour ligne automatique
console.log = function () Retour ligne automatique
// On recupère le message passé en argumentRetour ligne automatique
var message = [].join.call(arguments, " ") ;

// On crée un nouvel élément <div> qu'on ajoute dans le codeRetour ligne automatique
var div = document.createElement("div") ;Retour ligne automatique
div.appendChild(document.createTextNode(message)) ;Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div) ;Retour ligne automatique
 ;

// Redéfinition de la fonction d'erreurRetour ligne automatique
window.onerror = console.log ;Retour ligne automatique
</code>

Fonction de traitement du CSS

On commence par convertir le CSS en une seule ligne.
Ensuite on split la chaine obtenue avec le charactère «  », ça nous permet d’avoir un Array contenant des strings commençant toujours par un objet à modifier en CSS ou une string vide.

Comme notre fenêtre visible et modifiable par les élèves porte l’ID « main », on ajoute « #main  » a chaque objet ou on remplace « body » par « #main » afin de n’affecter que la div main.

<code class="javascript">Retour ligne automatique
function convertCSS(code) Retour ligne automatique
code = code.replace("\n", "") ;Retour ligne automatique
code = code.replace("\r", "") ;Retour ligne automatique
var newCode = code.split("") ;Retour ligne automatique
for (var i = newCode.length ; i >= 0 ; i—) Retour ligne automatique
if (newCode[i] !== undefined && newCode[i] !== "") Retour ligne automatique
newCode[i] = newCode[i].replace(/^\s+|\s+$/g, "") ;Retour ligne automatique
if (newCode[i].startsWith("body")) Retour ligne automatique
newCode[i] = "#main " + newCode[i].substring(4) ;Retour ligne automatique
Retour ligne automatique
if (!newCode[i].startsWith("#main")) Retour ligne automatique
newCode[i] = "#main " + newCode[i] ;Retour ligne automatique
Retour ligne automatique
newCode[i] += "" ;Retour ligne automatique
Retour ligne automatique
Retour ligne automatique
return newCode.join("") ;Retour ligne automatique
Retour ligne automatique
</code>

Fonction d’envoi du code

On commence par clear la console.
Puis on envoie un retour console avec un id précis pour changer son style. Ce retour permet de nous assurer que le code a été envoyé.

On actualise les balises du site qui assurent le bon fonctionnement de la fenêtre main en prenant bien soin de traiter le CSS.

Problème principal lors de la réalisation de cette fonction :
Pour pouvoir modifier le JS de la fenêtre, il est indispensable de supprimer la balise < script > qui contient l’ancien JS. On ne peut pas juste réécrire le JS, sinon la cache ne s’actualise pas.

<code class="javascript">Retour ligne automatique
// Fonction d'envoi du codeRetour ligne automatique
var sendCode = function() Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").innerHTML = "<p>Retour console</p>" ;Retour ligne automatique
// On crée un nouvel élément <div> qu'on ajoute dans le codeRetour ligne automatique
var div = document.createElement("div") ;Retour ligne automatique
div.id = "change" ;Retour ligne automatique
div.appendChild(document.createTextNode("Code envoyé !")) ;Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div) ;Retour ligne automatique
// Changement HTMLRetour ligne automatique
document.getElementById("main").innerHTML = document.getElementById("html").value ;Retour ligne automatique
// Changement JSRetour ligne automatique
document.getElementById("toAdd").remove() ;Retour ligne automatique
var script = document.createElement("script") ;Retour ligne automatique
script.id = "toAdd" ;Retour ligne automatique
document.body.appendChild(script) ;Retour ligne automatique
document.getElementById("toAdd").innerHTML = document.getElementById("js").value ;Retour ligne automatique
// Changement CSS Retour ligne automatique
document.getElementById("maincss").innerHTML = convertCSS(document.getElementById("css").value) ;Retour ligne automatique
if(document.getElementById("html").value.toString().indexOf("<body onload=") !== -1)Retour ligne automatique
window[Retour ligne automatique
document.getElementById("html").value.substring(Retour ligne automatique
document.getElementById("html").value.toString().indexOf("\""Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("<body onload="))+1Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("("Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("<body onload=")))]() ;Retour ligne automatique
Retour ligne automatique
</code>

Conclusion

Le site fut fini dans les temps et opérationnel !
https://workspace.nsi.xyz/

Découvrir

Présentation de la spécialité NSI

L’enseignement de spécialité de numérique et sciences informatiques (NSI) du cycle terminal de la voie générale vise l’appropriation des fondements de l’informatique pour préparer les élèves à une poursuite d’études dans l’enseignement supérieur, en les formant à la pratique d’une démarche scientifique et en développant leur appétence pour des activités de recherche.

Objectifs de la spécialité NSI

L’objectif de cet enseignement est l’appropriation des concepts et des méthodes qui fondent l’informatique, dans ses dimensions scientifiques et techniques.

Cet enseignement s’appuie sur l’universalité de quatre concepts fondamentaux et la variété de leurs interactions :

  • les données ,
  • les algorithmes,
  • les langages,
  • les machines.

Profils recherchés

La spécialité NSI est proposée au lycée Louis Pasteur aux élèves ayant choisi de préparer un baccalauréat général.

Cet enseignement de 4 heures par semaine en classe de première a lieu en salle informatique exclusivement, il prépare les élèves aux études scientifiques mais il peut aussi être suivi par des élèves ayant un profil plus littéraire.

Organisation des enseignements au lycée Louis Pasteur

L’enseignement de la spécialité NSI au lycée Louis Pasteur place l’élève au cœur du dispositif.

Chaque élève construit son propre cours, en partir de documents numériques préparés par les enseignants du lycée, chacun peut avancer à son rythme.

Environ 1/4 du temps scolaire est consacré à la réalisation du mini-projets ou de tutoriels.

Les projets et les tutoriels réalisés par nos étudiants donnent lieu à :

  • la rédaction d’un compte rendu, publié sur ce site
  • une présentation orale devant la classe, indispensable entrainement au grand oral du baccalauréat.
En savoir plus sur les projets réalisés
Pourquoi des tutoriels ?