[slides.git] / fosdem2015 / index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="Author" content="KaiRo - Robert Kaiser">
  <title>Firefox OS Tricorder</title>
  <link rel="stylesheet" type="text/css" href="slides.css">
  <script type="text/javascript" src="slides.js"></script>
  <link rel="contents" href="#index" title="Overview">
  <link rel="index" id="link-toc" href="#toc" title="Contents">
  <link rel="start" id="link-start" href="#index" title="Start">
</head>
<body onload="docLoaded();">
<header id="header"><div id="header-text">Tricorder</div>
  <div id="subheader-text"></div>
  <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
</header>
<nav id="slidenav">
  <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
  <a href="#index" id="nav-start" accesskey="s">start</a> ||
  <a href="#" id="nav-prev" accesskey="p" hidden>&lt; back</a>
  <span id="nav-prev-nolink" class="nolink">&lt; back</span> |
  <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd &gt;</a>
  <span id="nav-next-nolink" class="nolink">fwd &gt;</span>
</nav>

<article id="toc" title="Table of Contents">
<h1>Table of Contents</h1>
<h2>Firefox OS Tricorder</h2>

<div class="captionedbox">
<p class="captionedbox-caption">The following slides are available in this presentation:</p>
<div class="captionedbox-content">
<ul id="toc-list">
</ul>
</article>

<article id="index" title="Start Page">
<h1>Firefox OS Tricorder</h1>
<h2>Reading Device Sensor Data in JavaScript</h2>

<div class="simplebox">
<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
"KaiRo" &lt;kairo@kairo.at&gt;
<br><small>Program Manager, Mozilla QA</small>
</div>

<div class="captionedbox">
<p class="captionedbox-caption">Slides:
  <a href="http://slides.kairo.at/fosdem2015/">http://slides.kairo.at/fosdem2015/</a></p>
<div class="captionedbox-content small">
<ul class="small">
  <li>Created for
    <a href="http://fosdem.org/2015/schedule/track/mozilla/">Mozilla
    Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2015</a> in
    Brussels.</li>
  <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
  <li>Navigation via links on all slides, via access keys
   (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
  <li><a href="#toc">Contents</a></li>
  <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
        alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
        src="cc-by-sa-80x15.png"></a> 01/2015 Robert Kaiser -
    "Mozilla", "Firefox" and their logos are
    <a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
    of the Mozilla Foundation</a>; <a href="http://www.startrek.com/">Star Trek</a>
    and related items are trademarks of
    <a href="http://www.paramount.com/">Paramount Pictures</a>.</li>
</ul>
</div>
</div>
</article>

<article id="tricorder" title="Tricorder">
<h1>What is a Tricorder?</h1>

<div class="simplebox">
<img src="starfleet_tricorder_2370.jpg" class="slidepic"
 alt="Starfleet Tricorder, 2370">
<p>Sensor device as seen on "Star Trek"</p>
<p>Displays whatever data is needed at plot speeds and resolutions.</p>
<p class="ensurepicinbox"></p>
</div>
</article>

<article id="fxos-tricorder" title="Firefox OS Tricorder">
<h1>Firefox OS Tricorder App</h1>

<div class="simplebox">
<p>Displays data from device sensors as exposed by WebAPIs</p>
<p><a href="https://marketplace.firefox.com/app/tricorder/">marketplace.firefox.com/app/tricorder/</a></p>
<p>Code: <a href="https://github.com/KaiRo-at/tricorder">github.com/KaiRo-at/tricorder</a></p>
</div>
</article>

<article id="ui" title="UI">
<h1>Firefox OS Tricorder UI</h1>

<div class="simplebox cent">
<img src="tricorder-ui.svg"
     alt="Tricorder UI description">
</div>
</article>

<article id="module" title="Module">
<h1>Module</h1>

<div class="simplebox">
<ul>
  <li>HTML (switch, display)</li>
  <li>JS Object
    <ul>
      <li>2 Methods: activate(), deactivate()</li>
    </ul>
  </li>
</ul>
</div>
</article>

<article id="position" title="Position Module">
<h1>Position Module</h1>

<div class="simplebox">
<p>GPS, WiFi/Cell Location</p>
<p>API: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">Geolocation</a></p>
<p>Permission: geolocation</p>
</div>
</article>

<article id="position-code" title="Position: Code">
<h1>Position: Code</h1>

<div class="simplebox">
<pre>
  this.watchID = <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.watchPosition">navigator.geolocation.watchPosition</a>(
    function(position) {
      position.coords.latitude / .longitude / .accuracy / ...
    },
    function(error) { ... },
    {enableHighAccuracy: true, maximumAge: 10000, timeout: 60000}
  );

  navigator.geolocation.clearWatch(this.watchID);
