|
|
| Line 49: |
Line 49: |
| * bouton CSS-powered tiré de [http://www.midgard-project.org/community/events/ calendrier événement Midgard CMS] : | | * 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;"> |
| | |
| | |
| Code (espace blanc ajouté pour la lisibilité) :
| |
| | |
| <pre><nowiki>
| |
| <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;">
| |
| &#8250;&#8250;&#8250;
| |
| </span>
| |
| hCalendar
| |
| </span>
| |
| </nowiki></pre>
| |
| | |
| === [[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
| |
| * 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
| |
| | |
| === [[rel-license-fr|rel-license]] ===
| |
| * http://rbach.priv.at/2006/buttons/license.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_rellicense.png
| |
| | |
| === [[rel-nofollow-fr|rel-nofollow]] ===
| |
| * http://rbach.priv.at/2006/buttons/nofollow.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_relnofollow.png
| |
| | |
| === [[rel-tag-fr|rel-tag]] ===
| |
| * http://rbach.priv.at/2006/buttons/rel-tag.png
| |
| * http://rbach.priv.at/2006/buttons/tag.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_reltag.png
| |
| | |
| === [[vote-links-fr|VoteLinks]] ===
| |
| * http://rbach.priv.at/2006/buttons/votelinks.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_votelinks.png
| |
| | |
| === [http://gmpg.org/xfn/ XFN] ===
| |
| * http://rbach.priv.at/2006/buttons/xfn.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_xfn.png
| |
| | |
| === [http://gmpg.org/xmdp/ XMDP] ===
| |
| * http://rbach.priv.at/2006/buttons/xmdp.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_xmdp.png
| |
| | |
| === [[xoxo-fr|XOXO]] ===
| |
| * http://rbach.priv.at/2006/buttons/xoxo.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_xoxo.png
| |
| | |
| | |
| | |
| === 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. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)
| |
| | |
| [http://creativecommons.org/licenses/by-sa/3.0/us/ Licence]
| |
| [http://alyosha.bendebury.net/microformat-css.zip Zip]
| |
| | |
| | |
| == Boutons pour les formats brouillons ==
| |
| | |
| Ceux-ci peuvent être sujets à modifications si les noms des formats changent quand ils seront publiés.
| |
| | |
| === [[adr-fr|adr]] ===
| |
| * http://rbach.priv.at/2006/buttons/adr.png
| |
| | |
| === [[geo-fr|geo]] ===
| |
| * http://rbach.priv.at/2006/buttons/geo.png
| |
| | |
| === [[hatom-fr|hAtom]] ===
| |
| * http://rbach.priv.at/2006/buttons/hatom.png
| |
| | |
| === [[hresume-fr|hResume]] ===
| |
| * http://rbach.priv.at/2006/buttons/hresume.png
| |
| * http://www.boogdesign.com/images/buttons/microformat_hresume.png
| |
| | |
| === [[hreview-fr|hReview]] ===
| |
| * http://rbach.priv.at/2006/buttons/hreview.png
| |
| | |
| === [[rel-directory-fr|rel-directory]] ===
| |
| * http://rbach.priv.at/2006/buttons/directory.png
| |
| | |
| === [[rel-enclosure-fr|rel-enclosure]] ===
| |
| * http://rbach.priv.at/2006/buttons/enclosure.png
| |
| | |
| === [[rel-home-fr|rel-home]] ===
| |
| * http://rbach.priv.at/2006/buttons/rel-home.png
| |
| * http://rbach.priv.at/2006/buttons/home.png
| |
| | |
| === [[relpayment-research-fr|rel-payment]] ===
| |
| * http://rbach.priv.at/2006/buttons/payment.png
| |
| | |
| === [[robots-exclusion-fr|Robots Exclusion]] ===
| |
| * http://rbach.priv.at/2006/buttons/robots.png
| |
| | |
| === [[xfolk-fr|xFolk]] ===
| |
| * http://rbach.priv.at/2006/buttons/xfolk.png
| |
| | |
| == Faites vos propres boutons ==
| |
| === Style 1 ===
| |
| Exemple : http://www.crowley.nl/images/hcard.png
| |
| | |
| Utilisez le [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] avec les réglages suivants :
| |
| * Outer border: #666666
| |
| * Inner border: #ffffff
| |
| * Bar position: 25 pixels from the left
| |
| * Left box text: >>>
| |
| * Left box background: #000000
| |
| * Left box text colour: #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 colour: #ffffff
| |
| * Right box text start: 3 pixels from the bar
| |
| | |
| === Style 2 ===
| |
| | |
| 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]
| |
| # 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 :
| |
| <pre>convert blank.png
| |
| -fill white
| |
| -font Silkscreen
| |
| -pointsize 8
| |
| +antialias
| |
| -draw "text 28,10 'étiquette-bouton'"
| |
| output.png
| |
| </pre>
| |
| | |
| === Style 3 ===
| |
| | |
| Exemple : http://files.synaesthetic.net/common/images/buttons/hatom.png
| |
| | |
| # Obtenez la police [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
| |
| # Installez [http://www.imagemagick.org/ ImageMagick]
| |
| # Obtenez l'icône blanche (http://files.synaesthetic.net/microformats/button2-blank.png)
| |
| # Saisissez :
| |
| <pre>convert button2-blank.png
| |
| -fill white
| |
| -font Silkscreen
| |
| -pointsize 8
| |
| +antialias
| |
| -draw "text 20,10 'button label'"
| |
| output.png
| |
| </pre>
| |
| | |
| | |
| = Microformats Logos =
| |
| 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
| |
| | |
| <div style="position: relative; top:-46px; left:180px">
| |
| <div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>
| |
| | |
| <div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>
| |
| | |
| <div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>
| |
| | |
| <div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
| |
| <span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
| |
| </div>
| |
| </div>
| |
| | |
| 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
| |
| | |
| | |
| ==Palette==
| |
| | |
| <div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>
| |
| | |
| <div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>
| |
| | |
| <div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>
| |
| | |
| =Wiki boutons=
| |
| Pour utilisation sur ce wiki.
| |
| *{{NewMarker-fr}} - <nowiki>{{NewMarker-fr}}</nowiki>
| |
| *{{SuccessMarker-fr}} - <nowiki>{{SuccessMarker-fr}}</nowiki>
| |
| *{{UpdateMarker-fr}} - <nowiki>{{UpdateMarker-fr}}</nowiki>
| |
| | |
| | |
| = Demandes =
| |
| | |
| * Logos pour tous les microformats
| |
