[Amateur] Site association P@JE

Bonjour tout le monde,

actuellement en stage de première année de BTS IG (Informatique de Gestion - prochainement Service Informatique aux Organisations ), j'ai réalisé un site web pour une association de quartier - association Pasteur Avenir JEunesse - P@JE. Ce site permet à l'association d'avoir une présentation en ligne de ses fonctions et des services qu'elle propose.

Les différentes pages de mon site sont gérées en PHP (pour l'importation du contenu depuis des fichiers .txt), donc j'ai reproduit la page d'accueil en HTML (qui est similaires aux autres pages) qui est passé au contrôle de HTML5, mais comme ce contrôle n'est qu'en test, j'ai donc fait la vérification en HTML 4.1 strict. Il passe parfaitement.

Mon CSS est valide CSS de niveau 3.

Pour ce qui est de la partie technique du site, je gère (tant bien que mal ). Et dans la partie administration, il y a tout une fonction back office qui permet de rajouter du contenu dans les fichiers .txt, ainsi qu'un formulaire d'upload et de redimensionnement d'images.
Mais mon point faible, c'est la partie graphique...
La charte graphique du site est celle que l'on m'a imposé, c'est-à-dire bleu et jaune.

www.paje.asso.fr

Si vous avez la moindre critique à faire, qu'elle soit positive OU négative, je suis preneur

Et puis, ce n'est que mon premier site hébergé sur la toile, d'autres devrait bientôt voire le jour également

Merci d'avances pour vos critiques

Bonjour,

Le logo fait très ancien .. très "old school".

La police d'écriture est pas super jolie

Le texte à côté du logo est une image, tu aurais pu le mettre directement en texte pour être plus accessible...

Des balises meta et link sans le /> pour définir que ce sont des balises seules.

Les couleurs sont pas très jolies, je trouve que le site fait plutôt site des années 2000.

Le alt "bandeau" de l'image du header est pas très adaptée.

Malheureusement, pour le logo j'avais choisi au début le logo ci-joint (qui été en cours de création). Mais le patron de l'association veut que l'on garde l'ancien logo de l'association. Donc, sur ce point, je ne peux malheureusement, rien changer...

La police d'écriture, pareillement, le patron voulait une police d'écriture "classique". Mais je vais essayer d'en trouver une mieux quand même...

Je vais mettre le texte à coté du logo sous forme de texte, tu as raison.

Pour ce qui concerne les balises meta et link, c'était une erreur, que j'ai corrigé.

Les couleurs...les couleurs !! Moi-même je ne les trouve pas bien du tout. Mais sur ce point, je ne sais pas quelles couleurs mettre, tout en respectant la charte graphique...

Le alt du header est corrigé.

En tout cas, je te remercie de ta franchise ! Même si j'ai conscience des problèmes de couleur.
Et merci pour tes retours

Salutation Blooheek.

D'abord je te dirais que j'apprécis beaucoup ce genre de sujet. Le web d'association. Ce qu'il y a de merveilleux pour ce genre de site est son peu d'investissement. Ce qui est tout à fait logique. Mais plus merveilleux encore sont les moyens technologiques utilisées. Le simple HTML et CSS, avec un peu de PHP, sont souvent (et doivent), répondre avec suffisance au web associatif. J'avoue ma sensibilité à ce genre de sujet parce que l'investissement est secondaire (mais leur visibilité nécessaire).

Les points faibles :

La typographie et les encadrements (border et/ou background en CSS).
La charte des couleurs et le logo qui prend toute la largeur. Le logo est une chose et le texte explicatif en est une autre. La différence entre un logo et un texte de description, c'est que le logo est souvent présent sur plusieurs années, tandis que le texte descriptif peut changer demain matin. Imagine que l'association déménage la semaine prochaine. Tout est à refaire au niveau de l'entête. Bon évidemment on pourrais aussi parler de référencement, mais moi perso j'évite. Le seul fait de devoir lancé plusieurs logiciels pour remédier à la situation me suffit amplement de comprendre que le texte de descriptif en entête se doit être de la typographie pure à 100% (HTML).

Pour ce qui est de la couleur, c'est malheureux qu'une association ne fasse pas confiance au web designer. Mais il n'est pas impossible de faire comprendre que l'association devrait te laisser plus de décision (esthétique et technique). J'ai vue d'ailleur qu'un background au niveau de l'entête est jaune et pas très jolie. Pourquoi pas bleu ?

Cependant pour ce genre de site, je te dirais de toujours cibler la simplicité, comme tu le fais présentement. Je dirais même que le web d'association exige une telle simplicité. La simplicité n'empêche pas la qualité esthétique (bonne mise en page et belle typographie, c'est le merveilleux du HTML et CSS), mais au contraire, lorsque bien fait, pourra rendre le maximum d'intérêt non seulement en terme esthétique mais aussi, en terme de développement idéologique du sujet. Soutenir l'intérêt du lecteur en quelque sorte, et qui ne demande pas nécessairement d'investissement majeur.

Je te laisse ici avec un livre gratuit en .zip ou en .sit pour Mac ou en .pdf. Mais d'abord et avant tout sur le site de Ève Demazière qui traite du web associatif et de son expérience auprès des associations.
..
Modifié par zardoz (23 Jun 2011 - 16:47)

Salut Zardoz,
merci pour ces retours intéressants !!
J'ai en effet voulu créer un site en partant de rien pour mon premier site hébergé...
Et j'avoue que le PHP allié à l'HTML est très pratique

J'ai changé la police d'écriture, pour un meilleur affichage. Les changements vont peut-être prendre un peu de temps car j'envoie les nouveaux fichiers via un serveur svn et l'hébergeur doit valider la nouvelle modification pour que les changements soient pris en compte, et je crois bien qu'il a fini de travailler pour aujourd'hui ...

Au niveau des couleurs, je vais essayer de changer un peu le tout quand même...
J'ai remplacé la couleur de fond également. J'ai opté pour un gris-bleu clair.
Est-ce que je dois enlever les coins arrondis des div de contenu ??

J'ai également refait le bandeau du site en mettant le logo (pas très beau mais je ne peux rien y faire) à gauche et le texte à droite pour une meilleure accessibilité en effet..

Pour ce qui est des encadrements de titres, y'a t-il un moyen pour faire une bordure autours du titre et non sur toute la largeur du conteneur ? C'est ce que je voulais faire à la base...

Merci pour le livre, j'y jetterai un œil après mes stages ^^

Je te remercie pour tes commentaires

Si vous avez une suggestion pour des couleurs (pas des couleurs noirs, rouge, violet ou autre ) je suis preneur !!

Merci !
Modifié par Blooheek (23 Jun 2011 - 17:18)

Salut

Alors j'attendrai les changements pour continuer. Côté technique il y a un scroll bar horizontale sur IE8 (je n'ai pas vérifier les autres navigateurs), que tu pourras éliminer si tu as un DIV globale qui contient le reste avec overflow:hidden ou overflow:hidden au niveau HTML, BODY en CSS.

C'est bizarre, j'ai testé le site sur IETester, et je ne vois pas cette scrollbar.. J'ai bien sûr tester le site sur différents navigateurs : Opéra 11.11, Chrome 12, IE 9 et Firefox 4 et 5 et même sur le navigateur Android 2.3 .

Je viens de le tester sur IE 8 (sur xp) et en effet, il y a un scroll horizontal, mais je pense que c'est du à la résolution de l'écran...

En quelle résolution es-tu ?Enfin, je ne pense pas que ce soit un problème de résolution puisque je l'ai testé sur mon portable (desire HD) et je ne vois pas ce problème.
J'ai quand même ajouté la propriété sur mon css. Tu pourras donc vérifier demain matin vers 09h30, si cela fonctionne bien.

Merci
Modifié par Blooheek (23 Jun 2011 - 20:24)

La modification est appliquée.
Cependant, j'ai aussi caché la scrollbar verticale sans faire exprès... J'y remédie tout de suite..

Et les coins arrondis, ça passe ?

Merci...
Modifié par Blooheek (24 Jun 2011 - 14:21)

Bonjour,

Le site fait très vieillot (genre fin des année 90)... Les coins arrondis, l'ombre portée et le logo mal fini n'arrangent rien.

Il y a clairement un problème avec les typo : personnellement, je ne suis pas fan du mélange et j'ai un problème avec les différences de tailles entre le menu et le contenu. Ceci n'est absolument pas maitrisé alors que c'est important.

niveau code, il serait bien d'utiliser les <p>aragraphes. Il faut revoir la hiérarchie des titres (commence à h2 au lien de h1) et éviter les balisage de mise en forme (font, center). Hors ça, pas trop de problèmes.

Merci de tes retours.

Les différents types d'écriture c'était pas voulu...

Je vais refaire entièrement le design du site, ça sera plus simple
Comme dit plus haut, l'hébergement étant géré en svn, les modifications ne seront présente que lundi.

Merci encore.
Je sais qu'il faut que je m'améliore niveau design.

Je vous retient au courent de toute façon. Merci pour votre aide.

Salutation tout le monde

Je suis allez faire un tour pour vérifier les refontes. Moi perso je n'utilise pas CSS3 pour cette seule raison que je pourrai arrondir les coins, placer des ombres portées, contrôler (attribut:valeur).

CSS3 est une technologie retardataire, pareillement pour HTML5.

Nous arrondissons les coins depuis fort longtemps au travers les technologies XML (SVG en occurrence). Aussi au travers d'autres technologies comme Flash. Mais qu'il s'agisse de SVG ou Flash, nous pouvons développer une timeline avec ses technologies. Cette timeline est présente en HTML5. Si c'est nouveau pour vous, ce n'est pas comme çà pour moi.

Il ne faut pas abusé des coins arrondis et surtout, ne pas croire que c'est new look. En ce qui concerne les coins arrondis, ceux que tu as choisi de nous présentés sont trop large en diamètre. Ceux-ci pourront être beaucoup plus discret.

N'oublions pas une chose ici, c'est que les coins arrondis nécessitent inévitablement le changement de valeur à d'autre propriété : comme le padding par exemple, qui semble être une propriété sensible.

Dès que les coins sont arrondis nous devons reconsidéré le padding ou le margin. Dû moins pour les refontes. En un mot il n'est si simple de faire une refonte en utilisant ce que l'on ose identifier comme étant une nouvelle technologie. Disons plutôt une nouvelle version d'une techno déjà connu depuis longtemps.

Ne soyez pas assommé de cette nouvelle version. Seule la version est nouvelle, mais pas la technologie. Nous la connaissons depuis fort longtemps via les techno's XML.

Blooheek : Tu devras considérer l'apprentissage à sa base. HTML5 et CSS3 veut encore dire HTML et CSS.

..

intéressant zardoz, j'adore svg mais je le voyais cantonné dans le dessin je n'y avais pas songé en tant que créateur d'interface ... mais j'aime bien la séparation entre le texte et le look avec le couple HTML/CSS.

Sinon pour le site Page, je trouve les arrondis un peu gros en rayon, et surtout ça ne cadre pas du tout avec le menu rectangulaire.

Par contre le site est bien lisible, c'est le principal , pour un site de ce genre il ne faut pas tenir compte de la mode : dans 10 ans il y a des chances que le look soit le même que celui que tu livreras en final , la mode change : dans 10 ans les sites arrondis feront ringards (j'en sais rien juste une hypothèse ... ) etc ... Bref essaye que le site soit plaisant/ergonomique/accessible et de bon goût , surtout qu'il plaise aux usagers du site : les membres de l'association.

