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.

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;

have a slideshows of their sample invitations and photographs using Slideshowzilla and Macromedia Flash;

provide information about the services and packages of Onsight Digital Photography 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).

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

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.

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 probably look 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

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 Choosing logical a website to a

and proximity should be consistent throughout the site. flexibility desired within level. these On design the flip elements side, can enhance

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

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 is exposure 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 about 1,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.

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 what is 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) , text editing 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

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 for a 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.

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 their website 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

Macromedia Dreamweaver Macromedia Flash

Web development application originally created by Macromedia. Multimedia platform that is popular for adding animation and interactivity to web pages.

Notepad++ WAMP server

Text editor and source code editor for Windows. 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 CPU Internet Connection LAN Card

Definition Memory 256 and above MB of RAM Processor Intel Pentium IV or higher Hard Disk 10 GB and above Speed: 156kbps at least 100mbps

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.
Viewing information and services

Leaving message on shoutbox

VIEWER 0 Web-based Advertisement Onsight digital Photography

Provide information and services Client feedback, question and comment

Administrator

Uploading information, services, and answering the question on shout box.

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.

14

Start

Display Homepage

Choice= = About Us

About Us

Yes

Choice= = No Contact Us

Contact Us

Yes
Choice= = Gallery

Gallery

No

Choice= = Services

Yes

Services

No
Choice= = Shoutbo x

Shout Box

Yes

End
No

Yes

15

No

Figure 2. The Flow Chart of Main Menu (Navigation in Left side)

About Us

View choices Yes

Choices==about onsight

About Onsight

No Yes
Choices==Photog rapher and Staff

Photographer and staff

No A About Onsight
Figure 3. The About Us Flow Chart

Photographer and staff

View choices

View choices

Information

Information

Contin ue A

Contin ue A

16

Yes Home No

Yes Home No

Figure 4. The About Onsight Flow Chart

Figure 5. The Photographer and Staff Us Flow Chart

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.
Contact Us

View choices Yes

Choices==Onsight (branch)

Onsight (branch)

No Choices==Onsight (main)

Yes Onsight (main)

A Onsight (branch) No

Onsight (main)

View choices

View choices Figure 6. The Contact Us Flow Chart Information

Information

Contin ue A

Contin ue A

17

Yes Home No

Yes Home No

Figure 7. The Osight (branch) Us Flow Chart

Figure 8. The Onsight (main) Flow Chart

Figures 6, 7, and 8, are the representation of the Contact Us page, it has two subtitles which are Onsight (branch) and Onsight (main).
Gallery

View choices

Choices==Baptismal

Yes

Baptismal

No Choices== Wedding Baptismal A No View choices

Yes

Wedding Wedding

View choices
Figure 9. The Contact Us Flow Chart

Flash Presentation

Flash Presentation
Yes

Contin ue A

Home

Contin ue A

Home

Figure 10. The Baptismal Flow Chart

Figure 11. The Wedding Flow Chart

18

Yes

No

No

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

Services

View choices Yes

Choices==Invitatio n

Invitation

No Yes
Choices==Photo & Video Coverage

Photo & Video Coverage Yes Portrait

No
Choices==Portrait

No
Choices==Tarpauli n

Yes Tarpaulin

No

19

A
Figure 12. The Services Flow Chart

Invitation

Photo & video

View choices

View choices

Pictures Yes Contin ue No A Home

Information Yes Contin ue No A

Home

Figure 13. The Invitation Flow Chart

Figure 14. The Photo and Video Flow Chart

Tarpaulin

Portrait

View choices

View choices Contin ue A

20

Flash Presentation Yes Continu e No A Home

Flash Presentation Yes Home No

Figure 15. The Portrait Flow Chart

Figure 16. Tarpaulin Flow Chart

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 or process, 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

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

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

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

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

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 4.21 5.0 3.41 4.20 2.16 3.40 1.81 2.60 1.0 1.80

Descriptive Rating Excellent Very Good Good Fair 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

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 the pages of the website. The following are the screenshots of the all the pages.

27

Figure 19. The Homepage of the website

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

Figure 21. The Photographer and staff page of the website

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 of employees.

Figure 22. The Contact Us page of the website

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

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.

Figure 23. The Sample Tarpaulin page of the website

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 24. The Sample Portrait page of the website

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.

