<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 18: The Semantic Web — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 18</h1>
<h2>The Semantic Web: Metadata & Microformats</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>The Semantic Web:<br>Metadata & Microformats</h1>
<h3>Lecture 18</h3>
<!-- <h4>Reading: 10.3–10.4</h4> -->
<p class="license">
© 2012 Morgan Doocy
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<style type="text/css">
.html5-marker {
height: 1em;
background-color: white;
padding: .15em;
vertical-align: middle;
}
</style>
<div class="slide">
<h1>Attaching custom data: <a href="http://html5doctor.com/html5-custom-data-attributes/"><code>data-*</code></a> attributes <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<div class="example">
<pre class="examplecode html">
<ul id="tas" <em>data-course="info343"</em>>
<li <em>data-section="a" data-netid="stephyma"</em>><a <em>class="email"</em> href="">Stephy Ma</a></li>
<li <em>data-section="b" data-netid="joshv"</em>><a <em>class="email"</em> href="">Josh Villars</a></li>
<li <em>data-section="c" data-netid="sjm15"</em>><a <em>class="email"</em> href="">Steven Markham</a></li>
</ul>
</pre>
<pre class="examplecode js">
<span class="comment">// attach mailto: links to each .email link (spam protection!)</span>
$('#tas a<em>.email</em>').each(function(i, a) {
var li = a.parentNode, ul = li.parentNode;
a.href = 'mailto:' + <em>li.dataset.netid</em> + '@uw.edu?subject=[' +
<em>ul.dataset.course</em> + <em>li.dataset.section</em> + ']';
<span class="comment">// mailto:stephyma@uw.edu?subject=[info343a]</span>
<span class="comment">// mailto:joshv@uw.edu?subject=[info343b]</span>
<span class="comment">// mailto:sjm15@uw.edu?subject=[info343c]</span>
});
</pre>
</div>
<ul>
<li>HTML5 allows for custom attributes prefixed with <code>data-<var>name</var></code></li>
<li>Can set/read these via JS using <code>.dataset.<var>name</var></code> on the DOM object</li>
</ul>
</div>
<div class="slide">
<h1>Parsing JSON with jQuery’s <code>.data()</code> function</h1>
<div class="example" style="font-size: 75%">
<pre class="examplecode html">
<ul id="tooltip"></ul>
<ul id="courses">
<li <em>data-tas='{"matty348": "Matt Shannon", "amckenna": "Andrew McKenna", "gmgillie": "GiGi Gillie"}'</em>
data-course="info343" data-year="2011" data-quarter="aut" <em>data-current="false"</em>>INFO 343 Autumn 2011</li>
<li <em>data-tas='{"stephyma": "Stephy Ma", "sjm15": "Steven Markham", "joshv": "Josh Villars"}'</em>
data-course="info343" data-year="2012" data-quarter="aut" <em>data-current="true"</em>>INFO 343 Autumn 2012</li> </ul>
</pre>
<pre class="examplecode js">
$('#courses li').each(function(i, li) {
$(li).hover(
function(event) { <span class="comment">// Show tooltip with TAs for this quarter</span>
<em>var tas = $(li).data('tas');</em> <span class="comment">// magically an object!</span>
$.each(tas, function(netid, name) {
$('<li>').text(name + '(' + netid + '@uw.edu)').appendTo('#tooltip');
});
if (<em>$(li).data('current')</em>) { <span class="comment">// magically a boolean!</span>
$('#tooltip').addClass('current');
}
$('#tooltip').css({ 'left': event.clientX, 'top': event.clientY }).show();
},
function() { <span class="comment">// Empty and hide tooltip</span>
$('#tooltip').hide().empty().removeClass('current');
}
);
});
</pre>
</div>
<ul>
<li>
jQuery’s <code>.data()</code> function automatically parses <code>data-*</code> as JSON
<ul>
<li>With optional second parameter, can be used to safely attach useful data to DOM objects:<br>
<pre><code>$(<var>elem</var>).data('foo', { "hello": "world" });
alert($(<var>elem</var>).data('foo').hello); <span class="comment">// "world"</span></code></pre>
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Web page metadata:
<a href="http://www.w3schools.com/tags/tag_meta.asp"><code><meta></code></a>
<span class="readingsection">(2.3.3)</span>
</h1>
<p class="description">
information about your page (for a browser, search engine, etc.)
</p>
<pre class="examplecode html">
<<em>meta</em> charset="utf-8"> <span class="comment"><!-- HTML 5 ONLY! --></span>
<<em>meta</em> http-equiv="Content-Type"
content="text/html; charset=utf-8" /> <span class="comment"><!-- XHTML --></span>
<<em>meta</em> name="description"
content="Course web site for INFO 343: Web Programming at the Information School of the University of Washington.">
<<em>meta</em> name="author" content="Morgan Doocy">
<<em>meta</em> name="keywords" content="web programming, web design, informatics">
</pre>
<ul>
<li>placed <strong>in the <code>head</code></strong> section of your HTML page</li>
<li><code>meta</code> tags often have both the <code>name</code> and <code>content</code> attributes
<ul>
<li>some <code>meta</code> tags use the <code>http-equiv</code> attribute instead of <code>name</code> (for HTTP headers)</li>
</ul>
</li>
<li>using a <code>meta</code> tag <code>Content-Type</code> or <code>charset</code> stops browser/validator encoding warnings</li>
<li>search engines sometimes use this data in search results</li>
</ul>
</div>
<div class="slide">
<h1>Microformats: structured data with <code>class</code>, <code>rel</code></h1>
<div class="example">
<pre class="examplecode html">
<small>This article is licensed under a
<a <em>rel="license"</em> href="http://creativecommons.org/licenses/by-nc-sa/2.0/">
Creative Commons Attribution Non-commercial Share-alike
(By-<abbr>NC</abbr>-<abbr>SA</abbr>) license</a>.
</small>
</pre>
</div>
<div class="example">
<pre class="examplecode html">
<p <em>class="vcard"</em>><span <em>class="fn"</em>>Foo Barsofsen</span> —
<a <em>class="url" rel="me"</em> href="http://foo.bar/">http://foo.bar</a>, or
<a <em>class="url" rel="me"</em> href="http://twitter.com/foobar">follow me on Twitter
(@<span <em>class="nickname"</em>>foobar</span>)</a>.</p>
</pre>
</div>
<ul>
<li><strong>Microformats</strong> use agreed-upon values for <em>existing</em> HTML attributes (<code>class</code>, <code>rel</code>, <code>meta</code>) to mark certain types of information</li>
<li>Examples above: <a href="http://microformats.org/wiki/rel-license">rel-license</a>, <a href="http://microformats.org/wiki/hcard">hCard</a>, <a href="http://gmpg.org/xfn/and/#idconsolidation">XFN</a></li>
<li>Others: <a href="http://microformats.org/wiki/hcalendar">hCalendar</a>, <a href="http://microformats.org/wiki/hresume">hRecipe</a>, <a href="http://microformats.org/wiki/hproduct">hProduct</a>, <a href="http://microformats.org/wiki/hreview">hReview</a>, <a href="http://microformats.org/wiki/hresume">hResume</a>, <a href="http://microformats.org/wiki/geo">geo</a></li>
<li>Similar to microdata, but a little more “hackish”</li>
</ul>
</div>
<div class="slide">
<h1>Microdata: structured data with <code>item*</code> attributes</h1>
<div class="example">
<pre class="examplecode html">
<p <em>itemscope itemtype="http://schema.org/Person"</em>>
Hi! My name’s <span <em>itemprop="name"</em>>Foo Barsofsen</span>.
<a <em>itemprop="url"</em> href="http://foo.bar/">My website</a> is really cool.
I published a book! It’s called
<span <em>itemprop="book" itemscope</em> <em>itemtype="http://schema.org/Book"</em>>
<cite <em>itemprop="name"</em>>The Nearness of Foo</cite>
</span>.
</p>
</pre>
</div>
<ul>
<li><strong>Microdata</strong> uses newer <code>item*</code> attributes to mark key/value pairs in HTML.
<ul>
<li><code>itemscope</code> declares an object. (Scopes are nestable.)</li>
<li><code>itemtype</code> links to a schema specifying valid properties for this object.</li>
<li><code>itemprop</code> is a piece of data (“property”) inside the object.</li>
<!-- <li><code>itemid</code> is a global unique identifier for this object (e.g. GUID for people/things, ISBN for books).</li> -->
</ul>
</li>
<li>Can be validated with various tools: <a href="http://validator.nu">Validator.nu</a>, <a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></li>
<li>Similar to microformats, but a little more “official”
<ul>
<li><code>item*</code> are dedicated attributes specifically for defining structured data, rather than “overloading” <code>class</code> and <code>rel</code></li>
</ul>
</li>
<li>Many types of data can be represented using either a microformat or microdata.</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->