</pre>
</div>
</article>

<article id="gravity" title="Gravity Module">
<h1>Gravity Module</h1>

<div class="simplebox">
<p>Accelerometer, Magnetometer</p>
<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent">deviceorientation</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent">devicemotion</a> events</p>
<p>Permissions: ---</p>
</div>
</article>

<article id="gravity-code" title="Gravity: Code">
<h1>Gravity: Code</h1>

<div class="simplebox">
<pre>
  window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/deviceorientation">deviceorientation</a>", this.orientEvent, true);
  window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion">devicemotion</a>", this.motionEvent, true);

  orientEvent: function(orientData) {
    orientData.alpha / .beta / .gamma (in °)
  },
  motionEvent: function(event) {
    event.accelerationIncludingGravity.x / .y / .z (in m/s²)
  },

  window.removeEventListener("deviceorientation", this.orientEvent, true);
  window.removeEventListener("devicemotion", this.motionEvent, true);
</pre>
</div>
</article>

<article id="sound" title="Sound Module">
<h1>Sound Module</h1>

<div class="simplebox">
<p>Microphone</p>
<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a>(getUserMedia),
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">WebAudio</a></p>
<p>Permissions: audio-capture</p>
</div>
</article>

<article id="sound-code" title="Sound: Code">
<h1>Sound: Code</h1>

<div class="simplebox">
<pre>
  <a href="https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia">navigator.getUserMedia</a>({ audio: true },
    function(aLocalMediaStream) {
      gModSound.mAudio.stream = aLocalMediaStream;
      gModSound.mAudio.context = new <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext">window.AudioContext</a>();
      gModSound.mAudio.input =
          gModSound.mAudio.context.createMediaStreamSource(gModSound.mAudio.stream);
      gModSound.mAudio.analyzer = gModSound.mAudio.context<a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode">.createAnalyser</a>();
      gModSound.mAudio.input.connect(gModSound.mAudio.analyzer);
    },
    function(err) { ... }
  );

  // in window.requestAnimationFrame():
  var data = new Uint8Array(gModSound.mAudio.frequencySlices);
  gModSound.mAudio.analyzer<a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode.getByteFrequencyData">.getByteFrequencyData</a>(data);
  // ... do something with data ...

  gModSound.mAudio.stream.stop();
</pre>
</div>
</article>

<article id="environment" title="Environment Module">
<h1>Environment Module</h1>

<div class="simplebox">
<p>Light, Proximity; Flashlight</p>
<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">devicelight</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent">deviceproximity</a> events;
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Camera_API">Camera API</a></p>
<p>Permissions: ---; camera (for Flash)</p>
</div>
</article>

<article id="environment-code" title="Environment: Code">
<h1>Environment: Code</h1>

<div class="simplebox">
<pre>
  window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">devicelight</a>", this.lightEvent, true);
  window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/deviceproximity">deviceproximity</a>", this.proxEvent, true);

  lightEvent: function(lightData) {
    lightData.value (in lux)
  },
  proxEvent: function(proxData) {
    proxData.min &lt;= .value &lt;= .max (in cm)
  },

  window.removeEventListener("devicelight", this.lightEvent, true);
  window.removeEventListener("deviceproximity", this.proxEvent, true);

  // flash/torch code works via <a href="https://developer.mozilla.org/en-US/docs/Web/API/CameraManager.getCamera">navigator.mozCameras.getCamera</a>
  // flaky and subject to change, please consult code on github
</pre>
</div>
</article>

<article id="device" title="Device Module">
<h1>Device Module</h1>

<div class="simplebox">
<p>Battery</p>
<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></p>
<p>Permissions: ---</p>
</div>
</article>

<article id="device-code" title="Device: Code">
<h1>Device: Code</h1>

