PROPOSAL Final 1.2.3 Presentation

7/29/2019 PROPOSAL Final 1.2.3 Presentation

1/52

1

CHAPTER 1

INTRODUCTION

1.1 Project Context

In this digital age, having a website for a business is no longer an option. Its a must tool

in remaining relevant and competitive. Advertising attracts targeted potential customers,

and subsequently increases sales both in short term and long term. There are different

kinds of advertising. Among them are advertising on television, radio, billboards, as well

as advertising on the internet.

The developer knew that having web based advertisement makes easier and faster for

potential customers to find information on the services of Onsight. In addition to this, the

developer included price lists, where client can see the prices, compare them with the

prices of other stores. On the homepage of the website it provided information about

Onsight, prices of packages and some of their biggest client so far.

It is a Web-based Advertisement that aims to advertise the photography business of

Onsight. This would be a big helped in the business of the client because it provides

information needed by the customers. The website contained sample pictures or packages

of photo together with the price, staff information and the location of studio of Onsight

Digital Photography. Services included were Photo and Video shots/coverage in birthday,

debut, baptismal especially in Wedding and in any occasion.


2/52

2

1.2 Purpose and Description

An online advertising plays a major role in assisting its companies in advertising their

products on the Internet and reaching their target audience. Theres a need to differentiate

yourself from your competitors so as to attract customers and convert them into loyal

consumers. An online advertising can do this by enhancing online presence.

Due to the increasing competition on Photograph business, this study has help Onsight

Digital Photography, which is the client of the developer regarding the advertisement of

their business. The developer aims to benefit the Onsight Digital Photography in order to

modernize their advertising process has been attained.

The developer has been a beneficiary of the study since the developer had value the

importance of enhancing his skills and work performance while grasping knowledge

throughout the study.

1.3 Objective

1.3.1 General Objective

The general objective of this study is to create an Advertisement Website for

Onsight Digital Photography.

1.3.2 Specific Objectives

The advertisement website should:

have a Shoutbox in order to entertain customers questions and comments;


3/52

3

have a slideshows of their sample invitations and photographs using

Slideshowzilla and Macromedia Flash;

provide information about the services and packages of Onsight DigitalPhotography and;

provide contact information, business hours, services details, and location

of Onsight.

1.4 Scope and Limitation

This study aims to develop a web-based advertising for Onsight Digital Photography in

San Ildefonso and San Rafael, Bulacan.

This website includes information that makes people aware about the services of Onsight,

the prices, their services and the packages of photos. The project can claim a reservation

from the client who wants the service of Onsight by contacting the number of Onsight,

Email, or leaving questions on the Shoutbox area that the developer provided on the

website. The client can leave a message, question, comment or suggestion in the Shout

box area located at the bottom of the homepage (left-side).

The site has no sign-in or registration for the customer. Only the authorized personnel

were allow to upload, edit and update the information from the site (Content Management

Website).


4/52

4

CHAPTER 2

REVIEW OF RELATED LITERATURE

Niebres Jr (2006) stated that internet is certainly the most unique and greatest gift of

technology to mankind. Internet has made life so easier for us, that today we cant think

our life without it even for a minute. Today internet has become an indispensable part of

every aspect of our life. It is not only the fastest mode of providing information but today

it is serving us in various other ways. One of the biggest benefits that internet users enjoy

is communication. People living in completely different corners of the world can

communicate with each other smoothly through the internet. Equipped with most modern

interactive tools like emails, chats, SMS, voice SMS, internet provides fastest and most

hassle-free communication. Unlike post offices and telephone connections, internet is

accessible from all corners of the world and being a 24/7 service, it keeps on providing its

service to people all the time.

As stated by Enrique (2005), the positive impact of internet has been largely felt by the

business fraternity. In fact, with the introduction of internet, the definition of business

development has gone for a permanent changeover. Unlike the past, today quality and

quantity are not the only benchmarks for the growth and development of a business.

Today visibility in the market is a bigger factor. Your brand should reach the global

market. Your products should be visible everywhere. People across the world should

recognize your brand. Today product promotion and campaigning are the most important


5/52

5

criteria for achieving success in a business. And for successful product promotion and

campaigning you need to improve your communication and interaction with people.

With its modern tools, internet helps you to do that. The days of publishing

advertisements in newspapers are over. You need to reach people faster and you can do

that through online marketing. People can get to know about you, your company and

every detail about it just with a click on the mouse at any time and from any place.

Regular communication between all entities of the business, such as manufacturer,

supplier, buyer, seller, wholesalers and dealers is very important. The modern interactive

tools like chats, emails, SMSes helps a business organization to create a supply chain

management that keeps all entities of the business closely linked with each other.

So in a nutshell, the importance of internet in business development is immense. In fact,

without this wonderful gift of technology, prosperity of business in todays world would

have been a great challenge. For the business fraternity, internet has been the greatest

support and will surely keep on serving it better in the future too. Govanus (2000)

According to Gravador (2003), Internet becomes a big part in the lives of the students on

answering their assignments and researching for their projects. And even for the

professionals in communicating with their workmates, their clients and so on. It gives

them a big advantage because relying on the Internet consumes less time and effort doing

school or business activities.

Posted by Divine (2007) these are but three names that are used to describe the current

age, and they are completely accurate. Although there are still some older people that

refuse to embrace the internet, most young people could not even imagine life without it.


6/52

6

We use computers to shop, organize and print our photos, and to research all different

kinds of information, among others.

Taking all of this into consideration, the internet has made quite an impact in the business

world. People utilize the web to peruse a company's inventory, as well as find locations,

look up the phone number, and order the things they need. Not to mention that a good

amount of people use an internet search site to find a company that has exactly what they

need.