Le logo aurait besoin d'une meilleure résolution, il parait tramé , pas très joli je trouve ...

Arialia a écrit :


Par contre le site est bien lisible, c'est le principal

Yeah, premier compliment !!!

Comme dit plus-haut, ce week-end, je me charge de lui refaire entièrement son design et son mode de fonctionnement pour le contenu des pages (base de donnée au lieu de fichier texte).

Merci pour le retours sur les coins, j'y ferai plus attention maintenant.

zardoz a écrit :

Tu devras considérer l'apprentissage à sa base. HTML5 et CSS3 veut encore dire HTML et CSS.

@zardoz : je ne comprend pas trop ce que tu veux dire... Tu penses que j'ai créé le site en faisant attention au CSS3 et/ou HTML5 ? Si oui, ce n'est pas du tout le cas...
Même si je pense qu'il vaut mieux apprendre directement en respectant les dernières "recommandations" pour ces "langages" de programmation.
Si non, alors j'ai rien compris

Le logo, à la base, il était en fond blanc. C'est pour ça qu'il a perdu de qualité. Mais avec le nouveau design, je vais faire l'header en blanc, donc la qualité sera supérieure au niveau de l'image du logo.

Merci à tous et à toutes !!!

RDV demain pour le "nouveau" design Mais je pense que j'aurai encore besoin de vos avis/conseils sur ce dernier

