Added information to the FSF introduction: a paragraph from fsf.org/about, form to...
authorAna Isabel Carvalho <ana.isabelc@gmail.com>
Tue, 3 Jun 2014 12:19:40 +0000 (13:19 +0100)
committerAna Isabel Carvalho <ana.isabelc@gmail.com>
Tue, 3 Jun 2014 12:19:40 +0000 (13:19 +0100)
index.html

index ccb80e2eca4735bdb9530c40e41d74cb16681575..bcb883e802a6c266a4ff063859201d6b35884e02 100644 (file)
                        </div>
                </nav>
 
-<!-- ~~~~~~~~~ FSF Introduction ~~~~~~~~~ -->
-               <section class="row" id="fsf-intro">
-                       <div>
-                               <h3><a href="http://www.fsf.org/"><img alt="Free Software Foundation" src="static/img/fsf-logo.png"></a></h3>
-                               <p><a href="http://fsf.org/jfb"><img alt="Join now" src="static/img/join.en.png"></a></p>
-                       </div>
-               </section><!-- End #fsf-intro -->
-
 <!-- ~~~~~~~~~ GnuPG Header and introduction text  ~~~~~~~~~ -->
 <!-- ~~~~~~~~~  Revision as of 18:53, 1 June 2014 by Zakkai ~~~~~~~~~ -->
                <header class="row"  id="header">
                        <div>
-                               <a href="#">
-                                       <h1>Email Self-Defense</h1>
-                               </a>
+                               <h1><a href="#">Email Self-Defense</a></h1>
                                <div class="intro">
-                                       <div>
-                                               <p class="sidebar"><img src="static/img/email-intro01.png" alt="Email illustration" /></p>
-                                               <p class="main">The goal of this guide is to make it easy to set up email encryption on your computer. Once you've finished the guide, you'll be able to send and receive emails that are coded to make sure that a surveillance agent or thief can't intercept your email and read it. </p>
-                                       </div>
-                                       <div>
-                                               <p class="sidebar"><img src="static/img/email-intro02.png" alt="Email illustration" /></p>
-                                               <p class="main">This isn't something you'd do with every email, or even every day. Rather, it's a tool to have handy when you need to send something sensitive.</p>
-                                       </div>
-                                       <div>
-                                               <p class="sidebar"><img src="static/img/email-intro03.png" alt="Email illustration" /></p>
-                                               <p class="main">You'll also be able to sign emails to show reliably that they are from you. Though the need for signing may be less obvious, you'll actually do it more often.</p>
-                                       </div>
-                                               <p>All you need is a computer with GNU/Linux or Windows and an Internet connection. You can use your existing email account for this without affecting it.</p> 
+                                       <p>The goal of this guide is to make it easy to set up email encryption on your computer. Once you've finished the guide, you'll be able to send and receive emails that are coded to make sure that a surveillance agent or thief can't intercept your email and read it. </p>
+                                       <p>This isn't something you'd do with every email, or even every day. Rather, it's a tool to have handy when you need to send something sensitive.</p>
+                                       <p>You'll also be able to sign emails to show reliably that they are from you. Though the need for signing may be less obvious, you'll actually do it more often.</p>
+                                       <p>All you need is a computer with GNU/Linux or Windows and an Internet connection. You can use your existing email account for this without affecting it.</p> 
                                </div>