After a person has used the internet to find a business that they need, they will probablylook on that particular company's website for directions to their store. Only then will

someone drive over to the physical location to make their purchases. This saves time and

gas for a customer-they can look online and if a business does not have something that

they are looking for, they don't have to spend time and gas money driving to the store to

look for the item in person.

Additionally, having a website helps you compete in the internet world. You don't want

your rival small electronics store to catch the attention of the woman who needs a

vacuum cleaner and also buys a microwave. If someone looks online and sees that the

rival company has what they are looking for, while you don't even have a website, there

is no question that they will visit the store with the guaranteed inventory.

According to Jacobs (1997), a web-based information system not only disseminates

information, but also proactively interacts with users and processes their business task to

accomplish their business goals. A web-based information system supports the major


7/52

7

transactions of many companies in transferring data and information in their client

through the web.

According to Kirmani (2007), Simply by making online advertising and if you can ship

your products you can even open your business for international markets, enabling you to

increase your income and increasing your sales drastically. That is what inspired us to

start the web directory, www.finditglobally.com, a website that everyone can access and

easily remember. It contains businesses and services that are situated around the globe

and business men can use it and benefit from it.

The design of a website, as a whole, still involves many of the same

principles as a linear document. That is, contrast, alignment, repetition

and proximity should be consistent throughout the site. Choosing logical

flexibility within these design elements can enhance a website to a

desired level. On the flip side, overemphasizing differences between

pages can lead to a poor design. (William, 2006)

According to Palmer (2006), the main aspect of the use of flash is that the consumers can

play online videos without the need of OS dependant plug-ins in the computer. All they

need to do is download the required flash plug-ins in fraction of seconds and interestingly

without any hassles.

The flash technology also revolves around various flash files with flash templates of the

flash menu and flash templates for pre-designed website, easing the making of web sites.

While the flash menu provides lots of options and menu bars for a webpage, the flash

template offers a wide range of pre-made website alternatives to choose from
http://uxmatters.com/authors/archives/2008/01/afshan_kirmani.phphttp://advertising.43836.free-press-release.com/http://uxmatters.com/authors/archives/2008/01/afshan_kirmani.phphttp://advertising.43836.free-press-release.com/


8/52

8

In recent years, online shopping has become popular; however, it still caters to the middle

and upper class. In order to shop online, one must be able to have access to a computer, a

bank account and a debit card. Shopping has evolved with the growth of technology.

According to research found in the Journal of Electronic Commerce, if one focuses on the

demographic characteristics of the in-home shopper, in general, the higher the level of

education, income, and occupation of the head of the household, the more favourable the

perception of non-store shopping. The Impact of Internet User Shopping Patterns and

Demographics on Consumer Mobile Buying Behavior. Journal of Electronic Commerce

Research, An influential factor in consumer attitude towards non-store shopping isexposure to technology, since it has been demonstrated that increased exposure to

technology increases the probability of developing favorable attitudes towards new

shopping channels. Kimberly (2007).

As posted in http://www.consumersearch.com (2010) Speeds for any Internet service are

expressed as kilobits per second (Kbps) or megabits per second (Mbps); there are about1,000 kilobits in a megabit. For broadband, you'll see two speeds -- one for upstream and

one for downstream. Upstream speeds determine how quickly you'll be able to do things

like email photos, send file attachments and upload information to your personal web

page. Downstream speed affects how quickly you can perform the most common tasks

like web surfing, viewing large resolution of website, flash presentation, downloading

music or software or retrieving email. When you see just one speed listed, it's generally

the downstream speed. Given that you'll likely be downloading much more than you

upload, downstream speed is the more important specification for most home users.
http://en.wikipedia.org/wiki/Debit_cardhttp://www.consumersearch.com/http://en.wikipedia.org/wiki/Debit_cardhttp://www.consumersearch.com/


9/52

9

For dial-up, both upstream and downstream speeds are about 30 Kbps to 56 Kbps, and

the speeds haven't bumped up much in recent years. By contrast, fiber-optic and cable

Internet service downstream speeds are rising dramatically. For example, Verizon FiOS

now claims maximum theoretical download speeds of 50 Mbps and upload speeds of 20

Mbps. For DSL, speeds can vary a lot, as mentioned above, but downstream speeds

typically range from less than 1 Mbps to more than 7 Mbps, which is generally enough

for most users. Most visitors to my Making Website are beginning their learning path; my

blog covers information in regards to content, domain names, web hosting and SEO. I

though why computer hardware and software shouldnt be covered to, after all it is whatis use to browse, compose and submit our work.

Quoted by William (2010), As you can see I don't think bigger is better, the $500 laptop

has Vista as the operating system, 2GB of ram, 160GB of Hard Drive and the CPU is a

Celeron 2.2Ghz. The tasks that this laptop needs to undertake are, web browsing of

course, simple picture editing (cropping, resizing and compressing for the web), textediting and when I just want to be slack, my favorite game. Now you know what

hardware I use for my web design, I will now run through of my list essential software;

Web browsers - IE8, Firefox, Chrome, Opera and Safari. So we can check that the page

views ok across a variety of platforms. Photoshop - For my picture editing. Dreamweaver

MX 2004 - Mainly used in text editing mode and I like the site manager. Wampp -

Wampp creates a server on my PC so I can create a full working page so it can be tested

before I upload and Fireftp - A Firefox plug-in to transfer files .


10/52

10

According to Schumann, David W., and Thorson (1999), Online advertising is a form of

promotion that uses the Internet and World Wide Web for the expressed purpose of

delivering marketing messages to attract customers. Examples of online advertising

include contextual ads on search engine results pages, banner ads, Rich Media Ads,

Social network advertising, interstitial ads, online classified advertising, advertising

