Curriculum Management System

Transcription

1 Curriculum Management System MONROE TOWNSHIP SCHOOLS Course Name: Advanced Web Design Grade: For adoption by all regular education programs Board Approved: December, 2015 as specified and for adoption or adaptation by all Special Education Programs in accordance with Board of Education Policy # 2220.

2 Table of Contents Monroe Township Schools Administration and Board of Education Members Page... 3 Mission, Vision, Beliefs, and Goals Page... 4 Core Curriculum Content Standards Page... 5 Scope and Sequence Pages Goals/Essential Questions/Objectives/Instructional Tools/Activities Page Quarterly Benchmark Assessment Page

3 Monroe Township Schools Administration and Board of Education Members ADMINISTRATION Dr. Michael Kozak, Superintendent Dr. Dori Alvich, Assistant Superintendent BOARD OF EDUCATION Mr. Doug Poye, Board President Mr. Tom Nothstein, Board Vice President Ms. Michele Arminio Mr. Marvin I. Braverman Ms. Jill DeMaio Mr. Lew Kaufman Ms. Kathy Kolupanowich Mr. Anthony Prezioso Mr. Steven Riback Jamesburg Representative Mr. Robert Czarneski WRITER S NAMES Mr. Gerard Minter CURRICULUM SUPERVISOR Ms. Susan Gasko 3

4 Mission, Vision, Beliefs, and Goals Mission Statement The Monroe Public Schools in collaboration with the members of the community shall ensure that all children receive an exemplary education by well trained committed staff in a safe and orderly environment. Vision Statement The Monroe Township Board of Education commits itself to all children by preparing them to reach their full potential and to function in a global society through a preeminent education. Beliefs 1. All decisions are made on the premise that children must come first. 2. All district decisions are made to ensure that practices and policies are developed to be inclusive, sensitive and meaningful to our diverse population. 3. We believe there is a sense of urgency about improving rigor and student achievement. 4. All members of our community are responsible for building capacity to reach excellence. 5. We are committed to a process for continuous improvement based on collecting, analyzing, and reflecting on data to guide our decisions. 6. We believe that collaboration maximizes the potential for improved outcomes. 7. We act with integrity, respect, and honesty with recognition that the schools serves as the social core of the community. 8. We believe that resources must be committed to address the population expansion in the community. 9. We believe that there are no disposable students in our community and every child means every child. Board of Education Goals 1. Raise achievement for all students paying particular attention to disparities between subgroups. 2. Systematically collect, analyze, and evaluate available data to inform all decisions. 3. Improve business efficiencies where possible to reduce overall operating costs. 4. Provide support programs for students across the continuum of academic achievement with an emphasis on those who are in the middle. 5. Provide early interventions for all students who are at risk of not reaching their full potential. 6. To Create a 21st Century Environment of Learning that Promotes Inspiration, Motivation, Exploration, and Innovation. 4

5 Common Core State Standards (CSSS] The Common Core State Standards provide a consistent, clear understanding of what students are expected to learn, so teachers and parents know what they need to do to help them. The standards are designed to be robust and relevant to the real world, reflecting the knowledge and skills that our young people need for success in college and careers. With American students fully prepared for the future, our communities will be best positioned to compete successfully in the global economy. Links: 1. CCSS Home Page: 2. CCSS FAQ: 3. CCSS The Standards: 4. NJDOE Link to CCSS: 5. Partnership for Assessment of Readiness for College and Careers (PARCC): 6. National Standards for Family and Consumer Sciences Education standards home.html 5

6 Scope and Sequence Quarter 1 UNIT TOPICS I. HTML a. Editors b. Basics c. Elements d. Attributes e. Headings f. Paragraphs g. Styles h. Comments i. Links j. Images k. Tables l. Lists m. Blocks n. Classes o. Iframes p. CSS q. Javascript II. III. HTML Forms a. Forms b. Form Elements c. Input Types d. Input Attributes HTML5 a. Support b. Styling and Convention c. Elements d. Semantics e. Migration f. Forms and Input Types g. Video h. Audio i. YouTube 6

