Cours de XML

Bonjour!

Je me suis dit qu'il serait temps de redonner un petit coup de jeune à mon cours de XML: http://gilles.chagnon.free.fr/cours/xml/

1. Du point de vue du contenu, j'avais notamment pensé, pour chaque partie, réaliser une introduction-résumé général ("for dummies"), puis donner la possibilité de consulter le cours plus complet. Cela permettrait de plus de rassembler les grandes têtes de chapitre par langage: Bases de XML, DTD et Schemas, XSL et XPath, SVG et SMIL, ... il y a trop de têtes de chapitres maintenant!

2. D'un point de vue mise en forme... hum, disons qu'il y a du pain sur la planche. C'est trop tristounet. J'ai d'ailleurs reçu des critiques indiquant que "la mise en page n'est pas du tout attrayante, on aura toujours tendance à fuir".
Je ne suis pas, mais alors pas du tout graphiste

Je ne promets pas de correction rapide en fonction de vos remarques. Je vous demanderais juste une liste de critiques contructives... ou destructives , ainsi que des idées sur des améliorations à apporter (ergonomie notamment -gros boulot).
S'il me faudra faire une révolution, je ferai une révolution ... mais pas avant la fin de semaine prochaine, ne soyez pas pressés

Merci!
Modifié par Olivier (29 Apr 2005 - 19:18)

bonjour gilles,

des petites choses au niveau du code :

en début de document tu passes directement de <h1> à <h3>, ça aurait du être <h2>

on trouve :

<li><h4>....</h4></li>

Il me semble que ce n'est pas possible.


Tu utilises une imbrication légère de dl et ul

<dl>
<dt></dt>
<dd>
    <ul>
    <li></li>
    <li></li>
    </ul>
</dd>
.
.
etc...

</dl>

Mais

<hn></hn>
<ul>
<li></li>
<li></li>
</ul>

Structure tout aussi bien le document et évite toute imbrication ce qui vaut toujours mieux.

Sinon pour la css il faudrait avant tout enlever la barre de défilement horizontale (tu as du combiner un width:100%; et un margin. Ou quelque chose comme ça)

J'espère que ça t'aide.
Modifié par clb56 (29 Apr 2005 - 20:03)

Je dois avouer que le "style" est assez rebutant, j'étais en fait déjà tombé plusieurs fois sur tes pages suite à une recherche, j'y ai trouvé ce que je cherchais, des fois non, des fois oui, mais à chaque fois, rebuté par l'apparence

Que dirais tu d'une mise en page du même type avec une charte graphique sans images ou graphisme ""qui en jette"", mais juste quelque chose de simple, sobre et propre sur lui Rien que le choix des couleur ferait quelque chose de moins rebutant

Regarde par exemple :
http://useit.com/
http://mikepick.com/neilsen/

Concours de redesign de UseIt, très très peu d'images, juste le choix des couleurs (ou presque )

Enfin c'est une idée !

Pour ma dernière remarque, c'est #entete qui pose le problème :

width:100%;

et

padding-right:1em;

c'est la largeur à 100% qui est inutile.

++

Je vais essayer de faire court et précis. Déjà bravo pour ton site, je ne connaissais pas et il est désormais dans mes favoris, m'est avis que je vais apprendre pas mal en feuilletant ces pages

Concernant les critiques :
. Choisir de nouvelles couleurs, j'essaierai de retrouver l'adresse mais il existe des sites qui donnent des schémas de couleurs à partir d'une ou 2 etc...
. Aérer le design et le texte en ajoutant des padding et margin etc...
. Mettre plus en évidence les titres, les éléments importants, les définitions etc.. Là tout est un peu "en vrac", on ne distingue pas réellement une sous-partie d'une autre

Enfin si tu peux trouver quelqu'un qui te fasse un petit design sympa et pas trop lourd ça serait le must

Ces critiques n'engagent que moi, bien entendu
Continue en tout cas !
Modifié par daitheflu (30 Apr 2005 - 01:31)

clb56 a écrit :

on trouve :

<li><h4>....</h4></li>

Il me semble que ce n'est pas possible.

Le validateur passe mais quel dilemme : comment faire quand on faire une liste d'éléments importants ?

Se contenter de <li/> n'aurait pas marquer l'importance du texte alors qu'une série de <h4/> avec un display:list-item; n'aurait pas, sémantiquement parlant, décrit une liste.

