DissertationGS

Abstract
1
© Mr Snowdon | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1 3DH
Telephone:
Abstract
The following report outlines the development process taken to create and deliver an
image management system, covering initial scope, requirements and risks, research
conducted, system design, product implementation, testing, evaluation and concludes
with further recommendations. The appendices cover more in depth further reading on
subject areas.

Table of Contents
2
© Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire. HD1
3DH
Telephone:
Table of Contents
Abstract 1
Table of Contents 2
Table of Figures 7
Table of Tables 8
Document Conventions 9
Introduction 10
1 - System Analysis 11
1.1 Background 11
1.2 Stakeholders 11
1.3 Scope 11
1.3.1 Justification 12
1.3.2 Aims & Objectives 12
1.3.3 Project Deliverables 12
1.3.4 Communication Strategy 12
1.3.5 Resources 12
1.3.6 Out of scope 13
1.4 Requirements 13
1.4.1 Must Have 13
1.4.2 Should have 14
1.4.3 Could Have 14
1.4.4 Won’t Have 14
1.5 Life cycle methodologies 14

Table of Contents
3
Telephone:
1.6 Risks 15
1.6.1 Project Risks 15
1.6.2 Data Protection Act (DPA) 1998 15
1.6.3 Measures to control / reduce highlighted risks 16
1.7 Scheduling of works 17
2 – Research 19
2.1 Competitors & Clients Technology 19
2.1.1 Lobsterpictures.tv 19
2.1.2 Site-eye.co.uk 20
2.1.3 ConstructionPhotography.com 21
2.1.4 Current Website Branding 22
2.2 Literature Review 22
2.2.1 Linux Ubuntu Apache 2 MySQL PHP (L.A.M.P.), phpMyAdmin vs C# and .NET MVC Framework 22
2.2.2 VirtualBox 23
2.2.3 jQuery & AJAX 23
2.2.4 PHP Hypertext Pre-processor (PHP) 24
2.2.5 Syntactically Awesome Style Sheets (SASS) CSS Pre-processor 24
2.2.6 GitHub Version control 24
2.2.7 Crontab 25
2.2.8 Normalize.css 25
3 – System Design 26
3.1 System Modelling 26
3.1.1 Entity Relationship Diagram (ERD) 26
3.1.2 Data Flow Diagrams 27
3.1.3 Use Cases 28
3.1.4 Sequence Diagrams 31

Table of Contents
4
Telephone:
3.2 Product Design 33
3.2.1 Network Diagram of proposed solution 33
3.2.2 Virtual Box Development and Test server 34
3.2.3 Host only network – Virtual Box 35
3.2.4 Cron & php script to update MySQL records 36
3.2.5 Scrape.php 38
3.2.6 Wireframes 39
3.2.4 jQuery and AJAX 42
4 - Testing 43
4.1 Alpha Test Results 43
4.1.1 Accessing the server 43
5.1.2 Data.file error in records 46
4.1.3 Disparate Server versions 50
4.1.4 DateTime and button inputs 50
4.2 Usability (beta) Test Results 51
4.2.1 Instructions to tester 51
4.2.2 Schedule 53
4.2.4 Free text Comments 57
4.3 Client UAT Results 61
4.4 Security Test Results 70
4.4.1 HeartBleed Test Results 70
4.4.2 Nessus Penetration Testing 71
4.5 Test Evaluation 73
5 - Product Implementation 75
5.1 Infrastructure setup 75
5.1.1 Live Server Implementation 75

Table of Contents
5
Telephone:
5.1.1 DYNDNS 75
5.2 Post Infrastructure considerations 76
5.2.1 Archiving old data 76
6 – Evaluation 80
6.1 Project 80
6.2 Product 80
6.2.1 Interface 80
6.2.1.1 Date selector 81
6.2.1.2 Camera selector 81
6.3 Personal 81
7 - Conclusion 83
7.1 Further Development 83
7.1.1 BoilerPlate HTML5 83
7.1.1.1 Modernizr 83
7.1.1.2 Normalise.css 84
7.1.2 Bootstrap for mobile 84
7.1.3 Virtual Machine Server rather than physical hardware 84
8 - Acknowledgements 86
9 - References 87
10 - Appendices 91
10.1 Original wireframes (concept) 91
10.2 Code 93
10.2.1 cfarc.js 93
10.2.2 cfarc.scss 95

6
Telephone:
10.2.3 CFARC.sql 105
10.2.4 add.php 106
10.2.5 admin.php 108
10.2.6 connect.php 109
10.2.7 fetch_cam.php 109
10.2.8 fetch_images.php (DEPRECATED) 110
10.2.9 fetch_one_image.php 110
10.2.10 fetch_times.php 111
10.2.11 fetchDateRange.php 111
10.2.12 image.php (DEPRECATED) 112
10.2.13 images.php (DEPRECATED) 112
10.2.14 index.php 112
10.2.15 interface.html.php 112
10.2.16 login.php 113
10.2.17 logout.php 115
10.2.18 members.php 116
10.2.19 privacy.html 116
10.2.20 scrape.php 117
10.2.21 TODO.txt 119
10.3 Concept Poster 121
10.4 Test Plan 122
10.4.3 Usability Testing instructions 122
10.4.3 Usability Testing schedule 124
10.4.3 Usability Testing results 128
10.4.4 Quantified test results 141

Table of Figures
7
© Mr Snowdon | u1073579 | University of Huddersfield, Queensgate, Huddersfield West Yorkshire.
HD1 3DH
Telephone:
Table of Figures
Figure 1 - Google Calendar, average week. ....................................................................................................17
Figure 2 - Google calendar, average month....................................................................................................17
Figure 3 - Lobster Pictures..............................................................................................................................19
Figure 4 - Site Eye Films .................................................................................................................................20
Figure 5 - Construction Photography..............................................................................................................21
Figure 6 - Construct Films Website.................................................................................................................22
Figure 7 - Installing phpMyAdmin .................................................................................................................23
Figure 8 - Implementing sass.........................................................................................................................24
Figure 9 - GitHub version history ...................................................................................................................25
Figure 10 - Initial ERD for design purposes.....................................................................................................26
Figure 11 - Screen shot of actual live ERD from phpMyAdmin .......................................................................27
Figure 12 – Initial Dataflow diagram for design purposes ..............................................................................27
Figure 13 - Updated Data Flow.......................................................................................................................28
Figure 14 – Initial Use Case Diagrams for design purposes.............................................................................29
Figure 15 - Updated Use Cases.......................................................................................................................30
Figure 16 – Administrating customers............................................................................................................31
Figure 17 – Initial Customer Sequence diagram for design purposes .............................................................31
Figure 18 - Updated Customer Sequence .......................................................................................................32
Figure 19 - Network Diagram .........................................................................................................................33
Figure 20 - VirtualBox topography .................................................................................................................35
Figure 21 - Virtual Machine Host only adapter...............................................................................................36
Figure 22 - Crontab schedule .........................................................................................................................37
Figure 23 - script to harvest file locations and create SQL records .................................................................38
Figure 24 - Login screen .................................................................................................................................39
Figure 25 - Main Interface..............................................................................................................................40
Figure 26 - Selection of date ..........................................................................................................................40
Figure 27 - Image displayed (full screen)........................................................................................................41
Figure 28 - Image displayed (1:1 ratio)...........................................................................................................41
Figure 29 - External Trace Route ....................................................................................................................43
Figure 30 - External WAN address..................................................................................................................45
Figure 31 - Editing the firewall .......................................................................................................................45
Figure 32 - Image list......................................................................................................................................46
Figure 33 - Live SQL results ............................................................................................................................46
Figure 34 - Live data-file results .....................................................................................................................47
Figure 35 - Test Box SQL records ....................................................................................................................48
Figure 36 - Test Box data.file results ..............................................................................................................48
Figure 37 - data.file erroneous records ..........................................................................................................49
Figure 38 - Old IE UI conversation with client.................................................................................................51
Figure 39 - Client UAT results (A) ...................................................................................................................65
Figure 40 - Client UAT results (B)....................................................................................................................69
Figure 41 - Port 443 opened on firewall .........................................................................................................70
Figure 42 - Heartbleed test ............................................................................................................................71
Figure 43 - First pen test running ...................................................................................................................72
Figure 44 - Login wireframe (concept)............................................................................................................91
Figure 45 - Main interface wireframe (concept).............................................................................................92

Table of Tables
8
HD1 3DH
Telephone:
Table of Tables
Table 1 - Hard Disk Info & Usage....................................................................................................................12
Table 2 – Memory Info...................................................................................................................................13
Table 3 - OS Info ............................................................................................................................................13
Table 4 - Processor Info..................................................................................................................................13
Table 5 - BT traceroute results .......................................................................................................................44
Table 6 - UAT questionnaire................................................................................. Error! Bookmark not defined.
Table 7 - Quantified beta test results.............................................................................................................57
Table 8 - Estimation of minimum storage requirements ................................................................................77
Table 9 - Estimation of maximum storage requirements................................................................................78
Table 10- Estimation of client anticipated storage requirements...................................................................79
Table 11 - Quantifying test results ...............................................................................................................141

