MTA EXAM HTML5 Application Development Fundamentals

98-375: OBJECTIVE 1 Manage the Application Life Cycle

Debug and test an HTML5-based touch- enabled application LESSON 1.3

In this lesson, you will review the following: Strategies to debug and test an HTML5-based touch-enabled application. The features of a HTML5-based touch-enabled application. OVERVIEW Lesson 1.3

Why is it important to debug and test your application? What are the features of an HTML5-based touch-enabled application? How is an HTML5 touch-enabled application tested? GUIDING QUESTIONS Lesson 1.3

LECTURE Lesson 1.3 HTML5 Feature Testing Test on various browsers, such as Internet Explorer ®, Firefox, Mozilla, and Google Chrome o Use the browsers on your desktop for initial debugging and testing. o If possible, test on different versions of each browser. o Test for various screen resolutions and browser window sizes.

LECTURE Lesson 1.3 Understand Touch Events in HTML5 Touch events include: o Touchstart: initiated when a finger is place on a DOM element o Touchmove: when the object is dragged o Touchend: when the object is released (finger is removed) Each touch event creates three lists: o Touches: a list of all fingers currently on the screen o targetTouches: list of fingers on the DOM o changedTouches: all fingers involved in the current event

LECTURELesson 1.3 Best practices for designing for mobile devices Prevent zooming Prevent scrolling Render carefully

DEMONSTRATION Lesson 1.3 Touch-Enabled Demonstration In this demonstration, you will see how to: Add touch interaction that handles input from: o mouse o finger o pen

DISCUSSION Lesson 1.3 Touch-Enabled Devices What are the pros and cons of touch-enabled devices?

IN-CLASS ACTIVITY Lesson 1.3 Directions: Read the scenario in the activity and answers the questions. Work with a partner to brainstorm additional ideas for the site.

REVIEW Lesson 1.3 Can you answer these? Why is it important to test your application on multiple browsers? What are the features of an HTML5-based touch-enabled application? How is a touch-enabled application tested?

ADDITIONAL RESOURCES Lesson 1.3 MSDN Resources HTML5 Tutorialshttp://msdn.microsoft.com/en- us/ie/aa Internet Explorer Test Drivehttp://ie.microsoft.com/testdrive/Default.ht ml Internet Explorer 9 Guide for Developers us/ie/hh Other Resources W3Schoolshttp:// W3C Mobile Device Validatorhttp://validator.w3.org/mobile/ Mobile Validatorhttp://ready.mobi/