5568 sujets

Sémantique web et HTML

Bonjour,

j'ai quelques problèmes à valider les choses suivantes.
J'ai intégré le bouton google + et google translate pour passer la page dans la langue que l'utilisateur sélectionne..

Merci pour votre aide


*** google +

<g:plusone size="small" href="http://www.example.org"></g:plusone>
<div class="fb-like" data-href="http://www.example.org" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true" data-font="arial"></div>
</div>


**** google translate
<DIV style="float: right;">

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Allemagne" src="/templates/xxx_thm/theme/images/de.png" title="übersetzen deutschen Version der Website"/></a>
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;"><img style="cursor:pointer; cursor:hand;" alt="Anglais" src="/templates/xxx_thm/theme/images/gb.png" title="translate the site in English"/></a>

</div>

w3c -> google +

igne Colonne: 23
311 Erreurs: Valeur non valable "small" dans l'attribut "size".
Seulement des nombres entiers sont permis.
Position de l'erreur:
<g:plusone size="small" href="http://www.example.org"></g:plusone>

Colonne: 22
Erreurs: L'attribut `size` n'est pas autorisé dans la balise `g`.
Position de l'erreur:
<g:plusone size="small" href="http://www.www.example.org"></g:plusone>

Colonne: 35
Erreurs: L'attribut `href` n'est pas autorisé dans la balise `g`.
Position de l'erreur:
<g:plusone size="small" href="http://www.www.example.org"></g:plusone>

Colonne: 6
Erreurs: La balise `g` est inconnue. Voici la liste des balises autorisées.
Position de l'erreur:
<g:plusone size="small" href="http://www.www.example.org"></g:plusone>

Ligne Colonne: 25
312 Erreurs: L'attribut `data-href` n'est pas autorisé dans la balise div.
Position de l'erreur:
<div class="fb-like" data-href="http://www.www.example.org" data-send="f

Colonne: 68
Erreurs: L'attribut `data-send` n'est pas autorisé dans la balise div.
Position de l'erreur:
href="http://www.www.example.org" data-send="false" data-layout="button_

Colonne: 86
Erreurs: L'attribut `data-layout` n'est pas autorisé dans la balise div.
Position de l'erreur:
ycloclubzinsel.org" data-send="false" data-layout="button_count" data-width=

Colonne: 113
Erreurs: L'attribut `data-width` n'est pas autorisé dans la balise div.
Position de l'erreur:
nd="false" data-layout="button_count" data-width="100" data-show-faces="true

Colonne: 130
Erreurs: L'attribut `data-show-faces` n'est pas autorisé dans la balise div.
Position de l'erreur:
ayout="button_count" data-width="100" data-show-faces="true" data-font="aria

Colonne: 153
Erreurs: L'attribut `data-font` n'est pas autorisé dans la balise div.
Position de l'erreur:
...n_count" data-width="100" data-show-faces="true" data-font="arial"></div>

w3c pour google translate

Ligne Colonne: 9
316 Erreurs: L'attribut `target` n'est pas autorisé dans la balise a.
Position de l'erreur:
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.co

Colonne: 136
Erreurs: entité générale "langpair" n'est pas définit et il n'y a pas d'entité par défaut
Position de l'erreur:
'+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); retu

Colonne: 144
Erreurs: référence à l'entité "langpair" pour laquelle aucun identificateur système ne peut être généré
Position de l'erreur:
URIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false

Colonne: 135
Erreurs: entité était définie ici
Position de l'erreur:
='+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); ret

Colonne: 153
Erreurs: entité générale "hl" n'est pas définit et il n'y a pas d'entité par défaut
Position de l'erreur:
ent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img s

Colonne: 155
Erreurs: référence à l'entité "hl" pour laquelle aucun identificateur système ne peut être généré
Position de l'erreur:
t(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img sty

Colonne: 152
Erreurs: entité était définie ici
Position de l'erreur:
nent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img

Colonne: 159
Erreurs: entité générale "ie" n'est pas définit et il n'y a pas d'entité par défaut
Position de l'erreur:
cation.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img style="

Colonne: 161
Erreurs: référence à l'entité "ie" pour laquelle aucun identificateur système ne peut être généré
Position de l'erreur:
tion.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img style="cu

Colonne: 158
Erreurs: entité était définie ici
Position de l'erreur:
ocation.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img style=

Ligne Colonne: 141
317 Erreurs: référence à l'entité "langpair" pour laquelle aucun identificateur système ne peut être généré
Position de l'erreur:
URIComponent(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false

Ligne Colonne: 135
316 Erreurs: entité était définie ici
Position de l'erreur:
='+encodeURIComponent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); ret

Ligne Colonne: 152
317 Erreurs: référence à l'entité "hl" pour laquelle aucun identificateur système ne peut être généré
Position de l'erreur:
t(location.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;"><img sty

Ligne Colonne: 152
316 Erreurs: entité était définie ici
Position de l'erreur:
nent(location.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img

Ligne Colonne: 158
317 Erreurs: référence à l'entité "ie" pour laquelle aucun identificateur système ne peut être généré
Position de l'erreur:
tion.href)+'&langpair=fr%7Cen&hl=fr&ie=UTF8'); return false;"><img style="cu

Ligne Colonne: 158
316 Erreurs: entité était définie ici
Position de l'erreur:
ocation.href)+'&langpair=fr%7Cde&hl=fr&ie=UTF8'); return false;"><img style=
ton doctype ?

