This is an old revision of the document!
Table of Contents
Setting up Your Web Development Tool Kit
In order to make best use of the course materials and practical exercises provided in this module you will need to establish a tool kit of development tools that will make your experience of web development as pleasurable and informative. All the tools mentioned here are open source and free. Furthermore the tool kit suggested here is at least as good, and in some cases probably better than the expensive professional tools that are on the market.
I suggest that you spend a few minutes reading this document and then follow along with the installation instructions. To make best use of the tools and to better follow the case studies and homework exercises to follow, you should invest some time in following these instructions and installing the set of tools on your own computer. We give instructions for installation on a Windows machine (actually I used Windows Vista), although installation is possible on Ubuntu Linux (instructions will be given in the EG-253 Laboratory) and Macintosh computers as well.
A Basic Set of Tools for Web Development
To do web application development you actually only need only a web browser, a text editor and access to a web server. You have access to a web server in college (the w: drive that you have access to as an engineering student is in fact part of a hosted web server) but this works only as a host for static web pages, and client-side development involving JavaScript and CSS. For server-side web application development, such as the applications you will meet on this module, you need access to a full web development platform. The industry standard platform is the combination of the Apache Web Server, the MySQL database and PHP. This combination of server-side web technologies, combined with the Linux operating system, is known as LAMP (software bundle). It is what you normally get if you pay an ISP for a web application hosting package: but for this module will be installing and configuring our own web server. Instructions for installing a suitable windows implementation of the LAMP “stack” follow later in the module.
A Better Set of Tools
Although you can get away with a basic web browser, text editor and access to a web server, web application development is somewhat more pleasant if the text editor “knows” about the application languages to be used and you have access to tools for developing, deploying and debugging client-side and server side code. In this module, I will be advocating use of a new editor from Adobe called Code Brackets. This is a web application, written in HTML5, CSS and JavaScript that is distributed as a desktop app (for Windows and the Macintosh). It is tuned for the editing of client-side languages HTML, CSS and JavaScript but in future is likely to be supportive of the server-side too.
The tool kit that I recommend for this module consists of:
- The Google Chromium web browser (latest version is version 24)
- Adobe Code Brackets: a code editor for HTML, CSS and JavaScript written in HTML, CSS and JavaScript.
The downloading and installation of the full set of tools will take no more than half an hour to complete, and as all the software is free, it will cost you nothing but time and bandwidth.
Step 1: Install Google Chrome
Google Chrome (Chromium) is an open-source browser that endeavours to track web standards closely and provides best-of-breed support for web standards in HTML, CSS and JavaScript. The latest version (at time of writing) is Chromium 24, but as it instals updates automatically and silently in a rapid development mode, you will always have the latest version. As a self-respecting web developer, you will no doubt already have Chromium installed on your desktop or laptop computer. If not then you should get a copy and luckily installation is straightforward. Simply go to the Chrome home page, press the “Download Chrome” button and let the install wizard run.
If you happen to be using a University computer that does not have Chrom installed, you can use the Portable Apps version of Chrome to install it on a USB data stick.
Optional Step: Other Browsers
Cross-browser testing is an important part of the Web Developer's practice and you should have a range of browsers installed as part of your developer toolkit.
If you have a windows machine, you should upgrade to Internet Explorer 9. This is the first version of windows to feature support for HTML5 and CSS3. Depending on you application, you should also be aware of the quirks and work-arounds needed to support older versions of Internet Explorer.
You should install Google Chrome and optionally Opera.
On a Macintosh you will have Safari installed as standard and you may wish to install the Windows version.
Step 2: Install Firebug
Firebug is an essential HTML/CSS/JavaScript comprehension and debugging tool that every web developer should have in his or her toolkit. Unfortunately it is designed for use with Mozilla Firefox so if you are developing for Internet Explorer, you are out of luck! The attached link takes you to a screencast in which I demonstrate the firebug installation process and demonstrate its main features. You will also see Firebug used live in the lectures.
Safari and Google Chrome have their own built-in development tools and I will demonstrate these in one of the sessions to come.
Step 3: Install Java Development Kit
The Java Development Kit is a version of Java that includes the Java Virtual Machine. Follow this link for full installation instructions.
Step 4: Install Aptana Studio
Aptana Studio is a free Interactive Development Environment that was built on top of Eclipse – a popular application development environment for Java. It has been tuned for “open web” developers and provides excellent support for HTML, CSS, JavaScript, PHP and Ruby on Rails. Providing that you have the Java Development Kit 1.6 or better installed, the installation of Aptana Studio is straightforward. Goto the home page and download and run the installer. You may also wish to read the Getting Started Guide.
Step 5: Install LAMP platform
See Practical 1.
What's Next?
Part 1: The Foundations of Web Applications Technology