Title: Fundamentals of Web DesignSubject/Course: Business & Computer Science

Interactive Media

Topic: Basic Web Site Construction & Techniques

Grade: 12 Designer(s): Tarena Ruff

Stage 1- Desired Results

Established Goals: BCS-FWD-1. Students will demonstrate an understanding of the planning, development, and implementation of web sites.

a. Define key terms in web site development including client-side, server-side, HTML, CSS, databases, and CGI.

b. Demonstrate knowledge of essential web site navigation issues.c. Demonstrate knowledge of document and web site file structure.d. Demonstrate an understanding of creating and using hyperlinks in web sites.e. Create a flowchart/storyboard.f. Describe one or more target groups.g. Present web site.

Academic Standards: ELA12RC3. The student acquires new vocabulary in each content area and uses it correctly.ELA12LSV1. The student participates in student-to-teacher, student-to-student, and group verbal interactions.ELA12LSV2. The student formulates reasoned judgments about written and oral communication in various media genres. The student delivers focused, coherent and polished presentations that convey a clear and distinct perspective, demonstrate solid reasoning, and combine traditional rhetorical strategies of narration, exposition, persuasion, and description.ELA12W2. The student demonstrates competence in a variety of genres.

Understandings:

A web site that is well constructed is perceived to be professional, credible and appealing to its audience.

The Internet is becoming more of a place to exchange information rather than a place to simply retrieve information.

Website users have come to be more comfortable with a predictable navigational structure.

Personal and professional web sites differ in design and structure.

Different audiences will require different web structures, layouts and accessibility standards.

Essential Questions:

Why is it important to consider your audience before designing a web site?

What caused the popularity of social networking sites such as Facebook, MySpace, LinkedIn?

In what ways are web sites a better source of information than other media? Are web sites necessarily a better source of information?

How do web sites help or hinder human communication?

What are the pros and cons of publishing information on the Internet?

Students will know… Terminology in web site development Web site navigation issues Web site file structures Good coding practices Imaging techniques File formats and extensions Uses of web site tags/elements

Students will be able to … Create a web site using a simple text editor Create and use internal and external hyperlinks Create a web site diagram/layout/storyboard

and present to an audience Upload web site files to a server Create a web form and collect user input using

a database

Stage 2- Assessment Evidence

Performance Task:

Goal: Your task is to design a website for a charity that will benefit disabled orphans in Haiti.Role: Your role has a web development manager is to present your web site diagram and layout to the organizers of a non-profit organization and a group of your peers, gain feedback, and create the web site using a simple text editor.Audience: Your audience is the general public. In your web design, you must convince the general public to give a monetary donation online to support the efforts of the non-profit organization whose primary mission is to raise money for Haitian orphans.Situation: Your challenge involves structuring a web site that will explain the mission of the non-profit organization, the need for monetary support for Haitian orphans, and convincing people to donate online. Visit http://www.ahomeinhaiti.org/ and view the source code. Determine what information is contained in the web site. Focus on the look and feel of the website, and explain why it has been successful in raising close to $100,000. Product, Performance, Purpose: You will create a web site storyboard/layout, and develop the site using a simple text editor or graphical user interface program. The web site should have at least 4 pages, company logo, a web site form, and a link to an external web source.Standard: Your peers, whom will act as members of the non-profit organization, will judge your work.

Other Evidence:

Unit terminology quiz Source code assignment Blogger assignment Simple web page assignment CSS assignment Modify Blogger template

assignment Web form results Class presentation of web site

layout/storyboard “Jeopardy” pre and post

assessments Performance task rubric

Student Self-Assessment:

Journal: What web sites do you visit often? What is appealing about them? Why?

Journal: If you were teaching this unit, what would you do to ensure that your students could develop an effective professional web site?

Journal: What did you learn that you did not know prior to this class? What concepts do you still struggle with after completion of this class? In what ways was this class valuable? Do you think you would be able to apply the skills and performance tasks to your everyday life? If so, how?

Stage 3- Learning Plan

Introduce unit Pre-assess prior knowledge with “Jeopardy” game Identify tags in source code Introduce key terminology Develop a blog using Blogger Introduce graphic optimization concepts Video podcast on file extension names and extensions Administer key terminology quiz Students work independently to deconstruct web sites Students work in pairs to produce web diagram and storyboard/layout Characteristics of HTML and XHTML Viewing web sites using various web browsers Student discussion on best coding practices Build a simple web page using a text editor Introduce Cascading Style Sheets Modify Blogger template Apply Cascading Style Sheets (CSS) to simple web page Using CSS with images and text Develop a web form using a CGI script Develop and present web site design storyboard for non-profit organization Construct web site from approved storyboard Student Reflective Journals Post-assessment with “Jeopardy” game

Organizing the Learning

Monday Tuesday Wednesday Thursday FridayWeek 1

View video podcast: Intro

Introduce standards for the unit and ask essential questions.

Lead student discussion on the importance of learning web development and how it could be applicable to real-world experiences.

Pre-Assessment: “Jeopardy” game on web site terms, file names and extensions.

View video podcast: Terminology

Students visit various web sites of their choice and copy and paste source code and identify the tags in the code.

Demonstrate the view source menu item in Firefox browser to promote understanding of XHTML structure.

Introduce key web development terminology.

View video podcast: Simple Web Page

Students will build a simple blog using Blogger to get familiar with standard site layouts and templates.

Discuss why Blogger is simple to use and the benefits of creating custom Blogger templates.

View video podcast: Web Optimization.

Explain the importance of optimizing graphics to keep file sizes to a minimum.

Display the different types of files used in web site development.

