new content + fixes + dep update
This commit is contained in:
Nico
parent
f339dc7c8e
commit
6214c827eb
8 changed files with 456 additions and 183 deletions
89
docs/dev/B2/git.md
Normal file
89
docs/dev/B2/git.md
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
# Versionner avec Git
|
||||
|
||||
[Git](https://git-scm.com/) est un logiciel de [gestion de version](https://fr.wikipedia.org/wiki/Gestion_de_versions).
|
||||
|
||||
## Interfaces et serveurs
|
||||
|
||||
Git permet de stocker et sauvegarder des documents ainsi que leurs versions précédentes sur un serveur prévu à cet effet. Les plus connus sont :
|
||||
|
||||
- [Github](https://github.com/)
|
||||
- [Gitlab](https://about.gitlab.com/)
|
||||
- [Bitbucket](https://bitbucket.org/)
|
||||
- [Gitea](https://gitea.io/)
|
||||
|
||||
Certains de ces services proposent des fonctionnalités avancés de suivi des bugs, d’automatisation des tâches, etc.
|
||||
|
||||
::: info
|
||||
Les trois premiers proposent un compte gratuit largement suffisant pour un usage classique.
|
||||
Le dernier est à installer sois-même sur un serveur.
|
||||
:::
|
||||
|
||||
## Utilisation locale
|
||||
|
||||
### Outils
|
||||
|
||||
Afin de créer et gérer un dépôt de documents (généralement un dossier contenant le code source de notre projet), il est nécessaire d’utiliser un terminal. Il est possible d’utiliser le terminal intégré à son logiciel de développement ou celui de son système d’exploitation :
|
||||
|
||||
- **terminal** sur MacOS et linux
|
||||
- **powershell** sur Windows
|
||||
|
||||
### Authentification du serveur
|
||||
|
||||
Pour éviter d’avoir à renseigner le mot de passe de son compte github, gitlab, gitea à chaque fois, il est recommandé d’utiliser une clé SSH. Ce protocole permet une authentification en arrière plan de votre machine auprès du serveur.
|
||||
|
||||
Afin de générer une clé, renseignez et validez la commande suivant dans le terminal :
|
||||
|
||||
```bash
|
||||
ssh-keygen -t ed25519 -C "VOTRE_EMAIL"
|
||||
```
|
||||
|
||||
Ne renseignez pas de mot/phrase de passe. Vous devriez recevoir une réponse du terminal contenant la localisation de la clé sur votre ordinateur ainsi qu’une “empreinte” de clé.
|
||||
|
||||
::: details Exemple d’empreinte
|
||||
|
||||
```bash
|
||||
The key fingerprint is:
|
||||
SHA256://wlS3vSWCovCYh+Y5LbtlS1Ee4nr0e3mTOmFq7//us test@mail.fr
|
||||
The key’s randomart image is:
|
||||
+--[ED25519 256]--+
|
||||
| . |
|
||||
| . . |
|
||||
| + |
|
||||
| o o |
|
||||
| .S.. + . |
|
||||
| . .o. =. o|
|
||||
| . .. ...o=*=|
|
||||
| +o= o+==%o|
|
||||
| .*oo .BO@E*|
|
||||
+----[SHA256]-----+
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Vous devez ensuite récupérer la clé publique, généralement `id_ed25519.pub`, copier son contenu et le coller dans les paramètres de votre compte github, gitlab, etc.
|
||||
|
||||
### Création d’un dépôt
|
||||
|
||||
Les étapes de création d’un dépôt sont quasiment systématiquement les mêmes :
|
||||
|
||||
1. ouvrir le dossier de travail dans le terminal
|
||||
2. taper la commande `git init`
|
||||
3. se rendre sur son serveur git en ligne
|
||||
4. créer un nouveau dépôt vide depuis l’interface
|
||||
|
||||
### Envoyer des fichiers vers le serveur
|
||||
|
||||
Maintenant que le dépôt est créé, il faut faire le lien entre votre projet local et dépôt sur le serveur. À l’intérieur du dépôt distant vide, vous devriez trouver des commandes fournies par le serveur. Ces commandes peuvent-être copiées/collées dans l’ordre dans le terminal.
|
||||
|
||||
1. ajouter le serveur comme dépôt distant
|
||||
- `git remote add origin git@github.com:USER/REPO.git`
|
||||
2. demander à git de suivre tous les fichiers du dossier
|
||||
- `git add .`
|
||||
3. ajouter et figer l’état des fichiers suivis avec un commentaire
|
||||
- `git commit -m "COMMENTAIRE"`
|
||||
4. envoyer les fichiers sur le serveur
|
||||
- `git push origin main`
|
||||
|
||||
::: tip
|
||||
À chaque fois que vous souhaitez envoyer des modifications, répétez les étapes 2 à 4
|
||||
:::
|
||||
|
|
@ -19,12 +19,50 @@ On ne peut pas utiliser un `h4` après un `h2` si aucun `h3` n'est présent entr
|
|||
|
||||
## Exemples
|
||||
|
||||
### Structure incorrecte
|
||||
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Titre secondaire</h2>
|
||||
<h4>Sous-titre</h4> // [!code error]
|
||||
```
|
||||
|
||||
### Structure correcte
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Titre secondaire</h2>
|
||||
<h3>Sous-titre</h3>
|
||||
<h2>Titre secondaire</h2>
|
||||
<h3>Sous-titre</h3>
|
||||
<h4>Sous-titre</h4>
|
||||
<h2>Titre secondaire</h2>
|
||||
```
|
||||
|
||||
### Structure complexe correcte
|
||||
|
||||
```html
|
||||
<h1>Sandwich PB&J</h1>
|
||||
<h2>Les ingrédients</h2> // [!code hl]
|
||||
<h3>Le frais</h3> // [!code hl]
|
||||
<ul>
|
||||
<li>confiture</li>
|
||||
</ul>
|
||||
<h3>Le sec</h3> // [!code hl]
|
||||
<ul>
|
||||
<li>pain</li>
|
||||
<li>beurre de cacahuette</li>
|
||||
</ul>
|
||||
<h2>Les étapes</h2> // [!code hl]
|
||||
<ol>
|
||||
<li>couper deux tartines de pain</li>
|
||||
<li>étaler la confiture sur une tartine</li>
|
||||
<li>étaler le beurre de cacahuette sur l’autre tartine</li>
|
||||
<li>faire un sandwich</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
Il est possible de revenir à un titre de niveau supérieur à n'importe quel moment.
|
||||
|
||||
:::warning Styles et titres
|
||||
Il est fréquent de voir des titres importants utiliser un niveau inférieur pour des raisons de styles. Ce n'est pas une bonne pratique, il faudra préférer utiliser une classe plutôt que de modifier la structure du document.
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -16,3 +16,17 @@ Il est généralement préférable d'utiliser plusieurs paragraphes plutôt que
|
|||
veniam.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Mise en forme
|
||||
|
||||
Afin de mettre en forme le contenu d'un paragraphe, il existe plusieurs balises utilisables. Ces balises se comportent “en ligne”, permettant ainsi de cohabiter les unes à côté des autres.
|
||||
|
||||
```html
|
||||
<strong>Permet de mettre du texte en avant et en gras</strong>
|
||||
<b>Permet de mettre du texte en gras</b>
|
||||
<em>Permet de mettre du texte en italique</em>
|
||||
<span>
|
||||
Est une balise sans effet par défaut, utile pour styler un morceau de texte en
|
||||
CSS
|
||||
</span>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ Cette balise nécessite deux attributs obligatoires: `src` et `alt` et deux attr
|
|||
|
||||
L'attribut `src` nous permet de renseigner la source de l'image. Que ce soit une URL distante ou bien un chemin vers une image locale.
|
||||
|
||||
L'attribut `alt` est à renseigner si l'image est “porteuse de sens”. Si l'image est décorative, l'attribut `alt` doit rester vide mais ne doit pas être supprimé.
|
||||
L'attribut `alt` est à renseigner si l'image est “porteuse de sens”. **Si l'image est décorative, l'attribut `alt` doit rester vide mais ne doit pas être supprimé.**
|
||||
|
||||
Les attributs `width` et `height` sont à renseigner dans la mesure du possible afin que le navigateur réserve la place nécessaire à l'image au moment du chargement de la page.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ Dans cette partie, vous trouverez des bouts de code (fragments) HTML. Ces exempl
|
|||
|
||||
## Fragments disponibles
|
||||
|
||||
- [Titres](titres.md)
|
||||
- [Titres](01-titres.md)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue