UNIVERSITY OF MANCHESTER

SCHOOL OF COMPUTER SCIENCE

BSc (Hons) Computer Science

A Website for Football League Statistics

Author: Antonis Antoniou
Supervisor: Prof. Sophia Ananiadou
April 2015
 ii

Abstract
Football is one of the most (if not the most) popular sports in the planet. Millions of fans are
watching football games every day around the globe. Likewise, by in a different manner, web is
used by millions of people every day for searching purposes, for reading the news or for keeping
updated with their favorite team's latest news.

This report describes how football and the web can be combined in an attempt to produce a
website for football league statistics. The steps taken to define the problem, find the best solution
and develop it are listed along with the final outcome of the website. Additionally the ways of
evaluating and testing the website are also mentioned. Finally, possible improvements to the
website are described as well.

A Website for Football League Statistics

Author: Antonis Antoniou
Supervisor: Prof. Sophia Ananiadou
April 2015
 iii

Acknowledgements
I would like to thank my supervisor, Prof. Sophia Ananiadou, for her continuous help and guidance
throughout the duration of the project.

I would also like to thank my parents for their help and support during my academic years.

Thanks go also to my friend Margarita Gregoriou for her support and motivation during the project
and to all the people who helped me and found the time to test the website and provide feedback.
 iv

Table of Contents
Abstract ................................................................................................................................................................. ii

Acknowledgements .............................................................................................................................................. iii

Table of Contents.................................................................................................................................................. iv

List of Figures ........................................................................................................................................................ vi

List of Code Samples ............................................................................................................................................ vii

List of Tables ....................................................................................................................................................... viii

1 Introduction .................................................................................................................................................. 1
1.1 Motivation ...................................................................................................................................................1
1.2 Aims and Objectives ....................................................................................................................................1
1.3 Overview ......................................................................................................................................................2
1.4 Glossary .......................................................................................................................................................2

2 Background ................................................................................................................................................... 3
2.1 Web .............................................................................................................................................................3
2.2 User Experience ...........................................................................................................................................3
2.3 Existing Technologies ..................................................................................................................................3
2.3.1 Resource 1 ..............................................................................................................................................3
2.3.2 Resource 2 ..............................................................................................................................................4
2.3.3 Resource 3 ..............................................................................................................................................5

3 Design ........................................................................................................................................................... 6
3.1 Requirements ..............................................................................................................................................6
3.1.1 Functional Requirements ........................................................................................................................6
3.1.2 Non-Functional Requirements ................................................................................................................7
3.2 Use Cases .....................................................................................................................................................7
3.3 Design Decisions ..........................................................................................................................................8
3.3.1 Interactive Web Design ...........................................................................................................................8
3.3.2 Responsive Web Design ..........................................................................................................................9
3.3.3 Data Visualization ...................................................................................................................................9
3.3.4 Initial Designs ........................................................................................................................................10

4 Implementation .......................................................................................................................................... 12
4.1 Development Methodology .......................................................................................................................12
4.2 Web Hosting Service ..................................................................................................................................12
4.3 Development Environment ........................................................................................................................13
4.4 Technologies Used .....................................................................................................................................14
4.4.1 HTML5 ...................................................................................................................................................14
4.4.2 CSS ........................................................................................................................................................14
 v

4.4.3 PHP........................................................................................................................................................15
4.4.4 JavaScript ..............................................................................................................................................15
4.4.5 AJAX ......................................................................................................................................................15
4.4.6 SQL ........................................................................................................................................................16

5 Results ........................................................................................................................................................ 17
5.1 Homepage .................................................................................................................................................17
5.2 Statistics Page ...........................................................................................................................................19
5.3 League Tables Page ...................................................................................................................................20
5.4 Profile of Team Page .................................................................................................................................21
5.5 Compare Teams Page ................................................................................................................................23
5.6 Contact Us Page ........................................................................................................................................24
5.7 Back-End ....................................................................................................................................................25

6 Testing & Evaluation ................................................................................................................................... 28

6.1 Evaluate Performance ...............................................................................................................................28
6.1.1 Speed Rules ...........................................................................................................................................28
6.1.1.1 Enable Compression ....................................................................................................................28
6.1.1.2 Minify Resources .........................................................................................................................29
6.1.1.3 Leverage Browser Caching ...........................................................................................................30
6.1.1.4 Optimize Images ..........................................................................................................................30
6.1.2 Usability Rules .......................................................................................................................................30
6.2 Validate HTML ...........................................................................................................................................30
6.3 Testing .......................................................................................................................................................31

7 Conclusion .................................................................................................................................................. 32
7.1 Achievements ............................................................................................................................................32
7.2 Future Work ...............................................................................................................................................32
7.3 Report Summary ........................................................................................................................................33

References ........................................................................................................................................................... 34

Appendix A: Plan ................................................................................................................................................. 36

Appendix B: Survey Results.................................................................................................................................. 40

 vi

List of Figures
Figure 2.1: Screenshot from the profile of Chelsea ............................................................................... 4
Figure 2.2: statto.com does not provide good user experience ............................................................ 4
Figure 2.3: The homepage of whoscored.com ...................................................................................... 5
Figure 3.1: Use Case Diagram ................................................................................................................ 8
Figure 3.2: PC & Tablet Sales. ................................................................................................................ 9
Figure 3.3: Table showing the sales ..................................................................................................... 10
Figure 3.4: Graph showing the sales .................................................................................................... 10
Figure 3.5: Initial design of the Homepage .......................................................................................... 11
Figure 3.6: Initial design of the Teams' Profile page ............................................................................ 11
Figure 4.1: XAMPP Control Panel ......................................................................................................... 13
Figure 4.2: Code sample with text coloring using Sublime Text 3 ....................................................... 14
Figure 5.1: How the homepage is displayed using laptops [17] .......................................................... 17
Figure 5.2: How the homepage is displayed using mobile phones [18] .............................................. 17
Figure 5.3: The homepage ................................................................................................................... 18
Figure 5.4: The table as it is displayed in the homepage (La Liga 2014-2015) .................................... 18
Figure 5.5: Latest Results (Premier League 2014-2015) ...................................................................... 18
Figure 5.6: Next Fixtures (Serie A 2014-2015) ..................................................................................... 19
Figure 5.7: The statistics page using laptop ......................................................................................... 19
Figure 5.8: The statistics page with the "Select Year" pressed using a mobile phone ........................ 20
Figure 5.9: The league table page as it is displayed on laptops ........................................................... 20
Figure 5.10: Screenshot of the league table page taken from a mobile device .................................. 21
Figure 5.11: Profile page of Liverpool (2014-2015) ............................................................................. 21
Figure 5.12: The graph showing the league progress with the twitter panel ..................................... 22
Figure 5.13: The Results and Fixtures panels....................................................................................... 22
Figure 5.14: Comparing two teams (Liverpool vs Stoke 2014-2015) ................................................... 23
Figure 5.15: The league progress and the results between the two teams ........................................ 23
Figure 5.16: The all-time statistics of the two teams .......................................................................... 24
Figure 5.17: The Contact Us page as it is displayed using laptops ...................................................... 24
Figure 5.18: The warning message ...................................................................................................... 24
Figure 5.19: Warning signs that two fields are not completed. Screenshot from a mobile phone. ... 25
Figure 5.20: Create a new League ........................................................................................................ 25
Figure 5.21: Add new season ............................................................................................................... 26
Figure 5.22: Select which round to update .......................................................................................... 26
Figure 5.23: Update the matches from the selected round ................................................................ 26
Figure 5.24: Choose a league to add or update scorers ...................................................................... 27
Figure 5.25: Add scorers ...................................................................................................................... 27
Figure 5.26: Update or delete scorers from the selected league ....................................................... 27
Figure 6.1: Typical HTTP response ....................................................................................................... 29
Figure 6.2: Compressed HTTP Response.............................................................................................. 29
 vii