networks and e-mail marketing, including e-mail spam.

After the developer read about the related literature, he realized that having a website fora business is important especially in Photography. He learned that website helped a lot in

a business owner to advertise their business. He also learned that banner ads attract

customers attention through color, graphics, and, sometimes, animation. Because

banners link to advertisers Web sites, they attract customers to your advertisers sites.

He knew that advertising allows companies to gain visibility through online directories

that help customers find them easily, using a search engine. Online directories dont

actually advertise a companys products or services, but do provide access to its Web site.

One technique to attract customers attention is to lure them with interesting content. One

of the ways to do this is to appeal to peoples emotions. Arousing feelings of love,

concern, fear, desire, enjoyment, or satisfaction helps prospective customers feel closer to

the business or product that is featured in an advertisement.
http://en.wikipedia.org/wiki/Promotion_(marketing)http://en.wikipedia.org/wiki/Internethttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/Marketinghttp://en.wikipedia.org/wiki/Search_engine_results_pagehttp://en.wikipedia.org/wiki/Banner_adhttp://en.wikipedia.org/wiki/Rich_Mediahttp://en.wikipedia.org/wiki/Social_network_advertisinghttp://en.wikipedia.org/wiki/Interstitial_adhttp://en.wikipedia.org/wiki/Online_classified_advertisinghttp://en.wikipedia.org/wiki/Advertising_networkhttp://en.wikipedia.org/wiki/Advertising_networkhttp://en.wikipedia.org/wiki/E-mail_marketinghttp://en.wikipedia.org/wiki/E-mail_spamhttp://en.wikipedia.org/wiki/Promotion_(marketing)http://en.wikipedia.org/wiki/Internethttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/Marketinghttp://en.wikipedia.org/wiki/Search_engine_results_pagehttp://en.wikipedia.org/wiki/Banner_adhttp://en.wikipedia.org/wiki/Rich_Mediahttp://en.wikipedia.org/wiki/Social_network_advertisinghttp://en.wikipedia.org/wiki/Interstitial_adhttp://en.wikipedia.org/wiki/Online_classified_advertisinghttp://en.wikipedia.org/wiki/Advertising_networkhttp://en.wikipedia.org/wiki/Advertising_networkhttp://en.wikipedia.org/wiki/E-mail_marketinghttp://en.wikipedia.org/wiki/E-mail_spam


11/52

11

CHAPTER 3

METHODOLOGY

3.1 Requirements Analysis

The client of the developer has set a requirement of what they want in their website. They

wanted to increase the customers awareness about their business by publishing their

services in a website. They want it to be informative, easy to find/access, where in user

can leave messages and suggestions and provide a lot of sample of their works when it

comes to Photography. They want black, orange, white, yellow for the theme of theirwebsite and the banner must be attractive to the eye of the viewers. And also, they want

to include presentation of their photos using software that allows creating photo slide

show.

The developer used PHP as programming language, Macromedia Dreamweaver and

Notepad++ for coding and designing of the interface, Adobe Photoshop CS3 for editing

pictures, and Flash for banner and presentation of sample pictures (Table 1.)

Table 1. Software requirements

Software Definition


12/52

12

Macromedia

Dreamweaver

Web development application originally created by

Macromedia.

Macromedia Flash Multimedia platform that is popular for adding animation and

interactivity to web pages.

Notepad++ Text editor and source code editor for Windows.

WAMP server It is a form of mini-server that can run on almost any Windows

Operating System. WAMP includes Apache 2, PHP 5 (SMTP

ports are disabled), and MySQL (phpMyAdmin).

Slideshowzilla Software that can be used in making flash picture presentation.

Hardware requirement (Table 2) is important in all aspects when it comes in

running/visiting a website and system in most computers in our generation right now.

Some computers were not able to access the internet because of low specifications of

model. The tendency of force running a large resolution of website (consisting of flash

pictures, videos and other multimedia files) in low specification of hardware can cause

the system not to respond quickly.

Table 2.Hardware Requirements

Hardware Definition

CPU Memory 256 and above MB of RAM

Processor Intel Pentium IV or higher

Hard Disk 10 GB and above

Internet Connection Speed: 156kbps

LAN Card at least 100mbps


13/52

Leaving message onshoutbox

Uploading information, services, andanswering the question on shout box.

Viewing information and services

Provide information and services

13

3.2 Design of Website

The flow of the website using context diagram (Figure 1) served as a guide for the

developer in making the web-based advertisement of Onsight Digital Photography.

Figure 1. The Websites Context Diagram

The developer created context diagram that shows the flow of the web-based

advertisement and it provides information on how the website performs its functions.

Context diagram is related to Data Flow Diagram, it shows the interaction between

administrator and viewer using the website. All information that can be viewed by the

user was uploaded by the administrator in the website. The viewer can leave a message

using the Shout box so that administrator can respond to the message or question of the

viewer.

0

Web-based

AdvertisementOnsight digitalPhotography

VIEWER

Administrator

Client feedback, question and

comment


14/52

Yes

Yes

No

14

Yes

Yes

No

No

Yes

No

Choice==Gallery

Choice==Contact

Us

Choice== AboutUs

Choice==Shoutbox

Choice=

=Services

ContactUs

About Us

ShoutBox

Services

Gallery

Display Homepage

End

Start


15/52

No

Yes

No

Yes

No

15

Fi ure 2. The Flow Chart of Main Menu Navi ationin Left side

About Onsight

View choices

Information

Continue

A

Photographerand staff

View choices

Information

Continue

A

About Us

View choices

Choices==aboutonsight

Choices==Photographer and Staff

A

About Onsight

Photographerand staff

Fi ure 3. The About Us Flow Chart


16/52

NoNo

YesYes

No

No

Yes

