06/02/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com Microformats “ Designed for humans first and machines second” microformats.org March 21th, 2008

What is the Semantic Web? “ The first step is putting data on the Web in a form that machines can naturally understand, or converting it to that form. This creates what I call a Semantic Web – a web of data that can be processed directly or indirectly by machines” Tim Benners-Lee, 1999 06/02/09 HUGE / Microformats /

“ The first step is putting data on the Web in a form that machines can naturally understand, or converting it to that form. This creates what I call a Semantic Web – a web of data that can be processed directly or indirectly by machines”

Tim Benners-Lee, 1999

Machine-processable Data 06/02/09 HUGE / Microformats / Smart data Data and meta data Data and the description of its meaning Example: XML

Smart data

Data and meta data

Data and the description of its meaning

Example: XML

XML Example 06/02/09 HUGE / Microformats / <contacts> <contact id=“1” age=“28” friendOf=“2,3”> <first-name>Rafael</first-name> <last-name>Mumme</last-name> </contact> <contact id=“2” age=“15” friendOf=“1,3”> <first-name>Lukas</first-name> <last-name>Mairl</last-name> </contact> <contact id=“3” age=“25” friendOf=“1,2”> <first-name>Josef</first-name> <last-name>Pfleger</last-name> </contact> </contacts>

<contacts>

<contact id=“1” age=“28” friendOf=“2,3”>

<first-name>Rafael</first-name>

<last-name>Mumme</last-name>

</contact>

<contact id=“2” age=“15” friendOf=“1,3”>

<first-name>Lukas</first-name>

<last-name>Mairl</last-name>

</contact>

<contact id=“3” age=“25” friendOf=“1,2”>

<first-name>Josef</first-name>

<last-name>Pfleger</last-name>

</contact>

</contacts>

Why XML? 06/02/09 HUGE / Microformats / Markup is separate from content and may contain content Hierarchical structure Relational and object-oriented data models Provides a simple and robust mechanism for encoding semantic information XML OO Relational Element Class Entity Atribute Data member Relation

Markup is separate from content and may contain content

Hierarchical structure

Relational and object-oriented data models

Provides a simple and robust mechanism for encoding semantic information

What is Semantic HTML? Semantic HTML is the use of the most appropriate HTML elements and attributes for the content we are marking up. 06/02/09 HUGE / Microformats /

Semantic HTML is the use of the most appropriate HTML elements and attributes for the content we are marking up.

Microformats “ Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).” microformats.org 06/02/09 HUGE / Microformats /

“ Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).”

microformats.org

The not-yet-semantic Web July 20 2006: I went to see the latest Woody Allen film today. It was pretty good. I’d give it a thumb and a half up  Title: Pirates of the Caribbean 2; Director: Gore Verbinski; Rating: 8 out of 10 Man, the CGI in superman roxor, but the film suxor 06/02/09 HUGE / Microformats /

July 20 2006: I went to see the latest Woody Allen film today. It was pretty good. I’d give it a thumb and a half up 

Title: Pirates of the Caribbean 2; Director: Gore Verbinski; Rating: 8 out of 10

Man, the CGI in superman roxor, but the film suxor

hReview 5 out of 5 stars Crepes on Cole is awesome Reviewer: Tantek Crepes on Cole is one of the best little creperies in San Francisco. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside 06/02/09 HUGE / Microformats /

5 out of 5 stars

Crepes on Cole is awesome

Reviewer: Tantek

Crepes on Cole is one of the best little creperies in San Francisco. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside

hReview: code <div class=&quot; hreview &quot;> <span class=&quot; rating &quot;>5</span> out of 5 stars <h1 class=&quot; summary &quot;>Crepes on Cole is awesome</h1> <span class=&quot; reviewer vcard &quot;> Reviewer: <span class=&quot; fn &quot;>Tantek</span> </span> <div class=&quot; description item vcard &quot;> <p><span class=&quot; fn org &quot;>Crepes on Cole</span> is one of the best little creperies in <span class=&quot; adr &quot;><span class=&quot; locality &quot;>San Francisco</span></span>. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside</p> </div> </div> 06/02/09 HUGE / Microformats /

<div class=&quot; hreview &quot;>

<span class=&quot; rating &quot;>5</span> out of 5 stars

<h1 class=&quot; summary &quot;>Crepes on Cole is awesome</h1>