List of Code Samples

Code Sample 4.1: Writing code using shortcuts .................................................................................. 13
Code Sample 4.2: Code generated by the above shortcut .................................................................. 13
Code Sample 6.1: Enable gzip compression ........................................................................................ 29
Code Sample 6.2: Standard CSS code with comment .......................................................................... 29
Code Sample 6.3: The generated minified code of the above code sample ....................................... 29
Code Sample 6.4: Configure the viewport ........................................................................................... 30
 viii

List of Tables
Table 3.1: Functional requirements categorized using the MoSCoW technique .................................. 6
Table 3.2: The non-functional requirements of the website ................................................................. 7
 1

1 Introduction
Websites are constantly increasing and as the time goes by, they become more demanding. The
Internet nowadays, is very popular and is accessible from everyone and from everywhere.
Additionally, football is one of the most popular sports in the planet and attracts millions of fans.
There is a large number of football websites providing statistics and results for every league, every
team and every player.

This report provides an approach of creating an interactive website for some football leagues and
ways of displaying the statistics about them.

This chapter outlines the motivation, aims and objectives behind the project, an overview of the
report and a glossary about some terms used in the report.

1.1 Motivation
As a football fan, I spend my free time watching football and viewing different statistics about my
favorite teams. The problem is that there are no great websites to fulfill my expectations and I was
switching between multiple websites to find what I was looking for. Therefore, I decided to build a
platform, called MyStats, which allows the user to find all the statistics about the three (3) major
European leagues, English Premier league, Spanish La Liga and Italian Serie A.

Apart from that, I had some personal learning goals as well. My major goal was to learn and
improve my Web Programming skills. I combined my favorite sport, football, with web
programming so that I would be interested on what I was doing and I believed that this helped me
to learn lots of new things. By doing this project I hoped to learn D3.js1 which is a JavaScript
language used for better visualization. My final personal goal, which may apply on every project,
was to improve my time management skills. I had to organize my time to produce the best I could
for both the project and any other possible coursework.

1.2 Aims and Objectives

The main objective for this project is to develop a platform that provides collective statistics about
the three leagues discussed.

In more detail the aims of this project are:

1. The users will be able to find lots of statistics about the leagues for the past four seasons,
including the current one.
2. The users will be able to see a profile of each team participated in those leagues, in the
included seasons, and compare a team's performance with another team of the same
league.
3. The website must be displayed on every available device, from the smallest smart phone to
the largest desktop, for better user experience.

1
Explained in more detail in Chapter 4.4.4
 2

1.3 Overview
Chapter 1 outlines the motivation of developing this platform along with the aims and objectives for
the project.

Chapter 2 outlines the background knowledge on the selected topic and describes some existing
websites which are related to this project.

Chapter 3 describes the decisions made at the start of the project, listing the steps taken to define
the problem.

Chapter 4 explains the implementation phase of the platform and the tools that were used to
develop it.

Chapter 5 demonstrates the results showing the key functionalities of the website.

Chapter 6 lists the different ways used to evaluate, validate and test the website.

Chapter 7 summarizes the content of this report and outlines any possible improvements that could
be made in the future.

1.4 Glossary
 AJAX - Asynchronous JavaScript and XML
 CSS - Cascading Style Sheets
 D3 - Data Driven Documents
 HCI - Human-Computer Interaction
 HTML - Hyper Text Markup Language
 IDE - Integrated Development Environment
 IWD - Interactive Web Design
 JS - JavaScript
 MoSCoW - Must, Should, Could, Won't
 PHP - Hypertext Preprocessor
 RDBMS - Relational Database Management System
 RWD - Responsive Web Design
 SQL - Structured Query Language
 UI - User Interface
 W3C - World Wide Web Consortium
 WWW - World Wide Web
 XAMPP - X (Cross-Platform) A (Apache) M (MySQL) P (PHP) P (Perl)
 3

2 Background
2.1 Web
Over the past few years websites are becoming more and more popular. This is shown by the fact
that in April 2014 a survey contacted by Netcraft showed that there are 958,919,789 sites available
to access [10]. This is just under 1 billion websites, which demonstrates how rapidly the web is
evolving since its discovery in 1991. Moreover it shows that is well inside people's life and
everything is connected with it.

The main international organization providing the standards for the WWW is the W3C. It was
founded in 1994 and is responsible for making available recommendations about the best ways of
developing a website for better user experience. Some of the most common standards are HTML,
RDF, XML, CSS and SPARQL.

2.2 User Experience

User experience focuses on making a system easier for people to use it. In order to do that, we
need to know what the user wants and try to adapt the system to users' personal needs, instead of
forcing the user to adapt to the system. This also applies for web applications as well. A web
developer cannot design a website and expect from every user to find it easy to use and navigate in
the website. This is because people tend to think about any potential issues such as accessibility at
the end of a project where is too late to change it and make it accessible to all users. Universal
Design "[...] is a discipline that should be included in the original specifications of a product, site, or
application; and revisited throughout the development, refining, and launch of an application" [3].
Furthermore, accessible is a product that can be used by people with disabilities and by those
without any disabilities. Accessibility is for everyone and this is shown by the fact that a website
must be accessible from all possible devices. If the developer of the website does not take into
account everything, then the final product will not be effective and it will fail. Thus, I had to take
into account from the beginning of the project some accessibility issues, e.g. how the website
would look like in a mobile phone or a tablet, to help me design the website in order to be efficient
and effective.

2.3 Existing Technologies

The following section presents a few other existing technologies which served as a guidance for
developing my website. The goal is to find out more about already existing websites about football
statistics and it is important to study them, understand their mistakes and try to avoid them.

2.3.1 Resource 1

http://www.worldfootball.net/ is one of the best online resources for being informed

about the news from almost every league. Their homepage is very good, showing the latest news of
the football world. Moving on to the other pages, the user can find almost everything he/she is
looking for, results and fixtures, tables, top scorers, even information about stadiums and referees.
The only thing that is missing is that it does not provide too many statistics about the teams. The
 4

profile page of a team has all the latest news, pictures, videos, results, fixtures and a list with the
players, but in spite that it does not provide anything related to statistics.

Figure 2.1: Screenshot from the profile of Chelsea

2.3.2 Resource 2

http://www.statto.com is another useful website for any fan that loves statistics and
comparing team performances. It has a great amount of data, which for most teams goes back to
their first season in the league. The homepage is not an ideal homepage because there are too
many things. For example on the left side there is a panel with the latest news, in the middle there
is a panel with matches and match odds and on the left side there are panels with tables, statistics
and ratings. Clicking in the "STATS" button we can find all competitions in a single page which is not
great for the user. Additionally, all panels are green and purple and the design is not so good which
in my opinion is not very professional for such a well-known website. A significant drawback is that
it is not designed for smaller devices and forces the users to scroll horizontally in their tablets
making it harder for them to visit it again.

