Web Multimedia - Egyptian Website

8/2/2019 Web Multimedia - Egyptian Website

1/31

TP018849 Mohamed Ahmed Osman WMM

Egypt Travel Tours Page 1

Table of Contents

Gant Chart .................................................................................. 3

Acknowledgement ...................................................................... 4

Scope and Limitation .................................................................. 4

Introduction ................................................................................ 4

Company Background ................................................................. 5

Targeted Audience ..................................................................... 5

Project Description ..................................................................... 5

Project Objectives ....................................................................... 5

Web Technologies used .............................................................. 6

Storyboard .................................................................................. 6

Website Storyboard .................................................................... 7

Storyboard 1: Home ................................................................. 8

Storyboard 2: Travel Packages ................................................. 9

Storyboard 3: Photography .................................................... 10

Storyboard 4: Water Activities ............................................... 11

Storyboard 5: Sightseeing ...................................................... 12

Storyboard 6: Shopping .......................................................... 13

Storyboard 7: Maps ................................................................ 14

Storyboard 8: Egyptian Phrases ............................................. 15


2/31



Storyboard 9: About Us .......................................................... 16

Storyboard 10: Contact Us ..................................................... 17

Implementation ........................................................................ 18

Main Section (User Guide & Sample Screens) .......................... 19

Screen Mock-Ups ...................................................................... 20

Mock-Up 1: Home .................................................................. 20

Mock-Up 2: Travel Packages .................................................. 21

Mock-Up 3: Photography ....................................................... 22

Mock-Up 4: Water Activities .................................................. 23

Mock-Up 5: Sightseeing ......................................................... 24

Mock-Up 6: Shopping ............................................................. 25

Mock-Up 7: Map .................................................................... 26

Mock-Up 8: Egyptian Phrases ................................................. 27

Mock-Up 9: About Us ............................................................. 28

Mock-Up 10: Contact Us ........................................................ 29

Mock-Up 10-16: External Pages linked to Travel Packages .... 30

References ................................................................................ 31


3/31



Gant Chart


4/31



Acknowledgement

The WMM is continuous subject of PWWW that has been past on the first year of BIT program.

Despite on the all difficulties of the particular assignment students started writing the assignment

of the Web Multimedia because of the great help from our lecturer Mr. Mohamad Firdaus. Who

has provided me with all the necessary information and explanation not only about subject but

also clearly has explained about all the aspects of this assignment. In addition, he assisted me

during my progress of this assignment and recommended appropriate books for the chosen topic.

Scope and Limitation

The main objective of this assignment is to create a website that includes multimedia files in a

proper way with the usage of multimedia tools. There is no limitation for the choosing a business

organization to implement the website, but on the other hand it should give a clear idea of the

commercial prototype to sell company products through it. Besides that, also there are no

limitations of web components that may help in comprehending the project and its design such as

Flash usage, HTML, CSS, JavaScript or other additional software for picture editing such as

Photoshop. Finally, project must finish five to nine web pages of complete multimedia web

application and represents itself as an E-Business Application.

IntroductionWebsite improvement has become an everywhere as a component of our life. Currently most

organizations that deal with promoting or selling their products are using websites for the reason

that, an E-Business organization has a range of advantages such as global reach, cost reduction,

extended hours, in terms of customization and many more.


5/31



Company BackgroundEgypt Travel Tours is an Egyptian company that specializes in organizing and offering travel tours for

people who want to see the History of Egypt. Egypt Travel Tours was established as a company in 1988

by Mohamed Magdy an Egyptian Entrepreneur. Egypt Travel Tours offers a wide range of tours from Nile

cruises, a tour to the Great Pyramids of Giza or even the Valley of the Kings in the south of Egypt. Egypt

Travel Tours has established itself as great provider for tours around Egypt and currently has 44 offices

around the world.

Targeted AudienceAs stated above, Egypt Travel Tours targeted audience is people who would like to travel to Egypt and

be taken around and to learn about the history of the country and visit historical places. The targeted

audiences are tourist interested in Egypt. Therefore, Egypt Travel Tours Website will probably attend to

viewers that interested in travelling to Egypt.

Project Description

Based on the targeted audience website must meet all fundamental necessities of users expressed

in a suitable Graphical User Interface and all required information on it. As a result, future Egypt

Travel Tours project must include home page together with information of the company, recent

news, language phrases, activities to do, contact form page and a few landscape pictures included

within.

Project Objectives

