Archive for the 'HTML' Category

Some Very Strange Markup

November 7, 2007

I was viewing the source of the Facebook iPhone webapp to see how they did their fancy transitions between pages, when I found some very strange HTML:

<body home=”home.php”>
<div class=”toolbar1 tops chrome”>
<u href=”home.php”><img src=”images/facebook.png”/></u>
<u class=”button plain leftButton” href=”#status”>Status</u>
<u class=”button plain” href=”#search” radio=”true”>Search</u>
</div>

How can a <body> tag have a “home” attribute or a <u> tag have an “href” attribute? I scoured the W3C spec and looked for a possible mobile HTML standard supporting it, but couldn’t find anything.Well, it turns out they’re doing some non-standard trickery by adding custom attributes to their elements. They’re then using JavaScript to get the values of those attributes and use them in their “onclick” handlers for each element. Sneaky!

Posted in Coding, HTML, Oddities, iPhone | Leave a Comment »

Fun With Microformats

October 24, 2007

I just updated my food blog by encoding all of the restaurants’ contact information in microformats. It’s basically a way to encode vCard/vCal data using HTML. It’s part of the latest movement to bring semantics (meaningful data that can be interpreted by computer programs) to web content. For instance, with this technology you could easily write a program to find all the phone numbers and addresses listed on the internet and generate a worldwide phone book. Or you could track who has lived in a given house over the past X years. Or you could generate statistics on how many CEOs live next to golf courses. Or you could figure out, according to published calendars, when most people will be away from home and thus not watching the latest sitcom. And that’s just the beginning.

One thing that’s cool about the hCard specification is its flexibility. According to the spec, they recommend the following format:

<div class="vcard">
  <span class="fn n">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span>
       <span class="family-name">de Villamil</span>
     </a>
  </span>
  <span class="nickname">neuro</span>
  <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref</span><span>erred email</span>
  </a>
  <span class="org">Omatis</span>
  <span class="adr">
     <abbr class="type" title="dom">France</abbr>
     <span class="type">home</span> address
     <abbr class="type" title="postal">mail</abbr> and
     <abbr class="type" title="parcel">shipments</abbr>:
     <span class="street-address">12 rue Danton</span>
     <span class="locality">Le Kremlin-Bicetre</span>
     <span class="postal-code">94270</span>
     <span class="country-name">France</span>
  </span>
</div>

But I was able to easily use different elements in place of <div> and <span>:

<p class="vcard">
  <span class="fn n">
     <a class="url" href="http://t37.net">
       <span class="given-name">Fréderic</span>
       <span class="family-name">de Villamil</span>
     </a>
  </span>
  <span class="nickname">neuro</span>
  <a class="email" href="mailto:neuroNOSPAM@t37.net">
     <span class="type">pref</span><span>erred email</span>
  </a>
  <span class="org">Omatis</span>
  <a class="adr" href="http://somegooglemapslink">
     <abbr class="type" title="dom">France</abbr>
     <span class="type">home</span> address
     <abbr class="type" title="postal">mail</abbr> and
     <abbr class="type" title="parcel">shipments</abbr>:
     <span class="street-address">12 rue Danton</span>
     <span class="locality">Le Kremlin-Bicetre</span>
     <span class="postal-code">94270</span>
     <span class="country-name">France</span>
  </a>
</p>

This was useful because wordpress does not allow <div> in your blog posts. It automatically converts them to <p> :p

Posted in Coding, HTML, Microformats | Leave a Comment »