[Amateur] Jojaba en HTML5 !

Bonsoir,

Ça y est, j'ai fait le pas, mon site perso est à présent structuré en codage HTML5 avec quelques éléments css3.
# Nom du site : Jojaba
# URL : http://jojaba.free.fr/
# Thème : Traductions diverses (extensions Mozilla, sites,…), codage HTML, CSS, php sur des plateformes diverses (Pume CMS, FluxBB,…) et divers autres sujets.

Les objectifs principaux :
*********************
* Amélioration du référencement (ça n'a aucune importance que je sois bien référencé ou non, je souhaitais juste appliquer ce qui a été dit à ce propos à la kiwipartÿ). Il manque encore quelques petites choses mais je souhaitais avoir votre avis déjà sur ce qui est mis en place...
* Ajout des balises sémantiques (header, article,...)
* Modification du style (prévu pour IE9 et supérieur et les navigateurs dits modernes), dégradation du style pour ie7 et 8 de manière "à peu près" gracieuse. J'ai fait l'impasse sur ie6, pour un site perso, je pense que ça doit être acceptable. Je ne souhaitais pas créer une deuxième feuille de style exprès pour IE, je compte plutôt me pencher sur une feuille de style pour portables (je m'y attaquerai dès que vous aurez terminé de tirer à boulets rouges sur moi )
* Je me suis un peu amusé avec des transformations css3 qui fonctionnent presque toutes sur Firefox (dernière version), mais pas de la même manière avec Opera ou Chrome (dernières versions).
* On peut visionner le site jusqu'à une largeur de 800px (comme dit, je créerai probablement une feuille de style spéciale pour téléphones portables 240px de large c'est ça ?)

J'attends de votre part des critiques sur le référencement (peut-être également sur l'accessibilité à laquelle j'ai également fait attention), la structure html5 et (ce qui n'est vraiment pas mon fort) le design. Je suis preneur aussi de conseils, bien entendu.

Merci d'avance.

PS : n'y allez pas tous en même temps, les serveurs Free sont réputés pour être plutôt "faibles" en performances, donc, toutes mes excuses si vous rencontrez une erreur 500...
Modifié par jojaba (20 May 2012 - 18:59)

Bonjour

Selon moi, les moins :

* Mauvaise accessibilité des couleurs : bleu sur bleu, etc.
* Texte trop collé aux illustrations dans les boites articles récents ou à côté de la grosse boite fixed.
* Onglet "page d'accueil du site". Le texte "accueil" suffirait, non ?
* Structure des titres un peu étranges : "Brèves récentes" en h2 et "Articles récents" en h1 ? Pour moi, "Jojaba" et "Bienvenue" en h1; le reste en h2.
* D'ailleurs, le titre h1 doit être dans <article>. De même, <article> englobe le contenu important : il n'a pas à être encadré d'une <section> (il en contiendrait plutôt).


Les plus :

* Bonne gestion du zoom.
* Mise en page solide (wat?)
* super contenu !
* Plume cms \o/

Merci Muchos. Je ne réponds qu'aux points négatifs...

Muchos a écrit :

* Mauvaise accessibilité des couleurs : bleu sur bleu, etc.

C'est un point qui a pourtant été traité lors de la kiwiparty,... Merci de me rappeler cela. J'ai trouvé une ressource Web concernant les contrastes à mettre en place pour les déficients visuels : http://www.handi-pratique.com/contraste-couleurs-accessibilite-web

a écrit :

* Texte trop collé aux illustrations dans les boites articles récents ou à côté de la grosse boite fixed.

Euh, perso je ne trouve pas. Je vais voir si d'autres avis vont dans ton sens.

a écrit :

* Onglet &quot;page d'accueil du site&quot;. Le texte &quot;accueil&quot; suffirait, non ?

C'est juste une question de taille d'onglet. Il me faut deux lignes pour obtenir des onglets de même taille, je n'ai pas fixé la hauteur des onglets. Je ne pense pas que cela dérange outre mesure.

