Updated UI and look and feel of the site.
authorManu Sporny <msporny@digitalbazaar.com>
Sat, 09 Jul 2011 16:42:42 -0400
changeset 59 d7f059dfe217
parent 58 d8a4246fc82f
child 60 2121bb054e25
Updated UI and look and feel of the site.
fonts/Aller_Bd.ttf
images/json-ld-logo-1.png
images/json-ld-logo-2.png
images/json-ld-logo-3.png
images/json-ld-logo.xcf
index.html
playground/index.html
playground/playground.css
requirements/index.php
site.css
spec/index.php
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> &gt; 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> &gt; Requirements</div>
+            <div class="breadcrumbs"><a href="../">JSON-LD</a> &gt; 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 */
 
[email protected] {
+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> &gt; Specifications</div>
+            <div class="breadcrumbs"><a href="../">JSON-LD</a> &gt; Specifications</div>
             <div id="info"> 
                <h1>Specifications</h1> 
                <p>The following specifications are sorted in most recent to