Updated title in infographic page. Removed links to local css. Added hashtag to header.
[enc-live.git] / index.html
index 2061d68446f1d80ea32fd490ce5e482d37433109..5225271c4d4b0d43e403fb9c55f1716869e4666d 100644 (file)
@@ -8,26 +8,20 @@
       <meta name="description" content="Email surveillance violates our fundamental rights and makes free speech risky. This guide will teach you email self-defense in 30 minutes with GnuPG.">
 
       <meta name="viewport" content="width=device-width, initial-scale=1">
-                       <link rel="stylesheet" href="http://static.fsf.org/nosvn/enc-dev0/css/main.css">
-               <link rel="shortcut icon" href="http://static.fsf.org/nosvn/enc-dev0/img/favicon.ico" />
-
-                       <!-- our local static folder url -->
-                       <link rel="stylesheet" href="static/css/main.css">
+                       <link rel="stylesheet" href="//static.fsf.org/nosvn/enc-dev0/css/main.css">
+               <link rel="shortcut icon" href="//static.fsf.org/nosvn/enc-dev0/img/favicon.ico" />
 
        </head>
        <body>
+<!--
                <nav class="nav">
                        <div>
-                               <ul class="os">
-                                       <li><a href="index.html" class="current">GNU/Linux</a></li>
-                                       <li><a href="mac.html">Mac OS</a></li>
-                                       <li><a href="windows.html">Windows</a></li>
-                               </ul>
-                               <!--<ul class="lang">
+                               <ul class="lang">
                                        <li class="help"><a href="http://libreplanet.org/wiki/GPG_guide">Translate this guide!</a></li>
-                               </ul> -->
+                               </ul>
                        </div>
                </nav>
+-->
 
 <!-- ~~~~~~~~~ GnuPG Header and introduction text  ~~~~~~~~~ -->
 <!-- ~~~~~~~~~  Revision as of 18:53, 1 June 2014 by Zakkai ~~~~~~~~~ -->
 
                        <div>
                                <h1>Email Self-Defense</h1>
+                               <ul class="os">
+                                       <li><a href="index.html" class="current">GNU/Linux</a></li>
+                                       <li><a href="mac.html">Mac OS</a></li>
+                                       <li><a href="windows.html">Windows</a></li>
+                                       <li class="share"><a href="https://fsf.org/twitter">#EmailSelfDefense</a></li>
+                               </ul>
 
                                <!-- ~~~~~~~~~ FSF Introduction ~~~~~~~~~ -->
                                <div id="fsf-intro">
                                        <h3><a href="http://u.fsf.org/ys"><img alt="Free Software Foundation" src="//static.fsf.org/nosvn/enc-dev0/img/fsf-logo.png"></a></h3>
                                        <p>Email Self-Defense is a project of the Free Software Foundation. The FSF works to secure freedom for computer users by promoting the development and use of free (as in freedom) software and documentation.</p><p>We have big plans to get it in the hands of people under bulk surveillance all over the world, and make more tools like it. Can you make a donation to help us achieve that goal?</p>
 
-                                       <!--<p><a href="https://u.fsf.org/yr"><img alt="Join now" src="http://static.fsf.org/nosvn/enc-dev0/img/join.en.png"></a></p>-->
+                                       <!--<p><a href="https://u.fsf.org/yr"><img alt="Join now" src="//static.fsf.org/nosvn/enc-dev0/img/join.en.png"></a></p>-->
                                        <p><a href="https://u.fsf.org/7w"><img alt="Donate" src="//static.fsf.org/nosvn/enc-dev0/img/donate.en.png"></a></p>
                                        <div class="newsletter">
                                                <h5>Sign up</h5>
@@ -63,8 +63,7 @@
                                <!-- ~~~~~~~~~ Guide Introduction ~~~~~~~~~ -->
                                <div class="intro">
                                        <p id="infographic">
-                                               <a class="img-link" href="infographic.html"><img src="//static.fsf.org/nosvn/enc-dev0/img/infographic-button.png" alt="Email Self-Defense, Infographic" /></a>
-                                               <a class="text-link" href="infographic.html">View &amp; share our infographic &rarr;</a>
+                                               <a href="infographic.html"><img src="//static.fsf.org/nosvn/enc-dev0/img/infographic-button.png" alt="View &amp; share our infographic &rarr;" /></a>
                                        </p>
                                        <p>The goal of this guide is to make it easy to set up email encryption on your computer. Once you've finished, 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>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>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 <a href="#section5">Section 5</a>. 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>
+                                               <p class="notes">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">
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                                <div id="step-3a" class="step">
                                        <div class="sidebar">
-                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/placeholders/placeholder.png" alt="Placeholder" /></p>
+                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/screenshots/section3-try-it-out.png" alt="Section 5: Use it Well" /></p>
                                        </div><!-- /.sidebar -->
                                        <div class="main">
                                                <h3><em>Step 3.a</em> Send Adele your public key</h3>
                                        <div class="main">
                                                <h3><em>Step 3.c</em> Receive a response</h3>
                                                <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 class="notes">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>
