devweb Flashcards
Algorithmique
L’algorithmique est l’art de concevoir des algorithmes, c’est-à-dire des séries d’étapes logiques et ordonnées permettant de résoudre un problème ou d’accomplir une tâche spécifique. Un algorithme est une séquence finie d’instructions claires et précises, exécutables par une machine (comme un ordinateur), pour parvenir à un résultat ou une solution.
Programmation
La programmation consiste à écrire des instructions dans un langage informatique spécifique pour implémenter des algorithmes. Cela permet de créer des logiciels, des applications ou des scripts que les ordinateurs peuvent exécuter. En somme, la programmation est le processus de traduire des algorithmes en code informatique.
Strucuture d’une page web
La structure de base d’une page web est composée de HTML (HyperText Markup Language).
```html
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Titre de la page</title>
</head>
<body>
<h1>Bienvenue sur ma page web</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>
~~~
-
<!DOCTYPE html>
: Indique le type de document et la version de HTML utilisée. -
<html>
: L’élément racine qui englobe tout le contenu de la page web. -
<head>
: Contient des informations méta sur la page (comme le titre, les encodages de caractères, les liens vers les feuilles de style, etc.).-
<meta charset="UTF-8">
: Définit le jeu de caractères pour la page web. -
<title>
: Le titre de la page, affiché dans l’onglet du navigateur.
-
-
<body>
: Contient le contenu visible de la page web.-
<h1>
: Un titre principal. -
<p>
: Un paragraphe de texte.
-
Mise en forme et disposition des pages web
```html
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Ma Page Web</title>
<link></link>
</head>
<body>
<h1>Bienvenue</h1>
<p>Paragraphe de texte.</p>
<div>
<div>Boîte 1</div>
<div>Boîte 2</div>
<div>Boîte 3</div>
</div>
<div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
#### CSS pour styliser et disposer ```css /* Styles de base */ body { font-family: Arial, sans-serif; margin: 20px; } h1 { color: #333; text-align: center; } p { color: #666; font-size: 16px; } /* Disposition avec Flexbox */ .flex-container { display: flex; justify-content: space-around; margin-top: 20px; } .box { background-color: #f0f0f0; padding: 20px; width: 100px; text-align: center; border: 1px solid #ccc; border-radius: 5px; } /* Disposition avec Grid */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; } .grid-item { background-color: #f0f0f0; padding: 20px; text-align: center; border: 1px solid #ccc; border-radius: 5px; }
-
HTML :
- Structure : Comprend un titre, un paragraphe, un conteneur Flexbox et un conteneur Grid.
-
CSS :
- Styles de base : Définit la police, les marges et les couleurs de base.
-
Flexbox :
- Utilisé pour disposer les boîtes dans
.flex-container
. -
display: flex
: Active Flexbox. -
justify-content: space-around
: Distribue les boîtes avec un espace égal entre elles.
- Utilisé pour disposer les boîtes dans
-
Grid :
- Utilisé pour disposer les éléments dans
.grid-container
. -
display: grid
: Active CSS Grid. -
grid-template-columns: repeat(3, 1fr)
: Crée trois colonnes de largeur égale. -
gap: 10px
: Ajoute un espace de 10 pixels entre les éléments.
- Utilisé pour disposer les éléments dans
En utilisant Flexbox et Grid, vous pouvez créer des mises en page flexibles et réactives, adaptées à différents besoins de conception.
Sélecteurs, propriétés et valeurs
Les sélecteurs sont utilisés pour cibler les éléments HTML que vous souhaitez styliser.
-
Sélecteur de type :
- Cible tous les éléments d’un type donné.
css p { color: blue; }
- Applique une couleur bleue à tous les paragraphes
<p>
.
- Cible tous les éléments d’un type donné.
-
Sélecteur de classe :
- Cible tous les éléments avec une classe spécifique.
css .box { background-color: lightgrey; }
- Applique un fond gris clair à tous les éléments avec la classe
box
.
- Cible tous les éléments avec une classe spécifique.
-
Sélecteur d’identifiant (ID) :
- Cible un élément unique avec un identifiant spécifique.
css #header { font-size: 24px; }
- Applique une taille de police de 24 pixels à l’élément avec l’ID
header
.
- Cible un élément unique avec un identifiant spécifique.
-
Sélecteur universel :
- Cible tous les éléments.
```css - {
margin: 0;
padding: 0;
}
``` - Supprime les marges et les espacements par défaut de tous les éléments.
- Cible tous les éléments.
-
Sélecteur descendant :
- Cible les éléments descendants d’un autre élément.
css .container p { color: green; }
- Applique une couleur verte aux paragraphes
<p>
qui sont des descendants de l’élément avec la classecontainer
.
- Cible les éléments descendants d’un autre élément.
Les propriétés et valeurs définissent le style appliqué aux éléments sélectionnés.
-
Couleur du texte :
css color: blue;
- La propriété
color
définit la couleur du texte, ici bleue.
- La propriété
-
Taille de la police :
css font-size: 16px;
- La propriété
font-size
définit la taille de la police, ici 16 pixels.
- La propriété
-
Fond :
css background-color: lightgrey;
- La propriété
background-color
définit la couleur de fond, ici gris clair.
- La propriété
-
Marges :
css margin: 20px;
- La propriété
margin
définit l’espace extérieur autour d’un élément, ici 20 pixels sur tous les côtés.
- La propriété
-
Espacement intérieur (padding) :
css padding: 10px;
- La propriété
padding
définit l’espace intérieur autour du contenu d’un élément, ici 10 pixels sur tous les côtés.
- La propriété
Voici un exemple combinant différents sélecteurs, propriétés et valeurs.
```html
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Exemple CSS</title>
<link></link>
</head>
<body>
<div>
<h1>Bienvenue</h1>
</div>
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</div>
</body>
</html>
#### CSS (styles.css) ```css /* Sélecteur d'identifiant */ #header { background-color: lightblue; padding: 10px; } /* Sélecteur de classe */ .title { color: white; text-align: center; } /* Sélecteur descendant */ .container p { color: green; font-size: 18px; margin: 10px 0; } /* Sélecteur universel */ * { box-sizing: border-box; }
-
#header : Cible l’élément avec l’ID
header
et applique un fond bleu clair et un padding de 10 pixels. -
.title : Cible tous les éléments avec la classe
title
, change la couleur du texte en blanc et centre le texte. -
.container p : Cible les paragraphes descendants de l’élément avec la classe
container
, change la couleur du texte en vert, définit la taille de la police à 18 pixels et ajoute une marge verticale de 10 pixels. -
*
: Cible tous les éléments et applique la propriétébox-sizing: border-box
, ce qui inclut le padding et la bordure dans la largeur et la hauteur totales de l’élément.
SASS
Les préprocesseurs CSS comme Sass ajoutent des fonctionnalités avancées au CSS standard, facilitant la gestion et l’écriture des feuilles de style.
- Variables : Stockent des valeurs réutilisables.
- Nesting (Imbrication) : Simplifient l’écriture de sélecteurs imbriqués.
- Partials et Imports : Divisent le CSS en fichiers plus petits et gérables.
- Mixins : Définissent des groupes de styles réutilisables.
- Fonctions et Opérations : Effectuent des calculs et manipulations de valeurs.
```scss
// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Arial, sans-serif;
// Mixin pour boutons
@mixin button-styles($color) {
background-color: $color;
border: none;
padding: 10px 20px;
color: white;
border-radius: 5px;
cursor: pointer;
&:hover { background-color: darken($color, 10%); } }
// Styles de base
body {
font-family: $font-stack;
margin: 0;
padding: 0;
}
h1 {
color: $primary-color;
text-align: center;
}
.container {
padding: 20px;
p { color: $secondary-color; font-size: 16px; margin-bottom: 10px; } }
.button-primary {
@include button-styles($primary-color);
}
.button-secondary {
@include button-styles($secondary-color);
}
~~~
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3498db;
text-align: center;
}
.container {
padding: 20px;
}
.container p {
color: #2ecc71;
font-size: 16px;
margin-bottom: 10px;
}
.button-primary {
background-color: #3498db;
border: none;
padding: 10px 20px;
color: white;
border-radius: 5px;
cursor: pointer;
}
.button-primary:hover {
background-color: #2a80b9;
}
.button-secondary {
background-color: #2ecc71;
border: none;
padding: 10px 20px;
color: white;
border-radius: 5px;
cursor: pointer;
}
.button-secondary:hover {
background-color: #27ae60;
}
~~~
-
Installation : Installez Sass via npm ou yarn.
sh npm install -g sass
-
Compilation : Compilez les fichiers SCSS en CSS.
sh sass style.scss style.css
Sass améliore l’efficacité et la maintenabilité des styles CSS, rendant le développement de grandes applications web plus gérable et modulaire.
Bootstrap
Bootstrap est un cadre CSS open-source qui facilite la création de sites web réactifs et esthétiques. Il offre une collection d’outils et de composants prêts à l’emploi pour la mise en page, la typographie, les formulaires, les boutons, les modèles de navigation et bien plus encore.
- Grille Réactive : S’adapte dynamiquement à différentes tailles d’écrans.
- Composants Prêts à l’Emploi : Boutons, formulaires, modèles de navigation, etc.
- Typographie et Mise en Page : Système de grille flexible et classes utilitaires pour un contrôle précis.
- Personnalisable : Possibilité de personnaliser le thème et les composants.
- Documentation Complète : Guides détaillés et exemples pour une utilisation facile.
```html
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<meta></meta>
<title>Bootstrap Example</title>
<link></link>
</head>
<body>
<div>
<h1>Bienvenue sur mon site Bootstrap</h1>
<p>Ceci est un paragraphe de texte.</p>
<button>Bouton Primaire</button>
<button>Bouton Secondaire</button>
</div>
</body>
</html>
~~~
-
Grille Réactive :
- Utilisez des classes comme
.container
pour envelopper le contenu et.row
avec.col-*
pour la mise en page.
- Utilisez des classes comme
-
Composants Prêts à l’Emploi :
- Utilisez des classes comme
.btn
pour les boutons prédéfinis avec différents styles.
- Utilisez des classes comme
-
Typographie et Mise en Page :
- Utilisez des classes utilitaires comme
.text-center
pour centrer le texte et.container
pour le centrage et le rembourrage du contenu.
- Utilisez des classes utilitaires comme
-
Personnalisation :
- Personnalisez le thème en remplaçant les classes de couleur de Bootstrap ou en utilisant Sass pour une personnalisation plus avancée.
-
Documentation :
- Consultez la documentation officielle de Bootstrap pour des guides détaillés et des exemples d’utilisation.
Bootstrap est un cadre CSS puissant et largement utilisé qui accélère le processus de développement web en fournissant des composants prêts à l’emploi et une mise en page réactive. Son utilisation est répandue dans l’industrie pour créer des sites web esthétiques et fonctionnels.
Javascript
JavaScript est un langage de programmation utilisé pour rendre les sites web interactifs et dynamiques. Il est largement utilisé pour ajouter des fonctionnalités telles que la validation de formulaire, les animations, les calculs en temps réel et bien plus encore.
Le Document Object Model (DOM) est une représentation hiérarchique des éléments HTML d’une page web, organisée sous forme d’arbre. En utilisant JavaScript, vous pouvez accéder et manipuler ces éléments pour modifier le contenu, le style et le comportement de la page web en temps réel.
JavaScript offre plusieurs mécanismes pour effectuer des tests et vérifications conditionnelles dans votre code.
-
Instructions conditionnelles (if/else) :
javascript if (condition) { // Code exécuté si la condition est vraie } else { // Code exécuté si la condition est fausse }
-
Opérateur ternaire :
javascript condition ? expression1 : expression2;
-
Instructions switch :
javascript switch (expression) { case valeur1: // Code exécuté si l'expression correspond à valeur1 break; case valeur2: // Code exécuté si l'expression correspond à valeur2 break; default: // Code exécuté si aucune des valeurs ne correspond }
Un “boilerplate” est un modèle de base que vous pouvez utiliser pour démarrer rapidement un projet JavaScript. Voici un exemple de boilerplate simple :
```html
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<meta></meta>
<title>JavaScript Boilerplate</title>
</head>
<body>
<h1>Bienvenue sur ma page web</h1>
<button>Cliquez-moi</button>
<script> // JavaScript code goes here document.getElementById("myButton").addEventListener("click", function() { alert("Vous avez cliqué sur le bouton !"); }); </script>
</body>
</html>
~~~
Ce boilerplate HTML contient une structure de base avec un titre, un bouton et une balise script pour inclure du code JavaScript. Le JavaScript fourni ajoute un événement de clic au bouton qui affiche une alerte lorsque le bouton est cliqué.
JavaScript est un langage polyvalent et puissant utilisé pour créer des applications web interactives. En utilisant le DOM, les tests conditionnels et les boilerplates, vous pouvez commencer à développer des fonctionnalités dynamiques pour vos projets web.
React
React.js est une bibliothèque JavaScript open-source développée par Facebook, utilisée pour la création d’interfaces utilisateur (UI) interactives et dynamiques. Voici un résumé des principaux concepts de React.js :
React.js se base sur la création de composants réutilisables qui représentent des parties de l’interface utilisateur. Les composants sont des blocs de construction autonomes qui encapsulent la logique, le style et la structure. Ils peuvent être imbriqués les uns dans les autres pour former des interfaces complexes.
React utilise un concept appelé Virtual DOM (Document Object Model virtuel) pour améliorer les performances des applications. Plutôt que de manipuler directement le DOM du navigateur, React crée une représentation virtuelle de l’interface utilisateur en mémoire. Lorsqu’un composant change, React compare le Virtual DOM actuel avec la version précédente, puis met à jour uniquement les parties modifiées du DOM réel, minimisant ainsi les opérations coûteuses sur le DOM réel.
React utilise JSX (JavaScript XML) pour définir la structure des composants. JSX est une syntaxe similaire à XML qui permet d’écrire du code HTML directement dans JavaScript. Cela rend la création d’interfaces utilisateur plus intuitive et facilite la gestion des composants.
React suit un flux de données unidirectionnel, ce qui signifie que les données circulent dans une seule direction, du composant parent vers les composants enfants. Cela rend le code plus prévisible et plus facile à déboguer.
React est souvent utilisé avec d’autres outils et bibliothèques pour créer des applications web complètes. Parmi les plus populaires figurent React Router pour la gestion des routes, Redux pour la gestion de l’état, Axios pour les requêtes HTTP, et bien d’autres.
React.js est largement utilisé dans l’industrie pour créer des applications web modernes et performantes. Sa flexibilité, sa réactivité et son écosystème riche en font un choix populaire pour les développeurs à la recherche d’une solution pour construire des interfaces utilisateur complexes et dynamiques.
API test, etc
-
Bases de données :
- SQL pour les bases de données relationnelles avec une structure tabulaire.
- NoSQL pour les bases de données non relationnelles avec une structure plus flexible.
-
API (Application Programming Interface) :
- REST pour concevoir des API web simples et évolutives.
- GraphQL pour permettre aux clients de demander exactement les données dont ils ont besoin.
-
Contrôle de version :
- Git pour suivre les modifications du code, avec des commandes comme commit, push, et pull.
- Plateformes comme GitHub, GitLab et Bitbucket pour héberger des dépôts Git.
-
Outils de développement et environnements :
- IDEs comme Visual Studio Code et WebStorm pour écrire du code.
- Ligne de commande pour exécuter des commandes système.
- Outils de build et de gestion de dépendances comme npm, yarn et Webpack pour automatiser les tâches de développement.
-
Tests :
- Tests unitaires avec des frameworks comme Jest et Mocha pour tester des unités de code.
- Tests fonctionnels/end-to-end avec des outils comme Cypress et Selenium pour tester le comportement complet de l’application.
- TDD (Test-Driven Development) pour écrire des tests avant d’écrire du code.
-
Sécurité web :
- Protéger contre les vulnérabilités courantes telles que XSS, CSRF et les injections SQL.
- Utiliser HTTPS et SSL/TLS pour sécuriser les communications.
- Authentification et autorisation avec des protocoles comme OAuth et JWT.
-
Performances et optimisation :
- Optimisation du chargement des pages avec des techniques comme le lazy loading et la minification.
- Utilisation de CDN (Content Delivery Network) pour distribuer le contenu plus efficacement.
- Utilisation de techniques de cache telles que Service Workers et caching HTTP pour améliorer les performances.
-
Responsive Design :
- Techniques de design adaptatif pour rendre les sites web utilisables sur différents appareils.
- Utilisation de media queries en CSS et de frameworks CSS comme Bootstrap et Tailwind CSS pour faciliter la conception responsive.
-
Accessibilité web (a11y) :
- Pratiques pour rendre les sites web accessibles aux personnes handicapées.
- Utilisation d’ARIA pour améliorer l’accessibilité des applications web.
- Réalisation de tests d’accessibilité pour identifier et corriger les problèmes.
-
Déploiement et hébergement :
- Hébergement de sites web sur des serveurs ou des services de cloud comme AWS et Azure.
- Utilisation de CI/CD pipelines pour automatiser le déploiement continu.
- Utilisation de serveurs web comme Apache et Nginx pour servir des applications web.
Merise
La méthode Merise est une approche utilisée pour concevoir et gérer des systèmes d’information. Voici un résumé simplifié de ses principaux concepts :
- Modèle conceptuel des données (MCD) : Une représentation des informations importantes de l’entreprise, organisée sous forme d’entités (choses ou personnes) et de relations (liens entre ces entités).
- Modèle logique des données (MLD) : Une traduction du MCD en un schéma logique qui peut être mis en œuvre dans un système de gestion de base de données. Il précise les tables et les relations entre elles.
- Modèle physique des données (MPD) : La mise en œuvre concrète du MLD dans un système de gestion de base de données, incluant des détails techniques comme les index et les contraintes.
- Modèle de traitement (MT) : Décrit les processus ou les opérations réalisées sur les données, c’est-à-dire comment les informations sont créées, modifiées, supprimées ou consultées.
- Démarche descendante : On commence par une vision globale (le MCD) et on détaille de plus en plus jusqu’à arriver à la mise en œuvre technique (le MPD).
En résumé, la méthode Merise aide à structurer et organiser les informations et les processus d’une entreprise pour créer des systèmes informatiques efficaces.
Prenons un exemple simple : un système de gestion pour une école avec des étudiants et des cours. Nous allons créer un Modèle Conceptuel des Données (MCD) pour ce système.
- Étudiant : Représente les élèves de l’école.
- Cours : Représente les matières ou les classes offertes par l’école.
-
Étudiant :
-
ID_Étudiant
(identifiant unique) Nom
Prénom
Date_de_naissance
-
-
Cours :
-
ID_Cours
(identifiant unique) Nom_Cours
Description
-
- Un étudiant peut s’inscrire à plusieurs cours.
- Un cours peut avoir plusieurs étudiants inscrits.
Voici une description textuelle du diagramme :
-
Étudiant (Entité) :
-
ID_Étudiant
(clé primaire) Nom
Prénom
Date_de_naissance
-
-
Cours (Entité) :
-
ID_Cours
(clé primaire) Nom_Cours
Description
-
-
Inscription (Relation entre Étudiant et Cours) :
-
ID_Étudiant
(clé étrangère) -
ID_Cours
(clé étrangère) Date_Inscription
-
-
Étudiant : Cette entité stocke les informations personnelles de chaque étudiant. Chaque étudiant est identifié de manière unique par
ID_Étudiant
. -
Cours : Cette entité stocke les informations sur chaque cours proposé par l’école. Chaque cours est identifié de manière unique par
ID_Cours
. -
Inscription : Cette relation représente le fait qu’un étudiant est inscrit à un cours. Elle lie les étudiants aux cours via leurs identifiants respectifs (
ID_Étudiant
etID_Cours
). On peut aussi ajouter des attributs commeDate_Inscription
pour savoir quand l’étudiant s’est inscrit.
En schéma, le MCD ressemblerait à ceci :
Étudiant Inscription Cours ----------- ------------ ----------- ID_Étudiant <------- ID_Étudiant ID_Cours Nom | ID_Cours -------> Nom_Cours Prénom | Date_Inscription Description Date_de_naissance |
Le MCD pour notre école montre comment les étudiants et les cours sont liés. Chaque étudiant peut s’inscrire à plusieurs cours, et chaque cours peut avoir plusieurs étudiants inscrits. Ce modèle aide à organiser les données de manière claire et à faciliter la création d’une base de données efficace pour gérer les inscriptions.
D’accord, voici une explication simple des attributs, occurrences et cardinalités dans le contexte de la méthode Merise.
Les attributs sont les caractéristiques ou les propriétés des entités. Chaque attribut représente un élément d’information qui décrit l’entité.
Pour l’entité Étudiant, les attributs peuvent être :
- ID_Étudiant
: Identifiant unique de l’étudiant.
- Nom
: Nom de famille de l’étudiant.
- Prénom
: Prénom de l’étudiant.
- Date_de_naissance
: Date de naissance de l’étudiant.
Une occurrence est un exemple spécifique d’une entité, une instance concrète de l’entité avec des valeurs pour chaque attribut.
Pour l’entité Étudiant, une occurrence pourrait être :
- ID_Étudiant
: 1
- Nom
: Dupont
- Prénom
: Marie
- Date_de_naissance
: 15/03/2000
Cela représente un étudiant spécifique appelé Marie Dupont, né le 15 mars 2000.
Les cardinalités décrivent le nombre minimum et maximum d’occurrences d’une entité qui peuvent être associées à une occurrence d’une autre entité via une relation. Elles indiquent la nature de la relation entre les entités.
Les cardinalités sont généralement exprimées sous la forme (min, max).
Pour la relation Inscription entre les entités Étudiant et Cours :
- Un étudiant peut s’inscrire à plusieurs cours : cardinalité (0, N) pour les cours associés à un étudiant.
- Un cours peut avoir plusieurs étudiants inscrits : cardinalité (0, N) pour les étudiants associés à un cours.
Dans un schéma MCD, cela pourrait être représenté ainsi :
- Un étudiant peut s’inscrire à un minimum de 0 cours (aucun cours) et un maximum de plusieurs cours (N cours).
- Un cours peut avoir un minimum de 0 étudiants inscrits (aucun étudiant) et un maximum de plusieurs étudiants (N étudiants).
Étudiant Inscription Cours ----------- ------------ ----------- ID_Étudiant <------- ID_Étudiant ID_Cours Nom | ID_Cours -------> Nom_Cours Prénom | Date_Inscription Description Date_de_naissance | Cardinalités : Étudiant : (0, N) Cours : (0, N)
- Attributs : Les caractéristiques des entités (ex. : nom, prénom).
- Occurrences : Les instances spécifiques des entités (ex. : un étudiant spécifique).
- Cardinalités : Les règles définissant combien d’occurrences d’une entité peuvent être associées à une occurrence d’une autre entité (ex. : un étudiant peut s’inscrire à plusieurs cours et un cours peut avoir plusieurs étudiants inscrits).
POO
La Programmation Orientée Objet (POO) est une méthode de programmation qui organise le code en utilisant des objets. Voici une définition simplifiée :
- Objet : Un objet est une “chose” qui a des propriétés (ou attributs) et des comportements (ou méthodes). Par exemple, une voiture peut être un objet avec des propriétés comme la couleur et le modèle, et des comportements comme démarrer et s’arrêter.
- Classe : Une classe est comme un plan ou un modèle pour créer des objets. Elle définit les propriétés et les comportements que les objets de ce type auront. Par exemple, la classe “Voiture” définit ce qu’est une voiture, mais la voiture réelle (un objet) est une instance de cette classe.
- Encapsulation : C’est la pratique de garder les détails internes d’un objet cachés, ne montrant que ce qui est nécessaire. Cela aide à protéger les données et à réduire la complexité.
- Héritage : C’est un mécanisme où une classe peut hériter des propriétés et des méthodes d’une autre classe. Par exemple, si on a une classe “Véhicule”, une classe “Voiture” peut hériter de cette classe, ce qui signifie qu’elle aura les propriétés et les comportements d’un véhicule, plus ses propres spécificités.
- Polymorphisme : Cela signifie que des objets de différentes classes peuvent être traités comme s’ils étaient du même type. Par exemple, si “Voiture” et “Vélo” héritent tous deux de “Véhicule”, on peut les traiter tous les deux comme des véhicules, même s’ils ont des comportements spécifiques différents.
En résumé, la POO permet de structurer le code de manière plus naturelle et intuitive en se basant sur des concepts du monde réel, facilitant ainsi la maintenance et la réutilisation du code.
Zoning/Mockup
Définition : En design et en développement web, le zoning fait référence à la création d’un schéma ou d’une disposition pour l’agencement des différentes sections d’un site web ou d’une application. Cela inclut la planification de l’emplacement des éléments comme les menus, les images, les textes, etc.
Exemple : Le zoning peut être utilisé pour définir la disposition d’une page d’accueil avec des zones pour la navigation, le contenu principal, les publicités et le pied de page.
Un mockup est une représentation visuelle de ce à quoi un produit fini (comme un site web, une application ou un objet physique) ressemblera. Il s’agit généralement d’un modèle statique qui montre la disposition, le design et les éléments graphiques.
Exemple : Un designer peut créer un mockup d’une nouvelle application mobile pour montrer aux clients ou aux parties prenantes à quoi ressemblera l’interface utilisateur avant de commencer le développement.
Prototypage :
Définition : Dans le contexte de la conception de produits physiques, un mockup est un modèle à échelle réelle ou réduite d’un produit, utilisé pour tester l’apparence et certaines fonctionnalités avant la fabrication finale.
Exemple : Dans l’industrie automobile, un mockup d’une nouvelle voiture peut être construit en argile ou en matériaux similaires pour examiner son design avant de produire les premiers prototypes fonctionnels.
Jeu de données
Un jeu de données est une collection organisée d’informations ou de données, souvent stockées sous forme de tableau. Chaque ligne représente une observation ou un enregistrement, et chaque colonne représente une caractéristique ou une variable de ces observations. Par exemple, dans un jeu de données sur des étudiants, chaque ligne pourrait représenter un étudiant et chaque colonne pourrait contenir des informations comme le nom, l’âge, la note en mathématiques, etc.
Méthode agile user stories
Les méthodes agiles sont des façons de gérer des projets, surtout en développement logiciel, qui mettent l’accent sur la flexibilité, la collaboration et l’amélioration continue. Le travail est fait en petits cycles (itérations ou sprints) pour permettre des ajustements rapides.
Les user stories sont de courtes descriptions des fonctionnalités d’un produit, écrites du point de vue de l’utilisateur. Elles suivent généralement le format :
En tant que [type d'utilisateur], je veux [objectif] afin que [bénéfice].
Elles aident l’équipe à comprendre ce que l’utilisateur veut et pourquoi, pour créer des fonctionnalités utiles.