<div class="simplebox">
<pre>
  0 &lt;= <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.battery">navigator.battery</a>.level &lt;= 1

  .charging (true/false)

  .chargingTime (in s; 0 or Infinity: unknown)

  .dischargingTime (in s; 0 or Infinity: unknown)
</pre>
</div>
</article>

<article id="end" title="The End">

<div class="simplebox">
<h1 class="cent" style="position: relative; z-index: 3; color: #FFFFFF; font-size: 2.5em;">Questions?</h1>
<img src="mister_tricorder.jpg" class="sshot"
     style="width: 100%; margin-top: -4.5em; position: relative; z-index: 1;"
     alt="Data &amp; Mister Tricorder">
</div>
</article>

</body>
</html>
Commit	Line	Data
b41707de RK	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	5	<meta name="Author" content="KaiRo - Robert Kaiser">
	6	<title>Firefox OS Tricorder</title>
	7	<link rel="stylesheet" type="text/css" href="slides.css">
	8	<script type="text/javascript" src="slides.js"></script>
	9	<link rel="contents" href="#index" title="Overview">
	10	<link rel="index" id="link-toc" href="#toc" title="Contents">
	11	<link rel="start" id="link-start" href="#index" title="Start">
	12	</head>
	13	<body onload="docLoaded();">
	14	<header id="header"><div id="header-text">Tricorder</div>
	15	<div id="subheader-text"></div>
	16	<a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
	17	</header>
	18	<nav id="slidenav">
	19	<a href="#toc" id="nav-toc" accesskey="t">toc</a> \|\|
	20	<a href="#index" id="nav-start" accesskey="s">start</a> \|\|
	21	<a href="#" id="nav-prev" accesskey="p" hidden>< back</a>
	22	<span id="nav-prev-nolink" class="nolink">< back</span> \|
	23	<a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd ></a>
	24	<span id="nav-next-nolink" class="nolink">fwd ></span>
	25	</nav>
	26
	27	<article id="toc" title="Table of Contents">
	28	<h1>Table of Contents</h1>
	29	<h2>Firefox OS Tricorder</h2>
	30
	31	<div class="captionedbox">
	32	<p class="captionedbox-caption">The following slides are available in this presentation:</p>
	33	<div class="captionedbox-content">
	34	<ul id="toc-list">
	35	</ul>
	36	</article>
	37
	38	<article id="index" title="Start Page">
	39	<h1>Firefox OS Tricorder</h1>
	40	<h2>Reading Device Sensor Data in JavaScript</h2>
	41
	42	<div class="simplebox">
	43	<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
	44	"KaiRo" <kairo@kairo.at>
	45	<br><small>Program Manager, Mozilla QA</small>
	46	</div>
	47
	48	<div class="captionedbox">
	49	<p class="captionedbox-caption">Slides:
	50	<a href="http://slides.kairo.at/fosdem2015/">http://slides.kairo.at/fosdem2015/</a></p>
	51	<div class="captionedbox-content small">
	52	<ul class="small">
	53	<li>Created for
	54	<a href="http://fosdem.org/2015/schedule/track/mozilla/">Mozilla
	55	Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2015</a> in
	56	Brussels.</li>
	57	<li>Written in HTML 5 with CSS 3 and JavaScript.</li>
	58	<li>Navigation via links on all slides, via access keys
	59	(e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
	60	<li><a href="#toc">Contents</a></li>
	61	<li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
	62	alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
	63	src="cc-by-sa-80x15.png"></a> 01/2015 Robert Kaiser -
	64	"Mozilla", "Firefox" and their logos are
65	<a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
66	of the Mozilla Foundation</a>; <a href="http://www.startrek.com/">Star Trek</a>
67	and related items are trademarks of
68	<a href="http://www.paramount.com/">Paramount Pictures</a>.</li>
69	</ul>
70	</div>
71	</div>
72	</article>
73
74	<article id="tricorder" title="Tricorder">
75	<h1>What is a Tricorder?</h1>
76
77	<div class="simplebox">
78	<img src="starfleet_tricorder_2370.jpg" class="slidepic"
79	alt="Starfleet Tricorder, 2370">
80	<p>Sensor device as seen on "Star Trek"</p>
81	<p>Displays whatever data is needed at plot speeds and resolutions.</p>
82	<p class="ensurepicinbox"></p>
83	</div>
84	</article>
85
86	<article id="fxos-tricorder" title="Firefox OS Tricorder">
87	<h1>Firefox OS Tricorder App</h1>
88
89	<div class="simplebox">
a5b5cb49	90	<p>Displays data from device sensors as exposed by WebAPIs</p>
b41707de RK	91	<p><a href="https://marketplace.firefox.com/app/tricorder/">marketplace.firefox.com/app/tricorder/</a></p>
	92	<p>Code: <a href="https://github.com/KaiRo-at/tricorder">github.com/KaiRo-at/tricorder</a></p>
	93	</div>
	94	</article>
	95
	96	<article id="ui" title="UI">
	97	<h1>Firefox OS Tricorder UI</h1>
	98
a5b5cb49 RK	99	<div class="simplebox cent">
	100	<img src="tricorder-ui.svg"
	101	alt="Tricorder UI description">
b41707de RK	102	</div>
	103	</article>
	104
	105	<article id="module" title="Module">
	106	<h1>Module</h1>
	107
	108	<div class="simplebox">
	109	<ul>
	110	<li>HTML (switch, display)</li>
	111	<li>JS Object
	112	<ul>
	113	<li>2 Methods: activate(), deactivate()</li>
	114	</ul>
	115	</li>
	116	</ul>
	117	</div>
	118	</article>
	119
	120	<article id="position" title="Position Module">
	121	<h1>Position Module</h1>
	122
	123	<div class="simplebox">
	124	<p>GPS, WiFi/Cell Location</p>
f4679eee	125	<p>API: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">Geolocation</a></p>
b41707de RK	126	<p>Permission: geolocation</p>
	127	</div>
	128	</article>
	129
	130	<article id="position-code" title="Position: Code">
	131	<h1>Position: Code</h1>
	132
	133	<div class="simplebox">
	134	<pre>
f4679eee	135	this.watchID = <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.watchPosition">navigator.geolocation.watchPosition</a>(
a5b5cb49 RK	136	function(position) {
	137	position.coords.latitude / .longitude / .accuracy / ...
	138	},
b41707de RK	139	function(error) { ... },
	140	{enableHighAccuracy: true, maximumAge: 10000, timeout: 60000}
	141	);
	142
	143	navigator.geolocation.clearWatch(this.watchID);
	144	</pre>
	145	</div>
	146	</article>
	147
	148	<article id="gravity" title="Gravity Module">
	149	<h1>Gravity Module</h1>
	150
	151	<div class="simplebox">
