5568 sujets

Sémantique web et HTML

Bonsoir à tous,


Actuellement je cherche un solution me permettant de differencier les liens interne et externe (règle opquast n°50).

J'ai opter pour l'affichage d'une infobulle personnalisée mais après avoir fait quelques essais je suis tombé sur un site qui utilise une bonne idée : http://www.kloobik.org/

Il semble qu'un script permette d'utilise l'attribut Title et href pour construire correctement ces infobulles.

Par contre je ne comprend pas comment on pourrait faire ça grâce au CSS
C'est la seule BP que je n'arrive pas à implémenter de manière satisfaisante non plus, donc je suis également preneur pour une méthode qui marche ! (accessible, simple à implémenter, etc...)
Peut-être une idée : ajouter l'attribut rel="external" et ensuite appliquer un style avec a[rel=external]. Pour les utilisateurs d'IE, il est toujours possible d'adjoindre également un petit script javascript.
Salut,

Sinon il y a ça qui marche bien aussi :

<a href="">Blablabla</a> (lien externe à notre site)


Pour des liens se retrouvant de manière isolée dans le document.

Et

<hn>Liens externes</hn>
<ul>
<li><a href="">Lien externe 1</a></li>
<li><a href="">Lien externe 2</a></li>
<li><a href="">Lien externe 3</a></li>
etc...
</ul>


Pour les autres.

Ce n'est pas que de la provocation, si on y regarde de près nos documents s'accomoderaient parfaitement de ce genre de traitement.

Les visiteurs quant à eux se retrouveraient sur un site où les choses sont tout simplement dites. Oui je sais ça peut paraître un peu perturbant au début, mais ils s'y feraient assez vite...

... Non ? Smiley cligne
En effet ça convient si tu à peut de lien externe mais sur plusieurs de mes pages, il existe des paragraphes entiers possèdant differents liens externes.

En gros j'ai créer des liens en fonction de mot clès et chacun pointe vers des adresse differente.

Dans ce cas, une mise en valeur graphique, avec une infobulle personnalisé ou bien l'ajout d'une petite image avec une fleche est à étudier (je pense opter pour une flèche)
Un autre truc qui serait aussi pas mal :

<img src="..." alt="Lien externe" /><a href="http.....">...</a>

J'avais vu ça dans un projet de CMS qui est tombé rapidement à la poubelle ... certins s'en souviennent peut-être : Itseasy...
Modifié par QuentinC (21 Jun 2006 - 10:16)
J'ai trouver une solution inspiré d'un tutoriels d'alsacréations (http://css.alsacreations.com/Tutoriels-JavaScript/liens-externes-nouvelle-fenetre) mais qui n'a plus besoin de javascript, uniquement en CSS et surtout compatible avec tous les navigateurs (la solution du tuto, ne fonctionne pas avec IE)

Par contre je suis au boulot et on est charette ici, entre midi et deux, je ferait en sorte de proposer ma solution en ligne.
a écrit :
Un autre truc qui serait aussi pas mal :
<img src="..." alt="Lien externe" /><a href="http.....">...</a>


Cela fonctionnera-t-il s'il y'a plusieurs liens renseignés ainsi ? Car il me semblait qu'en terme d'accessibilité on ne pouvait pas avoir de lien possédant les mêmes attributs "title" ou "alt" pointant vers des adresses différentes ?
percherie a écrit :

Dans ce cas, une mise en valeur graphique, avec une infobulle personnalisé ou bien l'ajout d'une petite image avec une fleche est à étudier


Mmmm...

Oui et non, en terme de qualité de conception ce qui est réellement a étudier c'est la question de savoir si l'utilisation de tels dispositifs reposant sur l'intuition cognitive (je pense notamment aux images) est réellement indispensable. Car si ce n'est pas le cas, eh bien l'indication en dur et en toutes lettres me semble bien préférable et quoiqu'il en soit la plus assurée en terme d'accessibilité.

Sans présumer de la réponse je dis que la question doit être très clairement et très fermement posée.
En général je ne suis pas sur que ce soit le cas...
Voilou, j'ai un peut de temp devant moi pour poser mon code

Voici le CSS

