index.json

[{"categories":null,"content":" (defun org-hugo--collect-table-metadata (info ) \u0026quot;Collect all menu-related metadata for export. INFO is a plist holding export options. returns a nested plist of the form: (menu '(menu-name '(option-name option value) option-name2 option-value2...) \u0026quot; (let* () (menu-attributes '(:hugo-menu-parent :hugo-menu-weight)) (cl-loop for att in menu-attributes collect )))  Summary Assignments for HIS455 are linked here as I put them up on the site. See the Syllabus for an overview of assignments and their values.\nParticipation Your participation mark is quite substantial (20%) and reflects the collaborative nature of the seminar. The mark reflects your participation in class discussions and also in offline discussions on Slack. Here are some hints about what constitutes excellent participation in this class. In a few places I have added links \u0026ndash; please follow them and read the more substantive discussions you\u0026rsquo;ll find there.\n Do the readings carefully every week Craft excellent discussion questions before class Listen attentively to your classmates Intervene respectfully when you have something to say Take an active role in moving the class and the group assignments forward.  How to create a discussion question Formulate a good discussion question that will be interesting to other students and call for some thinking about the reading. Try also to find a question that genuinely interests you.\nThe following are characteristics of a good discussion question:\n A discussion question cannot be answered yes or no. A discussion question cannot be answered with a fact. A discussion question should not require a personal opinion outside the reading. A discussion questions should redirect the discussion to the reading itself. A discussion question should ask the discussants to explain the author\u0026rsquo;s meaning and not simply quote the author or authors. A discussion question should indicate that the person who posed the question is actually curious about the answer. A discussion question should be answerable with evidence from the reading and common information that has preceded it in the course. A discussion question should permit several interpretations. In other words, it should be rich enough to offer several possible directions in its answers.  Class Project Overview The class project, which will occupy most of the class\u0026rsquo;s second semester and some of the first, is always a substantial collaboration between some or all of the students in the course, and a community organization. In most years, we work with one or more local history groups. This year we will be working exclusively with the Khangchendzonga Conservation Committee (KCC), a local NGO in the Indian Himalayan State of Sikkim. This is a very exciting change for Hacking History, and also represents the first phase of a broad collaborative project involving a number of other scholars. The project is an opportunity to offer a substantial service to an incredible organization, while rapidly learning about an enormously interesting and diverse region, rich in cultural and ecological heritage.\nUnusually for this class, some of the parameters for this class have already been laid out in a Memorandum of Understanding between the KCC and the leaders of the broader project. Here are some highlights of that document, plus some further constraints:\n The website we\u0026rsquo;re building will serve two functions:  a general purpose website to serve as the KCC\u0026rsquo;s public presence (their current website dates from 2004 and has very little information) a historical section which will provide context for the KCC\u0026rsquo;s current work and an archive of some of their most important documents, e.g. the training manuals from their education programs  Website content will be based in part on student term papers, and will draw upon an already-existing archive of digitized material from the KCC. The website will run the Wordpress software, a user-friendly, open-source content management system. Students will design the website by modifying an existing Wordpress theme, probably one based on the Bootstrap web framework. Students will write most of the content, but images will be drawn from a large archive belonging to the broader project and the KCC KCC is a small, under-resourced NGO located in a remote village in a developing country. As a result, particular attention needs to be paid to code quality \u0026amp; accessibility. We will also need to build an excellent online help system as part of our project. Sikkim is a multilingual state. For the first time, Hacking History students will need to pay attention to internationalization and multilingual content. After the academic year has finished, there may be an opportunity to travel to Sikkim and present the website to the KCC. More information on this possibility will follow late in the Fall semester.  A primary goal of this class is to create something of lasting value to yourself, the KCC, and the community it serves, so that your work endures beyond the temporal scope of the class. The project is worth 45% of your final mark, but this percentage is distributed between various parts of the project. A high premium will be placed on timely, regular progress made towards intermediate goals, to help make sure that these complex and difficult projects come to fruition. The class is a large working group; as a result, you will specialize quite a bit and it may be difficult to co-ordinate work effectively. We\u0026rsquo;ll discuss tools and strategies for project management along the way.\nCollaboration and Service We should perhaps distinguish between two kinds of working together for this project. On the one hand, you will be working closely with your peers. As a result, you have an additional responsibility to your working group \u0026ndash; your lapses affect them too. You\u0026rsquo;ll also need to be sure to communicate clearly and effectively with each other, both electronically and in person. Be sure that you know what each of you bring to \u0026amp; get out of the project; and how will you hand the project over.\nYou will also be working together with an organization that will be depending on you. In this respect, you act as emissaries of the University and of the course. You are expected to be respectful, courteous, and responsive.\nGeneral Project Parameters The finished product should be a polished website which is directly of use to the partnering organization; it should also be an intellectually honest endeavour which takes seriously the historian\u0026rsquo;s responsibility to tell truths about the past. Your work will, then, be held to a relatively high standard \u0026ndash; I\u0026rsquo;m asking a lot of you. Do not put anything off till the last minute. In a complex project like this you will be surprised at the number of tasks there are to accomplish. In particular, you\u0026rsquo;ll gain a lot by attacking your organizational tasks as early as possible.\nExamples Previous years\u0026rsquo; projects are mostly linked to from that year\u0026rsquo;s course website. You may be particularly interested in the project from 2015. They are all great, so look there for some inspiration. Please note that these sites were made by students with no prior technical experience; if you\u0026rsquo;re in that category they may look daunting right now, but don\u0026rsquo;t be discouraged, you\u0026rsquo;ll learn what you need to in time to make something really cool. (But: this year\u0026rsquo;s project is for sure the most ambitious we\u0026rsquo;ve ever attempted. Yay!)\nTechnical Parameters If you have no technical background, this may not make much sense to you in the first class, but as the semester progresses you\u0026rsquo;ll understand more. Here are some of the technical skills you will be using in your project:\n Web hosting: I will provide hosting for class websites at hackinghistory.ca. Theme Development: each of these websites will come equipped with a starter theme with which I have some familiarity. Over the course of the project, you will adapt that theme to serve your purposes. This means you will work directly with:  Style: changing CSS files to give the site a new look-and-feel Structure: modifying HTML templates to change the arrangement of elements on various web pages Functionality: installing Wordpress plugins, and tinkering with PHP and Javascript code, to get the functionality you and your partner need  Text editing: in order to do all of the above, you should become at least a little familiar with a text editor. Ad described in \u0026ldquo;Tools\u0026rdquo;, the Atom editor is the best choice. Later in the term we will also go over various ways to edit code directly from the Wordpress administrative interface.  Human Subjects Ethics Review Our project will make use of interviews conducted under a protocol approved by the Unviersity\u0026rsquo;s Ethics Review Board. You are advised to familiarize yourselves with the University\u0026rsquo;s Ethics Review process, and we will discuss general guidelines for oral history research in the early part of the Fall semester.\nGrading The final project will be evaluated based on its success in meeting the goals outlined in the proposal, on the integrity of historical analysis, on the aesthetics of the presentation, and on the satisfaction of the community partners with your work.\n   Component Due Date Group/Indiv % of Course Grade     Proposal \u0026amp; Presentation 12/05 Group 10   Interim Report 02/07 Group 10   Final Product 04/04 Group 20   Partner Response \u0026mdash; Group 5    Components Proposal The proposal is a substantial group effort which involves the submission of a formal document to me and to your partner, as well as a presentation component. Read more about it on its own page.\nInterim Report The Interim Report is a report back to me and to your partner on the progress you\u0026rsquo;re making. It will be about 8-10 pages long, and indicate :\n how much of the website content you\u0026rsquo;ve completed, and whether there are any serious problems that might require you to change your focus. how much of the website design is complete, and where you expect further challenges in what ways you find yourself departing from the plan agreed upon, and why.  Final Product The Final Product is a fantastically intricate and rich historical website, with lots of exciting bits of information presented in a vigourous, interesting, and visually appealing manner.\nPartner Response I\u0026rsquo;ll ask the KCC for feedback on your work, and take that into account in my final grade.\nProject Proposal The project kicks off at the end of Fall semester with a formal proposal and presentation. The written proposal will be submitted not only to me, but to the KCC as well, so it is an important document.\nWhat is this project proposal thing for anyway? A project proposal is a roadmap and guide to the final project. You yourself will consult it many times over the course of the semester, as you struggle to keep track of what you have promised to do. Your partner (who will respond to your proposal with feedback \u0026amp; perhaps call for some changes) will also refer back to the proposal when you present them with the final product. so it\u0026rsquo;s a very important document. But what goes in it?\nThe proposal is a complicated document that walks a fine line: it should present an exciting vision without promising too much; it should present a compelling historical narrative even though your real knowledge about the subject is still somewhat limited; it should propose a look for the website even though what you produce will certainly look different. Here is what I expect from this proposal document:\n a substantial piece of writing that describes your goals for the site in some (but not too much) detail. More on that below. a preliminary bibliography, of as many different sources as you can muster. Light annotation is a plus (not a paragraph-long description of each source, as in a formal \u0026ldquo;annotated bibliography\u0026rdquo;, but a sentence or two describing the value of the work to your project). You\u0026rsquo;re going to end up doing a lot of research for this project, so \u0026ldquo;as many sources as you can muster\u0026rdquo; should not be 5 or 6, but more like 20 or 30. mockups of representative site pages – this means the front page, a couple of the main pages you plan, and some pages for the main datatypes (posts, events, historical photographs, artefacts, oral history pages, whatever).  The Main Proposal: defining your project This is a substantial document (3000 words or more) which the group should produce together (so, divide up the work – see below). Here\u0026rsquo;s what it should cover:\n Scope/Introduction: What is the topic of your website, and what kinds of information will it provide? Why is it useful/important/interesting? Who is the partner, and how does it benefit them? What topics/tasks are out of scope? this latter question, which is sometimes hard to answer, is an important one to think about – setting yourselves limits is an important part of making the project feasible. Your partner will be reading this, so emphasize that you wil lbe uilding a website based onteh Wordpress framework, with light modifications \u0026amp; additional plugins. Audience: who wants to visit this site, and what will they do there? Structure and Presentation: Describe the layout and structure of your website as well as you can. Refer to the mockups, and feel free to draw diagrams (showing, e.g., how people are likely to move around the site, or what the hierarchical relation of pages is, etc.). Describe in some detail what kinds of information each type of page will have. In your description, say why you chose this particular organizational structure – why are these the most important navigational axes for your site? Research Methods: What do you have to learn, and how will you do it? E.g., mention that you will do oral histories if you intend to; or that your will access architectural records in the Toronto Archive, if you intend to do that. consider also what the most interesting historiographical questions are – what are the puzzles that interest/motivate you? Challenges: Describe as specifically as you can the difficulties you expect to face, and how you hope to overcome them. If your group is missing skills that you need, again, be as specific as you can about what you need to know and how you might address this need. Roadmap: When do you expect to get your work done? The final website is due in class Apr. 4. You will need to get something done every week until then (!) to make this project great. What are your goals for each week? Also, who is doing what? each person in the group should have specific responsibilities to which they commit. These may change around a bit, and you will all help each other with your assigned tasks, but laying out expectations in writing makes it more likely that things will get done. Working with your Partner: Describe in as much detail as possible the relationship with your partner. Include e.g. discussion of:  How your work will benefit your partner What resources will your partner bring to the project What plans you have made for turning the project over to your partner   Mockups In addition to the main proposal, you should include mockups of some of the main pages on the website, e.g., the front page and the layout for various content types. This is a proposal, and we understand that things will change as you go forward.\nI recommend using the 960 grid paper we used in our mockup class, or this one, or one of these, or one of these, or one of these, or, especially for rough brainstorming, ZURB\u0026rsquo;s own sketchsheets for responsive design or this nice little collection. Refer back to your excellent reading – your mockups will work best if they indicate some (but not all) of the interactions you expect people to have with the site.\nUser Personas Include a representative sample of User Personas like the ones we did in class (but more professional). Add sections explaining how the user will likely navigate through the site.\nWe\u0026rsquo;ll use these documents to create simple \u0026ldquo;user stories\u0026rdquo; that help us add features later on in the project.\nBibliography You wil lbe required to use Zotero and the class bibliography in all your work from this point on.\nEssay Assignment Due 01/16\nBasics Write an 8-10 page paper on a research topic related to the KCC. This is an ordinary research paper of the kind you have done many times before; an excellent basic guide to writing history papers is available on the writing centre website.\nChoosing a Topic Hopefully many aspects of the project interest you (this document will be updated with a list of suggestions several weeks into the semester). Choose a topic which is broad enough to sustain a mid-length argument of the sort normally found in this type of short research paper. This is a small class, and you see me every week; you should check in with me before the end of the semester to ensure that your topic is a good one.\nThe research paper stands on its own, but in most cases pieces of the paper can be recycled into the website proper. For this reason, it\u0026rsquo;s best if group members can choose a variety of topics not too closely bunched to one another. Consult with your classmates about their plans, and if possible avoid excessive overlap in your paper topics.\nMarking As has doubtless generally been your experience, marking proceeds on an evaluation of:\n Originality and thoughtfulness of your thesis: Are you making an interesting argument? Is it yours or does it belong to one of your sources? Quality of your evidence: do you present convincing evidence for each of your claims, supported by compelling arguments? Structure: is your paper easy to follow, and does each part flow naturally from what comes before? Style: is your paper a pleasure to read? Attention to Detail: are your citations properly formatted (please use Zotero and add your citations to the class Zotero bibliography), have you avoided typos, etc.?  (listed in approximately descending order)\nNumber of Sources Please don\u0026rsquo;t ask me how many sources you need. As many as are required! The most interesting part of writing a research paper is doing primary source research, and we are privileged to have a substantial archive of primary sources direct from the KCC. Please make the most of them.\nSTA 01: HTML \u0026amp; CSS Due 09/26 before class\nYou do not have to become a coder to do well in this course. However, you will have to be willing to explore technical skills that you might not otherwise develop as a humanities scholar. In this initial assignment, we\u0026rsquo;ll use one of the web\u0026rsquo;s many excellent self-education platforms to learn the very basics of how web pages work.\nWeb pages are composed of three components: HTML, CSS, and Javascript. HTML provides the structure and content of a web page; CSS controls the style of presentation; and Javascript permits dynamic modification of both. To explore the web from the inside, you need to be alittle bit comfortable in all three.\nAssignment A (for beginners) Codeacademy.com is a platform that focusses on teaching web skills; head over there and set up an account. Once you\u0026rsquo;ve done that, complete the HTML \u0026amp; CSS course, which will take about 7 hours.\nOnce you have finished, send me a link to your profile page (click \u0026ldquo;view my Profile\u0026rdquo; under the top right menu item with your picture on it). That\u0026rsquo;s all! But feel free to continue exploring on Codeacademy \u0026ndash; there\u0026rsquo;s lots to learn and much of it will be helpful to this course, or to your further explorations in this field.\nAssignment B (for returnees) If you are already a hotshot coder, or if you took Digital History last Spring: codacademy is not for you!\n return to (or set up) your Github account clone my html-tutorial-ex tutorial write a short tutorial about one of the following:  the HTML5 \u0026lt;audio\u0026gt; and \u0026lt;video\u0026gt; elements HTML tables \u0026ldquo;new\u0026rdquo; semantic tags such as \u0026lt;aside\u0026gt;, \u0026lt;article\u0026gt;, \u0026lt;header\u0026gt;, \u0026lt;footer\u0026gt;, etc. CSS float Padding and Margins Flexbox or CSS Grids   Your tutorial should include a README.md that explains the function of this HTML/CSS feature to the reader, and a practical example that the reader can play with to understand it. The playground should take the form of one HTML and one CSS file. Once you\u0026rsquo;re done, you should feel free to set up a tiny jsbin with your sample code; this will make it a bit easier for your readers to mess about.\nYou can learn more about git and Github here. This information will come in handy later, so it\u0026rsquo;s well worth your time now.\nSTA 02: Oral History The documents we inherit from the KCC include a number of oral history interviews conducted by a researcher over the summer. They describe the work and development of the KCC. In this assignment, you will choose one oral history file and write a short essay about it. The \u0026ldquo;technical\u0026rdquo; part: you will write this assignment in markdown, in a separate file which will be loaded into a one-page website and displayed as HTML. Your text should reference the oral history and, in particular, should point readers to specific passages in the interview by the use of time-code links (the assignment repository describes in detail how to do this).\nContent of your Assignment Your written assignment should be approximately 400 words in length, and should identify\n issues of interest to you, and to the team project, which arise in the interview reflections on the use of oral history sources, e.g.:  what additional information do you get from listening to the original oral history source? what is missing? what do you wish the interviewer had done differently? will you treat this source any differently from the way you would treat a written source?   In both cases, please make references to specific passages in the interview. Since this is a web-based project, you may want to include a few pictures as well, and perhaps make changes to the CSS and HTML of the appropriate files. Depending on the pace of our data-processing project, we may be able to provide you with PDFs of supporting texts as well.\nI\u0026rsquo;ll provide you with a choice of files shortly.\nChoosing an Interview We have a small selection of oral history interviews for you to choose from. All of these were conducted by a student research assistant in Yuksom in July and August of 2017, with founding members of the KCC. You may find that you have to sneak ahead to the next couple of weeks of reading in order to make sense of the context for the interviews. It\u0026rsquo;s all information you\u0026rsquo;ll need to know eventually; and if you have questions that are difficult to resolve, Slack is a good place to ask them.\n Chewang Bhutia, Aug 9, 2017: Chewang Bhutia is a guide and one of the earliest founders of the KCC. The discusses the early days. Pema Bhutia, June 29, 2017: Brief, but rich discussion on the origination of the KCC by its President, Pema Bhutia, one of the founding members. Pema describes the situations in West Sikkim which inspired the establishment of the organization: un-regulated tourism practices (non-eco) \u0026ndash; the extraction and depletion of Rhododendron wood for fires and medicinal plants in the KNP, garbage accumulations, poaching of wild animals, etc. Pema also discusses the Sikkim Biodiversity and Ecotoursim Project and the first KCC projects: taking volunteers to clean the trail; tour guide, pack-animal operator and lodge operator training projects and manuals; the formation of ESPAY; early finances; festivals; cultural programs; the PRA; KCC moving forward. Pema Bhutia \u0026amp; Tsering Uden Bhutia (undated, summer 2017): A discussion with Pema Bhutia and another founder, the current director Tsering Uden Bhutia, about the establishment of a UNESCO World Heritage Site at the Khangchendzonga National Park. Particular emphasis of the designation of the area as a natural and cultural site (these mixed designations are very new). Uden Bhutia on ecotourism, June 28, 2017: Uden Bhutia discusses the KCC\u0026rsquo;s concept of ecotourism and its relevance to local development. Uden Bhutia on Porters, June 28, 2017: Uden Bhutia discusses porter training and its relevance to the overall goals of the KCC.  Getting the assignment and handing it in To start work on the assignment, follow the instructions in the README on Github. To hand in, submit a pull request as outlined on the same page.\nDue Date is Oct. 24\nACTION  STA 03: Wordpress Sites Wordpress is a sophisticated \u0026ldquo;Content Management System\u0026rdquo; that uses a database to store your content, and a set of short programs written in the PHP programming language to present that content in a consistent manner. In this assignment you will set up a very simple website to explore some of the possibilities for your course project. There are many parts to this PHP \u0026ldquo;engine\u0026rdquo;, but one of the most important, and easiest to manipulate, is called a theme. Wordpress themes are potentially very powerful, but they can also be quite simple. You have already explored some of the sophisticated themes available to you in the Wordpress theme repository. We will now go backwards \u0026ndash; far, far backwards \u0026ndash; and use a trivially simple theme, one so simple that you can easily edit it yourself. The Wordpress Learning Theme is already installed on all your sites. [Note 10/31: please wait a day or two before hacking directly on the theme as I hope to make some updates in the next couple of days]. In this assignment you will:\n activate the Wordpress learning theme via the Wordpress dashboard make changes directly to the theme via Atom deploy your changes to your Wordpress site [details coming soon!] Add sample content to your site, testing some of the structures that might be useful to the class project Update menus to reflect the added content  Requirements You should make at least the following changes:\n Add minimum 4 top-level menu items Add at least 5 sub-menu items Make at least 5 style changes to style.css modify at least 2 templates  Your website should also reflect some of the main themes that you think are likely to be important to the project website. consult the KCC-UofT Memorandum of Understanding for guidance.\nStretch goals\n learn about the Wordpress Template Hierarchy and create an additional category template learn about Worpdress Content types and create a new type. Think about what purpose such a type would serve  Theme Development For details see the Lab page (soon as I get it running!).\nIn this exercise we will start modify a very, very simple theme, changing the colour scheme and layout of your website\u0026rsquo;s presentation.\n","tags":null,"title":"Assignments","uri":"https://2017.hackinghistory.ca/assignment/assignments/"},{"categories":null,"content":" Wordpress is a sophisticated \u0026ldquo;Content Management System\u0026rdquo; that uses a database to store your content, and a set of short programs written in the PHP programming language to present that content in a consistent manner. THere are many parts to this PHP \u0026ldquo;engine\u0026rdquo;, including especially themes and plugins. In this exercise you will start to set up your own wordpress site, and begin to get familiar Wordpress themes are potentially very powerful, but they can also be quite simple. In this exercise we will start modify a very, very simple theme, changing the colour scheme and layout of your website\u0026rsquo;s presentation.\nGetting Started In your personal wordpress installation \u0026ndash; available at http://yourname.hackinghistory.ca \u0026ndash; you will have access to a completely breakable sandbox environment. Go wild!\nContent Management Systems  a CMS is a system that allows web pages, and structured sets of pages, to be constructed from existing documents and text/HTML entered by users who may have little knowledge of HTML or the other underlying technologies that display those pages. There are hundreds of CMS\u0026rsquo;s in existence today, some Free/Open Source, others distributed under non-free licenses.  What is Wordpress? Take a look at this chart:    WP assembles a page from many component parts. This is accomplished by a now-complex set of scripts that offers instructions on what data to pull from the database and how to represent it on the page. the underlying scripts are primarily written in the computer language PHP, one of most popular languages for web \u0026ldquo;server-side\u0026rdquo; programming. When a URL belonging to the site is requested, the Wordpress scripts activate, parse the URL, and translate it into a set of instructions which are used to generate the HTML for the specific page we want.  Posts and Pages Wordpress is highly extensible through the Plugin system. However, the default installation of Wordpress comes with two main types of content:\n Posts show the origins of Wordpress as a blogging engine \u0026ndash; they\u0026rsquo;re a kind of content that\u0026rsquo;s expected to be updated frequently, and to be of largely trnasitory interest; and Pages, which are relatively permanent pieces of content that help populate, for instance, your menu system.  You\u0026rsquo;ll often see other kinds of content \u0026ndash; events, for instance, or links , biblographies, Facebook-style status updates; these are additional functionality that may or may not be available to you.\nDatabases  We won\u0026rsquo;t go into this here, but the information you see in a post is distributed across many entries in a relational database. Knowing this can sometimes help you to track down errors that sneak into your website through admin carelessness.  Themes, Styles and Templates  The look and feel of your website is also controlled by PHP files, often with help from files written in other languages, especially CSS and Javascript. Sometimes the look of your website will be affected by Plugins, but most of what you see is related instead to your Theme. A Theme is a collection of files \u0026ndash; at minimum two, but often many more \u0026ndash; from which wordpress takes instructions when presenting the page. There are thousands of themes in the official directory and thousands more for sale or download outside it. The easiest way to install a new theme is to download it using the Wordpress Admin interface. Sometimes this won\u0026rsquo;t work \u0026ndash; if you\u0026rsquo;re writing your own theme, for instance! I\u0026rsquo;m hoping we will have a chance to write our own Child Themes later on, so if you want to do that, drop me a line and I\u0026rsquo;ll hook you up with FTP access to the server.  Themes are collections of files  they live in your wordpress install:    Themes are written primarily in PHP PHP is a programming language developed specifically for writing web pages. Most PHP files consist of HTML and PHP intermixed with each other. This can be a little confusing, but you will get used to it. We will puzzle through the PHP syntax together, but you might want to try the Codeacademy PHP track as an introduction to the language basics. Knowing just a little will make your work a lot easier next semester.\n\u0026lt;?php echo('Hello World'); ?\u0026gt;  Themes tell wordpress how to display your content   Understanding the Loop One of the first things you will encounter in a Wordpress theme is \u0026ldquo;the loop\u0026rdquo;, which usually looks like this:\n\u0026lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?\u0026gt; \u0026lt;!-- do stuff ... --\u0026gt; \u0026lt;?php endwhile; else : ?\u0026gt; \u0026lt;p\u0026gt;\u0026lt;?php _e( 'Sorry, no posts matched your criteria.' ); ?\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;?php endif; ?\u0026gt;  This is a little hard to read, because it uses PHP\u0026rsquo;s hideous alternate syntax for control structures. Let\u0026rsquo;s rewrite it in the ordinary syntax:\n\u0026lt;?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here: do stuff // } // end while } else { ?\u0026gt; \u0026lt;p\u0026gt; \u0026lt;?php _e( 'Sorry, no posts matched your criteria.' ); } // end if/else ?\u0026gt;  What the heck does this mean? Well, you\u0026rsquo;ll see there is a while loop wrapped in an if test. Then there are two functions \u0026ndash; can you see them? The wordpress docs explain it this way:\n In English (PHP types and people familiar with code speak can skip to below), the above would be read: If we are going to be displaying posts, then get them, one at a time. For each post in the list, display it according to . When you hit the last post, stop. The do stuff line(s), are template dependent.\nA little aside on Do stuff: in this example it is simply a placeholder for a bunch of code that determines how to format and display each post on a page.\n Digging a little deeper, we find:\n An explanation for the coders out there: The have_posts() and the_post() are convenience wrappers around the global $wp_query object, which is where all of the action is. The $wp_query is called in the blog header and fed query arguments coming in through GET and PATH_INFO. The $wp_query takes the arguments and builds and executes a DB query that results in an array of posts. This array is stored in the object and also returned back to the blog header where it is stuffed into the global $posts array (for backward compatibility with old post loops).\n So, basically:\n the_post() is a function that grabs one member of an array of posts \u0026ndash; itself a very complex object \u0026ndash; and dumps it into a new object called $post. Within the loop, you will then call on other function to access properties of the post. You can also access those properties directly, but it is often hard to do that. So, for instance, you might write:  \u0026lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?\u0026gt; \u0026lt;article id=\u0026quot;post-\u0026lt;?php the_ID(); ?\u0026gt;\u0026quot;\u0026gt; \u0026lt;header\u0026gt; \u0026lt;h2\u0026gt;\u0026lt;a href=\u0026quot;\u0026lt;?php the_permalink(); ?\u0026gt;\u0026quot;\u0026gt;\u0026lt;?php the_title(); ?\u0026gt;\u0026lt;/a\u0026gt;\u0026lt;/h2\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;div class=\u0026quot;entry-content\u0026quot;\u0026gt; \u0026lt;figure\u0026gt;\u0026lt;a href=\u0026quot;\u0026lt;?php the_permalink(); ?\u0026gt;\u0026quot;\u0026gt;\u0026lt;?php if ( has_post_thumbnail() ) {the_post_thumbnail('large'); } ?\u0026gt;\u0026lt;/a\u0026gt;\u0026lt;/figure\u0026gt; \u0026lt;?php the_excerpt(); ?\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/article\u0026gt; \u0026lt;?php endwhile; else : ?\u0026gt; \u0026lt;p\u0026gt;\u0026lt;?php _e( 'Sorry, no posts matched your criteria.' ); ?\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;?php endif; ?\u0026gt;  Let\u0026rsquo;s go over each of these functions in class.\nFiles in your theme  style.css: your stylesheet; you need this functions.php: you\u0026rsquo;re going to need this too index.php: this is the default template for your theme; you can\u0026rsquo;t live without it header.php: controls your header. footer.php: controls your footer area sidebar.php: generates your sidebar  Template hierarchy remember this:\n  Here is a more detailed view:\n  When accessing a piece of data from the database, Wordpress will check in sequence to see if appropriate templates are available and use the first matching template it finds.\nPlugins and themes  Themes control appearance plugins add functionality but sometimes the difference isn\u0026rsquo;t so clear We will try to keep things pretty well-separated, but sometimes it\u0026rsquo;s just much easier to do all your programming in a theme.  Editing Your Theme  I recommend editing directly from Atom. We\u0026rsquo;ll discuss in class how to do it. However, if that doesn\u0026rsquo;t work, you can try one of the options below:  install one of several Wordpress plugins that make theme editing a litlte easier:  https://en-ca.wordpress.org/plugins/wp-editor/WP-editor]] appears to be the best maintained wp-ide is one I\u0026rsquo;ve used in the past. If these feel a little awkward try better file editor instead \u0026ndash; it may be sufficient for our needs (I haven\u0026rsquo;t experimented with it yet).   try changing the \u0026lsquo;powered-by\u0026rsquo; text in the footer to our starter theme. Did you make it work? Did you (alternatively) break the Internet? Check out functions.php, and then sidebar.php. Can you understand what\u0026rsquo;s going on? It\u0026rsquo;s not easy to understand! try editing the css enough so that you can get something un-hideous.  Headers Right now there is no custom header support in our theme! To use a header image, add this code to functions.php:\n\u0026lt;?php add_theme_support('custom-header); ?\u0026gt;  And put this somewhere in header.php:\n\u0026lt;img src=\u0026quot;\u0026lt;?php echo( get_header_image() ); ?\u0026gt;\u0026quot; alt=\u0026quot;\u0026lt;?php echo( get_bloginfo( 'title' ) ); ?\u0026gt;\u0026quot; /\u0026gt;  Learn much, much more There is a huge amount of information online at the Wordpress Codex. That last link is a good starting point, and so is the Theme Development Page. There is lots and lots and lots to learn here\u0026hellip;\n","tags":null,"title":"Lab 06: Wordpress \u0026 Wordpress Themes","uri":"https://2017.hackinghistory.ca/lab/lab-wordpress-and-wordpress-themes/"},{"categories":null,"content":" Wordpress is a sophisticated \u0026ldquo;Content Management System\u0026rdquo; that uses a database to store your content, and a set of short programs written in the PHP programming language to present that content in a consistent manner. In this assignment you will set up a very simple website to explore some of the possibilities for your course project. There are many parts to this PHP \u0026ldquo;engine\u0026rdquo;, but one of the most important, and easiest to manipulate, is called a theme. Wordpress themes are potentially very powerful, but they can also be quite simple. You have already explored some of the sophisticated themes available to you in the Wordpress theme repository. We will now go backwards \u0026ndash; far, far backwards \u0026ndash; and use a trivially simple theme, one so simple that you can easily edit it yourself. The Wordpress Learning Theme is already installed on all your sites. [Note 10/31: please wait a day or two before hacking directly on the theme as I hope to make some updates in the next couple of days]. In this assignment you will:\n activate the Wordpress learning theme via the Wordpress dashboard make changes directly to the theme via Atom deploy your changes to your Wordpress site [details coming soon!] Add sample content to your site, testing some of the structures that might be useful to the class project Update menus to reflect the added content  Requirements You should make at least the following changes:\n Add minimum 4 top-level menu items Add at least 5 sub-menu items Make at least 5 style changes to style.css modify at least 2 templates  Your website should also reflect some of the main themes that you think are likely to be important to the project website. consult the KCC-UofT Memorandum of Understanding for guidance.\nStretch goals\n learn about the Wordpress Template Hierarchy and create an additional category template learn about Worpdress Content types and create a new type. Think about what purpose such a type would serve  Theme Development For details see the Lab page (soon as I get it running!).\nIn this exercise we will start modify a very, very simple theme, changing the colour scheme and layout of your website\u0026rsquo;s presentation.\n","tags":null,"title":"STA 03: Wordpress Sites","uri":"https://2017.hackinghistory.ca/assignment/sta-05-wordpress-themes/"},{"categories":null,"content":" The documents we inherit from the KCC include a number of oral history interviews conducted by a researcher over the summer. They describe the work and development of the KCC. In this assignment, you will choose one oral history file and write a short essay about it. The \u0026ldquo;technical\u0026rdquo; part: you will write this assignment in markdown, in a separate file which will be loaded into a one-page website and displayed as HTML. Your text should reference the oral history and, in particular, should point readers to specific passages in the interview by the use of time-code links (the assignment repository describes in detail how to do this).\nContent of your Assignment Your written assignment should be approximately 400 words in length, and should identify\n issues of interest to you, and to the team project, which arise in the interview reflections on the use of oral history sources, e.g.:  what additional information do you get from listening to the original oral history source? what is missing? what do you wish the interviewer had done differently? will you treat this source any differently from the way you would treat a written source?   In both cases, please make references to specific passages in the interview. Since this is a web-based project, you may want to include a few pictures as well, and perhaps make changes to the CSS and HTML of the appropriate files. Depending on the pace of our data-processing project, we may be able to provide you with PDFs of supporting texts as well.\nI\u0026rsquo;ll provide you with a choice of files shortly.\nChoosing an Interview We have a small selection of oral history interviews for you to choose from. All of these were conducted by a student research assistant in Yuksom in July and August of 2017, with founding members of the KCC. You may find that you have to sneak ahead to the next couple of weeks of reading in order to make sense of the context for the interviews. It\u0026rsquo;s all information you\u0026rsquo;ll need to know eventually; and if you have questions that are difficult to resolve, Slack is a good place to ask them.\n Chewang Bhutia, Aug 9, 2017: Chewang Bhutia is a guide and one of the earliest founders of the KCC. The discusses the early days. Pema Bhutia, June 29, 2017: Brief, but rich discussion on the origination of the KCC by its President, Pema Bhutia, one of the founding members. Pema describes the situations in West Sikkim which inspired the establishment of the organization: un-regulated tourism practices (non-eco) \u0026ndash; the extraction and depletion of Rhododendron wood for fires and medicinal plants in the KNP, garbage accumulations, poaching of wild animals, etc. Pema also discusses the Sikkim Biodiversity and Ecotoursim Project and the first KCC projects: taking volunteers to clean the trail; tour guide, pack-animal operator and lodge operator training projects and manuals; the formation of ESPAY; early finances; festivals; cultural programs; the PRA; KCC moving forward. Pema Bhutia \u0026amp; Tsering Uden Bhutia (undated, summer 2017): A discussion with Pema Bhutia and another founder, the current director Tsering Uden Bhutia, about the establishment of a UNESCO World Heritage Site at the Khangchendzonga National Park. Particular emphasis of the designation of the area as a natural and cultural site (these mixed designations are very new). Uden Bhutia on ecotourism, June 28, 2017: Uden Bhutia discusses the KCC\u0026rsquo;s concept of ecotourism and its relevance to local development. Uden Bhutia on Porters, June 28, 2017: Uden Bhutia discusses porter training and its relevance to the overall goals of the KCC.  Getting the assignment and handing it in To start work on the assignment, follow the instructions in the README on Github. To hand in, submit a pull request as outlined on the same page.\nDue Date is Oct. 24\n","tags":null,"title":"STA 02: Oral History","uri":"https://2017.hackinghistory.ca/assignment/sta-02-oral-history/"},{"categories":null,"content":" Welcome to Hacking History.\nIn today\u0026rsquo;s lab we learn (or recall) a little bit about some of the tools we\u0026rsquo;ll be using during the class. They are:\n Zotero Slack Markdown Github  Next week we will start learning about HTML, but for today it\u0026rsquo;s all just fun.\nSlack and Zotero We use Slack for communicating, and Zotero for managing our bibliography. Both are described on the Tools page; I justwant you to be sure to have signed up for and tried out both of them.\nMountains-Please This is a fun excercise to introduce everyone to the practice of hacking. It will also get you used to using Github, one of the fundamental tools of open-source software development.\nMy friend Kate Hudson created a simple github training exercise two years ago for some of my other students. It was really fun, so I modified it for us (twice):\n Sign Up for a Github Account (or sign in if you already have an account) Navigate to my mountains-please repository Take a quick look at the README. Can you understand it? Maybe we need to add some extra instructions (like, what does npm install -g mean? And where do those emoji come from?) What does the program do, and (if you can get this far) how does it work? Have you found where the Mountains live? Add a new mountain from inside Github itself(!) simply by navigating to the right spot and clicking the + button. (see the picture below)\n Be sure to name the file \u0026ldquo;some-mountain-name.md\u0026rdquo; so that everyone knows it\u0026rsquo;s written in Markdown follow markdown syntax in writing your recipe (see this cheatsheet, especially the sections on Headings, Lists, and Links) When you save the file, Github will automatically create a forked repository under your account! Magic.      File a pull request with me by navigating back to the main page of your repository (~github.com/your-user-name/mountains-please/) and hitting the Github pull request button:     HTML Preview If we have time at the end, let\u0026rsquo;s take a look at this exercise which is planned for next week.\nAlso, this is an opportunity to download and install the Atom text editor which we will be using in coming weeks.\n","tags":null,"title":"Lab 01: Getting Started","uri":"https://2017.hackinghistory.ca/lab/lab-getting-started/"},{"categories":null,"content":" As we go through the year, you\u0026rsquo;ll need to learn about some or all of these tools. Explore them when you have a chance\nA laptop This course is MUCH easier if you have a laptop. If you don\u0026rsquo;t own one, you can still do well, but the work becomes much more strained. A tablet is much harder to work with, and many of the tools described below do not work properly on mobile devices. Please see me if you don\u0026rsquo;t have one.\nFirefox and Chrome Dev Tools Chrome is by far the most popular browser in the world, while Firefox is by far the most open. Both have highly developed developer tools with which you should familiarize yourself. As you learn more about web design, you\u0026rsquo;ll come to rely on these tools more and more. Follow these links for more about Firefox Dev Tools and Chrome\u0026rsquo;s version.\nAtom Text Editor You will be editing code in this class, and for that you need a text editor. If you already have one you love, stick with it; but if you\u0026rsquo;re new to code editing, you should use the class standard, Atom. Download Atom and, once you\u0026rsquo;ve read Chapter One of the Manual, go ahead and install the \u0026ldquo;atom-html-preview\u0026rdquo;, \u0026ldquo;open-in-browser\u0026rdquo; and \u0026ldquo;emmet\u0026rdquo; packages by navigating to Edit \u0026rarr; Preferences \u0026rarr; + Install. There are hundreds of other packages to install if you like.\nLater, you will also want the \u0026ldquo;linter\u0026rdquo; and \u0026ldquo;linter-jshint\u0026rdquo; packages; you might as well install them now. You will also need \u0026ldquo;remote-edit\u0026rdquo; for your class project, in the second semester.\nGithub Almost all of my course materials are shared on Github, and we\u0026rsquo;ll be learning how to use the underlying git system over the course of the semester. If you want to make things easier on yourself, you can try using the Github desktop Client.\nSlack Rather than the enormously frustrating Blackboard discussion forums, we use the Slack platform for two-way communication. You can sign up for the Hacking History Slack team here \u0026ndash; you will need to use your utoronto.ca address to register. Signup is open for the first two weeks of the semester, after which I\u0026rsquo;ll close it down, so please register as soon as possible.\nAs the course is organized around a collaborative project, these conversations end up being fairly important, so it\u0026rsquo;s worth installing the Slack Desktop client and perhaps the iPhone or Android apps (I personally have removed Slack from my phone for now, despite finding it incredibly useful for about a year).\nAs you get more proficient at using Slack, you\u0026rsquo;ll appreciate the medium more and more. consider starting out by reading the official \u0026ldquo;What is Slack?\u0026rdquo; guide. Once you get the basic idea \u0026ndash; what a channel is, how to tag people with @ or refer to channels with #, etc. \u0026ndash; keep these basic tips in mind:\n Remember that it\u0026rsquo;s easy to create and destroy channels, so feel free to create your own when you have a conversation that doesn\u0026rsquo;t necessarily concern the whole group, and will likely persist for a while. Get used to the Slack syntax, which is similar to that used in other chat protocols, but includes extra features like code blocks. For longer code examples, it\u0026rsquo;s usually better to create a snippet instead. Work effectively \u0026ndash; don\u0026rsquo;t flip back and forth to slack as a way to procrastinate. Be sparing in your use of @here and @channel \u0026ndash; those are the equivalent of yelling in a public square. Sometimes you need to do it, but you shouldn\u0026rsquo;t be yelling all the time. Use direct messages when you have to, but for the most part we\u0026rsquo;ll want to cultivate a habit of working in the open. Remember that this team is an extension of the classroom. Treat each other (and me!) with respect and ocmpassion. The Civic Tech Code of conduct is a helpful reminder of how to act in this kind of environment.  FTP and/or SSH clients You\u0026rsquo;ll need a way to move files between your laptop and the server. Atom will do much of this, but an SFTP client may be of use on certain rare occasions. I personally use the command line, sort of like this.\nZotero In the course of your research projects you will accumulate lots of sources, just as you would in a normal research project. These days, we find most of our sources on the web, but older techniques for managing sources \u0026ndash; notecards \u0026amp; so forth \u0026ndash; don\u0026rsquo;t integrate easily with this workflow. Zotero is a great bibliographic tool that will help you manage all of your references from your web browser, and will also let you easily drop them into your documents in Microsoft Word or LibreOffice. If you want to update a reference, or completely change the style of your citations (from MLA to Chicago Manual of Style, vice-versa, or into any of several hundred freely-available journal styles), you can do that, too, at the click of a button. You can also share references with each other or with others using Zotero groups. To get started:\n Download Zotero. Be sure to download both the Zotero program and the connector for MS Word or Libreoffice/OpenOffice, depending on which you need. If you generally use another program, like Scrivener, you will need the RTF scanner. Make sure you also get the browser connectors for Chrome and Safari, if you use those browsers. Read the documentation and/or watch the screencasts flow like a ninja around all your citation needs. Join the class bibliography group and please add your sources there.  Dropbox or alternative. You will often need to share files with each other. For this a service like Dropbox is essential. Get it, use it, love it. If you\u0026rsquo;re uncomfortable with Dropbox\u0026rsquo;s (awful) security paradigm, consider using spideroak groups, or one of the many other competitors.\nCoding resources Most of the technical skills you\u0026rsquo;ll learn in this class you can teach yourself (that\u0026rsquo;s mostly how I did it). Here are just a few links to get you started; there are many, many other options:\n HTML:\n MozDev Links Page w3schools HTML tutorials  Javascript\n W3 Schools Javascript tutorial MozDev resources   ","tags":null,"title":"Tools for Hacking History","uri":"https://2017.hackinghistory.ca/other/tools/"},{"categories":null,"content":" Intro to Hacking History .underline { text-decoration: underline; }    Intro to Hacking HistoryMatt Price2017-09-13Created: 2017-09-14 Thu 21:14\n  On Hacking  hackers build things, crackers break them     Class Goals  Community Engagement Technical Engagement (not proficiency) Public-facing Work     Why Bother with Digital Humanities  A Changing Media Landscape Changing Professional Boundaries Don\u0026rsquo;t be satisfied with the \u0026ldquo;limits\u0026rdquo; of your major!     Class format  Discussion: 1.5-2 hrs \u0026ldquo;Lab\u0026rdquo; for about an hour     A Word about Participation  small seminar (!) reading for class: skim/full/post active listening identifying difficulties     Syllabus  India! wow.     Preparing for class  Readings! Discussion Questions \u0026amp; a passage! Laptops!!     Assignments  First Semester: STA\u0026rsquo;s; Proposal; Second Semester: Class Project  Paper Reports Weekly Devlog Final Product      KCC and Sikkim!  Sikkim                                Pawan kuman Chamling, Chief Minister of Sikkim since 1994 (!). One-paty state, w/ Sikkim Democratic Front holding as many as 32/32 seats (currently 22    Dzonga        \u0026ldquo;Chaam\u0026rdquo; warrior dance commemorating conversion of Dzonga to Buddhism by Padmasambhava (Guru Rinpoche), who did a lot of travelling tourism industry, Buddhism as a commodity. monasteries.        kabi longstok, site of the blood brotherhood between Lepcha and Bhutia. note the Bon scar wrapping. Buddhism not universal    Khangchendzonga National Park  Sorry, your browser does not support SVG.                       KCC    Conservation Education Training (porters, cooks, guides) Advocacy w/ Government Agencies 9e.g. Forestry dept) community planning monitoring                          Fun!  Let\u0026rsquo;s break, and then go check out the lab!      about to build scripts   // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: true, progress: true, history: true, center: false, slideNumber: 'c', rollingLinks: false, keyboard: true, overview: true, margin: 0.10, maxScale: 1.00, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none transitionSpeed: 'default', multiplex: { secret: '', // null if client id: '', // id, obtained from socket.io server url: '' // Location of socket.io server }, // Optional libraries used to extend on reveal.js dependencies: [ {src: '/vendor/revealjs/plugin/klipse_reveal.js'}, { src: '/vendor/revealjs/lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: '/vendor/revealjs/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '/vendor/revealjs/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '/vendor/revealjs/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '/vendor/revealjs/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: '/vendor/revealjs/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }] });  done with scripts  ","tags":null,"title":"","uri":"https://2017.hackinghistory.ca/slides/01-intro/"},{"categories":null,"content":" 02 Hypertext in Context .underline { text-decoration: underline; }   if( window.location.search.match( /print-pdf/gi ) ) { var link = document.createElement( 'link' ); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '/vendor/revealjs//css/print/pdf.css'; document.getElementsByTagName( 'head' )[0].appendChild( link ); }    02 Hypertext in ContextMatt PriceCreated: 2017-09-19 Tue 10:03\n  Computers Then and Now  Calculation - What is it?  spiritual quality or mechanical drudgery?   Eighteenth-century philosophers conceived of intelligence and even moral sentiment to be in their essence forms of calculation. Allied with the higher mental faculties of speculative reason and moral judgment, calculation was remote from the realm of menial labor, of the automatic and the habitual\u0026#x2026;  Calculation might be described as a ‘spritual exercise’, repeated routines of the mind designed to strengthen and shape the soul as athletic exercises strengthened and shaped the body. What calculation taught its practitioners was what Condorcet called the ‘exactitude of the mind’.   The division of Mental Labour  Smith\u0026rsquo;s pin-makers Prony\u0026rsquo;s Log-calculators Babbage\u0026rsquo;s Engine   Adam Smith and the Division of Labour    Gaspard de Prony and the \u0026ldquo;Monument to Calculation\u0026rdquo;    Calculating machines  [[ Bush\u0026rsquo;s Differential Analyzer    WW II  scientific mobilization RADAR Atomic Bomb The problem of fusion; ENIAC   Emulating the Mind  logic, calculation, memory, and thought     Networks   ARPANet    comes into being in late 60\u0026rsquo;s pretty much everyone agrees that ARPANet is the origins of the Internet, b/c it\u0026rsquo;s the first non-local network of computers and it also involves packet-switching, which likely became popular b/c of its applicability to military applications    Packet Switching    Protocol Stack   Network Topologies  History of Networked computers The Internet; DARPA; Packet switching protocol stacks URI\u0026rsquo;s Envelope game (for packet switching). Need paper for that. what did you learn?   From Internet to Web    Tim Berners-Lee\u0026rsquo;s original proposal       What\u0026rsquo;s \u0026ldquo;hyper\u0026rdquo; about Hypertext?   Linear  Francis Bacon, Viscount St. Alban, Kt PC QC (ˈbeɪkən; 22 January 1561 – 9 April 1626), was an English philosopher, statesman, scientist, jurist, orator, essayist and author. He served both as Attorney General and Lord Chancellor of England. After his death, he remained extremely influential through his works, especially as philosophical advocate and practitioner of the scientific method during the scientific revolution.  Bacon has been called the father of empiricism.[4] His works established and popularised inductive methodologies for scientific inquiry, often called the Baconian method, or simply the scientific method. His demand for a planned procedure of investigating all things natural marked a new turn in the rhetorical and theoretical framework for science, much of which still surrounds conceptions of proper methodology today.   Linked   Post-textual         // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: true, progress: true, history: true, center: false, slideNumber: 'c', rollingLinks: false, keyboard: true, overview: true, margin: 0.10, maxScale: 1.00, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none transitionSpeed: 'default', multiplex: { secret: '', // null if client id: '', // id, obtained from socket.io server url: '' // Location of socket.io server }, // Optional libraries used to extend on reveal.js dependencies: [ {src: '/vendor/revealjs//plugin/klipse_reveal.js'}, { src: '/vendor/revealjs//lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: '/vendor/revealjs//plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '/vendor/revealjs//plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '/vendor/revealjs//plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '/vendor/revealjs//plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: '/vendor/revealjs//plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }] });    ","tags":null,"title":"","uri":"https://2017.hackinghistory.ca/slides/02-hypertext-in-context/"},{"categories":null,"content":"","tags":null,"title":"Articles","uri":"https://2017.hackinghistory.ca/article/"},{"categories":null,"content":"","tags":null,"title":"Assignments","uri":"https://2017.hackinghistory.ca/assignment/"},{"categories":null,"content":"","tags":null,"title":"Categories","uri":"https://2017.hackinghistory.ca/categories/"},{"categories":null,"content":" The class project, which will occupy most of the class\u0026rsquo;s second semester and some of the first, is always a substantial collaboration between some or all of the students in the course, and a community organization. In most years, we work with one or more local history groups. This year we will be working exclusively with the Khangchendzonga Conservation Committee (KCC), a local NGO in the Indian Himalayan State of Sikkim. This is a very exciting change for Hacking History, and also represents the first phase of a broad collaborative project involving a number of other scholars. The project is an opportunity to offer a substantial service to an incredible organization, while rapidly learning about an enormously interesting and diverse region, rich in cultural and ecological heritage.\nUnusually for this class, some of the parameters for this class have already been laid out in a Memorandum of Understanding between the KCC and the leaders of the broader project. Here are some highlights of that document, plus some further constraints:\n The website we\u0026rsquo;re building will serve two functions:\n a general purpose website to serve as the KCC\u0026rsquo;s public presence (their current website dates from 2004 and has very little information) a historical section which will provide context for the KCC\u0026rsquo;s current work and an archive of some of their most important documents, e.g. the training manuals from their education programs  Website content will be based in part on student term papers, and will draw upon an already-existing archive of digitized material from the KCC. The website will run the Wordpress software, a user-friendly, open-source content management system. Students will design the website by modifying an existing Wordpress theme, probably one based on the Bootstrap web framework. Students will write most of the content, but images will be drawn from a large archive belonging to the broader project and the KCC KCC is a small, under-resourced NGO located in a remote village in a developing country. As a result, particular attention needs to be paid to code quality \u0026amp; accessibility. We will also need to build an excellent online help system as part of our project. Sikkim is a multilingual state. For the first time, Hacking History students will need to pay attention to internationalization and multilingual content. After the academic year has finished, there may be an opportunity to travel to Sikkim and present the website to the KCC. More information on this possibility will follow late in the Fall semester.  A primary goal of this class is to create something of lasting value to yourself, the KCC, and the community it serves, so that your work endures beyond the temporal scope of the class. The project is worth 45% of your final mark, but this percentage is distributed between various parts of the project. A high premium will be placed on timely, regular progress made towards intermediate goals, to help make sure that these complex and difficult projects come to fruition. The class is a large working group; as a result, you will specialize quite a bit and it may be difficult to co-ordinate work effectively. We\u0026rsquo;ll discuss tools and strategies for project management along the way.\nCollaboration and Service We should perhaps distinguish between two kinds of working together for this project. On the one hand, you will be working closely with your peers. As a result, you have an additional responsibility to your working group \u0026ndash; your lapses affect them too. You\u0026rsquo;ll also need to be sure to communicate clearly and effectively with each other, both electronically and in person. Be sure that you know what each of you bring to \u0026amp; get out of the project; and how will you hand the project over.\nYou will also be working together with an organization that will be depending on you. In this respect, you act as emissaries of the University and of the course. You are expected to be respectful, courteous, and responsive.\nGeneral Project Parameters The finished product should be a polished website which is directly of use to the partnering organization; it should also be an intellectually honest endeavour which takes seriously the historian\u0026rsquo;s responsibility to tell truths about the past. Your work will, then, be held to a relatively high standard \u0026ndash; I\u0026rsquo;m asking a lot of you. Do not put anything off till the last minute. In a complex project like this you will be surprised at the number of tasks there are to accomplish. In particular, you\u0026rsquo;ll gain a lot by attacking your organizational tasks as early as possible.\nExamples Previous years\u0026rsquo; projects are mostly linked to from that year\u0026rsquo;s course website. You may be particularly interested in the project from 2015. They are all great, so look there for some inspiration. Please note that these sites were made by students with no prior technical experience; if you\u0026rsquo;re in that category they may look daunting right now, but don\u0026rsquo;t be discouraged, you\u0026rsquo;ll learn what you need to in time to make something really cool. (But: this year\u0026rsquo;s project is for sure the most ambitious we\u0026rsquo;ve ever attempted. Yay!)\nTechnical Parameters If you have no technical background, this may not make much sense to you in the first class, but as the semester progresses you\u0026rsquo;ll understand more. Here are some of the technical skills you will be using in your project:\n Web hosting: I will provide hosting for class websites at hackinghistory.ca. Theme Development: each of these websites will come equipped with a starter theme with which I have some familiarity. Over the course of the project, you will adapt that theme to serve your purposes. This means you will work directly with:\n Style: changing CSS files to give the site a new look-and-feel Structure: modifying HTML templates to change the arrangement of elements on various web pages Functionality: installing Wordpress plugins, and tinkering with PHP and Javascript code, to get the functionality you and your partner need  Text editing: in order to do all of the above, you should become at least a little familiar with a text editor. Ad described in \u0026ldquo;Tools\u0026rdquo;, the Atom editor is the best choice. Later in the term we will also go over various ways to edit code directly from the Wordpress administrative interface.  Human Subjects Ethics Review Our project will make use of interviews conducted under a protocol approved by the Unviersity\u0026rsquo;s Ethics Review Board. You are advised to familiarize yourselves with the University\u0026rsquo;s Ethics Review process, and we will discuss general guidelines for oral history research in the early part of the Fall semester.\nGrading The final project will be evaluated based on its success in meeting the goals outlined in the proposal, on the integrity of historical analysis, on the aesthetics of the presentation, and on the satisfaction of the community partners with your work.\n   Component Due Date Group/Indiv % of Course Grade     Proposal \u0026amp; Presentation 12/05 Group 10   Interim Report 02/07 Group 10   Final Product 04/04 Group 20   Partner Response \u0026mdash; Group 5    Components Proposal The proposal is a substantial group effort which involves the submission of a formal document to me and to your partner, as well as a presentation component. Read more about it on its own page.\nInterim Report The Interim Report is a report back to me and to your partner on the progress you\u0026rsquo;re making. It will be about 8-10 pages long, and indicate :\n how much of the website content you\u0026rsquo;ve completed, and whether there are any serious problems that might require you to change your focus. how much of the website design is complete, and where you expect further challenges in what ways you find yourself departing from the plan agreed upon, and why.  Final Product The Final Product is a fantastically intricate and rich historical website, with lots of exciting bits of information presented in a vigourous, interesting, and visually appealing manner.\nPartner Response I\u0026rsquo;ll ask the KCC for feedback on your work, and take that into account in my final grade.\n","tags":null,"title":"Class Project Overview","uri":"https://2017.hackinghistory.ca/assignment/class-project-overview/"},{"categories":null,"content":" Due 01/16\nBasics Write an 8-10 page paper on a research topic related to the KCC. This is an ordinary research paper of the kind you have done many times before; an excellent basic guide to writing history papers is available on the writing centre website.\nChoosing a Topic Hopefully many aspects of the project interest you (this document will be updated with a list of suggestions several weeks into the semester). Choose a topic which is broad enough to sustain a mid-length argument of the sort normally found in this type of short research paper. This is a small class, and you see me every week; you should check in with me before the end of the semester to ensure that your topic is a good one.\nThe research paper stands on its own, but in most cases pieces of the paper can be recycled into the website proper. For this reason, it\u0026rsquo;s best if group members can choose a variety of topics not too closely bunched to one another. Consult with your classmates about their plans, and if possible avoid excessive overlap in your paper topics.\nMarking As has doubtless generally been your experience, marking proceeds on an evaluation of:\n Originality and thoughtfulness of your thesis: Are you making an interesting argument? Is it yours or does it belong to one of your sources? Quality of your evidence: do you present convincing evidence for each of your claims, supported by compelling arguments? Structure: is your paper easy to follow, and does each part flow naturally from what comes before? Style: is your paper a pleasure to read? Attention to Detail: are your citations properly formatted (please use Zotero and add your citations to the class Zotero bibliography), have you avoided typos, etc.?  (listed in approximately descending order)\nNumber of Sources Please don\u0026rsquo;t ask me how many sources you need. As many as are required! The most interesting part of writing a research paper is doing primary source research, and we are privileged to have a substantial archive of primary sources direct from the KCC. Please make the most of them.\n","tags":null,"title":"Essay Assignment","uri":"https://2017.hackinghistory.ca/assignment/essay-assignment/"},{"categories":null,"content":" One of the goals of this week is to help you think of the Web as a protocol-driven infrastructure. The language in which that infrastructure operates is called HTML. Like a traveller in a foreign country, you may not need to be fluent in this language, but if you know just a little bit then you\u0026rsquo;ll be much more comfortable. In this exercise we will introduce an online tool called JSBin, now one of many such tools available online, and somewhat similar to the Codeacademy website you will be using for your assignments.\nI strongly advise you to also take this opportunity to download the Atom text editor, as well. Further instructions are on the Tools page.\nTags An HTML Document is composed of elements marked off by tags. The elements look like this:\n\u0026lt;p\u0026gt;This is a paragraph\u0026lt;/p\u0026gt;  Note the opening and closing tags, which surround the text you want to have marked up.\nImportant tags Here are a few examples of important tags, though there are many, many more in current versions of HTML.\nDocument Structure Certain tags exist solely to lend structure to a document.\n\u0026lt;html\u0026gt; \u0026lt;head\u0026gt;\u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;header\u0026gt;\u0026lt;/header\u0026gt; \u0026lt;article\u0026gt; \u0026lt;div\u0026gt; \u0026lt;span\u0026gt;\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/article\u0026gt; \u0026lt;footer\u0026gt;\u0026lt;/footer\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt;  Text Properties Others give instructions for emphasizing text\n1 \u0026lt;b\u0026gt;bold\u0026lt;/b\u0026gt; \u0026lt;strong\u0026gt;strong\u0026lt;/strong\u0026gt; 2 \u0026lt;i\u0026gt;italic\u0026lt;/i\u0026gt; \u0026lt;em\u0026gt;emphasis\u0026lt;/em\u0026gt;  Text Functions Still others define pieces of structure in a functional way that generally also affects the way text will look on your screen.\n1 \u0026lt;h1\u0026gt;This is a top-level Heading\u0026lt;/h1\u0026gt; 2 \u0026lt;h2\u0026gt;While this is a lower-level heading\u0026lt;/h2\u0026gt; 3 \u0026lt;p\u0026gt;..and this is a mere paragraph\u0026lt;/p\u0026gt; 4 \u0026lt;ul\u0026gt; 5 \u0026lt;li\u0026gt;This is a list item\u0026lt;/li\u0026gt; 6 \u0026lt;li\u0026gt;And this is a second item\u0026lt;/li\u0026gt; 7 \u0026lt;/ul\u0026gt; 8 9 \u0026lt;ol\u0026gt; 10 \u0026lt;li\u0026gt;this is a different kind of list\u0026lt;/li\u0026gt; 11 \u0026lt;li\u0026gt;you'll see the differences soon\u0026lt;/li\u0026gt; 12 \u0026lt;/ol\u0026gt;  Linking The fundamental, breathtaking feature of the web is its capacity to create links between documents, images, media sources, etc., with absolute disregard for where those resources are physiclaly stored. The syntax for making a link is as follows\n1 \u0026lt;a href=\u0026quot;\u0026quot; target=\u0026quot;\u0026quot;\u0026gt;Text \u0026lt;/a\u0026gt; 2 \u0026lt;img src=\u0026quot;\u0026quot; alt=\u0026quot;\u0026quot; title=\u0026quot;\u0026quot;/\u0026gt; 3 \u0026lt;video\u0026gt; 4 \u0026lt;source src=\u0026quot;\u0026quot; type=\u0026quot;\u0026quot;\u0026gt; 5 \u0026lt;/video\u0026gt; 6 \u0026lt;script src=\u0026quot;\u0026quot; lang=\u0026quot;\u0026quot;/\u0026gt;  Figure out what these mean by browsing on w3schools. Work especially hard at the  tag. Hint: the standard syntax is Text and there are plenty of instances in the code below.\nExercise 0 Navigate to this page. This is the JSBin editor, an online tool for inspecting code.\nExercise 1 First, let\u0026rsquo;s quickly compare the text of an old post of mine:\n The WWW as Public Sphere\nPosted on September 21, 2010 by admin\nJust a few quick words about the readings this week, which concern the idea of the “Public Sphere“. This phrase is rooted in ideas about enlightenment that stretch at least back to Immanuel Kant. The analyses of Jürgen Habermas (SEP entry), in particular, developed the idea of a sort of virtual space of critical discussion\u0026hellip;\nSome of the features of this \u0026ldquo;authentic public sphere\u0026rdquo; would be\n a space free from political repression a space accessible to all members of society a form of discourse in which ideas are evaluated on their own merits exclusively, and not arbitrated based on some set of characteristics of the speaker   with the HTML code that generates what you would see on your screen if you went to the website from that year:\n1 \u0026lt;div id=\u0026quot;post-77\u0026quot; class=\u0026quot;post-77 post type-post hentry category-notes-for-class tag-publicsphere\u0026quot;\u0026gt; 2 \u0026lt;h1 class=\u0026quot;entry-title\u0026quot;\u0026gt;The WWW as Public Sphere\u0026lt;/h1\u0026gt; 3 4 \u0026lt;div class=\u0026quot;entry-meta\u0026quot;\u0026gt; 5 \u0026lt;span class=\u0026quot;meta-prep meta-prep-author\u0026quot;\u0026gt;Posted on\u0026lt;/span\u0026gt; 6 \u0026lt;a href=\u0026quot;http://www.hackinghistory.ca/2010/09/21/the-www-as-public-sphere/\u0026quot; title=\u0026quot;11:03 am\u0026quot; rel=\u0026quot;bookmark\u0026quot;\u0026gt;\u0026lt;span class=\u0026quot;entry-date\u0026quot;\u0026gt;September 21, 2010\u0026lt;/span\u0026gt;\u0026lt;/a\u0026gt; \u0026lt;span class=\u0026quot;meta-sep\u0026quot;\u0026gt;by\u0026lt;/span\u0026gt; 7 \u0026lt;span class=\u0026quot;author vcard\u0026quot;\u0026gt;\u0026lt;a class=\u0026quot;url fn n\u0026quot; href=\u0026quot;http://www.hackinghistory.ca/author/admin/\u0026quot; title=\u0026quot;View all posts by admin\u0026quot;\u0026gt;admin\u0026lt;/a\u0026gt;\u0026lt;/span\u0026gt;\t\u0026lt;/div\u0026gt;\u0026lt;!-- .entry-meta --\u0026gt; 8 9 \u0026lt;div class=\u0026quot;entry-content\u0026quot;\u0026gt; 10 \u0026lt;span class=\u0026quot;Z3988\u0026quot; title=\u0026quot;ctx_ver=Z39.88-2004\u0026amp;amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc\u0026amp;amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator\u0026amp;amp;rft.title=The WWW as Public Sphere\u0026amp;amp;rft.aulast=Price\u0026amp;amp;rft.aufirst=Matt\u0026amp;amp;rft.subject=Pre-class notes\u0026amp;amp;rft.source=Hacking History (His455)\u0026amp;amp;rft.date=2010-09-21\u0026amp;amp;rft.type=\u0026amp;amp;rft.format=text\u0026amp;amp;rft.identifier=http://www.hackinghistory.ca/2010/09/21/the-www-as-public-sphere/\u0026amp;amp;rft.language=English\u0026quot;\u0026gt;\u0026lt;/span\u0026gt; 11 12 \u0026lt;div class=\u0026quot;sticky_post\u0026quot;\u0026gt;\u0026lt;p\u0026gt; Just a few quick words about the readings this week, which concern the idea of the \u0026amp;#8220; 13 \u0026lt;a href=\u0026quot;http://en.wikipedia.org/wiki/Public_sphere\u0026quot;\u0026gt;Public Sphere\u0026lt;/a\u0026gt;\u0026amp;#8220;. This phrase is rooted in ideas about \u0026lt;a href=\u0026quot;http://plato.stanford.edu/entries/enlightenment/\u0026quot;\u0026gt;enlightenment\u0026lt;/a\u0026gt; that stretch at least back to 14 \u0026lt;a href=\u0026quot;http://en.wikipedia.org/wiki/Immanuel_Kant\u0026quot;\u0026gt;Immanuel Kant\u0026lt;/a\u0026gt;. The analyses of 15 \u0026lt;a href=\u0026quot;http://en.wikipedia.org/wiki/J%C3%BCrgen_Habermas\u0026quot;\u0026gt;Jürgen Habermas\u0026lt;/a\u0026gt; 16 (\u0026lt;a href=\u0026quot;http://plato.stanford.edu/entries/habermas/\u0026quot;\u0026gt;SEP entry\u0026lt;/a\u0026gt;), in particular, developed the idea of a sort of virtual space of critical discussion \u0026lt;/p\u0026gt; 17 18 \u0026lt;/div\u0026gt; 19 \u0026lt;/div\u0026gt;\u0026lt;!-- .entry-content --\u0026gt;  They look pretty different, right? Now, paste the text-only version into the HTML tab in this JSBin page.\nFigure out how to accomplish the following tasks:\n Make the title \u0026ldquo;The WWW and the Public Sphere\u0026rdquo; into a heading. Add a link to \u0026ldquo;http://www.hackinghistory.ca/author/admin/\u0026rdquo; to the word \u0026ldquo;admin\u0026rdquo; in the second line. Italicize the date line. Organize the elements so that the appropriate content is nn the  tag, and the rest in the \u0026ldquo;article\u0026rdquo;.  These are all pretty easy, you can figure them out either by inspecting the marked-up version I reproduced here, or following the w3schools HTML tutorials.\nStyles Styles in HTML are pretty complex, see the HTML style tutorials on w3schools. Check out their very quick description of css.\nExercise 2 Go back to your TryIt experiment at w3schools. Can you make the text render in the same styles that are used by the website? There\u0026rsquo;s a clue in the  element of any page from the site. Hint: search for \u0026ldquo;css\u0026rdquo; in the sourcecode\u0026hellip;\nScripts Though HTML is the language of the web, modern HTML (HTML 4, HTML 5) have \u0026ldquo;translators\u0026rdquo; of a sort that allow other languages to run inside the web page. this is actually incredibly powerful, and allows amazing things that were unheard of in the early days of the web, like dynamically-generated lists, moving images, the embedding of video and so forth. You don\u0026rsquo;t have to know how to script (I can\u0026rsquo;t really use javascript, for instance) but you should understand that scripting is what makes a lot of today\u0026rsquo;s web work the way it does.\nExercise 3 Inspect the source code of three complex pages on the web and find every instance of a script tag. Note anything you think is interesting about it.\nHacking your way to HTML mastery! Tools!  View source. When you right click on a web page in any modern browser, you will see a \u0026lsquo;view source\u0026rsquo; option. developer tools. The Developer Tools for Chrome and Firefox are both amazing. They allow you to temporarily change the code (HTML, CSS, and Javascript) running on any website, and thus test out your ideas for changes. We will use this tool A LOT over the course of the year. jsbin. The awesome real-time html/javascript previewer.  Tutorials  Codeacademy may have the best intro to HTML sequence W3 Schools provides excellent tutorials. The Mozilla Developers\u0026rsquo; Network HTML Reference is where I go when I need a detailed explanation of something.  ","tags":null,"title":"Lab 02: Understanding HTML","uri":"https://2017.hackinghistory.ca/lab/lab-understanding-html/"},{"categories":null,"content":" Last week we experimented with HTMl and dipped our toes into CSS and styles. In your final projects, much of your coding time will be spent trying to get your site to look the way you want it to. If you have a firm understanding of CSS (and of where to look for more info when you\u0026rsquo;re having trouble!), this will be a lot easier.\nYou already know about the Codeacademy CSS offerings. Two other helpful tutorial sites are shayhowe and Learn Layout, to which I\u0026rsquo;ll be referring later; and there are many other resources available on the web.\nCSS Basics CSS is the Cascading Style Sheets Language; it is a powerful tool for controlling the appearance of web pages (and sometimes other documents, too). It works in the following way:\n a web page links to a stylesheet the stylesheet instructs the browser as to how to display various kinds of web pages the browser then renders the page according to those instructions.  Sometimes when you have a really slow Internet connection, you will see a very ugly, cluttured web page before a smooth, clean, modern-looking website loads. That\u0026rsquo;s because your browser has loaded the web page but is having trouble accessing the stylesheet. E.g., here is the New York Times with and without CSS:\n  So, while HTML is responsible for the structure and content of a website, CSS is responsible for its presentation.\nCSS Selectors When you look at a CSS file, you will see it is divided into a bunch of stanzas, like this. Each of these stanzas is called a \u0026ldquo;selector statement\u0026rdquo;:\nh1 { color:blue; font-family:serif; font-size:24px; } div { border: 1px solid black; } div.main p { color:red; } #specialid { float:left; }  They all follow the same pattern:\n first, a selector that identifies the elements to which these instructions will apply then an open brace \u0026ldquo;{\u0026rdquo; which marks the start of the actual instructions then a series of property-value pairs. Each of these sets the value of a particular property (duh). Note that at the end of a property, there is always a semi-colon! finally, a closing brace that ends the selector declaration.  Selector types Though simple in principle, CSS selectors can be confusing. Here are some basic selector types:\n Element selectors: these just give the element (like h1, p, div, span, etc.). they apply to all elements of this type. Class selectors: these give the name of a class attribute that an HTML element may have. This selector will always begin with a period (\u0026ldquo;.\u0026rdquo;). So for instance:  \u0026lt;p class=\u0026quot;coolpara\u0026quot;\u0026gt;Some Content\u0026lt;/p\u0026gt;  .coolpara { color:green; }   ID selector: this addresses the element with a particular ID:  \u0026lt;p id=\u0026quot;myfave\u0026quot;\u0026gt;Some Content\u0026lt;/p\u0026gt;  #myfave { color:yellow; }   Finally, we have many more complex selectors. This one here is a descendant selector:  div.main p { color:red; }  It addresses every p that is contained inside a div of class \u0026ldquo;main.\u0026rdquo;\nFonts, colors and borders A lot of what we do with CSS is to set fonts and colors. Here are some examples:\ndiv.main { color: rgb(150,150,150); background-color: (#b0c4ee); text-align: center; text-decoration:underline; font-family: \u0026quot;Times New Roman\u0026quot;, Times, Serif; font-style:italic; font-size:1.25em; border: 4px green solid; border-radius:20%; }  There are plenty of other properties that can be set, in much the same way.\nDisplay: Block vs. Inline Box Model One important notion to understand in CSS is the so-called \u0026ldquo;Box Model\u0026rdquo;, which accounts for the distribution of whitespace around elements. A lot of the grief you will encounter when designing websites will come back to the box model, so it\u0026rsquo;s important to learn it:\n  For each element, you have the actual content, which is surrounded by the padding, surrounded in turn by the border, and once again surrounded by the margin. So for instance, try this code in JSBin:\n.simple { width: 500px; margin: 20px auto; border 1px red solid; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border: 10px blue solid; }  \u0026lt;div class=\u0026quot;fancy\u0026quot;\u0026gt; will look a lot bigger than \u0026lt;div class=\u0026quot;simple\u0026quot;\u0026gt;, even though they are nominally the same size!\nThere are two ways to deal with this:\n subtract the size of the padding and border from your width values use the new \u0026ldquo;box-sizing:border-box\u0026rdquo; attribute. This will do all the math for you.  Positioning This is a difficult subject. When you are dealing with lots of different screen sizes and resolutions, and different devices with different fonts installed, etc., it is not trivial to position every element precisely where you want it. You will find a lot of your teeth-gnashing time is spent trying to get various columns of content to line up pretty, center themselves, etc.\nThe CSS \u0026ldquo;position\u0026rdquo; property has four possible values, whose names are impossible to remember and anyway don\u0026rsquo;t make sense. The four most important are:\n.static { position: static; } .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } .fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }   Static positioning is the default. A statically-positioned element is said to be \u0026ldquo;unpositioned\u0026rdquo;. Relatively positioned elements are displaced relative to the position they \u0026ldquo;ought\u0026rdquo; to be occupying (according to the defaults). But meanwhile, the space it \u0026ldquo;ought\u0026rdquo; to be occupying is still considered \u0026ldquo;taken\u0026rdquo; by the browser, which won\u0026rsquo;t put anything else in that space unless you force it to do so. fixed elements have their position fixed to a spot on the screen (which is called \u0026ldquo;the viewport\u0026rdquo; in CSS talk). This is great when you want a fixed header or footer. absolutely-positioned elements are like fixed elements, only they\u0026rsquo;re positioned relative to the closest positioned ancestor, usually an element with a position property value of \u0026ldquo;relative\u0026rdquo;.  Understanding this well involves fiddling a lot with code; rather than make a bunch of fiddly exercies myself, I\u0026rsquo;ll direct you the codeacademy positioning exercies, which have a great help system that makes things a little easier.\nPositioning 2: Float So, that\u0026rsquo;s one way to position elements. Another is to use the float property, which imagines the page flowing like water. The element will \u0026ldquo;float\u0026rdquo; left or right, and everything else will flow around it. To stop the flowing \u0026ndash; that is, to require the next element to appear below a floated element \u0026ndash; that next element will need to apply the clear property, which stops the float.\nLet\u0026rsquo;s play around with this briefly in JSBin.\nChanges Comin\u0026rsquo; Round Real Soon All of what you just learned is in the process of changing dramatically. Two new new CSS modules, flexbox and makes a lot of this stuff much easier, but takes some practice to understand.\nIt turns out that the theme framework we use may be converting to flexbox very soon. So, here is a very quick introduction to flexbox. You may want to look at this cheatsheet, this slightly more verbose one, or this very detailed specification. Meanwhile, there are lots of other new CSS features coming along, which will be supported by more and more browsers as we move forwards. We will keep an eye out for those as we continue; meanwhile, if you want to, you can check out transitions and learn a little bit about animations.\n","tags":null,"title":"Lab 03: CSS and Web Styles","uri":"https://2017.hackinghistory.ca/lab/lab-css-and-web-styles/"},{"categories":null,"content":" Another week, another language! This is in some ways a ridiculous way to learn about programming, and you may not remember all you learn. The most important thing is to get some sense of the types of operations that take place when programming languages interact with web pages, so you can change the code you are given to get it to do exactly what you want. But in order to do this it wil lbe very helpful to know just a little bit about programming in general.\nWhat is Javascript and why do we learn it? You\u0026rsquo;ll remember that I made a a very general division early in the semester:\n   Structure Style Dynamic Content \u0026amp; Effects     HTML CSS Javascript    In contemporary web pages, a lot of the work that runs the page is done by javascript. This is easy to see, e.g., in the \u0026ldquo;Network\u0026rdquo; or \u0026ldquo;profiler\u0026rdquo; tabs of the developer tools in Chrome or Firefox. In general, if you want to make changes to a web page after it\u0026rsquo;s written, javascript is the easiest way to do it (except for CSS animations, I guess).\nJavascript also has uses outside the browser \u0026ndash; the Atom editor is written in Javascript, for instance.\nRunning Javascript Because we use javascript mostly to manipulate web pages, it can be a little hard to run javascript programs. Here are a couple of ways to try javascript form inside your browser:\nRun in Atom Editor This might be the easiest (though eventually you will need to run in a browser, e.g., if you want to practice manipulating DOM elements). Install the script-runner package, or one off the alternatives like run in atom or script, and follow directions to run code directly in the editor.\nConsole Both Chrome and Firefox have built-in \u0026ldquo;Javascript Consoles\u0026rdquo; accessible from the developer tools: Tools \\rarr Web Developer \\rarr Console or Menu \\rarr More Tools \\rarr Developer \\rarr Console\nScratchpad The FF console is a little awkward to use for multi-line programming, so they have also provided a \u0026ldquo;Scratchpad\u0026rdquo; tool (Shift-F4), which I find helpful.\nAccessing the console When you run code in the browser, the easiest way to print something is with the console.log function. This prints text to the console so you will have to open the console to see if your code is working.\nsome code to paste into your console or scratchpad We can start by just fooling around with a little test code.\n/* Here are some basic javascript constructs you will encounter in your homework */ // two ways to \u0026quot;print\u0026quot; console.log(\u0026quot;hello\u0026quot;); // alert(\u0026quot;hello\u0026quot;); // here is a very basic \u0026quot;for loop\u0026quot;: for (i=0; i\u0026lt;10; i++ ) { console.log(\u0026quot;this is number: \u0026quot; + (i+1)); } // a simple array -- essentially a list var veggies = [\u0026quot;carrot\u0026quot;, \u0026quot;potato\u0026quot;, \u0026quot;pea\u0026quot;]; // a \u0026quot;for-of loop\u0026quot; -- iterates over array items for (i of veggies) { console.log(i) }; // a for-in loop -- iterates over array length (0,1,2,3, etc) for (i in veggies) { console.log(veggies[i]) }; // the same stuff, now applied to a web page // this stuff won't work from inside your editor! // try with other element types: h2, p, etc. var headings = document.getElementsByTagName(\u0026quot;h1\u0026quot;); console.log(headings); for (i=0; i\u0026lt;headings.length; i++) { headings[i].innerHTML = i + 1 +\u0026quot;. \u0026quot; + headings[i].innerHTML; console.log(headings[i].innerHTML); }; // this will overwrite the whole document! //document.write(\u0026quot;hello\u0026quot;); // objects // defines a new object type: Animal function Animal (name,numLegs) { this.name=name; this.numLegs=numLegs; } // creates a variable of type Animal var penguin = new Animal(\u0026quot;Penguin\u0026quot;, 2); // shows the internal structure of the object console.log (penguin); // you can iterate over the penguin's attributes for (i in penguin) { console.log(i + \u0026quot;: \u0026quot; + penguin[i]); } // Add a new \u0026quot;method\u0026quot; to the object Animal.prototype.sayName = function() { console.log(\u0026quot;Hi my name is \u0026quot; + this.name); };  Variables You have all taken algebra, so you have all seen variables. Let\u0026rsquo;s think of it this way: a variable is a box, into whic you can place a value.\nvar myString = \u0026quot;Hello, everyone\u0026quot;; console.log(myString);  Hello, everyone  var myString = \u0026quot;some value in here\u0026quot;; var myNumber = 47; var myArray = [\u0026quot;first is a string\u0026quot;, 2, \u0026quot;third is also a string\u0026quot;]; var myObject = {first:\u0026quot;first is a string\u0026quot;, second: 2, third:\u0026quot;third is also a string\u0026quot;};  In almost all programming languages, there are many variable \u0026ldquo;types\u0026rdquo;; javascript variables are \u0026ldquo;dynamically typed\u0026rdquo;, which means that the type is determined only when the variable is actually being used. This is very handy, but can sometimes lead to confusion, e.g., compare:\nconsole.log(\u0026quot;Hello, I am a string \u0026quot; + 1 + 2); console.log(1 + 2 + \u0026quot; but I am a number\u0026quot;);  Loops // here is a very basic \u0026quot;for loop\u0026quot;: for (i=0; i\u0026lt;10; i++ ) { console.log(\u0026quot;this is number: \u0026quot; + (i+1)); } // a simple array -- essentially a list var veggies = [\u0026quot;carrot\u0026quot;, \u0026quot;potato\u0026quot;, \u0026quot;pea\u0026quot;]; // a \u0026quot;for-of loop\u0026quot; -- iterates over array items for (i of veggies) { console.log(i) }; // a for-in loop -- iterates over array length (0,1,2,3, etc) for (i in veggies) { console.log(veggies[i]) };  this is number: 1 this is number: 2 this is number: 3 this is number: 4 this is number: 5 this is number: 6 this is number: 7 this is number: 8 this is number: 9 this is number: 10 carrot potato pea carrot potato pea  for(var i = 0; i \u0026lt; 10; i++) { console.log(\u0026quot;This is iteration number: \u0026quot; + (i + 1) ); }  Flow Control also if statements \u0026ndash; what will this print?\nvar dimensions = 3; if (dimensions \u0026gt; 3) { warp.speed(\u0026quot;Make it so\u0026quot;); } else { console.log (\u0026quot; I dannae think she can take any more, Captain!\u0026quot;); }  You\u0026rsquo;ll learn a few more in the homework (notably switch/case and try/catch); but these two do the two basic operations you need to understand: repeat and test.\nAccessing the DOM Javascript uses something called the Document Object Model to understand the web page. As far as Javascript is concerned, the DOM is a big complex object, whose parts can be identified, manipulated, and used as input for complex functions. Here\u0026rsquo;s a relatively simple operation you can try in the Firefox scratchpad with a :\nvar headings = document.getElementsByTagName(\u0026quot;h1\u0026quot;); console.log(headings); for (i=0; i\u0026lt;headings.length; i++) {console.log(headings[i].innerHTML);}; // alert(headings);  Objects Objects deserve special mention, because they can be hideously complex.\n// defines a new object type: Animal function Animal (name,numLegs) { this.name=name; this.numLegs=numLegs; } // creates a variable of type Animal var penguin = new Animal(\u0026quot;Penguin\u0026quot;, 2); // shows the internal structure of the object console.log (penguin); // you can iterate over the penguin's attributes for (i in penguin) { console.log(i + \u0026quot;: \u0026quot; + penguin[i]); } // Add a new \u0026quot;method\u0026quot; to the object Animal.prototype.sayName = function() { console.log(\u0026quot;Hi my name is \u0026quot; + this.name); };  Functions Functions in JS are defined in two ways:\nAs a declaration:\nfunction square(number) { return number * number; }  As an expression:\nvar square = function(number) { return number * number };  Functions in Javascript are \u0026ldquo;first-order objects\u0026rdquo; and can be used in mind-bending ways. You don\u0026rsquo;t need to worry about those for a little while yet.\n","tags":null,"title":"Lab 05: Javascript Basics","uri":"https://2017.hackinghistory.ca/lab/lab-javascript-basics/"},{"categories":null,"content":" Google Maps and Spatial History Today in class we discussed spatial history, that is, history which focusses very strongly on the cultural history of space and place. There is nothing intrinsically digital about spatial history, nor is it necessarily qunatitative in nature; but the incredible development of Geographical Information Systems (GIS) in the last 15 years has made the use of interactive digital maps an attractive target for historians.\nSophisticated works such as the Spatial History Project and Ben Schmidt\u0026rsquo;s Whaling Maps Project take substantial technical effort to achieve their effects; in general, lengthy training in the use of specialized GIS software is required. We have our own example in the DECIMA Project run by Prof. Terpstra in our department.\nOur approach will be decidedly more lightweight. In class today, we will build a very simple \u0026ldquo;Geographical Information System\u0026rdquo; around a Google Map. Google Maps are, in fact, highly sophisticated GIS\u0026rsquo;s, with powerful tools for accessing various layers of information; but in order to work with them, we will need to use a very small amount of Javascript.\nRead this part! Follow the links! Today\u0026rsquo;s exercise also brings together some of what you\u0026rsquo;ve already learned in class, and brings back the . We will be working in the markdown syntax (github flavour), and you will also be able to choose between\n working in the JSBin Online Editor, which we\u0026rsquo;ve seen before\nusing a copy you can download and work with on your own.  The latter version also serves as an introduction to the Github code-sharing platform. If you continue working with code-based academic projects, you will eventually want to learn more about git, which is an enormously powerful resource. Our next assignment will also be made available on Github, so this is a chance to get a head start. If you want to work locally, I strongly recommend the Atom Code Editor, which we\u0026rsquo;ve discussed If you also install the atom-html-preview package, you will get live updates of your code in a second tab, almost like in jsbin. See the documentation for more info.\nWhat is a GIS? GIS is just a name for any system that tries to capture, manipulate, and represent geographical data. There are many GIS tools; the history department uses ArcGIS, which is expensive and something of an industry standard, while many independent scholars use QGIS, which is free, open source, and not quite as powerful as Arc.\nThe data in a GIS is all geotagged, that is, assigned a set of geographical co-ordinates. This sounds simple but it is actually quite complex, since any co-ordinate system is a simplified projection of real, disordered, 3-dimensional space. Many of the frustrations of working with GIS comes from the difficulty of rendering (say) historical map images commensurate with modern, satellite-derived maps.\nWithin a GIS, information is generally accessed as a set of layers. Data of specific types is stratified in layers, in much the same way that one creates image layers in photoshop. This image gives a typical example. Note that the creation of layers is itself an intellectual decision, relying on judgments about the relationships between individual bits of data.\n  Controlling Google Maps For our exercise today, we are really only interested in two layers: the \u0026ldquo;basemap\u0026rdquo;, that is, the street or satellite map most of us use on an almost-daily basis; and the marker layer, in which all of the little pins on a map are stored. We access these layers, and create those markers, with Javascript, by making calls to the Google Maps API.\nAn **API** is an \"Application Programming Interface\": a communications channel that lets programs talk to each other. By \"loading\" the Google Maps API, our web pages can communicate directly with Google's servers to modify the map that Google is presenting to us. In fact, most of the interesting stuff happening on the web these days happens via these machine-to-machine communication channels.  You don\u0026rsquo;t have to understand the Google Maps API very thoroughly to be able to do this assignment. The code comes pre-written; all you have to do is hack at it till it does what you want it to.\nUsing Markdown It was useful to learn HTML but it is a pain to generate it by hand. You do have to do some hand-coding of HTML for this exercise, because some of the work actually happens in Javascript; but the rest of it can be done in markdown, which I find much easier to write than HTML.\n# one or more '#' marks indicates a headline ### this one is \u0026quot;level 3\u0026quot; *a single asterisk is emphasis, or italics* **two are strong, or bold** An empty line separates paragraphs. \u0026gt; blockquotes are made with angle brackets \u0026gt; like this  You can also mix HTML in with markdown and it will generally render perfectly well. This is important for us because we have to create some \u0026lt;div\u0026gt; elements, which markdown can\u0026rsquo;t do for us.\nWhile you\u0026rsquo;re coding, reflect on the satisfaction that good, honest work brings to the act of electronic communication.\nThe Exercise Today you will create a web page containing a Google Map. The Google Map will contain 1-3 markers related to one of the themes we wrote on the blackboard in our last class. It will also contain a VERY brief essay that discusses the historical significance of the events represented by those markers, all the while paying homage to the project of spatial history: foregrounding the spatial elements of the historical narrative at hand. You\u0026rsquo;re not handing in your work, so don\u0026rsquo;t fret too much. Try to enjoy yourself; but also work hard, as this is good preparation for our next assignment, which wil lbe handed out in class on Thursday.\nThe code Javascript I have made the Javascript as simple as I can. There are more efficient and interesting ways to do this, but they are a little more complex. To make your markers \u0026ndash; and to re-centre your map \u0026ndash; you will need to modify the Javascript directly.\nHTML I think the only modifications you will need to make to the HTML are within the special \u0026ldquo;textarea\u0026rdquo; block containing the markdown syntax. The rest you can probably safely ignore, though you might learn something from looking at it.\nCSS The CSS for this exercise is deceptively simple. We make only a few small changes tothe defaults, but we are cheating here. The strapdown javascript library which enables us to magically write using markdown, also magically loads the incredible bootstrap web development framework, which includes some sophisticated CSS. Try changing the first textarea\u0026rsquo;s theme=united to one of the other supported \u0026ldquo;swatches\u0026rdquo; \u0026ndash; I\u0026rsquo;m a fan of \u0026ldquo;cyborg\u0026rdquo; and \u0026ldquo;slate\u0026rdquo;, myself.\n","tags":null,"title":"Lab 05: Spatial History with Google Maps","uri":"https://2017.hackinghistory.ca/lab/lab-05-spatial-history-with-google-maps/"},{"categories":null,"content":" Now that you are alll HTML/CSS/PHP ninjas\u0026hellip;. it\u0026rsquo;s time for the next language! The web frmework we\u0026rsquo;re using \u0026ndash; \u0026ldquo;Foundation\u0026rdquo; \u0026ndash; uses a language called SASS to manage style instructions. It takes a little getting used to be soon you will start to love it, I promise.\nWhat\u0026rsquo;s wrong with plain old CSS? CSS is great, but it has some problems:\n it\u0026rsquo;s repetitive: often you find yourself writing the same color codes over and over again in different selectors:  h1 { color: #ab23ab; } h2 { color: #ab23ab; }   it\u0026rsquo;s brittle: you may spend a long time figuring out the right proportions between, say, the font sizes for h1, h2,h3, and h4, or the right dimensions for div.class1 and div.class2. Then as you\u0026rsquo;re working, you find you actually want h1 to be smaller, or div.class2 to take up more of the screen. Then you have to go back to your CSS and modify all of the individual values you just entered.  h1 { font-size: 2.0rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.6rem; } div.class1 { width: 38%; } div.class2 { width: 58% }   it\u0026rsquo;s hard to read: when CSS files get complicated, they also tend to get a little convoluted; it can be difficult to make a logical, easy-to-follow structure that makes sense of everything.  What\u0026rsquo;s the solution? More and more web developers have turned to CSS preprocessors as a solution to this tricky problem. A preprocessor extends the CSS language to make it capable of more cool tricks, and when you\u0026rsquo;re ready, processes the code you\u0026rsquo;ve written to allow browsers to read it. In effect they are new languages, which are \u0026ldquo;supersets\u0026rdquo; of the CSS language. The two main preprocessors are SASS and LESS, and in our class we will use SASS (for no really good reason, just because). SASS lets you:\n stop repeating yourself write cleaner code and as a result, write maintainable code \u0026ndash; code that it\u0026rsquo;s easy to understand when you come back to look at it two weeks or six months or two years later.  How does it do this, you might ask? Well, let\u0026rsquo;s see.\nVariables By now you should be getting a sense of how fantastic variables are. PHP templates would be useless without them \u0026ndash; they let wordpress insert different text and HTMl content in the various slots that you\u0026rsquo;ve provided in your layout. For instance, $post-\u0026gt;title is a variable (actually, it\u0026rsquo;s an object property, but let\u0026rsquo;s not be too formal), that retrieves\u0026hellip; the Title! Almost all programming languages use variables, but CSS doesn\u0026rsquo;t. However: SASS does!\n$header-color: #eeeeee; h1 { color: $header-color; font-size: 44px; } h2 { color: $header-color; font-size: 37px; }  This will generate the following CSS:\nh1 { color: #eeeeee; font-size: 44px; } h2 { color: #eeeeee; font-size: 37px; }  check it out! Now whenever you want two elements to be the same color, you can just type the variable name instead of inserting a complicated color code. And you can change the color of a bunch of elements all at once, simply by changing the variable value.\nFunctions You can also manipulate values using functions. You can write your own functions (complicated!) or use the built-in functions SASS provides. Here\u0026rsquo;s an example.\n$header-color: #eeeeee; h1 { color:$header-color; background-color: scale-color($header-color, $lightness=30%) } h2 { color: scale-color($header-color, $lightness=-10%); }  There are many built-in color manipulation functions in SASS. Here\u0026rsquo;s a partial list:\n darken() lighten() saturate() desaturate() adjust-hue() invert() complement() scale-color()  scale-color() is probably the most versatile. Let\u0026rsquo;s look at it again:\nbackground-color: scale-color($header-color, $lightness:30%)  Note the different parts:\nscale-color ($header-color, $lightness=30%). This function takes one main argument \u0026ndash; a color \u0026ndash; and also a number of possible \u0026ldquo;parameters\u0026rdquo;, of the form:\n$lightness:-XX%, hue:-XXXdeg, saturation:-XX%, red:XX, blue:xXX, green:XX  You can see in our example that I make the header text color by lightening the header background.\nLoops and Conditionals :PROPERTIES:\nSASS contains all the basic programming syntax you want from a simple language: conditionals, loops, and a few other tricks. So for instance, you can try:\n// the number of columns @for $i from 1 through $total-columns { .fade-#{$i} { background-color: scale-color($body-bg, $lightness:-15%*$i); color: scale-color($green, $lightness:15%*($i - 1)); } }  This piece of code will create a bunch of CSS stanzas, like this:\n.fade-1 { background-color: #d9d9d9; color: #33cc33; } .fade-2 { background-color: #b3b3b3; color: #70db70; } .fade-3 { background-color: #8c8c8c; color: #adebad; } .fade-4 { background-color: #666666; color: #ebfaeb; }  Mixins It gets even crazier! You can define \u0026ldquo;mixins\u0026rdquo; that you can add to whatever classes you want. These mixins can contain complicated functions or whatever. Here\u0026rsquo;s an example:\n@mixin my-border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include my-border-radius(10px); } .some-other-box { @include my-border-radius(10px); }  This generates the code:\n.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .some-other-box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }  Excited yet? You Should be. There is still plenty to learn, but we\u0026rsquo;ll stop here for now. check out the SASS website for more info.\nPlaying with SASS I have a series of JSBins set up from last year, here they are:\n Intro to SASS variables A little bit of programming Sneak Peek at Foundation  Using Foundation on your personal site For fun, I have also enabled real-time compiling of SCSS files in the \u0026ldquo;grunterie\u0026rdquo; theme on your personal websites. Feel free to try it out!\nthings to put into the playground  text, background colors; grid sizes; div types; font sizes;  ","tags":null,"title":"Lab 10: From CSS to SASS!","uri":"https://2017.hackinghistory.ca/lab/lab-1l-from-css-to-sass/"},{"categories":null,"content":"","tags":null,"title":"Labs","uri":"https://2017.hackinghistory.ca/lab/"},{"categories":null,"content":"In general, each weekly seminar also includes a \u0026ldquo;lab\u0026rdquo; component in which we explore technical skills. See the individual Lab pages for more information.\n","tags":null,"title":"Labs and Notes","uri":"https://2017.hackinghistory.ca/lab/labs-and-notes/"},{"categories":null,"content":"","tags":null,"title":"Others","uri":"https://2017.hackinghistory.ca/other/"},{"categories":null,"content":"Assignments for HIS455 are linked here as I put them up on the site. See the Syllabus for an overview of assignments and their values.\n","tags":null,"title":"Overview","uri":"https://2017.hackinghistory.ca/assignment/overview/"},{"categories":null,"content":"This is a small fourth-year seminar; paricipation means a lot. more soon.\n","tags":null,"title":"Participation","uri":"https://2017.hackinghistory.ca/assignment/participation/"},{"categories":null,"content":" The project kicks off at the end of Fall semester with a formal proposal and presentation. The written proposal will be submitted not only to me, but to the KCC as well, so it is an important document.\nWhat is this project proposal thing for anyway? A project proposal is a roadmap and guide to the final project. You yourself will consult it many times over the course of the semester, as you struggle to keep track of what you have promised to do. Your partner (who will respond to your proposal with feedback \u0026amp; perhaps call for some changes) will also refer back to the proposal when you present them with the final product. so it\u0026rsquo;s a very important document.\nBut what goes in it?\nThe proposal is a complicated document that walks a fine line: it should present an exciting vision without promising too much; it should present a compelling historical narrative even though your real knowledge about the subject is still somewhat limited; it should propose a look for the website even though what you produce will certainly look different. Here is what I expect from this proposal document:\n a substantial piece of writing that describes your goals for the site in some (but not too much) detail. More on that below. a preliminary bibliography, of as many different sources as you can muster. Light annotation is a plus (not a paragraph-long description of each source, as in a formal \u0026ldquo;annotated bibliography\u0026rdquo;, but a sentence or two describing the value of the work to your project). You\u0026rsquo;re going to end up doing a lot of research for this project, so \u0026ldquo;as many sources as you can muster\u0026rdquo; should not be 5 or 6, but more like 20 or 30. mockups of representative site pages – this means the front page, a couple of the main pages you plan, and some pages for the main datatypes (posts, events, historical photographs, artefacts, oral history pages, whatever).  The Main Proposal: defining your project This is a substantial document (2000 words?) which the group should produce together (so, divide up the work – see below). Here\u0026rsquo;s what it should cover:\n Scope/Introduction: What is the topic of your website, and what kinds of information will it provide? Why is it useful/important/interesting? Who is the partner, and how does it benefit them? What topics/tasks are out of scope? this latter question, which is sometimes hard to answer, is an important one to think about – setting yourselves limits is an important part of making the project feasible. Your partner will be reading this, so emphasize that you wil lbe uilding a website based onteh Wordpress framework, with light modifications \u0026amp; additional plugins. Audience: who wants to visit this site, and what will they do there? Structure and Presentation: Describe the layout and structure of your website as well as you can. Refer to the mockups, and feel free to draw diagrams (showing, e.g., how people are likely to move around the site, or what the hierarchical relation of pages is, etc.). Describe in some detail what kinds of information each type of page will have. In your description, say why you chose this particular organizational structure – why are these the most important navigational axes for your site? Research Methods: What do you have to learn, and how will you do it? E.g., mention that you will do oral histories if you intend to; or that your will access architectural records in the Toronto Archive, if you intend to do that. consider also what the most interesting historiographical questions are – what are the puzzles that interest/motivate you? Challenges: Describe as specifically as you can the difficulties you expect to face, and how you hope to overcome them. If your group is missing skills that you need, again, be as specific as you can about what you need to know and how you might address this need. Roadmap: When do you expect to get your work done? The final website is due in class Apr. 4. You will need to get something done every week until then (!) to make this project great. What are your goals for each week? Also, who is doing what? each person in the group should have specific responsibilities to which they commit. These may change around a bit, and you will all help each other with your assigned tasks, but laying out expectations in writing makes it more likely that things will get done. Working with your Partner: Describe in as much detail as possible the relationship with your partner. Include e.g. discussion of:\n How your work will benefit your partner What resources will your partner bring to the project What plans you have made for turning the project over to your partner   Mockups In addition to the main proposal, you should include mockups of some of the main pages on the website, e.g., the front page and the layout for various content types. This is a proposal, and we understand that things will change as you go forward.\nI recommend using the 960 grid paper we used in our mockup class, or this one, or one of these, or one of these, or one of these, or, especially for rough brainstorming, ZURB\u0026rsquo;s own sketchsheets for responsive design or this nice little collection. Refer back to your excellent reading – your mockups will work best if they indicate some (but not all) of the interactions you expect people to have with the site.\nBibliography You wil lbe required to use Zotero and the class bibliography in all your work from this point on.\n","tags":null,"title":"Project Proposal","uri":"https://2017.hackinghistory.ca/assignment/project-proposal/"},{"categories":null,"content":" Due 09/26 before class\nYou do not have to become a coder to do well in this course. However, you will have to be willing to explore technical skills that you might not otherwise develop as a humanities scholar. In this initial assignment, we\u0026rsquo;ll use one of the web\u0026rsquo;s many excellent self-education platforms to learn the very basics of how web pages work.\nWeb pages are composed of three components: HTML, CSS, and Javascript. HTML provides the structure and content of a web page; CSS controls the style of presentation; and Javascript permits dynamic modification of both. To explore the web from the inside, you need to be alittle bit comfortable in all three.\nAssignment A (for beginners) Codeacademy.com is a platform that focusses on teaching web skills; head over there and set up an account. Once you\u0026rsquo;ve done that, complete the HTML \u0026amp; CSS course, which will take about 7 hours.\nOnce you have finished, send me a link to your profile page (click \u0026ldquo;view my Profile\u0026rdquo; under the top right menu item with your picture on it). That\u0026rsquo;s all! But feel free to continue exploring on Codeacademy \u0026ndash; there\u0026rsquo;s lots to learn and much of it will be helpful to this course, or to your further explorations in this field.\nAssignment B (for returnees) If you are already a hotshot coder, or if you took Digital History last Spring: codacademy is not for you!\n return to (or set up) your Github account clone my html-tutorial-ex tutorial write a short tutorial about one of the following:\n the HTML5 \u0026lt;audio\u0026gt; and \u0026lt;video\u0026gt; elements HTML tables \u0026ldquo;new\u0026rdquo; semantic tags such as \u0026lt;aside\u0026gt;, \u0026lt;article\u0026gt;, \u0026lt;header\u0026gt;, \u0026lt;footer\u0026gt;, etc. CSS float Padding and Margins Flexbox or CSS Grids   Your tutorial should include a README.md that explains the function of this HTML/CSS feature to the reader, and a practical example that the reader can play with to understand it. The playground should take the form of one HTML and one CSS file. Once you\u0026rsquo;re done, you should feel free to set up a tiny jsbin with your sample code; this will make it a bit easier for your readers to mess about.\nYou can learn more about git and Github here. This information will come in handy later, so it\u0026rsquo;s well worth your time now.\n","tags":null,"title":"STA 01: HTML \u0026 CSS","uri":"https://2017.hackinghistory.ca/assignment/sta-01-html--css/"},{"categories":null,"content":"","tags":null,"title":"Slides","uri":"https://2017.hackinghistory.ca/slides/"},{"categories":null,"content":" Logistics    Instructor: Matt Price     Email: matt.price@utoronto.ca   Office Hrs: SS 3077 T 1:30-2:45   Class Meetings: OISE10204, T 10:00-1:00    Introduction  In the year of your birth, the Web was a novelty, just beginning to make itself known outside of universities and research institutes. Today, it permeates almost every aspect of our lives, including every stage in the production of knowledge. You have been living through a fundamental transformation of knowledge; and yet the modes of communication you\u0026rsquo;ve learned and explored at University (the essay, the article, the scholarly monograph) belong to the world that came before. There are good reasons for this. The standards of our discipline were formed carefully over hundreds of years, in a determined quest to uncover and communicate truths about the past to our colleagues and the wider world. Even so, historians need to explore the digital media of our present and future. The books and other writings of old will not disappear, but they will be supplemented and to some extent supplanted by the new media of the web and its successors. In this class, we will explore those new media as tools for the transmission of historical knowledge, culminating in an intensive group project in which you will build a historical website in close collaboration with a community partner. The community partnership is a key element of \u0026ldquo;Hacking History\u0026rdquo;, and a source of many of its pleasures and challenges.\nAlong the way, we learn about the history of digital media, and their place in the development of the public sphere; and we will also study the history and politics of \u0026ldquo;engaged\u0026rdquo; and \u0026ldquo;public\u0026rdquo; scholarship. We will also spend a substantial amount of time acquiring the technical skills needed for a project like this, e.g., the fundamentals of HTML and Javascript, as well as just enough PHP to work with the Wordpress Content Management System. No prior technical knowledge is required for this, but you will need to be willing to challenge yourself to learn a few tricks and principles of web programming. The payoff for that effort is huge: a chance to contribute in a meaningful way to historical discourse beyond the walls of the University, and to explore the frontiers of historical communication in the process.\nFrom year to year, we also investigate specific historical trends and events relevant to the class project. In past years, our projects have mostly focused on local history in the Toronto region. This year marks a radical break with that tradition!\n2017-18 Partner Kangchendzonga Conservation Committee  I\u0026rsquo;m very pleased to be able to announce in advance our partner for 2017-18. The Khangchendzonga Conservation Committee is a small NGO based in Yuksom, a village which is a main access point to a UNESCO World Heritage Site in the Indian Himalaya on the Nepal border. Over the last 21 years, the KCC has accomplished a series of incredible feats, despite its small size. Its history gives a remarkable window into important dynamics that affect the whole region:\n the absorption of small Himalayan kingdoms into the regional superpowers (India and China); the rise of global tourism as a major economic driver in Asia and especially the Himalaya; the acceleration of climate change and environmental degradation in the region; the deployment of environmentalism by local groups as a lever for both regional autonomy and global integration; the migration of peoples which has created tremendous ethnic diversity in many Himalayan regions; the relationships between Western mountaineering culture and local conceptions of sacred space; many other phenomena which we will attempt to explore over the course of the year.  Working with the KCC will also accentuate some of the most interesting dynamics of public history: the relationships between experts and lay knowledge; power dynamics between historian and oral history subjects; and the potential for conflicts between the duties of a historian and those of a \u0026ldquo;contractor\u0026rdquo; working on behalf of an organization. Each of these problem areas is an opportunity for learning, and we will treat them as such.\nAll of this means that the readings and topic areas for 2017-18 will differ quite a bit from previous years, and will give students the chance to explore corners of history most U of T students rarely encounter. We will also be working closely with primary sources; a research assistant has scanned the KCC\u0026rsquo;s archive for our use. i\nCourse Structure First Semester In the first semester we will meet on a weekly basis to discuss the week\u0026rsquo;s readings (\u0026ldquo;Readings\u0026rdquo; in the outline) and work together on a technical or interpretative task that will be defined in advance (\u0026ldquo;Lab\u0026rdquo; in the outline). You will need a laptop for this portion of the class; if you don\u0026rsquo;t have one, you will need to figure out an alternative solution.\nTwice in the first semester, each student will take the role of discussion leader. In these weeks, you will take on additional responsibility for ensuring that issues from the readings are raised in seminar and discussed at a high level.\nAbout once every three weeks, a short assignment is required; these are noted in the outline and referred to in the course requirements section. In general the aim is to foster an atmosphere of collaborative and self-directed learning in which all work is focused on building the analytic resources, technical skills, and confidence to create really great projects in the second semester. Though the assignment structure is fixed, readings may change based on student interests. The semester culminates with a group presentations of your proposed project.\nSecond Semester In the second semester it is expected that students will spend most of their time working directly on the project with the partnering organization. We will meet most weeks to discuss specific technical questions raised by the projects themselves, and will discuss additional readings as needed. Each student will maintain a \u0026ldquo;Development Log\u0026rdquo; in which you track your weekly progress on the project. The project will be submitted to the KCC for review in the second to last week of classes, presented formally in the final class session, and finishing touches completed immediately before the beginning of finals period.\nCourse Requirements In this project-based class, we have relatively few readings and instead focus on active learning through a variety of assignments, all of which are intended to help you build towards your final, collaborative group project.\nThe class has 4 kinds of assignments:\n 4 \u0026ldquo;Short Technical Assignments\u0026rdquo; (STA\u0026rsquo;s, first semester, 15% nc/c/plus) One Written Paper (7-9 pp, Jan 9, 10% graded) 12 entries in the \u0026ldquo;Development Log\u0026rdquo; (Weekly in Semester 2, 10% graded) The Final Project (website, ongoing but due April 4, 45% graded)  with the balance of 20% for on- and off-line participation, which includes leading and participating in seminar discussion, active participation in the Slack team, and taking a role in choosing topics and finding activities during the second semester.\nShort Technical Assignments (STA\u0026rsquo;s) are designed to give you the technical skills you will need for your website development work in the second semester. Approximately every 2 weeks in the first semester, you will complete a short on or off-line assignment for a pass-fail grade. The lab assignments will cover basic web skills and other technical topics, which will always have been covered in the third \u0026lsquo;lab\u0026rsquo; hour of class.\nThe Paper is due shortly after the beginning of the second semester. Approximately 7-9 pages long, its format is that of a standard course paper: a well-researched thesis, supported by evidence garnered from primary and secondary sources. Students are expected to write on topics related to their Final Projects (see below).\nThe Final Project is a major collaborative effort to build a historical website in collaboration with the KCC (see above).\nSee the Project Guidelines for more detailed discussion \u0026amp; marking breakdown, though that document does not yet reflect this year\u0026rsquo;s direction.\n*Your Devlog is a collection of thoughtful pieces, about 400 words in length, detailing your progress on the class project. Details will be posted in late October; it\u0026rsquo;s expected that you maintain your devlog on Github (preferred) or in a Wordpress blog (if you want the practice with Wordpress). Posts are due Mondays at noon, and you\u0026rsquo;re expected to read your classmates\u0026rsquo; devlogs and comment either in GH isuses, via Wordpress comments, or in class. See the assignment page (when it goes up!) for more details.\nLate Policy STA\u0026rsquo;s: no late papers! STA\u0026rsquo;s are pass/fail, hand them in on time please.\nDevlog: Devlog postings are due by noon the day before class. Late blog postings will not be marked.\nPaper: 3%/day.\nFinal Project: It is essential that you complete your final project on time in order to get feedback from the sponsoring organization and organize the handoff of the project. The various deadlines for the project (see Project Guidelines) are firm. DO NOT MISS THEM.\nProject Timetable  10/03: Detailed assignment handed out 12/05: Project Proposal due and presented 01/09: Paper Due 02/20: Intermediate Status Report 03/27: Submission to Community Partner 04/03: Project Open House/FINAL DUE DATE  Texts All texts for this course are online, either in the public web or as pdfs. Most of them are publicly available. You may want physical copies of some books; these are available at Amazon or by special order from any sizable bookstore.\n Cohen \u0026amp; Rosenzweig, Digital History (http://chnm.gmu.edu/digitalhistory/) D. Brown, Communicating Design: Developing Web Site Documentation for Design and Planning (http://communicatingdesign.com/)  A sizable collection of links is also stored in a Zotero database, having been merged with the course bibliography.\nTools We\u0026rsquo;ll be using a number of important software tools, some of them very easy to use, some of them harder. All of them are free (as in beer, and usually as in speech) and most run on all three major platforms (Windows, Mac, Linux) or on the web. See the Tools page for more details.\n\nOutline for Semester 1 09/12 (Week 1) Hacking History in the Himalaya  Why we should write history, why everyone should do it, and why that means we need the Web. Hacker cultures, collaborative learning, knowledge sharing, non-expert culture. And a few words about the world\u0026rsquo;s third-tallest mountain, and our partners, the KCC.\nBackground Reading:  JAH - The Promise of Digital History, Pasts in a Digital Age KCC Activities List (2017)  Lab 1: Getting Started  HTML and Markdown Some Tools: Github, Dropbox, Atom Text Editor  STA 01 handed out\n09/19 (Week 2) Language of the Web  The Web is written in a language called HTML, with some help from other lanugages called CSS and Javascript. The nonlinear and interactive properties of these languages afford new possibilities for storytelling. We explore how the Internet works, and what that means for historical narrative.\nReadings  Vannevar Bush, \u0026ldquo;As We May Think\u0026ldquo; Tim Berners-Lee, Weaving the Web Ch. 2,4. Edward L. Ayers, \u0026ldquo;History in Hypertext\u0026ldquo; Rus Shuler, \u0026ldquo;How Does the Internet Work?\u0026ldquo;  Lab 2: Understanding HTML Resources: JSBin online HTML/Javascript editor; codeacademy courses; on Wikipedia; w3 guide; also cf. Zotero Bibliography\n09/26 (Week 3) The Crowd and the Public  The new kinds of collaboration that the web makes possible, and the intellectual challenges they create.\nReadings:  R. Rosenzweig, \u0026ldquo;Can History be Open Source?\u0026ldquo; Aaron Swartz, \u0026ldquo;Who Writes Wikipedia\u0026ldquo; Owens, Trevor. Digital Cultural Heritage and the Crowd.” Curator: The Museum Journal 56, no. 1 (2013): 121–130. Filene, Benjamin. “Passionate Histories: ‘Outsider’ History-Makers and What They Teach Us.” The Public Historian 34, no. 1 (February 1, 2012): 11–33.  Further Reading:  Corbett, Katharine T., and Howard S. (Dick) Miller. “A Shared Inquiry into Shared Inquiry.” The Public Historian 28, no. 1 (February 1, 2006): 15–38. Carr, Graham. Rules of Engagement: Public History and the Drama of Legitimation.” The Canadian Historical Review 86, no. 2 (2005): 317–354. Madsen-Brooks, Leslie. “‘I nevertheless am a historian’.” Writing History in the Digital Age, March 12, 2012.  Lab 3: CSS and Web Styles 10/03 (Week 4) Oral History, and Working with Communities  One remarkable possibility opened up by the web is abundant oral history; another is collaboration with the communities whose histories we study\nReadings:  \u0026ldquo;The Voice of the Past\u0026rdquo;, \u0026ldquo;What Makes Oral History Different\u0026rdquo; and \u0026ldquo;Learning to Listen in The Oral History Reader Graham, Shawn, Guy Masie, and Nadine Feuerherm. “HeritageCrowd Project: A Case Study in Crowdourcing Public History.” Writing History in the Digital Age, March 19, 2012.  Lab 4: Understanding Interviews STA 01 due, STA 02 handed out\n10/10 (Week 5) State, Empire, and Nature in India To place the KCC in historical context, we need to begin to understand the place of conservation and environmentalism in India\u0026rsquo;s colonial past.\nReadings  J. Sharma, Empire\u0026rsquo;s Garden, Introduction Richard Grove, \u0026ldquo;The Beginnings of global environmentalism\u0026rdquo; in Green Imperialism p.309-379. a more recent review TBA  Lab 5: Javascript Basics 10/17 (Week 6) Khangchendzonga in Sikkim The KCC draws heavily on the status of Mt. Khangchendzonga in Sikkim.\nReadings:  Pema Wangchuk and Mita Zulca. Khangchendzonga Sacred Summit. Gangtok, Kathmandu: Pema Wangchuk, 2007. ch 1,3 + one other at least.  Further Reading  Denjongpa, Anna Balikci. “Kangchendzonga: Secular and Buddhist Perceptions of the Mountain Deity of Sikkim among the Lhopos,” 2002. Scheid, Claire S. “Hidden Land and Changing Landscape: Narratives about Mount Khangchendzonga among the Lepcha and the Lhopo.” Journal of the Irish Society for the Academic Study of Religions 1, no. 1 (2014): 66–89. Cultural Attributes of the Khangchendzonga National Park. Gangtok, Sikkim, India: Namgyal Institute of Tibetology, 2015.  Lab 6: Getting Started with Wordpress 10/24 (Week 7) Sikkim, India, and Tourism Sikkim was an independent kingdom until 1975; the annexation or \u0026ldquo;merger\u0026rdquo; of Sikkim into India ushered in a a new era in which tourism became one of the most important components of the local economy\nReadings:  Rai, Bishwas Mani. “Merger of Sikkim and Politics of Development.” Masters of Arts, Sikkim University, 2017.  Further Readings:  Datta-Ray, Sunanda K. Smash and Grab: Annexation of Sikkim. Vikas New Delhi, 1984.  Lab 7: Wordpress Themes and Templates STA 03 Handed out\n10/31 (Week 8) Spatial History Thinking about the visual presentation of information, especially in map form\nReadings  Knowles, A. K. “GIS and History.” Placing History: How Maps, Spatial Data, and GIS Are Changing Historical Scholarship (2008): 1–13. Bondenhamer, David J. “History and GIS: Implications for the Discipline.” Placing History: How Maps, Spatial Data, and GIS Are Changing Historical Scholarship (2008): 219-234. Theibault, John. “Visualizations and Historical Arguments.” Writing History in the Digital Age, March 23, 2012.  Lab 8: Spatial History with Google Maps STA 02 due, STA 04 Handed Out\n11/07 (Week 9) NO CLASSES (break) 11/14 (Week 10) Mountains in History and Imagination The KCC\u0026rsquo;s activities are organized around Mt. Khangchendzonga. This week\u0026rsquo;s readings place that peak in a broader context.\nReadings  Robert Macfarlane, \u0026ldquo;Altitude\u0026rdquo; and \u0026ldquo;Everest\u0026rdquo; in Mountains of the Mind Stewart Weaver, \u0026ldquo;Surveying the Himalaya\u0026rdquo; in Philip Parker, Himalaya  Lab 9: Design exercise (Personas \u0026amp; Wireframes) STA 03 Due\n11/21 (Week 11) UNESCO, Nature, and Culture The region around Khangchendzonga, including Yuksam, has recently been declared a UNESCO World Heritage site.What does this mean and what dynamics does it entail?\nReadings TBA Lab 10: From CSS To SASS! STA 04 due\n11/28 (Week 12) Mountains and the Indian National Project The slopes of Mt. Khangchendzonga house the training grounds for the Himalayan Mountaineering Institute, a division of the Indian Department of Defense founded directly after the first ascento f Everest. We\u0026rsquo;ll explore the relationship between Himalayan mountains and nation-building in India.\nReadings TBA Lab11: Project work Session 12/05 (Week 13) Proposal Presentation The final class session will be a detailed presentation and constructive critique of your project proposal. See assignment for details\n\u0026lsquo;Outline\u0026rsquo; for Semester 2 In the second semester, we will meet mostly to discuss your progress on the project and to address specific issues you are encountering as you work. You will be working pretty intensively on research, design, and writing/creating, so we will usually not have class readings, except in cases where a background reading will obvously be of assistance to most of the class in addressing some issue. The particular topics we take on will be defined by your needs, but some potential ones include:\n Refining your project goals The Digital Divide: Design Implications Copyright Issues Accessibility New HTML5 tags (canvas, audio/video, microformats) Video on the Web: HTML5 \u0026amp; dynamic events Social Media in a community website (Twitter, Facebook, Google Plus, etc) How Databases Work Designing digital Projects Semantic Web Technologies Audio Post-Processing Website look and Feel  ","tags":null,"title":"Syllabus","uri":"https://2017.hackinghistory.ca/article/syllabus/"},{"categories":null,"content":"","tags":null,"title":"Tags","uri":"https://2017.hackinghistory.ca/tags/"}]