Web Design Lesson Plan

Title: Fundamentals of Web Design Topic: Basic Web Site Construction & Techniques

Subject/Course: Business & Computer Science Interactive Media

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:

Essential Questions:

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

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

The Internet is becoming more of a place to exchange What caused the popularity of social networking sites information rather than a place to simply retrieve such as Facebook, MySpace, LinkedIn? information. In what ways are web sites a better source of Website users have come to be more comfortable information than other media? Are web sites with a predictable navigational structure. necessarily a better source of information? Personal and professional web sites differ in design and structure.

How do web sites help or hinder human communication?

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

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

Performance Task:

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 Other Evidence:

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 nonprofit organization, will judge your work.

• • • • • • • • • •

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 Week 1

Monday

Tuesday

Wednesday

Thursday

Friday

View video podcast: Intro

View video podcast: Terminology

View video podcast: Simple Web Page

View video podcast: Web Optimization.

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

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

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

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

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

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

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 realworld experiences. Pre-Assessment: “Jeopardy” game on web site terms, file names and extensions.

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

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

Introduce key web development terminology.

E E2 E1 H1 WH

Week 2

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

E1 H E1 E1 ET E2 RT

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 3

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

View video podcast: Adding Images.

Allow students time to complete CSS assignment.

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

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.

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

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?

CSS must be used to control the placement of the images and the paragraphs. E1 E1 T E1 E1H TE1 R

Week 4

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

T E1 R E1 H E1 E2 R TT

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?

Six Facets of Understanding Description Sophisticated explanations and theories

Activity • 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

Performance/Evidence Criteria • 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 postassessment • 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

Facet 1: Explanation

Resources James, K. (2010, June 15). Website optimization. The why and how (Part 1). Retrieved November 25, 2010 from http://doteduguru.com/id5279-why-websiteoptimization-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.