Phase 2

November ~ December 2015

The first aspect of the website that was created was a basic plan of all the sub-parts that were to be included on the site so that a visual aim for the website was ready for the developers to work towards. The plan (left) was started and completed in November using the interactive whiteboard. The basic concept was then compiled into the html and css banner that remains unchanged at the top of all pages of the website (except for additional links that have been added in as the website was developed and they became necessary).

Whilst the navigational panel was being developed, so was the logo for the Particle Physics Society. The two ideas (seen below) that were initially created both referenced the subatomic particles known as electrons and their arrangement into orbitals known as the s-orbital, p-orbital, d-orbital and f-orbital which each contain a different total number of electrons. The more simplistinc logo (below left) just referenced the shape of these orbital above each initial of the society. The second logo however was much more intricate. It focused more around how the muons being detected are an aspect of particles much like the electrons. Therefore it consisted of a picture of the Earth (where the muons are detected) with the initials along the bottom. Around each initial was the simplistic, ring-styled orbital with the correct number of electrons on each one for the letter it was ecasing.

First Logo Draft Second Logo Draft

By this point, the navigation bar had been created, it was the plan to include the page header2.php in every single page that required it using the simple php code;


Computerised draft of the first logo
Computerised draft of the second logo

However, the computers being used to develop the website did not have php correctely installed so that php code can be used when designing the website. Therefore the code for the navigation bar had to be copied into each and every page where it was required. Whilst this works, it makes all of the pages unneccesarily long and large in terms of file size. It also means that if the navigation banner needed altering due to an alteration in the site layout, the code would have to be altered on every single page. Whilst this is very easy to do per page, even copying and pasting the required sections of code still takes more time than would be desired as every page then has to be tested to enure that the code has been successfully implemented.

Whilst this delay was worked around, a computerised draft of the initial two logos was created (left and right). On the left is the computerised version of the first logo whilst the rpicture on the right is the second logo that was drafted. The difference with the initial draft is that the dead space at the top of each orbital has been filled with smaller logos. The logos on either side of the globe is that of Marling School and Stroud High School so that the link to the schools is extenuated and obvious as possible. The logo above the animated picture of the world is the HiSPARC logo. (HiSPARC is the organisation with which the research is taken inconjunction with. For more information about this visit the About the Project Page)

It was then unanimously decided that the final logo should be a properly rendered copy of the second logo. This was then completed and had the white background removed so that the logo would integrate with the background of every environment in which it was needed as seamlessly as was possible. Once this had beeen completed the final logo (below) was completed.

Logo for the Particle Physics Society

Once the navigation pane had been created, the focus moved to getting the finalised logo (above) to feature as the logo of every page in the tab of the web browser. To do this a relative link was inserted in the header of each page. The code (<link rel="shortcut icon" href="Gallery/ppslogo.png">) meant that the picture was taken from the folder where it was stored, scaled down to fit the size avaiable for the logo and displayed next to the title of the page(an element also included in the header of the document).

The next part of the website to be developed was the slideshow that features all the photos on the website and displays them in a random order on the homepage of the site. To do this, all the images from the gallery folder were loaded into the cache for the page as an array. Then in the code the first set logo would be called. It was decided that the best picture to always be the first on the user's screen would be the logo as it is the most generic but also, in a unique way, the most important of the pictures. This picture was then manually loaded into the page in a division specifically for the active slideshow. The location of the logo was also given a unique identifier so that it could be altered by java script code in the rest of the page

With the images already loaded and the logo set to be the first image seen all that was now required was to get the code to change the image. This is easily done by getting java script to select a random number between 0 and the number of images in the array. This number was then implemented into a string that when combined created the id of one of the array images. This image was then inserted at the location identified by the unique identifier that was included when including the logo in the webpage. This meant that the image would be refreshed once. To make sure that the image was refreshed multiple times, the code was turned into a function and immediately after the image had been changed, the function would be called again and a new image would be chosen. However this meant that the pictures were changing immediately and so could neot be seen by the user so a timeout of 2.5 seconds was set so that the java script code waited 2.5 seconds before changing the image thus allowing the images to be seen by the user

January 2016

