Votre avis : dictionnaire encyclopédique égypte

Bonjour à tous,

Voici mon petit site sans prétention, appelé à évoluer du point de vue des fonctions. Qu'en pensez-vous ?

http://egypte.olympe-network.com/

Je précise : il n'y a volontairement quasiment aucun <div id="">.

Merci d'avance pour vos remarques !

Vu que tu mets tous tes articles sur la même page, tu devrait mettre des ancres sur les titres de ceux-ci.
Afin que l'on puisse donner directement le lien de l'article. Et pas qu'on doive donner le lien de la page et dire "cherche l'article x".

Tu penses qu'il faut faire un "nuages" de liens-ancre en tête de page ?

Bonjour, (avis d'un gros débutant)

N'est-ce pas un peu dommage que rien dans la page d'accueil en fasse penser à l'Egypte? C'est fait exprès?

Et sinon je trouve que la barre de recherche grise est un peu eclipsé par rapport au reste, surement à cause de se couleur et du bandeau nouveauté au dessus (je verrais bien un échange de couleur entre les deux), et des vides entre les options.

Comme les ancres sont déjà là :

<a name="aa"></a>

Il suffit d'ajouter un petit caractère pour créer le lien, par exemple :

<a name="aa" href="#aa">#</a>

Mais j'aime pas trop perso, ça manque de sémantique, j'utiliserais les listes de définitions qui sont très bien adaptées dans ton cas :

<dl>
  <dt><a name="aa" href="#aa">Aâ.</a></dt>
  <dd><span class="discipline">Mythologie • Nom propre. </span>Celui
    dont le nom signifie «&nbsp;le Grand&nbsp;», n'apparaît que dans les représentations du temple d'Horus à Edfou. Avec sept
    autres divinités, les «&nbsp;<em>chebtyou</em>&nbsp;», les huit dieux anthropomorphes «&nbsp;enfants de Tatenen&nbsp;» participent à la création du monde.</dd>
  <dt><a name="aa-kheper-ka-re" href="#aa-kheper-ka-re">Âa-Kheper-Ka-Rê.</a></dt>
  <dd><span class="discipline">Histoire • Nom propre. </span>Nom de couronnement de Thoutmosis Ier.</dd>
  <dt><a name="aa-senedj" href="#aa-senedj">Âa-Senedj.</a></dt>
  <dd><span class="discipline">Mythologie • Nom
      propre. </span>Dieu ophiocéphale gardien du temple d'Horus d'Edfou. Âa-Senedj, chef de la troisième
      des quatre compagnies de dieux-gardiens du temple d'Horus à Edfou, est
      en charge avec les quatorze membres de sa compagnie d'éloigner l'ennemi
      venant à l'Est du domaine d'Horus. Parfois représenté avec des poignards
      ou un harpon, Âa-Senedj figure sur la façade du temple d'Horus à Edfou,
      dans la rainure qui accueillait autrefois l'oriflamme entre Horus et Hathor
      sur le môle Est. </dd>
</dl>

Avec comme css, un truc du genre :

dt {
	display: block;
	font-weight: bold;
	float: left;
	margin-right: .5em;
}
dt a {
	color: #000;
	text-decoration: none;
}
dd {
	margin: 0;
	padding: 0;
}

Pour garder la même présentation...
Modifié par Patidou (12 Sep 2008 - 15:28)

Patidou a écrit :
Mais j'aime pas trop perso, ça manque de sémantique, j'utiliserais les listes de définitions qui sont très bien adaptées dans ton cas.

+1
Elles sont là pour ça, autant en profiter !

Sinon, c'est très sobre, très épuré (voir un peu trop même ?).
J'aime bien dans l'ensemble. Mais comme le souligne ThePatatoes, c'est un peu dommage que l'univers graphique ne nous plonge pas plus dans l'Egypte ancienne.

Et une dernière petite chose : je n'aurais pas encadré l'image et sa légende.
Je l'aurais laissée en dehors du cadre, elle se démarque suffisamment comme cela.

Salut,

Ce qui me gène c'est que je suis en 1600 x 1200 pixels sur cet écran, et qu'une fois arrivé au bout d'une ligne j'ai pas envie de fatiguer mes yeux à refaire tout le chemin en sens invese pour aller à la ligne suivante.
Il serait bien de déterminer une largeur maximale pour ton site, ou alors gérer les choses en plusieurs colonne. Une colonne qui dépasse les 1000px de large, ca devient vraiment trop pénible à lire.

+1 pour l'ambiance.
Sans forcément placarder d'images du sphynx ou des pyramides, avoir un hiéroglyphe en très légère trame derrière chacune des lettres de l'alphabet de ton index, une typo pour exotique pour le titre du site (en image à ce moment là), et une mise en forme un peu intimiste du texte introductif façon papyrus pourraient suffire.

Je trouve dommage d'arriver sur la page du A comme page d'accueil.
J'aurais préféré quelque chose de plus introductif, sans pour autant être une page tunnel (cliquer pour entrer). Des images et des articles sur des actualités sur l'Egypte ancienne, ou des articles qui pourraient être plus approfondis et qui changeraient aléatoirement à chaque visite, bref quelque chose de plus attractif. Et il y'a matière à faire avec cette si riche culture !

Donc apparemment, personne n'a vu qu'il y a un style switcher ? lol Il faut que je revoie l'organisation de la page je pense

Peut-être le mettre au-dessus? Sinon oui, revoir le code html avec les listes de définitions ça serait sympa.

J'aime bien

Par contre je ne mettrais pas le style "dictionnaire" par défaut car trop épuré.
Il est utile car sûrement le plus efficace pour consulter le contenu mais il ne renvoit pas réelement d'identité visuelle au premier coup d'oeil. Du coup j'ai eu un petit moment de flottement à me demande "c'est quoi cette page?".

Et effectivement le switcher de style est un peu discret en footer.
Je le verais bien en haut a gauche en tant que micro-fonctionnalité, à coté du "mode d'emploi".

Peut être que le fait de mettre la sélection de style dans un <select> renforcerai l'aspect de cette fonctionnalité. Je pense que les élément de formulaire ont plus tendance suggéré une action autre que une navigation classique (dans ton cas changer le style de la page contrairement au clic sur des liens qui permettent d'accéder a une nouvelle page de contenu).
Mais je dit peut être des bétises... et un élément <select> n'est pas forcement ce qu'il y a de plus esthétique.

