Merge pull request #405 from w3c/citation-urls-improvements

Citation improvements

Author: iherman

serialization-html-note/index-turtle-not-highlight.html

@@ -164,15 +164,15 @@
               rawDate: "2016-04-26",
               status: "Unofficial Draft"
             },
-            "selectors-states": {
+            "selector-note": {
               "authors": [
                  "Ivan Herman",
                  "Robert Sanderson",
                  "Paolo Ciccarese",
                  "Benjamin Young"
               ],
               title: "Selectors and States",
-              href: "http://w3c.github.io/web-annotation/selectors/",
+              href: "http://w3c.github.io/web-annotation/selector-note/",
               publisher: "W3C",
               rawDate: "2017-01-20",
               status: "Reference Note"
@@ -205,7 +205,7 @@
             <p>This Note describes and illustrates potential approaches for including annotations
                 within HTML documents. Examples also are included illustrating the use within an HTML document
                 of annotation Selectors as fragment identifiers . (The Working Group's Selectors and States Reference
-                Note [[selectors-states]] defines the syntax used for Selectors as fragment identifiers.)p>
+                Note [[selector-note]] defines the syntax used for Selectors as fragment identifiers.)p>
 
             <p>The approaches described in this document are incomplete and preliminary. They do not exhaust the full range of feasible options.
                 The approaches discussed in this note have emerged from Working Group discussions and should be considered no more
@@ -597,40 +597,48 @@ Example
 
         <section>
           <h3>Web Annotation-based Citation URLsh3>
-          <p>The Selectors and States Note [[selectors-states]] published by the Web Annotation Working Group includes information on encoding
-              <a data-cite="selectors-states#frags">Web Annotation Selectors and State classes as IRI Fragmenet Identifiersa>. The following
+          <p>The Selectors and States Note [[selector-note]] published by the Web Annotation Working Group includes information on encoding
+              <a data-cite="selector-note#frags">Web Annotation Selectors and State classes as IRI Fragment Identifiersa>. The following
               examples show how these URLs could be used to reference portions of a Specific Resource on the Web via IRIs:
           p>
 
           <h4>Example using <blockquote> and <q> tagsh4>
 
           <pre class="example highlight" title="Example blockquote and q tags using the cite attribute">
-            <blockquote cite="https://www.w3.org/TR/annotation-model/">
+            <blockquote cite="https://www.w3.org/TR/annotation-model/#introduction">
               <q cite="https://www.w3.org/TR/annotation-model/#selector(type=TextPositionSelector,start=8424,end=8270)">
               An annotation is considered to be a set of connected resources, typically including
                a body and target, and conveys that the body is related to the target.</q>
 
               <q cite="https://www.w3.org/TR/annotation-model/#selector(type=TextPositionSelector,start=8651,end=8576)">
               This perspective results in a basic model with three parts, depicted below.</q>
 
-              <!-- TODO: how do we make this an annotation? -->
-              <img src="images/intro_model.png" alt="Basic Model: Annotation, Body and Target" width="400"/>
-            </blockquote>
+              <q cite="https://www.w3.org/TR/annotation-model/#selector(type=XPathSelector,value=//*[@id%3D%22introduction%22]/img)">
+                <img src="images/intro_model.png" alt="Basic Model: Annotation, Body and Target" width="400"/>
+              </q>
+            blockquote>
           pre>
 
-          <p>The Selectors and States Note [[selectors-states]] explains that fragment identifiers are technically defined when the media
+          <p>In this example, the <code><blockquote>code>'s <code>citecode> attribute is set to a typical HTML fragment identifier.
+          The <code><q>code> tags use <code>citecode> attribute values set to Web Annotation Selector Fragment Identifiers—which
+          are convertable into Web Annotation Data Model [[annotation-model]] Selector statements. The <code><img>code> tag is also
+          wrapped in a <code><q>code> as it's location is not directly contained in either of the previously quoted section. However,
+          all of the quotations (within the <code><q>code> tags) exist within the <code>#introductioncode> section referenced
+          by the surrounding <code><blockquote>code>.
+
+          <p>The Selectors and States Note [[selector-note]] explains that fragment identifiers are technically defined when the media
           type is specified. However in practice the utilization of fragment identifiers by publishers and developers ranges from
           browser state handling to anchoring highlights of quotations (as seen here).p>
 
-          <p>Using these fragement identifiers as values of the <code>citecode> attribute on <code><blockquote>code>
+          <p>Using these fragment identifiers as values of the <code>citecode> attribute on <code><blockquote>code>
           and <code><q>code> tags provides a means for both specificity and future extensibility. Site authors as well as
           browser, server, and JavaScript developers may take advantage of these citations identifiers for re-anchoring selection
-          or extracting (and verifying) quotions made within an HTML document which uses this method.p>
+          or extracting (and verifying) quotations made within an HTML document which uses this method.p>
 
           <h4>Example using an <a> tagh4>
 
           <p>Using the same methods described above, <code><a>code> tags may also be used to express a desired highlight or reference. However,
-          as mentioned above, the use of that fragement within the retrieved resource may vary.p>
+          as mentioned above, the use of that fragment within the retrieved resource may vary.p>
 
           <pre class="example highlight" title="Example using an anchor tag">
             <p>According to the Web Annotation Data Model spec