+                                               <p class="notes">Notice the bar that Enigmail shows you with information about the status of Adele's key.</p>
                                        </div><!-- End .main -->
                                </div><!-- End #step-3c .step -->
 
 <!-- STEP 3D IS COMMENTED OUT UNTIL WE FIND A WAY TO VALIDATE SIGNATURES
-                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ --
                                <div id="step-3d" class="step">
                                        <div class="main">
                                                <h3><em>Step 3.d</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-3d .step -->
+                                       </div>
+                               </div>-->
                        </div>
-               </section><!-- End #section3 --
+               </section><!-- End #section3 -->
 
 
 <!-- ~~~~~~~~~ Section 4: Learn the Web of Trust  ~~~~~~~~~ -->
                                        <!-- ~~~~~~~~~ section introduction: interspersed text  ~~~~~~~~~ -->
                                <div class="section-intro">
                                                <h2><em>#4</em> Learn the Web of Trust</h2>
-                                               <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>
+                                               <p>Email encryption is a powerful technology, but it has a weakness; it requires a way to verify that a person's public key is actually theirs. Otherwise, there would be no way to stop an attacker from making an email address with your friends name, creating keys to go with it and impersonating your friend.</p>
+
+                                               <p>That's why the programmers that developed email encryption created keysigning and the Web of Trust. When you sign someone's key, you are publicly saying that you trust that it does belong to them and not an impostor.</p>
+
+<p>People who use your public key can see the number of signatures it has. Once you've used GnuPG for a long time, you may have hundreds of signatures. The Web of Trust is the constellation of GnuPG users, connected to each other by chains of trust expressed through signatures, into a giant Web. The more signatures a key has, and the more signatures it's signers' keys have, the more trustworthy that key is.</p>
+
                                </div><!-- End .section-intro -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                                <div id="step-4a" class="step">
                                        <div class="sidebar">
-                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/placeholders/placeholder.png" alt="Placeholder" /></p>
+                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/screenshots/section4-web-of-trust.png" alt="Section 4: Web of Trust" /></p>
                                        </div><!-- /.sidebar -->
                                        <div class="main">
                                                <h3><em>Step 4.a</em> Sign a key</h3>
                                                <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 &rarr; Key Management &rarr; Keyserver &rarr; 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>
+                                               <p class="notes">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, but it's good practice.</p>
+
 
                                                <div id="pgp-pathfinder">
                                                        <form enctype="application/x-www-form-urlencoded" action="/mk_path.cgi" method="get">
-                                                               <p><strong>From:</strong> <input type="text" name="FROM"></p>
-                                                               <p><strong>To:</strong> <input type="text" name="TO"></p>
+                                                               <p><strong>From:</strong> <input type="text" placeholder="xD41A008"  name="FROM"></p>
+                                                               <p><strong>To:</strong> <input type="text" placeholder="50BD01x4" name="TO"></p>
                                                                <p class="buttons"><input type="submit" value="trust paths" name="PATHS"> <input type="reset" value="reset" name=".reset"></p>
                                                        </form>
                                                </div><!-- End #pgp-pathfinder -->
 
                                        </div><!-- End .main -->
                                </div><!-- End #step-4a .step -->
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
+                               <div id="step-sign_real_keys" class="step">
+                                       <div class="main">
+                                               <h3><em>Important:</em> check people's identification before signing their keys</h3>
+                                               <p>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?". The only way to truly make sure it belongs to them is to talk to them in person or on the phone, and have them give you identifying information (like a government ID), along with their key ID.</p>
+                                       </div><!-- End .main -->
+                               </div><!-- End #step-sign_real_keys .step-->
+
+
+
                        </div>
                </section><!-- End #section4 -->
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                                <div id="step-5a" class="step">
                                        <div class="sidebar">
-                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/screenshots/section5-use-it-well.png" alt="Section 5: Use it Well" /></p>
+                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/screenshots/section5-01-use-it-well.png" alt="Section 5: Use it Well" /></p>
                                        </div><!-- /.sidebar -->
                                        <div class="main">
                                                <h3>When should I encrypt?</h3>
 
                                                <p>The more you can encrypt your messages, the better. This is because, if you only encrypt emails occasionally, each encrypted message could raise a red flag for surveillance systems. If all or most of your email is encrypted, people doing surveillance won't know where to start.</p>
 
