HTML/CSS/JS en deux idées simples

Les dessous de HTML5/CSS3/JS en deux idées simples : 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.

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

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.

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.

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.

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.

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.

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.

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).

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

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.

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.

Expliciter les éléments du site.

Expliciter les éléments du site.

Expliciter les éléments du site.

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.