sd1340.weebly.comsd1340.weebly.com/.../5/3/39537751/sd1340_graded_as… · web viewthroughout the...

ITT TECHNICAL INSTITUTE

SD1340 Creating Websites Using HTML5, CSS

and JavaScript

GRADED ASSIGNMENTS

-1- 08/26/2013

Creating Websites Using HTML5, CSS and JavaScript GRADED ASSIGNMENTS

Table of ContentsGRADED ASSIGNMENTS..........................................................................................................3

Unit 1 Assignment 1: Research HTML5 Enhancements............................................................3

Unit 1 Assignment 2: Research Mobile Web Development.......................................................4

Unit 2 Assignment 1: Research CSS (Level 1) vs. CSS3..........................................................5

Unit 2 Assignment 2: Research CSS3 for Mobile Web Development........................................6

Unit 3 Assignment 1: Researching Layouts...............................................................................7

Unit 4 Assignment 1: Research DOM Level 3 vs. DOM Level 2................................................9

Unit 4 Assignment 2: Program the Sorting of a Numeric Array................................................10

Unit 5 Assignment 1: Design a Program..................................................................................11

Unit 6 Assignment 1: Research DOM Level 3 Events vs. DOM Level 2 Events......................13

Unit 6 Assignment 2: Research the Market Shares for Popular Browsers that Support HTML5.................................................................................................................................................14

Unit 7 Assignment 1: Analyze Mobile Website Design............................................................15

Unit 8 Assignment 1: Describe the Uses for the <canvas> Element.......................................17

Unit 8 Assignment 2: Research HTML5 Changes to Forms....................................................18

Unit 9 Assignment 1: Research and Compare jQuery with Other Popular JavaScript Frameworks.............................................................................................................................20

Unit 9 Assignment 2: Research the Differences Between PhoneGap and jQuery Mobile.......21

Unit 10 Assignment 1: Research Map APIs.............................................................................23

PROJECT.....................................................................................................................................24Project Part 1: Using HTML to Create a Homepage................................................................24

Project Part 2: Applying a Style to the Homepage...................................................................25

Project Part 3: Applying a Hybrid Layout to the Homepage.....................................................26

Project Part 4: Create a Registration Form to Collect New Member Information....................27

Project Part 5: Adding a Registration Form to the Website.....................................................28

Project Part 6: Adding HTML Events to the Registration Form................................................29

Project Part 7: Creating a Mobile Version of the Website........................................................30

Project Part 8: Adding HTML Events to the Registration Form................................................31

Project Part 9: Adding jQuery and jQuery Mobile to the Website............................................32

Project Part 10: Test and Finalize Your Website.....................................................................33

LABORATORY ASSIGNMENTS.............................................................................................34

-2- 08/26/2013


Unit 1 Lab 1-1: Configure ITT-Lab...........................................................................................34

Unit 1 Lab 1-2: Create a Web Page Using HTML5..................................................................35

Unit 2 Lab 2-1: Format a Web Page Using CSS Styling..........................................................36

Unit 2 Lab 2-2: Format a Web Page Using CSS Box Model....................................................37

Unit 2 Lab 2-3: Format a Web Page Using CSS Positioning...................................................38

Unit 3 Lab 3-1: Compare Fixed, Liquid, and Hybrid Layouts...................................................39

Unit 3 Lab 3-2: Add JavaScript to a Web Page.......................................................................40

Unit 4 Lab 4-1: Program a Web Page Using JavaScript..........................................................41

Unit 4 Lab 4-2: Program a Web Page with HTML Document Object Model (DOM)................43

Unit 5 Lab 5-1: Add Forms and Data Validation to a Web Page..............................................44

Unit 6 Lab 6-1: Program a Web Page Using HTML Events.....................................................45

Unit 6 Lab 6-2: Display HTML5 Web Pages on Different Mobile Devices...............................47

Unit 7 Lab 7-1: Create a Web Page that Uses Progressive Enhancement.............................48

Unit 7 Lab 7-2: Test a Web Page Using Validators and Emulators.........................................49

Unit 8 Lab 8-1: Program a Web Page that Uses the <canvas> Element.................................50

