Besoin de votre sagacité sur http://www.lhommequitremble.com

Bonjour à tous,
Longtemps Alsa création fût une source d'apprentissage pour moi.
Je vous soumets aujourd'hui le lien de mon premier site ful html/css.
Je suis graphiste (print & web) et j'étais plus habitué à Flash / xml qu'aux css. Et puis je m'y suis mis avec grand plaisir.
J'aimerais donc votre avis sur les aspects ergonomiques, qualité du code (validé par le w3c mais j'ai pu commettre des erreurs), et ambiance générale.
j'ai voulu faire un site clair et très sobre afin de mettre en valeur les contenus.
lhomme qui tremble


Merci !
Modifié par lhommequitremble (10 Sep 2006 - 11:20)

Au secours, le taulier va faire une crise :

a écrit :
Longtemps Alsa création fût une source d'apprentissage pour moi.

Ça va chauffer

Salut,
Revenons au sujet :

Je ne porterais pas de jugement sur la forme, je ne suis pas graphiste et la subtilité de ton design me déroute.
Mais :
Je note une crise aigûe de divite et de classite (google est ton ami).

Si je lis tes pages dans un lecteur texte, tout à la même importance. Test titres ne sont pas renseignés par un balisage sémantique correct h1, h2, p...

Du point de vue du code, c'est un gros galimatias peu comprehensible qui ne sert qu'a supporter l'effort fait sur la forme.

Maladie de jeunesse.

Bonjour lhommequitremble et bienvenue sur le forum d'AlsacreationS,

Tu as de la chance, le propriétaire est en vacances !


Pour en revenir à ton site, je rejoins l'avis de papyjo concernant l'emploi abusif de conteneurs et de classes.
La volonté de clarté et de sobriété ne se reflète pas dans le code.

Ce modèle, par exemple, correspond à ta mise en page.
Je t'invite à étudier sa structure.

Sur la plan ergonomique :

- l'animation du fond est fatiguante
- la taille des polices de caractère est un peu faible. De plus, elle est définie en pixel, donc impossible à agrandir sur certains navigateurs.

Voir comment définir la taille en unité relative.


Ensuite, je suis un peu gênée de ne pas comprendre l'objectif du site : quel est le sujet abordé ?

Enfin, après les mauvaises nouvelles, voici les bonnes : j'aime bien le design !
Modifié par Vero (10 Sep 2006 - 13:06)

Salut,

jaime beaucoup ton montage sur la page l'accueil.

Les pointillés mouvants verticalement sont désagréables pour moi, ils amènent une confusion visuelle.

Les intitulés de menus de gauche peuvent être un peu plus gros je trouve, on les vois encore moins de part cet effet de pointillés mouvants...

Pour le reste je n'ai fais que survoler, les créations ont l'ai très sympa aussi, j'y reviendrai...

Bonjour à tous e merci pour vos réponses.
Bon, hum, un galimatias, de la divite et de la spanite ?
Argh, je suis bien content d'être arrivé ici, je sens que je vais comprendre des trucs
— concernant le fait que sur Alsa j'ai beaucoup appris, je ne pense pas que cela puisse gêner le modérateur propriétaire des lieux, car je n'ai en aucun cas "pompé" du code sans vergogne, mais tout simplement, j'ai regardé la section "tutoriaux",
de plus, la simple lecture du forum invite à corriger ses erreurs et à apprendre. De toute évidence, au vu de vos réactions, je n'ai rien compris, haha —

Grand merci pour le lien sur l'usage des ems dans les css, c'est beaucoup plus clair pour moi, il faudra que je m'applique à les utiliser.
Concernant la spanite et la divite, j'avais cru bien faire.

Vero, Le modèle que tu donnes en exemple ne me semble pas correspondre à ma mise en page ? J'ai regardé sa structure mais ça ne colle pas ? J'ai en effet une série de colonnes, sans header et sans footer. Mon idée — naïve j'en conviens — était de placer des div pour chaque colonnes et à l'intérieur des spans pour leur contenu.
Comment puis-je procéder pour être moins amphigourique (pour répondre au galimatias) ?

