# Le club des professionnels en informatique > Evolutions du club >  Crez votre badge Developpez [Nouveaut]

## khayyam90

Chers membres du club, 

Aujourd'hui nous vous proposons de crer un badge associ  votre profil d'utilisateur du forum. Vous pourrez simplement diffuser votre profil sur votre site internet, votre blog ou sur tout autre site. Voil de quoi crer votre propre identit Developpez et de la faire connatre  ::ccool:: 

Ce badge existe en 3 versions : 
* une version "web", utilisable en copier-collant un petit bout de code html  l'endroit souhait
* une version "image", utilisable partout sur internet
Voici le rendu de la version image pour mon propre profil : 

* une version "mini", utilisable comme une image mais moins grande que la version "image"



Notre responsable de la rubrique 2D/3D/Jeux l'a dj adopt sur son site perso.

Les versions du badge tant entirement dynamiques, elles indiqueront toujours des donnes  jour, on y retrouve : 
* votre pseudo  (cliquable vers votre profil dans le version "web")
* votre indicateur de prsence sur le forum (vert ou gris) - dsactivable au besoin
* votre avatar
* votre rang sur le forum (il dpend pour l'instant de votre nombre de messages ou de votre activit sur Developpez)
* votre blog si vous en avez dfini un dans votre profil (cliquable vers le dit-blog dans la version web)
* votre page twitter si vous en avez dfinie une dans votre profil (cliquable vers la page twitter dans la version web)
* un bouton pour vous envoyer un MP sur le forum (cliquable dans la version web)
* un bouton pour devenir votre ami sur le forum (cliquable dans la version web).
* votre nombre de messages (cliquable vers la liste de ces messages dans la version web).

Affichage de votre nom & prnom
Si vous avez spcifi dans votre profil du forum vos nom et prnom, ceux ci apparaissent dans vos badges. Cependant vous pouvez spcifier que vous souhaitez l'affichage du pseudo uniquement en indiquant dans les urls &realname=0

Cela pourra agrmenter vos sites persos, blogs et autres, dans le but de faire connatre votre "identit" sur le rseau Developpez.

Comment faire pour obtenir ces badges ? 
La version web peut s'obtenir de plusieurs manires : en copier-collant ce code dans votre une page HTML: 


```
<iframe src="http://www.developpez.com/ws/badge?user=XXX" style="border-width:0px; height:140px; width:210px;" frameBorder="0"></iframe>
```

 o XXX est votre numro de profil. Vous le trouverez facilement en regardant l'url de votre profil. Par exemple mon profil est ici http://www.developpez.net/forums/u29897/khayyam90/, mon numro de profil est le 29897, il est dans l'url.
Vous pouvez aussi avoir le badge web en l'incluant directement dans un code PHP, C#, Java ... sur votre site web : 


```
echo @file_get_contents("http://www.developpez.com/ws/badge?user=29897");
```

Et vous pouvez encore l'afficher en incluant ce code HTML

```
<div id="dvp_badge"></div><script type="text/javascript" src="http://www.developpez.com/ws/badgescript?user=254882"></script>
```


La version image s'obtient de la mme manire, vous devez spcifier une image dont l'adresse est http://www.developpez.com/ws/badgeimg?user=29897.

La version mini s'obtient simplement en ajoutant &v=2  l'adresse de la version image
http://www.developpez.com/ws/badgeimg?user=29897&v=2

Si vous ne souhaitez pas faire apparatre l'indicateur de prsence sur le forum, il vous suffit de rajouter dans les urls des badges &showonline=0, ce qui donne dans mon cas 
.

Et nous avons aussi la troisime version disponible : 
http://www.developpez.com/ws/badge?user=29897&v=3


```
<div id="dvp_badge"></div><script type="text/javascript" src="http://www.developpez.com/ws/badgescript?user=29897&v=3"></script>
```


Qu'en dites-vous ?

----------


## Tofalu

> Qu'en dites-vous ?


 ::bravo::

----------


## Mdinoc

Bonjour,
Je constate que les badges tendent  dformer l'avatar.

Dans la version Web, mon avatar 50*50 est tir  60*60, et dans la version image j'ignore  combien il est redimensionn.

----------


## Michal

Pareil que mdinoc : mon avatar marche bien sur la version image (respect du ratio) mais pas sur la version web : 60x60 au lieu de 53x100 pour l'original

Sinon c'est une super ide  ::hola::

----------


## CORTEZ

bonjour,
c'est une bonne ide , mais il manque le sigle et un lien qui mne au site dveloppez.com

----------


## Marc Lussac

> bonjour,
> c'est une bonne ide , mais il manque le sigle et un lien qui mne au site dveloppez.com


+1

----------


## Bovino

Dans mon cas,  part Twitter, tous les liens s'ouvrent dans l'iframe...  ::cry::

----------


## Mdinoc

Donc finalement, quelle taille doit avoir l'avatar pour ne pas tre redimensionn du tout dans la version Image?

----------


## eclesia

je trouve que c'est trop gros et un trop "gadget".

Quelquechose de plus modeste type Ohloh serait mieux et utilisable dans les signatures sur les forums :
 

(Personnellement je n'ai pas de facebook, pas de twitter, pas de blog, pas de rss ...etc...)

----------


## Bovino

> Donc finalement, quelle taille doit avoir l'avatar pour ne pas tre redimensionn du tout dans la version Image?


Il sera dans la plupart des cas redimensionn, ce n'est pas un problme, mais pour ne pas tre dform, il devra tre carr  :;):

----------


## khayyam90

L'histoire des liens dans l'iframe est rgle, ils s'ouvrent dsormais dans une nouvelle fentre.
Aucun des badges n'a directement de lien vers developpez.com, cependant vous pouvez inclure le badge image dans un lien vers developpez.com et le badge web regorge de liens pointant vers le forum. On a un exemple sur le site perso du responsable Qt .

Pour inclure le badge image dans un lien, utilisez un code HTML du genre 

```
<a href="url de votre profil"><img src="url de votre badge image" /></a>
```

La mise en place d'un lien permettra aux moteurs de recherche de lier votre profil sur le forum avec la page sur laquelle vous avez affich votre badge.

La dformation des avatars sera rgle prochainement, je vais me pencher dessus.

eclesia, ton post m'interpelle, l'ide n'est pas forcment de coller ce badge dans le forum. Ton profil est dj accessible puisque c'est le forum. Cependant si le besoin d'en fait sentir, je pourrais fournir une version plus "modeste"

----------


## mon_nom_est_personne

je trouve ca super cool.

----------


## Lorantus

Je pensais que l'utilisation des iframes n'tait plus conseill  ::calim2::  ?




> je trouve que c'est trop gros et un trop "gadget".


Et pourquoi faire un badge "gros" et un badge "petit" ?
Le badge gros, est connu, le petit permettra de la placer l o le gros sera "trop" gros.

Et pourquoi pas transformer le badge en gadget  ajouter sur le bureau, dans une barre de gadgets, et permettre des fonctionnalits sur Developpez.com via ce badge ?

Et pourquoi pas ajouter ce badge en signature pour l'exterieur (blog, email, ...) L'utilisateur pose le badge (petit par exemple) dans la signature, et le lecteur (blog, email etc) peut avoir des informations - dfinir. L'avantage de ce badge sera d'tre mis  jour lors de la lecture de la page... un jour email lorantus@hotmail.com et plus tard, lorantosor@codesource.com

Et pourquoi pas... -ouf j'ai trop d'ides, j'arrte l.

Merci.

----------


## azertix

Sur mon image, ce sont mes prnom/nom qui apparaissent.
Du coup a ne rentre pas en entier  ::(: 
Je pense qu'il faudrait rduire la police quand c'est trop long  ::mrgreen::

----------


## gorgonite

> eclesia, ton post m'interpelle, l'ide n'est pas forcment de coller ce badge dans le forum. Ton profil est dj accessible puisque c'est le forum. Cependant si le besoin d'en fait sentir, je pourrais fournir une version plus "modeste"




je pense qu'il parlait de signatures sur d'autres forums... histoire que les fidles de dvp puissent faire indirectement une petite pub (et montrer que leur petit compteur sur un autre site ne les place pas forcemment au stade de dbutant  :;): )

----------


## pseudocode

> Sur mon image, ce sont mes prnom/nom qui apparaissent.


Et surtout, dans ce cas, y a pas le nom du pseudo qui est affich.  ::cry::

----------


## Mdinoc

> Il sera dans la plupart des cas redimensionn, ce n'est pas un problme, mais pour ne pas tre dform, il devra tre carr


C'est un problme quand l'avatar est du pixel art plutt qu'une image.
Serait-il possible d'y mettre une option pour que l'avatar ne soit pas tir s'il est plus petit que la zone d'affichage?

----------


## pottiez

> Serait-il possible d'y mettre une option pour que l'avatar ne soit pas tir s'il est plus petit que la zone d'affichage?





> La dformation des avatars sera rgle prochainement, je vais me pencher dessus.


patience  :;):

----------


## BornBanane

Super ide  ::):

