[mockup patch] A get-fedora page which makes it easier to select the DE, arch and download method

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

 



Hi,

In light of the recent discussions about increasing the visibility of the x86_64 and KDE media downloads, I've created a mockup page that I think would help solve both problems. It's similar to the current pages, but I've added a "Customize" section which allows users to select between KDE/Gnome, i586/x86_64/PPC, and the preferred download method in a few clicks (although seeing I haven't coded any of the Javascript to make the URL changes work properly). As an added bonus, it also places the BitTorrent download option upfront which should help reduce mirror load.

One of the disadvantages to adding a customize section is that it decreases the user-friendliness of our download page slightly, however I think if we offer sane defaults and place the customize section below the "Download Now" links we can avoid most of this (new users can still click "download now" and start right away, while experienced users can read on and select their preferred DE/arch/download method).

Any ideas, comments, concerns or feedback are welcome.

Regards,
Stewart
diff --git a/fedoraproject.org/data/content/get-fedora.html b/fedoraproject.org/data/content/get-fedora.html
index b05a52f..f88af0b 100644
--- a/fedoraproject.org/data/content/get-fedora.html
+++ b/fedoraproject.org/data/content/get-fedora.html
@@ -9,8 +9,6 @@
     <body class="get">
         <h2>${Markup(_('Fedora, For You.'))}</h2>
         <div class="download-sidebar" >
-            <a id="kde-banner" href="${path}/${lang}/get-fedora-kde"><span>${_('KDE fans, go here!')}</span></a>
-            <a id="ppc-banner" href="${path}/${lang}/get-fedora-ppc" class="even"><span>${_('Have a PowerPC?  Go here!')}</span></a>
             <a id="advanced-banner" href="${path}/${lang}/get-fedora-all"><span>${_('Show me all download options in one page!')}</span></a>
         </div>
 
@@ -54,6 +52,63 @@
             </p>
             <a href="http://download.fedoraproject.org/pub/fedora/linux/releases/11/Fedora/i386/iso/Fedora-11-i386-DVD.iso"; class="button">${Markup(_('Download Now!'))}</a>
         </div>
+        <div class="download-block" id="customize">
+        <h3>Customize</h3>
+          <p class="note">As the download options are changed, the download links above are automatically updated. [TODO]</p>
+          <div class="customize-option-wrapper">
+            <ul><li>
+              <h4>Are you a KDE user?</h4>
+              <form>
+                <div class="customize-option" id="use-kde">
+                  <input type="checkbox" name="kde" value="yes" id="i_kde" /><label for="i_kde"> Yes, I would like download the KDE media instead</label>
+                </div>
+              </form>
+            </li></ul>
+          </div>
+          <div class="customize-option-wrapper">
+            <ul><li>
+              <h4>Select a architecture:</h4>
+              <form>
+                <p class="note">Not sure which architecture to choose? Click <a href="http://docs.fedoraproject.org/install-guide/f10/en_US/sn-which-arch.html";>here</a> for more information.</p>
+                <div class="customize-option" id="arch-32bit">
+                  <input type="radio" name="arch" value="i586" id="i-32bit" checked="checked" /><label for="i-32bit"> 32 bit (i586)</label>
+                  <p class="fine-print">The most compatible option. <strong>Works on all Intel-compatible PCs</strong>, including 64 bit ones.</p>
+                </div>
+                <div class="customize-option" id="arch-64bit">
+                  <input type="radio" name="arch" value="x86_64" id="i-64bit" /><label for="i-64bit"> 64 bit (x86_64)</label>
+                  <p class="fine-print">For recent computers such as the Intel-based Apple computers, AMD Athlon 64, Athlon X2, Opteron, Intel Core 2 and Core i7.</p>
+                </div>
+                <div class="customize-option" id="arch-PowerPC">
+                  <input type="radio" name="arch" value="ppc" id="i-PowerPC" /><label for="i-PowerPC"> PowerPC (PPC)</label>
+                 <p class="fine-print">For the non-Intel Apple computers such as the G3, G4 and G5 as well some IBM servers<br /><br /></p>
+                </div>
+              </form>
+            </li></ul>
+          </div>
+          <div class="customize-option-wrapper">
+            <ul><li>
+              <h4>I would like to download via...:</h4>
+              <form>
+                <div class="customize-option" id="dl-bt">
+                  <input type="radio" name="dlmethod" value="bt" id="i_bt" /><label for="i_bt"> BitTorrent</label>
+                  <p class="fine-print">You will need a BitTorrent client if you don't already have one installed.</p>
+                </div>
+                <div class="customize-option" id="dl-mirror">
+                  <input type="radio" name="dlmethod" value="mirror" id="i_mirror" checked="checked" /><label for="i_mirror"> A normal mirror (HTTP/FTP)</label>
+                  <p class="fine-print">Easiest download method, but can be slow depending on the mirror.</p>
+                </div>
+                <div class="customize-option" id="dl-metalink">
+                  <input type="radio" name="dlmethod" value="metalink" id="i_metalink" /><label for="i_metalink"> Metalink</label>
+                  <p class="fine-print">You will need a <a href="http://www.metalinker.org/samples.html";>metalink-compatible</a> downloader.</p>
+                </div>
+                <div class="customize-option" id="dl-jigdo">
+                  <input type="radio" name="dlmethod" value="jigdo" id="i_jigdo" /><label for="i_jigdo"> Jigdo</label>
+                 <p class="fine-print">You will need a <a href="http://atterer.net/jigdo/#download";>jigdo</a> client.</p>
+                </div>
+              </form>
+            </li></ul>
+          </div>
+        </div>
         <div class="download-block" id="other">
             <h3>${Markup(_('Other Download Options'))}</h3>
             <h4>${Markup(_('Let me look around...'))}</h4>
diff --git a/fedoraproject.org/static/css/fedora.css b/fedoraproject.org/static/css/fedora.css
index 204b5e4..1178975 100644
--- a/fedoraproject.org/static/css/fedora.css
+++ b/fedoraproject.org/static/css/fedora.css
@@ -485,6 +485,26 @@ ul#resources li.resource-download
 
 /* get-fedora styles */
 
+div.customize-option-wrapper {
+  width: 100%;
+  overflow: auto;
+  margin-left: 1em;
+}
+
+#arch-32bit, #arch-64bit {
+  float: left;
+  width: 30%;
+}
+
+#arch-PowerPC {
+  float: right;
+  width: 30%;
+}
+
+div.customize-option {
+  padding: 5px 10px;
+}
+
 .download-block .button:hover {
   background-color: #9ECFFF !important;
 }
-- 
Fedora-websites-list mailing list
Fedora-websites-list@xxxxxxxxxx
https://www.redhat.com/mailman/listinfo/fedora-websites-list

[Index of Archives]     [Fedora Users]     [Linux ARM]     [ARM Kernel]     [Older Fedora Users]     [Fedora Advisory Board]     [Fedora Security]     [Fedora Devel Java]     [Fedora Desktop]     [ATA RAID]     [Fedora Marketing]     [Fedora Mentors]     [Fedora Package Announce]     [Fedora Package Review]     [Fedora Music]     [Fedora Packaging]     [Centos]     [Fedora SELinux]     [Coolkey]     [Yum Users]     [Yosemite News]     [KDE Users]     [Fedora Art]     [Fedora Docs]     [Asterisk PBX]

  Powered by Linux