shawngraham/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Jan 11

Opening slide deck, just to get things rolling.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<style type='text/css'>
body {
  font-family: 'Helvetica';
  letter-spacing:-5px;
  background:#000;
  background-size:100%;
  color:#fff;
  margin:0;
  padding:0;
  font-weight:bold;
}

h1, h2, h3, p {
  margin:0;
}

em, a {
  font-style:normal;
  color:#8dbd0c;
}

a {
  background: #34d0e7;
  color:#000;
  text-decoration:none;
}

img {
  width:100%;
}

div {
  cursor:pointer;
  cursor:hand;
  position:absolute;
  top:0;
  left:0;
}

</style>
<script type='text/javascript'>
window.onload = function() {
    var s = document.getElementsByTagName('div'), cur = 0, ti;
    if (!s) return;
    function go(n) {
        cur = n;
        var i = 1e3, e = s[n], t;
        document.body.className = e.dataset.bodyclass || '';
        for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
        e.style.display = 'inline';
        e.style.fontSize = i + 'px';
        if (e.firstChild && e.firstChild.nodeName === 'IMG') {
            document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
            e.firstChild.style.display = 'none';
            if ('classList' in e) e.classList.add('imageText');
        } else {
            document.body.style.backgroundImage = '';
            document.body.style.backgroundColor = e.style.backgroundColor;
        }
        if (ti !== undefined) window.clearInterval(ti);
        t = parseInt(e.dataset.timeToNext || 0, 10);
        if (t > 0) ti = window.setTimeout(fwd, (t * 1000));
        while (
            e.offsetWidth > window.innerWidth ||
            e.offsetHeight > window.innerHeight) {
            e.style.fontSize = (i -= 2) + 'px';
            if (i < 0) break;
        }
        e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
        if (window.location.hash !== n) window.location.hash = n;
        document.title = e.textContent || e.innerText;
    }
    document.onclick = function() { go(++cur % (s.length)); };
    function fwd() { go(Math.min(s.length - 1, ++cur)); }
    function rev() { go(Math.max(0, --cur)); }
    document.onkeydown = function(e) {
        if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
        if (e.which === 37 || e.which === 33 || e.which === 38) rev();
    };
    document.ontouchstart = function(e) {
        var x0 = e.changedTouches[0].pageX;
        document.ontouchend = function(e) {
            var x1 = e.changedTouches[0].pageX;
            if (x1 - x0 < 0) fwd();
            if (x1 - x0 > 0) rev();
        };
    };
    function parse_hash() {
        return Math.max(Math.min(
            s.length - 1,
            parseInt(window.location.hash.substring(1), 10)), 0);
    }
    if (window.location.hash) cur = parse_hash() || cur;
    window.onhashchange = function() {
        var c = parse_hash();
        if (c !== cur) go(c);
    };
    go(cur);
};
</script></head><body>
<div><h1 id="digital">Digital</h1>
</div>
<div><h1 id="history">History</h1>
</div>
<div><p><em>Where we&#39;re going, we don&#39;t need roads.</em> </p>
</div>
<div><p><img src="http://beyondthemarquee.com/wp-content/uploads/2011/12/Doc-Brown-Martin-Casanova-565x800.jpg" alt="big"></p>
</div>
<div><p>But let&#39;s take a quick look at the kinds of places we&#39;ve been.</p>
</div>
<div><p><img src="http://i.imgur.com/2nYs2P9.png" alt="Imgur"></p>
</div>
<div><p><img src="http://i.imgur.com/ac1nNur.jpg" alt="Imgur"></p>
</div>
<div><p><img src="http://i.imgur.com/LNK9wWa.jpg" alt="Imgur"></p>
</div>
<div><p><img src="http://i.imgur.com/nQfGxzi.jpg" alt="Imgur"></p>
</div>
<div><p><img src="http://i.imgur.com/oQ0uXZa.jpg" alt="Imgur"></p>
</div>
<div><p><img src="http://i.imgur.com/Xe8higN.png" alt="Imgur"></p>
</div>
<div><p>&#39;Putting Stuff Online In Useful Ways&#39; Phase</p>
</div>
<div><p>This is totally important. We&#39;re getting good at it.</p>
</div>
<div><p>But it is not without issues.</p>
</div>
<div><p><img src="http://i.imgur.com/uG4DkZD.png" alt="Imgur"></p>
</div>
<div><p>&#39;I&#39;ve Built a New Tool To Do X&#39; Phase</p>
</div>
<div><p><img src="http://i.imgur.com/dpr21uW.jpg" alt="Imgur"></p>
</div>
<div><p>Also Important. </p>
<p>Also not without issues.</p>
</div>
<div><p>Are we at the &#39;what have we learned from digital history?&#39; phase?</p>
</div>
<div><p>Kinda. Sorta.</p>
</div>
<div><p><img src="http://i.imgur.com/wo4lk4F.jpg" alt="Imgur"></p>
</div>
<div><p>Two Options</p>
</div>
<div><p>1</p>
</div>
<div><p>I teach you to do data-y stuff.</p>
</div>
<div><p>2</p>
</div>
<div><p>Together we teach the world to do data-y stuff.</p>
</div>
<div><p>I choose 2.</p>
</div>
<div><p><img src="http://i.imgur.com/OysDPTv.jpg" alt="Imgur"></p>
<p>Mansion Maniac
<a href="http://publicdomain.nypl.org/mansion-maniac/">http://publicdomain.nypl.org/mansion-maniac/</a></p>
</div>
<div><p><a href="http://slides.com/shawngraham/minecraftedhistory--2#/">Historical Maps into Minecraft</a></p>
</div>
<div><p><img src="http://i.imgur.com/72CWHeF.jpg" alt="Imgur"></p>
</div>
<div><p><img src="http://img.gamefaqs.net/box/9/1/2/49912_front.jpg" alt="img"></p>
</div>
<div><p><em>There&#39;s a lot of bad &#39;game based learning&#39; out there.</em></p>
</div>
<div><p>We&#39;ll need to figure out a public history pedagogy for digital history.</p>
</div>
<div><ol>
<li>We&#39;ll learn DH techniques</li>
<li>We&#39;ll learn how to perform them through play</li>
<li>You will be awesome</li>
</ol>
</div>