Figure 2.2: statto.com does not provide good user experience

 5

2.3.3 Resource 3

http://www.whoscored.com/ is the final site I investigated prior my website development.

This website provides all kind of statistics for every team and every player. In my opinion this
website is by far the best I have visited so far. In the homepage the user can find a table with live
scores from teams playing at that moment and also a news feed including the latest news, previews
for next matches and comparisons between teams and players. The menu provides options to view
more statistics about each league separately or combined stats from all leagues and links to more
news, articles or videos. The design of the page is very good, is not boring and football fans should
be very pleased when visiting that page. The only disadvantage is that it is not designing for smaller
screen devices as someone would expect from such a famous website.

Figure 2.3: The homepage of whoscored.com

 6

3 Design
This chapter outlines the first steps taken for developing the platform such as requirements
gathering and defining the use cases, and other important decisions about the structure of the
website.

3.1 Requirements
One of the first steps in the process of developing a new software is to collect both the functional
and non-functional requirements. Requirements gathering is essential part for any project because
being able to identify almost all the requirements early in the development process, it will save lot
of time later in the implementation and it will also have a reduction in the project budget (if the
project is funded). The key point to successfully collect the requirements is "[...] to understand
users' problems [...] and to build systems that meet their needs" [7], otherwise the project will fail.

3.1.1 Functional Requirements

Functional requirements specify the functionality of the system. In other words, they define what
the system should do. I used the MoSCoW method to prioritize my system's requirements.
MoSCoW [8] is a technique used to specify priorities to requirements and it helps the developer to
know which of them are important to implement and which are not.

The functional requirements can be found on the table below.

MoSCoW Rules Description

Must Have 1. Show current league tables

2. Create a graph with teams' league progress
3. Show the statistics of the teams
4. Show top scorers and league tables for every year
5. Extract statistics from results
6. Compare two teams
7. Create a back-end for the website
Should Have 1. Show fixtures and results of each league
2. Create a bar chart with the points of each team
3. Show all-time league tables and all-time scorers
4. Create a search functionality
Could Have 1. Show the teams' form
2. Create a twitter news feed for each team
Won't Have 1. Implement live score functionality
2. Add more leagues
3. Create a mobile application
Table 3.1: Functional requirements categorized using the MoSCoW technique

All the "Must", "Should" and "Could" requirements were implemented beginning from the
requirements with the highest priority first. It was decided that the "Won't" requirements were not
 7

going to be implemented at that point due to the lack of time and that they might be left for any
future work on the project.

3.1.2 Non-Functional Requirements

In addition to the functional requirements of the system describing its features, there are other
requirements that do not describe anything, rather they define the attributes of the system. In
1992, Grady [6] separated the non-functional requirements into four categories:

1. Usability
2. Reliability
3. Performance
4. Supportability

I kept that in mind and I split the non-functional requirements into these four sections.

Section Description Priority

Usability 1. Keep the website as simple as possible. High

2. Design the website to be as visually appealing as possible. Medium
3. Rename the URL to a more user-friendly name Low

Reliability 1. Redirect to an error page when user mistypes the URL. Medium

Performance 1. Load every page in as less time as possible. High

Supportability 1. The website should be supported in all modern browsers. High

2. The website should be able to be displayed to all devices. High
Table 3.2: The non-functional requirements of the website

3.2 Use Cases

The next step after defining the initial requirements of my system was to create a Use Case
diagram. A Use Case lists all the interactions between users (known as "actors") and the system. It is
considered as a detailed description of the functional requirements of the system aiming to analyze
them in order to understand them. On the other hand, a Use Case diagram is a graphical
representation of these interactions which shows the relationship between actors and the different
use cases. Figure 3.1 displays the use cases of my website along with the actors and the interactions
between them.
 8

Figure 3.1: Use Case Diagram

3.3 Design Decisions

3.3.1 Interactive Web Design

Interactive Web Design is the process of creating unique and user-friendly websites. This involves
using various tools that "[...] allow user interactions with a website to be simple and
straightforward" [22], to create the UI and present the information to the users. The interactive
design belongs to the HCI category which, unlike User Experience which focuses on the user needs,
its primary concerns are the interactions between users and computers. HCI is a general term for all
these interactions, but IWD is about facilitating the interactions between users and websites.

There are many aspects of web designing that one has to take into account, but the most important
is the UI. The goal is to create the UI in such way so that it would be visually appealing and simple to
use at the same time. The UI is the way the user will navigate through the website and use it. This
requires the use of buttons, menus, links, graphs and other things that would make the website
attractive. Furthermore, in order for the user to engage even more, the website may have
animations so that when the user clicks on a button some elements of the website would change
their positions in the screen. Another example is when hovering over some elements and these
change their color or trigger something else, e.g. a tooltip for an explanation.

These are all very exciting, but the designer must be careful. Designing the website to be too
interactive, "[...] the layout can become overwhelming and hinder a user" [22]. This is caused due to
too many things on the page which would distract the user or too many menu options for
navigating though the website which would make it difficult for the users. The result would be that
the users would be distracted and eventually annoyed by the layout of the page and a potential
defamation may follow.
 9

The key is to have a simple UI which gives only the essential information that the user needs to
navigate through the website. By switching between the pages more information will appear to
every page, but these information will be related to the specific page making things simpler for the
user.

3.3.2 Responsive Web Design

RWD is a web design approach aiming to improve the user experience by making the viewing of a
website possible to a variety of devices - from large desktops to small-screen mobile phones - and is
becoming very popular the last few years. This is shown by the fact that in 2013 PC sales have
recorded about 10% decline in their sales, which is the worst in history since 2001 [9], whereas the
tablet sales have continued to be increasing (see Figure 3.2).

PC & Tablet Sales

400
350
300
Milliins of Units

250
200
150 PC
100 Tablet
50
0
2012 2013 2014 2015 2016
Year

2
Figure 3.2: PC & Tablet Sales .

Keeping that in mind, I decided that users should be able to view my website in their preferred
device without experiencing any problems. To succeed that, I used an open-source framework
called Bootstrap, which is "[...] the most popular HTML, CSS and JS framework for developing
responsive, mobile first projects on the web" [11].

3.3.3 Data Visualization

In general data visualization is "[...] a set of methods for supporting humans to understand and
analyze large, complex data sets" [25]. Humans are not like machines which can understand
everything in any given format. They need to visualize things in order to understand them and
process them much more easily. As Tufte said "graphical excellence is that which gives to the viewer
the greatest number of ideas in the shortest time with the least ink in the smallest space" [24]. Thus,
is more preferable to visualize the data using graphs and charts rather than just using a table.

2
Numbers are rounded to the nearest thousand. Source: Gartner (January 2015) [14], [15], [16]
 10

The next two figures [19] give exactly the same information but it is much easier to extract
information from the graph rather from the table, for example when trying to find the month with
the highest sales.

Figure 3.3: Table showing the sales

Figure 3.4: Graph showing the sales

