Le terme free software est mal compris : il n’a rien à voir avec le prix, il parle de liberté.
Voici donc la définition d’un logiciel libre : Un programme est un logiciel libre pour vous, utilisateur particulier, si

• vous avez la liberté de l’exécuter comme vous le souhaitez, pour quelque motif que ce soit ;
  
• vous avez la liberté de modifier le programme afin qu’il corresponde mieux à vos besoins (dans la pratique, pour que cette liberté prenne effet, il vous faut pouvoir accéder au code source, puisqu’opérer des modifications au sein d’un programme dont on n’a pas le code source est un exercice extrêmement difficile) ;
  
• vous disposez de la liberté d’en redistribuer des copies, que ce soit de manière gratuite ou onéreuse ;
  
• vous avez la liberté de distribuer des versions modifiées du programme, afin que la communauté puisse bénéficier de vos améliorations.
  

• L’accès au code source
  
• Collaboration et partage
  

Richard Stallman sur l’open source et les logiciels libres
Open source ? Logiciel libre ? Logiciel gratuit ? Y aurait-il une différence ?
Oui il y en a une. Bien souvent le terme open source est utilisé par commodité comme terme général pour signifier que l’on a accès au code source d’un logiciel.
Chaque fois qu’il en a l’occasion, Stallman rappelle :

« Le logiciel libre est un logiciel qui respecte la liberté et la communauté des utilisateurs. Ce n’est pas une question de prix. C’est libre, pas gratis. Avec tout programme, il y a deux possibilités: soit les utilisateurs contrôlent le programme, soit le programme contrôle les utilisateurs. Lorsque les utilisateurs contrôlent le programme, il s’agit d’un logiciel libre - ils contrôlent ce qu’ils en font, ce qui respecte leur liberté et leur communauté. »

Pour Stallman, l’open source est né dans le but d’étouffer le mouvement du logiciel libre :

« L’open source est un substitut amoral et dépolitisé du mouvement des logiciels libres. ... ce serait un désastre pour nous. Cela signifiait déconnecter le logiciel libre de l’idée que les utilisateurs méritaient la liberté. »

Stallman résume la différence entre l’open source et le logiciel libre en une phrase : L’open source, ce n’est pas le nom d’une philosophie, cela fait référence au logiciel, mais pas aux utilisateurs.

• Richard Stallman (1983) : Gnu
  
• Tim Berners-Lee (1990) : WWW
  
• Linus Torvald (1991) : Linux
  

• libreoffice (= openoffice) et microsoft office : le problème de l’échange des documents
  
• linux et windows : le problème du choix de la présentation du bureau
  
• téléchargement de logiciels : sources parfois douteuses pour windows, logithèque centralisée sous linux
  

• Créer un dossier sur votre ordinateur qui contiendra tous les fichiers qui seront créés au cours des séances de l’atelier
  
• Vous assurer que vous savez y accéder à partir des outils utilsés (éditeur, navigateur web, ...)
  

Vous aurez très souvent besoin de consulter la documentation des logiciels. Je vous indiquerai les liens vers les sites les plus pertinents au fur et à mesure. Je vous montrerai aussi quelques exemples d’utilisation de l’IA comme aide à l’utilisation des outils informatiques de programmation.

Remarque initiale : tout ce qu’on utilise dans vsCodium se présente sous forme d’onglets. Fermer au départ tous les onglets.
On va dès maintenant modifier le comportement et l’aspect de l’éditeur en paramétrant certaines fonctions et en ajoutant des extensions. Pour cela on va utiliser la barre d’outils verticale à gauche de l’écran et dans cette barre l’icone composée de 4 carrés dont 1 détaché

• taper french dans la barre de recherche et choisie French Language Pack, cliquer sur install puis à nouveau sur install dans l’onglet qui s’ouvre. En bas, cliquer sur Change Language and Restart.
  
• installer l’extension Python, l’extension Python Debugger et l’extension Code Runner ;
  paramétrage de cette extension (petite roue dentée à côté du titre de l’extension) :
  ● pour éviter que les sorties précédentes restent affichées : cocher Clear Previous Output
  ● pour éviter d’avoir à sauvegarder avant chaque exécution : cocher Save File Before Run (Attention, pas « Save All Files Before Run »)
  ● pour éviter que la ligne de commande ne soit intégrée à la sortie : décocher Show Execution Message
  ● cocher Run in Terminal envoie le sortie dans un terminal de type bash, ce qui est nécessaire pour que la fonction input fonctionne dans vsCodium
  
• l’icône roue dentée en bas de la barre des outils permet d’accéder aux paramètres globaux de vsCodium. En cliquant sue Paramètres vous obtenez une longue liste de paramètres modifiables (par exemple Auto Save, Font Size). Mettre word dans la boite de recherche en haut pour mettre le paramètre Word Wrap à on.
  

