230 likes | 356 Views
MICROFORMATS. Ioana B ărbănțan Semantic Web developer. Content. What Are The Microformats ? Definitions Benefits & Limitation An Example Categories Web & Mobile Browsers Supporting Microformats Facebook Conclusions. What Are The Microformats ?.
E N D
MICROFORMATS Ioana Bărbănțan Semantic Web developer
Content • What Are The Microformats? • Definitions • Benefits & Limitation • An Example • Categories • Web & Mobile Browsers Supporting Microformats • Facebook • Conclusions
What Are The Microformats? Official definition of microformats • set of simple, open data formats • built upon existing and widely adopted standards • designed for humans first and machines second • intend to solve simpler problems first by adapting to current behaviors and usage patterns Other properties • makes a page evolve from being machine-readable to being machine understandable • set of conventions • microformatsare not a new language • but adapted to current behaviors and usage patterns and is connected with semantic XHTML
Microformats Concept • Generic title given to any and all the formats based on XML/HTML with the objective of providing additional metadata concerning the web object
Benefits & Limitations • B1: They will improve the semantic value of the content • B2: Reuse of HTML and XML tags to convey data • B3:Add structure to content • L1: Web browsers do not support them uniformly • L2: They require additional HTML markup
An Example Problem: the need to mark-up address information semantically. <div class="adr"> <abbr class="type" title="dom">U.S.</abbr> <span class="type">home</span> address, for <abbr class="type" title="postal">mail</abbr> and <abbr class="type" title="parcel">shipments</abbr>: <div class="street-address">123 Main Street</div> <span class="locality">Any Town</span>, <span class="region">CA</span> <span class="postal-code">91921-1234</span> </div> Microformatsare easily human-readable when rendered in a browser.
Categories People and Organizations • hCard <divclass="vcard"><a class="urlfn" href="http://tantek.com/">TantekÇelik</a></div> • Geo • enables publishers to add geodata about the location of a person, place, event, or thing to a page <span class="geo"> <span class="latitude">27.976628</span>, <span class="longitude"> å 86.933302</span> </span> • XFN (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks • indicate their relationship(s) to the people in their blogrolls simply by adding a 'rel' attribute to their <a href> tags <a href="http://jeff.example.org" rel="friend met"> • other rel : coworker, neighbor, child
Categories • hRecipe • markup for creating meals, drinks, food-based items • identify individual food related concepts • required property: fn – fromatted name and an ingredient <span class = “hrecipe”> <span class = “fn ingredient”> sugar </span> </span>
Categories –contd. • Calendars and Events • hCalendar • Opinions, Ratings and Reviews • VoteLinks, hReview • Licenses • rel-license • Tags, Keywords, Categories • rel-tag • Lists and Outlines • XOXO
Web Browsers Supporting Microformats • Firefox from V3 • Operator add-on that detects microformats in each page you view and enables actions on them • IE, 7+ supports microformats using add-ins • Chrome 5+ • Safari– has unofficial plugins
Mobile Browsers Supporting Microformats • No support • BlackBerry • iPhone • Nokia • The S60 3rd generation browser can handle vcards and icalsextracted from hcards and vcards very well
Firefox Microformats Person representation <div class="vcard"><a class="urlfn" href="http://tantek.com/">TantekÇelik</a></div>
Firefox Microformats –contd. • Events • export to outlook/ windows live / Google / Apple / 30 boxes • export event • add to 30 boxes • bookmark • add to Google/Yahoo calendar
Firefox Microformats–contd. • Tagspaces • find products on amazon/ del.icio.us • find photos on flickr • find bookmarks • find blogs • find events on upcoming.org • find answers on Yedda • find videos on Youtube
Facebook Uses Microformats • Facebook has marked up all events with the hCalendarmicroformatincluding marking up their venues with hCard as well <div>Monday, March 14 · <span class="dtstart"> <span class="value-title" title="2011-03-14T18:00:00"> </span>6:00pm</span> - <span class="dtend"> <span class="value-title" title="2011-03-14T21:00:00"> </span>9:00pm</span> </div>
Conclusions • A format used in the Semantic Web that re-uses HTML and XML tags to convey • Provide easy reading and understanding by humans • Add structure to content • Humans first, machines second
References • http://microformats.org/ • John Allsop, “Microformats: Empowering Your Markup for Web 2.0”, Berkeley, CA , 2007