--- a/index.html Tue Jun 11 11:35:55 2013 +0530
+++ b/index.html Sun Jun 16 23:36:14 2013 +0530
@@ -1,224 +1,138 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
- "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
-<html version="XHTML+RDFa 1.0" xmlns="http://www.w3.org/1999/xhtml"
- xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#"
- xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
- xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
- xmlns:dcterms="http://purl.org/dc/terms/"
- xmlns:vcard="http://www.w3.org/2006/vcard/ns#"
- xmlns:v="http://rdf.data-vocabulary.org/#">
+<!DOCTYPE html>
+<html version="HTML+RDFa 1.1"
+ prefix="
+ xhv: http://www.w3.org/1999/xhtml/vocab#
+ xsd: http://www.w3.org/2001/XMLSchema#
+ rdfs: http://www.w3.org/2000/01/rdf-schema#
+ dc: http://purl.org/dc/terms/
+ vcard: http://www.w3.org/2006/vcard/ns#
+ v: http://rdf.data-vocabulary.org/#"
+ lang="en" >
<head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JSON-LD - JSON for Linking Data</title>
- <link href="site.css" rel="stylesheet" type="text/css" />
+
+ <!-- Lé Meta Tags -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="Vikash Agrawal">
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+
+ <!-- Lé Style Sheets -->
+ <link rel="stylesheet" type="text/css" href="static/css/bootstrap/bootstrap.css">
+ <link rel="stylesheet" type="text/css" href="static/css/bootstrap/bootstrap-responsive.css">
+ <link rel="stylesheet" type="text/css" href="static/css/bootstrap/font-awesome.css">
<link rel="shortcut icon" href="favicon.ico" />
+
+ <!-- Lé script tags -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-40462488-1', 'json-ld.org');
+ ga('send', 'pageview');
+ </script>
+
</head>
<body>
- <div id="container">
- <div id="header">
- <span class="col">
- <img class="banner" src="images/json-ld-logo-1.png" />
- <img class="banner" src="images/json-ld-logo-2.png" />
- <img class="banner" src="images/json-ld-logo-3.png" />
- <h1>JSON for Linking Data</h1>
- </span>
- </div>
-
- <div id="content">
- <div id="info">
- <p class="tagline">Data is messy and disconnected. JSON-LD
- organizes and connects it, letting your creativity bloom.
- </p>
-
- </div>
-
- <div id="introduction">
- <h1>Introduction</h1>
-
- <p>JSON-LD (<strong>J</strong>ava<strong>S</strong>cript
- <strong>O</strong>bject <strong>N</strong>otation for
- <strong>L</strong>inking <strong>D</strong>ata) is a
- lightweight
- <a href="http://en.wikipedia.org/wiki/Linked_data">Linked Data</a>
- format that gives your data context. It is easy for humans to read
- and write. It is easy for machines to parse and generate. It is
- based on the already successful
- <a href="http://json.org/">JSON format</a> and provides a way
- to help JSON data interoperate at Web-scale. If you are already
- familiar with JSON, writing JSON-LD is very easy. These
- properties make JSON-LD an ideal Linked Data interchange language
- for JavaScript environments, Web service, and unstructured
- databases such as CouchDB and MongoDB.</p>
-
- <p>A simple example of a JSON object expressing Linked Data:</p>
- <pre>
-{
- "@context": "http://json-ld.org/contexts/person.jsonld",
- "@id": "http://dbpedia.org/resource/John_Lennon",
- "name": "John Lennon",
- "born": "1940-10-09",
- "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
-}</pre>
-
- <p>The example above describes a person whose name is
- <em>John Lennon</em>. The difference between regular JSON and
- JSON-LD is that the JSON-LD object above uniquely identifies
- itself on the Web and can be used, without introducing ambiguity,
- across every Web site, Web service and JSON-based database in
- operation today. The secret lies in the @context, which instructs
- Linked Data-aware processors on how to interpret the JSON
- object.</p>
- </div>
-
- <div id="playground">
- <h1>The Playground</h1>
- <p>You can use the <a href="playground/">Playground</a>
- to try out JSON-LD in your web browser or to debug your
- own JSON-LD markup.</p>
- </div>
-
- <!--
- <div id="primer">
- <h1>The Primer</h1>
- <p>An introduction to the principles of JSON-LD and examples of
- how it can be used is available in the
- <a href="primer/latest/">latest JSON-LD primer</a>.
- <a href="primer/">Previous primer versions</a> are also
- available.</p>
- </div>
- -->
-
- <div id="spec">
- <h1>The Specifications</h1>
- <p>Specifications and requirements are available for the JSON-LD Syntax, API, and Framing as well as for RDF Graph Normalization. The latest drafts previous versions are available.</p>
- <ul>
- <li>Latest Drafts
- <ul>
- <li><a href="spec/latest/">specifications</a></li>
- <li><a href="requirements/latest/">requirements</a></li>
- </ul>
- </li>
- <li>Previous Drafts
- <ul>
- <li><a href="spec/">specifications</a></li>
- <li><a href="requirements/">requirements</a></li>
- </ul>
- </li>
- </ul>
- </div>
-
- <div id="issues">
- <h1>Community Feedback</h1>
- <p>The JSON-LD specifications are undergoing standardization at the World Wide Web Consortium. Comments from the public are being tracked via the JSON-LD issue tracker. These issues can be viewed below:</p>
- <ul>
- <li><a href="https://github.com/json-ld/json-ld.org/issues?milestone=2&page=1&sort=created&state=open">Open JSON-LD 1.0 Syntax issues</a></li>
- <li><a href="https://github.com/json-ld/json-ld.org/issues?milestone=1&page=1&sort=created&state=open">Open JSON-LD 1.0 API issues</a></li>
- </ul>
- </div>
+ <div class="navbar navbar-static-top">
+ <div class="navbar-inner">
+ <div class="row-fluid">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href=""><img src="images/json-ld-data-24.png"> JSON-LD</a>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li><a href="#"><span class="icon-beer"></span> Play</a></li>
+ <li><a href="#"><span class="icon-book"></span> Documentation</a></li>
+ <li><a href="#"><span class="icon-beaker"></span> Tools</a></li>
+ <li><a href="#"><span class="icon-group"></span> Developers</a></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
- <div id="impl">
- <h1>Implementations</h1>
- <ul>
- <li>C++
- <ul>
- <li><a href="https://github.com/digitalbazaar/monarch">Monarch</a></li>
- </ul>
- </li>
- <li>Erlang
- <ul>
- <li><a href="https://github.com/nrdufour/urdf">URDF</a></li>
- </ul>
- </li>
- <li>Java
- <ul>
- <li><a href="https://github.com/jsonld-java/jsonld-java">JSON-LD implementation for Java</a></li>
- </ul>
- </li>
- <li>JavaScript
- <ul>
- <li><a href="https://github.com/digitalbazaar/jsonld.js">jsonld.js</a></li>
- </ul>
- </li>
- <li>PHP
- <ul>
- <li><a href="https://github.com/digitalbazaar/php-json-ld">php-json-ld</a></li>
- <li><a href="http://m.lanthi.com/json-ld">JsonLD</a></li>
- </ul>
- </li>
- <li>Python
- <ul>
- <li><a href="https://github.com/bradleypallen/json_ld_processor">JSON-LD Processor</a></li>
- <li><a href="https://github.com/digitalbazaar/pyld">PyLD</a></li>
- </ul>
- </li>
- <li>Ruby
- <ul>
- <li><a href="https://github.com/ruby-rdf/json-ld/">JSON-LD Reader/Writer</a></li>
- </ul>
- </li>
- </ul>
- </div>
-
- <div id="colab">
- <h1>Collaborating</h1>
- <p>Several parties interested in JSON-LD convene in periodic teleconferences.</p>
- <p>There are several other ways that you can collaborate in the development
- of JSON-LD:</p>
+ <div class="hero-unit">
+ <h1>JSON-Linked Data</h1>
+ <br>
+ <p class="tagline">Data is messy and disconnected. JSON-LD organizes and connects it, letting your creativity bloom</p>
+ <br>
+ <div id="social">
+ <span>
+ <iframe src="http://ghbtns.com/github-btn.html?user=json-ld&type=follow"
+ allowtransparency="true" frameborder="0" scrolling="0" width="130" height="20"></iframe>
+ <iframe id="gh-fork" src="http://ghbtns.com/github-btn.html?user=json-ld&repo=json-ld.org&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
+ <iframe id="gh-star" src="http://ghbtns.com/github-btn.html?user=json-ld&repo=json-ld.org&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="20px"></iframe>
+ </span>
+ </div>
+ </div>
- <ul>
- <li>Code: <a href="http://github.com/json-ld/json-ld.org">github</a></li>
- <li>Meeting Records: <a href="minutes/">text and audio logs</a>
- <li>Mailing List: <a href="http://lists.w3.org/Archives/Public/public-linked-json/">public-linked-json@w3.org</a></li>
- <li>IRC: <a href="http://webchat.freenode.net/?channels=#json-ld">#json-ld</a> on Freenode</li>
- <li>W3C: Join the <a href="http://www.w3.org/community/json-ld/">Community Group</a>
- </ul>
-
- <p>You can show your JSON-LD support with a variety of images:</p>
- <ul>
- <li><a href="images/">Logos, Buttons, and Icons</a></li>
- </ul>
- </div>
- <div id="publ">
- <h1>Publications / Articles</h1>
- <ul>
- <li><a href="http://m.lanthi.com/www2013-paper">Creating 3rd Generation Web APIs with JSON-LD and Hydra</a>, Markus Lanthaler.
- Proceedings of the Proceedings of the 22nd International World Wide Web Conference (WWW2013), pp. 35-37.
- Rio de Janeiro, Brazil: ACM Press.</li>
- <li><a href="http://m.lanthi.com/wsrest2013-paper">Model Your Application Domain, Not Your JSON Structures</a>, Markus Lanthaler and Christian Gütl.
- Proceedings of the 4th International Workshop on RESTful Design (WS-REST 2013) at WWW2013, pp. 1415-1420.
- Rio de Janeiro, Brazil: ACM Press.</li>
- <li><a href="http://m.lanthi.com/ldow2013-paper">Hydra: A Vocabulary for Hypermedia-Driven Web APIs</a>, Markus Lanthaler and Christian Gütl.
- Proceedings of the 6th Workshop on Linked Data on the Web (LDOW2013) at WWW2012. Rio de Janeiro.</li>
- <li><a href="http://m.lanthi.com/jsonld4rest-paper">On Using JSON-LD to Create Evolvable RESTful Services</a>, Markus Lanthaler and Christian Gütl.
- Proceedings of the 3rd International Workshop on RESTful Design (WS-REST 2012) at WWW2012, pp. 25-32.
- Lyon, France: ACM Press.</li>
- </ul>
+ <div class="container">
+ <div class="row">
+ <div class="span4">
+ <h2><span class="icon-exchange"></span> Linked Data</h2>
+ <p class="text-justify">
+ Linked data describes a method of publishing structured data so that it can be interlinked and become more useful. It builds upon standard Web technologies such as HTTP, RDF and URIs, but rather than using them to serve web pages for human readers, it extends them to share information in a way that can be read automatically by computers. <a href="http://www.w3.org/People/Berners-Lee/">Sir. Tim Berners-Lee</a> coined this term.
+ </p>
+ <a class="btn" href="http://en.wikipedia.org/wiki/Linked_data">Learn more »</a>
+ </div> <!-- Lé End span -->
+
+ <div class="span4">
+ <h2><span><img src="images/json-ld-data-32.png"></span> JSON-LD</h2>
+ <p class="text-justify">
+ JSON-LD is a lightweight Linked Data format that gives a data context. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on the already successful JSON format and provides a way to help JSON data interoperate at Web-scale. This makes JSON-LD an ideal interchange language for JavaScript environments, Web service, and unstructured databases such as CouchDB and MongoDB.
+ </p>
+ <!-- <a class="btn" href="#">Learn more »</a> -->
+ </div> <!-- Lé End span -->
- <h1>Presentations</h1>
- <ul>
- <li><a href="http://slidesha.re/sl-portland2013">Building Next-Generation Web APIs with JSON-LD and Hydra</a> by Markus Lanthaler, Symfony Live Portland 2013, OR, USA.</li>
- <li><a href="http://slidesha.re/wsrest2013-preso">Model Your Application Domain, Not Your JSON Structures</a> by Markus Lanthaler, World Wide Web Conference (WWW2013), Rio de Janeiro, Brazil.</li>
- <li><a href="http://slidesha.re/ldow2013-preso">Hydra: A Vocabulary for Hypermedia-Driven Web APIs</a> by Markus Lanthaler, World Wide Web Conference (WWW2013), Rio de Janeiro, Brazil.</li></li>
- <li><a href="http://www.youtube.com/watch?v=vioCbTo3C-4">What is JSON-LD?</a> Short video introduction to JSON-LD by Manu Sporny.</li>
- <li><a href="http://www.slideshare.net/gkellogg1/json-for-linked-data">JSON-LD: JSON for Linked Data</a> by Gregg Kellogg, Semantic Technology & Business Conference (SemTechBiz SF 2012), San Francisco, CA, USA.</li>
- <li><a href="http://slidesha.re/jsonld4rest">JSON-LD for RESTful Services</a> by Markus Lanthaler, World Wide Web Conference (WWW2012), Lyon, France.</li>
- <li><a href="http://www.slideshare.net/gkellogg1/jsonld-and-mongodb">JSON-LD and MongoDB</a> by Gregg Kellogg, NoSQL Now! 2012, San Jose, CA, USA.</li>
- </ul>
-
- </div>
+ <div class="span4">
+ <h2><span class="icon-github-alt icon-large"></span> Contribute</h2>
+ <p class="text-justify">
+ <a href="http://www.w3.org/TR/json-ld/">JSON-LD</a> is going through the final stages of standardization at W3C and is being more actively developed than RDFa. The Github repository for JSON-LD can be found <a href="http://github.com/json-ld">here</a>. Developers can contribute and discuss on <a href="http://lists.w3.org/Archives/Public/public-linked-json/">mailing-list</a>. <a href="http://webchat.freenode.net/?channels=#json-ld">#JSON-LD</a> is the offical IRC channel on Freenode. Join the W3C <a href="http://www.w3.org/community/json-ld/">Community Group</a>. Weekly Meeting records in <a href="http://json-ld.org/minutes/">text and audio logs.</a>
+ </p>
+ <!-- <a class="btn" href="#">Learn more »</a> -->
+ </div> <!-- Lé End span -->
+
+ </div> <!-- Lé End Row -->
+ <hr>
- </div>
+ <div class="row">
- <div id="footer">
- <p id="copyright">
- Website content released under a <a href="http://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a> except where an alternate is specified.
+ <div class="span4">
+ <h2><span class="icon-pencil"></span> Learn</h2>
+ <p class="text-justify">
+ There are a number of good reads available on this website covering everything from basic JSON-LD usage, to markup recipes, to advanced technical concepts.
</p>
- <p id="legal">
- Part of the <a href="http://payswarm.com/">payswarm.com</a> initiative.
+ <a class="btn" href="./learn.html">Learn more »</a>
+ </div> <!-- Lé End span -->
+
+ <div class="span4">
+ <h2><span class="icon-beer icon-large"></span> Play</h2>
+ <p class="text-justify">
+ A <em>beta</em> software to visually understand JSON-LD from existing JSON. This is based on contexts declared in <a href="http://schema.org">Schema.org</a>
</p>
- </div>
- </div>
+ <a class="btn" href="./playground/">Learn more »</a>
+ </div> <!-- Lé End span -->
+
+ <div class="span4">
+ <h2><span class="icon-beaker icon-large"></span> Tools</h2>
+ <p class="text-justify">
+ There are a variety of tools available for JSON-LD, ranging from online structured data preview tools, to JSON to JSON-LD creator and software libraries.
+ </p>
+ <a class="btn" href="#">Learn more »</a>
+ </div> <!-- Lé End span -->
+
+ </div> <!-- Lé End Container -->
+ <hr>
+ <!-- Lé script tags -->
+ <script type="text/javascript" src="static/js/bootstrap/bootstrap.js"></script>
</body>
-</html>
+</html>
\ No newline at end of file
--- a/playground/index.html Tue Jun 11 11:35:55 2013 +0530
+++ b/playground/index.html Sun Jun 16 23:36:14 2013 +0530
@@ -1,17 +1,30 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
- "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
-<html version="XHTML+RDFa 1.0" xmlns="http://www.w3.org/1999/xhtml"
- xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#"
- xmlns:dcterms="http://purl.org/dc/terms/">
+<!DOCTYPE html>
+<html version="HTML+RDFa 1.1"
+ prefix="
+ xhv: http://www.w3.org/1999/xhtml/vocab#
+ xsd: http://www.w3.org/2001/XMLSchema#
+ rdfs: http://www.w3.org/2000/01/rdf-schema#
+ dc: http://purl.org/dc/terms/
+ vcard: http://www.w3.org/2006/vcard/ns#
+ v: http://rdf.data-vocabulary.org/#"
+ lang="en" >
<head>
+ <title>JSON-LD - JSON for Linking Data</title>
+
+ <!-- Lé Meta Tags -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="Vikash Agrawal">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <title>The JSON-LD Playground</title>
- <link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css" />
- <link rel="stylesheet" href="../site.css" type="text/css" />
+
+ <!-- Lé Style Sheets -->
+ <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap.css">
+ <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap-responsive.css">
+ <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/font-awesome.css">
<link rel="stylesheet" href="../common/prettify.css" type="text/css" />
- <link rel="stylesheet" href="playground.css" type="text/css" />
<link rel="shortcut icon" href="../favicon.ico" />
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
+ <!-- Lé script tags -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js_beautify.js"></script>
<script type="text/javascript" src="../common/prettify.js"></script>
@@ -21,87 +34,151 @@
<script type="text/javascript" src="jsonld.js"></script>
<script type="text/javascript" src="playground.js"></script>
<script type="text/javascript" src="playground-examples.js"></script>
+
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-40462488-1', 'json-ld.org');
+ ga('send', 'pageview');
+ </script>
+
</head>
<body onload="playground.init();">
- <div id="container">
- <div id="header">
- <span class="col">
- <img class="banner" src="../images/json-ld-logo-1.png" />
- <img class="banner" src="../images/json-ld-logo-2.png" />
- <img class="banner" src="../images/json-ld-logo-3.png" />
- <h1 property="dcterms:title">Playground</h1>
- </span>
- </div>
-
- <div id="content">
- <div class="breadcrumbs"><a href="../">JSON-LD</a> > Playground</div>
- <div id="info hidden">
- <p>Play around with JSON-LD markup by typing out
- some JSON below and seeing what gets generated from it at the
- bottom of the page. Pick any of the examples below to get started.
- The <a href="http://json-ld.org/spec/latest/">specification</a>
- is a work in progress.
- </div>
-
- <ul id="examples">
- <li class="button-list">Simple Examples:</li>
- <li class="button"><span>Person</span></li>
- <li class="button"><span>Event</span></li>
- <li class="button"><span>Place</span></li>
- <li class="button"><span>Product</span></li>
- <li class="button"><span>Recipe</span></li>
- <li class="button-list">Framing Examples:</li>
- <li class="button"><span>Library</span></li>
- </ul><br />
+ <div class="navbar navbar-static-top">
+ <div class="navbar-inner">
+ <div class="row-fluid">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href=""><img src="../images/json-ld-data-24.png"> JSON-LD</a>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#"><span class="icon-beer"></span> Play</a></li>
+ <li><a href="#"><span class="icon-book"></span> Documentation</a></li>
+ <li><a href="#"><span class="icon-beaker"></span> Tools</a></li>
+ <li><a href="#"><span class="icon-group"></span> Developers</a></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
- <div id="markup-container">
- <div class="input-header">
- <span class="left">JSON-LD Input</span>
- <span id="param-type" class="right">JSON-LD Context</span>
- </div>
- <textarea id="markup" class="compressed process"
- placeholder="Enter your JSON-LD markup here..."></textarea>
- <textarea id="context" class="compressed process"
- placeholder="Enter your JSON-LD context here..."></textarea>
- <textarea id="frame" class="compressed process hidden"
- placeholder="Enter your JSON-LD frame here..."></textarea>
- </div>
-
- <div id="permalink"></div>
-
- <div id="markup-errors" class="errors"></div>
-
- <div id="param-errors" class="errors"></div>
-
- <div id="processing-errors" class="errors"></div>
- <div id="tabs">
- <ul>
- <li><a id="tab-compacted"
- href="#compacted"><span>Compacted</span></a></li>
- <li><a id="tab-expanded"
- href="#expanded"><span>Expanded</span></a></li>
- <li><a id="tab-flattened"
- href="#flattened"><span>Flattened</span></a></li>
- <li><a id="tab-framed"
- href="#framed"><span>Framed</span></a></li>
- <li><a id="tab-nquads"
- href="#nquads"><span>N-Quads</span></a></li>
- <li><a id="tab-normalized"
- href="#normalized"><span>Normalized</span></a></li>
- </ul>
- <pre id="compacted" class="prettyprint lang-jsonld"></pre>
- <pre id="expanded" class="prettyprint lang-jsonld"></pre>
- <pre id="flattened" class="prettyprint lang-jsonld"></pre>
- <pre id="framed" class="prettyprint lang-jsonld"></pre>
- <pre id="nquads" class="prettyprint lang-nquads"></pre>
- <pre id="normalized" class="prettyprint lang-jsonld"></pre>
+ <div class="container">
+ <br>
+
+ <h2>JSON-LD Playground</h2>
+
+ <br>
+
+ <div id="info">
+ <p class="alert alert-warning">
+ WARNING: This is <em>beta</em> software, there are
+ <a href="https://github.com/json-ld/json-ld.org/issues">bugs</a>.
+ This tool is not yet ready for production use. That said, it's
+ pretty useful already, and the bugs preventing production use will
+ be sorted out soon.
+ </p>
+ </div>
+
+ <br>
+
+ <blockquote>Play around with JSON-LD markup by typing out
+ some JSON below and seeing what gets generated from it at the
+ bottom of the page. Pick any of the examples below to get started.
+ The <a href="http://json-ld.org/spec/latest/">specification</a>
+ is a work in progress.
+ </blockquote>
+
+ <br>
+
+ <div class="btn-group" data-toggle="buttons-radio">
+ <button class="btn disabled btn-primary">Examples:</button>
+ <button id="btn-person" class="btn button"><span>Person</span></button>
+ <button id="btn-event" class="btn button"><span>Event</span></button>
+ <button id="btn-place" class="btn button"><span>Place</span></button>
+ <button id="btn-product" class="btn button"><span>Product</span></button>
+ <button id="btn-recipe" class="btn button"><span>Recipe</span></button>
+ <button id="btn-library" class="btn button"><span>Library</span></button>
+ </div>
+
+ <br><br>
+
+ <div id="markup-container" class="">
+ <div class="row">
+ <div class="span4">
+ <h3>JSON-LD Input</h3>
+ <textarea id="markup" class="compressed process span4"
+ placeholder="Enter your JSON-LD markup here..." rows="10"></textarea>
</div>
+ <div class="span4">
+ <h3>JSON-LD Context</h3>
+ <textarea id="context" class="compressed process span4"
+ placeholder="Enter your JSON-LD context here..." rows="10"></textarea>
+ </div>
+ <div class="span4">
+ <h3>JSON-LD Frame</h3>
+ <textarea id="frame" class="compressed process span4"
+ placeholder="Enter your JSON-LD frame here..." rows="10"></textarea>
+ </div>
+ </div>
+ </div>
- </div>
+ <br>
- <div id="footer">
+ <div id="permalink"></div>
+
+ <br>
+
+ <div id="markup-errors" class="text-error"></div>
+
+ <br>
+
+ <div id="param-errors" class="text-error"></div>
+
+ <div id="processing-errors" class="text-error"></div>
+
+ <div id="tabs">
+ <div class="tabbable">
+ <ul class="nav nav-tabs">
+ <li class="active"><a id="tab-compacted" href="#pane1" data-toggle="tab"><span>Compacted</span></a></li>
+ <li><a id="tab-expanded" href="#pane2" data-toggle="tab"><span>Expanded</span></a></li>
+ <li><a id="tab-flattened" href="#pane3" data-toggle="tab"><span>Flattened</span></a></li>
+ <li><a id="tab-framed" href="#pane4" data-toggle="tab"><span>Framed</span></a></li>
+ <li><a id="tab-nquads" href="#pane5" data-toggle="tab"><span>N-Quads</span></a></li>
+ <li><a id="tab-normalized" href="#pane6" data-toggle="tab"><span>Normalized</span></a></li>
+ </ul>
+ <div class="tab-content">
+ <div id="pane1" class="tab-pane active">
+ <pre id="compacted" class="prettyprint lang-jsonld"></pre>
+ </div>
+ <div id="pane2" class="tab-pane">
+ <pre id="expanded" class="prettyprint lang-jsonld"></pre>
+ </div>
+ <div id="pane3" class="tab-pane">
+ <pre id="flattened" class="prettyprint lang-jsonld"></pre>
+ </div>
+ <div id="pane4" class="tab-pane">
+ <pre id="framed" class="prettyprint lang-jsonld"></pre>
+ </div>
+ <div id="pane5" class="tab-pane">
+ <pre id="nquads" class="prettyprint lang-nquads"></pre>
+ </div>
+ <div id="pane6" class="tab-pane">
+ <pre id="normalized" class="prettyprint lang-jsonld"></pre>
+ </div>
+ </div><!-- /.tab-content -->
+ </div><!-- /.tabbable -->
+ </div>
+
+ <div id="footer">
<p id="copyright">
Website content released under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-Alike license</a> except where an alternate is specified.
</p>
@@ -109,7 +186,17 @@
Part of the <a href="http://payswarm.com/">payswarm.com</a> initiative.
</p>
</div>
- </div>
+
+ </div> <!-- /container -->
+
+ <!-- Lé script tags -->
+ <script type="text/javascript" src="../static/js/bootstrap/bootstrap.js"></script>
+ <script type="text/javascript">
+ $('#markup,#context,#frame').bind('keyup', function() {
+ $('.btn-group > .btn').each(function () {
+ $(this).removeClass('active')
+ });
+ });
+ </script>
</body>
</html>
-