digital infrastructures for humanities research matthew milner assistant director mcgill digital...
TRANSCRIPT
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
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 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>
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>
<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>
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
Specify what to format
html
head
body
title
h1 p p u
l
li li li
<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>
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>
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)
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
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