[Résolu] XHTML et validation

Bonjour,

Je sais que j'ai un autre sujet en cours dans une autre section, mais comme la question est un tantinet différente...

Je viens de passer un de mes derniers fichiers html à la moulinette d'un validateur.

De trente erreurs au départ, il ne m'en reste que 5 difficile à résoudre...

3 erreurs concernent une barre sociale ajoutée :
- L'attribut `fb:like:layout` n'est pas autorisé dans la balise a
- L'attribut `tw:count` n'est pas autorisé dans la balise a
- L'attribut `g:plusone:size` n'est pas autorisé dans la balise a

La quatrième erreur, m'oblige à refaire mon css, mais je connais l'erreur :
- Erreurs:Il ne faut déclarer qu'une seule valeur pour l'attribut `id`
- id="bandeau_principal"

La cinquième, ben, je ne sais pas quoi faire :
- Erreurs:L'attribut `noresize` n'est pas autorisé dans la balise iframe
- noresize="noresize"

Voilà, pas évident de rendre compatible 100%...
Des infos, svp ?

Merci

@+
Modifié par Jason (15 Jun 2012 - 01:45)

Bonjour,

clair que les réseaux sociaux google, fesse de bouc and co, ont des attributs non valides. allez un zeste de JavaScript peut-être?

la quatrième erreur, je sais pas mais peut-être as-tu mis 2 fois le même id dans ta page? un id, c'est unique.

Bonjour FloydinBremen,

Non, la quatrième erreur, c'est parce qu'il ne faut pas de nom en 2 parties...

Dans mon cas, « id="bandeau_principal" »... Il me faudra mettre bandeauprincipal par exemple.

Ensuite pour la barre sociale, j'ai trouvé un truc indiquant un script à utiliser...
...Trop complexe, la compatibilité.
Si le XHTML ne veut pas de ma barre, ben... ça restera incompatible !

Merci quand même

@+

pffff.......compliqué? soit tu vires les attributs inutiles, parce que par défaut. sinon tu colles un id. en JavaScript, un document get element by id et puis un set attribute. simple....non? enfin, presque.

Quand je dis compliqué, je parle pour la compatibilité de la barre sociale...

Pour le CSS, je connais la solution du problème.

Jason a écrit :
La cinquième, ben, je ne sais pas quoi faire :
- Erreurs:L'attribut `noresize` n'est pas autorisé dans la balise iframe
- noresize="noresize"

Tu supprimes l'attribut noresize sur ton élément IFRAME. Cet attribut n'existe que pour les éléments FRAME, et il n'a aucun effet sur les IFRAME.

Jason a écrit :
3 erreurs concernent une barre sociale ajoutée :
- L'attribut `fb:like:layout` n'est pas autorisé dans la balise a
- L'attribut `tw:count` n'est pas autorisé dans la balise a
- L'attribut `g:plusone:size` n'est pas autorisé dans la balise a

D'où vient le code concerné? Ce serait étonnant que les trois concurrents Facebook, Twitter et Google utilisent les mêmes conventions de codage avec des attributs non valides de la sorte. J'imagine que c'est plutôt une convention de codage d'un script PHP ou JavaScript ou autre spécifique?

Il faut voir ce que ce code est censé faire. Notamment:
- Est-ce qu'il s'agit d'un code de templating qui doit être analysé et restitué sous une forme différente par un moteur de templating, ou plugin ou module spécifique d'un CMS, etc.? Dans ce cas, ce n'est pas ce code source qu'il faut valider mais bien le code HTML résultant.
- Est-ce qu'il s'agit d'un code HTML invalide avec des attributs HTML custom utilisés par un script JavaScript? Dans ce cas, la solution serait d'utiliser HTML5 et les attributs data-, mais ça demandera de modifier le script JS pour qu'il fonctionne avec des attributs nommés différemment. Ou bien on peut aussi utiliser un script différent qui ne pose pas de souci de validation, ou garder le script actuel et se contenter d'ignorer les erreurs de validation relatives à ce script (si les tests du scripts sont concluants par ailleurs). Je rappelle à tout hasard que la validation est un outil et pas un objectif à atteindre à tout prix.

En passant, il y a des arguments assez convaincants contre l'utilisation des boutons de partage sur les réseaux sociaux. Voir par exemple cet article en anglais.

Bonjour,

a écrit :
fvsch : Tu supprimes l'attribut noresize sur ton élément IFRAME. Cet attribut n'existe que pour les éléments FRAME, et il n'a aucun effet sur les IFRAME.

Vrai, on peut et ça ne changera rien ?

a écrit :
fvsch : D'où vient le code concerné?

Un des plus importants, je pense, à donner ce genre de truc : Addthis
Je n'ai rien inventé, simplement du copier/coller.