1. Applying proper GUI.2. Interactive Javascript Gallery.3. Website Consistency.4. Minimal Surprise.5. User Friendly.6. Well Organized.7. Suitable Multimedia practice.


6/31



Web Technologies used

To fully customize the website with all the features include. The following tools were used;

Flash CS5/Macromedia Flash MX 2004, Adobe Photoshop, Cu3ox, Microsoft Web Expression 3

and Microsoft Expression Blend 3. In the case of web programming the following was used;

HTML, CSS, Javascript, Flash and Ajax.

Storyboard

A storyboard according to (Russel, 2011) is a diagram illustration of a planned website. It

generally consists of a sequence of pages that includes a rough drawing outlining the content,

navigation, and design elements of a future website. The main idea of a storyboard is to save

time and build high-quality website. As a result, a storyboard is designed with a web editor

before the actual website. In addition, the web programmer usually considers first; the collection

of data, photos which will be incorporated into the website, all the components are gathered

further, than implementation of a storyboard itself.


7/31



Sitemap

Home

Travel Packages

Photography

Water Activities

Sightseeing

Shopping

Maps

Egyptian Phrases

About Us

Contact Us

SitemapAccording to TechTerms.com (2011),

site map, or sometimes it written as

sitemap, is an overview of thepages within a website. This allows

users to quickly jump to any section

of a website listed in the site map. As

shown on figure 1.1, there are 10

main pages that interconnected to

each other.

Figure 1.1, Sitemap


8/31


9/31


10/31



Storyboard 3: Photography

Figure 3, Photography Page Storyboard

Photography

Fundamentally, the following storyboard design was created for the Photography storyboard that

includes the location of the Logo, Flash Banner, Menu buttons, Pictures, Gallery, Panorama

Flash and the copyrights section. The Photography storyboard that has been created was

designed particularly for the Photography page. The most significant thing on the Photography

page is the Galley which lets users navigate from one picture to another in a nice and organized

way and allowing them to go back and forth and also the panorama flash is significant because

its mouse controlled. The Photography Page Storyboard is shown in Figure 3.


11/31



Storyboard 4: Water Activities

Figure 4, Water Activities Page Storyboard

Water Activities

Primarily, the following storyboard design was created for the Water Activities storyboard that

includes the location of the Logo, Flash Banner, Menu buttons, Pictures with related information

and the copyrights section. The Water Activities storyboard that has been created was designed

particularly for the Water Activities page. The most significant thing on the Water Activities

page is that users get to read about all the water activities available in Egypt and offered by the

Egypt Tours company. The Water Activities Page Storyboard is shown in Figure 4.


12/31



Storyboard 5: Sightseeing

Figure 5, Sightseeing Page Storyboard

Sightseeing

Mainly, the following storyboard design was created for the Sightseeing storyboard that includes

the location of the Logo, Flash Banner, Menu buttons, Pictures with related information and the

copyrights section. The Sightseeing storyboard that has been created was designed particularly

for the Sightseeing page. The most significant thing on the Sightseeing page is that users get to

read about all the sightseeing available in Egypt and offered by the Egypt Tours company. The

Sightseeing Page Storyboard is shown in Figure 5.


13/31



Storyboard 6: Shopping

Figure 6, Shopping Page Storyboard

Shopping

Principally, the following storyboard design was created for the Shopping storyboard that


and the copyrights section. The Shopping storyboard that has been created was designed

particularly for the Shopping page. The most significant thing on the Shopping page is that users

get to read about all the shopping available in Egypt and offered by the Egypt Tours company.

The Shopping Page Storyboard is shown in Figure 6.


14/31



Storyboard 7: Maps

Figure 7, Maps Page Storyboard

Maps

Mainly, the following storyboard design was created for the Maps storyboard that includes the

location of the Logo, Flash Banner, Menu buttons, Google integrated maps and the copyrights

section. The Maps storyboard that has been created was designed particularly for the Maps page.

The most significant thing on the Maps page is that users get to navigate in Egypt and discover

some geographical information. The Maps Page Storyboard is shown in Figure 7.


15/31



Storyboard 8: Egyptian Phrases

Figure 8, Egyptian Phrases Page Storyboard

Egyptian Phrases

First and foremost, the following storyboard design was created for the Egyptian Phrases

storyboard that includes the location of the Logo, Flash Banner, Menu buttons, Table with

information and the copyrights section. The Egyptian Phrases storyboard that has been created

was designed particularly for the Egyptian Phrases page. The most significant thing on the

Egyptian Phrases page is that users get to see and learn some useful Arabic Phrases that could be

