Composants

IMPORTANT

Ce site web est un prototype en cours de construction, destiné à valider le code source généré par le logiciel Thot (version 0.0.1), projet personnel lui-même en phase de développement. Son contenu ainsi que son graphisme sont donc expérimentaux et n'ont de ce fait aucune valeur commerciale et/ou juridique. Pour obtenir plus d'information sur cet environnement, vous pouvez vous reporter à la page intitulée Questions fréquentes. Une page Facebook consacrée au projet peut par ailleurs être consultée. Un compte Twitter fournit des informations sur l'avancement du projet.

Un « composant » peut être vu comme une brique « logique », utilisable avec d'autres pour créer la structure d'une page web.

Chaque composant est spécialisé dans la description d'une zone bien précise de la page (ex. entête, menu de navigation, pied de page, etc.) et assure in fine la sérialisation du code source HTML correspondant. Un composant prend également en charge la mise en place de tous les styles CSS nécessaires à l'affichage de cette zone.

Bien qu'ils soient conçus de façon différente, puisqu'il s'agit de classes Java, les composants utilisés par le générateur de sites web Thot peuvent être assimilés, dans leur principe de fonctionnement, aux web components apparus récemment dans la conception des sites web.

Tel père tel fils

Comme indiqué supra, les pages sont réalisées en assemblant des composants entre eux. Ces derniers peuvent être très simples (ex. blocs de texte) ou beaucoup plus élaborés (ex. entête de page web, comportant un titre, un sous titre, une barre de navigation, etc.).

Lorsqu'un composant en utilise plusieurs autres, il s'instaure un ordre hiérarchique de type parent / enfant aboutissant à une arborescence. Vu de l'extérieur, le composant de référence est toujours celui de plus haut niveau, ou composant racine. C'est lui qui expose les styles CSS et prend en charge la sérialisation de l'ensemble.

Pour mieux cerner ce qu'est la notion d'arborescence de composants et la relation parent / enfant qui peut s'instaurer entre eux, il suffit de prendre comme exemple un composant de type paragraphe. Ce dernier se comporte en effet comme un conteneur (parent) dans lequel vont être successivement stockés différents composants (enfants) de type texte, normal, gras ou italique, liens hypertexte, etc.

La façon dont un composant va se comporter est dictée par un certain nombre de propriétés qui lui sont associées et peuvent être modifiées. Ainsi, le composant prenant en charge l'entête d'une page web pourra voir sa couleur d'arrière plan changée, la police de caractère du titre ajustée, etc. en fonction du thème qui aura été défini pour l'ensemble du site web.

Homogénéité d'un composant

Un composant se suffit à lui-même.

Ainsi, il doit être vu comme une entité autonome qui, une fois positionnée dans la structure d'une page web, prendra intégralement en charge l'affichage de la zone pour laquelle il a été conçu.

Lorsqu'il sera positionné en tant qu'enfant d'un composant plus important, sa portée sera donc un sous ensemble du composant parent (ex. bloc de texte au sein d'un paragraphe) et il apportera ses propres caractéristiques à cette zone.

Même un composant le plus élémentaire tel qu'un bloc de texte peut constituer un îlot particulier au sein d'une page. C'est le cas, par exemple, d'une zone lexicale comportant un passage rédigé dans une langue autre que celle de la page web. Le composant prendra alors en charge, outre la sérialisation du texte lui-même, tout le balisage sémantique indiquant aux moteurs de recherche qu'il s'agit d'un texte ayant une origine géographique différente.

Fais moi un schéma

Les moteurs de recherche, Google en particulier, sont avides de données structurées (markup schemas). Une fois insérés dans le corps d'une page HTML, ces schémas sont identifiés et analysés par les robots parcourant le web afin d'associer des blocs de texte avec une sémantique particulière.

Différents types de schémas de données existent et leurs spécifications peuvent être consultées sur le site schema.org. Le type « book » permet, par exemple, de fournir des informations complémentaires sur un ouvrage, telles que le nom de l'auteur, celui de l'éditeur, la date de parution, etc.

Ce type de balisage apporte du sens à un bloc de texte ou une zone particulière d'une page web qui, autrement, ne seraient vus par le moteurs de recherche que sous la forme d'une suite de caractères ou de symboles et traités comme tels.

Les composants mis en œuvre par le générateur de sites web Thot, outre leur aptitude à sérialiser un flux HTML / CSS, fournissent également les schémas de données qui leur sont associés lorsque ceux-ci sont pertinents. Par exemple, le composant prenant en charge l'affichage des références d'un ouvrage produira également le schéma de données de type « book » correspondant. Les différents schémas ainsi définis seront ensuite agrégés au niveau de la page et insérés dans le flux HTML sérialisé pour ête mis à disposition des moteurs de recherche, en respectant le format prévu par les spécifications.

Le format actuellement préconisé pour la sérialisation des structures de données est JSon-LD (JSon for Linking Data). Ce n'est cependant pas le seul format pouvant être utilisé puisque les microdonnées ainsi que la notation RDFa peuvent également être retenus. Les composants sont donc programmés pour utiliser JSon-LD mais il est tout à fait possible de les reconfigurer pour offrir le choix et sélectionner au niveau des propriétés projet quel format devra effectivement être mis en œuvre lors de la sérialisation

Avoir du style

Outre la fourniture du contenu, les composants prennent également en charge la présentation de ce contenu en délivrant les déclarations CSS à utiliser pour l'affichage de la page HTML.

En tant qu'entité autonome, un composant définit lui-même les différents aspects de son affichage, en accord avec le thème déclaré pour l'ensemble du site web. Il fixe ainsi ses marges, internes et externes, ses couleurs et ses polices de caractères. Pour tenir compte des besoins d'adaptation aux périphériques de type mobiles, le composant peut être amené à fournir également des requêtes média (media queries) qui seront passées à la feuille de style associée à la page web.

Image bouton cliquable permettant le retour en haut de page