Yes

16

Figures 3, 4 and 5 are the representation of the page About Us, it has two subtitles which

are About Onsight and Photographer and Staff.

Onsight (branch)

View choices

Information

Continue

A

Onsight (main)

View choices

Information

Continue

A

HomeHome

Figure 4. The About Onsight Flow ChartFi ure 5. The Photo ra her and Staff Us Flow Chart

Fi ure 6. The Contact Us Flow Chart

Contact Us

View choices

Choices==Onsight(branch)

Choices==Onsight(main)

A

Onsight (branch)

Onsight (main)


17/52

NoNo

YesYes

No

No

Yes

Yes

Fi ure 9. The Contact Us Flow Chart

17

Figures 6, 7, and 8, are the representation of the Contact Us page, it has two subtitles

which are Onsight (branch) and Onsight (main).

Baptismal

Gallery

View choices

Choices==Baptismal

Choices==Wedding

A

Wedding

Home Home

Figure 7. The Osight (branch) Us Flow Chart Figure 8. The Onsight (main) Flow Chart

Wedding

View choices

Flash Presentation

Continue

A

Yes

Home

Figure 11. The Wedding Flow Chart

Home

Baptismal

View choices

Continue

A

Flash Presentation

Figure 10. The Baptismal Flow Chart


18/52

NoNo

Yes

No

No

No

No

Yes

Yes

Yes

Yes

18

Figures 9, 10, and 11, are the representation of Gallery page, which has Baptismal and

Wedding page.

Services

View choices

Choices==Invitation

Choices==Photo &Video Coverage

Invitation

Photo & VideoCoverage

Choices==Portrait Portrait

Choices==Tarpaulin

Tarpaulin


19/52

Yes

Yes

NoNo

Fi ure 12. The Services Flow Chart

19

Information

Photo & video

View choices

Contin

ue

A

A

Tarpaulin

View choices

Continue

A

Portrait

View choices

Home Home

Figure 13. The Invitation Flow Chart Figure 14. The Photo and Video Flow Chart

Invitation

View choices

Pictures

Contin

ue

A


20/52

NoNo

YesYes

20

Figures 12, 13, 14, 15 and 16, are the representation of the flow of Services page, it has

four subtitles which are the Invitation, Photo and Video Coverage, Portrait and Tarpaulin

page.

The flow chart of the website is a graphical or symbolic representation of a process of the

project of the developer. Each step in the process is represented by a different symbol and

contains a short description of the process step. The flow chart symbols are linked

together with arrows showing the process flow direction. It is also a type of diagram that

represents an algorithm orprocess, showing the steps as boxes of various kinds, and their

order by connecting these with arrows.

Home page most often refers to the initial or main web page of a web site. In home page

of the site, the viewer can view the banner of website, it consists of links like About Us,

Location, Contact Us, Gallery, Services and the Shoutbox and its up to viewer if they

want to exit or choose other links of the website. Once the viewer has chosen the location

link they will see the map or the location and exact place of the Onsight Digital

Photography. In about us, they will see the Photographer and staffs of Onsight. The

Gallery is a publication of digital photographs and other media through web; it contains a

Flash PresentationFlash Presentation

Continu

e

A

Home Home

Figure 15. The Portrait Flow Chart Figure 16. Tarpaulin Flow Chart
http://en.wikipedia.org/wiki/Diagramhttp://en.wikipedia.org/wiki/Algorithmhttp://en.wikipedia.org/wiki/Processhttp://en.wikipedia.org/wiki/Diagramhttp://en.wikipedia.org/wiki/Algorithmhttp://en.wikipedia.org/wiki/Process


21/52

21

presentation of sample picture of clients of Onsight. The services page is the main page

of the site because it consists of all the services offered by Onsight. In Shout box, which

will be located at the bottom of the page (left side), the viewer can leave a message,

question and comments. It also has a close button, which the viewer can click if they

want to terminate the website.

3.3 Description of the Prototype

Figure 17. SDLC

Development Stages

The developer uses the Prototyping model. This model is a software development process

which allows developer/s to create portions of the solution to demonstrate functionality

and make needed refinements before developing the final solution.This model allows

creating a working prototype in which users can interact with. It is easy to create,

develop, modify screens and simulate the look and feel of the planned interface.

The important task in creating a website is extracting the requirement or requirements

analysis. The developer has an abstract idea of what the client want as an end result, but

not what website should do. Once the general requirements are gathered from the client,

an analysis of the scope of the development was determined and clearly stated.


22/52

22

The design interface plan (Figure 18) of a website is perhaps the most critical factor

affecting the quality of the website, and has a major impact on the later phases. The

developer plans include: providing a uniform look and feel for all pages on the site, use

colors compatible with the Onsight logo (black, yellow, orange, white), but try to create a

more attractive page design thats what theyve seen on most of the Photography website.

The developer used iframe and page titles which are shown at the top of web browser

only.

Figure 18. Proposed interface of the website.

The planned interface (Figure 18) serves as the pattern/guide of the developer in making

the website for his client. This consists of title which is the name of the website,

logo/flash animation or the banner of the website. It also has a navigational page at left

side consisting of home page and other links like services, gallery, contact, location and

about Onsight Digital Photography. The Shout box located at the left side (bottom) of the


23/52

23

interface; in that page the user can shout a message, comment or question. The footer

consists of email, contact number and logo of Onsight Digital Photography.

The developer test the website in order to make sure that the site is free from any error so

that it will run smoothly. Errors detected caused some revisions on the website.

Procedures like designing, coding and testing are repeated until the website has met all

the clients requirements.

3.4 Development and Testing

The development of the Advertisement of the Website of Onsight Digital Photography

was done in a local host using WAMP server. WAMP server installer is available online

to download; this served as storage of all the PHP and HTML files. Also this serves as

the viewer of the site and also connects all the links even if the site is not uploaded to the

web. The developer used Notepad++ and Dreamweaver for coding and designing of the

website and Flash for the presentation of the pictures. In making a website using PHP as

programming language, the hardest part is the coding, making templates, and attaching

pictures. There is a big possibility that bugs will surfaced during the entire coding of all

the forms especially in the home page.

Site testing is the practical, hands-on process of checking that a web site meets the design

specifications (in terms of information, interactive and visual design) and usability

criteria (finding information easily, accessibility and compatibility). It is a vital and

essential part of the web development process. Once the website is totally done or

developed, the developer plans to test the website using local host for the approval or

comment of the viewer. The software (Operating System, browser, Flash Player and
http://www.iml.uts.edu.au/webdev/getstarted/usability.htmlhttp://www.iml.uts.edu.au/webdev/getstarted/usability.htmlhttp://www.iml.uts.edu.au/webdev/getstarted/usability.htmlhttp://www.iml.uts.edu.au/webdev/getstarted/usability.html


24/52

24

WAMP server) and hardware (laptop) needed to test and evaluate the website will be

provided by the developer.

In testing, the developer introduced his work to the viewer; he wanted the viewer to post

the comment or suggestion/feedback to the developed website specifically in the

Shoutbox area located at the left side of the page, and by giving them a questionnaire or

evaluation instrument. Evaluation refers to determining or accessing the value of a certain

product or services. Some evaluation instruments were used in order to determine the

value of the developed website. A research instrument that consists of sets of questions.

The questionnaire is categorized as factual and opinion. Questionnaire have advantages

over the type of survey in the way they are cheap and do not required as much effort

unlike telephone and verbal survey. The evaluators evaluated the website based on the

following criteria: usability, reliability, efficiency & effectiveness, accuracy, overall

website performance. Results of the evaluation were discussed in Chapter 4.

The testing was done by using local host for the mean time. The evaluator/tester is

composed of three panels, students, and staff from Onsight Digital Photography. The

panels give some tips and suggestions to the developer on how is he going to enhance the

appearance of the website more. The developer wants to know the impression of three

students during the actual testing to know if the website is user friendly. One staff from

Onsight Digital Photography is also served as an evaluator for the client to know if the

website would meet their requirements and needs. The website was tested on a variety of

operating systems (Windows XP, Windows 7 and Vista) and browsers (Mozilla Firefox,

Internet Explorer and Google Chrome) to ensure proper display and functionality. It


25/52

25

displays the output website and ready to view for evaluation. Testing is repeated until all

the requirements set by the client has met.

The final testing was done online wherein everyone can see the website of Onsight

Digital Photography, simply by typing the URL or the website address

http://onsightph.onlinewebshop.net/. For testing purposes the developer publish the

website URL to his Facebook account, so that people from this social networking site can

also leave comment or suggestions for the further enhancement of the site.

Table 3. Reference Table to Obtain the Mean Value Scores

Weighted Scores Descriptive Rating

4.21 5.0 Excellent3.41 4.20 Very Good2.16 3.40 Good1.81 2.60 Fair 1.0 1.80 Poor

Table 3 shows the Mean Value Scores that the developer used in getting the weighted

mean of each questions based on the answers of the respondents. This will determined the

descriptive rating for each weighted scores. It represents the rating and its corresponding

scale from the questionnaire that were distributed to the respondents for the evaluation of

the developed website in terms of Accuracy, Usability, Efficiency and Effectiveness,

Reliability, and Overall website Performance The weighted mean is computed by

multiplying the range of scores to the tallied scores, after that it is divided on the total

number of respondents.. With the highest point of 5.0 and the lowest point is 1.0, the

developer gathered all the evaluation forms from the respondents and calculated the

weighted mean for each category.


26/52

26

CHAPTER 4

RESULTS AND DISCUSSION

Project Result

The Advertisement Website of Onsight was uploaded on the internet through the host

free1awardspace.net with the web address http://onsightph.onlinewebshop.net.

The result is the output of the proposed project of the developer. It consists of all thepages of the website. The following are the screenshots of the all the pages.


27/52

27

Figure 19. The Homepage of the website


28/52

28

The Home Page of the website (Figure 19), this is the first page that the viewer could see

when they visit the website of Onsight Photography. It shows the packages, banner,

prices of sample photos of clients of Onsight Digital Photography. All links are linked at

the home page of the website such as Home, Location, Contact Us (Onsight branch and

Onsight main), Gallery (Baptismal and Wedding), Services (Invitation, Photo and Video

Coverage, Portrait and Tarpaulin) and Shoutbox.

The About page of the website (Figure 20), shows information about Onsight. It

consists of date when the business started or the brief history, the owner and about the

service they offered and all necessary information about Onsight Digital Photography.

Figure 20. The About page of the website


29/52

29

Photographer and staff page of the website (Figure 21), shows the photographer and all

the staffs of Onsight Digital Photography together with their position in the business and

some personal information. It consists of three buttons which is the Photographer, and the

two Picture editors. Those buttons consists of the name, picture and information ofemployees.

The Contact Us page of the website (Figure 22), shows the contact number, email,

location of Onsight and pictures of their establishments. This page helps people to contact

Figure 22. The Contact Us page of the website

Figure 21. The Photographer and staff page of the website


30/52

30

the Onsight, in a variety of different ways if possible. This can also use to tell visitors

why they might want to contact the Onsight.

The Sample Tarpaulin page of the website (Figure 23), is under the services of Onsight. It

shows the presentation of sample tarpaulin that Onsight did to their past client. This

presentation was created using slideshowzilla.

Figure 23. The Sample Tarpaulin page of the website

