Digital Infrastructures for Humanities Research Matthew Milner Assistant Director McGill Digital Humanities institute [email protected] Edward Bilodeau

Digital Infrastructures for Humanities Research

Matthew MilnerAssistant DirectorMcGill Digital Humanities institute [email protected]

Edward BilodeauAssistant LibrarianDigital Initiatives, McGill [email protected]

McGill Digital Humanities & McGill Library Initiative Simple introductory non-credit workshops for faculty & students http://digihum.mcgill.ca

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 Serverwww.example.com

Internet

HTTP Requesthttp://www.example.com/document.html

document.html

HTTP Response

document.html

Web Browser

Web browser opens document.html, reads contents, and displays web page

HTTP Server(software)

HTML

HTML fileStructure and content

CSS filePresentation

Embedded files Images, audio, video, etc

Web Page

JS fileScripting/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

<html><head>

<title>My Document</title></head><body>

<h1>Introduction</h1>

<p>This is the first paragraph of text in my document. This document will help to illustrate how CSS works.</p>

<p>This is another paragraph of text. It follows the first but doesn’t contain much additional information.</p>

<ul><li>Step 1</li><li>Step 2</li><li>Step 3</li>

</ul>

</body></html>

An HTML page (viewed in a web browser)

From the computer's perspective

plain text

html

head

body

title

h1 p p u

l

li li 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

<html><head>






</ul>

</body></html>

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)

HTMLspec

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

head

body

title

h1 p p u

l

li li li

<html><head>






</ul>

</body></html>

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

<html><head>

<title>My document</title><style>

body {background-color:#fff; color: #000;}p {font-size: 12px;}h1 {font-size: 14px;}li {margin-bottom: 6px;}

</style></head>

<body><h1>Introduction</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent

dictum, mi in ultrices porttitor, elit nulla consequat odio, non purus.</p>

<ul><li>Apples</li><li>Oranges</li><li>Pears</li>

</ul>

<p>So ends our page!</p></body></html>

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 interpreterPHP 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

12

database

Server-side Scripting – Capture Input

browser

web server

PHP interpreterPHP 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

12

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-sideResources

Client-side scripting is used to provide interactive UI and handle computation that can or should be handled on client

HTML file

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

Role Technologies / tasks

Display Interface Developer HTML, CSS (+ Design Tools)

JavaScript

Application frameworks

Applications Web Developer PHP, Ruby, Python,

MySQL

Application frameworks

Databases DB Administrator SQL

Servers System administrator OS (Linux, etc), app mgmt

Security, backup, etc

Network Network admin Connectivity, 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), 182 - 198.

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

Documents

Digital Infrastructures for Humanities Research Matthew Milner Assistant Director McGill Digital Humanities institute [email protected] Edward Bilodeau