javascript for figcaption and example counter + dm minor edits
authorLuc Moreau <l.moreau@ecs.soton.ac.uk>
Fri, 25 May 2012 09:30:49 +0100
changeset 2977 50afaa10c54f
parent 2976 144c81a55a4b
child 2978 70f3e0d479fd
javascript for figcaption and example counter + dm minor edits
model/extra-dm.css
model/prov-dm.html
--- a/model/extra-dm.css	Fri May 25 08:48:19 2012 +0100
+++ b/model/extra-dm.css	Fri May 25 09:30:49 2012 +0100
@@ -286,6 +286,13 @@
     padding:    3px 1em;
 }
 
+.anexample[count]::before {
+    content: "Example " attr(count) ;
+    font-family: sans-serif;
+    font-size: 1.6ex;
+    font-weight: bold;
+}
+
 .anexample:before {
     content: "Example:";
     font-family: sans-serif;
@@ -306,23 +313,6 @@
     background-color: #f9f9f9;
 }
 
-.conceptexample:before {
-    content: "Example:";
-    font-family: sans-serif;
-    font-size: 1.6ex;
-    font-weight: bold;
-}
-.conceptexample {
-    margin-top: 1ex;
-    margin-bottom: 1ex;
-    padding-left: 1ex;
-    padding-right: 1ex;
-    padding-top: 1ex;
-    padding-bottom: 0.6ex;
-    border: 1px dashed #2f6fab;
-    background-color: #f9f9f9;
-}
-
 .pnExpression {
     font-weight: normal;
     font-size:120%;
--- a/model/prov-dm.html	Fri May 25 08:48:19 2012 +0100
+++ b/model/prov-dm.html	Fri May 25 09:30:49 2012 +0100
@@ -58,10 +58,38 @@
           }
         });
       }
+
+        // function to replace figcaption since not allowed by prov rules, and not transformed by respec.js
+      function updateFigCaptions() {
+        $('figcaption').each(function(index) {
+
+          var myid=$(this).attr('id');
+
+
+          $(this).replaceWith(function(){return $('<div>').addClass('figcaption').attr('id',myid).append($(this).contents())});
+        });
+      }
+
+      function updateExamples() {
+        var count=1;
+        $('.anexample').each(function(index) {
+
+          var myid=$(this).attr('id');
+          var mycount=count++;
+
+          $(this).attr('count', mycount);
+
+          console.log( "example for " + myid + " " + mycount);
+
+        });
+      }
+
       $(document).ready(function(){
         // if glossary is in a string:
         $('#glossary_div').html(glossary_string)
         updateGlossaryRefs();
+        updateFigCaptions();
+        updateExamples();
       });
 
     </script>
@@ -459,12 +487,12 @@
 
 <p>The core of PROV consists of essential provenance structures commonly found in provenance descriptions.
 It is summarized graphically by
-the UML diagram of <a href="#prov-core-structures">Figure 1</a>,
+the UML diagram of <a href="#prov-core-structures-top">Figure 1</a>,
 illustrating  three types (entity, activity, and agent) and how they relate to each other.  In the core of PROV, all associations are binary. </p>
 
 
 <div style="text-align: center; ">
-  <figure style="max-width: 70%; " >
+  <figure style="max-width: 70%; " id="prov-core-structures-top">
 <!--     <img src="../images/OverviewDiagram.png" alt="PROV Core Structures" style="max-width: 70%; "  /> -->
 <img src="uml/essentials.png" alt="PROV Core Structures" style="max-width: 70%; "  />
 <figcaption id="prov-core-structures">Figure 1: PROV Core Structures</figcaption>
@@ -517,9 +545,9 @@
 
 
 <form action="#"><p> 
-<input id="hide-examples" onclick="set_display_by_class('div','conceptexample','none'); set_display_by_id('hide-examples','none'); set_display_by_id('show-examples','');" type="button"
+<input id="hide-examples" onclick="set_display_by_class('div','anexample conceptexample','none'); set_display_by_id('hide-examples','none'); set_display_by_id('show-examples','');" type="button"
 value="Hide Concept Examples" /> 
-<input id="show-examples" onclick="set_display_by_class('div','conceptexample',''); set_display_by_id('hide-examples',''); set_display_by_id('show-examples','none');" style="display: none"
+<input id="show-examples" onclick="set_display_by_class('div','anexample conceptexample',''); set_display_by_id('hide-examples',''); set_display_by_id('show-examples','none');" style="display: none"
 type="button" value="Show Concept Examples" /> 
 </p> 
 </form> 
@@ -542,7 +570,7 @@
 
 
 
-<div class="conceptexample" id="entity-example">
+<div class="anexample conceptexample" id="entity-example">
 <p>An entity may be the document at URI <a href="http://www.bbc.co.uk/news/science-environment-17526723">http://www.bbc.co.uk/news/science-environment-17526723</a>, a file in a file system, a car, or an idea.</p>
 </div>
 
@@ -554,7 +582,7 @@
 
 
 
