presentations/meetup-hashtables.git

Samo Penic

2019-10-23 0c3a945c4b9a4cf714cbf7abee13365e78fb557e

commit \| author \| age
c43c7b	1	<html lang="en">
SP	2	<head>
	3	<meta charset="utf-8" />
	4	<meta name="viewport" content="width=1024" />
	5	<meta name="apple-mobile-web-app-capable" content="yes" />
	6	<title>Ljubljana Hardware Meetup :: Sputnik, 24.10.2019</title>
	7
	8	<meta name="description" content="Short presentation of what hash tabes are, how they are implemented and how to use them when you are an electrical engineer. This presentation is based on impress.js default demo presentation" />
	9	<meta name="author" content="Samo Penic" />
	10
	11	<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold\|PT+Sans:400,700,400italic,700italic\|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
	12
	13	<link href="impress.js/css/impress-demo.css" rel="stylesheet" />
	14
	15	<link rel="shortcut icon" href="favicon.png" />
	16	<link rel="apple-touch-icon" href="apple-touch-icon.png" />
0d52a3	17	<style>
SP	18	div.linkedlist{
	19	width:120px;height:35px;border:1px solid #000;font-size:16px;display:inline-block;padding-left:10px;margin-left:30px;
	20	}
	21	div.linkedlist::before{
	22	content: '\1F82A';
	23	font-size: 16pt;
	24	left: -1.5em;
	25	margin-top:-5px;
	26	position: relative;
	27	}
	28
	29	div.addrvertical{
	30	width:90px;height:35px;border:1px solid #000;background:grey;color:white;font-size:16px;display:inline-block
	31	}
	32
	33	</style>
c43c7b	34	</head>
SP	35
	36	<body class="impress-not-supported">
	37
	38	<div class="fallback-message">
	39	<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
	40	<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
	41	</div>
	42
	43	<div id="impress">
2bee68	44	<script>
SP	45	var names;
	46	var phones;
	47	var memory;
	48	var insert_idx=0;
0d52a3	49	var insert_idx_without_collision=0;
2bee68	50	function hash(stringval){
SP	51	hashval= 0;
	52	strlen=stringval.length;
	53	i=0;
	54	for(i=0;i<strlen;i++){
	55	hashval=hashval+stringval.charCodeAt(0);
	56	}
	57	console.log(stringval + " == " + hashval %13);
	58	return hashval % 13;
	59	}
	60
	61	function currentInner(element,data_index){
	62	element.innerHTML="Inserting <b>"+names[data_index]+ "</b>. Calculated hash_function is: <b>" + hash(names[data_index])+"</b>";
	63	}
	64
	65
	66
0d52a3	67	function insertMissingIntoLL(data_index){
SP	68	if(data_index==-1) data_index=insert_idx;
	69	hashval=hash(names[data_index]);
	70	console.log("f"+hashval);
	71	elll=document.getElementById("ll"+hashval);
	72	elll.innerHTML=elll.innerHTML+"<div class='linkedlist'>"+names[data_index]+"</div>";
	73
	74	memory[hashval]=data_index;
	75	insert_idx++;
	76	if(insert_idx==8){
	77	alert("Completed!");
	78	}
	79	else {
	80	currentInner(document.getElementById("s1current"), insert_idx);
	81	currentInner(document.getElementById("currll"), insert_idx);
	82	}
	83
	84	}
	85
d01ede	86	function insertMissingIntoOpen(data_index){
SP	87	insert_idx=insert_index_without_collision;
	88	if(data_index==-1) data_index=insert_index_without_collision;
	89	hashval=hash(names[data_index]);
	90	console.log("f"+hashval);
	91	while(memory[hashval]!=-1) hashval=(hashval+1)%13;
	92	memory[hashval]=data_index;
	93	insert_idx++;
	94	if(insert_idx==8){
	95	alert("Completed!");
	96	}
	97	else {
	98	currentInner(document.getElementById("open1current"), insert_idx);
	99
	100	el1=document.getElementById("o"+hashval);
	101	el2=document.getElementById("of"+hashval);
	102
	103	el1.innerHTML=names[data_index];
	104	el2.innerHTML=phones[data_index];
	105	}
	106
	107	}