Unit 8 Lab 8-2: Program a Web Page Using the HTML5 Form Elements...............................52

Unit 9 Lab 9-1: Program a Web Page Using the jQuery Framework.......................................54

Unit 9 Lab 9-2: Display HTML5 Web Pages on Different Mobile Devices...............................55

Unit 10 Lab 10-1: Create a Web Page that Uses HTML5 Link Types.....................................56

Unit 10 Lab 10-2: Create a Web Page that Uses the Geolocation API...................................57

-3- 08/26/2013


Graded Assignments

Unit 1 Assignment 1: Research HTML5 Enhancements

Course Objectives and Learning Outcomes Create 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 Resources HTML 5.1 Specification

http://www.w3.org/TR/2013/WD-html51-20130528/

Web Platform Docs

http://docs.webplatform.org/wiki/Main_Page

Submission RequirementsSubmit a one-page paper to your instructor. Cite any sources used using APA format.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The essay should describe how to use three semantic tags.

Up to 60 points for this element

1.2 The essay should give an example of how to use the three tags.


STYLE, 10%

2.1 Information should be organized in a logical, easy-to-read manner.

Up to 10 points for readability and style

-4- 08/26/2013


http://www.w3.org/TR/2013/WD-html51-20130528/


Unit 1 Assignment 2: Research Mobile Web Development

Course Objectives and Learning Outcomes Describe 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 Resources Mobile Web

http://www.w3.org/standards/webdesign/mobilweb

Web Platform Docs


Submission RequirementsSubmit the final PowerPoint presentation to your instructor.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The PowerPoint presentation should identify similarities between

mobile-friendly and accessible websites.


1.2 The PowerPoint presentations should accurately describe seven best

practices for building a mobile-friendly website.


STYLE, 10%



-5- 08/26/2013


http://www.w3.org/standards/webdesign/mobilweb


Unit 2 Assignment 1: Research CSS (Level 1) vs. CSS3

Course Objectives and Learning Outcomes Apply 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 Resources CSS and CSS3 Specification

http://www.w3.org/Style/CSS/Overview.en.html

Cascading Style Sheets Wiki

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Submission RequirementsSubmit a one-page paper with the table to your instructor. Cite any sources used using APA format.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The essay should describe the differences between CSS and CSS3.


1.2 The essay should give 10 differences between CSS and CSS3.


STYLE, 10%



-6- 08/26/2013

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

http://www.w3.org/Style/CSS/Overview.en.html


Unit 2 Assignment 2: Research CSS3 for Mobile Web Development








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 Resources Google

http://www.google.com/


Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The essay should describe the advantages and disadvantages of

using CSS3 for mobile Web development.


1.2 The essay should give eight advantages and two disadvantages of

using CSS3.


STYLE, 10%



-7- 08/26/2013



Unit 3 Assignment 1: Researching Layouts


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 Resources CSS Zen Garden

http://www.csszengarden.com/

Submission RequirementsSubmit a one-page paper with a table to your instructor. Cite any sources used using APA format.

Evaluation Criteria

Category # CriteriaCONTENT, 90% 1.1 The essay should list features the student liked about the style.


1.2 The essay should discuss how appropriate the style would be for a

mobile device.


1.3 The essay should identify at least one thing the student would change

about the style.

-8- 08/26/2013

http://www.csszengarden.com/


Category # Criteria


1.4 The style should be categorized as fixed, fluid, or hybrid.


1.5 The CSS techniques that were used to create the style should be

explained.


STYLE, 10%



-9- 08/26/2013


Unit 4 Assignment 1: Research DOM Level 3 vs. DOM Level 2

Course Objectives and Learning Outcomes Describe 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 Resources W3C DOM Specification

http://www.w3.org/DOM/

W3C DOM Technical Reports

http://www.w3.org/DOM/DOMTR


Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The essay should describe browser support for DOM Level 1, Level 2,

and Level 3.


1.2 The essay should give five differences between DOM Level 1, Level

2, and Level 3.


STYLE, 10%



-10- 08/26/2013

http://www.w3.org/DOM/DOMTR

