rdfa_and_html_imagemap.html
14.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "/QA/2006/01/blogstyle.css";
</style>
<meta name="keywords" content='html, html5, rdf, rdfa' />
<meta name="description" content="RDFa is a way to enrich your Web pages with local data. The clear benefit is that your data are in context and then easier to manage. Yesterday, on the RDFa mailing list, Dan Brickley asked how we could use RDFa to extract the information of an HTML imagemap. " />
<meta name="revision" content="$Id: rdfa_and_html_imagemap.html,v 1.42 2011/12/16 03:02:39 gerald Exp $" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />
<title>RDFa and HTML imagemap - W3C Blog</title>
<link rel="start" href="http://www.w3.org/QA/" title="Home" />
<link rel="prev" href="http://www.w3.org/QA/2008/01/tiny-xml-schema-test-suite.html" title="Michael and a tiny XML Schema test suite" />
<link rel="next" href="http://www.w3.org/QA/2008/01/open_data_you_and_me.html" title="Open data, you and me" />
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.w3.org/QA/2008/01/rdfa_and_html_imagemap.html"
trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/124"
dc:title="RDFa and HTML imagemap"
dc:identifier="http://www.w3.org/QA/2008/01/rdfa_and_html_imagemap.html"
dc:subject="HTML"
dc:description="<a href="http://www.w3.org/TR/xhtml-rdfa-primer/">RDFa</a> is a way to enrich your Web pages with local data. The clear benefit is that your data are in context and then easier to manage. Yesterday, on the RDFa mailing list, <a href="http://danbri.org/">Dan Brickley</a> asked how we could use <a href="http://lists.w3.org/Archives/Public/public-rdf-in-xhtml-tf/2008Jan/0027">RDFa to extract the information</a> of an <a href="http://www.w3.org/TR/html4/struct/objects.html#edef-MAP">HTML imagemap</a>. "
dc:creator="Karl Dubost"
dc:date="2008-01-06T20:57:12+00:00" />
</rdf:RDF>
-->
<!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->
</head>
<body class="layout-one-column">
<div id="banner">
<h1 id="title">
<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
W3C Blog
</h1>
</div>
<ul class="navbar" id="menu">
<li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
<li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
<li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
<li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
</ul>
<div id="searchbox">
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
</form>
</div>
<div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->
<p class="content-nav">
<a href="http://www.w3.org/QA/2008/01/tiny-xml-schema-test-suite.html">« Michael and a tiny XML Schema test suite</a> |
<a href="http://www.w3.org/QA/">Main</a>
| <a href="http://www.w3.org/QA/2008/01/open_data_you_and_me.html">Open data, you and me »</a>
</p>
<h2 class="entry-header">RDFa and HTML imagemap</h2>
<div class="entry-body">
<p><a href="http://www.w3.org/TR/xhtml-rdfa-primer/">RDFa</a> is a way to enrich your Web pages with local data. The clear benefit is that your data are in context and then easier to manage. Yesterday, on the RDFa mailing list, <a href="http://danbri.org/">Dan Brickley</a> asked how we could use <a href="http://lists.w3.org/Archives/Public/public-rdf-in-xhtml-tf/2008Jan/0027">RDFa to extract the information</a> of an <a href="http://www.w3.org/TR/html4/struct/objects.html#edef-MAP">HTML imagemap</a>. </p>
<p>Dan says:</p>
<blockquote>
<p>HTML has a somewhat neglected notation for describing regions of images, and associating them with links.</p>
<p>[snip]</p>
<p>BTW I have no idea what the current XHTML 2 and WhatWG/HTML5 folks have planned for these elements. But I think this kind of markup has a lot of potential for making images on the Web more automation friendly.</p>
</blockquote>
<p>For now, <a href="http://www.w3.org/html/wg/html5/#the-map">HTML 5 map element</a> doesn't do better than HTML 4.01 or maybe I have <a href="http://people.w3.org/~cmsmcq/blog/?p=16">missed</a> something.</p>
<p>Max Froumentin had design an <a href="http://danbri.org/2008/imagemap/imagemap2svg.xslt">XSLT</a> which transforms the <a href="http://danbri.org/2008/imagemap/real.html">imagemap</a> code and then convert it to an <a href="http://danbri.org/2008/imagemap/_output.svg">SVG ouput</a> with the background tone down to make the imagemap zone more visible. </p>
<p><img src="http://www.w3.org/QA/2008/01/html-imagemap-svg.jpg" alt="image map and SVG ouput screenshots"/></p>
<p>Dan continue:</p>
<blockquote>
<p>I'd like a way to say, "this area of the image depicts the person who is the primaryTopic of http://danbri.org/".</p>
</blockquote>
<p>A lot of work had been done already in the past on image descriptions with some <a href="http://esw.w3.org/topic/ImageDescriptionRdfExamples">practical examples</a>, but <a href="http://dustfeed.blogspot.com/">Niklas Lindström</a> started to give it a stab. </p>
<pre><code><map name="da8bb51_b" id="da8bb51_b"
about="[_:the_area]"
property="ex:imageMapAreaElement">
<area shape="POLY"
coords="..."
href="http://danbri.org/" />
</map>
<img about="[_:the_area]"
rel="ex:sourceImage"
src="2169955372_503da8bb51_b.jpg"
width="1024" height="770"
usemap="#da8bb51_b" />
<div about="[_:danbri]" instanceof="foaf:Person">
<span property="foaf:name">Dan Brickley</span>
<span rev="foaf:depicts" resource="[_:the_area]"></span>
<a rev="foaf:primaryTopic" href="http://danbri.org/">(website)</a>
</div>
</code></pre>
<ul>
<li>Someone has a better suggestion in RDFa? </li>
<li>Would it be better done in HTML only without breaking previous implementations of HTML 4 imagemap?</li>
</ul>
<p>I see a lot of possibilities in games, identification, education, cartography. fun. fun.</p>
</div>
<div id="more" class="entry-more">
</div>
<p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on January 6, 2008 8:57 PM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/technology/semantic_web/">Semantic Web</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/technology_101/">Technology 101</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/01/rdfa_and_html_imagemap.html">Permalink</a>
| <a href="http://www.w3.org/QA/2008/01/rdfa_and_html_imagemap.html#comments">Comments (2)</a>
| <a href="http://www.w3.org/QA/2008/01/rdfa_and_html_imagemap.html#trackback">TrackBacks (0)</a>
</p>
<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-98527">
<p class="comment-meta" id="c098527">
<span class="comment-meta-author"><strong>Lachlan Hunt </strong></span>
<span class="comment-meta-date"><a href="#c098527">#</a> 2008-01-08</span>
</p>
<div class="comment-bulk">
<p>That entire SVG effect can be done entirely without the RDFa metadata (in fact, it is! [1]), which seems to serve no real purpose at all. It would help if you demonstrated some killer app that actually <em>uses</em> the metadata for something. IMHO, the RDFa just adds unnecessary complexity to an otherwise cool technique.</p>
<p>[1] <a href="http://danbri.org/2008/imagemap/_output.svg" rel="nofollow">http://danbri.org/2008/imagemap/_output.svg</a></p>
</div>
</div>
<div class="comment" id="comment-101423">
<p class="comment-meta" id="c101423">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c101423">#</a> 2008-01-14</span>
</p>
<div class="comment-bulk">
<p>Hi Lachlan,</p>
<p>The entire SVG effect can be done <strong>indeed</strong> without the RDFa metadata, <strong>but</strong> that was not the purpose of this message and then your comment. The SVG effect was just a visualization of a concept. How do we identify objects in an image? </p>
<p>So let's say I have done an HTML imagemap which creates one or more areas for a given image. Let's say a world map image with countries, and that I want to associate with these areas with a precise identifier (concept). It could be something which relates to the country with more information. An educative tool then can associate areas of an image with their concepts. In education areas, I see thousands of possibilities. Another use case would be in a system where you want to identify people in a photo, either to track them or either to respect their privacy. This image contains the face of Lachlan. Lachlan has specified elsewhere that he doesn't want his image shared with this or that context. The software can then blurred or remove the person in this image. Advertisement would be another possibility. etc.</p>
<p>Note also that the end of the blog post, but maybe you didn't have time to read that far, talked about RDFa <strong>or</strong> an only HTML solution. Reading is quick, understanding takes a bit more time, but the pleasure is deeper.</p>
</div>
</div>
<div class="comments-open" id="comments-open">
<h3 class="comments-open-header">Leave a comment</h3>
<div class="comments-open-moderated">
<p>
Note: this blog is intended to foster <strong>polite
on-topic discussions</strong>. Comments failing these
requirements and spam will not get published. Please,
enter your real name and email address. Every
individual comment is reviewed by the W3C staff.
This may take some time, thank you for your patience.
</p>
<p>
You can use the following HTML markup (a href, b, i,
br/, p, strong, em, ul, ol, li, blockquote, pre)
and/or <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
</div>
<div id="comments-open-data">
<form method="post" action="http://www.w3.org/QA/sununga/beach.pl" id="comments-form">
<h4>Your comment</h4>
<div id="comments-open-text">
<textarea id="comment-text" name="text" rows="20" cols="100"></textarea><br />
<label for="comment-text">Write your comment text here. Remember, keep the discussion on topic and courteous.</label>
</div>
<h4>About you</h4>
<div id="comment-form-name">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="134" />
<input type="hidden" name="__lang" value="en" />
<label for="comment-author">Your Name</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">Your Email Address</label>
<input id="comment-email" name="email" size="30" value="" />
</div>
<div id="comments-open-footer">
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />
</div>
</form>
</div>
</div>
<p id="gentime">This page was last generated on $Date: 2011/12/16 03:02:39 $</p>
</div><!-- End of "main" DIV. -->
<address>
This blog is written by W3C staff and working group participants,<br />
and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
</address>
<p class="copyright">
<a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1994-2011
<a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>®
(<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
<a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
<a href="http://www.keio.ac.jp/">Keio</a>),
All Rights Reserved.
W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
<a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
rules apply. Your interactions with this site are in accordance
with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
<a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
statements.
</p>
</body>
</html>