The same applies for a football website as well. It is much easier to find a specific information about
a team at a given time by looking at the graph, e.g. a team's position at a specific round or how
many points the team had at that round. In addition to that, results are marked with a dot and each
result has a different color to help the user find what he/she is looking for. Moreover, a simple
animation is used for displaying the bar chart corresponding to the points of each team when the
user presses the required button. Instead of popping up the bar chart, when the button is pressed,
it comes up smoothly. When the animation is simple, like this one, and does not require a large
number of changes, "[...] it is quite simple to understand what has happened, and the viewer can
trace the changes easily" [4].

Data visualization is a large topic and there are lots of techniques to help with it. Because of that,
designers must find the appropriate visualization technique depending on what they are trying to
visualize. By doing the opposite and putting everything together, as good as each technique is
individually, the result will get more complex and users may find it difficult to understand it.

3.3.4 Initial Designs

Before the implementation of the website, the designs of how each page would look like were
made. These designs acted like a guidance during the development of the website. Figure 3.5 and
Figure 3.6 are the first designs of the website's homepage and the profile of a team page
respectively.
 11

Figure 3.5: Initial design of the Homepage

Figure 3.6: Initial design of the Teams' Profile page

Although these designs helped me and saved me a lot of time trying to think what to do next, some
of them were reviewed during the implementation phase. Better ways of designing the website
were found which would make it more attractive and therefore I had to reorganize the structure of
some of the pages.
 12

4 Implementation
4.1 Development Methodology
For my project I decided to follow an Agile development process. The Agile Manifesto lists four
ways that are better for developing software:

 Individuals and interactions over processes and tools

 Working software over comprehensive documentation
 Customer collaboration over contract negotiation
 Responding to change over following a plan

That is, while there is value in the items on the right, we value the items on the left more. [2]

The key ideas of an Agile Software Development is to avoid wasting time by committing to deliver
real value early in the project and to have frequent contact with the users who give their feedback
about the project. The biggest advantage of an Agile process over the classic Waterfall model is that
we can deal with requirements changes as they are expected to change throughout the process
while the Waterfall model struggles to cope with this as it expects all the requirements to be
gathered very early in the process.

There are lots of agile practices to choose from to apply them to my project, but I chose to use
Short Iterations. The basic idea of this practice was to divide my available time into smaller parts,
iterations, and at the end of each iteration I should had something ready to show.

4.2 Web Hosting Service

A web hosting service allows "[...] individuals [...] to make their website accessible via the World
Wide Web" [21]. I had two options to choose from; the first was to use the university's server and
the second was to use a local server and store the files locally in my laptop. I preferred to use a local
web server, called XAMPP, rather than the university's server because the university's web server is
only accessible through the university's computers. On the other hand, using a local server I could
modify and save any file any time I wanted from my laptop and this was more convenient for me.

XAMPP is a free and open-source web server which is installed very easily on every machine. It
includes a server application (Apache), a database (MySQL) and a scripting language (PHP). It is
accessible through a web browser by simply typing http://localhost. Additionally, it allows
the web pages to be displayed on other devices on the same network, such as tablets and mobile
phones, by typing the IP address of the device where the XAMPP is installed followed by the path of
the website for example http://192.168.10.13/proj/index.php.
 13

Figure 4.1: XAMPP Control Panel

Although I could access the website from my laptop, other people couldn't access it because it was
stored locally on my laptop. So, I used a friend's web server to make my website accessible through
the Internet, so that potential users can access it and give me their feedback. The website can be
found on http://moisish.com/mystats.

4.3 Development Environment

Sublime Text Editor, which is "[...] a sophisticated text editor for code, markup and prose" [20], was
used throughout the duration of the implementation phase of the project. I chose to write all the
code using a text editor and not a particular IDE because Sublime has lots of features that I could
use and a great user interface. Firstly, it has lots of shortcuts that I could use which were easy to
remember and saved me a lot of time. For example, typing:
1 .container#menu-container
Code Sample 4.1: Writing code using shortcuts

and then pressing the Tab button, the above code automatically becomes:
1 <div class="container" id="menu-container">
2
3 </div>
Code Sample 4.2: Code generated by the above shortcut

Secondly, Sublime has the ability to "remember" all the names of the variables I used, even the IDs
of the different elements of each file. This prevents me from mistyping a variable and reminds me
the names in case I forgot them. Lastly, it has a great user interface and it allows the user to adapt it
to his/her needs by customizing the style and the colors of the characters or changing the
background color.
 14

Figure 4.2: Code sample with text coloring using Sublime Text 3

4.4 Technologies Used

4.4.1 HTML5

HTML is used for creating websites and presenting them to the Internet. It was first introduced by
Tim Berners-Lee in 1991 and in 1995 the release of "HTML 2.0" was published as a W3C
recommendation. HTML5 is the fifth version of HTML. It was released as a draft in 2008 and it was
published in October 2014 as a W3C recommendation.

At first, I was skeptical about using it for my project fearing that is not worth my time to use it, as
only modern browsers support it. But after a lot of research, I decided to use it because it offers lots
of advantages and that browser support would not be an issue. In fact, it is cross-compatible with
all the major web browsers, including Chrome, Firefox, Safari and Internet Explorer (from IE9).
Another huge advantage is that HTML5 is optimized for creating websites that can be presented to
devices with different screen sizes. This is important because, nowadays everyone needs to be able
to view a website on their preferred device and HTML5 supports this functionality across all
devices.

4.4.2 CSS

CSS is a style sheet language used for adding style and formatting a web document. It was created
by the W3C to solve the problem of adding fonts and color specifications to every single page of a
website. Since HTML 4.0 all code related with styling and formatting should be removed from HTML
files and stored in a different CSS file. In this way we can change the appearance of the website but
changing only the file that contains the CSS styling code. This separation reduces the complexity of
the website and provides consistency by ensuring that all pages have a consistent style.
 15

For my project I used CSS3 which is the latest standard for CSS and, like HTML5, is a W3C
recommendation. CSS3 offers a variety of new features, including animations, transformations and
queries which allows the developer to specify different styles on the code depending on browser
window size.

Overall it's an easy language to learn, however some new features of CSS3 are trickier and I needed
to make further research to ensure that I would use them properly.

4.4.3 PHP

PHP is an open-source, server-side scripting language generally used for developing web
applications. PHP is widely used because it can run on any platform (Windows, Mac OS, Linux, etc.)
and is compatible with multiple servers (e.g. Apache). A major benefit of PHP 5, which is the current
version of PHP and which I used it for my project, is that it has a full object model. In other words, it
is object-oriented which helped me organize my code.

Except from my First Year Team Project, I haven't used PHP again. Therefore, I had to make some
research prior to the implementation of the website with the purpose of understanding how it
works and familiarize myself with the new features of PHP 5 and in particular with the object
model.

4.4.4 JavaScript

JavaScript was developed by Brendan Eich in 1995 and the latest standard is JavaScript 1.8.5 which
was released in 2010. It is used by all modern web browsers "[...] making JavaScript the most
ubiquitous programming language in history" [5] and it is able to change the content of a webpage
dynamically.

Except from plain JS, I also used another two JavaScript libraries, jQuery and D3.js. jQuery is the
most popular JavaScript library and is supported by all modern browsers. Additionally, it has a
simple and easy-to-use API which makes event handling and HTML document manipulation simpler.

D3.js is another JavaScript library for "[...] manipulating documents based on data" [13]. It exploits
the full capabilities of modern browsers by offering great visualization for users through smooth
transitions and transformations. It also has simple mouse interaction instructions, simplifying the
developer's job and making the website more interactive.

