Microformats Wiki - User contributions [en]

include-pattern-feedback

2006-11-19T20:10:40Z

SanchoTheFat:

= Include Pattern Feedback =

Feedback about [[include-pattern]].

== Objects and Browser Behavior ==

Over at Yahoo! Local, we were using the object include pattern for all our hReviews on business detail pages and review listings. That is, until we realized that Safari and Internet Explorer both try to embed the entire page with every OBJECT call. (Firefox correctly recognizes that it's a local object and doesn't reload anything.)

On a page with 20+ reviews, this means a substantial increase in load time and memory consumption. As a result of this (bad) browser behavior, we removed the objects entirely.

Any suggestions for workarounds or modifications to the pattern?

-- AndyBaio 29 Jun 2006

Can you use the hyperlink option with DHMTL/Ajax to perform replacements in advanced browsers? (Simon Willison's <code>[http://simon.incutio.com/archive/2003/03/25/getElementsBySelector getElementsBySelector()]</code> may be helpful)
<a href="#id" class="include" title=""></a>
with something like:
//Works only for linked include-pattern definition at microformats.org
//Requires Simon Willison's getElementsBySelector()
// and normal IE workaround for addEventListener()
addEventListener( window, 'load', function() {
var myIncludes = document.getElementsBySelector( 'a[href].include' ), a, e;
for( var i=0; a=myIncludes[i]; i++ ) if (a.href.charAt(0)=='#') {
e = document.getElementsBySelector( a.href )[0].cloneNode( true );
a.parentNode.replaceChild( e, a );
}
})
--[[User:RichHall|RichHall]] 00:51, 23 Oct 2006 (PDT)

My hResume page [http://robert.o-rourke.org seen here] caused Safari <ins>2.0</ins> some major issues. The page was jumping between object elements when a link was hovered eventually causing the browser to crash. You can follow the thread on the [http://www.mail-archive.com/listdad%40webstandardsgroup.org/msg06078.html WSG mail archive].

It seems that while the object element may be more semantically appropriate it <del>is not</del> <ins>may not be</ins> usable in lieu of the issues raised in Safari.

--[[User:SanchoTheFat|Robert O'Rourke]] 12:08, 3 Nov 2006 (PST)

Which version of Safari? Please be specific as many Safari OBJECT bugs were fixed in Safari 2.x.

-- [[User:Tantek|Tantek]] 13:39, 3 Nov 2006 (PST)

== Hyperlink Include - Screen Reader Testing ==

Some [http://microformats.org/discuss/mail/microformats-discuss/2006-July/004693.html concerns have been raised] over the implications using empty hyperlinks may have on assistive devices such as screen readers. One concern is that an empty link may be read out, partially read out or result in some other confusing scenario for the user.

In response, a [http://allinthehead.com/demo/include.html test page] consisting of a number of empty hyperlinks in the style suggested by the pattern has been created. A 'good' result is that none of the links be read out.

=== Test Results: JAWS 7.0 with Firefox 1.5/Win ===

Tested by [[User:Phae|Frances Berriman]] 2006-07-21.

* 31 dash include dash Mozilla Firefox
* Page has no links
* 31 dash include

Conclusion: the hyperlink include pattern presented no usability issues for this screen reader.

=== Proprietary attribute ===
HTML tidy on the [http://allinthehead.com/demo/include.html test page] gives:
:Warning: <a> proprietary attribute "data"

The [http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fallinthehead.com%2Fdemo%2Finclude.html W3C validator is similarly unimpressed].

[[User:AndyMabbett|AndyMabbett]] 14:22, 22 Oct 2006 (PDT)

==== Use href ====
To clarify, links on the [http://allinthehead.com/demo/include.html test page] should be changed to use the <code>href</code> attribute as described at [[include-pattern]] (without <code>href</code> attributes, the elements probably won't register as hyperlinks, but anchors). Set <code>title=""</code> to fix empty link behavior for many assistive devices. --[[User:RichHall|RichHall]] 23:31, 22 Oct 2006 (PDT)

==== Test page corrected ====
2006-10-25: This error has been corrected on the [http://allinthehead.com/demo/include.html test page]. Any tests should probably be re-run in light of this.

== Unclear status ==

It's not clear, either from the main Wiki page or [[include-pattern]], whether this is an agreed standard, a draft, or just a proposal. [[User:AndyMabbett|AndyMabbett]] 03:14, 18 Oct 2006 (PDT)

* [[include-pattern]] is not its own proposal, draft, or spec. It is a design pattern, as listed on the [[Main_Page|wiki home page]] that is included in other proposals, drafts. and specs. ''Recommend for adding to the [[include-pattern-faq]].
**And that is not clear, either from the main Wiki page or [[include-pattern]]. [[User:AndyMabbett|AndyMabbett]] 16:40, 18 Oct 2006 (PDT)
***ACCEPTED. Will further clarify relationship between patterns and formats. [[User:Tantek|Tantek]] 16:48, 18 Oct 2006 (PDT)

include-pattern-feedback

2006-11-19T20:08:59Z

SanchoTheFat:

= Include Pattern Feedback =

Feedback about [[include-pattern]].

== Objects and Browser Behavior ==

Over at Yahoo! Local, we were using the object include pattern for all our hReviews on business detail pages and review listings. That is, until we realized that Safari and Internet Explorer both try to embed the entire page with every OBJECT call. (Firefox correctly recognizes that it's a local object and doesn't reload anything.)

On a page with 20+ reviews, this means a substantial increase in load time and memory consumption. As a result of this (bad) browser behavior, we removed the objects entirely.

Any suggestions for workarounds or modifications to the pattern?

-- AndyBaio 29 Jun 2006

Can you use the hyperlink option with DHMTL/Ajax to perform replacements in advanced browsers? (Simon Willison's <code>[http://simon.incutio.com/archive/2003/03/25/getElementsBySelector getElementsBySelector()]</code> may be helpful)
<a href="#id" class="include" title=""></a>
with something like:
//Works only for linked include-pattern definition at microformats.org
//Requires Simon Willison's getElementsBySelector()
// and normal IE workaround for addEventListener()
addEventListener( window, 'load', function() {
var myIncludes = document.getElementsBySelector( 'a[href].include' ), a, e;
for( var i=0; a=myIncludes[i]; i++ ) if (a.href.charAt(0)=='#') {
e = document.getElementsBySelector( a.href )[0].cloneNode( true );
a.parentNode.replaceChild( e, a );
}
})
--[[User:RichHall|RichHall]] 00:51, 23 Oct 2006 (PDT)

My hResume page [http://robert.o-rourke.org seen here] caused Safari <ins>2.0</ins> some major issues. The page was jumping between object elements when a link was hovered eventually causing the browser to crash. You can follow the thread on the [http://webstandardsgroup.org WSG mail archive].

It seems that while the object element may be more semantically appropriate it <del>is not</del> <ins>may not be</ins> usable in lieu of the issues raised in Safari.

--[[User:SanchoTheFat|Robert O'Rourke]] 12:08, 3 Nov 2006 (PST)

Which version of Safari? Please be specific as many Safari OBJECT bugs were fixed in Safari 2.x.

-- [[User:Tantek|Tantek]] 13:39, 3 Nov 2006 (PST)

== Hyperlink Include - Screen Reader Testing ==

Some [http://microformats.org/discuss/mail/microformats-discuss/2006-July/004693.html concerns have been raised] over the implications using empty hyperlinks may have on assistive devices such as screen readers. One concern is that an empty link may be read out, partially read out or result in some other confusing scenario for the user.

In response, a [http://allinthehead.com/demo/include.html test page] consisting of a number of empty hyperlinks in the style suggested by the pattern has been created. A 'good' result is that none of the links be read out.

=== Test Results: JAWS 7.0 with Firefox 1.5/Win ===

Tested by [[User:Phae|Frances Berriman]] 2006-07-21.

* 31 dash include dash Mozilla Firefox
* Page has no links
* 31 dash include

Conclusion: the hyperlink include pattern presented no usability issues for this screen reader.

=== Proprietary attribute ===
HTML tidy on the [http://allinthehead.com/demo/include.html test page] gives:
:Warning: <a> proprietary attribute "data"

The [http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fallinthehead.com%2Fdemo%2Finclude.html W3C validator is similarly unimpressed].

[[User:AndyMabbett|AndyMabbett]] 14:22, 22 Oct 2006 (PDT)

==== Use href ====
To clarify, links on the [http://allinthehead.com/demo/include.html test page] should be changed to use the <code>href</code> attribute as described at [[include-pattern]] (without <code>href</code> attributes, the elements probably won't register as hyperlinks, but anchors). Set <code>title=""</code> to fix empty link behavior for many assistive devices. --[[User:RichHall|RichHall]] 23:31, 22 Oct 2006 (PDT)

==== Test page corrected ====
2006-10-25: This error has been corrected on the [http://allinthehead.com/demo/include.html test page]. Any tests should probably be re-run in light of this.

== Unclear status ==

It's not clear, either from the main Wiki page or [[include-pattern]], whether this is an agreed standard, a draft, or just a proposal. [[User:AndyMabbett|AndyMabbett]] 03:14, 18 Oct 2006 (PDT)

* [[include-pattern]] is not its own proposal, draft, or spec. It is a design pattern, as listed on the [[Main_Page|wiki home page]] that is included in other proposals, drafts. and specs. ''Recommend for adding to the [[include-pattern-faq]].
**And that is not clear, either from the main Wiki page or [[include-pattern]]. [[User:AndyMabbett|AndyMabbett]] 16:40, 18 Oct 2006 (PDT)
***ACCEPTED. Will further clarify relationship between patterns and formats. [[User:Tantek|Tantek]] 16:48, 18 Oct 2006 (PDT)

hresume

2006-11-10T13:49:58Z

SanchoTheFat:

<h1> hResume </h1>

hResume is a microformat for publishing resumes and CVs. hResume is one of several open microformat standards suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML.

Want to get started with writing an hResume? Use the [http://hresume.weblogswork.com/hresumecreator/ hResume Creator] to create your hResume and publish it, or follow the hResume authoring tips to add hResume markup to your web page or blog.

<h2> Microformats Draft Specification </h2>

; Editor/Author: [http://theryanking.com Ryan King]
; Acknowledgments: See [http://microformats.org/wiki/hresume#Acknowledgements acknowledgments].

Microformats [http://microformats.org/wiki/hresume#Copyright copyright] and [http://microformats.org/wiki/hresume#Patents patents] statements apply.

__TOC__

== Status ==
Draft, version 0.1.

== Introduction ==
=== Semantic XHTML Design Principles ===
{{SemanticXHTMLDesignPrinciples}}

== Format ==
=== In General ===
The hResume format is based on a set of fields common to numerous resumes published today on the web. Where possible field names have been chosen and reused from preexisting microformats.

=== Schema ===
The hResume schema consists of the following:

* hResume
** summary. optional. text.
** contact info. required. '''Must''' use [[hcard|hCard]]. '''Should''' use <code class="element"><address></code> + [[hcard|hCard]].
** experience. optional. One or more [[hcalendar]] events with the class name '<code class="class-name">experience</code>', with an embedded [[hcard|hCard]] indicating the job title, name of company, address of company etc.
** education. optional One or more [[hcalendar]] events with the class name '<code class="class-name">education</code>', with an embedded [[hcard|hCard]] indicating the name of school, address of school etc.
** skills. optional. phrases or keywords using the [[rel-tag]] microformat with the class name '<code class="class-name">skill</code>'.
** affiliations. optional. the class name <code class="class-name">affiliation</code> along with an [[hcard]] of the organization
** publications. optional. One or more citations. Use cite tag.

=== Field details ===
The fields of the hResume schema represent the following:

* '''<code class="class-name">hresume</code>''':: root class name
* '''<code class="class-name">summary</code>''':: The class name <code class="class-name">summary</code> is used to mark up an overview of qualifications and objectives.
* '''contact''':: Current contact info in an [[hCard]]. '''Should''' use <code class="element"><address></code> with [[hCard]] when possible.
* '''<code class="class-name">education</code>''':: the class name '<code class="class-name">education</code>' is applied to an [[hcalendar]] event.
* '''<code class="class-name">experience</code>''':: the class name '<code class="class-name">experience</code>' is applied to an [[hcalendar]] event. Job titles/positions should use an [[hCard]].
* '''<code class="class-name">skill</code>''':: An hResume may be tagged using the [[rel-tag]] microformat and the '<code class="class-name">skill</code>' class name.
* '''<code class="class-name">affiliation</code>''':: The class name <code="class-name">affiliation</code> is used along with an [[hcard]] of the organization
* '''<code class="class-name">publications</code>''':: just use <code class="element"><cite></code>. When there is a [[citation]] microformat, then that can be used in combination with the cite element to further markup the components of the citation.

=== XMDP Profile ===
* [[hresume-profile]] (@TODO)

=== Notes ===
This section is informative.

*...

== Examples ==
=== Summary ===
An example summary:

<pre><nowiki>

I have 10 years experience with all Web 2.0 technologies– I've been working with Ajax since 1996,
designing with pastels while others will still using tiled background images and frames...

</nowiki></pre>

=== Contact ===
<pre><nowiki>
<address class="vcard">
Pedro Sanchez

123 Fake St.
Preston, Idaho 83263

Email: <a class="email" href="mailto:joe@example.com">pedro@vote-for-pedro.com</a>
Homepage: <a class="url" href="http://vote-for-pedro.com/">vote-for-pedro.com</a>
Phone: +01.208.555.4567
</address>
</nowiki></pre>

=== Education ===
<pre><nowiki>
<ol class="vcalendar">
<li class="education vevent">
<a class="url summary" href="http://example.edu/">Preston High School</a>
(<abbr class="dtstart" title="2001-01-24">2001</abbr> - <abbr class="dtend" title="2005-05-25">2005</abbr>)
</li>
...
</nowiki></pre>

=== Experience ===
==== Basic ====
A basic experience event:

<pre><nowiki>
<ol class="vcalendar">
<li class="experience vevent">
President,
Preston High School,
<abbr class="dtstart" title="2004-09-01">May 2004</abbr> - <abbr title="2005-05-25">present</abbr>
</li>
...
</nowiki></pre>

==== Job Titles ====
To express one or more job titles/positions in the same experience event you should use [[hCard]]s. [[hcard]] requires the <code class="class-name">fn</code> ("formatted name") field, but it isn't reasonable to repeat your name for every job title you mark up in [[hResume|hresume]]. So, you may use an <code class="element"><object></code> and the class name '<code class="class-name">include</code>' with a reference to the <code class="class-name">fn</code> somewhere else on the page.

For example, this [[hCard]] refers to another [[hCard]]

<pre>

<object data="#j" class="include"></object>
Preston High School
Class President

</pre>

Where "<code class="attr-value">j</code>" is the id attribute value of the "<code class="mf-prop">fn n</code>" element of the contact [[hCard]] at the top of the page, e.g. (shown here as a verbose [[hCard]] for purposes of illustration that the reference may be to a subtree, not just a text node):

<pre><nowiki>
<address class="vcard">

Pedro
Sanchez

</address>
</nowiki></pre>

This method of hCard property indirection via an object element [[include-pattern|has been generalized]] to apply to any/all string/text properties in hCard.
Note: the object data attribute MUST be a local ID reference. External references (which would require a consuming application to load an external resource) are currently not supported by this method.

=== Skills ===
Some sample skills tags:
<pre><nowiki>
I have skills in <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/Bow_%28weapon%29">bow hunting</a>
and <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/Nunchucks">nunchucks</a>.
</nowiki></pre>

=== Affiliations ===
<pre><nowiki>
National Honor Society
</nowiki></pre>

=== Publications ===
<pre><nowiki>
<cite>Breeding Ligers for Fun and Magic</cite>, Idaho Press, 2004.
</nowiki></pre>

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

The following sites have published hResumes, and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If you have an hResume on your own page, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [[User:SanchTheFat|Robert O'Rourke]] has marked up his [http://robert.o-rourke.org/ CV] with hResume.
* [[User:Keri Henare|Keri Henare]] has marked up [http://www.kerihenare.com/cv/ his Curriculum Vitae] using hResume.
* [[User:Kwilson|Kenn Wilson]] has marked up [http://www.3color.org/~kwilson/resume/kenneth-wilson.html his resume] using hResume, following [[User:Ralph Brandi|Ralph Brandi]]'s method of using object.include.
* [[User:Ralph Brandi|Ralph Brandi]] has [http://www.brandi.org/ralph/resume/ marked up his resume] with hResume, additionally using the object.include method to associate one description with three hCalendar experiences.
* [[User:Pat Ramsey|Pat Ramsey]] has his [http://www.southwestern.edu/~ramseyp/ramsey_resume2006.html resume] marked up as an hResume.
* [[User:Wim Le Page|Wim Le Page]] has also marked up [http://adrem.ua.ac.be/~wlepage/curriculum-vitae/ his curriculum vitae] as an hResume.
* [[user:Jonathan Arkell|Jonathan Arkell]] has posted an [http://portfolio.jonnay.net/cv/ hResume] on his portfolio website.
* [http://steve.ganz.name/hresume/ Steve Ganz - hResume 0.1]
* [[User:Dave Cardwell|Dave Cardwell]] has marked up [http://davecardwell.co.uk/cv/ his curriculum vitae] as an hResume.
* [[User:EdwardOConnor|Edward O'Connor]]'s [http://edward.oconnor.cx/resume/ resume] is in hResume, and has some experimental JavaScript in it to extract a skill summary from the resume.
* [[User:Lindsey Simon|Lindsey Simon]] has his [http://www.commoner.com/~lsimon/lindsey_simon_resume.html resume] marked up as an hResume - with lots of thanks to Pat Ramsey.
* [[User:Ben Ward|Ben Ward]] has published [http://ben-ward.co.uk/cv his CV] with hResume.
* [http://www.kelleychambers.com Kelley Chambers] has published her [http://www.kelleychambers.com/resume resume] via [http://www.ssdesigninteractive.com/ssdesign/?p=96 Sajid Saiyed's Microformat hResume Plugin for Wordpress].
* [[User:Fishy5|Brennan Falkner]] used hResume to markup his [http://my.usf.edu/bbcswebdav/users/bfalker/resume.html resume].
* [http://www.zachary.com/creemer/resume.html David Creemer's resume] uses hResume, with thanks to Pat Ramsey for the CSS.

=== Examples with problems ===
* [[user:Izo|Mathieu Drouet]] has posted an [http://izo.aucuneid.com/hresume.html hResume].
** ''Incorrect root class name hResume? -- [[DavidJanes]]''

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

The following implementations have been developed which either generate or parse hResumes. If you have an hResume 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.

* The [http://spurinc.com Spur] team has created an hResume WordPress plugin located at [http://hresume.weblogswork.com/?page_id=3 hResume Plugin]. See an example of the hResume markup [http://hresume.weblogswork.com/?page_id=6 here]. Neat feature of the hResume plugin is that it automatically creates a new page for the resume - no cutting and pasting...

* The [http://www.ssdesigninteractive.com/ssdesign Sajid Saiyed] has created an hResume WordPress plugin located at [http://www.ssdesigninteractive.com/ssdesign/?p=96 Microformat Resume Plugin]. See an example of the hResume markup [http://www.ssdesigninteractive.com/ssdesign/?page_id=95 here].

* Spur also created a standalone hResume Creator located at [http://hresume.weblogswork.com/hresumecreator/ hResume Creator]. The creator will generate hResume markup ready to cut and paste into your webpage.

== Copyright ==
{{MicroFormatCopyrightStatement2006}}

== Patents ==
{{MicroFormatPatentStatement}}

== References ==
=== Normative References ===
* [[hcard|hCard]]
* [[hcalendar|hCalendar]]
* [[include-pattern|include pattern]]
* [http://www.w3.org/TR/REC-html40/ HTML 4]
* [http://www.w3.org/TR/xhtml1/ XHTML]
* [http://gmpg.org/xmdp/ XMDP]
* [[rel-tag| Rel-Tag]]
* @TODO

=== Informative References ===
@TODO

== Acknowledgements ==
=== Concept ===
* [http://theryanking.com/ Ryan King], [http://technorati.com Technorati]
* [http://tantek.com/ Tantek Çelik], [http://technorati.com Technorati]
* James Levine [http://simplyhired.com Simply Hired]
* [http://epeus.blogspot.com/ Kevin Marks], [http://technorati.com Technorati]

== Related Pages ==
* [[resume-examples]]
* [[resume-formats]]
* [[resume-brainstorming]]
* Feedback is encouraged on the [[hresume-feedback]] page.
* If you have any questions about hResume, check the [[hresume-faq|hResume FAQ]], and if you don't find answers, add your questions to the end!
* Please add any issues with the specification to the separate [[hresume-issues|hResume issues]] document.

== Further Reading ==
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].

hresume

2006-11-10T13:48:54Z

SanchoTheFat:

<h1> hResume </h1>

hResume is a microformat for publishing resumes and CVs. hResume is one of several open microformat standards suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML.

Want to get started with writing an hResume? Use the [http://hresume.weblogswork.com/hresumecreator/ hResume Creator] to create your hResume and publish it, or follow the hResume authoring tips to add hResume markup to your web page or blog.

<h2> Microformats Draft Specification </h2>

; Editor/Author: [http://theryanking.com Ryan King]
; Acknowledgments: See [http://microformats.org/wiki/hresume#Acknowledgements acknowledgments].

Microformats [http://microformats.org/wiki/hresume#Copyright copyright] and [http://microformats.org/wiki/hresume#Patents patents] statements apply.

__TOC__

== Status ==
Draft, version 0.1.

== Introduction ==
=== Semantic XHTML Design Principles ===
{{SemanticXHTMLDesignPrinciples}}

== Format ==
=== In General ===
The hResume format is based on a set of fields common to numerous resumes published today on the web. Where possible field names have been chosen and reused from preexisting microformats.

=== Schema ===
The hResume schema consists of the following:

* hResume
** summary. optional. text.
** contact info. required. '''Must''' use [[hcard|hCard]]. '''Should''' use <code class="element"><address></code> + [[hcard|hCard]].
** experience. optional. One or more [[hcalendar]] events with the class name '<code class="class-name">experience</code>', with an embedded [[hcard|hCard]] indicating the job title, name of company, address of company etc.
** education. optional One or more [[hcalendar]] events with the class name '<code class="class-name">education</code>', with an embedded [[hcard|hCard]] indicating the name of school, address of school etc.
** skills. optional. phrases or keywords using the [[rel-tag]] microformat with the class name '<code class="class-name">skill</code>'.
** affiliations. optional. the class name <code class="class-name">affiliation</code> along with an [[hcard]] of the organization
** publications. optional. One or more citations. Use cite tag.

=== Field details ===
The fields of the hResume schema represent the following:

* '''<code class="class-name">hresume</code>''':: root class name
* '''<code class="class-name">summary</code>''':: The class name <code class="class-name">summary</code> is used to mark up an overview of qualifications and objectives.
* '''contact''':: Current contact info in an [[hCard]]. '''Should''' use <code class="element"><address></code> with [[hCard]] when possible.
* '''<code class="class-name">education</code>''':: the class name '<code class="class-name">education</code>' is applied to an [[hcalendar]] event.
* '''<code class="class-name">experience</code>''':: the class name '<code class="class-name">experience</code>' is applied to an [[hcalendar]] event. Job titles/positions should use an [[hCard]].
* '''<code class="class-name">skill</code>''':: An hResume may be tagged using the [[rel-tag]] microformat and the '<code class="class-name">skill</code>' class name.
* '''<code class="class-name">affiliation</code>''':: The class name <code="class-name">affiliation</code> is used along with an [[hcard]] of the organization
* '''<code class="class-name">publications</code>''':: just use <code class="element"><cite></code>. When there is a [[citation]] microformat, then that can be used in combination with the cite element to further markup the components of the citation.

=== XMDP Profile ===
* [[hresume-profile]] (@TODO)

=== Notes ===
This section is informative.

*...

== Examples ==
=== Summary ===
An example summary:

<pre><nowiki>

I have 10 years experience with all Web 2.0 technologies– I've been working with Ajax since 1996,
designing with pastels while others will still using tiled background images and frames...

</nowiki></pre>

=== Contact ===
<pre><nowiki>
<address class="vcard">
Pedro Sanchez

123 Fake St.
Preston, Idaho 83263

Email: <a class="email" href="mailto:joe@example.com">pedro@vote-for-pedro.com</a>
Homepage: <a class="url" href="http://vote-for-pedro.com/">vote-for-pedro.com</a>
Phone: +01.208.555.4567
</address>
</nowiki></pre>

=== Education ===
<pre><nowiki>
<ol class="vcalendar">
<li class="education vevent">
<a class="url summary" href="http://example.edu/">Preston High School</a>
(<abbr class="dtstart" title="2001-01-24">2001</abbr> - <abbr class="dtend" title="2005-05-25">2005</abbr>)
</li>
...
</nowiki></pre>

=== Experience ===
==== Basic ====
A basic experience event:

<pre><nowiki>
<ol class="vcalendar">
<li class="experience vevent">
President,
Preston High School,
<abbr class="dtstart" title="2004-09-01">May 2004</abbr> - <abbr title="2005-05-25">present</abbr>
</li>
...
</nowiki></pre>

==== Job Titles ====
To express one or more job titles/positions in the same experience event you should use [[hCard]]s. [[hcard]] requires the <code class="class-name">fn</code> ("formatted name") field, but it isn't reasonable to repeat your name for every job title you mark up in [[hResume|hresume]]. So, you may use an <code class="element"><object></code> and the class name '<code class="class-name">include</code>' with a reference to the <code class="class-name">fn</code> somewhere else on the page.

For example, this [[hCard]] refers to another [[hCard]]

<pre>

<object data="#j" class="include"></object>
Preston High School
Class President

</pre>

Where "<code class="attr-value">j</code>" is the id attribute value of the "<code class="mf-prop">fn n</code>" element of the contact [[hCard]] at the top of the page, e.g. (shown here as a verbose [[hCard]] for purposes of illustration that the reference may be to a subtree, not just a text node):

<pre><nowiki>
<address class="vcard">

Pedro
Sanchez

</address>
</nowiki></pre>

This method of hCard property indirection via an object element [[include-pattern|has been generalized]] to apply to any/all string/text properties in hCard.
Note: the object data attribute MUST be a local ID reference. External references (which would require a consuming application to load an external resource) are currently not supported by this method.

=== Skills ===
Some sample skills tags:
<pre><nowiki>
I have skills in <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/Bow_%28weapon%29">bow hunting</a>
and <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/Nunchucks">nunchucks</a>.
</nowiki></pre>

=== Affiliations ===
<pre><nowiki>
National Honor Society
</nowiki></pre>

=== Publications ===
<pre><nowiki>
<cite>Breeding Ligers for Fun and Magic</cite>, Idaho Press, 2004.
</nowiki></pre>

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

The following sites have published hResumes, and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If you have an hResume on your own page, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [[User:SanchTheFat|Robert O'Rourke]] has marked up his [http://robert.o-rourke.org/ <acronym title="Curriculum Vitae">CV</acronym> with hResume.
* [[User:Keri Henare|Keri Henare]] has marked up [http://www.kerihenare.com/cv/ his Curriculum Vitae] using hResume.
* [[User:Kwilson|Kenn Wilson]] has marked up [http://www.3color.org/~kwilson/resume/kenneth-wilson.html his resume] using hResume, following [[User:Ralph Brandi|Ralph Brandi]]'s method of using object.include.
* [[User:Ralph Brandi|Ralph Brandi]] has [http://www.brandi.org/ralph/resume/ marked up his resume] with hResume, additionally using the object.include method to associate one description with three hCalendar experiences.
* [[User:Pat Ramsey|Pat Ramsey]] has his [http://www.southwestern.edu/~ramseyp/ramsey_resume2006.html resume] marked up as an hResume.
* [[User:Wim Le Page|Wim Le Page]] has also marked up [http://adrem.ua.ac.be/~wlepage/curriculum-vitae/ his curriculum vitae] as an hResume.
* [[user:Jonathan Arkell|Jonathan Arkell]] has posted an [http://portfolio.jonnay.net/cv/ hResume] on his portfolio website.
* [http://steve.ganz.name/hresume/ Steve Ganz - hResume 0.1]
* [[User:Dave Cardwell|Dave Cardwell]] has marked up [http://davecardwell.co.uk/cv/ his curriculum vitae] as an hResume.
* [[User:EdwardOConnor|Edward O'Connor]]'s [http://edward.oconnor.cx/resume/ resume] is in hResume, and has some experimental JavaScript in it to extract a skill summary from the resume.
* [[User:Lindsey Simon|Lindsey Simon]] has his [http://www.commoner.com/~lsimon/lindsey_simon_resume.html resume] marked up as an hResume - with lots of thanks to Pat Ramsey.
* [[User:Ben Ward|Ben Ward]] has published [http://ben-ward.co.uk/cv his CV] with hResume.
* [http://www.kelleychambers.com Kelley Chambers] has published her [http://www.kelleychambers.com/resume resume] via [http://www.ssdesigninteractive.com/ssdesign/?p=96 Sajid Saiyed's Microformat hResume Plugin for Wordpress].
* [[User:Fishy5|Brennan Falkner]] used hResume to markup his [http://my.usf.edu/bbcswebdav/users/bfalker/resume.html resume].
* [http://www.zachary.com/creemer/resume.html David Creemer's resume] uses hResume, with thanks to Pat Ramsey for the CSS.

=== Examples with problems ===
* [[user:Izo|Mathieu Drouet]] has posted an [http://izo.aucuneid.com/hresume.html hResume].
** ''Incorrect root class name hResume? -- [[DavidJanes]]''

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

The following implementations have been developed which either generate or parse hResumes. If you have an hResume 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.

* The [http://spurinc.com Spur] team has created an hResume WordPress plugin located at [http://hresume.weblogswork.com/?page_id=3 hResume Plugin]. See an example of the hResume markup [http://hresume.weblogswork.com/?page_id=6 here]. Neat feature of the hResume plugin is that it automatically creates a new page for the resume - no cutting and pasting...

* The [http://www.ssdesigninteractive.com/ssdesign Sajid Saiyed] has created an hResume WordPress plugin located at [http://www.ssdesigninteractive.com/ssdesign/?p=96 Microformat Resume Plugin]. See an example of the hResume markup [http://www.ssdesigninteractive.com/ssdesign/?page_id=95 here].

* Spur also created a standalone hResume Creator located at [http://hresume.weblogswork.com/hresumecreator/ hResume Creator]. The creator will generate hResume markup ready to cut and paste into your webpage.

== Copyright ==
{{MicroFormatCopyrightStatement2006}}

== Patents ==
{{MicroFormatPatentStatement}}

== References ==
=== Normative References ===
* [[hcard|hCard]]
* [[hcalendar|hCalendar]]
* [[include-pattern|include pattern]]
* [http://www.w3.org/TR/REC-html40/ HTML 4]
* [http://www.w3.org/TR/xhtml1/ XHTML]
* [http://gmpg.org/xmdp/ XMDP]
* [[rel-tag| Rel-Tag]]
* @TODO

=== Informative References ===
@TODO

== Acknowledgements ==
=== Concept ===
* [http://theryanking.com/ Ryan King], [http://technorati.com Technorati]
* [http://tantek.com/ Tantek Çelik], [http://technorati.com Technorati]
* James Levine [http://simplyhired.com Simply Hired]
* [http://epeus.blogspot.com/ Kevin Marks], [http://technorati.com Technorati]

== Related Pages ==
* [[resume-examples]]
* [[resume-formats]]
* [[resume-brainstorming]]
* Feedback is encouraged on the [[hresume-feedback]] page.
* If you have any questions about hResume, check the [[hresume-faq|hResume FAQ]], and if you don't find answers, add your questions to the end!
* Please add any issues with the specification to the separate [[hresume-issues|hResume issues]] document.

== Further Reading ==
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].

include-pattern-feedback

2006-11-03T20:08:18Z

SanchoTheFat:

= Include Pattern Feedback =

Feedback about [[include-pattern]].

== Objects and Browser Behavior ==

Over at Yahoo! Local, we were using the object include pattern for all our hReviews on business detail pages and review listings. That is, until we realized that Safari and Internet Explorer both try to embed the entire page with every OBJECT call. (Firefox correctly recognizes that it's a local object and doesn't reload anything.)

On a page with 20+ reviews, this means a substantial increase in load time and memory consumption. As a result of this (bad) browser behavior, we removed the objects entirely.

Any suggestions for workarounds or modifications to the pattern?

-- AndyBaio 29 Jun 2006

Can you use the hyperlink option with DHMTL/Ajax to perform replacements in advanced browsers? (Simon Willison's <code>[http://simon.incutio.com/archive/2003/03/25/getElementsBySelector getElementsBySelector()]</code> may be helpful)
<a href="#id" class="include" title=""></a>
with something like:
//Works only for linked include-pattern definition at microformats.org
//Requires Simon Willison's getElementsBySelector()
// and normal IE workaround for addEventListener()
addEventListener( window, 'load', function() {
var myIncludes = document.getElementsBySelector( 'a[href].include' ), a, e;
for( var i=0; a=myIncludes[i]; i++ ) if (a.href.charAt(0)=='#') {
e = document.getElementsBySelector( a.href )[0].cloneNode( true );
a.parentNode.replaceChild( e, a );
}
})
--[[User:RichHall|RichHall]] 00:51, 23 Oct 2006 (PDT)

My hResume page [http://robert.o-rourke.org seen here] caused Safari some major issues. The page was jumping between object elements when a link was hovered eventually causing the browser to crash. It seems that while the object element may be more semantically appropriate it is not usable in lieu of the issues raised in Safari.

--[[User:SanchoTheFat|Robert O'Rourke]] 12:08, 3 Nov 2006 (PST)

== Hyperlink Include - Screen Reader Testing ==

Some [http://microformats.org/discuss/mail/microformats-discuss/2006-July/004693.html concerns have been raised] over the implications using empty hyperlinks may have on assistive devices such as screen readers. One concern is that an empty link may be read out, partially read out or result in some other confusing scenario for the user.

In response, a [http://allinthehead.com/demo/include.html test page] consisting of a number of empty hyperlinks in the style suggested by the pattern has been created. A 'good' result is that none of the links be read out.

=== Test Results: JAWS 7.0 with Firefox 1.5/Win ===

Tested by [[User:Phae|Frances Berriman]] 2006-07-21.

* 31 dash include dash Mozilla Firefox
* Page has no links
* 31 dash include

Conclusion: the hyperlink include pattern presented no usability issues for this screen reader.

=== Proprietary attribute ===
HTML tidy on the [http://allinthehead.com/demo/include.html test page] gives:
:Warning: <a> proprietary attribute "data"

The [http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fallinthehead.com%2Fdemo%2Finclude.html W3C validator is similarly unimpressed].

[[User:AndyMabbett|AndyMabbett]] 14:22, 22 Oct 2006 (PDT)

==== Use href ====
To clarify, links on the [http://allinthehead.com/demo/include.html test page] should be changed to use the <code>href</code> attribute as described at [[include-pattern]] (without <code>href</code> attributes, the elements probably won't register as hyperlinks, but anchors). Set <code>title=""</code> to fix empty link behavior for many assistive devices. --[[User:RichHall|RichHall]] 23:31, 22 Oct 2006 (PDT)

==== Test page corrected ====
2006-10-25: This error has been corrected on the [http://allinthehead.com/demo/include.html test page]. Any tests should probably be re-run in light of this.

== Unclear status ==

It's not clear, either from the main Wiki page or [[include-pattern]], whether this is an agreed standard, a draft, or just a proposal. [[User:AndyMabbett|AndyMabbett]] 03:14, 18 Oct 2006 (PDT)

* [[include-pattern]] is not its own proposal, draft, or spec. It is a design pattern, as listed on the [[Main_Page|wiki home page]] that is included in other proposals, drafts. and specs. ''Recommend for adding to the [[include-pattern-faq]].
**And that is not clear, either from the main Wiki page or [[include-pattern]]. [[User:AndyMabbett|AndyMabbett]] 16:40, 18 Oct 2006 (PDT)
***ACCEPTED. Will further clarify relationship between patterns and formats. [[User:Tantek|Tantek]] 16:48, 18 Oct 2006 (PDT)

include-pattern-feedback

2006-11-03T20:06:58Z

SanchoTheFat:

= Include Pattern Feedback =

Feedback about [[include-pattern]].

== Objects and Browser Behavior ==

Over at Yahoo! Local, we were using the object include pattern for all our hReviews on business detail pages and review listings. That is, until we realized that Safari and Internet Explorer both try to embed the entire page with every OBJECT call. (Firefox correctly recognizes that it's a local object and doesn't reload anything.)

On a page with 20+ reviews, this means a substantial increase in load time and memory consumption. As a result of this (bad) browser behavior, we removed the objects entirely.

Any suggestions for workarounds or modifications to the pattern?

-- AndyBaio 29 Jun 2006

Can you use the hyperlink option with DHMTL/Ajax to perform replacements in advanced browsers? (Simon Willison's <code>[http://simon.incutio.com/archive/2003/03/25/getElementsBySelector getElementsBySelector()]</code> may be helpful)
<a href="#id" class="include" title=""></a>
with something like:
//Works only for linked include-pattern definition at microformats.org
//Requires Simon Willison's getElementsBySelector()
// and normal IE workaround for addEventListener()
addEventListener( window, 'load', function() {
var myIncludes = document.getElementsBySelector( 'a[href].include' ), a, e;
for( var i=0; a=myIncludes[i]; i++ ) if (a.href.charAt(0)=='#') {
e = document.getElementsBySelector( a.href )[0].cloneNode( true );
a.parentNode.replaceChild( e, a );
}
})
--[[User:RichHall|RichHall]] 00:51, 23 Oct 2006 (PDT)

My hResume page [http://robert.o-rourke.org seen here] caused Safari some major issues. The page was jumping between object elements when a link was hovered eventually causing the browser to crash. It seems that while the object element may be more semantically appropriate it is not usable in lieu of the issues raised in Safari.

--[[User:SanchoTheFat|SanchoTheFat]] 12:06, 3 Nov 2006 (PST)

== Hyperlink Include - Screen Reader Testing ==

Some [http://microformats.org/discuss/mail/microformats-discuss/2006-July/004693.html concerns have been raised] over the implications using empty hyperlinks may have on assistive devices such as screen readers. One concern is that an empty link may be read out, partially read out or result in some other confusing scenario for the user.

In response, a [http://allinthehead.com/demo/include.html test page] consisting of a number of empty hyperlinks in the style suggested by the pattern has been created. A 'good' result is that none of the links be read out.

=== Test Results: JAWS 7.0 with Firefox 1.5/Win ===

Tested by [[User:Phae|Frances Berriman]] 2006-07-21.

* 31 dash include dash Mozilla Firefox
* Page has no links
* 31 dash include

Conclusion: the hyperlink include pattern presented no usability issues for this screen reader.

=== Proprietary attribute ===
HTML tidy on the [http://allinthehead.com/demo/include.html test page] gives:
:Warning: <a> proprietary attribute "data"

The [http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fallinthehead.com%2Fdemo%2Finclude.html W3C validator is similarly unimpressed].

[[User:AndyMabbett|AndyMabbett]] 14:22, 22 Oct 2006 (PDT)

==== Use href ====
To clarify, links on the [http://allinthehead.com/demo/include.html test page] should be changed to use the <code>href</code> attribute as described at [[include-pattern]] (without <code>href</code> attributes, the elements probably won't register as hyperlinks, but anchors). Set <code>title=""</code> to fix empty link behavior for many assistive devices. --[[User:RichHall|RichHall]] 23:31, 22 Oct 2006 (PDT)

==== Test page corrected ====
2006-10-25: This error has been corrected on the [http://allinthehead.com/demo/include.html test page]. Any tests should probably be re-run in light of this.

== Unclear status ==

It's not clear, either from the main Wiki page or [[include-pattern]], whether this is an agreed standard, a draft, or just a proposal. [[User:AndyMabbett|AndyMabbett]] 03:14, 18 Oct 2006 (PDT)

* [[include-pattern]] is not its own proposal, draft, or spec. It is a design pattern, as listed on the [[Main_Page|wiki home page]] that is included in other proposals, drafts. and specs. ''Recommend for adding to the [[include-pattern-faq]].
**And that is not clear, either from the main Wiki page or [[include-pattern]]. [[User:AndyMabbett|AndyMabbett]] 16:40, 18 Oct 2006 (PDT)
***ACCEPTED. Will further clarify relationship between patterns and formats. [[User:Tantek|Tantek]] 16:48, 18 Oct 2006 (PDT)