Projet de journée de carrière scolaire (matériel d’apprentissage)

Quelle meilleure façon pour les étudiants d’apprendre la programmation que de jouer avec le code ? Consultez cette ressource !

J’ai été approché sur LinkedIn pour aider une école avec leur Career Day. Je suis intervenu et j’ai dit que je ferais un projet portable avec lequel les étudiants pourraient interagir pour fournir un scénario relativement réel de ce que c’est que d’être programmeur.

Je vais partager les fichiers avec vous, ici, ainsi que décrire certaines activités facultatives qu’un étudiant peut expérimenter pour s’appuyer sur toute expérience de programmation qu’il peut déjà avoir. Veuillez les essayer vous-même, puis les ajouter ou en faire une leçon pour une classe d’étudiants curieux.

Mettre en place

Le brief que je me suis donné était de créer un environnement pour un projet Web qui s’exécuterait sur une machine Windows de la manière la plus autonome possible.

Il nous faudrait :

1. Un éditeur (un environnement de développement intégré ou IDE)
2. Un serveur Web
3. Du code source sous forme de JavaScript (jQuery), CSS et HTML

J’ai choisi la version Windows de Microsoft Code Visual Studio comme l’IDE, qui contient un plugin pour un serveur Web, nous avons donc couvert 1 et 2. J’avais juste besoin de créer le code source, qui vous pouvez télécharger ici.

Voici comment nous suggérons de configurer l’environnement et d’utiliser le code :

1. Décompressez le Website.zip (ci-joint) à un emplacement sur votre lecteur C:.
2. Installez VS Code à partir de ce emplacement.
3. Exécutez le code VS.
4. Cliquez sur l’icône Extensions (veuillez voir l’image ci-dessous, qui montre une flèche rouge vers l’icône Extensions).

5. Ensuite, dans la zone de recherche, entrez « IIS Express ». Localisez-le dans la liste filtrée et installez-le. (Voir l’image ci-dessous—la flèche rouge indique l’extension installée.)

6. Dans VS Code, cliquez sur Fichier > Ouvrir et sélectionnez le dossier dans lequel vous avez décompressé le dossier Site Web.
7. Faites confiance aux auteurs si le message apparaît.
8. Voir dans la dernière image le bouton Démarrer le site Web. Veuillez cliquer dessus et votre site devrait se charger dans votre navigateur par défaut sur un port. Ce que je veux dire par sur un port, c’est que le site est exécuté comme un site Web au lieu de charger le fichier à partir du lecteur C:.
9. Vous pouvez maintenant exploiter le site. Cliquez sur les boutons Page en haut, qui sont des menus. Vous pouvez utiliser le menu déroulant de la page 2 pour charger les grilles.

S’amuser

Avec le site Web chargé, vous pouvez essayer nos interactions. Voici quelques idées :

• Si, lors de l’utilisation du site, vous remarquez que les grilles sont hors de l’écran, modifiez 680 dans page1.html pour qu’il soit égal à 500 environ. Cela dépend des contraintes de temps. Normalement, la grille peut être conçue pour calculer dynamiquement la hauteur.
• Si vous remarquez un caractère étrange dans la grille comme un « A » avant la devise, déplacez les CDN « culture » et « message » dans la balise head juste en dessous de la ligne jQuery dans chaque page, y compris index.html.
• Vous pouvez trouver la balise head en utilisant Ctrl + F et en tapant « head ». Vous pouvez également rechercher la culture et le message de la même manière. Connaissez votre environnement de développement intégré (IDE).
• Ouvrez le fichier js/data.js et modifiez l’une des valeurs de données. Voyez comment cela affecte la grille.
• Remarque : Des résultats imprévisibles peuvent se produire lorsque la syntaxe n’est pas correcte. Assurez-vous que les littéraux de chaîne ne sont modifiés qu’à l’intérieur des guillemets.
• L’oDataChooser cessera de fonctionner correctement si vous modifiez les valeurs d’ID. Voir la ligne 44 sur page1.html pour une occurrence de son utilisation si vous choisissez des valeurs différentes. Modifiez également les zones d’utilisation.
• Modifiez les littéraux de chaîne comme les noms en fonction de vos préférences.
• Ajouter plus de données dans le oPeople var de js/data.js.
• J’ai supprimé (commenté) la page 2. Rajoutez cette page en supprimant le <!-- --> commentaire du fichier includes/menu.html. Voyez comment cela affecte le programme.