7 Quarter 2 I. CSS a. Syntax b. Selectors c. Backgrounds d. Text e. Fonts f. Links g. Lists h. Tables i. Box Model j. Border k. Outline l. Margin m. Padding n. Dimension o. Display p. Max Width q. Position r. Float s. Align t. Navigation Bar UNIT TOPICS II. III. CSS3 a. Rounded Corners b. Border Images c. Backgrounds d. Colors e. Gradients f. Shadows g. Text h. Fonts i. 2D & 3D Transforms j. Transitions k. Animations l. Multiple Columns PHP a. Syntax b. Variables c. Echo/Print d. Data Types e. Strings f. Constants g. Operators h. If..Else Elseif i. Switch j. Loops k. Functions l. Arrays m. Sorting Arrays 7

8 Quarter 3 I. PHP Forms a. Handling b. Validation c. Required d. URL/E Mail e. Complete II. PHP Advanced a. Date & Time b. Include c. File Handling d. Open/Read e. Create/Write f. Upload g. Cookies h. Sessions UNIT TOPICS III. MySQL Database a. Connect b. Create Database c. Create Table d. Insert Data e. Insert Multiple Data f. Select Data g. Delete Data h. Update Data i. Limit Data 8

9 Quarter 4 UNIT TOPICS I. Real Life Application Project a. Web Proposal and Design b. Application of HTML, CSS, PHP & MySQL c. Use of Current Technology for Presentations 9

10 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). UNIT 1 HTML Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Build an informational, aesthetically pleasing, multi page website using Hyper Text Markup Language (HTML). UNDERSTANDINGS Students will understand that HTML can be edited using a simple text or professional editor. HTML tags normally come in pairs where the first tag in the pair is the start tag and the second tag is the end tag. Empty HTML elements have no content and therefore have no end tag. Empty elements can be closed by placing a / at the end of the start tag. The World Wide Web Consortium (W3C) recommends the use of lowercase tags. All web browsers will read and display your document differently. Students will know HTML page structure HTML <!DOCTYPE> declaration HTML Headings HTML Paragraphs and Line Breaks HTML Links HTML Images HTML Attributes HTML Horizontal Rules HTML Head, Title and Meta Elements HTML Styling Meaning ESSENTIAL QUESTIONS What is HTML? How does a web browser read and display an HTML document? How can HTML be used to create a multipage website? Acquisition Students will be skilled at Writing, saving and opening an HTML document. Properly structuring an HTML document. Writing comments in an HTML document. Displaying an image in an HTML document. Creating hyperlinks in an HTML document. Properly formatting and styling an HTML document. Creating and separating paragraphs in an HTML document. 10

11 HTML Formatting Elements HTML Quotation and Citation Elements HTML Computer Code Elements HTML Comments HTML CSS HTML Tables HTML Lists HTML Block and Inline Elements HTML Classes HTML Layouts HTML Responsive Web Design (RWD) HTML Iframes HTML Javascript HTML Symbols Creating a Responsive Web Design. Implementing CSS and Javascript in an HTML document. Implementing a List (Ordered and Unordered) in an HTML document. Implementing a Table in an HTML document. Inserting an image into an HTML document. Dividing HTML content into paragraphs. Using HTML Headings appropriately. Displaying a web page within a web page using an iframe. Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical errors. Stage Two: Evidence Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance task: OVERVIEW Using HTML, students are to build their personal homepage. The personal homepage should consist of a brief introduction of the student, an additionally linked page for the student s future assignments and any additional pages the student would like to add to express their individuality or showcase their talent(s). An emphasis should be placed on creating an aesthetically pleasing interface. DIFFERENTIATION The assessment is naturally differentiated since it allows students the freedom to express themselves individually and in their design. TECHNOLOGY Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML Quick Guide App on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. 11

