Binary file fonts/Aller_Bd.ttf has changed
Binary file images/json-ld-logo-1.png has changed
Binary file images/json-ld-logo-2.png has changed
Binary file images/json-ld-logo-3.png has changed
Binary file images/json-ld-logo.xcf has changed
--- a/index.html Sat Jul 09 14:15:43 2011 -0400
+++ b/index.html Sat Jul 09 16:42:42 2011 -0400
@@ -19,35 +19,42 @@
<body>
<div id="container">
<div id="header">
- <div class="col">
- <h1>JSON-LD - Expressing Linked Data in JSON</h1>
- </div>
+ <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>Expressing Linked Data in JSON</h1>
+ </span>
</div>
<div id="content">
<div id="info">
- <h1>About JSON-LD</h1>
+ <p class="tagline">Data is messy and disconnected. JSON-LD
+ organizes and connects it without negatively impacting your
+ creativity.
+ </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>inked <strong>D</strong>ata) is a
lightweight
<a href="http://en.wikipedia.org/wiki/Linked_data">Linked Data</a>
- format. It is easy for humans to read
+ 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. There is a
- smooth migration path from the JSON you use today, to the JSON-LD
- you will use in the future. These properties make JSON-LD an
- ideal Linked Data interchange language for JavaScript
- environments, Web services, and unstructured databases such as
- CouchDB and MongoDB.</p>
- </div>
+ 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>
- <div id="example">
- <h1>A Simple Example</h1>
- <p>A simple example of a JSON object with added semantics:</p>
+ <p>A simple example of a JSON object expressing Linked Data:</p>
<pre>
{
"@context": "http://purl.org/jsonld/Person"
@@ -55,45 +62,54 @@
"name": "John Lennon",
"birthday": "10-09",
"member": "http://dbpedia.org/resource/The_Beatles"
-}
- </pre>
+}</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 services and databases in
+ 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="reqs">
- <h1>Requirements</h1>
- <p>The JSON-LD is working on a set of requirements for the purpose
- of defining the Specification. Please see the
- <a href="requirements/latest/">latest JSON-LD requirements</a>.
- A list
- of all <a href="requirements/">previous specification drafts</a>
- is also available.
- </p>
+ <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="spec">
<h1>The Specification</h1>
<p>If you are a developer, you may be interested in the
- <a href="spec/latest/">latest JSON-LD specification</a>. A list
- of all <a href="spec/">previous specification drafts</a> is
- also available. A <a href="spec/latest/basic">basic</a>
- specification is also in the works.</p>
+ <a href="spec/latest/">latest JSON-LD specification</a>. The
+ <a href="requirements/latest/">latest requirements</a> are
+ documented on this site as well as all
+ <a href="spec/">previous specifications</a> and
+ <a href="requirements/">previous requirements</a>.
+ A <a href="spec/latest/basic/">basic</a> specification is also
+ in the works.</p>
</div>
<div id="impl">
- <h1>Experimental implementations</h1>
+ <h1>Implementations</h1>
<ul>
<li>C++
<ul>
- <li><a href="http://github.com/digitalbazaar/monarch">Monarch</a></li>
+ <li><a href="https://github.com/digitalbazaar/monarch">Monarch</a></li>
+ </ul>
+ </li>
+ <li>JavaScript
+ <ul>
+ <li><a href="https://github.com/digitalbazaar/forge/blob/master/js/jsonld.js">Forge</a></li>
+ </ul>
+ </li>
+ <li>Python
+ <ul>
+ <li><a href="https://github.com/bradleypallen/json_ld_processor">JSON-LD Processor</a></li>
+ <li>Pyld (coming soon)</li>
</ul>
</li>
<li>Ruby
@@ -101,11 +117,6 @@
<li><a href="https://github.com/gkellogg/json-ld/">JSON-LD Reader/Writer</a></li>
</ul>
</li>
- <li>Python
- <ul>
- <li><a href="http://github.com/bradleypallen/json_ld_processor">JSON-LD Processor</a></li>
- </ul>
- </li>
</ul>
</div>
--- a/playground/index.html Sat Jul 09 14:15:43 2011 -0400
+++ b/playground/index.html Sat Jul 09 16:42:42 2011 -0400
@@ -26,18 +26,22 @@
<body onload="playground.init();">
<div id="container">
<div id="header">
- <div class="col">
- <h1 property="dcterms:title">The JSON-LD Playground</h1>
- </div>
+ <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">The 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 <a href="..">JSON-LD</a> markup by typing out
+ <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 currently a work in progress.
+ is a work in progress.
</div>
<ul id="examples">
--- a/playground/playground.css Sat Jul 09 14:15:43 2011 -0400
+++ b/playground/playground.css Sat Jul 09 16:42:42 2011 -0400
@@ -9,7 +9,7 @@
display: inline;
margin-top: 10px;
margin-bottom: 10px;
- width:100% !important;
+ width:99% !important;
min-height:200px !important;
}
--- a/requirements/index.php Sat Jul 09 14:15:43 2011 -0400
+++ b/requirements/index.php Sat Jul 09 16:42:42 2011 -0400
@@ -12,7 +12,7 @@
>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <title>JSON-LD - Specifications</title>
+ <title>JSON-LD - Requirements</title>
<link href="../site.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
@@ -21,13 +21,16 @@
<body>
<div id="container">
<div id="header">
- <div class="col">
- <h1>JSON-LD - Requirements</h1>
- </div>
+ <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>Requirements</h1>
+ </span>
</div>
<div id="content">
- <div><a href="../">JSON-LD</a> > Requirements</div>
+ <div class="breadcrumbs"><a href="../">JSON-LD</a> > Requirements</div>
<div id="info">
<h1>Requirements</h1>
<p>The following requirements are sorted in most recent to
--- a/site.css Sat Jul 09 14:15:43 2011 -0400
+++ b/site.css Sat Jul 09 16:42:42 2011 -0400
@@ -1,5 +1,10 @@
/* JSON-LD CSS */
+@font-face {
+font-family: "aller-bold";
+src: url("fonts/Aller_Bd.ttf");
+}
+
* {
margin: 0;
padding: 0;
@@ -11,7 +16,7 @@
body {
color: #333;
background-color: #fff;
-font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
+font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
@@ -27,6 +32,7 @@
h1 {
font-size: 2.0em;
+font-family: "aller-bold", Georgia, Serif;
}
p {
@@ -34,6 +40,16 @@
/*font-family: "Georgia", Times, serif;*/
}
+.tagline {
+ font-style: italic;
+ font-family: Georgia, serif;
+ font-size: 2em;
+ margin: 20px;
+}
+
+.breadcrumbs {
+ margin: 12px 12px;
+}
ul {
margin: 0 2em;
@@ -43,6 +59,10 @@
display: none;
}
+.banner {
+float: left;
+}
+
#header {
position: relative;
height: 80px;
@@ -56,8 +76,10 @@
}
#header h1 {
-position: absolute;
+position: relative;
+float: right;
margin-top: 25px;
+margin-right: 25px;
font-size: 32px;
}
@@ -68,7 +90,7 @@
#content {
width: 960px;
margin: 0 auto;
-padding: 40px 0;
+padding: 10px 10px;
}
#footer {
@@ -80,7 +102,7 @@
#footer p {
margin: 10px;
-font-size: 1.0em;
+font-size: 0.8em;
}
#copyright {
--- a/spec/index.php Sat Jul 09 14:15:43 2011 -0400
+++ b/spec/index.php Sat Jul 09 16:42:42 2011 -0400
@@ -21,13 +21,16 @@
<body>
<div id="container">
<div id="header">
- <div class="col">
- <h1>JSON-LD - Specifications</h1>
- </div>
+ <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>Specifications</h1>
+ </span>
</div>
<div id="content">
- <div><a href="../">JSON-LD</a> > Specifications</div>
+ <div class="breadcrumbs"><a href="../">JSON-LD</a> > Specifications</div>
<div id="info">
<h1>Specifications</h1>
<p>The following specifications are sorted in most recent to