Skip to content

Commit c3daf7f

Browse files
committed
Generated the index-respec and index files for the serialization note. Ready for a PR...
1 parent c70987e commit c3daf7f

File tree

2 files changed

+282
-69
lines changed

2 files changed

+282
-69
lines changed

serialization-html-note/index-respec.html

Lines changed: 68 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@
272272

273273
<p>This Note describes and illustrates potential approaches for including annotations
274274
within HTML documents. Examples also are included illustrating the use within an HTML document
275-
of annotation Selectors as fragment identifiers . (The Working Group's Selectors and States Reference
275+
of annotation Selectors as fragment identifiers. (The Working Group's Selectors and States Reference
276276
Note [[selector-note]] defines the syntax used for Selectors as fragment identifiers.)p>
277277

278278
<p>The approaches described in this document are incomplete and preliminary. They do not exhaust the full range of feasible options.
@@ -299,7 +299,7 @@

Introduction

299299
<p>The Model goes on to define an extensible, interoperable
300300
framework for expressing such annotations in RDF-based vocabularies. The Model additionally defines
301301
a JSON-LD [[json-ld]] serialization of that framework. However, the Model does not prescribe a means for including an
302-
annotation within a Web page (HTML document)--even when the annotation targets all or part of the page itself or
302+
annotation within a Web page (HTML document)even when the annotation targets all or part of the page itself or
303303
all or part of another, external Resource linked from the page.p>
304304

305305
<p>For example, the quotation above is simply an HTML blockquote and contains no encoded reference to the quotation
@@ -310,7 +310,7 @@

Introduction

310310
that references a segment of an HTML document might usefully be embedded within the same or another HTML document.
311311
In addition to text embedded within the DOM, HTML documents often reference external resources such as
312312
images that are meant to be considered integral parts of an HTML Document when viewed on the Web,
313-
e.g., through the use of the HTML <img> element's src attribute. Approaches discussed in this Note
313+
e.g., through the use of the HTML <code><img>code> element's src attribute. Approaches discussed in this Note
314314
would facilitate embedding in HTML an annotation targeting (in the context or scope of a Web page) an image
315315
or other similar Web page component resource external to an HTML document. p>
316316

@@ -440,7 +440,7 @@

Terminology

440440
section>
441441

442442
<section>
443-
<h3>Annotations Embedded as JSON-LDh3>
443+
<h3 id="embed-json-ld">Annotations Embedded as JSON-LDh3>
444444
<p>JSON-LD [[json-ld]] is the serialization format specified in the Web Annotation Data Model [[annotation-model]].
445445
HTML can accommodate this serialization format directly via the use of the HTML <code><script>code> element with its
446446
<code>typecode> attribute assigned the media type for a Web Annotation:
@@ -573,8 +573,6 @@

JSON-LD Example 3

573573
</script>
574574
pre>
575575
section>
576-
577-
<p>p>
578576
section>
579577

580578
<section>
@@ -584,13 +582,15 @@

Annotations Embedded as RDFa

584582
Instead point to the application...

585583

TODO: Summarize comparitive advantages of this approach, e.g., markup of the target with attributes, etc. ...

-->
586584

587-
<p>Another approach of embedding annotations into HTML is to use RDFa [[rdfa-primer]]. The advantage of using RDFa is that the annotation features are mixed with the core HTML content, which means that, for example, the text in the HTML source can be also re-used as an annotation textual body. On the other hand, RDFa itself is an RDF serialization syntax, which means that, instead of the JSON-LD encoding used in the [[annotation-model]] document, the RDF vocabulary described in [[annotation-vocab]] must be used. (This may be an issue for some users.)p>
585+
<p>Another approach of embedding annotations into HTML is to use RDFa [[rdfa-primer]]. The advantage of using RDFa is that the annotation features are mixed with the core HTML content, meaning that, for example, the text in the HTML source can be also re-used as an annotation textual body. In other words, a single resource may become both human visible as well as machine-readable. On the other hand, RDFa is an RDF serialization syntax: the RDF vocabulary described in [[annotation-vocab]] must thefore be used instead of the JSON-LD encoding used in the [[annotation-model]] document. This requirement may be problematic for some users.p>
588586

589587
<h4>Exampleh4>
590588

591-
<p>This example is a significantly simplified version of a more complex application, that uses an RDFa encoding of annotations within the framework for scholarly article authoring and annotation (see <a href="https://github.com/linkeddata/dokieli"> for further detailsa>). The example shows one of the advantages of RDFa: the “Communities have various…” text, while readable when the corresponding HTML page is displayed, automatically provides the textual body of the annotation. However, the relative complexity of mixing complex RDFa structures with HTML makes it more suitable for automatic code generation (e.g., through authoring systems) rather than manual editing.p>
589+
<p>This example is a significantly simplified version of a more complex application that uses an RDFa encoding of annotations within a framework for decentralised article authoring and annotation (see <a href="https://dokie.li/"> for further detailsa>). The example shows one of the advantages of RDFa: the “Communities have various…” text, while readable when the corresponding HTML page is displayed, automatically provides the textual body of the annotation. However, the relative complexity of mixing complex RDFa structures with HTML makes it more suitable for automatic code generation (e.g., through authoring systems) rather than manual editing.p>
590+
591+
<p class="note">The example below assumes that RDFa parsers use the <a href="https://www.w3.org/2011/rdfa-context/rdfa-1.1">RDFa Core Initial Contexta> to understand the predefined prefixes.p>
592592

593-
<pre class="example" title="Simplified dokieli example"><article resource="" typeof="oa:Annotation">
593+
<pre id="dokieli-example" class="example" title="Simplified dokieli example"><article resource="" typeof="oa:Annotation">
594594
<h1 property="schema:name">Sarven Capadisli <span property="oa:motivatedBy"
595595
resource="oa:comments">comments</span></h1>
596596
<dl>
@@ -619,31 +619,31 @@

Example

619619
</dl>
620620
<section rel="oa:hasBody">
621621
<div datatype="rdf:HTML" property="rdf:value" typeof="oa:TextualBody">
622-
...various semantics for the term <em>decentralisation</em>.</div>
622+
Communities have various semantics for the term <em>decentralisation</em>.</div>
623623
</section>
624-
</article>pre>pre>
624+
</article>pre>
625625

626-
<p>This yields, in turtle:p>
626+
<p>This yields, in [[turtle]]:p>
627627

628-
<pre class="example nohighlight turtle" title="dokieli example in Turtle">
628+
<pre id="dokieli-example-turtle" class="example nohighlight turtle" title="dokieli example in Turtle">
629629
<span>span><span class="k">@prefixspan><span class="w"> span><span class="nn">oa:span><span class="w"> span><span class="nv"><http://www.w3.org/ns/oa#>span><span class="w"> span><span class="p">.span><span class="w">span>
630630
<span class="k">@prefixspan><span class="w"> span><span class="nn">schema:span><span class="w"> span><span class="nv"><http://schema.org/>span><span class="w"> span><span class="p">.span><span class="w">span>
631631
<span class="k">@prefixspan><span class="w"> span><span class="nn">rdf:span><span class="w"> span><span class="nv"><http://www.w3.org/1999/02/22-rdf-syntax-ns#>span><span class="w"> span><span class="p">.span><span class="w">span>
632632
<span class="k">@prefixspan><span class="w"> span><span class="nn">rdfs:span><span class="w"> span><span class="nv"><http://www.w3.org/2000/01/rdf-schema#>span><span class="w"> span><span class="p">.span><span class="w">span>
633633
<span class="k">@prefixspan><span class="w"> span><span class="nn">xml:span><span class="w"> span><span class="nv"><http://www.w3.org/XML/1998/namespace>span><span class="w"> span><span class="p">.span><span class="w">span>
634634
<span class="k">@prefixspan><span class="w"> span><span class="nn">xsd:span><span class="w"> span><span class="nv"><http://www.w3.org/2001/XMLSchema#>span><span class="w"> span><span class="p">.span><span class="w">span>
635635

636-
<span class="nv"><https://ex.org/art/>span><span class="w"> span><span class="kt">aspan><span class="w"> span><span class="nn">oa:span><span class="nt">Annotationspan><span class="w"> span><span class="p">;span><span class="w">span>
636+
<span class="nv"><https://example.org/art>span><span class="w"> span><span class="kt">aspan><span class="w"> span><span class="nn">oa:span><span class="nt">Annotationspan><span class="w"> span><span class="p">;span><span class="w">span>
637637
<span class="w"> span><span class="nn">schema:span><span class="nt">namespan><span class="w"> span><span class="s">"Sarven Capadisli comments"span><span class="w"> span><span class="p">;span><span class="w">span>
638638
<span class="w"> span><span class="nn">oa:span><span class="nt">canonicalspan><span class="w"> span><span class="nv"><urn:uuid:5fdc8f8d-5930...>span><span class="w"> span><span class="p">;span><span class="w">span>
639639
<span class="w"> span><span class="nn">oa:span><span class="nt">hasBodyspan><span class="w"> span><span class="p">[span><span class="w">span>
640640
<span class="w"> span><span class="kt">aspan><span class="w"> span><span class="nn">oa:span><span class="nt">TextualBodyspan><span class="w"> span><span class="p">;span><span class="w">span>
641-
<span class="w"> span><span class="nn">rdf:span><span class="nt">valuespan><span class="w"> span><span class="s">"... various semantics for the term <em>decentralisation</em>."span><span class="o">^^span><span class="ge">rdf:HTMLspan><span class="w">span>
641+
<span class="w"> span><span class="nn">rdf:span><span class="nt">valuespan><span class="w"> span><span class="s">"Communities have various semantics for the term <em>decentralisation</em>."span><span class="o">^^span><span class="ge">rdf:HTMLspan><span class="w">span>
642642
<span class="w"> span><span class="p">]span><span class="w"> span><span class="p">;span><span class="w">span>
643-
<span class="w"> span><span class="nn">oa:span><span class="nt">hasTargetspan><span class="w"> span><span class="nv"><http://ex.org/ldn#abstract>span><span class="w"> span><span class="p">;span><span class="w">span>
643+
<span class="w"> span><span class="nn">oa:span><span class="nt">hasTargetspan><span class="w"> span><span class="nv"><http://example.org/art#abstract>span><span class="w"> span><span class="p">;span><span class="w">span>
644644
<span class="w"> span><span class="nn">oa:span><span class="nt">motivatedByspan><span class="w"> span><span class="nn">oa:span><span class="nt">commentsspan><span class="w"> span><span class="p">.span><span class="w">span>
645645

646-
<span class="nv"><http://ex.org/ldn#abstract>span><span class="w"> span><span class="kt">aspan><span class="w"> span><span class="nn">oa:span><span class="nt">SpecificResourcespan><span class="w"> span><span class="p">;span><span class="w">span>
646+
<span class="nv"><http://example.org/art#abstract>span><span class="w"> span><span class="kt">aspan><span class="w"> span><span class="nn">oa:span><span class="nt">SpecificResourcespan><span class="w"> span><span class="p">;span><span class="w">span>
647647
<span class="w"> span><span class="nn">oa:span><span class="nt">hasSelectorspan><span class="w"> span><span class="p">[span><span class="w">span>
648648
<span class="w"> span><span class="kt">aspan><span class="w"> span><span class="nn">oa:span><span class="nt">FragmentSelectorspan><span class="w"> span><span class="p">;span><span class="w">span>
649649
<span class="w"> span><span class="nn">oa:span><span class="nt">refinedByspan><span class="w"> span><span class="p">[span><span class="w">span>
@@ -653,15 +653,59 @@

Example

653653
<span class="w"> span><span class="nn">oa:span><span class="nt">suffixspan><span class="w"> span><span class="s">" Web applications. This permits e"span><span class="w">span>
654654
<span class="w"> span><span class="p">]span><span class="w">span>
655655
<span class="w"> span><span class="p">]span><span class="w"> span><span class="p">;span><span class="w">span>
656-
<span class="w"> span><span class="nn">oa:span><span class="nt">hasSourcespan><span class="w"> span><span class="nv"><http://ex.org/ldn>span><span class="w"> span><span class="p">;span><span class="w">span>
656+
<span class="w"> span><span class="nn">oa:span><span class="nt">hasSourcespan><span class="w"> span><span class="nv"><http://example.org/ldn>span><span class="w"> span><span class="p">;span><span class="w">span>
657657
<span class="w"> span><span class="nn">oa:span><span class="nt">renderedViaspan><span class="w"> span><span class="nv"><https://dokie.li/>span><span class="w"> span><span class="p">.span><span class="w">span>
658658
pre>
659659

660+
<p>Care should be taken, however, that the exact specification of what it means to mix both RDFa and embedded contents within the same HTML file is not (yet) formally specified. Tools that do understand this type p>
660661

661-
section>
662+
<section>
663+
<h4>Mixing RDFa with embedded RDF contenth4>
664+
665+
<p>The approach used in <a href="#embed-json-ld">a> can be combined, within the same HTML content, with the usage of RDFa. It is also possible to use the same approach (i.e., a <code><script>code> element with an appropriate media type) to include RDF using other serializations, most notably Turtle (see <a href="https://www.w3.org/TR/turtle/#in-html">Appendix Aa> of the [[turtle]] specification for more details). I.e, it is possible to modify the <a href="#dokieli-example">dokieli examplea> above as follows:p>
666+
667+
<pre id="dokieli-example-modified" class="example" title="Simplified dokieli example with embedded turtle"><script type="text/turtle">
668+
@prefix oa: <http://www.w3.org/ns/oa#> .
669+
670+
<http://example.org/art#abstract> a oa:SpecificResource ;
671+
oa:hasSelector [
672+
a oa:FragmentSelector ;
673+
oa:refinedBy [
674+
a oa:TextQuoteSelector ;
675+
oa:exact "decentralised" ;
676+
oa:prefix "N provides a building block for " ;
677+
oa:suffix " Web applications. This permits e"
678+
]
679+
] ;
680+
</script>
681+
682+
<article resource="" typeof="oa:Annotation">
683+
<h1 property="schema:name">Sarven Capadisli <span property="oa:motivatedBy"
684+
resource="oa:comments">comments</span></h1>
685+
<dl>
686+
<dt>Canonical</dt>
687+
<dd property="oa:canonical"
688+
resource="urn:uuid:5fdc8f8d-5930...">5fdc8f8d-5930...</dd>
662689

690+
<dt><a href="#abstract" property="oa:hasTarget">In response to</a>
691+
(<a about="#abstract" href="http://example.org/ldn"
692+
property="oa:hasSource" typeof="oa:SpecificResource">part of</a>)</dt>
663693

694+
<dt>Rendered via</dt>
695+
<dd><a about="#abstract" href="https://dokie.li/"
696+
property="oa:renderedVia">dokieli</a></dd>
697+
</dl>
698+
<section rel="oa:hasBody">
699+
<div datatype="rdf:HTML" property="rdf:value" typeof="oa:TextualBody">
700+
Communities have various semantics for the term <em>decentralisation</em>.</div>
701+
</section>
702+
</article>pre>
703+
704+
<p>With an appropriate tools, understanding both RDFa and the embedded Turtle, the results would be identical to <a href="#dokieli-example-turtle">Example 5a>.p>
664705

706+
<p>Care should be taken, however, that the exact details of what it means to mix both RDFa and embedded contents within the same HTML file is not (yet) formally specified. Tools that do understand this type of mix usually parse the various syntaxes into separate RDF Graphs (see [[rdf11-concepts]]) which are then merged following the rules described in the RDF Semantics document [[rdf11-mt]]. This means that, for example, blank nodes are not shared, nor are namespace declarations among the different serializations.p>
707+
section>
708+
section>
665709

666710
<section>
667711
<h3>Web Annotation-based Citation URLsh3>
@@ -670,7 +714,7 @@

Web Annotation-based Citation URLs

670714
examples show how these URLs could be used to reference portions of a Specific Resource on the Web via IRIs:
671715
p>
672716

673-
<h4>Example using <blockquote> and <q> tagsh4>
717+
<h4>Example using <code><blockquote>code> and <code><q>code> tagsh4>
674718

675719
<pre class="example highlight" title="Example blockquote and q tags using the cite attribute">
676720
<blockquote cite="https://www.w3.org/TR/annotation-model/#introduction">
@@ -684,7 +728,7 @@

Example using <blockquote> and <q> tags

684728
<q cite="https://www.w3.org/TR/annotation-model/#selector(type=XPathSelector,value=//*[@id%3D%22introduction%22]/img)">
685729
<img src="images/intro_model.png" alt="Basic Model: Annotation, Body and Target" width="400"/>
686730
</q>
687-
</blockquote>
731+
</blockquote>
688732
pre>
689733

690734
<p>In this example, the <code><blockquote>code>'s <code>citecode> attribute is set to a typical HTML fragment identifier.
@@ -703,7 +747,7 @@

Example using <blockquote> and <q> tags

703747
browser, server, and JavaScript developers may take advantage of these citations identifiers for re-anchoring selection
704748
or extracting (and verifying) quotations made within an HTML document which uses this method.p>
705749

706-
<h4>Example using an <a> tagh4>
750+
<h4>Example using an <code><a>code> tagh4>
707751

708752
<p>Using the same methods described above, <code><a>code> tags may also be used to express a desired highlight or reference. However,
709753
as mentioned above, the use of that fragment within the retrieved resource may vary.p>
@@ -716,7 +760,7 @@

Example using an <a> tag

716760
pre>
717761
section>
718762

719-
<section>
763+
<!-- <section>
720764

Annotations Embedded in HTML as ??? - space for an additional approach

721765

TODO: Describe how Web Annotations can be embedded in HTML using an additional approach?

722766

TODO: Summarize comparitive advantages of this approach, e.g., ...

@@ -727,7 +771,7 @@

Example

727771
728772

TODO: some HTML with ???...

729773
730-
section>
774+
-->
731775

732776

733777
<section>

0 commit comments

Comments
 (0)