Voici le code complet donné directement sur leur site (A part la position que j'ai modifié) :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:60px; top:2px; position: relative;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fcb83014255410f"></script>
<!-- AddThis Button END -->	

Ce qui donne ce genre de barre :

a écrit :
En passant, il y a des arguments assez convaincants contre l'utilisation des boutons de partage sur les réseaux sociaux. Voir par exemple cet article en anglais.

Ça je n'en doute pas... Si c'était que moi, ce genre de truc n'existerait plus...
Mais pour ce site, il était nécessaire de "faire parler" par tous les moyens existant (Un peu de pub)...
Le site en question : http://fetes-isledenoe.franceserv.fr/index.html

a écrit :
Je rappelle à tout hasard que la validation est un outil et pas un objectif à atteindre à tout prix.

Oui, je m'en suis servi principalement pour détecter des erreurs de code...
La validité, ben... Tant que ça marche sur les navigateurs sans erreurs...

Merci

@+
Modifié par Jason (12 Jun 2012 - 12:32)

1. Oui, a priori tu peux virer le noresize sans conséquences (il est très probablement déjà ignoré par les navigateurs).

2. Le code d'AddThis est merdique. Tant pis si tu dois l'utiliser; tu ne vas pas t'amuser à le réécrire patiemment en le rendant un peu plus accessible et valide et utilisable a minima sans JavaScript. Moi je classerais sans suite...

a écrit :
1. Oui, a priori tu peux virer le noresize sans conséquences

OK, merci de l'info...

a écrit :
2. Le code d'AddThis est merdique.

Et il y a tellement de sites qui utilisent ce code de Addthis...

essaies ceci :

<a class="addthis_button_facebook_like" id="fessebouc"></a>
<a class="addthis_button_tweet" id="tweet"></a>
<a class="addthis_button_google_plusone" id="gogogle"></a>

<script type="text/javascript">
var ValidMonFacebouc=document.getElementById("fessebouc");
     ValidMonFacebouc.setAttribute("fb:like:layout","box_count");
var ValidMonTweet=document.getElementById("tweet");
     ValidMonTweet.setAttribute("tw:count","vertical");
var ValidMongoogle=document.getElementById("gogogle");
     ValidMongoogle.setAttribute("g:plusone:size","tall");
</script>

Modifié par FloydinBremen (12 Jun 2012 - 20:13)

FloydinBremen a écrit :
essaies ceci

Strictement aucun intérêt à avoir un code HTML valide avec un script qui produit un DOM invalide. C'est le strict équivalent de la vieille combine qui consiste à planquer la poussière sous le tapis.
Ne pas perdre de temps avec ces bêtises.

Bonjour,

Merci de vos réponses...

Ceci dit, le "camouflage de poussière" se révèle parfois efficace...

En fait, pour passer outre les nouvelles règles, on "camoufle" souvent un truc très simple dans un autre plus compliqué (souvent du type javacript)... d'après ce que j'ai pu lire ici et là...
J'ai pu voir que Height="100" était refusé dans la balise Table alors que style="height:100;" était accepté... Qu'il fallait obligatoirement un alt="" même vide dans la balise IMG... Franchement, pourquoi faire simple...

Mais bon, de toute façon, je n'ai pas l'intention de me prendre la tête avec le script de Addthis...
Tant qu'il n'y a que ça qui coince, ce n'est pas très grave.
Merci quand même !

@+
Modifié par Jason (13 Jun 2012 - 10:00)

Bonjour,

Jason a écrit :
Ceci dit, le "camouflage de poussière" se révèle parfois efficace...

Comme le souligne Florent, cela n'a rien d'efficace, c'est au contraire une perte de temps.

Le temps en question, il est préférable de le passer à comprendre les erreurs de validation (pourquoi faut-il mettre un attribut alt sur toutes les images) et leur importance (un attribut inconnu, ce n'est généralement pas une erreur grave).
Modifié par Julien Royer (13 Jun 2012 - 10:15)

Bonjour,

a écrit :
Comme le souligne Florent, cela n'a rien d'efficace, c'est au contraire une perte de temps.

Oh, mais je suis d'accord... je plaisantais... (quoi que !!!)

a écrit :
Le temps en question, il est préférable de le passer à comprendre les erreurs de validation (pourquoi faut-il mettre un attribut alt sur toutes les images) et leur importance (un attribut inconnu, ce n'est généralement pas une erreur grave).

Comprendre les erreurs, c'est un chose... que je m'efforce à faire.
Comprendre pourquoi il faut un Alt="" même vide... Désolé, j'ai beau réfléchir, je ne trouve pas !
Et c'est un exemple parmi d'autres...

Jason a écrit :
Comprendre pourquoi il faut un Alt="" même vide... Désolé, j'ai beau réfléchir, je ne trouve pas !

Ça sert aux User Agents (navigateurs, lecteur d'écran, moteur de recherche, etc.) pour savoir si une image est décorative ou si elle fait partie du contenu. Le alt vide donne l'information «ceci est une image décorative qu'il n'est pas nécessaire de restituer». En l'absence d'attribut alt, et donc de cette information, les lecteurs d'écran vont en général lire le nom du fichier, qui fait rarement sens...

Me concernant, je considère que toutes les images sont décoratives...
Que classes-tu dans « image non décorative » ?
Et à partir du moment ou le Alt est vide, ça ne donnera pas plus d'info sur l'image en question que si Alt n'y était pas...

Edit : Laurie-Anne, merci pour le lien...
Modifié par Jason (13 Jun 2012 - 14:04)

Un peu de lecture : http://www.pompage.net/traduction/Bien-utiliser-le-texte-alternatif

Jason a écrit :
Que classes-tu dans « image non décorative » ?

- Un avatar de membre dans un forum
- La photo d'un produit sur une boutique en ligne
- Le logo de ton site
- Une photo qui sert a imager une texte
- ...

Bonjour,

Bon, voilà... Pour revenir à ma question de base, il ne me reste que trois erreurs...

C'est déjà pas si mal, non ?



Ensuite, je peux en rester là... Mais si quelqu'un a une solution géniale pour le script de AddThis... Sans passer par 3 pages de JavaScript...

Merci

@+