Digital Infrastructures for Humanities Research Matthew Milner Assistant Director McGill Digital Humanities institute Edward Bilodeau Assistant Librarian Digital Initiatives, McGill Library

 McGill Digital Humanities & McGill Library Initiative  Simple introductory non-credit workshops for faculty & students   Winter 2015 Workshops  Digital Infrastructures for Humanities Research  GIS and Spatial Data for Humanities Research (February 19)  Data Visualization for Humanities Research (March 17)  Assessing Humanities Digital Research / Digital Scholarship (April 28 & 30)  … in the future – Text Analysis?  Introductions! Welcome to Digital Scholarship Workshops

Part I - Tuesday  How does the internet work?  How are websites created and maintained?  Come away with a better understanding of what is needed for Humanities Digital Research  Grant & Funding Budgets  Develop Research Projects Part II - Thursday  What is available at McGill? Private Sector? Partners?  Evaluate your needs (do your homework!) Learning Objectives

WWW

World Wide Web Client Web Server Internet HTTP Request document.html HTTP Response document.html Web Browser Web browser opens document.html, reads contents, and displays web page HTTP Server (software)

HTML

HTML file Structure and content CSS file Presentation Embedded files Images, audio, video, etc Web Page JS file Scripting/ application code

HTML documents are plain-text files Introduction This is the first paragraph of text in my document. This document will help to illustrate how CSS works. This is another paragraph of text. It follows the first but doesn’t contain much additional information. * Step 1 * Step 2 * Step 3

HTML markup adds structure to content My Document Introduction This is the first paragraph of text in my document. This document will help to illustrate how CSS works. This is another paragraph of text. It follows the first but doesn’t contain much additional information. Step 1 Step 2 Step 3

An HTML page (viewed in a web browser)

From the computer's perspective plain text html headbody title h1 pp ul li MARKUP HTML turns plain-text content into a collection of nested elements that can be recognized and acted upon by the computer.

Computer uses structure to display page My Document Introduction This is the first paragraph of text in my document. This document will help to illustrate how CSS works. This is another paragraph of text. It follows the first but doesn’t contain much additional information. Step 1 Step 2 Step 3 Introduction This is the first paragraph of text in my document. This document will help to illustrate how CSS works. This is another paragraph of text. It follows the first but doesn’t contain much additional information. Step 1 Step 2 Step 3 Browser (Code to Display HTML) HTML spec HTML document structured data

CSS

Default appearance

Style: Visual appearance of an HTML element

A way to tell the browser: 1.What to format. 2.How to format it. CSS * Cascading style sheets *

Specify what to format html headbody title h1 pp ul li My Document Introduction This is the first paragraph of text in my document. This document will help to illustrate how CSS works. This is another paragraph of text. It follows the first but doesn’t contain much additional information. Step 1 Step 2 Step 3 Make this red! We can use the document structure to identify elements.

CSS rules  Formatting instructions are created by selecting elements and then declaring properties that are to be applied to selected elements. p {color: red} selector property value rule

My document body {background-color:#fff; color: #000;} p {font-size: 12px;} h1 {font-size: 14px;} li {margin-bottom: 6px;} Introduction Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum, mi in ultrices porttitor, elit nulla consequat odio, non purus. Apples Oranges Pears So ends our page!

html + css = static web pages

Web development HTML + CSS Content Presentation Client-side scripting (front-end development) Enhanced user interface Interaction with servers Server-side scripting (back-end development) Dynamic generation of web content Capture user input Read/write to databases Read/write to other systems

Client-side Scripting browser JS interpreter web server JS code HTML code HTML parser HTML file JS code HTML code HTML file JS code HTML code HTML file HTTP request HTTP response Display HTML page ! ! Code executes/runs The Document Object Model (DOM) gives developers a way to address every element within an HTML file, allowing them to use JavaScript to - Add/delete nodes - Modify node attributes - Modify node contents

database Server-side Scripting – Dynamically Generate HTML browser web server PHP interpreter PHP code HTML code HTML parser HTML file ! Generated HTML code HTML code HTML file Generated HTML code HTML code HTML file HTTP request HTTP response Display HTML page ! Code executes/runs 1 2

database Server-side Scripting – Capture Input browser web server PHP interpreter PHP code HTML code HTML parser HTML file ! Generated HTML code HTML code HTML file Generated HTML code HTML code HTML file HTTP request HTTP response Display HTML page ! Code executes/runs 1 2 Input (Data)

Most web sites use a combination of server- side and client-side scripting

browser JS interpreter web server PHP interpreter HTML parser ! HTML file ! HTTP request HTTP response Display HTML page ! Request/submit additional data Server side scripting used to interact with server-side resources, generate initial HTML file Return additional data Server-side Resources Client-side scripting is used to provide interactive UI and handle computation that can or should be handled on client HTML file AJAX used to provide enable communication with server resources within smooth UI

Modern web development is complicated and hard*. * unless you are already a developer

RoleTechnologies / tasks DisplayInterface Developer HTML, CSS (+ Design Tools) JavaScript Application frameworks ApplicationsWeb Developer PHP, Ruby, Python, MySQL Application frameworks DatabasesDB AdministratorSQL ServersSystem administrator OS (Linux, etc), app mgmt Security, backup, etc NetworkNetwork adminConnectivity, routers, wiring, etc

 Build your own DH application from scratch!  Acquire and implement an existing system  Commercial vendor solution  Open-source software (OSS) solution  Examples  Wordpress (content/blogs)  Omeka(digital collections)  OJS (journals) Options X except…

Customization of application software Haines, M. N. (2009). Understanding Enterprise System Customization: An Exploration of Implementation Realities and the Key Influence Factors. Information Systems Management, 26(2),

 How much do you know?  How much are you willing to learn?  How much time do you have to learn?  Is your time best spent developing and maintaining technology?  What parts of this can you outsource?  Is your research project more about digital content or digital methods? (you usually CAN’T do both!) Making Decisions – Know your limits!

 Find an example to discuss  Your own project  A project/site that you like  Questions  Main purpose of the web site?  Publication? Publicity? Community? Application?  Static vs dynamic?  Content management system?  How will it be funded?  Where does it reside?  Institutional? Private?  Is it more focused on presentation of content, or method (ie a tool) Homework