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

Compare commits

base: gauthiier:master
Branches Tags
gauthiier:master
gauthiier:gh-pages
..
compare: gauthiier:gh-pages
Branches Tags
gauthiier:master
gauthiier:gh-pages

No commits in common. "master" and "gh-pages" have entirely different histories.
master ... gh-pages

16 changed files with 229 additions and 793 deletions
Show Stats Expand all files Collapse all files

60
Lesson1.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="generator" content="pandoc"> <meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Lesson1</title> <title></title>
<style type="text/css">code{white-space: pre;}</style> <style type="text/css">code{white-space: pre;}</style>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@ -18,7 +18,7 @@
<h3 id="goals">Goals</h3> <h3 id="goals">Goals</h3>
<p>The aim of this lesson is to present the various ways that computers represent text internally, that is, characters as digits. The lesson is tailored in giving the reader the basic knowledge of standards that establish the quanta of text (data). Our hope in doing so is to give a feel of a kind of materiality of text and present the ways in which various levels of abstraction are applied to it.</p> <p>The aim of this lesson is to present the various ways that computers represent text internally, that is, characters as digits. The lesson is tailored in giving the reader the basic knowledge of standards that establish the quanta of text (data). Our hope in doing so is to give a feel of a kind of materiality of text and present the ways in which various levels of abstraction are applied to it.</p>
<p>In a nutshell, the goals of this lesson are:</p> <p>In a nutshell, the goals of this lesson are:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li>Understand the various ways in which characters are represented and encoded as digits.</li> <li>Understand the various ways in which characters are represented and encoded as digits.</li>
<li>Derive a basic understanding of how proprietary text formats are encoded.</li> <li>Derive a basic understanding of how proprietary text formats are encoded.</li>
<li>Develop a critical stance on why proprietary text formats might be problematic.</li> <li>Develop a critical stance on why proprietary text formats might be problematic.</li>
@ -26,12 +26,12 @@
<li>Learn how to use a plain text editor to write, view and inspect different open standards encodings of a given text file.</li> <li>Learn how to use a plain text editor to write, view and inspect different open standards encodings of a given text file.</li>
</ol> </ol>
<h3 id="history">History</h3> <h3 id="history">History</h3>
<p>Has everyone heard of the byte format? If you didn’t it’s about time you do as you employ this legacy format daily when using your computer. A byte is the most basic quanta of computing and is composed of 8 bits, where a bit stands for what is commonly represented by a 0 or 1. Hence a byte is a 8-bits “packet” which can represent decimal numbers ranging from 0 to 255 (or -128 to 127). In this lesson we will use the <a href="https://en.wikipedia.org/wiki/Hexadecimal">Hexadecimal</a> notation to represent bytes. A byte is an historical format and encapsulate the most basic data structure in computing machinery, a standard introduced by IBM for its flagship <a href="http://www.computermuseum.li/Testpage/IBM-360-1964.htm">IBM/360</a> mainframe machine in 1964.<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a></p> <p>Has everyone heard of the byte format? If you didn't it's about time you do as you employ this legacy format daily when using your computer. A byte is the most basic quanta of computing and is composed of 8 bits, where a bit stands for what is commonly represented by a 0 or 1. Hence a byte is a 8-bits &quot;packet&quot; which can represent decimal numbers ranging from 0 to 255 (or -128 to 127). In this lesson we will use the <a href="https://en.wikipedia.org/wiki/Hexadecimal">Hexadecimal</a> notation to represent bytes. A byte is an historical format and encapsulate the most basic data structure in computing machinery, a standard introduced by IBM for its flagship <a href="http://www.computermuseum.li/Testpage/IBM-360-1964.htm">IBM/360</a> mainframe machine in 1964.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a></p>
<p>Roughly at the same time (1963) another (updated) standard was devised for the encoding of characters: ASCII [ref]. ASCII conceived a 7-bit format for characters that was factorised into an 8-bit format on the IBM/360. With a 7-bit format, ASCII had the possibility to encode 127 characters. However, the IBM/360 opted to use the legacy <a href="https://en.wikipedia.org/wiki/EBCDIC">EBCDIC</a> 8-bit format as default character set (dubbed “charset”) on all software developed for the IBM/360<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a>. Hence the mass adoption of ASCII as main default charset in computing systems came years after mainly with the advent of PCs.</p> <p>Roughly at the same time (1963) another (updated) standard was devised for the encoding of characters: ASCII [ref]. ASCII conceived a 7-bit format for characters that was factorised into an 8-bit format on the IBM/360. With a 7-bit format, ASCII had the possibility to encode 127 characters. However, the IBM/360 opted to use the legacy <a href="https://en.wikipedia.org/wiki/EBCDIC">EBCDIC</a> 8-bit format as default character set (dubbed &quot;charset&quot;) on all software developed for the IBM/360<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a>. Hence the mass adoption of ASCII as main default charset in computing systems came years after mainly with the advent of PCs.</p>
<p>Is ASCII still in use today? Yes and no. ASCII has some important limitations as it was designed for Latin-based languages and does not support non-Latin characters (hence a 7-bit format for an Latin alphabet). With the wide spread of PCs around the world and the rise of the Internet as main communication infrastructure, the need for a single character format (albeit a Universal Format) accounting for both Latin and non-Latin characters (Cyrillic, Hebrew, Arabic, Turkish to name a few) was imminent at the beginning for the 90s.</p> <p>Is ASCII still in use today? Yes and no. ASCII has some important limitations as it was designed for Latin-based languages and does not support non-Latin characters (hence a 7-bit format for an Latin alphabet). With the wide spread of PCs around the world and the rise of the Internet as main communication infrastructure, the need for a single character format (albeit a Universal Format) accounting for both Latin and non-Latin characters (Cyrillic, Hebrew, Arabic, Turkish to name a few) was imminent at the beginning for the 90s.</p>
<p>Hence the establishment of the Unicode standard which aim is to devise and maintain a Universal Character Set (UCS) composed of special codes points for each character (a kind of “meta”-charset if you want, composed of specific unicode codes)<a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a>. Unicode does not specify specific encodings for its code points. Rather, encodings are part of specific implementations of the UCS such as UTF (UCS Transformation Format). The most notable UTF being UTF-8.<a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a> The special feature of UTF-8 is that it is directly backward compatible with ASCII (an 8-bit ASCII character as the same encoding as its UTF-8 version) and has the property of being variable in length, meaning that Latin characters are encoded with a single byte while other non-Latin characters may be encoded with up to 4 bytes.<a href="#fn5" class="footnote-ref" id="fnref5" role="doc-noteref"><sup>5</sup></a> Nowadays, UTF-8 is one of the most (if not <em>the</em> most) mass adopted / ubiquitous character encoding format.<a href="#fn6" class="footnote-ref" id="fnref6" role="doc-noteref"><sup>6</sup></a></p> <p>Hence the establishment of the Unicode standard which aim is to devise and maintain a Universal Character Set (UCS) composed of special codes points for each character (a kind of &quot;meta&quot;-charset if you want, composed of specific unicode codes)<a href="#fn3" class="footnoteRef" id="fnref3"><sup>3</sup></a>. Unicode does not specify specific encodings for its code points. Rather, encodings are part of specific implementations of the UCS such as UTF (UCS Transformation Format). The most notable UTF being UTF-8.<a href="#fn4" class="footnoteRef" id="fnref4"><sup>4</sup></a> The special feature of UTF-8 is that it is directly backward compatible with ASCII (an 8-bit ASCII character as the same encoding as its UTF-8 version) and has the property of being variable in length, meaning that Latin characters are encoded with a single byte while other non-Latin characters may be encoded with up to 4 bytes.<a href="#fn5" class="footnoteRef" id="fnref5"><sup>5</sup></a> Nowadays, UTF-8 is one of the most (if not <em>the</em> most) mass adopted / ubiquitous character encoding format.<a href="#fn6" class="footnoteRef" id="fnref6"><sup>6</sup></a></p>
<h3 id="how">How</h3> <h3 id="how">How</h3>
<p>Let’s start with a very simple example to illustrate how text is encoded.</p> <p>Let's start with a very simple example to illustrate how text is encoded.</p>
<p>The following sentence</p> <p>The following sentence</p>
<pre><code>this is a sentence encoded in UTF-8.</code></pre> <pre><code>this is a sentence encoded in UTF-8.</code></pre>
<p>is equivalent to UTF-8</p> <p>is equivalent to UTF-8</p>
@ -45,42 +45,48 @@
<p>and Unicode</p> <p>and Unicode</p>
<pre><code>U+0111 U+00e2 U+0079 U+0020 U+006c U+00e0 U+0020 U+006d U+1ed9 U+0074 U+0020 U+0063 U+00e2 U+0075 U+0020 U+0055 U+0054 U+0046 U+002d U+0038 U+002e</code></pre> <pre><code>U+0111 U+00e2 U+0079 U+0020 U+006c U+00e0 U+0020 U+006d U+1ed9 U+0074 U+0020 U+0063 U+00e2 U+0075 U+0020 U+0055 U+0054 U+0046 U+002d U+0038 U+002e</code></pre>
<p>A few observations from the examples above are worth noting:</p> <p>A few observations from the examples above are worth noting:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li><p>For the English sentence, the UTF-8 encoding and Unicode representation are basically the same. This is because what we are looking at is basically straight ASCII! Unicode’s UCS was designed to integrate ASCII into it’s core coding scheme and hence used the same codes for its Latin-based subset. UTF-8 implements this (obviously) into its encoding scheme.</p></li> <li><p>For the English sentence, the UTF-8 encoding and Unicode representation are basically the same. This is because what we are looking at is basically straight ASCII! Unicode's UCS was designed to integrate ASCII into it's core coding scheme and hence used the same codes for its Latin-based subset. UTF-8 implements this (obviously) into its encoding scheme.</p></li>
<li><p>UTF-8 encoding of the English sentence is far more compact then the Unicode UCS. For a single character, UTF-8 utilises two bytes rather than four from the UCS.</p></li> <li><p>UTF-8 encoding of the English sentence is far more compact then the Unicode UCS. For a single character, UTF-8 utilises two bytes rather than four from the UCS.</p></li>
<li><p>For the Vietnamese sentence, things get a little more interesting. Here the UTF-8 encoding and Unicode representation are <em>not</em> the same. As explained in the last section, UTF-8 encoding format and Unicode code points are not meant to be equivalent, one is a standard (Unicode) while the other is the implementation of this standard (UTF-8).</p></li> <li><p>For the Vietnamese sentence, things get a little more interesting. Here the UTF-8 encoding and Unicode representation are <em>not</em> the same. As explained in the last section, UTF-8 encoding format and Unicode code points are not meant to be equivalent, one is a standard (Unicode) while the other is the implementation of this standard (UTF-8).</p></li>
<li><p>UTF-8 encoding of the Vietnamese sentence is <em>not</em> necessarily more compact then Unicode’s UCS. In fact we see UTF-8 utilising four bytes to encode some characters (remember that UTF-8 is of variable-length). For example the character ‘â’ is ‘U+00e2’ in UCS (two significant bytes) while ‘c3a2’ in UTF-8 (four significant bytes). A great chart to look at the various codes and encoding can be found here: <a href="http://utf8-chartable.de">http://utf8-chartable.de</a></p></li> <li><p>UTF-8 encoding of the Vietnamese sentence is <em>not</em> necessarily more compact then Unicode's UCS. In fact we see UTF-8 utilising four bytes to encode some characters (remember that UTF-8 is of variable-length). For example the character 'â' is 'U+00e2' in UCS (two significant bytes) while 'c3a2' in UTF-8 (four significant bytes). A great chart to look at the various codes and encoding can be found here: <a href="http://utf8-chartable.de">http://utf8-chartable.de</a></p></li>
</ol> </ol>
<p>At this point, we should stress the fact that what is inscribed in computing memory is the <em>encoding</em> of text and not its Unicode representation. In other words, UTF-8 is the scheme from which computers inscribe text to physical memory using their read/write mechanisms. What is inscribed physically are single bits following the UTF-8 encodings scheme that gives meaning to 8-bit “packets” as characters. In the example above we have employed the hexadecimal notation to represent such “packets”/data. This is, of course, an kind of abstraction from the physical layer where text is actually inscribed, a convenient way for us humans to decipher and group bits. It nonetheless gives us a feel for the type of “materiality” of text inscribed on and manipulated by computing machine. For a more in depth analysis of physical inscription mechanisms, we refer the forensics work of Kirschenbaum <span class="citation" data-cites="kirschenbaum_mechanisms_2012">[@kirschenbaum_mechanisms_2012]</span> on the subject.</p> <p>At this point, we should stress the fact that what is inscribed in computing memory is the <em>encoding</em> of text and not its Unicode representation. In other words, UTF-8 is the scheme from which computers inscribe text to physical memory using their read/write mechanisms. What is inscribed physically are single bits following the UTF-8 encodings scheme that gives meaning to 8-bit &quot;packets&quot; as characters. In the example above we have employed the hexadecimal notation to represent such &quot;packets&quot;/data. This is, of course, an kind of abstraction from the physical layer where text is actually inscribed, a convenient way for us humans to decipher and group bits. It nonetheless gives us a feel for the type of &quot;materiality&quot; of text inscribed on and manipulated by computing machine. For a more in depth analysis of physical inscription mechanisms, we refer the forensics work of Kirschenbaum <span class="citation">(Kirschenbaum 2012)</span> on the subject.</p>
<h4 id="plain-text-editors">(Plain) Text Editors</h4> <h4 id="plain-text-editors">(Plain) Text Editors</h4>
<p>But how do I go about and start looking up the encoding of a particular text? Well it is pretty simple: don’t use word processing software; use a <a href="https://en.wikipedia.org/wiki/Text_editor">plain text editor</a>. For the examples above we’ve used <a href="http://www.sublimetext.com">Sublime Text</a><a href="#fn7" class="footnote-ref" id="fnref7" role="doc-noteref"><sup>7</sup></a> to manipulate and reveal encodings of our sentences. The idea with plain text editors is that they give it all, they are usually very basic in appearance yet usually have striking features that are central to the practice of computer programming. There exist a panoply of good and powerful text editors<a href="#fn8" class="footnote-ref" id="fnref8" role="doc-noteref"><sup>8</sup></a> and some are even legacy editors such as <a href="https://www.gnu.org/software/emacs/">Emacs</a> and <a href="http://www.vim.org">Vi(m)</a>. In this lesson (and the remaining ones) we will use Sublime to illustrate techniques and concept, yet any other editors would suffice without a doubt.</p> <p>But how do I go about and start looking up the encoding of a particular text? Well it is pretty simple: don't use word processing software; use a <a href="https://en.wikipedia.org/wiki/Text_editor">plain text editor</a>. For the examples above we've used <a href="http://www.sublimetext.com">Sublime Text</a><a href="#fn7" class="footnoteRef" id="fnref7"><sup>7</sup></a> to manipulate and reveal encodings of our sentences. The idea with plain text editors is that they give it all, they are usually very basic in appearance yet usually have striking features that are central to the practice of computer programming. There exist a panoply of good and powerful text editors<a href="#fn8" class="footnoteRef" id="fnref8"><sup>8</sup></a> and some are even legacy editors such as <a href="https://www.gnu.org/software/emacs/">Emacs</a> and <a href="http://www.vim.org">Vi(m)</a>. In this lesson (and the remaining ones) we will use Sublime to illustrate techniques and concept, yet any other editors would suffice without a doubt.</p>
<p>Now equipped with an editor, let’s look up what a word processing file looks like:</p> <p>Now equipped with an editor, let's look up what a word processing file looks like:</p>
<p><img src="img/garbage.png" /></p> <div class="figure">
<img src="img/garbage.png" />
</div>
<p>To select the encoding of a file using Sublime: <strong>Menu</strong> -&gt; <strong>File</strong> -&gt; <strong>Reopen with Encoding</strong></p> <p>To select the encoding of a file using Sublime: <strong>Menu</strong> -&gt; <strong>File</strong> -&gt; <strong>Reopen with Encoding</strong></p>
<p>The above file is an Apple Pages file that we have opened using Sublime with UTF-8 decoding.</p> <p>The above file is an Apple Pages file that we have opened using Sublime with UTF-8 decoding.</p>
<p>As you can see there is many characters that do not read properly, that is, not human readable. In fact, we can see that UTF-8 decodes the bytes in the file and maps their content to some Unicode “control” character. These “control” characters are part of the UCS and are characters representing computer commands if you like, rather than elements of an alphabet. For example a “new line” character representing a new line in a text (when the “return” key is pressed on a keyboard) has a “LF” (Line Feed) symbol with UCS U+000A value. There exists a vaietry of such characters.<a href="#fn9" class="footnote-ref" id="fnref9" role="doc-noteref"><sup>9</sup></a></p> <p>As you can see there is many characters that do not read properly, that is, not human readable. In fact, we can see that UTF-8 decodes the bytes in the file and maps their content to some Unicode &quot;control&quot; character. These &quot;control&quot; characters are part of the UCS and are characters representing computer commands if you like, rather than elements of an alphabet. For example a &quot;new line&quot; character representing a new line in a text (when the &quot;return&quot; key is pressed on a keyboard) has a &quot;LF&quot; (Line Feed) symbol with UCS U+000A value. There exists a vaietry of such characters.<a href="#fn9" class="footnoteRef" id="fnref9"><sup>9</sup></a></p>
<p>However, in the case of the Apple Pages file, these “control” characters are meaningless as they do not obviously follow the Unicode standard. Instead Pages inserts into it’s text specific commands that only have meaning for the Apple Pages program. In short, these are bytes that have meaning only to Apple and their specific regime of encoding files. Such commands may refer to specific ways to display certain types of characters, or perhaps signify the beginning of a paragraph, or specify a font to render text, or even be the data of an image (who knows?). Pages is not a standard format but a proprietary one, therefore it is not possible to instruct my text editor on how to decode the bytes found in the Pages document. In a sense, in having all data part of a single file (information about the design, layout, font, etc.) it makes the files overly complex compared to plain text format. As a result, word processing files tend to be larger in size than plain UTF-8 encoded ones. The text from the file above has 1 389 characters. Its Apples Pages file is composed of 179 759 bytes while its plain UTF-8 version only 1 391 bytes (two extra bytes for the “EOF” control character).</p> <p>However, in the case of the Apple Pages file, these &quot;control&quot; characters are meaningless as they do not obviously follow the Unicode standard. Instead Pages inserts into it's text specific commands that only have meaning for the Apple Pages program. In short, these are bytes that have meaning only to Apple and their specific regime of encoding files. Such commands may refer to specific ways to display certain types of characters, or perhaps signify the beginning of a paragraph, or specify a font to render text, or even be the data of an image (who knows?). Pages is not a standard format but a proprietary one, therefore it is not possible to instruct my text editor on how to decode the bytes found in the Pages document. In a sense, in having all data part of a single file (information about the design, layout, font, etc.) it makes the files overly complex compared to plain text format. As a result, word processing files tend to be larger in size than plain UTF-8 encoded ones. The text from the file above has 1 389 characters. Its Apples Pages file is composed of 179 759 bytes while its plain UTF-8 version only 1 391 bytes (two extra bytes for the &quot;EOF&quot; control character).</p>
<p>In turn the obvious unreadability of proprietary word processing file formats (such as Apple Pages, MS Word) coupled with their tendency to bloat file, makes them problematic in terms of politics of encoding, usability and efficiency. Hence, standards like UTF-8 and the use of plain text editors are viable alternative for writing academic text and sustained by a practice that is unbounded by obfuscating interests and techniques. What is human-readable is human-understandable.</p> <p>In turn the obvious unreadability of proprietary word processing file formats (such as Apple Pages, MS Word) coupled with their tendency to bloat file, makes them problematic in terms of politics of encoding, usability and efficiency. Hence, standards like UTF-8 and the use of plain text editors are viable alternative for writing academic text and sustained by a practice that is unbounded by obfuscating interests and techniques. What is human-readable is human-understandable.</p>
<h3 id="extra">Extra</h3> <h3 id="extra">Extra</h3>
<p>As an exercise for this lesson, please feel free to experiment with <a href="http://www.sublimetext.com">Sublime Text</a> (especially its encoding features): <strong>Menu</strong> -&gt; <strong>File</strong> -&gt; <strong>Reopen with Encoding</strong></p> <p>As an exercise for this lesson, please feel free to experiment with <a href="http://www.sublimetext.com">Sublime Text</a> (especially its encoding features): <strong>Menu</strong> -&gt; <strong>File</strong> -&gt; <strong>Reopen with Encoding</strong></p>
<p><a href="http://www.sublimetext.com/docs/2/">Sublime Text 2 Official Documentation</a></p> <p><a href="http://www.sublimetext.com/docs/2/">Sublime Text 2 Official Documentation</a></p>
<p><a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/sublime-text-2/">Sublime Text 2 Non-Official Documentation</a></p> <p><a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/sublime-text-2/">Sublime Text 2 Non-Official Documentation</a></p>
<p>Note: If you are a plain text editing novice, please make sure you understand just-enough basics to start. Some of the tutorials only are tailored for advanced programmers and their jargon may be confusing at times.</p> <p>Note: If you are a plain text editing novice, please make sure you understand just-enough basics to start. Some of the tutorials only are tailored for advanced programmers and their jargon may be confusing at times.</p>
<h3 id="references">References</h3> <div class="references">
<section class="footnotes footnotes-end-of-document" role="doc-endnotes"> <h3>References</h3>
<p>Amdahl, G.M., G.A. Blaauw, and F.P. Brooks. 1964. “Architecture of the IBM System/360.” <em>IBM Journal of Research and Development</em> 8 (2): 87–101. doi:<a href="http://dx.doi.org/10.1147/rd.82.0087">10.1147/rd.82.0087</a>.</p>
<p>Kirschenbaum, Matthew G. 2012. <em>Mechanisms: new Media and the Forensic Imagination</em>. Cambridge, Mass.; London: MIT Press.</p>
</div>
<div class="footnotes">
<hr /> <hr />
<ol> <ol>
<li id="fn1" role="doc-endnote"><p>The IBM/360 is one of the most sold computer of its time. For a discussion about the 8-bit byte format see <em>Data Format</em> section in <span class="citation" data-cites="amdahl_architecture_1964">[@amdahl_architecture_1964]</span>.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn1"><p>The IBM/360 is one of the most sold computer of its time. For a discussion about the 8-bit byte format see <em>Data Format</em> section in <span class="citation">(Amdahl, Blaauw, and Brooks 1964)</span>.<a href="#fnref1">↩</a></p></li>
<li id="fn2" role="doc-endnote"><p>See section <em>ASCII vs BCD codes</em> in <span class="citation" data-cites="amdahl_architecture_1964">[@amdahl_architecture_1964]</span> and for more information about the history of the ASCII format see the writings of <a href="http://www.bobbemer.com/BYTE.HTM">Bob Bemer</a>.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn2"><p>See section <em>ASCII vs BCD codes</em> in <span class="citation">(Amdahl, Blaauw, and Brooks 1964)</span> and for more information about the history of the ASCII format see the writings of <a href="http://www.bobbemer.com/BYTE.HTM">Bob Bemer</a>.<a href="#fnref2">↩</a></p></li>
<li id="fn3" role="doc-endnote"><p>Unicode codes are represented with a ‘U’ prefix before their numerical codes. For a table of all the codes, refer to <a href="http://unicode-table.com/">http://unicode-table.com/</a><a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn3"><p>Unicode codes are represented with a 'U' prefix before their numerical codes. For a table of all the codes, refer to <a href="http://unicode-table.com/">http://unicode-table.com/</a><a href="#fnref3">↩</a></p></li>
<li id="fn4" role="doc-endnote"><p>See also UTF-16, UTF-32 and the Unicode <a href="http://www.unicode.org/faq/utf_bom.html">FAQ</a> for disambiguation.<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn4"><p>See also UTF-16, UTF-32 and the Unicode <a href="http://www.unicode.org/faq/utf_bom.html">FAQ</a> for disambiguation.<a href="#fnref4">↩</a></p></li>
<li id="fn5" role="doc-endnote"><p>UTF-8 was conceived by <a href="https://en.wikipedia.org/wiki/Ken_Thompson">Ken Thompson</a> and <a href="https://en.wikipedia.org/wiki/Rob_Pike">Rob Pike</a> on a placemat in a <a href="http://www.cl.cam.ac.uk/~mgk25/ucs/utf-8-history.txt">New Jersey diner in 1992</a>.<a href="#fnref5" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn5"><p>UTF-8 was conceived by <a href="https://en.wikipedia.org/wiki/Ken_Thompson">Ken Thompson</a> and <a href="https://en.wikipedia.org/wiki/Rob_Pike">Rob Pike</a> on a placemat in a <a href="http://www.cl.cam.ac.uk/~mgk25/ucs/utf-8-history.txt">New Jersey diner in 1992</a>.<a href="#fnref5">↩</a></p></li>
<li id="fn6" role="doc-endnote"><p>Especially on the Internet – see character encodings historical trend <a href="http://w3techs.com/technologies/history_overview/character_encoding/ms/y">chart</a>.<a href="#fnref6" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn6"><p>Especially on the Internet -- see character encodings historical trend <a href="http://w3techs.com/technologies/history_overview/character_encoding/ms/y">chart</a>.<a href="#fnref6">↩</a></p></li>
<li id="fn7" role="doc-endnote"><p>Although moving to <a href="https://atom.io">Atom</a> eminently.<a href="#fnref7" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn7"><p>Although moving to <a href="https://atom.io">Atom</a> eminently.<a href="#fnref7">↩</a></p></li>
<li id="fn8" role="doc-endnote"><p>For a list of such editors please refer to <a href="https://en.wikipedia.org/wiki/Comparison_of_text_editors">this article</a>.<a href="#fnref8" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn8"><p>For a list of such editors please refer to <a href="https://en.wikipedia.org/wiki/Comparison_of_text_editors">this article</a>.<a href="#fnref8">↩</a></p></li>
<li id="fn9" role="doc-endnote"><p>For a comprehensible explanation of these codes, please refer to historical <a href="https://tools.ietf.org/html/rfc20">RFC20</a>. The concept of control codes was introduced by legacy <a href="https://en.wikipedia.org/wiki/Baudot_code">Baudot (1870) and Murray codes (1901)</a> who were standard coding techniques up until the advent of aforementioned EBCDIC and ASCII.<a href="#fnref9" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn9"><p>For a comprehensible explanation of these codes, please refer to historical <a href="https://tools.ietf.org/html/rfc20">RFC20</a>. The concept of control codes was introduced by legacy <a href="https://en.wikipedia.org/wiki/Baudot_code">Baudot (1870) and Murray codes (1901)</a> who were standard coding techniques up until the advent of aforementioned EBCDIC and ASCII.<a href="#fnref9">↩</a></p></li>
</ol> </ol>
</section> </div>
</content> </content>
</body> </body>
</html> </html>

