1 / 11

Microformats

Microformats. http://microformats.org. “hack” of CSS classes. CSS classes are made up multiple classes can be used on a single tag DIV and SPAN tags do no formatting* Following a known naming convention additional meaning can be ‘encoded’ into HTML <span class=”first name”>jon</span>.

tova
Download Presentation

Microformats

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Microformats • http://microformats.org

  2. “hack” of CSS classes • CSS classes are made up • multiple classes can be used on a single tag • DIV and SPAN tags do no formatting* • Following a known naming convention additional meaning can be ‘encoded’ into HTML • <span class=”first name”>jon</span>

  3. How it works • A standard microformat specification is followed to get the CSS class names • the name of the microformat is specified on the surrounding tag (again a CSS class) • Future browsers, browser plug-ins, web search engines and other software searches and extracts the information.

  4. vCard <-> hCard • Virtual Business Card file format • in widespread use for contact information • hCard is based upon vCard implemented as an HTML microformat • Browsers will be able to support creation of vCards from webpages with hCard data as well as sending that vCard to other apps

  5. hCard (“vcard”) • http://microformats.org/code/hcard/creator • <p class=”vcard”> • <span class=”fn”>john</span> • <a class=”email” href=”mailto:john@metrostate.edu”>john@metrostate.edu</a> • </p>

  6. <div class="vcard"> • <div class="fn org">Wikimedia Foundation Inc.</div> • <div class="adr"> • <span class="type">work</span> • <div class="street-address">200 2nd Ave. South #358</div> • <span class="locality">St. Petersburg</span> • <abbr class="region" title="Florida">FL</abbr> <span class="postal-code">33701-4313</span> • </div> • Email: <span class="email">info@wikimedia.org</span> • <span class="tel"><span class="type">Fax</span>: • <span class="value">+1-727-258-0207</span></span> • </div>

  7. hCalendar • Based upon the popular Event file format: iCalendar • Specify an Event or multiple events which can be imported into calendar software • http://microformats.org/code/hcalendar/creator

  8. <div class="vevent"> • <h3 class="summary">XYZ Project Review</h3> • <p class="description">Project XYZ Review Meeting</p> • <p>To be held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr> • until • <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p> • <p>Location: <span class="location">1CP Conference Room 4350</span></p> • </div>

  9. hAtom • Atom is a competing news feed / syndication format with the RSS format (they are similar) • HTML pages themselves would define the syndication feed information in the page • Provides a shorter summary of the information which could be useful for increasing accessibility

  10. Future • More file formats will be adapted into or created as microformats • Complex file formats are either XML or will become XML based possibly with a subset used for microformats • XML formats like SVG which support CSS can use microformats just as easily

  11. Ideas • Create your own ‘microformat’ like CSS class naming conventions • Promotes reuse of CSS within the site or for multiple websites • Store information otherwise lost in the HTML as your own ‘microformat’ so you can recover/import that information later

More Related