Donc la solution de Gilles reste à mon avis la plus satisfaisante, même si ça fait un peu gaspillage de balise.

Amicalement,

Tangui

Merci de vos premières suggestions...

Je suis en formation pendant trois jours; c'est la raison pour laquelle je vais laisser les idées fuser. Je m'en ferai un petit résumé synthétique mercredi soir, et j'espère pouvoir vous montrer une première version de la nouvelle mouture vendredi...

Effectivement, je ne suis pas, mais alors pas du tout infographiste. Et donc, je ne viserai pas plus haut que le "quelque chose de simple, sobre et propre sur lui" comme le suggère Olivier .

En même temps, il faut que je travaille sérieusement sur la simplification de l'accès à l'information.

En attendant, merci de vos commentaires
Modifié par Gilles (02 May 2005 - 08:39)

Voici le résultat préliminaire de mes cogitations... Qu'en pensez-vous?
http://gilles.chagnon.free.fr/cours/xml/maquette_accueil.html

Les paragraphes disséminés sous les titres seront des phrases rapides de présentation de chaque partie.

PS: Je suis dans l'incapacité jusqu'à lundi de tester ce (terme pompeux) design sur un Windows quelconque J'espère que tout passe sous IE
Modifié par Gilles (06 May 2005 - 15:28)

Ah en tout cas je préfère la maquette issue de tes cogitations !
Mais sinon au niveau du contenu c'est super ton site, il fait partie de mes signets franchement bravo, des sujets à priori difficiles y sont traités avec clareté... très pratique pour des personnes comme moi.

Voili voiloù les dernières moutures. Je serais ravi d'avoir votre avis. Ah voui ah voui.
La page d'accueil: http://gilles.chagnon.free.fr/cours/xml/maquette_accueil.html
Une page de contenu: http://gilles.chagnon.free.fr/cours/xml/maquette_base.html

Pour mémoire, les versions actuelles:
accueil: http://gilles.chagnon.free.fr/cours/xml/
contenu: http://gilles.chagnon.free.fr/cours/xml/base.html

Il manque encore quelques améliorations (?) que je voulais apporter sur le contenu lui-même, mais je me contente de vous demander votre avis sur l'apparence...

Merci!
Modifié par Gilles (11 May 2005 - 18:37)

Salut,

dans l'ensemble j'aime bien mais dans la page de contenu, le texte centré, j'aime pas trop. Au final, on se retrouve avec la moitié de l'écran non utilisé.
Je verrais bien un truc du genre :
18% blanc -- 62% contenu -- 20% blanc

Mais dans l'ensemble je trouve ça très bien

Cya

bonjour Gilles,

peu de remarques ça prend effectivement bien forme.

1. Quand on réduit la fenêtre les liens du menu horizontal se mettent en superposition. Pas de problème mais il faudrait une petite marge entre ceux du haut et ceux du bas.

2. Concernant le contenu du cours la partie texte pourrait effectivement être un peu plus large mais de peu certainement (des lignes trop longues nuisent à la lecture surtout dans le cas de textes complexes) avec une couleur de fond différent du background général.

3. Quoiqu'il en soit il faudrait un rapport entre largeur texte du cours et largeur codes d'exemples mieux proportionné.

voilà

Je sors de mon cocon... bien décidé à donner un bon coup de plumeau sur mes cours, chose que j'avais laissée en plan depuis quelques mois (la vie est affaire de priorités )

Je viens d'amender quelque peu le design précédent (parce que les menus sur une ligne de 9 items, ce n'est pas très compréhensible ).

Merci de bien vouloir donner votre avis!
Pour mémoire, les URL:
la page d'accueil du cours: http://gilles.chagnon.free.fr/cours/xml/maquette_accueil.html
une page de cours quelconque: http://gilles.chagnon.free.fr/cours/xml/maquette_base.html

Donc,

Bonjour Gilles,

J'exagère bien sur mais d'une certaine manière je n'ai rien compris.

La présence de trois menus de navigation en haut de page, visuellement non hiérarchisés est très gênante. le menu "tous les cours, conditions d'utilisation, contact" me semble correspondre à ce que l'on met habituellement dans un footer. Ici il gêne.

De plus au niveau html les deux menu qui restent devraient sans doute être inversés dans l'ordre de déclaration. Pour l'instant on est obligé, en navigation clavier via la touche tab, de passer par tous les liens externes
à la page avant d'accéder aux liens internes à la page.