----------


## supersnail

Par contre, question dbile: a sert  quoi de mettre les boutons sur la version image vu qu'on peut pas cliquer dessus?  ::aie:: 

Sinon, beau boulot  ::bravo::   ::ccool::

----------


## pseudocode

> Par contre, question dbile: a sert  quoi de mettre les boutons sur la version image vu qu'on peut pas cliquer dessus?


Y aura peut-tre une version 2 avec le tag <map></map> correspondant...

----------


## Nono40

J'aime aussi lide.

J'ai affich le badge sur mon site, avant de mettre mon nom/prnom dans le profil et c'est toujours le pseudo qui s'affiche. Il y a un temps avant la mise  jour ?

edit : oui, 10 minutes plus tard le nom est arriv  ::aie::

----------


## danielhagnoul

Je ne suis pas un asocial. Mais je ne suis pas non plus, loin sen faut, un fan des messageries instantanes  et autres social truc en vogue, principalement  cause de leur cot envahissant. On pourrait donc en conclure que le badge ne saurait me convenir. Oui et non !

Jaurais bien envie dajouter un badge de ce genre  la fin de chacune de mes pages web, de mes codes, de mes courriels, documents Word et PDF divers, mais celui qui est propos ne me convient pas. Certes une fois charg, il est trs facilement modifiable, mais ce nest pas le but du jeu.