+                               <!-- ~~~~~~~~~ FSF Introduction ~~~~~~~~~ -->
+                               <div id="fsf-intro">
+                                       <h3><a href="http://www.fsf.org/"><img alt="Free Software Foundation" src="static/img/fsf-logo.png"></a></h3>
+                                       <p>The Free Software Foundation is working to secure freedom for computer
+                                       users by promoting the development and use of free (as in freedom) software and documentation &mdash; particularly the <a href="http://gnu.org">GNU operating system</a> &mdash; and by <a href="/campaigns">campaigning</a> against threats to computer user freedom like Digital Restrictions Management (DRM) and software patents.</p>
+                                       <p><a href="http://fsf.org/jfb"><img alt="Join now" src="static/img/join.en.png"></a></p>
+                                       <div class="newsletter">
+                                               <h5>Sign up</h5>
+                                               <p>Enter your email address to receive our monthly newsletter, the <a href="https://www.fsf.org/free-software-supporter/">Free Software Supporter</a></p>
+                                               <form method="post" action="https://crm.fsf.org/civicrm/profile/create&amp;reset=1&amp;gid=31">
+                                                       <input type="text" placeholder="Type your email..." name="email-Primary" id="frmEmail"><input type="submit" value="Subscribe me" name="_qf_Edit_next">
+                                                       <div>
+                                                               <input type="hidden" value="" name="postURL"><input type="hidden" value="1" name="group[25]"><input type="hidden" value="https://crm.fsf.org/civicrm/profile?reset=1&amp;gid=31" name="cancelURL"><input type="hidden" value="Edit:cancel" name="_qf_default">
+                                                       </div>
+                                               </form>
+                                       </div><!-- End .newsletter -->
+                               </div><!-- End #fsf-intro -->
+
                        </div>
                </header><!-- End #header -->
 
 <!-- ~~~~~~~~~ Section 1: Get the pieces  ~~~~~~~~~ -->
                <section class="row" id="section1">
                        <div>
-                               <!-- ~~~~~~~~~ section title + graphics  ~~~~~~~~~ -->
-                               <div class="sidebar">
-                                       <h2><em>#1</em> Get the pieces</h2>
-                               </div><!-- /.sidebar -->
-
-                               <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
-                               <div class="main section-intro">
-                                       <p>Before starting, you'll need any one of these desktop email programs installed on your computer: <a href="http://www.fossamail.org">FossaMail</a> (for Windows), <a href="http://directory.fsf.org/wiki/Icedove">Icedove</a> (for Debian GNU/Linux), <a href="http://www.mozilla.org/en-US/thunderbird/">Thunderbird</a> (for other GNU/Linux flavors, Apple OS X), or any other program based on one of these. If you are already using one of these, you can skip to <a href="#step-1b">Step 1.b</a>.</p>
-                                       <p>An email program lets you read and write mail without using a Web browser, and provides special features that are hard to find in email systems you use in a Web browser. Using an email program doesn't mean that you have to make a new email account &mdash; most people just connect an existing email account from a Web email service (like GMail) or their workplace to their email program. You can think of it as another way to access the same email account.</p>
-                               </div><!-- End .section-intro /.main -->
-                       </div>
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
+                                               <h2><em>#1</em> Get the pieces</h2>
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+                                               <p>Before starting, you'll need any one of these desktop email programs installed on your computer: <a href="http://www.fossamail.org">FossaMail</a> (for Windows), <a href="http://directory.fsf.org/wiki/Icedove">Icedove</a> (for Debian GNU/Linux), <a href="http://www.mozilla.org/en-US/thunderbird/">Thunderbird</a> (for other GNU/Linux flavors, Apple OS X), or any other program based on one of these. If you are already using one of these, you can skip to <a href="#step-1b">Step 1.b</a>.</p>
+                                               <p>An email program lets you read and write mail without using a Web browser, and provides special features that are hard to find in email systems you use in a Web browser. Using an email program doesn't mean that you have to make a new email account &mdash; most people just connect an existing email account from a Web email service (like GMail) or their workplace to their email program. You can think of it as another way to access the same email account.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-
-                               <div id="step-1a">
+                               <div id="step-1a" class="step">
                                        <div class="sidebar">
                                                <p><img src="static/img/screenshots/step1a-install-wizard.png" alt="Step 1.A: Install Wizard" /></p>
                                        </div><!-- /.sidebar -->