Document Conventions
9
HD1 3DH
Telephone:
Document Conventions
This document has the following conventions:
Standards
Headings are in Courier New and various shades of blue in various
point size to imply weight of title
Standard text is in Arial at size 11.5 point.
Code is indented, in Courier New font at 10 point and
highlighted in grey
‘Tester comments are Italicised Tahoma 12 point font’ (With the Section of schedule
in braces)
Terms
Where the term ‘Client’ is used it refers to Anthony Elliott, the main stakeholder in the
project and owner of Construct Films Ltd.
‘Customer’ or ‘User’ refers to customers of the above client who are expected to be the
main users of the system.
‘Project Supervisor’ or ‘Supervisor’ refers to Dr. Rupert Ward of The University of
Huddersfield.
‘Testers’ refer to the group of ten product beta testers.
‘Developer’ or ‘Author’ refers to Graham Snowdon.
‘System’, ‘Product’, ‘Server’ and ‘Application’ all refer to the web interface being built for
the client by the developer.

Introduction
10
HD1 3DH
Telephone:
Introduction
Although all attempts have been made to accurately & fully reference the below text,
errors are, in all work, inevitable. The author accepts full responsibility for deficiencies in
either the parts or the whole.
“Construct Films is a UK-based production house for time-lapse photography. Combined
with live action filming such as interviews and milestones, and motion graphics such as
statistics and architectural concepts, they can tell the story of your project to captivate
your clients, employees or the public via social media.” (Elliott, 2013)
Construct Films Ltd required a secure online portal which provides access to images
taken on customer construction sites, enabling customers to select a date, time and
camera (for those sites with multiple cameras) and see the image that was taken within
that time frame. In addition the system should synchronise from the existing image
server and then populate a database of image files to present to the customers.

- System Analysis
11
HD1 3DH
Telephone:
1 - System Analysis
System analysis is undertaken to establish what criteria are required in the product and
to steer the project in a logical path, ensuring all stakeholders’ expectations are
addressed.
1.1 Background
In July 2013 Construct Films approached the author with a request as outlined above. A
requirements analysis was conducted and work began on a project to provide the said
solution.
The client had knowledge of other systems they had used when working for other
companies, these were used as a basic framework for the concept of this system.
The client knew that the developer had six years of vocational experience supporting the
construction industry in the IT Department of Connaught PLC and could apply this
knowledge to the project.
1.2 Stakeholders
Stakeholders in the project are from two main different bodies.
Construct Films Anthony Elliott - The main stakeholder, the client who’s interests lie in
the completed product.
The University of Huddersfield – Doctor. Rupert Ward, the project’s supervisor.
Professor Grigorios Antoniou, the projects examiner.
1.3 Scope
What items are within the scope of the project are outlined in the requirements analysis
as shown below. Everything else can be classed as out of scope but may be considered
in future versions of the product.

- System Analysis
12
Telephone:
1.3.1 Justification
The justification for this project is in the requirements of the client. The client has
sponsored the project and has undertaken research into available off the shelf products
but does not feel they address their specific requirements.
1.3.2 Aims & Objectives
Measuring Success - (Fortune & Peters, 2005) state that a successful system can be
measured by “meeting user requirements, achieving its purpose, meeting timescales
and budgets, making the users happy and meeting quality standards” with these
qualifiers in mind there are two aims of the project.
1 Create a web interface for customers to access images of their construction site.
2 Build the supporting hardware infrastructure to facilitate the access to images.
1.3.3 Project Deliverables
The project deliverable consists of server hardware to support an image retrieval system
and said image retrieval application.
1.3.4 Communication Strategy
Communication is mostly via electronic mail, with weekly face to face meetings and
some supporting Skype meetings.
1.3.5 Resources
An IBM Clone desktop computer is being used as a prototyping server, with the following
specifications:
Device Boot Start End Blocks Id System
/dev/sda1 * 2048 486301695 243149824 83 Linux
/dev/sda2 486303742 488396799 1046529 5 Extended
/dev/sda5 486303744 488396799 1046528 82 Linux swap /
Solaris
Table 1 - Hard Disk Info & Usage
total used free shared buffers cached
Mem: 1002 181 821 0 16 89
-/+ buffers/cache: 75 927
Swap: 1021 0 1021

- System Analysis
13
Telephone:
Table 2 – Memory Info
Distributor ID: Ubuntu
Description: Ubuntu 12.04.4 LTS
Release: 12.04
Codename: Precise
Table 3 - OS Info
vendor_id AuthenticAMD
cpu family 15
model 12
model name AMD Athlon(tm) 64 Processor 3400+
cpu MHz 1000.000
cache size 512 KB
address sizes 40 bits physical, 48 bits virtual
power management ts fid vid ttp
Table 4 - Processor Info
a 10/100 (CAT5 Ethernet) network interface card is fitted using TCP/IP.
Other resources are human, the developer and the testers.
1.3.6 Out of scope
All else is considered out of scope until future versions of the product.
1.4 Requirements
After meeting with the client the following Aims and Objectives were agreed.
1.4.1 Must Have
No Adobe Flash -The client has asserted no use of Adobe® Flash®; all development is
to be done in other technologies such as HTML 5, Object Oriented JavaScript and CSS3
to afford cross platform compatibility and a degree of future proofing.
Chorographical selection - Ability to select different dates and times easily from within
the application.
Open source technology - The client has been operating since June 2013 and budget
is a consideration. In addition to this the client is familiar with open source technology
and has a preference for it.

- System Analysis
14
Telephone:
Special Day Awareness - Some days (weekends or public holidays for example) there
will be no pictures produced, the solution should allow for this and not create a cryptic
error code.
Multiple Camera Selection - Multiple camera drop down list to allow for sites with
multiple camera locations.
1.4.2 Should have
Cross Platform Compatibility - Visibility on different customer device screen sizes
(1280x1024, 1080X800, 600,480, etc).
Device detection - Intuitive display, so that controls on smaller screens are a relative
size. Available on multiple devices Apple, Android, Windows, *nix.
1.4.3 Could Have
Solution could be made on virtual server / client platform.
1.4.4 Won’t Have
Other products examined have a magnifying glass style zoom function on their interface
that doesn’t open the original image file, the client thinks this is clumsy and therefore still
wants this functionality but for it to have more interactivity, by for example working with
‘pinch and pull’ to manipulate image (possible HTML5 scalable vector graphics or
canvas tag).
1.5 Life cycle methodologies
A Rapid application development life cycle methodology was used, mostly resembling
Dan Gielan’s Joint Application Development process (uncited as found on Wikipedia) to
create the product. Benefits of this are the client has a transparent view of the product at
each stage of its development and can steer the build during the cycle. This was
achieved through weekly task driven meetings with the client.

- System Analysis
15
Telephone:
1.6 Risks
1.6.1 Project Risks
SWOT analysis of the project
Strengths
 Established Software (Linux, Apache, MySQL, PHP, jQuery)
 Minimal costs
 Engaged and reasonable client
 Developers Industry, Network, Hardware and Systems knowledge.
Weaknesses
 Large image size, (possible issue with speed of image loading)
 Developer’s web development knowledge
Opportunities
 Future project development, potential for revenue.
Threats
 There is a possibility that the client may decide at any point during the project to
source a product from another vendor.
 Maths GCSE Exam, the developer has to revise for and sit a maths GCSE exam
in January which means losing two weeks of the schedule.
 Data Protection Act 1998 (this is discussed in a section later in the report, see
below)
1.6.2 Data Protection Act (DPA) 1998
The DPA outlines a role of a data controller, the key area of this act that have relevance
to this project are Section 7 (1-11) (legislation.gov.uk, 1998) in which data subject

- System Analysis
16
Telephone:
access requests (DSAR) are discussed. The client in the case of this project holds the
responsibility of handling any DSAR received and the developer has no liability for such
requests. It should further be noted that this Act (Schedule 1, Part 1, Principle 5) states
that “Personal data processed for any purpose or purposes shall not be kept for longer
than is necessary for that purpose or those purposes.” (legislation.gov.uk, 1998) which is
a little obscure in translation however it would be prudent to interpret this as meaning
image files should be archived to long term storage for a period outlined in the contract
between the client and their customers. Migrating the individual customer folders to long
term (possibly magnetic tape) storage would free system resources for current contracts.
It is expected that the client will wish to retain the images from said contracts in case of
future requests to access this data from the customer(s) or to market another service
(the client provides time-lapse videos), if this was the case it would be a reasonable
assumption that archived data is retained. Full responsibility for the schedule of data
retention is held with the client in regards to this project.
1.6.3 Measures to control / reduce highlighted risks
Image sizes will be tested and if problematic thumbnail or other solutions used to
address this.
The developer will increase their knowledge throughout the time scale of the project.
Potential missed deadlines on the project, negotiation with the client resolves this matter
as the client is supportive and understanding of the developer’s other commitments.
Little can be done regarding the potential legislative issues with this product other than
to make the client fully informed of their duties as a data controller.

- System Analysis
17
Telephone:
1.7 Scheduling of works
Google Calendar has been used throughout to schedule weekly task driven meetings
with the client and the project supervisor and to schedule task workload as well as other
time commitments. The diagrams below show average week / month. This product was
used as it wirelessly synchronises with several different technologies and is very flexible
in the creation of appointments. The developer setup deadlines months in advance with
several weekly reminders configured.
Figure 1 - Google Calendar, average week.
Figure 2 - Google calendar, average month

- System Analysis
18
Telephone:
Evernote®(Evernote®, 2010) was extensively used for the management of notes and
memo’s during this project. The reason for this was primarily that the notes can be taken
in multiple formats (voice, written, drawings, photographs, pdf’s etc) images are
rendered into searchable text where appropriate and then all stored in the cloud for
access from different platforms.
Figure 3 - Evernote Project notebook

