SD1340 Creating Websites Using HTML5, CSS3 and JavaScript Syllabus

Transcription

1 SD1340 Creating Websites Using HTML5, CSS3 and JavaScript Syllabus Credit hours: 4.5 Contact/Instructional hours: 56 (34 Theory, 22 Lab) Prerequisite: SD1240 Creating Websites Using HTML and CSS or equivalent

2 Syllabus COURSE SUMMARY COURSE DESCRIPTION This course introduces techniques used in building interactive Websites for mobile and desktop devices, using technologies such as HTML5, CSS3 and JavaScript. MAJOR INSTRUCTIONAL AREAS 1. HTML5 2. CSS3 3. JavaScript 4. jquery Framework 5. jquery Mobile Framework 6. Mobile Device Website Development COURSE LEARNING OBJECTIVES By the end of this course, you should be able to: 1. Describe various components of the Open Web Platform. 2. Create a website using HTML5. 3. Create a website that is optimized for viewing on a mobile device. 4. Apply style to a website using CSS. 5. Describe the use of scripting when creating a website. 6. Create a dynamic website using JavaScript. 7. Create a website that uses the jquery framework. 8. Create a mobile website that uses the jquery Mobile framework. All Rights Reserved. [2] 10/14/2014

3 Syllabus COURSE OUTLINE MODULE 1: USING HTML5 COURSE LEARNING OBJECTIVES COVERED Describe various components of the Open Web Platform. Create a website using HTML5. Create a website that is optimized for viewing on a mobile device. TOPICS COVERED Introduction to HTML5 Using the Open Web Standards Creating Websites and Mobile Applications Using HTML5 Creating Websites Compatible for Viewing on Mobile Devices Correlating HTML, CSS, and JavaScript Testing Websites Using Web Browsers and Mobile Devices MODULE LEARNING ACTIVITIES GRADED OUT-OF- CLASS TIME Reading: Kyrnin, Meloni, & Dutson, Chapters 1 and 2. No 4 hr Lesson: Study the lesson for this module. No 2 hr Discussion: Participate in the discussion titled Building a Mobile-Friendly Website. Yes 1.5 hr Lab: Complete the lab titled Creating a Web Page Using HTML5. Yes N/A Project: Read and begin the project. No 1 hr Total Out-Of-Class Activities: 8.5 Hours All Rights Reserved. [3] 10/14/2014

4 Syllabus MODULE 2: USING CSS COURSE LEARNING OBJECTIVES COVERED Create a website that is optimized for viewing on a mobile device. Apply style to a website using CSS. TOPICS COVERED Using the CSS Box Model on Lists, Text, and Navigation Positioning Using CSS Creating Fixed, Liquid, and Hybrid Layouts MODULE LEARNING ACTIVITIES GRADED OUT-OF- CLASS TIME Reading: Kyrnin, Meloni, & Dutson, Chapters 3, 4, 5, and 6. No 8 hr Lesson: Study the lesson for this module. No 2.5 hr Quiz: Prepare for Quiz 1. No 2 hr Exercise: Submit the exercise titled Role of CSS3 in Mobile Web Development. Yes 3 hr Lab 1: Complete the lab titled Format a Web Page Using CSS. Yes N/A Lab 2: Complete the lab titled Compare Fixed, Liquid, and Hybrid Layouts. Yes N/A Quiz: Take Quiz 1. Yes N/A Project: Continue work on Project Part 1. No 3 hr Total Out-Of-Class Activities: 18.5 Hours All Rights Reserved. [4] 10/14/2014

5 Syllabus MODULE 3: WRITING JAVASCRIPT CODE COURSE LEARNING OBJECTIVES COVERED Describe various components of the Open Web Platform. Create a website using HTML5. Apply style to a website using CSS. Describe the use of scripting when creating a website. Create a dynamic website using JavaScript. TOPICS COVERED Including JavaScript in HTML Working with DOM and DOM Structure Creating Positionable Elements (Layers) Using JavaScript Functions and Objects Controlling Flow with Conditions and Loops MODULE LEARNING ACTIVITIES GRADED OUT-OF- CLASS TIME Reading: Kyrnin, Meloni, & Dutson, Chapters 7, 8, 9, 10, and 11. No 10 hr Lesson: Study the lesson for this module. No 2.5 hr Discussion: Participate in the discussion titled Conditional and Loop Statements. Yes N/A Exercise: Submit the exercise titled Design a JavaScript Program. Yes 3 hr Lab: Complete the lab titled Writing and Testing JavaScript on Web Pages. Yes N/A Project: Submit Project Part 1. Yes 4 hr Total Out-Of-Class Activities: 19.5 Hours All Rights Reserved. [5] 10/14/2014

