Title: Fundamentals of Web Design Subject/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
Organizing the Learning
Monday Tuesday Wednesday Thursday Friday
Week 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.
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.
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? WHE1E2E1H ET E1 RE1 E1 TH E2
Week 3 Apply 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? 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. 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? E1 H E1 E1 T E1 E1 T R T R E2 E1 TE1 T H RE1
Six Facets of Understanding
Description 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.
