1.OUTLINE PLANNING AND DESIGN OF A CATERING WEBSITE TABLE OF CONTENTS Overview 4 Solution s, Scope of Work, and Deliverables 5-6 1. Preliminary Research 2. Strategic Planning 3. Interface Design - Graphic Design Work 4. Web application Front End Programming 5. Web application Back-end Development 6. Quality Assurance and Launch 7. SEO, Web Promotion, Statistics and Reporting Maintenance and Hosting 7 Multimedia elements 9 Accessibility 11 OVERVIEW General: The purpose of the project is to execute a complete design & development of a professional Portal website for cooking school for corporate team building events. The cutting edge website will feature all the elements, functions, and specifications as required by the client. Despite the evident complexity and depth of the Portal website for cooking school for corporate team building events, the user experience must remain particularly smooth and simple. The design must be high-end, pleasant and clean, creating an atmosphere of confidence and professionalism. The major web technologies used on the website will be JOOMLA CMS ,YT Framework, PHP, MYSQL, JavaScript, AJAX, XHTML, CSS, XML, API. The main goal of this plan is to determine an accurate time and budget estimate, as well as determine the main technological route, web technologies, methodologies, phases of work, and other important details to best achieve Client Name’s business and creative goals. SOLUTIONS, SCOPE OF WORK, AND DELIVERABLES The primary purpose of this website project is to create a website using the latest technologies and trends designed to portray Client Name aims and objectives. The process includes building a visual representation and integration with the technologies. For this project, our work process will be a seven-step methodology for delivering the web solution. The seven step process includes the following deliverables for the development of a high end, database driven website, and cutting edge web application featuring all the specifications we discussed: 1. Preliminary Research and Discovery Phase: a. Gathering all the final specifications of the project b. In-depth research of the field, market pool, and target population c. Establishing the strategy to best accomplish Client goals within budget and timeframe d. Fine tuning the technological route for the design and development of the Ecommerce site e. Determining the full and final in-depth scope of the project 2. Strategic Planning: a. Conception of the main goals of the website and of the users’ pathways, including what we call “the preferred customer pathways”. b. Conception of the website’s flow d. Preparation of detailed charts and wireframes showing the different areas of the website, their features, the technologies that will be implemented, etc… e. Optimization of the navigation according to the application’s goals 3. Web Design – Graphic Design Work: a. Conceptio ...

1. 1.OUTLINE PLANNING AND DESIGN OF A CATERING
WEBSITE
TABLE OF CONTENTS
Overview
4
Solution
s, Scope of Work, and Deliverables
5-6
1. Preliminary Research

2. 2. Strategic Planning
3. Interface Design - Graphic Design Work
4. Web application Front End Programming
5. Web application Back-end Development
6. Quality Assurance and Launch
7. SEO, Web Promotion, Statistics and Reporting
Maintenance and Hosting
7
Multimedia elements

3. 9
Accessibility
11
OVERVIEW
General:
The purpose of the project is to execute a complete design &
development of a professional Portal website for cooking school

4. for corporate team building events. The cutting edge website
will feature all the elements, functions, and specifications as
required by the client.
Despite the evident complexity and depth of the Portal website
for cooking school for corporate team building events, the user
experience must remain particularly smooth and simple. The
design must be high-end, pleasant and clean, creating an
atmosphere of confidence and professionalism.
The major web technologies used on the website will be
JOOMLA CMS ,YT Framework, PHP, MYSQL, JavaScript,
AJAX, XHTML, CSS, XML, API.
The main goal of this plan is to determine an accurate time and
budget estimate, as well as determine the main technological
route, web technologies, methodologies, phases of work, and
other important details to best achieve Client Name’s business
and creative goals.
SOLUTIONS, SCOPE OF WORK, AND DELIVERABLES
The primary purpose of this website project is to create a
website using the latest technologies and trends designed to
portray Client Name aims and objectives. The process includes

5. building a visual representation and integration with the
technologies.
For this project, our work process will be a seven-step
methodology for delivering the web solution. The seven step
process includes the following deliverables for the development
of a high end, database driven website, and cutting edge web
application featuring all the specifications we discussed:
1. Preliminary Research and Discovery Phase:
a. Gathering all the final specifications of the project
b. In-depth research of the field, market pool, and target
population
c. Establishing the strategy to best accomplish Client goals
within budget and timeframe
d. Fine tuning the technological route for the design and
development of the Ecommerce site
e. Determining the full and final in-depth scope of the project
2. Strategic Planning:

6. a. Conception of the main goals of the website and of the users’
pathways, including what we call “the preferred customer
pathways”.
b. Conception of the website’s flow
d. Preparation of detailed charts and wireframes showing the
different areas of the website, their features, the technologies
that will be implemented, etc…
e. Optimization of the navigation according to the application’s
goals
3. Web Design – Graphic Design Work:
a. Conception and creation of the graphic theme of the website
and of the web application, including color scheme, atmosphere,
general look and feel, etc...
b. Actual design of the website and of the web application based
on the layouts and structures
c. Conception and creation of all the graphic elements of the
website
color scheme- this depends on the brand of your company (logo)

7. we will use the colors from your logo
4. Front End Programming:
a. Top quality hand coding (XHTML / CSS / JavaScript) of all
the web pages
b. Advanced programming and integration of latest front-end
web technologies for enhanced user experience and usability
5. Server-side Development:
a. Integration of the databases
b. Actual programming work to implement the application
c. Actual programming work to implement the back-end and full
administration
d. Integration with all features including social media,
membership accounts, etc…
6. Quality Assurance and Launch:

8. a. Extensive testing to ensure the application is 100% bug free
and is fully compatible
b. Fine tuning the final details of the application design and
features
c. Configuration and setup of the server that will host the
website
d. Migration of the site to the live server and launch!
7. SEO, Promotion, Statistics and Reporting:
a. Extensive on-page SEO techniques throughout the Website
b. Extensive off-page SEO techniques to promote the site and
ensure that it appears in the top results for a variety of relevant
keywords.
c. Promotion of the website throughout the appropriate niches
online:
i. Creation of a buzz on the net about the site
ii. Generation of quality traffic to the site
d. Setup and integration of an extensive solution to fully track
the traffic on the site and generate detailed reports and
statistics.

9. Through the above 7 steps process wewill deliver all the
services designed to exceed Client Name expectations and
needs. Once our client , you will regularly communicate with
your project manager, and be constantly involved with the work
as well as updated on the team’s progress.
Each step of the process is supported by the appropriate
documentation and will go through its own QA process. The
Client’s team will fully approve each phase.
OUR FEES
Our rates are extremely reasonable and we work with a very
precise reporting system. Throughout the project, you will have
full control in regards to how much you want to hold back or
push the creativity, functionality, technology, etc...
Below is the list of our special fees for the Client;s project:
· Graphic Design: $xx
· Front End Programming (XHTML, CSS, JavaScript, and Flash
technologies): $xx
· Search Engine Optimization (on-page and off-page), web
promotion & marketing: $xx
· Strategic Planning & Project Management: $xxx

10. · Back End Programming (PHP, MYSQL, API): $xxx
· Advanced Programming (AJAX, advanced JavaScript,
advanced PHP, adv. ActionScript): $xxx
· Web Consulting: $xxx
· Consultations: $xxx
Hours included in your solution:
Service type
Included
Graphic Design
85 hrs
Front End Programming (Flash, XHTML, CSS, JavaScript)
110 hrs
Strategic Planning & Project Management
50 hrs
Web promotion and search engine optimization
20 hrs
Back End Programming(PHP, MYSQL, API, XML):
160 hrs
Advanced Programming (AJAX, advanced JavaScript, advanced
PHP, advanced ActionScript)
95 hrs
Business and Web Consulting
7 hrs
PAYMENT PLAN AND TURN AROUND TIME

11. Turnaround time
We estimate that the project can be completed within 2 months.
If you are working with a tight deadline, we can discuss
arrangements to complete the project sooner.
Total cost of your solution:
The estimated total cost of your solution comes to $xx,xxx.
Payment plan:
A first deposit of $xxxx will be required upon signature of a
contract of service between our company and Client . The
remaining balance will be paid in phases throughout the
development of the project.
HOSTING & MAINTENANCE
Hosting:
You may decide to host your website with us or with the hosting
company of your choice, given that your hosting plan supports
the appropriate php/mysql/apache/lamp technologies.
If you decide to host your website with a 3rd party, we will