6 Syllabus MODULE 4: DESIGNING MOBILE WEBSITES COURSE LEARNING OBJECTIVES COVERED Create a website that is optimized for viewing on a mobile device. Describe the use of scripting when creating a website. Create a dynamic website using JavaScript. TOPICS COVERED Creating Event Handlers in Applications Using JavaScript Identifying the Appropriate HTML5 Elements for a Browser Identifying Android and ios Support for HTML5 Identifying Browsers That Support HTML5 Building a Mobile Application Using HTML5 Identifying the Appropriate Tools to Test Mobile Applications MODULE LEARNING ACTIVITIES GRADED OUT-OF- CLASS TIME Reading: Kyrnin, Meloni, & Dutson, Chapters 12, 13, 14, and 15. No 8 hr Lesson: Study the lesson for this module. No 2 hr Quiz: Prepare for Quiz 2. No 2 hr Discussion: Participate in the discussion titled Designing a Mobile Website. Yes 1 hr Exercise: Submit the exercise titled Research DOM Level 3 Versus DOM Level 2 Events. Yes 2 hr Lab: Complete the lab titled Program and Test Web Pages. Yes N/A Quiz: Take Quiz 2. Yes N/A Project: Continue work on Project Part 2. No 3 hr Total Out-Of-Class Activities: 18 Hours All Rights Reserved. [6] 10/14/2014

7 Syllabus MODULE 5: USING HTML FORMS, THE <CANVAS> ELEMENT, AND JQUERY COURSE LEARNING OBJECTIVES COVERED Create a website using HTML5. Create a website that uses the jquery framework. Create a mobile website that uses the jquery Mobile framework. TOPICS COVERED Using the <canvas> Element Identifying Mobile Devices That Support the <canvas> Element Comparing the Features of <canvas> Elements with Flash and SVG Creating HTML Forms Including jquery in a Website Using the jquery Mobile Framework MODULE LEARNING ACTIVITIES GRADED OUT-OF- CLASS TIME Reading: Kyrnin, Meloni, & Dutson, Chapters 16, 17, 20, and 21. No 8 hr Lesson: Study the lesson for this module. No 2 hr Quiz: Prepare for Quiz 3. No 2 hr Discussion: Participate in the discussion titled HTML5 <canvas> Elements Versus Traditional JavaScript Programming. Yes 1 hr Exercise: Submit the exercise titled Using Canvas, Form Elements, and jquery. Yes 2.5 hr Lab: Complete the lab titled Program and Test Web Pages. Yes N/A Quiz: Take Quiz 3. Yes N/A Project: Continue work on Project Part 2. No 4 hr Total Out-Of-Class Activities: 19.5 Hours All Rights Reserved. [7] 10/14/2014

8 Syllabus MODULE 6: LINKS AND GEOLOCATION COURSE LEARNING OBJECTIVES COVERED Create a website using HTML5. Create a website that is optimized for viewing on a mobile device. Describe the use of scripting when creating a website. Create a dynamic website using JavaScript. Create a website that uses the jquery framework. Create a mobile website that uses the jquery Mobile framework. TOPICS COVERED Editing Hyperlinks Using <a> and <area> Elements Linking Elements on Web Pages and Adding Empty Links Detecting Location Data with the Geolocation API Handling Privacy Concerns with Geolocation MODULE LEARNING ACTIVITIES GRADED OUT-OF- CLASS TIME Reading: Kyrnin, Meloni, & Dutson, Chapters 18 and 19. No 4 hr Lesson: Study the lesson for this module. No 2 hr Exercise: Submit the exercise titled Map API Services. Yes 2 hr Lab: Complete the lab titled Create a Web Page Using HTML5 Link Types and Geolocation API. Yes N/A Project: Submit Project Part 2. Yes 3 hr Total Out-Of-Class Activities: 11 Hours All Rights Reserved. [8] 10/14/2014

9 Syllabus EVALUATION AND GRADING EVALUATION CRITERIA The graded assignments will be evaluated using the following weighted categories: CATEGORY WEIGHT Discussion 15% Exercise 15% Lab 30% Project 25% Quiz 15% TOTAL 100% GRADE CONVERSION The final grades will be calculated from the percentages earned in the course, as follows: GRADE PERCENTAGE A (4.0) % B+ (3.5) 85 89% B (3.0) 80 84% C+ (2.5) 75 79% C (2.0) 70 74% D+ (1.5) 65 69% D (1.0) 60 64% F (0.0) <60% All Rights Reserved. [9] 10/14/2014

