Bloc 2 – Environnement de programmation
Question de réflexion 2
Activités
Définis dans tes propres mots ce qu’est un script et ce qu’est un logiciel. Chaque définition doit comporter un maximum de 50 mots. Fais part de tes définitions aux élèves du groupe-classe et, ensemble, venez-en à un accord sur la signification de chaque mot.
Dans ce cours, tu apprendras le langage de programmation JavaScript. Tu devras donc utiliser un environnement de programmation. Fais une recherche en ligne pour voir un exemple d’une page de travail des environnements de programmation suivants.
Qu’ont en commun ces environnements de programmation? Qu’en pensent les utilisatrices et les utilisateurs? Lequel te semble le plus convivial?
Procède à l’installation d’un environnement de programmation de la liste précédente pour JavaScript. Il se peut que tu doives obtenir la permission d’une personne responsable de l’informatique dans ton école avant de le faire ou avant que les services informatiques en fassent l’installation. Consulte ton enseignante ou ton enseignant avant de procéder.
Crée un dossier projet ICS3C_tonnom sur ton ordinateur, dans lequel tu pourras sauvegarder tes fichiers tel qu’il est illustré dans le document Gestion de fichiers.
Pourquoi une bonne organisation de fichiers et de dossiers de travail est-elle essentielle en informatique? Discutes-en avec les autres élèves du groupe-classe dans le forum de discussion.
Visionne le tutoriel Structure de base en HTML. Reproduis exactement le programme « Bonjour le monde » tel qu'il est décrit dans ce tutoriel en t’assurant d’intégrer les éléments suivants.
<!DOCTYPE html><html></html><head></head><title></title><meta charset="UTF-8"><body></body>
Enregistre ton fichier sous le nom bonjourmonde.html dans un dossier nommé ICS3C_tonnom et visualise-le dans un navigateur de ton choix.
Consulte le document Étiquettes HTML pour en apprendre davantage sur des éléments à ajouter à ta page Web. Ajoute ces éléments au fichier de ta page HTML.
- Insère « Bonjour le monde » dans les balises d’entête (
<h1></h1>). - Dans une section paragraphe (
<p></p>), présente-toi en quelques phrases et explique pourquoi tu veux suivre un cours de programmation. - Aère ton texte à l’aide d’un saut de ligne (
<br/>). - Ajoute une autre section, comprenant son propre titre, dans laquelle tu décris ton passe-temps favori (
<h2></h2>).
Il est possible d’insérer des images dans ta page HTML. Insères-y la photo d’un loup.
- Assure-toi que le fichier image, que tu inséreras dans ta page HTML, se trouve dans le dossier où tu sauvegardes ton projet de page HTML.
- Insère l’image du loup à l’aide de la balise :
<img src="../image_loup.jpg" alt="Loup" />. - Intègre au moins deux images de ton choix dans la page HTML que tu as commencée.
Le CSS (Cascading Style Sheets) est un langage informatique permettant de définir la présentation des documents HTML. Le CSS te permet donc de personnaliser ta page Web. Visionne les deux parties du tutoriel Introduction aux feuilles de styles en cascade pour voir comment le faire. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.
Amuse-toi à personnaliser ta page HTML en ajoutant des balises <style> pour modifier les éléments suivants :
- la police de caractères (font-family);
- la taille de la police de caractères (font-size);
- la couleur de la police de caractères (color);
- l’arrière-plan (background-color);
- l’alignement du texte (text-align).
Visualise tes modifications dans un navigateur. Quel effet est le plus réussi? Lequel devrais-tu améliorer?
Demande l’avis de tes pairs dans le forum de discussion en y diffusant une saisie d’écran de ta page HTML. Présente un commentaire constructif à deux élèves du groupe-classe à propos de leur page HTML.
Visionne les deux parties du tutoriel Attributs d’identification et classes de style CSS. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.
À quoi servent principalement ces attributs? Résume ce que tu as compris, en quelques mots, dans le forum de discussion.
Optimise ta page HTML avec au moins un attribut d’identification ou un attribut classe de style CSS. Communique ce que tu as fait aux autres élèves du groupe-classe. Prends connaissance de ce que les autres élèves ont intégré dans leur page HTML et présente un commentaire constructif à deux élèves du groupe-classe.
Visionne le tutoriel Introduction au langage JavaScript – Partie 1 et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.
En quoi utiliser le langage JavaScript est-il différent d’utiliser le langage HTML? Pourquoi était-il important de commencer par le langage HTML avant de se lancer dans le langage JavaScript?
Analyse les résultats de ton sondage. Les jeunes voudraient un jeu éducatif dans quelle matière? Quels sont leurs besoins? Comment répondrais-tu à leurs besoins dans un jeu-questionnaire? Fais un remue-méninges pour déterminer le sujet de ton jeu et divers types de questions simples qui pourraient y être associées.
Un cahier des charges est un document qui présente les détails et l’ampleur d’un projet. Pour ton jeu éducatif, élabore un cahier des charges qui comprend une description des éléments suivants :
- le contexte (court paragraphe présentant les raisons pour lesquelles tu crées un jeu éducatif);
- les objectifs de ton jeu (ce que le jeu permettra de faire);
- les ressources requises (ce dont tu auras besoin pour réaliser ton jeu);
- le calendrier (temps nécessaire pour réaliser les grandes étapes de ton projet).
Tu peux faire ton cahier des charges sous la forme d’une page HTML, si tu le désires.