Figure 25. The Sample Invitation page of the website

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.

32

Figure 26. The Gallery page for wedding of the website

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.

Figure 27. The Gallery page for baptismal of the website

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.

33

The Shoutbox area (see

Figure 28. The Shoutbox area of the website

Figure 28), is located at

the 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 1. The website is easy to operate and use. 2. The website responds to the needs of the user. 3. User friendly.

Weighted Mean 4.8 4.2 4.8

Interpretation Excellent Very Good 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

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 1. The consistency on the information of the website.

Weighted Mean 5

Interpretation Excellent

Table 5 shows the average computation of all respondents based on the developed 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 1. The website displays the necessary information. 2. Meets the user requirements and objectives.

Weighted Mean 4.2 4.8

Interpretation Very Good Excellent

35

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

4.2

Very Good

Table 6 shows the average computation of all respondents based on the developed 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. The weight mean are two very good and one excellent.
Table 7. Mean Distribution of Respondents in Terms of Accuracy

Accuracy 1. Ability to ensure data accurately and validity. 2. Execute the website with the desired information and responds correctly. 3. Consistency of the design.

Weighted Mean 4.0 4.4 4.8

Interpretation Very Good Excellent Excellent

Table 7 shows the average computation of all respondents based on the developed 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

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 and one very good, meaning the viewer was satisfied.
Table 8. Mean Distribution of Respondents in Terms of Overall Website Performance

Overall Website Performance 1. Accuracy 2. Efficiency 3. Executability 4. Manageability 5. Reliability 6. Usability

Weighted Mean 4.8 4.8 4.8 4.8 5 4.8

Interpretation Excellent Excellent Excellent Excellent Excellent Excellent

Table 8 shows the average computation of all respondents based on the developed 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

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 gain visibility 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

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

REFERENCES Brooke, Roger. Pathways into the Jungian World: Phenomenology and Analytical Psychology. New York: Routledge, 2000. Cartellieri, Caroline, Andrew J. Parsons, Varsha Rao, and Michael P. Zeisser. The Real Impact 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 usage among older adults in the UK. Medical Informatics and the Internet in Medicine, 30, 317. 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 of Computer-Mediated Communication, 14(3), 735-742. Baron, G.L., & Bruillard, E. (1996). LInformatique et ses Usages dans lEducation. Paris: PUF.

40

Callahan, E. (2006). Cultural similarities and differences in the design of university web sites. 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 A. USABILITY 1. The website is easy to operate and use. 2. The website responds to the needs of the user. 3. User friendly. B. RELIABILITY 1. The consistency on the information of the website. C. EFFICIENCY & EFFECTIVENESS 1. The website displays the necessary information. 2. Meets the user requirements and objectives. 3. The website functions properly and provides quick access of information to the user. D. ACCURACY 1. Ability to ensure data accurately and validity. 2. Execute the website with the desired information and responds correctly. 3. Consistency of the design. E. OVERALL WEBSITE PERFORMANCE

5 4 1 4 5 1 4 1 1 3 4

4 1 4 1

4 1 4 3 1 1 1 1

41

1. Accuracy 2. Efficiency 3. Executability 4. Manageability 5. Reliability 6. Usability

4 4 4 4 5 4

1 1 1 1 1

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

3 4

42

5 6 7 8 9

1 0

1 1

1 2

1 3

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.

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.

C. Questionnaire Name of Respondent: ______________________ Position: _________________________________ To the respondent, The purpose of this evaluation form is a means to analyze and determine the functionality, reliability, efficiency and effectiveness, accuracy and usability of the Web Based Advertisement of Onsight Digital Photography. Signature:

44

Please check at the appropriate box the following evaluation scores: 5 4 3 2 1 CRITERIA A. USABILITY 1. The website is easy to operate and use. 2. The website responds to the needs of the user. 3. User friendly. B. RELIABILITY 1. The consistency on the information of the website. C. EFFICIENCY & EFFECTIVENESS 1. The website displays the necessary information. 2. Meets the user requirements and objectives. 3. The website functions properly and provides quick access of information to the user. D. ACCURACY 1. 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 PERFORMANCE 1. Accuracy 2. Efficiency 3. Executability 4. Manageability 5. Reliability 6. Usability D. Source Code index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Outstanding Exceeds Minimum Requirements Most of the time Meets Minimum Requirements Meets Minimum Requirements Sometimes Poor 5 4 3 2 1