Learning D3 was one of my personal learning goals and as a technology that was completely new to
me and I had to make sure that I would spend as much time as I needed to learn how to use it
efficiently.

4.4.5 AJAX

AJAX is not a programming language as many people think. It is a technique for creating dynamic
websites and is used on the client-side of a website for exchanging data with the server. With AJAX
the website can send and retrieve data from the server in the background and update parts of the
web page without having to reload the whole page.
 16

Like D3, I didn't have a knowledge of AJAX or how it works, but after some research on the web, I
managed to learn it and use it for my website. I used an AJAX framework provided by jQuery, and
combined with jQuery UI, a jQuery plug-in, they provide the necessary features for displaying the
data dynamically.

4.4.6 SQL

SQL allows us to manage data in an RDBMS. It was introduced in the early 1970s by Donald D.
Chamberlin and Raymond F. Boyce and by 1979 it was commercially available. I had some prior
knowledge of SQL, as we have been taught about it in our "Fundamentals of Databases" course in
the second year using Oracle's Database. Although I was familiar with it, some further research was
required as I had to use more complicated queries to retrieve the data from the database.
 17

5 Results
This chapter discusses the results of the platform. Each webpage will be shown, describing the most
important functionality of each page. The results show how the website is displayed on both large
screen devices, laptops, and smaller screen devices, mobile phones.

5.1 Homepage
This is the first page that is displayed when the user accesses the website. Here the user can find a
small table which includes the top-5 of each of the three (3) leagues along with the next fixtures
and the latest results of each league.

Figure 5.1: How the homepage is displayed using laptops [17]

Figure 5.2: How the homepage is displayed using mobile phones [18]
 18

The above figures show the two main views of the website. It dynamically changes and adjusts
according to the device's width without alerting any of its contents.

Figure 5.3: The homepage

Figure 5.4: The table as it is displayed in the homepage (La Liga 2014-2015)

Figure 5.5: Latest Results (Premier League 2014-2015)

 19

Figure 5.6: Next Fixtures (Serie A 2014-2015)

5.2 Statistics Page

This page has all the information about the leagues. The user can select between the different
seasons or even choose to view the all-time statistics. The top scorers are also included along with
the teams' current form table.

Figure 5.7: The statistics page using laptop

 20

Figure 5.8: The statistics page with the "Select Year" pressed using a mobile phone

5.3 League Tables Page

This page shows the complete table of each league over the past 4 years. The user has multiple
options to choose from of which table to be displayed. To start with, there is a "Select Year" button
where there are the options of the different years. The "Select Round" button allows the user to
choose a specific round and the table changes to the corresponding table of that round.
Additionally the results or the fixtures of that round are displayed. The last option, the button
"Table", is to choose the overall, home or away table of the selected season to be displayed.

Figure 5.9: The league table page as it is displayed on laptops

Figure 5.9 shows the Home table of Serie A of the round 24 at the season 2013-2014.
 21

Figure 5.10: Screenshot of the league table page taken from a mobile device

5.4 Profile of Team Page

This page contains the most important features of the website. The user can view lots of statistics
about every team that participated in those leagues the last four seasons. At first the current table
is displayed highlighting the selected team's current position. On the right there are several panels
listing the statistics of that team. The "Form" panel only appears for the current year (2014-2015).

Figure 5.11: Profile page of Liverpool (2014-2015)

 22

Scrolling down the page the user can see the league progress of the team which is displayed using a
coloured graph. By pressing the "Show Points" button, a bar chart appears showing the points of
the team at every round until the current one. The user can also hover on the graph dots marking
each game and a tooltip will appear containing information about the team's league progress.
Moreover, by hovering over the points chart another tooltip appears showing the total points until
that round. On the right there is a twitter panel showing the tweets from each team's official
twitter account.

At the end of the page there are two more panels. The first one lists all the results of the team so
far and the second shows the next fixtures until the end of the season. These two panels only
appear for the current year (2014-2015).

Figure 5.12: The graph showing the league progress with the twitter panel

Figure 5.13: The Results and Fixtures panels

 23

Lastly, the user can select one team to compare with the selected team. There are radio buttons
next to every team on the league table and the user can simply choose which team he/she wants to
compare the selected team with.

5.5 Compare Teams Page

The compare teams page allows the users to compare the performance of two teams from the
same league provided that they both were on that league the same year. Here the user can find the
statistics of each team, including home, away and overall statistics, their top scorers and the league
progress of the selected season. In addition to that, there are three more panels containing all-time
statistics for the two teams such as their results so far, head-to-head statistics and the teams' all-
time scorers.

Figure 5.14: Comparing two teams (Liverpool vs Stoke 2014-2015)

Figure 5.15: The league progress and the results between the two teams
 24

Figure 5.16: The all-time statistics of the two teams

5.6 Contact Us Page

This page can be used by the users of the website to contact the administrator of the website. All
fields are mandatory and if the user does not fill them a warning message appears telling him/her
to correctly fill the form.

Figure 5.17: The Contact Us page as it is displayed using laptops

Figure 5.18: The warning message

 25

Figure 5.19: Warning signs that two fields are not completed. Screenshot from a mobile phone.

5.7 Back-End
The back-end is the place where the administrator of the website can update, delete or add more
information to be displayed in the website. In this case the administrator can add more leagues to
the website, add a new season, add or delete the scorers and update the results.

Figure 5.20: Create a new League

 26

Figure 5.21: Add new season

Figure 5.22: Select which round to update

Figure 5.23: Update the matches from the selected round

 27

Figure 5.24: Choose a league to add or update scorers

Figure 5.25: Add scorers

Figure 5.26: Update or delete scorers from the selected league

 28

6 Testing & Evaluation

6.1 Evaluate Performance
The loading time of a webpage is an important part of any website's user experience. According to a
recent survey [1], 67% of UK shoppers would abandoned a purchase if they would experienced slow
loading times. Even though I do not sell anything from my website, the loading time is still very
important as the user wants every page to load fast. If a user comes across a slow website not only
he/she will probably not visit it again, but also telling about that to his/her friends or colleagues will
cause a bad reputation about the website.

To evaluate the performance of my website I used two online sources:

 https://developers.google.com/speed/pagespeed/insights/
 http://gtmetrix.com/

The PageSpeed service was developed by Google. It is an open-source web server which helps
developers to speed up their websites by providing suggestions on how to reduce the page load
time. This is done by improving the page's latency and bandwidth usage using some optimization
strategies. These optimizations include enabling compression, minifying JavaScript and CSS files,
optimizing the images, leveraging browser caching and many more.

Additionally, PageSpeed along with those suggestions for improving the performance of the page, it
also provides suggestions about the usability of the page. I found this feature very useful as I could
find out what things to change to make the page easily accessible from all devices and to improve
the user experience. These suggestions are about configuring the viewport and sizing the content to
fit within the viewport, using legible font sizes and avoiding the use of plug-ins.

GTmetrix was developed by Gossamer Threads. It uses Google's PageSpeed and Yahoo!'s YSlow
speed analysis tools to provide a score about the performance of the website. Both offer the same
service, but they analyze the page using a different set of parameters. Most of them are very
similar, but they give a different perspective about optimizing the page. I chose to use GTmetrix as
one of my speed evaluation tools for that exact reason. I could analyze the pages using both
services, benefiting from the two different angles of optimizing the code.

