Les femmes qui ont marqué l'informatique
Compte rendu
J'ai choisi de parler de femmes remarquables dans l'histoire de l'informatique, car ce sujet m'intéresse particulièrement. Au départ, je voulais me concentrer sur Ada Lovelace, dont les travaux m'ont passionnée. Mais pour avoir suffisamment de contenu, j'ai décidé de parler de quatre femmes différentes.
J'ai alors commencé mes recherches, ce qui a été la partie la plus longue car j'ai voulu obtenir le plus d'informations précises possible. J'ai ensuite établi un plan sur Google Docs.
Recherches
J'ai consulté plusieurs sources pour ma recherche. Voici donc mes différentes sources :
- Qui était Ada Lovelace?
- Ada Lovelace, la première programmeuse de l'histoire
- Ada Lovelace
- L'actrice qui a inventé le WiFi
- L'actrice à l'origine du WIFI"
- Etalement de spectre par saut de fréquence
- Grace Hopper
- Gladys Mae West
J'ai aussi utilisé trois sources trouvées au CDI.
- Kezako mundi n°26 (03/2019)
- Kezako mundi n°59 (07/2022)
- Science et avenir n°191 (10/2017)
En ce qui concerne les images, j'ai utilisé des images libres de droit trouvées sur Wikipedia. Il y a le lien de la source sous chaque image.
Réalisation de la page
En tant que débutante en HTML, la création de la page elle-même a été difficile. Avant de commencer, j'ai lu plusieurs tutoriels.
J'ai commencé par créer une barre de navigation qui reste en haut de la page grâce à la balise position: fixed. Pour cela, j'ai utilisé ce tutoriel.
J'ai également ajouté un effet de survol, où le fond de la barre devient blanc. J'ai ensuite ajouté la classe current pour chaque page individuelle, qui a les mêmes propriétés CSS que le survol de la barre. De cette manière, lorsque nous sommes sur une page, la barre reste blanche.
J'ai ensuite ajouté mon texte et les images. J'ai décidé de mettre d'un côté le texte et de l'autre l'image, mais je ne savais pas du tout comment faire, j'ai donc demandé beaucoup d'aide à ChatGPT.
Pour placer le texte et les images, j'ai créé des classes container_right et conteiner_left avec les sous-classes image_right, image_left et texte.
Voici donc le code:
La propriété CSS display: flex permet aux éléments de s'adapter dans ce conteneur, tandis que flex-direction: row place les éléments sur la même ligne.
Puis j'ai rajouté les légendes des images. Pour cela, j'ai utilisé la balise figure, qui crée donc des légendes. Mais vu que j'avais des fois des images qui étaient trop petites, je les ai agrandies (width= 150% par exemple). Mais du coup, la légende s'arrêtait au milieu de l'image. J'ai donc un peu triché et pour chaque figcaption, j'ai rajouté une balise de style et je leur ai individuellement appliqué une largeur: < figcaption style="width: 150%;">"légende associée"< /figcaption> ).
Après avoir terminé la majorité du texte, j'ai commencé à travailler sur la frise chronologique.
Ne sachant pas du tout comment faire, j'ai utilisé un tutoriel de W3School. J'ai alors ajouté quelques éléments, notamment les liens vers les autres pages.
Puis je me suis aperçu d'un problème : ma timeline passait au-dessus de ma navbar.
Ce problème était causé par l'utilisation de la propriété z-index: 1 sur la timeline. J'ai donc ajouté la propriété z-index: 2 sur la navbar (z-index:n est une propriété CSS qui permet de hiérarchiser des éléments : plus n est grand, plus l'élément est sur le dessus).
Esthétique
Ma page était donc prête, cependant, le résultat final n'était pas très esthétique. J'ai donc cherché une palette de couleurs qui me plaisait sur Coolors.
J'ai aussi trouvé deux polices de caractères assorties sur Google Font.
Ayant eu besoin d'aide pour ajouter ces polices à ma page, j'ai demandé de l'aide à une amie en terminale NSI.
Pour l'icone j'avais une idée précise de ce que je voulais, mais vu que ne trouvais pas d'image libre semblable, je l'ai dessiné puis je l'ai rajouté à ma page avec < link rel="icon" href="icon.ico">
Site réalisé par Ilana.R