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.

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.

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 professional quality code editing and project management tool called Aptana Studio. This is a version of the Eclipse development tool that is tuned for development of Web applications (HTML5, CSS3, PHP, Databases, Ruby on Rails).

The tool kit that I recommend for this module consists of:

• The Firefox web browser (latest version is version 9)
• Firebug, a Firefox extension that adds sophisticated HTTP, HTML, CSS and JavaScript browsing and debugging tools to Firefox
• Aptana Studio: a professional interactive development environment written in Java and designed for code development in multiple languages (we will be using Aptana Studio 3 in this module)
• Version 6 or 7 of the Java Development Kit (JDK) which is needed to run Aptana Studio.

The downloading and installation of the full set of tools will take a couple of hours to complete, but as all the software is free, it will cost you nothing but time and bandwidth.

Mozilla Firefox 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 Firefox 9 and as a self-respecting web developer, you will no doubt already have Firefox installed on your desktop or laptop computer. If not then you should get a copy and luckily installation is straightforward. Simply go to the Firefox home page, press the “Free Download” button and let the install wizard run.

If you already have a version of Firefox installed, run it and select Help→Check for Updates to see if you can upgrade to the latest version.

Of course, if you need to use a computer on which Firefox is not installed, you have a problem. Follow the link to see a screen cast which describes how to install Firefox on a USB data-stick so that you can run Firefox on any Windows machine to which you have access.

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.

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.

Back | Next Step

The Java Development Kit is a version of Java that includes the Java Virtual Machine. Follow this link for full installation instructions.

Netbeans is a free Interactive Development Environment originally designed and developed for application development in Java but now supporting multiple languages and applications including HTML, CSS, PHP, Ruby (and Rails) and JavaScript. Whith the addition of a set of C/C++ compiler tools, it is also usable as a full-featured C/C++ development environment. Follow this link for installation instructions.

Netbeans can also act as a development environment for C and C++ but to do so, it needs access to a set of compiler tools. On windows, the recommended set is the Gnu C/C++ toolset (gcc, g++, make, gdb) which is available in the cygwin package. Follow this link if you'd like to create a C/C++ development environment for your Netbeans installation.

See Practical 1.

Part 1: The Foundations of Web Applications Technology

• Revision of the History of the Internet, Application Protocols and the World Wide Web
• Applications and Application-Layer Protocols
• The World-Wide Web
• Web Browsers and Web Servers
• Uniform Resource Identifiers (URIs)
• Multipurpose Internet Mail Extensions (MIME)
• The Hyper Text Transfer Protocol
• Web Programming

Previous lecture | Home | Next lecture