(Amateur) Vos avis éclairés : www.verdesperance.org

Bonjour,
J'ai suivi la formation HTML & CSS dispensée par Florent Verschelde chez Elephorm et ceci est mon premier site :
http://www.verdesperance.org
J'ai navigué quelquefois sur alsacréations pour "piquer" quelques trucs. Merci.
Totalement débutant, je suis allé au plus simple (pas d'image de fond, menu simple...) mais j'envisage, bien sûr, de le faire évoluer. Par exemple mettre un formulaire pour prevenir de toute nouvelle actualité, mais ça je ne sais pas faire (php ?)
La propriété border-radius n'est pas toujours reconnue. Mais avec les dernières versions de Chrome, Safari et Firefox je n'ai pas de problème.
Donnez-moi votre avis et montrez-moi mes erreurs : c'est comme ça que j'avancerai.
Encore une chose, je suis retraité et j'avoue que j'ai pris beaucoup de plaisir à le réaliser. Je n'envisage pas d'en faire commerce. Quoique, s'il faut un jour, faire travailler les vieux...
Merci et très belle journée.
Modifié par koikidi (07 May 2011 - 09:34)

Bonjour,

Merci d'éditer ton sujet et de modifier son titre en ajoutant le nom du site ou son URL, comme cela est demandé dans les règles spécifiques de ce salon.

Damn !

Tu es le papy que j'aurais aimé avoir (oui on va se tutoyer) ! J'aime beaucoup cette curiosité (il en faut pour se mettre à l'intégration à la retraite) ... comme quoi, les temps changent ! Mes papy étaient agriculteurs eux, un autre monde quoi

Bon, passons à ta production :

- Graphiquement (ça reste subjectif) : pour moi cela ne fonctionne pas, le violet n'est pas en accord avec le vert et le jaune qui se marient correctement.
- La bordure violette des images ne les met pas en valeur.
- Il faudrait travailler les textes. Leur interlignage par exemple.
- Un changement lors du passage de la souris sur un item du menu pourrait être un plus. Un background-color différent par exemple.
- Pourquoi avoir placé les images dans des P ici ? :

<div class="images"> 
	<p><img alt="Cartons" src="images/001.png"/></p> 
	<p><img alt="Peluches" src="images/002.png"/></p> 
	
</div><!--.images--> 

- Ton entête ne contient qu'un titre h1, la div est donc superflue.

<div id="entete"> 
 
<h1><img  alt="VERD'ESPERANCE" src="images/entete.png"/></h1> 
 
</div><!--#entete--> 

- Il faut savoir que niveau accessibilité ce titre en est l’opposé. Pour limiter les dégâts (au moins pour google et les lecteurs d'écran) tu peux y placer ton titre en toute lettre, lequel via les CSS sera placé hors de la page via un text-indent -9999. Attention toutefois, sur un navigateur classique, si les images ne se chargent pas, ton titre en toutes lettres ne s'affichera pas non plus (car déplacé).

- Ton copyright ne nécessite pas d’être dans un Div, appliques les styles directement au P qui est une balise de type bloc au même titre que le div.

Bon courage pour la suite.
Modifié par fufu (09 May 2011 - 21:42)

Bonjour,

fufu a écrit :

- Il faut savoir que niveau accessibilité ce titre en est l’opposé.

Pourtant, une image <img> avec un alt approprié dans un h1 est la technique la plus recommandée. Tu pourrais élaborer sur les raisons qui te poussent à croire que son titre est inaccessible?

Merci

Tony Monast a écrit :
Bonjour,



Pourtant, une image &lt;img&gt; avec un alt approprié dans un h1 est la technique la plus recommandée. Tu pourrais élaborer sur les raisons qui te poussent à croire que son titre est inaccessible?

Merci

Tu as raison, je n'ai pas fait gaffe à l'alt ...

Edit : L'alt aura la pertinence d'un titre h1 ?
Edit 2 : Beaucoup de discussions autour du sujet par le passé
Modifié par fufu (09 May 2011 - 19:34)

Hello,

fufu a écrit :

Edit : L'alt aura la pertinence d'un titre h1 ?

Rapidement, juste sur ce point, mon expérience empirique (et vive les pléonasmes) montre qu'un alt possède une valeur très proche du texte « brut ». Sur des mots clés hautement concurrentiels, ça peut peut-être jouer légèrement (mais sûrement pas autant que le contenu du document à référencer)… Je n'ai cependant jamais eu l'occasion de le constater de façon visible jusqu'à présent.
Modifié par audrasjb (09 May 2011 - 21:37)

audrasjb a écrit :
Hello,



Rapidement, juste sur ce point, mon expérience empirique (et vive les pléonasmes) montre qu'un alt possède une valeur très proche du texte « brut ». Sur des mots clés hautement concurrentiels, ça peut peut-être jouer légèrement (mais sûrement pas autant que le contenu du document à référencer)… Je n'ai cependant jamais eu l'occasion de le constater de façon visible jusqu'à présent.

Merci pour ton retour

Re,

Pas de souci fufu, mais ce n'est que le fruit de mon expérience. Des référenceurs pur et durs pourraient éventuellement infirmer tout ça avec des études de cas solides… Pour ma part, je pense simplement que pour la majorité des sites, mieux vaut un bon texte alternatif.

…et je te plussoie concernant le site proposé à la critique : il faudrait que les liens du menu aient un comportement au survol du lien. Attention toutefois à utiliser conjointement les pseudo-classes :hover et :focus afin de mettre en évidence le survol clavier tout autant que le survol du pointer souris
Modifié par audrasjb (09 May 2011 - 21:47)

Papy, papy, comme tu y va. Mais bon... c'est vrai, ma musique est plutôt celle des années 60.

En ce qui concerne la partie graphique, je suis parti du vert du logo de l'association et j'ai travaillé avec la complémentaire (merci Colorjack) qui était ce rose. Je trouve cela gai et convenant bien pour une association qui s'occupe d'enfants.

Pour le menu, en effet, j'envisage un changement de couleur au survol et pour la page sélectionnée (propriété hover et focus comme le dit audrajb, merci). Mais j'avais déjà passé pas mal d'heures dessus et, satisfaction toute personnelle, j'étais pressé de voir le site en ligne.

Merci à vous de vous être penchés sur mon modeste travail. Je vais essayer de l'améliorer. Mais pas tout de suite. Je profite du printemps.

Pour une première réalisation c'est du beau boulot !

Pour ma part le seul truc qui me dérange un peu, c'est le fond gris, mais c'est subjectif.

Profitez bien du beau temps !

Simple, mais efficace. Un beau site !
Bonne chance avec ton association !

Bonsoir,

Tout d'abord félicitation pour ton site.

Graphiquement, le choix des couleurs ne me parlent pas du tout, mais je trouve cependant qu'elles sont bien assorties.

Au niveau du code, notamment de l'accessibilité, je te conseil de revoir ta page «Participer».

Car au niveau de ton formulaire, tu n'as pas «labelisé» ce qui devait l'être (nom, prénom, adresse). Je te conseille d'aller te renseigner sur ce sujet, car en plus d'augmenté l'accessibilité du site (utile pour les navigateurs alternatif), tu augmenteras également son utilisabilité. Car si tu labélises, un simple clique sur «Nom» donnera le focus au champs concerné, à la place de devoir systématiquement cliquer dans l'input concerné, moi c'est comme ça que je procède quand je rempli un formulaire. Alors quand il n'est pas labélisé correctement je me sens désarçonner ^^ (je ne dois pas être le seul j'imagine)

Dans cette page tu utilises la balises br qui est déprécié, je te conseillerai plutôt de jouer sur les margin/padding des éléments de la page.

Je te conseil de valider ta page avec l'outil du w3c, sa pourrait t'aider sur les erreurs les plus visibles, et de se fait, rendre ton site encore plus conviviale (oui c'est possible ! ^^)

Un dernier petit conseil, toutes les pages ont le même title, je te conseil d'en choisir un spécifique à chaque page. En plus c'est bon pour le référencement !

J'espère t'avoir un peu aidé ^^

Bien à toi

Edit : ah oui j'allais oublier, ce qui est un peu gênant aussi, c'est que dans ta galerie photo, si je veux en agrandir une, je me retrouve sur une page avec aucun moyen de revenir en arrière. C'est un peu chiant si je veux toutes les regarder. Ici je te conseil un petit plugins simple d'installation appeler lightbox du framework jquery. Si tu cherches un peu sur la toile, tu trouveras de nombreux exemple et des tutoriels pour t'aider à l'installer. Tu verras c'est très simple d'installation, et ça donne un certain cachet au site je dois dire ^^

Si tu as des questions à ce sujet n'hésite pas à me contacter en message privé
Modifié par Gili (10 May 2011 - 22:08)

Gili a écrit :

Dans cette page tu utilises la balises br qui est déprécié, je te conseillerai plutôt de jouer sur les margin/padding des éléments de la page.

Qu'est ce qu'il faut pas lire des fois...

La balise br n'est absolument pas dépréciée :

http://dev.w3.org/html5/markup/br.html

Merci de ton retour,
Oups ! W3C s'est mis au rouge et pas qu'un peu pour la page "participer". Je vais reprendre mon DVD de formation et revoir tout ça.
Pour la galerie de photos, c'est vrai qu'elle ne me donne pas satisfaction. Mais avec mes compétences je n'ai pas pu aller plus loin. Dans l'idéal j'aurais voulu que toutes les petites photos s'affichent dans la colonne de gauche (div images) et que la photo agrandie apparaissent dans la colonne de droite (div texte). Si tu as une solution simple (je suis très, très débutant) je suis preneur.
"Cent fois sur le métier remettez votre ouvrage...". Vous connaissez la suite.

Oui bon déprécié j'avoue que j'abuse un peu, j'aurai du dire qu'elle n'a plus lieu d'être en XHTML Strict pour moi.

Car je trouve que quand on choisi de modulariser le code en séparant la forme et la présentation la balise <br /> n'a plus lieu d'être vu qu'elle n'a pas de sens sémantique. Et l'HTML sert bien à décrire la sémantique d'un document.

De plus, il me semble que passer à la ligne ça équivaut bien à commencer un nouveau paragraphe dans la lecture courante, donc je trouve plus logique d'utilisé un nouveau <p>. Si <br /> est utilisé pour autre chose, par exemple pour ajouter de l'espace entre deux div, là non plus je ne comprend pas pourquoi ne pas utilisé la propriété margin en CSS.

Quand on suit une logique de développement autant le faire jusqu'au bout, enfin ce n'est que mon avis, et si je ferais partie du W3C (le rêve ) je la déprécierai cette foutue balise qui sert plus à rien

Enfin ce n'est que mon avis, et je suis toujours étudiant, donc je t'avoue qu'il ne vaut pas grand chose vu que je n'ai pas le poids de l'expérience, mais mon raisonnement me semble logique, et si il ne l'est pas je t'invite à m'expliquer pourquoi, comme ça j'aurai encore appris quelque chose tien ! ^^

A bientôt

Bonjour,

Le <br> sert à faire un retour à la ligne, ce qui est différent d'un nouveau paragraphe. Si tu écris un poème ou un bloc d'adresse par exemple, tu pourrais utiliser le <br> pour faire les sauts de ligne, car chaque ligne n'est pas forcément un nouveau paragraphe.

<p>J'aime donner des coups de pelle<br />
Dans les sombres ruelles<br />
En ne démontrant aucune pitié<br />
À ma victime étonnée</p>

<p>Je m'enfuie ensuite en courant<br />
Avant de me faire péter les dents<br />
Par les témoins enragés<br />
Qui veulent jouer aux justiciers</p>

C'est un joli poème hein?
Modifié par Tony Monast (11 May 2011 - 20:14)

Il est magique ton poème

Salut Tony,

Effectivement c'est un chouette poème ^^ et un super exemple en plus (même si je n'en vois vraiment pas d'autre), ça sera une bêtise en moins que je dirai ^^

Merci merci !

Merci, ça fait chaud au coeur!

Un dernier exemple serait :

<h2>Coordonnées</h2>
<p><strong>Alsacréations</strong><br />
5, rue des Couples<br />
67000 Strasbourg, France</p>

Modifié par Tony Monast (11 May 2011 - 20:35)

Un autre exemple serait :

Um mètre de <br /> : <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />