3W
/
cours
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
cours/docs/dev/code-camp/index.md

6.7 KiB
Raw Blame History

Code camp

Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer ☺️

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 (hyper text markup language) 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 (block) et en ligne (inline). 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 (cascading style sheets) 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. :::

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 en anglais explique en détails le fonctionnement de la cascade.
  • Cette page (en anglais également) permet de visualiser graphiquement la cascade.

Accessibilité

D'après Access42 :

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.

Mise en ligne

Bonus