L'ISN, pour les nuls

SOMMAIRE:

  1. introduction
  2. Préambule :
  3. Le langage HTML
  4. Le langage python
  5. Le code ASCII

Introduction: Qu'est-ce que l'ISN?

L'ISN signifie "Informatique et Science du Numérique".Ils'agit d'une nouvelle spécialité de terminale S, créée en 2012. Cet enseignement a pour but d'initier aux lycéens les bases de la programmation. Cette spécialité permet également d'apprendre aux lycéens à mener un projet de programmation en groupe. Les cours d'ISN ont lieu 2 heures par semaine, et, des devoirs à la maisons ont lieu , permettant d'appliquer le langage de programmation vu en cours. Pour plus d'infos, cliquez sur ce lien.

Préambule

"L'informatique", c'est quoi ?

En tout début d'année, nous avons vu la définition de l'informatique, avec une définition d'un dictionnaire Larousse. Ce dernier donne les définitions suivantes: De cette définition, on peut dire que l'informatique est une science, reconnue tardivement par l'académie francaise, soit 1966, qui gère des informations, par l'intermédiaire d'ordinateurs.
Ces informations peuvent être de plusieurs types: il peut s'agir d'images, ou de données. Les ordinateurs sont universels.

Pour demander à un ordinateur de traiter certaines données, il faut lui donner une série d'instructions: un algorithme. Cette série d'instruction existait, cependant, déjà avant la naissance de l'informatique: on peut considérer une recette de cuisine comme un algorithme, par exemple.

Un peu d'histoire :

Aujourd'hui, l'informatique prend une grande place dans nos vies, on peut donc se demander : comment l'informatique a-t-elle débuté?
Les premières machines capables d'éxécuter des algorithmes sont créées au XVIIièmesiècle, notamment avec la Pascaline, en 1642, ne pouvant cependant qu'additioner ou soustraire. Une autre machine a été créée, en 1973, la machine de Leibniz, étant capable d'additionner, de soustraire, mais également de multiplier et de diviser! Cette machine utilise l'invention de Leibniz : le cylindre de Leibniz, voici à quoi il ressemblait:

cylindre cannelé de Leibniz

En 1800, une autre machine a vu le jour, l'invention de Jacquard, une machine capable, grâce à un système de cartes perforées, de sélectionner des fils de chaînes, donc de faciliter la vie des canuts, dans les métiers à tisser.
L'invention des cartes perforées a beaucoup influencé Charles Babbage, un inventeur britannique, qui a énoncé les premières idées du principe d'un ordinateur.Il n'a cependant jamais pu finir son projet de faire une machine ne contenant pas d'erreurs.
Ses travaux ont cependant été repris par un de ses fils, en 1910. La machine créée par ce dernier avait,cependant,plusieurs similitudes avec les ordinateurs actuels :


En 1936, la machine de Turing est apparue, modèle abstrait du fonctionnement d'appareils à algorithme, telles que les machines à calcul. Son créateur, Alan Turing participa à la création d'un ordinateur géant, pendant la Seconde Guerre Mondiale, le Colossus:

Le Colossus.

Les ordinateurs étaient relativement encombrants, voici quelques images des premiers ordinateurs:
Le Zuse 3:

Le Z3

Harvard Mark I (avec 765 000 composants, des centaines de kilomètres de cables, sur 16 mètres de long, 2.4 mètres de haut, 0.5 mètres de profondeur,et un poids de 4 tonnes.) :

Mark 1

Les caractéristiques d'un ordinateur

Nous avons vu que le traitement d'un algorithme a évolué au cours du temps. Aujourd'hui, notre "machine à algorithme" se nomme "ordinateur". Nous verrons donc, dans cette sous partie, comment un ordinateur traite les algorithmes, grâce à son architecture.
En 1945, Von Neumann propose un modèle d'architecture d'un ordinateur encore valable aujourd'hui. Il s'agit du "modèle de Von Neumann". Selon ce modèle, il existe 3 élements distincts:

Tout cela peut être résumé en un schéma :

Modèle de Von Neumann

Un ordinateur moderne possède un écran, une carte mère, un processeur, une mémoire vive, des ports PCI (pour les cartes audio, son,réseau, graphiques, etc...),un disque dur(mémoire persistante), un lecteur de disques, etc...

architecture d'un ordinateur

  1. Ecran
  2. Carte Mère
  3. Microprocesseur (CPU)
  4. Carte d'extension
  5. emplacement pour mémoire vive (RAM)
  6. Alimentation
  7. Lecteur optique (DVD)
  8. Disque dur
  9. Souris
  10. Clavier

Arborescence des fichiers

Comme dit précédement, un ordinateur est une machine gérant des données. L'ordinateur peut donc être amené à sauvegarder ces fichiers dans sa mémoire persistante (la mémoire vive étant constituée de fichiers temporaires). La mémoire d'un ordinateur s'organise dans différents fichiers d'un arbre assez complexe

