gauthiier/cth2016
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

haha

Browse Source
This commit is contained in:
gauthiier 2016-10-31 11:51:28 +01:00
commit f9edd2de24
28 changed files with 5682 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
assignments-conf.html Normal file
View File

@ -0,0 +1,219 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>CTH-2016 / Assignments Configuration</title>
<style type="text/css">code{white-space: pre;}</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<link rel="stylesheet" href="style/html5.css">
</head>
<body>
<content>
<header>
<h1 class="title">CTH-2016 / Assignments Configuration</h1>
</header>
<nav id="TOC">
<ul>
<li><a href="#initialising-your-assignments-directory">Initialising your assignments directory</a><ul>
<li><a href="#git-init">git init</a></li>
<li><a href="#git-add">git add</a></li>
<li><a href="#git-commit">git commit</a></li>
<li><a href="#github">github</a></li>
<li><a href="#git-push">git push</a></li>
</ul></li>
<li><a href="#creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</a><ul>
<li><a href="#assignment-x">assignment-x</a></li>
<li><a href="#npm-init">npm init</a></li>
<li><a href="#npm-install---save-commander">npm install --save commander</a></li>
<li><a href="#index.js">index.js</a></li>
<li><a href="#readme">README</a></li>
<li><a href="#git-add-1">git add</a></li>
<li><a href="#git-commit-1">git commit</a></li>
<li><a href="#git-push-1">git push</a></li>
</ul></li>
<li><a href="#external-resources">External Resources</a></li>
</ul>
</nav>
<h2 id="initialising-your-assignments-directory">Initialising your assignments directory</h2>
<p>What follows is a recipe to initialise a git repository for your class assignments.</p>
<h3 id="git-init">git init</h3>
<p>Let's assume you have a directory on your machine <code>~/cth2016</code> where you intend to place all your assignments. To create a dedicated assignments directory:</p>
<pre><code>$ cd ~/cth2016
$ mkdir cth2016-assignments
$ cd cth2016-assignments</code></pre>
<p>This will create a new directory <code>~/cth2016/cth2016-assignments/</code> that will be turned into a git repository with the following commands:</p>
<pre><code>$ git init</code></pre>
<h3 id="git-add">git add</h3>
<p>Your directory is now under version control, though there is nothing in there yet. Let's first create a README file describing what the repo is about:</p>
<pre><code>$ echo &#39;Repository of CTH2016 assignments&#39; &gt; README</code></pre>
<p>This command will create a new README file on your system and add to it the <code>echo</code> string. You can, of course, create the file manually using Sublime. To make sure git is keeping track of this new file, emit the following command:</p>
<pre><code>$ git status</code></pre>
<p>The above should display the new file in the list of changes to the repo since it has been created. Yet the README file <em>is not</em> currently added to the repo (marked in red). To add the file to the repo:</p>
<pre><code>$ git add README</code></pre>
<p>Now <code>git status</code> should list the file in green and mark it as new. Any files that will be added to the directory will need to be added to the repo using the <code>git add</code> command.</p>
<h3 id="git-commit">git commit</h3>
<p>When adding new files or changing them, you need to commit these to the repo:</p>
<pre><code>$ git commit -a -m &#39;initial commit&#39;</code></pre>
<p>From the git command above <code>-a</code> means to you are committing all changes listed by <code>git status</code> and <code>-m</code> is the message for the commit. If you do a <code>git status</code> you should now see that the README file dissapeared from the list of changes since it has just been committed. Changing the README file will re-introduce it to list of changes. A commit is like a recorded snapshot of the repo, any changes that occur after the commit will be flagged in <code>git status</code>.</p>
<h3 id="github">github</h3>
<p>Now that you have added a README file and committed this change to your local repo, it is time to link it to Github so that your instructor and your peers can &quot;clone&quot; it. To do so, login to <a href="https://github.com">Github</a> and on the top/right corner of the page select the '+' symbol and 'New repository'</p>
<p><img src="./img/github-new-repo.png" width='250px' class='inline-img'/></p>
<p>and give it a name, make it public and do not initialise it with a README since you already have one:</p>
<p><img src="./img/github-new-repo-name.png" class='inline-img'/></p>
<p>When your (now empty) github repo is created, you need to copy its url:</p>
<p><img src="./img/github-new-repo-clone.png" class='inline-img'/></p>
<p>and add a &quot;remote origin&quot; to your local git repo with this command</p>
<pre><code>git remote add origin [your-github-https-url]</code></pre>
<h3 id="git-push">git push</h3>
<p>When this is done, you can now <code>push</code> your local changes to the online github repo</p>
<pre><code>git push origin master</code></pre>
<p>If you refresh the github webpage, you should now see it updated with your README file</p>
<p><img src="./img/github-done.png" class='inline-img'/></p>
<p>Your local repo and your github repo are now linked and ready to go!</p>
<hr />
<h2 id="creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</h2>
<p>What follows is a recipe to create a new assignment in your newly initialised git assignments repository.</p>
<h3 id="assignment-x">assignment-x</h3>
<p>If you have followed the previous section, you should now have a directory named <code>~/cth2016/cth2016-assignments/</code> under which you will add a new <code>assignment-x</code>. To create the new directory:</p>
<pre><code>$ cd ~/cth2016/cth2016-assignments/
$ mkdir assignment-x
$ cd assignment-x</code></pre>
<h3 id="npm-init">npm init</h3>
<p>Node has a package manager named <code>npm</code> (n-ode, p-ackage, m-anager) that automates the task of creating a project from scratch and configures it in a way that is compatible with other node projects. We will use <code>npm</code> during the course of the module.</p>
<p>To initialise a new project/assignment, simply emit the follow command:</p>
<pre><code>$ npm init</code></pre>
<p>and you will be asked various questions regarding your project's name, version, description, entry point, author, etc. which you can configure at will (press &lt;'enter'&gt; to select and move to the next configuration step).</p>
<p>A <code>package.json</code> file is created upon the completion of <code>npm init</code>. This file contains all the configurations you selected and can be edited manually.</p>
<h3 id="npm-install---save-commander">npm install --save commander</h3>
<p>This step is optional, yet recommended for your assignment. When making a node application, modules/libraries can be made part of your project using <code>npm</code>. Thousands of javascript libraries are available on <a href="https://www.npmjs.com">www.npmjs.com</a> which you can install with a simple <code>npm</code> command.</p>
<p>As in the first session of the class on the Command Line Interface (CLI), we will be using <a href="https://www.npmjs.com/package/commander">&quot;commander&quot;</a> for our applications. To install it for you assignment, use the following command:</p>
<pre><code>$ npm install --save commander</code></pre>
<p>This will create a <code>node_modules</code> directory next to <code>package.json</code> where the commander code is placed. All modules installed using <code>npm</code> will reside in this <code>node_modules</code> directory.</p>
<h3 id="index.js">index.js</h3>
<p>Now that you have an npm project created and installed commander it is time to create an <code>index.js</code> file containing the code for the assignment. Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output <code>&quot;Hello!&quot;</code>, <code>&quot;Dag!&quot;</code> or <code>&quot;Allô!&quot;</code> depending on a command line arguments passed to the script which can be of the type <code>en</code> (english), <code>nl</code> (nederlands), <code>fr</code> (français) or nothing.</p>
<p>To create <code>index.js</code> simply type (or, alternatively, create it with Sublime):</p>
<pre><code>$ touch index.js</code></pre>
<p>Now open the file and input the desired code:</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">
<span class="co">// simplest tri-lingual program </span>
<span class="kw">var</span> program <span class="op">=</span> <span class="at">require</span>(<span class="st">&#39;commander&#39;</span>)<span class="op">;</span>
program
.<span class="at">version</span>(<span class="st">&#39;0.1&#39;</span>)
.<span class="at">option</span>(<span class="st">&#39;-l, --language [code]&#39;</span><span class="op">,</span> <span class="st">&#39;Language&#39;</span><span class="op">,</span> <span class="ss">/</span><span class="sc">^(</span><span class="ss">en</span><span class="sc">|</span><span class="ss">nl</span><span class="sc">|</span><span class="ss">fr</span><span class="sc">)$</span><span class="ss">/i</span>)
.<span class="at">parse</span>(<span class="va">process</span>.<span class="at">argv</span>)<span class="op">;</span>
<span class="cf">switch</span>(<span class="va">program</span>.<span class="at">language</span>)
<span class="op">{</span>
<span class="cf">case</span>(<span class="st">&#39;en&#39;</span>)<span class="op">:</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;Hello!&#39;</span>)<span class="op">;</span>
<span class="cf">break</span><span class="op">;</span>
<span class="cf">case</span>(<span class="st">&#39;nl&#39;</span>)<span class="op">:</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;Dag!&#39;</span>)<span class="op">;</span>
<span class="cf">break</span><span class="op">;</span>
<span class="cf">case</span>(<span class="st">&#39;fr&#39;</span>)<span class="op">:</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;Allô!&#39;</span>)<span class="op">;</span>
<span class="cf">break</span><span class="op">;</span>
<span class="dt">default</span><span class="op">:</span>
<span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;...&#39;</span>)<span class="op">;</span>
<span class="cf">break</span><span class="op">;</span>
<span class="op">}</span></code></pre></div>
<p>To run the script</p>
<pre><code>$ node index.js -l fr</code></pre>
<p>where you can replace <code>fr</code> by <code>en</code> or <code>nl</code> or nothing. Try it out!</p>
<h3 id="readme">README</h3>
<p>One of the interesting feature of commander is that it can auto generate a <code>&quot;help&quot;</code> output from your script based on the command line options you have listed in your program.</p>
<p>To see this help output, simply type:</p>
<pre><code>node index.js --help</code></pre>
<pre><code> Usage: index [options]
Options:
-h, --help output usage information
-V, --version output the version number
-l, --language [code] Language
</code></pre>
<p>It is very common for command line scripts to feature such <code>--help</code> argument that when executed, displays what the program expects as input. Thus, for this class, each README you will create (for both assignments and final project) is expected to have (at least) this type of &quot;helper documentation&quot;.</p>
<p>To initialise a README and add the <code>help</code> output from your script:</p>
<pre><code>$ node index.js --help &gt; README</code></pre>
<p>You can, of course, edit this README manually. It is nonetheless a very good practice to start the redaction with the <code>help</code> as it signals how to use your script to people that may be interested in it.</p>
<h3 id="git-add-1">git add</h3>
<p>Now that you have a proper project initialised, the next step is to add all its files to git.</p>
<p>Yet before we do so, there one important file you need to fetch from github which will instruct git not to include to you repository unwanted files that may be installed by <code>npm</code> or by your operating system. Git has a special file called <code>.gitignore</code> that lists files and file patterns that have to be ignored by git. Luckily, there is a <a href="https://github.com/github/gitignore">github repository</a> maintained by the git community that lists common files to ignore depending on the programming language and environment your are using.</p>
<p>To download the Node <code>.gitignore</code> and install it under the current <code>assignment-x</code>, type the following command:</p>
<pre><code>$ wget https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -O .gitignore</code></pre>
<p>It is now time to look which file needs to be added to git. In order to do so type:</p>
<pre><code>$ git status</code></pre>
<p>This should indicate which directories and/or files that are untracked. If you have followed the previous steps, <code>git status</code> should simply signal that the current directory <code>./</code> is untracked. To add it to git:</p>
<pre><code>$ git add ./</code></pre>
<p>To make sure git properly added the new assignment, simply check with <code>git status</code> that your <code>package.json</code>, <code>index.js</code>, <code>README</code>, and various file in <code>node_modules</code> are marked as new files (green).</p>
<h3 id="git-commit-1">git commit</h3>
<p>The next step is to commit these new files to your local git repo:</p>
<pre><code>$ git commit -a -m &quot;initial commit for assignment-x&quot;</code></pre>
<h3 id="git-push-1">git push</h3>
<p>And push the commit to your assignments github repo:</p>
<pre><code>$ git push origin master</code></pre>
<p>You should now see these changes online in your new <code>cth2016-assignments/assignment-x/</code> directory:</p>
<p><img src="./img/github-assignment-x.png" class='inline-img'/></p>
<hr />
<h2 id="external-resources">External Resources</h2>
<p>Github</p>
<ul>
<li><a href="https://help.github.com/articles/set-up-git/">Github Help - Set Up Git</a></li>
<li><a href="https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/">Github Help - Adding an existing project</a></li>
</ul>
<p>Git</p>
<ul>
<li><a href="https://git-scm.com/book/en/v1/Getting-Started">Git - Getting Started</a></li>
<li><a href="https://git-scm.com/videos">Git - Getting Started (Videos)</a></li>
<li><a href="http://swcarpentry.github.io/git-novice/">Software Carpentry - Git Tutorial</a></li>
</ul>
<p>Node</p>
<ul>
<li><a href="https://nodeschool.io/#workshopper-list">Nodeschool</a></li>
</ul>
</content>
</body>
</html>

240
assignments-conf.md Normal file
View File

@ -0,0 +1,240 @@
---
title: CTH-2016 / Assignments Configuration
---
## Initialising your assignments directory
What follows is a recipe to initialise a git repository for your class assignments.
### git init
Let's assume you have a directory on your machine ```~/cth2016``` where you intend to place all your assignments. To create a dedicated assignments directory:
$ cd ~/cth2016
$ mkdir cth2016-assignments
$ cd cth2016-assignments
This will create a new directory ```~/cth2016/cth2016-assignments/``` that will be turned into a git repository with the following commands:
$ git init
### git add
Your directory is now under version control, though there is nothing in there yet. Let's first create a README file describing what the repo is about:
$ echo 'Repository of CTH2016 assignments' > README
This command will create a new README file on your system and add to it the ```echo``` string. You can, of course, create the file manually using Sublime. To make sure git is keeping track of this new file, emit the following command:
$ git status
The above should display the new file in the list of changes to the repo since it has been created. Yet the README file _is not_ currently added to the repo (marked in red). To add the file to the repo:
$ git add README
Now ```git status``` should list the file in green and mark it as new. Any files that will be added to the directory will need to be added to the repo using the ```git add``` command.
### git commit
When adding new files or changing them, you need to commit these to the repo:
$ git commit -a -m 'initial commit'
From the git command above ```-a``` means to you are committing all changes listed by ```git status``` and ```-m``` is the message for the commit. If you do a ```git status``` you should now see that the README file dissapeared from the list of changes since it has just been committed. Changing the README file will re-introduce it to list of changes. A commit is like a recorded snapshot of the repo, any changes that occur after the commit will be flagged in ```git status```.
### github
Now that you have added a README file and committed this change to your local repo, it is time to link it to Github so that your instructor and your peers can "clone" it. To do so, login to [Github](https://github.com) and on the top/right corner of the page select the '+' symbol and 'New repository'
<img src="./img/github-new-repo.png" width='250px' class='inline-img'/>
and give it a name, make it public and do not initialise it with a README since you already have one:
<img src="./img/github-new-repo-name.png" class='inline-img'/>
When your (now empty) github repo is created, you need to copy its url:
<img src="./img/github-new-repo-clone.png" class='inline-img'/>
and add a "remote origin" to your local git repo with this command
git remote add origin [your-github-https-url]
### git push
When this is done, you can now ```push``` your local changes to the online github repo
git push origin master
If you refresh the github webpage, you should now see it updated with your README file
<img src="./img/github-done.png" class='inline-img'/>
Your local repo and your github repo are now linked and ready to go!
-------
## Creating a new assignment (Node + Git)
What follows is a recipe to create a new assignment in your newly initialised git assignments repository.
### assignment-x
If you have followed the previous section, you should now have a directory named ```~/cth2016/cth2016-assignments/``` under which you will add a new ```assignment-x```. To create the new directory:
$ cd ~/cth2016/cth2016-assignments/
$ mkdir assignment-x
$ cd assignment-x
### npm init
Node has a package manager named ```npm``` (n-ode, p-ackage, m-anager) that automates the task of creating a project from scratch and configures it in a way that is compatible with other node projects. We will use ```npm``` during the course of the module.
To initialise a new project/assignment, simply emit the follow command:
$ npm init
and you will be asked various questions regarding your project's name, version, description, entry point, author, etc. which you can configure at will (press <'enter'> to select and move to the next configuration step).
A ```package.json``` file is created upon the completion of ```npm init```. This file contains all the configurations you selected and can be edited manually.
### npm install --save commander
This step is optional, yet recommended for your assignment. When making a node application, modules/libraries can be made part of your project using ```npm```. Thousands of javascript libraries are available on [www.npmjs.com](https://www.npmjs.com) which you can install with a simple ```npm``` command.
As in the first session of the class on the Command Line Interface (CLI), we will be using ["commander"](https://www.npmjs.com/package/commander) for our applications. To install it for you assignment, use the following command:
$ npm install --save commander
This will create a ```node_modules``` directory next to ```package.json``` where the commander code is placed. All modules installed using ```npm``` will reside in this ```node_modules``` directory.
### index.js
Now that you have an npm project created and installed commander it is time to create an ```index.js``` file containing the code for the assignment. Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output ```"Hello!"```, ```"Dag!"``` or ```"Allô!"``` depending on a command line arguments passed to the script which can be of the type ```en``` (english), ```nl``` (nederlands), ```fr``` (français) or nothing.
To create ```index.js``` simply type (or, alternatively, create it with Sublime):
$ touch index.js
Now open the file and input the desired code:
```javascript
// simplest tri-lingual program
var program = require('commander');
program
.version('0.1')
.option('-l, --language [code]', 'Language', /^(en|nl|fr)$/i)
.parse(process.argv);
switch(program.language)
{
case('en'):
console.log('Hello!');
break;
case('nl'):
console.log('Dag!');
break;
case('fr'):
console.log('Allô!');
break;
default:
console.log('...');
break;
}
```
To run the script
$ node index.js -l fr
where you can replace ```fr``` by ```en``` or ```nl``` or nothing. Try it out!
### README
One of the interesting feature of commander is that it can auto generate a ```"help"``` output from your script based on the command line options you have listed in your program.
To see this help output, simply type:
node index.js --help
```
Usage: index [options]
Options:
-h, --help output usage information
-V, --version output the version number
-l, --language [code] Language
```
It is very common for command line scripts to feature such ```--help``` argument that when executed, displays what the program expects as input. Thus, for this class, each README you will create (for both assignments and final project) is expected to have (at least) this type of "helper documentation".
To initialise a README and add the ```help``` output from your script:
$ node index.js --help > README
You can, of course, edit this README manually. It is nonetheless a very good practice to start the redaction with the ```help``` as it signals how to use your script to people that may be interested in it.
### git add
Now that you have a proper project initialised, the next step is to add all its files to git.
Yet before we do so, there one important file you need to fetch from github which will instruct git not to include to you repository unwanted files that may be installed by ```npm``` or by your operating system. Git has a special file called ```.gitignore``` that lists files and file patterns that have to be ignored by git. Luckily, there is a [github repository](https://github.com/github/gitignore) maintained by the git community that lists common files to ignore depending on the programming language and environment your are using.
To download the Node ```.gitignore``` and install it under the current ```assignment-x```, type the following command:
$ wget https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -O .gitignore
It is now time to look which file needs to be added to git. In order to do so type:
$ git status
This should indicate which directories and/or files that are untracked. If you have followed the previous steps, ```git status``` should simply signal that the current directory ```./``` is untracked. To add it to git:
$ git add ./
To make sure git properly added the new assignment, simply check with ```git status``` that your ```package.json```, ```index.js```, ```README```, and various file in ```node_modules``` are marked as new files (green).
### git commit
The next step is to commit these new files to your local git repo:
$ git commit -a -m "initial commit for assignment-x"
### git push
And push the commit to your assignments github repo:
$ git push origin master
You should now see these changes online in your new ```cth2016-assignments/assignment-x/``` directory:
<img src="./img/github-assignment-x.png" class='inline-img'/>
-------
## External Resources
Github
* [Github Help - Set Up Git](https://help.github.com/articles/set-up-git/)
* [Github Help - Adding an existing project](https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/)
Git
* [Git - Getting Started](https://git-scm.com/book/en/v1/Getting-Started)
* [Git - Getting Started (Videos)](https://git-scm.com/videos)
* [Software Carpentry - Git Tutorial](http://swcarpentry.github.io/git-novice/)
Node
* [Nodeschool](https://nodeschool.io/#workshopper-list)

BIN
img/cli0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
img/datapoint-3300.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
img/github-assignment-x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
img/github-done.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
img/github-new-repo-clone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

BIN
img/github-new-repo-name.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
img/github-new-repo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
img/rkwk101.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

160
index.html Normal file
View File

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>CTH-2016</title>
<style type="text/css">code{white-space: pre;}</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style/html5.css">
</head>
<body>
<content>
<header>
<h1 class="title">CTH-2016</h1>
</header>
<h2 id="course-synopsis-description">Course Synopsis / Description</h2>
<p>In this module students will learn how to read and write computer code. Rather than writing discursive texts to address certain cultural artefacts, as it is usually and rightly practiced in the Humanities, students learn how to write software to perform machinic readings of these artefacts. By learning how to write code in a contemporary programming language and how to interpret the workings and effects of their programs, students develop a type of literacy that allow them to conduct novel types of Humanities observations, explorations and expressions when addressing contemporary culture and its digitally mediated objects and subjects.</p>
<p>At the end of the course the student is able to:</p>
<ul>
<li>Apply knowledge of basic programming skills that carry over to almost all programming languages</li>
<li>Demonstrate a comprehension of software’s composition and functioning that goes beyond its mere usage</li>
<li>Demonstrate a basic knowledge of natural language processing and automatic text generation</li>
<li>Demonstrate knowledge of contemporary browser-based scripting and client-server networking</li>
<li>Demonstrate a critical understanding of the place code and software literacy has within the Humanities</li>
<li>Reflect on experience in project-based collaborative humanities research</li>
</ul>
<h2 id="syllabus">Syllabus</h2>
<h4 id="week-1-0211-command-line-interface-cli">Week 1 (02/11) — Command Line Interface (CLI)</h4>
<p>Topics:</p>
<ul>
<li>Setup environment</li>
<li>Command Line Interface</li>
<li>Version Control</li>
</ul>
<p>Texts:</p>
<ul>
<li>Friedrich Kittler. <a href="./texts/kittler-code.pdf">&quot;Code (or, How You Can Write Something Differently)&quot;</a></li>
<li>Vilém Flusser. <a href="./texts/Flusser-The_Codified_World.pdf">&quot;The Codified World&quot;</a></li>
<li>Stephen Ramsey. <a href="http://stephenramsay.us/2012/06/10/learning-to-program/">&quot;Learning to Program&quot;</a></li>
</ul>
<p>Links:</p>
<ul>
<li><a href="./setup.html">Setup (Git, Node, Sublime Text)</a></li>
<li><a href="./assignments-conf.html">Assignments Configuration</a></li>
</ul>
<h4 id="week-2-0911-scripts-executions">Week 2 (09/11) — Scripts &amp; Executions</h4>
<p>Topics:</p>
<ul>
<li>Scripts &amp; Interpretation</li>
<li>Variables, Arrays, Loops &amp; Functions</li>
<li>Librairies</li>
</ul>
<p>Texts:</p>
<ul>
<li>Nick Montfort. Introduction (p.1-16) / <a href="./texts/10_PRINT_121114.pdf">10 PRINT CHR$(205.5+RND(1)); : GOTO 10</a></li>
<li>Geoff Cox &amp; Alex McLean. <a href="./texts/CoxMcLean-Double_Coding.pdf">Double Coding / Speaking Code: Coding as Aesthetic and Political Expression</a></li>
<li><a href="http://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/#_edn4">Christopher Strachey</a>. Love Letters
<ul>
<li>Noah Wardrip-Fruin. <a href="https://grandtextauto.soe.ucsc.edu/2005/08/01/christopher-strachey-first-digital-artist/">&quot;Christopher Strachey: The first digital artist?&quot;</a></li>
<li>David Link. <a href="http://www.alpha60.de/art/love_letters/">LoveLetters_1.0</a> - <a href="http://www.alpha60.de/art/love_letters/archive/muc/">Archive</a></li>
</ul></li>
</ul>
<p><strong>Assignment#1 due (08/11/16 13:00)</strong></p>
<h4 id="week-3-1611-clients-servers-browsers">Week 3 (16/11) — Clients, Servers &amp; Browsers</h4>
<p>Topics:</p>
<ul>
<li>Synchrounous Processing / Asynchrounous I/O</li>
<li>Network Protocols, Topologies &amp; Infrastructure</li>
</ul>
<p>Texts:</p>
<ul>
<li>Tim Berners-Lee. <a href="https://www.w3.org/People/Berners-Lee/1996/ppf.html">&quot;The World Wide Web: Past, Present and Future&quot;</a></li>
<li>Alex Galloway. <a href="./texts/Galloway-Phy.pdf">Physical Media / Protocol: How Control Exists After Decentralization</a></li>
<li>Paul Dourish. <a href="./texts/Dourish-PPP.pdf">&quot;Protocols, Packets, and Proximity&quot;</a></li>
</ul>
<p><strong>Assignment#2 due (15/11/16 13:00)</strong></p>
<p>Teams for final project are formed during the class.</p>
<h4 id="week-4-2311-graphical-programming-interfaces">Week 4 (23/11) — Graphical &amp; Programming Interfaces</h4>
<p>Topics:</p>
<ul>
<li>Interface: Foregrounds / Backgrounds</li>
<li>Browser Interpretation, Rendering &amp; Events</li>
<li>Librairies &amp; Application Programing Interfaces (API)</li>
</ul>
<p>Texts:</p>
<ul>
<li>Christian Ulrik Andersen &amp; Søren Pold. <a href="http://mediacommons.futureofthebook.org/tne/pieces/manifesto-post-digital-interface-criticism">&quot;Manifesto for a Post-Digital Interface Criticism&quot;</a></li>
<li><a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/">Critical Rendering Path</a></li>
<li>W.J.T. Mitchell. <a href="./texts/Mitchell-Image.pdf">Image / Ctitical Terms for Media Studies</a></li>
</ul>
<p><strong>Assignment#2 due (22/11/16 13:00)</strong></p>
<p>Each team pitch their project ideas during the class.</p>
<h4 id="week-5-3011-natural-language-processing">Week 5 (30/11) — Natural Language Processing</h4>
<p>Topics:</p>
<ul>
<li>Text &amp; Interpretation</li>
<li>Text Analysis</li>
<li>Close / Distant Reading</li>
<li>Close / Distant Writing</li>
</ul>
<p>Texts:</p>
<ul>
<li><a href="http://www.nytimes.com/2011/06/26/books/review/the-mechanic-muse-what-is-distant-reading.html">&quot;What Is Distant Reading?&quot;</a></li>
<li>Stephen Ramsay. <a href="http://www.digitalhumanities.org/companion/view?docId=blackwell/9781405148641/9781405148641.xml&amp;chunk.id=ss1-6-7">&quot;Algorithmic Criticism&quot;</a></li>
<li>Mark V Shaney. <a href="http://glenda.cat-v.org/friends/mark-v-shaney/grain-of-salt">“I Spent an Interesting Evening Recently with a Grain of Salt”</a></li>
<li>William S. Burroughs. <a href="http://www.ubu.com/papers/burroughs_gysin.html">&quot;The Cut-Up Method of Brion Gysin&quot;</a> <!-- Script/Program: [cutup.py](https://github.com/rossgoodwin/cutup) --></li>
<li><a href="./texts/six-oulipo.pdf">Six Selections by the Oulipo</a>
<ul>
<li>William Gillepsie. <a href="http://archive.is/E5wXK#selection-219.0-219.41">&quot;The Oulipo: Constraints and Collaboration&quot;</a></li>
</ul></li>
</ul>
<h4 id="week-6-0712-advanced-topics-reflections">Week 6 (07/12) — Advanced Topics / Reflections</h4>
<p>Topics: On demand</p>
<p>Texts:</p>
<ul>
<li>Alan Liu. <a href="http://dhdebates.gc.cuny.edu/debates/text/20">&quot;Where is the Cultural Criticism in the Digital Humanitites?&quot;</a></li>
<li>Michael Dieter. <a href="./texts/Dieter-CTP.pdf">“The Virtues of Critical Technical Practice”</a></li>
<li><a href="http://www.e-flux.com/journal/74/59810/jodi-s-infrastructure/">&quot;Jodi's Infrastructure&quot;</a></li>
</ul>
<p>During this session, time will be allocated to answer questions regarding final projects.</p>
<h4 id="week-7-1412-final-project-presentations">Week 7 (14/12) — Final Project Presentations</h4>
<h2 id="assignments">Assignments</h2>
<ul>
<li>Assignment #1: tba</li>
<li>Assignment #2: tba</li>
<li>Assignment #3: tba</li>
</ul>
<p>Each individual assignment will be posted on the day of the class (weeks 1, 2, 3).</p>
<h2 id="assessment-grading">Assessment / Grading</h2>
<p>Grading for the module consists of (1) three assigments scheduled to be delivered during first part the block and (2) a final group project that will be presentated during the last session of the semester.</p>
<ul>
<li>Assignment #1 (15%) - due week 2 (08/11/16 13:00)</li>
<li>Assignment #2 (15%) - due week 3 (15/11/16 13:00)</li>
<li>Assignment #3 (15%) - due week 4 (22/11/16 13:00)</li>
<li>Final group project (45% — individually graded) - due week 7 (14/12/16)</li>
<li>15-minute presentation of final project (10% — individually graded) (14/12/16)</li>
</ul>
<p>Assignments are handed in on the day before the next scheduled session, that is, <strong>Tuesday at 13:00</strong> at the latest. Assignments are graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented and 3) is the code efficient.</p>
<p>The final project and presentation is a group assignment. Groups will be arranged at the start of the semester on week 2 and each group will give a short pitch of their final project on week 4. Students are free to choose their topic, but must gain approval at least two weeks in advance of the final project's due date (14/12).</p>
<p>Each group must create a final project portfolio (a repository on Github). The deadline to hand in this portfolio is week 7 (14/12). The final project presentation also takes place in week 7. A successful presentation will include a demonstrated ability to field questions from the audience.</p>
<h2 id="study-load">Study load</h2>
<p>This course is equivalent to 6 EC, or a study load of 168 hours, resulting in approximately 24 hours per week:</p>
<ul>
<li>7 x classes of 2 hours (14 hours total)</li>
<li>3 x assignments (30 hours total)</li>
<li>Weekly required tutorials and further reading work (72 hours total)</li>
<li>Final project (52 hours total)</li>
</ul>
<h2 id="instructor">Instructor</h2>
<p>David Gauthier<br />
d.gauthier@uva.nl<br />
BG1 - Turfdraagsterpad 9<br />
Kamernummer: 1.01E<br />
Office hours by appointment</p>
</content>
</body>
</html>

167
index.md Normal file
View File

@ -0,0 +1,167 @@
---
title: CTH-2016
---
## Course Synopsis / Description
In this module students will learn how to read and write computer code. Rather than writing discursive texts to address certain cultural artefacts, as it is usually and rightly practiced in the Humanities, students learn how to write software to perform machinic readings of these artefacts. By learning how to write code in a contemporary programming language and how to interpret the workings and effects of their programs, students develop a type of literacy that allow them to conduct novel types of Humanities observations, explorations and expressions when addressing contemporary culture and its digitally mediated objects and subjects.
At the end of the course the student is able to:
* Apply knowledge of basic programming skills that carry over to almost all programming languages
* Demonstrate a comprehension of software’s composition and functioning that goes beyond its mere usage
* Demonstrate a basic knowledge of natural language processing and automatic text generation
* Demonstrate knowledge of contemporary browser-based scripting and client-server networking
* Demonstrate a critical understanding of the place code and software literacy has within the Humanities
* Reflect on experience in project-based collaborative humanities research
## Syllabus
#### Week 1 (02/11) — Command Line Interface (CLI)
Topics:
* Setup environment
* Command Line Interface
* Version Control
Texts:
* Friedrich Kittler. ["Code (or, How You Can Write Something Differently)"](./texts/kittler-code.pdf)
* Vilém Flusser. ["The Codified World"](./texts/Flusser-The_Codified_World.pdf)
* Stephen Ramsey. ["Learning to Program"](http://stephenramsay.us/2012/06/10/learning-to-program/)
Links:
* [Setup (Git, Node, Sublime Text)](./setup.html)
* [Assignments Configuration](./assignments-conf.html)
#### Week 2 (09/11) — Scripts & Executions
Topics:
* Scripts & Interpretation
* Variables, Arrays, Loops & Functions
* Librairies
Texts:
* Nick Montfort. Introduction (p.1-16) / [10 PRINT CHR$(205.5+RND(1)); : GOTO 10](./texts/10_PRINT_121114.pdf)
* Geoff Cox & Alex McLean. [Double Coding / Speaking Code: Coding as Aesthetic and Political Expression](./texts/CoxMcLean-Double_Coding.pdf)
* [Christopher Strachey](http://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/#_edn4). Love Letters
* Noah Wardrip-Fruin. ["Christopher Strachey: The first digital artist?"](https://grandtextauto.soe.ucsc.edu/2005/08/01/christopher-strachey-first-digital-artist/)
* David Link. [LoveLetters_1.0](http://www.alpha60.de/art/love_letters/) - [Archive](http://www.alpha60.de/art/love_letters/archive/muc/)
__Assignment#1 due (08/11/16 13:00)__
#### Week 3 (16/11) — Clients, Servers & Browsers
Topics:
* Synchrounous Processing / Asynchrounous I/O
* Network Protocols, Topologies & Infrastructure
Texts:
* Tim Berners-Lee. ["The World Wide Web: Past, Present and Future"](https://www.w3.org/People/Berners-Lee/1996/ppf.html)
* Alex Galloway. [Physical Media / Protocol: How Control Exists After Decentralization](./texts/Galloway-Phy.pdf)
* Paul Dourish. ["Protocols, Packets, and Proximity"](./texts/Dourish-PPP.pdf)
__Assignment#2 due (15/11/16 13:00)__
Teams for final project are formed during the class.
#### Week 4 (23/11) — Graphical & Programming Interfaces
Topics:
* Interface: Foregrounds / Backgrounds
* Browser Interpretation, Rendering & Events
* Librairies & Application Programing Interfaces (API)
Texts:
* Christian Ulrik Andersen & Søren Pold. ["Manifesto for a Post-Digital Interface Criticism"](http://mediacommons.futureofthebook.org/tne/pieces/manifesto-post-digital-interface-criticism)
* [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
* W.J.T. Mitchell. [Image / Ctitical Terms for Media Studies](./texts/Mitchell-Image.pdf)
__Assignment#2 due (22/11/16 13:00)__
Each team pitch their project ideas during the class.
#### Week 5 (30/11) — Natural Language Processing
Topics:
* Text & Interpretation
* Text Analysis
* Close / Distant Reading
* Close / Distant Writing
Texts:
* ["What Is Distant Reading?"](http://www.nytimes.com/2011/06/26/books/review/the-mechanic-muse-what-is-distant-reading.html)
* Stephen Ramsay. ["Algorithmic Criticism"](http://www.digitalhumanities.org/companion/view?docId=blackwell/9781405148641/9781405148641.xml&chunk.id=ss1-6-7)
* Mark V Shaney. [“I Spent an Interesting Evening Recently with a Grain of Salt”](http://glenda.cat-v.org/friends/mark-v-shaney/grain-of-salt)
* William S. Burroughs. ["The Cut-Up Method of Brion Gysin"](http://www.ubu.com/papers/burroughs_gysin.html)
<!-- Script/Program: [cutup.py](https://github.com/rossgoodwin/cutup) -->
* [Six Selections by the Oulipo](./texts/six-oulipo.pdf)
* William Gillepsie. ["The Oulipo: Constraints and Collaboration"](http://archive.is/E5wXK#selection-219.0-219.41)
#### Week 6 (07/12) — Advanced Topics / Reflections
Topics: On demand
Texts:
* Alan Liu. ["Where is the Cultural Criticism in the Digital Humanitites?"](http://dhdebates.gc.cuny.edu/debates/text/20)
* Michael Dieter. [“The Virtues of Critical Technical Practice”](./texts/Dieter-CTP.pdf)
* ["Jodi's Infrastructure"](http://www.e-flux.com/journal/74/59810/jodi-s-infrastructure/)
During this session, time will be allocated to answer questions regarding final projects.
#### Week 7 (14/12) — Final Project Presentations
## Assignments
* Assignment #1: tba
* Assignment #2: tba
* Assignment #3: tba
Each individual assignment will be posted on the day of the class (weeks 1, 2, 3).
## Assessment / Grading
Grading for the module consists of (1) three assigments scheduled to be delivered during first part the block and (2) a final group project that will be presentated during the last session of the semester.
* Assignment #1 (15%) - due week 2 (08/11/16 13:00)
* Assignment #2 (15%) - due week 3 (15/11/16 13:00)
* Assignment #3 (15%) - due week 4 (22/11/16 13:00)
* Final group project (45% — individually graded) - due week 7 (14/12/16)
* 15-minute presentation of final project (10% — individually graded) (14/12/16)
Assignments are handed in on the day before the next scheduled session, that is, __Tuesday at 13:00__ at the latest. Assignments are graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented and 3) is the code efficient.
The final project and presentation is a group assignment. Groups will be arranged at the start of the semester on week 2 and each group will give a short pitch of their final project on week 4. Students are free to choose their topic, but must gain approval at least two weeks in advance of the final project's due date (14/12).
Each group must create a final project portfolio (a repository on Github). The deadline to hand in this portfolio is week 7 (14/12). The final project presentation also takes place in week 7. A successful presentation will include a demonstrated ability to field questions from the audience.
## Study load
This course is equivalent to 6 EC, or a study load of 168 hours, resulting in approximately 24 hours per week:
* 7 x classes of 2 hours (14 hours total)
* 3 x assignments (30 hours total)
* Weekly required tutorials and further reading work (72 hours total)
* Final project (52 hours total)
## Instructor
David Gauthier
d.gauthier@uva.nl
BG1 - Turfdraagsterpad 9
Kamernummer: 1.01E
Office hours by appointment

56
setup.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>CTH-2016 / Setup (Git, Node, Sublime Text)</title>
<style type="text/css">code{white-space: pre;}</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style/html5.css">
</head>
<body>
<content>
<header>
<h1 class="title">CTH-2016 / Setup (Git, Node, Sublime Text)</h1>
</header>
<nav id="TOC">
<ul>
<li><a href="#git">Git</a></li>
<li><a href="#node.js">Node.js</a></li>
<li><a href="#sublime-text">Sublime Text</a></li>
<li><a href="#github">Github</a></li>
</ul>
</nav>
<h3 id="git">Git</h3>
<h4 id="download">1. Download</h4>
<p><a href="https://git-scm.com/downloads">Git dowload</a></p>
<h4 id="test-installation">2. Test Installation</h4>
<p>Open a terminal and type:</p>
<pre><code>$ git --version</code></pre>
<p>And you should have this printed out if the install has been successful:</p>
<pre><code>git version 2.10.1</code></pre>
<h4 id="configuring-git-credentials">3. Configuring git (credentials)</h4>
<p>If this is the first time you use git, please make sure you give yourself a user name/email:</p>
<pre><code>$ git config --global user.name &quot;Felix the Cat&quot;
$ git config --global user.name &quot;felix@miauw.org&quot;</code></pre>
<p>These credentials will be used to identify your work when committing to a git repository.</p>
<h3 id="node.js">Node.js</h3>
<h4 id="download-1">1. Download</h4>
<p><a href="https://nodejs.org/en/download/">Node.js download</a> -- install LTS verion v6.9.1</p>
<h4 id="test-installation-1">2. Test Installation</h4>
<p>Open a terminal and type:</p>
<pre><code>$ node --version</code></pre>
<p>And you should have this printed out if the install has been successful:</p>
<pre><code>v6.9.1</code></pre>
<h3 id="sublime-text">Sublime Text</h3>
<h4 id="download-2">Download</h4>
<p><a href="http://www.sublimetext.com/3">Sublime Text 3</a></p>
<h3 id="github">Github</h3>
<h4 id="create-account">Create account</h4>
<p><a href="https://github.com">Github</a></p>
</content>
</body>
</html>

57
setup.md Normal file
View File

@ -0,0 +1,57 @@
---
title: CTH-2016 / Setup (Git, Node, Sublime Text)
---
### Git
#### 1. Download
[Git dowload](https://git-scm.com/downloads)
#### 2. Test Installation
Open a terminal and type:
$ git --version
And you should have this printed out if the install has been successful:
git version 2.10.1
#### 3. Configuring git (credentials)
If this is the first time you use git, please make sure you give yourself a user name/email:
$ git config --global user.name "Felix the Cat"
$ git config --global user.name "felix@miauw.org"
These credentials will be used to identify your work when committing to a git repository.
### Node.js
#### 1. Download
[Node.js download](https://nodejs.org/en/download/) -- install LTS verion v6.9.1
#### 2. Test Installation
Open a terminal and type:
$ node --version
And you should have this printed out if the install has been successful:
v6.9.1
### Sublime Text
#### Download
[Sublime Text 3](http://www.sublimetext.com/3)
### Github
#### Create account
[Github](https://github.com)

BIN
style/BigCaslon.ttf Normal file
View File

Binary file not shown.

483
style/html5.css Normal file
View File

@ -0,0 +1,483 @@
/*
Style.css
A revised Pandoc/Markdown/Multi-Markdown CSS stylesheet tailored for html5
output for the wwwriting site hosted on ....
Author: gauthiier
Revised: 10 Feb 2015
This file is based on:
Buttondown
A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet
Author: Ryan Gray
Date: 15 Feb 2011
Revised: 21 Feb 2012
General style is clean, with minimal re-definition of the defaults or
overrides of user font settings. The body text and header styles are
left alone except title, author and date classes are centered. A Pandoc TOC
is not printed, URLs are printed after hyperlinks in parentheses.
Block quotes are italicized. Tables are lightly styled with lines above
and below the table and below the header with a boldface header. Code
blocks are line wrapped.
All elements that Pandoc and MultiMarkdown use should be listed here, even
if the style is empty so you can easily add styling to anything.
There are some elements in here for HTML5 output of Pandoc, but I have not
gotten around to testing that yet.
*/
/* NOTES:
Stuff tried and failed:
It seems that specifying font-family:serif in Safari will always use
Times New Roman rather than the user's preferences setting.
Making the font size different or a fixed value for print in case the screen
font size is making the print font too big: Making font-size different for
print than for screen causes horizontal lines to disappear in math when using
MathJax under Safari.
*/
/* ---- Front Matter ---- */
/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
Only appears if one of those three are in the document.
*/
div#header, header
{
/* Put border on bottom. Separates it from TOC or body that comes after it. */
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
.title /* Pandoc title header (h1.title) */
{
text-align: center;
}
.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
{
text-align: center;
}
/* Pandoc table of contents DIV when using the --toc option.
NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
*/
div#TOC, nav#TOC
{
/* Put border on bottom to separate it from body. */
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
@media print
{
div#TOC, nav#TOC
{
/* Don't display TOC in print */
display: none;
}
}
/* ---- Headers and sections ---- */
h1, h2, h3, h4, h5, h6
{
/* font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */
page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
}
/* Pandoc with --section-divs option */
div div, section section /* Nested sections */
{
margin-left: 2em; /* This will increasingly indent nested header sections */
}
p {}
/* Main container for the whole content / body section -- html5 */
content {
padding: 0.9em;
max-width: 45em;
display: block;
text-align: justify;
margin: auto;
word-wrap: break-word;
}
.references {
text-align: left;
}
blockquote
{
font-style: italic;
}
li /* All list items */
{
}
li > p /* Loosely spaced list item */
{
margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
}
ul /* Whole unordered list */
{
}
ul li /* Unordered list item */
{
}
ol /* Whole ordered list */
{
}
ol li /* Ordered list item */
{
}
hr {}
/* ---- Some span elements --- */
sub /* Subscripts. Pandoc: H~2~O */
{
}
sup /* Superscripts. Pandoc: The 2^nd^ try. */
{
}
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
{
}
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
{
font-style: normal;
}
strong /* Markdown **strong** or __strong__ */
{
}
/* ---- Links (anchors) ---- */
a /* All links */
{
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
text-decoration: none;
}
@media screen
{
a:hover
{
/* On hover, we indicate a bit more that it is a link. */
text-decoration: underline;
}
}
@media print
{
a {
/* In print, a colored link is useless, so un-style it. */
color: black;
background: transparent;
}
a[href^="http://"]:after, a[href^="https://"]:after
{
/* However, links that go somewhere else, might be useful to the reader,
so for http and https links, print the URL after what was the link
text in parens
*/
content: " (" attr(href) ") ";
font-size: 90%;
}
}
/* ---- Images ---- */
img
{
/* Let it be inline left/right where it wants to be, but verticality make
it in the middle to look nicer, but opinions differ, and if in a multi-line
paragraph, it might not be so great.
*/
vertical-align: middle;
max-width: 100%;
}
div.figure /* Pandoc figure-style image */
{
/* Center the image and caption */
margin-left: auto;
margin-right: auto;
text-align: center;
font-style: italic;
}
/** EXXXTRA **/
figure /* Pandoc figure-style image */
{
/* Center the image and caption */
margin-left: auto;
margin-right: auto;
text-align: center;
font-style: italic;
}
p.caption /* Pandoc figure-style caption within div.figure */
{
/* Inherits div.figure props by default */
}
/* ---- Code blocks and spans ---- */
pre, code
{
background-color: #fdf7ee;
/* BEGIN word wrap */
/* Need all the following to word wrap instead of scroll box */
/* This will override the overflow:auto if present */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
/* END word wrap */
}
pre /* Code blocks */
{
/* Distinguish pre blocks from other text by more than the font with a background tint. */
padding: 0.5em; /* Since we have a background color */
border-radius: 5px; /* Softens it */
/* Give it a some definition */
border: 1px solid #aaa;
/* Set it off left and right, seems to look a bit nicer when we have a background */
margin-left: 0.5em;
margin-right: 0.5em;
}
@media screen
{
pre
{
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
white-space: pre;
overflow: auto;
/* Dotted looks better on screen and solid seems to print better. */
border: 1px dotted #777;
}
}
code /* All inline code spans */
{
}
p > code, li > code /* Code spans in paragraphs and tight lists */
{
/* Pad a little from adjacent text */
padding-left: 2px;
padding-right: 2px;
}
li > p code /* Code span in a loose list */
{
/* We have room for some more background color above and below */
padding: 2px;
}
/* ---- Math ---- */
span.math /* Pandoc inline math default and --jsmath inline math */
{
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
}
div.math /* Pandoc --jsmath display math */
{
}
span.LaTeX /* Pandoc --latexmathml math */
{
}
eq /* Pandoc --gladtex math */
{
}
/* ---- Tables ---- */
/* A clean textbook-like style with horizontal lines above and below and under
the header. Rows highlight on hover to help scanning the table on screen.
*/
table
{
border-collapse: collapse;
border-spacing: 0; /* IE 6 */
border-bottom: 2pt solid #000;
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
/* Center */
margin-left: auto;
margin-right: auto;
}
thead /* Entire table header */
{
border-bottom: 1pt solid #000;
background-color: #eee; /* Does this BG print well? */
}
tr.header /* Each header row */
{
}
tbody /* Entire table body */
{
}
/* Table body rows */
tr {
}
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
{
background-color: #eee;
}
/* Odd and even rows */
tr.odd {}
tr.even {}
td, th /* Table cells and table header cells */
{
vertical-align: top; /* Word */
vertical-align: baseline; /* Others */
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
/*
tr td:last-child, tr th:last-child
{
padding-right: 0;
}
tr td:first-child, tr th:first-child
{
padding-left: 0;
}
*/
th /* Table header cells */
{
font-weight: bold;
}
tfoot /* Table footer (what appears here if caption is on top?) */
{
}
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
{
caption-side: top;
border: none;
font-size: 0.9em;
font-style: italic;
text-align: center;
margin-bottom: 0.3em; /* Good for when on top */
padding-bottom: 0.2em;
}
/* ---- Definition lists ---- */
dl /* The whole list */
{
border-top: 2pt solid black;
padding-top: 0.5em;
border-bottom: 2pt solid black;
}
dt /* Definition term */
{
font-weight: bold;
}
dd+dt /* 2nd or greater term in the list */
{
border-top: 1pt solid black;
padding-top: 0.5em;
}
dd /* A definition */
{
margin-bottom: 0.5em;
}
dd+dd /* 2nd or greater definition of a term */
{
border-top: 1px solid black; /* To separate multiple definitions */
}
/* ---- Footnotes ---- */
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
font-size: small;
vertical-align: text-top;
}
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
{
}
@media print
{
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
{
/* Don't display these at all in print since the arrow is only something to click on */
display: none;
}
}
div.footnotes /* Pandoc footnotes div at end of the document */
{
}
div.footnotes li[id^="fn"] /* A footnote item within that div */
{
}
/* You can class stuff as "noprint" to not print.
Useful since you can't set this media conditional inside an HTML element's
style attribute (I think), and you don't want to make another stylesheet that
imports this one and adds a class just to do this.
*/
@media print
{
.noprint
{
display:none;
}
}

490
style/style.css Normal file
View File

@ -0,0 +1,490 @@
/*
Style.css
A revised Pandoc/Markdown/Multi-Markdown CSS stylesheet tailored for html5
output for the wwwriting site hosted on ....
Author: gauthiier
Revised: 10 Feb 2015
This file is based on:
Buttondown
A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet
Author: Ryan Gray
Date: 15 Feb 2011
Revised: 21 Feb 2012
General style is clean, with minimal re-definition of the defaults or
overrides of user font settings. The body text and header styles are
left alone except title, author and date classes are centered. A Pandoc TOC
is not printed, URLs are printed after hyperlinks in parentheses.
Block quotes are italicized. Tables are lightly styled with lines above
and below the table and below the header with a boldface header. Code
blocks are line wrapped.
All elements that Pandoc and MultiMarkdown use should be listed here, even
if the style is empty so you can easily add styling to anything.
There are some elements in here for HTML5 output of Pandoc, but I have not
gotten around to testing that yet.
*/
/* NOTES:
Stuff tried and failed:
It seems that specifying font-family:serif in Safari will always use
Times New Roman rather than the user's preferences setting.
Making the font size different or a fixed value for print in case the screen
font size is making the print font too big: Making font-size different for
print than for screen causes horizontal lines to disappear in math when using
MathJax under Safari.
*/
/* ---- Front Matter ---- */
/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
Only appears if one of those three are in the document.
*/
div#header, header
{
/* Put border on bottom. Separates it from TOC or body that comes after it. */
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
.title /* Pandoc title header (h1.title) */
{
text-align: center;
}
.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
{
text-align: center;
}
/* Pandoc table of contents DIV when using the --toc option.
NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
*/
div#TOC, nav#TOC
{
/* Put border on bottom to separate it from body. */
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
@media print
{
div#TOC, nav#TOC
{
/* Don't display TOC in print */
display: none;
}
}
/* ---- Headers and sections ---- */
h1, h2, h3, h4, h5, h6
{
/* font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */
page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
}
/* Pandoc with --section-divs option */
div div, section section /* Nested sections */
{
margin-left: 2em; /* This will increasingly indent nested header sections */
}
p {}
/* Main container for the whole content / body section -- html5 */
content {
padding: 0.9em;
max-width: 45em;
display: block;
text-align: justify;
margin: auto;
word-wrap: break-word;
}
.references {
text-align: left;
}
blockquote
{
font-style: italic;
}
li /* All list items */
{
}
li > p /* Loosely spaced list item */
{
margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
}
ul /* Whole unordered list */
{
}
ul li /* Unordered list item */
{
}
ol /* Whole ordered list */
{
}
ol li /* Ordered list item */
{
}
hr {}
/* ---- Some span elements --- */
sub /* Subscripts. Pandoc: H~2~O */
{
}
sup /* Superscripts. Pandoc: The 2^nd^ try. */
{
}
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
{
}
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
{
font-style: normal;
}
strong /* Markdown **strong** or __strong__ */
{
}
/* ---- Links (anchors) ---- */
a /* All links */
{
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
text-decoration: none;
}
@media screen
{
a:hover
{
/* On hover, we indicate a bit more that it is a link. */
text-decoration: underline;
}
}
@media print
{
a {
/* In print, a colored link is useless, so un-style it. */
color: black;
background: transparent;
}
a[href^="http://"]:after, a[href^="https://"]:after
{
/* However, links that go somewhere else, might be useful to the reader,
so for http and https links, print the URL after what was the link
text in parens
*/
content: " (" attr(href) ") ";
font-size: 90%;
}
}
/* ---- Images ---- */
img
{
/* Let it be inline left/right where it wants to be, but verticality make
it in the middle to look nicer, but opinions differ, and if in a multi-line
paragraph, it might not be so great.
*/
vertical-align: middle;
max-width: 100%;
}
div.figure /* Pandoc figure-style image */
{
/* Center the image and caption */
margin-left: auto;
margin-right: auto;
text-align: center;
font-style: italic;
}
/** EXXXTRA **/
figure /* Pandoc figure-style image */
{
/* Center the image and caption */
margin-left: auto;
margin-right: auto;
text-align: center;
font-style: italic;
}
p.caption /* Pandoc figure-style caption within div.figure */
{
/* Inherits div.figure props by default */
}
.inline-img
{
display: block;
margin-right: auto;
margin-left: auto;
}
/* ---- Code blocks and spans ---- */
pre, code
{
background-color: #fdf7ee;
/* BEGIN word wrap */
/* Need all the following to word wrap instead of scroll box */
/* This will override the overflow:auto if present */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
/* END word wrap */
}
pre /* Code blocks */
{
/* Distinguish pre blocks from other text by more than the font with a background tint. */
padding: 0.5em; /* Since we have a background color */
border-radius: 5px; /* Softens it */
/* Give it a some definition */
border: 1px solid #aaa;
/* Set it off left and right, seems to look a bit nicer when we have a background */
margin-left: 0.5em;
margin-right: 0.5em;
}
@media screen
{
pre
{
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
white-space: pre;
overflow: auto;
/* Dotted looks better on screen and solid seems to print better. */
border: 1px dotted #777;
}
}
code /* All inline code spans */
{
}
p > code, li > code /* Code spans in paragraphs and tight lists */
{
/* Pad a little from adjacent text */
padding-left: 2px;
padding-right: 2px;
}
li > p code /* Code span in a loose list */
{
/* We have room for some more background color above and below */
padding: 2px;
}
/* ---- Math ---- */
span.math /* Pandoc inline math default and --jsmath inline math */
{
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
}
div.math /* Pandoc --jsmath display math */
{
}
span.LaTeX /* Pandoc --latexmathml math */
{
}
eq /* Pandoc --gladtex math */
{
}
/* ---- Tables ---- */
/* A clean textbook-like style with horizontal lines above and below and under
the header. Rows highlight on hover to help scanning the table on screen.
*/
table
{
border-collapse: collapse;
border-spacing: 0; /* IE 6 */
border-bottom: 2pt solid #000;
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
/* Center */
margin-left: auto;
margin-right: auto;
}
thead /* Entire table header */
{
border-bottom: 1pt solid #000;
background-color: #eee; /* Does this BG print well? */
}
tr.header /* Each header row */
{
}
tbody /* Entire table body */
{
}
/* Table body rows */
tr {
}
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
{
background-color: #eee;
}
/* Odd and even rows */
tr.odd {}
tr.even {}
td, th /* Table cells and table header cells */
{
vertical-align: top; /* Word */
vertical-align: baseline; /* Others */
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
/*
tr td:last-child, tr th:last-child
{
padding-right: 0;
}
tr td:first-child, tr th:first-child
{
padding-left: 0;
}
*/
th /* Table header cells */
{
font-weight: bold;
}
tfoot /* Table footer (what appears here if caption is on top?) */
{
}
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
{
caption-side: top;
border: none;
font-size: 0.9em;
font-style: italic;
text-align: center;
margin-bottom: 0.3em; /* Good for when on top */
padding-bottom: 0.2em;
}
/* ---- Definition lists ---- */
dl /* The whole list */
{
border-top: 2pt solid black;
padding-top: 0.5em;
border-bottom: 2pt solid black;
}
dt /* Definition term */
{
font-weight: bold;
}
dd+dt /* 2nd or greater term in the list */
{
border-top: 1pt solid black;
padding-top: 0.5em;
}
dd /* A definition */
{
margin-bottom: 0.5em;
}
dd+dd /* 2nd or greater definition of a term */
{
border-top: 1px solid black; /* To separate multiple definitions */
}
/* ---- Footnotes ---- */
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
font-size: small;
vertical-align: text-top;
}
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
{
}
@media print
{
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
{
/* Don't display these at all in print since the arrow is only something to click on */
display: none;
}
}
div.footnotes /* Pandoc footnotes div at end of the document */
{
}
div.footnotes li[id^="fn"] /* A footnote item within that div */
{
}
/* You can class stuff as "noprint" to not print.
Useful since you can't set this media conditional inside an HTML element's
style attribute (I think), and you don't want to make another stylesheet that
imports this one and adds a class just to do this.
*/
@media print
{
.noprint
{
display:none;
}
}

71
style/template.html5 Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html$if(lang)$ lang="$lang$"$endif$>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
$for(author-meta)$
<meta name="author" content="$author-meta$">
$endfor$
$if(date-meta)$
<meta name="dcterms.date" content="$date-meta$">
$endif$
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
<style type="text/css">code{white-space: pre;}</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
$if(quotes)$
<style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
$endif$
$if(highlighting-css)$
<style type="text/css">
$highlighting-css$
</style>
$endif$
$for(css)$
<link rel="stylesheet" href="$css$">
$endfor$
$if(math)$
$math$
$endif$
$for(header-includes)$
$header-includes$
$endfor$
</head>
<body>
$for(include-before)$
$include-before$
$endfor$
<content>
$if(title)$
<header>
<h1 class="title">$title$</h1>
$if(subtitle)$
<h1 class="subtitle">$subtitle$</h1>
$endif$
$if(cover)$
<figure>
<img src="$cover$"/>
</figure>
$endif$
$for(author)$
<h2 class="author">$author$</h2>
$endfor$
$if(date)$
<h3 class="date">$date$</h3>
$endif$
</header>
$endif$
$if(toc)$
<nav id="$idprefix$TOC">
$toc$
</nav>
$endif$
$body$
</content>
$for(include-after)$
$include-after$
$endfor$
</body>
</html>

BIN
texts/10_PRINT_121114.pdf Normal file
View File

Binary file not shown.

BIN
texts/CoxMcLean-Double_Coding.pdf Normal file
View File

Binary file not shown.

3739
texts/Dieter-CTP.pdf Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
texts/Dourish-PPP.pdf Normal file
View File

Binary file not shown.

BIN
texts/Flusser-The_Codified_World.pdf Normal file
View File

Binary file not shown.

BIN
texts/Galloway-Phy.pdf Normal file
View File

Binary file not shown.

BIN
texts/Mitchell-Image copy.pdf Normal file
View File

Binary file not shown.

BIN
texts/Mitchell-Image.pdf Normal file
View File

Binary file not shown.

BIN
texts/kittler-code.pdf Normal file
View File

Binary file not shown.

BIN
texts/six-oulipo.pdf Normal file
View File

Binary file not shown.