Figure 24. The Sample Portrait page of the website


31/52

31

The Sample Portrait page of the website(Figure 24) is under the services of Onsight. It

shows the sample portrait that Onsight did to their past client, and served as

advertisement to their future client or customer.

The Sample Invitation page of the website(Figure 25), is under the services of Onsight.

It shows the sample Invitation that Onsight did to their past client, and served as

advertisement to their future client or customer. Once the viewer clicked the more info

button at the bottom of the picture, the picture becomes larger in order to see the full size

of the sample invitation.

Figure 25. The Sample Invitation page of the website


32/52

32

The Gallery page for wedding of the website (Figure 26) is under the Gallery. It shows

the presentation of packages of photos in wedding. It is consist of five packages with

different design and frames of photos of past client of Onsight. It shows the edited picture

done by Onsight.

The Gallery page for baptismal of the website (Figure 27) is under the Gallery of

Onsight. It shows the photo packages of baptismal that Onsight did to their past client,

and used as an advertisement to their future client customer.

Figure 26. The Gallery page for wedding of the website

Figure 27. The Gallery page for baptismal of the website


33/52

33

The Shoutbox area (see Figure 28), is located atthe left side (bottom) of the navigation page of the website. This serves as the comment,

suggestion and question area of the viewer of the website of Onsight Digital

Photography. It has text area where in the user can type their comments or suggestions.

And after they typed their message, they may use enter key or click the shout button to

post the message. This also serves as an evaluation instrument of the developer.

Table 4. Mean Distribution of Respondents in Terms of Usability

Usability Weighted Mean Interpretation

1. The website is easy to operate and use. 4.8 Excellent2. The website responds to the needs of the user. 4.2 Very Good3. User friendly. 4.8 Excellent

Table 4 shows the average computation of all respondents based on the developed

websites Usability criteria per statement. This is measured in way that the user interact

with the website and how the website response. This data are interpreted whether the

website is easy to use for the user and responds to what it needs. The website is easy to

operate and use is an approach to make web sites easy to use for an end-user, without

Figure 28. The Shoutbox area of the website


34/52

34

requiring her (or him) to undergo any specialized training. The website responds to the

needs of the user and User friendly, means the user should be able to intuitively

relate the actions he needs to perform on the web page, with other interactions they sees

in the general domain of life e.g. press of a button leads to some action. The weighted

mean in usability of website are two excellent and one very good because the website

can:present the information to the user in a clear and concise way and give the correct

choices to the users, in a very obvious way.

Table 5. Mean Distribution of Respondents in Terms of Reliability

Reliability Weighted Mean Interpretation

1. The consistency on the information of thewebsite.

5 Excellent


websites Reliability criteria per statement. This is measured in way that the website

displays and gives the necessary information as what the website is intended for. The

consistency on the information of the website means that the website must have

consistent information based on the company. Some sites can be trusted to give accurate

information. However, one way to know the reliability of a website is to search written

sources for other information. According to the respondents the website information is

consistent thats why they choose five or excellent in weighted mean.

Table 6. Mean Distribution of Respondents in Terms of Efficiency and Effectiveness

Efficiency and Effectiveness Weighted

Mean

Interpretation

1. The website displays the necessary information. 4.2 Very Good2. Meets the user requirements and objectives. 4.8 Excellent


35/52

35

3. The website functions properly and providesquick access of information to the user.

4.2 Very Good


websites Efficiency and Effectiveness criteria per statement. This is refers in way that

the website is processed and output as what the website should be. This is measured

whether the website displays the necessary information, meets the user requirements and

objectives, functions properly and provides quick access of information to the user.

Effectiveness of a website is a quality metrics meaning how good a website is at testing.

The viewer can view the necessary information of Onsight in the website. The website

display necessary information, means that the website must display what are appropriate

and what is valuable for the company. The sub criteria that The website meets the user

requirements and objectives, means that website satisfied the contentment of the user on

viewing the websites content. The sub criteria that The website function properly and

provides quick access of information to the user, means that the website must provide a

way for the user to view the website on the most efficient and effective manner. Theweight mean are two very good and one excellent.

Table 7. Mean Distribution of Respondents in Terms of Accuracy

Accuracy Weighted Mean Interpretation

1. Ability to ensure data accurately and validity. 4.0 Very Good2. Execute the website with the desired informationand responds correctly.

4.4 Excellent

3. Consistency of the design. 4.8 Excellent


websites Accuracy criteria per statement. This is measured whether the website displays

an accurate and valid data, executes and responds as it is supposed to and whether the

website has consistent design. The website has the ability to ensure the validity of data by


36/52

36

viewing the right information approved by Onsight. Once the viewer clicked any link, the

website responds the correct information (e.g. Location), it brings to the location page

which the user can see the location of Onsight. The design of the website is consistent by

means of similarity of the color of the different pages. The requirements under the

Accuracy criteria are the following: the website must be well matched on the theme of

the company; the design on displaying the information must be precise all times. The

ability to ensure data accurately and validity, means that the data included in the website

must be derive from the business itself. The consistency of the design, means that the

overall design must be constant at all times. The weighted mean are two excellent andone very good, meaning the viewer was satisfied.

Table 8. Mean Distribution of Respondents in Terms of Overall Website Performance

Overall Website Performance Weighted Mean Interpretation

1. Accuracy 4.8 Excellent2. Efficiency 4.8 Excellent3. Executability 4.8 Excellent4. Manageability 4.8 Excellent5. Reliability 5 Excellent6. Usability 4.8 Excellent


websites Overall Performance. It sums up the website evaluation in terms of accuracy,

efficiency and effectiveness, usability and reliability. In overall, the website meets the

expectation of the user thats why they give Excellent in all items in the weighted mean.