http://www.w3.org/DOM/


Unit 4 Assignment 2: Program the Sorting of a Numeric Array

Course Objectives and Learning Outcomes Create 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 Resources Code examples on pp. 340-342 of your textbook

HTML-Kit


Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The 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.


1.2 Students should run the program with three different sets of input and

take a snapshot of all the output along with the source code.


STYLE, 10%



-11- 08/26/2013


Unit 5 Assignment 1: Design a Program


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 Resources Visio

Submission 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 Criteria

Category # CriteriaDESIGN, 40% 1.1 The UML diagram should include the date, location, title, and

description properties. It should also include methods to display

-12- 08/26/2013


Category # Criteria


1.2 The flowchart for displaying data should include a loop that loops

through the attendees.


1.3 There should be three data validation flowcharts.


SCRIPTING, 50%

2.1 The object definition should be correct.


2.2 The method should work as described.


2.3 Data validation functions should work as described


2.3 The script should work as described.


STYLE, 10%


Code should be commented.


-13- 08/26/2013


Unit 6 Assignment 1: Research DOM Level 3 Events vs. DOM Level 2 Events


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 Resources W3C DOM Level-3 Events Specifications

http://www.w3.org/TR/DOM-Level-3-Events/

W3C DOM Level-2 Events Specifications

http://www.w3.org/TR/DOM-Level-2-Events/events.html


Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The essay should describe the browser supports between DOM Level

3 events and DOM Level 2 events.


1.2 The essay should give 10 differences between DOM Level 3 events

and DOM Level 2 events.


STYLE, 10%



-14- 08/26/2013

http://www.w3.org/TR/DOM-Level-2-Events/events.html

http://www.w3.org/TR/DOM-Level-3-Events/


Unit 6 Assignment 2: Research the Market Shares for Popular Browsers that Support HTML5

Course Objectives and Learning Outcomes Create 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 Resources The HTML5 Test

http://html5test.com/

Netmarketshare

http://www.netmarketshare.com/

Submission RequirementsSubmit the table to your instructor. Cite any sources used using APA format.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The table should describe the latest versions of popular web

browsers.


1.2 The table should update the percentages of market share and HTML5

support with the popular web browsers.


STYLE, 10%



-15- 08/26/2013

http://www.netmarketshare.com/

http://html5test.com/%20


Unit 7 Assignment 1: Analyze Mobile Website Design


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:

1. Identify similarities and differences.

2. Answer the question: Do you think the mobile version is effective and easy to use? Explain why.

3. Identify at least five best practices or design patterns used on the mobile site.

4. Identify at least two changes you would make to improve the design.

Required Resources ITT Tech

http://itt-tech.edu

Opera Mobile emulator

http://www.opera.com/developer/mobile-emulator


Evaluation Criteria

Category # CriteriaCONTENT, 90% 1.1 The essay should identify similarities and differences between the

desktop version and the mobile version.


1.2 The essay should provide an explanation of why the mobile version is

or is not easy to use.


1.3 The essay should identify at least five best practices or design

patterns used on the mobile site.

-16- 08/26/2013

http://www.opera.com/developer/mobile-emulator

http://itt-tech.edu/


Category # Criteria


1.4 The essay should identify two changes that would improve the design.


STYLE, 10%



-17- 08/26/2013


Unit 8 Assignment 1: Describe the Uses for the <canvas> Element


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.


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.


http://www.google.com

Submission RequirementsSubmit a one-page paper that meets the given requirements.

Evaluation CriteriaCategory # Criteria

CONTENT, 90% 1.1 The paper should compare the differences between using HTML5

<canvas> elements versus using the traditional JavaScript

programming and Flash for dynamic Web development.


1.2 The paper should list five pros and five cons of using HTML5

<canvas> elements.


STYLE, 10% 2.1 Information should be organized in a logical, easy-to-read manner.


-18- 08/26/2013



Unit 8 Assignment 2: Research HTML5 Changes to Forms


Create a form that performs input validation.


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.

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.



Submission RequirementsSubmit a one-page paper that meets the given requirements.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 Describe the differences between client-side form validation and

