Вы находитесь на странице: 1из 21

ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

INDIVIDUAL ASSIGNMENT

Advanced Web Multimedia


(CT008-3-3-ADVMM)

HAND IN DATE: 20th May 2017

WEIGHTAGE: 100%

ASSIGNMENT TITLE: Game Website

STUDENT:

SEIFEDDINE EL AYEB TP036898 UC3F1702MMT

LECTURER: Mr. Naresh Kumar A/L Appadurai.

P a g e 1 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Table of Contents
Acknowledgment: ................................................................................................................................................... 3
Objectives of the web application: ......................................................................................................................... 3
Target users of the web application: ....................................................................................................................... 3
Investigation of the current methods used for media capture, preparation and delivery: ....................................... 4
Usability testing of the dynamic web multimedia application: ............................................................................... 7
Analysis of issues, gaining content from other sources: ......................................................................................... 8
Conclusion: ........................................................................................................................................................... 10
References: ........................................................................................................................................................... 11
Gantt Chart: .......................................................................................................................................................... 12
Storyboard: ........................................................................................................................................................... 13
User Manual: ........................................................................................................................................................ 16

P a g e 2 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Acknowledgment:
In general, this project took a good amount of work and research. The design and
implementation phases would not have been done this way if we did not have a support of some
individuals. Therefore, we would like to extend our sincere gratitude to all of them.
Firstly, we would like to express our sincere gratitude and deep regards to our beloved
lecturer Mr. Naresh Kumar A/L Appadurai, for his continuous support, patience, motivation,
and immense knowledge. His has given help and guidance to us in all time on this assignment.
Secondly, we also take this opportunity to express a deep sense of gratitude to our
friends who were always there to support and provide valuable information and guidance,
which helped us in completing this assignment through various stages.

Objectives of the web application:


Generally, web applications plays a significant role in communicating and propagating
useful messages on a particular issue to the public. Hence, this application entitled Game
Website was developed and intended to serve a few purposes as listed below:
1. Introducing everyone to the famous survival-horror game Outlast and the developers.
2. Advertise the game and urge people to buy it.
3. Providing customers with other online available services, and contact information.

Last and most importantly, is to develop our skills and knowledge in relation to areas of web
multimedia applications, specifically, in using technologies such as HMTL5, JavaScript, CSS
and PHP.

Target users of the web application:


Target user or audience is basically everyone identified as the targets or recipients for this
application. As a matter of fact, identifying target audience of a game is the most
fundamental elements to consider for effective communication and conveyance of the
intended message to the public.
Different groups appeal to various methods of communication differently, so it is essential to
identify what will work best with the targeted audiences.
Considering the fact that these web applications are important which cant be neglected or
ignored nowadays, therefore, the developer is targeting this web application to people who
are interested in playing survival-horror games, between the age of 16+ and 35.

P a g e 3 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

In order to build common ground between audience and the web application, the developer
need to know some of the user requirements especially in the development process when
testing and evaluation is mandatory, such as the following:
Is the UI user friendly?
Is there a good interaction between different options so the user can easily navigate
the entire system?
Is the information available in the web application good enough?
Could the user run through any error or bug?

Investigation of the current methods used for media capture,


preparation and delivery:
First of all, media is a combination of tools that are used to store and deliver information or
data, and it consists of the following forms:
text,
audio
images
animation
video

Some of these forms are crucial when it comes to web design and development. At this stage,
the phase of finding and researching, decides how the flow of the subsequent steps will
resemble. The most substantial undertaking now is to get the clear understanding of your future
site purposes, the fundamental objectives you wish to get, and the target audience you need to
pull in to your site.
Diverse sorts of sites provide guests with various usefulness which implies that distinctive
technologies ought to be utilized according to the purposes. A well described and point by point
plan made on the premise of this pre-development information can prevent us from spending
additional resources on solving the unexpected issues, for example, design changing or
including the functionality that wasn't at first planned.
Since the developer decided to build a game website, the main point is to get peoples attention
almost instantly, as soon as they open the website, and make them click on the Buy button,
because style alone does not sell games, but design does, for example, you can have a bad
looking website, and still make money, so basically, a great-looking website is a want, not a
need.

P a g e 4 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

After deciding the type of website, the developer thought about the web technologies which
are going to be used and they are the following:
HTML5
CSS
JavaScript
PHP

Moving along to the design stage, where the website takes shape. All the visual substance, for
example, pictures, photographs, and recordings is made at this progression. At the end of the
day, all the information that was accumulated through the primary stage is significant. The
target audience must be remembered while working on the design.
Website layout is the result of designer's work. It can be a drawing, a sketch or an actual graphic
design as you can see below in the Storyboard section. The essential function of the layout is
information structure presentation, seeing the bigger picture, and showing the basic
functionality. Layouts contain colors, logos, pictures, videos and can give a general
comprehension of the future product.
Now, as you can see that the website is highly depended on the main page designed in the
storyboard which makes this almost a one page website, and it is done for a reason after some
research. The developer got inspired by the games official website and mainly another games
website called world of Warcraft legion. The design is pretty much self-explanatory, however
there are few things I want to point out which are the following:
1. Header:

