[Débutant] Un portfolio: www.marylene.site90.net

Bonjour d'abord,

Voilà quelques mois, j'ai entrepris la création de mon premier site web qui est en ligne depuis peu!

Il s'agit d'un portfolio réalisé pour une amie qui est enseignante primaire.

Jusqu'à date, j'ai été formé par le web et ses ressources (autodidacte est assez irrévérencieux vu les ressources incroyables disponible un peu partout sur internet), mais je commence en septembre une formation d'intégrateur web.

Alors, si je peux déjà me débarrasser de quelques mauvaises habitudes dès le début, ce sera tant mieux!

Concernant le code, j'ai décidé d'utiliser un peu de HTML 5 et de CSS 3. Et normalement des solutions alternatives sont disponibles pour les anciens navigateurs (donc le site devrait être accessible si je fais confiance à l'affichage d'IE tester).

Je vous remercie d'avance pour votre attention!

http://www.marylene.site90.net

Bonjour,

Le site est bloqué par mon proxy

Tu n'aurais pas une autre URL ?

Salut Vaxilart,

Au niveau code html5 rien à redire, au niveau design je laisse des personnes plus compétentes en parler.

Il y a juste un problème: c'est l'image de fond en png qui fait plus de 3 Mo, essaye en jpg et/ou recadre pour avoir une bonne répétition sur l'axe des Y.
Modifié par Patidou (28 Apr 2010 - 12:04)

Salut,

J'ai vu le site ce matin mais je n'ai pas commenté par manque de temps, et le fond ne s'était pas affiché. Je trouve qu'il est sans grand rapport avec le reste, et qu'il est très terne, ce qui me donne une impression négative que je n'avais pas ce matin. Il faudrait soit le virer pour un fond de couleur plus vive (mais pas trop car c'est un fond), soit l'atténuer et en changer la teinte grisâtre.

La typo des titres est assez lourde et condensée, il serait peut être bien de l'alléger par une teinte un peu moins violente que le noir, et un peu plus gaie surtout. Je pense qu'un mauve violet irait plus dans le ton du site.
Dans l'ensemble je trouve dommage que les textes soient en noir, et que les liens ne soit pas un peu plus personnalisés que ces horribles couleurs par défaut.

Le choix du texte justifié pour une colonne étroite comme le "qui suis-je ?" de la page d'accueil est une erreur, car cela crée de très grand espaces entre certains mots, qui ne donne pas envie de lire en plus d'être inesthétique. Par ailleurs en typographie française, le point d'interrogation doit toujours être séparé d'un espace avant et un espace après (ponctuation à un seul signe avec uniquement un espace après, ponctuation à deux signes avec un espace avant et un espace après).

Le visuel de la fleur étant un peu plus travaillé que le graphisme et la typographie du nom du site, l'oeil est naturellement attiré vers cette fleur à l'arrivée sur la page car elle prend un peu trop d'importance. A mon sens il faudrait la supprimer ou l'a rendre plus discrète.

La typo choisie pour les menu est très inconfortable car elle n'est pas régulière, ce qui est pénible à lire sur un écran. De plus elle n'est pas anti-aliasée sur FF3.6, ce qui la rend encore plus difficile à lire.

En terme de communication, l'objet du site n'est pas suffisamment visible au premier coup d'oeil. Le terme portfolio (sur le net généralement utilisé pour des galeries d'images) mériterait d'être remplacé par quelque chose de plus explicite.

Par ailleurs, toujours en terme de communication, le sous menu avec comme intitulés "compétence 1", "compétence 2", etc. n'est absolument pas incitatif à la lecture, car on ne sait pas sur quoi on va tomber, ce qui est rédhibitoire pour donner au visiteur l'envie de cliquer. Surtout qu'arrivé sur la page d'une compétence, on se retrouve avec comme titre un numéro de compétence, ce qui oblige à lire le texte pour en savoir plus. Il vaudrait mieux opter pour des intitulés un peu plus longs mais plus explicites.

Sur les textes encore, il serait bien d'ajouter des intertitres entres les différents paragraphes pour permettre un balayage rapide du contenu pour que le visiteur puisse savoir rapidement si cela va l'intéresser ou non.

Le contact devrait être accessible partout et pas uniquement en page CV, car le visiteur n'aura pas forcément l'idée d'aller le chercher là.

Bonjour,