server-side form validation.


1.2 Describe five pros and five cons of using client-side form validation

and server-side form validation.


1.3 Describe which type of form validation is more significant and explain

why.


STYLE, 10% 2.1 Information should be organized in a logical, easy-to-read manner.

-19- 08/26/2013



Category # CriteriaUp to 10 points for readability and style

-20- 08/26/2013


Unit 9 Assignment 1: Research and Compare jQuery with Other Popular JavaScript Frameworks

Course Objectives and Learning Outcomes Create 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.



Submission RequirementsSubmit a one-page paper with a table to your instructor. Use APA format to cite any sources you used.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The paper should describe two popular JavaScript frameworks

besides jQuery and jQuery Mobile.


1.2 The paper should describe the differences between jQuery and the

other two JavaScript frameworks in terms of performance, usability,

and browser support.


STYLE, 10%



-21- 08/26/2013



Unit 9 Assignment 2: Research the Differences Between PhoneGap and jQuery Mobile

Course Objectives and Learning Outcomes Create 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 Resources PhoneGap

http://phonegap.com/

PhoneGap Wiki

http://en.wikipedia.org/wiki/PhoneGap

jQuery Mobile

http://jquerymobile.com/

jQuery Mobile Wiki

http://en.wikipedia.org/wiki/JQuery_Mobile

Submission RequirementsSubmit your answers in a table. Use APA format to cite any sources you used.

Evaluation Criteria

Category # CriteriaCONTENT, 90% 1.1 Research PhoneGap and how it is being used for mobile

development.


1.2 Describe five differences between PhoneGap and jQuery Mobile.


1.3 Describe which tool is better for mobile development and explain why.

-22- 08/26/2013

http://en.wikipedia.org/wiki/JQuery_Mobile

http://jquerymobile.com/

http://en.wikipedia.org/wiki/PhoneGap

http://phonegap.com/


Category # Criteria


STYLE, 10%



-23- 08/26/2013


Unit 10 Assignment 1: Research Map APIs


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 Resources Bing Maps API

http://www.microsoft.com/maps/developers/web.aspx

Google Maps JavaScript API

https://developers.google.com/maps/

MapQuest Open API

http://developer.mapquest.com/web/products/open

Ovi Maps API

http://api.maps.ovi.com/devguide/overview.html

Submission RequirementsSubmit a one-page paper to your instructor. Use APA format to cite any sources you used.

Evaluation Criteria

Category # Criteria

CONTENT, 90%

1.1 The essay should describe .the cost, performance, ease of use, and

features for two map API services.


1.2 The essay should identify one service as being the best choice and

explain why.


STYLE, 10%



-24- 08/26/2013

http://api.maps.ovi.com/devguide/overview.html%20

http://developer.mapquest.com/web/products/open%20

https://developers.google.com/maps/%20

http://www.microsoft.com/maps/developers/web.aspx%20


Project

Project Part 1: Using HTML to Create a Homepage

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 choose the focus of your website and build a

homepage using HTML5 semantic elements.



Required Resources SD1340 Lab Manual

Project 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.

-25- 08/26/2013


Project Part 2: Applying a Style to the Homepage


about one of your hobbies or interests. In this unit, you will continue to enhance the homepage that you

completed from the last unit.











-26- 08/26/2013


Project Part 3: Applying a Hybrid Layout to the Homepage


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.






-27- 08/26/2013


Project Part 4: Create a Registration Form to Collect New Member Information


about one of your hobbies or interests. In this unit, you will create a registration form to collect member

information. The






Create and use JavaScript strings.

Create and use JavaScript arrays.




-28- 08/26/2013


Project Part 5: Adding a Registration Form to the Website


about one of your hobbies or interests. In this unit, you will add validation logic to the registration page of

the website.









-29- 08/26/2013


Project Part 6: Adding HTML Events to the Registration Form


about one of your hobbies or interests. In this unit, you will enhance the registration page to the website.








-30- 08/26/2013


Project Part 7: Creating a Mobile Version of the Website


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.


Create an application plan.

Use media queries to support various devices.