12. provide Client Name with guidance and recommendations.
Standard hosting fees vary from a few dollars per month to
many thousands of dollars per month, depending on the hosting
company, the details of your hosting plan, and mainly on the
site’s required bandwidth usage.
For the initial launch of the site, you should consider a basic
hosting plan at $xx/mth.
If you decide to host your website with us, we partner with the
best data centers in the country and offer advanced hosting
solutions that work within your budget parameters.
Maintenance:
Based on the details of the system specifications, we
recommend a maintenance plan based on a monthly retainer that
will include all necessary maintenance/update needs of the
website. We can scope out the maintenance budget upon
completion of the project or prior to getting started with the
development.
MULTIMEDIA ELEMENTS
- Multimedia applications can include many types of media. The
primary characteristic of a multimedia system is the use of more
than one kind of media to deliver content and functionality.

13. Web and desktop computing programs can both involve
multimedia components. As well as different media items, a
multimedia application will normally involve programming code
and enhanced user interaction. Multimedia items generally fall
into one of five main categories and use varied techniques for
digital formatting.
We have five Components of Multimedia this are Text
It may be an easy content type to forget when considering
multimedia systems, but text content is by far the most common
media type in computing applicati
ons. Most multimedia systems use a combination of text and
other media to deliver functionality. Text in multimedia systems
can express specific information, or it can act as reinforcement
for information contained in other media items. This is a
common practice in applications with accessibility
requirements. For example, when Web pages include image
elements, they can also include a short amount of text for the
user's browser to include as an alternative, in case the digital
image item is not available.
Images
Digital image files appear in many multimedia applications.

14. Digital photographs can display application content or can
alternatively form part of a user interface. Interactive elements,
such as buttons, often use custom images created by the
designers and developers involved in an application. Digital
image files use a variety of formats and file extensions. Among
the most common are JPEGs and PNGs. Both of these often
appear on websites, as the formats allow developers to minimize
on file size while maximizing on picture quality. Graphic design
software programs such as Photoshop and Paint.NET allow
developers to create complex visual effects with digital images.
Audio
Audio files and streams play a major role in some multimedia
systems. Audio files appear as part of application content and
also to aid interaction. When they appear within Web
applications and sites, audio files sometimes need to be
deployed using plug-in media players. Audio formats include
MP3, WMA, Wave, MIDI and RealAudio. When developers
include audio within a website, they will generally use a
compressed format to minimize on download times. Web
services can also stream audio, so that users can begin playback
before the entire file is downloaded.
Video
Digital video appears in many multimedia applications,

15. particularly on the Web. As with audio, websites can stream
digital video to increase the speed and availability of playback.
Common digital video formats include Flash, MPEG, AVI,
WMV and QuickTime. Most digital video requires use of
browser plug-ins to play within Web pages, but in many cases
the user's browser will already have the required resources
installed.
Animation
Animated components are common within both Web and
desktop multimedia applications. Animations can also include
interactive effects, allowing users to engage with the animation
action using their mouse and keyboard. The most common tool
for creating animations on the Web is Adobe Flash, which also
facilitates desktop applications. Using Flash, developers can
author FLV files, exporting them as SWF movies for
deployment to users. Flash also uses ActionScript code to
achieve animated and interactive effects. we will use the
following multimedia elements in your website..
Text
It may be an easy content type to forget when considering
multimedia systems, but text content is by far the most common
media type in computing applications. Most multimedia systems
use a combination of text and other media to deliver

16. functionality.
when Web pages include image elements, they can also include
a short amount of text for the user's browser to include as an
alternative, in case the digital image item is not
available.Images
Digital image files appear in many multimedia applications.
Digital photographs can display application content or can
alternatively form part of a user interface. Interactive elements,
such as buttons, often use custom images created by the
designers and developers involved in an application. Digital
image files use a variety of formats and file extensions. Among
the most common are JPEGs and PNGs.
We will use images to display our services, and products…
Video
Digital video appears in many multimedia applications,
particularly on the Web. As with audio, websites can stream
digital video to increase the speed and availability of playback.
Common digital video formats include Flash, MPEG, AVI,
WMV and QuickTime. Most digital video requires use of
browser plug-ins to play within Web pages, but in many cases
the user's browser will already have the required resources
installed.

17. We will also use videos to showcase the best of your
services…..
Animation
Animations can also include interactive effects, allowing users
to engage with the animation action using their mouse and
keyboard. The most common tool for creating animations on the
Web is Adobe Flash, which also facilitates desktop applications.
Using Flash, developers can author FLV files, exporting them as
SWF, we also have javascript.
In this case we will use javascript instead , because it is light
and it loads on major browsers..
We will use to showcase images…in pages like gallery and on
image sliders.
ACCESSIBILITY
There are ten things one can do to make a website accessible
1. Image maps. Use the client-side map and text for hotspots.
2. Images & animations: Use the alt attribute to describe the
function of each visual.