10 Syllabus LEARNING MATERIALS AND REFERENCES REQUIRED RESOURCES COMPLETE TEXTBOOK PACKAGE Kyrnin, J., Meloni, J. C., & Dutson, P. (2013). Creating websites using HTML5, CSS3, and Javascript (Custom ed.). Boston, MA: Pearson Custom. Reese, R., & Lai, D. (2013). Creating websites using HTML5, CSS3 and Javascript: Student lab manual (Custom ed.). Boston, MA: Pearson Custom. OTHER ITEMS ITT-Lab (Android) virtual machine Update the virtual machine to include: o HTML-Kit version 292 ( o The jquery framework jquery min.js ( o The jquery Mobile framework jquery.mobile min.js and jquery.mobile min.css ( VMware Player 5.01 (or later) RECOMMENDED RESOURCES Books and Professional Journals o Smashing Magazine ( o Speckyboy Design Magazine ( o Spyrestudios ( Professional Associations o HTML Writers Guild ( o International Webmasters Association (IWA) ( o Web Professionals ( All Rights Reserved. [10] 10/14/2014

11 Syllabus ITT Tech Virtual Library (accessed via Student Portal o Basic Search> Castledine, E., Eftos, M., & Wheeler, M. (2011). Build mobile websites and apps for smart devices. Australia: SitePoint Pty. Ltd. Castledine, E., & Sharkie, C. (2012). jquery: Novice to ninja (2nd ed.). Australia: SitePoint Pty. Ltd. Franklin, J. (2013). Beginning jquery. New York, NY: Apress. Freeman, A. (2011). The definitive guide to HTML5. Apress. Goodman, D., Morrison, M., Novitski, P., & Rayl, T.G. (2010). JavaScript bible, seventh edition. Indianapolis, IN: Wiley Publishing, Inc. Harrel, W. (2011). HTML, CSS, and JavaScript mobile development for dummies. Hoboken, NJ: John Wiley & Sons, Inc. Jenkins, S. (2009). Web design all-in-one for dummies. Hoboken, NJ: Wiley Publishing, Inc. Meyer, E. (2011). Smashing CSS: Professional techniques for modern layout. John Wiley & Sons. Sikos, L. (2011). Web standards: Mastering HTML5, CSS3, and XML. New York, NY: Apress. Wagner, R. (2012). Beginning ios application development with HTML and JavaScript. Indianapolis, IN: John Wiley & Sons, Inc. Zakas, N.C. (2009). Professional JavaScript for web developers (2nd ed.). Indianapolis, IN: Wiley Publishing, Inc. All Rights Reserved. [11] 10/14/2014

12 Syllabus INSTRUCTIONAL METHODS AND TEACHING STRATEGIES The curriculum employs a variety of instructional methods that support the course objectives while fostering higher cognitive skills. These methods are designed to encourage and engage you in the learning process in order to maximize learning opportunities. The instructional methods include but are not limited to lectures, collaborative learning options, use of technology, and hands-on activities. To implement the above-mentioned instructional methods, this course uses several teaching strategies, such as lessons and hands on labs. Your progress will be regularly assessed through a variety of assessment tools including discussions, exercises, labs, quizzes, and project. OUT-OF-CLASS WORK For purposes of defining an academic credit hour for Title IV funding purposes, ITT Technical Institute considers a quarter credit hour to be the equivalent of: (a) at least 10 clock hours of classroom activities and at least 20 clock hours of outside preparation; (b) at least 20 clock hours of laboratory activities; or (c) at least 30 clock hours of externship, practicum or clinical activities. ITT Technical Institute utilizes a time-based option for establishing out-of-class activities, which would equate to two hours of out-ofclass activities for every one hour of classroom time. The procedure for determining credit hours for Title IV funding purposes is to divide the total number of classroom, laboratory, externship, practicum and clinical hours by the conversion ratios specified above. A clock hour is 50 minutes. A credit hour is an artificial measurement of the amount of learning that can occur in a program course based on a specified amount of time spent on class activities and student preparation during the program course. In conformity with commonly accepted practice in higher education, ITT Technical Institute has institutionally established and determined that credit hours awarded for coursework in this program course (including out-of-class assignments and learning activities described in the Course Outline section of this syllabus) are in accordance with the time-based option for awarding academic credit described in the immediately preceding paragraph. All Rights Reserved. [12] 10/14/2014

13 Syllabus ACADEMIC INTEGRITY All students must comply with the policies that regulate all forms of academic dishonesty or academic misconduct. For more information on the academic honesty policies, refer to the Student Handbook and the School Catalog. INSTRUCTOR DETAILS Instructor Name Office Hours Contact Details (End of Syllabus) All Rights Reserved. [13] 10/14/2014

14 SD1340 Creating Websites Using HTML5, CSS3 and JavaScript

15 DISCUSSION 1.1 (2.0 HOURS) Title: Building a Mobile-Friendly Website In this discussion, you will focus on the best practices for building a mobile-friendly website. Discuss the following: What are the main considerations you should keep in mind while developing mobile websites? How does HTML5 help in designing websites for mobile viewing? Participation Requirements: Respond to at least two of your classmates. When responding: Provide complete, well-thought-out responses. Ask questions, share experiences, challenge ideas, and help your peers expand their responses. Note: One-sentence answers will not be sufficient. Remember that a discussion is an opportunity to interact with your fellow classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates. Evaluation Criteria: The Discussion rubric will be used to evaluate this assessment. All Rights Reserved. [15] 10/14/2014

16 LAB 1.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 1 and 2 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings will help you understand the basics of HTML5 and its role in building websites for desktops and mobile devices. Review the lesson for this module that explains the role of HTML5 in creating web pages. Title: Creating a Web Page Using HTML5 In this lab, you will configure the ITT-Lab virtual machine and create a web page using HTML5. Complete the following tasks: Task 1: Configure ITT-Lab Complete Lab 1-1: Configure ITT-Lab from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual. Task 2: Create a Web Page Using HTML5 Complete Lab 1-2: Create a Web Page Using HTML5 from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual. Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the one-page Microsoft Word document with your answers and the web page that you created in a folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [16] 10/14/2014

17 READ AND BEGIN PROJECT (1.0 HOUR) Refer to Project: Building Desktop and Mobile Versions of a Website for a detailed description of the project. All Rights Reserved. [17] 10/14/2014

18 EXERCISE 2.1 (3.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 3, 4, 5, and 6 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These chapters explain the significant role of CSS3 in mobile web development. Go through the module s lesson that discusses how CSS helps in designing and structuring web content for desktop and mobile. Title: Role of CSS3 in Mobile Web Development In this exercise, you will submit answers for the following questions: Explain the differences between CSS and CSS3. Describe at least three new features of CSS3 and give examples. Describe one advantage of using CSS3 for mobile web development. Submission Requirements: Submit your answers in a Microsoft Word document. Include a references page citing the resources you used from the textbook, ITT Tech Virtual Library, and credible websites to substantiate your answers. All citations should be in the APA format. Refer to ITT Tech Virtual Library>School of Study>General Education Information>Recommended links>grammar, Writing, and Style>APA Formatting and Style Guide for help in APA formatting. Your report should be one to two pages long. Evaluation Criteria: The Exercise rubric will be used to evaluate this assessment. All Rights Reserved. [18] 10/14/2014

19 LAB 2.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 3 and 4 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings will help you understand how CSS helps in designing and structuring a web page. Review the lesson for this module that explains the role of CSS in formatting a web page. Title: Format a Web Page Using CSS In this lab, you will format a web page using CSS styling, CSS box model, and CSS positioning. Complete the following tasks: Task 1: Format a Web Page Using CSS Styling Complete Lab 2-1: Format a Web Page Using CSS Styling from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual. Task 2: Format a Web Page Using CSS Box Model Complete Lab 2-2: Format a Web Page Using CSS Box Model from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual. Task 3: Format a Web Page Using CSS Positioning Complete Lab 2-3: Format a Web Page Using CSS Positioning from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual. Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the Microsoft Word document, the web pages you have formatted using CSS, and the graphics files referenced by the web pages in a folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [19] 10/14/2014

20 LAB 2.2 (1.0 HOUR) Assessment Preparation Checklist: To prepare for this assessment: Read Chapter 5 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. This reading will describe the characteristics of the different types of layouts and how to use them. Review the lesson for this module that explains the different types of layouts with the help of examples. Title: Compare Fixed, Liquid, and Hybrid Layouts In this lab, you will create an HTML page and define CSS styles to apply fixed, liquid, and hybrid layouts to the page. Complete Lab 3-1: Compare Fixed, Liquid, and Hybrid Layouts from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual. Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the one-page Microsoft Word document, the.htm starter file, the graphics, and the.css file in the same folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [20] 10/14/2014

21 QUIZ 1 (1.0 HOUR) Assessment Preparation Checklist: To prepare for the quiz, revisit the assigned readings for Module 1 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. Title: Quiz 1 Take the quiz based on the concepts covered in Module 1. All Rights Reserved. [21] 10/14/2014

22 DISCUSSION 3.1 (3.5 HOURS) Title: Conditional and Loop Statements In this discussion, you will choose one conditional statement and one loop statement. Describe a situation in which each is appropriate and show how you would write the JavaScript statement to meet the requirement. Participation Requirements: Respond to at least two of your classmates. When responding: Provide complete, well-thought-out responses. Ask questions, share experiences, challenge ideas, and help your peers expand their responses. Note: One-sentence answers will not be sufficient. Remember that a discussion is an opportunity to interact with your fellow classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates. Evaluation Criteria: The Discussion rubric will be used to evaluate this assessment. All Rights Reserved. [22] 10/14/2014

23 EXERCISE 3.1 (3.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 7, 8, 9, 10, and 11 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings will help you understand the procedure to add JavaScript code to web pages. Go through the module s lesson that focuses on event listing. Title: Design a JavaScript Program Read the following programming problem: You are designing a program that allows users to create an event listing. The event listing should include the date, time, location, title, and description of the event. The location should be between 10 and 100 characters long. The title should be between 1 and 50 characters long. The description should be between 10 and 200 characters long. It should include a method that displays the date, time, location, title, description, and a list of attendees. Make sure to document the code using comments. Complete the following tasks: Read the programming problem and create a UML diagram for a custom object and flowcharts for the method and for the script you will place in the body section. Write the JavaScript code to implement the object and methods. Create an HTML form that prompts the user for information and displays the results. Submission Requirements: Save the following in a folder: o A Visio file with a UML diagram and two flowcharts (or you can submit three separate Visio files). o A.js file that implements the object and methods. o An.html file that prompts the user for information and displays the results. Compress the folder using the default compression utility. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. Submit the compressed folder to your instructor. All Rights Reserved. [23] 10/14/2014

24 Evaluation Criteria: This assessment will be evaluated against the following criteria: Did the UML document accurately describe all objects? Did a flowchart accurately describe the flow of logic for creating the event, including input validation? Did a flowchart accurately describe the flow of logic for displaying event information? Did the JavaScript code produce the expected results? Did the HTML file prompt for input and display the results? Did both HTML and JavaScript files contain the appropriate documentation? All Rights Reserved. [24] 10/14/2014

25 LAB 3.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 6, 7, 8, 9, 10, and 11 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings will help you understand the procedure to add JavaScript code to web pages. Review the lesson for this module that explains how to apply JavaScript code and validate data on a web page. Title: Writing and Testing JavaScript on Web Pages In this lab, you will firstly add JavaScript code to a web page and then test JavaScript code on a web page. Next, you will add forms and write JavaScript code that performs data validation. Complete the following tasks: Task 1: Add JavaScript to a Web Page Complete the following labs from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual: Lab 3-2: Add JavaScript to a Web Page Lab 4-1: Program a Web Page Using JavaScript Lab 4-2: Program a Web Page with HTML Document Object Model (DOM) Task 2: Add Forms and Data Validation to a Web Page Complete Lab 5-1: Add Forms and Data Validation to a Web Page from Creating Websites Using HTML5, CSS3, and Javascript Lab Manual. Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the one-page Microsoft Word document and the web pages that you created in a folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. All Rights Reserved. [25] 10/14/2014

26 Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [26] 10/14/2014

27 PROJECT PART 1 (7.0 HOURS) Title: Creating a Hobbies Website Submit Project Part 1 in this module. Refer to Project: Building Desktop and Mobile Versions of a Website for a detailed description of the project. All Rights Reserved. [27] 10/14/2014

28 DISCUSSION 4.1 (3.5 HOURS) Title: Designing a Mobile Website Compare the ITT Tech website design on a desktop browser and a mobile emulator and discuss the following: Do you think the mobile version is effective and easy to use? List two best practices or design patterns used on the mobile site. How would you improve the design of the mobile site? Make at least two recommendations to improve the design of the mobile site. Participation Requirements: Respond to at least two of your classmates. When responding: Provide complete, well-thought-out responses. Ask questions, share experiences, challenge ideas, and help your peers expand their responses. Note: One-sentence answers will not be sufficient. Remember that a discussion is an opportunity to interact with your fellow classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates. Evaluation Criteria: The Discussion rubric will be used to evaluate this assessment. All Rights Reserved. [28] 10/14/2014

29 EXERCISE 4.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapter 12 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. This chapter focuses on the events you can program to create a web page that responds to user interactions. Go through the module s lesson that explains the various events supported by JavaScript. Title: Research DOM Level 3 Versus DOM Level 2 Events Study the DOM Level 3 events and DOM Level 2 events specifications. Write a paper describing the specification differences and browser supports between DOM Level 3 events and DOM Level 2 events. The paper should include a table of at least ten differences of DOM Level 3 events and DOM Level 2 events. Submission Requirements: Submit your response in a Microsoft Word document of the following specifications: o Font: Arial; Point-12 o Line Spacing: Double o Length: 1 2 pages o Cite any sources used in APA format. Evaluation Criteria: The Exercise rubric will be used to evaluate this assessment. All Rights Reserved. [29] 10/14/2014

30 LAB 4.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 12, 13, 14, and 15 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings help you understand how to write JavaScript code that responds to user-initiated events. They also explain how to create a website that works on various devices. Review the lesson for this module that explains how to create and test a website that supports multiple devices. Title: Program and Test Web Pages In this lab, you will program a web page using HTML events and display HTML5 web pages on different mobile devices. Next, you will create a web page that uses progressive enhancement and test it using validators and emulators. Complete the following tasks: Task 1: Program a Web Page Using HTML Complete the following labs from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual: Lab 6-1: Program a Web Page Using HTML Events Lab 6-2: Display HTML5 Web Pages on Different Mobile Devices Task 2: Using Progressive Enhancement and Testing the Web Page Complete the following labs from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual: Lab 7-1: Create a Web Page that Uses Progressive Enhancement Lab 7-2: Test a Web Page Using Validators and Emulators Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the one-page Microsoft Word document and the web pages that you created in a folder. 2. Compress the folder using the default compression utility. All Rights Reserved. [30] 10/14/2014

31 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [31] 10/14/2014

32 QUIZ 2 (1.0 HOUR) Assessment Preparation Checklist: To prepare for the quiz, revisit the assigned readings for Modules 2 and 3 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. Title: Quiz 2 Take the quiz based on the concepts covered in Modules 2 and 3. All Rights Reserved. [32] 10/14/2014

33 DISCUSSION 5.1 (3.0 HOURS) Title: HTML5 <canvas> Elements Versus Traditional JavaScript Programming Discuss the differences between using HTML5 <canvas> elements versus the traditional JavaScript programming and Flash for dynamic web development. Are there any benefits of one over the other? Support with at least two examples. Participation Requirements: Respond to at least two of your classmates. When responding: Provide complete, well-thought-out responses. Ask questions, share experiences, challenge ideas, and help your peers expand their responses. Note: One-sentence answers will not be sufficient. Remember that a discussion is an opportunity to interact with your fellow classmates. Observe discussion etiquette: Be respectful, kind, and nonjudgmental of your classmates. Evaluation Criteria: The Discussion rubric will be used to evaluate this assessment. All Rights Reserved. [33] 10/14/2014

34 EXERCISE 5.1 (2.5 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapter 17 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. This reading focuses on input validation. Go through the module s lesson that explains the importance of input validation and the various ways in which it can be performed. Title: Using Canvas, Form Elements, and jquery Use Google or any search engine to research the differences between client-side form validation, for example by JavaScript or jquery, and server-side form validation, such as by PHP or ASP.NET. Answer the following questions based on your research: Describe five pros and five cons for each type of form validation. Describe the type of form validation that is more significant for Web development. Explain why. Submission Requirements: Submit your response in a Microsoft Word document of the following specifications: Font: Arial; Point-12 Line Spacing: Double Length: 1 2 pages Cite any sources used in the APA format. Evaluation Criteria: The Exercise rubric will be used to evaluate this assessment. All Rights Reserved. [34] 10/14/2014

35 LAB 5.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 16, 17, 20, and 21 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings cover HTML5 forms, the <canvas> element, and jquery. Review the lesson for this module that explains how to use HTML5 form elements, the <canvas> element, and how to perform operations using jquery. Title: Program and Test Web Pages In this lab, create and test an HTML5 web page that uses the <canvas> element and HTML5 form elements. Next, you will create and test an HTML5 web page that uses the jquery framework. You will also create and test a mobile web page that uses jquery Mobile. Complete the following tasks: Task 1: Using the <canvas> element and HTML form elements Complete the following labs from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual: Lab 8-1: Program a Web Page that Uses the <canvas> Element Lab 8-2: Program a Web Page Using the HTML5 Form Elements Task 2: Using jquery framework and jquery Mobile Complete the following labs from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual: Lab 9-1: Program a Web Page Using the jquery Framework Lab 9-2: Program a Mobile Web Page Using jquery Mobile Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the one-page Microsoft Word document and all files required to run the web pages that you created in a folder. Remember to include the jquery framework files. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. All Rights Reserved. [35] 10/14/2014

36 4. Submit the compressed folder to your instructor. Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [36] 10/14/2014

37 QUIZ 3 (1.0 HOUR) Assessment Preparation Checklist: To prepare for the quiz, revisit the assigned readings for Module 4 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. Title: Quiz 3 Take the quiz based on the concepts covered in Module 4. All Rights Reserved. [37] 10/14/2014

38 EXERCISE 6.1 (2.5 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapter 19 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. This reading focuses on geolocation and available map API services. Go through the module s lesson that explains geolocation. Title: Map API Services Choose two map API services. Research the services on the Internet and write a one-page paper that describes the services. Your paper should include the information about cost, performance, ease of use, and features. Based on your research, which map API would you choose for your own development? Why? Submission Requirements: Submit your response in a Microsoft Word document of the following specifications: Font: Arial; Point-12 Line Spacing: Double Length: 1 2 pages Cite any sources used in the APA format. Evaluation Criteria: The Exercise rubric will be used to evaluate this assessment. All Rights Reserved. [38] 10/14/2014

39 LAB 6.1 (2.0 HOURS) Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 18 and 19 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. These readings discuss geolocation services and the HTML5 link types. Review the lesson for this module that explains the geolocation services and the HTML5 link types. Title: Create a Web Page using HTML5 Link Types and Geolocation API In this lab, you will create and test a web page that uses the HTML5 link types and the Bing Maps API. Complete the following labs from Creating Websites Using HTML5, CSS3 and Javascript: Student Lab Manual: Lab 10-1: Create a Web Page that HTML5 Link Types Lab 10-2: Create a Web Page that Uses the Geolocation API Submission Requirements: Follow the given steps to submit the lab assessment: 1. Save the one-page Microsoft Word document and all files necessary to display the web pages that you created in a folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria: The Lab rubric will be used to evaluate this assessment. All Rights Reserved. [39] 10/14/2014

40 PROJECT PART 2 (7.0 HOURS) Title: Creating Desktop and Mobile Versions of the Website Submit Project Part 2 in this module. Refer to Project: Building Desktop and Mobile Versions of a Website for a detailed description of the project. All Rights Reserved. [40] 10/14/2014

41 PROJECT: BUILDING DESKTOP AND MOBILE VERSIONS OF A WEBSITE Project Introduction: In this project, you will create a website for desktop and mobile devices. The subject of your website can be one of your hobbies and interest. Part 1 of the project needs to be submitted in Module 3 and Part 2 in Module 6. Course Learning Objectives Covered: Describe various components of the Open Web Platform. Create a website using HTML5. Create a website that is optimized for viewing on a mobile device. Apply style to a website using CSS. Describe the use of scripting when creating a website. Create a dynamic website using JavaScript. Create a website that uses the jquery framework. Create a mobile website that uses the jquery Mobile framework. PROJECT SUBMISSION PLAN Project Part Project Part 1 Description/Requirements of Project Part Assessment Preparation Checklist: To prepare for this assessment: Read Chapters 1 11 from your textbook, Creating Websites Using HTML5, CSS3, and Javascript. Review the lesson for Module 3 that provides some tips to test the website. Evaluation Criteria The Project rubric will be used to evaluate this assessment. All Rights Reserved. [41] 10/14/2014

42 Project Part Description/Requirements of Project Part Title: Creating a Hobbies Website In this part of the project, you will create a home page and a registration page for a website about one of your hobbies. Perform the following tasks: 1. Choose the focus of your website and build a home page using HTML5 semantic elements. At minimum, the home page should include: Three <section> blocks An article A picture with a caption A navigation section with links to sites about your hobby Headers to identify each section 2. Use the CSS styles to apply color and borders to your page. 3. The home page should include the following features: A centered background image Hint: use the properties of background-repeat and background-position An image icon set as the list-item marker Hint: use a property of list-style-image Standardized color to link/visited/unvisited/hover links Hint: use the properties of the <a> tag to set link, visited, hover, and active A paragraph of text with a total width of 300px Hint: use the property of the <div> tag to set the width, padding, border, and margin Evaluation Criteria All Rights Reserved. [42] 10/14/2014

43 Project Part Description/Requirements of Project Part 4. Create an external style sheet that formats the home page as a hybrid layout that has the following elements: A header A footer A left column that has a fixed layout A right column that has a fixed layout A center column that has a liquid layout 5. Create a registration form to collect member information. The registration should include at least the following required form fields: The required form fields: o Username o Password o address o An option to display the contact information to the public o An option to receive updates from the website o A <textarea> to describe the new member Display the current date in the format of October 24, Create another button. When the user clicks on it, a pop-up window will display more contact information for new members. 6. Add validation logic to the registration page of the website. The registration page should be implemented as a form and should provide appropriate data validation. At minimum, the following data should be Evaluation Criteria All Rights Reserved. [43] 10/14/2014

44 Project Part Description/Requirements of Project Part collected and validated: An address (required and must contain A password (must be at least 8 characters long and contain at least one alphabetic character and at least one numeric character) A first name (required) A last name (required) An age (Required and must be a numeric value between 14 and 110) Note: If validation is successful, the registration information should be written to the page. Submission Requirements: Follow the given steps to submit the assessment: 1. Save the one-page Microsoft Word document containing all the required screenshots, an html file for the home page, an html file for the registration page, and a.css file for the external style sheet in a folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria Project Part 2 Due: Module 3 Grading Weight: 12.5% Assessment Preparation Checklist: To prepare for this assessment: Read Chapters and from your textbook, The Project rubric will be used to evaluate this assessment. All Rights Reserved. [44] 10/14/2014

45 Project Part Description/Requirements of Project Part Creating Websites Using HTML5, CSS3, and Javascript. Review the lesson for Module 6 that provides some tips to test the desktop and mobile websites. Title: Creating Desktop and Mobile Versions of the Website In this part of the project, you will complete the registration form. You will also create a mobile version of the website. Complete the following tasks: 1. The registration page should be implemented as a form and should provide the following features and interactions by JavaScript: Create a button that can change the color or image of the background. A reset button: When this button is clicked, all form data will be cleared. When all form data is clear, set the focus back to the first form field. An alert box appears when the user clicks on any required form field. The alert box will give an example of the required data and its format. Create a help icon (something like a question mark icon). When the user rests the mouse on it, some help reference (for instance an example of the required data and its format) will display. When the user moves the mouse off the icon, the help information will be hidden. 2. Test out the website by at least two mobile devices (use the Opera Mobile Emulator) and take screenshots for submission. Evaluation Criteria All Rights Reserved. [45] 10/14/2014

46 Project Part Description/Requirements of Project Part 3. Enhance the home page and the registration page by creating and linking CSS style sheets that format the pages for screen sizes less than 320 pixels wide and screen sizes between 320 and 480 pixels wide. 4. Add script to ensure that HTML5 styles are applied when the page is viewed in IE 8. Create two CSS style sheets for the home page: one for < 320 pixels wide and one for between 320 and 480 pixels wide. Create two CSS style sheets for the registration page: one for < 320 pixels wide and one for between 320 and 480 pixels wide. Add JavaScript code to add the HTML5 elements you use to the DOM for both the pages. Add the necessary media queries and meta tags to the home page and the registration page. 5. Enhance the website with the following features: Create a multicolor title text with a <canvas> tag on the home page to describe the website. Use the datetime either the local type or month type input for any date-related form field on the registration page. Use the required attribute to validate any required field on the registration page. Test out the website using at least two mobile devices (use the emulator of Google Chrome) and take screenshots for submission. Evaluation Criteria All Rights Reserved. [46] 10/14/2014

47 Project Part Description/Requirements of Project Part 6. Add the following jquery and jquery mobile enhancements to the website: Import the jquery JavaScript file jquery min.js and add at least two jquery effects to the website. Test out the jquery effects by two different web browsers and take screenshots for submission. Then import the jquery Mobile JavaScript file jquery.mobile min.js and the jquery Mobile CSS file jquery.mobile min.css to the website. Add at least two jquery Mobile buttons to the website. Test out the website by two different mobile devices (use the Opera Mobile emulator) and take screenshots for submission. 7. Test your final website in desktop and mobile browsers. Submission Requirements: Follow the given steps to submit the assessment: 1. Save the Microsoft Word document containing all the required screen shots, an html file for the home page, an html file for the registration page, a.css file for the desktop style sheet, a.css file for the mobile style sheet, and the jquery libraries for desktop and mobile in a folder. 2. Compress the folder using the default compression utility. 3. To compress the folder, right-click the folder, point to Send to, and click Compressed (zipped) folder. 4. Submit the compressed folder to your instructor. Evaluation Criteria All Rights Reserved. [47] 10/14/2014

48 Project Part Description/Requirements of Project Part Evaluation Criteria Due: Module 6 Grading Weight: 12.5% (End of ) All Rights Reserved. [48] 10/14/2014