Now it's a website

scratchml · Jan 23, 2012 · d3ee14a · d3ee14a
1 parent 5ab2a15
commit d3ee14a
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/config.ru b/config.ru
@@ -1,7 +1,7 @@
 $stdout.sync = true
 
 use Rack::Static,
-  :urls => ["/stylesheets", "/images"],
+  :urls => ["/css", "/js", "/images"],
   :root => "."
 
 run lambda { |env|

diff --git a/css/screen.css b/css/screen.css
@@ -0,0 +1,21 @@
+body, html { margin: 0; padding: 0; }
+
+body { font-family: sans-serif; color: black; background: white; }
+a { color: black; }
+a:hover { color: red; }
+
+#container { }
+
+#header { text-align: center; }
+#header h1 { }
+#header img { width: 90%; }
+
+#navigation { display: none; }
+
+#main { width: 500px; margin: 0 auto; margin-top: 50px; }
+#main h2 { }
+#main p { }
+
+#footer { display: none; }
+
+
diff --git a/images/sml-header-big.png b/images/sml-header-big.png
diff --git a/images/sml-header-small.png b/images/sml-header-small.png
diff --git a/index.html b/index.html
@@ -1,19 +1,64 @@
 <html>
 <head>
-  <title>Scratch Markup Language (ScratchML/SML) &ndash; digitizing turntablism</title>
+  <title>Scratch Markup Language &ndash; digitizing turntablism</title>
+
+  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" charset="utf-8" />
+  <script src="js/application.js" type="text/javascript" charset="utf-8"></script>
+
 </head>
 <body>
 
 <div id="container">
   <div id="header">
-    <h1>Scratch Markup Language (ScratchML/SML)</h1>
+    <!-- <h1>Scratch Markup Language (SML/ScratchML)</h1> -->
+    <h1><a href="/"><img src="images/sml-header-big.png" alt="Scratch Markup Language (SML/ScratchML)" /></a></h1>
 
     <div id="navigation">
+      <ul>
+        <li><a href=""></a></li>
+        <li><a href=""></a></li>
+        <li><a href=""></a></li>
+      </ul>
     </div>
   </div>
 
   <div id="main">
-    <p>Lol lorem ipsum</p>
+    <p>
+      <h2>What's the idea?</h2>
+      <p>We're creating a format for describing turntablism, as well as tools for
+      recording, analyzing, sharing, and even recreating scratch performances
+      them with robot arms. We want to do for turntablism what
+      <a href="http://graffitimarkuplanguage.com">Graffiti Markup Language</a> has done for tagging.
+
+      <h2>News</h2>
+      <p><em>Jan 26-28, 2012</em>: Kyle and Jamie will be participating in the <a href="http://arthackday.net">Art Hack Day</a> in NYC, developing and demonstrating ScratchML technology.
+      <p><em>Jan 22, 2012</strong>: this site is finally online.
+
+      <h2>How does this work?</h2>
+      <p>We've been experimenting with a bunch of techniques for recording performances.
+      From open-source decoding of timecoded vinyl, to camera-based techniques, cross-
+      fader hacking, and even reverse engineering the digital output from high-end mixers.
+      We'll have some optical mouse parts to play with, too.
+
+      <h2>How can I help?</h2>
+      <p>Our goal for art hack day is to release tools and tutorials for recording data, and
+      have an interface for sharing it on the web. We're going to develop a few different
+      code, or electronics. We'll also need people to play with and document those tools:
+      musicians, artists, and designers.
+
+      <h2>What are those squiggly lines in the grid?</h2>
+      <p>That's <a href="http://dj.wikia.com/wiki/Scratching">Turntablist Transcription Methodoogy</a> (TTM). Each curve represents the move-
+      ment of vinyl over time, while breaks in the lines represent crossfader movement.
+      It's not exactly what we're going for, but it's a good way to start thinking about
+      the data we're recording, sharing, and analyzing.
+
+      <h2>Who is involved?</h2>
+      <p>ScratchML the brainchild of Michael Auger, Jamie Wilkinson and Kyle McDonald,
+        all fellows with the <a href="http://fffff.at">FAT Lab</a> (release early, often & w/ rap music).
+
+
+
+    </p>
   </div>
 
   <div id="footer">

diff --git a/js/application.js b/js/application.js
@@ -0,0 +1 @@
+/* lol */