Je redis la remarque que j'avais déjà faite, je trouve que les blocs contenant du code sont trop larges par rapport à ceux contenant du texte (la différence est trop importante).

Voilà

Merci de ton commentaire...

C'est bien ce que je craignais... Je ne sais pas trop comment me sortir de ce lourd menu. Voici mes contraintes:
- je ne voudrais pas enlever d'item;
- je ne veux pas de menu déroulant
- je voudrais garder en haut, parmi les trois items qui te gênent et que tu voudrais dans un pied de page, au moins "Contact" et "Conditions d'utilisation".
- je voudrais visuellement séparer les trois niveaux de navigation dans le site.

En effet, je dois composer avec effectivement trois niveaux de menus (je n'ai pas dit un menu à trois niveaux ):
1. un niveau relatif à l'ensemble des cours en ligne (XML, DOM et autres) permettant de revenir à la page les présentant tous, donnant l'adresse de contact et les conditions d'utilisation qui sont des informations communes à tous;
2. un niveau relatif au cours particulier en cours de consultation (XML sur cet exemple): accueil de ce cours, cours précédent et suivant dans l'ordre chronologique et pédagogiquement le plus satisfaisant
3. un niveau correspondant à la navigation dans la page en cours de consultation: table des matières, contenu,historique...

J'ai peut-être mal dormi (et hier trop cuit derrière ma baie vitrée donnant plein sud sans store ), mais je manque d'imagination.

Tout problème a une solution, donc je ne désespère pas!

Et en ce qui concerne l'ordre de tabulation, je dois avouer que je n'y ai pas prêté attention ce coup-ci
Modifié par Gilles (09 Sep 2005 - 08:32)

Si tout doit apparaitre en haut d'écran pourquoi ne pas envisager queque chose comme :

déclaration html (suis très têtu pour la navigation via tab )

"Table des matière etc..."

"Accueil du cours etc..."

"Tous les cours etc..."

mise en page css :

"Tous les cours etc..." au dessus du titre principal <h1> et assez discret (un peu comme quand on fait un mini menu accessibilité).

"Accueil du cours etc..." sur la bande bleue à droite

"Table des matière etc..." sur la bande bleue à gauche

Bonjour,
je n'ai pas lu toutes les remarques donc désolé si elles ont déjà été faite.

Au niveau contenu, c'est top, intéressant, j'y reviendrai sûrement, d'autant que le XML, je connais mal et peut-être, ne sait-on jamais, j'en aurai besoin un jour...


Par contre un truc super horipillant :
pourquoi une liste avec des items en <hn> ?
Trop d'éléments importants tuent les éléments importants.
Imagine que je décide de mettre les choses importantes d'une page avec <strong>...</strong>
Si je commence à souligner par <strong>...</strong> un mot tous les quatre ou cinq, ça ne ressortirait plus.
Eh ben c'est pareil avec tes <hn> dans ta liste.

Donc en résumé vire ça
<li><h4>...</h4><li>
et remplace simplement par :
<li>...</li>
quitte à mettre dans ta CSS :
li { font-size:100pt; text-decoration:blink; background-color:red; color:white; }
pour que ça se remarque bien si tu y tiens tant que ça.

Voilà à+.

Je n'ai pas eu le temps de retravailler tout ça (aaaah, les réunions de boulot). Peut-être demain. Ou mardi.

En ce qui concerne les listes contenant des titres, je me suis posé la question. Il s'agit d'une table des matières. Donc elle contient des liens vers les titres développés dans la page. Je me suis dit qu'en quelque sorte, je devrais indiquer qu'il s'agissait de listes de titres...

Cela dit, ton commentaire m'a fait réfléchir à ce que donnerait la lecture de la page avec une synthèse vocale, en mode lecture des titres uniquement. Elle lirait deux fois la même chose, ce qui peut être perturbant.
Je vais donc très probablement les enlever. Merci!

PS pour info: il s'agit là de la maquette de la nouvelle version. Le cours actuel, figurant d'ailleurs dans les ressources, est à http://gilles.chagnon.free.fr/cours/xml/

Corrigeons tout de suite ta phrase :
Elle lit deux fois la même chose, ce qui est perturbant.

J'utilise jaws quotidiennement et c'est effectivement le cas.

Bonjour j'ai toujours voulu connaitre l'intérêt du XML. Quelqu'un peut m'expliquer brièvement ses avantages par rapport au XHTML ou HTML ?