2 – Research
19
HD1 3DH
Telephone:
2 – Research
2.1 Competitors & Clients Technology
2.1.1 Lobsterpictures.tv
Lobster Pictures “design and install innovative, above-HD time lapse cameras for remote
site monitoring and time lapse photography.”(Lobster Pictures Limited, 2014) their
interface can be seen in the below figure. The interface is very similar to the product that
this project will produce however has a zoom function to view sections of the image in
detail, the product remit from Construct Films Ltd is that the image should be responsive
to “pinch and grab” interactions to zoom, similar to Google Maps.
Figure 4 - Lobster Pictures

2 – Research
20
Telephone:
2.1.2 Site-eye.co.uk
“Site-Eye have a number of qualified and talented photographers available for all types
of documentary or creative projects. As well as straight photography we can offer 360
degree panoramic photography, fisheye photography and studio lit photography. For
particular requirements and prices please contact us.” (Site-Eye Time-Lapse Films,
2012). Unfortunately access to their interface is for their customers only. Which is
incidentally in-line with this project’s client remit.
Figure 5 - Site Eye Films

2 – Research
21
Telephone:
2.1.3 ConstructionPhotography.com
This company are another provider of construction photography services; however as
we can see below their website has some errors. Again access to their interface is for
their customers only. (Construction Photography, 2014)
Figure 6 - Construction Photography

2 – Research
22
Telephone:
2.1.4 Current Website Branding
As the application is to be delivered via a link from the client’s existing website the look
and feel of the product needs to match the existing (see below) website. The developer
asked for and was provided with client logos and font type to match the company portal.
Figure 7 - Construct Films Website
2.2 Literature Review
2.2.1 Linux Ubuntu Apache 2 MySQL PHP (L.A.M.P.), phpMyAdmin vs C# and .NET
MVC Framework
The client’s remit of the project prohibits the use of Microsoft products due to budgetary
restrictions. Therefore a L.A.M.P. server was configured to host the application. The
advantages being that open source software is freely available. Disadvantages of this
may be support costs in the future, however the client has a good understanding of the
Linux operating system so is expected to be able to administer the product post-
handover. ‘phpMyAdmin’ (Tobias Ratschiller, 1998) is used to create and administer the
database that powers the product. This product was used because this web-based

2 – Research
23
Telephone:
graphic user interface (GUI) makes administrative tasks in SQL easier to accomplish.
Some direct SQL (e.g. TRUNCATE images) is used as part of the development and
testing cycles but on the whole the GUI was used for the SQL commands.
Figure 8 - Installing phpMyAdmin
2.2.2 VirtualBox
“VirtualBox is a virtualisation software package” (Oracle Corporation, 2007) this software
was used to create a virtual LAMP server on the developer’s laptop, that is then used to
host the development/test environment as discussed in chapter 3 – Product design.
2.2.3 jQuery & AJAX
The developer was exposed to AJAX and jQuery during a lecture conducted by Matthew
Mantle in the module Advanced Authoring of Interactive Media, this was then further
investigated using a variety of sources (Dainis Graveris, 2010; jQuery.com, 2013;
“jQuery.getJSON() | jQuery API Documentation,” n.d.; Powell & Books24x7, 2008;
Zakas, McPeak, & Fawcett, 2007) and found to provide a better solution to the problems
encountered below (see system design) in displaying the controls on the interface.

2 – Research
24
Telephone:
2.2.4 PHP Hypertext Pre-processor (PHP)
The developer had no prior knowledge of PHP upon commencing the product build, so
used the following sources (Angela Bradley, 2014; Babin & Books24x7, 2005;
Codeacademy, 2014; Dejan Marjanovic, 2012; Hudson, 2006; php.net, 2001; Quigley &
Gargenta, 2007; Ullman, 2011) to learn the language and create the application.
2.2.5 Syntactically Awesome Style Sheets (SASS) CSS Pre-processor
Sass (Hampton Catlin, Nathan Weizenbaum, & Chris Eppstein, 2006; Mastering Sass,
2011) had previously been used by the developer in their Advanced Authoring of
Interactive Media – MyGarden mobile application. The product has been used to
compact the css and reduce the size of the application footprint.
Figure 9 - Implementing sass
2.2.6 GitHub Version control
An account was created on github.com (Tom Preston-Werner, Chris Wanstrath, & PJ
Hyett, 2008) which is a code sharing repository. The tool was used to manage version
control of the application enabling the ability to develop one version and test it without
adverse effect on the live version of the software. Once the development version was
ready for release, a pull request, was created and the development branch was merged
into the master branch. This enables new features of the software and bug fixes to be

2 – Research
25
Telephone:
tested before version release. This will continue during the lifecycle of the application
using the test environment as discussed previously in the virtualisation section.
Figure 10 - GitHub version history
2.2.7 Crontab
Linux has an application (cron) built in to enable the running of scheduled scripts. The
developer has researched the following sources to use this technology. (Brian
Kernighan, 1979; Ubuntu Tutorials, 2012)
2.2.8 Normalize.css
This is used to ensure cross browser consistency. Research from the following (Nicolas
Gallagher & Jonathan Neal, 2012) claims that issues with Microsoft Internet Explorer’s
(IE) application of styles in particular are resolved with this cascading style sheet.

3 – System Design Construct Films Image Interface and network
26
HD1 3DH
Telephone:
3 – System Design
3.1 System Modelling
According to (Dennis, Wixom, Tegarden, & Dennis, 2005) the Standish group found in a
1996 survey that 42 percent of all corporate IS projects were abandoned. Agile system
modelling is a technique designed to prevent projects from being abandoned and
incurring potentially massive costs through client engagement. Outlined below are a
series of models used in the inception of the product.
3.1.1 Entity Relationship Diagram (ERD)
Figure 11 - Initial ERD for design purposes
A very basic ERD was used as the system is in essence very simple in regards to data
relationships.

3 – System Design
27
Telephone:
Figure 12 - Screen shot of actual live ERD from phpMyAdmin
3.1.2 Data Flow Diagrams
These were used to conceptualise how the images would get from site to customer.
Figure 13 – Initial Dataflow diagram for design purposes

3 – System Design
28
Telephone:
Figure 14 - Updated Data Flow
Figure 13 shows the journey of an image from capture to customer.
3.1.3 Use Cases
Use cases demonstrate what the system users may require from the system.

3 – System Design
29
Telephone:
Figure 15 – Initial Use Case Diagrams for design purposes

3 – System Design
30
Telephone:
Figure 16 - Updated Use Cases
Over time the uses of the system changed, this is prevalent and in fact the purpose of a
rapid application development methodology.

3 – System Design
31
Telephone:
3.1.4 Sequence Diagrams
Figure 17 – Administrating customers
Figure 18 – Initial Customer Sequence diagram for design purposes

3 – System Design
32
Telephone:
Figure 19 - Updated Customer Sequence
These have been the most useful of all the UML diagrams although the whole process
has merit, with a development flow as discussed they are subject to a lot of change.

3 – System Design
33
Telephone:
3.2 Product Design
3.2.1 Network Diagram of proposed solution
The below diagram is a high level topology of the completed network. It demonstrates
the on-site cameras passing images to the CF-main server, these are then sent via an
automated scheduled rsync script to the CF-Archive server, which then presents the
images via a secure interface to the customers. Who access the interface via a link from
constructfilms.co.uk main webserver.
Figure 20 - Network Diagram

3 – System Design
34
Telephone:
3.2.2 Virtual Box Development and Test server
The server was setup as per the below diagram. The configuration was a replication of
the live server, running the same version and the same software as the production
server. Every time a new major release of the application was created on the test server,
once successfully tested, a commit of the changes were pushed to github then a pull
request was created on github and the production server was updated to match the test
environment. Virtualbox guest editions was installed to enable the creation of shared
folders. “With the "shared folders" feature of VirtualBox, you can access files of your host
system from within the guest system.” (Oracle Corporation, 2004)
A virtualbox shared folder was created and mapped to the development repository on
the development laptop, the test server accessed the shared folder using the following
command:
sudo mount -t vboxsf -o uid=1000,gid=1000 cfarc /var/www
however this command was not persistent between reboots of the test server so further
debugging was required (joel-pearson, 2013) to enable persistence of the mapped drive
by means of an entry into the /etc/fstab file.
/media/sf_cfarc /var/www vboxsf uid=1000,gid=1000
The above the drive was mapped to the apache source folder by means of a symbolic
link
ln –s /media/sf_cfarc /var/www
which meant that changes in the development repository were immediately represented
within the application’s test environment. Removing the need to use FTP software to
upload changes. This speeded up the development process.

3 – System Design
35
Telephone:
Figure 21 - VirtualBox topography
3.2.3 Host only network – Virtual Box
To enable the virtual machine client to be accessible from the host a host only network
adapter was created and configured on network interface eth1 on the client.

3 – System Design
36
Telephone:
Figure 22 - Virtual Machine Host only adapter
This change enabled access to the virtual machines httpd (apache) server.
3.2.4 Cron & php script to update MySQL records
Two crontab entries were created to handle the automatic entry of new records to the
database. As the server is a command line only machine without a graphic user interface
nano editor was used to edit the crontab file.
Finding the files
*/15 * * * * find /var/www/ -print | grep -i
'.*[.]jpg'>/var/www/data.file
The above entry is a simple ‘find’ command running every 15 minutes to look for any
‘jpeg’ files in the /var/www path and to output the locations of the image files into a ‘one
line per entry’ file, which can then be manipulated by the php script below.
Calling the php script to enter files into database
*/10 * * * * wget http://192.168.1.69/scrape.php >/dev/null
2>&1