Pour la trame de points orange mobile, oui, je comprends votre position, mais là-dessus je persiste, prenons ça pour du snobisme. Un peu de gêne volontaire, une vibration persistante n'est pas pour me déplaire. Mais j'y pense, peut-être cela rend différement suivant les écrans ? Sur un portable ou un écran plat ? Ou en fonction de la fréquence de rafraîchissement ? Hum, je vais aller tester ça ailleurs que chez moi (je suis sur un "vieux" 21 pouces en CRT).

Vero, l'objectif du site est de présenter mon travail graphique. Et plutôt que d'annoncer plein de blabla dès le départ, j'ai préféré laisser le visiteur avec une question, une invite à rentrer dans les sections "affiches" etc... Je n'avais vraiment pas envie de mettre un texte "graphiste indé lalala".

Papyjo, il est vrai que je n'ai pas renseigné les h1 h2 etc, tout simplement parce que je n'ai pas encore compris l'usage


Oh et puis pour la taille du texte un peu petit, ça va se résoudre quand je me serais mis aux ems . Peut-être avec un gris plus soutenu ça passera mieux ?
En tous cas je vois qu'il me reste du chemin, Gasp ! merci à tous.

Salut,

Juste des remarques d'utilisateur Lambda qui surfe avec un Mac et le navigateur Safari.

1 - "Zarbi" est la 1er mot parvenu de mon cerveau à ma bouche. Compliment ou pas ? A toi de voir

2 - Un truc sur le zoom : la phrase du haut (par exemple "l'homme qui tremble || françois gaillard || --> un courriel @ ? ") grossie mais finie par passer sous l'image

3 - Comme les autres, les pointillés qui clignotent m'arrachent mes pauvres yeux.

4 - Il n'y a pas de fil d'Ariane et donc on ne sait plus où on est.

5 - Dans tes "liens" et "diffuseurs", il n'y a pas de différence à priori pour ceux qui ont un lien actif ; il faut vraiment aller dessus pour le savoir.

Bonne soirée,
Modifié par dieteticien (10 Sep 2006 - 21:18)

lhommequitremble a écrit :

Vero, Le modèle que tu donnes en exemple ne me semble pas correspondre à ma mise en page ? J'ai regardé sa structure mais ça ne colle pas ? J'ai en effet une série de colonnes, sans header et sans footer. Mon idée — naïve j'en conviens — était de placer des div pour chaque colonnes et à l'intérieur des spans pour leur contenu.
Comment puis-je procéder pour être moins amphigourique (pour répondre au galimatias) ?

Globalement, tu ne devrais pas créer des colonnes sans contenu, c'est à dire uniquement pour satisfaire l'effet visuel.

Je vois bien :
- un header avec ton (petit) logo
- un menu horizontal sous le header (pouvant être inclu dans le header)
- un menu à gauche
- le contenu à droite
- Eventuellement le pied avec les logos de validation ...