0d52a3	108
2bee68	109	function insertIntoMemory(data_index){
SP	110	if(data_index==-1) data_index=insert_idx;
	111	hashval=hash(names[data_index]);
	112	console.log("f"+hashval);
	113	if(memory[hashval]!=-1){
	114	alert("Collision!!!");
0d52a3	115	insert_index_without_collision=insert_idx;
2bee68	116	}
SP	117	else{
	118	el1=document.getElementById("f"+hashval);
	119	el2=document.getElementById("nf"+hashval);
	120
	121	el1.innerHTML=names[data_index];
	122	el2.innerHTML=phones[data_index];
0d52a3	123
SP	124	elll=document.getElementById("ll"+hashval);
	125	elll.innerHTML=elll.innerHTML+"<div class='linkedlist'>"+names[data_index]+"</div>";
d01ede	126
SP	127	el1=document.getElementById("o"+hashval);
	128	el2=document.getElementById("of"+hashval);
	129
	130	el1.innerHTML=names[data_index];
	131	el2.innerHTML=phones[data_index];
0d52a3	132
2bee68	133	memory[hashval]=data_index;
SP	134	insert_idx++;
0d52a3	135	if(insert_idx==8){
2bee68	136	alert("Completed!");
SP	137	}
	138	else {
	139	currentInner(document.getElementById("s1current"), insert_idx);
d01ede	140	currentInner(document.getElementById("open1current"), insert_idx);
0d52a3	141	currentInner(document.getElementById("currll"), insert_idx);
2bee68	142	}
SP	143	}
	144	}
	145
	146
	147	function loadNames(){
	148	names=[
	149	document.getElementById("name1").value,
	150	document.getElementById("name2").value,
	151	document.getElementById("name3").value,
	152	document.getElementById("name4").value,
	153	document.getElementById("name5").value,
	154	document.getElementById("name6").value,
	155	document.getElementById("name7").value,
	156	document.getElementById("name8").value
	157	];
	158	phones=[1,2,3,4,5,6,7,8]
	159	for(i=0;i<8;i++){
	160	phones[i]="(01)"+Math.floor((Math.random() * 1000) + 1)+"-"+Math.floor((Math.random() * 1000) + 1);
	161	}
	162	memory=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
	163
	164
	165	/* Slide 1 actions */
	166	//Names goes into storages s0-s4 on first slide...
	167	document.getElementById("s0").innerHTML=names[0];
	168	document.getElementById("s1").innerHTML=names[1];
	169	document.getElementById("s2").innerHTML=names[2];
	170	document.getElementById("s3").innerHTML=names[3];
	171	document.getElementById("n0").innerHTML=phones[0];
	172	document.getElementById("n1").innerHTML=phones[1];
	173	document.getElementById("n2").innerHTML=phones[2];
	174	document.getElementById("n3").innerHTML=phones[3];
	175	//
	176	document.getElementById("intro0").innerHTML=names[0];
	177	document.getElementById("intro1").innerHTML=names[0];
	178	document.getElementById("s0result").innerHTML=document.getElementById("s0").innerHTML;
	179	document.getElementById("s0result").innerHTML=document.getElementById("n0").innerHTML;
	180	/* End Slide 1 */
	181
	182	/Filling the values into array demo until collision occurs /
	183
	184	currentInner(document.getElementById("s1current"), 0);
	185	/end demo until collision/
	186
	187	}
	188
	189
	190	</script>