Arialia a écrit :

Sinon pour le site Page...

C'est paje

Ca m'a valu beaucoup de fautes d'orthographes
Modifié par Blooheek (26 Jun 2011 - 12:11)

J'ai un peu avancé dans le design du site...

Que pensez-vous de ce modèle que je viens de faire ?

zardoz a écrit :
Cependant pour ce genre de site, je te dirais de toujours cibler la simplicité
..

Comme me la conseiller zardoz, je cherche la simplicité

J'aimerai bien que le texte commence entre les deux encadrés bleu, mais je n'y arrive pas. Donc je pense que dans cet espace, je mettrai une photo qui dépendra de la page visitée.

Pour le texte, je n'ai pas encore mis en forme les différents titres. Je commence en h1 pour respecter la hiérarchie des titres comme me la conseiller Laurie-Anne, que je remercie

Merci
Modifié par Blooheek (26 Jun 2011 - 19:55)

Blooheek a écrit :
Pour le texte, je n'ai pas encore mis en forme les différents titres. Je commence en h2 pour respecter la hiérarchie des titres comme me la conseiller Laurie-Anne, que je remercie

H1 !

Désolé, erreur de ma part (corrigée)

Salut

C'est que les encadrés étouffent les titres ou sous-titres. Moi perso je ferais plus léger en écriture. Ton but devrait être de rendre un nouveau titre sans être obliger de l'ajuster.

