1st Specialized Workshop on Ubiquitous Learning: Mobile Learning Content Apps Development 7-8 Feb 2014 Bilik Majlis,

Universiti Kebangsaan Malaysia

Mobile Learning App Using jQuery Mobile jQuery Mobile is a touch-friendly user interface framework based on jQuery that works across all popular phones, tablet, e-reader, and desktop platforms. Built with accessibility and universal access in mind, we follow progressive enhancement and responsive web design (RWD) principles. HTML5 Markup-driven configuration makes it easy to learn, but a powerful API makes it easy to deeply customize the library. jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

Tentative Program This 2-day introductory workshop is designed to assist teacher/lecturers to develop simple mobile learning content using jQuery. There is no emphasis in theory and no basic or deep knowledge needed. Participants will be guided on how to use an easy web server and simple editor for mobile apps development. In addition, some templates will be provided for easy mobile development. Each participants should bring his/her own laptop and sample lecture notes so that he/she can develop real mobile learning content with features as described below:

Day 1 Content 1. Introduction to Mobile Web Application 2. Basic HTML5 a. HTML tag b. Link c. Paragraph d. Image/Picture 3. Getting Started to jQuery Mobile a. Pages Anatomy b. External Page c. Transition d. List e. Collapsible f. Button g. Icon h. Navigation 4. Deploy To The World a. Using Web Hosting (IF Applicable) Tentative Time 8:00 8:30 8:30 10:30

Agenda Registration Introduction Prepare for Development HTML5 for mobile Tea Break Creating Mobile Web Lunch & Solat Completing Web Mobile Deploy to real world Refreshment

10:30 11:00 11:00 12:00 12:00 2:45 2:45 4:45 4:45 5:00

The second day of the workshop is designed to make the mobile app more interactive. As web apps can be transformed to native apps, participant would try this hybrid technology to deploy web app as native app so that can be installed to mobile device. This hybrid technology is applicable to all major mobile device OSs including iOS (for iPhone and iPad), Android and Windows. However, for this hands-on session will focus on Android as no restriction such as certificate and developer account in iOS and Windows. For this purpose, each participants should bring his/her own Laptop and an Android device such as Samsung Galaxy S3/S4/Tab, Lenovo etc with the devices USB Cable. Day 2 Content 1. Additional HTML5 a. Using Audio b. Video 2. Extending Mobile Content a. Popup b. Panel c. Table d. Communication i. Phone Call ii. SMS iii. Mail e. Custom Themes

Tentative Time 8:00 8:30 8:30 10:30 10:30 11:00 11:00 1:00 1:00 2:15

Agenda Registration Extending Mobile Content Tea Break Communication Link Custom Theme Lunch & Solat

3. Mobile Packaging For Android a. Using Cordova Explanation (Can be used for iOS and Windows) b. Apply with Eclips c. Deploy Package d. Test app to Simulator or device

2:15 4:15 4:15 4:30 4:30 5:00

Creating Native App Deploy to Device Refreshment Q&A