The website gives the necessary information needed by the viewer (e.g. the example

pictures, they tend to leave a message or question in Shoutbox area, information about the

photographer and the location of Onsight). All links are working properly, no broken, and


37/52

37

it can be viewed by the viewer whenever they want in any browser they like. All links are

in alphabetical order and managed well.

CHAPTER 5

CONCLUSION

The output website of the developer focused on advertising the business of Onsight

Digital Photography thus, creating the business website with a web address

http://onsightph.onlinewebshop.net. This form of advertising allows business to gainvisibility through online directories that help customers find them easily, using a search

engine. The developer has created a Shoutbox in the website that allows interaction

between users and the staffs wherein questions were answered and adds more attraction

to the viewer. Presentations of some of their pictures were done using Flash software and

slideshowzilla give attraction to the eye of the viewer. The website has also provided

information regarding the different services and packages the business is offering to the

public as well as their contact information for their future clients.


38/52

38

CHAPTER 6

RECOMMENDATION

In line with the plan of the business on having an online service, it is highly

recommended that Onsight Digital Photography must assign a full time IT specialist to

update the services and to supervise the stream of the website.

It is also highly recommended that the establishment avails hosting for the website

because currently it was uploaded using a free hosting. Availing this will allow them to

upload numbers of photos and videos to their site thus giving the customers choices in

terms of their packages and services.

And lastly, for the future developer, if they will decide to make a website advertisement

using PHP as programming language it is highly recommend using this study as their

reference.


39/52

39

REFERENCES

Brooke, Roger. Pathways into the Jungian World: Phenomenology and AnalyticalPsychology. New York: Routledge, 2000.

Cartellieri, Caroline, Andrew J. Parsons, Varsha Rao, and Michael P. Zeisser. The RealImpact of Internet Advertising. The McKinsey Quarterly, No. 3, 1997.

Schumann, David W., and Esther Thorson. Advertising and the World Wide Web.Philadelphia, PA: Lawrence Erlbaum Associates, 1999.

Sutherland, Max, and Alice K. Sylvester. Advertising and the Mind of the Consumer:What Works, What Doesnt, and Why. Sydney, Australia: Allen & Unwin, 2000.

Adams, N., Stubbs, D., & Woods, N. (2005). Psychological barriers to Internet usageamong older adults in the UK. Medical Informatics and the Internet in Medicine, 30, 3-17.

Aksu, B.T. (2006). Bilgisayar Destekli Dil Bilimi altay Bildirileri (14 Mays 2005

Ankara). Ankara: Trk Dil Kurumu Yaynlar.

Barnes, S. B. (2009). Relationship networking: Society and education. Journal ofComputer-Mediated Communication, 14(3), 735-742.

Baron, G.L., & Bruillard, E. (1996). LInformatique et ses Usages dans lEducation.Paris: PUF.
http://www.mckinseyquarterly.com/The_real_impact_of_Internet_advertising_243http://www.mckinseyquarterly.com/The_real_impact_of_Internet_advertising_243http://www.mckinseyquarterly.com/The_real_impact_of_Internet_advertising_243http://www.mckinseyquarterly.com/The_real_impact_of_Internet_advertising_243http://www.mckinseyquarterly.com/The_real_impact_of_Internet_advertising_243


40/52

40

Callahan, E. (2006). Cultural similarities and differences in the design of university websites. Journal of Computer-Mediated Communication, 11(1), 239273

B. Bos, H. Wium Lie, eds., revised 11 January 1999. The CSS1 Recommendation is:http://www.w3.org/TR/1999/REC-CSS1-19990111, December 17, 1996,

B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., The CSS2 Recommendation is:http://www.w3.org/TR/1998/REC-CSS2-19980512. May 12. 1998.

Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R.Sutor, C. Wilson, and L. Wood, eds., The DOM Level 1 Recommendation is:http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001. October 1 1998.

D. Raggett, A. Le Hors, and I. Jacobs, edsThe HTML 4.0 Recommendation is:http://www.w3.org/TR/1998/REC-html40-19980424, 17 December 1997.

APPENDICES

A. Evaluation Result

CRITERIA 5 4 3 2 1

A. USABILITY1. The website is easy to operate and use. 4 12. The website responds to the needs of the user. 1 43. User friendly. 4 1B. RELIABILITY1. The consistency on the information of thewebsite.

5

C. EFFICIENCY & EFFECTIVENESS1. The website displays the necessary information. 1 42. Meets the user requirements and objectives. 4 1

3. The website functions properly and providesquick access of information to the user. 1 4

D. ACCURACY1. Ability to ensure data accurately and validity. 1 3 12. Execute the website with the desired informationand responds correctly.

3 1 1

3. Consistency of the design. 4 1E. OVERALL WEBSITE PERFORMANCE
http://www.w3.org/TR/1999/REC-CSS1-19990111http://www.w3.org/TR/1998/REC-CSS2-19980512http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001http://www.w3.org/TR/1998/REC-html40-19980424http://www.w3.org/TR/1999/REC-CSS1-19990111http://www.w3.org/TR/1998/REC-CSS2-19980512http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001http://www.w3.org/TR/1998/REC-html40-19980424


41/52

41

1. Accuracy 4 12. Efficiency 4 13. Executability 4 14. Manageability 4 15. Reliability 5

6. Usability 4 1

B. User Manual

After the URL of the website is typed, the homepage will be displayed.

2

1

3

4


42/52

42

1. Click the Homepage link to see the sample picture of Onsight with prices.

2. Click the Location link to see the location, address, & business hours of Onsight.

3. Click the About Onsight link to view the information of Onsight.

4. Click the Photographer and Staff link to view the photographer, staff and picture

editor of Onsight.