Sinon c'est simple, agréable et efficace

Bonsoir,

Juste un avis au passage, j'aime beaucoup le style Scribe, qui mériterait d'être celui par défaut...

Ah, y avait un style-switcher ?

Argo a écrit :
Bonsoir,

Juste un avis au passage, j'aime beaucoup le style Scribe, qui mériterait d'être celui par défaut...

+1

Merci à tous,

J'ai fait :
- utilisation des dl, dd et dt à la place des paragraphes
- ce qui m'a aidé à résoudre le problème de "glissement" des entrées les unes sous les autres lorsqu'il y a des médias, puisque chaque élément est contenu dans son <dl>
- placer le plan du site à côté du mode d'emploi
- corriger les balises alt qui contenait des <em> (le validateur n'aimait pas trop )

Je dois faire :
- une page d'accueil (très bonne idée !)
- réintégrer le style switcher (à vrai dire je ne sais pas trop comment l'intégrer "proprement", sans surchargé)
- vérifier sous IE si ce n'est pas le carnage (ben vi avec mon mac, j'ai pas encore pu tester )

Les correctifs sont visibles ici : http://egypte.olympe-network.com/

Merci encore

Heu, je suis ennuyant mais ça ne marche pas comme ça les listes de définitions… Plutôt comme ça :

<dl>
	<dt>1er terme</dt>
	<dd>Définition du premier terme</dd>
	<dt>2e terme</dt>
	<dd>
		<p>Premier paragraphe de la définition du 2e terme</p>
		<p>2e paragraphe</p>
		<p><img src="image.jpg" alt="une image" /></p>
		<ul>
			<li>Une liste</li>
			<li>à puces</li>
		</ul>
		<p>Etc</p>
	</dd>
	<dt>3e terme</dt>
	<dd>...</dd>
	
</dl>

Tu mets ce que tu veux dans <dd> mais la liste <dl> doit englober tout les termes et définitions. Pour ajouter un peu d'espace, après le terme et sa définition, tu peux ajouter une marge en bas du <dd>.
Modifié par Patidou (14 Sep 2008 - 10:44)

Ah ben c'est déjà beaucoup mieux !
Tu ne trouves pas ?

(ceci dit, firebug me renvoie quand même 36 avertissements... )

Bonjour,

Bien mieux qu'auparavant comme ça .

Toutefois je trouve l'ensemble un peu massif. La densité de texte est grande pour un tel projet évidemment, mais je verrais bien un peu plus d'espace blanc. Par exemple en adoptant pour l'ensemble des entrées alphabetiques une présentation sur deux lignes et en harmonisant les marges (en particulier pour le p class="nouveautes" et le tableau regroupant les outils de recherche).

Voir aussi mettre l'entête de chaque page sur une colonne à gauche (en float) et faire débuter les entrées à droite, ce qui permettrais de réduire la largeur des lignes.

Pour les dl, perso je verrais mieux des niveaux de titre que ces dt

Merci Patidou, erreur de débutant... il suffit de comprendre ce que veut dire liste de définition, et on ne fait plus ce genre d'erreur J'ai corrigé.

Il y a eu des "effets de bords" sur la présentation lors du passage en dl, mais c'était le bienvenu, puisque l'apparence en est bizarrement améliorée !

Par contre > Cygnus, je n'arrive pas à voir les avertissements avec firebug, comment y accède-t-on ? Le validateur W3C accessible avec la web developper toolbar me valide mes pages en XHTML 1.0 strict. (Sauf quelques "&" dans les textes à corriger, mais pas partout).

Igor > Je n'arrive pas à harmoniser la taille du class nouveautés, du tableau, et du p index (lettres)... Je voulais faire en proportion, mais une fois que c'est satisfaisant sur firefox, IE me fait n'importe quoi... snif ! Mais c'est bien sûr l'idée que j'avais à la base...

(Au passage je remercie - entre autres bien sur - pour les coups de pouce Heyoan pour l'aide technique côté langage serveur !)

Pour les <dl>, alors je suis désolé, vraiment désolé, mais ce n'est pas encore ça…

Plutôt ça :

<dl>
	<dt>
		<a name="aa" href="#aa" id="aa"><strong>Aâ.</strong></a>
	</dt>
	<dd id="aa">
		<span class="discipline">Mythologie • Nom propre.</span>Celui dont le nom signifie « le Grand », n'apparaît que dans les représentations du temple d'Horus à Edfou. Avec sept autres divinités, les « <em>chebtyou</em> », les huit dieux anthropomorphes « enfants de Tatenen » participent à la création du monde.
	</dd>
	<dt>
		<a name="aa-kheper-ka-re" href="#aa-kheper-ka-re" id="aa-kheper-ka-re"><strong>Âa-Kheper-Ka-Rê.</strong></a>
	</dt>
	<dd id="aa-kheper-ka-re">
		<span class="discipline">Histoire • Nom propre.</span>Nom de couronnement de Thoutmosis Ier.
	</dd>
	<dt>
		<a name="aa-senedj" href="#aa-senedj" id="aa-senedj"><strong>Âa-Senedj.</strong></a>
	</dt>
	<dd id="aa-senedj">
		<span class="discipline">Mythologie • Nom propre.</span>Dieu ophiocéphale gardien du temple d'Horus d'Edfou. Âa-Senedj, chef de la troisième des quatre compagnies de dieux-gardiens du temple d'Horus à Edfou, est en charge avec les quatorze membres de sa compagnie d'éloigner l'ennemi venant à l'Est du domaine d'Horus. Parfois représenté avec des poignards ou un harpon, Âa-Senedj figure sur la façade du temple d'Horus à Edfou, dans la rainure qui accueillait autrefois l'oriflamme entre Horus et Hathor sur le môle Est.
	</dd>
....
</dl>

Et attention aux id qui doivent être uniques…

Ah vi c'est vrai ! J'ai oublié de vérifier. Parce que là un item par liste, on peut pas appeler ça une liste Je me trouve un peu de temps et je corrige dès que je peux !

Salut montoumes,

D'un point de vue général j'aime beaucoup (style scribe). Si tu préfères le minimalisme, reste comme ceci. Sinon, j'ai une impression qu'il manque de l'habillage graphique.

Toutefois, je vois des petites coquilles de mise en forme :

* Ne serait ce pas mieux de revoir le style des deux ancres en haut à droite afin que sur le a:hover il n'y ait pas cette border-bottom disgracieuse gênant l'en-tête. Je pense qu'un petit changement de couleur à la charte graphique devrait faire l'affaire.

* Le cadre nouveauté et le cartouche « recherche et autre » n'ont pas les mêmes dimensions en largeur. Est ce normal ?

* La ligne : « Actuellement : 254 entrées avec 23 illustrations • Dernière modification : 14 septembre 2008 » donne l'impression d'être placée n'importe comment. je pense qu'il serait plus judicieux de t'arrêter à la verticale de ton énoncé plus haut.

* Là, je sais que c'est plus délicat : les lettres de l'alphabet devraient selon moi avoir la même largeur que tes deux cadres plus haut.

* Je pense que tes définitions devraient avoir plus de marges à gauche et à droite. Par exemple en alignant sur les verticales des deux cadres.

* Pour une question d'ergonomie et d'accessibilité, ne serait il pas plus judicieux de rajouter à coté de chaque définition une ancre permettant de remonter vers les lettres de l'alphabet. Je ne connais pas beaucoup d'internautes utilisant les touches « home », « end », « page up » et « page down ».

<<<EDIT
En lisant quelques définitions, ce serait encore plus sympa d'avoir plus de visuels de ce qu'on lit.

Avoir une validation w3C, c'est bien. Mais garder leur logo hors charte graphique, c'est pas top à mon sens. Peut être trouver une bonne alternative.
EDIT;


++
Modifié par Nolem (14 Sep 2008 - 22:15)