keyboard-presentation

<!doctype html>
<html>
  <head>
    <title>-</title>
    <meta charset="utf-8">
  </head>
  <body>
    <section class="slide" id="initialize">
        <p>
            This is a presentation I made a while ago to talk about keyboard
            ergonomics and to share an approach I used to create a keyboard
            designed for 3D-printing by using laser-cut acrylic.
        </p>
        <p>Loading content...</p>
    </section>
    <section class="slide" id="intro" data-slide="intro">
        <!-- <div class="fragment" data-step="0"></div> -->
        <!-- <div class="fragment" data-step="1"></div> -->
        <p class="caption">
            Here's that keyboard. This probably looks weird to you so the next
            few slides will explain why familiar isn't always good.
        </p>
    </section>
    <section class="slide" id="classic" data-keyboard-layout="classic" data-slide="classic">
        <h2 class="fragment">Classic</h2>
        <ul class="fragment">
            <li>Bulky</li>
            <li>Asymmetric nonsense</li>
            <li>Right hand pinky torture</li>
        </ul>
        <p class="caption">
            Staggered rows of keys were necessary in typewriters due to their
            mechanical arms but that restriction doesn't exist with computer
            keyboards.
        </p>
    </section>
    <section class="slide" id="apple" data-keyboard-layout="apple">
        <h2 class="fragment">Apple</h2>
        <ul class="fragment">
            <li>Compact<em>ish</em></li>
            <li>Same non-ergonomic layout</li>
        </ul>
        <p class="caption">
            Hold two keys on your keyboard to display their distance on screen.
            Some keys (like "6") are meant to be pressed by the right index
            finger even though you can reach it more easily with the left.
        </p>
    </section>
    <section class="slide" id="split" data-keyboard-layout="split">
        <h2 class="fragment">Split</h2>
        <ul class="fragment">
            <li>Layout is still bad</li>
            <li>Angle avoids ulnar deviation</li>
            <li>Can avoid pronation by tenting</li>
        </ul>
        <p class="caption">
            Split keyboards solve a lot of problems and are available from many
            vendors but all too often they still use staggered rows.
        </p>
    </section>
    <section class="slide" id="ergodox" data-keyboard-layout="ergodox">
        <h2 class="fragment">Ergodox</h2>
        <ul class="fragment">
            <li>Thumb powers, activate</li>
            <li>
                Staggered column layout
                <ul>
                    <li>Less reaching for shorter fingers</li>
                    <li>Less lateral finger movement</li>
                </ul>
            </li>
        </ul>
        <p class="caption">
            Here's an example of staggered columns that better match differing
            finger lengths, and thumb clusters to alleviate the stress put on
            weaker pinky fingers.
        </p>
    </section>
    <section class="slide" id="dactyl" data-keyboard-layout="dactyl">
        <h2 class="fragment">Dactyl</h2>
        <ul class="fragment">
            <li>What if keyboards, but 3D?</li>
            <li>Curved rows to avoid pronation</li>
            <li>Curved columns to avoid stretching</li>
        </ul>
        <p class="caption">
            The Dactyl is an open-source 3D printable keyboard that was the
            basis for this project.
        </p>
    </section>
    <section class="slide" id="supports" data-slide="supports">
        <div class="fragment"></div>
        <div class="fragment"></div>
        <div class="fragment"></div>
        <div class="fragment"></div>
        <p class="caption">
            A collection of 2D pieces I had designed to be laser cut from
            acrylic and slot together to form the structure of the keyboard.
        </p>
    </section>
    <section class="slide" data-slide="outro">
        <h1>Fin.</h1>
        <p class="caption">
            Demonstrating personal projects like this is an important way for me
            to share a little of myself with big groups (like my co-workers).
            Usually this sharing happens at the end of the project, but in this
            case it was before I could even test the laser-cutting so there was
            an extra feeling of vulerability. Also this background animation was
            a lot of fun to make.
        </p>
    </section>
    <div id="app"></div>
    <div id="slideshow-progress"><div id="meter"></div></div>
  </body>
</html>