buttons-fr: Difference between revisions
BastrErliv (talk | contribs) (eltriczela) |
m (Replace <entry-title> with {{DISPLAYTITLE:}}) |
||
(5 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{DISPLAYTITLE: Boutons Microformats }} | |||
Il y a eu quelques demandes pour des boutons | Il y a eu quelques demandes pour des boutons destinés à différents microformats. Soit des badges ou des boutons qui font quelque chose avec les microformats spécifiques. Cette page maintient une liste de boutons tout comme des requêtes. - [http://tantek.com/log/ Tantek] | ||
Ajouté des boutons hébergés pour tous les micro-formats, y compris les brouillons, tout comme les instructions pour savoir comment fabriquer vos propres boutons. (14 mai 2006) - [http://www.wackomenace.co.uk/ Ruben] | |||
==Licences== | ==Licences== | ||
Si vous ajoutez des liens vers des boutons que vous avez | Si vous ajoutez des liens vers des boutons que vous avez conçus, '''incluez aussi une déclaration''' que vous suivez une des règles suivantes : | ||
* publiez-les dans le domaine public | * publiez-les dans le domaine public | ||
* | * détenez le copyright, mais publiez les droits d'utilisation | ||
* licenciez-les sous une licence | * licenciez-les sous une licence spécifiée libre, par exemple imaginez utiliser une licence [http://creativecommons.org/ Creative Commons] telle que la [http://creativecommons.org/licenses/by/3.0 cc-by-3.0]. | ||
Merci. | Merci. | ||
* Les images ci-dessous | * Les images ci-dessous hébergées par boogdesign.com sont disponibles sous [http://creativecommons.org/licenses/by/2.0/ licence CC Attribution 2.0], voir [http://www.boogdesign.com/buttons.html ma page boutons] pour les fichiers Photoshop si vous en avez besoin. - Rob Crowther | ||
* Les images ci-dessous hébergées chez rbach.priv.at sont disponibles sous licence [http://creativecommons.org/licenses/by/3.0 cc-by-3.0]. - [[User:RobertBachmann|Robert Bachmann]] | |||
* Les images ci-dessous hébergées chez synaesthetic.net sont disponibles sous la licence [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0]. -- [[User:Kwilson|Kenn Wilson]] | |||
* Les images-ci-dessous hébergées chez hauntedpalace.net et flickr.com/photos.hauntedpalace (logos POSH anti-sèche palette) sont disponibles sous la [http://creativecommons.org/licenses/by-sa/3.0/ licence Creative Commons Attribution-ShareAlike 3.0]. — [[:User:CarlaHufstedler|Carla Hufstedler]] | |||
== Boutons == | == Boutons == | ||
=== Bouton Microformat === | === Bouton Microformat === | ||
J'ai produit un bouton pour les microformats. Parce qu'il existe beaucoup de microformats et encore plus | J'ai produit un bouton pour les microformats. Parce qu'il existe beaucoup de microformats et encore plus à venir, indiquer simplement le support / utilisation des microformats pourrait être une bonne approche. L'image est libre d'utilisation. SVP copiez-là chez votre hébergeur et ne faites pas de liens vers elle. | ||
http://www.crowley.nl/images/microformats.png | http://www.crowley.nl/images/microformats.png | ||
J'ai | J'ai déjà un "J'utilise les | ||
http://www.crowley.nl/images/microformats.png" sur mon blog: http://doncrowley.blogspot.com/ | http://www.crowley.nl/images/microformats.png" sur mon blog: http://doncrowley.blogspot.com/ | ||
Line 47: | Line 47: | ||
* http://rbach.priv.at/2006/buttons/hcal.png | * http://rbach.priv.at/2006/buttons/hcal.png | ||
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png | * http://www.boogdesign.com/images/buttons/microformat_hcalendar.png | ||
* bouton CSS-powered | * bouton CSS-powered tiré de [http://www.midgard-project.org/community/events/ calendrier événement Midgard CMS] : | ||
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span> | <span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span> | ||
Code (espace blanc | Code (espace blanc ajouté pour la lisibilité) : | ||
<pre><nowiki> | <pre><nowiki> | ||
Line 69: | Line 69: | ||
=== [[hcard|hCard]] === | === [[hcard|hCard]] === | ||
* http://www.crowley.nl/images/hcard.png (miroir : http://www.davidjanes.com/images/mf_hcard.png )* http://rbach.priv.at/2006/buttons/hcard.png | * http://www.crowley.nl/images/hcard.png (miroir : http://www.davidjanes.com/images/mf_hcard.png )* http://rbach.priv.at/2006/buttons/hcard.png | ||
* bouton CSS-powered comme mis en | * bouton CSS-powered comme mis en évidence [http://re-run.com/about/microformat-badges microformat badges @ re-run] | ||
* http://www.boogdesign.com/images/buttons/microformat_hcard.png | * http://www.boogdesign.com/images/buttons/microformat_hcard.png | ||
Line 101: | Line 101: | ||
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png | * http://www.boogdesign.com/images/buttons/microformat_xoxo.png | ||
== Boutons CSS == | |||
Comme il y a de nouveaux microformats qui arrivent tout le temps, j'ai produit un bouton CSS qui ressemble aux versions "faites à la main". Voici le résultat. | |||
Le fichier avec la CSS et les deux images requises (logo et arrière-plan) peuvent être téléchargées à partir de [http://thebeastlybeasts.co.uk/css/microformat_css.zip The Beastly Beasts]. | |||
Extraire le répertoire microformat et les fichiers à l'intérieur vers /css, ainsi vous avez :<br /> | |||
/css/microformat/microformat.css<br /> | |||
/css/microformat/background.png<br /> | |||
/css/microformat/logo.png | |||
Si vous chemins sont différents, faites un peu d'édition : | |||
Le XHTML pour créer un bouton est : | |||
<pre><tag class="microformat-button microformat-type"><span></span>microformat-type</tag></pre> | |||
Par exemple, un bouton hCard avec un lien vers la spécification : | |||
<pre><a href="http://microformats.org/wiki/hcard-fr" title="Microformat" class="microformat-button hcard"><span></span>hcard</a></pre> | |||
=== Styles CSS pour microformats=== | === Styles CSS pour microformats=== | ||
Je ne suis pas certain si ceci peut | Je ne suis pas certain si ceci peut être sous les boutons, mais ne sais pas où le poser ailleurs. Ceci est une feuille de style contenant des styles pour la plupart des microformats. Et c'est automatique. Je l'ai publiée sous la cc by-sa. Notez svp que je suis nouveau sur les microformats et que si vous pouvez l'améliorer, faites-le svp. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT) | ||
[http://creativecommons.org/licenses/by-sa/3.0/us/ Licence] | [http://creativecommons.org/licenses/by-sa/3.0/us/ Licence] | ||
Line 112: | Line 129: | ||
== Boutons pour les formats brouillons == | == Boutons pour les formats brouillons == | ||
Ceux-ci peuvent | Ceux-ci peuvent être sujets à modifications si les noms des formats changent quand ils seront publiés. | ||
=== [[adr-fr|adr]] === | === [[adr-fr|adr]] === | ||
Line 122: | Line 139: | ||
=== [[hatom-fr|hAtom]] === | === [[hatom-fr|hAtom]] === | ||
* http://rbach.priv.at/2006/buttons/hatom.png | * http://rbach.priv.at/2006/buttons/hatom.png | ||
* http://www.corvidworks.com/files/microformats/hatom.png | |||
=== [[hresume-fr|hResume]] === | === [[hresume-fr|hResume]] === | ||
Line 153: | Line 171: | ||
Exemple : http://www.crowley.nl/images/hcard.png | Exemple : http://www.crowley.nl/images/hcard.png | ||
Utilisez le [http://kalsey.com/tools/buttonmaker/ Kalsey | Utilisez le [http://kalsey.com/tools/buttonmaker/ Producteur de Bouton Kalsey] avec les réglages suivants : | ||
* Outer border: #666666 | * Outer border: #666666 | ||
* Inner border: #ffffff | * Inner border: #ffffff | ||
* Bar position: 25 pixels | * Bar position: 25 pixels à partir de la gauche | ||
* Left box text: >>> | * Left box text: >>> | ||
* Left box background: #000000 | * Left box background: #000000 | ||
Line 169: | Line 187: | ||
Exemple : http://rbach.priv.at/2006/buttons/hcal.png | Exemple : http://rbach.priv.at/2006/buttons/hcal.png | ||
# | # Téléchargez le [http://www.kottke.org/plus/type/silkscreen/ Silkscreen] de fonte | ||
# Installez [http://www.imagemagick.org/ ImageMagick] | # Installez [http://www.imagemagick.org/ ImageMagick] | ||
# Recevez l' | # Recevez l'icône blanche (http://rbach.priv.at/2006/buttons/blank.png) | ||
# Ouvrez la ligne de commande de votre machine (DOS ou autre) et saisissez : | # Ouvrez la ligne de commande de votre machine (DOS ou autre) et saisissez : | ||
<pre>convert blank.png | <pre>convert blank.png | ||
Line 178: | Line 196: | ||
-pointsize 8 | -pointsize 8 | ||
+antialias | +antialias | ||
-draw "text 28,10 ' | -draw "text 28,10 'étiquette-bouton'" | ||
output.png | output.png | ||
</pre> | </pre> | ||
=== Style 3 === | === Style 3 === | ||
Exemple : http:// | Exemple : http://www.corvidworks.com/files/microformats/hatom.png | ||
# Obtenez la police [http://www.kottke.org/plus/type/silkscreen/ Silkscreen] | # Obtenez la police [http://www.kottke.org/plus/type/silkscreen/ Silkscreen] | ||
# Installez [http://www.imagemagick.org/ ImageMagick] | # Installez [http://www.imagemagick.org/ ImageMagick] | ||
# Obtenez l' | # Obtenez l'icône blanche (http://www.corvidworks.com/files/microformats/button2-blank.png) | ||
# Saisissez : | # Saisissez : | ||
<pre>convert button2-blank.png | <pre>convert button2-blank.png | ||
Line 200: | Line 218: | ||
= Microformats Logos = | = Microformats Logos = | ||
Rohit est un | Rohit est un très pauvre hacker CSS, mais il lui a donné son meilleur shot. Il [http://labs.commerce.net/~rohit/µf-logo.html l'a aussi restitué en 72 et 18 points.] | ||
http://microformats.org/img/logo.gif | http://microformats.org/img/logo.gif | ||
Line 216: | Line 234: | ||
</div> | </div> | ||
Le logo en-dessous sous PNG transparent ( | Le logo en-dessous sous PNG transparent (lié ici à partir de mon propre serveur ; si vous l'utilisez, copiez svp pour vous-même) : | ||
http://files.synaesthetic.net/public/microformats/microformats1.png | http://files.synaesthetic.net/public/microformats/microformats1.png | ||
Line 227: | Line 245: | ||
<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div> | <div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div> | ||
J'ai créé une anti-sèche en utilisant le producteur de badge du [http://bighugelabs.com/flickr/ Big Huge Lab] : | |||
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg] | |||
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT) | |||
=Wiki boutons= | =Wiki boutons= | ||
Line 239: | Line 263: | ||
==Voir aussi == | ==Voir aussi == | ||
{{branding-see-also}} | {{branding-see-also-fr}} | ||
* <span class="logos POSH">[[posh-fr#Répandez_CHIC|logos CHIC et boutons]]</span> |
Latest revision as of 16:21, 18 July 2020
Il y a eu quelques demandes pour des boutons destinés à différents microformats. Soit des badges ou des boutons qui font quelque chose avec les microformats spécifiques. Cette page maintient une liste de boutons tout comme des requêtes. - Tantek
Ajouté des boutons hébergés pour tous les micro-formats, y compris les brouillons, tout comme les instructions pour savoir comment fabriquer vos propres boutons. (14 mai 2006) - Ruben
Licences
Si vous ajoutez des liens vers des boutons que vous avez conçus, incluez aussi une déclaration que vous suivez une des règles suivantes :
- publiez-les dans le domaine public
- détenez le copyright, mais publiez les droits d'utilisation
- licenciez-les sous une licence spécifiée libre, par exemple imaginez utiliser une licence Creative Commons telle que la cc-by-3.0.
Merci.
- Les images ci-dessous hébergées par boogdesign.com sont disponibles sous licence CC Attribution 2.0, voir ma page boutons pour les fichiers Photoshop si vous en avez besoin. - Rob Crowther
- Les images ci-dessous hébergées chez rbach.priv.at sont disponibles sous licence cc-by-3.0. - Robert Bachmann
- Les images ci-dessous hébergées chez synaesthetic.net sont disponibles sous la licence Creative Commons Attribution 3.0. -- Kenn Wilson
- Les images-ci-dessous hébergées chez hauntedpalace.net et flickr.com/photos.hauntedpalace (logos POSH anti-sèche palette) sont disponibles sous la licence Creative Commons Attribution-ShareAlike 3.0. — Carla Hufstedler
Boutons
Bouton Microformat
J'ai produit un bouton pour les microformats. Parce qu'il existe beaucoup de microformats et encore plus à venir, indiquer simplement le support / utilisation des microformats pourrait être une bonne approche. L'image est libre d'utilisation. SVP copiez-là chez votre hébergeur et ne faites pas de liens vers elle.
J'ai déjà un "J'utilise les " sur mon blog: http://doncrowley.blogspot.com/
- Don Crowley
hCalendar
- bouton CSS-powered tiré de calendrier événement Midgard CMS :
››› hCalendar
Code (espace blanc ajouté pour la lisibilité) :
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"> <span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;"> ››› </span> hCalendar </span>
hCard
- (miroir : )*
- bouton CSS-powered comme mis en évidence microformat badges @ re-run
rel-license
rel-nofollow
rel-tag
VoteLinks
XFN
XMDP
XOXO
Boutons CSS
Comme il y a de nouveaux microformats qui arrivent tout le temps, j'ai produit un bouton CSS qui ressemble aux versions "faites à la main". Voici le résultat.
Le fichier avec la CSS et les deux images requises (logo et arrière-plan) peuvent être téléchargées à partir de The Beastly Beasts.
Extraire le répertoire microformat et les fichiers à l'intérieur vers /css, ainsi vous avez :
/css/microformat/microformat.css
/css/microformat/background.png
/css/microformat/logo.png
Si vous chemins sont différents, faites un peu d'édition :
Le XHTML pour créer un bouton est :
<tag class="microformat-button microformat-type"><span></span>microformat-type</tag>
Par exemple, un bouton hCard avec un lien vers la spécification :
<a href="http://microformats.org/wiki/hcard-fr" title="Microformat" class="microformat-button hcard"><span></span>hcard</a>
Styles CSS pour microformats
Je ne suis pas certain si ceci peut être sous les boutons, mais ne sais pas où le poser ailleurs. Ceci est une feuille de style contenant des styles pour la plupart des microformats. Et c'est automatique. Je l'ai publiée sous la cc by-sa. Notez svp que je suis nouveau sur les microformats et que si vous pouvez l'améliorer, faites-le svp. Mac Lover 13:25, 13 Apr 2007 (PDT)
Boutons pour les formats brouillons
Ceux-ci peuvent être sujets à modifications si les noms des formats changent quand ils seront publiés.
adr
geo
hAtom
hResume
hReview
rel-directory
rel-enclosure
rel-home
rel-payment
Robots Exclusion
xFolk
Faites vos propres boutons
Style 1
Exemple :
Utilisez le Producteur de Bouton Kalsey avec les réglages suivants :
- Outer border: #666666
- Inner border: #ffffff
- Bar position: 25 pixels à partir de la gauche
- Left box text: >>>
- Left box background: #000000
- Left box text color: #ffffff
- Left box text start: 7 pixels from the left
- Right box text: (The name of the microformat goes here)
- Right box background: #31757b
- Right box text color: #ffffff
- Right box text start: 3 pixels from the bar
Style 2
Exemple :
- Téléchargez le Silkscreen de fonte
- Installez ImageMagick
- Recevez l'icône blanche ()
- Ouvrez la ligne de commande de votre machine (DOS ou autre) et saisissez :
convert blank.png -fill white -font Silkscreen -pointsize 8 +antialias -draw "text 28,10 'étiquette-bouton'" output.png
Style 3
Exemple :
- Obtenez la police Silkscreen
- Installez ImageMagick
- Obtenez l'icône blanche ()
- Saisissez :
convert button2-blank.png -fill white -font Silkscreen -pointsize 8 +antialias -draw "text 20,10 'button label'" output.png
Microformats Logos
Rohit est un très pauvre hacker CSS, mais il lui a donné son meilleur shot. Il l'a aussi restitué en 72 et 18 points.
microformats
Le logo en-dessous sous PNG transparent (lié ici à partir de mon propre serveur ; si vous l'utilisez, copiez svp pour vous-même) :
Palette
J'ai créé une anti-sèche en utilisant le producteur de badge du Big Huge Lab : --Carla 12:11, 1 Sep 2007 (PDT)
Wiki boutons
Pour utilisation sur ce wiki.
- nouveau ! - {{NewMarker-fr}}
- Succès ! - {{SuccessMarker-fr}}
- mis à jour! - {{UpdateMarker-fr}}
Demandes
- Logos pour tous les microformats
Voir aussi
- Barcodes 2D (un graphique ressemblant à un code barres pour capture par téléphone mobile)
- boutons
- icônes
- Stickers