Use mobile meta tags to optimize a Web page for mobile devices.


Use a validator to test a Web page.

Use emulators to test a Web page.

Describe the characteristics of various mobile design patterns.



DeliverablesRefer to the SD1340 Lab Manual for deliverables for Project Part 7

-31- 08/26/2013


Project Part 8: Adding HTML Events to the Registration Form


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.





Describe the new functionality supported in HTML5 forms.

Create a form that uses HTML5 features.





-32- 08/26/2013


Project Part 9: Adding jQuery and jQuery Mobile to the Website


about one of your hobbies or interests. In this unit, you will enhance the website with the following

features:

1. Import the jQuery JavaScript file jquery-1.10.1.min.js (SD1340.U9.AF16) and add at least two

jQuery effects to the website.

2. Test out the jQuery effects using two different Web browsers and take screenshots for

submission.

3. 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.

4. Test out the website using two different mobile devices (use the Opera Mobile emulator) and take

screenshots for submission.

Course Objectives and Learning Outcomes Create 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.




-33- 08/26/2013


Project Part 10: Test and Finalize Your Website


about one of your hobbies or interests. In this unit, you will test and finalize your website.







-34- 08/26/2013


Laboratory Assignments

Unit 1 Lab 1-1: Configure ITT-Lab


Required Setup and Resources SD1340 Lab Manual

Recommended 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.

-35- 08/26/2013


Unit 1 Lab 1-2: Create a Web Page Using HTML5



Identify differences among HTML4, XHTML, and HTML5.





Submission Checklist:

Answers to the following lab questions:

o Task 1, Questions 5b, 5d, 53, 10c, 10e, 10f, 11f, 11h, 11j, 11k, 11p, 11q

o Task 2, Questions 3a, 3b, 3c, 3d

nnLab1-2.html

-36- 08/26/2013


Unit 2 Lab 2-1: Format a Web Page Using CSS Styling









The following html files:

o nnLab2-1-1.html

o nnLab2-1-2.html

o nnLab2-1-3.html

Screenshots from the following tasks:

o Task 1

o Task 2

o Task 3

o Task 4

-37- 08/26/2013


Unit 2 Lab 2-2: Format a Web Page Using CSS Box Model










o nnLab2-2-1.html


o Task 1

-38- 08/26/2013


Unit 2 Lab 2-3: Format a Web Page Using CSS Positioning










o nnLab2-3-1.html

o nnLab2-3-2.html

o nnLab2-3-3.html

o nnLab2-3-4.html


o Task 1

o Task 2

o Task 3

o Task 4

-39- 08/26/2013


Unit 3 Lab 3-1: Compare Fixed, Liquid, and Hybrid Layouts


Create a fixed-layout Web page using CSS.

Create a liquid-layout Web page using CSS.







o Task 1, Questions 8, 12a, 12b

o Task 2, Questions 5a, 7a, 7b, 9b, 11c, 13d, 15e, 17f, 19g, 21h

Zip of the starter file, the graphics, and the nnLab3-1hybrid.css file.

-40- 08/26/2013


Unit 3 Lab 3-2: Add JavaScript to a Web Page


Create a JavaScript event handler.

Display random content using JavaScript.

Document JavaScript code using comments.






o Questions 8a, 8b

The following html file:

o nnLab3-2.htm.


o Task 1

o Task 2

-41- 08/26/2013


Unit 4 Lab 4-1: Program a Web Page Using JavaScript













o Task 1, Question 4a





o nnLab4-1-1.html

o nnLab4-1-2.html

o nnLab4-1-3.html

o nnLab4-1-4.html

o nnLab4-1-5.html

o nnLab4-1-6.html


o Task 1

o Task 2

-42- 08/26/2013


o Task 3

o Task 4

o Task 5

o Task 6

-43- 08/26/2013


Unit 4 Lab 4-2: Program a Web Page with HTML Document Object Model (DOM)
















o Task 4, Question 4


o nnLab4-2-1.html

o nnLab4-2-2.html

o nnLab4-2-3.html

o nnLab4-2-4.html


o Task 1

o Task 2

o Task 3

o Task 4

