January 7/8

Warm-up: Access the Web Mastering Group via your Google Account.

Review the Power Point Presentation T.6.PP_1.pps (open this presentation, but please do NOT save it).

After reviewing all slides, open the reading assignment.

Students will explore the various aspects of Web design as a career. They will have a basic understanding of the work that designers do and will become familiar with the importance of team design. Group formation will be discussed and the roles of each team member will be defined.

Activities: Notes on Web Design as a Career.

Read reading_assignment1.doc. This file is located in the Web Mastering Group via your Google account. These notes will be used to answer the following questions:

• Why is it necessary to have designers for Web sites?
• What types of skills are necessary for Web designers?
• Should all Web sites be developed using a team approach
• Is there a set price to create the site? If so, what is it?
• Are there price ranges for different types of sites?
• Is there job security in Web design?
• What is the salary range for Web designers?

After completing the reading assignment, create a new POST to your BLOG. Answer each of the questions above. Title the Post "Web Design as a Career". (please do not alter this title). Answers should be very thorough. Although most answers can be found in the reading assignment, you search other web sites to verify the information as well as providing more insight. You will have approximately 30-40 min tues to complete this assignment.

Roles for Team Members

Project Manager – supervises the scheduling of the project and assumes responsibility for coordinating all files so each member can access them on a daily basis. The manager is responsible for setting up interviews, scheduling meetings, and coordinating schedules for involved parties. Managers often help wherever needed, if one part of the project is running behind schedule.

Documenter – creates all documents for the project. He or she should take careful notes during the meetings, transcribe these results, and save work in the designated area.

Designer – has responsibility for acquiring all images for the Web site and creating any graphics that will be used. He or she has the ultimate responsibility for creating the design of the Web site that all parties have negotiated.

Edit the POST you created today to include (in your own words) a brief description of the role of each of the team members listed above. Indicate which role your skills would best fit.

Review Traits of Writing a Good Resume

Read through each site below to become familiar with what makes up a good resume. I've listed a few sites, but you are welcome to search the web for others.

Resume Help
http://www.resume-help.org/

Resume Resource
http://www.resume-resource.com/

Neglected Characteristics of a Good Resume - http://searchwarp.com/swa149900.htm

Resume Writing - http://www.rockportinstitute.com/resumes.html

Free Sample Resumes - http://www.eresumes.com/

January 9

Warm-up: Review the links above. Focus on the team member that you think best fits your skill sets. You will be writing a "cover letter" and completing a resume in class today.

Activities: If you have not completed the POST edit from last class period, please do so.

Edit the POST you created today to include (in your own words) a brief description of the role of each of the team members listed above. Indicate which role your skills would best fit.

Write a cover letter for the "job" you have chosen from the three team roles.

• Program Manager
• Documenter
• Designer

Create your letter based on templates or samples from the readings above.

Resume - Create a resume using all of your past work experiences and education. Focus on your technical skills that would support the skills needed for Web Designers. Include references. Use the linked resume template.

January 12

Guiding Questions

Introduce the client project. Students will create a Web site that is client-based. Who is the client for your Web site? Who is the audience? Who is the customer? What is most noticeable in each of the design styles listed below:

• Company-centered
• Technology-centered
• Designer-centered
• Customer-centered
• Of these design styles, which is recommended? Why?
• What elements are included in customer-centered designs?
• Learning Objective

Students will:

Explore the various design styles used to develop Web sites
Differentiate between client and customer in regards to their role in Web site development
List components of a customer-centered Web site design

Teaching Strategies

This lesson will involve a long-term assignment that students will develop with and for a client. Care must be taken that students understand that commitment and time need to be allocated to develop the topic for the project. Instructors need to have a lot of control on the final projects. No one project will fit all students and schools. Instructors decide if they want to narrowly focus student work by giving a list of choices or to let them have free reign. The important consideration for the project is that it is defined in such a way to allow adequate assessment criteria to evaluate the quality of products and high-quality teamwork.
The great challenge in teaching this class is meeting the different technological levels of students. Some have an innate ability to pick up any new technical skill, while others have to be guided through every step! Therefore the choice of project needs to be flexible enough to be appropriate for:

• Age level/school grades
• Maturity
• Technological level

Essential Vocabulary

Audience
Client – (as used in this chapter)
Customer – (as used in this chapter)
User –
Workflow –

Discuss

the various types of design styles and list the advantages and disadvantages of each. Establish the best model and list the elements included. Students will complete the Customer-Centered Design activity by interviewing a partner for input on the elements. After the interview, a brief description of each design element should be included in the chart. Include how each of the elements will be implemented in the Web site.

January 13

warm-up:

read design_process.doc from the Google Groups. Complete notes on each of the seven design traits and the four design styles that were started on Monday. (These were done on the BACK of the customer/designer activity.)

Introduce team project and discuss. No teams have been formed yet. All cover letters and resumes are due today. No Exceptions

Activity: return to the partner that you worked with in class yesterday. Modify the seven traits to reflect as much detail as possible.

January 14/15

READ accessibility.doc from Google Groups.

Site evaluations- Create a new POST in your BLOG. Title the POST Accessibility Issues and list the five issues discussed in your reading. What guidelines are used to measure a web sites' usability? After you have established accessibility issues and written the guidelines, you should access three random sites -(see link below) and evaluate each based on the guidelines. Evaluate each site as "excellent", "good", "fair", or "poor" depending on how they addressed the guidelines you discussed in the post.

List the title for each site and give the URL. Discuss the guidelines used/not used for each site. This should be done in your BLOG. It would be nice to create screen shot, or include images in your BLOG.

RandomURL -- this link takes you to a site that allows you to select a 'random' URL.

This page written with Java Script selects a random URL from a set of URL's. This one will display the URL in the status bar. Visit the home page for hate Random URL site.

Team Formations

Roles for Team Members

Project Manager – supervises the scheduling of the project and assumes responsibility for coordinating all files so each member can access them on a daily basis. The manager is responsible for setting up interviews, scheduling meetings, and coordinating schedules for involved parties. Managers often help wherever needed, if one part of the project is running behind schedule.

Documenters – creates all documents for the project. He or she should take careful notes during the meetings, transcribe these results, and save work in the designated area.

Designer – has responsibility for acquiring all images for the Web site and creating any graphics that will be used. He or she has the ultimate responsibility for creating the design of the Web site that all parties have negotiated.

You will be notified of the team role that you have been "hired" for based on your resume. If you failed to turn one in, you will be assigned a role. The class will meet in the commons for a "networking" event. When you have a team, record each team members' name in the appropriate blank and return it to the teacher.Your goal is establish a team of three people that make up the design team.

Team Conference -- meet with your group to discuss the possible topics for the Web Site project.

January 16

warm-up -- Complete the POST started last class period in your BLOG. Title the POST Accessibility Issues and list the five issues discussed in your reading. What guidelines are used to measure a web sites' usability? After you have established accessibility issues and written the guidelines, you should access three random sites -(see link below) and evaluate each based on the guidelines. Evaluate each site as "excellent", "good", "fair", or "poor" depending on how they addressed the guidelines you discussed in the post.

List the title for each site and give the URL. Discuss the guidelines used/not used for each site. This should be done in your BLOG. It would be nice to create screen shot, or include images in your BLOG.

RandomURL -- this link takes you to a site that allows you to select a 'random' URL.

This page written with Java Script selects a random URL from a set of URL's. This one will display the URL in the status bar. Visit the home page for hate Random URL site.

• What do you see as the benefits to the customer if they deal with your particular company (or class, or club)?
• Develop an early graphic for your client web site.

Homework/Follow-up: deadline for topic and client information is Tuesday, January 27.

January 28/29

warm-up: Read the Paper Version of a Web Site - http://deeplinking.net/paper-web/.

Answer the following questions in complete sentences in a new POST to your BLOG. These questions must be answered by ALL team members. Base your answers on the site that your group is going to actually create. Title the POST: Prototypes

• Why would anyone be interested in viewing the Web site that your team is developing?
• Who are the possible customers for the site?
• How many pages are going to be necessary to complete the Web site your client wants?
• Based on the number of pages, what sort of navigational structure would work well for the site?
• How can this design be shown using a site map and storyboard?
  

