[ << ]
Thanks go to Liz Evans and Joel Edwards for help pulling together the initiatives page.
Fonts are c/o the Open Font Library, notably Paul Flo Williams' Segment14.
The webpages themselves were written in HTML.
However, the interactive code was written in Javascript. It may seem crazy when you look at it (see sections below), but most of it is fairly simple Javascript. For reference, the bits took between 5 minutes (binary highlighting) and 5 hours (the switches) to write, of which debugging was anywhere between no time at all, to 4 hours. Unless you can read Javascript, you'd not be expected to understand it; the key take-home message is that it is only built from ideas we've looked at; mainly branches, loops, functions, and events.
Writing your first program page: Hello World code.
Scratch doesn't actually embed into webpages like this, so this is actually a mock-up in Javascript which acts the same way. You can find the code here.
Although it won't make a lot of sense unless you've
learnt Javascript, a few things should jump out. Firstly, it contains loads of comments saying what each bit of the code does (comments in
Javascript start /** or //). This is to help understand it later, when the coder has forgotten how it works (which is
suprisingly easy). Secondly, the rest of it is made out of branches (if statements), loops (for statements), and procedures
(functions in Javascript).
The take-home message is that there's nothing in here but the ideas we've looked at. Scan through it and see if you can see any of the elements we looked at. With the aid of the comments you might even be able to understand roughly how it works, but don't worry if you can't.
Talking to a computer page: highlighting binary "H".
The code for highlighting the binary for "H" in all the ones and zeros was built into the webpage and looks like this:
<SPAN onmouseenter="this.innerHTML='<EM style=background-color:#ffff40> 1 0 0 1 0 0 0 </EM>'" onmouseout="this.innerHTML=' 1 0 0 1 0 0 0 '"> 1 0 0 1 0 0 0 </SPAN>
It might not seem especially familiar, but it is based around two events: onmouseenter and onmouseout, which happen when the
website user puts their mouse over the bit of text 1 0 0 1 0 0 0. The first event changes the background colour of the text and puts it in italicized Emphasis; the second changes it back.
The key take-away message is that the code is run by the user events.
The binary is a direct translation of Adam Rosenfield's code.
Building a program page: popup answers.
The code for the popup answers looks like this:
<IMG src="x.gif" onclick="alert('Fraid not: etc.');">
Again, this is event-based. This time the event is the webpage user clicking on the image (coded as IMG). When they click, the code run is
the built-in Javascript procedure alert, which pops up a window containing the text after it in parentheses.
Switches page: binary coding of letters.
This is probably the most complicated bit of code. You can find it here. Again, most of it won't make much sense if you're not familiar with Javascript, but, again, it is only based on events, branches, loops, and functions. It takes the switches' values and converts them to binary, before converting the binary into the right letter and displaying it.
The switches were designed by Mat Przegietka.