Partage

Mon site est multidesignable

Si vous voulez lui faire profiter de vos talents...

<< 1 2

Sujet résolu

Ejis

25 mars 2006 à 11:20:27

Bon, et bien conclusion:

J'avais d'énormes lacunes... -_-

Donc, changements:

Les <table> ont été corrigées avec la mise en place de <caption> et des summary.
Menus ENTIEREMENT convertis en liste, et j'en ai appris plus sur les balises et la CSS, merci yom!
J'ai fait en sorte de diminuer l'utilisation de <br />
La plupart des <table> ont été converties en liste, notamment les messages d'erreur lors du remplissage des forumlaires
Je n'ai pas converti le forum en <div>, car j'ai eu beau essayer pendant une heure, je n'avais que des bugs... -_- Alors pour trouver une alternative, j'ai mis une <thead> avec les infos sur les deux colonnes des topics.
Je n'ai pas trop trouvé l'utilité des balises <colgroup> et <col>. T'façon, elles ne sont pas obligatoires.

Donc maintenant, je pense que le code sera un peu plus à ta convenance! Et en plus, ça charge plus vite!! o_O

Donc merci de tes baffes, yom, sans racune!

yöm

26 mars 2006 à 12:00:02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

Gné ?

<h1>

Game RemiX Zone
<img class="block" alt="Game RemiX Zone" src="./templates/BlueDenjin/images/page-banniere.gif" />

</h1>

Tu veux vraiment pas me changer ça ?

Pour tes listes avec la classe inline, tu ferais mieux de ne l'appliquer qu'à ta balise <ul> c'est plus lisible.

Tes identifiants et classes n'ont toujorus pas été corrigées, évite les préfixes inutiles, évite de tout identifier et "classer"

Indique un titre de 5ème niveau, pourtant il se situe juste en dessous d'un <h1>, bizarre.

Apprends désormais à séparer forme et contenu en utilisant des classes pour tes titres (ou alors tu utilise des sélecteurs).

Confusion avec "id" ?

<thead>
<tr class="denjin">

<th scope="col">Newseur</th>
<th scope="col">News</th>
</tr>
</thead>

Voilà ce que je ferais à ta place

(note aussi là où je met la classe)

Bonjour à tous,
<br />
<br />Petite news pour vous dire que je retire temporairement le PackDesign.
<br />

<br />Pourquoi?
<br />
<br />Le site avait beau passer avec succè[...]
<br />
<br />Mais le code ayant ét[...]
<br />
<br />
<br />Point positif: le site charge plus vite!!! [...]
<br />
<br />
<br />A bientôt! <img class="smile" src="./i" />[...]
<br />
<br />
<br />

Voilà ce que je ne ferais pas