Activities: Read the valuepropositions5.doc from the Web Mastering Google Group. The team should develop a site map and storyboard for the Web site that is being developed. The information should be based on the initial meeting with the client. The site map can be produced in an HTML editor or in any text application. The storyboard can be created using graphics software or paper and pencil.

READ THIS BEFORE YOU BEGIN

Web Design in 2 Days

Samples:
Prototype Rubric

Create a Site Map Before You Build Your Site: http://webdesign.about.com/od/strategy/qt/plan_site_map.htm

(the site map must be drawn on the handout given in class, or you can use available software to produce it). The site map should include the title and name for each page that will be in your website. The Site Map looks very similar to an outline that you would make for a research paper.

Website Storyboard
http://www.conquerorwebdesign.com/seo-romania/website-storyboard.html

the storyboard for the website has a bit more details than the sitemap. Include the suggestions from this link. Consider a site map to be small "post-it" notes that include the content topic, the title of the page and the filename. The linked pages should be indicated with arrows.

After the site map and storyboard are complete, the design team should schedule a meeting with their client. Based on the results of the meeting, the team should modify the initial prototypes and create wireframes for the home page and one sub-level page for the Web site.

Turn in your work to the "black box" when completed.

• The documenter should be responsible for generating the site map and
• the designer should create the story board.
  (note: The wireframe will be completed at a later date)
  All members should work together on the assignment.
• If a member is absent, then the project manager should assume the responsibility for that role.

January 30

warm-up: Open the refinement Power Point from the Web Mastering Google Group. Read each slide and discuss the progress of the website design your team has created so far.

Review the sitemap and storyboard. Modify if the sitemap does not look like an outline. The storyboard should have boxes representing each of the web pages in the entire site. The minimum number of pages for a passing grade is 5.

Activities:

Use the site map and storyboard to create the wireframe for the web site. Make sure that EACH page is represented. If you have chosen a template, or have begun designing the site, you should sketch what the pages look like. The project manager is responsible for this page.

Introduce refinement strategies that should be used to improve the overall design and functionality of the Web site. Have students pair with someone who is NOT on their design team. Students should carefully read through all prototypes, offer suggestions, and determine whether there are functionality issues. Consider the anticipated audience. Does the design meet their needs? Heuristic evaluation is difficult for a single individual to do because one person will never be able to find all of the usability problems. Consider having two paired sessions.

Discuss and encourage the “Think Aloud” model for the group work. One student can verbally discuss all aspects of the Web site. The other student records the comments and encourages the first student to express any thoughts and questions.

Although it will not be possible to actually perform a usability study at this point, discuss the process. Standard Web server logs are an invaluable source of information about usage patterns, once a Web site has gone live. Such testing can be rigorously structured and quite expensive. Ultimately, the bottom line is the potential cost savings that can be realized through usability studies. Losing users because of a poor design could be catastrophic for a commercial venture. Students will consider these more after the Web site has been published and these results are available.

Work on the prototypes. Review the rubric Make sure to show the links to each page. Indicate links using arrows to the various pages. Make sure that each page represented has a proper title and the filename. The documenter should be responsible for maintaining a folder with ALL documents. This folder should be turned in at the end of the period.

February 2 -- Writing for the Web

This lesson illustrates various writing styles used for the Web. Research has proven that readers treat a monitor differently than a page of text in a book. Various techniques to lure the audience to your Web site will be discussed.

warm-up: Read the Writing PowerPoint-- T.6.PP_8.ppt in Google Groups

Many factors contribute to good writing. They include correct spelling, good grammar, as well as interesting content. However, to write for the Web you have to be aware of how people read Web pages, as well as the nature of hypertext itself. Writing for the Web differs dramatically from writing for print media. Web users generally scan the content rather than read every word. You should write concisely, then cut, edit, and paraphrase. Classic academic writing follows a pyramid structure. It lays the foundation, supports the information from research or data followed by a conclusion. That style does not work for Web content. An inverted pyramid approach is suggested. The workflow is reversed by putting the essential information first. A reader spends a very short time at a site on the first visit. State the facts plainly and clearly.

The actual content for the Web pages will be developed in the next major class project. This lesson lays the foundation for the proper writing style.

Read writing8.doc in Google Groups.

Activities:

Create a new POST in your BLOG. Title the POST "Writing for the Web". Answer the following questions. Either copy the question below, or answer in complete sentences.

What is THE most important part of a Web page?
What three things are the most important when writing for the web?
What is the typical method for writing content in paragraph form?
Would this work for Web pages?
How do people actually read Web pages?
What is an approach that could be used to keep readers on a Web page longer? Describe this approach in your own words.

Examples of Heat Maps -- Discuss

Blog Entry: title your BLOG entry "What to Look for in a Web Designer". Write a descriptive paragraph describing what clients should look for when they are interested in having a web site created. In a second paragraph reflect on YOUR skills that you have learned while developing your client website and state whether you are doing an excellent, good, fair, or poor job so far in this development. Discuss what strategies you have used to be successful; or what you need to do to improve over the course of the next two weeks.

Activity: Directions for Creating a Dynamic Web Template from scratch...
          CSS Tutorial

Finalizing the Site Template

Designer –Style site template.
Documenter –Test site template.
Project Manager – Help

The first page (homepage) of your site should be complete today. At the end of the class, the Project Manager is responsible for printing this page and writing each team members' name on the page. Make sure this page gets turned into the "black box" today.

Follow-up: Continue communicating with your client. Review the interview questions to make sure all issues have been covered. Refine your prototypes if necessary.

February 13

Directions for Creating a Dynamic Web Template from scratch...
CSS Tutorial

Peer Evaluation for the index pages for each group.

After all of the homeapges have been viewed, students should reflect with the team what they have learned by evaluating the home pages. Comment on the design issues that were discussed and what is need for them to be a successful Web site development team.

Review the rubrics for each phase of the development process.

February 13, 2009 -- Dynamic Web Templates as a Design Technique
February 20, 2009 -- Site Structure and Page Design
February 27, 2009-- Final Project Evaluation

Advanced Web Design Technologies

There are several advanced design technologies to understand.

Dynamic Web Templates

A Dynamic Web Template (DWT) is an HTML-based master copy of a Web page that you can create to contain settings, formatting, and page elements such as text, graphics, page layout, styles, and regions of a Web page that can be modified. DWT’s were made popular by Dreamweaver, and because so many templates became available by third-party solution developers, they have become popular for small Web sites. DWT’s are supported by Expression Web.

Master Pages

Master pages are the chrome around the content of the Web site. All content pages spill their content into the master page. In modern Web site design, most of the development time is spent around the “Look and Feel” of the master page. The master page is viewed on every page in the Web site.

Content Pages

A content page is a page based on a site template (a master page or Dynamic Web Template). When a user views a content page in the browser, the user sees all the content from the site template, plus all the content you add in the content controls on the content page. A page based on a site template does not include the template content in the actual file on the server, so you cannot see it in Code view. It is displayed for you in Design view, but it is not editable.

Organizing Content (Layout Tables, Frames, CSS, and Divisions)

A layout table is a tool you can use to create a page design. In HTML, it appears the same as a table; however Microsoft Expression Web provides separate tools for editing tables and layout tables. During the 90s, tables were the preferred page layout methodology, because they were easy to add and the number of columns could add granularity to content location like images. It wasn't’t uncommon to see pages with tables of 100 columns by 100 rows. Judicious use of column span and merge cells could give the designer almost precise pixel location of page elements. Tables can still be used to organize content but for the most part have been replaced by divisions, layers, and CSS.

Frames were once a standard for Web site design and the functionality they offered has been replaced by site templates: master pages and Dynamic Web Templates. The main purpose was to have a frame for menu elements, a frame for a header, and a frame for content pages.

Multimedia (Sounds, Video, and Image Maps)

Web multimedia is everything you can hear or see: texts, pictures, music, sounds, and videos. Multimedia comes in many different formats; a competent Web page developer must be able to discern the differences between them and even convert between formats. Tools such as Expression Media can do sound and image file conversions.

Navigation Controls/Bar

Navigation controls are of various types but most technologies offer menu, tree view, and list view controls that can be set to use different data sources. Adding the database to a Web page is accomplished by adding a data source control to the page. Expression Web makes this easy and it can be accomplished without code.

Troubleshooting and Debugging

