6. TP-0

• Lire les notes de cours et visionner les vidéos :
  1. Markdown
  2. HTML5
  3. XML
  4. Validation HTML
  5. GitHub
• Contrôle de qualité du TP-long de session 1 (Produire un bilan pour son propre site)
• Faire le tutoriel Hello World de Github si ce n'est pas déjà fait

Contrôle qualité du TP-long de session 1

Objectifs :

• Expérimenter un contrôle de qualité rigoureux
• Utiliser des outils de contrôle de qualité
• Compléter un bilan
• Valider et corriger les erreurs HTML
• Refaire la mise en ligne

Utiliser des outils de contrôle de qualité

1. Ouvrir le fichier liste-de-contrôle-101.md qui est dans le dossier MarkDown (à la racine du dépôt GitHub que vous avez clôné https://github.com/dlapointegilbert/guide-developpement-web)
   • Suivre ce fichier ligne par ligne
   • Cocher les critères au fur et à mesure que vous les vérifiez

Plusieurs de ces critères exigent d'utiliser des outils de contrôle de la qualité. Ces cas particuliers sont listés et expliqués ci-dessous.

Cas particuliers de la liste de contrôle

Structure et sémantique

• Le contenu HTML est écrit dans un ordre logique

  • Pour tester l'ordre logique, utiliser Disable All Styles de la barre d'outils de développement

• Les éléments de structure sont bien utilisés (header, main, footer…)

  • Se référer à la rubrique sémantique structurelle du Guide HTML (guide-html.md)

• h1 est unique et décrit le thème de la page

• Les titres (h1, h2, h3, etc.) sont utilisés dans l'ordre et de manière pertinente

  • Pour tester l'arbre de titre et sous-titres créés par les hX, utiliser View Document Outline de la barre d'outils de développement

• Les éléments HTML sont utilisés en fonction de leur signification

  • Il n'y a pas d'outil de test pour cela. Se référer :
    • (1) au point Sémantique des éléments HTML du Guide HTML
    • (2) à https://developer.mozilla.org/fr/docs/Web/HTML/Element

Validité et lisibilité

• Le code HTML est valide selon le Validateur HTML du w3c

  • Vous devrez utiliser le validateur du w3c pour valider vos pages
  • Pas besoin d'aller sur le site, UTILISER le validateur de la barre d'outils de développement
  • Choisir Validate Local HTML à gauche au milieu

• Faites des captures-écrans AVANT / APRÈS

  • À l'aide de l'extension GoFullPage - Full Page Screen Capture (pour le navigateur Chrome)
  • Une capture-écran du résultat initial avec l'ensemble des erreurs et une capture-écran du résultat final après avoir corrigé un certain nombre d'erreurs
  • L'objectif ici est de se familiariser avec les erreurs HTML
  • Essayer de comprendre de quoi il s'agit et si c'est embêtant, poser la question au professeur !
  • Pas besoin de tout corriger !
  • Conserver pour le bilan à partager les erreurs plus difficiles à comprendre ou trop longues à corriger

Compléter votre bilan au format MarkDown

Le bilan doit contenir :

• Quelques améliorations (possibles ou effectuées pendant le contrôle qualité) pour améliorer le HTML au niveau de la structure ou de la sémantique
• Nommez au moins une difficulté avec les CSS que vous aimeriez corriger ou mieux comprendre
• Nommez au moins une réussite dont vous êtes fier(e) sur le plan de l'intégration

Nomenclature des fichiers :

• Bilan : bilan-tpLong-USERGITHUB.md
  • Il sera à remettre au début du prochain cours en classe
• Captures d'écran :
  • USERGITHUB-captureAvant.png
  • USERGITHUB-captureApres.png
  • Placer dans un dossier images/

Exemple de référence aux images dans MarkDown :

![Capture-écran 1](images/USERGITHUB-captureAvant.png)
![Capture-écran 2](images/USERGITHUB-captureApres.png)

Faire le tutoriel Hello World de GitHub

• Compléter le tutoriel GitHub (si pas déjà fait, prend environ une demi-heure) :
  • https://github.com/dlapointegilbert/guide-developpement-web/blob/main/github-hello-world-fr.md