12 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and understanding of key concepts: 4 I understand completely and I can teach it to a classmate. 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! Students will post their final web design to the class web server. Students are to browse/search the internet for personal homepages to generate design and content ideas. Students should further test these homepages with multiple browsers and devices to analyze their compatibility across multiple platforms. OTHER SUGGESTED PERFORMANCE TASKS: Music Album with Lyrics: Students are to create an HTML Web Design that depicts one of their favorite music albums. The design should contain a primary page with the album s artist, title, year released, cover art and track list. Each album track should have a link to the track s lyrics. Favorite Links: Students are to create an HTML Web page that is a collection of hyperlinks with descriptions Image Gallery: Students are to create an HTML Image Gallery that illustrates some of the student s favorite images. A description of the image and how it relates to the student should be included. Multiplication Table: Using HTML Tables, students are to create a Multiplication Table for the numbers 0 through 10. News Article: Using HTML Paragraphs, students are to find a news article on the web containing at least 3 paragraphs and duplicate the article in print. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the HTML Lessons, Examples and Exercises at Show students multiple web pages and break down the HTML of each page. Show students multiple web pages in various web browsers and identify similarities and differences. Written assessment of HTML and HTML elements. Basics of using Adobe Dreamweaver. Create, Edit and Save an HTML document in Adobe Dreamweaver. How to access/load an HTML document in a web browser. The course is hands on, with students creating and designing multiple pages to master content. This should be consistent throughout the course. An emphasis on performance assessments with teacher monitoring and assistance as necessary. 12

13 SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. Students should be encouraged to further investigate web design through online tutorials and videos in order to create a unique design that represents them and their page(s). 13

14 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). UNIT 2 HTML Forms Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Create an HTML form using multiple form elements. Successfully submit HTML form data to a form handler. UNDERSTANDINGS Students will understand that HTML Forms are used to collect and transmit user input. The POST method should be used when there is sensitive data. The GET method is used for passive submissions and will be visible in the page s address. Students will know The <form> Element The <input> Element Form Input Types: button, checkbox, password, radio, submit, text action Attribute method Attribute GET and POST Methods name Attribute <fieldset> Element <legend> Element <select> Element <option> Element <textarea> Element value Attribute readonly Attribute Meaning Acquisition ESSENTIAL QUESTIONS How can users enter data on a web page? How is data transmitted via a web page? How is sensitive and non sensitive data handled? Students will be skilled at Creating an HTML form. Submitting form data to a form handler. Properly using the POST and GET methods for sensitive and non sensitive data. Properly aligning an HTML form in the document. Collecting user input using a form. Specifying initial values for input fields. Implementing a text field in a form. Implementing a text area in a form. Implementing a dropdown list in a form. Implementing checkboxes in a form. Implementing radio buttons in a form. Implementing a submission button in a form. 14

15 disabled Attribute size Attribute maxlength Attribute Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical errors. 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and Stage Two: Evidence Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance tasks: OVERVIEW: Students are to create a survey that posts to a pre coded PHP script that will process the results. The survey should include all or the majority of HTML form input types. The page should follow a consistent design and layout with properly aligned elements. DIFFERENTIATION: Students have the ability to tailor the survey to their own interest(s). TECHNOLOGY: Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML Quick Guide App on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. Students will post their final web design to the class web server. OTHER SUGGESTED PERFORMANCE TASKS: Username and Password: Students are to create an HTML form that accepts an individual s username and password. The password input type MUST be implemented for the password. 15

