Republic Polytechnic School of Infocomm C308 Web Framework. Module Curriculum

Transcription

1 Republic Polytechnic School of Infocomm C308 Web Framework Module Curriculum This document addresses the content related abilities, with reference to the module. Abilities of thinking, learning, problem solving, and teamwork, communication, debating and defending are addressed by the system wide curricular practices at the institute. Module Description The module covers foundational knowledge and skills to develop Mobile Applications using the Mobile Web Framework. Topics would include fundamentals of HTML5, CSS3, JavaScript, and jquery Mobile to develop Mobile Web Applications using the Web Framework, as well as the use of PhoneGap to package the Mobile Web Applications into Native Mobile Applications. Module Objectives Upon completing this module, students should be able to: 1. Understand the overall architecture of a Mobile Web Application. i. Identifies the difference between Mobile Web Application and Desktop Web Application. ii. Aware of the strength and limitation of Mobile Web Application. iii. Understand the impact of mobile web browser on the design of the Mobile Web Application. iv. Explain the role of HTML, CSS and JavaScript components in the Mobile Web Framework and how they interact with each other. 2. Creates Mobile Web Application using the jquery Mobile Framework. i. Understands jquery Mobile Application structure and navigation ii. Constructs pages, dialogs, list, forms and layouts. iii. Create and customize page elements, content layout and embedding videos/audio elements. iv. Applies mobile specific customization, event handling and themes. 3. Generates Native Mobile Application from Mobile Web Application using PhoneGap. i. Describe the PhoneGap architecture. ii. Configure the development environments for PhoneGap. iii. Creating device specific native application. iv. Enhance Mobile Web Applications using PhoneGap APIs. Module Assessment This module is assessed as follows: Daily Grade 40% Understanding Tests - 60 % Module Syllabus Learning Objectives:

2 Module Coverage Difference between Desktop Web Application and Mobile Web Application Understanding the difference in user interface design between desktop web application and mobile web application Know how user experience on mobile web application differs from desktop web application Recognize how information are presented differently on desktop web application and mobile web application Architecture of mobile web framework Understand what makes a mobile web application look and feel like a native mobile application. Know the role of HTML5, CSS, and jquery Javascript and how they interact with each other. Understand the structure of HTML5, styling with CSS and client-side interaction using JavaScript. jquery mobile framework List and understand the benefits of using jquery mobile framework. Understand the basic jquery mobile page structure. Create and modify jquery mobile pages. Able to use jquery mobile single page and multi-page templates. Page transitions for mobile web applications List and use the common jquery mobile built-in set of page transitions with data-transition attribute. Understand how use page transition to add effects and interactivity to a mobile web app. Know how to seamlessly link external Allocated time per day (One day-one problem PBL pedagogy) Resource gathering and team work Discussions in Study Cluster Formal Lab Experiment

3 jquery Mobile pages. jquery mobile themes Understand and use the jquery mobile s theme framework. List and use the built-in default themes provided by jquery mobile. Create and customize jquery mobile themes using jquery mobile ThemeRoller. Know how to apply default and customized theme using the datatheme attribute. Know how to go back to last visited page using the data-rel= back attribute Basics of PhoneGap Configure PhoneGap development environments for Android. Generate PhoneGap Android apps using existing jquery Mobile Web App. Download and test generated PhoneGap Android app on Android emulator. Understand PhoneGap use of Android webview to display jquery mobile app in Android. Know how to use jquery mobile offline. Buttons and icons Understand the benefits of using PhoneGap Understand the different types of buttons. Know how to change the buttons appearance using the jquery mobile data attributes. List and use the common jquery mobile built-in set of icons. Adding and positioning icons on buttons. Create and use custom icons. Grid, Panel and Collapsible blocks Understand the need to display content differently on mobile devices. List and use the built-in grid and columns provided by jquery mobile. Use columns and grids to align and

4 format content. Use collapsible blocks to hide and show content. Use Panel to hide and show content. Mobile-specific events Understanding the importance of jquery Mobile page initialization. Understanding the usage of various jquery Mobile page transition events. Understand the different mobilespecific touch events. Enhancing mobile app with mobilespecific touch events using jquery scripts. Audio and Video Enhancing mobile web app content with video and audio files. Embedding videos from video hosting and sharing sites into mobile web apps. Embedding self-hosted videos/audio into mobile web apps. Dialogs and Popups Understand the difference between dialog and popup. Understand how to use popups provided by jquery mobile. Create and use dialogs and popups. Know how to change the appearance of popup and dialogs. Toolbar and navigation Understand the importance of easily accessible navigation elements. List and use the toolbar elements provided by jquery mobile. Create and customize toolbars with buttons, text or links. Position toolbar elements using the fixed, full-screen, and persistent footer option. List List and use the built-in lists provided by jquery mobile. Create and format list for navigation and content presentation. Know how to use list divider to format list and content.

5 Able to add icons and thumbnails to list. Understand and use the list search filter bar. Forms Understanding how forms are supported by jquery mobile. List and format common form input elements with jquery mobile. Create and submit forms using jquery mobile. PhoneGap APIs Describes the PhoneGap APIs. Uses the PhoneGap APIs to add in native features to the mobile application. Generate, download and test the native applications packages on devices. Total = 15 Problems = 90 hours