3 – System Design
37
Telephone:
The above entry runs every 10 minutes and executes the scrape.php script (discussed
below) which takes the results of the previous entry and proceses them into MySQL
database entries.
Figure 23 - Crontab schedule
The concern in this entry is that the server must have a static IP address on the LAN. On
implementation this entry needs to be configured to the server’s local IP address by
editing the crontab file as root. The LAN DHCP server must be configured to forward
network traffic over port 80 (http) to that server or the solution will fail. This is done using
the following command which opens the interfaces file where DHCP can be replaced
with a static IP address.(note you need to be root to edit the network interfaces)
sudo nano /etc/network/interfaces
and then change the following
auto eth0
iface eth0 inet dhcp
to the static IP as follows
auto eth0

3 – System Design
38
Telephone:
iface eth0 inet static
address 192.168.1.100
gateway 192.168.1.254
netmask 255.255.255.0
network 192.168.1.0
broadcast 192.168.1.255
3.2.5 Scrape.php
The scrape script (see figure below) opens the previously discussed data.file and uses a
series of arrays, loops and ‘explode’ commands to dissect each line in the file and then
creates an INSERT query to populate the images table within the database with only the
new image details for only existing users in the database.
Figure 24 - script to harvest file locations and create SQL records

3 – System Design
39
Telephone:
The intelligence in the design of the script lies in the fact that the client can visit a new
customer site and install a camera, leave that running and then when they return create
the user account on the product, within 20 minutes of the new customer being created
on the server the product will present all images for that customer regardless of when
the customer had their first camera installed. Alternatively the client may require to
create the customer account on the product and then go to the site and install the
camera, as soon as the script sees a user for an image it will populate the image table
with records for that user. It will also pick up multiple cameras and create the records
accordingly.
3.2.6 Wireframes
The following wireframes were received from the client the product was built as closely
as possible using these wireframes.
Figure 25 - Login screen
This layout has proved popular with testers they are calling it ‘clean’.

3 – System Design
40
Telephone:
Figure 26 - Main Interface
Key areas here are the four controls and name of customer.
Figure 27 - Selection of date

3 – System Design
41
Telephone:
Dates only available for dates with associated records.
Figure 28 - Image displayed (full screen)
Reduced aspect image in this wireframe to see full details
Figure 29 - Image displayed (1:1 ratio)

3 – System Design
42
Telephone:
After discussion with the client a “Left click” to view 1:1 ratio was required.
3.2.4 jQuery and AJAX
Although the product initially utilised a PHP script to display controls and images through
the development cycles a move to using jQuery and AJAX to display these proved to be
a better fit for the product, the reason behind this move was that PHP by nature is a ‘pre-
processor’ and thus didn’t provide the asynchronous usability that the product required.
The developer realised that the easiest way to prevent users from getting confused with
controls (date input selectors, camera input selectors and time selectors) was to hide
those controls and only make calls to the database when the user clicked a selector or
made a change to a selector. PHP scripts are still called when selections are made, but
rather than load the entire dataset for that user (in the future an entire dataset could
reach tens of thousands of records) using AJAX means that only the relevant records
are returned (Zakas et al., 2007). Although at the moment the SELECT queries would
have no problems returning the entire dataset without the user experiencing system lag,
this approach anticipates that the system has a 3-5 year shelf life. See projections on
table below.

4 - Testing
43
HD1 3DH
Telephone:
4 - Testing
4.1 Alpha Test Results
Bugs were resolved at the time of finding them in the development iterations, however
noteworthy issues are listed below.
4.1.1 Accessing the server
Access to the server was tested on 18 January. As the figure below indicates there was
a problem accessing the prototype server from external (Internet) sources.
Figure 30 - External Trace Route
A trace route command was issued from an external diagnostic tools provider (who.is)
and the following table shows the results:

4 - Testing
44
Telephone:
Hop DNS IP ms
1 174.36.196.241-static.reverse.softlayer.com (174.36.196.241) 0.231
2 ae11.dar01.sr01.wdc01.networklayer.com (208.43.118.133) 0.164
3 ae8.bbr01.eq01.wdc02.networklayer.com (173.192.18.196) 0.868
4 ae0.bbr01.tl01.nyc01.networklayer.com (173.192.18.157) 6.381
5 ae0.bbr01.tl01.nyc01.networklayer.com (173.192.18.157) 6.047
6 t2c1-p12-0-0.uk-ilf.eu.bt.net (166.49.164.77) 86.749
7 t2c3-xe-11-3-0-0.uk-ilf.eu.bt.net (166.49.237.174) 87.057
8 t2c3-xe-11-3-0-0.uk-ilf.eu.bt.net (166.49.237.174) 86.728
9 166-49-168-86.eu.bt.net (166.49.168.86) 86.551
10 acc1-10GigE-5-0-0.sf.21cn-ipp.bt.net (109.159.251.44) 93.021
11 acc1-10GigE-5-0-0.sf.21cn-ipp.bt.net (109.159.251.44) 92.646
12 217.41.169.106 (217.41.169.106) 94.811
13 217.41.169.106 (217.41.169.106) 95.184
14 217.41.169.182 (217.41.169.182) 92.198
15 *
16 *
17 host109-155-85-188.range109-155.btcentralplus.com (109.155.85.188) 98.272
18 *
19 *
20 *
Table 5 - BT traceroute results
As the above table demonstrates the trace stops at the local BT HOMEHUB5 router (IP
109.155.85.188 is the WAN address of the local router, see figure below)

4 - Testing
45
Telephone:
Figure 31 - External WAN address
The above demonstrates that traffic is reaching the local router and then being dropped.
Making changes to the firewall process within the router as below
Figure 32 - Editing the firewall
Allowing traffic on port 80 as above has enabled access.
Broadband speed test results.

4 - Testing
46
Telephone:
The server is on a residential broadband connection. The following are a set of four
speed test results done over two weeks. The tests involve the developer using
unidesktop (see appendices) to access a University desktop and then remotely
download a file from the prototype server.
Figure 33 - Image list
18th January 2014
Downloaded the first 2 files within 3 seconds. Tests done on opening images direct from
site and file fully opened in browser within 2 seconds.
5.1.2 Data.file error in records
Figure 34 - Live SQL results

4 - Testing
47
Telephone:
The above figure displays the returned rows from a select all query on the images
database, this confounded the developer for some time as the below figure clearly
shows that the records existing in the data.file did not match the amount of records in
the database.
Figure 35 - Live data-file results
Some further investigation revealed a miss match in the times that the crontab scripts
ran on the live server in comparison to the test server, which explained the variance in
record quantity.

4 - Testing
48
Telephone:
Figure 36 - Test Box SQL records
Test server results above closely match results in data.file below.
Figure 37 - Test Box data.file results
This variance in the quantity of records is expected as there are three records that don’t
have customers associated with them as seen in below figure.

4 - Testing
49
Telephone:
Figure 38 - data.file erroneous records
As the scrape.php script only enters records that have a corresponding username the
above variance is expected and has no adverse impact on the product.

4 - Testing
50
Telephone:
4.1.3 Disparate Server versions
Another issue highlighted in the alpha testing process (phpmyadmin inconsistencies)
was found to be caused by the test server running Ubuntu Desktop 14.10 (for ease of
virtual shared folder management) and the live server running Ubuntu 12.04.4 LTS. In
future the developer will always use exactly the same version of server build for the test
environment as the live environment. The Desktop version with it’s GUI was used in this
development as the developer didn’t feel confident enough in using virtual machine
software as well as a linux command line only operating system as they were unfamiliar
with both technologies. The developer has a good working knowledge of both of these
applications so future cycles will be less problematic.
4.1.4 DateTime and button inputs
The DateTime and Button input fields in the application render very well in Google
Chrome however there were problems with both fields in both current versions of IE and
Firefox, additionally there were critical problems with previous versions (8 and below) of
IE with the usage of jQuery. As discussed in section 7.1.1.1 future releases will address
these problems with modernizer.js, the browser capabilities will be assessed by
modernizer.js and at least an information message to the user explaining the features in
the application will not work unless they upgrade their browser, or more preferable a
‘dumbed down’ version of the application will be presented with an explanation message
to the user so they can still use the application albeit with reduced functionality. As per
below email the client is in agreement.

4 - Testing
51
Telephone:
Figure 39 - Old IE UI conversation with client
Although the client has stated above that this bug is not an issue, a mature development
strategy would address this issue and present the best possible product to the
customers. This will be implemented in the next release.
4.2 Usability (beta) Test Results
Eight test participants were enlisted to conduct user acceptance testing. The full results
can be found in the appendix, the tests and a summary of results follow.
4.2.1 Instructions to tester
The following are the schedule of tests, please complete these tests in
order. Please record your results on the accompanying spreadsheet
(highlight the relevant cell 1 - 4 ). Complete the sections for each web
browser you have installed on your computer, if you don’t have a particular
browser installed please skip that section.
A. Open Microsoft Internet Explorer

4 - Testing
52
Telephone:
Browse to the web address: http://www.snowdon.me
1. Left click the ‘Learn More’ link and complete that section of the
questionnaire
2. Left click the main button
3. Enter the following details:
a. Username : test
b. Password: test
4. Left click the login button
5. Left click the date field and type the date 2014/04/24
6. Left click the camera field
7. Left click the time field and select a time
8. Select another time
9. Left click the image
10. Right click the image and save a copy
11. Left click the image again
12. Left click the logout button
13. Close the web browser

