Individual website design and development part 1

WEB 240 WEEK 2,3,4 Individual Website Design And Development First Draft

WEEK 2 Individual assignment

Part 1

A website plan serves as a blueprint for developing a website. The plan identifies the purpose of the site, your audience, and the specific content and features that must be added to the site to accomplish the site’s objectives. Complete a First Draft of your Website Plan, using a Microsoft® Word document or a Microsoft® PowerPoint® presentation, that addresses the following areas:

· Topic

· Purpose

Why do you need this site?

Why do your visitors need this site?

· Audience

Brief description of target audience

General geographic location of audience

Estimate number of people

Estimate average age

Familiarity with computers and Internet

Key target audience insight – Most compelling thing you want the audience to think, learn or do as a result of visiting the site

· A visual mockup of the layout of your site’s home page using drawing tools in a Microsoft® Word document, a Microsoft® PowerPoint® presentation, or a graphic program

Part 2

Create a homepage for your planned site that demonstrates effective application of design elements. Use only Adobe® Dreamweaver® or another HTML editor to create a basic web page based on the web plan you have developed. This page is the homepage of your website. Save your site homepage as index.html or default.html.

Check your HTML code using the Markup Validation Service on the W3C® website, (www.w3.org) prior to submitting your web page(s).

Submit all website files in a compressed folder.

WEEK 3 Individual assignment

Part 1 – Add to Website Plan

Add a Site Map to your web plan. This will be a diagram, similar to

an organizational chart, that shows a visual mapping of your site and

how the pages will be linked together.

Part 2 – Expand the basic homepage from Week Two

Expand the basic homepage from Week Two to a site that includes

at least 3 web pages. As in the prior assignment, use only Adobe®

Dreamweaver® or another HTML editor to expand the homepage

developed in Week Two. Incorporate the following into your

expanded website:

• Apply Cascading Style Sheets (CSS) to format elements.

• Integrate multimedia effectively into the site.

• Create effective navigation for the site so that people can move

easily between the pages.

• Organize page content using structural elements, such as

headings, paragraphs, tables, and lists.

• Use internal, external, and anchor links in the site.

• Apply usability best practices and principles of design.

Check your HTML code using the Markup Validation Service on the

W3C® website, (www.w3.org) prior to submitting your web page(s).

A link to this site may be found in the Materials tab on your student

website.

Submit all website files in a compressed folder.

Week 4 individual assignment

Part 1 – Add to Website Plan

List at least three interactive features that could be added to your

site and what purpose each would serve for your site and its visitors.

The form created in Part Two of this assignment can be included as

one of the interactive features.

Part 2 – Refine and finalize your website

Refine and finalize your website by doing the following:

• Add a simple web form—such as an order form, a subscription

to a newsletter, or a request for contact.

• Use division or a table to structure the form elements.

• Apply JavaScript® to validate the form.

• Finalize a navigation system.

• Use metadata to increase accessibility and search engine

optimization.

• Test for functionality and usability.

As in the prior assignment, use only Adobe® Dreamweaver® or

another HTML editor to refine the homepage developed in Week

Three.

Check your HTML code using the Markup Validation Service on the

W3C® website, (www.w3.org) prior to submitting your web page(s).

A link to this site may be found in the Materials tab on your student

website.

Submit all website files in a compressed folder.

Part 1 – Add to Website Plan

Add a Site Map to your web plan. This will be a diagram, similar to

an organizational chart, that shows a visual mapping of your site and

how the pages will be linked together.

Part 2 – Expand the basic homepage from Week Two

Expand the basic homepage from Week Two to a site that includes

at least 3 web pages. As in the prior assignment, use only Adobe®

Dreamweaver® or another HTML editor to expand the homepage

developed in Week Two. Incorporate the following into your

expanded website:

• Apply Cascading Style Sheets (CSS) to format elements.

• Integrate multimedia effectively into the site.

• Create effective navigation for the site so that people can move

easily between the pages.

• Organize page content using structural elements, such as

headings, paragraphs, tables, and lists.

• Use internal, external, and anchor links in the site.

• Apply usability best practices and principles of design.

Check your HTML code using the Markup Validation Service on the

W3C® website, (www.w3.org) prior to submitting your web page(s).

A link to this site may be found in the Materials tab on your student

website.

Submit all website files in a compressed folder.

WEB/240 Version 1

1

Course Syllabus College of Information Systems & Technology

WEB/240 – Web Design Fundamentals 27 Feb – 27 Mar 2014 (Thursdays)

6:00 PM to 10:00 PM Copyright © 2011 by University of Phoenix. All rights reserved. Course Description

This course introduces development tools and techniques used to publish web pages on the World Wide Web. Students use basic hypertext markup language, scripting, and presentational technologies to create websites with the aid of a software authoring application. Topics include XHTML, CSS, JavaScript®, server hosting, site publication, site maintenance, and search engine optimization. Policies Faculty and students/learners will be held responsible for understanding and adhering to all policies contained within the following two documents: • University policies: You must be logged into the student website to view this document. • Instructor policies: This document is posted in the Course Materials forum.

University policies are subject to change. Be sure to read the policies at the beginning of each class. Policies may be slightly different depending on the modality in which you attend class. If you have recently changed modalities, read the policies governing your current class modality. Course Materials Felke-Morris, T. (2011). Web development & design foundations with XHTML (5th ed.). Pearson Education. Ledford, J. L. (2009). Seo: Search engine optimization bible (2nd ed.). Indianapolis, IN: Wiley. Wilton, P., & McPeak, J. (2009). Beginning JavaScript® (4th ed.). Indianapolis, IN: Wrox. Software Adobe Dreamweaver® CS5 (Virtual Desktop) Supplemental Resources Aquent Creative Team. (2010). Adobe® Creative Suite® 5 Design Premium digital classroom. Indianapolis, IN:

Wiley. Osborn, J., & The AGI Creative Team. (2009). Adobe® Dreamweaver® CS5 digital classroom. Indianapolis, IN:

Wiley. All electronic materials are available on the student website.

WEB/240 Version 1

2

Week One: Introduction to Extensible Hypertext Markup Language (XHTML) Details Due Points Objectives 1.1 Identify basic XHTML tags and attributes.

1.2 Explain viewing and testing markup code in various web browsers.

1.3 Describe how user characteristics and the website purpose influence website design.

1.4 Apply design elements effectively.

Reading Read Ch. 1, “Introduction to the Internet and the World Wide Web,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 2, “XHTML Basics,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 3, “Configuring Color and Text with CSS,” of Web Development & Design Foundations with XHTML.

Reading Read the Week One Read Me First. Reading Read this week’s Electronic Reserve Readings. Participation Participate in class discussion. 2 Discussion Questions

Respond to weekly discussion questions. • Describe one (X)HTML tag that has not been used in a previous

response to this question. What is this tag used for and how does it differ from previous tags mentioned? Is this a tag you will use on the site you create for this class? Explain why or why not.

2

Learning Team Instructions Website Evaluation Paper and Prototype for Redesign

Learning Teams will be assigned a Virtual Organization website. Teams will evaluate the use of design principles within the site. They will also propose recommendations for improvements to the site and use a web design tool, such as Adobe® Dreamweaver®, to develop a visual mockup. Each Learning Team must submit a 10- to 12-page written evaluation of the existing website, including recommendations for improvement and a prototype of proposed changes due in Week Five. The requirements for this project include the following: Work together to create a list of essential design criteria for evaluating a website. • Create a comprehensive list of design features from the list each

person created during Week One. • Organize the list under category headings. Create your own

headings or use those provided on the sample checklist. • Prioritize the list and keep only the top 20 design criteria. Evaluate the site to determine the intended purpose and audience. Complete a comparative review of two sites with purposes and audiences similar to those of the Virtual Organization site you are evaluating. Use the design criteria developed by the team for the review. Evaluate the use of design principles within the Virtual Organization site using the design criteria developed within the team.

WEB/240 Version 1

3

Propose recommendations for improvement based on the evaluations. Create a redesigned homepage prototype and a redesigned secondary page prototype. For the prototype, Adobe®

Dreamweaver® is recommended. Prepare a 10- to 12-page written evaluation due in Week Five of the existing website, to include the following: • The Virtual Organization being evaluated, its purpose, and

intended audience • The list of design criteria created by the team, including a

description of why each was considered to be important • The results of the comparative review of sites • A detailed analysis of the selected Virtual Organization site

based on the chosen design criteria that includes graphics, figures, images screen mockups, and descriptive text where appropriate

• Recommendations for improvements to the site based on the

design analysis and the inclusion of metadata to promote the website

• A description of proposed changes Prepare the redesigned homepage prototype as well as a redesigned secondary page prototype due in Week Five. Format your paper consistent with APA guidelines.

Individual Website Design and Development: Checklist

Throughout the course, you design and develop a website about your profession, hobbies, or interests. The site must consist of 3 to 5 web pages. Your target audience will be other professionals in your field or potential employers. Identify the type of website you are interested in completing for this course. Demonstrate the following characteristics: • Effective file management • Accurate and functional markup code • Effective and functional navigation Complete a comparative and competitive analysis of websites using the supplied worksheet. Choose two sites that are similar to the one you are planning for the analysis.

5

WEB/240 Version 1

4

Week Two: Website Development Details Due Points Objectives 2.1 Develop accurate and functional markup code.

2.2 Distinguish the development environment from a production environment.

2.3 Validate an XHTML page using W3C® web standards. 2.4 Organize files effectively.

Reading Read Ch. 4, “Visual Elements and Graphics,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 5, “Web Design,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 6, “Page Layout with CSS,” of Web Development & Design Foundations with XHTML.

Reading Read the Week Two Read Me First. Reading Read this week’s Electronic Reserve Readings. Participation Participate in class discussion. 2 Discussion Questions

Respond to weekly discussion questions. • Find an article that describes how files are organized on a

website. What are two best practices regarding web file management that you learned from the article? How can you apply this knowledge to your personal or professional life? Cite the source of the article.

2

Learning Team Instructions Website Evaluation Paper and Prototype for Redesign: Planning and Brainstorming

Begin working together to create a list of essential design criteria for evaluating a website assigned to your team by your facilitator The list should including the following: • Create a comprehensive list of design features from the list each

person created during Week One. • Organize the list under category headings. Create your own

headings or use those provided on the sample checklist. • Prioritize the list and keep only the top 20 design criteria. Complete a comparative review of two sites with purposes and audiences similar to those of the Virtual Organization site you are evaluating. Use the design criteria developed by the team for the review.

Individual Website Design and Development: First Draft

Part 1 A website plan serves as a blueprint for developing a website. The plan identifies the purpose of the site, your audience, and the specific content and features that must be added to the site to accomplish the site’s objectives. Complete a First Draft of your Website Plan, using a Microsoft® Word document or a Microsoft® PowerPoint® presentation, that addresses the following areas: • Topic • Purpose

o Why do you need this site?

15

WEB/240 Version 1

5

o Why do your visitors need this site? • Audience

o Brief description of target audience o General geographic location of audience o Estimate number of people o Estimate average age o Familiarity with computers and Internet o Key target audience insight – Most compelling thing you

want the audience to think, learn or do as a result of visiting the site

• A visual mockup of the layout of your site’s home page using

drawing tools in a Microsoft® Word document, a Microsoft®

PowerPoint® presentation, or a graphic program Part 2 Create a homepage for your planned site that demonstrates effective application of design elements. Use only Adobe® Dreamweaver® or another HTML editor to create a basic web page based on the web plan you have developed. This page is the homepage of your website. Save your site homepage as index.html or default.html. Check your HTML code using the Markup Validation Service on the W3C® website, (www.w3.org) prior to submitting your web page(s). Submit all website files in a compressed folder.

Week Three: Website Interaction Details Due Points Objectives 3.1 Design effective navigation.

3.2 Create internal, external, and anchor hyperlinks in a website. 3.3 Integrate multimedia files into a web page. 3.4 Create styles for a website using cascading style sheets.

Reading Read Ch. 7, “More on Links, Lists, and Layout,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 8, “Tables,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 11, “Web Multimedia and Interactivity,” of Web Development & Design Foundations with XHTML.

Reading Read the Week Three Read Me First. Reading Read this week’s Electronic Reserve Readings. Participation Participate in class discussion. 2 Discussion Questions

Respond to weekly discussion questions. • What are two site examples that have images or multimedia that

are used effectively on the site? Why do you think they work well on the site? Include the URLs of the sites in your response for others to view your selections.

2

WEB/240 Version 1

6

Learning Team Instructions Website Evaluation Paper and Prototype for Redesign

Continue working on the Website Evaluation Paper and Prototype for Redesign due in Week Five. Evaluate the use of design principles within the Virtual Organization site using the design criteria developed within the team during Week Two. Propose recommendations for improvement based on the evaluations.

Individual Website Design and Development: Site Map

Part 1 – Add to Website Plan Add a Site Map to your web plan. This will be a diagram, similar to an organizational chart, that shows a visual mapping of your site and how the pages will be linked together. Part 2 – Expand the basic homepage from Week Two Expand the basic homepage from Week Two to a site that includes at least 3 web pages. As in the prior assignment, use only Adobe® Dreamweaver® or another HTML editor to expand the homepage developed in Week Two. Incorporate the following into your expanded website: • Apply Cascading Style Sheets (CSS) to format elements. • Integrate multimedia effectively into the site. • Create effective navigation for the site so that people can move

easily between the pages. • Organize page content using structural elements, such as

headings, paragraphs, tables, and lists. • Use internal, external, and anchor links in the site. • Apply usability best practices and principles of design. Check your HTML code using the Markup Validation Service on the W3C® website, (www.w3.org) prior to submitting your web page(s). A link to this site may be found in the Materials tab on your student website. Submit all website files in a compressed folder.

15

Week Four: Introduction to JavaScript® Details Due Points Objectives 4.1 Explain the basic application for JavaScript®.

4.2 Apply client-side programming with JavaScript® effectively in a website.

4.3 Validate a basic web form using JavaScript®. 4.4 Explain the role of JavaScript® frameworks.

Reading Read Ch. 9, “XHTML Forms,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 14, “A Brief Look at JavaScript,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 6, “Programming the Browser,” of Beginning JavaScript.

WEB/240 Version 1

7

Reading Read Ch. 15, “JavaScript Frameworks,” of Beginning JavaScript. Reading Read the Week Four Read Me First. Reading Read this week’s Electronic Reserve Readings. Participation Participate in class discussion. 2 Discussion Questions

Respond to weekly discussion questions. • What is an example of a JavaScript® framework? In the

framework you have described, what is an example of an application that would work well on the site you are building for the class? What is the purpose of the application and how will it enhance your site?

2

Learning Team Instructions Website Evaluation Paper and Prototype for Redesign

Create a redesigned homepage prototype as well as a redesigned secondary page prototype due in Week Five. For the prototype, Adobe® Dreamweaver® is recommended. Finalize your Website Evaluation Paper due in Week Five, which must include the following: • The virtual organization being evaluated, their purpose, and

intended audience

• The list of design criteria created by the team, including a description of why each was considered to be important

• The results of the comparative review of sites

• A detailed analysis of the selected Virtual Organization site based on the chosen design criteria

• Recommendations for improvements to the site based on the design analysis and the inclusion of metadata to promote the website

• A description of proposed changes

Individual Website Design and Development: Interactive Features

Part 1 – Add to Website Plan List at least three interactive features that could be added to your site and what purpose each would serve for your site and its visitors. The form created in Part Two of this assignment can be included as one of the interactive features. Part 2 – Refine and finalize your website Refine and finalize your website by doing the following: • Add a simple web form—such as an order form, a subscription

to a newsletter, or a request for contact. • Use division or a table to structure the form elements. • Apply JavaScript® to validate the form. • Finalize a navigation system. • Use metadata to increase accessibility and search engine

optimization.

15

WEB/240 Version 1

8

• Test for functionality and usability. As in the prior assignment, use only Adobe® Dreamweaver® or another HTML editor to refine the homepage developed in Week Three. Check your HTML code using the Markup Validation Service on the W3C® website, (www.w3.org) prior to submitting your web page(s). A link to this site may be found in the Materials tab on your student website. Submit all website files in a compressed folder.

Week Five: Website Troubleshooting, Testing, Publication, & Maintenance Details Due Points Objectives 5.1 Analyze the usability of a website.

5.2 Explain how metadata can promote a website. 5.3 Describe the steps in the website publication process. 5.4 Identify the steps involved in maintaining and redesigning a

website.

Reading Read Ch. 10, “Web Site Development,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 12, “E-Commerce Overview,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 13, “Web Promotion,” of Web Development & Design Foundations with XHTML.

Reading Read Ch. 4, “Building your Site for SEO,” of Search Engine Optimization.

Reading Read the Week Five Read Me First. Reading Read this week’s Electronic Reserve Readings. Participation Participate in class discussion. 2 Discussion Questions

Respond to weekly discussion questions. • What is the process used to add content and publish the website

in your workplace or another organization? How can this process be improved?

2

Learning Team Website Evaluation Paper

Submit the Website Evaluation Paper.

20

Learning Team Website Prototype for Redesign

Submit the redesigned homepage prototype as well as a redesigned secondary page prototype.

10

Copyright University of Phoenix® is a registered trademark of Apollo Group, Inc. in the United States and/or other countries. Microsoft®, Windows®, and Windows NT® are registered trademarks of Microsoft Corporation in the United States and/or other countries. All other company and product names are trademarks or registered trademarks of their respective companies. Use of these marks is not intended to imply endorsement, sponsorship, or affiliation. Edited in accordance with University of Phoenix® editorial standards and practices.