a écrit :


* Structure des titres un peu étranges : &quot;Brèves récentes&quot; en h2 et &quot;Articles récents&quot; en h1 ? Pour moi, &quot;Jojaba&quot; et &quot;Bienvenue&quot; en h1; le reste en h2.

D'après ce que j'ai entendu à propos du référencement, c'est le titre (ou les titres) <h1> qui est (sont) pris en compte dans la limite de 7 mots. Donc, je me suis limité à ce nombre de mots pour la page d'accueil pour mes 3 <h1> (Jojaba, accueil, articles récents). Les h2 sont de moindre importance. Il est vrai que les brèves sont également importantes, je devrais peut-être remplacer mon <h2> dans l'infobox par un <h1>...

a écrit :

* D'ailleurs, le titre h1 doit être dans &lt;article&gt;. De même, &lt;article&gt; englobe le contenu important : il n'a pas à être encadré d'une &lt;section&gt; (il en contiendrait plutôt).

Oui, le h1 devrait se trouver dans la balise article, mais... J'avais des soucis pour la mise en forme (je sais que ce n'est pas bien de penser style pendant la structuration sémantique de la page ), j'ai fait ce choix-là donc, je devrais peut-être effectivement modifier ça... En revanche, concernant les balises <section>, on peut parfaitement les placer hors d'une balise article, cela s'y prête bien pour ma page d'accueil (section de message d'accueil et section des articles récents). Ma référence à ce sujet : HTML5 : une référence pour le développeur web page 98

A propos des points positifs, je n'ai pas compris « Mise en page solide (wat?) ».
Modifié par jojaba (19 May 2012 - 09:08)

Je viens d'uploader les modifications concernant la structure <article><h1> (les titres se trouvent à présent dans la balise article), merci de vider votre cache pour la prise en compte des modifications.
Je viens de faire passer ma feuille de style au validateur du W3C :
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjojaba.free.fr%2Fxmedia%2Ftheme%2Fairjojaba%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=fr

Bon, le signalement des préfixes, c'est normal, mais la propriété erronée de background, je ne comprends pas...

Jojaba a écrit :
A propos des points positifs, je n'ai pas compris ' Mise en page solide (wat?) '.

C'est une blague pour moi-même En effet, je ne vois pas bien ce que veut dire "solide" pour une mise en page, mais c'est le compliment qui m'est venu !

a écrit :
Bon, le signalement des préfixes, c'est normal, mais la propriété erronée de background, je ne comprends pas...

C'est juste parce que tu utilises les préfixes proprio -webkit.
Modifié par Muchos (20 May 2012 - 10:49)

Muchos a écrit :

C'est une blague pour moi-même En effet, je ne vois pas bien ce que veut dire &quot;solide&quot; pour une mise en page, mais c'est le compliment qui m'est venu !

Alors, il aurait fallu écrire What ! Merci pour le compliment.

a écrit :

C'est juste parce que tu utilises les préfixes proprio -webkit.

... ou -moz, ou -ms,...
OK, donc c'est encore dû aux préfixes vendeurs. On peut donc considérer la css valide.
Modifié par jojaba (20 May 2012 - 14:59)

Bonjour,

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

Laurie-Anne a écrit :
Bonjour,

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

C'est fait, merci pour ce rappel

Bonjour: quelques points:

* Il y a un scroll horizontal qui permet de sortir complètement du site

* Beaucoup de problèmes de lisibilité:
1) En plein écran, sur un écran à partir de 1280px de large, la ligne de texte est déjà trop longue pour une bonne lecture.
2) Texte trop serré, l'espace interligne se confond avec l'espace intermot.
3) Gestion des espace mal gérée. Beaucoup de textes et d'éléments sont trop collés à un autre. Cela gène la lecture mais aussi la compréhension de la hiérarchie.
4) Menu du bas bleu sur bleu illisible, menu principal bleu clair sur gris peu lisible.