2
Lesson1.md
View File

@ -1,5 +1,6 @@
--- ---
bibliography: wwwrite.bib bibliography: wwwrite.bib
cover: img/enco.png
--- ---
# Text Encoding # Text Encoding
@ -28,6 +29,7 @@ Is ASCII still in use today? Yes and no. ASCII has some important limitations as
Hence the establishment of the Unicode standard which aim is to devise and maintain a Universal Character Set (UCS) composed of special codes points for each character (a kind of "meta"-charset if you want, composed of specific unicode codes)[^3]. Unicode does not specify specific encodings for its code points. Rather, encodings are part of specific implementations of the UCS such as UTF (UCS Transformation Format). The most notable UTF being UTF-8.[^4] The special feature of UTF-8 is that it is directly backward compatible with ASCII (an 8-bit ASCII character as the same encoding as its UTF-8 version) and has the property of being variable in length, meaning that Latin characters are encoded with a single byte while other non-Latin characters may be encoded with up to 4 bytes.[^5] Nowadays, UTF-8 is one of the most (if not _the_ most) mass adopted / ubiquitous character encoding format.[^6] Hence the establishment of the Unicode standard which aim is to devise and maintain a Universal Character Set (UCS) composed of special codes points for each character (a kind of "meta"-charset if you want, composed of specific unicode codes)[^3]. Unicode does not specify specific encodings for its code points. Rather, encodings are part of specific implementations of the UCS such as UTF (UCS Transformation Format). The most notable UTF being UTF-8.[^4] The special feature of UTF-8 is that it is directly backward compatible with ASCII (an 8-bit ASCII character as the same encoding as its UTF-8 version) and has the property of being variable in length, meaning that Latin characters are encoded with a single byte while other non-Latin characters may be encoded with up to 4 bytes.[^5] Nowadays, UTF-8 is one of the most (if not _the_ most) mass adopted / ubiquitous character encoding format.[^6]
### How ### How
Let's start with a very simple example to illustrate how text is encoded. Let's start with a very simple example to illustrate how text is encoded.

111
Lesson2.html
View File