Les premier éléments que j'ai remarqués de négatifs sont:
- La police "fatfinger" n'a pas d'accents, hors certains textes écris avec ont des accents (sous ie6, un carré s'affiche)
- La couleur des liens du footer les rends difficilement lisibles.

J'aime bien le reste sinon, ça semble simple et bien construit.

Bon maintenant que j'ai accès au site,

Pour les couleurs j'ai un peu de mal, pourtant j'adore le rose.

Niveau code :
* Les meta keyword et geo ne servent à rien (dommage pour la second qui serait assez appropriée ici) car ne sont pas utilisées ; elle prennent donc de la place pour rien.

* Il est fait mention du Québec dans la description du site et dans la meta geo, mais pas dans le contenu de la page d'index, cela manque (rien à voir avec le code, mais bon).

* La liste de ton footer n'en est pas une et devrait être balisée avec un paragraphe.

* Tes scripts doivent être placé avant la fermeture du body.

* La façon dont tu protège l'adresse email rend la page invalide.

Pas grand chose à dire, c'est du très bon code ; tu ne devrais pas avoir trop de problèmes pour ta formation

ps. pour Marylène : le LARP c'est bien

Bonjour Vaxilart@Maryilène,
Ce que personne n'a écrit d'emblée : "Bravo !" A vingt ans, une démarche futuro-professionnelle sur le Web est essentielle ! Car ici en France, le sport national royaliste est d'afficher sa hauteur petite et propre !

Laurie-Anne a bien raison de relever que la présence sur Terre n'est pas précisée géographiquement : quoi d'une ambition voire d'une destinée ? C'est toutefois important de le mentionner en clair sur la page.

En effet, l'img de fond est très-très-très longue à télécharger : une option serait d'en définir une partie qui pourrait être background-repeat:repeat;

N'écoute pas trop Mikachu ou Laurie-Anne qui raconte des histoires de couleurs et de goût personnel ! Toute couleur est l'expression sensitive d'une personnalité, mais d'aucun prétendrait-il ici à te la gommer ?

Le code n'est pas parfait, en dépit de ce que l'on t'a raconté ci-avant : 3 erreurs, mais il fonctionne, n'est-ce pas ?


Dans <aside></aside> il y aurait lieu par exemple de définir en css :
-1 l'img en float:left;
-2 le texte en text-align:right;

Je réitère : Bravo pour ta démarche ! et j'espère que ton exemple inspirera tout Québécois... et autre Français !

Bonvent !
_______________________
Ouais ! il faut dire du mal de IE6...
Modifié par zebulin (29 Apr 2010 - 18:10)

zebulin a écrit :
N'écoute pas trop Mikachu ou Laurie-Anne qui raconte des histoires de couleurs et de goût personnel ! Toute couleur est l'expression sensitive d'une personnalité, mais d'aucun prétendrait-il ici à te la gommer ?

(Désolé) ce n'est que mon métier... C'est pas comme si je cherchais à faire ça tous les jours de rendre les supports de communications plus lisibles et attractifs...

Mikachu a écrit :

(Désolé) ce n'est que mon métier... C'est pas comme si je cherchais à faire ça tous les jours de rendre les supports de communications plus lisibles et attractifs...

C'est connu mais il faut le préciser : "Au mal chaussé revient un bon cordonnier..."

Ceci dit : votre docte ne vous autorise point à disposer d'une couleur.

Merci Zebulin pour ce trollage... Mais normalement on attend le vendredi pour ça...

Laurie-Anne a écrit :
Merci Zebulin pour ce trollage... Mais normalement on attend le vendredi pour ça...

Reste-t-il donc à inventer la balise <troll>_</troll> sur alsacréactions ?
_____________________
Ouais ! il faut dire du mal de IE6

Ma "doctrine" peut être, car "docte" est un adjectif... C'est bien de vouloir parler comme un sage mais encore faut-il employer les bons mots.

Maintenant, je ne prends pas plus d'aises à "disposer" d'une couleur que toi tu n'en prends à dénigrer mes suggestions...

Les couleurs sont effectivement question de goûts mais encore faut il savoir de quoi on parle. Pour une œuvre d'art, ce qui semble vraisemblablement être ton domaine, il n'y a aucune restriction à prendre en considération qu'un choix personnel, bien au contraire.

Seulement, là on ne parle pas d'une œuvre d'art, mais d'un support de communication : destiné à faire passer une information. Donc malheureusement il faut souvent opter pour un choix bien plus restreint pour satisfaire le grand nombre, car là on a un devoir d'attractivité si on veut avoir une chance de capter le visiteur pour qu'il lise l'information présente sur le site.

Maintenant, Vaxilart/Marylène ont les deux avis, entre un artiste et un graphiste, et il/elle fera le choix d'appliquer ou non ces suggestions. Et ce n'est pas plus à toi qu'à moi de prendre cette décision.

Mikachu a écrit :

Maintenant, Vaxilart/Marylène ont les deux avis, entre un artiste et un graphiste, et il/elle fera le choix d'appliquer ou non ces suggestions. Et ce n'est pas plus à toi qu'à moi de prendre cette décision.

Alors là ! pile-poil... nous sommes bien d'accord : deux avis valent !

Quant à "docte", vous ne savez pas encore quelle est votre audience. Non en termes de fréquentation du site Alsacréations, mais de la portée réelle de vos posts. Ce serait toutefois votre jeu propre... Quant aux modérateurs qui prétendent consommer l'once infime de génie des visiteurs, ceux-ci devraient néanmoins s'en remettre. Notamment et pour ce qui me concerne, j'ai gommé aujourd'hui sur mon site le lien qui indiquait Alsacréations : point d'avanie, mais seulement moins d'intérêt.
_____________________________
Ouais ! il faut dire du mal de IE6

Bonjour,

Je tenais juste à dire que j'avais lu les commentaires et vous en remercie (m'enfin, pas besoin de détourner le sujet non plus hein!)