Intrt du badge actuel du point de vue du visiteur tranger  dvp.
Un clic sur mon nom lamne  ma fiche individuelle, oui...Un clic sur  devenir mon ami  ou sur  laisser un message priv  ou sur  liste des messages  lamne sur un dialogue didentification rbarbatif, franchira-t-il lobstacle, jen doute.
Intrt du badge de mon point de vue

Il devrait offrir au visiteur :
Un lien vers une page de prsentation destine  un visiteur tranger  dvpUn lien vers mon espace personnelUn lien vers le forum sur lequel je suis le plus actifUn lien vers un service de messagerie visiteur (avec identification lgre du genre : nom, prnom, email) qui lui permette de me laisser un quota de message texte court.  moi de donner suite ou non.
Dtail

Sur mon cran, mon nom crit en noir sur un fond bleu fonc est quasi indchiffrable.

----------


## pseudocode

Je plussoie l'avis de danielhagnoul.  ::ccool:: 

(sauf que moi je suis vraiment un asocial)

----------


## khayyam90

Pour les liens qui finissent en demande d'authentification, on ne pourra pas faire grand chose, c'est comme tous ceux qui mettent sur leur site un lien "m'envoyer un mp"




> # Un lien vers une page de prsentation destine  un visiteur tranger  dvp


une page qui te prsente toi ou bien qui prsente dvp ?




> # Un lien vers mon espace personnel


Si tu as renseign ton blog et ton twitter sur ton profil, ceux ci apparaissent et le badge te permet de semer des liens vers ces espaces personnels.