De manière informelle on peut dire que :
● un algorithme est un ensemble structuré d’instructions qui traitent des données (entrées) et produisent des résultats (sorties), qui sont aussi des données.
● un ordinateur ne peut exécuter un algorithme que s’il est traduit dans un langage de programmation.
Python, de par sa syntaxe très claire et concise, permet de traduire presque automatiquement un algorithme en programme.
Les données utilisées par Python sont, par exemple :

• des données fondamentales : nombres (int et float), chaines de caractères (string)
  
• des données structurées : listes, tuples, dictionnaires
  

Remarque initiale : tout ce qu’on utilise dans vsCodium se présente sous forme d’onglets. Fermer au départ tous les onglets.
On va dès maintenant modifier le comportement et l’aspect de l’éditeur en paramétrant certaines fonctions et en ajoutant des extensions. Pour cela on va utiliser la barre d’outils verticale à gauche de l’écran et dans cette barre l’icone composée de 4 carrés dont 1 détaché

• taper french dans la barre de recherche et choisie French Language Pack, cliquer sur install puis à nouveau sur install dans l’onglet qui s’ouvre. En bas, cliquer sur Change Language and Restart.
  
• installez l’extension HTML CSS Support (cette extension facilite l’écriture des pages web)
  
• en tapant open in browser dans la boîte de recherche, installez l’extension Open in browser (cette extension permet d’ouvrir les pages web créées à partir de vsCodium)
  ● remarque : quand une extension est installée, elle apparait dans le menu des extensions avec une roue dentée à droite qui permet de la paramétrer. Cliquer sur cette roue dentée pour l’extension open in browser et mettre à jour le navigateur web que vous utilisez.
  ● Nous installerons plus tard d’autres extensions, au fur et à mesure de nos besoins.
  
• l’icône roue dentée en bas de la barre des outils permet d’accéder aux paramètres globaux de vsCodium. En cliquant sue Paramètres vous obtenez une longue liste de paramètres modifiables (par exemple Auto Save, Font Size). Mettre word dans la boite de recherche en haut pour mettre le paramètre Word Wrap à on.
  

#+NAME fichier exemple.html

<!--
Dans une page html, on met entre le balises ci-dessus et ci-dessous, les blocs de texte qui sont des commentaires ; ils ne seront pas affichés par le navigateur.  
-->

<!-- ci-dessous, entre <head> et </head>, le bloc d'en-tête de la page : il contient des informations destinées au navigateur Web ; ces informations ne seront pas affichées dans la page-->
<head>
    <!-- la ligne qui suit indique le nom de la feuille de style associée à cette page --> 
    <link href="exemple.css" rel="stylesheet" type="text/css">
</head>h


<!-- ci-dessous, entre <body> et </body>, le corps de la page : il contient le tette, structuré par les balises, qui sera affiché par le navigateur -->
<body>
<h1>mon titre</h1> <!-- bloc de titre -->
<p> <!--- début de paragraphe -->
    Lorem ipsum dolor sit.<br> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit sequi fugit magnam.
</p> <!-- fin du paragraphe -->
<p>
    hjjfjjfjf<br>
    fffdfd<br>
    dggddg
</p>
</body>

<!-- REMARQUES 
    - quand on écrit un texte, le navigateur ne tient pas compte des passages à la ligne ; il faut les indiquer explicitement avec la balise <br>
    - il existe 6 niveaux de titres <h1> à <h6>
    - en dehors des paragraphes, il existe d'autres balises permettant de structurer le texte ; nous les étudierons au fur et à mesure de nos besoins.  
-->

/* Dans une feulle de style, les blocs de textes, éventuellement sur plusieurs lignes
commençant par slash étoile et se terminant par étoile slash (comme ici)
sont des commentaires ; ils n'interviennent pas dans le style 
*/

h1 { /* les règles de style ci-dessous s'appliqueront à toutes les balises <h1> (titre de niveau 1) dans la page html */
    color: blue ;               /* les titres h1 seront en bleu */
    border: 5px red solid ;     /* et seront entourés d'une bordure solide rouge de 5 pixels */
}

p { /* les règles de style ci-dessous s'appliqueront aux balises <p> (paragraphes) */
    color: green ;              /* les paragraphes seront en vert */
    border: 1px black dotted ;  /* et auront une bordure en pointillés noirs de 1 pixel */
}