## slides.md

      
    Raw
  

              slides.md
            
          
    Digital


History


Where we're going, we don't need roads.


But let's take a quick look at the kinds of places we've been.


'Putting Stuff Online In Useful Ways' Phase

This is totally important. We're getting good at it.

But it is not without issues.


'I've Built a New Tool To Do X' Phase


Also Important.
Also not without issues.

Are we at the 'what have we learned from digital history?' phase?

Kinda. Sorta.


Two Options

1

I teach you to do data-y stuff.

2

Together we teach the world to do data-y stuff.

I choose 2.


Mansion Maniac
http://publicdomain.nypl.org/mansion-maniac/

Historical Maps into Minecraft


There's a lot of bad 'game based learning' out there.

We'll need to figure out a public history pedagogy for digital history.


We'll learn DH techniques
We'll learn how to perform them through play
You will be awesome
	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
	<style type='text/css'>
	body {
	font-family: 'Helvetica';
	letter-spacing:-5px;
	background:#000;
	background-size:100%;
	color:#fff;
	margin:0;
	padding:0;
	font-weight:bold;
	}

	h1, h2, h3, p {
	margin:0;
	}

	em, a {
	font-style:normal;
	color:#8dbd0c;
	}

	a {
	background: #34d0e7;
	color:#000;
	text-decoration:none;
	}

	img {
	width:100%;
	}

	div {
	cursor:pointer;
	cursor:hand;
	position:absolute;
	top:0;
	left:0;
	}

	</style>
	<script type='text/javascript'>
	window.onload = function() {
	var s = document.getElementsByTagName('div'), cur = 0, ti;
	if (!s) return;
	function go(n) {
	cur = n;
	var i = 1e3, e = s[n], t;
	document.body.className = e.dataset.bodyclass \|\| '';
	for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
	e.style.display = 'inline';
	e.style.fontSize = i + 'px';
	if (e.firstChild && e.firstChild.nodeName === 'IMG') {
	document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
	e.firstChild.style.display = 'none';
	if ('classList' in e) e.classList.add('imageText');
	} else {
	document.body.style.backgroundImage = '';
	document.body.style.backgroundColor = e.style.backgroundColor;
	}
	if (ti !== undefined) window.clearInterval(ti);
	t = parseInt(e.dataset.timeToNext \|\| 0, 10);
	if (t > 0) ti = window.setTimeout(fwd, (t * 1000));
	while (
	e.offsetWidth > window.innerWidth \|\|
	e.offsetHeight > window.innerHeight) {
	e.style.fontSize = (i -= 2) + 'px';
	if (i < 0) break;
	}
	e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
	if (window.location.hash !== n) window.location.hash = n;
	document.title = e.textContent \|\| e.innerText;
	}
	document.onclick = function() { go(++cur % (s.length)); };
	function fwd() { go(Math.min(s.length - 1, ++cur)); }
	function rev() { go(Math.max(0, --cur)); }
	document.onkeydown = function(e) {
	if (e.which === 39 \|\| e.which === 34 \|\| e.which === 40) fwd();
	if (e.which === 37 \|\| e.which === 33 \|\| e.which === 38) rev();
	};
	document.ontouchstart = function(e) {
	var x0 = e.changedTouches[0].pageX;
	document.ontouchend = function(e) {
	var x1 = e.changedTouches[0].pageX;
	if (x1 - x0 < 0) fwd();
	if (x1 - x0 > 0) rev();
	};
	};
	function parse_hash() {
	return Math.max(Math.min(
	s.length - 1,
	parseInt(window.location.hash.substring(1), 10)), 0);
	}
	if (window.location.hash) cur = parse_hash() \|\| cur;
	window.onhashchange = function() {
	var c = parse_hash();
	if (c !== cur) go(c);
	};
	go(cur);
	};
	</script></head><body>
	<div><h1 id="digital">Digital</h1>
	</div>
	<div><h1 id="history">History</h1>
	</div>
	<div><p><em>Where we're going, we don't need roads.</em> </p>
	</div>
	<div><p><img src="http://beyondthemarquee.com/wp-content/uploads/2011/12/Doc-Brown-Martin-Casanova-565x800.jpg" alt="big"></p>
	</div>
	<div><p>But let's take a quick look at the kinds of places we've been.</p>
	</div>
	<div><p><img src="http://i.imgur.com/2nYs2P9.png" alt="Imgur"></p>
	</div>
	<div><p><img src="http://i.imgur.com/ac1nNur.jpg" alt="Imgur"></p>
	</div>
	<div><p><img src="http://i.imgur.com/LNK9wWa.jpg" alt="Imgur"></p>
	</div>
	<div><p><img src="http://i.imgur.com/nQfGxzi.jpg" alt="Imgur"></p>
	</div>
	<div><p><img src="http://i.imgur.com/oQ0uXZa.jpg" alt="Imgur"></p>
	</div>
	<div><p><img src="http://i.imgur.com/Xe8higN.png" alt="Imgur"></p>
	</div>
	<div><p>'Putting Stuff Online In Useful Ways' Phase</p>
	</div>
	<div><p>This is totally important. We're getting good at it.</p>
	</div>
	<div><p>But it is not without issues.</p>
	</div>
	<div><p><img src="http://i.imgur.com/uG4DkZD.png" alt="Imgur"></p>
	</div>
	<div><p>'I've Built a New Tool To Do X' Phase</p>
	</div>
	<div><p><img src="http://i.imgur.com/dpr21uW.jpg" alt="Imgur"></p>
	</div>
	<div><p>Also Important. </p>
	<p>Also not without issues.</p>
	</div>
	<div><p>Are we at the 'what have we learned from digital history?' phase?</p>
	</div>
	<div><p>Kinda. Sorta.</p>
	</div>
	<div><p><img src="http://i.imgur.com/wo4lk4F.jpg" alt="Imgur"></p>
	</div>
	<div><p>Two Options</p>
	</div>
	<div><p>1</p>
	</div>
	<div><p>I teach you to do data-y stuff.</p>
	</div>
	<div><p>2</p>
	</div>
	<div><p>Together we teach the world to do data-y stuff.</p>
	</div>
	<div><p>I choose 2.</p>
	</div>
	<div><p><img src="http://i.imgur.com/OysDPTv.jpg" alt="Imgur"></p>
	<p>Mansion Maniac
	<a href="http://publicdomain.nypl.org/mansion-maniac/">http://publicdomain.nypl.org/mansion-maniac/</a></p>
	</div>
	<div><p><a href="http://slides.com/shawngraham/minecraftedhistory--2#/">Historical Maps into Minecraft</a></p>
	</div>
	<div><p><img src="http://i.imgur.com/72CWHeF.jpg" alt="Imgur"></p>
	</div>
	<div><p><img src="http://img.gamefaqs.net/box/9/1/2/49912_front.jpg" alt="img"></p>
	</div>
	<div><p><em>There's a lot of bad 'game based learning' out there.</em></p>
	</div>
	<div><p>We'll need to figure out a public history pedagogy for digital history.</p>
	</div>
	<div><ol>
	<li>We'll learn DH techniques</li>
	<li>We'll learn how to perform them through play</li>
	<li>You will be awesome</li>
	</ol>
	</div>