published by O'Reilly and written by Kyran Dale. In the preface, he writes
"Python's simplicity and power was a breath of fresh air ... Python was the perfect glue, playing nicely with C++ libraries ... and doing, with consummate ease, all the stuff that is such a pain in low-level languages. ... I started to write all my graphical user interfaces (GUIs) and visualizations in Python. "
"are now possible on your local web browser, and the payoff is that, with very little effort, they can be made accessible to every desktop, laptop, smartphone, and tablet in the world."
Begin with Python
In order to get started you will need a local web server. Since most likely you will not have one running that is easily accessible, a simple solution is to use python to provide one for you. Python has a built-in module that will run a server and that can be started with one line of python code.
python -m CGIHTTPServer 8000 1>/dev/null 2>/dev/null &
By using port 8000 the server is distinct from the one on port 80 used for web applications. The site would appear by putting
in a Google Chrome or Mozilla Firefox browser window running on the same user account on the same machine. Note the redirects for stdio and stderr to /dev/null keeps output from appearing in the console. The server may be killed by identifying its process ID in Linux with the command
ps -e | grep python
kill -s 9 pid
where "pid" is the ID number found in the first line. Alternatively, if it is the only python process running you may kill it with
For programmers, however, this utility allows development and debugging of web software without the need for a large server.
Add a Directory for a Program
Put each program (think webpage) into its own directory under this top level directory. That way, when you open the browser to localhost:8000 you will see list of directories each containing a separate application. Click on one of those and your application, or its files, will open.
Under that program directory create at a minimum two other subdirectories:
The browser will automatically see a file "index.html" in a directory if that file exists. For development it is best not to use "index.html" as the base file for your application, but instead to use another descriptive name such as "calculator.html" or "orbits.html". Later, if you want it to open without the extra click you can rename it, or in Linux and other Unix-like operating systems create a soft link that points to it with the command line
ln -s calculator.html index.html
The browser will see the index soft link and then open the file it points to. By not having "index.html" in your program directory you will be able to browse other files there, try variants on your program, or inspect code in the browser.
Select a Browser
There are two browsers that are recommended for this type of development, and the choice at least at this beginning stage is a matter of style and convenience. The user interface to development help is different, and actually the "engine" they run is also different. As the web develops, the programmers who create and maintain browsers also change what they can do, and sometimes what they allow the browsers to do. There are two recommend choices, which run different engines.
Mozilla Firefox currently with 62% of desktop use, it is full-featured with significant memory usage and CPU requirements.
Google Chrome currently with 15% of desktop use it was widely more popular before the rise of Chrome,. Firefox is the least restrictive and most open of the two. Its requirements for memory and CPU are lower than Chrome. Firefox perhaps should be the development platform choice unless you need the Google features.
In Google Chrome, click the three dots at the upper right of the browser window, select "More tools" and "Developer tools". By default it will open to the Console on the right side of the browser.
In Firefox click the three bars at the upper right, then the "Developer" icon, and "Web console". It will open at the bottom of the browser.
For the simplest of pages, create a file and give it an extension ".html" on Linux or Mac, or perhaps "htm" in Windows. This is the code the browser will execute first. If you name it "index.html" when the browser is pointed to the directory containing the it will open it automatically. For development, this is not desirable behavior because you will also want to open other files in the browser to inspect them, or to run alternative versions in the same directory tree. Therefore, refrain from using "index.html", and try instead some other descriptive name. In this example we will call it "orbits.html".
The simplest html could look like this
<!DOCTYPE html> <html lang="en">
<!- Comments in HTML are between these markup commands. ->
I have used indenting to distinguish sections. That's not required. HTLM skips extra spaces and line feeds. That is why, if you use a program to create website content, the result may be unreadable in an editor. At this stage, write the HTML in a text editor and use clear spacing and indentation so you can read it and understand what you have written months later.
We will use an orbit simulator as a demonstration. You can find the complete code [here]. It begins this way
<!doctype html> <html lang="en"> <html> <head> <title>Explore Solar System Orbits in 3D</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="description" content="Properties of a Vector Viewed in Three.js"> <script src= "./js/vector3D.js"></script> <script src= "./js/forces3D.js"></script> <script src= "./js/phys.js"></script> <script src= "./js/astro.js"></script> <script src= "./js/three.min.js"></script> <script src= "./js/OrbitControls.js"></script> <script src= "./js/dat.gui.min.js"></script> <link rel="stylesheet" href="css/dat.css"> <link rel="stylesheet" href="css/main.css"> </head>
After this block which initiates the browser the <body> has the actual instructions.
<script src= "./js/explore_orbits.js"></script>
Following that, other code fills in the page, provides the help pages, and completes the html. We will not show all of it here, but you can view it in the orbits.html example. It would have other
sections. The css files connect the content with the styling for each one.