6.1.1 Speed Rules

6.1.1.1 Enable Compression

Compression is supported by all modern browsers. Using gzip compression the size of the
response from the server can be reduced significantly meaning that the overall time to display the
page will be reduced too.
 29

Figure 6.1: Typical HTTP response

Figure 6.2: Compressed HTTP Response

The only thing that I required to do to enable the gzip compression was to write the following
code to the .htaccess file which compresses plain text and HTML, CSS and JS files:
1 # GZIP compression
2 <IfModule mod_deflate.c>
3 # Compress HTML, CSS, JavaScript and Text
4 AddOutputFilterByType DEFLATE application/javascript
5 AddOutputFilterByType DEFLATE text/css
6 AddOutputFilterByType DEFLATE text/html
7 AddOutputFilterByType DEFLATE text/javascript
8 AddOutputFilterByType DEFLATE text/plain
9 </IfModule>
Code Sample 6.1: Enable gzip compression

6.1.1.2 Minify Resources

Minification is the process of removing unnecessary data from the files without affecting how the
code works. This includes removing all the comments from the files, all formatting including spaces,
tabs and new lines and any unused code. In this way, I managed to reduce the size of the file and
eventually the time needed to load this file. For the purposes of my project, I used a free tool called
YUI Compressor [23] which allowed me to minify all my CSS and JS files.
1 /* Clear the background, leave 50px space to the top
2 of the page and set the font size to 13px */
3 body {
4 background: none;
5 margin-top: 50px;
6 font-size: 13px;
7 }
Code Sample 6.2: Standard CSS code with comment

1 body{background:none;margin-top:50px;font-size:13px}
Code Sample 6.3: The generated minified code of the above code sample
 30

6.1.1.3 Leverage Browser Caching

Sometimes fetching data over the network could be costly in time because they might require
multiple roundtrips to fetch a relatively large file, e.g. image file. So all responses should come up
with a caching policy, where the files can be stored in order to be used again, specifying whether
the file can be cached and for how long. I used a period of 30 days for the images of the page and a
period of 7 days for HTML, CSS and JS files.

6.1.1.4 Optimize Images

Images often occupy lots of bytes making their downloads from the server a very time consuming
process. Thus, optimizing them, results in great performance improvements and along with caching
the website loads faster which keeps the users happy. For this purpose, I used a free online tool,
https://tinypng.com/, which compresses images reducing the file size within seconds.

6.1.2 Usability Rules

The most important usability rule was to configure the viewport. A viewport controls how devices
with small screens, e.g. mobile devices, tablets and iPads, will process the webpage. When a page is
displayed in such a device, the device "[...] will render the page at a typical desktop screen width,
scaled to fit the screen" [12] without setting the viewport. On the other hand defining the viewport,
the page will be loaded based on the screen's dimensions. The viewport is defined in a meta tag in
the head of the document:
1 <meta name="viewport"
2 content="width=device-width, initial-scale=1,
3 maximum-scale=2">
Code Sample 6.4: Configure the viewport

Apart from the above code, the Bootstrap framework was very useful for sizing the content to
viewport as well. It allowed me to specify a different view for each screen width using the grid
system which is included. After configuring and sizing the content to viewport, I had to make sure
that every text on the website would have the appropriate font so it could be easily readable across
all devices. I used a standard font of 13px for all pages and a font of 9px for very small devices so
the content would remained sized to viewport.

6.2 Validate HTML