Quiz: Web Development Terminology. Administer quiz and go over answers in class. Determine what concepts students have grasped and what is misunderstood.

Allow students to visit and deconstruct web sites on their own.

WH H E1 E1 E2

Week 2Explain the importance of developing the layout and diagram of a web site before attempting to code.

Have students work in pairs to produce a web site storyboard.

View video podcast: XHTML

Discuss how the various web browsers, and how web content may be displayed differently between each browser.

Ask students to explain why XHTML is better coding practice than HTML.

Ask students to discuss why it may be important to use coding practices that will allow the effect display of web sites in multiple browsers.

Students will complete a simple web page with basic XHTML tags using a text editor (i.e. Notepad)

Allow students time to complete the simple web page assignment.

View video podcast: CSS

Introduce Cascading Style Sheets. Explain how and why there are used. Refer back to Blogger activity.

Have students open Edit Template in Blogger to experiment with customizing their blogs.

Reflective Journal 1: What web sites do you visit often? What is appealing about them? Why?

Week 3Apply Cascading Style Sheets to previous XTHML font elements in previous simple web page assignment.

View video podcast: Adding Images.

Students will create a web page with a .jpg image, a static gif image, and a .gif animated image.

A paragraph explaining the uses of each image must be presented to the left of each image.

CSS must be used to control the placement of the images and the paragraphs.

Allow students time to complete CSS assignment.

View video podcast: Creating Web Forms

Students will build a web form that allows users to submit information to a web server. Students will be introduced to CGI.

Allow students time to complete Web Forms assignment.

Reflective Journal 2: If you were teaching this unit, what would you do to ensure that your students could develop an effective professional web site?

ET E1 R E1 E1 T H E2

E1 H E1 E1 T E1 E1 T R

Week 4Students work in groups to design web site storyboard/layout for a charity.

Students will present their web site to the class and receive peer critiques.

Allow students time to complete web site presentations.

Students will begin building web sites using a simple text editor based on revised web site storyboard/layouts.

Allow students to complete web site development.

Students will upload web site files to free server.

Students will collect form submission information and print out results.

Post-Assessment: “Jeopardy” game on web site terms, file names and extensions.

Reflective Journal 3: What did you learn that you did not know prior to this class? What concepts do you still struggle with after completion of this class? In what ways was this class valuable? Do you think you would be able to apply the skills and performance tasks to your everyday life? If so, how?

T R E2 E1 T E1 E1 T H R

Six Facets of UnderstandingDescription Activity Performance/Evidence Criteria

Facet 1: Explanation

Sophisticated explanations and theories

Identify tags in source code Characteristics of HTML &

XHTML View web sites in various

browsers Students present work to

peers; give and receive critique of storyboard/layout

High score earn in Jeopardy pre and post assessment

Student formulates and communicates coherent ideas and is able to use proper terminology

Able to explain concepts to laypersons and web development professionals

Student can easily answer questions about web site content and procedures

Facet 2: Interpretation

Interpretations, narratives, and translations

Characteristics of HTML & XHTML

Student discussion on best coding practices

Evidence of best coding practices for multiple browsers and user accessibility in web assignments

Facet 3: Application

Use knowledge in new situations and contexts

Develop a blog using Blogger

Build a web page using text editor

Apply CSS to simple web page

Using CSS with images and text

Modify a Blogger template Develop a web form using

CGI script

Pages load quickly (under 10 seconds)

Graphics related to purpose and theme of web site

Navigational structure is attractive and easy to maneuver; important elements are easy to locate

Web site produces no error messages, broken hyperlinks or images

Information from web form properly received and stored into database

Facet 4: Perspective

Critical and insightful points of view

Students work in pairs to produce web site storyboard/layout

Students present work to peers; give and receive critique of storyboard/layout

Develop and present web site design storyboard for non-profit organization

Students show respect for others’ ideas

Work divided fairly Student re-evaluate the project

based on group and instructor comments

Facet 5: Empathy

Ability to get inside another person's feelings

Develop and present web site design storyboard for non-profit organization

Students construct web site using a simple text editor based on peer critiques

Web site works in most current web browser versions for Macs and PCs

Student designed and coded site with accessibility issues in mind

Web site successfully illustrates the goals, causes and mission of client representing non-profit organization

Facet 6: Self-knowledge

To know one's ignorance, prejudice, and understanding

“Jeopardy” game post-assessment

Student reflective journals Key terminology quiz Independent work on

deconstruction of web sites

Score earned on pre & post “Jeopardy” game

Ability to locate XHTML and HTML elements in web sites independently

Resources

James, K. (2010, June 15). Website optimization. The why and how (Part 1). Retrieved

November 25, 2010 from http://doteduguru.com/id5279-why-website-

optimization-is-important.html

Refsnes, H., Refsnes, S. & Refsnes, J.E. (2010). CSS tutorial. In W3Schools. Retrieved

November 23, 2010 from http://www.w3schools.com/css/default.asp

Refsnes, H., Refsnes, S. & Refsnes, J.E. (2010). HTML forms and input. In W3Schools.

Retrieved from http://www.w3schools.com/html/html_forms.asp

Refsnes, H., Refsnes, S. & Refsnes, J.E. (2010). HTML tutorial. In W3Schools. Retrieved

from http://www.w3schools.com/html/default.asp

Refsnes, H., Refsnes, S. & Refsnes, J.E. (2010). XHTML tutorial. In W3Schools.

Retrieved from http://www.w3schools.com/xhtml

Skodak, S., & Lane, S. M. (Eds.). (2007). Site development foundations: Academic

student guide. Phoenix, AZ: Prosoft Learning.