ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== A Portable Web Toolkit ======

Web development is a challenging topic and you need plenty of practice to become proficient. The trouble is that, like many "trades", you need a good set of tools to succeed. And you want to be able to call on your favourite tools wherever you happen to be. In other trades like carpentry or plumming, you'd have a toolbox. This article will explain how you can create a portable "toolbox" that can be installed on a USB datastick and carried around with you. That way you'll have access to your favourite tools, and their customized settings wherever you happen to be and whatever PC you happen to be plugged into((Provided it's running Windows XP or better)).

===== The Portable "Operating System" =====

The toolbox that holds the tools in your web toolkit is a clever little application called //PortableApps.com// which is installed on your USB data stick and acts like a second start menu that is launched whenver you plug your USB datastick into a PC. Everything runs from the USB data stick, no data is transferred to the host PC, so when you eject the data stick, the PC is untouched((Unless of course you save data from one of the PortableApps.com applications to the host PC's filesystem)). 

[[http://portableapps.com|PortableApps.com]] is a both a free operating system for portable applications and a web site. The //PortableApps.com Platform// itself comes in three flavours (called //suites//) which you can download by following the [[http://portableapps.com/suite|Suite]] tab on the PortableApps.com homepage and then pressing the "Choose Your Download" button. 

The three flavours are:
  * The PortableApps.com platform which contains only the basic "operating system";
  * The PortableApps.com "Suite Light" that contains a good set of tools including the Firefox web browser, Mozilla Thunderbird (mail reader), Mozilla Sunbird (calendar tool), password safe, anti-virus tool and an instant messenger client and the AbiWord word processor, and
  * The PortableApps.com suite which contains the light suite (minus AbiWord) plus OpenOffice.

Which of these you choose depends on how much space you have on your USB datastick and what applications you are most likely to use. In this article, I have chosen to install only the PortableApps.com platform and install only the web development tools that I need. You can save a little time by installing the Suite (if you want OpenOffice) or the Suite Light options.

To save some time, I have made screencasts of the installation steps. Let me know if you'd prefer a text version as well.


===== Install the PortableApps.com Platform =====

To install the PortableApps.com platform, simply choose the "Platform Only" download option from the [[http://portableapps.com/download|Download PortableApps.com Suite and Platform]] page. This will download a Windows executable which when run will install PortableApps to any drive you choose. Normally you would select your USB removable disk((here called ''E:'' for compatibilty with the University's network but was ''H:'' on my laptop)).

After installation, the PortableApps.com "start menu" should appear in your "notification area" (bottom right of screen). Click on the icon to launch the PortableApps start menu.

===== Installing Portable Applications =====

Once you have installed the PortableApps.com platform, you can easily add additional applications to the PortableApps start menu by finding the application on the [[http://portableapps.com/apps|Applications page]], selecting the application you want and downloading the executable. Windows will recognise the installer as a PortableApp installer, and the application will be installed onto the USB drive. 

**Note** to have the PortableApps start menu updated,you may have to eject the USB drive and reinsert it.

The actual application will be installed in its own folder in the ''PortableApps'' folder on your USB drive. It can easily be deleted simply by deleting that folder((Don't delete an application that you've been using for a while. All the application data will be deleted as well. Instead use the PortableApps.com backup tool to save the data, then delete the application.)).

==== Install Firefox Portable Edition ====
 
The latest Portable Firefox web browser should always be accessible by following the link to [[http://portableapps.com/apps/internet/firefox_portable|Firefox Portable Edition]] from the [[http://portableapps.com/apps|Applications page]] (scroll down the page and look under the Internet category or simply click on the [[http://portableapps.com/apps/internet|Internet link]] on the navigation panel at the top left of the page).

==== Install a Web Editor ====

  * Notepad++ is a general purpose text editor with syntax highlighting for HTML, CSS, PHP, Java and JavaScript (as well as many other languages). It's a good basic programmer's editor.
  * Nvu and KompoZer are web development tools fashioned on FrontPage and DreamWeaver. KompoZer is a bug-fixed version of Nvu which is frozen at version 1.0. Both provide support for creating standards-compliant HTML and CSS and have a site management feature based around FTP.

==== Install Some Useful Utilities ====

As a web developer, you will need a number of additional utilities in your toolkit. Of those available in portable form, the following would be the most immediately useful additions to your toolkit:
  * Putty Portable: Telnet/SSH client for logging into your hosting service.
  * FileZilla Portable: an FTP client for uploading files to the web.
  * WinSCP Portable: an scp client with explorer-like drag-and-drop file manipulation.
  * Gimp Portable: a PhotoShop replacement.
  * 7-Zip portable: a file compression utility that knows about Windows zip and Unix tar.gz archives.
  * KeePass Portable: a useful password encryption utility. Keep all your internet passwords safe in an ecrypted database.

===== Install Some Useful Firefox Extensions =====

To make Firefox even more useful you should install the [[http://getfirebug.com/|FireBug extension]], the [[https://addons.mozilla.org/en-US/firefox/addon/60|Web Developer's Toolkit]] and [[http://tools.sitepoint.com/firescope/|FireScope]]. 

There are other useful extensions, e.g. [[https://addons.mozilla.org/en-US/firefox/addon/3615|Delicious bookmarks for FireFox]], [[https://addons.mozilla.org/en-US/firefox/addon/1730|ScribeFire blog editor]] and [[http://www.zotero.org/|Zotero Reference Manager]] which are also worth considering.

===== Backing Up Your Toolkit =====

PortableApps.com comes with a backup utility which will back up your portable ''Documents'' folder, your ''PortableApps'' folder and your application settings, or both. The backup is "offsite" (e.g. on your Desktop or Laptop computer) or can be saved to CD or another portable drive.

===== Moving and Uninstalling your Portable Apps =====

Since most of the PortableApps.com apps are stored in the ''PortableApps'' folder on your USB datastick, moving your toolbox to another device, say when your original data disk becomes too full, is simply a matter of to copying these files over to the other device. If you have the PortableApps platform already installed on the new device, simply use the backup tool on the old device to move a copy of the toolkit to a backup, then run the restore tool from the new device.

Althernatively you can just copy the PortableApps folder from the original device to the new device either by 
  - zipping the ''PortableApps'' folder with the ''StartPortableApps.exe'' file and the ''Autorun.inf'' file and extracting these on the new device, or 
  - by dragging and dropping these files and the folder across devices.

To uninstall PortableApps, simply delete the ''PortableApps'' folder, ''StartPortableApps.exe'' and ''Autorun.inf''. But backup first, in case you change your mind afterwards!

===== Conclusions =====

In this article I have described a portable web toolkit and explained how you can create your own. I hope that you have found it useful and will enjoy using the tools in the website and web application development tasks and courseworks to come. 

Please continue to monitor the PortableApps.com website for updates and announcements of other useful tools as they are released.

If you have any comments or questions, please use this artcle's discussion page.