icons-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (darace)
m (Reverted edits by ReldrOncoa (Talk) to last version by Tantek)
Line 1: Line 1:
eltchi
<h1> Icônes </h1>
<h1> Icônes </h1>
Ces icônes peuvent être utilisées pour vignetter différents microformats dans les pages web ou sur le bureau.
Ces icônes peuvent être utilisées pour vignetter différents microformats dans les pages web ou sur le bureau.
== Créateurs ==
== Créateurs ==
* [http://factoryjoe.com/blog Chris Messina]
* [http://factoryjoe.com/blog Chris Messina]
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
* [http://bartleme.at Wolfgang Bartelme]
* [http://bartleme.at Wolfgang Bartelme]


==Accessibilité==
==Accessibilité==
Il est conseillé aux éditeurs de s'assurer que ces icônes soient utilisées de façon accessible en y incluant les attributs appropriés "alt".
Il est conseillé aux éditeurs de s'assurer que ces icônes soient utilisées de façon accessible en y incluant les attributs appropriés "alt".


Il est rappelé aux designeurs d'icônes que l'incapacité de distinguer entre le rouge et le vert fait partie des formes le plus communes de daltonisme.
Il est rappelé aux designeurs d'icônes que l'incapacité de distinguer entre le rouge et le vert fait partie des formes le plus communes de daltonisme.


=== Copyright ===
=== Copyright ===
A moins que ce ne soit noté ailleurs, ces icônes sont licenciées sous la [http://creativecommons.org/licenses/by-sa/2.5/ licence Creative Commons Attribution-ShareAlike 2.5].
A moins que ce ne soit noté ailleurs, ces icônes sont licenciées sous la [http://creativecommons.org/licenses/by-sa/2.5/ licence Creative Commons Attribution-ShareAlike 2.5].




== Icônes ==
== Icônes ==


=== Web ===
=== Web ===


Un [http://factorycity.net/projects/microformats-icons/ premier effort] a été réalisé par  Wolfgang Bartelme et Chris Messina pour créer une série d'icônes et boutons microformats compatibles web .
Un [http://factorycity.net/projects/microformats-icons/ premier effort] a été réalisé par  Wolfgang Bartelme et Chris Messina pour créer une série d'icônes et boutons microformats compatibles web .


==== Général ====
==== Général ====


* http://factorycity.net/projects/microformats%2Dicons/images/icon-hatom.png hAtom  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hatom.png hAtom  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcalendar.png hCalendar  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcalendar.png hCalendar  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-add.png Ajout hCard
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-add.png Ajout hCard
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-download.png Télécharger hCard  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-download.png Télécharger hCard  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hresume.png hResume (bouton)  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hresume.png hResume (bouton)  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-rel-tag.png rel-tag (bouton)  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-rel-tag.png rel-tag (bouton)  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-xfn.png XFN (bouton)  
* http://factorycity.net/projects/microformats%2Dicons/images/icon-xfn.png XFN (bouton)  


'''Fondé sur le Kit de Dev Général d'icônes:'''  
'''Fondé sur le Kit de Dev Général d'icônes:'''  
* http://farm1.static.flickr.com/247/515868619_ed9cda470a_o.png Télécharger hCalendar
* http://farm1.static.flickr.com/247/515868619_ed9cda470a_o.png Télécharger hCalendar
* http://farm1.static.flickr.com/217/515843744_57bd70fdf5_o.png Ajouter hCalendar
* http://farm1.static.flickr.com/217/515843744_57bd70fdf5_o.png Ajouter hCalendar
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard  
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard  
Line 40: Line 39:
'''Commentaires :'''
'''Commentaires :'''


* Hober a souligné que le vert brillant semble être une couleur commune pour les [eventful.com/images/skin/ical.gif chicklets ical]
* Hober a souligné que le vert brillant semble être une couleur commune pour les [eventful.com/images/skin/ical.gif chicklets ical]
* Tantek se demande si le bouton rel-tag est utile
* Tantek se demande si le bouton rel-tag est utile
* ChrisMessina suggère un besoin d'une petite icône tag 10x10
* ChrisMessina suggère un besoin d'une petite icône tag 10x10
** http://archgfx.net/aspnet_client/tag-ltblue.gif tag carré
** http://archgfx.net/aspnet_client/tag-ltblue.gif tag carré
** [[User:Pfefferle|Pfefferle]] suggère l'icône-tag [http://www.famfamfam.com/lab/icons/silk/ FamFamFam] : http://notizblog.org/wp-content/uploads/2007/05/tag_blue.png
** [[User:Pfefferle|Pfefferle]] suggère l'icône-tag [http://www.famfamfam.com/lab/icons/silk/ FamFamFam] : http://notizblog.org/wp-content/uploads/2007/05/tag_blue.png
* Tantek se demande si nous avons besoin d'une icône de téléchargement hCard  -- parce que cela se concentre trop sur les "pipes"
* Tantek se demande si nous avons besoin d'une icône de téléchargement hCard  -- parce que cela se concentre trop sur les "pipes"
* Ron pense que c'est bien d'utilise des icônes, parce que c'est un beau moyen de promouvoir "l'idée microformats". Peut-être que c'est une bonne idée d'utiliser une flèche pointée vers le bas pour indiquer la possibilité de "télécharger" quelque chose" (comme une hCard ou un hResume)
* Ron pense que c'est bien d'utilise des icônes, parce que c'est un beau moyen de promouvoir "l'idée microformats". Peut-être que c'est une bonne idée d'utiliser une flèche pointée vers le bas pour indiquer la possibilité de "télécharger" quelque chose" (comme une hCard ou un hResume)
* Adam se demande si plusieurs licences, y compris GPL pourrait être utile pour accroître l'adoption parmi les thèmes wordpress.
* Adam se demande si plusieurs licences, y compris GPL pourrait être utile pour accroître l'adoption parmi les thèmes wordpress.
* [[User:Pfefferle|Pfefferle]] suggère de changer la couleur du bouton XFN en bleu, car cela utilise l'attribut rel comme "rel-tag"  http://farm1.static.flickr.com/195/515824030_3c0dd42493_o.png.
* [[User:Pfefferle|Pfefferle]] suggère de changer la couleur du bouton XFN en bleu, car cela utilise l'attribut rel comme "rel-tag"  http://farm1.static.flickr.com/195/515824030_3c0dd42493_o.png.


==== XFN ====
==== XFN ====
Line 62: Line 61:
'''Commentaires :'''
'''Commentaires :'''


* Tantek : je m'interroge si une icône rel-me est nécessaire ou appropriée ; peut-être qqchose indiquant les "visages" ?
* Tantek : je m'interroge si une icône rel-me est nécessaire ou appropriée ; peut-être qqchose indiquant les "visages" ?
* ChrisMesssina: rel-me est utile dans les billets de blogs à l'endroit où vous liez vers d'autres billets que vous avez écrits.
* ChrisMesssina: rel-me est utile dans les billets de blogs à l'endroit où vous liez vers d'autres billets que vous avez écrits.
* Joh Williams : j'ai pensé aux "buddy de flickr" quand j'ai d'abord vu ça du fait des couleurs. Aussi le rose/bleu peut ennuyer les gens avec quelques problématiques de genre. Peut-être que nous devrions utiliser le vert pour le sweetheart.
* Joh Williams : j'ai pensé aux "buddy de flickr" quand j'ai d'abord vu ça du fait des couleurs. Aussi le rose/bleu peut ennuyer les gens avec quelques problématiques de genre. Peut-être que nous devrions utiliser le vert pour le sweetheart.


==== VoteLinks ====
==== VoteLinks ====
Line 72: Line 71:
* http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for
* http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for
* http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against
* http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against
* http://factorycity.net/projects/microformats%2Dicons/images/vote-links.png (téléchargez le [http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip kit])
* http://factorycity.net/projects/microformats%2Dicons/images/vote-links.png (téléchargez le [http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip kit])
   
   
'''Commentaires :'''
'''Commentaires :'''
* [[User:SteveIvy|Steve Ivy]] : Je n'ai pas de bonne icône pour vote-abstain. Recommandations bienvenues. Celles ci sont aussi peut-être un peu grandes pour se tenir à côté des liens ?
* [[User:SteveIvy|Steve Ivy]] : Je n'ai pas de bonne icône pour vote-abstain. Recommandations bienvenues. Celles ci sont aussi peut-être un peu grandes pour se tenir à côté des liens ?
** [[User:AndyMabbett|Andy Mabbett]]: Est-ce que +1/-1 est un moyen commun de représenter le vote ? Est-ce que des puces et croix seraient meilleurs, ou des pouces haut/bas (ou horizontal pour abstention) ?
** [[User:AndyMabbett|Andy Mabbett]]: Est-ce que +1/-1 est un moyen commun de représenter le vote ? Est-ce que des puces et croix seraient meilleurs, ou des pouces haut/bas (ou horizontal pour abstention) ?
*** [[User:SteveIvy|Steve Ivy]] : j'aime vraiment les icônes utilisées par [http://digg.com digg] pour voter sur les commentaires mais pour des raisons évidentes je ne peux pas les utiliser. Pour être honnête, je ne suis pas iconographe, mais si quelqu'un devait créer des icônes pouces-haut/pouces-bas je les utiliserais à la place de celles-ci.
*** [[User:SteveIvy|Steve Ivy]] : j'aime vraiment les icônes utilisées par [http://digg.com digg] pour voter sur les commentaires mais pour des raisons évidentes je ne peux pas les utiliser. Pour être honnête, je ne suis pas iconographe, mais si quelqu'un devait créer des icônes pouces-haut/pouces-bas je les utiliserais à la place de celles-ci.


==== Geo ====
==== Geo ====
Peut être utilisé dans la propriété ''background-image'' de la CSS, à côté d'un microformat geo. Cela pourrait aussi indiquer qu'une carte s'ouvre dans une nouvelle fenêtre :  
Peut être utilisé dans la propriété ''background-image'' de la CSS, à côté d'un microformat geo. Cela pourrait aussi indiquer qu'une carte s'ouvre dans une nouvelle fenêtre :  
* http://microformats.telemetry.gr/openmap.gif
* http://microformats.telemetry.gr/openmap.gif


Line 90: Line 89:
[http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons-preview.png]
[http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons-preview.png]


Ces [http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip icônes] peuvent être utilisées pour des dossiers ou fichiers sur votre Mac. Vous pouvez utiliser un outil comme [http://iconfactory.com/software/pixadex Pixadex] pour les gérer et les mettre en oeuvre.
Ces [http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip icônes] peuvent être utilisées pour des dossiers ou fichiers sur votre Mac. Vous pouvez utiliser un outil comme [http://iconfactory.com/software/pixadex Pixadex] pour les gérer et les mettre en oeuvre.


Créé par [http://factoryjoe.com/blog Chris Messina]
Créé par [http://factoryjoe.com/blog Chris Messina]




Line 99: Line 98:
[http://dmitry.baranovskiy.com/res/mf-logo.svg http://dmitry.baranovskiy.com/i/svgfile.png]
[http://dmitry.baranovskiy.com/res/mf-logo.svg http://dmitry.baranovskiy.com/i/svgfile.png]


Ce logo ressemble vraiment de près à la première icône de l'ensemble de Chris. Vous pourriez l'ouvrir dans n'importe quel outil d'édition bitmap ou vectoriel comme Adobe Photoshop ou Adobe Illustrator.  
Ce logo ressemble vraiment de près à la première icône de l'ensemble de Chris. Vous pourriez l'ouvrir dans n'importe quel outil d'édition bitmap ou vectoriel comme Adobe Photoshop ou Adobe Illustrator.  
    
    
Créé par [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
Créé par [http://dmitry.baranovskiy.com Dmitry Baranovskiy]


==Voir aussi ==  
==Voir aussi ==  
Line 107: Line 106:


== Exemples dans la jungle ==
== Exemples dans la jungle ==
* [http://zeroseis.com.br ZeroSeis] utilise l'icône de téléchargement hCard.  
* [http://zeroseis.com.br ZeroSeis] utilise l'icône de téléchargement hCard.  
* [http://www.bayofislands.net/ Bay of Islands] utilise l'icône hCard geo par ex. dans la page [http://www.bayofislands.net/accommodation/mousetrap/ Moustrap Backpackers]
* [http://www.bayofislands.net/ Bay of Islands] utilise l'icône hCard geo par ex. dans la page [http://www.bayofislands.net/accommodation/mousetrap/ Moustrap Backpackers]
* [http://www.nextbbs.com nextBBS] utilise les icônes vote-links.  
* [http://www.nextbbs.com nextBBS] utilise les icônes vote-links.  
* [http://www.revolucao.etc.br Revolução Etc] utilise l'icône de téléchargement hCard download et l'icône tag
* [http://www.revolucao.etc.br Revolução Etc] utilise l'icône de téléchargement hCard download et l'icône tag




-----
-----

Revision as of 22:23, 20 December 2008

Icônes

Ces icônes peuvent être utilisées pour vignetter différents microformats dans les pages web ou sur le bureau.

Créateurs

Accessibilité

Il est conseillé aux éditeurs de s'assurer que ces icônes soient utilisées de façon accessible en y incluant les attributs appropriés "alt".

Il est rappelé aux designeurs d'icônes que l'incapacité de distinguer entre le rouge et le vert fait partie des formes le plus communes de daltonisme.

Copyright

A moins que ce ne soit noté ailleurs, ces icônes sont licenciées sous la licence Creative Commons Attribution-ShareAlike 2.5.


Icônes

Web

Un premier effort a été réalisé par Wolfgang Bartelme et Chris Messina pour créer une série d'icônes et boutons microformats compatibles web .

Général

  • icon-hatom.png hAtom
  • icon-hcalendar.png hCalendar
  • icon-hcard-add.png Ajout hCard
  • icon-hcard-download.png Télécharger hCard
  • icon-hresume.png hResume (bouton)
  • icon-rel-tag.png rel-tag (bouton)
  • icon-xfn.png XFN (bouton)

Fondé sur le Kit de Dev Général d'icônes:

  • 515868619_ed9cda470a_o.png Télécharger hCalendar
  • 515843744_57bd70fdf5_o.png Ajouter hCalendar
  • 515843768_98956242a7_o.png hCard


Commentaires :

  • Hober a souligné que le vert brillant semble être une couleur commune pour les [eventful.com/images/skin/ical.gif chicklets ical]
  • Tantek se demande si le bouton rel-tag est utile
  • ChrisMessina suggère un besoin d'une petite icône tag 10x10
  • Tantek se demande si nous avons besoin d'une icône de téléchargement hCard -- parce que cela se concentre trop sur les "pipes"
  • Ron pense que c'est bien d'utilise des icônes, parce que c'est un beau moyen de promouvoir "l'idée microformats". Peut-être que c'est une bonne idée d'utiliser une flèche pointée vers le bas pour indiquer la possibilité de "télécharger" quelque chose" (comme une hCard ou un hResume)
  • Adam se demande si plusieurs licences, y compris GPL pourrait être utile pour accroître l'adoption parmi les thèmes wordpress.
  • Pfefferle suggère de changer la couleur du bouton XFN en bleu, car cela utilise l'attribut rel comme "rel-tag" 515824030_3c0dd42493_o.png.

XFN

  • xfn-me.png rel-me
  • xfn-friend.png rel-friend
    • xfn-friend-met.png met
  • xfn-sweetheart.png rel-sweetheart
    • xfn-sweetheart-met.png met
  • xfn-colleague.png rel-colleague
    • xfn-colleague-met.png met

Commentaires :

  • Tantek : je m'interroge si une icône rel-me est nécessaire ou appropriée ; peut-être qqchose indiquant les "visages" ?
  • ChrisMesssina: rel-me est utile dans les billets de blogs à l'endroit où vous liez vers d'autres billets que vous avez écrits.
  • Joh Williams : j'ai pensé aux "buddy de flickr" quand j'ai d'abord vu ça du fait des couleurs. Aussi le rose/bleu peut ennuyer les gens avec quelques problématiques de genre. Peut-être que nous devrions utiliser le vert pour le sweetheart.

VoteLinks

VoteLinks

  • vote-for.gif vote-for
  • vote-against.gif vote-against
  • vote-links.png (téléchargez le kit)

Commentaires :

  • Steve Ivy : Je n'ai pas de bonne icône pour vote-abstain. Recommandations bienvenues. Celles ci sont aussi peut-être un peu grandes pour se tenir à côté des liens ?
    • Andy Mabbett: Est-ce que +1/-1 est un moyen commun de représenter le vote ? Est-ce que des puces et croix seraient meilleurs, ou des pouces haut/bas (ou horizontal pour abstention) ?
      • Steve Ivy : j'aime vraiment les icônes utilisées par digg pour voter sur les commentaires mais pour des raisons évidentes je ne peux pas les utiliser. Pour être honnête, je ne suis pas iconographe, mais si quelqu'un devait créer des icônes pouces-haut/pouces-bas je les utiliserais à la place de celles-ci.

Geo

Peut être utilisé dans la propriété background-image de la CSS, à côté d'un microformat geo. Cela pourrait aussi indiquer qu'une carte s'ouvre dans une nouvelle fenêtre :

  • openmap.gif



Mac

mf-icons-preview.png

Ces icônes peuvent être utilisées pour des dossiers ou fichiers sur votre Mac. Vous pouvez utiliser un outil comme Pixadex pour les gérer et les mettre en oeuvre.

Créé par Chris Messina


PDF & SVG

pdffile.png svgfile.png

Ce logo ressemble vraiment de près à la première icône de l'ensemble de Chris. Vous pourriez l'ouvrir dans n'importe quel outil d'édition bitmap ou vectoriel comme Adobe Photoshop ou Adobe Illustrator.

Créé par Dmitry Baranovskiy

Voir aussi

Exemples dans la jungle


Retrieved from "http://microformats.org/wiki/index.php?title=icons-fr&oldid=36583"