a5b5cb49	152	<p>Accelerometer, Magnetometer</p>
f4679eee RK	153	<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent">deviceorientation</a>,
f4679eee RK	154	<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent">devicemotion</a> events</p>
b41707de RK	155	<p>Permissions: ---</p>
	156	</div>
	157	</article>
	158
	159	<article id="gravity-code" title="Gravity: Code">
	160	<h1>Gravity: Code</h1>
	161
	162	<div class="simplebox">
	163	<pre>
f4679eee RK	164	window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/deviceorientation">deviceorientation</a>", this.orientEvent, true);
f4679eee RK	165	window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion">devicemotion</a>", this.motionEvent, true);
b41707de RK	166
	167	orientEvent: function(orientData) {
	168	orientData.alpha / .beta / .gamma (in °)
	169	},
	170	motionEvent: function(event) {
	171	event.accelerationIncludingGravity.x / .y / .z (in m/s²)
	172	},
	173
	174	window.removeEventListener("deviceorientation", this.orientEvent, true);
	175	window.removeEventListener("devicemotion", this.motionEvent, true);
	176	</pre>
	177	</div>
	178	</article>
	179
	180	<article id="sound" title="Sound Module">
	181	<h1>Sound Module</h1>
	182
	183	<div class="simplebox">
	184	<p>Microphone</p>
f4679eee RK	185	<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a>(getUserMedia),
f4679eee RK	186	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">WebAudio</a></p>
b41707de RK	187	<p>Permissions: audio-capture</p>
	188	</div>
	189	</article>
	190
	191	<article id="sound-code" title="Sound: Code">
	192	<h1>Sound: Code</h1>
	193
	194	<div class="simplebox">
	195	<pre>