@ -4,75 +4,68 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="generator" content="pandoc"> <meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Lesson2</title> <title></title>
<style type="text/css">code{white-space: pre;}</style> <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"> <link rel="stylesheet" href="style/html5.css">
</head> </head>
<body> <body>
<content> <content>
<h2 id="cli-or-the-command-line-interface">CLI or the Command Line Interface</h2> <h1 id="cli-or-the-command-line-interface">CLI or the Command Line Interface</h1>
<p>The Command Line Interface is the most common and pervasive interface directly linking fingers typing on a keyboard (text) and the computer (commands). The CLI is a legacy mode of operating computing system which can be traced back to early telegraphic devices. In this lesson we will look at your computer’s own CLI and present ways in which you can use it to write, manipulate, analyse and transform text on your own computer system.</p> <p>The Command Line Interface is the most common and pervasive interface directly linking fingers typing on a keyboard (text) and the computer (commands). The CLI is a legacy mode of operating computing system which can be traced back to early telegraphic devices. In this lesson we will look at your computer's own CLI and present ways in which you can use it to write, manipulate, analyse and transform text on your own computer system.</p>
<p><img src="img/rkwk101.gif" /></p> <div class="figure">
<img src="img/rkwk101.gif" />
</div>
<h3 id="goals">Goals</h3> <h3 id="goals">Goals</h3>
<p>The aim of this lesson is for readers to develop an appreciation of the advantages of using the CLI for certain types of work involving text editing on a computer. As the CLI itself is text based, our goal is to present the history of the CLI and discuss how text-based computer interfaces are still up to this day on of the most important ways to communicate with the computer systems.</p> <p>The aim of this lesson is for readers to develop an appreciation of the advantages of using the CLI for certain types of work involving text editing on a computer. As the CLI itself is text based, our goal is to present the history of the CLI and discuss how text-based computer interfaces are still up to this day on of the most important ways to communicate with the computer systems.</p>
<p>The goals of the lesson are:</p> <p>The goals of this lesson are:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li>Understand the historical precedents leading to the development of modern CLI.</li>
<li>Acquire basic knowledge on how to operate the CLI of your own computer.</li> <li>Acquire basic knowledge on how to operate the CLI of your own computer.</li>
<li>Develop the ability to recognize where and when the CLI is a better alternative than other types of computer interfaces (mainly graphical).</li> <li>Acquire just-enough CLI vocabulary to be used in future work.</li>
<li>Develop a critical perspective on why the CLI matters in some situation and when it does not.</li>
<li>Acquire just-enough basic CLI vocabulary to be used in future (research) work.</li>
</ol> </ol>
<h3 id="history">History</h3>
<p>We can trace back the history of the text-based interface as mode operating computers to the telegraph and of course the typewriter. Years before computing (as we know it) was invented, the telegraph was already a ubiquitous telecommunication system. Early operators of the telegraph used hand-operated devices, the Morse key, to send Morse codes down the communication cable, an interface that had many limitations due to it’s rather crude operation mode. From the mid 19th century on, a few devices were invented that featured a multiple keys keyboard interface and related receiver apparatus that would print messages sent using the keyboard input device. These greatly improved the speed in which messages could be sent and received. However, messages printed using these devices were still encoded raw; a received message would usually be in punched holes format on a piece of paper tape. For this reason, trained operators capable of deciphering such codes were still key interpreters of the wired cables.</p>
<p>It is not until the beginning of the 20th century, with the advent of the Teletype (TTY), that sending and receiving tele-typed text over telegraph lines was fully automated. Quite similar to the typewriter, a TTY made reading and writing encoded text seamless: the teletypewriter would encode typed alphabetic characters and the teletypeprinter would decode received encoded characters in an alphabetic format. Hence sending a message to an endpoint would be as easy as typing on a normal typewriter. This new type of telecommunication interface greatly changed the face of news and print media as it enable reporters and writers to send and receive “cables” on their own (without the need to be trained operators themselves).</p>
<p>But why is the history of the TTY important for our concern here? Well there’s two major reasons. First, the Teletype was historically important for the development of text encoding (<a href="Lesson1.html">Lesson1</a>). Early Teletype machines used the Baudot code encoding scheme but Teletype Model 33 (a standard TTY device in the 1960’s and 1970’s) used the ASCII encoding scheme. For this reason, ASCII (and modern UTF-8) has, still to this days, control codes that refer to networking operational commands. These characters attest the legacy of TTY devices. Second, as a result of ASCII integration in Model 33, the TTY became an central interface to mainframe computing machinery in the 1960’s and 1970’s. Before the advent of the TTY, the standard computing interface was the punch card format. TTY introduced direct input of computing commands from the teletypewriter and formalised the output as teleprinted on paper (ASCII also have printing control codes). For a long period of time, the main medium of computing was printed paper.<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a></p>
<p>A quick note here to emphasize the fact that computing was done on mainframes back in these days. The “mainframe” was a “colossus” computer residing somewhere in a local or remote building. As explained above, interfacing with the mainframe was done on a TTY device. This type of topology lead to the term “terminal” to signify a user’s endpoint (where the fingers and the eyes are) and “time-sharing” to signify that the mainframe shared its computing time between multiple users and their respective terminals. Much like the early TTY/telegraph coupling, a user would send computing commands on his TTY device over a network cable and receive the results back from the mainframe onto the same device. Rather than “discuss” with another fellow human over the network, you would now “discuss” with the shared computer.</p>
<figure>
<img src="img/datapoint-3300.jpg" alt="Datapoint3300" /><figcaption aria-hidden="true">Datapoint3300</figcaption>
</figure>
<p>The first terminal to showcase a screen as output device (rather than paper) was the Datapoint 3300 by Computer Terminal Corporation (CTC).<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> Other than having a glassy CTR screen, the main feature of the Datapoint 3300 was that it could seamlessly replace the Teletype Model 33 terminal and perform paperless the same operations. However, the Datapoint 3300 had obviously different circuitry than the Model 33. In order to drive its CTR monitor, CTC devised special electronic circuitry that kept track of the characters displayed on screen (shift-registers - a type of operational memory). The story goes that CTC, having a need to upgrade its circuitry, asked Intel and Texas Instrument (which are integrated circuit manufacturer) to produce a special ship that would be used to program its future screen-based terminals.<a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a> This challenge lead to the development of one Intel’s first 8-bit microprocessor - the Intel 8008.<a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a></p>
<p>The direct descendant of the Datapoint 3300, the Datapoint 2200 was the first programmable terminal, viewed by many as the first personal computer. The fact that the Datapoint 2200 was programmable, meaning that code could be written for and ran on the terminal’s circuit itself and not on a mainframe made it very attractive to computer programmers. Commands could be issued on the Command Line Interface and directly resolved locally without the need of an (expensive) mainframe.</p>
<p>This is were the story of terminals ends. If code is executed locally and not remotely, it is erroneous to talk about a terminal porperly saying but instead once must talk about the CLI (i.e., no more remote terminal but he emulation of the mainframe, as for the Datapoint 2200).</p>
<h3 id="how">How</h3> <h3 id="how">How</h3>
<p>To access to the Command Line Interface of your computer you need a Command Line Interpreter. Every mdoern Operating System (OS) have such interpreter built-in. In fact, the Command Line Interpreter are legacy systems on most OS (OSX, Windows, Linux, Unix, etc.) because there was a time when interfacing with a computer was solely done typing commands on a terminal.<a href="#fn5" class="footnote-ref" id="fnref5" role="doc-noteref"><sup>5</sup></a> Most computer programmers, even nowadays, use the computer CLI on a daily basis to write and run software and even to debug hardware.</p> <p>To access to the Command Line Interface of your computer you need a Command Line Interpreter. Every mdoern Operating System (OS) have such interpreter built-in. In fact, the Command Line Interpreter are legacy systems on most OS (OSX, Windows, Linux, Unix, etc.) because there was a time when interfacing with a computer was solely done typing commands on a terminal.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a> Most computer programmers, even nowadays, use the computer CLI on a daily basis to write and run software and even to debug hardware.</p>
<p>Depending on which OS you are using, accessing its CLI is quite simple:</p> <p>Depending on which OS you are using, accessing its CLI is quite simple:</p>
<ul> <ul>
<li><p>On OSX, the “Terminal” application resides in the “Utilities” folder under “Applications”.</p></li> <li><p>On OSX, the &quot;Terminal&quot; application resides in the &quot;Utilities&quot; folder under &quot;Applications&quot;.</p></li>
<li><p>On Windows, you access the CMD.EXE command prompt by typing “cmd” in the search bar of the “Start” menu</p></li> <li><p>On Windows, you access the CMD.EXE command prompt by typing &quot;cmd&quot; in the search bar of the &quot;Start&quot; menu</p></li>
</ul> </ul>
<p>On OSX your CLI should look like:</p> <p>On OSX your CLI should look like:</p>
<p><img src="img/cli0.png" /></p> <div class="figure">
<p>Bingo! Say hello to the computer’s CLI!</p> <img src="img/cli0.png" />
</div>
<p>Bingo! Say hello to the computer's CLI!</p>
<p>Now in order to utilise the CLI in a productive way you need to learn a couple of fundamental commands.</p> <p>Now in order to utilise the CLI in a productive way you need to learn a couple of fundamental commands.</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li><p>“ls” (OSX, Linux, Unix) and “dir” (Windows): lists all files and folders inside the directory your CLI’s current working directory.</p></li> <li><p>&quot;ls&quot; (OSX, Linux, Unix) and &quot;dir&quot; (Windows): lists all files and folders inside the directory your CLI's current working directory.</p></li>
<li><p>“cd”: changes the CLI’s current working directory</p></li> <li><p>&quot;cd&quot;: changes the CLI's current working directory</p></li>
</ol> </ol>
<p>Using both commands, you can basically navigate your whole filesystem. It is important at this point to understand the idea of a “working directory” as commands issued on the CLI usually depends in the files present in its “working directory”.</p> <p>Using both commands, you can basically navigate your whole filesystem. It is important at this point to understand the idea of a &quot;working directory&quot; as commands issued on the CLI usually depends in the files present in its &quot;working directory&quot;.</p>
<p>We are now going to illustrate some useful commands (under OSX) that deal with text files and the likes. Hence, we will point our “shell” (another common name for the CLI) to the folder containing the files of this site.</p> <p>We are now going to illustrate some useful commands (under OSX) that deal with text files and the likes. Hence, we will point our &quot;shell&quot; (another common name for the CLI) to the folder containing the files of this site.</p>
<p>Issuing the “ls” command results in:</p> <p>Issuing the &quot;ls&quot; command results in:</p>
<pre><code>Gauthiier:wwwriting gauthiier$ ls <pre><code>Gauthiier:wwwriting gauthiier$ ls
Lesson1.html Lesson2.md Lesson5.md index.html wwwrite.bib Lesson1.html Lesson2.md Lesson5.md index.html wwwrite.bib
Lesson1.md Lesson3.md Lesson6.md index.md Lesson1.md Lesson3.md Lesson6.md index.md
Lesson2.html Lesson4.md img/ style/</code></pre> Lesson2.html Lesson4.md img/ style/</code></pre>
<p>As you can see, directories are denoted with a leading “/” while files are not. Hence, “img/” is a directory and “Lesson1.md” is a file.</p> <p>As you can see, directories are denoted with a leading &quot;/&quot; while files are not. Hence, &quot;img/&quot; is a directory and &quot;Lesson1.md&quot; is a file.</p>
<p>It is possible to list the content of directories using “ls” without changing the “working directory”. For example, let’s list the content of the directory “style/”:</p> <p>It is possible to list the content of directories using &quot;ls&quot; without changing the &quot;working directory&quot;. For example, let's list the content of the directory &quot;style/&quot;:</p>
<pre><code>Gauthiier:wwwriting gauthiier$ ls style/ <pre><code>Gauthiier:wwwriting gauthiier$ ls style/
style.css template.html5</code></pre> style.css template.html5</code></pre>
<p>Ok now let’s play with file (meta)data.</p> <p>Ok now let's play with file (meta)data.</p>
<p>The command “file” can tell you what type a file is. For example:</p> <p>The command &quot;file&quot; can tell you what type a file is. For example:</p>
<pre><code>Gauthiier:wwwriting gauthiier$ file wwwrite.bib <pre><code>Gauthiier:wwwriting gauthiier$ file wwwrite.bib
wwwrite.bib: UTF-8 Unicode English text, with very long lines</code></pre> wwwrite.bib: UTF-8 Unicode English text, with very long lines</code></pre>
<p>The command “wc” (word count) returns information about the content of the file:</p> <p>The command &quot;wc&quot; (word count) returns information about the content of the file:</p>
<pre><code>Gauthiier:wwwriting gauthiier$ wc Lesson1.md <pre><code>Gauthiier:wwwriting gauthiier$ wc Lesson1.md
118 1995 13100 Lesson1.md</code></pre> 118 1995 13100 Lesson1.md</code></pre>
<p>where (1) the first column indicates the number of lines, (2) the second column the number of words and (3) the third column the number of bytes.</p> <p>where (1) the first column indicates the number of lines, (2) the second column the number of words and (3) the third column the number of bytes.</p>
<p>The command “grep” matches words to files that contain them (search). “grep” can search a specific file or lookup files recursively in a directory.</p> <p>The command &quot;grep&quot; matches words to files that contain them (search). &quot;grep&quot; can search a specific file or lookup files recursively in a directory.</p>
<p>Let’s look up the word: wwword.</p> <p>Let's look up the word: wwword.</p>
<pre><code>Gauthiier:wwwriting gauthiier$ grep &quot;wwword&quot; Lesson2.md <pre><code>Gauthiier:wwwriting gauthiier$ grep &quot;wwword&quot; Lesson2.md
Let&#39;s look up the word: wwword.</code></pre> Let&#39;s look up the word: wwword.</code></pre>
<p>“grep” gives the exact line-text where the word in found in the file.</p> <p>&quot;grep&quot; gives the exact line-text where the word in found in the file.</p>
<p>Similarly we can look up the number of times a word appears in each files ending with .md or .html in the current working directory:</p> <p>Similarly we can look up the number of times a word appears in each files ending with .md or .html in the current working directory:</p>
<pre><code>Gauthiier:wwwriting gauthiier$ grep -rc --include=*.{md,html} &quot;wwword&quot; . <pre><code>Gauthiier:wwwriting gauthiier$ grep -rc --include=*.{md,html} &quot;wwword&quot; .
./index.html:0 ./index.html:0
@ -85,43 +78,21 @@ Let&#39;s look up the word: wwword.</code></pre>
./Lesson4.md:0 ./Lesson4.md:0
./Lesson5.md:0 ./Lesson5.md:0
./Lesson6.md:0</code></pre> ./Lesson6.md:0</code></pre>
<p>As you can see the command “grep” can be instructed, using certain command parameters, to perform quite advanced searches. In general all commands from the CLI have specific parameters that can be set to specify a specific ways in which to conduct their operations.</p> <p>As you can see the command &quot;grep&quot; can be instructed, using certain command parameters, to perform quite advanced searches. In general all commands from the CLI have specific parameters that can be set to specify a specific ways in which to conduct their operations.</p>
<p>It is, of course, out of the scope of this lesson to present all possible commands one can use to manipulate files and directories. For the remaining lessons, you only have to remember how to point your CLI to a specific working directory.</p> <p>It is, of course, out of the scope of this lesson to present all possible commands one can use to manipulate files and directories. For the remaining lessons, you only have to remember how to point your CLI to a specific working directory.</p>
<h3 id="extra">Extra</h3> <h3 id="extra">Extra</h3>
<p><a href="http://acad.coloradocollege.edu/dept/PC/sciCompLab/UnixTutorial/">Unix Tutorial for Beginners</a></p> <p><a href="http://acad.coloradocollege.edu/dept/PC/sciCompLab/UnixTutorial/">OSX Unix Tutorial for Beginners</a></p>
<p><a href="http://www.codejacked.com/a-beginners-guide-to-the-command-prompt">A beginners guide to the Command Prompt (Windows)</a></p> <p><a href="http://www.codejacked.com/a-beginners-guide-to-the-command-prompt">A beginners guide to the Command Prompt (Windows)</a></p>
<p>A list of all commands: <a href="http://ss64.com/osx/">OSX</a> <a href="http://ss64.com/nt/">Windows</a> <a href="https://ss64.com/bash/">Linux (bash)</a></p> <p>A list of all commands: <a href="http://ss64.com/osx/">OSX</a> - <a href="http://ss64.com/nt/">Windows</a></p>
<h3 id="references">References</h3> <div class="references">
<!-- Notes -->
<!-- GUI / Xerox Star - http://members.dcn.org/dwnelson/XeroxStarRetrospective.html -->
<!--
Computer Terminal Corporation -- </div>
Datapoint3300 --- first video / visual terminal <div class="footnotes">
Datapoint2200 --- emulation of the terminal = PC
Intel 8008 - Intel 8080
1972 UNIX <----------------------------- commands... this is very much missing here....
Microcomputers
1974 CP/M 86 --- IBM PC -- INtel 8086( "Control Program/Monitor")
DOS
1978 Apple-DOS
1979 Atari-DOS
1981 PC-DOS
-->
<section class="footnotes footnotes-end-of-document" role="doc-endnotes">
<hr /> <hr />
<ol> <ol>
<li id="fn1" role="doc-endnote"><p>Something that is easily forgotten in the era of ubiquitous computer screens. For a discussion on the topic see Nick Montfort’s essay <a href="http://nickm.com/writing/essays/continuous_paper_mla.html">Continuous Paper: The Early Materiality and Workings of Electronic Literature</a>.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn1"><p>Something that is easily forgotten in the era of ubiquitous computer Graphical User Interface (GUI). The CLI is to some degree reminescent of the Teletype (TTY).<a href="#fnref1">↩</a></p></li>
<li id="fn2" role="doc-endnote"><p><a href="http://archive.computerhistory.org/resources/text/Computer_Terminal_Corporation/ComputerTerminalCorporation.Datapoint3300.1969.102646159.pdf">Datapoint 3300 brochure</a>.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn3" role="doc-endnote"><p>In fact Victor Poor from CTC devised the architecture and instruction set. The instruction set is, to this day, found (a revised version of course) on Intel’s flagship x86 architecture, the most pervasive microprocessor architecture of all time (typing this text was processed by a x86 microprocessor).<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn4" role="doc-endnote"><p>And subsequently the legacy 8-bit Intel 8080, 16-bit Intel 8086 and the whole x86 family of microprocessors. For all the details of the development of the Intel 8008, please refer to <a href="http://archive.computerhistory.org/resources/access/text/2012/07/102657982-05-01-acc.pdf">this document</a>.<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn5" role="doc-endnote"><p>Something that is easily forgotten in the era of ubiquitous computer Graphical User Interface (GUI). The CLI is to some degree reminescent of the Teletype (TTY).<a href="#fnref5" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
</ol> </ol>
</section> </div>
</content> </content>
</body> </body>
</html> </html>