As a matter of first importance, notice that theres no navigation, and few links leading to
different page sections. This is an attempt to get rid of all distractions from the essential
objective. The exact opposite thing we need is to prepare players to purchase, have them click
away elsewhere, lose their attention and interest, and never returned. All we truly require up
top is the one-liner that makes them need to click the "purchase now" button.
Once the potential player clicks to purchase the game, it ought to open another tab to your game
marketplace, if not add it to their cart naturally.
On the off chance that the potential player can't be convinced, they will start to scroll, if they
haven't already by instinct.

P a g e 5 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

2. Trailer:

The subsequent stage is to have potential players experience the game through its trailer, the
following most ideal way besides playing the game itself. The developer needs to do his best
to keep trailers quick paced, hitting every one of the beats, successfully imparting its best
components.

3. Description:

The following area is fundamentally the description. On the off chance that they can't gather
what the game is about from the trailer, at that point they'll actually read that here. this should
segment generally be short, as free from development language, also, highlighting a modest
bunch of the game's best elements.

4. Screenshots:

Screenshots are truly straight-forward, which additionally implies they can be boring. Select
good screenshots to sell the game, not really for the advancement of the game.
At least 3 screenshots, yet 5-10 maximum is ideal.

5. Footer:

Finally, the footer should stay as minimal as possible. No one wants users clicking away and
never coming back.
Unfortunately, analytics demonstrate on numerous occasions that once a potential player clicks
far from the game website, they're likely not returning.

P a g e 6 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Usability testing of the dynamic web multimedia application:


Usability consists of the following four aspects:
Learnability.
Memorability.
Efficiency.
Satisfaction and errors.

First, learnability is the manner by how simple it is for another client to accomplish tasks the
first time when they visit your website. Second, memorability is the manner by which simple
it is for somebody to return to utilizing your site after they haven't utilized it for a period of
time. Third, efficiency is the way rapidly clients can finish undertakings on your site after they
know about its utilization. Fourth, fulfillment is whether clients appreciate the design of your
site and errors refers to the quantity of mistakes clients make when they utilize your site, the
severity of the errors and how easy they are to recover them.
The main reason why usability is really important when it comes to websites, is because there
are so many similar websites that people will go to, if the first one they visit is not considered
as usable. Regardless, of how much awesome a website could look in terms of design, if people
are unable to figure out how to navigate quickly and easily they will leave immediately.
Therefore, Usability testing comes in handy, as it is a technique used for evaluation by testing
a product with users. There are mainly three categories of usability testing and they are the
following:
Explorative: It is done during the early stage of website development in order to
evaluate both effectiveness and usability of a prototype or visual design, also, users
thinking process and understanding.
Assessment: used during the product development, as an overall usability test for
technology evaluation in order to determine satisfaction, effectiveness.
Comparative: compares two or more technology products or designs to distinguish
strengths and weakness of each.

When it comes to the types of usability testing, the developer has chosen the Hallway testing
method which requires random people such as friends, in order to test the website rather than
people who are experts in the field of testing websites because, this method is easy and effective
for testing a new website for the first time during development.

P a g e 7 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Designing a website is a good example where principles of human-computer interaction are


applied in order to make sure the site is user friendly and successful. The following are some
principles which are important for websites:
Defining the purpose of the website.
Knowing the audience.
Planning the organization of the site on how the different pages are linked together.
Providing tools which are easy to navigate such as links on the side or top bar.
Visual design in terms of repetition to sustain consistency. For example, the choice of
colors, graphic design and amount of text.
Text design: short-easy to read sentences/paragraphs. Also which type of fonts are
going to be used.

HCI has a very important role for future website development. The interface is a fundamental
part for ensuring that the website is successful, useful, functional, and pleasurable for the user.

Analysis of issues, gaining content from other sources:


When it comes to the issues encountered for developing the website in terms of media,
technology, tools and all resources which needs to be gained in order to successfully build it,
there are actually quite a few obstacles worth mentioning as follows:
Responsive web design:

Well, this is an approach which suggests that both design and development must respond to
the users behavior and environment based on screen size, platform and orientation. It
consists of a mix of flexible grids, layouts, images and a smart use of CSS media queries.
Example of a media query tag:

@media only screen and (min/max height: ...px min/max-width: ...px) {


}
This was the most difficult part to pull off for the developer as he has no prior
knowledge about media queries and how to use them, so a lot of research was needed
in order to proceed. It was not an easy challenge actually and could be quite frustrating.

P a g e 8 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

JavaScript:

JavaScript is honestly a nightmare for lots of people, and the developer is one of them.
Fortunately, thanks to Mr Naresh who provided us with such a cool website called CodePen,
the developer was able to find exactly what, and how to implement the desired features such
as the Loading page, and with some slight tweaks and modification anyone can customize
accordingly to his design.
Besides that, doing some research on google to look for .js files about some nice effects or
features, for example, the gallery implemented in the website, which opens and resizes the
images once someone click on them. There are lots of free content in some websites like
GitHub and many others, in order to make JavaScript much easier and faster to implement for
other beginner/intermediate people like the developer.
PHP:

Since the developer has already some knowledge from last year in PHP, so implementing a
contact page with basic sending/receiving e-mail service was quite straightforward and not that
hard to add.
CSS:

Websites like W3schools.com are a really good source of information when it comes to CSS,
HTML5 and many other scripting languages. CSS is already known as an easy to use mark-up
language, however sometimes looking for a specific effect, animation or transitions would
require some simple research.

P a g e 9 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Conclusion:
Everyone needs to make a lot of choices when designing a site. The early and more important
decisions will be informed by the goals of the project and the definition of the design problem.
Theyll also be informed by possessed experiences and observations. Developers will be
looking outside the design to constrain options to a manageable amount. There isnt a single
right choice with these early decisions so, there will be several workable solutions.

Once a few initial decisions are made, the principle of unity provides a roadmap to decisions
that come after. Each unified decision then further constrains the options for subsequent
decisions. Most design principles show you how you can visually communicate the ideas you
want to share with an audience. Much as we can choose different words and different ways to
form sentences, we can choose among different elements and principles to communicate
visually.

P a g e 10 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

References:
[Online]. 2017. Usabilitygeek.com. Available from: http://usabilitygeek.com/an-
introduction-to-website-usability-testing/
Company, A., Designer, A., Developers, D., Inquiries, G. & Quote, R. (2017). Six
Phases of the Web Site Design and Development Process. [Online]. 2017. iDesign
Studios. Available from:
http://www.idesignstudios.com/faq/process/#.WUhD8mgrJhG
Good Web Design Features. [Online]. 2017. Ratz.com. Available from:
http://www.ratz.com/featuresgood.html
How to Choose a Good Color Scheme For Your Website. [Online]. 2017. Best
Website Builder Reviews for 2017. Available from:
http://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/
Optimizely: Optimize digital experiences for your customers.. [Online]. 2017.
Optimizely.com. Available from: https://www.optimizely.com/optimization-
glossary/unique-selling-point/
Vocell, J. (2017). The 8 Elements of Modern Web Design (And Web Design Trends to
Watch). [Online]. 2017. Blog.hubspot.com. Available from:
https://blog.hubspot.com/marketing/elements-of-modern-web-design-
list#sm.00007kn8s3qz3dwgybs2p84t5l7pp
World of Warcraft. [Online]. 2017. World of Warcraft. Available from:
http://us.battle.net/wow/en/legion/#home
SitePoint. (2017). Human-Computer Interaction and Your Site SitePoint. [online]
Available at: https://www.sitepoint.com/computer-interaction-site/

P a g e 11 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Gantt Chart:

P a g e 12 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

Storyboard:

P a g e 13 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

P a g e 14 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

P a g e 15 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

User Manual:
Welcome to my website! You are about to discover a cool game developed by RedBarrels.
This short User Manual works as a guide or as a set of instructions which provides a
description on How/What is required in order to go through the website. The developer is
sure that you will have fun and will end-up buying the game. Lets get you started! Shall we.
System Requirements:
Any Operating system.
2GB RAM.
Any Graphic card.
Keyboard + mouse.
Headphones / speakers. (optional)

Now, please follow the easy steps one by one accordingly in order to be able to navigate
through all our webpages, specifically, the contact page:
1. Install XAMPP control panel. The installation file is included within the CD. Just click
on it.

2. Open xampp folder (depends on where you have installed, most probably in C:) and then
Open htdocs folder.

P a g e 16 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

3. Copy and paste the website's folder (Game website folder) inside htdocs folder.

4. Open the php folder inside xampp folder and then copy and paste the provided php.ini
file provided in the CD into the php folder (replace the existing php.ini inside the php folder
of course).

P a g e 17 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

5. Open the sendmail folder inside xampp folder and then Copy and paste the provided
sendmail.ini file provided in the CD into the php folder (replace the existing sendmail.ini
inside the sendmail folder of course).

P a g e 18 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

6. Open the program XAMPP control panel.

7. Click on the Start button for both the Apache module and the MySQL module.

P a g e 19 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

8. Click on the Admin button for The Apache module. The browser will open up
automatically where you will find the website's folder (Game website folder).

P a g e 20 | 21
ADVANCED WEB MULTIMEDIA CT008-3-3-ADVMM

9. Click on the Game Website folder and you are ready to navigate.

Thank you for your patience :).


ENJOY!
********************Game Website********************
PLEASE NOTE:
You can change the browser you want to open the website with by going to the config
button on the top right corner inside XAMPP control panel.
First you will find Editor: and below it there's the Browser: Select your browser
accordingly from there.

THANK YOU!

P a g e 21 | 21