arborescence de fichiers
Voici un exemple de l'arborescence des fichiers. Ces derniers sont consignés dans un fichier racine ("/"sous Linux, "\" sous windows.). Par exemple, le chemin depuis la racine (ou chemin absolu) de "fibonacci.py" est "/home/frederic/programmes/fibonacci.py". Si on considère qu'on se trouve dans le répertoire /home/frederic, son chemin relatif est "programmes/finobacci.py", ou encore "./programmes/fibonacci.py".

Le langage HTML et CSS

Le langage HTML

Le langage HTML est un langage de structuration d'une page web, à l'aide d'un système de balisage. Il a été introduit sur le web par Tim Berners-Lee, en 1991. Nous verrons donc différents types de balises, dont les balises de type "block", de type "inline" et de type "liste".

Le contenu minimal

Les balises du langage html sont souvent situées au début et à la fin de chaque élement du document concerné, et débutent par un " <" et finissent par un " >.". la balise de fin est similaire à la balise de début sauf qu'un "/" doit être ajouter. exemple :
< p >....< p >, en utilisant la balise"< p >. Tout document html est composé de la balise< html >,d'un DOCTYPE, pour définir le type du document, d'une tête, contenant des métadonnées (< meta >), le titre de la page (< title >), et toute autre donnée non visible sur le document et d'un corps contenant les données visibles ,par l'utilisateur, directement sur la page.
On peut aussi laisser un commentaire sur un document html, qui ne sera pas pris en compte par l'ordinateur :
< "!-- Ici le contenu de la page, ceci est un commentaire --">(sans les guillemets)

Les balises de type "block"

Ce sont les principales balises des grandes structurations d'un document, donc des balises pour les paragraphes, ou les titres de paragraphes, par exemple.
On les consigne dans un tableau:

Nom de la balise Effet de la balise
< nav > Menu du document, avec les principaux liens de navigation
< footer > Pied de page, mentions légales
< section > Section de page pour regrouper des contenus de même thème
< header > En-tête de la page
< h1 > à < h6 > Titre du plus important au moins important
< p > paragraphe

Les balises de type "inline"

Ce sont des balises, insérées de la même facon que les balises type "block", sauf qu'elles ne s'intéressent pas aux grandes structurations d'une page html, mais plutot à la modification de certains caractères .
On a donc le tableau suivant :

Nom de la balise Effet de la balise
< span > Balise universelle
< em > caractère(s) particulier(s), mis en italique par défaut
< strong >/< b > caractère(s) important(s), mis en gras par défaut
< mark > caractère(s) mis en valeur, surligné en jaune par défaut
< sub > caractère(s) mis en indice
< sup > caractère(s) mis en exposant
< code > Insertion d'un code (langage de programmation)

Les balises de type "inline" peuvent également servir à joindre du contenu à une page html (images, liens hypertexte, raccourcis, etc...)
On peut les classer dans un tableau :

Nom de la balise Effet de la balise
< img src="*chemin relatif d'une image*" alt="*sinon, affiche ce message*" > Insertion d'une image par son chemin relatif
< img src="*URL d'une image*" alt="*sinon, affiche ce message*" > Insertion d'une image par son URL
< a href="https://www.youtube.com/" > nom du lien < /a >, exemple avec youtube Insertion d'un lien hypertexte
< a href="#nom du point d'ancrage" > Nom du lien < /a > Insertion d'un raccourci

Note : Pour nommer une ancre, on peut utiliser la commande "< balise id="nom du point d'ancrage" > , la balise < div > étant universelle.

Les balises de type liste

Ce sont, comme leur nom l'indique, des balises permettant de créer des listes sur une page html.
on a 2 types de listes :

Nom de la balise Effet de la balise
< ol > liste numérotée
< ul > liste non numérotée

Note : chaque élement d'une liste doit être précédé de la balise < li > et terminé par la balise < /li >

Le langage CSS

Le langage CSS permet de changer l'apparence d'une page html, par l'intermédiaire d'un simple fichier texte La syntaxe d'une feuille de CSS est assez simple, elle suit la règle suivante :


syntaxe css.

Un document html peut s'organiser en boites :

organisation css.

Avec le langage CSS, on peut aussi régler le positionnement de certains textes, toujours en respectant le schéma ci-dessus.
Voici un tableau des différents positionnements de CSS

Nom de la balise Effet de la balise
static positionnement dans le flux normal
fixed l'élement est sorti du fux et est positionné en fonction de la fenêtre de navigation
relative l'élement est dans le flux mais est décalé par rapport à sa position normale
absolute élément placé de facon absolue par rapport à un autre élement.

Le langage python

