# hResume Microformat

### Roger Costello

Click arrow key () to navigate to next page

# hResume Overview

- hResume is used to add smarts to resumes and CVs, so that Web applications can automatically process them.
- The hResume properties are based on fields common to resumes published today on the Web. Where possible, properties have been chosen and reused from existing Microformats.

# hResume Properties

- summary: use this property on the (X)HTML element that wraps the introductory text which briefly introduces the person and the job position being sought.
- contact: use this property on the (X)HTML element that wraps the person's contact information. Use hCard to mark up the contact information.
- education: use this property on the (X)HTML element that wraps an education item of the resume/CV. Use hCalendar to mark up all the education items.
- experience: use this property on the (X)HTML element that wraps an experience item. Use hCalendar to mark up all the experience items.

# hResume Properties

- skill: use this property on the (X)HTML element that wraps a skill item. Also, use rel-tag to tag each skill.
- affiliation: use this property on the (X)HTML element that wraps an affiliation item. Use hCard to mark up the affiliation item.
- publications: use this property on the (X)HTML element that cites a publication.

# Root Classname, Profile URL

- The root classname is hReview.
- The hResume profile URL is: http://microformats.org/wiki/hresume-profile

# Example Resume

- Revise this person's resume to incorporate the hResume properties: (view source to see the HTML text)
  - examples/hResume/example01/Derrick-Crane-resume.html

# Example Resume

- Old:

1. <body>
2. ...
3. </body>

- New:

1. <body class="hResume">
2. ...
3. </body>

# Example Resume

- Old:

1. <h1>Derrick Crane</h1>
2. <ul>
3. <li>214 Ford St. #53</li>
4. <li>Ann Arbor, MI 77843</li>
5. <li>313-555-0447</li>
6. <li>dcrane@stu.umich.edu</li>
7. </ul>

# Example Resume

- New:

1. <div class="contact vcard">
2. <h1 class="fn n">
3. <span class="given-name">Derrick</span>
4. <span class="family-name">Crane</span>
5. </h1>
6. <ul class="adr">
7. <li class="street-address">214 Ford St. #53</li>
8. <li>
9. <span class="locality">Ann Arbor</span>,
10. <abbr title="Michigan" class="region">MI</abbr>
11. <span class="postal-code">77843</span>
12. </li>
13. <li class="tel">313-555-0447</li>
14. <li><a class="email" href="mailto:dcrane@stu.umich.edu">dcrane@stu.umich.edu</a></li>
15. </ul>
16. </div>

# Example Resume

- Old:

1. <h2>Education</h2>
2. <p>B.S. in mechanical engineering, focus in automotive engineering, University of
3. Michigan, Ann Arbor, MI, May, 1998.</p>

# Example Resume

- New:

1. <div class="vcalendar">
2. <h2>Education</h2>
3. <p class="education vevent vcard">
4. <span class="summary">B.S. in mechanical engineering</span>,
5. <span class="description">focus in automotive engineering</span>,
6. <span class="location fn org">University of Michigan</span>,
7. <span class="adr">
8. <span class="locality">Ann Arbor</span>,
9. <abbr title="Michigan" class="region">MI</abbr>,
10. </span>
11. <abbr class="dtstart" title="1998-05-01">May, 1998</abbr>.
12. </p>
13. </div>

- Note: dtstart represents his graduation date (the zeroeth anniversary of his graduation).

# Example Resume

- Old:

1. <h2>Experience</h2>
2. <ol>
3. <li>...</li>
4. <li>...</li>
5. <li>...</li>
6. <li>...</li>
7. </ol>

# Example Resume

- New:

1. <h2>Experience</h2>
2. <ol class="vcalendar">
3. <li class="experience vevent vcard">...</li>
4. <li class="experience vevent vcard">...</li>
5. <li class="experience vevent vcard">...</li>
6. <li class="experience vevent vcard">...</li>
7. </ol>

# Example Resume

- Old:

1. <h2>Computer Skils</h2>
2. <p>CAD, AutoCAD, MathCAD, C++, Word, Excel.</p>

# Example Resume

- New:

1. <h2>Computer Skils</h2>
2. <p>
3. <span class="skill"><a class="rel-tag" href="http://en.wikipedia.org/wiki/CAD">CAD</a></span>,
4. <span class="skill"><a class="rel-tag" href="http://en.wikipedia.org/wiki/AutoCAD">AutoCAD</a></span>,
5. <span class="skill"><a class="rel-tag" href="http://en.wikipedia.org/wiki/MathCAD">MathCAD</a></span>,
6. <span class="skill"><a class="rel-tag" href="http://en.wikipedia.org/wiki/C%2B%2B">C++</a></span>,
7. <span class="skill"><a class="rel-tag" href="http://en.wikipedia.org/wiki/MS_Word">Word</a></span>,
8. <span class="skill"><a class="rel-tag" href="http://en.wikipedia.org/wiki/Microsoft_Excel">Excel</a></span>.
9. </p>

# hResume Creator

- http://hresume.weblogswork.com/hresumecreator/

# Lab 1

- Markup this HTML using hResume properties:Meg-Hertz-resume.html
- Name the new version of the HTML file: revised-Meg-Hertz-resume.html
- After marking up the HTML with the hResume properties:
  1. Validate your HTML using the W3C HTML validator: http://validator.w3.org/
  2. Use Brian Suda's xhtml2vcard.xsl tool to extract the hCard and generate a vCard (.vcf file). In the lab 1 folder is run.bat. Double click on it, and it will invoke Brian's tool.
  3. Use Operator to mashup the hCard and hCalendar Microformats.

# Homepage

- Homepage