16 understanding of key concepts: 4 I understand completely and I can teach it to a classmate. 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! Maximum text field length can optionally be applied. Question: Students are to create and HTML form that represents a multiple choice question. Radio buttons and a submit button are to be implemented. Contact Information: Students are to create an HTML form to input an individual s contact information. The amount of fields is up to the instructor and/or student. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the HTML Form Lessons, Examples and Exercises at Show students multiple web pages that utilize HTML forms and break down the HTML of each form. Written assessment of HTML Forms. The course is hands on, with students creating and designing multiple pages to master content. This should be consistent throughout the course. An emphasis on performance assessments with teacher monitoring and assistance as necessary. SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. Students should be encouraged to further investigate web design through online tutorials and videos in order to create a unique design that represents them and their page(s). 16

17 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). UNIT 3 HTML5 Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Implement new attributes and elements new to HTML5. Bring web pages up to date following the HTML5 standard. UNDERSTANDINGS Students will understand that With HTML5 you must create your own best practice, style guide and coding conventions. HTML5 adds support for various formats of date and time to an HTML form. This will later be used in PHP and MySQL. HTML5 recommends the use of lowercase tags and ending all tags, including those without an end tag. Students will know The HTML4 elements that have been removed in HTML5 <audio> and <video> Elements Supported audio and video formats The new HTML5 elements The new HTML5 form elements The new HTML5 input types The new HTML5 input attributes The new semantics of HTML5 Meaning ESSENTIAL QUESTIONS How does HTML5 improve upon HTML4? How well supported is HTML5 across modern web browsers? How will HTML5 help us design better and more efficient web pages? Acquisition Students will be skilled at Embedding audio and video into a website. Creating an HTML document that meets HTML5 standards. Teaching older browsers to handle HTML5 correctly. Creating an HTML form that accepts the new HTML5 input types: color date datetime datetime-local month number 17

18 range search tel time url week Applying the new HTML5 input attributes: autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height width list min max required Stage Two: Evidence Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance task: OVERVIEW: Students are to create a web page advertising a product, real or fake. The web page should at least include text, images and an embedded advertisement video recorded by the student advertising the product. DIFFERENTIATION: Students may work in small groups for the video portion of the assessment. However, each student should have their own unique advertisement page. 18

19 demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical errors. 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and understanding of key concepts: 4 I understand completely and I can teach it to a classmate. 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! TECHNOLOGY: Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML5 Quick Guide App on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. Students will post their final web design to the class web server. OTHER SUGGESTED PERFORMANCE ASSESSMENTS: Music Album with Audio: Students are to embed audio tracks for their music album created in Unit 1. Birthday to Contacts: Students are to add a date selector for an individual s birthday to the contacts form created in Unit 2. Add an Event Form: Students are to create an HTML form to add an event to a calendar. The HTML5 date selector input type should be used along with text fields, a text area and any other input types deemed necessary. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the HTML5 Lessons, Examples and Exercises at Show students multiple web pages that utilize HTML5 and break down the HTML5 of each page. Written assessment of HTML5. The course is hands on, with students creating and designing multiple pages to master content. This should be consistent throughout the course. An emphasis on performance assessments with teacher monitoring and assistance as necessary. 19

20 SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. Students should be encouraged to further investigate web design through online tutorials and videos in order to create a unique design that represents them and their page(s). 20

21 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). UNIT 4 CSS Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Create more efficient and better designed web pages using Cascading Style Sheets (CSS) to style and layout multiple web pages. UNDERSTANDINGS Students will understand that CSS saves a lot of work by allowing you to control the style and layout of multiple web pages all at once. CSS defines how HTML elements are to be displayed. A CSS rule set consists of a selector and a declaration block. Students will know External, internal and inline stylesheets CSS Syntax and Rule Sets CSS Comments CSS Selectors: element, id and class Grouping CSS Selectors Multiple Style Sheets CSS Background Color and Image CSS Text Color, Alignment, Decoration and Transformation CSS Font Family, Style and Size CSS Links and Styles CSS Lists CSS Tables CSS Box Model CSS Border Properties CSS Outline Properties Meaning Acquisition ESSENTIAL QUESTIONS How can a multi page web site layout be handled more efficiently? What major problem(s) of HTML did CSS solve? How will CSS enable you to create a better, more attractive, design? Students will be skilled at Implementing external, internal and inline style sheets in an HTML document. Creating a cascading style sheet to control the style and layout of multiple web pages. Defining the background effects of an element. Styling text with text formatting properties. Define font family, boldness, size and style of a text. Styling links on a page or across multiple pages. Setting different list item markers for ordered and unordered lists. Setting an image as a list item marker. Improving the look of an HTML table with CSS. 21