f4679eee	196	<a href="https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia">navigator.getUserMedia</a>({ audio: true },
a5b5cb49 RK	197	function(aLocalMediaStream) {
a5b5cb49 RK	198	gModSound.mAudio.stream = aLocalMediaStream;
f4679eee	199	gModSound.mAudio.context = new <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext">window.AudioContext</a>();
e7829ad6 RK	200	gModSound.mAudio.input =
e7829ad6 RK	201	gModSound.mAudio.context.createMediaStreamSource(gModSound.mAudio.stream);
f4679eee	202	gModSound.mAudio.analyzer = gModSound.mAudio.context<a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode">.createAnalyser</a>();
a5b5cb49 RK	203	gModSound.mAudio.input.connect(gModSound.mAudio.analyzer);
	204	},
	205	function(err) { ... }
	206	);
	207
	208	// in window.requestAnimationFrame():
	209	var data = new Uint8Array(gModSound.mAudio.frequencySlices);
f4679eee	210	gModSound.mAudio.analyzer<a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode.getByteFrequencyData">.getByteFrequencyData</a>(data);
a5b5cb49 RK	211	// ... do something with data ...
	212
	213	gModSound.mAudio.stream.stop();
b41707de RK	214	</pre>
	215	</div>
	216	</article>
	217
	218	<article id="environment" title="Environment Module">
	219	<h1>Environment Module</h1>
	220
	221	<div class="simplebox">
	222	<p>Light, Proximity; Flashlight</p>
f4679eee RK	223	<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">devicelight</a>,
	224	<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent">deviceproximity</a> events;
	225	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Camera_API">Camera API</a></p>
b41707de RK	226	<p>Permissions: ---; camera (for Flash)</p>
	227	</div>
	228	</article>
	229
	230	<article id="environment-code" title="Environment: Code">
	231	<h1>Environment: Code</h1>
	232
	233	<div class="simplebox">
	234	<pre>
f4679eee RK	235	window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">devicelight</a>", this.lightEvent, true);
f4679eee RK	236	window.addEventListener("<a href="https://developer.mozilla.org/en-US/docs/Web/Events/deviceproximity">deviceproximity</a>", this.proxEvent, true);
a5b5cb49 RK	237
	238	lightEvent: function(lightData) {
	239	lightData.value (in lux)
	240	},
	241	proxEvent: function(proxData) {
	242	proxData.min <= .value <= .max (in cm)
	243	},
	244
	245	window.removeEventListener("devicelight", this.lightEvent, true);
	246	window.removeEventListener("deviceproximity", this.proxEvent, true);
	247
f4679eee	248	// flash/torch code works via <a href="https://developer.mozilla.org/en-US/docs/Web/API/CameraManager.getCamera">navigator.mozCameras.getCamera</a>
a5b5cb49	249	// flaky and subject to change, please consult code on github
b41707de RK	250	</pre>
	251	</div>
	252	</article>
	253
	254	<article id="device" title="Device Module">
	255	<h1>Device Module</h1>
	256
	257	<div class="simplebox">
	258	<p>Battery</p>
f4679eee	259	<p>APIs: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></p>
b41707de RK	260	<p>Permissions: ---</p>
	261	</div>
	262	</article>
	263
	264	<article id="device-code" title="Device: Code">
	265	<h1>Device: Code</h1>
	266
	267	<div class="simplebox">
	268	<pre>
f4679eee RK	269	0 <= <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.battery">navigator.battery</a>.level <= 1
	270
	271	.charging (true/false)
	272
	273	.chargingTime (in s; 0 or Infinity: unknown)
	274
	275	.dischargingTime (in s; 0 or Infinity: unknown)
b41707de RK	276	</pre>
	277	</div>
	278	</article>
	279
	280	<article id="end" title="The End">
	281
	282	<div class="simplebox">
	283	<h1 class="cent" style="position: relative; z-index: 3; color: #FFFFFF; font-size: 2.5em;">Questions?</h1>
	284	<img src="mister_tricorder.jpg" class="sshot"
	285	style="width: 100%; margin-top: -4.5em; position: relative; z-index: 1;"
	286	alt="Data & Mister Tricorder">
	287	</div>
	288	</article>
	289
	290	</body>
	291	</html>