Cette approche est certainement préférable... quand c'est possible.
Je suis dans un cas tout à fait particulier:
il s'agit de la reprise d'un site qui date du début des années 2000, développé par une personne qui n'a que des connaissances très limitées en HTML, aucune en CSS, PHP, JS, et de plus cette connaissance limitée est celle des années en question.
Quand j'ai voulu migrer le site, j'ai dû par exemple reprendre des milliers d'images encadrées du genre
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td background="/luluborder_tl.gif" width="16" height="12"></td>
<td background="/luluborder_top.gif" width="210" height="12"></td>
<td background="/luluborder_tr.gif" width="16" height="12"></td>
</tr>
<tr>
<td background="/luluborder_left.gif"></td>
<td align="center" class="vuescadrephoto">
<a href="javascript:PopupImage('ptahhtp_doorway.gif')">
<img src="photo/ptahhtp_doorwayv.gif" width="210" height="220" border="0">
</a><br>
Murs d'entrée Est et ouest<br>
<span class="geneva2noir">(d'après "Tomb of Ptah-Hetep",<br>
<i>ERÀ </i>, London, 1896, par Paget et Pirie)</span>
</td>
<td background="/luluborder_right.gif"></td>
</tr>
<tr>
<td background="/luluborder_bl.gif" width="16" height="16"></td>
<td background="/luluborder_bot.gif" height="16"></td>
<td background="/luluborder_br.gif" width="16" height="16"></td>
</tr>
</table>
et les transformer en
<figure data-pres="" class="diapo left width40">
<img src="photo/ptahhtp_doorwayv.gif" alt="" onclick="PopupImage('ptahhtp_doorway.gif')">
<figcaption>
Murs d'entrée Est et ouest<br>(d'après "Tomb of Ptah-Hetep", <br>
<i>ERÀ, London, 1896, par Paget et Pirie)</i>
</figcaption>
</figure>
avec le CSS qui va bien pour obtenir une présentation correcte et de plus responsive.
J'ai fait tout cela
(et plein d'autres genre du même tonneau) avec des programmes en PHP qui analysaient le DOM des fichiers HTML et créaient de nouvelles pages gardant la sémantique mais avec un style plus à la mode.
Mais de plus il n'était pas question que le propriétaire du site soit obligé d'apprendre à faire cela par lui-même en HTML.
Il fallait donc un outil de génération des "diapos"
Comme il n'était pas question non plus de faire cela en PHP, j'ai fait la génération en JS
Cette <figure> est donc elle même générée par un script
<script>diapo('ptahhtp_doorwayv.gif', '', 'Murs d\'entrée Est et ouest<br>(d\'après "Tomb of Ptah-Hetep", <br><i>ERÀ, London, 1896, par Paget et Pirie)')</script>
et pour faciliter l'écriture de cet appel de script
(qui lui-même fait plus de 150 lignes de JS), c'est fait sous la forme d'un snippet DreamWeaver qui s'appelle "diapo"
Et encore la difficulté reste de devoir protéger les \' à la main, je ne suis pas allé plus loin pour le moment, mais je suis en train de travailler le sujet.
C'est dans le cadre de ce réseau de contraintes que se situe mon action.
Le propriétaire ne connait pas le concept de "listes" sous la forme <ul><li>...<li></ul>
Pour l'instant il utilise, à l'intérieur d'une balise <p> que j'ai eu quelques difficultés à lui faire utiliser, des séquences <br>• ce qui n'est pas sémantiquement satisfaisant mais produit le résultat visuel qu'il désire.
Le but de cette tentative est de créer un snippet "liste" qu'il lui suffirait d'appeler en toute circonstance et qui générerait quelque chose comme
<ul>
<li> </li>
</ul>
Mais comme l'essentiel de ces pages est constitué de diapos à gauche ou à droite et d'un texte qui flotte dans l'espace qui reste, ce n'est pas envisageable s'il faut faire autre chose que mettre deux snippets côte à côte.
Pour <p>, pas de problème, il est stylé en conséquence et tout se passe très bien, mais pour <ul>, je ne vois pas très bien comment faire, et je pense en rester là pour l'instant
Modifié par PapyJP (02 Sep 2017 - 11:19)
