[uf-discuss] newbie: hCard implementation questions
brian suda
brian.suda at gmail.com
Mon Apr 17 13:49:09 PDT 2006
I can answer a few of the issues you brought-up and i'll leave others to
debate the others.
First, please document your experiences with Thunderbird address book,
because your examples import into Apple's Address book just fine for me
(my thoughts are that TEL is missing a TYPE=???, which is OK, and that
ADR might be missing something? not sure about that one)
http://microformats.org/wiki/vcard-implementations
You can also collapse the N and FN properties to a single class="n fn" so:
<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>
becomes:
<div class="n fn"><span class="given-name">Juan-Tony</span> <span
class="family-name">Guzmán</span>, <span
class="honorific-suffix">Ph.D.</span>
It's NOT exactly the same, because now your FN is "Juan-Tony Guzmán,
Ph.D.", but that might help lessen the number of spans.
As for the Implied-N at the moment it is assuming that it is in the
format "FirstName LastName" (Given-Name Family-Name) your example is in
reverse and it has a comma ',' as part of that value. So it is assuming
that is part of firstname, it is not great, but that is the way X2V
currently parses - if that needs to be changed or discussed let me know.
-brian
Faust wrote:
> 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
> _______________________________________________
> microformats-discuss mailing list
> microformats-discuss at microformats.org
> http://microformats.org/mailman/listinfo/microformats-discuss
>
More information about the microformats-discuss
mailing list