* Oh un site en FLASH! Ben non, c'est du css? Ah quelle horreur on dirait ces sites en flash jusqu'à maintenant css nous préservait de ça!
Bon sans rire, c'est quoi ces trois mille effets déplacés, inutiles et gênant la compréhension? L'animation est un langage, de telle sorte qu'elle peut amener ou compléter de l'information. Du coup j'aime bien parler d'animation sémantique. Là on a affaire à de l'animation dispendieuse, c'est-à-dire qu'au lieu d’apporter quelque chose, elle attire notre attention vers… rien en fait.
Quelques exemples:
La petite flèche qui tourne: Mon premier réflexe était de regarder vers la droite… avant de comprendre qu'il n'y avait rien à voir, juste à cliquer.
Les icônes rss, plan de site etc. J'ai passé un petit moment à tenter de comprendre pourquoi ça défile parfois dans un sens, parfois dans un autre. En fait ça n'a aucun sens, et aucune utilité.
Le menu principal, passé le choc du truc qui tourne en s’agrandissant il reste juste une animation trop longue et gênant la lecture!
Pour clore ce sujet, une animation au hover est très utile: L'utilisateur repère un lien, un bouton un onglet sur lequel il va sans doute pouvoir cliquer et place sa souris dessus. Une animation discrète et rapide nous permet de lui indiquer que c'est bien cliquable. Un changement de couleur, l'ajout d'un souligné et/ou un changement de curseur (pointer) suffisent très bien pour cela. Si l'on en fait plus, c'est pour en dire plus. Ici ce n'est pas le cas.

* C'est pourri les icônes tango (troll)
Modifié par kustolovic (21 May 2012 - 09:41)

Merci pour tes commentaires. Les miens ci-dessous...

kustolovic a écrit :

* Il y a un scroll horizontal qui permet de sortir complètement du site

Quel navigateur ? J'ai testé sur IE 7, 8, 9, Firefox, Chrome, Safari, Opera, j'ai pas ce défilement horizontal... Sur mobile peut-être ?

a écrit :

1) En plein écran, sur un écran à partir de 1280px de large, la ligne de texte est déjà trop longue pour une bonne lecture.

Tu me conseilles donc de limiter la largeur du contenu du site (ne pas laisser la largeur variable). Ou pensais-tu à autre chose ?

a écrit :

2) Texte trop serré, l'espace interligne se confond avec l'espace intermot.
3) Gestion des espace mal gérée. Beaucoup de textes et d'éléments sont trop collés à un autre. Cela gène la lecture mais aussi la compréhension de la hiérarchie.

Oui, il faudrait que j'aère tout ça. Ajouter davantage d'espace entre les paragraphes, les titres, les listes...

a écrit :

4) Menu du bas bleu sur bleu illisible, menu principal bleu clair sur gris peu lisible.

Ça aussi, je vais améliorer, c'est la deuxième fois qu'on me fait la remarque.

a écrit :

Bon sans rire, c'est quoi ces trois mille effets déplacés, inutiles et gênant la compréhension?

On va dire que je souffre du syndrome du parfait petit amateur découvrant le miracle CSS3
J'en fait probablement trop, mais ce n'est qu'un site personnel, alors on a bien le droit de se faire un peu plaisir hein . Ceci dit, c'est vrai que la flèche qui tournicote n'a pas un grand intérêt. Je vais un peu simplifier l'animation (surtout que sur Chrome, cette animation-là ne fonctionne pas). Pour le menu du haut, je trouvais qu'agrandir l'onglet était une solution intéressante en ce qui concerne l'accessibilité, notamment pour les personnes ayant des soucis de vue... Je vais laisser tomber les transitions pour les boutons rss, contact et sitemap, en revanche, pour les boutons permettant de monter en haut de page ou pour descendre ou pour passer d'une page à l'autre, je vais conserver, cela apporte également une info pertinente pour les mal-voyants je pense (puisque le défilement se fait dans le bon sens).