22 CSS Margin Properties CSS Dimension Properties CSS Display Property CSS Max Width CSS Position Property CSS Float Property CSS Alignment Specifying the style, size and color of an element s border. Specifying the style, color and width of an outline. Defining the space around elements. Defining the space between an element border and content. Controlling the height and width of an element. Specifying the type of positioning for an element: static, relative, fixed or absolute. Aligning elements. Creating a CSS Image Gallery. Creating transparent images. Stage Two: Evidence Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance task: OVERVIEW: Students are to create an external CSS style sheet to manage their personal home page background(s), font(s), color(s), hyperlink(s), and overall design. The style sheet should also be applied to prior work for uniformity. DIFFERENTIATION: Students have the ability to choose their own images, fonts, colors, hyperlink structure and design. TECHNOLOGY: Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML, HTML5 and CSS Quick Guide Apps on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. 22

23 errors. 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and understanding of key concepts: 4 I understand completely and I can teach it to a classmate. 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! Students will post their final web design to the class web server. OTHER SUGGESTED PERFORMANCE TASKS: Navigation Bar: Using CSS, students are to make a navigation bar for their website. If students do not want a navigation bar on their personal homepages, they can make an alternate version of their existing page to accommodate this assessment. Modify Multiplication Table: Students are to modify their Multiplication Table from Unit 1 using CSS Tables and Box Models. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the CSS Lessons, Examples and Exercises at Show students multiple web pages that utilize CSS and break down the CSS of each page. Written assessment of CSS. The course is hands on, with students creating and designing multiple pages to master content. This should be consistent throughout the course. An emphasis on performance assessments with teacher monitoring and assistance as necessary. SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. Students should be encouraged to further investigate web design through online tutorials and videos in order to create a unique design that represents them and their page(s). 23

24 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). UNIT 5 CSS3 Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Add additional design visual features to design more unique web pages. UNDERSTANDINGS Students will understand that CSS3 is the latest standard for CSS. CSS3 is backwards compatible with earlier versions of CSS. CSS3 is split into modules. Students will know CSS3 Browser Support CSS3 Rounded Corners CSS3 Border Images CSS3 Backgrounds CSS3 Multiple Backgrounds CSS3 Background Size CSS3 Colors CSS3 Gradients CSS3 Shadows CSS3 Text CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface CSS3 Box Sizing Meaning ESSENTIAL QUESTIONS How does CSS3 improve upon CSS2.1? When and why should you use features of CSS3? What are some drawbacks of using CSS3? Acquisition Students will be skilled at Giving elements rounded corners Setting an image to be used as the border around an element Adding multiple background images for an element Specifying the size of background images Positioning background images Specifying the painting area of a background Displaying linear or radial gradients with smooth transitions between two or more specified colors Adding shadow effects to text and elements Wrap long words by breaking apart using the word-wrap property Define your own fonts Translating, rotating, scaling and skewing elements in 2D and 3D Change property values smoothly over a given duration Animate most HTML elements without 24

25 using Javascript or Flash Define multiple columns of text Include the padding and border in an element s total width and height Stage Two: Evidence Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical errors. 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance tasks: OVERVIEW: Students are to use CSS3 to add at least three effects to their page(s). DIFFERENTIATION: Students have the opportunity to choose their specific CSS3 effects and how to apply them to their design. TECHNOLOGY: Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML, HTML5, CSS and CSS3 Quick Guide Apps on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. Students will post their final web design to the class web server. OTHER SUGGESTED PERFORMANCE TASKS: Car Race Animation: Students are to use CSS3 to create a 5 car race with preset speeds. 25