4 - Testing
53
Telephone:
4.2.2 Schedule
The full schedule repeats the below but includes sections for Google Chrome, Apple
Safari and Mozilla Firefox
User Test results - Questionnaire Name:
Microsoft Internet Explorer Poor Un-Satisfactory Satisfactory Good
1 Privacy Notice
1.1 Is the Privacy notice appropriate 1 2 3 4
1.2
Is the Privacy notice too long or not
comprehensive enough 1 2 3 4
1.3 Link from Privacy page 1 2 3 4
2 Login
1.1 Username Field 1 2 3 4
1.2 Password Field 1 2 3 4
1.3 Login Button 1 2 3 4
1.4 Look and feel 1 2 3 4
1.5 Time to login 1 2 3 4
1.6 Overall Login 1 2 3 4
2 main interface
2.2 Date field 1 2 3 4
2.3 Selection of Date 1 2 3 4
2.4 Camera field 1 2 3 4
2.5 Selection of multiple cameras 1 2 3 4
2.6 Time field 1 2 3 4
2.7 Selection of time 1 2 3 4
2.8 Image display 1 2 3 4
2.9 1:1 ratio image 1 2 3 4
3 Logout Button 1 2 3 4
Free Notes

4 - Testing
54
Telephone:
Google Chrome Poor Un-Satisfactory Satisfactory Good
1 Privacy Notice
1.2
2 Login
2 main interface
2.9 1:1 ratio image 1 2 3 4
Free Notes
Apple Safari Poor Un-Satisfactory Satisfactory Good
1 Privacy Notice
1.2
2 Login

4 - Testing
55
Telephone:
2 main interface
2.9 1:1 ratio image 1 2 3 4
Free Notes
Mozzila Firefox Poor Un-Satisfactory Satisfactory Good
1 Privacy Notice
1.2
2 Login
2 main interface

4 - Testing
56
Telephone:
2.9 1:1 ratio image 1 2 3 4
Free Notes
5.2.3 Quantification of results
The following table gives average scores form all the UAT results.
1 = Poor
2 = Unsatisfactory
3 = Satifactory
4 = Good
Test IE Chrome Safari Firefox Averages
Amount of testers 4 6 3 3 N/A
Is the Privacy notice
appropriate
3.1 3.1 2.3 3.3 2.9
Is the Privacy notice too
long or not comprehensive
enough
2.9 2.9 1.7 3.3 2.5
Link from Privacy page 3.8 3.8 3.0 4.0 3.3
Username Field 3.9 3.9 4.0 4.0 4.0
Password Field 3.9 3.9 4.0 4.0 4.0
Login Button 3.7 3.7 3.7 3.7 3.5
Look and feel 3.6 3.6 3.7 3.3 3.6
Time to login 4.0 4.0 4.0 4.0 4.0
Overall Login 3.9 3.9 4.0 4.0 4.0
Look and feel 3.3 3.3 3.3 2.7 2.8
Date field 3.0 3.0 3.3 2.3 2.7
Selection of Date 3.0 3.0 3.3 2.0 2.7

4 - Testing
57
Telephone:
Camera field 3.4 3.4 3.3 3.3 3.1
Selection of multiple
cameras
3.0 3.0 3.7 3.7 3.1
Time field 3.7 3.7 4.0 3.7 3.5
Selection of time 3.6 3.6 3.7 3.7 3.2
Image display 2.7 2.7 1.7 3.3 2.4
1:1 ratio image 2.6 2.6 1.3 3.0 2.2
Logout Button 3.9 3.9 4.0 4.0 3.6
Averages 2.8 3.4 3.3 3.4 3.2
Table 6 - Quantified beta test results
As can be seen by the last right hand cell overall the application can be rated as good,
however some areas of Safari (Privacy Notice, Image Display, 1:1 aspect ratio) were
very poorly performing. However the test data provided (images) were not live images
and this goes a good way to explaining the poor results. Upon repetition of the selected
‘poor area’ testers with actual live data their response was ‘4’ (good) across the board.
4.2.4 Free text Comments
The following is from a user testing with Microsoft Internet Explorer v8
‘not clear if my cookie information is related to me, or if all information is non-
identifiableas per visitor policy’ (Is the Privacy notice too long or not comprehensive
enough)
‘clicking on Main does not take me back. Used Back button to complete testing.’
(Link from Privacy page)
‘nothing happens on click’ (Login Button)
The following is a random selection of comments
‘If the ipad switches between landscape and portraite modes, the fields all overlap
and the page becomes jumbled.’ (Free Notes)
‘couldn't get to work on the ipad’ (Login)

4 - Testing
58
Telephone:
‘All links are clear and easy to use and it is useful that instructions appear for each
step when selcting what camera and time you want to view’
The following is in reference to the Login page
‘don’t see any privacy notice’ (Is the Privacy notice appropriate)
‘I suggest that refrences to data protection act etc… are moved to an expandable
pane or window which sets out true DPA requirements. The 'legalese' needs some
work to make it more real-world.’(Is the Privacy notice too long or not
comprehensive enough)
‘Tab control order from User->Test->Login Button would be better than User->Test-
>Forgotten Login. (Hope that makes sense)’ (Login Button)
‘Lightweight. Excellent’(Look and feel)
‘needs more padding’ (in reference to the username, password and login button
inputs)
‘Simple login form, hard to make look too pretty, managed an okay look however.’
(look and feel)
‘Quick, same as most other sites’ (Time to login)
‘Assuming the php security issues and the SQL injection type stuff is covered then
not too bad.’ (Overall login)
The following is in reference to the main page
‘worked with scroll menu not typing’ (Date field)
‘Control labels would be good’(Look and feel)
‘label would be good. Otherwise excellent’(Date field)
‘intuitive’(Selection of Date)

4 - Testing
59
Telephone:
‘Could not select multiple cameras but could select one or the other. Slight issue
with refresh in that I had to reselect the time once I changed the camera
source.’(Selection of multiple cameras)
‘had 2 to choose from, coulnt select more than one at any time’ (Selection of
multiple cameras)
‘better if enhanced with a fuzzy search capability.’(Selection of time)
‘cant see any image’(Image display)
‘Too basic, should load in the first image so user has something to look at and needs
some instructions on how to perate it.’ (Look and feel)
‘shocking to be honest, hard to use and I can type in 31/02/2014’ (date input)
‘I would gray out days that dont have a camera on them. Betetr user experience
overall doing that’ (Selection of Date)
‘easy to use’ (Camera & Selection of multiple cameras)
‘simple, does the job’ (Time field and Selection of time)
‘Should start off zoomed out, then given the option to zoom in using buttons rather
than clicking image.’ (Image display)
‘good idea, would again only do it if the user clicked on a button to view it that big.’
(1:1 ratio image)
‘does the job, keep sin with the design’ (Logout Button)
‘The product looks good, however looses some of the feel of it through poor design.
Functionaly works well and does the job. Needs a design overhaul and needs the
user to have a preloaded image when they first go on. Grey out the dates that dont
have data on them. Some slight delay loading image, but nothing too major to

4 - Testing
60
Telephone:
complain about. I assue that SQL injection etc. has been covered as I havent
attempted to hack it (sorry). Just needs some tlc on the design other than that it
looks like quite an interesting product. further enhancements could be a next button
to cycle to the next image if there is one available for that day, or a movie type
approach that would play them all as a stop motion animation which would be a cool
future idea.’ (free notes)
The tests conducted were on test data and a lot of the comments regarding image
aspect ratio have therefore been dropped from the results as after enabling access for
two testers to the live data they reported that there were no longer aspect ratio issues
with the images. The image data is a standard size and therefore the application does
not need to dynamically resize images.

4 - Testing
61
Telephone:
4.3 Client UAT Results
The developer has included these results as a separate section as they are held as the
most important feedback on the success of the project.(Thomas & Fernández, 2008)
User Test results - Questionnaire Name:Anthony Elliott
Microsoft Internet Explorer Poor Un-Satisfactory Satisfactory Good Notes
Privacy Notice
Tested IE
8.0.6001.18702
on WinXP SP3.
Is the Privacy notice appropriate 1 2 3 4
Vague language
might worry
some users who
aren't familiar
with cookies or
privacy issues.
Link from Privacy page 1 2 3 4
Privacy page
“main” button
doesn't return to
index page.
Login
Username Field 1 2 3 4
Password Field 1 2 3 4

4 - Testing
62
Telephone:
Login Button 1 2 3 4
Look and feel 1 2 3 4
Purple colours are
different
compared to
other browsers.
Not a big problem
though.
Time to login 1 2 3 4
Overall Login 1 2 3 4
main interface
IE8 doesn't login
to the main
interface.
Date field 1 2 3 4
Selection of Date 1 2 3 4
Camera field 1 2 3 4
Selection of multiple cameras 1 2 3 4
Time field 1 2 3 4
Selection of time 1 2 3 4
Image display 1 2 3 4
1:1 ratio image 1 2 3 4
Logout Button 1 2 3 4

4 - Testing
63
Telephone:
Free Notes
Google Chrome Poor Un-Satisfactory Satisfactory Good Notes
Privacy Notice
Tested Chrome
34.0.1847.131 on
Mac OSX 10.6.8
Is the Privacy notice appropriate 1 2 3 4 As above.
Login
main interface
Date field 1 2 3 4
Datepicker on
Chrome is the