Seulement si tu le désire je t'offre un lien vers le site de OMS. Que je crois être une réussite. Tu pourras naviguer si tu le désire. J'espère juste que tu comprendra l'intérêt d'une telle simplicité.

Ton but doit être de construire un site où il sera simple d'ajouter ou de soustraire des textes, selon un formatage pré-définis. C'est ton seul but en réalité. Ou dû moins ça devrait-être ton seul but. Et c'est ce but qui doit-être simple.

Le fait d'imbriquer des DIV l'un dans l'autre doit être réfléchis. Ton point faible est de ne pas reconnaître ou stopper l'imbrication. Oublis pas que les H1, 2 etc, sont hiéarchisé. Le seul fait de respecter cette hiéarchie nous prouvent l'intérêt du designer à fonctionner selon des normes. Il est trop facile de se perdre en écriture.

Je te demandrais juste une chose Blooheek : De libérer les titres de leurs encadrements (voire même de leur DIV).

Ce sera donc à toi de nous prouvez que ton rôle premier, dans un cadre de stage, est beaucoup plus que la seule représentation visuel d'une page web. Tu dois concevoir en fonction des besoins du client. Sur la façon dont le site devras être utilisé, non seulement par les visiteurs mais surtout par ces gens qui auront une autorité administrative. Ces gens qui auront accès à la modification (ajout/supression) d'articles.

C'est pour eux que tu construit un site web.

..

Merci zardoz de prendre du temps pour me détailler aussi clairement tes impressions

Mais comme dit plus haut, déjà je suis en train de refaire entièrement le design du site pour qu'il soit en effet beaucoup plus lisible.

Que penses-tu du design présenté juste au-dessus ?
Sachant que je n'ai pas encore mis en forme le texte. Mais je ne sais pas trop comment mettre en forme les titres (soulignés, colorés, centrés...).