Tes effets visuels de colonnes devraient être produites via la css en background ... du body par exemple (ou d'un conteneur global) par une découpe d'image (une ligne, en fait) des deux séries de points.

Pourquoi des spans ?

Voir : http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Pour comprendre la différence entre div et span (entre autre)

Voir : http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id

Pour tenter de remédier à la classistite ...

Le principe :

div te permet de structurer ta page en plusieurs parties (header, partie gauche, partie droite) notamment pour faciliter le positionnement de groupes de bloc.

Dans ce cas, chaque div peut-être considéré comme unique, donc identifibale par un id et non une classe.

span permet de styler un contenu à l'intérieur d'une balise en-ligne.

Exemple :

<p>Je veux mon texte <span class="rouge"> en rouge </span>, non mais !p>

Dans ce cas, l'utilisation d'une classe pour définir le style "rouge" est justifié par le fait que ce dernier peut être utilisé plusieurs fois dans la page.

a écrit :
Pour la trame de points orange mobile, oui, je comprends votre position, mais là-dessus je persiste ...

Moi de même, et je signe même : le problème n'est pas dans le choix d'être snob, mais dans celui de ne pas gêner prodigieusement l'internaute dans la lecture de ta page, quel que soit son navigateur...
C'est le but, non : donner à l'internaute l'envie de lire tes pages ?

Bon, et bien là, on a presque envie de partir !
Cela me donne presque le mal de mer, pour te dire ...

a écrit :
Vero, l'objectif du site est de présenter mon travail graphique. Et plutôt que d'annoncer plein de blabla dès le départ, j'ai préféré laisser le visiteur avec une question, une invite à rentrer dans les sections "affiches" etc...

Ce qui peut également l'amener à repartir sans savoir ce qui se passe ici ...

Combien d'internautes ont le temps de jouer aux devinettes ?

Toi-même, prends tu le temps de chercher des informations sur un site qui n'est pas clair sur ce qu'il présente ?

a écrit :
Papyjo, il est vrai que je n'ai pas renseigné les h1 h2 etc, tout simplement parce que je n'ai pas encore compris l'usage

Les bases du html
Modifié par Vero (11 Sep 2006 - 12:15)

Merci Vero pour toutes ces précisions et pour les liens que je vais m'empresser de potasser dès que j'aurais un peu de temps (la saison recommence après ces mois d'été où j'ai pu comme chaque année apprendre et appliquer de nouvelles méthodes). Il faut asolument que je remédie à tout ça au plus vite car les travaux de commande sont de retours et ça me laisse moins de temps.

Concernant les <h1><h2> oui, évidemment, je les connais (j'ai quand même tout codé "à la main") mais je ne savais pas qu'il fallait aussi les utiliser en css pour les navigateurs alternatifs, et surtout comment. Je pensais qu'il y avait d'une part le html "basique" avec ses <h1> et d'autre part les css où tous les attributs sont redéfinis. Je comprends mieux l'intérêt désormais.
Ceci dit, les contenus présents sur le site étant à 95% des images, puisqu'il s'agit de mon travail graphique, un internaute utilisant un browser de type "Lynx" navigant sur ce site ne restera de toutes façon pas longtemps car il y a peu d'infos textuelles signifiantes.
Je saisis l'importance de créer des pages accessibles au plus grand nombre, mais sans faire de cynisme, un amblyope a malheureusement peu de chance d'être intéressé par ce site. Ceci dit, je vais tout de même tenter d'appliquer ces règles dans mes prochains sites "clients".

N'oublions pas une chose concernant les sites en général, la cible visée !
Et puis cette histoire de trame mouvante qui te rend désagréable la visite, je vais attendre quelques retours (pas les plus complaisant) pour prendre une décision. Je les virerais peut-être.
Les trucs de validation W3c, je vais les virer, ça fait vraiment kéké, haha ;°)
Maintenant il faut que je revoies toute la structure, Argh !
Merci

lhommequitremble a écrit :

N'oublions pas une chose concernant les sites en général, la cible visée !
Et puis cette histoire de trame mouvante qui te rend désagréable la visite, je vais attendre quelques retours (pas les plus complaisant) pour prendre une décision. Je les virerais peut-être.
Les trucs de validation W3c, je vais les virer, ça fait vraiment kéké, haha ;°)
Maintenant il faut que je revoies toute la structure, Argh !
Merci

Bonjour,
Pour une meilleure perception de l'accessibilité numérique et du web en général, méditer:

a écrit :
Mettre le Web et ses services à la disposition de tous les individus, quelque soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales

Lectures sur les enjeux:
-Pourquoi l'accessibilité numérique ?
-Oublions les handicapés

salut,
je trouve aussi que les petits points qui montent devraient etres supprimées, ils detournent l'attention, et du coup ça perturbe la lecture du site.

Ce serait bien de mettre un petit texte d'introduction.

Merci Igor pour ces liens.
je connais bien ces enjeux, mais lorsqu'on apprend une technique (ici les css) il est souvent difficile de remplir la totalité des attendus du premier coup. mais promis, j'y veille !
Si tu vas voir dans la section "www" de mon portfolio, il n'y a que des sites en flash ! Sans égard pour l'accessibilité. Il faut un début à tout.

bzh, je prends bonne note que tu votes pour la suppression de la trame orange mobile . Je vais finir par la supprimer, c'est sûr

lhommequitremble a écrit :
mais lorsqu'on apprend une technique (ici les css)

Il faudrait parfois pouvoir rayer de la carte les technologies de présentation (CSS, flash, javascript, AJAX, XSLT, etc) pour ne laisser que ce que les gens ignorent, c'est à dire la structure nue (HTML4.01). Cela simplifierait les choses pour tout le monde...

Laurent Denis,
Oui, dans un monde idéal, l'apprenti webmestre devrait apprendre le tout html.4.0 avec ses <head> et <meta>, ses <h1>, ses <p>, ses <li> et <ul> et <objects>, sans oublier les <img> et <alt> avant de passer aux techniques de mise en forme. Dans ce monde réel, il y a tout un tas d'ignorants (comme moi) qui font les choses dans le désordre.

Je comprends cet agacement dans la mesure où, en tant que graphiste professionnel (papier !), je suis souvent en concurrence avec des espèces de pratiquants PAO du dimanche qui livrent des docs RVB à flasher, en oubliant les typos, ou avec des fichiers word insensés en imprimerie, avec des typos piratées ou Dafont, qui ne savent pas ce qu'est un fond perdu ou une surimpression, bref, en faisant n'importe quoi. Et bien là pour le coup, je fais le webmestre du dimanche après-midi .

J'ai vu sur le presse-citron de Vero cette journée "sites nus", ça me semble intéressant.

La différence, hélas, étant que, dans le cas du HTML, il s'agit bien du seul monde réel, et non d'une distinction entre "moins bien" et "bien".

lhommequitremble a écrit :

Oui, dans un monde idéal, l'apprenti webmestre devrait apprendre le tout html.4.0 avec ses <head> et <meta>, ses <h1>, ses <p>, ses <li> et <ul> et <objects>, sans oublier les <img> et <alt> avant de passer aux techniques de mise en forme.

Ce n'est pas du tout une question de monde idéal mais une toute bête question de méthode d'apprentissage...

... On ne peut pas comprendre et manier les css si on ne part pas du code html auquel elles s'appliquent.

On croit toujours qu'en étant négligeant sur le html c'est celui ci qu'on méconnait et que les css ça va pas trop mal. Et là on se trompe complètement parce que c'est bien sur les deux tabeaux qu'on est perdant, html mal connu et mal compris, maniememt des css malhabile, peu efficace et au final le plus souvent sans l'imagination que permet la maitrise.

C'est bon, n'en jetez plus j'ai compris allez…
Mais quand on a commencé d'une façon, il n'est jamais trop tard pour réapprendre des méthodes correctes.
Il me semble avoir suffisamment précisé que j'allais très sérieusement me pencher sur ces questions. Je ne peux pas remonter dans le temps pour corriger la chronologie de mes apprentissages.
Je l'ai écrit, je le réécrit, sur les prochains sites que je serais amenés à réaliser, je m'attacherais à respecter les bons usages. Quand à mon portfolio, je vais le réécrire de A à Z dès lors que j'aurais correctement intégré l'usage précis de chacune des balises, ce qui risque de prendre du temps.

Attention à la bonne pédagogie, elle est souvent éloignée de tout dogmatisme.
Mes réflexions sur le <h1> ne sont sans doute pas drôle mais elles essayaient de l'être.

J'apprends mesdemoiselles messieurs… j'apprends.