4 - Testing
64
Telephone:
best user-
experience of all
the browsers.
For single-cam
jobs, the camera
should be
selected by
default, and
selection greyed
out.
Selection of multiple cameras 1 2 3 4 Works ok.
Time field 1 2 3 4
Needs work.
Scaled-down view
doesn't fill
browser window,
and doesn't fit to
the window if the
window is
narrower than
the scaled-down
image.

4 - Testing
65
Telephone:
Image scales to
1:1 but doesn't
allow any
pan/scroll around
the image, so
most of the image
remains
obscured.
Free Notes
Figure 40 - Client UAT results (A)

4 - Testing
66
Telephone:
Apple Safari Poor Un-Satisfactory Satisfactory Good Notes
Privacy Notice
Tested Safari
5.1.10 for Mac
OSX 10.6.8.
Login
main interface
Date field 1 2 3 4
Entering date by
text is ok for
older browsers,
but behaviour
needs tweaking –

4 - Testing
67
Telephone:
clicking away or
hitting tab works
fine to finish
entering the date,
but hitting enter
doesn't, this is a
common
behaviour and
should be added
if possible.
Other main
interface
comments as per
Chrome
Time field 1 2 3 4
Free Notes

4 - Testing
68
Telephone:
Mozzila Firefox Poor Un-Satisfactory Satisfactory Good Notes
Privacy Notice
Tested FF
versions 4.0.1 and
29.0 on Mac OSX
10.6.8.
Login
main interface
Date field 1 2 3 4
Text entry for
date selection –

4 - Testing
69
Telephone:
comments as per
Safari
Other main
interface
comments as per
Chrome
Time field 1 2 3 4
Free Notes
Figure 41 - Client UAT results (B)
As can be seen the key areas for improvement are related to cross browser and
backward compatibility of browsers. Clearly some critical functions (login) don’t work on
previous versions of IE. The date field also needs some attention for browsers other
than Google Chrome, the conclusion – further development section addresses how
these issues will be resolved.

4 - Testing
70
Telephone:
4.4 Security Test Results
4.4.1 HeartBleed Test Results
Although HTTPS (port 443) isn’t used by the server (therefore SSL attacks are really not
an issue to be considered), the server was patched regardless and the port opened on
the test LAN to allow traffic to the server, this was to test against possible future issues
with the vulnerability.
Figure 42 - Port 443 opened on firewall

4 - Testing
71
Telephone:
Figure 43 - Heartbleed test
The above shows that connections on 443 are dropped by the server, as a trace route
was ran to find where the last reported gateway was. Therefore HeartBleed will not pose
an issue.
The Nessus Heartbleed penetration test (below) was also ran and returned no
vulnerabilities.
4.4.2 Nessus Penetration Testing
The application was tested using Nessus (Renaud Deraison, 1998) the process involves
downloading the test software then registering to receive an activation code which is
then used to download “ the newest plugins from Tenable which may take some time as
we're testing for a lot of stuff.” (Renaud Deraison, 1998) the vulnerability scanner then
initializes. The following test suite is then provided

4 - Testing
72
Telephone:
Figure 44 - First pen test running
This test took 41 minutes to run and found two medium risks and 2 low risks.
Medium Risks
Name: PHP expose_php Information Disclosure
Synopsis: The configuration of PHP on the remote host allows disclosure of
sensitive information.
Description: The PHP install on the remote server is configured in a way that
allows disclosure of potentially sensitive information to an attacker
through a special URL. Such a URL triggers an Easter egg built into
PHP itself. Other such Easter eggs likely exist, but Nessus has not checked for
them.
Solution: In the PHP configuration file, php.ini, set the value for
'expose_php' to 'Off' to disable this behavior. Restart the web
server daemon to put this change into effect.
Name: Git Repository Served by Web Server
Synopsis: The remote web server may disclose information due to a configuration
weakness.

4 - Testing
73
Telephone:
Description: The web server on the remote host allows read access to a Git repository.
This potential flaw can be used to download content from the Web server that might
otherwise be private.
Solution: Verify that the listed Git repositories are served intentionally.
Low risks
Name: Web Server Uses Plain Text Authentication Forms
Synopsis: The remote web server might transmit credentials in cleartext.
Description: The remote web server contains several HTML form fields containing
an input of type 'password' which transmit their information to
a remote web server in clear text. An attacker eavesdropping the traffic between web
browser and server may obtain logins and passwords of valid users.
Solution: Make sure that every sensitive form transmits content over HTTPS.
Name: Web Server Uses Basic Authentication Without HTTPS
Synopsis: The remote web server seems to transmit credentials in clear text.
Description: The remote web server contains web pages that are protected by 'Basic'
authentication over plain text. An attacker eavesdropping the traffic might obtain logins
and passwords of valid users.
Solution: Make sure that HTTP authentication is transmitted over HTTPS.
The above useful information will be addressed in the next release of the software.
4.5 Test Evaluation
Although there were no maximum user recommendations in the initial requirements
analysis and the developer has not conducted any stress testing, current indications
(mysql.com, 2013) discussed previously in “Post Infrastructure considerations” predict

4 - Testing
74
Telephone:
the application will support as many users as the client requires given the correct
hardware infrastructure (network connectivity and disk storage).
There is a clear theme among beta testers that some find the controls unwieldy in
browsers other than Google Chrome and some could not even get past he login page
(IE v8 or below), as discussed in more detail later, this project will be ongoing post
University deadline and this feedback will be useful in addressing those issues. The
client has indicated a desire for a continued relationship with the developer and
development of the product further over the next 2-3 months. These reported issues will
form further requirements and act to steer future releases.

5 - Product Implementation
75
HD1 3DH
Telephone:
5.1 Infrastructure setup
5.1.1 Live Server Implementation
Local Area Network Configuration
The firewall already directs SSH traffic to a local server (the main image repository that
the cameras send images to) so an account needed to be created on this server that
had permission to SSH from that server to the CF-archive server (application host).
To anable the developer to administrate the cfarc server in the future (Git pulls, security
updates) until the client was comfortable with their own administrative tasks.
Changes to the server once migrated
The servers IP Address was changed and the crontab file edited as previously
mentioned to reflect the IP Address change.
New customers
The system handles new customers easily as previously discussed. However
development work should not be carried out on the live system as if the client was then
to push this to the github repository, any new folders created for customers would also
be pushed to the github repository. This will be outlined to the client in the handover
document.
5.1.1 DYNDNS
Client DNS entries?
5.1.2 Client Firewall configuration

76
Telephone:
5.2 Post Infrastructure considerations
5.2.1 Archiving old data
Once the contract with the customer has ended it would be prudent to migrate the
images from that contract to long term storage although as discussed previously the
Data Protection Acts 1998 & 2003 Section 2(1)(c) state that ‘the data shall not be kept
for longer than is necessary for that purpose or those purposes.’ (legislation.gov.uk,
1998). The following tables estimate possible data usage scenarios for the life span
(max 5 years) of the project.

77
Telephone:
Images
per hour 6
Total
images
per day 144
amount
of live
customers
max
cameras
per
customer
max
images
per day
max
image
size (Mb)
total storage
requirements
(Mb)
total storage
requirements
(Gb)
total storage
requirements
(Tb)
1 1 144 2 288 0.3 0.00
Total Records
created per day
1 1 144 2 2016 2.0 0.00
Total Records
created per week
1 1 144 2 8064 7.9 0.01
Total Records
created per month
1 1 144 2 105120 102.7 0.10
Total Records
created per year
1 1 144 2 525600 513.3 0.50
Total Records
created per 5 year
period
Table 7 - Estimation of minimum storage requirements
The above is the minimum expected usage of the system, the hardware supporting the
product has been tested with more users than this and shown no detriment in service.

78
Telephone:
Images
per hour 60
Total
images
per day 1440
amount
of
customers
max
cameras
per
customer
max
images
per day
max
image
size
(Mb)
total storage
requirements
(Mb)
total storage
requirements
(Gb)
total storage
requirements
(Tb)
100 10 1440000 2 2880000 2812.5 2.75
Total Records
created per
day
100 10 1440000 2 20160000 19687.5 19.23
Total Records
created per
week
100 10 1440000 2 80640000 78750.0 76.90
Total Records
created per
month
100 10 1440000 2 1051200000 1026562.5 1002.50
Total Records
created per
year
100 10 1440000 2 5256000000 5132812.5 5012.51
Total Records
created per 5
year period
Table 8 - Estimation of maximum storage requirements
The above is an estimated disk usage, however should increases in usage as above be
recorded then the client should look to invest in professional datacentre storage as the
product has not been designed to deal with this quantity of data or access requests.

79
Telephone:
Images
per hour 6
Total
images
per day 144
amount
of live
customers
max
cameras
per
customer
max
images
per day
max
image
size (Mb)
total storage
requirements
(Mb)
total storage
requirements
(Gb)
total storage
requirements
(Tb)
3 2 864 2 1728 1.7 0.00
Total Records
created per day
3 2 864 2 12096 11.8 0.01
Total Records
created per week
3 2 864 2 48384 47.3 0.05
Total Records
created per month
3 2 864 2 630720 615.9 0.60
Total Records
created per year
3 2 864 2 3153600 3079.7 3.01
Total Records
created per 5 year
period
Table 9- Estimation of client anticipated storage requirements
The above is an estimated disk usage based in interviews with the client, this type of
usage is within acceptable parameters for the current system and application.
‘Twitter achieved in August 2013 a new World record of 143,199 Tweets Per
Second (TPS). A typical day sees over 500 million tweets, which means
about 5,700 per second with MySQL.’ (mysql.com, 2013)
Over and above the requirements of this project.

