JeuWeb - Crée ton jeu par navigateur
Travaillons la sémantique, la validité et l'accessibilité - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Travaillons la sémantique, la validité et l'accessibilité (/showthread.php?tid=3319)

Pages : 1 2 3

Travaillons la sémantique, la validité et l'accessibilité - Plume - 21-11-2008

Pelope !

Voilà, je travaille sur un document que j'ai intitulé modestement "Guide sur les règles et conventions (X)HTML/CSS".

Dans ce document, je présente les conventions et outils disponibles pour créer une interface graphique en (X)HTML/CSS. L'objectif est de réunir l'ensemble des règles qui régissent l'écriture de code (X)HTML et CSS pour la réalisation d'un site Web, et ce dans l'optique :
  • d'assurer une certaine homogénéité du code source;
  • de capitaliser le travail de création de styles CSS;
  • d'améliorer l'accessibilité de chaque page en donnant une sémantique forte au contenu;
  • de fournir un support homogène et sûr des différents navigateurs internet

Et donc j'aurai besoin d'avis pour le construire toujours au mieux.

Premier jet : http://plumeconception.olympe-network.com/doc/Guide.html

P.

RE: Travaillons la sémantique, la validité et l'accessibilité - Thedeejay - 22-11-2008

tres bien, le seul bémol est la largeur de ta page... si tu pouvais la faire extensible car cela prend la moitié de mon ecran et les textes sont sur 15 lignes au lieu de 3...

RE: Travaillons la sémantique, la validité et l'accessibilité - Plume - 22-11-2008

Chacun ses préférences. C'est le problème. Beaucoup ne vont pas aimer de devoir traverser tout l'écran dans sa longueur avec les yeux. C'est plus fatiguant.

Mais je peux le faire.

P.

[edit] Fait.

RE: Travaillons la sémantique, la validité et l'accessibilité - Melimelo - 23-11-2008

maintenant c'est énorme pour moi je dois scroller :p et en plus plein de bug niveau affichage.

Sinon c'est bien fait ton truc

RE: Travaillons la sémantique, la validité et l'accessibilité - Plume - 23-11-2008

Ui, j'dois corriger certaines merde d'affichage.

Une question que je me pose par exemple : Comment coder un formulaire ? Faut il mettre chaque champ dans un <p></p> ou bien les laisser libres ?
Code :
<form action=""' method="" id="">
<!--
Avec le <p></p>
-->
<p>
  <label for=""></label><input type="text" name="" id="" value="" />
</p>
<!--
Libre
-->
<label for=""></label><input type="text" name="" id="" value="" />
Ou bien d'autres avis ?

P.

RE: Travaillons la sémantique, la validité et l'accessibilité - Ruz - 23-11-2008

Code PHP :
<?php 

<dl>

<dt><label></label></dt>

<dd><input ... /></dd>

...

</dl>
la mise ne forme sera également facilitée par CSS et c'est valide XHTML

L'utilisation du fieldset est également utile... et on peut ne pas s'en servir après, si pas besoin... (tjs via les CSS)

sinon, ton article:
header: un demi-écran pour aucun contenu, ca fait bcp... (padding-top: 130px; sur .mSite)
la partie 'Validation W3C' est indigeste, aucune mise en forme
'Méthodologie et outils'=> un peu succinte ta liste... opéra? linux?
Quant à IE6... perso, c'est une relique, plutôt inviter l'utilisateur à mettre à jour (IE8 n'est-il pas annoncé?) (avis personnel) (au hasard: http://www.end6.org/)

sinon, j'ai survolé, pas l'air mal...

RE: Travaillons la sémantique, la validité et l'accessibilité - Sephi-Chan - 23-11-2008

Plume a écrit :Une question que je me pose par exemple : Comment coder un formulaire ? Faut il mettre chaque champ dans un <p></p> ou bien les laisser libres ?
Code :
<form action="" method="" id="">
<!--
Avec le <p></p>
-->
<p>
  <label for=""></label><input type="text" name="" id="" value="" />
</p>
<!--
Libre
-->
<label for=""></label><input type="text" name="" id="" value="" />
Ou bien d'autres avis ?
Comme tu l'expliquais, les <label /> et <input /> doivent être inclus dans des blocs, donc effectivement dans un <p />, <div /> ou un couple <dt /> et <dd />.


Sephi-Chan

RE: Travaillons la sémantique, la validité et l'accessibilité - Plume - 23-11-2008

La question se pose pour la validité, l'accessibilité mais aussi la sémantique.
Est-ce que dans ce cadre, dt / dd sont adaptés ?

P.

RE: Travaillons la sémantique, la validité et l'accessibilité - Sephi-Chan - 23-11-2008

Pour ma part, la solution la plus sémantique semble être le <div />, puisqu'une ligne de formulaire n'est clairement pas un paragraphe ni une définition, d'autant que le <dt /> fait double emploi avec le <label />).

Organiser le formulaire en zone n'a donc pas de sens sémantique, c'est décoratif, et c'est pourquoi la balise <div /> me semble être adaptée, puisque justement elle n'influe pas sur le sémantique.


Sephi-Chan

RE: Travaillons la sémantique, la validité et l'accessibilité - Plume - 23-11-2008

Dans cette optique, pourquoi pas le span ?

P.

[edit]
Dans un <table>, il vaut mieux faire :
Code :
<table>
  <tr>
    <td>
      Du texte. En paragraphe. Ou pas.
    </td>
  </tr>
</table>

Code :
<table>
  <tr>
    <td>
      <p>
        Du texte. En paragraphe. Ou pas.
      </p>
    </td>
  </tr>
</table>

PS : Je pose des questions, certaines ont des réponses dans le document mais je me pose toujours des questions, donc je demande pour ensuite reporter des modifications. Personnellement, j'ai déjà généralement mes avis sur la question Smile