{"id":972,"date":"2017-05-29T13:29:42","date_gmt":"2017-05-29T17:29:42","guid":{"rendered":"http:\/\/dssf.musselmanlibrary.org\/2017\/?page_id=972"},"modified":"2017-05-29T21:52:44","modified_gmt":"2017-05-30T01:52:44","slug":"digital-tools","status":"publish","type":"page","link":"https:\/\/dssf.musselmanlibrary.org\/2017\/resources\/labs\/digital-tools\/","title":{"rendered":"Digital Tools"},"content":{"rendered":"<h2>Objectives<\/h2>\n<p>After this lab, students will be able to:<\/p>\n<ul>\n<li>Create a basic webpage using HTML and CSS in order to understand the basic structure of websites<\/li>\n<li>Use GitHub to save the different versions of the HTML and CSS files created in this lab in order to understand the basic use of these tools.<\/li>\n<li>Analyze digital projects in order to see how they are created<\/li>\n<\/ul>\n<h2>Background Reading<\/h2>\n<ul>\n<li>Look through the Carolina Digital Humanities Initiative\u2019s\u00a0<a href=\"http:\/\/digitalhumanities.unc.edu\/resources\/tools\/\">tools page<\/a>. Compare to the\u00a0<a href=\"https:\/\/dirtdirectory.org\/\">DIRT Directory<\/a>. Bring one or two tools you could see yourself using in your project.<\/li>\n<li>Familiarize yourself with HTML and CSS throughout this week, and continue throughout the rest of the summer. \u00a0You can either read over Miriam Posner\u2019s \u201c<a href=\"http:\/\/miriamposner.com\/classes\/dh101f16\/tutorials-guides\/web-publishing\/html-css\/\">HTML &amp; CSS<\/a>\u201d tutorial and work through that, or use Codecademy\u2019s\u00a0<a href=\"https:\/\/www.codecademy.com\/learn\/learn-html-css\">Learn HTML and CSS<\/a>\u00a0interactive course. This should be something you are doing throughout the summer as you get more comfortable working with digital tools.<\/li>\n<li>Ford, Paul.\u00a0<a href=\"https:\/\/www.bloomberg.com\/graphics\/2015-paul-ford-what-is-code\/\">\u201cWhat is Code?\u201d<\/a><\/li>\n<li>Glass, Grant.\u00a0<a href=\"https:\/\/www.hastac.org\/blogs\/grantglass\/2015\/10\/14\/black-box\">\u201cThe Black Box.\u201d<\/a><\/li>\n<li>Marino, Mark.\u00a0<a href=\"http:\/\/dhdebates.gc.cuny.edu\/debates\/text\/64\">\u201cWhy We Must Read the Code.\u201d<\/a><\/li>\n<li>Posner, Miriam.\u00a0<a href=\"http:\/\/miriamposner.com\/blog\/how-did-they-make-that\/\">\u201cHow Did They Make That?\u201d<\/a><\/li>\n<li>Van Strien, Daniel. \u201c<a href=\"http:\/\/programminghistorian.org\/lessons\/getting-started-with-github-desktop\">An Introduction to Version Control Using Github Desktop.<\/a>\u201c<\/li>\n<\/ul>\n<h2>Creating HTML and CSS Documents and Versioning with GitHub<\/h2>\n<ol>\n<li>Go to <a href=\"https:\/\/github.com\/\">GitHub<\/a> and create a new account if you need to.<\/li>\n<li>Create a <a href=\"https:\/\/github.com\/new\">new repository<\/a>. Call it whatever you want. Add a description if you want. Check <strong>Initialize this repository with a README<\/strong>. Click <strong>Create Repository<\/strong>.<\/li>\n<li>Click <strong>Create new file <\/strong>and name it <strong>index.html<\/strong><\/li>\n<li>In the <strong>Edit<\/strong> tab, you will start coding your website. Use Miriam Posner\u2019s <a href=\"http:\/\/miriamposner.com\/classes\/dh101f16\/tutorials-guides\/web-publishing\/html-css\/\">tutorial for HTML<\/a> to guide you. Make sure you are including the following tags and close them appropriately:\n<ol>\n<li>HTML\n<ol>\n<li>HEAD\n<ol>\n<li>TITLE<\/li>\n<\/ol>\n<\/li>\n<li>BODY\n<ol>\n<li>H1 (heading 1)<\/li>\n<li>P (paragraph)<\/li>\n<li>A (link)<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>When you are done entering your code, click <strong>Preview<\/strong>, then <strong>Commit new file<\/strong>.<\/li>\n<li>Find an image on your computer, or download one from the Internet. Name it something easy to remember.<\/li>\n<li>Back on the <strong>Code<\/strong> tab, click on <strong>Upload new file<\/strong> and drag your image to the box. Click <strong>Commit changes.<\/strong><\/li>\n<li>Click on your <strong>index.html<\/strong> file and click on the <strong>Pencil<\/strong> icon (to edit)<\/li>\n<li>Add an <strong>IMG <\/strong>(image) tag to your <strong>index.html<\/strong> file that points to the image file you added.<\/li>\n<li>Click on <strong>Preview changes<\/strong> and see how it changed! In the <strong>Update<\/strong> field, put notes indicating you added an image tag. Click <strong>Commit changes.<\/strong><\/li>\n<li>Click <strong>Clone or download<\/strong>, then <strong>Download ZIP<\/strong>. Save the file to your computer. Open the <strong>.zip<\/strong> file, and open the folder that says <strong>REPONAME<\/strong><strong>-master<\/strong>. Keep this folder open.<\/li>\n<li>Open up another File Explorer window and go to your <strong>H:\\<\/strong> drive, and then open the <strong>public_html<\/strong> folder in your shared drive. This folder acts as a very basic web server, much like a very simple version of Sites, without the extra applications and code.<\/li>\n<li>Copy the <strong>index.html<\/strong> and <strong>image<\/strong> file to the <strong>public_html<\/strong> folder.<\/li>\n<li>Go to <strong>http:\/\/public.gettysburg.edu\/~GETTYSBURGUSERNAME\u00a0<\/strong>to see your web page!<\/li>\n<li>Go back to GitHub and click <strong>Create a new file<\/strong>. Name it <strong>style.css<\/strong><\/li>\n<li>Add some CSS to change the background color of your page and change the color of some of your text, again using Miriam Posner\u2019s <a href=\"http:\/\/miriamposner.com\/classes\/dh101f16\/tutorials-guides\/web-publishing\/html-css\/\">tutorial for HTML<\/a> to guide you. When done, click <strong>Preview<\/strong>, then <strong>Commit new file.<\/strong><\/li>\n<li>Copy and paste the line <strong>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;<\/strong> to your <strong>index.html<\/strong> file inside of the <strong>HEAD<\/strong> tags, and <strong>Commit changes<\/strong>. Make sure to put in the <strong>Update<\/strong> field that you added a link to your stylesheet. This tells your index.html file that you have a separate file on your server that has CSS information.<\/li>\n<li>Download the .zip file again, and copy both the <strong>index.html<\/strong> and <strong>style.css<\/strong> files to your <strong>public_html<\/strong> folder on your <strong>H:\/<\/strong> drive. Refresh the page, and see what\u2019s different!<\/li>\n<\/ol>\n<h3>Questions<\/h3>\n<ol>\n<li>How does using a program like GitHub help you track the changes in your code? How does it help other people?<\/li>\n<li>For this project, you didn\u2019t document your code internally, that is, include comments in it, but you did add descriptions when you updated your files in GitHub. How does documenting your code help others learn from it?<\/li>\n<li>Code is by nature logical and hierarchical; it has to be structured in such a way that it can be interpreted by a machine. Given that, how can be critical about code? Is it possible to be critical about code in a way similar to literary\/historical criticism?<\/li>\n<\/ol>\n<h2>Opening Up the Black Box<\/h2>\n<ol>\n<li>Find a digital project to check out. You can choose from the <a href=\"http:\/\/dssf.musselmanlibrary.org\/2017\/resources\/\">projects<\/a> on the DSSF17 website, or from somewhere else.<\/li>\n<li>Look around the site. Check for things that look familiar. Some sites that use tools like WordPress, Scalar, Omeka, etc. have similar user experience.\n<ol>\n<li><strong>WordPress<\/strong> \u2013 look for links that start with <strong>WP-<\/strong><\/li>\n<li><strong>Omeka<\/strong> \u2013 look for Items, Collections, Exhibits<\/li>\n<li><strong>Scalar<\/strong> \u2013 look for Paths, Pages, Media, Tags, Annotations<\/li>\n<li><strong>Watermarks<\/strong> \u2013 normally small links at the bottom of tools, similar to advertisements<\/li>\n<\/ol>\n<\/li>\n<li>See if there is an <strong>About<\/strong> page or other page that documents how the site was built, or contact information.<\/li>\n<li>Right-click on the page and select the View Source Code menu option. This gives you the HTML code that the browser displays. Check for words or phrases that might give away different tools the site uses. Many times, you will see these in links that are enclosed in <strong>LINK<\/strong> and <strong>SCRIPT<\/strong> tags in the <strong>HEAD<\/strong> section (and sometimes at the very end of the page). Try copying different things into Google to see what comes up. This may be especially useful if you see links that end in <strong>.js<\/strong>, which indicates a <strong>JavaScript<\/strong>.\u00a0JavaScript is a web coding language that is used with HTML and CSS to design and render webpages. It is not a tool in of itself, but it is used to create a lot of tools. You can also use tools like <a href=\"https:\/\/wappalyzer.com\/\">Wappalyzer<\/a> to check to see what is being used, but these aren\u2019t always useful (but can be a good place to start).<\/li>\n<li>Compare two different sites that annotate an image. One uses <a href=\"http:\/\/micr.io\"><strong>micr.io<\/strong><\/a>, a JavaScript library. The other uses <a href=\"https:\/\/storymap.knilab.com\/\">StorymapJS<\/a>, which is in turn an enhanced version of <a href=\"http:\/\/leafletjs.com\/\">LeafletJS<\/a>.\n<ol>\n<li><a href=\"https:\/\/tuinderlusten-jheronimusbosch.ntr.nl\/en\">https:\/\/tuinderlusten-jheronimusbosch.ntr.nl\/en<\/a><\/li>\n<li><a href=\"https:\/\/storymap.knightlab.com\/examples\/bosch-garden\/\">https:\/\/storymap.knightlab.com\/examples\/bosch-garden\/<\/a><\/li>\n<\/ol>\n<\/li>\n<li>See if the digital tools you&#8217;ve found are open source or not; some indicators are if there are GitHub pages for the tools, Creative Commons licenses, etc. You may have to do some Google searching to figure this out.<\/li>\n<\/ol>\n<h3>Questions<\/h3>\n<ol>\n<li>What site\/project did you check out? Did you figure out what tools the site was built with?<\/li>\n<li>Did your site have an About page or other documentation? How detailed was it? Was there a way to contact the creators of the project?<\/li>\n<li>Did you see comments in the source code?<\/li>\n<li>What would have made your site easier to understand from a technical perspective?<\/li>\n<li>Did any of your projects use open source tools?<\/li>\n<li>Did your projects look like they were build by professional developers? How did they compare to projects that likely did not have any professional coding support?<\/li>\n<li>How does prying the top off the black box help you understand how to document your own project?<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Objectives After this lab, students will be able to: Create a basic webpage using HTML and CSS in order to understand the basic structure of websites Use GitHub to save the different versions of the HTML and CSS files created in this lab in order to understand the basic use of these tools. Analyze digital &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/dssf.musselmanlibrary.org\/2017\/resources\/labs\/digital-tools\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Digital Tools&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":958,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-972","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/pages\/972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/comments?post=972"}],"version-history":[{"count":5,"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/pages\/972\/revisions"}],"predecessor-version":[{"id":994,"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/pages\/972\/revisions\/994"}],"up":[{"embeddable":true,"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/pages\/958"}],"wp:attachment":[{"href":"https:\/\/dssf.musselmanlibrary.org\/2017\/wp-json\/wp\/v2\/media?parent=972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}