useful if they are about to travel there. The Egyptian Phrases Page Storyboard is shown in Figure

8.


16/31



Storyboard 9: About Us

Figure 9, About Us Page Storyboard

About Us

Essentially, the following storyboard design was created for the About Us storyboard that


and the copyrights section. The About Us storyboard that has been created was designed

particularly for the About Us page. The most significant thing on the About Us page is that users

can read about the people who run the company, in other words the face of Egypt Travel Tours.

The About Us Page Storyboard is shown in Figure 9.


17/31



Storyboard 10: Contact Us

Figure 10, Contact Us Page Storyboard

Contact Us

Essentially, the following storyboard design was created for the Contact Us storyboard that

includes the location of the Logo, Flash Banner, Menu buttons, a feedback form and the

copyrights section. The Contact Us storyboard that has been created was designed particularly

for the Contact Us page. The most significant thing on the Contact Us page is that users can

contact Egypt Travel Tours for either enquiring or updating their reservations. The Contact Us

Page Storyboard is shown in Figure 10.


18/31



Implementation

1. Flash BannerThe Flash Banner which is seen in all the pages was created by a program called cu3ox. This

program allowed me to add the pictures I wanted and then select the settings that I wish toinclude such as transition type and transition time and finally from the program embedded into

my webpage.

2. RSS FeedThe RSS Feed is a twitter enabled widget that shows all the tweets that contain a certain

keyword. RSS Feed was implemented by a website where you can specify the keyword you want

to use then get the code to embed it into the website.

3. MenuThe Menu was taken from a website that shares different types of source codes and in that

website I found this Menu and edited the code to fulfill my needs and add it to the website.

4. Ajax TabsThe Tabs found in the Travel Packages were found in a website that share source codes for

different web programming languages and it was taken and the code edited to fulfill my needs

for the website and fit perfectly.

5. GalleryThe Gallery was used in the Photography page. The gallery is constructed by JavaScript code.

The gallery was found a website that shares the source code and the JavaScript code was taken

and edited to fulfill the needs of the website.

6. Panorama FlashesThe Panorama flashes in the photography were constructed using Adobe Flash CS4 and then

embedded into the website.


19/31



7. MapsThe Maps integrated into the website were created by GoogleMaps.com and then embedded into

the website.

8. Feedback FormThe Feedback Form was created using normal HTML codes for forms and then connected using

a PHP file and in order to send the information back to the company then inserted into a server to

work.

9. TablesThe Website is all being organized with Tables to keep it consistent pixels were used in order to

keep the website from changing in size or position.

10.Cascading Style SheetInternal CSS is being used to control all the fonts, sizes and position of the text.

11.ImagesImages inserted into specific places based on the information they are related to.

Main Section (User Guide & Sample Screens)

Egypt Travel Tours website consists of 10 main pages and 6 hidden pages that are linked inside

one of the pages inside. All the web pages consist of a combination of HTML, CSS, JS and

Flash. The Screenshots and some explanation are listed below.


20/31



Screen Mock-Ups

Mock-Up 1: Home

Figure 11, Home Page Screen Mock-Up

The most considerable object planned on the home page is the RSS feed which is a Twitter

integrated RSS feed which allows users to find the most discussed topics or news related to

Egypt furthermore users will find an interesting picture and an explanation of the tours offered

with the company. The Homepage Mockup is shown in Figure 11.


21/31



Mock-Up 2: Travel Packages

Figure 12, Travel Packages Page Screen Mock-Up

The most considerable object planned on the Travel Packages page is the all the different typesof packages offered by Egypt Travel Tours and the itinerary is included to show users what will

be planned during the trip. The Travel Packages Page Mockup is shown in Figure 12.


22/31



Mock-Up 3: Photography

Figure 13, Photography Page Screen Mock-Up

The most significant thing on the Photography page is the Galley which lets users navigate from

one picture to another in a nice and organized way and allowing them to go back and forth and

also the panorama flash is significant because its mouse controlled. The Photography Page

Mockup is shown in Figure 13.


23/31



Mock-Up 4: Water Activities

Figure 14, Water Activities Page Screen Mock-Up

The most significant thing on the Water Activities page is that users get to read about all the

water activities available in Egypt and offered by the Egypt Tours company. The Water

Activities Page Mockup is shown in Figure 14.


24/31



Mock-Up 5: Sightseeing

Figure 15, Sightseeing Page Screen Mock-Up

The most significant thing on the Sightseeing page is that users get to read about all the

sightseeing available in Egypt and offered by the Egypt Tours company. The Sightseeing Page

