[uf-discuss] newbie: hCard implementation questions
Faust
Faust at LeeMarvin.com
Mon Apr 17 13:28:25 PDT 2006
Hi,
I am attempting to add an hCard format to some faculty lists whose
mark-up ranges from not at all semantic and to at least making a good
effort. To be honest, I am not even sure what semantic mark-up is
anymore. Since I am new to microformats, I would like some advice on
how to do this without going crazy with the semantic mark-up.
I don't know if there is a validator, so I am using a combination of
Brian Suda's X2V, Calvin Yu's Tails Firefox Extension, and my
understanding of http://microformats.org/wiki/hcard to determine what is
and is not valid. If there is a better way, please let me know.
* Case One *
Let's start with the easiest case. I have static pages like this
<http://www.luther.edu/learning/dept/relphil.html> that contain a list
of faculty members marked-up like this:
> <p>Juan-Tony Guzmán, Ph.D.<br>
> <a href="mailto:guzmanto at luther.edu">guzmanto at luther.edu</a><br>
> <em>History of Jazz</em>
> </p>
and here <http://www.luther.edu/learning/dept/africa.html> is my attempt
to add an hCard format:
> <div class="vcard">
> <div class="n"><span class="fn"><span class="given-name">Juan-Tony</span> <span class="family-name">Guzmán</span></span>, <span class="honorific-suffix">Ph.D.</span></div>
> <a class="email" href="mailto:guzmanto at luther.edu">guzmanto at luther.edu</a><br />
> <em>History of Jazz</em>
> </div>
It isn't going to win any awards for semantic mark-up, but it seems
valid and the parsers produce the desired results. Adding spans for all
of those name subproperties is kind of a hassle, but this is relatively
painless for the benefit. Here is the vCard produced by X2V:
> BEGIN:VCARD
> PRODID:-//suda.co.uk//X2V 0.7.15 (BETA)//EN
> SOURCE:http://www.luther.edu/learning/dept/africa.html
> NAME:Africana Studies at Luther College
> VERSION:3.0
> N;LANGUAGE=eng;CHARSET=UTF-8:Guzmán;Juan-Tony;;;Ph.D.
> FN;LANGUAGE=eng;CHARSET=UTF-8:Juan-Tony Guzmán
> EMAIL:guzmanto at luther.edu
> END:VCARD
*Case Two *
Some of the pages, such as
<http://www.luther.edu/learning/dept/business.html>, are marked-up with
the entire list of faculty in a single definition list.
> <dl class="faculty">
> <dt>Charles Christianson, M.B.A</dt>
> <dd class="email"><a href="mailto:christch at luther.edu">christch at luther.edu</a></dd>
> <dd class="interests">Department head, principles of accounting, advanced accounting, accounting information systems</dd>
> <dd class="certification">Professional certification: C.P.A.</dd>
> <dt>C. Nicholas Gomersall, Ph.D.</dt>
> <dd class="email"><a href="mailto:gomersni at luther.edu">gomersni at luther.edu</a></dd>
> <dd class="interests">Environmental economics, quantitative methods, macroeconomics</dd>
> </dl>
This is arguably more semantic than our first example. I say arguably
because I think folks like Dan Cederholm might think it more semantic
while folks like Tantek Çelik might simply consider it a misuse of a
definition list. Anyway, I don't think there is a way to format a
single definition list for multiple hCards. So I can either use my
hCard format from above:
> <div class="vcard">
> <div class="n"><span class="fn"><span class="given-name">Charles</span> <span class="family-name">Christianson</span></span>, <span class="honorific-suffix">M.B.A</span></div>
> <a class="email" href="mailto:christch at luther.edu">christch at luther.edu</a><br />
> <em>Department head, principles of accounting, advanced accounting, accounting information systems</em><br />
> <em>Professional certification: C.P.A.</em>
> </div>
or break the single definition list into a series of definition lists
(one for each hCard):
> <dl class="vcard">
> <dt class="n"><span class="fn"><span class="given-name">Charles</span> <span class="family-name">Christianson</span></span>, <span class="honorific-suffix">M.B.A</span></dt>
> <dd class="mail"><a class="email" href="mailto:christch at luther.edu">christch at luther.edu</a></dd>
> <dd class="interests">Department head, principles of accounting, advanced accounting, accounting information systems</em></dd>
> <dd class="certification">Professional certification: C.P.A.</dd>
> </dl>
Are either of these solutions better than the other? Is there a better
solution than these? My goal is not to create the most semantic
mark-up, but to mark-up existing page with an hCard format and do it
with as little pain as possible.
* Case Three *
At the bottom of these pages is the contact information for the
department head. I marked it up as so:
> <div class="vcard">
> <div class="n"><span class="fn"><span class="given-name">Lawrence</span> <span class="family-name">Williams</span></span></div>
> <a class="email" href="mailto:williala at luther.edu">williala at luther.edu</a>
> <div class="org">
> <div class="organization-unit">Africana Studies Department</div>
> <div class="organization-name">Luther College</div>
> </div>
> <div class="adr">
> <div class="street-address">700 College Drive</div>
> <span class="locality">Decorah</span>, <span class="region">Iowa</span> <span class="postal-code">52101</span>
> </div>
> <div class="tel">(563) 387-1158</div>
> </div>
I thought this looked good and here is the output from X2V:
> BEGIN:VCARD
> PRODID:-//suda.co.uk//X2V 0.7.15 (BETA)//EN
> SOURCE:http://www.luther.edu/learning/dept/africa.html
> NAME:Africana Studies at Luther College
> VERSION:3.0
> N;LANGUAGE=eng;CHARSET=UTF-8:Williams;Lawrence;;;
> ORG;CHARSET=UTF-8:Luther College;Africana Studies Department;
> FN;LANGUAGE=eng;CHARSET=UTF-8:Lawrence Williams
> EMAIL:williala at luther.edu
> ADR;LANGUAGE=eng;CHARSET=UTF-8:;;700 College Drive;Decorah;Iowa;52101;
> TEL:(563) 387-1158
> END:VCARD
But when I import it into my ThunderBird address book, it doesn't add
the street address or phone number. Tails picks up the everything
except the street address.
This this valid hCard? Does it produce a valid vCard? Why aren't the
street address and phone number picked up by Thunderbird address book?
Also, why do the parsers only parse the first instance of a name? When
Lawrence Williams appears both in the list and at the bottom of the
page, only the first instance of Lawrence is picked up. Why doesn't
either parser find the more detailed information for Lawrence Williams?
* Case Four *
The music department uses a CMS to create a more information rich
faculty list <http://music.luther.edu/faculty/> marked-up as a single
definition list.
> <dl class="faculty">
> <dt><a href="http://music.luther.edu/faculty/andereck_edwin.html"><img alt="Andereck, Edwin" src="/images/faculty/andereck-t.jpg" width="100">Andereck, Edwin</a></dt>
> <dd>Associate Professor of Music</dd>
> <dd>Jenson-Noble 180</dd>
> <dd>+1.563.387.1213</dd>
> <dd><a href="mailto:andereck at luther.edu">andereck at luther.edu</a></dd>
> <dd>Voice, vocal literature, opera</dd>
> <dt><a href="http://music.luther.edu/faculty/arnold_craig.html"><img alt="Arnold, Craig" src="/images/faculty/csarnold-t.jpg" width="100">Arnold, Craig</a></dt>
> <dd>Professor of Music</dd>
> <dd>Jenson-Noble 158</dd>
> <dd>+1.563.387.2219</dd>
> <dd><a href="mailto:csarnold at luther.edu">csarnold at luther.edu</a></dd>
> <dd>Director of Choral Activities, Nordic Choir, methods, conducting</dd>
> </dl>
My first crack at it was to simply break-up the one large definition
list into a series of definition lists (one for each faculty member)
like so <http://music.luther.edu/new/faculty/test.html>:
> <dl class="faculty vcard">
> <dt><a class="url" href="http://music.luther.edu/new/faculty/andereck_edwin.html"><img alt="Andereck, Edwin" class="photo" src="http://music.luther.edu/images/faculty/andereck-t.jpg" width="100" /><span class="fn">Andereck, Edwin</span></a></dt>
> <dd class="title">Associate Professor of Music</dd>
> <dd>Jenson-Noble 180</dd>
> <dd class="tel">+1.563.387.1213</dd>
> <dd><a class="email" href="mailto:andereck at luther.edu">andereck at luther.edu</a></dd>
> <dd>Voice, vocal literature, opera</dd>
> </dl>
> <dl class="faculty vcard">
> <dt><a class="url"
> href="http://music.luther.edu/new/faculty/arnold_craig.html"><img alt="Arnold, Craig" class="photo" src="http://music.luther.edu/images/faculty/csarnold-t.jpg" width="100" /><span class="fn">Arnold, Craig</span></a></dt>
> <dd class="title">Professor of Music</dd>
> <dd>Jenson-Noble 158</dd>
> <dd class="tel">+1.563.387.2219</dd>
> <dd><a class="email" href="mailto:csarnold at luther.edu">csarnold at luther.edu</a></dd>
> <dd>Director of Choral Activities, Nordic Choir, methods, conducting</dd>
> </dl>
Here is a vCard from X2V:
> BEGIN:VCARD
> PRODID:-//suda.co.uk//X2V 0.7.15 (BETA)//EN
> SOURCE:http://music.luther.edu/new/faculty/test.html
> NAME:Music at Luther - Faculty
> VERSION:3.0
> N;LANGUAGE=en;CHARSET=UTF-8:Edwin;Andereck\,;;;;
> FN;LANGUAGE=en;CHARSET=UTF-8:Andereck\, Edwin
> EMAIL:andereck at luther.edu
> TITLE;LANGUAGE=en;CHARSET=UTF-8:Associate Professor of Music
> TEL:+1.563.387.1213
> PHOTO;VALUE=uri:http://music.luther.edu/images/faculty/andereck-t.jpg
> URL:http://music.luther.edu/new/faculty/andereck_edwin.html
> END:VCARD
I was unhappy with this attempt because:
1) I felt like I was misusing the definition list.
2) It didn't look very good without the style sheets
3) The telephone number didn't import into Thunderbird address book
4) The display name was "Andereck\, Edwin"
5) The first name was "Andereck\, "
6 The last name was "Edwin"
I thought that implied "n" optimization should take care of issues
4-6. Upon closer reading, I understand that the implied "n"
optimization should not have any effect on the display name, but I am
still not sure why the first and last names are reversed. Is it an
error with the parser, my hCard mark-up, my understanding of implied "n"
optimization, or Thunderbird's address book?
I can't fill in all of those name subproperties like I did with the
previous examples without reworking the way the data is stored in their
CMS. For better or for worse, that name is currently store in a single
field. But since I could try to fix the phone number problem and do a
better job with the mark-up, I took another crack at it:
> <div class="vcard">
> <h2 class="name"><a class="url fn" href="http://music.luther.edu/new/faculty/andereck_edwin.html">Andereck, Edwin</a></h2>
> <dl>
> <dt>Photo</dt>
> <dd class="img"><a href="http://music.luther.edu/new/faculty/andereck_edwin.html"><img alt="Andereck, Edwin" class="photo" src="http://music.luther.edu/images/faculty/andereck-t.jpg" width="100" /></a></dd>
> <dt>Title</dt><dd class="title">Associate Professor of Music</dd>
> <dt>Office</dt><dd>Jenson-Noble 180</dd>
> <dt>Telphone</dt><dd class="tel"><dl><dt class="type">Work</dt><dd class="value">+1.563.387.1213</dd></dl></dd>
> <dt>Email</dt><dd><a class="email" href="mailto:andereck at luther.edu">andereck at luther.edu</a></dd>
> <dt>Interests</dt><dd>Voice, vocal literature, opera</dd>
> </dl>
> </div>
> <div class="vcard">
> <h2 class="name"><a class="url fn" href="http://music.luther.edu/new/faculty/arnold_craig.html">Arnold, Craig</a></h2>
> <dl>
> <dt>Photo</dt>
> <dd class="img"><a href="http://music.luther.edu/new/faculty/arnold_craig.html"><img alt="Arnold, Craig" class="photo" src="http://music.luther.edu/images/faculty/csarnold-t.jpg" width="100" /></a></dd>
> <dt>Title</dt><dd class="title">Professor of Music</dd>
> <dt>Office</dt><dd>Jenson-Noble 158</dd>
> <dt>Telphone</dt><dd class="tel"><dl><dt class="type">Work</dt><dd class="value">+1.563.387.2219</dd></dl></dd>
> <dt>Email</dt><dd><a class="email" href="mailto:csarnold at luther.edu">csarnold at luther.edu</a></dd>
> <dt>Interests</dt><dd>Director of Choral Activities, Nordic Choir, methods, conducting</dd>
> </dl>
> </div>
This seems more semantic, looks better without styles, and the phone
number is imported into Thunderbird's address book. On the down side,
it is more mark-up and requires some extra CSS to hide those undesired
definition terms. It also doesn't fix my issues 4-6, not that I
thought it would.
So, am I on the right track? Am I making this too difficult? Is there
an easier way to do this? How do I handle my first and last name
issue? Will I have to play with the database, drop the FN, and add all
of those name subproperties?
Thanks in advance for your time and any advice you can give me,
Faust Gertz
More information about the microformats-discuss
mailing list