SpipLab
GestionDesDocuments
PagePrincipale
::
DerniersChangements
:: Vous êtes 38.103.63.61 (
Connexion
)
Spip générait précédement des tables pour la présentation des documents. Cette page est là pour recenser les solutions possibles pour améliorer la présentation des documents ainsi que leur accessibilité. ---- {{{Coté code}}} <code> <div class="spip_documents"> <div class="spip_doc_img"> <a href="chemin/dacces/audoc/mondoc.pdf"><img src="monpdf.gif" width="68" height="50" alt="Rapport Périphéries - 78 ko - pdf" /></a> </div> <div class="spip_doc_titre">Rapport Périphéries</div> <div class="spip_doc_descriptif">un rapport sur l'internet culturel avec un texte</div> </div> </code> Proposition de sémantique : pourquoi ne pas exploiter les éléments img H4 et P pour l'image, le titre et le descriptif plutôt que de créer des DIV ? Ça serait à mon avis plus sémantique en plus d'alléger le code. {{Proposition de code plus sémantique et plus léger :}} <code> <div class="spip_documents"> <a href="chemin/dacces/audoc/mondoc.pdf"><img src="monpdf.gif" width="68" height="50" alt="Rapport Périphéries - 78 ko - pdf" /></a> <h4>Rapport Périphéries</h4> <p>un rapport sur l'internet culturel avec un texte</p> </div> </code> {{La feuille de style :}} <code> .spip_documents img {} .spip_documents h4 {} .spip_documents p {} </code> -# (StefNotabene) Attention, petite coquille : une classe c'est <code>.spip_documents</code> et pas <code>#spip_documents</code>. Tout-à-fait. Je corrige. Pour les P je suis d'accord, pour les h4 et autres surtout pas car d'une part on décide pour l'utilisateur de spip du niveau d'importance du doc comme lorsque l'on rajoute un strong et d'autre part une bonne utilisation des H fait qu'ils doivent etre imbriqués h1>h2>h3 un h3 ou h4 sans h1 ou h2 n'est pas valable Que diriez-vous de l'utilisation de <code><label></code>pour les titres au lieu de H ? : <code> <div class="spip_documents"> <a href="chemin/dacces/audoc/mondoc.pdf"><img src="monpdf.gif" width="68" height="50" alt="Rapport Périphéries - 78 ko - pdf" /></a> <label>Rapport Périphéries</label> <p>un rapport sur l'internet culturel avec un texte</p> </div> </code> {{{coté présentation}}} on peut de cette manière faire ce qu'on veut au niveau de la présentation, bordure et marge autour de l'image,texte de la légende et du titre à droite ou à gauche de l'image, couleur et ou bold sur le titre, largueur et éventuellement hauteur de chaque bloc. {{{coté défaut}}} rajout de nombreux style qui n'étaient pas dans les versions précédentes de spip mais pour ma part vu les progrès que cela amène en terme de présentation je ne m'en priverais pas. {{{coté conformité de la syntaxe}}} Il faut fermer le <code><p></code> ouvert avant et le rouvrir après l'ajout d'un doc, éventuellement remplacer les 3 div internes à div class="spip_document" par des <code><p></code> {{{ coté accessibilité}}} Supprimer les attributs de border sur l'image, mettre le moins possible de style inline. _ Vient le problème du alt, que je composerais comme cela: titre - poids du doc en ko - type du doc, si il n'y a pas de titre au doc: descriptif - poids du doc en ko - type du doc, si il n'y a pas de descriptif non plus: document - poids du doc en ko - type du doc. Pour optimiser l'accessibilité, dans le back office on peut rendre le titre obligatoire. _ Dernier point le alt doit dans l'idéal être limité à 60 charactères si il y a pas de lien sur l'image sinon 80 le tout espace compris. Si il dépasse on le coupe et il faudrait générer un attribut longdesc sur l'image qui amène sur une page créée en conséquence (fichier txt ou html) contenant le titre et le descriptif complet. (je sais à l'heure actuelle longdesc n'est que très mal gérer mais mieux vaut anticiper) {{{Et si c'était géré par un squelette ?}}} (Jacques PYRAT) Voilà l'idée : on a un couple spip_documents.php3/spip_documents-dist.html qui contient le code par défaut (au nom des balises près, je n'ai pas vérifié dans la doc de SPIP : <code> <div class="spip_documents"> <div class="spip_doc_img"> <a href="#URL_DOCUMENT"><img src="monpdf.gif" width="#DOCUMENT_WIDTH" height="#DOCUMENT_HEIGHT" alt="#TITRE - #TAILLE- #FORMAT" /></a> </div> [<div class="spip_doc_titre">(#TITRE)</div>] [<div class="spip_doc_descriptif">(#DESCRIPTIF)</div>] </div> </code> Et si l'utilisateur veut un autre code, il lui suffit de se faire un spip_documents.html (sans le -dist) pour gérer son propre affichage des documents. (goetsu) moi ça me va mais je pense que pour générer du code valide cela risque de se compliquer, il faut vérifier si le bloc est dans un paragraphe ou non et niveau accessibilité cela ne change rien pour le alt qui doit afficher le titre du doc ou la description si pas de titre ou document. ..
Fonctionne avec
Spikini
, une modif de
WikiNi