a écrit :

* C'est pourri les icônes tango (troll)

Les goûts et les couleurs...

jojaba a écrit :
Quel navigateur ? J'ai testé sur IE 7, 8, 9, Firefox, Chrome, Safari, Opera, j'ai pas ce défilement horizontal... Sur mobile peut-être ?

firefox, safari, chrome. Sur desktop. En fait j'ai vu que tu avais caché l'overflow-x sur le body. Mais comme j'utilise un trackpad qui scrolle dans les 2 sens, j'ai remarqué cela car si je ne suis pas très précis dans mon geste vertical, le site part sur le côté. À quoi est-ce dû cet espace? Sûrement du 3d transform qui a cette tendance. Mettre l'overflow sur un autre élément (#page) marche mieux car body reste toujours scrollable.

jojaba a écrit :
Tu me conseilles donc de limiter la largeur du contenu du site (ne pas laisser la largeur variable). Ou pensais-tu à autre chose ?

C'est une variante, l'autre serait de gérer la choses différemment avec des media-queries

jojaba a écrit :
On va dire que je souffre du syndrome du parfait petit amateur découvrant le miracle CSS3
J'en fait probablement trop, mais ce n'est qu'un site personnel, alors on a bien le droit de se faire un peu plaisir hein . Ceci dit, c'est vrai que la flèche qui tournicote n'a pas un grand intérêt. Je vais un peu simplifier l'animation (surtout que sur Chrome, cette animation-là ne fonctionne pas). Pour le menu du haut, je trouvais qu'agrandir l'onglet était une solution intéressante en ce qui concerne l'accessibilité, notamment pour les personnes ayant des soucis de vue... Je vais laisser tomber les transitions pour les boutons rss, contact et sitemap, en revanche, pour les boutons permettant de monter en haut de page ou pour descendre ou pour passer d'une page à l'autre, je vais conserver, cela apporte également une info pertinente pour les mal-voyants je pense (puisque le défilement se fait dans le bon sens).

Je comprends que tu aies envie de tester, moi aussi je fais joujou, mais comme tu demandes un avis… Sinon pour l'accessibilité, et bien c'est raté, beaucoup de gens on des troubles cognitifs qui rendent ces effets problématiques. Pour le bouton monter, le seul que je n'avais pas vu, en effet là l'animation renforce le sens. Par contre pour l'accessibilité, il y a les problèmes q
* C'est pourri les icônes tango (troll)
Les goûts et les couleurs...

jojaba a écrit :
Quel navigateur ? J'ai testé sur IE 7, 8, 9, Firefox, Chrome, Safari, Opera, j'ai pas ce défilement horizontal... Sur mobile peut-être ?

firefox, safari, chrome. Sur desktop. En fait j'ai vu que tu avais caché l'overflow-x sur le body. Mais comme j'utilise un trackpad qui scrolle dans les 2 sens, j'ai remarqué cela car si je ne suis pas très précis dans mon geste vertical, le site part sur le côté. À quoi est-ce dû cet espace? Sûrement du 3d transform qui a cette tendance. Mettre l'overflow sur un autre élément (#page) marche mieux car body reste toujours scrollable.

jojaba a écrit :
Tu me conseilles donc de limiter la largeur du contenu du site (ne pas laisser la largeur variable). Ou pensais-tu à autre chose ?

C'est une variante, l'autre serait de gérer la choses différemment avec des media-queries

