Avis sur http://immateria.net/ - site de partage d'expérience "paranormale".

**Rakken** · 09/01/2009, 09h10

Bonjour,

Une fois n'est pas coutume, je poste une url plutôt que de la juger.
Un de mes amis a réalisé ce site et aimerai avoir des avis éclairés, autant sur le design général que sur l'ergonomie et l'utilisation du site.
Bref, tout ce qui vous plait ou vous déplait.

Le site est en béta-test, vous pouvez poster ce que vous voulez la base sera de toute manière remise à zéro avant le véritable lancement.

http://immateria.net

ps : pour les puristes, inutile de faire le test, le site n'est pas (encore ?) valide w3c.

**HiRoN** · 09/01/2009, 15h47

Salut,

Vu rapidement :
- Thème sans plus à mon goût
- Copyright centré sur la partie de droite, je l'aurai centré sur la largeur totale.
- J'ajouterai des onfocus="this.blur();" sur les liens du menu afin d'enlever les pointillés lors de la sélection
- Un petit cadre autour de la partie connexion ? (l'isoler un peu mieu)
- Ligne Copyright non répété sur l'ensemble des pages
- Améliorer les formulaires d'inscription / contact à la sauce Web 2.0 ?
- Style sur les boutons ?
- Pagination Web 2.0 ? (boutons / icones pages suivantes, précédentes & co)
- Puces devant les titres des pages ?
- Une page mentions légales ?
- 49 Erreurs W3C

Voila impressions / idées du moment, en espérant avoir aidé

**Macmillenium** · 09/01/2009, 16h25

Bonjour,

Design basique, classique manque des petites retouches graphiques comme le dit HiRoN.
Par contre le code html n'est pas bon du tout :
- DTD commenté (

) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->

Très dangereux et bascule les navigateurs en mode Quirks
- centrage forcé avec le bon vieux tag <center>
- Certains tags sont autofermé, d'autres non
- balise font présente

Enfin, je pense que le html est généré par un WYSIWYG.

**cyberlp** · 09/01/2009, 17h53

Merci pour vos réponses rapides.

- Thème sans plus à mon goût

A vrai dire nous sommes en train de repenser tout ça. Disons que c'est un état transitoire.

- J'ajouterai des onfocus="this.blur();" sur les liens du menu afin d'enlever les pointillés lors de la sélection

J'ai essayé mais cela n'a aucun effet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="index.php?order=cat&categorie=<?php echo $categories[$i]; ?>" class="info" onfocus="this.blur();">Titre</a>

- Ligne Copyright non répété sur l'ensemble des pages

Corrigé.

- Améliorer les formulaires d'inscription / contact à la sauce Web 2.0 ?
- Pagination Web 2.0 ? (boutons / icones pages suivantes, précédentes & co)

Oui, idéalement, mais je n'y connais strictement rien en Ajax & co, déjà que je galère en PHP et css :-p (si quelqu'un connaît un BON tutoriel, je suis preneur, j'ai cherché longtemps sur le web mais je ne trouve que des explications soient trop compliquées, soit trop partielles)

- Puces devant les titres des pages ?

Tu parles des titres des témoignages quand par exemple tu vas dans une rubrique particulière ? Devant le "#" ?

- Une page mentions légales ?

Ajoutée.

- Style sur les boutons ?

En cours de réalisation.

- DTD commenté () :
Très dangereux et bascule les navigateurs en mode Quirks

Corrigé.

- centrage forcé avec le bon vieux tag <center>

Corrigé.

- Certains tags sont autofermé, d'autres non

Je ne sais pas ce que ça veut dire

- balise font présente

Oui le site n'est pas en full css, disons en semi-css

Enfin, je pense que le html est généré par un WYSIWYG.

Euh, non, tout à la main dans la partie "code" de Dreamweaver.

**Macmillenium** · 09/01/2009, 18h14

Envoyé par cyberlp

Je ne sais pas ce que ça veut dire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="keywords" content="paranormal, paranormaux, surnaturel, immateria" />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="styles.css" />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<br />

tu utilise xhtml, toutes les balises doivent être fermer

Oui le site n'est pas en full css, disons en semi-css

Et pourtant tu déclare un DTD XHTML 1.0 strict (séparation complète de la mise en forme du code xhtml).

(encore un point négative : mise en page en tableau ...)

**HiRoN** · 09/01/2009, 19h07

A vrai dire nous sommes en train de repenser tout ça. Disons que c'est un état transitoire.

Aucun soucis, tu peux très bien garder un thème sobre, les goûts et les couleurs de chacun...

(ce n'était que mon avis personnel, cf mon site personnel dans mon 'www' qui est lui aussi relativement sobre volontairement)

J'ai essayé mais cela n'a aucun effet.

Cela ne se passe que sur Firefox (je n'ai pas précisé), lors du clic sur un bouton ou lien, un "filet" pointillé vient entouré l'élément. Retente ma solution sous Firefox donc

(en visionnant le code source de ta page, tu as laissé ce que je t'ai donnée et donc sous firefox, je ne vois plus le liseré pointillé

)

Oui, idéalement, mais je n'y connais strictement rien en Ajax & co, déjà que je galère en PHP et css :-p (si quelqu'un connaît un BON tutoriel, je suis preneur, j'ai cherché longtemps sur le web mais je ne trouve que des explications soient trop compliquées, soit trop partielles)

Pour le 1 - As-tu regardé ici ou ici ?

Pour le 2 : Ici (sources dvp qui je pense pourrait t'aider)

Tu parles des titres des témoignages quand par exemple tu vas dans une rubrique particulière ? Devant le "#" ?

Oui, je parlais de cela, habiller le titre d'une puce pourrait le faire visuellement.
Idem ton menu, ajouter une puce + changer couleur du lien sur le menu "actif" par exemple [page en cours en visualisation]

Oui le site n'est pas en full css, disons en semi-css

Prends les bonnes habitudes le + tôt possible :
- Eviter les balises comme font, center au profil du CSS
- Externaliser le code CSS (fichier(s) à part) en faisant (par ex) un fichier relatif à la structure, un pour le contenu répété de page en page (ou souvent), un pour les "cas particuliers" (appliqué seulement à un endroit) et penser au hack CSS pour ie6 (plus tu le fais tôt, moins tu galèreras à le mettre en place par la suite)

Je n'avais pas analyser ton code lors de mon premier passage, comme te le souligne Macmillenium, il y a aussi des choses que tu devrais tenter de modifier :
- Utilisation abusive de <table> (celles-ci ne sont normalement à utiliser que dans le cas de données tabulaires), à remplacer donc par des div pour la mise en page mais surtout par des <p></p> pour le contenu.
- Essayer de supprimer l'ensemble des <br /> (en mettant sur la balise <p> une marge en CSS

)
- Externaliser le Javascript.

Je te conseille, avant de continuer des modifications, de t'attarder un moment sur les cours (X)HTML & CSS que tu trouveras dans ma signature, je pense que tu comprendras mieu certains point

(n'hésite pas à te faire un page de test afin de visualiser les choses que tu pourrais voir d'intéressantes)

Voilà pour les impressions du moment, mais ce n'est que mon humble avis...

N'oubli pas que je te dis tout cela dans l'optique de te faire continuer à progresser. Tout ce que tu as fais et tout de même relativement correct, beaucoup font moins bien...

**HiRoN** · 09/01/2009, 19h24

Je rajoute un message à part car j'ai quelques remarques supplémentaires

:
- Mettre la partie "FAQ, Ajout d'un témoignage etc..." dans un bandeau à part pourrait faire bien
- Styler les input (cf : tuto donné + haut)
- le lien "mot de passe oublié ?" est à cheval sur la ligne du dessous, erreur en cas de mdp erroné mise mal en valeur (si non vu, on se sens con...

)
- Rajouter des liens utiles dans le footer : Contact, mentions legales etc...
- Bouton "Annuler" sur les formulaires

En espérant avoir aidé

**cyberlp** · 10/01/2009, 17h27

Alors, tout d'abord, j'aimerais dire un grand merci à ceux qui m'ont aidé. C'est vraiment sympa.

N'oubli pas que je te dis tout cela dans l'optique de te faire continuer à progresser. Tout ce que tu as fais et tout de même relativement correct, beaucoup font moins bien...

Et ça m'aide beaucoup ! Pour tout dire aussi, je ne suis absolument pas développeur, je suis journaliste. J'ai appris le php/mysql en traînant sur le web, et le dernier développement que j'ai fait était pour une page perso il y a 10 ans, ce qui explique quelques retards dans les différentes mises à jour des langages

J'ai donc commencé à naviguer sur les tutoriels, très bien faits, et à convertir des morceaux du site en css.

Voilà un exemple en ce qui concerne la pagination :

http://www.immateria.net/index.php?o...ategorie=reves

Il ne reste plus qu'à faire tout le reste...

**Rakken** · 11/01/2009, 23h01

Quitte à viser une programmation propre, autant s'assumer.
Il existe ce qu'on appele le w3c validator, c'est un site qui vérifie que ton code est aux normes "w3c", un standard propre de dev web.
Bref, je pense que tu pourras utilement jeter un coup d'oeil ici

Ca te donne les erreurs et leurs corrections la plus probable. Sans se prendre la tête, il est du coup assez facile de réduire de beaucoup le nombre d'erreurs. Et s'il t'en reste une où deux de récalcitrantes, n'hésite pas à demander conseil, les normes, c'est parfois un peu lourd à mettre en place ;-)

**stanley** · 20/01/2009, 00h30

A mon avis, a refaire le design complètement à zero.

Et voilà pourquoi :

- Je verrais bien le logo en une police plus Techno
- Couleurs tristes, mais ne signifiant absolument pas le paranormal.
- Je verrais bien un Header avec des formes abstraites et bizarroïdes pour un site sur le paranormal, plutot qu'un photo du cosmos avec des étoiles qui brillent.

Bon c'est ma modeste expérience qui parle, mais ce n'est que mon avis

Avis sur http://immateria.net/ - site de partage d'expérience "paranormale".

Mon site

Discussions similaires

Partager

Partager