45

<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>JaxBox</title> <style type="text/css"> @import "./style.css"; .style1 { color: #FF9900; font-weight: bold; } .style2 {color: #FF9900} </style> <script type="text/javascript" src="./ajax.js"></script> </head> <body onload="sndReqArg('shout', '')"> <div id="shout"> <span class="style1">Onsight Shoutbox</span> <div id="shout_contents"> </div> <div id="shout_form"> <form name="Shout"> <input name="theShout" rows="1" /> <button onclick="sndReqArg('shout', document.Shout.theShout.value); document.Shout.theShout.value=''; return false;"><span class="style2">Shout! </span></button> </form></div><div class="note"></div></div></body></html> Shout.php

46

<?php // Check to see if we a request. if($_REQUEST) { // If there's data being sent if($_REQUEST['arg'] != '') { // Strip HTML tags - you should probably apply a little // more form security love to this. $shout .= strip_tags($_REQUEST['arg'], "<b><u><i><strong><em>")."\n"; // Format the shout (add date stamp and line return) $shout = "<span class=\"date\">".date("[H:i:s]")."</span> ".stripslashes($shout); // Empty shouts.txt if filesize is over 15k if((filesize("shouts.txt") / 1024) > 15) { // write the shout if ($fp = fopen('shouts.txt', 'w')) { fwrite ($fp, $shout); } } else { // otherwise don't clear it. // write the shout. if ($fp = fopen('shouts.txt', 'a')) { fwrite ($fp, $shout); }}} // open shouts.txt for reading and get its contents. $handle = fopen("shouts.txt", "r"); $contents = fread($handle, filesize("shouts.txt")); fclose($handle);

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 .= "<p>".$val."</p>";}} } 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

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

} #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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh tml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="ContentType" content="text/html; charset=UTF8" /> <title>Revealing Photo Slider with jQuery by CSS-Tricks</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> <!-.style2 { color: #FFFF00; font-style: italic; } .style3 {font-family: Geneva, Arial, Helvetica, sans-serif} .style5 { color: #FFCC00; font-weight: bold; } .style6 {color: #FFFFFF} .style7 {color: #FFFF00} .style8 {color: #0066FF} --> </style> </head> <body> <center><img src="../../../img/image/servicesinvitation. jpg" alt="invitation" height="70" width="680"/></center>

50

<div id="page-wrap"> <table><tr> <td><div class="photo_slider"> <img src="images/1.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <a href="">Onsight Digital Photography</a></em></p> </div> </div></td> <td><div class="photo_slider"> <img src="images/2.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p> </div> </div></td> <td><div class="photo_slider"> <img src="images/3.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p> </div> </div></td> <td><div class="photo_slider"> <img src="images/4.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p> </div> </div></td> </tr></table> </div> <div id="page-wrap">

<table><tr> <td><div class="photo_slider"> <img src="images/5.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p> </div> </div></td> <td><div class="photo_slider"> <img src="images/6.jpg"/> <div class="info_area">

51

<h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p> </div> </div></td> <td><div class="photo_slider"> <img src="images/7.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p> </div> </div></td> <td><div class="photo_slider"> <img src="images/8.jpg"/> <div class="info_area"> <h3>Sample Invitation</h3> <p><em>By: <span class="style7">Onsight</span> <span class="style8">Digital Photography</span></em></p>

</div> </div></td> </tr></table> <p><h4 class="style2 style5">Note:</h4> <h4 class="style3"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;<span class="style6">Click on the Picture to see the large image.</span></h4> </p> </div>

<script type="text/javascript" src="js/photorevealer.js"></script> </body> </html>

E. Curriculum Vitae Questionnaires

GIL MARK D. VIZCONDE

PERSONAL BACKGROUND

Adress

: #042 brg. Malipampang San Ildefonso, Bulacan

52

Date of Birth Place of Birth Age Gender Civil Status Nationality Religion Fathers Name Mother Name

: May 25, 1991 : San Ildefonso, Bulacan : 19 : Male : Single : Filipino : Catholic : Ruel G. Vizconde : 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