CSS, nombres entiers et pédagogie
Par Gilles Jobin, mercredi 25 mai 2005 :: Mathématiqueries :: #205 :: rss
Ce billet se veut aussi un complément à un commentaire de Benoit St-André laissé sur ce billet.
Le HTML (HyperText Markup Language) est le véritable crayon du web. C'est à l'aide de ce langage qu'on crée des pages web. Pour avoir une idée de ce à quoi ça ressemble, de votre navigateur, choisissez l'option afficher le code source. Vous verrez alors ce qui se cache derrière la page que vous lisez.
CSS est l'acronyme pour Cascading Style Sheets. C'est aussi un langage qui s'intègre au HTML pour donner du style à la page.
Dans ma CS, il y a un enseignant qui dès le deuxième cycle du primaire, permet aux élèves de faire leurs pages web personnelles à l'aide du Blocnote de Windows. Autrement dit, les petits écrivent directement le code HTML dans cet éditeur de texte. C'est donc dire que le HTML ne demande pas un doctorat pour être utilisé.
Les CSS viennent à peu près immédiatement après un apprentissage de base du HTML. Il est donc envisageable que dès le troisième cycle du primaire, les jeunes puissent utiliser ce langage dans la structure de leurs pages web.
Or dans les CSS, il y a un truc très intéressant qui s'appelle le positionnement d'éléments. Le concept est fort simple. Par exemple, sur le blogue que vous lisez en moment, la fenêtre principale fait tout l'écran (le fond d'écran vert le délimite). Sur cet écran, le programmeur a positionné un élément à l'intérieur duquel deux autres éléments (deux colonnes) sont placés côte à côte. Les CSS permettent de positionner de manière très précises de tels éléments sur un écran.
Pour vous donner une petite idée de tout ça, voyez la figure ci-dessous (pour les besoins de l'exemple, nous supposerons que le carré rouge fait 100 pixels x 100 pixels) :
left:25px top: 25px bottom:25px right:25px
qui signifie que
left:50px top:50px bottom:0px right:0px.
Mais qu'arrive-t-il si on déplace la bloc positionné un peu à l'extérieur du conteneur ? Comment décrire cette position?
L'illustration ci-dessous met les repères essentiels :
Remarquez la superbe introduction des nombres négatifs pour préciser le sens du positionnement du côté. Notez aussi que dans le même système, se déplacer vers la droite peut être positif si c'est le côté gauche qui se déplace (flèche 1) ou négatif si c'est la côté droit qui se déplace (flèche 4). N'est-ce pas là quelque chose de remarquable et d'inusité mais, dans le fond, très logique. Notez aussi la nécessité d'utiliser quatre nombres pour préciser la position. (Par comparaision, dans le plan cartésien, deux nombres seulement sont nécessaires.) Si on veut, c'est une espèce de géométrie à quatre dimensions et, mathématiquement parlant, on pourrait sans doute construire toute une série de théorèmes sur cette géométrie. On pourrait même introduire une troisième (cinquième?) dimension car le CSS permet de donner une priorité à la visibilité des objets. Dans les cas ci-haut, on pourrait par exemple basculer le bloc bleu derrière le bloc rouge.
L'intérêt de baigner l'élève (qui le désire) dans un tel système est justement le fait qu'il s'approprie et manipule concrètement un système, une convention. Lorsqu'il sera appelé, plus tard, à étudier le système cartésien ce ne sera plus pour lui qu'un autre système de positionnement, une autre convention. De la même manière, lorsqu'il étudiera le système de coordonnées sphériques où, pour positionner un point, on donne une longueur et un angle.
L'avantage du CSS (et de toute programmation informatique) réside dans l'expérience directe de la résolution de problèmes car on voit ce que ça donne en testant immédiatement son code. Quoi de mieux pour développer sa compétence à résoudre des problèmes?
Le HTML (HyperText Markup Language) est le véritable crayon du web. C'est à l'aide de ce langage qu'on crée des pages web. Pour avoir une idée de ce à quoi ça ressemble, de votre navigateur, choisissez l'option afficher le code source. Vous verrez alors ce qui se cache derrière la page que vous lisez.
CSS est l'acronyme pour Cascading Style Sheets. C'est aussi un langage qui s'intègre au HTML pour donner du style à la page.
Dans ma CS, il y a un enseignant qui dès le deuxième cycle du primaire, permet aux élèves de faire leurs pages web personnelles à l'aide du Blocnote de Windows. Autrement dit, les petits écrivent directement le code HTML dans cet éditeur de texte. C'est donc dire que le HTML ne demande pas un doctorat pour être utilisé.
Les CSS viennent à peu près immédiatement après un apprentissage de base du HTML. Il est donc envisageable que dès le troisième cycle du primaire, les jeunes puissent utiliser ce langage dans la structure de leurs pages web.
Or dans les CSS, il y a un truc très intéressant qui s'appelle le positionnement d'éléments. Le concept est fort simple. Par exemple, sur le blogue que vous lisez en moment, la fenêtre principale fait tout l'écran (le fond d'écran vert le délimite). Sur cet écran, le programmeur a positionné un élément à l'intérieur duquel deux autres éléments (deux colonnes) sont placés côte à côte. Les CSS permettent de positionner de manière très précises de tels éléments sur un écran.
Pour vous donner une petite idée de tout ça, voyez la figure ci-dessous (pour les besoins de l'exemple, nous supposerons que le carré rouge fait 100 pixels x 100 pixels) :
left:25px top: 25px bottom:25px right:25px
qui signifie que
- le côté gauche du bloc bleu est situé à 25px à droite du côté gauche du conteneur;
- le côté haut du bloc bleu est situé à 25 pixels en bas du côté haut du conteneur;
- le côté bas du bloc bleu est situé à 25 pixels en haut du côté bas du conteneur;
- le côté droit du bloc bleu est situé à 25 pixels à gauche du côté droit du conteneur.
left:50px top:50px bottom:0px right:0px.
Mais qu'arrive-t-il si on déplace la bloc positionné un peu à l'extérieur du conteneur ? Comment décrire cette position?
L'illustration ci-dessous met les repères essentiels :
Remarquez la superbe introduction des nombres négatifs pour préciser le sens du positionnement du côté. Notez aussi que dans le même système, se déplacer vers la droite peut être positif si c'est le côté gauche qui se déplace (flèche 1) ou négatif si c'est la côté droit qui se déplace (flèche 4). N'est-ce pas là quelque chose de remarquable et d'inusité mais, dans le fond, très logique. Notez aussi la nécessité d'utiliser quatre nombres pour préciser la position. (Par comparaision, dans le plan cartésien, deux nombres seulement sont nécessaires.) Si on veut, c'est une espèce de géométrie à quatre dimensions et, mathématiquement parlant, on pourrait sans doute construire toute une série de théorèmes sur cette géométrie. On pourrait même introduire une troisième (cinquième?) dimension car le CSS permet de donner une priorité à la visibilité des objets. Dans les cas ci-haut, on pourrait par exemple basculer le bloc bleu derrière le bloc rouge.
L'intérêt de baigner l'élève (qui le désire) dans un tel système est justement le fait qu'il s'approprie et manipule concrètement un système, une convention. Lorsqu'il sera appelé, plus tard, à étudier le système cartésien ce ne sera plus pour lui qu'un autre système de positionnement, une autre convention. De la même manière, lorsqu'il étudiera le système de coordonnées sphériques où, pour positionner un point, on donne une longueur et un angle.
L'avantage du CSS (et de toute programmation informatique) réside dans l'expérience directe de la résolution de problèmes car on voit ce que ça donne en testant immédiatement son code. Quoi de mieux pour développer sa compétence à résoudre des problèmes?
Commentaires
1. Le jeudi 26 mai 2005 à 04:10, par Marie-Élaine :: email :: site
2. Le jeudi 26 mai 2005 à 04:28, par Gilles G. Jobin :: email :: site
3. Le jeudi 26 mai 2005 à 20:39, par Pierre Lachance :: email
Ajouter un commentaire
Gilles Jobin
Les commentaires pour ce billet sont fermés.