Revision 4f9d16b4a1b0bc9c7f31e91ccb340e27f4b5ed9e authored by Eric Prud'hommeaux on 15 January 2023, 17:01:02 UTC, committed by Eric Prud'hommeaux on 15 January 2023, 23:00:04 UTC
1 parent 6f93215
micro-tutorial.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ShEx Micro Tutorial</title>
<meta name="description" content="simple ShEx2 demo" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<style>
h1 { font-size: 1.3em; }
h1, p, ul { margin: 0; margin-left: .1em; }
.passes999 { margin-right: 1em; }
.passes, #results div .passes { padding-left: .1em; border-left: thick solid #bfb; }
.pair.passes { border-left: none; padding-left: none; }
.pair.passes::after { background-color: #bfb; content: "✓"; }
.fails , #results div .fails { padding-left: .1em; border-left: thick solid #fbb; }
.pair.fails { border-left: none; padding-left: none; }
.pair.fails::after { background-color: #fbb; content: "✗"; }
.error , #results div .error { padding-left: .1em; border-left: thick solid #b00; }
/* #inputarea { overflow-x: none; white-space:nowrap; } */
#inputarea textarea { overflow-x: auto }
.schema.textarea, .schema { background-color: #f4f4ff; border: medium solid #e4e4ef; }
#inputSchema li.selected button { background-color: #e8e8ff; }
/* #inputSchema .examples { border: medium solid #e4e4ef; } */
#inputData textarea, .data { background-color: #f4fff4; border: medium solid #e4efe4; font-family: monospace; }
#inputData li.selected button { background-color: #e8ffe8; }
#inputSchema li button, #inputData li button {
font-size: .8em;
padding: 0em 2ex;
border-radius: .5em;
border: thin solid #000;
cursor: pointer;
box-shadow: 0.1em 0px 1em rgba(255, 255, 255, 0.9) inset;
}
#textMap-tab { width: 100%; background-color: #f4ffff; border: medium solid #e4efef; font-family: monospace; }
/* #inputData .examples { border: medium solid #e4efe4; } */
/* .droparea { border-width: .25em; border-style: dashed; }
.droparea.hover, body.hover { border: .25em dashed #0c0; } */
.stoppable { background-color: red; }
#results div:disabled { background-color: #fff; }
#results div { width: 99%; border: none; }
#results.running { padding-left: .1em; border-left: thick solid #779; }
#results div:disabled.passes { color: #373; }
#results div:disabled.fails { color: #733; }
#results div:disabled.error { color: #300; }
#results div.human { margin: 1ex 0; }
#results div.human pre { margin: 0 2em; }
.status { display: none; } /* disable .status 'cause it's redundant against the selected marker. */
#navlist li {
display: inline;
list-style-type: none;
padding-right: 10px;
}
#actions {
/* float:right; */
margin-right: .1em;
}
/* #actions input { height: 1.5ex; } */
/* #actions button { height: 2.5ex; } */
/* http://stackoverflow.com/questions/686905/labeling-file-upload-button#answer-35767488 */
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
label {
/* border: thin solid black; */
padding: 0 .3em;
}
.heading {
font-weight: bold;
}
.panel {
width: 48.5%;
display: inline-block;
margin: 0 .4em;
vertical-align: top;
}
h2.status { margin: 0; }
#addPair, #removePair { text-decoration: none; }
#schemaDialect, #dataDialect { font-size: .7em; }
#shapeMap { padding-left: .25em; }
.pair { list-style-type: none; }
.addPair, .removePair { font-size: 80%; line-height: 1ex; font-family: monospace; }
.pair button {
width: 1em;
padding: .5em 0;
padding-right: .5em; /* for firefox rendering issue */
}
#menuForm > fieldset {
box-shadow: -.3ex .3ex grey;
display: inline;
}
#controls {
position: absolute;
left: 0;
top: 0;
list-style: none;
margin: 0;
display: none;
background: white; opacity: 1;
border: thin solid buttontext;
/* box-shadow: -.3ex .3ex grey; */
}
#controls div {
border: 10px solid buttonface;
}
#controls h3 {
margin: 0;
}
#menu-button { margin-left: 1em; }
#menu-button svg { width: 1em; height: 1.5ex; }
#about {
margin: 3em;
}
#dismiss-about { text-align: center; }
#controls ul { padding-left: 0; margin-left: 0; list-style-type: none; }
#controls li { padding: 0 1em; }
#controls li.menuitem:hover { background-color: buttonface; }
#inputSchema h2 {
/* content: "Schema (ShExC)"; */
background: #f4f4ff;
/* width: 8em; */
}
#inputData h2 {
/* content: "Data (Turtle)"; */
background: #f4fff4;
/* width: 6em; */
}
h2 {
color: #333;
font-size: .6em;
border: 1px solid #bbb;
display: table-cell;
font-family: sans-serif;
padding: 0.2em 1em;
margin: 0;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
padding: 0 .1em;
}
.ui-tabs .ui-tabs-panel {
padding: 0;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-size: small;
}
#textMap {
padding: 0;
border: none;
}
#shapeMap-tabs {
font-family: inherit;
font-size: inherit;
}
.number { font-size: 1.4em; }
.explanation { font-size: 1.4em; }
.new { font-weight: bold; }
button, select { font-size: .8em; }
#inputSchema ul {
padding-left: 2.4em;
}
#inputData ul {
padding-left: 2.1em;
}
.seeAlso { font-size: small; }
</style>
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="https://www.w3.org/scripts/jquery/2.1/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- G10,108 35 44 64 65 88 91 A4,5,14,16 F16,30,32 SL6,18,20,26,30,32 PDF10,12,1,20,42,59,68,79,86,89 -->
<!-- FLASH16,30 -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
<symbol id="down-arrow" viewBox="0 -10 107 63" >
<path d="M 54,40 90,3 C 99,-5 112,8 104,16 L 60,60 c 0,0 -8,6 -14,0 L 3,16 C -5,8 8,-4 15,2 Z" />
</symbol>
</svg>
<div id="title">
<div style="float:left; width: 50%;">
<img src="http://www.w3.org/2015/ShEx-bones-min.svg" style="height:1.3em; padding-left: .3em;" alt="ShEx Icon"/><h1 style="float:left;">ShEx Micro Tutorial</h1>
<div class="seeAlso">
<p>See also:</p>
<ul style="column-count: 2;">
<li><a href="shex-simple">full interface</a></li>
<li><a href="https://www.w3.org/community/shex">ShEx Community Group</a></li>
<li><a href="http://shex.io/shex-primer/">Primer</a></li>
<li><a href="http://shex.io/shex-semantics/">Spec</a></li>
</ul>
</div>
</div>
<div style="float:left; width: 49%">
<p>
<span class="explanation">A <a href="http://shex.io/primer">ShEx</a> <span class="new">schema</span> describes <span class="new">RDF data</span>, commonly for validation.</span>
</p>
<p>
<span class="explanation">It prescribes <span class="new">shapes</span> to which the data must conform.</span>
</p>
</div>
<hr style="clear: both;"/>
</div>
<div id="inputarea">
<div id="inputSchema">
<h2 class="status999">Schema (ShExC)</h2>
<div class="panel">
<textarea rows="25" class="schema droparea" style="width: 100%"></textarea>
</div>
<div class="panel">
<p>
<span class="number">1.</span> <span class="explanation">Pick a schema.</span>
</p>
<br/>
<!-- <h2>Schema examples:</h2> -->
<div class="manifest">
<ul>
<li>Javascript is disabled or slow to load or something went a bit pear-shaped.</li>
</ul>
</div>
<br/>
</div>
</div>
<hr style="clear:both;"/>
<div id="inputData">
<h2 class="status999">Data (Turtle)</h2>
<div class="panel">
<textarea rows="25" class="data droparea" style="width: 100%"></textarea>
</div>
<div class="panel">
<p>
<span class="number">2.</span> <span class="explanation">Pick some RDF data to test.</span>
</p>
<br/>
<!-- <h2>Data examples:</h2> -->
<div class="examples">
<div class="passes">
<p>Data that will pass:</p>
<ul>
<li>(First pick a schema.)</li>
</ul>
</div>
<br/>
<div class="fails">
<p>Data that will fail:</p>
<ul>
<li>(First pick a schema.)</li>
</ul>
</div>
</div>
</div>
</div>
<hr style="clear:both;"/>
<div>
<h2 class="status999"><span class="new">Shape Map</span></h2>
<div class="panel">
<div id="textMap-tab">
<textarea id="textMap" style="width:100%; height:100%;">
</textarea>
</div>
</div>
<div class="panel">
<p>
<span class="number">3.</span> <span class="explanation"> Shape Maps customizably match shapes to data.</span>
</p>
<p class="seealso" style="margin-bottom: 2ex;">
See also <a href="https://shexspec.github.io/ShapeMap/">ShapeMap specification</a>.
</p>
<p>
<span class="number">4.</span> <span class="explanation">Click to <button id="validate">validate</button> with<span class="menuitem">
<label for="interface"></label><select id="interface"><option value="minimal">minimal machine-readable</option><option value="human">human-readable</option><option value="appinfo">verbose machine-readable</option></select>
</span> results.</span>
</div>
</div>
<hr style="clear:both;"/>
</div>
<h2 class="status999">Validation Results</h2>
<div id="results">
<div></div>
</div>
<!--
editMap and fixedMap are used in the validation process
-->
<div style="display:none;">
<ul id="editMap">
</ul>
<ul id="fixedMap">
</ul>
</div>
<script src="../doc/iri.js"></script>
<script>
if (!("captureStackTrace" in Error)) {
Error.captureStackTrace = function () { };
}
</script>
<!-- #if browserify -->
<!-- -->
<script src="../browser/shex-browserify.js"></script>
<!-- -->
<!-- #else -->
<!--
<script src="../doc/require.js" ></script>
<script src="https://rawgit.com/RubenVerborgh/N3.js/main/lib/N3Util.js"></script><script>modules["n3"]["Util"] = modules["./N3Util"] = N3Util = module.exports;</script>
<script src="https://rawgit.com/RubenVerborgh/N3.js/main/lib/N3Lexer.js"></script><script>modules["n3"]["Lexer"] = modules["./N3Lexer"] = N3Lexer = module.exports;</script>
<script src="https://rawgit.com/RubenVerborgh/N3.js/main/lib/N3Parser.js"></script><script>modules["n3"]["Parser"] = N3Parser = module.exports;</script>
<script src="https://rawgit.com/RubenVerborgh/N3.js/main/lib/N3Store.js"></script><script>modules["n3"]["Store"] = N3Store = module.exports;</script>
<script src="https://rawgit.com/RubenVerborgh/N3.js/main/lib/N3Writer.js"></script><script>modules["n3"]["Writer"] = N3Writer = module.exports;</script>
<script src="../lib/ShExUtil.js" ></script><script>modules["./ShExUtil"] = modules["../lib/ShExUtil"] = modules["./lib/ShExUtil"] = modules["../../lib/ShExUtil"] = ShExUtil;</script>
<script>module.exports = exports;</script><script src="../lib/ShExJison.js" ></script><script>modules["./ShExJison"] = module.exports;</script>
<script src="../lib/ShExParser.js" ></script><script>modules["../lib/ShExParser"] = modules["./lib/ShExParser"] = module.exports;</script>
<script src="../lib/ShExWriter.js" ></script><script>modules["./lib/ShExWriter"] = module.exports;</script>
<script src="../node_modules/@shexjs/threaded-val-nerr/threaded-val-nerr.js"></script><script>modules["@shexjs/threaded-val-nerr"] = module.exports;</script>
<script src="../node_modules/@shexjs/eval-simple-1err/eval-simple-1err.js"></script><script>modules["@shexjs/eval-simple-1err"] = module.exports;</script>
<script src="../lib/ShExValidator.js"></script><script>modules["/lib/ShExValidator"] = modules["./lib/ShExValidator"] = ShExValidator = module.exports;</script>
<script src="../lib/ShExLoader.js"></script><script>modules["/lib/ShExLoader"] = modules["./lib/ShExLoader"] = module.exports;</script>
<script src="../shex.js"></script>
-->
<!-- #endif -->
<script src="../doc/ShExRSchema.js"></script>
<script src="./shex-simple.js"></script>
</body>
</html>
Computing file changes ...