-                                       <div class="main step">
+                                       <div class="main">
                                                <h3><em>Step 1.a</em> Set your email program up with your email account (if it isn't already)</h3>
                                                <p>Open your email program and follow the wizard that sets it up with your email account.</p>
                                        
                                                        </dl>
                                                </div><!-- /.troubleshooting -->
 
-                                       </div><!-- /.main -->
-                               </div><!-- End #step1-a /.main -->
+                                       </div><!-- End .main -->
+                               </div><!-- End #step1-a .step -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-1b">
-                                       <h3><em>Step 1.b</em> If you are using Windows, download gpg4Win</h3>
-                                       <p><a rel="external" href="http://gpg4win.org/">Download it</a>, run the executable and click through the installation wizard with all the default settings. You don't need to run the program once it's installed.</p>
-                               </div><!-- End #step1b /.main -->
 
-                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-1c">
-                                       <h3><em>Step 1.c</em> Install the Enigmail plugin for your email program</h3>
-                                       <p>In your email program's menu, select Add-ons (it may be in the Tools section). Make sure Extensions is selected on the left. Do you see Enigmail? if so, skip this step.</p>
-                                       <p>If not, search "Enigmail" with the search bar in the upper right. You can take it from here. Restart your email program when you're done.</p>
+                               <div id="step-1b" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 1.b</em> If you are using Windows, download gpg4Win</h3>
+                                               <p><a rel="external" href="http://gpg4win.org/">Download it</a>, run the executable and click through the installation wizard with all the default settings. You don't need to run the program once it's installed.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step1b .step -->
 
-                                       <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
-                                       <div class="troubleshooting">
-                                               <h4>Troubleshooting</h4>
-                                               <dl>
-                                                       <dt>I can't find the menu?</dt>
-                                                       <dd>In many new email programs, it's represented by an image of three stacked horizontal bars.</dd>
-                                               </dl>
-                                       </div><!-- /.troubleshooting -->
-
-                               </div><!-- End #step-1c /.main -->
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+                               <div id="step-1c" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 1.c</em> Install the Enigmail plugin for your email program</h3>
+                                               <p>In your email program's menu, select Add-ons (it may be in the Tools section). Make sure Extensions is selected on the left. Do you see Enigmail? if so, skip this step.</p>
+                                               <p>If not, search "Enigmail" with the search bar in the upper right. You can take it from here. Restart your email program when you're done.</p>
+                                               <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
+                                               <div class="troubleshooting">
+                                                       <h4>Troubleshooting</h4>
+                                                       <dl>
+                                                               <dt>I can't find the menu?</dt>
+                                                               <dd>In many new email programs, it's represented by an image of three stacked horizontal bars.</dd>
+                                                       </dl>
+                                               </div><!-- /.troubleshooting -->
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-1c .step -->
                        </div>
                </section><!-- End #section1 -->
 
 <!-- ~~~~~~~~~ Section 2: Make your keys  ~~~~~~~~~ -->
                <section class="row" id="section2">
                        <div>
-                               <!-- ~~~~~~~~~ section title + graphics  ~~~~~~~~~ -->
-                               <div class="sidebar">
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
                                        <h2><em>#2</em> Make your keys</h2>
-                               </div><!-- /.sidebar -->
-
-                               <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
-                               <div class="main section-intro">
-                                       <p>To use the GnuPG system, you'll need a public key and a private key (known together as a keypair). Each is a long string of randomly generated numbers that are unique to you. Your public and private keys are linked together by a special mathematical function.</p>
-                               </div><!-- End .section-intro /.main -->
-
-                               <div class="sidebar">
-                                       <p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
-                               </div><!-- /.sidebar -->
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+                                               <p>To use the GnuPG system, you'll need a public key and a private key (known together as a keypair). Each is a long string of randomly generated numbers that are unique to you. Your public and private keys are linked together by a special mathematical function.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-2a">
-                                       <h3><em>Step 2.a</em> Make a keypair</h3>
-                                       <p>In your email program's menu, select OpenPGP -> Setup Wizard. You don't need to read the text in the window that pops up unless you'd like to, but it's good to read the text on the later screens of the wizard.</p>
-                                       <p>On the second screen, titled "Signing," select "No, I want to create per-recipient rules for emails that need to be signed."</p>
-                                       <p>Use the default options until you reach the screen titled "Create Key".</p>
-                                       <p>On the screen titled "Create Key," pick a strong password! Your password should be at least 8 characters and include at least one lower case and upper case letter and at least one punctuation mark. Don't forget it, or all this work will be wasted!</p>
-                       <p>The program will take a little while to finish the next step, the "Key Creation" screen. While you wait, do something else with your computer, like watching a movie or browsing the Web. The more you use the computer at this point, the faster the key creation will go.</p>
-                                       <p>When the OpenPGP Confirm screen pops up, select Generate Certificate and choose to save it in a safe place on your computer (we recommend making a folder called "Revocation Certificate" in your home folder and keeping it there. You'll learn more about the revocation certificate in Section 5. The setup wizard will ask you to move it onto an external device, but that isn't necessary at this moment.</p>
-
-                                       <p class="highlight">After creating your key, the Enigmail set-up wizard automatically uploaded it to a keyserver, an online computer that makes everyone's keys available through the Internet.</p>
-
-                                       <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
-                                       <div class="troubleshooting">
-                                               <h4>Troubleshooting</h4>
-                                               <dl>
-                                                       <dt>Enigmail detected an existing key on my computer?</dt>
-                                                               <dd>Answer coming soon.</dd>
-                                                       <dt>I can't find the OpenPGP menu?</dt>
-                                                               <dd>In many new email programs, it's represented by an image of three stacked horizontal bars.</dd>
-                                               </dl>
-                                       </div><!-- /.troubleshooting -->
+                               <div id="step-2a" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="static/img/placeholders/placeholder.png" alt="Placeholder" /></p>
+                                       </div><!-- /.sidebar -->
+                                       <div class="main">
+                                               <h3><em>Step 2.a</em> Make a keypair</h3>
+                                               <p>In your email program's menu, select OpenPGP -> Setup Wizard. You don't need to read the text in the window that pops up unless you'd like to, but it's good to read the text on the later screens of the wizard.</p>
+                                               <p>On the second screen, titled "Signing," select "No, I want to create per-recipient rules for emails that need to be signed."</p>
+                                               <p>Use the default options until you reach the screen titled "Create Key".</p>
+                                               <p>On the screen titled "Create Key," pick a strong password! Your password should be at least 8 characters and include at least one lower case and upper case letter and at least one punctuation mark. Don't forget it, or all this work will be wasted!</p>
+                                       <p>The program will take a little while to finish the next step, the "Key Creation" screen. While you wait, do something else with your computer, like watching a movie or browsing the Web. The more you use the computer at this point, the faster the key creation will go.</p>
+                                               <p>When the OpenPGP Confirm screen pops up, select Generate Certificate and choose to save it in a safe place on your computer (we recommend making a folder called "Revocation Certificate" in your home folder and keeping it there. You'll learn more about the revocation certificate in Section 5. The setup wizard will ask you to move it onto an external device, but that isn't necessary at this moment.</p>
+                                               <p class="highlight">After creating your key, the Enigmail set-up wizard automatically uploaded it to a keyserver, an online computer that makes everyone's keys available through the Internet.</p>
 
-                               </div><!-- End #step-2a /.main -->
+                                               <!-- ~~~~~~~~~ Troubleshooting  ~~~~~~~~~ -->
+                                               <div class="troubleshooting">
+                                                       <h4>Troubleshooting</h4>
+                                                       <dl>
+                                                               <dt>Enigmail detected an existing key on my computer?</dt>
+                                                                       <dd>Answer coming soon.</dd>
+                                                               <dt>I can't find the OpenPGP menu?</dt>
+                                                                       <dd>In many new email programs, it's represented by an image of three stacked horizontal bars.</dd>
+                                                       </dl>
+                                               </div><!-- /.troubleshooting -->
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-2a .step  -->
                        </div>
                </section><!-- End #section2 -->
 
 <!-- ~~~~~~~~~ Section 3: Try it out  ~~~~~~~~~ -->
                <section class="row" id="section3">
                        <div>
-                               <!-- ~~~~~~~~~ section title + graphics  ~~~~~~~~~ -->
-                               <div class="sidebar">
-                                       <h2><em>#3</em> Try it out!</h2>
-                               </div><!-- /.sidebar -->
-
-                               <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
-                               <div class="main section-intro">
-                                       <p>Now you'll try a test correspondence with a computer program named Adele, which knows how to use encryption. You'd follow the same steps if communicating with a real person. Then you'll send your first signed email to a real person!</p>
-                               </div><!-- End .section-intro /.main -->
-
-                               <div class="sidebar">
-                                       <p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
-                               </div><!-- /.sidebar -->
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
+                                               <h2><em>#3</em> Try it out!</h2>
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+                                               <p>Now you'll try a test correspondence with a computer program named Adele, which knows how to use encryption. You'd follow the same steps if communicating with a real person. Then you'll send your first signed email to a real person!</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-3a">
-                                       <h3><em>Step 3.a</em> Download Adele's public key from a keyserver</h3>
-                                       <p>In your email program's menu, go to OpenPGP -> Key Management -> Keyserver -> Search for Keys.</p>
-                                       <p>In the "Search for keys" field, type adele-en@gnupp.de. That's Adele's email address.</p>
-                                       <p>Check the first result (Key ID starting with 9) and hit OK.</p>
-                               </div><!-- End #step-3a /.main -->
+                               <div id="step-3a" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="static/img/placeholders/placeholder.png" alt="Placeholder" /></p>
+                                       </div><!-- /.sidebar -->
+                                       <div class="main">
+                                               <h3><em>Step 3.a</em> Download Adele's public key from a keyserver</h3>
+                                               <p>In your email program's menu, go to OpenPGP -> Key Management -> Keyserver -> Search for Keys.</p>
+                                               <p>In the "Search for keys" field, type adele-en@gnupp.de. That's Adele's email address.</p>
+                                               <p>Check the first result (Key ID starting with 9) and hit OK.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-3a .step -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-3b">
-                                       <h3><em>Step 3.b</em> Send a test encrypted email</h3>
-                                       <p>Write a new email in your email program, addressed to adele-en@gnupp.de. Make the subject "Encryption test" or something similar and write something in the body.</p>
-                                       <p>Before sending the email, click the icon of the key in the bottom right of the composition window (it should turn yellow). This tells Enigmail to encrypt the email with the key you downloaded in the last step.</p>
-                                       <p>When Adele receives your email, she will use her private key to decrypt it, then fetch your public key from a keyserver and use it to encrypt a response to you.</p>
-
-                                       <p class="highlight">Since you encrypted this email with Adele's public key, Adele's private key is required to decrypt it. Adele is the only one with her private key, so no one except her &mdash; not even you &mdash; can decrypt it.</p>
-
-                                       <p>It may take two or three minutes for Adele to respond. In the meantime, you might want to skip ahead and check out the Use it well section of this guide.</p>
-                                       <p>When you receive Adele's email and open it, Enigmail will automatically detect that it is encrypted with your public key, and then it will use your private key to decrypt it.</p>
-
-                                       <p class="highlight">Notice the bar that Enigmail shows you with information about the status of Adele's key.</p>
-                               </div><!-- End #step-3b /.main -->
+                               <div id="step-3b" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 3.b</em> Send a test encrypted email</h3>
+                                               <p>Write a new email in your email program, addressed to adele-en@gnupp.de. Make the subject "Encryption test" or something similar and write something in the body.</p>
+                                               <p>Before sending the email, click the icon of the key in the bottom right of the composition window (it should turn yellow). This tells Enigmail to encrypt the email with the key you downloaded in the last step.</p>
+                                               <p>When Adele receives your email, she will use her private key to decrypt it, then fetch your public key from a keyserver and use it to encrypt a response to you.</p>
+                                               <p class="highlight">Since you encrypted this email with Adele's public key, Adele's private key is required to decrypt it. Adele is the only one with her private key, so no one except her &mdash; not even you &mdash; can decrypt it.</p>
+                                               <p>It may take two or three minutes for Adele to respond. In the meantime, you might want to skip ahead and check out the Use it well section of this guide.</p>
+                                               <p>When you receive Adele's email and open it, Enigmail will automatically detect that it is encrypted with your public key, and then it will use your private key to decrypt it.</p>
+                                               <p class="highlight">Notice the bar that Enigmail shows you with information about the status of Adele's key.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-3b .step -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-3c">
-                                       <h3><em>Step 3.c</em> Send a test signed email to a friend</h3>
-                                       <p>Write a new email in your email program, addressed to a friend. If you want, tell them about this guide!</p>
-                                       <p>Before sending the email, click the icon of the pencil in the bottom right of the composition window (it should turn yellow). This tells Enigmail to sign the email with you private key.</p>
-                                       <p>After you click send, Enigmail will ask you for your password. It will do this any time it needs to use your public key.</p>
-                               </div><!-- End #step-3c /.main -->
+                               <div id="step-3c" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 3.c</em> Send a test signed email to a friend</h3>
+                                               <p>Write a new email in your email program, addressed to a friend. If you want, tell them about this guide!</p>
+                                               <p>Before sending the email, click the icon of the pencil in the bottom right of the composition window (it should turn yellow). This tells Enigmail to sign the email with you private key.</p>
+                                               <p>After you click send, Enigmail will ask you for your password. It will do this any time it needs to use your public key.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-3c .step -->
                        </div>
                </section><!-- End #section3 -->
 
 <!-- ~~~~~~~~~ Section 4: Learn the Web of Trust  ~~~~~~~~~ -->
                <section class="row" id="section4">
                        <div>
-                               <!-- ~~~~~~~~~ section title + graphics  ~~~~~~~~~ -->
-                               <div class="sidebar">
-                                       <h2><em>#4</em> Learn the Web of Trust</h2>
-                               </div><!-- /.sidebar -->
-
-                               <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
-                               <div class="main section-intro">
-                                       <p>Email encryption is a powerful technology, but it has a weakness; it requires a way to verify that a person's keypair is actually theirs. Otherwise, there would be no way to stop an attacker from making an email address with your friends name, creating a keypair to go with it and impersonating your friend. They would then be able to impersonate your friend by signing messages with the private key they'd created, and decrypt messages intended for your friend with the public key.</p>
-                                       <p>That's why the programmers that developed email encryption created keysigning and the Web of Trust. Keysigning allows a person to publicly state that they trust that a public key belongs to a specific person. To sign someone's public key, you need to use your private key, so the world will know that it was you.</p>
-                               </div><!-- End .section-intro /.main -->
-
-                               <div class="sidebar">
-                                       <p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
-                               </div><!-- /.sidebar -->
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
+                                               <h2><em>#4</em> Learn the Web of Trust</h2>
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+                                               <p>Email encryption is a powerful technology, but it has a weakness; it requires a way to verify that a person's keypair is actually theirs. Otherwise, there would be no way to stop an attacker from making an email address with your friends name, creating a keypair to go with it and impersonating your friend. They would then be able to impersonate your friend by signing messages with the private key they'd created, and decrypt messages intended for your friend with the public key.</p>
+                                               <p>That's why the programmers that developed email encryption created keysigning and the Web of Trust. Keysigning allows a person to publicly state that they trust that a public key belongs to a specific person. To sign someone's public key, you need to use your private key, so the world will know that it was you.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-4a">
-                                       <h3><em>Step 4.a</em> Sign a key</h3>
-                                       <p>In your email program's menu, go to OpenPGP -> Key Management.</p>
-                                       <p>Right click on Adele's public key and select Sign Key from the context menu.</p>
-                                       <p>In the window that pops up, select "I will not answer" and click OK.</p>
-                                       <p>In your email program's menu, go to OpenPGP -> Key Management -> Keyserver -> Upload Public Keys and hit OK.</p>
-
-                                       <p class="highlight">You've just effectively said "I trust that Adele's public key actually belongs to Adele." This doesn't mean much because Adele isn't a real person. Before signing a real person's key, always make sure it actually belongs to them, and answer honestly in the window that pops up and asks "How carefully have you verified that the key you are about to sign actually belongs to the person(s) named above?".</p>
-                                       <p class="highlight">It's important to take keysigning seriously because it will affect people beyond just you and the person who's key you are signing. If someone doubts that a key actually belongs to the person that is says it does, they can go on a keyserver and see the number of signatures that it has. The more it has, the more they are likely to trust it.</p>
-                                       <p class="highlight">The Web of Trust takes this concept to the next level. It is a network of key signatures that is saved in keyservers on the Internet. It builds chains of trust between individuals that do not know each other by passing through others, a bit like the famous <a href="http://en.wikipedia.org/wiki/Six_degrees_of_separation">"six degrees of separation" game</a>. You don't need to understand it in detail to use email encryption, but it will become a powerful tool if you become an advanced user.</p>
-                               </div><!-- End #step-4a /.main -->
+                               <div id="step-4a" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="static/img/placeholders/placeholder.png" alt="Placeholder" /></p>
+                                       </div><!-- /.sidebar -->
+                                       <div class="main">
+                                               <h3><em>Step 4.a</em> Sign a key</h3>
+                                               <p>In your email program's menu, go to OpenPGP -> Key Management.</p>
+                                               <p>Right click on Adele's public key and select Sign Key from the context menu.</p>
+                                               <p>In the window that pops up, select "I will not answer" and click OK.</p>
+                                               <p>In your email program's menu, go to OpenPGP -> Key Management -> Keyserver -> Upload Public Keys and hit OK.</p>
+                                               <p class="highlight">You've just effectively said "I trust that Adele's public key actually belongs to Adele." This doesn't mean much because Adele isn't a real person. Before signing a real person's key, always make sure it actually belongs to them, and answer honestly in the window that pops up and asks "How carefully have you verified that the key you are about to sign actually belongs to the person(s) named above?".</p>
+                                               <p class="highlight">It's important to take keysigning seriously because it will affect people beyond just you and the person who's key you are signing. If someone doubts that a key actually belongs to the person that is says it does, they can go on a keyserver and see the number of signatures that it has. The more it has, the more they are likely to trust it.</p>
+                                               <p class="highlight">The Web of Trust takes this concept to the next level. It is a network of key signatures that is saved in keyservers on the Internet. It builds chains of trust between individuals that do not know each other by passing through others, a bit like the famous <a href="http://en.wikipedia.org/wiki/Six_degrees_of_separation">"six degrees of separation" game</a>. You don't need to understand it in detail to use email encryption, but it will become a powerful tool if you become an advanced user.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-4a .step -->
                        </div>
                </section><!-- End #section4 -->
 
 <!-- ~~~~~~~~~ Section 5: Use it well  ~~~~~~~~~ -->
                <section class="row section5">
                        <div>
-                               <!-- ~~~~~~~~~ section title + graphics  ~~~~~~~~~ -->
-                               <div class="sidebar">
-                                       <h2><em>#5</em> Use it well</h2>
-                                       <p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
-                               </div><!-- /.sidebar -->
-
-                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-5a">
-                                       <h3><em>Step 5a</em> When should I encrypt? When should I sign?</h3>
-                                       <p>Everyone uses GnuPG a little differently. Encryption is most important for messages involving finances, personal information, politically sensitive conversations and anything else that you wouldn't want to fall into the wrong hands. Signing is best for when you think there might be concern about your identity, or as a way of demonstrating that you know how to use GnuPG and will be able to decrypt emails. If you're already encrypting, there's no reason not to sign as well, to give the recipient added assurance that the message is from you.</p>
-                                       <p>If you're using your email program (or wherever you have GnuPG set up) often, we recommend that you sign all outgoing messages because it turns you into an ambassador for GnuPG. Anyone can read a signed email, so it doesn't matter if the recipient doesn't yet know how to use email encryption. The more you encrypt the better, but you won't be able to do so unless the recipient has a public key. However, if you've set it up for an email program on your computer, but you primarily use email through your phone, then you'll only want to fire up the email program and use GnuPG for special occasions. If this describes you, we recommend you use </p>
-                               </div><!-- End #step-5a/.main -->
-
-                               <div class="main step" id="step-5b">
-                                       <h3><em>Step 5b</em> Be wary of invalid keys</h3>
-                                       <p>Coming soon</p>
-                               </div><!-- End #step-5b /.main -->
+                               <!-- ~~~~~~~~~ section title + graphics + intro ~~~~~~~~~ -->
+                               <div class="section-intro">
+                                       <div class="sidebar">
+                                               <h2><em>#5</em> Use it well</h2>
+                                       </div><!-- /.sidebar -->
+                                       <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
+                                       <div class="main">
+                                               <p>...</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End .section-intro -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step" id="step-5c">
-                                       <h3><em>Step 5c</em> Make it part of your online identity</h3>
-                                       <p>Start writing your key ID anywhere someone would see your email address. Add it to your email signature, social media profile, blog, Website, or business card.</p>
-                               </div><!-- End #step-5c /.main -->
+                               <div id="step-5a" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 5a</em> When should I encrypt? When should I sign?</h3>
+                                               <p>Everyone uses GnuPG a little differently. Encryption is most important for messages involving finances, personal information, politically sensitive conversations and anything else that you wouldn't want to fall into the wrong hands. Signing is best for when you think there might be concern about your identity, or as a way of demonstrating that you know how to use GnuPG and will be able to decrypt emails. If you're already encrypting, there's no reason not to sign as well, to give the recipient added assurance that the message is from you.</p>
+                                               <p>If you're using your email program (or wherever you have GnuPG set up) often, we recommend that you sign all outgoing messages because it turns you into an ambassador for GnuPG. Anyone can read a signed email, so it doesn't matter if the recipient doesn't yet know how to use email encryption. The more you encrypt the better, but you won't be able to do so unless the recipient has a public key. However, if you've set it up for an email program on your computer, but you primarily use email through your phone, then you'll only want to fire up the email program and use GnuPG for special occasions. If this describes you, we recommend you use </p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-5a .step -->
+
+                               <div id="step-5b" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 5b</em> Be wary of invalid keys</h3>
+                                               <p>Coming soon</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-5b .step -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
-                               <div class="main step highlight">
-                                       <h3>Important: act swiftly if you lose your key</h3>
-                                       <p>If you lose your private key or someone else gets ahold of it (say, by stealing your computer), it's important to revoke it immediately before someone else uses it to steal your identity. This guide doesn't cover how to revoke a key, but it only takes a minute. We recommend you Google it or seek help from a skilled friend. After you're done revoking, send an email to everyone with whom you usually use your key to make sure they know.</p>
-                               </div><!-- End .step /.main -->
+                               <div id="step-5c" class="step">
+                                       <div class="main">
+                                               <h3><em>Step 5c</em> Make it part of your online identity</h3>
+                                               <p>Start writing your key ID anywhere someone would see your email address. Add it to your email signature, social media profile, blog, Website, or business card.</p>
+                                       <!-- ~~~~~~~~~ highlight  ~~~~~~~~~ -->
+                                       <div class="highlight">
+                                               <h3>Important: act swiftly if you lose your key</h3>
+                                               <p>If you lose your private key or someone else gets ahold of it (say, by stealing your computer), it's important to revoke it immediately before someone else uses it to steal your identity. This guide doesn't cover how to revoke a key, but it only takes a minute. We recommend you Google it or seek help from a skilled friend. After you're done revoking, send an email to everyone with whom you usually use your key to make sure they know.</p>
+                                       </div><!-- End .highlight -->
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-5c .step-->
                        </div>
                </section><!-- End #section5 -->
 
                                <!-- ~~~~~~~~~ section title + graphics  ~~~~~~~~~ -->
                                <div class="sidebar">
                                        <h2><em>#6</em> Next steps</h2>
-                                       <p><img src="static/img/placeholder.png" alt="Placeholder" /></p>
+                                       <p><img src="static/img/placeholders/placeholder.png" alt="Placeholder" /></p>
                                </div><!-- /.sidebar -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                        <div>
                                <div id="copyright">
                                        <h4><a href="http://www.fsf.org/"><img alt="Free Software Foundation" src="static/img/fsf-logo.png"></a></h4>
-                                       <p>Copyright &copy; 2004 <a title="Find out how to contact us" href="/about/contact.html">Free Software Foundation</a>, Inc. <a href="https://my.fsf.org/donate/privacypolicy.html">Privacy Policy</a>.</p>
-                                       <p>This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/4.0">Creative Commons Attribution-ShareAlike Works 4.0 license (or later version)</a> &mdash; <a href="http://www.gnu.org/licenses/license-list.html#OtherLicenses">Why this license?</a></p>
+                                       <p>Copyright &copy; 2014 <a href="https://fsf.org">Free Software Foundation</a>, Inc. <a href="https://my.fsf.org/donate/privacypolicy.html">Privacy Policy</a>. <a href="https://fsf.org/jfb">Join.</a></p>
+                                       <p>The images on this page are under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 license (or later version)</a>, and the rest of it is under a <a href="https://creativecommons.org/licenses/by-sa/4.0">Creative Commons Attribution-ShareAlike 4.0 license (or later version)</a>. &mdash; <a href="http://www.gnu.org/licenses/license-list.html#OtherLicenses">Why these licenses?</a></p>
                                </div><!-- /#copyright -->
-
-                               <div class="sources">
-                                       <p><strong>Sources</strong> This websites uses typefaces X and X..</p>
-                               </div><!-- /.sources -->
-
                        </div>
                </footer><!-- End #footer -->
 
                <script src="static/js/scripts.js"></script>
        </body>
 </html>
+