SD1340 Onsite · PDF fileMA1210 College Mathematics I EN1320 Composition I EN1420 Composition II MA1310 College Mathematics II Technical Core Course ... ITT-Lab (Android) virtual

ITT Technical Institute

SD1340Creating Websites Using HTML5, CSS3

and JavaScriptOnsite Course

SYLLABUS

Credit hours: 4.5

Contact/Instructional hours: 56 (34 Theory Hours, 22 Lab Hours)

Prerequisite(s) and/or Corequisite(s):Prerequisite: SD1240 Creating Websites Using HTML and CSS or equivalent

Course Description:This course introduces techniques used in building interactive Websites for mobile and

desktop devices, using technologies such as HTML5, CSS3 and JavaScript.

Creating Websites Using HTML5, CSS3 and JavaScript Syllabus

1 Date: 7/13/2013

Where Does This Course Belong?

The following diagram demonstrates how this course fits in the standard program:

SD2799Software

Development Capstone Project

SD2670 Social Networking

Applications and Technology

SD2550Application

Development Using Java I

SD2650Application Using

Java II

SD2520Introduction to

Database and XML with jQuery

PT1420Introduction to Programminng

SD1420Introduction to Java

Programming

SD1340Creating Websites Using HTML5, CSS3

and JavaScript


Mobile Operating Systems

NT1110Computer Structure

and Logic

SD1240Creating Websites

Using HTML and CSS

GS2745Advanced Strategies

for the Technical Professional

CO2520Communications

GS1140 Problem Solving

Theory

GS1145Strategies for the

Technical Professional

MA1210College

Mathematics I

EN1320Composition I

EN1420Composition II

MA1310College

Mathematics II

Technical Core Course

GE/GS CourseLegend

SP2750Group Theory

Completion of a minimum of 75 credits earned in the program


Application Design and Development


2 Date: 7/13/2013

Program Information

Program Scope and Core Content AreasThis program exposes students to a variety of fundamental skills used in entry-level software

development, software analysis, and application design positions. Students will be exposed to various

aspects of programming, databases, website design, and the development of a software product.

Program Goals and ObjectivesUpon the completion of the program, the student is expected to:

Apply programming logic and algorithmic thinking to software development solutions

Develop fluency in applying programming and development tools and platforms

Evaluate and apply appropriate software development theories, methods and tools for solving

specific problems

Design, develop, test and maintain software applications, databases and systems to meet

business and user requirements

This course is required for the Software Development program. This program covers the following core

areas:

IT foundation

Software development and design foundation

Database foundation

Platform-specific programming

Technology applications environment

General education

Career ImpactThis program offers graduates an opportunity to develop knowledge and skills that they can use to help

them pursue careers in a variety of entry-level programming, application design, and software

development positions, such as Web developer, systems analyst, database programmer, or testing

analyst.

NOTE: Refer to the catalog for the state-specific course and program information, if applicable.


3 Date: 7/13/2013

Course Summary

Major Instructional Areas

1. HTML5

2. CSS3

3. JavaScript

4. jQuery Framework

5. jQuery Mobile Framework

6. Mobile Device Website Development

Course Objectives

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.


4 Date: 7/13/2013

Learning Materials and References

Required Resources

Complete Textbook Package New to this Course

Carried over from Previous

Course(s)

Required for Subsequent Course(s)

Kyrnin, J., Meloni, J., Dutson, P. (2013). Creating websites

using HTML5, CSS3, and Javascript (Custom ed.).

Boston, MA: Pearson Custom.

n

Reese, R., Lai, D. (2013). Creating websites using

HTML5, CSS3 and Javascript student lab manual (Custom

ed.). Boston, MA: Pearson Custom.

n

Other Items New to this Course

Carried over from Previous

Course(s)

Required for Subsequent Course(s)

USB external hard disk n n

ITT-Lab (Android) virtual machine

Students will be guided to update the virtual machine to

