CS2413: Web Site Development
Weekly Materials - Week 4
Click Topic to Open | Open All | Close All
Objectives
Chapter 5: Web Design
  • Describe the most common types of website organization
  • Describe the principles of visual design
  • Design for your target audience
  • Design clear, easy-to-use navigation
  • Improve the readability of the text on your web pages
  • Use graphics appropriately on web pages
  • Apply the concept of universal design to web pages
  • Describe web page layout design techniques
  • Apply best practices of web design
Chapter 10: Web Development
  • Describe the skills, functions, and job roles needed to develop a successful web project
  • Utilize the stages in the standard System Development Life Cycle
  • Identify other common system development methodologies
  • Apply the System Development Life Cycle to the development of web projects
  • Identify opportunities and determine goals during the Conceptualization phase
  • Determine information topics and site requirements during the Analysis phase
  • Create the site map, page layout, prototype, and documentation as part of the Design phase
  • Complete the web pages and associated files during the Production phase
  • Verify the functionality of the website and use a test plan during the Testing phase
  • Obtain client approval and launch a website
  • Modify and enhance the website during the Maintenance phase
  • Compare the goals of the website to the results as part of the Evaluation phase
  • Find the right web hosting provider for your website
  • Choose a domain name for your website
Assignments and Due Dates

Assignments and Due Dates: View

Required Readings

Web Development & Design Foundations with HTML5 - 7th Edition by Terry Felke-Morris
Chapter 5: Web Design
Chapter 10: Web Development

Appendix F, WCAG 2.0 Quick Reference

Required Tutorials
  1. Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    (Page number indicates related page in the textbook)
    • Chapter 5: Principles of Web Design (Page 203)
    • Chapter 10: Choosing a Domain Name (Page 446)
  2. Learn How to Get Online (3:38 min)
    https://www.youtube.com/watch?v=xSH21hndcgM
  3. Register a Strong Domain Name (3:20 min, Page 446)
    http://www.youtube.com/watch?v=frUcZx3YQ9o&feature=plcp
  4. What is a VPS? -- Virtual Private Server (4:04 min)
    https://www.youtube.com/watch?v=FP53XSnwGLM

  5. IPlotz: Mockups and Wireframes

Sample Code and/or Data Files
  • Textbook's Chapter and Web Site Case Study Data Files
    • http://wps.pearsoned.com/ecs_felke_webdevdesf_7/243/62410/15977113.cw/index.html
    • Click on Student Resources
      Click on Student Data Files in left margin
    • Download the Zip file for the current chapter
    • Extract/unzip the file
    • Chapter files will be visible or accessible by opening various folders
    • "If" needed for this chapter's Case Study Hands-On, the files for Pacific Trails are located in the casestudystarters/pacific folder.
Supplemental Materials
  1. PowerPoint from Text: Chapter 5- View (ppt) | Print (pdf)
  2. PowerPoint from Text: Chapter 10- View (ppt) | Print (pdf)

  3. Author's Web Site: http://www.webdevfoundations.net/7e /chapter5.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )
  4. Author's Web Site: http://www.webdevfoundations.net/7e /chapter10.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )

  5. Textbook's Website: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/

    6. (The access code is located in the front of the text. For those with used text's the code is available online. Click on the link above.)

  6. Adobe Part 1 - Five Essential Principles of Interaction Design (28:34 min)
    Some of the concepts are beyond the scope of this course but they provide valuable information for basic web site design.
Required Software

iPlotz: Wireframes and Mockups
http://iplotz.com/
(Use the free online demo version. Students will need to create an account but are not required to purchase this product.)

/"Chapter Questions and Test Reviews"/

Chapters 5 and 10 Reviews:
Although no points are earned for the Quizlet tests, it is highly recommended that students know the answers. It is an excellent way to prepare for both the weekly quizzes and major tests.

Test 1 Review Sheet: Test 1 Review
It is highly recommended that students work through the test review sheets as each chapter is studied. It will help with learning the material and may reduce the amount of study time required for the major tests.

Required Assignments

WSD04: Final Project Proposal (Complete within the LMS)
Two quizzes this week:
   QUIZ: Chapter 05 (LMS)
   QUIZ: Chapter 10 (LMS)

WSD14: Final Project includes the specifications for the Final Project. For your convenience, a link has been included in this week's materials. Hopefully, this will be helpful as you plan your site.

Professor's Class Notes and Comments

This week...

The emphasis of these chapters will be different than the last couple of weeks. Chapters 2 and 3 dealt with how to create a web page. Chapters 5 and 10 cover making the site the "best it can be". Usability, accessibility, and readability are important concepts that will determine if the site is a success. The site has to be beneficial to the user so he/she will want and/or need to keep coming back. In Chapter 10, the various roles of a large-scale project will be discussed. I trust you will see how in your final project you will be the person filling many of those positions.

While studying these chapters, you will begin work on your final project. In this week's assignment you will select a topic and begin making some decisions about your site. These decisions can and will most likely be modified as the project progresses. It is highly recommended that a folder be created on your computer or flash drive. Save potential images and reference material. This will make your job as content provider and content manager will be easier. You will not be trying to do everything at the last minute.

Finally, the author has provided some excellent links at her personal web site. Check them out..
http://webdevfoundations.net/7e/chapter5.html
http://webdevfoundations.net/7e/chapter10.html

Potential ources for images include


Recommendation: If you are planning on developing websites professionally, now would be a great time to purchase a domain name, create a website, and have it housed by web hosting provider of your choice. It could be a portfolio site that showcases your work. Yes, it is an expense but worth it. As you take web related classes, links could be added to showcase your work from this class, digital media classes, and web programming classes as well as any projects of special interest to you. Potential clients/employers often want to see examples of work. I have heard some say that if a candidate is not interested enough to have a website, are they "really" interested in this field? Just a a thought...and a recommendation.

Chapter 5:

p. 205 - Accessibility is the Right Thing to DO

Be sure to check out Appendix F, WCAG 2.0 Quick Reference which lists accessibility principles and the related textbook chapters.

p. 207

Choosing a Font

Serif " (Print) vs Sans Serif (Web)
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
"Serif - small lines tailing from letters and symbols

Font Size
As Mac and PC computers are becoming more compatible, it is important that web developers be aware of both systems. To that end, some of the screen shots will be done on a Mac and some on a PC. When designing web pages, keep in mind that fonts may appear differently on the various systems as well as browsers on the same system. Notice that the Mac is smaller. Think about what would happen if an 8pt font were used!

Font Size - Mac Font Size - Windows

p. 207

Font Color Contrast
Tool for checking contrast between text and background: http://www.snook.ca/technical/colour_contrast/colour.html

p. 210-211 Implementing a Color Scheme

Great sites for selecting website color themes are
CAVEAT: Modifications will need to be made to ensure the proper contrast between text and background colors.

p. 211 Accessibility and Color

Vischeck: See how people with various color vision problems see web pages
http://vischeck.com/vischeck/vischeckURL.php

p. 217 Screen Resolution

Updated statistics for browser screen resolutions and color depth.
http://www.w3schools.com/browsers/browsers_display.asp

p. 220 5.10 Page Layout Design

When creating the Site Map (Site Layout Chart) and Layout Design (Wire frames) pages, a program named IPlotz (http://www.iplotz.com) will be used. The FREE version allow for one project and five wireframes which is sufficient for our purposes. Purchasing a subscription to the web site is NOT required for this class. See the links to the video tutorials on utilizing the site for our purposes.

p. 227 Best Practices Checklist

Online version of Web Design Best Practices Checklist
http://terrymorris.net/bestpractices/

Chapter 10:

p. 442 Testing

p. 442 Figure 10.4

As you work on your final project, keep this sample test plan in mind. An Excel version is available in the Chapter 10 data files.

p. 444 Accessibility

Appendix F, WCAG 2.0 Quick Reference (Yes, it will be on the test!)

Government Site on Accessible Requirements:


Web Accessibility Evaluation Tool

p. 446 Choosing a Domain Name

Textbooks companion website video: Choosing a Domain Name Video
More animated YouTube video: Register a Strong Domain Name
(links to both are above under Required Tutorials)

p. 448 Types of Web Hosting

YouTube Video: What is a VPS? which covers Virtual Hosting v.s. Dedicated Hosting
(link is above under Required Tutorials)

p. 450 Web Host Checklist

Another excellent checklist!

Chapter Wrap Up

Study the Material: (Note: Although this outline may not be listed in future weeks, it is recommended that it be followed on an ongoing basis)

    1. Read the chapter, watch the videos, check out the recommended website and book mark the ones that may may be helpful in the future.
    2. Read the Professor notes in the LMS, and check the text updates page.
    3. Read the Assignment Specifications also located in the LMS.
    4. Complete the Assignments.
    5. Upload the iPlotz files to Apollo.
    6. Submit the assignment in the LMS.
    7. Review the chapter. Answer the Chapter review questions (for both chapters!) located in the LMS, use the resources located in the author's Chapter Review (Quizlets) , and check the Test 1 Review Sheet. These items do not need to be submitted for grading.
    8. Take the weekly quiz (Located in the LMS)