c43c7b	191
SP	192
	193	<div id="naslovnica" class="step slide" data-x="-1000" data-y="-1500">
	194	<h1>Hardware Meetup - Sputnik, 24. october 2019</h1>
	195	<q>Hash tables</q><br />
	196
	197	<p class="center"> ... the background of their implementations.</p><br />
	198
	199	<p class="footnote">Samo Penič</p>
	200	</div>
	201
	202	<!--
	203
	204	The `id` attribute of the step element is used to identify it in the URL, but it's optional.
	205	If it is not defined, it will get a default value of `step-N` where N is a number of slide.
	206
	207	So in the example below it'll be `step-2`.
	208
	209	The hash part of the url when this step is active will be `#/step-2`.
	210
	211	You can also use `#step-2` in a link, to point directly to this particular step.
	212
	213	Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
	214	Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
	215
	216	-->
	217	<div class="step slide vsebina" data-x="-250" data-y="-1250" data-z="1500">
2bee68	218	<h1 class="naslov">About me...</h1>
c43c7b	219	<img class="samo" src="images/Samo1.png">
SP	220
	221	<ul>
2bee68	222	<li> phD in Electrical engineering</li>
SP	223	<li> working at the Faculty of electrical engineering, teaching fundamentals of EM fields</li>
	224	<li> promoting open source since... ever?</li>
	225	<li> hobby programmer </li>
c43c7b	226	</ul>
SP	227
	228	</div>
	229
2bee68	230	<div class="step slide vsebina" data-x="-250" data-y="-500" data-z="750" data-rotate-x="90">
SP	231	<h1 class="naslov">Let's fill in the data...</h1>
	232	<form>
	233	<ol>
	234	</li> Name: <input id="name1"></input><br />
	235	</li> Name: <input id="name2"></input><br />
	236	</li> Name: <input id="name3"></input><br />
	237	</li> Name: <input id="name4"></input><br />
	238	</li> Name: <input id="name5"></input><br />
	239	</li> Name: <input id="name6"></input><br />
	240	</li> Name: <input id="name7"></input><br />
	241	</li> Name: <input id="name8"></input><br />
	242	</ol><br /><br />
	243	<button onClick="loadNames()">Save data</button>
	244	</form>
	245	</div>
c43c7b	246
2bee68	247	<div class="step slide vsebina" data-x="0" data-y="-1500" data-z="0">
SP	248	<h1 class="naslov">What is a hash table</h1>
	249	<p>Sometimes also called associative array or dictionary. <b>It is a data structure used to map key into values</b></p>
	250	<br /><br />
	251	<p class="center" style="font-size:18pt">data["<span id='intro0'>Yoda</span>"] gives us all the information stored for <span id="intro1">Yoda</span>.</p>
	252	<br /><br />
	253	<p style="font-size:18pt">It is widely used to build things such us dictionaries, telephone books, book indexes, ...</p><br />
	254	<p>Hash table provide <b>Insertion, Deletion and Retreival</b> in <b>constant time</b>!</p>
	255	</div>
	256
	257
	258
	259	<div class="step slide vsebina" data-x="1000" data-y="-1500" data-z="0">
	260	<h1 class="naslov">However...</h1>
	261
	262	<p class="" style="margin-bottom:30px">The memory is accessible by addressing the data numerically.</p>
c43c7b	263
2bee68	264	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[0]</div><div id="s0">Yoda</div><div id="n0" style="font-size:15pt">(01)123-1234</div></span>
SP	265	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[1]</div><div id="s1">Obi</div><div id="n1" style="font-size:15pt">(01)222-2222</div></span>
	266	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[2]</div><div id="s2">Luke</div><div id="n2" style="font-size:15pt">(01)123-1234</div></span>
	267	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[3]</div><div id="s3">Darth</div><div id="n3" style="font-size:15pt">(01)111-1111</div></span>
	268	<p style="margin-top:30px;font-size:15pt">e.g.: Accessing the item at memory location data[0] yields name of the person <b><span id="s0result">Yoda</span></b> and person's phone number: <span id="s0number"></span>(01)123-1234</p><br />
	269
	270	<p>Finding phone number of <span id="s3value">Darth</span> requires linear search through the array, which is not efficient.</p>
	271
c43c7b	272	</div>
SP	273
	274	<!-- <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
	275	</div>
	276	-->
2bee68	277
SP	278
	279	<div class="step slide vsebina" data-x="2000" data-y="-1500" data-z="0">
	280	<h1 class="naslov">Mapping key to index</h1>
	281