With the slideshow working, the attention of the website developers turned towards the textual content that needed to be added to the homepage in order for it to be completed. The text that was to be included was an overview of what the website contained. This was aptly coded to show it as a simple two tiered list. The first tier contained the name of the main sections as seen on the neavigation bar whilst the second tier gave the user a brief description of the content of these sections of the webpage so that it is clear where all the information is available.

However, without any additional coding, all this extra text apppeared below the divison that contained the slideshow and was not especially aesthetically pleasing. In order to improve it, the CSS styles sheet that was linked with the page was ammended so that the division could be set as a class known as "floatleft". This floated the division to the left of the screen and wrapped the following text around it with a margin of 20px plus 15px padding. This meant that the text and slideshow started at the same y-coordinate of the screen grid.

With the homepage completed the focus then turned to creating a gallery. It was decided that the pictures should be ordered chronologically to show the progression of the project and the various different aspects of it.

The gallery was to be completed using a concoction of HTML and CSS. This meant that each picture would be given its own personal box within which was contained the image itself and a brief description of the image which acts a narrative of the storyboard-style arrangement. The code also made use of the computers ability to re-order and re-size the images based upon the size of the browser. The maximum arrangment is 4 pictures per row but as the window gets smaller, the pictures get thinner until such a point that the number of pictures per row halves to 2. This will happen again until the gallery is a single-file stream of images running down the page.

Each picture was then independently added with the time period titles being added in as a table so that they retained spacing between the picture above. It was at this point that it was decided to interlace the gallery with the rest of the website by making it synamic and adding identification tags to each individual picture. The tag was the number of the picture in the array that was used on the front page. This means that whenever a picture is clicked upon on another part of the website, the gallery is loaded and automatically scrolled down to show the user the same image.

With this idea in mind, another javascript function was included on the homepage. This function (called "slidelink") meant that when each picture was pressed the link to the picture in the gallery using the identification tags was chosen and loaded. To do this, a tenous if statement was used so that every value of i from 0 to the number of pictures had its own link to the correct image (hence why the id tags were the postion of the image in the slideshow array). This means that there is an if/elseif statement for every single image so the code is quite long but does ensure that the correct position in the gallery is always selected. It was then realised that using the variables and combining them with the correct textual strings, this could be simplified down to just a few lines

With the slideshow completed, the gallery code was finalised. It was decided that upon clicking on an image, it should open, uncompressed in size, in a new tab for the user. The code was also edited so that when the cursor hovers over an image, the border containing the image and its description would change colour to a darker gray to highlight which image was being identified by the cursor. At this point the gallery was completed (asides from adding additional pictures as and when is neccesary)

February 2016

On the 2nd of the month a small delegation of the Particle Physics Society went to the Royal Society in London for a conference about the society and how the Royal Society Partnership Grant was used (See the relevant event page for more information on the event). After this even it was decided that the website would need an events page and a research page. Here all the events that the Society organises/goes to and all research produced by members of the Society can be documented in one location. The basic template of each page was initially used so that a blank page was available to be linked to. Once this was completed additional code was inserted into the navigation bar on ever single page of the website so that the new pages could be easily accesed.

With the blank pages created, the events page was the initial priority to code. It was decided that each event should have its own page. Therefore a contents page was required as the base of this section. This page, which can be found by clicking the main branch of the navigation pane entitled "Events", listed all of the events that the Particle Physics Society has visited in chronological order, grouped by year. To start with the only entry was in 2016 for the Royal Society Conference.

With the outline of the specific event page, this was momentarily left whilst the research page was created. As no research has been created at this point, the page was completed with a simple statement stating as such. With that completed, the exact details of the Royal Society Conference were included. With this completed, it was decided that a footer should be included similar to the navigation pane. This footer would always appaer at the bottom of the event pages and allows the user to move to the next event and previous event. This was so that the user does not have to return to the events contents list constantly. After this, the only admendments to the events section are to add additional events such as CERN trips.

March 2016

The next task of the developers was to create the construction pages. It was initially decided to have all 4 stages of the construction of the Cosmic Ray Detector on one page however it quickly became apparent that this would be inefficiently long and so needs to be split up into 5 pages much like the events section of the website. There was to be a page for the contents of the construction section and one for each phase of the construction process. The layout was extremely similar to the events pages and also uses a similar footer naviagtion bar for the same purpose.