Skip to content

Instantly share code, notes, and snippets.

@jasontucker
Forked from anonymous/index.html
Created September 22, 2013 22:04
Show Gist options
  • Save jasontucker/6664320 to your computer and use it in GitHub Desktop.
Save jasontucker/6664320 to your computer and use it in GitHub Desktop.
This is my talk from WCLAX 2013
<!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;
if (!s) return;
function go(n) {
cur = n;
var i = 1e3, e = s[n];
for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
e.style.display = 'inline-block';
e.style.fontSize = i + 'px';
if (e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
e.firstChild.style.display = 'none';
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
while (
e.offsetWidth > window.innerWidth ||
e.offsetHeight > window.innerHeight) {
e.style.fontSize = (i -= 10) + '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));
};
document.onkeydown = function(e) {
(e.which === 39) && go(Math.min(s.length - 1, ++cur));
(e.which === 37) && go(Math.max(0, --cur));
};
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><style>
em{ color: #5cd3fa;}
body {padding: 200px !important;}
ul {padding-left: 50px;}
</style>
<h1>Jason Tucker</h1>
<p>Improving Support Documentation by using Video in the Dashboard.</p>
<p><em>wpmedia.pro</em></p>
<p><em>wpwatercooler.com</em></p>
</div>
<div><h1>Why video?</h1>
<p>Text Based Learner </p>
<p>vs. </p>
<p>Visual Learner</p>
</div>
<div><h1>Here is why</h1>
<ul>
<li>YouTube is the second largest search engine</li>
<li>Over 6 billion hours of video are watched each month</li>
<li>That&#39;s almost an hour for every person on Earth</li>
</ul>
</div>
<div><h1>Look Great</h1>
<ul>
<li>Clean the room you are recording in</li>
<li>Control the noise in the room</li>
<li>Light the room and you</li>
</ul>
</div>
<div><h1>Sound Great</h1>
<ul>
<li><em>Blue Snowball</em> – $69</li>
<li><em>Røde Podcaster</em> – $229</li>
<li><em>Apogee MiC</em> – $199</li>
</ul>
</div>
<div><h1>Main Steps</h1>
<ul>
<li>Recording video from your screen</li>
<li>Saving the file to your computer</li>
<li>Uploading the file to Vimeo or YouTube</li>
<li>Display video with your text documentation</li>
<li>Profit</li>
</ul>
</div>
<div><h1>Screencasting software</h1>
<p>OS X</p>
<ul>
<li><p><em>Quicktime</em> Free</p>
</li>
<li><p><em>ScreenFlow</em> $99 <em><a href="http://wpmedia.pro/screenflow">http://wpmedia.pro/screenflow</a></em></p>
</li>
<li><p><em>SnapzProX</em> $69 <em><a href="http://wpmedia.pro/snapzprox">http://wpmedia.pro/snapzprox</a></em></p>
</li>
</ul>
</div>
<div><h1>Screencasting software</h1>
<p>OS X</p>
<ul>
<li><p><em>Screenflick</em> $29 <em><a href="http://wpmedia.pro/screenflick">http://wpmedia.pro/screenflick</a></em></p>
</li>
<li><p><em>Screeny</em> $14 <em><a href="http://wpmedia.pro/screeny">http://wpmedia.pro/screeny</a></em></p>
</li>
<li><p><em>Screenr</em> $19 / mo ☹ <em><a href="http://wpmedia.pro/screenr">http://wpmedia.pro/screenr</a></em></p>
</li>
</ul>
</div>
<div><h1>Screencasting software</h1>
<p>Windows</p>
<ul>
<li><em>Camtasia</em> $99 <em><a href="http://wpmedia.pro/camtasia">http://wpmedia.pro/camtasia</a></em></li>
</ul>
</div>
<div><h1>Screenflow</h1>
<ul>
<li>Record Screen &amp; PIP of you</li>
<li>Edit video after recording</li>
<li>Add annotations to the video</li>
<li>Save video to local computer</li>
<li>Upload video to Vimeo or YouTube</li>
</ul>
</div>
<div><h1>Plugins</h1>
<h3>WPHelp - Free</h3>
<p><a href="http://wpmedia.pro/wphelp">http://wpmedia.pro/wphelp</a></p>
<h3>Easy Contextual Help for WordPress - $12</h3>
<p><a href="http://wpmedia.pro/contextual">http://wpmedia.pro/contextual</a></p>
</div>
<div><h1>Hide your icons</h1>
<ul>
<li><em>Camoflague</em> $6
<a href="http://wpmedia.pro/camoflague">http://wpmedia.pro/camoflague</a></li>
</ul>
<p>Hide all of your stuff on the desktop</p>
</div>
<div><h1>Camoflague</h1>
<p><img src="http://wpmedia.pro/wp-content/uploads/2013/09/camo3.gif" alt=""></p>
</div>
<div><h1>Highlight your mouse cursor</h1>
<ul>
<li><em>mouseposé</em> $5
<a href="http://wpmedia.pro/mousepose">http://wpmedia.pro/mousepose</a></li>
</ul>
<p>Hide all of your stuff on the desktop</p>
</div>
<div><h1>Mousepose</h1>
<p><img src="http://wpmedia.pro/wp-content/uploads/2013/09/mouse.gif" alt=""></p>
</div>
<div><h1>Demo</h1>
</div>
<style> em{ color: #5cd3fa;} body {padding: 200px !important;} ul {padding-left: 50px;} </style>

Jason Tucker

Improving Support Documentation by using Video in the Dashboard.

wpmedia.pro

wpwatercooler.com


Why video?

Text Based Learner

vs.

Visual Learner


Here is why

  • YouTube is the second largest search engine
  • Over 6 billion hours of video are watched each month
  • That's almost an hour for every person on Earth

Look Great

  • Clean the room you are recording in
  • Control the noise in the room
  • Light the room and you

Sound Great

  • Blue Snowball – $69
  • Røde Podcaster – $229
  • Apogee MiC – $199

Main Steps

  • Recording video from your screen
  • Saving the file to your computer
  • Uploading the file to Vimeo or YouTube
  • Display video with your text documentation
  • Profit

Screencasting software

OS X


Screencasting software

OS X


Screencasting software

Windows


Screenflow

  • Record Screen & PIP of you
  • Edit video after recording
  • Add annotations to the video
  • Save video to local computer
  • Upload video to Vimeo or YouTube

Plugins

WPHelp - Free

http://wpmedia.pro/wphelp

Easy Contextual Help for WordPress - $12

http://wpmedia.pro/contextual


Hide your icons

Hide all of your stuff on the desktop


Camoflague


Highlight your mouse cursor

Hide all of your stuff on the desktop


Mousepose


Demo


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment