the future is static
TRANSCRIPT
![Page 1: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/1.jpg)
Building Future-Proof Digital Publications at the Getty
Eric Gardner Digital Publication Developer, Getty Publications
![Page 2: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/2.jpg)
The Problem• As museum technologists, we occupy an uncomfortable
intersection between two very different timeframes.
• Technology changes very rapidly, while scholarship unfolds over years or decades.
• This contradiction is even sharper where cultural heritage is concerned; the timeframe we are concerned with is potentially endless.
![Page 3: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/3.jpg)
The future becomes the past far more quickly than we expect it to.
![Page 4: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/4.jpg)
![Page 5: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/5.jpg)
When is the last time you used a 20-year-old piece of software?
![Page 6: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/6.jpg)
The Domesday Project BBC, 1986
![Page 7: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/7.jpg)
Photos: Chris Whytehead chrisacorns.computinghistory.org.uk/Computers/Domesday.html
![Page 8: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/8.jpg)
Photo: Regregex (Wikimedia)
![Page 9: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/9.jpg)
![Page 10: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/10.jpg)
How do we avoid creating another “obsolete future”?
![Page 11: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/11.jpg)
![Page 12: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/12.jpg)
![Page 13: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/13.jpg)
![Page 14: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/14.jpg)
Photo: CERN
![Page 15: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/15.jpg)
The birth of the World Wide Web• Created by Sir Tim Berners-Lee in 1989
• Originally envisioned as a platform for sharing research data at CERN in Switzerland
• Amazingly the first web page still works!
![Page 16: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/16.jpg)
Party like it’s 1989?• A lot has changed since the early web
• Documents become Sites become Apps
• Today’s web can: - Drive you somewhere - Take you shopping - Deliver your groceries - Find your life partner- etc…
![Page 17: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/17.jpg)
Restatement of the Problem
• Our tools have become much more powerful, but they have also become tremendously more complex.
• This complexity, when not carefully managed, ensures that our projects are going to have a limited shelf-life.
![Page 18: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/18.jpg)
Structure of a modern website (c. 2010)
Data
Relational Database (SQL)
CMS
Web CMS engine (PHP) Templates, accounts,
security, live 24/7
Client
Desktop web browsers. HTML, CSS, JS. Some interactivity
![Page 19: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/19.jpg)
Structure of a modern website (c. 2010)
Database CMS Client
Human-Readable
![Page 20: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/20.jpg)
Structure of a cutting-edge website (c. 2015)
MultipleData Sources
Traditional DBs, NoSQL, remote
APIs and services
Network of micro-services
Distributed across different hardware,
languages, locations
Multiple devices& platforms
Responsive design, Internet of Things,
native apps
![Page 21: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/21.jpg)
![Page 22: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/22.jpg)
Complexity Blues• Complex, dynamic web applications are capable of
amazing things, and they can deliver an incredible experience to users.
• However, keeping the machinery running is a complicated task, often requiring a team of specialists. Once created, each new product is really a process: it must be fed, watered, and actively maintained.
![Page 23: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/23.jpg)
Do publishers need to turn into software developers in order to survive the 21st century?
![Page 24: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/24.jpg)
Feature or bug?• Dynamic, real-time updates (up to the minute)?
• A platform where non-technical users can easily create or edit content?
• Ability to handle thousands or millions of active users?
• Ability to show all those users different things by anticipating their interests, tracking their activity, etc?
![Page 25: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/25.jpg)
Feature or bug?• Dynamic, real-time updates (up to the minute)?
• A platform where non-technical users can easily create or edit content
• Ability to handle thousands of millions of active users?
• Ability to show all those users different things by anticipating their interests, tracking their activity, etc?
![Page 26: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/26.jpg)
![Page 27: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/27.jpg)
Static Site Generators• Plain Text files + command line program = HTML files
• Became popular among developers who wanted a simple (and cheap) way to host personal websites and blogs
• One of the first was Jekyll, created by Tom Preston-Werner (founder, Github); now there are many others
• Virtually all are open-source
![Page 28: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/28.jpg)
Static Site architecture
Text Files
Markdown, YAML, ASCIIDOC, etc.
Generator
Run from the command line, no need for server
Web Pages
Static HTML, CSS, JS. Host anywhere
![Page 29: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/29.jpg)
Popular Generators
Jekyll (jekyllrb.com) Middleman (middlemanapp.com)
![Page 31: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/31.jpg)
Advantages• Data remains in a simple, human-readable format will
remain accessible for the foreseeable future (plain text)
• Formats like Markdown allow authors to focus on semantics, as opposed to presentation
• Working in plain text gives us access to many powerful tools, like Git (version control)
![Page 32: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/32.jpg)
Advantages (continued)• No server software means no updates, security patches, or
vulnerabilities that can be hacked
• Performance (nothing is faster than serving static HTML)
• Set and forget (but you can still update when needed)
• “Static” is not the opposite of “interactive”
![Page 33: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/33.jpg)
Key Technologies
• Markdown (Text content)
• YAML (Data)
• Git & Github (Version Control)
![Page 34: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/34.jpg)
Key Technologies
• Markdown (Text content)
• YAML (Data)
• Git & Github (Version Control)
![Page 35: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/35.jpg)
# This becomes a <h1> Tag
## This becomes a <h2>, etc.
This is regular text. _Italicize this_. [Here’s a link](www.google.com)Many engines also support notes[^1].
[^1]: Not all of them, though.
Simple Markdown Example
![Page 36: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/36.jpg)
![Page 37: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/37.jpg)
–John Gruber (creator of Markdown) https://daringfireball.net/projects/markdown/
“The overriding design goal for Markdown’s formatting syntax is to make it as readable as
possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain
text, without looking like it’s been marked up with tags or formatting instructions.”
![Page 38: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/38.jpg)
Key Technologies
• Markdown (Text content)
• YAML (Data)
• Git & Github (Version Control)
![Page 39: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/39.jpg)
---title: Back to the Futuredate: 10-21-2015tags: hoverboards, flux capacitors---# Time-travel Report
## By Marty McFly
You guys won’t believe what the year2015 is like!
Simple YAML Example
![Page 40: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/40.jpg)
![Page 41: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/41.jpg)
Key Technologies
• Markdown (Text content)
• YAML (Data)
• Git & Github (Version Control)
![Page 42: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/42.jpg)
![Page 43: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/43.jpg)
![Page 44: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/44.jpg)
Static Publishing at the Getty
• Convert author texts into Markdown, and data into YAML
• Use Github for collaborative editing
• One set of source content produces multiple output formats (web, ePub, PDF, print on demand)
![Page 45: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/45.jpg)
Octavo (coming soon)
• A printer’s term from the Renaissance for a small, portable format of book (half of a quarto), popularized by Aldus Manutius of Venice (c. 1501)
• A set of open-source tools to facilitate digital publishing in multiple formats with static tools. Based on the Middleman static site generator. Will be released next year.
![Page 47: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/47.jpg)
Further ReadingDomesday Article (2002): http://www.theguardian.com/uk/2002/mar/03/research.elearning Domesday Reloaded: http://www.bbc.co.uk/history/domesday CERN and the WWW: info.cern.ch/hypertext/WWW/TheProject.html Markdown: https://guides.github.com/features/mastering-markdown/ Static Site Generators: Jekyll, Middleman, StaticGen directory Git Tutorial: try.github.io
![Page 48: The Future is Static](https://reader035.vdocuments.net/reader035/viewer/2022070522/58eed3ad1a28abe7128b4629/html5/thumbnails/48.jpg)
Acknowledgements
Animated GIFs: giphy.com
Domesday Project info: Chris Whytehead, chrisacorns.computinghistory.org.uk/Computers/Domesday.html
XKCD comic: https://xkcd.com/1597/
Icons courtesy of the Noun Project (Austin Condiff, iconsmind.com, Ian Kirkland, Leonardo Schneider)