utilise des paragraphes (même chose à propos du pseudo <h6> parce qu'il n'est pas utilisé pour un titre, même chose pour le <span> de fin

Pris en flag' pour délit d'utilisation de pseudo-spéaration de forme et de contenu

<ul id="pied">
&

Un bon point, deux bon points ...

Au boulot maintenant !

Ejis

26 mars 2006 à 14:48:49

Citation : yom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">



Gné ?

Oups! ^^"""

Alors, là, tu regardais la news, rédigée et sauvegardée sur MySQL.

Les "<br />" remplacent "\n"

Mais j'y avais pensé avant, et je sais très bien que si ça n'avait pas été dynamique, j'aurais utilisé "<p>"...

Je peux envisager de mettre la variable du texte entre "<p></p>", et à chaque fois qu'il y a deux "\n", je les remplace par "</p><p>", et le tour est joué!

Pour le titre, non, désolé, j'ai essayé, et je ne crois pas qu'on puisse mettre.... Ah si, j'ai une idée...

Je te le répète: les "<h*></h*>" sont une hiérarchisation des titres. S'il fallait absolument mettre les <h*> dans l'ordre, le W3C me refuserait la validation. Et regarde le code du SDZ, ils mettent "<h5></h5>" sur les titres du menu.

Pour les <ul>... En effet, je vais voir ça.

EDIT: corrigé pour le petit commentaire.

J'ai remplacé les <table> de messages (quand on a rempli un formulaire) par des <ul>, ça fait plus léger.

yöm

26 mars 2006 à 19:52:53

Ce n'est pas ce que je veux dire, mais tes tires de menus devraient tous êtres de h2, ils sont au même niveau mais en dessous de h1, tu me suis ? Le site du zéro n'est pas forcément un bon exemple de site bien codé.

En fait les h* ça représente une arborescence, pas un ordre, mais quand tu fais une arborescence t uas le 1er niveau, le deuxième etc ...

Sinon pour la récupération des données, pourquoi tu ne fais pas en sorte que seuls les zones de texte entourées d'un saut de ligne vide soient prise en compte comme des paragraphes ?

Ejis

26 mars 2006 à 20:02:38

Bien je t'avoue avoir essayé, et ça ne marche pas.

Logiquement, il aurait dû remplacer "\n\n" par "<p>", mais non, l'a pas voulu.

Donc c'est la <td> qui fera malheureusement office de conteneur, même si ce n'est pas propre, je te l'accorde.

EDIT: Officiel, ça marche pas.

yöm

27 mars 2006 à 22:11:43

Tu veux pas demander aux PHPistes comment ils font ?

Ejis

29 mars 2006 à 14:14:12

Je peux toujours, mais bon, ce qui logiquement aurait dû marcher n'a pas marché...

Bon, j'ai réfléchi et pour le <h1>, je ne vois pas trop le problème, puisque le titre se trouve bien dedans. Et mettre une <img /> dans une <h*> n'est pas illégal. Tant que la sémentique est respectée.

Bon, ces derniers temps, j'ai plus insisté sur le PHP pour le rendre plus rapide, et sur le contenu (ajour d'un RemiX).

Niveau XHTML, je crois avoir réglé la majorité de mes problèmes sémentiques.

yöm

29 mars 2006 à 17:20:45

Mon soucis pour ton entête c'était de séparer le contenu et la forme, avec une image d'entête en arrière plan tu aurais pu la changer à ta guise en fonction des designs.

Mais voici la structure des titres :

<h1>[...]</h1>

<h5>Site</h5>
<h5>Statistiques</h5>
<h5>Site valide</h5>
<h5>Publicités</h5>

<h2>Bienvenue!</h2>

<h3 class="center">Game RemiX Zone, un site:</h3>
<h3 class="center">News</h3>

<h6>[...]</h6>

J'ai utilisé une indentation qui respecte les niveaux d'affichage, j'espère que maintenant tu me suis. Si on oublie les cinquièmes et sixièmes niveaux c'est très bien, mais le validateur ne les oublie pas lui

Ejis

1 avril 2006 à 8:43:33

Je continue à dire que point de vue sémantique, mes titres sont justes!

Pour <h1>, j'avais compris, mais je ne crois pas qu'il soit possible de centrer un arrière-plan... Si? o_O

Là, en ce moment, je suis en train de virer certaines <table> qui ne servaient à rien, je parle des formulaires. Dans leur état actuel, ils sont illisibles pour les aveugles, or un site de son qui ne facilite pas leur navigation... En plus, je n'avais pas mis de <label>, que je trouve bien pratiques!

Après, une fois un remaniement sémantique effectué, je m'atèlerai à une révision des couleurs. En fait, je crois plutôt que ça vient de nos écrans respectifs. Chez moi, ça fait pas trop mal, mais j'ai remarqué que chez d'autres, ça agresse. Je vais donc revoir tout ça, voire réfléchir à un design plus poussé. Ma spécialité, c'est lus le PHP, en fait!

yöm

1 avril 2006 à 17:42:30

Tu peux centrer ton arrière-plan ! Il suffi de faire :

h1{
background: no-repeat 0 50% url("../images/page-banniere.gif");
}

Je crois qu'en remplaçant 0 50% on obtient la même chose que top center.

Pour ce qui est des titres, tu m'as obligé à farfouiller les ressources et je n'ai rien trouvé, j'étais pourtant persudadé qu'on ne pouvait mettre un titre de niveau 5 directement en dessous d'un titre de niveau 2, mais finalement c'est plus logique comme ça.

Citation : la spé selon Karl Dubost

Certaines personnes considèrent le fait de sauter les degrés de titre comme une mauvaise pratique. Elles acceptent « H1 H2 H1 » et pas « H1 H3 H1 », puisque le degré de titre « H2 » a été sauté.

http://www.la-grange.net/w3c/html4.01/cover.html

Mais revois quand même tes titres car l'importance des titres du menu me semblerai plus judicieuse si elle se fait par rapport au menu et pas à la page (d'ailleurs, pourquoi utiliser <h5> ?)

Ejis

1 avril 2006 à 20:32:42

<h1> = Titre principal du site

<h2> = Section consultée

<h3> = Titre d'un sujet consulté, par exemple

<h4> = Titre de l'action faite sur le sujet, par exeple l'édition d'un message

<h5> = Menus. J'ai jugé que les menus étaient moins prioritaires que la section consultée

<h6> = Ancre pour linker les messages dans un sujet, via le petit "#" (Oui, je sais, c'est comme le SDZ, mais PHPBB le fait aussi via la petite icône de message... Pas très visible, donc pourquoi pas?)

Voilà ma hiérarchie.

Pour <h1>, je vais voir ça de près, merci!

yöm

2 avril 2006 à 11:33:22

Sémantiquement une ancre c'est crée par un lien <a>, pas par un <h6> et PhpBB est le meilleur exemple de forum merdique du point de vue de l'accessibilité et des standards.

Pour les h4 j'ai regardé ça de près, ça se tiens mais j'ai quand même failli pleurer :

<div class="titre">
<span class="font_13"><a href="../" title="Revenir à l'accueil">Accueil</a> - </span><h4>Inscription à Game RemiX Zone</h4>

</div>

Et pour les <h5> : les titres du menus sont plutôt relatifs : ils se font à part dans une section menu. Alors autant redéfinir tout ça à partir de <h1>.

Fait comme tu veux mais tu pourras ainsi libérer 2 niveaux de hiérarchisation pour tes messages

Ejis

2 avril 2006 à 12:32:26

Citation : yom

PhpBB est le meilleur exemple de forum merdique du point de vue de l'accessibilité et des standards.

Pour les h4 j'ai regardé ça de près, ça se tiens mais j'ai quand même failli pleurer :
<div class="titre">
<span class="font_13"><a href="../" title="Revenir à l'accueil">Accueil</a> - </span><h4>Inscription à Game RemiX Zone</h4>

</div>

Pour PHPbb, japprouve. Je ne comprends pas qu'ils n'aient pas eu la volonté de respecter les standards, alors que c'est le type de forums le plus utilisé... En plus, leur gestion des messages est aberrante...

Oui, je sais, je n'ai as pris le temps de le changer, je compte convertir ça en liste prochainement, après avoir revu les formulaires.

Il y a une aberration similaire sur les MP, d'ailleurs! :lol:

yöm

2 avril 2006 à 12:54:57

En ce qui concerne les <h5> et les <h6> ?

Ejis

2 avril 2006 à 13:31:49

Citation : yom

En ce qui concerne les <h5> et les <h6> ?

Je vais y réfléchir, mais c'est pas bête... Celà dit, je n'accorde pas trop d'importance à un message dont le titre est "posté le..." (son seul véritable intérêt étant de pouvoir revenir au message après édition, par exemple), puis le menus, je sais pas, j'ai trouvé que <h5> était suffisant. Certes, c'est un menu détché, mais bon, s'il avait été placé à droite, je me demande ce que tu en aurais dit au sujet du choix de balises <h5>... Mais bon, c'est pinailler, je trouve. Si le moteur doit référencer une page, il se sentira obligé de traîter les menus en priorité s'ils étaient en <h2>, alors que ce n'est pas le plus important dans a consultation de la page. Il passerait d'abord par le titre principal, la section, le sujet, le "sous-sujet", les menus, et les messages. Enfin, je l'avais conceptualisé comme ça, sachant qu'un bot se réfère à la sémantique des balises pour le référencement.

yöm

2 avril 2006 à 14:02:46

Bien vu pour le moteur de recherche, je te laisse faire tes choix. En ce qui concerne les "posté le ..." ce ne sont pas des titres, et ils ne devraient pas être contenu par un <hn>

Ejis

2 avril 2006 à 14:25:20

Je le sais très bien, mais pour linker un message en particulier, il n'y a malheureusement pas d'autre solution. Mais en <h6>, ce n'est pas gravissime. Puis, si, on peut dire que c'est un titre, d'une certaine manière.

yöm

2 avril 2006 à 18:30:32

Euh la balise <p> ça existe pas ?

Ejis

5 avril 2006 à 13:32:44

Voilà, j'ai changé les formulaires et revu le code qui t'a fait pleurer!

Et j'ai aussi désaturé les couleurs, sur les bons conseils d'un membre.

Pour <h6>, en fait, je vais le garder. Je comprends bien que tu n'approuves pas, mais en fait si, on peut le considérer comme un titre.

Walà!

yöm

5 avril 2006 à 17:46:07

Ce n'est pas un titre, c'est des informations.

<< 1 2