> mon nom crit en noir sur un fond bleu


 je l'ai pass en blanc, c'est plus net.

----------


## Mdinoc

J'aime bien la version Web comme a.

Les modifs seront-elles bientt portes  la version image?

----------


## khayyam90

> J'aime bien la version Web comme a.
> 
> Les modifs seront-elles bientt portes  la version image?


le pseudo/nom en blanc a t port sur la version image. Il y avait d'autres modifs  porter ?

----------


## Mdinoc

Oui, celle du redimensionnement de l'avatar.

----------


## khayyam90

> Oui, celle du redimensionnement de l'avatar.


en effet, c'est fait, l'avatar n'est plus agrandi s'il est plus petit que 60x60

----------


## pseudocode

Une version "inline" pour les gens discrets ?

----------


## Mdinoc

Merci!  ::D:

----------


## azertix

> Une version "inline" pour les gens discrets ?


J'aime bien.

----------


## khayyam90

j'aime bien aussi

----------


## khayyam90

ajouter le v=2  la suite de l'url du badge image : 
http://www.developpez.com/ws/badgeimg?user=29897&v=2

----------


## pseudocode

> ajouter le v=2  la suite de l'url du badge image : 
> http://www.developpez.com/ws/badgeimg?user=29897&v=2


C'est adopt.  ::king::

----------


## gorgonite

> ajouter le v=2  la suite de l'url du badge image : 
> http://www.developpez.com/ws/badgeimg?user=29897&v=2


gnial, a correspond 1000 fois plus  mes attentes  ::ccool::

----------


## supersnail

Bonjour,

Pour la version image "grande taille", il faudrait rendre transparent le fond blanc  :;): 

Sinon,  ::bravo::  et beau boulot  ::ccool::

----------


## Nono40

Pour le grand (en script) c'est dommage que sous IE la prsentation ne passe pas aussi bien que sous FF.

Notez que si vous n'aimez pas les iframe, en balise script a fonctionne aussi :



> <script type="text/javascript" src="http://www.developpez.com/ws/badgescript?user=254882"></script>


cf http://tcuvelier.developpez.com/

----------


## danielhagnoul

Bonsoir.

J'ai ralis un badge qui correspond aux souhaits exprims dans mon prcdent message.

Voici son image :



 l'origine, tous les liens ont le mme bleu que le lien vers le forum jQuery, les liens violets ont dj t visits.

Il est dj en service sur http://danielhagnoul.developpez.com/

----------


## khayyam90

Daniel, j'aime bien l'esthtique de ta solution. 
Le nombre de messages est-il important ? Le statut online/offline est-il important. De plus, si on veut rendre ce badge automatisable et positionnable sur n'importe quel domaine, comment fixes-tu le "forum prfr" ?

----------


## danielhagnoul

Bonjour.




> Le nombre de messages est-il important ?


  Pour moi, le nombre d'intervention n'a aucune importance.




> Le statut online/offline est-il important ?


  C'est une option utile, mais j'ignore comment procder pour rcuprer le statut.




> De plus, si on veut rendre ce badge automatisable et positionnable sur n'importe quel domaine, comment fixes-tu le "forum prfr" ?


  Ne peut-on pas,  partir des statistiques d'intervention, dterminer le forum le plus frquent ? Sinon, une option supplmentaire du profil ?

----------


## pseudocode

> Ne peut-on pas,  partir des statistiques d'intervention, dterminer le forum le plus frquent ? Sinon, une option supplmentaire du profil ?


(Mince, mon fofo prfr ca va tre la Taverne  ::aie:: )

----------


## khayyam90

> Ne peut-on pas,  partir des statistiques d'intervention, dterminer le forum le plus frquent ? Sinon, une option supplmentaire du profil ?


cela peut tre  double tranchant. Si j'ai post pendant des annes sur C++ et que maintenant je m'intresse  autre chose, je ne voudrais pas voir affich le forum C++. Et bien sr si j'habite dans la taverne je ne voudrais pas la voir. 
Idalement il faudrait pouvoir saisir soi-mme le forum  y afficher

----------


## danielhagnoul