26 understanding of key concepts: 4 I understand completely and I can teach it to a classmate. 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! Music Album Transition: Using CSS3, students are to create a transition for the album art work of their Music Album from a prior unit. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the CSS3 Lessons, Examples and Exercises at Show students multiple web pages that utilize CSS3 and break down the CSS3 of each page. Written assessment of CSS3. SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. 26

27 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). UNIT 6 PHP Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Create a dynamic, interactive, web page. UNDERSTANDINGS Students will understand that PHP is a server scripting language. PHP scripts are executed on the server. PHP is powerful enough and deep enough to run the largest social network, Facebook! PHP files can contain text, HTML, CSS, Javascript and PHP code. PHP is an acronym for PHP: Hypertext Preprocessor. PHP can generate dynamic page content. PHP can create, open, read, write, delete, and close files on the server. PHP can collect form data. PHP can send and receive cookies. PHP can add, delete and modify data in your database. PHP can be used to control user access. PHP can encrypt data. PHP supports a wide range of databases PHP is free. PHP is compatible with almost all servers. PHP runs on various platforms. A PHP script is executed on the server, and the plain HTML result is sent back to the browser. Meaning ESSENTIAL QUESTIONS What is PHP? What can PHP do? Why use PHP? Acquisition 27

28 Students will know A PHP script starts with <?php and ends with?> The default file extension for PHP files is.php Comments in PHP In PHP, a variable starts with the $ sign, followed by the name of the variable Rules for PHP variables PHP automatically converts the variable to the correct data type, depending on its value PHP variable scope PHP echo and print statements PHP data types PHP String functions PHP Constants PHP Operators: Arithmetic Assignment Comparison Increment/Decrement Logical String Array Conditional Statements if statement if else statement if elseif else statement switch statement Loops while do while for foreach PHP built in functions PHP user defined functions PHP Arrays Students will be skilled at Declaring PHP Variables Defining the scope of variables Outputting data to the screen Getting the length of a String Getting the number of words in a String Reversing a String Searching for a specific text within a String Replacing text within a String Creating constants Performing arithmetical operations such as addition, subtraction, multiplication, division, modulus and exponentiation Assigning values to a variable Comparing two values (number or string) Incrementing a variable s value Decrementing a variable s value Combining conditional statements String concatenation Comparing arrays Using conditional statements to perform different actions for different decisions Using loops to perform a repeated task Using PHP s built in functions Creating user defined functions Storing multiple values in one single variable using an array Sorting arrays 28

29 PHP Sort Functions Stage Two: Evidence Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical errors. 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and understanding of key concepts: 4 I understand completely and I can teach it to a classmate. Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance tasks: OVERVIEW: Students are to use PHP, HTML, and CSS to create a simple online game. Suggestions for this activity are the Hi Lo Guessing Game or Rock Paper Scissor. DIFFERENTIATION: Students have the opportunity to choose a simple online game of their liking and/or ability. TECHNOLOGY: Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML Quick Guide App on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. Students will post their final web design to the class web server. OTHER SUGGESTED PERFORMANCE TASKS: Username & Password: Expand on the previously designed Username and Password form to successfully allow or deny access to a website. Students may hard code the username and password or use a flat file. Math Functions: Create a page that implements at least 3 user defined functions into a math 29

30 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! resource webpage. Checker Board: Using PHP loops and HTML/CSS Tables, generate a checkerboard. Multiplication Table: Using PHP loops and HTML/CSS Tables, generate a multiplication table. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the PHP Lessons, Examples and Exercises at Show students multiple web pages that utilize PHP and break down the PHP of each page. Written assessment of PHP. SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. 30

