JEFFERSON TOWNSHIP PUBLIC SCHOOLS COURSE OF STUDY BUSINESS DIGITAL WEB DESIGN 2011
TABLE OF CONTENTS Course Overview... 1 Units of Study... 3 Sample Student Learning Activities... 8 Suggested Teaching Strategies and/or Activities... 14 Teacher Assessment of Student Learning... 15 Bibliography and Resources... 16 1
DIGITAL WEB DESIGN COURSE OVERVIEW Business Education at Jefferson Township High School makes an important contribution to the development of an understanding of the global business community, and the skills required for business technology. Career exploration and planning is an integral part of the Business philosophy. The curriculum provides training and experience for the application of skills necessary for the successful acquisition of occupational competency, satisfaction, and future mobility. Business Education provides an occupational program of studies for those students desiring immediate careers in business, as well as instruction for students who plan programs of post-secondary and higher education in the field. The program offers a wide selection of relevant courses that are integrated with extracurricular organizations and activities, which enhance the student s learning experiences. New technologies are dramatically changing the way we live, work, and the way we learn. Businesses that engage in electronic (e-business) practices have experienced tremendous productivity changes in a relatively short span of time. An introduction to computer science is also offered through this course. Programming and career exploration into the world of game development is also touched upon. The newest educational games use critical thinking to solve a problem. Children can enter a virtual world, try on a character and solve problems that may relate to the real world. Digital Web Design is defined as key digital-communication skills through design, project management, and web technology. Web design and computer science are emerging career choices. Business Education at Jefferson Township High School must address the emergence of digital web design in a global community. Business Education curricula must encourage students to accept the challenges and opportunities in this dynamic, changing environment. Important issues discussed include web design, introduction to computer science, security, ethics, and project management/ownership. 1
For flexible scheduling, this course is designed for one semester (2.5 credits) and offered to grade levels 10-12. 2
UNITS OF STUDY I. HTML (Hypertext Markup Language) Big Idea: Understanding the definition and basic HTML commands. Exploration of how HTML is used, the structure behind Web pages, and a basic comprehension of why HTML is so useful in Web design will be discussed and implemented. Career opportunities will also be discussed. 1. HTML Vocabulary and Application A. Essential Questions What career choices are offered using digital web design? What is HTML? In what context is HTML used? What are the advantages of learning basic HTML? What are copyright issues and ethics regarding the Internet? Why are copyright issues so important when planning and designing a web site? B. Learning Objectives Students will be able to: 1. NJCCCS 8.1.12.A.3; 8.1.12.F.2; 8.2.12.B.3 Demonstrate knowledge of HTML concepts and career opportunities within this realm. Define and apply the basic tags and vocabulary associated with these tags and HTML. 2. NJCCCS 8.1.12.D.1; 8.1.12.D.2; 8.1.12.D.3; 8.1.12.D.4; 8.1.12.E.2 Demonstrate knowledge of legal and ethical aspects associated with using and modifying electronic clip art, scanned text, and graphics as it applies to the design and creation of web pages. Discuss copyright laws pertaining to scanned images and documents in web page design. Identify situations where scanned images, documents and electronic graphics may legally be used but are ethically questionable. II. HTML (Hypertext Markup Language) Big Idea: Utilizing colors, fonts, tables and frames helps the student understand more of the basic tags for constructing a Web page. Correct utilization and placement of colors and fonts in a Web site can send a message to the end user of one that is comfortable, inviting and tasteful. Eye-catching pictures, graphics and tables can give the user a sense of order in the design. 3
1. HTML Web Page Design A. Essential Questions How can colors affect mood, culture, etc.? How can frames and tables bring order to a Web page? How much clip art is too much in Web design? B. Learning Objectives Students will be able to: 1. NJCCCS 8.1.12.A.3; 8.1.12.A.4; 8.1.12.C.1 Demonstrate correct color and font use by researching web sites online to determine proper use of color, fonts, and graphics, pictures and clip art. Understand how some colors are unacceptable in some cultures and how selling of products and services depend on sensitivity and understanding of a global society. 2. NJCCCS 8.1.12.A.3 Recognize how table and frame tags can give organization to a web design. Identify cluttered web sites, and research to compare and contrast web sites with a look and feel of cluttered versus simplistic. Use critical thinking skills to plan and conduct research, solve problems and make informed decisions. Identify and define authentic problems with design and significant questions for investigation. III. Dreamweaver Web Design Software Big Idea: Using Dreamweaver, determine and design the best type of web page to be created based upon the discussion of the purpose and needs of your intended audience. Web site structures will also be discussed. 1. Dreamweaver A. Essential Questions What is the mission/goal of a web page? What are the various web page structures that can be used? How can the world wide web be used to communicate, collaborate and connect with individuals and/or businesses? How can the web be used to market and sell products or services? 4
B. Learning Objectives Students will be able to: 1. NJCCCS 8.2.12.A.1; 8.1.12.A.3; 8.1.12.F.2 Design a basic web page(s) adding content, links, navigation and images. Understand the importance of themed pages to add flow and continuity to web pages. 2. NJCCCS 8.1.12.C.1 Discuss, design and apply navigation tools as they relate to web design. Discuss, design and the use of colors, fonts and design aspects as they relate to web page design and sale of product or service. IV.Dreamweaver Web Design Software Big Idea: In the global workplace, one or many may work on projects. Corporations utilize teams as a way of brainstorming to get the job done. Many interpretations of a single idea can be discussed and hashed out. To focus and hone in on one agreeable idea gives a group a sense of cohesiveness. 1. Dreamweaver A. Essential Questions What design skills are needed to meet client requirements? What research and communication skills are necessary to communicate ideas clearly? What technical skills are needed to create a basic client-approved web site? What is the main emphasis of the design-team process/team-client interaction? B. Learning Objectives Students will be able to: 1. NJCCCS 8.1.12.A.3; 8.1.12.C.1; 8.1.12.F.2; 8.2.12.A.1 Discuss the design process in a systematic approach using team building to solve problems. Define goals, target audience and content of project through discussion and teamwork. Using storyboarding (Inspiration), understand how planning is an important step in design process. Recognize that a basic project plan take many forms. 2. NJCCCS 8.1.12.A.3 Discuss, review and emphasize that a web site is always changing and must be kept up-to-date. 5
Focus on incorporating feedback and changes throughout the development of a project, and the application of techniques and concepts making the site design content easily reusable and revisable. V. Exploring Computer Science Is and What It Can Do (Scratch) Big Idea: Technology can be used to solve problems, automate processes and present new ideas. Computer programming is largely concerned with the analysis and manipulation of data through the use of computational algorithms. Programming is a creative process that can transform ideas into reality. Educational games are online and social, allowing children to interact and collaborate to achieve common goals. 1. Scratch A. Essential Questions How do you think programs such as Microsoft Word, Internet Explorer and Windows are made? How can logical algorithms be used to display information and complete calculations to solve problems? B. Learning Objectives Students will be able to: 1. NJCCCS 8.1.12.B.1 Discuss the importance of gaming as an instructional tool that can be used to enhance one s coordination and thinking/decision-making skills. Discuss and apply programming variables, conditions and randomness. Take part in discussions and planning that connect mathematics and logic to computation in programs. Plan, design and develop a character and a game using Scratch software. 2. NJCCCS 8.1.12.A.4 Participate in and interact with online courses, simulations and lessons that reinforce the topics of computer program design. VI. Exploring Computer Science Is and What It Can Do (Scratch) Big Idea: Storyboarding allows the student to tell the story behind the story. Directions are a big part to the end user. Giving directions gives the user insight as to how use the game, technology, etc. 6
1. Scratch A. Essential Questions How can students use brainstorming techniques to create stories in Scratch? How do looping/iteration play a role in game development? Why are scripts/role plays important in game development? B. Learning Objectives Students will be able to: 1. NJCCCS 8.1.12.A.2; 8.1.12.A.3; 8.1.12.A.4; 8.1.12.B.1 Participate in group discussions to generate a media-rich digital story using computer-generated sprites or user-generated ones. Collaborate with peers and develop an original project consisting of basic gaming concepts. 2. NJCCCS 8.1.12.B.1; 8.1.12.F.2; 8.1.12.B.3 Analyze the potential career choices regarding design, storyboarding, testing or development of online games. 7
SAMPLE STUDENTS LEARNING ACTIVITY Unit: HTML (Hypertext Markup Language) Lesson Plan Title: HTML Formatting All About Me! Concept/Topic to Teach: Basic formatting, colors, fonts used in a one-page web site. Objective: 1. To synthesize a one-page web site utilizing basic HTML tags. 2. Encourage students to consider layout, design (colors) and presentation as important factors in web page design. Standards Addressed: NJCCCS 8.1.12.A.3; 8.1.12.F.2; 8.2.12.B.3 Required Materials: Computer Utilizing Notepad Handout Vision software Anticipatory Set (Lead-in): Relate and discuss what features comprise a good web page. What makes the user want to stick around on the web site or click out and onto something else? Further discussion will lead to how basic tags can produce a simple web page design. Step-by-Step Procedures: Students will plan how to present information Students create a one-page web List answers to various questions such as What is my favorite food? or What is my favorite color? Plan for Independent Practice: Students will compare and contrast their sites with those of their classmates. Closure (Reflect Anticipatory Set): Discussion and review of basic HTML tags and how these tags are the basis for every web page. Students will begin to understand that every web site consists of colors, fonts and a sub-layer of text and commands whereby the browser displays what is coded. Employment opportunities will also be discussed. Assessment Based on Objectives: Students will be graded on a rubric of assessment, indicating what elements must be included and why. Grade will count as a class activity. Adaptations (For students with Learning Disabilities): Preferential seating 8
Adapted assignment Extensions (For Gifted Students): Students may research other parts to their web site which they may wish to include. They may wish to prepare an on-line resume and discuss how resumes are used electronically in today s workforce. Possible Connections to Other Subjects: English Math 9
SAMPLE STUDENTS LEARNING ACTIVITY Unit: Dreamweaver/Inspiration Lesson Plan Title: Jefferson Ski Lodge Concept/Topic to Teach: Basic formatting, colors, fonts, web site layout Objective: 1. To synthesize a multi-page web site based on a company s needs. 2. Use Inspiration software to think about layout of web site. 3. Encourage the student to think about layout, design (colors) and presentation. Standards Addressed: NJCCCS 8.2.12.A.1; 8.1.12.A.3; 8.1.12.F.2 Required Materials: Computer Dreamweaver Book Handout Vision software Anticipatory Set (Lead-in): Discussion of how many companies have a web presence and some companies are very specific in what information may wish to convey to their audience. Web design is very important users will click away within 10 seconds if the web site is not easily to navigate and find the information they are seeking. Step-by-Step Procedures: Students will plan how to present information Students create a multi-page web site Using handout and software, students will design and present information Plan for Independent Practice: Students will review each other s web sites for color, font, layout, information presented and grammatical errors (if any), using a ease of accessibility questionnaire handout. Closure (Reflect Anticipatory Set): Discuss with students the importance of information to be not too simplistic, but yet not too wordy. The ease of use is paramount! Assessment Based on Objectives: Students will be graded on a rubric of assessment, indicating what elements must be included and why. Grade will count as a project grade and will take several classes to complete. Adaptations (For students with Learning Disabilities): Preferential seating Adapted assignment 10
Extensions (For Gifted Students): Students may research other parts to their web site which they may wish to include. They will receive extra points for other components discussed, but not required on the web site. Possible Connections to Other Subjects: English Math 11
SAMPLE STUDENTS LEARNING ACTIVITY Unit: Scratch Software Lesson Plan Title: Basic Game Concept/Topic to Teach: Constructing a basic maze game Objective: 1. Using Scratch software, students will create a basic game. 2. Students will be able to layout a basic game, design and use colors. 3. What do you need to think about to design a basic game? 4. How does music play a role in a game? Standards Addressed: NJCCCS 8.1.12.B.1; 8.1.12.A.4 Required Materials: Computer Scratch Handout Vision software Anticipatory Set (Lead-in): Brief discussion about how science is starting to understand how gaming can lead to increased self-esteem, motor/visual coordination skills, etc. However, designing a game is not as easy as it seems! Step-by-Step Procedures: Students will create a simple maze game Students will create a sprite for the game Colors and backgrounds will be stressed Plan for Independent Practice: Students will review each other s games for playability, ease of use, color, layout, and directions presented to play the game. Students will review for any grammatical errors (if any). Closure (Reflect Anticipatory Set): Discuss with students the importance of direction information to be not too simplistic, but yet not too wordy. The ease of use is paramount! Assessment Based on Objectives: Students will be graded on a rubric of assessment, indicating what elements must be included and why. Grade will count as a project grade and will take several classes to complete. Adaptations (For students with Learning Disabilities): Preferential seating Adapted assignment 12
Extensions (For Gifted Students): Students may research other parts game. They may wish to add music and sound effects. They will receive extra points for other components discussed, but not required on the game design. Possible Connections to Other Subjects: English Algebra 13
SUGGESTED TEACHING STRATEGIES AND/OR ACTIVITIES 1. 3-minute pause 2. Class Discussions 3. Concept Attainment 4. Cooperative Learning 5. Cross-Curricular Connections 6. Different purposes for viewing/reading 7. Formal /Informal Writing 8. Graphic/Visual Organizers 9. Graphing calculator explorations 10. Guest speakers 11. Independent/Group Project 12. Integration of Technology 13. Interpretation of Graphics (maps, graphs, cartoons, tables ) 14. Jigsaw 15. Lecture bursts 16. Library research for data gathering 17. Modeling/Demonstration 18. Pairs Check/Review 19. Problem-solving with decision-making 20. Reciprocal Teaching 21. Roundtable 22. Scaffolded Questioning 23. Skill-Building Activities 24. Think Aloud 25. Think-Pair-Share 26. Use of Audio Clip/Music 27. Use of Video Clip 14
TEACHER ASSESSMENT OF STUDENT LEARNING 1. Check for Completion 2. Checklist 3. Collect and Grade 4. Constructed Response 5. Cooperative learning 6. Exit Slip 7. Group work 8. In-Class Check 9. Informal Assessment 10. Journal/Learning Log 11. Maintenance of a notebook 12. Open-ended questions 13. Oral participation/discussion skills 14. Oral presentations 15. Peer/Self Assessment 16. Performance Assessment 17. Portfolio 18. Presentation 19. Projects 20. Quiz 21. Rubric 22. Standardized testing 23. Student created puzzles 24. Student-constructed bulletin boards 25. Teacher observation 26. Test 27. Tests and quizzes 28. Written homework 15
Textbook Series: DDC Introduction to HTML DDC Fundamentals of HTML HTML handouts Dreamweaver (Cashman) Adobe on-line class projects Scratch handouts BIBLIOGRAPHY AND RESOURCES Technology: Computers Notepad (for HTML) Dreamweaver software Scratch software Internet Resources: On-line courses provided (Dreamweaver, Scratch) Various reinforcement Web sites Supplemental Resources: Handouts 16