6 – Evaluation
80
HD1 3DH
Telephone:
6 – Evaluation
6.1 Project
Overall the project has been behind schedule, this can only be accounted for below in
the personal evaluation section of the report as all attempts to stick to schedule were
made and tools (Google calendar, Evernote, as discussed above) were used to manage
meetings, workload and the project rollout.
This product may be useful in any market that requires a simple login system to view
remotely captured images, there are, however, countless other products available
(wordpress, facebook, twitter, www.zenfolio.com, www.propic.com) that provide this
functionality. This product was, from inception, a bespoke solution for a small business
and primarily a learning tool for the developer.
6.2 Product
6.2.1 Interface
The interface has been designed as per the client specifications, and as such is
currently basic and has limited features. The foundation created with this application,
however, will support modifications in the future and the interface adequately meets
current requirements (Elliott, 2013), it was a more important consideration to have the
product work on the platform and hardware and interface with the existing client systems
than to focus purely on “whistles and bells”, this has been achieved and future releases
can now safely be feature-rich.

6 – Evaluation
81
Telephone:
6.2.1.1 Date selector
The date selector requires some work to be as intuitive in other browsers (IE in
particular) as it is in Google Chrome. Lacking the ability to restrict user selections to
dates that are only available on that particular contract, is rapidly becoming a key feature
requirement. “Special Day Awareness” to give a message if the user selected a date that
fell for example on a weekend or bank holiday is in the “Must Have” requirements
specification.
6.2.1.2 Camera selector
The camera selector works well on first selection, however there are some issues after
the first selection has been made and the testers all reported that the second time the
selection is made there is confusion regarding which records are populating the time
selector field.
6.3 Personal
The developer has grown a good ‘working skills’ set as a consequence of this project
both in soft (time management, knowledge acquisition and communication) and hard
(technical) skills. The developer would estimate that 90% of technologies used in this
product were unknown to them prior to product initiation.
Moving forward (see conclusion-further development) the developer will continue to
investigate frameworks available for providing web powered solutions to business
requirements, in particular further investigation into ‘Model, View, Controller’ frameworks
(Esposito, 2011) and PDO (Dejan Marjanovic, 2012).
As a consequence of the technical learning in this project (and additional modules) the
developer instigated an Educational Psychologist test for, and has found they have,
Dyslexia. This is a very positive outcome for the developer as they have implemented
support techniques and tools to facilitate future learning at post-graduate level (The

6 – Evaluation
82
Telephone:
developer is starting a ‘Schools Direct’ teacher training programme in September 2014).
This personal discovery has also helped the developer to gain insight into this condition
which they are using in their work teaching secondary age pupils in a local school. One
of the techniques researched, is discussed in (Peter Doolittle, 2013)’s ‘Working Memory’
TedTalk, this helped a great deal to take on board material presented over the last
academic year of the developer’s study programme.
If the developer had the foresight to get tested and get the support in place before the
project initiation, the developer feels they would have delivered a more comprehensive
product in a timely fashion, these are interesting effects on the project timescales and
noteworthy to the developer for future project planning purposes.
The developer spent their placement year working in a network team maintaining and
supporting the University of Huddersfield’s Data Network Infrastructure. Peers of the
developer spent their placement year working as web developers and the developer
feels that their own skill in web development is a reflection of that ‘year behind’ their
peers. In hind sight the developer should have chosen a project that reflected the skills
learned during their placement year, in the network team, and previous vocational
experience. Alternatively the developer should have sought out a web development
placement year.
This all said the client is pleased with the product as it stands and as previously
discussed the product ticks 95% of the initial requirements, the remainder of such will be
resolved over the next two to three months.

7 - Conclusion
83
HD1 3DH
Telephone:
7 - Conclusion
7.1 Further Development
The client has agreed to pay for future version releases of the product on a pro-rata
basis. Below are areas for further development of the product.
7.1.1 BoilerPlate HTML5
This is a technology the developer encountered very late in the development cycle and
thus unfortunately could not be implemented into the application as it would require a full
rewrite of the application and extensive testing. However future versions of the product
will use this framework to enable the technologies listed below.
7.1.1.1 Modernizr
Due to Microsoft IE, Mozilla Firefox and Apple Safari limitations this plugin will be used
to support “datetime” types in those browsers. Google chrome has native support for this
HTML5 type and works out of the box.
“Unlike with the traditional—but highly unreliable—method of doing ‘UA sniffing,’ which is
detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr
does actual feature detection to reliably discern what the various browsers can and
cannot do. After all, the same rendering engine may not necessarily support the same
things, and some users change their userAgent string to get around poorly developed
websites that don’t let them through otherwise.” (modernizr.com, 2009)
<HTML class=" js no-flexbox no-canvas no-canvastext no-webgl
no-touch no-geolocation postmessage no-websqldatabase no-
indexeddb no-hashchange no-history draganddrop no-websockets
no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage
no-borderradius no-boxshadow no-textshadow no-opacity no-
cssanimations no-csscolumns no-cssgradients no-cssreflections
no-csstransforms no-csstransforms3d no-csstransitions fontface
no-generatedcontent no-video no-audio localstorage

7 - Conclusion
84
Telephone:
sessionstorage no-webworkers no-applicationcache no-svg no-
inlinesvg no-smil no-svgclippaths"><HEAD>
The above is a sample from IE’s developer tools DOM explorer running in IE 7
emulation mode, please note there are a lot of unsupported features, these will be
fixed by a “Polyfill” (some jQuery that asks if the feature is supported and provides
an alternative if it isn’t). The philosophy held by the team (modernizr.com, 2009) is
that developers should not be writing version specific code, but rather feature
specific code that provides the same functionality to users regardless of the
browser or version of browser they are using.
7.1.1.2 Normalise.css
This css template removes browser specific styling ready to build your own css over the
top of knowing that all browsers should now have their default styling removed.
This has been implemented in this product however all future versions of the product
should take the default normalise.css from Boilerplate.
7.1.2 Bootstrap for mobile
“One framework, every device. Bootstrap easily and efficiently scales your project with
one code base, from phones to tablets to desktops.”(Mark Otto, 2010) This framework
would be a natural choice for the future of this product as increasingly mobile platforms
are the norm and with mobile speed increases from the expansion of inexpensive 4G
networks it would be expected that on-site customers would want to access the product
while on site to see a history of the construction while discussing current issues.
7.1.3 Virtual Machine Server rather than physical hardware
Hosting the application on a virtual machine rather than physical hardware will be a
natural direction the solution takes as the resilience this provides (migration, restore from
backup, snap-shots) are of great value to the client. The developer has already

7 - Conclusion
85
Telephone:
discussed virtualisation in previous sections, this knowledge can be applied in the future
should the client require virtualisation of the live environment.

8 - Acknowledgements
86
HD1 3DH
Telephone:
8 - Acknowledgements
In addition to sources referenced throughout this document the author would also like to
thank Anthony Elliott for enthusiastically sponsoring this project and being very forgiving
when milestones & deadlines were not strictly adhered to. Dr. Rupert Ward of the
University of Huddersfield for supervising this project and maintaining the developer’s
momentum. Elliot Wright for his assistance in code development, introduction to the
sublime text editor (Skinner, Jon, 2011) and tireless explanation of a virtual test
environment, Kiran Arya and Jamie Ovenden for their web and network security
knowledge and finally Victoria Snowdon for critically testing the product and generally
supporting the developer throughout the project.

9 - References
87
HD1 3DH
Telephone:
9 - References
Angela Bradley. (2014, February). PHP login script tutorial. About.com PHP / MySQL.
Retrieved February 21, 2014, from
http://php.about.com/od/finishedphp1/ss/php_login_code.htm
Babin, L., & Books24x7, I. (2005). PHP 5 recipes: a problem-solution approach. New
York; Berkeley, CA: A-Press. Retrieved from www.summon.com
Brian Kernighan. (1979). UNIX man pages : crontab (5). Retrieved April 29, 2014, from
http://unixhelp.ed.ac.uk/CGI/man-cgi?crontab+5
Codeacademy. (2014). Codecademy. Codecademy. Retrieved November 30, 2013, from
http://www.codecademy.com/dashboard
Construction Photography. (2014). Construction Photography - Home. Retrieved
February 2, 2014, from http://www.constructionphotography.com/
Dainis Graveris. (2010). 37 Fresh jQuery Image And Gallery Display Solutions.
1stwebdesigner. Retrieved November 28, 2013, from
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
Dejan Marjanovic. (2012, February 21). PDO vs. MySQLi: Which Should You Use? -
Tuts+ Code Tutorial. Code Tuts+. Retrieved March 11, 2014, from
http://code.tutsplus.com/tutorials/pdo-vs-mysqli-which-should-you-use--net-24059
Dennis, A., Wixom, B. H., Tegarden, D. P., & Dennis, A. (2005). Systems analysis and
design with UML version 2.0: an object-oriented approach. Hoboken, N.J: Wiley.
Retrieved from www.summon.com
Elliott, A. (2013, June 30). Construct Films. Construct Films. Retrieved November 22,
2013, from http://www.constructfilms.co.uk