-</p>That's not to say that only encrypting some of your email isn't helpful -- it's a great start and it makes bulk surveillance more difficult. And even people that encrypt as much as they can are still limited to those of their contacts that have public keys.</p>
+<p>That's not to say that only encrypting some of your email isn't helpful -- it's a great start and it makes bulk surveillance more difficult. And even people that encrypt as much as they can are still limited to those of their contacts that have public keys.</p>
                                        
                                        </div><!-- End .main -->
                                </div><!-- End #step-5a .step -->
 
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                                <div id="step-5b" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/screenshots/section5-02-use-it-well.png" alt="Section 5: Use it Well" /></p>
+                                       </div><!-- /.sidebar -->
                                        <div class="main">
                                                <h3>Be wary of invalid keys</h3>
                                                <p>GnuPG makes email safer, but it's still important to watch out for invalid keys, which which might have fallen into the wrong hands. Email encrypted with invalid keys might be readable by surveillance programs.</p>
                                        </div><!-- End .main -->
                                </div><!-- End #step-5b .step -->
 
+                               <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                                <div id="step-5c" class="step">
                                        <div class="main">
                                                <h3>Copy your revocation certificate to somewhere safe</h3>
                                <div id="step-5d" class="step">
                                        <div class="main">
                                                <h3>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, so that anyone corresponding with you knows that they can donwload your public key and verify that it's the correct one. It's also good to post it on your media profile, blog, Website, or business card. We need to get our culture to the point that we feel like something is missing when we see an email address without a public key ID.</p>
+                                               <p>Start writing your key ID anywhere someone would see your email address. Add it to your email signature, so that anyone corresponding with you knows that they can donwload your public key and verify that it's the correct one. It's also good to post it on your media profile, blog, Website, or business card.</p><p>We need to get our culture to the point that we feel like something is missing when we see an email address without a public key ID.</p>
                                        </div><!-- End .main -->
                                </div><!-- End #step-5d .step-->
 
 
                                <!-- ~~~~~~~~~ a div for each step  ~~~~~~~~~ -->
                                <div id="step-keysigning_party" class="step">
+                                       <div class="sidebar">
+                                               <p><img src="//static.fsf.org/nosvn/enc-dev0/img/screenshots/section6-next-steps.png" alt="Section 6: Next Steps" /></p>
+                                       </div><!-- /.sidebar -->
                                        <div class="main">
                                                <h3>Go to a keysigning party</h3>
                                                <p>Keysigning parties are social events designed to build the Web of Trust. Participants match each others' photo IDs and Key IDs, and then get out their laptops and sign each other's public keys. They're a great way to meet likeminded people and learn about new privacy tools, as well as build up people's trust in your key. Look for keysigning at tech events, hackerspaces and nerdy parties.</p>
                                                <h3>Contribute to this guide</h3>
                                                <ul>
                                                        <li><a href="https://libreplanet.org/wiki/GPG_guide/Public_Review">Leave feedback and suggest improvements</a></li>
-                                                       <li>Email us at <a href="mailto:campaigns@fsf.org">campaigns@fsf.org</a> if you'd like to help maintain and improve this guide, or to translate it</a></li>
+                                                       <li>Email us at <a href="mailto:campaigns@fsf.org">campaigns@fsf.org</a> if you'd like to help maintain and improve this guide, or to translate it</li>
                                                        <li><a href="https://u.fsf.org/7w">Donate to the Free Software Foundation</a></li>
                                                </ul>
                                        </div><!-- End .main -->
                                        <h4><a href="https://u.fsf.org/ys"><img alt="Free Software Foundation" src="//static.fsf.org/nosvn/enc-dev0/img/fsf-logo.png"></a></h4>
                                        <p>Copyright &copy; 2014 <a href="https://u.fsf.org/ys">Free Software Foundation</a>, Inc. <a href="https://my.fsf.org/donate/privacypolicy.html">Privacy Policy</a>. <a href="https://u.fsf.org/yr">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>
+                                       <p>Fonts used in the guide &amp; infographic: <a href="https://www.google.com/fonts/specimen/Dosis">Dosis</a> by Pablo Impallari, <a href="http://www.google.com/fonts/specimen/Signika">Signika</a> by Anna Giedry&#347; <a href="http://www.google.com/fonts/specimen/Archivo+Narrow">Archivo Narrow</a> by Omnibus-Type, <a href="http://www.thegopherarchive.com/gopher-files-hacks-pxl2000-119351.htm">PXL-2000</a> by Florian Cramer.</p>
                                </div><!-- /#copyright -->
+                               <p class="credits">
+                                       Infographic and guide design by <a rel="external" href="http://jplusplus.org"><strong>Journalism++</strong> <img src="//static.fsf.org/nosvn/enc-dev0/img/jplusplus.png" alt="Journalism++" /></a>
+                               </p><!-- /.credits -->
                        </div>
                </footer><!-- End #footer -->
 
-               <script src="http://static.fsf.org/nosvn/enc-dev0/js/jquery-1.11.0.min.js"></script>
-               <script src="http://static.fsf.org/nosvn/enc-dev0/js/scripts.js"></script>
+               <script src="//static.fsf.org/nosvn/enc-dev0/js/jquery-1.11.0.min.js"></script>
+               <script src="//static.fsf.org/nosvn/enc-dev0/js/scripts.js"></script>
 
                 <!-- Piwik -->
                 <script type="text/javascript">