Digital Infrastructures for Humanities Research Edward Bilodeau Matthew Milner
advertisement
Digital Infrastructures for Humanities
Research
Matthew Milner
Edward Bilodeau
Assistant Director
McGill Digital Humanities institute
matthew.milner@mcgill.ca
Assistant Librarian
Digital Initiatives, McGill Library
edward.bilodeau@mcgill.ca
Welcome to Digital Scholarship Workshops
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!
Learning Objectives
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!)
WWW
World Wide Web
Internet
HTTP Server
(software)
Web Server
www.example.com
Client
HTTP Request
http://www.example.com/document.html
Web Browser
HTTP Response
Web browser opens
document.html, reads
contents, and displays web
page
document.html
document.html
HTML
HTML file
Structure and content
Embedded files
Images, audio,
video, etc
CSS file
Presentation
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
<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
html
plain text
MARKUP
head
title
HTML turns plain-text content into a
collection of nested elements that can
be recognized and acted upon by the
computer.
body
h1
p
p
ul
li
li
li
Computer uses structure to display page
HTML
spec
<html>
<head>
<title>My Document</title>
</head>
<body>
Browser
(Code to Display
HTML)
<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>
structured data
<ul>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</body>
</html>
HTML 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
CSS
Default appearance
Style:
Visual appearance of
an HTML element
CSS
* Cascading style sheets
*
A way to tell the browser:
1. What to format.
2. How to format it.
Specify what to format
<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>
html
head
title
<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>
body
h1
p
p
ul
li
li
Make this red!
We can use the document structure to
identify elements.
li
CSS rules
Formatting instructions are created by selecting elements and
then declaring properties that are to be applied to selected
elements.
rule
selector
p {color: red}
property
value
<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
• Enhanced user interface
(front-end development)
• Interaction with servers
Server-side scripting
• Dynamic generation of web content
(back-end development)
• Capture user input
• Read/write to databases
• Read/write to other systems
Client-side Scripting
HTML file
HTTP request
web server
JS code
HTML code
browser
HTML parser
JS interpreter
HTML file
!
HTML file
JS code
HTTP response
JS code
HTML code
HTML code
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
Display HTML page
!
Code executes/runs
Server-side Scripting – Dynamically Generate HTML
HTML file
web server
HTTP request
PHP code
PHP interpreter
HTML code
browser
2
!
1
HTML parser
HTML file
HTTP response
HTML file
Generated
HTML code
Generated
HTML code
database
HTML code
HTML code
Display HTML page
!
Code executes/runs
Server-side Scripting – Capture Input
HTML file
web server
HTTP request
Input (Data)
PHP code
PHP interpreter
HTML code
browser
2
!
1
HTML parser
HTML file
HTTP response
HTML file
Generated
HTML code
Generated
HTML code
database
HTML code
HTML code
Display HTML page
!
Code executes/runs
Most web sites use a
combination of serverside and client-side
scripting
Server side scripting used to interact with server-side
resources, generate initial HTML file
HTML file
web server
HTTP request
PHP interpreter
browser
HTML parser
JS interpreter
!
!
HTTP response
!
HTML file
HTML file
Request/submit additional data
Server-side
Resources
Return additional data
Display HTML page
Client-side scripting is used to provide
interactive UI and handle computation that can
or should be handled on client
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
Display
Role
Technologies / tasks
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
Options
X
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
OJS (journals)
(digital collections)
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.
Making Decisions – Know your limits!
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!)
Homework
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)