Bonsoir.

D'accord, je pense qu'un  espace badge  dans le profil serait la meilleure solution. 

Ce serait plus pratique que des options PHP, pour choisir quels renseignements figureront sur son badge et rcuprer le code correspondant parmi 3 ou 4 conceptions de badges possible. 

Je pense qu'il est prfrable de laisser le choix parmi plusieurs conceptions de badges.

Suivant l'endroit et les circonstances, on a au minimum besoin d'une version minimaliste et d'une version complte, plus l'ternel problme  des gots et des couleurs .

----------


## pseudocode

> Je pense qu'il est prfrable de laisser le choix parmi plusieurs conceptions de badges.
> 
> Suivant l'endroit et les circonstances, on a au minimum besoin d'une version minimaliste et d'une version complte, plus l'ternel problme  des gots et des couleurs .


un mode avec le "pseudo" au lieu du nom complet, ca serait bien.  ::ange:: 


(ps : je sais, c'est dbile puisqu'il suffit d'aller sur le profil du pseudo pour avoir le nom. Mais bon, j'ai jamais prtendu tre intelligent.  ::aie:: )

----------


## khayyam90

> un mode avec le "pseudo" au lieu du nom complet, ca serait bien.


pour a tu as l'argument &realname=0

----------


## khayyam90

http://www.developpez.com/ws/badge?user=29897&v=3
?
Accessible via l'iframe, via un php @file_get_contents, ou via un script
http://www.developpez.com/ws/badgescript?user=29897&v=3

Le script s'utilise dans une balise <script>, pas la peine de l'afficher tel quel  ::mrgreen:: 


```
<div id="dvp_badge"></div><script type="text/javascript" src="http://www.developpez.com/ws/badgescript?user=29897&v=3"></script>
```


Pour le coup du forum prfr, je n'ai pas encore de solution et rien n'est faisable simplement.

----------


## supersnail

Bonjour,

Est-ce possible de rduire un peu la nouvelle version du badge? (en rduisant l'avatar par exemple  :;):  ), de manire  ce qu'elle soit  peu prs de la mme taille que la premire version?

----------


## pseudocode

> Bonjour,
> 
> Est-ce possible de rduire un peu la nouvelle version du badge? (en rduisant l'avatar par exemple  ), de manire  ce qu'elle soit  peu prs de la mme taille que la premire version?


Mouhaha... aprs une ptition pour que l'avatar ne soit pas rduit, voila la ptition inverse.  ::D:

----------


## supersnail

Dsol, mais aprs a fait trop gros dans mon blog  ::oops::  (je le mets dans la sidebar), et aprs les utilisateurs en petite rsolution ne vont plus rien voir  ::aie:: 

Donc: bah faut rajouter une option pour rduire l'avatar ou pas  ::aie::

----------


## danielhagnoul

Bonjour, c'tait prvisible !




> Suivant l'endroit et les circonstances, on a au minimum besoin d'une version minimaliste et d'une version complte,* plus l'ternel problme  des gots et des couleurs .*


Vous pouvez toujours utiliser la premire version.

----------


## azertix

Merci pour cette dernire version, elle est trs russie  ::D:

----------


## Aquanum

Bonsoir,
C'est une trs bonne ide ce badge Developpez  ::ccool:: 
Cette V3 me plait bien !
Hop, Adopt ! Merci  :;): 

EDIT : snif, trop gros pour mon blog par contre  ::cry::

----------


## khayyam90

Je suis content que a vous plaise, vous n'tes pas faciles  satisfaire  ::mrgreen::

----------


## pseudocode

> Je suis content que a vous plaise, vous n'tes pas faciles  satisfaire


On est un peu long a dcoller, mais aprs c'est l'extase !  ::ccool::

----------


## azertix

> Je suis content que a vous plaise, vous n'tes pas faciles  satisfaire


On est difficiles mais c'est plutt constructif  ::P:

----------


## BornBanane

Une petite remarque : 

On voit du blanc autour des toiles et du bouton rond online/offline, ca fait pas trs jolie  ::aie:: .

Sinon c'est  ::ccool:: .

----------


## khayyam90

Pour info, la version du badge via script a subit un lger changement pour la rendre davantage compatible avec IE.
Le code  insrer est complt par une balise clairement nomme <div>


```
<div id="dvp_badge"></div><script type="text/javascript" src="http://www.developpez.com/ws/badgescript?user=29897&v=3"></script>
```

----------


## Domi2

Bonsoir,

Suite  l'introduction du systme de points, est-il prvu d'afficher cette donne dans les badges, pour autant que cela soit possible techniquement et que cela s'avre pertinent ?

Domi2

----------


## khayyam90

> Bonsoir,
> 
> Suite  l'introduction du systme de points, est-il prvu d'afficher cette donne dans les badges, pour autant que cela soit possible techniquement et que cela s'avre pertinent ?
> 
> Domi2


oh bah oui, je vais me pencher sur la question

----------


## khayyam90

> Bonsoir,
> 
> Suite  l'introduction du systme de points, est-il prvu d'afficher cette donne dans les badges, pour autant que cela soit possible techniquement et que cela s'avre pertinent ?
> 
> Domi2


fait  ::):