Troubleshooting and debugging Web pages and entire Web sites requires tools (debuggers) that are associated with the type of development technologies being used. For master page design and troubleshooting, the Internet Explorer Developer Toolbar is a widely used tool. Programmers normally use the debugging tool associated with their coding environment. JavaScript is a widely used client programming tool and can be debugged using Visual Studio. Other tools are used to verify authentication and the HTTP stream which is how the bits flow across the internet. Fiddler 2 is such a tool that can show errors and issues that cannot be seen by just looking at the page.

Interactivity

Web page interactivity is what drives Web sites. Hyperlinks, buttons, and other controls allow the user to interact with the Web site. A static Web site is boring and won’t be visited often. Except for the hyperlink, interactivity is associated with a programming or scripting language like JavaScript. Microsoft Expression Web has many controls that can be instantiated on a Web page, and their properties can be set without the use of programming languages. The interactive button (Rollover Button) is such a control.

JavaScript is an example of a client-side scripting language that is used extensively to add interactivity to a Web page. There are many sites that categorize and provide free JavaScripts that can add functionality and interactivity to a Web site. DynamicDrive (see URL above) is such a Web site, and there are many more. Do a Web search for "JavaScript" to find them.

The use of data controls, which can be accessed and added to Web pages by Expression Web, has brought interactivity to the non-programmer page designer. However, keep in mind that most business processes will require custom code to model the process through workflow and other process modeling tools.

Web Forms

A Web form is a term that is normally associated with design. It is a control surface that allows the designer to drag and drop controls onto a design surface, allowing the page designer to see placement and styling of the controls in a familiar “WYSIWYG” pattern. (Contrast this tool with other design surfaces that must be created in code, where the design surface is visualized by the designer.) Web forms make designing Web pages simple.

Data Access Features

A modern Web site must maintain information about users, state information, etc. The modern approach is to keep the information in a database, SQL Server, Access or other database technology. Data access is accomplished by adding a data source control to the page.

Web site production process has been rigorously evaluated and documented. Traditional planning methods cannot adequately address the changes that need to be made on a day-to-day basis. Agile and scrum address change and allow change to be part of the process. Web site production is planned and a document describing the customer requirements/specifications is necessary to provide a measuring tool for pass or fail as the site is built. Scrum is a vital part of the process and should be given time and importance on a daily basis.

February 16-20

Description of an outstanding product:

An outstanding week two project is one that completed all the page layouts and the site has the “Look and Feel” specified by the client. Each content page has the appropriate controls to meet the client specifications and the designer is currently working on styling each of the content pages.

 

due -February 20, 2009 -- Site Structure and Page Design

 

The team should schedule a client meeting to go over the website. The overall design should be complete enough that the client has a very good idea of what the site will look like. Ideally, you should show the client the actual electronic version of the site. You should at least have a print version available for them to make comments.

 

To get credit for this meeting, they MUST email me at smboone@gmail.com using the contact email that was provided on the first client interview sheet.

February 23-27

Final Client Website MUST be completed Friday, February 27

Description of an outstanding product:
An outstanding week three project is one that has met the client requirements, reflects design principles, and communicates the message effectively and with creativity. The content is organized and contributes to ease of navigation and understanding. The Web site can be demonstrated without errors. Images load quickly, text is formatted consistently across the site, and navigation is intuitive.

February 27, 2009-- Final Project Evaluation

Check back to view Outstanding Student Projects!

 

Congratulations on completing your test. You MUST make corrections. This is a separate grade, so please make sure you do this.

Include a Portfolio Link BACK to the portfolio page!

To allow your audience to view ALL of your projects, you must include a link BACK to the portfolio.html file. If you recall, this is the web page that is acting as a table of contents for all of your project. Follow the directions below.

• Open Expression Web.
• Close any site that is open.
• Open YOUR site.
• Open EACH web page (files with .htm or .html endings) and create a link BACK to the portfolio.html file that is located in the top level of your folder.
• You will include a link on each page that will lead BACK to the portfolio.html file.
• I would suggest that you include a simple text link: The text should read Back to Portfolio and the link should be ../portfolio.html. You can navigate to the file, or type it in the link box.
  (The ../ gets you out of client and the portfolio.html tells what page should open)