Retour aux sources

Bonjour

A l'origine du www, il y avait la communauté scientifique, à laquelle j'avais l'honneur d'appartenir et un HTML très basique permettant de mettre en page des articles illustrés, un peu genre revues comme Scientific American.

Cela fait bien longtemps que je n'ai pas eu à faire une page de site de ce genre, en général c'est plutôt des tables et/ou des collections d'images.

Je voudrais savoir s'il y a une "bonne pratique" pour faire ce style de page, plutôt que de réinventer la roue.

Voici le schéma que j'utilise, mais je suppose qu'il y a beaucoup mieux:
bien entendu je mets des classes dans une feuille de stype plutôt que des style=

<h1>Titre du chapitre</h1>
<h2>Titre du paragraphe</h2>
<p>Paragraphe de texte</p>
<p>
    <img style="float:left" src="..." .../> et le texte qui entoure cette image
</p>
<div>
    <div style="float:left;border:...;"> <!-- image et son titre dans un cadre -->
        <img ...>
        <div style="text-align:center;">Titre de l'image</div>
    <div>
    <p> le texte qui entoure l'image encadrée et titrée</p>
</div>

Vos conseils sont chaudement désirés!

Bonjour,

Rapidement (sur Smartphone) :
- tu peux commencer par valider ton code (ici il manque par ex. les alt des images)
- tu peux emloyer les éléments HTML5 de structure tels que article
- tu peux assez facilement injecter des microdatas dans ce genre de structure

Bonne journée

Olivier C a écrit :
Exemple pour un élément image et son texte en html5 :

<figure>
    <img src="./Images/demo/ponton.jpg" alt="Ponton">;
    <figcaption>Stet clita kasd gubergren, no sea takimata sanctus est</figcaption>
</figure>

Bonne remarque, j'achète!
Edit : j'ai enfin compris que ce que je prenais pour une aile d'avion vue d'un hublot était en fait un ponton

Raphael a écrit :
Bonjour,

Rapidement (sur Smartphone) :
- tu peux commencer par valider ton code (ici il manque par ex. les alt des images)
- tu peux emloyer les éléments HTML5 de structure tels que article
- tu peux assez facilement injecter des microdatas dans ce genre de structure

Bonne journée

Réponses:
1) bien entendu, je met des "alt" dans les VRAIS documents, ici ce n'est qu'un squelette
2) <article>, dans mon cas, c'est tout ce qui n'est pas <header> et <footer>, c'est à dire que ça encadre tous mes paragraphes, je vais bien sûr le faire.
3) insérer des microdatas, je l'ai fait dans un autre cadre, ça n'a pas l'air de servir à grand chose, mais pourquoi pas
4) quid des "sections"?

Voici la structure à laquelle j'arrive actuellement;

<header>.......</header>
<nav id="menu">.... </nav>
<article
    <h1>titre de l'article</h1>
    <section>
        <h2>titre de chapitre</h2>
        <div>
            <figure>......</figure>
            <p> .........</p>
        </div>
        <div>
            <figure>......</figure>
            <p> .........</p>
        </div>
    </section>
    <section>.....</section>
</article>
<aside class="bibliography>
    <h2>Bibliographie<:h2>
    <ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
    </ul>
</aside>
<footer> ... </footer>

Le tout dans une div container avec un max-width pour pouvoir centrer horizontalement sur grand écran

Vos propositions d'amélioration sont toujours les bienvenues.
Modifié par PapyJP (05 Jul 2015 - 09:43)

PapyJP a écrit :

3) insérer des microdatas, je l'ai fait dans un autre cadre, ça n'a pas l'air de servir à grand chose, mais pourquoi pas

Disons que tout le monde va chercher de la Sainte Sémantique là où elle n'existe pas (des classes "sémantiques", des balises "sémantiques", etc.) alors que la vraie sémantique est représentée par les microdatas.

Un peu de lecture ?
http://www.alsacreations.com/article/lire/1509-microdata-microformats-schema-semantique.html

Raphael a écrit :

Disons que tout le monde va chercher de la Sainte Sémantique là où elle n'existe pas (des classes "sémantiques", des balises "sémantiques", etc.) alors que la vraie sémantique est représentée par les microdatas.

Un peu de lecture ?
http://www.alsacreations.com/article/lire/1509-microdata-microformats-schema-semantique.html

Oui, tout à fait d'accord.

J'ai toujours pensé que l'utilisation du mot "sémantique" pour designer les balises était un "hype". D'autant que pour des raisons de compatibilité ascendante on a gardé du CSS implicite dans les balises, c'est à dire que sauf à tout redéfinir précisément dans son propre CSS on traine des héritages de présentation dans des balises qui datent d'avant CSS1.

Par contre ajouter des balises microdata est un gros travail quand on le fait à la main.
Dans un autre contexte, je n'écris pas de HTML à la mimine, tout le HTML est généré en PHP à partir de fichiers XML, je n'ai donc pas trop de mal à mettre les infos sémantiques à part et les marier avec le texte au moment de la génération du HTML. Mais pour ce site à la rénovation duquel je collabore, je ne vais pas demander aux gens de trop changer leurs habitudes.
Sur le fond, je n'ai pas vu le moindre impact concret de mes microdata slur le référencement ou l'affichage par Google. J'ai l'impression que c'est beaucoup d'efforts pour pas grand chose.
Je vais -- comme toujours -- lire ton article avec attention pour voir si je dois changer de position et si je trouve le "killing argument" (tant qu.à etre dans le "hype"..)