Skip to content

Commit

Permalink
start to DSA site based on other work
Browse files Browse the repository at this point in the history
  • Loading branch information
@shawnmjones
shawnmjones committed Jun 17, 2019
1 parent be4b6cc commit f128003
Show file tree
Hide file tree
Showing 82 changed files with 46,048 additions and 0 deletions.
9 changes: 9 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,12 @@ venv.bak/

# mypy
.mypy_cache/

# Jekyll changes
_site
.jekyll-metadata
.DS_Store
.sass-cache

# Recommended for GitHub pages by https://ben.balter.com/jekyll-style-guide/gitignore/
Gemfile.lock
2 changes: 2 additions & 0 deletions Gemfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
7 changes: 7 additions & 0 deletions _config.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
markdown: kramdown
plugins:
- jekyll-paginate
- jekyll-sitemap

baseurl: "/dsa"
exclude: ["node_modules", "gulpfile.js", "package.json", "yarn.lock"]
7 changes: 7 additions & 0 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@

<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
Copyright &copy; Old Dominion University Web Science and Digital Libraries Research Group 2019
</div>
</footer>
17 changes: 17 additions & 0 deletions _includes/top_menu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ site.baseurl }}/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ site.baseurl }}/team.html">Research Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ site.baseurl }}/publications.html">Publications, Reports, and Datasets</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ site.baseurl }}/presentations.html">Presentations</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ site.baseurl }}/software.html">Software</a>
</li>
</ul>
59 changes: 59 additions & 0 deletions _layouts/main_page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>{{ page.title }}</title>

<!-- Bootstrap core CSS -->
<link href="{{ site.baseurl }}/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<!-- <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">

</head>

<body id="page-top">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="{{ site.baseurl }}/"><img src="img/dsa-logo-monochrome-wbg.png"> DSA</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
{% include top_menu.html %}
</div>
</div>
</nav>

{{ content }}

{% include footer.html %}

<!-- Bootstrap core JavaScript -->
<script src="{{ site.baseurl }}/vendor/jquery/jquery.min.js"></script>
<script src="{{ site.baseurl }}/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="{{ site.baseurl }}/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for this template -->
<script src="{{ site.baseurl }}/js/grayscale.min.js"></script>

</body>
</html>

58 changes: 58 additions & 0 deletions _layouts/topic_page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>{{ page.title }}</title>

<!-- Bootstrap core CSS -->
<link href="{{ site.baseurl }}/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<!-- <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/grayscale.css" rel="stylesheet">

</head>

<body id="page-top">

<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-shrink" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="{{ site.baseurl }}/"><img src="img/dsa-logo-monochrome-bw.png"> DSA</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
{% include top_menu.html %}
</div>
</div>
</nav>

{{ content }}

{% include footer.html %}

<!-- Bootstrap core JavaScript -->
<script src="{{ site.baseurl }}/vendor/jquery/jquery.min.js"></script>
<script src="{{ site.baseurl }}/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="{{ site.baseurl }}/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for this template -->
<!-- <script src="{{ site.baseurl }}/js/grayscale.min.js"></script> -->

</body>
</html>

187 changes: 187 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
---
layout: topic_page
title: Dark and Stormy Archives | About
permalink: /about.html
---

<section id="content" class="projects-section bg-light">
<div class="container">

<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="mb-4">The Goal</h2>
<p class="text-black-50">
The Dark and Stormy Archives (DSA) project exists to provide storytelling solutions with the goal of improving the understanding of web archive collections. With search engines, collection users must first have a query in mind. What if the user does not know enough about the collection to form a query? Our goal is to provide a &quot;summary of summaries&quot; in the form of social media storytelling that describes a collection sufficiently for a user to decide if that collection merits further time.
</p>
</div>
</div>

