Weebly



ITT TECHNICAL INSTITUTESD1340 Creating Websites Using HTML5, CSS and JavaScriptGRADED ASSIGNMENTS Table of Contents TOC \o "1-3" \h \z \u Graded Assignments PAGEREF _Toc364772924 \h 3Unit 1 Assignment 1: Research HTML5 Enhancements PAGEREF _Toc364772925 \h 3Unit 1 Assignment 2: Research Mobile Web Development PAGEREF _Toc364772926 \h 4Unit 2 Assignment 1: Research CSS (Level 1) vs. CSS3 PAGEREF _Toc364772927 \h 5Unit 2 Assignment 2: Research CSS3 for Mobile Web Development PAGEREF _Toc364772928 \h 6Unit 3 Assignment 1: Researching Layouts PAGEREF _Toc364772929 \h 7Unit 4 Assignment 1: Research DOM Level 3 vs. DOM Level 2 PAGEREF _Toc364772930 \h 9Unit 4 Assignment 2: Program the Sorting of a Numeric Array PAGEREF _Toc364772931 \h 10Unit 5 Assignment 1: Design a Program PAGEREF _Toc364772932 \h 11Unit 6 Assignment 1: Research DOM Level 3 Events vs. DOM Level 2 Events PAGEREF _Toc364772933 \h 13Unit 6 Assignment 2: Research the Market Shares for Popular Browsers that Support HTML5 PAGEREF _Toc364772934 \h 14Unit 7 Assignment 1: Analyze Mobile Website Design PAGEREF _Toc364772935 \h 15Unit 8 Assignment 1: Describe the Uses for the <canvas> Element PAGEREF _Toc364772936 \h 17Unit 8 Assignment 2: Research HTML5 Changes to Forms PAGEREF _Toc364772937 \h 18Unit 9 Assignment 1: Research and Compare jQuery with Other Popular JavaScript Frameworks PAGEREF _Toc364772938 \h 20Unit 9 Assignment 2: Research the Differences Between PhoneGap and jQuery Mobile PAGEREF _Toc364772939 \h 21Unit 10 Assignment 1: Research Map APIs PAGEREF _Toc364772940 \h 23Project PAGEREF _Toc364772941 \h 24Project Part 1: Using HTML to Create a Homepage PAGEREF _Toc364772942 \h 24Project Part 2: Applying a Style to the Homepage PAGEREF _Toc364772943 \h 25Project Part 3: Applying a Hybrid Layout to the Homepage PAGEREF _Toc364772944 \h 26Project Part 4: Create a Registration Form to Collect New Member Information PAGEREF _Toc364772945 \h 27Project Part 5: Adding a Registration Form to the Website PAGEREF _Toc364772946 \h 28Project Part 6: Adding HTML Events to the Registration Form PAGEREF _Toc364772947 \h 29Project Part 7: Creating a Mobile Version of the Website PAGEREF _Toc364772948 \h 30Project Part 8: Adding HTML Events to the Registration Form PAGEREF _Toc364772949 \h 31Project Part 9: Adding jQuery and jQuery Mobile to the Website PAGEREF _Toc364772950 \h 32Project Part 10: Test and Finalize Your Website PAGEREF _Toc364772951 \h 33Laboratory Assignments PAGEREF _Toc364772952 \h 34Unit 1 Lab 1-1: Configure ITT-Lab PAGEREF _Toc364772953 \h 34Unit 1 Lab 1-2: Create a Web Page Using HTML5 PAGEREF _Toc364772954 \h 35Unit 2 Lab 2-1: Format a Web Page Using CSS Styling PAGEREF _Toc364772955 \h 36Unit 2 Lab 2-2: Format a Web Page Using CSS Box Model PAGEREF _Toc364772956 \h 37Unit 2 Lab 2-3: Format a Web Page Using CSS Positioning PAGEREF _Toc364772957 \h 38Unit 3 Lab 3-1: Compare Fixed, Liquid, and Hybrid Layouts PAGEREF _Toc364772958 \h 39Unit 3 Lab 3-2: Add JavaScript to a Web Page PAGEREF _Toc364772959 \h 40Unit 4 Lab 4-1: Program a Web Page Using JavaScript PAGEREF _Toc364772960 \h 41Unit 4 Lab 4-2: Program a Web Page with HTML Document Object Model (DOM) PAGEREF _Toc364772961 \h 43Unit 5 Lab 5-1: Add Forms and Data Validation to a Web Page PAGEREF _Toc364772962 \h 44Unit 6 Lab 6-1: Program a Web Page Using HTML Events PAGEREF _Toc364772963 \h 45Unit 6 Lab 6-2: Display HTML5 Web Pages on Different Mobile Devices PAGEREF _Toc364772964 \h 47Unit 7 Lab 7-1: Create a Web Page that Uses Progressive Enhancement PAGEREF _Toc364772965 \h 48Unit 7 Lab 7-2: Test a Web Page Using Validators and Emulators PAGEREF _Toc364772966 \h 49Unit 8 Lab 8-1: Program a Web Page that Uses the <canvas> Element PAGEREF _Toc364772967 \h 50Unit 8 Lab 8-2: Program a Web Page Using the HTML5 Form Elements PAGEREF _Toc364772968 \h 52Unit 9 Lab 9-1: Program a Web Page Using the jQuery Framework PAGEREF _Toc364772969 \h 54Unit 9 Lab 9-2: Display HTML5 Web Pages on Different Mobile Devices PAGEREF _Toc364772970 \h 55Unit 10 Lab 10-1: Create a Web Page that Uses HTML5 Link Types PAGEREF _Toc364772971 \h 56Unit 10 Lab 10-2: Create a Web Page that Uses the Geolocation API PAGEREF _Toc364772972 \h 57Graded AssignmentsUnit 1 Assignment 1: Research HTML5 EnhancementsCourse Objectives and Learning OutcomesCreate a website using HTML5.Structure content on a Web page using HTML5 tags.Assignment RequirementsUse the HTML 5.1 specification and the documents on Web Platform Docs to research three semantic tags. Write a one-page paper explaining how to use those tags. Include a short example of an HTML page that properly uses the three tags.Required ResourcesHTML 5.1 Specification Platform Docs RequirementsSubmit a one-page paper to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should describe how to use three semantic tags.Up to 60 points for this element1.2The essay should give an example of how to use the three tags.Up to 30 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 1 Assignment 2: Research Mobile Web DevelopmentCourse Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website that is optimized for viewing on a mobile device.Describe the Open Web Platform.Describe considerations related to developing mobile websites.Describe the benefits HTML5 provides for developing mobile websites.Assignment RequirementsUse the provided link to research best practices for mobile web development. Create a PowerPoint presentation at least 10 slides long that could be used to educate web developers in how to build a website that is both mobile-friendly and accessible. Cite sources using APA format.Required ResourcesMobile Web Platform Docs RequirementsSubmit the final PowerPoint presentation to your instructor.Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The PowerPoint presentation should identify similarities between mobile-friendly and accessible websites.Up to 20 points for this element1.2The PowerPoint presentations should accurately describe seven best practices for building a mobile-friendly website.Up to 70 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 2 Assignment 1: Research CSS (Level 1) vs. CSS3Course Objectives and Learning OutcomesApply style to a website using CSS.Position elements using the CSS box model.Manage element stacking using the z-index property.Manage the flow of text using CSS.Apply styles to lists.Create an image map using CSS.Create navigation lists using CSS.Assignment RequirementsStudy the CSS (Level 1) and CSS3 specifications. Write a one-page paper describing the differences between CSS and CSS3. Include a table of 10 differences of CSS and CSS3 in your paper.Required ResourcesCSS and CSS3 Specification Cascading Style Sheets Wiki RequirementsSubmit a one-page paper with the table to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should describe the differences between CSS and CSS3.Up to 60 points for this element1.2The essay should give 10 differences between CSS and CSS3.Up to 30 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 2 Assignment 2: Research CSS3 for Mobile Web DevelopmentCourse Objectives and Learning OutcomesApply style to a website using CSS.Position elements using the CSS box model.Manage element stacking using the z-index property.Manage the flow of text using CSS.Apply styles to lists.Create an image map using CSS.Create navigation lists using CSS.Assignment RequirementsUse Google to research the advantages and disadvantages of using CSS3 for mobile Web development. Write a one-page paper listing eight advantages and two disadvantages of using CSS3.Required ResourcesGoogle Submission RequirementsSubmit a one-page paper to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should describe the advantages and disadvantages of using CSS3 for mobile Web development.Up to 60 points for this element1.2The essay should give eight advantages and two disadvantages of using CSS3.Up to 30 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 3 Assignment 1: Researching LayoutsCourse Objectives and Learning OutcomesApply style to a website using CSS.Create a fixed-layout Web page using CSS.Create a liquid-layout Web page using CSS.Create a hybrid Web page using CSS.Assignment RequirementsVisit the CSS Zen Garden website. Try all the styles and see how they respond to resizing a browser window. Choose one of the styles and download the HTML and CSS. Write a paper that discusses the following:What features did you particularly like about the style?How suitable do you think the style would be for supporting a mobile device? Why?What features would you change about the style?Would you categorize the style as fixed, fluid, or hybrid?What CSS techniques were used to create the style?Required ResourcesCSS Zen Garden RequirementsSubmit a one-page paper with a table to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should list features the student liked about the style. Up to 10 points for this element1.2The essay should discuss how appropriate the style would be for a mobile device.Up to 10 points for this element1.3The essay should identify at least one thing the student would change about the style.Up to 10 points for this element1.4The style should be categorized as fixed, fluid, or hybrid.Up to 10 points for this element1.5The CSS techniques that were used to create the style should be explained.Up to 50 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 4 Assignment 1: Research DOM Level 3 vs. DOM Level 2Course Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe the structure of the Document Object Model (DOM).Write JavaScript code that manipulates the DOM.Assignment RequirementsStudy the DOM Level 1, Level 2, and Level 3 specifications. Write a one-page paper describing the specification differences and browser supports among DOM Level 1, Level 2, and Level 3. Include a table of five differences of DOM Level 3, Level 2, and Level 3 in your paper.Required ResourcesW3C DOM Specification W3C DOM Technical Reports Submission RequirementsSubmit a one-page paper with a table to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should describe browser support for DOM Level 1, Level 2, and Level 3.Up to 40 points for this element1.2The essay should give five differences between DOM Level 1, Level 2, and Level 3.Up to 50 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 4 Assignment 2: Program the Sorting of a Numeric ArrayCourse Objectives and Learning OutcomesCreate a dynamic website using JavaScript.Create and use JavaScript variables.Assignment RequirementsUse the code examples of sorting a numeric array on pp. 340-342. Create a JavaScript program to demonstrate how to sort a numeric array.Required ResourcesCode examples on pp. 340-342 of your textbookHTML-Kit Submission RequirementsSubmit a one-page paper with a table to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The JavaScript program should have the following features:The user enters at least two numbers in a textbox.The Web page will display the correct sorted order of numeric array.Up to 60 points for this element1.2Students should run the program with three different sets of input and take a snapshot of all the output along with the source code. Up to 30 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 5 Assignment 1: Design a ProgramCourse Objectives and Learning OutcomesCreate a dynamic website using JavaScript.Create a JavaScript function.Create custom objects.Use and extend built-in objects.Write code that uses conditional statements.Write code that uses loops.Assignment RequirementsComplete 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.Programming ProblemYou 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 your code using comments.Required ResourcesVisioSubmission RequirementsSubmit the following:A Visio file with a UML diagram and two flowcharts (or you can submit three separate Visio files).A .js file that implements the object and methods.An .html file that prompts the user for information and displays the results.Evaluation CriteriaCategory#CriteriaDESIGN, 40%1.1The UML diagram should include the date, location, title, and description properties. It should also include methods to display Up to 10 points for this element1.2The flowchart for displaying data should include a loop that loops through the attendees.Up to 15 points for this element1.3There should be three data validation flowcharts.Up to 15 points for this elementSCRIPTING, 50%2.1The object definition should be correct.Up to 10 points for this element2.2The method should work as described.Up to 10 points for this element2.3Data validation functions should work as describedUp to 15 points for this element2.3The script should work as described.Up to 15 points for this elementSTYLE, 10%3.1Information should be organized in a logical, easy-to-read manner. Code should be commented.Up to 10 points for readability and styleUnit 6 Assignment 1: Research DOM Level 3 Events vs. DOM Level 2 EventsCourse Objectives and Learning OutcomesCreate a dynamic website using JavaScript. Describe how JavaScript event handlers work.Create JavaScript event handlers.Assignment RequirementsStudy the DOM Level 3 events and DOM Level 2 events specifications. Write a one-page 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 ten differences of DOM Level 3 events and DOM Level 2 events.Required ResourcesW3C DOM Level-3 Events Specifications DOM Level-2 Events Specifications RequirementsSubmit a one-page paper with a table to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should describe the browser supports between DOM Level 3 events and DOM Level 2 events.Up to 40 points for this element1.2The essay should give 10 differences between DOM Level 3 events and DOM Level 2 events.Up to 50 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 6 Assignment 2: Research the Market Shares for Popular Browsers that Support HTML5Course Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Explain various methods of determining which features a browser supports.Assignment RequirementsUse the listed sites to research the market shares of HTML5-compatible Web browsers. Update Table 13.1 on page 241 with the latest data. Create a table to display the latest market share of HTML5-compatible Web browsers and how well each supports HTML5.Required ResourcesThe HTML5 Test Netmarketshare RequirementsSubmit the table to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The table should describe the latest versions of popular web browsers.Up to 40 points for this element1.2The table should update the percentages of market share and HTML5 support with the popular web browsers. Up to 50 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 7 Assignment 1: Analyze Mobile Website DesignCourse Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Describe guidelines for creating a mobile website.Describe the characteristics of various mobile design patterns.Assignment RequirementsVisit the ITT Tech website using a desktop browser and using a mobile emulator, such as Opera Mobile Emulator. Test the website on multiple devices, including some with small screens and some with larger screens. Write a one-page essay comparing the two versions. Your essay should:Identify similarities and differences. Answer the question: Do you think the mobile version is effective and easy to use? Explain why. Identify at least five best practices or design patterns used on the mobile site.Identify at least two changes you would make to improve the design.Required ResourcesITT Tech Mobile emulator Submission RequirementsSubmit a one-page paper to your instructor. Cite any sources used using APA format. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should identify similarities and differences between the desktop version and the mobile version.Up to 25 points for this element1.2The essay should provide an explanation of why the mobile version is or is not easy to use.Up to 20 points for this element1.3The essay should identify at least five best practices or design patterns used on the mobile site.Up to 25 points for this element1.4The essay should identify two changes that would improve the design.Up to 20 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 8 Assignment 1: Describe the Uses for the <canvas> ElementCourse Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website using HTML5.Draw on a Web page using the <canvas> element.Display images on a Web page using the <canvas> element.Explain the similarities and differences among the <canvas> element, SVG, and Flash.Assignment RequirementsComplete the following tasks:Use Google or any search engine to research the use of HTML5 <canvas> elements. Write a one-page paper describing the differences between using HTML5 <canvas> elements versus the traditional JavaScript programming and Flash for dynamic Web development. The paper should also list five pros and five cons of using HTML5 <canvas> elements.Required ResourcesGoogle RequirementsSubmit a one-page paper that meets the given requirements.Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The paper should compare the differences between using HTML5 <canvas> elements versus using the traditional JavaScript programming and Flash for dynamic Web development.Up to 40 points for this element1.2The paper should list five pros and five cons of using HTML5 <canvas> elements.Up to 50 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 8 Assignment 2: Research HTML5 Changes to FormsCourse Objectives and Learning OutcomesCreate a website using HTML5.Create a form that performs input validation.Assignment RequirementsComplete the following tasks: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 .Describe five pros and five cons for each type of form validation. Describe which type of form validation is more significant for Web development. Explain why. Required ResourcesGoogle RequirementsSubmit a one-page paper that meets the given requirements.Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1Describe the differences between client-side form validation and server-side form validation.Up to 40 points for this element1.2Describe five pros and five cons of using client-side form validation and server-side form validation. Up to 40 points for this element1.3Describe which type of form validation is more significant and explain why. Up to 10 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 9 Assignment 1: Research and Compare jQuery with Other Popular JavaScript FrameworksCourse Objectives and Learning OutcomesCreate a website that uses the jQuery framework.Describe the purpose of the jQuery framework.Assignment RequirementsUse Google or other search engines to research other popular JavaScript frameworks besides jQuery and jQuery Mobile. Write a one-page paper describing two popular JavaScript frameworks. The paper should also describe the differences between jQuery and the other two JavaScript frameworks in terms of performance, usability, and browser support.Required ResourcesGoogle RequirementsSubmit a one-page paper with a table to your instructor. Use APA format to cite any sources you used. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The paper should describe two popular JavaScript frameworks besides jQuery and jQuery Mobile.Up to 40 points for this element1.2The paper should describe the differences between jQuery and the other two JavaScript frameworks in terms of performance, usability, and browser support.Up to 50 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 9 Assignment 2: Research the Differences Between PhoneGap and jQuery MobileCourse Objectives and Learning OutcomesCreate a mobile website that uses the jQuery Mobile framework.Identify the files in the jQuery Mobile framework.Use jQuery Mobile to create a Web page.Use the mobile initialization event.Assignment RequirementsUse the required resources to research PhoneGap and how it is being used for mobile development. Describe five differences between PhoneGap and jQuery Mobile. Answer this question: Which tool is better for mobile development? Explain why.Required ResourcesPhoneGap Wiki Mobile Mobile Wiki RequirementsSubmit your answers in a table. Use APA format to cite any sources you used. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1Research PhoneGap and how it is being used for mobile development.Up to 40 points for this element1.2Describe five differences between PhoneGap and jQuery Mobile.Up to 40 points for this element1.3Describe which tool is better for mobile development and explain why.Up to 10 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleUnit 10 Assignment 1: Research Map APIsCourse Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Create a Web page that uses the geolocation API.Assignment RequirementsChoose two map API services. Research the services and write a one-page paper that describes the options. Your paper should include information about cost, performance, ease of use, and features. Given your research, which map API would you choose for your own development? Explain why.Required ResourcesBing Maps API Google Maps JavaScript API MapQuest Open API Ovi Maps API Submission RequirementsSubmit a one-page paper to your instructor. Use APA format to cite any sources you used. Evaluation CriteriaCategory#CriteriaCONTENT, 90%1.1The essay should describe .the cost, performance, ease of use, and features for two map API services.Up to 80 points for this element1.2The essay should identify one service as being the best choice and explain why.Up to 10 points for this elementSTYLE, 10%2.1Information should be organized in a logical, easy-to-read manner. Up to 10 points for readability and styleProjectProject Part 1: Using HTML to Create a HomepagePurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will choose the focus of your website and build a homepage using HTML5 semantic elements. Course Objectives and Learning OutcomesCreate a website using HTML5.Structure content on a Web page using HTML5 tags.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 1.Project Part 2: Applying a Style to the HomepagePurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will continue to enhance the homepage that you completed from the last unit. Course Objectives and Learning OutcomesApply style to a website using CSS.Position elements using the CSS box model.Manage element stacking using the z-index property.Manage the flow of text using CSS.Apply styles to lists.Create an image map using CSS.Create navigation lists using CSS.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 2.Project Part 3: Applying a Hybrid Layout to the HomepagePurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will create an external style sheet that formats the homepage as a hybrid layout.Course Objectives and Learning OutcomesApply style to a website using CSS.Create a hybrid Web page using CSS.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 3.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 3.Project Part 4: Create a Registration Form to Collect New Member InformationPurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will create a registration form to collect member information. TheCourse Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe the structure of the Document Object Model (DOM).Write JavaScript code that manipulates the DOM.Create and use JavaScript variables.Create and use JavaScript strings.Create and use JavaScript arrays.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 4.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 4.Project Part 5: Adding a Registration Form to the WebsitePurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will add validation logic to the registration page of the website. Course Objectives and Learning OutcomesCreate a dynamic website using JavaScript.Create a JavaScript function.Create custom objects.Use and extend built-in objects.Write code that uses conditional statements.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 5.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 5.Project Part 6: Adding HTML Events to the Registration FormPurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will enhance the registration page to the website.Course Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe how JavaScript event handlers work.Create JavaScript event handlers.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 6.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 6.Project Part 7: Creating a Mobile Version of the WebsitePurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will 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. You will also add script to ensure that HTML5 styles are applied when the page is viewed in IE8.Course Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Create an application plan.Use media queries to support various devices.Use mobile meta tags to optimize a Web page for mobile devices.Describe guidelines for creating a mobile website.Use a validator to test a Web page.Use emulators to test a Web page.Describe the characteristics of various mobile design patterns.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 7.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 7Project Part 8: Adding HTML Events to the Registration FormPurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will enhance the website with the following features:Create a multi-color title text with a <canvas> tag on the home page to describe the website.Hint: Read pages 168-169 about using multi-color.Use either the datetime-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.Course Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website using HTML5.Draw on a Web page using the <canvas> element.Display images on a Web page using the <canvas> element.Describe the new functionality supported in HTML5 forms.Create a form that uses HTML5 features.Create a form that performs input validation.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 8.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 8.Project Part 9: Adding jQuery and jQuery Mobile to the WebsitePurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will enhance the website with the following features:Import the jQuery JavaScript file jquery-1.10.1.min.js (SD1340.U9.AF16) and add at least two jQuery effects to the website.Test out the jQuery effects using two different Web browsers and take screenshots for submission.Then import the jQuery Mobile JavaScript file jquery.mobile-1.3.1.min.js (SD1340.U9.AF17) and the jQuery Mobile CSS file jquery.mobile-1.3.1.min.css (SD1340.U9.AF18) to the website. Add at least two jQuery Mobile buttons to the website.Test out the website using two different mobile devices (use the Opera Mobile emulator) and take screenshots for submission.Course Objectives and Learning OutcomesCreate a website that uses the jQuery framework.Create a mobile website that uses the jQuery Mobile framework.Describe the purpose of the jQuery framework.Use jQuery selectors.Include and use the jQuery framework.Identify the files in the jQuery Mobile framework.Use jQuery Mobile to create a Web page.Use the mobile initialization event. Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 9.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 9.Project Part 10: Test and Finalize Your Website PurposeThroughout the course, you will build a desktop and a mobile version of a website. The website should be about one of your hobbies or interests. In this unit, you will test and finalize your website.Course Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Use a validator to test a Web page.Use emulators to test a Web page.Required ResourcesSD1340 Lab ManualProject Logistics Refer to the SD1340 Lab Manual for instructions for Project Part 10.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 10.Laboratory AssignmentsUnit 1 Lab 1-1: Configure ITT-LabCourse Objectives and Learning OutcomesCreate a website using HTML5.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 1 Lab 1-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 1 Lab 1-1.Unit 1 Lab 1-2: Create a Web Page Using HTML5Course Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website using HTML5.Identify differences among HTML4, XHTML, and HTML5.Structure content on a Web page using HTML5 tags.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 1 Lab 1-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 1 Lab 1-2.Submission Checklist:Answers to the following lab questions:Task 1, Questions 5b, 5d, 53, 10c, 10e, 10f, 11f, 11h, 11j, 11k, 11p, 11qTask 2, Questions 3a, 3b, 3c, 3dnnLab1-2.htmlUnit 2 Lab 2-1: Format a Web Page Using CSS StylingCourse Objectives and Learning OutcomesApply style to a website using CSS.Position elements using the CSS box model.Manage element stacking using the z-index property.Manage the flow of text using CSS.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 2 Lab 2-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 2 Lab 2-1.Submission Checklist:The following html files:nnLab2-1-1.htmlnnLab2-1-2.htmlnnLab2-1-3.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Unit 2 Lab 2-2: Format a Web Page Using CSS Box ModelCourse Objectives and Learning OutcomesApply style to a website using CSS.Position elements using the CSS box model.Manage element stacking using the z-index property.Manage the flow of text using CSS.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 2 Lab 2-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 2 Lab 2-2.Submission Checklist:The following html files:nnLab2-2-1.htmlScreenshots from the following tasks:Task 1Unit 2 Lab 2-3: Format a Web Page Using CSS PositioningCourse Objectives and Learning OutcomesApply style to a website using CSS.Position elements using the CSS box model.Manage element stacking using the z-index property.Manage the flow of text using CSS.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 2 Lab 2-3.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 2 Lab 2-3.Submission Checklist:The following html files:nnLab2-3-1.htmlnnLab2-3-2.htmlnnLab2-3-3.htmlnnLab2-3-4.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Unit 3 Lab 3-1: Compare Fixed, Liquid, and Hybrid LayoutsCourse Objectives and Learning OutcomesApply style to a website using CSS.Create a fixed-layout Web page using CSS.Create a liquid-layout Web page using CSS.Create a hybrid Web page using CSS.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 3 Lab 3-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 3 Lab 3-1.Submission Checklist:Answers to the following lab questions:Task 1, Questions 8, 12a, 12bTask 2, Questions 5a, 7a, 7b, 9b, 11c, 13d, 15e, 17f, 19g, 21hZip of the starter file, the graphics, and the nnLab3-1hybrid.css file.Unit 3 Lab 3-2: Add JavaScript to a Web PageCourse Objectives and Learning OutcomesCreate a dynamic website using JavaScript.Create a JavaScript event handler.Display random content using JavaScript.Document JavaScript code using comments.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 3 Lab 3-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 3 Lab 3-2.Submission Checklist:Answers to the following lab questions:Questions 8a, 8bThe following html file:nnLab3-2.htm.Screenshots from the following tasks:Task 1Task 2Unit 4 Lab 4-1: Program a Web Page Using JavaScriptCourse Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe the structure of the Document Object Model (DOM).Write JavaScript code that manipulates the DOM.Create and use JavaScript variables.Create and use JavaScript strings.Create and use JavaScript arrays.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 4 Lab 4-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 4 Lab 4-1.Submission Checklist:Answers to the following lab questions:Task 1, Question 4aTask 2, Question 4aTask 3, Question 4aTask 4, Question 4aThe following html files:nnLab4-1-1.htmlnnLab4-1-2.htmlnnLab4-1-3.htmlnnLab4-1-4.htmlnnLab4-1-5.htmlnnLab4-1-6.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Task 5Task 6Unit 4 Lab 4-2: Program a Web Page with HTML Document Object Model (DOM)Course Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe the structure of the Document Object Model (DOM).Write JavaScript code that manipulates the DOM.Create and use JavaScript variables.Create and use JavaScript strings.Create and use JavaScript arrays.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 4 Lab 4-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 4 Lab 4-2.Submission Checklist:Answers to the following lab questions:Task 1, Question 4aTask 2, Question 4aTask 3, Question 4aTask 4, Question 4The following html files:nnLab4-2-1.htmlnnLab4-2-2.html nnLab4-2-3.htmlnnLab4-2-4.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Unit 5 Lab 5-1: Add Forms and Data Validation to a Web PageCourse Objectives and Learning OutcomesCreate a dynamic website using JavaScript.Create a JavaScript function.Create custom objects.Use and extend built-in objects.Write code that uses conditional statements.Write code that uses loops.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 5 Lab 5-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 5 Lab 5-1.Submission Checklist:Screenshot for Task 2Word document of test cases and documentation of results for Task 3Answers to the following lab questions:Task 1, Questions 7a and 8aTask 3, Questions 5a and 10annLab5-1.htmlUnit 6 Lab 6-1: Program a Web Page Using HTML EventsCourse Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe how JavaScript event handlers work.Create JavaScript event handlers.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 6 Lab 6-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 6 Lab 6-1.Submission Checklist:Answers to the following lab questions:Task 1, Question 6aTask 2, Question 5aTask 3, Question 4aTask 4, Question 6aTask 5, Question 4aTask 6, Question 4aThe following html files:nnLab6-1-1.htmlnnLab6-1-2.htmlnnLab6-1-3.htmlnnLab6-1-4.htmlnnLab6-1-5.htmlnnLab6-1-6.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Task 5Task 6Unit 6 Lab 6-2: Display HTML5 Web Pages on Different Mobile DevicesCourse Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe how JavaScript event handlers work.Create JavaScript event handlers.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 6 Lab 6-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 6 Lab 6-2.Submission Checklist:Answers to the following lab questions:Task 1, Question 6aTask 2, Question 5aTask 3, Question 4aTask 4, Question 6aTask 5, Question 4aTask 6, Question 4aThe following html files:nnLab6-1-1.htmlnnLab6-1-2.htmlnnLab6-1-3.htmlnnLab6-1-4.htmlnnLab6-1-5.htmlnnLab6-1-6.htmlScreenshots from the following task:Task 1Unit 7 Lab 7-1: Create a Web Page that Uses Progressive EnhancementCourse Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Explain the use of progressive enhancement.Use media queries to support various devices.Use mobile meta tags to optimize a Web page for mobile devices.Describe guidelines for creating a mobile website.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 7 Lab 7-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 7 Lab 7-1.Submission Checklist:Answers to the following lab questions:Task 1, Questions 5a, 8b, 8c, 10d, and 10eTask 2, Questions 5a and 6bTask 3, Question 2aTask 4, Questions 4a and 5bSubmit the following files:nnLab7-1.html nnLab7-1mobile.css nnLab7-1.css Unit 7 Lab 7-2: Test a Web Page Using Validators and EmulatorsCourse Objectives and Learning OutcomesCreate a website that is optimized for viewing on a mobile device.Use a validator to test a Web page.Use emulators to test a Web page.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 7 Lab 7-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 7 Lab 7-2.Submission Checklist:Answers to the following lab questions:Task 1, Questions 7a, 8b, 8c, 9d, and 12eTask 2, Question 5aThe following files:nnLab7-2.htmlnnLab7-2-2.htmlnnLab7-2-2.htmlResults and html files from Step 6 of Task 3: Test Your HTML and CSS Using a ValidatorScreenshots from the following tasks:Task 2Task 3Unit 8 Lab 8-1: Program a Web Page that Uses the <canvas> ElementCourse Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website using HTML5.Draw on a Web page using the <canvas> element.Display images on a Web page using the <canvas> element.Describe the new functionality supported in HTML5 forms.Create a form that uses HTML5 features.Create a form that performs input validation.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 8 Lab 8-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 8 Lab 8-1.Submission Checklist:Answers to the following lab questions:Task 1, Question 4a Task 2, Question 4aTask 3, Question 4aTask 4, Question 4aTask 5, Question 4aThe following html files:nnLab8-1-1.htmlnnLab8-1-2.htmlnnLab8-1-3.htmlnnLab8-1-4.htmlnnLab8-1-5.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Task 5Unit 8 Lab 8-2: Program a Web Page Using the HTML5 Form ElementsCourse Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website using HTML5.Draw on a Web page using the <canvas> element.Display images on a Web page using the <canvas> element.Describe the new functionality supported in HTML5 forms.Create a form that uses HTML5 features.Create a form that performs input validation.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 8 Lab 8-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 8 Lab 8-2.Submission Checklist:Answers to the following lab questions:Task 1, Question 4a Task 2, Question eTask 3, Question 4aTask 4, Question 4aThe following html files:nnLab8-2-1.htmlnnLab8-2-2.htmlnnLab8-2-3.htmlnnLab8-2-4.htmlnnLab8-2-5.htmlnnLab8-2-6.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Task 5Unit 9 Lab 9-1: Program a Web Page Using the jQuery FrameworkCourse Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe how JavaScript event handlers work.Create JavaScript event handlers.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 9 Lab 9-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 9 Lab 9-1.Submission Checklist:Answers to the following lab questions:Task 1, Question 6aTask 2, Questions 4a, 4b, 4cTask 3, Question 4aTask 4, Question 4aSubmit the following html files:nnLab9-1-1.htmlnnLab9-1-2.htmlnnLab9-1-3.htmlnnLab9-1-4.htmlnnLab9-1-5.htmlScreenshots from the following tasks:Task 1Task 2Task 3Task 4Task 5Unit 9 Lab 9-2: Display HTML5 Web Pages on Different Mobile DevicesCourse Objectives and Learning OutcomesDescribe the use of scripting when creating a website.Create a dynamic website using JavaScript.Describe how JavaScript event handlers work.Create JavaScript event handlers.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 9 Lab 9-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 9 Lab 9-2.Submission Checklist:The following html files:nnLab9-2-1.htmlnnLab9-2-2.htmlnnLab9-2-3.htmlScreenshots from the following tasks:Task 1Task 2Task 3Unit 10 Lab 10-1: Create a Web Page that Uses HTML5 Link TypesCourse Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website using HTML5.Describe new link functionality in HTML5.Create a Web page that uses HTML5 link types.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 10 Lab 10-1.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 10 Lab 10-1.Submission Checklist:Answers to the following lab questions:Task 1, Question 6aTask 2, Question 2eThe following html file:nnLab10-1.htmlScreenshots from the following task:Task 1Unit 10 Lab 10-2: Create a Web Page that Uses the Geolocation APICourse Objectives and Learning OutcomesDescribe various components of the Open Web Platform.Create a website that is optimized for viewing on a mobile device.Describe the features of the geolocation API.Create a Web page that uses the geolocation API.Required Setup and ResourcesSD1340 Lab ManualRecommended ProceduresRefer to the SD1340 Lab Manual for instructions for Unit 10 Lab 10-2.DeliverablesRefer to the SD1340 Lab Manual for deliverables for Unit 10 Lab 10-2.Submission Checklist:nnLab10-2.html ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download