A validator is a program or an online tool used to check that the webpages correspond with the
W3C standards. In this case in particular, an HTML validator checks that the HTML code is free of
errors and complies with these standards. There are many tools that I could use for this purpose,
but I chose to use the online HTML validator provided by W3C (http://validator.w3.org/),
because as the web standards are made available by W3C, then the validator owned by W3C would
give me better explanations about any potential errors of my website.

After I validated all 6 webpages of the website I end up with 541 errors. Even though this seems like
a large number of errors, in fact there were only 6 and they were repeated multiple times in almost
every page. These errors were:
 31

1. use the alt (alternative) attribute to images

2. duplicate element names
3. avoid using the align property in HTML code (used only in CSS)
4. avoid using the get property inside the href attributes
5. duplicate element ids
6. no character encoding declared to the pages

Apart from the sixth problem, I managed to solve all other errors without any problems. The
validator checks each page separately and because I declared the character encoding to the
.htaccess file rather than inside each page, it does not know that it is already declared and gives an
error.

A point worth mentioned here is that the website was fully functional despite the errors. These
errors were about writing clean code that corresponds to the HTML5 standards. For example, if I
ignored the third error and continued to use the align property, the page would not have any
functional problems and it would load perfectly. But, it is better and recommended by W3C to
follow the web standards and write a clean code without errors.

6.3 Testing
The final steps before finishing my project was to test the entire website to determine whether
there were any more errors regarding its functionality and also to give it to the users to tell me their
feedback. I performed regular tests during the implementation phase when a page was done, but at
that time I was testing each page separately. At this phase I wanted to test the entire website as a
whole. My tests were successful, there were no more errors and all initial requirements were met.

After that I created an online survey that I was going to give to the users. I used a free online survey
software, https://www.surveymonkey.com/, to create my survey3. I gave the link of the
website and the online survey to ten (10) people and the results were surprisingly good and almost
everyone seemed to like the website. Of course there were some suggestions which I took in mind
and used them to improve it even more.

Unfortunately, due to lack of time, I could not implement all these suggestions, therefore I chose
the ones that I could do in my available time. Firstly, I changed the website's appearance to make it
more visually appealing because I thought that if it is more appealing then it would attract more
users. Secondly, I changed some terms with more appropriate football terms which is very
important for any football fan to see the correct terms in any football website. Lastly, as two (2)
people requested I decided to extend my website and include more leagues and more seasons than
the ones I already had (English Premier League, Spanish La Liga and Italian Serie A, Seasons: 2011-
2015). In spite the fact I did not have any time to pass more data to the database, I created an
option in the back-end which allows me to create new leagues and add more seasons whenever I
like.

The survey questions and the results can be found in Appendix B: Survey Results.
3
 32

7 Conclusion
7.1 Achievements
The objectives set at the beginning of the project were:

1. The users will be able to find lots of statistics about the leagues for the past four seasons,
including the current one.
2. The users will be able to see a profile of each team participated in those leagues, in the
included seasons, and compare a team's performance with another team of the same
league.
3. The website must be displayed on every available device, from the smallest smart phone to
the largest desktop, for better user experience.

Reflecting on my work, I believe that generally I met all objectives. I managed to include all leagues
and seasons I had in my mind at the start of the project, but I could add a little more statistics about
the leagues in general. I could extract more from the input results to enrich even more the website,
but due to lack of time I decided to design it as decided.

The second objective was met and I received a lot of positive comments about it, especially for the
graph with the different effects. The comparison between two teams was also successful making
the overall website more attractive to users and especially to football fans.

Finally, the last objective was met as well as shown in Chapter 5. This, along with the development
of the graph, were the most challenging parts of the project. I had to make sure that every line of
code I wrote, it would also be the correct one and do not mess with the layout for smaller screen
devices. In addition, I had to test the functionalities of the website to three devices to be sure that
everything is displayed properly in all devices.

7.2 Future Work

When I got the results from the survey, many new ideas came into my mind of improving my
current project. One of them is to implement a live-score functionality. This feature would allow the
user to see live updates of the games played at each time, including score updates, scorers and
possibly a few comments about the game. I would like to include it to my website as it would be a
massive improvement and it would attract more people. Unfortunately, I did not have the required
time to implement this, as it requires a lot of time, but it could be an improvement for me to do in
the future.

Another idea was to add more leagues to the website, as a few people recommended. This is
another good option for me to have as, again more leagues and more statistics and comparisons,
attract more football fans. I managed to include an option to the back-end, so that I will be able to
add more leagues and seasons whenever I like. The addition, though, is left for any possible future
work on the project.
 33

7.3 Report Summary

The aim of the report was to demonstrate the steps taken and describe the process of developing
the website MyStats. A research was made at the beginning to get an idea of how the website will
be developed and what features to include. A number of technologies were used for this purpose,
including some new technologies like D3 and AJAX. Finally, the report presents the results and how
these results were evaluated, validated and tested to give the best possible outcome.
 34

References
[1] Adventures in Retail: The other line is faster, Brand Perfect, November 2012. Retrieved from
Case Study: How a 2-Second Improvement in Page Load Time More Than Doubled Conversions
| Radware Blog. [Online] http://brandperfect.org/online-retail-research-
report-november-2012.pdf
[2] Beck, K. et al. (2001). Retrieved from Manifesto for Agile Software Development. [Online]
http://agilemanifesto.org/. April 2015
[3] Chisholm, W. and May, M. (2008). Universal design for Web applications. O’Reilly Media Inc.,
Sebastopol, CA, ISBN: 978-0-596-51873-8, p.139.
[4] Fisher, D. (2010). Animation for visualization: Opportunities and drawbacks. In J. Steele & N.
Iliinsky (Eds.), Beautiful visualization (pp. 329-352). Cambridge: O'Reilly
[5] Flanagan, D. (2011). JavaScript: The Definitive Guide, Sixth Edition. O'Reilly Media. ISBN: 0-596-
80552-7, p. 1
[6] Grady, R. B. (1992). Practical Software Metrics for Project Management and Process
Improvement, Prentice Hall, Englewood Cliffs, NJ, USA. ISBN: 0-13-720384-5
[7] Leffingwell, D., Widrig, D. (1999). Managing Software Requirements. ISBN: 0-201-61593-2, p.
24
[8] Retrieved from 10. MoSCoW Prioritisation | DSDM CONSORTiUM. [Online]
http://dsdm.org/content/10-moscow-prioritisation. April 2015
[9] Retrieved from 2013 Represented Worst Decline In PC Market's History - Forbes. [Online]
http://www.forbes.com/sites/jasonevangelho/2014/01/09/2013-
represented-worst-decline-in-pc-markets-history/. April 2015
[10] Retrieved from April 2014 Web Server Survey | Netcraft. [Online]
http://news.netcraft.com/archives/2014/04/02/april-2014-web-
server-survey.html. April 2015
[11] Retrieved from Bootstrap · The world's most popular mobile-first and responsive front-end
framework. [Online] http://getbootstrap.com/. April 2015
[12] Retrieved from Configure the Viewport - PageSpeed Insights — Google Developers. [Online]
https://developers.google.com/speed/docs/insights/ConfigureViewport.
April 2015
[13] Retrieved from D3.js - Data Driven Documents. [Online] http://d3.js.org/. April 2015
[14] Retrieved from Gartner Says Tablet Sales Continue to Be Slow in 2015. [Online]
http://www.gartner.com/newsroom/id/2954317. April 2015
[15] Retrieved from Gartner Says Worldwide Traditional PC, Tablet, Ultramobile and Mobile Phone
Shipments On Pace to Grow 7.6 Percent in 2014. [Online]
http://www.gartner.com/newsroom/id/2645115. April 2015
[16] Retrieved from Gartner Says Worldwide Traditional PC, Tablet, Ultramobile and Mobile Phone
Shipments to Grow 4.2 Percent in 2014. [Online]
http://www.gartner.com/newsroom/id/2791017. April 2015
[17] Retrieved from PageSpeed Insights. [Online]
https://developers.google.com/speed/pagespeed/insights/?url=http
%3A%2F%2Fmoisish.com%2Fmystats&tab=desktop. April 2015
[18] Retrieved from PageSpeed Insights. [Online]
https://developers.google.com/speed/pagespeed/insights/?url=http
%3A%2F%2Fmoisish.com%2Fmystats&tab=mobile. April 2015
 35

[19] Retrieved form Principles-of-Data-Visualization [Online]

http://www.fusioncharts.com/whitepapers/downloads/Principles-of-
Data-Visualization.pdf. April 2015
[20] Retrieved from Sublime Text: The text editor you'll fall in love with. [Online]
http://www.sublimetext.com/. April 2015
[21] Retrieved from Web hosting service - Wikipedia, the free encyclopedia. [Online]
http://en.wikipedia.org/wiki/Web_hosting_service. April 2015
[22] Retrieved from What Is Interactive Web Design? (with pictures). [Online]
http://www.wisegeek.com/what-is-interactive-web-design.htm. April
2015
[23] Retrieved from YUI Compressor. [Online] http://yui.github.io/yuicompressor/.
April 2015
[24] Tufte, R. E. (1983). The Visual Display of Quantitative Information. Graphics Press USA; 2nd
edition in 2001. ISBN: 0-961-39214-2
[25] Vande Moere, A. and Purchase H. (2011). On the role of design in information visualization, in
Kerren A., Plaisant C. and Stasko, J.T. (Eds), "State of the Field and New Research Directions",
Information Visualization Journal (IVS) 10 (4), pp. 356-371.
 36

Appendix A: Plan

# Tasks Starting Finishing New Tasks Completed

Date Date Tasks

1 A1. Revise HTML5, PHP5,

JavaScript and SQL
22/09/2014 01/10/2014 --- A1, B1, C1
B1. Decide Functionalities

C1. Draw webpages on paper

2 A2. Create required templates

B2. Input data to DB

C2. Write required functions to

02/10/2014 17/10/2014 --- A2, B2, C2, D2, E2
get the data from DB

D2. Implement Homepage

E2. Test Homepage

3 A3. Implement Leagues page

B3. Implement Contact Us page

18/10/2014 02/11/2014 --- A3, B3, C3, D3
C3. Test Leagues page

D3. Test Contact Us page

4 A4. Input data to DB

B4. Write required functions to

get the data from DB A4, B4, C4 and
03/11/2014 12/11/2014 ----
most of D4
C4. Implement Statistics page

D4. Test page

5 D4b. Continue Testing of

Statistics

A5. Find tutorial for D3.js library

13/11/2014 22/11/2014 D4b D4b, A5, B5, C5
B5. Study D3.js

C5. Write examples to

familiarize
 37

6 A6. Input data to DB

B6. Write required functions to

get the data from DB

C6. Create graph with positions

for current year 23/11/2014 02/12/2014 D6, E6 A6, B6, C6, D6, E6

D6. Input data for other graphs

to DB

E6. Create more graphs for

previous years

7 A7. Write required functions to

get the data from DB
03/12/2014 12/12/2014 --- A7, B7, C7
B7. Implement Teams page

C7. Test page

8 A8. Write required functions to

get the data from DB

B8. Implement Compare page

26/01/2015 04/02/2015 D8 A8, B8, C8, D8
C8. Test page

D8. Add search functionality to

menu

9 A9. Create a backend to input

data to the DB 05/02/2015 15/02/2015 --- A9, B9
B9. Test backend

10 A10. Evaluate speed of

website
16/02/2015 25/02/2015 --- A10, B10, C10
B10. Validate HTML code

C10.Create survey

11 A11. Change Leagues page

B11. Change style of

A11,
website 26/02/2015 20/03/2015 A11, B11, C11
B11, C11
C11.Add functionality for more
leagues
 38

Iteration 1: 22/09 -> The project begins. Before the actual implementation I need to revise HTML5,
PHP5, JavaScript and SQL, decide the functionalities of the website and draw
prototypes of the pages on paper.
01/10 -> All done for the revision part and the first decisions of the website.
Iteration 2: 02/10 -> For this iteration I will create the templates that I will use for all the webpages
(logo, menu, footer) and then I will start with the implementation of the
homepage.
17/10 -> I didn't have much to do for the other courses, so I managed to finish in time all
the tasks of this iteration.
Iteration 3: 18/10 -> This could be the easiest iteration as both Leagues and Contact Us pages seem
easy to implement.
02/11 -> The Contact us page was easy, but the Leagues page was trickier than I first
thought as it required to get all the results and fixtures of each league.
Iteration 4: 03/11 -> Now I'm preparing for the seminar, so I don't have much time to continue my
work for the project. I'm confident that I will be able to finish the tasks on time
after the presentation is done.
12/11 -> I didn't have enough time to finish the last task, testing, because from 03/11-
06/11 I was preparing for my seminar. For the second semester's plan take all
things unrelated to the project into account.
Iteration 5: 13/11 -> For this iteration I will have to finish testing of the statistics page and then start
the other tasks. Hopefully I can do this because I don't know how difficult is to
learn D3.js and apply it the way I want.
22/11 -> Although I had an extra task for this iteration I managed to finish one time. I
was worrying for nothing; learning D3.js is not as difficult as I first thought. I
might use some of the examples I made to design the graph for the next
iteration.
Iteration 6: 23/11 -> Judging by the examples I made, I think it should be easy to develop the graph.
But first, the lengthy task of inputting the data to the DB.
27/11 -> I actually managed to create the graph in such a short time! I finished because I
didn't had any non-project coursework to do, so I spent all of my time for the
project. Because I finished early I will create graphs for the previous years too.
It's not going to be that hard, I think.
02/12 -> All done. This was the most productive iteration. Despite that, I didn't calculate
the time correctly for this iteration, but instead of not having enough time, it's
better to finish early and add more tasks.
Iteration 7: 03/12 -> Final iteration for the semester. I have to start the first task of the iteration and
when I finish it, I will take some time for the coursework I have to do and then
continue with the rest tasks. Hopefully I will be able to finish them in time.
12/12 -> I managed to finish all the tasks in time and now it's time for some rest and
then study for the exams.
Iteration 8: 26/01 -> Exams are over and it's time to continue the work for the project by
implementing the Compare page.
01/02 -> I actually managed to finish early again, as I didn't have anything else except
from the project to work on and I decided to add a search option to the menu
to make it easier for the users to find the team they are looking for.
04/02 -> I just manage to finish the search functionality and the website is almost done.
 39

Iteration 9: 05/02 -> The last thing is to create a backend to insert/update the data from the
website, rather than accessing the DB directly. It has only two tasks because I
have coursework for other courses too.
15/02 -> Backend is ready and tested and this means that the first version of the website
is done. Next is the evaluation part.
Iteration 10 16/02 -> Before having the users to test my website I have to evaluate it in terms of
speed and validate the HTML code for any potential errors. Then I will create
the survey and I will give it to my friends to give me their feedback.
25/02 -> All done and I send the link to my website to my friends and now I'm waiting for
their feedback.
Iteration 11 26/02 -> This is basically an iteration where I change some parts of the website based
on users' feedback. So far I modified the Leagues page because the league table
was too big. I changed the appearance of the website and I modified the
backend so that I will be able to add more leagues and more seasons to each
league because users asked me if I could add more leagues to my site.
 40

Appendix B: Survey Results

1. Overall, how well does MyStats meet your needs?
 Extremely well
 Very well
 Moderately well
 Not so well
 Not at all well

Question 1
Extremely well

Very well

Moderately well
% Answers
Not so well

Not at all well

0 20 40 60 80 100

2. How easy was it to find what you were looking for?

 Extremely easy
 Very easy
 Moderately easy
 Not so easy
 Not at all easy

Question 2
Extremely easy

Very easy

Moderately easy
% Answers
Not so easy

Not al all easy

0 10 20 30 40 50 60 70
 41

3. Did it take you more or less time than you expected to find what you were looking for?
 A lot less time
 A little less time
 About what I expected
 A little more time
 A lot more time

Question 3
A lot less time

A little less time

About what I expected

% Answers
A little more time

A lot more time

0 10 20 30 40 50 60

4. How visually appealing is MyStats?

 Extremely appealing
 Very appealing
 Moderately appealing
 Not so appealing
 Not at all appealing

Question 4
Extremely appealing

Very appealing

Moderately appealing
% Answers
Not so appealing

Not at all appealing

0 10 20 30 40 50 60
 42

5. How easy is it to understand the information on the website?

 Extremely easy
 Very easy
 Moderately easy
 Not so easy
 Not at all easy

Question 5
Extremely easy

Very easy

Moderately easy
% Answers
Not so easy

Not al all easy

0 20 40 60 80 100

6. Overall, how would you rate the overall quality of MyStats?

 Excellent
 Very Good
 Good
 Fair
 Poor
 Very Poor

Question 6
Excellent
Very Good
Good
Fair % Answers
Poor
Very Poor

0 20 40 60 80 100
 43

7. How does MyStats compare to other websites you have used? Is it...
 Much better
 Slightly better
 About the same
 Slightly worse
 Much worse
 No opinion

Question 7
Much better
Slightly better
About the same
Slightly worse % Answers
Much worse
No opinion

0 10 20 30 40 50 60

8. How likely is it that you would recommend MyStats to a friend or colleague?

Not at all likely - 0 1 2 3 4 5 6 7 8 9 Extremely

likely - 10

Question 8

Promoters (9-10)

Passives (7-8)
% Answers

Detractors (0-6)

0 20 40 60 80 100
 44

9. Do you have any other suggestions about how I can improve the website?
Suggestion Description
No

1 More effects

2 As you made it easy for most people to find what they are looking for, focus on
the visual designing of the website! Good job!

3 League table is too big

4 Implement a live score functionality (x2)

5 It is a very organised website, however I think it should tell us more about the
clubs. For example it should tell us more about the history of each club.

6 Replace where ''full'' with ''overall'' because it's the most appropriate football
term of what are you describing on those categories. You should also consider
replacing the ''All time'' because as i understand you are referring on the years
written above the ''All time'' category. Putting that aside very nice work and
useful for many football fans!!

7 More leagues (x2)

8 No suggestions
 45

For Mobile application

Would you like a mobile application of this website?

Mobile App

Yes

No
% Answers

Not Necessary

0 10 20 30 40 50 60 70 80