/* REMARQUES :
Ces styles s'appliquent à toute page .html qui contient dans son en-tête (c'est à dire la bloc <head>, avant le bloc <body>) une référence à cette page.

body, titres, paragraphes (de texte), images
article, section, div
header, nav, aside, main, footer

head, link
style des éléments : color, background-color, font-size, line-height, text-align, border, margin, padding
style de la structure: flex (direction, wrap, gap)

Programmer c’est créer un algorithme et le traduire en un programme écrit dans un langage de programmation, par exemple python (mais aussi : C, lisp, fortran, pascal, java, ...

Un algorithme est la description structurée, en « pseudo-langage » humain, d’une suite d’actions que l’on veut faire exécuter à un ordinateur. Ces actions portent sur des données et produisent des données.
Cela présuppose que l’on sait à priori ce que l’ordinateur est capable de faire.
Dans un premier temps on va supposer qu’il est capable :
● d’utiliser des nombres, des chaines de caractères (phrases) et des listes (de nombres, de chaines et de listes)
● d’affecter un nom (variable) aux données qu’il manipule
● de demander à l’utilisateur de lui fournir des données
● d’afficher une donnée
● de transformer des données par certaines fonctions (commandes ou opérations)
● de répéter une opération
● d’exécuter une opération seulement quand une condition est vérifiée (ce qui nécessite un type de données particulier : les booléens)

Un programme utilise uniquement les mots et la grammaire du langage (formel) de programmation dans lequel il est écrit.
Les mots et la grammaire du langage de programmation, strictement définis, reflètent les actions que l’ordinateur est capable de réaliser.
Remarquons cependant que l’ordinateur a besoin que le programme soit traduit en langage binaire ; cela se fait de deux manières différentes :
● par compilation (pour les langages comme l’assembleur ou le C) : le compilateur transforme l’ensemble du programme en binaire puis le processeur exécute le code obtenu
● par interprétation (pour les langages comme python) : l’interpréteur exécute le programme en le transformant au fur et à mesure en binaire.

• python3 est pré-installé
  
• taper dans un terminal :
  

sudo apt install python-is-python3

télécharger : https://www.python.org/downloads/release/python-3121/
puis installer le fichier téléchargé (soit en choisissant cette option à la fin du téléchargement, soit en double-cliquant sur le fichier téléchargé)
attention : au moment de l’installation cocher les 2 cases en bas de la fenêtre, en particulier la case : ajouter python au chemin (add python to path)

dans un terminal : sudo apt install idle
une icone est créée dans la liste de vos applications (icone 9 point en bas du dock à gauche)

installé en même temps que Python ; un dossier est créé dans la liste des applications : ce dossier contient à la fois l’éditeur et le langage

Idle est composé de (au moins) deux fenêtres : l’une pour l’écriture des programmes (edit), l’autre pour l’exécution (shell ou console).
Options - configure IDLE :
Fonts : en bas de la fenêtre on peut modifier la taille des caractères
Windows : cocher At Startup open edit window
Shell/Ed : cocher *At start of run (F5) No Prompt

(On n’utilisera pas cette méthode, très vite trop restrictive)
Sous Windows, on peut ouvrir une console python en tapant py dans la ligne de commande :
clic droit sur l’icone Windows, Exécuter, taper cmd et valider, puis taper py ;
pour sortir de la console python, taper exit(),
puis taper exit pour sortir de la ligne de commande.
Sous Linux, taper python ou python3 dans un terminal (qu’on ouvre avec Ctrl-Alt-t)

Si vous avez paramétré Idle comme indiqué ci-dessus, quand vous cliquez sur l’icône de lancement de Idle vous ouvrez une page (la page d’édition) dans laquelle vous allez pouvoir taper les programmes.
Quand vous aurez écrit un programme, taper sur la touche F5 pour l’exécuter : cela va ouvrir une deuxième fenêtre (le shell, ou console, ou fenêtre d’exécution) dans laquelle le programme s’exécute.

rep = input("calculer 5 plus 7")
print(rep)

Améliorations successives :
● mettre un commentaire au début pour expliquer ce qu’on fait
● remplacer 5 et 7 par des variables ; le signe + en python ; conversions int et str
● tester la réponse ; attention : input renvoie une chaine
● choix de valeurs au hasard : random.randint
● répéter plusieurs fois l’exercice
● définir une fonction tablad() puis tablad(x, y) ; reformuler la répétition avec la fonction
● utilisation d’un compteur pour calculer le pourcentage d’erreur ; fonction renvoyant un nombre (return)
● ...

import random
def tablad(a, b):   
    # table d'addition
    p = a + b
    rep = input("calculer " + str(a) + " + " + str(b) + " : ")
    if int(rep) == p:
        print("exact")
        return True
    else:
        print("faux : " + str(a) + " + " + str(b) + " = " + str(p))
        return False

def tables(n):
    # répétition de n fois tablad
    compteur = 0
    for i in range(0, n):
        a = random.randint(1, 9)
        b = random.randint(1, 9)
        ok = tablad(a, b)
        if ok == True:
            compteur = compteur + 1
    
    print(str(compteur) + " réponses correctes sur " + str(n))
    pourc = 100 * compteur / n
    print("soit " + str(pourc) + "% de réussite")
    
tables(5)

● notions sur les listes
● puis utilisation d’une liste pour mémoriser les réponses fausses et reposer les mêmes questions

import random   

def tablad(a, b):
    # table d'addition
    p = a + b
    rep = input("calculer " + str(a) + " + " + str(b) + " : ")
    if int(rep) == p:
        print("exact")
        return True
    else:
        print("faux : " + str(a) + " + " + str(b) + " = " + str(p))
        return [a, b]

def tables():
    # répétition de n fois tablad
    lst = []
    for i in range(0, 5):
        lst.append([random.randint(1, 9), random.randint(1, 9)])
    # ou bien : lst = [[random.randint(1, 9), random.randint(1, 9)] for i in range(0, 5)]
    print(lst)
    while lst != []:
        a = lst[0][0]
        b = lst[0][1]
        ok = tablad(a, b)
        if ok == True:
            lst = lst[1:]
        else:
            lst = lst[1:] + [[a ,b]]
tables()

si vous tapez dans l’éditeur idle

print("bonjour")

et que vous valider (c’est à dire appuyez sur ENTRÉE)
le texte bonjour (sans les guillemets) s’affiche dans la fenêtre d’exécution, puis passe à la ligne ; l’indicateur >>> apparaît dans la marge, signifiant que l’exécution s’est terminée et que l’interpréteur python attend la prochaine instruction.
Il faut alors retourner dans le fenêtre d’édition pour écrire d’autres instructions.
print est une instruction d’affichage ; « bonjour » est une donnée de type chaîne de caractères

x = 10
print(x)

définit une variable x et lui affecte la valeur 10
print(x) va afficher 10 dans la fenêtre d’exécution
remarque : vous allez aussi avoir le résultat de l’instruction précédente (bonjour) ; en effet, en appuyant sur F5 on exécute tout le contenu de l’éditeur.
pour éviter ceci il faut mettre un # au début de la ligne print(« bonjour ») pour indiquer que vous ne voulez pas qu’elle soit exécutée ; on dit que la ligne est commentée :

# x = 10

= est une instruction d’affectation, 10 est une donnée de type int (nombre entier) ; on peut utiliser aussi des nombres à virgule comme 3.14, appelés données de type float.
exercices :
remplacez x par x + 13 dans la ligne print(x) et ré-exécutez ; examinez ce qui se passe
recommencez en remplaçant
x par 2 * x + 5
x par x // 6
x par x % 6
x par x * 2

remarque : si vous voulez empêcher dans la suite d’exécuter ce qui précède, vous pouvez mettre # devant chaque ligne ; autre manière (commentaire multi-lignes) consiste à mettre 3 guillemets avant et 3 guillemets après chaque ensemble de lignes qu’on veut invalider.
exemple :

"""
print("bonjour")
x = 10
print(x)
"""

Instruction de saisie

rep = input("comment vous appelez-vous ? ")
print(rep)

Ceci ouvre une ligne de saisie commençant par comment vous appelez-vous ? et attend que vous tapiez quelque chose - dans la fenêtre d’exécution (et que vous validiez)
Ce que vous avez tapé est affecté à la variable rep puis affiché.
Pour quelque chose d’un peu plus sophistiqué :

rep = input("comment vous appelez-vous ? ")
print("vous vous appelez "  + rep)

va concaténer la chaîne « vous vous appelez  » avec votre réponse.
input est une instruction de saisie
On remarque que + est è la fois un opérateur d’addition (pour les nombres) et un opérateur de concaténation (pour les chaînes de caractères)
Exercice : écrire un programme python qui demande votre prénom, puis (séparément) votre nom et affiche les deux séparés par un espace

Exercice 1
Introduire un paramètre pour la fonction jeu permettant de choisir le maximum pour le nombre choisi par le programme.
Exercice 2
Écrire un programme proposant de jouer plusieurs fois pour améliorer son score

Les données utilisées jusqu’ici sont de type « numérique » (int ou float), « chaîne de caractères » (str) et booléen (True, False). Ce sont des types simples.
La liste est un type de données composées : elle peut (récursivement) contenir des objets de tous types.
(Nous verrons plus tard qu’il existe d’autres types de données composées : tuples, dictionnaires, ensembles, classes).

Une liste s’écrit ente [ et ], ses éléments étant séparés par une virgule. L’ordre des éléments est significatif et il peut y avoir des éléments identiques (ce qui distingue une suite d’un ensemble au sens mathématique).
Par analogie avec les mathématiques, on verra qu’on peut définir une liste de deux manières différentes :

• en extension : en énumérant ses éléments
  
• en compréhension : en la définissant par des propriétés vérifiées par ses éléments.
  

# création de listes "en extension"
liste1 = [1, 2.1, 3 / 5, 7 - 2]
liste2 = ["maison", "poisson", "c'est une phrase"]
liste3 = [1, "cheval"]
liste4 = ["a", 11, [1, ["x", "y"]], liste2]

# création de liste "en compréhension"
liste5 = [x for x in range(1, 10) if x % 2 == 1] # liste des nombres impairs entre 1 et 9
liste6 = [d for d in range(1, 100) if 100 % d == 0] # liste des diviseurs de 100

# remarque : on peut ré-écrire la procédure AfficheDiviseurs sous la forme
def AfficheListeDiviseurs(n):
    print([d for d in range(1, n) if n % d == 0])

liste7 = [d for d in liste6 if d % 2 == 1] # liste des diviseurs impairs de 100
liste8 = [n * 10 for n in liste7] # on multiplie chaque élément de liste7 par 10

liste9 = [(a, b) for a in range(0, 20) for b in range(0, 1)]
liste10 = [s for s in ["asfdrt", "dfts", "dfgrt", "er", "hjyfd"] if len(s) <= 4] # len donne la longueur (nombre de caractères) d'une chaîne de caractères

voyelles = ["a", "e", "i", "o", "u", "y"]
doublesVoyelles = [u + v for u in voyelles for v in voyelles]
listeDeuxVoyelles = [[u, v] for u in voyelles for v in voyelles if u < v]

1. liste des 10 premiers multiples de 12
   
2. écrire un programme qui demande deux nombres entiers n et k et affiche la liste des k premiers multiples de n
   
3. écrire un programme qui construit une liste de 10 nombres entiers choisis au hasard entre 1 et 100, affiche cette liste et le plus grand élément de la liste
   
4. écrire un programme qui, étant donnée une liste, affiche cette liste écrite en ordre inverse (par exemple affiche [« a », « r », « e »] si on lui a donné [« e », « r », « a »]
   
5. écrire un programme qui, étant donnée une liste de nombres entiers, affiche la liste de ces nombres classés dans l’ordre croissant
   

Attention : dans les programmes 4 et 5, si on demande la liste à l’utilisateur en utilisant input, on se heurte à une difficulté : input renvoie une chaîne de caractères. Et il n’existe pas de fonction permettant de convertir une liste en chaîne de caractères. Donc, pour les exercices 4 et 5, il vaut mieux fournir la liste au programme dans une variable.
Sinon, une première solution consiste à demander les éléments 1 par 1, éventuellement les convertir en nombres (exercice 5) et construire la liste au fur et à mesure.
Exemple :

n = input("combien d'éléments dans la liste ? :")
liste = []
for i in range(0, int(n)):
    a = input("donnez un nombre :")
    liste = liste + [int(a)]
print(liste)

Une deuxième solution serait de :

• demander à l’utilisateur de fournir les éléments de la liste séparés par une virgule : par exemple 12,14,11,3
  
• d’utiliser split(« , ») pour en faire une liste
  
• de convertir tous les éléments en liste en nombre entiers
  

(ceci ne fonctionne pas avec des listes de chaînes si certaines chaînes contiennent plusieurs mots)
Exemple :

réponse = input("écrire les éléments de la liste de nombres entiers séparés par des espaces : ")  # par exemple rep = "12,14,11,3" qui est une chaine de caractères
liste = réponse.split(",")  # liste = ["12", "14", "11", "3"] est une liste de chaînes de caractères
liste1 = []
for x in liste:
    liste1 = liste1 + [int(x)] # chaque élément de la liste est converti en nombre entier : par exemple "12" est remplacé par 12
print(liste1) # liste1 = [12, 14, 11, 3] 

Jusqu’ici à l’aide du mot-clé def nous avons défini des procédures : ce sont programmes qui exécutent des actions en utilisant des données que nous leur fournissons,

• soit par l’intermédiaire de paramètres,
  
• soit en utilisant des variables (locales) à l’intérieur de ces procédures.
  

def permet de définir aussi des fonctions : ce sont des programmes qui exécutent des actions mais qui, de plus, renvoient un résultat, à l’aide du mot-clé return

(J’utilise personnellement une convention : si une procédure est une fonction, son nom commence par une minuscule.)

def impairs(lst):
    """ Renvoie la liste des nombres impairs appartenant à la liste lst """
    return [x for x in lst if x % 2 == 1]

def sommePlusGrands(a, lst):
    """ renvoie la somme des nombres plus grands que a dans la liste lst """
    s = 0
    for x in lst:
        if x > a:
            s = s + x
    return s

def sommeImpairsPlusGrands(a, lst):
    """ renvoie la somme des éléments de la liste lst qui sont impairs et plus grands que a """
    return sommePlusGrands(a, impairs(lst))

liste1 = [1, 100, 35, 30, 15]
print(liste1)
print(impairs(liste1))
print(sommePlusGrands(10, liste1))
print(sommeImpairsPlusGrands(10, liste1))

def factorielle(n):
    if n == 0:
        return 1
    else:
        return n * factorielle(n - 1)

print(factorielle(5))

120

http://localhost:8888/lab/tree/inc/sagemath-jupyterlab/probas.ipynb

correction de l’exercice

On va utiliser le module turtle (tortue) qui est installé avec python.
Ce module implémente la « tortue Logo » inventée vers 1980 par Seymour Papert sous l’influence du courant cognitiviste en intelligence artificielle (Marvin Minsky) et du psychologue Jean Piaget. La tortue est alors un objet graphique piloté par un programme écrit en Logo, langage dérivé du langage Lisp. Depuis, des versions de cette tortue ont vu le jour dans de nombreux langages de programmation. En python, le module turtle permet d’utiliser cette fonctionnalité.
La documentation en français est ici : https://docs.python.org/fr/3.9/library/turtle.html
Après avoir importé ce module dans la session, on dispose de fonctions qui permettent de créer un objet turtle qui peut se déplacer en dessinant (ou non), exécutant les fonctions python fournies par le module.

Pour utiliser matplotlib il faut l’installer

• sous Windows :
  

clic-droit sur l’icône Windows, Terminal (administration), valider en cliquant sur OUI, puis taper :
py -m ensurepip --default-pip
puis : py -m pip install -U matplotlib
puis : py -m pip install numpy

• sous Linux :
  

dans le terminal taper :
sudo apt install python3-pip
puis : python -m pip install -U matplotlib
puis : *python -m pip install numpy
introduction à matplotlib
exemple 1 : méthode de Monte-Carlo
exemple 2 : parties aliquotes d’un entier
matplotlib: compléments

La documentation sur le site de mozilla/firefox : https://developer.mozilla.org/fr/ (menus « références » et « guide », items « html », « css », « javascript ») ; une icone en haut à droite de chaque page permet d’avoir la documentation en français.
Principe de base : séparation

• de la structure (html),
  
• de la présentation (css),
  
• de l’interactivité dynamique avec l’utilisateur (javascript)
  
• de l’accès aux ressources du disque dur, du web d’une base de données (php)
  

Le code html de la page a plusieurs fonctions

• il structure « logiquement » l’ensemble des informations à afficher en sections, paragraphes, tableaux, listes, ...
  
• il indique au navigateur certaines méta-informations nécessaires pour l’affichage (langue utilisée, liens vers les feuilles de style, liens vers les scripts, ...)
  

En particulier, il ne s’occupe pas directement de la présentation visuelle (couleurs, positionnement, ...) qu’il va déléguer aux feuilles de styles (css), ni de l’interaction avec l’utilisateur, qu’il va déléguer aux feuilles de scripts (javascript).
Le composant fondamental du langage html est l’élément html qui se présente (avec des variations) sous la forme : <balise attributs>contenu</balise>
Remarque : quand la page est affichée par le navigateur, seul le contenu est affiché.

<h1>exemple de titre</h1>

élément indiquant un titre de niveau 1 (balise <h1>) ; le texte qui s’affiche comme titre sera exemple de titre ; </h1> est la balise de fermeture

<p>
  voici une première ligne, 
  <br>et voici la ligne suivante
</p>

<p> est une balise de paragraphe, fermée par </p>
<br> est une balise indiquant un saut de ligne (elle n’a pas de balise fermante)
Le texte entre <p> et </p> s’affichera sur deux lignes

<img src="mon image.jpg">

<img> est une balise d’image ; elle n’a pas de balise fermante ; elle a un attribut src dont la valeur est le nom du fichier image à afficher
Remarque : contrairement au principe qui préconise de distinguer la structure (html) et le style (css), il est possible (mais non recommandé) d’associer un attribut style aux balises

<p style="color:blue">
  ...
</p>
Le texte du paragraphe (ici indiqué par ...) sera écrit en bleu.
Nous verrons ensuite comme réaliser ceci à l'aide d'une feuille de style.

Dans la page index.html qui présente un site de bibliothèque on a choisi une organisation du type décrit ci-dessous.
Chaque article va contenir :

• le titre d’un livre
  
• une image de ce livre
  
• un ou plusieurs paragraphes qui résument ce livre
  

En outre la page est divisée en deux sections :

• la première section présente les nouveautés
  
• la deuxième section contient tous les livres
  

En réalité, tous les livres vont être contenus dans une base de données et le serveur va construire la page dynamiquement en allant chercher les informations dans la base.

Exemple 1 : site web affichant vos photos ; l’affichage sur une page donnée pouvant être filtré selon certains critères : année, lieu (gps ?), circonstances, contenu, ...
Ces critères peuvent être asoociés à des « tags », ajoutés « à la main » pour chaque photo ou groupe de photos, ou récupérés à partir des métadonnées exif des photos si votre appareil est réglé pour les fournir.
Exemple 2 : site web permettant de gérér une bibliothèque avec un système de prêts aux usagers
Remarques :

• il est évident qu’il existe des utilitaires (applications ou sites) permettant de faire ça ; l’objectif dans cet atelier n’est pas de construire une nouvelle application qui rivalise avec ces utilitaires (encore qu’on puisse s’approcher de certaines fonctionnalités ou en imiter un sous-ensemble contenant celles qui nous sont utiles), mais de comprendre comment cela fonctionne.
  
• la difficulté va être d’interfacer les pages web du site avec la base de données : pour cela on aura besoin (en plus de ce qui a été fait l’an dernier) d’un serveur et du langage php
  

SERVEUR http -> PHP -> pages web
SERVEUR sqlite -> SQL -> données injectées dans les pages web

Les bases de données (database) et les systèmes de gestion de bases de données (SGBD) apparaissent dans les années 60 (Charles Bachman, prix Turing 1973) peu après l’invention des moyens de stockages efficaces et de grande capacité (1956 - disques durs).
On prend conscience de la nécessité de séparer les données de leur traitement.
En 1970 le modèle mathématique des bases de données relationnelles est mis au point (Edgar F. Codd, prix Turing 1981), ce qui fournit aussi les éléments nécessaires pour un langage d’interrogation (SQL) développé entre 1970 et 1980 par IBM et Oracle.
Actuellement, IBM DB2, Oracle Database, MySQL, PostgreSQL et Microsoft SQL Server sont les principaux systèmes de gestion de base de données sur le marché.
Les applications des bases de données sont innombrables et omniprésentes : gestion des informations médicales, billetteries, vente en ligne, bibliothèques, antivirus, comptabilité, moteurs de recherche, intelligence artificielle...
Le développement du Web à partir des années 80 va voir se répandre l’utilisation de bases de données à l’intérieur des pages html par l’intégration du SQL par des préprocesseurs comme PHP ou Python.

Voyons sur un exemple ce qui différencie conceptuellement une base de données d’un classeur Calc (de LibreOffice) ou Excel (de Microsoft Office)
Considérons une bibiothèque qui possède :

• une liste de livres à prêter avec, pour chaque livre :
  
  • titre
    
  • auteur(s)
    
  • année d’édition
    
  • catégorie (roman, essai, ...)
    
• une liste d’usagers avec, pour chaque usager :
  
  • nom
    
  • prénom
    
  • date de naissance
    
  • adresse mail
    

et qui voudrait gêrer informatiquement les prêts (date d’emprunt, date de retour)
Solution « tableur »
gestion-bibliothèque-tableur
Un tableau, avec comme colonnes toutes les « rubriques » indiquées ci-dessus (titre du livre, auteur du livre, ..., nom usager, ... , une colonne indiquant la date du prêt, une pour la date de retour.
Inconvénient : il faut répéter les informations pour chaque livre prêté.
Problème : comment faire pour les emprunts multiples d’une même personne à une date donnée et pour les emprunts d’une même personne à plusieurs dates ?
Solution « base de données »

• une table avec les livres et un champ « identifiant » pour chaque livre
  
• une table avec les usagers et un champ « identifiant » pour chaque usager
  
• une « table des prêts », donc chaque enregistrement est un lien entre l’identifiant d’un usager et l’identifiant d’un livre avec en plus un champ pour la date d’emprunt et un pour la date de reto
  

Une base de données est un ensemble de tables reliées par des colonnes (champs) communes.
Chaque table est un ensemble de lignes (enregistrements) et de colonnes (champs).
À l’intersection d’une ligne est d’une colonne se trouve la valeur de l’enregistrement pour le champ correspondant.

Un gestionnaire de bases de données (par exemple sqlite) est une applications qui permet de gérer la base de données, c’est à dire :

• créer, modifier, supprimer, sauvegarder des bases de données
  
• créer et supprimer des tables, modifier leur structure (liste et caractéristiques des champs)
  
• ajouter, modifier, supprimer des enregistrements dans une table
  
• interroger la base de données pour en extraire des informations
  

Toutes les actions du gestionnaire peuvent s’exécuter à l’aide de requêtes SQL.
Il existe aussi des interfaces graphiques : sqlitebrowser (/DB Browser for Sqlite), Base de LibreOffice, Access de Microsoft... pour effectuer ces actions.
On va utiliser sqlitebrowser

On se représente souvent un serveur comme un ordinateur distant qui envoie des informations. On confond ainsi la logiciel serveur et le poste qui l’exécute.
Un serveur est en fait une application (un programme) qui exécute (en général sans interruption) un service permettant d’échanger des informations entre lui et un client. A chaque application serveur sur un ordinateur distant correspond donc une application client sur les postes locaux.
Il y a différents types de services, proposés par des serveurs spécialisés : mail, envoi et partage de fichiers ou partage de périphériques, distribution des adresses dans un réseau, bases de données, pages web ; chacun correspond en général à un ou plusieurs protocoles de communication particuliers :

• pop, imap et sftp pour les mails,
  
• ftp, ssh, nfs pour les fichiers,
  
• dhcp pour les adresses dans un réseau,
  
• http pour les pages web,
  ...
  

Celui qui nous intéresse dans le cadre de la création de sites est le serveur http qui envoie des pages web.
Différents applications proposent des serveurs http : Microsoft Web Server (IIS), Google Web Server, Lighthttpd, Nginx, ...
Les logiciels clients http les plus courants sont les navigateurs internet (Firefox, Internet Explorer, Edge, Chrome, ...)
Nous utiliserons le logicel serveur http Apache qui est libre, gratuit, multi-plateforme.

Quelle différence entre créer une page web (localement, ou à distance sur un serveur) et utiliser un serveur pour générer une page web ?
Localement (sur le poste client), pour des raisons de sécurité, la page web n’a pas le droit d’accéder directement aux fichiers de l’ordinateur local. Elle ne peut pas, par exemple, lire le contenu des dossiers.
Par contre, sur le poste distant, le serveur a accès (à travers un langage comme php par exemple) à toutes les ressources du système dans un environnement contrôlé par le serveur (et paramétré par l’administrateur du serveur). En particulier, un dossier du poste (document_root) contenant les pages du site sera géré par le serveur.
Le langage php, sur le serveur, va permettre de traiter la requête du client et d’y répondre en générant dynamiquement une page html en fonction des informations envoyés par le client et des données stockées sur le serveur.
Remarquons que, pour les tests par exemple, on peut installer un logiciel serveur et un logiciel client sur le même poste local.

On va installer xampp qui contient Apache (serveur web), MariaDB (base de données), Php (langage de programmation) et d’autres applications.

Quand l’installation est terminée, il reste à lancer le serveur et à le paramétrer ; tout ceci se fait à l’aide d’un panneau de contrôle.

Le dossier (et ses sous-dossiers) que vous avez désigné comme étant DocumentRoot va contenir les pages de votre site web.
En local, en ouvrant votre navigateur sur l’adresse localhost le serveur va chercher un fichier index.php (ou index.html) et va l’afficher.
Vous pouvez aussi afficher un fichier html ou php qui s’appelle par exemple ex.php en utilisant localhost/ex.php ou le chemin de ce fichier (après localhost) s’il est dans un sous-dossier.
Les fichiers php peuvent contenir du html mais, la plupart du temps ce html est mêlé à des bloc écrits en langage javascript.
Le code php permet, entre autres,

• d’écrire « dynamiquement » du texte ou du html
  
• d’accéder aux ressources du serveur : en général aux dossiers de DocumentRoot
  
• d’accéder à des bases de données
  
• ...
  

Un bloc php est contenu entre les balises <?php et *?>
Si vous insérez dans une page vide ou dans une page exemple.hml qui contient déjà du code html (que vous avez renommée exemple.php) le bloc suivant, le serveur va traduire tout ça en html et servir la page ainsi obtenue.

<?php
 echo "bonjour" ;
 echo "<br>" ;
 echo date("m.d.Y") ;
 echo "<br>" ;
/* on affiche tous les fichiers du dossier courant
$fichiers = scandir(".") ;
print_r($fichiers) ;
echo "<br>" ;
*/
/* on affiche tous les noms des fichiers du dossier courant */
$fichiers = glob("*.*") ;
foreach ($fichiers as $f) {
echo $f . "<br>" ;
}
/* on a affiche toutes les images du dossier courant */
$images = glob("*.jpg") ;
foreach ($images as $f) {
    echo "<img src=" . "'" . $f . "'" . ">" ;
} 
?>