\chapter{Design, Development \&\ Content of Website}

As the website was the main presentation tool for our research into Alloy it was important to take design into account. For quick efficient formatting of the website there was a high degree of 
separation between content and presentation. To ensure this a Cascading Style Sheet (CSS) and PHP were used alongside the HTML. CSS is used to describe the presentation of the HTML. It describes the fonts, colours and layout of certain elements of the website by giving them ``class names'' which are defined in the CSS of the page. The website ensures universal access by taking into account issues such as colour 
blindness (by using opposite colours where appropriate) and reduced vision (increasing text size affects the layout minimally).

\section{Contents}
Most of the contents of the website is in the tutorial which goes through a couple of models with the user, encouraging him/her to try them out in Alloy. The tutorial also includes a Flash demo of the Alloy GUI. \newline

There are seven main sections in the website:
\begin{enumerate} 
	\item \textbf{Introduction}. This section introduces the user to the history and philosophy of Alloy. 
	\item \textbf{Tutorial}. The tutorial is split into five subsections and includes incrementally developing two models in Alloy. The ``Getting Started'' subsection includes the demo of the Alloy 
GUI mentioned above.
	\item \textbf{Alternatives to Alloy}. This section provides some of the advantages and disadvantages of Alloy in relation to other formal specification languages.
	\item \textbf{Test Yourself!}. Once the users have finished reading the above sections, they have an opportunity to test their knowledge in this section.
	\item \textbf{Glossary}. The ``Glossary'' provides a short reference to some of the Alloy keywords.
	\item \textbf{FAQs}. This is the frequently asked questions that addresses common problems that users may have.
	\item \textbf{Final Thoughts}. We have given our opinions on Alloy in this section.
\end{enumerate}

\subsection{Java Web Start Issues and the Flash Demo}
Ideally, we would have wanted to have Alloy running in a frame on the website next to the tutorial. Unfortunately, this would have required embedding Alloy in an Applet and, as there is no official Applet version, digging into and modifying its source code. The next best solution would have been to provide a Java Web Start version so that the user can download and launch Alloy with a single click from the website. \newline


Alloy used to support Java Web Start, however its 
\htmladdnormallink{homepage}{http://alloy.mit.edu/alloy4}
\footnote{http://alloy.mit.edu/alloy4}
states that this is no longer the case for the current version (4.1.5). Naively, we tried repackaging the original distribution of Alloy ourself so it could be distributed with Java Web Start. We managed to produce a runnable version that however produced errors whose cause we were unable to determine when trying to execute a model. \newline


Therefore, we finally ended up with what can now be seen on the website: A short explanation of how to obtain Alloy and a video that gives an introduction to its user interface. This way, the reader can also the follow the rest of the tutorial on the website if he does not download Alloy. 

\section{Website Layout}
Every page on the website has the main components:
\begin{itemize}
\item The title of the website, �A Guide to Alloy�, which is the same on every page.

\item The menu of the left, which is the same on every page except the menu item of the current page is in bold. It shows a clear visual hierarchy of the website and gives users the option to jump to (almost) any page on the website from where ever they are.

\item The main content, which includes the main text with images. There are ``Next'' and ``Back'' links at the top and bottom of the pages so that the website can be read in order, like a book. The reason for putting these links at the top and bottom is to stop the inconvenience of having to scroll to the top of the page to press ``Next'' on long pages. This is also convenient for someone wanting to quickly browse through the pages, not having to scroll down. The ``Next'' and ``Back'' links were not included in the ``Test Youself!'' section as this may confuse users as to whether it will take them to the next section of the website (Glossary) or to the next question.

\end{itemize}


\section{Choice of Colours}
For the design of the website we chose a four-colour scheme: Blue, Gold, Grey, White. For the main content we used black and white to ease reading. We used blue and gold for the menu as 
they are opposite colours so they contrast each other and items will be easily read by colour blind people. In order for the title ``A Guide to Alloy'' stands out from the menu, white was used for the text. To give an indication to the user where in the website he/she is, the selected menu item is bold. \newline


The default hyperlink colour of blue was kept as this is recognised by most users as text that can be clicked.\newline


For the ``Test Yourself!'' section it was decided that the explanation for a correct or wrong answer has a green or red background respectively. The reason for this is so that users will 
get instant feedback about whether or not they have answered correctly and if they want to find out more they would read the explanation of the answer.
	
\section{Using PHP}
Initially we were going to use frames, splitting the content of the website. This was so that we have one file as a template and have a content frame. Although this approach would have saved us from the problem of long pages (scrolling), it may have caused a few problems for someone browsing the website:
\begin{itemize}
\item If someone was to visit the website through a search engine, it may take them to the contents of the frame rather than the whole frame-set, causing navigation through the website difficult.

\item When the user wants to bookmark a specific page most browsers will always bookmark the first page (i.e. the homepage).

\item Layout may change across different browsers.

\item Changing content in more than one frame will change the behavior of the back button.

\item Someone wanting to print the page directly from the website will not be able to do so, they would have to copy and paste the text into another file.

\end{itemize}

We had a few options to get around this problem. One was to use Server Side Includes (SSI) another was to use PHP script, we used the latter as it offered us more flexibility than SSIs.\newline


We created one PHP file which contained the template of the website. It consisted of a layout for the website and the ordering of the pages (used for the menu and the ``Next/Back'' buttons). 
Every page included this template file. For the ``Test Yourself!'' section there is an extra PHP file that is included, this is the questions template. The reason for this is to order the questions and 
have a consistent layout.
