Project with HTML, CSS and JavaScript in separate files

OK, we’re ready to go.  Start your VM and open Aptana Studio (don’t know how? see previously)

In File->New->Web Project->Basic Web Template add the name ‘Lithophane

min web setup VM step1

On the Lithophane project, create a CSS and a JS folder (right click->New->Folder) under CSS create main.css and under JS, main.js (right click->New->File). Double click on Index.html and you’re ready to start programming.

min web setup VM step 2

The files main.css and main.js will contain our style sheet and JavaScript respectively, index.html is the main web page.  First, we need to include these files into our HTML page so that we can reference the definitions within them.

Now to check it all works. Replace the default HTML (in Index.html) which probably looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html xmlns="">
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   <title>New Web Project</title>
    <h1>New Web Project Page</h1>

With this:

<!doctype html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lithophane Generator</title>
    <link rel="stylesheet" href="css/main.css"> <!--our style sheet-->
  <script src="js/main.js"></script> <!--our Java Script-->
  <body onload="initPage();"> <!--call function when page loaded-->
    <h1 id="pageheading">Lithophane Generator</h1>

Add the following to the main.css file

body {
    color : #008; // change colour of body section

And the following to the main.js file

function initPage() { // called on page load
    // find heading in document and change the displayed text
    var headingText=document.getElementById('pageheading');
    headingText.innerHTML="2D->3D Lithophane Generator™";

Save all the files, select the tab containing index.html and click the green run icon min web setup VM run icon to see that you have everything setup correctly.

The browser should start and the web page should look like this:

min web setup VM step3

The title text has been changed by the JavaScript and the colour has been set to blue by the CSS. So everything is working 🙂

Time to start some real programming!

Development environment

One of the problems with on-line tutorials is that we’re all running on different operating systems with different tools installed.  I find it quite annoying that every tutorial has 15 pages of alternative OS installation routines before you get to the real subject.

The simplest way to get started is if we have a common development environment.  Doing this using open source tools is obviously the most accessible.  I thought it best to start with the machine, so installing a virtual machine (VM), with a common operating system (Ubuntu) and tools (Aptana Studio).

Download and install VirtualBox

Download the Ubuntu 14.04.1 ISO image

Set up a Virtual Machine using the Ubuntu image.

Install the Guest Additions (on the VirtualBox devices menu) in the VM to simplify use – reboot the VM once it’s installed.

Now, in the VM:

Add Terminal to the task bar

Run terminal and set-up the JDK and Chromium browser (needed for Aptana Studio) as follows:

sudo add-apt-repository ppa:canonical-chromium-builds/stage
sudo apt-get update
sudo apt-get install default-jdk
sudo apt-get install chromium-browser
sudo apt-get install git

Download Aptana Studio 3 

Extract it somewhere you like.  Run AptanaStudio3 and use the default workspace.

You should have something like this:

min web setup VM

Now shut-down the VM and create a snapshot so that you can always go back to this point if you need to later.