Re: RDFa for HTML imagemap accessibility and clipart?

Hi Dan!

Interesting problem indeed. I did a quick sketch and came up with the
following. Given this markup (context implicit):

    <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>

, you'd get N3 like::

    <http://danbri.org/> foaf:primaryTopic _:danbri .

    _:danbri a foaf:Person;
        foaf:name "Dan Brickley" .

    _:the_area
        foaf:depicts _:danbri;
        ex:sourceImage <2169955372_503da8bb51_b.jpg>;
        ex:imageMapAreaElement
        """<area xmlns="http://www.w3.org/1999/xhtml"
                shape="POLY" coords="..."
                href="http://danbri.org/" />"""^^rdf:XMLLiteral .

, which seems to say "this area of the image depicts the person who is
the primaryTopic of that page"..

The result is a bit course grained perhaps, and the markup a bit of a
stretch. The webpage URI is repeated (can't get it from the literal),
and since map allows more than one area element, this usage will break
down beyond this example (only one area used). But I don't think
there's another way of getting at the @coords (and you reasonably need
to keep at least @shape as well).

Here's an alternate version of the markup (not 100% if it's in sync
with the latest spec):

    <div about="[_:danbri]" instanceof="foaf:Person">
        <span property="foaf:name">Dan Brickley</span>
        <a rev="foaf:primaryTopic" href="http://danbri.org/">(website)</a>
        <div rev="foaf:depicts" resource="[_:the_area]">

            <map name="da8bb51_b" id="da8bb51_b"
                property="ex:imageMapAreaElement">
                <area  shape="POLY"
                    coords="..."
                    href="http://danbri.org/" />
            </map>
            <img rel="ex:sourceImage"
                 src="2169955372_503da8bb51_b.jpg"  width="1024" height="770"
                 usemap="#da8bb51_b" />

        </div>
    </div>

This is probably an edge case where RDFa might not be the best
tool(?). I think a dedicated imagemap-GRDDL could be a better fit
(getting at the necessary attribute values and using more fine-grained
properties to describe the "depicting area resource" than I do here).

But to some extent, it does work. :)

Best regards,
Niklas



On Jan 6, 2008 2:55 PM, Dan Brickley <danbri@danbri.org> wrote:
>
> Hi folks
>
> Digging out an old hack here, to see how it looks in the light of RDFa.
>
> I'd like someone to explain to me how current RDFa could be used to
> extract info from imagemap markup. I'll try to find out myself using the
> .js parser, but I'm not currently intimate with the subtle details of
> the spec.
>
> HTML has a somewhat neglected notation for describing regions of images,
> and associating them with links. Here's a picture of me markup up in
> this way, using YokMap, a Shareware MacOSX imagemap editor:
>
> http://danbri.org/2008/imagemap/real.html
>
> The markup is small enough I'll include it inline here:
>
> <map name="da8bb51_b" id="da8bb51_b">
> <area  shape="POLY"
> coords="463,662,450,633,441,604,433,573,429,561,431,542,431,531,439,503,446,487,465,460,476,435,486,407,500,382,511,363,528,348,543,315,549,301,581,288,629,279,652,275,668,275,681,263,693,257,710,250,706,248,700,240,697,221,696,204,691,198,688,186,691,173,693,167,693,158,697,146,699,135,706,128,702,123,709,113,710,104,722,101,723,93,742,93,756,92,766,86,767,93,778,85,803,82,803,88,813,89,813,95,826,104,842,113,853,123,864,145,871,160,879,172,875,176,881,184,879,190,882,199,879,213,877,222,869,229,866,234,859,256,853,267,866,282,875,284,923,283,936,284,941,290,948,295,962,301,969,310,977,328,986,338,990,350,1008,368,1015,373,1021,382,1012,526,1022,744,1007,741,982,721,962,732,949,731,947,767,517,767,520,759,488,720,475,697,466,681"
>
>    href="http://danbri.org/" />
> </map> <img  src="2169955372_503da8bb51_b.jpg"  width="1024"
> height="770" usemap="#da8bb51_b" />
>
> A few years ago, both in the FOAF project and as part of the EU
> SWAD-Europe project some of us were experimenting with using this as
> metadata in RDF, and as something that can be transformed and visually
> presented with SVG.
>
> The core imagemap markup just gives us a slot for an href on the area;
> here I've put my homepage URI (also same as my OpenID URI). 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.
>
> Here is a very basic XSLT by Max Froumentin that transforms
> the above markup into SVG, and shades out the background into pink:
>
> http://danbri.org/2008/imagemap/imagemap2svg.xslt
>
> SVG output is here: http://danbri.org/2008/imagemap/_output.svg
>
> Here's an old screengrab of a big jumble of similar image fragments,
> from RDF/SVG image annotation tools that Jim Ley. Also here's a
> screenshot of Jim's SVG annotator in action, showing that such metadata
> can be created easily in zero-install Web apps.
> http://rdfweb.org/images/foaf/faces-in-the-crowd.jpg
> http://rdfweb.org/images/foaf/codemo/sabrina-libby-nicole-codepiction.jpg
>
> Right now I'm not sure exactly what triples we should be aiming for. I'd
> like a way to say,
>
> "this area of the image depicts the person who is the primaryTopic of
> http://danbri.org/".
>
> There were some #swig collaborations around this vocab a while back (see
> links below), though I don't think the final vocab ever got uploaded to
> http://www.w3.org/2004/02/image-regions  ... in a sense it doesn't
> matter here, since if RDFa can be used freely with this markup, we
> should be able to pick whichever RDF vocab is currently fashionable?
>
> Any help RDFa-ifying http://danbri.org/2008/imagemap/real.html would be
> much appreciated...
>
> Why am I digging this up? Partly because it's time to revisit the
> codepiction project, as a way of encouraging social-network-interop folk
> to consider "evidence-based" as well as claim-based models. But that's
> another story...
>
> cheers,
>
> Dan
>
>
>
> related links:
> http://esw.w3.org/mt/esw/archives/000038.html
> http://www.kanzaki.com/docs/sw/img-annotator.html
> http://jibbering.com/svg/AnnotateImage.html
> http://www.w3.org/2001/sw/Europe/reports/dev_workshop_report_1/
> http://www.mindswap.org/2005/owl/digital-media
> http://www.bnowack.de/w3photo/
> http://www.bnowack.de/w3photo/pages/image_vocabs
> http://www.w3.org/2005/Incubator/mmsem/XGR-vocabularies/
> http://www.wasab.dk/morten/blog/archives/2007/12/09/authorization-by-codepiction
>
>

Received on Sunday, 6 January 2008 18:41:50 UTC