5. Click the Onsight (branch) link to view the information and location of their

branch.

6. Click the Onsight (main) link to view the location of their main studio.

7. Click the Baptismal link to view sample baptismal pictures of Onsight.

8. Click the Wedding link to view sample packages of wedding photos of Onsight.

9. Click the Invitation link to view the sample of invitation photos of Onsight.

6

5

7

8

91

0

1

1

1

2

1

3


43/52

43

10. Click the Photo and Video Coverage link to view the packages of their services in

Photograph and video coverage.

11. Click the Portrait link to view the presentation of portraits of fast client of

Onsight.

12. Click the Tarpaulin link to view the presentation of tarpaulin of fast client of

Onsight.

13. Click the click here or the shoutbox link to post a comment or suggestion.

Name of Respondent: ______________________Position: _________________________________ Signature:

To the respondent,

The purpose of this evaluation form is a means to analyze and determine thefunctionality, reliability, efficiency and effectiveness, accuracy and usability of the Web Based Advertisement of Onsight Digital Photography.

C. Questionnaire


44/52

44

Please check at the appropriate box the following evaluation scores:

5 Outstanding4 Exceeds Minimum Requirements Most of the time

3 Meets Minimum Requirements2 Meets Minimum Requirements Sometimes1 Poor

CRITERIA 5 4 3 2 1

A. USABILITY1. The website is easy to operate and use.2. The website responds to the needs of the user.3. User friendly.

B. RELIABILITY1. The consistency on the information of thewebsite.C. EFFICIENCY & EFFECTIVENESS1. The website displays the necessary information.2. Meets the user requirements and objectives.3. The website functions properly and providesquick access of information to the user.D. ACCURACY1. Ability to ensure data accurately and validity.2. Execute the website with the desired information

and responds correctly.3. Consistency of the design.F. OVERALL WEBSITE PERFORMANCE1. Accuracy2. Efficiency3. Executability4. Manageability5. Reliability6. Usability

D. Source Code

index.php


45/52

45

JaxBox

@import "./style.css";

.style1 {

color: #FF9900;

font-weight: bold;

}

.style2 {color: #FF9900}

Onsight Shoutbox

Shout!

Shout.php


46/52

46


47/52

47

// dump said contents into an array by lines.

$contents = explode("\n", $contents);

// reverse the array to get newest shouts on top.

rsort($contents);

// if there are shouts in the shoutbox

if(is_array($contents)) {

$res = '';// loop through each of them

foreach($contents as $val) {

// Add them to the output if they're not empty

if(!empty($val) && $val != '') {

$res .= "

".$val."
";}}
} else {

// generic loading message, in case we can't read

// from the file (i.e. if it's being written to at

// the time.

$res = "loading...";}

// Echo the final output to the div.

echo "shout_contents|".$res;} else {

// One more little clean-up in case we get invalid

// data, we can ignore it and show "loading..." until

// the timer cycles back around and pulls

up the actual

// data.

echo "shout_contents| loading...";}

?>

CSS

body {

background:#343434;

}

* {


48/52

48

font-family:arial, helvetica, sans-serif;

}

#shout {width:162px;

height:auto;

border:1px solid #e6e6e6;

padding:5px;

background:#333;

color:black;

margin:0 auto 0 auto;

}

#shout_contents {

width:152px;

padding:5px;

height:182px;

border:1px dotted #e6e6e6;

overflow:auto;

font-size:9pt;

color:black;

background:white;

}

#shout_contents p {

margin:0 0 5px 0;

padding:0 0 5px 0;

border-bottom:1px dotted #e6e6e6;

width:200px;

}

.date {

color:blue;

}

.note {

clear:both;

color:#a6c3ff;

font-size:8pt;

padding:5px;

text-align:center;

}

#shout_form {

padding:5px;

width:152px;

border:1px solid #000;

border-top:0;

}

#shout_form form {

margin:0;

padding:0;


49/52

49

}

#shout_form form input {

width:110px;

height:15px;

margin:0;

padding:0;

font-size:8pt;

background:#000;

border:1px solid #999;

color:#fff;

}

#shout_form button {

width:60px;

height:18px;font-size:8pt;

font-weight:bold;

text-align:center;

padding:0;

color:#fff;

background:#006;

border:0;

}

#shout_form button:hover {

background:#a6c3ff;

color:#006;

}

Invitation

Revealing Photo Sliderwith jQuery by CSS-Tricks


50/52

50

Sample Invitation

By: Onsight DigitalPhotography

SampleInvitation


Sample Invitation


Sample Invitation


Sample Invitation



51/52

51

SampleInvitation

By: Onsight Digital

Photography

Sample Invitation


Sample Invitation


Note:

Click on thePicture to see the largeimage.

GIL MARK D. VIZCONDE

PERSONAL BACKGROUND

Adress : #042 brg. Malipampang San Ildefonso, Bulacan

E. Curriculum Vitae


52/52

52

Date of Birth : May 25, 1991

Place of Birth : San Ildefonso, Bulacan

Age : 19

Gender : MaleCivil Status : Single

Nationality : Filipino

Religion : Catholic

Fathers Name : Ruel G. Vizconde

Mother Name : Grace D. Vizconde

SCHOOL ATTENDED

College : Bulacan Agricultural State College

Pinaod, San Ildefonso, Bulacan

Bachelor of Science in Information Technology

S.Y. 2007-Present

High School : Carlos F. Gonzales High School

Maguinao San Rafael, Bulacan

S.Y. 2003-2007

Elementary : Malipampang Elementary School

Malipampang San Ildefonso, Bulacan

S.Y. 1997-2003

PROPOSAL Final 1.2.3 Presentation

Documents

Transcript of PROPOSAL Final 1.2.3 Presentation