Microformats Wiki - User contributions [en]

hcard-supporting-user-profiles

2009-09-23T16:46:09Z

Karstenj: /* All services with hCard profiles */

<entry-title>hCard supporting user profiles</entry-title>
One of many sets of [[hcard-examples-in-wild|hCard examples in the wild]].

Welcome! If you have an account on any of the following services, you already have an [[hcard|hCard]] which you can provide to other services to import or subscribe your profile information. The ability to syndicate your profile from the service of your choice is a key component of [[social-network-portability]].

;short URL
:http://tr.im/hcards

== Services with hCard profiles that also provide OpenID ==
The following web sites support both hCard on user profiles and the ability to use your user profile as an [[OpenID]]. Alphabetically sorted. Feel free to add sites with hCard profiles that are also OpenID URLs here. Please include a link to the site home page (or [[implementations]] entry).

<div style="font-size:larger">
* http://www.betaid.org/i/icn_betaid.png [http://www.betaid.org Beta ID]
* http://claimid.com/images/badges/claimidclear10x10.gif [http://claimid.com/ ClaimID]
* [http://email-verify.appspot.com/ Email Verify]
* http://identoo.com/images/icons/services/identoo.gif [http://identoo.com/ Identoo]
* http://pulse.plaxo.com/pulse/img/event_icons/LiveJournal.gif [http://livejournal.com LiveJournal]
* [http://myopenid.com MyOpenID]
* http://pulse.plaxo.com/pulse/img/event_icons/plaxo.gif [http://www.plaxo.com/ Plaxo]
* http://technorati.com/tools/mozsearch/technorati.png [http://technorati.com/ Technorati]
* [http://videntity.org/ Videntity.org]
</div>

== All services with hCard profiles ==
The following web sites support hCard on their user profiles and are thus suitable for importing/subscribing to other sites that support hCard. Sites that you can also use as your [[OpenID]] are annotated with a OpenID icon http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif following the name of the site.

Alphabetically sorted. Feel free to add all sites with hCard profiles here. Please include a link to the site home page (or [[implementations]] entry), and instructions for retrieving your user profile URL on that site. If the site's user profile URLs can also be used as OpenIDs, please add the OpenID icon http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif following the name of the site.

<div style="font-size:larger">
* [http://3eep.com/ 3eep] - each user's public profile is located at <nowiki>http://3eep.com/users/userNameHere</nowiki>
* [http://www.artistserver.com/ ArtistServer] - each user's public profile is located at <nowiki>http://www.artistserver.com/userURLHere</nowiki>
* http://www.betaid.org/i/icn_betaid.png [http://www.betaid.org Beta ID] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif
* [http://www.bragster.com/ bragster] - each user's public profile is located at <nowiki>http://www.bragster.com/member/username</nowiki>
* http://claimid.com/images/badges/claimidclear10x10.gif [http://claimid.com/ ClaimID] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - each user's public profile is located at <nowiki>http://claimid.com/userNameHere</nowiki>
* [http://email-verify.appspot.com/ Email Verify] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif
* http://identoo.com/images/icons/services/corkd.gif [http://www.corkd.com/ Cork'd] - login and copy the URL which should start with <nowiki>http://www.corkd.com/people/</nowiki>
* http://pulse.plaxo.com/pulse/img/event_icons/Digg.gif [http://digg.com/ Digg] - e.g. http://digg.com/users/tantek
* [http://djangopeople.net/ Django People] — profiles are at djangopeople.net/username e.g. http://djangopeople.net/simon/
* http://identoo.com/images/icons/services/dopplr.gif [http://www.dopplr.com/ Dopplr] — Example public profile: http://www.dopplr.com/traveller/adactio - non-public profiles may require login to view.
* http://pulse.plaxo.com/pulse/img/event_icons/Facebook.gif [http://facebook.com/ Facebook] - not sure how to find someone's public profile URL, e.g. [http://www.facebook.com/people/Andrei_Zmievski/502957990 Andrei Zmievski] but when found it appears to have support for valid fn+photo properties. Note [[hcard-supporting-user-profiles-issues#Facebook|issue(s) with Facebook hCard profiles]].
* [http://ficlets.com/ Ficlets] — profiles are located at ficlets.com/authors/username e.g. http://ficlets.com/authors/adactio
* http://pulse.plaxo.com/pulse/img/event_icons/Flickr.gif [http://flickr.com/ Flickr] - login, click "Your Photos", click "Profile", and copy the URL which should start with <nowiki>http://flickr.com/people/</nowiki>
* [http://gaia.com/ Gaia Community] - e.g. http://sphorbis.gaia.com/ - built by [http://www.zaadz.com Zaadz]
* [http://google.com Google] - view your profile at http://www.google.com/s2/profiles/me
* [http://huffduffer.com Huffduffer] profiles are located at <nowiki>http://huffduffer.com/username</nowiki> — Example public profile: http://huffduffer.com/clagnut
* http://identoo.com/images/icons/services/identoo.gif [http://identoo.com/ Identoo] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - e.g. [http://identoo.com/dirk.olbertz sample profile]
* http://idleaf.com/favicon.png [http://idleaf.com idleaf] - profiles are located at <nowiki>http://idleaf.com/IDENTITY_ID</nowiki> - e.g.: http://idleaf.com/ID4184
* http://identoo.com/images/icons/services/imthere.gif [http://imthere.com/ ImThere] - profiles are located at <nowiki>http://imthere.com/users/USERNAME</nowiki>
* http://jaiku.com/images/icons/fav-jaiku.gif [http://jaiku.com Jaiku] — profiles are located at username.jaiku.com e.g. http://adactio.jaiku.com/
* [http://jpgmag.com/ JPG Magazine] - each user's public profile is located at <nowiki>http://jpgmag.com/people/userNameHere</nowiki>, e.g. http://jpgmag.com/people/jpd
* [http://www.keevu.com Keevu.com] - profiles are located at <nowiki>http://www.keevu.com/users/USERNAME</nowiki> - e.g.: [http://www.keevu.com/users/zheileman Zheileman]
* http://www.iconarchive.com/icons/fasticon/web-2/MySpace-24x24.png [http://myspace.com MySpace] -- Profile 2.0 supports hCard, e.g.http://myspace.com/irhetoric. Profile 1.0, however, does not.
* http://pulse.plaxo.com/pulse/img/event_icons/LastFM.gif [http://www.last.fm/ Last FM] - profiles are located at <nowiki>http://last.fm/user/USERNAME</nowiki>, includes fn, photo, url.
* http://pulse.plaxo.com/pulse/img/event_icons/LinkedIn.gif [http://linkedin.com LinkedIn] - login, click on "[http://www.linkedin.com/myprofile?trk=tab_pro My Profile]" in the top blue bar, then click on "[http://www.linkedin.com/myprofile?editwp=&trk=tab_web Public Profile]" and copy the URL in the page after "Your current URL is:" which should start with <nowiki>http://www.linkedin.com/pub/ or http://www.linkedin.com/in/</nowiki>. Note: LinkedIn profiles include an [[hresume|hResume]] for you in addition to your hCard.
* http://pulse.plaxo.com/pulse/img/event_icons/LiveJournal.gif [http://livejournal.com LiveJournal] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif (see also [[implementations#LiveJournal|LiveJournal]] implementation page entry) - login, click on the "Profile" link, and copy the URL which should start with <nowiki>http://USERNAME.livejournal.com/profile</nowiki> where USERNAME is your LJ username. E.g. [http://daveman692.livejournal.com/profile].
* http://pulse.plaxo.com/pulse/img/event_icons/Magnolia.gif [http://ma.gnolia.com/ Ma.gnolia] - each user's public profile is located at <nowiki>http://ma.gnolia.com/people/userNameHere</nowiki> . Note: [[hcard-supporting-user-profiles-issues#Magnolia|issue(s)]].
* http://www.mixx.com/images/buttons/mixx-button4.png [http://www.mixx.com Mixx] - profiles are located at <nowiki>http://www.mixx.com/users/USERNAME</nowiki> e.g. http://www.mixx.com/users/jgarber
* [http://myopenid.com MyOpenID] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - profiles are located at <nowiki>http://USERNAME.myopenid.com</nowiki> e.g. http://tantek.myopenid.com/
* [http://www.nsyght.com/ Nsyght] - Visit your profile page. Should look like this: <nowiki>http://www.nsyght.com/friends/[username]/</nowiki>, e.g. [http://nsyght.com/users/lisa sample profile].
* http://www.bkmks.com/icons/nytimes.com.gif [http://timespeople.nytimes.com/ NYTimes TimesPeople] - e.g. http://timespeople.nytimes.com/view/user/19390043/1/index.html
* [http://www.obsidianportal.com Obsidian Portal] - Your profile page is located at <nowiki>http://www.obsidianportal.com/profile/USERNAME</nowiki>, e.g. [http://www.obsidianportal.com/profile/Micah Micah's profile].
* [http://www.osocial.net/network/ OSocial Network] - add the [http://www.osocial.net/network/app/osocialnetwork.xml OpenSocial application] into your social network, then in OSocial.net Web site you will be able to get your hCard profile
* http://pulse.plaxo.com/pulse/img/event_icons/plaxo.gif [http://www.plaxo.com/ Plaxo] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - create a nickname in your settings, then go to NICKNAME.myplaxo.com (e.g. http://joseph.myplaxo.com) and copy the URL
* http://www.syncup.com/SupWeb/ajax/images/16pxSyncUpIcon.gif [http://www.syncup.com/ SyncUp] - create a free account, choose what information to expose to public or specific people, then get the hcard in your profile page
* [http://www.qmpeople.com/ qmpeople] - Uses hCard+XFN for profiles (<nowiki>http://www.qmpeople.com/users/[username]</nowiki> - e.g. [http://www.qmpeople.com/users/laserion laserion])
* [http://radar.net/ Radar] - http://radar.net/people/radarname
* [http://www.revish.com/ Revish] — profiles are located at revish.com/people/username e.g. http://www.revish.com/people/adactio
* [http://rosebleed.net/ Rosebleed] - 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].
* [http://www.getsatisfaction.com/ Satisfaction]
* [http://scipeople.com/ SciPeople] Uses hCard+XFN for profiles (http://[username].scipeople.com/)
* http://skateboardspot.info/image/icon/favicon.png [http://skateboardspot.info/ skateboardspot.info] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif (The site doesn't provide, but supports OpenID to login and register) — Log in, and click on your username in the top right corner. You'll see your user page which also is your hCard. Just copy the URL and you're done.
* [http://www.sustainlane.com www.sustainlane.com] - Profile at <nowiki>http://www.sustainlane.com/members/[user id]</nowiki> [http://www.sustainlane.com/members/4YHJXMST4S1B3NZT1HCSB4OAIVYD Example]
* [http://tangler.com/ Tangler] - click on a person's profile to navigate to their profile which is marked up with hCard <nowiki>http://www.tangler.com/people/id/</nowiki> - where "id" is the user number of that person.
* http://technorati.com/tools/mozsearch/technorati.png [http://technorati.com/ Technorati] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - login, click on the "Signed in as username" username link at the top right of the page, and copy the URL which should start with <nowiki>http://technorati.com/profile/</nowiki>
* [http://threadless.com/ Threadless] - select "My Account" and then "Profile Page". URL looks like <nowiki>http://www.threadless.com/profile/123987/username</nowiki>
* [http://www.travellerspoint.com/ Travellerspoint] - In use on all member profiles. URLs look like <nowiki>http://www.travellerspoint.com/member_profile.cfm?user=UsernameHere</nowiki> (e.g., [http://www.travellerspoint.com/member_profile.cfm?user=Peter Peter])
* http://pulse.plaxo.com/pulse/img/event_icons/Twitter.gif [http://twitter.com/ Twitter] - login, click on "Your profile" at the top, and copy the URL
* http://pulse.plaxo.com/pulse/img/event_icons/Upcoming.gif [http://upcoming.yahoo.com/ Upcoming] - login, click on the "Welcome, username!" username link at the top right of the page, and copy the URL which should start with <nowiki>http://upcoming.yahoo.com/user/</nowiki>
* [http://videntity.org/ Videntity.org] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - e.g. http://danda.videntity.org/
* [http://www.vimeo.com/ Vimeo] — e.g. http://www.vimeo.com/user196031
* http://openid.net/wp-content/uploads/vox.png [http://vox.com/ Vox] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - profile URL is <nowiki>http://USERNAME.vox.com/profile/</nowiki> e.g. http://daveman692.vox.com/profile/ (note issue: empty "n" property. fix: remove "n" from class attribute).
* [http://www.yedda.com/ Yedda] - e.g. http://yedda.com/people/8625713501419/ built by [http://www.zaadz.com Zaadz]
* [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://www.dandyid.org/ DandyID.org] - hCard on user profiles, and a hCard widget for users blogs/sits/etc. (login to see the widget). Profile e.g. http://www.dandyid.org/beta/users/user_id/3
* ... add more sites (alphabetically sorted please) that support hCard, including instructions for finding and copying your profile URL.
</div>

=== offline sites ===
Sites that supported hCard user profiles that have gone offline, perhaps permanently.
* [http://consumating.com/ Consumating]
** supported hCard profiles at least from sometime in 2006 to 2008-03-15 when the site went offline. Past instructions to get profile URL: login, click on your name or "My Profile" link, copy the URL which looks like <nowiki>http://consumating.com/profiles/userNameHere</nowiki>
* http://pulse.plaxo.com/pulse/img/event_icons/Pownce.gif [http://pownce.com/ Pownce]
** supported hCard profiles at least from sometime in 2007 to 2009-01-31 when the site went offline. Past instructions to get profile URL: login, click on the "Home" link at the top, and copy the URL.

== Services that import hCard profiles==
The following web sites support importing your existing hCard user profile, e.g. from the above sites, or your own page. Feel free to add sites supporting hCard user profile import to the appropriate section here. Please include a link to the site home page, and instructions for how to import your existing hCard user profile to the site.

=== import and subscribe on sign-up ===
Site(s) that allow you to import ''and'' subscribe to your hCard user profile when signing-up.. Alphabetically sorted.
* [http://getsatisfaction.com/ Satisfaction Inc.] - go to [http://getsatisfaction.com/people/new their sign in and registration page], choose the service of your existing profile or "'''Other...'''" and enter your profile URL (which you can retrieve as described above), and click "'''Get Profile'''". Then check "'''[x] Subscribe to this profile'''". Note: [[hcard-supporting-user-profiles-issues#Satisfaction|issue(s)]].

See [[subscribe-to-hcard]] for more notes on implementing subscribing to a user's hCard to automatically update their profile information.

=== import on sign-up ===
Site(s) that allow you to import your hCard user profile to sign-up. Alphabetically sorted.
* [http://www.bragster.com/ bragster] - go to [http://www.bragster.com/signup the sign-up page], click on the service logo of your existing profile, or the microformats logo for 'other' and enter your profile username (or URL for 'other') (which you can retrieve as described above).

=== import anytime ===
Sites that let you import your external hCard profile information anytime.
* [http://php-profile-importer.origo.ethz.ch/ PHP Profile importer] - Open Source PHP and JavaScript profile importer, there is also a [http://proofile.org/profile_importer_demo demo available].
* [http://www.proofile.org proofile] - [http://proofile.org/register Sign up] for an account and view the [http://proofile.org/edit/profile edit profile] page, enabling you to import from any hCard annotated URL. Full hCard is supported.
* [http://www.dandyid.org DandyID] - import a hCard supporting url after signing up, for auto-filling user info. DandyID also renders detailed hCards on user profiles.

=== subscribe anytime ===
Sites that let you subscribe to your external hCard profile information anytime.
* None currently.
=== delegation ===
Sites that support fully delegating to your external hCard profile.
* None currently.

== For more information ==
Want to implement hCard on your site so you can list it here?

See the [[hcard-user-profile-authoring|hCard user profile authoring]] page for how to mark-up a user profile with hCard.

Join the [http://microformats.org/discuss microformats community], in particular the #microformats IRC channel on irc://irc.freenode.net#microformats and the [http://microformats.org/mailman/listinfo/microformats-dev/ microformats-dev mailing list], and send a message stating that you'd like to add hCard to the profiles and hCard+XFN supporting friends lists to your website.

Please also consider implementing [[hcard-xfn-supporting-friends-lists|hCard+XFN friends lists]].

See [[hcard-supporting-user-profiles-issues|hCard supporting user profiles issues]] for issues, problems with implementations.

== see also ==
* [[subscribe-to-hcard]]
* [[hcard-xfn-supporting-friends-lists|hCard+XFN friends lists]]
* [[social-network-portability]]
* [[user-interface]]
* [[hcard|hCard]] ([[hcard-authoring|authoring]], [[hcard-faq|FAQ]])
* [[xfn|XFN]]
* [[data-portability]]

hcard-supporting-user-profiles

2009-09-23T16:44:12Z

Karstenj:

<entry-title>hCard supporting user profiles</entry-title>
One of many sets of [[hcard-examples-in-wild|hCard examples in the wild]].

Welcome! If you have an account on any of the following services, you already have an [[hcard|hCard]] which you can provide to other services to import or subscribe your profile information. The ability to syndicate your profile from the service of your choice is a key component of [[social-network-portability]].

;short URL
:http://tr.im/hcards

== Services with hCard profiles that also provide OpenID ==
The following web sites support both hCard on user profiles and the ability to use your user profile as an [[OpenID]]. Alphabetically sorted. Feel free to add sites with hCard profiles that are also OpenID URLs here. Please include a link to the site home page (or [[implementations]] entry).

<div style="font-size:larger">
* http://www.betaid.org/i/icn_betaid.png [http://www.betaid.org Beta ID]
* http://claimid.com/images/badges/claimidclear10x10.gif [http://claimid.com/ ClaimID]
* [http://email-verify.appspot.com/ Email Verify]
* http://identoo.com/images/icons/services/identoo.gif [http://identoo.com/ Identoo]
* http://pulse.plaxo.com/pulse/img/event_icons/LiveJournal.gif [http://livejournal.com LiveJournal]
* [http://myopenid.com MyOpenID]
* http://pulse.plaxo.com/pulse/img/event_icons/plaxo.gif [http://www.plaxo.com/ Plaxo]
* http://technorati.com/tools/mozsearch/technorati.png [http://technorati.com/ Technorati]
* [http://videntity.org/ Videntity.org]
</div>

== All services with hCard profiles ==
The following web sites support hCard on their user profiles and are thus suitable for importing/subscribing to other sites that support hCard. Sites that you can also use as your [[OpenID]] are annotated with a OpenID icon http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif following the name of the site.

Alphabetically sorted. Feel free to add all sites with hCard profiles here. Please include a link to the site home page (or [[implementations]] entry), and instructions for retrieving your user profile URL on that site. If the site's user profile URLs can also be used as OpenIDs, please add the OpenID icon http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif following the name of the site.

<div style="font-size:larger">
* [http://3eep.com/ 3eep] - each user's public profile is located at <nowiki>http://3eep.com/users/userNameHere</nowiki>
* [http://www.artistserver.com/ ArtistServer] - each user's public profile is located at <nowiki>http://www.artistserver.com/userURLHere</nowiki>
* http://www.betaid.org/i/icn_betaid.png [http://www.betaid.org Beta ID] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif
* [http://www.bragster.com/ bragster] - each user's public profile is located at <nowiki>http://www.bragster.com/member/username</nowiki>
* http://claimid.com/images/badges/claimidclear10x10.gif [http://claimid.com/ ClaimID] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - each user's public profile is located at <nowiki>http://claimid.com/userNameHere</nowiki>
* [http://email-verify.appspot.com/ Email Verify] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif
* http://identoo.com/images/icons/services/corkd.gif [http://www.corkd.com/ Cork'd] - login and copy the URL which should start with <nowiki>http://www.corkd.com/people/</nowiki>
* http://pulse.plaxo.com/pulse/img/event_icons/Digg.gif [http://digg.com/ Digg] - e.g. http://digg.com/users/tantek
* [http://djangopeople.net/ Django People] — profiles are at djangopeople.net/username e.g. http://djangopeople.net/simon/
* http://identoo.com/images/icons/services/dopplr.gif [http://www.dopplr.com/ Dopplr] — Example public profile: http://www.dopplr.com/traveller/adactio - non-public profiles may require login to view.
* http://pulse.plaxo.com/pulse/img/event_icons/Facebook.gif [http://facebook.com/ Facebook] - not sure how to find someone's public profile URL, e.g. [http://www.facebook.com/people/Andrei_Zmievski/502957990 Andrei Zmievski] but when found it appears to have support for valid fn+photo properties. Note [[hcard-supporting-user-profiles-issues#Facebook|issue(s) with Facebook hCard profiles]].
* [http://ficlets.com/ Ficlets] — profiles are located at ficlets.com/authors/username e.g. http://ficlets.com/authors/adactio
* http://pulse.plaxo.com/pulse/img/event_icons/Flickr.gif [http://flickr.com/ Flickr] - login, click "Your Photos", click "Profile", and copy the URL which should start with <nowiki>http://flickr.com/people/</nowiki>
* [http://gaia.com/ Gaia Community] - e.g. http://sphorbis.gaia.com/ - built by [http://www.zaadz.com Zaadz]
* [http://google.com Google] - view your profile at http://www.google.com/s2/profiles/me
* [http://huffduffer.com Huffduffer] profiles are located at <nowiki>http://huffduffer.com/username</nowiki> — Example public profile: http://huffduffer.com/clagnut
* http://identoo.com/images/icons/services/identoo.gif [http://identoo.com/ Identoo] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - e.g. [http://identoo.com/dirk.olbertz sample profile]
* http://idleaf.com/favicon.png [http://idleaf.com idleaf] - profiles are located at <nowiki>http://idleaf.com/IDENTITY_ID</nowiki> - e.g.: http://idleaf.com/ID4184
* http://identoo.com/images/icons/services/imthere.gif [http://imthere.com/ ImThere] - profiles are located at <nowiki>http://imthere.com/users/USERNAME</nowiki>
* http://jaiku.com/images/icons/fav-jaiku.gif [http://jaiku.com Jaiku] — profiles are located at username.jaiku.com e.g. http://adactio.jaiku.com/
* [http://jpgmag.com/ JPG Magazine] - each user's public profile is located at <nowiki>http://jpgmag.com/people/userNameHere</nowiki>, e.g. http://jpgmag.com/people/jpd
* [http://www.keevu.com Keevu.com] - profiles are located at <nowiki>http://www.keevu.com/users/USERNAME</nowiki> - e.g.: [http://www.keevu.com/users/zheileman Zheileman]
* http://www.iconarchive.com/icons/fasticon/web-2/MySpace-24x24.png [http://myspace.com] MySpace -- Profile 2.0 supports hCard, e.g.http://myspace.com/irhetoric Profile 1.0, however, does not.
* http://pulse.plaxo.com/pulse/img/event_icons/LastFM.gif [http://www.last.fm/ Last FM] - profiles are located at <nowiki>http://last.fm/user/USERNAME</nowiki>, includes fn, photo, url.
* http://pulse.plaxo.com/pulse/img/event_icons/LinkedIn.gif [http://linkedin.com LinkedIn] - login, click on "[http://www.linkedin.com/myprofile?trk=tab_pro My Profile]" in the top blue bar, then click on "[http://www.linkedin.com/myprofile?editwp=&trk=tab_web Public Profile]" and copy the URL in the page after "Your current URL is:" which should start with <nowiki>http://www.linkedin.com/pub/ or http://www.linkedin.com/in/</nowiki>. Note: LinkedIn profiles include an [[hresume|hResume]] for you in addition to your hCard.
* http://pulse.plaxo.com/pulse/img/event_icons/LiveJournal.gif [http://livejournal.com LiveJournal] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif (see also [[implementations#LiveJournal|LiveJournal]] implementation page entry) - login, click on the "Profile" link, and copy the URL which should start with <nowiki>http://USERNAME.livejournal.com/profile</nowiki> where USERNAME is your LJ username. E.g. [http://daveman692.livejournal.com/profile].
* http://pulse.plaxo.com/pulse/img/event_icons/Magnolia.gif [http://ma.gnolia.com/ Ma.gnolia] - each user's public profile is located at <nowiki>http://ma.gnolia.com/people/userNameHere</nowiki> . Note: [[hcard-supporting-user-profiles-issues#Magnolia|issue(s)]].
* http://www.mixx.com/images/buttons/mixx-button4.png [http://www.mixx.com Mixx] - profiles are located at <nowiki>http://www.mixx.com/users/USERNAME</nowiki> e.g. http://www.mixx.com/users/jgarber
* [http://myopenid.com MyOpenID] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - profiles are located at <nowiki>http://USERNAME.myopenid.com</nowiki> e.g. http://tantek.myopenid.com/
* [http://www.nsyght.com/ Nsyght] - Visit your profile page. Should look like this: <nowiki>http://www.nsyght.com/friends/[username]/</nowiki>, e.g. [http://nsyght.com/users/lisa sample profile].
* http://www.bkmks.com/icons/nytimes.com.gif [http://timespeople.nytimes.com/ NYTimes TimesPeople] - e.g. http://timespeople.nytimes.com/view/user/19390043/1/index.html
* [http://www.obsidianportal.com Obsidian Portal] - Your profile page is located at <nowiki>http://www.obsidianportal.com/profile/USERNAME</nowiki>, e.g. [http://www.obsidianportal.com/profile/Micah Micah's profile].
* [http://www.osocial.net/network/ OSocial Network] - add the [http://www.osocial.net/network/app/osocialnetwork.xml OpenSocial application] into your social network, then in OSocial.net Web site you will be able to get your hCard profile
* http://pulse.plaxo.com/pulse/img/event_icons/plaxo.gif [http://www.plaxo.com/ Plaxo] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - create a nickname in your settings, then go to NICKNAME.myplaxo.com (e.g. http://joseph.myplaxo.com) and copy the URL
* http://www.syncup.com/SupWeb/ajax/images/16pxSyncUpIcon.gif [http://www.syncup.com/ SyncUp] - create a free account, choose what information to expose to public or specific people, then get the hcard in your profile page
* [http://www.qmpeople.com/ qmpeople] - Uses hCard+XFN for profiles (<nowiki>http://www.qmpeople.com/users/[username]</nowiki> - e.g. [http://www.qmpeople.com/users/laserion laserion])
* [http://radar.net/ Radar] - http://radar.net/people/radarname
* [http://www.revish.com/ Revish] — profiles are located at revish.com/people/username e.g. http://www.revish.com/people/adactio
* [http://rosebleed.net/ Rosebleed] - 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].
* [http://www.getsatisfaction.com/ Satisfaction]
* [http://scipeople.com/ SciPeople] Uses hCard+XFN for profiles (http://[username].scipeople.com/)
* http://skateboardspot.info/image/icon/favicon.png [http://skateboardspot.info/ skateboardspot.info] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif (The site doesn't provide, but supports OpenID to login and register) — Log in, and click on your username in the top right corner. You'll see your user page which also is your hCard. Just copy the URL and you're done.
* [http://www.sustainlane.com www.sustainlane.com] - Profile at <nowiki>http://www.sustainlane.com/members/[user id]</nowiki> [http://www.sustainlane.com/members/4YHJXMST4S1B3NZT1HCSB4OAIVYD Example]
* [http://tangler.com/ Tangler] - click on a person's profile to navigate to their profile which is marked up with hCard <nowiki>http://www.tangler.com/people/id/</nowiki> - where "id" is the user number of that person.
* http://technorati.com/tools/mozsearch/technorati.png [http://technorati.com/ Technorati] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - login, click on the "Signed in as username" username link at the top right of the page, and copy the URL which should start with <nowiki>http://technorati.com/profile/</nowiki>
* [http://threadless.com/ Threadless] - select "My Account" and then "Profile Page". URL looks like <nowiki>http://www.threadless.com/profile/123987/username</nowiki>
* [http://www.travellerspoint.com/ Travellerspoint] - In use on all member profiles. URLs look like <nowiki>http://www.travellerspoint.com/member_profile.cfm?user=UsernameHere</nowiki> (e.g., [http://www.travellerspoint.com/member_profile.cfm?user=Peter Peter])
* http://pulse.plaxo.com/pulse/img/event_icons/Twitter.gif [http://twitter.com/ Twitter] - login, click on "Your profile" at the top, and copy the URL
* http://pulse.plaxo.com/pulse/img/event_icons/Upcoming.gif [http://upcoming.yahoo.com/ Upcoming] - login, click on the "Welcome, username!" username link at the top right of the page, and copy the URL which should start with <nowiki>http://upcoming.yahoo.com/user/</nowiki>
* [http://videntity.org/ Videntity.org] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - e.g. http://danda.videntity.org/
* [http://www.vimeo.com/ Vimeo] — e.g. http://www.vimeo.com/user196031
* http://openid.net/wp-content/uploads/vox.png [http://vox.com/ Vox] http://openid.net/wp-content/uploads/2007/10/openid_small_logo_white.gif - profile URL is <nowiki>http://USERNAME.vox.com/profile/</nowiki> e.g. http://daveman692.vox.com/profile/ (note issue: empty "n" property. fix: remove "n" from class attribute).
* [http://www.yedda.com/ Yedda] - e.g. http://yedda.com/people/8625713501419/ built by [http://www.zaadz.com Zaadz]
* [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://www.dandyid.org/ DandyID.org] - hCard on user profiles, and a hCard widget for users blogs/sits/etc. (login to see the widget). Profile e.g. http://www.dandyid.org/beta/users/user_id/3
* ... add more sites (alphabetically sorted please) that support hCard, including instructions for finding and copying your profile URL.
</div>

=== offline sites ===
Sites that supported hCard user profiles that have gone offline, perhaps permanently.
* [http://consumating.com/ Consumating]
** supported hCard profiles at least from sometime in 2006 to 2008-03-15 when the site went offline. Past instructions to get profile URL: login, click on your name or "My Profile" link, copy the URL which looks like <nowiki>http://consumating.com/profiles/userNameHere</nowiki>
* http://pulse.plaxo.com/pulse/img/event_icons/Pownce.gif [http://pownce.com/ Pownce]
** supported hCard profiles at least from sometime in 2007 to 2009-01-31 when the site went offline. Past instructions to get profile URL: login, click on the "Home" link at the top, and copy the URL.

== Services that import hCard profiles==
The following web sites support importing your existing hCard user profile, e.g. from the above sites, or your own page. Feel free to add sites supporting hCard user profile import to the appropriate section here. Please include a link to the site home page, and instructions for how to import your existing hCard user profile to the site.

=== import and subscribe on sign-up ===
Site(s) that allow you to import ''and'' subscribe to your hCard user profile when signing-up.. Alphabetically sorted.
* [http://getsatisfaction.com/ Satisfaction Inc.] - go to [http://getsatisfaction.com/people/new their sign in and registration page], choose the service of your existing profile or "'''Other...'''" and enter your profile URL (which you can retrieve as described above), and click "'''Get Profile'''". Then check "'''[x] Subscribe to this profile'''". Note: [[hcard-supporting-user-profiles-issues#Satisfaction|issue(s)]].

See [[subscribe-to-hcard]] for more notes on implementing subscribing to a user's hCard to automatically update their profile information.

=== import on sign-up ===
Site(s) that allow you to import your hCard user profile to sign-up. Alphabetically sorted.
* [http://www.bragster.com/ bragster] - go to [http://www.bragster.com/signup the sign-up page], click on the service logo of your existing profile, or the microformats logo for 'other' and enter your profile username (or URL for 'other') (which you can retrieve as described above).

=== import anytime ===
Sites that let you import your external hCard profile information anytime.
* [http://php-profile-importer.origo.ethz.ch/ PHP Profile importer] - Open Source PHP and JavaScript profile importer, there is also a [http://proofile.org/profile_importer_demo demo available].
* [http://www.proofile.org proofile] - [http://proofile.org/register Sign up] for an account and view the [http://proofile.org/edit/profile edit profile] page, enabling you to import from any hCard annotated URL. Full hCard is supported.
* [http://www.dandyid.org DandyID] - import a hCard supporting url after signing up, for auto-filling user info. DandyID also renders detailed hCards on user profiles.

=== subscribe anytime ===
Sites that let you subscribe to your external hCard profile information anytime.
* None currently.
=== delegation ===
Sites that support fully delegating to your external hCard profile.
* None currently.

== For more information ==
Want to implement hCard on your site so you can list it here?

See the [[hcard-user-profile-authoring|hCard user profile authoring]] page for how to mark-up a user profile with hCard.

Join the [http://microformats.org/discuss microformats community], in particular the #microformats IRC channel on irc://irc.freenode.net#microformats and the [http://microformats.org/mailman/listinfo/microformats-dev/ microformats-dev mailing list], and send a message stating that you'd like to add hCard to the profiles and hCard+XFN supporting friends lists to your website.

Please also consider implementing [[hcard-xfn-supporting-friends-lists|hCard+XFN friends lists]].

See [[hcard-supporting-user-profiles-issues|hCard supporting user profiles issues]] for issues, problems with implementations.

== see also ==
* [[subscribe-to-hcard]]
* [[hcard-xfn-supporting-friends-lists|hCard+XFN friends lists]]
* [[social-network-portability]]
* [[user-interface]]
* [[hcard|hCard]] ([[hcard-authoring|authoring]], [[hcard-faq|FAQ]])
* [[xfn|XFN]]
* [[data-portability]]

value-class-pattern

2009-08-26T15:17:08Z

Karstenj: /* Implementations */

<entry-title>Value Class Pattern</entry-title>

The value class pattern is derived from [[hCard#Value_excerpting|value-excerpting]] in hCard.

''The editors believe the value-class-pattern to be feature complete and ready for use in markup. Implementers are encouraged to update accordingly and provide [[value-class-pattern-feedback|feedback]]. '''Note''', the precise parsing behavior could change in response to implementer feedback, but the core methods are stable. You should watch this page for updates.''

See also, the [http://microformats.org/blog/2009/05/12/value-class-pattern/ blog announcement].

__TOC__
; Editors
: [[User:BenWard|Ben Ward]]
: [[User:Tantek|Tantek Çelik]]
; Short URL
: <kbd>http://tr.im/valueclass</kbd>

Sometimes, only a part of an element's content is to be used as the value of a microformat property. This may occur when a property has optional subproperties, such as <code>tel: type</code> and <code>tel: value</code> in [[hCard]]. Other times, the most appropriate structure for a property may include other content.

For these purposes, the special class name <code>value</code> is used to mark-up the relevant data excerpt from larger element content.

==Simple Examples==

Here is markup for a home phone number:

vCard fragment:

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

hCard fragment:

<source lang=html4strict>

Home:
+1.415.555.1212

</source>

In this case, the <code>value</code> of <code>tel</code> is <code>+1.415.555.1212</code>, not <code>Home: +1.415.555.1212</code>.

Sometimes the value for a microformats property must be split into multiple pieces in the content of the element representing that property. Multiple elements with a class name of "value" (value elements) can be used to extract and concatenate these pieces into a single value for microformats properties which expect simple strings or tel values.

Another example, this time using a localized (British) telephone number:

<source lang=html4strict>

Home:
+44 (0) 1223 123 123

</source>

In this case, the valid ''data'' for the telephone number is <samp>+441223123123</samp>, but the way in which phone number is presented in Britain will include the <samp>(0)</samp>, for local dialling. That is, from anywhere in the world you may dial <kbd>+441223123123</kbd>, or from within Britain you may dial <kbd>01223123123</kbd>. Common local publishing interferes with the data, since dialling <kbd>'''+440'''1223123123</kbd> is an invalid number.

In the mark-up, two <code>value</code> classes target the part of the telephone number string that makes an international, valid number, whilst allowing conventional presentation.

Another example, adding a place name to a [[geo]] co-ordinate:

<source lang=html4strict>
I'm loitering outside The Bricklayer's Arms

51° 30' 48.45", -0° 8' 53.23"
(51.513458;-0.14812)


</source>

Whilst the entire string is a geo point, it's only the decimal encoded co-ordinates which must be consumed by a microformats parser, so the <code>value</code> class isolates it from the degrees form, which the publisher includes for completeness.

==Basic Parsing==
# The value class pattern only applies to properties which are simple strings, enumerated values, telephone numbers, and datetimes. The value class pattern does not affect parsing of properties of type email, URL, URI, UID.
# Where an element with such a microformat property class name has a descendant with class name <code>value</code> (a "value" element), parsers should use the following portion of that element:
## if the value element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
## if the value element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
## for any other element, use its inner-text.
# Where there are multiple descendants of a property with class name of <code>value</code> (multiple value elements)
## if the microformats property expects a simple string, enumerated value, or telephone number, then the values extracted from the value elements should be concatenated ''without'' inserting additional characters or white-space.
## if the microformats property expects a datetime value, see the [[#Date_and_time_parsing|Date Time Parsing]] section.
# Descendants with class of <code>value</code> must not be parsed deeper than one level. That is, where an element <code>foo</code> with class <code>value</code> has a descendant <code>bar</code> with class <code>value</code>, the content of <code>foo</code> is taken as the <code>value</code>. Nesting additional elements with class of <code>value</code> cannot be used to further isolate a property's value.

e.g.

<source lang=html4strict>


Puppies Rule!
But kittens are better!


</source>

In this example, <code>description</code> has a child ‘<code>value</code>’, and that child has a ''grandchild'' ‘<code>value</code>’. However, the parsing of <code>value</code> classes stops at the first level, so the data for <code>description</code> is: <samp><code>Puppies Rule!But kittens are better!</code></samp>, not just <samp>Puppies Rule!</samp>.

== Date and time values ==
Some microformats properties expect an ISO8601 datetime value, e.g. [[hCalendar]] <code>dtstart</code> and <code>dtend</code> or [[hAtom]] <code>published</code>.

Authors may use the value class pattern to separately specify the date and the time, which are then combined to specify a single datetime value.

Example, this hCalendar 'dtstart' property with 'value' elements:

<source lang=html4strict>
The weekly dinner will be on

<abbr class="value" title="2008-06-24">this Tuesday</abbr>
at 18:30


</source>

produces the following 'dtstart' value:

<source lang=text>
2008-06-24T18:30:00
</source>

and iCalendar converters produce the following DTSTART:

<source lang=text>
DTSTART:20080624T183000
</source>

The lack of a timezone indicates a "floating" datetime, that is a datetime independent of any particular timezone. Examples of floating datetimes could be an alarm clock you set to ring at 7am, or the common 9am-5pm workday.

=== Date and time parsing ===
For all date time properties (as defined in their respective microformats specifications), the following rules apply in addition to (and in some cases replacing) the above value class pattern parsing rules.

When a "value" element is found, parse a value from the element as follows:
* if the element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
* if the element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
* for any other element, use its inner-text.
* if the value has both a specific ISO8601 date and a specific time, use those and stop looking for "value" elements.
* if the value has *only* a specific date, specifically, fits the following ISO8601 date patterns (i.e. as documented in the [http://en.wikipedia.org/wiki/ISO_8601 Wikipedia summary of ISO8601])
** YYYY-MM-DD
** YYYY-DDD
** then use that as the date value. For the purposes of the value class pattern, the hyphens "-" separating the year, month, day and/or ordinal day are required.
** ignore any further "value" elements that specify the date.
* if the value has *only* a specific time (with or without timezone), parse it for a time value that can match any of the following:
** 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 is the 24 hour "hours" in the time, from 00 to 24, with optional leading 0 for values less than 10.
** MM are the minutes from 00 to 59
** SS are the optional seconds from 00 to 59 (60 for a leap second). If omitted, infer 00 seconds.
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** For the purposes of the value class pattern, the colons ":" separating the hour, minutes, seconds are required.
** However the colons ":" separating the hours and minutes of any timezone offset are ''optional'' and discouraged in order to make it less likely that a timezone offset will be confused for a time.
** Under strong consideration: case insensitive { }"am"|{ }"a.m." suffix to treat an HH value of 12 as 00, or a case-insensitive { }"pm"|{ }"p.m." suffix to add 12 to HH value less than 12 - per [http://en.wikipedia.org/wiki/12-hour_clock Wikipedia article on the 12 hour clock]. Note: [[X2V]] has implemented this.
*** HH:MM:SSam
*** HH:MM:SSpm
*** HH:MMam
*** HH:MMpm
*** HHam
*** HHpm
*** where "am" and "pm" mean "am or a.m." and "pm or p.m."
*** when MM is omitted, infer 00 minutes.
** ignore any further "value" elements that specify the time.
* if the value has *only* a specific timezone, parse it for a time zone value that can match any of the following:
** -XX:YY
** +XX:YY
** -XXYY
** +XXYY
** -XX
** +XX
** Z
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** ignore any further "value" elements that specify the timezone.

If by parsing the "value" element(s), at least a specific date has been found, then the "value" is overall valid, and the parser assembles the overall datetime value by concatenating the specific date, "T" and specific time (if time was specified, with 00 seconds implied if no seconds are provided), and specific timezone (if timezone and a specific time was specified).
* YYYY-MM-DD - no time specified
* YYYY-MM-DDTHH:MM:SS - time specified but no timezone. This is a floating time.
* YYYY-MM-DDTHH:MM:SS-XXYY or
* YYYY-MM-DDTHH:MM:SSZ or
* YYYY-MM-DDTHH:MM:SS+XXYY - both time and timezone were specified.

iCalendar converters in addition must do the following:
* remove any dash "-" separators in the date.
* remove any colon ":" separators in the time.
* perform datetime math on any +/- relative timezone value, and produce an effective UTC value ending with "Z".

Atom converters in addition must do the following:
* normalize all date and datetime values to RFC 3339.

=== derivation and tests ===
The handling of date and time values in the value class pattern was originally [[value-excerption-pattern-brainstorming#date_and_time_separation|brainstormed on the value-excerption-pattern-brainstorming]] page and derived from that analysis and feedback. For the curious, historical details may be found there, along with additional thoughts for extension.

See [[value-class-date-time-tests]] for test cases.

=== format specific optimizations ===
The following are format specific optimizations under strong consideration that make use of the value-class-pattern. Note: [[X2V]] has implemented this for hCalendar.

;short URL for this section
:http://tr.im/vcpfso

==== hCalendar dtend implied date ====
Typically events that start and end the same day only display the date of the event once (makes sense per the DRY [[principle]]) (real world examples: [http://upcoming.yahoo.com/event/3010807/ Upcoming], ... more examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hCalendar]] event "dtend" date from its "dtstart" date when only the time (and optionally timezone) was specified for its "dtend", e.g.:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

To simplify this further for authors, hCalendar processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "dtend" span:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

hCalendar to iCalendar converters should produce the following iCalendar fragment (as part of a valid .ics file) from either of the above two examples:

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

Note: [[X2V]] has implemented this.

Examples "in the wild":
* http://microformats.org/wiki/events/2009-08-12-nyc-workshop (real world example, but on this wiki).

==== hAtom updated implied date ====
Similarly, in blog posts that indicate both when they were "published" and "updated", the date is usually only displayed once, typically when "published" (real world examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hAtom]] entry "updated" date from its "published" date when only the time (and optionally timezone) was specified for its "updated", e.g. for a blog post that was updated the same day:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

To simplify this further for authors, hAtom processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "updated" span:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

==Parsing value from a <code>title</code> attribute==
The <code>value-title</code> class name allows the publisher to indicate the data value for a parent property is contained in the <code>title</code> attribute of an element, rather than the inner-text.

This can be used to provide a synonym within content, or used to quietly publish alternate forms of information for microformats parsing, without affecting the consumption of content.

For example, you can use casual localization with dates:

<source lang=html4strict>
It was

last year

that I realised my addiction to cashew nuts would cost this country so dear.

</source>

Parsing rules for <code>value-title</code> are the same as for <code>value</code> above, with the following change:

* Where a microformats property has a child element with class name of <code>value-title</code>, the content of the <code>title</code> attribute of that element must be parsed, rather than the portion of the element that would be parsed for a class name of <code>value</code>.

===Using <code>value-title</code> to publish machine-data===

The initial usage of <code>value-title</code> is used to publish alternate, parsable forms of property values in a visible context without the use of the <code>abbr</code> element whose semantics already support interpretation of the 'title' attribute as an expanded, more precise form of the content.

Experience has found that there are some cases in microformats where a number of publishers want to include a precisely accurate and parsable value for a property but do not want it to be visible in their page, even as a tooltip.

For example, full [[ISO8601]] datetimes may be confusing to readers of the page (as a tooltip or when read aloud by a screen reader), and enumerated values such as the <code>type</code> subproperty of hCard's <code>tel</code> property use US-English terms, which are not part of pages in any other language.

Since both of those scenarios have shown to be obstacles for a number of publishers, for these cases, and these alone, there exists a further extension of value-excerption. This extension allows the parsable form of the property to be published ‘silently’ immediately adjacent with the respective local visible content.

Here is an example, with the required use of a first child element with class name <code>value-title</code>:

<source lang=html4strict>


 
mobile

+44 7773 000 000

</source>

The <samp>cell</samp> value is parsed for the 'type' subproperty, but <samp>mobile</samp> is presented to the user.

In the case of dates:

<source lang=html4strict>

 
March 14th 2009, around half-past four

</source>

A microformats parser will read the ISO8601 format datetime <samp>2009-03-14T16:28-0600</samp>, but users will only see <samp>March 14th 2009, around half-past four</samp>. Testing has shown that the ISO8601 datetime above does not get exposed to any user at all.

===Parsing machine-data <code>value-title</code>===

Browsers collapse the <code>value-title</code> span down to a width of <code>0</code>, effectively providing no visual rendering, whilst keeping the element in the DOM. With no physical dimensions, there is no ‘hover’ state, so no tooltip is revealed. Furthermore, the empty element is not passed to assistive technology layers such as VoiceOver. Screen readers do not read the contents of the title attribute of an empty <code>span</code> element.

We conducted [[value-excerption-value-title-test|thorough testing]] of these parsing behaviors to ensure accessibility.

''Note: Whilst the <code>value-title</code> element is more gracefully written without whitespace inner-text (or as self-closing <code><foo /></code> element in XHTML), current tools such as WYSIWYG editors and HTML-Tidy will erroneously discard such elements, resulting in parsable data being thrown away by some tools. As such, <code> </code>, including a single whitespace character between the opening and closing tag, is the required pattern for authors, at this time.''

Parsing this final <code>value-title</code> extension imposes some stricter restrictions on usage. These restrictions exist to reduce the impact of <abbr title="Don't Repeat Yourself">DRY</abbr> violations, reduce the opportunity for sites to spoof data, and encourage best practice for maintaining both forms of data accurately.

Where an element with class <code>value-title</code> is to be parsed as data for a property, and that element also contains no non-whitespace content (hereafter referred to as ‘empty’), the following rules apply:

* The ‘empty’ value-title element must be the '''first, non-whitespace child''' of the property element. That is, it should follow immediately after the property is declared, before the human-readable form, and without any additional nesting.
* The ‘empty’ value-title element can only be used for specific properties. Microformat specifications must explicitly state which properties may be used with this extension of the value-class-pattern.
* Where an ‘empty’ value-title element is to be used as the single property value, it must be the ''only'' such <code>value</code> content. That is, the first instance of a conforming <code>value-title</code> element overrides all other <code>value</code> and <code>value-title</code> siblings and/or cousins.
* Tools written to perform Conformance Testing and/or Validation of microformats ''should'' attempt to compare the machine-data and human legible forms of the property data, and advise authors if the forms do not match.

=== limited use of value-title ===
Due to the fact that the value-title pattern hides some amount of data which tends to be a machine-specific duplicate of data that is provided in the human readable content, there are two microformats [[principles]] being compromised: '''visibility''' and '''<abbr title="Don't Repeat Yourself">DRY</abbr>'''. Thus the applicability of this pattern is deliberately restricted to properties that have demonstrated through experience a need for it, with no known better alternative.

In general authors should:

# First, try to directly specify microformats property values inline (the most visible, no duplication),
# Then consider using the value-class pattern
## Including multiple value elements for date and time properties
# and then only if those methods are insufficient, consider the value-title pattern.

This document post-dates other microformat specifications, such that they may not yet indicate which properties permit use of this pattern. In the interim, '''only''' the following types of properties should allow the value-title pattern.

* ISO8601 date, datetime, timezone, and duration values
* Enumerated values (such as the hCard tel/email/adr 'type' subproperties)
* Co-ordinates (such as the [[geo]] 'latitude' and 'longitude' properties)
* Telephone number properties (e.g. the hCard 'tel' property)

The [[machine-data]] page has documentation of some of the properties of some specs which experience has shown need a solution like the value-title pattern.

There are some simple reference examples and tests for this pattern on [[value-class-pattern-tests]].

In future use, ''specification authors'' may inherit use of <code>value-title</code> by use of ISO8601 date and time formats, or reuse of other microformats, but specifications should _avoid_ introducing new data structures that depend on or encourage this pattern. New specifications are themselves expected to adhere to the principals of visibile data and <abbr>DRY</abbr>.

== Test cases ==
See [[value-class-pattern-tests]].

== <abbr title='Frequently Asked Questions'>FAQ</abbr>==
This section is '''informative'''.

Frequently asked questions about the value-class-pattern. Once this section grows too big, we'll make a separate wiki page (like [[value-class-faq]]).

<div class='discussion'>
* '''Why use an 'empty' element? Why not embed data in the class attribute?'''
** The class attribute is inappropriate for embedded data values, as per the HTML4 specification, which states <code>class</code> is for ‘general purposing processing’, which is defined as ‘e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.’. ‘General purpose processing’ does not extend to data itself. Furthermore, this method avoids inventing a new string pattern for embedding data.
* '''Why use an 'empty' element? Why not make up a new attribute, like ‘data’?'''
** Microformats exist and function in ''valid'' HTML4 and XHTML1. Those are the current standards for web development, and microformats exist for use ''now''. In the future, perhaps revisions of HTML will offer up another solution. For now, this method has been tested against browsers, and creates a consistent document structure (where machine-form and human-form data are siblings).
* '''The <code>title</code> attribute should only be used for content!'''
** The <code>title</code> attribute ''is'' used for content and is read by microformats parsers. This exists for cases where data cannot be parsed with sufficient precision from just the commonly published, visible information. This pattern allows both forms of content to be included, whilst keeping it invisible to human consumers.
</div>

You can also refer to the general [[faq|Microformats FAQ]] and [[principles]].

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

The following sites and pages have started marking up content with the value-class-pattern, and are thus good places to go for examples with real world content to test with implementations (i.e. parsers). If you use the value-class-pattern in your content, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page (like [[value-class-examples-in-wild]]).

* [http://visitmix.com/labs/oomph/2.0/tests/test.html Test Harness For Oomph] This pages uses a whole range of different patterns for both hCard and hCalendar, using both value and value-title, mostly derived from the specification above
* [http://georgebrock.com/ George Brocklehurst's activity stream] and [http://blog.georgebrock.com/ blog] use "value-title" for hAtom <code>published</code> property
* [http://ben-ward.co.uk/ Ben Ward's home page] uses:
** "value-title" for hCard <code>bday</code> property
** "value-title" for hAtom <code>updated</code> property
* [http://microformats.org/ microformats.org] uses:
** "value-title" for hAtom <code>updated</code> property in [[http://microformats.org/ microformats.org blog postss]]]
** date and time value separation for hCalendar <code>dtstart</code> property in [[events|microformats.org recent and upcoming events wiki page]]

''Add your site/page(s) that use the value-class-pattern here, along with a brief description of what value-class-pattern features you use, with which microformat(s) and which of its/their properties.''

== Implementations ==

This section is '''informative'''.

The following implementations have been developed which either generate or parse value-class-pattern property values. If you have an value-class-pattern 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 (like [[value-class-implementations]]).

* [[Oomph]] Version 2 passes [[value-class-pattern-tests#Date_and_time_values|Date and time values test cases]] and is a thorough implementation of the value class pattern.
* [[X2V]] v0.9.3 and later:
** implements [[#Date_and_time_values|Date and time values parsing]], including am/pm time values
*** thus passes [[value-class-pattern-tests#Date_and_time_values|Date and time values test cases]].
** implements [[#hCalendar_dtend_implied_date|hCalendar implied dtend date]]
* [[Operator]] has *some* implementation of the value-class-pattern according to Michael Kaply, but precisely how much is implemented, for which properties (property types) and which microformats is not currently known.
* [[Optimus]] v0.8 and later implements <code>value-title</code> as [http://twitter.com/DmitryBaranovsk/status/1891253248 announced by Dmitry Baranovskiy].
* ... add your implementation(s) that parse or generate the value-class-pattern here, along with which features you support (hopefully all!) and note any limitations if any.

== Articles ==
Articles and blog posts discussing the value class pattern, most recent first.
When this section gets too big, create a separate page like: [[value-class-pattern-articles]]
* 2009-08-25 MIX Online: [http://visitmix.com/Articles/The-Value-Class-Pattern The Value Class Pattern] by Jeremy Keith
* [http://ablognotlimited.com/s/106 Getting Semantic With Microformats, Part 8: Value Class Pattern] -- A very thorough writeup by Emily Lewis on the 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]

==Related Pages==
This section is '''informative'''.

* [[value-class-pattern-tests]]
* [[value-excerption-pattern-issues]]
* [[hcard#Value_excerpting|hCard: Value Excepting]]
* [[value-excerption-pattern-brainstorming]]
* [[machine-data|Machine Data in Microformats]]

== References ==
This section is '''informative'''.
* [http://www.useit.com/alertbox/9608.html Jakob Nielsen: International Web Usability]

value-class-pattern

2009-08-26T15:15:24Z

Karstenj: /* Examples in the wild */

<entry-title>Value Class Pattern</entry-title>

The value class pattern is derived from [[hCard#Value_excerpting|value-excerpting]] in hCard.

''The editors believe the value-class-pattern to be feature complete and ready for use in markup. Implementers are encouraged to update accordingly and provide [[value-class-pattern-feedback|feedback]]. '''Note''', the precise parsing behavior could change in response to implementer feedback, but the core methods are stable. You should watch this page for updates.''

See also, the [http://microformats.org/blog/2009/05/12/value-class-pattern/ blog announcement].

__TOC__
; Editors
: [[User:BenWard|Ben Ward]]
: [[User:Tantek|Tantek Çelik]]
; Short URL
: <kbd>http://tr.im/valueclass</kbd>

Sometimes, only a part of an element's content is to be used as the value of a microformat property. This may occur when a property has optional subproperties, such as <code>tel: type</code> and <code>tel: value</code> in [[hCard]]. Other times, the most appropriate structure for a property may include other content.

For these purposes, the special class name <code>value</code> is used to mark-up the relevant data excerpt from larger element content.

==Simple Examples==

Here is markup for a home phone number:

vCard fragment:

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

hCard fragment:

<source lang=html4strict>

Home:
+1.415.555.1212

</source>

In this case, the <code>value</code> of <code>tel</code> is <code>+1.415.555.1212</code>, not <code>Home: +1.415.555.1212</code>.

Sometimes the value for a microformats property must be split into multiple pieces in the content of the element representing that property. Multiple elements with a class name of "value" (value elements) can be used to extract and concatenate these pieces into a single value for microformats properties which expect simple strings or tel values.

Another example, this time using a localized (British) telephone number:

<source lang=html4strict>

Home:
+44 (0) 1223 123 123

</source>

In this case, the valid ''data'' for the telephone number is <samp>+441223123123</samp>, but the way in which phone number is presented in Britain will include the <samp>(0)</samp>, for local dialling. That is, from anywhere in the world you may dial <kbd>+441223123123</kbd>, or from within Britain you may dial <kbd>01223123123</kbd>. Common local publishing interferes with the data, since dialling <kbd>'''+440'''1223123123</kbd> is an invalid number.

In the mark-up, two <code>value</code> classes target the part of the telephone number string that makes an international, valid number, whilst allowing conventional presentation.

Another example, adding a place name to a [[geo]] co-ordinate:

<source lang=html4strict>
I'm loitering outside The Bricklayer's Arms

51° 30' 48.45", -0° 8' 53.23"
(51.513458;-0.14812)


</source>

Whilst the entire string is a geo point, it's only the decimal encoded co-ordinates which must be consumed by a microformats parser, so the <code>value</code> class isolates it from the degrees form, which the publisher includes for completeness.

==Basic Parsing==
# The value class pattern only applies to properties which are simple strings, enumerated values, telephone numbers, and datetimes. The value class pattern does not affect parsing of properties of type email, URL, URI, UID.
# Where an element with such a microformat property class name has a descendant with class name <code>value</code> (a "value" element), parsers should use the following portion of that element:
## if the value element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
## if the value element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
## for any other element, use its inner-text.
# Where there are multiple descendants of a property with class name of <code>value</code> (multiple value elements)
## if the microformats property expects a simple string, enumerated value, or telephone number, then the values extracted from the value elements should be concatenated ''without'' inserting additional characters or white-space.
## if the microformats property expects a datetime value, see the [[#Date_and_time_parsing|Date Time Parsing]] section.
# Descendants with class of <code>value</code> must not be parsed deeper than one level. That is, where an element <code>foo</code> with class <code>value</code> has a descendant <code>bar</code> with class <code>value</code>, the content of <code>foo</code> is taken as the <code>value</code>. Nesting additional elements with class of <code>value</code> cannot be used to further isolate a property's value.

e.g.

<source lang=html4strict>


Puppies Rule!
But kittens are better!


</source>

In this example, <code>description</code> has a child ‘<code>value</code>’, and that child has a ''grandchild'' ‘<code>value</code>’. However, the parsing of <code>value</code> classes stops at the first level, so the data for <code>description</code> is: <samp><code>Puppies Rule!But kittens are better!</code></samp>, not just <samp>Puppies Rule!</samp>.

== Date and time values ==
Some microformats properties expect an ISO8601 datetime value, e.g. [[hCalendar]] <code>dtstart</code> and <code>dtend</code> or [[hAtom]] <code>published</code>.

Authors may use the value class pattern to separately specify the date and the time, which are then combined to specify a single datetime value.

Example, this hCalendar 'dtstart' property with 'value' elements:

<source lang=html4strict>
The weekly dinner will be on

<abbr class="value" title="2008-06-24">this Tuesday</abbr>
at 18:30


</source>

produces the following 'dtstart' value:

<source lang=text>
2008-06-24T18:30:00
</source>

and iCalendar converters produce the following DTSTART:

<source lang=text>
DTSTART:20080624T183000
</source>

The lack of a timezone indicates a "floating" datetime, that is a datetime independent of any particular timezone. Examples of floating datetimes could be an alarm clock you set to ring at 7am, or the common 9am-5pm workday.

=== Date and time parsing ===
For all date time properties (as defined in their respective microformats specifications), the following rules apply in addition to (and in some cases replacing) the above value class pattern parsing rules.

When a "value" element is found, parse a value from the element as follows:
* if the element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
* if the element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
* for any other element, use its inner-text.
* if the value has both a specific ISO8601 date and a specific time, use those and stop looking for "value" elements.
* if the value has *only* a specific date, specifically, fits the following ISO8601 date patterns (i.e. as documented in the [http://en.wikipedia.org/wiki/ISO_8601 Wikipedia summary of ISO8601])
** YYYY-MM-DD
** YYYY-DDD
** then use that as the date value. For the purposes of the value class pattern, the hyphens "-" separating the year, month, day and/or ordinal day are required.
** ignore any further "value" elements that specify the date.
* if the value has *only* a specific time (with or without timezone), parse it for a time value that can match any of the following:
** 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 is the 24 hour "hours" in the time, from 00 to 24, with optional leading 0 for values less than 10.
** MM are the minutes from 00 to 59
** SS are the optional seconds from 00 to 59 (60 for a leap second). If omitted, infer 00 seconds.
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** For the purposes of the value class pattern, the colons ":" separating the hour, minutes, seconds are required.
** However the colons ":" separating the hours and minutes of any timezone offset are ''optional'' and discouraged in order to make it less likely that a timezone offset will be confused for a time.
** Under strong consideration: case insensitive { }"am"|{ }"a.m." suffix to treat an HH value of 12 as 00, or a case-insensitive { }"pm"|{ }"p.m." suffix to add 12 to HH value less than 12 - per [http://en.wikipedia.org/wiki/12-hour_clock Wikipedia article on the 12 hour clock]. Note: [[X2V]] has implemented this.
*** HH:MM:SSam
*** HH:MM:SSpm
*** HH:MMam
*** HH:MMpm
*** HHam
*** HHpm
*** where "am" and "pm" mean "am or a.m." and "pm or p.m."
*** when MM is omitted, infer 00 minutes.
** ignore any further "value" elements that specify the time.
* if the value has *only* a specific timezone, parse it for a time zone value that can match any of the following:
** -XX:YY
** +XX:YY
** -XXYY
** +XXYY
** -XX
** +XX
** Z
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** ignore any further "value" elements that specify the timezone.

If by parsing the "value" element(s), at least a specific date has been found, then the "value" is overall valid, and the parser assembles the overall datetime value by concatenating the specific date, "T" and specific time (if time was specified, with 00 seconds implied if no seconds are provided), and specific timezone (if timezone and a specific time was specified).
* YYYY-MM-DD - no time specified
* YYYY-MM-DDTHH:MM:SS - time specified but no timezone. This is a floating time.
* YYYY-MM-DDTHH:MM:SS-XXYY or
* YYYY-MM-DDTHH:MM:SSZ or
* YYYY-MM-DDTHH:MM:SS+XXYY - both time and timezone were specified.

iCalendar converters in addition must do the following:
* remove any dash "-" separators in the date.
* remove any colon ":" separators in the time.
* perform datetime math on any +/- relative timezone value, and produce an effective UTC value ending with "Z".

Atom converters in addition must do the following:
* normalize all date and datetime values to RFC 3339.

=== derivation and tests ===
The handling of date and time values in the value class pattern was originally [[value-excerption-pattern-brainstorming#date_and_time_separation|brainstormed on the value-excerption-pattern-brainstorming]] page and derived from that analysis and feedback. For the curious, historical details may be found there, along with additional thoughts for extension.

See [[value-class-date-time-tests]] for test cases.

=== format specific optimizations ===
The following are format specific optimizations under strong consideration that make use of the value-class-pattern. Note: [[X2V]] has implemented this for hCalendar.

;short URL for this section
:http://tr.im/vcpfso

==== hCalendar dtend implied date ====
Typically events that start and end the same day only display the date of the event once (makes sense per the DRY [[principle]]) (real world examples: [http://upcoming.yahoo.com/event/3010807/ Upcoming], ... more examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hCalendar]] event "dtend" date from its "dtstart" date when only the time (and optionally timezone) was specified for its "dtend", e.g.:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

To simplify this further for authors, hCalendar processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "dtend" span:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

hCalendar to iCalendar converters should produce the following iCalendar fragment (as part of a valid .ics file) from either of the above two examples:

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

Note: [[X2V]] has implemented this.

Examples "in the wild":
* http://microformats.org/wiki/events/2009-08-12-nyc-workshop (real world example, but on this wiki).

==== hAtom updated implied date ====
Similarly, in blog posts that indicate both when they were "published" and "updated", the date is usually only displayed once, typically when "published" (real world examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hAtom]] entry "updated" date from its "published" date when only the time (and optionally timezone) was specified for its "updated", e.g. for a blog post that was updated the same day:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

To simplify this further for authors, hAtom processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "updated" span:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

==Parsing value from a <code>title</code> attribute==
The <code>value-title</code> class name allows the publisher to indicate the data value for a parent property is contained in the <code>title</code> attribute of an element, rather than the inner-text.

This can be used to provide a synonym within content, or used to quietly publish alternate forms of information for microformats parsing, without affecting the consumption of content.

For example, you can use casual localization with dates:

<source lang=html4strict>
It was

last year

that I realised my addiction to cashew nuts would cost this country so dear.

</source>

Parsing rules for <code>value-title</code> are the same as for <code>value</code> above, with the following change:

* Where a microformats property has a child element with class name of <code>value-title</code>, the content of the <code>title</code> attribute of that element must be parsed, rather than the portion of the element that would be parsed for a class name of <code>value</code>.

===Using <code>value-title</code> to publish machine-data===

The initial usage of <code>value-title</code> is used to publish alternate, parsable forms of property values in a visible context without the use of the <code>abbr</code> element whose semantics already support interpretation of the 'title' attribute as an expanded, more precise form of the content.

Experience has found that there are some cases in microformats where a number of publishers want to include a precisely accurate and parsable value for a property but do not want it to be visible in their page, even as a tooltip.

For example, full [[ISO8601]] datetimes may be confusing to readers of the page (as a tooltip or when read aloud by a screen reader), and enumerated values such as the <code>type</code> subproperty of hCard's <code>tel</code> property use US-English terms, which are not part of pages in any other language.

Since both of those scenarios have shown to be obstacles for a number of publishers, for these cases, and these alone, there exists a further extension of value-excerption. This extension allows the parsable form of the property to be published ‘silently’ immediately adjacent with the respective local visible content.

Here is an example, with the required use of a first child element with class name <code>value-title</code>:

<source lang=html4strict>


 
mobile

+44 7773 000 000

</source>

The <samp>cell</samp> value is parsed for the 'type' subproperty, but <samp>mobile</samp> is presented to the user.

In the case of dates:

<source lang=html4strict>

 
March 14th 2009, around half-past four

</source>

A microformats parser will read the ISO8601 format datetime <samp>2009-03-14T16:28-0600</samp>, but users will only see <samp>March 14th 2009, around half-past four</samp>. Testing has shown that the ISO8601 datetime above does not get exposed to any user at all.

===Parsing machine-data <code>value-title</code>===

Browsers collapse the <code>value-title</code> span down to a width of <code>0</code>, effectively providing no visual rendering, whilst keeping the element in the DOM. With no physical dimensions, there is no ‘hover’ state, so no tooltip is revealed. Furthermore, the empty element is not passed to assistive technology layers such as VoiceOver. Screen readers do not read the contents of the title attribute of an empty <code>span</code> element.

We conducted [[value-excerption-value-title-test|thorough testing]] of these parsing behaviors to ensure accessibility.

''Note: Whilst the <code>value-title</code> element is more gracefully written without whitespace inner-text (or as self-closing <code><foo /></code> element in XHTML), current tools such as WYSIWYG editors and HTML-Tidy will erroneously discard such elements, resulting in parsable data being thrown away by some tools. As such, <code> </code>, including a single whitespace character between the opening and closing tag, is the required pattern for authors, at this time.''

Parsing this final <code>value-title</code> extension imposes some stricter restrictions on usage. These restrictions exist to reduce the impact of <abbr title="Don't Repeat Yourself">DRY</abbr> violations, reduce the opportunity for sites to spoof data, and encourage best practice for maintaining both forms of data accurately.

Where an element with class <code>value-title</code> is to be parsed as data for a property, and that element also contains no non-whitespace content (hereafter referred to as ‘empty’), the following rules apply:

* The ‘empty’ value-title element must be the '''first, non-whitespace child''' of the property element. That is, it should follow immediately after the property is declared, before the human-readable form, and without any additional nesting.
* The ‘empty’ value-title element can only be used for specific properties. Microformat specifications must explicitly state which properties may be used with this extension of the value-class-pattern.
* Where an ‘empty’ value-title element is to be used as the single property value, it must be the ''only'' such <code>value</code> content. That is, the first instance of a conforming <code>value-title</code> element overrides all other <code>value</code> and <code>value-title</code> siblings and/or cousins.
* Tools written to perform Conformance Testing and/or Validation of microformats ''should'' attempt to compare the machine-data and human legible forms of the property data, and advise authors if the forms do not match.

=== limited use of value-title ===
Due to the fact that the value-title pattern hides some amount of data which tends to be a machine-specific duplicate of data that is provided in the human readable content, there are two microformats [[principles]] being compromised: '''visibility''' and '''<abbr title="Don't Repeat Yourself">DRY</abbr>'''. Thus the applicability of this pattern is deliberately restricted to properties that have demonstrated through experience a need for it, with no known better alternative.

In general authors should:

# First, try to directly specify microformats property values inline (the most visible, no duplication),
# Then consider using the value-class pattern
## Including multiple value elements for date and time properties
# and then only if those methods are insufficient, consider the value-title pattern.

This document post-dates other microformat specifications, such that they may not yet indicate which properties permit use of this pattern. In the interim, '''only''' the following types of properties should allow the value-title pattern.

* ISO8601 date, datetime, timezone, and duration values
* Enumerated values (such as the hCard tel/email/adr 'type' subproperties)
* Co-ordinates (such as the [[geo]] 'latitude' and 'longitude' properties)
* Telephone number properties (e.g. the hCard 'tel' property)

The [[machine-data]] page has documentation of some of the properties of some specs which experience has shown need a solution like the value-title pattern.

There are some simple reference examples and tests for this pattern on [[value-class-pattern-tests]].

In future use, ''specification authors'' may inherit use of <code>value-title</code> by use of ISO8601 date and time formats, or reuse of other microformats, but specifications should _avoid_ introducing new data structures that depend on or encourage this pattern. New specifications are themselves expected to adhere to the principals of visibile data and <abbr>DRY</abbr>.

== Test cases ==
See [[value-class-pattern-tests]].

== <abbr title='Frequently Asked Questions'>FAQ</abbr>==
This section is '''informative'''.

Frequently asked questions about the value-class-pattern. Once this section grows too big, we'll make a separate wiki page (like [[value-class-faq]]).

<div class='discussion'>
* '''Why use an 'empty' element? Why not embed data in the class attribute?'''
** The class attribute is inappropriate for embedded data values, as per the HTML4 specification, which states <code>class</code> is for ‘general purposing processing’, which is defined as ‘e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.’. ‘General purpose processing’ does not extend to data itself. Furthermore, this method avoids inventing a new string pattern for embedding data.
* '''Why use an 'empty' element? Why not make up a new attribute, like ‘data’?'''
** Microformats exist and function in ''valid'' HTML4 and XHTML1. Those are the current standards for web development, and microformats exist for use ''now''. In the future, perhaps revisions of HTML will offer up another solution. For now, this method has been tested against browsers, and creates a consistent document structure (where machine-form and human-form data are siblings).
* '''The <code>title</code> attribute should only be used for content!'''
** The <code>title</code> attribute ''is'' used for content and is read by microformats parsers. This exists for cases where data cannot be parsed with sufficient precision from just the commonly published, visible information. This pattern allows both forms of content to be included, whilst keeping it invisible to human consumers.
</div>

You can also refer to the general [[faq|Microformats FAQ]] and [[principles]].

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

The following sites and pages have started marking up content with the value-class-pattern, and are thus good places to go for examples with real world content to test with implementations (i.e. parsers). If you use the value-class-pattern in your content, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page (like [[value-class-examples-in-wild]]).

* [http://visitmix.com/labs/oomph/2.0/tests/test.html Test Harness For Oomph] This pages uses a whole range of different patterns for both hCard and hCalendar, using both value and value-title, mostly derived from the specification above
* [http://georgebrock.com/ George Brocklehurst's activity stream] and [http://blog.georgebrock.com/ blog] use "value-title" for hAtom <code>published</code> property
* [http://ben-ward.co.uk/ Ben Ward's home page] uses:
** "value-title" for hCard <code>bday</code> property
** "value-title" for hAtom <code>updated</code> property
* [http://microformats.org/ microformats.org] uses:
** "value-title" for hAtom <code>updated</code> property in [[http://microformats.org/ microformats.org blog postss]]]
** date and time value separation for hCalendar <code>dtstart</code> property in [[events|microformats.org recent and upcoming events wiki page]]

''Add your site/page(s) that use the value-class-pattern here, along with a brief description of what value-class-pattern features you use, with which microformat(s) and which of its/their properties.''

== Implementations ==

This section is '''informative'''.

The following implementations have been developed which either generate or parse value-class-pattern property values. If you have an value-class-pattern 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 (like [[value-class-implementations]]).

* [[X2V]] v0.9.3 and later:
** implements [[#Date_and_time_values|Date and time values parsing]], including am/pm time values
*** thus passes [[value-class-pattern-tests#Date_and_time_values|Date and time values test cases]].
** implements [[#hCalendar_dtend_implied_date|hCalendar implied dtend date]]
* [[Operator]] has *some* implementation of the value-class-pattern according to Michael Kaply, but precisely how much is implemented, for which properties (property types) and which microformats is not currently known.
* [[Optimus]] v0.8 and later implements <code>value-title</code> as [http://twitter.com/DmitryBaranovsk/status/1891253248 announced by Dmitry Baranovskiy].
* ... add your implementation(s) that parse or generate the value-class-pattern here, along with which features you support (hopefully all!) and note any limitations if any.

== Articles ==
Articles and blog posts discussing the value class pattern, most recent first.
When this section gets too big, create a separate page like: [[value-class-pattern-articles]]
* 2009-08-25 MIX Online: [http://visitmix.com/Articles/The-Value-Class-Pattern The Value Class Pattern] by Jeremy Keith
* [http://ablognotlimited.com/s/106 Getting Semantic With Microformats, Part 8: Value Class Pattern] -- A very thorough writeup by Emily Lewis on the 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]

==Related Pages==
This section is '''informative'''.

* [[value-class-pattern-tests]]
* [[value-excerption-pattern-issues]]
* [[hcard#Value_excerpting|hCard: Value Excepting]]
* [[value-excerption-pattern-brainstorming]]
* [[machine-data|Machine Data in Microformats]]

== References ==
This section is '''informative'''.
* [http://www.useit.com/alertbox/9608.html Jakob Nielsen: International Web Usability]

value-class-pattern

2009-08-26T15:14:52Z

Karstenj: /* Examples in the wild */

<entry-title>Value Class Pattern</entry-title>

The value class pattern is derived from [[hCard#Value_excerpting|value-excerpting]] in hCard.

''The editors believe the value-class-pattern to be feature complete and ready for use in markup. Implementers are encouraged to update accordingly and provide [[value-class-pattern-feedback|feedback]]. '''Note''', the precise parsing behavior could change in response to implementer feedback, but the core methods are stable. You should watch this page for updates.''

See also, the [http://microformats.org/blog/2009/05/12/value-class-pattern/ blog announcement].

__TOC__
; Editors
: [[User:BenWard|Ben Ward]]
: [[User:Tantek|Tantek Çelik]]
; Short URL
: <kbd>http://tr.im/valueclass</kbd>

Sometimes, only a part of an element's content is to be used as the value of a microformat property. This may occur when a property has optional subproperties, such as <code>tel: type</code> and <code>tel: value</code> in [[hCard]]. Other times, the most appropriate structure for a property may include other content.

For these purposes, the special class name <code>value</code> is used to mark-up the relevant data excerpt from larger element content.

==Simple Examples==

Here is markup for a home phone number:

vCard fragment:

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

hCard fragment:

<source lang=html4strict>

Home:
+1.415.555.1212

</source>

In this case, the <code>value</code> of <code>tel</code> is <code>+1.415.555.1212</code>, not <code>Home: +1.415.555.1212</code>.

Sometimes the value for a microformats property must be split into multiple pieces in the content of the element representing that property. Multiple elements with a class name of "value" (value elements) can be used to extract and concatenate these pieces into a single value for microformats properties which expect simple strings or tel values.

Another example, this time using a localized (British) telephone number:

<source lang=html4strict>

Home:
+44 (0) 1223 123 123

</source>

In this case, the valid ''data'' for the telephone number is <samp>+441223123123</samp>, but the way in which phone number is presented in Britain will include the <samp>(0)</samp>, for local dialling. That is, from anywhere in the world you may dial <kbd>+441223123123</kbd>, or from within Britain you may dial <kbd>01223123123</kbd>. Common local publishing interferes with the data, since dialling <kbd>'''+440'''1223123123</kbd> is an invalid number.

In the mark-up, two <code>value</code> classes target the part of the telephone number string that makes an international, valid number, whilst allowing conventional presentation.

Another example, adding a place name to a [[geo]] co-ordinate:

<source lang=html4strict>
I'm loitering outside The Bricklayer's Arms

51° 30' 48.45", -0° 8' 53.23"
(51.513458;-0.14812)


</source>

Whilst the entire string is a geo point, it's only the decimal encoded co-ordinates which must be consumed by a microformats parser, so the <code>value</code> class isolates it from the degrees form, which the publisher includes for completeness.

==Basic Parsing==
# The value class pattern only applies to properties which are simple strings, enumerated values, telephone numbers, and datetimes. The value class pattern does not affect parsing of properties of type email, URL, URI, UID.
# Where an element with such a microformat property class name has a descendant with class name <code>value</code> (a "value" element), parsers should use the following portion of that element:
## if the value element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
## if the value element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
## for any other element, use its inner-text.
# Where there are multiple descendants of a property with class name of <code>value</code> (multiple value elements)
## if the microformats property expects a simple string, enumerated value, or telephone number, then the values extracted from the value elements should be concatenated ''without'' inserting additional characters or white-space.
## if the microformats property expects a datetime value, see the [[#Date_and_time_parsing|Date Time Parsing]] section.
# Descendants with class of <code>value</code> must not be parsed deeper than one level. That is, where an element <code>foo</code> with class <code>value</code> has a descendant <code>bar</code> with class <code>value</code>, the content of <code>foo</code> is taken as the <code>value</code>. Nesting additional elements with class of <code>value</code> cannot be used to further isolate a property's value.

e.g.

<source lang=html4strict>


Puppies Rule!
But kittens are better!


</source>

In this example, <code>description</code> has a child ‘<code>value</code>’, and that child has a ''grandchild'' ‘<code>value</code>’. However, the parsing of <code>value</code> classes stops at the first level, so the data for <code>description</code> is: <samp><code>Puppies Rule!But kittens are better!</code></samp>, not just <samp>Puppies Rule!</samp>.

== Date and time values ==
Some microformats properties expect an ISO8601 datetime value, e.g. [[hCalendar]] <code>dtstart</code> and <code>dtend</code> or [[hAtom]] <code>published</code>.

Authors may use the value class pattern to separately specify the date and the time, which are then combined to specify a single datetime value.

Example, this hCalendar 'dtstart' property with 'value' elements:

<source lang=html4strict>
The weekly dinner will be on

<abbr class="value" title="2008-06-24">this Tuesday</abbr>
at 18:30


</source>

produces the following 'dtstart' value:

<source lang=text>
2008-06-24T18:30:00
</source>

and iCalendar converters produce the following DTSTART:

<source lang=text>
DTSTART:20080624T183000
</source>

The lack of a timezone indicates a "floating" datetime, that is a datetime independent of any particular timezone. Examples of floating datetimes could be an alarm clock you set to ring at 7am, or the common 9am-5pm workday.

=== Date and time parsing ===
For all date time properties (as defined in their respective microformats specifications), the following rules apply in addition to (and in some cases replacing) the above value class pattern parsing rules.

When a "value" element is found, parse a value from the element as follows:
* if the element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
* if the element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
* for any other element, use its inner-text.
* if the value has both a specific ISO8601 date and a specific time, use those and stop looking for "value" elements.
* if the value has *only* a specific date, specifically, fits the following ISO8601 date patterns (i.e. as documented in the [http://en.wikipedia.org/wiki/ISO_8601 Wikipedia summary of ISO8601])
** YYYY-MM-DD
** YYYY-DDD
** then use that as the date value. For the purposes of the value class pattern, the hyphens "-" separating the year, month, day and/or ordinal day are required.
** ignore any further "value" elements that specify the date.
* if the value has *only* a specific time (with or without timezone), parse it for a time value that can match any of the following:
** 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 is the 24 hour "hours" in the time, from 00 to 24, with optional leading 0 for values less than 10.
** MM are the minutes from 00 to 59
** SS are the optional seconds from 00 to 59 (60 for a leap second). If omitted, infer 00 seconds.
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** For the purposes of the value class pattern, the colons ":" separating the hour, minutes, seconds are required.
** However the colons ":" separating the hours and minutes of any timezone offset are ''optional'' and discouraged in order to make it less likely that a timezone offset will be confused for a time.
** Under strong consideration: case insensitive { }"am"|{ }"a.m." suffix to treat an HH value of 12 as 00, or a case-insensitive { }"pm"|{ }"p.m." suffix to add 12 to HH value less than 12 - per [http://en.wikipedia.org/wiki/12-hour_clock Wikipedia article on the 12 hour clock]. Note: [[X2V]] has implemented this.
*** HH:MM:SSam
*** HH:MM:SSpm
*** HH:MMam
*** HH:MMpm
*** HHam
*** HHpm
*** where "am" and "pm" mean "am or a.m." and "pm or p.m."
*** when MM is omitted, infer 00 minutes.
** ignore any further "value" elements that specify the time.
* if the value has *only* a specific timezone, parse it for a time zone value that can match any of the following:
** -XX:YY
** +XX:YY
** -XXYY
** +XXYY
** -XX
** +XX
** Z
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** ignore any further "value" elements that specify the timezone.

If by parsing the "value" element(s), at least a specific date has been found, then the "value" is overall valid, and the parser assembles the overall datetime value by concatenating the specific date, "T" and specific time (if time was specified, with 00 seconds implied if no seconds are provided), and specific timezone (if timezone and a specific time was specified).
* YYYY-MM-DD - no time specified
* YYYY-MM-DDTHH:MM:SS - time specified but no timezone. This is a floating time.
* YYYY-MM-DDTHH:MM:SS-XXYY or
* YYYY-MM-DDTHH:MM:SSZ or
* YYYY-MM-DDTHH:MM:SS+XXYY - both time and timezone were specified.

iCalendar converters in addition must do the following:
* remove any dash "-" separators in the date.
* remove any colon ":" separators in the time.
* perform datetime math on any +/- relative timezone value, and produce an effective UTC value ending with "Z".

Atom converters in addition must do the following:
* normalize all date and datetime values to RFC 3339.

=== derivation and tests ===
The handling of date and time values in the value class pattern was originally [[value-excerption-pattern-brainstorming#date_and_time_separation|brainstormed on the value-excerption-pattern-brainstorming]] page and derived from that analysis and feedback. For the curious, historical details may be found there, along with additional thoughts for extension.

See [[value-class-date-time-tests]] for test cases.

=== format specific optimizations ===
The following are format specific optimizations under strong consideration that make use of the value-class-pattern. Note: [[X2V]] has implemented this for hCalendar.

;short URL for this section
:http://tr.im/vcpfso

==== hCalendar dtend implied date ====
Typically events that start and end the same day only display the date of the event once (makes sense per the DRY [[principle]]) (real world examples: [http://upcoming.yahoo.com/event/3010807/ Upcoming], ... more examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hCalendar]] event "dtend" date from its "dtstart" date when only the time (and optionally timezone) was specified for its "dtend", e.g.:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

To simplify this further for authors, hCalendar processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "dtend" span:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

hCalendar to iCalendar converters should produce the following iCalendar fragment (as part of a valid .ics file) from either of the above two examples:

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

Note: [[X2V]] has implemented this.

Examples "in the wild":
* http://microformats.org/wiki/events/2009-08-12-nyc-workshop (real world example, but on this wiki).

==== hAtom updated implied date ====
Similarly, in blog posts that indicate both when they were "published" and "updated", the date is usually only displayed once, typically when "published" (real world examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hAtom]] entry "updated" date from its "published" date when only the time (and optionally timezone) was specified for its "updated", e.g. for a blog post that was updated the same day:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

To simplify this further for authors, hAtom processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "updated" span:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

==Parsing value from a <code>title</code> attribute==
The <code>value-title</code> class name allows the publisher to indicate the data value for a parent property is contained in the <code>title</code> attribute of an element, rather than the inner-text.

This can be used to provide a synonym within content, or used to quietly publish alternate forms of information for microformats parsing, without affecting the consumption of content.

For example, you can use casual localization with dates:

<source lang=html4strict>
It was

last year

that I realised my addiction to cashew nuts would cost this country so dear.

</source>

Parsing rules for <code>value-title</code> are the same as for <code>value</code> above, with the following change:

* Where a microformats property has a child element with class name of <code>value-title</code>, the content of the <code>title</code> attribute of that element must be parsed, rather than the portion of the element that would be parsed for a class name of <code>value</code>.

===Using <code>value-title</code> to publish machine-data===

The initial usage of <code>value-title</code> is used to publish alternate, parsable forms of property values in a visible context without the use of the <code>abbr</code> element whose semantics already support interpretation of the 'title' attribute as an expanded, more precise form of the content.

Experience has found that there are some cases in microformats where a number of publishers want to include a precisely accurate and parsable value for a property but do not want it to be visible in their page, even as a tooltip.

For example, full [[ISO8601]] datetimes may be confusing to readers of the page (as a tooltip or when read aloud by a screen reader), and enumerated values such as the <code>type</code> subproperty of hCard's <code>tel</code> property use US-English terms, which are not part of pages in any other language.

Since both of those scenarios have shown to be obstacles for a number of publishers, for these cases, and these alone, there exists a further extension of value-excerption. This extension allows the parsable form of the property to be published ‘silently’ immediately adjacent with the respective local visible content.

Here is an example, with the required use of a first child element with class name <code>value-title</code>:

<source lang=html4strict>


 
mobile

+44 7773 000 000

</source>

The <samp>cell</samp> value is parsed for the 'type' subproperty, but <samp>mobile</samp> is presented to the user.

In the case of dates:

<source lang=html4strict>

 
March 14th 2009, around half-past four

</source>

A microformats parser will read the ISO8601 format datetime <samp>2009-03-14T16:28-0600</samp>, but users will only see <samp>March 14th 2009, around half-past four</samp>. Testing has shown that the ISO8601 datetime above does not get exposed to any user at all.

===Parsing machine-data <code>value-title</code>===

Browsers collapse the <code>value-title</code> span down to a width of <code>0</code>, effectively providing no visual rendering, whilst keeping the element in the DOM. With no physical dimensions, there is no ‘hover’ state, so no tooltip is revealed. Furthermore, the empty element is not passed to assistive technology layers such as VoiceOver. Screen readers do not read the contents of the title attribute of an empty <code>span</code> element.

We conducted [[value-excerption-value-title-test|thorough testing]] of these parsing behaviors to ensure accessibility.

''Note: Whilst the <code>value-title</code> element is more gracefully written without whitespace inner-text (or as self-closing <code><foo /></code> element in XHTML), current tools such as WYSIWYG editors and HTML-Tidy will erroneously discard such elements, resulting in parsable data being thrown away by some tools. As such, <code> </code>, including a single whitespace character between the opening and closing tag, is the required pattern for authors, at this time.''

Parsing this final <code>value-title</code> extension imposes some stricter restrictions on usage. These restrictions exist to reduce the impact of <abbr title="Don't Repeat Yourself">DRY</abbr> violations, reduce the opportunity for sites to spoof data, and encourage best practice for maintaining both forms of data accurately.

Where an element with class <code>value-title</code> is to be parsed as data for a property, and that element also contains no non-whitespace content (hereafter referred to as ‘empty’), the following rules apply:

* The ‘empty’ value-title element must be the '''first, non-whitespace child''' of the property element. That is, it should follow immediately after the property is declared, before the human-readable form, and without any additional nesting.
* The ‘empty’ value-title element can only be used for specific properties. Microformat specifications must explicitly state which properties may be used with this extension of the value-class-pattern.
* Where an ‘empty’ value-title element is to be used as the single property value, it must be the ''only'' such <code>value</code> content. That is, the first instance of a conforming <code>value-title</code> element overrides all other <code>value</code> and <code>value-title</code> siblings and/or cousins.
* Tools written to perform Conformance Testing and/or Validation of microformats ''should'' attempt to compare the machine-data and human legible forms of the property data, and advise authors if the forms do not match.

=== limited use of value-title ===
Due to the fact that the value-title pattern hides some amount of data which tends to be a machine-specific duplicate of data that is provided in the human readable content, there are two microformats [[principles]] being compromised: '''visibility''' and '''<abbr title="Don't Repeat Yourself">DRY</abbr>'''. Thus the applicability of this pattern is deliberately restricted to properties that have demonstrated through experience a need for it, with no known better alternative.

In general authors should:

# First, try to directly specify microformats property values inline (the most visible, no duplication),
# Then consider using the value-class pattern
## Including multiple value elements for date and time properties
# and then only if those methods are insufficient, consider the value-title pattern.

This document post-dates other microformat specifications, such that they may not yet indicate which properties permit use of this pattern. In the interim, '''only''' the following types of properties should allow the value-title pattern.

* ISO8601 date, datetime, timezone, and duration values
* Enumerated values (such as the hCard tel/email/adr 'type' subproperties)
* Co-ordinates (such as the [[geo]] 'latitude' and 'longitude' properties)
* Telephone number properties (e.g. the hCard 'tel' property)

The [[machine-data]] page has documentation of some of the properties of some specs which experience has shown need a solution like the value-title pattern.

There are some simple reference examples and tests for this pattern on [[value-class-pattern-tests]].

In future use, ''specification authors'' may inherit use of <code>value-title</code> by use of ISO8601 date and time formats, or reuse of other microformats, but specifications should _avoid_ introducing new data structures that depend on or encourage this pattern. New specifications are themselves expected to adhere to the principals of visibile data and <abbr>DRY</abbr>.

== Test cases ==
See [[value-class-pattern-tests]].

== <abbr title='Frequently Asked Questions'>FAQ</abbr>==
This section is '''informative'''.

Frequently asked questions about the value-class-pattern. Once this section grows too big, we'll make a separate wiki page (like [[value-class-faq]]).

<div class='discussion'>
* '''Why use an 'empty' element? Why not embed data in the class attribute?'''
** The class attribute is inappropriate for embedded data values, as per the HTML4 specification, which states <code>class</code> is for ‘general purposing processing’, which is defined as ‘e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.’. ‘General purpose processing’ does not extend to data itself. Furthermore, this method avoids inventing a new string pattern for embedding data.
* '''Why use an 'empty' element? Why not make up a new attribute, like ‘data’?'''
** Microformats exist and function in ''valid'' HTML4 and XHTML1. Those are the current standards for web development, and microformats exist for use ''now''. In the future, perhaps revisions of HTML will offer up another solution. For now, this method has been tested against browsers, and creates a consistent document structure (where machine-form and human-form data are siblings).
* '''The <code>title</code> attribute should only be used for content!'''
** The <code>title</code> attribute ''is'' used for content and is read by microformats parsers. This exists for cases where data cannot be parsed with sufficient precision from just the commonly published, visible information. This pattern allows both forms of content to be included, whilst keeping it invisible to human consumers.
</div>

You can also refer to the general [[faq|Microformats FAQ]] and [[principles]].

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

The following sites and pages have started marking up content with the value-class-pattern, and are thus good places to go for examples with real world content to test with implementations (i.e. parsers). If you use the value-class-pattern in your content, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page (like [[value-class-examples-in-wild]]).

* [http://georgebrock.com/ George Brocklehurst's activity stream] and [http://blog.georgebrock.com/ blog] use "value-title" for hAtom <code>published</code> property
* [http://ben-ward.co.uk/ Ben Ward's home page] uses:
** "value-title" for hCard <code>bday</code> property
** "value-title" for hAtom <code>updated</code> property
* [http://microformats.org/ microformats.org] uses:
** "value-title" for hAtom <code>updated</code> property in [[http://microformats.org/ microformats.org blog postss]]]
** date and time value separation for hCalendar <code>dtstart</code> property in [[events|microformats.org recent and upcoming events wiki page]]
* [http://visitmix.com/labs/oomph/2.0/tests/test.html Test Harness For Oomph] This pages uses a whole range of different patterns for both hCard and hCalendar, using both value and value-title, mostly derived from the specification above

''Add your site/page(s) that use the value-class-pattern here, along with a brief description of what value-class-pattern features you use, with which microformat(s) and which of its/their properties.''

== Implementations ==

This section is '''informative'''.

The following implementations have been developed which either generate or parse value-class-pattern property values. If you have an value-class-pattern 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 (like [[value-class-implementations]]).

* [[X2V]] v0.9.3 and later:
** implements [[#Date_and_time_values|Date and time values parsing]], including am/pm time values
*** thus passes [[value-class-pattern-tests#Date_and_time_values|Date and time values test cases]].
** implements [[#hCalendar_dtend_implied_date|hCalendar implied dtend date]]
* [[Operator]] has *some* implementation of the value-class-pattern according to Michael Kaply, but precisely how much is implemented, for which properties (property types) and which microformats is not currently known.
* [[Optimus]] v0.8 and later implements <code>value-title</code> as [http://twitter.com/DmitryBaranovsk/status/1891253248 announced by Dmitry Baranovskiy].
* ... add your implementation(s) that parse or generate the value-class-pattern here, along with which features you support (hopefully all!) and note any limitations if any.

== Articles ==
Articles and blog posts discussing the value class pattern, most recent first.
When this section gets too big, create a separate page like: [[value-class-pattern-articles]]
* 2009-08-25 MIX Online: [http://visitmix.com/Articles/The-Value-Class-Pattern The Value Class Pattern] by Jeremy Keith
* [http://ablognotlimited.com/s/106 Getting Semantic With Microformats, Part 8: Value Class Pattern] -- A very thorough writeup by Emily Lewis on the 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]

==Related Pages==
This section is '''informative'''.

* [[value-class-pattern-tests]]
* [[value-excerption-pattern-issues]]
* [[hcard#Value_excerpting|hCard: Value Excepting]]
* [[value-excerption-pattern-brainstorming]]
* [[machine-data|Machine Data in Microformats]]

== References ==
This section is '''informative'''.
* [http://www.useit.com/alertbox/9608.html Jakob Nielsen: International Web Usability]

oomph

2009-08-25T22:54:55Z

Karstenj: /* sessions and presentations */

== overview ==
Download Oomph v2.0 (2009-8-25) from http://codeplex.com/Oomph

Oomph is an [[open source]] project that has the following features:
* [[Internet Explorer]] (versions 7 and 8) add-in that provide a user interface for all pages with [[hCard]] and/or [[hCalendar]] and/or [[hmedia]] (similar to [[operator]]).
* jQuery javascript extensions that can be installed on any website and provide an HTML overlay user-interface to all the [[hCard]], [[hCalendar]] and [[hmedia]] on the page for any browser.
* Windows Live Writer Plug-in for authoring hCard, hCalendar and hMedia
* Set of CSS stylesheets for nicely displaying hCards and hCalendar events
* ASP.NET control for generating [[hcard]] and [[hcalendar]]

== video ==
[http://www.youtube.com/watch?v=zx2f2Z9MMQ8 http://i3.ytimg.com/vi/zx2f2Z9MMQ8/default.jpg][http://www.youtube.com/watch?v=zx2f2Z9MMQ8 watch Oomph explanation and demonstration video]

== buttons ==
As seen on [http://favrd.com/ Favrd]:

[http://www.northmay.com/deck/i/mix_oomph.jpg http://www.northmay.com/deck/i/mix_oomph.jpg] - was linked to http://www.visitmix.com/lab/oomph/

== links and articles ==
* http://codeplex.com/Oomph
* http://www.visitmix.com/Lab/Oomph
* http://www.ablognotlimited.com/articles/oomph-microformats-toolkit/
* http://visitmix.com/Articles/Prototype-Oomph-A-Microformats-Toolkit
* http://www.itpro.co.uk/607728/microsoft-tries-to-give-data-some-oomph

== source ==
* http://oomph.codeplex.com/SourceControl/ListDownloadableCommits.aspx

== issues ==
See [[oomph-issues]].

== sessions and presentations ==
* 2008-10-29 Microsoft PDC, "Oomph: A Microformats Toolkit" in room 501B at 3pm.
** http://twitter.com/Systim/status/980861207
** http://twitter.com/TommyLee/status/980857229

* 2009-10-04 Oredev in Malmo, Sweden
** http://oredev.com/prod/oredev/site.nsf/docsbycodename/session!opendocument&sid=5340FEFD1C0F5E8EC12575940036B8DA&day=3&track=1FB45F966ACB6E94C12575A500497290

== see also ==
* [[Internet Explorer]]
* [[Operator]]

oomph

2009-08-25T22:52:20Z

Karstenj: /* overview */

== overview ==
Download Oomph v2.0 (2009-8-25) from http://codeplex.com/Oomph

Oomph is an [[open source]] project that has the following features:
* [[Internet Explorer]] (versions 7 and 8) add-in that provide a user interface for all pages with [[hCard]] and/or [[hCalendar]] and/or [[hmedia]] (similar to [[operator]]).
* jQuery javascript extensions that can be installed on any website and provide an HTML overlay user-interface to all the [[hCard]], [[hCalendar]] and [[hmedia]] on the page for any browser.
* Windows Live Writer Plug-in for authoring hCard, hCalendar and hMedia
* Set of CSS stylesheets for nicely displaying hCards and hCalendar events
* ASP.NET control for generating [[hcard]] and [[hcalendar]]

== video ==
[http://www.youtube.com/watch?v=zx2f2Z9MMQ8 http://i3.ytimg.com/vi/zx2f2Z9MMQ8/default.jpg][http://www.youtube.com/watch?v=zx2f2Z9MMQ8 watch Oomph explanation and demonstration video]

== buttons ==
As seen on [http://favrd.com/ Favrd]:

[http://www.northmay.com/deck/i/mix_oomph.jpg http://www.northmay.com/deck/i/mix_oomph.jpg] - was linked to http://www.visitmix.com/lab/oomph/

== links and articles ==
* http://codeplex.com/Oomph
* http://www.visitmix.com/Lab/Oomph
* http://www.ablognotlimited.com/articles/oomph-microformats-toolkit/
* http://visitmix.com/Articles/Prototype-Oomph-A-Microformats-Toolkit
* http://www.itpro.co.uk/607728/microsoft-tries-to-give-data-some-oomph

== source ==
* http://oomph.codeplex.com/SourceControl/ListDownloadableCommits.aspx

== issues ==
See [[oomph-issues]].

== sessions and presentations ==
* 2008-10-29 Microsoft PDC, "Oomph: A Microformats Toolkit" in room 501B at 3pm.
** http://twitter.com/Systim/status/980861207
** http://twitter.com/TommyLee/status/980857229

== see also ==
* [[Internet Explorer]]
* [[Operator]]

oomph

2009-08-25T22:51:51Z

Karstenj: /* overview */

== overview ==
Download Oomph v2.0 (2009-8-25) from http://codeplex.com/Oomph

Oomph is [[open source]]:
* [[Internet Explorer]] (versions 7 and 8) add-in that provide a user interface for all pages with [[hCard]] and/or [[hCalendar]] and/or [[hmedia]] (similar to [[operator]]).
* jQuery javascript extensions that can be installed on any website and provide an HTML overlay user-interface to all the [[hCard]], [[hCalendar]] and [[hmedia]] on the page for any browser.
* Windows Live Writer Plug-in for authoring hCard, hCalendar and hMedia
* Set of CSS stylesheets for nicely displaying hCards and hCalendar events
* ASP.NET control for generating [[hcard]] and [[hcalendar]]

== video ==
[http://www.youtube.com/watch?v=zx2f2Z9MMQ8 http://i3.ytimg.com/vi/zx2f2Z9MMQ8/default.jpg][http://www.youtube.com/watch?v=zx2f2Z9MMQ8 watch Oomph explanation and demonstration video]

== buttons ==
As seen on [http://favrd.com/ Favrd]:

[http://www.northmay.com/deck/i/mix_oomph.jpg http://www.northmay.com/deck/i/mix_oomph.jpg] - was linked to http://www.visitmix.com/lab/oomph/

== links and articles ==
* http://codeplex.com/Oomph
* http://www.visitmix.com/Lab/Oomph
* http://www.ablognotlimited.com/articles/oomph-microformats-toolkit/
* http://visitmix.com/Articles/Prototype-Oomph-A-Microformats-Toolkit
* http://www.itpro.co.uk/607728/microsoft-tries-to-give-data-some-oomph

== source ==
* http://oomph.codeplex.com/SourceControl/ListDownloadableCommits.aspx

== issues ==
See [[oomph-issues]].

== sessions and presentations ==
* 2008-10-29 Microsoft PDC, "Oomph: A Microformats Toolkit" in room 501B at 3pm.
** http://twitter.com/Systim/status/980861207
** http://twitter.com/TommyLee/status/980857229

== see also ==
* [[Internet Explorer]]
* [[Operator]]

hmedia

2009-08-12T17:33:42Z

Karstenj: /* Implementations */

<entry-title>hMedia</entry-title>
{{Template:DraftSpecification}}
{{TOC-right}}

'''[[hmedia|hMedia]]''' is a simple and open format for publishing Images Video and Audio. hMedia may be embedded in HTML or XHTML, Atom, RSS, and arbitrary XML. hMedia is one of several open [[microformats|microformat]] standards.

== hMedia Draft Specification 2009-01-04 ==

=== Editor/Author ===

* [[User:WebOrganics| Martin McEvoy]]

=== Contributors ===

In historical order of contribution

* [http://tantek.com/log/ Tantek Çelik]
* [[User:Kevin_Marks|Kevin Marks]]
* [http://napsterization.org/stories/ Mary Hodder]
* [[User:RodBegbie | Rod Begbie]]
* [http://joshkinberg.com/blog/ Joshua Kinberg]
* [[User:ChrisMessina | ChrisMessina]]
* [http://onlisareinsradar.com/ Lisa Rein]
* [[User:ChrisNewell | Chris Newell]]
* [[User:ManuSporny | Manu Sporny]]
* [[User:MikeJohnson | Mike Johnson]]
* [[User:WebOrganics| Martin McEvoy]]

=== Inspiration and Acknowledgements ===

Many thanks to [http://tantek.com/log/ Tantek Çelik], [[User:Kevin_Marks|Kevin Marks]], [http://napsterization.org/stories/ Mary Hodder], [[User:ChrisNewell|Chris Newell]], [[User:ChrisMessina | Chris Messina]], [http://changelog.ca/ Charles Iliya Krempeaux] and [http://blog.digitalbazaar.com Manu Sporny] for their valuable contributions to Media Info and Media Metadata in general.

=== Patents ===

{{MicroFormatPatentStatement}}

=== Semantic XHTML Design Principles ===

{{semantic-xhtml-design-principles}}

== Scope ==

Images, Video and Audio regularly share several common fields. hMedia has been based on a minimal common subset based on the analysis of 225 media related web pages. All fields discovered during analysis occur more than 80% of the time or more across each of the target domains listed on the [[media-info-examples|Media Info Examples]] page. hMedia was developed using the [[process|Microformats Process]] and [[principles|Design Principles]].

== Introduction ==

<cite>[http://napsterization.org/stories/ Mary Hodder] - 22 Jan 2006</cite>
<blockquote>There are many ways to publish media by users, but as people try to access those remixing and aggregation become more and more prevalent, having consistent records becomes important. Audio, photos and video show up in each other's publishing spaces, even though they are unique media objects. A photo might be next to the link for an audio piece, as it's visual artwork. A video can be comprised of quotes of other videos, photos and audio. Still photos can be made from videos. All three types of objects can contain subsets of media that is tagged and described.</blockquote>

== Format ==

=== Abstract ===

hMedia is a single media publishing format that relates to Images, Video and Audio with an Emphasis on Practical, Simple, and Minimal. Wherever possible field names have been chosen from those defined by the [[hcard|hCard]] standard.

=== Schema ===

See [[hmedia#Key|key]].

* hMedia '''hmedia'''{1}.
** '''fn'''. {1}.
** ''contributor'' *. Using text or [[hcard]].
** photo ?. Using the HTML IMG element.
** player ?. Using use any appropriate html element such as OBJECT.
** ''enclosure'' *. A <abbr title="Uniform Resource Locator">URL</abbr> using the [[rel-design-pattern]]

{{cheatsheet-key}}

=== Schema Definition ===

{{rfc-2119-intro}}

==== hmedia ====

hMedia is used to describe information associated with Images, Videos and Audio.

====fn====

The name of a media.

* The element is identified by the class name <code>fn</code>.
* hMedia {{must}} include one <code>fn</code> element.

==== contributor ====

A Contributor is any person or organization that takes part in the creation or distribution of the Media

* The element is identified by the class name <code>contributor</code>.
* hMedia {{may}} include one or more contributors.
* The contents of the element {{may}} include a valid [[hcard|hCard]].

==== photo ====

An embedded Image or Photograph of the Media

* The element is identified by the class name <code>photo</code>.
* hMedia {{may}} include one <code>photo</code> element.
* The element {{should}} use an <img> element.
* The <img> element attributes <code>height</code> and <code>width</code> {{may}} be used to determine the dimensions of a <code>photo</code>

==== player ====

The contents are an embedded video or movie of the Media such as a Flash Movie.

* The element is identified by the class name <code>player</code>.
* hMedia {{may}} include one <code>player</code> element.
* The element {{may}} use any appropriate html element such as <object>.
* The <object> element attributes <code>height</code> and <code>width</code> {{may}} be used to determine the dimensions of a <code>player</code>

==== enclosure ====

Indicates that the referred <abbr title="uniform resource locator">url</abbr> is a download of the Media.

* The element is identified by a <abbr title="Uniform Resource Locator">URL</abbr> using the [[rel-design-pattern]], the rel attribute {{should}} contain the value of <code>enclosure</code>..
* hMedia {{may}} include one or more <code>enclosure</code>'s.
* The media type of the enclosure {{should}} be specified by using a <code>type</code> specifier for a <abbr title="uniform resource locator">url</abbr>, the contents {{may}} be any [http://www.iana.org/assignments/media-types/ iana assigned media type] .
* Multiple enclosure elements {{should}} be used for different representations of the same Audio, video or Image.

=== XMDP Profile ===

<pre>
<dl class="profile">
<dt>class</dt>
<dd>
<a rel="help" href="http://www.w3.org/TR/html401/struct/global.html#adef-class">
HTML4 definition of the 'class' attribute.</a>
This meta data profile defines some 'class' attribute values (class names)
and their meanings as suggested by a
<a href="http://www.w3.org/TR/WD-htmllink-970328#profile">
draft of "Hypertext Links in HTML"</a>.
<dl>
<dt>hmedia</dt>
<dd>
Used to describe semantic information associated with Images, Videos and Audio.
</dd>
<dt>fn</dt>
<dd>
The name of a media
</dd>
<dt>contributor</dt>
<dd>
A Contributor is any person or organization that takes part in the creation or distribution of the Media
</dd>
<dt>photo</dt>
<dd>
An embedded Image or Photograph of the Media.
</dd>
<dt>player</dt>
<dd>
An embedded video or movie of the Media.
</dd>
<dt>enclosure</dt>
<dd>
Indicates that the referred url is a download of the Media.
</dd>
</dl>
</dd>
</dl>
</pre>

== Modularity ==

Although media items are sometimes presented on their own they are often found in data structures that are supported by existing microformats. It should therefore be possible to use the hMedia microformat as a child (or in some cases a parent) of these microformats.

=== Media Distribution and Syndication ===

* [[hatom|hAtom]]

Podcast and <abbr title="Video Podcast">Vidcast</abbr> feeds reference a sequence of media items. hMedia can therefore be used as a child element of hAtom.

Please see: [[hmedia#hAtom_and_hMedia|hAtom+hMedia example]].

=== Media Events ===

* [[hcalendar|hCalendar]]

hMedia may used to describe a continuous media stream for example a TV channel. An event or a schedule of events on the channel can be signaled using [[hcalendar#Root_Class_Name|vevent]] as child elements. A combination of hMedia and hCalendar may provide what is necessary to capture a specific event, the media stream information and the timing information.

Please see: [[hmedia#hCalendar_and_hMedia|hCalendar and hMedia]].

=== Media Reviews ===

* [[hreview|hReview]]

A Review about Audio, Video or Images often occurs in media publishing, hMedia reviews can often be published using hReview, capturing the reviewer, the reviewed item, a rating, a description, and the Date of a media review. hMedia may therefore be published as a child element of a [[hreview#Schema|hReview item]]

Please see: [[hmedia#hReview_and_hMedia|hReview and hMedia]].

== Examples ==

Using Real world Examples found on the [[media-info-examples]] page

=== Images ===

<pre>
<div class="hmedia">
<a rel="enclosure" type="image/jpeg" href="http://www.treeswing.net/index.php?showimage=355">
<img class="photo" alt="Saturday Nights alright for fighting, by treeswing"
src="http://cache1.photoblogs.org/thumbnail/?hash=9bece0678c5610bd4b631d9037286df7&size=450"/>
</a>
Saturday Night's Alright For Fighting,
by 
<a class="url fn" href="http://www.treeswing.net/">Treeswing</a>
(<a class="url" href="http://www.photoblogs.org/profile/treeswing.net/">profile</a>)

</div>
</pre>

=== Video ===

<pre>
<div class="hmedia">
Introduction to the Open Media Web
<object class="player" type="application/x-shockwave-flash" data="http://www.viddler.com/player/1d6265f3/">
<param name="movie" value="http://www.viddler.com/player/1d6265f3/"/>
<param name="allowScriptAccess" value="always"/>
<param name="allowFullScreen" value="true"/>
</object>
<ul>
<li><a rel="enclosure" type="video/mp4" title="Download the original source file for this movie"
href="/explore/factoryjoe/videos/2.m4v">Original</a></li>
</ul>
</div>
</pre>

=== Audio ===

<pre>

<a rel="enclosure" type="audio/mpeg" href="http://homepage.mac.com/mr.gilbert/.Music/earle_waydownhole.mp3">

Steve Earle
 -
"Way Down in the Hole" (Tom Waits cover)
</a>

</pre>

=== Combined ===

==== hAtom and hMedia ====
<pre><div id="example" class="hentry hmedia">
<h2 class="entry-title"><a class="fn" href="#example" rel="bookmark">Introduction to the Open Media Web</a></h2>
by <cite class="author vcard">Author</cite> on:
<abbr class="updated" title="2008-12-14T11:08:00+01:00">14th Dec, 2008</abbr>
<div class="entry-content">The introductory video describing the Open Media Web project and where it's -- roughly -- going!</div>
<object class="player" width="545" height="451" type="application/x-shockwave-flash" data="http://www.viddler.com/player/1d6265f3/">
<param name="movie" value="http://www.viddler.com/player/1d6265f3/"/>
<param name="allowScriptAccess" value="always"/>
<param name="allowFullScreen" value="true"/>
</object>
Download: <a rel="enclosure" type="video/mp4;length=18454938" href="http://www.viddler.com/explore/factoryjoe/videos/2.m4v">
Original</a>

</div></pre>

==== hCalendar and hMedia ====
<pre><div class="hmedia">
<div id="bip-play-emp">
<object class="player" height="395" width="640"
data="http://www.bbc.co.uk/emp/9player.swf?revision=7276&embedPageUrl=
http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor/#anchor-info-dialog&domId=bip-play-emp
&config=http://www.bbc.co.uk/emp/iplayer/config.xml
&playlist=http://www.bbc.co.uk/iplayer/playlist/b00gd1mr
&guidance=unset"
name="bbc_emp_embed_bip-play-emp"
id="bbc_emp_embed_bip-play-emp"
type="application/x-shockwave-flash">
<param name="movie" value="http://www.bbc.co.uk/emp/9player.swf?revision=7276&embedPageUrl=
http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor/#anchor-info-dialog
&domId=bip-play-emp&config=http://www.bbc.co.uk/emp/iplayer/config.xml
&playlist=http://www.bbc.co.uk/iplayer/playlist/b00gd1mr
&guidance=unset"/>
<param name="allowScriptAccess" value="always"/>
<param name="allowFullScreen" value="true"/>
<param name="wmode" value="default"/>
<param name="quality" value="high"/>
</object>
</div>
<div class="vevent">

<a class="url fn" href="http://www.bbc.co.uk/iplayer/episode/b00gd1mr/Doctor_Who_The_Next_Doctor">
Doctor Who: The Next Doctor
</a>
,
Broadcast on: BBC One,
<abbr class="dtstart" title="2008-12-25T18:10:00+01:00">6:00pm Thursday 25th December</abbr>,
Duration:
<abbr class="duration" title="PT60M">60</abbr> minutes,
Available until:
<abbr class="dtend" title="2009-01-08T15:49:00+01:00">3:49pm Thursday 8th January</abbr>
</div>
</div></pre>

==== hReview and hMedia ====
<pre><div class="hreview">
Reviewed by: 
anonymous,

On: <abbr class="dtreviewed" title="2009-01-03">January 3rd, 2009</abbr>.
<div class="item hmedia">
<a class="url fn" rel="enclosure" href="http://mediaweb.musicradio.com/mp3/Mis-takes.mp3" type="audio/mpeg">Mis-takes</a>
by: 
The Charlatans

</div>
<div>Rating: <abbr class="rating" title="4">****</abbr> out of 5 stars</div>
<div class="description">
This is a great track from The Charlatans latest album You Cross My Path, well worth a listen.
</div>
</div></pre>

== Implementations ==

* [http://visitmix.com/Opinions/I-3-hMedia Mix Online] discusses two examples with consume hMedia with [[oomph|Oomph]], one with music on [http://rhizohm.net/music Rhizohm] and one with photos on [http://thunderkick.us/index_hMedia.html Thunderkick].
* The [http://weborganics.co.uk/hCast/ Hypermedia Podcast] uses [[hmedia|hMedia]] + [[hatom|hAtom]] to generate a [http://search.yahoo.com/mrss MediaRSS] feed ([[hmedia#hAtom_and_hMedia|as demonstrated above]])
* There is a web-service that extracts [[hmedia|hMedia]] + [[hatom|hAtom]] as [http://search.yahoo.com/mrss MediaRSS] available at [http://transformr.co.uk Transformr]

== History ==
* Dougal Campbell first talks about [http://microformats.org/discuss/mail/microformats-discuss/2005-July/000229.html microformats for various types of media?] on Jul 13th 2005

* Thu Sep 1st 2005, a discussion about a Playlist Microformat by Lucas Gonze, [http://microformats.org/discuss/mail/microformats-discuss/2005-September/000835.html hPlaylist]

* Tantek Çelik starts Initial exploration about a [http://microformats.org/discuss/mail/microformats-discuss/2005-September/000843.html media-info microformat] on Sep 3rd 2005

* Joshua Kinberg discusses a [http://microformats.org/discuss/mail/microformats-discuss/2005-September/000992.html media/enclosure microformat] on Sep 20th 2005

* On November 2nd 2005 Chris Messina discusses [http://microformats.org/discuss/mail/microformats-discuss/2005-November/001833.html a microformat for audio track metadata].

* On December 6th 2005 Charles Iliya Krempeaux discusses a [http://microformats.org/discuss/mail/microformats-discuss/2005-December/002292.html TV show microformat].

* On Jan 1st 2006 Tantek Çelik calls for a simple media microformat which describes the 80/20 of information about a particular piece of media and nothing more. see: [http://microformats.org/discuss/mail/microformats-discuss/2006-January/002551.html]

* March 24th 2006 Rod Begbie [http://microformats.org/discuss/mail/microformats-discuss/2006-March/003383.html Proposed a Music microformat].

* Enric discusses a [http://microformats.org/discuss/mail/microformats-discuss/2006-June/004419.html media file example of hAtom] on Jun 13th 2006

* Steve Williams (Digg) discusses [http://microformats.org/discuss/mail/microformats-discuss/2006-August/005139.html Media Metadata, Specifically Video Thumbnails] on Aug 16th 2006

* First [http://microformats.org/discuss/mail/microformats-discuss/2007-February/008626.html hMedia microformat] Propsal by Chris Newell on Feb 8th 2007

* More interest in a [http://microformats.org/discuss/mail/microformats-discuss/2007-February/008848.html music/media-info microformat] by Marian Steinbach on Feb 26th 2007 and later on [http://microformats.org/discuss/mail/microformats-new/2007-March/000028.html Microformats New]

* Martin McEvoy Renews interest in a [http://microformats.org/discuss/mail/microformats-new/2008-November/001861.html Media Microformat] on Nov 9th 2008

* hMedia 0.1 Draft Specification 2009-01-04

== References ==

=== Normative References ===

* [[hcard]]
* [[rel-design-pattern]]
* [[rel-enclosure]]

=== Informative References ===

* [http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2 HTML4 Image element]
* [http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3 HTML4 Object element]
* [http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel HTML4 rel Definition]
* [http://www.alistapart.com/articles/byebyeembed/ Article on why you should not use embed] from A List Apart.

== Similar Work ==

* [[media-chapters|Media Chapters]]
* [[haudio|hAudio]]
* [[video-info-examples|Video Info]]
* [[photo-note-examples|Photo Notes]]

== Work in progress ==

=== Brainstorming ===

Do you want to help develop the next version of [[hmedia|hMedia]]? Please add your thoughts and insight on the [[hmedia-brainstorming]] page.

=== Discussions ===

* Please forward questions and ideas to the [http://microformats.org/mailman/listinfo/microformats-new Microformats New] mailing list.

=== Issues ===

Please see: [[hmedia-issues]]

{{Template:hmedia-related-pages}}

[[Category:Draft Specifications]]

oomph-issues

2009-08-11T21:34:45Z

Karstenj: /* issues */

<entry-title>Oomph issues</entry-title>

Issues with [[oomph]].

== issues ==
<div class="discussion">
* Apparent problems parsing [[hCards]] and [[hCalendar]] events on [http://en.wikipedia.org/wiki/Thomas_Edison Wikipedia: Edison] page (from report in email). [[User:Tantek|Tantek]] 21:59, 4 July 2009 (UTC) {corrected page name [[User:Bsd|Bsd]] 20:39, 7 July 2009 (UTC)}
** This page has changed as the nested (contained) hCards and hCalendar events were disabled on the Wikipedia template on 5 July. The main issue was that "org" values from the [[hcard-parsing#nested_hCards|nested hCards]] (invalid due to no "n" values) ignored the boundary and were passed to "org" on the root hCard. A second issue that still exists on this page is that it crashes the MIX hcard-to-vcard service; may be because values for "n" cannot be extracted from the three-name "fn" value ("Thomas Alva Edison") that is provided. [[User:Bsd|Bsd]] 21:09, 7 July 2009 (UTC)

This is fixed in Oomph V2.
</div>

Other issues with Oomph are logged at [http://oomph.codeplex.com/Thread/List.aspx Codeplex]

== see also ==
* [[oomph]]
* [[hCard]]
* [[hCalendar]]

value-class-pattern

2009-08-10T21:38:22Z

Karstenj: /* Blog Posts */

<entry-title>Value Class Pattern</entry-title>

The value class pattern is derived from [[hCard#Value_excerpting|value-excerpting]] in hCard.

''The editors believe the value-class-pattern to be feature complete and ready for use in markup. Implementers are encouraged to update accordingly and provide [[value-class-pattern-feedback|feedback]]. '''Note''', the precise parsing behavior could change in response to implementer feedback, but the core methods are stable. You should watch this page for updates.''

See also, the [http://microformats.org/blog/2009/05/12/value-class-pattern/ blog announcement].

__TOC__
; Editors
: [[User:BenWard|Ben Ward]]
: [[User:Tantek|Tantek Çelik]]
; Short URL
: <kbd>http://tr.im/valueclass</kbd>

Sometimes, only a part of an element's content is to be used as the value of a microformat property. This may occur when a property has optional subproperties, such as <code>tel: type</code> and <code>tel: value</code> in [[hCard]]. Other times, the most appropriate structure for a property may include other content.

For these purposes, the special class name <code>value</code> is used to mark-up the relevant data excerpt from larger element content.

==Simple Examples==

Here is markup for a home phone number:

vCard fragment:

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

hCard fragment:

<source lang=html4strict>

Home:
+1.415.555.1212

</source>

In this case, the <code>value</code> of <code>tel</code> is <code>+1.415.555.1212</code>, not <code>Home: +1.415.555.1212</code>.

Sometimes the value for a microformats property must be split into multiple pieces in the content of the element representing that property. Multiple elements with a class name of "value" (value elements) can be used to extract and concatenate these pieces into a single value for microformats properties which expect simple strings or tel values.

Another example, this time using a localized (British) telephone number:

<source lang=html4strict>

Home:
+44 (0) 1223 123 123

</source>

In this case, the valid ''data'' for the telephone number is <samp>+441223123123</samp>, but the way in which phone number is presented in Britain will include the <samp>(0)</samp>, for local dialling. That is, from anywhere in the world you may dial <kbd>+441223123123</kbd>, or from within Britain you may dial <kbd>01223123123</kbd>. Common local publishing interferes with the data, since dialling <kbd>'''+440'''1223123123</kbd> is an invalid number.

In the mark-up, two <code>value</code> classes target the part of the telephone number string that makes an international, valid number, whilst allowing conventional presentation.

Another example, adding a place name to a [[geo]] co-ordinate:

<source lang=html4strict>
I'm loitering outside The Bricklayer's Arms

51° 30' 48.45", -0° 8' 53.23"
(51.513458;-0.14812)


</source>

Whilst the entire string is a geo point, it's only the decimal encoded co-ordinates which must be consumed by a microformats parser, so the <code>value</code> class isolates it from the degrees form, which the publisher includes for completeness.

==Basic Parsing==
# The value class pattern only applies to properties which are simple strings, enumerated values, telephone numbers, and datetimes. The value class pattern does not affect parsing of properties of type email, URL, URI, UID.
# Where an element with such a microformat property class name has a descendant with class name <code>value</code> (a "value" element), parsers should use the following portion of that element:
## if the value element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
## if the value element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
## for any other element, use its inner-text.
# Where there are multiple descendants of a property with class name of <code>value</code> (multiple value elements)
## if the microformats property expects a simple string, enumerated value, or telephone number, then the values extracted from the value elements should be concatenated ''without'' inserting additional characters or white-space.
## if the microformats property expects a datetime value, see the [[#Date_and_time_parsing|Date Time Parsing]] section.
# Descendants with class of <code>value</code> must not be parsed deeper than one level. That is, where an element <code>foo</code> with class <code>value</code> has a descendant <code>bar</code> with class <code>value</code>, the content of <code>foo</code> is taken as the <code>value</code>. Nesting additional elements with class of <code>value</code> cannot be used to further isolate a property's value.

e.g.

<source lang=html4strict>


Puppies Rule!
But kittens are better!


</source>

In this example, <code>description</code> has a child ‘<code>value</code>’, and that child has a ''grandchild'' ‘<code>value</code>’. However, the parsing of <code>value</code> classes stops at the first level, so the data for <code>description</code> is: <samp><code>Puppies Rule!But kittens are better!</code></samp>, not just <samp>Puppies Rule!</samp>.

== Date and time values ==
Some microformats properties expect an ISO8601 datetime value, e.g. [[hCalendar]] <code>dtstart</code> and <code>dtend</code> or [[hAtom]] <code>published</code>.

Authors may use the value class pattern to separately specify the date and the time, which are then combined to specify a single datetime value.

Example, this hCalendar 'dtstart' property with 'value' elements:

<source lang=html4strict>
The weekly dinner will be on

<abbr class="value" title="2008-06-24">this Tuesday</abbr>
at 18:30


</source>

produces the following 'dtstart' value:

<source lang=text>
2008-06-24T18:30:00
</source>

and iCalendar converters produce the following DTSTART:

<source lang=text>
DTSTART:20080624T183000
</source>

The lack of a timezone indicates a "floating" datetime, that is a datetime independent of any particular timezone. Examples of floating datetimes could be an alarm clock you set to ring at 7am, or the common 9am-5pm workday.

=== Date and time parsing ===
For all date time properties (as defined in their respective microformats specifications), the following rules apply in addition to (and in some cases replacing) the above value class pattern parsing rules.

When a "value" element is found, parse a value from the element as follows:
* if the element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
* if the element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
* for any other element, use its inner-text.
* if the value has both a specific ISO8601 date and a specific time, use those and stop looking for "value" elements.
* if the value has *only* a specific date, specifically, fits the following ISO8601 date patterns (i.e. as documented in the [http://en.wikipedia.org/wiki/ISO_8601 Wikipedia summary of ISO8601])
** YYYY-MM-DD
** YYYY-DDD
** then use that as the date value. For the purposes of the value class pattern, the hyphens "-" separating the year, month, day and/or ordinal day are required.
** ignore any further "value" elements that specify the date.
* if the value has *only* a specific time (with or without timezone), parse it for a time value that can match any of the following:
** 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 is the 24 hour "hours" in the time, from 00 to 24, with optional leading 0 for values less than 10.
** MM are the minutes from 00 to 59
** SS are the optional seconds from 00 to 59 (60 for a leap second). If omitted, infer 00 seconds.
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** For the purposes of the value class pattern, the colons ":" separating the hour, minutes, seconds are required.
** However the colons ":" separating the hours and minutes of any timezone offset are ''optional'' and discouraged in order to make it less likely that a timezone offset will be confused for a time.
** Under strong consideration: case insensitive { }"am"|{ }"a.m." suffix to treat an HH value of 12 as 00, or a case-insensitive { }"pm"|{ }"p.m." suffix to add 12 to HH value less than 12 - per [http://en.wikipedia.org/wiki/12-hour_clock Wikipedia article on the 12 hour clock]. Note: [[X2V]] has implemented this.
*** HH:MM:SSam
*** HH:MM:SSpm
*** HH:MMam
*** HH:MMpm
*** HHam
*** HHpm
*** where "am" and "pm" mean "am or a.m." and "pm or p.m."
*** when MM is omitted, infer 00 minutes.
** ignore any further "value" elements that specify the time.
* if the value has *only* a specific timezone, parse it for a time zone value that can match any of the following:
** -XX:YY
** +XX:YY
** -XXYY
** +XXYY
** -XX
** +XX
** Z
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** ignore any further "value" elements that specify the timezone.

If by parsing the "value" element(s), at least a specific date has been found, then the "value" is overall valid, and the parser assembles the overall datetime value by concatenating the specific date, "T" and specific time (if time was specified, with 00 seconds implied if no seconds are provided), and specific timezone (if timezone and a specific time was specified).
* YYYY-MM-DD - no time specified
* YYYY-MM-DDTHH:MM:SS - time specified but no timezone. This is a floating time.
* YYYY-MM-DDTHH:MM:SS-XXYY or
* YYYY-MM-DDTHH:MM:SSZ or
* YYYY-MM-DDTHH:MM:SS+XXYY - both time and timezone were specified.

iCalendar converters in addition must do the following:
* remove any dash "-" separators in the date.
* remove any colon ":" separators in the time.
* perform datetime math on any +/- relative timezone value, and produce an effective UTC value ending with "Z".

Atom converters in addition must do the following:
* normalize all date and datetime values to RFC 3339.

=== derivation and tests ===
The handling of date and time values in the value class pattern was originally [[value-excerption-pattern-brainstorming#date_and_time_separation|brainstormed on the value-excerption-pattern-brainstorming]] page and derived from that analysis and feedback. For the curious, historical details may be found there, along with additional thoughts for extension.

See [[value-class-date-time-tests]] for test cases.

=== format specific optimizations ===
The following are format specific optimizations under strong consideration that make use of the value-class-pattern. Note: [[X2V]] has implemented this for hCalendar.

;short URL for this section
:http://tr.im/vcpfso

==== hCalendar dtend implied date ====
Typically events that start and end the same day only display the date of the event once (makes sense per the DRY [[principle]]) (real world examples: [http://upcoming.yahoo.com/event/3010807/ Upcoming], ... more examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hCalendar]] event "dtend" date from its "dtstart" date when only the time (and optionally timezone) was specified for its "dtend", e.g.:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

To simplify this further for authors, hCalendar processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "dtend" span:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

hCalendar to iCalendar converters should produce the following iCalendar fragment (as part of a valid .ics file) from either of the above two examples:

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

Note: [[X2V]] has implemented this.

Examples "in the wild":
* http://microformats.org/wiki/events/2009-08-12-nyc-workshop (real world example, but on this wiki).

==== hAtom updated implied date ====
Similarly, in blog posts that indicate both when they were "published" and "updated", the date is usually only displayed once, typically when "published" (real world examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hAtom]] entry "updated" date from its "published" date when only the time (and optionally timezone) was specified for its "updated", e.g. for a blog post that was updated the same day:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

To simplify this further for authors, hAtom processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "updated" span:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

==Parsing value from a <code>title</code> attribute==
The <code>value-title</code> class name allows the publisher to indicate the data value for a parent property is contained in the <code>title</code> attribute of an element, rather than the inner-text.

This can be used to provide a synonym within content, or used to quietly publish alternate forms of information for microformats parsing, without affecting the consumption of content.

For example, you can use casual localization with dates:

<source lang=html4strict>
It was

last year

that I realised my addiction to cashew nuts would cost this country so dear.

</source>

Parsing rules for <code>value-title</code> are the same as for <code>value</code> above, with the following change:

* Where a microformats property has a child element with class name of <code>value-title</code>, the content of the <code>title</code> attribute of that element must be parsed, rather than the portion of the element that would be parsed for a class name of <code>value</code>.

===Using <code>value-title</code> to publish machine-data===

The initial usage of <code>value-title</code> is used to publish alternate, parsable forms of property values in a visible context without the use of the <code>abbr</code> element whose semantics already support interpretation of the 'title' attribute as an expanded, more precise form of the content.

Experience has found that there are some cases in microformats where a number of publishers want to include a precisely accurate and parsable value for a property but do not want it to be visible in their page, even as a tooltip.

For example, full [[ISO8601]] datetimes may be confusing to readers of the page (as a tooltip or when read aloud by a screen reader), and enumerated values such as the <code>type</code> subproperty of hCard's <code>tel</code> property use US-English terms, which are not part of pages in any other language.

Since both of those scenarios have shown to be obstacles for a number of publishers, for these cases, and these alone, there exists a further extension of value-excerption. This extension allows the parsable form of the property to be published ‘silently’ immediately adjacent with the respective local visible content.

Here is an example, with the required use of a first child element with class name <code>value-title</code>:

<source lang=html4strict>


 
mobile

+44 7773 000 000

</source>

The <samp>cell</samp> value is parsed for the 'type' subproperty, but <samp>mobile</samp> is presented to the user.

In the case of dates:

<source lang=html4strict>

 
March 14th 2009, around half-past four

</source>

A microformats parser will read the ISO8601 format datetime <samp>2009-03-14T16:28-0600</samp>, but users will only see <samp>March 14th 2009, around half-past four</samp>. Testing has shown that the ISO8601 datetime above does not get exposed to any user at all.

===Parsing machine-data <code>value-title</code>===

Browsers collapse the <code>value-title</code> span down to a width of <code>0</code>, effectively providing no visual rendering, whilst keeping the element in the DOM. With no physical dimensions, there is no ‘hover’ state, so no tooltip is revealed. Furthermore, the empty element is not passed to assistive technology layers such as VoiceOver. Screen readers do not read the contents of the title attribute of an empty <code>span</code> element.

We conducted [[value-excerption-value-title-test|thorough testing]] of these parsing behaviors to ensure accessibility.

''Note: Whilst the <code>value-title</code> element is more gracefully written without whitespace inner-text (or as self-closing <code><foo /></code> element in XHTML), current tools such as WYSIWYG editors and HTML-Tidy will erroneously discard such elements, resulting in parsable data being thrown away by some tools. As such, <code> </code>, including a single whitespace character between the opening and closing tag, is the required pattern for authors, at this time.''

Parsing this final <code>value-title</code> extension imposes some stricter restrictions on usage. These restrictions exist to reduce the impact of <abbr title="Don't Repeat Yourself">DRY</abbr> violations, reduce the opportunity for sites to spoof data, and encourage best practice for maintaining both forms of data accurately.

Where an element with class <code>value-title</code> is to be parsed as data for a property, and that element also contains no non-whitespace content (hereafter referred to as ‘empty’), the following rules apply:

* The ‘empty’ value-title element must be the '''first, non-whitespace child''' of the property element. That is, it should follow immediately after the property is declared, before the human-readable form, and without any additional nesting.
* The ‘empty’ value-title element can only be used for specific properties. Microformat specifications must explicitly state which properties may be used with this extension of the value-class-pattern.
* Where an ‘empty’ value-title element is to be used as the single property value, it must be the ''only'' such <code>value</code> content. That is, the first instance of a conforming <code>value-title</code> element overrides all other <code>value</code> and <code>value-title</code> siblings and/or cousins.
* Tools written to perform Conformance Testing and/or Validation of microformats ''should'' attempt to compare the machine-data and human legible forms of the property data, and advise authors if the forms do not match.

=== limited use of value-title ===
Due to the fact that the value-title pattern hides some amount of data which tends to be a machine-specific duplicate of data that is provided in the human readable content, there are two microformats [[principles]] being compromised: '''visibility''' and '''<abbr title="Don't Repeat Yourself">DRY</abbr>'''. Thus the applicability of this pattern is deliberately restricted to properties that have demonstrated through experience a need for it, with no known better alternative.

In general authors should:

# First, try to directly specify microformats property values inline (the most visible, no duplication),
# Then consider using the value-class pattern
## Including multiple value elements for date and time properties
# and then only if those methods are insufficient, consider the value-title pattern.

This document post-dates other microformat specifications, such that they may not yet indicate which properties permit use of this pattern. In the interim, '''only''' the following types of properties should allow the value-title pattern.

* ISO8601 date, datetime, timezone, and duration values
* Enumerated values (such as the hCard tel/email/adr 'type' subproperties)
* Co-ordinates (such as the [[geo]] 'latitude' and 'longitude' properties)
* Telephone number properties (e.g. the hCard 'tel' property)

The [[machine-data]] page has documentation of some of the properties of some specs which experience has shown need a solution like the value-title pattern.

There are some simple reference examples and tests for this pattern on [[value-class-pattern-tests]].

In future use, ''specification authors'' may inherit use of <code>value-title</code> by use of ISO8601 date and time formats, or reuse of other microformats, but specifications should _avoid_ introducing new data structures that depend on or encourage this pattern. New specifications are themselves expected to adhere to the principals of visibile data and <abbr>DRY</abbr>.

== Test cases ==
See [[value-class-pattern-tests]].

== <abbr title='Frequently Asked Questions'>FAQ</abbr>==
This section is '''informative'''.

Frequently asked questions about the value-class-pattern. Once this section grows too big, we'll make a separate wiki page (like [[value-class-faq]]).

<div class='discussion'>
* '''Why use an 'empty' element? Why not embed data in the class attribute?'''
** The class attribute is inappropriate for embedded data values, as per the HTML4 specification, which states <code>class</code> is for ‘general purposing processing’, which is defined as ‘e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.’. ‘General purpose processing’ does not extend to data itself. Furthermore, this method avoids inventing a new string pattern for embedding data.
* '''Why use an 'empty' element? Why not make up a new attribute, like ‘data’?'''
** Microformats exist and function in ''valid'' HTML4 and XHTML1. Those are the current standards for web development, and microformats exist for use ''now''. In the future, perhaps revisions of HTML will offer up another solution. For now, this method has been tested against browsers, and creates a consistent document structure (where machine-form and human-form data are siblings).
* '''The <code>title</code> attribute should only be used for content!'''
** The <code>title</code> attribute ''is'' used for content and is read by microformats parsers. This exists for cases where data cannot be parsed with sufficient precision from just the commonly published, visible information. This pattern allows both forms of content to be included, whilst keeping it invisible to human consumers.
</div>

You can also refer to the general [[faq|Microformats FAQ]] and [[principles]].

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

The following sites and pages have started marking up content with the value-class-pattern, and are thus good places to go for examples with real world content to test with implementations (i.e. parsers). If you use the value-class-pattern in your content, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page (like [[value-class-examples-in-wild]]).

* [http://georgebrock.com/ George Brocklehurst's activity stream] and [http://blog.georgebrock.com/ blog] use "value-title" for hAtom <code>published</code> property
* [http://ben-ward.co.uk/ Ben Ward's home page] uses:
** "value-title" for hCard <code>bday</code> property
** "value-title" for hAtom <code>updated</code> property
* [http://microformats.org/ microformats.org] uses:
** "value-title" for hAtom <code>updated</code> property in [[http://microformats.org/ microformats.org blog postss]]]
** date and time value separation for hCalendar <code>dtstart</code> property in [[events|microformats.org recent and upcoming events wiki page]]

''Add your site/page(s) that use the value-class-pattern here, along with a brief description of what value-class-pattern features you use, with which microformat(s) and which of its/their properties.''

== Implementations ==

This section is '''informative'''.

The following implementations have been developed which either generate or parse value-class-pattern property values. If you have an value-class-pattern 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 (like [[value-class-implementations]]).

* [[X2V]] v0.9.3 and later:
** implements [[#Date_and_time_values|Date and time values parsing]], including am/pm time values
** thus passes [[value-class-pattern-tests#Date_and_time_values|Date and time values test cases]].
** implements [[#hCalendar_dtend_implied_date|hCalendar implied dtend date]]
* [[Operator]] has *some* implementation of the value-class-pattern according to Michael Kaply, but precisely how much is implemented, for which properties (property types) and which microformats is not currently known.
* [[Optimus]] v0.8 and later implements <code>value-title</code> as [http://twitter.com/DmitryBaranovsk/status/1891253248 announced by Dmitry Baranovskiy].
* ... add your implementation(s) that parse or generate the value-class-pattern here, along with which features you support (hopefully all!) and note any limitations if any.

==Blog Posts==
Blog posts discussing the value class pattern, most recent first:
* [http://ablognotlimited.com/s/106 Getting Semantic With Microformats, Part 8: Value Class Pattern] -- A very thorough writeup by Emily Lewis on the 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]

==Related Pages==
This section is '''informative'''.

* [[value-class-pattern-tests]]
* [[value-excerption-pattern-issues]]
* [[hcard#Value_excerpting|hCard: Value Excepting]]
* [[value-excerption-pattern-brainstorming]]
* [[machine-data|Machine Data in Microformats]]

== References ==
This section is '''informative'''.
* [http://www.useit.com/alertbox/9608.html Jakob Nielsen: International Web Usability]

value-class-pattern

2009-08-10T21:37:23Z

Karstenj: /* Blog Posts */

<entry-title>Value Class Pattern</entry-title>

The value class pattern is derived from [[hCard#Value_excerpting|value-excerpting]] in hCard.

''The editors believe the value-class-pattern to be feature complete and ready for use in markup. Implementers are encouraged to update accordingly and provide [[value-class-pattern-feedback|feedback]]. '''Note''', the precise parsing behavior could change in response to implementer feedback, but the core methods are stable. You should watch this page for updates.''

See also, the [http://microformats.org/blog/2009/05/12/value-class-pattern/ blog announcement].

__TOC__
; Editors
: [[User:BenWard|Ben Ward]]
: [[User:Tantek|Tantek Çelik]]
; Short URL
: <kbd>http://tr.im/valueclass</kbd>

Sometimes, only a part of an element's content is to be used as the value of a microformat property. This may occur when a property has optional subproperties, such as <code>tel: type</code> and <code>tel: value</code> in [[hCard]]. Other times, the most appropriate structure for a property may include other content.

For these purposes, the special class name <code>value</code> is used to mark-up the relevant data excerpt from larger element content.

==Simple Examples==

Here is markup for a home phone number:

vCard fragment:

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

hCard fragment:

<source lang=html4strict>

Home:
+1.415.555.1212

</source>

In this case, the <code>value</code> of <code>tel</code> is <code>+1.415.555.1212</code>, not <code>Home: +1.415.555.1212</code>.

Sometimes the value for a microformats property must be split into multiple pieces in the content of the element representing that property. Multiple elements with a class name of "value" (value elements) can be used to extract and concatenate these pieces into a single value for microformats properties which expect simple strings or tel values.

Another example, this time using a localized (British) telephone number:

<source lang=html4strict>

Home:
+44 (0) 1223 123 123

</source>

In this case, the valid ''data'' for the telephone number is <samp>+441223123123</samp>, but the way in which phone number is presented in Britain will include the <samp>(0)</samp>, for local dialling. That is, from anywhere in the world you may dial <kbd>+441223123123</kbd>, or from within Britain you may dial <kbd>01223123123</kbd>. Common local publishing interferes with the data, since dialling <kbd>'''+440'''1223123123</kbd> is an invalid number.

In the mark-up, two <code>value</code> classes target the part of the telephone number string that makes an international, valid number, whilst allowing conventional presentation.

Another example, adding a place name to a [[geo]] co-ordinate:

<source lang=html4strict>
I'm loitering outside The Bricklayer's Arms

51° 30' 48.45", -0° 8' 53.23"
(51.513458;-0.14812)


</source>

Whilst the entire string is a geo point, it's only the decimal encoded co-ordinates which must be consumed by a microformats parser, so the <code>value</code> class isolates it from the degrees form, which the publisher includes for completeness.

==Basic Parsing==
# The value class pattern only applies to properties which are simple strings, enumerated values, telephone numbers, and datetimes. The value class pattern does not affect parsing of properties of type email, URL, URI, UID.
# Where an element with such a microformat property class name has a descendant with class name <code>value</code> (a "value" element), parsers should use the following portion of that element:
## if the value element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
## if the value element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
## for any other element, use its inner-text.
# Where there are multiple descendants of a property with class name of <code>value</code> (multiple value elements)
## if the microformats property expects a simple string, enumerated value, or telephone number, then the values extracted from the value elements should be concatenated ''without'' inserting additional characters or white-space.
## if the microformats property expects a datetime value, see the [[#Date_and_time_parsing|Date Time Parsing]] section.
# Descendants with class of <code>value</code> must not be parsed deeper than one level. That is, where an element <code>foo</code> with class <code>value</code> has a descendant <code>bar</code> with class <code>value</code>, the content of <code>foo</code> is taken as the <code>value</code>. Nesting additional elements with class of <code>value</code> cannot be used to further isolate a property's value.

e.g.

<source lang=html4strict>


Puppies Rule!
But kittens are better!


</source>

In this example, <code>description</code> has a child ‘<code>value</code>’, and that child has a ''grandchild'' ‘<code>value</code>’. However, the parsing of <code>value</code> classes stops at the first level, so the data for <code>description</code> is: <samp><code>Puppies Rule!But kittens are better!</code></samp>, not just <samp>Puppies Rule!</samp>.

== Date and time values ==
Some microformats properties expect an ISO8601 datetime value, e.g. [[hCalendar]] <code>dtstart</code> and <code>dtend</code> or [[hAtom]] <code>published</code>.

Authors may use the value class pattern to separately specify the date and the time, which are then combined to specify a single datetime value.

Example, this hCalendar 'dtstart' property with 'value' elements:

<source lang=html4strict>
The weekly dinner will be on

<abbr class="value" title="2008-06-24">this Tuesday</abbr>
at 18:30


</source>

produces the following 'dtstart' value:

<source lang=text>
2008-06-24T18:30:00
</source>

and iCalendar converters produce the following DTSTART:

<source lang=text>
DTSTART:20080624T183000
</source>

The lack of a timezone indicates a "floating" datetime, that is a datetime independent of any particular timezone. Examples of floating datetimes could be an alarm clock you set to ring at 7am, or the common 9am-5pm workday.

=== Date and time parsing ===
For all date time properties (as defined in their respective microformats specifications), the following rules apply in addition to (and in some cases replacing) the above value class pattern parsing rules.

When a "value" element is found, parse a value from the element as follows:
* if the element is an <code>img</code> or <code>area</code> element, then use the element's <code>alt</code> attribute value.
* if the element is an <code>abbr</code> element, then use the element's <code>title</code> attribute value.
* for any other element, use its inner-text.
* if the value has both a specific ISO8601 date and a specific time, use those and stop looking for "value" elements.
* if the value has *only* a specific date, specifically, fits the following ISO8601 date patterns (i.e. as documented in the [http://en.wikipedia.org/wiki/ISO_8601 Wikipedia summary of ISO8601])
** YYYY-MM-DD
** YYYY-DDD
** then use that as the date value. For the purposes of the value class pattern, the hyphens "-" separating the year, month, day and/or ordinal day are required.
** ignore any further "value" elements that specify the date.
* if the value has *only* a specific time (with or without timezone), parse it for a time value that can match any of the following:
** 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 is the 24 hour "hours" in the time, from 00 to 24, with optional leading 0 for values less than 10.
** MM are the minutes from 00 to 59
** SS are the optional seconds from 00 to 59 (60 for a leap second). If omitted, infer 00 seconds.
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** For the purposes of the value class pattern, the colons ":" separating the hour, minutes, seconds are required.
** However the colons ":" separating the hours and minutes of any timezone offset are ''optional'' and discouraged in order to make it less likely that a timezone offset will be confused for a time.
** Under strong consideration: case insensitive { }"am"|{ }"a.m." suffix to treat an HH value of 12 as 00, or a case-insensitive { }"pm"|{ }"p.m." suffix to add 12 to HH value less than 12 - per [http://en.wikipedia.org/wiki/12-hour_clock Wikipedia article on the 12 hour clock]. Note: [[X2V]] has implemented this.
*** HH:MM:SSam
*** HH:MM:SSpm
*** HH:MMam
*** HH:MMpm
*** HHam
*** HHpm
*** where "am" and "pm" mean "am or a.m." and "pm or p.m."
*** when MM is omitted, infer 00 minutes.
** ignore any further "value" elements that specify the time.
* if the value has *only* a specific timezone, parse it for a time zone value that can match any of the following:
** -XX:YY
** +XX:YY
** -XXYY
** +XXYY
** -XX
** +XX
** Z
** XX is the time zone hours offset, from 00 to 12 with optional leading 0 for values less than 10.
** YY is the time zone minutes offset, from 00 to 59, though in practice only 00, 15, 30, 45 minute offsets are used in global timezones.
** Z is the literal 'Z' to indicate GMT.
** ignore any further "value" elements that specify the timezone.

If by parsing the "value" element(s), at least a specific date has been found, then the "value" is overall valid, and the parser assembles the overall datetime value by concatenating the specific date, "T" and specific time (if time was specified, with 00 seconds implied if no seconds are provided), and specific timezone (if timezone and a specific time was specified).
* YYYY-MM-DD - no time specified
* YYYY-MM-DDTHH:MM:SS - time specified but no timezone. This is a floating time.
* YYYY-MM-DDTHH:MM:SS-XXYY or
* YYYY-MM-DDTHH:MM:SSZ or
* YYYY-MM-DDTHH:MM:SS+XXYY - both time and timezone were specified.

iCalendar converters in addition must do the following:
* remove any dash "-" separators in the date.
* remove any colon ":" separators in the time.
* perform datetime math on any +/- relative timezone value, and produce an effective UTC value ending with "Z".

Atom converters in addition must do the following:
* normalize all date and datetime values to RFC 3339.

=== derivation and tests ===
The handling of date and time values in the value class pattern was originally [[value-excerption-pattern-brainstorming#date_and_time_separation|brainstormed on the value-excerption-pattern-brainstorming]] page and derived from that analysis and feedback. For the curious, historical details may be found there, along with additional thoughts for extension.

See [[value-class-date-time-tests]] for test cases.

=== format specific optimizations ===
The following are format specific optimizations under strong consideration that make use of the value-class-pattern. Note: [[X2V]] has implemented this for hCalendar.

;short URL for this section
:http://tr.im/vcpfso

==== hCalendar dtend implied date ====
Typically events that start and end the same day only display the date of the event once (makes sense per the DRY [[principle]]) (real world examples: [http://upcoming.yahoo.com/event/3010807/ Upcoming], ... more examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hCalendar]] event "dtend" date from its "dtstart" date when only the time (and optionally timezone) was specified for its "dtend", e.g.:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

To simplify this further for authors, hCalendar processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "dtend" span:

<source lang=html4strict>

The party will be on

2009-06-26, from
19:00 to
22:00.

</source>

hCalendar to iCalendar converters should produce the following iCalendar fragment (as part of a valid .ics file) from either of the above two examples:

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

Note: [[X2V]] has implemented this.

Examples "in the wild":
* http://microformats.org/wiki/events/2009-08-12-nyc-workshop (real world example, but on this wiki).

==== hAtom updated implied date ====
Similarly, in blog posts that indicate both when they were "published" and "updated", the date is usually only displayed once, typically when "published" (real world examples with URLs would help for thoroughness).

Thus it would be convenient if we could imply an [[hAtom]] entry "updated" date from its "published" date when only the time (and optionally timezone) was specified for its "updated", e.g. for a blog post that was updated the same day:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

To simplify this further for authors, hAtom processors could treat the specifying of just the time per the value-class-pattern date and time value rules, and thus eliminate the need for the "value" span inside the "updated" span:

<source lang=html4strict>

short blog post example
was published on 
2009-08-01 at 12:06
and updated at 12:10.

</source>

==Parsing value from a <code>title</code> attribute==
The <code>value-title</code> class name allows the publisher to indicate the data value for a parent property is contained in the <code>title</code> attribute of an element, rather than the inner-text.

This can be used to provide a synonym within content, or used to quietly publish alternate forms of information for microformats parsing, without affecting the consumption of content.

For example, you can use casual localization with dates:

<source lang=html4strict>
It was

last year

that I realised my addiction to cashew nuts would cost this country so dear.

</source>

Parsing rules for <code>value-title</code> are the same as for <code>value</code> above, with the following change:

* Where a microformats property has a child element with class name of <code>value-title</code>, the content of the <code>title</code> attribute of that element must be parsed, rather than the portion of the element that would be parsed for a class name of <code>value</code>.

===Using <code>value-title</code> to publish machine-data===

The initial usage of <code>value-title</code> is used to publish alternate, parsable forms of property values in a visible context without the use of the <code>abbr</code> element whose semantics already support interpretation of the 'title' attribute as an expanded, more precise form of the content.

Experience has found that there are some cases in microformats where a number of publishers want to include a precisely accurate and parsable value for a property but do not want it to be visible in their page, even as a tooltip.

For example, full [[ISO8601]] datetimes may be confusing to readers of the page (as a tooltip or when read aloud by a screen reader), and enumerated values such as the <code>type</code> subproperty of hCard's <code>tel</code> property use US-English terms, which are not part of pages in any other language.

Since both of those scenarios have shown to be obstacles for a number of publishers, for these cases, and these alone, there exists a further extension of value-excerption. This extension allows the parsable form of the property to be published ‘silently’ immediately adjacent with the respective local visible content.

Here is an example, with the required use of a first child element with class name <code>value-title</code>:

<source lang=html4strict>


 
mobile

+44 7773 000 000

</source>

The <samp>cell</samp> value is parsed for the 'type' subproperty, but <samp>mobile</samp> is presented to the user.

In the case of dates:

<source lang=html4strict>

 
March 14th 2009, around half-past four

</source>

A microformats parser will read the ISO8601 format datetime <samp>2009-03-14T16:28-0600</samp>, but users will only see <samp>March 14th 2009, around half-past four</samp>. Testing has shown that the ISO8601 datetime above does not get exposed to any user at all.

===Parsing machine-data <code>value-title</code>===

Browsers collapse the <code>value-title</code> span down to a width of <code>0</code>, effectively providing no visual rendering, whilst keeping the element in the DOM. With no physical dimensions, there is no ‘hover’ state, so no tooltip is revealed. Furthermore, the empty element is not passed to assistive technology layers such as VoiceOver. Screen readers do not read the contents of the title attribute of an empty <code>span</code> element.

We conducted [[value-excerption-value-title-test|thorough testing]] of these parsing behaviors to ensure accessibility.

''Note: Whilst the <code>value-title</code> element is more gracefully written without whitespace inner-text (or as self-closing <code><foo /></code> element in XHTML), current tools such as WYSIWYG editors and HTML-Tidy will erroneously discard such elements, resulting in parsable data being thrown away by some tools. As such, <code> </code>, including a single whitespace character between the opening and closing tag, is the required pattern for authors, at this time.''

Parsing this final <code>value-title</code> extension imposes some stricter restrictions on usage. These restrictions exist to reduce the impact of <abbr title="Don't Repeat Yourself">DRY</abbr> violations, reduce the opportunity for sites to spoof data, and encourage best practice for maintaining both forms of data accurately.

Where an element with class <code>value-title</code> is to be parsed as data for a property, and that element also contains no non-whitespace content (hereafter referred to as ‘empty’), the following rules apply:

* The ‘empty’ value-title element must be the '''first, non-whitespace child''' of the property element. That is, it should follow immediately after the property is declared, before the human-readable form, and without any additional nesting.
* The ‘empty’ value-title element can only be used for specific properties. Microformat specifications must explicitly state which properties may be used with this extension of the value-class-pattern.
* Where an ‘empty’ value-title element is to be used as the single property value, it must be the ''only'' such <code>value</code> content. That is, the first instance of a conforming <code>value-title</code> element overrides all other <code>value</code> and <code>value-title</code> siblings and/or cousins.
* Tools written to perform Conformance Testing and/or Validation of microformats ''should'' attempt to compare the machine-data and human legible forms of the property data, and advise authors if the forms do not match.

=== limited use of value-title ===
Due to the fact that the value-title pattern hides some amount of data which tends to be a machine-specific duplicate of data that is provided in the human readable content, there are two microformats [[principles]] being compromised: '''visibility''' and '''<abbr title="Don't Repeat Yourself">DRY</abbr>'''. Thus the applicability of this pattern is deliberately restricted to properties that have demonstrated through experience a need for it, with no known better alternative.

In general authors should:

# First, try to directly specify microformats property values inline (the most visible, no duplication),
# Then consider using the value-class pattern
## Including multiple value elements for date and time properties
# and then only if those methods are insufficient, consider the value-title pattern.

This document post-dates other microformat specifications, such that they may not yet indicate which properties permit use of this pattern. In the interim, '''only''' the following types of properties should allow the value-title pattern.

* ISO8601 date, datetime, timezone, and duration values
* Enumerated values (such as the hCard tel/email/adr 'type' subproperties)
* Co-ordinates (such as the [[geo]] 'latitude' and 'longitude' properties)
* Telephone number properties (e.g. the hCard 'tel' property)

The [[machine-data]] page has documentation of some of the properties of some specs which experience has shown need a solution like the value-title pattern.

There are some simple reference examples and tests for this pattern on [[value-class-pattern-tests]].

In future use, ''specification authors'' may inherit use of <code>value-title</code> by use of ISO8601 date and time formats, or reuse of other microformats, but specifications should _avoid_ introducing new data structures that depend on or encourage this pattern. New specifications are themselves expected to adhere to the principals of visibile data and <abbr>DRY</abbr>.

== Test cases ==
See [[value-class-pattern-tests]].

== <abbr title='Frequently Asked Questions'>FAQ</abbr>==
This section is '''informative'''.

Frequently asked questions about the value-class-pattern. Once this section grows too big, we'll make a separate wiki page (like [[value-class-faq]]).

<div class='discussion'>
* '''Why use an 'empty' element? Why not embed data in the class attribute?'''
** The class attribute is inappropriate for embedded data values, as per the HTML4 specification, which states <code>class</code> is for ‘general purposing processing’, which is defined as ‘e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.’. ‘General purpose processing’ does not extend to data itself. Furthermore, this method avoids inventing a new string pattern for embedding data.
* '''Why use an 'empty' element? Why not make up a new attribute, like ‘data’?'''
** Microformats exist and function in ''valid'' HTML4 and XHTML1. Those are the current standards for web development, and microformats exist for use ''now''. In the future, perhaps revisions of HTML will offer up another solution. For now, this method has been tested against browsers, and creates a consistent document structure (where machine-form and human-form data are siblings).
* '''The <code>title</code> attribute should only be used for content!'''
** The <code>title</code> attribute ''is'' used for content and is read by microformats parsers. This exists for cases where data cannot be parsed with sufficient precision from just the commonly published, visible information. This pattern allows both forms of content to be included, whilst keeping it invisible to human consumers.
</div>

You can also refer to the general [[faq|Microformats FAQ]] and [[principles]].

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

The following sites and pages have started marking up content with the value-class-pattern, and are thus good places to go for examples with real world content to test with implementations (i.e. parsers). If you use the value-class-pattern in your content, feel free to add it to the '''top''' of this list. Once the list grows too big, we'll make a separate wiki page (like [[value-class-examples-in-wild]]).

* [http://georgebrock.com/ George Brocklehurst's activity stream] and [http://blog.georgebrock.com/ blog] use "value-title" for hAtom <code>published</code> property
* [http://ben-ward.co.uk/ Ben Ward's home page] uses:
** "value-title" for hCard <code>bday</code> property
** "value-title" for hAtom <code>updated</code> property
* [http://microformats.org/ microformats.org] uses:
** "value-title" for hAtom <code>updated</code> property in [[http://microformats.org/ microformats.org blog postss]]]
** date and time value separation for hCalendar <code>dtstart</code> property in [[events|microformats.org recent and upcoming events wiki page]]

''Add your site/page(s) that use the value-class-pattern here, along with a brief description of what value-class-pattern features you use, with which microformat(s) and which of its/their properties.''

== Implementations ==

This section is '''informative'''.

The following implementations have been developed which either generate or parse value-class-pattern property values. If you have an value-class-pattern 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 (like [[value-class-implementations]]).

* [[X2V]] v0.9.3 and later:
** implements [[#Date_and_time_values|Date and time values parsing]], including am/pm time values
** thus passes [[value-class-pattern-tests#Date_and_time_values|Date and time values test cases]].
** implements [[#hCalendar_dtend_implied_date|hCalendar implied dtend date]]
* [[Operator]] has *some* implementation of the value-class-pattern according to Michael Kaply, but precisely how much is implemented, for which properties (property types) and which microformats is not currently known.
* [[Optimus]] v0.8 and later implements <code>value-title</code> as [http://twitter.com/DmitryBaranovsk/status/1891253248 announced by Dmitry Baranovskiy].
* ... add your implementation(s) that parse or generate the value-class-pattern here, along with which features you support (hopefully all!) and note any limitations if any.

==Blog Posts==
Blog posts discussing the value class pattern, most recent first:
* [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]
* [http://ablognotlimited.com/s/106 Getting Semantic With Microformats, Part 8: Value Class Pattern]

==Related Pages==
This section is '''informative'''.

* [[value-class-pattern-tests]]
* [[value-excerption-pattern-issues]]
* [[hcard#Value_excerpting|hCard: Value Excepting]]
* [[value-excerption-pattern-brainstorming]]
* [[machine-data|Machine Data in Microformats]]

== References ==
This section is '''informative'''.
* [http://www.useit.com/alertbox/9608.html Jakob Nielsen: International Web Usability]

oomph-issues

2009-07-31T20:42:00Z

Karstenj:

<entry-title>Oomph issues</entry-title>

Issues with [[oomph]].

== issues ==
<div class="discussion">
* Apparent problems parsing [[hCards]] and [[hCalendar]] events on [http://en.wikipedia.org/wiki/Thomas_Edison Wikipedia: Edison] page (from report in email). [[User:Tantek|Tantek]] 21:59, 4 July 2009 (UTC) {corrected page name [[User:Bsd|Bsd]] 20:39, 7 July 2009 (UTC)}
** This page has changed as the nested (contained) hCards and hCalendar events were disabled on the Wikipedia template on 5 July. The main issue was that "org" values from the [[hcard-parsing#nested_hCards|nested hCards]] (invalid due to no "n" values) ignored the boundary and were passed to "org" on the root hCard. A second issue that still exists on this page is that it crashes the MIX hcard-to-vcard service; may be because values for "n" cannot be extracted from the three-name "fn" value ("Thomas Alva Edison") that is provided. [[User:Bsd|Bsd]] 21:09, 7 July 2009 (UTC)

</div>

Other issues with Oomph are logged at [http://oomph.codeplex.com/Thread/List.aspx Codeplex]
== see also ==
* [[oomph]]
* [[hCard]]
* [[hCalendar]]