à priori, le code GG+ est en HTML5 et ton doctype ne l'est pas.

Pour le code translate, ça doit venir des & à remplacer par &amp;
Ci-joint mon doctype


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

?


pour translate, ok je vais essayer avec ce que tu m'indiques.
ok pour translate c'est réglé. c'était bien cela. merci.

pour le doctype, je suis embêté.. si je passe en doctype html5 plus d'erreur sur google mais sur tout le reste..

Y'a un moyen de modifier le google+ pour qu'il soit valider avec mon doctype ?
Hum, à priori, tu as le code GG+ ainsi que le code FB.

L'un comme l'autre propose un code valide HTML5 uniquement :

https://developers.google.com/+/plugins/+1button/?hl=fr (pour GG+)
http://developers.facebook.com/docs/reference/plugins/like/ (pour FB)

Personnelement, pour une question de contrôle de quand doit s'afficher le j'aime et le +1 (qui sont long à charger quand on en a plusieurs sur la même page) j'ai pris l'option d'utiliser les iframes. (j'utilise un code HTML5 puis du JS pour différer et afficher l'iframe). Mais dans ton cas, tu peux afficher l'iframe directement :


<iframe src="__url_iframe_facebook__" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:200px;height:200px;" allowTransparency="true"></iframe>


je te laisse définir le nombre de pixel pour l'iframe.

Concernant l'url de FB :

http://www.facebook.com/plugins/like.php?href=&amp;show_faces=&amp;width=&amp;height=&amp;action=&amp;send=false&amp;layout=&amp;colorscheme=light

à toi de remplir les paramètres selon tes besoins

Concernant l'url de GG+

https://plusone.google.com/_/+1/fastbutton?url=&amp;size=&amp;annotation=&amp;colorscheme=light&amp;hl=fr-FR&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3DUUPMIg5lSVM.fr.%2Fsv%3D1%2Fam%3D!cJvlYArMcEiIuqQ9Og%2Fd%3D1%2F#id=I1_1324120914470&amp;parent=http://www.tonsite.com&amp;rpctoken=426124709&amp;count=false&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe

idem à toi de remplir les paramètres

Avec ça, ton code sera forcement valide vu que ce n'est qu'une iframe (et ça ne change absolument rien dans la pratique).
ok, merci, c'est réglé.
il me reste 1 erreur pour valider w3c..

y'a moyen de valider sans passer par un doctype transitional ?



Ligne Colonne: 9
314 Erreurs: L'attribut `target` n'est pas autorisé dans la balise a.
Position de l'erreur:
<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.co
Salut,

Je viens peut-être après la bataille ; mais, vu qu'à la base, le doctype employé est un doctype XHTML, il serait peut-être bon de regarder du côté des espaces de nom.
Salut

non la bataille n'est pas terminée. Smiley decu .
En fait par http://www.validome.org/

il me resterait que 1 erreur.. dont je ne vois pas où est le pb.

Ligne Colonne: 135
319 Erreurs: Element type "a" must be followed by attribute specifications, "&gt;" or "/&gt;".
Position de l'erreur:
<br/>


Par http://validator.w3.org, il me resterait que 6 erreurs .. dont je ne vois pas non plus le pb.




Validation Output: 6 Errors

Line 318, Column 135: attributes construct error
…ext-decoration:normal; font-size:40px;"onmouseover="this.style.textDecoration …
&#9993;
Line 318, Column 135: Couldn't find end of Start Tag a line 318
…ext-decoration:normal; font-size:40px;"onmouseover="this.style.textDecoration …
&#9993;
Line 318, Column 257: Opening and ending tag mismatch: div line 318 and a
…ne'" onmouseout="this.style.textDecoration = 'none'">BOURSE AUX VELOS</a></div>
&#9993;
Line 436, Column 9: Opening and ending tag mismatch: body line 120 and div
</div>
&#9993;
Line 563, Column 7: Opening and ending tag mismatch: html line 2 and body
</body>
&#9993;
Line 564: Extra content at the end of the document
</html>