J'ai pas le temps en ce moment d'offrir une réponse complète sur les différents points amenés, mais je promet une réponse dans la semaine à venir (car j'ai plusieurs questions suite aux commentaires).

Merci encore,

Bonjour!

Je vais repasser les commentaires en revue et me faire une liste de chose à faire pour améliorer le design.

a écrit :
Dans l'ensemble je trouve dommage que les textes soient en noir, et que les liens ne soit pas un peu plus personnalisés que ces horribles couleurs par défaut.

Je trouvais aussi les textes en noirs un peu fades, hors j’avais essayé différentes teintes de gris et quelques couleurs, mais rien ne semblait ressortir suffisamment pour que la lecture soit claire.

Toutefois, je ne connais pas grand-chose aux couleurs, vous connaissez une bonne documentation à lire sur le sujet?

a écrit :
Le visuel de la fleur étant un peu plus travaillé que le graphisme et la typographie du nom du site, l'oeil est naturellement attiré vers cette fleur à l'arrivée sur la page car elle prend un peu trop d'importance. A mon sens il faudrait la supprimer ou l'a rendre plus discrète.

Je vois ce que tu veux dire, c’est vrai qu’elle attire le regard. Est-ce que ça rééquilibrerais le tout de travailler d’avantage le nom du site pour le faire ressortir d’avantage ? (ombre/contour – m’enfin, lui donner un peu plus de forme et de couleur)

a écrit :
Par ailleurs, toujours en terme de communication, le sous menu avec comme intitulés "compétence 1", "compétence 2", etc. n'est absolument pas incitatif à la lecture, car on ne sait pas sur quoi on va tomber, ce qui est rédhibitoire pour donner au visiteur l'envie de cliquer. Surtout qu'arrivé sur la page d'une compétence, on se retrouve avec comme titre un numéro de compétence, ce qui oblige à lire le texte pour en savoir plus. Il vaudrait mieux opter pour des intitulés un peu plus longs mais plus explicites.

Ces compétences ayant rapport avec un projet pédagogique (et étant numéroté dans la matière officielle du ministère de l’éducation), il n’était pas question de les remplacer (c’était une partie noter à l’université pour Marylène).

Toutefois, j’ai commencé à apprendre Javascript et je pensais faire un script qui afficherait un nom plus explicite de la section lors d’un survol de souris.

a écrit :
* La façon dont tu protège l'adresse email rend la page invalide.

Là, c’est un mystère car je n’ai rien fait pour protéger l’adresse email… Est-ce possible que l’hébergeur fournisse automatiquement une protection?

Et, sur un autre ordre d’idée… Vous connaissez de la documentation sur la protection des adresses mail sur le web?



Et, ma liste des trucs à modifier :
-Couleurs titre/texte
-Lien personnalisé
-L’image de fond (plus vif, moins lourds)
-Texte de la colonne Qui-suis-je (+ « ? »)
-Fonte du menu à changer
-Exposer plus clairement le contenu du site (« portfolio »)
-Option de contact disponible sur chaque page
-Placer les scripts à la fermeture de body

Salut, j'ai travaillé dessus ce soir.

Plusieurs de vos conseils ont été très utiles même si c'est pas encore terminé. Mais déjà je trouve le graphisme plus sympa!


Cela dit, de mon côté IE n'affiche plus rien à sa place... Et là, je ne sais pas du tout pourquoi...

Vaxilart a écrit :
Et, sur un autre ordre d’idée… Vous connaissez de la documentation sur la protection des adresses mail sur le web?

Le plus sûr c'est d'utiliser un formulaire de contact et de le protéger par captcha (normal ou inversé, suivant le niveau de protection nécessaire).

Ok, merci Laurie-Anne, je vais m'informer sur ça!


P.S.: Pour les problèmes d'affichage avec IE, j'ai trouvé le pépin! En mettant tous mes scripts à la fin, j'enlevais le script qui créait les éléments HTML5 sur IE, de fait les blocs n'étaient plus afficher. J'ai donc dû remonter ce script dans le header en commentaire conditionnel.

Laurie-Anne a écrit :
Le plus sûr c'est d'utiliser un formulaire de contact et de le protéger par captcha (normal ou inversé, suivant le niveau de protection nécessaire).

Le captcha est parfois inaccessible quand il s'agit juste d'une image.

J'ai jadis utilisé cette méthode pour un livre d'or et ça marchait bien. Pour plus d'efficacité, on peut utiliser des services comme akismet.

Oui c'est pour cela que je parlais de captcha inversé (=invisible), ça marche effectivement très bien sur de petits sites.