Mockup is shown in Figure 15.


25/31



Mock-Up 6: Shopping

Figure 16, Shopping Page Screen Mock-Up

The most significant thing on the Shopping page is that users get to read about all the shopping

available in Egypt and offered by the Egypt Tours company. The Shopping Page Mockup is

shown in Figure 16.


26/31



Mock-Up 7: Map

Figure 17, Maps Page Screen Mock-Up

The most significant thing on the Maps page is that users get to navigate in Egypt and discover

some geographical information. The Maps Page Mockup is shown in Figure 17.


27/31



Mock-Up 8: Egyptian Phrases

Figure 18, Egyptian Phrases Page Screen Mock-Up

The most significant thing on the Egyptian Phrases page is that users get to see and learn some

useful Arabic Phrases that could be useful if they are about to travel there. The Egyptian Phrases

Page Mockup is shown in Figure 18.


28/31



Mock-Up 9: About Us

Figure 19, About Us Page Screen Mock-Up

The most significant thing on the About Us page is that users can read about the people who run

the company, in other words the face of Egypt Travel Tours. The About Us Page Mockup is

shown in Figure 19.


29/31



Mock-Up 10: Contact Us

Figure 20, Contact Us Page Screen Mock-Up

The most significant thing on the Contact Us page is that users can contact Egypt Travel Tours

for either enquiring or updating their reservations. The Contact Us Page Mockup is shown in

Figure 20.


30/31



Mock-Up 10-16: External Pages linked to Travel Packages

These Web pages above are linked as Tabs in the Travel Packages web page.


31/31


References

1. RUSSEL, W., (2011), Storyboard [online], About, Accessed from: , [Accessed 5

thof November

2011].

2. (No Author), (n.d.), Private Egypt Tours [online], Road to Egypt, Accessed from: , [Accessed

5th

of November 2011].

3. (No Author), (n.d.), Nile Cruises [online], Safari Egypt, Accessed from: , [Accessed 7

thof November 2011].

4. Omniglot, (n.d.), Useful Egyptian Arabic Phrases [online], Omniglot, Accessed from: [Accessed 8th of

November 2011].

5. (No Author), (n.d.), 12 Days: Egypt Nile Cruise Tour [online], Egypt Tour Info,Accessed from: , [Accessed 10

th

November 2011].

6. (No Author), (n.d.), Tour the Khan el khalilli bazaar[online], Egypt Tour Info, Accessedfrom: , [Accessed 10

thNovember 2011].

7. (No Author), (n.d.), Aswan [online], Ask Aladdin, [Accessed from: , [Accessed 13

thof November 2011].

8. Dynamic Drive, (2008), DD Mega Menu [online], Dynamic Drive, Accessed from: , [Accessed 16

thof

November 2011].

9. PUIDOKAS, E., (n.d.), FrogJS Image Gallery [online], Accessed from: , [Accessed 18

thof

November 2011].
http://presentationsoft.about.com/od/s/g/storyboard.htmhttp://www.roadtoegypt.com/private-tours-designed-vacations-egypt.htmlhttp://www.safariegypt.com/egypt_nile_cruise.htmhttp://www.omniglot.com/language/phrases/arabic_egyptian.phphttp://egypttourinfo.com/egypt-nile-cruise-tour.htmlhttp://egypttourinfo.com/khan-el-khalili.htmlhttp://egypttourinfo.com/khan-el-khalili.htmlhttp://www.ask-aladdin.com/Aswan-Travel-Information/index.htmlhttp://www.ask-aladdin.com/Aswan-Travel-Information/index.htmlhttp://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htmhttp://www.dynamicdrive.com/dynamicindex4/frogjs/index.htmhttp://www.dynamicdrive.com/dynamicindex4/frogjs/index.htmhttp://www.dynamicdrive.com/dynamicindex1/ddmegamenu.htmhttp://www.ask-aladdin.com/Aswan-Travel-Information/index.htmlhttp://www.ask-aladdin.com/Aswan-Travel-Information/index.htmlhttp://egypttourinfo.com/khan-el-khalili.htmlhttp://egypttourinfo.com/egypt-nile-cruise-tour.htmlhttp://www.omniglot.com/language/phrases/arabic_egyptian.phphttp://www.safariegypt.com/egypt_nile_cruise.htmhttp://www.roadtoegypt.com/private-tours-designed-vacations-egypt.htmlhttp://presentationsoft.about.com/od/s/g/storyboard.htm

Documents

Web Multimedia - Egyptian Website