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 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)
- Brackets: an open source 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.
If you have a Google account, you can sync all your settings, bookmarks and extensions across all your applications automatically.
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 Mozilla Firefox and optionally Opera.
On a Macintosh you will have Safari installed as standard and you may wish to install the Windows version.
Step 2: Explore the Developer Tools
Google Chrome, Safari and Firefox have their own built-in development tools and I will demonstrate some of these in one of the sessions to come. You may be interested in exploring the Chrome Developer Tools site for tutorials and videos to help you master these tools.
Step 3: Install Brackets Editor
Brackets is a free code editor for web applications that this being developed as an open-source product by Adobe. It is actually a web application itself and the coding has been done in HTML5, CSS3 and JavaScript. The installation of Brackets is straightforward. Goto the the Brackets page and download and run the installer. You may also wish to watch this short video from Jeffrey Way on Nettuts+ A peak at Brackets.
Step 4: Install LAMP platform
See A Virtual Machine for the EG-259 Module (GitHub). You may wish to sign-up for a free account on GitHub and install Git, VirtualBox and Vagrant for your machine as described in the section Getting Stated to save some time in the practical.
What's Next?
Part 1: The Foundations of Web Applications Technology