<header>
<h2>Software</h2>
</header>
<section>
<p>Web development requires three essential tools: A browser, a text editor, and a file-transfer program. Which of each you choose is up to you. Many of the programs below (and all of the browsers) are available free of charge.</p>
<p><span class="circle recommended">●</span> = Recommended</p>
</section>
<section id="web-browser">
<h3>Web Browser</h3>
<p>All browsers are not created equal: each offers a different user experience, as well as different levels of performance and support for web technologies.</p>
<p>Currently, Google’s Chrome browser is the popular favorite, as well as being technically the best browser by most measurements. However, the very fact that Chrome is so good actually makes it a <em>less</em> effective browser to use for development.</p>
<p>For that reason, in this course we would like you to become comfortable using <strong>Firefox with the Firebug add-on</strong> for development. All homework assignments will be graded using Firefox, and all instructions will use Firebug. (Firebug is also better for beginners than Chrome’s built-in developer tools, and much more feature-complete than the ChromeBug substitute.)</p>
<p>You are <strong>expressly prohibited</strong> from using Microsoft Internet Explorer (not even version 9) until the end of the quarter. Following are the rest of the major browsers:</p>
<ul class="programs">
<li class="recommended">
<figure>
<a href="http://www.firefox.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/firefox.png" alt="Mozilla Firefox" /></div>
<figcaption>Mozilla<span class="space"> </span>Firefox</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.apple.com/safari/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/safari.png" alt="Apple Safari" /></div>
<figcaption>Apple<span class="space"> </span>Safari</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.google.com/chrome">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/chrome.png" alt="Google Chrome" /></div>
<figcaption>Google<span class="space"> </span>Chrome</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.opera.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/opera.png" alt="Opera" /></div>
<figcaption>Opera</figcaption>
</a>
</figure>
</li>
</ul>
</section>
<section id="text-editor">
<h3>Text Editor</h3>
<p>A good text editor is indispensable. For this course you will be learning to write code by hand, as professional web developers do. This means you’ll need a program that’s good at editing code. Following are some popular choices for various platforms.</p>
<p>Note that for this course you are prohibited from using programs which allow you to design and layout a web page <em>without</em> writing code (sometimes called a What-You-See-Is-What-You-Get, or WYSIWYG “wizzywig”, editor). Such programs include Adobe Dreamweaver and Microsoft Expression Web. (Note, however, that both these programs also contain code editors, which you may use if you like.)</p>
<section class="platform">
<header>
<h4><span>Mac</span></h4>
</header>
<ul class="programs">
<li>
<figure>
<div class="wrapper"><img src="<?= $BASENAME ?>/images/textedit.png" alt="TextEdit" /></div>
<figcaption>
TextEdit
<span class="note">(built-in)</span>
</figcaption>
</figure>
</li>
<li class="recommended">
<figure>
<a href="http://www.barebones.com/products/textwrangler/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/textwrangler.png" alt="TextWrangler" /></div>
<figcaption>TextWrangler</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.peterborgapps.com/smultron/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/smultron.png" alt="Smultron" /></div>
<figcaption>
Smultron
<span class="note">($)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.barebones.com/products/bbedit/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/bbedit.png" alt="BBEdit" /></div>
<figcaption>
BBEdit
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://macromates.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/textmate.png" alt="TextMate" /></div>
<figcaption>
TextMate
<span class="note">($$$)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://macrabbit.com/espresso/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/espresso.png" alt="Espresso" /></div>
<figcaption>
Espresso
<span class="note">($$$$)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.panic.com/coda/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/coda.png" alt="Coda" /></div>
<figcaption>
Coda
<span class="note">($$$$)</span>
</figcaption>
</a>
</figure>
</li>
</ul>
</section>
<section class="platform">
<header>
<h4><span>Cross-Platform</span></h4>
</header>
<ul class="programs">
<li>
<figure>
<a href="http://aptana.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/aptana.png" alt="Aptana" /></div>
<figcaption>
Aptana
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.jedit.org/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/jedit.png" alt="jEdit" /></div>
<figcaption>
jEdit
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.gnu.org/s/emacs/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/emacs.png" alt="Emacs" /></div>
<figcaption>
Emacs
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.vim.org/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/vim.png" alt="Vim" /></div>
<figcaption>
Vim
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.ultraedit.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/ultraedit.png" alt="UltraEdit" /></div>
<figcaption>
UltraEdit
</figcaption>
</a>
</figure>
</li>
</ul>
</section>
<section class="platform">
<header>
<h4><span>Windows</span></h4>
</header>
<ul class="programs">
<li class="recommended">
<figure>
<a href="http://www.textpad.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/textpad.png" alt="TextPad" /></div>
<figcaption>
TextPad
<span class="note">($*)</span>
</figcaption>
</a>
</figure>
</li>
<li class="recommended">
<figure>
<a href="http://notepad-plus-plus.org/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/notepad++.png" alt="Notepad++" /></div>
<figcaption>
Notepad++
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.contexteditor.org/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/context.png" alt="ConTEXT" /></div>
<figcaption>
ConTEXT
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.pspad.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/pspad.png" alt="PSPad" /></div>
<figcaption>
PSPad
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.editplus.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/editplus.png" alt="EditPlus" /></div>
<figcaption>
EditPlus
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.e-texteditor.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/e.png" alt="E" /></div>
<figcaption>
E
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
</ul>
</section>
</section>
<section id="file-transfer-ftp-program">
<h3>File-Transfer (FTP) Program</h3>
<p>In order to publish your code on the web, it needs to be uploaded to a web server. To do that you’ll need a program that can transfer files. Following are some popular choices.</p.>
<p>(Note that some code editors now have FTP capability built-in. Check to see if yours does.)</p>
<section class="platform">
<header>
<h4><span>Mac</span></h4>
</header>
<ul class="programs">
<li>
<figure>
<a href="http://rsug.itd.umich.edu/software/fugu/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/fugu.png" alt="Fugu" /></div>
<figcaption>
Fugu
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://fetchsoftworks.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/fetch.png" alt="Fetch" /></div>
<figcaption>
Fetch
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.panic.com/transmit/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/transmit.png" alt="Transmit" /></div>
<figcaption>
Transmit
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
</ul>
</section>
<section class="platform">
<header>
<h4><span>Cross-Platform</span></h4>
</header>
<ul class="programs">
<li class="recommended">
<figure>
<a href="http://cyberduck.ch/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/cyberduck.png" alt="CyberDuck" /></div>
<figcaption>
CyberDuck
</figcaption>
</a>
</figure>
</li>
<li class="recommended">
<figure>
<a href="http://filezilla-project.org/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/filezilla.png" alt="FileZilla" /></div>
<figcaption>
FileZilla
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://fireftp.mozdev.org/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/fireftp.png" alt="FireFTP" /></div>
<figcaption>
FireFTP
<span class="note">(Firefox add-in)</span>
</figcaption>
</a>
</figure>
</li>
</ul>
</section>
<section class="platform">
<header>
<h4><span>Windows</span></h4>
</header>
<ul class="programs">
<li class="recommended">
<figure>
<a href="http://winscp.net/eng/index.php">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/winscp.png" alt="WinSCP" /></div>
<figcaption>
WinSCP
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.flashfxp.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/flashfxp.png" alt="FlashFXP" /></div>
<figcaption>
FlashFXP
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
<li>
<figure>
<a href="http://www.smartftp.com/">
<div class="wrapper"><img src="<?= $BASENAME ?>/images/smartftp.png" alt="SmartFTP" /></div>
<figcaption>
SmartFTP
<span class="note">($$)</span>
</figcaption>
</a>
</figure>
</li>
</ul>
</section>
</section>