include HTML-Kit version 292 (http://www.htmlkit.com), the

jQuery framework jquery-1.10.1.min.js (http://jquery.com), the

jQuery Mobile framework jquery.mobile-1.3.1.min.js and

jquery.mobile-1.3.1.min.css (http://jquerymobile.com).

n n

VMware Player 5.01 (or later) n n

Recommended Resources

Books and Professional Journals

Smashing Magazine (http://www.smashingmagazine.com)

Speckyboy Design Magazine (http://speckyboy.com)

Spyrestudios (http://spyrestudios.com)

Professional Associations

HTML Writers Guild (http://www.hwg.org/)

International Webmasters Association (IWA) (http://www.iwanet.org/)

Web Professionals (http://webprofessionals.org/)

http://www.htmlkit.com

http://jquery.com/

http://jquerymobile.com/

http://www.smashingmagazine.com

http://speckyboy.com

http://spyrestudios.com

http://www.hwg.org/

http://www.iwanet.org/

http://webprofessionals.org/


5 Date: 7/13/2013

ITT Tech Virtual Library (accessed via Student Portal | https://studentportal.itt-tech.edu)

Castledine, E., Eftos, M., and Wheeler, M. (2011). Build mobile websites and apps for smart

devices. Australia: SitePoint Pty. Ltd.

http://library.books24x7.com.proxy.itt-tech.edu/toc.aspx?bookid=42902

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., and 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.


Other References

DZone (http://mobile.dzone.com)

jQuery (http://jquery.com/)

W3C (http://www.w3.org/)

Web Developer Forum (http://www.webdeveloper.com)

https://studentportal.itt-tech.edu







http://mobile.dzone.com

http://jquery.com/

http://www.w3.org/

http://www.webdeveloper.com


6 Date: 7/13/2013

NOTE: All links are subject to change without prior notice.

Information Search

Use the following keywords to search for additional online resources that you may use to support your

work on the course assignments:

HTML5

CSS

JavaScript

jQuery

jQuery Mobile

Mobile website

Website design

Document object model


7 Date: 7/13/2013

Suggested Learning Approach

In this course, you will be studying individually and within a group of your peers. As you work on the

course deliverables, you are encouraged to share ideas with your peers and instructor, work

collaboratively on projects and team assignments, raise critical questions, and provide constructive

feedback.

Use the following advice to receive maximum learning benefits from your participation in this course:

Instructional Methods

The curriculum is designed to encourage a variety of teaching strategies that support the course

objectives while fostering higher cognitive skills. This course will employ multiple methods to deliver

content and inspire and engage you, including lectures, collaborative learning options, and hands-on

activities. This course is composed of theory and lab components. Your progress will be regularly

assessed through weekly assignments, labs, a course project, and a final exam.


8 Date: 7/13/2013

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-of-class

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.


9 Date: 7/13/2013

Course Outline

Unit 1: HTML5 INTRODUCTIONUpon completion of this unit, students are expected to:

Identify differences among HTML4, XHTML, and HTML5. Describe the Open Web Platform. Describe considerations related to developing mobile websites. Structure content on a Web page using HTML5 tags. Describe the benefits HTML5 provides for developing mobile websites.

Total outside work:

6.5 hours

Author Chapter/Title Pages (if necessary)

Total PagesREADING

ASSIGNMENT Kyrnin, Meloni, & Dutson Chapters 1 and 2 30

Activity Estimated Time

Complete the reading assignment 2 hrsComplete Unit 1 Assignment 1: Research HTML5 Enhancements 1.5 hrsComplete Unit 1 Assignment 2: Research Mobile Web Development 1.5 hrs

OUT-OF-CLASS WORK

Complete Project Part 1: Using HTML to Create a Homepage 1.5 hrs

Grading Category Activity/Deliverable Title

Grade Allocation(% of all graded work)

Unit 1 Assignment 1: Research HTML5 Enhancements

1%Assignment

Unit 1 Assignment 2: Research Mobile Web Development

1%

Unit 1 Lab 1-1: Configure ITT-Lab 1%LabUnit 1 Lab 1-2: Create a Web Page Using HTML5 2%

GRADED ACTIVITIES / DELIVERABLES

Project† Project Part 1: Using HTML to Create a Homepage 2%


10 Date: 7/13/2013

Unit 2: CSSUpon completion of this unit, students are expected to:

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.

Total outside work:

7.5 hours


Total PagesREADING



Complete the reading assignment 2.5 hrsComplete Unit 2 Assignment 1: Research CSS (Level 1) vs. CSS3 1.5 hrsComplete Unit 2 Assignment 2: Research CSS3 for Mobile Web Development

1.5 hrsOUT-OF-CLASS

WORK

Complete Project Part 2: Applying a Style to the Homepage 2 hrs



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

1%Assignment

Unit 2 Assignment 2: Research CSS3 for Mobile Web Development

1%

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

2%

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

1%

Lab

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

1%


Project† Project Part 2: Applying a Style to the Homepage 2%


11 Date: 7/13/2013

Unit 3: DYNAMIC WEBSITES WITH CSS AND JAVASCRIPTUpon completion of this unit, students are expected to:

Create a fixed-layout Web page using CSS. Create a liquid-layout Web page using CSS. Create a hybrid Web page using CSS. Describe server-side scripting. Describe client-side scripting. Create a JavaScript event handler. Display random content using JavaScript. Document JavaScript code using comments.

Total outside work:

6.5 hours


Total PagesREADING

ASSIGNMENT Kyrnin, Meloni, & Dutson Chapters 5, 6, and 7 43


Complete the reading assignment 3 hrsComplete Unit 3 Assignment 1: Researching Layouts 1.5 hrs

OUT-OF-CLASS WORK

Complete Project Part 3: Applying a Hybrid Layout to the Homepage 2 hrs



Assignment Unit 3 Assignment 1: Researching Layouts 2%Unit 3 Lab 3-1: Compare Fixed, Liquid, and Hybrid Layouts

1%Lab

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


Project† Project Part 3: Applying a Hybrid Layout to the Homepage

2%


12 Date: 7/13/2013

Unit 4: WRITING JAVASCRIPT CODEUpon completion of this unit, students are expected to:

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.

Total outside work:

8 hours


Total PagesREADING


Activity Estimated TimeActivity Estimated Time

Complete the reading assignment 3 hrsComplete Unit 4 Assignment 1: Research DOM Level 3 vs. DOM Level 2

2 hrs

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

1.5 hrsOUT-OF-CLASS

WORK

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

1.5 hrs



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

2%Assignment

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

1%

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

1%Lab

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

1%


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

2%


13 Date: 7/13/2013

Unit 5: FUNCTIONS, OBJECTS, CONDITIONS, AND LOOPSUpon completion of this unit, students are expected to:

Create a JavaScript function. Create custom objects. Use and extend built-in objects. Write code that uses conditional statements. Write code that uses loops.

Total outside work:

6.5 hours


Total PagesREADING



Complete the reading assignment 2.5 hrsComplete Unit 5 Assignment 1: Design a Program 2 hrs

OUT-OF-CLASS WORK

Complete Project Part 5: Adding a Registration Form to the Website 2 hrs



Assignment Unit 5 Assignment 1: Design a Program 3%Lab Unit 5 Lab 5-1: Add Forms and Data Validation to a

Web Page2%


Project† Project Part 5: Adding a Registration Form to the Website

3%


14 Date: 7/13/2013

Unit 6: EVENTS AND BROWSER CAPABILITY DETECTIONUpon completion of this unit, students are expected to:

Describe how JavaScript event handlers work. Create JavaScript event handlers. Explain various methods of determining which features a browser supports. Explain what “graceful degradation” means. Identify the steps for testing a mobile website.

Total outside work:

6.5 hours


Total PagesREADING



Complete the reading assignment 2 hrsComplete Unit 6 Assignment 1: Research DOM Level 3 Events vs. DOM Level 2 Events

1 hr

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

1.5 hrsOUT-OF-CLASS

WORK

Complete Project Part 6: Adding HTML Events to the Registration Form

2 hrs



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

1%Assignment

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

2%

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

2%Lab

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

1%


Project† Project Part 6: Adding HTML Events to the Registration Form

3%


15 Date: 7/13/2013

Unit 7: MOBILE WEB APPLICATIONUpon completion of this unit, students are expected to:

Explain the use of progressive enhancement. 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.

Total outside work:

6.5 hours


Total PagesREADING



Complete the reading assignment 2.5 hrsComplete Unit 7 Assignment 1: Analyze Mobile Website Design 1.5 hrs

OUT-OF-CLASS WORK

Complete Project Part 7: Creating a Mobile Version of the Website 2.5 hrs



Assignment Unit 7 Assignment 1: Analyze Mobile Website Design 2%Unit 7 Lab 7-1: Create a Web Page that Uses Progressive Enhancement

2%Lab

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

1%


Project† Project Part 7: Creating a Mobile Version of the Website

3%


16 Date: 7/13/2013

Unit 8: HTML CANVAS AND FORMSUpon completion of this unit, students are expected to:

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. Describe the new functionality supported in HTML5 forms. Create a form that uses HTML5 features. Create a form that performs input validation.

Total outside work:

6.5 hours


Total PagesREADING



Complete the reading assignment 2.5 hrsComplete Unit 8 Assignment 1: Describe the Uses for the <canvas> Element

1 hr

Complete Unit 8 Assignment 2: Research HTML5 Changes to Forms 1 hr

OUT-OF-CLASS WORK

Complete Project Part 8: Adding HTML Events to the Registration Form

2 hrs



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

1%Assignment

Unit 8 Assignment 2: Research HTML5 Changes to Forms

2%

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

2%Lab

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

2%


Project† Project Part 8: Adding HTML Events to the Registration Form

3%


17 Date: 7/13/2013

Unit 9: JQUERY FRAMEWORKSUpon completion of this unit, students are expected to:

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.

Total outside work:

7.5 hours


Total PagesREADING



Complete the reading assignment 2.5 hrsComplete Unit 9 Assignment 1: Research and Compare jQuery with Other Popular JavaScript Frameworks

1.5 hrs

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

1.5 hrsOUT-OF-CLASS

WORK

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

2 hrs



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

2% Assignment

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

1%

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

1%Lab

Unit 9 Lab 9-2: Program a Mobile Web Page Using jQuery Mobile

1%


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

2%


18 Date: 7/13/2013

Unit 10: LINKS AND GEOLOCATIONUpon completion of this unit, students are expected to:

Use a validator to test a Web page. Use emulators to test a Web page. Describe new link functionality in HTML5. Create a Web page that uses HTML5 link types. Describe the features of the geolocation API. Create a Web page that uses the geolocation API.

Total outside work:

5.5 hours


Total PagesREADING



Complete the reading assignment 2 hrsComplete Unit 10 Assignment 1: Research Map APIs 1.5 hrs

OUT-OF-CLASS WORK

Complete Project Part 10: Test and Finalize Your Website 2 hrs



Assignment Unit 10 Assignment 1: Research Map APIs 2%Unit 10 Lab 10-1: Create a Web Page that Uses HTML5 Link Types

2%Lab

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

2%


Project† Project Part 10: Test and Finalize Your Website 3%

Unit 11: COURSE REVIEW AND FINAL EXAMINATIONUpon completion of this unit, students are expected to:

Demonstrate mastery of all Learning Outcomes.

Total outside work:

5 hours


Total PagesREADING

ASSIGNMENT None Activity Estimated

TimeOUT-OF-CLASS WORK Study for final exam 5 hrs




Exam Final Exam 20%

Note: Your instructor may add a few learning activities that are ungraded. † Candidate for ePortfolio


19 Date: 7/13/2013

Evaluation and Grading

Evaluation Criteria

The graded assignments will be evaluated using the following weighted categories:

Category In-Class Out-of-Class Weight

Assignment 0% 25% 25%

Lab 30% 0% 30%

Project 0% 25% 25%

Exam 20% 0% 20%

TOTAL 50% 50% 100%

Grade Conversion

The final grades will be calculated from the percentages earned in the course, as follows:

Grade Percentage

A (4.0) 90–100%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%


20 Date: 7/13/2013

Academic Integrity

All students must comply with the policies that regulate all forms of academic dishonesty or academic

misconduct, including plagiarism, self-plagiarism, fabrication, deception, cheating, and sabotage. For

more information on the academic honesty policies, refer to the Student Handbook and the Course

Catalog.

(End of Syllabus)

Documents

SD1340 Onsite · PDF fileMA1210 College Mathematics I EN1320 Composition I EN1420 Composition II MA1310 College Mathematics II Technical Core Course ... ITT-Lab (Android) virtual