0d52a3	282	<p>... is performed by so called hash functions. It can be as simple as <b>sum(ascii_code[i]) % array_size</b></p><br />
2bee68	283
0d52a3	284	<p>Let's try it out for our phone directory (array_size=13):</p><br />
2bee68	285	<div id="s1current"></div><br />
SP	286	<button onclick="insertIntoMemory(-1);">Insert</button>
	287	<br /><br />
	288
	289	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[0]</div><div id="f0" style="font-size:18px"> </div><div id="nf0" style="font-size:11pt"> </div></span>
	290	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[1]</div><div id="f1" style="font-size:18px"> </div><div id="nf1" style="font-size:11pt"> </div></span>
	291	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[2]</div><div id="f2" style="font-size:18px"> </div><div id="nf2" style="font-size:11pt"> </div></span>
	292	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[3]</div><div id="f3" style="font-size:18px"> </div><div id="nf3" style="font-size:11pt"> </div></span>
	293	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[4]</div><div id="f4" style="font-size:18px"> </div><div id="nf4" style="font-size:11pt"> </div></span>
	294	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[5]</div><div id="f5" style="font-size:18px"> </div><div id="nf5" style="font-size:11pt"> </div></span>
	295	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[6]</div><div id="f6" style="font-size:18px"> </div><div id="nf6" style="font-size:11pt"> </div></span>
	296	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[7]</div><div id="f7" style="font-size:18px"> </div><div id="nf7" style="font-size:11pt"> </div></span>
	297	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[8]</div><div id="f8" style="font-size:18px"> </div><div id="nf8" style="font-size:11pt"> </div></span>
	298	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[9]</div><div id="f9" style="font-size:18px"> </div><div id="nf9" style="font-size:11pt"> </div></span>
	299	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[10]</div><div id="f10" style="font-size:18px"> </div><div id="nf10" style="font-size:11pt"> </div></span>
	300	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[11]</div><div id="f11" style="font-size:18px"> </div><div id="nf11" style="font-size:11pt"> </div></span>
	301	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[12]</div><div id="f12" style="font-size:18px"> </div><div id="nf12" style="font-size:11pt"> </div></span>
	302
	303	</div>
	304
	305
	306	<div class="step slide vsebina" data-x="2000" data-y="-1500" data-z="-1500">
	307	<h1 class="naslov">Collisions!</h1>
	308
	309	<p>They will occur. The probability depends on Load factor (LF=number_of_items/array_size)</p>
	310
	311	<p>We can cope with collisions in multitude of ways:</p>
	312	<ul>
	313	<li>Closed addressing (chaining)
	314	<li>Open addressing (linear probing) (million ways how to do it)
	315	<li>using alternate hash functions (million ways how to do it)
	316	<li>Resize array ;) (not a scientific way to do it)
	317	</ul>
	318	</div>
	319
	320
	321	<div class="step slide vsebina" data-x="2000" data-y="-2500" data-z="0">
	322	<h1 class="naslov">Closed addressing</h1>
0d52a3	323	<table style="width:100%">
SP	324	<col width="70%">
	325	<col width="30%">
	326	<tr>
	327	<td>
	328	<div id='ll0'><div class="addrvertical">data[0]</div></div>
	329	<div id='ll1'><div class="addrvertical">data[1]</div></div>
	330	<div id='ll2'><div class="addrvertical">data[2]</div></div>
	331	<div id='ll3'><div class="addrvertical">data[3]</div></div>
	332	<div id='ll4'><div class="addrvertical">data[4]</div></div>
	333	<div id='ll5'><div class="addrvertical">data[5]</div></div>
	334	<div id='ll6'><div class="addrvertical">data[6]</div></div>
	335	<div id='ll7'><div class="addrvertical">data[7]</div></div>
	336	<div id='ll8'><div class="addrvertical">data[8]</div></div>
	337	<div id='ll9'><div class="addrvertical">data[9]</div></div>
	338	<div id='ll10'><div class="addrvertical">data[10]</div></div>
	339	<div id='ll11'><div class="addrvertical">data[11]</div></div>
	340	<div id='ll12'><div class="addrvertical">data[12]</div></div>
	341	<div id='ll13'><div class="addrvertical">data[13]</div></div>
	342	</td>
	343	<td>
	344	<div id="currll"></div>
	345	<button onclick="insertMissingIntoLL(-1);">Insert</button>
