Comment en est-on arrivé là?

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.

Sources

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:

Créez votre propre frise

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 media
  • mediaThumbnail: 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 MDN

Pour 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!

Exemples de réalisations des élèves

Des exemples de travaux des élèves peuvent être consultés à l'adresse suivante: http://heoinfo.github.io/isn/2016-2017/#frises