Blog

Page d’exemple

Projets

SPA – les bases de données

En 2022, on estime que 41 186 animaux ont été adoptés à la SPA et 44 199 animaux ont été recueillis par celle-ci. Afin de pouvoir répertorier les animaux présents à la SPA, une table de données est l’outil indispensable.

I – Présentation du projet

Pour commencer, la réalisation de la base de données se porte sur la simulation d’une SPA. Celle-ci se compose d’une page d’Acceuil comportant le menu en haut de la page.

Puis d’une page Ajouter où l’on rentre les informations sur un nouvel animal.

Par la suite, d’une page Modifier permettant de modifier les informations sur un animal déjà enregistré sur la base de données en rentrant son id et en choisissant la donnée à modifier. De plus, lorsque vous choisissez de supprimer un animal, il vous suffit de rentrer son id et de cliquer sur Supprimer l’animal ayant cet id.

Et enfin, la page Parcourir où l’on choisit par quel type de donnée nous souhaitons faire la recherche (id, espèce, race, nom, date et lieu) et où l’on écrit la valeur recherchée ou si c’est une date, si elle est égale, plus grande, plus petites, etc.

Pour chaque page, il est possible de supprimer toute la table, c’est-à-dire supprimer tout le tableau crée. Lorsque vous ajoutez et modifiez, le résultat de Parcourir se trouve sur la fenêtre blanche en dessous de Rechercher.

II – Mise en place du projet

Dans un premier temps, il a été primordial d’importer les librairies présentes pour la création de la base de données.

from tkinter import *
from tkinter import ttk
from tkinter.messagebox import showinfo
import sqlite3

La première ligne de code permet d’utiliser le nom des classes et fonctions définies sur tkinter. La seconde permet de créer des widgets. La troisième, showinfo permet de fournir des instructions à l’utilisateur. Enfin, d’importer le module SQLite3 permet d’interagir avec la base de données en .db .

Après avoir importé les modules dont on a besoin, il faut établir une connexion avec la base de données « base_SPA.db » et créer un curseur pour exécuter les commandes SQL .

connection = sqlite3.connect('base_SPA.db')
curseur = connection.cursor()
Ensuite, il faut créer les différentes fenêtres telles que accueil, ajouter, modifier, parcourir qui sont présents tout le long et dès le début à la page Accueil avec le bouton pour vider la table, c'est-à-dire effacer les données de la table.
from tkinter import *
from tkinter import ttk
from tkinter.messagebox import showinfo
import sqlite3

#génération du lien de la base de donnée
connection = sqlite3.connect('base_SPA.db')
curseur = connection.cursor()

#génération de la base de donnée si elle n'existe pas
curseur.execute("CREATE TABLE IF NOT EXISTS ANNIMAL(id INTEGER PRIMARY KEY AUTOINCREMENT UNIQUE, nom TEXT, espèce TEXT, race TEXT, age INT, trouvé_où TEXT)")

connection.commit()
curseur.close()
connection.close()

# création de toutes les fenêtres
def afficher_nouvelle_fenetre(message):
    fenetre.withdraw()  # Masque la fenêtre actuelle
    nouvelle_fenetre = Toplevel(fenetre)
    nouvelle_fenetre.title("Nouvelle Fenêtre")
    nouvelle_fenetre.geometry("720x555") 
    Label(nouvelle_fenetre, text=message).pack(padx=20, pady=20)

def affiche_acceuil():
    cadre_pile.append(cadre_acceuil)  # création de la page d'accueil
    afficher_cadre(cadre_acceuil)

def affiche_ajoute():
    cadre_pile.append(cadre_ajoute)  # création de la page ajoute
    afficher_cadre(cadre_ajoute)

def affiche_modifier():
    cadre_pile.append(cadre_modifier)  # création de la page modifier
    afficher_cadre(cadre_modifier)
    
def affiche_parcourir():
    cadre_pile.append(cadre_parcourir)  # création de la page parcourir
    afficher_cadre(cadre_parcourir)


def afficher_cadre(cadre):
    for c in [cadre_acceuil, cadre_ajoute, cadre_modifier, cadre_parcourir]:
        c.pack_forget()
    cadre.pack()

#génération de la fenêtre
fenetre = Tk()

fenetre.title("SPA - les bases de données")
fenetre.geometry("720x555")
fenetre.config(bg="#C2C2C2")
fenetre.iconbitmap("logo.ico")

#fonction pour vider la table
def vider_table():
    connection = sqlite3.connect('base_SPA.db')
    curseur = connection.cursor()
    curseur.execute("DROP TABLE ANNIMAL")
    curseur.execute("CREATE TABLE ANNIMAL(id INTEGER PRIMARY KEY AUTOINCREMENT UNIQUE, nom TEXT, espèce TEXT, race TEXT, age INT, trouvé_où TEXT)")
    connection.commit()
    curseur.close()
    connection.close()
    
bouton_vider_table = Button(fenetre, text="vider la table", font=("Consolas",15), bg="white", fg="black",command = vider_table)
bouton_vider_table.place(x=530,y=480)

# Cadres pour différentes pages
cadre_acceuil = Frame(fenetre, bg="#C2C2C2")
cadre_ajoute = Frame(fenetre, bg="#C2C2C2")
cadre_modifier = Frame(fenetre, bg="#C2C2C2")
cadre_parcourir = Frame(fenetre, bg="#C2C2C2")

cadre_acceuil.pack()

# Création du menu
menubar = Menu(fenetre)

# Ajout des commandes directement au menu principal
menubar.add_command(label="Acceuil", command=affiche_acceuil)
menubar.add_command(label="Ajouter", command=affiche_ajoute)
menubar.add_command(label="Modifier", command=affiche_modifier)
menubar.add_command(label="Parcourir", command=affiche_parcourir)

# Configuration de la fenêtre avec la barre de menus
fenetre.config(menu=menubar)

# Initialisation de la pile des cadres
cadre_pile = [cadre_acceuil]

fenetre.mainloop()

Les fonctions permettent de gérer la navigation entre les différentes pages en fonction des actions de l’utilisateur. De plus, elles permettent de masquer les cadres précédemment affichés et affichent le cadre correspondant à la page demandée.

Après avoir créé nos différentes pages, il faut les construire, rajouter du texte, du champ de texte, etc. Tout d’abord, commence la page d’accueil, très simplement, on crée des blocs :

# création des "blocs" 
titre_acceuil = Label(cadre_acceuil, text="Bienvenue sur la base de données de la SPA", font=("Consolas", 20), bg="#C2C2C2", fg="black")
soustitre_acceuil = Label(cadre_acceuil, text="DONNONS-LEUR AUTANT QU'ILS NOUS APPORTENT !", font=("Consolas", 13), bg="#C2C2C2", fg="black")

# affichage de ces blocs
titre_acceuil.pack(pady=20)
soustitre_acceuil.pack()

Après cela, il ne nous reste plus qu’à créer les autres pages.

# création des different blocs + affichage des blocs
titre_ajoute = Label(cadre_ajoute, text="AJOUTER", font=("Consolas", 20), bg="#C2C2C2", fg="black")
titre_ajoute.pack(pady=20)
soustitre_ajoute = Label(cadre_ajoute, text="Veuillez entrer les données de l'animal", font=("Consolas", 13), bg="#C2C2C2", fg="black")
soustitre_ajoute.pack()
desc_chmp_nom_str_ajoute = Label(cadre_ajoute, text="entrez son nom", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp_nom_str_ajoute.pack()
chmp_nom_str_ajoute = Entry(cadre_ajoute, font=("Helvetica",15), bg="#ffffff", fg="black", width=30)
chmp_nom_str_ajoute.pack()
desc_chmp_espece_str_ajoute = Label(cadre_ajoute, text="entrez son espèce", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp_espece_str_ajoute.pack()
chmp_espece_str_ajoute = Entry(cadre_ajoute, font=("Helvetica",15), bg="#ffffff", fg="black", width=30)
chmp_espece_str_ajoute.pack()
desc_chmp_race_str_ajoute = Label(cadre_ajoute, text="entrez sa race", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp_race_str_ajoute.pack()
chmp_race_str_ajoute = Entry(cadre_ajoute, font=("Helvetica",15), bg="#ffffff", fg="black", width=30)
chmp_race_str_ajoute.pack()
desc_chmp_age_str_ajoute = Label(cadre_ajoute, text="entrez son âge", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp_age_str_ajoute.pack()
chmp_age_str_ajoute = Entry(cadre_ajoute, font=("Helvetica",15), bg="#ffffff", fg="black", width=30)
chmp_age_str_ajoute.pack()
desc_chmp_localisation_str_ajoute = Label(cadre_ajoute, text="entrez le lieu où il a été trouvé", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp_localisation_str_ajoute.pack()
chmp_localisation_str_ajoute = Entry(cadre_ajoute, font=("Helvetica",15), bg="#ffffff", fg="black", width=30)
chmp_localisation_str_ajoute.pack()

#fonction pour ajouter les donnée choisies dans les champs de texte de la page ajouter dans la base de donnéee
def ajouter_donnee():
    connection = sqlite3.connect('base_SPA.db')
    curseur = connection.cursor()
    data = (chmp_nom_str_ajoute.get(),chmp_espece_str_ajoute.get(),chmp_race_str_ajoute.get(),chmp_age_str_ajoute.get(),chmp_localisation_str_ajoute.get())
    curseur.execute("INSERT INTO ANNIMAL (nom,espèce,race,age,trouvé_où) VALUES (?,?,?,?,?)",data)
    connection.commit()
    curseur.close()
    connection.close()

# création et placement du bouton utiliser pour valider l'ajout de donnée
bouton_ajouter = Button(cadre_ajoute, text="Ajouter l'annimal", font=("Consolas",15), bg="white", fg="black",command = ajouter_donnee)
bouton_ajouter.pack(pady=20)

Dans ce code, nous créons la fenêtre Ajouter avec les informations à remplir. Lorsque l’on clique sur le bouton Ajouter l’animal, celui ci sera ajouté automatiquement à la table de données.

# création des different blocs + affichage des blocs
titre_modifier = Label(cadre_modifier, text="MODIFIER", font=("Consolas", 20), bg="#C2C2C2", fg="black")
titre_modifier.pack(pady=20)
desc_chmp_modifier = Label(cadre_modifier, text="entrez l'id de l'annimal", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp_modifier.pack()
chmp_str_modifier = Entry(cadre_modifier, font=("Helvetica",15), bg="#ffffff", fg="black", width=5)
chmp_str_modifier.pack()

# création de la liste déroulante
desc_liste_deroul_modifier = Label(cadre_modifier, text="Choissisez quel donnée voulez vous modifier", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_liste_deroul_modifier.pack(pady=10)
liste_choix = ["Nom","Race","Espèce","Age","Localisation"]
liste_deroulante = ttk.Combobox(cadre_modifier, values=liste_choix)
liste_deroulante.pack()

desc_chmp2_modifier = Label(cadre_modifier, text="entrez la modification", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_chmp2_modifier.pack(pady=10)
chmp2_str_modifier = Entry(cadre_modifier, font=("Helvetica",15), bg="#ffffff", fg="black", width=30)
chmp2_str_modifier.pack()

# fonction pour modifier une donnée dans la base de donnée à partir de la liste déroulante et le champ de texte
def modifier_donnee():
    select = liste_deroulante.get()
    datas = (chmp2_str_modifier.get(),chmp_str_modifier.get())
    connection = sqlite3.connect('base_SPA.db')
    curseur = connection.cursor()
    if select == "Nom":
        curseur.execute("UPDATE ANNIMAL SET nom = ? WHERE id = ?",datas)
    if select == "Race":
        curseur.execute("UPDATE ANNIMAL SET race = ? WHERE id = ?",datas)
    if select == "Espèce":
        curseur.execute("UPDATE ANNIMAL SET espèce = ? WHERE id = ?",datas)
    if select == "Age":
        curseur.execute("UPDATE ANNIMAL SET age = ? WHERE id = ?",datas)
    if select == "Localisation":
        curseur.execute("UPDATE ANNIMAL SET trouvé_où = ? WHERE id = ?",datas)
    connection.commit()
    curseur.close()
    connection.close()

# fonction pour supprimer toutes les données lié à un identifiant dans la base de donnée   
def supprimer_donnee():
    sup_select = chmp_str_modifier.get()
    connection = sqlite3.connect('base_SPA.db')
    curseur = connection.cursor()
    curseur.execute("DELETE FROM ANNIMAL WHERE id = ?",sup_select)
    connection.commit()
    curseur.close()
    connection.close()

# création et placement des boutons pour valider les modifications / suppressions
bouton_sup = Button(cadre_modifier, text="Supprimer l'annimal ayant cet id", font=("Consolas",15), bg="white", fg="black", command = supprimer_donnee)
bouton_sup.pack(pady=30)
bouton_modifier = Button(cadre_modifier, text="Modifier", font=("Consolas",15), bg="white", fg="black", command = modifier_donnee)
bouton_modifier.pack()

La fenêtre modifier quant à elle a besoin de l‘id de l’animal. En effet, pour modifier une information sur un animal, la personne doit rentrer l’id présente sur la table de donnée correspondant à l’animal, après cela, elle choisit l‘information à modifier dans la liste déroulante puis rentre la correction à faire. Ensuite, cette fenêtre abrite aussi la possibilité de supprimer l’animal comme cela a été dit précédemment grâce à la fonction supprimer_donnee() par l’id de l’animal.

# création des different blocs + affichage des blocs
titre_parcourir = Label(cadre_parcourir, text="PARCOURIR", font=("Consolas", 20), bg="#C2C2C2", fg="black")
titre_parcourir.pack(pady=10)
desc_liste_deroulante_parcourir = Label(cadre_parcourir, text="Choississez par qu'elle type de donnee souhaitez vous rechercher", font=("Consolas", 13), bg="#C2C2C2", fg="black")
desc_liste_deroulante_parcourir.pack(pady=10)

# création de la liste déroulante du type de donnée
liste_deroulante_parcourir = ttk.Combobox(cadre_parcourir, values=["id","Nom","Espèce", "Age","Race","Localisation"])
liste_deroulante_parcourir.set("id")
liste_deroulante_parcourir.pack(pady=10)

# création du cadre blanc où apparaissent les recherches effectuées
frame_info_recherche = Frame(cadre_parcourir, bg="#C2C2C2",heigh = 50,width=650)
frame_info_recherche.pack_propagate(False) 
frame_info_recherche.pack()

desc_chmp_str_parcourir = Label(frame_info_recherche, text="écrivez cette information de recherche", font=("Consolas", 10), bg="#C2C2C2", fg="black")
desc_chmp_str_parcourir.place(x=0,y=0)

chmp_str_parcourir = Entry(frame_info_recherche, font=("Helvetica",10), bg="#ffffff", fg="black", width=15)
chmp_str_parcourir.place(x=0,y=23)

desc_chmp_str_parcourir = Label(frame_info_recherche, text="Si c'est une valeur elle doit être :", font=("Consolas", 10), bg="#C2C2C2", fg="black")
desc_chmp_str_parcourir.place(x=390,y=0)

# création de la liste déroulante pour préciser la recherche par valeurs numériques
liste_deroulante_info_recherche = ttk.Combobox(frame_info_recherche, values=["=","<=",">=","<",">"],width=15)
liste_deroulante_info_recherche.set("=")
liste_deroulante_info_recherche.place(x=390,y=23)

variable = StringVar()
variable.set("1")
chmp_str_info_recherche_parcourir = Entry(frame_info_recherche,textvariable=variable, font=("Helvetica",10), bg="#ffffff", fg="black", width=15)
chmp_str_info_recherche_parcourir.place(x=510,y=23)

# création de la variable qui stocke tout le résultat d'une recherche
global recherche
recherche = ""

# fonction pour construire notre variable
def parcourir_donnee():
    global recherche
    recherche = ""
    connection = sqlite3.connect('base_SPA.db')
    curseur = connection.cursor()
    data = [chmp_str_parcourir.get()]
    data2 = [chmp_str_info_recherche_parcourir.get()]
    if liste_deroulante_parcourir.get() == "Nom":
        recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE nom = ?",data).fetchall()
    if liste_deroulante_parcourir.get() == "Race":
        recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE race = ?",data).fetchall()
    if liste_deroulante_parcourir.get() == "Espèce":
        recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE espèce = ?",data).fetchall()
    if liste_deroulante_parcourir.get() == "Localisation":
        recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE trouvé_où = ?",data).fetchall()
    if liste_deroulante_parcourir.get() == "Age":
        if liste_deroulante_info_recherche.get() == "=":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE age = ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == "<":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE age < ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == ">":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE age > ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == "<=":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE age <= ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == ">=":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE age >= ?",data2).fetchall()
    if liste_deroulante_parcourir.get() == "id":
        if liste_deroulante_info_recherche.get() == "=":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE id = ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == "<":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE id < ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == ">":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE id > ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == "<=":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE id <= ?",data2).fetchall()
        elif liste_deroulante_info_recherche.get() == ">=":
            recherche = curseur.execute("SELECT nom,espèce,race,age,trouvé_où FROM ANNIMAL WHERE id >= ?",data2).fetchall()
    connection.commit()
    curseur.close()
    connection.close()

# fonction pour afficher la recherche sous une forme lisible
def texte_parcourir():
    texte_widget_frame_parcourir.delete("1.0","end")
    parcourir_donnee()
    for car in str(recherche):
        if car == "[" or car == "]" or car == "(" or car == "'"  :
            texte_widget_frame_parcourir.insert(INSERT,"")
        elif car == ",":
            texte_widget_frame_parcourir.insert(INSERT,"")
        elif car == ")":
            texte_widget_frame_parcourir.insert(INSERT,"\n")
        else :
            texte_widget_frame_parcourir.insert(INSERT,car)
  
# création et placement du bouton pour valider une recherche
bouton_parcourir = Button(cadre_parcourir, text="Rechercher", font=("Consolas",15), bg="white", fg="black",command = texte_parcourir)
bouton_parcourir.pack(pady=10)


frame_parcourir = Frame(cadre_parcourir, bg="#ffffff",heigh = 210,width=650)
frame_parcourir.pack_propagate(False) 
frame_parcourir.pack()

# création et placement de la barre de scroll lié à la recherche effectuée
scrollbar = Scrollbar(frame_parcourir, orient=VERTICAL)
scrollbar.pack(side=RIGHT, fill=Y)

texte_widget_frame_parcourir = Text(frame_parcourir, yscrollcommand=scrollbar.set)
texte_widget_frame_parcourir.pack(fill=BOTH, expand=True)

scrollbar = Scrollbar(texte_widget_frame_parcourir)

scrollbar.config(command=texte_widget_frame_parcourir.yview)

texte_recherche_parcourir = Text(frame_parcourir)

Dans ce code, nous créons la fenêtre Parcourir avec toutes ses informations.

Puis, finalement, on peut terminer le script :

# Affichage de la page d'accueil au lancement du script
cadre_acceuil.pack()

# Création du menu
menubar = Menu(fenetre)

# Ajout des commandes directement au menu principal
menubar.add_command(label="Acceuil", command=affiche_acceuil)
menubar.add_command(label="Ajouter", command=affiche_ajoute)
menubar.add_command(label="Modifier", command=affiche_modifier)
menubar.add_command(label="Parcourir", command=affiche_parcourir)

# Configuration de la fenêtre avec la barre de menus
fenetre.config(menu=menubar)

# Initialisation de la pile des cadres
cadre_pile = [cadre_acceuil]

fenetre.mainloop()

Cette fin de script permet d’afficher l’interface et ses informations. Sans cela, Le script ne serait pas utilisable

III – Conclusion

Ainsi, ce projet nous a permis de mobiliser nos bases acquises en python et SQL pour monter un projet traitant sur les bases de données. Ce type de projet n’est pas des plus simples compte tenu de la technique à avoir et des difficultés rencontrées telles que le positionnement des blocs et les interactions avec la base de données. Pour continuer, il est important dans ce type de projets de comprendre son code ligne à ligne afin de ne pas se tromper sur un nom, une valeur ou autres.

SPA-Gestionnaire-de-base-de-doneeTélécharger
Projets

La version améliorée de PixChoice

PixChoice est un site créé par Vincent ROBERT, Kevin FEDYNA et Ilyas R. Le site affiche 6 images de manières aléatoires parmi une liste afin de pouvoir voter pour la meilleure proposition. Le site calcule par la suite les résultats et permet de les afficher. Et j’en ai fait une version améliorée pour faciliter la modification des paramètres ou des utilisateurs notamment et je vais la présenter.

L’idée

Comme dit dans l’extrait le site propose 6 images parmi une liste et vous permet de voter pour celle qui vous plaît le plus. Cependant lors de sa V1 le site ne permettait pas un changement de paramètre optimal ce qui obligeait de se souvenir de l’utilisation de l’année passé et ce qui était une perte de temps, j’ai donc créé la V2 qui ajoute un interface administrateur qui permet de paramétrer les images, le vote et l’affichage des résultats. Pour cela je me suis appuyé sur le code de la V1 trouvable ici ainsi que le framework CSS PureCSS.io (Un framework CSS est un ensemble prédéfini de styles et de composants prêts à l’emploi pour faciliter le développement web). C’est ainsi que j’ai pu concevoir la V2 de PixChoice

Quelques images du site

Index de la page
Page des résultats

Vous avez donc ici quelques images du site de la vue d’un utilisateur ne possédant pas de compte et qui ne peut accéder qu’à la page de vote, aux résultats et à la page de connexion.

Fonctionnement

Je vais vous faire une brève explication du fonctionnement du site :

Les différentes pages du site sont faites en php c’est à dire que dans la page écrite en html on peut y ajouter du code, des fonctions… C’est ainsi que les pages du site sont dynamiques et s’affichent selon les paramètres. Et en parlant de paramètres, il faut bien les stocker mais où ? Pour stocker les informations, une base de donnée à été mise à ma disposition afin de sauvegarder des informations comme les utilisateurs avec leur identifiant et leur mot de passe, les images avec leur nombre de vote et combien de fois elles sont apparues, l’adresse ip des votants et la configuration du site. Et comme le php permet nativement de faire des requêtes sql l’utilisation de la base de donnée est simplifiée.

Dans les fonctionnalitées de php on peut également inclure d’autres page, c’est à dire que le code de la page donnée en paramètre va être placé au niveau de l’appel via la fonction ce qui me permet de n’avoir que 3 pages principales, c’est à dire que seulement 3 pages vont être les fondations du sites et les autres pages vont seulement remplir les 3 pages principales. On le retrouve notamment dans le code de la page index.php 

<?php
session_start(); // Création d'une session pour sauvegardé des données
// Appel de différentes pages pour instancier ...
require_once(__DIR__ . '/config.php'); // Les identifiants de la base de donnée
require_once(__DIR__ . '/databaseconnect.php'); // Une connexion à la base de donnée
require_once(__DIR__ . '/variables.php'); // Des variables récupérées en sql
require_once(__DIR__ . '/fonctions.php'); // Des fonctions

cookie($temps_vote[0][0]); // Appel de la fonction cookie qui va créer un cookie 
//pour sauvegarder le nombre de vote fait
?>

<!doctype html> <!-- Code html basique -->
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixchoice</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

<?php // retour en php pour récupérer les variables envoyés en post ou en get
$postData = $_POST;
$getData = $_GET;

include('header.php'); // Ajout de l'en tête de page

// ajout de la page de connexion si des variables existent
if (isset($postData['connexion']) || isset($_GET['connexion'])) { 
    include('login.php');
} else {
    include('vote.php'); // et si elles n'existent pas ajout de la page de vote
};?>
</body> <!-- Fin du code html -->
</html>

Vous remarquerez donc que mes pages ne sont pas bien conséquentes comme je peux créer d’autres pages pour les ajouter directement dans le code d’une autre, et c’est pourquoi j’ai 3 pages principales mais 19 pages secondaires qui sont appelées par les pages principales.

Fonctionnalités

Voici donc les différentes fonctionnalités proposées par le site afin de faciliter l’utilisation du site par les administrateurs :

  • Configuration du vote
    • Activation / Désactivation du vote.
    • Activation / Désactivation du vote pour les admins malgré la limite. (permet aux administrateurs de voter sans limites)
    • Gestion du nombre de vote avant d’être bloqué
    • Gestion du temps avant d’être débloqué
  • Configuration des images
    • Ajout d’image (avec gestion de formatage du nom et d’id dans la db)
    • Suppression d’images (avec gestion dans la db)
  • Configuration des résultats
    • Activation / Désactivation des résultats pour tous.
    • Activation / Désactivation de l’affichage des résultats pour les admins.
  • Gestion des utilisateurs
    • Ajout d’utilisateurs avec génération de mot de passe temporaire aléatoire
    • Tableau référençant les utilisateurs qui permet d’en supprimer ou d’activer ou non le fait qu’ils soient superadmin (seul les superadmin ont accès à cette page)
  • Configuration du compte
    • Modification de l’identifiant
    • Modification du mot de passe

Configuration du vote

Afin de configurer le vote plusieurs paramètres sont pris en charges:

  • Activation / Désactivation du vote.
  • Activation / Désactivation du vote pour les admins malgré la limite. (permet aux administrateurs de voter sans limites)
  • Gestion du nombre de vote avant d’être bloqué
  • Gestion du temps avant d’être débloqué

Voici donc la page permettant de configurer le vote

Configuration des images

Afin de configurer le vote plusieurs paramètres sont pris en charges:

  • Ajout d’image (avec gestion de formatage du nom et d’id dans la db)
  • Suppression d’images (avec gestion dans la db)

Voici donc la page permettant de configurer les images

Configuration des résultats

Afin de configurer le vote plusieurs paramètres sont pris en charges:

  • Activation / Désactivation des résultats pour tous.
  • Activation / Désactivation de l’affichage des résultats pour les admins.

Voici donc la page permettant de configurer les résultats

Gestion des utilisateurs

Afin de configurer le vote plusieurs paramètres sont pris en charges:

  • Ajout d’utilisateurs avec génération de mot de passe temporaire aléatoire
  • Tableau référençant les utilisateurs qui permet d’en supprimer ou d’activer ou non le fait qu’ils soient superadmin (seul les superadmin ont accès à cette page)

Voici donc la page permettant de gérer les utilisateurs

Configuration du compte

Afin de configurer le vote plusieurs paramètres sont pris en charges:

  • Modification de l’identifiant
  • Modification du mot de passe

Voici donc la page permettant de configurer son compte

Conclusion

Pour conclure le tout ce projet a été très enrichissant et très exigeant mais je me suis bien amusé à le faire, j’ai pu découvrir toute une partie du développement web étant donné que j’ai dû apprendre le php mais je m’en suis sorti et je suis plutôt fier du résultat.

Dépôt Github

Vous pouvez retrouver les fichiers sources du projet sur mon dépôt Github afin de mettre en place mon site sur votre serveur.

EDIT de l’enseignant : Le projet initial est un code de Julien Bernon, enseignant de physique-chimie et spécialité NSI. Merci à lui de nous avoir permis de reprendre son projet initial.

PixChoice_V2

Projets

Application de gestion de playlist (SGBDR) avec Python et…

Dans le monde numérique d’aujourd’hui, la musique est omniprésente, et la possibilité de gérer efficacement ses playlists est essentielle pour tout amateur de musique. Dans cet article, nous allons explorer comment créer une application simple de gestion de playlist en utilisant Python et Tkinter, deux outils puissants et accessibles pour le développement d’interfaces graphiques.

Introduction à Tkinter et SQLite

Tkinter est une bibliothèque standard de Python largement utilisée pour créer des interfaces graphiques. Elle offre une variété de widgets (éléments d’interface utilisateur) tels que des boutons, des étiquettes et des cadres, permettant de construire des applications interactives.

SQLite est une bibliothèque légère de gestion de base de données relationnelle souvent intégrée dans les applications pour stocker des données de manière structurée. Dans notre cas, nous l’utiliserons pour stocker les informations sur notre playlist musicale.

Création de la structure de données

Nous allons commencer par définir la structure de notre base de données SQLite, qui stockera les détails de chaque morceau de musique dans notre playlist. Nous aurons des champs tels que le titre de la chanson, l’année de sortie, la durée, le genre, l’artiste et le type d’album.

# Création de la table dans la base de données SQLite
def create_table():
    conn = sqlite3.connect("playlist.db")
    cursor = conn.cursor()
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS playlist (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            titre TEXT,
            annee INTEGER,
            duree TEXT,
            genre TEXT,
            artiste TEXT,
            album_type TEXT
        )
    ''')
    conn.commit()
    conn.close()

Dans cette fonction create_table(), nous établissons une connexion à notre base de données SQLite et exécutons une requête SQL pour créer une table nommée « playlist » avec les champs spécifiés. Cette fonction vérifie d’abord si la table existe déjà avant de la créer, grâce à la clause IF NOT EXISTS.

Lecture des données de la playlist

Une fois que la structure de la table est définie, nous pouvons écrire une fonction pour lire les données de la table et les afficher. Voici comment cela peut être fait :

# Lecture des données de la table et affichage
def read_data():
    conn = sqlite3.connect("playlist.db")
    cursor = conn.cursor()
    cursor.execute("SELECT * FROM playlist")
    rows = cursor.fetchall()
    conn.close()

    display_text = ""
    for row in rows:
        display_text += f"ID: {row[0]}, Titre: {row[1]}, Année: {row[2]}, Durée: {row[3]}, Genre: {row[4]}, Artiste: {row[5]}, Type d'album: {row[6]}\n"

    text_display.config(state=tk.NORMAL)
    text_display.delete('1.0', tk.END)
    text_display.insert(tk.END, display_text)
    text_display.config(state=tk.DISABLED)

Dans la fonction read_data(), nous établissons à nouveau une connexion à la base de données, exécutons une requête SQL pour sélectionner toutes les entrées de la table « playlist » et les récupérons à l’aide de fetchall(). Ensuite, nous bouclons à travers chaque ligne et les affichons.

Interface Graphique avec Tkinter

Maintenant que nous avons mis en place la gestion des données, nous pouvons créer une interface graphique conviviale pour notre application de gestion de playlist.

# Création de la fenêtre principale
window = tk.Tk()
window.title("Gestion de Playlist")
window.geometry("780x720")
window.minsize(680, 360)
window.configure(bg="#000")

Nous avons créé une fenêtre principale en utilisant tk.Tk() et lui avons donné un titre avec window.title(). Nous avons également défini la géométrie de la fenêtre et spécifié une couleur de fond.

Création des boutons d’action

Ensuite, nous avons ajouté des boutons pour effectuer différentes actions telles que la création de la table, la lecture des données et la manipulation des entrées de la playlist.

# Création des boutons d'action
frame_buttons = tk.Frame(window, bg="#000")
frame_buttons.pack(side=tk.TOP, pady=20)

btn_create = tk.Button(frame_buttons, text="CREATE", font=("Courrier", 14), bg="#01D758", fg="#000", command=create_table)
btn_create.pack(side=tk.LEFT, padx=10)

btn_read = tk.Button(frame_buttons, text="READ", font=("Courrier", 14), bg="#01D758", fg="#000", command=read_data)
btn_read.pack(side=tk.LEFT, padx=10)

Nous avons utilisé la classe Button de Tkinter pour créer des boutons, spécifiant leur texte, leur police, leur couleur de fond et de texte, ainsi que les actions qu’ils effectueront lorsqu’ils seront cliqués.

Conclusion

Dans cet article, nous avons exploré la création d’une application simple de gestion de playlist en utilisant Python et Tkinter. Nous avons vu comment créer une structure de base de données SQLite pour stocker les informations sur les morceaux de musique, ainsi que comment concevoir une interface graphique conviviale pour interagir avec ces données. Avec cette base, les amateurs de musique peuvent commencer à construire leur propre application de gestion de playlist personnalisée.

julien_shany_nael_projet_SGBDRTélécharger

interface graphique Projets

Interface graphique, en python


Les interfaces graphiques en Python permettent de créer des applications avec une interface utilisateur graphique, offrant ainsi une expérience plus visuelle et interactive. Avec des bibliothèques tel que par exemple Tkinter, Python simplifie le développement d’interfaces utilisateur, que ce soit pour des applications de bureau, des outils de visualisation ou des applications mobiles.

Introduction :

Les interfaces graphiques en Python représentent un moyen puissant de créer des applications interactives, offrant une expérience utilisateur intuitive et visuellement attrayante. Ce projet a pour objectif principal de concevoir une interface graphique permettant l’affichage, la modification et la suppression d’éléments au sein d’une base de données à l’aide de la programmation en Python. Les outils clés employés dans ce projet incluent Tkinter pour la conception de l’interface utilisateur et pandas pour la manipulation des données de la base.

Le compte rendu suivra une structure organisée, mettant en valeur les aspects cruciaux du projet, de la conception de l’interface graphique à l’intégration de la base de données. Les grandes sections de ce compte rendu incluront la conception de l’interface graphique, l’intégration de la base de données, les fonctionnalités principales, la gestion des erreurs et les opportunités d’amélioration, concluant avec un récapitulatif des points saillants du projet. Ces sections aideront à fournir une vision globale et détaillée du processus de développement de l’interface graphique Python dédiée à la gestion de bases de données.

Fonctionnalités Principales :

L’utilisation de la bibliothèque pandas s’avère essentielle pour la manipulation agile des données au sein de notre interface. Cette section explore les techniques employées pour extraire, modifier et supprimer des données, assurant ainsi une cohérence entre les informations présentées à l’utilisateur et celles stockées dans la base de données. Tout comme Tkinter, qui est une bibliothèque d’interface graphique en Python qui permet de créer des applications avec une interface utilisateur visuelle, facilitant ainsi le développement d’applications interactives.

Affichage :

Le processus d’affichage se déroule en plusieurs parties. Pour débuter, nous avons opté pour la création d’une nouvelle fenêtre à laquelle nous avons attribué des dimensions de 800×1000 (une décision basée sur nos préférences personnelles).

def affichage():
    # Créer une nouvelle fenêtre pour afficher le Pokédex
    fenetreupdate = Toplevel()
    fenetreupdate.title("Pokédex")
    fenetreupdate.geometry("800x1000")

Ensuite, pour connecter le script à la base de données (sous format Excel), en considérant que « bdd » représente notre base de données et que l’argument engine='openpyxl' est utilisé pour orienter pandas vers le module openpyxl. Cela permet à pandas de lire et d’écrire des fichiers Excel dans le format spécifique .xlsx.

excel_data = pd.read_excel("bdd.xlsx", engine='openpyxl')

Enfin, pour exploiter chaque ligne et chaque colonne, l’utilisation d’une double boucle for s’est avérée la plus pertinente pour nous. Nous avons également souhaité personnaliser la première colonne (le nom des Pokémon) en appliquant une police en gras pour les mettre en valeur. De plus, nous avons ajouté un espacement entre les données du tableur afin d’améliorer la présentation générale.

for index, row in excel_data.iterrows():
    for col_index, value in enumerate(row):
        label = Label(fenetreupdate, text=str(value))
        if col_index == 0:
            label.config(font=("Arial", 14, "bold"))
        label.grid(row=index+1, column=col_index, padx=50, pady=10, columnspan=2)

Nous avons ensuite fait face a un problème de place car notre base de donnée était trop longue. Nous avons rajouté une scrollbar . Pour cela, on a du d’abord définir un canva qui entoure toute la fenêtre. Puis, configurer ou se trouve la barre par rapport a la fenêtre.

canvas = Canvas(fread)
    canvas.pack(side=LEFT, fill=BOTH, expand=True)
    scrollbar = Scrollbar(fread, orient=VERTICAL, command=canvas.yview)
    scrollbar.pack(side=RIGHT, fill=Y)
    canvas.configure(yscrollcommand=scrollbar.set)

Puis, on a du créer une fonction qui lierai l’évènement du mouvement de la souris avec la scrollbar:

    def bardef(event):
        canvas.configure(scrollregion=canvas.bbox('all'))
    frame.bind('<Configure>', bardef)
    canvas.bind_all("<MouseWheel>", lambda event: canvas.yview_scroll(int(-1 * (event.delta / 120)), "units"))

L’arborescence des fenêtres

Pour avoir un rendu de pokedex crédible, nous avons du trouver une bonne mise en forme des différentes fonctions. On est donc parti d’une première fenêtre qui afficherait deux boutons: Un pour afficher la base de donnée et un pour modifier le pokédex. La fenêtre « Modifier le pokédex » n’utilise pas de sql car elle ne modifie pas de base de donnée, elle répertorie les actions qu’on peut exécuter sur le pokedex ( ajouter, modifier et supprimer) sous forme de trois autres boutons.

	bouton3 = Button(fmodif, text="Ajouter un Pokemon", font=("Consolas", 15), bg="white", fg="black", command=create, width=50, height=3)
    bouton4 = Button(fmodif, text="Modifier un Pokemon", font=("Consolas", 15), bg="white", fg="black", command=update, width=50, height=3)
    bouton5 = Button(fmodif, text="Supprimer un Pokemon", font=("Consolas", 15), bg="white", fg="black", command=delete, width=50, height=3)

Voici les boutons que nous avons utilisé tout le long du code. Il fallait a chaque fois les appeler avec avec la fonction pack(). Un des erreurs que nous avons rencontré est de mettre tout les boutons a la fin du code alors qu’il fallait les placer dans leurs fonctions respectives.

La fonction create

Pour la fonction create, nous avons pensé à faire plusieurs champ de saisie a la suite afin que l’utilisateur puisse rentrer toutes les données du nouveau Pokémon. Voici a quoi ressemble un des champs de saisie:

#champ de saisie nom fr
    nom_pokemon_label = Label(fcreate, text="Entrez le nom du nouveau Pokémon", font=("Arial", 10), bg="red")
    nom_pokemon_label.pack(pady=10)
    nom_pokemon_entry = Entry(fcreate, bg="white")
    nom_pokemon_entry.pack(pady=10)

La variable ‘nom_pokemon_label’ sert a configurer la zone de texte qui permet de savoir a quoi sert le champ de saisie. La fonction Label sert a créer et modifier le style d’une zone de texte et ici, le texte au dessus du champ de saisie. La variable ‘nom_pokemon_entry’ sert a créer le champ de saisie et modifier son apparence. Les deux variables sont appelées avec la fonction pack() qui fait apparaitre les éléments graphiques.

Après avoir fait tout les champs de saisie de chacune des données, on a créé un bouton sauvegarde afin d’enregistrer les nouvelles données dans le fichier.

Dans la partie sql, on a donc d’abord créé une fonction enregistrer() qui prend en paramètre tout les noms de données afin d’enregistrer chaque valeur. Ensuite, nous avons créé la variable ‘nv_ligne’. Avec la commande DataFrame de panda, elle crée une nouvelle ligne en prenant en compte les colonnes du fichier excel. Avec a commande concat, elle enregistre les données en fonction du type de donnée dans chacune des colonnes de la nouvelle ligne. Le ignore_index sert a ne pas prendre en compte les id d’origines.

#création de la ligne du nv pokemon
    nv_ligne = pd.DataFrame([[idtf, nom_pokemon, nom_anglais, type_pokemon, type_secondaire, pv, attaque, defense]], columns=excel_data.columns)
#enregistrer les données dans la nouvelle ligne
    excel_data = pd.concat([excel_data, nv_ligne], ignore_index=True)

Comme a la fin de chaque fenêtre, nous utilisons destroy() pour ne pas accumuler les fenêtres. Donc, après avoir appuyé sur le bouton sauvegarde, la fenêtre se ferme mais un print sur la console d’exécution nous montre que le pokemon a été enregistré.

La fonction update

Nous avons utilisé a peu près le même fonctionnement pour les autres fonctions: une fonction qui crée la fenêtre avec la bibliothèque de tkinter et une autre qui modifie et enregistre les données de la base de données avec les bibliothèques de panda et sqlite3.

Donc, nous avons commencé par une fonction update qui génère la fenètre et son apparence. Nous avons choisis, pour modifier les données de créer d’abord un champ de saisie pour rentrer le nom Français du pokemon a modifier, puis une Combobox ( comme un champ de saisie mais ou on sélectionne la donnée dans une liste) afin de sélectionner la donnée a modifier, puis, un autre champ de saisie pour donc modifier le contenu de la donnée. Nous avons aussi ajouté un bouton sauvegarder qui utilise la fonction update_data qui prend en paramètre chaque variable utilisée par les champ de saisie et la combobox.

#champ de saisie pokemon a modifier
    userlbl = Label(fupdate, text="Entrez le nom du pokémon que vous voulez modifier", font=("Arial", 12), bg="red")
    userlbl.pack(pady=10)
    nom_pokemon = Entry(fupdate, bg="white")
    nom_pokemon.pack(pady=10)
#combobox type de donnée a modif
    liste_donnees = ["Indice", "Nom français", "Nom anglais", "Type", "Type secondaire", "PV", "Attaque", "Défense"]
    comboboxlbl = Label(fupdate, text="Choisissez le type de donnée à modifier", font=("Arial", 12), bg="red")
    comboboxlbl.pack(pady=10)
    listeCombo = ttk.Combobox(fupdate, values=liste_donnees)
    listeCombo.pack(pady=10)
 #cds nv donnée
    userlbl = Label(fupdate, text="Entrez la nouvelle donnée", font=("Arial", 12), bg="red")
    userlbl.pack(pady=10)
    nv_donnée_entry = Entry(fupdate, bg="white")
    nv_donnée_entry.pack(pady=10)

Les champs de saisies sont les même que ceux de la fonction ajouter. Pour la Combobox, c’est le meme principe sauf qu’il faut ajouter une liste avant ou on a rentré les différents types de données et qu’on appelle dans la variable listeCombo avec ‘values’.

Pour la sauvegarde, on a utilisé une fonction update_data() qui prend en paramètre le nom du pokémon a modifier, le type de donnée a modifier et la nouvelle valeur. Pour mettre a jour les données, on a du écrire un enchainement de elif car il faut que l’utilisateur puisse modifier chaque donnée et que donc le code est différent pour chaque donnée.

#maj des données
    if type_donnee == "Indice":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Indice'] = nv_val
    elif type_donnee == "Nom français":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Nom français'] = nv_val
    elif type_donnee == "Nom anglais":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Nom anglais'] = nv_val
    elif type_donnee == "Type":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Type'] = nv_val
    elif type_donnee == "Type secondaire":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Type secondaire'] = nv_val
    elif type_donnee == "PV":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'PV'] = nv_val
    elif type_donnee == "Attaque":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Attaque'] = nv_val
    elif type_donnee == "Défense":
        excel_data.loc[excel_data['Nom français'] == nom_pokemon, 'Défense'] = nv_val

A chaque fois on commence avec une vérification pour savoir quel est le type de donnée, puis, avec la fonction loc(), on cherche dans le fichier d’abord le pokémon avec son nom Français, puis on trouve le type de donnée a modifier et on le remplace par la nouvelle valeur. Les données sont ensuite enregistrées dans la base de donnée avec ‘excel_data.to_excel’ comme dans les autres fonctions, la fenêtre et détruite un print affiche que les données ont bien été modifiées.

La fonction delete

Pour la suppression d’un pokemon nous avons utilisé trois fonctions. Dans la première, ont créé la fenêtre et on y ajoute un champ de saisi. En effet, on a seulement besoin du nom du Pokemon puisqu’il s’agit de supprimer toutes les données de ce Pokémon a partir de son nom. Les deux autres fonctions sont liées puisque la première, pokemon_supp() sert a trouver le nom du pokemon qui correspond et utiliser la deuxième fonction suppression() qui met a jour la base de donnée avec ‘to_excel’.

def pokemon_supp(supp_entry):
    #enregistre le nom rentré
    nom_pokemon = supp_entry.get()
    #supprime de la base
    suppression(nom_pokemon)

def suppression(nom_pokemon):
    #connecte le xlsx
    excel_data = pd.read_excel("base de donnée.xlsx")
     # remplace par le nom de la collone du nom
    excel_data = excel_data[excel_data['Nom français'] != nom_pokemon]
    # recrée le exel sans le pokemon
    excel_data.to_excel("base de donnée.xlsx", index=False)

La méthode .get() sert a utiliser une variable avec entry, donc ici la variable du champ de saisie. Dans la fonction suppression(), on connecte d’abord les données du fichier grâce au ‘read_excel’ de panda, puis on sélectionne toutes les lignes du fichier sauf celle du pokémon sélectionné et on recrée la base de donnée avec.

Conclusion

En résumé, ce projet d’interface graphique en Python pour la gestion d’une base de données a été une expérience enrichissante. Nous avons exploré la création d’une fenêtre comportant des boutons, chacun dédié à une fonctionnalité spécifique. Nous avons également mis en place une zone de champs de texte pour manipuler les données à l’intérieur. Bien que cela ait été complexe, cette expérience nous a permis d’approfondir nos connaissances en programmation Python.

Merci d’avoir lu notre article, voici la base de donnée et le script a télécharger.

base de donnéeTélécharger
pokedex_lastTélécharger
Tutoriels

Incrustation, utilisation du font vert!

Sur cet article vous recevrez des informations sur l’art du cinéma. Des aides qui consistent à vous apprendre comment mettre en place des fonts verts, bleus ou encore noir ! (sur Cap Cut une application de montage Gratuite)

Petit point historique et cinématographique!

Au cinéma, du moins dans les dernières productions du 7e arts : les fonts verts, bleus ou encore les fonts gris qui commencent à émerger. Ils sont régulièrement employé. Dans certain de vos films préférer, la technique du Malte Painting est employé, star Wars notamment pour éviter d’avoir trop de figurant ou encore de devoir dépenser des fortunes, des peintres, travaillent sur de grande surface pour pouvoir crée des décores pour les acteurs. Cette méthode etait utiliser aux prémices des incrustations dans des courts ou longs métrages. Mais aujourd’hui, nous voulons utiliser et manipuler des fonts verts, alors passons à l’explication!

Pourquoi Vert ou bleu ?

Ces deux couleur parce que ce sont les seuls couleur que l’on ne retrouve pas naturellement dans la colorimétrie d’une personne, le jaune, le marron, le rouge, le beige ou encore le rose même le noire peuvent être la couleur de nos attributs physique si le font est de la même couleur qu’une partie de nous, quand au montage on retire le font alors les partits qui sont de la couleur similaire seront enlevées en même temps. Si vous voulez vous incruster dans une vidéo ou sur des photos qui se déroulent dans la nature alors il faut privilégier le font bleu et inversement si vous souhaitez vous incruster dans un font.

Où se procurer le matériel?

Et oui! il faut du matériel pour pouvoir utiliser des fonts verts. Il vous faut:

  • un font vert !
  • une ou plusieurs source de lumière.
  • un trépied pour votre téléphone.
  • un espace assai grand.

Que se soit le font vert, les sources lumineuses et le trépieds, vous les trouverez dans magasins qui vende de tout mais dans certain magasins vous les trouverez à des prix très abordable pour commencer.

la ring light …

Cette outil vous permettra de contrôler (selon les modèles) l’intensité lumineuse de votre vidéo, quand vous vous filmerez devant votre font vert, si vous n’avez pas une bonne lumière, le résultât post montage serrât moins qualitatifs, vous pourrez être soit mal détouré, soit avoir des résidu vert sur votre corp, . Après j’ai utiliser le therme ring light, mais vous pouvez utiliser une lampe de bureau, il n’est pas obligatoire de dépenser de l’argent si vous avez du matériel qui vous convient même si leur utiliser première n’est pas la même.

Le fonts coloré …

Si vous souhaitez vous incruster dans un décore naturel privilégié un font bleu et inversement si vous souhaitez vous incruster dans un décor où le bleu domine alors privilégié un font vert. Comme pour la lumière, une couette ou n’importe quel bout de tissu pourra être tendu et utiliser, mais il est vrai que l’achat d’un font vert est plus pratique parce que le font vert est fourni avec le matériel pour le tendre et l’installé n’importe où alors qu’avec un bout d’étoffe les espaces pour se filmer sont aussi restreints que peu confortable.

trépied …

Le trépied est indispensable à moins que votre source de lumière possède un moyen de bloquer votre téléphone seul un trépied vous permettra une stabilité qui sera idéal, de plus votre téléphone doit être dans la même position pendant la durée de votre plan. Si vous le positioner sans un réelle maintient alors il y a des chance qu’il glisse, tremble ou autre.

Une zone propice à la créativité.

Un espace qui est bien plus grand que votre fond est fort utile. SI vous pouvez prevoyer de l’espace de chaque côté de votre font y compris devant pour voir prendre en video ou simplement en photo de votre corp que vous souhaitez plus tard incruster. Mais si vous souhaitez utilisé un font pour pouvoir incruster des objets, alors de simples feuilles de papier de couleur bleue ou verte suffise et par conséquent un petit espace suffit.

Cap Cut

Cap Cut est un logiciel gratuit qui certes possède une version payante, mais à l’heure actuelle notre utilités n’as pas besoin de cette option. Vous prouvez mètre de la music, faire votre montage vidéo retoucher légèrement vos photos ainsi que vidéo. Cap Cut possède des model qui sont en lien avec certain réseaux sociaux. Vous trouverez dans la suite de ce tutos tous les informations qui vous permet d’utiliser les fonts verts. Avec Cap Cut c’est ultra instinctifs et rapide pour utiliser une incrustation.

Après avoir importé vos fichiers vidéos, vous sélectionnerez la vidéo en question puis vous ferez défilez la barre des options en bas de l’écran jusqu’à trouver l’option peur retirer le font comme sur l’image en dessous:

Et maintenant la réalité c’est que le font n’est pas obligatoire mais fortement conseillé parce que avec un mur blanc le détourage sera potentiellement moins nette qu’avec un font vert/bleu. comme sur l’image qui va suivre vous trouver trois option différente:

Suppression automatique:

En appuyant sur ce bouton le font est détouré, pour des personnes très utiles, mais parfois certain objet qui doivent être conservés seront effacés.

Suppression personnalisé:

A contrario de l’option de suppression automatique, la suppression personnalisée est plus pratique s’il y a des éléments que vous souhaitez retirer et que ces éléments sont conservez avec l’autre option.

Chroma key:

C’est l’option la plus dure à utiliser parce qu’il va falloir obligatoirement un font vert et de bonne lumière alors que pour les options précédentes les lumières sont quasiment obligatoire pour un beau résultat alors que le font vert/bleu est simplement recommandé.

Pourquoi pas utiliser les trois options pendant votre montage?

Le mot d’ordre est TESTé et TENTé. Entrainez vous, refaite vos vidéos, en cinéma les prises sont parfois et souvent faits par dizaine par sécurité, même si la prise semble parfaite, tester les réglages de lumière, avec plusieurs font diffèrent avec ou sans font vert. Votre production n’a peut-être pas besoin d’un font vert, si ce n’est pas le cas n’hésité pas à positionner votre source de lumière ou encore votre téléphone de différente manière, parce que personne à envie de devoir retourner un plan parce que la vidéo ne vous convient plus pour 73x ou 0010 1010y raison.

Ce tutoriel est fini, bon montage et surtout puisse le sort vous être favorable.

Tutoriels

Utiliser Git et GitHub dans ses projets

Marre de sans cesse envoyer son bout de code à tous les membres de son groupe à chaque petite modification ? Marre de devoir intégrer le code de son partenaire à son code à chacune de ses modifications ? Je pense avoir la solution à vos soucis.

Qu’est-ce que Git ?

Git est un système de contrôle de version distribué, ce qui signifie qu’un clone local du projet est un référentiel de contrôle de version complet. Ces référentiels locaux entièrement fonctionnels facilitent le travail hors connexion ou à distance. Les développeurs valident leur travail localement, puis synchronisent leur copie du référentiel avec la copie sur le serveur. Ce paradigme diffère de la gestion de version centralisée où les clients doivent synchroniser le code avec un serveur avant de créer de nouvelles versions du code.

Selon docs.microsoft.com

Concrètement, à notre échelle, grâce à Git, ainsi que GitHub, vous aurez la possibilité de stocker le code de votre projet sur un serveur, on appelle ça un dépôt (ou repository, dans la langue de Shakespeare). Ainsi, les modifications que vous apportez à votre code sur votre PC (en local), seront envoyés au serveur. À quoi ça sert ? Les autres personnes de votre groupe pourront directement accéder au nouveau code !

Git ? GitHub ? Quelles différences ?

Pour simplifier au maximum, Git est le logiciel installé sur votre PC qui vous permettra de créer un dépôt (votre projet qui contiendra le code), envoyer les modifications, etc.
GitHub lui, va héberger votre dépôt, c’est une sorte de Cloud (comme Microsoft OneDrive ou Google Drive).

Installation de Git

Commençons sans plus attendre ! Tout d’abord, il vous faudra installer le logiciel Git.

Rendez-vous sur le site officiel, puis sélectionnez votre système d’exploitation (Linux/Unix, évidemment 😉).
Lors de l’installation, si vous êtes sur Windows, vous pouvez décocher les Windows Explorer integration, qui ne sont pas utiles à notre échelle et qui pourront vous gêner :

Vous pouvez ensuite appuyer sur Next, jusqu’à la fin.

Création de votre dépôt (projet)

Désormais, vous allez devoir vous créer un compte gratuitement sur GitHub.

Ensuite, tout en haut à droite de la page, dirigez vous vers le « + », et cliquez sur New repository.

⚠️ Attention: Dans un projet en groupe, seulement une personne du groupe doit créer le dépôt, n’allez pas créer 4 dépôts pour le même projet en groupe.

Vous allez après devoir renseigner, le nom de votre dépôt et éventuellement une description.
Pensez bien à mettre votre dépôt en privé. Sinon, vos travaux seront accessibles publiquement.
Éventuellement, vous pouvez ajouter un fichiez README. Le reste est peu utile en l’occurrence.

Votre projet désormais créé, rendez-vous dans l’onglet Settings de ce dernier, puis dans Collaborators. Vous pourrez ainsi ajouter l’accès au dépôt à d’autres comptes GitHub, par exemple aux autres membre de votre groupe.

Votre dépôt est alors désormais créé.

Cloner le dépôt dans un environnement local

Le dépôt maintenant présent. Il faut pouvoir envoyer les futurs fichiers de notre projet dans le dépôt, pour qu’une contribution soit accessible directement par tous les membres du groupe.

Pour ce faire, nous aurons besoin de l’URL du dépôt, récupérable dans la page principal du dépôt, puis dans Code dans l’onglet HTTPS.

Ceci étant fait, nous allons désormais configurer Git, installé précédemment.

Ouvrez un terminal, sur Windows, vous pouvez faire un clic-droit dans le menu démarrer et sélectionner Terminal. Exécutez ensuite les 2 lignes de commandes suivantes séparément :

git config --global user.name "<github-username>"
git config --global user.email "<github-email>"

Vous remplacerez <github-username> par votre nom d’utilisateur sur GitHub dans un premier temps, et <github-email> par votre adresse e-mail sur GitHub dans un second temps.
Dans le cas où git ne serait pas reconnu comme commande, redémarrer votre ordinateur pourrait régler le problème.

Nous allons ensuite cloner le dépôt dans un dossier de votre ordinateur, rendez-vous dans le dossier où vous souhaitez cloner le dépôt, vous pouvez pour cela utiliser la commande cd dans le Terminal précédemment ouvert. Lorsque vous êtes bien situé, exécutez la commande :

git clone <repository-url>

Vous remplacerez <repository-url> par l’URL du dépôt que avez copié précédemment, dans mon cas, ce serait https://github.com/ilyas-r/Projet-NSI.git.

Votre dépôt désormais cloner, vous pouvez maintenant utiliser votre IDE préféré pour commencer le développement de votre projet !

Envoyer les fichiers sur GitHub

Imaginons que vous ayez créé un fichier index.html et que vous souhaitiez l’envoyer sur GitHub. Vous devez alors effectuer 2 manipulations. Tout d’abord, il faut faire ce qu’on appelle un commit.

Un commit permet d’enregistre les modifications que vous avez apportées aux fichiers de votre projet. C’est une sorte de paquet contenant les modifications que vous avez faîtes à votre projet.
Commençons alors par remplir ce paquet. Pour cela, nous allons exécuter la commande :

git add index.html

J’ai précédemment créé un fichier index.html, et je souhaite l’ajouter à mon commit. J’utilise alors l’argument add. Si j’avais créé plusieurs fichiers, par exemple un fichier index.html et un ficher styles.css, j’aurai pu ajouter plusieurs fichiers en même temps, en ajouter le nom du second fichier juste après le premier, cela aurait ressemblé à :

git add index.html styles.css

Finalement, la syntaxe ressemble à ça :

git add fichier1 fichier2 fichier3 (...)

J’aurais pu également ajouter automatiquement tous les fichiers modifiés (créés ou supprimés) dans le projet avec :

git add .

Maintenant, que nous avons sélectionner les modifications que nous ajouterons au paquet, nous allons créer le paquet (le commit). Tout simplement en exécuter la commande :

git commit

Je peux également mettre un message au commit, une sorte d’étiquette permettant d’indiquer à quoi sert ce commit et qu’est-ce qu’il change. J’aurai par exemple pu écrire :

git commit -m "Création du fichier index.html, la page principale du site"

Le commit maintenant prêt, nous pouvons le ou les envoyer avec la commande :

git push

Si je rafraichis alors la page de mon dépôt sur GitHub, je verrai qu’il a bien été mis à jour !

Mettre à jour mon dépôt local

Pour mettre à jour votre dépôt local avec les dernières modifications du dépôt distant (par exemple, si d’autres personnes ont envoyé des commits depuis la dernière fois que vous avez mis à jour votre copie locale), vous pouvez utiliser la commande :

git pull

⚠️ Attention: Ne pas exécuter cette commande si vous êtes en train de modifier des fichiers et que vous n’avez pas créer de commits.

Conclusion

En conclusion, l’utilisation de Git et GitHub peuvent s’avérer être très utile pour aider les développeurs à travailler en collaboration. Il existe de nombreuses alternatives qui permettent de faire cela, comme GitLab, qui remplacerait alors GitHub.

Il existe également d’autres outils permettant de travailler en groupe, notamment Replit.

Tutoriels

Comment allumer et accéder à son ordinateur à distance

  • par Thomas S.

Vous avez un puissant ordinateur fixe chez vous ? Une connexion internet satisfaisante ? Et vous aimeriez entièrement contrôler votre ordinateur à distance pour profiter de la puissance de celui-ci ? Et bien sachez qu’allumer et prendre le contrôle de cet appareil est aujourd’hui possible, sur tous vos appareils : ordinateur portable, téléphones, tablettes, etc.

Présentation

En lisant ce tutoriel, vous allez :

  • configurer le Wake-On-Lan (WOL) : un standard des réseaux Ethernet qui permet à un ordinateur en veille ou éteint d’être démarré à distance1 ;
  • configurer son routeur pour permettre le démarrage de son ordinateur via internet ;
  • découvrir une liste de logiciels qui permettent d’allumer son ordinateur à distance à l’aide de WOL ;
  • découvrir une liste de logiciels accordants l’accès et le contrôle de son ordinateur ;
  • installer et configurer un logiciel en particulier comme exemple (Parsec qui fonctionne pour MacOS et Windows).

Avant toute chose, voici des précisions concernant quelques limitations en rapport avec mon tutoriel :

  • La configuration du WOL est décrite pour Windows. Dans la suite de l’article, vous trouverez des liens vers des tutoriels pour le faire sur MacOS. Veuillez noter qu’après quelques recherches, le support du WOL sur MacOS est dit « bizarre », il ne fonctionnerait pas tout le temps. Je ne peux pas essayer de mon côté, donc si cela ne fonctionne pas, je suis navré pour vous ;
  • Je ne peux pas vous montrer la configuration du logiciel Parsec sur MacOS, mais le système étant réputé comme simple d’utilisation, vous devriez y arriver en suivant mes indications générales ;
  • Les listes de logiciels pour allumer son ordinateur à distance ou pour y accéder contiendront des logiciels que je n’ai pas essayé par moi-même, mais rassurez-vous, vous pourrez trouver bon nombre de tutoriels en ligne concernant ceux-ci (je mettrai en lien des tutoriels pour que vous n’ayez pas à chercher). Je ne suis pas responsable de problème.s avec des logiciels présent dans la liste, notamment sur les produits de la marque Apple (je pense notamment aux logiciels pour allumer son ordinateur à distance).

Configurer le Wake-On-Lan (WOL) sur son ordinateur

Windows

1. Vérifier que le paramètre est activé dans le BIOS :

Vous devez vous assurer que le Wake-On-Lan est activé dans les paramètres de votre carte mère. Pour cela vous devez vous rendre dans le BIOS (interface permettant de configurer sa carte mère), puis rechercher dans tous les paramètres un paramètre qui a un nom similaire à « Wake-On-Lan ». Pour accéder au BIOS, il faut lors du démarrage de l’ordinateur (entre le moment où vous appuyez sur le bouton et le moment où vous voyez le logo Windows apparaître) appuyer à plusieurs reprises sur l’une des touches de votre clavier parmi celles-ci : Suppr ; F2 ; F12. En effet, cette touche dépend de votre carte-mère. Soit vous appuyez à plusieurs reprises sur toutes les touches en même temps, soit vous recherchez sur internet quelle touche permet d’accéder au BIOS. La recherche internet ressemblerait à ce qui suit :

[Marque de la Carte Mère] [Modèle de la carte mère] accéder au BIOS

Note : Et si je ne connais pas le modèle de ma carte mère ni la marque qui l’a produite ? – Si c’est un ordinateur portable, vous pouvez mettre la marque puis le modèle du pc portable et « accéder au BIOS » (si vous ne trouvez rien, cherchez en anglais). Pour les ordinateurs fixes2 :

  1. Appuyez simultanément sur les  touches Windows + R ;
  2. Entrez le code suivant : msinfo32 puis Entrée ;
  3. Une fenêtre d’affichage avec les informations du système Windows, consultez les éléments fabricant, produit, version de la carte de base.

Une fois que vous avez accès au BIOS, veuillez noter que chaque BIOS est différent, ainsi je vous suggère de faire une recherche sur internet comme suit :

[Marque de la Carte Mère] [Modèle de la carte mère] Wake On Lan BIOS settings

Suite à cela, vous pourrez trouver soit des articles, soit mieux, des vidéos qui vous montreront avec des images qui correspondent à votre BIOS. Internet regorge de ressources pour cela, vous devriez trouver sans crainte.

Voici des images d’illustrations. Ici est représenté le BIOS de la carte mère Gigabyte B550M-DS3H :

Voici à quoi ressemble le BIOS de cette carte mère. Le vôtre est peut-être similaire.
Cliquez sur Advanced Mode (ou sur F2).
Rendez-vous dans la catégorie « Settings », puis « Platform Power ».
Identifiez la ligne Wake On Lan et assurez-vous que la valeur est bien « Enabled », sinon cliquez sur « Disabled » et changez la valeur via la pop-up qui apparait.
Une fois ça fait, allez dans la dernière catégorie « Save & Exit », puis « Save & Exit Setup », et cliquez sur Yes. Votre ordinateur va redémarrer sur votre système d’exploitation.

2. Activer le paramètre dans Windows :

Pour ce faire, dans la barre de recherche, écrivez « Panneau de configuration ».

Appuyez sur la touche Entrée, puis allez dans la catégorie « Réseau et Internet », puis dans « Centre Réseau et partage ». Regardez l’image ci-dessous. Dans « Afficher vos réseaux actifs » se trouvent la liste de toutes vos interfaces réseaux. Choisissez quelle interface sera utilisée : votre wifi, votre connexion filaire, etc. Sur cette image on constate qu’il n’y a qu’une seule interface. Donc on choisit celle-ci. Notez que vous pouvez toujours répéter les mêmes étapes pour chaque interface afin d’être sûr que ça fonctionne partout.

Note : Si votre réseau wifi ou votre connexion filaire n’est pas directement relié à votre box, cela posera problème pour l’étape de configuration de la box internet. Renseignez vous auprès de votre administrateur réseau pour avoir l’information.

Il faut donc cliquer là où c’est souligné sur l’image.

Puis, cliquez sur Propriété, puis Configurer puis Avancé et dans cette liste, cherchez « Wake on Magic Packet » (Traduis en français : « Réveil par paquet magique »). Une fois trouvé, à droite il y a « Valeur ». Définissez la sur Enable (ou « Activé »). Une fois cela fait, cliquez sur OK.

MacOS

Comme dit au début de ce tutoriel, le support du WOL sur MacOS est dit « bizarre », il ne fonctionnerait pas tout le temps. Je ne peux pas essayer de mon côté, je vous fournis les liens, à vous d’essayer de de bidouiller pour que ça fonctionne :

Maintenant, passons à la configuration du routeur.

Configuration du routeur pour permettre un démarrage via internet

Avant toute chose, il est important que vous vérifiez comment est construit votre réseau là où vous vous situez.

  • Si votre ordinateur est directement relié à la box internet, par câble, par wifi, ou même par répéteur/routeurs qui servent uniquement à amplifier le réseau, alors vous n’aurez qu’à configurer la box. Si vous n’êtes pas en possession de cette information, veuillez vous rapprocher de votre administrateur réseau.
  • Si votre ordinateur n’est pas directement relié à la box internet mais qu’il transite via un sous-réseau au réseau de votre box (via un routeur configuré comme tel), la tâche est plus ardue et ne sera pas explicitement décrite ici. Dans l’idée, vous devez répéter l’étape réalisée sur la box sur le routeur qui contrôle le sous-réseau, de sorte qu’un port soit « visible » sur le réseau de la box et donc de rendre « visible » ce port sur internet. Pour ce cas particulier plus complexe, veuillez vous référer à votre administrateur réseau (ou à internet avec vos précieuses recherches).

Admettons que nous sommes dans le 1er cas décrit : votre ordinateur est directement relié à votre box internet.

Sur Windows, veuillez vous rendre à nouveau dans le Panneau de configuration, Réseau et Internet, Centre de réseau et partage, cliquer sur l’interface que vous allez utiliser pour le WOL, puis cette fois-ci cliquer sur Détails… plutôt que Configurer. Ici vous avez plein d’informations. Notez quelque part celles-ci :

  • Adresse physique (également appelé adresse MAC) : sous la forme XX-XX-XX-XX-XX-XX
  • Adresse IPv4 : sous la forme xxx.xxx.xxx.xxx
  • Passerelle par défaut IPv4 : sous la forme 192.168.xxx.xxx

Maintenant, ouvrez une page internet et mettez l’adresse IP qui était sur la même ligne que « Passerelle par défaut IPv4 » puis appuyez sur Entrée.

Vous tombez sur la page d’administration de votre box internet. Il va vous falloir un mot de passe que votre administrateur réseau doit connaître pour vous connecter. Une fois cela fait, vous allez devoir rendre accessible sur internet un port qui sera utilisé pour allumer votre ordinateur.

Vous allez avoir différents liens selon votre box internet, mais ces liens vont vous expliquer comment rendre accessible un port quelconque sur internet (dit autrement « ouvrir un port quelconque de votre box internet »). Vous devrez suivre à la lettre la vidéo sauf que vous devrez choisir le port 7 ou 9. Il existe deux ports pour le WOL, donc choisissez-en un arbitrairement, et si lorsque vous essaierez d’allumer votre pc à distance et que cela ne fonctionne pas, considérez parmi les problèmes possibles le port utilisé, et donc tentez celui que vous n’avez pas choisi.

  • SFR :
    • Il prend exemple pour un serveur Minecraft, remplacez juste 25565 par 7 ou 9. Concernant les protocoles, mettez soit « UDP » soit « les deux » ;
    • La vidéo
  • Free :
    • remplacez le port 80 par 7 ou 9. Plus tôt dans l’article, vous avez noté l’adresse IP de votre ordinateur ;
    • La vidéo
  • Orange
    • il parle beaucoup pour rien dire, mais c’est la plus claire – ATTENTION LE SON EST TRÈS FORT AU DÉBUT DE LA VIDÉO ;
    • la partie qui nous intéresse commence à 5:32, partez du principe qu’il ne parle pas de l’xbox mais d’un pc, faites donc les mêmes manipulations pour votre pc ;
    • notez que vous n’êtes pas obligé de renommer votre pc et qu’il suffit de vous rappeler du nom de celui-ci ;
    • A 7:42, quand il commence à remplir les informations, mettez le nom que vous voulez, il sert uniquement à le retrouver dans la liste des ports « ouverts ». Pour le port interne et externe, mettez bien 7 ou 9, pour les protocoles, mettez soit « UDP », soit « les deux », choisissez votre pc à la place de l’xbox (si le pc n’est pas listé, vous l’avez mal ajouté dans l’onglet DHCP) et si vous avez un onglet supplémentaire « IP externe », laissez vide ;
    • Après 8:00, la vidéo ne nous intéresse plus, vous avez fini vos manipulations ;
    • La vidéo
  • Si vous avez une autre box, ou en tout cas un panel administrateur différent, je vous suggère de chercher comme suit sur un moteur de recherche :
    • [Opérateur] [Nom de la box] [Version de la box] ouverture port
    • Ajoutez après port « nat » ou « nat/pat » si vous ne trouvez rien

En cas de doutes, rapprochez-vous de votre administrateur réseau.

Une fois le PC configuré, de même pour la box, passons à la suite !

Logiciels pour allumer son ordinateur à distance

Voici une liste de logiciels pour démarrer son ordinateur à distance :

  • Windows : Wake On Lan
  • Linux : 😂 – Vous voulez pas qu’on vous tienne la main aussi… Bon bon ok : lien 😒 ou lui
  • Mac OS : lien (je n’ai pas pu tester, alors attention)
  • Android : lien Play store (Remarque : Quand vous ajoutez une connexion, choisissez le petit nuage et ne vous occupez pas des 2 dernières cases à remplir)
  • iOS : lien Apple store (je n’ai pas pu tester, alors attention)

Dans la majorité des logiciels, qui font plus ou moins peur dus à leur choix de design plus ou moins douteux, vous devrez fournir les informations suivantes :

  • Le nom de l’appareil : n’a aucune utilité autre que vous permettre d’identifier pour vous à quel appareil correspond cette configuration ;
  • Le port utilisé (pas de panique si ce n’est pas à précisé, c’est sûrement que par défaut le logiciel va utiliser le port 7 ou 9 ou les deux) ;
  • L’adresse physique/l’adresse MAC ;
  • l’adresse IP du routeur/nom d’hôte : votre adresse IP publique, qui peut changer de temps en temps : vous pouvez la retrouver en allant sur ce site par exemple.

N’hésitez pas à faire un test en éteignant votre ordinateur, en vous branchant en connexion LTE (4G, 5G) en partage de connexion ou avec le logiciel pour téléphone mobile et en essayant d’allumer votre ordinateur. Si cela ne fonctionne pas, rendez-vous dans la partie Si ça ne fonctionne pas…

Logiciels pour accéder et contrôler son ordinateur à distance

Il existe une multitude de logiciel pour faire ceci, voici une courte liste des plus connus :

Il existe même des manipulations plus complexes mais plus performantes et qui fonctionnent même sur linux (😱) à base de création de réseaux privés virtuels et de logiciels de diffusions…

Un exemple de logiciel : Parsec

Parsec est un logiciel parmi tant d’autres. Il permet l’host sur Windows et Mac OS. « Host » veut dire que l’ordinateur se place en tant qu’appareil sur lequel on peut se connecter. C’est un hôte.
A contrario, le client signifie les appareils qui se connectent aux hôtes. Le client existe sur Windows, Mac OS, Linux, Android, et Web.

Suivez ce lien pour télécharger l’application.

Suivez l’installeur qui vous guide dans l’installation.

Remarque 1 : Si l’installeur vous demande si vous souhaitez cocher « Virtual Display Driver » (ou nom similaire), vous pouvez le cocher, c’est utile pour certaines fonctionnalités du logiciel.

Remarque 2 : L’installeur vous proposera un choix entre « Per User » et « Shared » si vous êtes sur un appareil hôte (windows par ex), VOUS DEVEZ INPERATIVEMENT CHOISIR « Shared » !

Une fois l’installation achevée, le logiciel se lance automatiquement (lancez le si ce n’est pas le cas), puis cliquez sur « Sign Up » si vous n’avez pas de compte. Cela va vous rediriger vers une page internet, suivez toutes les étapes pour créer un compte, vérifier l’email, etc. puis connectez-vous sur l’application.

Cliquez sur le bouton « sign Up », souligné sur l’image.
La page internet vers laquelle vous êtes redirigé.

Une fois que vous êtes connecté, l’interface ressemblera à celle-ci.

Interface similaire à un ordinateur hôte.
Interface similaire à un appareil uniquement client.

Cliquez sur l’engrenage à gauche, entouré en bleu dans les images précédentes. C’est là que vous verrez une différence entre les différentes versions de Parsec (selon la plateforme). En effet, seuls les appareils hôtes ont la catégorie « Host », et les clients entre-eux n’ont pas les mêmes paramètres.

La catégorie « Host » ! Elle ne s’est pas enfuie !
Ah… J’ai parlé trop vite… (mais non ! cette capture provient d’un appareil qui ne peut pas host.)

Nous n’allons pas aller plus loin au niveau des paramètres, le site de parsec contient un support (article) très complet qui explique tout parfaitement et clairement. Pour la démonstration nous allons laisser les paramètres par défaut et tenter une connexion.

Tips : Allez tout de même jeter un coup d’œil dans la catégorie « Hotkeys » qui liste quelques raccourcis utiles, et gardez en mémoire les premiers raccourcis : « Disconnect » et « Menu ».

Remarque : Sachez que parmi les paramètres, il y en a qui peuvent aider à optimiser la connexion entre les 2 appareils sans perdre de qualité et de fluidité, et pouvant l’améliorer selon votre connexion et selon vos appareils. Il est donc intéressant que vous vous y intéressiez dans un second temps.

Il faut que Parsec soit démarré sur les deux machines et que vous vous soyez connecté (avec le même compte ou pas car il y a un système d’amis et de liens de partages, mais c’est plus simple avec le même compte puisque c’est pour un usage personnel).

Sur votre client, vous allez voir votre ordinateur hôte apparaitre dans la liste :

Vous allez pouvoir cliquer sur « Connect » (ou « Connecter »), et après un temps de chargement, ça y est vous êtes connecté et vous pouvez utiliser votre ordinateur à distance. En haut à gauche est présente une petite icône qui vous permet de changer quelques paramètres, passer en mode immersif, etc. Évitez de faire dis paître cette icône (il y a un bouton qui masque l’icône, évitez de l’utiliser), pour que le menu se ferme, il suffit de cliquer n’importe où sur l’écran autre que sur le menu que la petite icône a ouvert quand vous avez cliqué dessus. Si vous l’avez quand même fermé par mégarde, plusieurs solutions :

  • le raccourci pour se déconnecter, si vous vous en souvenez ou même mieux, le raccourci pour faire réapparaitre la petite icône ;
  • vous rendre sur internet et crier au secours auprès de google, le support (article) de parsec et les forums communautaires vous donneront des conseils (vous devriez trouver réponse à vos questions, ce logiciel a une communauté) ;
  • vous avez accès au logiciel sur l’hôte ! Et bien oui, vous avez tout le contrôle, et notamment le contrôle du logiciel, et si vous cliquez ici, vous pouvez vous kick :

Conclusion

Et bien voilà, il ne vous reste plus qu’à tout tester, c’est-à-dire éteindre votre ordinateur hôte, vous mettre en connexion 4G (par exemple), tenter de démarrer l’ordinateur, confirmer qu’il s’allume bien. Je vous conseille d’essayer lorsque vous mettez l’ordinateur en veille, puis lorsque vous l’arrêtez. Puis, assurez-vous à distance (ne touchez pas à l’ordinateur hôte, l’objectif est qu’il fasse tout les démarrages tout seul, comme si vous n’étiez pas devant l’ordinateur) que le logiciel Parsec a fini par se lancer et que l’ordinateur est bien affiché dans la liste des ordinateurs hôtes. Finalement, tentez de vous connecter, et si ça fonctionne, c’est gagné !

Merci d’avoir lu ce tutoriel, il reste la catégorie juste en dessous qui répertorie quelques problèmes, sinon je vous invite à rechercher méthodiquement sur internet ou demander à une intelligence artificielle de le faire pour vous.
Vous retrouverez les sources utilisées en dernière catégorie de cet article.

Si ça ne fonctionne pas…

S’il y a un ou plusieurs problèmes, tentez ces différentes solutions (une par une, dans l’ordre que vous voulez) :

  • Vérifier les paramètres dans le BIOS du PC, ainsi que les paramètres Windows ;
  • Vérifier les paramètres dans la box internet :
    • Changer le port ouvert en le remplaçant par le port que vous n’avez pas choisi entre 7 et 9 ;
    • Changer le protocole (Si vous avez choisi « UDP », mettez « les deux », si vous avez choisi « les deux », mettez « UDP ») ;
    • Vérifier que l’adresse IP de l’ordinateur ou le nom de l’ordinateur soit correct.e ;
    • Assurez-vous d’avoir bien suivi chaque étape des tutoriels vidéos ainsi que mes commentaires pour chacune d’entre-elles ;
  • Vérifier les informations indiquées dans le logiciel pour allumer votre ordinateur à distance :
    • Adresse MAC de l’ordinateur (que vous avez normalement noté) ;
    • L’adresse IP publique de votre box internet (celle qui vous identifie sur internet) : il est possible que l’adresse ait changé, rendez-vous sur ce site pour vous en assurer ;
  • Pour le moindre problème en rapport avec Parsec :
    • Rendez-vous sur le support (article) officiel
    • Le reddit
    • Chercher comme ceci une information :
      • Parsec [problème décrit en anglais, explication concise, qu’avec des mots clés] [Système d’exploiration]
      • Au pire demandez à une IA 😆 (Bing Copilot qui a accès à internet par exemple)
    • Si vous avez un problème d’écran noir quand vous vous connectez à un ordinateur à distance : ça ou ça

Sources

Tutoriels

Optimiser son code python

Vous cherchez à rendre l’affichage d’une image plus rapide ? où simplement, vous trouvez votre code un peu long à se faire ? Ici, nous nous plongerons dans l’art de perfectionner nos codes pour en maximiser l’efficacité. Vous trouverez ici des moyens de mieux utiliser certaines bibliothèques ou des alternatives à celle-ci.

Teaser du tutoriel

Kandinsky

Vous avez peut-être déjà remarqué que Kandinsky, bibliothèque utile pour dessiner en python, est très lent sur ordinateur. Mais l’avez-vous bien paramétré ? Et êtes-vous satisfait de sa rapidité ? Regardons ensemble comment y remédier.

Comment bien utiliser Kandinsky

Tout d’abord, regardons comment vous avez et pourrez paramétrer l’émulateur de Kandinsky. Pour vérifier ça, ouvrez votre IDE, lancez votre script.

vous partez donc de cela :

Ensuite suivez, ces indications :

tout d’abord allez dans le menu « Options » :

D’ici, vous pouvez :

  • avec l’onglet « OS », choisir l’os utilisé.
  • avec l’onglet « Model », choisir une version de la calculatrice Numworks, ici émulé.
  • avec l’onglet « Zoom », choisir la taille de la fenêtre.

Ici pour accélérer notre script, nous utiliserons l’OS « PC ».

Et voilà, déjà, votre script va bien plus vite sur votre ordinateur. Il est important de savoir que ce n’affecte pas la vitesse du script sur la calculatrice, mais seulement ici sur votre ordinateur.

Pillow, Kandinsky en plus rapide (et plus encore)

Vous trouvez encore votre script lent à l’exécution ? Alors voici la bibliothèque PIL. Avant de commencer, il est important de rappeler que Pillow n’est pas disponible sur Numworks là où l’est Kandinsky.

Comparatif de vitesse entre Pillow et Kandinsky

Pour analyser la vitesse de mes deux options, je vais utiliser le script disponible sur le tuto ici qui génère un « Julia set », et je le modifie pour qu’il utilise Pillow plutôt que Kandinsky.

Afin de chronométrer le temps de génération, j’ai rajouté la bibliothèque Time :

#si le script utilise Pillow
from PIL import Image
#si le script utilise Kandinsky
#import Kandinsky
import time

def julia_PIL(N_iteration):
    start_time = time.time()  # Enregistrez le temps de début

    # création de la palette de couleurs
    palette = []
    xmax = 2
    xmin = -2
    ymax = 1.3875
    ymin = -1.387
    r = 255
    g = 255
    b = 255
    for j in range(0, 128):
        b = 255 - 2 * j
        palette.append((r, g, b))
    for j in range(128, 256):
        r = 255 - 2 * (j - 128)
        g = 255 - 2 * (j - 128)
        palette.append((r, g, b))

    # Création de l'image avec Pillow (rien a mettre si on utilise Kandinsky)
    img = Image.new('RGB', (320, 222))

    #generation de la fractale
    for x in range(320):
        for y in range(222):
            i = 0
            z = complex(xmin + (xmax - xmin) * x / 320 + (ymax - (ymax - ymin) * y / 222) * 1J)
            c = complex(0.36, 0.36)
            while i < N_iteration and abs(z) < 2:
                i = i + 1
                z = z * z + c
            couleur = palette[int(255 * i / N_iteration)]

            # Avec Pillow : Définir la couleur du pixel dans l'image aux coordonnées (x,y)
            img.putpixel((x, y), couleur)
            # Avec Kandinsky : même but que Pillow
            #col = color(couleur[0],couleur[1],couleur[2])
            #set_pixel(x,y,col)

    # Affichage de l'image (rien a mettre si on utilise Kandinsky)
    img.show()

    end_time = time.time()  # Enregistrez le temps de fin
    elapsed_time = end_time - start_time
    print("Temps d'exécution : ",elapsed_time," secondes")

Ici, le script utilisant Kandinsky prend 3,25 secondes, celui avec Pillow prend 4,40 secondes quand je génère une fractale avec 1000 itérations. Mais il est plus lent ?!! en fait non, car Pillow, avec son .show() (ligne 40), doit ouvrir une nouvelle fenêtre photo, ce qui prend longtemps. Si à la place, on enregistre l’image et qu’on ne l’affiche pas, le script prend 0,39 seconde à s’exécuter. On rajoute donc ceci à notre script au même endroit que .show().

img.save('Julia.png')

L’image générée est enregistrée dans le même répertoire que le script, sous le nom « Julia.png » (le nom est modifiable à souhait).

Utilisations

De mon côté, j’ai utilisé le script modifié grâce à Pillow. Ainsi, je peux générer des images a très grand format et j’ai donc réalisé ceci, un « Julia set » en 8k en 211,25 secondes (ce qui est impossible avec Kandinsky, car la bibliothèque est limitée en 320p par 222p) :

En outre, je peux l’utiliser par exemple pour faire un explorateur de fractale sur des images plus petites que de la 8k quand même.

Si vous avez besoin de plus d’information, voici la documentation complète de Pillow, ici.

NumPy

NumPy est une bibliothèque python très utile dans le calcul de tableaux ou de matrices pour accélérer ces calculs ou simplifier la lecture du code grâce à ses fonctions directement implémentée comme la multiplication matricielle. C’est une bibliothèque très utilisée par exemple pour :

  • Calcul Scientifique : NumPy est largement utilisé dans le domaine scientifique pour la modélisation mathématique, les simulations numériques et l’analyse de données.
  • Apprentissage Automatique : De nombreuses bibliothèques d’apprentissage automatique, comme scikit-learn, utilisent NumPy pour la manipulation des données et les opérations numériques.
  • Traitement des Images et du Son : NumPy est souvent utilisé dans le traitement des images et des signaux sonores en raison de ses capacités à travailler avec des tableaux multidimensionnels.
  • Analyse de Données : Les analystes de données et les scientifiques des données utilisent NumPy pour effectuer des opérations numériques efficaces sur de grands ensembles de données.

Pourquoi utiliser les tableaux de NumPy plutôt que de simples listes ?

Les listes normales en Python sont des structures de données de base qui peuvent contenir des éléments de types différents. Elles offrent une grande souplesse, mais peuvent être moins performantes pour les opérations numériques sur de grands ensembles de données. D’un autre côté, les tableaux de NumPy (ou array) sont des structures de données spécialisées pour les calculs numériques qui offrent des performances optimisées.

En outre, voici quelques exemples montrant les différences entre les deux :

  • Type d’Éléments :
    • Liste : Peut contenir des éléments de différents types (entiers, chaînes de caractères, etc.).
    • Array : Contient des éléments d’un type de données homogène. Les Array sont typés, ce qui signifie que tous les éléments doivent être du même type.
  • Performance :
    • Liste : Moins efficace pour les opérations numériques sur de grands ensembles de données en raison de sa flexibilité.
    • Array : Conçu pour les calculs numériques, offrant des opérations vectorielles efficaces et des performances optimisées.
  • Fonctions et Opérations :
    • Liste : Offre des fonctionnalités de base pour la manipulation de données, mais peut nécessiter des boucles explicites pour certaines opérations numériques.
    • Array : Fournit une vaste gamme de fonctions optimisées pour les opérations numériques, y compris des opérations vectorielles, des fonctions mathématiques et des fonctions de statistiques.
  • Taille Dynamique :
    • Liste : La taille d’une liste peut changer dynamiquement en ajoutant ou en supprimant des éléments.
    • Array : La taille d’un Array est fixée à la création. Pour ajouter ou supprimer des éléments, un nouveau tableau doit être créé.
  • Syntaxe :
    • Liste : Définie avec des crochets, par exemple, ma_liste = [1, 2, 3]
    • Array : Créé avec la fonction numpy.array(), par exemple, mon_tableau = numpy.array([1, 2, 3])

Démonstration

Imaginons que nous devons faire des calculs sur des éléments d’une liste d’integer :

liste = [i for i in range(10000000)]
resultat = []
for nb in liste :
    resultat.append(nb ** 2)

Ici, on élève chaque élément de notre liste au carré, ce script prend 3,42 seconde. Avec NumPy, on peut faire ceci :

import numpy as np

arr = np.array([i for i in range(10000000)])
# Applique une fonction pour élever chaque élément de la liste au carré
result = np.square(arr)

Ici, le script prend 1,15 seconde, NumPy est utile pour gérer des tableaux de valeurs très grandes et appliquer des règles de calculs sur ces tableaux. Les array sont un nouveau type d’objet qui correspondent aux listes et matrices.

Fonctions natives intéressantes

NumPy offre un grand nombre de fonctions qui pourront simplifier la lecture de votre code et l’accélérer :

  • Produits de tous les éléments :
import numpy as np

liste = [1, 2, 3, 4, 5]

produit = np.prod(liste)
# renvoie donc avec un print ou un return 120
  • moyenne et écart-type :
import numpy as np

liste = [1, 2, 3, 4, 5]

moyenne = np.mean(liste)
# renvoie donc avec un print ou un return 3.0
ecart_type = np.std(liste)
# renvoie donc avec un print ou un return 1.4142135623730951
  • Chercher des éléments suivants une condition et liste des éléments unique de la liste
import numpy as np

#va renvoyer tous les éléments du tableau supérieur à 2 dans une nouvelle liste
liste_sat = [1, 2, 3, 4, 5]
elements_satisfaisants = np.extract(np.array(liste_sat) > 2, liste_sat)
# renvoie donc avec un print ou un return [3 4 5]

#va renvoyer tous les éléments uniques du tableau et leur nombre d'apparitions dans une nouvelle liste
liste_uni = [1, 2, 2, 3, 4, 4, 5]
elements_uniques, comptages = np.unique(liste_uni, return_counts=True)
# renvoie donc avec un print ou un return [1 2 3 4 5] [1 2 1 2 1]

Si vous avez besoin de plus d’information, voici la documentation complète de NumPy, ici.

Tutoriels

Comment installer et utiliser MicroPython sur un ESP32

  • par Robin C.

Dans le premier projet de l’année, nous avons eu la possibilité d’utiliser un ESP32. Cependant, il fallait que cet ESP32 utilise MicroPython pour que le projet soit valable. Nous verrons donc comment installer et utiliser MicroPython sur un ESP32.

Installation de MicroPython

Avant toute chose, il faut télécharger plusieurs fichiers :

  • Le logiciel qui va permettre de flasher ESP32. Le terme flasher correspond à mettre à jour, modifier le micrologiciel d’un appareil
  • Et le micrologiciel qui va être flashé dans l’ESP32
  • Un logiciel pour décompresser les fichiers

Pour cela il vous faut accéder à ce lien qui renvoie vers le site Github et c’est là où vous trouverez le micrologiciel.

Une fois sur cette page, il vous faut cliquer sur le bouton Code puis sur Download ZIP pour télécharger le micrologiciel en format compressé.

Il faut également télécharger le logiciel qui va permettre de flasher l’ESP32. Il vous faut donc accéder à ce lien pour le télécharger.

Pour avoir la bonne version du logiciel qui est compatible avec notre ESP32, il faut trier à gauche par ESP32-S3 :

La page va s’actualiser et vous n’aurez qu’à cliquer sur le bouton Download à côté de Flash Download Tools.

Vous avez donc téléchargé les deux fichiers nécessaires. Cependant il vous faut les décompresser. Pour cela il vous faut un logiciel pour décompresser comme 7zip.

Vous vous retrouverez donc avec deux dossiers comme ceci :

À partir de maintenant il faut que votre ESP32 soit connecté en USB à votre ordinateur.

Nous allons maintenant installer le nouveau micrologiciel dans votre ESP32, pour cela, dans le dossier flash_download_tool_3.9.5 exécutez le fichier flash_download_tool_3.9.5.exe.

Un invite de commande et une petite fenêtre s’ouvre. Nous allons nous intéresser à la petite fenêtre :

Il faut paramétrer la fenêtre selon votre ESP32, dans mon cas il s’agit d’un ESP32-S3 je sélectionne donc ESP32-S3 dans le ChipType et dans LoadMode il faut mettre USB comme l’ESP32est connecté en USB sur l’ordinateur.

Appuyez sur OK.

Dans cette fenêtre il faut cocher la première case et dans la même ligne cliquer sur les 3 points afin de sélectionner le nouveau micrologiciel. Le micrologiciel se trouve dans l’autre dossier st7789s3_mpy-main et dans le sous dossier firmware et il s’agit du fichier firmware.bin . Et à droite du @ il faut mettre un 0. Vous pouvez savoir si vous avez fait une erreur si une des cases est en rouge si par exemple le chemin vers le fichier est mauvais ou si le numéro n’est pas valide. Vous devriez avoir plus ou moins ceci :

Par la suite en bas à droite dans la catégorie COM il faut choisir le port correspondant à celui de votre ESP32. Si vous ne le connaissez pas il vous faut ouvrir le gestionnaire de périphériques, pour ce faire, appuyez sur le bouton Windows + r et écrivez devmgmt.msc pour ouvrir la fenêtre. Et dans la catégorie Port, il faut trouver le Périphérique série USB

Dans mon cas il s’agit du COM5 donc je renseigne le COM5 dans l’application et dans la catégorie BAUD il faut mettre à 9216000.

Vous devriez avoir la même chose sauf peut-être pour le COM et dans ce cas là avant d’appuyer sur START il faut mettre l’ESP32 en mode téléchargement, pour ça il faut appuyer en même temps sur le bouton de reset sur le côté et celui de boot, qui est le plus proche du bouton de reset, en commençant par appuyer sur le bouton reset. Après cela vous pouvez appuyer sur START et le téléchargement commencera.

Utilisation de MicroPython

Après avoir installé votre version de MicroPython vous avez probablement envie de l’utiliser. Et pour cela il vous faut un IDE comme Thonny mais il ne suffit pas de juste le démarrer, il faut configurer votre ESP32 dessus.

Pour configurer votre interpréteur afin d’utiliser l’ESP32 et non l’ordinateur il faut cliquer en bas à droite sur Python 3 local, qui correspond à votre python installé sur votre ordinateur. Cliquez ensuite sur Configurer l’interpréteur.

Dans le type d’interpréteur, il faut choisir MicroPython (ESP32) comme il s’agit d’un ESP32sous MicroPython. un nouveau paramètre apparait, il s’agit du port de l’ESP32 et il s’agit du même que sur le logiciel d’installation du micrologiciel sauf si vous avez changer de port l’ESP32. Vous devriez donc vous retrouver avec ceci :

Cliquez sur OK, la fenêtre va se fermer et retourner sur l’interface normal avec quelques changements sur ce qui est écrit dans la console et aussi en bas à droite dans l’interpréteur.

Vous pouvez taper help() pour avoir quelques informations mais vous y trouverez principalement de la documentation générique qui ne correspond pas forcément à l’ESP32, pour avoir quelque chose de plus détaillé, vous pouvez retourner sur le Github de la version du firmware, c’est en anglais mais vous aurez la documentation qui correspond le mieux à l’ESP32.

Conseils

Je vous conseille d’afficher les fichiers de l’ESP32, pour ça en haut dans affichage il faut cliquer sur Fichiers.

Cette fenêtre permet d’accéder aux fichiers présents sur l’ESP32, de les supprimer, de les télécharger ou de téléverser des fichiers de votre ordinateur vers l’ESP32.

Vous remarquerez deux fichiers importants : boot.py et main.py. Ces fichiers sont importants car ce sont des fichiers qui vont être exécutés automatiquement par l’ESP32 dès qu’il sera alimenté, dans ce cas, boot.py sera exécuté puis main.py dès que l’exécution de boot.py est terminée. Dans l’image ci-dessus les fichiers correspondent aux fichiers de ma Station Météo sur ESP32, le fichier boot est vide mais tout le code est contenu dans main.py, sachant que les autres fichiers sont soit des modules supplémentaires ou des images qui sont utilisés dans le code principal.

Également dans le dossier contenant le firmware soit st7789s3_mpy-main il y a un dossier exemples qui contient quelques exemples qui peuvent être utiles pour comprendre le fonctionnement des différentes fonctions et méthodes. Cela passe de l’affichage de l’heure, à de l’écriture, ou un jeu. Il y a aussi deux fichiers importants qui sont tft_buttons.py et tft_config.py qui sont les deux modules permettant de s’occuper de l’écran et des boutons et qui doivent donc être en tout temps dans l’ESP32.

Conclusion

Pour conclure, j’espère que ce tutoriel vous sera utile afin de comprendre le fonctionnement de MicroPython sur ESP32 et vous donnera envie d’en savoir plus sur ces derniers.

Tutoriels

Astuces et Conseils d’utilisation du logiciel PowerPoint

  • par Naël N.

PowerPoint, un outil incontournable dans le monde professionnel et éducatif, offre des possibilités infinies pour créer des présentations percutantes. Ce tutoriel explore des astuces pratiques et des conseils essentiels, visant à optimiser votre utilisation de PowerPoint. Découvrez comment tirer le meilleur parti de ce logiciel puissant pour captiver votre auditoire avec des diaporamas exceptionnels.

Introduction

Créer un diaporama à l’aide de PowerPoint présente de nombreux avantages pour communiquer de manière efficace et visuellement impactante. En utilisant cet outil de présentation, vous pouvez organiser vos idées de manière structurée, rendre des concepts complexes accessibles grâce à des images saisissantes, et captiver l’attention de votre auditoire grâce à des animations et des transitions fluides. Que ce soit pour des présentations professionnelles, des exposés scolaires ou des événements spéciaux, PowerPoint vous permet de créer des supports visuels soignés qui rendent l’information plus claire et mémorable. En résumé, l’efficacité de PowerPoint réside dans sa capacité à transformer des données brutes en présentations dynamiques et captivantes, adaptées à un large éventail d’auditoires.

Objectifs

Ce tutoriel vise à vous guider à travers une série d’astuces visant à transformer vos présentations avec PowerPoint en des chefs-d’œuvre visuels. L’accent est mis sur l’amélioration de l’aspect visuel, en explorant les subtilités des transitions, du formatage et des éléments visuels pour créer des diaporamas qui captivent l’œil. Fini les diaporamas ennuyeux ! En mettant l’accent sur la forme, vous apprendrez à choisir des designs percutants, tout en comprenant l’importance de l’organisation et de la structure pour un impact optimal. Ce tutoriel se penche également légèrement sur le fond, en vous aidant à optimiser vos choix de présentation, l’ordre des informations et les enchaînements pour créer des présentations qui non seulement attirent l’attention, mais aussi communiquent efficacement votre message. Transformez vos diaporamas en des expériences visuelles mémorables avec ces conseils pratiques.

ATTENTION

Ce tutoriel s’adresse en particulier aux personnes disposant de la version payante de Microsoft Office. Si vous possédez la version gratuite, certaines fonctionalités du logiciel comme l’application de transitions, utilisées dans ce tutoriel, ne vous seront pas disponibles. Si vous souhaitez acheter légalement Microsoft Office, les étapes à suivre :

Acheter Microsoft Office en ligne via le Microsoft Store

  1. Accès au Microsoft Store :
  2. Recherche de Microsoft Office :
    • Utilisez la barre de recherche en haut du site pour trouver « Microsoft Office ».
    • Sélectionnez la version que vous souhaitez acheter, par exemple « Microsoft 365 » (Si vous préférez une formule d’abonnement avec des mises à jour régulières) ou « Microsoft Office »
  3. Sélection du Produit :
    • Sur la page du produit, explorez les différentes options et caractéristiques.
    • Cliquez sur « Acheter » ou « Ajouter au panier » pour passer à la page de paiement.
  4. Ajout au Panier et Paiement :
    • Vérifiez votre panier pour vous assurer que vous avez la bonne version et la bonne quantité.
    • Cliquez sur « Acheter » ou « Passer à la caisse » pour démarrer le processus de paiement.
  5. Création d’un Compte Microsoft :
    • Si vous n’avez pas de compte Microsoft, suivez les étapes pour en créer un.
    • Si vous avez déjà un compte, connectez-vous.
  6. Paiement et Confirmation :
    • Choisissez votre méthode de paiement (carte de crédit, PayPal, etc.).
    • Suivez les instructions pour finaliser le paiement.
    • Vous devriez recevoir une confirmation de votre achat avec les détails de votre licence Office.

N’oubliez pas de conserver les informations de licence et de confirmation pour référence future. Vous pourrez ensuite télécharger et installer Microsoft Office sur votre ordinateur en utilisant les informations fournies après l’achat.

Modifier les paramètres de langue

Pour faciliter la compréhension de ce tutoriel, les captures d’écran inclues dans ce dernier seront effectuées sur le logiciel configuré intégralement en français. Si votre version du logiciel est pour quelconque raison paramétré dans une autre langue, par exemple parce que vous préferez comme moi utiliser le logiciel en anglais pour apprendre du vocabulaire tout en travaillant ; vous pouvez au choix suivre ce tutoriel sans modifier la langue, car cela ne changera pas la position des éléments sur les captures d’écran que vous pourrez donc repérer facilement, ou bien vous pouver suivre les étapes suivantes pour configurer PowerPoint en Français.

Lorsque vous ouvrez Microsoft PowerPoint, si vous n’avez aucun projet déjà ouvert, vous arrivez sur la page d’acceuil :

  • Sur la page d’acceuil, cliquez sur « Options » situé en bas à gauche
  • Sur le menu de gauche, cliquez sur « Langue »
  • Sélectionnez « Français » dans « Langue d’affichage d’Office » pour l’affichage les éléments d’utilisation du logiciel ET dans « Langues de création et vérification linguistique d’Office » si ce n’est pas déjà fait pour la langue dans laquelle vous allez écrire dans vos présentations
  • N’oubliez pas de cliquer sur « Définir comme langue par défaut » en haut et en bas (comme sur la capture ci dessous) pour enregistrer vos modification avant d’appuyer sur « OK »
  • Vous devez redémarrer PowerPoint pour appliquer les modifications (fermer le logiciel puis le démarrer à nouveau). Si vous avez des présentations en cours de développement, veillez à bien enregistrer votre travail avant de fermer.

Présentation de l’interface de PowerPoint.

Ouvrez une nouvelle présentation :

vous êtes accueilli par une interface conviviale conçue pour simplifier la création de présentations percutantes. Voici une brève visite de ses éléments clés :

  • Ruban :
    • Situé en haut de l’écran, le ruban est votre boîte à outils principale. Il regroupe toutes les fonctionnalités et commandes essentielles. Vous y trouverez des onglets tels que « Accueil », « Insertion », « Mise en page », etc., chacun offrant un ensemble spécifique d’outils.
  • Zone de Travail :
    • La zone centrale est votre toile virtuelle. C’est là que vous allez créer vos diapositives. Vous pouvez sélectionner différentes mises en page et ajouter du contenu comme du texte, des images, des formes et plus encore.
  • Volet des Diapositives :
    • À gauche, le volet des diapositives affiche une miniature de chaque diapositive de votre présentation. Cela facilite la navigation et la gestion de l’ordre des diapositives.
  • Volet des Notes :
    • En bas de l’écran, le volet des notes vous permet d’ajouter des annotations pour vous aider lors de la présentation. Ces notes ne sont pas visibles par le public, mais seulement par le présentateur.
  • Barre de Zoom :
    • En bas à droite de la zone de travail, cette barre permet d’ajuster le niveau de zoom pour affiner les détails de votre diapositive.

Cette disposition intuitive et organisée rend la navigation et la création de présentations fluides, que vous soyez un débutant ou un utilisateur expérimenté.

Avant de commencer à créer

Avant de plonger dans la création de vos diapositives, assurez-vous d’avoir une vision claire de ce que vous souhaitez accomplir. Prenez un moment pour définir l’objectif de votre présentation et le message que vous voulez transmettre. Considérez le ton approprié, qu’il soit informatif, persuasif ou éducatif, et ayez une idée générale de la structure que vous souhaitez donner à votre présentation.

En planifiant à l’avance, vous gagnerez du temps et maintiendrez une cohérence tout au long de votre diaporama. Pensez aux points clés que vous voulez mettre en avant, aux visuels qui appuieront votre propos, et à la manière dont vous souhaitez que votre public interagisse avec votre contenu.

Rappelez-vous que la clarté de votre message est essentielle. Privilégiez la simplicité et évitez la surcharge d’informations sur une seule diapositive. En gardant à l’esprit vos objectifs dès le départ, vous pourrez façonner une présentation qui non seulement répond à vos attentes mais captive également votre auditoire. Prenez le temps de planifier, puis plongez dans l’exploration des fonctionnalités de PowerPoint pour donner vie à votre vision.

Fonctionnalités de Base

Lorsque vous plongez dans les fonctionnalités de base de PowerPoint, vous découvrirez des outils essentiels pour donner vie à vos idées de manière simple et efficace :

  • Création d’une Diapositive :
    • Commencez par cliquer sur l’onglet « Accueil » dans le ruban.
    • Sélectionnez « Nouvelle Diapositive » pour ajouter une nouvelle toile à votre présentation.

Vous pourrez par la suite choisir parmi une variété de mises en page pour adapter la diapositive à vos besoins.

NB : Dans le cas où vous connaissez déjà le nombre de diapositives dont vous aurez besoin pour votre présentation, il est conseillé de les travailler une par une plutôt que de toutes les créer avant de les modifier (car cela pourrait par la suite vous compliquer la tâche lors de l’application de certaines transitions qui nécéssitent la duplication d’une slide existante).

  • Ajout de Texte, Images et Formes :
    • Utilisez la zone de travail centrale pour saisir du texte à l’aide de la boîte de texte (vous pouvez insérer une nouvelle zone de texte depuis l’onglet « Insertion » → « Zone de texte »).
    • Insérez des images en sélectionnant « Image » dans l’onglet « Insertion », et même des vidéos ou du son depuis la section « Médias ».
    • Intégrez des formes et des éléments graphiques pour dynamiser visuellement votre diapositive (Dans la section « Ilustrations », « Formes » ou « Icônes » par exemple).
    • Pour supprimer un élément, sélectionnez le puis appuyez sur la touche supprimer de votre clavier (attention si vous souhaiter supprimer une zone de texte à bien sélectionner la boîte et non le texte, le curseur ne doit pas apparaître sur votre texte)

Arrière-Plan

Une bonne présentation sur un fond blanc est une mauvaise présentation

Prenons une diapositive encore vide, vous pouvez modifier l’arrière plan via un clic droit sur le fond blanc par défaut puis cliquez sur « Mise en forme de l’arrière plan ». S’ouvre alors automatiquement la rubrique « Remplissage » du menu de mise en forme de l’arrière plan à droite de votre diapositive. Vous pouvez désormais modifier l’arrière plan, 4 options vous sont proposées :

  • Remplissage uni
  • Remplissage dégradé
  • Remplissage avec image ou texture
  • Motif de remplissage

Remplissage uni

C’est le réglage par défaut, pour un arrière plan d’une couleur uni, modifiable (pas forcément blanc). Vous pouvez régler la transparence avec la barre de pourcentage.

Remplissage dégradé

Cochez la case « Remplissage dégradé ». Vous pouvez alors opter parmi une sélection de dégradés prédéfinis ou bien créer le votre en ajustant des paramètres pour modifier son aspect : le type et l’orientation modifient la forme du dégradé ; pour modifier sa couleur, il vous faudra ajouter autant de points de dégradé que vous souhaitez de couleurs, cela va créer des bandes de couleurs que vous pouvez rapprocher ou espacer entre elles pour un effet plus au moins fondu.

Remplissage avec image ou texture

Cochez « Remplissage avec image ou texture » puis cliquez sur « Insérer… » puis « à partir d’un fichier » pour sélectionner dans votre dossier une image que vous avez par exemple téléchargé sur une banque d’images libres et gratuites ou bien sur « Presse-papier » si vous venez de copier une image

Motif de remplissage

Pour sélectionner parmi une large portée de motifs dont vous pouvez changer la ou les couleurs :

Vous pouvez désormais appliquer un arrière-plan original à votre présentation. N’oubliez pas que l’arrière-plan ne se règle qu’une fois (sur la première diapositive en principe) et s’applique à toute la présentation, il est déconseillé de le modifier au cours de celle-ci, sauf pour créer un effet voulu.

Jusqu’ici la prise en main reste assez intuitive, et il est facile de créer une présentation basique en utilisant juste les éléments que vous venez de voir. Voici un exemple de diapositive qu’un débutant pourrait produire sans plus de connaissance en explorant un peu le logiciel :

Astuces

Si vous n’aimez pas la forme d’une de vos images, vous pouvez lui donner par exemple un aspect rectangulaire avec des bords arrondis comme ci dessus. Pour cela insérez un rectangle aux coins arrondis (« Insertion »→ »Formes »→ »Rectangle : coins arrondis »)

Vous pouvez maintenant placer une forme où vous voulez sur votre diapositive et régler sa taille comme vous le souhaitez, en sachant que vous allez ensuite transformer cette forme en image. Pour cela, il faut suivre les mêmes étapes que pour l’arrière-plan : clic droit sur la forme, puis « Format de la forme », « Remplissage avec image ou texture » dans le menu de droite, cliquez sur « Insérer… » puis « à partir d’un fichier » pour sélectionner dans votre dossier une image que vous avez par exemple téléchargé sur une banque d’images libres et gratuites ou bien sur « Presse-papier » si vous venez de copier une image

Vous avez inséré une image de la forme souhaitée, vous pouvez ajuster les derniers réglages de forme, position, taille avec le curseur.

Astuces pour ajuster un objet (image, forme, boîte de texte, icône…)

  • Lorsque vous déplacez un objet :
    • Maintenez la touche Maj pour le déplacer uniquement dans le sens de la verticalité ou de l’horizontalité. Cela peut être très utile par exemple pour déplacer un objet entre deux diapositives tout en le gardant sur une même ligne.
    • Maintenez la touche ctrl pour dupliquer l’objet et le déplacer.
    • Combinez les deux, Maj + ctrl en déplaçant un objet pour aligner une copie.
  • Lorsque vous modifiez la taille d’un objet :
    • Maintenez la touche Maj pour conserver la forme (le rapport hauteur/largeur pour un rectangle par exemple) de votre objet.
    • Maintenez la touche ctrl pour conserver la position du centre de l’objet.
  • Lorsque vous créez un objet :
    • Maintenez la touche Maj en insérant un rectangle pour créer un carré, en insérant un ovale pour créer un cercle, en insérant un triangle pour le rendre équilatéral…

Exemple d’utilité de la touche Maj en déplaçant un objet entre deux slides :

Ici les chiffres sont dans la même zone de texte et alignés verticalement simplement à l’aide de retours à la ligne, en utilisant l’astuce et déplaçant la zone de texte vers le haut sur un même axe, je peut placer sur la prochaine diapositive le numéro 3 au même endroit que le numéro 2 l’était sur la précédente. Ce qui est utile car après application d’une transition (« morphose »), nous pourrons voir les chiffres se déplacer ; le numéro 2 sortant du champs vers le haut et le 3 arrivant par le bas de manière à ce que l’un laisse sa place à l’autre.

rendu après transition :

Transitions et Effets Sonores

Vous pouvez appliquer une transition à une diapositive pour la faire apparaître de manière animée. Lorsque vous ouvrez la section transition, le ruban vous propose une sélection de transitions, cliquez sur « Effets de transition » (indiqué sur la capture d’écran) pour toutes les affichez et explorez les différentes options pour trouver celle qui vous convient le mieux.

Vous pouvez utiliser une transition à chaque changement de diapositive, mais veillez à garder un enchaînement cohérent lorsque vous ajoutez du mouvement à votre présentation, et n’hésitez pas à vous amuser à multiplier les slides avec transitions pour des enchaînements plus fluides. Par exemple vous pouvez revenir à la slide précédente avant de passer à une nouvelle, mais attention si vous êtes passés de la slide A à la slide B avec une transition de la gauche vers la droite par exemple, il faudra inverser le sens si vous voulez retourner à la slide A, puis vous pouvez par exemple utiliser une autre transition de haut en bas ou morphose pour passer à la C. Exemple avec la transition cube : ouvrez « Effets de transition » (voir captures d’écran précédentes), sélectionnez « Cube », puis ouvrez « Option de l’effet » et choississez le sens d’apparition de votre diapositive. Répétez l’opération en choississant le sens inverse pour votre prochaine diapositive.

Vous pouvez ajouter un son à votre transition en cliquant sur « Son » puis sélectionnez un son proposé par le logiciel ou en importer un depuis votre ordinateur via « Autre son ». Vous pouvez également ajuster la durée de votre transition (au plus la durée sera courte au plus la transition sera rapide)

Vous pouvez très bien utiliser la même transition tout au long de votre présentation si cela rend bien, ou ne pas en utiliser à chaque changement de diapositive.

Il n’est pas non plus toujours nécéssaire d’ajouter du son à vos transitions, mais cela peut donner lieu à des effets agréables. Vous aussi pouvez jouer un audio en arrière plan pendant votre présentation (ou une partie) si vous le préferez, l’attention de votre auditoire pourrait ainsi être captivée, mais attention à ne pas la détourner avec une musique trop endiablée . Pour cela, retour dans le menu « Insertion », cliquez sur « Audio » → « Audio sur mon PC » puis choississez un morceau que vous avez téléchargée (Pixabay vous propose de télécharger des musiques gratuites et libres de droit) ou que vous avez vous même créé.

Une petite icône apparaîtra sur votre zone de travail, cliquez dessus et dirigez vous vers la section « Lecture » maintenant disponible et affichée en orange, puis cliquez sur « lire en arrière plan ». Inutile de reproduire cette opération pour toutes les diapositives, la lecture en arrière plan s’applique à toutes les diapositives.

Un dernier conseil

Lorsque vous créez une présentation, qu’elle soit professionnelle, éducative ou à but personnel ; amusez vous ! Prenez le temps d’explorer les différentes possibilités que vous offre le logiciel, et n’ayez pas peur de tenter de nouvelles choses, c’est comme ça que vous progresserez. Avec ce tutoriel et un peu de pratique, vous deviendrez vite capable de créer des présentations époustouflantes !