----------


## Domi2

Bonjour,

C'est ok pour les points.

Par contre, en cliquant sur le lien, cela renvoie sur mes derniers messages et non pas sur le dtail de mes points.

Voir mon badge ici.

Domi2

----------


## khayyam90

> Par contre, en cliquant sur le lien, cela renvoie sur mes derniers messages et non pas sur le dtail de mes points.


Disons que a renvoie vers tes dernires participations sur la communaut : tu y vois tes interventions, tes actualits, tes topics sur tes derniers articles .... Un affichage plus dtaill, catgoris n'est pas d'actualit. Pour l'instant on va rester sur cet affichage des posts.

----------


## Domi2

Ok, a me va trs bien.

Merci !

----------


## Golgotha

Merci pour ce magnifique badge  ::ccool:: 

Il  trouv a place sur mon petit site web : http://wowar.fr

 ::merci::

----------


## Nathanael Marchand

Y'a une API pour rcuperer les infos du profil?

----------


## khayyam90

> Y'a une API pour rcuperer les infos du profil?


pas pour le moment

----------


## Nathanael Marchand

> pas pour le moment


Ca pourrait tre interessant pour se dvelopper un badge personalis... Genre en Silverlight  ::D:

----------


## khayyam90

> Ca pourrait tre interessant pour se dvelopper un badge personalis... Genre en Silverlight


C'est sr. J'ai pas mal rflchi  l'ide de la publication d'une API mais je ne suis pas sr de l'intrt et de l'impact rel que a pourrait avoir.

----------


## Mickael Baron

Bonjour,

Les badges proposs sont trs bien au sein de DVP. Par contre ils sont trop complets pour un usage en externe.

Pour les sites extra DVP pourrions nous avoir un badge un peu comme celui de Linked in



Le top serait d'avoir quelque part sur son profil une page permettant de choisir son badge et de rcuprer le code  ajouter  son site

Des ides ...

Mickael

----------


## f-leb

Salut,

demande tardive ::aie:: , mais le bouton "Mon Blog" du badge pointe sur les anciens blogs (https://blog.developpez.com/_pseudo_). Peut-on faire en sorte que le bouton pointe sur les blogs forums actuels (https://www.developpez.net/forums/blogs/_pseudo_/) ?

----------


## Golgotha

Tardive ? J'ai eu le temps de faire deux enfants depuis le dernier message..  ::aie::

----------


## Anomaly

> Tardive ? J'ai eu le temps de faire deux enfants depuis le dernier message..


Moi de mme !  ::mrgreen:: 




> le bouton "Mon Blog" du badge pointe sur les anciens blogs (https://blog.developpez.com/_pseudo_). Peut-on faire en sorte que le bouton pointe sur les blogs forums actuels (https://www.developpez.net/forums/blogs/_pseudo_/) ?


C'est rsolu ! Merci pour le signalement.  :;):

----------

