219 lines
6.7 KiB
Markdown
219 lines
6.7 KiB
Markdown
# Code camp
|
||
|
||
Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer :relaxed:
|
||
|
||
[[toc]]
|
||
|
||
## Concepts et architecture
|
||
|
||
- **Internet** = réseau de réseaux, infrastructure globale (TPC/IP)
|
||
- **Web** = application basée sur le réseau d’internet (HTTP/HTTPS)
|
||
- **DNS** = annuaire adresse IP/nom de domaine
|
||
- **FTP**/SFTP = transfert de fichiers
|
||
- **HTML** = contenus
|
||
- **CSS** = styles
|
||
- **Javascript** = éléments dynamiques
|
||
- **Fonts** = polices de caractères
|
||
|
||
## Configuration et préparation
|
||
|
||
- Paramétrons votre environnement de développement.
|
||
- Préparons votre dossier de travail local.
|
||
- Jetons un œil à la maquette.
|
||
|
||
::: details Afficher la structure
|
||
|
||
```
|
||
code-camp/
|
||
├── 00_sources/
|
||
│ ├── fonts/
|
||
│ │ └── arial.ttf
|
||
│ └── images/
|
||
│ └── unsplash-concert_crowd.png
|
||
├── 01_templates/
|
||
│ ├── index.fig
|
||
│ ├── index.sketch
|
||
│ └── index.xd
|
||
├── 02_export/
|
||
│ ├── images/
|
||
│ │ └── hero.jpg
|
||
│ └── icons/
|
||
│ └── icon-guitar.svg
|
||
└── 03_web/
|
||
├── assets/
|
||
│ ├── css/
|
||
│ │ └── style.css
|
||
│ ├── fonts/
|
||
│ │ └── arial.woff2
|
||
│ ├── images/
|
||
│ │ └── hero.jpg
|
||
│ ├── js/
|
||
│ │ └── main.js
|
||
│ └── svg/
|
||
│ └── icon-guitar.svg
|
||
├── favicon.ico
|
||
└── index.html
|
||
```
|
||
|
||
:::
|
||
|
||
## HTML
|
||
|
||
Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
|
||
`<` `nom de la balise` `attributs` `>`
|
||
`contenu de la balise`
|
||
`<` `nom de la balise` `/>`
|
||
|
||
La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
|
||
|
||
### Les balises indispensables
|
||
|
||
- `<!DOCTYPE>` = déclaration du type de document
|
||
- `<html>` = racine du document, contient tous les autres éléments
|
||
- `<head>` = fournit des informations générales (métadonnées) sur le document
|
||
- `<body>` = contenu principal du document
|
||
|
||
### Les balises et attributs recommandés
|
||
|
||
- `lang` = déclaration du langage utilisé pour le contenu
|
||
- `dir` = Sens de lecture du contenu
|
||
- `charset` = définit l'encodage des caractères utilisés
|
||
- `title` = définit le titre du document (fenêtre/onglet/référencement)
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/html/base.html#base
|
||
:::
|
||
|
||
### Les balises structurantes
|
||
|
||
- `<header>` = en-tête
|
||
- `<nav>` = élément contenant des liens, destiné à la navigation
|
||
- `<main>` = contenu principal du document
|
||
- `<article>` = une composition autonome pouvant être utilisée seule
|
||
- `<section>` = zone générique du document, plus utile au développeur qu’à l’utilisateur
|
||
- `<aside>` = contenu secondaire ou indirect à l’inverse de `<main>`
|
||
- `<h1>` - `<h6>` = niveaux des titres du document
|
||
- `<footer>` = pied de page
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/html/base.html#structure
|
||
:::
|
||
|
||
### Les balises de contenus
|
||
|
||
On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
|
||
|
||
Ci-dessous, quelques exemples de balises (listes non exhaustives).
|
||
|
||
#### Balises bloc
|
||
|
||
- `<blockquote>` = une citation
|
||
- `<p>` = un paragraphe
|
||
- `<ol>` = liste ordonnée
|
||
- `<ul>` = liste désordonnée (liste à puce)
|
||
- `<li>` = élément d’une liste
|
||
- `<div>` = conteneur générique
|
||
|
||
#### Balises en ligne
|
||
|
||
- `<img>` = insertion d’une image
|
||
- `<a>` = un lien
|
||
- `<span>` = conteneur générique en ligne
|
||
- `<strong>` = contenu important (en gras)
|
||
- `<br>` = saut de ligne
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/html/base.html#full
|
||
:::
|
||
|
||
## CSS
|
||
|
||
Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
|
||
|
||
- la mise en page
|
||
- les couleurs
|
||
- les tailles
|
||
- la justification
|
||
- les polices de caractères
|
||
- etc.
|
||
|
||
On parle de « règle CSS ». Une règle se construit ainsi :
|
||
|
||
`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
|
||
|
||
::: details Afficher l'exemple
|
||
|
||
<<< @/snippets/css/base.css#rule
|
||
|
||
- `p` est le sélecteur
|
||
- `color` est la propriété
|
||
- `blue` est la valeur
|
||
- `color: blue;` est la déclaration
|
||
- l'ensemble forme **la règle**
|
||
|
||
:::
|
||
|
||
::: tip Astuce
|
||
Tout est une boîte en HTML/CSS.
|
||
:::
|
||
|
||
### Sélecteurs CSS
|
||
|
||
#### Sélecteurs de balise
|
||
|
||
Ils sont identiques aux balises HTML (sauf head).
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/css/base.css#tag
|
||
:::
|
||
|
||
#### Sélecteurs de classe
|
||
|
||
Cible une classe définie dans le HTML avec un point.
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/css/base.css#class
|
||
:::
|
||
|
||
#### Sélecteurs d’attribut
|
||
|
||
Cible un attribut spécifique avec ou sans valeur entre crochets.
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/css/base.css#attr
|
||
:::
|
||
|
||
#### Sélecteurs multiples et chaînés
|
||
|
||
Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
|
||
|
||
::: details Afficher le code
|
||
<<< @/snippets/css/base.css#chain
|
||
:::
|
||
|
||
### Propriétés CSS
|
||
|
||
::: info
|
||
Il en existe beaucoup trop pour essayer de les résumer ici.
|
||
Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
|
||
:::
|
||
|
||
### La cascade du style
|
||
|
||
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
|
||
|
||
Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
|
||
|
||
- [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
|
||
- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
|
||
|
||
## Accessibilité
|
||
|
||
D'après [Access42 :](https://access42.net/)
|
||
|
||
> L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.
|
||
|
||
Selon moi, développer de manière accessible devrait être la norme. La façon normale de créer un site et non pas un correctif ou une surcouche à appliquer.
|
||
|
||
C'est pourquoi les contenus ici présents intègrent (le plus possible) les bonnes pratiques d'accessibilité numérique par défaut.
|