Support Cours Module Digital Skills Le Wagon
Support Cours Module Digital Skills Le Wagon
Support Cours Module Digital Skills Le Wagon
1. Introduction au coding
2. Analyse de données
Dr. Hanen GRICHI
1
Introduction au Coding
2
1. Introduction au Coding
Introduction
Entrer un URL
Sublime Text un outil qui permet d’éditer (écrire) les pages web
4
(codes sources)
1. Introduction au Coding
Introduction
5
1. Introduction au Coding
Introduction
6
1. Introduction au Coding
Introduction
dossier images.
o Ensuite, ouvrez le fichier index.html dans Google Chrome. Encore
8
1. Introduction au Coding
Introduction
9
1. Introduction au Coding
10
1. Introduction au Coding
Les bases du langage HTML
11
1. Introduction au Coding
Les bases du langage HTML
12
1. Introduction au Coding
Les bases du langage HTML
• Dans le <head>
Titre de la page
Information sur
la page
13
1. Introduction au Coding
Les bases du langage HTML
• Dans le <body>
Les titres
Titre principale
Sous Titre
Titre d’une section
Titre d’une sous section
14
1. Introduction au Coding
Les bases du langage HTML
• Dans le <body>
Les paragraphes
15
1. Introduction au Coding
Les bases du langage HTML
• Dans le <body>
La mise en page
• Dans le <body>
17
1. Introduction au Coding
Les bases du langage HTML
• Dans le <body>
18
1. Introduction au Coding
Les bases du langage HTML
• Dans le <body>
Les Images
19
1. Introduction au Coding
Les bases du langage HTML
• Dans le <body>
Les Liens
20
1. Introduction au Coding
Réalisez votre premier Profil !!!!!
21
1. Introduction au Coding
Les bases des feuilles de style CSS
o Permet de créer :
des présentations surprenantes,
des mises en pages très précises
22
1. Introduction au Coding
Les bases des feuilles de style CSS
23
1. Introduction au Coding
Les bases des feuilles de style CSS
Lorsque vous écrivez votre design dans un fichier CSS (comme style.css),
n'oubliez pas de lier ce fichier CSS dans le <head> de votre document
HTML comme ceci:
24
1. Introduction au Coding
Les bases des feuilles de style CSS
• La syntaxe de base
25
1. Introduction au Coding
Les bases des feuilles de style CSS
26
1. Introduction au Coding
Les bases des feuilles de style CSS
• Sélecteur de hiérarchie
27
1. Introduction au Coding
Les bases des feuilles de style CSS
• Sélecteur de groupe
28
1. Introduction au Coding
Les bases des feuilles de style CSS
29
1. Introduction au Coding
Les bases des feuilles de style CSS
30
1. Introduction au Coding
Ajouter des règles CSS simples pour concevoir les
polices et les couleurs de votre page de profil
!!!!!
31
1. Introduction au Coding
32
1. Introduction au Coding
Les structures avec DIV
Propriétés CSS
Marge Extérieur
o Largeur,
Marge Intérieur
o Hauteur,
o Marge intérieur
o Marge extérieur Hauteur
Largeur
33
1. Introduction au Coding
Les structures avec DIV
CSS Margin
Fait comme si
• margin-top est 25px (la marge supérieure)
CSS Margin
35
1. Introduction au Coding
Les structures avec DIV
CSS Padding
36
1. Introduction au Coding
Identifiant id
37
1. Introduction au Coding
Sélecteur de classe
De même, vous pouvez nommer plusieurs éléments HTML que vous souhaitez
concevoir à l'aide d'une classe.
Exemple:
Ensuite, vous pouvez sélectionner tous ces éléments avec le sélecteur de classe
dans le CSS
38
1. Introduction au Coding
Let’s Finish your Profile !!!!!
Dans ce défi, vous allez améliorer la structure de votre profil HTML avec <div> puis jouerez
avec les propriétés CSS sur ces divisions (marge / padding / width / background-color / box-
shadow / border) pour les rendre plus lisses 😎 . À la fin de ce défi, votre profil devrait
ressembler à ceci:
39
1. Introduction au Coding
Let’s Finish your Profile !!!!!
Tout d'abord, dessinez le div
Avant d'écrire un code HTML, un bon concepteur Web commence toujours par dessiner la
structure <div> de la page sur une feuille de papier. Pour notre profil, cette structure
ressemble à ceci:
40
1. Introduction au Coding
Let’s Finish your Profile !!!!!
41
1. Introduction au Coding
Construire un conteneur réactif
43
1. Introduction au Coding
Soumettez votre profil, enfin!
44
1. Introduction au Coding
Soumettez votre profil, enfin!
45
1. Introduction au Coding
Soumettez votre profil, enfin!
•Toutes nos félicitations! Vous êtes prêt à créer votre tout premier référentiel sur
GitHub.
•Appelons ce référentiel mon profil lors du choix d'un nom du dossier:
46
1. Introduction au Coding
Soumettez votre profil, enfin!
•Gardons l'option Public cochée. Vous ne souhaitez pas rendre ce dépôt privé, sinon
vous ne pourrez pas le publier en ligne! Pas besoin d'initialiser ce référentiel avec un
README, laissez-le vide et cliquez sur 👉 Create repository
47
1. Introduction au Coding
Soumettez votre profil, enfin!
•Bien joué! Maintenant que vous avez créé un référentiel sur Github pour votre profil,
vous devez y mettre votre code! Très facile:
•Cliquez simplement sur télécharger un fichier existant dans le menu.
48
1. Introduction au Coding
Soumettez votre profil, enfin!
Faites glisser et déposez les fichiers style.css, index.html et le dossier images. Veillez
à le faire de la même manière que ci-dessous Vous ne devez pas glisser-déposer le
dossier my-profile mais les fichiers et les dossiers qui se trouvent à l'intérieur 😌
49
1. Introduction au Coding
Soumettez votre profil, enfin!
50
1. Introduction au Coding
Soumettez votre profil, enfin!
Faites défiler jusqu'à la section Github Pages des paramètres et enregistrez la branche
principale. C'est tout ce que vous devez faire, normalement Github générera l'URL
automatique de votre site Web et vous la donnera comme ci-dessous
Le but est de créer une bibliothèque d’objets réutilisable, pour ce la, nous
réorganisons le fichier style.css en un ensemble de fichiers. Notant que chaque
fichier définit le style d’un objet qui sera utilisé après.
L’ensemble des fichiers seront organisé comme suit:
53
1. Introduction au Coding
bibliothèque de composants d'interface utilisateur en CSS.
Dans le fichier de code HTML nous devons définir des conteneurs en utilisant la
balise <div>
54
1. Introduction au Coding
bibliothèque de composants d'interface utilisateur en CSS.
Ensuite, il est très facile d'écrire le code HTML, il vous suffit de traduire vos dessins
en HTML:
55
1. Introduction au Coding
Coder une carte avec flexbox
56
1. Introduction au Coding
Coder une carte avec flexbox
57
1. Introduction au Coding
Coder une carte avec flexbox
58
1. Introduction au Coding
Coder une carte avec flexbox
59
1. Introduction au Coding
60
Analyse de données
61
2. Analyse de données
Base de données (BD)
Un ensemble de données structurées et inter-corrélées, enregistrées avec le
minimum de redondance et pouvant être traitées par une ou plusieurs
applications, de façon optimale. La BD contient également la description de ses
données.
63
2. Analyse de données
Architecture du SGBD
SGBD BD
64
2. Analyse de données
Cycle de vie d’une base de données
Personne Schéma conceptuel
Voiture
Personne conduit Voiture
Monde réel
Concepteur Table Personne
Table Voiture
Table Conduit
BD …
Voiture
Personne
Ford KA
Dupont
Durant
Peugeot Schéma logique
106
Utilisateurs Rochat Toyota
… yaris
…
65
2. Analyse de données
Définition d'une base de données relationnelle
– Une clé primaire est essentiellement représentée par l'identifiant de champ d'une table.
– Une clé étrangère est une référence, dans une table donnée, à un enregistrement d'une
autre table.
66
2. Analyse de données
Définition d'une base de données relationnelle
67
2. Analyse de données
Définition d'une base de données relationnelle
68
2. Analyse de données
Les Requêtes SQL
• Opérations de base
– select, insert, update, delete
• Opérations complémentaires
– définition et modification de schémas,
– définition de contraintes d'intégrité,
– définition de vues,
– accord des autorisations,
– gestion de transactions.
70
2. Analyse de données
Les Requêtes SQL
Projection
FROM [Clients];
72
2. Analyse de données
Les Requêtes SQL
Projection
SELECT *
FROM [VOYAGES];
73
2. Analyse de données
Les Requêtes SQL
Projection
Sélectionner quelques champs de la table en faisant un tri (dans le but d’ordonner le résultat)
74
2. Analyse de données
Les Requêtes SQL
Projection
Sélectionner quelques champs de la table en remplaçant les intitulés des champs par d’autre
Sélection
SELECT *
FROM [Clients]
WHERE [Ville_client]="PARIS"
ORDER BY [Nom_client];
76
2. Analyse de données
Les Requêtes SQL
Sélection
ORDER BY [CP_agence]; 77
2. Analyse de données
Les Requêtes SQL
Sélection
SELECT *
FROM [Clients]
ORDER BY [Nom_client];
78
2. Analyse de données
Les Requêtes SQL
Sélection
FROM [CLIENTS]
79
2. Analyse de données
Les Requêtes SQL
Sélection
SELECT [Nom_voyage]
FROM [Voyages]
ORDER BY [Nom_voyage];
80
2. Analyse de données
Les Requêtes SQL
Sélection
Calculs
FROM Voyages;
82
2. Analyse de données
Les Requêtes SQL
Calculs
FROM Voyages;
83
2. Analyse de données
Les Requêtes SQL
Calculs
Afficher le Nombre de clients (le résultat doit être stocké sous l’intitulé Nombre de clients
Net_Provence)
84
2. Analyse de données
Les Requêtes SQL
Calculs
FROM [Voyages];
85
2. Analyse de données
Les Requêtes SQL
Jointure
Jointure
Jointure
Total des places proposées par agence
GROUP BY [Nom_agence]; 88
2. Analyse de données
Les Requêtes SQL
Syntaxe :
89
2. Analyse de données
Les Requêtes SQL
90
2. Analyse de données
Les Requêtes SQL
INSERT
Insertion de lignes dans une table
Via formulaire où via requêtes
UPDATE
Modification de lignes dans une table
DELETE
Modification de lignes dans une table
91
2. Analyse de données
Les Requêtes SQL
INSERT INTO ETUDIANT (NE, NOM, PRENOM, VILLE, AGE) VALUES (112,
‘MARTIN’, ‘THOMAS’ , ‘VERSAILLES’, 20)
92
2. Analyse de données
Extraction des données
Application
Vous allez prendre en charger une base de données afin d’écrire vos requêtes SQL pour
répondre aux questions.
Dans cet exercice, vous allez charger la même base de données restaurants.sqlite afin
d'écrire vos premières requêtes SQL!
Dans ce but, vous devez suivre cette configuration rapide afin de: Téléchargez la base de
données restaurants.sqlite, Chargez cette base de données de restaurants dans SQL
Online.
Allons-y! 🙌 93
2. Analyse de données
Extraction des données
Application
Vous allez prendre en charger une base de données afin d’écrire vos requêtes SQL pour
répondre aux questions.
Dans cet exercice, vous allez charger la même base de données restaurants.sqlite afin
d'écrire vos premières requêtes SQL!
Dans ce but, vous devez suivre cette configuration rapide afin de: Téléchargez la base de
données restaurants.sqlite, Chargez cette base de données de restaurants dans SQL
Online.
Allons-y! 🙌 94
2. Analyse de données
Extraction des données
Application
• Setup
Télécharger la base de
données restaurants.sqlite.
(https://github.com/lewagon/sql
sprint/raw/master/restaurants.sqlite)
• SQL Online:
Go to SQL Online. (SQL Online IDE – for
Data Science (sqliteonline.com)
95
2. Analyse de données
Extraction des données
Application
96
2. Analyse de données
Extraction des données
Application
97
2. Analyse de données
Extraction des données
Application
98
2. Analyse de données
99
2. Analyse de données
Python un nouveau langage pour les données
oExcel est le logiciel d'analyse de données le plus utilisé au monde. Parce qu'il
est facile à utiliser et vous permet d'explorer et d'analyser rapidement les
données
oPython est très puissant et, une fois que vous l'avez appris, offre des
possibilités presque illimitées!
100
2. Analyse de données
Python un nouveau langage pour les données
o Vous pouvez simplement charger tout votre ensemble de données dans une
variable. Cet ensemble de données peut être énorme et contient des millions
d’enregistrements (vous n’avez pas les mêmes limitations que dans Excel) mais tout
ce que vous voyez est cette variable simple qui est très facile à manipuler. Cela vous
permet d'effectuer de nombreuses opérations et manipulations puissantes sur vos
données sans vous perdre comme vous le feriez dans Excel. 101
2. Analyse de données
Python un nouveau langage pour les données
o Les calculs lourds sont plus rapides en Python. En outre, Python propose un large
éventail de fonctions et de bibliothèques pour effectuer des opérations avancées par
rapport à Excel. Par exemple, il existe même des bibliothèques qui intègrent l'IA
(Intelligence Artificielle) et l'apprentissage automatique, permettant aux utilisateurs
de Python de créer des modèles prédictifs et de prévision dont les utilisateurs
d'Excel ne pouvaient que rêver!
102
2. Analyse de données
Python un nouveau langage pour les données
103
2. Analyse de données
Python un nouveau langage pour les données
104
2. Analyse de données
Python un nouveau langage pour les données
o Si vous êtes coincé dans Python, s'il y a un problème avec votre code ou si vous ne
savez pas comment faire quelque chose (par exemple comment générer un
graphique), il existe une communauté très active qui s'entraide et contribue
continuellement améliorer les connaissances collectives.
o Exemple 👉 Stack Overflow est l'une des plus grandes communautés en ligne où les
gens posent leurs questions et reçoivent des réponses de la communauté.
105
2. Analyse de données
Python un nouveau langage pour les données
106
2. Analyse de données
Python un nouveau langage pour les données
Les variables
oPour stocker et réutiliser des valeurs en mémoire, nous utilisons des variables, comme
ici pour stocker un nom de ville:
city = "Paris"
107
2. Analyse de données
Python un nouveau langage pour les données
Les fonctions
o Les fonctions peuvent exécuter du code pour effectuer certaines opérations de base, ici
nous voulons connaître le nombre de caractères dans le mot "Paris":
len("Paris")
Vous pouvez trouver d'autres exemples de fonctions intégrées dans la documentation officielle de Python.
108
2. Analyse de données
Python un nouveau langage pour les données
Les Objets
o Stocké dans des variables. Nous pouvons appeler des méthodes (~ fonctions) sur eux.
name = " boris "
name.capitalize()
Certaines méthodes peuvent être appelées avec des arguments, comme ici où nous
voulons tester si un nom se termine par la lettre «s»:
name.endswith(" s" )
109
2. Analyse de données
Analyse de données
o Les données peuvent être trouvées en ligne, sur Internet ou sur le serveur de votre
entreprise.
o Il peut s'agir d'une simple base de données relationnelle et vous y avez accès Il est
accessible à l'aide de services tels que Google BigQuery ou un autre fournisseur
d'entrepôt de données
o Vous pouvez simplement les extraire de n'importe quel site Web, c'est ce que nous
appelons le Web Scraping.
o Si vous souhaitez jouer avec des données, vous pouvez trouver des exemples d'ensemble
de données ici:
o Google Dataset Search(https://datasetsearch.research.google.com/)
110
o Kaggle (https://www.kaggle.com/)
2. Analyse de données
Analyse de données
La bibliothèque Pandas