make archive and reorganize for spring semester

robynitp · Jan 29, 2015 · 1b89015 · 1b89015
1 parent e716965
commit 1b89015
Show file tree

Hide file tree

Showing 137 changed files with 39,637 additions and 0 deletions.
diff --git a/archive/01-html/article.html b/archive/01-html/article.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+	<title>Networked Media Article</title>
+ </head>
+
+ <body>
+ 	<h1>My article</h1>
+ 	<p>The network is one of our most fundamental mediums for interactivity. It makes possible our interaction with machines, data, and, most importantly, other people. Though the base interaction it supports is simple, a client sends a request to a server, which replies; an incredible variety of systems can be and have been built on top of it.</p>
+ </body>
+</html>
diff --git a/archive/01-html/basic.html b/archive/01-html/basic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+	<title>Hello World</title>
+ </head>
+
+ <body>
+  <p>I am HTML.</p>
+ </body>
+</html>
diff --git a/archive/01-html/css/style1.css b/archive/01-html/css/style1.css
@@ -0,0 +1,71 @@
+body{
+    margin:0;
+    background-color: #333;
+    /*background:url('../img/bg.png') center 0 repeat-y ;*/
+}
+#header{
+    background: url('../img/logo.png') 0 0 no-repeat; 
+    padding: 0;
+    margin:0;
+    border-top: 1px solid #fff;
+    height: 100px;
+}
+#header h1{
+    text-indent: -9999999px;
+}
+#outer-container{
+    margin: 0 auto;
+    width:960px;
+
+}
+#container{
+    float:left;
+    width:950px;
+    background-color: #fff;
+}
+#nav{
+    margin:0;
+    width:100%;
+    border-bottom: 1px solid #666;
+}
+#nav ul{
+    margin:0;
+    height:28px;
+}
+#nav li{
+    display:inline;
+    border: 1px solid #666;
+     border-bottom: 0;
+    padding: 10px 20px;
+    background-color: #006181; 
+
+}
+#nav li a{
+    text-decoration: none;
+    color: #ccc;
+}
+#nav li:hover{
+    background-color:#333;
+}
+#nav li a:hover{
+    color: #ccc;   
+}
+#sidebar {
+    width:230px;
+    float:left;
+ 	padding: 2em;
+}
+
+#sidebar h3{
+    padding-left:20px;
+}
+#main {
+    float:left;
+    width: 610px;
+    padding: 20px;
+     border-left: 1px solid #ccc;
+
+}
+h1,h2,h3{
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+}
diff --git a/archive/01-html/html-css-the-works.html b/archive/01-html/html-css-the-works.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<title>The Title Shows Up in the Browser Window or Tab</title>
+	<style type="text/css">
+	/* This is CSS. 
+	   CSS comments look different from HTML comments */
+
+	/* tag level: styles all h1 tags */
+	h1{
+		background-color: #ccc;
+	}
+
+	/* links */
+	a{
+		color: #31B0E5;
+	}
+	/* link tags can have states: link, visited, hover, active */
+	a:visited{
+		color: #76AE85;
+		padding: 2px;
+		margin: 8px;
+	}
+	a:hover{
+		background-color: #ccc;
+
+	}
+
+	/* lists */
+	li{
+		background-color: #333;
+		border: 1px solid black;
+		padding: 20px;
+		margin: 8px;
+		list-style-type:none; /* remove the bullets */
+	}
+	/* only the <a> tags that are inside <li> tags */
+	li a{
+		color: rgb(57,170,210);
+		text-decoration: none;
+		font-weight: bold;
+		font-size: 2em;
+	}
+
+	/* sections */
+
+	/* class uses the dot */
+	.story{
+		border: 1px solid #333;
+		background-color: #ff9933;
+		margin: 10px;
+		padding: 1em;
+		width: 300px;
+		float:left; /* float positions the elements next to each other instead of down the page */
+		font-family: Arial;
+	}
+
+	/* id uses the hash sign */
+	#mainheader{
+		border-bottom: 5px solid rgb(15,98,139); /* you can also use RGB colors */
+	}
+
+
+	</style>
+
+</head>
+
+<body>
+	<!-- 
+	Use the id attribute only if there will be only one element of this type.
+	There is only one "mainheader" div
+	-->
+	<div id="mainheader">
+		<!--
+		The h1 tag, the largest header, should contain the overall subject of the page.
+		Google wants to know!
+		-->
+		<h1>Main Idea</h1>
+		<!-- the nav tag is new in HTML5 -->
+		<nav id="mainnav">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="news.html">Breaking News</a></li>
+				<li><a href="about.html">About Us</a></li>
+				<li><a href="contact.html">Contact Us</a></li>
+			</ul>
+		</nav>
+
+	</div><!-- end main header -->
+
+	<!-- LINKS: relative vs. absolute -->
+	<!-- This is an absolute link. The full URL will go to BuzzFeed no matter where this HTML page lives -->
+	<p>Some information here. <a href="http://buzzfeed.com" >14 Things That Are Meaningless</a></p>
+
+	<!-- This is also an absolute link. The beginning slash means the top level of your domain.
+	     No matter what domain the page is in, the link goes to whatever-domain-this-is.com/hello-world -->
+	<p>Say Hello, World. <a href="/hello-world.html">Hello world.</a></p>
+
+	<!-- This is a relative link. It will work only if test.html is in the same directory as this file -->
+	<p>Here is that <a href="test.html">test page</a> I made</p>
+
+	<!-- This is also relative. But it navigates up one directory level with '../' -->
+	<p>Back to <a href="../readme.html">home</a>
+
+	<p>Some <strong>really information</strong> here. 
+		More stuff 
+		extra stuff<br/><!-- lines don't break unless you use the break tag -->
+		and even more!</p>
+		<img src="img/cat_with_calculator.jpg" width="600" height="450" alt="Cat With Calculator"/>
+		</p>
+
+
+	<!-- yanked from the NY Times home page -->
+	<div class="story topstory"> <!-- more than one class is allowed, space-separated -->
+		<h3><a href="http://www.nytimes.com/2013/10/23/us/politics/sebelius-thrust-into-firestorm-on-exchanges.html?hp">
+			Sebelius Faces a Firestorm OverHealth Exchanges</a>
+		</h3>
+		<h6 class="byline"> By Sheryl Gay Stolberg</h6>
+		<p class="summary">Kathleen Sebelius, President Obama’s health secretary and the public face of his signature health care law, is weathering criticism over its problem-plagued online insurance exchange and has proved an easy target for Republicans.</p>
+	</div> <!-- end story div -->
+
+	<div class="story">
+		<h3><a href="/html-intro">An Intro to HMTL</a></h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non rutrum lacus. In tincidunt mollis leo sed molestie. Etiam vitae enim molestie, vulputate ipsum vel, imperdiet sapien.</p>
+	</div> <!-- end story div -->
+
+	</body>
+	</html>
diff --git a/archive/01-html/img/cat_with_calculator.jpg b/archive/01-html/img/cat_with_calculator.jpg
diff --git a/archive/01-html/in-class-nov3/Cookie-Monster-19.png b/archive/01-html/in-class-nov3/Cookie-Monster-19.png
diff --git a/archive/01-html/in-class-nov3/cat3.png b/archive/01-html/in-class-nov3/cat3.png
diff --git a/archive/01-html/in-class-nov3/cookie_monster.html b/archive/01-html/in-class-nov3/cookie_monster.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Secret Page</title>
+		<link rel="stylesheet" type="text/css" href="stylesheet.css">
+	</head>
+	<body bgcolor="mediumspringgreen">
+		<h1>COOOOOKIES!</h1>
+		<div id="cat"><img src="cat3.png"></div>
+	<div class="main">	
+		<div class="box">
+			<p>Hello</p>
+		</div>
+
+		<div class="box" id="monster">
+			<a href="index.html"><img src="Cookie-Monster-19.png" width="675" height="675"/></a>
+		</div>
+
+		<div class="box">
+			<p>Hello</p>
+		</div>
+
+	</div>
+	<div class="different">
+		<p>Stop floating now!</p>
+	</div>
+
+
+	</body>
+<html>
diff --git a/archive/01-html/in-class-nov3/stylesheet.css b/archive/01-html/in-class-nov3/stylesheet.css
@@ -0,0 +1,32 @@
+h1{
+	text-align: center;
+	text-family: Impact;
+	color: darkcyan;
+	font-size: 40px;
+	background-color: pink;
+}
+.box{
+	border: 1px solid #333;
+	display:block;
+	width: 100px;
+	float:left;
+	margin: 10px;
+	margin: 0 auto;
+}
+#monster{
+	width: 700px;
+	padding: 100px;
+}
+.different{
+	/*clear:both;*/
+}
+.main{
+	border:1px solid red;
+	width: 100%;
+	float:left;
+}
+#cat img{
+	width:200px;
+	position: absolute;
+	bottom: 0;
+}
diff --git a/archive/01-html/index.html b/archive/01-html/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+	<title>Hello World</title>
+ </head>
+
+ <body>
+ 	<h1>Welcome</h1>
+  	<p>I am HTML.</p>
+  	<p>Here is an article: <a href="http://buzzfeed.com">14 Things That Are Meaningless</a></p>
+  	<p>I wrote this article: <a href="article.html">10 things about the web</a></p>
+ </body>
+</html>
diff --git a/archive/01-html/layout.html b/archive/01-html/layout.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>The Site</title>
+<link href="css/style1.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <div id="outer-container">
+     <div id="container">
+
+	    	<div id="header">
+		    	<h1>The Site.</h1>
+		    </div>
+			<div id="nav">
+		   	 	<ul>
+			    	<li><a href="index.html">Home</a></li>
+			        <li><a href="local.html">Local</a></li>
+			        <li><a href="intl.html">International</a></li>
+			        <li><a href="arts.html">Arts</a></li>
+			        <li><a href="sports.html">Sports</a></li>
+			    </ul>
+			</div>
+
+	    	<div id="sidebar">
+		    	<h3>All about me</h3>
+		        <p>I am Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus bibendum varius. Donec eleifend mattis magna. Mauris arcu velit, viverra in molestie non</p>
+		    </div>
+
+    <div id="main">
+    <h2>Welcome to my site</h2>
+    <p>But, soft! What light through yonder window breaks?
+        It  is the east, and Juliet is the sun!
+        Arise fair sun and kill the envious moon,
+        Who is already sick and pale with grief
+        That thou her maid are more fair than she. </p>
+
+<p>Hello, world. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus bibendum varius. <b>Donec eleifend mattis magna. Mauris arcu velit, viverra in molestie non, fringilla sed tellus. Proin eget nibh sed velit ultricies tincidunt. Quisque lorem tortor, tincidunt et</b> suscipit at, rhoncus non ligula. Praesent eget odio vitae ipsum ornare malesuada suscipit eu augue. Maecenas dapibus suscipit quam ac porta. Nulla feugiat fringilla dolor, a mattis dolor posuere et. Fusce vel pharetra quam. Duis blandit, nisl dapibus lobortis egestas, tortor arcu convallis sem, sed euismod lacus nunc ac urna. Pellentesque mauris lacus, molestie sed semper ac, ornare vitae eros. Ut sed mi justo, vitae cursus odio. Aenean adipiscing, quam eu dictum vehicula, tellus ipsum iaculis mi, id porta leo lectus vehicula eros. Vestibulum aliquam augue eget nisl congue ac ullamcorper sem mollis. </p>
+
+    </div> <!--end main -->
+
+</div><!-- end container-->
+</div><!-- end outer-container-->
+</body>
+</html>
diff --git a/archive/02-servi-basics/hello-servi/server.js b/archive/02-servi-basics/hello-servi/server.js
@@ -0,0 +1,4 @@
+// respond to every request with "Hello world"
+function run(request) {
+    request.respond("Hello World!");
+}
diff --git a/archive/02-servi-basics/readme.md b/archive/02-servi-basics/readme.md
@@ -0,0 +1,2 @@
+Servi.js examples for the Servi IDE
+from https://github.com/antiboredom/servi-ide/tree/master/examples
diff --git a/archive/02-servi-basics/servi-file-server/public/index.html b/archive/02-servi-basics/servi-file-server/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+	<title>Hello World</title>
+ </head>
+
+ <body>
+  <p>I am HTML.</p>
+ </body>
+</html>
diff --git a/archive/02-servi-basics/servi-file-server/server.js b/archive/02-servi-basics/servi-file-server/server.js
@@ -0,0 +1,11 @@
+// serve files from a directory named "public"
+serveFiles("public");
+
+/*
+ 
+NOTE: Make sure to create a directory in your Servi project called "public"
+and put at least one HTML file in it. 
+
+If you include a file called "index.html", it will show up automatically as your home page.
+
+ */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Servi.js examples for the Servi IDE
		from https://github.com/antiboredom/servi-ide/tree/master/examples