web designing 2

TaskIn this assessment item you are required to develop the website that you planned and designed in Assessment item 2. You must use the same topic you chose previously and follow your planning report. Any changes that you make from the original plan must be thoroughly reported and justified. The website you create will be uploaded on to a free web host. You will be given instruction in class about this. Please ensure you submit your URL (and any necessary logon instructions) for your website as part of a Word document. Requirements Images: You are responsible for developing the logo for your chosen website. You will need to provide a raster logo and a vector logo that you have developed yourself. You will then select and justify one of these logos to represent your website. Multimedia:You must include animation, photographs, audio and video, that you have developed, in your website. They must be relevant to your selected website and should be as per your original plan. They should be of suitable quality and size (using appropriate compression where necessary) to ensure your website remains effective and efficient. HTML5 must be used to mark up your website.  Your code must be valid and should be checked using thehttp://validator.w3.org/. An external CSS must be used to separate all design and layout elements from the content of your pages http://www.w3.org/Style/CSS/ . Your code should be validatedusing the W3C website. Accessibility and usability guidelines should be adhered to and addressedhttp://www.w3.org/WAI/. This includes the use of the “alt” tag for all multimedia components.RationaleThis assessment task covers topics and has been designed to ensure that you are engaging with the subject content on a regular basis. More specifically it seeks to assess your ability to: ·         develop interactive Web pages that incorporate a variety of digital media, including text, graphics, animation, video, sound, etc.;·         be able to edit the different types of media to generate a composite document;show how to script interactive multimedia clips and identify the techniques available to do so.Marking criteriaLogo designs·         Vector and raster provided·         Quality and complexity of logo·         Justification for choice3 marksDesign and layout of site·         Layout·         Colour scheme·         Appropriate to client/audience·         Meets standards such as:o   Usabilityo   Accessibility3 marksAnimation3 marksAudio3 marksVideo3 marksUse of HTML5·         Code is well written·         Validated2 marksUse of CSS·         External styles used·         Code is well written·         Validated2 marksAccessibility·         Accessibility standards have been addressed1 markTotal20 marks

1.OUTLINEPLANNING 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 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. 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) 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:

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.

Through the above 7 steps process we will 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

· 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

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 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. 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. 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, 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 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.

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.

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 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 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” 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

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

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

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.