9 - References
88
Telephone:
Esposito, D. (2011). Programming Microsoft ASP.NET MVC. Microsoft Press. Retrieved
from www.summon.com
Evernote®. (2010). Evernote | Remember everything with Evernote, Skitch and our other
great apps. Retrieved April 30, 2014, from https://evernote.com/
Fortune, J., & Peters, G. (2005). Information systems: achieving success by avoiding
failure. Wiley-Blackwell. Retrieved from www.summon.com
Hampton Catlin, Nathan Weizenbaum, & Chris Eppstein. (2006). Sass: Syntactically
Awesome Style Sheets. CSS with superpowers. Retrieved March 22, 2014, from
http://sass-lang.com/
Hudson, P. (2006). PHP in a nutshell. Cambridge; Beijing: O’Reilly. Retrieved from
www.summon.com
joel-pearson. (2013, February 8). VirtualBox/SharedFolders - Community Help Wiki.
VirtualBox/SharedFolders. Retrieved April 29, 2014, from
https://help.ubuntu.com/community/VirtualBox/SharedFolders
jQuery.com. (2013). .data() | jQuery API Documentation. Retrieved November 30, 2013,
from http://api.jquery.com/data/
jQuery.getJSON() | jQuery API Documentation. (n.d.). Retrieved from
http://api.jquery.com/jquery.getjson/
legislation.gov.uk. (1998). Data Protection Act 1998. Text. Retrieved April 30, 2014, from
http://www.legislation.gov.uk/ukpga/1998/29/section/7
Lobster Pictures Limited. (2014). Lobster Pictures | Time lapse and construction
monitoring. Retrieved February 2, 2014, from http://lobsterpictures-px.rtrk.co.uk/
Mark Otto. (2010). Bootstrap. Retrieved April 30, 2014, from http://getbootstrap.com/
Mastering Sass: Lesson 1. (2011). Retrieved from http://www.youtube.com/watch?v=b_-
HLevIJbc&feature=youtube_gdata_player
modernizr.com. (2009). Modernizr: the feature detection library for HTML5/CSS3.
Retrieved April 17, 2014, from http://modernizr.com/

9 - References
89
Telephone:
mysql.com. (2013, October). MySQL :: Top 10 Reasons to Choose MySQL for Next
Generation Web Applications. Retrieved April 30, 2014, from
http://www.mysql.com/why-mysql/white-papers/top-10-reasons-to-choose-mysql-
for-next-generation-web-applications/
Nicolas Gallagher, & Jonathan Neal. (2012, February 28). Normalize.css: Make
browsers render all elements more consistently. Retrieved April 29, 2014, from
http://necolas.github.io/normalize.css/
Oracle Corporation. (2004). Oracle VM VirtualBox®. Oracle VM VirtualBox®. Retrieved
April 29, 2014, from https://www.virtualbox.org/manual/
Oracle Corporation. (2007, January). VirtualBox – Oracle VM VirtualBox. Retrieved April
29, 2014, from https://www.virtualbox.org/wiki/VirtualBox
Peter Doolittle. (2013). Peter Doolittle: How your “working memory” makes sense of the
world | Video on TED.com. TEDGlobal 2013. Retrieved from
http://www.ted.com/talks/peter_doolittle_how_your_working_memory_makes_se
nse_of_the_world.html
php.net. (2001). PHP: What are Magic Quotes - Manual. Retrieved April 28, 2014, from
http://www.php.net/manual/en/security.magicquotes.what.php
Powell, T. A., & Books24x7, I. (2008). AJAX: the complete reference. New York; London:
McGraw-Hill. Retrieved from www.summon.com
Quigley, E., & Gargenta, M. (2007). PHP and MySQL by example. Upper Saddle River,
NJ: Prentice Hall. Retrieved from www.summon.com
Renaud Deraison. (1998). Nessus Vulnerability Scanner. Retrieved May 1, 2014, from
http://www.tenable.com/products/nessus
Site-Eye Time-Lapse Films. (2012). Construction Photography Services by Site-Eye.
Retrieved February 2, 2014, from http://www.site-
eye.co.uk/construction_photography.html

9 - References
90
Telephone:
Skinner, Jon. (2011, August 19). Sublime Text: The text editor you’ll fall in love with.
Retrieved April 29, 2014, from http://www.sublimetext.com/
Thomas, G., & Fernández, W. (2008). Success in {IT} projects: A matter of definition?
International Journal of Project Management, 26(7), 733 – 742.
doi:http://dx.doi.org/10.1016/j.ijproman.2008.06.003
Tobias Ratschiller. (1998). phpMyAdmin. Retrieved April 29, 2014, from
http://www.phpmyadmin.net/home_page/index.php
Tom Preston-Werner, Chris Wanstrath, & PJ Hyett. (2008). Build software better,
together. GitHub. Retrieved March 22, 2014, from https://github.com
Ubuntu Tutorials. (2012, July 6). How to use crontab in Ubuntu | Ubuntu Tutorials.
Retrieved April 9, 2014, from http://www.ubuntututorials.com/use-crontab-ubuntu/
Ullman, L. E. (2011). PHP for the Web. Berkeley, Calif: Peachpit. Retrieved from
www.summon.com
Zakas, N. C., McPeak, J., & Fawcett, J. (2007). Professional Ajax. Indianapolis, IN:
Wrox. Retrieved from www.summon.com

10 - Appendices
91
HD1 3DH
Telephone:
10 - Appendices
10.1 Original wireframes (concept)
Figure 45 - Login wireframe (concept)

10 - Appendices
92
Telephone:
Figure 46 - Main interface wireframe (concept)

10 - Appendices
93
Telephone:
10.2 Code
10.2.1 cfarc.js
$(document).ready(function(){
//This script does the main 'heavy lifting' on the interface,
also it does the ajax calls and controls the displaying of
elements
//The following script is a work in progress to display the
earliest and latest date range available on the contract
// var oXHR;
// $("#dateRange").click(function(event){
// if (oXHR){
// oXHR.abort();
// }
// oXHR = $.ajax({
// url: "fetchDateRange.php",
// type: "post"
// //do we need something here to make
it work?
// });
// oXHR.done(function (response, textStatus,
jqXHR){
// // log a message to the console
// $("#dateRange").html(response);
// console.log("worked "+response);
// });
// oXHR.fail(function (jqXHR, textStatus,
errorThrown){
// // log the error to the console
// console.error("The following error
occured: "+textStatus, errorThrown);
// });
// oXHR.always(function () {
// });
// event.preventDefault();
// });
//hide the inputs that are not needed yet
$('#cam').hide();
$('#selTime').hide();
//display instructions to the user
$('#message').html('please enter date in YYY/MM/DD
format, then click anywhere else');
//create a variable for the AJAX call
var oXHR;
//detect the date change and make AJAX call
$("#imageDate").change(function(event){
//abort any running AJAX calls
if (oXHR){
oXHR.abort();
}
//variables for the form
var $form = $('#timeSel');
var $inputs = $form.find("input, select, button,
textarea");
var serializedData = $form.serialize();
//disable the inputs while making the call

10 - Appendices
94
Telephone:
$inputs.prop("disabled", true);
//make the call to the php script
oXHR = $.ajax({
url: "fetch_cam.php",
type: "post",
data: serializedData
});
//if it works fine then send results to the
relevant DOM object
oXHR.done(function (response, textStatus, jqXHR){
$("#cam").html(response);
});
//if it's not worked alert the error to the user
oXHR.fail(function (jqXHR, textStatus,
errorThrown){
alert("The following error occured:
"+textStatus, errorThrown);
});
//re-enable the inputs
oXHR.always(function () {
$inputs.prop("disabled", false);
});
event.preventDefault();
//now show the camera selector DOM object and a message
to tell the user what to do now.
$('#cam').show();
$('#message').html('now click the required camera');
});
//When the user selects the camera send an ajax request
to populate the image time selector
$("#cam").focus(function(){
if (oXHR){
oXHR.abort();
}
var cfCam = $('#cam').val();
document.cookie="selCam="+cfCam;
textarea");
var serializedData = $form.serialize();
oXHR = $.ajax({
url: "fetch_times.php",
type: "post",
});
oXHR.done(function(response, textStatus, jqXHR){
$("#selTime").html(response);
});
errorThrown){
console.error("The following error occured:
});
$('#selTime').show();
$('#message').html('now select the time you want');
});
$("#selTime").change(function(){
if (oXHR){
oXHR.abort();
}

10 - Appendices
95
Telephone:
textarea");
var cfTime = $('#selTime').val();
document.cookie="selTime="+cfTime;
var serializedData = cfTime;
oXHR = $.ajax({
url: "fetch_one_image.php",
type: "post",
});
oXHR.done(function(response, textStatus, jqXHR){
$("#output").attr("src", response);
});
errorThrown){
// log the error to the console
console.error("The following error occured:
});
$('#message').html('You can change the time or
camera or date');
$('#message').fadeOut(8000);
$('#message').html('Click the image to zoom in or
out');
$('#message').fadeOut(8000);
});
$('#output').click(function(){
$(this).toggleClass('output-lrg');
});
});
$('lg-logout').click(function(){
window.location.replace = "logout.php";
});
10.2.2 cfarc.scss
/* This css file is generated using sass with the compact flag,
please remember to generate application css with sass to reduce
the footprint.
/*Table of contents
1. Normalise.css
2. Tables
3. ID selectors
4. Class selectors
5. Global CSS
6. Input types
*/
/* The first section is a fork from git.io/normalize to reverse
browser specific styling
* and try to alleviate some (in particular IE) styling issues
with HTML5 and CSS3 */
/* 1. /*! normalize.css v3.0.1 | MIT License |
git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation
change, without disabling
* user zoom.

DissertationGS

Recomendados

Recomendados

Más contenido relacionado

Similar a DissertationGS

Similar a DissertationGS (20)

DissertationGS