-<div class="conceptexample" id="activity-example">
+<div class="anexample conceptexample" id="activity-example">
 <p>An activity may be the publishing of a document on the Web, sending a twitter message, extracting metadata embedded in a file, driving a car from Boston to Cambridge, assembling a data set based on a set of measurements, performing a statistical analysis over a data set, sorting news items according to some criteria, running a SPARQL query over a triple store, or editing a file.</p>
 </div>
 
@@ -573,7 +601,7 @@
 
 
 
-<div class="conceptexample" id="generation-example">
+<div class="anexample conceptexample" id="generation-example">
 <p>Examples of generation are the completed creation of a file by a
 program, the completed creation of a linked data set, and the completed
 publication of a new version of a document.
@@ -581,7 +609,7 @@
 
 
 
-<div class="conceptexample" id="usage-example">
+<div class="anexample conceptexample" id="usage-example">
 <p>Usage examples include a procedure beginning to consume an argument, a service starting to read a value on a port, a program beginning to read a configuration
 file, or the point at which an ingredient, such as eggs, is being added in a baking activity. Usage may entirely consume an entity (e.g. eggs are no longer available after being added to
 the mix); in contrast, the same entity may be used multiple times, possibly by different activities (e.g. a file on a file system can be read indefinitely).
@@ -598,7 +626,7 @@
 
 
 
-<div class="conceptexample" id="communication-example">
+<div class="anexample conceptexample" id="communication-example">
 <p>
 The activity of writing a celebrity article was informed by (a
 communication instance) the activity of intercepting voicemails.
@@ -629,7 +657,7 @@
 
 
 
-<div class="conceptexample" id="agent-example">
+<div class="anexample conceptexample" id="agent-example">
 <p>
 Software for checking the use of grammar in a document may be defined as an agent of a document preparation activity;  one can also describe its provenance, including for instance the vendor and the version history. 
 A site selling books on the Web, the services involved in the processing of orders, and the companies hosting them are also agents.
@@ -643,7 +671,7 @@
 
 <div class="glossary-ref" data-ref="glossary-attribution" data-withspan="true"></div>
 
-<div class="conceptexample" id="attribution-example">
+<div class="anexample conceptexample" id="attribution-example">
 <p>A blog post can be attributed to an author, a mobile phone to its manufacturer.</p>
 </div>
 
@@ -657,7 +685,7 @@
 <span class="glossary-ref" data-ref="glossary-core-association"  data-withspan="true"></span>
 </p>
 
-<div class="conceptexample" id="association-example">
+<div class="anexample conceptexample" id="association-example">
 <p>Examples of association between an activity and an agent are:
 <ul>
 <li>creation of a web page under the guidance of a designer;</li>
@@ -675,7 +703,7 @@
 
 
 
-<div class="conceptexample" id="responsibility-example">
+<div class="anexample conceptexample" id="responsibility-example">
 <p>A student publishing a web page describing an academic
 department could result in both the student and the department being
 agents associated with the activity.  It may not matter which actual
@@ -697,7 +725,7 @@
 
 
 
-<div class="conceptexample" id="derivation-example">
+<div class="anexample conceptexample" id="derivation-example">
 <p>Examples of derivation include  the transformation of a relational table into a
 linked data set, the transformation of a canvas into a painting, the transportation of a work of art from London to New York, and a physical transformation such as the melting of ice into water.</p>
 </div>
@@ -773,7 +801,7 @@
 </p>
 
 
-<div class="conceptexample" id="association-example2">
+<div class="anexample conceptexample" id="association-example2">
 <p>An example of association between an activity and an agent involving a plan is:
 an XSLT transform (an activity) launched by a user (an agent) based on an XSL style sheet (a plan).
 
@@ -794,7 +822,7 @@
 more elements.  This optional identifier can then be used to refer to
 an instance as part of other concepts.</p>
 
-<div class="conceptexample" id="identifier-example">
+<div class="anexample conceptexample" id="identifier-example">
 <p>A service may read a same configuration file on two different occasions. Each  usage can be identifed by its own identifier, allowing them to be distinguished. 
 </div>
 
@@ -821,7 +849,7 @@
 <span class="glossary-ref" data-ref="glossary-bundle"  data-withspan="true">
 </span>
 
-<div class="conceptexample" id="bundle-example">
+<div class="anexample conceptexample" id="bundle-example">
 <p>
 For users to decide whether they can place their trust in
 a resource, they may want to analyze the resource's provenance, but also determine
@@ -840,7 +868,7 @@
 <p>
 <span class="glossary-ref" data-ref="glossary-collection"  data-withspan="true"></span> This concept allows for the provenance of the collection itself to be expressed in addition to that of the members.  Many different types of collections exist, such as a <em>sets</em>, <em>dictionaries</em>, or <em>lists</em>, all of which involve a membership relationship between the constituents and the collection. </p>
 
-<div class="conceptexample" id="collection-example">
+<div class="anexample conceptexample" id="collection-example">
 <p>
 An example of collection is an archive of documents. Each document has its own provenance, but the archive itself also has some provenance: who maintained it, which documents it contained at which point in time, how it was assembled, etc. 
 </div>
@@ -964,9 +992,17 @@
 
 
 
