COM1008: Web & internet technologies

Assignment: Website

James Roberts

Development & TestingThis document contains all the information about how the website was created and

tested.

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 follow the movement of the mouse

This will be implemented by calculating the position of the mouse, relative to the canvas. Calculating the position of the racket and moving the position of the racket towards the position of the mouse.

Computer Must respond to the ball movements and attempt to hit the ball Needs to not be perfect so the user can actually win

This will be implemented by calculating the position of the ball and calculating the position of the racket. The racket will then move towards the ball by adding or subtracting a value from the current position. This value will not be 100% so the computer will not always reach the ball in time, thus the player can win.

Ball Must move across the screen Must bounce off the top walls Must bounce of each racket Must send message if ball is missed by racket

The ball will have a velocity and speed, every time the animation frame is loaded these variables will change its position variables and therefore the ball will move. There will be a check to see if the position is higher or lower than the top and bottom of the canvas, if so the velocity will be reversed and therefore the ball will bounce. If the position of the ball is equal to the position of a racket the ball’s velocity will also be reversed depending on which racket was hit. The velocity will also be changed so the ball comes of at an angle if it is hit by the top of bottom of the racket, this will make the game fun. Finally if the x position of the ball is past one of the rackets then you know the ball has been missed and the game has been won so the ball returns to the centre.

ResponsivityIn order to keep the game functional enjoyable the canvas width will flow with the resizing of the page however the height will remain the same. This keeps the game easy to play as when the height of the canvas is shrunk it becomes too small to control the racket. Thus on small mobile devices the game is unavailable as it cannot fit the screen and error message will be supplied.

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.

StructureThe 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

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 SystemAlthough the menu system was 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.

StylingThe 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.

BlogThe 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 DesignFigure 3: Initial Design

DiamondOnly 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

Fall back StrategiesThe 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.

TestingI 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.

Figure 7: Developer tools showing how the site displays on an iPhone 5

Figure 8: Testing in Internet Explorer