Je me permet d'intervenir sur ce sujet, car j'ai un peu le même sentiment parfois que lhommequitremble. On est pleins de bonnes volontés pour faire dans le bon sens, mais sans doute n'avons pas eut les bonnes bases au départ. Personellement je ne suis qu'un simple amateur et qui ne compte pas faire des sites pour les autres. Mon soucis de faire "clean" n'est donc qu'une satisfaction personelle. Et j'ai appris sur le tas, sans profs ou écoles m'apprenant le bon usage du web. Ce que j'ai pourtant fait, petit à petit. J'en suis à mon 2nd site et le chemin parcouru me parait immence à force de tatonner dans ce monde difficile, il faut bien le dire, de la programmation.

Perso je fais pas des sites pour son code, son programme, son aspect théorique etc....C'est le contenu du site qui m'intéresse. Ce n'est qu'un support à mon imagination et à ce que je veux montrer.

Mais à force de me plonger dedans, je dois dire que je n'ai plus du tout cette appréhension de le construction d'un site. Dans 10 ans on en rigolera, je l'espère, quand tous tout le monde utilisera le même langage une bonne fois pour toute. En attendant c'est prise de tête pour quelqu'un qui début, voir rebutant. Bien plus pratique d'utiliser un dreamwever et compagnie comme la majorité de ce que font les gens....Desfois je me demande si moi aussi

Ce qui est par contre clair, c'est que c'est au début de la construction du site que tout ce joue. Les bases sont les plus importantes. Et je pense que vous serez d'accord avec moi tous pour dire qu'il y a vraiment une très faible probabilité qu'un débutant utilise tout de suite les bonnes bases pour son site (J'en suis un exemple, parmi bcp d'autres) même validé W3C. Aussi autant dire je pense que la compréhension du Xhtml - css demande dans ce cas au moins 1 an de technique ou la construction de son 2eme site, en prenant pour principe qu'il ne reproduira pas les erreurs de son 1er site.

Simple hypothèse. Mais à méditer quand même.

PS : désolé de pas avoir parlé de ton site. Le design est assez énigmatique. Il interpelle. C'est déjà un bon point artistique je pense Pour le reste, je laisse ça à d'autres plus performants que moi.
Modifié par Damonya (11 Sep 2006 - 17:45)

lhommequitremble a écrit :
ce qui risque de prendre du temps.

En fait non, il n'y a pas de raisons, car c'est vraiment très simple. Il ne s'agit pas de s'astreindre à une grande remise en cause généralisée de ses pratiques mais simplement de placer les choses dans une bonne perspective.

Le document html ne s'élabore qu'en fonction de considérations de description, d'organisation, de structuration de son contenu. Les balises html permettent de faire cela et en plus elle sont peu nombreuses et très simples.

Une fois cela fait pour un document c'est encore plus facile de l'étendre à quinze document et le résultat c'est finalement un site internet complet, aisément consultable et pour tout dire parfaitement opérationnel.

Tout ça c'est très facile et ce pour une seule raison. On se force un tout petit peu à mettre très temporairement entre parenthèse la question de la présentation du document d'un point de vue visuel, mis en page voire même bien sur designé.
Modifié par clb56 (11 Sep 2006 - 17:56)

lhommequitremble a écrit :
Mais quand on a commencé d'une façon, il n'est jamais trop tard pour réapprendre des méthodes correctes.

Il faut bien partir de quelque chose, et forcément on part de ce que l'on sait.

C'est peut-être plus difficile de passer aux standards pour ceux qui avaient déjà développés à l'ancienne.
Car la remise en question concerne à la fois les technologies mises en oeuvre (html rudimentaire, dhtml mal digéré, etc), les pratiques et les mauvais réflexes (machins inutiles mais tellement à la mode, ...)

Une page sans css, juste du html bien léché, ce n'est pas si difficile à faire !
L'apprentissage de css est plus fastidieux, je trouve.

Le truc, c'est de l'incorporer doucement, comme le chocolat dans les blancs en neige en tournant doucement la cuillère en bois !

Concernant le fond animé, je suis à peu près sûre qu'il ne rencontrera pas beaucoup de succès ici !

En tous cas, cela fait plaisir d'avoir consacré un peu de temps à quelqu'un et de lire que cela a été efficace !

Modifié par Vero (11 Sep 2006 - 18:19)