Notez que certaines personnes en informatique disent qu’il n’y a pas d’erreurs en informatique. C’est parce que nous pouvons toujours les réparer. (Cela pourrait être plus pertinent pour les logiciels. Le matériel prend parfois un peu plus de temps parce que vous devez vous procurer le matériel.) Je suis l’une de ces personnes. Assurez-vous simplement qu’aucun accident dû à un problème informatique ne cause de préjudice humain. Ceux qui supervisent les techniciens et les programmeurs doivent investir correctement dans les ressources logicielles pour qu’ils puissent effectuer leur travail correctement.

Synopsis et nuances du projet

1. J’ai pris index.html ci-dessous comme page à diffuser.
2. Notez class= »max » 100% hauteur et 100% largeur sur html, head, body et div. Cela fait que la page prend la hauteur et la largeur maximales du navigateur. Cela permet au séparateur de redimensionner correctement la page en un en-tête, un milieu et un pied de page, en gardant la cohérence entre les pages.
3. NJQ_FetchHtml()— Ceci a un préfixe NJQ, pour No jQuery. Il peut être appelé sans que jQuery ait été chargé. Il « corrige » les inserts html qui ont l’attribut « html-include ». La fonction réside dans /js/NojQuery.js et est essentiellement un moyen de parcourir les balises html à la recherche de l’attribut « include-html » et d’insérer l’inclusion pertinente dans la page à la position appropriée.
4. La Every() routine dans le document prêt s’exécute dans chaque page, configurant les séparateurs et exécutant d’autres fonctions pour chaque page. Les fonctions dans Every() nécessite le chargement de jQuery.
5. J’ai trouvé que sans le délai d’attente pour ulMenu le programme n’a pas fonctionné correctement. C’est parce que le NJQ_Every() fonctionne toujours et le menu s’exécute sur le html injecté. Document ready ne fonctionne pas dans les include car le système n’« exécute » pas le code injecté. Un délai d’attente laisse le temps à l’injection de se produire afin ulMenu peut être trouvé dans le jQuery.

index.html

<html class="max">
<head class="max">
  <title>Sprowston High</title>
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
  <script src="js/NojQuery.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.highcontrast.min.css" />
  <link href="css/css.css" rel="stylesheet" />
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/cultures/kendo.culture.en-GB.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/messages/kendo.messages.en-GB.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
</head>
<body class="max" page-name="Index">
    <div id="divSplitter" class="max">
        <div id="divTopPane">
            <div include-html="includes/menu.html">
            </div>
        </div>
        <div id="divMiddlePane">

        </div>
        <div id="divBottomPane">
            <div include-html="includes/copyright.html">
            </div>
        </div>
    </div>
    <script>
        NJQ_FetchHtml();
            
        $(document).ready(function () {
            setTimeout(function() {
                NJQ_Every();
                Every();
                setTimeout(function() {
                    $("#ulMenu").kendoMenu();
                }, 1000);
            }, 1000);
        });
    </script>
</body>
</html>

Pour résumer

Ce projet peut être déployé sur un réseau scolaire, permettant aux élèves d’interagir avec le présentateur et d’apprendre à quel point il est facile et amusant de modifier des choses pour que l’ordinateur fasse des choses différentes.

Le plaisir de réaliser le projet a été multiplié par la possibilité d’en faire un blog. Je trouve que l’expérience acquise a rendu mes capacités avec un ordinateur plus précieuses à la suite de ma collaboration avec vous aujourd’hui. J’apprécie cela et j’espère que le sentiment est réciproque.

J’espère que c’est une bonne lecture et que vous avez aimé essayer le projet.

Contactez-moi, David Robertson (https://www.dar-jader.com) à david@dar-jader.com pour en savoir plus.