Examen confiné : écrire de la documentation

Afin de rentabiliser l’examen théorique de cette fin d’année scolaire chamboulée, un peu d’utilité publique nous ferait tous le plus grand bien.

1/2 | Suivant

CSS 3 c’est fantastique

On l’a vu, le langage CSS permet de transformer les stuctures HTML et leur sémantique tristounette, en de flamboyantes mises en page.
La dernière version, le layer 3 de CSS, particulièrement, regorge de trouvailles que je n’ai personnellement pas encore eu le temps d’explorer dans ses tréfonds. Quoi de mieux qu’une mise en commun pour remédier à ça ?

Documenter utilement

Le travail théorique de cette fin d’année sera donc de documenter des déclarations css 3. En voici une liste non finie sur laquelle je n’ai pas encore produit une documentation très consistante.
- les dégradés en fond
- border-radius
- le display:grid
- le display:flex
- transformations css
- transitions css
- animations css
- calc
- les variables dans css
- les feuilles de style pour l’impression
- les medias queries
- box-shadow
- text-shadow
- ... (vous pouvez dégotter une nouveauté à documenter)

Comment faire ?

1) Choisissez une déclaration css (ou un groupe si c’est le cas)
2) Compilez au moins 3 articles sur le net, en français ou anglais, qui parlent et font la démo de cette déclaration.
3) Faites une description complète du fonctionnement de cette déclaration : après la lecture de votre page, on doit pourvoir comprendre à quel type de tag elle s’applique, ce qu’elle permet, si elle est utilisable en production ou est expérimentale (voir le site caniuse.com à ce propos)
4) Donnez au moins trois exemples d’utilisation, du plus simple au plus complexe/spectaculaire en utilisant au besoin des pages supplémentaire dédiées à ça. Trouvez un moyen de montrer code et résultat.

Certaines déclarations css sont très complexes, comme les feuilles de style print, les transitions, les animations, etc. N’ayez pas peur de vous y attaquer, c’est la qualité de ce qui est dit qui importe, pas le fait de couvrir l’ensemble. Une vue générale de qualité est un bon outil : reportez-vous à votre propre expérience des tutoriels pour vous guider.

Le résultat est une page web avec le texte et les démos. Votre page doit employer la typo roboto, installez-la donc.

Montrer du code

Comment montrer du code html, css, javascript dans une page web ? Une copie d’écran peut le faire, mais on peut y arriver aussi avec le jeu de balise pre et code, plus un peu de javascript. On peut le faire aussi avec des entités html.
Une page de base, avec son html, css, javascript peut être téléchargé sur cette page pour démarrer le travail. Il contient quelques indications et un code prêt pour le démarrage.
Un plugin javascript, notamment, est utilisé pour la colorisation syntaxique. Je ferai une petit fiche la dessus. Il s’agit de Prism, allez voir la documentation pour savoir comment l’utiliser ici.

Remise

Ce travail me sera envoyé dans un dossier zippé comportant votre nom pour la date de remise officielle : le lundi 1er juin avant midi.

Notation de l’exercice

La note portera sur la clarté de l’explication et la pertinence/richesse des exemples. Évidemment, le degré de complexité des déclarations sera prise en compte : box-shadow ne demande pas autant de travail que les feuilles de style pour l’impression par exemple, et ça sera pris en compte.

Question, difficulté, erreur de code incompréhensible ?

Envoyez votre code zippé par mail, mais comme gmail, par exemple, se méfie des fichiers zip contenant du code, utiliser wetransfer ou dropbox ou tout autre système.