-<p>We paraphrase some PROV-DM descriptions, express them with the PROV-N notation, and then depict them with a graphical illustration (see <a href="#prov-a-document1">Figure 1</a>).
+<p>We paraphrase some PROV-DM descriptions, express them with the PROV-N notation, and depict them with a graphical illustration (see <a href="#prov-a-document1-top">Figure 2</a>).
 Full details of the provenance record can be found <a href="examples/w3c-publication3.pn">here</a>.</p>
 
+<div style="text-align: center; ">
+  <figure id="prov-a-document1-top">
+  <img src="images/w3-publication3.png" alt="Provenance of a Document (1)" style="max-width: 98%; "/>
+<figcaption id="prov-a-document1">Figure 2: Provenance of a Document (1)</figcaption>
+  </figure>
+</div>
+
+
 <ul>
 <li>There was a document <span class="name"><a href="http://www.w3.org/TR/2011/WD-prov-dm-20111215">tr:WD-prov-dm-20111215</a></span>, which from the author's perspective was a document in its second version. 
 <pre>
@@ -1013,12 +1049,6 @@
 Derivation, Association typically point leftwards</p>
 
 
-<div style="text-align: center; ">
-  <figure>
-  <img src="images/w3-publication3.png" alt="Provenance of a Document (1)" style="max-width: 98%; "/>
-<figcaption id="prov-a-document1">Figure 2: Provenance of a Document (1)</figcaption>
-  </figure>
-</div>
 
 </section>
 
@@ -1054,7 +1084,16 @@
 </ul>
 
 <p>
-We now paraphrase some PROV descriptions, and express them with the PROV-N notation, and then depict them with a graphical illustration (see <a href="#prov-a-document2">Figure 2</a>). Full details of the provenance record can be found <a href="examples/w3c-publication1.pn">here</a>.
+We now paraphrase some PROV descriptions, and express them with the PROV-N notation, and depict them with a graphical illustration (see <a href="#prov-a-document2-top">Figure 3</a>). Full details of the provenance record can be found <a href="examples/w3c-publication1.pn">here</a>.
+
+<div style="text-align: center;">
+  <figure id="prov-a-document2-top">
+  <img src="images/w3-publication1.png" alt="Provenance of a Document (2)" style="max-width: 90%; "/>
+<figcaption id="prov-a-document2">Figure 3: Provenance of a Document (2)</figcaption>
+  </figure>
+</div>
+
+
 
 <ul>
 <li>There was a document, a working draft (<a href="http://www.w3.org/2001/02pd/rec54#WD">rec54:WD</a>), which is an entity so that we can describe its provenance. Similar descriptions exist for all entities.
@@ -1100,13 +1139,6 @@
 
 
 
-<div style="text-align: center;">
-  <figure id="prov-a-document2-top">
-  <img src="images/w3-publication1.png" alt="Provenance of a Document (2)" style="max-width: 90%; "/>
-<figcaption id="prov-a-document2">Figure 3: Provenance of a Document (2)</figcaption>
-  </figure>
-</div>
-
 
 <p> This simple example has shown a variety of PROV concepts, such as Entity, Agent, Activity, Usage, Generation, Derivation, and Association. In this example, it happens that all entities were already Web resources, with readily available URIs, which we used. We note that some of the resources are public, whereas others have restricted access: provenance statements only make use of their identifiers. If identifiers do not pre-exist, e.g. for activities, then they can be generated, for instance <span class="name">ex:act2</span>, occurring in the namespace identified by prefix <span class="name">ex</span>.  We note that the URI scheme developed by W3C is particularly suited for expressing provenance of these documents, since each URI denotes a specific version of a document. It then becomes easy to relate the various versions with  PROV-DM relations. We note that an Association is a ternary relation (represented by a multi-edge labeled wasAssociatedWith) from an activity to an agent and a plan.</p>
 
@@ -2179,7 +2211,7 @@
 <p>The fourth component of PROV-DM is concerned with
 relations <a>specialization</a> and <a>alternate</a> between entities.
  <a href="#figure-component4">Figure 8</a> depicts
-the fourth component with a single class and two associations.
+the fourth component with a single class and two binary associations.
 </p>
 
 
@@ -2195,7 +2227,7 @@
 
 <p>Two provenance descriptions about the same thing may emphasize differents aspects of that thing.</p>
 <div class="anexample" id="entity-example1">
-<p>User Alice writes an article. In its provenance, she wishes to refer to the precise version of the article with a date-specific URI, as she might edit the article later. Alternatively, user Bob refers to the article in general, independently of its variants over time.</p>
+<p>User Alice writes an article. In its provenance, she wishes to refer to the precise version of the article with a date-specific IRI, as she might edit the article later. Alternatively, user Bob refers to the article in general, independently of its variants over time.</p>
 </div>
 <p>
 The PROV data model introduces relations, called specialization and alternate,
@@ -2211,7 +2243,7 @@
 
 
 <p>
-Examples of constraints  include a time period, an abstraction, and a context associated with the entity.</p>
+Examples of aspects include a time period, an abstraction, and a context associated with the entity.</p>