1.OUTLINE PLANNING AND DESIGN OF A CATERING WEBSITE

plumpbustlingInternet and Web Development

Dec 4, 2013 (3 years and 10 months ago)

104 views

1.
OUTLINE PLANNING AND DESIGN
OF A CATERING WEBSITE

TABLE OF CONTENTS



Overview











4

Solutions
,

Scope of Work
, and Deliverables





5
-
6

1.

Preliminary Research

2.

Strategic Planning

3.

Interface Design
-

Graphic Design Work

4.

Web

application

Front End
Progr
amming

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 p
roject

is to execute a complete design & development of
a professional

Portal
web
site 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
web
site 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 th
is 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 specificatio
ns 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 chart
s

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, atmosph
ere, general look and feel, etc...

Strateg
ic P
lanning

& Project Management


20⁨


坥b⁃on獵s瑩tg


2⁨牳

却牡瑥杩挠P
污ln楮g

☠Pro橥j琠M慮慧em敮琠


20⁨


坥b⁃on獵s瑩tg


5⁨牳

b.
Actual d
esign of the website
and of the web application
based on the layout
s

and structure
s

c. Conception and creation of all the graphic elements of the website


color scheme
-

this

depends on

the brand of your compa
ny (logo) 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 exper
ience and usability




5.

Server
-
side
Development:

a
.
I
ntegration of the databases

b
.
Actual p
rogramming
work to implement
the
application


c
.
Actual programming work to implement the back
-
end and full administration


d. Integration with all features incl
uding
social media,

membership accounts, etc…




6.

Quality Assurance and Launch:

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. Configurati
on 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
t
he Website


b.
Extensive
off
-
page
SEO techni
ques
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:

Graphic design



80⁨


䙲on琠䕮N P牯g牡mm楮g


100⁨


䅤v慮捥搠P牯g牡mm楮g


40⁨牳

䉡捫B䕮N Prog牡rm楮g


150⁨


䅤v慮捥搠P牯g牡mm楮g


50⁨牳


却牡瑥杩挠P
污ln楮g

☠Pro橥j琠M慮慧em敮琠


10⁨


䝲慰h楣⁤敳楧n



5⁨


䙲on琠䕮N P牯g牡mm楮g


10⁨牳

䉡捫B䕮N Prog牡rm楮g


10⁨牳

䅤v慮捥搠P牯g牡mm楮g


5⁨牳


i.
Creation of a buzz on the net abo
ut

the site

ii.
Generation of quality tr
affic 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.







Through
the above

7

steps process
we

will deliver
all the

services designed to
exceed

Client Na
me

expectation
s 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 documentat
ion

and will go through its own QA
process. T
he
Client
’s

team

will fully approve each phase
.


OUR FEES


Our rates are extremely reasonable and we work with a very precise reporting system. T
hroughout the
project, you will have full control in regards to h
ow 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
D
esign: $
xx



Fro
nt End Programming (XHTML, CSS, JavaScript, and Flash technologies): $
xx



Sea
rch Engine Optimization (on
-
page and off
-
page), web promotion & marketing: $
xx



Strategic Planning & Project Management: $
xxx



Back End Programming (PHP, MYSQL, API): $
xxx



Advanced Programming (AJAX, advanced JavaScript, advanced PHP, adv. ActionScript): $
xx
x



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 se
arch engine optimization

20 hrs

Back End Programming
(PHP, MYSQL, API, XML):

160 hrs

Advanced Programming (AJAX, advanced JavaScript, advanced PHP, advanced
95 hrs

Search Engine Optimization and Web Promotion


20 h
rs

Fur
ther SEO and web promotion work t
o 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.


ActionScript)

Business and Web
Consulting

7 hrs




PAYMENT PLAN AND TURN AROUND TIME


Tu
rnaround 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 co
mes 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 & MA
INTENANCE



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 3
rd

party,
we will provide
Client Name

with guidance and
recommendations.


Standard hosting fees vary f
rom 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 req
uired 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
w
ork 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 applications can include many types of media. The primary characteristic of a multimedia
system is the use of more tha
n one kind of media to deliver content and functionality. 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 interac
tion. 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, bu
t 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 reinfo
rcement 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 in
clude 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. Both of
these often appear o
n 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 fi
les 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 p
layers. 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 playbac
k before the entire file is downloaded.

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.

MULTIMEDIA ELEMENTS

Animation

Animated components are common wit
hin 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, wh
ich 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 multimed
ia 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 m
edia to deliver 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 m
any 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 appli
cation. 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 page
s, but in many cases the user's browser will already have the required resources
installed.

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 anim
ation 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 accessibl
e

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.

3.

Multimedia
.

Provide captioning and transcripts of audio, and descriptions of video.

4.

Hypertext links
.

Use text t
hat 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, ap
plets, & 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 and be easily disected by your visitors. We
encourage the use of valid HTML and CS
S 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 I
Ds. 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 reade
rs 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 “ti
tles” 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 access
ible web 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 navi
gation 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 L
ayout

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 t
hat 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 contain
ing your
“main content”. This is where the bulk of your information should be found.

Rounding out your page layout should be a “sub navigation” area that will contain text links to the
information in your subcategories. This will obviously change by page a
nd 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.

Thes
e 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

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