Les dessous de HTML5/CSS3/JS en deux idées simples : - Distinguer le fond de la forme - Expliciter les éléments d’un site Web Cette présentation est un document du MOOC-ICN https://www.fun-mooc.fr/courses/inria/41014/session01/about

1. Les dessous de
HTML/CSS/JS
en deux idées simples

2. Cette présentation est un document du MOOC-ICN.
Les dessous de HTML5/CSS3/JS en deux idées simples :
- Distinguer le fond de la forme
- Expliciter les éléments d’un site Web
Peut-on résumer les concepts qui permettent de créer un site Web sous forme de
quelques éléments clés ?
On relève ce défi ici sous la forme d'une présentation réutilisable en classe,
après avoir créé son premier site Web, en utilisant quelques balises de base, et
quelques éléments exemples glanés ça et là.
Cette présentation pourrait même être faite sous forme de quelques exposés
d’élèves.

3. Distinguer le fond de la forme
Voir le résultat en ligne.

4. Distinguer le fond de la forme
Voilà une portion de document qui contient un texte descriptif, avec
- un mot mis en avant (en italique)
- un lien vers wikipédia,
- une portion de texte montrant un code informatique,
- et un bouton à cliquer pour lancer le code.
Bien. Enfin … bof, ça pourrait être plus joli:) Mais ce que nous voulons c’est séparer les
problèmes :
(i) représenter le sens du texte et sa structure en HTML
(ii) et définir sa mise en page en CSS
Bref : séparer le fond de la forme.
Ce qui est remarquable c’est que trois types de construction suffiront pour cela pour tout
faire, c’est à dire :
1/ structurer le texte,
2/ enrichir le texte,
3/ ajouter des liens ou y insérer des objets.

5. Distinguer le fond de la forme
- Structurer le propos :
section et sous-section, titre, …
- Indiquer le sens du contenu :
une définition, du code, …
- Utiliser le texte comme donnée :
pour des algorithmes.

6. Distinguer le fond de la forme
Structurer le texte.
Dans notre exemple chaque morceau de texte la description, le code, et l’animation est
insérée dans un bloc
<div class=’...’>…</div>
où ou l’attribut class explicite de quel type de texte il s’agit. En faisant ce geste, on gagne
trois choses.
- On structure son propos pour le lecteur, en section, sous-section ou paragraphe, avec des
titres (pardon, avec des <div class=’titre’>…</div>), on identifie les énumérations, on
rassemble les données du texte sous forme de table.
+ Et si on ajoute un index (avec l’attribut id, comme ici <div id=’ma-section’>…</div>), on va
pouvoir référencer la section de l’intérieur du document.
- On sépare le contenu de la façon de l’afficher, par exemple on précise que c’est du code
informatique ou une animation, pour que selon la machine (un grand écran ou un petit, par
exemple), la personne (qui parcourt juste la page, ou y revient après avoir lue, ou voit mal et
doit la faire lire par la machine) le même texte puisse être présenter au mieux.
- On permet à son texte d’être lu par humain mais aussi traité par des algorithmes (de
recherche ou d’analyse) à qui on a vraiment besoin de présenter de l’information bien
structurée.

7. Distinguer le fond de la forme
- Enrichir le texte :
en expliquant de quoi il s’agit,
sans fixer la mise en page.
~ N’utiliser que les balises
<div> et <span> pour se forcer
à expliciter le sous-texte.

8. Distinguer le fond de la forme
Enrichir le texte.
Dans notre exemple on met en avant une partie du texte en déclarant qu’il faut le présenter
avec emphase, car il est important, mais en laissant le soin à autre chose de dire comment
(en italique ? en couleur ? ou en haussant la voix si le texte est lu?).
Là encore, on gagne à mieux faire comprendre ce que les gens de théâtre appellent le
sous-texte : ce qui n’est pas explicitement dit, mais accompagne le texte.
Tout avec les balises <div>…</div> et <span> </span> ?
Vous devez être surpris ! Vous faites déjà un peu de HTML et vous connaissez les balises
<div>…</div> pour structurer le texte en division, mais peut-être aussi les balises <ul> et <li>
pour faire des listes d’items, et quelques balises pour le texte en italique <i> ou en gras <b>.
Et bien disons que ce sont de simples abréviations, pour exprimer une classe de texte. Mais
il faut vraiment à chaque fois bien noter de quel type de texte il s’agit.
Car techniquement, ça marche ! Toutes les divisions du texte ou les parties d’une phrase
peuvent se spécifier avec une seule balise.

9. Distinguer le fond de la forme
- Deux possibilités :
- Lier à des contenus externes.
- Insérer des objets multimédia.
~ Garder le plus simple possible sa façon de représenter le contenu d’une page HTML.