31 ESTABLISHED GOALS New Jersey Core Curriculum Content Standards for Technology E.1 Demonstrate an understanding of the problem solving capacity of computers in our world E.2 Analyze the relationships between internal and external computer components E.3 Use a programming language to solve problems or accomplish a task (e.g., robotic functions, website designs, applications, and games) E.4 Use appropriate terms in conversation (e.g., troubleshooting, peripherals, diagnostic software, GUI, abstraction, variables, data types and conditional statements). Evaluative Criteria SUGGESTED PERFORMANCE RUBRIC: Use the following or similar rubric to evaluate a student s performance on performance tasks. 4 The student s web page/site is fully functional and demonstrates a complete and solid understanding of the concept(s). The page/site is well coded, documented and UNIT 7 PHP Forms Advanced Web Design Stage One: Desired Results Transfer Students will be able to independently use their learning to Create an HTML form that handles data using a PHP script. UNDERSTANDINGS Students will understand that Form data that is sent for processing can be handled with a PHP script. Students will know The PHP superglobals $_GET and $_POST When to use GET and when to use POST PHP form security PHP code to require HTML form fields PHP code to validate a name, e mail and URL PHP code for keeping HTML form data Stage Two: Evidence Meaning Acquisition Assessment Evidence SUGGESTED PERFORMANCE ASSESSMENT: Students will engage in the following performance tasks: OVERVIEW: ESSENTIAL QUESTIONS How will PHP handle our HTML form data? How can we securely process form data? Students will be skilled at Creating a simple HTML form that transmits data to a PHP script Validating form data with PHP Creating required fields Creating error messages for required fields if needed Validating names, e mails and URLs Keeping values in the form after form submission Students are to use PHP to expand on their HTML Forms so they properly transfer data from one page to the next. Information should be printed the next page in preparation to store the data in the database. 31

32 organized. There are no apparent syntax, runtime or logical errors. 3 The student s web page/site is functional and demonstrates a good understanding of the concept(s). The page/site is general well coded, documented and organized. There are no apparent syntax, run time or logical errors. 2 The student s web page/site is fully or partially functional and demonstrates a limited understanding of the concept(s). The page/site is not well coded, documented and organized. There are no apparent syntax, run time or logical errors. 1 The student s web page/site is not functional, does not demonstrate understanding of the concept(s) and/or contains significant errors. SUGGESTED MONITORING SCALE: Use the following or similar scale to monitor or evaluate a student s daily learning and understanding of key concepts: 4 I understand completely and I can teach it to a classmate. 3 I understand the concept but I do not think I can explain it to a classmate. 2 I can complete the task with assistance. 1 I need help! DIFFERENTIATION: The assessment is naturally differentiated since it allows students the freedom to express themselves individually and in their design. TECHNOLOGY: Students are to test their Website using multiple web browsers and sources. It is recommended that students at least test their design using the Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and Apple s Safari (on the ipad) web browsers. Students are to use the HTML Quick Guide App on their ipad as reference during the design process. Students are to use Adobe Dreamweaver or NotePad to edit their HTML documents. Students are to use W3Schools website for tutorials and practice examples. Students will post their final web design to the class web server. OTHER SUGGESTED PERFORMANCE TASKS: GET: Use $_GET to dictate the look and feel of a webpage. E Mail Validation: Create a form that properly validates an e mail address. Stage Three: Learning Plan Summary of Key Learning Events and Instruction SUGGESTED LEARNING EVENTS: Students should read through the PHP Forms Lessons, Examples and Exercises at Show students multiple web pages that utilize PHP Forms and break down the PHP Forms of each page. Written assessment of PHP Forms. 32

33 SUGGESTED METHODS OF DIFFERENTIATION: Students should be presented with organized and structured content as well as an overview of best practices for designing web pages/sites. However, students should ultimately have the freedom to design their pages as they see appropriate. No two student pages should be identical. Emphasis should be placed on the uniformity and functionality of their pages. This should be consistent throughout the course. 33