-44- 08/26/2013


-45- 08/26/2013


Unit 5 Lab 5-1: Add Forms and Data Validation to a Web Page






Write code that uses loops.





Screenshot for Task 2

Word document of test cases and documentation of results for Task 3


o Task 1, Questions 7a and 8a

o Task 3, Questions 5a and 10a

nnLab5-1.html

-46- 08/26/2013


Unit 6 Lab 6-1: Program a Web Page Using HTML Events

















o nnLab6-1-1.html

o nnLab6-1-2.html

o nnLab6-1-3.html

o nnLab6-1-4.html

o nnLab6-1-5.html

o nnLab6-1-6.html


o Task 1

o Task 2

o Task 3

-47- 08/26/2013


o Task 4

o Task 5

o Task 6

-48- 08/26/2013


Unit 6 Lab 6-2: Display HTML5 Web Pages on Different Mobile Devices

















o nnLab6-1-1.html

o nnLab6-1-2.html

o nnLab6-1-3.html

o nnLab6-1-4.html

o nnLab6-1-5.html

o nnLab6-1-6.html

Screenshots from the following task:

o Task 1

-49- 08/26/2013


Unit 7 Lab 7-1: Create a Web Page that Uses Progressive Enhancement


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.







o Task 1, Questions 5a, 8b, 8c, 10d, and 10e

o Task 2, Questions 5a and 6b


o Task 4, Questions 4a and 5b

Submit the following files:

o nnLab7-1.html

o nnLab7-1mobile.css

o nnLab7-1.css

o

-50- 08/26/2013


Unit 7 Lab 7-2: Test a Web Page Using Validators and Emulators









o Task 1, Questions 7a, 8b, 8c, 9d, and 12e


The following files:

o nnLab7-2.html

o nnLab7-2-2.html

o nnLab7-2-2.htmlResults and html files from Step 6 of Task 3: Test Your HTML and CSS

Using a Validator


o Task 2

o Task 3

-51- 08/26/2013


Unit 8 Lab 8-1: Program a Web Page that Uses the <canvas> Element



















o nnLab8-1-1.html

o nnLab8-1-2.html

o nnLab8-1-3.html

o nnLab8-1-4.html

o nnLab8-1-5.html


o Task 1

o Task 2

-52- 08/26/2013


o Task 3

o Task 4

o Task 5

-53- 08/26/2013


Unit 8 Lab 8-2: Program a Web Page Using the HTML5 Form Elements














o Task 2, Question e




o nnLab8-2-1.html

o nnLab8-2-2.html

o nnLab8-2-3.html

o nnLab8-2-4.html

o nnLab8-2-5.html

o nnLab8-2-6.html


o Task 1

o Task 2

-54- 08/26/2013


o Task 3

o Task 4

o Task 5

-55- 08/26/2013


Unit 9 Lab 9-1: Program a Web Page Using the jQuery Framework











o Task 2, Questions 4a, 4b, 4c



Submit the following html files:

o nnLab9-1-1.html

o nnLab9-1-2.html

o nnLab9-1-3.html

o nnLab9-1-4.html

o nnLab9-1-5.html


o Task 1

o Task 2

o Task 3

o Task 4

o Task 5

-56- 08/26/2013


-57- 08/26/2013


Unit 9 Lab 9-2: Display HTML5 Web Pages on Different Mobile Devices










o nnLab9-2-1.html

o nnLab9-2-2.html

o nnLab9-2-3.html


o Task 1

o Task 2

o Task 3

-58- 08/26/2013


Unit 10 Lab 10-1: Create a Web Page that Uses HTML5 Link Types



Describe new link functionality in HTML5.

Create a Web page that uses HTML5 link types.







o Task 2, Question 2e

The following html file:

o nnLab10-1.html

Screenshots from the following task:

o Task 1

-59- 08/26/2013


Unit 10 Lab 10-2: Create a Web Page that Uses the Geolocation API


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.





nnLab10-2.html

-60- 08/26/2013

sd1340.weebly.comsd1340.weebly.com/.../5/3/39537751/sd1340_graded_as… · web viewthroughout the...

Documents