Microformats Wiki - User contributions [en]

User:ChristopheDucamp

2022-06-26T09:51:19Z

ChristopheDucamp: /* Contact */ Hi. Just updating e-mail + url - h-geo to be studied soon for navigations

<entry-title>Christophe Ducamp</entry-title>

Bonjour. French speaking, non programmer, don't hesitate to call if you visit Paris.

== Contact ==
<ul class="vcard">
<li class="n fn"><span class="given-name">Christophe</span> <span class="additional-name">G.</span> <span class="family-name">Ducamp</span></li>
<li class="url">[https://christopheducamp.com/ home page]</li>
<li class="mail">courriel : christophe AT ducamp.me</li>
<li class="adr">
<span class="street-address">1 rue des Poissonniers</span> - <span class="postal-code">75018</span> <span class="locality">Paris</span>- (<span class="country-name">France</span>)</li>
<li class="tel"><span class="type"><span class="value-title" title="cell">Mobile</span></span> : <span class="value">+33</span> (0) <span class="value">632 039 796</span></li>
</ul>

[http://h2vx.com/vcf/microformats.org/wiki/User:ChristopheDucamp Ajouter à votre Carnet d'Adresses]

{{cc-public-domain-release}}
{{cc-public-domain-release-fr}}

hcard-examples-in-wild

2014-12-10T04:40:33Z

ChristopheDucamp: revert

<entry-title>hCard Examples in the wild</entry-title>
<div style="height:7.5em;text-align:center;font-weight:bold;font-size:larger">
<span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild#examples_by_category|Want hCards]]</span><span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild#new_and_uncategorized_examples|Have hCards]]</span>
</div>

This page is an '''informative''' section of the [[hcard|hCard specification]].

The following sites have published [[hcard|hCards]], and thus are a great place to start for anyone looking for examples "in the wild" for inspiration, or try parsing and indexing.

== new and uncategorized examples ==
'''Have hCard?''' If you have a site with hCard(s), add it to the top of this list. Include at least one URL to a page that includes actual [[hcard|hCard]] markup. Examples without direct links to pages with hCard(s) will be removed or edited to only link to page(s) with hCard. Check back after a few days, to see if anyone has found any problems with the examples supplied. Note that examples may be categorized and moved to the grouped section below.
[http://www.telsgroup.com.de/services/railroad_freightage/ bahnspedition]
You may want to use these buttons on your pages with hCards. See [[buttons#hCard]] for any recent additions.<br/>http://www.davidjanes.com/images/mf_hcard.png   http://www.boogdesign.com/images/buttons/microformat_hcard.png


*[http://www.moveforfree.com/ moveforfree.com] uses schema tag format for contact information.
* [http://residential.samsa.com/contact-us/ Computer Repair Help] uses hCard formatting for contact information on contact us page.
* http://cadmap-utilities.co.uk uses hcard markup on the footer of each webpage
* [http://mikolajczyz.pl/en/ Mikołaj Czyż] uses hCards for contact info for all languages of this psychotherapy practice website.
* [http://www.northstar3c.com/shop/ Northstar Country Candle Co.] has a hidden hCard site wide.
*http://cadmapstudio.co.uk/ used hCard on the footer of each page on a Cad Services Site.
*http://asiabizsetup.net/ used hCard formatting for contact information on contact us page.
* [http://www.okinawan-lyrics.com/ Okinawan-lyrics] uses h-Card schema for author info in h-feed and h-entry.
* [http://rick.cogley.info/ Rick Cogley] uses hCard on his [http://rick.cogley.info/about About] page.
* [http://www.printsome.com/ Printsome] uses hCard schema for [http://www.printsome.com/about About us].
* [http://www.creditcardprocessingspace.com/best-credit-card-processor/ CCPS] uses hCard schema for contact information.
* [https://www.qoolife.com/ Qoolife] uses hCard formatting for public profiles of doctors (ex: [https://www.qoolife.com/en/users/jesus-garrido-garcia Dr Garrido]) and their online practices (ex: [https://www.qoolife.com/en/s/el-puericultor Puericultor Clinic]).
* [http://www.strikespots.com/bowling-centers/ Strike Spots] uses hCard formatting for public profiles of bowling centers throughout North America.
* [http://www.leppers.nl/ Leppers Zonwering Veenendaal] uses an hCard for contact information on the website.
* [http://www.chrislongley.co.uk/contact-chris-longley-digital-media.html Chris Longley Digital Media] uses hCard formatting for business address information on Contacts page
* [http://www.bfdlawyers.com BFD Lawyers] uses hCard formatting for business address information.
* [http://www.topbanklocations.com Top bank locations in USA] uses hCard for on banks list in all US states and bank profile pages.
* [http://en.datocapital.com/ Dato Capital] uses hCard for millions of public profiles of company executives, Example: [http://en.datocapital.com/es/executives/Eduardo-Amo-Garcia.html Executive profile]

* [http://www.iprocess.firm.in/ iProcess] uses hCard for binding its legal location derived from founder specifically, though its an online only business firm.
* [http://www.likeminders.co.uk/contact-register/contact-us/ Like Minders Babysitting Agency] uses hCard markup on their contact page. However, it has some problems:
** bad: invisible duplicate data using style="display:none"
*** update 2012-09-01: only the country-name is display:none now.
** bad: empty "fn" (should be on same element as "org")
*** still a problem 2012-09-01.
** suboptimal: email could be marked up but isn't
*** fixed 2012-09-01!
** suboptimal: URL could be marked up but isn't
*** fixed 2012-09-01!
Thank you for the feedback on problems - improvements made - hope better now!
** 2012-09-01: There are some worse problems now, e.g. the <a class="url fn org"> element has no contents, so there is no "fn" or "org"! This may be due to an accidental </p>. Better to simply update the div class="org" to div class="fn org", and make the a href class="url" only.
*** 2012-09-10
Thank you again - the second round of improvements have been made - hope better take 2!

* [http://www.historichotels.org Historic Hotels of America] uses hCard for location pages for each property. Example: [http://www.historichotels.org/hotels-resorts/the-wigwam/location.php Historic Hotels in Litchfield Park, Arizona - The Wigwam]
* [http://www.boxuk.com/ Box UK] uses hCard for location pages for each of it's office locations. Example: [http://www.boxuk.com/contact-us/our-offices/ Office Locations]
* [http://www.oxagile.com/ Oxagile] uses hCard for its location pages, and each location is marked with hCard. See here: [http://www.oxagile.com/contacts/ Office Locations]
* [http://www.ehomeservices.com.sg E Home Services] uses hCard on Contact us page [http://www.ehomeservices.com.sg/contact.html E home Services Contact] & Article page [http://www.ehomeservices.com.sg/articles.html E home Services Blog]
* [http://www.estrategiadelcontenido.com EstrategiadelContenido.com] uses hCard and Microdata markup in the contact section.
* [http://www.agileinfoways.com/ AgileInfoways] uses hCard for its location pages, and each location is marked with hCard. See here: [http://www.agileinfoways.com/contact-us/ Office Locations]
* [http://www.aquaviaspa.com AquaviaSpa.com] uses hCard and Microdata markup in the contact section and the retailers and SAT list.
* [http://www.ainstainer.com/ Ainstainer] uses hCard for office locations page, and each location is marked with hCard. See here: [http://www.ainstainer.com/who-we-are/ukraine-it-outsourcing-locations Locations]
* http://www.cadmap.co.uk/ Cadmap Land & Building Surveyors uses hCard markup on the footer of each page.
* [http://expertdent.ca/en ExpertDent dental clinics] uses hCard markup in the header as well as the contact section for its three dental care clinics].
* [http://www.us-inverters.com/ US-Inverters.com] uses hCard, geo, and hProduct markup on home page, [http://www.us-inverters.com/contact/ contact page] and [http://www.us-inverters.com/where-to-buy/china.php distributor pages], and on [http://www.us-inverters.com/inverter-chargers/ms4124e.php product pages].
* [http://www.henryandjames.co.uk/contact/ Henry & James Estate Agents] use hCard markup on their contact page.
* [http://wpoosc.com.au/ West Pymble Out of School Care] uses hCard markup for their physical address in the sidebar.
* [http://www.your-move.co.uk/ YOUR MOVE estate agents]uses hCard markup for branch addresses. Example: [http://www.your-move.co.uk/estate-agent/york.html York Branch Page]
* [http://www.akama.com Akama (business listings)] uses hCard on companies profiles page [http://www.akama.com/company/Ennis_Business_Forms_Inc_a8d1a35818.html Sample company profile page]
* [http://telcoavi.es Telco Audio Vídeo e Ilumianción] uses hCards on the contact page. Example:[http://telcoavi.es/contacto.php Contacto]
* [http://nicolasbouliane.com Nicolas Bouliane - Conception de sites internet] uses hCards on the contact page as well as in the header and footer.
* [http://www.lslps.co.uk/ LSL Property Services]uses hCard markup for details of Press Contacts. Example: [http://www.lslps.co.uk/news Property News Page]
* [http://www.breaflorist.net/pages/Florist-La-Habra/display La Habra Florist] - Uses hCard markup in their la habra florsit page below.
* [http://iprefer.com/ I Prefer Guest Benefit Program] uses hCard for each property page. Example: [http://iprefer.com/luxury-hotel/Campinas/Royal-Palm-Tower/ Royal Palm Tower, Design Hotels in Campinas]
* [http://www.binvisions.com/ CSS3 and HTML5 Blog] - uses hCard to get vCard of users who make comments on blog posts. Example: [http://www.binvisions.com/articles/seo-using-css-text-indent-or-images-for-logos/ CSS Text-Indent or Images for Logos in SEO?]
* [http://collectiverecyclers.com Collective Recyclers] - Uses hCard for contact details.
* [http://www.stylebar.de/ stylebar websolutions] Uses an hCard for the contact information on the right site in the website.
* [http://southpawed.com/ Steve Holland] uses hCard for his contact details.
* [http://sterlinghotels.com Sterling Hotels] uses hCard for each property page on their website, e.g. [http://sterlinghotels.com/smart-hotel/Hong-Kong/The-Fleming/ The Fleming, Smart Hotels in Hong Kong]
* [http://daniele.gobbetti.name daniele.gobbetti.name] uses hCard for his own profile. The template is released under CC-BY-SA and available on [https://github.com/danielegobbetti/about-me github]
* [http://www.sabzoo.de SABZOO.de] uses hCard for the about us page. Here is the direct link: [http://www.sabzoo.de/ueber-sabzoo/impressum.html About us]
* [http://www.coinspcgs.com Coins PCGS] uses hCard for the about us page. Example: [http://www.coinspcgs.com/p/about.html About PCGS Coins]
* [http://summithotels.com Summit Hotels and Resorts] uses hCard for each property page on the website. Example: [http://summithotels.com/luxury-hotel/Honolulu/Waikiki-Parc-Hotel/ Waikiki Parc Hotel, Luxury Hotels in Honolulu]
* [http://www.gauntsproperty.co.uk/ Gaunts Property Leeds] implements hCard in each of their business park locations contact pages
* [https://plus.google.com/ Google+] uses hCard for each user profile and company page. Example: [https://plus.google.com/112111196451586545452/ ReadWriteWeb profile page]
* [http://www.coatncast.de/ Coat'n Cast] has hCard formatted address information in the page markup, mainly to provide data to geolocation services.
* [http://fiestapartyjumpers.com Party Rentals Simi Valley] is a party rental business using hCard and Microdata markup in footer section and soon will be on hompage.
* [http://www.lomboktrans.com/daftar-harga/ Harga Sewa Mobil Lombok] is a company car rental using hCard and Microdata markup in about us and contact us.
* [http://turfwholesalersusa.com Artificial Turf Los Angeles] a los angeles turf wholesaler using hcard markup in the footer area.
* [http://preferredboutique.com/ Preferred Boutique] uses hCard for each property page on their website, e.g. [http://preferredboutique.com/luxury-hotel/Atlanta/TWELVE-Atlantic-Station/ TWELVE Atlantic Station, Luxury Boutique Hotels in Atlanta.]
* [http://www.rinjanitrans.com/sewa-bus-pariwisata-di-lombok.htm Bus rental company in Lombok] is a bus rental company using hCard and Microdata markup in price list page and about us.
* [http://www.last.fm Last.fm] uses hCard for event pages and user profile pages (however user profile hCard information is very incomplete and sub-optimal) e.g. [http://www.last.fm/event/1448900+She+-+Him+at+Millennium+Park+on+7+June+2010 She & Him at Millennium Park (Chicago) on 7 Jun 2010 – Last.fm]
* [http://www.auntiecleaner.com.sg Auntie Cleaner] uses hCard on Contact us page [http://www.auntiecleaner.com.sg/contact.html Auntie Cleaner Contact] & Article page [http://www.auntiecleaner.com.sg/articles.html Auntie Cleaner Blog]
* [http://www.msichicago.org/ The Museum of Science and Industry in Chicago] uses hCard for their address in the "museum location" area on each page.
* [http://www.brewcamp.com/ Brew Camp | Chicago's Local Home Brew Shop] uses hCard for the address under the map on the main page.
* [http://www.larsbeck.info/ larsbeck.info] uses hCard for personal contact information.
* [http://www.linkedin.com LinkedIn] uses hCard for each user profile page.
* [http://www.kitchenhomeware.co.uk Kitchenhomeware UK] uses hCard markup for their contact page
* [http://www.absolutesolutions.com.sg @bsolute Solutions] uses hCard on Contact us page [http://www.absolutesolutions.com.sg/contact.htm @bsolute Solutions Pte Ltd.]
* [http://www.tripadvisor.com TripAdvisor] uses hCard on property pages, however it appears that they have lumped in locality, region, and postal-code into locality. Example: [http://microformatique.com/optimus/?uri=http://www.tripadvisor.com/Hotel_Review-g42763-d90229-Reviews-Detroit_Marriott_Troy-Troy_Michigan.html Detroit Marriott Troy]
* [http://www.megatravel.com.mx/ Mega Travel] uses an hcard for the contact information in the web site footer [http://www.megatravel.com.mx/ Mega Travel].
* [http://www.thebasketcasedeli.com The Basket Case Deli] uses hCard for organizational addresses as well as employee contact information e.g. [http://thebasketcasedeli.com/about.php About The Basket Case Deli].
* [http://www.thejokes.net TheJokes.Network] uses hCard markup on user profile pages e.g. [http://thejokes.net/profile.php?uid=3 User Profile for Sid Parker]
* [http://www.therecipedepository.com The Recipe Depository] uses hCard markup on user profile pages e.g. [http://www.therecipedepository.com/user/jay User Profile for Jay Allen].
* [http://www.web-id.nl/ Web-id. Webdesign, SEO and Software] Uses an hCard for the contact information.
* [http://advanced-simple.de/ Advanced Simple] uses an hcard for the contact information in the page footer of their website.
* [http://profispan.de/galerie/ Profi Span GmbH - Holz in aller Form] uses hcard for the contact information box on the right side of nearly every page.
* [http://hochzeiten-partys-feten.de/ Hochzeiten Partys & Feten] uses hcard markup for the contact information box on every page.
* [http://www.partyrentalsplace.com/ Party Rental Place] uses hCard markup on the testimonials page of their website.
* [http://www.getlocalmaps.com/ Google Map Marketing] is using hCard on the contact page of their website.
* [http://www.internetmarketingnuke.com/internet-marketing-tools/bookmarking-demon-review-1/ Bookmarking demon review]. Uses an hCard on their contact page.
* [http://www.themexicanjewelry.com/index.php?route=information/information&information_id=14 The Mexican Jewlry]. Uses an hCard for the contact information with OpenCart.
* [http://www.garmentprintiIng.co.uk/contact-us.php Garment Printing]. Uses an hCard for the contact information.
* [http://www.cabs.co.za/ CABS Car hire]. Uses an hCard for the contact information on page footers.
* [http://www.mlgphotography.co.za/ MLG Wedding Photography]. Uses an hCard for the contact information.
* [http://www.e-kyttaritida.gr/ Κυτταρίτιδα]. E-kyttaritida.gr uses an hCard on their contact page.
* [http://www.tierarztpraxis-kellerberg.de/ Tierarztpraxis Kellerberg Steingaden]. A veterinary practice that uses hCard markup to provide contact information.
* [http://www.bastajulborden.se/julbord-p%C3%A5-junibacken.html]. Uses an hCard for the contact information.
* [http://www.bastajulborden.se/.html]. Uses an hCard for the contact information.
* [https://www.redflymarketing.com/contact-us/ Redfly Ireland]. Uses an hCard for the contact information.
* [http://www.designliga.com Designliga] uses hCard markup with company contact information on its Contact and Imprint pages.
* [http://allinsuranceinfo.org/agents/alabama/montgomery.html AllInsuranceInfo.org] uses hCard markup to format insurance agents directory.
* [http://www.seveermedia.com/ Seveer Media] uses hCard markup and allow for vCard download on their contact page.
* [http://london.alleycats.co London.Alleycats.co], by Alleycats.co, uses hCard to format all their fixed-gear directory listings.
* [http://www.spaachat.com Spaachat.com], by Aquavia Spa, uses hCard and Microdata markup in the contact section and the retailers list.
* [http://www.waketoolz.de/info/impressum.html Waketoolz] uses hCard markup on their contact page.

* [http://tigermechanical.net/ Tiger Mechanical] uses hCard markukp throughout the website, inside the copyright area, [http://tigermechanical.net/ appliance repair gilbert] and in the sub domain [http://paradise-valley-appliance-repair.tigermechanical.net/ appliance repair paradise valley].
* [http://www.thedentureclinic.co.uk/ The Denture & Implant Clinic] uses hCard markup and allow for vCard download on their contact page.
* [http://ReallyGoodEnergy.com/ RGE] uses hCard markup and allows for vCard download on their page footers.
* [http://pHElixir.com/ pH Elixir] uses hCard markup and allows for vCard download on their page footers.
* [http://www.air-bourne.com/ Airbourne AC and Heating] uses hCard in footer of the air conditioning website. Example: [http://www.air-bourne.com/ Houston Air Conditioning]
* [http://theworkoutwarehouse.net/ Gym Riverview MI] uses hCard inside the footer of the workout fitness website. Example: [http://theworkoutwarehouse.net/ Weight Training Riverview MI]
* [http://www.carleasinguk.com/ www.carleasinguk.com] uses hCard markup and allow for vCard download on their page footers.
* [http://www.naples-fl-real-estate.com Naples Florida Real Estate] uses hCard markup and allow for vCard download on their contact page.
* [http://www.technicsgroup.com/ Technics Group] uses hCard markup and allow for vCard download on their page footers.
* [http://www.manageathome.co.uk/ Manage At Home] uses hCard markup and allow for vCard download on their contact page.
* [http://www.cleverelectric.com/ San Jose Electrician] uses hCard electrian footer page of their website. to see an example in action visit [http://www.cleverelectric.com/san-jose-electrical-service.html/ San Jose Electrical Contractor]
* [http://www.skin-care-health.org/spots-on-skin.html Skin Care & Health] uses hCard markup on their contact page.
* [http://www.bed-bugs-handbook.com/bed-bugs.html Bed Bugs Handbook] uses hCard markup on their contact page.
* [http://www.appliancerepairmedic.com/ Appliance Repair Bergen County] implements hCard in the footer area of their appliance repair site.
* [http://www.adalberto.co.uk/ Adalberto Estate Agents] implements hCard markup on their prices pages.
* [http://www.synergydental.org.uk/ Synergy Dental Group] implements hCard markup on their dental surgeries contact pages.
* [http://www.cahilldentalcare.co.uk/ Cahill Dental Care] uses hCard markup on their address in the footer which can be downloaded as a vCard.
* [http://www.returnondigital.com/ Return On Digital] uses hCard markup on their site wide footer addresses and on their [http://www.returnondigital.com/about-us/dave-ashworth.php staff pages] - these can also be downloaded as vCards.
* [http://www.arouatek.com/eng/ Aroua Range hoods] uses hCard markup on their [http://www.arouatek.com/eng/contact.php Contact] page.
* [http://www.gembuild.co.uk/contact.htm Gem Build UK ] uses an hCard on their contact page.
* [http://www.1host.gr/web-hosting/ web hosting] uses hCard markup with company contact information on its Contact and Imprint pages.
* [http://nwnasalestraining.com/contact/ Noel Walsh] - uses hCard on the contact page as well as a downloadable vCard.
* [http://www.formundcode.de/ Form & Code] - uses hCard with company contact details in page header.
* [http://www.dptraining.co.uk/contact/ DP Training] - uses hCard with H2VX's bookmarklet to allow users to download the details as a vCard.
* [http://starthilfeberlin.de/ Starthilfe Berlin] - uses hCard (and geo, XFN, rel-license, rel-profile) in (Joomla HTML5) '<#footer role="contentinfo" <footer #footertrademark <address' in all pages.
* [http://trade-service.eu/kontakt/ Trade-Service] - uses hCard in (WP HTML5) '<.address role="contentinfo" <address' in all pages, and extended hCard in the [http://trade-service.eu/kontakt/ contact page].
* [http://lanceguyatt.com/ lanceguyatt.com] - uses hCard as the index page.
* [http://www.easi-services.fr easi services] utilise hCard dans sa page de [http://www.easi-services.fr/contact contact].
* [http://www.umovefree.com/ UMoveFree] - Uses hCard for rental property address. Example: [http://www.umovefree.com/Apartment/cirque-apartments-dallas-tx/ Cirque Apartments Dallas].
* [http://www.newtosandiego.com/ NewToSanDiego] - Uses hCard for organization and business address. Example: [http://www.newtosandiego.com/Ocean-Beach-People's-Organic-Foods-Co-op/ Ocean Beach People's Organic Foods Co op].
* [http://www.northwooduk.com/ Northwood Estate Agents] use hCard on their branch landing pages, here is [http://www.northwooduk.com/letting-agents/edinburgh an example].
* [http://www.signsbannerswraps-houston.com/ Car Wraps Houston] uses hCard on the footer section at the bottom of page see [http://www.signsbannerswraps-houston.com/vehicle-graphics-and-car-wraps-houston.html vehicle wraps houston] page.
* [http://www.elevatelocal.co.uk Elevatelocal] uses hCard on their [http://www.elevatelocal.co.uk/contact Contact Us] page.
* [http://lucumalabs.com Lúcuma labs] uses hCard in the index page.
* [http://railsjobs.co.uk Ruby on Rails Jobs UK] uses hCard in the footer.
* [http://www.whatcomweb.com/ Whatcom Web SEO in Bellingham, Washington ] uses hCards on the contact page.
* [http://www.ufirstgroup.com/ UFirst Group] uses an hCards in the footer of every page
* [http://www.brodwax.com/ Brodwax Lighting] uses an hCard on their [http://www.brodwax.com/fluorescent-lighting-fixtures.html fluorescent light fixtures] page.
* [http://tripedge.co.uk Tripedge] uses hCard in the footer
* [http://www.appliancerepairbergencountynj.com/ Appliance Repair Bergen County NJ] uses hCard code in the footer of the appliance repair site.
* [http://www.morgenson.com/ Morgenson Realty] uses hCard on their [http://www.morgenson.com/cameron-heights-apartments.php Apartment Listing] pages.
* [http://www.bientek.com/ BienTek] uses hCard on their [http://www.bientek.com/about-us/ About page].
* [http://www.yourtraces.com YourTraces] uses hCard on their profiles [http://www.yourtraces.com/biography/1120.html example].
* [http://www.findwell.com findwell Real Estate] uses hCard on their [http://www.findwell.com/contact Contact Us] page.
* [http://droidvsiphone.org Droid vs iPhone] uses hCard in the footer
* [http://howdoyouknowifyouhavebedbugs.com HowDoYouKnowIfYouHaveBedBugs.com] uses hCard in the footer
* [http://www.schiessle.org schiessle.org] uses hCard at the index/contact page
* [http://www.deadbedbugs.co.uk/ deadbedbugs] deadbedbugs use hCard on their [http://www.deadbedbugs.co.uk/contact.html contact page].
* [http://johanramon.fr/ Johan Ramon] uses hCard on his resume.
* [http://www.saveontapestries.com/ Wall Art Shop] uses hCards on all contact pages, including their [http://www.saveontapestries.com/blog/ Wall Art Blog] and [http://www.saveontapestries.com/message.php Contact Us] Page
* [http://www.placedash.com/ placedash] uses hCard on all place pages, such as [http://accountants.placedash.com/b/4591 Steven R Aron CPA] and [http://taxconsultants.placedash.com/b/21916885 KPMG]
* [http://www.slimmeria.com/bookings-contact Slimmeria Detox Retreat ] in the UK uses an hCard on the Bookings and Contact page.
* [http://www.airbourneairconditioning.com/houston-ac-repair.html Houston AC Repair ] in Houston uses an hCard on the footer of the air conditioning website..
* [http://www.iluminacionmidava.com/ Iluminación Midava, SL ] in Spain uses an hCard on their pages.
* [http://shop.artgpa.com.ua/contacts.html ArtGPA SHOP in Ukraine ] uses an hCard on their contact page.
* [http://clothesonline.info/ ClothesOnline] uses hCard to identify clothing brands, shops and users. Example: [http://clothesonline.info/shops/mark-spencer Mark & Spencer].
* [http://www.beltmann.com Beltmann Relocation Group] uses an hCard on their [http://www.beltmann.com/atlanta-movers.aspx Atlanta Movers] page.
* [http://www.therapistinlondon.com/ Therapist in London ] Delma Walsh uses an hCards in the footer of every page.
* [http://www.novelwebdesigns.com/ Web Design & SEO] NWD uses an hCard on their contact page.
* [http://www.webscatalunya.com/ Webs Catalunya ] uses an hCards in the footer of every page.
* [http://rinklinks.ca/ RinkLinks.ca: A Comprehensive Rinks and Arenas Directory for North America] uses an hCard for every listing in their directory.
* [http://immotek.fr/ Immotek general contractor in Toulouse, France] uses hCard in the footer of every page (plus hAtom on entries).
* [http://www.aoinstitute.com/ Advanced Orthopaedic Institute ] uses an hCards on the footer of every page.
* [http://www.orchard-barn.co.uk/contact.htm Orchard House B&B ] uses an hCard on their contact page.
* [http://www.awsltd.co.uk/ AWS Leeds, Yorkshire] implements hCard markup on their contact data.
* [http://www.medivisas.com/contact.asp Medi Visas UK ] uses an hCard on their contact page.
* [http://www.premierlogos.co.uk/page/contact Premier Logo T Shirts ] uses hCard on the contact page.
* [http://eastsideentrepreneurs.ning.com/profile/MrsClean/ Mrs Clean House Cleaning ] uses hCards in the profile page.
* [http://www.thesanfordhouse.com/ The Sanford House Bed & Breakfast ] uses hCards in the footer of every page.
* [http://www.imap.cat/ Imap Internet Marketing] uses hCards in the footer of every page.
* [http://www.haraldjoergens.com/Copyright.html Harald Joergens Photography ] uses hCards on the page and in the footer of every page (see blog post [http://www.haraldjoergens.com/blog "From website to address book in one click"]).
* [http://www.ethoseo.com/ Ethoseo Internet Marketing in Washington State ] uses hCards in the footer of every page.
* [http://www.popalockofjacksonville.com/ Pop-A-Lock Locksmith Jacksonville] is using hCard in the footer on all the pages on their website and the hReview code on their testimonials page [http://www.popalockofjacksonville.com/jacksonville-reliable-safe-locksmith.html/ Pop-A-Lock Locksmith Jacksonville Testimonials]
* [http://Tutiendadeinformatica.com/ oferta de portatiles] - uses hCard as the index page.

* [http://www.harleytherapy.co.uk Harley Therapy, Counselling London] uses an hCard (Organisation) on the home page as well as an hcard for an individual practitioner on the [http://www.harleytherapy.co.uk/psychiatrists-london.htm Psychiatrist] page.
* [http://www.mwmachineshop.com/ M & W Machine Shop] is using hCard in the footer on the entire site.
* [http://carmela.co.uk/ Carmela Make-up] is using hCard on most pages of her site, including the [http://carmela.co.uk/wedding-make-up.htm wedding make-up] page.
* [http://www.findaporsche.com/ Find a Porsche] is using hCard on their [http://www.findaporsche.com/?page_id=17 Contact Us] page.
* [http://www.atrendyhome.com/ A Trendy Home - Home Improvement Store] is using hCard on their [http://www.atrendyhome.com/contactus.html Contact Us] page.
* [http://tedswoodworkingplan.com/ Teds Woodworking] uses hcard for their site information.
* [http://www.mrscleanusa.com/ Mrs. Clean's Cleaning Service] is using hCard on their [http://www.mrscleanusa.com/en/cleaning-services/mrs-clean/about-us.html About Us] page.
* [http://www.merrittsforhair.co.uk/ Merritts for Hair] is using hCard on their [http://www.merrittsforhair.co.uk/contacts/ Contact Us] page.
* [http://www.alwaysonmessage.com/contact/get-in-touch.aspx Always on Message] is using hCard on their Contact Us page and are interested to see/hear how hCard's can be used in Smartphone Apps,
* [http://sroe.home.cern.ch/sroe/sroe/Welcome.html Shaun Roe] is using hCard on his work page at CERN,
* [http://www.localdatabase.com/ Local Database] uses hCard on all category and business profile pages, [http://www.localdatabase.com/texas/Houston/Veterinarians/ Houston Vets]
* [http://www.pinbud.ca/ www.PinBud.ca and www.PinBud.com (a search and get quotes website)] uses hCard on all the listing pages, example: [http://www.pinbud.ca/list-services/475-Personal-trainers-in-Calgary,%20AB Personal trainers in Calgary]
* [http://www.quippd.com/popular quippd] uses hCard on profile pages and story listings.
* [http://www.davidrivers.name David Rivers] uses hCard markup on his [http://www.davidrivers.name/contact Contact David Rivers] page
* [http://www.pabloestrada.us/pe/pablo.estrada.html Pablo Estrada] uses hcard on his resume page.
* [http://www.nieruchomosci-czubak.pl/ AJ Czubak Nieruchomości] uses hcard markup in the fixed contact info section on the left and within the [http://www.nieruchomosci-czubak.pl/kontakt.html contact subpage]
* [http://www.metalgigs.de Metalgigs.de] uses hcard for the profile pages at metalgigs.de/userpage/username, see [http://www.metalgigs.de/userpage/Testuser]
* [http://www.ankeboelens.nl/ Anke Boelens Interieurvormgeving] uses hcard markup in page footer
* [http://ragtagntextile.org.uk Rag Tag 'n' Textile] - Mental health charity in Skye and Lochalsh, the Highlands of Scotland - uses hCards for locations of head office and craft shops]
* [http://atzkey.org/ Denis Bakunovitch] — IT professional — has nicely styled hCard
* [http://www.olaru.ca/ Maria Olaru - lawyer / avocat - Montreal Law Firm] uses hCard for the law office.
* [http://www.epinux.co.uk/contact Mike Shutlar at Epinux] uses hCard markup on his contact page.
* [http://nzia.org/practitioner-directory/ New Zealand Institute of Acupuncture] uses hCards to display member's contact details.
* [http://www.mamscatering.nl/ MAMS Catering] uses the drupal hCard module for contact information on the website.
* [http://www.ialphan.com Alphan Gunaydin] uses hCard markup throughout the home page (index).
* [http://www.phytodoc.de/therapeuten-suche/ PhytoDoc's database for therapists in Germany] uses hCards for contact data on the detail pages of every therapist. [http://www.phytodoc.de/therapeut/wiesloch/berthold-musselmann/ Examplary therapist's page].
* [http://www.charleschurch.com Charles Church House Builder] uses hCard for property development addresses and geo latitude and longitude. See [http://www.charleschurch.com/carmarthenshire_ammanford/pen-y-bryn-1067 Homes for sale in Ammanford] page for embedded hcard on property development pages.
* [http://www.canisphouse.com Canisp House Bed and Breakfast]Establishment uses hcard to mark up business address. Validates with Google Rich Snippets.
* [http://www.jondon.com/stores/index.htm Local Stores Locations Page], the store details on store pages are Hcard.
* [http://www.mrpainter.com.sg Mr Painter] uses hCard on Contact us page [http://www.mrpainter.com.sg/contact.html Mr Painter Contact] & Article page [http://www.mrpainter.com.sg/articles.html Mr Painter Blog]
* [http://www.sucklings.co.nz/contact-us Contact page of Sucklings Shoes Store], the store details are an Hcard.
* [http://www.a3architekten.com/ Contact details of a3architekten]. A combination of two hCards looking like one.
* [http://www.imap.cat]. A combination of two hCards looking like one.
* [http://www.sigmacom.nl/ Corporate website of Sigmacom]. hCards were implemented in the footer
* [http://www.fpc.wa.gov.au Forest Products Commission] hCards to markup addresses & contact info for:
** all its offices and media contacts: [http://www.fpc.wa.gov.au/content_migration/about_us/contacting_us.aspx office locations]
** search results for suppliers of timber within Western Australia: [http://www.fpc.wa.gov.au/BuyTimber/Search?Species=&Region= find a timber supplier]
* [http://www.hirners.com Hirners Hotel Guide] uses hCards to markup addresses and contact info of every property, including geo coordinates. Example: [http://www.hirners.com/properties/4-atlanta-hotel-in-vienna-austria Hotel Atlanta in Vienna, Austria]
* [http://www.cartuse-imprimante.ro/ Cartuse Imprimante], printers and printer cartridges supplier, uses an hCard on home page and contact page of the website.
* [http://www.seminee-bellfires.ro/ Seminee Bellfires], interior fireplaces design company uses an hCard on every page of the website.
* [http://www.eurodata.com.ro/ Eurodata Serv], IT consulting and service company uses an hCard on every page of the website.
* [http://www.chipwreck.de/blog/contact/ Mario Fischer] uses a hCard with his contact information
* [http://joebergantine.com/contact Joe Bergantine] has marked up his contact information with hCard and XFN
* [http://www.nonleaguegrounds.com nonleaguegrounds.com], a database of English non-league football stadiums, uses hCards on every specific club detail page. Example: [http://www.nonleaguegrounds.com/gb/london/afc-wimbledon AFC Wimbledon]
* [http://thetruthaboutabs1.com/ Thetruthaboutabs] uses hcard for their site information.
* [http://www.simourix.nl/ Simourix Hosting] uses an hCard for contact information on the website.
* [http://www.aquastop-vochtwering.nl/ Aquastop vochtwering] uses an hCard on every page of the website.
* [http://www.kennysaunders.com/ Kenny Saunders] uses an hCard on for contact information on this business card website.
* [http://thesilverfishbug.com/ Silverfish Bug] uses hcard for their site information.
* [http://annuaire.leperon.fr/ L’Annuaire du Cheval] is a French directory of equestrian professionals. We have just added hCards to all the client pages. Sample one here [http://annuaire.leperon.fr/client/0b1s/tarder-camille-et-frederic Tarder]. We also added an 'add to your address book' button but had to take it out again as some Windows machines choked on the accents, not recognising the UTF-8.
*[http://www.cheapholidays.com/ Cheap Holidays] uses an hCard on each page footer.
*[http://www.flightline.co.uk/ Flightline] uses an hCard on each page footer.
*[http://www.affordablestorage.net.nz/contactus.html Affordable Storage] Uses hCard for contact information.
* [http://www.norfolkblackhistorymonth.org.uk/contact.html Norfolk Black History Month] - Uses hCard on the Contact page and throughout the site, providing contact information for event locations, organisers and partner organisations.
* [http://www.veganusofa.com/ VeganUSofA] - Uses hCard for organization and business address. Example: [http://www.veganusofa.com/index.php?listing=4 The All Vegan Store].
*[http://adrianindo.blogspot.com ADRIAN'S BLOG] have included hCard to introduce myself more closely with the visitors of my blog. the hCard has been listed as a name, blog url and organizations. This hCard you can see on the lower right sidebar of my blog layout.
* [http://www.canadianpokerexpo.com The Canadian Poker Expo (Toronto)], a Poker Lifestyle Expo focusing specifically on the Toronto market, is using hCard for [http://www.canadianpokerexpo.com/Contact-Us/Contact-Form their contact page] as part of their efforts to increase the site's local relavance.
* [http://www.semineeas.ro Seminee As], a Romanian fireplace manufacturer, uses hCard for [http://www.semineeas.ro/contact/ contact info] with optional vCard download.
*[http://www.gastrohep.com/aboutus.asp GastroHep.com] About Us page uses an hCard for the contact address.
*[http://wedding-slideshows.net/ Wedding Slideshows] uses hCard for business address and contact details.
*[http://leemannphotography.ca/?p=contact Lee Mann Photography] Uses an hCard on the main Contact page as well as the blog.Ideally it will soon be on the footer of every single page.
*[http://www.kimburgess.info Kim Burgess] Minimalist info website with hCard markup positioned throughout.
*[http://www.plumbset.co.uk/ContactUs.asp PlumbSet UK Ltd] Uses hCard for the contact address, including multiple street-address entries.
*[http://www.manuhealth.com/products/manuka-soap-75gm Manuhealth Natural Remedies] Uses hCard for the return address on product pages.
*[http://www.farmaciasarria.com/esp/mapa.php Farmàcia Sarrià - Farmàcia Finestres Capdevila] uses an hCard for his contact information.
*[http://www.naturesbestshot.com Nature's Best Shot Photography] - uses an hcard on the contact page
*[http://www.noomii.com/life-coach Noomii.com Coach Directory] - each professional life coach in the directory is an hcard
*[http://www.ethical-junction.org/member/org-2012.html Ethical Junction CIC - Profile page] We use hCard for every organisation on their profile page
*[http://www.bowtietv.com Bow Tie Television] Uses hCard for contact information on every page and in the contacts section.
*[http://www.tauruslogistics.co.nz/about/contact Taurus Logistics] Uses hCard for contact information.
*[http://www.professdiamond.com/ professdiamond] encodes Thai as UTF8 in an inline hCard at the bottom of every page.
*[http://avonvalleylocalguide.iinet.net.au/ Avon Valley Local Guide] uses hCard for contact information of advertisers.
*[http://www.arizonafirstresponse.com/ Arizona First Response] uses an hCard on each page footer.
*[http://dillingham.me.uk/ Iain Dillingham] uses an hCard on each page footer, and has a styled example (with the microformats logo) on his [http://dillingham.me.uk/contact.html contact page].
*[http://www.pixeflips.com/ Pixelflips Web & Interface Design] hCard is used in the footer of all pages for easy access to contact information.
*[http://www.herminesperr.at/ Hermine Sperr, Qualified Practitionier of the Grinberg Method® in Wien/Austria] A hcard is used for contact information on every page on her website.
* [http://www.ivycat.com/ IvyCat Website Services] - Web design & hosting firm uses hCard for business contact info. Example: [http://www.ivycat.com/contact/ Contact Us].
* [http://www.modeltrainswithlarry.com/ ModelTrainsWithLarry] - Uses hCard for organization and business address. Example: [http://www.modeltrainswithlarry.com/index.php?listing=502 Choo Choo Barn].
* [http://www.gardeningwithlarry.com/ GardeningWithLarry] - Uses hCard for organization and business address. Example: [http://www.gardeningwithlarry.com/index.php?listing=2681 United States Botanic Garden].
* [http://abyrvalg.com/ Abyrvalg] - russian city community. Uses hCard to display local businesses address. Example: [http://moscow.abyrvalg.com/biz/faq-cafe FAQ cafe in Moscow].
* [http://www.jdclark.org/v1 Jordan Clark], from the Swansea area of Wales in the United Kingdom, uses [http://www.jdclark.org/card hcard for contact information].
* [http://whichtwitterapp.com/ WhichTwitterApp] provides [http://whichtwitterapp.com/reviews/iphone/tweetie reviews of twitter apps] using hCard, hReview, rel-tag and rel-home.
* [http://www.robinleysen.be/Robin.html Robin Leysen] has a hCard on a separate page. Tried to be as complete as possible. hCard validated with Optimus.
* [http://www.jay-photographics.de/ Jay Photographics] Photographer from Stuttgart, Germany. The hcard format is used on all pages for contact information.
* [http://www.uniquesite.co.uk/ UNIQUEsite] Website designer based in Brighton, UK. Uses the hcard format for contact information.
* [http://www.slideshare.net/ SlideShare] uses hcard to identify its users. see [http://hcard.geekhood.net/?url=http%3A%2F%2Fwww.slideshare.net%2Fkcmani#result Validated hcard] and [http://www.slideshare.net/kcmani Mani's SlideShare profile]
* [http://chrisruppel.com Chris Ruppel], a web developer in Dallas, TX, uses an hcard for contact information site-wide (as well as XFN)
* [http://greenspiritgardeners.com/ Green Spirit Gardeners] uses the hCard format throughout the site, including on the portfolio page for [http://greenspiritgardeners.com/portfolio/ commercial clients] and the [http://greenspiritgardeners.com/contact/ contact] page.
* [http://www.dorettebos.nl/ Dorette Bos Coaching & Training] uses hcard microformat on the [http://www.dorettebos.nl/contact.php contactpage]
* [http://volunteers.st/ Steffi & the volunteers] is an Austrian band and uses hcards for [http://volunteers.st/ band-contact in the footer] and on the page of the [http://volunteers.st/crew.html crew]
* Turkish business directory website [http://www.firmasec.com/ firmasec.com] implements valid hCard and hReview-Aggregate for companies, contact information with geo tags and user comments. Example: [http://www.firmasec.com/firma/mmfzz-caprice-palace-hotel-didim/ Caprice palace hotel profile page]
* [http://www.textundkonzept.at Bernhard Ulrich] an Austrian copywriter uses the hcard format [http://www.textundkonzept.at on all pages of his website] for his contact information
* [http://www.powerbrand.at/contact.html POWERBRAND] a brand name development agency uses a [http://www.powerbrand.at/contact.html hcard for contact information]
*[http://www.koerperarbeit.net/ Anita Braunsberger, Qualified Practitionier of the Grinberg Method® in Linz/Austria] A hcard is used for contact information on her website.
*[http://www.carpetscleansandiego.com Durbin's Carpet Care] displays a vCard for contact information and relevancy
*[http://www.nationalrural.org/organisation.aspx?id=96a3fc04-5c03-4d31-bb8a-2c55cc29aed4 National Rural Knowledge Exchange] uses an hCard with geo tags when displaying an organisations information
* [http://www.tinstar.co.uk/about-tinstar-design/contact-tinstar-design.html Tinstar Design] uses an hCard for company contact information.
* [http://www.interdixit.com/esp/contacto.php Interdixit] uses an hCard for his contact information.
* [http://www.sisnova.com/ Sisnova] uses hCard for his location pages.
* [http://www.fenoyarquitectura.com/esp/situacion.php Eduard Fenoy i Associats] uses an hCard.
* [http://www.deltronic.com/ Deltronic Corporation] of Santa Ana, CA has posted an hCard with geo tags on its [http://www.deltronic.com/contact.shtml Contact] page. Background image of a contact card reinforces content. For those without enabling browser extensions, both hCard "logo" and text link make vCard available via external parser.
* [http://transitionsmft.org/ Transitions Marriage and Family Therapy] has an hCard with geo tags in the footer of each page. There is also an hCard for each counselor on the [http://transitionsmft.org/about.php About] and [http://transitionsmft.org/contact.php Contact]pages.
* [http://ball.in.th/ ball.in.th] uses hCard to display all usernames.
* Italian business directory and community portal [http://www.cylex.it/ cylex.it] implements hCard for companies’ contact information with geo tags. Example: [http://www.cylex.it/azienda/computerland-10559319.html company profile]
* [http://jermy.musicremedy.com/ Jermy Leeuwis MSc] uses an hCard for his contact information.
* [http://idoinfotech.com Gary Eckstein] uses an hCard for [http://idoinfotech.com/contact contact information].
* [http://www.drsuarez.net/ Dr. Suarez] uses hCard on his [http://www.drsuarez.net/cvitae.html resume page]
* [http://sourceforge.net/projects/adx/ addressbook.xml] provides hCard support: [http://elektronengehirn.net/addressbook/addressbook.html adx live example]
* [http://aplawrence.com APlawrence.com] is using hCard for its [http://aplawrence.com/Links/consultants.html Unix and Linux Consultants Page]
* [http://www.afonsoduarte.com Afonso Duarte's Portfolio]. Uses an hCard for the contact information.
* [http://www.rafe.me Web development by Rafe Harwood]. Uses an hCard for the contact line in the footer of every page.
* [http://www.frogmeat.com Los Angeles Web Design]. Uses an hCard for contact information.
* [http://www.arbea.basilicata.it/ ARBEA - Agenzia della Regione Basilicata per le Erogazioni in Agricoltura]. hCard is used both for classic [http://www.arbea.basilicata.it/index.php?option=com_contact&view=contact&id=4&Itemid=101 Contact page] and for farms showcase ("Vetrina Aziende Agricole") available for registered users. I've embedded it modifying Joomla! 1.5 com_contact core component. Users of this CMS can [http://joomlacode.org/gf/project/hcardcontact/ download my patch].
* [http://trumps.net Los Angeles Search Engine Optimization] Uses hCard in the footer of all pages.
* [http://www.oasisroofinginc.com/ Seattle Roofing] Uses hCard in the footer of their roofing website see [http://www.oasisroofinginc.com/ Roofing Seattle WA] to see the hcard.
* [http://reaganvick.com Personal Portfolio of Lance Reagan Vick]. Includes examples of PGP and SSH public keys I have not seen used anywhere else. Hopefully someone finds it helpful!
* [http://www.fracturedstudios.com Los Angeles Search Engine Optimization] uses hCard to provide address information at bottom of page
* [http://www.csid.upt.ro/home.php The Distance Learning Center - CSID, "Politehnica" University Timisoara], Romania uses hCard, including geo information, in every page's footer for encoding the University address. hCard is also used for [http://www.csid.upt.ro/personal.php staff] and student contact information.
* [http://rehabpizza.co.uk Rehab Restaurant] London restaurant, see the sidebar for link to [http://rehabpizza.co.uk/rehab.hcard the hcard].
* [http://www.outdoorla.org/ Los Angeles Hiking Trails] at the bottom right, our contact information is marked up as an hcard.
* [http://c7.se Code7 Interactive] uses a hCard for Peter's [http://c7.se/contact contact details].
* The [http://www.austinartcollective.com Austin Art Collective] is a group dedicated to helping emerging artists sell their artwork online. There is space for users to submit [http://www.austinartcollective.com/gallery/Art-City-Austin.html art gallery reviews] as well, [http://www.austinartcollective.com/austin-galleries/Downtown.html organized by neighborhood] in Austin, TX USA.
* [http://www.squaremeal.co.uk/ Square Meal Restaurant Guide] uses hCards and hReviews for all restaurant listings and [http://www.squaremeal.co.uk/review/Ristorante_Semplice/1596 visitor reviews].
* [http://www.vegan-nottingham.co.uk/ Vegan Nottingham Guide] uses hcards, including geo information, for each entry in the guide.
* [http://www.cgtworld.com/ Cybernation Gamers Tournament] uses hCard in all users profiles like [http://www.cgtworld.com/profile/id-1/ Moonlext's Profile] and in the [http://www.cgtworld.com/about/press.html press page of CGT].
* [http://fcctlh.org First Christian Church of Tallahassee] Uses hCard in the footer of all pages.
* [http://www.pseps.com/vc-people/a.cfm The PSEPS Venture Capital and Private Equity Directory] Venture capital and private equity directory using microformats (both for professionals and firms).
* [http://www.futurix.nl futurix.nl website and webshop development] At the bottom of the pages you'll find the hcard. With a link to technorati the hcard is used to get a vcard out of the hcard.
* [http://romjon.com/contact-us romjon.com website design & development] Contact Us page using hcard to markup address details. By using Operator, Google Maps and Yahoo! Maps can be made to open with the pointer, respectively, in pretty much and more or less exactly the right place.
* [http://www.thebeanmachine.nl/ The Bean Machine] at the bottom right, our contact information is marked up as a hcard
* [http://www.universalmedicalid.com/canada Universal Medical ID Canada] uses hCard to provide address information at bottom of page, as well as on a number of pages within the site.
* [http://www.floristfullerton.com/ fullerton florsit] uses an hcard for the web site footer [http://www.floristfullerton.com/ florist fullerton].
* [http://puronicsorangecounty/ Puronics Orange County] uses an hcard for example view footer [http://puronicsorangecounty.com/ water softener orange county].
* [http://web.mac.com/a.gibson/ Alex Gibson Web Developer] uses hCard for contact info on his homepage.
* [http://www.wardelldesign.com/html/contact/index.php Wardell Design] uses hCard for contact info with optional vCard download.
* [http://www.drfosterhealth.co.uk/hospital-guide/ Dr Foster Hospital Guide] uses hCard to mark up hospital addresses. See [http://www.drfosterhealth.co.uk/hospital-guide/hospital/nhs/Basingstoke-and-North-Hampshire-Hospital-366.aspx Basingstoke hospital page] for example.
* [http://www.drfosterhealth.co.uk/complementary-therapist-guide/ Dr Foster Complementary therapist guide] The [http://www.drfosterhealth.co.uk/complementary-therapist-guide/objectlist.aspx?w=32&p=8&obid=&sub=0 regulatory bodies page] uses hCard for contact details.
* [http://wayne.edu/ Wayne State University] uses hCard for University address and contact details in the global footer used on most web pages.
* [http://www.brakemeters.co.nz/ Portable Brake Meters N.Z. Ltd] uses hCard for business address and contact details.
* [http://www.tallpoppieshamilton.co.nz/ Tall Poppies Florist] uses hCard for business address and contact details.
* [http://www.livingcolour.co.nz/ Living Colour Florist] uses hCard for business address and contact details. See [http://www.livingcolour.co.nz/Information.aspx Information] page
* [http://www.dallasfamilyhomes.com/ DallasFamilyHomes.com] uses hCard for property addresses and geo latitude and longitude. See [http://www.dallasfamilyhomes.com/dallas-homes/ Dallas Homes] page for embedded hcards and property detail pages.
** Pretty good. An improvement might be to use <code>agent</code> to mark up the agent's contact details, and <code>note</code> to mark up the property descriptions. [[User:TobyInk|TobyInk]] 16:22, 4 December 2008 (UTC)
** Thanks for the suggestion Toby. Added the <code>note</code> for the description to the homes listings and home detail pages.
* [http://www.jabz.de/ Jabz | Internet Marketing Agentur] uses hCard for business address and contact details. See [http://www.jabz.de/kontakt/ Contact Page]
* [http://www.headyperfume.com/ Headyperfume.com] Uses hCard for contact information.
* [http://sixthirteendesign.com/ Six Thirteen Design] uses an embedded hCard along with other contact details on the footer of each page (http://sixthirteendesign.com/)
** ''Problems:'' page also includes class="vcard" used in a non-hCard context (for a VCARD download); types for telephone number and e-mail address are improper. [[User:TobyInk|TobyInk]] 16:22, 4 December 2008 (UTC)
* [http://www.locanto.com/ Locanto - Free Classifieds] uses hcards to geolocate their classified listings. Visit the ad pages for examples.
* [http://www.yalwa.com/ Yalwa - Local Directory] uses hcard on their directory listings. Example: [http://wiesbaden.yalwa.de/ID_102318221/Yalwa-GmbH.html Yalwa Address Listing]
* [http://www.fluendi.com/Contact Fluendi Consulting] uses hcard on their contact page (http://www.fluendi.com/Contact)
* [http://www.badbedbugs.com/ Bed Bugs] uses hcard for their site information. See the [http://www.badbedbugs.com/about-bad-bed-bugs/ about bed bugs] page.
* [http://www.lawyer-directory.net/ Lawyer Directory] uses hcard for addresses within the lawyer directory. Example [http://www.lawyer-directory.net/lawyer/Grand-Rapids-Bar-Association-Grand-Rapids-law434032.htm listing]
* [http://www.hanfmuseum.de/about About Hanf Museum Berlin] uses hcard for addresses and contact informations.
* [http://maps.google.com/ Google Maps] uses hCards for addresses. See [http://googlemapsapi.blogspot.com/2007/06/microformats-in-google-maps.html Microformats in Google Maps].
* [http://local.mapquest.com/ MapQuest Local] uses hCards for locations, hCalendar for events and supports the draft Geo format when lat/lng data is provided. See [http://blog.mapquest.com/2008/09/25/microformat-support-on-mapquest-local/ Microformat Support on MapQuest Local] for more information.
* [http://www.whitepoppy.com/ WhitePoppy.com] uses hCard for business address. See [http://www.whitepoppy.com/Contact.aspx Contact Page]
* [http://www.hightechcville.com/ HighTechCville] uses hcard to mark up people and organizations. See [http://www.hightechcville.com/people/72-eric-pugh Eric Pugh] for an example.
* [http://www.cleanertoday.com/ Cleaner Today] uses hcard to mark up contact details. (see [http://www.cleanertoday.com/Cleaner-Today-a/1.htm Contact Page])
* [http://www.aduk.org Audience Data UK] use hcard on their [http://www.aduk.org/contact.php contact page] and [http://www.aduk.org/directory.php directory of related organisations]
* [http://georgebrock.com georgebrock.com] used hcard for George's contact details
* [http://suggestionbox.com/ SuggestionBox] uses hcard for companies listed on its site. Example: [http://transfercar.suggestionbox.com/ Transfercar].
* [http://www.vcventerprise.com/wp/ Christopia] uses hcard to mark up contact details. (see [http://vcventerprise.com/wp/contact/])
* [http://www.rossirovetti.com/ Rossi & Rovetti Flowers in San Francisco] uses hcard to mark up company details in the about us page of the website. (see [http://www.rossirovetti.com/scripts/aboutus.asp example])
* [http://youtube.com YouTube] uses hcard to identify video contributors (see [http://www.flickr.com/photos/factoryjoe/2793731119/in/photostream/ screenshot]]
* [http://sewmyheadon.com/contact sewmyheadon.com] uses hcard to mark up contact details on contact and about pages.
* [http://www.kleinassoc.com/ Klein & Associates - Estate Planning] used hcard to mark up contact details on law firm's contact page.
* [http://www.markuspage.com/markus/en/contact Markus Kilås] uses hCard to mark up his contact details.
* [http://www.southsidewarriors.com/impressum.cfm Southside Warriors] uses hcard to mark up contact details on the imprint page.
* [http://applesold.com/ Apple Realty - Bristol Real Estate Company] uses hcard to mark up company details in the footer of website.
* [http://www.surfcom.co.uk/app/contact/ Surf Commission] uses hcard to mark up company contact details with option to download vcard.
* [http://www.k9yardpatch.com/contact-us/ K9YardPatch] uses hcard to markup company contact details with option to download.
* [http://www.ecovian.com Ecovian] uses hCard to mark up eco-friendly business contact details, see [http://www.ecovian.com/l/san-francisco-ca/jardiniere-restaurant example]
* [http://www.dischord.com/ Dischord Records] uses hCard to mark up company contact details in the footer of the home page.
* [http://www.thinkambient.co.uk/ ThinkAmbient] uses hCard to mark up company contact details.
* [http://proofile.org/ Proofile] extensive profiles with hCard, vCard, XFN and FOAF support.
* [http://www.ebycattle.com/horses/index.html Eby Ranch] uses hCard for the different branches of the company, with option to download the vCard.
* [http://www.clavex.com/contactus.aspx Clavex - A Latin America Financial Institution ] Uses hCard and geo for the contact information. Simple but effective.
* [http://www.dancefederation.co.uk Dance Federation Salsa Dancing & Jive Dancing Lessons and Events ] Directory for classes, lessons and events users hcard on its lessons and events -- region and url properties are empty. Is that an error?
* [http://mop.ardom.co.il/contact.php Southern Arava Research and Development Center] uses hCard for their contact details on their contact page and in sub pages with contact info. -- one card has two fn properties.
* [http://www.itma.org.uk/find-expert/London] - ITMA Trade Mark Attorney search presents results as hCards
* [http://interkonect.com Interkonect > Website Application Specialists] Office contact details marked up using vcard.
* [http://library.christchurch.org.nz/ContactUs/ Christchurch City Libraries (N.Z.)] contact page plus each of our libraries' individual pages linked from [http://library.christchurch.org.nz/Community/Libraries/ Library Locations map].
* [http://www.leftclick.com/about-us/ LeftClick] uses hcards for contact information.
* [http://ideas.veer.com/skinny Veer's Skinny Blog] implements hcard for comments and post authors.
* [http://wolpy.com/missha Wolpy] Uses hcards for contacts and [http://wolpy.com/missha/profile profile].
* [http://www.veganworldorder.com/index.php?m=vegguide Vegan World Order | Restaurants ] Uses hcards for restaurant listings.
* [http://mahalo.com Mahalo] per the announcement [http://www.seanpercival.com/blog/2008/04/23/mahalo-adds-microformats/]
* [http://www.buythatlocally.com BuyThatLocally ] uses hcards for local business information.
* [http://www.firmendb.de Firmendb] uses hCard for individual business contacts, e.g. [http://www.firmendb.de/firmen/15592.php]
* [http://autopendium.com Autopendium] has resources (e.g. suppliers, clubs) marked up with throughout the site, e.g. [http://autopendium.com/clubs/8-Volvo-Enthusiasts-Club]
* [http://display-block.co.uk Display-Block] uses hCard contacts for People and Companies on my personal Blog.
* [http://www.codesignville.com/ Codesignville] uses hCard for his contact details.
* [http://fan-expo.com/Contactez-nous,2 Forum des Acteurs du NumÃ©rique] (a French trade show and exhibition dedicated to content management) uses hCard for contact information (exhibition staff and exhibitors). It also makes use of hCalendar as well as rel-tag when relevant.
* [http://www.corewhisperer.com/ The Core Whisperer] (Paul Ransom) Geological Services uses hCard for contact information.
* [http://chairmanship.mfa.md/en/ The regional presidencies] of Republic of Moldova to the SEECP, CEI, MAG-RACVIAC, SEEHN, CEFTA uses hCard on [http://chairmanship.mfa.md/seecp-contacts/ contacts pages]
* [http://www.viget.com/about/team Viget Labs] - Team page and Individuals' Pages.
* [http://www.re3elstance.com RE3EL STANCE] - Entrepreneurship: Rebel Style.
* [http://www.worldeventsguide.com World Events Guide] - Events occuring around the world marked up with hCard.
* [http://www.amaliahotel.eu/en/contact.html Amalia Hotel Apartments] uses hCard in the contact-info page.
* [http://www.sslcertificaten.nl/contact.php Xolphin SSL Certificaten] uses hCard for their contact details
* [http://examples.tobyinkster.co.uk/hcard hCard + RDFa Example] - raising the bar for parsers...
* [http://competitiondiva.com/ Competition Diva] uses hCard in its page footer (and plans on it for the upcoming profile pages).
* [http://sanisoft.com/ SANIsoft] uses hCard in its page footer
* [http://www.bossalive.com BossaLive] uses [[hcard|hCard]] on user profile pages.
** Example: [http://www.bossalive.com/user/barry Barry's Profile]
** Also uses rel-tag microformat for tagging music. Publishes rel-tags for album, artist and genre.
* [http://hillhursthardware.com/ Hillhurst Hardware's] contact info w.logo uses hcard.
* Birmingham's [http://bigcityplan.org.uk/ Big City Plan] (England)
* Producer [http://www.sun-treader.com/contact.html Christopher Davis] uses hCard markup on his contact page.
* [http://www.tpexpress.co.uk/Liverpool08-Capital-of-Culture/ First TransPennine Express - Liverpool 08, Capital of Culture] - uses hCard to markup suggested venues.
* [http://anand.ws/ Anand's Musings] uses hCard to mark up authors for comments and posts.
* [http://www.onyomo.com/ OnYoMo] uses hCard markup for all addresses listed in their local search results.
* [http://www.dctalks.org/design/ DC Design Talks] used hCard to mark up the speakers for this one-day event.
* [http://www.entidi.it eNTiDi software] provides a basic hCard sample.
* [http://quickbase.intuit.com QuickBase] uses hCard markup on our contact us page.
* [http://www.pixsense.com/contact_us.html PixSense.com] uses hCard markup for addresses across the PixSense website.
* [http://www.areaguides.net areaguides.net] uses hCard markup for all addresses across the site.
** Examples: http://chicagoil.areaguides.net/ypcyellowpg/restaurants.html, http://newyorkny.areaguides.net/hotels.html
* [http://www.ll.georgetown.edu/ Georgetown University Law Library] in Washington, D.C. now uses hCard for our address on all pages. Also, library staff biography pages use hCard such as [http://www.ll.georgetown.edu/staff/bio.cfm?id_no=105 here] and [http://www.ll.georgetown.edu/staff/bio.cfm?id_no=32 here].
* [http://www.ll.georgetown.edu/ Georgetown University Law Library] in Washington, D.C. now uses hCard for our address on all pages. Also, library staff biography pages use hCard such as [http://www.ll.georgetown.edu/staff/bio.cfm?id_no=105 here] and [http://www.ll.georgetown.edu/staff/bio.cfm?id_no=32 here].

* [http://www.mtgd.gov.md/ Ministry of Transport and Road Industry] of Republic of Moldova. First Moldavian governmental site using hCards on [http://www.mtgd.gov.md/ministrul/ staff pages], [http://www.mtgd.gov.md/subdiviziunile-ministerului/ subdivisions page] and in the footer of each page (contact information)
**Only [http://www.mtgd.gov.md/ Romanian] and [http://www.mtgd.gov.md/ru/ Russian] versions available yet
* [http://www.auctionlink.com.au/ AuctionLink] uses hCard for Auctioneer records like [http://www.auctionlink.com.au/Auctioneers/Auctioneer/Cam_Brown_Auctions/ Cam Brown Auctions] (also uses hCalendar)
* [[User:WebOrganics|User WebOrganics]] The Microformats wiki has hcards on its user pages.
* [http://www.ontwerpkliniek.nl Ontwerpkliniek - Bureau voor Visuele Identiteit] uses the hCard contact information at the frontpage and the contact page.
* [http://www.instantdes.com L'instant des...] uses the hCard format for all photographers published on this collective photoblog.
* the mediadesigner groupblog [http://www.pixeltapete.de Pixeltapete] uses the hCard for the contactinformation of the authorpages of [http://www.pixeltapete.de/alex Alex] and [http://www.pixeltapete.de/carsten Carsten] and also for the [http://www.pixeltapete.de/kontakt imprint]. [http://www.pixeltapete.de Pixeltapete] uses its own [http://www.pixeltapete.de/2007/11/hcard-sidebarwidget-fuer-wordpress/ hcard widget] for wordpress sidebars.
* [http://www.thorsten-ott.de Thorsten Ott] uses hCard format for the contact section of his online resume.
* [http://rosebleed.net/ Rosebleed] supports [[hCard user profiles]] - your profile URL is <nowiki>http://rosebleed.net/users/profile.php/</nowiki> followed by your username, e.g. [http://rosebleed.net/users/profile.php/silvermoon82 silvermoon82].
**'''Fixed''' profiles now explicitly mark up 'n' where possible, otherwise omits it
* [http://www.whitepages.com WhitePages.com] Now WhitePages.com main implemented hCard on all its listings. Over 120 million hCards! Includes work information.
* [http://www.warmoth.com Warmoth Guitar Products] features hCard contact information in two places, [http://www.warmoth.com/customerservice/customer.cfm?fuseaction=order How To Order] and all of the [http://www.warmoth.com/catalog Warmoth E-Store]
* [http://www.bbc.co.uk/worldservice/bangladeshboat BBC World Service Bangladesh River Journey] a social network mashup, with hCard & other microformats. See [http://dharmafly.com/blog/bangladeshboat Dharmafly blog discussion].
* [http://www.amants-du-chocolat.net/ ACCP:Les Amants du Chocolat de la Couronne Parisienne] uses hCard on their contact page and in the chocolate maker they've reviewed.
* [http://www.accountviewsoftware.nl/ AccountviewSoftware.nl] makes use of hCards for the dealer directory [http://www.accountviewsoftware.nl/dir/ (directory)]
* [http://www.crystalvision.co.il/ CrystalVision] uses hCard on their contact page and in the footer throughout the site.
* [http://www.joshuamcginnis.com Joshua McGinnis] uses hCard to display his contact information to potential clients.
* [http://www.bo.ingv.it/contents/INGV-Bologna/Staff.html INGV Bologna] implemented hCards for staff-members, marked-up as HTML table-rows ([[include-pattern]] also used to add organization-name and fax-number to each hCard).
* [http://www.lefora.com Lefora] is a free forum hosting site (using custom forum software). Every user's profile contains an hCard. (Example forum for testing: [http://funstuff.lefora.com funstuff.lefora.com])
* [http://theultimates.whitepages.com WhitePages.com] A special version of whitepages.com has all its listings marked up in hCard.
* [http://piermontweb.com/contact/ Piermont Web Design] uses hCard on its contact page.
* [http://www.ie.asm.md/en/ The Institute of Power Engineering] of the Academy of Science of Moldova. First Moldavian site using hCards on staff pages, e.g [http://www.ie.asm.md/employees/oleschuk-valentin/]
**Also in Russian: [http://www.ie.asm.md/employees-ru/sit-michail-lvovich/] and Romanian: [http://www.ie.asm.md/angajati/chiorsac-mihail/]
* The good ship [http://styrheim.com/test/leonid.html Leonid Miloslavskiy] spotted in the North Atlantic
* [http://richi.co.uk/blog/2005/12/structured-blogging.html Richi Jennings] has put up his attempt
*[http://oberrycavanaugh.com O'Berry|Cavanaugh] has an organization hCard in the footer on every page as while as individual hCards on the [http://oberrycavanaugh.com/team.php Team] page.
* [http://fortisgc.com Fortis General Counsel], e. g. [http://fortisgc.com/joyce_lan_kim.html Joyce Kim's profile], uses hCard for profile and contact information.
* [http://peryplo.com Peryplo.com], e. g. [http://peryplo.com/personal/7e6786e711c6d051a39a1b7085f34955 Sample Page], uses hCard for Hotels, Gastronomy Places and services for tourists.
* [http://www.navitraveler.com/places/629/ NaviTraveler], e. g. [http://www.navitraveler.com/places/629/Lincoln_Memorial.html Lincoln Memorial], including [[geo|Geo]].
* [http://corewar.atspace.com/about.html sfghoul] has marked her contact info with [[hcard|hCard]]
* [http://www.zaadz.com Zaadz] uses [[hcard|hCard]] and [http://gmpg.org/xfn XFN] for friends on a user's profile page.
*[http://www.xoxiety.com/about.html Xoxiety] uses hCards on its about page, linking data from a within a block of text.
*[http://yedda.com Yedda] - Yedda provides hcard based identities on all of the people's profiles
*[http://openid.ne.jp OpenID.ne.jp] First OpenID provider service in Japan(æ¥æ¬èª). Each personal OpenID page (ex:[http://eouia.openid.ne.jp http://eouia.openid.ne.jp]) is marked up as his hCard. And there is a company hCard on every page, too.
* [http://www.goldenglovepromotions.com/ Golden Glove Promotions] used hcards on the footer of every page to store contact information.
* Australian national news sites The Australian and Australian IT use hCard on their contact pages: [http://www.theaustralian.com.au/contactus The Australian (contact us)] and [http://www.australianit.news.com.au/contactus Australian IT (contact us)]
* [http://www.thekiwiholiday.com/ The Kiwi Holiday] uses hCards for [http://www.thekiwiholiday.com/view-hostels New Zealand Hostels], [http://www.thekiwiholiday.com/view-restaurants New Zealand Restaurants], and [http://www.thekiwiholiday.com/view-activities New Zealand Activities]. Also provides hCard "download to address book" functionality on listing detail pages, e.g. [http://www.thekiwiholiday.com/restaurant/tonys-steak Tonys Steak Restaurant]
* [http://www.qcindustries.com/ QC Industries Conveyors] uses hcards to store contact information in the site footer and in their [http://www.qcindustries.com/news/press-releases/ press releases].
* [http://www.confuciusinstitute.ac.uk/ The Confucius Institute for Scotland at the University of Edinburgh] has their used a hcard to store contact information in the footer of the page.
* [http://admnj.com/ Affiliated Direct Mail] is a New Jersey based direct mail company that has their contact information and footer in hCard format.
* [http://www.golfdigest.com/ Golf Digest] now supports hCard in its [http://www.golfdigest.com/courses/places Course Finder] detail pages. [http://www.golfdigest.com/courses/places/2483 example]
* [http://dev.opera.com/authors/ Dev Opera] Opera's developer site uses hCards on the author details pages.
* [http://chrischerry.name/ Chris Cherry's contact page with his hCard]
* [http://www.kiteboarder.com.au/php/search.php www.kiteboarder.com.au] A new Australian kiteboarding portal. Microformats have been used so that users can export the shops <s>directly to outlook</s>. I was able to learn microformats through the Media 2007 conference in London. Author: Damien King
* [http://krevi.dk/ KREVI] A Danish research institute. Using hCard in the footer of each page and on staff list. This is the first known danish website from the public sector of Denmark using microformats.[http://krevi.dk/om-krevi/organisation/medarbejdere example staff list]
* [http://www.hss.ed.ac.uk/web-team/ College of Humanities and Social Science Web Team's site], University of Edinburgh uses a hCard in the footer of each page.
* [http://www.theglobeandmail.com/ globeandmail.com] Canada's National Newspaper uses an hCard for their contact information.
* [http://www.logisteam.pl/ Krzysztof Rucinski] uses an hCard for his contact details on [http://www.logisteam.pl/kontakt.html Logisteam keylogger contact] page.
* Creation design & marketing has hCards throughout the site, including the [http://www.creation.uk.com/contact/ contact page], the [http://www.creation.uk.com/company/leigh-scott/ company profile pages] and on the [http://www.creation.uk.com/news/2007/06/06/easy-money/#comments-view comments on articles]
* [http://www.thomsonlocal.com/ ThomsonLocal.com], major UK business directory publisher, use hcard on the search results and company information pages.
* [http://www.corissia.com Corissia Group Hotels in Crete Greece] have included contact information as a hCard on the footer of every page of the website. There is a multilingual implementation as well.
* [http://zucchetti.co.uk/2007/03/06/simple-address-formatting-solution/ Laura Zucchetti] illustrates a simple address formatting solution as a hCard and marked up in a definition list.
* [http://www.feike.de/Kontakt.html Feike Contact] has a hCard on to top of the page.
* [http://www.londondrum.com/ London Drum] uses a whole host of microformats - there are hcards and geo's on the hotel pages, events are written up in hcalendar format on the cityguide page, and you can also find some hreviews as well (like on the [http://www.londondrum.com/hotels/athenaeum.php Athenaeum Hotel page])
* [http://www.regels-stadskanaal.nl/ Regelingenbank Stadskanaal] has a hCard on each page, containing Geo-information too.
* [http://www.tomstone.se Tom Stone - Trollkarl] has a hCard in the footer of each page of the site.
* [http://www.rolandinsh.lv/ Rolands Umbrovskis]'s home page has hCard in [http://www.rolandinsh.lv/?ro=contacts contact page] and all other pages with contact information.
* [http://twitter.com Twitter] uses hCard for user information (along with [http://ihack.us/2007/05/14/twitter-gets-microformatted/ several other microformats])
* [http://www.bendodson.com/developer/ Ben Dodson] uses an hCard for his contact details on every page of his site as well as using hCards for any XFN relationships in his blogrolls.
*[http://www.pats.ua.ac.be/group PATS Group Members] uses hCard to mark up member contact information.
*[http://couchsurfing.com CouchSurfing] has limited information in hCard available on members' profiles (such as [http://www.couchsurfing.com/people/guaka Guaka's]).
* [http://kpumuk.info Dmytro Shteflyuk] uses an hCard on his [http://kpumuk.info/contact/ contact] and [http://kpumuk.info/curriculum-vitae/ curriculum vitae] pages.
* The [http://www.bayofislands.net/ Bay of Islands] site has implemented hCard on all listing pages, eg: [http://www.bayofislands.net/accommodation/backpackers/saltwater-lodge/ Saltwater Lodge]
* [http://people.cs.uchicago.edu/~mpschaef/index.html Merrick Schaefer] is psyched to use hCard on his homepage for his contact info.
* Christian Hess (from San JosÃ©, Costa Rica) has an hCard in his [http://www.hess-cr.com home page], [http://www.hess-cr.com/utilidades/correo.shtml#postal contact] and [http://www.hess-cr.com/secciones/curriculum/datos.shtml personal rÃ©sumÃ©] pages (all in Spanish). He also recommends using the [https://addons.mozilla.org/es-ES/firefox/addon/4106 Operator] extension in Firefox to check them out.
* [http://www.JamPlanet.com Jam Planet] uses hCard in Contact Us page; application can generate hCard for a contact.
* [http://www.anisfield-wolf.org/ The Anisfield-Wolf Book Awards], designated specifically to recognize works addressing issues of racism and diversity, uses hCard for the author bios of [http://www.anisfield-wolf.org/Winners/PastWinners/ past winners].
* [http://www.buy-our-honeymoon.com/ Buy Our Honeymoon], a [http://www.buy-our-honeymoon.com/registry honeymoon registry] service, uses hCard in their [http://www.buy-our-honeymoon.com/contact Contact Us] page.
* [http://www.instalacionesbcn.es/categoria-producto/calderas/ Calderas Terrassa], major instalation and service publisher, use hcard on the search results and company information pages.
* '''W3C webmaster''' [http://www.w3.org/People/Jean-Gui/ Jean-Guilhem Rouel] now has an hCard.
* [http://source.ibegin.com/ iBegin Source] - All 10.8+ million business listings have their information marked up in hCard. Example: [http://source.ibegin.com/california/adelanto/aeronautical-supplies/general-atomics-9779-yucca-rd-1.html General Atomics]
* [http://david.weekly.org/ David Weekly] has added an hCard to his home page for himself.
* [http://ficlets.com/stories/12 Ficlets] story page uses hCard for author bio.
* [http://redmonk.com/contact/ RedMonk Contact page] uses hCard for RedMonk firm as well as each analysts.
* [http://source.ibegin.com/ iBegin Source] uses hCard to identify business information for all 10.5+ million businesses listed.
* [http://cloudislands.com/contact.php Cloud Islands] uses hCard for our Contact Info.
* [http://www.international.unt.edu UNT International] uses hCard to mark up contact information sitewide (see esp. [http://www.international.unt.edu/offices/ieli/people/instructors/profiles the IELI instructor profile listing])
* [http://www.giraffo.de giraffo.de] has different hCards on every page (+ geo in "kontakt")
* [http://www.enap.com ENAP, Inc.] lists the HR Contact in hCard format on the [http://www.enap.com/career.aspx Career Opportunities] page.
* [http://sxsw07.conferenceer.com/people Conferenceer] lists panelists and participants to the 2007 South by Southwest interactive conference in hCard format
* [http://news.stanford.edu Stanford News] (Redesign) hCard in the footer on every page as well as markup for every staff member on the Staff page.
* [http://www.wikiservice.at/fractal/wikidev.cgi?FR/EveMoreau ValÃ©rie-Eve Moreau] has an hCard on her wiki-homepage.
* [http://en.wikipedia.org/wiki/St_George%27s_Minster%2C_Doncaster St George's Minster, Doncaster, on Wikipedia]
* AOL Journals publishes hCards for authors. [http://journals.aol.com/carowill/whats-happening Example]
* Ian McKellar's [http://ian.mckellar.org/ home page] is an hCard that's styled to look like a business card.
* [[Christophe Ducamp]]'s hCard based on [http://www.wikiservice.at/fractal/wikidev.cgi?FR/MicroFormats/ChristopheDucamp wiki personal page] of a wiki-branch which could be dedicated to seed a french group to support microformats. Thanks to Laurent Lunati for the CSS. You can [http://www.wikiservice.at/fractal/wikidev.cgi?action=edit&id=FR/MicroFormats/ChristopheDucamp edit it]. Any suggestions welcome.
* [http://www.matthewwest.co.uk Matthew West] has an hCard on his [http://www.matthewwest.co.uk/email contact] page.
*[http://www.webmaster.waw.pl PaweÅ Wrzosek] Freelance webdeveloper`s portfolio
*[http://www.stanford.edu/ Stanford.edu] hCard markup is included in the footer of the homepage and all subsequent pages within the /home directory.
*[http://openid.ne.jp OpenID.ne.jp] First OpenID provider service in Japan(æ¥æ¬èª). Each personal OpenID page (ex:[http://eouia.openid.ne.jp http://eouia.openid.ne.jp]) is marked up as his hCard. And there is a company hCard on every page, too.
* [http://www.qwertycars.co.uk/garages/mechanics-near-tadworth-kt20.aspx UK Car Garages] Address of car mechanics in the UK, in hCard format.
* [http://www.columbiaautomation.com/sub/contact.php Columbia Automation]'s About Us page every employee marked up as an hCard, as well as having a company hCard with geo information.
* [http://www.pointermix.com Pointermix Design] uses the hCard format.
* [http://eight6.com/contact/ eight6]'s contact page uses the hCard format.
* [http://www.raveaboutit.com.au Rave About It]'s business listings use the hCard format.
* [http://optics.org/cws/Contact/OurTeam.do optics.org]'s team page.
* [http://www.robcottingham.ca/contact Rob Cottingham]'s first foray into microformats is an hCard on the contact page of his personal blog. (He was inspired by Tantek Ãelik's presentation at Web Directions North 2007.)
* [http://seattleu.edu Seattle University] uses hCard on it's front page and most pages that share an official template.
* [http://www.josemarti.waw.pl Jose Marti XXII Secondary School in Warsaw] includes hCard on Contact and About Author sections
* [http://www.jaama.co.uk Jaama] have their company details as a vCard download on their [http://www.jaama.co.uk/Contact.aspx contact] page.
* [http://3amproductions.net 3AM Productions] has company details marked up as hCard all across the site and particularly for [http://3amproductions.net/jason.php Jason] and [http://3amproductions.net/gilbert.php Gilbert]
* [http://jc-development.co.uk/ JC's Development] has company contact details as hCard.
* [http://berlin.barwick.de/index.html Berlin Guide] is converting their address markup to hcard, e.g. [http://berlin.barwick.de/shopping/kadewe-kaufhaus-des-westens.html KaDeWe]
* [http://www.xlntads.com XLNTads] has their contact information marked up in hCard, as well as their development schedule/timeline in hCalendar
* [http://derrick.pallas.us Derrick Pallas] tells people to look for him here.
* [http://bluemonkcreative.com/contact/ Bill Turner] adds an hCard to the contact page of his freelance business' website.
* [http://www.oppenheim.com.au/ James Oppenheim's blog] includes an inline author hCard in the footer of each page and also on the contact page.
* [http://steinhardt.nyu.edu/ NYU Steinhardt] has [http://steinhardt.nyu.edu/faculty_bios/list/Faculty 240+ faculty bios marked up], e.g. [http://steinhardt.nyu.edu/faculty_bios/view/Susan_Murray].
* [http://www.boogdesign.com/aboutus.html boogdesign.com] has added hCard markup on the contact page.
* [http://www.gptg.org/ Great Places To Golf], hCards for golf clubs around the world, e.g. [http://www.gptg.org/club/12/]
*[http://www.travellerspoint.com/ The Travellerspoint Travel Community] has added hCards to all of their member profiles (e.g. [http://www.travellerspoint.com/member_profile.cfm?user=jax_07]). Details include name, photo, location, notes and url.
* The [http://www.westmidlandbirdclub.com/ West Midland Bird Club] in the English Midlands uses hCard on its [http://www.westmidlandbirdclub.com/ home page], [http://www.westmidlandbirdclub.com/diary/ events diary], [http://www.westmidlandbirdclub.com/club/contact.htm contact pages], [http://www.westmidlandbirdclub.com/site/links.htm links page], [http://www.westmidlandbirdclub.com/club/older.htm list of the world's oldest bird clubs] and in a page footer which is gradually being rolled out across the whole site. {{UpdateMarker}} Page-footer's hCard now has logo, using [[include-pattern]].
*[http://wizardishungry.com/blog/ wizardishungry/blog] has the author's hCard in the footer of every page with a link to X2V.
* [http://www.walkerfineart.com Walker Fine Art Gallery] Most pages contain an hCard in the footer.
* [http://chewbittel.com/contact.php Chew Bittel Assoc., Inc.] is an organization hCard. It's got abbr's in there, and a duplicate telephone field, and some hidden things. I'm really pushing things to the limit here. This should be a great test for your parser.
* Scott Allan Wallick's hCard is [[User:ScottWallick|his user page]] and on his blog, [http://www.plaintxt.org/about/2/ plaintxt.org]
* [[User:Bob_Jonkman|Bob Jonkman's hCard]] '''on this 'wiki''''
* [http://thetenwordreview.com The Ten Word Review] simply contains ten word long reviews. All reviews are marked up as [[hreview|hReviews]], and user information is marked up as hCards.
*OffshoreAgile.com, a subsite of Starsoft Development Labs, uses hCard in the [http://www.offshoreagile.com/company/contact/ Starsoft Contacts] and Media Inquiries sections
*T-Mobile uses hCard for the [http://t-mobilepressoffice.co.uk/press/contact-details/ T-Mobile UK Press Contact Details page], as well as for some of the latest press releases
* Psychology Press and Routledge's Behavioral Sciences' publishing division have implemented hCard on their contact pages on 17 of their websites (example on the contact page on their [http://www.clinicalpsychologyarena.com/contact/ Clinical Psychology Arena])
*[http://72ppi.us 72ppi], uses hCard in the footer.
*[http://www.csarven.ca Sarven Capadisli] uses hCard throughout the site (including user comments in articles).
* [https://www.urbanbody.com/information/contact-us Urban Body Men's Clothing] uses hCard for business locations and hCalendar for business hours.
* [http://www.iqair.us/ IQAir North America], uses hCard for contact information.
* [http://www.infoiasi.ro/ The website of the Faculty of Computer Science], "A. I. Cuza" University Iaşi, Romania uses hCard for each staff member.
* [http://www.finds.org.uk/ The Portable Antiquities Scheme at the British Museum] hCards added to footer of every page and to contacts section. Working on adding more and getting it right.
* In [http://www.ideasfornet.com/ IdeasForNet.com - the ideas repository] hCards were implemented partially in the footer of each page, and more comprehensively in the contact and about pages.
* The [http://www.cst.ed.ac.uk/ Centre of Canadian Studies] at the University of Edinburgh use hCards for contact information in the footer of their site.
* [http://www.theatrestudies.llc.ed.ac.uk/ Theatre Studies: European Theatre] at the University of Edinburgh use hCards for contact information on their home page
* [http://www.carolinemockett.com/design/about.aspx Caroline Mockett] has an hCard on her About Me page
* [http://wait-till-i.com Christian Heilmann] has a footer address using hCard
*[http://www.audience-response-rentals.com/ Audience Response System Rentals] uses hcard as a popup in the site accessibility area (lower right) for easy copy and paste of address by customers.
* [http://www.fischsolutions.com/ Fisch Internet Solutions] uses an embedded hCard and a vCard download to provide customers an easy way to contact them on their [http://fischsolutions.com/contactus.html Contact Us] section of the website.
* [http://www.micatholicconference.org/ Michigan Catholic Conference] uses hCard for contact information in the sidebar.
* [http://www.adambunn.co.uk/ Adam Bunn] provides contact details in the sidebar using hCard.
* [http://www.belkin.com/pressroom/releases/uploads/10_10_06NotebookExpansionDock.html Belkin Press Releases] are using hCards for PR contacts and corporate offices.
* [http://mybank.com myBank.com] uses hCard for its listings of every branch of every FDIC-insured bank in the United States.
* [http://leftlogic.com Left Logic] uses hCard for embedded contact information.
* [http://inga-art.co.uk/artist Inga Scholes] uses hCard for contact information in the sidebar.
* [http://www.lussumo.com/ Lussumo] uses hCards on user profile pages in its open-source [http://www.getvanilla.com/ Vanilla] Discussions Forum software.
* [http://www.creative-ways.nl/ Ron Kok] uses hCards to mark-up the names and URLs of commentors on his blog. He also uses hCards in combination with XFN in his blogposts to refer to friends, and has an hCard for himself on every page on his blog.
* [http://tagg.no Tagg Media] uses hCard for [http://heine.tagg.no/contact.php contact information] and provide link to vCard download in the contact section.
* The article about the fictitious Matrix character [http://en.wikipedia.org/wiki/Neo_%28The_Matrix%29 Thomas A Anderson in Wikipedia] is now marked up with hCard.
* [http://dconstruct06.madgex.com/ d.Construct 2006 Backnetwork] uses hCards for conference delegates (and provides the markup so that delegates can copy and paste cards into their own sites).
* [http://www.brown.edu Brown University] now uses hCard on the front page
* [http://www.wideblueyonderweb.co.uk Dunks at Wide Blue Yonder Web Design] has added hCard markup on his [http://www.wideblueyonderweb.co.uk/wbyw/pages/contact.htm contact page] and is looking to implement it on all past & future contact pages for clients.
* [http://southamptonrubberstamp.com Southampton Rubber Stamp Company] now has hCard markup with a vCard download link on every page.
* [http://barefoot-ceramics.com Barefoot Ceramics paint your own pottery studio] (in Newport, South Wales) has added hCard markup to its [http://barefoot-ceramics.com/find#address "Find"] page and other address instances. They hopes to implement hCalendar event lists as soon as an ics to hCalendar PHP class can be found or written.
* [http://dsingleton.co.uk/ David Singleton] has added a hCard to his blog.
* [http://www.thestreet.org.au The Street Theatre (Canberra, Australia)] has added hCard markup to its [http://www.thestreet.org.au/contact.htm Contact Us] page. hCalendar markup will soon be added for all of our performances.
* [http://www.informatik.uni-hamburg.de/SVS/personnel/henrich/index.php Henrich C. Pöhls] has marked up his about page using hcard, including his PGP-Key that is stored in an abbr title, using class=key.
* [http://www.yalf.de Yalf Webentwicklung] has [http://www.yalf.de/kontakt contact information] available as hCard (and vCard).
* [http://www.zeldman.com/about/ Jeffrey Zeldman]. Jeffrey Zeldman has marked up his about page using hcard.
* [http://WhereAreYouCamping.com Where Are You Camping]. hCards for all members and camps, employing the include pattern as well. AFAIK this is the first Burning Man related microformats implementation, not to mention addresses in Black Rock City.
* [http://www.clacksweb.org.uk Clackmannanshire Council ]. hCard is implemented for all contact details across the site, and for specific individuals such as elected members (Councillors).
* [http://www.webdirections.org Web Directions]. hCard is used as contact information for the conference, while speakers are marked up with hCard.
* [http://www.markthisdate.com/contactform.html MarkThisDate.com]. An hCard is implemented on our contact form. For our calendars hCalendars will follow as soon as possible.
* [http://www.msiinet.com/contact/ MSI Systems Integrators] has its "Contact MSI" page encoded with hCards.
* [http://www.coolblue.nl/ Corporate website of Coolblue BV]. hCards were implemented in both the footer of each page, and in the "News" section for press contact information.
* [http://www.besancon.fr/index.php?p=32 Official site of BesanÃ§on (France)] uses hCard for each page concerning the small towns surrounding BesanÃ§on.
* [http://2006.dconstruct.org/speakers/ d.Construct 2006 conference speakers list] is implemented using hCards.
* [http://local.yahoo.com Yahoo Local] now supports hCards for business and places in the search results
* [http://learningtheworld.eu/imprint/ Learning the World] has hcard information on the imprint, alas we didn't succeed to mark-up the work phone and fax numbers properly.
* The [http://www.fuckparade.org Fâparade] website uses hCard, though I didn't find a type to distinguish mobile and landline phone numbers.
**Use <code>cell</code> for mobiles.
* [http://www.miranet.nl/contact.htm Miranet Webdesign] have added a hcard to their [http://www.miranet.nl/contact.htm 'contact' page]
* [http://weblog.200ok.com.au/ Ben Buchanan] has added a vCard to the [http://weblog.200ok.com.au/about/ 'About' page on The 200ok Weblog]
* [http://www.radiantcore.com Radiant Core] has their contact information [http://www.radiantcore.com/contact/ available in hCard].
* [http://www.mikerumble.co.uk/ Mike Rumble] has [http://www.mikerumble.co.uk/contact.html uploaded his hCard].
* [http://www.saumag.edu/ Southern Arkansas University] has its contact footer encoded as hCard
* [http://main.uab.edu/ University of Alabama at Birmingham] has its contact footer encoded as hCard
* [http://www.capital.edu Capital University] has contact footer and bloggers' names encoded as hCard. Also, all page-specific contact information is encoded as hCards (see [http://www.capital.edu/Internet/Default.aspx?pid=67 Admissions] page for an example)
* [http://main.uab.edu/shrp/ UAB School of Health Professions] uses hCard in its contact footer
* [http://green.carisenda.com/ Stephen Stewart] has his hCard on the front page of his weblog ('You are here' section)
* [http://www.direction.es/ Direction] uses hCard for contact information.
* [http://audiobank.tryphon.org AudioBank] uses hCard to display member informations.
* [http://www.vivabit.com/atmedia2006/speakers/ @media speakers] are marked up with hCard (photos depend on BASE tag support which makes this a good test case)
* [http://www.dougransom.com Doug Ransom] uses hCard for his financial advisory practice.
* [http://rubyandrails.org/usergroups/newcastle/members.html ncl.rb] uses hCard for contact information.
* [http://www.snowinteractive.com/ Snow Interactive] uses hCard for contact information.
* [http://flickr.com Flickr] now supports [[hcard|hCard]] and [http://gmpg.org/xfn XFN] on profile pages. See [http://flickr.com/photos/factoryjoe/113866484/ screenshot of Flickr UI in Flock browser using Flocktails extension - March 17th 2006].
* [http://www.ndiyo.org/contact Contact information for the Ndiyo project]
* [http://www.pixelenvy.co.uk/ Pixel Envy] uses hCard for contact information on every page
* [http://stilbuero.de/contact/ Klaus Hartl] uses hCard in the sidebar for contact information (maybe easier to parse through delivering xhtml as xml).
* [http://charlvn.virafrikaans.com/contact Charl van Niekerk's hCard]
* [http://billy-girlardo.com/WP/ BillyBLOGirlardo] uses hCard for contact information.
* [http://www.hicksdesign.co.uk/ Hicksdesign] uses hCard for contact information.
* http://www.gr0w.com/articles/press/growsearch_launched_press_release/ - hCard in a press release for the press contact info
* http://www.redmonk.com/cote/archives/2006/03/testing_out_mic.html - hCard with explanation
* [http://andy.ciordia.info/ it's my island], personal blog, hcard on the ''[http://andy.ciordia.info/pages/about_me About the Writer]'' page. [[User:Ciordia9|Andy Ciordia]]
* [http://www.windowonwoking.org.uk/ Window on Woking], a local community site in the UK, uses hCard in the homepage of each member organisation and local Councillor.
* [http://ChunkySoup.net/ ChunkySoup.net] has redesigned using hAtom 0.1 and hCards on the entire site -- by [[User:ChrisCasciano|Chris Casciano]]
* [http://www.30boxes.com/ 30 Boxes],a social calendar application and digital lifestyle aggregator, automatically creates an hcard for you with your account. It is found under Settings > Syndication.
* [http://www.nearwhere.com/ Nearwhere.com] allow you to put an hcard on an interactive map.
* [http://www.brentozar.com/ Brent Ozar] added a [http://www.brentozar.com/contact.php contact] page hCard.
* [http://www.kerihenare.com/ Keri Henare] has rewritten his [http://www.kerihenare.com/contact/ contact] page hCard. Now using <code><object></code> instead of <code><img></code> for photo. (Thanks Brian Suda for updating the vCard converter)
* [http://michaelraichelson.com/contact/ Michael Raichelson] had an hCard on his contact page before SXSW, but never thought to add it here until Tantek requested it.
* [http://www.commoner.com/~lsimon/lindsey_simon_hcard.html Lindsey Simon] has added an hCard to his website as per Tantek's SXSW request for folks to try it
* [http://www.davidgagne.net/ David Gagne] has an hCard in his sidebar.
* [http://www.churchzip.com/map/ Churchzip.com/map] and [http://www.skiwhere.com/map/ Skiwhere.com/map], provide churches, hotels, and ski resorts on the same maps. Locations are formatted as hCards.
* All [http://www.iqdir.com/ IQ Directory Solutions] Yellow Pages web portals use [[hcard|hCard]] markup on listings. For example [http://www.yellowpages-cambodia.com/ Cambodia Yellow Pages] and [http://www.superpages.com.my/ Malaysia Super Pages]
* Ning's cloneable Group app uses fuzzy matching to map custom fields to [[hcard|hCard]] markup on its [http://group.ning.com/index.php?controller=person&action=view&content=JonathanAquino profile] pages.
* [http://claimid.com/factoryjoe Chris Messina' ClaimID hCard]
* [http://factoryjoe.com/ Chris Messina' homepage]
* [http://flock.com/about Flock About]
* [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html Agenda: W3C Technical Plenary Day, March 1 2006] has [[hcard|hCard]] and [[hcalendar|hCalendar]] markup. ([http://www.w3.org/2006/03/01-TechPlenAgenda.html original here]).
* [http://www.gr0w.com/articles/press/growsearch_launched_press_release/ GrowSearch Launched (Press Release)] uses an hCard to provide Press Contact Point.
* The [http://www.arborday.org/ National Arbor Day Foundation] has started using hCards for their [http://arborday.org/programs/conferences/communityforestry/index.cfm upcoming] [http://arborday.org/programs/conferences/hazardtrees-treeplanting/ conferences].
* [http://www.multipack.co.uk The Multipack] has numerous hCards, especially on the [http://www.multipack.co.uk/members/ members page], as well as the next meeting information.
* [http://deadringrancor.livejournal.com/ Justin McDowell] used an hCard when [http://deadringrancor.livejournal.com/221332.html referring to a person in his blog post]
* [http://davecardwell.co.uk/cv/ Dave Cardwell] has included his hCard in his Curriculum Vitae.
* [http://blog.usweb.com/ Shaun Shull] has written a great post on [http://blog.usweb.com/archives/how-microformats-affect-search-engine-optimization-seo How Microformats Affect SEO], and has included his [[hcard|hCard]] as one of the examples.
* [http://www.thefutureoftheweb.com/ Jesse Skinner] has written a simple [http://www.thefutureoftheweb.com/blog/2006/1/hcard tutorial with examples]
* [http://www.w3.org/2005/12/allgroupoverview.html 2006 W3C Technical Plenary Week] has marked up the venue, contacts, and program committee members all with hCard.
* [http://www.avf-nexus.co.uk AVF-Nexus] have a hCard on their [http://www.avf-nexus.co.uk/contact/ contact page] - (by [http://creation.uk.com Creation"])
* [http://www.thefantasticos.com/andrew/ Andrew White] posted [http://www.thefantasticos.com/andrew/index.php/my-hcard/ his hCard] and [http://www.thefantasticos.com/andrew/index.php/62/microformats-the-should-have-been-obvious-web-dev-tool/ blogged about it].
* [http://www.2sheds.ru Oleg "2sheds" Kourapov] in his [http://www.2sheds.ru/blog/ blog] ([http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.2sheds.ru/blog X2V]) has turned personal profile into hCard ([http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.2sheds.ru/blog/hcard.html X2V]) and his blogroll - into combination XFN/hCards ([http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.2sheds.ru/blog/friends.html X2V])
* [http://www.approveddesign.co.uk Approved Design Consultancy] have a hCard on their [http://www.approveddesign.co.uk/about/contact/ contact page] as well as on their [http://www.approveddesign.co.uk/about/people/ people section] - (by [http://creation.uk.com Creation"])
* [http://weblog.200ok.com.au/ Ben Buchanan] and [http://www.griffith.edu.au/cgi-bin/phone_search.pl?string=colin+morris&format=search Colin Morris] have [http://weblog.200ok.com.au/2006/01/griffith-phonebook-adds-hcard-and.html implemented hCards and vCards] for the [http://www.griffith.edu.au Griffith University] [http://www.griffith.edu.au/find/content_phonebook.html online phone book]. Eg. [http://www.griffith.edu.au/cgi-bin/phone_search.pl?string=ben+buchanan&format=search Ben's vCard] and [http://www.griffith.edu.au/cgi-bin/phone_search.pl?string=colin+morris&format=search Colin's vCard]
* WWF-Australia [http://wwf.org.au/about/contactdetails/ contact details page]
* [http://rasterweb.net/raster/ Pete Prodoehl] used the hCard format on his [http://rasterweb.net/raster/contact.html Contact page] and his [http://rasterweb.net/portfolio/ Portfolio]
* [http://amette.eu amette] uses the hCard format in a module of his TikiWiki powered blog and a more complete hCard on his [http://amette.eu/contact contact page]
* [http://staff.washington.edu/oren/weblog2/ Oren Sreebny] has an hcard on his blog main index template
* [http://www.cs.brandeis.edu/~zippy/ Patrick Tufts] has an hCard on his homepage.
* [http://ascii20.blogspot.com/ Mathias Kolehmainen and Jamie Taylor] have hCards on their weblog.
* [http://www.hoppsan.org/jamesb/blogger/ Barnaby James] has a hCard on his weblog.
* [http://esa-education.com/schools/map ESA Education] Uses hCards for their 100+ schools and each of the individual school sites.
* [http://www.thereisnocat.com/#vcard Ralph Brandi] has added an hCard to the sidebar of his weblog as a result of Tantek Ãelik's portion of the Microformats presentation at SXSW 2006.
* [http://www.pierce.ctc.edu/ephone/ Pierce College] -- community college directory uses hCard on all individual directory entries.
* [http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2006/ the Institutional Web Management Workshop 2006] have marked up all their [http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2006/committee/ speakers with hCard].
* http://wikitravel.org/en/Singapore/Sentosa. Wikitravel is experimenting with hcard on its travel guides. This guide uses hcard for all its business listings. More info on http://wikitravel.org/en/Wikitravel_talk:Listings.
* [http://www.musik-erber.de/ Musik-Erber] uses to present contact information at the sidebar
* [http://cdevroe.com/about/#contact Colin D. Devroe] uses hCard to display his contact information on his about page
* The ECS (Scool of Electronics and Computer Science at the University of Southampton) [http://www.ecs.soton.ac.uk/people People Pages] use vCard. Contact cjg@ecs.soton.ac.uk if there's any bugs.
* [http://www.southwestern.edu/~ramseyp Pat Ramsey] has his contact information on his blog marked up with hCard. Contact [mailto:ramsey.pat@gmail.com ramsey.pat@gmail.com] if there are any bugs there.
* [http://www.vyre.com/company/contact-us/ VYRE] is a CMS development company with a "contact us" hCard
* [http://www.lefdal.cc/info.php Alf KÃ¥re Lefdal] uses hCard in the markup of his contact information
* [http://www.pignwhistle.com.au/ Pig N Whistle, a chain of pubs in Brisbane, Australia] is using hcard to mark up all the contact pages for its outlets and head office
* [http://www.applianceman-repair-fortbend.com/ac-air-conditioning-repair-katy-tx.html Air Conditioning Katy TX] uses hCard in the footer of the air conditioning repair website. To view an example visit [http://www.applianceman-repair-fortbend.com/sugar-land-appliance-repair.html Appliance Repair Sugar Land]
* [http://kollitsch.de/ Patrick Kollitsch] has built his personal Profil as hCard
* [http://www.audiophile.pl/ Car Audio] uses the hCard in his contacts section.
* [http://www.hbs.edu/faculty/dspar/ Harvard Business School] has hCards on their faculty pages
* [http://openmikes.org/ openmikes.org] uses hCards for open mike venue addresses in its listing detail pages.
* [http://www.intertecnollc.com/ InterTecno, LCC] publishes an hCard on the home page and contact page.
* [http://canaltcm.com/ver/sobre-tcm Turner Classic Movies TCM Spanish website] has published contact details as a hCard
* [http://rejuvenation.com/ Rejuvenation] is now using hCard for contact information.
* [http://www.mattash.com/contact/ Matthew Ash] uses the hCard in his contacts section.
* [http://yarmouthguide.com/business.php Yarmouth Guide] uses hCard for each business details page.
* [http://www.merchantcircle.com MerchantCircle] has embedded an hCard in every one of their 15+ million US business listings.
* [http://citizenspace.us/citizens Citizen Space Citizens] is a list of tenants for a coworking space in San Francisco. The issue was raised that ''nicknames'' are usually located in the middle of ''fn'', which is not valid as per the [http://microformats.org/wiki/hcard-brainstorming#Implied_FN_from_N Implied_FN_from_N] rule. It seems that it should be possible, however, to include a ''nickname'' in the middle of an FN or even between a ''given-name'' and a ''family-name''.

* [http://www.brownbook.net The Brownbook - the open yellow pages] The Brownbook is a peer-produced (like a wiki, but not a using a wiki engine) local business search website. It Uses hCard to allow users to export local business contact details to Outlook or other desktop apps, plus for providing detailed maps from Google.
** Example of a search results page: [http://www.brownbook.net/business/search/?tag=hair+in+egham&x=21&y=4 Hairdressers in Egham]
*** '''suboptimal''': Adresses, e.g "2 Station Rd North, Egham, Surrey", are marked up as <code>street-address</code>
** Example of a single business's details [http://www.brownbook.net/business/view/122516 The Hair Emporium].
*** '''suboptimal''': Adresses, e.g "2 Station Rd North, Egham, Surrey", are marked up as <code>street-address</code>
* [http://www.Sylphen.com Sylphen] is a IT-solutions-provider and uses hCards on the [http://www.sylphen.com/content/kontakt/kontakt.htm Contact]
** '''invalid''' two of the three examples lack the required <code>fn</code> or <code>fn org</code> property
* [http://www.cosmotourist.com www.cosmotourist.com] and [http://www.cosmotourist.de www.cosmotourist.de] A new German and English portal around travel tips. Using hidden hCard for hotel listings, wherever address data is available.
**Hidden.
* [http://www.venncommunications.com/contact/ Venn] uses a hidden hCard on the contact page.
**Hidden.
* [http://www.last.fm Last FM] has hCards hidden on their profile pages e.g. [http://www.last.fm/user/Crok/?scrobbling=t1].
**Hidden.
* [http://krisswatt.co.uk/ Kriss Watt] has hidden an hCard his blog footer.
**Hidden.
* [http://www.fberriman.com/ Frances Berriman] has a hidden vCard in the footers of her website.
**Hidden.
* [http://www.candlescience.com/ CandleScience Candle Supply] added a hidden hcard sitewide.
**Hidden.
* [http://www.meryl.net/ Meryl K. Evans] has a hidden hCard on her homepage.
**Hidden.
* [http://www.highflyerscareers.com High Flyers Careers], India's first flight-crew placement agency uses microformats for their [http://www.highflyerscareers.com/corporate/ corporate information] page. Using standards couldn't be easier or better.
**Has honorific prefixes as part of "fn", rather than marked up separatley.
* Spotstor.com eg - [http://spotstor.com/] uses hCard on profile pages (where user has elected to show contact information).

* [http://www.naturalengland.org.uk/press/default.htm Natural England] (new UK government agency, formed 2006-10-01).
** No "fn" - which makes it invalid.
*[http://drop-off.co.uk G3:2] uses hCard with geo tags in the copyright and on the about me page
** Address data is hidden using CSS.
* [http://zdnet.co.uk/misc/contact/ ZDnet Contact Us Page] supports [[hcard|hCard]].
** by [http://www.subtleasafish.com/ James Myers] and [http://www.fromthefrontend.co.uk/2006/11/23/zdnet-uses-microformats/ David Long]
**Images and e-mail addresses are hidden; telephone numbers do not comply with [http://en.wikipedia.org/wiki/E.123 E.123]
* [http://gbraad.nl/ Gerard Braad] has published an example on his [http://gbraad.nl/site/?p=profile profile] page that is almost consistent with his original [http://gbraad.nl/files/gbraad.vcf vCard] file. Also progress is made for transforming his [http://files.gbraad.nl/foaf.rdf FoaF] file to a hCard encoded representation (also done for my spouse:[http://spouse.gbraad.nl/site/?p=profile Yong Yuan])
** (2005-09-27) PASSED, PASSED
** WARNINGS
*** uses 'n given-name' and 'n family-name' instead of nesting the given- and family- names inside the 'n'
*** has one 'tel' value with a bunch of values stuffed in
*** probably more problems --[[User:RyanKing|RyanKing]] 17:19, 5 Jan 2006 (PST)
* [http://kinrowan.net/ Cori Schlegel] [http://kinrowan.net/blog/wp/archives/2005/07/08/a-problem-with-the-structured-blogging-plug-in-for-wordpress/ discusses how he has updated] [http://kinrowan.net/blog/contact his contact page with hCard]
** INVALID - using 'prefix' instead of 'honorific-prefix' and type's in classnames (in both adr and tel) and has two photo's (the second could be 'logo') --[[User:RyanKing|RyanKing]] 15:15, 5 Jan 2006 (PST)
* [http://landsbank.fo/#hCard Landsbanki FÃ¸roya]
** INVALID - using embedded RDF/XML invalidly

* [http://www.yellowpencil.com/contact/ Yellow Pencil] Using microformats to present company contact information
** First hcard has empty "fn" and no "n". "fn" should be with "org" -- [[User: ScottReynen |ScottReynen]] 21:29, 19 Jun 2006 (CST)

* [http://www.art-switch.com/ArtSwitch/contactUs.html Art-Switch Exchange Limited] uses hCard for their contact details on their contact page.
* [http://onyomo.com/ OnYoMo] uses hCard markup for all addresses listed in their local search results.
* [http://vcardplus.info/show.asp?uid=Z9959-06323 Greg Bays], the author of vCardPlus! has made his sites vCard display page hCard complaint.
* [http://www.rosenblittdentistry.com/contact.php Dr. Jon Rosenblitt] uses hCard icon with '''Add to Address Book''' link.
* [http://www.nfwebsolutions.com/ New Frontier Web Solutions] uses hCard on their front page along with a link pointing to Brian Suda's [http://suda.co.uk/projects/X2V/get-vcard?uri=http://www.nfwebsolutions.com/ X2V].
* [http://shiftingpixel.com/about/the-artist shifting pixel photoblog] has published an hCard.
* [http://thoughtport.blogspot.com/ Aiden Kenny] hasn't published his hCard yet, but he has [http://thoughtport.blogspot.com/2005/07/elemental-particles-of-web.html published his hCard icon]: http://photos1.blogger.com/blogger/4224/444/320/AK-Hcard-icon.gif
* [http://thedredge.org Andy Hume] uses hCards to mark-up the names and URLs of commentors on his blog, e.g. his [http://thedredge.org/2005/06/using-hcards-in-your-blog/ blog post on "Using hCards in your blog"].
* [http://www.bidclix.com/ BidClix]'s [http://www.bidclix.com/AboutContact.html Contact BidClix] page has it's ''contact info'' marked up with an hCard.
* [http://suda.co.uk/ Brian Suda] has managed to embed a photo in [http://suda.co.uk/contact/ his hCard] through the [http://www.ietf.org/rfc/rfc2397.txt data URI scheme] by converting the image to BASE64 code. View the Source to see how this is accomplished. [http://suda.co.uk/projects/X2V/get-vcard.php?uri=http%3A//suda.co.uk/contact/ The X2V link] will extract the image and encode it for a vCard which will be displayed in some address book applications.
** Inspired by this I thought to try the same for SVG at [http://barefoot-ceramics.com/find Barefoot] ...
** <img class="photo" style="display:none;" src="data:image/svg+xml;text,<?xml version='1.0' encoding='UTF-8' standalone='no'?><svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.0' width='50' height='80' id='svg3957'><defs id='defs3959' /><path d='M 28.91433,...32.192802 z' style='fill:#cc4d00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.625;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1' id='path9551' /></svg>" alt="Barefoot">
** Does it work?? Well it parses OK. Some automated tools replace the < with %3C (etc., e.g. Brian Suda's vCard form). Unfortunately Kontact (KDE contacts tool) doesn't handle SVG as a vCard photo or logo format - I don't know if this is a standard. It seems it could work and maybe even does somewhere. Maybe the text field needs to be Base64 encoded? ... see [http://slashdot.org/~pbhj/journal/142382 pbhj's slashdot journal] for a bit more on this.
* [http://cinematreasures.org Cinema Treasures] uses hCard to markup venue information for 10,000+ movie theaters.
* [http://www.w3.org/People/Connolly/events/ Dan Connolly's index of events and talks] has hCards for many of the people he has met at those events. In Mar 2006, he moved a bunch of hotel contact info from his PDA to this page; it's now up to 32 hCards.
* [http://doncrowley.blogspot.com/ Don Crowley] has published [http://www.crowley.nl/hcard.html his hCard] as well as a nifty hCard button: http://www.crowley.nl/images/hcard.png
* [http://loadaveragezero.com/hnav/contact.php Douglas W. Clifton] added all types of contact information
* [http://eventful.com Eventful] publishes all of its venue information pages with embedded hCards.
* [http://www.iowamilitaryveteransband.com/members/ Iowa Military Veterans Band Contacts] - 95 hCards [http://weblog.randomchaos.com/archive/2005/10/24/Microformats/ marked up by Scott Reynen]
* [http://JackWolfgang.blogspot.com Jack L. Wolfgang II] has [http://jack.randomata.com/resume/ converted the addresses in his resume to hCards].
* [http://www.efas.fupl.asso.fr/efas/_Mathieu-Drouet_.html Mathieu Drouet] and [http://www.efas.fupl.asso.fr/efas/_Annie-Leger_.html Annie Leger] both have hCards
* [http://www.oliverbrown.me.uk/ Oliver Brown] has published his hCard.
* [http://www.paradigmproductions.org/contact/ Paradigm Productions] published a vCard as a <code>ul</code> (marked up by [http://www.linkingarts.com/ Peter Jacobson])
* [http://www.splintered.co.uk/ Patrick H. Lauke] has marked up [http://www.splintered.co.uk/about/ his contact info with hCard].
* [http://blah Paul Schreiber has published his hCard on [http://paulschreiber.com/about/?contact his about page].
* [http://paulschreiber.com/blog/ Paul Schreiber]'s [http://concerts.shrub.ca/ Sunnyvale House Concerts] site publishes hCards for upcoming artists, as well as an hCard for the page itself. In addition the [http://concerts.shrub.ca/shows Past Shows] page contains hCards for all past artists.
* [http://www.paulmichaelsmith.com/blog/hcard.htm Paul Smith] has created an hCard page which is Human Readable, and a link to X2V passing the same hCard page to generate a vCard.
* [http://www.windley.com/archives/2005/07/hcards_trying_o.shtml Phil Windley has published] [http://phil.windley.org/hcard.html his hCard].
* [http://www.go-curiosity.com/about.htm Piercarlo Slavazza] has published an hCard.
* [http://zooibaai.nl/ Rob Mientjes] has published his hCard on [http://zooibaai.nl/about/ his about page].
* [http://rbach.priv.at/Contact Robert Bachmann] has published his hCard and [http://rbach.priv.at/Images/hcard a button].
* [http://blah Scott Reynen has published his hCard on [http://www.randomchaos.com/document.php?source=scott_reynen his profile page].
* [http://www.stackframe.com/ StackFrame, LLC] has published [http://www.stackframe.com/people/ employee] and [http://www.stackframe.com/contact/ general] contact information as hCards.
* [http://www.wolfsreign.com Steven Ametjan] has published his hCard on [http://www.wolfsreign.com/about/ his about page].
* [http://tantek.com/microformats/2005/syndicate/speakers-list.html Syndicate - Speaker List] as a set of hCards
* [http://tagcamp.org/index.cgi?ContactList TagCamp contact list]
* [http://www.deadringerart.com/ The Brothers McDowell] have hCards at their Contact page.
* [http://twinsparc.com/ Twinsparc] put an hCard in the header and footer of all their pages.
* [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference speakers page marked up with hCard]
* [http://www.uoguelph.ca/directory/ The University of Guelph] includes hCard info in its directory.
* [http://www.echildcare.com.au/ The Australian Child Care Index] has over 3000 entries listing child care services across Australia - and every single one is marked up with an hCard!
* [http://www.cadforless.com/partners/ CADforless, Inc.] we listed our partners using hCard
* [http://avon.com/ Avon] - publishes all 40,000+ Avon representatives' contact info with hCard.
* [http://flock.com/about Flock About] page supports hCard microformat.
** by [[implementations#Flock|Flock]]
* [http://www.iowamilitaryveteransband.com/members/ Iowa Military Veterans Band]
* [http://www.nature.com/ Nature homepage], uses [[XOXO]].
** by [[implementations#Nature Publishing Group|Nature Publishing Group]]
* [http://concerts.shrub.ca/shows Sunnyvale House Concerts] supports hCard and [[hcalendar|hCalendar]].
* [http://www.bath.ac.uk/ University of Bath] [http://www.bath.ac.uk/contact/ Person Finder] supports hCard, e.g. see [http://www.bath.ac.uk/person/139897 Mr T Natt] page.
* [http://www.monster-prague.cz/ Monster Prague Openings] supports hCard, e.g. home page, contact list to come.
* [http://www.vogelelaw.com/contact.html Colette Vogele] has an hCard on her contact page with many types of name and contact information. (Marked up by [http://www.talkingtiger.net Naomi Raine]).
* [http://www.fixya.com/repair/cars/us/ca/san_francisco FixYa] (the troubleshooting site) has an hCard (vCard) in the repair directory displaying information about all kinds service providers.
* [http://www.alive77.cn/ z.Yleo77] it's my blog, from now on,supports hCard, eg: article pages..
* [http://www.wfl-networks.co.uk/ WFL-Networks Computer Repair in Aylesbury] a localised IT Support company in Buckinghamshire, UK supporting hCard on its contact pages.
* [http://www.elcafedelcentre.com/index.html El Cafè del Centre] uses an hCard for his contact information in firts place.
* [http://www.petardos.org/index.php Petardos 4x4] uses an hCard for his contact information at the footer in all pages.
* [http://www.artimap.com artimap.com] uses vCards for helping the javascript in-page local search-engine.
* [http://www.handballkreis-koeln-rheinberg.de Handballkreis Köln/Rheinberg] uses hCard for contact informations of officials
* [http://www.evopapetarie.ro] uses hCard for contact page.
* [http://www.musiktagespflege-leichlingen.de Musiktagespflege Leichlingen] uses hCard for imprint and contact informations.
* [http://www.atbbuildinginc.com/ ATB Building Royal Oak MI] is using hCard on the contact page of their website.
* [http://www.badspiderbites.com/ Bad Spider Bites] uses hCard on their about page for customer submissions and contact information.
* [http://www.xn--mxacivya8br.net/ Φαψεβοοκ] Φαψεβοοκ uses hCard on their [http://www.xn--mxacivya8br.net/about-us/ Φαψεβοοκ about page] for customer contact information.
* [http://www.xn--oxaagxsa.com.gr/ Γοογλε] Γοογλε uses hCard on their [http://www.γοογλε.com.gr/terms/about-us/ Γοογλε about page] for customer contact information.
* [http://www.gogole.us.com/ Gogole] Gogole uses hCard on their [http://www.gogole.us.com/terms/about-us/ Gogole about page] for customer contact information.
* [http://www.gogle.us.com/ Gogle] Gogle uses hCard on their [http://www.gogle.us.com/terms/about-us/ Gogle about page] for customer contact information.
* [http://www.gooogle.us.com/ Gooogle] Gooogle uses hCard on their [http://www.gooogle.us.com/terms/about-us/ Gooogle about page] for customer contact information.
* [http://www.zappbug.com/ ZappBug] uses hCard markup on [http://www.zappbug.com/contact/ their contact page].
* [http://www.kalayaffa.co.il/ Kala Yaffa] uses hCard in front page describing the business.
* [http://www.cartuse-imprimante.com/ Cartuse Imprimante], printer cartridges supplier, printers, uses an hCard on home page and contact page of the website.
* [http://www.xn--rgba6eo.sa.com/ جوجل] Google Arabic uses hCard on their [http://www.جوجل.sa.com/terms/about-us/ جوجل about page] for customer contact information.

== examples by category ==
'''Want hCard?''' Get started with writing an [[hcard|hCard]] using the [http://microformats.org/code/hcard/creator hCard creator] to write up some contact information, [[validators#hCard|validate]] and publish it, or following the [[hcard-authoring|hCard authoring tips]] to add hCard markup to your current site. Check out this section for similar examples of types of pages that benefit from hCard markup.

This section organizes examples into several rough categories as follows. If an example fits in more than one category, use the *last* matching category in this list that matches the specific hCard example(s) in the wild that you are trying to categorize.
# '''[[hcard-examples-in-wild#Individuals|Individuals]]''' - one card per person, perhaps sort alphabetically by "family-name". People with their own hCards (typically) on their own site.
# '''[[hcard-examples-in-wild#Organizations|Organizations]]''' - one card per organization, alphabetical by "fn". Organizations with their own hCard(s) (typically) on their own site.
# '''[[hcard-examples-in-wild#Institutions|Institutions]]''' - which list more than one person, with a count estimating the # of hCards, e.g. 40k for Avon. Also indicate complexity of information supplied, eg. just name+number vs. complete details. Alphabetically sorted by "org" with perhaps a few individuals listed in a single sub-bullet, comma delimited, sorted by "family-name".
# '''[[hcard-supporting-user-profiles|Online Profiles]]''' - which host profiles for more than one person, with a count estimating the # of hCards, e.g. 10m+ for Flickr.com. Alphabetically sorted by company / service name.
# '''[[hcard-examples-in-wild#Online_Venues|Online Venues]]''' - which provide listings for businesses or organizations, with a count estimating the # of venues, e.g. ~10k for Upcoming.org. Alphabetically sorted by service/site name, with perhaps a few specific venues listed in a single sub-bullet, comma delimited, sorted by "fn".
# '''[[hcard-examples-in-wild#Event_Speakers|Event Speakers]]''' - event pages where the speaker for the event is marked up with hCard.
# '''[[hcard-examples-in-wild#Speakers_Listings|Speakers Listings]]''' - event sites' speakers pages where the speakers are marked up with hCard. Sort by date, sub-grouped by year. Most recent first. Perhaps a few individuals listed in a single sub-bullet each event, comma delimited, sorted by "family-name".
# '''[[hcard-examples-in-wild#Group_Blogs|Group Blogs]]''' - blogs with multiple authors marked up with hCard
# '''[[hcard-examples-in-wild#Wiki_Templates|Wiki templates]]''' - community wikis that have templates that automatically generate hCards on pages
# '''[[hcard-examples-in-wild#Authors|Authors]]''' - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
# '''[[hcard-examples-in-wild#Search_Results|Search Results]]''' - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.
# '''[[hcard-examples-in-wild#Listing_Contact|Listing Contact]]''' - contact information for a listing like a job posting, for sale offering, etc.

In addition there is a separate "[[hcard-examples-in-wild#UTF8_Examples|UTF8 Examples]]" section that can be used to put another link to any hCard examples in the wild which exercise various non-ASCII7 / non-english characters for various property values.

As each section itself become quite large (we might be there already, once we sort through the above "Reviewed Examples"), it will probably be moved to a separate page, leaving its heading here in place, and replacing its contents here with a link to the separate page and perhaps a stats summary.

=== Individuals ===
Groupings alphabetically by "family-name".

Nicely styled:
* [http://npdoty.name/ Nick Doty]'s home page has a very cleanly designed hCard with a map background indicating his current general geographic location.
* [http://www.jaredhanson.net/ Jared Hanson]'s home page has a beautiful hCard with numerous ways of contacting him, and live updating of his online status on various messaging networks (uses javascript).
* [http://timvandamme.com/ Tim Van Damme]'s home page is a beautiful hCard (click the "About" tab to have Operator recognize it if it's not immediately active).

Simple web pages (sorted by family name)

B:
* [http://dbaron.org/ David Baron]'s home page is marked up with hCard.
* [http://abernier.name Antoine Bernier]'s UID hcard:
** Dynamic VCF download link (through [http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri= hcard parser])
** Dynamic QRcode (through [http://microform.at/hcard2qrcode/ hcard2qrcode])
** Dynamic avatar (through [http://www.gravatar.com/ Gravatar])
** [http://wiki2008.openid.net/Delegation openID] ready
** [http://hcard.geekhood.net/?url=http%3A%2F%2Fabernier.name valid]
* [http://www.eugenbusoiu.com Eugen Busoiu]'s home page marked up with hCard
C/Ç:
* [http://tantek.com/ Tantek Çelik]'s home page includes an inline author hCard at the bottom of the page.
* [http://www.vipulschawathe.ind.in/ Chawathe, Vipul] hosts barely (in(head)line CSS) styled resume where hCard is part of by default visible bio-data section, and other (ancestral)sections may be kept visible by user.
* [http://christycollins.net/ Christy Collins]'s home page is a detailed profile hCard.
* [http://christophertcressman.com/ Christopher T. Cressman] put his contact details on [http://christophertcressman.com/ Who is Chris Cressman?] and marked them up with hCard.
I:
* [http://monkinetic.com/ Steve Ivy] with hCard and [http://monkinetic.com/about-this-site.html about page] with the usual suspects + XFN on 'url's, photo.
J:
* [http://www.ryanmjones.com Ryan Jones]'s home page is also an hCard.
M:
* [http://factoryjoe.com/hcard.html Chris Messina] has a page set aside with his contact details.
* [http://madebyjordan.com/ Jordan Moore]'s blog contains an inline hCard.
R:
* [http://blog.roub.net/ Paul Roub] has an hCard for himself on his blog's home page.
S:
* [http://www.w3.org/People/Smith/hcard/ Michael(tm) Smith has an hCard] on a page linked from [http://www.w3.org/People/Smith/ his W3C staff page]
** note lack of 'n' property but explicit use of 'given-name' and 'family-name' - more evidence we should drop the 'n' requirement (flatter is better) [[User:Tantek|Tantek]] 04:10, 6 May 2011 (UTC)
T:
* [http://paultarjan.com Paul Tarjan]'s home page has hCard and is a rel="me" hub
** needs a few minor fixes: http://tr.im/hctvd (links to hCard validator results)
* Patrick Trettenbrein is the operator of [http://skateboardspot.info/ skateboardspot.info] and uses hCard on its [http://skateboardspot.info/cat/about#operator "about" page] for his contact info.
W:
* [http://blogs.msdn.com/cwilso/ Chris Wilson] has an hCard for himself on [http://blogs.msdn.com/cwilso/about.aspx his about page].
* ...
Z:
* [http://www.afteru.co.il/?p=919 Aviran Zazon] has an hCard on his company personal webpage (Staff).
Hidden! Invisible data is strongly discouraged, these examples have been grouped here in the hopes that the authors will someday make their hCards visible:
* [http://ajbrown.org/ A.J. Brown]'s home page includes a hidden hCard at the bottom of the page.

Former. URLs that seem to have broken.
* <nowiki>http://rogieking.com/#contact</nowiki> Rogie King's contact info was marked up with hCard and very nicely styled. (missing as of 2013-03-15)
* <nowiki>http://tomleo.com/about.html</nowiki> Tom Leo's about page had an hCard. (missing as of 2009-08-23)
* <nowiki>http://bogomil.info?l=en/</nowiki> Bogomil Shopov had an hCard for himself (missing as of 2011-125)

=== Organizations ===
Sites for specific organizations with their own hCard on home page, or contact/about page(s). Grouped by country, sorted alphabetically (US first by convention). When this section gets too big we can make a separate business directory page.

==== US orgs ====
* [http://www.pinewoodgroup.com/ Pinewood Shepperton plc] includes an hCard on their home page, and several more upon clicking their "Contact Us" button (found via [http://www.thedrum.co.uk/news/2011/09/07/25776-pinewood-studios-launch-website-created-by-multiply/ 2011-09-07 Pinewood Studios launch website created by Multiply] [[press]] article).
* [http://www.primerica.com/public/contact.html Primerica] uses hCard on "Contact Primerica" page for home office address.
* [http://RippleFxInc.com/ RippleFxInc.com] including both [http://blog.RippleFxInc.com/ Ideas Blog @ Ripple FX] and [http://wiki.RippleFxInc.com/ Knowledge Wiki @ Ripple FX] use hCard markup and allows for vCard download on their page footers; because they care, the same is standard on every site they design.
* [http://www.sfmoma.org/ San Francisco Museum of Modern Art] (SFMOMA)'s home page and pages in general have their address marked up in hCard.
* [http://www.unisonarts.org/ Unison Arts Center] home page has an hCard with [[adr]], [[geo]], tel, email, and shows up with a [https://www.google.com/search?q=unisonarts search result rich-snippet] with map pin <span style="white-space:nowrap">http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png address</span> underneath, and call out map box using lat/long. ([https://twitter.com/anewc2/status/225592163109584899 as tweeted 2012-07-18])
* [http://www.juixing.com Juixing.com - juice recipes] uses hCard markup on recipe pages.

==== Australia orgs ====
* [http://www.brdatasystems.com.au/contact-us.html B&R Data Systems] is an organisation hCard. We have also used the technorati tool to download as a vCard, which I think is useful for a business.

==== England orgs ====
* [http://www.alexandersremovals.co.uk/ Alexanders Removals] uses hCard for business address and contact details.
* [http://www.confidence2smile.co.uk/ Confidence 2 Smile] uses hCard for business address and contact details.
* Counselling Psychologist London (counsellingpsychologistlondon.com) uses hCard for practice contact details for the page [http://counsellingpsychologistlondon.com/londonpsychologist.html private psychologists in london]
* [http://www.dovetaildental.co.uk/ Dovetail Dental] uses hCard for business address and contact details.
* [http://www.electricalcerts.co.uk/ Electrical Certs] uses hCard for business address and contact details.
* [http://www.guaranteemyrent.com/ Guarantee My Rent] uses hCard on their [http://www.guaranteemyrent.com/contact/ Contact us page]

==== France orgs ====
* [http://www.fnacspectacles.com fnacspectacles], (online ticket office) uses hCard (vcard) and hCalendar (vevent) on events. Example [http://www.fnacspectacles.com/place-spectacle/manifestation/Film-PIERRE-RABHI---AU-NOM-DE-LA-TERRE-PRAB.htm Film Pierre Rahbi - Au nom de la Terre] (note the english section on http://www.fnactickets.com/ does not support microformats)
* [http://www.vtcreative.fr/ Vtcreative] uses hCard in the footer on the home page.

==== Spain orgs ====
* [https://qoolife.com Qoolife] uses hCard for the hospitals, medical centres and online practices in their directory. E.g. [https://qoolife.com/s/instituto-andaluz-de-neurologia-pediatrica Inst. Andaluz Neurología Pediátrica].

==== Germany orgs ====
* [http://www.hsg-kl.de/impressum/index.php Hohenstaufen Gymnasium Kaiserslautern] has hCard contact info
** '''suboptimal''': <code>adr</code> subproperties are not recognized due to lack of explicit "adr" property.
*** evidence that has helped drive the flatter design of [[microformats-2]] including h-card which permits adr properties, e.g. 'street-address' directly inside the hCard instead of requiring an explicit 'adr' in the hierarchy. - [[User:Tantek|Tantek]] 01:46, 17 May 2012 (UTC)

==== Georgia orgs ====
* [http://www.serviceklimatistikon.gr/contact/ magiClima's contact page] uses for customer contact information.

==== Israel orgs ====
* [http://artprints.co.il/contact.html Art Prints contact information]
* [http://printsolution.ro reincarcari cartuse] uses hCard on contact listings.
* [http://www.troya-garden.co.il Troya Garden wedding hall contact information]
* [http://www.taim.co.il/%D7%A4%D7%A8%D7%98%D7%99-%D7%94%D7%AA%D7%A7%D7%A9%D7%A8%D7%95%D7%AA Sandwich Bar contact information]

==== Italy orgs ====
* [http://www.webmotion.it Webmotion - Siti internet] uses hCard markup on their [http://www.webmotion.it/contatti contact page].
* [http://www.numidia.it Numidia.it] uses hCard markup for their [http://www.numidia.it/#/direzioni contact info].

==== Netherlands orgs ====
* [http://www.kdvkabouterbos.nl/ Kinderdagverblijf Kabouterbos], a day care / nursery that uses an hCard for their contact information (footer).
* [http://www.simourix.nl Simourix] At the top of each page you'll find our hcard. Only the address, phone number and email address are visible, but the actual hcard contains much more info.

Mis-sorted - this should be moved to a search results section:
* [http://www.michrome.com Michrome Marketing Lists (UK)] use hCard on all their search result data. For example, [http://michrome.com/free-leads/162-Bradford-BD9 Startup Companies in Bradford].

Old: (these sites used to have hCard, some may have gone offline)
* <nowiki>http://technorati.com Technorati</nowiki> (2004-2011)
** <nowiki>http://technorati.com/about/ about, http://technorati.com/press/ press, and http://technorati.com/about/contact.html contact</nowiki> pages with hCard and have "Add to Address Book" links with the <nowiki>http://feed.technorati.com/contacts/ Technorati Contacts Feed service</nowiki>.
* <nowiki>http://technorati.jp Technorati Japan</nowiki> (2004-2011)
** <nowiki>http://technorati.jp/about/contact.html contact</nowiki> page marked up with hCard.

==== Romanian orgs ====
* [http://www.myman.ro MyMan.ro - online store] uses hCard markup on product pages.

==== Russia orgs ====
* [http://xn----dtbqhchsfl0ah.xn--p1ai/ Buy Rockwool] uses hCard markup on its [http://xn----dtbqhchsfl0ah.xn--p1ai/%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D1%8B/ contact page].

==== Scotland orgs ====
* [http://www.fdantiques.com/contact.asp Hannies Antiques Ltd contact page] has an hCard with geo too.

==== Uruguay orgs ====
* [http://blog.cuboxlabs.com/ Cubox labs] has a nice contact info hCard on their blog home page with address, email, telephone, twitter, github.

=== Institutions ===
* Mozilla's WebFWD [https://webfwd.org/about/experts/ experts] and [https://webfwd.org/about/team/ team] pages have hCards, including [[microformats-2]] h-card markup.
* [http://conferences.oreillynet.com/contacts.csp O'Reilly's Conferences Team page] has hCards for their team (~14) with a link to "Download the below contact info in vcf format" that uses the old Technorati contacts feed service to convert the hCards into vCards.
** needs updating to use [[H2VX]] instead of Technorati
** '''suboptimal''': The "org" shouldn't be hidden with "display:none". Instead, use the [[include-pattern]] to include the "org" from text elsewhere on the page (to avoid duplicating the text).

'''with some problems:'''
* The [http://www.ibm.com/contact/employees/ IBM Employee Directory] returns hCards in its query results
** E.g. [http://www.ibm.com/contact/employees/servlets/lookup?country=us&language=en&search_country=all&lastname=Kaply&firstname=Michael search for Michael Kaply],
** but with some problems:
*** '''invalid''': no "fn" (would be addressed by the [[hcard-brainstorming#Implied_FN_from_N|implied fn from n proposal]])
*** '''suboptimal''': adr has no children and thus is not providing any data (may be addressed by the [[hcard-brainstorming#implied_adr_subproperties|implied adr subproperties proposal]])
* [http://www.boltonmuseums.org.uk Bolton Museum and Archive Service] uses hCard on its
**[http://www.boltonmuseums.org.uk/about/contact/ Contacts] page
***'''invalid''': Several have no "fn"
**and on each of its visitor attractions pages e.g. on the [http://www.boltonmuseums.org.uk/visiting/findhallthwood/ Hall i' th' Wood location page].
***'''suboptimal''': "email" and "tel" properties mistakenly include "Email:" and "Telephone:" labels.
* [http://soap.stanford.edu/ Stanford Online Accessibility Program] has implemented hCard on every page
** '''suboptimal''': positioned off screen via CSS
* [http://www.belkin.com/pressroom/releases/uploads/10_09_06SportCommand.html Belkin Press Release] - All Belkin press releases since October 2006 use hCard and vCard for company contact info.
** '''invalid''': Example has 1 (out of 3) invalid hCard due to lack of "fn".
* [http://www.alexa.com Alexa Internet] marked up its [http://www.alexa.com/site/company/managers managers' page] with hCard.
** '''suboptimal''': job "title" is included inside within "fn" property.
* ...

old:
* 2005-2010(?) <nowiki>http://technorati.com/about/staff.html Technorati's Staff page had hCards for its employees (~31)</nowiki>
** E.g. <nowiki>http://technorati.com/about/staff.html?s=matthew_levine#matthew_levine Matthew Levine, http://technorati.com/about/staff.html?s=ryan_king#ryan_king Ryan King, etc.</nowiki>

=== Online Profiles ===
* See [[hcard-supporting-profiles]].

=== Online Venues ===
* [http://www.airfix.com/stockists-and-distributors/ Airfix Stockists and Distributors], e.g. [http://www.airfix.com/stockists-and-distributors/?postcode=b1+1bb&root_rid=1&search.x=0&search.y=0&search=search]
**'''suboptimal''': <code>street-address</code> contains street address, locality and region (e.g. "99 Hobs Moat Rd, Solihull, W. Midlands")
**'''suboptimal''': <code>postal-code</code> and <code>country-name</code> include preprended commas
**'''suboptimal''': <code>fn</code> is used; should be <code>fn org</code>
* [http://citysearch.com/ Citysearch] supports hCard (e.g. [http://seattle.citysearch.com/profile/10767458/seattle_wa/tulio_ristorante.html Tulio Ristorante in Seattle] and [http://sanfrancisco.citysearch.com/profile/46396865/san_francisco_ca/four_barrel_coffee.html Four Barrel in SF]) nested inside an [[hreview-aggregate]].
* [http://www.easthampshire.org/ easthampshire.org] - hCard on events and events map - e.g. http://easthampshire.org/eventdetail/wine_society_evening/1372606 and http://easthampshire.org/eventmap/wine_society_evening/1372606 built by [http://www.callendercreates.com Callender Creates]
* [http://foursquare.com Foursquare] supports hCard on venue pages, e.g. [https://foursquare.com/v/four-barrel-coffee/480d1a5ef964a520284f1fe3 Four Barrel Coffee]
* [http://rinklinks.ca/ RinkLinks.ca: A Comprehensive Rinks and Arenas Directory for North America] supports an hCards for listings in their directory.
* [http://www.sydneydirectory.org/ Sydney Directory Wiki] supports hCard and geographical coordinates for locations, e.g. the [http://www.sydneydirectory.org/index.php/Opera_House Sydney Opera House].
* [http://webmaker.org Webmaker] (by Mozilla) supports hCard (and [[uf2]] h-card) on venues of events, e.g. [https://webmaker.org/en-US/events/192f56eb9/ IndieWebCamp 2012] (as [https://twitter.com/microformats/status/212207925643587585 tweeted 2012-06-12]).

=== Event Venues ===
* [http://eventbrite.com Eventbrite] events all have their venues/locations marked up with hCard, e.g. [http://csswgtucson.eventbrite.com Meet The W3C CSS Working Group!]
* ...

=== Event Speakers ===
* [http://fluentconf.com/fluent2012 O'Reilly fluent conference 2012] sessions, e.g. [http://fluentconf.com/fluent2012/public/schedule/detail/25831 Federated Wiki Mashes Data in Your Browser] have speakers marked up with hCard.
* ...

=== Speakers Listings ===
* ... lots more to add from events since 2007, e.g. every dConstruct etc.

==== 2007 ====
[[to-do]]: check 2007 [[presentations]] as they likely contain links to conferences that marked up their speakers page(s) with hCard.
* 09: [http://2006.dconstruct.org/speakers/ d.Construct 2007 speakers]
==== 2006 ====
[[to-do]]: check 2006 [[presentations]] as they likely contain links to conferences that marked up their speakers page(s) with hCard.
* 09: [http://2006.dconstruct.org/speakers/ d.Construct 2006 speakers]
==== 2005 ====
[[to-do]]: check 2005 [[presentations]] as they likely contain links to conferences that marked up their speakers page(s) with hCard.
* 12: [http://tantek.com/microformats/2005/syndicate/speakers-list.html Syndicate - Speaker List] (hCarded version hosted at tantek.com)
* 10: [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference 2005 -- Speakers] (hCarded version hosted at tantek.com)
* 09: [http://web.archive.org/web/20051102094339/we05.com/ Web Essentials 05] - [http://web.archive.org/web/20051102094339/we05.com/presenters.cfm The Presenters] <nowiki>original URL: http://we05.com/presenters.cfm</nowiki> (appears to have stopped working as of 2007-12-18, perhaps earlier). Web Essentials 2005 (we05) was the [http://tantek.com/log/2005/10.html#d06t1720 first conference to adopt hCard and hCalendar] on their website and marked up all their presenters with hCard.

=== Group Blogs ===
* The [http://www.ibm.com/shortcuts/ IBM Shortcuts Podcast] has authors marked up with hCard but has some problems:
** '''hidden''': The root hCard element as well as every property contained therein is made invisible through a style attribute containing "position:absolute; visibility:hidden".

=== Wiki Templates ===
* Wikipedia
**Wikipedia-EN
*** People. starting to roll-out on articles about people, for example [http://en.wikipedia.org/wiki/Albert_einstein Albert Einstein]. The nature of Wikipedia means that there are a large number of templates to update (Albert's is "infobox scientist; there's also "infobox military people", "infobox musician" and so on, almost ad infinitum). DoB is only included if it's entered using a birth-date template, not as raw text.
*** Places/orgs. starting to roll-out on articles about places, for example on UK Railway station template, e.g. [http://en.wikipedia.org/wiki/Birmingham_New_Street Birmingham New Street station] (includes Geo); and cities, for example [http://en.wikipedia.org/wiki/New_York_City New York]. See above for note on Wikipedia templates.
***[http://en.wikipedia.org/wiki/Category:Templates_generating_Geo Wikipedia templates generating Geo]
****'''hidden''' - for example [http://en.wikipedia.org/wiki/List_of_Minnesota_State_Parks List of Minnesota state parks]; [http://en.wikipedia.org/w/index.php?title=Alberta_Highway_60&diff=prev&oldid=157308650 Alberta Highway 60]
****Note also removal of hCard properties, e.g. [http://en.wikipedia.org/w/index.php?title=List_of_Gaudi_Buildings&diff=prev&oldid=157704557 List_of_Gaudi_Buildings]
*** Any Wikipedia editors willing to assist with updating templates should see [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats Wikipedia's microformat project]; [http://en.wikipedia.org/wiki/Category:Templates_generating_hCards Wikipedia templates generating hCards]
***Unfortunately, [http://en.wikipedia.org/w/index.php?title=Template:Infobox_Protected_area&diff=prev&oldid=152308153 other editors are already breaking some of the implementations on Wikipedia]; e.g. [http://en.wikipedia.org/wiki/Grand_Canyon_National_Park Grand Canyon National Park]; [http://en.wikipedia.org/w/index.php?title=List_of_islands_of_Argentina&diff=prev&oldid=155590535 removal of "region" attributes]
*** <s> Wikipedia now has a template, [http://en.wikipedia.org/wiki/Template:Hcard-geo hcard-geo], for in-line hCards with coordinates, such as that on [http://en.wikipedia.org/wiki/Engine_Arm Engine Arm]</s>
**Wikipedia-UK (Ukranian) starting to roll out on biographies e.g. [http://uk.wikipedia.org/wiki/%D0%93%D0%B5%D1%82%D1%8C%D0%BC%D0%B0%D0%BD_%D0%92%D0%B0%D0%B4%D0%B8%D0%BC_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87 Vadym Hetman]
* Wikiqueer
** [http://www.wikiqueer.org/w/Category:Templates_generating_hCards Wikiqueer templates generating hCards]
** [http://www.wikiqueer.org/w/Category:Templates_generating_microformats Wikiqueer templates generating microformats] in general

=== Authors ===
* [http://time.com TIME.com] marks up articles with hAtom including authors with hCard, e.g. [http://techland.time.com/2012/05/10/like-to-brag-on-facebook-or-twitter-thats-because-self-disclosure-is-like-eating-and-sex-says-study/ Like to Brag on Facebook or Twitter? That’s Because Self-Disclosure Is like Eating and Sex, Says Study]
* [http://lazylibrary.com LazyLibrary] uses author hCard's on every book page. Example: [http://lazylibrary.com/book/0751370576]
** '''suboptimal''' [http://lazylibrary.com/book/0751370576 Example] has an fn of "Dorling Kindersley, David West Reynolds" which should be split into two hCards! (site would also benefit from hReview).
* ... many more (e.g. see unsorted list above, verify and move here)

=== Search Results ===
* [http://www.bath.ac.uk/contact/ University of Bath] Person Finder results are encoded with hCards so you can easily create a vCard from any result.
** '''invalid''': attempt to use Implied-N optimization where that's not possible,
** '''suboptimal''': honorific-prefix could be explicitly marked up
*** Error appears for external users only. Won't be fixed any time soon. -- [[User:PhilWilson|PhilWilson]] 00:03, 28 Jan 2006 (GMT)
* [http://www.yourtraces.com/social_index.php YourTraces SocialSearch] Try ''high results'' (hohe Relevanz) to get only websites marked with hcard as a person.

=== Listing Contact ===
Contact information for listings, e.g. job postings, items for sale, etc.
* [http://bestsecurityjobs.co.uk/ Best Security Jobs] is a UK jobs board that uses hCard on the homepage for job listings.
* [http://printsolution.ro reincarcari cartuse] uses hCard on contact listings.
* [http://seogadget.co.uk/search-marketing-executive-upto-30k-portsmouth/ search marketing executive] published by [http://seogadget.co.uk/ SEOgadget].
** '''invalid url property''' - href of the url property element lacks <nowiki>http://</nowiki>, thus being invalid and linking to a non-existent relative URL.
** '''invalid XHTML''' - W3C validator reports this page as [http://validator.w3.org/check?uri=http://seogadget.co.uk/search-marketing-executive-upto-30k-portsmouth/ XHTML 1.0 Transitional] (109 errors as of 2009-08-20).

===UTF8 Examples===
These examples all contain one or more characters in UTF8 that are outside the ASCII7 range and make for excellent test cases to make sure you are handling UTF8 properly throughout your hCard parsing and transforming. And especially if you are generating vCards, these test cases will help you make sure you are generating UTF8 vCards in such a way that can be recognized by UTF8 supporting vCard applications. Sorted roughly alphabetically (per Unicode).
* [http://imageconcept.ru/contacts.html ImageConcept (ИмиджКонцепт)] embedded UTF8 encoded hCard with Russian characters in «Contacts» page of website.
* [http://sphinx.net.ru/author/ Dmitry Dzhus] embedded his UTF8 encoded hCard with Russian characters in Â«AuthorÂ» page of his website.
* [http://ecdlweb.com/ ECDLWeb.com] encodes hCard and Geo information of ECDL and ICDL test centres in UTF-8. Test case for Central European ([http://ecdlweb.com/en/czech-republic/sps-ceska-lipa Czech], [http://ecdlweb.com/en/hungary/athene-idegenforgalmi-informatikai-es-uzletemberkepzo-szakkozepiskola Hungarian] etc.) and [http://ecdlweb.com/en/belarus/belhard Cyrillic] characters.
* [http://tantek.com/ Tantek's Thoughts] encodes Ãelik as inline UTF8.
* [http://technorati.jp/about/contact.html Technorati Japan contact information] encodes Japanese as inline UTF8.
* [http://uk.wikipedia.org/wiki/%D0%93%D0%B5%D1%82%D1%8C%D0%BC%D0%B0%D0%BD_%D0%92%D0%B0%D0%B4%D0%B8%D0%BC_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87 Vadym Hetman] (Wikipedia-UK (Ukranian))

==== nickname only ====
These UTF8 examples only have UTF8 for the "nickname" property and are thus are a bit easier for testing than the previous examples.
* Various Wikipedia-EN articles, e.g. the "nickname" in: [http://en.wikipedia.org/wiki/Noyabrsk Noyabrsk] (Russian), [http://en.wikipedia.org/wiki/Thessaloniki Thessaloniki] (Greek), [http://en.wikipedia.org/wiki/Kyoto Kyoto] (Japanese) and [http://en.wikipedia.org/wiki/Beijing Beijing] (Chinese)

===non-HTML examples===
* [http://dannyayers.com/misc/microformats/hcard-svg Danny Ayers' SVG hCard demo]

=== missing ===
Examples that used to have one or more hCards but now don't seem to have any. If you do find one, please include direct links to at least two (assuming there are two or more) pages at the referenced site that have one or more hCards.
* [http://mapquest.com Mapquest] now supports hCards for business and places in the search results (e.g. [http://www.mapquest.com/maps/map.adp?searchtype=address&country=US&searchtab=home&formtype=address&cat=Whole+Foods&city=san+francisco&state=ca search for Whole Foods in San Francisco])
** appears to be missing hCards as of 2008-09-07

== related pages ==
{{hcard-related-pages}}
* [[hcalendar-examples-in-wild|hCalendar examples in the wild]]

value-class-pattern-fr

2014-10-11T03:21:06Z

ChristopheDucamp: Reverted edits by ChristopheDucanp (Talk) to last version by Tantek

<entry-title>Modèle de Classe Value</entry-title>

Le modèle de classe "value" provient de l'[[hcard-fr#Extraction_de_Valeur|extraction de valeur]] dans la hCard.

''Les auteurs pensent que le modèle-de-classe-value est désormais complet et prêt à l'emploi pour le balisage.
Les implémenteurs sont encouragés à mettre leurs sites à jour et fournir un [[value-class-pattern-feedback|feedback]].
'''Remarque''', le comportement précis du parsage pourrait être modifié en réponse aux feedbacks des implémenteurs, mais les méthodes sont stables.
Vous devriez suivre cette page pour les mises à jour.''

Voir aussi, l'[http://microformats.org/blog/2009/05/12/value-class-pattern/ annonce sur le blog] (à traduire).

__TOC__
; Editeurs
: <span class="vcard"><span class="fn">[[User:BenWard|Ben Ward]]</span></span>
: <span class="vcard"><span class="fn">[[User:Tantek|Tantek Çelik]]</span></span>
; URL raccourcie
: <kbd>http://tr.im/ClasseValue</kbd>

; Traduction en cours :
: <span class="vcard"><span class="fn">[[User:ChristopheDucamp|Christophe Ducamp]]</span></span>

Parfois, seule une partie d'un élément de contenu doit être utilisée comme la valeur d'une propriété d'un microformat.
Ceci peut arriver quand une propriété a des sous-propriétés optionnelles, telles que <code>tel: type</code> et <code>tel: value</code> dans la [[hcard-fr|hCard]].
D'autres fois, la structure la plus appropriée pour une propriété peut inclure d'autre contenu.

A ces fins, le nom spécial de classe <code>value</code> est utilisé pour marquer l'extraction pertinente de la donnée provenant d'un élément de contenu plus grand.

==Exemples Simples==

Voici le marquage pour un numéro de téléphone de domicile :

fragment vCard :

<source lang=text>TEL;TYPE=HOME:+1.415.555.1212</source>

fragment hCard :

<source lang=html4strict>
<span class="tel">
<span class="type">Home</span>:
<span class="value">+1.415.555.1212</span>
</span>
</source>

Dans ce cas, la <code>value</code> de <code>tel</code> est <code>+1.415.555.1212</code>, et non pas <code>Home: +1.415.555.1212</code>.

Parfois, la valeur pour une propriété microformats doit être découpée en plusieurs morceaux dans le contenu de l'élément représentant cette propriété.
Plusieurs éléments avec un nom de classe "value" (les éléments value) peuvent être utilisés pour extraire et concaténer ces morceaux en une valeur unique pour les propriétés microformats qui attendent des chaînes simples ou des valeurs tel.

Un autre exemple, cette fois-ci utilisant un numéro de téléphone localisée (France) :

<source lang=html4strict>
<span class="tel">
<span class="type">Home</span>:
<span class="value">+33</span> (0) <span class="value">1 42 31 23 23</span>
</span>
</source>

Dans ce cas, la ''data'' valide pour le numéro de téléphone est <samp>+33142312323</samp>, mais la façon dont le numéro de téléphone est présenté en France inclura le <samp>(0)</samp>, pour un appel local.
Ce qui veut dire, qu'à partir de n'importe où dans le monde vous pouvez composer <kbd>+441423123123</kbd>, ou à partir de la France vous pouvez composer <kbd>0142312323</kbd>.
La publication locale communément utilisée interfère avec la donnée, parce que composer <kbd>'''+330'''142312323</kbd> est un numéro invalide.

Dans le marquage, deux classes <code>value</code> ciblent la partie de la chaîne du numéro de téléphone qui produit un numéro international valide, tout en permettant une présentation conventionnelle.

Un autre exemple, ajouter un nom de lieu à des coordonnées [[geo-fr|geo]] :

<source lang=html4strict>
<p>Je flâne dans Montmartre rue Junot
<span class="geo">
48° 53' 16.3206", 2° 20' 5.9712"
(<span class="value">48.887867;2.3349922</span>)
</span>
</p>
</source>

Alors que la chaîne complète est un point geo, c'est seulement les coordonnées encodées en décimales qui doivent être consommées par un analyseur de microformats,
ainsi la classe <code>value</code> l'isole de la forme en degrés, que l'auteur a inclus pour plus de complétude.

==Analyse Fondamentale==
# L'exemple de classe value ne s'applique uniquement qu'aux propriétés qui sont de simples chaînes, des valeurs énumérées, des numéros de téléphone et des dates-heures. L'exemple de classe value n'affecte pas l'analyse des propriétés de type email, URL, URI, UID.
# Là où un élément avec un tel nom de propriété de classe microformat a un descendant avec un nom de classe <code>value</code> (un élément "value"), les parseurs devraient utiliser la portion suivante de cet élément :
## si l'élément value est un élément <code>img</code> ou un élément <code>area</code>, utiliser alors la valeur d'attribut du <code>alt</code> de l'élément.
## si l'élément value est un élément <code>abbr</code>, utiliser alors la valeur d'attribut du <code>title</code> de l'élément.
## pour tout autre élément, utiliser son texte à l'intérieur.
# Là où il y a plusieurs descendants d'une propriété avec un nom de classe de <code>value</code> (plusieurs éléments value)
## si la propriété microformats attend une chaîne simple, une valeur énumérée ou un numéro de téléphone, alors les valeurs extraites des éléments value devraient être concaténées ''sans'' insérer de caractères supplémentaires ou d'espace-blanc.
## si la propriété microformats attend une valeur datetime, voir la section [[#Analyse_Date_et-heure|Analyse Date et heure]].
# Les descendants avec la classe <code>value</code> ne doivent pas être analysées plus profondément qu'à un niveau. Ce qui veut dire, là où il y a un élément <code>foo</code> avec la classe <code>value</code>
qui a un <em>descendant</em> <code>bar</code> avec la classe <code>value</code>, le contenu de <strong><code>foo</code></strong> est pris comme la <code>value</code>.
L'imbrication d'éléments supplémentaires avec la classe <code>value</code> ne peut pas être utilisé pour isoler plus en profondeur une value de propriété.

par ex.

<source lang=html4strict>
<p class="description">
<span class="value">
<em class="value">Puppies Rule!</em>
<strong>But kittens are better!</strong>
</span>
</p>
</source>

Dans cet exemple, <code>description</code> a un enfant ‘<code>value</code>’, et cet enfant a une ‘<code>value</code>’ ''petitenfant''.
Néanmoins, l'analyse des classes <code>value</code> s'arrête au premier niveau, ainsi la data pour <code>description</code> est :
<samp><code><em class="value">Puppies Rule!</em><strong>But kittens are better!</strong></code></samp>, pas simplement <samp>Puppies Rule!</samp>.

== Valeurs Date et heure ==
Quelques propriétés microformats attendent une valeur datetime ISO8601, par ex. [[hcalendar-fr|hCalendar]] <code>dtstart</code> et <code>dtend</code> ou [[hatom-fr|hAtom]] <code>published</code>.

Les auteurs peuvent utiliser le modèle de classe value pour spécifier séparément la date et l'heure, qui sont alors combinés pour spécifier une valeur unique datetime.

Exemple : cette propriété hCalendar 'dtstart' avec des éléments 'value' :

<source lang=html4strict>
<p>La rencontre "afterwork" aura lieu
<span class="dtstart">
<abbr class="value" title="2009-05-19">ce Mardi</abbr>
à <span class="value">19:30</span>
</span>
</p>
</source>

Produit la valeur 'dtstart' suivante :

et les convertisseurs iCalendar produisent le DTSTART suivant :

<source lang=text>
DTSTART:20090519T193000
</source>

L'absence d'une "timezone" indique une "datetime" "flottante", qui est une date-heure indépendante de tout fuseau horaire particulier. Des exemples de datetimes flottantes pourraient être une alarme de réveil que vous paramétrez pour sonner à 8h00, ou un jour de travail ordinaire comme 9h00-17h00.

=== Analyse Date et heure===
Pour toutes les propriétés date et heure (comme définies dans leurs spécifications respectives microformats), les règles suivantes s'appliquent en plus de celles (et dans certains cas les remplacent) des règles de modèles de parsage de classe value vues au-dessus.

Quand un élément "value" est trouvé, parsez une valeur à partir de l'élément comme suit :
* si l'élément est un élément <code>img</code> ou un élément <code>area</code>, utiliser alors la valeur d'attribut <code>alt</code> de l'élément.
* si l'élément est un élément <code>abbr</code>, utiliser alors la valeur d'attribut <code>title</code> de l'élément.
* pour tout autre élément, utiliser son texte à l'intérieur.
* si la valeur a à la fois une date spécifiée ISO8601 et une heure spécifique, utilisez ceux-ci et arrêtez de chercher des éléments "value".
* si la valeur a *seulement* une date spécifique, spécifiquement, correspondant aux modèles de dates suivants ISO8601 (c.a.d. tels que documentés dans le [http://en.wikipedia.org/wiki/ISO_8601 résumé Wikipedia de ISO8601])
** AAAA-MM-JJ
** AAAA-JJJ
** alors utiliser cela comme la valeur de date. Pour les besoins du modèle de classe value, les tirets "-" séparant les années, mois, jour et/ou jour ordinal sont requis.
** ignorer tous les éléments complémentaires "value" qui spécifient la date.
* si la valeur a *seulement* une heure spécifique (avec ou sans fuseau horaire), parsez la pour une valeur time qui puisse correspondre à tout ce qui suit :
** HH:MM:SS-XX:YY
** HH:MM:SS+XX:YY
** HH:MM:SS-XXYY
** HH:MM:SS+XXYY
** HH:MM:SSZ
** HH:MM:SS
** HH:MM-XX:YY
** HH:MM+XX:YY
** HH:MM-XXYY
** HH:MM+XXYY
** HH:MMZ
** HH:MM
** HH sont les "heures" en 24 heures dans le temps, de 00 à 24, avec un 0 optionnel placé devant pour les valeurs inférieures à 10.
** MM sont les minutes de 00 à 59
** SS sont les secondes optionnelles de 00 à 59 (60 pour une seconde). Si omis, inférez 00 secondes.
** XX est le décalage horaire du fuseau, de 00 à 12, avec un 0 en tête optionnel pour les valeurs inférieures à 10
** YY est le décalage en minutes du fuseau horaire, de 00 à 59, même si en pratique ne sont utilisés que des décalages de 00, 15, 30, 45 minutes dans les fuseaux horaires globaux.
** Z est le 'Z' littéral pour indiquer GMT.
** Pour les besoins du modèle de classe value, les deux points ":" séparant heure, minutes et secondes sont requis.
** Néanmoins les deux points ":" séparant les heures et minutes de tout décalage horaire sont "optionnels" et non recommandés afin de faire en sorte qu'une indication de fuseau horaire ne soit pas confondue avec un horaire.
** Un suffixe non sensible à la casse { }"am"|{ }"a.m." pour traiter une valeur HH value de 12 comme 00, ou un suffixe non sensible à la casse { }"pm"|{ }"p.m."pour ajouter 12 à une valeur HH inférieure à 12 - selon [http://en.wikipedia.org/wiki/12-hour_clock l'article de Wikipedia sur l'horloge de 12 heures]. Note : [[X2V]] a implémenté cela.
*** HH:MM:SSam
*** HH:MM:SSpm
*** HH:MMam
*** HH:MMpm
*** HHam
*** HHpm
*** où "am" et "pm" veulent dire "am ou a.m." et "pm or p.m."
*** quand MM est omis, inférer 00 minutes.
** ignorez tous les autres éléments "value" qui spécifient l'heure.
* si la valeur a *seulement* une date-heure spécifique, ou une valeur de zone horaire qui corresponde à n'importe quelle valeur suivante :
** -XX:YY
** +XX:YY
** -XXYY
** +XXYY
** -XX
** +XX
** Z
** XX est le décalage en heures du fuseau horaire, de 00 à 12 avec un 0 optionnel en avant pour les valeurs inférieures à 10.
** YY est le décalage en minutes de la zone horaire, de 00 à 59, bien qu'en pratique seuls les décalages de 00, 15, 30, 45 minutes soient utilisés dans les zones horaires globales.
** Z est le 'Z' littéral pour indiquer GMT.
** ignorez tous les autres éléments "value" qui spécifient la timezone.

Si en parsant les éléments "value", au moins une date spécifique est trouvée, alors la "value" est par dessus-tout valide, et le parseur assemble la valeur datetime en concaténant la date spécifique, "T" et l'horaire spécifique (si l'heure a été spécifiée, avec 00 secondes implicite si aucune seconde n'est fournie), et une timezone spécifique (si la timezone et l'horaire spécifique ont été spécifiés).
* AAAA-MM-JJ - aucun horaire spécifié
* AAAA-MM-JJTHH:MM:SS - heure spécifiée mais pas de timezone. C'est une heure flottante.
* AAAA-MM-JJTHH:MM:SS-XXYY ou
* AAAA-MM-JJTHH:MM:SSZ ou
* AAAA-MM-JJTHH:MM:SS+XXYY - à la fois l'heure et la timezone ont été spécifiées

=== détails spécifiques des formats ===
Ce qui suit sont des détails spécifiques de format et des optimisations qui font usage du modèle-classe-value.

;<span style="font-size:smaller">URL raccourci pour cette section </span>
:http://tr.im/vcpfso (à localiser)

==== hCalendar date dtend implicite ====
Généralement, les événements qui démarrent et finissent le même jour n'affichent seulement la date de l'événement qu'une fois (cela fait sens selon le [[principles-fr|principe]]) DRY (exemples du vrai monde : [http://upcoming.yahoo.com/event/3010807/ Upcoming], ... plus d'exemples avec des URLs aiderait pour être minutieux).

Par conséquent ce serait pratique si nous pouvions sous-tendre une date dtend d'événement [[hcalendar-fr|hCalendar]] à partir de sa date "dtstart" si et seulement si l'horaire (et en option la timezone) était spécifiée pour son "dtend", par ex. :

<source lang=html4strict>
<span class="vevent">
La <span class="summary">soirée</span> aura lieu le
<span class="dtstart">
<span class="value">2009-06-26</span>, à partir de
<span class="value">19:00</span></span> jusqu'à
<span class="dtend"><span class="value">22:00</span></span>.
</span>
</source>

Pour simplifier cela aux auteurs, les processeurs hCalendar pourraient traiter la spécification juste avec l'heure selon les règles de valeur du modèle de classe value, et de ce fait éliminer le besoin d'un span "value" dans le span "dtend" :

<source lang=html4strict>
<span class="vevent">
La <span class="summary">soirée</span> aura lieu le
<span class="dtstart">
<span class="value">2009-06-26</span>, à partir de
<span class="value">19:00</span></span> jusqu'à
<span class="dtend">22:00</span>.
</span>
</source>

Le convertisseurs hCalendar vers iCalendar devraient produire le fragment iCalendard suivant (en tant que partie d'un fichier .ics) provenant de l'un ou l'autre des deux exemples au-dessus :

<source lang=text>
BEGIN:VEVENT
SUMMARY:party
DTSTART:20090626T190000
DTEND:20090626T220000
END:VEVENT
</source>

Note : [[X2V-fr|X2V]] a implémenté la date dtend implicite à partir de dtstart.

Exemples "dans jungle":
* http://microformats.org/wiki/events/2009-08-12-nyc-workshop (exemple du vrai monde, mais sur ce wiki).

==== générateurs iCalendar ====
les implémentations microformats qui consomment [[hcalendar-fr|hCalendar]] et génèrent iCalendar doivent en outre :
# retirer tous les tirets "-" de séparation dans la date.
# retirer tous séparateurs deux points ":" dans l'horaire.
# ajouter un jour complet à toutes les valeurs de propriété <code>dtend</code> hCalendar (manquant d'un horaire spécifié) (inclusion date) afin de générer une valeur de propriété<code>DTEND</code> iCalendar (date excluse) avec le même sens, selon la résolution de la [[dtend-issue-fr|problématique-dtend]].
# exécuter une formule mathématique +/- datetime sur toute valeur timezone , et produire une valeur effective UTC finissant par "Z".

==== hAtom date updated implicite ====
De la même façon, dans les billets de blog qui indiquent à la fois quand ils sont "publiés" et "mis à jour", la date n'est généralement affichée qu'une fois, généralement "publiée" (les exemples du vrai monde aideraient pour plus de minutie).

Par conséquent, ce serait pratique si nous pouvions sous-tendre une date d'entrée "updated" [[hatom-fr|hAtom]] à partir de sa date "published" si et seulement si l'horaire (et en option la timezone) était spécifiée pour son "updated", par ex. pour un billet de blog qui est mis à jour le même jour :

<source lang=html4strict>
<span class="hentry">
<span class="entry-summary">exemple de petit billet de blog</span>
publié le <span class="published">
<span class="value">2009-08-01</span> à <span class="value">12:06</span></span>
et mis à jour à <span class="updated"><span class="value">12:10</span></span>.
</span>
</source>

Pour simplifier cela aux auteurs, les processeurs hAtom pourraient traiter la spécification horaire selon les règles de valeurs des date et time du modèle de classe value, et par conséquent éliminer le besoin d'un span "value" dans le span "updated"

<source lang=html4strict>
<span class="hentry">
<span class="entry-summary">exemple de petit billet de blog</span>
publié le <span class="published">
<span class="value">2009-08-01</span> à <span class="value">12:06</span></span>
et mis à jour à <span class="updated">12:10</span>.
</span>
</source>

==== générateurs Atom ====
les implémentations microformats qui consomment [[hatom-fr|hAtom]] et génèrent Atom DOIVENT en outre :
* normaliser toutes les valeurs date et datetime à la [[RFC3339-fr|RFC3339]].

=== dérivation et tests ===
Cette section est <em>informative</em>.

La gestion des valeurs date et heure dans le modèle de classe value a été intialement [[value-excerption-pattern-brainstorming#date_and_time_separation|brainstormée sur la page the value-excerption-pattern-brainstorming]] et dérivée de cette analyse et des feedbacks. Pour les curieux, les détails historiques peuvent être trouvés ici, avec quelques idées supplémentaires pour extension.

Voir [[value-class-date-time-tests]] pour les tests de cas.

==Parsage de valeur à partir d'un attribut <code>title</code> ==
Le nom de classe <code>value-title</code> permet au diffuseur d'indiquer la valeur de donnée pour une propriété parente contenue dans l'attribut <code>title</code> d'un élément, plutôt que dans le texte à l'intérieur.

Ceci peut être utilisé pour fournir un synonyme dans le contenu, ou utilisé pour publier tranquillement des formes alternatives d'inforamtion pour un parsage microformats, sans affecter la consommation de contenu.

Par exemple, vous pouvez utiliser une localisation avec des dates :

<source lang=html4strict>
<p>C'était
<span class='dtstart'>
<span class='value-title' title='2008'>l'année dernière</span>
</span>
que je commençais à réaliser que mon addiction à la crème de marron coûterait si cher à ce pays.
</p>
</source>

Les règles de parsage pour <code>value-title</code> sont les mêmes que pour <code>value</code> above, avec le changement suivant :

* Là où une propriété microformats a un élément enfant avec le nom de classe <code>value-title</code>, le contenu de l'attribut <code>title</code> de cet élément doit être parsé, plutôt que la portion de l'élément qui devrait être parsée pour un nom de classe de <code>value</code>.

===Utilisation de <code>value-title</code> pour publier des données-machines===

L'usage initial de <code>value-title</code> est utilisé pour publier des formes alternatives, parsables de valeurs de propriétés dans un contexte visible sans l'utilisation de l'élément <code>abbr</code> dont la sémantique supporte déjà l'interprétation de l'attribut "title' comme une forme plus étendue, plus précise du contenu.

L'expérience a montré qu'il y a des cas dans les microformats où un certain nombre d'auteurs veulent inclure une valeur précise et parsable pour une propriété mais ne veulent pas qu'elle soit visible sur leurs pages, même sous forme d'info-bulle.

Par exemple, les datetimes complètes [[ISO8601-fr|ISO8601]] peuvent prêter à confusion pour les lecteurs de la page (comme une infobulle ou au moment d'être lues à voix haute par un lecteur-écran), et les valeurs énumérées telles que la sous-propriété <code>type</code> de la propriété <code>tel</code> de hCard utilise des termes US-anglais, qui ne font pas partie des pages dans toute autre langue.

Parce que ces deux scénarios se sont avérés être des obstacles pour un certain nombre de diffuseurs, dans ces cas, et ces cas seulement, il existe une extension approfondie de l'extraction de value. Cette extension permet aussi la forme parsable de la propriété à publier 'en silence' immédiatement adjacente au contenu respectif visible en local.

Voici un exemple, avec l'usage obligatoire d'un premier élément enfant avec le nom de classe <code>value-title</code>:

<source lang=html4strict>
<p class='tel' lang='fr-fr'>
<span class='type'>
<span class='value-title' title='cell'> </span>
mobile
</span>
<span class='value'>+33 7773 000 000</span>
</p>
</source>

La valeur <samp>cell</samp> est parsée pour la sous-propriété 'type', mais <samp>mobile</samp> est présenté à l'utilisateur.

Dans le cas de dates :

<source lang=html4strict>
<p class='dtstart'>
<span class='value-title' title='2009-03-14T16:28-0600'> </span>
14 mars 2009, vers quatre heures et demi
</p>
</source>

Un parseur microformats lira le format datehoraire ISO8601 <samp>2009-03-14T16:28-0600</samp>, mais les utilisateurs ne verront que <samp>14 mars 2009, vers quatre heures et demi</samp>. Les tests ont montré que le date-heure ISO8601 du dessus n'est exposé en aucun cas à l'utilisateur.

==Parser une valeur provenant d'un attribut <code>title</code> ==
Le nom de classe <code>value-title</code> permet à l'auteur d'indiquer la donnée value pour une propriété parent contenue dans l'attribut <code>title</code> d'un élément, plutôt que dans le texte à l'intérieur.

Ceci peut s'utiliser pour fournir un synonyme dans le contenu, ou utilisé pour publier tranquillement des formes alternatives d'information pour le parsage de microformats, sans impacter sur la consommation du contenu.

Par exemple, vous pouvez utiliser des localisations ponctuelles avec des dates :
<source lang=html4strict>
<p>Ce fût
<span class='dtstart'>
<span class='value-title' title='2008'>l'année dernière</span>
</span>
que je pris conscience que mon addiction au tabac pourrait coûter très cher à la Sécurité Sociale.
</p>
</source>

Les règles de parsage pour <code>value-title</code> sont les mêmes que celles pour <code>value</code> au-dessus, avec le changement qui suit :

* Là où une propriété microformats a un élément enfant avec le nom de classe de <code>value-title</code>, le contenu de l'attribut <code>title</code> de cet élément doit être parsé, plutôt que la portion de l'élément qui devrait être parsé pour un nom de classe de <code>value</code>.

===Utiliser <code>value-title</code> pour publier des données-machines===

L'usage initial de <code>value-title</code> est utilisé pour publier des formes alternatives, parsables des valeurs de propriétés dans un contexte visible sans l'utilisation de l'élément <code>abbr</code> dont la sémantique supporte déjà l'interprétation de l'attribut 'title' comme une forme plus étendue, plus précise du contenu.

L'expérience a montré qu'il existe quelques cas dans les microformats où un certain nombre d'auteurs veulent inclure une valeur précise et parsable pour une propriété mais ne veulent pas qu'elle soit visible dans leurs pages, ni même sous forme de petite bulle.

Par exemple le datetimes complet [[ISO-8601-fr|ISO-8601]] peut être confus pour les lecteurs de la page (que ce soit sous forme de bulle ou quand c'est lu par un lecteur écran), et les valeurs énumérées telles que la sous-propriété <code>type</code> de la propriété <code>tel</code> de la hCard utilise des termes US-English, qui ne font pas partie de pages dans toute autre langue.

Le fait que ces scénarios se sont avérés être des obstacles pour un bon nombre d'auteurs, pour ces cas, et ceux-ci seulement, il existe une extension approfondie de l'extraction de valeur. Cette extension permet une forme parsable de la propriété pour être publiée 'en silence' et immédiatement adjacente avec le contenu visible local y afférent.

Voici un exemple, avec l'usage requis d'un premier élément enfant avec le nom de classe <code>value-title</code> :

<source lang=html4strict>
<p class='tel' lang='fr-fr'>
<span class='type'>
<span class='value-title' title='cell'> </span>
mobile
</span>
<span class='value'>+33 647 730 000</span>
</p>
</source>

La valeur <samp>cell</samp> est parsée pour la sous-propriété 'type', mais <samp>mobile</samp> est présenté à l'utilisateur.

Dans le cas de dates :

<source lang=html4strict>
<p class='dtstart'>
<span class='value-title' title='2009-06-12T09:28-0600'> </span>
le 12 juin 2009, aux alentours de 9h30
</p>
</source>

Un analyseur de microformats lira le format datetime ISO8601 <samp>2009-06-12T09:28-0600</samp>, mais les utilisateurs ne verront que <samp>le 12 juin 2009, aux alentours de 9h30</samp>.
Le test a montré que la datetime ISO8601 au-dessus n'est pas du tout présentée à quelque utilisateur.

===Parsage donnée-machine <code>value-title</code>===

Les navigateurs échouent sur le <code>value-title</code> réduit à une largeur de span égale à <code>0</code>, en ne fournissant en fait aucun rendu visuel, tout en conservant l'élément dans le DOM. Sans dimensions physiques, il n'y a pas d'état 'hover', ainsi aucune infobulle n'est révélée. En outre, l'élément vide n'est pas passé aux couches de technologie assistives telles que VoiceOver. Les lecteurs écrans ne lisent pas les contenus de l'attribut title d'un élément vide <code>span</code>.

Nous avons mené des [[value-excerption-value-title-test|tests approfondis]] de ces comportements de parsage pour assurer l'accessibilité.

''Note : Bien que l'élément <code>value-title</code> soit plus élégant à écrire sans texte à l'intérieur avec espace blanc (ou comme un élément <code><foo /></code> auto-fermé en XHTML), les outils actuels tels que les éditeurs WYSIWYG et HTML-Tidy se débarasseront par erreur de tels éléments, aboutissant à une donné parsable se faisant rejeter par quelques outils. Aussi, <code><span class='value-title'> </span></code>, comprenant un caractère unique espace-blanc entre la balise d'ouverture et de fermeture, est à cette heure le modèle requis pour les auteurs.''

Parser cette extension finale <code>value-title</code> impose quelques restrictions plus strictes sur l'usage. Ces restrictions existent pour réduire l'impact des violations de <abbr title="Don't Repeat Yourself">DRY</abbr>, pour réduire l'opportunité des sites à absorber les données, et pour encourager la bonne pratique de maintenir convenabelement ces deux formes de données.

Là où un élément avec la classe <code>value-title</code> doit être parsé comme donnée pour une propriété, et que cet élément ne contienne aussi aucun contenu sans-espace-blanc (ici considéré en référence comme 'vide'), les règles suivantes s'appliquent :

* L'élément ‘vide’ value-title doit être le '''premier enfant sans espace-blanc''' de l'élément propriété. Ce qui veut dire qu'il devrait suivre imméidatement après la propriété déclarée, avant la forme lisibile-par-les-humains, et sans aucune autre imbrication supplémentaire.
* L'élément 'vide' value-title ne peut seulement être utilisé que pour des propriétés spécifiques. Les spécifications des microformats doivent explicitement déclarer quelles propriétés peuvent être utilisées avec cette extension du modèle-classe-value.
* Là où un élément 'vide' value-title doit être utilisé comme propriété unique de value, il doit être le ''seul'' comme contenu <code>value</code>. Ce qui veut dire, la première instance d'un élément conforme <code>value-title</code> surpasse toutes les autres <code>value</code> et <code>value-title</code> soeurs et/ou cousines.
* Les outils écrits pour passer les Tests de Conformité et/ou Validation de Microformats ''devraient'' essayer de comparer les formes données-machines et visible-par-les humains des données de propriété, et conseiller les auteurs si les formes ne concordent pas.

=== Utilisation limitée de value-title ===
Du fait que le modèle value-title cache quelque quantité de donnée qui tend à être un duplicata spécifique-machine de donnée fournie dans le contenu lisibile par les humains, il y a deux [[principles-fr|principes]] microformats qui doivent être compromis : '''visibilité''' et '''<abbr title="Don't Repeat Yourself">DRY</abbr>'''. Par conséquent, l'applicabilité de ce modèle est délibérément restreinte aux propriétés qui ont démontré à travers l'expérience un besoin de ce modèle, sans aucune autre alternative meilleure connnue.

En général, les auteurs devraient :

# Tout d'abord, essayer de spécifier directement les valeurs de propriété microformats dans la ligne (le plus visible, pas de duplication),
# Puis considérer d'utiliser le modèle de classe value
## Comprenant plusieurs éléments de 'value' pour les propriétés date et time
# et puis seulement si ces méthodes sont insuffisantes, considérer le modèle value-title.

Ce document post-date toutes les autres spécifications microformats, parce qu'elles peuvent ne pas indiquer à cette heure quelles propriétés permettent l'usage de ce modèle. Dans l'intervalle, '''seuls''' les types de propriétés suivantes devraient autoriser le modèle value-title.

* valeurs date, datetime, timezone et duration ISO8601
* Valeurs énumérées (tlles que les sous-propriétés 'type' tel/email/adr de la hCard)
* Les coordonnées (comme les propriétés 'latitude' et 'longitude' de [[geo-fr|geo]])
* Les propriétés des numéros de téléphone (par ex. la propriété 'tel' de la hCard)

La page [[machine-data]] a de la documentation sur quelques-unes des propriétés de quelques spécifications pour lesquelles l'expérience a montré le besoin de solution comme le modèle value-title.

Il existe quelques exemples simples de références et tests pour ce modèle sur [[value-class-pattern-tests]].

Pour un futur usage, les ''auteurs de spécification'' peuvent hériter de l'usage de <code>value-title</code> par l'utilisation des formats de date et heures ISO8601, ou réutilisation d'autres microformats, mais les spécifications devraient éviter d'introduire de nouvelles structures de données qui dépendent ou encouragent ce modèle. Les nouvelles spécifications sont elles-mêmes attendues pour adhérer aux principes fondateurs de donnée visible et <abbr>DRY</abbr>.

== Cas de Test ==
Voir [[value-class-pattern-tests]].

== <abbr title='Foire aux Questions'>FAQ</abbr>==
Cette section est '''informative'''.

Les questions souvent posées sur le modèle-classe-value. Une fois que cette section sera trop grosse, nous la migrerons sur une page wiki séparée (comme [[value-class-faq-fr]]).

<div class='discussion'>
* '''Pourquoi utiliser un élément 'vide' ? Pourquoi ne pas embarquer la donnée dans l'attribut de classe ?'''
** L'attribut de classe est inapproprié pour les valeurs de données embarquées, selon la spécification HTML4, qui établit que <code>class</code> est pour le ‘general purposing processing’, qui est défini comme ‘par ex. pour identifier des champs au moment d'extrire la donnée des pages provenant du HTML dans une base de données, traduire des documents HTML dans d'autres formats, etc.'. ‘General purpose processing’ ne s'étend pas à la donnée elle-même. En outre, cette méthode évite d'inventer une nouveau modèle de chaîne pour embarquer de la donnée.
* '''Pourquoi utiliser un élément 'empty' ? Pourquoi ne pas produire un nouvel attribut, comme 'data' ?'''
** Les microformats existent et fonctionnent en HTML4 et XHTML1 valide. Ceux-ci sont les standards actuels pour le développement web, et les microformats existent pour une utilisation ''maintenant''. A l'avenir, peut-être que les futures révisions du HTML offriront une autre solution. A cette heure, cette méthode a été testé dans les navigateurs, et crée une structure de document cohérente (où les données formats-machines et lisibles-par-les-humains sont soeurs).
* '''L'attribut <code>title</code> ne devrait être utilisé que pour du contenu !'''
** L'attribut <code>title</code> _est_ utilisé pour le contenu et se fait lire par les parseurs de microformats. Ceci existe pour les cas où la donnée ne peut pas être parsée avec suffisamment de précision provenant de ce que est communément publié, l'information visible. Ce modèle permet d'inclure les deux formes de contenu, tout en le maintenant invisible pour les consommateurs humains.
</div>

Vous pouvez aussi vous référer aux [[faq-fr|FAQ Microformats]] générales et aux [[principles-fr|principes]].

== Exemples dans la jungle ==
Cette section est '''informative'''.

Les sites et pages suivants ont démarré par baliser le contenu avec le modèle de classe-value, et ce sont par conséquent de bons endroits pour aller voir des exemples de contenu du vrai monde pour tester les implémentations (par ex. les parseurs). Si vous utiliser le modèle-classe-value dans votre contenu, sentez-vous libre de l'ajouter '''en haut''' de cette liste. Une fois que la liste sera trop grosse, nous produirons une page wiki séparée (comme [[value-class-examples-in-wild]]).

* [http://visitmix.com/labs/oomph/2.0/tests/test.html Test Harness For Oomph] Cette page utilise toute une gamme de différents patterns pour à la fois hCard et hCalendar, en utilisant à la fois value et value-title, la plupart dérivée de l'application ci-dessus.
* Le [http://georgebrock.com/ flux d'activité de George Brocklehurst] et son [http://blog.georgebrock.com/ blog] utilisent "value-title" pour la propriété <code>published</code> de hAtom
* [http://ben-ward.co.uk/ La page personnelle de Ben Ward] utilise :
** "value-title" pour la propriété <code>bday</code> de hCard
** "value-title" pour la propriété <code>updated</code> de hAtom
* [http://microformats.org/ microformats.org] utilise :
** "value-title" pour la propriété <code>updated</code> de hAtom dans [[http://microformats.org/ microformats.org les billets du blog]]]
** séparation des values date et time pour la propriété <code>dtstart</code> de hCalendar dans [[events|la page wiki microformats.org des événements récents et à venir]]

''Ajoutez vos site/page(s) qui utilisent le modèle-classe-value ici, avec une brève description des fonctionnalités du modèle-classe-value que vous utilisez, avec quel(s) microformat(s) et quelle(s) propriétés.''

== Implémentations ==

Cette section est '''informative'''.

Les implémentations suivantes ont été développées pour soit générér ou parser les valeurs de propriété du modèle-classe-value. Si vous avez une implémentation du modèle-classe-value, sentez-vous libre de l'ajouter en '''haut''' de cette liste. Une fois que la liste sera trop grosse, nous produirons une page wiki séparée (comme [[value-class-implementations]]).

* [[Oomph]] Version 2 passe [[value-class-pattern-tests#Date_and_time_values|les tests des valeurs de date et heure]] et c'est une implémentation minutieuse du value-class-pattern.
* [[X2V]] v0.9.3 et suivantes :
** implemente [[#Date_and_time_values|Date and time values parsing]], y compris les valeurs horaires am/pm
*** passe par conséquent [[value-class-pattern-tests#Date_and_time_values|les tests de cas des valeurs de Date et heure]].
** implémente [[#hCalendar_date_implicite_dtend|hCalendar date dtend implicite]]
* [[Operator-fr|Operator]] a *quelque* implémentation du modèle-classe-value selon Michael Kaply, mais plus précisément savoir à quel degré c'est implémenté, pour quelles propriétés (types de propriétés) et quels microformats n'est actuellement pas connu.
* [[Optimus]] v0.8 et suivante implémente <code>value-title</code> comme [http://twitter.com/DmitryBaranovsk/status/1891253248 annoncé par Dmitry Baranovskiy].
* ... ajoutez vos implémentations qui parsent ou génèrent le modèle-classe-calue ici, avec les fonctionnalités que vous supportez (nous l'espérons toutes !) et notez toutes les limites s'il y en a.

== Articles ==
Les articles et <span id="Blog_Posts">billets de blog</span> discutant du value class pattern, les plus récents en premier.
Quand cette section deviendra trop grosse, créez une page séparée comme ceci : [[value-class-pattern-articles]]
* <span class="hentry"><span class="published">2009-08-25</span> <span class="entry-summary">MIX Online: <span class="entry-title">[http://visitmix.com/Articles/The-Value-Class-Pattern The Value Class Pattern]</span></span> par <span class="author vcard"><span class="fn">Jeremy Keith</span></span></span>
* [http://ablognotlimited.com/s/106 Getting Semantic With Microformats, Part 8: Value Class Pattern] -- Un écrit très minutieux d'Emily Lewis sur le value class pattern
* [http://adactio.com/journal/1579/ 2009-05-17 Adactio: Microformation]
* [http://forabeautifulweb.com/blog/about/value_class_pattern/ For A Beautiful Web: Value Class Pattern]
* [http://microformats.org/blog/2009/05/12/value-class-pattern/ 2009-05-12 microformats.org: Value Class Pattern]

==Pages en Rapport==
Cette section est '''informative'''.
* [[value-class-pattern-tests]]
* [[value-excerption-pattern-issues]]
* [[hcard-fr#Extraction_de_Valeur|hCard : Extraction de Valeur]]
* [[value-excerption-pattern-brainstorming]]
* [[machine-data-fr|Machine Data in Microformats]]

== Références ==
Cette section est '''informative'''.
* [http://www.useit.com/alertbox/9608.html Jakob Nielsen: International Web Usability]

h-entry-fr

2014-01-05T11:24:53Z

ChristopheDucamp: [fr: /* FAQ */ traduction sous-titres]

''Cette page a démarré sur [[h-entry]]''

<entry-title>h-entry</entry-title>
* <span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
* <span class="h-card vcard"><span class="p-name fn">[[User:ChristopheDucamp|Christophe Ducamp]]</span> (<span class="p-role role">Traducteur</span>)</span>

{{cc0-owfa-license-fr}}

----
<dfn style="font-style:normal;font-weight:bold">h-entry</dfn> est un format simple, ouvert pour le contenu épisodique ou chronodaté sur le web.
h-entry est souvent utilisé avec du contenu destiné à être distribué en simultané, par exemple des billets de blog. h-entry est l'un des nombreux standards [[microformats-fr|microformats]] ouverts "draft" adapté pour embarquer de la data dans le HTML/HTML5.

h-entry est la mise à jour [[microformats2-fr|microformats2]] du "hentry" de [[hatom-fr|hAtom]]. Pour une mise à jour de "hfeed, voir [[h-feed-fr|h-feed]].

== Exemple ==
Voici un exemple simple de billet de blog :

<source lang=html4strict>
<article class="h-entry">
<h1 class="p-name">Les microformats sont fascinants</h1>
<p>Publié par <a class="p-author h-card">W. Developer</a>
le <time class="dt-published" datetime="2013-06-01 12:00:00">1<sup>er</sup> juin 2013</time>

<p class="p-summary">Dans le quel je loue les vertus d'utiliser les microformats.</p>

<div class="e-content">
<p>Blah blah blah</p>
</div>
</article>
</source>

=== Démarrer ===
La classe '''<code>h-entry</code>''' est un ''nom de classe racine'' qui indique la présence d'un h-entry.

'''p-name''', '''p-author''', '''dt-published''' et les autres propriétés-noms de classes de h-entry listées ci-dessous définissent les propriétés de h-entry.

Voir [[microformats2-parsing-fr|microformats2-parsing]] pour en savoir plus à propos des noms de classes propriétés.

== Propriétés==
les propriétés h-entry, à l'intérieur d'un élément avec la classe '''h-entry''' :
* '''<code>p-name</code>''' - nom de la note/titre
* '''<code>p-summary</code>''' - petit résumé court de la note
* '''<code>e-content</code>''' - contenu complet de la note
* '''<code>dt-published</code>''' - quand la note a été publiée
* '''<code>dt-updated</code>''' - quand la note a été mise à jour
* '''<code>p-author</code>''' - qui a écrit la note, optionnellement embarquée avec [[h-card-fr|h-card]](s)
* '''<code>p-category</code>''' - catégories/tags de la note
* '''<code>u-url</code>''' - URL permalien de la note
* '''<code>u-uid</code>''' - ID unique de la note
* '''<code>p-location</code>''' - endroit à partir duquel a été posté l'entrée, optionnellement embarqué dans [[h-card-fr|h-card]], [[h-adr-fr|h-adr]] ou [[h-geo-fr|h-geo]]

Les propriétés suivantes expérimentales sont utilisées dans la jungle mais ne font pas encore partie de la spécification :

* '''<code>u-in-reply-to</code>''' - l'URL à laquelle la h-entry est considéré comme une réponse à ou un commentaire sur.
** Potentiellement une h-entry embarquée (ou imbriquée ?) (pour les contextes de réponses) mais je suis le seul à faire ça à cette heure, aussi non considéré comme une recommandation --[[User:Barnabywalters|bw]] 16:44, 13 June 2013 (UTC)
* '''<code>p-comment</code>''' - h-entries optionellement embarquées (ou imbriquées), chacune d'entre elles est un commentaire/réponse au h-entry parent. Voir [[comment-brainstorming]].

Les propriétés suivantes sont des ajouts proposés basés sur différentes conventions existantes de prévisualisation de lien qui ne sont ''pas'' encore utilisées dans la jungle (En rapport : [[link-preview-brainstorming]])
* '''<code>u-photo</code>'''
* '''<code>u-audio</code>''' - consider special u- parsing rules for <code><audio></code>
* '''<code>u-video</code>''' - consider special u- parsing rules for <code><video></code>

Toutes les propriétés sont optionnelles.

== Statut ==
'''h-entry''' est une spécification draft de microformats.org. La discussion publique sur h-entry a lieu sur [[h-entry-feedback]], le canal [[irc]] #microformats sur irc.freenode.net, et la [http://microformats.org/discuss/mail/microformats-new/ liste de discussion microformats-new].

h-entry est prêt à l'utilisation et à l'implémentation dans la jungle, mais pour des raisons de rétro-compatibilité vous devriez aussi baliser les h-entries en les enrichissant des notes classiques [[hatom-fr|hAtom]].

== Détails de Propriétés ==
(ébauche à compléter)

This section is a stub.
=== p-location ===
'''<code>p-location</code>''' a été réutilisé à partir de [[h-event-fr|h-event]].

== FAQ ==
=== p-name d'une note ===
<div class="discussion">
* '''Qu'est-ce que le <code>p-name</code> d'une [http://indiewebcamp.com/note-fr note]?'''
** Quelques options, de la plus simple à la plus détaillée.
*** '''la même que la propriété p-content/e-content'''.
*** '''la même que l'élément <code>title</code>''' sur le permalien de note de page. Au moment de publier une note sur sa propre page de permalien de post, les contenus de la note sont probablement abrégés pour le titre de la page. La même abréviation peut être utilisée pour le p-name.
*** '''première phrase de la propriété p-content/e-content'''. Ce peut être mieux pour la [http://indiewebcamp.com/syndication-fr syndication] et les objectifs de [[link-preview-fr|prévisualisation de lien]] de fournir simplement la première phrase de la note comme le <code>p-name</code>. De la même manière, si seulement une portion du contenu est syndiquée sur d'autres sites, cette portion-la peut être balisée comme le <code>p-summary</code>.
* ...
</div>

=== endroit à partir duquel une entrée a été postée ===
<div class="discussion">
* '''Comment indiquez-vous un endroit nommé quand une entrée à été postée à partir d'un ? comme un restaurant ou un parc.'''
** Utilisez un microformat embarqué [[h-card-fr|h-card]] sur une valeur de propriété <code>p-location</code>.
</div>
=== adresse à laquelle une entrée a été postée ===
<div class="discussion">
* '''Comment indiquez-vous l'adresse où une entrée a été postée à partir de ? comme un restaurant ou parc. ? '''
** Si l'adresse fait simplement partie d'un endroit nommé, voir au-dessus, utilisez une [[h-card-fr|h-card]]
** Sinon utilisez un microformat embarqué [[h-adr-fr|h-adr]] sur une valeur de propriété <code>p-location</code>.
</div>
=== lat long d'une entrée postée ===
<div class="discussion">
* '''Comment indiquez-vous les latitude et longitude de l'endroit où une entrée à été postée ?'''
** Si l'endroit a un nom en plus des latitude et longitude, voir au-dessus, utilisez une [[h-card-fr|h-card]]
** Autrement s'il y a une adresse en plus des latitude et longitude, voir au-dessus, utilisez une [[h-adr-fr]]
** Autrement, utilisez un microformat embarqué [[h-geo-fr|h-geo]] sur une valeur de propriété <code>p-location</code>.
</div>

== Exemples dans la jungle ==
Les véritables exemples dans la jungle :

* ... ajoutez ici les usages de h-entry que vous voyez dans la jungle
* App.net enrichit les pages de profils et pages de permaliens avec h-entry en date du 2013-08-06 ([https://alpha.app.net/voidfiles exemple])
* L'UI du "Twitter archive browser" utilise h-entry et h-card en interne, malheureusement elle n'est pas exposée comme du HTML dans les fichiers statiques
* Brett Comnes enrichit ses posts avec h-entry et h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ exemple])
* Ben Werdmuller enrichit ses posts avec h-card et h-entry, u-in-reply-to et u-like ([http://werd.io/view/51d5097fbed7ded0633a5956 example])
* Sandeep Shetty enrichit ses posts avec h-card and h-entry, tout comme avec les propriétés expérimentales u-in-reply-to et u-like ([http://sandeep.io/101 exemple])
* spreadly enrichit ses pages de permaliens de partage avec h-entry, tout comme avec les propriétés h-cards et p-like expérimental ([http://my.spread.ly/share/51d570bc09e9486562000002 exemple])
* Laurent Eschenauer enrichit ses posts avec h-entry ([http://eschnou.com/entry/first-autonomous-flight-of-my-nodecopter-62-24992.html exemple])
* Tom Morris enrichit ses posts avec h-entry ([http://tommorris.org/posts/8417 exemple])
* Beaucoup de nouvelles specs du W3C specs, par ex.
** [http://www.w3.org/TR/2013/CR-css3-values-20130404/ CSS Values and Units Module Level 3 - 2013-04-04]
** [http://www.w3.org/TR/2013/CR-css3-conditional-20130404/ CSS Conditional Rules Module Level 3 - 2013-04-04]
** [http://www.w3.org/TR/2013/WD-css3-page-20130314/ CSS Paged Media Module Level 3 - 2013-03-14]
** [http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/ CSS Counter Styles Level 3 - 2013-02-21]
* [http://wordpress.org/extend/themes/sempress SemPress] est un thème WordPress qui supporte h-card, h-feed/h-entry.
* [http://the-pastry-box-project.net/ The Pastry Box Project] utilise le marquage h-card et h-entry sur sa page d'accueil et les pages indivdiuelles de réflexion
* Aaron Parecki utilise h-entry pour enrichir les notes, par ex. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1].
* [http://tantek.com/ Tantek Çelik] utilise h-entry sur sa page d'accueil, tout comme h-entry sur tous les permaliens de ses posts, par ex. [http://tantek.com/2012/243/t1/name-beats-title-modern-use-dubline-core-wrong-uf2 2012-243 post], avec [[rel-prev]]/[[rel-next]] (si applicable) pour indiquer les posts précédents/suivants
* [http://waterpigs.co.uk/ Barnaby Walters] utilise h-entry sur toutes les notes et articles, tout comme les imbrications dans les notes comme contextes de réponse [http://waterpigs.co.uk/notes/1468/ exemple] et commentaires [http://waterpigs.co.uk/notes/1482/ exemple].

== Validation ==
* '''[http://indiewebify.waterpigs.co.uk/validate-h-entry/ validateur h-entry indiewebify.me]''' parse le marquage [[h-entry-fr|h-entry]], trouve les erreurs communes et fournit des suggestions des choses à ajouter, avec des exemples de code.

{{h-spec-section-validating-fr}}

== Rétro-compatibilité ==
=== Compatibilité Éditeur ===
Pour la compatibilité arrière, vous pouvez vouloir utiliser les noms de classes classiques [[hatom-fr|hAtom]] en plus des propriétés h-entry à venir, par exemple :

<source lang=html4strict>
<div class="h-entry hentry">
<h1 class="p-name entry-title">Mon billet de blog génial</h1>
</div>
</source>

=== Compatibilité Parseurs ===
Les parseurs microformats DEVRAIENT détecter les propriétés classiques seulement si un nom de classe racine est trouvé et les parser comme des propriétés microformats2.

Si un "h-entry" est trouvé, ne pas chercher un "hentry" sur le même élément.

Le nom de classe racine compatible : <code id="hentry">hentry</code><br/>
Propriétés : (parsées comme '''p-''' plein texte à moins qu'autre chose ne soit spécifié) :

* <code>entry-title</code> - parser comme '''<code>p-name</code>'''
* <code>entry-summary</code> - parser comme '''<code>p-summary</code>'''
* <code>entry-content</code> - parser comme '''<code>e-content</code>'''
* <code>published</code> - parser comme '''dt-'''
* <code>updated</code> - parser comme '''dt-'''
* <code>author</code> - comprenant la racine compatible <code>vcard</code> en l'absence de <code>h-card</code>
* <code>category</code>

=== FAQ Compat ===
==== Que devient rel-bookmark ====
Aussi posé sous : ''Pourquoi utiliser un h-entry u-url u-uid pour les permaliens quand j'ai [[rel-bookmark-fr|rel=bookmark]] ?''

R : tl;dr: utilisez <code>class="u-url u-uid"</code> au lieu de <code>rel=bookmark</code> pour les permaliens des posts parce que c'est plus simple (moins d'attributs) et parce que cela fonctionne mieux sur les contextes (page permalien, posts récents sur la page d'accueil, collection de posts sur les pages d'archives).

rel=bookmark était l'ancienne méthode [[h-atom-fr|hAtom]] pour marquer les permaliens. Depuis deux facteurs ont contribué à réduire l'usage de rel dans les microformats :
* rel en étant typiquement* figuré dans le [[HTML5]] - le rendant par conséquent inapproprié à l'usage dans les microformats qui sont agrégés, par ex. une collection de posts sur une page d'accueil ou dans des archives mensuelles.
* il est plus facile de toujours utiliser les noms de classes pour les propriétés. Quand les formats utilisent deux (ou plus !) attributs dans le HTML pour spécifier les propriétés, la confusion génère une qualité de la data moindre (du marquage et par conséquent du truc qui est marqué). Par conséquent, selon le [[principle-fr|principe]] microformats de [[simplicity-fr|simplicité]], dans les [[microformats2-fr|microformats2]] nous n'utilisons uniquemnet que des noms de classes pour les propriétés.

<nowiki>*</nowiki> même si rel=bookmark en particulier est un élément-article / section figuré dans le HTML5[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-bookmark], c'est un détail dont les auteurs en général ne vont pas se souvenir, et par conséquent, ce n'est pas bien de dépendre de lui pour tout type de format.

== Historique ==
Ce travail est basé sur le microformat existant [[hatom-fr|hAtom]], et le selfdogfooding complet dans la communauté [http://indiewebcamp.com indie web camp].

== Principes de Design ==

(ébauche à compléter)

== Voir aussi ==

* [[microformats2-fr|microformats2]]
* [[microformats2-parsing-fr|microformats2-parsing]]
* [[h-geo-fr|h-geo]]
* [[hcard-fr|hCard]]

[[Category:Draft Specifications]]

h-feed-fr

2014-01-05T11:21:48Z

ChristopheDucamp: [fr: draft translation h-feed]

''Cette page a démarré sur [[h-feed]]''

{{stub-fr}}

'''<dfn>h-feed</dfn>''' est une expérimentation [[microformats2-fr|microformats2]] avec un objet flux du niveau le plus élevé pour contenir des posts [[h-entry-fr|h-entry]].

De l'expérience avec [[hAtom]], il n'est pas clair qu'il y ait vraiment besoin (cas-utilisation) d'un flux au niveau le plus haut, mais pour ceux qui souhaitent expérimenter cela, le voici.

nom de classe racine : h-feed

Propriétés
* p-name - nom du flux
* p-author - auteur du flux, optionnellement embarqué avec une [[h-card-fr|h-card]] {{main-fr|h-card-fr}}
* u-url - URL du flux
* u-photo - photo représentative/ icône pour le flux

enfants :
* objets [[h-entry-fr|h-entry]] embarqués représentant les items du flux

== Cas d'Usages ==
* Générer un flux Atom
** Ceci semble être un cas-d'usage ancien, non suffisant pour justifier véritablement h-feed.

* Flux par canal de contenu - besoin d'un nom
** "J'aurai un flux par mot-clé (canal) aussi je veux les nommer." - Sandeep Shetty dans #indiewebcamp
** Il apparaît ici qu'il y ait un désir de créer des flux distincts pour un site indieweb de sous-ensembles séparés de contenus, et de les nommer <em>explicitement</em>. Ceci présente un besoin d'un objet conteneur pour les éléments h-entry, où le conteneur en lui-même peut avoir un nom. C'est un cas-d'utilisation intéressant potentiel pour un 'h-feed' explicite.

== Exemples dans la jungle ==
Ajoutez tous les exemples dans la jungles que vous trouvez en haut de cette liste.
* ...
* http://sandeep.io/ utilise h-feed avec les propriétés p-name et p-author et les posts child h-entry. En particulier, utiliser h-feed sur l'élément <html> permet d'utiliser p-name sur l'élément <title> et de réutiliser le titre de fenêtre visible de la page HTML comme le nom du flux, évitant ainsi élégamment une violation [[DRY-fr|DRY]].
* http://tantek.com/ utilise h-feed avec les propriétés p-name et p-author et les posts child h-entry.

== Implémentations ==
=== Convertisseurs ===
* '''[http://pipes.yahoo.com/pipes/pipe.info?_id=afc5568b4e8643bfb05436b1caaf91bc microformats to RSS]''' - un Yahoo! pipe qui convertit une URL contenant un [[h-feed-fr|h-feed]] contenant des h-entries, en un flux [[RSS]]. ([http://waterpigs.co.uk/notes/4SeNi5/ 2013-10-21 annonce par post de blog])

== Parsage ==
Au moment de parser une page pour un h-feed, faites-le selon [[microformats2-fr|microformats2]].

Solution de recours :

S'il n'y a pas d'élément "h-feed" explicite, les implémentations peuvent :
* Traiter le <code><title></code> de la page ou l'URL de la page comme le p-name
* Utiliser http://indiewebcamp.com/authorship pour découvrir la paternité d'auteur des posts.
* Traiter les éléments de plus haut niveau [[h-entry-fr|h-entry]] comme items dans le flux.

== FAQ ==
=== Comment j'évite de dupliquer le titre de page ===
''Je veux utiliser le nom (titre) de ma page comme le nom de mon flux, comment j'éviter de dupliquer le titre de page quelque part invisiblement sur la page comme le nom du flux ?''

Si vous voulez ré-utiliser le <title> de votre page comme le nom de votre flux, vous pouvez faire ainsi en plaçant le nom de classe racine h-feed sur l'élément <html>, et le nom de classe propriété p-name sur l'élément <title>, par ex. voici un fragment montrant à quoi ces tags ressembleraient :
<source lang=html4strict>
<html class="h-feed">
…
<title class="p-name">sandeep.io</title>
…
</source>

Exemple du vrai monde :
* Sandeep Shetty a enrichi sa page d'accueil http://sandeep.io/ en marquage de cette façon.

=== Qu'est-ce-que devrait faire un abonné d'une page avec plusieurs flux ===
''Que faire quand un utilisateur s'abonne à une URL avec plusieurs h-feeds distincts ?''

Un lecteur de flux devrait s'abonner au premier h-feed qu'il trouve sur une URL.

En rapport : http://indiewebcamp.com/reader

== Voir aussi ==
* [[h-entry-fr|h-entry]]
* [[microformats2-fr|microformats2]]
* [[hAtom-fr|hAtom]]

simplicity-fr

2014-01-05T10:54:18Z

ChristopheDucamp: #redirect:start-simple-fr

#redirect:[[start-simple-fr]]

Template:cc0-owfa-license-fr

2014-01-05T10:53:26Z

ChristopheDucamp: To be translated

<small>Per [http://creativecommons.org/publicdomain/zero/1.0/ CC0],
to the extent possible under law, the editors have waived
all copyright and related or neighboring rights to this work.
In addition, as of {{CURRENTYEAR}}-{{CURRENTMONTH}}-{{CURRENTDAY2}},
the editors have made this specification available under the
[http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0 Open Web Foundation Agreement Version 1.0].</small>

h-entry-fr

2014-01-05T10:51:52Z

ChristopheDucamp: [fr: sync with original - h-feed-fr to be veified - translation to be reviewed]

''Cette page a démarré sur [[h-entry]]''

<entry-title>h-entry</entry-title>
* <span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
* <span class="h-card vcard"><span class="p-name fn">[[User:ChristopheDucamp|Christophe Ducamp]]</span> (<span class="p-role role">Traducteur</span>)</span>

{{cc0-owfa-license-fr}}

----
<dfn style="font-style:normal;font-weight:bold">h-entry</dfn> est un format simple, ouvert pour le contenu épisodique ou chronodaté sur le web.
h-entry est souvent utilisé avec du contenu destiné à être distribué en simultané, par exemple des billets de blog. h-entry est l'un des nombreux standards [[microformats-fr|microformats]] ouverts "draft" adapté pour embarquer de la data dans le HTML/HTML5.

h-entry est la mise à jour [[microformats2-fr|microformats2]] du "hentry" de [[hatom-fr|hAtom]]. Pour une mise à jour de "hfeed, voir [[h-feed-fr|h-feed]].

== Exemple ==
Voici un exemple simple de billet de blog :

<source lang=html4strict>
<article class="h-entry">
<h1 class="p-name">Les microformats sont fascinants</h1>
<p>Publié par <a class="p-author h-card">W. Developer</a>
le <time class="dt-published" datetime="2013-06-01 12:00:00">1<sup>er</sup> juin 2013</time>

<p class="p-summary">Dans le quel je loue les vertus d'utiliser les microformats.</p>

<div class="e-content">
<p>Blah blah blah</p>
</div>
</article>
</source>

=== Démarrer ===
La classe '''<code>h-entry</code>''' est un ''nom de classe racine'' qui indique la présence d'un h-entry.

'''p-name''', '''p-author''', '''dt-published''' et les autres propriétés-noms de classes de h-entry listées ci-dessous définissent les propriétés de h-entry.

Voir [[microformats2-parsing-fr|microformats2-parsing]] pour en savoir plus à propos des noms de classes propriétés.

== Propriétés==
les propriétés h-entry, à l'intérieur d'un élément avec la classe '''h-entry''' :
* '''<code>p-name</code>''' - nom de la note/titre
* '''<code>p-summary</code>''' - petit résumé court de la note
* '''<code>e-content</code>''' - contenu complet de la note
* '''<code>dt-published</code>''' - quand la note a été publiée
* '''<code>dt-updated</code>''' - quand la note a été mise à jour
* '''<code>p-author</code>''' - qui a écrit la note, optionnellement embarquée avec [[h-card-fr|h-card]](s)
* '''<code>p-category</code>''' - catégories/tags de la note
* '''<code>u-url</code>''' - URL permalien de la note
* '''<code>u-uid</code>''' - ID unique de la note
* '''<code>p-location</code>''' - endroit à partir duquel a été posté l'entrée, optionnellement embarqué dans [[h-card-fr|h-card]], [[h-adr-fr|h-adr]] ou [[h-geo-fr|h-geo]]

Les propriétés suivantes expérimentales sont utilisées dans la jungle mais ne font pas encore partie de la spécification :

* '''<code>u-in-reply-to</code>''' - l'URL à laquelle la h-entry est considéré comme une réponse à ou un commentaire sur.
** Potentiellement une h-entry embarquée (ou imbriquée ?) (pour les contextes de réponses) mais je suis le seul à faire ça à cette heure, aussi non considéré comme une recommandation --[[User:Barnabywalters|bw]] 16:44, 13 June 2013 (UTC)
* '''<code>p-comment</code>''' - h-entries optionellement embarquées (ou imbriquées), chacune d'entre elles est un commentaire/réponse au h-entry parent. Voir [[comment-brainstorming]].

Les propriétés suivantes sont des ajouts proposés basés sur différentes conventions existantes de prévisualisation de lien qui ne sont ''pas'' encore utilisées dans la jungle (En rapport : [[link-preview-brainstorming]])
* '''<code>u-photo</code>'''
* '''<code>u-audio</code>''' - consider special u- parsing rules for <code><audio></code>
* '''<code>u-video</code>''' - consider special u- parsing rules for <code><video></code>

Toutes les propriétés sont optionnelles.

== Statut ==
'''h-entry''' est une spécification draft de microformats.org. La discussion publique sur h-entry a lieu sur [[h-entry-feedback]], le canal [[irc]] #microformats sur irc.freenode.net, et la [http://microformats.org/discuss/mail/microformats-new/ liste de discussion microformats-new].

h-entry est prêt à l'utilisation et à l'implémentation dans la jungle, mais pour des raisons de rétro-compatibilité vous devriez aussi baliser les h-entries en les enrichissant des notes classiques [[hatom-fr|hAtom]].

== Détails de Propriétés ==
(ébauche à compléter)

This section is a stub.
=== p-location ===
'''<code>p-location</code>''' a été réutilisé à partir de [[h-event-fr|h-event]].

== FAQ ==
=== p-name d'une note ===
<div class="discussion">
* '''Qu'est-ce que le <code>p-name</code> d'une [http://indiewebcamp.com/note-fr note]?'''
** Quelques options, de la plus simple à la plus détaillée.
*** '''la même que la propriété p-content/e-content'''.
*** '''la même que l'élément <code>title</code>''' sur le permalien de note de page. Au moment de publier une note sur sa propre page de permalien de post, les contenus de la note sont probablement abrégés pour le titre de la page. La même abréviation peut être utilisée pour le p-name.
*** '''première phrase de la propriété p-content/e-content'''. Ce peut être mieux pour la [http://indiewebcamp.com/syndication-fr syndication] et les objectifs de [[link-preview-fr|prévisualisation de lien]] de fournir simplement la première phrase de la note comme le <code>p-name</code>. De la même manière, si seulement une portion du contenu est syndiquée sur d'autres sites, cette portion-la peut être balisée comme le <code>p-summary</code>.
* ...
</div>

=== venue an entry was posted from ===
<div class="discussion">
* '''Comment indiquez-vous un endroit nommé quand une entrée à été postée à partir d'un ? comme un restaurant ou un parc.'''
** Utilisez un microformat embarqué [[h-card-fr|h-card]] sur une valeur de propriété <code>p-location</code>.
</div>
=== address an entry was posted from ===
<div class="discussion">
* '''Comment indiquez-vous l'adresse où une entrée a été postée à partir de ? comme un restaurant ou parc. ? '''
** Si l'adresse fait simplement partie d'un endroit nommé, voir au-dessus, utilisez une [[h-card-fr|h-card]]
** Sinon utilisez un microformat embarqué [[h-adr-fr|h-adr]] sur une valeur de propriété <code>p-location</code>.
</div>
=== lat long d'une entrée postée ===
<div class="discussion">
* '''Comment indiquez-vous les latitude et longitude de l'endroit où une entrée à été postée ?'''
** Si l'endroit a un nom en plus des latitude et longitude, voir au-dessus, utilisez une [[h-card-fr|h-card]]
** Autrement s'il y a une adresse en plus des latitude et longitude, voir au-dessus, utilisez une [[h-adr-fr]]
** Autrement, utilisez un microformat embarqué [[h-geo-fr|h-geo]] sur une valeur de propriété <code>p-location</code>.
</div>

== Exemples dans la jungle ==
Les véritables exemples dans la jungle :

* ... ajoutez ici les usages de h-entry que vous voyez dans la jungle
* App.net enrichit les pages de profils et pages de permaliens avec h-entry en date du 2013-08-06 ([https://alpha.app.net/voidfiles exemple])
* L'UI du "Twitter archive browser" utilise h-entry et h-card en interne, malheureusement elle n'est pas exposée comme du HTML dans les fichiers statiques
* Brett Comnes enrichit ses posts avec h-entry et h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ exemple])
* Ben Werdmuller enrichit ses posts avec h-card et h-entry, u-in-reply-to et u-like ([http://werd.io/view/51d5097fbed7ded0633a5956 example])
* Sandeep Shetty enrichit ses posts avec h-card and h-entry, tout comme avec les propriétés expérimentales u-in-reply-to et u-like ([http://sandeep.io/101 exemple])
* spreadly enrichit ses pages de permaliens de partage avec h-entry, tout comme avec les propriétés h-cards et p-like expérimental ([http://my.spread.ly/share/51d570bc09e9486562000002 exemple])
* Laurent Eschenauer enrichit ses posts avec h-entry ([http://eschnou.com/entry/first-autonomous-flight-of-my-nodecopter-62-24992.html exemple])
* Tom Morris enrichit ses posts avec h-entry ([http://tommorris.org/posts/8417 exemple])
* Beaucoup de nouvelles specs du W3C specs, par ex.
** [http://www.w3.org/TR/2013/CR-css3-values-20130404/ CSS Values and Units Module Level 3 - 2013-04-04]
** [http://www.w3.org/TR/2013/CR-css3-conditional-20130404/ CSS Conditional Rules Module Level 3 - 2013-04-04]
** [http://www.w3.org/TR/2013/WD-css3-page-20130314/ CSS Paged Media Module Level 3 - 2013-03-14]
** [http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/ CSS Counter Styles Level 3 - 2013-02-21]
* [http://wordpress.org/extend/themes/sempress SemPress] est un thème WordPress qui supporte h-card, h-feed/h-entry.
* [http://the-pastry-box-project.net/ The Pastry Box Project] utilise le marquage h-card et h-entry sur sa page d'accueil et les pages indivdiuelles de réflexion
* Aaron Parecki utilise h-entry pour enrichir les notes, par ex. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1].
* [http://tantek.com/ Tantek Çelik] utilise h-entry sur sa page d'accueil, tout comme h-entry sur tous les permaliens de ses posts, par ex. [http://tantek.com/2012/243/t1/name-beats-title-modern-use-dubline-core-wrong-uf2 2012-243 post], avec [[rel-prev]]/[[rel-next]] (si applicable) pour indiquer les posts précédents/suivants
* [http://waterpigs.co.uk/ Barnaby Walters] utilise h-entry sur toutes les notes et articles, tout comme les imbrications dans les notes comme contextes de réponse [http://waterpigs.co.uk/notes/1468/ exemple] et commentaires [http://waterpigs.co.uk/notes/1482/ exemple].

== Validation ==
* '''[http://indiewebify.waterpigs.co.uk/validate-h-entry/ validateur h-entry indiewebify.me]''' parse le marquage [[h-entry-fr|h-entry]], trouve les erreurs communes et fournit des suggestions des choses à ajouter, avec des exemples de code.

{{h-spec-section-validating-fr}}

== Rétro-compatibilité ==
=== Compatibilité Éditeur ===
Pour la compatibilité arrière, vous pouvez vouloir utiliser les noms de classes classiques [[hatom-fr|hAtom]] en plus des propriétés h-entry à venir, par exemple :

<source lang=html4strict>
<div class="h-entry hentry">
<h1 class="p-name entry-title">Mon billet de blog génial</h1>
</div>
</source>

=== Compatibilité Parseurs ===
Les parseurs microformats DEVRAIENT détecter les propriétés classiques seulement si un nom de classe racine est trouvé et les parser comme des propriétés microformats2.

Si un "h-entry" est trouvé, ne pas chercher un "hentry" sur le même élément.

Le nom de classe racine compatible : <code id="hentry">hentry</code><br/>
Propriétés : (parsées comme '''p-''' plein texte à moins qu'autre chose ne soit spécifié) :

* <code>entry-title</code> - parser comme '''<code>p-name</code>'''
* <code>entry-summary</code> - parser comme '''<code>p-summary</code>'''
* <code>entry-content</code> - parser comme '''<code>e-content</code>'''
* <code>published</code> - parser comme '''dt-'''
* <code>updated</code> - parser comme '''dt-'''
* <code>author</code> - comprenant la racine compatible <code>vcard</code> en l'absence de <code>h-card</code>
* <code>category</code>

=== FAQ Compat ===
==== Que devient rel-bookmark ====
Aussi posé sous : ''Pourquoi utiliser un h-entry u-url u-uid pour les permaliens quand j'ai [[rel-bookmark-fr|rel=bookmark]] ?''

R : tl;dr: utilisez <code>class="u-url u-uid"</code> au lieu de <code>rel=bookmark</code> pour les permaliens des posts parce que c'est plus simple (moins d'attributs) et parce que cela fonctionne mieux sur les contextes (page permalien, posts récents sur la page d'accueil, collection de posts sur les pages d'archives).

rel=bookmark était l'ancienne méthode [[h-atom-fr|hAtom]] pour marquer les permaliens. Depuis deux facteurs ont contribué à réduire l'usage de rel dans les microformats :
* rel en étant typiquement* figuré dans le [[HTML5]] - le rendant par conséquent inapproprié à l'usage dans les microformats qui sont agrégés, par ex. une collection de posts sur une page d'accueil ou dans des archives mensuelles.
* il est plus facile de toujours utiliser les noms de classes pour les propriétés. Quand les formats utilisent deux (ou plus !) attributs dans le HTML pour spécifier les propriétés, la confusion génère une qualité de la data moindre (du marquage et par conséquent du truc qui est marqué). Par conséquent, selon le [[principle-fr|principe]] microformats de [[simplicity-fr|simplicité]], dans les [[microformats2-fr|microformats2]] nous n'utilisons uniquemnet que des noms de classes pour les propriétés.

<nowiki>*</nowiki> même si rel=bookmark en particulier est un élément-article / section figuré dans le HTML5[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-bookmark], c'est un détail dont les auteurs en général ne vont pas se souvenir, et par conséquent, ce n'est pas bien de dépendre de lui pour tout type de format.

== Historique ==
Ce travail est basé sur le microformat existant [[hatom-fr|hAtom]], et le selfdogfooding complet dans la communauté [http://indiewebcamp.com indie web camp].

== Principes de Design ==

(ébauche à compléter)

== Voir aussi ==

* [[microformats2-fr|microformats2]]
* [[microformats2-parsing-fr|microformats2-parsing]]
* [[h-geo-fr|h-geo]]
* [[hcard-fr|hCard]]

[[Category:Draft Specifications]]

h-entry

2014-01-01T14:26:14Z

ChristopheDucamp: Reverted edits by Saymosir (Talk) to last version by ChristopheDucamp

<entry-title>h-entry</entry-title>
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">h-entry</dfn> is a simple, open format for episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts. h-entry is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.

h-entry is the [[microformats2]] update to [[hAtom]]'s "hentry". For an update to "hfeed" see [[h-feed]].

{{cc0-owfa-license}}

== Example ==
Here is a simple blog post example:

<source lang=html4strict>
<article class="h-entry">
<h1 class="p-name">Microformats are amazing</h1>
<p>Published by <a class="p-author h-card">W. Developer</a>
on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>

<p class="p-summary">In which I extoll the virtues of using microformats.</p>

<div class="e-content">
<p>Blah blah blah</p>
</div>
</article>
</source>

=== Get started ===
The class '''<code>h-entry</code>''' is a ''root class name'' that indicates the presence of an h-entry.

'''p-name''', '''p-author''', '''dt-published''' and the other h-entry property classnames listed below define properties of the h-entry.

See [[microformats2-parsing]] to learn more about property classnames.

== Properties ==
h-entry properties, inside an element with class '''h-entry''':
* '''<code>p-name</code>''' - entry name/title
* '''<code>p-summary</code>''' - short entry summary
* '''<code>e-content</code>''' - full content of the entry
* '''<code>dt-published</code>''' - when the entry was published
* '''<code>dt-updated</code>''' - when the entry was updated
* '''<code>p-author</code>''' - who wrote the entry, optionally embedded [[h-card]](s)
* '''<code>p-category</code>''' - entry categories/tags
* '''<code>u-url</code>''' - entry permalink URL
* '''<code>u-uid</code>''' - unique entry ID
* '''<code>p-location</code>''' - location the entry was posted from, optionally embed [[h-card]], [[h-adr]], or [[h-geo]]

The following experimental properties are in use in the wild but are not yet part of the spec:

* '''<code>u-in-reply-to</code>''' - the URL which the h-entry is considered a reply to or comment on.
** Potentially optionally an embedded (or nested?) h-entry (for reply contexts) but I’m the only one doing that right now so not considered a recommendation --[[User:Barnabywalters|bw]] 16:44, 13 June 2013 (UTC)
* '''<code>p-comment</code>''' - optionally embedded (or nested?) h-entry(ies), each of which is a comment on/reply to the parent h-entry. See [[comment-brainstorming]].

The following properties are proposed additions based on various existing link preview markup conventions which are ''not'' yet used in the wild (Related: [[link-preview-brainstorming]])
* '''<code>u-photo</code>'''
* '''<code>u-audio</code>''' - consider special u- parsing rules for <code><audio></code>
* '''<code>u-video</code>''' - consider special u- parsing rules for <code><video></code>

All properties are optional.

== Status ==
'''h-entry''' is a microformats.org draft specification. Public discussion on h-entry takes place on [[h-entry-feedback]], the #microformats [[irc]] channel on irc.freenode.net, and [http://microformats.org/discuss/mail/microformats-new/ microformats-new mailing list].

h-entry is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-entries up as classic [[hAtom]] entries.

== Property Details ==
This section is a stub.
=== p-location ===
'''<code>p-location</code>''' has been re-used from [[h-event]].

== FAQ ==
=== p-name of a note ===
<div class="discussion">
* '''What is the <code>p-name</code> of a [http://indiewebcamp.com/note note]?'''
** A few options, from simplest to most detailed.
*** '''same as the p-content/e-content''' property.
*** '''same as the <code>title</code> element''' on the note permalink post page. When publishing a note on its own permalink post page, the contents of the note are likely abbreviated for the title of the page. The same abbreviation can be used for the p-name.
*** '''first sentence of the p-content/e-content''' property. It may be better for [http://indiewebcamp.com/syndication syndication] and [[link-preview]] purposes to provide just the first sentence of the note as the <code>p-name</code>. Similarly if only a portion of the content is syndicated to other sites, that portion can be marked up as the <code>p-summary</code>.
</div>

=== venue an entry was posted from ===
<div class="discussion">
* '''How do you indicate a named venue where an entry was posted from? Like a restaurant or park.'''
** Use an embedded [[h-card]] microformat on a <code>p-location</code> property value.
</div>
=== address an entry was posted from ===
<div class="discussion">
* '''How do you indicate the address where an entry was posted from? Like a restaurant or park.'''
** If the address is just part of a named venue, see above, use an [[h-card]]
** Otherwise use an embedded [[h-adr]] microformat on a <code>p-location</code> property value.
</div>
=== lat long an entry was posted from ===
<div class="discussion">
* '''How do you indicate the latitude and longitude of where an entry was posted from?'''
** If the location has a name in addition to latitude and longitude, see above, use an [[h-card]]
** Otherwise if there is an address in addition to latitude and longitude, see above, use an [[h-adr]]
** Otherwise use an embedded [[h-geo]] microformat on a <code>p-location</code> property value.
</div>

== Examples in the wild ==
Real world in the wild examples:

* ... add uses of h-entry you see in the wild here.
* App.net marks up profile pages and permalink pages with h-entry as of 2013-08-06 ([https://alpha.app.net/voidfiles example])
* The Twitter archive browser UI uses h-entry and h-card internally, unfortunately it’s not exposed as HTML in static files anywhere
* Brett Comnes marks up his posts with h-entry and h-card ([http://bret.io/2013/06/29/getting-started-with-bower/ example])
* Ben Werdmuller marks up his posts with h-card and h-entry, u-in-reply-to and u-like ([http://werd.io/view/51d5097fbed7ded0633a5956 example])
* Sandeep Shetty marks his posts up with h-card and h-entry, as well as draft u-in-reply-to and experimental u-like properties ([http://sandeep.io/101 example])
* spreadly marks up share permalink pages with h-entry, as well as minimal h-cards and experimental p-like properties ([http://my.spread.ly/share/51d570bc09e9486562000002 example])
* Laurent Eschenauer marks up his posts with h-entry ([http://eschnou.com/entry/first-autonomous-flight-of-my-nodecopter-62-24992.html example])
* Tom Morris marks up his posts using h-entry ([http://tommorris.org/posts/8417 example])
* Numerous newer W3C specs, e.g.
** [http://www.w3.org/TR/2013/CR-css3-values-20130404/ CSS Values and Units Module Level 3 - 2013-04-04]
** [http://www.w3.org/TR/2013/CR-css3-conditional-20130404/ CSS Conditional Rules Module Level 3 - 2013-04-04]
** [http://www.w3.org/TR/2013/WD-css3-page-20130314/ CSS Paged Media Module Level 3 - 2013-03-14]
** [http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130221/ CSS Counter Styles Level 3 - 2013-02-21]
* [http://wordpress.org/extend/themes/sempress SemPress] is a WordPress theme that supports h-card, h-feed/h-entry.
* [http://the-pastry-box-project.net/ The Pastry Box Project] use h-card and h-entry markup on their homepage and individual thoughts pages
* Aaron Parecki uses h-entry to mark up notes, e.g. [http://aaronparecki.com/2012/230/reply/1 2012/230/reply/1].
* [http://tantek.com/ Tantek Çelik] uses h-entry on his home page, as well as h-entry on all post permalinks, e.g. [http://tantek.com/2012/243/t1/name-beats-title-modern-use-dubline-core-wrong-uf2 2012-243 post], with [[rel-prev]]/[[rel-next]] (if applicable) to indicate prev/next posts
* [http://waterpigs.co.uk/ Barnaby Walters] uses h-entry on all notes and articles, as well as nested within notes as reply contexts [http://waterpigs.co.uk/notes/1468/ example] and comments [http://waterpigs.co.uk/notes/1482/ example].

== Validating ==
* '''[http://indiewebify.waterpigs.co.uk/validate-h-entry/ indiewebify.me h-entry validator]''' parses [[h-entry]] markup, finds common errors and makes suggestions for things to add, with code samples
{{h-spec-section-validating}}

== Backward Compatibility ==
=== Publisher Compatibility ===
For backward compatibility, you may wish to use classic [[hAtom]] classnames in addition to the more future-proof h-entry properties, for example:

<source lang=html4strict>
<div class="h-entry hentry">
<h1 class="p-name entry-title">My great blog post</h1>
</div>
</source>

=== Parser Compatibility ===
Microformats parsers {{should}} detect classic properties only if a classic root class name is found and parse them as microformats2 properties.

If an "h-entry" is found, don't look for an "hentry" on the same element.

Compat root class name: <code id="hentry">hentry</code><br/>
Properties: (parsed as '''p-''' plain text unless otherwise specified):

* <code>entry-title</code> - parse as '''<code>p-name</code>'''
* <code>entry-summary</code> - parse as '''<code>p-summary</code>'''
* <code>entry-content</code> - parse as '''<code>e-content</code>'''
* <code>published</code> - parse as '''dt-'''
* <code>updated</code> - parse as '''dt-'''
* <code>author</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
* <code>category</code>

=== Compat FAQ ===
==== What about rel bookmark ====
Also asked as: ''Why use an h-entry u-url u-uid for permalinks when I have [[rel-bookmark|rel=bookmark]]?''

A: tl;dr: use <code>class="u-url u-uid"</code> instead of <code>rel=bookmark</code> for post permalinks because it's simpler (fewer attributes), and works better across contexts (permalink page, recent posts on home page, collection of posts on archive pages).

rel=bookmark was the old [[hAtom]] way of marking up permalinks. Since then two factors have contributed to reducing use of rel inside microformats:
* rel by typically* document scoped in [[HTML5]] - thus making it inappropriate for use in microformats that are aggregated, e.g. a collection of posts on a home page or in monthly archives.
* it is easier to always use class names for properties. When formats use two (or more!) attributes in HTML to specify properties, confusion results in lower data quality (of the markup and thus the stuff that is marked up). Thus per the microformats [[principle]] of [[simplicity]], in [[microformats2]] we only use class names for properties.

<nowiki>*</nowiki> even though rel=bookmark in particular is article-element / sectioning scoped in HTML5[http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-bookmark], it's a detail that typical authors are not going to remember, and thus it's not good to depend on it for any kind of format.

== Background ==
This work is based on the existing [[hAtom]] microformat, and extensive selfdogfooding in the [http://indiewebcamp.com indie web camp] community.

== Design Principles ==

(stub, expand)

== See Also ==
* [[h-feed]]
* [[microformats2]]
* [[microformats2-parsing]]
* [[h-geo]]
* [[hCard]]

[[Category:Draft Specifications]]

hcard-advocacy

2013-12-24T17:31:52Z

ChristopheDucamp: Undo revision 64135 by Numpangliwat (Talk)

<entry-title>hCard advocacy</entry-title>
{{TOC-right}}
Part of the larger microformats [[advocacy]] effort. Adding [[hcard|hCard]] to these sites would improve their usability and ambient findability.

== Online Profiles ==
=== Sites to check ===
The following sites may have hCard or XFN support and need to be checked and placed into lists on [[hcard-supporting-user-profiles]] and [[hcard-xfn-supporting-friends-lists]] as well. Feel free to add icons/logos for each of these as well.
* http://amazon.com
* http://aol.com
* http://bebo.com
* http://bloglines.com
* http://blogspot.com
* http://connotea.org
* http://hi5.com
* http://ilike.com
* http://imageshack.us
* http://librarything.com
* http://meetup.com
* http://mugshot.org
* http://multiply.com
* http://myspace.com
* http://network.nature.com
* http://picasaweb.google.com
* http://pictures.aol.com
* http://reader.google.com
* http://reddit.com
* http://smugmug.com
* http://socializr.com
* http://spaces.live.com
* http://stumbleupon.com
* http://touchlocal.com
* http://travelpod.com
* http://tribe.net
* http://tumblr.com
* http://webshots.com
* http://xanga.com
* http://yelp.com
* http://ziki.com

=== User Profiles ===
Nearly every website that has a login has a page representing the public profile of the user that other users can see and interact with. Many such sites already [[hcard-supporting-user-profiles|support hCard]] (e.g. ClaimID.com, Flickr.com, Technorati.com). Here are some that I think would benefit from the addition of hCard to their profile / user pages, making them [[hcard-supporting-user-profiles]].

Feel free to add more such sites (please keep alphabetically sorted!) that have a social network profile-like component and we'll see what we can do, as well as add icons/logos for each of these as well.

* http://360.yahoo.com
* http://alexa.com has online profiles for domains with contact information. Would be great if they could add hCard to those. 2007-04-18 [[User:Tantek]] requested of [[User:BenWest]] e.g.:
** http://www.alexa.com/data/details?url=alexa.com/
** http://www.alexa.com/data/details?url=w3.org/
* http://amazon.com
* [http://anobii.com Anobii] - I asked them if they could implement hCard-supporting profiles and XFN on 2007-10-05 - [[User:JulianStahnke|Julian Stahnke]]
** Response: We will definitely spend some time to consider the suggestion.
** Got another mail from one of their developers, they’re looking into it.
* http://aol.com
* http://bebo.com
* http://bloglines.com
* http://del.icio.us
* [http://www.facebook.com Facebook] is a very popular (over 13 million members) community.
**Requested support of microformats in [http://flickr.com/photos/56624456@N00/1399881855/ openly asked question to Mark Zuckerberg (founder of Facebook) during Q&A at TechCrunch40 conference], and got [http://therealmccrea.wordpress.com/2007/09/18/facebook-to-support-open-standards/ lukewarm reply]. Glimmer of hope: "When it's important to our users, we'll do it." Thus if you are a Facebook user, please make a request to them to support microformats and tell them it is important to you. Feel free to add your name below. 2007-09-17 [[User:Tantek|Tantek]]
*** Additional notes of Mark's response to Q above: "fits into context of push to open up in more ways, but keep in mind we're a really small company, under 300, so with respect to open standards, it's a matter of priorities. When it's important to our users we'll do it." Notes taken by John McCrea of Plaxo at TechCrunch40 conference.
**Requested in message to developer, 2007-09-28 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.icq.com/people ICQ people], where they show people's profiles and have a few ways of contacting and/or connection to people.
* http://instagram.com/ e.g. http://instagram.com/mikeyk/ should have hCard
** 2012-11-05 contacted mikeyk. [[User:Tantek|Tantek]] 23:02, 5 November 2012 (UTC)
*** requested [[rel-me]] support. "will get rolled out with next push." (!)
*** requested [[hCard]] support (offered to help add markup). - [[User:Tantek|Tantek]]
* http://picasaweb.google.com
* http://pictures.aol.com
* http://socializr.com
* http://viddler.com
* Wikimedia - including this site, Wikipedia (See [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats WikiProject Microformats]), Wikitravel, etc.
**It would be nice if <nowiki>[[User:YOURNAME]]</nowiki> links generated proper (mini)hCards. ([http://microformats.org/wiki?title=to-do&diff=12177&oldid=12173#Lazyweb per SteveIvy]; moved from 'to-do')
* http://yelp.com
* http://youtube.com The very popular YouTube has profiles that do include some information (username) that uses [[hcard|hCard]].
* http://zooomr.com

==== appear to be offline ====
* [http://dodgeball.com/ Dodgeball] - see [[dodgeball-advocacy]] - taken offline in 2009
* [http://idubyou.com/ i dub you] - appears to be 404 as of 2008-02-02 [[User:Tantek|Tantek]] 20:28, 2 Feb 2008 (PST)

=== XFN rel me ===
These sites have a field for the user to enter a URL to their home page or blog, and thus should support [[rel-me]] in addition to class="url" on those links inside the user's hCard profile.
* [http://del.icio.us/ del.icio.us]
* [http://myspace.com Myspace]

=== hCard XFN friends lists ===
In addition, if sites with people profiles have friends lists, we should encourage them to add support for [[hcard-xfn-supporting-friends-lists]]. Both of these help [[social-network-portability]] and help the site become a node on the [[open-social-web]]. Feel free to add icons/logos for each of these as well.
* http://360.yahoo.com

==== appear to be offline ====
* [http://dodgeball.com/ Dodgeball] - see [[dodgeball-advocacy]] - taken offline in 2009

=== Company Profiles ===
* [http://getsatisfaction.com/ Satisfaction Unlimited], has company profiles, e.g. http://getsatisfaction.com/satisfaction/ that could be marked up with hCards.
** Contacted Ted Grubb at the company and requested hCards for company and its employees for all their company profiles. [[User:Tantek|Tantek]] 11:24, 2 Sep 2007 (PDT)

== Online Address Books ==
* ...

== Online Venues ==
There are many sites that offer pages that represent organizations and venues that could benefit from being marked up with hCard. [http://local.yahoo.com/ Yahoo Local] venues are marked up with hCards for example. Here are some more sites that have venues that would benefit from hCard markup.
* http://opentable.com - a site for making restaurant reservations
** [[hcard|hCard]] for restaurants
** [[hcalendar|hCalendar]] for free busy times at restaurants
** [[hcalendar|hCalendar]] for your reservations
** Tantek has emailed a friend who is a former employee of OpenTable with the above three requests, in the hopes she can pass on the message. In addition, Ryan King may know someone in marketing there. [[User:Tantek|Tantek]] 16:57, 30 Sep 2007 (PDT)
*[http://www.wikioutdoors.com/ WikiOutdoors]
**Could use hCard, Geo, and others
** Requested, 2007-03-14
**[http://www.wikioutdoors.com/forums/viewtopic.php?p=80#80 Considering] [[User:AndyMabbett|Andy Mabbett]] 04:17, 15 Mar 2007 (PDT)
* [http://www.MotorwayServices.info Motorway Services Info] (UK)
**hCard (& Geo) and hReviewRequested by e-mail, 2007-09-21 [[User:AndyMabbett|Andy Mabbett]]

== Plugins for and modifications of web-applications ==
Many web-applications use plugin-systems to change their behavior and content. Most notable is probably web-forums and blogs. Many of these have a community of coders that develop plugins or code to modify the default behavior of these web-applications. Here are some sites where it might be interesting to develop hcard-related plugins/mods.

=== WYSIWYG buttons ===
In addition to getting them to markup obvious references to users/usernames with hCard, it would be great to see them update their WYSIWYG authoring interfaces (little creator/style buttons that often line up just above the top of a blog post editing textarea for creating links, lists etc.) to add a "person" button (perhaps with an icon http://microformats.org/wiki/skins/monobook/user.gif) which simply inserts [[hCard]] markup for you, or better yet, lets you pick someone from your address book, and then inserts an inline hCard with their name, URL (and perhaps even your [[XFN]] relationship to them) for you. While they're at it, perhaps a similar button/feature for easily inserting an [[hCalendar]] event.

=== Tools ===
* forum-software
** http://www.phpbb.com
* blog-software
** http://b2evolution.net
** WordPress
** Moveable Type
** LiveJournal

==Telephone Directory Listings==
Telephone Directory Listings could usefully apply hCard to their results pages, e.g. (please add other examples!):

* [http://www.thephonebook.bt.com/ BT]
** '''Requested''' via [http://tinyurl.com/yhtdjy BT feedback form], 2006-11-13 [[User:AndyMabbett|Andy Mabbett]]
** BT confirm that they will consider this at their next re-build. 2006-12 [[User:AndyMabbett|Andy Mabbett]]
** A BT [http://monkeyformats.org Monkeyformat] is available at [http://userscripts.org/scripts/show/24705 Userscripts.org] which will add hcard markup through GreaseMonkey.
* [http://118118.com 118118.com]
** '''Requested''' via e-mail, 2006-11-13. [[User:AndyMabbett|Andy Mabbett]]
* [http://192.com/ 192.com]
** '''Requested''' via [http://www.192.com/support/feedback.cfm 192.com feedback form], 2007-03-07 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.skype.com/intl/en-gb/download/features/skypefind/ SkypeFind]
** ''Requested''' via [http://support.skype.com/?_a=tickets&_m=submit Skype feedback form], 2007-03-16 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.whitepages.com/ White Pages (USA/ Canada)]
* [http://www.whitepages.com.au/ White Pages (Australia)]
* [http://www.switchboard.com/ Stitchboard (USA)]]
* [http://www.whowhere.com/ Lycos People Search (USA)]
* [http://www.bsnl.co.in/map.htm BSNL (India)]
* [http://www.saynoto0870.com/ saynoto0870.com] (UK listings of geo vs. non-geo equivalents)
** '''Requested''' by feedback form, 2007-10-13. [[User:AndyMabbett|Andy Mabbett]]
* [http://www.farangfriendly.com/ Farang Friendly (Thailand)]]
* [http://www.411locate.com/ 411 Locate (USA)]

==Postal (ZIP) code Finders==
Postal code Finders could usefully apply hCard to their results pages. [[User:AndyMabbett|Andy Mabbett]] 12:09, 13 Nov 2006 (PST)

e.g. (please add other examples!):
*[http://pol.royalmail.com/dda/txt/pf.asp Royal Mail] (UK)
**Requested via [http://tinyurl.com/ya4hzu Royal Mail feedback form], 2006-11-13 [[User:AndyMabbett|Andy Mabbett]]
**Acknowledged 2006-11-30. [[User:AndyMabbett|Andy Mabbett]]

==Government hCard==
===UK Gov. hCard===
* Parliament: [http://www.parliament.uk/directories/hciolists/alms.cfm Alphabetical List of Members of Parliament] (see also [http://www.parliament.uk/directories/directories.cfm other lists of MPs and Lords]). [[User:AndyMabbett|Andy Mabbett]]

===Europe Gov. hCard===
* e.g. [http://www.europarl.org.uk/uk_meps/westmidlands.asp UK MEPs]

=== MAPLight ===
http://maplight.org/ can use a bunch of hCard markup, e.g.
* individual politicians, like [http://www.maplight.org/map/us/legislator/408/individuals Nancy Pelosi]
* mentions of politicians on interest pages like [http://www.maplight.org/map/us/interest/L1300 Teachers unions]
* their contact info of course: http://www.maplight.org/contact
Requested by [[User:Tantek|Tantek]] 12:13, 30 May 2007 (PDT) in person at the NetSquared2007 conference.

== Organization Contacts ==
Many companies and organizations have about or contact pages that could benefit from being marked up with hCard. [http://technorati.com/about/contact.html Technorati's contact page] for example is both marked up with hCard and has a convenient "Add to Address Book" hCard to vCard converter link. The following company sites could benefit from similar markup (and, until user agents support hCards natively, "Add to Address Book" links). [[User:Tantek|Tantek]] 17:44, 13 Dec 2006 (PST)
*Adobe
**[http://www.adobe.com/aboutadobe/offices.html Adobe offices]
***Requested using contact form, 2006-12-14. [[User:AndyMabbett|Andy Mabbett]]
*claimID
**[http://claimid.com/people claimID people]
***requested via instant message with Terrell Russell (co-founder) 2007-11-20. [[User:Tantek|Tantek]]
*Google
**Contacts, e.g.
*** [http://www.google.com/intl/en/contact/index.html Google.com contact page]
**** Requested by asking Google Employee KevinMarks via instant messaging to add hCard to that page along with a "Add to Address Book" link [[User:Tantek|Tantek]] 11:32, 10 Apr 2007 (PDT) and RyanKing in IRC
**** Gmail [http://www.google.com/support/forum/p/gmail/thread?tid=6021050d0038e8e0&hl=en feature requested] in ''Help Forum > Buzz & Contact'' category to have hCard included as 'contact sharing/export' feature, [[User:Gdibble|Gabriel Dibble]] 22:56, 29 Jul 2011 (PST)
*** [http://www.google.co.uk/intl/en/contact/index.html Google UK], etc.
*[http://ibm.com/ IBM]
**[http://www.ibm.com/contact/us/ IBM contact page]
*** Requested by asking IBM employee Michael Kaply via IRC 2007-07-31 08:57am PDT: "how about getting hCard and 'Add to address book' links on the IBM contact page?"
*[http://www.mozilla.com/ Mozilla]
**[http://www.mozilla.com/en-US/about/legal.html Mozilla legal notices]
*Opera
**People, e.g. [http://people.opera.com/howcome/ Håkon Wium Lie]; could also be hResume
*W3C
**[http://www.w3.org/Consortium/contact W3C contact]
**[http://www.w3.org/People/all W3C Staff listing] and individual pages, e.g. [http://www.w3.org/People/Berners-Lee/ Tim Berners-Lee]
***Requested by e-mail. [[User:AndyMabbett|Andy Mabbett]]

== Individual hCards ==
Getting these sites to at least add hCard to their home page or contact info page would be an excellent start with getting them some experience with microformats and thinking about adding microformats to other places in their sites that make sense:
* [http://metaweb.com/ Metaweb Technologies]
** [http://www.freebase.com/ Freebase ]

==Trade directories==
* [http://www.booktrust.org.uk/info/search_publishers.php BookTrust (UK book publishers)]
* [http://www.gepir.org/ Global Electronic Party Information Register] (GEPIR) over 1 million companies
** Requested 2007-08-31 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.journa-list.com/ Journa-list]
** hCard, rel-tag requested 2007-10-13, by e-mail. [[User:AndyMabbett|Andy Mabbett]]

==Store locators==
(see [http://www.google.com/search?q=%22store+locator%22 Google search for "store locator"]; "about 2,000,000" results!)
* [http://www.argos.co.uk/webapp/wcs/stores/servlet/ArgosGSGiftModeExitCmd?action=ArgosStoreLocatorMain?langId=-1&storeId=10001 Argos (UK)]
* [http://www.multimap.com/clients/places.cgi?client=asda_sf Asda (UK; part of WalMart)]
* [http://www.boots.com/storelocator/store_search.jsp Boots (UK)]
* [http://www.mcdonalds.co.uk/asp/locator/index.asp McDonalds (UK)]
* [http://www.tesco.com/storelocator/ Tesco (UK)]

== people search ==
* [http://www.spock.com/ SPOCK]
** primarily could use hCard on the search results (this is a search engine for people after all)
** rel-tag namespace possibly
** VoteLinks
**'''Requested''', 2007-09-13 [[User:DavidMead|David Mead]]

==Other hCard==
* [http://www.imdb.com/ Internet Movie Database] (IMDb) for people (real, not characters), e.g. [http://www.imdb.com/name/nm0000007/ Humphrey Bogart]. [[User:AndyMabbett|Andy Mabbett]] 02:49, 13 Nov 2006 (PST)
**Can't find contact info! [[User:AndyMabbett|Andy Mabbett]]
**See also example, below.
*Wikitravel
**e.g. [http://wikitravel.org/en/Birmingham_%28England%29 Wikitravel - Birmingham]
***[http://microformats.org/wiki?title=User_talk:MarkJaroski&curid=2699&diff=0&oldid=10663&rcid=19955 Wikitravel is about to hugely roll out hCard] Mark Jaroski
***See also [http://wikitravel.org/en/Wikitravel:Microformats Wikitravel:Microformats]
*[http://orlabs.oclc.org/Identities/ WorldCat Identities]
**The recently prototyped WorldCat Identities provides pages for 20 million 'identities', mainly authors and people who are the subjects of published titles.
**Requested by feedback form, 2007-03-09 [[User:AndyMabbett|Andy Mabbett]]
** No reply, as of 02:02, 13 Jun 2007 (PDT)
*[http://geonames.org GeoNames]
**Requested by e-mail, 2007-06-07 [[User:AndyMabbett|Andy Mabbett]]
**Reply confirms that they will deploy hCard and Geo
**Geo noted in use, 06:08, 30 Jul 2007 (PDT)
*[http://www.oup.com/oxforddnb/info/ Oxford Dictionary of National Biography] (ODNB); subscription based, but [http://www.oxforddnb.com/public/lotw/ some ODNB articles available free]. All 56,000+ entries have Date of Death.
*[http://www.findagrave.com/ Find-a-Grave] e.g. [http://www.findagrave.com/cgi-bin/fg.cgi?page=gr&GRid=680 Karl Marx]. Most entries have Date of Death.
*[http://www.biography.com/ Biography.com] e.g. [http://www.biography.com/impressionists/monet-bio.jsp Camille Monet] Most posthumous entries have Date of Death.
*[http://www.cwgc.org/ Commonwealth War Graves Commission] (1.75 million people's details)
**E-mail sent 2007-08-24. [[User:AndyMabbett|Andy Mabbett]]
*Civil Aviation Authority; UK aircraft register
** e.g [http://www.caa.co.uk/application.aspx?catid=60&pagetype=65&appid=1&mode=detailnosummary&fullregmark=G-MOUR G-MOUR]
*[http://chicago.everyblock.com/ Chicago Everyblock]

== Successes ==
Perhaps we can consider moving successes to a separate page, like [[hcard-advocacy-successes]]. [[User:Tantek|Tantek]]
=== in 2012 ===
* [http://foursquare.com Foursquare] - a location based checkin site
** 2009-272 [[User:Tantek|Tantek]] requested and sent sample marked up HTML code from their site to their lead dev HarryH
** 2012-200 verified that venues have hCards and HarryH confirmed that "they've been there for quite some time now."
...

...
=== in 2010 ===
==== BrightKite ====
* http://brightkite.com
** 2010-05-16 requested their front-end developer to support hCards for user profiles and venues - [[User:Tantek|Tantek]]
** 2010-06-09 front-end developer noted that they support hCard for profiles but have problems with vCard conversion - [[User:Tantek|Tantek]]
** 2010-06-11 followed up and gave advice to fix their hCard (and rel-me) support on user profiles - [[User:Tantek|Tantek]] 16:31, 10 June 2010 (UTC)
** 2010-06-11 followed up and gave advice for minor fixex to their hCard support on venues - [[User:Tantek|Tantek]] 16:32, 10 June 2010 (UTC)
** 2010-06-17 success on both! [[User:Tantek|Tantek]] 05:25, 13 July 2010 (UTC)
*** noted in blog post: http://microformats.org/2010/07/08/microformats-org-at-5-hcards-rich-snippets

==== Basecamp ====
As requested in the Basecamp Customer Forum (was at <nowiki>http://forum.37signals.com/basecamp/forums/3/topics/9091</nowiki>), "It would be really nice (and stupid easy!) to add microformats to Basecamp, such as hCard on the ‘People’ page. ... constantly looking up phone numbers there, it would be nice to have the option to export into ... address book. ... they could also go in the ‘Who’s talking about this message?’ column too!."

Tweets in support: [http://twitter.com/energy0m/statuses/920692130 energy0m]

* 2010-07-03 [http://answers.37signals.com/basecamp/556-any-chance-of-adding-hcards#reply_5105 success]! Thanks [[User:Adactio]]!

=== in 2009 ===
* 2009-05
** Yelp.com added hCard to all venues.

=== in 2008 ===
* ...

=== in 2007 ===
*W3C
**'''W3C webmaster''' [http://www.w3.org/People/Jean-Gui/ Jean-Guilhem Rouel] now has an hCard. [[User:AndyMabbett|Andy Mabbett]] 15:41, 4 Apr 2007 (PDT)
* [http://jpgmag.com/ JPG magazine] - have sent email to their web developer with sample marked up member profile with [[hcard|hCard]] and [[xfn]] [[rel-me|rel="me"]]. [[User:Tantek|Tantek]] 23:48, 21 Feb 2007 (PST)
** [[hcard|hCard]]+[[xfn]] [[rel-me|rel="me"]] support as of March 2007.
* Twitter.com - working on it [[User:Tantek|Tantek]] 17:44, 13 Dec 2006 (PST).
** Completed [[hcard|hCard]]+[[xfn]]+[[hatom|hAtom]] support last week with help from Chris Messina. [[User:Tantek|Tantek]] 12:01, 16 May 2007 (PDT)
* Consumating.com - working on it [[User:Tantek|Tantek]] 17:44, 13 Dec 2006 (PST)
** [[hcard|hCard]] profiles, [[hcalendar|hCalendar]] events as of March 2007.
* [http://sunlightlabs.com/api/ SunlightLabs API] provides profiles for US Congresspeople. Their [http://sunlightlabs.com/api/masterref/megatable.php megatable] could easily be marked up with hCard, and their APIs could return hCards and hCard fields.
** [[User:Tantek|Tantek]] 12:30, 20 Apr 2007 (PDT) contacted them and requested that they add hCard to megatable, consider a GethCard API method, and potentially a GethResume API method for each person.
** [[User:CarlAnderson|CarlAnderson]] 26 Apr 2007: http://sunlightlabs.com/api does now have a people.getHCard.php API method to get an hCard for every member of congress. See the documentation at http://sunlightlabs.com/api/people.getHCard.php. An example call: http://api.sunlightlabs.com/people.getHCard.php?id=fakeopenID1
** [[User:CarlAnderson|CarlAnderson]] 30 Apr 2007: I created a page of hCards for every member of congress: http://sunlightlabs.com/api/hcards/index.php
* [http://pownce.com Pownce] - I'm talking with them, and have requested the following (and a bit more) as of 2007-07-29 - [[User:Tantek|Tantek]]
** needs to add class="photo" to image icon
*** 2007-09-02 success!
** needs to add class="note" to description
*** 2007-09-02 success!
** needs to add hCard+XFN to friends lists.
*** 2007-09-02 partial success, friends lists have hCard, have asked Daniel Burka to add rel="acquaintance" per [[xfn-clarifications#are_you_my_friend_yes_or_no|XFN clarifications for yes/no friend relationships]]. [[User:Tantek|Tantek]] 10:41, 3 Sep 2007 (PDT)
**** 2008-01 success!
** 2007-09-02 note also XFN rel="me" success: http://pownce.com/t/notes/644806/

====Wikpedia hCard====
*Infobox Templates for people mostly now have [[hcard|hCard]] in their generated markup
** [http://en.wikipedia.org/wiki/Template:Infobox_Person Infobox_Person]; e.g. [http://en.wikipedia.org/wiki/E._O._Wilson E. O. Wilson]
** [http://en.wikipedia.org/wiki/Template:Infobox_actor Infobox_actor]; e.g. [http://en.wikipedia.org/wiki/Humphrey_Bogart Humphrey Bogart]
*Addressable buildings e.g. [http://en.wikipedia.org/wiki/The_Old_Crown%2C_Birmingham The Old Crown, Birmingham]
*Tourist attractions, e.g. [http://en.wikipedia.org/wiki/Cadbury_World%2C_Birmingham Cadbury World]
*Companies, e.g. [http://en.wikipedia.org/wiki/Tesco Tesco] (note headquarters address in infobox)
*Railway Stations, e.g. [http://en.wikipedia.org/wiki/Perry_Barr_railway_station Perry Barr]
*etc.
*See also [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats WikiProject Microformats] [[User:AndyMabbett|Andy Mabbett]] 13:10, 28 Jan 2007 (PST)
* See also [[persondata|discussion of Wikipedia's Persondata]], which aligns very closely with hCard, but has additional date and place of birth & death fields. [[User:AndyMabbett|Andy Mabbett]] 13:23, 28 Mar 2007 (PDT)

Some microformat data is now (2007-09-14) being removed from Wikipedia; see, for example [http://en.wikipedia.org/w/index.php?title=List_of_Gaudi_Buildings&diff=prev&oldid=157704557 List_of_Gaudi_Buildings]

=== in 2006 ===
*Details of hCard should be added to the [http://www.imc.org/pdi/ Internet Mail Consortium's vCard page]
**Requested by e-mail, 2006-11-24 [[User:AndyMabbett|Andy Mabbett]]
**'''Success''' achieved 2006-11-25. [[User:AndyMabbett|Andy Mabbett]]

==See also==
*[[advocacy]] (in particular see [[advocacy#Geo|Geo advocacy]] - for the Geo microformat, including cases where it may be used inside hCard)
*[[advocacy-email-samples]]
{{hcard-related-pages}}

hcard-advocacy

2013-12-24T17:29:50Z

ChristopheDucamp: Reverted edits by Upakarti (Talk) to last version by Numpangliwat

<entry-title>hCard advocacy</entry-title>
{{TOC-right}}
Part of the larger microformats [[advocacy]] effort. Adding [[hcard|hCard]] to these sites would improve their usability and ambient findability.

== Online Profiles ==
=== Sites to check ===
The following sites may have hCard or XFN support and need to be checked and placed into lists on [[hcard-supporting-user-profiles]] and [[hcard-xfn-supporting-friends-lists]] as well. Feel free to add icons/logos for each of these as well.
* http://amazon.com
* http://aol.com
* http://bebo.com
* http://bloglines.com
* http://blogspot.com
* http://connotea.org
* http://hi5.com
* http://ilike.com
* http://imageshack.us
* http://kemanaservices.com
* http://librarything.com
* http://meetup.com
* http://mugshot.org
* http://multiply.com
* http://myspace.com
* http://network.nature.com
* http://picasaweb.google.com
* http://pictures.aol.com
* http://reader.google.com
* http://reddit.com
* http://smugmug.com
* http://socializr.com
* http://spaces.live.com
* http://stumbleupon.com
* http://touchlocal.com
* http://travelpod.com
* http://tribe.net
* http://tumblr.com
* http://webshots.com
* http://xanga.com
* http://yelp.com
* http://ziki.com

=== User Profiles ===
Nearly every website that has a login has a page representing the public profile of the user that other users can see and interact with. Many such sites already [[hcard-supporting-user-profiles|support hCard]] (e.g. ClaimID.com, Flickr.com, Technorati.com). Here are some that I think would benefit from the addition of hCard to their profile / user pages, making them [[hcard-supporting-user-profiles]].

Feel free to add more such sites (please keep alphabetically sorted!) that have a social network profile-like component and we'll see what we can do, as well as add icons/logos for each of these as well.

* http://360.yahoo.com
* http://alexa.com has online profiles for domains with contact information. Would be great if they could add hCard to those. 2007-04-18 [[User:Tantek]] requested of [[User:BenWest]] e.g.:
** http://www.alexa.com/data/details?url=alexa.com/
** http://www.alexa.com/data/details?url=w3.org/
* http://amazon.com
* [http://anobii.com Anobii] - I asked them if they could implement hCard-supporting profiles and XFN on 2007-10-05 - [[User:JulianStahnke|Julian Stahnke]]
** Response: We will definitely spend some time to consider the suggestion.
** Got another mail from one of their developers, they’re looking into it.
* http://aol.com
* http://bebo.com
* http://bloglines.com
* http://del.icio.us
* [http://www.facebook.com Facebook] is a very popular (over 13 million members) community.
**Requested support of microformats in [http://flickr.com/photos/56624456@N00/1399881855/ openly asked question to Mark Zuckerberg (founder of Facebook) during Q&A at TechCrunch40 conference], and got [http://therealmccrea.wordpress.com/2007/09/18/facebook-to-support-open-standards/ lukewarm reply]. Glimmer of hope: "When it's important to our users, we'll do it." Thus if you are a Facebook user, please make a request to them to support microformats and tell them it is important to you. Feel free to add your name below. 2007-09-17 [[User:Tantek|Tantek]]
*** Additional notes of Mark's response to Q above: "fits into context of push to open up in more ways, but keep in mind we're a really small company, under 300, so with respect to open standards, it's a matter of priorities. When it's important to our users we'll do it." Notes taken by John McCrea of Plaxo at TechCrunch40 conference.
**Requested in message to developer, 2007-09-28 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.icq.com/people ICQ people], where they show people's profiles and have a few ways of contacting and/or connection to people.
* http://instagram.com/ e.g. http://instagram.com/mikeyk/ should have hCard
** 2012-11-05 contacted mikeyk. [[User:Tantek|Tantek]] 23:02, 5 November 2012 (UTC)
*** requested [[rel-me]] support. "will get rolled out with next push." (!)
*** requested [[hCard]] support (offered to help add markup). - [[User:Tantek|Tantek]]
* http://picasaweb.google.com
* http://pictures.aol.com
* http://socializr.com
* http://viddler.com
* Wikimedia - including this site, Wikipedia (See [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats WikiProject Microformats]), Wikitravel, etc.
**It would be nice if <nowiki>[[User:YOURNAME]]</nowiki> links generated proper (mini)hCards. ([http://microformats.org/wiki?title=to-do&diff=12177&oldid=12173#Lazyweb per SteveIvy]; moved from 'to-do')
* http://yelp.com
* http://youtube.com The very popular YouTube has profiles that do include some information (username) that uses [[hcard|hCard]].
* http://zooomr.com

==== appear to be offline ====
* [http://dodgeball.com/ Dodgeball] - see [[dodgeball-advocacy]] - taken offline in 2009
* [http://idubyou.com/ i dub you] - appears to be 404 as of 2008-02-02 [[User:Tantek|Tantek]] 20:28, 2 Feb 2008 (PST)

=== XFN rel me ===
These sites have a field for the user to enter a URL to their home page or blog, and thus should support [[rel-me]] in addition to class="url" on those links inside the user's hCard profile.
* [http://del.icio.us/ del.icio.us]
* [http://myspace.com Myspace]

=== hCard XFN friends lists ===
In addition, if sites with people profiles have friends lists, we should encourage them to add support for [[hcard-xfn-supporting-friends-lists]]. Both of these help [[social-network-portability]] and help the site become a node on the [[open-social-web]]. Feel free to add icons/logos for each of these as well.
* http://360.yahoo.com

==== appear to be offline ====
* [http://dodgeball.com/ Dodgeball] - see [[dodgeball-advocacy]] - taken offline in 2009

=== Company Profiles ===
* [http://getsatisfaction.com/ Satisfaction Unlimited], has company profiles, e.g. http://getsatisfaction.com/satisfaction/ that could be marked up with hCards.
** Contacted Ted Grubb at the company and requested hCards for company and its employees for all their company profiles. [[User:Tantek|Tantek]] 11:24, 2 Sep 2007 (PDT)

== Online Address Books ==
* ...

== Online Venues ==
There are many sites that offer pages that represent organizations and venues that could benefit from being marked up with hCard. [http://local.yahoo.com/ Yahoo Local] venues are marked up with hCards for example. Here are some more sites that have venues that would benefit from hCard markup.
* http://opentable.com - a site for making restaurant reservations
** [[hcard|hCard]] for restaurants
** [[hcalendar|hCalendar]] for free busy times at restaurants
** [[hcalendar|hCalendar]] for your reservations
** Tantek has emailed a friend who is a former employee of OpenTable with the above three requests, in the hopes she can pass on the message. In addition, Ryan King may know someone in marketing there. [[User:Tantek|Tantek]] 16:57, 30 Sep 2007 (PDT)
*[http://www.wikioutdoors.com/ WikiOutdoors]
**Could use hCard, Geo, and others
** Requested, 2007-03-14
**[http://www.wikioutdoors.com/forums/viewtopic.php?p=80#80 Considering] [[User:AndyMabbett|Andy Mabbett]] 04:17, 15 Mar 2007 (PDT)
* [http://www.MotorwayServices.info Motorway Services Info] (UK)
**hCard (& Geo) and hReviewRequested by e-mail, 2007-09-21 [[User:AndyMabbett|Andy Mabbett]]

== Plugins for and modifications of web-applications ==
Many web-applications use plugin-systems to change their behavior and content. Most notable is probably web-forums and blogs. Many of these have a community of coders that develop plugins or code to modify the default behavior of these web-applications. Here are some sites where it might be interesting to develop hcard-related plugins/mods.

=== WYSIWYG buttons ===
In addition to getting them to markup obvious references to users/usernames with hCard, it would be great to see them update their WYSIWYG authoring interfaces (little creator/style buttons that often line up just above the top of a blog post editing textarea for creating links, lists etc.) to add a "person" button (perhaps with an icon http://microformats.org/wiki/skins/monobook/user.gif) which simply inserts [[hCard]] markup for you, or better yet, lets you pick someone from your address book, and then inserts an inline hCard with their name, URL (and perhaps even your [[XFN]] relationship to them) for you. While they're at it, perhaps a similar button/feature for easily inserting an [[hCalendar]] event.

=== Tools ===
* forum-software
** http://www.phpbb.com
* blog-software
** http://b2evolution.net
** WordPress
** Moveable Type
** LiveJournal

==Telephone Directory Listings==
Telephone Directory Listings could usefully apply hCard to their results pages, e.g. (please add other examples!):

* [http://www.thephonebook.bt.com/ BT]
** '''Requested''' via [http://tinyurl.com/yhtdjy BT feedback form], 2006-11-13 [[User:AndyMabbett|Andy Mabbett]]
** BT confirm that they will consider this at their next re-build. 2006-12 [[User:AndyMabbett|Andy Mabbett]]
** A BT [http://monkeyformats.org Monkeyformat] is available at [http://userscripts.org/scripts/show/24705 Userscripts.org] which will add hcard markup through GreaseMonkey.
* [http://118118.com 118118.com]
** '''Requested''' via e-mail, 2006-11-13. [[User:AndyMabbett|Andy Mabbett]]
* [http://192.com/ 192.com]
** '''Requested''' via [http://www.192.com/support/feedback.cfm 192.com feedback form], 2007-03-07 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.skype.com/intl/en-gb/download/features/skypefind/ SkypeFind]
** ''Requested''' via [http://support.skype.com/?_a=tickets&_m=submit Skype feedback form], 2007-03-16 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.whitepages.com/ White Pages (USA/ Canada)]
* [http://www.whitepages.com.au/ White Pages (Australia)]
* [http://www.switchboard.com/ Stitchboard (USA)]]
* [http://www.whowhere.com/ Lycos People Search (USA)]
* [http://www.bsnl.co.in/map.htm BSNL (India)]
* [http://www.saynoto0870.com/ saynoto0870.com] (UK listings of geo vs. non-geo equivalents)
** '''Requested''' by feedback form, 2007-10-13. [[User:AndyMabbett|Andy Mabbett]]
* [http://www.farangfriendly.com/ Farang Friendly (Thailand)]]
* [http://www.411locate.com/ 411 Locate (USA)]

==Postal (ZIP) code Finders==
Postal code Finders could usefully apply hCard to their results pages. [[User:AndyMabbett|Andy Mabbett]] 12:09, 13 Nov 2006 (PST)

e.g. (please add other examples!):
*[http://pol.royalmail.com/dda/txt/pf.asp Royal Mail] (UK)
**Requested via [http://tinyurl.com/ya4hzu Royal Mail feedback form], 2006-11-13 [[User:AndyMabbett|Andy Mabbett]]
**Acknowledged 2006-11-30. [[User:AndyMabbett|Andy Mabbett]]

==Government hCard==
===UK Gov. hCard===
* Parliament: [http://www.parliament.uk/directories/hciolists/alms.cfm Alphabetical List of Members of Parliament] (see also [http://www.parliament.uk/directories/directories.cfm other lists of MPs and Lords]). [[User:AndyMabbett|Andy Mabbett]]

===Europe Gov. hCard===
* e.g. [http://www.europarl.org.uk/uk_meps/westmidlands.asp UK MEPs]

=== MAPLight ===
http://maplight.org/ can use a bunch of hCard markup, e.g.
* individual politicians, like [http://www.maplight.org/map/us/legislator/408/individuals Nancy Pelosi]
* mentions of politicians on interest pages like [http://www.maplight.org/map/us/interest/L1300 Teachers unions]
* their contact info of course: http://www.maplight.org/contact
Requested by [[User:Tantek|Tantek]] 12:13, 30 May 2007 (PDT) in person at the NetSquared2007 conference.

== Organization Contacts ==
Many companies and organizations have about or contact pages that could benefit from being marked up with hCard. [http://technorati.com/about/contact.html Technorati's contact page] for example is both marked up with hCard and has a convenient "Add to Address Book" hCard to vCard converter link. The following company sites could benefit from similar markup (and, until user agents support hCards natively, "Add to Address Book" links). [[User:Tantek|Tantek]] 17:44, 13 Dec 2006 (PST)
*Adobe
**[http://www.adobe.com/aboutadobe/offices.html Adobe offices]
***Requested using contact form, 2006-12-14. [[User:AndyMabbett|Andy Mabbett]]
*claimID
**[http://claimid.com/people claimID people]
***requested via instant message with Terrell Russell (co-founder) 2007-11-20. [[User:Tantek|Tantek]]
*Google
**Contacts, e.g.
*** [http://www.google.com/intl/en/contact/index.html Google.com contact page]
**** Requested by asking Google Employee KevinMarks via instant messaging to add hCard to that page along with a "Add to Address Book" link [[User:Tantek|Tantek]] 11:32, 10 Apr 2007 (PDT) and RyanKing in IRC
**** Gmail [http://www.google.com/support/forum/p/gmail/thread?tid=6021050d0038e8e0&hl=en feature requested] in ''Help Forum > Buzz & Contact'' category to have hCard included as 'contact sharing/export' feature, [[User:Gdibble|Gabriel Dibble]] 22:56, 29 Jul 2011 (PST)
*** [http://www.google.co.uk/intl/en/contact/index.html Google UK], etc.
*[http://ibm.com/ IBM]
**[http://www.ibm.com/contact/us/ IBM contact page]
*** Requested by asking IBM employee Michael Kaply via IRC 2007-07-31 08:57am PDT: "how about getting hCard and 'Add to address book' links on the IBM contact page?"
*[http://www.mozilla.com/ Mozilla]
**[http://www.mozilla.com/en-US/about/legal.html Mozilla legal notices]
*Opera
**People, e.g. [http://people.opera.com/howcome/ Håkon Wium Lie]; could also be hResume
*W3C
**[http://www.w3.org/Consortium/contact W3C contact]
**[http://www.w3.org/People/all W3C Staff listing] and individual pages, e.g. [http://www.w3.org/People/Berners-Lee/ Tim Berners-Lee]
***Requested by e-mail. [[User:AndyMabbett|Andy Mabbett]]

== Individual hCards ==
Getting these sites to at least add hCard to their home page or contact info page would be an excellent start with getting them some experience with microformats and thinking about adding microformats to other places in their sites that make sense:
* [http://metaweb.com/ Metaweb Technologies]
** [http://www.freebase.com/ Freebase ]

==Trade directories==
* [http://www.booktrust.org.uk/info/search_publishers.php BookTrust (UK book publishers)]
* [http://www.gepir.org/ Global Electronic Party Information Register] (GEPIR) over 1 million companies
** Requested 2007-08-31 [[User:AndyMabbett|Andy Mabbett]]
* [http://www.journa-list.com/ Journa-list]
** hCard, rel-tag requested 2007-10-13, by e-mail. [[User:AndyMabbett|Andy Mabbett]]

==Store locators==
(see [http://www.google.com/search?q=%22store+locator%22 Google search for "store locator"]; "about 2,000,000" results!)
* [http://www.argos.co.uk/webapp/wcs/stores/servlet/ArgosGSGiftModeExitCmd?action=ArgosStoreLocatorMain?langId=-1&storeId=10001 Argos (UK)]
* [http://www.multimap.com/clients/places.cgi?client=asda_sf Asda (UK; part of WalMart)]
* [http://www.boots.com/storelocator/store_search.jsp Boots (UK)]
* [http://www.mcdonalds.co.uk/asp/locator/index.asp McDonalds (UK)]
* [http://www.tesco.com/storelocator/ Tesco (UK)]

== people search ==
* [http://www.spock.com/ SPOCK]
** primarily could use hCard on the search results (this is a search engine for people after all)
** rel-tag namespace possibly
** VoteLinks
**'''Requested''', 2007-09-13 [[User:DavidMead|David Mead]]

==Other hCard==
* [http://www.imdb.com/ Internet Movie Database] (IMDb) for people (real, not characters), e.g. [http://www.imdb.com/name/nm0000007/ Humphrey Bogart]. [[User:AndyMabbett|Andy Mabbett]] 02:49, 13 Nov 2006 (PST)
**Can't find contact info! [[User:AndyMabbett|Andy Mabbett]]
**See also example, below.
*Wikitravel
**e.g. [http://wikitravel.org/en/Birmingham_%28England%29 Wikitravel - Birmingham]
***[http://microformats.org/wiki?title=User_talk:MarkJaroski&curid=2699&diff=0&oldid=10663&rcid=19955 Wikitravel is about to hugely roll out hCard] Mark Jaroski
***See also [http://wikitravel.org/en/Wikitravel:Microformats Wikitravel:Microformats]
*[http://orlabs.oclc.org/Identities/ WorldCat Identities]
**The recently prototyped WorldCat Identities provides pages for 20 million 'identities', mainly authors and people who are the subjects of published titles.
**Requested by feedback form, 2007-03-09 [[User:AndyMabbett|Andy Mabbett]]
** No reply, as of 02:02, 13 Jun 2007 (PDT)
*[http://geonames.org GeoNames]
**Requested by e-mail, 2007-06-07 [[User:AndyMabbett|Andy Mabbett]]
**Reply confirms that they will deploy hCard and Geo
**Geo noted in use, 06:08, 30 Jul 2007 (PDT)
*[http://www.oup.com/oxforddnb/info/ Oxford Dictionary of National Biography] (ODNB); subscription based, but [http://www.oxforddnb.com/public/lotw/ some ODNB articles available free]. All 56,000+ entries have Date of Death.
*[http://www.findagrave.com/ Find-a-Grave] e.g. [http://www.findagrave.com/cgi-bin/fg.cgi?page=gr&GRid=680 Karl Marx]. Most entries have Date of Death.
*[http://www.biography.com/ Biography.com] e.g. [http://www.biography.com/impressionists/monet-bio.jsp Camille Monet] Most posthumous entries have Date of Death.
*[http://www.cwgc.org/ Commonwealth War Graves Commission] (1.75 million people's details)
**E-mail sent 2007-08-24. [[User:AndyMabbett|Andy Mabbett]]
*Civil Aviation Authority; UK aircraft register
** e.g [http://www.caa.co.uk/application.aspx?catid=60&pagetype=65&appid=1&mode=detailnosummary&fullregmark=G-MOUR G-MOUR]
*[http://chicago.everyblock.com/ Chicago Everyblock]

== Successes ==
Perhaps we can consider moving successes to a separate page, like [[hcard-advocacy-successes]]. [[User:Tantek|Tantek]]
=== in 2012 ===
* [http://foursquare.com Foursquare] - a location based checkin site
** 2009-272 [[User:Tantek|Tantek]] requested and sent sample marked up HTML code from their site to their lead dev HarryH
** 2012-200 verified that venues have hCards and HarryH confirmed that "they've been there for quite some time now."
...

...
=== in 2010 ===
==== BrightKite ====
* http://brightkite.com
** 2010-05-16 requested their front-end developer to support hCards for user profiles and venues - [[User:Tantek|Tantek]]
** 2010-06-09 front-end developer noted that they support hCard for profiles but have problems with vCard conversion - [[User:Tantek|Tantek]]
** 2010-06-11 followed up and gave advice to fix their hCard (and rel-me) support on user profiles - [[User:Tantek|Tantek]] 16:31, 10 June 2010 (UTC)
** 2010-06-11 followed up and gave advice for minor fixex to their hCard support on venues - [[User:Tantek|Tantek]] 16:32, 10 June 2010 (UTC)
** 2010-06-17 success on both! [[User:Tantek|Tantek]] 05:25, 13 July 2010 (UTC)
*** noted in blog post: http://microformats.org/2010/07/08/microformats-org-at-5-hcards-rich-snippets

==== Basecamp ====
As requested in the Basecamp Customer Forum (was at <nowiki>http://forum.37signals.com/basecamp/forums/3/topics/9091</nowiki>), "It would be really nice (and stupid easy!) to add microformats to Basecamp, such as hCard on the ‘People’ page. ... constantly looking up phone numbers there, it would be nice to have the option to export into ... address book. ... they could also go in the ‘Who’s talking about this message?’ column too!."

Tweets in support: [http://twitter.com/energy0m/statuses/920692130 energy0m]

* 2010-07-03 [http://answers.37signals.com/basecamp/556-any-chance-of-adding-hcards#reply_5105 success]! Thanks [[User:Adactio]]!

=== in 2009 ===
* 2009-05
** Yelp.com added hCard to all venues.

=== in 2008 ===
* ...

=== in 2007 ===
*W3C
**'''W3C webmaster''' [http://www.w3.org/People/Jean-Gui/ Jean-Guilhem Rouel] now has an hCard. [[User:AndyMabbett|Andy Mabbett]] 15:41, 4 Apr 2007 (PDT)
* [http://jpgmag.com/ JPG magazine] - have sent email to their web developer with sample marked up member profile with [[hcard|hCard]] and [[xfn]] [[rel-me|rel="me"]]. [[User:Tantek|Tantek]] 23:48, 21 Feb 2007 (PST)
** [[hcard|hCard]]+[[xfn]] [[rel-me|rel="me"]] support as of March 2007.
* Twitter.com - working on it [[User:Tantek|Tantek]] 17:44, 13 Dec 2006 (PST).
** Completed [[hcard|hCard]]+[[xfn]]+[[hatom|hAtom]] support last week with help from Chris Messina. [[User:Tantek|Tantek]] 12:01, 16 May 2007 (PDT)
* Consumating.com - working on it [[User:Tantek|Tantek]] 17:44, 13 Dec 2006 (PST)
** [[hcard|hCard]] profiles, [[hcalendar|hCalendar]] events as of March 2007.
* [http://sunlightlabs.com/api/ SunlightLabs API] provides profiles for US Congresspeople. Their [http://sunlightlabs.com/api/masterref/megatable.php megatable] could easily be marked up with hCard, and their APIs could return hCards and hCard fields.
** [[User:Tantek|Tantek]] 12:30, 20 Apr 2007 (PDT) contacted them and requested that they add hCard to megatable, consider a GethCard API method, and potentially a GethResume API method for each person.
** [[User:CarlAnderson|CarlAnderson]] 26 Apr 2007: http://sunlightlabs.com/api does now have a people.getHCard.php API method to get an hCard for every member of congress. See the documentation at http://sunlightlabs.com/api/people.getHCard.php. An example call: http://api.sunlightlabs.com/people.getHCard.php?id=fakeopenID1
** [[User:CarlAnderson|CarlAnderson]] 30 Apr 2007: I created a page of hCards for every member of congress: http://sunlightlabs.com/api/hcards/index.php
* [http://pownce.com Pownce] - I'm talking with them, and have requested the following (and a bit more) as of 2007-07-29 - [[User:Tantek|Tantek]]
** needs to add class="photo" to image icon
*** 2007-09-02 success!
** needs to add class="note" to description
*** 2007-09-02 success!
** needs to add hCard+XFN to friends lists.
*** 2007-09-02 partial success, friends lists have hCard, have asked Daniel Burka to add rel="acquaintance" per [[xfn-clarifications#are_you_my_friend_yes_or_no|XFN clarifications for yes/no friend relationships]]. [[User:Tantek|Tantek]] 10:41, 3 Sep 2007 (PDT)
**** 2008-01 success!
** 2007-09-02 note also XFN rel="me" success: http://pownce.com/t/notes/644806/

====Wikpedia hCard====
*Infobox Templates for people mostly now have [[hcard|hCard]] in their generated markup
** [http://en.wikipedia.org/wiki/Template:Infobox_Person Infobox_Person]; e.g. [http://en.wikipedia.org/wiki/E._O._Wilson E. O. Wilson]
** [http://en.wikipedia.org/wiki/Template:Infobox_actor Infobox_actor]; e.g. [http://en.wikipedia.org/wiki/Humphrey_Bogart Humphrey Bogart]
*Addressable buildings e.g. [http://en.wikipedia.org/wiki/The_Old_Crown%2C_Birmingham The Old Crown, Birmingham]
*Tourist attractions, e.g. [http://en.wikipedia.org/wiki/Cadbury_World%2C_Birmingham Cadbury World]
*Companies, e.g. [http://en.wikipedia.org/wiki/Tesco Tesco] (note headquarters address in infobox)
*Railway Stations, e.g. [http://en.wikipedia.org/wiki/Perry_Barr_railway_station Perry Barr]
*etc.
*See also [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Microformats WikiProject Microformats] [[User:AndyMabbett|Andy Mabbett]] 13:10, 28 Jan 2007 (PST)
* See also [[persondata|discussion of Wikipedia's Persondata]], which aligns very closely with hCard, but has additional date and place of birth & death fields. [[User:AndyMabbett|Andy Mabbett]] 13:23, 28 Mar 2007 (PDT)

Some microformat data is now (2007-09-14) being removed from Wikipedia; see, for example [http://en.wikipedia.org/w/index.php?title=List_of_Gaudi_Buildings&diff=prev&oldid=157704557 List_of_Gaudi_Buildings]

=== in 2006 ===
*Details of hCard should be added to the [http://www.imc.org/pdi/ Internet Mail Consortium's vCard page]
**Requested by e-mail, 2006-11-24 [[User:AndyMabbett|Andy Mabbett]]
**'''Success''' achieved 2006-11-25. [[User:AndyMabbett|Andy Mabbett]]

==See also==
*[[advocacy]] (in particular see [[advocacy#Geo|Geo advocacy]] - for the Geo microformat, including cases where it may be used inside hCard)
*[[advocacy-email-samples]]
{{hcard-related-pages}}

h-entry

2013-12-24T17:28:52Z

ChristopheDucamp: Reverted edits by Ghaenthranor (Talk) to last version by Tantek

h-cite-fr

2013-09-29T11:37:26Z

ChristopheDucamp: [fr: french translation draft to be reviewed]

''Cette page a démarré sur [[h-cite]]''

<entry-title>h-cite</entry-title>
* <span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
* (<span class="h-card vcard"><span class="p-role role">traduction</span> <span class="p-name fn">[[User:ChristopheDucamp|Christophe Ducamp]]</span>)</span>

----
<dfn style="font-style:normal;font-weight:bold">h-cite</dfn> est un format simple, ouvert pour publier des citations et références aux publications en ligne. h-cite est l'un des nombreux [[microformats-fr|microformat]] standards ouverts à l'état de brouillon pour embarquer de la data en HTML/HTML5.

== Exemple ==
Voic un exemple simple minimal de citation web résumée :
<source lang=html4strict>
<span class="h-cite">
<time class="dt-published">AAAA-MM-JJ</time>
<span class="p-author h-card">AUTEUR</span>:
<cite><a class="u-url p-name" href="URL">TITRE</a></cite>
</span>
</source>

=== Pour démarrer ===
La classe '''<code>h-cite</code>''' est un ''nom de classe racine'' qui indique la présence d'un h-cite.

Les classes '''<code>dt-published</code>''', '''<code>p-author</code>''', '''<code>p-name</code>''', et '''<code>u-url</code>''' définisisent les ''propriétés'' du h-cite.

La classe '''<code>h-card</code>''' sur le même <code><span></code> que '''<code>p-author</code>''' indique la présence d'un microformat [[h-card-fr|h-card]] embarqué comme '''auteur''' du h-cite.

== Propriétés ==
Les propriétés h-cite (dans la classe <code>'''h-cite'''</code>)

* '''<code>p-name</code>''' - nom du travail
* '''<code>dt-published</code>''' - date (et optionnellement l'heure) de publication
* '''<code>p-author</code>''' - auteur de la publication, avec la [[h-card-fr|h-card]] optionnellement embarquée
* '''<code>u-url</code>''' - une URL pour accéder au travail cité
* '''<code>u-uid</code>''' - une URL/URI qui identifie uniquement/canoniquement le travail cité, le permalien canonique.
* '''<code>p-publication</code>''' - pour citer les articles dans les publications avec plus d'un auteur, ou peut-être quand l'auteur a une véhicule de publication spécifique pour le travail cité. Fonctionne aussi quand la publication est connue, mais l'information concernant la paternité d'auteur est soit méconnue, ambigue, non claire ou suffisamment complexe collaborativement pour être incapable de lister explicitement les auteurs, par ex. avec beaucoup de pages wiki.
* '''<code>dt-accessed</code>''' - date à laquelle le travail cité a été accédé pour quelque raison que ce soit. Utile dans le cas où le travail en ligne change et dans le cas où il est possible d'accéder à la version dt-accessed chronodatée, par ex. via l'Archive Internet.
* '''<code>p-content</code>''' dans le cas où la citation comprend le contenu en lui-même, par ex pour citer de courtes notes de texte (par ex. des tweets).

== Statut ==
'''h-cite''' est une spécification microformats.org draft. La discussion publique sur h-cite a lieu sur [[h-cite-feedback]], le canal [[irc]] #microformats sur irc.freenode.net, et la [http://microformats.org/discuss/mail/microformats-new/ liste de discussion microformats-new].

== Détails de Propriété ==
(ébauche, à développer)

Toutes les propriétés des citations web sont dérivées de celles implicites dans [[citation-formats#styles|guides existants de mise en forme de citation]] pour citer les permaliens vers les articles et les notes courtes de texte en ligne.

Les propriétés date-horaire (dt-published, dt-accessed) peuvent comprendre en option l'information horaire en plus de la date si cela est pertinent pour la citation (par ex. au moment de citer des notes de textes courtes (tweets) qui peuvent être nombreuses dans un jour unique).

À rajouter :
* for each property, what equivalent TCMOS, APA, MLA terms/vocabulary is being expressed/captured as researched in the [[citation-formats#styles|citation formats styles]] section.
* transforms from the web citations proposal properties into each of those citation styles.
** for citations of blog posts / articles
** for citations of text notes / tweets
** see examples in wild below for markup samples to style in each of the TCMOS/APA/MLA styles for blog/note citations.

== Citations Hors-ligne ==
La proposition de citation web peut être utilisée pour des cas d'usages simples web-vers-hors-du-web. Comme cela fut suggéré par Ed Summers, laisser tomber l'hyperlien vers l'article web cité fournit une citation simple hors-web :

<source lang=html4strict>
<span class="h-cite">
<time class="dt-published">AAAA-MM-JJ</time>
<span class="p-author h-card">AUTEUR</span>:
<cite class="p-name">TITRE</cite>
</span>
</source>

Prochaines étapes :
* Essayer un tel marquage avec du véritable contenu publié sur le web (peut-être une bibliographie, une liste d'articles dans un CV, etc.)
* Voir comment cela fonctionne ici
* Déterminer ce qui semble manquer.
* Voir si la propriété "p-publisher" aide dans le cas d'usage de citation-web-vers-hors-web.

== Exemples dans la jungle ==
Quelques exemples du vrai monde dans la jungle :
* ... ajoutez ici les usages de h-cite que vous voyez dans la jungle :

* <cite class="h-cite">[http://christopheducamp.com/blog/test-indieweb-parvenir-a-posser-un-article-vers-twitter/ Test #IndieWeb : Parvenir à « POSSEr » un article vers Twitter]</cite> a un h-cite d'un note courte :
<source lang=html4strict>
<blockquote><p>
<cite class="h-cite">
<a class="u-url p-name" href="http://tantek.com/2013/104/t2/urls-readable-speakable-listenable-retypable">
URLs should be readable, speakable, listenable, and unambiguously
retypable, e.g. from print: tantek.com/w/ShortURLPrintExample #UX
</a>
(<abbr class="p-author h-card" title="Tantek Çelik">Çelik</abbr>
<time class="dt-published">2013-04-14</time>)
</cite>
</p></blockquote>
</source>

Véritables exemples mais pas tout à fait dans la jungle (utilisés par l'auteur de la spécification)
* Chaque post de blog sur http://tantek.com a un champ de texte pour copier le marquage h-cite pour ce même post de blog.
* <cite class="h-cite">[http://tantek.com/2012/353/b1/why-html-classes-css-class-selectors Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes]</cite> a deux usages intéressants de h-cite :
** les propriétés utilisées : p-name, u-url, p-author, p-publication, dt-published, dt-accessed (basiquement toutes les propriétés proposées à l'exception de p-content!)
** une propriété supplémentaire expérimentale : p-x-translation - qui fait référence à un h-cite embarqué avec ses propres p-name et u-url implicites.

== Historique ==
Ce travail est basé sur la façon dont les [[citation-formats#styles|''styles'' de formats de citation]] (APA, MLA, TCMOS) représentent les références aux articles sur le web, et il est designé pour s'adapter au schéma implicite de ces styles. La proposition "web citations" définit comme marquer de tels styles de représentations de références afin de satisfaire les cas d'usages ci-dessus.

=== Objectif ===
Un objectif prioritaire de l'effort de citation web est à la fois de commencer petit, et de toujours "faire le plus petit possible", à savoir, peu importe comment il sera étendu, continuer à permettre de très petites citations faisant sens avec peut-être 2 ou 3 propriétés (par ex. date de publication, auteur, nom du travail).

=== Propositions Précédentes ===
Le plus gros problème avec toutes les propositions précédentes est qu'elles essayaient de faire beaucoup trop. Elles ne designaient pas un ''micro'' format de citation qui pourrait être utilisé comme brique de construction, mais tentaient plutôt de décrire les myriades de types de références vers des ressources d'arbres morts. Elles ont été sur-designées de sorte que même leurs auteurs ne les (NDT : dog-foodaient ?) utilisaient pas personnellement sur leurs propres sites. -- [[User:Tantek|Tantek]] 00:56, 7 August 2012 (UTC)

== FAQ ==
=== Pourquoi ===
''Pourquoi marquer les citations web ? Quel problème cela résout-il ?''

R : Dans sa plus simple expression, marquer une citation web URL, nom date de publication, auteur, etc. permet de traiter les citations web dans n'importe quel "style" ou "format" (MLA vs APA etc.) qu'un utilisateur désire pour ses propres besoins personnels.

=== Pourquoi pas simplement un href ===
''Est-ce que <code><a href></code> résout le problème de marquer les citations dans un article sur le web qui fait référence à d'autres articles sur le web ?''

R : Non, <code><a href></code> est nécessaire mais insuffisant pour marquer les <em>citations</em> ves des articles sur le web.

* '''Sémantique insuffisante.''' <code><a href></code> suffit seulement pour fournir un hyperlien (qui peut ou ne peut pas être une citation, par ex. ce peut être un lien "voir aussi" plutôt qu'un lien vers une source étant citée pour un argument spécifique ou un fait).
* '''Un href ne fait que marquer un lien vers un article et un nom''' Un <code><a href></code> ne peut représenter uniquement que l' "url" et le "nom" d'une citation. Tandis que les [[citation-formats#styles|citations web publiées]] comprennent généralement aussi :
** le nom de l'auteur de l'article (parfois la photo et l'URL de l'auteur)
** la date de publication de l'article
** le nom de publication de l'article
** la date de l'accès l'article (parfois, par ex. dans le cas de citations Wikipedia)

== Design Principles ==
Principes conduisant cette proposition :
* '''résoudre un problème [[specific-fr|spécifique]]'''. Dans ce cas, la '''citation web''' cherche à résoudre un problème ''plus'' spécifique que les propositions précédentes, celles des citations provenant du web vers le web (plus contraintes que toute publication vers n'importe quelle publication).
* [[solve-simpler-problems-first-fr|résoudre les problèmes les plus simples en priorité]]. Les citations web-vers-web existantes contiennent très peu d'information comparées aux citations académiques généralisée, par conséquent, '''web citations''' est grandement simplifié comparé aux précédentes propositions, en ne démarrant que par quelques propriétés.
* [[humans-first-fr|les humains d'abord]] - '''web citations''' se concentre en priorité sur les aspects humains de lecture et d'écriture des citations dans les articles, et seulement secondairement sur la lisbilité/ré-utilisabilité-machine de la data contenue dedans.
* [[reuse-fr|réutilisation]] de briques de construction - en ne réutilisant que les aspects les mieux designés des [[citation-formats#styles|conventions de citation existantes]] pour les ressources web. '''web citations''' se construit sur le sommet des précédents travaux pour faire que les citations soient lisibles/enregistrables, tout comme les propriétés implicites communément exprimées par les précédents travaux.
=== Focus ===
La proposition <dfn>web citations</dfn> utilise un ensemble plus petit, [[simpler-fr|plus simple]] de seulement ''huit'' propriétés pour résoudre le problème [[specific-fr|spécifique]] de la manière de marquer les citations dans un article <em>sur le web</em> qui fait référence à d'autres articles <em>sur le web</em>. Le "hors-ligne vers hors-ligne", et les références "en-lignevers-hors-ligne" ont été spécifiquement mais non explicitement résolues dans le design initial.

== Première Proposition==
Ce design a été proposé publiquement la première fois comme le résultat de la discussion d'un design interactif de citation web durant IndieWebCamp2012 :
* <span class="h-cite"><time class="dt-published">2012-07-01</time> <span class="p-publisher">IndieWebCamp2012</span> : <cite class="p-name">[http://indiewebcamp.com/2012/Academic_Citations_Web Academic Citations for the Web]</cite></span>

[[Category:Draft Specifications-fr]]

user-interface

2013-09-22T11:28:45Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title> User Interface </entry-title>

There have been many really good user interface ideas and suggestions for working with microformats. This page collects and document them so that we may be inspired by and iterate on each others' works.

== Design Guidelines ==
These are some suggested design guidelines for Web designers and developers by [http://blog.mozilla.com/faaborg/ Alex Faaborg], a user experience designer at Mozilla:
*Design based on actions, not data. A button that says "Send to Calendar" is considerably more useable than a green button that simply says "hCalendar"
*Use iconic images instead of acronyms. In addition to being more descriptive, they localize better. Here are some I've been showing in various talks: [http://people.mozilla.com/~faaborg/files/20061213-fundamentalTypes/fundamentalTypesStatic.jpg_large.jpg microformat icons]. These are still very preliminary. Mozilla will likely release all of the source artwork for our microformat icons under a creative commons license around the launch of Firefox 3. This will enable Web designers to integrate the icons into their sites, and other Web browsers can consider using a similar set of icons.

== Design Challenges ==
* Chris Messina: "What kind of solutions can we come up with that are single click only?"
* Alex Faaborg: Mozilla has had inquiries from reporters in the mainstream media (Wired and Business Week) who wanted to cover microformats in stories about the future of the Web browser, but they then later backed out because they felt the term "microformats" would only appeal to developers, and not the average reader. These types of mainstream stories need to focus on the user experience, and not the underlying technology, but what term should reporters use to describe the overall feature?
** I think we should stick with the term "microformats" until someone comes up with a better term that doens't "only appeal to developers". Note that we should avoid terms which are either overloaded, or dilute the concepts, or are just another form of made-up jargon. [[User:Tantek|Tantek]]

== Social Network Portability ==
See the separate [[social-network-portability]] page.

== Browser Integration ==
From visions to screenshot brainstorms to working plugins to shipping implementations, there is a lot going on with browser integration of microformats support.

=== Currently ===
* <del>The [[Flock]] browser ships with microformats support built-in.</del> - This has not been confirmed. -- Chris Messina.
* The [[Operator]] plug-in adds microformats detection and integration to [[Firefox]] version 1.5-2, [[Netscape Navigator]] versions 9 and [[Flock]] 1.0 <br /> [http://notizblog.org/2007/10/21/operator-unter-navigator-90/ http://notizblog.org/wp-content/uploads/2007/10/micro-netscape.png]
* A [[Safari|Safari microformats plugin]] has been implemented (requires OSX10.5 ) based on Jon Hicks's mockup: <br /> [http://microformats.org/wiki/safari http://farm3.static.flickr.com/2309/2036669631_6e99870645.jpg]
* An [[Internet Explorer]] add-on provided by Microsoft supports microformats. <br/> [http://www.visitmix.com/lab/oomph http://farm4.static.flickr.com/3237/3064127043_4829632e9c_o_d.gif]

=== Soon ===
* [[Firefox]] version 3.0 has support similar to Operator built-in. See the [[Firefox]] page for details.

=== Vision ===
<span style="float:left">[http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/ http://people.mozilla.com/~faaborg/files/20061213-fundamentalTypes/informationBroker.jpg]</span>Web Browser as Information Broker - part of a [http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/ blogpost by Alex Faaborg on Microformats - The Fundamental Types]<br style="clear:both" />

=== In General ===
Browser support for microformats consists of three things in general:
# Automatically detect the presence of microformats on a page
# Parse them into a set of microformats for that page (preferably maintaining their relative relationships perhaps within a tree structure).
# Do something useful with them

=== Do something useful ===
Do something useful could be any or all of:
* '''User interface'''. Indicate the presence of microformats, and provide the user with an additional user interface for common actions to take with those microformats
* '''API'''. Provide an API (DOM extensions on "document" object?) to access those microformats for browser extension developers.
* '''Cache'''. cache that set/tree of parsed microformats along with the URL/Title/date-accessed of the page in the browser navigation "History" or even page cache, and then use that set of objects for various auto-complete/auto-fill uses and other enhancements to existing browser features.

=== Indicate presence of microformats ===
Browsers can indicate the presence of microformats on a page in several ways.
* one or more icons
** either a generic microformats icon, or
** an icon for each type of microformat present
** in the toolbar, in the footerbar, or perhaps on the margins of the page
* a special cursor when hovering over
** See [http://wiki.mozilla.org/ContentHandling:User_Interface/Preferences_Microformats mozilla wiki: ContentHandling:User Interface/Preferences Microformats]

Discussion and mockups / <span id="Screen_Shots">screenshots</span> of indicating the presence of microformats:

* [http://blog.mozilla.com/faaborg/2007/02/04/microformats-part-4-the-user-interface-of-microformat-detection/ Conceptual Mockups of Microformat Detection in Firefox 3]
* [http://ben-ward.co.uk/journal/microformats-ui/ Ben Ward: Microformats in Web Browsers] <br /> [http://ben-ward.co.uk/journal/microformats-ui/ http://ben-ward.co.uk/res/posts/uf-web-browser/autodiscovery.png]
* [http://glazkov.com/blog/margin-marks/ Margin Marks UI Concept], [http://flickr.com/photos/dglazkov/sets/72157601860335196/ Margin Marks Comps on Flickr] <br /> [http://glazkov.com/blog/margin-marks/ http://farm2.static.flickr.com/1098/1323814472_819bdd6373_m.jpg]

=== Authoring Tools ===

Examples and ideas for tools to author microformats within CMS tools.

* [http://www.undergroundwebdesigns.com/tinyMCE-hcard-plugin.html tinyMCE hcard plugin]
* [http://www.undergroundwebdesigns.com/tinyMCE-hcalendar-plugin.html tinyMCE hcalendar plugin]
* [http://matthewlevine.com/projects/hcard-wizard hcard wizard]
* [http://visitmix.com/lab/oomph Windows Live Writer blog authoring plugin]

It would be nice to have a bookmarklet that you can just hit on a selected bit of text in a textarea or WYSIWYG editor to turn into an hcard with just FN, and not have to fill out a form. Whilst this doesn't give us rich information, it's really easy and doesn't create much extra work burden.

=== Additional user interface ===
Some examples of additional user interface for common actions to take with microformats found in pages, grouped by specific microformat. Note that most of these use cases should be applicable to all instances of the microformat on the page at once (e.g. export all contacts), or for a selection of instances (e.g. export selected contacts), or one just one specific instance (e.g. export contact XYZ).

* [[hcard|hCard]] - see [[hcard-user-interface#Additional_user_interface|Additional hCard user interfaces]]
* [[hcalendar|hCalendar]]:
** "Add to Calendar" (convert the hCalendar events to iCalendar vEvents (.ics) and pass them onto the OS to automatically open/incorporate into the user's preferred local calendaring application).
** add to gCalendar, Yahoo Calendar, Upcoming, Eventful (etc.)
** "Subscribe to Calendar" - construct and pass on a conversion URL (e.g. using X2V, or prefixing the URL to the current page (or to the specific event within using a fragment identifier) with webcal://h2vx.com/ics/ ) and pass it onto the OS to get the OS to pass the URL onto the user's preferred local calendaring application for that app to subscribe to.
** export as text/ [[csv|comma-separated-values]] (CSV) to allow editing, sorting and/ or import into spreadsheets/ databases, etc. (or concatenate to existing file).
*[[adr]]
** export a vCard, either prompting for a name, or using default place-holder text
** export as text/ CSV as above
** find on map of user's choosing
** find pictures, nearest hotel, nearest restaurant, etc., using site of user's choosing
** see also [[hcard-user-interface#Additional_user_interface|Additional hCard user interfaces]]
*[[geo|Geo]]
** find on map of user's choosing
** find pictures, nearest hotel, nearest restaurant, etc., using site of user's choosing
** export as [[KML]]/ [[GPX]] file; or concatenate to existing file
** export as text/ CSV as above
** send (in suitable format) via bluetooth to GPS device.
* [[hreview|hReview]]
**If the item is a book, look up on library site(s) of user's choosing
**If the item is a book, generate COinS or other standard citation mark-up
**If the item is a book, film/ DVD, CD, etc., look up on shopping site(s) of user's choosing
* [[hatom|hAtom]]
** let the user subscribe to the page as a series of hAtom hentrys
*** challenges to keep in mind:
**** what if user goes to permalink of a blog post and that has just one static hentry - does subscribe make sense? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
**** or if user goes to an archive page which just has a set of static hentry items - again, how does subscribe help? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
**** possible solution: using a combination of [[rel-home]] and [[rel-archive]] (one of several already widely deployed [[existing-rel-values]] in WordPress and other [[blogging-tools]]), it may be possible to identify the home page of a blog from a post permalink or archive page, or vice versa, and thus enable a smarter "subscribe to this blog" functionality.
* [[hresume|hResume]]
** ???

Discussion and mockups / screenshots of additional user interface for microformats (some screenshots are only available at the destination links, please click through).

* [http://blog.wilsonet.com/archives/2006/04/30/microformats-in-flock/ Microformats in Flock]
* NetNewsWire [http://flickr.com/photos/factoryjoe/454706107/in/photostream/ detects] and then [http://flickr.com/photos/factoryjoe/454705203/ converts hcard and hcalendar data] in feed entries:<br />[http://flickr.com/photos/factoryjoe/454705203/ http://farm1.static.flickr.com/183/454705203_33f9b8d7c6_o.png]
* [http://www.hicksdesign.co.uk/journal/a-proposal-for-a-safari-microformats-plugin Jon Hicks: Proposal for a Safari Microformats plugin]

== Implementations ==
See [[implementations]], and document examples of good UI from there, here.

=== Plugins ===
* [[Operator]] Firefox extension
* [https://addons.mozilla.org/firefox/2240/ Tails Export] (Firefox extension) by Robert de Bruin can display and export some microformats.

=== Greasemonkey user scripts ===
* http://greasemonkey.makedatamakesense.com/callto_tel/ by Scott Reynen
* Some [[Greasemonkey]] scripts use a separate iFrame for microformat content
* Other [[Greasemonkey]] scripts insert an icon inline into the page

=== Browser buttons ===
* [[Miffy]] inserts a green square into the document to represent the presence of microformat

=== CSS user stylesheets ===
* Jon Hicks has written [http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css a user stylesheet for Mac browsers] that highlights hCard and hCalendar data.

=== Planning and Discussion ===
*[http://wiki.mozilla.org/Microformats Discussion of microformat detection in Firefox 3]
*[http://wiki.mozilla.org/Microformats/UE/ideas UI brainstorming on the Mozilla Wiki]
* The [http://wiki.caminobrowser.org/Development:Planning:Microformats Camino Wiki has a page] where future microformats support is being discussed and organized

== Simpler Markup Languages ==
There are plenty of [[wiki-formats]] that attempt to make it easier for more people author semantic markup, often with textually decorative punctuation.

As these simpler markup languages are something that *users* are expected to type, they are user interface.

=== Markdown extension for hCalendar ===
See [http://article.gmane.org/gmane.text.markdown.general/2027 Markdown and the hCal microformat] which proposes an extension to the Markdown text markup language to capture and represent hCalendar event semantics in a human editable form.

== See Also ==
* [[browsers]]
* [[mobile]]
* [[hcard-user-interface]]
* [[data-portability]]
* [[social-network-portability]]

data-portability

2013-09-22T11:28:28Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<h1>Data Portability</h1>
{{TOC-right}}

== Summary ==
Data portability is about you, the user, being able to move and use <em>your</em> data across <em>space</em> and across <em>time</em>.

== Expansions ==
* '''your data''' - whether you created it or purchased it
* '''across space''' - different websites, different devices, different media, different applications, space-shifting in general
* '''across time''' - archiving at one point in time, retrieving at another point in time, time-shifting in general

== Relation to microformats ==
Data portability was, and remains, one of the incentives behind the development of [[microformats]], and now microformats have provided key building blocks for enabling or improving data portability across a variety contexts:
* contact information portability. [[hcard|hCard]] has lowered the barrier to sharing contact information on the Web compatibly with the industry standard vCard (RFC 2426) format.
* event portability. With [[hcalendar|hCalendar]], it is possible to upload an event from one calendar site to another and the portability of iCalendar (RFC 2445) data has also been enhanced for the Web.
* [[social-network-portability]]
* ...

== Previous work ==
Data portability has been an important topic for quite some time, our work today stands on the shoulders of that earlier work. Here are a few illustrative citations/examples:
* 2001 [http://digitalconsumer.org/ DigitalConsumer.org] founded [http://digitalconsumer.org/press-factsheet.html by Joe Kraus and Graham Spencer]. key achievements:
** [http://digitalconsumer.org/bill.html Digital Consumer Bill of Rights] - e.g. [http://digitalconsumer.org/overview.html the rights to "time-shift" media, "space-shift" media, make backup copies of your media].
** [http://digitalconsumer.org/testimony-20020425.html 2002-04-25 testified to Congress on "digital rights of consumers"]
* 2005 September Tantek Çelik's [[presentations#2005|2005 presentation]] on [http://tantek.com/presentations/2005/09/microformats-evolution/ "Microformats: Evolving The Web" at Web Essentials 05] began with and emphasized numerous specific user scenarios and points of why data portability matters to every digital citizen, including:
** email archival, retrieval, search, export/import to new applications
** photo archiving
** accessing old archives
** accessing different disk formats, with different hard disk peripheral interfaces (SCSI, Firewire, USB)
** reading old file formats
** transferring your data when upgrading (or just replacing) a personal computer
** historical fragility of online-only data stores (e.g. [http://en.wikipedia.org/wiki/Desktop.com Desktop.com], which terminated access without warning and thus effectively "lost" all their users' data).
** partial recoverability of files from hard disk crashes or other corruption
** "You control your own data" - users should own their own data
** Incentives for companies to support open formats: do the right thing, build user trust, easier importing/growth, network effects, outgrow the competition (or established proprietary players)
** ...
** after the event. The original podcast of this session had thought to be (ironically) lost (was published originally at: <nowiki>http://we05.com/podcast/mp3/we05-2-tantek-celik.mp3</nowiki> but we05.com went offline sometime in 2006). However, I was able to recover a copy of it that had been downloaded from some archives, and as the podcast [http://tantek.com/log/2005/10.html#d02t1813 was originally Creative Commons licensed], I have mirrored it on microformats.org ([http://microformats.org/media/2005/09/we05-14-tantek-celik2.mp3 download mp3]) and linked to it from the [[podcasts-2005|2005 podcasts archive]] page on the wiki. -Tantek

== see also ==
* [http://digitalconsumer.org/ DigitalConsumer.org] ([http://digitalconsumer.org/bill.html Bill of Rights])
* [http://opensocialweb.org/ A Bill of Rights for Users of the Social Web]
* [http://dataportability.org/ dataportability.org]
* [http://groups.google.com/group/dataportability-public/ Data portability discussion (Google) group]

events-template

2013-09-22T11:27:14Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>Template for events</entry-title>

You can cut & paste the following for [[events]] pages. Delete any unwanted sections, and remove comment mark-up from those you wish to use at latter stage.:

<pre><nowiki>

<entry-title>Microformats Event</entry-title>
__TOC__
One of several microformats [[events]].

<div class="event-page h-event vevent">
== details ==
;When
:<time class="dt-start dtstart">2013-mm-dd</time>–<time class="dt-end dtend">2013-mm-dd</time>
;Where
:<span class="p-location location h-card vcard"><span class="p-name fn p-org org">xxxVenueNamexxx</span>, <span class="adr"><span class="p-street-address street-address">xxxStreetAddressxxx</span>, <span class="p-locality locality">xxxCityxxx</span>, <span class="p-region region">xxxStatexxx</span>, <span class="p-country-name country-name">xxxCountryxxx</span></span></span>
;What
:<span class="p-name summary">xxEventSummaryxx</span>
;Presenter
:[xxxUrlxxx xxxNamexxx]
;Web
:<span class="u-url url">http://eventsiteURL.example.com</span>

'''[http://h2vx.com/ics/microformats.org/wiki/events/xxxPageURLxxx Add this event to your diary or calendar program]''' http://www.boogdesign.com/images/buttons/microformat_hcalendar.png

== description ==
<div class="p-description description">
This is a super-awesome microformats event about the amazing things you can do with microformats!
</div>

== tags ==
Use the following tags on related content (blog posts, photos, [http://twitter.com tweets]):


<kbd class="tags" style="display:block">
<span class="p-category category">'''EVENTSPECIFICTAG'''</span>
<span class="p-category category">microformats</span>
<span class="p-category category">san-francisco</span>
<span class="p-category category">''upcoming:event=00000000''</span> 
</kbd>

If you use Twitter, mention '''@microformats''' in tweets about the event, and track them on [http://search.twitter.com/search?q=microformats Twitter Search].

== attendees ==
Add yourself alphabetically sorted by family name if you plan on attending or attended.

* <span class="p-attendee attendee h-card">[[User:YourUserName|Your full name]]</span>
* ...

== photographs ==

* ...

== notes ==
Topics discussed, comments, and Q&A.

* …

== articles and blog posts ==
Articles and blog posts following up on the meetup. Add a link to your post in the list below. Newest first.

* ...

</div> 

== related pages==
{{events-related-pages}}

</nowiki></pre>

==Related pages==
{{events-related-pages}}

templates

2013-09-22T11:27:10Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

{{TOC-right}}
<h1>Templates</h1>

== copy paste templates ==
The following templates are intended to be sources for copying and pasting to start new pages of that type.
* [[cheatsheet-template]]
* [[events-template]]
* [[examples-template]]
* [[faq-template]]
* [[format-implementations-template]]

== inclusion templates ==
The following templates are intended to be directly included into pages via the <nowiki>{{template-name}}</nowiki> inclusion mechanism.

*Public Domain release (please add it to your User page per the [[:Category:public_domain_license|Public Domain Declarations page]]).
**[[template:public-domain-release|<nowiki>{{public-domain-release}}</nowiki>]]

*Welcome new users:
**[[template:welcome|<nowiki>{{welcome}}</nowiki>]]

*Cheat sheets:
**[[template:cheatsheets|<nowiki>{{cheatsheets}}</nowiki>]]

*Patent Statement:
**[[template:MicroFormatPatentStatement|<nowiki>{{MicroFormatPatentStatement}}</nowiki>]]

*Semantic XHTML design principles:
**[[template:semantic-xhtml-design-principles|<nowiki>{{semantic-xhtml-design-principles}}</nowiki>]]

*Issues format:
**[[template:issues-format|<nowiki>{{issues-format}}</nowiki>]]

*Deprecated Historical Page:
**[[template:deprecated-historical-page|<nowiki>{{deprecated-historical-page}}</nowiki>]]

===For related pages===
*Adr related pages:
**[[template:adr|<nowiki>{{adr}}</nowiki>]]

*Geo related pages:
**[[template:geo-related-pages|<nowiki>{{geo-related-pages}}</nowiki>]]

*hCard related pages:
**[[template:hcard-related-pages|<nowiki>{{hcard-related-pages}}</nowiki>]]

*hCalendar related pages:
**[[template:hcalendar-related-pages|<nowiki>{{hcalendar-related-pages}}</nowiki>]]

*hAtom related pages:
**[[template:hatom-related-pages|<nowiki>{{hatom-related-pages}}</nowiki>]]

*genealogy related pages:
**[[template:genealogy-related-pages|<nowiki>{{genealogy-related-pages}}</nowiki>]]

*history related pages:
**[[template:history-related-pages|<nowiki>{{history-related-pages}}</nowiki>]]

*XFN related pages:
**[[template:xfn-related-pages|<nowiki>{{xfn-related-pages}}</nowiki>]]

===Wiki buttons===
*New Marker
**[[template:NewMarker|<nowiki>{{NewMarker}}</nowiki>]]

*Success Marker
**[[template:SuccessMarker|<nowiki>{{SuccessMarker}}</nowiki>]]

*Update Marker
**[[template:UpdateMarker|<nowiki>{{UpdateMarker}}</nowiki>]]

===Languages===
*French navigation:
**[[template:navigation-fr|<nowiki>{{navigation-fr}}</nowiki>]]

=== deprecated ===
The following templates have been used in the past, or may even be in use on current pages, but they are deprecated meaning please do not add them to any other pages.

*Copyright Statement 2004:
**<nowiki>{{MicroFormatCopyrightStatement2004}}</nowiki>

year-in-review

2013-09-22T11:27:05Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

This is a page to document the events that happen throughout the year that pertain to microformats.

* [[2005-in-review]]
* [[2006-in-review]]
* [[2007-in-review]]

2005-in-review

2013-09-22T11:26:58Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

Lots happened in 2005, a breif over-view can be found here:

http://microformats.org/blog/2006/01/04/2005-year-in-review/

2006-in-review

2013-09-22T11:26:52Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

This is a draft of some text for a 2006 year in review for the microformats blog. Feel free to add more information, events, link etc. then it can be distilled down for the main page of the site

= 2006, Year in Review =

<em>Just when you thought you wouldn't have to read another "year in review" blog post…</em>

Last year I did a <a href="http://microformats.org/blog/2006/01/04/2005-year-in-review/">2005 year in review post</a>. I decided too look back and see how much of that came true, how far we've come, and make a few 2007 predictions.

In terms of community, I think Microformats has blossomed from the hand-full of folks who started it all, to a thriving community of people contributing to the mailing list, the wiki, writing blog posts, writing books and articles, and evangelizing microformats within their organizations and communities.

We've also seen Microformats creep into the mainstream. At Mix06 Bill Gates said <a>"We need more Microformats"</a>, we saw the possibilities of "<a>Live Clipboard</a>", an application to do a "smart copy and paste" from the web to desktop applications, "<a>Live Writer</a>", a new blogging writer that uses microformats for events, rumblings of <a>FireFox 3 natively supporting Microformats</a>, <a>IE 8 as well</a>. We've seen <a>Apple computers use hCard</a> in their web Mail and <a>Flickr introduce geo-tagging</a> of images and within weeks there were millions of instances of microformatted data available. We've even seen Microformats make it to the <a>homepage of the W3C</a>.

If 2005 was the year we hammered out formats, then 2006 was the year of adoption. As Microformats were presented at <a>BarCamps and conferences worldwide</a>, more and more people started to add <a>hCards</a>, <a>hCalendar</a> and <a>hReviews</a> to their blogs. With all the enthusiasm several sites have popped-up that are dedicated to microformats, <a>microformatique.com</a> and <a>whymicroformats.com</a> are just two. Among the many usefimplementations, the new 'operastor' toolbar for Firefox is noteworthy.

So what does 2007 hold? There is still lot of work going on both developing existing formats and working on new ones. In 2006 there were Microformat presentations at several big conferences. In 2007 there will be even more - in fact, if you look at Conference proposals, microformats has been broken out into it's own bullet point under web-technologies.

Ongoing proposals which may well come to fruition in 2007 include currency (for amounts of money), species (for the names of living things), and an extension to geo (to allow for the marking-u[ of coordinates on the Moon, Mars and such bodies) [+ others?].

My predictions for 2007 include more Microformats related books, articles and presentations. Microformats integration with other technologies, such as <a>GRDDL</a> and <a>SPARQL</a> to help bridge the gap to <a>Tim Berners Lee's vision of the Semantic Web</a>. <a>Dan Cederholm</a> said Microformats are "Oblivious Development"(???). Which means that for little extra effort you can add Microformats to your site and without even knowing it, you are allowing other people to develop highly advanced applications using the data. 2007 will see more mash-ups that couldn't have been done previously without Microformatted data. With the <a>W3C starting to incrementally advance HTML</a> there are opportunities to bake some of the semantics of Microformats right into the next version of HTML. The WHATWG, which is working on their version of <a>HTML5</a>, has added two new elements <calendar> and <contact> which are analogous to hCalendar and hCard. I would bet some of the Microformats principles and formats will be seen in the next versions of HTML.

Work that needs to be done in 2007 includes more advocacy, evidence gathering for xxx, cheatsheet creation and refinement, wiki development and translation, plus xxxx. Why not get involved?

As for everyone involved in the community, you should look back on 2006 with pride. We've done a lot of work and it wouldn't have been possible without your support.

==Comment==
* Would this be better in the second-person-plural ("Last year we did...", "Our predictions...")? [[User:AndyMabbett|Andy Mabbett]]

2007-in-review

2013-09-22T11:26:47Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

As big events occur in 2007 we should document them here, so that at the end of the year the list can be distilled down to a blog post to summarise the year.

* ...

delete

2013-09-22T11:26:42Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

Pages awaiting deletion [http://microformats.org/wiki?title=Special:Whatlinkshere&target=delete link here].

examples-in-the-wild

2013-09-22T11:26:37Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

= Examples in the Wild =

This page lists all the specific examples in the wild pages or sections for each microformat. They give an overview of how broadly microformats have been adopted across various sites, large and small.

* [[geo-examples-in-wild|Geo examples in the wild]]
* [[hcalendar-examples-in-wild|hCalendar examples in the wild]]
* [[hcard-examples-in-wild|hCard examples in the wild]]
** [[hcard-supporting-user-profiles|hCard user profile examples in the wild]]
* [[hresume-examples-in-wild|hResume examples in the wild]]
* [[hreview-examples-in-wild|hReview examples in the wild]]
* [[include-pattern-examples-in-wild|Include-Pattern examples in the wild]] (various types of microformat, using the [[include-pattern]])
* [[profile-uri-examples-in-wild|Profile URI examples in the wild]]
* [[xfn-examples-in-the-wild|XFN examples in the wild]]
* ... please add more links to "Examples in the Wild" pages and sections of specs.

==See also==
*[[advocacy]]
*[[implementations]]

implementations

2013-09-22T11:26:30Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>Microformats Implementations</entry-title>
{{TOC-right}}
This page lists the applications, plugins, sample code, services, tools that produce or consume microformats.

== help improve this page ==
This is only a partial list. If you know other services or tools for or supporting microformats, please add them to this page, link to their [[implementors]], and list what specific microformats they support.

When you find an implementation:
# Make sure that it is an implementation, rather an publishing example (e.g. [[hcard-examples-in-wild|hCard examples in the wild]], [[hcalendar-examples-in-wild|hCalendar examples]], et.c).
# Note the name of the ''tool or service'' and the name of the ''developer(s)'' who built it.
# Add a third level heading with the name of the tool/service to the Applications / Plugins / Services / Tools section below, sorted alphabetically by name of tool/service. e.g. <p><kbd><nowiki>=== Name of Tool ===</nowiki></kbd></p>
# Add a top level list item just below the heading with an external link to the tool/service, along with a link to evidence of their support for microformats, and mention (and locally link) each microformat that is supported. E.g. <p><kbd>* Link to tool/service, link to their blog post announcing support for e.g. <nowiki>[[hCard]] and [[hReview]]</nowiki></kbd></p>
# Add a nested list item and local to wiki hyperlink the Name of Developer to a fragment identifier in the [[implementors]] page, e.g. Apple Computer would be linked like this: <p><kbd><nowiki>** by [[implementors#Apple_Computer|Apple Computer]]</nowiki></kbd></p>
# Check to see if there is an entry for the developer in the [[implementors|list of implementors]], if not add them there. Add a link to the developer's home page followed by "has implemented microformats in:".
# In the entry for the developer, add a list item and local to wiki hyperlink the Name of Tool to a fragment identifier in this page, e.g. X2V would be linked like this: <p><kbd><nowiki>* [[implementations#X2V|X2V]]</nowiki></kbd></p>
# Save the page and make sure that each fragment ID local hyperlink when clicked scrolls you to the right spot (for the developer, and for the tool). Make any fix-up edits as necessary. That's it!

=== Implementation Details ===
If there are implementation details worth noting, add them them as nested list items under the item for the implementation itself. If the details subsection grows too big for a specific implementation, feel free to move the details to their own page and leave a link in place on the implementations page.

== Reporting Bugs ==
Similar to implementation details, in short, [[put-it-on-the-wiki]]. In particular, add bug reports, with URL(s) to a valid demonstrative test case(s) of course, to the listing of an implementation on this page, OR on the specific implementations wiki page (e.g. [[hcard-implementations]]). Please describe why you think it is a bug (user interface, cosmetic, violates a spec page, e.g. for problems parsing hCards, reference which part of [[hcard-parsing]] the implementation appears to not be following).

If you have a sense of urgency for getting that particular bug fixed in that implementation, you may email [http://microformats.org/discuss/ microformats-dev] with the URL of that implementation on the wiki page, and *summarize* the bug (the full description being on the wiki page instead).

== Formats ==
Most microformat specifications have an "implementations" section, e.g.:
*[[rel-tag#Implementations|rel-tag implementations]]
*[[vote-links#Implementations|vote-link implementations]]
*[[xoxo#Implementations|XOXO implementations]]

In addition, some microformat specifications have separate implementation pages:
*[[hcalendar-implementations|hCalendar implementations]]
*[[hcard-implementations|hCard Implementations]]
*[[xfn-implementations|XFN implementations]]

== Applications / Plugins / Services / Tools ==
This is an alphabetical listing of all applications, plugins (grouped with their app/tool), services and tools that implement microformats, along with the list of microformats that are supported, and the company and/or developers responsible for it.

As a user, the implementations listed below will automatically help you use microformats and help your data portability and interoperability with other apps and services.

Please help complete this list! If you know of additional apps/plugins/services/tools that support microformats, please add them!

Note: this section is only for listing specific ''implementations''. The list of ''implementors'' is in the [[implementors#Companies / Developers / Organizations|Companies / Developers / Organizations]] section on the [[implementors]] page.

Alphabetically:

=== .Mac Webmail ===
* The [http://www.mac.com/webmail .Mac Webmail] ''service'' now [http://factoryjoe.com/blog/2006/10/28/apple-embraces-microformats-in-new-mac-webmail/ supports hcard].
** by [[implementors#Apple_Computer|Apple Computer]]

=== AlchemyPoint ===
* [http://www.orch8.net/ AlchemyPoint] is a structured web / mashup platform that supports parsing hCard, rel-tag and other microformats.
** by [[implementors#Orchestr8|Orchestr8]]

=== Backnetwork ===
* [http://backnetwork.com/ Backnetwork] is a community networking tool for events that supports [[hCard]], [[hCalendar]], and [[XFN]].
** by [[implementors#Glenn_Jones|Glenn Jones]] of [[implementors#Madgex|Madgex]].

=== Blinksale ===
* [http://blinksale.com Blinksale] uses [[hcard|hCard]] standard throughout for people and companies.

=== BlogMatrix ===
* [http://www.blogmatrix.com BlogMatrix] - user information marked as [[hcard|hCard]], tag directories in [[xfolk]]/[[rel-tag]], enclosures are marked as [[rel-enclosure]].
** by [[implementors#David_Janes|David Janes]]

=== Blogmarks.net ===
* [http://www.blogmarks.net Blogmarks.net] publish user bookmarks in [[xfolk]]/[[rel-tag]].

=== Bugzilla ===

* [http://www.bugzilla.org/ Bugzilla] [http://www.bugzilla.org/status/2007-08-23.html 3.1.1] includes some microformats on show_bug.cgi and a few other places.

=== cmSiteNavigation ===
* [http://www.christophm.de/software/firefox/cmSiteNavigation/ cmSiteNavigation] extension for Firefox make use of links marked with a [[existing-rel-values|"rel" value]], and parses additional link types also.
** This seems to use rel values defined in the HTML 4 spec, not microformats. This is more of a [[posh|POSH]] implementation than a [[microformats]] implementation.

=== Community Server ===
* [http://communityserver.org Community Server] supports tagging posts with [[rel-tag]], implements [[rel-nofollow]] on links in comments, and allows users to create link lists using [http://gmpg.org/xfn/ XFN].

=== Conferenceer ===
* Built for SXSW 2007, [http://sxsw07.conferenceer.com/ Conferenceer] supports hcalendar and hcard.

=== Citycita===
* [http://www.citycita.org Citycita] supports [[hCal|hCal]] in all event pages for local social groups.
** by [[implementors#Rubio_Jamin|Rubio Jamin]]

=== Cork'd ===
* [http://corkd.com Cork'd] supports [[hcard|hCard]] for user profiles, [[hreview|hReview]] for wine reviews, along with [[rel-tag]] for tagging wines as announced in [http://www.simplebits.com/notebook/2006/06/10/wineformats.html Pairing Wine and Microformats]
** by [[implementors#Dan_Cederhold|Dan Cederholm]]

=== Delicious Generation ===
* [http://deliciousgeneration.com/ Delicious Generation] supports [[hCal|hCal]] for the event and [[hcard|hCard]] for sponsors and people.
** by [[implementors#Chris_Messina|Chris Messina]]

=== Digg ===
* [http://digg.com/ Digg] supports [[hcard|hCards]] for profiles and rel-me for identity consolidation (though they currently mix rel-nofollow with rel-me, negating these links).

=== Dreamweaver ===
==== Microformats Extensions ====
* [http://www.webstandards.org/action/dwtf/microformats Dreamweaver Microformats Extensions] ([http://allinthehead.com/beta/microformats.mxp.zip download]) support authoring [[hcard|hCard]], [[hcalendar|hCalendar]], [http://gmpg.org/xfn XFN], [[rel-tag]], [[rel-license]] as [http://allinthehead.com/retro/282/microformats-in-dreamweaver announced by Drew]
** by [[implementors#Drew_Mclellan|Drew McLellan]]

=== Drupal ===
==== Upcoming module for Drupal ====
* [http://hybernaut.com/upcoming-module Drupal Upcoming.org syndication module] emits [[hcalendar|hCalendar]]
** by [[implementors#Brian_Del_Vecchio|Brian Del Vecchio]]

=== Eventful ===
* [http://eventful.com Eventful] supports [[hcalendar|hCalendar]] for over 1,000,000 event listings and [[hcard|hCard]] for venues.

=== Facebook ===
* [http://facebook.com/ Facebook] supports [[hcard|hCard]] for some public profiles '''(example needed)'''.
* There is also an [http://www.facebook.com/apps/application.php?id=2400943827&ref=s hCard application] (a plug-in) for Facebook users.
* Note also the [http://www.facebook.com/group.php?gid=2374732285 microformats group], which Facebook users who support microformats can join.

=== Ficlets ===
* [http://ficlets.com Ficlets] supports [[hcard]] for author data and [[hatom]] for stories and lists of stories.
** [http://sixtwothree.org Jason Garber] and [http://lawver.net Kevin Lawver] for [http://aol.com AOL]

=== Firefox ===
* See [[firefox-extensions|Firefox Extensions]]

=== Flickr People ===
* [http://flickr.com/ Flickr]'s profiles on its people pages supports both [[hcard|hCard]] and [http://gmpg.org/xfn XFN].
** by [[implementors#Cal_Henderson|Cal Henderson]]
**[http://flickr.com/people/tantek example]

=== Flickr Photos ===
* [http://flickr.com/map/ Flickr's geo tagged photos] are marked up with the [[geo]] microformat. Unfortunately, as of August 2010, their new page design does not expose the microformat in a machine readable manner.

=== Flock Web Browser ===
* The [http://flock.com Flock web browser] supports the [[rel-tag]] microformat.
** by [[implementors#Flock|Flock]]

=== Google Chrome ===
* See [[chrome-extensions|Chrome Extensions]]

=== Google Search ===
* Consumes microformats via rich snippets: [[search engines | wiki page]], [http://www.google.com/support/webmasters/bin/answer.py?answer=99170 rich snippets docs]
* supports [[rel-nofollow]]
** by [[implementors#Google|Google]]

=== Google Blogger ===
* [http://blogger.com/ Blogger] supports [[hatom|hAtom]] (citation to blog post needed - 2007)
** by [[implementors#Google|Google]]

=== Google Creative Commons Search ===
* [http://www.google.com/webhp?as_rights=(cc_publicdomain%7Ccc_attribute%7Ccc_sharealike%7Ccc_noncommercial%7Ccc_nonderived) Google Creative Commons Search] - supports [[rel-license]]
** by [[implementors#Google|Google]]

=== Google Maps ===
* [http://maps.google.com/ Google Maps] supports [[hcard|hCard]] (see [http://googlemapsapi.blogspot.com/2007/06/microformats-in-google-maps.html 2007-06-31 announcement by Google])
* Google maps also allows reviewers and map creators to [http://maps.google.com/maps/me attach a public profile], which includes hCard and rel="me' XFN markup. See [http://google-latlong.blogspot.com/2007/10/put-yourself-on-map.html 2007-10-17 announcement]. Sample profile: [http://maps.google.com/maps/user?uid=109581870574956225297 Kevin Marks].
** by [[implementors#Google|Google]]
**Unfortunately, [http://microformats.org/discuss/mail/microformats-discuss/2007-July/010311.html Google Map's implementation is broken]. [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010457.html Google are aware; a fix is awaited].
** Also, there is no hCard nor any XFN rel values on the [http://maps.google.com/maps/user?uid=109581870574956225297 sample profile] itself, it appears to include a [http://maps.google.com/maps/c/widgets/ProfileViewer?js=RAW&maximize=true&hide=false&width=40&noTitle=true&theme=theme_2&service=local&uid=109581870574956225297&height=0&background=transparent&serverbased=true&border=NONE&eventCallback=ParentStub1192999211538&zx=dc574o15j0wrv frame] which then has an hCard and rel="me" to the user's blog.

=== Gravatar Commenters as hCards ===
* [http://thedredge.org Andy Hume] added code to his blogging software to automatically mark-up the names and URLs of commenters on his blog with [[hcard|hCard]].
** by [[implementors#Andy_Hume|Andy Hume]]
** Andy - any chance of open sourcing your code to turn Gravatars into hCards?

=== Greasemonkey ===
* [http://greasemonkey.makedatamakesense.com/google_hcalendar/ Google hCalendar] - Adds hCalendar data to Google Calendar and/or [http://www.hostedexchange2010.de/ Hosted Exchange]
* [http://www.nickpeters.net/?p=35 Social xFolk] - Adds xFolk links to social bookmarking sites del.icio.us and ma.gnolia.
* [http://monkeyformats.org/ Monkeyformats] - a collection of GreaseMonkey scripts that add actual hCard and hCalendar microformat markup to several international phone directories.

=== hCalendar creator ===
* [http://microformats.org/code/hcalendar/creator hCalendar creator] (originally [http://theryanking.com/microformats/hcalendar-creator.html published by Ryan King]) is a javascript form for creating [[hcalendar|hCalendar]] events.
** by [[implementors#Ryan_King|Ryan King]]

=== hCard to Gmail Service ===
* [http://jkg3.com/Journal/81/bookmarklet hCard to gmail] is a bookmarklet / service which will convert hCard formatted data to the .CSV file for importing to gmail.
** by [[implementors#Jamie_Knight|Jamie Knight]]

=== hCard creator ===
* The open source [http://microformats.org/code/hcard/creator hCard creator] (originally [http://tantek.com/microformats/hcard-creator.html published by Tantek]) is a very simple, yet illustrative, open source user interface / form / script which creates an [[hcard|hCard]] in real-time as you type in a set of contact information.
** by [[implementors#Tantek_Çelik|Tantek Çelik]]

=== Helios Calendar ===
* [http://www.helioscalendar.com/ Helios Calendar] is a commercial PHP script for event publishing that [http://www.helioscalendar.com/index.php?com=features&d=1 supports hCalendar and hCard].
** by [[implementors#Refresh Web Development|Refresh Web Development]]

=== hKit Microformats Toolkit for PHP5 ===
* [http://hkit.googlecode.com/ hKit Microformats Toolkit for PHP5] as [http://allinthehead.com/retro/291/hkit-microformats-toolkit-for-php announced by Drew McLellan]. See also [[hkit|hKit on this wiki]].

=== hReview creator ===
* [http://microformats.org/code/hcalendar/creator hReview creator] (originally [http://theryanking.com/microformats/hreview-creator.html published by Ryan King]) is a javascript form for creating [[hreview|hReviews]].
** by [[implementors#Ryan_King|Ryan King]]

=== iChat buddy list to hCards ===
* [http://tantek.com/microformats/buddylist2hcards.html iChat buddy list to hCards] - open source AppleScript to automatically convert one's buddy list in the MacOSX iChat AIM client into a valid XHTML 1.0 Strict list of hCards.
** by [[implementors#Tantek_Çelik|Tantek Çelik]]

=== Internet Explorer ===
* See [[internet-explorer-extensions]]

=== JobiJoba ===
* [http://www.jobijoba.com JobiJoba : moteur de recherche emploi] parses and supports [[hCard|hCard]] and [[rel-tag|rel-tag]] for over 40,000 job listings.

=== JSCalendar ===
* [http://web.mit.edu/glasser/www/JSCalendar/ JSCalendar] parses [[hcalendar|hCalendar]] and produces a displayable HTML table/CSS-based calendar.

=== Konqueror ===
* [http://www.konqueror.org/ Konqueror] - [http://flickr.com/photos/factoryjoe/68755089/ supports] [[hcard|hCard]]

=== Last.fm ===
* [http://last.fm Last.fm] - [http://factoryjoe.com/blog/2006/10/31/lastfm-adds-support-for-hcalendar/ Last.fm supports] [[hcalendar|hCalendar]]

=== LinkedIn ===
* [http://www.linkedin.com LinkedIn] - LinkedIn includes [[hcard|hCard]] and [[xfn|XFN]] on contacts, [[hresume|hResume]] for public profiles and [[hreview|hReview]] on service provider recommendations

=== Live Clipboard ===
* [http://spaces.live.com/editorial/rayozzie/demo/liveclip/liveclipsample/techPreview.html Live Clipboard Technical Introduction]
* [http://spaces.live.com/editorial/rayozzie/demo/liveclip/liveclipsample/clipboardexample.html Live Clipboard Example]

=== LiveJournal ===
* [http://www.livejournal.com LiveJournal]
** supports tagging posts with [[rel-tag]]
** supports [[hcard-supporting-user-profiles|hCard user profiles]] and [[XFN]] ([http://community.livejournal.com/lj_releases/24768.html 2007-09-27 release #15]).
** by [[implementors#Six Apart|Six Apart]] (at the time of implementation)

=== LJFind ===
* [http://www.ljfind.com LJ-Find] - LJFind supports tagging posts with [[rel-tag]].

=== LouderVoice ===
* [http://www.loudervoice.com Publishes and aggregates hreview content] - The LouderVoice site provides a variety of tools to publish hreview to blogs and it also aggregates hreview content from any registered RSS Feed so that users can search/rate/collect distributed reviews.

=== Ma.gnolia ===
* [http://ma.gnolia.com Ma.gnolia] has wide [http://wiki.ma.gnolia.com/Ma.gnolia_Feeds_Guide#Microformats support for a variety of microformats] including [[rel-tag]], [[xfolk]], [[hreview]], [[xfn]] and [[hcard]].

=== Mash Maker ===
* [http://mashmaker.intel.com/ Intel Mash Maker] supports microformats as of 2007-11-15 (see [http://softwareblogs.intel.com/2007/11/15/bookmarks-microformats-and-bug-fixes/ announcing blog post])
** by [[implementors#Intel|Intel]]

=== Maxthon ===
[http://maxthon.com Maxthon] is a browser for Microsoft Windows that uses the Trident rendering engine and provides additional user interface. Maxthon has built and published a plugin for their browser that recognizes microformats in web pages and allows users to take action with them, similar to Operator for [[Firefox]].
* [http://forum.maxthon.com/index.php?showtopic=65408 Microformats Button Version 1.0.0 Release Candidate 1]
** Description: "Microformats Button extracts Microformats from websites and allows you to export the data to vCard, vCalendar, Google Maps, Yahoo Maps and other sites."

=== Microformat Base ===
* [http://randomchaos.com/microformats/base/ Microformat Base]
** by [[implementors#Scott Reynen|Scott Reynen]]

=== Microformat Bookmarklet Overlay ===
* [http://leftlogic.com/info/articles/microformats_bookmarklet Microformats Bookmarklet] for Safari, Firefox and Camino, supports [[hcard|hCard]] and [[hcalendar|hCalendar]] and allows the user to import individual microformats on the fly.
** by [[implementors#Remy_Sharp|Remy Sharp]]

=== Microformat Parser for Ruby ===
* [http://blog.labnotes.org/2005/11/20/microformat-parser-for-ruby/ Microformat Parser for Ruby]
** by [[implementors#Assaf Arkin|Assaf Arkin]]

=== Movable Type ===
* [http://movabletype.org Movable Type] (MT) open source blogging software supports:
** [[XFN]] [[rel-me]] "other profiles" UI, and [[hAtom]] activity streams (as of MT v4.1 - see [http://www.sixapart.com/about/news/2008/01/time_for_action.html announcement] and [http://www.movabletype.org/2008/01/building_action_streams.html technical details].)
** by [[implementors#Six Apart|Six Apart]]
See also [[movable-type]].

=== MyMap.yam.com ===
* support [[geo]] microformat in the POI page. example: [http://mymap.yam.com/place/point/charleschuang/6695/ a book store in Tamsui].

=== National eXtension Initiative ===
* [http://www.extension.org/ eXtension Home] - content marked-up with [[hatom|hAtom]] and events marked-up as [[hcalendar|hCalendar]] entries.
** by [[implementors#James E. Robinson, III|James E. Robinson, III]]

=== Nature Network Boston ===
* [http://network.nature.com/boston/ Nature Network Boston], a social networking community for scientists, supports [[reltag|rel-tag]], [[hcard|hCard]] for user profiles and [[hcalendar|hCalendar]] for marking up events across the site.
** by [[implementors#Nature Publishing Group|Nature Publishing Group]]

=== Nature Protocols ===
* [http://www.nature.com/nprot/ Nature Protocols], a forum for scientists to upload and comment on protocols, supports [[hcard|hCard]] and [[XOXO]].
** by [[implementors#Nature Publishing Group|Nature Publishing Group]]

=== NetNewsWire ===
*[http://www.newsgator.com/Individuals/NetNewsWire/ NetNewsWire] is an easy-to-use RSS and Atom reader for your Mac. NetNewsWire 3.0 detects, extracts and converts hcard and hcalendar data from feed entries.
** by [[implementors#NewsGator|NewsGator]]

=== Netscape Navigator ===
* Version 9.0+ supports [[Firefox extensions]], e.g. [[Operator]]:
** [http://notizblog.org/2007/10/21/operator-unter-navigator-90/ Operator unter Navigator 9.0]

=== Nutch ===
* [http://www.mail-archive.com/nutch-dev@lucene.apache.org/msg01295.html rel-nofollow support added]
* [http://www.mail-archive.com/nutch-commits@lucene.apache.org/msg01014.html rel-tag support checked in]

=== ODEO ===
* [http://odeo.com/ ODEO] [http://odeo.com/blog/2005/07/adding-microformats-to-odeo.html noted] that they support microformats: [[rel-tag]], [[rel-enclosure]], [http://gmpg.org/xfn XFN].

=== Open-Xchange ===
* The [http://www.open-xchange.com Open-Xchange] collaboration appliance supports publishing and subscribing of contacts in hCard format (in addition to exporting vcard) officially since v6.16. The format is extended by additional fields (like "date of marriage") in the OXMF microformat.

=== Optimus ===
*[http://microformatique.com/optimus/ Optimus]. Output formats: XML, JSON, JSON-P.

=== phpMicroformats ===
* [http://enarion.net/phpmicroformats/ phpMicroformats] is a PHP class library that generates microformat entries for [[hcalendar|hCalendar]] and [[hcard|hCard]]. It is released under GPL.

=== Portable Social Network Profile Parser ===
* [http://lab.backnetwork.com/ufXtract-psn/ Portable Social Network Profile Parser] implements parsing of [[hCard]], [[XFN]], and in particular [[rel-me]] for [[identity-consolidation]] for [[social-network-portability]].
** by [[implementors#Glenn_Jones|Glenn Jones]] of [[implementors#Madgex|Madgex]].

=== PostNuke ===
''[http://www.postnuke.com PostNuke] is an Application Framework/Content Management Systeme''
* [http://www.pagesetter.net/index.php?module=pagesetter&func=viewpub&tid=4&pid=96 hCards4Pagesetter] - hCards Publication Type for the PostNuke module "Pagesetter"
* [http://www.pagesetter.net/index.php?module=pagesetter&func=viewpub&tid=4&pid=97 hCalendar4Pagesetter] - hCalendar Publication Type for the PostNuke module "Pagesetter"
* [http://www.pagesetter.net/index.php?module=pagesetter&func=viewpub&tid=4&pid=98 hReview4Pagesetter] - hReview Publication Type for the PostNuke module "Pagesetter"
* [http://noc.postnuke.com/frs/?group_id=256&release_id=477 Blogroll] - XFN Block/Modul
* [http://noc.postnuke.com/frs/?group_id=256&release_id=628 nofollow] - nofollow Hook

=== Pownce ===
*[http://pownce/ Optimus]. Output formats: XML, JSON, JSON-P.

=== Profiler ===
* [http://microformat.makedatamakesense.com/profiler/ Profiler] works as a proxy service adding microformat profiles to documents that appear to contain microformats.

=== Realcom HAKONE for Notes ===
* [http://www.realcom.co.jp/en/hakone2.html HAKONE for Notes] - supports [[hCard|hCard]]
** by [[implementors#Realcom|Realcom]]

=== Realcom KnowledgeMarket ===
* [http://www.realcom.co.jp/en/enterprisesuite2.html KnowledgeMarket] - supports [[hCard|hCard]]
** by [[implementors#Realcom|Realcom]]

=== RFC2629.xslt ===
* [http://greenbytes.de/tech/webdav/rfc2629.xslt rfc2629.xslt] now attempts to generate [[hcard|hCard]] information ([http://ietf.org/rfc/rfc2629 RFC2629] in an XML format for authoring RFCs and Internet Drafts, see [http://greenbytes.de/tech/webdav/rfc2629xslt/rfc2629xslt.html example document])

=== Salesforce ===
* [http://salesforce.com Salesforce] [http://flickr.com/photos/kingsleyj/175689109/ supports] [[hcard|hCard]]
** by [http://flickr.com/people/kingsleyj/ Kingsley Joseph]
==== Spanning Salesforce ====
* [http://spanningsalesforce.com/ Spanning Salesforce] supports [[hcalendar|hCalendar]].

=== Sivitools ===
<blockquote>
Sivitols is a Java library for microformats. Currently only the xFolk RC1 standard is implemented, but additional microformat support is planned. This library is being written and maintained for a tag sharing project undertaken by Video Vertigo.
</blockquote>
[http://blog.blip.tv/blog/microformats/ Annoucement], [http://pokkari.com/microformat/javadoc/ Docs]

=== Safari Microformats plugin ===
<blockquote>
The Safari Microformats plugin notifies you when the author of the website has published Microformats and allows you to easily import hCards and hCalendars in Address Book and iCal. This plugin was inspired by the idea and mockup of Jon Hicks.
</blockquote>
[http://www.zappatic.net/safarimicroformats/ Safari Microformats Plugin]
* Note - the latest version, 3.1, currently only works w/Mac OS 10.5 (Leopard)

=== SPRACI ===
* [http://www.spraci.com SPRACI] - nightlife/events - [[hcalendar|hCalendar]] published in events listings, aggregator can read hCalendar

=== stuckUnstuck ===
* [http://stuckunstuck.com stuckUnstuck] supports [[hcard|hCard]] and [[hatom|hatom]].

=== StatusNet ===
* [http://status.net/ StatusNet] is an open source software for decentralized status updates, that supports: [[hatom|hAtom]], [[hcard|hCard]] (including [[representative-hcard]]s), [[adr]], [[geo]], [[xfn|XFN]], [[xoxo|XOXO]], [[rel-tag]], [[rel-license]], [[rel-prev]], [[rel-next]], [[rel-bookmark]], [[rel-enclosure]] [[rel-home]], [[rel-me]], [[rel-group]], [[rel-member]]
** by [[implementors#Sarven_Capadisli|Sarven Capadisli]]

<div id="cognition">
=== Swignition ===
* [http://buzzword.org.uk/swignition/ Swignition] is a Perl framework and script (usable online via CGI, and downloadable for local use) that supports:
** [[hatom|hAtom]]
** [[haudio|hAudio]]
** [[User:TobyInk/hcalendar-1.1|hCalendar]]
** [[hcard|hCard]], [[adr]], [[geo]], [[jCard]], [[xfn|XFN]] (1.0 and 1.1) and [http://xen.adactio.com XEN]
** [[hresume|hResume]]
** [[hreview|hReview]]
** [[rel-tag]], [[rel-enclosure]] and [[rel-license]]
** [[figure]]
** [[measure]]
** [[species]]
** [[xfolk|xFolk]]
** [[xoxo|XOXO]]
** several non-microformat semantic HTML techniques, including GRDDL, RDFa, eRDF and COinS.
** by [[implementors#Toby_Inkster|Toby Inkster]]
** no longer actively developed, see [[parsers#HTML::Microformats|HTML::Microformats]] for its replacement.
</div>

=== Technorati Search ===
* [http://technorati.com/ Technorati] [http://technorati.com/search Search] supports and handles both [[vote-links]] and [[rel-nofollow]] for indicating whether a link should have any/positive/negative weighting towards the destination.
** by [http://technorati.com/about/staff.html Technorati Staff]

=== Technorati Tags ===
* [http://technorati.com/tags/ Technorati Tags] pages aggregate blog posts tagged with the [[rel-tag]] open tagging standard, in addition to recent tagged photos and links.

=== Textpattern ===
==== Microformats Plugin ====
* [http://placenamehere.com/TXP/pnh_mf/ Textpattern Microformats Plugin] supports authoring [[hcard|hCard]], [[hcalendar|hCalendar]], [[hreview|hReview]], [http://gmpg.org/xfn XFN], [[rel-tag]], [[rel-license]] in the [http://www.textpattern.com/ Textpattern] CMS/blogging tool
** by [http://placenamehere.com/ Chris Casciano]

=== Tomota ===
* The [http://www.tomota.de Tomota] allows import, export and conversion from and to hcards.
** by [[implementors#RalfEngels|Ralf Engels]]

=== Transformr ===
* [http://github.com/WebOrganics/TransFormr Transformr] Is a microformats transformation toolkit. Transformr is also available as a [http://microform.at/ webservice]
** by [[implementors#Martin_McEvoy|Martin McEvoy]]

=== TYPO3 ===
* [http://www.typo3.com TYPO3]
==== Getting Started ====
* [http://typo3.org TYPO3 Developer Ressource]
* [http://www.acqal.com/a/article/getting-help-with-typo3-98.html Getting Help With TYPO3]
==== tt_address extension====
* [http://typo3.org/extensions/repository/view/tt_address/2.0.1/ tt_address] - hCard support with the tt_address extension version 2.0.0
** by [[implementors#Ingo_Renner|Ingo Renner]]
==== TIMTAB extension====
* [http://typo3.org/extensions/repository/view/timtab/0.5.11/ TIMTAB] - XFN support for blogrolls with the TIMTAB weblog extension for TYPO3
** by [[implementors#Ingo_Renner|Ingo Renner]]

=== Tweeterboard ===
* Tweeterboard supports [hcard|hCard]], and [http://gmpg.org/xfn XFN] on profile pages ([http://tweeterboard.com/user/missrogue example]).

=== ufXtract ===
* [http://lab.backnetwork.com/ufXtract/ ufXtract] implements [[parsing]] of microformats such as [[hCard]] and [[XFN]].
** by [[implementors#Glenn_Jones|Glenn Jones]] of [[implementors#Madgex|Madgex]]. See [http://www.glennjones.net/Post/831/ufXtractmicroformatsparser.htm blog post announcement].

=== Upcoming.org ===
* [http://upcoming.org Upcoming.org] - hCalendar support in events listings and individual events.
** by [[implementors#Andy_Baio|Andy Baio]], [[implementors#Leonard_Lin|Leonard Lin]], [[implementors#Gordon_Luk|Gordon Luk]]

=== vCardExplorer ===
* [http://vcardexplorer.corefault.de/ vCardExplorer for MacOSX] - browses local vcards and converts hcards from URLs.

=== VIREL Microformats Search Engine===
* [http://www.virel.de/ microformats search engine] - website friendly crawler. searches for public informations embedded as microformats in web pages.

=== WindowsLiveWriter ===
* [[implementors#Microsoft|Microsoft's]] WindowsLiveWriter (WLW) [http://gallery.live.com/liveItemDetail.aspx?li=9751e563-1408-4fc3-8028-bd4351edb1fb&l=8 event plugin] supports [[hcalendar|hCalendar]].

=== WordPress ===
*See [[wordpress|WordPress]].

=== X2V ===
* Brian Suda has created several XSLT files to extract microformats from HTML. From that the [http://suda.co.uk/projects/X2V/ X2V] webservice/favelet emerged. The XSLT and favelet extracts [[hcard|hCard]] and to produces .vcf (vCard) files and [[hcalendar|hCalendar]] to produce .ics (iCal) files. Also in the labs is a universal XMDP validator and a site-wide search spider that recognizes 'no-follow', 'license' and other microformats so they can be used in a more semantic way when displaying search results.
** by [[implementors#Brian_Suda|Brian Suda]]

=== XWiki ===
* [http://xwiki.org XWiki] (as of [http://www.xwiki.org/xwiki/bin/view/Main/ReleaseNotesXWiki10Beta5 version 10Beta5]) publishes the user profiles using [[hcard | hCard]], the events in the calendar application using [[hCalendar | hCalendar]], the blog entries using [[hAtom | hAtom]] and homepage links using [[rel-home | rel-home]].

=== xfn-spider ===

* [http://sphinx.net.ru/hg/xfn-spider xfn-spider] — simple crawler extracting microformats with XSLT ([http://sphinx.net.ru/blog/entry/simple-microformat-xslt-extraction/ Original article in Russian] circa summer 2007) and exporting information to OPML feedlist, tag cloud etc.

* See [http://services.alphaworks.ibm.com/manyeyes/view/SNnqRHsOtha6i5-m6iGTH2- XFN visualization] example at IBM's Many Eyes made using data extracted with xfn-spider

=== Yahoo Creative Commons Search ===
* [http://search.yahoo.com/cc/ Yahoo Creative Commons Search] - supports [[rel-license]] specifically to search for Creative Commons licensed content.

=== Yahoo Local ===
* [http://local.yahoo.com Yahoo local] supports [[hcard|hCard]], [[hcalendar|hCalendar]], and [[hreview|hReview]].

=== Yahoo Tech ===
* [http://tech.yahoo.com Yahoo! Tech] supports [[hreview|hReview]].

=== Yahoo UK Movies ===
* [http://movies.yahoo.co.uk Yahoo! UK Movies] supports [[hreview|hReview]].
** by Mark Norman Francis

=== Yalwa - Local directory ===
* [http://www.yalwa.com/ Yalwa - Local Directory] supports [[hreview|hReview]].
Example: [http://wiesbaden.yalwa.de/ID_102318221/Yalwa-GmbH.html Yalwa Listing]

=== Yedda ===
* [http://yedda.com Yedda] supports [[hcard|hCard]] for exposing users information, [[hatom|hAtom]] for exposing data that is already exposed via feeds (like list of questions and answers) and [[rel-tag|rel-tag]] for every tag used to tag questions and users.

== Validators ==

See [[debugging-tools]].

==Search engines==
See [[search-engines]]

== Companies / Developers / Organizations ==
See [[implementors]]

The following have been moved from the sections above due to problems, stated below:

== Publishers and Content Hosting Services ==
<em>This section is a stub. You can help the microformats wiki by expanding it.</em>

Publishers and content hosting services are listed on the individual "examples in the wild page". You may list major publishers here along with links to their respective examples in the wild pages.

=== Twitter ===
[http://twitter.com Twitter] supports: [[hatom-examples-in-wild|hAtom]], [[hcard-supporting-user-profiles|hCard user profiles]], [[hcard-xfn-supporting-friends-lists|rel-me]]

== Other ==
Some notes on initial thoughts around [[implementation-guidelines|Guidelines and Strategies for Implementing Microformats]]

== Old ==
Past implementations (e.g. sites that have gone offline).

=== Technorati Contacts Feed Service ===
* 2005-2011 <nowiki>http://feeds.technorati.com/contacts/</nowiki> Technorati Contacts Feed Service a deployment of [[implementations#X2V|X2V]] to convert [[hcard|hCards]] to vCard (.vcf) format.
** by [[implementors#Technorati|Technorati]]
** Use [[H2VX]] instead now (2009+)

=== Technorati Events Feed Service ===
* 2005-2011 <nowiki>http://feeds.technorati.com/events/</nowiki> Technorati Events Feed Service a deployment of [[implementations#X2V|X2V]] to convert [[hcalendar|hCalendar]] events to iCalendar (.ics) format.
** by [[implementors#Technorati|Technorati]]
** Use [[H2VX]] instead now (2009+)

=== Technorati Microformats Search ===
* 2006-2008 Technorati <nowiki>http://kitchen.technorati.com/search/ Microformats Search</nowiki>. Search for contacts ([[hcard|hCard]]), events ([[hcalendar|hCalendar]]), or reviews ([[hreview|hReview]]) published on blogs and other web sites.
** by [[implementors#Ryan_King|Ryan King]]
** first version (2006 May) by [[implementors#Tantek_Çelik|Tantek Çelik]], [[implementors#Ryan_King|Ryan King]], [[implementors#Kevin_Marks|Kevin Marks]], [[implementors#Josh_Smith|Josh Smith]]

zen-garden

2013-09-22T11:26:20Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

= Microformats Zen Garden =

A [http://www.csszengarden.com/ CSS Zen Garden] for microformats is essential for popular adoption. Getting something that "looks cool" for "free" should be a key attraction for convincing authors to "steal" microformatted data and cut'n'paste it into their own sites, and for that matter, to reuse style sheets for microformatted data as well.

Developers of microformat-savvy tools would also benefit from common idioms for presenting and editing microformatted data (for example, consider the impact of Apple's Address Book person-layout/edit view on many other Mac applications).

Unlike the original Zen Garden, Javascript may also prove essential to unlocking designers' flexibility: people have expressed interest in hooking hCards to maps, or [http://code.google.com/p/js-hcalendar/ this example of a renderer for hCalendar].

== Interested parties ==

People who would be willing to spend time on the garden.

* [[User:RobertBachmann|Robert Bachmann]]
** could act as a point person
** writing the sample document
** providing styles (but he's not a good designer)

* [[User:Scott Reynen|Scott Reynen]]
** could make the backend submission and switcher functionality

* Malarkey (Andy Clarke http://www.stuffandnonsense.co.uk)
** Designer
** I agreed to help by contributing design themes after talking with Kevin and Tantek

* [[User:PhilipAshlock|Philip Ashlock]] (http://www.philaestheta.com)
** Designer/Developer
** I agree to help by developing interface design - clean attractive implementations
** I have a server and domain names to contribute
** I have live data to implement with a university website and a record label website
** My university will essentially be paying me for development work
** Suggestions for where efforts should be focused are most appreciated

* [[User:ChrisMessina|Chris Messina]]
** Designer
** Drupal Theme developer
** I've done a few implementations in experimental Drupal and WordPress themes... would like to do more.

* [[User:Phae|Frances Berriman]]
** New Media Developer (CSS/XHTML primarily, but also an accessibility auditor)
** I offer to contribute time to ensuring development is accessible and adheres to WCAG.
** I offer to help develop initial CSS templates to kick-start the showcase.
** Will also be involved with any promotional or editorial aspects, if necessary.

* [[User:ShawnDrew|Shawn Drew]] (http://shaztronics.com)
** Designer/Developer
** I agree to help by (co)developing PHP implementation

* [[User:MichaelOwens|Michael Owens]] (http://michaelkowens.com)
** Designer/Developer (PHP/MySQL, CSS/XHTML, and JS/AJAX)
** I agree to help by (co)developing the PHP implementation
** I will contribute to the front end JS/AJAX development
** I have developed numerous microformat-enhanced sites that may already have usable code snippets

== Planning ==
=== Open questions ===
* What license should be used? --[[User:RobertBachmann|Robert Bachmann]] 10:34, 21 Oct 2005 (PDT)
** My personal favorites are http://creativecommons.org/licenses/by/2.0/ and http://creativecommons.org/licenses/publicdomain/ --[[User:RobertBachmann|Robert Bachmann]] 14:03, 21 Oct 2005 (PDT)
* Should the example page contain examples for all microformats or should there be one example page per microformat? --[[User:RobertBachmann|Robert Bachmann]] 08:57, 24 Oct 2005 (PDT)
** I think the example pages should mirror real world examples as much as practical. In some cases, microformats will be mixed, and in others they will occur independently, and it would be nice to have an environment in which to test microformat applications on such a diversity of example data. On the other hand, I can see some benefit in keeping it simple to encourage use. --[[User:ScottReynen|Scott Reynen]] 12:44, 26 Oct 2005 (CST)
*** Unsure of status of this project (last edit 2005? Most interested though!) but think given recent development of [[hatom|hAtom]] and the constant growth and popularity of "blogs" as a whole, a blog page would be ideal. Perhaps a standard blog layout, containing author information (to utilise [[hcard|hCard]] and [[hcalendar|hCalendar]]) and many others as they are developed. It would also give the design plenty of space to write about what Microformats are all about, and show them in a really useful real world example that 99% of the viewers will find interesting (I hope). [[User:Phae|Frances Berriman]] 16 June 2006
**** After further discussion, iteration one of the project will use [[hcard|hCard]], [[hreview|hReview]] and [[hcalendar|hCalendar]] as example blog posts with [[hatom|hAtom]]. Later versions will use [[hatom|hAtom]] with other popular microformats once they are stable and released. [[User:Phae|Frances Berriman]]
* Discussion list: Use the microformats discussion list or use an extra list? (-[[User:RobertBachmann|Robert Bachmann]])
** I think a secondary list for this project would be beneficial. A digested version of current development work/status could be sent to the MF discussion lists periodically so that we can gain additional input from the MF group at large, without watering down the usual discussions that occur there. (-[[User:Phae|Frances Berriman]])

* Storing files: Subversion or Mercurial? (-[[User:RobertBachmann|Robert Bachmann]])
** git or (+1 Subversion)(-[[User:PriitLaes|Priit Laes]])
*** Subversion currently in use, and working fine for the job. [[User:Phae|Frances Berriman]]
* Project name: Perhaps we need an other name? See <http://mezzoblue.com/archives/2006/02/22/homage_and_o/>. (-[[User:RobertBachmann|Robert Bachmann]])
** Having read that article, I think a new name would be beneficial. Perhaps we could discuss it with the Zen Garden creators first, and get their feedback? In the interim, it can be refered to as the MF Zen Garden, until a bright spark thinks of something better! (-[[User:Phae|Frances Berriman]])
** What about <em>Microformats Playground</em>? (suggested by Scott Reynen) (-[[User:RobertBachmann|Robert Bachmann]])
*** +1 [[User:RobertBachmann|Robert Bachmann]]
*** +1 [[User:Phae|Frances Berriman]]
*** +1 [[User:MichaelOwens|Michael Owens]]
**** '''Microformats Playground''' is current project name. [[User:Phae|Frances Berriman]]

=== Back end prototype ===
Coded by Scott Reynen

* Demo: http://www.randomchaos.com/mfzen/
* Source: http://www.randomchaos.com/source/

=== Project Revival ===
* Demo: http://uf.paulshen.name

This wiki page hasn't been updated in a while and I'm wondering if people are still interested in working on this. The link is to something that I have been working on, open to change. I have not worked on the front end design (that's why it's so plain).

The setup is designed so that most users can get what they want as quickly and easily as possible. Users can explore XHTML code and stylesheets, of which the code can be used for their own sites. Users can "vote" for an entry (XHTML or CSS), one time per IP address (so that users don't have to register). A concept behind the architecture is that visitors shouldn't have to register unless they want a profile which lists their contributions.

Visitors (registered or not) can contribute XHTML segments or CSS stylesheets corresponding to a XHTML segment. By default, the submitted entries are accessible but are not in the main directory until "approved" by an administrator. Some design decisions are how the entries (XHTML and CSS) should be identified. Currently, all XHTML entries are "tagged" with items such as "hcard" or "hcalendar" (could be multiple). However, a naming scheme needs to be developed to use the directory listings (whether we use just a "name" or a "description" taxonomy).

It'd be great if we got something running, because I know that at least I would find such a resource useful. Feedback would be appreciated.

[[User:PaulShen|Paul Shen]]

* +1 for revival [[User:ShawnDrew| Shawn Drew]]
** I am also very interested in getting this project going again. Pauls description is similar to what I would like to see in the site.
** http://shaztronics.com/sharedup/mfzen/ - Some of my thoughts
** http://mfzen.com/ - Registered domain

* +1 for revival [[User:MichaelOwens| Michael Owens]]
** I also am very interested in reviving this project. I'd love to get some of us on IRC together to discuss sometime soon. (during Sept 2008)

social-network-portability

2013-09-22T11:26:15Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<h1> Social Network Portability </h1>
{{TOC-right}}
Social network portability is one of several [[user-interface]] ideas and suggestions for working with microformats in the area of [[data-portability]].

== The Problem ==
Why is it that every single social network community site makes you:
* re-enter all your [[hcard-supporting-user-profiles|personal profile info]] (name, email, birthday, URL etc.)?
* re-add all your [[hcard-xfn-supporting-friends-lists|friends]]?

In addition, why do you have to:
* re-turn off notifications?
* re-specify privacy preferences?
* re-[[block]] [http://headrush.typepad.com/creating_passionate_users/2006/04/angrynegative_p.html negative people]?

AKA "social network fatigue problem" and "social network update/maintenance problem".

== The Goals ==
When you join a new site, you should be able to ''import'' or preferably ''subscribe'' to
* your profile information
* your social network
from any existing profile of yours.

In addition it would be nice if preferences around:
* notifications
* [[privacy]]
also transferred between profiles.

AKA a social internetwork, a network of social networks.

== Design Patterns and Recipes ==

The "How To" for social network profile sites that want to solve the above problems and achieve the above goals.

# Publish microformats in your user profiles and contacts.
## implement [[hcard|hCard]] on user profile pages, including [[xfn]] rel="me" on hyperlinks to users' blogs or home pages that they specify. See [[hcard-supporting-profiles]] for sites that have already done this. See [[how-to-publish-user-profiles]] for more details (See [[hcard-authoring]] until that previous link is created and filled in.)
## implement [[hcard|hCard]]+[[xfn|XFN]] on the list of contacts on your user profile pages. Use [[xfn]] rel="me" to link to contacts list pages and contacts list pagination links too. See [[hcard-xfn-supporting-friends-lists]] for sites that already do this. (e.g. [[http://twitter.com/ Twitter]]) and [[how-to-markup-contact-lists]] for more details.
## implement [[hcard|hCard]] wherever a user's name is mentioned in lists, in comments, in messages or wherever else it would help to identity that a "person" or "organization" is being referred to.
# Subscribe to microformats for your user profiles and contacts:
## when signing up a new user and importing contacts
### let a user fill out and <em title="Auto-sync is more than just one-time import, check it and sync-up once a day.">"auto-sync"</em> from one of their existing [[hcard-supporting-profiles]], their name, their icon etc. [http://microformats.org/blog/2007/06/21/microformatsorg-turns-2/ Satisfaction Inc already supports this] ([http://staging.getsatisfaction.com/people/new sign up page]). See [[how-to-import-user-profiles]] for more details.
### let a user fill out and <em title="Auto-sync is more than just one-time import, check it and sync-up once a day.">"auto-sync"</em> their list of contacts from one of their existing [[hcard-xfn-supporting-friends-lists|hCard+XFN supporting friends lists]]. [http://microformats.org/blog/2007/06/21/microformatsorg-turns-2/ Dopplr.com already supports this] ([http://www.flickr.com/photo_zoom.gne?id=576635008&size=o screenshot]). See [[how-to-import-contacts]] for more details (e.g. first implement direct XFN friends list import/subscribe by using the SGAPI to important contacts *across the web*, much faster than importing from one service at a time.)

== Resources ==
=== Groups ===
* [http://ma.gnolia.com/groups/PSN Ma.gnolia Portable Social Networks group] for aggregated bookmarks around the subject and join the group to share links.
* [http://upcoming.yahoo.com/group/3601/ Upcoming Social Network Portability group] for events to discuss and implement social network portability.

=== Open Source ===
* "[http://code.google.com/apis/opensocial/ OpenSocial] defines a common API for social applications across multiple websites.
* [[hKit]] - web service and open source PHP for parsing/importing/subscribing to [[hcard-supporting-profiles|hCard open user profiles]].
* "[http://opensocialgraph.plaxo.com/ Online Identity Consolidator]" rel="me" web parser/crawler web service and open source Python. (source code link now broken; Google code has a copy at [http://code.google.com/p/google-sgnodemapper/source/browse/trunk/plaxo-rel_me_crawler.py rel_me_crawler.py])
* "[http://django-psn.googlecode.com/svn/trunk/readme.html Django-PSN (portable social networks)]" open source for a user interface to create links on a social network profile to "other profiles" marked up with rel="me" naturally. The code can be seen in action on the [http://pownce.com Pownce] website, e.g. on [http://pownce.com/t/ a Pownce profile page that links to other profiles of the same user]. This is a great complement to the above Plaxo Online Identity Consolidator. What Django-PSN publishes, Plaxo Online Identity Consolidator parses.
* [http://code.google.com/p/identity-matcher/ identity-matcher] - Rails plugin to match identities and social network information from sites such as GMail, Twitter, Flickr, Facebook and any site supporting appropriate microformats. This code was extracted and contributed from Dopplr.
* [http://redmonk.net/projects/portable-social-network-lib/ Portable Social Network Lib] is a Ruby library for consuming/providing Portable Social Network services in social web apps, written by Steve Ivy. ([http://redmonk.net/archives/2007/11/07/if-you-love-your-users-set-them-free-portable-social-networks/ More])
* [http://code.google.com/p/diso/ DiSo] - ''distributed social networking'' components, [[User:Chris_Messina|Chris Messina]] and [[User:SteveIvy|Steve Ivy]]

=== User Interfaces ===
* "[http://gerardramos.com/mf/ Social Network Portability with Microformats]" - a user interface that lets you check how portable your social network is across various sites.
* "[http://lab.backnetwork.com/ufXtract-psn/ ufXtract - Portable social network profile parser]" - A public API which can extract both hCard-XFN patterns and XFN rel=me links from social networks. The API can spider multiple pages following rel=me links. It also tries to find the representative hCard and provides output as JSON or XML.

== Social Network Portability FAQ ==
See [[social-network-portability-faq]].

== Events ==
*[[events/2007-07-28-portable-social-networks-meetup|2007-07-28 portable social networks initial meeting]] between Daniel Burka, [[User:Tantek|Tantek Çelik]], Eran Globen, Brian Oberkirch at Ritual Coffee Roasters, San Francisco, CA. Discussed portable social networks, simplified and crystalized problem statement (with progressive problems to solve), goals, design patterns, recipes. Created [[social-network-portability]] page.
* [[events/2007-08-19-social-network-portability-today|2007-08-19 BarCampBlock session on social network portability TODAY]] at Princeton Review offices, High Street, Palo Alto, CA. Reviewed problem statement, how sites can use the [[hcard|hCard]] and [[xfn|XFN]] microformats *today* to become a node on the "open social web" (phrase introduced).
* [[events/2007-08-28-social-network-portability-today|2007-08-28 Social Network Portability Today]] lunchtime meetup
* [[events/2007-09-05-dconstruct-microformats-workshop|2007-09-05 d.Construct workshop on microformats]] which covered both [[data-portability]] and [[social-network-portability]].
* [[events/2007-09-08-social-network-portability|2007-09-08 BarCampBrighton session on social network portability]] at Madgex offices, North Street, Brighton, England.
* [[events/2007-09-25-social-network-portability|2007-09-25 Portable Social Network Micro Meetup]] at Citizen Space, San Francisco, CA, USA.
*[[events/2007-09-28-portable-social-networks-meetup-amsterdam|2007-09-28 Portable Social Network Panel]] at PICNIC in Amsterdam, Netherlands
* <span class="vevent"><span class="dtstart">2007-10-04</span> <span class="summary">[[events/2007-10-04-fundamentos-web-social-network-portability|Fundamentos Web: Social Network Portability]]</span> by Tantek Çelik — <span class="location adr"><span class="locality">Gijón</span>, <span class="country-name">Spain</span></span></span>
* <span class="vevent"><span class="dtstart">2008-09-05</span>: <span class="summary">[[events/2008-09-05-dconstruct-social-network-portability|dConstruct 2008: Social Network Portability]]</span> (<span class="url">http://2008.dconstruct.org/schedule/TantekCelik.php#talk</span>) at [http://2008.dconstruct.org/ dConstruct 2008] in <span class="location">Brighton, England</span>.</span> ([http://tantek.com/presentations/2008/09/social-network-portability presentation])
* ...

See the microformats [[events]] page for upcoming events related to social network portability.

== Articles and blog posts ==
Note: if you know of or can find earlier mentions on the web of the phrases "portable social network" or "social network portability", please add the earliest reference elsewhere on the web to this chronology. [[User:Tantek|Tantek]] 08:25, 22 Aug 2007 (PDT).

* 2006-11-15 Jon Hicks: [http://www.flickr.com/photos/hicksdesign/298271647/ The straw that broke this camels back]: <blockquote><p>Thats the last social service that involves me adding all my friends in all over again. Life is too chuffing short.</p><p>Please, can someone come up with some way of avoiding this repetition of 'buddies'?!</p></blockquote>
* <strong>2006-11-15</strong> [http://twitter.com/drewm/statuses/68199 Drew McLellan on Twitter]: (Perhaps the earliest mention of the concept of social network portability.) <blockquote><p>Thinking that we really need to join the dots with XFN and make social networks portable.</p></blockquote>
* <strong>2006-11-15</strong> [http://twitter.com/adactio/statuses/68412 Jeremy Keith on Twitter]: (first known reference to "<strong>portable social networks</strong>") <blockquote><p> Agreeing with Drew about using XFN to create portable social networks. If we don't, Jon is going to go postal.</p></blockquote> The mention of Jon is likely a reference to the [http://www.flickr.com/photos/hicksdesign/298271647/ above-mentioned Flickr photo].
* 2006-11-19 Phil Gyford: [http://www.gyford.com/phil/writing/2006/11/19/your_single_soci.php Your single social network] <blockquote><p>I really, really want a single service where I can say “these people are my friends” and then when I sign up to any new website I can sync it with my previously-defined social network.</p></blockquote>
* 2006-11-21 Jeremy Keith: [http://adactio.com/journal/1209/ Twittering]: <blockquote><p>Here’s what I want: when I go to the latest social networking fadsite, I want it to ask for my URL. Then it can go off and fetch my [[hcard|hCard]] and [[xfn|XFN]] list. A pre-filled form for my details and a pre-filled list of potential contacts can then be presented to me.</p></blockquote>
* 2006-11-21 Derek Featherstone: [http://www.boxofchocolates.ca/archives/2006/11/21/solving-problems-with-social-networking Solving problems with social networking]
* 2006-11-22 Thomas Vander Wal: [http://www.personalinfocloud.com/2006/11/following_frien.html Following Friends Across Walled Gardens] - first mention of "portable social network" but in reference to quoting Jeremy Keith
* 2006-11-23 Jeremy Keith: [http://adactio.com/journal/1212/ More thoughts on portable social networks] - describes the process of portability
* 2006-11-23 Glenn Jones: [http://www.glennjones.net/Post/820/Microformatsandportablesocialnetwork.htm Microformats and portable social network] - talks about portable social networks in the backnetwork
* 2006-11-23 Velvetsarah has [http://www.velvet.id.au/2006/11/23/portable-social-networks/ posted a screenshot and brainstorm] about how a site could handle importing XFN enabled contacts. See [[social-network-portability-interfaces]] for more.
* <strong>2006-11-24</strong> [http://microformats.org/wiki?title=user-interface&diff=10524&oldid=10523 "<strong>social network portability</strong>" phrase and problem statement introduced to microformats wiki] by [[User:Tantek|Tantek Çelik]]
* 2007-03-11 Robert Gaal: [http://www.53miles.com/archives/making-openid-your-only-online-profile-alpha-dash Making OpenID your only online profile: Alpha Dash] - An abstract attempt to create one dashboard, to be used as a starting point for all social networks. It contains four elements: identity, ownership, presence and contacts (see comments also)
* 2007-05-16 [http://2007.xtech.org/public/schedule/paper/69 What is your provenance?] by Gavin Bell for Xtech 2007. Also available on [http://video.google.com/videoplay?docid=-8663100900373306094 Google Video]
* 2007-06-20 Alper Çuğun: [http://fourstarters.com/2007/06/20/the-future-of-everything-is-social-consolidate-and-take-back-your-social-network/ The Future of Everything is Social: Consolidate and take back your social network]
* 2007-07-17 Kevin Lawver: [http://www.lawver.net/archive/2007/07/17/h12_portable_social_networks_at_mashup_camp.php A Portable Social Network Prototype] - A simple Ruby on Rails app that uses OpenID + XFN to look for users of the site w/ the same homepage as the href value and allows you to add them as contacts.
*[http://www.plaxo.com/about/releases/release-20070718 2007-07-17 Plaxo Pushes For "Open Social Web": Endorses and implements key open standards, OpenID and microformats]
* 2007-07-18 Jeremiah Owyang: [http://twitter.com/jowyang/statuses/156097392 Twittering]: <blockquote><p>What if we could port all our friends and family from one social network to another. Why do we have to continue to add people = annoying</p></blockquote>
* 2007-07-18 Brian Oberkirch: [http://www.brianoberkirch.com/2007/07/18/highrise-microformats-and-portable-social-networks/ Highrise, microformats and portable social networks]
* 2007-07-24 Thomas Vander Wal: [http://vanderwal.net/random/entrysel.php?blog=1937 Sharing and Following/Listening in the Social Web]
* See [[events/2007-07-28-portable-social-networks-meetup#blog_posts|blog posts following up]] from the [[events/2007-07-28-portable-social-networks-meetup|2007-07-28-portable social networks meetup]].
* 2007-08-01 Jeffrey Zeldman: [http://www.zeldman.com/2007/08/01/social-network-portability/ "InterNetwork" regarding social network portability]
* 2007-08-02
** [http://www.brosbeforeblogs.com/2007/08/identity-crisis.html Identity Crisis part 1] <blockquote><p>We need to put the ownership of how we define relationships online in the hands of the individual, not the services that utilize them.</p><p>My theory on how this should be accomplished is based on a marriage of OpenID and an open standard for defining relationships such as the [[XFN]] [http://microformats.org/ Microformat]. </p></blockquote>
** [http://www.brianoberkirch.com/2007/08/02/deeelightful-making-profile-import-a-snap/ Deeelightful: Making Profile Import a Snap] <blockquote><p>Why not make it simple for them to jumpstart a profile by reusing information they already have on the [[hcard|Web? Some forward thinking Web services are marking up user profile data with hCard, a microformat that]] signifies a person, place or organization is being described.</p></blockquote>
* 2007-08-08 Brian Oberkirch: [http://www.brianoberkirch.com/2007/08/08/building-blocks-for-portable-social-networks/ Building Blocks for Portable Social Networks]
* 2007-08-15 [http://news.bbc.co.uk/1/hi/technology/6944653.stm Pull down the walled gardens] Internet law professor Michael Geist says the walled gardens of social networks should be pulled down.
* 2007-08-16 Stephanie Booth: [http://climbtothestars.org/archives/2007/08/16/we-need-structured-portable-social-networks-spsn/ We Need Structured Portable Social Networks (SPSN)] (links to two more posts on the subject, but not certain they're relevant enough for a separate listing; edit as you see fit)
* 2007-08-17 [http://bradfitz.com/social-graph-problem/ Thoughts on the Social Graph] by Brad Fitzpatrick.
* 2007-08-25 [http://www.ignitesocialmedia.com/linking-it-all-%e2%80%93-social-network-portability/ Linking It All-Social Network Portability] by Mike Lotz for Ignite Social Media
* 2007-09-03 [http://themaninblue.com/writing/perspective/2007/09/03/ There are no social networks] by Cameron Adams
<blockquote><p>If you can't see my friends and let my friends be seen, you'll be washed up and hung out to dry.</p></blockquote>
* 2007-09-07 [[User:LynX|Carlo v. Loesch]]: [http://about.psyc.eu/Social_network#But.._why_microformats.3F Privacy and the web? Notification and HTTP? Are you looking at the right technologies!?]
* 2007-11-21 Sitepoint article [http://www.sitepoint.com/article/social-networks-take-friends Portable Social Networks: Take Your Friends with You]
* 2007-12-03 [http://www.glennjones.net/Post/833/Makingyoursocialnetworkingdataportable-Markingupprofilesandfriendswith.htm Making your social networking data portable - Marking up profiles and friends with mircoformats] by Glenn Jones
* 2008-02-19 [http://www.glennjones.net/Post/835/SemanticCampLondon.htm Can your website be your API and real life] presentation by Glenn Jones (Semantic Camp London) covers social network portability and date portability

See [http://ma.gnolia.com/groups/PSN ma.gnolia Portable Social Network Group] for aggregated bookmarks around the subject and join the group to share links.

[http://technorati.com/search/microformats.org/wiki/social-network-portability View blog reactions] to this page.

== Issues ==
* Beware of and avoid [[social-network-anti-patterns]]!
* See and add to [[social-network-portability-issues]].

== Alternative Approaches ==
Non-web based:
* [http://about.psyc.eu psyc] and [http://www.psyced.org psyced], a decentralized multi-protocol chat and event notification system with [http://about.psyc.eu/Social_Network friendship] and [http://about.psyc.eu/Trust trust] modeling.

== See also ==
* [[social-network-portability-interfaces]]
* [[social-network-portability-faq]]
* [[social-network-portability-issues]]
* [[social-network-anti-patterns]]
* [[hcard|hCard]]
* [[xfn]]
* [[user-interface]]
* [[data-portability]]

xfolk-issues

2013-09-22T11:26:04Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

= xFolk issues =

These are externally raised issues about [[xfolk|xFolk]] with broadly varying degrees of merit. Thus some issues are REJECTED for a number of obvious reasons (but still documented here in case they are re-raised), and others contain longer discussions. Some issues may be ACCEPTED and perhaps cause changes or improved explanations in the spec. Submitted issues may (and probably will) be edited and rewritten for better terseness, clarity, calmness, rationality, and as neutral a point of view as possible. Write your issues well. — [http://thecommunityengine.com/home Bud]

== Template ==
{{issues-format}}

== Issues ==

* {{OpenIssue}} 2007-01-01 raised by [[User:AndyMabbett|Andy Mabbett]]
*# Applying a tag in an xFolk entry also applies it to the linking page. However, certain tags (e.g. "NSFW") may apply to the page linked to, but '''''not''''' to the linking page.

2007-01-03 addressed by [[User:Bud|Bud Gibson]]. Well, we had a lot of list discussion on this while creating xFolk. Actually, that was pre-list. The rationale is that the tags apply to the items in the container not the page simply by convention in xFolk. It's a specialization of reltag. The real question I think is what are the scoping rules for reltag. The assumption here is that the reltag tags only apply to the link within xfolkentry.

* {{OpenIssue}} *Why is this called "xFolk", and not, say, xBookmark(s) or hBookmark(s)? [[User:AndyMabbett|Andy Mabbett]] 09:16, 19 Nov 2006 (PST)

2007-01-03 addressed by [[User:Bud|Bud Gibson]]. Mainly because the purpose of the microformat was originally to allow harvesting into aggregation services for creating "folksonomies".

* {{OpenIssue}} 2006-06-12 raised by [[User:Singpolyma|singpolyma]]
*# ''using title attribute for the tagged link <a> element, if it exists, as the entry title'' -- I use the title attribute for a summary description, since this is more [[XOXO]]-compatible. While I lose the ability to have xfolk harvest my descriptions that way, I'm not really worried about that. What I'm more worried about is xfolk using my descriptions as the title...

2007-01-03 addressed by [[User:Bud|Bud Gibson]]. I'm in a quandary as to how to address this one. It seems like a basic incompatibility.

* {{OpenIssue}} 2006-04-20 raised by [[User:RCanine|Ryan Cannon]]
*# ''Issue 1: As xFolk is intended as a list, it seems tedious to have to place <code>class="xfolkentry"</code> on every element. Are there implementation problems with creating a container class with that implies <code>class="xfolkentry"</code> on every child node?.''

* {{OpenIssue}} 2007-04-27 raised by [[User:KevinMarks|Kevin Marks]]
*# I wondered why xfolk uses class="taggedlink" rather than rel="taggedlink" as a rel value seems more semantic for labelling the link.
*#* rel="taggedlink" would mean you couldn't mark a link as both "taggedlink" and "nofollow". Social bookmarking services often want to apply rel="nofollow" to their user-generated external links (to avoid being attractive targets for spam). class="taggedlink" combines with rel="nofollow". rel="taggedlink" would be a problem.
*#** Why? The rel attribute contains a space-separated list. e.g. rel="taggedlink nofollow next".

* {{OpenIssue}} 2007-08-12 raised by [[User:TomMorris|Tom Morris]]
*# The syntax for xFolk is quite verbose if one wishes to enter it by hand. See [http://rbach.priv.at/Microformats/IRC/2007-08-12#T195443 IRC discussion from 2007-08-12]

==Related pages==
{{template:xfolk-related-pages}}

xfolk

2013-09-22T11:25:59Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>xFolk RC1</entry-title>
{{DraftSpecification}}

'''xFolk''' (from "xFolksomony") is a simple and open format for publishing collections of bookmarks. It better enables services for improving user experience and sharing data in web-based bookmarking software. xFolk may be embedded in HTML or XHTML, Atom, RSS, and arbitrary XML. It is one of several open [[microformats|microformat]] standards.

__TOC__

== Draft Specification ==

=== Editor/Author ===
[http://thecommunityengine.com/ Bud Gibson] ([http://thecommunityengine.com The Community Engine])

=== Copyright ===
{{MicroFormatCopyrightStatement2005}}

=== Patents ===
{{MicroFormatPatentStatement}}

=== Inspiration and Acknowledgments ===
Thanks to: [http://www.cnbc.cmu.edu/~plaut/ David Plaut] who introduced me to the idea that items may partially belong to many categories at once. More recently, thanks to: [http://tantek.com/ Tantek Çelik], [http://epeus.blogspot.com/ Kevin Marks], [http://steve.osdir.com/ Steve Mallet], [http://hybernaut.com/ Brian DelVecchio], and [http://blogmarks.net François Hodierne] who have contributed to the development of xFolk with thoughtful critiques and implementations.

== Introduction ==
Social bookmarking services let users save and tag bookmarks to share with other users. Over the past year, the number of these services has mushroomed to [http://en.wikipedia.org/wiki/Social_bookmarking over 20], with popular examples including: [http://del.icio.us del.icio.us], [http://furl.net furl], [http://de.lirio.us de.lirio.us], [http://jots.com jots], and [http://blogmarks.net blogmarks].

Lack of an open, interoperable data standard is a major issue in using social bookmarking services. An open standard would make it possible to easily collect social bookmark data and remix it to invent new services along the lines of [http://gataga.com gataga]'s experimental bookmark search engine. An open standard would also make it possible to write javascripts that work across services [http://johnvey.com/features/deliciousdirector/ as some currently do for del.icio.us], enabling across-the-board improvements in user experience.

xFolk is an open social bookmarking standard that aims to achieve both benefits. Social bookmarking services that adopt xFolk will continue to differentiate themselves with data services. But, the data itself will be easy to manipulate by third party scripts and easy to share. As a result, bookmarking services will be able to offer a wider array of options to their users at low cost and focus on what truly differentiates them. Individuals or groups operating standalone bookmark repositories will have access to a wider array of functionality than they can produce on their own.

== Semantic XHTML Design Principles ==
{{semantic-xhtml-design-principles}}

== Format ==
Extensive analysis of social bookmarking services and linkblogs, reported on [http://thecommunityengine.com/home/archives/xfolk elsewhere], reveals that the data published by both bookmarking services and '''many''' different linkblogs are described by the following implied schema:

* A bookmarked or tagged link.
* A title for the entry.
* Tags for the link.
* An extended description or summary of the link.

As demonstrated in early iterations of the xFolk standard, this general schema can be translated into markup by:

# creating a container element for each entry of class <code>xfolkentry</code>,
# using an <a> element for the bookmarked or tagged link of class <code>taggedlink</code>,
# using title attribute for the tagged link <a> element, if it exists, as the entry title, otherwise using the element value,
# using [[rel-tag]] for the tags, and
# using a container element of class <code>description</code>, such as <p>, for any extended description or summary.

A given xFolk entry will always contain a tagged link including a title with all other elements optional. Entries may have more than one tag as well as more than one element of class <code>description</code>. Multiple elements of class <code>description</code> are ordered by default document order. Semantic elements within xFolk entries may be nested at arbitray depths.

Many social bookmarking systems exist, each with its own markup conventions. Further, many people are already publishing personal link blogs. xFolk is designed with ease of adapting to these current practices as a primary goal. Therefore, few assumptions are made as to the exact kinds of elements used for an xFolk entry. Rather, the work of defining semantics is left entirely to the class and rel (in the case of [[rel-tag]]) attribute values.

It is expected that developers will use [http://www.w3.org/TR/xpath XPath] or equivalent syntax in accessing xFolk entry elements. a requirement for XPath is that the HTML document be well-formed but not necessarily valid. Thus, while not optimal, it is possible to serviceably use xFolk in an HTML document that does not validate.

=== XMDP Profile ===

See the [[xfolk-profile|xFolk profile]] for the [http://gmpg.org/xmdp XMDP] profile of xFolk.

== Example ==
Here is a sample bookmark as displayed in [http://del.icio.us del.icio.us]'s standard markup. Lines where the value of elements' class attributes must change to conform to xFolk are marked with a comment at the end.
<pre><div class="post"> 
<div>
<a class="delLink" href="http://www.sifry.com/alerts/archives/000306.html"> 
Sifry's Alerts: Technorati launches Related Tags
</a>
</div>
<div class="extended"> 
Ever wanted to see what posts are related to other posts, what tags
are related to others? Now you can! Just check under the Tag
description on most tag pages, like this one, or this one, and you'll
see the patterns. Can you smell the emergence?
</div>
<div class="meta">
to
<a class="delNav" href="/fpgibson/folksonomy">folksonomy</a> 
<a class="delNav" href="/fpgibson/technorati">technorati</a> 
... <a class="delNav" href="/url/cbcabf7de070fdb46598ee679367be49">
and 1 other person
</a>
... on 2005-04-09
</div>
</div></pre>

The equivalent in xFolk is as follows. Comments are placed at the end of lines where class attribute changes were required.
<pre><nowiki>
<div class="xfolkentry"> 
<div>
<a class="taggedlink" href="http://www.sifry.com/alerts/archives/000306.html"> 
Sifry's Alerts: Technorati launches Related Tags
</a>
</div>
<div class="description"> 
Ever wanted to see what posts are related to other posts, what tags
are related to others? Now you can! Just check under the Tag
description on most tag pages, like this one, or this one, and you'll
see the patterns. Can you smell the emergence?
</div>
<div class="meta">
to
<a rel="tag" href="/fpgibson/folksonomy">folksonomy</a> 
<a rel="tag" href="/fpgibson/technorati">technorati</a> 
... <a class="delNav" href="/url/cbcabf7de070fdb46598ee679367be49">
and 1 other person
</a>
... on 2005-04-09
</div>
</div>
</nowiki></pre>

Converting markup to be conformant with xFolk is almost always this easy. The advantage of xFolk is that it provides one set of class attributes that can be reused across all services and link blogs, almost always with no loss of granularity. The next section presents several more examples to illustrate this point.

Another simple example (using lists markup) :
<pre>
<nowiki>
<ul>
<li>
<ul class="xfolkentry">
<li><a class="taggedlink" href="http://microformats.org/wiki/Main_Page">microformats wiki</a></li>
<li class="description">The main place for understanding microformats and playing with...</li>
<li class="description">Community driven wiki</li>
<li class="meta">
Tags :
<a rel="tag" href="http://del.icio.us/tag/microformats">microformats</a>
<a rel="tag" href="http://del.icio.us/tag/websocial">websocial</a>
<a rel="tag" href="http://del.icio.us/tag/semantics">semantics</a>
</li>
</ul>
</li>

<li>

</li>

</ul>
</nowiki>
</pre>

== Many more examples ==

We have numerous examples to help developers incorporate xFolk into their sites.

=== In the wild ===

These are real live examples of functioning systems that publish bookmarks in xFolk. These are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If you publish using xFolk, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [http://greenvoice.com Greenvoice] has a user-generated environmental news link list, which is marked up with xFolk.
* [http://www.idoneos.com Idoneos.com] , a conceptually networked collection of information pages (mostly spanish), is tagging bookmarks with xFolk.
* [http://ashaszin.lautre.net/ Ashaszin] - Small blog running with [http://spip.net SPIP] : del.icio.us links and web feeds tagged with xFolk .
* [http://www.rolandinsh.lv/blog/ Rolands Umbrovskis - blog] all blog posts are marked up with xFolk.
* [http://www.bbc.co.uk/worldservice/bangladeshboat BBC World Service Bangladesh River Journey] a social network mashup, uses basic xFolk for bookmarking hAtom entries. See [http://dharmafly.com/blog/bangladeshboat Dharmafly blog discussion].
* [http://waferbaby.com/hussy waferbaby's Hussy] currently publishes links using xFolk.
* [http://smarking.com/ Smarking] currently publishes all shared links (including search results) using xFolk.
* [http://unalog.com unalog] currently publishes all shared links (including search results) using xFolk.
* [http://de.lirio.us de.lirio.us] currently publishes its bookmarks using xFolk (with the deprecated class attribute <code>extended</code> in place of <code>description</code>, see [[xfolk-profile | the XMDP]]).
* [http://dev.blogmarks.net/wiki/BlogSync blogmarks] currently exports bookmarks to blogs in xFolk (scroll down to the export example on the page; the deprecated class attribute <code>extended</code> is used in place of <code>description</code>, see [[xfolk-profile | the XMDP]]).
* [http://thecommunityengine.com The Community Engine] uses xFolk (with the deprecated class attribute <code>extended</code> in place of <code>description</code>, see [[xfolk-profile | the XMDP]]) for its [http://thecommunityengine.com/home main entries] and for its [http://thecommunityengine.com/webcites republished bookmarks].
* [http://groovymother.com/links/ Groovy Links] is a link blog which is marked up with xFolk.
* [http://tommorris.org/blog/ Tom Morris] - daily del.icio.us links are marked up with xFolk, [[hCard]] and [[vote-links]].

=== Additional social bookmarking services ===

This example illustrates how xFolk may be applied to one additional service:

* [[xfolk-scuttle | scuttle]]

=== Link blogs ===

Social bookmarking services are only the most recent examples of people publishing links. Link blogs have been around almost since the beginning of blogging. They represent somewhat more of a challenge for xFolk because their markup tends to be less semantic from the outset. The following examples illustrate some particular challenges and how they can be overcome.

* [[xfolk-kottke | kottke]]
* [[xfolk-pollas | pollas]]
* [[xfolk-jacobian | jacobian]]
* [[xfolk-julian-bez | julian-bez]]

=== Spam ===
Some spammers are adding xFolk tags to their link farms. (It's probably a bad idea to actually link to these sites.) For example,
* phontron.info

== Implementations ==

The following implementations have been developed which generate or use xFolk. If you have an xFolk implementation, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [http://sourceforge.net/projects/semanticscuttle SemanticScuttle], your own social bookmarking software, supports xfolk natively
* [http://buzka.com Buzka], a social bookmarking service, now supports xFolk
* [http://blip.tv Blip.tv], a video hosting site, now [http://blog.blip.tv/blog/2006/08/19/blip-supports-xfolk/ supports xFolk].
* [http://www.s9y.org/ Serendipity], a PHP-powered, flexible Blogging/CMS application, now has a [http://www.numblog.de/archives/241-Social-Bookmarks-Plugin-for-Serendipity.html social bookmarks plugin] that supports xFolk.
* [http://claimid.com claimID] has implemented xFolk for people's links.
* [http://ma.gnolia.com ma.gnolia] now supports xFolk.
* [http://smarking.com/ Smarking.com] (a social bookmarking service) marks up their tagged links with xFolk! Hat tip: [http://3spots.blogspot.com/2006/05/social-bookmarking-smarking.html 3spots: Social + bookMARKING = Smarking] which itself is an [[hreview|hReview]].
* [http://blog.codeeg.com/2006/03/20/flock-tails-flocktails/ Flocktails] - port of Tails extension for Flock 0.5.12 that looks for hCards, hCalendar, xFolk and hReview and tosses them into a handy topbar
* [http://blog.codeeg.com/tails-firefox-extension/ Tails is a Firefox Extension] that will display the presence of microformats ([[hcard|hCard]], [[hcalendar|hCalendar]], [[hreview|hReview]], [[xfolk|xFolk]]) on a webpage.
* Bud Gibson and Mike Migurski [http://thecommunityengine.com/home/archives/2005/09/vegomatic_an_al.html have written] [http://thecommunityengine.com/veg-o-matic veg-o-matic], an xFolk reblogging tool and service.
* [http://inside.glnetworks.de/ Martin Rehfeld] has updated the work of [http://blogmatrix.blogmatrix.com/ David Janes] and produced a [[Greasemonkey]] [http://inside.glnetworks.de/2006/06/05/microformats-have-arrived-in-firefox-15-greasemonkey-06/ script] that finds many microformat elements, including xFolk and [http://blog.davidjanes.com/mtarchives/2005_08.html#003379 provides a popup menu of actions]. ''This will work with FireFox 1.5+/GreaseMonkey 0.6.4+ now.''
* [http://www.midgard-project.org/midcom-permalink-6416db7e1f0e297b4cf3dcc285702a8d net.nemein.bookmarks], the bookmark manager in [http://www.midgard-project.org/ Midgard CMS] uses xFolk as the native output format, with added <code>abbr class=posted</code> for publication date and <code>abbr class=poster</code> for user who added the bookmark. See [http://bergie.iki.fi/links/ example]
* [http://de.lirio.us de.lirio.us] currently publishes its bookmarks using xFolk 0.4 (the class attribute <code>extended</code> is used in place of description).
* [http://dev.blogmarks.net/wiki/BlogSync blogmarks] currently exports bookmarks to blogs in xFolk 0.4 (scroll down to the export example on the page; the class attribute <code>extended</code> is used in place of <code>description</code>).
* [http://pokkari.com/microformat/javadoc/ Sivitols] is a Java library for microformats. Currently only the xFolk RC1 standard is implemented, but additional microformat support is planned. (adapted from [http://blog.blip.tv/blog/microformats/])
* [http://bildu.net Bildu] a social bookmarking service in Basque that supports xFolk (an also rel-tag).
* [http://bookmarks.excite.co.uk/ Excite Bookmarks] a social bookmarking service that supports xFolk and rel-tag.

== References ==
=== Normative References ===
* [http://www.w3.org/TR/2002/REC-xhtml1-20020801/ XHTML 1.0 SE]
* [[rel-tag]]

=== Informative References ===
* [http://thecommunityengine.com/home/archives/xfolk articles about xFolk]
* [http://thecommunityengine.com/home/archives/tags/microformats articles about the business value of microformats]
* [http://gataga.com gataga social bookmark search engine]
* [http://johnvey.com/features/deliciousdirector/ an ajax based interface for del.icio.us]
* [http://en.wikipedia.org/wiki/Social_bookmarking social bookmarking defined at wikipedia]

=== Similar Work ===
* [[hreview | hReview]]

== Work in progress ==
Although this specification has recently begun to stabilize as indicated by the version RC1, it is still a work in progress. If warranted, I am prepared to go through multiple release candidates to achieve the narrow purpose of making bookmark entries more genrally accessible with as with as light weight a format as possible. All changes since the last iteration have been motivated by the implementation experience of developers attempting to achieve this narrow aim. Further changes will also most likely be motivated by implementation concerns. See "future directions" below for additional microformat possibilities.

=== Changes since xFolk 0.4 ===
The class attribute value <code>extended</code> was deprecated in favor <code>description</code> to better conform with other microformat usage and some requests during implementation. The other change has been to allow use of multiple elements of class <code>extended</code> based on some use cases discovered in implementation.

=== Future directions ===
There are several extensions one might imagine for xFolk. Frequently, these extensions are best achieved by combining xFolk with another microformat. For instance, one might want to indicate his or her evaluation of the bookmarked item. This might be achieved by using [[vote-links | Vote Links]] or [[hreview | hReview]] with xFolk.

One can also imagine extending xFolk to provide data conformant with various social bookmarking service APIs, for instance to provide all bookmarks by tag. These APIs are currently too fluid for specification in any kind of standard. The APIs and the functionality they provide represent one way social bookmarking services and meta services can differentiate themselves.

A companion format called "xFolk definition" is under development. xFolk definition will provide a means of explicitly defining the tags used in social bookmarks.

=== Brainstorming ===
* [[xfolk-brainstorming|xFolk brainstorming]]

== Discussions ==

=== Q&A ===
* If you have any questions about xFolk, check the [[xfolk-faq|xFolk FAQ]], and if you don't find answers, add your questions!

=== Issues ===
* Please add any issues with the specification to the separate [[xfolk-issues|xFolk issues]] document.

==Related pages==
{{template:xfolk-related-pages}}

[[Category:Draft Specifications]]
[[Category:xFolk]]

Template:MicroFormatCopyrightStatement

2013-09-22T11:25:52Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

However, the authors intend to submit this specification to a standards body with a liberal copyright/licensing policy such as the [http://gmpg.org/ GMPG], [http://ietf.org/ IETF], and/or [http://w3.org W3C]. Anyone wishing to contribute should read their copyright principles, policies and licenses (e.g. the [http://gmpg.org/principles GMPG Principles]) and agree to them, including licensing of all contributions under all required licenses (e.g. [http://creativecommons.org/licenses/by/1.0/ CC-by 1.0] and later), before contributing.

Template:MicroFormatCopyrightStatement2005

2013-09-22T11:25:44Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

rel-enclosure

2013-09-22T11:25:37Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>rel="enclosure"</entry-title>
{{DraftSpecification}}

rel-enclosure is a simple, open, format for indicating files to cache which is embeddable in (X)HTML, Atom, RSS, and arbitrary XML. relEnclosure is an [[elemental-microformat|elemental microformat]], one of several [[microformats|microformat]] open standards.
__TOC__
== Draft Specification 2005-06-21 ==
=== Author ===
[http://epeus.blogspot.com Kevin Marks], [http://technorati.com Technorati, Inc.]

=== Copyright ===
{{MicroFormatCopyrightStatement2004}}

=== Patents ===
{{MicroFormatPatentStatement}}

== Abstract ==

relEnclosure is one of several microformats. By adding <code>rel="enclosure"</code> to a hyperlink, a page indicates that the destination of that hyperlink is intended to be downloaded and cached. E.g. with the following hyperlink:

<pre><nowiki>
<a href="http://homepage.mac.com/kevinmarks/wwdc2005.mov" rel="enclosure">WWDC 2005 Keynote with chapters</a>
</nowiki></pre>

the author indicates that the movie should be downloaded.

== Multiple Enclosures ==
Multiple such rel="enclosure" hyperlinks indicate that several media items should be downloaded.

'''Question:''' What if there are several alternative formats, such as high- and low-bandwidth recordings? Since <link rel="alternate" href="..."> is already defined in XHTML for that purpose, so how should it interact with this new rel tag?

'''Response:''' rel="alternate" is defined in the HTML spec:

<blockquote>Designates substitute versions for the document in which the link occurs.</blockquote>

In the case of enclosure links "alternate" is not suited, because the media file is not a substitute version of the document in which the link occurs - it is a substitute version of another link on the document in which the link occurs.

'''Proposal:''' Multiple instances of the same enclosure (i.e. same video with different formats, size/resolution, bitrates, etc) could be grouped in a class="enclosure" block with multiple rel="enclosure" links. This would be analogous to <media:group> in [http://search.yahoo.com/mrss MRSS]

===reply===
*"In the case of enclosure links "alternate" is not suited, because the media file is not a substitute version of the document in which the link occurs "
**That's not necessarily the case; the linked file may be an audio reading of the text on the page, for instance. [[User:AndyMabbett|Andy Mabbett]] 02:37, 5 Oct 2007 (PDT)

== XMDP profile ==
<pre><nowiki>
<dl class="profile">
<dt id="rel">rel</dt>
<dd><p>
<a rel="help" href="http://www.w3.org/TR/html401/struct/links.html#adef-rel">
HTML4 definition of the 'rel' attribute.</a>
Here is an additional value.</p>
<dl>
<dt id="enclosure"> enclosure </dt>
<dd>Indicates that the referred resource is intended to be downloaded and cached</dd>
</dl>
</dd>
</dl>
</nowiki></pre>

==Examples in the Wild==
This section is '''informative'''.

The following sites have implemented rel-enclosure, and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If your site is marked up with rel-enclosure, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page.
* [http://huffduffer.com/ Huffduffer] uses rel-enclosure on links to audio files marked "download".

== Implementations ==
This section is '''informative'''.

The following implementations have been developed which either generate or parse rel-enclosure links. If you have a rel-enclosure implementation, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [http://www.feedburner.com FeedBurner]: the [http://forums.feedburner.com/viewtopic.php?t=20 SmartCast] service looks for the rel="enclosure" microformat and converts it to an enclosure in the feed.
* [http://odeo.com ODEO] [http://odeo.com/blog/2005/07/adding-microformats-to-odeo.html publishes] rel-enclosure links for user podcast MP3s.
* [http://joshkinberg.com/popupmaker/ Video Pop-Up Link Maker]: generates code for rel-enclosure links for videobloggers. Also generates Javascript to launch a pop-up window with the video embedded. (Also available at [http://embedthevideo.com/ embedthevideo.com])

== References ==
=== Normative References ===
* [http://gmpg.org/xmdp/ XMDP]

=== Informative References ===
* [http://www.ietf.org/rfc/rfc4287.txt The Atom Syndication Format]:
** 4.2.7.2 The "rel" Attribute
4. The value "enclosure" signifies that the IRI in the value of the
href attribute identifies a related resource which is potentially
large in size and might require special handling. For atom:link
elements with rel="enclosure", the length attribute SHOULD be
provided.

==See also==

* [[rel-enclosure-brainstorming]]
{{rel-related-pages}}

[[Category:Draft Specifications]]
[[Category:rel-enclosure]]

robots-exclusion

2013-09-22T11:25:28Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>Robot Exclusion Profile</entry-title>
{{DraftSpecification}}
__TOC__
== Draft Specification 2005-06-18 ==

=== Authors ===
* [http://peterjanes.ca/ Peter Janes]

=== Copyright ===
Per the public domain release on the author's and contributors' user pages ([[User:PeterJ|Peter Janes]], [[User:RyanKing|Ryan King]], [[User:Tantek|Tantek Çelik]]) this specification is released into the public domain.

Public Domain Contribution Requirement. Since the author(s) released this work into the public domain, in order to maintain this work's public domain status, all contributors to this page agree to release their contributions to this page to the public domain as well. Contributors may indicate their agreement by adding the public domain release template (http://microformats.org/wiki/Template:public-domain-release) to their user page per the Voluntary Public Domain Declarations instructions (http://microformats.org/wiki/Category:public_domain_license). Unreleased contributions may be reverted/removed.

=== Patents ===
The author neither holds nor intends to apply for any patents on anything required to implement this specification.

== Abstract ==
The Robot Exclusion Profile is a reworking of the [[Robots META]] tag (and less-standard extensions) as a [[microformat]].

== Introduction ==
The [[Robots META]] tag is used to provide page-specific direction for web crawlers. While being useful in many cases, its page-specific nature means it cannot be used to restrict crawlers from indexing only certain sections of a document. Several attempts have been made to create more granular solutions through various methods but have perceived shortcomings that limit their use; the Robot Exclusion Profile defines a microformat that can be applied to any element or set of elements in a page.

Like other microformats such as [[hcalendar|hCalendar]], the Robot Exclusion Profile defines a set of class names that may be applied to (X)HTML elements. <code>class</code> can be applied to almost every (X)HTML element, which means that authors may be as specific or general as they wish in their application. This differs from the similarly-purposed <code>rel="nofollow"</code> attribute, which may only be applied to (and does not refer to the content of) a specific inline link. (It is interesting to note that this behavior is entirely encompassed by the use of <code>class="robots-nofollow"</code> on the same element.) Classes are also additive, so multiple values can be specified at once, e.g. <code>class="robots-nofollow robots-noindex"</code>. For robot exclusion in particular, this allows authors to specify multiple rules for an element without adding unnecessary extra markup.

== Format ==
=== Profile URI ===
<code><nowiki>http://example.org/xmdp/robots-profile#</nowiki></code> (obviously placeholder)

The classes defined by the Robot Exclusion Profile should be considered meaningless when the profile URI is not present in the document <code><head></code>'s <code>profile</code> attribute.

=== XMDP Profile ===
<pre><nowiki><dl class="profile">
<dt id="robots-nofollow">robots-nofollow</dt>
<dd>
Informs robots that links contained by the element are not to be followed.
</dd>
<dt id="robots-follow">robots-follow</dt>
<dd>
Informs robots that links contained by the element are to be followed.
</dd>
<dt id="robots-noindex">robots-noindex</dt>
<dd>
Informs robots that the content of the element is not to be included as part of the page.
</dd>
<dt id="robots-index">robots-index</dt>
<dd>
Informs robots that the content of the element is to be included as part of the page.
</dd>
<dt id="robots-noanchortext">robots-noanchortext</dt>
<dd>
Informs robots that the link target document is not to be indexed under the anchor text.
</dd>
<dt id="robots-anchortext">robots-anchortext</dt>
<dd>
Informs robots that the link target document is to be indexed under the anchor text.
</dd>
<dt id="robots-noarchive">robots-noarchive</dt>
<dd>
Informs caching robots that the content of the element is not to be included in their cached copy.
</dd>
<dt id="robots-archive">robots-archive</dt>
<dd>
Informs caching robots that the content of the element is to be included in their cached copy.
</dd>
</dl></nowiki></pre>

== Examples ==
Removing page content:
<pre><nowiki>
<head profile=”http://example.org/xmdp/robots-profile#”>
...
<div class=”robots-noindex”>There once was a man from Nantucket…</div>
<p>This page is not about <span class=”robots-noindex”>pornography</span>.</p>
</nowiki></pre>

Showing <code>nofollow</code> in conjunction with [[votelinks]], and applying it in parallel with [[rel-nofollow]]:

<pre><nowiki>
<head profile=”http://example.org/xmdp/robots-profile#”>
...
<p class=”robots-nofollow”>This is <a href=”http://example.com/bogus”>a bogus link</a>
and so is <a href=”http://example.net/bogus”>this</a>.</p>

<p>I don't like <a rel="nofollow" rev="vote-against" class="robots-nofollow"
href="http://example.com/disagree">this page</a>
but I do like <a rev="vote-for" href="http://example.com/agree">this one</a>.</p>
</nowiki></pre>

Preventing images from being stored by search engines, forcing them to be retrieved from the originating website:

<pre><nowiki>
<head profile="http://example.org/xmdp/robots-profile#">
...
<p><img src="example.png" class="robots-noarchive" alt="Private image" /></p>
</nowiki></pre>

A consequence of this is that the small summaries that modern search engines display with the result links also exclude the <code>robots-noarchive</code>. We suggest replacing small excluded segments with an ellipsis [<code>...</code>]. Unarchived segments of a size comparable to the segments the search engine normally uses for summaries can just be omitted. Probably a display of an entire cached document which has unarchived segments should also include some locution to show the places where text has been elided, no matter what the size.

A [http://peterjanes.ca/2005/robots/example more complex example] is available which also shows how the robots metadata may be [http://tantek.com/log/2005/06.html#d03t2359 visualized].

== References ==
=== Normative ===
* [http://gmpg.org/xmdp/ XMDP]
* [http://www.robotstxt.org/wc/meta-user.html The Robots META Tag]

=== Informative ===
* [http://www.robotstxt.org/wc/norobots.html A Standard for Robot Exclusion]
* [http://www.google.com/bot.html#noindextags Googlebot Frequently Asked Questions]
* [http://www.bauser.com/websnob/meta/robots.html The ROBOTS META Tag]
* [[relnofollow|RelNoFollow Draft Specification]]
* This page was contributed from the [http://developers.technorati.com/wiki/RobotsExclusion technorati developers' wiki].

=== Thanks ===
* [http://tantek.com/log/ Tantek Çelik]
* [http://www.lachy.id.au/ Lachlan Hunt]
* [http://www.joesapt.net/ Joe D'Andrea]

== related pages ==
* <span id="Issues"> [[robots-exclusion-issues]]</span>
* [[robots-exclusion-brainstorming]]

[[Category:Draft Specifications]]
[[Category:robots-exclusion]]

robots-exclusion-issues

2013-09-22T11:25:23Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<h1> robots exclusion issues </h1>
{{TOC-right}}
These are externally raised issues about [[robots exclusion]] with broadly varying degrees of merit. Thus some issues are REJECTED for a number of obvious reasons (but still documented here in case they are re-raised), and others contain longer discussions. Some issues may be ACCEPTED and perhaps cause changes or improved explanations in the spec.

'''IMPORTANT''': Please read the [[robots-exclusion-faq|robots exclusion FAQ]] ''before'' giving any feedback or raising any issues as your feedback/issues may already be resolved/answered.

Submitted issues may (and probably will) be edited and rewritten for better terseness, clarity, calmness, rationality, and as neutral a point of view as possible. Write your issues well. — [http://tantek.com/ Tantek]

For matters relating to the [[meta robots]] specification itself, see [[meta-robots-errata]] and [[meta-robots-suggestions]].

== closed issues ==
Resolved issues that have no further actions to take. These will likely be moved to a separate page like [[robots-exclusion-issues-closed]].

* ...

== resolved issues ==
Issues that are resolved but may have outstanding [[to-do]] items. As issues are resolved, they will be moved from the top of the [[robots-exclusion-issues#Issues|Issues list]] to the bottom of this section.
=== 2005 ===
* ''The "efficacy" issues from [[rel-nofollow#open_issues|rel="nofollow"]] also apply.''
** ACCEPTED. The key here would be to get one or more search engines to implement it and get others to do so as well, just as the original [[meta robots]] specification.
* ''The "collateral damage" issues from [[rel-nofollow#open_issues|rel="nofollow"]] also apply.''
** REJECTED EXAMPLE NEEDED.

==== Precedence ====
* Should earlier values take precedence or later? Does <code>class="robots-nofollow robots-follow"</code> means the same as <code>class="robots-nofollow"</code> or <code>class="robots-follow"</code>?
** ACCEPTED. Order {{must not}} matter in usage of the <code>class</code> attribute as it is defined to be a set by HTML4. The interpretation of conflicting values could be defined conservatively, that is in the presence of both a directive and its "no" variant, the "no" variant supercedes.
* <code>meta</code> tag suggests not using conflicting or repeating directives and so does not specify precedence. <code><p class="robots-noindex robots-index"></code> is an apparent conflict but in this case the more specific should obviously override the general at its point of applicability, no matter what order the directives appear in.
** ACCEPTED FAQ. In this case [[meta robots]] examples should be constructed and tested with current search engines to see how they treat conflicting and/or repeating directives, various combinations, different orderings.
* Interaction with [[rel-nofollow]]: what does <code>class="robots-follow" rel="nofollow"</code> mean?
** ACCEPTED FAQ. One possible interpretation is that currently [[rel-nofollow]] has no profile URI defined, so the Robot Exclusion Profile takes precedence. In the future, per XMDP's [http://gmpg.org/xmdp/description#multiple Using Multiple Profiles], <q>the URIs in the 'profile' attribute are to be treated most significant (first) to least significant (last).</q> However XMDP's precedence ordering only applies to the same term being defined twice, not to any sort of semantic conflicts. Note that [[rel-nofollow]] only states how to treat the link when indexing it, that is, not giving it any weight. It does not preclude a robot from actually following the link.

==== Phrases ====
* Modern search engines normally support <i>phrase</i> queries. A phrase query only maches documents that contain the words of the query, consecutively and in the same order. That does beg the question of whether a matched phrase should be allowed to straddle a <code>class="robots-noindex"</code> region. Intuitively this should not be allowed. The phrase query <code>"word1 word2"</code> should not match a document that contains <code>word1 <b class="robots-noindex>ignore</b> word2</code>. This does allow for an interesting tool for webmasters can specify that juxtaposed words not be considered to be phrases -- just specify an empty unindexed region as in <code>word1 <b class="robots-noindex></b> word2</code>.
** ACCEPTED FAQ. Yes, any content in a "noindex" element should be treated as if it is not present, and thus would not form part of a phrase. The second example is less clear however, since many search engines search for phrases withoiut spaces as well, e.g. they provide results for "word1word2" even when the user searches for "word1 word2".

==== Specificity ====
* Does not allow control of specific UAs à la [http://www.robotstxt.org/wc/norobots.html A Standard for Robot Exclusion]
** REJECTED OUT OF SCOPE. The [[meta robots]] has no specific control of UAs either, and thus it is out of scope for [[robots-exclusion]]. Brainstorming on a possible extension for specific UAs has been moved to [[robots-exclusion-brainstorming]].

==== Keywords ====
* The keywords <code>all</code> and <code>none</code> are defined by the Robots META Tag as convenience shortcuts to enable or disable the combination of <code>nofollow</code> and <code>noindex</code>, but predate Google's <code>noarchive</code> and should not be considered to include it. As a result, for purposes of clarity and simplicity (the [http://gmpg.org/xmdp/description#principles XMDP Minimalism principle]), they are not included in this version of the Robot Exclusion Profile.
** ACCEPTED FAQ.

== issues ==
=== 2006 ===
==== Suitability as a microformat ====
* {{OpenIssue}} Isn't the Robot Exclusion Profile designed for machines first and humans second instead of vice versa? Yes, just as much as [[rel-nofollow]], the deployed microformat that it's designed to replace.
* I'd like to echo this concern. We need to discuss whether or not this is a suitable microformat. --[[User:RyanKing|RyanKing]] 13:34, 17 Jan 2006 (PST)

=== 2008 ===
* {{OpenIssue}} 2008-10-09 raised by [[User: PeterJ|PeterJ]]. Yahoo! has implemented a similar [http://www.ysearchblog.com/2007/05/02/introducing-robots-nocontent-for-page-sections/ robots-nocontent] class.

== template ==
Please use this format (copy and paste this to the end of the list to add your issues):
* {{OpenIssue}} YYYY-MM-DD raised by [http://yourhomepage.example.com YOURNAME].
*# ''Issue 1: Here is the first issue I have.''
*# ''Issue 2: Here is the second issue I have.''

== related pages ==
* [[robots-exclusion]]
* [[robots-exclusion-brainstorming]]

vote-links-issues

2013-09-22T11:25:13Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

=Vote-link Issues=

These are issues that people have raised regarding [[vote-links]]. If you'd like to raise an issue here, please put the date and your name and clearly state your issue.

== Template ==
{{issues-format}}

==Issues==

* {{OpenIssue}} 2005-06-21 raised by Hixie
*# ''Issue H-1: This specification is lacking a user agent conformance section. There's basically nothing that says how VoteLinks must be parsed, how to handle errors, and so forth. Is it defined in terms of the DOM? Is it defined in terms of a serialisation? How do you handle conflicting content?

* {{OpenIssue}} 2006-08-23 by porneL
*# ''What is the relation of vote links and [[rel-nofollow|rel=nofollow]]? <a rev="vote-against"> may actually have positive effect on referenced page in search engines that don't understand vote links. <a rev="vote-against" rel="nofollow"> makes more sense in this case, however nofollow means that PR should not be affected, which might be in conflict with interpretation of vote-against.

* {{OpenIssue}} 2007-01-04 by SteveIvy (originally by tantek in irc)
*# ''[[rel-faq#Should_.27rev.27_even_be_used|According to the 'rel' FAQ]], 'Use of "rev" SHOULD be avoided. However, VoteLinks, is being grandfathered since it was such an early use. No future microformats should be developed that use "rev".' Would it be useful to put vote-links through the proper process and see what comes of it?

* {{OpenIssue}} 2009-02-02 by icoloma
*# It has been raised in the FAQ that votes should not be implemented using GET links, since GET is expected to be idempotent and in fact could be followed by search engines or link-prefetching browser plugins. Instead, the proposal should describe a method using POST forms, or using javascript code to actually cast the vote (like using Rails' POST links).
*#* I think you're misunderstanding the purpose of votelinks. They're not for polling systems. This is a non-issue; I propose that it be marked closed. [[User:TobyInk|TobyInk]] 08:31, 3 February 2009 (UTC)
*#** As someone who was similarly confused on my first encounter with vote links, I think a case could be made for clarifying this in the spec. In particular, the specification's example, which consists of two links to 'Do melt the cheese!' and 'Don't melt the cheese!', seems to be exactly the kind of polling thing that vote links isn't for. Could we come up with a better example? [[User:Chrismear|Chrismear]] 16:39, 20 February 2009 (UTC)

* {{OpenIssue}} 2009-03-20 by [[User:TobyInk|TobyInk]]
*# Who voted for the link? The author of the page or the person [[representative-hcard|represented by the page]]? It would be nice to have some clarity.

==See also==
*[[vote-links]]

vote-links

2013-09-22T11:25:07Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>Vote Links</entry-title>
__TOC__
== Specification 2005 ==
=== Editor ===
* [http://tantek.com/ Tantek Çelik] ([http://technorati.com Technorati, Inc.], formerly of [http://microsoft.com/ Microsoft Corporation])

=== Concept ===
* [http://epeus.blogspot.com/ Kevin Marks] ([http://technorati.com Technorati, Inc.])

=== Authors ===
* [http://epeus.blogspot.com/ Kevin Marks] ([http://technorati.com Technorati, Inc])
* [http://tantek.com/ Tantek Çelik] ([http://technorati.com Technorati, Inc])

=== Copyright ===
{{MicroFormatPublicDomainContributionStatement}}
* [[User:Tantek|Tantek]]: I release all my contributions to this specification into the public domain and I encourage the other authors to do so as well.
* [[User:Kevin_Marks|Kevin Marks]]: I release all my contributions to this specification into the public domain and I encourage the other authors to do so as well.

=== Patents ===
{{MicroFormatPatentStatement}}

=== Inspiration and Acknowledgments ===
Thanks to everyone who has given feedback on VoteLinks. Thanks especially to EtanWexler, who provided the first really good documentation that VoteLinks should be using 'rev' instead of 'rel' (see [[VoteLinksFAQ]]), and John Allsopp who similarly challenged the use of 'rel', and helped co-author the [[RelFAQ]] exploring questions and issues about the use of the HTML4 'rel', 'rev' attributes and linktypes in general.

== Introduction ==
Indexing and tracking applications treat all links as endorsements, or expressions of support. This is a problem, as we need to link to those we disagree with as well, to discuss why.

== Specification ==
VoteLinks is an [[elemental-microformat|elemental microformat]], one of several [[microformats|microformat]] open standards.
We propose a set of three new values for the rev attribute of the <a> (hyperlink) tag in HTML.

The new values are "vote-for" "vote-abstain" or "vote-against", which are mutually exclusive, and represent agreement, abstention or indifference, and disagreement respectively.

A link without an explicit vote 'rev' value is deemed to have value "vote-for" or "vote-abstain", depending on the application.

Additional human-readable commentary can be added using the existing 'title' attribute, which most browsers show as a rollover.

Examples:
<source lang=html4strict>
<a rev="vote-for" href="http://example.com/cheesevote"
title="Melt the cheese!">Do it!</a>
<a rev="vote-against" href="http://example.com/cheesevote"
title="Don't melt the cheese!">Don't do it!</a>
</source>

=== Deprecated: Using 'rel' for VoteLinks ===
A previous draft of the specification used the 'rel' attribute instead of the 'rev' attribute. Analysis and feedback has demonstrated this to have been inappropriate use of the 'rel' attribute, when the 'rev' attribute was much more important. See the [[RelFAQ]] for more details.

Implementations MAY support links with the VoteLinks values in the 'rel' attribute for backward compatibility with any existing VoteLinks content.

Authors MUST NOT use 'rel' for VoteLinks values.

== XMDP profile ==
The following is an [http://gmpg.org/xmdp/ XMDP] profile for the [[vote-links]] specification.

=== URLs ===
This profile is hosted as a separate XMDP file on microformats.org:
* http://microformats.org/profile/vote-links
* shortURL: http://ufs.cc/x/vote-links

=== Usage ===
Profiles are referenced in (X)HTML files in the <HEAD> tag, e.g.:
<source lang=html4strict>
<head profile='http://microformats.org/profile/vote-links'>
</source>

=== Profile ===
<source lang=html4strict>
<dl class="profile">
<dt id="rev">rev</dt>
<dd><p>
<a rel="help" href="http://www.w3.org/TR/html401/struct/links.html#adef-rev">
HTML4 definition of the 'rev' attribute.</a>
Here are additional values as defined in the
<a rel="help start" href="http://microformats.org/wiki/vote-links">
vote-links specification</a>
.</p>
<dl>
<dt id="vote-for">vote-for</dt>
<dd>Indicates agreement with or recommendation for the referred resource.</dd>
<dt id="vote-abstain">vote-abstain</dt>
<dd>Indicates abstention or indifference for the referred resource.</dd>
<dt id="vote-against">vote-against</dt>
<dd>Indicates disagreement with or recommendation against the referred resource.</dd>
</dl>
</dd>
</dl>
</source>

== Implementations ==
This section is '''informative'''.

* Wordpress VoteBack (vote-link aware pingback and trackback) plugin is in testing at [http://monkinetic.com/2006/12/22/voteback.html VoteBack] ([[User:SteveIvy|Steve Ivy]]) - looking for testers!
** Any examples of WordPress sites running this? - [[User:Tantek|Tantek]] 23:42, 30 July 2012 (UTC)

=== past implementations ===
The following implementations went away or stopped working at some point:

* [http://folksr.de/ Folksr.de] - Apache test page (2012-07-30). Was: using VoteLinks to vote on the World Cup 2006
* '''jyte.com''' - "jyte is sleeping" (2012-07-30). Was: Following a [http://jyte.com/cl/jyte-should-integrate-microformats-votelinks vote-links claim] [http://jyte.com/profile/brianellin.com Brian Ellin] implemented vote-links on [http://jyte.com Jyte] within less than 30 minutes.
* '''moloko.itc.it''' site is unresponsive. was: [http://moloko.itc.it/paoloblog/ Paolo Massa] created [http://moloko.itc.it/paoloblog/semantic_links/ SemanticLinks], a small Firefox extension that shows vote-for, vote-against links information. (Note the download links for SemanticLinks have been removed by the author.)

== Examples in the wild ==
This section is '''informative'''.

The following sites have implemented VoteLinks , and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If your site marked up with VoteLinks, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [http://www.likeorhate.com/ LikeOrHate] uses Vote-Links all over the site, to rate anything, items, comments, users. Valid votes are Like, Hate, Whatever ("vote-for", "vote-against", "vote-abstain"). CSS is used to "check" votes so logged users can remember them later.
* [http://www.weboffate.com/ Web of Fate] Web of Fate publishes Vote-Links for prediction probability scoring. Users can vote Agree, Disagree, Witness ("vote-for", "vote-against", "vote-abstain")
* [http://tommorris.org/blog/ Tom Morris] has vote links on del.icio.us links (based on tags "vote-for", "vote-against" and "vote-abstain").


== References ==

=== Normative References ===
* [http://gmpg.org/xmdp/ XMDP]

=== Informative References ===
* [http://www.artweb-design.de/articles/2006/06/05/distributed-votings-using-microformats Distributed votings using microformats] from Artweb Design
* [http://24ways.org/2006/boost-your-hyperlink-power Boost Your Hyperlink Power] - Jeremy Keith, using CSS to surface vote information

== Related Work ==
* [[xoxo]]
* [http://gmpg.org/xfn/ XFN]
* [http://developers.technorati.com/wiki/attentionxml Attention.xml]
* [[rellicense]]
* [[reltag]]
* [[relnofollow]]

== FAQ ==
* See [[vote-links-faq]] and the broader [[rel-faq]].
* See also [[vote-links-issues]] for issues which have been raised with the votelinks [[microformat]].

[[Category:Specifications]]
[[Category:vote-links]]

haudio

2013-09-22T11:24:58Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>hAudio 0.9.1</entry-title>
{{Template:DraftSpecification}}
{{TOC-right}}
http://farm2.static.flickr.com/1216/604867362_da0921136a_o.png

[[haudio|hAudio]] is a simple, open, distributed format, suitable for embedding information about audio recordings in (X)HTML, Atom, RSS, and arbitrary XML. hAudio is one of several [[microformats]] open standards. This page and Microformat is in the public domain.

== hAudio Microformat Draft Specification ==

=== Editors ===
* [[User:ManuSporny | Manu Sporny]] ([http://www.bitmunk.com/ Bitmunk] - [http://blog.digitalbazaar.com Digital Bazaar], Inc.)
* [[ user:WebOrganics | Martin McEvoy ]]
=== Authors ===
* [[User:ManuSporny | Manu Sporny]]
* [[ user:WebOrganics | Martin McEvoy ]]

=== Contributors===
[[User:ManuSporny | Manu Sporny]], [[ user:WebOrganics | Martin McEvoy ]], [[ User:AlexandreVandeSande | Alexandre Van De Sande ]], Michael Johnson, Dave Longley, Brian Suda, Ben Wiley Sittler, Scott Reynen, Frances Berriman, James Craig, David Janes, [[User:AndyMabbett|Andy Mabbett]], Danny Ayers, Rudy Desjardins, Edward O'Connor, Ryan King, Chris Griego, Brad Hafichuk, Tantek Çelik, Colin Barrett, Joe Andrieu, Michael Smethurst, [[User:ChrisNewell | Chris Newell]], Julian Stahnke, Justin Maxwell, Paul Wilkins and David I. Lehn.

Microformats [[#Copyright]] and [[#Patents]] statements apply.

== Introduction ==

It is difficult for a browser to extract semantic information about an audio recording described on a web page. Metadata such as speaker, musician, publisher, label, title of the work, release date, acquisition link, related image artwork and tags provide relevant context for the audio recording.

Having such information marked up can provide a number of benefits to the viewer. If a web browser understands that a particular web page contains a song performed by an artist, it can produce richer interactions. For example, specific searches may be performed for artists and songs via general search services such as Google and Wikipedia. Specific search services may also be queried such as MusicBrainz, The Internet Archive, FreeDB, or Bitmunk. Additionally, classification by crawlers can become more accurate. If there are 20 tracks found on a page done by the same artist, and that content consumes a significant portion of the page, it can be assumed that the page is not only about music, but also about a particular artist.

In order to enable and encourage the sharing, distribution, syndication, and aggregation of audio content, the authors propose the hAudio microformat, an open standard for distributed audio metadata. The authors have researched both numerous [[audio-info-examples]] in the wild and earlier attempts at [[audio-info-formats]], and have designed hAudio around a simple minimal schema for audio content. Feedback is encouraged on the [[haudio-feedback|hAudio feedback]] page.

=== Inspiration and Acknowledgments ===

Many thanks to the various individuals that did research and proposed ideas and discussion related to media info and audio info in general. Among the many participants are [[RodBegbie]], Dean Hudson, [http://tantek.com/log/ Tantek Çelik], [http://napsterization.org/stories/ Mary Hodder], [http://joshkinberg.com/blog/ Joshua Kinberg], ChrisMessina, and [http://onlisareinsradar.com/ Lisa Rein].

=== Scope ===

Audio content consistently share several common fields. Where possible hAudio has been based on this minimal common subset.

=== Out of scope ===

Fields that are type-specific have been omitted from hAudio. It is important that hAudio be kept simple and minimal from the start. Additional features can be added as deemed necessary by practical implementation experience.

The concept of a universal audio identifier, that is, how to identify the same audio album, song, speech, or podcast across different music and audio sites, though something very useful to have, is outside the scope of this format.

== Format ==

{{rfc-2119-intro}}

=== In General ===
The hAudio format is based on a set of fields common to numerous audio content sites and formats in use today on the web. Where possible field names have been chosen based on those defined by the related [[hcard|hCard]] standards.

=== Schema ===

The hAudio schema consists of the following:

* hAudio ('''<code>haudio</code>''')
** '''fn''' or/and '''album''' required. text.
** '''contributor'''. optional. using text or [[hCard]].
** '''duration'''. optional. ISO-8601 time duration. (re-used from [[hcalendar]]).
** '''item''' optional. using text or multiple properties from [[hAudio]].
** '''position''' optional. text.
** '''category'''. optional. text.
** '''published'''. optional.
** '''photo'''. optional. using any element containing a URL, such as IMG.
** '''description''' optional. text.
** '''sample''' (rel). optional. sample file/stream using [[rel-design-pattern]] with <code>sample</code> as the <code>mf-rel-value</code>.
** '''enclosure''' (rel). optional. full download of file using [[rel-enclosure]].
** '''payment''' (rel). optional. link to purchase process using [[rel-payment]].
** '''price''' optional. Using the sub properties '''currency''' and '''amount'''.

=== Field details ===

The fields of the hAudio schema represent the following:

==== hAudio ====

An hAudio is used to identify and describe metadata associated with an audio recording.

* an hAudio element is identified by class name <code>haudio</code>

==== fn ====

The name of a single audio recording is a short textual description used to identify the work among interested parties. This can be the name of a speech, song name, or short description regarding a sound effect.

* The element is identified by the class name <code>fn</code>.
* hAudio {{must}} have <code>fn</code> or/and <code>album</code>.

==== Album ====

The title of a collection of audio recordings, such as those that are represented as a CD, album or LP. The text should be a short textual description used to identify the work among interested parties.

* The element is identified by the class name <code>album</code>.
* hAudio {{must}} have either <code>album</code> or <code>fn</code> or both.

==== Item ====

A container for another hAudio item, which MUST be considered a part of the parent audio recording. An example of an item that is part of an hAudio would be a track in an audio album, a aria in an Opera, or a section of a podcast.

* The element is identified by the class name <code>item</code>.
* hAudio {{may}} have one or more items.
* The element {{must}} be processed opaquely. No sub-elements should be read from any hAudio contained in a track element.
* The contents of the element {{must}} be marked up using properties in hAudio.

==== Position ====

The position is used to describe the position of the hAudio item in a list. Examples of hAudio lists can include album track listings, music top 10 lists, playlists, and podcast chapters.

* The element is identified by the class name <code>position</code>.
* hAudio {{may}} include one <code>position</code> element.
* The contents of the element {{must}} be a number or other sequential identifier.
* The sequential identifier {{may}} be specified out-of-sequence.

==== Contributor ====

A Contributor is any entity that takes part in the creation and distribution of an audio recording. Examples include: artist, composer, publisher, guitarist, vocalist, violinist, lead singer, backup singer, bassist, drummer, manager, and roadie.

* The element is identified by the class name <code>contributor</code>.
* hAudio {{may}} include one or more contributors.
* The contributor's name SHOULD also be marked up as a valid hCard Microformat. [[hcard]]
*# The <code>role</code> attribute {{should}} be used to specify the contributor's responsibility related to the audio recording if hCard is utilized.
* The contributor's name {{may}} be specified in plain-text without being enclosed in a hCard Microformat.

==== Published ====

The published date specifies the date that the audio recording was made available to the public. Examples include: The airing date of a radio broadcast, the day a speech was given, or the day a music album was made available for sale.

* The element is identified by the class name <code>published</code>.
* hAudio {{may}} include one or more <code>published</code> elements.
* The contents of the element {{may}} include a date format compliant with the [[datetime-design-pattern]].

==== Sample ====

A Sample URI specifies from where an excerpt of the audio recording may be retrieved.

* The element is identified by a URI fitting the [[rel-design-pattern]], the rel content being <code>sample</code>.
* hAudio {{may}} include one or more URI <code>sample</code>s.
* The URI {{should}} point to a directly accessible stream or file.
* The type of the sample {{may}} be specified by using the <code>type</code> specifier for a URI.

==== Full Download (Enclosure) ====

A Full Download URI specifies from where the full version of an audio recording may be retrieved. The URI {{must}} point to a direct link to a file retrieval process (FTP, HTTP, BitTorrent URI, etc).

* The element is identified by a URI fitting the [[rel-design-pattern]], the rel content being <code>enclosure</code>.
* hAudio {{may}} include one or more <code>enclosure</code> URIs.
* The type of the file {{should}} be specified by using the <code>type</code> specifier for a URI.

==== Purchase (Payment) ====

A Purchase URI specifies from where the full version of an audio recording may be purchased. The URI {{must}} point to the beginning of a purchase process for the hAudio.

* The element is identified by a URI fitting the [[rel-design-pattern]], the rel content being <code>payment</code>.
* hAudio {{may}} include one or more <code>payment</code> URIs.
* The type of the file {{may}} be specified by using the <code>type</code> specifier for a URI.

==== Photo ====

A photo specifies an image that should be used to summarize the audio recording. Examples include: the image of a speaker, an audio album cover image, or a picture from a concert.

* The element is identified by the class name <code>photo</code>.
* hAudio {{may}} include one or more <code>photo</code> elements.
* The element {{should}} use an <img> element.
* The element {{may}} use any other element that contains a URL, such as <a> or <object>, but it is not recommended.

==== Category ====

The Category specifies the genre or style used to classify the audio recording. Examples include: blues, rock, motivational, spoken word, or sound effect.

* The element is identified by the class name <code>category</code>.
* hAudio {{may}} include one or more <code>category</code> elements.
* This element {{may}} be expressed using the [[rel-tag]] elemental microformat. When a category is expressed using rel-tag, the content of the element is used as the text for the category. For example: <code><a class="category" rel="tag" href="/tags/symphony">Symphonic</a></code> would have "Symphonic" as the text for the category.

==== Duration ====

The Duration specifies the length in time of the audio recording. Examples include: 104 seconds, 3:23, and 4 minutes.

* The element is identified by the class name <code>duration</code>.
* hAudio {{may}} include one <code>duration</code> element.
* The contents of the element {{may}} use the [[abbr-design-pattern]] whose title attribute contains an ISO-8601 formatted duration. An example of 3:23 (i.e 3 minutes 23 seconds) would be "PT3M23S" in ISO 8601 format.
* The element {{may}} contain the following sub properties:
** '''h''' Hour.
** '''min''' Minute.
** '''s''' Second.
Example:
<pre><span class="duration">
<span class="h">1</span>:
<span class="min">3</span>:
<span class="s">23</span>
</span></pre>

==== Price ====

The Price specifies the amount of currency that must be exchanged for acquisition of a full specimen of the audio recording.

* The element is identified by the class name <code>price</code>.
* hAudio {{may}} include one or more <code>price</code> elements.
* The contents of the element {{may}} also use plain text with a currency symbol.
* The contents {{may}} contain the following sub properties:
** '''currency''' an [http://en.wikipedia.org/wiki/ISO_4217#Active_codes ISO 4217] currency name.
** '''amount''' a numerical value.
Example:
<pre><span class="price">
<abbr class="currency" title="GBP">£</abbr>
<span class="amount">4.99</span>
</span></pre>

==== Description ====

An explanation of the contents of the hAudio item. This could explain the significance of a speech, the full-text description of a sound effect, or the meaning of a song or album.

* The element is identified by the class name <code>description</code>.
* hAudio {{may}} include one or more <code>description</code> elements. If more than one description element is defined, the full description for the hAudio is the concatenation, in order, of all <code>description</code> elements.

=== Parser Processing Notes ===

* It is important to understand that ITEM is an opaque element. When processing the ITEM element, none of the properties of the child hAudio should be pulled into the parent hAudio. However, it is recommended that child hAudio {{should}} inherit the following parent hAudio properties, if they are not specified on the child:
** album
** contributor
** category
** published
** photo

=== Semantic XHTML Design Principles ===

{{semantic-xhtml-design-principles}}

==== More Semantic Equivalents ====

For some properties there is a more semantic equivalent, and therefore they get special treatment, e.g.:

* For "photo", use <code><img class="photo" src="..." alt="" /></code>
* If only 'album' is specified, then the hAudio is an album.
* If only 'fn' is specified, then the hAudio is a song, audio track, sound effect, speech, or other atomic/singular work.
* If both 'album' and 'fn' are specified, then the hAudio is a atomic/singular work that is part of an album.
** Example: <code><nowiki><span class="haudio">Side two of <span class="album">Meddle</span> opens with <span class="fn">One of These Days</span></span></nowiki></code>
* If 'fn' and one or more 'items's are specified, the hAudio is an audio recording containing multiple sections. Each item is assumed to be an hAudio that is part of the parent hAudio. None of the 'item' properties should implicitly be added to the containing hAudio. In other words, the parser shouldn't parse the contents of the 'item' into the higher-level hAudio object.

==== Language ====

* To explicitly convey the natural language that an hAudio is written in, use the standard (X)HTML 'lang' or 'xml:lang' attribute on the element with class="haudio"
**e.g. <code><nowiki><p>I like <span class="haudio" lang="de"><span class="fn">Das Lied von der Erde</span></span> best.</p></nowiki></code>
*If portions of an hAudio (e.g. the item name) are in a different language to the rest of the hAudio, use the 'lang' or 'xml:lang' attribute on those portions.
* hAudio parsers which need to handle the native language of hAudio {{must}} process the standard (X)HTML 'lang' or 'xml:lang' attribute as specified.
* hAudio parsers which need to handle native language {{may}} traverse up the DOM to discover the native language of the page and apply that to the hAudio if no other language is specified on the hAudio.

==== Human vs. Machine Readable ====

If an <code><abbr></code> element is used for a property, then its '<code>title</code>' attribute is used for the value of the property, instead of the contents of the element, which can then be used to provide a user-friendly alternate presentation of the value.

If an <code><a></code> element is used for one or more properties, it {{must}} be treated as follows:
# For the 'photo' property and any other property that takes a URL as its value, the <code>href="..."</code> attribute provides the property value.
# For other properties, the element's content is the value of the property.

If an <code><img></code> element is used for one or more properties, it {{must}} be treated as follows:
# For the 'photo' property and any other property that takes a URL as its value, the <code>src="..."</code> attribute provides the property value.
# For other properties, the <code><img></code> element's '<code>alt</code>' attribute is the value of the property.

If an <code><object></code> element is used for one or more properties, it {{must}} be treated as follows:
# For the 'photo' property and any other property that takes a URL as its value, the <code>data="..."</code> attribute provides the property value.
# For other properties, the element's content is the value of the property.

=== Notes ===

This section is informative.

* By marking up audio content with the hAudio microformat, the expectation is communicated that information about the content {{may}} be indexed. This has no impact on the copyright of the content itself which the publisher may explicitly specify using the [[rel-license]] microformat.

== XMDP Profile ==
See: [[haudio-profile]].

== Examples ==

This section is informative.

Here are a few examples of text about, and links to, audio content, from real web sites, showing how they could be easily enhanced to use hAudio.



=== Simple Song Example ===

Display:

(This is a live example, detectable in parsers)

<div class="haudio">
<span class="fn">Start Wearing Purple</span> by <span class="contributor">Gogol Bordello</span>
</div>

Microformatted XHTML:

<pre>
<div class="haudio">
<span class="fn">Start Wearing Purple</span> by
<span class="contributor">Gogol Bordello</span>
</div>
</pre>

=== Speech Example ===

(This is a live example, detectable in parsers)

Display:

<div class="haudio">
<span class="fn">I Have a Dream</span>, a <span class="category">speech</span> by <span class="contributor"><span class="vcard"><span class="fn n"><span class="given-name">Martin</span> <span class="additional-name">Luther</span> <span class="family-name">King</span>, <span class="honorific-suffix">Jr.</span></span></span></span>
</div>

Microformatted XHTML:
<pre>
<div class="haudio">
<span class="fn">I Have a Dream</span>, a
<span class="category">speech</span> by
<span class="contributor">
<span class="vcard">
<span class="fn n">
<span class="given-name">Martin</span>
<span class="additional-name">Luther</span>
<span class="family-name">King</span>,
<span class="honorific-suffix">Jr.</span>
</span>
</span>
</span>
</div>
</pre>

Note the use of [[hcard|hCard]].

=== Song and Album Example ===

(This is a live example, detectable in parsers)

Display:

<div class="haudio">
<span class="fn">Start Wearing Purple</span> by <span class="contributor"><span class="vcard"><span class="fn org">Gogol Bordello</span></span></span> found on <span class="album">Underdog World Strike</span>
</div>

Microformatted XHTML:

<pre>
<div class="haudio">
<span class="fn">Start Wearing Purple</span> by
<span class="contributor">
<span class="vcard">
<span class="fn org">Gogol Bordello</span>
</span>
</span>
found on
<span class="album">Underdog World Strike</span>
</div>
</pre>

Note that for bands, hCard's ''[[hcard#Implied_.22organization-name.22_Optimization|Implied "organization-name" Optimization]]'' is used.

=== Complete Album Example ===

An example that uses every element of hAudio:

[Image] Live Phish, Volume 15 by Phish<br/>
Released: October 31, 2002<br/>
Acquire: Sample, Live Recording, Buy High Quality Track<br/>
Category: [http://www.example.org/tags/live live]<br/>
Duration: 145 minutes, 27 seconds<br/>
Price: $14.99<br/>
<br/>
Tracks:<br/>
1. Sanity (5:48)<br/>
2. Highway To Hell (3:39)

Here is the hAudio Microformat markup:

<pre>
<div class="haudio">
<img class="photo" src="images/live_phish_vol_15.jpg" alt="" />
<span class="album">Live Phish, Volume 15</span>
<span class="contributor">
<span class="vcard">
<span class="fn org">Phish</span>
</span>
</span>
<br/>
Released on:
<abbr class="published" title="2002-10-31">October 31, 2002</abbr>
<br/>
Acquire:
<a rel="sample" href="/samples/live_phish_vol_15_sample.mp3">Sample</a>,
<a rel="enclosure" href="/live/phish_live_phish_vol_15.mp3">Live Recording</a>,
<a rel="payment" href="/buy/phish_live_phish_vol_15">Buy High Quality Track</a>
Category: <a class="category" rel="tag" href="http://www.example.org/tags/live">live</a>
Duration: <abbr class="duration" title="PT145M27S">145 minutes, 27 seconds</abbr>
Price: <div class="price"><abbr class="currency" title="USD">$</abbr><span class="amount">14.99</span></div>
Tracks:
<div class="item">
<span class="position">1</span>.
<span class="fn">Sanity</span>
(<abbr class="duration" title="PT5M48S">5:48</abbr>)
</div>
<div class="item">
<span class="position">2</span>.
<span class="fn">Highway To Hell</span>
(<abbr class="duration" title="PT3M39S">3:39</abbr>)
</div>
</div>
</pre>

=== Multi-part Podcast Example ===

DigitalPlanet Podcast: 29 Oct 07

Forensic computing: is it really possible to delete data from your machine? Grand plans for getting broadband into Africa, checking out the sky at night via the internet and answering your emails to the programme.

Download MP3

<pre>
<div class="haudio">
<p>
<span class="fn">DigitalPlanet Podcast</span>
:
<abbr class="published" title="20071029">29 Oct 07</abbr>
</p>
<p>
<div class="item">
<span class="fn">Forensic computing: is it really possible to delete data from your machine?</span>
</div>
<div class="item">
<span class="fn">Grand plans for getting broadband into Africa</span>
</div>
,
<div class="item">
<span class="fn">checking out the sky at night via the internet</span>
</div>
and
<div class="item">
<span class="fn">answering your emails</span>
</div>
to the programme.
</p>
<p>
<a rel="enclosure" href="/download/episode/DigitalPlanet-2007-10-29">Download MP3</a>
</p>
</div>
</pre>

=== Opera Example ===

(This is a live example, detectable in parsers)

<div class="haudio" lang="en">
<span class="fn" lang="fr">La Bohème</span> is an <span class="category">opera</span> in four acts by <span class="contributor" lang="it">Giacomo Puccini</span> to an <span class="category">Italian liberetto</span> by <span class="contributor" lang="it">Luigi Illica</span> and <span class="contributor" lang="it">Giuseppe Giacosais</span>. I saw it performed last week and found <span class="item"> <span class="fn">Act III</span> to be pretty interesting, especially the <span class="item"> "<span class="fn" lang="it">Sa dirmi, scusi</span>"</span> and <span class="item">"<span class="fn" lang="it">O buon Marcello, aiuto!</span>"</span> arias.</span>
</div>

<pre>
<div class="haudio" lang="en">
<span class="fn" lang="fr">La Bohème</span>
is an
<span class="category">opera</span>
in four acts by
<span class="contributor" lang="it">Giacomo Puccini</span>
to an
<span class="category">Italian liberetto</span>
by
<span class="contributor" lang="it">Luigi Illica</span>
and
<span class="contributor" lang="it">Giuseppe Giacosais</span>.
I saw it performed last week and found
<span class="item">
<span class="fn">Act III</span>
to be pretty interesting, especially the
<span class="item">
"<span class="fn" lang="it">Sa dirmi, scusi</span>"
</span>
and
<span class="item">
"<span class="fn" lang="it">O buon Marcello, aiuto!</span>"
</span>
arias.
</span>
</div>
</pre>

== Examples in the wild ==

This section is '''informative'''.

* [http://en.wikipedia.org/wiki/Category:Articles_with_hAudio_microformats Wikipedia] has 119,555 songs and albums marked up in hAudio format.
* [http://weborganics.co.uk/haudio-rss/ hAudio-RSS] uses hAudio 0.9.1 and XSLT to generate an RSS2 Playlist.
* Tara Hunt of [http://openmediaweb.org/index.php/2008/01/13/publishing-my-workout-music-in-haudio/ Open Media Web] Published her workout Music in hAudio
* Grabb.it The web music player now uses hAudio 0.9 in its [http://grabb.it/users/greg user pages]
* [http://soundcloud.com/ SoundCloud] has hAudio in its pages.
* [http://populizer.com/ Populizer] also has hAudio in its pages.
* The [http://www.numblog.de/ New Urban Music Blog] has hAudio marked up in its pages.
* [http://alpha.libre.fm/ Libre.fm] has marked up on all its user pages in hAudio see : [http://alpha.libre.fm/user/weborganics example]

== Implementations ==

This section is '''informative'''.

*[http://weborganics.co.uk/files/js/haudio.js hAudio 0.9 script] for [[operator|Operator]], updated version of the original hAudio script by David Lehn.
* Matthias Pfefferle has made some [http://notizblog.org/projects/haudio-icons/ hAudio Icons]
* [http://microform.at/ Microformat TransFormr] extracts hAudio 0.9.1 as a RSS2 Podcast.
* [http://buzzword.org.uk/cognition/ Cognition] 0.1-α11 and above will parse hAudio 0.9 and export as RDF/XML or RDF/JSON. As of 0.1-α12, it will also export in M3U playlist format and Turtle.
* [http://weborganics.co.uk/mo-haudio/ hAudio Microformat to RDF Music Ontology], a [http://www.w3.org/TR/grddl/ GRDDL] profile for hAudio 0.9.1, producing [http://musicontology.com/ Music Ontology] RDF.
* The [http://singpolyma.net/plugins/actionstream/ wp-diso-actionstream] plugin produces hAudio for last.fm scrobbles
*...


== References ==
=== Normative References ===
* [http://www.w3.org/TR/2002/REC-xhtml1-20020801/ XHTML 1.0 SE]
* [http://gmpg.org/xmdp/ XMDP]
* [[hcard|hCard]]
* [[abbr-design-pattern]]
* [[currency-proposal]]
* [[datetime-design-pattern]]
* [[rel-design-pattern]]
* [[ISO-31-1|ISO-31-1/ISQ]]

=== Informative References ===
* [http://www.w3.org/TR/REC-CSS1 CSS1]
* ISO.8601.1988
** International Organization for Standardization, "Data elements and interchange formats - Information interchange - Representation of dates and times", ISO Standard 8601, June 1988.
* [http://www.w3.org/TR/1998/NOTE-datetime-19980827 W3C NOTE-datetime-19980827]
* [http://www.w3.org/Consortium/Patent-Policy-20040205/ W3C Patent Policy]
* Other audio metadata efforts. See [[audio-info-formats]].

==== Similar Work ====
* [[media-info]]
* [[grouping-examples]]
* [[grouping-brainstorming]]
* [[xoxo|XOXO]]

=== Copyright ===

This document and <span class="vevent"><span class="summary">hAudio specification was placed into the public domain</span> on <span class="dtstart">2008-11-14</span></span> by the authors. There are no usage, distribution, re-printing, or any other restrictions of any kind with regards to the text or content of this specification.

=== Patents ===

{{MicroFormatPatentStatement}}

=== Public Domain Release ===

The authors and editors of this page due hereby relinquish their copyright on the document and release the text of this page into the public domain.

* Manu Sporny - Signature /Manu Sporny/
* Alexandre Van de Sande
* [[User:WebOrganics|Martin McEvoy]]
* [[User:DavidLehn|David Lehn]] - Signature /David Lehn/
* [[User:AndyMabbett|Andy Mabbett]]

== Work in progress ==
This specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added.

== Related Pages ==
{{haudio-related-pages}}
* [[audio]] (other pages about Audio on this wiki)

[[Category:Draft Specifications]]

haudio-issues

2013-09-22T11:24:54Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

=hAudio issues=

These are externally raised issues about [[haudio|hAudio]] with broadly varying degrees of merit. Thus some issues are <em style="text-transform:uppercase;">rejected</em> for a number of obvious reasons (but still documented here in case they are re-raised), and others contain longer discussions. Some issues may be <em style="text-transform:uppercase;">accepted</em> and perhaps cause changes or improved explanations in the spec.

Submitted issues may (and probably will) be edited and rewritten for better terseness, clarity, calmness, rationality, and as neutral a point of view as possible.

== issues ==
<span id="Issues">Please add new issues</span> to the '''bottom''' of the list by copy and pasting the [[haudio-issues#Template|Template]]. Please follow-up to resolved/rejected issues with new information rather than resubmitting such issues. Duplicate issue additions will be reverted.

==2008==

=== D1: 2008-01-10 Contributor ===
<div class="vevent">
* {{ResolvedIssue}} D1: <span class="summary vcard"><span class="dtstart">2008-01-10</span> raised by <span class="fn">[[User:AndyMabbett|Andy Mabbett]]</span> in [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011340.html microformats-discuss/2008-January/011340.html]</span>
<div class="description">
*# the wording about <code>contributor</code> could be improved to facilitate more streamlined mark-up (see above e-mail for details).
*#* A resolution to this issue is outlined in this email http://microformats.org/discuss/mail/microformats-new/2008-August/001725.html
*#* ACCEPTED ISSUE The hAudio Contributor Specification is to be changed to:
*#** The element is identified by the class name |contributor|.
*#** hAudio /MAY/ include one or more contributors.
*#** The contributor's name SHOULD also be marked up as a valid hCard Microformat. <http://microformats.org/wiki/hcard>
*#**# The |role| attribute /SHOULD/ be used to specify the contributor's responsibility related to the audio recording if hCard is utilized.
*#** The contributor's name MAY be specified in plain-text without being enclosed in a hCard Microformat.
*#* REMOVED:
*#** If multiple contributors are specified, without |role| specifications, it /MAY/ be assumed that the first role mentioned is the primary artist or creator.
*#**# As proposed By [[User:ManuSporny|Manu Sporny]] in http://microformats.org/discuss/mail/microformats-new/2008-August/001725.html
</div>
</div>

=== D2: 2008-01-10 hAudio Title was Overloading "fn".===

<div class="vevent">
* {{ResolvedIssue}} D2: <span class="summary vcard"><span class="dtstart">2008-01-10</span> raised by <span class="fn">[[User:AndyMabbett|Andy Mabbett]]</span> in [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011342.html] </span>
<div class="description">
The "overloading" of <code>fn</code> for both the tile of a work and the name of a contributor causes problems (see above e-mail for examples). Another example of this problem is a table, where the "artist" column comes before the "title" column. For discussion, see also [http://microformats.org/discuss/mail/microformats-new/2008-January/001375.html microformats-new/2008-January/001375.html].
# Existing Resolution [[User:ManuSporny|Manu Sporny]] has propsosed that <code>"fn"</code> should be replaced with <code>"title"</code> see: [http://microformats.org/discuss/mail/microformats-new/2008-February/001468.html microformats-new/2008-February/001468.html]
#* +1 [[User:ManuSporny|Manu Sporny]] (first choice)
#* +1 [[User:ManuSporny|Sarven Capadisli]] (second choice)
# Resolution 1: [[User:WebOrganics|Martin McEvoy]] proposed change <code>"title"</code> to <code>"name"</code> see: [http://microformats.org/discuss/mail/microformats-new/2008-March/001555.html microformats-new/2008-March/001555.html]
# Resolution 2: [[User:WebOrganics|Martin McEvoy]] later propsosed that <code>"title"</code> should be replaced with <code>"htitle"</code> see: [http://microformats.org/discuss/mail/microformats-new/2008-August/001692.html microformats-new/2008-August/001692.html]
#* +1 [[User:ManuSporny|Manu Sporny]] (second choice)
#* +1 [[User:Csarven|Sarven Capadisli]] (first choice)
# Resolution 3: Use <code>"audio-title"</code> As tentatively proposed by [[User:ManuSporny|Manu Sporny]] see:[http://microformats.org/discuss/mail/microformats-new/2008-August/001692.html microformats-new/2008-August/001692.html]
# Resolution 4: Change <code>"title"</code> back to <code>"fn"</code> see: [http://microformats.org/wiki?title=haudio&diff=prev&oldid=25667]
#* +1 [[User:WebOrganics|Martin McEvoy]] Without Reservations see:[http://microformats.org/wiki?title=haudio-issues&diff=0&oldid=28703 haudio-issues&diff=0&oldid=28703]
#* +1 [[User:ManuSporny|Manu Sporny]] (third choice)
#* +1 [[User:DavidJanes]] this is the correct thing to do
#* +1 [[User:Csarven|Sarven Capadisli]] (third choice)
# Don't really care — just pick one. ;-)
#* +1 [[User:TobyInk|TobyInk]]
#* +1 [[User:ManuSporny|Manu Sporny]] - close this damn discussion, already! :)
* ACCEPTED ISSUE, RESOLUTION: Change <code>"title"</code> back to <code>"fn"</code> see: [http://microformats.org/discuss/mail/microformats-new/2008-September/001797.html microformats-new/2008-September/001797.html]
</div>
</div>

=== D3: 2008-01-10 Position. ===
<div class="vevent">
* {{ResolvedIssue}} D3: <span class="summary vcard"><span class="dtstart">2008-01-10</span> raised by <span class="fn">[[User:AndyMabbett|Andy Mabbett]]</span> in [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011343.html microformats-discuss/2008-January/011343.html]</span>
<div class="description">
*# The [http://microformats.org/wiki/haudio#Complete_Album_Example recommended use of "position" in hAudio] is contrary to the good practice, semantic use of ordered lists (see example and suggested solution in the above e-mail; also [http://microformats.org/discuss/mail/microformats-new/2008-January/001338.html] et seq)
*#* For Cognition I'm considering an extension: if no position has been explicitly marked up, and the item is <code><li class="item"></code> within an ordered list, then the position is taken to be the numerical value of the list marker. (To calculate the numerical value for the list marker, find the most recent sibling <code><li></code> element which has a <code>value</code> attribute. The numerical value is the number in that value attribute added to the count of <code><li></code> elements after that value attribute up to the current one. If there are no such <code><li></code> elements with <code>value</code> attributes, then you should assume that the <code>value</code> attribute of the first list item is equal to the <code>start</code> attribute of the ordered list itself, or "1" if there is no such <code>start</code> attribute. [[User:TobyInk|TobyInk]] 04:24, 29 Jul 2008 (PDT)
*#* A Proposed Resolution was made in this email: ( http://microformats.org/discuss/mail/microformats-new/2008-August/001751.html)
*#* ACCEPTED ISSUE The hAudio Position Specification is to be changed to:
*#** The element is identified by the class name |position|.
*#** hAudio /MAY/ include one |position| element.
*#** The contents of the element /MUST/ be a number or other sequential identifier.
*#** The sequential identifier /MAY/ be specified out-of-sequence.
*#* ADDED:
*#** The sequential identifier /MAY/ be specified out-of-sequence.
*#**# As proposed By [[User:ManuSporny|Manu Sporny]] in http://microformats.org/discuss/mail/microformats-new/2008-August/001708.html
*#* [[User:AndyMabbett|Andy Mabbett]] also Expressed concerns that the [[haudio#Complete_Album_Example|Complete Album Example]] should be marked up as an ordered list this is unnecessary as <code>"position"</code> is not related to the order of a track item in a list.
*#* A tutorial on the correct use of semantic ordered lists and hAudio is to be added to the [[haudio-authoring|hAudio Authoring]] Page
</div>
</div>

=== D4: 2008-01-10 rel-enclosure does not allow for links to streaming files ===
<div class="vevent">
* {{OpenIssue}} D4: <span class="summary vcard"><span class="dtstart">2008-01-10</span> raised by <span class="fn">[[User:AndyMabbett|Andy Mabbett]]</span> in [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011344.html microformats-discuss/2008-January/011344.html]</span>
<div class="description">
*# The required use of [[rel-enclosure]] does not allow for links to streaming files, which are not cacheable, and are thus outside the scope of rel-enclosure. [http://www.bbc.co.uk/radio4/science/livingworld_20041121.shtml An example on the BBC website] has the relevant link is below the heading "LISTEN AGAIN". (see discussion at [http://microformats.org/discuss/mail/microformats-new/2008-January/001339.html microformats-new/2008-January/001339.html] et seq).
*#* A proposal for this issue was first made in this email http://microformats.org/discuss/mail/microformats-new/2008-August/001715.html
*#* A second proposal for this issue has been made in this email http://microformats.org/discuss/mail/microformats-new/2008-August/001727.html
*#* This can potentially be solved by recognition of downloadable/streamable MIME types. For performance reasons it is undesirable for parsers to be required to make HTTP requests for each file to determine its MIME type, so authors should be encouraged to include the MIME type in the <code>type</code> attribute. See the [[haudio-brainstorming#Download_links|related section on "brainstorming"]]. [[User:TobyInk|TobyInk]] 14:41, 20 Aug 2008 (PDT)
*#* ACCEPTED ISSUE The hAudio Enclosure Specification is to be changed to:
*#** The element is identified by a URI fitting the rel-design-pattern, the rel content being enclosure.
*#** hAudio MAY include one or more enclosure URIs.
*#** The type of the file SHOULD be specified by using the type specifier for a URI.
*#* CHANGED:
*#** The type of the file MAY be specified by using the type specifier for a URI.
*#*** As suggested by [[User:Tantek|Tantek Çelik]] in this email http://microformats.org/discuss/mail/microformats-new/2008-August/001731.html
*#*** As Proposed by [[User:TobyInk|Toby Inkster]] on 14:41, 20 Aug 2008 (PDT)
*#* A tutorial on the importance of Type Specifiers and hAudio Enclosures is to be added to the [[haudio-authoring|hAudio Authoring]] Page
*#* BLOCKED: The [[rel-enclosure]] definition needs to be updated in order to allow specification of links to streaming files.
</div>
</div>

=== D5: 2008-01-10 there is no way of linking to an interim page ===
<div class="vevent">
* {{OpenIssue}} D5: <span class="summary vcard"><span class="dtstart">2008-01-10</span> raised by <span class="fn">[[User:AndyMabbett|Andy Mabbett]]</span> in [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011344.html microformats-discuss/2008-January/011344.html]</span>
<div class="description">
There appears to be no mechanism to mark up an hAudio, expressed in plain text on page A, which links to an interim page, B, which in turn links to a file download. For example, the radio shows listed on [http://www.westmidlandbirdclub.com/bibliography/radio].
</div>
# Resolution 1: re use <code>"url"</code> from [[hcard|hCard]].
#* +1 [[User:WebOrganics|Martin McEvoy]] all links are not clickable/hyperlinkable.
#* +1 [[User:TobyInk|TobyInk]]
# Resolution 2: use the rel <code>"bookmark"</code> [http://www.w3.org/TR/REC-html40/types.html#type-links HTML Link Type].
</div>

=== D6: 2008-01-10 hAudio notes inconsistency ===
<div class="vevent">
* {{ResolvedIssue}} D6: <span class="summary vcard"><span class="dtstart">2008-01-10</span> raised by <span class="fn">[[User:AndyMabbett|Andy Mabbett]]</span> in [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011345.html microformats-discuss/2008-January/011345.html]</span>
<div class="description">
*# [[haudio#Notes|The "Notes" section of the hAudio spec]] says "By marking up audio content with the hAudio microformat, the expectation is communicated that information about the content {{may}} be indexed. This has no impact on the copyright of the content itself which the publisher may explicitly specify using rel-license as specified above.". However, that is the first and only reference to [[rel-license]] on the page.
*#* Typing error changed to "By marking up audio content with the hAudio microformat, the expectation is communicated that information about the content MAY be indexed. This has no impact on the copyright of the content itself which the publisher may explicitly specify using the rel-license microformat". [http://microformats.org/wiki?title=haudio&diff=0&oldid=27951]
*#* hAudio Specification SHOULD include the [[rel-license]] microformat [[User:WebOrganics|Martin McEvoy]] 11:57, 18 Aug 2008 (GMT)
*#* A proposed resolution to this issue has been made in this email http://microformats.org/discuss/mail/microformats-new/2008-August/001720.html
*# RESOLVED <code>rel="licence"</code> is not part of this version of hAudio (0.9) see:http://microformats.org/discuss/mail/microformats-new/2008-August/001747.html
</div>
</div>

==2009==

=== D7: 2009-01-11 Endorsement of optimization patterns in schema listing too strong ===
<div class="vevent">
* {{ResolvedIssue}} D7: <span class="summary vcard"><span class="dtstart">2009-01-11</span> raised by <span class="fn">[[User:BenWard|Ben Ward]]</span>.</span>
<p class="description">The hAudio spec schema makes references to multiple optimization patterns (datetime pattern for <code>published</code>, abbr-pattern for <code>duration</code>). It is currently worded as to imply that those patterns ''must'' be used. Given past disagreement over ABBR in particular, I think the spec should avoid specific endorsement of any pattern, at the very least reducing references to patterns to clear ‘You ''may'' use the abbr-pattern with this field' sort of phrasing.</p>
# Resolution 1: Reword schema listing to use ''may'' language clearly.
#* +1 [[User:BenWard|Ben Ward]]
#* +1 [[User:TobyInk|TobyInk]]
#* +1 [[User:WebOrganics|Martin McEvoy]]
** RESOLUTION: The schema now uses ''may'' language more clearly
</div>

=== D8: 2009-01-11 Don't link to currency proposal ===
<div class="vevent">
* {{ResolvedIssue}} D8: <span class="summary vcard"><span class="dtstart">2009-01-11</span> raised by <span class="fn">[[User:BenWard|Ben Ward]]</span>.</span>
<p class="description">The hAudio spec schema makes reference to the currency proposal. Since that is still a proposal, the spec should not endorse it or encourage too-early adoption of it, especially since it's not even a ''draft'' at this stage. Should the currency work be completed, hAudio should be updated later, rather than linking it in pre-emptively.</p>
# Resolution 1: Remove reference to currency proposal from hAudio schema.
#* +1 [[User:BenWard|Ben Ward]]
#* +1 [[User:TobyInk|TobyInk]]
#* +1 [[User:WebOrganics|Martin McEvoy]]
** RESOLUTION: The hAudio no longer references the currency proposal, only cites it as an Informative reference at the bottom of the page.
</div>

==2010==

=== D9: 2010-06-11 hAudio duration and published should adopt the value-title pattern ===
<div class="vevent">
* {{OpenIssue}} D9: <span class="summary vcard"><span class="dtstart">2010-06-11</span> raised by <span class="fn">[[User:WebOrganics|Martin McEvoy]]</span>.</span>
<p class="description">[[haudio#Duration|hAudio Duration]] and [[haudio#Published|Published]] should adopt the value-title pattern like [[hrecipe#duration|hRecipe Duration]] and [[hatom-profile|hAtom]], to prevent the user from getting machine data in a tooltip.</p>
Example:
<pre><span class="duration">
3 minutes 33 seconds
<span class="value-title" title="PT3M33S">.</span>
</span></pre>
and....
<pre><span class="published">
February 06, 2007
<span class="value-title" title="2007-02-06">.</span>
</span></pre>

# Resolution 1: Adopt the value-title pattern for both hAudio Duration and Published.
#* +1 [[User:WebOrganics|Martin McEvoy]]
#* +1 [[User:AndyMabbett|Andy Mabbett]] via: [http://twitter.com/pigsonthewing/statuses/15935702988 Twitter]
</div>

==2012==

=== D10: 2012-02-13 hAudio sample and enclosure should support HTML5 audio ===

<div class="hentry">
* {{OpenIssue}} D10: <span class="entry-summary author vcard"><span class="published">2012-02-13</span> raised by <span class="fn">[[User:Panzi|Mathias Panzenböck]]</span>.</span>
<p class="description">[[haudio#Sample|hAudio Sample]] and [[haudio#Full_Download_.28Enclosure.29|hAudio Enclosure]] currently only support links to the audio files. Using the HTML5 audio tag it would be possible to embed the audio file directly in the page. The "sample" and "enclosure" markup would then be used as classes of the audio element.</p>
Example:
<pre><audio class="sample" src="sample.mp3" controls/></pre>
Or when specifying a fallback list of audio files:
<pre><audio class="enclosure" controls>
<source type="audio/ogg" src="song.ogg"/>
<source type="audio/mp4" src="song.m4a"/>
<source type="audio/mpeg" src="song.mp3"/>
</audio></pre>

# Resolution 1: Support "sample" and "enclosure" as classes of HTML5 audio elements.
#* +1 [[User:Panzi|Mathias Panzenböck]]
</div>

=== D11: 2012-04-30 Add start time field ===
<div class="hentry">
* {{OpenIssue}} <span class="entry-summary author vcard"><span class="published">2012-04-30</span> raised by <span class="fn">[[User:James Fryer|James Fryer]]</span></span>
<p class="description">In our application we are using hAudio to represent tracks within an hour-long radio show. Although
the duration field is useful, we'd also like a start-time field. This would handle situations where there
is speech between tracks, so the actual duration of the track does not correspond to the time when the next track begins.
</p>
</div>

==template==
{{issues-format}}

==see also==
*[[audio-info-issues]]

==related pages==
{{haudio-related-pages}}

datetime-design-pattern-fr

2013-09-22T11:23:02Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title> Datetime Design Pattern </entry-title>

Ceci est une page pour explorer un pattern de design pour la date et l'heure.

== Intention ==
* Utiliser le [[datetime-design-pattern-fr|datetime-design-pattern]] pour faire que les dates et heures puissent être lisibles pour des humains et aussi lisibles formellement par des machines.
* Utilser le [[value-class-pattern-fr|modèle de classe value]] pour les dates et heures pour une meilleure accessibilité.

== Besoin Pratique ==
* Ce modèle de design a émergé comme un résultat pour résoudre le besoin pratique pour des dates et horaires lisibles par les humains pour le microformat [[hcalendar-fr|hCalendar]].

== Comment l'utiliser ==
* envelopper le date-horaire lisible-par-les-humains que vous voulez pour le rendre lisible par une machine avec <code><abbr></code>
* comme selon le [[class-design-pattern-fr|class-design-pattern]], ajoutez l'attribut <code>class</code> approprié à l'élément <code>abbr</code>
* ajoutez un attribut <code>title</code> à l'élément <code>abbr</code> avec le datetime ISO8601 lisible par une machine ou date comme la valeur.

Pour les dates-horaires ISO8601, utilisez à la place le [[value-class-pattern-fr|modèle de classe value]] pour une meilleure accessibilité.

== Usages actuels ==
Le modèle désormais disponible faisant partie de [[hatom-fr|hAtom]], de [[hcalendar-fr|hCalendar]] et [[hreview-fr|hReview]] est :

:<pre><abbr class="foo" title="AAAA-MM-JJTHH:MM:SS+ZZ:ZZ">Date Heure</abbr></pre>

où "foo" est le nom de classe sémantique qui est appliqué à ces date/heure, le titre de l'<abbr> est une date/heure ISO 8601, avec un niveau approprié de spécificité, et "Date Heure" est une représentation conviviale et humaine de la même date et heure.

Une alternative, si vous utilisez des chronodatages basés sur UTC, serait :

:<pre><abbr class="foo" title="AAAA-MM-JJTHH:MM:SSZ">Date Heure</abbr></pre>

avec un "Z" unique comme selon [[iso-8601-fr|ISO 8601]]

<strong>Note :</strong> les chaînes title de la forme "AAAA-MM-JTHH:MM:SSZ" peuvent être difficiles à lire et comprendre pour les humains, de ce fait, utilisez le [[value-class-pattern-fr|modèle de classe value]] pour les dates heures.

=== Ruby ===
Ruby : Un moyen facile d'avoir ce format à partir d'une DateHeure est ceci :
:<pre>DateTime.now.to_s</pre>

Ou alternativement, si vous travaillez avec des objets Time :
<pre>require 'time'
Time.now.iso8601</pre>

== Profil de ISO8601 ==
Tout [[microformat-fr|microformat]] utilisant le date-time-design-pattern {{should-fr}} utiliser un profil [[iso-8601|ISO8601]]. Il existe actuellement deux profils largement utilisés qui DEVRAIENT être réutilisés.

* RFC 3339
* [http://www.w3.org/TR/NOTE-datetime W3C Note sur les Datetimes]

==problématiques d'accessibilité==

Notez aussi que les problématiques d'accessibilité ont considérablement diminué, et ont été même élimnées au moment d'utiliser le [[date-design-pattern-fr|date-design-pattern]], un sous-ensemble du [[datetime-design-pattern-fr|datetime-design-pattern]].

== Discussion ==
<strong>Cette section a besoin d'un jardinage significatif, et peut-être qu'archiver les discussions qui sont initialement historiques, comme le [[value-class-pattern-fr|value-class-pattern]] sert à résoudre la plupart des problématiques soulevées ici. [[User:Tantek|Tantek]] </strong>

Est-ce que cela ne pourrait pas être vu comme un microformat en soi ?

--[[User:DimitriGlazkov]]

Ce le pourrait, mais inventer un microformat pour la recherche d'inventer un microformat va à l'encontre des principes des microformats.
S'il existe un problème spécifique du vrai monde (et des cas d'utilisation) qu'un tel microformat élémentaire résoudrait, alors ça vaudrait la peine de considérer ça.

A ce stade, alors il est mieux de conserver le concept datetime simplement comme un modèle de design de microformat <abbr> datetime pour être utilisé dans de _véritables_ microformats qui ont un besoin pratique démontré.

-- [http://tantek.com/log/ Tantek]

Extrait de #microformats le 18 août. Editez svp !

<pre>
Aug 18 15:16:14 <Tantek> DanC, what do you think of RFC3339?
Aug 18 15:17:14 <Tantek> ISO8601 subset
Aug 18 15:17:19 <DanC> Date and Time on the Internet: Timestamps http://www.ietf.org/rfc/rfc3339.txt
Aug 18 15:17:30 <DanC> Klyne is a good guy. I wonder if I talked with him about this.
Aug 18 15:17:32 <Tantek> compat with W3C-NOTE-DATETIME
Aug 18 15:17:50 <Tantek> compat with xsd:dateTime
Aug 18 15:17:57 <Tantek> it's a strict intersection subset
Aug 18 15:17:59 <DanC> I consider W3C-NOTE-DATETIME obsoleted by XML Schema datatype-- yeah.. xsd:dateTime
Aug 18 15:18:32 <Tantek> compare/contrast normatively using xsd:dateTime vs. RFC3339
Aug 18 15:18:41 <Tantek> note: Atom 1.0 chose RFC3339
Aug 18 15:18:50 <Tantek> i would like input from the microformats community on this
Aug 18 15:19:27 <DanC> in what context are you evaluating RFC 3339?
Aug 18 15:19:28 <jcgregorio> http://bitworking.org/news/Date_Constructs_in_the_Atom_Syndication_Format
Aug 18 15:21:24 <DanC> which microformat is the question coming from, Tantek ?
Aug 18 15:23:31 <DanC> " The grammar element time-second may have the value "60" at the end of
Aug 18 15:23:31 <DanC> months in which a leap second occurs" The XML Schema WG is in the 27th level of
leap-second-hell for the past few months, I gather.
Aug 18 15:24:21 <DanC> yeah... here's the scary bit: " Leap seconds cannot be predicted far into the
future. The
Aug 18 15:24:21 <DanC> International Earth Rotation Service publishes bulletins [IERS] that
Aug 18 15:24:21 <DanC> announce leap seconds with a few weeks' warning."
Aug 18 15:26:03 <Tantek> DanC, which microformats? any/all that use datetime fields.
Aug 18 15:26:36 <DanC> hard to give useful advice, then.
Aug 18 15:26:58 <DanC> I expect they'll use datetime fields for different things that have different
cost/benefit trade-offs
Aug 18 15:27:26 <DanC> do you know of any particular differences that matter to anybody?
Aug 18 15:56:43 <KragenSitaker> RFC3339 suggests -07:00, which seems like an improvement over -0700 anyway
Aug 18 15:56:49 <Tantek> Kragen, agreed
Aug 18 15:57:01 <Tantek> RFC3339 is certainly preferable to the ISO8601 subset in iCalendar
Aug 18 16:05:57 <DanC> Tantek's right, Kragen; iCalendar looks like it solves the local timezone
problem but doesn't.
Aug 18 16:06:14 <DanC> and it's true that there's no standard solution to the local timezone problem
Aug 18 16:06:39 <Tantek> so instead of appearing to solve the problem but not solving it, we chose to
provide the ability to *approximate* the local timezone using e.g. "-07:00"
Aug 18 16:06:49 <DanC> the simplest thing is to have people use Z time in hCalendar. But I gather
that's unacceptably unusable?
Aug 18 16:07:35 <Tantek> DanC, yes, the simplest thing is to have everyone use UTC Z
Aug 18 16:07:38 <Tantek> However
Aug 18 16:07:50 <Tantek> it is not *nearly* as usuable/verifiable
Aug 18 16:07:55 <Tantek> as -07:00 etc.
Aug 18 16:08:02 <Tantek> hence the decision to go with the latter
Aug 18 16:08:12 <Tantek> some degree of human verifiability is important here
Aug 18 16:14:21 <Tantek> DanC, my perception is that RFC3339 is a subset
Aug 18 16:17:00 <DanC> time-numoffset = ("+" / "-") time-hour ":" time-minute
Aug 18 16:17:34 <DanC> ok, then I can't see any differences. (modulo recent leap seconds issues that
may affect xsd:dateTime )
Aug 18 16:18:07 <Tantek> would be interesting to know why Atom 1.0 chose RFC3339 over xsd:dateTime
Aug 18 16:18:21 <Tantek> if there was a "real" reason or if it was arbitrary / coin-flip.
</pre>

Here's an exhaustive [http://www.imc.org/atom-syntax/mail-archive/msg13103.html comparison] from ndw. I think xsd:dateTime also allows unqualified local times, while RFC3339 allows only UTC with no known timezone (-00:00). In the end, Atompub followed the advice of [http://www.imc.org/atom-syntax/mail-archive/msg13244.html Sam Ruby] and [http://www.imc.org/atom-syntax/mail-archive/msg13248.html Scott Hollenbeck], our area director. Atom dates make some additional restrictions on RFC3339, such as uppercase T and Z characters for compatibility with xsd:dateTime, RFC3339, W3C-DTF, and ISO8601. --[http://franklinmint.fm Robert Sayre]

<pre>
Aug 18 16:18:43 <KragenSitaker> rfc3339 is pretty short.
Aug 18 16:19:36 <Tantek> DanC, BTW, which came first? REC for xsd:dateTime or RFC3339?
Aug 18 16:19:50 <DanC> RFC3339 is dated July 2002 ...
Aug 18 16:19:54 <KragenSitaker> Right --- and you might be able to understand xsd:dateTime without
reading all of xml schema, you wouldn't be confident of it
Aug 18 16:20:25 <DanC> W3C Recommendation 28 October 2004 ... but that's 2nd ed...
Aug 18 16:20:47 <DanC> W3C Recommendation 02 May 2001
Aug 18 16:22:10 <DanC> I don't see a BNF in http://www.w3.org/TR/2001/REC-xmlschema-2-20010502/#dateTime ...
Aug 18 16:22:43 <KragenSitaker> yeah, appendix D of the current xml schema datatypes document seems
a little scanty, actually
Aug 18 16:23:28 <DanC> ah... 2nd ed of http://www.w3.org/TR/xmlschema-2/#date is much more
explicit about syntax.
Aug 18 16:23:30 <KragenSitaker> it's 1100 words but still doesn't give any examples
Aug 18 16:23:35 <DanC> still, it's given in prose and not BNF
Aug 18 16:24:17 <KragenSitaker> sections 3.2.9 through 3.2.14 seem to be the relevant ones around #date
Aug 18 16:24:29 <KragenSitaker> which is another 2200 words
Aug 18 16:24:42 <DanC> wow... they changed the canonical form of date from always-Z to
timezone-allowed between 1st edition and 2nd edition
Aug 18 16:25:01 <Tantek> Kragen, DanC, these are very good analyses
Aug 18 16:25:21 <Tantek> could I ask you to summarize the pros/cons for each in a new section at
end of http://microformats.org/wiki/datetime-design-pattern
Aug 18 16:25:22 <Tantek> ?
Aug 18 16:25:58 <KragenSitaker> rfc 3339 is 4000 words, excluding the last two pages of boilerplate.
Aug 18 16:26:31 <KragenSitaker> so it's actually longer than the datetime-relevant parts of XSD but it
seems much more rigorous and clear
Aug 18 16:28:37 <DanC> my advice is: normatively cite both, and claim they specify the same
syntax, and let anybody who discovers otherwise send you a bug report
with a test case
Aug 18 16:29:12 <KragenSitaker> danc: nice hack
</pre>

The RFC3339 has a mandatory TIME portion of the DATE-TIME. Some vCard/iCalendar DATE-TIME stamps can omit the TIME. For instance, DTSTART, if that is a full day event, then you can omit the time. BDAY in vCard can be respresented by only a DATE. I like the idea of restricting the possible date formats, but i think that TIME should be optional, which it isn't in RFC3339. - [http://suda.co.uk/ brian suda]

RFC 3339 allows lowercase 't' and 'z' while XSD doesn't. Specifying RFC 3339 plus 'T' and 'Z' MUST be caps will make them the same. - [http://bitworking.org Joe Gregorio]

---

A few questions: asked by [[User:CharlesBelov|CharlesBelov]] 16:57, 24 Apr 2007 (PDT), answered by [[User:JamesCraig|JamesCraig]] on 15:58, 5 Jul 2007 (PDT).

# Would it make more sense for documenting the alternative codings pitting the abbr tag vs. other tags to be on this page? ''Answer: That documentation should go on the [[assistive-technology-abbr-results]] page.''
# Would using the title attribute of the abbr tag to encode the machine-readable date in fact cause a failure of WCAG 2.0 Accessibility? What about USA Section 508? It does appear to violate Technique for WCAG 2.0 [http://www.w3.org/TR/WCAG20-TECHS/#H28 H28: Providing definitions for abbreviations by using the abbr and acronym elements], although that is a supporting document and does not have the force of a guideline. ''Answer: Yes, it appears that is in violation of WCAG, 508, et al, so alternatives are being discussed on the [[assistive-technology-abbr-results]] page.''
# In order to maintain accessibility, would it make sense to enclose the machine-readable date in a span with a style of "display:none" instead of using the abbr tag? ''Answer: please refer to and add any suggestions to [[assistive-technology-abbr-results]].''
# For that matter, wouldn't you want to style such an abbr tag with text-decoration:none to hide that an abbr tag was used? Otherwise, visitors might cursor over the time, see the machine time, and be annoyed that their time was wasted or else be confused. And I don't think you can suppress the title from coming up if the human-readable time was inadvertently hovered. ''Answer: Microformats should not rely on CSS in order to work properly, but again, that discussion can be found here: [[assistive-technology-abbr-results]].''

== Code ==
L'expression régulière suivante (parsé VERBOSE) devrait démonter à part un datetime et couvrir beaucoup de cas légèrement cassés vus dans la jungle. Ceci a été testé sous Python.

<pre><nowiki>
^
(?P<year>\d\d\d\d)
([-])?(?P<month>\d\d)
([-])?(?P<day>\d\d)
(
(T|\s+)
(?P<hour>\d\d)
(
([:])?(?P<minute>\d\d)
(
([:])?(?P<second>\d\d)
(
([.])?(?P<fraction>\d+)
)?
)?
)?
)?
(
(?P<tzzulu>Z)
|
(?P<tzoffset>[-+])
(?P<tzhour>\d\d)
([:])?(?P<tzminute>\d\d)
)?
$
</nowiki></pre>

== Autres Propositions ==
'''Cette section a besoin avant traduction de beaucoup de nettoyage. Les propositions ont été relativement rejetées, on besoin de migrer sur une autre section (ou peut-être une page) avec des résumés succincts des raisons pour lesquelles elles sont intenables/infaisables/indésirables.

Les propositions restantes ont besoin de migrer vers les propres pages de brainstorming où elles peuvent être considérées dans un contexte plus large.

Les liens vers toutes les propositions (qu'elles soient relativement rejetées ou possiblement étudiées) devraient être conservés dans cette page à des fins de comparaison pour ce cas d'usage.

[[User:Tantek|Tantek]] 04:50, 4 Sep 2008 (PDT)'''

=== instructions strtime comme noms de classes ===
Proposal by DavidLaban (alsuren on freenode) on 8 Jun 2008
It might be possible to have a slightly more readable/extensible/elegant format:
<pre><nowiki>
<span class="strtime format:_%d_%B_%Y_" > 16 March 1987 </span>
</nowiki></pre>
Notes:
# Underscores are used to replace whitespace, because otherwise the the formatting string will be split into an unordered set of class attributes by many parsers (thanks go to bogdanlazarsb and gsnedders on irc for explaining this to me).
# Some subset of the placeholders should be chosen from those which are supported by both python http://docs.python.org/lib/module-time.html and php http://uk3.php.net/manual/en/function.strftime.php
# A name for the class should be decided upon. strtime might not be the best name.
# Measures should be taken to avoid the format string accidentally conflicting with other valid classes (In the above example, I have prefixed it with the string "format:")
# It might be sensible (when parsing) to strip excess whitespace from the format string and contents. This is not done in this example.
# Example python code follows.

<pre><nowiki>
date = (1987,03,16,0,0,0,0,0,0)
format = " %d %B %Y "
# To encode:
classes = ["strtime"]
encoded_format = "format:" + format.replace(' ', '_')
classes.append(encoded_format)
content = time.strftime(format, birthday)
# ... dump classes and content into your document however you want

# To decode (assuming that you have managed to extract class and format from the document already):
if "strtime" in classes:
possible_formats = [ item for item in classes if item.startswith('format:') ]
assert len(possible_formats) == 1
format = possible_formats[0].strip('format:').replace('_', ' ')
date = time.strptime(content, format)
</nowiki></pre>

==== problèmes avec la propositon strtime ====

# Possible abuse of the class attribute. microformats limit the use of the class attribute to marking up additional semantics about the data, not for (potentially) arbitrary processing/programming instructions
#* HTML 4.01 Recommendation [http://www.w3.org/TR/REC-html40/struct/global.html#adef-class defines] the <code>class</code> attribute as being "for general purpose processing by user agents". [[User:TobyInk|TobyInk]] 13:21, 8 Jun 2008 (PDT)
# Requires authors to think like programmers. The larger problem is that the proposal asks web authors to think like programmers, which severely limits the number of web authors which will be able to use the technique, since the vast majority of web authors are ''not'' programmers and have never heard of "strtime", whereas most authors (even people) on the web have seen dates like 2005-06-20 and easily understand what they mean.

In general, any publishing method that requires the author to think like a programmer is a non-starter. It is a much more of a barrier than simply using ISO8601/RFC3339, and that barrier is a far worse tradeoff than the duplication / DRY violation compromise.
[[User:Tantek|Tantek]] 09:52, 8 Jun 2008 (PDT)

* Another problem: if %A/%a/%B/%b are allowed, this raises potential problems with internationalisation. Will parsers be required to understand the names and abbreviations for days and months in potentially hundreds of different languages? [[User:TobyInk|TobyInk]] 14:09, 8 Jun 2008 (PDT)

=== donnée-machine dans la classe===
The BBC ([http://microformats.org/discuss/mail/microformats-dev/2008-June/000552.html uf-dev archive, 20/06/08, "Using class for non-human data"]) has proposed as an alternative to the empty span and title solution to use the class name in the following way:
<pre><nowiki>
<span class="dtstart data-20051010T10:10:10-0100">10 o'clock on the 10th</span>
</nowiki></pre>
Pros:
* Allows data to be represented in a "non-harmful" way. Will not be read aloud by screenreaders or seen as tooltips.
* Minimizes mark-up used.
* Arguably more semantic than use of "title" attribute for non-human data.

Cons:
* data in the class attribute has already been discussed numerous times in the mailing list over the years and rejected and documented as an [[anti-pattern]] - captured [http://microformats.org/wiki?title=anti-patterns&diff=24271&oldid=24270 on the wiki this past January 2008].
* Possible misuse of class attribute, although as noted previously, the HTML spec states "for general purpose processing by user agents".
* The class attribute has been adopted by the broader web design community to "subclass" element semantics, and to layer additional semantics. To date, microformats has followed this existing practice developed by modern web designers ("paving the cow-paths"). This use of class for data is outside all current practices.

Discussion:
* This proposal smells icky, but I can't quite put my finger on why. Considered objectively, it does seem to be the least harmful solution proposed so far. [[User:TobyInk|TobyInk]] 06:06, 21 Jun 2008 (PDT)
* I really like it, especially given the HTML4 spec gives this as an IMO perfectly valid use (on both id and class, with the following examples given in the id section: "identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc."). Clean and simple. [[User:Dracos|Dracos]] 03:53, 23 Jun 2008 (PDT)
* I suggest dropping the redundant 'data-' prefix, unless someone can suggest a feasible case with two time-stamps requiring different prefixes. The proposal then becomes [http://www.robertnyman.com/2008/04/28/do-we-really-need-microformats/#comment-263408 one I've made before] [[User:AshSearle|AshSearle]]
** Valid class names cannot begin with a number, so a date needs some sort of letter prefix. It's sensible to make this prefix meaningful and reusable in some way. [[User:Phae|Phae]]
*** They can't in CSS, but they can in (X)HTML. http://examples.tobyinkster.co.uk/numeric-classes.html [[User:TobyInk|TobyInk]] 06:53, 24 Jun 2008 (PDT)
**** Creating classes in HTML that can't be referenced in CSS is a bad thing. Using colons and starting with numbers fall into that category. http://www.w3.org/TR/CSS21/syndata.html#characters Also, replacing whitespace with underscores breaks the ISO compatibility, which sorta defeats the whole point of using existing standards. Finally the class names are unordered, so trying to use them in a series is a bad idea. --[[User:Atamido|Atamido]] 11:43, 30 Jul 2008 (PDT)
***** They can be referenced in CSS, just not using the "dot notation". They can be referenced using attribute selectors, which are supported in all modern browsers (but not IE6). [[User:TobyInk|TobyInk]] 13:21, 30 Jul 2008 (PDT)
****** They could also be referenced by escaping the characters, but that still excludes >99% of current use cases. I'd wager that most authors don't even know about the limitations and would run into issues in implementation. --[[User:Atamido|Atamido]] 13:47, 30 Jul 2008 (PDT)
***** I don't think the proposal relies on classes being in any particular order. Even if it did, I don't know of any DOM implementations which do not provide the contents of the class attribute in their original order. [[User:TobyInk|TobyInk]] 13:21, 30 Jul 2008 (PDT)
** Not to advocate too strongly for designing for parsers (generally a bad idea), *but* having a 'data-' prefix on a class name would make identifying data orders of magnitude easier for parsing. Otherwise, how do we know what's data and what's just another class name for some other purpose? [[User:DrewMcLellan|Drew]]
** A 'data-' prefix would help authors tasked with maintaining or reviewing a page to understand the purpose of a class name that may have been applied by another author. The data prefix communicates very simply that the class name is precisely that, data. Therefore the value is less likely to be accidentally removed or changed, making for a more robust design. [[User:DrewMcLellan|Drew]]
*** I concede - regardless of whether it's valid (X)HTML / CSS - a prefix is needed to distinguish data values from genuine content. ISO 8601 allows date-time to be as simple as "2004", which could easily be misinterpreted. e.g. if a CMS outputs product model numbers into the class attribute for some other purpose. --[[User:AshSearle|AshSearle]] 01:42, 25 Jun 2008 (PDT)
*** Using <code>data-</code> as the prefix here is undesirable, as it now conflicts with HTML5's proposed <code>-data</code> prefix on attributes. It's undesirable to set ourselves up for future confusion with our own conflicting specification of ‘a data prefix’. A different prefix should be considered. See: [http://www.w3.org/html/wg/html5/#custom HTML5 Editors Draft: Embedding Custom Non-Visible Data] —[[User:BenWard|BenWard]] 07:34, 16 Jul 2008 (PDT)
* -1 [[User:Tantek|Tantek]]. I'm vehemently opposed to putting data in the class attribute. We ''must'' find better alternatives. We must not go down the path of invisible (dark) (meta)data - IMHO that [[principle]] is inviolable for microformats.
** [[User:JakeArchibald|JakeArchibald]] If you're so opposed, it'd be useful to see some justification.
*** See above cons. Already discussed/rejected many times in the history of microformats discussions. In short, quit wasting time on old ground. Abuses class attribute, or if you prefer, introduces a *new* use of the class attribute, unlike microformats to-date which have simply made use of a well established semantic of the class attribute. And worst of all, completely violates the visible data [[principle]]. Rejectable on that alone.
**** The fact that something has been discussed and rejected before is not sufficient grounds for dismissing it out of hand once additional research and thinking has taken place. The <abbr> datetime pattern arguably abused the title attribute and introduced a new use of the title attribute. In the example given (<code><nowiki><span class="dtstart data-20051010T10:10:10-0100">10 o'clock on the 10th</span></nowiki></code>), the data is presented as "10 o'clock on the 10th" - very visible. Yes, of course, it's possible to abuse this proposed pattern, and hide the data, but the same can be said of the abbr pattern or even the class pattern given CSS's display:none property. Experience shows that in most cases, people ''won't'' abuse the pattern to hide data, as they actually ''want'' to show the data on their pages. [[User:TobyInk|TobyInk]] 13:52, 24 Jun 2008 (PDT)
***** There has been no new "additional research and thinking" shown yet for data in the class attribute since it was originally proposed years ago, thus, it should be dismissed until that burden of reintroduction is met. [[User:Tantek|Tantek]] 22:05, 24 February 2009 (UTC)
**** It's not an abuse of the class attribute according to the HTML spec. as I read it. Whereas using title for non-human data is (the spec says audio agents may read it aloud, for example). If it's a new use, it's one the writers of HTML4 considered, so it wasn't new to them. [[User:Dracos|Dracos]] 03:38, 25 Jun 2008 (PDT)
** Relevant principles are 'humans first, machines second', and 'visible data is ''better'''. These are ''preferences'', not inviolable principles. Besides, the existing datetime spec doesn't adhere to these principles anyway: prioritising humans first, <code><nowiki>let's discuss this at the next meeting</nowiki></code> should be marked up as <code><nowiki>let's discuss this at the <abbr title="28th June 2008 at 3:15pm">next meeting</nowiki></code>. There's a conflict between human- and machine-readable dates. It makes more sense to 'hide' the machine-readable data in the only attribute available to us: <code>class</code>. --[[User:AshSearle|AshSearle]] 03:02, 25 Jun 2008 (PDT)
*** Indeed - by their nature, ''principles'' are ''generalisations'', and while broadly useful, usually have exceptions. After experience, the microformats community is beginning to see some of these. Human vs machine dates is the one gathering the most interest at the moment, largely thanks to <abbr class="help" style="border-bottom:1px dotted" title="the Web Standards Project">WaSP</abbr> and <span class="help" style="border-bottom:1px dotted" title="the BBC">auntie</span>, but I think other properties which will probably emerge as exceptions to the general microformats principles are hReview's <code>type</code> property, and the its namesake subproperty for hCard's <code>tel</code>, <code>email</code> and <code>adr</code> (and <code>label</code>?) properties. [[User:TobyInk|TobyInk]] 12:51, 25 Jun 2008 (PDT)
**** Unless you can provide better principles, it is not reasonable to violate the principles. When principles are in conflict, then one must make reasoned cases for the various possibilities (that uphold one principle but perhaps violate another). [[User:Tantek|Tantek]] 22:05, 24 February 2009 (UTC)

==== support expérimental parseur ====

[http://buzzword.org.uk/cognition/ Cognition 0.1 alpha 10] will include experimental support for this pattern, and the [http://srv.buzzword.org.uk Cognition web service] already does. Notes:
* Support is ''opt-in''. Publishers must explicitly request support for the pattern, by including a [[profile-uris|profile URI]] of <code><nowiki>http://purl.org/uF/pattern-data-class/1</nowiki></code> in their document head.
* Support is not limited to date-time properties, but any microformat properties.
* data-X classes must use percent-encoding to encode spaces and other characters not allowed in class names.
* The data-X class must be found on the same element as the microformat property class. That is, you cannot use: <pre><nowiki><span class="dtstart"><span class="data-20051010T10:10:10-0100">10 o'clock</span></span></nowiki></pre>
<ul><li>Multiple data-X classes may occur on the same element. When these are found, the longest string is used. This allows for: <pre><nowiki><span class="dtstart data-2005 data-200510 data-20051010">The 10th</span></nowiki></pre> which may be useful for styling or other non-microformat purposes.</li>
<li>Can be combined with value excerpting. e.g. <pre><nowiki>
<p class="dtstart">
The concert will be held on
<span class="value data-20080804">the 4th of August</span>
starting at
<span class="value data-T193000">7:30pm precisely</span>.
</p>
</nowiki></pre></li></ul>

=== séparation date et heure en utilisant l'extraction de value ===
Moved to [[value-excerption-pattern-brainstorming#date_and_time_separation|value excerption pattern brainstorming]] which is a better way of thinking about this.

=== élement HTML 5 <code><time></code> ===
[http://microformats.org/wiki/hcalendar-issues#html5-time-element See hCalendar issues]

=== Plain Old English alternative to ISO date ===
Example (in English):

<pre>
<abbr title="January 25th, 2008" class="dstart" lang="en-us">1/25</abbr>
</pre>

<pre>
<span class="dstart">January 25th, 2008</span>
</pre>

If <code>lang="en-us"</code>, the format of the date used in the <code>title</code> attribute must conform to [http://www.ego4u.com/en/cram-up/vocabulary/date/written dates writing rules in American English].

Example (in French):

<pre>
<abbr title="25 Janvier 2008" class="dstart" lang="fr">25/1</abbr>
</pre>

If <code>lang="fr"</code>, the format of the date used in the <code>title</code> attribute must conform to date writing rules in French.

====avantages====

* Human-hearable: should work nicely with screen readers (to be tested).
* Human-readable
* Compliance with semantics of abbr.
* Very easy to use by HTML human authors.
* DRY compliant if HTML human authors are willing to write in correct English

==== inconvénients ====
Most extracted from discussion below.
* huge requirement of knowledge of locale-specific information in implementations
* very high complexity of implementation , perhaps even impossible, due to the knowledge required
* unreliability in general: "Getting it wrong would be worse than not getting it at all! "
* unreliability in mixed locale content
* unreliable according to implementation experience to date (see discussion below)
* authoring drift, NLP arms race. because proposal looks like natural language, authors will try any natural language format.
* widespread implementer objection to NLP based solutions

====Discussion====
* Locale-specific parsing logic.
* Not all cultures use the same calendar — Dan Brickley
* There are situations where markup clues used for localisation might be misleading, such as people using microformats in a post on a site they do not themselves run that may even be in a different country. (a shared blogging site that allows html tags in posts would be a good example here) — Michael MD
** Couldn't the person or tool adding the microformat annotation also add a lang attribute at the same time? — Benjamin Hawkes-Lewis
* Cognition already supports this as a last ditch attempt at parsing dates - but I wouldn't recommend it get adopted widely. It's too unreliable; too much work to deal with internationalisation; too much work full-stop in languages that don't provide a handy library that takes care of most of the work. — [[User:TobyInk]]
** I don't think we need to support all locales at once. I don't know in how many written languages BBC publishes in, but it might be that supporting en-uk and en-us might be enough for a start. Also, one can imagine that Microformats tools could focus on the most common written languages and then expose hooks for others to implement support for other locales. — Guillaume Lebleu
** What are our priorities? Making programmers' life easier or making content authors and content readers' life easier? — Guillaume Lebleu
*** In Australia dd/mm/yyyy is commonly used, but a significant minority of sites in Australia use US-style mm/dd/yyyy because it is the default setting in their CMS. How would a parser be able to tell which part is the day and which is the month? Getting it wrong would be worse than not getting it at all! Until the use of ambiguous formats can be ''wiped out'' we ''will'' need a version for machines! — Michael MD
*** problem which hasn't been raised with regards to this proposal is that even though you are proposing a fixed date format, because it *looks* like natural language, authors will assume that it *is* natural language, and simply start including dates in whatever format they like. Then you get an NLP "arms race" between publishers and parsers. If you don't believe that that will happen, take a look at what happened with RFC 822 dates, which are simply a mess. — [[User:TobyInk]]
**** Very true the more you make the date look like natural language, the less it looks like a fixed format. I really don't want us to get involved in any form of NLP, it just would not work. I think it was Mike who said that dates have to be parsed correctly, no level of error is acceptable. I don't want to travel to an event on the wrong day because a parser got the date wrong — Glenn Jones

====Notes====
* Could work alongside with the existing [[datetime-design-pattern]]: if ISO date parsing fails, try parsing the title as a human-readable plain old English/French/... date according to the locale.

===élément <code><object></code> pour représenter des dates===
* Re-raised by George Brocklehurst on June 25th 2008.

The idea was to do something like this:

<pre><code><object data="20050125">January 25</object></code></pre>

* From what Tantek [http://tantek.com/log/2005/01.html said on his blog] , the main reason for not using objects was that they were not well supported in Safari. However, Safari's object support is now much improved: fallbacks are supported and display:inline and intrinsic sizing will work correctly. Safari 2.0.2, which came out in November 2005, was the first version to [http://webkit.org/blog/32/webkit-fixes-in-safari-202-mac-os-x-1043/ contain these improvements]. — George Brocklehurst
* The following appears to be well behaved inline in Safari 2.04 and 3.1.1, Firefox 1, 1.5, 2 and 3, and Opera 7, 8 and 9: <code><object class="dtstart" data="data://20080712"></object></code>. Test case: http://pastie.org/224023 — Ben Ward
** IE 6, 7 and the beta version of IE 8 all visibly render the object element as a small box, similar to the way they would render a missing image: http://georgebrock.com/misc/object-in-ie.png — George Brocklehurst
** Absolute URIs can't start with a number, but relative ones can - and the data attribute is permitted to contain relative URIs. [Don't need to use data:// URI) — Toby A Inkster
* Could also look at <code><object class="dtstart"><param name="value" value="20050125" />January 25</object></code> — Scott Reynen

==== problématiques ====
Open issues related to this proposal. Some may require additional information to be acted upon / resolved.

* Not providing OBJECT WIDTH and HEIGHT causes the displaying page to flicker; --[[User:Yecril71pl|Yecril71pl]] 21:56, 24 February 2009 (UTC)
** Please provide specific implementation (maker, name, version number, platform) that cause the displaying page to flickr.

* OBJECT boundaries are impermeable to CSS. --[[User:Yecril71pl|Yecril71pl]] 21:56, 24 February 2009 (UTC)
** Please provide a URL to an example use of OBJECT that demonstrates problems with applying CSS to the contents of the OBJECT (i.e. beyond its boundaries).

==== problématiques résolues ====
Issues raised and resolved related to this proposal. Issues that are misconceptions (e.g. easily refuted by citing the HTML4 specification) are resolved by moving to the separate misconceptions section below with explanation/citation for why they are misconceptions.

* The purpose of the <object> element is to allow the browser to run an external application for a non-native data type (e.g., Java applet). See: http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3. Object is not the right way to go in this case. — Sarven Capadisli
** "datetime" *is* a non-native data type, and its common presentation is essentially a lowest common denominator (what's supported) plain text fallback. Better would be for code to recognize and present date and time information to the user in a format they can understand (perhaps adjusting the presentation for the user's locale settings). Object makes sense semantically for representing date and time information, as it is a semantic for embedding arbitrary data. [[User:Tantek|Tantek]] 21:39, 24 February 2009 (UTC)
** note the mention of "external application" may sometimes cause the misconception (i.e. see below) that object MUST be used to run an external application. This is false. Authors may specify the "classid", which implies an implementation, or they may specify the "type" and "data" attributes which the browser may then display natively or use the "type" attribute to find external code to display the data. [[User:Tantek|Tantek]] 21:39, 24 February 2009 (UTC)

* Providing OBJECT WIDTH and HEIGHT will break the typographical consistency of running text. --[[User:Yecril71pl|Yecril71pl]] 21:56, 24 February 2009 (UTC)
** This is a [http://tr.im/strawman Strawman] issue. This proposal never advocated using WIDTH and HEIGHT.

* Specifying a DATA attribute causes an unnecessary round-trip to the server. And what if it succeeds? --[[User:Yecril71pl|Yecril71pl]] 21:59, 24 February 2009 (UTC)
** This is a [http://tr.im/strawman Strawman] issue. This proposal lacks any examples which use "http:" in the DATA attribute or any other URI scheme which will cause a round-trip to the server.

==== idées fausses ====
===== application exerrne seulement =====
* ''The purpose of the <object> element is to allow the browser to run an external application...'' — Sarven Capadisli
* ''OBJECT elements are for external content, not for arbitrary data;''' --[[User:Yecril71pl|Yecril71pl]] 21:56, 24 February 2009 (UTC)

This is false. From the [http://www.w3.org/TR/html401/struct/objects.html#h-13.3 HTML4.01 section on OBJECT]:

<blockquote><p>Still others [other objects] may not require additional implementation information, i.e., the user agent itself may already know how to render that type of data (e.g., GIF images).</p></blockquote>

Thus browsers may render OBJECTs themselves, like images, and external applications are not necessarily required. For example IE5/Mac supported native rendering of PNG images even as objects, while other browsers at the time (2000) which supported OBJECT, only rendered PNG images via external plugins.

===== besoin de width et height =====
* ''OBJECT elements need WIDTH and HEIGHT'' --[[User:Yecril71pl|Yecril71pl]] 21:56, 24 February 2009 (UTC)

This is false. Per the [http://www.w3.org/TR/html401/struct/objects.html#h-13.3 HTML4.01 section on OBJECT], the width and height attributes are "#IMPLIED" not "#REQUIRED".

===maquage individuel de chaque composant date/heure===
'''A variant of this idea has been documented into a [[value-excerption-pattern-brainstorming#details_for_handling_specific_property_types|specific proposal]] and is [[value-excerption-dt-separation-test|being tested]]. Please see the [[value-excerption-pattern-brainstorming#details_for_handling_specific_property_types|value excerption pattern brainstorming: date and type separation]] and [[value-excerption-dt-separation-test]] page for updated details. [[User:Tantek|Tantek]] 22:05, 24 February 2009 (UTC)'''

A combination of suggestions that originated from this [http://www.mail-archive.com/microformats-discuss@microformats.org/msg10218.html post]

This is suggested as a complementary alternative to datetime-design-pattern, when the use of the pattern is not possible due to accessibility reasons.

suggested class names:
* <code>date</code>
* <code>time</code>
* or maybe <code>datetime</code> ?
* <code>s</code> for seconds
* <code>min</code> for minutes
* <code>hr</code> for hours
* <code>ampm</code> for AM/PM
* <code>tz</code> for timezone. (ex. <code>GMT</code>)
* <code>tzo</code> for timezone offset (ex. <code>-7</code>)
* <code>day</code>
* <code>mo</code> for months
* <code>yr</code> for year

For a complete datetime:

<pre>
<span class="dstart" lang="en-us">
<span class="date">
<span class="mo">October</span> <span class="day">5</span>, <span class="yr">2004</span>
<span> at
<span class="time">
<span class="hr">6</span><span class="">PM</span>
</span>
</span>
</pre>

<code>date</code> maybe not required since <code>dstart</code> IS a <code>date</code>.

For a duration:

<pre>
<span class="duration">
<span class="h">1</span>:
<span class="min">3</span>:
<span class="s">42</span>
</span>
</pre>

* Un exemple de ceci est aussi documenté sur [[ISO-31-1-fr|ISO-31-1]]

'''problématiques'''
* the internationalization issue is not addressed, but it is limited to the month of the year.
* Tonnes and tonnes of nested elements to mark up something that's essentially very simple. Microformats are "for humans first, machines second", but this suggestion appears to be friendly to neither! [[User:TobyInk|TobyInk]] 02:21, 12 Aug 2008 (PDT)
** Also worth pointing out that the complexity issue applies less to durations. With durations, most people will probably only want to use a combination of 1 to 3 time components (e.g. d+h, h+min+s, h+min, min+s, d only, h only, min only, s only) But with datetimes, they're likely to want to specify at least five components (y+m+d+h+min) and often also the timezone (seconds, and fractions thereof, are not especially useful for the majority of use cases). So marking up the time components might be OK for durations, but becomes onerous for datetimes.

== Voir aussi ==

* [[Main_Page-fr#Design_Patterns|Tous les design patterns microformat]]
* [[abbr-design-pattern-fr]] est utilisé par [[datetime-design-pattern-fr|datetime-design-pattern]]
* [[date-design-pattern-fr]] est un sous-ensemble de [[datetime-design-pattern-fr|datetime-design-pattern]]
* La définition HTML 4.01 de l'élément <code><[http://www.la-grange.net/w3c/html4.01/struct/text.html#edef-ABBR abbr]></code>
* RFC [http://www.faqs.org/rfcs/rfc3339.html 3339]: Date and Time on the Internet: Timestamps
* W3C : [http://www.w3.org/TR/NOTE-datetime Note sur Datetimes]
* W3C: [http://www.w3.org/QA/Tips/iso-date Use international date format (ISO) - Quality Web Tips]
* Markus Kuhn : [http://www.cl.cam.ac.uk/~mgk25/iso-time.html A summary of the international standard date and time notation]
* Wikipedia : [http://fr.wikipedia.org/wiki/ISO_8601 ISO 8601] norme internationale de définition des dates et heures

class-design-pattern-fr

2013-09-22T11:22:55Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

= Class design pattern =
== Intention ==
Utiliser le [[class-design-pattern-fr|class-design-pattern]] pour indiquer le sens sémantique à propos des éléments XHTML. Voir la discussion des [[semantic-class-names-fr|noms de classes sémantiques]] pour l'historique.

== Comment l'utiliser ==
* toujours utiliser l'élément [[semantic-xhtml-fr|semantique (X)HTML]] le plus approprié pour le contenu. Si un élément sémantique approprié n'est pas disponible, utilisez <code>span</code> ou <code>div</code>. Evitez toujours le [[presentational-xhtml-fr|(X)HTML "présentationnel"]].
* ajoutez de la sémantique au (X)HTML en utilisant les [[semantic-class-names|noms de classe sémantiques]]. L'attribut <code>class</code> est une liste séparée par des espaces de noms de classe.
* choisir toujours des noms en suivant les [[naming-principles|principes de nommage des microformats]].

== Description ==
C'est l'un des design patterns apparaissant le plus souvent dans les microformats. Le sens sémantique peut être indiqué sur le contenu XHTML en utilisant l'attribut <code>class</code> d'un élément l'entourant. Par exemple, [[hcard-fr|hCard]] ajoute de l'information indiquant que certains éléments représentent une vCard personne ou organisation, un Nom Formaté par le "class design pattern" :

<pre><nowiki>
<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>,
<span class="org">Technorati</span>
</div>
</nowiki></pre>

Remarquez tout particulièrement :

* la section du document XHTML sur laquelle s'applique le microformat est définie par <code>class="vcard"</code>. Ceci est très commun parmi les microformats non triviaux.
* l'utilisation à la fois dans la ligne (<a> et <span>) et des éléments de niveau bloc (<div>). Ceci fournit au designer de microformat une gamme d'options pour insérer de l'information sémantique sans inférer la présentation existante
* l'utilisation de plusieurs noms de classe sur un élément unique (comme <code>"url fn"</code>). Ceci permet :
** des éléments uniques ont plusieurs sens
** permet d'ajouter de la sémantique à une présentation existante

==En rapport ==
* [[semantic-xhtml-fr|xhtml sémantique]]
* [[semantic-class-names-fr|noms de classes sémantiques]]

== Voir aussi ==
* [[Main_Page-fr#Design_Patterns|Tous les design patterns microformat]]
* John Udell [http://weblog.infoworld.com/udell/2004/02/09.html écrit] à propos de plusieurs noms de classe
* [http://www.la-grange.net/w3c/html4.01/struct/global.html#adef-class HTML 4.0 définition de 'class'], comprend des notes sur plusieurs noms de classe

abbr-design-pattern-fr

2013-09-22T11:22:47Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>Abbr design pattern</entry-title>

== Objectif ==
* Utiliser le [[abbr-design-pattern-fr|abbr-design-pattern]] pour faire que le texte qui soit lisible par un humain soit aussi lisible formellement par une machine
* Eviter d'utiliser [[abbr-design-pattern-fr|abbr-design-pattern]] pour ré-encoder le texte humain ou pour cacher les données

== Comment l'utiliser ? ==
* entourer le texte convivial-pour-les-humains que vous voulez pour faire qu'il soit lisible par les machines avec <code><abbr></code>
* comme pour le [[class-design-pattern-fr|class-design-pattern]], ajoutez l'attribut approprié <code>class</code> à l'élément <code>abbr</code>
* ajoutez un attribut <code>title</code> à l'élément <code>abbr</code> avec les données lisibles par les machines comme la valeur.

== Exemple ==
Le [[datetime-design-pattern-fr|datetime-design-pattern]] encode formellement les 'dates-horaires' (bien connus pour être non parsables) à l'intérieur d'un élément <code>abbr</code>.

avant :

<pre>
La fête aura lieu le 10 à 10 heures.
</pre>

Après :

<pre>
La fête aura lieu le
<abbr class="dtstart" title="20051010T10:10:10-0100">10 à 10 heures</abbr>.
</pre>

==Présentations alternatives==
Remarquez que les prrésentations suivantes sont toutes équivalentes pour un parseur de microformat :

<pre>
<span class="dtstart">20070501</span>

<span class="dtstart">2007-05-01</span>

<abbr class="dtstart" title="20070501">1 mai 2007</abbr>

<abbr class="dtstart" title="2007-05-01">1° mai 2007</abbr>

<abbr class="dtstart" title="20070501">1er mai 2007</abbr>.

<abbr class="dtstart" title="20070501">May 1st 2007</abbr>.

<abbr class="dtstart" title="20070501">The first of May, 2007</abbr>.

<abbr class="dtstart" title="20070501">2007-05-01</abbr>.

<abbr class="dtstart" title="20070501">Mardi 1° mai 2007</abbr>

<abbr class="dtstart" title="20070501">2007, jour 121</abbr>

<abbr class="dtstart" title="20070501">May Day, 2007</abbr>

<abbr class="dtstart" title="20070501" lang="FR">1er mai, 2007</abbr>

<abbr class="dtstart" title="20070501" lang="ES">1 de mayo, 2007</abbr>
</pre>

et ce qui suit peut être utilisé, disons, dans une liste, un tableau ou une page, titrée "2007" :

<pre>
<abbr class="dtstart" title="20070501">1 May</abbr>
</pre>

== Discussion ==
''Cette discussion est rejetée d'[http://microformats.org/discuss/mail/microformats-discuss/2005-October/001277.html ici]''. Imaginez deux usages possibles pour le [[abbr-design-pattern-fr|abbr-design-pattern]] :

<ol>
<li>
utiliser ABBR pour encoder les données lisibles par les machines autour de données lisibles par des humains

<pre>
<abbr class="dtstart" title="20051010T10:10:10-0100">le 10 à 10 heures</abbr>
</pre>
</li>
<li>
Utiliser ABBR pour encoder des données humaines plus formelles autour de quelque chose de moins formel

<pre>
<abbr class="author" title="Danny Ayers">Danny</abbr>
</pre>
</li>
</ol>

L'utilisation #1 est encouragée s'il y a un véritable besoin pour cela. L'utilisation de #2 n'est pas recommandée sous le [http://c2.com/cgi-bin/wiki?DontRepeatYourself principe Don't Repeat Yourself], parce que : "#2 est un cas de *plus* d'information étant invisiblement présente, nommément, le nom de famille dans ce cas. Si quelqu'un ne veut pas rendre quelque information visible, alors nous ne devrions pas l'encourager à stocker cette information de façon invisible, pour toutes les mêmes raisons que les méta-données invisibles sont en premier lieu mauvaises/futiles".

''J'aimerais effacer ça en-dessous, car les points sont couverts au-dessus''

* Théoriquement, ceci pourrait être produit avec presque n'importe quel élément HTML. Mais est-ce une bonne idée ? Si ce n'en est pas une, est-ce que abbr est la seule ? [[DavidJanes]]
* abbr-design-pattern devrait être évité si possible. [[User:RobertBachmann|RobertBachmann]]
** pourquoi, ou sous quelles circonstances ? Par exemple, il est tout à fait utile avec les dates-heures. Devrait-il y avoir là d'autres situations potentiellement analogues ? [[DavidJanes]]
** Dans des circonstances où le texte dans le titre serait gobbledegook si lu par un lecteur écran. JAWS et d'autres screenreaders utilisent les attributs title provenant de abbr, quand utilisés proprement (comme dans cet exemple provenant du groupe WCAG), pour prononcer les mots qui seraient autrement illisibles ou déroutants. Utiliser des données machines tels que datetime pour un titre est une torsion à la définition du dictionnaire de l'abréviation (contraction par omission ou initialisation, appliquée au mot et non à un niveau sémantique), ceci n'est peut-être pas un gros problème en soi, mais si les lecteurs d'écran sont incapables de transformer le contenu du titre en quelque chose de compréhensible, ceci amènera à des échecs en accessibilité.

<pre>
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
</pre>

==Problématiques d'accessibilité==

Ironiquement ce pattern bien que lisible machine pour les navigateurs compatibles avec les microformats n'est pas accessible pour les lecteurs d'écran quand il fait référence à une date. par conséquent :

<pre>
we have a party in
<abbr class="dtstart" title="20070312T1700-06">
March 12, 2007 at 5 PM
</abbr>
</pre>

serait lu par Jaws comme

<pre>
we have a party at Twenty million seventy-thousand three-hundred twelve tee seventeen-hundred dash zero six.
</pre>

la [http://www.webstandards.org/2007/04/27/haccessibility/ task force accessibility] de webstandards.org recommande :

<pre>
<span class="dtstart" title="20070312T1700-06">
March 12, 2007 at 5 PM, Central Standard Time
</span>
</pre>

ou

<pre>
<span class="dtstart">
March 12, 2007 at 5 PM, Central Standard Time
<span class="value" title="20070312T1700-06"></span>
</span>
</pre>

voir plus sur [[abbr-design-pattern-issues-fr|abbr-design-pattern-problématiques]] et [http://www.webstandards.org/2007/04/27/haccessibility/]

== Voir aussi ==
* [[abbr-design-pattern-issues-fr|abbr-design-pattern-problématiques]]
* [[Main_Page-fr#Design_Patterns|Tous les design-patterns des microformats]]
* [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001277.html discussion dans la liste microformats-discuss]
* [[datetime-design-pattern-fr|datetime-design-pattern]] utilise [[abbr-design-pattern-fr|abbr-design-pattern]]
* [http://www.la-grange.net/w3c/html4.01/struct/text.html#edef-ABBR définition HTML 4.01]

Template:NewMarker-fr

2013-09-22T11:22:43Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<span style="padding:2px;background:#AEE219;border:1px solid #679906;color:#000;font-size:0.8em;">nouveau !</span>

rel-design-pattern-fr

2013-09-22T11:22:38Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

= Rel design pattern =

== Intention ==
Utiliser le [[rel-design-pattern-fr|rel-design-pattern]] pour indiquer le sens d'un lien (par ex un href) dans un document XHTML.

== Comment l'utiliser ==
* définir le sens sémantique d'un lien (<code>A</code> avec <code>href</code>) dans un microformat et lui donner un nom <code>''mf-rel-value''</code>
** cette définition peut aussi compléter la valeur des éléments et du texte entourée par les liens
* ajouter <code>rel="''mf-rel-value''"</code> aux hyperliens qui ont ce sens sémantique dans le microformat.
* les microformats simples qui n'utilisent seulement que le [[rel-design-pattern-fr|rel-design-pattern]] sont typiquement nommés après rel-value.

== Exemples ==
==== rel="bookmark" ====
La [http://www.la-grange.net/w3c/html4.01/types.html#h-6.12 spéc. HTML 4] décrit un bookmark comme "
"un lien vers un point d'entrée clé dans un document complémentaire." Par convention ('citation demandée) ce point d'entrée capture aussi la notion de "permalink" (lien permanent).

<pre>
<a href="archive/entry.html" rel="bookmark">Une Entrée Documentaire</a>
</pre>

==== rel="tag" ====
[[rel-tag-fr|rel-tag]] définit le sens sémantique par l'URI et les éléments l'entourant en utilisant <code>rel="tag"</code>

<pre>
<a href="http://technorati.com/tag/bliki" rel="tag">bliki</a>
</pre>

== Voir aussi ==
{{rel-related-pages-fr}}
* [[Main_Page-fr#Design_Patterns|Tous les design patterns pour microformats]]
* [http://www.w3.org/TR/REC-html40/struct/links.html#edef-A%20 HTML 4.01 définition de l'élément <code>A</code>]
* [http://www.la-grange.net/w3c/html4.01/struct/links.html HTML 4.01 définition de l'attribut <code>rel</code>]
* Microformats : [[rel-license-fr|rel-license]], [[rel-nofollow-fr|rel-nofollow]], [[rel-tag-fr|rel-tag]]
* Propositions : [[rel-directory-fr|rel-directory]], [[rel-enclosure-fr|rel-enclosure]]
* [[votelinks-faq-fr|VoteLinks FAQ]] Discute de problématique avec rel vs. rev

Template:main-fr

2013-09-22T11:22:32Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<div style="text-indent:2em;font-style:italic">Article principal: [[{{{1}}}]]</div>

parsers

2013-09-22T11:22:27Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>Microformats Parsers</entry-title>
;shortlink
:http://ufs.cc/w/ufprs
This page lists libraries that consume, transform or convert microformats. This is only a partial list. If you know of other such tools for microformats, please add them and list what specific microformats they support. There is a separate page for [[validators]].

Alphabetical listing by programming language:

= microformats2 parsers =
These are modern and maintained [[microformats2]] parsers and are suitable for use in modern web applications.

== Javascript ==
=== Microformat Node ===
* [http://github.com/glennjones/microformat-node microformat-node] microformat-node is a microformat parser for node.js. It is built using a well tested JavaScript parsing engine which already powers a number of browser extensions. Supports microformat v1 and v2. Try it out at http://microformat2-node.jit.su

=== Microformat Shiv ===
* [http://microformatshiv.com/ Microformat Shiv] The microformat shiv provides a simple to use JavaScript microformats parsing library. It can also be used in browser extensions and the web site has example code for Chrome, Firefox and Opera.

== PHP ==
=== php-mf2 ===
* PHP generic microformats2 parser
** source: https://github.com/indieweb/php-mf2

== Ruby ==
* '''G5/microformats2''' Ruby microformats2 parser
** github open source: https://github.com/G5/microformats2

= past parsers =
These are past parsers of classic microformats but which have largely not been maintained.

They may be useful as starting points for developing additional microformats2 parsers.

== .Net ==
[http://ufxtract.com/ UfXtract] is an open source .Net microformats parser. It can parse microformats from URLs or HTML strings. The extracted data can be used directly in .Net or converted into JSON, JSON-P or XML. Currently Supports 16 microformats and can easily be extended with new definitions.

== Java ==
* [http://code.google.com/p/any23/ Any23 (Anything to Triples)] parses microformats into RDF triples
* [http://zwitserloot.com/org.microformats.hCard/ org.microformats.hCard] by Reinier Zwitserloot

== More Javascript ==
=== Sumo ===
* [http://www.danwebb.net/2007/2/9/sumo-a-generic-microformats-parser-for-javascript Sumo! A Generic Microformats Parser For JavaScript]

== Perl ==
=== Data::Microformat ===
* [http://search.cpan.org/~ussjoin/Data-Microformat-0.01/lib/Data/Microformat/hCard.pm Data::Microformat] is a CPAN module to parse and create hCard, adr, and geo.
** By Brendan O'Connor / Six Apart

=== HTML::Microformats ===
Perhaps we can capture and update this info on a page like [[perl-html-microformats-parser]].
[http://search.cpan.org/~tobyink/HTML-Microformats/ HTML::Microformats] is a CPAN module that has support for:
* input:
** rel: [[rel-enclosure]], [[rel-license]], [[rel-tag]], [[VoteLinks]], [[XFN]].
** class: [[adr]], [[figure]], [[geo]], [[hAtom]], [[hAudio]], [[User:TobyInk/hcalendar-1.1|hCalendar]], [[hCard]], [[hListing]], [[hNews]], [[hProduct]], [[hRecipe]], [[hResume]], [[hReview]], [[hReview-aggregate]], [[xFolk]], [[XMDP]], [[XOXO]].
*** highly experimental: [[measure]], [[species]].
** poshformats: [http://ocoins.info/ OpenURL COinS].
* output:
** RDF: RDF/XML, Turtle, N-Triples, RDF/JSON, etc.
** JSON
** domain specific: vCard (3.0, 4.0 and XML), iCalendar, Atom, KML.
* By [[User:TobyInk|Toby Inkster]].

Versions and releases notes:
* 2011-02-05 [http://microformats.org/discuss/mail/microformats-dev/2011-February/000667.html 0.102]
* 2010-12-22 0.101
* 2010-12-16 [http://microformats.org/discuss/mail/microformats-discuss/2010-December/013363.html 0.100]
* 2010-10-18 0.00_13
* 2010-06-25 0.00_12
* 2010-06-23 0.00_11
* 2010-05-13 0.00_10
* 2010-05-12 0.00_09
* 2010-04-29 0.00_08
* 2010-04-28 0.00_07
* 2010-04-16 [http://microformats.org/discuss/mail/microformats-dev/2010-April/000651.html 0.00_06]
* 2010-04-16 0.00_05
* 2010-03-20 [http://microformats.org/discuss/mail/microformats-dev/2010-March/000647.html 0.00_04]
* 2010-03-09 [http://microformats.org/discuss/mail/microformats-dev/2010-March/000642.html 0.00_03]
* 2010-02-28 [http://microformats.org/discuss/mail/microformats-dev/2010-February/000641.html 0.00_02]
* 2010-02-24 [http://microformats.org/discuss/mail/microformats-dev/2010-February/000640.html 0.00_01]
* 2010-02-20 [http://microformats.org/discuss/mail/microformats-dev/2010-February/000639.html 0.00_00]
* see also the "Changes" file included in the CPAN distribution.

==== XML::Atom::Microformats ====

[http://search.cpan.org/~tobyink/XML-Atom-Microformats/ XML::Atom::Microformats] provides the same functionality for Atom. It finds microformats in Atom entry content elements.

===Swignition ===
* [http://buzzword.org.uk/swignition/ Swignition] is a parser for both “upper case Semantic Web” (RDF, RDFa) and “lower case semantic web” (microformats) technologies. It includes modules for exporting parsed data in a variety of formats, including RDF, vCard, iCalendar, Atom and KML.
** By Toby Inkster
** Active development has moved to HTML::Microformats (see above).

=== Text::Microformat ===
* Text::Microformat is a microformats parser hosted on [http://code.google.com/p/ufperl/ Google Code] that supports:
** [[hCard]], [[hCalendar]], [[rel-tag]]

== More PHP ==
=== XMFP ===
<span id="xmfp">[http://code.google.com/p/xmfp/ XMFP]</span> (eXtensible MicroFormats Parser for PHP 5) by [http://www.metonymie.com Emiliano Martínez Luque] is a set of PHP 5 classes providing a simple API for extracting Microformated Content either from a URI or a String representing HTML/XML. It can return the results as a PHP associative array, a JSON definition or an XML representation of the data. It supports most of the currently accepted microformats and can be easily extended to add new ones, it also has full support of the include pattern and provides basic validation of microformated data.

=== hKit Microformats Toolkit for PHP5 ===
[http://allinthehead.com/hkit hKit Microformats Toolkit for PHP5] as [http://allinthehead.com/retro/291/hkit-microformats-toolkit-for-php announced by Drew McLellan]. See also [[hkit|hKit on this wiki]].

===PHP Microformats parser===
[http://www.phpclasses.org/browse/package/3597.html Microformats parser] is a PHP package for extracting the microformats data embedded into HTML. The gathered data is stored as an xArray of objects - one for each microformat type container found. [http://malatestapunk-stuff.blogspot.com/2007/01/php-microformats-parser.html Announcement]. The parser supports most of the hCard (missing SOUND), hCalendar, hReview (missing item info; spec really needs some clarification) and rel elements, according to their respective specification on microformats Wiki.

===Transformr===
A Simple set of XSLT and PHP tools for Transforming Microformats Source [http://github.com/WebOrganics/TransFormr available from github] Live webservice available at [http://microform.at/ microform.at].

=== hCard Validator ===
[http://code.google.com/p/hcardvalidator/ Source code] of the [http://hcard.geekhood.net/ hCard Validator] contains XSLT and PHP code for hCard and include microformats.

=== ARC2 ===
[http://arc.semsol.org/ ARC2] is a semantic web toolkit which includes support for hCard, adr, geo, XFN, hCalendar, hAtom, hResume, hReview, xFolk, rel-license and rel-tag. It's tri-licensed under the GPL 2 and 3, and the W3C Software licence.

== Python ==
===AUMP===
* [http://aump.googlecode.com AUMP] is a parser written by David Janes. It supports hCard, hCalendar, hAtom, hReview and hListing.
** Uses Python's [http://docs.python.org/library/xml.dom.minidom.html xml.dom.minidom] after cleaning input through [http://www.w3.org/People/Raggett/tidy/ HTML Tidy].

===Microtron===
{{main|Microtron}}
* [[Microtron]] is a general-purpose microformat parser/transformer.

It can operate on the definition file included in [[Optimus]], making it a close replacement for certain tasks, and can easily be extended with new formats without modifying the source. The primary advantages are speed (> 100x faster that [[Optimus]] for some operations), simplicity (single file) and small code size (currently < 150 lines).

=== python-hcalendar ===
[http://pypi.python.org/pypi/python-hcalendar/0.1dev python-hcalendar] is a basic hCalendar parser.

== More Ruby ==
===Prism ===
* [[Prism]]
** by [[implementors#Mark_Wunsch|Mark Wunsch]]
** Library and command line tool for parsing POSH/Microformats
** Uses the [http://nokogiri.org/ Nokogiri] HTML, XML, SAX, and Reader parser

=== mofo ruby microformats parser===
* [http://mofo.rubyforge.org/ mofo], [http://groups.google.com/group/mofo-rb mofo Google Group], [http://github.com/defunkt/mofo/tree/master GitHub repository]
** by [[implementors#Chris Wanstrath|Chris Wanstrath]]
** Uses the [http://wiki.github.com/why/hpricot Hpricot] HTML/XML parser

=== Microformat Parser for Ruby ===
* [http://blog.labnotes.org/2005/11/20/microformat-parser-for-ruby/ Microformat Parser for Ruby]
** by [[implementors#Assaf Arkin|Assaf Arkin]]

=== uformats ===
* [http://rubyforge.org/projects/uformats uformats]

=== scrAPI ===
* [http://rubyforge.org/projects/scrapi scrAPI]

== XSLT ==
===Optimus===
* [[Optimus]] is open source XSLT that parses microformats, converts them into JSON or XML, and validates them too.

===X2V===
* [[X2V]] is [http://hg.microformats.org/ open source XSLT for extracting microformats].
** by Brian Suda

== editing this page ==
For now, this page ''copies'' (rather than ''moves'') information from the existing [[implementations | Implementations]] page.

== see also ==
* [[implementations]]
* [[implementors]]
* [[open-source]]
* [[user-interface]]
* [[validators]]

rel-me

2013-09-22T11:22:22Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>rel="me"</entry-title>
;short URL
:http://ufs.cc/w/relme

[[XFN]] 1.1 introduced the "me" [[rel]] value which is used to indicate profile equivalence and for [[identity-consolidation]].

<code>rel="me"</code> is used on hyperlinks from one page about a person to other pages about that same person.

For example, [[User:Tantek|Tantek]]'s [http://tantek.com/ home page] has (markup simplified)

<source lang=html4strict><a href="http://twitter.com/t" rel="me">@t</a></source>

And his Twitter profile itself has (markup simplified)

<source lang=html4strict><a href="http://tantek.com/" rel="me">http://tantek.com/</a></source>

Thus establishing a bi-directional rel-me link and confirming that the two URLs represent the same person.

Publishers can use the [http://gmpg.org/xfn/creator XFN creator] form to create rel-me hyperlinks.

== screencast and videos ==
Watch some short videos:
* [http://www.sixapart.com/static_news/opening_social_graph/xfn_links/xfn_links.html David Recordon's excellent *30 second* explanation of XFN rel="me"].
* [http://www.youtube.com/watch?v=LabCylbapuM Brad Fitzpatrick explains rel="me" and more XFN].
* [http://www.podtech.net/scobleshow/technology/1611/plaxo-to-ship-online-identity-aggregator-based-on-microformats Joseph Smarr's whiteboard explanation] of rel="me" as implemented in the Plaxo online identity aggregator.
Longer:
* [http://video.google.com/videoplay?docid=-8663100900373306094 Gavin Bell on "What is your provenance?"] (40 minutes) - provides a much broader discussion of the problem statement of who is a person on the Web, and starting at about 0:07:30 explains how [[hCard]] + rel="me" helps solve this problem.

== tutorials ==
[http://ungeekdapo.wordpress.com/2008/04/29/a-simple-data-portability-project-or-is-it/ A simple data portability project or is it] rel=me summary by Bob Ngu

== implementations ==
[[wordpress-plugins|WordPress plugins]]:
* [http://blog.maybe5.com/?page_id=94 Social Links Wordpress plugin] - supports rel-me links to other services
* [http://code.l0g.in/about-me/ About Me plugin] (on github) - supports creation of an About Me page with rel-me links to other profiles.

== rel-me-auth ==
[[RelMeAuth]] is a proposed open standard for using [[rel-me]] links to profiles on [[OAuth]] supporting services to authenticate via either those profiles or your own site.

Read more about [[RelMeAuth]].

== see also ==
* [[hcard-xfn-supporting-friends-lists#Services_with_XFN_rel.3D.22me.22_to_multiple_external_sites|services that support rel="me"]]
* [[rel-me-faq]]
* [[xfn]]
* [[rel]]
* [[social network portability]]
* [http://gmpg.org/xfn/11 XFN 1.1 profile]

hcard-examples

2013-09-22T11:22:16Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>hCard examples</entry-title>

Example [[hcard|hCards]].

== Authors ==
* [http://tantek.com/ Tantek Çelik]
* Brian Suda

== Instructive Examples ==

=== Authors of Pages and Posts ===
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 Per the HTML4.01 specification], authors should be using the <code><address></code> element to indicate the "contact information for a document or a major part of a document." E.g.

<pre><nowiki>
<address>
<a href="http://tantek.com/">Tantek Çelik</a>
</address>
</nowiki></pre>

By adding [[hcard|hCard]] to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:

<pre><nowiki>
<address class="vcard">
<a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
</address>
</nowiki></pre>

This could be displayed as:

[http://tantek.com/ Tantek Çelik]

This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.

See the [http://microformats.org/blog/ microformats.org blog] (view the source) for a live example. The author of every blog post on the microformats.org blog is marked up as an <code><address class="vcard"></code> element like the example shown above.

=== References to People and Organizations ===
A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages. E.g.:

<pre><nowiki>
<cite>
<a href="http://meyerweb.com/">Eric Meyer</a>
</cite> wrote a post
(<cite>
<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Tax Relief
</a>
</cite>)
about an unintentionally humorous letter he received from the
<a href="http://irs.gov/">Internal Revenue Service</a>.
</nowiki></pre>

By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:

<pre><nowiki>
<cite class="vcard">
<a class="fn url" href="http://meyerweb.com/">Eric Meyer</a>
</cite> wrote a post
(<cite>
<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Tax Relief
</a>
</cite>)
about an unintentionally humorous letter he received from the
<span class="vcard">
<a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
</span>.
</nowiki></pre>

Note the class names "fn org url" on the hyperlink surrounding the IRS. Using the same value (or element for that matter) for "fn" and "org" indicates that the hCard describes an organization rather than a person.

This could be displayed as:

''[http://meyerweb.com/ Eric Meyer]'' wrote a post (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') about an unintentionally
humorous letter he received from the [http://irs.gov/ Internal Revenue Service].

==== a person who works for an organization ====
People often associate themselves with a company or organization that they work for. E.g.

<pre><nowiki>
<span class="vcard">
<span class="fn">Jeremy Keith</span>,
<span class="org">Clearleft</span>
</span>
</nowiki></pre>

Of course in this day and age, nearly everybody has a URL both for themselves and for their company. It's easy to add a URL for the person in the above hCard example:

<pre><nowiki>
<span class="vcard">
<a class="fn url" href="http://adactio.com/">Jeremy Keith</a>,
<span class="org">Clearleft</span>
</span>
</nowiki></pre>

But to add a URL to the company, there is no "org-url" property (nor should there be), instead, use modularity and a nested hCard for the company itself:

<pre><nowiki>
<span class="vcard">
<a class="fn url" href="http://adactio.com/">Jeremy Keith</a>,
<span class="org vcard"><a class="url fn org" href="http://clearleft.com">Clearleft</a></span>
</span>
</nowiki></pre>

Furthermore, if this person hCard is on a page that represent them (e.g. is a [[representative hCard]]), then you can also use the experimental [[rel-group]] relationship on the hyperlink to the company to indicate that the company is a "group" that the person belongs to.

<pre><nowiki>
<span class="vcard">
<a class="fn url" href="http://adactio.com/">Jeremy Keith</a>,
<span class="org vcard"><a class="url fn org" rel="group" href="http://clearleft.com">Clearleft</a></span>
</span>
</nowiki></pre>

=== hCard and XFN ===
==== References to People in Blog Posts ====

In the above example, one person (the blogger) is referring to another person (Eric Meyer). In addition to using hCard to explicitly mark up the reference as a person, the blogger can use [http://gmpg.org/xfn/ XFN] (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:

<pre><nowiki>
<cite class="vcard">
<a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">
Eric Meyer
</a>
</cite> wrote a post
(<cite>
<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Tax Relief
</a>
</cite>)
about an unintentionally humorous letter he received from the
<span class="vcard">
<a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
</span>.
</nowiki></pre>

It would be displayed the same as the previous example.

==== References to People in Blogrolls ====
Many bloggers are using XFN (often using an easy user interface like that built into [http://wordpress.org WordPress]) to explicitly indicate their relationships to the people in their blogrolls:

<pre><nowiki>
<ul>
<li>
<a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a>
</li>
<li>
<a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a>
</li>
</ul>
</nowiki></pre>

By adding hCard markup to an XFN Friendly blogroll, you can explicitly indicate the name and URL of the person in addition to their relationship:

<pre><nowiki>
<ul>
<li class="vcard">
<a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a>
</li>
<li class="vcard">
<a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a>
</li>
</ul>
</nowiki></pre>

Which could be displayed as:
* [http://meyerweb.com Eric Meyer]
* [http://photomatt.net Matt Mullenweg]

This is referred to as [[hcard-xfn-supporting-friends-lists]], and is a key building block of [[social-network-portability]].

For more information on XFN, see the [http://gmpg.org/xfn/ XFN home page], [http://gmpg.org/xfn/join joining XFN], and [http://gmpg.org/xfn/background background on XFN].

The technique is used in the [http://factorycity.net/projects/wp-microformatted-blogroll/ WP Microformatted Blogroll] plugin for WordPress.

=== New Types of Contact Info ===
Since [[vCard3]] was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.

Does this mean that vCard (and hence hCard) must be extended to represent these?

Thanks to the flexibility of the URL property, the answer is no, no extensions are necessary. Instead, we use the proper URL for the service which identifies the service (protocol, machine, and/or path), and place the individual's address inside that.

<div class="discussion">
* vCard ''has'' been [ftp://ftp.rfc-editor.org/in-notes/rfc4770.txt extended] for this. Should we adopt the new "IMPP" property? [[User:TobyInk|TobyInk]] 10:03, 17 Mar 2008 (PDT)
** 'impp' is in [[vCard4]] and included in [[uf2#h-card|h-card]]. It may be used for some (but not all, not yet anyway) of the following. [[User:Tantek|Tantek]] 18:17, 24 November 2012 (UTC)
</div>

==== AOL Instant Messenger (AIM) ====
[http://dashboard.aim.com/aim AOL Instant Messenger] (AIM) ids can be represented using the <code>aim:</code> protocol. Many who publish their AIM ids do so with clickable URLs e.g.:

<pre><nowiki>
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
</nowiki></pre>

Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
</nowiki></pre>

==== Yahoo! Messenger ====
Similarly, [http://messenger.yahoo.com/ Yahoo! Instant Messenger] (YIM) ids can be represented using the <code>ymsgr:</code> protocol. And similarly many publish their YIM ids as clickable URLs e.g.:

<pre><nowiki>
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
</nowiki></pre>

Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
</nowiki></pre>

==== MSN Messenger ====
[http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids can be represented using the <code>msnim:</code> protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:

<pre><nowiki>
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
</nowiki></pre>

For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
</nowiki></pre>

See related [[hcard-examples-issues#MSN_Messenger|issue(s)]].

==== XMPP (Jabber) ====
[http://www.xmpp.org/ Extensible Messaging and Presence Protocol (XMPP)] ids can be represented using the <code>xmpp:</code> protocol, e.g.:

<pre><nowiki>
<a class="url" href="xmpp:username@jabberservice.com">IM with username@jammerservice.com</a>
</nowiki></pre>

The protocol allows much richer URLs, see [http://www.faqs.org/rfcs/rfc4622.html RFC4622].

There are many current [http://www.jabber.org/clients clients supporting the protocol].

==== Skype ====
Accounts on the Voice-over-IP service [http://www.skype.com Skype] can be represented using the <code>skype:</code> protocol. It can be used to open a chat session or make a Skype call.

<pre><nowiki>
<a href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
</nowiki></pre>

<pre><nowiki>
<a href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
</nowiki></pre>

Thus for hCard, we could adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:

<pre><nowiki>
<a class="url" href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
</nowiki></pre>

<pre><nowiki>
<a class="url" href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
</nowiki></pre>

==== ICQ ====
[http://www.icq.com/ ICQ] does not have a URL scheme. Rather ICQ links on the web use HTTP hyperlinks to download a resource of content-type <code>application/x-icq</code> which then the operating system opens with the user's ICQ client.

Thus we can markup those HTTP hyperlinks with the content-type set explicitly to communicate the ICQ semantic:

<pre><nowiki>
<a class="url"
type="application/x-icq"
href="http://www.icq.com/people/cmd.php?uin=[ICQNUMBER]&action=message">
Contact with ICQ</a>
</nowiki></pre>

Replacing [ICQNUMBER] with the user's actual ICQ number.

=== Site profiles ===
Bloggers often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By labeling them as URL properties, these additional facets of identity can be published in an hCard as well.

* <code>[http://del.icio.us delicious]:</code>
** <code><a class="url" href="http://del.icio.us/rbach">Robert Bachmann's links</a></code>
* <code>[http://flickr.com Flickr]:</code>
** <code><a class="url" href="http://flickr.com/photos/tantek/">See my photos</a></code>
** <code><a class="url" href="http://flickr.com/people/tantek/">Flickr profile</a></code>
* <code>[http://technorati.com/ Technorati]:</code>
** <code><a class="url" href="http://technorati.com/profile/tantek/">Technorati profile</a></code>
* Add more here...
** ....

==== listing your other profiles ====
The most common case of sites listing other profiles is a blogger listing their own other profiles, or a site enabling a user to list on his or her profile on that site, links to his or her other profiles. Since clearly the author/user is indicating that all those profiles mean the same person, it's best to mark them up with [[XFN]]'s <code>rel="me"</code> for explicit identity consolidation, e.g. if those links were on Tantek's blog or other social network profile:

* <code>[http://del.icio.us delicious]:</code>
** <code><a class="url" href="http://del.icio.us/rbach">Robert Bachmann's links</a></code>
* <code>my [http://flickr.com Flickr]:</code>
** <code><a class="url" href="http://flickr.com/photos/tantek/">See my photos</a></code>
** <code><a rel="me" class="url" href="http://flickr.com/people/tantek/">Flickr profile</a></code>
*<code>[http://30boxes.com/user/8214086/Lucyloo/ 30boxes]:</code>
* <code>[http://technorati.com/ Technorati]:</code>
** <code>my <a rel="me" class="url" href="http://technorati.com/profile/tantek/">Technorati profile</a></code>
* Add more here...

** ....

Such explicit user-driven identity consolidation is also a key building block for [[social-network-portability]] that is further explained in the context of [[hcard-xfn-supporting-friends-lists]].

=== Canonical Profiles on Sites ===
Sites sometimes have different pages for the "home" page for a person, and that person's user profile page.

For example Flickr has:
* your home page is at a URL like: <code>http://flickr.com/photos/</code> followed by your username, e.g.:
** http://flickr.com/photos/tantek/
* your profile page is at a URL like: <code>http://flickr.com/people/</code> followed by your username, e.g.:
** http://flickr.com/people/tantek/

In addition, sites often have a <em>canonical</em> URL for a person, and several alternate URLs.

As noted above, links to these URLs inside hCards that represent those people should have classname "url".

In addition, such link(s) in hCards to the canonical URL for a person on that site should also have the classname of "uid". This technique was proposed Ryan King at the first [[events/2007-08-28-social-network-portability-today|Social Network Portability Today lunchtime meetup]].

Building on the example(s) from the previous section:
* [http://flickr.com Flickr]:
** <code><a class="url" href="http://flickr.com/photos/tantek/">See my photos</a></code>
** <code><a rel="me" class="url uid" href="http://flickr.com/people/tantek/">Flickr profile</a></code>

Such a "url" + "uid" property could also be used by a site as that person's [[OpenID]] URL.

This work has been developed into [[representative-hcard|representative hCards]]. Go there for the latest on this line of thinking.

=== Organizations and Departments ===

Departments are marked up using the "organization-unit" class name inside the "org" element, with the "organization-name" specifically marked up to distinguish it from the department:

<pre><nowiki>
<div class="vcard">
<div class="org fn">
<div class="organization-name">Sprinkler Fitters U.A. Local 483</div>
<div class="organization-unit">Apprenticeship Training Center</div>
</div>
</div>
</nowiki></pre>

The department may also be part of the address, in which case, you may want to explicitly mark it up as the "extended-address" in addition to the "organization-unit".

<pre><nowiki>
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Sprinkler Fitters U.A. Local 483</div>
<div class="organization-unit extended-address">Apprenticeship Training Center</div>
</div>
<div class="street-address">2531 Barrington Court</div>
<span class="locality">Hayward</span>,
<abbr title="California" class="region">CA</abbr>
<span class="postal-code">94545</span>
</div>
</div>
</nowiki></pre>

Note that by nesting the org inside the address we avoided having to duplicate the department name.

=== Lists of Organizations ===
Similar to [[hcard-examples#References_to_People_in_Blogrolls|lists of people]], lists of organizations (e.g. music bands) should use a list (unordered unless there is a specific reason to order it) with list items and hyperlink to the respective organization home pages.

E.g. this simple [[POSH]]:

<pre><nowiki>
<ul>
<li>
<a href="http://microformats.org/">microformats.org</a>
</li>
<li>
<a href="http://technorati.com/">Technorati</a>
</li>
<li>
<a href="http://www.w3.org/">World Wide Web Consortium</a>
(W3C)
</a>
</li>
</ul>
</nowiki></pre>

can be easily enhanced with hCard:

<pre><nowiki>
<ul>
<li class="vcard">
<a class="fn org url" href="http://microformats.org/">microformats.org</a>
</li>
<li class="vcard">
<a class="fn org url" href="http://technorati.com/">Technorati</a>
</li>
<li class="vcard">
<a class="fn org url" href="http://www.w3.org/">World Wide Web Consortium</a>
(<span class="nickname">W3C</span>)
</a>
</li>
</ul>
</nowiki></pre>

== <nowiki>RFC 2426</nowiki> examples in hCard ==
See: [[hcard-examples-rfc2426]]

== Test Cases ==

These are [[hcard|hCard]] examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).

=== Problem with BDAY Information ===

this example:

<pre>

<div class="bday">
<dt>Birthday</dt>
<dd>
<abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
</dd>
</div>
</pre>

ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985" [in what? this statement appears meaningless]. interesting is that the apple addressbook is still willing to accept it in this way.

* Perhaps caused by an HTML parsing error, as <code><dt></code> and <code><dd></code> are not allowed as children of <code><div></code>.

=== case-INSENSITIVITY of type values ===

* "home" vs. "Home"

this example works with X2V:

<pre>
<div class="tel">
<dt>Phone (<span class="type">home</span>)</dt>
<dd><span class="value">+438123418</span></dd>
</div>
</pre>

this does not, but should. but instead it becomes just TEL without a type in the vcard

<pre>
<div class="tel">
<dt>Phone (<span class="type">Home</span>)</dt>
<dd><span class="value">+438123418</span></dd>
</div>
</pre>

=== GEO parsing ===
The following hCard:

<pre><nowiki>
<div class="vcard">
<span class="fn n">
<a class="url" href="http://t37.net">
<span class="given-name">Fréderic</span>
<span class="family-name">de Villamil</span>
</a>
</span>
<span class="nickname">neuro</span>
<a class="email" href="mailto:neuroNOSPAM@t37.net">
<span class="type">pref</span><span>erred email</span>
</a>
<span class="org">Omatis</span>
<span class="adr">
<abbr class="type" title="dom">France</abbr>
<span class="type">home</span> address
<abbr class="type" title="postal">mail</abbr> and
<abbr class="type" title="parcel">shipments</abbr>:
<span class="street-address">12 rue Danton</span>
<span class="locality">Le Kremlin-Bicetre</span>
<span class="postal-code">94270</span>
<span class="country-name">France</span>
</span>
<span class="geo">
<abbr class="latitude" title="48.816667">N 48° 81.6667</abbr>
<abbr class="longitude" title="2.366667">E 2° 36.6667</abbr>
</span>
</div>
</nowiki>
</pre>

Should be translated into the following vCard:

<pre><nowiki>
BEGIN:VCARD
VERSION:3.0
URL:http://t37.net
ORG:Omatis;;
NICKNAME:neuro
FN:Fréderic de Villamil
N:de Villamil;Frederic;;Mr.;
EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net
ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France
GEO:48.816667;2.366667
END:VCARD
</nowiki></pre>

X2V currently (2005-12-18) fails to parse/export the GEO property at all.

== Related Pages ==
* [[hcard-examples-issues]]
{{hcard-related-pages}}

== Translations ==
* [[hcard-examples-zh|漢語]]

hcard-authoring

2013-09-22T11:22:11Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<entry-title>hCard authoring tips</entry-title>
;short URL
:http://ufs.cc/w/hcarda
This page contains useful tips and guidelines for how to author [[hcard|hCards]], either from scratch, or by adding markup to existing content.

'''Goal:''' The goal of this document is to provide some good intuitive guidelines that should make it as easy and as quick as possible for any web author to create hCards or add hCard markup to existing content.

'''Audience:''' Web authors, designers, IA's. This document is written for easy consumption and understanding by any web designer who knows at least enough (X)HTML and CSS to use semantic HTML class names on elements (i.e. [[POSH]]) and write CSS selectors that apply styles to those class names. Please help with clarifying/simplifying this document accordingly.

'''Author(s):''' [[User:Tantek|Tantek Çelik]], [[User:MarkRickerby|Mark Rickerby]]

== A 5 minute primer to using hCard ==

Let's imagine a static page that contains some personal contact details, the main part of which looks something like:

<source lang=html4strict>
<div id="contact">
<h2>Contact Me</h2>
<p>You can contact me via email to
<a href="mailto:jane@example.com">jane@example.com</a>,
or send stuff to me at the following address:</p>
<p>255 Some Street,<br />
Some Place,<br />
Some Town</p>
</div>
</source>

This snippet has all the human readable information needed to produce a valid [[hcard|hCard]] representation - all that is necessary is to add some additional structure that defines each particular detail. The first thing to do is to add the <code>vcard</code> wrapper class to the enclosing <code>div</code>, which identifies this particular block as an [[hcard|hCard]]:

<source lang=html4strict>
<div id="contact" class="vcard">
</source>

One thing that is noticeably missing from this snippet is the name of who these contact details apply to - this makes the information presented more ambiguous and harder to understand. It's good to be explicit with such things, and it just so happens that the name property is a compulsory field within an [[hcard|hCard]] as well. So let's add it, using the <code>fn</code> class:

<source lang=html4strict>
<div id="contact" class="vcard">
<h2>Contact Me</h2>
<h3 class="fn">Jane Doe</h3>
<p>You can contact me via email to
<a href="mailto:jane@example.com">jane@example.com</a>,
or reach me at the following address:</p>
<p>255 Some Street,<br />
Some Town,<br />
Some Place</p>
</div>
</source>

Another thing we can do to improve the semantics of the snippet is to mark up the address with "adr", and use <code>div</code> tags since its not really a paragraph. At the same time, we should also get rid of the [http://tantek.com/log/2002/10.html#L20021022t1432 bed & breakfast] markup in the second paragraph, replacing it with structured classnames for the components of a mailing address: <code>adr</code>, <code>street-address</code>, <code>locality</code>, and <code>region</code>. We can also add the <code>email</code> class to the mailto link, to complete the structure of the [[hcard|hCard]]:

<source lang=html4strict>
<div id="contact" class="vcard">
<h2>Contact Me</h2>
<h3 class="fn">Jane Doe</h3>
<p>You can contact me via email to
<a class="email" href="mailto:jane@example.com">jane@example.com</a>,
or reach me at the following address:</p>
<div class="adr">
<div class="street-address">255 Some Street</div>
<div class="locality">Some Town</div>
<div class="region">Some Place</div>
</div>
</div>
</source>

And that's all it takes!

Aside from the advantages of having such structured visible data, providing these additional class names also increases the visual design possibilities.

== Add To Address Book Links ==
When you update your contact info to include hCard markup, you can also include an "Add to Address Book" link so your users can download your contact info to their address book with one click of a hyperlink!

Here is an example of such a link:

<source lang=html4strict>
<a href="http://h2vx.com/vcf/tantek.com">
Add to Address Book
</a>
</source>

Simply substitute the link to your hCard for the <kbd>tantek.com</kbd> URL fragment above (note that <code>http://</code> is implied, you can add it explicitly if you want).

If you have more than one hCard on that page, you should put a unique ID attribute on each, and then put <kbd>%23yourIDhere</kbd> at the end of your href code where <kbd>yourIDhere</kbd> is the ID attribute value that you put on the hCard you are creating the link for.

You can also use Brian Suda's hosted [[X2V]] service, or download and install the open source X2V XSLT yourself and run it on your own server instead of using an online hCard to vCard converter service.

== Creating new hCards ==
Start with the [http://microformats.org/code/hcard/creator hCard creator], and for additional fields and properties (e.g. telephone numbers, instant messaging contacts), see the [[hcard-examples|hCard examples]] page.

== Adding hCard markup to existing content ==

=== Natural language hCard ===

Perhaps you have a traditional prose description of yourself. Start by reading Jeremy Keith's article "[http://adactio.com/journal/1122/ Adactio: Journal - Natural language hCard]" which provides a nice succinct introduction in the art of adding hCard markup to an existing prose biography.

Jeremy's recent post [http://adactio.com/journal/1393/ Year zero] also contains an inline hCard citation reference to "Malarkey" (who was being quoted) that is quite illustrative of how to markup a simple hyperlinked reference to someone by obvious nickname:

<source lang=html4strict>
<cite class="vcard">
<abbr class="fn" title="Andy Clarke">
<a href="http://www.stuffandnonsense.co.uk/malarkey/">Malarkey</a>
</abbr>
</cite>
</source>

He could actually make this just a bit more semantic by explicitly noting that "Malarkey" is a nickname for Andy Clarke:

<source lang=html4strict>
<cite class="vcard">
<abbr class="fn" title="Andy Clarke">
<a class="nickname" href="http://www.stuffandnonsense.co.uk/malarkey">Malarkey</a>
</abbr>
</cite>
</source>

Similarly, a shortened given name only (e.g. Julie instead of Juliette) reference to someone can be marked up as such, here with XFN added to the hyperlink:

<source lang=html4strict>
<span class="vcard">
<abbr class="fn" title="Juliette Melton">
<a class="url nickname" rel="friend" href="http://juliettemelton.com/">Julie</a>
</abbr>
</span>
</source>

=== Minimal Markup Changes ===

When adding hCard to existing content, keep in mind that hCard was designed for semantically enhancing existing content without affecting its presentation (or minimally so). Thus: change as little markup as possible. If you want to fix various pages to be valid XHTML etc., that's fine.

In all examples below where it says to add an element with class name of "<code>xyz</code>", first look for an existing element that precisely surrounds the necessary content. Re-use that element by simply adding the class name "<code>xyz</code>" (meaning, add " xyz" (without quotes) to the element's existing class attribute, or add a new class attribute <code>class="xyz"</code> to elements without a class attribute).

e.g.
<source lang=html4strict><span>...</span></source>
would become:
<source lang=html4strict><span class="xyz">...</span></source>

and
<source lang=html4strict><span class="foo">...</span></source>
would become:
<source lang=html4strict><span class="foo xyz">...</span></source>

=== Find People or Organizations ===
Start with looking for all mentions of people or organizations on a page. All of those are potential hCards. Even more so if they are linked to their respective URLs (e.g. home pages / blogs).

If a person (or organization, henceforth shortened to just "'''person/org'''") is mentioned several times on a page, consider marking up the mention which is the most detailed, definitive, or otherwise thorough as an hCard. Ideally you might want to mark up ''all'' instances of a person/org as hCards, but for now, just keep it simple and markup the most representative instance. (Perhaps the most "definitive" instance, which could also then be marked up with a <code><nowiki><dfn></nowiki></code> element around the name of the person/org for additional semantic XHTML goodness.)

=== Determine The Surrounding Element for Each ===
For each person/org that you want to turn into an hCard, find the smallest element that contains all the info about that person/org, and no info about any other person/org.

Add the class name "<code>vcard</code>" to that element.

If there is no such element (perhaps the nearest enclosing element contains more than one person/org), then add a <code><nowiki><span class="vcard">...</span></nowiki></code> or <code><nowiki><div class="vcard">...</div></nowiki></code> that wraps the info about that person/org and just that person/org.

The rest of the markup for this hCard MUST go ''inside'' that element with the class name "vcard".

=== The Importance of Names ===
The name is the one required property of hCard. Thus be sure to mark up the name of the person with the class name "fn". For names of people which are two simple words (text separated by space) and where the first word is their given name and the second word is their family name, the class name "fn" is sufficient. E.g.

<source lang=html4strict><div class="vcard"><span class="fn">Rohit Khare</span></div></source>

For people with <span id="middle-name" class="hcard-faq-ref">middle names</span> or multi-word last names, you must mark them up with the "n" property and its sub-properties "given-name" and "family-name" (and "additional-name" when a middle name is included) e.g.:
<source lang=html4strict>


<div class="vcard"><span class="fn n">
<span class="given-name">Erin</span>
<span class="additional-name">Jo</abbr>
<span class="family-name">Richey</span>
</span></div>



<div class="vcard"><span class="fn n">
<span class="given-name">Eric</span>
<abbr class="additional-name">A.</abbr>
<span class="family-name">Meyer</span>
</span></div>



<div class="vcard"><span class="fn n">
<span class="given-name">Emily</span>
<abbr class="additional-name" title="Paige">P.</abbr>
<span class="family-name">Lewis</span>
</span></div>



<div class="vcard"><span class="fn n" lang="no">
<span class="given-name">Håkon</span>
<span class="additional-name">Wium</span>
<span class="family-name">Lie</span>
</span></div>



<div class="vcard"><span class="fn n">
<span class="given-name">Thomas</span>
<span class="family-name">Vander Wal</span>
</span></div>
</source>

==== Organization hCards ====

For hCards for organizations, be sure to put both the "fn" and "org" class names on the same element. Having those be the same is the hint to hCard consumers that the hCard represents an organization rather than a person. E.g.
<source lang=html4strict><div class="vcard"><span class="fn org">Technorati</span></div></source>

=== Link it up ===
<span id="Representative_URLs"> </span>
Add links to your website, your social network profiles and other sites that represent ''you'' specifically to your hCard with the class name <code>url</code>. Here is an example with a personal site, and Twitter and Flickr profile URLs:

<source lang=html4strict>
<span class="vcard">
<span class="fn">Tantek Çelik</span>,
<a class="url" href="http://tantek.com/">my site</a>,
<a class="url" href="http://twitter.com/t">twitter</a>, and
<a class="url" href="http://flickr.com/tantek">flickr</a>.
</span>
</source>

==== connect with yourself ====
If you are marking up an hCard on your own site, be sure to also add the [[xfn|XFN]] <code>rel="me"</code> attribute to indicate that those profile pages are additional facets of your online identity. See <cite>[http://gmpg.org/xfn/and/#idconsolidation Identity consolidation with XFN]</cite> for more details.

<source lang=html4strict>
<span class="vcard">
<span class="fn">Tantek Çelik</span>,
<a rel="me" class="url" href="http://tantek.com/">my site</a>,
<a rel="me" class="url" href="http://twitter.com/t">twitter</a>, and
<a rel="me" class="url" href="http://flickr.com/tantek">flickr</a>.
</span>
</source>

Edit your profiles on those other sites and set the "home page", "URL", or "blog" fields to link back to your own site to connect your social network profiles together.

Sites like http://huffduffer.com and [[Firefox]] plugins like [[Identify]] use APIs like the Google Social Graph API (which indexes rel-me links) to automatically connect your profiles for you in their user interfaces.

See [http://klinger.io/ Andreas Klinger's home page] for a nice, simple, real world example of a personal site with hCard that links to other profiles.

==== name and URL only ====
One of the most common patterns for person/orgs in web content is the name of the person/org, hyperlinked to their definitive/preferred web site.

When you simply reference a person by name with URL, you can simplify the markup.

<source lang=html4strict>
<span class="vcard">
<a href="http://theryanking.com" class="fn url">Ryan King</a>
</span>
</source>

This works because the HTML class attribute takes a space separated set of class names.

Blogrolls are a good example of lists of people with name and URL (see also [[xoxo|XOXO]]).

=== Titles ===
If the person's job title is mentioned, mark it up with <code><nowiki><span class="title">...</span></nowiki></code>.

Though typical vCards/hCards have only a single job title, if someone has several job titles listed say in a comma delimited list, just markup the whole lot of them with one big <code><nowiki><span class="title">...</span></nowiki></code>.

View source on the [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda] for examples of people with multiple titles.

=== Other affiliations ===
As vCard seems to imply a model of a person only being associated with one organization (at least certainly that's how most [[vcard-implementations]] appear to be written), consider placing other affiliations and info about the person into <code><nowiki><span class="note">...</span></nowiki></code> elements. You can have more than one; converters will simply append them all in source order.

View source on the [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda] for examples of people with additional affiliations (such as W3C Working Groups) marked up inside "note" elements.

Sometimes text in a document near a person/contact will explain *why* that person should be contacted. Such information is also useful to have in a "note" element.

View source on the [http://rbach.priv.at/repos/misc/microformatting/ETech2006/invite.html O'Reilly ETech 2006 invite] for examples of people with additional "For ... " reasons marked up as "note" elements.

=== Set the lang when different ===
In an English language document (<code>lang="en"</code>), be sure to markup the element surrounding any non-English names of people, companies, titles, notes etc. with a lang attribute with the appropriate value.

E.g. Spanish names in an english document should be marked up with (<code>lang="es"</code>) on their elements.

View source on the [http://tantek.com/microformats/2006/03-01-TechPlenAgenda.html W3C Technical Plenary Agenda], specifically Ignacio Marín, for an example of a person and org marked up with a <code>lang</code> attribute.

=== Phone Numbers ===
Add a few phone numbers like this:
<source lang=html4strict>
<div class="tel">
<span class="type">work</span>:
<span class="value">+1-250-555-2142</span>
</div>
<div class="tel">
<span class="type">work</span> toll free:
<span class="value">+1-800-555-1855</span>
</div>
<div class="tel">
<span class="type">work</span>
<span class="type">fax</span>:
<span class="value">+1-250-555-2135</span>
</div>
</source>

This will display something like:

work: +1-250-555-2142
work toll free: +1-800-555-1855
work fax: +1-250-555-2135

The list of tel types are: <code>voice</code> [which is the default if "type" is unspecified], <code>home</code>, <code>msg</code>, <code>work</code>, <code>pref</code>, <code>fax</code>, <code>cell</code>, <code>video</code>, <code>pager</code>, <code>bbs</code>, <code>modem</code>, <code>car</code>, <code>isdn</code>, <code>pcs</code>. As shown in the last example above, a tel may have multiple types. See [[hcard#type_subproperty_values|hCard: Type Subproperty Values]] for the official list.

=== Photographs ===
Mark up representative image(s) of the person/org with the class name "<code>photo</code>", e.g.:

<source lang=html4strict><img class="photo" src="http://www.factorycity.net/images/avatar.jpg" alt="" /></source>

If your name is not already marked up (see the Names section above), and your first and last name consist of only two words, you can set the alt attribute for the image as your name. In this case, include the "fn" class name along with the "photo" class name in the class attribute:

<source lang=html4strict><img class="photo fn" src="http://www.factorycity.net/images/avatar.jpg" alt="Chris Messina" /></source>

To ensure that the picture is not left out whenever a hcard is converted into a vcard, the external URI should be replaced with the actual encoded picture data as follows:

<source lang=html4strict><img alt="photo" class="photo" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB[...]RRxTwKpCP//Z" /></source>

An easy way to encode a contact picture is to use some application which can export vcard files including contact picture, as the freeware [http://www.palm.com/us/software/desktop/ Palm Desktop] does.

=== Geographic Coordinates ===
Add your geographic coordinates:
<source lang=html4strict>
<span class="geo">
<span class="latitude">48.430092246</span>
<span class="longitude">-123.364348450</span>
</span>
</source>

A more human friendly version would be implemented as follows:

<source lang=html4strict>
<div class="geo">
<abbr class="latitude" title="-31.388333">31°23'18"S</abbr>,
<abbr class="longitude" title="-57.960556">57°57'38"O</abbr>
</div>
</source>

That will look like this: 31°23'18"S, 57°57'38"O.

Note that the degree, minute and seconds characters should go encoded as in the source code example above to prevent that the browser to confuses the character encoding used by the page and shows wrong characters, like chinese characters where accents should be displayed.

A good place to get your coordinate values in both formats is Wikipedia. Look for the article on your city and click the human friendly coordinates to load a page with the decimal values.

=== Fragments and linking ===

An hCard is a logical piece of content that people might like to link to. If it's on a page with other content, it can be hard to link to just the one hCard, unless you have a fragment identifier to use. In HTML, you can create fragment identifiers by adding an 'id' attribute to any element. It is good practice to add an 'id' attribute to an hCard, e.g.

<source lang=html4strict>
<span id="my-hCard" class="vcard">
<a class="url fn" href="http://suda.co.uk">
Brian Suda
</a>
</span>
</source>

=== Canonical hCard within a site ===

Nearly every social website has profile URLs for its members, typically [[hcard-supporting-user-profiles|with hCard]].

Most of the pages on such websites link those canonical user profile URLs on the site itself with the icon and/or name the user. It makes sense to explicitly markup those links with both class names "url" and "uid", e.g. on a list of Twitter friends (note the additional use of the [[XOXO]] microformat) that might be hosted on Twitter itself:

<source lang=html4strict>
<ul class="xoxo">
<li class="vcard">
<a class="url uid" href="http://twitter.com/briansuda">
<img class="fn logo" src="b-icon.jpg" alt="Brian Suda" />
</a>
</li>
<li class="vcard">
<a class="url uid" href="http://twitter.com/pspmikek">
<img class="fn logo" src="m-icon.jpg" alt="Michael Kaply" />
</a>
</li>
<li>
<a class="url uid" href="http://twitter.com/t">
<img class="fn logo" src="t-icon.jpg" alt="Tantek Çelik" />
</a>
</li>
</ul>
</source>

Another example: event sites that list and link to user profiles of the people attending an event (e.g. Upcoming.org).

=== URL of an hCard being the page itself ===
The canonical hCard within a site (as noted above) often has hCard markup itself, and it's useful to markup the page itself as the URL for that hCard.

So how do you markup the URL of an hCard where the URL is the page itself?

A few variants have been observed in real-world publishing, each of which implies a solution:

# '''Profile self-hyperlinking with name/photo.''' Many (most?) [[hcard-supporting-user-profiles]] sites hyperlink the person's name (e.g. [http://www.myspace.com/irhetoric Myspace irhetoric]) and/or image (e.g. [http://upcoming.yahoo.com/user/6623 Upcoming tantek]) on their profile to the profile itself. This is a common design pattern. In this case the answer is obvious: simply add <code>class="url uid"</code> to the existing self-hyperlink.
# '''Profiles with a "profile" link and/or dynamic content.''' Some sites have a "Profile" navigation link which is clickable even on the profile itself (e.g. on [http://twitter.com/ Twitter] login and go to your profile). In some cases the "Profile" link is highlighted among other navigation links to indicate that it's what is currently visible among the nav options (e.g. [http://www.last.fm/ last.fm] - login and go to your profile). Both of these sites have dynamic content on profile pages, and thus could also label such self-hyperlinks with text like "Reload" or "Refresh" - accurately indicating to the user that when they clicked the link, it wouldn't change the URL in their browser address bar, but would reload the page, likely visibly updating the page. In both these cases, the answer is the same as the first case above: simply add <code>class="url uid"</code> to the existing self-hyperlink.
# '''Profiles without apparent self-hyperlinks.''' Some sites' profile pages (e.g. [http://flickr.com/people/tantek/ Flickr tantek]) have no self-hyperlink, possibly because their content is more static, and a visible self-hyperlink would appear to "do nothing" when clicked, either frustrating the user, or making them think the site was broken. For these sites, the author can include an empty hyperlink with an empty href attribute (which is resolved as a relative URL to the page itself) to provide an invisible hyperlink to the page itself which is thus both not typically clickable (since it takes up no space), nor has any content which could be erroneously read by a screen reader. E.g. <code><a class="url" href=""></a></code>. This authoring suggestion is probably good enough to handle this third, perhaps rarest case, though it would be useful to to have some test cases that can be run in various browsers / assistive technologies to see what they do. Another (lengthier) suggestion would be to use [[value-class-pattern]] value-title technique, e.g.: <code><nowiki><span class="url uid"><span class="value-title" title="http://example.com/user/john"> </span></span></nowiki></code>.

=== More tips and guidelines ===
Feel free to add more tips that experience has taught you while marking up hCards, even if all you add is a brief catch phrase that reminds you.

* How to note some text, so you can make a comment like who your admin assistant is.
* More inline code examples, perhaps one for each section (suggestion from Cdevroe)
* (suggestion from brian) you mention blogroll, this might be out of scope, but you could mention that XFN and hCard can be interweaved - it is not one or the other
* ...

== Related Pages ==
{{hcard-related-pages}}

resources

2013-09-22T11:22:06Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

<h1>microformats resources</h1>

* [[buttons]]
* [[cheatsheets]] are handy if you need a quick reminder about a particular microformat.
* [[css]] - some handy CSS code for improving your published microformats.
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.
* [[events]]
* [[existing-classes]]
* [[existing-rel-values]]
* [[icons]]
* [[jobs]]
* [[rfc|RFCs]] used by microformats
* [[2d_barcodes|2D Barcodes]]
* [[shortcuts]] to wiki pages with long names
* [[spellcheck|spell-check dictionary]]
* [[spread-microformats]]
* and finally, [[humor]]!

humor

2013-09-22T11:22:00Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

=Humor=

On the lighter side of microformats; some humor!

* [http://microformats.org/discuss/mail/microformats-discuss/2008-January/011322.html six feet under]
* ...

Synonyms: humour, jokes

tools

2013-09-22T11:21:55Z

ChristopheDucamp: Reverted edits by I MADE THOUSANDS OF ACCOUNTS IN MICROFORMATS WIKI GO TO CHECK OUT THE USER LIST ([[User talk:I MADE THOUSANDS OF ACCOUNTS IN MICROF

= Tools, test cases, additional research =

The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This page is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.

*[[accessibility]]
*[[external-issues]]
*[[faqs-for-rdf]]
*[[icalendar-implementations]]
*[[internationalization]]
*[[microformats-issues]] - issues related to more than one microformat.
*[[parsing-microformats]]
*[[profile-uri-examples-in-wild|Profile URI examples, in the wild]] (Profile URIs for <code>head</code> elements)
*[[examples-in-wild]] - examples of published microformats
*[[Search engines]]
*[http://hg.microformats.org/ Source code repository] -- [[mercurial-quick-start|how to download code from the repository]]
*[[user-profile-examples-in-wild|User profile examples, in the wild]] (User profiles, for social websites)
*[[vcard-implementations]], [[vcard-errata]], [[vcard-suggestions]]
*[[why-are-content-standards-hard]]
*[[converting-microformats-to-other-formats]]
* [http://ujuicer.sandbox.matttthompson.com/ µJuicer] - Convert vCards (.vcf) into hCards