The Semantic Web Real World Examples with Microformats

First Things First

• What do we mean by Semantic?
• What do we mean by Web?
  • The delivery mechanism of choice for our clients
  • Well-known technologies

What, then, is the Semantic Web?

• Tim Berner-Lee's Vision: web of data

  "To a computer, the Web is a flat, boring world, devoid of meaning. This is a pity, as in fact documents on the Web describe real objects and imaginary concepts, and give particular relationships between them."

• A shift in how we use the series of tubes we call the www
• Not just machine-readable, but machine-understandable
• Data portability and integration

Upper Case: The Semantic Web

• Distinction drawn by microformats community
• Progress toward TBL's vision at the W3C
• Several new technologies/spefications
  • RDF
  • OWL
  • SPARQL
• Not much notable implementation
• Topic for another day

Lower Case: the semantic web

• Progress toward TBL's vision with today's technologies/specifications
• (X)HTML, CSS
• Build tools to support data portability and integration now
• Why build a "new web" when there's a ton of content on the current web?

The Semantic Web: Roots

• CSS1 support becomes widespread
• CSS provides for separation of concerns
  • Presentation should be handled by CSS
  • Presentational HTML Elements are reduced/deprecated
• W3C begins deprecating presentational HTML elements

The Semantic Web: Goals

• Data portability with today's technologies
• Human and machine understandable

The Semantic Web: Benefits

• Separation of concerns
• Developers are already generating (X)HTML web content
• More accessible documents
• SEO - Google PageRank, heading weighting
• … illities

Semantic HTML

• Three high-level types of HTML tags:
  • Presentational elements - <b>old tag
  • Semantic elements - <em>phasis tag
  • Structural elements - <span> tag
• Writng semantic HTML requires preferring the Semantic elements and using the Structural when necessary
• Steps to writing semantic HTML
  1. Use appropriate semantic HTML elements
  2. Imply semantics through element context
  3. Create semantics through semantic class names

Semantic HTML Elements

• Use the right element for the job

  Presentational	Semantic
  <i>	<em>
  <b>	<strong>
  <strike>	<del>
  <font>	<h1>

• Tables are Semantic elements - should be used to markup tables of data
• POSH

Semantic HTML Context

• Nest elements to imply context
• <a>nchor = link
• <ul> = list
• <a>nchors, within <ul> = navigation menu

• 
  <ul>
  	<li><a href="link1.html">Link 1</a></li>
  	<li><a href="link2.html">Link 2</a></li>
  	<li><a href="link3.html">Link 3</a></li>
  </ul>
  

Semantic HTML Class Names

• Use class names that convey meaning, not presentation

  Bad	Good
  <p class="red">	<p class="error">
  <td class="right-red">	<td class="number negative">
  <img class="black-border-large">	<img class="personal-photo">

• Good class names don't change
• Plenty of reading on this topic

MicroFormats

• microformats.org

  "Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages."

  "building on the shoulders of giants"

• logical next step from semantic class names
• the idea: use standardized class names for frequently used data types
• motivators: use existing technologies and standards to solve specific problems

What Are They?

• People: hCard
• Events: hCalendar
• Addresses: adr
• Locations: geo
• Outlines: XOXO
• Resumes: hResume
• More

People: hCard

		                          http://www.andypemberton.com/
			                         Andy 
			                          Pemberton
		
		                    Consultant
		                     http://www.captechventures.com  CapTech Ventures
	

People: hCard

	<div              >
		<a                  href="http://www.andypemberton.com/">
			<span                   >Andy</span> 
			<span                    >Pemberton</span>
		</a>
		<span              >Consultant</span>
		<a             href="http://www.captechventures.com">CapTech Ventures</a>
	</div>

People: hCard

	<div class="vcard">
		<a class="url fn n" href="http://www.andypemberton.com/">
			<span class="given-name">Andy</span> 
			<span class="family-name">Pemberton</span>
		</a>
		<span class="title">Consultant</span>
		<a class="org" href="http://www.captechventures.com">CapTech Ventures</a>
	</div>

Show Me the Portability

• Operator
• Tails
• LeftLogic MicroFormats BookMarklet

Where's This Heading?

• Still maturing, but progress is very impressive
• Community hints to integration in major browsers
  • FireFox 3
  • Internet Explorer 8
  • Safari, Opera
• Leading to TBL's vision? (GRDDL)

Who's Involved?

• Tantek, Technorati crew
• IBM - Operator
• Large development community

Who's Using MicroFormats Today?

• Wikipedia
• LinkedIn
• Yahoo
• Apple
• Flickr
• More!

Advanced Examples

• Can't get out of here without some cool code
• MicroFormats BookMarklet
• GreaseMonkey, Operator and Tails

Open Discussion

• Should we be doing this on our client projects?
• Pros/cons