10. Distinguer le fond de la forme
Ajouter des liens ou des objets.
Dans notre exemple on ajoute
- un lien vers la définition de wikipédia pour qui ne serait pas familier avec le javascript il
suffit de cliquer sur le texte,
- et un lien vers le code de l’animation, où là on clique sur une image.
Et là nous voyons deux mécanismes : faire un lien vers un média externe ou insérer le ce
média dans la page.
- Insérer l’objet dans la page, ici une image avec la balise <img> (dont on a bien ajouté
l’attribut alt pour avoir une description alternative si l’image ne s'affiche pas ou la page était
produite en audio et pas en texte), mais on peut insérer des vidéos, des animations dans un
canevas graphique ou d’autres objets multimédia, et même une autre page Web.
Est-ce aussi simple que cela ?
Oui au niveau des principes. Ensuite selon les besoins on dispose de toute sorte d’attributs,
(par exemple : spécifier la langue dans une page internationale, faire afficher un titre), y
compris pour interagir avec l’élément (par exemple : quand la souris passe dessus).

11. Expliciter les éléments du site.
- Les méta-données
- La feuille de style

12. Expliciter les éléments du site.
Tout ce que vous mettez dans votre page Web n’a strictement aucun intérêt:) C’est que les
gens trouverons qui en a.
Et on ne parle pas ici de présenter les choses joliment, de manière claire et facile d’accès.
On vous fait confiance pour ça.
Mais de permettre de les présenter au mieux aux … moteurs de recherche et d’indexation.
À cette fin, il faut bien positionner les méta-données, comme dans l’exemple ci-dessus :
- Préciser comment sont encodés les caractères (comme les accents ou les symboles) et
toujours essayer d’utiliser le standard UTF-8
- Bien donner un titre à la page, avec si possible des mots-clé et préciser l’auteur, cela va
aider à classer et retrouver le contenu.
On peut aussi ajouter des ``données´´ par exemple si votre information contient des faits (par
exemple : des dates, des définitions, des références, …) c’est toujours mieux de les
rassembler sous forme structurée que de les diluer dans du texte. Par exemple sur toutes les
pages wikipédia comme celle-ci, on rassemble dans l’encadré de droite, ce qui correspond
au données et elles sont exploitables par d’autres sites Web.
Reste la ligne <link rel='stylesheet' type='text/css' href=’style.css'> nous allons en parler maintenant.

13. Expliciter les éléments du site.
Quel va être l’affichage sur un smartphone par exemple ? Et si la personne est malvoyante ?
Enfin ! Nous voilà prêt à comprendre comment afficher les pages comme nous le souhaitons.
Dans l’exemple précédent la page référence un fichier style.css qui contient des directives de
mis en page, ce fichier est souvent commun à tout un site pour bien garder une présentation
homogène.
Comment apprendre à faire de bon CSS ? C’est à la fois très simple en partant d’un fichier
exemple et en tâtonnant (c’est le moment où thimble se révèle l’outil idéal pour expérimenter)
ou en suivant les tutoriels proposés sur les site w3school, Openclassroom ou
Informatique au Lycée qui permettent d’apprendre en autonomie.
Très souvent comme dans les deux exemples qui suivent, on va partir d’un ``thème´´ créé
par un professionnel (on voit comment le même site peut s’afficher de manière bien différente
selon le CSS choisi) et l’adapter à ce que l’on souhaite. Faire un vrai graphisme
professionnel représente plusieurs jours de travail: c’est même un vrai métier.

14. Expliciter les éléments du site.

15. Expliciter les éléments du site.

16. Expliciter les éléments du site.

17. Les éléments d’un site Web
Un site Web n’est pas un ``paquet´´ de pages Webs, et il faut proposer un site Web où tout le
monde va se retrouver, car il y a des usages courants à respecter, et des outils qui nous
permettent de proposer immédiatement un vrai site et pas un simple bricolage.
Pour organiser votre information voici trois principaux outils
- Distinguer les pages du site, des articles qui se créent au fil du temps.
Une page présente une information générale et fixe sur le fonctionnement ou le contenu du
site. Il y a des pages usuelles : présentation du site, informations légales et copyright utilisé,
page de contact, présentation des auteurs (elles sont souvent en lien dans le pied de page).
Les articles eux, sont rangés par thème ou catégorie et bien indexés avec des mots-clé.
- Utiliser des menus pour naviguer entre les sections du site, au sein du site le contenu est
entouré d’un entête pour reconnaître le site, d’une barre ou plusieurs barres de navigation, et
en bas d’informations complémentaires. Les widgets (par exemple pour la recherche dans les
articles ou les pages) sont des outils qui permettent de rendre le site dynamique.
- Organiser l’espace de la page, par exemple avec une entête, menu, zone de fonctions
commune à toutes les pages d’une zone du site, comme on le voit dans l’exemple précédent.
On peut bien entendu faire autrement, innover, surprendre, mais en testant toujours sur de
vrais utilisateurs si leur permet de bien s’y retrouver.