Je comprend ce sur tu veux dire pour la partie de rajout de contenu. Et cette partie, crois-moi, est plutôt simple. Il s'agit d'un simple formulaire où l'on choisit la page sur laquelle rajouter "l'article", on choisi un titre à cet article, et on écrit son contenu... Je pense que c'est assez simple... Mais comme dit précédemment, la partie technique du site, je sais "gérer" (sans vouloir me jeter des fleurs hein !) même si je sais que j'ai tout de même beaucoup de chose à apprendre encore.
Mais pour moi, la programmation c'est un réèl plaisir, et ainsi une passion, donc le PHP, j'adore !

Pouvez-vous me dire ce que vous pensez de la nouvelle interface du site jointe dans mon post précédent ? Il ne me reste plus qu'à faire les connexions à la base de donnée, et d'upload les fichiers... Et demain matin je commence un autre stage donc ça va être légèrement plus lent au niveau des modifications.

Mais en tout cas, je ne compte plus remettre des encadrés pour les titres lol !

Merci à tous

Salutation

Je vois que tu es vraiment intéresser.

Tu as plusieurs niveaux d'imbrications. Des DIV dans des DIV. Fait juste attention avec ce genre d'imbrication. L'implémentation de HTML nous prouvent que nous pouvons minimisés les niveaux. Les niveaux devront être utilisé avec intelligence. La notion parent/enfant devrais suffire. Plus loin dans les niveaux devra exiger plus de structure. Mais il n'en est pas ainsi de ton site, où nous y voyons que des titres, sous-titres, images, et quelques technologies de pointes.

Dans ton cas Blooheek il n'est pas nécessaire d'imbriquer à autant de niveaux. À mort les DIV dans des DIV. N'oubli pas que la seule implémentation HTML suffira à comprendre les raisons qui nous poussent à ne pas imbriquer. Un seul DIV suffira à intégrer et le titre, et le sous-titre, et le paragraphe (et j'en passe là), en une seule et unique zone formater (sauf exception). En CSS, tout se comprend lorsque nous comprenons le rôle de HTML.

..
Modifié par zardoz (27 Jun 2011 - 04:09)

Justement dans le nouveau design, il y a beaucoup moins de div imbriquées...
Je poste le code principal du nouveau design, comme ça vous pourrez vous en faire une idée.

<!DOCTYPE html>
<html>
    <head>
        <title>Association P@JE</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/General.css">
    </head>
    <body>
        <header>
            <img src="images/Logo.png" alt="Logo de l'association P@JE"/>
            <div id="Adresse"> Association Pasteur Avenir Jeunesse<br>3 bis avenue Gautier Roux              06000 Nice<br>04 83 50 33 68
            </div>
        </header>
        <nav id="Menu">
            <a href="#">Accueil</a>
            <a href="AssoPaje.php">Association P@JE</a>
            <a href="#">Médiation</a>
            <a href="#">6 - 12 ans</a>
            <a href="#">12 - 22 ans</a>
            <a href="#">Evenement</a>
            <a href="#">Parentalité</a>
            <a href="#">Galerie Photo</a>
            <a href="#">Emploi</a>
            <a href="#">Contactez-nous</a>
        </nav>
        <div id="MenuVertical">
            <ul>
                <li><a href="#">CLAS</a></li>
                <li><a href="#">PRE</a></li>
                <li><a href="#">Accueil Collectif des Mineurs</a></li>
                <li><a href="#">VVV</a></li>
                <li><a href="#">Café Partage</a></li>
                <li><a href="#">Groupe de Parole</a></li>
            </ul>
        </div>
        <div id="Information">
           Information : <p>Contenu Information</p>
        </div>
        <div id="Contenu">
            <h2>Association Pasteur @venir Jeunesse</h2>
            <h3>Services</h3>
            <p>Contenu</p>
        </div>
        <footer>
            <nav id="Footer">
                <a href="#">Accueil</a>
                <a href="#">A propos de nous</a>
                <a href="#">Contactez-nous</a>
                <a href="#">Evenements</a>
                <a href="#">Médiation</a>
                <a href="#">Partenaires</a>
                <a href="Administration.php">Administration</a>
            </nav>
        </footer>
    </body>
</html>