1. COM1008: WEB & INTERNET
TECHNOLOGIES
Assignment: Website
James Roberts
Development & Testing
This document contains all theinformation abouthow the website was created and tested.

2. Game Design
Initially I had intended to develop a maze game however using the mouse move was making
the game too difficult to play and therefore not useful for this site. In the end I settled on
pong as it is easy to use the mouse to control the racket and it is strangely addictive. The
game works by having a computer racket, controlled by AI, moving up and down the screen
and a player racket doing the same but being controlled by the mouse. The ball bounces
between the two players until one misses and then the game starts again.
Player
 Must followthe movementof the mouse
Thiswill be implementedbycalculatingthe positionof the mouse,relative tothe canvas.Calculating
the positionof the racketand movingthe positionof the rackettowardsthe positionof the mouse.
Computer
 Must respondto the ball movementsandattempttohitthe ball
 Needstonotbe perfectsothe usercan actuallywin
Thiswill be implementedbycalculatingthe positionof the ball andcalculatingthe positionof the
racket.The racketwill thenmove towardsthe ball byaddingor subtractinga value fromthe current
position.Thisvalue will notbe 100% so the computerwill notalwaysreachthe ball intime,thusthe
playercan win.
Ball
 Must move across the screen
 Must bounce off the top walls
 Must bounce of each racket
 Must sendmessage if ball ismissedbyracket
The ball will have a velocityandspeed,everytimethe animationframe isloadedthesevariableswill
change its positionvariablesandtherefore the ball will move.There will be acheckto see if the
positionishigherorlowerthanthe top andbottomof the canvas,if sothe velocitywill be reversed
and therefore the ball will bounce.If the positionof the ball isequal tothe positionof aracketthe
ball’svelocitywill alsobe reverseddependingonwhichracketwashit.The velocitywill alsobe
changedso the ball comesof at an angle if itishit bythe topof bottomof the racket,thiswill make
the game fun.Finallyif the x positionof the ball ispastone of the racketsthenyou know the ball has
beenmissedandthe game hasbeenwonso the ball returnsto the centre.
Responsivity
In orderto keepthe game functional enjoyable the canvaswidthwillflow withthe resizingof the
page howeverthe heightwillremainthe same.Thiskeepsthe game easytoplayas whenthe height
of the canvasis shrunkitbecomestoosmall to control the racket.Thus on small mobile devicesthe
game is unavailableasitcannot fitthe screenanderror message will be supplied.

3. Development
Throughout the process elements of the page have changed from the initial design. This has
been due to space constraints and improvements of responsivity.
Structure
The initial site map has not quite been followed. The accessibility pages is no longer part of
the navigation bar, it has been moved to the footer, and the articles are no longer individual
links but part of one page. This has decluttered the menu and made it easier to read and
follow. It also keeps the text big when the page is resized.
Figure 2: The final design
Figure 1: Initial design

4. Notice the circled features showing accessibility is no longer part of the menu structure and
the articles are no longer a drop-down menu but part of the blog page.
Menu System
Although the menu systemwas unchanged it was designed slightly differently to the rest of
the site. The entire sight is built mobile-first however the navigation bar was developed top-
down. A mobile-first approach is where more features are added as the page size increases,
however with my navigation bar more features are added as the page shrinks, that’s why I
thought it was appropriate to use a top-down approach. The navigation bar changes to a
select menu, as in keeping with the planning document, and this is added as the page
shrinks rather than removed when it grows.
Styling
The design of the pages remain in keeping with the planning document however the colours
have changed. After implementing the blue look I had planned to use I found it made the
site look a bit cheap so I have altered them to how they are now and believe they now look
much more professional.
Blog
The blog was designed so that when the screen size shrunk the text would disappear and
only the title would be shown. However on development I deemed this unnecessary as the
articles were not long enough to justify it so I did not implement it. However the pictures
are removed when the screen size shrinks so the words can be displayed more clearly.
Notice the exclusion of the dropdown option.
Figure 4: Final Design
Figure 3: Initial Design

5. Diamond
Only a slight change of the diamond page and this is the poisoning of the images. As many
are needed it would not be appropriate to put them amongst the text so I have put them
below in a grid formation. As there are many photos I have also loaded them using
JavaScript as not to effect the loading time of the rest of the page.
Figure 6: Final Design
Notice how the positioning of the images is now in a grid at the bottom of the page.
Figure 5: Initial Design

6. Fall back Strategies
The site is fully functional in the latest two version of major web browsers however
consideration needs to be given to users with older browsers. The fonts all have a fall back
so can be displayed on any device and also all images contain alt tags which will display if
images cannot be loaded. If I have also included a normalize file which returns a style to
browser default if the one I have implemented cannot be displayed. This is useful as it
improves usability at makes the site more consistent across browsers. I chose to use
normalize over reset as it keeps browser defaults rather than removing styles all together. It
also includes display settings for HTML5 which is useful as a large amount of my site uses it.
Security Issues
The contact part of the page involves an email being sent from the page to my email
account and this could involve some security issues. One of the main issues is that the input
boxes are vulnerable to cross-site scripting as users can input malicious code. To deal with
this I need to validate the content client & server side. Escaping data would be a good
method as this ensures the data is only interpreted as a string and not mark-up.
Eavesdropping could also be an issue if people intercept the data. To avoid this an
https connection should be used so the data is encrypted during transmission. This also
creates a secure channel which increases the safety of the data.
Some consideration towards security has already been made. Email addresses are
validated to prevent users sending bad data. Also the push method is used rather than get.
This is because it does not store the parameters it sends in browser history or web server
logs, it is also not displayed in the URL.
Testing
I initially used the W3C validators to check my code was correct. This was useful as it
through up a number of errors in my HTML from where I had changed content but forgotten
to remove old tags etc. This has made my code very clean and easy to understand. It also
validated my CSS and this is shown by the award displayed at the bottom of the page. I have
also been using Google chromes developer tools to show how the site will display on mobile
devices and this has been very useful to check my styles are working correctly. Once the site
is online it would be useful to use tools such as browser shots to test functionality across
lots of versions of many browsers however it does not work for offline sites in development.
As a result I downloaded all the major browsers and tested that all the site pages loaded as
expected and they did. Unfortunately Safari appears to no longer be available for Windows
so I have been unable to run tests on this browser.

7. Figure 7: Developer tools showing how the site displays on an iPhone 5
Figure 8: Testing in Internet Explorer