18. 3. Multimedia. Provide captioning and transcripts of audio, and
descriptions of video.
4. Hypertext links. Use text that makes sense when read out of
context. For example, avoid "click here."
5. Page organization. Use headings, lists, and consistent
structure. Use CSS for layout and style where possible.
6. Graphs & charts. Summarize or use the long desc attribute.
7. Scripts, applets, & plug-ins. provide alternative content in
case active features are inaccessible or unsupported.
8. Frames. Use the no frames element and meaningful titles.
9. Tables. Make line-by-line reading sensible. Summarize.
10. Check your work. Validate. Use tools, checklist, and
guidelines at http://www.w3.org/TR/WCAG
1. Well-organized Semantic Page Layout
one of the easiest ways to improve your web site's accessibility
is to organize the content in a well-structured layout. By using
the generally accepted global structure as proposed by the W3C
you can ensure that your document will be organized properly

19. and be easily disected by your visitors. We encourage the use of
valid HTML and CSS as your core.
2. Text-based Navigation with Section IDs
after developing your core structure, you need to incorporate
text-based navigation at the beginning of your document
allowing your visitors to skip to the core sections of your page
identified by IDs. At a minimum you should have three key
sections to your page: Main Navigation, Secondary Navigation
and Main Content. This ads a main layer of general accessibility
to your site.
3. Alt Tags and Title Tags for Images and Links
Text-based document readers and aural readers are unable to
dissect information from images. It is very important that any
image has an ALT tag to describe the information the image is
being used to display. Along with your ALT tags, all of your
text-based links should include “titles” that describe the
information you are linking to.
4. Content and Organization
Initially, you need to make sure that you have a plan for content
and the organization of that content in a clear and
understandable way. The key to a successful and accessible web

20. site is simple, easy-to-follow navigation and organization of
your information.
Your site should be broken into a few main category areas with
the rest of the information and content organized neatly within
those areas. Always attempt to keep navigation simple by
reducing the number of levels that contain information. Only
use deepening levels of content where necessary. By
simplifying your content levels you can simplify navigation and
in turn increase the accessibility of your web site.
5. Page Layout
Once you’ve decided on your content categories, you should
begin to think about page layout. We recommend following a
simple layout structure that is “prettied up” by CSS (cascading
style sheet). At the top of your page should be a “header”
section that will include your logo and H1 tag. Next should be a
“main navigation” area that will provide text based links to the
main categories you defined earlier and your "about" and
"contact" pages. Following your navigation area should be your
section containing your “main content”. This is where the bulk
of your information should be found.
Rounding out your page layout should be a “sub navigation”

21. area that will contain text links to the information in your
subcategories. This will obviously change by page and category.
Finally, your page should contain a footer that closes the page
and offers text link access to some key points of information
including copyright, sitemap, and contact links at a minimum,
and more information can be placed here as needed.
These areas round out the page layout, and by using this
structure you can ensure a well-constructed page providing your
visitors solid access to the information on your web site.
6. HTML Elements
Now that we have decided on your content layout and structure,
it is time to begin thinking about producing the actual pages of
your web site. Each page should contain all the following items;
each should be unique on every page:
1. Title Tag
2. Meta Description Tag
3. Meta Keywords Tag
4. Header Section with H1 Tag and Logo

22. 5. Main Navigation Section with Text Links
6. Main Content Area with Additional H Tags as necessary to
organize content.
7. Sub Navigation Section for Category Navigation
8. Footer Section with links to copyright information, contact
information and the sitemap
Strategic Planning & Project Management – 20 hrs
Web Consulting – 2 hrs
Strategic Planning & Project Management – 20 hrs
Web Consulting – 5 hrs

23. Graphic design – 80 hrs
Front End Programming – 100 hrs
Advanced Programming – 40 hrs
Back End Programming – 150 hrs
Advanced Programming – 50 hrs
Strategic Planning & Project Management – 10 hrs
Graphic design – 5 hrs

24. Front End Programming – 10 hrs
Back End Programming – 10 hrs
Advanced Programming – 5 hrs
Search Engine Optimization and Web Promotion – 20 hrs
Further SEO and web promotion work to be discussed once a
web marketing strategy has been compiled after the site’s
launch – not included in the scope of this proposal for the initial
site’s launch.