Attention: Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.
Warning: The information you are reading may be obsolete, this post was published more than 2 years ago.
Si il y a bien une balise HTML qui est mal connue, c’est bien la balise object. Elle fait partie officiellement du HTML depuis sa version 4 mais, de part le manque de renouvellement d’Internet Explorer pendant 5 ans, son utilisation pour autre chose que l’insertion de contenu Flash dans une page n’a jamais été mise en avant. Un exemple d’utilisation pertinente de la balise object peut se faire dans le cadre d’un comic strip . L’un des webcomic que je suis régulièrement est geeksworld de Salagir. J’ai remarqué que pour permettre une meilleur indexation de son comic, Salagir a eu la bonne idée de retranscrire l’entièreté des bulles de son strip dans la page qui le contient. Ainsi les robots qui vont naviguer sur son site vont non seulement indexer l’image mais également les informations textes qui sont liées celle-ci. pour accomplir cela Salagir a mis au point un script qui permet d’extraire le texte d’un fichier PSD et il utilise le schéma HTML suivant :
<img src="/path/to/my/image.png" alt="" /> <div class="textstrip">Le texte du strip vient ici</div>
Pour fonctionner correctement, Salagir a donc rajouté la règle display:none; pour la balise div ayant pour attribut class="textstrip". Cette construction bien que fonctionnant parfaitement ne permet pas d’associer directement le texte à l’image en ce sens que l’image est indépendante du texte et, à moins d’utiliser des microformats spécifiques aux webcomics (je ne sais pas si cela existe…) le lien entre texte et image n’est pas évident. Une solution pour remédier à ce manque de relation serait, dans ce cas, d’insérer l’image en utilisant la balise <object>. Comment ? Suivez le guide.
1ère étape : on insère l’image en utilisant les recommandations du W3C et la balise object :
<object type="image/png" data="/path/to/my/image.png"> </object>
2ème étape : on ajoute le texte correspondant au webcomic à l’intérieur de la balise object :
<object type="image/png" data="/path/to/my/image.png"> <div>Le texte du strip vient ici</div> </object>
Vérifions si cela fonctionne bien sous tous les navigateurs récents ?
- La bonne nouvelle et que cette construction fonctionne parfaitement dans tous les navigateur récents, y compris Internet Explorer 8. Le texte encapsulé dans le tag
objectn’apparaît pas mais peut toujours être parser par les robots des différents moteurs de recherche. - La mauvaise nouvelle c’est que toutes les anciennes versions de IE, y compris IE7, se comportent différemment des recommendations du W3C, et montre l’image dans une boite avec l’apparition d’une échelle (scroller).
Mais cela n’est pas grave en utilisant les commentaires conditionnels de IE, on peut obtenir le même résultat dans les versions antérieurs à Internet Explorer 8. Ce qui nous donne un résultat fonctionnel sous tous les navigateurs. Etudier bien la source du fichier pour comprendre l’astuce utilisée.
L’étape ultime serait d’utiliser la balise dialog de HTML5 ou les microformats pour encore mieux formaliser les dialogues du strip. Mais ça c’est une autre histoire. Que pensez-vous de cette solution ?
Je remercie Salagir, pour m’avoir permis d’utiliser son strip.
Article intéressant, mais pourquoi ne pas utiliser les attributs title ou alt pour rajouter le texte, y’a une limitation de caractères ? (il me semble sous IE, pas sous FF)
Ceci dit, je n’aurais pas pensé à object pour ce genre d’utilisation.
Concernant les microformats, ça semble être le sujet à la mode depuis 1 ans, mais y’a t’il vraiment un avenir pour ça ? Et surtout, quels avantages apportent-ils concrètement ? (à part faire des hacks et des patchs pour les vieux browsers qui ne gèreront pas ces microformats…)
@PKRG . Les attributs
altettitlene servent pas à cela, non, on aurait pu utiliser l’attributdesc. Suivant la définition du HTML, l’attributdesc, que personne ou presque utilise permet d’indiquer une URL contenant une explication détaillé de l’image et dans notre cas du webcomic. Problème, l’option d’avoir une page alternative pour le contenu n’a pas était retenue par Salagir lors de la création de son Webcomic… et soyons franc le but est de permettre une meilleur indexation de strip ET de sa page et non de renvoyé vers un autre page. En ce sens, l’utilisation de object et, à mon avis, le compromis le plus simpleTout à fait. rel=alternative et desc ne m’assuraient pas l’indexation (certes j’aurai vu faire des tests)
desc est un attribut dont je n’ai JAMAIS, JAMAIS réussi à comprendre l’utilisation. Selon les sources, on écrivait du texte dedans, ou on écrivait l’url d’un fichier texte avec une description.
Aucun navigateur ne réagissait pareil, aucun validateur n’acceptait mes tests.
Et quand on écrit du texte dans un attribut, que ce soit desc, alt ou title, on a plusieurs problèmes si on veut mettre des retours à la ligne, du html où simplement du caractère spécial. Le rendu est aléatoire selon les navigateurs.
Je me rappelle encore des délires sur mon image “précédent”, dont j’ai mis en alt “<” et “<“. Aucun ne marchait à la fois sur les navigateurs et le navigateur. Au final, j’ai été sauvé en utilisant “«”.
Une question sur objet. Tu spécifies le type ce qui est propre, mais moi des fois j’ai des jpg au lieu de png. Donc soit j’écris le type dynamiquement, ce qui est chiant, soit je m’en passe.
A moins qu’on ait le droit à type=”image/*” ou un truc du genre ?
Bon
1) ca fait chier les système de com qui virent quand je fais plusieurs retours à la ligne.
2) j’aurai vu => j’aurai Pu
3) en alt, j’avais bien sûr essayé “<” et “& gt ;” (fait chier le système de coms qui… bref)
& lt ; pas & gt ;
bien sur…
Joli devise “Pas un seul de vos ancêtres n’est mort jeune. Ils ont tous copulés au moins une fois.”
Mais fôte d’accord : ils ont tous copulé (sans s)