.lien_ext {
	background-image: url(http://css.alsacreations.com/xmedia/exemples/fenetre/fleche.gif);
	background-repeat: no-repeat;
	position: relative;
	background-position: 100%;
	padding-right: 15px;
}


Puis le code HTML

<p><a href="#">Lien interne</a></p>
<p><a href="http://www.google.fr/" class="lien_ext">Lien externe</a></p>


Par contre comme je ne suis pas parfait, il ce peut que ma solution ne soit pas trop estetique mais l'idée est là et fontionne avec tous les navigateur sans javascript.

L'idée est tirée de cet article : http://css.alsacreations.com/Tutoriels-JavaScript/liens-externes-nouvelle-fenetre
Modifié par percherie (21 Jun 2006 - 12:52)
clb56 a écrit :


Mmmm...

Oui et non, en terme de qualité de conception ce qui est réellement a étudier c'est la question de savoir si l'utilisation de tels dispositifs reposant sur l'intuition cognitive (je pense notamment aux images) est réellement indispensable. Car si ce n'est pas le cas, eh bien l'indication en dur et en toutes lettres me semble bien préférable et quoiqu'il en soit la plus assurée en terme d'accessibilité.

Sans présumer de la réponse je dis que la question doit être très clairement et très fermement posée.
En général je ne suis pas sur que ce soit le cas...


Tu n'a pas tort par contre je vois ça légèrement differement.

L'ajout d'une image est destinée pour les utilisateurs qui visonne la page en mode graphique, l'utilisation peut en rester là ou bien être inscrit dans le code comme tu l'indique.

Par contre pour ceux qui visonne le site avec un lecteur vocal, l'image peut déconcerter ou devenir incohérente si on la place dans le code. l'utilisation de l'attribut "title" contient les infomations que ces utilisateurs recherche.

Au final, je pense que place des indices graphique uniquement en CSS et les indications complémentaire dans le code (title) permette de répondre à la casie totalitée des configuration.
Bob (MC Melun) a écrit :
Le alt (et le title pour les autres que IE), je les renseigne de la sorte

<a href ="url" alt="description du site" title ="autre/même description du site, lien externe">blabla</a>


Comme ça, chaque lien à son libellé propre (enfin quand je ne me rate pas dans mes copier-coller Smiley biggol )

<edit> j'ai dû me planter dans les boutons d'édition moi...</edit>



dans quel doctype peut-on mettre un alt comme attribut d'une balise a ?
j'ai testé avec cette page exemple :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans titre</title>
</head>

<body>
<p><a href ="url" alt="description du site" title ="autre/même description du site, lien externe">blabla</a></p>
</body>
</html>


avec les doctypes suivants :
- HTML 4.01 Transitionnal
- HTML 4.01 Strict
- XHTML 1.0 Strict

le validator w3C me dit que le alt est une erreur ...
a écrit :

Cela fonctionnera-t-il s'il y'a plusieurs liens renseignés ainsi ? Car il me semblait qu'en terme d'accessibilité on ne pouvait pas avoir de lien possédant
les mêmes attributs "title" ou "alt" pointant vers des adresses différentes ?

Attention : dans l'exemple que je mentionnais, l'image était à l'extérieur du lien. De ce fait, elle ne change rien à l'éventuel attribut title que tu peux rajouter...
Malcolm a écrit :



dans quel doctype peut-on mettre un alt comme attribut d'une balise a ?



Euh aucun Smiley mur

Je modifie ce que je voulais écrire... Et je l'efface des autres messages, pour ne pas enduire avec de l'erreur mes lecteurs Smiley biggol


Le alt (et le title pour les autres que IE), je les renseigne de la sorte


<a href ="url" title ="autre/même description du site, lien externe"><img src="image" alt="description du site" title ="autre/même description du site, lien externe" /></a>


Comme ça, chaque lien à son libellé propre (enfin quand je ne me rate pas dans mes copier-coller Smiley biggol ) Prémonitoire ?



Je met deux fois le title, identique puisque j'ai déjà eu le problème entre deux tittles et je ne sais jamais lequel s'affiche...

Pour bien faire, il faudrait sûrement aussi indiquer sur le alt que le lien est externe pour les lecteurs de pages d'ailleurs... Smiley confused

Je ne devais pas être à ce que je faisais : c'était bien la peine de l'éditer Smiley bawling
Modifié par Bob (MC Melun) (22 Jun 2006 - 12:54)