<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="mb-4">Background</h2>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/about-slides/researchers-create-webarchive-collections.png">
</div>
<div class="col-xl-5 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>Researchers Create Their Own Web Archive Collections</h3>
<p class="text-black-50 mb-0">
<a href="https://www.chronicle.com/article/The-Problem-of-History-in-the/238600">Historians</a>, <a href="http://www.dlib.org/dlib/february06/arms/02arms.html">social scientists</a>, and <a href="https://www.nytimes.com/2017/11/20/health/dermatology-skin-cancer.html">journalists</a> use web archives to understand human behavior. Creating collections is not limited to researchers. Organizations archive their own web presence and libraries focus on curating content specific to their communities. These collections gain further value when they are explored again by future users.
</p>
</div>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>These Collections Have Semantic Value</h3>
<p class="text-black-50 mb-0">
The curators of these collections implied aboutness by centering these collections on a specific topic. Thanks to this work, users of these collections interested in that topic do not need to search the web, or even full web archives, to find a set of pages on that topic.
</p>
</div>
</div>
<div class="col-xl-5 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/DSA-overview.png">
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/about-slides/web-archive-collections-same-page-different-versions.png">
</div>
<div class="col-xl-5 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>Web Archive Collections Have Many Versions of the Same Page</h3>
<p class="text-black-50 mb-0">
Web archive collections are different from other document collections because they have different versions of the same page over time. These versions have value because they allow users to see how events unfolded in a news story,or how organizations change over time. This <em>temporal component</em> means that web archive collections require different summarization and visualization techniques than normal document collections.
</p>
</div>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>Tools Exist, Allowing for Easy Collection Creation</h3>
<p class="text-black-50 mb-0">
Tools like <a href="https://www.archive-it.org">Archive-It</a> and <a href="https://webrecorder.io">Webrecorder</a> exist to allow users to easily create collections of archived web pages. These tools have allowed organizations to easily preserve their history and historians to easily document events as they unfold.
</p>
</div>
</div>
<div class="col-xl-5 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/about-slides/easy-collection-creation.png">
</div>
</div>

<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="mb-4">The Problem</h2>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" width="400px" src="img/about-slides/large-collection.png">
</div>
<div class="col-xl-5 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>Web Archive Collections Can Be Large</h3>
<p class="text-black-50 mb-0">
Curators choose web pages as <strong>seeds</strong> for the web archive collection. Each version of an web page is saved as a <strong>memento</strong>. Some collections contain thousands of seeds, and every capture of a seed results in one or more mementos. If a potential user wants to review a collection to understand it, they may need to review thousands of mementos.
</p>
</div>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>There Are Multiple Colections About the Same Topic</h3>
<p class="text-black-50 mb-0">
Because collections are easy to create, there are many collections about the same topic. For example, searches on Archive-It the topic &quot;human rights&quot; results in 31 collections for a user to review.
</p>
</div>
</div>
<div class="col-xl-5 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/about-slides/multiple-collections-same-topic.png">
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6 text-center">
<img class="img-fluid mb-3 mb-lg-0" width="400px" src="img/about-slides/more-collections-each-year.png">
</div>
<div class="col-xl-5 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>More Collections Are Added Each Year</h3>
<p class="text-black-50 mb-0">
There were more than 4,000 Archive-It collections by the end of 2016 and this number has grown to 5,857 by March 2019.
</p>
</div>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>Metadata Exists, But...</h3>
<p class="text-black-50 mb-0">
With other document collections, metadata is an invaluable tool for understanding the collection and its contents. Solutions like <a href="http://www.dlib.org/dlib/november99/11pitti.html">Encoded Archival Description (EAD)</a> for collections and <a href="https://www.loc.gov/marc/96principl.html">MAchine-Readable Cataloguing (MARC)</a> for books. These standards exist so that items can be compared to each other. Even though Archive-It provides fields from Dublin Core, supplying metadata on individual seeds or whole is optional. When present, it is generated by different curators from different organizations with different content standards and different rules of interpretation. Thus, even when present metadata on web archive collections cannot be reliably compared for understanding.
</p>
</div>
</div>
<div class="col-xl-5 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/about-slides/metadata-does-not-help.png">
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6 text-center">
<img class="img-fluid mb-3 mb-lg-0" width="400px" src="img/the_problem.png">
</div>
<div class="col-xl-5 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>The Problem, Summarized</h3>
<p class="text-black-50 mb-0">
<ul>
<li>There are multiple collections about the same topic.</li>
<li>The metadata for each collection is non-existent, or inconsistently applied.</li>
<li>Many collections have thousands of seeds with multiple mementos.</li>
<li>There are thousands of collections.</li>
</ul>
Human review of these mementos in order to understand a collection is an expensive proposition.
</p>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="mb-4">The Proposal</h2>
</div>
</div>

<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-7 col-lg-6">
<div class="featured-text text-center text-lg-left">
<h3>A Representative Sample Visualized With Social Media Storytelling</h3>
<p class="text-black-50 mb-0">
We can sample the colleciton to find the mementos that best represent it so that users can understand it. From there, we can visualize the mementos with social media storytelling. Social media storytelling visualizes web pages as <strong>surrogates</strong>, like cards and browser thumbnails.
</p>
<p class="text-black-50 mb-0">
A user viewing these <strong>stories</strong> should now understand the collection well enough to determine if it meets their needs, thus saving them time and effort.
</p>
</div>
</div>
<div class="col-xl-5 col-lg-6">
<img class="img-fluid mb-3 mb-lg-0" src="img/about-slides/the-proposal.png">
</div>
</div>

</div>
</section>
Loading

0 comments on commit f128003

Please sign in to comment.