2bee68	346
0d52a3	347	</td>
SP	348
	349	</tr>
	350	</table>
	351
2bee68	352	</div>
SP	353
	354
	355	<div class="step slide vsebina" data-x="2000" data-y="-3500" data-z="0">
	356	<h1 class="naslov">Open addressing</h1>
d01ede	357
SP	358	<div id="open1current"></div><br />
	359	<button onclick="insertMissingIntoOpen(-1);">Insert</button>
	360	<br /><br />
	361
	362	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[0]</div><div id="o0" style="font-size:18px"> </div><div id="of0" style="font-size:11pt"> </div></span>
	363	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[1]</div><div id="o1" style="font-size:18px"> </div><div id="of1" style="font-size:11pt"> </div></span>
	364	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[2]</div><div id="o2" style="font-size:18px"> </div><div id="of2" style="font-size:11pt"> </div></span>
	365	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[3]</div><div id="o3" style="font-size:18px"> </div><div id="of3" style="font-size:11pt"> </div></span>
	366	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[4]</div><div id="o4" style="font-size:18px"> </div><div id="of4" style="font-size:11pt"> </div></span>
	367	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[5]</div><div id="o5" style="font-size:18px"> </div><div id="of5" style="font-size:11pt"> </div></span>
	368	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[6]</div><div id="o6" style="font-size:18px"> </div><div id="of6" style="font-size:11pt"> </div></span>
	369	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[7]</div><div id="o7" style="font-size:18px"> </div><div id="of7" style="font-size:11pt"> </div></span>
	370	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[8]</div><div id="o8" style="font-size:18px"> </div><div id="of8" style="font-size:11pt"> </div></span>
	371	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[9]</div><div id="o9" style="font-size:18px"> </div><div id="of9" style="font-size:11pt"> </div></span>
	372	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[10]</div><div id="o10" style="font-size:18px"> </div><div id="of10" style="font-size:11pt"> </div></span>
	373	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[11]</div><div id="o11" style="font-size:18px"> </div><div id="of11" style="font-size:11pt"> </div></span>
	374	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[12]</div><div id="o12" style="font-size:18px"> </div><div id="of12" style="font-size:11pt"> </div></span>
2bee68	375	</div>
SP	376
	377
	378
	379	<div class="step slide vsebina" data-x="3000" data-y="-1500" data-z="0">
	380	<h1 class="naslov">Hash function properties</h1>
	381	<ul>
	382	<li>Hash function should minimize collisions
	383	<li>Uniformly distribute hash values
	384	<li>Are easy to calculate
	385	</ul>
	386	</div>
	387
	388	<div class="step slide vsebina" data-x="4000" data-y="-1500" data-z="0" data-rotate="90">
	389	<h1 class="naslov">Python dictionaries</h1>
	390	</div>
	391
	392
	393	<div class="step slide vsebina" data-x="4000" data-y="-2500" data-z="0" data-rotate="90">
	394	<h1 class="naslov">Hash tables in firmware</h1>
	395	</div>
	396
	397
	398	<div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
	399	</div>
	400
	401
	402
c43c7b	403	</div>
SP	404
	405	<div id="impress-toolbar"></div>
	406
	407	<div class="hint">
	408	<p>Use a spacebar or arrow keys to navigate. <br/>
	409	Press 'P' to launch speaker console.</p>
	410	</div>
	411	<script>
	412	if ("ontouchstart" in document.documentElement) {
	413	document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
	414	}
	415	</script>
	416
	417	<script src="impress.js/js/impress.js"></script>
	418	<script>impress().init();</script>
	419
	420
	421	</body>
	422	</html>
	423