You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

890 lines
29 KiB

<!doctype html>
<html lang="en">
<head>
<title>Product Design Project</title>
<!-- 2020-06-02 Tue 20:36 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Org-mode">
<meta name="author" content="Charlie Ritter">
<link  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* org mode styles on top of twbs */
html {
    position: relative;
    min-height: 100%;
}
body {
    font-size: 18px;
    margin-bottom: 105px;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 101px;
    background-color: #f5f5f5;
}
footer > div {
    padding: 10px;
}
footer p {
    margin: 0 0 5px;
    text-align: center;
    font-size: 16px;
}
#table-of-contents {
    margin-top: 20px;
    margin-bottom: 20px;
}
blockquote p {
    font-size: 18px;
}
pre {
    font-size: 16px;
}
.footpara {
    display: inline-block;
}
figcaption {
  font-size: 16px;
  color: #666;
  font-style: italic;
  padding-bottom: 15px;
}
/* from twbs docs */
.bs-docs-sidebar.affix {
    position: static;
}
@media (min-width: 768px) {
    .bs-docs-sidebar {
        padding-left: 20px;
    }
}
/* All levels of nav */
.bs-docs-sidebar .nav > li > a {
    display: block;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
}
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
    padding-left: 19px;
    color: #A1283B;
    text-decoration: none;
    background-color: transparent;
    border-left: 1px solid #A1283B;
}
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
    padding-left: 18px;
    font-weight: bold;
    color: #A1283B;
    background-color: transparent;
    border-left: 2px solid #A1283B;
}
/* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav {
    display: none; /* Hide by default, but at >768px, show it */
    padding-bottom: 10px;
}
.bs-docs-sidebar .nav .nav > li > a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    font-size: 12px;
    font-weight: normal;
}
.bs-docs-sidebar .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav > li > a:focus {
    padding-left: 29px;
}
.bs-docs-sidebar .nav .nav > .active > a,
.bs-docs-sidebar .nav .nav > .active:hover > a,
.bs-docs-sidebar .nav .nav > .active:focus > a {
    padding-left: 28px;
    font-weight: 500;
}
/* Nav: third level (shown on .active) */
.bs-docs-sidebar .nav .nav .nav {
    padding-bottom: 10px;
}
.bs-docs-sidebar .nav .nav .nav > li > a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 40px;
    font-size: 12px;
    font-weight: normal;
}
.bs-docs-sidebar .nav .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav .nav > li > a:focus {
    padding-left: 39px;
}
.bs-docs-sidebar .nav .nav .nav > .active > a,
.bs-docs-sidebar .nav .nav .nav > .active:hover > a,
.bs-docs-sidebar .nav .nav .nav > .active:focus > a {
    padding-left: 38px;
    font-weight: 500;
}
/* Show and affix the side nav when space allows it */
@media (min-width: 992px) {
    .bs-docs-sidebar .nav > .active > ul {
        display: block;
    }
    /* Widen the fixed sidebar */
    .bs-docs-sidebar.affix,
    .bs-docs-sidebar.affix-bottom {
        width: 213px;
    }
    .bs-docs-sidebar.affix {
        position: fixed; /* Undo the static from mobile first approach */
        top: 20px;
    }
    .bs-docs-sidebar.affix-bottom {
        position: absolute; /* Undo the static from mobile first approach */
    }
    .bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav {
        margin-top: 0;
        margin-bottom: 0
    }
}
@media (min-width: 1200px) {
    /* Widen the fixed sidebar again */
    .bs-docs-sidebar.affix-bottom,
    .bs-docs-sidebar.affix {
        width: 263px;
    }
}
</style>
<script>
$(function() {
    'use strict';
    $('.bs-docs-sidebar li').first().addClass('active');
    $(document.body).scrollspy({target: '.bs-docs-sidebar'});
    $('.bs-docs-sidebar').affix();
});
</script>
</head>
<body>
<div id="content" class="container">
<div class="row"><div class="col-md-3 col-md-push-9"><nav id="table-of-contents">
<div id="text-table-of-contents" class="bs-docs-sidebar">
<ul class="nav">
<li><a href="#sec-1">1. Context and Objectives</a></li>
<li><a href="#sec-2">2. Research</a>
<ul class="nav">
<li><a href="#sec-2-1">2.1. Product Analysis</a></li>
<li><a href="#sec-2-2">2.2. Mood Board &amp; Design Influence</a></li>
<li><a href="#sec-2-3">2.3. Anthropometrics &amp; Ergonomics</a></li>
<li><a href="#sec-2-4">2.4. Materials (Software/Libraries) Analysis</a></li>
<li><a href="#sec-2-5">2.5. Client (me!)</a></li>
<li><a href="#sec-2-6">2.6. Research Analysis; In Summary</a></li>
</ul>
</li>
<li><a href="#sec-3">3. Design</a>
<ul class="nav">
<li><a href="#sec-3-1">3.1. Design Considerations</a></li>
<li><a href="#sec-3-2">3.2. Design Specification</a></li>
<li><a href="#sec-3-3">3.3. Concept Designs</a></li>
<li><a href="#sec-3-4">3.4. Early Prototype</a></li>
<li><a href="#sec-3-5">3.5. Potential User Response</a></li>
<li><a href="#sec-3-6">3.6. Evaluation of Design Development</a></li>
<li><a href="#sec-3-7">3.7. Technical Drawings</a></li>
<li><a href="#sec-3-8">3.8. Technical Models</a></li>
</ul>
</li>
<li><a href="#sec-4">4. Product</a>
<ul class="nav">
<li><a href="#sec-4-1">4.1. Completed Product</a></li>
<li><a href="#sec-4-2">4.2. Implementation vs Specification Evaluation</a></li>
<li><a href="#sec-4-3">4.3. Personal Evaluation</a></li>
<li><a href="#sec-4-4">4.4. Testing</a></li>
<li><a href="#sec-4-5">4.5. Customer Views</a></li>
<li><a href="#sec-4-6">4.6. Industrial Production</a></li>
<li><a href="#sec-4-7">4.7. Summary of Findings</a></li>
<li><a href="#sec-4-8">4.8. Modifications to the Product</a></li>
</ul>
</li>
<li><a href="#sec-5">5. Bibliography</a></li>
</ul>
</div>
</nav>
</div><div class="col-md-9 col-md-pull-3"><h1 class="title">Product Design Project</h1>
<p>
Mirrored from <a href="https://gitea.lilychan.dev/lily/dewey">the repository</a>.
</p>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> <span class="label label-default DONE">DONE</span> Context and Objectives</h2>
<div class="outline-text-2" id="text-1">
<p>
<b>What is your project about?</b>
</p>
<p>
My project is a personal imageboard following the *booru style.
</p>
<p>
<b>Why was this project chosen?</b>
</p>
<p>
This project is something I would personally use because I have
currently a unsorted mess of memes, twitter screenshots and <code>.webm</code>
files that need to be organized.
</p>
<p>
<b>What do you expect the end result to be?</b>
</p>
<p>
I think it will probably be a web app with the browser pointing to
<code>localhost</code>. During the set brief I wrote about how I could use
Electron, but there really is no need, as I would not be using the
Electron APIs in any special way.
<del>I am also reconsidering my initial thoughts of using <a href="https://clojure.org/">Clojure</a>, and am currently learning towards <a href="https://racket-lang.org/">Racket</a>’s <code>#lang web-server</code>.</del>
</p>
<p>
<b>What do you hope to learn by doing this project?</b>
</p>
<p>
I hope to learn more about web development in general. I have in the
past stuck with the <a href="https://jamstack.org/">Jamstack</a>, but I want to try to build a “real”
server-side application.
</p>
<p>
<b>How will your project meet the set brief?</b>
</p>
<p>
It <i>may</i> miss some of the technical choices made during the set brief.
Those were not hard requirements, so I don’t feel guilty about
changing my mind. Otherwise, the main objective has not changed.
</p>
</div>
</div>
<div id="outline-container-sec-2" class="outline-2">
<h2 id="sec-2"><span class="section-number-2">2</span> <span class="label label-default DONE">DONE</span> Research</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-sec-2-1" class="outline-3">
<h3 id="sec-2-1"><span class="section-number-3">2.1</span> <span class="label label-default DONE">DONE</span> Product Analysis</h3>
<div class="outline-text-3" id="text-2-1">
</div>
<div id="outline-container-sec-2-1-1" class="outline-4">
<h4 id="sec-2-1-1"><span class="section-number-4">2.1.1</span> <span class="label label-default DONE">DONE</span> Primary—<a href="https://hydrusnetwork.github.io/hydrus/">Hydrus Network Client</a></h4>
<div class="outline-text-4" id="text-2-1-1">
<blockquote>
<p>
The hydrus network client is a desktop application written for
Anonymous and other internet-enthusiasts with large media collections.
It organizes your files into an internal database and browses them
with tags instead of folders, a little like a booru on your desktop.
Tags and files can be anonymously shared through custom servers that
any user may run. Everything is free, nothing phones home, and the
source code is included with the release. It is developed mostly for
Windows, but reasonably functional builds for Linux and OS X are
available.
</p>
</blockquote>
<p>
An <i>imageboard</i> is the generalized term for a application (that is in
most cases deployed to the www) that focuses on the sharing of images.
The term comes out of the <i>textboards</i> popular in Japan, which are
simple text-only discussion websites.<sup><a id="fnr.1" name="fnr.1" class="footref" href="#fn.1">1</a></sup>
</p>
<p>
There are three main styles of imageboards<sup><a id="fnr.2" name="fnr.2" class="footref" href="#fn.2">2</a></sup>: the
<i>Pinterest</i> style, focusing on discovery<sup><a id="fnr.3" name="fnr.3" class="footref" href="#fn.3">3</a></sup>; the <i>*chan</i>
style, focusing on (anonymous) discussion; and the <i>*booru</i> style,
focusing on tagging and searching.
</p>
<p>
The Hydrus Network Client (Hydrus) is a <i>personal</i> imageboard in the
*booru style. This discussion will not focus on the underlying Hydrus
Network Server, which is its own can of worms.
</p>
<p>
<a href="https://github.com/hydrusnetwork/hydrus">It is written</a> in the <a href="https://www.python.org/">Python</a> programming language using the <a href="https://www.qt.io/">Qt</a> GUI
library primarily targeting the Windows operating system. It <a href="https://hydrusnetwork.github.io/hydrus/">supports</a>
all major image formats, a handful of video formats and codecs, some
audio codecs and a few other file types too.
</p>
<p>
When <a href="https://hydrusnetwork.github.io/hydrus/help/getting_started_files.html">importing images</a> into the software, a <i>copy</i> is made when
importing into the internal database, and the images are given an
<code>inbox</code> tag “just like your email” for easy tagging. Because copies
are made, the original files can be moved, renamed or deleted with no
loss to the database.
</p>
<p>
One killer feature of Hydrus is the <a href="https://hydrusnetwork.github.io/hydrus/help/access_keys.html">Public Tag Repository</a> (PTR). The
PTR allows for images to be automatically tagged with user-contributed
tags if the hash matches. These tags must be downloaded along with the
hashes; the documentation notes that this download and sync “usually
takes a couple of weeks.”
</p>
</div>
</div>
<div id="outline-container-sec-2-1-2" class="outline-4">
<h4 id="sec-2-1-2"><span class="section-number-4">2.1.2</span> <span class="label label-default DONE">DONE</span> Secondary</h4>
<div class="outline-text-4" id="text-2-1-2">
</div><ol class="org-ol"><li><a id="sec-2-1-2-1" name="sec-2-1-2-1"></a>*booru style: Hydrus and <a href="https://github.com/danbooru/danbooru">Danbooru</a><br ><div class="outline-text-5" id="text-2-1-2-1">
<p>
<img src="images/hydrus.png" class="img-responsive" alt="hydrus.png">
<img src="images/danbooru.png" class="img-responsive" alt="danbooru.png">
</p>
</div>
</li>
<li><a id="sec-2-1-2-2" name="sec-2-1-2-2"></a>*chan style: 4channel and bunkerchan<br ><div class="outline-text-5" id="text-2-1-2-2">
<p>
<img src="images/4channel.png" class="img-responsive" alt="4channel.png">
<img src="images/bunkerchan.png" class="img-responsive" alt="bunkerchan.png">
</p>
</div>
</li></ol>
</div>
</div>
<div id="outline-container-sec-2-2" class="outline-3">
<h3 id="sec-2-2"><span class="section-number-3">2.2</span> <span class="label label-default DONE">DONE</span> Mood Board &amp; Design Influence</h3>
<div class="outline-text-3" id="text-2-2">
<p>
<img src="images/brutalist1.png" class="img-responsive" alt="brutalist1.png">
<img src="images/brutalist2.png" class="img-responsive" alt="brutalist2.png">
<img src="images/brutalist3.png" class="img-responsive" alt="brutalist3.png">
</p>
</div>
</div>
<div id="outline-container-sec-2-3" class="outline-3">
<h3 id="sec-2-3"><span class="section-number-3">2.3</span> <span class="label label-default DONE">DONE</span> Anthropometrics &amp; Ergonomics</h3>
<div class="outline-text-3" id="text-2-3">
<ul class="org-ul">
<li>Anthropometrics and Ergonomics fit less in a digital project
</li>
<li>It can generally be condensed into the category of Accessibility
</li>
<li>The guidelines on the <a href="https://a11yproject.com/">A11y Project’s Website</a> should be followed
</li>
</ul>
</div>
</div>
<div id="outline-container-sec-2-4" class="outline-3">
<h3 id="sec-2-4"><span class="section-number-3">2.4</span> <span class="label label-default DONE">DONE</span> Materials (Software/Libraries) Analysis</h3>
<div class="outline-text-3" id="text-2-4">
</div>
<div id="outline-container-sec-2-4-1" class="outline-4">
<h4 id="sec-2-4-1"><span class="section-number-4">2.4.1</span> Baseline wants and requirements (see the set brief)</h4>
<div class="outline-text-4" id="text-2-4-1">
<ul class="org-ul">
<li>A mature <a href="https://en.wikipedia.org/wiki/Functional_programming">functional</a> programming language
</li>
<li>SQLite
</li>
<li>Images
<ul class="org-ul">
<li>Metadata
</li>
<li>Resizing (for thumbnails)
</li>
</ul>
</li>
<li>Videos
<ul class="org-ul">
<li>Metadata
</li>
<li>Thumbnails
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-sec-2-4-2" class="outline-4">
<h4 id="sec-2-4-2"><span class="section-number-4">2.4.2</span> Search Engines/Databases</h4>
<div class="outline-text-4" id="text-2-4-2">
</div><ol class="org-ol"><li><a id="sec-2-4-2-1" name="sec-2-4-2-1"></a><a href="https://xapian.org/">Xapian</a><br ><div class="outline-text-5" id="text-2-4-2-1">
<ul class="org-ul">
<li>Not super great language support, see below
</li>
</ul>
</div>
</li>
<li><a id="sec-2-4-2-2" name="sec-2-4-2-2"></a><a href="https://sqlite.org/index.html">SQLite</a><br ><div class="outline-text-5" id="text-2-4-2-2">
<ul class="org-ul">
<li><a href="https://www.sqlite.org/fts5.html">FTS5</a> adds full-text search functionality to a SQLite database
</li>
<li>Great language support
</li>
</ul>
</div>
</li></ol>
</div>
<div id="outline-container-sec-2-4-3" class="outline-4">
<h4 id="sec-2-4-3"><span class="section-number-4">2.4.3</span> Language Candidates</h4>
<div class="outline-text-4" id="text-2-4-3">
<p>
Warning, this section is written with no logic, 100% emotion.
</p>
</div>
<ol class="org-ol"><li><a id="sec-2-4-3-1" name="sec-2-4-3-1"></a><a href="https://elixir-lang.org/">Elixir</a><br ><div class="outline-text-5" id="text-2-4-3-1">
<ul class="org-ul">
<li>Possible, but too much overhead for my use-case
</li>
<li>I don’t want to learn a whole new language for this project
</li>
</ul>
</div>
</li>
<li><a id="sec-2-4-3-2" name="sec-2-4-3-2"></a>Common Lisp (<a href="http://www.sbcl.org/">SBCL</a>)<br ><div class="outline-text-5" id="text-2-4-3-2">
<ul class="org-ul">
<li><code>[X]</code> Mature, the oldest of the bunch
</li>
<li><code>[X]</code> Emacs (see <a href="https://common-lisp.net/project/slime/">SLIME</a> and <a href="https://github.com/joaotavora/sly">SLY</a>)
</li>
<li><code>[X]</code> SQLite (see <a href="https://github.com/TeMPOraL/cl-sqlite">cl-sqlite</a> or <a href="https://github.com/fukamachi/cl-dbi">cl-dbi</a>)
</li>
<li><code>[&#xa0;]</code> Images?
</li>
<li><code>[&#xa0;]</code> Video?
</li>
</ul>
</div>
</li>
<li><a id="sec-2-4-3-3" name="sec-2-4-3-3"></a><a href="https://racket-lang.org/">Racket</a><br ><div class="outline-text-5" id="text-2-4-3-3">
<ul class="org-ul">
<li><code>[X]</code> Mature language (see <a href="https://blog.racket-lang.org/2020/05/racket-is-25.html">Racket is 25</a>)
</li>
<li><code>[X]</code> Focus on functional programming, rather than OO like in Common Lisp
</li>
<li><code>[X]</code> Emacs (see <a href="https://racket-mode.com/">Racket Mode</a>)
</li>
<li><code>[X]</code> SQLite (see <a href="https://docs.racket-lang.org/db/">DB</a>)
</li>
<li><code>[X]</code> Web (see <a href="https://docs.racket-lang.org/web-server/">web-server</a>)
</li>
<li><code>[&#xa0;]</code> Images? (could parse <a href="https://imagemagick.org/script/identify.php">ImageMagick’s identify</a>)
</li>
<li><code>[&#xa0;]</code> Video? (could parse <a href="https://ffmpeg.org/ffprobe.html">FFmpeg’s ffprobe</a>)
</li>
</ul>
</div>
</li>
<li><a id="sec-2-4-3-4" name="sec-2-4-3-4"></a><a href="https://clojure.org/">Clojure</a> (Winner)<br ><div class="outline-text-5" id="text-2-4-3-4">
<ul class="org-ul">
<li><code>[X]</code> Mature language, enterprise backed
</li>
<li><code>[X]</code> <b>Strong</b> focus on FP (all data is immutable by default)
</li>
<li><code>[X]</code> Amazing Emacs support (see <a href="https://github.com/clojure-emacs/cider">CIDER</a>)
</li>
<li><code>[X]</code> SQLite (see <a href="https://github.com/seancorfield/next-jdbc">next.jdbc</a> and <a href="https://github.com/jkk/honeysql">honeysql</a>)
</li>
<li><code>[X]</code> Web (see <a href="https://github.com/weavejester/compojure">Compojure</a> and <a href="https://clojurescript.org/">ClojureScript</a>)
</li>
<li><code>[X]</code> Images and Video (see <a href="https://github.com/michaelklishin/pantomime">Pantomime</a>)
</li>
</ul>
</div>
</li></ol>
</div>
</div>
<div id="outline-container-sec-2-5" class="outline-3">
<h3 id="sec-2-5"><span class="section-number-3">2.5</span> <span class="label label-default DONE">DONE</span> Client (me!)</h3>
<div class="outline-text-3" id="text-2-5">
<ul class="org-ul">
<li>Someone who has a <b>large, unwieldy and unsorted collection of images</b>
</li>
<li>More specifically, someone who <i>wants</i> to sort their collection for ease of use
</li>
<li>A tool to search and tag can really help achieve that goal
</li>
</ul>
</div>
</div>
<div id="outline-container-sec-2-6" class="outline-3">
<h3 id="sec-2-6"><span class="section-number-3">2.6</span> <span class="label label-default DONE">DONE</span> Research Analysis; In Summary</h3>
<div class="outline-text-3" id="text-2-6">
<ul class="org-ul">
<li>Personal imageboard
</li>
<li>*booru style
</li>
<li>Brutalist inspired design
</li>
<li>Clojure programming language
</li>
</ul>
</div>
</div>
</div>
<div id="outline-container-sec-3" class="outline-2">
<h2 id="sec-3"><span class="section-number-2">3</span> <span class="label label-primary TODO">TODO</span> Design</h2>
<div class="outline-text-2" id="text-3">
</div>
<div id="outline-container-sec-3-1" class="outline-3">
<h3 id="sec-3-1"><span class="section-number-3">3.1</span> <span class="label label-default DONE">DONE</span> Design Considerations</h3>
<div class="outline-text-3" id="text-3-1">
<ul class="org-ul">
<li>Highly important: accessibility
<ul class="org-ul">
<li>Legible text
</li>
<li>High contrast
</li>
<li><code>&lt;tab&gt;</code> accessible
</li>
<li>Relevant <code>alt</code> attributes for each image
</li>
</ul>
</li>
<li>Dark theme option
</li>
<li>It should be fast, like <i>really</i> fast
<ul class="org-ul">
<li>Should “feel” snappy and lightweight
</li>
</ul>
</li>
<li>Not the following (overused, ugly, bloated):
<ul class="org-ul">
<li>Material Design
</li>
<li>Twitter Bootstrap
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-sec-3-2" class="outline-3">
<h3 id="sec-3-2"><span class="section-number-3">3.2</span> <span class="label label-default DONE">DONE</span> Design Specification</h3>
<div class="outline-text-3" id="text-3-2">
<ol class="org-ol">
<li><b>Accessible</b>; see above
</li>
<li><b>Tag-based image search</b>; the main feature, no explanation
required
</li>
<li><b>A <i>copy</i> of images should be made into the “database”</b> (images
will probably be in a flat folder, named by hash); allows the
original images to be moved, deleted or renamed without issue
</li>
<li><b>Implemented as a web server</b>; allows for the opportunity to be
hosted and viewed on mobile (without a complete rewrite)
</li>
<li><b>Notes and titles</b>; ability to add searchable titles and notes to
images
</li>
<li><b>Both “behind the scenes” filesystem access and HTTP upload form</b>;
bulk initial import could be done on the backend, while incremental
additions could be uploaded
</li>
<li><b>Duplicate image removal based on hash</b>; would not be super slow
while being immensely helpful for large libraries
</li>
<li><b>Portable to multiple operating systems with a focus on GNU/Linux</b>;
the backend only needs to run on a server or (rarely) the user’s
local machine, and GNU/Linux is the OS of servers (BSD fanboys
please don’t kill me)
</li>
<li><b>Dark/custom theme option</b>; giving users more choice, make it
<a href="https://www.reddit.com/r/unixporn/">riceable</a>
</li>
<li><b>“Stretch goals”</b>
<ul class="org-ul">
<li><a href="https://tesseract-ocr.github.io/">Tesseract OCR</a> integration
</li>
<li>Imageboard (*chan style) thread-watcher
</li>
<li>Geographic map of photographs based on location metadata
</li>
</ul>
</li>
</ol>
</div>
</div>
<div id="outline-container-sec-3-3" class="outline-3">
<h3 id="sec-3-3"><span class="section-number-3">3.3</span> <span class="label label-default DONE">DONE</span> Concept Designs</h3>
<div class="outline-text-3" id="text-3-3">
</div>
<div id="outline-container-sec-3-3-1" class="outline-4">
<h4 id="sec-3-3-1"><span class="section-number-4">3.3.1</span> <span class="label label-default DONE">DONE</span> Base Concept Designs</h4>
<div class="outline-text-4" id="text-3-3-1">
<p>
<img src="images/scan1.png" class="img-responsive" alt="scan1.png">
<img src="images/scan2.png" class="img-responsive" alt="scan2.png">
</p>
</div>
</div>
<div id="outline-container-sec-3-3-2" class="outline-4">
<h4 id="sec-3-3-2"><span class="section-number-4">3.3.2</span> <span class="label label-default DONE">DONE</span> Detailed Concept Design</h4>
<div class="outline-text-4" id="text-3-3-2">
</div>
<ol class="org-ol"><li><a id="sec-3-3-2-1" name="sec-3-3-2-1"></a>Concept 1<br ><div class="outline-text-5" id="text-3-3-2-1">
<p>
With placeholder images
<img src="images/concept1.png" class="img-responsive" alt="concept1.png">
</p>
<p>
With some real images
<img src="images/concept1-with-images.png" class="img-responsive" alt="concept1-with-images.png">
</p>
</div>
</li>
<li><a id="sec-3-3-2-2" name="sec-3-3-2-2"></a>Concept 2<br ><div class="outline-text-5" id="text-3-3-2-2">
<p>
Desktop
<img src="images/concept2.png" class="img-responsive" alt="concept2.png">
</p>
<p>
Mobile
<img src="images/concept2-mobile.png" class="img-responsive" alt="concept2-mobile.png">
</p>
</div>
</li></ol>
</div>
<div id="outline-container-sec-3-3-3" class="outline-4">
<h4 id="sec-3-3-3"><span class="section-number-4">3.3.3</span> <span class="label label-default DONE">DONE</span> Concept Design Evaluation</h4>
<div class="outline-text-4" id="text-3-3-3">
<p>
<b>Which has the best chance of success?</b>
</p>
<p>
The first design is the best one for desktop usage, while the second
is better for mobile browsers. Combining the two with a <code>@media</code> query
is probably the best way to go. The two designs’ html markup is the
same, so only css styles are going to need to change (again, using a
<code>@media</code> query).
</p>
<p>
<b>What problems are there that need to be addressed?</b>
</p>
<ul class="org-ul">
<li>What the default stylesheet looks like (there will be an option for
the user to change themes, see above)
</li>
<li>Settings page (custom themes, image directory, database location)
</li>
<li>Location of other features
<ul class="org-ul">
<li>Notes section will go directly above/below the tags list
</li>
<li>Thread watcher/map can be separate tabs next to or below “Dewey”
</li>
</ul>
</li>
</ul>
<p>
<b>How does they meet the spec?</b>
</p>
<ul class="org-ul">
<li>These designs are just that, designs
</li>
<li>There is no underlying functionality, they do not work at all
</li>
<li>Otherwise, assuming I can get it to work with my prototype, the
design matches the spec
</li>
</ul>
<p>
<b>Personal opinions</b>
</p>
<ul class="org-ul">
<li>Ugh, I hate judging my own work
</li>
<li>The stylesheet is certainly still a work in progress
<ul class="org-ul">
<li>I only whipped the whole design together in about a half an hour
</li>
</ul>
</li>
<li>Seeing an actual design has really gotten into a frenzy about
working on this project
<ul class="org-ul">
<li>I’m really excited to see the final product now!
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="outline-container-sec-3-4" class="outline-3">
<h3 id="sec-3-4"><span class="section-number-3">3.4</span> <span class="label label-primary TODO">TODO</span> Early Prototype</h3>
<div class="outline-text-3" id="text-3-4">
<p>
Here ya go!
</p>
<p>
<img src="images/prototype1.png" class="img-responsive" alt="prototype1.png">
<img src="images/prototype1-import.png" class="img-responsive" alt="prototype1-import.png">
<img src="images/prototype1-bulk.png" class="img-responsive" alt="prototype1-bulk.png">
</p>
</div>
</div>
<div id="outline-container-sec-3-5" class="outline-3">
<h3 id="sec-3-5"><span class="section-number-3">3.5</span> <span class="label label-primary TODO">TODO</span> Potential User Response</h3>
<div class="outline-text-3" id="text-3-5">
</div>
</div>
<div id="outline-container-sec-3-6" class="outline-3">
<h3 id="sec-3-6"><span class="section-number-3">3.6</span> <span class="label label-primary TODO">TODO</span> Evaluation of Design Development</h3>
<div class="outline-text-3" id="text-3-6">
</div>
</div>
<div id="outline-container-sec-3-7" class="outline-3">
<h3 id="sec-3-7"><span class="section-number-3">3.7</span> <span class="label label-primary TODO">TODO</span> Technical Drawings</h3>
<div class="outline-text-3" id="text-3-7">
</div>
</div>
<div id="outline-container-sec-3-8" class="outline-3">
<h3 id="sec-3-8"><span class="section-number-3">3.8</span> <span class="label label-primary TODO">TODO</span> Technical Models</h3>
<div class="outline-text-3" id="text-3-8">
</div>
</div>
</div>
<div id="outline-container-sec-4" class="outline-2">
<h2 id="sec-4"><span class="section-number-2">4</span> Product</h2>
<div class="outline-text-2" id="text-4">
</div><div id="outline-container-sec-4-1" class="outline-3">
<h3 id="sec-4-1"><span class="section-number-3">4.1</span> Completed Product</h3>
</div>
<div id="outline-container-sec-4-2" class="outline-3">
<h3 id="sec-4-2"><span class="section-number-3">4.2</span> Implementation vs Specification Evaluation</h3>
</div>
<div id="outline-container-sec-4-3" class="outline-3">
<h3 id="sec-4-3"><span class="section-number-3">4.3</span> Personal Evaluation</h3>
</div>
<div id="outline-container-sec-4-4" class="outline-3">
<h3 id="sec-4-4"><span class="section-number-3">4.4</span> Testing</h3>
</div>
<div id="outline-container-sec-4-5" class="outline-3">
<h3 id="sec-4-5"><span class="section-number-3">4.5</span> Customer Views</h3>
</div>
<div id="outline-container-sec-4-6" class="outline-3">
<h3 id="sec-4-6"><span class="section-number-3">4.6</span> Industrial Production</h3>
</div>
<div id="outline-container-sec-4-7" class="outline-3">
<h3 id="sec-4-7"><span class="section-number-3">4.7</span> Summary of Findings</h3>
</div>
<div id="outline-container-sec-4-8" class="outline-3">
<h3 id="sec-4-8"><span class="section-number-3">4.8</span> Modifications to the Product</h3>
</div>
</div>
<div id="outline-container-sec-5" class="outline-2">
<h2 id="sec-5"><span class="section-number-2">5</span> Bibliography</h2>
</div>
<div id="footnotes">
<h2 class="footnotes">Footnotes: </h2>
<div id="text-footnotes">
<div class="footdef"><sup><a id="fn.1" name="fn.1" class="footnum" href="#fnr.1">1</a></sup> <p class="footpara">
Fun fact: <a href="https://en.wikipedia.org/wiki/List_of_emoticons#2channel_emoticons">emoticons</a> trace their roots through these textboards
</p></div>
<div class="footdef"><sup><a id="fn.2" name="fn.2" class="footnum" href="#fnr.2">2</a></sup> <p class="footpara">
In decreasing levels of cultural significance
</p></div>
<div class="footdef"><sup><a id="fn.3" name="fn.3" class="footnum" href="#fnr.3">3</a></sup> <p class="footpara">
Through an infinite scrolling mechanic
</p></div>
</div>
</div></div></div></div>
<footer id="postamble" class="">
<div><p class="author">Author: Charlie Ritter</p>
<p class="date">Created: 2020-06-02 Tue 20:36</p>
<p class="creator"><a href="http://www.gnu.org/software/emacs/">Emacs</a> 26.3 (<a href="http://orgmode.org">Org-mode</a> 9.3.6)</p>
</div>
</footer>
</body>
</html>