jojaba a écrit :
On va dire que je souffre du syndrome du parfait petit amateur découvrant le miracle CSS3
J'en fait probablement trop, mais ce n'est qu'un site personnel, alors on a bien le droit de se faire un peu plaisir hein . Ceci dit, c'est vrai que la flèche qui tournicote n'a pas un grand intérêt. Je vais un peu simplifier l'animation (surtout que sur Chrome, cette animation-là ne fonctionne pas). Pour le menu du haut, je trouvais qu'agrandir l'onglet était une solution intéressante en ce qui concerne l'accessibilité, notamment pour les personnes ayant des soucis de vue... Je vais laisser tomber les transitions pour les boutons rss, contact et sitemap, en revanche, pour les boutons permettant de monter en haut de page ou pour descendre ou pour passer d'une page à l'autre, je vais conserver, cela apporte également une info pertinente pour les mal-voyants je pense (puisque le défilement se fait dans le bon sens).

Je comprends que tu aies envie de tester, moi aussi je fais joujou, mais comme tu demandes un avis… Sinon pour l'accessibilité, et bien c'est raté, beaucoup de gens on des troubles cognitifs qui rendent ces effets problématiques. Pour le bouton monter, le seul que je n'avais pas vu, en effet là l'animation renforce le sens. Par contre pour l'accessibilité, ça peut dans certains cas l'empirer, pour un mal voyant, ce sera plus efficace d'augmenter le contraste…

jojaba a écrit :
Les goûts et les couleurs...

Comment il casse mon troll

OK, je place mon overflow-x sur le #page ce soir. Comment je fais pour tester ? Le mieux c'est d'attendre que tu me dises ça demain, je pense
OK aussi pour le menu haut. Je vais me contenter d'un zoom (scale) de l'onglet sans rotation.
Il faut que je pense à améliorer le contraste de tout ce beau monde également.
Comme dit, je fais ça ce soir (j'ai pas accès à mon ftp free pendant la journée).

Merci encore pour l'aide et les précieux conseils.
Modifié par jojaba (21 May 2012 - 14:16)

kustolovic a écrit :

J'ai fait le test avec firebug. Sinon tu peux faire le test avec une souris, en clicquant le boutton du milieu pour activer le déplacement vertical+horizontal.

Ah oui, le coup du clic-milieu fonctionne effectivement. Je pense savoir pourquoi j'ai ce scroll. Je place le texte de mes boutons hors de l'écran :

text-indent: -5000px;

PS : pour le overflow-x, ça fonctionne en le plaçant sur #page en local. Merci !
Modifié par jojaba (21 May 2012 - 15:14)

Du coup, le mieux est de ne pas l'avoir, placer overflow: hidden sur le bouton…

Ou alors, assumer ses boutons images, les insérer dans le HTML et gérer les survol en JS ?

Laurie-Anne a écrit :
Ou alors, assumer ses boutons images, les insérer dans le HTML et gérer les survol en JS ?

J'utilise un sprite pour mes boutons, je pense que c'est une solution plus "légère" que le bouton dans le code HTML qui, lui, augmente le nombre de requêtes serveur puisque pour chaque bouton on aura une image.

Essaye de désactiver les images en laissant les css actifs. Tu seras ainsi dans un cas typique de serveur qui déconne et ne fournit pas le contenu "moins important" ou d'une connexion qui rame.

L'accessibilité, ce n'est pas que pour les aveugles.

Laurie-Anne a écrit :
Essaye de désactiver les images en laissant les css actifs. Tu seras ainsi dans un cas typique de serveur qui déconne et ne fournit pas le contenu &quot;moins important&quot; ou d'une connexion qui rame.

Je comprends à présent mieux ta remarque sur les images dans le code HTML ! Au moins on a l'attribut "alt" qui s'affiche dans le cas où les images ne sont pas chargées, alors qu'avec la solution des boutons avec image de fond, on n'a pas de texte alternatif.

a écrit :

L'accessibilité, ce n'est pas que pour les aveugles.

Merci de me rappeler ça, mais il est parfois difficile de se rendre compte des exactes difficultées rencontrées par les personnes souffrant d'handicaps de tous genres. Il faut que je me documente davantage sur ce sujet...