This is a presentation I made for UXPA Boston Conference 2016. Much of the content won't make sense without hearing the presentation.
The source code is for the audience's reference.
Use the arrow keys to navigate to the next or previous slide.
Use the nav-progress bar (the almost invisible thin line) on top to jump to a certain slide.
noun.
The degree of exactness as of how the prototype is experienced by the user
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tiny Hand Home</title>
</head>
<center>
<body bgcolor="#2b2b00">
<!-- ӰƬ��ʹ�õ� URL-->
<a href="design_studio/enter.swf"></a>
<a href="construct.swf"></a>
<!-- ӰƬ��ʹ�õ��ı�-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="1024" height="700" id="tinyhandhome" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="tinyhandhome.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#2b2b00" />
<embed src="tinyhandhome.swf" quality="high" bgcolor="#2b2b00" width="1024" height="700" name="tinyhandhome" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</center>
</html><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tiny Hand</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Design Studio</li>
<li>Construct</li>
</ul>
</nav>
</header>
<section>
Something is going on here
</section>
<aside>
<!-- Put a calendar here -->
</aside>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
body{
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #444444;
border-width: 0,0,0,0;
}
P{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8.5pt;
}
td { font-size: 14px; color: #333333}
a:hover { color: #666666}
.unnamed1 { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; color: #333333; text-decoration: none}
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
@import "colors";
@import "animation";
@mixin padding-viewport($size) {
top: $size;
bottom: $size;
left: $size;
right: $size;
}
.interaction-transition {
flex-direction: column;
&:after {
content: "";
position: absolute;
background-color: $red;
z-index: -1;
}
.bounceSpinZ {
animation: bounceSpinZ 4s forwards;
animation-delay: 2s;
transform-origin: calc(50% - 0.1em) 50%;
}
}
github.com/Shanfan/in-browser-prototyping-for-designers
@chitchy