Le langage python est un langage de programmation de haaut niveau, permettant d'écrire des algorithmes, donc, une suite d'instructions à éxecuter. Des algorithmes ont beaucoup de points communs:
Ils ont ,d'abord tous des vairables à déclarer, et qui évoluent au cours du temps. Plusieurs boucles ou structures conditionnelles sont importantes à connaitre afin de réaliser des algorithme. De même, les variables peuvent être de plusieurs types: des entiers (int), des décimaux, ou flottants(float), des chaines de caractères(str) et des booléens pour les vrai/faux

On peut affecter des valeurs à des variables (a=2), demander à un utilisateur de rentrer a valeur de la variable(a = int/float/str(input("message"))), ou alors, demander à un utilisateur de rentrer une fonction(def *nom_de_fonction*(*variable)), la variable étant soit sous forme d'entier, de flottant, ou de chaine de caractère. Après avoir écrit la série d'instructions, on doit demander à l'ordinateur de l'afficher avec "print", ou return (pour les fonctions)

Les boucles ou structures conditionnelles

Comme dit précédement, plusieurs boucles ou structures conditionnelles sont à connaitre et doivent être indentées par 4 espaces. :

Nom de la boucle ou de la structure conditionnelle Effet
for variable in range(premiere valeur,derniere valeur,pas): à chaque tour de boucle, variable va de la premiere valeur à la derniere valeur exclue, avec un certain pas
while (not) condition: tant que condition (n') est (pas) vérifiée, ...
if condition :/elif condition :/ else : si condition :, .../autre si autre condition: ,.../sinon : ...

Les modules

En python, plusieurs fonctions ne sont pas utilisables directement, telles que les fonctions racines carrées, ou les fonctions sinus, par exemple. Afin de pouvoir les utiliser, nous avons recours à des modules. Ils s'agit, en vérité, de bibliothèques installées dans la mémoire de python, que nous devrons ouvrir. Pour ce faire, nous aurons recours à la commande "import", afin d'importer une bibliothèque, et donc de l'ouvrir-
Plusieurs procédés permettent d'utiliser les fonctions de la bibliothèque.
Soit, on utilise "import module", permettant d'ouvrir toute la bibliothèque du module en question, les fonctions seront utilisables avec la commande "module.fonction". Ou alors, on peut aussi choisir de n'avoir accès qu'à une seule fonction, et non toute la bibliothèque. On utilisera "from module import fonction", dans ce cas, on appelera directement la fonction, sans passer par son module.

Remarque : Un autre procédé permet d'ouvrir un module en entier, sans pour autant avoir à identifier la fonction utilisée par son module. On utilisera "from module import *".

On peut dresser un tableau non exhaustif de plusieurs modules:


Nom du module Exemple d'utilisation
math (importe des éléments mathématiques) fonction sinus(sin),cosinus(cos),ou racine carré(sqrt)
random (importe des éléments aléatoires) entier aléatoire(randint)

Note : Il en existe bien d'autres. pour voir une liste plus complete de ces modules, taper help() dans la console de python, puis modules

Les chaines de caractères et les listes

Comme son nom l'indique, une chaine de caractère est un ensemble de caractères, comme un mot, par exemple. Pour déclarer une variable de type chaine de caractères, il faut la mettre entre guillemets.
On peut lire cette variable entierement, seulement en demandant de l'afficher, ou alors partiellement. Dans ce cas, on précisera le rang du caractère à exploiter, sachant que les rangs vont de zéro au nombre total de caractères moins un. On peut aussi connaitre le nombre de caractères d'une chaine avec la commande len(chaine), ou alors faire une boucle affectant à chaque tour de boucle un nouveau caractère à une variable. Dans ce cas, on utilisera for variable in chaine. Enfin, on peut demander de lire seulement certains caractères à intervalle régulier avec chaine[premier caractère:dernier caractère:pas]. Les listes ont le même fonctionnement, sauf que les éléments sont séparés par des virgules. l'ajout de caractère dans une chaine, ou d'élément dans une liste se fait par simple addition. L'ordre des termes est important.
En effet : premier élément + deuxième élément place le deuxieme élément en dernier et deuxieme élément + premier élément place le deuxieme élément avant le premier.
On peut aussi multiplier le nombre de chaines avec *.

Le code ASCII

Le code ASCII (American Standard Code for Information Interchange) est une norme de codage de caractères sur 7 chiffres, sur un langage binaire, donc un langage de base 2 , composé de 0 et de 1. On peut donc dire qu'il existe 2⁷possibilités, soit 128 possibilités. Cependant, les 128 caractères ne codent pas tous un caractère visible par l'utilisateur. En effet, Les premiers codes occupent d'autres fonctions(0000000 pour le caractère nul,0011011 pour l'échap, par exemple). Il existe en vérité, 94 caractères visibles par l'utilisateur sur les 128. Ces éléments sont classés dans un tableau :

tableau code ascii .

Note : pour obtenir le numero de code ascii en python, il faut utiliser la commande ord('') et pour obtenir le caractère à partir du numéro de code,il faut utiliser la commande chr(code).

retourner au sommaire?