Nous sommes aujourd'hui entouré d'ordinateurs, de serveurs, de tablettes, et nous interagissons avec ces machines quasi-quotidiennement, mais comment cela a-t-il été possible?
Comme l'explique l'article Informatique de Wikipedia, cela a été possible grâce à des avancées de nature théorique, mais aussi technologiques.
Ces champs d'application[de l'informatique] peuvent être séparés en deux branches:
- l'une, de nature théorique, qui concerne la définition de concepts et modèles,
- et l'autre, de nature pratique, qui s'intéresse aux techniques concrètes de mise en œuvre.
Les domaines de l'informatique sont nombreux: algorithmique, langages de programmation... Et l'informatique fait intervenir de nombreux domaines connexes: électronique, optique, ondes pour le stockage de données, leur échange sur des réseaux...
Voici quelques liens pour y voir plus clair:
A vous d'écrire votre histoire de l'informatique en utilisant les liens ci-dessus, et en réalisant
une frise chronologique grâce à la librairie javascript
TimelineJS
Pour cela vous allez devoir dans un premier temps concevoir sur le papier votre frise en sélectionnant les éléments les plus signifiants, en les ordonnant. N'oubliez pas de noter également vos sources de texte et d'images(libres de droit).
Vous intégrerez ensuite vos éléments au sein d'un fichier de données csv
(comma separated values, soit valeurs séparées par des virgules) que vous
éditerez avec un tableur(LibreOffice de préférence).
Voici un exemple de rendu d'une frise avec timeline.js
: https://benjaminabel.github.io/timelinejs-local/,
vous pouvez visualiser ici le fichier de données timeline-data.csv
qui a permis de créer cette frise.
La particularité de la librairie TimelineJS, est qu'elle permet d'ajouter eu plus du simple texte, des médias issus de diverses sources: Wikipedia, Youtube, SoundCloud, Instangram, Tweeter... (liste complète)
Voici la signification des entrées de ce tableau de données:
date
: année de la découverte ou de
l'invention(obligatoire sauf pour la vignette de titre).type
: laisser vide pour un événement normal et indiquer titre pour la
vignette de titre de la frise.titre
: titre de la vignette.texte
: texte à inclure dans la vignette.mediaUrl
: adresse de l'élément media(exemple: https://fr.wikipedia.org/wiki/Pascaline, ou
localement: img/mon-image.jpg
)mediaCredit
: auteur et licence du média intégrémediaLegend
: légende à ajouter au mediamediaThumbnail
: vignette à utiliser pour afficher la vignette sur la
frise, si vide, une vignette par défaut est ajouté en fonction du média(exemple: logo Youtube pour les
média youtube)backgroundUrl
: adresse url d'une image à utiliser pour le fond de la
vignette.backgroundColor
: couleur du fond de la vignette, vous pouvez utiliser
une couleur héxadécimale #RRGGBB
ou avec transparence #RRGGBBaa
, ou simplement un nom de couleur css
comme white
, lime
, ... liste complète sur
MDNPour créer votre frise, téléchargez le dossier compressé du code de la frise d'exemple à l'adresse
suivante: https://github.com/benjaminabel/timelinejs-local/archive/gh-pages.zip,
puis éditez le fichier timeline-data.csv
avec le tableur.
Observez le rendu dans le navigateur en ouvrant le fichier index.html
et
en rafraîchissant la page à chaque changement.
A vos claviers!
Des exemples de travaux des élèves peuvent être consultés à l'adresse suivante: http://heoinfo.github.io/isn/2016-2017/#frises