65
Lesson2.md
View File

@ -1,5 +1,5 @@
## CLI or the Command Line Interface # CLI or the Command Line Interface
The Command Line Interface is the most common and pervasive interface directly linking fingers typing on a keyboard (text) and the computer (commands). The CLI is a legacy mode of operating computing system which can be traced back to early telegraphic devices. In this lesson we will look at your computer's own CLI and present ways in which you can use it to write, manipulate, analyse and transform text on your own computer system. The Command Line Interface is the most common and pervasive interface directly linking fingers typing on a keyboard (text) and the computer (commands). The CLI is a legacy mode of operating computing system which can be traced back to early telegraphic devices. In this lesson we will look at your computer's own CLI and present ways in which you can use it to write, manipulate, analyse and transform text on your own computer system.
@ -11,37 +11,14 @@ The Command Line Interface is the most common and pervasive interface directly l
The aim of this lesson is for readers to develop an appreciation of the advantages of using the CLI for certain types of work involving text editing on a computer. As the CLI itself is text based, our goal is to present the history of the CLI and discuss how text-based computer interfaces are still up to this day on of the most important ways to communicate with the computer systems. The aim of this lesson is for readers to develop an appreciation of the advantages of using the CLI for certain types of work involving text editing on a computer. As the CLI itself is text based, our goal is to present the history of the CLI and discuss how text-based computer interfaces are still up to this day on of the most important ways to communicate with the computer systems.
The goals of the lesson are: The goals of this lesson are:
1. Understand the historical precedents leading to the development of modern CLI. 1. Acquire basic knowledge on how to operate the CLI of your own computer.
2. Acquire basic knowledge on how to operate the CLI of your own computer. 2. Acquire just-enough CLI vocabulary to be used in future work.
3. Develop the ability to recognize where and when the CLI is a better alternative than other types of computer interfaces (mainly graphical).
4. Develop a critical perspective on why the CLI matters in some situation and when it does not.
5. Acquire just-enough basic CLI vocabulary to be used in future (research) work.
### History
We can trace back the history of the text-based interface as mode operating computers to the telegraph and of course the typewriter. Years before computing (as we know it) was invented, the telegraph was already a ubiquitous telecommunication system. Early operators of the telegraph used hand-operated devices, the Morse key, to send Morse codes down the communication cable, an interface that had many limitations due to it's rather crude operation mode. From the mid 19th century on, a few devices were invented that featured a multiple keys keyboard interface and related receiver apparatus that would print messages sent using the keyboard input device. These greatly improved the speed in which messages could be sent and received. However, messages printed using these devices were still encoded raw; a received message would usually be in punched holes format on a piece of paper tape. For this reason, trained operators capable of deciphering such codes were still key interpreters of the wired cables.
It is not until the beginning of the 20th century, with the advent of the Teletype (TTY), that sending and receiving tele-typed text over telegraph lines was fully automated. Quite similar to the typewriter, a TTY made reading and writing encoded text seamless: the teletypewriter would encode typed alphabetic characters and the teletypeprinter would decode received encoded characters in an alphabetic format. Hence sending a message to an endpoint would be as easy as typing on a normal typewriter. This new type of telecommunication interface greatly changed the face of news and print media as it enable reporters and writers to send and receive "cables" on their own (without the need to be trained operators themselves).
But why is the history of the TTY important for our concern here? Well there's two major reasons. First, the Teletype was historically important for the development of text encoding ([Lesson1](Lesson1.html)). Early Teletype machines used the Baudot code encoding scheme but Teletype Model 33 (a standard TTY device in the 1960's and 1970's) used the ASCII encoding scheme. For this reason, ASCII (and modern UTF-8) has, still to this days, control codes that refer to networking operational commands. These characters attest the legacy of TTY devices. Second, as a result of ASCII integration in Model 33, the TTY became an central interface to mainframe computing machinery in the 1960's and 1970's. Before the advent of the TTY, the standard computing interface was the punch card format. TTY introduced direct input of computing commands from the teletypewriter and formalised the output as teleprinted on paper (ASCII also have printing control codes). For a long period of time, the main medium of computing was printed paper.[^1]
A quick note here to emphasize the fact that computing was done on mainframes back in these days. The "mainframe" was a "colossus" computer residing somewhere in a local or remote building. As explained above, interfacing with the mainframe was done on a TTY device. This type of topology lead to the term "terminal" to signify a user's endpoint (where the fingers and the eyes are) and "time-sharing" to signify that the mainframe shared its computing time between multiple users and their respective terminals. Much like the early TTY/telegraph coupling, a user would send computing commands on his TTY device over a network cable and receive the results back from the mainframe onto the same device. Rather than "discuss" with another fellow human over the network, you would now "discuss" with the shared computer.
![Datapoint3300](img/datapoint-3300.jpg)
The first terminal to showcase a screen as output device (rather than paper) was the Datapoint 3300 by Computer Terminal Corporation (CTC).[^2] Other than having a glassy CTR screen, the main feature of the Datapoint 3300 was that it could seamlessly replace the Teletype Model 33 terminal and perform paperless the same operations. However, the Datapoint 3300 had obviously different circuitry than the Model 33. In order to drive its CTR monitor, CTC devised special electronic circuitry that kept track of the characters displayed on screen (shift-registers - a type of operational memory). The story goes that CTC, having a need to upgrade its circuitry, asked Intel and Texas Instrument (which are integrated circuit manufacturer) to produce a special ship that would be used to program its future screen-based terminals.[^3] This challenge lead to the development of one Intel's first 8-bit microprocessor - the Intel 8008.[^4]
The direct descendant of the Datapoint 3300, the Datapoint 2200 was the first programmable terminal, viewed by many as the first personal computer. The fact that the Datapoint 2200 was programmable, meaning that code could be written for and ran on the terminal's circuit itself and not on a mainframe made it very attractive to computer programmers. Commands could be issued on the Command Line Interface and directly resolved locally without the need of an (expensive) mainframe.
This is were the story of terminals ends. If code is executed locally and not remotely, it is erroneous to talk about a terminal porperly saying but instead once must talk about the CLI (i.e., no more remote terminal but he emulation of the mainframe, as for the Datapoint 2200).
### How ### How
To access to the Command Line Interface of your computer you need a Command Line Interpreter. Every mdoern Operating System (OS) have such interpreter built-in. In fact, the Command Line Interpreter are legacy systems on most OS (OSX, Windows, Linux, Unix, etc.) because there was a time when interfacing with a computer was solely done typing commands on a terminal.[^5] Most computer programmers, even nowadays, use the computer CLI on a daily basis to write and run software and even to debug hardware. To access to the Command Line Interface of your computer you need a Command Line Interpreter. Every mdoern Operating System (OS) have such interpreter built-in. In fact, the Command Line Interpreter are legacy systems on most OS (OSX, Windows, Linux, Unix, etc.) because there was a time when interfacing with a computer was solely done typing commands on a terminal.[^1] Most computer programmers, even nowadays, use the computer CLI on a daily basis to write and run software and even to debug hardware.
Depending on which OS you are using, accessing its CLI is quite simple: Depending on which OS you are using, accessing its CLI is quite simple:
@ -123,44 +100,18 @@ It is, of course, out of the scope of this lesson to present all possible comman
### Extra ### Extra
[Unix Tutorial for Beginners](http://acad.coloradocollege.edu/dept/PC/sciCompLab/UnixTutorial/) [OSX Unix Tutorial for Beginners](http://acad.coloradocollege.edu/dept/PC/sciCompLab/UnixTutorial/)
[A beginners guide to the Command Prompt (Windows)](http://www.codejacked.com/a-beginners-guide-to-the-command-prompt) [A beginners guide to the Command Prompt (Windows)](http://www.codejacked.com/a-beginners-guide-to-the-command-prompt)
A list of all commands: [OSX](http://ss64.com/osx/) [Windows](http://ss64.com/nt/) [Linux (bash)](https://ss64.com/bash/) A list of all commands: [OSX](http://ss64.com/osx/) - [Windows](http://ss64.com/nt/)
### References
[^1]: Something that is easily forgotten in the era of ubiquitous computer screens. For a discussion on the topic see Nick Montfort's essay [Continuous Paper: The Early Materiality and Workings of Electronic Literature](http://nickm.com/writing/essays/continuous_paper_mla.html).
[^2]: [Datapoint 3300 brochure](http://archive.computerhistory.org/resources/text/Computer_Terminal_Corporation/ComputerTerminalCorporation.Datapoint3300.1969.102646159.pdf).
[^3]: In fact Victor Poor from CTC devised the architecture and instruction set. The instruction set is, to this day, found (a revised version of course) on Intel's flagship x86 architecture, the most pervasive microprocessor architecture of all time (typing this text was processed by a x86 microprocessor). [^1]: Something that is easily forgotten in the era of ubiquitous computer Graphical User Interface (GUI). The CLI is to some degree reminescent of the Teletype (TTY).
[^4]: And subsequently the legacy 8-bit Intel 8080, 16-bit Intel 8086 and the whole x86 family of microprocessors. For all the details of the development of the Intel 8008, please refer to [this document](http://archive.computerhistory.org/resources/access/text/2012/07/102657982-05-01-acc.pdf).
[^5]: Something that is easily forgotten in the era of ubiquitous computer Graphical User Interface (GUI). The CLI is to some degree reminescent of the Teletype (TTY).
<!-- Notes --> <!-- Notes -->
<!-- GUI / Xerox Star - http://members.dcn.org/dwnelson/XeroxStarRetrospective.html --> <!-- GUI / Xerox Star - http://members.dcn.org/dwnelson/XeroxStarRetrospective.html -->
<!--
Computer Terminal Corporation --
Datapoint3300 --- first video / visual terminal
Datapoint2200 --- emulation of the terminal = PC
Intel 8008 - Intel 8080
1972 UNIX <----------------------------- commands... this is very much missing here....
Microcomputers
1974 CP/M 86 --- IBM PC -- INtel 8086( "Control Program/Monitor")
DOS
1978 Apple-DOS
1979 Atari-DOS
1981 PC-DOS
-->

71
Lesson3.html
View File

@ -4,35 +4,37 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="generator" content="pandoc"> <meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Lesson3</title> <title></title>
<style type="text/css">code{white-space: pre;}</style> <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"> <link rel="stylesheet" href="style/html5.css">
</head> </head>
<body> <body>
<content> <content>
<h1 id="markup-markdown">Markup / Markdown</h1> <h1 id="markup-markdown">Markup / Markdown</h1>
<p>Markup languages are one of the most pervasive and common types of language on the Internet. In fact HTML is a type of markup language responsible to instruct our web browsers on how to layout text, images and the likes on our screens. Behind all web pages, there is a markup text file that is sent from a server to our browsers when we type in a URL. The beauty of markup languages is that they are both <a href="https://en.wikipedia.org/wiki/Human-readable_medium">human-readable</a> and <a href="https://en.wikipedia.org/wiki/Machine-readable_data">machine-readable</a> and written in plain text format. Reading a marked up text one can notice the special “meta-codes” and related syntax that direct machines in interpreting the same text. The idea is thus to have some standards and conventions describing these meta-codes and expected machine interpretation.</p> <p>Markup languages are one of the most pervasive and common types of language on the Internet. In fact HTML is a type of markup language responsible to instruct our web browsers on how to layout text, images and the likes on our screens. Behind all web pages, there is a markup text file that is sent from a server to our browsers when we type in a URL. The beauty of markup languages is that they are both <a href="https://en.wikipedia.org/wiki/Human-readable_medium">human-readable</a> and <a href="https://en.wikipedia.org/wiki/Machine-readable_data">machine-readable</a> and written in plain text format. Reading a marked up text one can notice the special &quot;meta-codes&quot; and related syntax that direct machines in interpreting the same text. The idea is thus to have some standards and conventions describing these meta-codes and expected machine interpretation.</p>
<h3 id="goals">Goals</h3> <h3 id="goals">Goals</h3>
<p>In this lesson we will introduce the Markdown language for writing (academic) texts. Markdown is a type of markup language that features very intuitive set of meta-codes and a simple syntax that can seamlessly integrate with normal text without transforming them much.</p> <p>In this lesson we will introduce the Markdown language for writing (academic) texts. Markdown is a type of markup language that features very intuitive set of meta-codes and a simple syntax that can seamlessly integrate with normal text without transforming them much.</p>
<p>The aims of this lesson are:</p> <p>The aims of this lesson are:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li>Understand the basic syntax of Markdown and be able to write markdown valid text.<br /> <li>Understand the basic syntax of Markdown and be able to write markdown valid text.<br /></li>
</li>
<li>Acquire just-enough Markdown vocabulary to be used in future work.</li> <li>Acquire just-enough Markdown vocabulary to be used in future work.</li>
</ol> </ol>
<h3 id="how">How</h3> <h3 id="how">How</h3>
<p>Before we delve into the Markdown language, it is important to understand why we use it. A file written in the language has the benefit of being interpreted and hence converted into various types of output formats. Depending on the type markdown interpreter / converter, documents formats such as HTML, PDF, EPUB, DOC, etc. can be produced out of a single markdown file source. This is the main reason the language is widely used; to easily generate web pages, pdf publications and epub without having to directly code their actual inner formats. In using markdown as a source language, all of the above formats are made available for you to publish in. How to convert markdown file is discussed in the <a href="Lesson4.html">next lesson</a>.</p> <p>Before we delve into the Markdown language, it is important to understand why we use it. A file written in the language has the benefit of being interpreted and hence converted into various types of output formats. Depending on the type markdown interpreter / converter, documents formats such as HTML, PDF, EPUB, DOC, etc. can be produced out of a single markdown file source. This is the main reason the language is widely used; to easily generate web pages, pdf publications and epub without having to directly code their actual inner formats. In using markdown as a source language, all of the above formats are made available for you to publish in. How to convert markdown file is discussed in the <a href="Lesson4.html">next lesson</a>.</p>
<p>The premise of this lesson is going to be very simple. Since this lesson is written in Markdown, snippets the language/syntax will be discussed and exemplified in-line in HTML format.<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a></p> <p>The premise of this lesson is going to be very simple. Since this lesson is written in Markdown, snippets the language/syntax will be discussed and exemplified in-line in HTML format.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a></p>
<h4 id="italic-and-bold"><em>italic</em> and <strong>bold</strong></h4> <h4 id="italic-and-bold"><em>italic</em> and <strong>bold</strong></h4>
<p>Let’s start with the simplest: <em>italic</em> and <strong>bold</strong></p> <p>Let's start with the simplest: <em>italic</em> and <strong>bold</strong></p>
<pre><code>Let&#39;s start with the simplest: _italic_ and __bold__</code></pre> <pre><code>Let&#39;s start with the simplest: _italic_ and __bold__</code></pre>
<p>Notice the single (<em>italic</em>) and double (<strong>bold</strong>) underscores ’_’?</p> <p>Notice the single (<em>italic</em>) and double (<strong>bold</strong>) underscores '_'?</p>
<p>Let’s continue with the same: <em>italic</em> and <strong>bold</strong></p> <p>Let's continue with the same: <em>italic</em> and <strong>bold</strong></p>
<pre><code>Let&#39;s continue with the same: *italic* and **bold**</code></pre> <pre><code>Let&#39;s continue with the same: *italic* and **bold**</code></pre>
<p>Notice the single (<em>italic</em>) and double (<strong>bold</strong>) stars ’*’?</p> <p>Notice the single (<em>italic</em>) and double (<strong>bold</strong>) stars '*'?</p>
<h4 id="headers-toc-sections">Headers &amp; TOC Sections</h4> <h4 id="headers-toc-sections">Headers &amp; TOC Sections</h4>
<p>Now since we are writing text, let’s now look at how Markdown detonates headers.</p> <p>Now since we are writing text, let's now look at how Markdown detonates headers.</p>
<p>Using the hash mark ‘#’ one can generate various types of headers by prefixing a “title” with a concatenation of hash marks ‘#’.</p> <p>Using the hash mark '#' one can generate various types of headers by prefixing a &quot;title&quot; with a concatenation of hash marks '#'.</p>
<h1 id="title-un">Title: Un</h1> <h1 id="title-un">Title: Un</h1>
<h2 id="title-deux">Title: Deux</h2> <h2 id="title-deux">Title: Deux</h2>
<h3 id="title-trois">Title: Trois</h3> <h3 id="title-trois">Title: Trois</h3>
@ -49,16 +51,16 @@
<h4 id="block-quotes">(Block) Quotes</h4> <h4 id="block-quotes">(Block) Quotes</h4>
<p>Blockquotes are also very simple.</p> <p>Blockquotes are also very simple.</p>
<blockquote> <blockquote>
<p>“Mais la seule question quand on écrit, c’est de savoir avec quelle autre machine la machine littéraire peut être brancheé, et doit être branchée pour fonctionner.”</p> <p>&quot;Mais la seule question quand on écrit, c'est de savoir avec quelle autre machine la machine littéraire peut être brancheé, et doit être branchée pour fonctionner.&quot;</p>
</blockquote> </blockquote>
<p>– Deleuze &amp; Guattari, <em>Milles Plateaux</em></p> <p>-- Deleuze &amp; Guattari, <em>Milles Plateaux</em></p>
<pre><code>&gt; &quot;Mais la seule question quand on écrit, c&#39;est de savoir avec quelle autre machine la machine littéraire peut être brancheé, et doit être branchée pour fonctionner.&quot; <pre><code>&gt; &quot;Mais la seule question quand on écrit, c&#39;est de savoir avec quelle autre machine la machine littéraire peut être brancheé, et doit être branchée pour fonctionner.&quot;
-- Deleuze &amp; Guattari, _Milles Plateaux_</code></pre> -- Deleuze &amp; Guattari, _Milles Plateaux_</code></pre>
<h4 id="lists">Lists</h4> <h4 id="lists">Lists</h4>
<p>There is a few valid syntax for lists.</p> <p>There is a few valid syntax for lists.</p>
<p>Below are two common ones:</p> <p>Below are two common ones:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li>List 1 item 1</li> <li>List 1 item 1</li>
<li>List 1 item 2</li> <li>List 1 item 2</li>
<li>List 1 item 3</li> <li>List 1 item 3</li>
@ -69,6 +71,7 @@
3. List 1 item 3 3. List 1 item 3
4. List 1 item 4</code></pre> 4. List 1 item 4</code></pre>
<!-- notice the above codeblock using special code ~~~~~ and this comment! --> <!-- notice the above codeblock using special code ~~~~~ and this comment! -->
<ul> <ul>
<li>List 2 item 1</li> <li>List 2 item 1</li>
<li>List 2 item 2</li> <li>List 2 item 2</li>
@ -80,6 +83,7 @@
- List 2 item 3 - List 2 item 3
- List 2 item 4</code></pre> - List 2 item 4</code></pre>
<!-- notice the above codeblock using special code ~~~~~ and this comment! --> <!-- notice the above codeblock using special code ~~~~~ and this comment! -->
<p>Nested lists:</p> <p>Nested lists:</p>
<ul> <ul>
<li>List 3 item 1 <li>List 3 item 1
@ -106,6 +110,7 @@
- List 3 item 2.1.1 - List 3 item 2.1.1
- List 3 item 2.1.1.1</code></pre> - List 3 item 2.1.1.1</code></pre>
<!-- notice the above codeblock using special code ~~~~~ and this comment! --> <!-- notice the above codeblock using special code ~~~~~ and this comment! -->
<h4 id="links">Links</h4> <h4 id="links">Links</h4>
<p>Now the interesting stuff. (Hyper)-Linking is one of the salient feature of digital documents. Hence markdown makes it very easy to write links to a URL.</p> <p>Now the interesting stuff. (Hyper)-Linking is one of the salient feature of digital documents. Hence markdown makes it very easy to write links to a URL.</p>
<p>this is a <a href="http://gauthiier.github.io/wwwriting/Lesson2.html">link to Lesson2</a> with an absolute URL</p> <p>this is a <a href="http://gauthiier.github.io/wwwriting/Lesson2.html">link to Lesson2</a> with an absolute URL</p>
@ -116,20 +121,20 @@
<h4 id="images">Images</h4> <h4 id="images">Images</h4>
<p>Inserting images into the document is done in a similar fashion, linking the image using the same syntax as above.</p> <p>Inserting images into the document is done in a similar fashion, linking the image using the same syntax as above.</p>
<p>For example - absolute URL</p> <p>For example - absolute URL</p>
<figure> <div class="figure">
<img src="http://gauthiier.info/+++/jules-henri.png" alt="Jules Henri Poincaré" /><figcaption aria-hidden="true">Jules Henri Poincaré</figcaption> <img src="http://gauthiier.info/+++/jules-henri.png" alt="Jules Henri Poincaré" /><p class="caption">Jules Henri Poincaré</p>
</figure> </div>
<pre><code>![Jules Henri Poincaré](http://gauthiier.info/+++/jules-henri.png)</code></pre> <pre><code>![Jules Henri Poincaré](http://gauthiier.info/+++/jules-henri.png)</code></pre>
<p>and - relative URL</p> <p>and - relative URL</p>
<figure> <div class="figure">
<img src="img/jules-henri.png" alt="Jules Henri Poincaré" /><figcaption aria-hidden="true">Jules Henri Poincaré</figcaption> <img src="img/jules-henri.png" alt="Jules Henri Poincaré" /><p class="caption">Jules Henri Poincaré</p>
</figure> </div>
<pre><code>![Jules Henri Poincaré](img/jules-henri.png)</code></pre> <pre><code>![Jules Henri Poincaré](img/jules-henri.png)</code></pre>
<p>As you can see, the bang character ‘!’ is the only add-on to link syntax while the caption of the image replaces the text on the link.</p> <p>As you can see, the bang character '!' is the only add-on to link syntax while the caption of the image replaces the text on the link.</p>
<h4 id="footnotes">Footnotes</h4> <h4 id="footnotes">Footnotes</h4>
<p>When one has something to write that does not directly relate the core argument of a paragraph but nonetheless relates to its context, footnotes are a very practical way to branch of topic while keeping the reader not far from getting back into the main flow.</p> <p>When one has something to write that does not directly relate the core argument of a paragraph but nonetheless relates to its context, footnotes are a very practical way to branch of topic while keeping the reader not far from getting back into the main flow.</p>
<p>The markdown syntax of a footnotes is as follow:</p> <p>The markdown syntax of a footnotes is as follow:</p>
<p>I think you are eager to start writing markdown<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a>.</p> <p>I think you are eager to start writing markdown<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a>.</p>
<pre><code>I think you are eager to start writing markdown[^2]. </code></pre> <pre><code>I think you are eager to start writing markdown[^2]. </code></pre>
<p>And further down in the document</p> <p>And further down in the document</p>
<pre><code>[^2]: And I hope you will do so very soon!</code></pre> <pre><code>[^2]: And I hope you will do so very soon!</code></pre>
@ -140,21 +145,23 @@
<pre><code>---</code></pre> <pre><code>---</code></pre>
<p>Such delimiters are useful when one wants to graphically separate parts of a text.</p> <p>Such delimiters are useful when one wants to graphically separate parts of a text.</p>
<hr /> <hr />
<p>We have now covered the most basic syntactic elements of the markdown language. In most cases, these are enough to write great texts and even write entire books. All of the above syntax is suited for the content of texts, however, we are yet to introduce how to layout and style the output of a markdown input file. The idea of behind markup languages is to create a clear division between <em>content</em> and <em>style</em>. Here we have covered the content side . Document conversion is covered in <a href="Lesson4.html">Lesson 4</a> while <a href="Lesson6.html">Lesson 6</a> introduces how styling can be applied to the output of such conversion.</p> <p>We have now covered the most basic syntactic elements of the markdown language. In most cases these are enough to write great texts and even write entire books. All of the above syntax is suited for the content of texts, however you are yet to introduce how to layout and style the output of a markdown text file.</p>
<p>The idea of behind markup languages is to create a clear division between <em>content</em> and <em>style</em>. Here we have covered the content side . Document conversion is covered in <a href="Lesson4.html">Lesson 4</a> while <a href="Lesson6.html">Lesson 6</a> introduces how styling can be applied to the output of such conversion.</p>
<h3 id="extra">Extra</h3> <h3 id="extra">Extra</h3>
<p><a href="http://dillinger.io">Online markdown editor</a></p>
<p><a href="http://johnmacfarlane.net/pandoc/demo/example9/pandocs-markdown.html">Pandoc markdown primer</a></p> <p><a href="http://johnmacfarlane.net/pandoc/demo/example9/pandocs-markdown.html">Pandoc markdown primer</a></p>
<p><a href="http://rmarkdown.rstudio.com/authoring_pandoc_markdown.html">A thorough list of all pandoc style markdown syntax</a></p> <p><a href="http://rmarkdown.rstudio.com/authoring_pandoc_markdown.html">A thorough list of all markdown syntax</a></p>
<p>A very handy functionality of <a href="http://www.sublimetext.com">Sublime Text</a> is its syntax highlighting for markdown. To enable such feature:</p> <p>A very handy functionality of <a href="http://www.sublimetext.com">Sublime Text</a> is its syntax highlighting for markdown. To enable such feature:</p>
<p>Menu –&gt; Syntax –&gt; Markdown –&gt; Markdown</p> <p>Menu --&gt; Syntax --&gt; Markdown --&gt; Markdown</p>
<h3 id="references">References</h3> <div class="references">
<section class="footnotes footnotes-end-of-document" role="doc-endnotes">
</div>
<div class="footnotes">
<hr /> <hr />
<ol> <ol>
<li id="fn1" role="doc-endnote"><p>Not to mention that you can directly open and read this file “Lesson3.md” and see how it is written.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn1"><p>Not to mention that you can directly open and read this file &quot;Lesson3.md&quot; and see how it is written.<a href="#fnref1">↩</a></p></li>
<li id="fn2" role="doc-endnote"><p>And I hope you will do so very soon!<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn2"><p>And I hope you will do so very soon!<a href="#fnref2">↩</a></p></li>
</ol> </ol>
</section> </div>
</content> </content>
</body> </body>
</html> </html>

4
Lesson3.md
View File

@ -196,8 +196,10 @@ A very handy functionality of [Sublime Text](http://www.sublimetext.com) is its
Menu --> Syntax --> Markdown --> Markdown Menu --> Syntax --> Markdown --> Markdown
### References
[^1]: Not to mention that you can directly open and read this file "Lesson3.md" and see how it is written. [^1]: Not to mention that you can directly open and read this file "Lesson3.md" and see how it is written.
[^2]: And I hope you will do so very soon! [^2]: And I hope you will do so very soon!

38
Lesson4.html
View File

@ -4,8 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="generator" content="pandoc"> <meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Lesson4</title> <title></title>
<style type="text/css">code{white-space: pre;}</style> <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"> <link rel="stylesheet" href="style/html5.css">
</head> </head>
<body> <body>
@ -15,13 +18,13 @@
<h3 id="goals">Goals</h3> <h3 id="goals">Goals</h3>
<p>Assuming that you have a basic knowledge of the Markdown language, in this lesson you will learn how to convert a text file written in markdown to both an HTML and EPUB3 output. In order to do so, you need to instal <a href="http://johnmacfarlane.net/pandoc/">Pandoc</a> on your system as we will be using this specific markdown converter.</p> <p>Assuming that you have a basic knowledge of the Markdown language, in this lesson you will learn how to convert a text file written in markdown to both an HTML and EPUB3 output. In order to do so, you need to instal <a href="http://johnmacfarlane.net/pandoc/">Pandoc</a> on your system as we will be using this specific markdown converter.</p>
<p>The goals of this lesson are:</p> <p>The goals of this lesson are:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li>Acquire basic understanding of how to employ pandoc to produce both HTML and EPUB output.</li> <li>Acquire basic understanding of how to employ pandoc to produce both HTML and EPUB output.</li>
<li>Acquire basic knowledge of how pandoc can be tailored to produce other types of output.</li> <li>Acquire basic knowledge of how pandoc can be tailored to produce other types of output.</li>
</ol> </ol>
<h3 id="how">How</h3> <h3 id="how">How</h3>
<p>In order to complete this lesson, you should be familiar with how to operated your computer’s CLI (<a href="Lesson2.html">Lesson2</a>) and capable of writing markdown valid text (<a href="Lesson3.html">Lesson3</a>).</p> <p>In order to complete this lesson, you should be familiar with how to operated your computer's CLI (<a href="Lesson2.html">Lesson2</a>) and capable of writing markdown valid text (<a href="Lesson3.html">Lesson3</a>).</p>
<p>The following exercises assumes that you have markdown input file ready to convert to both HTML and EPUB. If you don’t already, simply use this file (<a href="Lesson4.md">Lesson4.md</a>).</p> <p>The following exercises assumes that you have markdown input file ready to convert to both HTML and EPUB. If you don't already, simply use this file (<a href="Lesson4.md">Lesson4.md</a>).</p>
<p>To make sure that your system is set up properly, open a CLI window and type the following</p> <p>To make sure that your system is set up properly, open a CLI window and type the following</p>
<pre><code>pandoc --version</code></pre> <pre><code>pandoc --version</code></pre>
<p>If you get an error message, this means that you did not install pandoc properly. If so please visit <a href="http://johnmacfarlane.net/pandoc/">Pandoc</a> and install the required software. If not you are ready to go!</p> <p>If you get an error message, this means that you did not install pandoc properly. If so please visit <a href="http://johnmacfarlane.net/pandoc/">Pandoc</a> and install the required software. If not you are ready to go!</p>
@ -31,8 +34,8 @@
<p>will produce an <em>output</em> file (-o Lesson4.html) from the <em>input</em> file (<em>Lesson4.md</em>). Here the argument -s will force pandoc to produce an entire valid document rather than a snippet of it.</p> <p>will produce an <em>output</em> file (-o Lesson4.html) from the <em>input</em> file (<em>Lesson4.md</em>). Here the argument -s will force pandoc to produce an entire valid document rather than a snippet of it.</p>
<p>More formally, the former command could be</p> <p>More formally, the former command could be</p>
<pre><code>pandoc -s -f markdown Lesson4.md -t html5 -o Lesson4.html</code></pre> <pre><code>pandoc -s -f markdown Lesson4.md -t html5 -o Lesson4.html</code></pre>
<p>meaning the input file (Lesson4.md) is of type “markdown” and the output file (-o Lesson4.html) is of type “html5”. You can basically omit these details if you want, markdown can recognise valid input files while the extension of your output file (here .html) will inform the program on the type of output expected. However, since pandoc has multiple possible output files to choose from, some of them of the same type but of different version (for example html and html5), it is a good practice to specify the type of output.</p> <p>meaning the input file (Lesson4.md) is of type &quot;markdown&quot; and the output file (-o Lesson4.html) is of type &quot;html5&quot;. You can basically omit these details if you want, markdown can recognise valid input files while the extension of your output file (here .html) will inform the program on the type of output expected. However, since pandoc has multiple possible output files to choose from, some of them of the same type but of different version (for example html and html5), it is a good practice to specify the type of output.</p>
<p>Now let’s simply change the output to the Rich Text Format (rtf)</p> <p>Now let's simply change the output to the Rich Text Format (rtf)</p>
<pre><code>pandoc -s -f markdown Lesson4.md -t rtf -o Lesson4.rtf</code></pre> <pre><code>pandoc -s -f markdown Lesson4.md -t rtf -o Lesson4.rtf</code></pre>
<p>or in a more compact version</p> <p>or in a more compact version</p>
<pre><code>pandoc -s Lesson4.md -o Lesson4.rtf</code></pre> <pre><code>pandoc -s Lesson4.md -o Lesson4.rtf</code></pre>
@ -51,20 +54,20 @@
<pre><code>pandoc -s Lesson4.md --template=style/template.html5 -c style/html5.css --bibliography=wwwrite.bib -o Lesson4.html</code></pre> <pre><code>pandoc -s Lesson4.md --template=style/template.html5 -c style/html5.css --bibliography=wwwrite.bib -o Lesson4.html</code></pre>
<p>Now refresh your web browser and see if something changed. Perhaps not (yet). You may not realise it but you have (re)generated the entire HTML in a single pandoc command!</p> <p>Now refresh your web browser and see if something changed. Perhaps not (yet). You may not realise it but you have (re)generated the entire HTML in a single pandoc command!</p>
<p>As you can see there is a little more arguments in the above pandoc than previously exposed in the first section.</p> <p>As you can see there is a little more arguments in the above pandoc than previously exposed in the first section.</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li><p>As expected we have</p> <li><p>As expected we have</p>
<pre><code> -s Lesson4.md -o Lesson4.html</code></pre> <pre><code>-s Lesson4.md -o Lesson4.html</code></pre>
<p>which specifies the markdown <em>input</em> (Lesson4.md) and HTML <em>output</em> (Lesson4.html)</p></li> <p>which specifies the markdown <em>input</em> (Lesson4.md) and HTML <em>output</em> (Lesson4.html)</p></li>
<li><p>There is a few extra options</p> <li><p>There is a few extra options</p>
<pre><code> --template=style/template.html5 -c style/html5.css --bibliography=wwwrite.bib</code></pre> <pre><code>--template=style/template.html5 -c style/html5.css --bibliography=wwwrite.bib</code></pre>
<p>which are instructing pandoc to (1) use the HTML5 template “style/template.html5”, (2) use the <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">stylesheet</a> “style/html5.css” and (3) use the bibliographical information in “wwwrite.bib” if in-text referencing is needed.</p></li> <p>which are instructing pandoc to (1) use the HTML5 template &quot;style/template.html5&quot;, (2) use the <a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">stylesheet</a> &quot;style/html5.css&quot; and (3) use the bibliographical information in &quot;wwwrite.bib&quot; if in-text referencing is needed.</p></li>
</ol> </ol>
<p>Without going in too much details (since this is the topic of <a href="/">Lesson6</a>), the current site employs custom templates and stylesheets (in the directory <a href="style/">“style/”</a>). In these file you will find all the markup code used to (automatically) generate the layout this web page in HTML and <a href="(https://en.wikipedia.org/wiki/Cascading_Style_Sheets)">CSS</a> formats. In a nutshell, on the one hand a template is responsible to instruct how to convert pandoc’s median representation into an HTML format while on the other a CSS stylesheet is responsible for the layout and (design) parametrisation of the content of this HTML. Hence, rather than specifying a default pandoc output, we use our own custom templates to generate our own tailored HTML outputs.</p> <p>Without going in too much details (since this is the topic of <a href="/">Lesson6</a>), the current site employs custom templates and stylesheets (in the directory <a href="style/">&quot;style/&quot;</a>). In these file you will find all the markup code used to (automatically) generate the layout this web page in HTML and <a href="(https://en.wikipedia.org/wiki/Cascading_Style_Sheets)">CSS</a> formats. In a nutshell, on the one hand a template is responsible to instruct how to convert pandoc's median representation into an HTML format while on the other a CSS stylesheet is responsible for the layout and (design) parametrisation of the content of this HTML. Hence, rather than specifying a default pandoc output, we use our own custom templates to generate our own tailored HTML outputs.</p>
<h4 id="epub3">EPUB(3)</h4> <h4 id="epub3">EPUB(3)</h4>
<p>It is worth mentioning at this stage that in previous example, pandoc is converting files written in one markup language “markdown” to another markup language “HTML5”. At its core, EPUB is yet another markup language. Both HTML and EPUB are standard markups that are both interpreted by a web browser and epub reader respectively.</p> <p>It is worth mentioning at this stage that in previous example, pandoc is converting files written in one markup language &quot;markdown&quot; to another markup language &quot;HTML5&quot;. At its core, EPUB is yet another markup language. Both HTML and EPUB are standard markups that are both interpreted by a web browser and epub reader respectively.</p>
<p>Now here is the pandoc command to generate an epub(3) of the whole site</p> <p>Now here is the pandoc command to generate an epub(3) of the whole site</p>
<pre><code>pandoc -S index.md Lesson1.md Lesson2.md Lesson3.md metadata.epub3.yaml --toc --template=style/template.epub3 --epub-stylesheet=style/epub3.css --epub-cover-image=img/DSP6.png --bibliography=wwwrite.bib -o WWWRITE.epub </code></pre> <pre><code>pandoc -S index.md Lesson1.md Lesson2.md Lesson3.md metadata.epub3.yaml --toc --template=style/template.epub3 --epub-stylesheet=style/epub3.css --epub-cover-image=img/DSP6.png --bibliography=wwwrite.bib -o WWWRITE.epub </code></pre>
<p>As you may notice, the command is a bit more “complex” than the previous HTML one, yet basically resembles it in many ways.</p> <p>As you may notice, the command is a bit more &quot;complex&quot; than the previous HTML one, yet basically resembles it in many ways.</p>
<p>The arguments</p> <p>The arguments</p>
<pre><code>-S index.md Lesson1.md Lesson2.md Lesson3.md Lesson4.md metadata.epub3.yaml -o WWWRITE.epub </code></pre> <pre><code>-S index.md Lesson1.md Lesson2.md Lesson3.md Lesson4.md metadata.epub3.yaml -o WWWRITE.epub </code></pre>
<p>specify a list of <em>input</em> files (index.md, Lesson1.md, Lesson2.md, Lesson3.md, Lesson4.md, and metadata.epub3.yaml) and an <em>output</em> file (-o WWWRITE.epub). Pandoc will concatenate input files into a single one when listed as inputs. This is convenient as it enables a writer to segment a book into self-contained chapters for example.</p> <p>specify a list of <em>input</em> files (index.md, Lesson1.md, Lesson2.md, Lesson3.md, Lesson4.md, and metadata.epub3.yaml) and an <em>output</em> file (-o WWWRITE.epub). Pandoc will concatenate input files into a single one when listed as inputs. This is convenient as it enables a writer to segment a book into self-contained chapters for example.</p>
@ -76,12 +79,15 @@
<p>which tells pandoc to use the specified image as cover page for the EPUB.</p> <p>which tells pandoc to use the specified image as cover page for the EPUB.</p>
<p>Finally the argument</p> <p>Finally the argument</p>
<pre><code>--toc</code></pre> <pre><code>--toc</code></pre>
<p>is a feature that instructs pandoc to generate a “Table Of Content” (toc) out of the various markdown Headings (symbol ‘#’ <a href="Lesson3.html">Lesson3</a>) present in the input file(s).</p> <p>is a feature that instructs pandoc to generate a &quot;Table Of Content&quot; (toc) out of the various markdown Headings (symbol '#' <a href="Lesson3.html">Lesson3</a>) present in the input file(s).</p>
<p>Let’s now have a look at the EPUB output!</p> <p>Let's now have a look at the EPUB output!</p>
<h3 id="extra">Extra</h3> <h3 id="extra">Extra</h3>
<p><a href="http://johnmacfarlane.net/pandoc/try/">Try pandoc!</a></p> <p><a href="http://johnmacfarlane.net/pandoc/try/">Try pandoc!</a></p>
<p><a href="http://johnmacfarlane.net/pandoc/README.html#epub-metadata">Pandoc User’s Guide</a></p> <p><a href="http://johnmacfarlane.net/pandoc/README.html#epub-metadata">Pandoc User's Guide</a></p>
<p><a href="http://johnmacfarlane.net/pandoc/getting-started.html">Getting Started</a></p> <p><a href="http://johnmacfarlane.net/pandoc/getting-started.html">Getting Started</a></p>
<div class="references">
</div>
</content> </content>
</body> </body>
</html> </html>

1
Lesson4.md
View File

@ -1,3 +1,4 @@
# (Text/Document) Processor # (Text/Document) Processor
A document processor is a piece of software that interprets text and transcode its content from one form to another. There are many types of processors, yet for the purpose of this lesson we focus on only two types: (1) __Interpreter__ and (2) __Converter__. An interpreter is very similar to your web browser: it gets as input an html file (and related scripts), interprets their syntax and content and display the results on the screen. More generally, an interpreter first parses the content of an input file, then creates its own representation of it and finally performs the commands it has interpreted. In the process, there is a translation stage where the input syntax and content is read (parsed) and transformed into a transitional or median representation. This median representation is then linked to specific commands that are in turn executed locally on the interpreters machine. In the case of the converter, such median representation get transcoded into a specified format with a specific syntax written in a file. For example, an HTML file can be converted into both a PDF _and/or_ a DOC file. Interpreters and converters are ubiquitous systems which are fundamental for both publishing and archiving practices. A document processor is a piece of software that interprets text and transcode its content from one form to another. There are many types of processors, yet for the purpose of this lesson we focus on only two types: (1) __Interpreter__ and (2) __Converter__. An interpreter is very similar to your web browser: it gets as input an html file (and related scripts), interprets their syntax and content and display the results on the screen. More generally, an interpreter first parses the content of an input file, then creates its own representation of it and finally performs the commands it has interpreted. In the process, there is a translation stage where the input syntax and content is read (parsed) and transformed into a transitional or median representation. This median representation is then linked to specific commands that are in turn executed locally on the interpreters machine. In the case of the converter, such median representation get transcoded into a specified format with a specific syntax written in a file. For example, an HTML file can be converted into both a PDF _and/or_ a DOC file. Interpreters and converters are ubiquitous systems which are fundamental for both publishing and archiving practices.

69
Lesson5.html
View File

@ -4,8 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="generator" content="pandoc"> <meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Lesson5</title> <title></title>
<style type="text/css">code{white-space: pre;}</style> <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"> <link rel="stylesheet" href="style/html5.css">
</head> </head>
<body> <body>
@ -13,9 +16,9 @@
<h1 id="bibliographer">Bibliographer</h1> <h1 id="bibliographer">Bibliographer</h1>
<p>Compiling and producing a bibliography is an central part in writing academic texts. One can derive an overview of a text solely by glimpsing its bibliography. Being able to reference work in a standard fashion is usually required for most publications. However, the practice of manually writing a bibliography may at times be quite laborious. Because bibliographic standards (citation styles) vary depending on disciplines, and because various formats can change depending on the type of work that is referenced, it is easy to make mistakes and omit to include information here and there. Yet since bibliographic citation styles each have clear rules, it is rather trivial to implement bibliographic reading and writing systems using computers. Such systems certainly exists and are used to (1) gather bibliographic information into a database and (2) to output information in text format following whichever bibliographic standard it is instructed to – in short, they are capable of reading and writing such peculiar type of text.</p> <p>Compiling and producing a bibliography is an central part in writing academic texts. One can derive an overview of a text solely by glimpsing its bibliography. Being able to reference work in a standard fashion is usually required for most publications. However, the practice of manually writing a bibliography may at times be quite laborious. Because bibliographic standards (citation styles) vary depending on disciplines, and because various formats can change depending on the type of work that is referenced, it is easy to make mistakes and omit to include information here and there. Yet since bibliographic citation styles each have clear rules, it is rather trivial to implement bibliographic reading and writing systems using computers. Such systems certainly exists and are used to (1) gather bibliographic information into a database and (2) to output information in text format following whichever bibliographic standard it is instructed to – in short, they are capable of reading and writing such peculiar type of text.</p>
<h3 id="goals">Goals</h3> <h3 id="goals">Goals</h3>
<p>This lessons introduces how to use software to produce bibliographies for texts written in markdown and using pandoc as document converter. <a href="https://www.zotero.org">Zotero</a> is the program which will be demonstrated, yet other programs having the functionality of producing <a href="http://www.bibtex.org">BibTeX</a> formatted files (.bib) may also be used in conjunction with pandoc.<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a></p> <p>This lessons introduces how to use software to produce bibliographies for texts written in markdown and using pandoc as document converter. <a href="https://www.zotero.org">Zotero</a> is the program which will be demonstrated, yet other programs having the functionality of producing <a href="http://www.bibtex.org">BibTeX</a> formatted files (.bib) may also be used in conjunction with pandoc.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a></p>
<p>In short, the objectives of this lesson are:</p> <p>In short, the objectives of this lesson are:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li>Acquire basic understanding on how to use Zotero in gathering bibliographical information.</li> <li>Acquire basic understanding on how to use Zotero in gathering bibliographical information.</li>
<li>Acquire basic understanding on how to use Zotero to manage research references.</li> <li>Acquire basic understanding on how to use Zotero to manage research references.</li>
<li>Learn how to compile and export a BibTeX bibliography (and possibly other formats) using Zotero.</li> <li>Learn how to compile and export a BibTeX bibliography (and possibly other formats) using Zotero.</li>
@ -23,19 +26,29 @@
</ol> </ol>
<p>To install Zotero, please follow this <a href="https://www.zotero.org/download/">link</a> and install the <strong>Standalone version</strong> and related <strong>browser extension</strong>.</p> <p>To install Zotero, please follow this <a href="https://www.zotero.org/download/">link</a> and install the <strong>Standalone version</strong> and related <strong>browser extension</strong>.</p>
<h3 id="how">How</h3> <h3 id="how">How</h3>
<p><img src="img/z1.png" /></p> <div class="figure">
<p>Zotero brands itself as a “research organiser”, meaning that it can collect and arrange academic research information under a simple interface. As you can see from the above image, in a nutshell, Zotero is a list of works (books, blog posts, chapters, journal articles, etc.) augmented with meta-data (notes, tags, relations, etc.). Each work has, of course, a formal description adequate to the type of work it represents. For example, a blog post has an URL while a journal article may have a volume identifier. The goal here is not to delve into the details of each formats relating to each types of work that can be represented in Zotero, but rather to make use of it and see how it proceeds in formalising types of work.</p> <img src="img/z1.png" />
</div>
<p>Zotero brands itself as a &quot;research organiser&quot;, meaning that it can collect and arrange academic research information under a simple interface. As you can see from the above image, in a nutshell, Zotero is a list of works (books, blog posts, chapters, journal articles, etc.) augmented with meta-data (notes, tags, relations, etc.). Each work has, of course, a formal description adequate to the type of work it represents. For example, a blog post has an URL while a journal article may have a volume identifier. The goal here is not to delve into the details of each formats relating to each types of work that can be represented in Zotero, but rather to make use of it and see how it proceeds in formalising types of work.</p>
<p>If it is the first time you ever used Zotero, your works list should be empty. Here are two common ways to populate your database:</p> <p>If it is the first time you ever used Zotero, your works list should be empty. Here are two common ways to populate your database:</p>
<p><strong>1. Add an Item by Identifier</strong></p> <p><strong>1. Add an Item by Identifier</strong></p>
<p><img src="img/z2.png" /></p> <div class="figure">
<p>Identifiers such as <a href="https://www.isbn-international.org">ISBN</a> and <a href="http://www.doi.org">DOI</a> can be utilised to add items to Zotero using the special “add” button on the top menu bar. Each of ISBN and DOI are unique identifiers that refer to a specific work. Such identifiers are common and can be found on websites as as Amazon or a library website or simply directly printed in a book.</p> <img src="img/z2.png" />
</div>
<p>Identifiers such as <a href="https://www.isbn-international.org">ISBN</a> and <a href="http://www.doi.org">DOI</a> can be utilised to add items to Zotero using the special &quot;add&quot; button on the top menu bar. Each of ISBN and DOI are unique identifiers that refer to a specific work. Such identifiers are common and can be found on websites as as Amazon or a library website or simply directly printed in a book.</p>
<p><strong>2. Add an Item with browser extension</strong></p> <p><strong>2. Add an Item with browser extension</strong></p>
<p><img src="img/z3.png" /></p> <div class="figure">
<p>When you installed the standalone version of Zotero, an extension (plug-in) for your web browser was also available to install. Using this plug-in on your browser helps you collect bibliographical items on the web. Depending on your type of browser (Safari, Chrome, Firefox) you should see a small Zotero icon near your address bar. When an web page presents an bibliographical item that can be added to Zotero, the icon will change aspect (or literately appear) signifying that when clicked, the item will automatically be inserted in Zotero’s database. This comes very handy when browsing journals’ websites for example. Adding an article to Zotero becomes very easy (as exemplified in the image above).</p> <img src="img/z3.png" />
</div>
<p>When you installed the standalone version of Zotero, an extension (plug-in) for your web browser was also available to install. Using this plug-in on your browser helps you collect bibliographical items on the web. Depending on your type of browser (Safari, Chrome, Firefox) you should see a small Zotero icon near your address bar. When an web page presents an bibliographical item that can be added to Zotero, the icon will change aspect (or literately appear) signifying that when clicked, the item will automatically be inserted in Zotero's database. This comes very handy when browsing journals' websites for example. Adding an article to Zotero becomes very easy (as exemplified in the image above).</p>
<p>You should now be able to populate your Zotero database in a click.</p> <p>You should now be able to populate your Zotero database in a click.</p>
<p><img src="img/z4.png" /></p> <div class="figure">
<p>Compiling a bibliography and / or exporting Zotero items it is as easy. Zotero let’s you select individual items that can be exported in various formats (such as BibTeX) or even compiled into a formatted bibliography.</p> <img src="img/z4.png" />
<p><img src="img/z5.png" /></p> </div>
<p>Compiling a bibliography and / or exporting Zotero items it is as easy. Zotero let's you select individual items that can be exported in various formats (such as BibTeX) or even compiled into a formatted bibliography.</p>
<div class="figure">
<img src="img/z5.png" />
</div>
<p>For the purpose of this lesson, exporting selected Zotero items in the BibTeX format allows for referencing work from a markdown text using pandoc. This should produce a .bib file with all the information needed to produce a bibliography. The content of the file should look like the following.</p> <p>For the purpose of this lesson, exporting selected Zotero items in the BibTeX format allows for referencing work from a markdown text using pandoc. This should produce a .bib file with all the information needed to produce a bibliography. The content of the file should look like the following.</p>
<pre><code>@book{lazzarato_signs_2014, <pre><code>@book{lazzarato_signs_2014,
address = {Los Angeles, CA}, address = {Los Angeles, CA},
@ -98,33 +111,43 @@
year = {1995}, year = {1995},
pages = {96} pages = {96}
}</code></pre> }</code></pre>
<p>The BibTeX is yet another text-based human-readable format that accounts for all information needed in producing a proper bibliography. As you can see, the information is a kind of median representation of works, meaning that it is not yet formatted according to particular standard citation style<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a>. Instead it arranges and orders each work’s information in a standard structure with tags that can easily be parsed by a citation processor such as the one included in pandoc.</p> <p>The BibTeX is yet another text-based human-readable format that accounts for all information needed in producing a proper bibliography. As you can see, the information is a kind of median representation of works, meaning that it is not yet formatted according to particular standard citation style<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a>. Instead it arranges and orders each work's information in a standard structure with tags that can easily be parsed by a citation processor such as the one included in pandoc.</p>
<p>Citing with pandoc is straight forward.</p> <p>Citing with pandoc is straight forward.</p>
<p>Pandoc must first be instructed to link the generated .bib file with the specific markdown input file when creating an output document. This is done with a single parameter on the CLI. For example, the above BibTeX has been added to this site’s <em>wwwrite.bib</em> and used to generated this page usign the following command:</p> <p>Pandoc must first be instructed to link the generated .bib file with the specific markdown input file when creating an output document. This is done with a single parameter on the CLI. For example, the above BibTeX has been added to this site's <em>wwwrite.bib</em> and used to generated this page usign the following command:</p>
<pre><code>pandoc -s Lesson5.md --template=style/template.html5 -c style/html5.css --bibliography=wwwrite.bib -o Lesson5.html</code></pre> <pre><code>pandoc -s Lesson5.md --template=style/template.html5 -c style/html5.css --bibliography=wwwrite.bib -o Lesson5.html</code></pre>
<p>The important argument here being</p> <p>The important argument here being</p>
<pre><code>--bibliography=wwwrite.bib</code></pre> <pre><code>--bibliography=wwwrite.bib</code></pre>
<p>Now let’s cite a source from the BibTeX.</p> <p>Now let's cite a source from the BibTeX.</p>
<p>For example, let’s cite the work of Guattari who says “Since then, I have tried to nurture this machinic object, although I admit it is not something I control, rather it is a kind of core to which I am repeatedly led back.”<span class="citation" data-cites="guattari_machines_1995">[@guattari_machines_1995]</span></p> <p>For example, let's cite the work of Guattari who says &quot;Since then, I have tried to nurture this machinic object, although I admit it is not something I control, rather it is a kind of core to which I am repeatedly led back.&quot;<span class="citation">(Guattari 1995)</span></p>
<p>In markdown, the citation is written:</p> <p>In markdown, the citation is written:</p>
<pre><code>&quot;Since then, I have tried to nurture this machinic object, although I admit it is not something I control, rather it is a kind of core to which I am repeatedly led back.&quot;[@guattari_machines_1995]</code></pre> <pre><code>&quot;Since then, I have tried to nurture this machinic object, although I admit it is not something I control, rather it is a kind of core to which I am repeatedly led back.&quot;[@guattari_machines_1995]</code></pre>
<p>Easy. To reference a work “in-text”, one only has to specify an item’s entry identifier form the .bib file (here “guattari_machines_1995”) and prefix it with a ‘@’ symbol and bracketed with both opening ‘[’ and closing ’]’. Not only pandoc will “signposts” the citation in-text (at the specific text location) but also formats and appends the citation’s reference at the end of the output file (see the References section of this document).</p> <p>Easy. To reference a work &quot;in-text&quot;, one only has to specify an item's entry identifier form the .bib file (here &quot;guattari_machines_1995&quot;) and prefix it with a '@' symbol and bracketed with both opening '[' and closing ']'. Not only pandoc will &quot;signposts&quot; the citation in-text (at the specific text location) but also formats and appends the citation's reference at the end of the output file (see the References section of this document).</p>
<p>You can also reference multiple authors such as the ones listed above <span class="citation" data-cites="lazzarato_signs_2014 kirschenbaum_mechanisms_2012 hansen_technics_2012 guattari_soft_2009">[@lazzarato_signs_2014; @kirschenbaum_mechanisms_2012; @hansen_technics_2012; @guattari_soft_2009]</span> and look up their referenced works below.</p> <p>You can also reference multiple authors such as the ones listed above <span class="citation">(Lazzarato 2014; Kirschenbaum 2012; Hansen 2012; Guattari 2009)</span> and look up their referenced works below.</p>
<pre><code>[@lazzarato_signs_2014; @kirschenbaum_mechanisms_2012; @hansen_technics_2012; @guattari_soft_2009]</code></pre> <pre><code>[@lazzarato_signs_2014; @kirschenbaum_mechanisms_2012; @hansen_technics_2012; @guattari_soft_2009]</code></pre>
<h3 id="extra">Extra</h3> <h3 id="extra">Extra</h3>
<p><a href="https://www.zotero.org/support/">Zotero Documentation</a></p> <p><a href="https://www.zotero.org/support/">Zotero Documentation</a></p>
<p><a href="http://johnmacfarlane.net/pandoc/README.html">Citation Section of Pandoc’s User Guide</a></p> <p><a href="http://johnmacfarlane.net/pandoc/README.html">Citation Section of Pandoc's User Guide</a></p>
<h3 id="references">References</h3> <h3 id="references">References</h3>
<!-- Notes --> <!-- Notes -->
<!-- CSL: Citation Style Language --> <!-- CSL: Citation Style Language -->
<!-- Citation styles other than Pandoc's default Chicago (re: CSL file input) --> <!-- Citation styles other than Pandoc's default Chicago (re: CSL file input) -->
<section class="footnotes footnotes-end-of-document" role="doc-endnotes">
<div class="references">
<p>Guattari, Félix. 1995. “On Machines.” Edited by Andrew Benjamin. <em>Complexity: architecture, Art, Philosophy, Journal of Philosophy and the Visual Arts</em>, no. 6: 96.</p>
<p>———. 2009. <em>Soft Subversions: texts and Interviews 1977-1985</em>. Semiotext(E) Foreign Agents Series. Los Angeles : Cambridge, Mass: Semiotext(e) ; Distributed by the MIT Press.</p>
<p>Hansen, Mark B. N. 2012. “Technics Beyond the Temporal Object.” <em>New Formations</em> 77 (1): 44–62. doi:<a href="http://dx.doi.org/10.3898/NEWF.77.03.2012">10.3898/NEWF.77.03.2012</a>.</p>
<p>Kirschenbaum, Matthew G. 2012. <em>Mechanisms: new Media and the Forensic Imagination</em>. Cambridge, Mass.; London: MIT Press.</p>
<p>Lazzarato, M. 2014. <em>Signs and Machines: capitalism and the Production of Subjectivity</em>. Semiotext(E) Foreign Agents Series. Los Angeles, CA: Semiotext(e).</p>
</div>
<div class="footnotes">
<hr /> <hr />
<ol> <ol>
<li id="fn1" role="doc-endnote"><p><a href="https://en.wikipedia.org/wiki/Mendeley">Mendeley</a>, <a href="http://endnote.com">EndNote</a>, <a href="http://www.refworks.com">RefWorks</a>, etc. - <a href="https://www.zotero.org">Zotero</a> is presented because it is an open source project developed by the academic community.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn1"><p><a href="https://en.wikipedia.org/wiki/Mendeley">Mendeley</a>, <a href="http://endnote.com">EndNote</a>, <a href="http://www.refworks.com">RefWorks</a>, etc. - <a href="https://www.zotero.org">Zotero</a> is presented because it is an open source project developed by the academic community.<a href="#fnref1">↩</a></p></li>
<li id="fn2" role="doc-endnote"><p>There is many citation styles used in various disciplines. For a list of styles according to their disciplines, please refer to <a href="http://subjectguides.library.american.edu/citation">this guide</a>.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn2"><p>There is many citation styles used in various disciplines. For a list of styles according to their disciplines, please refer to <a href="http://subjectguides.library.american.edu/citation">this guide</a>.<a href="#fnref2">↩</a></p></li>
</ol> </ol>
</section> </div>
</content> </content>
</body> </body>
</html> </html>

68
README.md
View File

@ -1,68 +0,0 @@
---
title: WWWRITING WITH WIT
bibliography: wwwrite.bib
---
<img src="https://le-club-des-sans-sujets.org/w/wwwriting/img/rkwk101.gif" width="80%"/>
*Course prepared for the UvA in 2015*
*Full content available [here](https://le-club-des-sans-sujets.org/w/wwwriting/)*
## Intent
This [site](https://le-club-des-sans-sujets.org/w/wwwriting/) is intended to introduce humanities research writers how to write text in a modern fashion using their computers. The aim of the lessons listed below are points of departure for the practice of writing text using simple, basic, yet advance systems and technologies. Part of this endeavour is first and foremost to empower writers to use these systems and present simple didactic material to bootstrap their understanding of writing technologies by helping them develop a new type of literacy (an electronic one). Another goals of this site is to present the historical trajectories of modern writing systems by emphasising their genesis. Computerised writing systems and related methods have a long history following that of writing itself; the double-valance between the practice of writing and the mode of inscription (technologies) is an important topic in the humanities [@pontin_how_2012; @kirschenbaum_book-writing_2013; @kirschenbaum_mechanisms_2012; @kittler_discourse_1990].
## Philosophy
The idea in compiling this site-lesson is two fold:
(1) Present an alternative to the use of proprietary software for writing academic texts:
Considering the hegemonic use of proprietary software to write academic and non-academic texts (MS Word, Google Docs, Apple Pages, etc.) it is important to underline alternatives as these software not only “hide” their inner workings but most importantly may fall short in providing writers with adequate functionality required in writing academic texts [^1]. Obfuscation is impractical (and problematic) for academics in the Humanities.
We believe in texts that we can read "all the way down". We will thus utilise (as much as possible) software which is “open” so that we can read the source code and formats that are [human-readable](https://en.wikipedia.org/wiki/Human-readable_medium) as opposed to solely [machine-readable](https://en.wikipedia.org/wiki/Machine-readable_data). Hence, throughout the lessons, we will be inspecting files and writing ones that are augmented with special codes that machines understand. This idea of writing "meta-data" into the text or more precisely _markup_ text in a file is very important in making sure the text is human _and_ machine readable.
(2) Offer a glimpse into methods, practices and systems of software writing:
As you may already know, writing software is primarily a text-based practice. Writing code is all about text, keyboards, text editors, line count, syntax and the likes. Hence an important amount of systems and technologies have been devised for the composition of software (as text). From syntax highlighting to version control, these systems have a long history and can possibly provide academic writers with powerful literary tools that can enable them to bolster their prose.[^2] In exposing and historicising these systems our objective is for the reader to relate to modern software writing systems not as merely a tool but as system with a culture. In no way we expect readers to become "programmers." Far from this, we would rather present them the basics of writing text using (modern) computer systems while hoping that they'll develop a critical stance on these systems' genesis, conditions, limitations, and capabilites.
## Scheme
The current site is segmented in six lessons covering the (very) basics of writing academic texts on a computer.[^3] The overall composition of these lessons is by no mean derived from obscure "Principles" or (even worst) "Best-practices" but rather stand as a loosely coupled set of lessons that can be traversed all together (or not) in a short period of time. The site is neither a manual nor a manifesto and should be seen as a starting point to further developing (creative) technics and methods in text writing.
* [Lesson 1: Text Encoding](https://le-club-des-sans-sujets.org/w/wwwriting/Lesson1.html)
Covers fundamentals of representation of text looking up how text is encoded/decoded as data. We will be using [Sublime Text](http://www.sublimetext.com) as an editor.
* [Lesson 2: CLI or the Command Line Interface](https://le-club-des-sans-sujets.org/w/wwwriting/Lesson2.html)
Presents how one can manipulate files and issue computing commands using what is known as a terminal.
* [Lesson 3: Markup / Markdown](https://le-club-des-sans-sujets.org/w/wwwriting/Lesson3.html)
Introduces a markup language ([Markdown](http://daringfireball.net/projects/markdown/)) that is used to format and annotate text.
* [Lesson 4: (Text/Document) Processor](https://le-club-des-sans-sujets.org/w/wwwriting/Lesson4.html)
Introduces a text / document processor ([Pandoc](http://johnmacfarlane.net/pandoc/)) which converts files written in a format into another.
* [Lesson 5: Bibliographer](https://le-club-des-sans-sujets.org/w/wwwriting/Lesson5.html)
Looks at how to compile and maintain a bibliography using open source software ([Zotero](https://www.zotero.org)) and export references into a document.
* [Lesson 6: Styling](/)
Discuss how to style (colour, margins, cover image, etc.) a given output from the text / document processor
As a final note worth mentioning (before delving further): all the lessons of this site, including this page, have been (are) written using the aforementioned encodings and systems. Hence, for the curious, the reader can lookup the files, modify and compile them to bootstrap their writing project. Whatever you see on this site is made available for you to read, modify, etc.
## References
[^1]: Literally fall short of basic features– i.e. can’t format a bibliography for example– or disable these features by design as [Antifeatures](https://www.fsf.org/bulletin/2007/fall/antifeatures/).
[^2]: As a side note, for those who are interested in reading about code as poetry (and more) — please refer to recent work by @cox_speaking_2013 and @montfort_10_2014.
[^3]: That is, writing text on a computers in 2015.

35
index.html
View File

@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WWWRITING WITH WIT</title> <title>WWWRITING WITH WIT</title>
<style type="text/css">code{white-space: pre;}</style> <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"> <link rel="stylesheet" href="style/html5.css">
</head> </head>
<body> <body>
@ -17,18 +20,18 @@
</figure> </figure>
</header> </header>
<h2 id="intent">Intent</h2> <h2 id="intent">Intent</h2>
<p>This site is intended to introduce humanities research writers how to write text in a modern fashion using their computers. The aim of the lessons listed below are points of departure for the practice of writing text using simple, basic yet advance systems and technologies. Part of this endeavour is first and foremost to empower writers to use these systems in presenting simple didactic material working towards bootstrapping their understanding of writing technologies and help them develop a new type of literacy (albeit an electronic one). Another goals of this site is to present the historical trajectories of modern writing systems by emphasising on their phylogenesis. Computerised writing systems and related methods (as we will see) have a long history following that of writing itself; the double-valance between the practice of writing and the mode of inscription (technologies) is an important (research) topic in the humanities <span class="citation" data-cites="pontin_how_2012 kirschenbaum_book-writing_2013 kirschenbaum_mechanisms_2012 kittler_discourse_1990">[@pontin_how_2012; @kirschenbaum_book-writing_2013; @kirschenbaum_mechanisms_2012; @kittler_discourse_1990]</span>.</p> <p>This site is intended to introduce humanities research writers how to write text in a modern fashion using their computers. The aim of the lessons listed below are points of departure for the practice of writing text using simple, basic yet advance systems and technologies. Part of this endeavour is first and foremost to empower writers to use these systems in presenting simple didactic material working towards bootstrapping their understanding of writing technologies and help them develop a new type of literacy (albeit an electronic one). Another goals of this site is to present the historical trajectories of modern writing systems by emphasising on their phylogenesis. Computerised writing systems and related methods (as we will see) have a long history following that of writing itself; the double-valance between the practice of writing and the mode of inscription (technologies) is an important (research) topic in the humanities <span class="citation">(Pontin 2012; M. Kirschenbaum 2013; M. G. Kirschenbaum 2012; Kittler 1990)</span>.</p>
<h2 id="philosophy">Philosophy</h2> <h2 id="philosophy">Philosophy</h2>
<p>The idea in compiling this site-lesson is two fold:</p> <p>The idea in compiling this site-lesson is two fold:</p>
<ol type="1"> <ol style="list-style-type: decimal">
<li><p>Present an alternative to the use of proprietary software for writing academic texts:</p> <li><p>Present an alternative to the use of proprietary software for writing academic texts:</p>
<p>Considering the hegemonic use of proprietary software to write academic and non-academic texts (MS Word, Google Docs, Apple Pages, etc.) it is important to underline alternatives as these software not only “hide” their inner workings to scrutiny but most importantly may fall short in providing writers with adequate functionality required in writing academic texts <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>. Obfuscation is impractical (and problematic) obviously so for academics in the Humanities.</p> <p>Considering the hegemonic use of proprietary software to write academic and non-academic texts (MS Word, Google Docs, Apple Pages, etc.) it is important to underline alternatives as these software not only “hide” their inner workings to scrutiny but most importantly may fall short in providing writers with adequate functionality required in writing academic texts.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a> Obfuscation is impractical (and problematic) obviously so for academics in the Humanities.</p>
<p>We believe in texts that we can read, that is, we will utilise (as much as possible) software which is made “open” for us to read the source code and formats that are <a href="https://en.wikipedia.org/wiki/Human-readable_medium">human-readable</a> as opposed to solely <a href="https://en.wikipedia.org/wiki/Machine-readable_data">machine-readable</a>. Hence, throughout the lessons, we will be inspecting files and writing ones that are augmented with special codes that machines can understand. This idea of writing “meta-data” into the text or more precisely <em>markup</em> text in a file is very important in making sure the text is human <em>and</em> machine readable.</p></li> <p>We believe in texts that we can read, that is, we will utilise (as much as possible) software which is made “open” for us to read the source code and formats that are <a href="https://en.wikipedia.org/wiki/Human-readable_medium">human-readable</a> as opposed to solely <a href="https://en.wikipedia.org/wiki/Machine-readable_data">machine-readable</a>. Hence, throughout the lessons, we will be inspecting files and writing ones that are augmented with special codes that machines can understand. This idea of writing &quot;meta-data&quot; into the text or more precisely <em>markup</em> text in a file is very important in making sure the text is human <em>and</em> machine readable.</p></li>
<li><p>Offer a glimpse into methods, practices and systems of software writing:</p> <li><p>Offer a glimpse into methods, practices and systems of software writing:</p>
<p>As you may already know, writing software is primarily a textual-based practice. Writing code is all about text, keyboards, text editors, line count, syntax and the likes. Hence an important amount of systems and technologies have been devised for the composition of software (as text). From syntax highlighting to version control, these systems have a long history and can possibly provide academic writers with powerful literary tools that can enable them to bolster their prose.<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> In exposing (and historicising) these systems our objective is for the reader to relate to modern software writing systems not as merely a tool but as system with a culture. In no way we expect readers to become “programmers”, far from this, we would rather present them the basics of writing text using (modern) computer systems while hoping that they’ll develop a critical stance on these systems’ genesis, conditions, limitations and capabilites.</p></li> <p>As you may already know, writing software is primarily a textual-based practice. Writing code is all about text, keyboards, text editors, line count, syntax and the likes. Hence an important amount of systems and technologies have been devised for the composition of software (as text). From syntax highlighting to version control, these systems have a long history and can possibly provide academic writers with powerful literary tools that can enable them to bolster their prose.<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a> In exposing (and historicising) these systems our objective is for the reader to relate to modern software writing systems not as merely a tool but as system with a culture. In no way we expect readers to become &quot;programmers&quot;, far from this, we would rather present them the basics of writing text using (modern) computer systems while hoping that they'll develop a critical stance on these systems' genesis, conditions, limitations and capabilites.</p></li>
</ol> </ol>
<h2 id="scheme">Scheme</h2> <h2 id="scheme">Scheme</h2>
<p>The current site is segmented in six lessons covering the (very) basics of writing academic texts on a computer.<a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a> The overall composition of these lessons is by no mean derived from obscure “Principles” or (even worst) “Best-practices” but rather stand as loosely coupled set of lessons that can be traversed all together (or not) in a short period of time. The site is neither a manual nor a manifesto and should be seen as a starting point into further developing (creative) technics and methods in text writing.</p> <p>The current site is segmented in six lessons covering the (very) basics of writing academic texts on a computer.<a href="#fn3" class="footnoteRef" id="fnref3"><sup>3</sup></a> The overall composition of these lessons is by no mean derived from obscure &quot;Principles&quot; or (even worst) &quot;Best-practices&quot; but rather stand as loosely coupled set of lessons that can be traversed all together (or not) in a short period of time. The site is neither a manual nor a manifesto and should be seen as a starting point into further developing (creative) technics and methods in text writing.</p>
<ul> <ul>
<li><p><a href="Lesson1.html">Lesson 1: Text Encoding</a></p> <li><p><a href="Lesson1.html">Lesson 1: Text Encoding</a></p>
<p>Covers fundamentals of representation of text looking up how text is encoded/decoded as data. We will be using <a href="http://www.sublimetext.com">Sublime Text</a> as an editor.</p></li> <p>Covers fundamentals of representation of text looking up how text is encoded/decoded as data. We will be using <a href="http://www.sublimetext.com">Sublime Text</a> as an editor.</p></li>
@ -44,15 +47,23 @@
<p>Discuss how to style (colour, margins, cover image, etc.) a given output from the text / document processor</p></li> <p>Discuss how to style (colour, margins, cover image, etc.) a given output from the text / document processor</p></li>
</ul> </ul>
<p>As a final note worth mentioning (before delving further): all the lessons of this site, including this page, have been (are) written using the aforementioned encodings and systems. Hence, for the curious, the reader can lookup the files, modify and compile them to bootstrap their writing project. Whatever you see on this site is made available for you to read, modify, etc.</p> <p>As a final note worth mentioning (before delving further): all the lessons of this site, including this page, have been (are) written using the aforementioned encodings and systems. Hence, for the curious, the reader can lookup the files, modify and compile them to bootstrap their writing project. Whatever you see on this site is made available for you to read, modify, etc.</p>
<h2 id="references">References</h2> <div class="references">
<section class="footnotes footnotes-end-of-document" role="doc-endnotes"> <h2>References</h2>
<p>Cox, Geoff. 2013. <em>Speaking Code: coding as Aesthetic and Political Expression</em>. Software Studies. Cambridge, Mass: The MIT Press.</p>
<p>Kirschenbaum, Matthew. 2013. “The Book-Writing Machine.” <em>Slate</em>, March. <a href="http://www.slate.com/articles/arts/books/2013/03/len_deighton_s_bomber_the_first_book_ever_written_on_a_word_processor.html">http://www.slate.com/articles/arts/books/2013/03/len_deighton_s_bomber_the_first_book_ever_written_on_a_word_processor.html</a>.</p>
<p>Kirschenbaum, Matthew G. 2012. <em>Mechanisms: new Media and the Forensic Imagination</em>. Cambridge, Mass.; London: MIT Press.</p>
<p>Kittler, Friedrich A. 1990. <em>Discourse Networks 1800/1900</em>. Stanford University Press.</p>
<p>Montfort, Nick. 2014. <em>10 PRINT CHR$(205.5+RND(1))[semi-Colon] [Colon] GOTO 10</em>.</p>
<p>Pontin, Jason. 2012. “How Authors Write.” <em>MIT Technology Review</em>. <a href="http://www.technologyreview.com/review/429654/how-authors-write/">http://www.technologyreview.com/review/429654/how-authors-write/</a>.</p>
</div>
<div class="footnotes">
<hr /> <hr />
<ol> <ol>
<li id="fn1" role="doc-endnote"><p>Literally fall short of basic features– i.e. can’t format a bibliography for example– or disable these features by design as <a href="https://www.fsf.org/bulletin/2007/fall/antifeatures/">Antifeatures</a>.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn1"><p>Literally fall short of basic features– i.e. can’t format a bibliography for example– or disable these features by design as <a href="https://www.fsf.org/bulletin/2007/fall/antifeatures/">Antifeatures</a>.<a href="#fnref1">↩</a></p></li>
<li id="fn2" role="doc-endnote"><p>As a side note, for those who are interested in reading about code as poetry (and more) — please refer to recent work by <span class="citation" data-cites="cox_speaking_2013">@cox_speaking_2013</span> and <span class="citation" data-cites="montfort_10_2014">@montfort_10_2014</span>.<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn2"><p>As a side note, for those who are interested in reading about code as poetry (and more) — please refer to recent work by <span class="citation">Cox (2013)</span> and <span class="citation">Montfort (2014)</span>.<a href="#fnref2">↩</a></p></li>
<li id="fn3" role="doc-endnote"><p>That is, writing text on a computers in 2015.<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li> <li id="fn3"><p>That is, writing text on a computers in 2015.<a href="#fnref3">↩</a></p></li>
</ol> </ol>
</section> </div>
</content> </content>
</body> </body>
</html> </html>

5
metadata.epub3.yaml
View File

@ -10,6 +10,9 @@ creator:
text: David Gauthier text: David Gauthier
- role: editor - role: editor
text: Erin La Cour text: Erin La Cour
publisher: AAAAHHH identifier:
- scheme: DOI
text: doi:10.234234.234/33
publisher: Amsterdammm University Press
rights: © 2015 David Gauthier, CC BY-NC rights: © 2015 David Gauthier, CC BY-NC
--- ---

483
style/style.css
View File

@ -1,483 +0,0 @@
/*
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;
}
}

3
style/template.html5
View File

@ -12,6 +12,9 @@ $if(date-meta)$
$endif$ $endif$
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title> <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
<style type="text/css">code{white-space: pre;}</style> <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)$ $if(quotes)$
<style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style> <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
$endif$ $endif$

1
wwwrite.bib
View File

@ -1,3 +1,4 @@
@misc{pontin_how_2012, @misc{pontin_how_2012,
title = {How Authors Write}, title = {How Authors Write},
url = {http://www.technologyreview.com/review/429654/how-authors-write/}, url = {http://www.technologyreview.com/review/429654/how-authors-write/},