<span class=&quot; reviewer vcard &quot;>

Reviewer: <span class=&quot; fn &quot;>Tantek</span>

</span>

<div class=&quot; description item vcard &quot;>

<p><span class=&quot; fn org &quot;>Crepes on Cole</span> is one of the best little creperies in <span class=&quot; adr &quot;><span class=&quot; locality &quot;>San Francisco</span></span>. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside</p>

</div>

</div>

corkd.com 06/02/09 HUGE / Microformats /

06/02/09 HUGE / Microformats / imdb.net

Decentralized Information 06/02/09 HUGE / Microformats /

adr 186 W 80th street New York, NY 10024 06/02/09 HUGE / Microformats /

186 W 80th street

New York, NY 10024

adr: code <div class=&quot;adr&quot;> <span class=&quot;street-address&quot;>186 W 80th street</span> <span class=&quot;locality&quot;>New York</span> <span class=&quot;region&quot;>NY</span> <span class=&quot;postal-code&quot;>10024</span> </div> 06/02/09 HUGE / Microformats /

<div class=&quot;adr&quot;>

<span class=&quot;street-address&quot;>186 W 80th street</span> <span class=&quot;locality&quot;>New York</span> <span class=&quot;region&quot;>NY</span> <span class=&quot;postal-code&quot;>10024</span>

</div>

upcoming.yahoo.com 06/02/09 HUGE / Microformats /

Benefits Standard markup Efficiency and easy maintenance Enable distributed software services such as aggregation and indexing Enable seamless interoperability between web-based content and desktop applications Does not break your code 06/02/09 HUGE / Microformats /

Standard markup

Efficiency and easy maintenance

Enable distributed software services such as aggregation and indexing

Enable seamless interoperability between web-based content and desktop applications

Does not break your code

Principles Solve a specific problem Start as simply as possible Are designed for humans first, machines second Reuse building blocks from adopted standards Are modular and embeddable Enable and encourage decentralized development, content, and services 06/02/09 HUGE / Microformats /

Solve a specific problem

Start as simply as possible

Are designed for humans first, machines second

Reuse building blocks from adopted standards

Are modular and embeddable

Enable and encourage decentralized development, content, and services

IE8 WebSlices <div class=&quot; hslice &quot; id=&quot;123&quot;> <h1 class=&quot; entry-title &quot;>HUGE's Work</h1> <ul class=&quot; entry-content &quot;> <li> <strong>jetBlue</strong> <p> As Jetblue’s long-term interactive partner, HUGE helped the airline develop a phenomenally successful online travel website-mainly by keeping things powerfully simple.<br /> <a href=&quot;http://hugeinc.com/casestudies/clients.php?ID=9&quot;>View case study</a> </p> </li> … </ul> </div> 06/02/09 HUGE / Microformats /

<div class=&quot; hslice &quot; id=&quot;123&quot;>

<h1 class=&quot; entry-title &quot;>HUGE's Work</h1>

<ul class=&quot; entry-content &quot;>

<li>

<strong>jetBlue</strong>

<p> As Jetblue’s long-term interactive partner, HUGE helped the airline develop a phenomenally successful online travel website-mainly by keeping things powerfully simple.<br />

<a href=&quot;http://hugeinc.com/casestudies/clients.php?ID=9&quot;>View case study</a>

</p>

</li>

…

</ul>

</div>

IE8 WebSlices 06/02/09 HUGE / Microformats /

More… http://microformats.org/ hCalendar hCard rel-license rel-nofollow rel-tag VoteLinks XFN - XFN creator XMDP XOXO … 06/02/09 HUGE / Microformats /

http://microformats.org/

hCalendar

hCard

rel-license

rel-nofollow

rel-tag

VoteLinks

XFN - XFN creator

XMDP

XOXO

…

Bibliography Book: Microformats, Empowering Your Markup for Web 2.0 - John Allsop Book: The Semantic Web - Michael C. Daconta & Leo Joseph Obrst & Kevin T. Smith Site: microformats.org Site: blogs.msdn.com/ie/ 06/02/09 HUGE / Microformats /

Book: Microformats, Empowering Your Markup for Web 2.0 - John Allsop

Book: The Semantic Web - Michael C. Daconta & Leo Joseph Obrst & Kevin T. Smith

Site: microformats.org

Site: blogs.msdn.com/ie/